dashboard: reimaginacao

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

src/components/dashboard/CalendarioAtendimentos.tsx

@@ -5,15 +5,22 @@ import { CalendarIcon, UserIcon, PresentationChartBarIcon } from '@heroicons/rea
 export const CalendarioAtendimentos: React.FC = () => {
   const { data: eventos = [], isLoading, error } = useCalendarioAtendimentos();
 
-  // Simulação de calendário mensal
-  const diasMes = Array.from({ length: 30 }, (_, i) => i + 1);
-  const mes = '06';
-  const ano = '2024';
-
+  // Estado para mês e ano selecionados
   const hoje = new Date();
-  const hojeStr = `${ano}-${mes}-${hoje.getDate().toString().padStart(2, '0')}`;
+  const [mesSelecionado, setMesSelecionado] = React.useState(hoje.getMonth() + 1);
+  const [anoSelecionado, setAnoSelecionado] = React.useState(hoje.getFullYear());
+  const diasMes = Array.from({ length: new Date(anoSelecionado, mesSelecionado, 0).getDate() }, (_, i) => i + 1);
+  const mesStr = mesSelecionado.toString().padStart(2, '0');
+  const anoStr = anoSelecionado.toString();
 
-  // Separar eventos futuros/próximos e passados
+  // Atualiza data selecionada ao trocar mês/ano
+  const [dataSelecionada, setDataSelecionada] = React.useState(`${anoStr}-${mesStr}-${hoje.getDate().toString().padStart(2, '0')}`);
+  React.useEffect(() => {
+    setDataSelecionada(`${anoStr}-${mesStr}-${hoje.getDate().toString().padStart(2, '0')}`);
+  }, [mesSelecionado, anoSelecionado]);
+
+  // Separar eventos futuros/próximos e passados considerando ano/mês
+  const hojeStr = `${anoStr}-${mesStr}-${hoje.getDate().toString().padStart(2, '0')}`;
   const eventosProximos = eventos
     .filter(ev => ev.data >= hojeStr)
     .sort((a, b) => a.data.localeCompare(b.data))
@@ -23,7 +30,6 @@ export const CalendarioAtendimentos: React.FC = () => {
     .sort((a, b) => b.data.localeCompare(a.data))
     .slice(0, 10);
 
-  const [dataSelecionada, setDataSelecionada] = React.useState(hojeStr);
   const eventosDoDia = eventos.filter(e => e.data === dataSelecionada);
 
   if (isLoading) return <div>Carregando calendário...</div>;
@@ -34,9 +40,16 @@ export const CalendarioAtendimentos: React.FC = () => {
       <h2 className="text-lg font-bold text-gray-800 dark:text-gray-100 mb-2 flex items-center gap-2">
         <CalendarIcon className="h-6 w-6 text-blue-600" /> Calendário de Atendimentos e Audiências
       </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={() => setMesSelecionado(m => m === 1 ? 12 : m - 1)}>&lt;</button>
+        <span className="font-semibold text-lg">{mesStr}/{anoStr}</span>
+        <button type="button" className="px-2 py-1 rounded bg-gray-100 dark:bg-gray-800" onClick={() => setMesSelecionado(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={() => setAnoSelecionado(a => a - 1)}>&lt; Ano</button>
+        <button type="button" className="px-2 py-1 rounded bg-gray-100 dark:bg-gray-800" onClick={() => setAnoSelecionado(a => a + 1)}>Ano &gt;</button>
+      </div>
       <div className="grid grid-cols-7 gap-2 mb-4">
         {diasMes.map((dia) => {
-          const dataStr = `${ano}-${mes}-${dia.toString().padStart(2, '0')}`;
+          const dataStr = `${anoStr}-${mesStr}-${dia.toString().padStart(2, '0')}`;
           const eventosDia = eventos.filter(e => e.data === dataStr);
           const selecionado = dataStr === dataSelecionada;
           return (