From ddcc639ab64cb1eca31c5466437b410b828be5d4 Mon Sep 17 00:00:00 2001
From: VPS 4 Builder <deploy@clube67.com>
Date: Mon, 6 Jul 2026 19:22:04 +0200
Subject: [PATCH] =?UTF-8?q?feat(agenda):=20coluna=20"Agenda=20Cl=C3=ADnica?=
 =?UTF-8?q?"=20no=20desktop=20com=20a=20estrutura=20do=20mobile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

As ações da coluna de controles no desktop eram só uma fileira de ícones sem
rótulo (difícil saber o que era cada um). Agora o desktop herda a estrutura do
mobile: botões empilhados com ícone + nome (Atividade da equipe, Pedidos pendentes,
Configurações, Meus Horários, etc.), badges reposicionados junto ao ícone.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/views/AgendaView.tsx | 36 +++++++++++++++++------------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/frontend/views/AgendaView.tsx b/frontend/views/AgendaView.tsx
index 3467ed9..3599a70 100644
--- a/frontend/views/AgendaView.tsx
+++ b/frontend/views/AgendaView.tsx
@@ -658,60 +658,60 @@ export const AgendaView: React.FC<{ onNavigate?: (view: string) => void; sidebar
                         </button>
                     )}
                     {/* Ações — mobile: empilhadas, ícone + nome, largura cheia; desktop: fileira de ícones */}
