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

src/features/workspace/components/WorkspaceLayout.jsx

@@ -3,18 +3,20 @@ import {
   Bell,
   Search,
   Maximize2,
-  HelpCircle,
-  User
+  User,
+  Zap,
+  LayoutDashboard
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { WorkspaceSidebar } from './WorkspaceSidebar';
 import { IncomesView } from '../views/IncomesView';
 import { ExpensesView } from '../views/ExpensesView';
 import { ReconciliationView } from '../views/ReconciliationView';
+import logo from '@/assets/Img/Util/iT_Guys/logo1.png';
 
 /**
  * WorkspaceLayout - O container principal para o ambiente de teste/workspace.
- * Apresenta uma estrutura premium isolada do restante da plataforma.
+ * Refinado com o design "Reproduced" e a identidade visual oficial da iTGUYS.
  */
 export const WorkspaceLayout = () => {
   const [activeScreen, setActiveScreen] = useState('entradas');
@@ -23,9 +25,12 @@ export const WorkspaceLayout = () => {
     switch (activeScreen) {
       case 'dashboard':
         return (
-          <div className="flex flex-col items-center justify-center min-h-[400px] text-slate-400 italic">
-            <h2 className="text-xl font-bold not-italic text-slate-700 dark:text-stone-200 mb-2 uppercase tracking-tighter">Dashboard Geral</h2>
-            Em desenvolvimento...
+          <div className="flex flex-col items-center justify-center min-h-[500px] text-slate-400">
+             <div className="w-24 h-24 bg-zinc-900 rounded-3xl flex items-center justify-center mb-6 shadow-2xl border border-white/5 animate-pulse">
+                <LayoutDashboard size={48} className="text-[#f1c232]" />
+             </div>
+             <h2 className="text-2xl font-black text-white uppercase tracking-tighter italic mb-2">Painel de Inteligência</h2>
+             <p className="text-zinc-500 font-medium uppercase tracking-[0.3em] text-xs">Aguardando consolidação de dados financeiros</p>
           </div>
         );
       case 'entradas':
@@ -36,9 +41,9 @@ export const WorkspaceLayout = () => {
         return <ReconciliationView />;
       case 'config':
         return (
-          <div className="flex flex-col items-center justify-center min-h-[400px] text-slate-400 italic">
-            <h2 className="text-xl font-bold not-italic text-slate-700 dark:text-stone-200 mb-2 uppercase tracking-tighter">Configurações</h2>
-            Em desenvolvimento...
+          <div className="flex flex-col items-center justify-center min-h-[500px] text-slate-400">
+             <h2 className="text-xl font-bold text-white uppercase tracking-tighter italic mb-2">Configurações Base</h2>
+             <p className="text-zinc-500 font-medium">Módulo de permissões e chaves de API em desenvolvimento.</p>
           </div>
         );
       default:
@@ -47,52 +52,88 @@ export const WorkspaceLayout = () => {
   };
 
   return (
-    <div className="workspace-theme flex h-screen w-full bg-[#f8fafc] dark:bg-[#121212] overflow-hidden font-lato">
-      {/* Sidebar Customizado (Reproduced Design) */}
+    <div className="workspace-theme flex h-screen w-full bg-[#0a0a0a] overflow-hidden font-lato">
+      
+      {/* Sidebar REPRODUCED (Design Angular de Alta Fidelidade) */}
       <WorkspaceSidebar activeScreen={activeScreen} onScreenChange={setActiveScreen} />
 
       {/* Main Content Area */}
-      <main className="flex-1 flex flex-col relative overflow-hidden">
-        {/* Header Header Premium */}
-        <header className="h-20 bg-white/80 dark:bg-[#1b1b1b]/80 backdrop-blur-md border-b border-slate-200 dark:border-white/5 flex items-center justify-between px-8 z-30">
-          <div className="flex items-center gap-4">
-             <div className="flex items-center gap-2 text-slate-400 group cursor-pointer hover:text-[var(--workspace-sec-5-light)] transition-colors">
-               <Maximize2 size={18} className="rotate-45" />
+      <main className="flex-1 flex flex-col relative overflow-hidden bg-[#0a0a0a]">
+        
+        {/* Dynamic Background Effect */}
+        <div className="absolute top-0 right-0 w-[600px] h-[600px] bg-[#22bb6c]/5 blur-[120px] rounded-full -mr-64 -mt-64 pointer-events-none z-0" />
+
+        {/* Header Superior Premium */}
+        <header className="h-20 bg-zinc-950/80 backdrop-blur-xl border-b border-white/5 flex items-center justify-between px-10 z-30">
+          <div className="flex items-center gap-6">
+             {/* breadcrumb conceitual */}
+             <div className="flex items-center gap-3">
+               <div className="w-8 h-8 rounded-lg bg-zinc-900 flex items-center justify-center border border-white/5">
+                  <Zap size={16} className="text-[#f1c232]" />
+               </div>
+               <div className="flex flex-col">
+                  <span className="text-[10px] font-black text-zinc-600 uppercase tracking-widest leading-none mb-1">Sistema iTGUYS</span>
+                  <h2 className="text-sm font-black text-white uppercase tracking-[0.1em] leading-none">
+                    Workspace / <span className="text-[#f1c232]">{activeScreen}</span>
+                  </h2>
+               </div>
              </div>
-             <div className="h-6 w-[1px] bg-slate-200 dark:bg-white/10" />
-             <h2 className="text-sm font-black text-slate-600 dark:text-stone-300 uppercase tracking-[0.2em]">
-               Workspace / <span className="text-[var(--workspace-sec-5-light)]">{activeScreen}</span>
-             </h2>
           </div>
 
-          <div className="flex items-center gap-6">
-            <div className="hidden md:flex items-center bg-slate-100 dark:bg-white/5 px-4 py-2 rounded-xl border border-slate-200 dark:border-white/10 w-64 group focus-within:ring-2 focus-within:ring-[var(--workspace-sec-5-light)] transition-all">
-               <Search size={16} className="text-slate-400" />
+          <div className="flex items-center gap-8">
+            {/* Search Global Minimalista */}
+            <div className="hidden lg:flex items-center bg-white/[0.03] px-4 py-2.5 rounded-xl border border-white/5 w-72 group focus-within:ring-2 focus-within:ring-[#f1c232]/30 focus-within:bg-white/[0.06] transition-all">
+               <Search size={16} className="text-zinc-600 group-focus-within:text-[#f1c232] transition-colors" />
                <input 
                  type="text" 
-                 placeholder="Busca global..." 
-                 className="bg-transparent border-none text-xs focus:ring-0 w-full text-slate-600 dark:text-stone-300 placeholder:text-slate-400"
+                 placeholder="Comando rápido (ctrl + k)" 
+                 className="bg-transparent border-none text-xs focus:ring-0 w-full text-zinc-300 placeholder:text-zinc-600 ml-2"
                />
             </div>
 
-            <div className="flex items-center gap-3">
-              <button className="relative p-2.5 bg-slate-100 dark:bg-white/5 rounded-xl hover:bg-slate-200 dark:hover:bg-white/10 transition-colors">
-                 <Bell size={20} className="text-slate-500 dark:text-stone-400" />
-                 <span className="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full border-2 border-white dark:border-[#1b1b1b]" />
-              </button>
-              <button className="p-2.5 bg-slate-100 dark:bg-white/5 rounded-xl hover:bg-slate-200 dark:hover:bg-white/10 transition-colors">
-                 <User size={20} className="text-slate-500 dark:text-stone-400" />
+            <div className="flex items-center gap-4">
+              <button className="relative p-2.5 hover:bg-white/5 rounded-xl transition-colors text-zinc-500 hover:text-[#f1c232]">
+                 <Bell size={20} />
+                 <span className="absolute top-2.5 right-2.5 w-2 h-2 bg-[#f1c232] rounded-full border-2 border-zinc-950 shadow-[0_0_10px_#f1c232]" />
               </button>
+              
+              <div className="h-8 w-[1px] bg-white/5" />
+
+              <div className="flex items-center gap-3 pl-2">
+                 <div className="flex flex-col items-end hidden md:flex">
+                    <span className="text-xs font-black text-white tracking-tight">Daivid Alves</span>
+                    <span className="text-[9px] font-bold text-[#22bb6c] uppercase tracking-widest">Master Admin</span>
+                 </div>
+                 <div className="w-10 h-10 rounded-2xl bg-gradient-to-br from-zinc-800 to-zinc-950 border border-white/10 flex items-center justify-center text-sm font-black text-white shadow-xl">
+                    DA
+                 </div>
+              </div>
             </div>
           </div>
         </header>
 
-        {/* View Content */}
-        <div className="flex-1 overflow-y-auto custom-scrollbar bg-slate-50/50 dark:bg-[#121212]">
-          <div className="max-w-[1600px] mx-auto animate-in fade-in slide-in-from-bottom-4 duration-700">
-            {renderScreen()}
+        {/* View Content Area */}
+        <div className="flex-1 overflow-y-auto custom-scrollbar relative z-10">
+          <div className="max-w-[1600px] mx-auto p-8 animate-in fade-in slide-in-from-bottom-4 duration-1000">
+             {/* Efeito de Vidro no Container de Conteúdo */}
+             <div className="bg-zinc-900/40 rounded-[32px] border border-white/5 backdrop-blur-sm min-h-full">
+                {renderScreen()}
+             </div>
           </div>
         </div>
+
+        {/* Footer Minimalista */}
+        <footer className="h-10 border-t border-white/5 bg-zinc-950 px-10 flex items-center justify-between text-[10px] text-zinc-700 font-bold uppercase tracking-[0.2em] relative z-20">
+           <div className="flex items-center gap-4">
+              <span>© 2026 iTGUYS Core Systems</span>
+              <span className="text-[#22bb6c]/40">•</span>
+              <span>Workspace Environment</span>
+           </div>
+           <div className="flex items-center gap-2">
+              <div className="w-1.5 h-1.5 rounded-full bg-[#22bb6c] animate-pulse" />
+              <span>Sistema Operacional</span>
+           </div>
+        </footer>
       </main>
     </div>
   );