dashboard: reimaginacao

Signed-off-by: Rodrigo B. de Sousa Martins <rodrigo.sousa.577@gmail.com>

src/components/dashboard/AtendimentosDia.tsx

@@ -1,53 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-interface Atendimento {
-  id: string;
-  hora: string;
-  cliente: string;
-  status: string;
-}
-
-export const AtendimentosDia: React.FC = () => {
-  const [atendimentos, setAtendimentos] = useState<Atendimento[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    async function fetchAtendimentos() {
-      try {
-        setLoading(true);
-        setError(null);
-        const res = await fetch('/api/atendimentos-dia', {
-          headers: {
-            'Content-Type': 'application/json',
-          },
-        });
-        if (!res.ok) throw new Error('Erro ao buscar atendimentos do dia');
-        const data = await res.json();
-        setAtendimentos(data);
-      } catch (err: any) {
-        setError(err.message);
-      } finally {
-        setLoading(false);
-      }
-    }
-    fetchAtendimentos();
-  }, []);
-
-  if (loading) return <div>Carregando atendimentos...</div>;
-  if (error) return <div className="text-red-600">{error}</div>;
-
-  return (
-    <div className="border rounded p-4 shadow">
-      <h3 className="font-semibold mb-2">Atendimentos do Dia</h3>
-      <ul className="divide-y">
-        {atendimentos.map((at) => (
-          <li key={at.id} className="py-2 flex justify-between items-center">
-            <span className="text-xs font-medium">{at.hora} - {at.cliente}</span>
-            <span className={`px-2 py-1 rounded text-xs ${at.status === 'Realizado' ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700'}`}>{at.status}</span>
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-};

src/components/dashboard/DashboardLayout.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { WorkflowTarefas } from './WorkflowTarefas';
 import { CalendarioAtendimentos } from './CalendarioAtendimentos';
 import { BenchmarkingEscritorio } from './BenchmarkingEscritorio';
-import { AtendimentosDia } from './AtendimentosDia';
+import { PainelFinanceiro } from './PainelFinanceiro';
 
 export const DashboardLayout: React.FC = () => {
 
@@ -18,14 +18,13 @@ export const DashboardLayout: React.FC = () => {
       <div className="space-y-6">
         <h2 className="text-xl font-bold">Calendário</h2>
         <CalendarioAtendimentos />
-        <h2 className="text-xl font-bold">Atendimentos do Dia</h2>
-        <AtendimentosDia />
       </div>
 
       {/* Coluna 3: Benchmarking do Escritório */}
       <div className="space-y-6">
         <h2 className="text-xl font-bold">Benchmarking do Escritório</h2>
         <BenchmarkingEscritorio />
+        <PainelFinanceiro />
       </div>
     </div>
   );

src/components/dashboard/PainelFinanceiro.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { useFinanceiroPainel } from '../../hooks/useFinanceiroPainel';
+import { CurrencyDollarIcon, ArrowDownCircleIcon, ArrowUpCircleIcon } from '@heroicons/react/24/solid';
+
+export const PainelFinanceiro: React.FC = () => {
+  const hoje = new Date();
+  const [mes, setMes] = React.useState(hoje.getMonth() + 1);
+  const [ano, setAno] = React.useState(hoje.getFullYear());
+  const { data, isLoading, error } = useFinanceiroPainel(mes, ano);
+
+  const mesesNomes = ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'];
+
+  return (
+    <div className="border rounded-xl p-6 shadow-lg bg-white dark:bg-gray-900 flex flex-col gap-6 max-w-4xl mx-auto mt-8">
+      <h2 className="text-lg font-bold text-gray-800 dark:text-gray-100 mb-2 flex items-center gap-2">
+        <CurrencyDollarIcon className="h-6 w-6 text-green-600" /> Painel Financeiro
+      </h2>
+      <div className="flex items-center gap-4 mb-2">
+        <button type="button" className="px-2 py-1 rounded bg-gray-100 dark:bg-gray-800" onClick={() => setMes(m => m === 1 ? 12 : m - 1)}>&lt;</button>
+        <span className="font-semibold text-lg">{mesesNomes[mes - 1]}/{ano}</span>
+        <button type="button" className="px-2 py-1 rounded bg-gray-100 dark:bg-gray-800" onClick={() => setMes(m => m === 12 ? 1 : m + 1)}>&gt;</button>
+        <button type="button" className="px-2 py-1 rounded bg-gray-100 dark:bg-gray-800" onClick={() => setAno(a => a - 1)}>&lt; Ano</button>
+        <button type="button" className="px-2 py-1 rounded bg-gray-100 dark:bg-gray-800" onClick={() => setAno(a => a + 1)}>Ano &gt;</button>
+      </div>
+      {isLoading && <div>Carregando dados financeiros...</div>}
+      {error && <div className="text-red-600">Erro ao buscar dados financeiros</div>}
+      {data && (
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+          <div className="flex flex-col items-center bg-green-50 dark:bg-green-900 rounded-lg p-4">
+            <CurrencyDollarIcon className="h-7 w-7 text-green-600 mb-1" />
+            <span className="text-xs text-gray-500">Honorários a receber</span>
+            <span className="text-lg font-bold text-green-700 dark:text-green-300">R$ {data.honorariosAReceber.toLocaleString('pt-br', { minimumFractionDigits: 2 })}</span>
+          </div>
+          <div className="flex flex-col items-center bg-blue-50 dark:bg-blue-900 rounded-lg p-4">
+            <ArrowUpCircleIcon className="h-7 w-7 text-blue-600 mb-1" />
+            <span className="text-xs text-gray-500">Honorários recebidos no mês</span>
+            <span className="text-lg font-bold text-blue-700 dark:text-blue-300">R$ {data.honorariosRecebidosMes.toLocaleString('pt-br', { minimumFractionDigits: 2 })}</span>
+          </div>
+          <div className="flex flex-col items-center bg-red-50 dark:bg-red-900 rounded-lg p-4">
+            <ArrowDownCircleIcon className="h-7 w-7 text-red-600 mb-1" />
+            <span className="text-xs text-gray-500">Custas a pagar</span>
+            <span className="text-lg font-bold text-red-700 dark:text-red-300">R$ {data.custasAPagar.toLocaleString('pt-br', { minimumFractionDigits: 2 })}</span>
+          </div>
+          <div className="flex flex-col items-center bg-teal-50 dark:bg-teal-900 rounded-lg p-4">
+            <ArrowUpCircleIcon className="h-7 w-7 text-teal-600 mb-1" />
+            <span className="text-xs text-gray-500">Custas pagas no mês</span>
+            <span className="text-lg font-bold text-teal-700 dark:text-teal-300">R$ {data.custasPagasMes.toLocaleString('pt-br', { minimumFractionDigits: 2 })}</span>
+          </div>
+        </div>
+      )}
+      {data && (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+          <div>
+            <h3 className="font-semibold mb-2 text-green-700 dark:text-green-300">Honorários recebidos no mês</h3>
+            <ul className="text-xs divide-y divide-gray-200 dark:divide-gray-700">
+              {data.detalhesHonorarios.length === 0 && <li className="text-gray-400">Nenhum recebimento registrado neste mês.</li>}
+              {data.detalhesHonorarios.map((item, idx) => (
+                <li key={idx} className="py-2 flex flex-col">
+                  <span className="font-bold">Contrato: {item.contrato.processoId}</span>
+                  <span>Parcela: {item.parcela.numeroParcela} - Valor: R$ {Number(item.parcela.valorPago || item.parcela.valor).toLocaleString('pt-br', { minimumFractionDigits: 2 })}</span>
+                  <span className="text-gray-500">Pago em: {item.parcela.dataPagamento ? new Date(item.parcela.dataPagamento).toLocaleDateString('pt-br') : '-'}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div>
+            <h3 className="font-semibold mb-2 text-red-700 dark:text-red-300">Custas pagas no mês</h3>
+            <ul className="text-xs divide-y divide-gray-200 dark:divide-gray-700">
+              {data.detalhesCustas.length === 0 && <li className="text-gray-400">Nenhuma custa paga neste mês.</li>}
+              {data.detalhesCustas.map((c, idx) => (
+                <li key={idx} className="py-2 flex flex-col">
+                  <span className="font-bold">Processo: {c.processoId}</span>
+                  <span>Tipo: {c.tipo} - Valor: R$ {Number(c.valor).toLocaleString('pt-br', { minimumFractionDigits: 2 })}</span>
+                  <span className="text-gray-500">Pago em: {c.dataPagamento ? new Date(c.dataPagamento).toLocaleDateString('pt-br') : '-'}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

src/hooks/useFinanceiroPainel.ts

@@ -0,0 +1,66 @@
+import { useQuery } from 'react-query';
+import api from '../services/api';
+
+export interface FinanceiroResumo {
+  honorariosAReceber: number;
+  honorariosRecebidosMes: number;
+  custasAPagar: number;
+  custasPagasMes: number;
+  detalhesHonorarios: any[];
+  detalhesCustas: any[];
+}
+
+// Hook para buscar dados financeiros do painel
+export function useFinanceiroPainel(mes: number, ano: number) {
+  return useQuery<FinanceiroResumo>(['financeiroPainel', mes, ano], async () => {
+    // Buscar honorários e parcelas
+    const honorariosRes = await api.get('/honorarios');
+    const honorarios = honorariosRes.data;
+    let honorariosAReceber = 0;
+    let honorariosRecebidosMes = 0;
+    const detalhesHonorarios: any[] = [];
+    honorarios.forEach((h: any) => {
+      if (h.parcelas && Array.isArray(h.parcelas)) {
+        h.parcelas.forEach((p: any) => {
+          const dataPagamento = p.dataPagamento ? new Date(p.dataPagamento) : null;
+          const vencimento = new Date(p.vencimento);
+          if (p.status === 'PENDENTE' || p.status === 'VENCIDO') {
+            honorariosAReceber += Number(p.valor);
+          }
+          if (p.status === 'PAGO' && dataPagamento && dataPagamento.getMonth() + 1 === mes && dataPagamento.getFullYear() === ano) {
+            honorariosRecebidosMes += Number(p.valorPago || p.valor);
+            detalhesHonorarios.push({ contrato: h, parcela: p });
+          }
+        });
+      }
+    });
+
+    // Buscar custas
+    const custasRes = await api.get('/custas-processuais');
+    const custas = custasRes.data;
+    let custasAPagar = 0;
+    let custasPagasMes = 0;
+    const detalhesCustas: any[] = [];
+    custas.forEach((c: any) => {
+      if (c.status === 'PENDENTE' || c.status === 'VENCIDO') {
+        custasAPagar += Number(c.valor);
+      }
+      if (c.status === 'PAGO' && c.dataPagamento) {
+        const dataPagamento = new Date(c.dataPagamento);
+        if (dataPagamento.getMonth() + 1 === mes && dataPagamento.getFullYear() === ano) {
+          custasPagasMes += Number(c.valor);
+          detalhesCustas.push(c);
+        }
+      }
+    });
+
+    return {
+      honorariosAReceber,
+      honorariosRecebidosMes,
+      custasAPagar,
+      custasPagasMes,
+      detalhesHonorarios,
+      detalhesCustas,
+    };
+  });
+}