dashboard: reimaginacao

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

src/components/dashboard/AtendimentosDia.tsx

@@ -0,0 +1,49 @@
+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');
+        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/BenchmarkingEscritorio.tsx

@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from 'react';
+
+interface Benchmarking {
+  ajuizados15dias: number;
+  emTramitacao: number;
+}
+
+export const BenchmarkingEscritorio: React.FC = () => {
+  const [benchmarking, setBenchmarking] = useState<Benchmarking | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function fetchBenchmarking() {
+      try {
+        setLoading(true);
+        setError(null);
+        const res = await fetch('/api/benchmarking');
+        if (!res.ok) throw new Error('Erro ao buscar benchmarking');
+        const data = await res.json();
+        setBenchmarking(data);
+      } catch (err: any) {
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchBenchmarking();
+  }, []);
+
+  if (loading) return <div>Carregando benchmarking...</div>;
+  if (error) return <div className="text-red-600">{error}</div>;
+  if (!benchmarking) return null;
+
+  return (
+    <div className="border rounded p-4 shadow flex flex-col gap-4">
+      <div>
+        <span className="font-semibold">Processos ajuizados (últimos 15 dias):</span>
+        <span className="ml-2 text-blue-700 font-bold">{benchmarking.ajuizados15dias}</span>
+      </div>
+      <div>
+        <span className="font-semibold">Processos em tramitação:</span>
+        <span className="ml-2 text-green-700 font-bold">{benchmarking.emTramitacao}</span>
+      </div>
+    </div>
+  );
+};

src/components/dashboard/CalendarioAtendimentos.tsx

