+
diff --git a/src/features/workspace/components/FineCard.jsx b/src/features/workspace/components/FineCard.jsx
new file mode 100644
index 0000000..3f96ed0
--- /dev/null
+++ b/src/features/workspace/components/FineCard.jsx
@@ -0,0 +1,101 @@
+import React from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+ ResponsiveContainer,
+ BarChart,
+ Bar,
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ Tooltip,
+ Legend,
+ LineChart,
+ Line,
+ Cell
+} from 'recharts';
+
+/**
+ * Componente FineCard para gráficos premium no Workspace.
+ * Suporta tipos 'bar' e 'line'.
+ */
+export const FineCard = ({
+ title,
+ data,
+ type = 'bar',
+ dataKey = 'value',
+ nameKey = 'name',
+ height = 300,
+ colors = ['#22bb6c', '#22c0a3', '#26b1c7']
+}) => {
+ return (
+
+
+
+ {title}
+
+
+
+
+
+ {type === 'bar' ? (
+
+
+
+ `R$ ${value >= 1000 ? (value/1000).toFixed(1) + 'k' : value}`}
+ />
+
+
+ {data.map((entry, index) => (
+ |
+ ))}
+
+
+ ) : (
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+ );
+};
diff --git a/src/features/workspace/components/WorkspaceLayout.jsx b/src/features/workspace/components/WorkspaceLayout.jsx
new file mode 100644
index 0000000..31ce33d
--- /dev/null
+++ b/src/features/workspace/components/WorkspaceLayout.jsx
@@ -0,0 +1,108 @@
+import React, { useState } from 'react';
+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';
+
+export const WorkspaceLayout = () => {
+ const [activeScreen, setActiveScreen] = useState('dashboard');
+ const [sidebarOpen, setSidebarOpen] = useState(true);
+
+ const menuItems = [
+ { id: 'dashboard', label: 'Dashboard', icon:
},
+ { id: 'entradas', label: 'Entradas', icon:
},
+ { id: 'saidas', label: 'Saídas', icon:
},
+ { id: 'conciliacao', label: 'Conciliação', icon:
},
+ { id: 'config', label: 'Ajustes', icon:
},
+ ];
+
+ const renderScreen = () => {
+ switch (activeScreen) {
+ case 'entradas': return
;
+ case 'saidas': return
;
+ case 'conciliacao': return
;
+ default: return (
+
+
Painel de Controle Financeiro
+ O Dashboard consolidado será implementado nesta seção com o componente FineCard.
+
+ );
+ }
+ };
+
+ return (
+
+ {/* Sidebar Sidebar Component */}
+
+
+ {/* Main Content */}
+
+
+ Workspace / Financeiro
+
+
+
+
+
+
+
+
+
+ {renderScreen()}
+
+
+
+ );
+};
diff --git a/src/features/workspace/index.jsx b/src/features/workspace/index.jsx
new file mode 100644
index 0000000..5183caa
--- /dev/null
+++ b/src/features/workspace/index.jsx
@@ -0,0 +1,4 @@
+export * from './components/WorkspaceLayout';
+export * from './views/IncomesView';
+export * from './views/ExpensesView';
+export * from './views/ReconciliationView';
diff --git a/src/features/workspace/views/ExpensesView.jsx b/src/features/workspace/views/ExpensesView.jsx
new file mode 100644
index 0000000..ae42cde
--- /dev/null
+++ b/src/features/workspace/views/ExpensesView.jsx
@@ -0,0 +1,101 @@
+import React from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { FineCard } from '../components/FineCard';
+import { DashboardKPICard } from '@/components/shared/DashboardKPICard/DashboardKPICard';
+import { TrendingDown, Calendar, ArrowRightLeft } from 'lucide-react';
+
+export const ExpensesView = () => {
+ // Dados Mock para os gráficos
+ const comparisonData = [
+ { name: 'Jan', planejado: 4500, executado: 4800 },
+ { name: 'Fev', planejado: 5200, executado: 5100 },
+ { name: 'Mar', planejado: 4800, executado: 5500 },
+ { name: 'Abr', planejado: 6100, executado: 5900 },
+ { name: 'Mai', planejado: 5500, executado: 6200 },
+ { name: 'Jun', planejado: 5800, executado: 5800 },
+ ];
+
+ const expensesByCat = [
+ { name: 'Infraestrutura', value: 12500 },
+ { name: 'Marketing', value: 8700 },
+ { name: 'RH / Salários', value: 45000 },
+ { name: 'Softwares', value: 3200 },
+ { name: 'Outros', value: 1500 },
+ ];
+
+ return (
+
+
+
+ {/* Resumo de Saídas */}
+
+
+
+ }
+ />
+
+
+
+ {/* Gráfico de Comparação */}
+
+
+
+
Planejado vs Executado
+
Histórico de variação mensal
+
+
+
+
+ ({ name: d.name, planejado: d.planejado, executado: d.executado }))}
+ dataKey="executado"
+ colors={['#22bb6c', '#003153']}
+ />
+
+
+
+ {/* Gráfico de Categorias */}
+
+
+
+ {/* Tabela de Lançamentos (Futuro) */}
+
+
+ O detalhamento completo dos lançamentos financeiros via ExcelTable será integrado nesta seção.
+
+
+
+ );
+};
diff --git a/src/features/workspace/views/IncomesView.jsx b/src/features/workspace/views/IncomesView.jsx
new file mode 100644
index 0000000..4742da2
--- /dev/null
+++ b/src/features/workspace/views/IncomesView.jsx
@@ -0,0 +1,108 @@
+import React, { useState } from 'react';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Card, CardContent } from '@/components/ui/card';
+import { Users, FileText, Briefcase, Plus, Search } from 'lucide-react';
+import ExcelTable from '@/features/prafrot/components/ExcelTable';
+import { DashboardKPICard } from '@/components/shared/DashboardKPICard/DashboardKPICard';
+
+export const IncomesView = () => {
+ const [activeTab, setActiveTab] = useState('boletos');
+
+ // Dados Mock para demonstração
+ const kpis = [
+ { label: 'A Receber', value: 'R$ 13.028,88', trend: '+12%', color: 'var(--workspace-sec-3-light)' },
+ { label: 'Em Atraso', value: 'R$ 5.075,20', trend: '-5%', color: '#ef4444' },
+ { label: 'Recebido', value: 'R$ 21.925,33', trend: '+8%', color: 'var(--workspace-sec-1-light)' },
+ { label: 'Total Faturado', value: 'R$ 40.029,41', trend: '+15%', color: 'var(--workspace-sec-5-light)' },
+ ];
+
+ return (
+
+
+
+ {/* KPIs da Feature */}
+
+ {kpis.map((kpi, i) => (
+
+ ))}
+
+
+
+
+
+
+
+
+ Boletos
+
+
+
+ Clientes
+
+
+
+ Serviços
+
+
+
+
+
+
+
+
+
+
+
+ {/* Aqui entra o ExcelTable configurado para Boletos */}
+
+ Lista de Boletos (ExcelTable em breve...)
+
+
+
+
+
+ Lista de Clientes (ExcelTable em breve...)
+
+
+
+
+
+ Lista de Serviços (ExcelTable em breve...)
+
+
+
+
+
+
+ );
+};
diff --git a/src/features/workspace/views/ReconciliationView.jsx b/src/features/workspace/views/ReconciliationView.jsx
new file mode 100644
index 0000000..eb5f33e
--- /dev/null
+++ b/src/features/workspace/views/ReconciliationView.jsx
@@ -0,0 +1,110 @@
+import React, { useState } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Badge } from '@/components/ui/badge';
+import { AlertCircle, CheckCircle2, ListFilter, Settings, Box, Terminal } from 'lucide-react';
+
+export const ReconciliationView = () => {
+ const [activeTab, setActiveTab] = useState('pendencias');
+
+ return (
+
+
+
+
+
+
+
+
+
+ Pendências
+
+
+
+ Cruzamento
+
+
+
+ Configurações
+
+
+
+
+
+
+
+ Apresentando transações não categorizadas...
+ Integração com ExcelTable pendente
+
+
+
+
+ {/* Coluna de Categorias */}
+
+
+ Categorias
+
+
+
+ {['Infraestrutura', 'Marketing', 'RH', 'Softwares'].map((cat, i) => (
+
+ {cat}
+ R$ 1.500
+
+ ))}
+
+
+
+ {/* Coluna de Regras / Detalhamento */}
+
+
Selecione uma categoria para ver as regras e transações
+
+
+
+
+
+
+ {/* Cards de CRUD */}
+ {[
+ { title: 'Categorias', icon:
, count: 12 },
+ { title: 'Regras', icon:
, count: 45 },
+ { title: 'Caixinhas', icon:
, count: 5 },
+ ].map((item, i) => (
+
+
+
+ {item.icon}
+
+ {item.title}
+ {item.count} Itens Cadastrados
+
+
+ ))}
+
+
+
+
+
+
+ );
+};
diff --git a/src/index.css b/src/index.css
index 6e9000e..37b3ff8 100644
--- a/src/index.css
+++ b/src/index.css
@@ -34,7 +34,39 @@
--color-ring: var(--ring);
}
+@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');
+
:root {
+ /* ... outras variáveis ... */
+
+ /* Paleta Workspace - Padrão Claro */
+ --workspace-sec-1-light: #22bb6c;
+ --workspace-sec-2-light: #22c0a3;
+ --workspace-sec-3-light: #26b1c7;
+ --workspace-sec-4-light: #26c03a;
+ --workspace-sec-5-light: #003153;
+ --workspace-sec-6-light: #285d2a;
+
+ /* Paleta Workspace - Padrão Escuro */
+ --workspace-sec-1-dark: #115834;
+ --workspace-sec-2-dark: #125f51;
+ --workspace-sec-3-dark: #1B7C8C;
+ --workspace-sec-4-dark: #105018;
+ --workspace-sec-5-dark: #0d253a;
+ --workspace-sec-6-dark: #105018;
+
+ /* Paleta Workspace - Ausência */
+ --workspace-empty-body: #c6c6c6;
+ --workspace-empty-panel: #ebebeb;
+ --workspace-empty-bg: #9a9a9a;
+}
+
+.workspace-theme {
+ font-family: 'Lato', sans-serif;
+}
+
+.dark .workspace-theme {
+ /* Ajustes específicos para dark mode se necessário */
--radius: 0.625rem;
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
diff --git a/vite.config.ts b/vite.config.ts
index a7e6715..d61dbe8 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -5,6 +5,7 @@ import tailwindcss from '@tailwindcss/vite'
// https://vite.dev/config/
export default defineConfig({
+ base: "/plataforma/", //
plugins: [
react(),
tailwindcss(),