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

---
 src/features/workspace/views/ExpensesView.jsx |  56 ++++------
 src/features/workspace/views/IncomesView.jsx  | 102 ++++++++++++------
 2 files changed, 90 insertions(+), 68 deletions(-)

diff --git a/src/features/workspace/views/ExpensesView.jsx b/src/features/workspace/views/ExpensesView.jsx
index ae42cde..14b5a71 100644
--- a/src/features/workspace/views/ExpensesView.jsx
+++ b/src/features/workspace/views/ExpensesView.jsx
@@ -3,35 +3,18 @@ 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';
+import { MOCK_EXPENSES_COMPARISON, MOCK_EXPENSES_CATEGORIES } from '../mockData';
 
 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 (
     <div className="workspace-theme space-y-6 p-6">
       <header className="flex justify-between items-center">
         <div>
-          <h1 className="text-2xl font-black text-slate-800 dark:text-stone-100 uppercase tracking-tighter">Saídas</h1>
+          <h1 className="text-2xl font-black text-slate-800 dark:text-stone-100 uppercase tracking-tighter">Financeiro / Saídas</h1>
           <p className="text-slate-500 text-sm">Planejamento e controle de fluxo de caixa negativo</p>
         </div>
         <div className="flex gap-3">
-          <div className="flex items-center gap-2 bg-white dark:bg-[#1b1b1b] px-4 py-2 rounded-lg border border-slate-200 dark:border-[#333] text-sm font-bold text-slate-600 dark:text-stone-300">
+          <div className="flex items-center gap-2 bg-white dark:bg-[#1b1b1b] px-4 py-2 rounded-lg border border-slate-200 dark:border-[#333] text-sm font-bold text-slate-600 dark:text-stone-300 shadow-sm">
             <Calendar size={18} className="text-[var(--workspace-sec-1-light)]" />
             JUNHO / 2026
           </div>
@@ -43,19 +26,20 @@ export const ExpensesView = () => {
          <DashboardKPICard 
             label="Total Planejado"
             value="R$ 58.450,00"
-            color="var(--workspace-sec-5-light)"
+            color="orange"
          />
          <DashboardKPICard 
             label="Total Executado"
             value="R$ 60.120,45"
             trend="+2.8%"
-            color="#ef4444"
+            trendDirection="down"
+            color="red"
          />
          <DashboardKPICard 
-            label="Diferença (Variação)"
+            label="Diferença"
             value="R$ -1.670,45"
-            color="var(--workspace-sec-3-light)"
-            icon={<TrendingDown size={20} />}
+            color="blue"
+            icon={TrendingDown}
          />
       </div>
 
@@ -65,7 +49,7 @@ export const ExpensesView = () => {
           <CardHeader className="flex flex-row items-center justify-between pb-2 border-b border-slate-50 dark:border-[#2a2a2a]">
             <div>
               <CardTitle className="text-sm font-bold text-slate-600 dark:text-stone-300 uppercase tracking-widest">Planejado vs Executado</CardTitle>
-              <p className="text-[10px] text-slate-400">Histórico de variação mensal</p>
+              <p className="text-[10px] text-slate-400">Histórico de variação mensal (Financeiro)</p>
             </div>
             <ArrowRightLeft size={18} className="text-slate-300" />
           </CardHeader>
@@ -74,26 +58,32 @@ export const ExpensesView = () => {
               title=""
               height={300}
               type="bar"
-              data={comparisonData.map(d => ({ name: d.name, planejado: d.planejado, executado: d.executado }))}
+              data={MOCK_EXPENSES_COMPARISON}
               dataKey="executado"
-              colors={['#22bb6c', '#003153']}
+              colors={['#003153', '#22bb6c']} 
             />
           </CardContent>
         </Card>
 
         {/* Gráfico de Categorias */}
         <FineCard 
-           title="Saídas por Categoria"
-           data={expensesByCat}
+           title="Saídas por Categoria (Jun/26)"
+           data={MOCK_EXPENSES_CATEGORIES}
            height={380}
            colors={['#003153', '#22bb6c', '#22c0a3', '#26b1c7', '#285d2a']}
         />
       </div>
 
-      {/* Tabela de Lançamentos (Futuro) */}
+      {/* Tabela de Lançamentos (Mock) */}
       <Card className="border-none shadow-sm bg-white dark:bg-[#1b1b1b] rounded-xl overflow-hidden">
-        <div className="p-6 text-center text-slate-400 text-sm italic">
-          O detalhamento completo dos lançamentos financeiros via ExcelTable será integrado nesta seção.
+        <div className="p-12 text-center">
+            <div className="inline-flex items-center justify-center w-16 h-16 bg-slate-50 dark:bg-white/5 rounded-full mb-4">
+               <ArrowRightLeft size={32} className="text-slate-300" />
+            </div>
+            <h3 className="text-lg font-bold text-slate-700 dark:text-stone-200">Lançamentos Financeiros</h3>
+            <p className="text-slate-400 text-sm max-w-md mx-auto mt-2">
+              A integração completa com o ExcelTable permitirá visualizar cada nota fiscal, boleto e pix de saída individualmente.
+            </p>
         </div>
       </Card>
     </div>
diff --git a/src/features/workspace/views/IncomesView.jsx b/src/features/workspace/views/IncomesView.jsx
index 4742da2..d2bf3b8 100644
--- a/src/features/workspace/views/IncomesView.jsx
+++ b/src/features/workspace/views/IncomesView.jsx
@@ -1,32 +1,32 @@
 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 { Users, FileText, Briefcase, Plus, Search, TrendingUp } from 'lucide-react';
 import ExcelTable from '@/features/prafrot/components/ExcelTable';
 import { DashboardKPICard } from '@/components/shared/DashboardKPICard/DashboardKPICard';
+import { MOCK_CLIENTS, MOCK_BOLETOS, MOCK_SERVICES } from '../mockData';
 
 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)' },
+    { label: 'A Receber', value: 'R$ 38.028,88', trend: '+12%', color: 'blue', icon: FileText },
+    { label: 'Em Atraso', value: 'R$ 8.900,20', trend: '-5%', color: 'red', icon: TrendingUp },
+    { label: 'Recebido', value: 'R$ 12.300,00', trend: '+8%', color: 'green', icon: Users },
+    { label: 'Total Faturado', value: 'R$ 59.229,08', trend: '+15%', color: 'orange', icon: Briefcase },
   ];
 
   return (
     <div className="workspace-theme space-y-6 p-6">
       <header className="flex justify-between items-center">
         <div>
-          <h1 className="text-2xl font-black text-slate-800 dark:text-stone-100 uppercase tracking-tighter">Entradas</h1>
-          <p className="text-slate-500 text-sm">Gerenciamento de faturamento e recebíveis</p>
+          <h1 className="text-2xl font-black text-slate-800 dark:text-stone-100 uppercase tracking-tighter">Financeiro / Entradas</h1>
+          <p className="text-slate-500 text-sm">Gerenciamento de faturamento e recebíveis (Dados de Teste)</p>
         </div>
         <div className="flex gap-3">
-          <button className="flex items-center gap-2 bg-[var(--workspace-sec-5-light)] text-white px-4 py-2 rounded-lg font-bold text-sm shadow-lg hover:brightness-110 transition-all">
+          <button className="flex items-center gap-2 bg-[var(--workspace-sec-5-light)] text-white px-4 py-2 rounded-xl font-bold text-sm shadow-lg hover:brightness-110 transition-all hover:scale-105 active:scale-95">
             <Plus size={18} />
-            NOVA ENTRADA
+            NOVA RECEITA
           </button>
         </div>
       </header>
@@ -40,64 +40,96 @@ export const IncomesView = () => {
             value={kpi.value}
             trend={kpi.trend}
             color={kpi.color}
+            icon={kpi.icon}
           />
         ))}
       </div>
 
-      <Card className="border-none shadow-sm bg-white dark:bg-[#1b1b1b] rounded-xl overflow-hidden">
+      <Card className="border-none shadow-sm bg-white dark:bg-[#1b1b1b] rounded-2xl overflow-hidden border border-slate-100 dark:border-white/5">
         <Tabs defaultValue="boletos" className="w-full" onValueChange={setActiveTab}>
-          <div className="px-6 pt-4 border-b border-slate-100 dark:border-[#2a2a2a] flex justify-between items-center bg-slate-50/50 dark:bg-[#1e1e1e]">
-            <TabsList className="bg-transparent gap-6 h-12">
+          <div className="px-6 pt-4 border-b border-slate-100 dark:border-[#2a2a2a] flex justify-between items-center bg-slate-50/50 dark:bg-[#1e1e1e]/50">
+            <TabsList className="bg-transparent gap-8 h-12">
               <TabsTrigger 
                 value="boletos" 
-                className="data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:border-b-2 data-[state=active]:border-[var(--workspace-sec-3-light)] rounded-none px-0 font-bold text-xs uppercase tracking-widest text-slate-400 data-[state=active]:text-[var(--workspace-sec-3-light)]"
+                className="data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:border-b-2 data-[state=active]:border-[var(--workspace-sec-3-light)] rounded-none px-0 font-bold text-xs uppercase tracking-[0.2em] text-slate-400 data-[state=active]:text-[var(--workspace-sec-3-light)] transition-all"
               >
-                <FileText size={16} className="mr-2" />
-                Boletos
+                <div className="flex items-center gap-2">
+                  <FileText size={16} />
+                  Boletos
+                </div>
               </TabsTrigger>
               <TabsTrigger 
                 value="clientes" 
-                className="data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:border-b-2 data-[state=active]:border-[var(--workspace-sec-3-light)] rounded-none px-0 font-bold text-xs uppercase tracking-widest text-slate-400 data-[state=active]:text-[var(--workspace-sec-3-light)]"
+                className="data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:border-b-2 data-[state=active]:border-[var(--workspace-sec-3-light)] rounded-none px-0 font-bold text-xs uppercase tracking-[0.2em] text-slate-400 data-[state=active]:text-[var(--workspace-sec-3-light)] transition-all"
               >
-                <Users size={16} className="mr-2" />
-                Clientes
+                <div className="flex items-center gap-2">
+                  <Users size={16} />
+                  Clientes
+                </div>
               </TabsTrigger>
               <TabsTrigger 
                 value="servicos" 
-                className="data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:border-b-2 data-[state=active]:border-[var(--workspace-sec-3-light)] rounded-none px-0 font-bold text-xs uppercase tracking-widest text-slate-400 data-[state=active]:text-[var(--workspace-sec-3-light)]"
+                className="data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:border-b-2 data-[state=active]:border-[var(--workspace-sec-3-light)] rounded-none px-0 font-bold text-xs uppercase tracking-[0.2em] text-slate-400 data-[state=active]:text-[var(--workspace-sec-3-light)] transition-all"
               >
-                <Briefcase size={16} className="mr-2" />
-                Serviços
+                <div className="flex items-center gap-2">
+                  <Briefcase size={16} />
+                  Serviços
+                </div>
               </TabsTrigger>
             </TabsList>
 
-            <div className="flex items-center gap-2 bg-white dark:bg-[#252525] px-3 py-1.5 rounded-lg border border-slate-200 dark:border-[#333]">
+            <div className="flex items-center gap-2 bg-white dark:bg-[#252525] px-3 py-1.5 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm focus-within:ring-2 focus-within:ring-[var(--workspace-sec-3-light)] transition-all">
               <Search size={14} className="text-slate-400" />
               <input 
                 type="text" 
-                placeholder="Pesquisar..." 
-                className="bg-transparent border-none text-xs focus:ring-0 w-48 text-slate-600 dark:text-stone-300"
+                placeholder="Pesquisar registro..." 
+                className="bg-transparent border-none text-xs focus:ring-0 w-48 text-slate-600 dark:text-stone-300 placeholder:text-slate-400"
               />
             </div>
           </div>
 
           <CardContent className="p-0">
-            <TabsContent value="boletos" className="m-0 h-[500px]">
-               {/* Aqui entra o ExcelTable configurado para Boletos */}
-               <div className="p-4 text-center text-slate-400 text-sm italic">
-                 Lista de Boletos (ExcelTable em breve...)
+            <TabsContent value="boletos" className="m-0 min-h-[400px]">
+               <div className="p-4">
+                  <ExcelTable 
+                    columns={[
+                      { key: 'id', label: 'ID', width: '80px' },
+                      { key: 'cliente', label: 'Cliente', width: '250px' },
+                      { key: 'vencimento', label: 'Vencimento', width: '120px' },
+                      { key: 'valor', label: 'Valor', width: '120px', type: 'currency' },
+                      { key: 'status', label: 'Status', width: '120px' },
+                    ]}
+                    data={MOCK_BOLETOS}
+                  />
                </div>
             </TabsContent>
             
-            <TabsContent value="clientes" className="m-0 h-[500px]">
-               <div className="p-4 text-center text-slate-400 text-sm italic">
-                 Lista de Clientes (ExcelTable em breve...)
+            <TabsContent value="clientes" className="m-0 min-h-[400px]">
+               <div className="p-4">
+                  <ExcelTable 
+                    columns={[
+                      { key: 'id', label: 'ID', width: '80px' },
+                      { key: 'nome', label: 'Nome Fantasia', width: '300px' },
+                      { key: 'cnpj', label: 'CNPJ', width: '180px' },
+                      { key: 'status', label: 'Status Contrato', width: '150px' },
+                      { key: 'total_faturado', label: 'Faturamento Total', width: '180px', type: 'currency' },
+                    ]}
+                    data={MOCK_CLIENTS}
+                  />
                </div>
             </TabsContent>
 
-            <TabsContent value="servicos" className="m-0 h-[500px]">
-               <div className="p-4 text-center text-slate-400 text-sm italic">
-                 Lista de Serviços (ExcelTable em breve...)
+            <TabsContent value="servicos" className="m-0 min-h-[400px]">
+               <div className="p-4">
+                  <ExcelTable 
+                    columns={[
+                      { key: 'id', label: 'ID', width: '80px' },
+                      { key: 'descricao', label: 'Descrição do Serviço', width: '400px' },
+                      { key: 'categoria', label: 'Categoria', width: '200px' },
+                      { key: 'preco_base', label: 'Preço Base', width: '150px', type: 'currency' },
+                    ]}
+                    data={MOCK_SERVICES}
+                  />
                </div>
             </TabsContent>
           </CardContent>