@@ -0,0 +1,67 @@
+import React, { useEffect, useState } from 'react';
+
+interface Evento {
+  id: string;
+  data: string;
+  tipo: string;
+  descricao: string;
+}
+
+export const CalendarioAtendimentos: React.FC = () => {
+  const [eventos, setEventos] = useState<Evento[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function fetchEventos() {
+      try {
+        setLoading(true);
+        setError(null);
+        const res = await fetch('/api/eventos');
+        if (!res.ok) throw new Error('Erro ao buscar eventos');
+        const data = await res.json();
+        setEventos(data);
+      } catch (err: any) {
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchEventos();
+  }, []);
+
+  // Simulação de calendário mensal
+  const diasMes = Array.from({ length: 30 }, (_, i) => i + 1);
+  const mes = '06';
+  const ano = '2024';
+
+  if (loading) return <div>Carregando calendário...</div>;
+  if (error) return <div className="text-red-600">{error}</div>;
+
+  return (
+    <div className="border rounded p-4 shadow">
+      <div className="grid grid-cols-7 gap-2 mb-4">
+        {diasMes.map((dia) => {
+          const dataStr = `${ano}-${mes}-${dia.toString().padStart(2, '0')}`;
+          const eventosDia = eventos.filter(e => e.data === dataStr);
+          return (
+            <div key={dia} className={`h-16 flex flex-col items-center justify-center border rounded ${eventosDia.length ? 'bg-blue-50' : ''}`}> 
+              <span className="font-bold text-xs">{dia}</span>
+              {eventosDia.map((ev) => (
+                <span key={ev.id} className="text-[10px] text-blue-700">{ev.tipo}</span>
+              ))}
+            </div>
+          );
+        })}
+      </div>
+      <div>
+        <h3 className="font-semibold mb-2">Próximos eventos</h3>
+        <ul className="text-xs">
+          {eventos.map((ev) => (
+            <li key={ev.id} className="mb-1">{ev.data}: {ev.tipo} - {ev.descricao}</li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+};

src/components/dashboard/DashboardLayout.tsx

@@ -1,52 +1,34 @@
 import React from 'react';
 import { useAuth } from '../../contexts/AuthContext';
-import { useDashboardStats } from '../../hooks/useDashboardStats';
-import { ProcessosStats } from './stats/ProcessosStats';
-import { TarefasStats } from './stats/TarefasStats';
-import { AtendimentosStats } from './stats/AtendimentosStats';
-import { FinanceiroStats } from './stats/FinanceiroStats';
-import { AlertasPrazos } from './AlertasPrazos';
-import { AtividadesRecentes } from './AtividadesRecentes';
-import { TaxaSucessoCard } from './TaxaSucessoCard';
-import { KPIsFinanceiros } from './stats/KPIsFinanceiros';
+import { WorkflowTarefas } from './WorkflowTarefas';
+import { CalendarioAtendimentos } from './CalendarioAtendimentos';
+import { BenchmarkingEscritorio } from './BenchmarkingEscritorio';
+import { AtendimentosDia } from './AtendimentosDia';
 
 export const DashboardLayout: React.FC = () => {
   const { user } = useAuth();
-  const {
-    processosStats,
-    tarefasStats,
-    atendimentosStats,
-    financeiroStats,
-    proximosPrazos,
-    atividades
-  } = useDashboardStats();
-
-  const isAdminOrAdvogado = ['ADVOGADO_ADMIN', 'ADVOGADO'].includes(user?.perfil || '');
+  // ...aqui você pode usar hooks customizados para buscar os dados necessários...
 
   return (
-    <div className="space-y-6 p-6">
-      {/* Stats Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-        {processosStats.data && <ProcessosStats data={processosStats.data} />}
-        {tarefasStats.data && <TarefasStats data={tarefasStats.data} />}
-        {atendimentosStats.data && <AtendimentosStats data={atendimentosStats.data} />}
-        {isAdminOrAdvogado && financeiroStats.data && (
-          <FinanceiroStats data={financeiroStats.data} />
-        )}
-      </div>
-
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        {/* Coluna da esquerda */}
-        <div className="lg:col-span-2 space-y-6">
-          <TaxaSucessoCard />
-          {isAdminOrAdvogado && <KPIsFinanceiros />}
-        </div>
-
-        {/* Coluna da direita */}
+    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 p-6">
+      {/* Coluna 1: Workflow de Tarefas */}
       <div className="space-y-6">
-          <AlertasPrazos />
-          <AtividadesRecentes />
+        <h2 className="text-xl font-bold">Workflow de Tarefas</h2>
+        <WorkflowTarefas />
       </div>
+
+      {/* Coluna 2: Calendário de Atendimentos, Compromissos e Diligências */}
+      <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 />
       </div>
     </div>
   );

src/components/dashboard/WorkflowTarefas.tsx

@@ -0,0 +1,56 @@
+import React, { useEffect, useState } from 'react';
+import { useAuth } from '../../contexts/AuthContext';
+
+interface Tarefa {
+  id: string;
+  titulo: string;
+  status: string;
+}
+
+export const WorkflowTarefas: React.FC = () => {
+  const { token } = useAuth();
+  const [tarefas, setTarefas] = useState<Tarefa[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function fetchTarefas() {
+      try {
+        setLoading(true);
+        setError(null);
+        const res = await fetch('/api/tarefas', {
+          headers: {
+            Authorization: `Bearer ${token}`,
+            'Content-Type': 'application/json',
+          },
+        });
+        if (!res.ok) throw new Error('Erro ao buscar tarefas');
+        const data = await res.json();
+        setTarefas(data);
+      } catch (err: any) {
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchTarefas();
+  }, [token]);
+
+  if (loading) return <div>Carregando tarefas...</div>;
+  if (error) return <div className="text-red-600">{error}</div>;
+
+  return (
+    <div className="flex flex-col gap-4">
+      {tarefas.map((tarefa) => (
+        <div key={tarefa.id} className="border rounded p-4 shadow flex justify-between items-center">
+          <span className="font-medium">{tarefa.titulo}</span>
+          <span className={`px-2 py-1 rounded text-xs ${
+            tarefa.status === 'Concluída' ? 'bg-green-100 text-green-700' : tarefa.status === 'Em andamento' ? 'bg-yellow-100 text-yellow-700' : 'bg-gray-100 text-gray-700'
+          }`}>
+            {tarefa.status}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+};