From 8536a8dd2084197cca8aa6720923314c2d1a5acb Mon Sep 17 00:00:00 2001
From: Jonas Francisco <jonastom478@gmail.com>
Date: Fri, 3 Oct 2025 02:42:32 -0300
Subject: [PATCH] =?UTF-8?q?fix:=20Corrige=20navega=C3=A7=C3=A3o=20do=20men?=
 =?UTF-8?q?u=20lateral=20e=20melhora=20alinhamento=20de=20formul=C3=A1rios?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🔧 Correções no Menu Lateral:
- Fix: Resolve problema onde clicar em "Relatórios" também ativava "Dashboard"
- Ajusta lógica de detecção do item ativo na sidebar
- Evita conflito entre rotas /dashboard e /dashboard/relatorios
- Funciona corretamente em ambos os modos (claro e escuro)

🎨 Padronização das Páginas de Agendamento:
- Padroniza sistema completo de agendamento (agenda, procedimento, financeiro)
- Adiciona página /financeiro com informações financeiras e formas de pagamento
- Padroniza componentes HeaderAgenda e FooterAgenda para modo escuro
- Padroniza ListaEspera com cores responsivas e tabela temática
- Padroniza página de calendário principal com dropdown melhorado
- Padroniza página de relatórios com cards e gráficos adaptativos

📐 Melhorias no Alinhamento dos Formulários:
- Fix: Corrige alinhamento dos campos no formulário de agendamento
- Reorganiza layout de "Data de nascimento" e "Telefone" em colunas separadas
- Alinha perfeitamente campos "Início" e "Término" em grid 2 colunas
- Melhora layout geral da seção "Informações do atendimento"
- Ajusta proporções do textarea de observações
- Layout mais limpo e profissional em todas as telas

✨ Benefícios:
- Navegação precisa no menu lateral
- Sistema de agendamento completamente padronizado
- Formulários com campos perfeitamente alinhados
- Experiência visual consistente em modo claro e escuro
- Interface mais profissional e intuitiva
---
 .../app/(main-routes)/calendar/page.tsx       |   2 +-
 .../dashboard/relatorios/page.tsx             |  20 +--
 susconecta/app/agenda/page.tsx                |   2 +-
 susconecta/app/financeiro/page.tsx            | 148 ++++++++++++++++++
 susconecta/app/procedimento/page.tsx          |  20 +--
 susconecta/components/agenda/FooterAgenda.tsx |   6 +-
 susconecta/components/agenda/HeaderAgenda.tsx |  10 +-
 .../components/agendamento/ListaEspera.tsx    |  38 ++---
 susconecta/components/dashboard/sidebar.tsx   |   4 +-
 .../forms/calendar-registration-form.tsx      |  58 ++++---
 10 files changed, 226 insertions(+), 82 deletions(-)
 create mode 100644 susconecta/app/financeiro/page.tsx

diff --git a/susconecta/app/(main-routes)/calendar/page.tsx b/susconecta/app/(main-routes)/calendar/page.tsx
index e6e97ad..b5a7947 100644
--- a/susconecta/app/(main-routes)/calendar/page.tsx
+++ b/susconecta/app/(main-routes)/calendar/page.tsx
@@ -103,7 +103,7 @@ export default function AgendamentoPage() {
                 </Button>
               </Link> */}
               <DropdownMenu>
-                <DropdownMenuTrigger className="bg-blue-600 hover:bg-blue-700 px-5 py-1 text-white rounded-sm">
+                <DropdownMenuTrigger className="bg-primary hover:bg-primary/90 px-5 py-1 text-primary-foreground rounded-sm">
                   Opções &#187;
                 </DropdownMenuTrigger>
                 <DropdownMenuContent>
