Auto-deploy: 2026-01-13 13:02:51 | 1 arquivo(s) alterado(s)
This commit is contained in:
parent
39369a1fdd
commit
e3f371ad11
|
|
@ -1,106 +1,97 @@
|
||||||
import React, { useState } from 'react';
|
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 { IncomesView } from '../views/IncomesView';
|
||||||
import { ExpensesView } from '../views/ExpensesView';
|
import { ExpensesView } from '../views/ExpensesView';
|
||||||
import { ReconciliationView } from '../views/ReconciliationView';
|
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 = () => {
|
export const WorkspaceLayout = () => {
|
||||||
const [activeScreen, setActiveScreen] = useState('dashboard');
|
const [activeScreen, setActiveScreen] = useState('entradas');
|
||||||
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 renderScreen = () => {
|
const renderScreen = () => {
|
||||||
switch (activeScreen) {
|
switch (activeScreen) {
|
||||||
case 'entradas': return <IncomesView />;
|
case 'dashboard':
|
||||||
case 'saidas': return <ExpensesView />;
|
return (
|
||||||
case 'conciliacao': return <ReconciliationView />;
|
<div className="flex flex-col items-center justify-center min-h-[400px] text-slate-400 italic">
|
||||||
default: return (
|
<h2 className="text-xl font-bold not-italic text-slate-700 dark:text-stone-200 mb-2 uppercase tracking-tighter">Dashboard Geral</h2>
|
||||||
<div className="p-8 text-center text-slate-400 italic">
|
Em desenvolvimento...
|
||||||
<h2 className="text-xl font-bold not-italic text-slate-700 dark:text-stone-200 mb-2">Painel de Controle Financeiro</h2>
|
</div>
|
||||||
O Dashboard consolidado será implementado nesta seção com o componente FineCard.
|
);
|
||||||
</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 (
|
return (
|
||||||
<div className="workspace-theme min-h-screen bg-[#f8fafc] dark:bg-[#121212] flex overflow-hidden">
|
<div className="workspace-theme flex h-screen w-full bg-[#f8fafc] dark:bg-[#121212] overflow-hidden font-lato">
|
||||||
{/* Sidebar Sidebar Component */}
|
{/* Sidebar Customizado (Reproduced Design) */}
|
||||||
<aside className={cn(
|
<WorkspaceSidebar activeScreen={activeScreen} onScreenChange={setActiveScreen} />
|
||||||
"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>
|
|
||||||
|
|
||||||
<nav className="flex-1 py-6 px-3 space-y-1">
|
{/* Main Content Area */}
|
||||||
{menuItems.map((item) => (
|
<main className="flex-1 flex flex-col relative overflow-hidden">
|
||||||
<button
|
{/* Header Header Premium */}
|
||||||
key={item.id}
|
<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">
|
||||||
onClick={() => setActiveScreen(item.id)}
|
<div className="flex items-center gap-4">
|
||||||
className={cn(
|
<div className="flex items-center gap-2 text-slate-400 group cursor-pointer hover:text-[var(--workspace-sec-5-light)] transition-colors">
|
||||||
"w-full flex items-center gap-4 px-3 py-3 rounded-xl transition-all font-bold text-sm",
|
<Maximize2 size={18} className="rotate-45" />
|
||||||
activeScreen === item.id
|
</div>
|
||||||
? "bg-white/10 text-[var(--workspace-sec-2-light)] shadow-sm"
|
<div className="h-6 w-[1px] bg-slate-200 dark:bg-white/10" />
|
||||||
: "text-white/60 hover:text-white hover:bg-white/5"
|
<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>
|
||||||
<span className={activeScreen === item.id ? "text-[var(--workspace-sec-2-light)]" : ""}>
|
</div>
|
||||||
{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>
|
|
||||||
|
|
||||||
<div className="p-4 border-t border-white/5">
|
<div className="flex items-center gap-6">
|
||||||
<div className={cn("flex items-center gap-3 p-2 rounded-xl bg-white/5", !sidebarOpen && "justify-center")}>
|
<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">
|
||||||
<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>
|
<Search size={16} className="text-slate-400" />
|
||||||
{sidebarOpen && (
|
<input
|
||||||
<div className="flex-1 min-w-0">
|
type="text"
|
||||||
<p className="text-xs font-bold truncate">Daivid Alves</p>
|
placeholder="Busca global..."
|
||||||
<p className="text-[10px] text-white/40 truncate">Workspace Admin</p>
|
className="bg-transparent border-none text-xs focus:ring-0 w-full text-slate-600 dark:text-stone-300 placeholder:text-slate-400"
|
||||||
</div>
|
/>
|
||||||
)}
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
{/* Main Content */}
|
<div className="flex items-center gap-3">
|
||||||
<main className="flex-1 flex flex-col overflow-hidden">
|
<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">
|
||||||
<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">
|
<Bell size={20} className="text-slate-500 dark:text-stone-400" />
|
||||||
<div className="text-[10px] font-black uppercase text-slate-400 tracking-[0.2em]">Workspace / Financeiro</div>
|
<span className="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full border-2 border-white dark:border-[#1b1b1b]" />
|
||||||
|
|
||||||
<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" />
|
|
||||||
</button>
|
</button>
|
||||||
<div className="w-[1px] h-6 bg-slate-200 dark:bg-[#333]" />
|
<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">
|
||||||
<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={20} className="text-slate-500 dark:text-stone-400" />
|
||||||
<User size={18} />
|
|
||||||
PLATAFORMA SISTEMAS
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div className="flex-1 overflow-y-auto scroll-smooth custom-scrollbar">
|
{/* View Content */}
|
||||||
{renderScreen()}
|
<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>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue