From e3f371ad11fcd17a454b53c4da8e69344590d3d1 Mon Sep 17 00:00:00 2001
From: "daivid.alves" <daivid.alves@itguys.com.br>
Date: Tue, 13 Jan 2026 13:02:51 -0300
Subject: [PATCH] Auto-deploy: 2026-01-13 13:02:51 | 1 arquivo(s) alterado(s)

---
 .../workspace/components/WorkspaceLayout.jsx  | 157 +++++++++---------
 1 file changed, 74 insertions(+), 83 deletions(-)

diff --git a/src/features/workspace/components/WorkspaceLayout.jsx b/src/features/workspace/components/WorkspaceLayout.jsx
index 31ce33d..5dd51c1 100644
--- a/src/features/workspace/components/WorkspaceLayout.jsx
+++ b/src/features/workspace/components/WorkspaceLayout.jsx
@@ -1,106 +1,97 @@
 import React, { useState } from 'react';
+import { 
+  Bell,
+  Search,
+  Maximize2,
+  HelpCircle,
+  User
+} 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 { LayoutDashboard, ArrowUpRight, ArrowDownRight, ArrowRightLeft, Settings, Menu, Bell, User } from 'lucide-react';
-import { cn } from '@/lib/utils';
 
+/**
+ * WorkspaceLayout - O container principal para o ambiente de teste/workspace.
+ * Apresenta uma estrutura premium isolada do restante da plataforma.
+ */
 export const WorkspaceLayout = () => {
-  const [activeScreen, setActiveScreen] = useState('dashboard');
-  const [sidebarOpen, setSidebarOpen] = useState(true);
-
-  const menuItems = [
-    { id: 'dashboard', label: 'Dashboard', icon: <LayoutDashboard size={20} /> },
-    { id: 'entradas', label: 'Entradas', icon: <ArrowUpRight size={20} /> },
-    { id: 'saidas', label: 'Saídas', icon: <ArrowDownRight size={20} /> },
-    { id: 'conciliacao', label: 'Conciliação', icon: <ArrowRightLeft size={20} /> },
-    { id: 'config', label: 'Ajustes', icon: <Settings size={20} /> },
-  ];
+  const [activeScreen, setActiveScreen] = useState('entradas');
 
   const renderScreen = () => {
     switch (activeScreen) {
-      case 'entradas': return <IncomesView />;
-      case 'saidas': return <ExpensesView />;
-      case 'conciliacao': return <ReconciliationView />;
-      default: return (
-        <div className="p-8 text-center text-slate-400 italic">
-          <h2 className="text-xl font-bold not-italic text-slate-700 dark:text-stone-200 mb-2">Painel de Controle Financeiro</h2>
-          O Dashboard consolidado será implementado nesta seção com o componente FineCard.
-        </div>
-      );
+      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>
+        );
+      case 'entradas':
+        return <IncomesView />;
+      case 'saidas':
+        return <ExpensesView />;
+      case 'conciliacao':
+        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>
+        );
+      default:
+        return <IncomesView />;
     }
   };
 
   return (
-    <div className="workspace-theme min-h-screen bg-[#f8fafc] dark:bg-[#121212] flex overflow-hidden">
-      {/* Sidebar Sidebar Component */}
-      <aside className={cn(
-        "bg-[var(--workspace-sec-5-light)] dark:bg-[#0d253a] text-white transition-all duration-300 flex flex-col z-50",
-        sidebarOpen ? "w-64" : "w-20"
-      )}>
-        <div className="p-6 flex items-center justify-between border-b border-white/5">
-          {sidebarOpen && <div className="text-xl font-black tracking-tighter italic">iTGUYS</div>}
-          <button onClick={() => setSidebarOpen(!sidebarOpen)} className="p-1 hover:bg-white/10 rounded">
-            <Menu size={20} />
-          </button>
-        </div>
+    <div className="workspace-theme flex h-screen w-full bg-[#f8fafc] dark:bg-[#121212] overflow-hidden font-lato">
+      {/* Sidebar Customizado (Reproduced Design) */}
+      <WorkspaceSidebar activeScreen={activeScreen} onScreenChange={setActiveScreen} />
 
-        <nav className="flex-1 py-6 px-3 space-y-1">
-          {menuItems.map((item) => (
-            <button
-              key={item.id}
-              onClick={() => setActiveScreen(item.id)}
-              className={cn(
-                "w-full flex items-center gap-4 px-3 py-3 rounded-xl transition-all font-bold text-sm",
-                activeScreen === item.id 
-                  ? "bg-white/10 text-[var(--workspace-sec-2-light)] shadow-sm" 
-                  : "text-white/60 hover:text-white hover:bg-white/5"
-              )}
-            >
-              <span className={activeScreen === item.id ? "text-[var(--workspace-sec-2-light)]" : ""}>
-                {item.icon}
-              </span>
-              {sidebarOpen && <span>{item.label}</span>}
-              {activeScreen === item.id && sidebarOpen && (
-                 <div className="ml-auto w-1.5 h-1.5 rounded-full bg-[var(--workspace-sec-2-light)] shadow-[0_0_8px_var(--workspace-sec-2-light)]" />
-              )}
-            </button>
-          ))}
-        </nav>
+      {/* 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" />
+             </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="p-4 border-t border-white/5">
-           <div className={cn("flex items-center gap-3 p-2 rounded-xl bg-white/5", !sidebarOpen && "justify-center")}>
-              <div className="w-8 h-8 rounded-full bg-[var(--workspace-sec-2-light)] flex items-center justify-center text-xs font-black">DA</div>
-              {sidebarOpen && (
-                <div className="flex-1 min-w-0">
-                  <p className="text-xs font-bold truncate">Daivid Alves</p>
-                  <p className="text-[10px] text-white/40 truncate">Workspace Admin</p>
-                </div>
-              )}
-           </div>
-        </div>
-      </aside>
+          <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" />
+               <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"
+               />
+            </div>
 
-      {/* Main Content */}
-      <main className="flex-1 flex flex-col overflow-hidden">
-        <header className="h-16 bg-white dark:bg-[#1b1b1b] border-b border-slate-200 dark:border-[#2a2a2a] flex items-center justify-between px-8 z-40">
-           <div className="text-[10px] font-black uppercase text-slate-400 tracking-[0.2em]">Workspace / Financeiro</div>
-           
-           <div className="flex items-center gap-4">
-              <button className="p-2 text-slate-400 hover:text-slate-600 rounded-full hover:bg-slate-50 relative">
-                <Bell size={18} />
-                <div className="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full border-2 border-white" />
+            <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>
-              <div className="w-[1px] h-6 bg-slate-200 dark:bg-[#333]" />
-              <button className="flex items-center gap-2 text-slate-600 dark:text-stone-300 font-bold text-xs p-1 hover:bg-slate-50 rounded-lg pr-3">
-                 <User size={18} />
-                 PLATAFORMA SISTEMAS
+              <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" />
               </button>
-           </div>
+            </div>
+          </div>
         </header>
 
-        <div className="flex-1 overflow-y-auto scroll-smooth custom-scrollbar">
-           {renderScreen()}
+        {/* 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()}
+          </div>
         </div>
       </main>
     </div>