.

feat: atualiza página de login do paciente
- Melhora layout e funcionalidades da página de login do paciente - Ajustes na interface e experiência do usuário
2025-10-03 03:56:40 -03:00 · 2025-10-03 03:52:18 -03:00 · 2025-10-03 03:35:25 -03:00 · 2025-10-03 03:10:49 -03:00 · 2025-10-03 02:42:32 -03:00 · 2025-10-03 02:22:40 -03:00
29 changed files with 584 additions and 306 deletions
--- a/susconecta/app/(main-routes)/calendar/page.tsx
+++ b/susconecta/app/(main-routes)/calendar/page.tsx
@ -85,7 +85,7 @@ export default function AgendamentoPage() {
  };

  return (
-    <div className="flex flex-row">
+    <div className="flex flex-row bg-background">
      <div className="flex w-full flex-col">
        <div className="flex w-full flex-col gap-10 p-6">
          <div className="flex flex-row justify-between items-center">
@ -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>
@ -122,7 +122,7 @@ export default function AgendamentoPage() {
              <div className="flex flex-row">
                <Button
                  variant={"outline"}
-                  className="bg-gray-100 hover:bg-gray-200 hover:text-foreground rounded-l-[100px] rounded-r-[0px]"
+                  className="bg-muted hover:bg-muted/80 hover:text-foreground rounded-l-[100px] rounded-r-[0px]"
                  onClick={() => setActiveTab("calendar")}
                >
                  Calendário
@ -130,7 +130,7 @@ export default function AgendamentoPage() {

                <Button
                  variant={"outline"}
-                  className="bg-gray-100 hover:bg-gray-200 hover:text-foreground rounded-r-[100px] rounded-l-[0px]"
+                  className="bg-muted hover:bg-muted/80 hover:text-foreground rounded-r-[100px] rounded-l-[0px]"
                  onClick={() => setActiveTab("espera")}
                >
                  Lista de espera
--- a/susconecta/app/(main-routes)/configuracao/page.tsx
+++ b/susconecta/app/(main-routes)/configuracao/page.tsx
@ -45,12 +45,12 @@ export default function ConfiguracaoPage() {
  ]

  return (
-    <div className="p-6 space-y-6">
+    <div className="p-6 space-y-6 bg-background">
      {/* título */}
-      <h1 className="text-2xl font-bold">Configurações</h1>
+      <h1 className="text-2xl font-bold text-foreground">Configurações</h1>

      {/* introdução */}
-      <p className="text-gray-600">
+      <p className="text-muted-foreground">
        Ajuste os principais parâmetros do sistema. Escolha uma das seções abaixo
        para configurar horários, mensagens, notificações internas, permissões de usuários
        e regras de segurança da clínica.
@ -66,7 +66,7 @@ export default function ConfiguracaoPage() {
                <CardTitle>{item.title}</CardTitle>
              </CardHeader>
              <CardContent>
-                <p className="text-sm text-gray-600">{item.desc}</p>
+                <p className="text-sm text-muted-foreground">{item.desc}</p>
              </CardContent>
            </Card>
          </Link>
--- a/susconecta/app/(main-routes)/consultas/page.tsx
+++ b/susconecta/app/(main-routes)/consultas/page.tsx
@ -145,7 +145,7 @@ export default function ConsultasPage() {

  if (showForm && editingAppointment) {
    return (
-        <div className="space-y-6 p-6">
+        <div className="space-y-6 p-6 bg-background">
            <div className="flex items-center gap-4">
                <Button type="button" variant="ghost" size="icon" onClick={handleCancel}> 
                    <ArrowLeft className="h-4 w-4" />
@ -162,7 +162,7 @@ export default function ConsultasPage() {
  }

  return (
-    <div className="space-y-6 p-6">
+    <div className="space-y-6 p-6 bg-background">
      <div className="flex items-center justify-between gap-4 flex-wrap">
        <div>
          <h1 className="text-2xl font-bold">Gerenciamento de Consultas</h1>
--- a/susconecta/app/(main-routes)/dashboard/page.tsx
+++ b/susconecta/app/(main-routes)/dashboard/page.tsx
@ -1,7 +1,7 @@
 export default function DashboardPage() {
  return (
    <>
-      <div className="space-y-6 p-6">
+      <div className="space-y-6 p-6 bg-background">
        <div>
          <h1 className="text-2xl font-bold text-foreground">Dashboard</h1>
          <p className="text-muted-foreground">
--- 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" />
--- a/susconecta/app/(main-routes)/doutores/page.tsx
+++ b/susconecta/app/(main-routes)/doutores/page.tsx
@ -287,7 +287,7 @@ export default function DoutoresPage() {

  if (showForm) {
    return (
-      <div className="space-y-6 p-6">
+      <div className="space-y-6 p-6 bg-background">
        <div className="flex items-center gap-4">
          <Button variant="ghost" size="icon" onClick={() => setShowForm(false)}>
            <ArrowLeft className="h-4 w-4" />
@ -307,7 +307,7 @@ export default function DoutoresPage() {
  }

  return (
-    <div className="space-y-6 p-6">
+    <div className="space-y-6 p-6 bg-background">
      <div className="flex items-center justify-between gap-4 flex-wrap">
        <div>
          <h1 className="text-2xl font-bold">Médicos</h1>
--- a/susconecta/app/(main-routes)/pacientes/page.tsx
+++ b/susconecta/app/(main-routes)/pacientes/page.tsx
@ -166,7 +166,7 @@ export default function PacientesPage() {

  if (showForm) {
    return (
-      <div className="space-y-6 p-6">
+      <div className="space-y-6 p-6 bg-background">
        <div className="flex items-center gap-4">
          <Button variant="ghost" onClick={() => setShowForm(false)}>
            <ArrowLeft className="h-4 w-4" />
@ -186,7 +186,7 @@ export default function PacientesPage() {
  }

  return (
-    <div className="space-y-6 p-6">
+    <div className="space-y-6 p-6 bg-background">
      <div className="flex items-center justify-between gap-4 flex-wrap">
        <div>
          <h1 className="text-2xl font-bold">Pacientes</h1>
--- 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 
--- a/susconecta/app/financeiro/page.tsx
+++ 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>
+  );
+}
--- a/susconecta/app/globals.css
+++ b/susconecta/app/globals.css
@ -1,7 +1,7 @@
@import "tailwindcss";
@import "tw-animate-css";

-@custom-variant dark (&:is(.dark *));
+/* Removed unsupported @custom-variant dark (&:is(.dark *)); */

 :root {
  --background: #ffffff;
@ -39,7 +39,42 @@
  --sidebar-ring: var(--color-blue-500);
 }

-@theme inline {
+.dark {
+  --background: #0f172a;
+  --foreground: #cbd5e1;
+  --card: #1e293b;
+  --card-foreground: #e2e8f0;
+  --popover: #1e293b;
+  --popover-foreground: #cbd5e1;
+  --primary: var(--color-blue-500);
+  --primary-foreground: #ffffff;
+  --secondary: #334155;
+  --secondary-foreground: #cbd5e1;
+  --muted: #334155;
+  --muted-foreground: #94a3b8;
+  --accent: #0891b2;
+  --accent-foreground: #ffffff;
+  --destructive: #dc2626;
+  --destructive-foreground: #ffffff;
+  --border: #334155;
+  --input: #334155;
+  --ring: var(--color-blue-500);
+  --chart-1: #0891b2;
+  --chart-2: #0f766e;
+  --chart-3: #f59e0b;
+  --chart-4: #dc2626;
+  --chart-5: #94a3b8;
+  --sidebar: #1e293b;
+  --sidebar-foreground: #cbd5e1;
+  --sidebar-primary: var(--color-blue-500);
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: var(--color-blue-500);
+  --sidebar-accent-foreground: #ffffff;
+  --sidebar-border: #334155;
+  --sidebar-ring: var(--color-blue-500);
+}
+
+:root {
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --color-background: var(--background);
@ -82,9 +117,12 @@

@layer base {
  * {
-    @apply border-border outline-ring/50;
+    border-color: var(--color-border);
+    outline-color: color-mix(in srgb, var(--color-ring) 50%, transparent);
  }
  body {
-    @apply bg-background text-foreground font-sans;
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+    font-family: var(--font-sans, sans-serif);
  }
 }
--- a/susconecta/app/layout.tsx
+++ b/susconecta/app/layout.tsx
@ -1,6 +1,7 @@
 import type React from "react"
 import type { Metadata } from "next"
 import { AuthProvider } from "@/hooks/useAuth"
+import { ThemeProvider } from "@/components/theme-provider"
 import "./globals.css"

 export const metadata: Metadata = {
@ -17,11 +18,13 @@ export default function RootLayout({
  children: React.ReactNode
 }) {
  return (
-    <html lang="pt-BR" className="antialiased">
+    <html lang="pt-BR" className="antialiased" suppressHydrationWarning>
      <body style={{ fontFamily: "var(--font-geist-sans)" }}>
-        <AuthProvider>
-          {children}
-        </AuthProvider>
+        <ThemeProvider attribute="class" defaultTheme="light" enableSystem={false}>
+          <AuthProvider>
+            {children}
+          </AuthProvider>
+        </ThemeProvider>
      </body>
    </html>
  )
--- a/susconecta/app/login-admin/page.tsx
+++ b/susconecta/app/login-admin/page.tsx
@ -45,13 +45,13 @@ export default function LoginAdminPage() {
  }

  return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+    <div className="min-h-screen flex items-center justify-center bg-background py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-md w-full space-y-8">
        <div className="text-center">
-          <h2 className="mt-6 text-3xl font-extrabold text-gray-900">
+          <h2 className="mt-6 text-3xl font-extrabold text-foreground">
            Login Administrador de Clínica
          </h2>
-          <p className="mt-2 text-sm text-gray-600">
+          <p className="mt-2 text-sm text-muted-foreground">
            Entre com suas credenciais para acessar o sistema administrativo
          </p>
        </div>
@ -63,7 +63,7 @@ export default function LoginAdminPage() {
          <CardContent>
            <form onSubmit={handleLogin} className="space-y-6">
              <div>
-                <label htmlFor="email" className="block text-sm font-medium text-gray-700">
+                <label htmlFor="email" className="block text-sm font-medium text-foreground">
                  Email
                </label>
                <Input
@ -79,7 +79,7 @@ export default function LoginAdminPage() {
              </div>
              
              <div>
-                <label htmlFor="password" className="block text-sm font-medium text-gray-700">
+                <label htmlFor="password" className="block text-sm font-medium text-foreground">
                  Senha
                </label>
                <Input
--- a/susconecta/app/login-paciente/page.tsx
+++ b/susconecta/app/login-paciente/page.tsx
@ -43,13 +43,13 @@ export default function LoginPacientePage() {
  }

  return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+    <div className="min-h-screen flex items-center justify-center bg-background py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-md w-full space-y-8">
        <div className="text-center">
-          <h2 className="mt-6 text-3xl font-extrabold text-gray-900">
-            Portal do Paciente
+          <h2 className="mt-6 text-3xl font-extrabold text-foreground">
+            Sou Paciente
          </h2>
-          <p className="mt-2 text-sm text-gray-600">
+          <p className="mt-2 text-sm text-muted-foreground">
            Acesse sua área pessoal e gerencie suas consultas
          </p>
        </div>
@ -61,7 +61,7 @@ export default function LoginPacientePage() {
          <CardContent>
            <form onSubmit={handleLogin} className="space-y-6">
              <div>
-                <label htmlFor="email" className="block text-sm font-medium text-gray-700">
+                <label htmlFor="email" className="block text-sm font-medium text-foreground">
                  Email
                </label>
                <Input
@ -77,7 +77,7 @@ export default function LoginPacientePage() {
              </div>
              
              <div>
-                <label htmlFor="password" className="block text-sm font-medium text-gray-700">
+                <label htmlFor="password" className="block text-sm font-medium text-foreground">
                  Senha
                </label>
                <Input
--- a/susconecta/app/login/page.tsx
+++ b/susconecta/app/login/page.tsx
@ -45,13 +45,13 @@ export default function LoginPage() {
  }

  return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+    <div className="min-h-screen flex items-center justify-center bg-background py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-md w-full space-y-8">
        <div className="text-center">
-          <h2 className="mt-6 text-3xl font-extrabold text-gray-900">
+          <h2 className="mt-6 text-3xl font-extrabold text-foreground">
            Login Profissional de Saúde
          </h2>
-          <p className="mt-2 text-sm text-gray-600">
+          <p className="mt-2 text-sm text-muted-foreground">
            Entre com suas credenciais para acessar o sistema
          </p>
        </div>
@ -63,7 +63,7 @@ export default function LoginPage() {
          <CardContent>
            <form onSubmit={handleLogin} className="space-y-6">
              <div>
-                <label htmlFor="email" className="block text-sm font-medium text-gray-700">
+                <label htmlFor="email" className="block text-sm font-medium text-foreground">
                  Email
                </label>
                <Input
@ -79,7 +79,7 @@ export default function LoginPage() {
              </div>
              
              <div>
-                <label htmlFor="password" className="block text-sm font-medium text-gray-700">
+                <label htmlFor="password" className="block text-sm font-medium text-foreground">
                  Senha
                </label>
                <Input
--- 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>
--- a/susconecta/app/profissional/page.tsx
+++ b/susconecta/app/profissional/page.tsx
--- 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>
--- 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>
--- 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>
      )}
--- a/susconecta/components/dashboard/sidebar.tsx
+++ b/susconecta/components/dashboard/sidebar.tsx
@ -61,7 +61,7 @@ export function Sidebar() {

          {/* este span some no modo ícone */}
          <span className="text-lg font-semibold text-sidebar-foreground group-data-[collapsible=icon]:hidden">
-            MediConnect
+            MEDIConnect
          </span>
        </Link>
      </SidebarHeader>
@ -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}>
--- a/susconecta/components/footer.tsx
+++ b/susconecta/components/footer.tsx
@ -13,7 +13,7 @@ export function Footer() {
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="flex flex-col md:flex-row items-center justify-between space-y-4 md:space-y-0">
          {}
-          <div className="text-muted-foreground text-sm">© 2025 Medi Conecta</div>
+          <div className="text-muted-foreground text-sm">© 2025 MEDI Connect</div>

          {}
          <nav className="flex items-center space-x-8">
--- 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>
--- a/susconecta/components/header.tsx
+++ b/susconecta/components/header.tsx
@ -5,6 +5,7 @@ import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import { Menu, X } from "lucide-react";
 import { usePathname } from "next/navigation";
+import { SimpleThemeToggle } from "@/components/simple-theme-toggle";

 export function Header() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
@ -17,7 +18,7 @@ export function Header() {
          {/* Logo */}
          <Link href="/" className="flex items-center space-x-2">
            <span className="text-xl font-bold text-foreground">
-              <span className="text-primary">MEDI</span>Conecta
+              <span className="text-primary">MEDI</span>Connect
            </span>
          </Link>

@ -43,6 +44,7 @@ export function Header() {

          {}
          <div className="hidden md:flex items-center space-x-3">
+            <SimpleThemeToggle />
            <Button
              variant="outline"
              className="text-primary border-primary hover:bg-primary hover:text-primary-foreground bg-transparent"
@ -92,6 +94,7 @@ export function Header() {
                Sobre
              </Link>
              <div className="flex flex-col space-y-2 pt-4">
+                <SimpleThemeToggle />
                <Button
                  variant="outline"
                  className="text-primary border-primary hover:bg-primary hover:text-primary-foreground bg-transparent"
--- a/susconecta/components/simple-theme-toggle.tsx
+++ b/susconecta/components/simple-theme-toggle.tsx
@ -0,0 +1,22 @@
+"use client"
+
+import * as React from "react"
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+import { Button } from "@/components/ui/button"
+
+export function SimpleThemeToggle() {
+  const { theme, setTheme } = useTheme()
+  
+  const toggleTheme = () => {
+    setTheme(theme === "dark" ? "light" : "dark")
+  }
+
+  return (
+    <Button variant="outline" size="icon" onClick={toggleTheme}>
+      <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+      <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+      <span className="sr-only">Alternar tema</span>
+    </Button>
+  )
+}
--- a/susconecta/components/theme-toggle.tsx
+++ b/susconecta/components/theme-toggle.tsx
@ -0,0 +1,37 @@
+"use client"
+
+import * as React from "react"
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function ThemeToggle() {
+  const { setTheme } = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Alternar tema</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Claro
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Escuro
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
--- a/susconecta/components/ui/input.tsx
+++ b/susconecta/components/ui/input.tsx
@ -8,9 +8,11 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
      type={type}
      data-slot="input"
      className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 flex h-9 w-full min-w-0 rounded-md bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "border-2 border-gray-300 dark:border-gray-600",
+        "focus-visible:border-primary focus-visible:ring-primary/20 focus-visible:ring-2",
+        "hover:border-gray-400 dark:hover:border-gray-500",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive aria-invalid:border-2",
        className
      )}
      {...props}
--- a/susconecta/components/ui/select.tsx
+++ b/susconecta/components/ui/select.tsx
@ -37,7 +37,11 @@ function SelectTrigger({
      data-slot="select-trigger"
      data-size={size}
      className={cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "border-2 border-gray-300 dark:border-gray-600",
+        "focus-visible:border-primary focus-visible:ring-primary/20 focus-visible:ring-2",
+        "hover:border-gray-400 dark:hover:border-gray-500",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive aria-invalid:border-2",
        className
      )}
      {...props}
--- a/susconecta/components/ui/textarea.tsx
+++ b/susconecta/components/ui/textarea.tsx
@ -7,7 +7,11 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
    <textarea
      data-slot="textarea"
      className={cn(
-        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "placeholder:text-muted-foreground dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "border-2 border-gray-300 dark:border-gray-600",
+        "focus-visible:border-primary focus-visible:ring-primary/20 focus-visible:ring-2",
+        "hover:border-gray-400 dark:hover:border-gray-500",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive aria-invalid:border-2",
        className
      )}
      {...props}
--- a/susconecta/hooks/use-force-default-theme.ts
+++ b/susconecta/hooks/use-force-default-theme.ts
@ -0,0 +1,15 @@
+'use client'
+
+import { useEffect } from 'react'
+import { useTheme } from 'next-themes'
+
+export function useForceDefaultTheme() {
+  const { setTheme } = useTheme()
+
+  useEffect(() => {
+    // Força tema claro sempre que o componente montar
+    document.documentElement.classList.remove('dark')
+    localStorage.setItem('theme', 'light')
+    setTheme('light')
+  }, [setTheme])
+}
Author	SHA1	Message	Date
Jonas Francisco	22a60f4ef6	.	2025-10-03 03:56:40 -03:00
Jonas Francisco	dcc4a8ff86	feat: atualiza página de login do paciente - Melhora layout e funcionalidades da página de login do paciente - Ajustes na interface e experiência do usuário	2025-10-03 03:52:18 -03:00
Jonas Francisco	f4abd44efe	feat: implementa melhorias no sistema de tema claro padrão - Adiciona hook customizado para forçar tema claro como padrão - Melhora CSS para prevenir flash de tema escuro - Otimiza transições entre temas	2025-10-03 03:35:25 -03:00
Jonas Francisco	f0a90afe55	refactor: Ajustes manuais em componentes do header e sidebar - Atualiza componentes de header com melhorias visuais - Refina sidebar com ajustes de navegação - Aprimora footer com correções de estilo - Mantém funcionalidades existentes intactas Alterações realizadas manualmente para otimização da interface.	2025-10-03 03:10:49 -03:00
Jonas Francisco	8536a8dd20	fix: Corrige navegação do menu lateral e melhora alinhamento de formulários 🔧 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	2025-10-03 02:42:32 -03:00
Jonas Francisco	47967eb37f	feat: Implementa sistema completo de modo escuro - Adiciona ThemeProvider com next-themes para controle de tema - Implementa componente SimpleThemeToggle com ícones sol/lua - Configura CSS variables completas para light/dark modes no globals.css - Padroniza todas as páginas de autenticação (login, login-admin, login-paciente) - Padroniza todos os módulos principais (dashboard, pacientes, doutores, consultas, calendar, configuração) - Padroniza completamente área profissional com todas as seções: * Calendário e agendamentos * Busca e gestão de pacientes * Prontuários médicos completos * Comunicação e relatórios * Seções de exames (solicitados, resultados, diagnósticos, prescrições, evolução, anexos) - Atualiza componentes UI (input, select, textarea) com bordas visíveis - Implementa suporte dark mode em tooltips, badges de status e mensagens - Garante acessibilidade e consistência visual em ambos os modos - Mantém funcionalidades existentes sem breaking changes Todos os elementos agora respondem adequadamente ao toggle de tema, proporcionando experiência de usuário consistente e acessível.	2025-10-03 02:22:40 -03:00