-                    <div className="flex flex-col lg:flex-row gap-2 w-full">
+                    <div className="flex flex-col gap-2 w-full">
                         {(currentRole !== 'paciente') && (
                             <button onClick={() => { setShowAtividade(true); loadAtividade(); onCloseControls?.(); }} title="Atividade da equipe hoje"
-                                className="w-full lg:flex-1 flex items-center justify-start lg:justify-center gap-3 lg:gap-0 px-4 lg:px-0 py-2.5 bg-white text-gray-500 lg:text-gray-400 hover:text-teal-600 border border-gray-200 rounded-xl transition-all hover:border-teal-200 hover:shadow-sm">
+                                className="w-full flex items-center justify-start gap-3 px-4 py-2.5 bg-white text-gray-500 hover:text-teal-600 border border-gray-200 rounded-xl transition-all hover:border-teal-200 hover:shadow-sm">
                                 <History size={20} className="shrink-0" />
-                                <span className="lg:hidden text-sm font-bold">Atividade da equipe</span>
+                                <span className="text-sm font-bold">Atividade da equipe</span>
                             </button>
                         )}
                         {(currentRole === 'admin' || currentRole === 'donoclinica' || currentRole === 'donoconsultorio') && (
                             <button onClick={handleImportarGoogle} disabled={importando} title="Importar agendamentos do Google para o sistema"
-                                className="w-full lg:flex-1 flex items-center justify-start lg:justify-center gap-3 lg:gap-0 px-4 lg:px-0 py-2.5 bg-white text-gray-500 lg:text-gray-400 hover:text-emerald-600 border border-gray-200 rounded-xl transition-all hover:border-emerald-200 hover:shadow-sm disabled:opacity-50">
+                                className="w-full flex items-center justify-start gap-3 px-4 py-2.5 bg-white text-gray-500 hover:text-emerald-600 border border-gray-200 rounded-xl transition-all hover:border-emerald-200 hover:shadow-sm disabled:opacity-50">
                                 {importando ? <Loader2 size={20} className="animate-spin shrink-0" /> : <Download size={20} className="shrink-0" />}
-                                <span className="lg:hidden text-sm font-bold">Importar do Google</span>
+                                <span className="text-sm font-bold">Importar do Google</span>
                             </button>
                         )}
                         {['admin', 'donoclinica', 'donoconsultorio', 'funcionario'].includes(currentRole) && (
                             <button onClick={() => { setShowPedidos(true); onCloseControls?.(); }} title="Pedidos de horário aguardando confirmação (encaminhados pela Secretária IA)"
-                                className="relative w-full lg:flex-1 flex items-center justify-start lg:justify-center gap-3 lg:gap-0 px-4 lg:px-0 py-2.5 bg-white text-gray-500 lg:text-gray-400 hover:text-amber-600 border border-gray-200 rounded-xl transition-all hover:border-amber-200 hover:shadow-sm">
+                                className="relative w-full flex items-center justify-start gap-3 px-4 py-2.5 bg-white text-gray-500 hover:text-amber-600 border border-gray-200 rounded-xl transition-all hover:border-amber-200 hover:shadow-sm">
                                 <CalendarClock size={20} className="shrink-0" />
-                                <span className="lg:hidden text-sm font-bold">Pedidos pendentes</span>
-                                {pedidosCount > 0 && <span className="absolute -top-1 -right-1 lg:top-0 lg:right-1 bg-amber-500 text-white text-[10px] font-black rounded-full min-w-[18px] h-[18px] flex items-center justify-center px-1 shadow">{pedidosCount}</span>}
+                                <span className="text-sm font-bold">Pedidos pendentes</span>
+                                {pedidosCount > 0 && <span className="absolute -top-1 -right-1 bg-amber-500 text-white text-[10px] font-black rounded-full min-w-[18px] h-[18px] flex items-center justify-center px-1 shadow">{pedidosCount}</span>}
                             </button>
                         )}
                         {(currentRole === 'admin' || currentRole === 'donoclinica' || currentRole === 'donoconsultorio') && (
                             <button onClick={() => { setIsSettingsOpen(true); onCloseControls?.(); }} title="Configurações da agenda"
-                                className="w-full lg:flex-1 flex items-center justify-start lg:justify-center gap-3 lg:gap-0 px-4 lg:px-0 py-2.5 bg-white text-gray-500 lg:text-gray-400 hover:text-teal-600 border border-gray-200 rounded-xl transition-all hover:border-teal-200 hover:shadow-sm">
+                                className="w-full flex items-center justify-start gap-3 px-4 py-2.5 bg-white text-gray-500 hover:text-teal-600 border border-gray-200 rounded-xl transition-all hover:border-teal-200 hover:shadow-sm">
                                 <GearIcon size={20} className="shrink-0" />
-                                <span className="lg:hidden text-sm font-bold">Configurações</span>
+                                <span className="text-sm font-bold">Configurações</span>
                             </button>
                         )}
                         {souDentista && (
                             <button onClick={() => { setShowMeusHorarios(true); onCloseControls?.(); }} title="Configurar meus dias e horários de atendimento"
-                                className="w-full lg:flex-1 flex items-center justify-start lg:justify-center gap-3 lg:gap-0 px-4 lg:px-0 py-2.5 bg-white text-gray-500 lg:text-gray-400 hover:text-teal-600 border border-gray-200 rounded-xl transition-all hover:border-teal-200 hover:shadow-sm">
+                                className="w-full flex items-center justify-start gap-3 px-4 py-2.5 bg-white text-gray-500 hover:text-teal-600 border border-gray-200 rounded-xl transition-all hover:border-teal-200 hover:shadow-sm">
                                 <Clock size={20} className="shrink-0" />
-                                <span className="lg:hidden text-sm font-bold">Meus Horários</span>
+                                <span className="text-sm font-bold">Meus Horários</span>
                             </button>
                         )}
                         {souDentista && (
                             <button onClick={() => { setShowInteresses(true); loadInteresses(); onCloseControls?.(); }} title="Pedidos de interesse na sua agenda"
-                                className="relative w-full lg:flex-1 flex items-center justify-start lg:justify-center gap-3 lg:gap-0 px-4 lg:px-0 py-2.5 bg-white text-gray-500 lg:text-gray-400 hover:text-teal-600 border border-gray-200 rounded-xl transition-all hover:border-teal-200 hover:shadow-sm">
+                                className="relative w-full flex items-center justify-start gap-3 px-4 py-2.5 bg-white text-gray-500 hover:text-teal-600 border border-gray-200 rounded-xl transition-all hover:border-teal-200 hover:shadow-sm">
                                 <Bell size={20} className="shrink-0" />
-                                <span className="lg:hidden text-sm font-bold">Interesses na agenda</span>
+                                <span className="text-sm font-bold">Interesses na agenda</span>
                                 {interessesAguardando > 0 && (
-                                    <span className="absolute top-1.5 left-6 lg:left-auto lg:-top-1 lg:-right-1 bg-red-500 text-white text-[9px] font-black rounded-full w-4 h-4 flex items-center justify-center">{interessesAguardando}</span>
+                                    <span className="absolute top-1.5 left-6 bg-red-500 text-white text-[9px] font-black rounded-full w-4 h-4 flex items-center justify-center">{interessesAguardando}</span>
                                 )}
                             </button>
                         )}
                         {(currentRole !== 'paciente' && !souDentista) && (
                             <button onClick={() => { setShowPendencias(true); loadPendencias(); onCloseControls?.(); }} title="Pacientes a reagendar"
-                                className="relative w-full lg:flex-1 flex items-center justify-start lg:justify-center gap-3 lg:gap-0 px-4 lg:px-0 py-2.5 bg-white text-gray-500 lg:text-gray-400 hover:text-amber-600 border border-gray-200 rounded-xl transition-all hover:border-amber-200 hover:shadow-sm">
+                                className="relative w-full flex items-center justify-start gap-3 px-4 py-2.5 bg-white text-gray-500 hover:text-amber-600 border border-gray-200 rounded-xl transition-all hover:border-amber-200 hover:shadow-sm">
                                 <CalendarClock size={20} className="shrink-0" />
-                                <span className="lg:hidden text-sm font-bold">Pacientes a reagendar</span>
+                                <span className="text-sm font-bold">Pacientes a reagendar</span>
                                 {pendencias.length > 0 && (
-                                    <span className="absolute top-1.5 left-6 lg:left-auto lg:-top-1 lg:-right-1 bg-amber-500 text-white text-[9px] font-black rounded-full w-4 h-4 flex items-center justify-center">{pendencias.length}</span>
+                                    <span className="absolute top-1.5 left-6 bg-amber-500 text-white text-[9px] font-black rounded-full w-4 h-4 flex items-center justify-center">{pendencias.length}</span>
                                 )}
                             </button>
                         )}