dashboard: reimaginacao

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

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>
+  );
+};