diff --git a/susconecta/app/(main-routes)/dashboard/relatorios/page.tsx b/susconecta/app/(main-routes)/dashboard/relatorios/page.tsx
index 8147c76..808ca1f 100644
--- a/susconecta/app/(main-routes)/dashboard/relatorios/page.tsx
+++ b/susconecta/app/(main-routes)/dashboard/relatorios/page.tsx
@@ -41,14 +41,14 @@ export default function RelatoriosPage() {
   };
 
   return (
-    <div className="p-6">
-      <h1 className="text-2xl font-bold mb-6">Relatórios</h1>
+    <div className="p-6 bg-background min-h-screen">
+      <h1 className="text-2xl font-bold mb-6 text-foreground">Relatórios</h1>
 
       <div className="grid grid-cols-3 gap-6">
         {/* Card Consultas */}
-        <div className="p-4 border rounded-lg shadow">
-          <h2 className="font-semibold text-lg">Relatório de Consultas</h2>
-          <p className="text-sm text-gray-500">Resumo das consultas realizadas.</p>
+        <div className="p-4 border border-border rounded-lg shadow bg-card">
+          <h2 className="font-semibold text-lg text-foreground">Relatório de Consultas</h2>
+          <p className="text-sm text-muted-foreground">Resumo das consultas realizadas.</p>
           {/* PASSO 4 - Botão chama a função */}
           <Button onClick={exportConsultasPDF} className="mt-4">
             <FileDown className="mr-2 h-4 w-4" /> Exportar PDF
@@ -56,17 +56,17 @@ export default function RelatoriosPage() {
         </div>
 
         {/* Card Pacientes */}
-        <div className="p-4 border rounded-lg shadow">
-          <h2 className="font-semibold text-lg">Relatório de Pacientes</h2>
-          <p className="text-sm text-gray-500">Informações gerais dos pacientes cadastrados.</p>
+        <div className="p-4 border border-border rounded-lg shadow bg-card">
+          <h2 className="font-semibold text-lg text-foreground">Relatório de Pacientes</h2>
+          <p className="text-sm text-muted-foreground">Informações gerais dos pacientes cadastrados.</p>
           <Button onClick={exportPacientesPDF} className="mt-4">
             <FileDown className="mr-2 h-4 w-4" /> Exportar PDF
           </Button>
         </div>
 
         {/* Card Financeiro com gráfico */}
-        <div className="p-4 border rounded-lg shadow col-span-3 md:col-span-3">
-          <h2 className="font-semibold text-lg mb-2">Relatório Financeiro</h2>
+        <div className="p-4 border border-border rounded-lg shadow col-span-3 md:col-span-3 bg-card">
+          <h2 className="font-semibold text-lg mb-2 text-foreground">Relatório Financeiro</h2>
           <ResponsiveContainer width="100%" height={300}>
             <BarChart data={financeiro} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
               <CartesianGrid strokeDasharray="3 3" />
diff --git a/susconecta/app/agenda/page.tsx b/susconecta/app/agenda/page.tsx
index e639578..36cc1cc 100644
--- a/susconecta/app/agenda/page.tsx
+++ b/susconecta/app/agenda/page.tsx
@@ -19,7 +19,7 @@ export default function NovoAgendamentoPage() {
   };
 
   return (
-    <div className="min-h-screen flex flex-col bg-white">
+    <div className="min-h-screen flex flex-col bg-background">
       <HeaderAgenda />
       <main className="flex-1 mx-auto w-full max-w-7xl px-8 py-8">
         <CalendarRegistrationForm 
diff --git a/susconecta/app/financeiro/page.tsx b/susconecta/app/financeiro/page.tsx
new file mode 100644
index 0000000..bb14865
--- /dev/null
+++ b/susconecta/app/financeiro/page.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { Search, ChevronDown, Calculator, DollarSign } from "lucide-react";
+import { Plus } from "lucide-react";
+import HeaderAgenda from "@/components/agenda/HeaderAgenda";
+import FooterAgenda from "@/components/agenda/FooterAgenda";
+
+export default function FinanceiroPage() {
+  const pathname = usePathname();
+  const router = useRouter();
+  const [bloqueio, setBloqueio] = useState(false);
+
+  const isAg = pathname?.startsWith("/agendamento");
+  const isPr = pathname?.startsWith("/procedimento");
+  const isFi = pathname?.startsWith("/financeiro");
+
+  return (
+    <div className="w-full min-h-screen flex flex-col bg-background">
+      {/* HEADER */}
+      <HeaderAgenda />
+
+      {/* CORPO */}
+      <main className="mx-auto w-full max-w-7xl px-8 py-6 space-y-6 flex-grow">
+        {/* INFORMAÇÕES FINANCEIRAS */}
+        <section className="space-y-6">
+          {/* Selo Financeiro */}
+          <div className="inline-flex items-center gap-2 border border-border px-3 py-1.5 bg-card text-[12px] rounded-md cursor-pointer hover:bg-muted">
+            <span className="flex h-5 w-5 items-center justify-center rounded-full border border-border bg-muted text-muted-foreground">
+              <DollarSign className="h-3 w-3" strokeWidth={2} />
+            </span>
+            <span className="text-foreground">Informações Financeiras</span>
+          </div>
+
+          {/* Traço separador */}
+          <div className="border-b border-border" />
+
+          {/* VALOR DO ATENDIMENTO */}
+          <div className="space-y-4">
+            <Label className="text-[13px] text-foreground/80">
+              Valor do Atendimento
+            </Label>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label className="text-xs text-muted-foreground">Valor Particular</Label>
+                <div className="relative">
+                  <DollarSign className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                  <Input
+                    placeholder="R$ 0,00"
+                    className="h-10 w-full rounded-md pl-8 pr-4 border-input focus-visible:ring-1 focus-visible:ring-sky-500 focus-visible:border-sky-500"
+                  />
+                </div>
+              </div>
+              <div className="space-y-2">
+                <Label className="text-xs text-muted-foreground">Valor Convênio</Label>
+                <div className="relative">
+                  <DollarSign className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                  <Input
+                    placeholder="R$ 0,00"
+                    className="h-10 w-full rounded-md pl-8 pr-4 border-input focus-visible:ring-1 focus-visible:ring-sky-500 focus-visible:border-sky-500"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Traço separador */}
+          <div className="border-b border-border" />
+
+          {/* FORMA DE PAGAMENTO */}
+          <div className="space-y-4">
+            <Label className="text-[13px] text-foreground/80">
+              Forma de Pagamento
+            </Label>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="space-y-2">
+                <Label className="text-xs text-muted-foreground">Tipo</Label>
+                <select className="h-10 w-full rounded-md border border-input bg-background text-foreground pr-8 pl-3 text-[13px] appearance-none">
+                  <option value="">Selecionar</option>
+                  <option value="dinheiro">Dinheiro</option>
+                  <option value="cartao">Cartão</option>
+                  <option value="pix">PIX</option>
+                  <option value="convenio">Convênio</option>
+                </select>
+              </div>
+              <div className="space-y-2">
+                <Label className="text-xs text-muted-foreground">Parcelas</Label>
+                <select className="h-10 w-full rounded-md border border-input bg-background text-foreground pr-8 pl-3 text-[13px] appearance-none">
+                  <option value="1">1x</option>
+                  <option value="2">2x</option>
+                  <option value="3">3x</option>
+                  <option value="4">4x</option>
+                  <option value="5">5x</option>
+                  <option value="6">6x</option>
+                </select>
+              </div>
+              <div className="space-y-2">
+                <Label className="text-xs text-muted-foreground">Desconto</Label>
+                <div className="relative">
+                  <Calculator className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                  <Input
+                    placeholder="0%"
+                    className="h-10 w-full rounded-md pl-8 pr-4 border-input focus-visible:ring-1 focus-visible:ring-sky-500 focus-visible:border-sky-500"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Traço separador */}
+          <div className="border-b border-border" />
+
+          {/* RESUMO FINANCEIRO */}
+          <div className="space-y-4">
+            <Label className="text-[13px] text-foreground/80">
+              Resumo Financeiro
+            </Label>
+            <div className="bg-muted/30 rounded-lg p-4 space-y-3">
+              <div className="flex justify-between items-center">
+                <span className="text-sm text-muted-foreground">Subtotal:</span>
+                <span className="text-sm font-medium text-foreground">R$ 0,00</span>
+              </div>
+              <div className="flex justify-between items-center">
+                <span className="text-sm text-muted-foreground">Desconto:</span>
+                <span className="text-sm font-medium text-foreground">- R$ 0,00</span>
+              </div>
+              <div className="border-t border-border pt-2">
+                <div className="flex justify-between items-center">
+                  <span className="text-base font-medium text-foreground">Total:</span>
+                  <span className="text-lg font-bold text-primary">R$ 0,00</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+
+      {/* RODAPÉ FIXO */}
+      <FooterAgenda />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/susconecta/app/procedimento/page.tsx b/susconecta/app/procedimento/page.tsx
index 535a02b..e23320e 100644
--- a/susconecta/app/procedimento/page.tsx
+++ b/susconecta/app/procedimento/page.tsx
@@ -23,12 +23,12 @@ export default function ProcedimentoPage() {
   const tab = (active: boolean, extra = "") =>
     `px-4 py-1.5 text-[13px] border ${
       active
-        ? "border-sky-500 bg-sky-50 text-sky-700 font-medium"
-        : "text-gray-700 hover:bg-gray-100"
+        ? "border-sky-500 bg-sky-50 dark:bg-sky-900/30 text-sky-700 dark:text-sky-300 font-medium"
+        : "text-muted-foreground hover:bg-muted border-border"
     } ${extra}`;
 
   return (
-    <div className="w-full min-h-screen flex flex-col bg-white">
+    <div className="w-full min-h-screen flex flex-col bg-background">
       {/* HEADER */}
       <HeaderAgenda />
 
@@ -37,15 +37,15 @@ export default function ProcedimentoPage() {
         {/* ATENDIMENTOS */}
         <section className="space-y-6">
           {/* Selo Atendimento com + dentro da bolinha */}
-          <div className="inline-flex items-center gap-2 border px-3 py-1.5 bg-white text-[12px] rounded-md cursor-pointer hover:bg-gray-50">
-            <span className="flex h-5 w-5 items-center justify-center rounded-full border border-gray-400 bg-gray-100 text-gray-700">
+          <div className="inline-flex items-center gap-2 border border-border px-3 py-1.5 bg-card text-[12px] rounded-md cursor-pointer hover:bg-muted">
+            <span className="flex h-5 w-5 items-center justify-center rounded-full border border-border bg-muted text-muted-foreground">
               <Plus className="h-3 w-3" strokeWidth={2} />
             </span>
-            Atendimento
+            <span className="text-foreground">Atendimento</span>
           </div>
 
           {/* Traço separador */}
-          <div className="border-b border-gray-200" />
+          <div className="border-b border-border" />
 
           {/* PROCEDIMENTOS */}
           <div className="space-y-1">
@@ -56,14 +56,14 @@ export default function ProcedimentoPage() {
               <Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
               <Input
                 placeholder="Buscar"
-                className="h-10 w-full rounded-md pl-8 pr-8 border border-gray-300 focus-visible:ring-1 focus-visible:ring-sky-500 focus-visible:border-sky-500"
+                className="h-10 w-full rounded-md pl-8 pr-8 border-input focus-visible:ring-1 focus-visible:ring-sky-500 focus-visible:border-sky-500"
               />
               <ChevronDown className="pointer-events-none absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
             </div>
           </div>
 
           {/* Traço separador */}
-          <div className="border-b border-gray-200" />
+          <div className="border-b border-border" />
 
           {/* OUTRAS DESPESAS */}
           <div className="space-y-1">
@@ -74,7 +74,7 @@ export default function ProcedimentoPage() {
               <Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
               <Input
                 placeholder="Buscar"
-                className="h-10 w-full rounded-md pl-8 pr-8 border border-gray-300 focus-visible:ring-1 focus-visible:ring-sky-500 focus-visible:border-sky-500"
+                className="h-10 w-full rounded-md pl-8 pr-8 border-input focus-visible:ring-1 focus-visible:ring-sky-500 focus-visible:border-sky-500"
               />
               <ChevronDown className="pointer-events-none absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
             </div>
diff --git a/susconecta/components/agenda/FooterAgenda.tsx b/susconecta/components/agenda/FooterAgenda.tsx
index 79b4918..91f73f9 100644
--- a/susconecta/components/agenda/FooterAgenda.tsx
+++ b/susconecta/components/agenda/FooterAgenda.tsx
@@ -11,15 +11,15 @@ export default function FooterAgenda() {
   const [bloqueio, setBloqueio] = useState(false);
   
   return (
-    <div className="sticky bottom-0 left-0 right-0 border-t bg-white">
+    <div className="sticky bottom-0 left-0 right-0 border-t border-border bg-background">
       <div className="mx-auto w-full max-w-7xl px-8 py-3 flex items-center justify-between">
         <div className="flex items-center gap-2">
           <Switch checked={bloqueio} onCheckedChange={setBloqueio} />
-          <Label className="text-sm">Bloqueio de Agenda</Label>
+          <Label className="text-sm text-foreground">Bloqueio de Agenda</Label>
         </div>
         <div className="flex gap-2">
           <Link href={"/calendar"}>
-            <Button variant="ghost" className="hover:bg-blue-100 hover:text-foreground">Cancelar</Button>
+            <Button variant="ghost" className="hover:bg-muted hover:text-foreground">Cancelar</Button>
           </Link>
           <Link href={"/calendar"}>
             <Button>
diff --git a/susconecta/components/agenda/HeaderAgenda.tsx b/susconecta/components/agenda/HeaderAgenda.tsx
index 51594ce..829dfc9 100644
--- a/susconecta/components/agenda/HeaderAgenda.tsx
+++ b/susconecta/components/agenda/HeaderAgenda.tsx
@@ -15,14 +15,14 @@ export default function HeaderAgenda() {
   const tabCls = (active: boolean, extra = "") =>
     `px-4 py-1.5 text-[13px] border ${
       active
-        ? "border-blue-500 bg-blue-50 text-blue-700 font-medium"
-        : "text-gray-700 hover:bg-gray-100"
+        ? "border-blue-500 bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 font-medium"
+        : "text-muted-foreground hover:bg-muted border-border"
     } ${extra}`;
 
   return (
-    <header className="border-b bg-white">
+    <header className="border-b bg-background border-border">
       <div className="mx-auto w-full max-w-7xl px-8 py-3 flex items-center justify-between">
-        <h1 className="text-[18px] font-semibold">Novo Agendamento</h1>
+        <h1 className="text-[18px] font-semibold text-foreground">Novo Agendamento</h1>
 
         <div className="flex items-center gap-2">
           <nav
@@ -60,7 +60,7 @@ export default function HeaderAgenda() {
             type="button"
             aria-label="Histórico"
             onClick={() => router.back()}
-            className="inline-flex h-8 w-8 items-center justify-center rounded-md border bg-white text-gray-700 hover:bg-gray-100"
+            className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-border bg-background text-muted-foreground hover:bg-muted"
           >
             <RotateCcw className="h-4 w-4" />
           </button>
diff --git a/susconecta/components/agendamento/ListaEspera.tsx b/susconecta/components/agendamento/ListaEspera.tsx
index bc9da0c..eaa7863 100644
--- a/susconecta/components/agendamento/ListaEspera.tsx
+++ b/susconecta/components/agendamento/ListaEspera.tsx
@@ -38,21 +38,21 @@ export default function ListaEspera({ patients, onNotify, onAddToWaitlist }: Lis
 
   const getPriorityColor = (priority: string) => {
     switch (priority) {
-      case 'high': return 'bg-red-100 text-red-800';
-      case 'medium': return 'bg-yellow-100 text-yellow-800';
-      case 'low': return 'bg-green-100 text-green-800';
-      default: return 'bg-gray-100 text-gray-800';
+      case 'high': return 'bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300';
+      case 'medium': return 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300';
+      case 'low': return 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300';
+      default: return 'bg-muted text-muted-foreground';
     }
   };
 
   return (
-    <div className="bg-white rounded-lg shadow">
-      <div className="p-4 border-b border-gray-200">
+    <div className="bg-card border border-border rounded-lg shadow">
+      <div className="p-4 border-b border-border">
         <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
-          <h2 className="text-xl font-semibold text-gray-900 mb-4 sm:mb-0">Lista de Espera Inteligente</h2>
+          <h2 className="text-xl font-semibold text-foreground mb-4 sm:mb-0">Lista de Espera Inteligente</h2>
           <button
             onClick={onAddToWaitlist}
-            className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+            className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-primary-foreground bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
           >
             <Plus className="h-4 w-4 mr-2" />
             Adicionar à Lista
@@ -60,7 +60,7 @@ export default function ListaEspera({ patients, onNotify, onAddToWaitlist }: Lis
         </div>
       </div>
 
-      <div className="p-4 border-b border-gray-200">
+      <div className="p-4 border-b border-border">
         <div className="relative">
           <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
             <span className="text-gray-500">🔍</span>
@@ -70,14 +70,14 @@ export default function ListaEspera({ patients, onNotify, onAddToWaitlist }: Lis
             placeholder="Buscar paciente..."
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
-            className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+            className="block w-full pl-10 pr-3 py-2 border border-input rounded-md leading-5 bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary"
           />
         </div>
       </div>
 
       <div className="overflow-x-auto">
-        <table className="min-w-full divide-y divide-gray-200">
-          <thead className="bg-gray-50">
+        <table className="min-w-full divide-y divide-border">
+          <thead className="bg-muted/50">
             <tr>
               <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                 Paciente
@@ -99,16 +99,16 @@ export default function ListaEspera({ patients, onNotify, onAddToWaitlist }: Lis
               </th>
             </tr>
           </thead>
-          <tbody className="bg-white divide-y divide-gray-200">
+          <tbody className="bg-card divide-y divide-border">
             {filteredPatients.map((patient) => (
               <tr key={patient.id}>
-                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">
                   {patient.name}
                 </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground">
                   {patient.specialty}
                 </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground">
                   {new Date(patient.preferredDate).toLocaleDateString('pt-BR')}
                 </td>
                 <td className="px-6 py-4 whitespace-nowrap">
@@ -116,13 +116,13 @@ export default function ListaEspera({ patients, onNotify, onAddToWaitlist }: Lis
                     {getPriorityLabel(patient.priority)}
                   </span>
                 </td>
-                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-muted-foreground">
                   {patient.contact}
                 </td>
                 <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                   <button
                     onClick={() => onNotify(patient.id)}
-                    className="text-blue-600 hover:text-blue-900 mr-3"
+                    className="text-primary hover:text-primary/80 mr-3"
                     title="Notificar paciente"
                   >
                     <Bell className="h-4 w-4" />
@@ -135,7 +135,7 @@ export default function ListaEspera({ patients, onNotify, onAddToWaitlist }: Lis
       </div>
 
       {filteredPatients.length === 0 && (
-        <div className="text-center py-8 text-gray-500">
+        <div className="text-center py-8 text-muted-foreground">
           Nenhum paciente encontrado na lista de espera
         </div>
       )}
diff --git a/susconecta/components/dashboard/sidebar.tsx b/susconecta/components/dashboard/sidebar.tsx
index e7feeec..e05c499 100644
--- a/susconecta/components/dashboard/sidebar.tsx
+++ b/susconecta/components/dashboard/sidebar.tsx
@@ -74,8 +74,8 @@ export function Sidebar() {
           <SidebarGroupContent>
             <SidebarMenu>
               {navigation.map((item) => {
-  const isActive =
-    pathname === item.href || pathname.startsWith(item.href + "/")
+  const isActive = pathname === item.href || 
+    (pathname.startsWith(item.href + "/") && item.href !== "/dashboard")
 
   return (
     <SidebarMenuItem key={item.name}>
diff --git a/susconecta/components/forms/calendar-registration-form.tsx b/susconecta/components/forms/calendar-registration-form.tsx
index 6974df0..c06185f 100644
--- a/susconecta/components/forms/calendar-registration-form.tsx
+++ b/susconecta/components/forms/calendar-registration-form.tsx
@@ -26,13 +26,13 @@ export function CalendarRegistrationForm({ initialData, onSave, onCancel }: any)
 
   return (
     <form onSubmit={handleSubmit} className="space-y-8">
-      <div className="border rounded-md p-6 space-y-4 bg-white">
-        <h2 className="font-medium">Informações do paciente</h2>
+      <div className="border border-border rounded-md p-6 space-y-4 bg-card">
+        <h2 className="font-medium text-foreground">Informações do paciente</h2>
         <div className="grid grid-cols-1 md:grid-cols-12 gap-4">
             <div className="md:col-span-6">
               <Label>Nome *</Label>
               <div className="relative">
-                <Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
+                <Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                 <Input
                   name="patientName" 
                   placeholder="Digite o nome do paciente"
@@ -50,23 +50,19 @@ export function CalendarRegistrationForm({ initialData, onSave, onCancel }: any)
               <Label>RG</Label>
               <Input name="rg" placeholder="Número do RG" className="h-10" value={formData.rg || ''} onChange={handleChange} />
             </div>
-            <div className="md:col-span-6">
-              <div className="grid grid-cols-12 gap-3">
-                <div className="col-span-5">
-                  <Label>Data de nascimento *</Label>
-                  <Input name="birthDate" type="date" className="h-10" value={formData.birthDate || ''} onChange={handleChange} />
-                </div>
-                <div className="col-span-7">
-                  <Label>Telefone</Label>
-                  <div className="grid grid-cols-[86px_1fr] gap-2">
-                    <select name="phoneCode" className="h-10 rounded-md border border-input bg-background px-2 text-[13px]" value={formData.phoneCode || '+55'} onChange={handleChange}>
-                      <option value="+55">+55</option>
-                      <option value="+351">+351</option>
-                      <option value="+1">+1</option>
-                    </select>
-                    <Input name="phoneNumber" placeholder="(99) 99999-9999" className="h-10" value={formData.phoneNumber || ''} onChange={handleChange} />
-                  </div>
-                </div>
+            <div className="md:col-span-3">
+              <Label>Data de nascimento *</Label>
+              <Input name="birthDate" type="date" className="h-10" value={formData.birthDate || ''} onChange={handleChange} />
+            </div>
+            <div className="md:col-span-3">
+              <Label>Telefone</Label>
+              <div className="flex gap-2">
+                <select name="phoneCode" className="h-10 w-20 rounded-md border border-input bg-background text-foreground px-2 text-[13px]" value={formData.phoneCode || '+55'} onChange={handleChange}>
+                  <option value="+55">+55</option>
+                  <option value="+351">+351</option>
+                  <option value="+1">+1</option>
+                </select>
+                <Input name="phoneNumber" placeholder="(99) 99999-9999" className="h-10 flex-1" value={formData.phoneNumber || ''} onChange={handleChange} />
               </div>
             </div>
             <div className="md:col-span-6">
@@ -77,10 +73,10 @@ export function CalendarRegistrationForm({ initialData, onSave, onCancel }: any)
       </div>
 
       {}
-      <div className="border rounded-md p-6 space-y-4 bg-white">
-        <h2 className="font-medium">Informações do atendimento</h2>
-        <div className="grid grid-cols-1 md:grid-cols-12 gap-6">
-            <div className="md:col-span-6 space-y-3">
+      <div className="border border-border rounded-md p-6 space-y-4 bg-card">
+        <h2 className="font-medium text-foreground">Informações do atendimento</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div className="space-y-4">
                 <div>
                     <Label className="text-[13px]">Nome do profissional *</Label>
                     <div className="relative">
@@ -91,7 +87,7 @@ export function CalendarRegistrationForm({ initialData, onSave, onCancel }: any)
                 <div className="grid grid-cols-2 gap-3">
                     <div>
                         <Label className="text-[13px]">Unidade *</Label>
-                        <select name="unit" className="h-10 w-full rounded-md border border-input bg-background pr-8 pl-3 text-[13px] appearance-none" value={formData.unit || 'nei'} onChange={handleChange}>
+                        <select name="unit" className="h-10 w-full rounded-md border border-input bg-background text-foreground pr-8 pl-3 text-[13px] appearance-none" value={formData.unit || 'nei'} onChange={handleChange}>
                             <option value="nei">Núcleo de Especialidades Integradas</option>
                             <option value="cc">Clínica Central</option>
                         </select>
@@ -104,19 +100,19 @@ export function CalendarRegistrationForm({ initialData, onSave, onCancel }: any)
                         </div>
                     </div>
                 </div>
-                <div className="grid grid-cols-12 gap-3 items-end">
-                    <div className="col-span-12 md:col-span-3">
+                <div className="grid grid-cols-2 gap-3">
+                    <div>
                         <Label className="text-[13px]">Início *</Label>
                         <Input name="startTime" type="time" className="h-10 w-full rounded-md border border-input px-3 text-[13px]" value={formData.startTime || ''} onChange={handleChange} />
                     </div>
-                    <div className="col-span-12 md:col-span-3">
+                    <div>
                         <Label className="text-[13px]">Término *</Label>
                         <Input name="endTime" type="time" className="h-10 w-full rounded-md border border-input px-3 text-[13px]" value={formData.endTime || ''} onChange={handleChange} />
                     </div>
                 </div>
             </div>
-            <div className="md:col-span-6">
-                <div className="mb-2">
+            <div className="space-y-4">
+                <div>
                     <Label className="text-[13px]">Tipo de atendimento *</Label>
                     <div className="relative mt-1">
                         <Search className="pointer-events-none absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
@@ -125,7 +121,7 @@ export function CalendarRegistrationForm({ initialData, onSave, onCancel }: any)
                 </div>
                 <div>
                     <Label className="text-[13px]">Observações</Label>
-                    <Textarea name="notes" rows={4} className="text-[13px] h-[110px] min-h-0 resize-none" value={formData.notes || ''} onChange={handleChange} />
+                    <Textarea name="notes" rows={6} className="text-[13px] min-h-[120px] resize-none" value={formData.notes || ''} onChange={handleChange} />
                 </div>
             </div>
         </div>