StsDanilo/riseup-squad21
1
0
Fork 0
forked from RiseUP/riseup-squad21
Code Pull Requests Activity

integração de acessibilidade v1

Browse Source
This commit is contained in:
Jhony 2025-10-05 18:01:15 -03:00 committed by Jhony-Reis
parent 452d4147dd
commit b89020692f
20 changed files with 540 additions and 279 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
app/cadastro/page.tsx
View File

@ -5,15 +5,15 @@ import { Calendar, Clock, User, Shield, Stethoscope, Receipt, IdCard } from "lu
export default function HomePage() {
return (
<div className="min-h-screen bg-[#F2F2F2]">
<div className="min-h-screen bg-background">
<div className="container mx-auto px-4 py-16">
<div className="text-center mb-12">
<h1 className="text-4xl font-bold text-gray-900 mb-4">Central de Operações <br>
<h1 className="text-4xl font-bold text-foreground mb-4">Central de Operações <br>
</br>
MedConnect
</h1>
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
Gerencie suas consultas médicas de forma simples e eficiente
</p>
</div>
@ -21,21 +21,21 @@ export default function HomePage() {
<div className="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
<Card className="hover:shadow-lg transition-shadow flex flex-col h-full">
<CardHeader className="text-center flex-shrink-0">
<User className="w-12 h-12 text-black-600 mx-auto mb-4" />
<User className="w-12 h-12 text-blue-600 mx-auto mb-4" />
<CardTitle>Área do Paciente</CardTitle>
<CardDescription>Tenha o controle total da sua saúde: agende, consulte o histórico e informações pessoais</CardDescription>
</CardHeader>
<CardContent className="space-y-4 flex-grow flex flex-col">
<div className="space-y-3 flex-grow">
<div className="flex items-center gap-2 text-sm text-gray-600">
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<Calendar className="w-4 h-4" />
<span>Agendar consultas</span>
</div>
<div className="flex items-center gap-2 text-sm text-gray-600">
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<Clock className="w-4 h-4" />
<span>Ver histórico de consultas</span>
</div>
<div className="flex items-center gap-2 text-sm text-gray-600">
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<User className="w-4 h-4" />
<span>Gerenciar dados pessoais</span>
</div>
@ -54,21 +54,21 @@ export default function HomePage() {
</CardHeader>
<CardContent className="space-y-4 flex-grow flex flex-col">
<div className="space-y-3 flex-grow">
<div className="flex items-center gap-2 text-sm text-gray-600">
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<Calendar className="w-4 h-4" />
<span>Gerenciar consultas</span>
</div>
<div className="flex items-center gap-2 text-sm text-gray-600">
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<User className="w-4 h-4" />
<span>Cadastrar pacientes</span>
</div>
<div className="flex items-center gap-2 text-sm text-gray-600">
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<Clock className="w-4 h-4" />
<span>Controlar agenda</span>
</div>
</div>
<Link href="/secretary/login" className="block mt-auto">
<Button className="w-full bg-purple-600 hover:bg-purple-700">Entrar como Secretária</Button>
<Button className="w-full bg-purple-600 text-white hover:bg-purple-700 dark:bg-purple-500 dark:hover:bg-purple-600 dark:text-white">Entrar como Secretária</Button>
</Link>
</CardContent>
</Card>
@ -81,21 +81,21 @@ export default function HomePage() {
</CardHeader>
<CardContent className="space-y-4 flex-grow flex flex-col">
<div className="space-y-3 flex-grow">
<div className="flex items-center gap-2 text-sm text-gray-600">
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<Calendar className="w-4 h-4" />
<span>Gerenciar agenda</span>
</div>
<div className="flex items-center gap-2 text-sm text-gray-600">
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<User className="w-4 h-4" />
<span>Ver pacientes</span>
</div>
<div className="flex items-center gap-2 text-sm text-gray-600">
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<Clock className="w-4 h-4" />
<span>Histórico de atendimentos</span>
</div>
</div>
<Link href="/doctor/login" className="block mt-auto">
<Button className="w-full bg-green-600 hover:bg-green-700">Entrar como Médico</Button>
<Button className="w-full bg-green-600 text-white hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-600 dark:text-white">Entrar como Médico</Button>
</Link>
</CardContent>
</Card>
@ -108,21 +108,21 @@ export default function HomePage() {
</CardHeader>
<CardContent className="space-y-4 flex-grow flex flex-col">
<div className="space-y-3 flex-grow">
<div className="flex items-center gap-2 text-sm text-gray-600">
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<Calendar className="w-4 h-4" />
<span>Relatórios gerenciais</span>
</div>
<div className="flex items-center gap-2 text-sm text-gray-600">
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<User className="w-4 h-4" />
<span>Configurações do sistema</span>
</div>
<div className="flex items-center gap-2 text-sm text-gray-600">
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<Clock className="w-4 h-4" />
<span>Gestão de usuários</span>
</div>
</div>
<Link href="/manager/login" className="block mt-auto">
<Button className="w-full bg-blue-600 hover:bg-blue-700">Entrar como Gestor</Button>
<Button className="w-full bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 dark:text-white">Entrar como Gestor</Button>
</Link>
</CardContent>
</Card>
@ -135,21 +135,21 @@ export default function HomePage() {
</CardHeader>
<CardContent className="space-y-4 flex-grow flex flex-col">
<div className="space-y-3 flex-grow">
<div className="flex items-center gap-2 text-sm text-gray-600">
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<Calendar className="w-4 h-4" />
<span>Relatórios financeiros</span>
</div>
<div className="flex items-center gap-2 text-sm text-gray-600">
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<User className="w-4 h-4" />
<span>Faturamento</span>
</div>
<div className="flex items-center gap-2 text-sm text-gray-600">
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<Clock className="w-4 h-4" />
<span>Controle de pagamentos</span>
</div>
</div>
<Link href="finance/login" className="block mt-auto">
<Button className="w-full bg-orange-600 hover:bg-orange-700">Entrar como Financeiro</Button>
<Button className="w-full bg-orange-600 text-white hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-600 dark:text-white">Entrar como Financeiro</Button>
</Link>
</CardContent>
</Card>

99
app/context/AccessibilityContext.tsx Normal file
View File

@ -0,0 +1,99 @@
"use client";
import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
type Theme = 'light' | 'dark';
type Contrast = 'normal' | 'high';
interface AccessibilityContextProps {
theme: Theme;
setTheme: (theme: Theme) => void;
contrast: Contrast;
setContrast: (contrast: Contrast) => void;
fontSize: number;
increaseFontSize: () => void;
decreaseFontSize: () => void;
resetFontSize: () => void;
}
const AccessibilityContext = createContext<AccessibilityContextProps | undefined>(undefined);
export const AccessibilityProvider = ({ children }: { children: ReactNode }) => {
const [theme, setThemeState] = useState<Theme>(() => {
if (typeof window === 'undefined') return 'light';
return (localStorage.getItem('accessibility-theme') as Theme) || 'light';
});
const [contrast, setContrastState] = useState<Contrast>(() => {
if (typeof window === 'undefined') return 'normal';
return (localStorage.getItem('accessibility-contrast') as Contrast) || 'normal';
});
const [fontSize, setFontSize] = useState<number>(() => {
if (typeof window === 'undefined') return 16;
const storedSize = localStorage.getItem('accessibility-font-size');
return storedSize ? parseFloat(storedSize) : 16;
});
useEffect(() => {
const root = document.documentElement;
// Theme
root.classList.remove('light', 'dark');
root.classList.add(theme);
localStorage.setItem('accessibility-theme', theme);
// Contrast
root.classList.remove('normal-contrast', 'high-contrast');
root.classList.add(contrast === 'high' ? 'high-contrast' : 'normal-contrast');
localStorage.setItem('accessibility-contrast', contrast);
// Font Size
root.style.fontSize = `${fontSize}px`;
localStorage.setItem('accessibility-font-size', fontSize.toString());
}, [theme, contrast, fontSize]);
const setTheme = (newTheme: Theme) => {
setThemeState(newTheme);
};
const setContrast = (newContrast: Contrast) => {
setContrastState(newContrast);
};
const increaseFontSize = () => {
setFontSize(prev => Math.min(prev + 2, 24)); // Cap at 24px
};
const decreaseFontSize = () => {
setFontSize(prev => Math.max(prev - 2, 12)); // Cap at 12px
};
const resetFontSize = () => {
setFontSize(16);
};
return (
<AccessibilityContext.Provider
value={{
theme,
setTheme,
contrast,
setContrast,
fontSize,
increaseFontSize,
decreaseFontSize,
resetFontSize,
}}
>
{children}
</AccessibilityContext.Provider>
);
};
export const useAccessibility = () => {
const context = useContext(AccessibilityContext);
if (context === undefined) {
throw new Error('useAccessibility must be used within an AccessibilityProvider');
}
return context;
};

32
app/doctor/login/page.tsx
View File

@ -65,57 +65,57 @@ export default function DoctorLogin() {
}
return (
<div className="min-h-screen bg-gradient-to-br from-green-50 via-white to-green-50 flex items-center justify-center p-4">
<Card className="w-full max-w-md shadow-xl border-0 bg-white/80 backdrop-blur-sm">
<div className="min-h-screen bg-background flex items-center justify-center p-4">
<Card className="w-full max-w-md shadow-xl border-0 bg-card/80 backdrop-blur-sm">
<CardHeader className="text-center space-y-4 pb-8">
<div className="mx-auto w-16 h-16 bg-green-100 rounded-full flex items-center justify-center">
<Stethoscope className="w-8 h-8 text-green-600" />
<div className="mx-auto w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
<Stethoscope className="w-8 h-8 text-green-600 dark:text-green-400" />
</div>
<div>
<CardTitle className="text-2xl font-bold text-gray-900">Área do Médico</CardTitle>
<CardDescription className="text-gray-600 mt-2">Acesse o sistema médico</CardDescription>
<CardTitle className="text-2xl font-bold text-foreground">Área do Médico</CardTitle>
<CardDescription className="text-muted-foreground mt-2">Acesse o sistema médico</CardDescription>
</div>
</CardHeader>
<CardContent className="space-y-6">
<form onSubmit={handleSubmit} className="space-y-5">
<div className="space-y-2">
<Label htmlFor="email" className="text-sm font-medium text-gray-700">
<Label htmlFor="email" className="text-sm font-medium text-foreground">
E-mail
</Label>
<div className="relative">
<Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
<Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
<Input
id="email"
type="email"
placeholder="dr.medico@clinica.com"
value={form.email}
onChange={(e) => setForm({ ...form, email: e.target.value })}
className="pl-10 h-11 border-gray-200 focus:border-green-500 focus:ring-green-500"
className="pl-10 h-11 border-border focus:border-green-500 focus:ring-green-500"
required
/>
</div>
</div>
<div className="space-y-2">
<Label htmlFor="password" className="text-sm font-medium text-gray-700">
<Label htmlFor="password" className="text-sm font-medium text-foreground">
Senha
</Label>
<div className="relative">
<Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
<Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
<Input
id="password"
type={showPassword ? "text" : "password"}
placeholder="Digite sua senha"
value={form.password}
onChange={(e) => setForm({ ...form, password: e.target.value })}
className="pl-10 pr-10 h-11 border-gray-200 focus:border-green-500 focus:ring-green-500"
className="pl-10 pr-10 h-11 border-border focus:border-green-500 focus:ring-green-500"
required
/>
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-muted-foreground hover:text-foreground"
>
{showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
</button>
@ -124,7 +124,7 @@ export default function DoctorLogin() {
<Button
type="submit"
className="w-full h-11 bg-green-600 hover:bg-green-700 text-white font-medium"
className="w-full h-11 bg-green-600 text-white hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-600 dark:text-white"
disabled={isLoading}
>
{isLoading ? (
@ -140,13 +140,13 @@ export default function DoctorLogin() {
<div className="relative">
<Separator className="my-6" />
<span className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white px-3 text-sm text-gray-500">
<span className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-card px-3 text-sm text-muted-foreground">
ou
</span>
</div>
<div className="text-center">
<Link href="/" className="text-sm text-green-600 hover:text-green-700 font-medium hover:underline">
<Link href="/" className="text-sm text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-500 font-medium hover:underline">
Voltar à página inicial
</Link>
</div>

44
app/doctor/medicos/page.tsx
View File

@ -109,28 +109,28 @@ export default function PacientesPage() {
<DoctorLayout>
<div className="space-y-6">
<div>
<h1 className="text-2xl font-bold text-gray-900">Pacientes</h1>
<p className="text-gray-600">Lista de pacientes vinculados</p>
<h1 className="text-2xl font-bold text-foreground">Pacientes</h1>
<p className="text-muted-foreground">Lista de pacientes vinculados</p>
</div>
<div className="bg-white rounded-lg border border-gray-200">
<div className="bg-card rounded-lg border border-border">
<div className="overflow-x-auto">
<table className="w-full">
<thead className="bg-gray-50 border-b border-gray-200">
<thead className="bg-muted border-b border-border">
<tr>
<th className="text-left p-4 font-medium text-gray-700">Nome</th>
<th className="text-left p-4 font-medium text-gray-700">Telefone</th>
<th className="text-left p-4 font-medium text-gray-700">Cidade</th>
<th className="text-left p-4 font-medium text-gray-700">Estado</th>
<th className="text-left p-4 font-medium text-gray-700">Último atendimento</th>
<th className="text-left p-4 font-medium text-gray-700">Próximo atendimento</th>
<th className="text-left p-4 font-medium text-gray-700">Ações</th>
<th className="text-left p-4 font-medium text-foreground">Nome</th>
<th className="text-left p-4 font-medium text-foreground">Telefone</th>
<th className="text-left p-4 font-medium text-foreground">Cidade</th>
<th className="text-left p-4 font-medium text-foreground">Estado</th>
<th className="text-left p-4 font-medium text-foreground">Último atendimento</th>
<th className="text-left p-4 font-medium text-foreground">Próximo atendimento</th>
<th className="text-left p-4 font-medium text-foreground">Ações</th>
</tr>
</thead>
<tbody>
{loading ? (
<tr>
<td colSpan={7} className="p-6 text-gray-600">
<td colSpan={7} className="p-6 text-muted-foreground">
Carregando pacientes...
</td>
</tr>
@ -140,23 +140,23 @@ export default function PacientesPage() {
</tr>
) : pacientes.length === 0 ? (
<tr>
<td colSpan={7} className="p-8 text-center text-gray-500">
<td colSpan={7} className="p-8 text-center text-muted-foreground">
Nenhum paciente encontrado
</td>
</tr>
) : (
currentItems.map((p) => (
<tr key={p.id} className="border-b border-gray-100 hover:bg-gray-50">
<tr key={p.id} className="border-b border-border hover:bg-accent">
<td className="p-4">{p.nome}</td>
<td className="p-4 text-gray-600">{p.telefone}</td>
<td className="p-4 text-gray-600">{p.cidade}</td>
<td className="p-4 text-gray-600">{p.estado}</td>
<td className="p-4 text-gray-600">{p.ultimoAtendimento}</td>
<td className="p-4 text-gray-600">{p.proximoAtendimento}</td>
<td className="p-4 text-muted-foreground">{p.telefone}</td>
<td className="p-4 text-muted-foreground">{p.cidade}</td>
<td className="p-4 text-muted-foreground">{p.estado}</td>
<td className="p-4 text-muted-foreground">{p.ultimoAtendimento}</td>
<td className="p-4 text-muted-foreground">{p.proximoAtendimento}</td>
<td className="p-4">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button className="text-blue-600 hover:underline">Ações</button>
<button className="text-primary hover:underline">Ações</button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => handleOpenModal(p)}>
@ -192,12 +192,12 @@ export default function PacientesPage() {
</tbody>
</table>
</div>
<div className="flex justify-center space-x-2 mt-4">
<div className="flex justify-center space-x-2 mt-4 p-4">
{Array.from({ length: Math.ceil(pacientes.length / itemsPerPage) }, (_, i) => (
<button
key={i}
onClick={() => paginate(i + 1)}
className={`px-4 py-2 rounded-md ${currentPage === i + 1 ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}
className={`px-4 py-2 rounded-md ${currentPage === i + 1 ? 'bg-primary text-primary-foreground' : 'bg-secondary text-secondary-foreground'}`}
>
{i + 1}
</button>

34
app/finance/login/page.tsx
View File

@ -63,57 +63,57 @@ export default function DoctorLogin() {
}
return (
<div className="min-h-screen bg-gradient-to-br from-orange-50 via-white to-orange-50 flex items-center justify-center p-4">
<Card className="w-full max-w-md shadow-xl border-0 bg-white/80 backdrop-blur-sm">
<div className="min-h-screen bg-background flex items-center justify-center p-4">
<Card className="w-full max-w-md shadow-xl border-0 bg-card/80 backdrop-blur-sm">
<CardHeader className="text-center space-y-4 pb-8">
<div className="mx-auto w-16 h-16 bg-orange-200 rounded-full flex items-center justify-center">
<Receipt className="w-8 h-8 text-orange-600" />
<div className="mx-auto w-16 h-16 bg-orange-100 dark:bg-orange-900/30 rounded-full flex items-center justify-center">
<Receipt className="w-8 h-8 text-orange-600 dark:text-orange-400" />
</div>
<div>
<CardTitle className="text-2xl font-bold text-gray-900">Área do Médico</CardTitle>
<CardDescription className="text-gray-600 mt-2">Acesse o sistema médico</CardDescription>
<CardTitle className="text-2xl font-bold text-foreground">Área Financeira</CardTitle>
<CardDescription className="text-muted-foreground mt-2">Acesse o sistema financeiro</CardDescription>
</div>
</CardHeader>
<CardContent className="space-y-6">
<form onSubmit={handleSubmit} className="space-y-5">
<div className="space-y-2">
<Label htmlFor="email" className="text-sm font-medium text-gray-700">
<Label htmlFor="email" className="text-sm font-medium text-foreground">
E-mail
</Label>
<div className="relative">
<Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
<Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
<Input
id="email"
type="email"
placeholder="dr.medico@clinica.com"
placeholder="financeiro@clinica.com"
value={form.email}
onChange={(e) => setForm({ ...form, email: e.target.value })}
className="pl-10 h-11 border-gray-200 focus:border-green-500 focus:ring-green-500"
className="pl-10 h-11 border-border focus:border-orange-500 focus:ring-orange-500"
required
/>
</div>
</div>
<div className="space-y-2">
<Label htmlFor="password" className="text-sm font-medium text-gray-700">
<Label htmlFor="password" className="text-sm font-medium text-foreground">
Senha
</Label>
<div className="relative">
<Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
<Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
<Input
id="password"
type={showPassword ? "text" : "password"}
placeholder="Digite sua senha"
value={form.password}
onChange={(e) => setForm({ ...form, password: e.target.value })}
className="pl-10 pr-10 h-11 border-gray-200 focus:border-green-500 focus:ring-green-500"
className="pl-10 pr-10 h-11 border-border focus:border-orange-500 focus:ring-orange-500"
required
/>
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-muted-foreground hover:text-foreground"
>
{showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
</button>
@ -122,7 +122,7 @@ export default function DoctorLogin() {
<Button
type="submit"
className="w-full h-11 bg-orange-600 hover:bg-orange-700 text-white font-medium"
className="w-full h-11 bg-orange-600 text-white hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-600 dark:text-white"
disabled={isLoading}
>
{isLoading ? (
@ -138,13 +138,13 @@ export default function DoctorLogin() {
<div className="relative">
<Separator className="my-6" />
<span className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white px-3 text-sm text-gray-500">
<span className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-card px-3 text-sm text-muted-foreground">
ou
</span>
</div>
<div className="text-center">
<Link href="/" className="text-sm text-orange-600 hover:text-orange-700 font-medium hover:underline">
<Link href="/" className="text-sm text-orange-600 hover:text-orange-700 dark:text-orange-400 dark:hover:text-orange-500 font-medium hover:underline">
Voltar à página inicial
</Link>
</div>

31
app/globals.css
View File

@ -74,6 +74,36 @@
--sidebar-ring: oklch(0.439 0 0);
}
.high-contrast {
--background: oklch(0 0 0);
--foreground: oklch(1 0.5 100);
--card: oklch(0 0 0);
--card-foreground: oklch(1 0.5 100);
--popover: oklch(0 0 0);
--popover-foreground: oklch(1 0.5 100);
--primary: oklch(1 0.5 100);
--primary-foreground: oklch(0 0 0);
--secondary: oklch(0 0 0);
--secondary-foreground: oklch(1 0.5 100);
--muted: oklch(0 0 0);
--muted-foreground: oklch(1 0.5 100);
--accent: oklch(0 0 0);
--accent-foreground: oklch(1 0.5 100);
--destructive: oklch(0.5 0.3 30);
--destructive-foreground: oklch(0 0 0);
--border: oklch(1 0.5 100);
--input: oklch(0 0 0);
--ring: oklch(1 0.5 100);
--sidebar: oklch(0 0 0);
--sidebar-foreground: oklch(1 0.5 100);
--sidebar-primary: oklch(1 0.5 100);
--sidebar-primary-foreground: oklch(0 0 0);
--sidebar-accent: oklch(0 0 0);
--sidebar-accent-foreground: oklch(1 0.5 100);
--sidebar-border: oklch(1 0.5 100);
--sidebar-ring: oklch(1 0.5 100);
}
@theme inline {
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
@ -121,5 +151,6 @@
}
body {
@apply bg-background text-foreground;
transition: background-color 0.3s, color 0.3s;
}
}

17
app/layout.tsx
View File

@ -3,8 +3,10 @@ import { GeistSans } from 'geist/font/sans'
import { GeistMono } from 'geist/font/mono'
import { Analytics } from '@vercel/analytics/next'
import './globals.css'
// [PASSO 1.2] - Importando o nosso provider
import { AppointmentsProvider } from './context/AppointmentsContext'
import { AccessibilityProvider } from './context/AccessibilityContext'
import { AccessibilityModal } from '@/components/accessibility-modal'
import { ThemeInitializer } from '@/components/theme-initializer'
export const metadata: Metadata = {
title: 'Clinic App',
@ -18,12 +20,15 @@ export default function RootLayout({
children: React.ReactNode
}>) {
return (
<html lang="en">
<html lang="en" suppressHydrationWarning>
<body className={`font-sans ${GeistSans.variable} ${GeistMono.variable}`}>
{/* [PASSO 1.2] - Envolvendo a aplicação com o provider */}
<AppointmentsProvider>
{children}
</AppointmentsProvider>
<ThemeInitializer />
<AccessibilityProvider>
<AppointmentsProvider>
{children}
</AppointmentsProvider>
<AccessibilityModal />
</AccessibilityProvider>
<Analytics />
</body>
</html>

32
app/manager/login/page.tsx
View File

@ -62,57 +62,57 @@ export default function ManagerLogin() {
}
return (
<div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-blue-50 flex items-center justify-center p-4">
<Card className="w-full max-w-md shadow-xl border-0 bg-white/80 backdrop-blur-sm">
<div className="min-h-screen bg-background flex items-center justify-center p-4">
<Card className="w-full max-w-md shadow-xl border-0 bg-card/80 backdrop-blur-sm">
<CardHeader className="text-center space-y-4 pb-8">
<div className="mx-auto w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center">
<IdCard className="w-8 h-8 text-blue-600" />
<div className="mx-auto w-16 h-16 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center">
<IdCard className="w-8 h-8 text-blue-600 dark:text-blue-400" />
</div>
<div>
<CardTitle className="text-2xl font-bold text-gray-900">Área do Gestor</CardTitle>
<CardDescription className="text-gray-600 mt-2">Acesse o sistema médico</CardDescription>
<CardTitle className="text-2xl font-bold text-foreground">Área do Gestor</CardTitle>
<CardDescription className="text-muted-foreground mt-2">Acesse o sistema de gerenciamento</CardDescription>
</div>
</CardHeader>
<CardContent className="space-y-6">
<form onSubmit={handleSubmit} className="space-y-5">
<div className="space-y-2">
<Label htmlFor="email" className="text-sm font-medium text-gray-700">
<Label htmlFor="email" className="text-sm font-medium text-foreground">
E-mail
</Label>
<div className="relative">
<Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
<Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
<Input
id="email"
type="email"
placeholder="gestor@clinica.com"
value={form.email}
onChange={(e) => setForm({ ...form, email: e.target.value })}
className="pl-10 h-11 border-gray-200 focus:border-blue-500 focus:ring-blue-500"
className="pl-10 h-11 border-border focus:border-blue-500 focus:ring-blue-500"
required
/>
</div>
</div>
<div className="space-y-2">
<Label htmlFor="password" className="text-sm font-medium text-gray-700">
<Label htmlFor="password" className="text-sm font-medium text-foreground">
Senha
</Label>
<div className="relative">
<Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
<Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
<Input
id="password"
type={showPassword ? "text" : "password"}
placeholder="Digite sua senha"
value={form.password}
onChange={(e) => setForm({ ...form, password: e.target.value })}
className="pl-10 pr-10 h-11 border-gray-200 focus:border-green-500 focus:ring-green-500"
className="pl-10 pr-10 h-11 border-border focus:border-blue-500 focus:ring-blue-500"
required
/>
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-muted-foreground hover:text-foreground"
>
{showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
</button>
@ -121,7 +121,7 @@ export default function ManagerLogin() {
<Button
type="submit"
className="w-full h-11 bg-blue-600 hover:bg-blue-700 text-white font-medium"
className="w-full h-11 bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 dark:text-white"
disabled={isLoading}
>
{isLoading ? (
@ -137,13 +137,13 @@ export default function ManagerLogin() {
<div className="relative">
<Separator className="my-6" />
<span className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white px-3 text-sm text-gray-500">
<span className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-card px-3 text-sm text-muted-foreground">
ou
</span>
</div>
<div className="text-center">
<Link href="/" className="text-sm text-blue-600 hover:text-blue-700 font-medium hover:underline">
<Link href="/" className="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-500 font-medium hover:underline">
Voltar à página inicial
</Link>
</div>

67
app/page.tsx
View File

@ -6,29 +6,29 @@ import { Button } from "@/components/ui/button"
export default function InicialPage() {
return (
<div className="min-h-screen flex flex-col bg-gray-50">
<div className="min-h-screen flex flex-col bg-background">
{}
<div className="bg-black text-white text-sm py-2 px-6 flex justify-between">
<div className="bg-primary text-primary-foreground text-sm py-2 px-6 flex justify-between">
<span> Horário: 08h00 - 21h00</span>
<span> Email: contato@medconnect.com</span>
</div>
{}
<header className="bg-white shadow-md py-4 px-6 flex justify-between items-center">
<h1 className="text-2xl font-bold text-blue-700">MedConnect</h1>
<nav className="flex space-x-6 text-gray-700 font-medium">
<a href="#home" className="hover:text-blue-600">Home</a>
<a href="#about" className="hover:text-blue-600">Sobre</a>
<a href="#departments" className="hover:text-blue-600">Departamentos</a>
<a href="#doctors" className="hover:text-blue-600">Médicos</a>
<a href="#contact" className="hover:text-blue-600">Contato</a>
<header className="bg-card shadow-md py-4 px-6 flex justify-between items-center">
<h1 className="text-2xl font-bold text-primary">MedConnect</h1>
<nav className="flex space-x-6 text-muted-foreground font-medium">
<a href="#home" className="hover:text-primary">Home</a>
<a href="#about" className="hover:text-primary">Sobre</a>
<a href="#departments" className="hover:text-primary">Departamentos</a>
<a href="#doctors" className="hover:text-primary">Médicos</a>
<a href="#contact" className="hover:text-primary">Contato</a>
</nav>
<div className="flex space-x-4">
{}
<Link href="/cadastro">
<Button
variant="outline"
className="rounded-full px-6 py-2 border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white transition cursor-pointer"
className="rounded-full px-6 py-2 border-2 transition cursor-pointer"
>
Login
</Button>
@ -38,22 +38,21 @@ export default function InicialPage() {
</header>
{}
<section className="flex flex-col md:flex-row items-center justify-between px-10 md:px-20 py-16 bg-gray-100">
<section className="flex flex-col md:flex-row items-center justify-between px-10 md:px-20 py-16 bg-background">
<div className="max-w-lg">
<h2 className="text-gray-600 uppercase text-sm">Bem-vindo à Saúde Digital</h2>
<h1 className="text-4xl font-extrabold text-black leading-tight mt-2">
<h2 className="text-muted-foreground uppercase text-sm">Bem-vindo à Saúde Digital</h2>
<h1 className="text-4xl font-extrabold text-foreground leading-tight mt-2">
Soluções Médicas <br /> & Cuidados com a Saúde
</h1>
<p className="text-gray-600 mt-4">
<p className="text-muted-foreground mt-4">
Excelência em saúde há mais de 25 anos. Atendimento médicio com qualidade,segurança e carinho.
</p>
<div className="mt-6 flex space-x-4">
<Button className="rounded-full px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white shadow-lg transition">
<Button>
Nossos Serviços
</Button>
<Button
variant="outline"
className="rounded-full px-6 py-2 border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white transition"
variant="secondary"
>
Saiba Mais
</Button>
@ -69,35 +68,35 @@ export default function InicialPage() {
</section>
{}
<section className="py-16 px-10 md:px-20 bg-white">
<h2 className="text-center text-3xl font-bold text-black">Cuidados completos para a sua saúde</h2>
<p className="text-center text-gray-600 mt-2">Serviços médicos que oferecemos</p>
<section className="py-16 px-10 md:px-20 bg-card">
<h2 className="text-center text-3xl font-bold text-foreground">Cuidados completos para a sua saúde</h2>
<p className="text-center text-muted-foreground mt-2">Serviços médicos que oferecemos</p>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-10">
<div className="p-6 bg-gray-100 rounded-xl shadow hover:shadow-lg transition">
<h3 className="text-xl font-semibold text-blue-600">Clínica Geral</h3>
<p className="text-gray-600 mt-2">
<div className="p-6 bg-background rounded-xl shadow hover:shadow-lg transition">
<h3 className="text-xl font-semibold text-primary">Clínica Geral</h3>
<p className="text-muted-foreground mt-2">
Seu primeiro passo para o cuidado. Atendimento focado na prevenção e no diagnóstico inicial.
</p>
<Button className="mt-4 rounded-full bg-blue-600 hover:bg-blue-700 text-white px-5 py-2">
<Button className="mt-4">
Agendar
</Button>
</div>
<div className="p-6 bg-gray-100 rounded-xl shadow hover:shadow-lg transition">
<h3 className="text-xl font-semibold text-blue-600">Pediatria</h3>
<p className="text-gray-600 mt-2">
<div className="p-6 bg-background rounded-xl shadow hover:shadow-lg transition">
<h3 className="text-xl font-semibold text-primary">Pediatria</h3>
<p className="text-muted-foreground mt-2">
Cuidado gentil e especializado para garantir a saúde e o desenvolvimeto de crianças e adolescentes.
</p>
<Button className="mt-4 rounded-full bg-blue-600 hover:bg-blue-700 text-white px-5 py-2">
<Button className="mt-4">
Agendar
</Button>
</div>
<div className="p-6 bg-gray-100 rounded-xl shadow hover:shadow-lg transition">
<h3 className="text-xl font-semibold text-blue-600">Exames</h3>
<p className="text-gray-600 mt-2">
<div className="p-6 bg-background rounded-xl shadow hover:shadow-lg transition">
<h3 className="text-xl font-semibold text-primary">Exames</h3>
<p className="text-muted-foreground mt-2">
Resultados rápidos e precisos em exames laboratoriais e de imagem essenciais para seu diagnóstico.
</p>
<Button className="mt-4 rounded-full bg-blue-600 hover:bg-blue-700 text-white px-5 py-2">
<Button className="mt-4">
Agendar
</Button>
</div>
@ -105,7 +104,7 @@ export default function InicialPage() {
</section>
{}
<footer className="bg-black text-white py-6 text-center">
<footer className="bg-primary text-primary-foreground py-6 text-center">
<p>© 2025 MedConnect</p>
</footer>
</div>

42
app/patient/login/page.tsx
View File

@ -44,25 +44,25 @@ export default function PatientLogin() {
}
return (
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 flex items-center justify-center p-4">
<div className="min-h-screen bg-background flex items-center justify-center p-4">
<div className="w-full max-w-md">
<div className="mb-8">
<Link
href="/"
className="inline-flex items-center text-slate-600 hover:text-blue-600 transition-colors duration-200 font-medium"
className="inline-flex items-center text-muted-foreground hover:text-primary transition-colors duration-200 font-medium"
>
<ArrowLeft className="w-4 h-4 mr-2" />
Voltar ao início
</Link>
</div>
<Card className="shadow-xl border-0 bg-white/80 backdrop-blur-sm">
<Card className="shadow-xl border-0 bg-card/80 backdrop-blur-sm">
<CardHeader className="text-center pb-8">
<div className="mx-auto w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
<Stethoscope className="w-8 h-8 text-blue-600" />
<div className="mx-auto w-16 h-16 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center mb-4">
<Stethoscope className="w-8 h-8 text-blue-600 dark:text-blue-400" />
</div>
<CardTitle className="text-3xl font-bold text-slate-800 mb-2">Área do Paciente</CardTitle>
<CardDescription className="text-slate-600 text-base">
<CardTitle className="text-3xl font-bold text-foreground mb-2">Área do Paciente</CardTitle>
<CardDescription className="text-muted-foreground text-base">
Acesse sua conta para gerenciar consultas e laudos
</CardDescription>
</CardHeader>
@ -70,49 +70,49 @@ export default function PatientLogin() {
<CardContent className="px-8 pb-8">
<form onSubmit={handleLogin} className="space-y-6">
<div className="space-y-2">
<Label htmlFor="email" className="text-slate-700 font-medium">
<Label htmlFor="email" className="text-foreground font-medium">
Email
</Label>
<div className="relative">
<Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 w-5 h-5" />
<Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-5 h-5" />
<Input
id="email"
type="email"
placeholder="seu@email.com"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="pl-11 h-12 border-slate-200 focus:border-blue-500 focus:ring-blue-500"
className="pl-11 h-12 border-border focus:border-blue-500 focus:ring-blue-500"
required
/>
</div>
</div>
<div className="space-y-2">
<Label htmlFor="password" className="text-slate-700 font-medium">
<Label htmlFor="password" className="text-foreground font-medium">
Senha
</Label>
<div className="relative">
<Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 w-5 h-5" />
<Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-5 h-5" />
<Input
id="password"
type={showPassword ? "text" : "password"}
placeholder="Sua senha"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="pl-11 pr-12 h-12 border-slate-200 focus:border-blue-500 focus:ring-blue-500"
className="pl-11 pr-12 h-12 border-border focus:border-blue-500 focus:ring-blue-500"
required
/>
<Button
type="button"
variant="ghost"
size="sm"
className="absolute right-2 top-1/2 transform -translate-y-1/2 h-8 w-8 p-0 hover:bg-slate-100"
className="absolute right-2 top-1/2 transform -translate-y-1/2 h-8 w-8 p-0 hover:bg-accent"
onClick={() => setShowPassword(!showPassword)}
>
{showPassword ? (
<EyeOff className="h-4 w-4 text-slate-400" />
<EyeOff className="h-4 w-4 text-muted-foreground" />
) : (
<Eye className="h-4 w-4 text-slate-400" />
<Eye className="h-4 w-4 text-muted-foreground" />
)}
</Button>
</div>
@ -120,7 +120,7 @@ export default function PatientLogin() {
<Button
type="submit"
className="w-full h-12 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl disabled:opacity-50"
className="w-full h-12 bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 dark:text-white font-semibold rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl disabled:opacity-50"
disabled={isLoading}
>
{isLoading ? (
@ -137,16 +137,16 @@ export default function PatientLogin() {
<div className="mt-8 text-center">
<div className="relative">
<div className="absolute inset-0 flex items-center">
<div className="w-full border-t border-slate-200"></div>
<div className="w-full border-t border-border"></div>
</div>
<div className="relative flex justify-center text-sm">
<span className="px-4 bg-white text-slate-500">Novo por aqui?</span>
<span className="px-4 bg-card text-muted-foreground">Novo por aqui?</span>
</div>
</div>
<div className="mt-4">
<Link
href="/patient/register"
className="inline-flex items-center justify-center w-full h-12 border border-slate-200 rounded-lg text-slate-700 hover:bg-slate-50 transition-colors duration-200 font-medium"
className="inline-flex items-center justify-center w-full h-12 border border-border rounded-lg text-foreground hover:bg-accent transition-colors duration-200 font-medium"
>
Criar nova conta
</Link>
@ -156,7 +156,7 @@ export default function PatientLogin() {
</Card>
<div className="mt-8 text-center">
<p className="text-sm text-slate-500">Problemas para acessar? Entre em contato conosco</p>
<p className="text-sm text-muted-foreground">Problemas para acessar? Entre em contato conosco</p>
</div>
</div>
</div>

32
app/secretary/login/page.tsx
View File

@ -65,57 +65,57 @@ export default function SecretaryLogin() {
}
return (
<div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-blue-50 flex items-center justify-center p-4">
<Card className="w-full max-w-md shadow-xl border-0 bg-white/80 backdrop-blur-sm">
<div className="min-h-screen bg-background flex items-center justify-center p-4">
<Card className="w-full max-w-md shadow-xl border-0 bg-card/80 backdrop-blur-sm">
<CardHeader className="text-center space-y-4 pb-8">
<div className="mx-auto w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center">
<UserCheck className="w-8 h-8 text-blue-600" />
<div className="mx-auto w-16 h-16 bg-purple-100 dark:bg-purple-900/30 rounded-full flex items-center justify-center">
<UserCheck className="w-8 h-8 text-purple-600 dark:text-purple-400" />
</div>
<div>
<CardTitle className="text-2xl font-bold text-gray-900">Área da Secretária</CardTitle>
<CardDescription className="text-gray-600 mt-2">Acesse o sistema de gerenciamento</CardDescription>
<CardTitle className="text-2xl font-bold text-foreground">Área da Secretária</CardTitle>
<CardDescription className="text-muted-foreground mt-2">Acesse o sistema de gerenciamento</CardDescription>
</div>
</CardHeader>
<CardContent className="space-y-6">
<form onSubmit={handleSubmit} className="space-y-5">
<div className="space-y-2">
<Label htmlFor="email" className="text-sm font-medium text-gray-700">
<Label htmlFor="email" className="text-sm font-medium text-foreground">
E-mail
</Label>
<div className="relative">
<Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
<Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
<Input
id="email"
type="email"
placeholder="seu.email@clinica.com"
value={form.email}
onChange={(e) => setForm({ ...form, email: e.target.value })}
className="pl-10 h-11 border-gray-200 focus:border-blue-500 focus:ring-blue-500"
className="pl-10 h-11 border-border focus:border-purple-500 focus:ring-purple-500"
required
/>
</div>
</div>
<div className="space-y-2">
<Label htmlFor="password" className="text-sm font-medium text-gray-700">
<Label htmlFor="password" className="text-sm font-medium text-foreground">
Senha
</Label>
<div className="relative">
<Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
<Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
<Input
id="password"
type={showPassword ? "text" : "password"}
placeholder="Digite sua senha"
value={form.password}
onChange={(e) => setForm({ ...form, password: e.target.value })}
className="pl-10 pr-10 h-11 border-gray-200 focus:border-blue-500 focus:ring-blue-500"
className="pl-10 pr-10 h-11 border-border focus:border-purple-500 focus:ring-purple-500"
required
/>
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-muted-foreground hover:text-foreground"
>
{showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
</button>
@ -124,7 +124,7 @@ export default function SecretaryLogin() {
<Button
type="submit"
className="w-full h-11 bg-blue-600 hover:bg-blue-700 text-white font-medium"
className="w-full h-11 bg-purple-600 text-white hover:bg-purple-700 dark:bg-purple-500 dark:hover:bg-purple-600 dark:text-white"
disabled={isLoading}
>
{isLoading ? (
@ -140,13 +140,13 @@ export default function SecretaryLogin() {
<div className="relative">
<Separator className="my-6" />
<span className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white px-3 text-sm text-gray-500">
<span className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-card px-3 text-sm text-muted-foreground">
ou
</span>
</div>
<div className="text-center">
<Link href="/" className="text-sm text-blue-600 hover:text-blue-700 font-medium hover:underline">
<Link href="/" className="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-500 font-medium hover:underline">
Voltar à página inicial
</Link>
</div>

20
app/secretary/pacientes/page.tsx
View File

@ -126,12 +126,12 @@ export default function PacientesPage() {
<div className="space-y-6">
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
<div>
<h1 className="text-xl md:text-2xl font-bold text-gray-900">Pacientes</h1>
<p className="text-gray-600 text-sm md:text-base">Gerencie as informações de seus pacientes</p>
<h1 className="text-xl md:text-2xl font-bold text-foreground">Pacientes</h1>
<p className="text-muted-foreground text-sm md:text-base">Gerencie as informações de seus pacientes</p>
</div>
<div className="flex gap-2">
<Link href="/secretary/pacientes/novo">
<Button className="bg-blue-600 hover:bg-blue-700 w-full md:w-auto">
<Button className="w-full md:w-auto">
<Plus className="w-4 h-4 mr-2" />
Adicionar
</Button>
@ -139,10 +139,10 @@ export default function PacientesPage() {
</div>
</div>
<div className="flex flex-col md:flex-row flex-wrap gap-4 bg-white p-4 rounded-lg border border-gray-200">
<div className="flex flex-col md:flex-row flex-wrap gap-4 bg-card p-4 rounded-lg border border-border">
{/* Convênio */}
<div className="flex items-center gap-2 w-full md:w-auto">
<span className="text-sm font-medium text-gray-700">Convênio</span>
<span className="text-sm font-medium text-foreground">Convênio</span>
<Select value={convenioFilter} onValueChange={setConvenioFilter}>
<SelectTrigger className="w-full md:w-40">
<SelectValue placeholder="Selecione o Convênio" />
@ -157,7 +157,7 @@ export default function PacientesPage() {
</div>
<div className="flex items-center gap-2 w-full md:w-auto">
<span className="text-sm font-medium text-gray-700">VIP</span>
<span className="text-sm font-medium text-foreground">VIP</span>
<Select value={vipFilter} onValueChange={setVipFilter}>
<SelectTrigger className="w-full md:w-32">
<SelectValue placeholder="Selecione" />
@ -170,7 +170,7 @@ export default function PacientesPage() {
</Select>
</div>
<div className="flex items-center gap-2 w-full md:w-auto">
<span className="text-sm font-medium text-gray-700">Aniversariantes</span>
<span className="text-sm font-medium text-foreground">Aniversariantes</span>
<Select>
<SelectTrigger className="w-full md:w-32">
<SelectValue placeholder="Selecione" />
@ -184,7 +184,7 @@ export default function PacientesPage() {
</div>
<div className="flex items-center gap-2">
<span className="text-sm font-medium text-gray-700">VIP</span>
<span className="text-sm font-medium text-foreground">VIP</span>
<Select value={vipFilter} onValueChange={setVipFilter}>
<SelectTrigger className="w-32">
<SelectValue placeholder="Selecione" />
@ -198,7 +198,7 @@ export default function PacientesPage() {
</div>
<div className="flex items-center gap-2">
<span className="text-sm font-medium text-gray-700">Aniversariantes</span>
<span className="text-sm font-medium text-foreground">Aniversariantes</span>
<Select>
<SelectTrigger className="w-32">
<SelectValue placeholder="Selecione" />
@ -211,7 +211,7 @@ export default function PacientesPage() {
</Select>
</div>
<Button variant="outline" className="ml-auto bg-transparent w-full md:w-auto">
<Button variant="outline" className="ml-auto w-full md:w-auto">
<Filter className="w-4 h-4 mr-2" />
Filtro avançado
</Button>

95
components/accessibility-modal.tsx Normal file
View File

@ -0,0 +1,95 @@
"use client";
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { useAccessibility } from "@/app/context/AccessibilityContext";
import { Sun, Moon, Contrast, Accessibility } from "lucide-react";
export function AccessibilityModal() {
const {
theme,
setTheme,
contrast,
setContrast,
increaseFontSize,
decreaseFontSize,
resetFontSize,
} = useAccessibility();
const toggleTheme = () => {
setTheme(theme === "light" ? "dark" : "light");
};
const toggleContrast = () => {
setContrast(contrast === "normal" ? "high" : "normal");
};
return (
<Dialog>
<DialogTrigger asChild>
<Button variant="outline" size="icon" className="fixed bottom-4 right-4 z-50 rounded-full h-14 w-14">
<Accessibility className="h-6 w-6" />
<span className="sr-only">Abrir configurações de acessibilidade</span>
</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle>Configurações de Acessibilidade</DialogTitle>
<DialogDescription>
Ajuste a aparência do site para a sua preferência. Suas
configurações serão salvas para a próxima visita.
</DialogDescription>
</DialogHeader>
<div className="grid gap-6 py-4">
<div className="flex items-center justify-between">
<Label htmlFor="dark-mode" className="flex items-center gap-2">
{theme === "light" ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
<span>Modo Escuro</span>
</Label>
<Switch
id="dark-mode"
checked={theme === "dark"}
onCheckedChange={toggleTheme}
/>
</div>
<div className="flex items-center justify-between">
<Label htmlFor="high-contrast" className="flex items-center gap-2">
<Contrast className="h-5 w-5" />
<span>Alto Contraste</span>
</Label>
<Switch
id="high-contrast"
checked={contrast === "high"}
onCheckedChange={toggleContrast}
/>
</div>
<div className="flex items-center justify-between">
<Label className="flex items-center gap-2">
<span className="text-base">Tamanho da Fonte</span>
</Label>
<div className="flex items-center gap-2">
<Button variant="outline" size="sm" onClick={decreaseFontSize} aria-label="Diminuir tamanho da fonte">
A-
</Button>
<Button variant="outline" size="sm" onClick={resetFontSize} aria-label="Resetar tamanho da fonte">
A
</Button>
<Button variant="outline" size="sm" onClick={increaseFontSize} aria-label="Aumentar tamanho da fonte">
A+
</Button>
</div>
</div>
</div>
</DialogContent>
</Dialog>
);
}

58
components/doctor-layout.tsx
View File

@ -112,17 +112,17 @@ useEffect(() => {
}
return (
<div className="min-h-screen bg-gray-50 flex">
<div className="min-h-screen bg-background flex">
{/* Sidebar para desktop */}
<div className={`bg-white border-r border-gray-200 transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"} fixed left-0 top-0 h-screen flex flex-col z-50`}>
<div className="p-4 border-b border-gray-200">
<div className={`bg-card border-r border-border transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"} fixed left-0 top-0 h-screen flex flex-col z-50`}>
<div className="p-4 border-b border-border">
<div className="flex items-center justify-between">
{!sidebarCollapsed && (
<div className="flex items-center gap-2">
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
<div className="w-4 h-4 bg-white rounded-sm"></div>
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
<div className="w-4 h-4 bg-primary-foreground rounded-sm"></div>
</div>
<span className="font-semibold text-gray-900">MidConnecta</span>
<span className="font-semibold text-foreground">MidConnecta</span>
</div>
)}
<Button variant="ghost" size="sm" onClick={() => setSidebarCollapsed(!sidebarCollapsed)} className="p-1">
@ -138,7 +138,7 @@ useEffect(() => {
return (
<Link key={item.href} href={item.href}>
<div className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600" : "text-gray-600 hover:bg-gray-50"}`}>
<div className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"}`}>
<Icon className="w-5 h-5 flex-shrink-0" />
{!sidebarCollapsed && <span className="font-medium">{item.label}</span>}
</div>
@ -150,15 +150,15 @@ useEffect(() => {
// ... (seu código anterior)
{/* Sidebar para desktop */}
<div className={`bg-white border-r border-gray-200 transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"} fixed left-0 top-0 h-screen flex flex-col z-50`}>
<div className="p-4 border-b border-gray-200">
<div className={`bg-card border-r border-border transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"} fixed left-0 top-0 h-screen flex flex-col z-50`}>
<div className="p-4 border-b border-border">
<div className="flex items-center justify-between">
{!sidebarCollapsed && (
<div className="flex items-center gap-2">
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
<div className="w-4 h-4 bg-white rounded-sm"></div>
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
<div className="w-4 h-4 bg-primary-foreground rounded-sm"></div>
</div>
<span className="font-semibold text-gray-900">MedConnect</span>
<span className="font-semibold text-foreground">MedConnect</span>
</div>
)}
<Button variant="ghost" size="sm" onClick={() => setSidebarCollapsed(!sidebarCollapsed)} className="p-1">
@ -174,7 +174,7 @@ useEffect(() => {
return (
<Link key={item.href} href={item.href}>
<div className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600" : "text-gray-600 hover:bg-gray-50"}`}>
<div className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"}`}>
<Icon className="w-5 h-5 flex-shrink-0" />
{!sidebarCollapsed && <span className="font-medium">{item.label}</span>}
</div>
@ -198,8 +198,8 @@ useEffect(() => {
</AvatarFallback>
</Avatar>
<div className="flex-1 min-w-0">
<p className="text-sm font-medium text-gray-900 truncate">{doctorData.name}</p>
<p className="text-xs text-gray-500 truncate">{doctorData.specialty}</p>
<p className="text-sm font-medium text-foreground truncate">{doctorData.name}</p>
<p className="text-xs text-muted-foreground truncate">{doctorData.specialty}</p>
</div>
</>
)}
@ -218,7 +218,7 @@ useEffect(() => {
{/* Novo botão de sair, usando a mesma estrutura dos itens de menu */}
<div
className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors text-gray-600 hover:bg-gray-50 cursor-pointer ${sidebarCollapsed ? "justify-center" : ""}`}
className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors text-muted-foreground hover:bg-accent hover:text-accent-foreground cursor-pointer ${sidebarCollapsed ? "justify-center" : ""}`}
onClick={handleLogout}
>
<LogOut className="w-5 h-5 flex-shrink-0" />
@ -231,15 +231,15 @@ useEffect(() => {
{/* Sidebar para mobile (apresentado como um menu overlay) */}
{isMobileMenuOpen && (
<div className="fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden" onClick={toggleMobileMenu}></div>
<div className="fixed inset-0 bg-background/50 z-40 md:hidden" onClick={toggleMobileMenu}></div>
)}
<div className={`bg-white border-r border-gray-200 fixed left-0 top-0 h-screen flex flex-col z-50 transition-transform duration-300 md:hidden ${isMobileMenuOpen ? "translate-x-0 w-64" : "-translate-x-full w-64"}`}>
<div className="p-4 border-b border-gray-200 flex items-center justify-between">
<div className={`bg-card border-r border-border fixed left-0 top-0 h-screen flex flex-col z-50 transition-transform duration-300 md:hidden ${isMobileMenuOpen ? "translate-x-0 w-64" : "-translate-x-full w-64"}`}>
<div className="p-4 border-b border-border flex items-center justify-between">
<div className="flex items-center gap-2">
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
<div className="w-4 h-4 bg-white rounded-sm"></div>
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
<div className="w-4 h-4 bg-primary-foreground rounded-sm"></div>
</div>
<span className="font-semibold text-gray-900">Hospital System</span>
<span className="font-semibold text-foreground">Hospital System</span>
</div>
<Button variant="ghost" size="sm" onClick={toggleMobileMenu} className="p-1">
<X className="w-4 h-4" />
@ -253,7 +253,7 @@ useEffect(() => {
return (
<Link key={item.href} href={item.href} onClick={toggleMobileMenu}> {/* Fechar menu ao clicar */}
<div className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600" : "text-gray-600 hover:bg-gray-50"}`}>
<div className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"}`}>
<Icon className="w-5 h-5 flex-shrink-0" />
<span className="font-medium">{item.label}</span>
</div>
@ -274,8 +274,8 @@ useEffect(() => {
</AvatarFallback>
</Avatar>
<div className="flex-1 min-w-0">
<p className="text-sm font-medium text-gray-900 truncate">{doctorData.name}</p>
<p className="text-xs text-gray-500 truncate">{doctorData.specialty}</p>
<p className="text-sm font-medium text-foreground truncate">{doctorData.name}</p>
<p className="text-xs text-muted-foreground truncate">{doctorData.specialty}</p>
</div>
</div>
<Button variant="outline" size="sm" className="w-full bg-transparent" onClick={() => { handleLogout(); toggleMobileMenu(); }}> {/* Fechar menu ao deslogar */}
@ -289,19 +289,19 @@ useEffect(() => {
{/* Main Content */}
<div className={`flex-1 flex flex-col transition-all duration-300 ${sidebarCollapsed ? "ml-16" : "ml-64"}`}>
{/* Header */}
<header className="bg-white border-b border-gray-200 px-6 py-4">
<header className="bg-card border-b border-border px-6 py-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-4 flex-1">
<div className="relative flex-1 max-w-md">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
<Input placeholder="Buscar paciente" className="pl-10 bg-gray-50 border-gray-200" />
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
<Input placeholder="Buscar paciente" className="pl-10 bg-background border-border" />
</div>
</div>
<div className="flex items-center gap-4">
<Button variant="ghost" size="sm" className="relative">
<Bell className="w-5 h-5" />
<Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-red-500 text-white text-xs">1</Badge>
<Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-destructive text-destructive-foreground text-xs">1</Badge>
</Button>
</div>
</div>

28
components/finance-layout.tsx
View File

@ -122,21 +122,21 @@ export default function FinancierLayout({ children }: PatientLayoutProps) {
}
return (
<div className="min-h-screen bg-gray-50 flex">
<div className="min-h-screen bg-background flex">
{/* Sidebar */}
<div
className={`bg-white border-r border-gray-200 transition-all duration-300 ${
className={`bg-card border-r border-border transition-all duration-300 ${
sidebarCollapsed ? "w-16" : "w-64"
} fixed left-0 top-0 h-screen flex flex-col z-10`}
>
<div className="p-4 border-b border-gray-200">
<div className="p-4 border-b border-border">
<div className="flex items-center justify-between">
{!sidebarCollapsed && (
<div className="flex items-center gap-2">
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
<div className="w-4 h-4 bg-white rounded-sm"></div>
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
<div className="w-4 h-4 bg-primary-foreground rounded-sm"></div>
</div>
<span className="font-semibold text-gray-900">
<span className="font-semibold text-foreground">
MidConnecta
</span>
</div>
@ -168,8 +168,8 @@ export default function FinancierLayout({ children }: PatientLayoutProps) {
<div
className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${
isActive
? "bg-blue-50 text-blue-600 border-r-2 border-blue-600"
: "text-gray-600 hover:bg-gray-50"
? "bg-accent text-accent-foreground"
: "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
}`}
>
<Icon className="w-5 h-5 flex-shrink-0" />
@ -196,10 +196,10 @@ export default function FinancierLayout({ children }: PatientLayoutProps) {
</Avatar>
{!sidebarCollapsed && (
<div className="flex-1 min-w-0">
<p className="text-sm font-medium text-gray-900 truncate">
<p className="text-sm font-medium text-foreground truncate">
{financierData.name}
</p>
<p className="text-xs text-gray-500 truncate">
<p className="text-xs text-muted-foreground truncate">
{financierData.department}
</p>
</div>
@ -233,14 +233,14 @@ export default function FinancierLayout({ children }: PatientLayoutProps) {
}`}
>
{/* Header */}
<header className="bg-white border-b border-gray-200 px-6 py-4">
<header className="bg-card border-b border-border px-6 py-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-4 flex-1 max-w-md">
<div className="relative flex-1">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
<Input
placeholder="Buscar paciente"
className="pl-10 bg-gray-50 border-gray-200"
className="pl-10 bg-background border-border"
/>
</div>
</div>
@ -248,7 +248,7 @@ export default function FinancierLayout({ children }: PatientLayoutProps) {
<div className="flex items-center gap-4">
<Button variant="ghost" size="sm" className="relative">
<Bell className="w-5 h-5" />
<Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-red-500 text-white text-xs">
<Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-destructive text-destructive-foreground text-xs">
1
</Badge>
</Button>

26
components/hospital-layout.tsx
View File

@ -111,19 +111,19 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
}
return (
<div className="min-h-screen bg-gray-50 flex">
<div className="min-h-screen bg-background flex">
{/* Sidebar */}
<div
className={`bg-white border-r border-gray-200 transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"} h-screen flex flex-col`}
className={`bg-card border-r border-border transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"} h-screen flex flex-col`}
>
<div className="p-4 border-b border-gray-200">
<div className="p-4 border-b border-border">
<div className="flex items-center justify-between">
{!sidebarCollapsed && (
<div className="flex items-center gap-2">
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
<div className="w-4 h-4 bg-white rounded-sm"></div>
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
<div className="w-4 h-4 bg-primary-foreground rounded-sm"></div>
</div>
<span className="font-semibold text-gray-900">MedConnect</span>
<span className="font-semibold text-foreground">MedConnect</span>
</div>
)}
<Button variant="ghost" size="sm" onClick={() => setSidebarCollapsed(!sidebarCollapsed)} className="p-1">
@ -141,7 +141,7 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
<Link key={item.href} href={item.href}>
<div
className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${
isActive ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600" : "text-gray-600 hover:bg-gray-50"
isActive ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
}`}
>
<Icon className="w-5 h-5 flex-shrink-0" />
@ -164,8 +164,8 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
</AvatarFallback>
</Avatar>
<div className="flex-1 min-w-0">
<p className="text-sm font-medium text-gray-900 truncate">{patientData.name}</p>
<p className="text-xs text-gray-500 truncate">{patientData.email}</p>
<p className="text-sm font-medium text-foreground truncate">{patientData.name}</p>
<p className="text-xs text-muted-foreground truncate">{patientData.email}</p>
</div>
</div>
<Button variant="outline" size="sm" className="w-full bg-transparent" onClick={handleLogout}>
@ -178,19 +178,19 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
{/* Main Content */}
<div className="flex-1 flex flex-col">
{/* Header */}
<header className="bg-white border-b border-gray-200 px-6 py-4">
<header className="bg-card border-b border-border px-6 py-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-4 flex-1 max-w-md">
<div className="relative flex-1">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
<Input placeholder="Buscar paciente" className="pl-10 bg-gray-50 border-gray-200" />
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
<Input placeholder="Buscar paciente" className="pl-10 bg-background border-border" />
</div>
</div>
<div className="flex items-center gap-4">
<Button variant="ghost" size="sm" className="relative">
<Bell className="w-5 h-5" />
<Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-red-500 text-white text-xs">
<Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-destructive text-destructive-foreground text-xs">
1
</Badge>
</Button>

28
components/manager-layout.tsx
View File

@ -96,20 +96,20 @@ export default function ManagerLayout({ children }: PatientLayoutProps) {
}
return (
<div className="min-h-screen bg-gray-50 flex">
<div className="min-h-screen bg-background flex">
{/* Sidebar */}
<div
className={`bg-white border-r border-gray-200 transition-all duration-300 fixed top-0 h-screen flex flex-col z-30
className={`bg-card border-r border-border transition-all duration-300 fixed top-0 h-screen flex flex-col z-30
${sidebarCollapsed ? "w-16" : "w-64"}`}
>
{/* Logo + collapse button */}
<div className="p-4 border-b border-gray-200 flex items-center justify-between">
<div className="p-4 border-b border-border flex items-center justify-between">
{!sidebarCollapsed && (
<div className="flex items-center gap-2">
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
<div className="w-4 h-4 bg-white rounded-sm"></div>
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
<div className="w-4 h-4 bg-primary-foreground rounded-sm"></div>
</div>
<span className="font-semibold text-gray-900">
<span className="font-semibold text-foreground">
MidConnecta
</span>
</div>
@ -141,8 +141,8 @@ export default function ManagerLayout({ children }: PatientLayoutProps) {
<div
className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${
isActive
? "bg-blue-50 text-blue-600 border-r-2 border-blue-600"
: "text-gray-600 hover:bg-gray-50"
? "bg-accent text-accent-foreground"
: "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
}`}
>
<Icon className="w-5 h-5 flex-shrink-0" />
@ -169,10 +169,10 @@ export default function ManagerLayout({ children }: PatientLayoutProps) {
</Avatar>
{!sidebarCollapsed && (
<div className="flex-1 min-w-0">
<p className="text-sm font-medium text-gray-900 truncate">
<p className="text-sm font-medium text-foreground truncate">
{managerData.name}
</p>
<p className="text-xs text-gray-500 truncate">
<p className="text-xs text-muted-foreground truncate">
{managerData.department}
</p>
</div>
@ -205,14 +205,14 @@ export default function ManagerLayout({ children }: PatientLayoutProps) {
${sidebarCollapsed ? "ml-16" : "ml-64"}`}
>
{/* Header */}
<header className="bg-white border-b border-gray-200 px-4 md:px-6 py-4 flex items-center justify-between">
<header className="bg-card border-b border-border px-4 md:px-6 py-4 flex items-center justify-between">
{/* Search */}
<div className="flex items-center gap-4 flex-1 max-w-md">
<div className="relative flex-1">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
<Input
placeholder="Buscar paciente"
className="pl-10 bg-gray-50 border-gray-200"
className="pl-10 bg-background border-border"
/>
</div>
</div>
@ -221,7 +221,7 @@ export default function ManagerLayout({ children }: PatientLayoutProps) {
<div className="flex items-center gap-4 ml-auto">
<Button variant="ghost" size="sm" className="relative">
<Bell className="w-5 h-5" />
<Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-red-500 text-white text-xs">
<Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-destructive text-destructive-foreground text-xs">
1
</Badge>
</Button>

28
components/patient-layout.tsx
View File

@ -97,22 +97,22 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
}
return (
<div className="min-h-screen bg-gray-50 flex">
<div className="min-h-screen bg-background flex">
{/* Sidebar */}
<div
className={`bg-white border-r border-gray-200 transition-all duration-300 ${
className={`bg-card border-r border-border transition-all duration-300 ${
sidebarCollapsed ? "w-16" : "w-64"
} fixed left-0 top-0 h-screen flex flex-col z-10`}
>
{/* Header da Sidebar */}
<div className="p-4 border-b border-gray-200">
<div className="p-4 border-b border-border">
<div className="flex items-center justify-between">
{!sidebarCollapsed && (
<div className="flex items-center gap-2">
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
<div className="w-4 h-4 bg-white rounded-sm"></div>
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
<div className="w-4 h-4 bg-primary-foreground rounded-sm"></div>
</div>
<span className="font-semibold text-gray-900">MedConnect</span>
<span className="font-semibold text-foreground">MedConnect</span>
</div>
)}
<Button
@ -143,8 +143,8 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
<div
className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${
isActive
? "bg-blue-50 text-blue-600 border-r-2 border-blue-600"
: "text-gray-600 hover:bg-gray-50"
? "bg-accent text-accent-foreground"
: "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
}`}
>
<Icon className="w-5 h-5 flex-shrink-0" />
@ -171,10 +171,10 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
</Avatar>
{!sidebarCollapsed && (
<div className="flex-1 min-w-0">
<p className="text-sm font-medium text-gray-900 truncate">
<p className="text-sm font-medium text-foreground truncate">
{patientData.name}
</p>
<p className="text-xs text-gray-500 truncate">
<p className="text-xs text-muted-foreground truncate">
{patientData.email}
</p>
</div>
@ -208,14 +208,14 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
}`}
>
{/* Header */}
<header className="bg-white border-b border-gray-200 px-6 py-4">
<header className="bg-card border-b border-border px-6 py-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-4 flex-1 max-w-md">
<div className="relative flex-1">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
<Input
placeholder="Buscar paciente"
className="pl-10 bg-gray-50 border-gray-200"
className="pl-10 bg-background border-border"
/>
</div>
</div>
@ -223,7 +223,7 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
<div className="flex items-center gap-4">
<Button variant="ghost" size="sm" className="relative">
<Bell className="w-5 h-5" />
<Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-red-500 text-white text-xs">
<Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-destructive text-destructive-foreground text-xs">
1
</Badge>
</Button>

28
components/secretary-layout.tsx
View File

@ -91,21 +91,21 @@ export default function SecretaryLayout({ children }: PatientLayoutProps) {
}
return (
<div className="min-h-screen bg-gray-50 flex">
<div className="min-h-screen bg-background flex">
{/* Sidebar */}
<div
className={`bg-white border-r border-gray-200 transition-all duration-300
className={`bg-card border-r border-border transition-all duration-300
${sidebarCollapsed ? "w-16" : "w-64"}
fixed left-0 top-0 h-screen flex flex-col z-10`}
>
<div className="p-4 border-b border-gray-200">
<div className="p-4 border-b border-border">
<div className="flex items-center justify-between">
{!sidebarCollapsed && (
<div className="flex items-center gap-2">
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
<div className="w-4 h-4 bg-white rounded-sm"></div>
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
<div className="w-4 h-4 bg-primary-foreground rounded-sm"></div>
</div>
<span className="font-semibold text-gray-900">MedConnect</span>
<span className="font-semibold text-foreground">MedConnect</span>
</div>
)}
<Button
@ -134,8 +134,8 @@ export default function SecretaryLayout({ children }: PatientLayoutProps) {
<div
className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${
isActive
? "bg-blue-50 text-blue-600 border-r-2 border-blue-600"
: "text-gray-600 hover:bg-gray-50"
? "bg-accent text-accent-foreground"
: "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
}`}
>
<Icon className="w-5 h-5 flex-shrink-0" />
@ -159,10 +159,10 @@ export default function SecretaryLayout({ children }: PatientLayoutProps) {
</Avatar>
{!sidebarCollapsed && (
<div className="flex-1 min-w-0">
<p className="text-sm font-medium text-gray-900 truncate">
<p className="text-sm font-medium text-foreground truncate">
{secretaryData.name}
</p>
<p className="text-xs text-gray-500 truncate">{secretaryData.email}</p>
<p className="text-xs text-muted-foreground truncate">{secretaryData.email}</p>
</div>
)}
</div>
@ -194,14 +194,14 @@ export default function SecretaryLayout({ children }: PatientLayoutProps) {
}`}
>
{/* Header */}
<header className="bg-white border-b border-gray-200 px-6 py-4">
<header className="bg-card border-b border-border px-6 py-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-4 flex-1 max-w-md">
<div className="relative flex-1">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
<Input
placeholder="Buscar paciente"
className="pl-10 bg-gray-50 border-gray-200"
className="pl-10 bg-background border-border"
/>
</div>
</div>
@ -216,7 +216,7 @@ export default function SecretaryLayout({ children }: PatientLayoutProps) {
*/}
<Button variant="ghost" size="sm" className="relative">
<Bell className="w-5 h-5" />
<Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-red-500 text-white text-xs">
<Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-destructive text-destructive-foreground text-xs">
1
</Badge>
</Button>

32
components/theme-initializer.tsx Normal file
View File

@ -0,0 +1,32 @@
import Script from 'next/script';
const themeScript = `
(function() {
try {
const theme = localStorage.getItem('accessibility-theme') || 'light';
const contrast = localStorage.getItem('accessibility-contrast') || 'normal';
const fontSize = localStorage.getItem('accessibility-font-size') || '16';
const root = document.documentElement;
// Clear previous theme classes
root.classList.remove('light', 'dark', 'high-contrast');
// Add new theme classes
root.classList.add(theme);
if (contrast === 'high') {
root.classList.add('high-contrast');
}
// Set font size
root.style.fontSize = fontSize + 'px';
} catch (e) {
console.error('Failed to apply theme from localStorage', e);
}
})();
`;
export function ThemeInitializer() {
return <Script id="theme-initializer" strategy="beforeInteractive" dangerouslySetInnerHTML={{ __html: themeScript }} />;
}