From c03c6d1b5a7c57f92958cc7b7f25639a7ec11ad2 Mon Sep 17 00:00:00 2001
From: "Rodrigo B. de Sousa Martins" <rodrigo.sousa.577@gmail.com>
Date: Tue, 15 Jul 2025 21:37:02 -0300
Subject: [PATCH] dashboard: reimaginacao

Signed-off-by: Rodrigo B. de Sousa Martins <rodrigo.sousa.577@gmail.com>
---
 .../dashboard/CalendarioAtendimentos.tsx      | 26 +++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/components/dashboard/CalendarioAtendimentos.tsx b/src/components/dashboard/CalendarioAtendimentos.tsx
index bfacc21..f1a6ea3 100644
--- a/src/components/dashboard/CalendarioAtendimentos.tsx
+++ b/src/components/dashboard/CalendarioAtendimentos.tsx
@@ -23,6 +23,9 @@ 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>;
   if (error) return <div className="text-red-600">Erro ao buscar eventos</div>;
 
@@ -35,18 +38,37 @@ export const CalendarioAtendimentos: React.FC = () => {
         {diasMes.map((dia) => {
           const dataStr = `${ano}-${mes}-${dia.toString().padStart(2, '0')}`;
           const eventosDia = eventos.filter(e => e.data === dataStr);
+          const selecionado = dataStr === dataSelecionada;
           return (
-            <div key={dia} className={`h-12 flex flex-col items-center justify-center border rounded-lg shadow-sm transition-all text-[11px] ${eventosDia.length ? 'bg-blue-50 dark:bg-blue-900 border-blue-400' : 'bg-gray-50 dark:bg-gray-800'}`}> 
+            <button
+              key={dia}
+              type="button"
+              onClick={() => setDataSelecionada(dataStr)}
+              className={`h-12 w-full flex flex-col items-center justify-center border rounded-lg shadow-sm transition-all text-[11px] focus:outline-none ${selecionado ? 'ring-2 ring-blue-500 border-blue-500 bg-blue-100 dark:bg-blue-900' : eventosDia.length ? 'bg-blue-50 dark:bg-blue-900 border-blue-400' : 'bg-gray-50 dark:bg-gray-800'}`}
+            >
               <span className="font-bold text-[11px] text-gray-700 dark:text-gray-200">{dia}</span>
               {eventosDia.map((ev) => (
                 <span key={ev.id} className={`text-[10px] font-semibold flex items-center gap-1 whitespace-nowrap ${ev.tipo === 'Audiência' ? 'text-red-600' : 'text-blue-700'}`}> 
                   {ev.tipo === 'Audiência' ? <PresentationChartBarIcon className="h-3 w-3" /> : <UserIcon className="h-3 w-3" />} {ev.tipo}
                 </span>
               ))}
-            </div>
+            </button>
           );
         })}
       </div>
+      <div className="mb-6">
+        <h3 className="font-semibold mb-2 flex items-center gap-2"><CalendarIcon className="h-5 w-5 text-blue-600" /> Eventos do dia {dataSelecionada.split('-').reverse().join('/')}</h3>
+        <ul className="text-xs divide-y divide-gray-200 dark:divide-gray-700">
+          {eventosDoDia.length === 0 && <li className="text-gray-400">Não existem eventos no dia selecionado.</li>}
+          {eventosDoDia.map((ev) => (
+            <li key={ev.id} className="py-2 flex flex-wrap items-center gap-3">
+              {ev.tipo === 'Audiência' ? <PresentationChartBarIcon className="h-4 w-4 text-red-600" /> : <UserIcon className="h-4 w-4 text-blue-600" />}
+              <span className="px-2 py-1 rounded text-xs font-semibold bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200 min-w-[80px] text-center">{ev.tipo}</span>
+              <span className="text-gray-600 dark:text-gray-300 break-words max-w-xs">{ev.descricao}</span>
+            </li>
+          ))}
+        </ul>
+      </div>
       <div className="grid grid-cols-2 gap-8">
         <div>
           <h3 className="font-semibold mb-2 flex items-center gap-2"><CalendarIcon className="h-5 w-5 text-blue-600" /> Próximos eventos</h3>