Auto-deploy: 2026-01-13 13:35:23 | 1 arquivo(s) alterado(s)

src/features/workspace/views/LoginView.jsx

@@ -1,83 +1,151 @@
 import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
 import { useNavigate } from 'react-router-dom';
-import { Lock, Eye, EyeOff, Zap, ArrowRight, ShieldCheck } from 'lucide-react';
+import { 
-import { motion } from 'framer-motion';
+  Lock, 
+  ChevronRight, 
+  ShieldCheck, 
+  AlertCircle, 
+  Eye, 
+  EyeOff,
+  User,
+  Zap
+} from 'lucide-react';
+import { useAuthContext } from '@/components/shared/AuthProvider';
+import logo from '@/assets/Img/Util/iT_Guys/logo1.png';
 
+/**
+ * LoginView - Versão Premium para o Workspace iTGUYS
+ * Inspirado no design "Reproduced" com split-screen e alta fidelidade visual.
+ */
 export const LoginView = () => {
   const [password, setPassword] = useState('');
   const [showPassword, setShowPassword] = useState(false);
   const [error, setError] = useState('');
-  const [loading, setLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [step, setStep] = useState(1); // 1: Login, 2: Verification (Visual Demo)
   const navigate = useNavigate();
 
-  // Senhas de teste autorizadas
+  const handleLogin = async (e) => {
-  const TEST_PASSWORDS = ['itguys@2026', 'teste@finance', 'admin'];
-
-  const handleLogin = (e) => {
     e.preventDefault();
-    setLoading(true);
+    setIsLoading(true);
     setError('');
 
-    // Simula uma pequena latência para efeito visual premium
+    // Senhas de teste permitidas
+    const allowedPasswords = ['itguys@2026', 'teste@finance', 'admin'];
+
     setTimeout(() => {
-      if (TEST_PASSWORDS.includes(password)) {
+      if (allowedPasswords.includes(password)) {
-        sessionStorage.setItem('workspace_access', 'true');
+        sessionStorage.setItem('workspace_access', 'granted');
-        navigate('/plataforma/workspace');
+        setStep(2); // Muda para o passo de verificação visual
+        setIsLoading(false);
       } else {
-        setError('Senha de acesso inválida ou expirada.');
+        setError('Chave de acesso inválida ou expirada.');
+        setIsLoading(false);
       }
-      setLoading(false);
     }, 800);
   };
 
+  const handleFinalize = () => {
+    navigate('/plataforma/workspace');
+    window.location.reload();
+  };
+
   return (
-    <div className="workspace-theme min-h-screen bg-[#050914] flex items-center justify-center p-6 relative overflow-hidden font-sans">
+    <div className="flex h-screen w-full bg-[#0a0a0a] overflow-hidden font-lato select-none text-white">
-      {/* Background Decorativo */}
+      {/* Left Panel - Brand & Identity */}
-      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+      <div className="hidden lg:flex flex-1 relative items-center justify-center overflow-hidden border-r border-white/5 bg-[#050505]">
-        <div className="absolute top-[20%] right-[10%] w-[30%] h-[30%] bg-[#22c0a3]/10 rounded-full blur-[120px] animate-pulse" />
+        {/* Background Effects */}
-        <div className="absolute bottom-[20%] left-[10%] w-[30%] h-[30%] bg-[#26b1c7]/10 rounded-full blur-[120px] animate-pulse" style={{ animationDelay: '1s' }} />
+        <div className="absolute inset-0 z-0">
+           <div className="absolute inset-0 bg-gradient-to-br from-[#003153]/40 to-transparent mix-blend-overlay" />
+           <div className="absolute top-[-10%] right-[-10%] w-[50%] h-[50%] bg-[#22bb6c]/10 blur-[120px] rounded-full" />
+           <div className="absolute bottom-[-10%] left-[-10%] w-[50%] h-[50%] bg-[#003153]/20 blur-[120px] rounded-full" />
         </div>
         
+        {/* Logo Area */}
         <motion.div 
-        initial={{ opacity: 0, y: 20 }}
+          initial={{ opacity: 0, scale: 0.9, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
+          animate={{ opacity: 1, scale: 1, y: 0 }}
-        className="max-w-md w-full z-10"
+          transition={{ duration: 1 }}
+          className="relative z-10 flex flex-col items-center text-center px-12"
         >
-        <div className="bg-white/5 backdrop-blur-2xl border border-white/10 rounded-[2.5rem] p-10 shadow-2xl space-y-8">
+          <img 
-          <div className="text-center space-y-4">
+            src={logo} 
-             <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#22c0a3]/10 text-[#22c0a3] text-[0.65rem] font-black uppercase tracking-widest mb-2 border border-[#22c0a3]/20">
+            alt="iTGUYS Logo" 
-                <ShieldCheck size={14} className="fill-[#22c0a3]" /> Acesso Restrito
+            className="w-full max-w-[400px] mb-8 drop-shadow-[0_0_25px_rgba(34,187,108,0.2)]"
+          />
+          <div className="h-[2px] w-24 bg-gradient-to-r from-transparent via-[#22bb6c] to-transparent mb-6" />
+          <h2 className="text-3xl font-black italic tracking-tighter text-white/90">
+             WORKSPACE <span className="text-[#22bb6c]">EXPERIENCE</span>
+          </h2>
+          <p className="mt-4 text-white/40 max-w-sm text-sm font-medium uppercase tracking-[0.3em]">
+             Gestão Estratégica & Inteligência Financeira
+          </p>
+        </motion.div>
+
+        {/* Floating Badges */}
+        <div className="absolute bottom-10 left-10 flex gap-4 z-10 opacity-30">
+           <div className="flex items-center gap-2 px-3 py-1.5 rounded-full border border-white/10 bg-white/5 text-[10px] font-bold uppercase tracking-widest text-[#22bb6c]">
+              <ShieldCheck size={12} /> Encrypted
            </div>
-             <div className="flex flex-col items-center gap-4">
+           <div className="flex items-center gap-2 px-3 py-1.5 rounded-full border border-white/10 bg-white/5 text-[10px] font-bold uppercase tracking-widest text-slate-400">
-                <div className="w-20 h-20 bg-gradient-to-br from-[#22bb6c] to-[#22c0a3] rounded-3xl flex items-center justify-center shadow-2xl shadow-[#22c0a3]/20">
+              Versão 2026.1
-                   <Zap size={40} className="text-white fill-white" />
            </div>
-                <h1 className="text-3xl font-black text-white tracking-tighter">Workspace <span className="text-[#22c0a3]">Finance</span></h1>
         </div>
-             <p className="text-slate-400 text-sm font-medium">Ambiente em fase de ajuste. Insira a chave de acesso para continuar.</p>
+      </div>
+
+      {/* Right Panel - Interactive Form */}
+      <div className="flex-[0.8] flex items-center justify-center p-8 bg-[#0a0a0a] relative overflow-hidden">
+        {/* Decorative Grid */}
+        <div className="absolute inset-0 opacity-[0.02] pointer-events-none" 
+             style={{ backgroundImage: 'radial-gradient(#fff 1px, transparent 0)', backgroundSize: '40px 40px' }} 
+        />
+
+        <AnimatePresence mode="wait">
+          {step === 1 ? (
+            <motion.div 
+              key="step1"
+              initial={{ opacity: 0, x: 50 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: -50 }}
+              className="w-full max-w-[420px] space-y-8 relative z-10"
+            >
+              <div className="space-y-2">
+                <div className="inline-flex items-center gap-2 text-[#22bb6c] font-black text-xs uppercase tracking-[0.3em] mb-2 bg-[#22bb6c]/10 px-3 py-1 rounded-full">
+                   <Lock size={12} /> Restricted Access
+                </div>
+                <h1 className="text-4xl font-extrabold tracking-tighter text-white">Identifique-se</h1>
+                <p className="text-white/40 text-sm font-medium">Insira sua chave mestra para acessar o sistema.</p>
               </div>
 
               <form onSubmit={handleLogin} className="space-y-6">
-            <div className="space-y-2 group">
+                <div className="space-y-4">
-              <label className="text-[0.7rem] font-bold uppercase tracking-widest text-slate-500 ml-1 group-focus-within:text-[#22c0a3] transition-colors">
+                  {/* User field (Readonly for Context) */}
-                Chave de Acesso
+                  <div className="relative group">
-              </label>
+                    <User className="absolute left-4 top-1/2 -translate-y-1/2 text-white/20 group-focus-within:text-[#22bb6c] transition-colors" size={20} />
-              <div className="relative">
-                <div className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-500 group-focus-within:text-[#22c0a3] transition-colors">
-                  <Lock size={18} />
-                </div>
                     <input 
-                  type={showPassword ? "text" : "password"} 
+                      type="text" 
+                      value="PLATAFORMA SISTEMAS"
+                      disabled
+                      className="w-full bg-white/[0.03] border border-white/10 rounded-2xl py-4 pl-12 pr-4 text-white/40 text-sm font-bold opacity-60 cursor-not-allowed uppercase tracking-wider"
+                    />
+                  </div>
+
+                  {/* Password Field */}
+                  <div className="relative group">
+                    <Lock className="absolute left-4 top-1/2 -translate-y-1/2 text-white/20 group-focus-within:text-[#22bb6c] transition-colors" size={20} />
+                    <input 
+                      type={showPassword ? 'text' : 'password'} 
                       value={password}
                       onChange={(e) => setPassword(e.target.value)}
-                  placeholder="••••••••"
+                      placeholder="Chave de Acesso"
-                  className="w-full pl-12 pr-12 py-4 bg-white/5 border-none rounded-2xl ring-1 ring-white/10 focus:ring-2 focus:ring-[#22c0a3] outline-none transition-all text-white font-medium shadow-sm placeholder:text-slate-600"
+                      autoFocus
-                  required
+                      className="w-full bg-white/[0.05] border border-white/10 rounded-2xl py-4 pl-12 pr-12 text-white text-sm font-bold focus:ring-2 focus:ring-[#22bb6c]/50 focus:border-[#22bb6c] focus:bg-white/[0.08] outline-none transition-all placeholder:text-white/20 tracking-[0.2em]"
                     />
                     <button 
                       type="button"
                       onClick={() => setShowPassword(!showPassword)}
-                  className="absolute right-4 top-1/2 -translate-y-1/2 text-slate-500 hover:text-white transition-colors"
+                      className="absolute right-4 top-1/2 -translate-y-1/2 text-white/20 hover:text-white transition-colors"
                     >
                       {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
                     </button>
@@ -86,36 +154,75 @@ export const LoginView = () => {
 
                 {error && (
                   <motion.div 
-                 initial={{ opacity: 0, scale: 0.95 }}
+                    initial={{ opacity: 0, y: -10 }}
-                 animate={{ opacity: 1, scale: 1 }}
+                    animate={{ opacity: 1, y: 0 }}
-                 className="p-4 bg-red-500/10 border border-red-500/20 rounded-2xl text-red-500 text-[0.7rem] font-bold text-center uppercase tracking-tight"
+                    className="flex items-center gap-2 p-4 bg-red-500/10 border border-red-500/20 rounded-xl text-red-500 text-xs font-bold"
                   >
-                 {error}
+                    <AlertCircle size={14} /> {error}
                   </motion.div>
                 )}
 
                 <button
                   type="submit"
-              disabled={loading}
+                  disabled={isLoading || !password}
-              className="w-full py-5 bg-[#22c0a3] hover:bg-[#22bb6c] text-white font-black rounded-2xl shadow-xl shadow-[#22c0a3]/20 transform active:scale-[0.98] transition-all flex items-center justify-center gap-3 text-sm uppercase tracking-[0.2em]"
+                  className="w-full relative overflow-hidden group bg-gradient-to-r from-[#22bb6c] to-[#22c0a3] disabled:from-zinc-800 disabled:to-zinc-900 text-[#050505] rounded-2xl py-4 font-black text-sm uppercase tracking-[0.2em] shadow-xl shadow-[#22bb6c]/20 hover:scale-[1.02] active:scale-[0.98] transition-all"
                 >
-              {loading ? (
+                  {isLoading ? (
-                <div className="w-5 h-5 border-3 border-white/30 border-t-white rounded-full animate-spin" />
+                    <div className="flex items-center justify-center gap-3">
+                      <div className="w-4 h-4 border-2 border-[#050505]/30 border-t-[#050505] rounded-full animate-spin" />
+                      <span>Validando...</span>
+                    </div>
                   ) : (
-                <>
+                    <div className="flex items-center justify-center gap-2">
-                  Entrar no Workspace <ArrowRight size={20} />
+                       Acessar Ambiente <ChevronRight size={18} className="group-hover:translate-x-1 transition-transform" />
-                </>
+                    </div>
                   )}
                 </button>
               </form>
 
-          <div className="pt-6 border-t border-white/5 text-center">
+              <div className="pt-8 flex items-center justify-center gap-8 border-t border-white/5 opacity-40">
-            <span className="text-[10px] text-slate-500 uppercase tracking-[0.4em] font-black opacity-60">
+                 <img src={logo} alt="Logo" className="h-4 grayscale hover:grayscale-0 transition-all cursor-crosshair" />
-              © 2026 iTGUYS • SISTEMAS DE ALTA PERFORMANCE
+                 <span className="text-[10px] text-zinc-500 uppercase tracking-widest font-bold">iTGUYS Core Systems v4</span>
-            </span>
-          </div>
               </div>
             </motion.div>
+          ) : (
+            /* Verification Step (Image 1 reference) */
+            <motion.div 
+              key="step2"
+              initial={{ opacity: 0, scale: 0.9 }}
+              animate={{ opacity: 1, scale: 1 }}
+              className="bg-[#0f1d2b] border border-[#22bb6c]/30 p-12 rounded-[40px] shadow-2xl shadow-emerald-950/40 flex flex-col items-center text-center max-w-[480px] w-full"
+            >
+               <div className="w-20 h-20 bg-gradient-to-br from-[#22bb6c] to-[#22c0a3] rounded-3xl flex items-center justify-center mb-8 shadow-lg shadow-emerald-500/30">
+                  <ShieldCheck size={42} className="text-[#050505]" />
+               </div>
+               <h2 className="text-3xl font-black text-white italic tracking-tighter mb-4 uppercase">Chave Confirmada</h2>
+               <p className="text-white/50 text-sm font-medium mb-12">O ambiente de teste do Workspace está liberado para o seu perfil administrativo.</p>
+               
+               {/* Decorative numeric placeholders (Image 1 style) */}
+               <div className="flex gap-3 mb-12">
+                  {[1,2,3,4,5,6].map(i => (
+                    <div key={i} className="w-12 h-16 bg-white/5 border border-white/10 rounded-2xl flex items-center justify-center">
+                       <div className="w-2 h-2 bg-[#22bb6c] rounded-full animate-pulse" />
+                    </div>
+                  ))}
+               </div>
+
+               <button
+                 onClick={handleFinalize}
+                 className="w-full bg-white text-[#050505] rounded-[20px] py-4 font-black uppercase tracking-widest hover:bg-[#22bb6c] hover:text-white transition-all shadow-xl"
+               >
+                 Entrar no Sistema
+               </button>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+
+      {/* Decorative Blur and Logo Overlay for Mobile (if any) */}
+      <div className="absolute top-0 left-0 w-full h-full pointer-events-none overflow-hidden z--1 opacity-20">
+         <div className="absolute top-[-20%] left-[-10%] w-[60%] h-[60%] bg-[#003153] blur-[150px] rounded-full" />
+      </div>
     </div>
   );
 };