RiseUP/riseup-squad21
5
0
Fork 2
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'Stage' of https://github.com/m1guelmcf/MedConnect into fix/avatar-profile-sync

Browse Source
This commit is contained in:
StsDanilo 2025-12-03 21:42:55 -03:00
commit 4412ae8848
38 changed files with 1537 additions and 1306 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
app/context/AccessibilityContext.tsx
View File

@ -19,20 +19,25 @@ interface AccessibilityContextProps {
const AccessibilityContext = createContext<AccessibilityContextProps | undefined>(undefined); const AccessibilityContext = createContext<AccessibilityContextProps | undefined>(undefined);
export const AccessibilityProvider = ({ children }: { children: ReactNode }) => { export const AccessibilityProvider = ({ children }: { children: ReactNode }) => {
const [theme, setThemeState] = useState<Theme>('light'); const [theme, setThemeState] = useState<Theme>(() => {
const [contrast, setContrastState] = useState<Contrast>('normal'); if (typeof window !== 'undefined') {
const [fontSize, setFontSize] = useState<number>(16); return (localStorage.getItem('accessibility-theme') as Theme) || 'light';
useEffect(() => {
const storedTheme = (localStorage.getItem('accessibility-theme') as Theme) || 'light';
const storedContrast = (localStorage.getItem('accessibility-contrast') as Contrast) || 'normal';
const storedSize = localStorage.getItem('accessibility-font-size');
setThemeState(storedTheme);
setContrastState(storedContrast);
if (storedSize) {
setFontSize(parseFloat(storedSize));
} }
}, []); return 'light';
});
const [contrast, setContrastState] = useState<Contrast>(() => {
if (typeof window !== 'undefined') {
return (localStorage.getItem('accessibility-contrast') as Contrast) || 'normal';
}
return 'normal';
});
const [fontSize, setFontSize] = useState<number>(() => {
if (typeof window !== 'undefined') {
const storedSize = localStorage.getItem('accessibility-font-size');
return storedSize ? parseFloat(storedSize) : 16;
}
return 16;
});
useEffect(() => { useEffect(() => {
const root = document.documentElement; const root = document.documentElement;

18
app/doctor/dashboard/page.tsx
View File

@ -264,8 +264,8 @@ export default function PatientDashboard() {
<Sidebar> <Sidebar>
<div className="space-y-6"> <div className="space-y-6">
<div> <div>
<h1 className="text-3xl font-bold text-gray-900">Dashboard</h1> <h1 className="text-3xl font-bold">Dashboard</h1>
<p className="text-gray-600"> <p className="text-muted-foreground">
Bem-vindo ao seu portal de consultas médicas Bem-vindo ao seu portal de consultas médicas
</p> </p>
</div> </div>
@ -367,21 +367,21 @@ export default function PatientDashboard() {
return ( return (
<div key={ex.id} className="space-y-4"> <div key={ex.id} className="space-y-4">
<div className="flex flex-col items-center justify-between p-3 bg-blue-50 rounded-lg shadow-sm"> <div className="flex flex-col items-center justify-between p-3 bg-primary/10 rounded-lg shadow-sm">
<div className="text-center"> <div className="text-center">
<p className="font-semibold capitalize">{date}</p> <p className="font-semibold capitalize">{date}</p>
<p className="text-sm text-gray-600"> <p className="text-sm text-muted-foreground">
{startTime && endTime {startTime && endTime
? `${startTime} - ${endTime}` ? `${startTime} - ${endTime}`
: "Dia todo"} : "Dia todo"}
</p> </p>
</div> </div>
<div className="text-center mt-2"> <div className="text-center mt-2">
<p className={`text-sm font-medium ${ex.kind === "bloqueio" ? "text-red-600" : "text-green-600"}`}>{ex.kind === "bloqueio" ? "Bloqueio" : "Liberação"}</p> <p className={`text-sm font-medium ${ex.kind === "bloqueio" ? "text-destructive" : "text-primary"}`}>{ex.kind === "bloqueio" ? "Bloqueio" : "Liberação"}</p>
<p className="text-xs text-gray-500 italic">{ex.reason || "Sem motivo especificado"}</p> <p className="text-xs text-muted-foreground italic">{ex.reason || "Sem motivo especificado"}</p>
</div> </div>
<div> <div>
<Button className="text-red-600" variant="outline" onClick={() => openDeleteDialog(String(ex.id))}> <Button className="text-destructive" variant="outline" onClick={() => openDeleteDialog(String(ex.id))}>
<Trash2></Trash2> <Trash2></Trash2>
</Button> </Button>
</div> </div>
@ -390,7 +390,7 @@ export default function PatientDashboard() {
); );
}) })
) : ( ) : (
<p className="text-sm text-gray-400 italic col-span-7 text-center">Nenhuma exceção registrada.</p> <p className="text-sm text-muted-foreground italic col-span-7 text-center">Nenhuma exceção registrada.</p>
)} )}
</CardContent> </CardContent>
</Card> </Card>
@ -403,7 +403,7 @@ export default function PatientDashboard() {
</AlertDialogHeader> </AlertDialogHeader>
<AlertDialogFooter> <AlertDialogFooter>
<AlertDialogCancel>Cancelar</AlertDialogCancel> <AlertDialogCancel>Cancelar</AlertDialogCancel>
<AlertDialogAction onClick={() => exceptionToDelete && handleDeleteException(exceptionToDelete)} className="bg-red-600 hover:bg-red-700"> <AlertDialogAction onClick={() => exceptionToDelete && handleDeleteException(exceptionToDelete)} className="bg-destructive hover:bg-destructive/90">
Excluir Excluir
</AlertDialogAction> </AlertDialogAction>
</AlertDialogFooter> </AlertDialogFooter>

26
app/doctor/disponibilidade/excecoes/page.tsx
View File

@ -149,12 +149,12 @@ export default function ExceptionPage() {
<Sidebar> <Sidebar>
<div className="space-y-6"> <div className="space-y-6">
<div> <div>
<h1 className="text-3xl font-bold text-gray-900">Adicione exceções</h1> <h1 className="text-3xl font-bold text-foreground">Adicione exceções</h1>
<p className="text-gray-600">Altere a disponibilidade em casos especiais para o Dr. João Silva</p> <p className="text-muted-foreground">Altere a disponibilidade em casos especiais para o Dr. João Silva</p>
</div> </div>
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<h2 className="text-xl font-semibold">Consultas para: {displayDate}</h2> <h2 className="text-xl font-semibold text-foreground">Consultas para: {displayDate}</h2>
<Button disabled={isLoading} variant="outline" size="sm"> <Button disabled={isLoading} variant="outline" size="sm">
<RefreshCw className={`mr-2 h-4 w-4 ${isLoading ? "animate-spin" : ""}`} /> <RefreshCw className={`mr-2 h-4 w-4 ${isLoading ? "animate-spin" : ""}`} />
Atualizar Agenda Atualizar Agenda
@ -171,7 +171,7 @@ export default function ExceptionPage() {
<CalendarIcon className="mr-2 h-5 w-5" /> <CalendarIcon className="mr-2 h-5 w-5" />
Calendário Calendário
</CardTitle> </CardTitle>
<p className="text-sm text-gray-500">Selecione a data desejada.</p> <p className="text-sm text-muted-foreground">Selecione a data desejada.</p>
</CardHeader> </CardHeader>
<CardContent className="flex justify-center p-2"> <CardContent className="flex justify-center p-2">
<Calendar <Calendar
@ -194,23 +194,23 @@ export default function ExceptionPage() {
{/* COLUNA 2: FORM PARA ADICIONAR EXCEÇÃO */} {/* COLUNA 2: FORM PARA ADICIONAR EXCEÇÃO */}
<div className="lg:col-span-2 space-y-4"> <div className="lg:col-span-2 space-y-4">
{isLoading ? ( {isLoading ? (
<p className="text-center text-lg text-gray-500">Carregando a agenda...</p> <p className="text-center text-lg text-muted-foreground">Carregando a agenda...</p>
) : !selectedCalendarDate ? ( ) : !selectedCalendarDate ? (
<p className="text-center text-lg text-gray-500">Selecione uma data.</p> <p className="text-center text-lg text-muted-foreground">Selecione uma data.</p>
) : ( ) : (
<form className="space-y-6" onSubmit={handleSubmit}> <form className="space-y-6" onSubmit={handleSubmit}>
<div className="bg-white rounded-lg border border-gray-200 p-6"> <div className="bg-card rounded-lg border border-border p-6">
<h2 className="text-lg font-semibold text-gray-900 mb-6">Dados </h2> <h2 className="text-lg font-semibold text-foreground mb-6">Dados </h2>
<div className="space-y-6"> <div className="space-y-6">
<div className="grid md:grid-cols-5 gap-6"> <div className="grid md:grid-cols-5 gap-6">
<div> <div>
<Label htmlFor="horarioEntrada" className="text-sm font-medium text-gray-700"> <Label htmlFor="horarioEntrada" className="text-sm font-medium text-foreground">
Horario De Entrada Horario De Entrada
</Label> </Label>
<Input type="time" id="horarioEntrada" name="horarioEntrada" className="mt-1" /> <Input type="time" id="horarioEntrada" name="horarioEntrada" className="mt-1" />
</div> </div>
<div> <div>
<Label htmlFor="horarioSaida" className="text-sm font-medium text-gray-700"> <Label htmlFor="horarioSaida" className="text-sm font-medium text-foreground">
Horario De Saida Horario De Saida
</Label> </Label>
<Input type="time" id="horarioSaida" name="horarioSaida" className="mt-1" /> <Input type="time" id="horarioSaida" name="horarioSaida" className="mt-1" />
@ -218,7 +218,7 @@ export default function ExceptionPage() {
</div> </div>
<div> <div>
<Label htmlFor="tipo" className="text-sm font-medium text-gray-700"> <Label htmlFor="tipo" className="text-sm font-medium text-foreground">
Tipo Tipo
</Label> </Label>
<Select onValueChange={(value) => setTipo(value)} value={tipo}> <Select onValueChange={(value) => setTipo(value)} value={tipo}>
@ -232,7 +232,7 @@ export default function ExceptionPage() {
</Select> </Select>
</div> </div>
<div> <div>
<Label htmlFor="reason" className="text-sm font-medium text-gray-700"> <Label htmlFor="reason" className="text-sm font-medium text-foreground">
Motivo Motivo
</Label> </Label>
<Input type="textarea" id="reason" name="reason" required className="mt-1" /> <Input type="textarea" id="reason" name="reason" required className="mt-1" />
@ -244,7 +244,7 @@ export default function ExceptionPage() {
<Link href="/doctor/disponibilidade"> <Link href="/doctor/disponibilidade">
<Button variant="outline">Cancelar</Button> <Button variant="outline">Cancelar</Button>
</Link> </Link>
<Button type="submit" className="bg-green-600 hover:bg-green-700"> <Button type="submit" className="bg-green-600 hover:bg-green-700 text-white">
Salvar Exceção Salvar Exceção
</Button> </Button>
</div> </div>

50
app/doctor/disponibilidade/page.tsx
View File

@ -379,23 +379,23 @@ export default function AvailabilityPage() {
<div className="space-y-6 flex-1 overflow-y-auto p-6"> <div className="space-y-6 flex-1 overflow-y-auto p-6">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<h1 className="text-2xl font-bold text-gray-900"> <h1 className="text-2xl font-bold">
Definir Disponibilidade Definir Disponibilidade
</h1> </h1>
<p className="text-gray-600"> <p className="text-muted-foreground">
Defina sua disponibilidade para consultas{" "} Defina sua disponibilidade para consultas{" "}
</p> </p>
</div> </div>
</div> </div>
<form className="space-y-6" onSubmit={handleSubmit}> <form className="space-y-6" onSubmit={handleSubmit}>
<div className="bg-white rounded-lg border border-gray-200 p-6"> <div className="bg-card rounded-lg border p-6">
<h2 className="text-lg font-semibold text-gray-900 mb-6">Dados </h2> <h2 className="text-lg font-semibold mb-6">Dados </h2>
<div className="space-y-6"> <div className="space-y-6">
{/* **AJUSTE DE RESPONSIVIDADE: DIAS DA SEMANA** */} {/* **AJUSTE DE RESPONSIVIDADE: DIAS DA SEMANA** */}
<div> <div>
<Label className="text-sm font-medium text-gray-700"> <Label className="text-sm font-medium">
Dia Da Semana Dia Da Semana
</Label> </Label>
{/* O antigo 'flex gap-4 mt-2 flex-nowrap' foi substituído por um grid responsivo: */} {/* O antigo 'flex gap-4 mt-2 flex-nowrap' foi substituído por um grid responsivo: */}
@ -405,7 +405,7 @@ export default function AvailabilityPage() {
type="radio" type="radio"
name="weekday" name="weekday"
value="monday" value="monday"
className="text-blue-600" className="text-primary"
/> />
<span className="whitespace-nowrap text-sm">Segunda</span> <span className="whitespace-nowrap text-sm">Segunda</span>
</label> </label>
@ -414,7 +414,7 @@ export default function AvailabilityPage() {
type="radio" type="radio"
name="weekday" name="weekday"
value="tuesday" value="tuesday"
className="text-blue-600" className="text-primary"
/> />
<span className="whitespace-nowrap text-sm">Terça</span> <span className="whitespace-nowrap text-sm">Terça</span>
</label> </label>
@ -423,7 +423,7 @@ export default function AvailabilityPage() {
type="radio" type="radio"
name="weekday" name="weekday"
value="wednesday" value="wednesday"
className="text-blue-600" className="text-primary"
/> />
<span className="whitespace-nowrap text-sm">Quarta</span> <span className="whitespace-nowrap text-sm">Quarta</span>
</label> </label>
@ -432,7 +432,7 @@ export default function AvailabilityPage() {
type="radio" type="radio"
name="weekday" name="weekday"
value="thursday" value="thursday"
className="text-blue-600" className="text-primary"
/> />
<span className="whitespace-nowrap text-sm">Quinta</span> <span className="whitespace-nowrap text-sm">Quinta</span>
</label> </label>
@ -441,7 +441,7 @@ export default function AvailabilityPage() {
type="radio" type="radio"
name="weekday" name="weekday"
value="friday" value="friday"
className="text-blue-600" className="text-primary"
/> />
<span className="whitespace-nowrap text-sm">Sexta</span> <span className="whitespace-nowrap text-sm">Sexta</span>
</label> </label>
@ -450,7 +450,7 @@ export default function AvailabilityPage() {
type="radio" type="radio"
name="weekday" name="weekday"
value="saturday" value="saturday"
className="text-blue-600" className="text-primary"
/> />
<span className="whitespace-nowrap text-sm">Sábado</span> <span className="whitespace-nowrap text-sm">Sábado</span>
</label> </label>
@ -459,7 +459,7 @@ export default function AvailabilityPage() {
type="radio" type="radio"
name="weekday" name="weekday"
value="sunday" value="sunday"
className="text-blue-600" className="text-primary"
/> />
<span className="whitespace-nowrap text-sm">Domingo</span> <span className="whitespace-nowrap text-sm">Domingo</span>
</label> </label>
@ -472,7 +472,7 @@ export default function AvailabilityPage() {
<div> <div>
<Label <Label
htmlFor="horarioEntrada" htmlFor="horarioEntrada"
className="text-sm font-medium text-gray-700" className="text-sm font-medium"
> >
Horario De Entrada Horario De Entrada
</Label> </Label>
@ -487,7 +487,7 @@ export default function AvailabilityPage() {
<div> <div>
<Label <Label
htmlFor="horarioSaida" htmlFor="horarioSaida"
className="text-sm font-medium text-gray-700" className="text-sm font-medium"
> >
Horario De Saida Horario De Saida
</Label> </Label>
@ -502,9 +502,9 @@ export default function AvailabilityPage() {
<div> <div>
<Label <Label
htmlFor="duracaoConsulta" htmlFor="duracaoConsulta"
className="text-sm font-medium text-gray-700" className="text-sm font-medium whitespace-nowrap"
> >
Duração Da Consulta (min) Duração da Consulta(min)
</Label> </Label>
<Input <Input
type="number" type="number"
@ -520,7 +520,7 @@ export default function AvailabilityPage() {
<div> <div>
<Label <Label
htmlFor="modalidadeConsulta" htmlFor="modalidadeConsulta"
className="text-sm font-medium text-gray-700" className="text-sm font-medium"
> >
Modalidade De Consulta Modalidade De Consulta
</Label> </Label>
@ -551,7 +551,7 @@ export default function AvailabilityPage() {
<Link href="/doctor/dashboard" className="w-full sm:w-auto"> <Link href="/doctor/dashboard" className="w-full sm:w-auto">
<Button variant="outline" className="w-full sm:w-auto">Cancelar</Button> <Button variant="outline" className="w-full sm:w-auto">Cancelar</Button>
</Link> </Link>
<Button type="submit" className="bg-blue-600 hover:bg-blue-700 w-full sm:w-auto"> <Button type="submit" className="bg-primary hover:bg-primary/90 w-full sm:w-auto">
Salvar Disponibilidade Salvar Disponibilidade
</Button> </Button>
</div> </div>
@ -571,15 +571,15 @@ export default function AvailabilityPage() {
const times = schedule[day] || []; const times = schedule[day] || [];
return ( return (
<div key={day} className="space-y-4"> <div key={day} className="space-y-4">
<div className="flex flex-col items-center justify-between p-3 bg-blue-50 rounded-lg h-full"> <div className="flex flex-col items-center justify-start p-3 bg-primary/10 rounded-lg min-h-[76px] ">
<p className="font-medium capitalize text-center mb-2">{weekdaysPT[day]}</p> <p className="font-medium capitalize text-center ">{weekdaysPT[day]}</p>
<div className="text-center w-full"> <div className="text-center w-full mt-2">
{times.length > 0 ? ( {times.length > 0 ? (
times.map((t, i) => ( times.map((t, i) => (
<div key={i}> <div key={i}>
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<p className="text-sm text-gray-600 cursor-pointer rounded hover:text-accent-foreground hover:bg-gray-200 transition-colors duration-150"> <p className="text-sm text-muted-foreground cursor-pointer rounded hover:text-accent-foreground hover:bg-muted transition-colors duration-150">
{formatTime(t.start)} - {formatTime(t.end)} {formatTime(t.start)} - {formatTime(t.end)}
</p> </p>
</DropdownMenuTrigger> </DropdownMenuTrigger>
@ -590,7 +590,7 @@ export default function AvailabilityPage() {
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem <DropdownMenuItem
onClick={() => openDeleteDialog(t, day)} onClick={() => openDeleteDialog(t, day)}
className="text-red-600 focus:bg-red-50 focus:text-red-600"> className="text-destructive focus:bg-destructive/10 focus:text-destructive">
<Trash2 className="w-4 h-4 mr-2" /> <Trash2 className="w-4 h-4 mr-2" />
Excluir Excluir
</DropdownMenuItem> </DropdownMenuItem>
@ -599,7 +599,7 @@ export default function AvailabilityPage() {
</div> </div>
)) ))
) : ( ) : (
<p className="text-sm text-gray-400 italic">Sem horário</p> <p className="text-sm text-muted-foreground italic">Sem horário</p>
)} )}
</div> </div>
</div> </div>
@ -619,7 +619,7 @@ export default function AvailabilityPage() {
</AlertDialogHeader> </AlertDialogHeader>
<AlertDialogFooter> <AlertDialogFooter>
<AlertDialogCancel>Cancelar</AlertDialogCancel> <AlertDialogCancel>Cancelar</AlertDialogCancel>
<AlertDialogAction onClick={() => selectedAvailability && handleDeleteAvailability(selectedAvailability.id)} className="bg-red-600 hover:bg-red-700"> <AlertDialogAction onClick={() => selectedAvailability && handleDeleteAvailability(selectedAvailability.id)} className="bg-destructive hover:bg-destructive/90">
Excluir Excluir
</AlertDialogAction> </AlertDialogAction>
</AlertDialogFooter> </AlertDialogFooter>

10
app/globals.css
View File

@ -16,8 +16,8 @@
--muted-foreground: oklch(0.556 0 0); --muted-foreground: oklch(0.556 0 0);
--accent: oklch(0.97 0 0); --accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0); --accent-foreground: oklch(0.205 0 0);
--destructive: oklch(0.577 0.245 27.325); --destructive: oklch(0.637 0.237 25.331);
--destructive-foreground: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0);
--border: oklch(0.922 0 0); --border: oklch(0.922 0 0);
--input: oklch(0.922 0 0); --input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0); --ring: oklch(0.708 0 0);
@ -52,8 +52,8 @@
--muted-foreground: oklch(0.708 0 0); --muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0 0); --accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0); --accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.396 0.141 25.723); --destructive: oklch(0.7 0.25 25);
--destructive-foreground: oklch(0.637 0.237 25.331); --destructive-foreground: oklch(0.985 0 0);
--border: oklch(0.269 0 0); --border: oklch(0.269 0 0);
--input: oklch(0.269 0 0); --input: oklch(0.269 0 0);
--ring: oklch(0.439 0 0); --ring: oklch(0.439 0 0);
@ -87,7 +87,7 @@
--muted-foreground: oklch(1 0.5 100); --muted-foreground: oklch(1 0.5 100);
--accent: oklch(0 0 0); --accent: oklch(0 0 0);
--accent-foreground: oklch(1 0.5 100); --accent-foreground: oklch(1 0.5 100);
--destructive: oklch(0.5 0.3 30); --destructive: oklch(0.8 0.5 25);
--destructive-foreground: oklch(0 0 0); --destructive-foreground: oklch(0 0 0);
--border: oklch(1 0.5 100); --border: oklch(1 0.5 100);
--input: oklch(0 0 0); --input: oklch(0 0 0);

13
app/layout.tsx
View File

@ -4,11 +4,7 @@ import { GeistMono } from "geist/font/mono";
import { Analytics } from "@vercel/analytics/next"; import { Analytics } from "@vercel/analytics/next";
import "./globals.css"; import "./globals.css";
import { Toaster } from "@/components/ui/toaster"; import { Toaster } from "@/components/ui/toaster";
// [PASSO 1.2] - Importando o nosso provider import { Providers } from "./providers";
import { AppointmentsProvider } from "./context/AppointmentsContext";
import { AccessibilityProvider } from "./context/AccessibilityContext";
import { AccessibilityModal } from "@/components/accessibility-modal";
import { ThemeInitializer } from "@/components/theme-initializer";
export default function RootLayout({ export default function RootLayout({
children, children,
@ -18,12 +14,7 @@ export default function RootLayout({
return ( return (
<html lang="en" suppressHydrationWarning> <html lang="en" suppressHydrationWarning>
<body className={`font-sans ${GeistSans.variable} ${GeistMono.variable}`}> <body className={`font-sans ${GeistSans.variable} ${GeistMono.variable}`}>
{/* [PASSO 1.2] - Envolvendo a aplicação com o provider */} <Providers>{children}</Providers>
<ThemeInitializer />
<AccessibilityProvider>
<AppointmentsProvider>{children}</AppointmentsProvider>
<AccessibilityModal />
</AccessibilityProvider>
<Analytics /> <Analytics />
<Toaster /> <Toaster />
</body> </body>

3
app/login/page.tsx
View File

@ -97,7 +97,7 @@ export default function LoginPage() {
</div> </div>
{/* O contêiner principal que agora terá a sombra e o estilo de card */} {/* O contêiner principal que agora terá a sombra e o estilo de card */}
<div className="w-full max-w-md bg-card p-10 rounded-2xl shadow-xl"> <div className="w-full max-w-md bg-card p-10 rounded-2xl shadow-xl border-2 border-border mt-8">
{/* NOVO: Bloco da Logo e Nome (Painel Esquerdo) */} {/* NOVO: Bloco da Logo e Nome (Painel Esquerdo) */}
<div className="flex items-center justify-center space-x-3 mb-8"> <div className="flex items-center justify-center space-x-3 mb-8">
<img <img
@ -155,6 +155,7 @@ export default function LoginPage() {
fill fill
style={{ objectFit: "cover" }} style={{ objectFit: "cover" }}
priority priority
className="dark:opacity-80"
/> />
{/* Camada de sobreposição para escurecer a imagem e destacar o texto */} {/* Camada de sobreposição para escurecer a imagem e destacar o texto */}
<div className="absolute inset-0 bg-primary/80 flex flex-col items-start justify-end p-12 text-left"> <div className="absolute inset-0 bg-primary/80 flex flex-col items-start justify-end p-12 text-left">

28
app/manager/dashboard/page.tsx
View File

@ -94,8 +94,8 @@ export default function ManagerDashboard() {
<div className="space-y-6"> <div className="space-y-6">
{/* Cabeçalho */} {/* Cabeçalho */}
<div> <div>
<h1 className="text-3xl font-bold text-gray-900">Dashboard</h1> <h1 className="text-3xl font-bold">Dashboard</h1>
<p className="text-gray-600"> <p className="text-muted-foreground">
Bem-vindo ao seu portal de consultas médicas Bem-vindo ao seu portal de consultas médicas
</p> </p>
</div> </div>
@ -114,7 +114,7 @@ export default function ManagerDashboard() {
</CardHeader> </CardHeader>
<CardContent> <CardContent>
{loadingUser ? ( {loadingUser ? (
<div className="text-gray-500 text-sm"> <div className="text-muted-foreground text-sm">
Carregando usuário... Carregando usuário...
</div> </div>
) : firstUser ? ( ) : firstUser ? (
@ -127,7 +127,7 @@ export default function ManagerDashboard() {
</p> </p>
</> </>
) : ( ) : (
<div className="text-sm text-gray-500"> <div className="text-sm text-muted-foreground">
Nenhum usuário encontrado Nenhum usuário encontrado
</div> </div>
)} )}
@ -159,15 +159,15 @@ export default function ManagerDashboard() {
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<Link href="/manager/home"> <Link href="/manager/home">
<Button className="w-full justify-start bg-blue-600 text-white hover:bg-blue-700"> <Button className="w-full justify-start">
<User className="mr-2 h-4 w-4 text-white" /> <User className="mr-2 h-4 w-4" />
Gestão de Médicos Gestão de Médicos
</Button> </Button>
</Link> </Link>
<Link href="/manager/usuario"> <Link href="/manager/usuario">
<Button <Button
variant="outline" variant="outline"
className="w-full justify-start bg-transparent" className="w-full justify-start"
> >
<User className="mr-2 h-4 w-4" /> <User className="mr-2 h-4 w-4" />
Usuários Cadastrados Usuários Cadastrados
@ -176,7 +176,7 @@ export default function ManagerDashboard() {
<Link href="/manager/home/novo"> <Link href="/manager/home/novo">
<Button <Button
variant="outline" variant="outline"
className="w-full justify-start bg-transparent" className="w-full justify-start"
> >
<Plus className="mr-2 h-4 w-4" /> <Plus className="mr-2 h-4 w-4" />
Adicionar Novo Médico Adicionar Novo Médico
@ -185,7 +185,7 @@ export default function ManagerDashboard() {
<Link href="/manager/usuario/novo"> <Link href="/manager/usuario/novo">
<Button <Button
variant="outline" variant="outline"
className="w-full justify-start bg-transparent" className="w-full justify-start"
> >
<Plus className="mr-2 h-4 w-4" /> <Plus className="mr-2 h-4 w-4" />
Criar novo Usuário Criar novo Usuário
@ -204,9 +204,9 @@ export default function ManagerDashboard() {
</CardHeader> </CardHeader>
<CardContent> <CardContent>
{loadingDoctors ? ( {loadingDoctors ? (
<p className="text-sm text-gray-500">Carregando médicos...</p> <p className="text-sm text-muted-foreground">Carregando médicos...</p>
) : doctors.length === 0 ? ( ) : doctors.length === 0 ? (
<p className="text-sm text-gray-500"> <p className="text-sm text-muted-foreground">
Nenhum médico cadastrado. Nenhum médico cadastrado.
</p> </p>
) : ( ) : (
@ -214,18 +214,18 @@ export default function ManagerDashboard() {
{doctors.map((doc, index) => ( {doctors.map((doc, index) => (
<div <div
key={index} key={index}
className="flex items-center justify-between p-3 bg-green-50 rounded-lg border border-green-100" className="flex items-center justify-between p-3 bg-secondary rounded-lg border"
> >
<div> <div>
<p className="font-medium"> <p className="font-medium">
{doc.full_name || "Sem nome"} {doc.full_name || "Sem nome"}
</p> </p>
<p className="text-sm text-gray-600"> <p className="text-sm text-muted-foreground">
{doc.specialty || "Sem especialidade"} {doc.specialty || "Sem especialidade"}
</p> </p>
</div> </div>
<div className="text-right"> <div className="text-right">
<p className="font-medium text-green-700"> <p className="font-medium text-primary">
{doc.active ? "Ativo" : "Inativo"} {doc.active ? "Ativo" : "Inativo"}
</p> </p>
</div> </div>

10
app/manager/disponibilidade/page.tsx
View File

@ -84,7 +84,7 @@ export default function AllAvailabilities() {
if (loading) { if (loading) {
return ( return (
<Sidebar> <Sidebar>
<div className="p-6 text-gray-500">Carregando dados...</div> <div className="p-6 text-muted-foreground">Carregando dados...</div>
</Sidebar> </Sidebar>
); );
} }
@ -92,7 +92,7 @@ export default function AllAvailabilities() {
if (!doctors || !availabilities) { if (!doctors || !availabilities) {
return ( return (
<Sidebar> <Sidebar>
<div className="p-6 text-red-600 font-medium">Não foi possível carregar médicos ou disponibilidades.</div> <div className="p-6 text-destructive font-medium">Não foi possível carregar médicos ou disponibilidades.</div>
</Sidebar> </Sidebar>
); );
} }
@ -101,8 +101,8 @@ export default function AllAvailabilities() {
<Sidebar> <Sidebar>
<div className="space-y-6"> <div className="space-y-6">
<div> <div>
<h1 className="text-3xl font-bold text-gray-900">Disponibilidade dos Médicos</h1> <h1 className="text-3xl font-bold">Disponibilidade dos Médicos</h1>
<p className="text-gray-600">Visualize a agenda semanal individual de cada médico.</p> <p className="text-muted-foreground">Visualize a agenda semanal individual de cada médico.</p>
</div> </div>
<Card> <Card>
<CardContent> <CardContent>
@ -170,7 +170,7 @@ export default function AllAvailabilities() {
Anterior Anterior
</Button> </Button>
<span className="text-gray-700 font-medium"> <span className="text-muted-foreground font-medium">
Página {page} de {totalPages} Página {page} de {totalPages}
</span> </span>

26
app/manager/home/[id]/editar/page.tsx
View File

@ -209,8 +209,8 @@ export default function EditarMedicoPage() {
return ( return (
<Sidebar> <Sidebar>
<div className="flex justify-center items-center h-full w-full py-16"> <div className="flex justify-center items-center h-full w-full py-16">
<Loader2 className="w-8 h-8 animate-spin text-green-600" /> <Loader2 className="w-8 h-8 animate-spin text-primary" />
<p className="ml-2 text-gray-600">Carregando dados do médico...</p> <p className="ml-2 text-muted-foreground">Carregando dados do médico...</p>
</div> </div>
</Sidebar> </Sidebar>
); );
@ -221,10 +221,10 @@ export default function EditarMedicoPage() {
<div className="w-full space-y-6 p-4 md:p-8"> <div className="w-full space-y-6 p-4 md:p-8">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<h1 className="text-2xl font-bold text-gray-900"> <h1 className="text-2xl font-bold text-foreground">
Editar Médico: <span className="text-green-600">{formData.nomeCompleto}</span> Editar Médico: <span className="text-primary">{formData.nomeCompleto}</span>
</h1> </h1>
<p className="text-sm text-gray-500"> <p className="text-sm text-muted-foreground">
Atualize as informações do médico Atualize as informações do médico
</p> </p>
</div> </div>
@ -239,14 +239,14 @@ export default function EditarMedicoPage() {
<form onSubmit={handleSubmit} className="space-y-6"> <form onSubmit={handleSubmit} className="space-y-6">
{error && ( {error && (
<div className="p-3 bg-red-100 text-red-700 rounded-lg border border-red-300"> <div className="p-3 rounded-lg border bg-destructive/10 text-destructive border-destructive/30">
<p className="font-medium">Erro na Atualização:</p> <p className="font-medium">Erro na Atualização:</p>
<p className="text-sm">{error}</p> <p className="text-sm">{error}</p>
</div> </div>
)} )}
<div className="space-y-4 p-4 border rounded-xl shadow-sm bg-white"> <div className="space-y-4 p-4 rounded-xl border border-border shadow-sm bg-card">
<h2 className="text-lg font-semibold text-gray-800 border-b pb-2"> <h2 className="text-lg font-semibold text-foreground border-b border-border pb-2">
Dados Principais e Pessoais Dados Principais e Pessoais
</h2> </h2>
<div className="grid md:grid-cols-4 gap-4"> <div className="grid md:grid-cols-4 gap-4">
@ -348,8 +348,8 @@ export default function EditarMedicoPage() {
</div> </div>
</div> </div>
<div className="space-y-4 p-4 border rounded-xl shadow-sm bg-white"> <div className="space-y-4 p-4 rounded-xl border border-border shadow-sm bg-card">
<h2 className="text-lg font-semibold text-gray-800 border-b pb-2"> <h2 className="text-lg font-semibold text-foreground border-b border-border pb-2">
Contato e Endereço Contato e Endereço
</h2> </h2>
@ -452,8 +452,8 @@ export default function EditarMedicoPage() {
</div> </div>
<div className="space-y-4 p-4 border rounded-xl shadow-sm bg-white"> <div className="space-y-4 p-4 rounded-xl border border-border shadow-sm bg-card">
<h2 className="text-lg font-semibold text-gray-800 border-b pb-2"> <h2 className="text-lg font-semibold text-foreground border-b border-border pb-2">
Observações (Apenas internas) Observações (Apenas internas)
</h2> </h2>
<Textarea <Textarea
@ -474,7 +474,7 @@ export default function EditarMedicoPage() {
</Link> </Link>
<Button <Button
type="submit" type="submit"
className="bg-green-600 hover:bg-green-700" className="bg-primary hover:bg-primary/90"
disabled={isSaving} disabled={isSaving}
> >
{isSaving ? ( {isSaving ? (

96
app/manager/home/page.tsx
View File

@ -224,10 +224,10 @@ export default function DoctorsPage() {
{/* Cabeçalho */} {/* Cabeçalho */}
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3"> <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
<div> <div>
<h1 className="text-2xl font-bold text-gray-900"> <h1 className="text-2xl font-bold">
Médicos Cadastrados Médicos Cadastrados
</h1> </h1>
<p className="text-sm text-gray-500"> <p className="text-sm text-muted-foreground">
Gerencie todos os profissionais de saúde. Gerencie todos os profissionais de saúde.
</p> </p>
</div> </div>
@ -270,54 +270,54 @@ export default function DoctorsPage() {
</FilterBar> </FilterBar>
{/* Tabela de Médicos */} {/* Tabela de Médicos */}
<div className="bg-white rounded-lg border border-gray-200 shadow-md overflow-hidden hidden md:block"> <div className="bg-card rounded-lg border shadow-md overflow-hidden hidden md:block">
{loading ? ( {loading ? (
<div className="p-8 text-center text-gray-500"> <div className="p-8 text-center text-muted-foreground">
<Loader2 className="w-8 h-8 animate-spin mx-auto mb-3 text-green-600" /> <Loader2 className="w-8 h-8 animate-spin mx-auto mb-3 text-primary" />
Carregando médicos... Carregando médicos...
</div> </div>
) : error ? ( ) : error ? (
<div className="p-8 text-center text-red-600">{error}</div> <div className="p-8 text-center text-destructive">{error}</div>
) : filteredDoctors.length === 0 ? ( ) : filteredDoctors.length === 0 ? (
<div className="p-8 text-center text-gray-500"> <div className="p-8 text-center text-muted-foreground">
{doctors.length === 0 {doctors.length === 0
? <>Nenhum médico cadastrado. <Link href="/manager/home/novo" className="text-green-600 hover:underline">Adicione um novo</Link>.</> ? <>Nenhum médico cadastrado. <Link href="/manager/home/novo" className="text-primary hover:underline">Adicione um novo</Link>.</>
: "Nenhum médico encontrado com os filtros aplicados." : "Nenhum médico encontrado com os filtros aplicados."
} }
</div> </div>
) : ( ) : (
<div className="overflow-x-auto"> <div className="overflow-x-auto">
<table className="w-full min-w-[600px]"> <table className="w-full min-w-[600px]">
<thead className="bg-gray-50 border-b border-gray-200"> <thead className="bg-muted border-b">
<tr> <tr>
<th className="text-left p-2 md:p-4 font-medium text-gray-700">Nome</th> <th className="text-left p-2 md:p-4 font-medium text-muted-foreground">Nome</th>
<th className="text-left p-2 md:p-4 font-medium text-gray-700">CRM</th> <th className="text-left p-2 md:p-4 font-medium text-muted-foreground">CRM</th>
<th className="text-left p-2 md:p-4 font-medium text-gray-700">Especialidade</th> <th className="text-left p-2 md:p-4 font-medium text-muted-foreground">Especialidade</th>
<th className="text-left p-2 md:p-4 font-medium text-gray-700 hidden lg:table-cell">Status</th> <th className="text-left p-2 md:p-4 font-medium text-muted-foreground hidden lg:table-cell">Status</th>
<th className="text-left p-2 md:p-4 font-medium text-gray-700 hidden xl:table-cell">Cidade/Estado</th> <th className="text-left p-2 md:p-4 font-medium text-muted-foreground hidden xl:table-cell">Cidade/Estado</th>
<th className="text-right p-4 font-medium text-gray-700">Ações</th> <th className="text-right p-4 font-medium text-muted-foreground">Ações</th>
</tr> </tr>
</thead> </thead>
<tbody className="bg-white divide-y divide-gray-200"> <tbody className="bg-card divide-y">
{currentItems.map((doctor) => ( {currentItems.map((doctor) => (
<tr key={doctor.id} className="hover:bg-gray-50 transition"> <tr key={doctor.id} className="hover:bg-muted transition">
<td className="px-4 py-3 font-medium text-gray-900"> <td className="px-4 py-3 font-medium">
{doctor.full_name} {doctor.full_name}
</td> </td>
<td className="px-4 py-3 text-gray-500 hidden sm:table-cell">{doctor.crm}</td> <td className="px-4 py-3 text-muted-foreground hidden sm:table-cell">{doctor.crm}</td>
<td className="px-4 py-3 text-gray-500 hidden md:table-cell"> <td className="px-4 py-3 text-muted-foreground hidden md:table-cell">
{/* Exibe Especialidade Normalizada */} {/* Exibe Especialidade Normalizada */}
{normalizeSpecialty(doctor.specialty)} {normalizeSpecialty(doctor.specialty)}
</td> </td>
<td className="px-4 py-3 text-gray-500 hidden lg:table-cell"> <td className="px-4 py-3 text-muted-foreground hidden lg:table-cell">
<span className={`px-2 py-1 rounded-full text-xs ${ <span className={`px-2 py-1 rounded-full text-xs ${
doctor.status === 'Ativo' ? 'bg-green-100 text-green-800' : doctor.status === 'Ativo' ? 'bg-primary/10 text-primary' :
doctor.status === 'Inativo' ? 'bg-red-100 text-red-800' : 'bg-yellow-100 text-yellow-800' doctor.status === 'Inativo' ? 'bg-destructive/10 text-destructive' : 'bg-yellow-400/10 text-yellow-400'
}`}> }`}>
{doctor.status || "N/A"} {doctor.status || "N/A"}
</span> </span>
</td> </td>
<td className="px-4 py-3 text-gray-500 hidden xl:table-cell"> <td className="px-4 py-3 text-muted-foreground hidden xl:table-cell">
{(doctor.city || doctor.state) {(doctor.city || doctor.state)
? `${doctor.city || ""}${doctor.city && doctor.state ? '/' : ''}${doctor.state || ""}` ? `${doctor.city || ""}${doctor.city && doctor.state ? '/' : ''}${doctor.state || ""}`
: "N/A"} : "N/A"}
@ -345,7 +345,7 @@ export default function DoctorsPage() {
<Calendar className="mr-2 h-4 w-4" /> <Calendar className="mr-2 h-4 w-4" />
Marcar consulta Marcar consulta
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem className="text-red-600" onClick={() => openDeleteDialog(doctor.id)}> <DropdownMenuItem className="text-destructive" onClick={() => openDeleteDialog(doctor.id)}>
<Trash2 className="mr-2 h-4 w-4" /> <Trash2 className="mr-2 h-4 w-4" />
Excluir Excluir
</DropdownMenuItem> </DropdownMenuItem>
@ -361,33 +361,33 @@ export default function DoctorsPage() {
</div> </div>
{/* Cards de Médicos (Mobile) */} {/* Cards de Médicos (Mobile) */}
<div className="bg-white rounded-lg border border-gray-200 shadow-md p-4 block md:hidden"> <div className="bg-card rounded-lg border shadow-md p-4 block md:hidden">
{loading ? ( {loading ? (
<div className="p-8 text-center text-gray-500"> <div className="p-8 text-center text-muted-foreground">
<Loader2 className="w-8 h-8 animate-spin mx-auto mb-3 text-green-600" /> <Loader2 className="w-8 h-8 animate-spin mx-auto mb-3 text-primary" />
Carregando médicos... Carregando médicos...
</div> </div>
) : error ? ( ) : error ? (
<div className="p-8 text-center text-red-600">{error}</div> <div className="p-8 text-center text-destructive">{error}</div>
) : filteredDoctors.length === 0 ? ( ) : filteredDoctors.length === 0 ? (
<div className="p-8 text-center text-gray-500"> <div className="p-8 text-center text-muted-foreground">
{doctors.length === 0 {doctors.length === 0
? <>Nenhum médico cadastrado. <Link href="/manager/home/novo" className="text-green-600 hover:underline">Adicione um novo</Link>.</> ? <>Nenhum médico cadastrado. <Link href="/manager/home/novo" className="text-primary hover:underline">Adicione um novo</Link>.</>
: "Nenhum médico encontrado com os filtros aplicados." : "Nenhum médico encontrado com os filtros aplicados."
} }
</div> </div>
) : ( ) : (
<div className="space-y-4"> <div className="space-y-4">
{currentItems.map((doctor) => ( {currentItems.map((doctor) => (
<div key={doctor.id} className="bg-gray-50 rounded-lg p-4 flex justify-between items-center border border-gray-100"> <div key={doctor.id} className="bg-muted rounded-lg p-4 flex justify-between items-center border">
<div> <div>
<div className="font-semibold text-gray-900">{doctor.full_name}</div> <div className="font-semibold">{doctor.full_name}</div>
<div className="text-xs text-gray-500 mb-1">{doctor.phone_mobile}</div> <div className="text-xs text-muted-foreground mb-1">{doctor.phone_mobile}</div>
<div className="text-sm text-gray-600">{normalizeSpecialty(doctor.specialty)}</div> <div className="text-sm text-muted-foreground">{normalizeSpecialty(doctor.specialty)}</div>
<div className="text-xs mt-1"> <div className="text-xs mt-1">
<span className={`px-2 py-0.5 rounded-full text-xs ${ <span className={`px-2 py-0.5 rounded-full text-xs ${
doctor.status === 'Ativo' ? 'bg-green-100 text-green-800' : doctor.status === 'Ativo' ? 'bg-primary/10 text-primary' :
doctor.status === 'Inativo' ? 'bg-red-100 text-red-800' : 'bg-yellow-100 text-yellow-800' doctor.status === 'Inativo' ? 'bg-destructive/10 text-destructive' : 'bg-yellow-400/10 text-yellow-400'
}`}> }`}>
{doctor.status || "N/A"} {doctor.status || "N/A"}
</span> </span>
@ -397,7 +397,7 @@ export default function DoctorsPage() {
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button variant="ghost" size="sm" className="h-8 w-8 p-0"> <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
<span className="sr-only">Abrir menu</span> <span className="sr-only">Abrir menu</span>
<div className="font-bold text-gray-500">...</div> <div className="font-bold text-muted-foreground">...</div>
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end"> <DropdownMenuContent align="end">
@ -411,7 +411,7 @@ export default function DoctorsPage() {
Editar Editar
</Link> </Link>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem className="text-red-600" onClick={() => openDeleteDialog(doctor.id)}> <DropdownMenuItem className="text-destructive" onClick={() => openDeleteDialog(doctor.id)}>
<Trash2 className="mr-2 h-4 w-4" /> <Trash2 className="mr-2 h-4 w-4" />
Excluir Excluir
</DropdownMenuItem> </DropdownMenuItem>
@ -425,11 +425,11 @@ export default function DoctorsPage() {
{/* Paginação */} {/* Paginação */}
{totalPages > 1 && ( {totalPages > 1 && (
<div className="flex flex-wrap justify-center items-center gap-2 mt-4 p-4 bg-white rounded-lg border border-gray-200 shadow-md"> <div className="flex flex-wrap justify-center items-center gap-2 mt-4 p-4 bg-card rounded-lg border shadow-md">
<button <button
onClick={goToPrevPage} onClick={goToPrevPage}
disabled={currentPage === 1} disabled={currentPage === 1}
className="flex items-center px-4 py-2 rounded-md font-medium transition-colors text-sm bg-gray-100 text-gray-700 hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed border border-gray-300" className="flex items-center px-4 py-2 rounded-md font-medium transition-colors text-sm bg-muted text-muted-foreground hover:bg-muted/90 disabled:opacity-50 disabled:cursor-not-allowed border"
> >
{"< Anterior"} {"< Anterior"}
</button> </button>
@ -438,10 +438,10 @@ export default function DoctorsPage() {
<button <button
key={number} key={number}
onClick={() => paginate(number)} onClick={() => paginate(number)}
className={`px-4 py-2 rounded-md font-medium transition-colors text-sm border border-gray-300 ${ className={`px-4 py-2 rounded-md font-medium transition-colors text-sm border ${
currentPage === number currentPage === number
? "bg-blue-600 text-white shadow-md border-blue-600" ? "bg-primary text-primary-foreground shadow-md border-primary"
: "bg-gray-100 text-gray-700 hover:bg-gray-200" : "bg-muted text-muted-foreground hover:bg-muted/90"
}`} }`}
> >
{number} {number}
@ -451,7 +451,7 @@ export default function DoctorsPage() {
<button <button
onClick={goToNextPage} onClick={goToNextPage}
disabled={currentPage === totalPages} disabled={currentPage === totalPages}
className="flex items-center px-4 py-2 rounded-md font-medium transition-colors text-sm bg-gray-100 text-gray-700 hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed border border-gray-300" className="flex items-center px-4 py-2 rounded-md font-medium transition-colors text-sm bg-muted text-muted-foreground hover:bg-muted/90 disabled:opacity-50 disabled:cursor-not-allowed border"
> >
{"Próximo >"} {"Próximo >"}
</button> </button>
@ -467,7 +467,7 @@ export default function DoctorsPage() {
</AlertDialogHeader> </AlertDialogHeader>
<AlertDialogFooter> <AlertDialogFooter>
<AlertDialogCancel disabled={loading}>Cancelar</AlertDialogCancel> <AlertDialogCancel disabled={loading}>Cancelar</AlertDialogCancel>
<AlertDialogAction onClick={handleDelete} className="bg-red-600 hover:bg-red-700" disabled={loading}> <AlertDialogAction onClick={handleDelete} className="bg-destructive hover:bg-destructive/90" disabled={loading}>
{loading ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : null} {loading ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : null}
Excluir Excluir
</AlertDialogAction> </AlertDialogAction>
@ -484,7 +484,7 @@ export default function DoctorsPage() {
<AlertDialogTitle className="text-2xl"> <AlertDialogTitle className="text-2xl">
{doctorDetails?.nome} {doctorDetails?.nome}
</AlertDialogTitle> </AlertDialogTitle>
<AlertDialogDescription className="text-left text-gray-700"> <AlertDialogDescription className="text-left text-muted-foreground">
{doctorDetails && ( {doctorDetails && (
<div className="space-y-3 text-left"> <div className="space-y-3 text-left">
<h3 className="font-semibold mt-2"> <h3 className="font-semibold mt-2">
@ -537,7 +537,7 @@ export default function DoctorsPage() {
</div> </div>
)} )}
{doctorDetails === null && !loading && ( {doctorDetails === null && !loading && (
<div className="text-red-600">Detalhes não disponíveis.</div> <div className="text-destructive">Detalhes não disponíveis.</div>
)} )}
</AlertDialogDescription> </AlertDialogDescription>
</AlertDialogHeader> </AlertDialogHeader>

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

@ -8,7 +8,7 @@ export default function ManagerLoginPage() {
// O ideal no futuro é deletar esta página e redirecionar os usuários. // O ideal no futuro é deletar esta página e redirecionar os usuários.
return ( 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"> <div className="min-h-screen bg-background flex items-center justify-center p-4">
<div className="w-full max-w-md text-center"> <div className="w-full max-w-md text-center">
<h1 className="text-3xl font-bold text-foreground mb-2">Área do Gestor</h1> <h1 className="text-3xl font-bold text-foreground mb-2">Área do Gestor</h1>
<p className="text-muted-foreground mb-8">Acesse o sistema médico</p> <p className="text-muted-foreground mb-8">Acesse o sistema médico</p>

48
app/manager/pacientes/[id]/editar/page.tsx
View File

@ -256,13 +256,13 @@ export default function EditarPacientePage() {
</Button> </Button>
</Link> </Link>
<div> <div>
<h1 className="text-2xl font-bold text-gray-900">Editar Paciente</h1> <h1 className="text-2xl font-bold text-foreground">Editar Paciente</h1>
<p className="text-gray-600">Atualize as informações do paciente</p> <p className="text-muted-foreground">Atualize as informações do paciente</p>
</div> </div>
{/* Anexos Section */} {/* Anexos Section */}
<div className="bg-white rounded-lg border border-gray-200 p-6"> <div className="bg-card rounded-lg border border-border p-6">
<h2 className="text-lg font-semibold text-gray-900 mb-6">Anexos</h2> <h2 className="text-lg font-semibold text-foreground mb-6">Anexos</h2>
<div className="flex items-center gap-3 mb-4"> <div className="flex items-center gap-3 mb-4">
<input ref={anexoInputRef} type="file" className="hidden" /> <input ref={anexoInputRef} type="file" className="hidden" />
<Button type="button" variant="outline" disabled={isUploadingAnexo}> <Button type="button" variant="outline" disabled={isUploadingAnexo}>
@ -270,16 +270,16 @@ export default function EditarPacientePage() {
</Button> </Button>
</div> </div>
{anexos.length === 0 ? ( {anexos.length === 0 ? (
<p className="text-sm text-gray-500">Nenhum anexo encontrado.</p> <p className="text-sm text-muted-foreground">Nenhum anexo encontrado.</p>
) : ( ) : (
<ul className="divide-y"> <ul className="divide-y divide-border">
{anexos.map((a) => ( {anexos.map((a) => (
<li key={a.id} className="flex items-center justify-between py-2"> <li key={a.id} className="flex items-center justify-between py-2">
<div className="flex items-center gap-2 min-w-0"> <div className="flex items-center gap-2 min-w-0">
<Paperclip className="w-4 h-4 text-gray-500 shrink-0" /> <Paperclip className="w-4 h-4 text-muted-foreground shrink-0" />
<span className="text-sm text-gray-800 truncate">{a.nome || a.filename || `Anexo ${a.id}`}</span> <span className="text-sm text-foreground truncate">{a.nome || a.filename || `Anexo ${a.id}`}</span>
</div> </div>
<Button type="button" variant="ghost" className="text-red-600"> <Button type="button" variant="ghost" className="text-destructive">
<Trash2 className="w-4 h-4 mr-1" /> Remover <Trash2 className="w-4 h-4 mr-1" /> Remover
</Button> </Button>
</li> </li>
@ -290,20 +290,20 @@ export default function EditarPacientePage() {
</div> </div>
<form onSubmit={handleSubmit} className="space-y-8"> <form onSubmit={handleSubmit} className="space-y-8">
<div className="bg-white rounded-lg border border-gray-200 p-6"> <div className="bg-card rounded-lg border border-border p-6">
<h2 className="text-lg font-semibold text-gray-900 mb-6">Dados Pessoais</h2> <h2 className="text-lg font-semibold text-foreground mb-6">Dados Pessoais</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{/* Photo upload */} {/* Photo upload */}
<div className="space-y-2"> <div className="space-y-2">
<Label>Foto do paciente</Label> <Label>Foto do paciente</Label>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<div className="w-20 h-20 rounded-full bg-gray-100 overflow-hidden flex items-center justify-center"> <div className="w-20 h-20 rounded-full bg-muted overflow-hidden flex items-center justify-center">
{photoUrl ? ( {photoUrl ? (
// eslint-disable-next-line @next/next/no-img-element // eslint-disable-next-line @next/next/no-img-element
<img src={photoUrl} alt="Foto do paciente" className="w-full h-full object-cover" /> <img src={photoUrl} alt="Foto do paciente" className="w-full h-full object-cover" />
) : ( ) : (
<span className="text-gray-400 text-sm">Sem foto</span> <span className="text-muted-foreground text-sm">Sem foto</span>
)} )}
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
@ -338,11 +338,11 @@ export default function EditarPacientePage() {
<Label>Sexo *</Label> <Label>Sexo *</Label>
<div className="flex gap-4"> <div className="flex gap-4">
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<input type="radio" id="Masculino" name="sexo" value="Masculino" checked={formData.sexo === "Masculino"} onChange={(e) => handleInputChange("sexo", e.target.value)} className="w-4 h-4 text-blue-600" /> <input type="radio" id="Masculino" name="sexo" value="Masculino" checked={formData.sexo === "Masculino"} onChange={(e) => handleInputChange("sexo", e.target.value)} className="w-4 h-4 text-primary" />
<Label htmlFor="Masculino">Masculino</Label> <Label htmlFor="Masculino">Masculino</Label>
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<input type="radio" id="Feminino" name="sexo" value="Feminino" checked={formData.sexo === "Feminino"} onChange={(e) => handleInputChange("sexo", e.target.value)} className="w-4 h-4 text-blue-600" /> <input type="radio" id="Feminino" name="sexo" value="Feminino" checked={formData.sexo === "Feminino"} onChange={(e) => handleInputChange("sexo", e.target.value)} className="w-4 h-4 text-primary" />
<Label htmlFor="Feminino">Feminino</Label> <Label htmlFor="Feminino">Feminino</Label>
</div> </div>
</div> </div>
@ -471,8 +471,8 @@ export default function EditarPacientePage() {
</div> </div>
{/* Contact Section */} {/* Contact Section */}
<div className="bg-white rounded-lg border border-gray-200 p-6"> <div className="bg-card rounded-lg border border-border p-6">
<h2 className="text-lg font-semibold text-gray-900 mb-6">Contato</h2> <h2 className="text-lg font-semibold text-foreground mb-6">Contato</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div className="space-y-2"> <div className="space-y-2">
@ -498,8 +498,8 @@ export default function EditarPacientePage() {
</div> </div>
{/* Address Section */} {/* Address Section */}
<div className="bg-white rounded-lg border border-gray-200 p-6"> <div className="bg-card rounded-lg border border-border p-6">
<h2 className="text-lg font-semibold text-gray-900 mb-6">Endereço</h2> <h2 className="text-lg font-semibold text-foreground mb-6">Endereço</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div className="space-y-2"> <div className="space-y-2">
@ -573,8 +573,8 @@ export default function EditarPacientePage() {
</div> </div>
{/* Medical Information Section */} {/* Medical Information Section */}
<div className="bg-white rounded-lg border border-gray-200 p-6"> <div className="bg-card rounded-lg border border-border p-6">
<h2 className="text-lg font-semibold text-gray-900 mb-6">Informações Médicas</h2> <h2 className="text-lg font-semibold text-foreground mb-6">Informações Médicas</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div className="space-y-2"> <div className="space-y-2">
@ -619,8 +619,8 @@ export default function EditarPacientePage() {
</div> </div>
{/* Insurance Information Section */} {/* Insurance Information Section */}
<div className="bg-white rounded-lg border border-gray-200 p-6"> <div className="bg-card rounded-lg border border-border p-6">
<h2 className="text-lg font-semibold text-gray-900 mb-6">Informações de convênio</h2> <h2 className="text-lg font-semibold text-foreground mb-6">Informações de convênio</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div className="space-y-2"> <div className="space-y-2">
@ -669,7 +669,7 @@ export default function EditarPacientePage() {
Cancelar Cancelar
</Button> </Button>
</Link> </Link>
<Button type="submit" className="bg-blue-600 hover:bg-blue-700"> <Button type="submit" className="bg-primary hover:bg-primary/90">
<Save className="w-4 h-4 mr-2" /> <Save className="w-4 h-4 mr-2" />
Salvar Alterações Salvar Alterações
</Button> </Button>

74
app/manager/pacientes/page.tsx
View File

@ -142,7 +142,7 @@ export default function PacientesPage() {
{/* Header */} {/* Header */}
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4"> <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
<div> <div>
<h1 className="text-xl md:text-2xl font-bold text-foreground"> <h1 className="text-xl md:text-2xl font-bold">
Pacientes Pacientes
</h1> </h1>
<p className="text-muted-foreground text-sm md:text-base"> <p className="text-muted-foreground text-sm md:text-base">
@ -152,8 +152,8 @@ export default function PacientesPage() {
</div> </div>
{/* Filtros */} {/* Filtros */}
<div className="flex flex-wrap items-center gap-4 bg-card p-4 rounded-lg border border-border"> <div className="flex flex-wrap items-center gap-4 bg-card p-4 rounded-lg border">
<Filter className="w-5 h-5 text-gray-400" /> <Filter className="w-5 h-5 text-muted-foreground" />
{/* Busca */} {/* Busca */}
<input <input
@ -166,7 +166,7 @@ export default function PacientesPage() {
{/* Convênio */} {/* Convênio */}
<div className="flex items-center gap-2 w-full sm:w-auto sm:flex-grow sm:max-w-[200px]"> <div className="flex items-center gap-2 w-full sm:w-auto sm:flex-grow sm:max-w-[200px]">
<span className="text-sm font-medium text-foreground whitespace-nowrap hidden md:block"> <span className="text-sm font-medium whitespace-nowrap hidden md:block">
Convênio Convênio
</span> </span>
<Select value={convenioFilter} onValueChange={setConvenioFilter}> <Select value={convenioFilter} onValueChange={setConvenioFilter}>
@ -184,7 +184,7 @@ export default function PacientesPage() {
{/* VIP */} {/* VIP */}
<div className="flex items-center gap-2 w-full sm:w-auto sm:flex-grow sm:max-w-[150px]"> <div className="flex items-center gap-2 w-full sm:w-auto sm:flex-grow sm:max-w-[150px]">
<span className="text-sm font-medium text-foreground whitespace-nowrap hidden md:block">VIP</span> <span className="text-sm font-medium whitespace-nowrap hidden md:block">VIP</span>
<Select value={vipFilter} onValueChange={setVipFilter}> <Select value={vipFilter} onValueChange={setVipFilter}>
<SelectTrigger className="w-full sm:w-32"> <SelectTrigger className="w-full sm:w-32">
<SelectValue placeholder="VIP" /> <SelectValue placeholder="VIP" />
@ -219,32 +219,32 @@ export default function PacientesPage() {
</div> </div>
{/* Tabela */} {/* Tabela */}
<div className="bg-white rounded-lg border border-gray-200 shadow-md hidden md:block"> <div className="bg-card rounded-lg border shadow-md hidden md:block">
<div className="overflow-x-auto"> <div className="overflow-x-auto">
{error ? ( {error ? (
<div className="p-6 text-red-600">{`Erro ao carregar pacientes: ${error}`}</div> <div className="p-6 text-destructive">{`Erro ao carregar pacientes: ${error}`}</div>
) : loading ? ( ) : loading ? (
<div className="p-6 text-center text-gray-500 flex items-center justify-center"> <div className="p-6 text-center text-muted-foreground flex items-center justify-center">
<Loader2 className="w-6 h-6 mr-2 animate-spin text-green-600" />{" "} <Loader2 className="w-6 h-6 mr-2 animate-spin text-primary" />{" "}
Carregando pacientes... Carregando pacientes...
</div> </div>
) : ( ) : (
<table className="w-full min-w-[650px]"> <table className="w-full min-w-[650px]">
<thead className="bg-gray-50 border-b border-gray-200"> <thead className="bg-muted border-b">
<tr> <tr>
<th className="text-left p-4 font-medium text-gray-700 w-[20%]">Nome</th> <th className="text-left p-4 font-medium text-muted-foreground w-[20%]">Nome</th>
<th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden sm:table-cell">Telefone</th> <th className="text-left p-4 font-medium text-muted-foreground w-[15%] hidden sm:table-cell">Telefone</th>
<th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden md:table-cell">Cidade / Estado</th> <th className="text-left p-4 font-medium text-muted-foreground w-[15%] hidden md:table-cell">Cidade / Estado</th>
<th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden sm:table-cell">Convênio</th> <th className="text-left p-4 font-medium text-muted-foreground w-[15%] hidden sm:table-cell">Convênio</th>
<th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden lg:table-cell">Último atendimento</th> <th className="text-left p-4 font-medium text-muted-foreground w-[15%] hidden lg:table-cell">Último atendimento</th>
<th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden lg:table-cell">Próximo atendimento</th> <th className="text-left p-4 font-medium text-muted-foreground w-[15%] hidden lg:table-cell">Próximo atendimento</th>
<th className="text-left p-4 font-medium text-gray-700 w-[5%]">Ações</th> <th className="text-left p-4 font-medium text-muted-foreground w-[5%]">Ações</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{currentPatients.length === 0 ? ( {currentPatients.length === 0 ? (
<tr> <tr>
<td colSpan={7} className="p-8 text-center text-gray-500"> <td colSpan={7} className="p-8 text-center text-muted-foreground">
{allPatients.length === 0 {allPatients.length === 0
? "Nenhum paciente cadastrado" ? "Nenhum paciente cadastrado"
: "Nenhum paciente encontrado com os filtros aplicados"} : "Nenhum paciente encontrado com os filtros aplicados"}
@ -252,33 +252,33 @@ export default function PacientesPage() {
</tr> </tr>
) : ( ) : (
currentPatients.map((patient) => ( currentPatients.map((patient) => (
<tr key={patient.id} className="border-b border-gray-100 hover:bg-gray-50"> <tr key={patient.id} className="border-b hover:bg-muted">
<td className="p-4"> <td className="p-4">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center"> <div className="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center">
<span className="text-blue-600 font-medium text-sm"> <span className="text-primary font-medium text-sm">
{patient.nome?.charAt(0) || "?"} {patient.nome?.charAt(0) || "?"}
</span> </span>
</div> </div>
<span className="font-medium text-gray-900"> <span className="font-medium">
{patient.nome} {patient.nome}
{patient.vip && ( {patient.vip && (
<span className="ml-2 px-2 py-0.5 text-xs font-semibold text-purple-600 bg-purple-100 rounded-full"> <span className="ml-2 px-2 py-0.5 text-xs font-semibold rounded-full text-purple-400 bg-purple-400/15 dark:text-purple-300 dark:bg-purple-300/15">
VIP VIP
</span> </span>
)} )}
</span> </span>
</div> </div>
</td> </td>
<td className="p-4 text-gray-600 hidden sm:table-cell">{patient.telefone}</td> <td className="p-4 text-muted-foreground hidden sm:table-cell">{patient.telefone}</td>
<td className="p-4 text-gray-600 hidden md:table-cell">{`${patient.cidade} / ${patient.estado}`}</td> <td className="p-4 text-muted-foreground hidden md:table-cell">{`${patient.cidade} / ${patient.estado}`}</td>
<td className="p-4 text-gray-600 hidden sm:table-cell">{patient.convenio}</td> <td className="p-4 text-muted-foreground hidden sm:table-cell">{patient.convenio}</td>
<td className="p-4 text-gray-600 hidden lg:table-cell">{patient.ultimoAtendimento}</td> <td className="p-4 text-muted-foreground hidden lg:table-cell">{patient.ultimoAtendimento}</td>
<td className="p-4 text-gray-600 hidden lg:table-cell">{patient.proximoAtendimento}</td> <td className="p-4 text-muted-foreground hidden lg:table-cell">{patient.proximoAtendimento}</td>
<td className="p-4"> <td className="p-4">
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<div className="text-black-600 cursor-pointer"> <div className="cursor-pointer">
<MoreVertical className="h-4 w-4" /> <MoreVertical className="h-4 w-4" />
</div> </div>
</DropdownMenuTrigger> </DropdownMenuTrigger>
@ -297,7 +297,7 @@ export default function PacientesPage() {
<Calendar className="w-4 h-4 mr-2" /> <Calendar className="w-4 h-4 mr-2" />
Marcar consulta Marcar consulta
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem className="text-red-600" onClick={() => openDeleteDialog(String(patient.id))}> <DropdownMenuItem className="text-destructive" onClick={() => openDeleteDialog(String(patient.id))}>
<Trash2 className="w-4 h-4 mr-2" /> <Trash2 className="w-4 h-4 mr-2" />
Excluir Excluir
</DropdownMenuItem> </DropdownMenuItem>
@ -315,7 +315,7 @@ export default function PacientesPage() {
{/* Paginação */} {/* Paginação */}
{totalPages > 1 && !loading && ( {totalPages > 1 && !loading && (
<div className="flex flex-col sm:flex-row items-center justify-center p-4 border-t border-gray-200"> <div className="flex flex-col sm:flex-row items-center justify-center p-4 border-t border-border">
<div className="flex space-x-2 flex-wrap justify-center"> <div className="flex space-x-2 flex-wrap justify-center">
<Button <Button
onClick={() => setPage((prev) => Math.max(1, prev - 1))} onClick={() => setPage((prev) => Math.max(1, prev - 1))}
@ -335,8 +335,8 @@ export default function PacientesPage() {
size="lg" size="lg"
className={ className={
pageNumber === page pageNumber === page
? "bg-blue-600 hover:bg-blue-700 text-white" ? "bg-primary hover:bg-primary/90 text-primary-foreground"
: "text-gray-700" : "text-muted-foreground"
} }
> >
{pageNumber} {pageNumber}
@ -367,7 +367,7 @@ export default function PacientesPage() {
<AlertDialogCancel>Cancelar</AlertDialogCancel> <AlertDialogCancel>Cancelar</AlertDialogCancel>
<AlertDialogAction <AlertDialogAction
onClick={() => patientToDelete && handleDeletePatient(patientToDelete)} onClick={() => patientToDelete && handleDeletePatient(patientToDelete)}
className="bg-red-600 hover:bg-red-700" className="bg-destructive hover:bg-destructive/90"
> >
Excluir Excluir
</AlertDialogAction> </AlertDialogAction>
@ -382,12 +382,12 @@ export default function PacientesPage() {
<AlertDialogTitle>Detalhes do Paciente</AlertDialogTitle> <AlertDialogTitle>Detalhes do Paciente</AlertDialogTitle>
<AlertDialogDescription> <AlertDialogDescription>
{patientDetails === null ? ( {patientDetails === null ? (
<div className="text-gray-500"> <div className="text-muted-foreground">
<Loader2 className="w-6 h-6 animate-spin mx-auto text-green-600 my-4" /> <Loader2 className="w-6 h-6 animate-spin mx-auto text-primary my-4" />
Carregando... Carregando...
</div> </div>
) : patientDetails?.error ? ( ) : patientDetails?.error ? (
<div className="text-red-600 p-4">{patientDetails.error}</div> <div className="text-destructive p-4">{patientDetails.error}</div>
) : ( ) : (
<div className="grid gap-4 py-4"> <div className="grid gap-4 py-4">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">

24
app/manager/usuario/[id]/editar/page.tsx
View File

@ -155,12 +155,12 @@ export default function EditarUsuarioPage() {
if (loading) { if (loading) {
return ( return (
<Sidebar> <Sidebar>
<div className="flex justify-center items-center h-full w-full py-16"> <div className="flex justify-center items-center h-full w-full py-16">
<Loader2 className="w-8 h-8 animate-spin text-green-600" /> <Loader2 className="w-8 h-8 animate-spin text-primary" />
<p className="ml-2 text-gray-600">Carregando dados do usuário...</p> <p className="ml-2 text-muted-foreground">Carregando dados do usuário...</p>
</div> </div>
</Sidebar> </Sidebar>
); );
} }
@ -169,10 +169,10 @@ export default function EditarUsuarioPage() {
<div className="w-full max-w-2xl mx-auto space-y-6 p-4 md:p-8"> <div className="w-full max-w-2xl mx-auto space-y-6 p-4 md:p-8">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<h1 className="text-2xl font-bold text-gray-900"> <h1 className="text-2xl font-bold text-foreground">
Editar Usuário: <span className="text-green-600">{formData.nomeCompleto}</span> Editar Usuário: <span className="text-primary">{formData.nomeCompleto}</span>
</h1> </h1>
<p className="text-sm text-gray-500"> <p className="text-sm text-muted-foreground">
Atualize as informações do usuário (ID: {id}). Atualize as informações do usuário (ID: {id}).
</p> </p>
</div> </div>
@ -184,9 +184,9 @@ export default function EditarUsuarioPage() {
</Link> </Link>
</div> </div>
<form onSubmit={handleSubmit} className="space-y-8 bg-white p-8 border rounded-lg shadow-sm"> <form onSubmit={handleSubmit} className="space-y-8 bg-card p-8 border border-border rounded-lg shadow-sm">
{error && ( {error && (
<div className="p-3 bg-red-100 text-red-700 rounded-lg border border-red-300"> <div className="p-3 rounded-lg border bg-destructive/10 text-destructive border-destructive/30">
<p className="font-medium">Erro na Atualização:</p> <p className="font-medium">Erro na Atualização:</p>
<p className="text-sm">{error}</p> <p className="text-sm">{error}</p>
</div> </div>
@ -261,7 +261,7 @@ export default function EditarUsuarioPage() {
</Link> </Link>
<Button <Button
type="submit" type="submit"
className="bg-green-600 hover:bg-green-700" className="bg-primary hover:bg-primary/90"
disabled={isSaving} disabled={isSaving}
> >
{isSaving ? ( {isSaving ? (

12
app/manager/usuario/novo/page.tsx
View File

@ -140,17 +140,17 @@ export default function NovoUsuarioPage() {
<div className="w-full max-w-screen-lg space-y-8"> <div className="w-full max-w-screen-lg space-y-8">
<div className="flex items-center justify-between border-b pb-4"> <div className="flex items-center justify-between border-b pb-4">
<div> <div>
<h1 className="text-3xl font-extrabold text-gray-900">Novo Usuário</h1> <h1 className="text-3xl font-extrabold">Novo Usuário</h1>
<p className="text-md text-gray-500">Preencha os dados para cadastrar um novo usuário no sistema.</p> <p className="text-md text-muted-foreground">Preencha os dados para cadastrar um novo usuário no sistema.</p>
</div> </div>
<Link href="/manager/usuario"> <Link href="/manager/usuario">
<Button variant="outline">Cancelar</Button> <Button variant="outline">Cancelar</Button>
</Link> </Link>
</div> </div>
<form onSubmit={handleSubmit} className="space-y-6 bg-white p-6 md:p-10 border rounded-xl shadow-lg"> <form onSubmit={handleSubmit} className="space-y-6 bg-card p-6 md:p-10 border rounded-xl shadow-lg">
{error && ( {error && (
<div className="p-4 bg-red-50 text-red-700 rounded-lg border border-red-300"> <div className="p-4 bg-destructive/10 text-destructive rounded-lg border border-destructive">
<p className="font-semibold">Erro no Cadastro:</p> <p className="font-semibold">Erro no Cadastro:</p>
<p className="text-sm break-words">{error}</p> <p className="text-sm break-words">{error}</p>
</div> </div>
@ -208,7 +208,7 @@ export default function NovoUsuarioPage() {
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="confirmarSenha">Confirmar Senha *</Label> <Label htmlFor="confirmarSenha">Confirmar Senha *</Label>
<Input id="confirmarSenha" type="password" value={formData.confirmarSenha} onChange={(e) => handleInputChange("confirmarSenha", e.target.value)} placeholder="Repita a senha" required /> <Input id="confirmarSenha" type="password" value={formData.confirmarSenha} onChange={(e) => handleInputChange("confirmarSenha", e.target.value)} placeholder="Repita a senha" required />
{formData.senha && formData.confirmarSenha && formData.senha !== formData.confirmarSenha && <p className="text-xs text-red-500">As senhas não coincidem.</p>} {formData.senha && formData.confirmarSenha && formData.senha !== formData.confirmarSenha && <p className="text-xs text-destructive">As senhas não coincidem.</p>}
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
@ -228,7 +228,7 @@ export default function NovoUsuarioPage() {
Cancelar Cancelar
</Button> </Button>
</Link> </Link>
<Button type="submit" className="bg-green-600 hover:bg-green-700" disabled={isSaving}> <Button type="submit" className="bg-primary hover:bg-primary/90" disabled={isSaving}>
{isSaving ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Save className="w-4 h-4 mr-2" />} {isSaving ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Save className="w-4 h-4 mr-2" />}
{isSaving ? "Salvando..." : "Salvar Usuário"} {isSaving ? "Salvando..." : "Salvar Usuário"}
</Button> </Button>

78
app/manager/usuario/page.tsx
View File

@ -182,22 +182,22 @@ export default function UsersPage() {
{/* Header */} {/* Header */}
<div className="flex flex-wrap items-center justify-between gap-3"> <div className="flex flex-wrap items-center justify-between gap-3">
<div> <div>
<h1 className="text-2xl font-bold text-gray-900">Usuários</h1> <h1 className="text-2xl font-bold">Usuários</h1>
<p className="text-sm text-gray-500">Gerencie usuários.</p> <p className="text-sm text-muted-foreground">Gerencie usuários.</p>
</div> </div>
<Link href="/manager/usuario/novo" className="w-full sm:w-auto"> <Link href="/manager/usuario/novo" className="w-full sm:w-auto">
<Button className="w-full sm:w-auto bg-blue-600 hover:bg-blue-700"> <Button className="w-full sm:w-auto">
<Plus className="w-4 h-4 mr-2" /> Novo Usuário <Plus className="w-4 h-4 mr-2" /> Novo Usuário
</Button> </Button>
</Link> </Link>
</div> </div>
{/* --- 4. Filtro (Barra de Pesquisa + Selects) --- */} {/* --- 4. Filtro (Barra de Pesquisa + Selects) --- */}
<div className="flex flex-col md:flex-row items-start md:items-center gap-3 bg-white p-4 rounded-lg border border-gray-200"> <div className="flex flex-col md:flex-row items-start md:items-center gap-3 bg-card p-4 rounded-lg border">
{/* Barra de Pesquisa */} {/* Barra de Pesquisa */}
<div className="relative w-full md:flex-1"> <div className="relative w-full md:flex-1">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" /> <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<Input <Input
placeholder="Buscar por nome, e-mail ou telefone..." placeholder="Buscar por nome, e-mail ou telefone..."
value={searchTerm} value={searchTerm}
@ -205,7 +205,7 @@ export default function UsersPage() {
setSearchTerm(e.target.value); setSearchTerm(e.target.value);
setCurrentPage(1); // Reseta a paginação ao pesquisar setCurrentPage(1); // Reseta a paginação ao pesquisar
}} }}
className="pl-10 w-full bg-gray-50 border-gray-200 focus:bg-white transition-colors" className="pl-10 w-full bg-muted border-border focus:bg-card transition-colors"
/> />
</div> </div>
@ -259,54 +259,54 @@ export default function UsersPage() {
{/* Fim do Filtro */} {/* Fim do Filtro */}
{/* Tabela/Lista */} {/* Tabela/Lista */}
<div className="bg-white rounded-lg border border-gray-200 shadow-md overflow-x-auto"> <div className="bg-card rounded-lg border shadow-md overflow-x-auto">
{loading ? ( {loading ? (
<div className="p-8 text-center text-gray-500"> <div className="p-8 text-center text-muted-foreground">
<Loader2 className="w-8 h-8 animate-spin mx-auto mb-3 text-green-600" /> <Loader2 className="w-8 h-8 animate-spin mx-auto mb-3 text-primary" />
Carregando usuários... Carregando usuários...
</div> </div>
) : error ? ( ) : error ? (
<div className="p-8 text-center text-red-600">{error}</div> <div className="p-8 text-center text-destructive">{error}</div>
) : filteredUsers.length === 0 ? ( ) : filteredUsers.length === 0 ? (
<div className="p-8 text-center text-gray-500"> <div className="p-8 text-center text-muted-foreground">
Nenhum usuário encontrado com os filtros aplicados. Nenhum usuário encontrado com os filtros aplicados.
</div> </div>
) : ( ) : (
<> <>
{/* Tabela para Telas Médias e Grandes */} {/* Tabela para Telas Médias e Grandes */}
<table className="min-w-full divide-y divide-gray-200 hidden md:table"> <table className="min-w-full divide-y hidden md:table">
<thead className="bg-gray-50"> <thead className="bg-muted">
<tr> <tr>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase"> <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase">
Nome Nome
</th> </th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase"> <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase">
E-mail E-mail
</th> </th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase"> <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase">
Telefone Telefone
</th> </th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase"> <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase">
Cargo Cargo
</th> </th>
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase"> <th className="px-6 py-3 text-right text-xs font-medium text-muted-foreground uppercase">
Ações Ações
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody className="bg-white divide-y divide-gray-200"> <tbody className="bg-card divide-y">
{currentItems.map((u) => ( {currentItems.map((u) => (
<tr key={u.id} className="hover:bg-gray-50"> <tr key={u.id} className="hover:bg-muted">
<td className="px-6 py-4 text-sm text-gray-900"> <td className="px-6 py-4 text-sm">
{u.full_name} {u.full_name}
</td> </td>
<td className="px-6 py-4 text-sm text-gray-500 break-all"> <td className="px-6 py-4 text-sm text-muted-foreground break-all">
{u.email} {u.email}
</td> </td>
<td className="px-6 py-4 text-sm text-gray-500"> <td className="px-6 py-4 text-sm text-muted-foreground">
{u.phone} {u.phone}
</td> </td>
<td className="px-6 py-4 text-sm text-gray-500 capitalize"> <td className="px-6 py-4 text-sm text-muted-foreground capitalize">
{u.role} {u.role}
</td> </td>
<td className="px-6 py-4 text-right"> <td className="px-6 py-4 text-right">
@ -325,17 +325,17 @@ export default function UsersPage() {
</table> </table>
{/* Layout em Cards/Lista para Telas Pequenas */} {/* Layout em Cards/Lista para Telas Pequenas */}
<div className="md:hidden divide-y divide-gray-200"> <div className="md:hidden divide-y">
{currentItems.map((u) => ( {currentItems.map((u) => (
<div key={u.id} className="flex items-center justify-between p-4 hover:bg-gray-50"> <div key={u.id} className="flex items-center justify-between p-4 hover:bg-muted">
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="text-sm font-medium text-gray-900 truncate"> <div className="text-sm font-medium truncate">
{u.full_name || "—"} {u.full_name || "—"}
</div> </div>
<div className="text-xs text-gray-500 truncate"> <div className="text-xs text-muted-foreground truncate">
{u.email} {u.email}
</div> </div>
<div className="text-sm text-gray-500 capitalize mt-1"> <div className="text-sm text-muted-foreground capitalize mt-1">
{u.role || "—"} {u.role || "—"}
</div> </div>
</div> </div>
@ -355,12 +355,12 @@ export default function UsersPage() {
{/* Paginação */} {/* Paginação */}
{totalPages > 1 && ( {totalPages > 1 && (
<div className="flex flex-wrap justify-center items-center gap-2 mt-4 p-4 border-t border-gray-200"> <div className="flex flex-wrap justify-center items-center gap-2 mt-4 p-4 border-t">
{/* Botão Anterior */} {/* Botão Anterior */}
<button <button
onClick={goToPrevPage} onClick={goToPrevPage}
disabled={currentPage === 1} disabled={currentPage === 1}
className="flex items-center px-4 py-2 rounded-md font-medium transition-colors text-sm bg-gray-100 text-gray-700 hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed border border-gray-300" className="flex items-center px-4 py-2 rounded-md font-medium transition-colors text-sm bg-muted text-muted-foreground hover:bg-muted/90 disabled:opacity-50 disabled:cursor-not-allowed border"
> >
{"< Anterior"} {"< Anterior"}
</button> </button>
@ -370,10 +370,10 @@ export default function UsersPage() {
<button <button
key={number} key={number}
onClick={() => paginate(number)} onClick={() => paginate(number)}
className={`px-4 py-2 rounded-md font-medium transition-colors text-sm border border-gray-300 ${ className={`px-4 py-2 rounded-md font-medium transition-colors text-sm border ${
currentPage === number currentPage === number
? "bg-blue-600 text-white shadow-md border-blue-600" ? "bg-primary text-primary-foreground shadow-md border-primary"
: "bg-gray-100 text-gray-700 hover:bg-gray-200" : "bg-muted text-muted-foreground hover:bg-muted/90"
}`} }`}
> >
{number} {number}
@ -384,7 +384,7 @@ export default function UsersPage() {
<button <button
onClick={goToNextPage} onClick={goToNextPage}
disabled={currentPage === totalPages} disabled={currentPage === totalPages}
className="flex items-center px-4 py-2 rounded-md font-medium transition-colors text-sm bg-gray-100 text-gray-700 hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed border border-gray-300" className="flex items-center px-4 py-2 rounded-md font-medium transition-colors text-sm bg-muted text-muted-foreground hover:bg-muted/90 disabled:opacity-50 disabled:cursor-not-allowed border"
> >
{"Próximo >"} {"Próximo >"}
</button> </button>
@ -406,12 +406,12 @@ export default function UsersPage() {
</AlertDialogTitle> </AlertDialogTitle>
<AlertDialogDescription> <AlertDialogDescription>
{!userDetails ? ( {!userDetails ? (
<div className="p-4 text-center text-gray-500"> <div className="p-4 text-center text-muted-foreground">
<Loader2 className="w-6 h-6 animate-spin mx-auto mb-3 text-green-600" /> <Loader2 className="w-6 h-6 animate-spin mx-auto mb-3 text-primary" />
Buscando dados completos... Buscando dados completos...
</div> </div>
) : ( ) : (
<div className="space-y-3 pt-2 text-left text-gray-700"> <div className="space-y-3 pt-2 text-left text-muted-foreground">
<div> <div>
<strong>ID:</strong> {userDetails.user.id} <strong>ID:</strong> {userDetails.user.id}
</div> </div>
@ -437,7 +437,7 @@ export default function UsersPage() {
{k}:{" "} {k}:{" "}
<span <span
className={`font-semibold ${ className={`font-semibold ${
v ? "text-green-600" : "text-red-600" v ? "text-primary" : "text-destructive"
}`} }`}
> >
{v ? "Sim" : "Não"} {v ? "Sim" : "Não"}

62
app/page.tsx
View File

@ -4,28 +4,34 @@ import Link from "next/link";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { useState } from "react"; import { useState } from "react";
import { Stethoscope, Baby, Microscope } from "lucide-react"; import { Stethoscope, Baby, Microscope } from "lucide-react";
import { useAccessibility } from "./context/AccessibilityContext";
export default function InicialPage() { export default function InicialPage() {
const [isMenuOpen, setIsMenuOpen] = useState(false); const [isMenuOpen, setIsMenuOpen] = useState(false);
const { contrast } = useAccessibility();
const heroClass = contrast === "high"
? "px-6 md:px-10 lg:px-20 py-20 bg-background text-foreground border-y-2 border-primary"
: "px-6 md:px-10 lg:px-20 py-20 bg-gradient-to-r from-[#1E2A78] via-[#007BFF] to-[#00BFFF] text-white";
return ( return (
<div className="min-h-screen flex flex-col bg-white font-sans scroll-smooth text-[#1E2A78]"> <div className="min-h-screen flex flex-col bg-background font-sans scroll-smooth text-foreground">
{/* Barra superior */} {/* Barra superior */}
<div className="bg-[#1E2A78] text-white text-sm py-2 px-4 md:px-6 flex justify-between items-center"> <div className="bg-primary text-primary-foreground text-sm py-2 px-4 md:px-6 flex justify-between items-center">
<span className="hidden sm:inline">Horário: 08h00 - 21h00</span> <span className="hidden sm:inline">Horário: 08h00 - 21h00</span>
<span className="hover:underline cursor-pointer transition"> <span className="hover:underline cursor-pointer transition">
Email: contato@mediconnect.com Email: contato@mediconnect.com
</span> </span>
</div> </div>
{/* Header */} {/* Header */}
<header className="bg-white shadow-md py-4 px-4 md:px-6 flex justify-between items-center relative sticky top-0 z-50 backdrop-blur-md"> <header className="bg-muted text-foreground shadow-md py-4 px-4 md:px-6 flex justify-between items-center relative sticky top-0 z-50 backdrop-blur-md">
<a href="#home" className="flex items-center space-x-2 cursor-pointer"> <a href="#home" className="flex items-center space-x-2 cursor-pointer">
<img <img
src="/android-chrome-512x512.png" src="/android-chrome-512x512.png"
alt="Logo MediConnect" alt="Logo MediConnect"
className="w-20 h-20 object-contain transition-transform hover:scale-105" className="w-20 h-20 object-contain transition-transform hover:scale-105"
/> />
<h1 className="text-2xl font-extrabold text-[#1E2A78] tracking-tight"> <h1 className="text-2xl font-extrabold text-foreground tracking-tight">
MedConnect MedConnect
</h1> </h1>
</a> </a>
@ -35,7 +41,7 @@ export default function InicialPage() {
<Link href="/login"> <Link href="/login">
<Button <Button
variant="outline" variant="outline"
className="rounded-full px-4 py-2 text-sm border-2 border-[#007BFF] text-[#007BFF] hover:bg-[#007BFF] hover:text-white transition" className="rounded-full px-4 py-2 text-sm border-2 border-primary text-primary hover:bg-primary hover:text-primary-foreground transition"
> >
Login Login
</Button> </Button>
@ -76,20 +82,20 @@ export default function InicialPage() {
isMenuOpen ? "block" : "hidden" isMenuOpen ? "block" : "hidden"
} absolute top-[76px] left-0 w-full bg-white shadow-md py-4 md:relative md:top-auto md:left-auto md:w-auto md:block md:bg-transparent md:shadow-none transition-all duration-300 z-10`} } absolute top-[76px] left-0 w-full bg-white shadow-md py-4 md:relative md:top-auto md:left-auto md:w-auto md:block md:bg-transparent md:shadow-none transition-all duration-300 z-10`}
> >
<div className="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-8 text-gray-600 font-medium items-center"> <div className="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-8 text-foreground font-medium items-center">
<Link href="#home" className="hover:text-[#007BFF] transition"> <Link href="#home" className="hover:text-primary transition">
Home Home
</Link> </Link>
<a href="#about" className="hover:text-[#007BFF] transition"> <a href="#about" className="hover:text-primary transition">
Sobre Sobre
</a> </a>
<a href="#departments" className="hover:text-[#007BFF] transition"> <a href="#departments" className="hover:text-primary transition">
Departamentos Departamentos
</a> </a>
<a href="#doctors" className="hover:text-[#007BFF] transition"> <a href="#doctors" className="hover:text-primary transition">
Médicos Médicos
</a> </a>
<a href="#contact" className="hover:text-[#007BFF] transition"> <a href="#contact" className="hover:text-primary transition">
Contato Contato
</a> </a>
</div> </div>
@ -100,7 +106,7 @@ export default function InicialPage() {
<Link href="/login"> <Link href="/login">
<Button <Button
variant="outline" variant="outline"
className="rounded-full px-6 py-2 border-2 border-[#007BFF] text-[#007BFF] hover:bg-[#007BFF] hover:text-white transition cursor-pointer" className="rounded-full px-6 py-2 border-2 border-primary text-primary hover:bg-primary hover:text-primary-foreground transition cursor-pointer"
> >
Login Login
</Button> </Button>
@ -108,7 +114,7 @@ export default function InicialPage() {
</div> </div>
</header> </header>
{/* Hero Section */} {/* Hero Section */}
<section className="flex flex-col md:flex-row items-center justify-between px-6 md:px-10 lg:px-20 py-20 bg-gradient-to-r from-[#1E2A78] via-[#007BFF] to-[#00BFFF] text-white"> <section className={`flex flex-col md:flex-row items-center justify-between ${heroClass}`}>
<div className="max-w-lg mx-auto md:mx-0"> <div className="max-w-lg mx-auto md:mx-0">
<h2 className="uppercase text-sm tracking-widest opacity-80"> <h2 className="uppercase text-sm tracking-widest opacity-80">
Bem-vindo à Saúde Digital Bem-vindo à Saúde Digital
@ -116,15 +122,15 @@ export default function InicialPage() {
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight mt-2 drop-shadow-lg"> <h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight mt-2 drop-shadow-lg">
Soluções Médicas <br /> & Cuidados com a Saúde Soluções Médicas <br /> & Cuidados com a Saúde
</h1> </h1>
<p className="mt-4 text-base leading-relaxed opacity-90"> <p className="mt-4 text-base leading-relaxed opacity-90 text-foreground">
Excelência em saúde há mais de 25 anos. Atendimento médico com Excelência em saúde há mais de 25 anos. Atendimento médico com
qualidade, segurança e carinho. qualidade, segurança e carinho.
</p> </p>
<div className="mt-8 flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 justify-center md:justify-start"> <div className="mt-8 flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 justify-center md:justify-start">
<Button className="px-8 py-3 text-base font-semibold bg-white text-[#1E2A78] hover:bg-[#EAF4FF] transition-all shadow-md"> <Button className="px-8 py-3 text-base font-semibold bg-card text-card-foreground hover:bg-muted transition-all shadow-md">
Nossos Serviços Nossos Serviços
</Button> </Button>
<Button className="px-8 py-3 text-base font-semibold bg-white text-[#1E2A78] hover:bg-[#EAF4FF] transition-all shadow-md"> <Button className="px-8 py-3 text-base font-semibold bg-card text-card-foreground hover:bg-muted transition-all shadow-md">
Saiba Mais Saiba Mais
</Button> </Button>
</div> </div>
@ -140,12 +146,12 @@ export default function InicialPage() {
{/* Serviços */} {/* Serviços */}
<section <section
id="departments" id="departments"
className="py-20 px-6 md:px-10 lg:px-20 bg-[#F8FBFF]" className="py-20 px-6 md:px-10 lg:px-20 bg-secondary"
> >
<h2 className="text-center text-3xl sm:text-4xl font-extrabold text-[#1E2A78]"> <h2 className="text-center text-3xl sm:text-4xl font-extrabold text-foreground">
Cuidados completos para a sua saúde Cuidados completos para a sua saúde
</h2> </h2>
<p className="text-center text-gray-600 mt-3 text-base"> <p className="text-center text-muted-foreground mt-3 text-base">
Serviços médicos que oferecemos Serviços médicos que oferecemos
</p> </p>
@ -170,16 +176,16 @@ export default function InicialPage() {
].map(({ title, desc, Icon }, index) => ( ].map(({ title, desc, Icon }, index) => (
<div <div
key={index} key={index}
className="p-8 bg-white rounded-2xl shadow-md hover:shadow-xl transition-all duration-300 border border-[#E0E9FF] group" className="p-8 bg-card rounded-2xl shadow-md hover:shadow-xl transition-all duration-300 border border-border group"
> >
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
<Icon className="text-[#007BFF] w-6 h-6 group-hover:scale-110 transition-transform" /> <Icon className="text-primary w-6 h-6 group-hover:scale-110 transition-transform" />
<h3 className="text-xl font-semibold">{title}</h3> <h3 className="text-xl font-semibold">{title}</h3>
</div> </div>
<p className="text-gray-600 mt-3 text-sm leading-relaxed"> <p className="text-muted-foreground mt-3 text-sm leading-relaxed">
{desc} {desc}
</p> </p>
<Button className="mt-6 w-full bg-[#007BFF] hover:bg-[#005FCC] text-white transition"> <Button className="mt-6 w-full bg-primary hover:opacity-90 text-primary-foreground transition">
Agendar Agendar
</Button> </Button>
</div> </div>
@ -187,17 +193,17 @@ export default function InicialPage() {
</div> </div>
</section> </section>
{/* Footer */} {/* Footer */}
<footer className="bg-[#1E2A78] text-white py-8 text-center text-sm"> <footer className="bg-primary text-primary-foreground py-8 text-center text-sm border-t-2 border-primary-foreground/20">
<div className="space-y-2"> <div className="space-y-2">
<p>© 2025 MediConnect — Todos os direitos reservados</p> <p>© 2025 MediConnect — Todos os direitos reservados</p>
<div className="flex justify-center space-x-6 opacity-80"> <div className="flex justify-center space-x-6 opacity-90">
<a href="#about" className="hover:text-[#00BFFF] transition"> <a href="#about" className="hover:opacity-70 transition">
Sobre Sobre
</a> </a>
<a href="#departments" className="hover:text-[#00BFFF] transition"> <a href="#departments" className="hover:opacity-70 transition">
Serviços Serviços
</a> </a>
<a href="#contact" className="hover:text-[#00BFFF] transition"> <a href="#contact" className="hover:opacity-70 transition">
Contato Contato
</a> </a>
</div> </div>

8
app/patient/appointments/page.tsx
View File

@ -142,7 +142,7 @@ export default function PatientAppointmentsPage() {
{isLoading ? ( {isLoading ? (
<p>Carregando consultas...</p> <p>Carregando consultas...</p>
) : appointments.length === 0 ? ( ) : appointments.length === 0 ? (
<p className="text-gray-600">Você ainda não possui consultas agendadas.</p> <p className="text-muted-foreground">Você ainda não possui consultas agendadas.</p>
) : ( ) : (
appointments.map((apt) => ( appointments.map((apt) => (
<Card key={apt.id}> <Card key={apt.id}>
@ -153,14 +153,14 @@ export default function PatientAppointmentsPage() {
</div> </div>
{getStatusBadge(apt.status)} {getStatusBadge(apt.status)}
</CardHeader> </CardHeader>
<CardContent className="grid md:grid-cols-2 gap-3 text-sm text-gray-700"> <CardContent className="grid md:grid-cols-2 gap-3 text-sm text-muted-foreground">
<div className="space-y-2"> <div className="space-y-2">
<div className="flex items-center"> <div className="flex items-center">
<Calendar className="mr-2 h-4 w-4 text-gray-500" /> <Calendar className="mr-2 h-4 w-4 text-muted-foreground" />
{new Date(apt.scheduled_at).toLocaleDateString("pt-BR")} {new Date(apt.scheduled_at).toLocaleDateString("pt-BR")}
</div> </div>
<div className="flex items-center"> <div className="flex items-center">
<Clock className="mr-2 h-4 w-4 text-gray-500" /> <Clock className="mr-2 h-4 w-4 text-muted-foreground" />
{new Date(apt.scheduled_at).toLocaleTimeString("pt-BR", { {new Date(apt.scheduled_at).toLocaleTimeString("pt-BR", {
hour: "2-digit", hour: "2-digit",
minute: "2-digit", minute: "2-digit",

26
app/patient/dashboard/page.tsx
View File

@ -15,8 +15,8 @@ export default function PatientDashboard() {
<Sidebar> <Sidebar>
<div className="space-y-6"> <div className="space-y-6">
<div> <div>
<h1 className="text-3xl font-bold text-gray-900">Dashboard</h1> <h1 className="text-3xl font-bold text-foreground">Dashboard</h1>
<p className="text-gray-600"> <p className="text-muted-foreground">
Bem-vindo ao seu portal de consultas médicas Bem-vindo ao seu portal de consultas médicas
</p> </p>
</div> </div>
@ -72,15 +72,15 @@ export default function PatientDashboard() {
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<Link href="/patient/schedule"> <Link href="/patient/schedule">
<Button className="w-full justify-start bg-blue-600 text-white hover:bg-blue-700"> <Button className="w-full justify-start">
<User className="mr-2 h-4 w-4 text-white" /> <User className="mr-2 h-4 w-4" />
Agendar Nova Consulta Agendar Nova Consulta
</Button> </Button>
</Link> </Link>
<Link href="/patient/appointments"> <Link href="/patient/appointments">
<Button <Button
variant="outline" variant="secondary"
className="w-full justify-start bg-transparent bg-blue-600 hover:bg-blue-700 text-white" className="w-full justify-start"
> >
<Calendar className="mr-2 h-4 w-4" /> <Calendar className="mr-2 h-4 w-4" />
Ver Minhas Consultas Ver Minhas Consultas
@ -89,7 +89,7 @@ export default function PatientDashboard() {
<Link href="/patient/profile"> <Link href="/patient/profile">
<Button <Button
variant="outline" variant="outline"
className="w-full justify-start bg-transparent" className="w-full justify-start"
> >
<User className="mr-2 h-4 w-4" /> <User className="mr-2 h-4 w-4" />
Atualizar Dados Atualizar Dados
@ -105,24 +105,24 @@ export default function PatientDashboard() {
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="space-y-4"> <div className="space-y-4">
<div className="flex items-center justify-between p-3 bg-blue-50 rounded-lg"> <div className="flex items-center justify-between p-3 bg-muted rounded-lg">
<div> <div>
<p className="font-medium">Dr. Silva</p> <p className="font-medium">Dr. Silva</p>
<p className="text-sm text-gray-600">Cardiologia</p> <p className="text-sm text-muted-foreground">Cardiologia</p>
</div> </div>
<div className="text-right"> <div className="text-right">
<p className="font-medium">15 Jan</p> <p className="font-medium">15 Jan</p>
<p className="text-sm text-gray-600">14:30</p> <p className="text-sm text-muted-foreground">14:30</p>
</div> </div>
</div> </div>
<div className="flex items-center justify-between p-3 bg-green-50 rounded-lg"> <div className="flex items-center justify-between p-3 bg-muted rounded-lg">
<div> <div>
<p className="font-medium">Dra. Santos</p> <p className="font-medium">Dra. Santos</p>
<p className="text-sm text-gray-600">Dermatologia</p> <p className="text-sm text-muted-foreground">Dermatologia</p>
</div> </div>
<div className="text-right"> <div className="text-right">
<p className="font-medium">22 Jan</p> <p className="font-medium">22 Jan</p>
<p className="text-sm text-gray-600">10:00</p> <p className="text-sm text-muted-foreground">10:00</p>
</div> </div>
</div> </div>
</div> </div>

15
app/patient/profile/page.tsx
View File

@ -33,9 +33,8 @@ export default function PatientProfile() {
const { user, isLoading: isAuthLoading } = useAuthLayout({ const { user, isLoading: isAuthLoading } = useAuthLayout({
requiredRole: ["paciente", "admin", "medico", "gestor", "secretaria"], requiredRole: ["paciente", "admin", "medico", "gestor", "secretaria"],
}); });
const [patientData, setPatientData] = useState<PatientProfileData | null>(
null const [patientData, setPatientData] = useState<PatientProfileData | null>(null);
);
const [isEditing, setIsEditing] = useState(false); const [isEditing, setIsEditing] = useState(false);
const [isSaving, setIsSaving] = useState(false); const [isSaving, setIsSaving] = useState(false);
const fileInputRef = useRef<HTMLInputElement>(null); const fileInputRef = useRef<HTMLInputElement>(null);
@ -227,8 +226,8 @@ export default function PatientProfile() {
<div className="space-y-6"> <div className="space-y-6">
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<div> <div>
<h1 className="text-3xl font-bold text-gray-900">Meus Dados</h1> <h1 className="text-3xl font-bold text-foreground">Meus Dados</h1>
<p className="text-gray-600">Gerencie suas informações pessoais</p> <p className="text-muted-foreground">Gerencie suas informações pessoais</p>
</div> </div>
<Button <Button
onClick={() => (isEditing ? handleSave() : setIsEditing(true))} onClick={() => (isEditing ? handleSave() : setIsEditing(true))}
@ -408,15 +407,15 @@ export default function PatientProfile() {
</div> </div>
<div className="space-y-3 pt-4 border-t"> <div className="space-y-3 pt-4 border-t">
<div className="flex items-center text-sm"> <div className="flex items-center text-sm">
<Mail className="mr-2 h-4 w-4 text-gray-500" /> <Mail className="mr-2 h-4 w-4 text-muted-foreground" />
<span className="truncate">{patientData.email}</span> <span className="truncate">{patientData.email}</span>
</div> </div>
<div className="flex items-center text-sm"> <div className="flex items-center text-sm">
<Phone className="mr-2 h-4 w-4 text-gray-500" /> <Phone className="mr-2 h-4 w-4 text-muted-foreground" />
<span>{patientData.phone || "Não informado"}</span> <span>{patientData.phone || "Não informado"}</span>
</div> </div>
<div className="flex items-center text-sm"> <div className="flex items-center text-sm">
<Calendar className="mr-2 h-4 w-4 text-gray-500" /> <Calendar className="mr-2 h-4 w-4 text-muted-foreground" />
<span> <span>
{patientData.birthDate {patientData.birthDate
? new Date(patientData.birthDate).toLocaleDateString( ? new Date(patientData.birthDate).toLocaleDateString(

15
app/patient/register/page.tsx
View File

@ -85,19 +85,18 @@ export default function PatientRegister() {
} }
return ( return (
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 py-8 px-4"> <div className="min-h-screen bg-background py-8 px-4">
<div className="max-w-2xl mx-auto"> <div className="max-w-2xl mx-auto">
<div className="mb-6"> <div className="mb-6">
<Link href="/" className="inline-flex items-center text-blue-600 hover:text-blue-800"> <Link href="/" className="inline-flex items-center text-primary hover:text-primary/90">
<ArrowLeft className="w-4 h-4 mr-2" /> <ArrowLeft className="w-4 h-4 mr-2" />
Voltar ao início Voltar ao início
</Link> </Link>
</div> </div>
<Card> <Card>
<CardHeader className="text-center"> <CardHeader className="text-center">
<CardTitle className="text-2xl">Crie sua Conta de Paciente</CardTitle> <CardTitle className="text-2xl text-foreground">Crie sua Conta de Paciente</CardTitle>
<CardDescription>Preencha seus dados para acessar o portal MedConnect</CardDescription> <CardDescription className="text-muted-foreground">Preencha seus dados para acessar o portal MedConnect</CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<form onSubmit={handleRegister} className="space-y-4"> <form onSubmit={handleRegister} className="space-y-4">
@ -172,9 +171,9 @@ export default function PatientRegister() {
</form> </form>
<div className="mt-6 text-center"> <div className="mt-6 text-center">
<p className="text-sm text-gray-600"> <p className="text-sm">
Já tem uma conta?{" "} <span className="text-muted-foreground">Já tem uma conta?</span>{" "}
<Link href="/login" className="text-blue-600 hover:underline"> <Link href="/login" className="text-primary hover:underline font-medium">
Faça login aqui Faça login aqui
</Link> </Link>
</p> </p>

25
app/patient/reports/page.tsx
View File

@ -37,8 +37,9 @@ export default function ReportsPage() {
const [selectedReport, setSelectedReport] = useState<Report | null>(null) const [selectedReport, setSelectedReport] = useState<Report | null>(null)
const [isViewModalOpen, setIsViewModalOpen] = useState(false) const [isViewModalOpen, setIsViewModalOpen] = useState(false)
const [isLoading, setIsLoading] = useState(true) const [isLoading, setIsLoading] = useState(true)
const requiredRole = useMemo(() => ["paciente"], []); const { user, isLoading: isAuthLoading } = useAuthLayout({
const { user, isLoading: isAuthLoading } = useAuthLayout({ requiredRole }); requiredRole: ["paciente", "admin", "medico", "gestor", "secretaria"],
  });
useEffect(() => { useEffect(() => {
@ -131,8 +132,8 @@ export default function ReportsPage() {
<Sidebar> <Sidebar>
<div className="space-y-6"> <div className="space-y-6">
<div> <div>
<h1 className="text-3xl font-bold text-gray-900">Meus Laudos</h1> <h1 className="text-3xl font-bold text-foreground">Meus Laudos</h1>
<p className="text-gray-600 mt-2">Visualize e baixe seus laudos médicos e resultados de exames</p> <p className="text-muted-foreground mt-2">Visualize e baixe seus laudos médicos e resultados de exames</p>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
@ -167,7 +168,7 @@ export default function ReportsPage() {
{availableReports.length > 0 && ( {availableReports.length > 0 && (
<div> <div>
<h2 className="text-xl font-semibold text-gray-900 mb-4">Laudos Disponíveis</h2> <h2 className="text-xl font-semibold text-foreground mb-4">Laudos Disponíveis</h2>
<div className="grid gap-4"> <div className="grid gap-4">
{availableReports.map((report) => ( {availableReports.map((report) => (
<Card key={report.id} className="hover:shadow-md transition-shadow"> <Card key={report.id} className="hover:shadow-md transition-shadow">
@ -192,7 +193,7 @@ export default function ReportsPage() {
</div> </div>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<p className="text-gray-600 mb-4">{report.diagnosis}</p> <p className="text-muted-foreground mb-4">{report.diagnosis}</p>
<div className="flex gap-2"> <div className="flex gap-2">
<Button <Button
variant="outline" variant="outline"
@ -222,7 +223,7 @@ export default function ReportsPage() {
{pendingReports.length > 0 && ( {pendingReports.length > 0 && (
<div> <div>
<h2 className="text-xl font-semibold text-gray-900 mb-4">Laudos Pendentes</h2> <h2 className="text-xl font-semibold text-foreground mb-4">Laudos Pendentes</h2>
<div className="grid gap-4"> <div className="grid gap-4">
{pendingReports.map((report) => ( {pendingReports.map((report) => (
<Card key={report.id} className="opacity-75"> <Card key={report.id} className="opacity-75">
@ -247,8 +248,8 @@ export default function ReportsPage() {
</div> </div>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<p className="text-gray-600 mb-4">{report.diagnosis}</p> <p className="text-muted-foreground mb-4">{report.diagnosis}</p>
<p className="text-sm text-yellow-600 font-medium"> <p className="text-sm text-yellow-600 dark:text-yellow-500 font-medium">
Laudo em processamento. Você será notificado quando estiver disponível. Laudo em processamento. Você será notificado quando estiver disponível.
</p> </p>
</CardContent> </CardContent>
@ -261,9 +262,9 @@ export default function ReportsPage() {
{reports.length === 0 && !isLoading && ( {reports.length === 0 && !isLoading && (
<Card className="text-center py-12"> <Card className="text-center py-12">
<CardContent> <CardContent>
<FileText className="h-12 w-12 text-gray-400 mx-auto mb-4" /> <FileText className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
<h3 className="text-lg font-medium text-gray-900 mb-2">Nenhum laudo encontrado</h3> <h3 className="text-lg font-medium text-foreground mb-2">Nenhum laudo encontrado</h3>
<p className="text-gray-600">Seus laudos médicos aparecerão aqui após a realização de exames.</p> <p className="text-muted-foreground">Seus laudos médicos aparecerão aqui após a realização de exames.</p>
</CardContent> </CardContent>
</Card> </Card>
)} )}

18
app/providers.tsx Normal file
View File

@ -0,0 +1,18 @@
"use client";
import { AccessibilityProvider } from "./context/AccessibilityContext";
import { AppointmentsProvider } from "./context/AppointmentsContext";
import { AccessibilityModal } from "@/components/accessibility-modal";
import { ThemeInitializer } from "@/components/theme-initializer";
export function Providers({ children }: { children: React.ReactNode }) {
return (
<>
<ThemeInitializer />
<AccessibilityProvider>
<AppointmentsProvider>{children}</AppointmentsProvider>
<AccessibilityModal />
</AccessibilityProvider>
</>
);
}

460
app/secretary/appointments/page.tsx
View File

@ -1,6 +1,6 @@
"use client"; "use client";
import { useState, useEffect } from "react"; import { useState, useEffect, useMemo } from "react";
import { import {
Card, Card,
CardContent, CardContent,
@ -11,15 +11,24 @@ import {
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { Dialog } from "@/components/ui/dialog"; import { Dialog } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input"; // Importei o Input
import { Calendar as CalendarShadcn } from "@/components/ui/calendar";
import { Separator } from "@/components/ui/separator";
import { import {
Calendar, Calendar as CalendarIcon,
Clock, Clock,
MapPin, MapPin,
Phone, Phone,
User, User,
Trash2, Trash2,
Pencil, Pencil,
List,
RefreshCw,
Loader2,
Search, // Importei o ícone de busca
} from "lucide-react"; } from "lucide-react";
import { format, parseISO, isValid, isToday, isTomorrow } from "date-fns";
import { ptBR } from "date-fns/locale";
import { toast } from "sonner"; import { toast } from "sonner";
import Link from "next/link"; import Link from "next/link";
import { appointmentsService } from "@/services/appointmentsApi.mjs"; import { appointmentsService } from "@/services/appointmentsApi.mjs";
@ -36,6 +45,9 @@ export default function SecretaryAppointments() {
const [deleteModal, setDeleteModal] = useState(false); const [deleteModal, setDeleteModal] = useState(false);
const [editModal, setEditModal] = useState(false); const [editModal, setEditModal] = useState(false);
// Estado da Busca
const [searchTerm, setSearchTerm] = useState("");
// Estado para o formulário de edição // Estado para o formulário de edição
const [editFormData, setEditFormData] = useState({ const [editFormData, setEditFormData] = useState({
date: "", date: "",
@ -43,15 +55,15 @@ export default function SecretaryAppointments() {
status: "", status: "",
}); });
// Estado de data selecionada
const [selectedDate, setSelectedDate] = useState<Date | undefined>(new Date());
const fetchData = async () => { const fetchData = async () => {
setIsLoading(true); setIsLoading(true);
try { try {
// 1. DEFINIR O PARÂMETRO DE ORDENAÇÃO const queryParams = "order=scheduled_at.asc";
// 'scheduled_at.desc' ordena pela data do agendamento, em ordem descendente (mais recentes primeiro).
const queryParams = "order=scheduled_at.desc";
const [appointmentList, patientList, doctorList] = await Promise.all([ const [appointmentList, patientList, doctorList] = await Promise.all([
// 2. USAR A FUNÇÃO DE BUSCA COM O PARÂMETRO DE ORDENAÇÃO
appointmentsService.search_appointment(queryParams), appointmentsService.search_appointment(queryParams),
patientsService.list(), patientsService.list(),
doctorsService.list(), doctorsService.list(),
@ -82,9 +94,66 @@ export default function SecretaryAppointments() {
useEffect(() => { useEffect(() => {
fetchData(); fetchData();
}, []); // Array vazio garante que a busca ocorra apenas uma vez, no carregamento da página. }, []);
// --- LÓGICA DE EDIÇÃO --- // --- Filtragem e Agrupamento ---
const groupedAppointments = useMemo(() => {
let filteredList = appointments;
// 1. Filtro de Texto (Nome do Paciente ou Médico)
if (searchTerm) {
const lowerTerm = searchTerm.toLowerCase();
filteredList = filteredList.filter(
(apt) =>
apt.patient.full_name.toLowerCase().includes(lowerTerm) ||
apt.doctor.full_name.toLowerCase().includes(lowerTerm)
);
}
// 2. Filtro de Data (se selecionada)
if (selectedDate) {
filteredList = filteredList.filter((apt) => {
if (!apt.scheduled_at) return false;
const iso = apt.scheduled_at.toString();
return iso.startsWith(format(selectedDate, "yyyy-MM-dd"));
});
}
// 3. Agrupamento por dia
return filteredList.reduce((acc: Record<string, any[]>, apt: any) => {
if (!apt.scheduled_at) return acc;
const dateObj = new Date(apt.scheduled_at);
if (!isValid(dateObj)) return acc;
const key = format(dateObj, "yyyy-MM-dd");
if (!acc[key]) acc[key] = [];
acc[key].push(apt);
return acc;
}, {});
}, [appointments, selectedDate, searchTerm]);
// Dias que têm consulta (para destacar no calendário)
const bookedDays = useMemo(
() =>
appointments
.map((apt) =>
apt.scheduled_at ? new Date(apt.scheduled_at) : null
)
.filter((d): d is Date => d !== null && isValid(d)),
[appointments]
);
const formatDisplayDate = (dateString: string) => {
const date = parseISO(dateString);
if (isToday(date)) {
return `Hoje, ${format(date, "dd 'de' MMMM", { locale: ptBR })}`;
}
if (isTomorrow(date)) {
return `Amanhã, ${format(date, "dd 'de' MMMM", { locale: ptBR })}`;
}
return format(date, "EEEE, dd 'de' MMMM", { locale: ptBR });
};
// --- LÓGICA DE EDIÇÃO E DELEÇÃO ---
const handleEdit = (appointment: any) => { const handleEdit = (appointment: any) => {
setSelectedAppointment(appointment); setSelectedAppointment(appointment);
const appointmentDate = new Date(appointment.scheduled_at); const appointmentDate = new Date(appointment.scheduled_at);
@ -122,11 +191,7 @@ export default function SecretaryAppointments() {
}; };
await appointmentsService.update(selectedAppointment.id, updatePayload); await appointmentsService.update(selectedAppointment.id, updatePayload);
await fetchData();
// 3. RECARREGAR OS DADOS APÓS A EDIÇÃO
// Isso garante que a lista permaneça ordenada corretamente se a data for alterada.
fetchData();
setEditModal(false); setEditModal(false);
toast.success("Consulta atualizada com sucesso!"); toast.success("Consulta atualizada com sucesso!");
} catch (error) { } catch (error) {
@ -135,7 +200,6 @@ export default function SecretaryAppointments() {
} }
}; };
// --- LÓGICA DE DELEÇÃO ---
const handleDelete = (appointment: any) => { const handleDelete = (appointment: any) => {
setSelectedAppointment(appointment); setSelectedAppointment(appointment);
setDeleteModal(true); setDeleteModal(true);
@ -156,161 +220,249 @@ export default function SecretaryAppointments() {
} }
}; };
const getStatusBadge = (status: string) => {
switch (status) {
case "requested":
return (
<Badge className="bg-yellow-100 text-yellow-800">Solicitada</Badge>
);
case "confirmed":
return <Badge className="bg-blue-100 text-blue-800">Confirmada</Badge>;
case "checked_in":
return (
<Badge className="bg-indigo-100 text-indigo-800">Check-in</Badge>
);
case "completed":
return <Badge className="bg-green-100 text-green-800">Realizada</Badge>;
case "cancelled":
return <Badge className="bg-red-100 text-red-800">Cancelada</Badge>;
case "no_show":
return (
<Badge className="bg-gray-100 text-gray-800">Não Compareceu</Badge>
);
default:
return <Badge variant="secondary">{status}</Badge>;
}
};
const timeSlots = [
"08:00",
"08:30",
"09:00",
"09:30",
"10:00",
"10:30",
"11:00",
"11:30",
"14:00",
"14:30",
"15:00",
"15:30",
"16:00",
"16:30",
"17:00",
"17:30",
];
const appointmentStatuses = [
"requested",
"confirmed",
"checked_in",
"completed",
"cancelled",
"no_show",
];
return ( return (
<Sidebar> <Sidebar>
<div className="space-y-6"> <div className="space-y-6">
<div className="flex justify-between items-center"> {/* Cabeçalho principal */}
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
<div> <div>
<h1 className="text-3xl font-bold text-gray-900"> <h1 className="text-3xl font-bold text-foreground">
Consultas Agendadas Agenda Médica
</h1> </h1>
<p className="text-gray-600">Gerencie as consultas dos pacientes</p> <p className="text-muted-foreground">
Consultas para os pacientes
</p>
</div> </div>
<Link href="/secretary/schedule"> <Link href="/secretary/schedule">
<Button className="bg-blue-600 hover:bg-blue-700 text-white"> <Button className="bg-primary hover:bg-primary/90 text-primary-foreground">
<Calendar className="mr-2 h-4 w-4 text-white" /> <CalendarIcon className="mr-2 h-4 w-4" />
Agendar Nova Consulta Agendar Nova Consulta
</Button> </Button>
</Link> </Link>
</div> </div>
<div className="grid gap-6"> {/* Barra de Filtros e Ações */}
{isLoading ? ( <div className="flex flex-col md:flex-row justify-between items-center gap-4">
<p>Carregando consultas...</p> <h2 className="text-xl font-semibold capitalize whitespace-nowrap">
) : appointments.length > 0 ? ( {selectedDate
appointments.map((appointment) => ( ? `Agenda de ${format(selectedDate, "dd/MM/yyyy")}`
<Card key={appointment.id}> : "Todas as Consultas"}
<CardHeader> </h2>
<div className="flex justify-between items-start">
<div> <div className="flex flex-col md:flex-row items-center gap-3 w-full md:w-auto">
<CardTitle className="text-lg"> {/* BARRA DE PESQUISA ADICIONADA AQUI */}
{appointment.doctor.full_name} <div className="relative w-full md:w-72">
</CardTitle> <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
<CardDescription> <Input
{appointment.doctor.specialty} type="search"
</CardDescription> placeholder="Buscar paciente ou médico..."
</div> className="pl-9 w-full"
{getStatusBadge(appointment.status)} value={searchTerm}
</div> onChange={(e) => setSearchTerm(e.target.value)}
</CardHeader> />
<CardContent>
<div className="grid md:grid-cols-2 gap-4">
<div className="space-y-3">
<div className="flex items-center text-sm text-gray-800 font-medium">
<User className="mr-2 h-4 w-4 text-gray-600" />
{appointment.patient.full_name}
</div>
<div className="flex items-center text-sm text-gray-600">
<Calendar className="mr-2 h-4 w-4" />
{new Date(appointment.scheduled_at).toLocaleDateString(
"pt-BR",
{ timeZone: "UTC" }
)}
</div>
<div className="flex items-center text-sm text-gray-600">
<Clock className="mr-2 h-4 w-4" />
{new Date(appointment.scheduled_at).toLocaleTimeString(
"pt-BR",
{
hour: "2-digit",
minute: "2-digit",
timeZone: "UTC",
}
)}
</div>
</div>
<div className="space-y-3">
<div className="flex items-center text-sm text-gray-600">
<MapPin className="mr-2 h-4 w-4" />
{appointment.doctor.location || "Local a definir"}
</div>
<div className="flex items-center text-sm text-gray-600">
<Phone className="mr-2 h-4 w-4" />
{appointment.doctor.phone || "N/A"}
</div>
</div>
</div>
<div className="flex gap-2 mt-4 pt-4 border-t">
<Button variant="outline" size="sm" onClick={() => handleEdit(appointment)}>
<Pencil className="mr-2 h-4 w-4" />
Editar
</Button>
<Button variant="outline" size="sm" className="text-red-600 hover:text-red-700 hover:bg-red-50 bg-transparent" onClick={() => handleDelete(appointment)}>
<Trash2 className="mr-2 h-4 w-4" />
Cancelar
</Button>
</div>
</CardContent>
</Card>
))
) : (
<p>Nenhuma consulta encontrada.</p>
)}
</div>
</div> </div>
{/* MODAL DE EDIÇÃO */} <div className="flex gap-2 w-full md:w-auto">
<Dialog open={editModal} onOpenChange={setEditModal}> <Button
{/* ... (código do modal de edição) ... */} onClick={() => {
</Dialog> setSelectedDate(undefined);
setSearchTerm("");
}}
variant="ghost"
size="sm"
className="flex-1 md:flex-none"
>
<List className="mr-2 h-4 w-4" />
Mostrar Todas
</Button>
<Button
onClick={() => fetchData()}
disabled={isLoading}
variant="outline"
size="sm"
className="flex-1 md:flex-none"
>
<RefreshCw
className={`mr-2 h-4 w-4 ${isLoading ? "animate-spin" : ""}`}
/>
Atualizar
</Button>
</div>
</div>
</div>
{/* Modal de Deleção */} {/* Grid com calendário + lista */}
<Dialog open={deleteModal} onOpenChange={setDeleteModal}> <div className="grid lg:grid-cols-3 gap-6">
{/* ... (código do modal de deleção) ... */} {/* Coluna esquerda: calendário */}
</Dialog> <div className="lg:col-span-1">
<Card>
<CardHeader>
<CardTitle className="flex items-center">
<CalendarIcon className="mr-2 h-5 w-5" />
Filtrar por Data
</CardTitle>
<CardDescription>
Selecione um dia para ver os detalhes.
</CardDescription>
</CardHeader>
<CardContent className="flex justify-center p-2">
<CalendarShadcn
mode="single"
selected={selectedDate}
onSelect={setSelectedDate}
modifiers={{ booked: bookedDays }}
modifiersClassNames={{ booked: "bg-primary/20" }}
className="rounded-md border p-2"
locale={ptBR}
/>
</CardContent>
</Card>
</div>
{/* Coluna direita: lista de consultas */}
<div className="lg:col-span-2 space-y-6">
{isLoading ? (
<div className="flex justify-center items-center h-48">
<Loader2 className="h-8 w-8 animate-spin text-primary" />
</div>
) : Object.keys(groupedAppointments).length === 0 ? (
<Card className="flex flex-col items-center justify-center h-48 text-center">
<CardHeader>
<CardTitle>Nenhuma consulta encontrada</CardTitle>
</CardHeader>
<CardContent>
<p className="text-muted-foreground">
{searchTerm
? "Nenhum resultado para a busca."
: selectedDate
? "Não há agendamentos para esta data."
: "Não há consultas agendadas."}
</p>
</CardContent>
</Card>
) : (
Object.entries(groupedAppointments).map(
([date, appointmentsForDay]) => (
<div key={date}>
<h3 className="text-lg font-semibold text-foreground mb-3 capitalize">
{formatDisplayDate(date)}
</h3>
<div className="space-y-4">
{appointmentsForDay.map((appointment: any) => {
const scheduledAtDate = new Date(
appointment.scheduled_at
);
return (
<Card
key={appointment.id}
className="shadow-sm hover:shadow-md transition-shadow"
>
<CardContent className="p-4 grid grid-cols-1 md:grid-cols-3 items-center gap-4">
{/* Coluna 1: Paciente + hora */}
<div className="col-span-1 flex flex-col gap-2">
<div className="font-semibold flex items-center text-foreground">
<User className="mr-2 h-4 w-4 text-primary" />
{appointment.patient.full_name}
</div>
<div className="flex items-center text-sm text-muted-foreground">
<Clock className="mr-2 h-4 w-4" />
{isValid(scheduledAtDate)
? format(scheduledAtDate, "HH:mm")
: "--:--"}
</div>
</div>
{/* Coluna 2: Médico / local / telefone */}
<div className="col-span-1 flex flex-col gap-2">
<div className="flex items-center text-sm text-muted-foreground">
<User className="mr-2 h-4 w-4" />
{appointment.doctor.full_name}
</div>
<div className="flex items-center text-sm text-muted-foreground">
<MapPin className="mr-2 h-4 w-4" />
{appointment.doctor.location ||
"Local a definir"}
</div>
<div className="flex items-center text-sm text-muted-foreground">
<Phone className="mr-2 h-4 w-4" />
{appointment.doctor.phone || "N/A"}
</div>
<div>{getStatusBadge(appointment.status)}</div>
</div>
{/* Coluna 3: Ações */}
<div className="col-span-1 flex justify-start md:justify-end">
<div className="flex gap-2">
<Button
variant="outline"
size="sm"
onClick={() => handleEdit(appointment)}
>
<Pencil className="mr-2 h-4 w-4" />
Editar
</Button>
<Button
variant="destructive"
size="sm"
onClick={() => handleDelete(appointment)}
>
<Trash2 className="mr-2 h-4 w-4" />
Cancelar
</Button>
</div>
</div>
</CardContent>
</Card>
);
})}
</div>
<Separator className="my-6" />
</div>
)
)
)}
</div>
</div>
{/* MODAL DE EDIÇÃO */}
<Dialog open={editModal} onOpenChange={setEditModal}>
{/* Modal de edição permanece o mesmo, adicione o DialogContent se precisar */}
{/* Aqui estou assumindo que você tem o conteúdo do Dialog no seu código original ou em outro lugar, pois ele não estava completo no snippet anterior */}
</Dialog>
{/* Modal de Deleção */}
<Dialog open={deleteModal} onOpenChange={setDeleteModal}>
{/* Modal de deleção permanece o mesmo */}
</Dialog>
</div>
</Sidebar> </Sidebar>
); );
} }
const getStatusBadge = (status: string) => {
switch (status) {
case "requested":
return (
<Badge className="bg-yellow-400/10 text-yellow-400">Solicitada</Badge>
);
case "confirmed":
return <Badge className="bg-primary/10 text-primary">Confirmada</Badge>;
case "checked_in":
return (
<Badge className="bg-indigo-400/10 text-indigo-400">Check-in</Badge>
);
case "completed":
return <Badge className="bg-green-400/10 text-green-400">Realizada</Badge>;
case "cancelled":
return (
<Badge className="bg-destructive/10 text-destructive">Cancelada</Badge>
);
case "no_show":
return (
<Badge className="bg-muted text-foreground">Não Compareceu</Badge>
);
default:
return <Badge variant="secondary">{status}</Badge>;
}
};

30
app/secretary/dashboard/page.tsx
View File

@ -104,8 +104,8 @@ export default function SecretaryDashboard() {
<div className="space-y-6"> <div className="space-y-6">
{/* Cabeçalho */} {/* Cabeçalho */}
<div> <div>
<h1 className="text-3xl font-bold text-gray-900">Dashboard</h1> <h1 className="text-3xl font-bold">Dashboard</h1>
<p className="text-gray-600"> <p className="text-muted-foreground">
Bem-vindo ao seu portal de consultas médicas Bem-vindo ao seu portal de consultas médicas
</p> </p>
</div> </div>
@ -122,7 +122,7 @@ export default function SecretaryDashboard() {
</CardHeader> </CardHeader>
<CardContent> <CardContent>
{loadingAppointments ? ( {loadingAppointments ? (
<div className="text-gray-500 text-sm"> <div className="text-muted-foreground text-sm">
Carregando próxima consulta... Carregando próxima consulta...
</div> </div>
) : firstConfirmed ? ( ) : firstConfirmed ? (
@ -147,7 +147,7 @@ export default function SecretaryDashboard() {
</p> </p>
</> </>
) : ( ) : (
<div className="text-sm text-gray-500"> <div className="text-sm text-muted-foreground">
Nenhuma consulta confirmada encontrada Nenhuma consulta confirmada encontrada
</div> </div>
)} )}
@ -164,12 +164,12 @@ export default function SecretaryDashboard() {
</CardHeader> </CardHeader>
<CardContent> <CardContent>
{loadingAppointments ? ( {loadingAppointments ? (
<div className="text-gray-500 text-sm"> <div className="text-muted-foreground text-sm">
Carregando consultas... Carregando consultas...
</div> </div>
) : nextAgendada ? ( ) : nextAgendada ? (
<> <>
<div className="text-lg font-bold text-gray-900"> <div className="text-lg font-bold">
{new Date(nextAgendada.scheduled_at).toLocaleDateString( {new Date(nextAgendada.scheduled_at).toLocaleDateString(
"pt-BR", "pt-BR",
{ {
@ -199,7 +199,7 @@ export default function SecretaryDashboard() {
</p> </p>
</> </>
) : ( ) : (
<div className="text-sm text-gray-500"> <div className="text-sm text-muted-foreground">
Nenhuma consulta agendada neste mês Nenhuma consulta agendada neste mês
</div> </div>
)} )}
@ -231,8 +231,8 @@ export default function SecretaryDashboard() {
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<Link href="/secretary/schedule"> <Link href="/secretary/schedule">
<Button className="w-full justify-start bg-blue-600 text-white hover:bg-blue-700"> <Button className="w-full justify-start bg-primary text-primary-foreground hover:bg-primary/90">
<User className="mr-2 h-4 w-4 text-white" /> <User className="mr-2 h-4 w-4" />
Agendar Nova Consulta Agendar Nova Consulta
</Button> </Button>
</Link> </Link>
@ -265,9 +265,9 @@ export default function SecretaryDashboard() {
</CardHeader> </CardHeader>
<CardContent> <CardContent>
{loadingPatients ? ( {loadingPatients ? (
<p className="text-sm text-gray-500">Carregando pacientes...</p> <p className="text-sm text-muted-foreground">Carregando pacientes...</p>
) : patients.length === 0 ? ( ) : patients.length === 0 ? (
<p className="text-sm text-gray-500"> <p className="text-sm text-muted-foreground">
Nenhum paciente cadastrado. Nenhum paciente cadastrado.
</p> </p>
) : ( ) : (
@ -275,20 +275,20 @@ export default function SecretaryDashboard() {
{patients.map((patient, index) => ( {patients.map((patient, index) => (
<div <div
key={index} key={index}
className="flex items-center justify-between p-3 bg-blue-50 rounded-lg border border-blue-100" className="flex items-center justify-between p-3 bg-primary/10 rounded-lg border border-primary/20"
> >
<div> <div>
<p className="font-medium text-gray-900"> <p className="font-medium text-foreground">
{patient.full_name || "Sem nome"} {patient.full_name || "Sem nome"}
</p> </p>
<p className="text-sm text-gray-600"> <p className="text-sm text-muted-foreground">
{patient.phone_mobile || {patient.phone_mobile ||
patient.phone1 || patient.phone1 ||
"Sem telefone"} "Sem telefone"}
</p> </p>
</div> </div>
<div className="text-right"> <div className="text-right">
<p className="font-medium text-blue-700"> <p className="font-medium text-primary">
{patient.convenio || "Particular"} {patient.convenio || "Particular"}
</p> </p>
</div> </div>

40
app/secretary/pacientes/[id]/editar/page.tsx
View File

@ -265,7 +265,7 @@ export default function EditarPacientePage() {
return ( return (
<Sidebar> <Sidebar>
{/* O espaçamento foi reduzido aqui: de `p-4 sm:p-6 lg:p-8` para `p-2 sm:p-4 lg:p-6` */} {/* O espaçamento foi reduzido aqui: de `p-4 sm:p-6 lg:p-8` para `p-2 sm:p-4 lg:p-6` */}
<div className="space-y-6 p-2 sm:p-4 lg:p-6 max-w-10xl mx-auto"> {/* Alterado padding responsivo */} <div className="space-y-6 p-2 sm:p-4 lg:p-6 max-w-10xl mx-auto">{/* Alterado padding responsivo */}
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4"> <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<Link href="/secretary/pacientes"> <Link href="/secretary/pacientes">
@ -275,31 +275,29 @@ export default function EditarPacientePage() {
</Button> </Button>
</Link> </Link>
<div> <div>
<h1 className="text-2xl font-bold text-gray-900">Editar Paciente</h1> <h1 className="text-2xl font-bold">Editar Paciente</h1>
<p className="text-gray-600">Atualize as informações do paciente</p> <p className="text-muted-foreground">Atualize as informações do paciente</p>
</div> </div>
</div> </div>
{/* Espaço reservado para anexos ou ações futuras */}
{/* Anexos Section - Movido para fora do cabeçalho para melhor organização e responsividade */}
</div> </div>
<form onSubmit={handleSubmit} className="space-y-8"> <form onSubmit={handleSubmit} className="space-y-8">
{/* Dados Pessoais Section */} {/* Dados Pessoais Section */}
<div className="bg-white rounded-lg border border-gray-200 p-6"> <div className="bg-card rounded-lg border p-6">
<h2 className="text-lg font-semibold text-gray-900 mb-6">Dados Pessoais</h2> <h2 className="text-lg font-semibold mb-6">Dados Pessoais</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{/* Photo upload */} {/* Photo upload */}
<div className="space-y-2 col-span-1 md:col-span-2 lg:col-span-1"> <div className="space-y-2 col-span-1 md:col-span-2 lg:col-span-1">
<Label>Foto do paciente</Label> <Label>Foto do paciente</Label>
<div className="flex flex-col sm:flex-row items-center gap-4"> <div className="flex flex-col sm:flex-row items-center gap-4">
<div className="w-20 h-20 rounded-full bg-gray-100 overflow-hidden flex items-center justify-center"> <div className="w-20 h-20 rounded-full bg-muted overflow-hidden flex items-center justify-center">
{photoUrl ? ( {photoUrl ? (
// eslint-disable-next-line @next/next/no-img-element // eslint-disable-next-line @next/next/no-img-element
<img src={photoUrl} alt="Foto do paciente" className="w-full h-full object-cover" /> <img src={photoUrl} alt="Foto do paciente" className="w-full h-full object-cover" />
) : ( ) : (
<span className="text-gray-400 text-sm text-center">Sem foto</span> <span className="text-muted-foreground text-sm text-center">Sem foto</span>
)} )}
</div> </div>
<div className="flex flex-col sm:flex-row gap-2 mt-2 sm:mt-0"> <div className="flex flex-col sm:flex-row gap-2 mt-2 sm:mt-0">
@ -334,11 +332,11 @@ export default function EditarPacientePage() {
<Label>Sexo *</Label> <Label>Sexo *</Label>
<div className="flex flex-col sm:flex-row gap-4"> <div className="flex flex-col sm:flex-row gap-4">
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<input type="radio" id="Masculino" name="sexo" value="Masculino" checked={formData.sexo === "Masculino"} onChange={(e) => handleInputChange("sexo", e.target.value)} className="w-4 h-4 text-blue-600" /> <input type="radio" id="Masculino" name="sexo" value="Masculino" checked={formData.sexo === "Masculino"} onChange={(e) => handleInputChange("sexo", e.target.value)} className="w-4 h-4 text-primary" />
<Label htmlFor="Masculino">Masculino</Label> <Label htmlFor="Masculino">Masculino</Label>
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<input type="radio" id="Feminino" name="sexo" value="Feminino" checked={formData.sexo === "Feminino"} onChange={(e) => handleInputChange("sexo", e.target.value)} className="w-4 h-4 text-blue-600" /> <input type="radio" id="Feminino" name="sexo" value="Feminino" checked={formData.sexo === "Feminino"} onChange={(e) => handleInputChange("sexo", e.target.value)} className="w-4 h-4 text-primary" />
<Label htmlFor="Feminino">Feminino</Label> <Label htmlFor="Feminino">Feminino</Label>
</div> </div>
</div> </div>
@ -467,8 +465,8 @@ export default function EditarPacientePage() {
</div> </div>
{/* Contact Section */} {/* Contact Section */}
<div className="bg-white rounded-lg border border-gray-200 p-6"> <div className="bg-card rounded-lg border p-6">
<h2 className="text-lg font-semibold text-gray-900 mb-6">Contato</h2> <h2 className="text-lg font-semibold mb-6">Contato</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div className="space-y-2"> <div className="space-y-2">
@ -494,8 +492,8 @@ export default function EditarPacientePage() {
</div> </div>
{/* Address Section */} {/* Address Section */}
<div className="bg-white rounded-lg border border-gray-200 p-6"> <div className="bg-card rounded-lg border p-6">
<h2 className="text-lg font-semibold text-gray-900 mb-6">Endereço</h2> <h2 className="text-lg font-semibold mb-6">Endereço</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div className="space-y-2"> <div className="space-y-2">
@ -569,8 +567,8 @@ export default function EditarPacientePage() {
</div> </div>
{/* Medical Information Section */} {/* Medical Information Section */}
<div className="bg-white rounded-lg border border-gray-200 p-6"> <div className="bg-card rounded-lg border p-6">
<h2 className="text-lg font-semibold text-gray-900 mb-6">Informações Médicas</h2> <h2 className="text-lg font-semibold mb-6">Informações Médicas</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div className="space-y-2"> <div className="space-y-2">
@ -615,8 +613,8 @@ export default function EditarPacientePage() {
</div> </div>
{/* Insurance Information Section */} {/* Insurance Information Section */}
<div className="bg-white rounded-lg border border-gray-200 p-6"> <div className="bg-card rounded-lg border p-6">
<h2 className="text-lg font-semibold text-gray-900 mb-6">Informações de convênio</h2> <h2 className="text-lg font-semibold mb-6">Informações de convênio</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div className="space-y-2"> <div className="space-y-2">
@ -665,7 +663,7 @@ export default function EditarPacientePage() {
Cancelar Cancelar
</Button> </Button>
</Link> </Link>
<Button type="submit" className="bg-blue-600 hover:bg-blue-700 w-full sm:w-auto"> <Button type="submit" className="bg-primary hover:bg-primary/90 w-full sm:w-auto">
<Save className="w-4 h-4 mr-2" /> <Save className="w-4 h-4 mr-2" />
Salvar Alterações Salvar Alterações
</Button> </Button>

22
app/secretary/pacientes/novo/page.tsx
View File

@ -85,7 +85,7 @@ export default function NovoUsuarioPage() {
router.push("/manager/usuario"); router.push("/manager/usuario");
} catch (e: any) { } catch (e: any) {
console.error("Erro ao criar usuário:", e); console.error("Erro ao criar usuário:", e);
setError(e?.message || "Não foi possível criar o usuário. Verifique os dados e tente novamente."); setError(e?.message || "Não foi possível criar o paciente. Verifique os dados e tente novamente.");
} finally { } finally {
setIsSaving(false); setIsSaving(false);
} }
@ -100,10 +100,10 @@ export default function NovoUsuarioPage() {
{/* Cabeçalho da página */} {/* Cabeçalho da página */}
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between border-b pb-4 gap-4"> {/* Ajustado para empilhar em telas pequenas */} <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between border-b pb-4 gap-4"> {/* Ajustado para empilhar em telas pequenas */}
<div> <div>
<h1 className="text-2xl sm:text-3xl font-extrabold text-gray-900">Novo Usuário</h1> {/* Tamanho de texto responsivo */} <h1 className="text-2xl sm:text-3xl font-extrabold text-gray-900">Novo Paciente</h1> {/* Tamanho de texto responsivo */}
<p className="text-sm sm:text-md text-gray-500">Preencha os dados para cadastrar um novo usuário no sistema.</p> {/* Tamanho de texto responsivo */} <p className="text-sm sm:text-md text-gray-500">Preencha os dados para cadastrar um novo paciente no sistema.</p> {/* Tamanho de texto responsivo */}
</div> </div>
<Link href="/manager/usuario"> <Link href="/secretary/pacientes">
<Button variant="outline" className="w-full sm:w-auto">Cancelar</Button> {/* Botão ocupa largura total em telas pequenas */} <Button variant="outline" className="w-full sm:w-auto">Cancelar</Button> {/* Botão ocupa largura total em telas pequenas */}
</Link> </Link>
</div> </div>
@ -153,15 +153,19 @@ export default function NovoUsuarioPage() {
{/* Botões de ação */} {/* Botões de ação */}
<div className="flex flex-col sm:flex-row justify-end gap-4 pt-6 border-t mt-6"> {/* Botões empilhados em telas pequenas */} <div className="flex flex-col sm:flex-row justify-end gap-4 pt-6 border-t mt-6"> {/* Botões empilhados em telas pequenas */}
<Link href="/manager/usuario"> <Link href="/secretary/pacientes">
<Button type="button" variant="outline" disabled={isSaving} className="w-full sm:w-auto"> <Button type="button" variant="outline" disabled={isSaving} className="w-full sm:w-auto">
Cancelar Cancelar
</Button> </Button>
</Link> </Link>
<Button type="submit" className="bg-green-600 hover:bg-green-700 w-full sm:w-auto" disabled={isSaving}> <Link href="/secretary/pacientes">
{isSaving ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Save className="w-4 h-4 mr-2" />} <Button type="submit" className="bg-green-600 hover:bg-green-700 w-full sm:w-auto" disabled={isSaving}>
{isSaving ? "Salvando..." : "Salvar Usuário"}
</Button> {isSaving ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Save className="w-4 h-4 mr-2" />}
{isSaving ? "Salvando..." : "Salvar Paciente"}
</Button>
</Link>
</div> </div>
</form> </form>
</div> </div>

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

@ -15,95 +15,95 @@ import Sidebar from "@/components/Sidebar";
const PAGE_SIZE = 5; const PAGE_SIZE = 5;
export default function PacientesPage() { export default function PacientesPage() {
// --- ESTADOS DE DADOS E GERAL --- // --- ESTADOS DE DADOS E GERAL ---
const [searchTerm, setSearchTerm] = useState(""); const [searchTerm, setSearchTerm] = useState("");
const [convenioFilter, setConvenioFilter] = useState("all"); const [convenioFilter, setConvenioFilter] = useState("all");
const [vipFilter, setVipFilter] = useState("all"); const [vipFilter, setVipFilter] = useState("all");
// Lista completa, carregada da API uma única vez // Lista completa, carregada da API uma única vez
const [allPatients, setAllPatients] = useState<any[]>([]); const [allPatients, setAllPatients] = useState<any[]>([]);
// Lista após a aplicação dos filtros (base para a paginação) // Lista após a aplicação dos filtros (base para a paginação)
const [filteredPatients, setFilteredPatients] = useState<any[]>([]); const [filteredPatients, setFilteredPatients] = useState<any[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
// --- ESTADOS DE PAGINAÇÃO --- // --- ESTADOS DE PAGINAÇÃO ---
const [page, setPage] = useState(1); const [page, setPage] = useState(1);
// CÁLCULO DA PAGINAÇÃO // CÁLCULO DA PAGINAÇÃO
const totalPages = Math.ceil(filteredPatients.length / PAGE_SIZE); const totalPages = Math.ceil(filteredPatients.length / PAGE_SIZE);
const startIndex = (page - 1) * PAGE_SIZE; const startIndex = (page - 1) * PAGE_SIZE;
const endIndex = startIndex + PAGE_SIZE; const endIndex = startIndex + PAGE_SIZE;
// Pacientes a serem exibidos na tabela (aplicando a paginação) // Pacientes a serem exibidos na tabela (aplicando a paginação)
const currentPatients = filteredPatients.slice(startIndex, endIndex); const currentPatients = filteredPatients.slice(startIndex, endIndex);
// --- ESTADOS DE DIALOGS --- // --- ESTADOS DE DIALOGS ---
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false); const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
const [patientToDelete, setPatientToDelete] = useState<string | null>(null); const [patientToDelete, setPatientToDelete] = useState<string | null>(null);
const [detailsDialogOpen, setDetailsDialogOpen] = useState(false); const [detailsDialogOpen, setDetailsDialogOpen] = useState(false);
const [patientDetails, setPatientDetails] = useState<any | null>(null); const [patientDetails, setPatientDetails] = useState<any | null>(null);
// --- FUNÇÕES DE LÓGICA --- // --- FUNÇÕES DE LÓGICA ---
// 1. Função para carregar TODOS os pacientes da API // 1. Função para carregar TODOS os pacientes da API
const fetchAllPacientes = useCallback( const fetchAllPacientes = useCallback(
async () => { async () => {
setLoading(true); setLoading(true);
setError(null); setError(null);
try { try {
// Como o backend retorna um array, chamamos sem paginação // Como o backend retorna um array, chamamos sem paginação
const res = await patientsService.list(); const res = await patientsService.list();
const mapped = res.map((p: any) => ({ const mapped = res.map((p: any) => ({
id: String(p.id ?? ""), id: String(p.id ?? ""),
nome: p.full_name ?? "—", nome: p.full_name ?? "—",
telefone: p.phone_mobile ?? p.phone1 ?? "—", telefone: p.phone_mobile ?? p.phone1 ?? "—",
cidade: p.city ?? "—", cidade: p.city ?? "—",
estado: p.state ?? "—", estado: p.state ?? "—",
// Formate as datas se necessário, aqui usamos como string // Formate as datas se necessário, aqui usamos como string
ultimoAtendimento: p.last_visit_at?.split('T')[0] ?? "—", ultimoAtendimento: p.last_visit_at?.split('T')[0] ?? "—",
proximoAtendimento: p.next_appointment_at?.split('T')[0] ?? "—", proximoAtendimento: p.next_appointment_at?.split('T')[0] ?? "—",
vip: Boolean(p.vip ?? false), vip: Boolean(p.vip ?? false),
convenio: p.convenio ?? "Particular", // Define um valor padrão convenio: p.convenio ?? "Particular", // Define um valor padrão
status: p.status ?? undefined, status: p.status ?? undefined,
})); }));
setAllPatients(mapped); setAllPatients(mapped);
} catch (e: any) { } catch (e: any) {
console.error(e); console.error(e);
setError(e?.message || "Erro ao buscar pacientes"); setError(e?.message || "Erro ao buscar pacientes");
} finally { } finally {
setLoading(false); setLoading(false);
} }
}, []); }, []);
// 2. Efeito para aplicar filtros e calcular a lista filtrada (chama-se quando allPatients ou filtros mudam) // 2. Efeito para aplicar filtros e calcular a lista filtrada (chama-se quando allPatients ou filtros mudam)
useEffect(() => { useEffect(() => {
const filtered = allPatients.filter((patient) => { const filtered = allPatients.filter((patient) => {
// Filtro por termo de busca (Nome ou Telefone) // Filtro por termo de busca (Nome ou Telefone)
const matchesSearch = const matchesSearch =
patient.nome?.toLowerCase().includes(searchTerm.toLowerCase()) || patient.nome?.toLowerCase().includes(searchTerm.toLowerCase()) ||
patient.telefone?.includes(searchTerm); patient.telefone?.includes(searchTerm);
// Filtro por Convênio // Filtro por Convênio
const matchesConvenio = const matchesConvenio =
convenioFilter === "all" || convenioFilter === "all" ||
patient.convenio === convenioFilter; patient.convenio === convenioFilter;
// Filtro por VIP // Filtro por VIP
const matchesVip = const matchesVip =
vipFilter === "all" || vipFilter === "all" ||
(vipFilter === "vip" && patient.vip) || (vipFilter === "vip" && patient.vip) ||
(vipFilter === "regular" && !patient.vip); (vipFilter === "regular" && !patient.vip);
return matchesSearch && matchesConvenio && matchesVip; return matchesSearch && matchesConvenio && matchesVip;
}); });
setFilteredPatients(filtered); setFilteredPatients(filtered);
// Garante que a página atual seja válida após a filtragem // Garante que a página atual seja válida após a filtragem
setPage(1); setPage(1);
}, [allPatients, searchTerm, convenioFilter, vipFilter]); }, [allPatients, searchTerm, convenioFilter, vipFilter]);
// 3. Efeito inicial para buscar os pacientes // 3. Efeito inicial para buscar os pacientes
useEffect(() => { useEffect(() => {
@ -111,18 +111,18 @@ export default function PacientesPage() {
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, []); }, []);
// --- LÓGICA DE AÇÕES (DELETAR / VER DETALHES) --- // --- LÓGICA DE AÇÕES (DELETAR / VER DETALHES) ---
const openDetailsDialog = async (patientId: string) => { const openDetailsDialog = async (patientId: string) => {
setDetailsDialogOpen(true); setDetailsDialogOpen(true);
setPatientDetails(null); setPatientDetails(null);
try { try {
const res = await patientsService.getById(patientId); const res = await patientsService.getById(patientId);
setPatientDetails(Array.isArray(res) ? res[0] : res); // Supondo que retorne um array com um item setPatientDetails(Array.isArray(res) ? res[0] : res); // Supondo que retorne um array com um item
} catch (e: any) { } catch (e: any) {
setPatientDetails({ error: e?.message || "Erro ao buscar detalhes" }); setPatientDetails({ error: e?.message || "Erro ao buscar detalhes" });
} }
}; };
const handleDeletePatient = async (patientId: string) => { const handleDeletePatient = async (patientId: string) => {
try { try {
@ -149,7 +149,7 @@ export default function PacientesPage() {
{/* Header (Responsividade OK) */} {/* Header (Responsividade OK) */}
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4"> <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
<div> <div>
<h1 className="text-xl md:text-2xl font-bold text-foreground"> <h1 className="text-xl md:text-2xl font-bold">
Pacientes Pacientes
</h1> </h1>
<p className="text-muted-foreground text-sm md:text-base"> <p className="text-muted-foreground text-sm md:text-base">
@ -158,7 +158,7 @@ export default function PacientesPage() {
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
<Link href="/secretary/pacientes/novo" className="w-full md:w-auto"> <Link href="/secretary/pacientes/novo" className="w-full md:w-auto">
<Button className="w-full bg-blue-600 hover:bg-blue-700"> <Button className="w-full bg-primary hover:bg-primary/90">
<Plus className="w-4 h-4 mr-2" /> <Plus className="w-4 h-4 mr-2" />
Adicionar Adicionar
</Button> </Button>
@ -166,22 +166,22 @@ export default function PacientesPage() {
</div> </div>
</div> </div>
{/* Bloco de Filtros (Responsividade APLICADA) */} {/* Bloco de Filtros (Responsividade APLICADA) */}
<div className="flex flex-wrap items-center gap-4 bg-card p-4 rounded-lg border border-border"> <div className="flex flex-wrap items-center gap-4 bg-card p-4 rounded-lg border">
<Filter className="w-5 h-5 text-gray-400" /> <Filter className="w-5 h-5 text-muted-foreground" />
{/* Busca - Ocupa 100% no mobile, depois cresce */} {/* Busca - Ocupa 100% no mobile, depois cresce */}
<input <input
type="text" type="text"
placeholder="Buscar por nome ou telefone..." placeholder="Buscar por nome ou telefone..."
value={searchTerm} value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)} onChange={(e) => setSearchTerm(e.target.value)}
className="w-full sm:flex-grow sm:min-w-[150px] p-2 border rounded-md text-sm" className="w-full sm:flex-grow sm:min-w-[150px] p-2 border rounded-md text-sm"
/> />
{/* Convênio - Ocupa a largura total em telas pequenas, depois se ajusta */} {/* Convênio - Ocupa a largura total em telas pequenas, depois se ajusta */}
<div className="flex items-center gap-2 w-full sm:w-auto sm:flex-grow sm:max-w-[200px]"> <div className="flex items-center gap-2 w-full sm:w-auto sm:flex-grow sm:max-w-[200px]">
<span className="text-sm font-medium text-foreground whitespace-nowrap hidden md:block"> <span className="text-sm font-medium whitespace-nowrap hidden md:block">
Convênio Convênio
</span> </span>
<Select value={convenioFilter} onValueChange={setConvenioFilter}> <Select value={convenioFilter} onValueChange={setConvenioFilter}>
@ -200,64 +200,64 @@ export default function PacientesPage() {
</Select> </Select>
</div> </div>
{/* VIP - Ocupa a largura total em telas pequenas, depois se ajusta */} {/* VIP - Ocupa a largura total em telas pequenas, depois se ajusta */}
<div className="flex items-center gap-2 w-full sm:w-auto sm:flex-grow sm:max-w-[150px]"> <div className="flex items-center gap-2 w-full sm:w-auto sm:flex-grow sm:max-w-[150px]">
<span className="text-sm font-medium text-foreground whitespace-nowrap hidden md:block">VIP</span> <span className="text-sm font-medium whitespace-nowrap hidden md:block">VIP</span>
<Select value={vipFilter} onValueChange={setVipFilter}> <Select value={vipFilter} onValueChange={setVipFilter}>
<SelectTrigger className="w-full sm:w-32"> {/* w-full para mobile, w-32 para sm+ */} <SelectTrigger className="w-full sm:w-32"> {/* w-full para mobile, w-32 para sm+ */}
<SelectValue placeholder="VIP" /> <SelectValue placeholder="VIP" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="all">Todos</SelectItem> <SelectItem value="all">Todos</SelectItem>
<SelectItem value="vip">VIP</SelectItem> <SelectItem value="vip">VIP</SelectItem>
<SelectItem value="regular">Regular</SelectItem> <SelectItem value="regular">Regular</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
</div> </div>
{/* --- SEÇÃO DE TABELA (VISÍVEL EM TELAS MAIORES OU IGUAIS A MD) --- */} {/* --- SEÇÃO DE TABELA (VISÍVEL EM TELAS MAIORES OU IGUAIS A MD) --- */}
{/* Garantir que a tabela se esconda em telas menores e apareça em MD+ */} {/* Garantir que a tabela se esconda em telas menores e apareça em MD+ */}
<div className="bg-white rounded-lg border border-gray-200 shadow-md hidden md:block"> <div className="bg-card rounded-lg border shadow-md hidden md:block">
<div className="overflow-x-auto"> <div className="overflow-x-auto">
{" "} {" "}
{/* Permite rolagem horizontal se a tabela for muito larga */} {/* Permite rolagem horizontal se a tabela for muito larga */}
{error ? ( {error ? (
<div className="p-6 text-red-600">{`Erro ao carregar pacientes: ${error}`}</div> <div className="p-6 text-destructive">{`Erro ao carregar pacientes: ${error}`}</div>
) : loading ? ( ) : loading ? (
<div className="p-6 text-center text-gray-500 flex items-center justify-center"> <div className="p-6 text-center text-muted-foreground flex items-center justify-center">
<Loader2 className="w-6 h-6 mr-2 animate-spin text-green-600" />{" "} <Loader2 className="w-6 h-6 mr-2 animate-spin text-primary" />{" "}
Carregando pacientes... Carregando pacientes...
</div> </div>
) : ( ) : (
<table className="w-full min-w-[650px]"> <table className="w-full min-w-[650px]">
{" "} {" "}
{/* min-w para evitar que a tabela se contraia demais */} {/* min-w para evitar que a tabela se contraia demais */}
<thead className="bg-gray-50 border-b border-gray-200"> <thead className="bg-muted border-b">
<tr> <tr>
<th className="text-left p-4 font-medium text-gray-700 w-[20%]"> <th className="text-left p-4 font-medium text-muted-foreground w-[20%]">
Nome Nome
</th> </th>
{/* Ajustes de visibilidade de colunas para diferentes breakpoints */} {/* Ajustes de visibilidade de colunas para diferentes breakpoints */}
<th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden sm:table-cell"> <th className="text-left p-4 font-medium text-muted-foreground w-[15%] hidden sm:table-cell">
Telefone Telefone
</th> </th>
<th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden md:table-cell"> <th className="text-left p-4 font-medium text-muted-foreground w-[15%] hidden md:table-cell">
Cidade / Estado Cidade / Estado
</th> </th>
<th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden sm:table-cell"> <th className="text-left p-4 font-medium text-muted-foreground w-[15%] hidden sm:table-cell">
Convênio Convênio
</th> </th>
<th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden lg:table-cell"> <th className="text-left p-4 font-medium text-muted-foreground w-[15%] hidden lg:table-cell">
Último atendimento Último atendimento
</th> </th>
<th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden lg:table-cell"> <th className="text-left p-4 font-medium text-muted-foreground w-[15%] hidden lg:table-cell">
Próximo atendimento Próximo atendimento
</th> </th>
<th className="text-left p-4 font-medium text-gray-700 w-[5%]"> <th className="text-left p-4 font-medium text-muted-foreground w-[5%]">
Ações Ações
</th> </th>
</tr> </tr>
@ -265,7 +265,7 @@ export default function PacientesPage() {
<tbody> <tbody>
{currentPatients.length === 0 ? ( {currentPatients.length === 0 ? (
<tr> <tr>
<td colSpan={7} className="p-8 text-center text-gray-500"> <td colSpan={7} className="p-8 text-center text-muted-foreground">
{allPatients.length === 0 {allPatients.length === 0
? "Nenhum paciente cadastrado" ? "Nenhum paciente cadastrado"
: "Nenhum paciente encontrado com os filtros aplicados"} : "Nenhum paciente encontrado com os filtros aplicados"}
@ -275,46 +275,47 @@ export default function PacientesPage() {
currentPatients.map((patient) => ( currentPatients.map((patient) => (
<tr <tr
key={patient.id} key={patient.id}
className="border-b border-gray-100 hover:bg-gray-50" className="border-b hover:bg-muted"
> >
<td className="p-4"> <td className="p-4">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center"> <div className="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center">
<span className="text-blue-600 font-medium text-sm"> <span className="text-primary font-medium text-sm">
{patient.nome?.charAt(0) || "?"} {patient.nome?.charAt(0) || "?"}
</span> </span>
</div> </div>
<span className="font-medium text-gray-900"> <span className="font-medium">
{patient.nome} {patient.nome}
{patient.vip && ( {patient.vip && (
<span className="ml-2 px-2 py-0.5 text-xs font-semibold text-purple-600 bg-purple-100 rounded-full"> <span className="ml-2 px-2 py-0.5 text-xs font-semibold text-purple-500 bg-purple-500/10 rounded-full">
VIP VIP
</span> </span>
)} )}
</span> </span>
</div> </div>
</td> </td>
<td className="p-4 text-gray-600 hidden sm:table-cell"> <td className="p-4 text-muted-foreground hidden sm:table-cell">
{patient.telefone} {patient.telefone}
</td> </td>
<td className="p-4 text-gray-600 hidden md:table-cell">{`${patient.cidade} / ${patient.estado}`}</td> <td className="p-4 text-muted-foreground hidden md:table-cell">{`${patient.cidade} / ${patient.estado}`}</td>
<td className="p-4 text-gray-600 hidden sm:table-cell"> <td className="p-4 text-muted-foreground hidden sm:table-cell">
{patient.convenio} {patient.convenio}
</td> </td>
<td className="p-4 text-gray-600 hidden lg:table-cell"> <td className="p-4 text-muted-foreground hidden lg:table-cell">
{patient.ultimoAtendimento} {patient.ultimoAtendimento}
</td> </td>
<td className="p-4 text-gray-600 hidden lg:table-cell"> <td className="p-4 text-muted-foreground hidden lg:table-cell">
{patient.proximoAtendimento} {patient.proximoAtendimento}
</td> </td>
<td className="p-4"> <td className="p-4">
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<div className="text-blue-600 cursor-pointer"> <Button variant="ghost" className="h-8 w-8 p-0">
Ações <span className="sr-only">Abrir menu</span>
</div> <MoreVertical className="h-4 w-4" />
</Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end"> <DropdownMenuContent align="end">
<DropdownMenuItem <DropdownMenuItem
@ -341,7 +342,7 @@ export default function PacientesPage() {
Marcar consulta Marcar consulta
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem <DropdownMenuItem
className="text-red-600" className="text-destructive"
onClick={() => onClick={() =>
openDeleteDialog(String(patient.id)) openDeleteDialog(String(patient.id))
} }
@ -363,16 +364,16 @@ export default function PacientesPage() {
{/* --- SEÇÃO DE CARDS (VISÍVEL APENAS EM TELAS MENORES QUE MD) --- */} {/* --- SEÇÃO DE CARDS (VISÍVEL APENAS EM TELAS MENORES QUE MD) --- */}
{/* Garantir que os cards apareçam em telas menores e se escondam em MD+ */} {/* Garantir que os cards apareçam em telas menores e se escondam em MD+ */}
<div className="bg-white rounded-lg border border-gray-200 shadow-md p-4 block md:hidden"> <div className="bg-card rounded-lg border shadow-md p-4 block md:hidden">
{error ? ( {error ? (
<div className="p-6 text-red-600">{`Erro ao carregar pacientes: ${error}`}</div> <div className="p-6 text-destructive">{`Erro ao carregar pacientes: ${error}`}</div>
) : loading ? ( ) : loading ? (
<div className="p-6 text-center text-gray-500 flex items-center justify-center"> <div className="p-6 text-center text-muted-foreground flex items-center justify-center">
<Loader2 className="w-6 h-6 mr-2 animate-spin text-green-600" />{" "} <Loader2 className="w-6 h-6 mr-2 animate-spin text-primary" />{" "}
Carregando pacientes... Carregando pacientes...
</div> </div>
) : filteredPatients.length === 0 ? ( ) : filteredPatients.length === 0 ? (
<div className="p-8 text-center text-gray-500"> <div className="p-8 text-center text-muted-foreground">
{allPatients.length === 0 {allPatients.length === 0
? "Nenhum paciente cadastrado" ? "Nenhum paciente cadastrado"
: "Nenhum paciente encontrado com os filtros aplicados"} : "Nenhum paciente encontrado com os filtros aplicados"}
@ -382,21 +383,21 @@ export default function PacientesPage() {
{currentPatients.map((patient) => ( {currentPatients.map((patient) => (
<div <div
key={patient.id} key={patient.id}
className="bg-gray-50 rounded-lg p-4 flex flex-col sm:flex-row justify-between items-start sm:items-center border border-gray-200" className="bg-muted rounded-lg p-4 flex flex-col sm:flex-row justify-between items-start sm:items-center border"
> >
<div className="flex-grow mb-2 sm:mb-0"> <div className="flex-grow mb-2 sm:mb-0">
<div className="font-semibold text-lg text-gray-900 flex items-center"> <div className="font-semibold text-lg flex items-center">
{patient.nome} {patient.nome}
{patient.vip && ( {patient.vip && (
<span className="ml-2 px-2 py-0.5 text-xs font-semibold text-purple-600 bg-purple-100 rounded-full"> <span className="ml-2 px-2 py-0.5 text-xs font-semibold text-purple-500 bg-purple-500/10 rounded-full">
VIP VIP
</span> </span>
)} )}
</div> </div>
<div className="text-sm text-gray-600"> <div className="text-sm text-muted-foreground">
Telefone: {patient.telefone} Telefone: {patient.telefone}
</div> </div>
<div className="text-sm text-gray-600"> <div className="text-sm text-muted-foreground">
Convênio: {patient.convenio} Convênio: {patient.convenio}
</div> </div>
</div> </div>
@ -416,83 +417,83 @@ export default function PacientesPage() {
Ver detalhes Ver detalhes
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem asChild> <DropdownMenuItem asChild>
<Link href={`/secretary/pacientes/${patient.id}/editar`} className="flex items-center w-full"> <Link href={`/secretary/pacientes/${patient.id}/editar`} className="flex items-center w-full">
<Edit className="w-4 h-4 mr-2" /> <Edit className="w-4 h-4 mr-2" />
Editar Editar
</Link> </Link>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem> <DropdownMenuItem>
<Calendar className="w-4 h-4 mr-2" /> <Calendar className="w-4 h-4 mr-2" />
Marcar consulta Marcar consulta
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem className="text-red-600" onClick={() => openDeleteDialog(String(patient.id))}> <DropdownMenuItem className="text-destructive" onClick={() => openDeleteDialog(String(patient.id))}>
<Trash2 className="w-4 h-4 mr-2" /> <Trash2 className="w-4 h-4 mr-2" />
Excluir Excluir
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
</div>
))}
</div>
)}
</div> </div>
))}
</div>
)}
</div>
{/* Paginação */} {/* Paginação */}
{totalPages > 1 && !loading && ( {totalPages > 1 && !loading && (
<div className="flex flex-col sm:flex-row items-center justify-center p-4 border-t border-gray-200"> <div className="flex flex-col sm:flex-row items-center justify-center p-4 border-t">
<div className="flex space-x-2 flex-wrap justify-center"> {/* Adicionado flex-wrap e justify-center para botões da paginação */} <div className="flex space-x-2 flex-wrap justify-center"> {/* Adicionado flex-wrap e justify-center para botões da paginação */}
<Button <Button
onClick={() => setPage((prev) => Math.max(1, prev - 1))} onClick={() => setPage((prev) => Math.max(1, prev - 1))}
disabled={page === 1} disabled={page === 1}
variant="outline" variant="outline"
size="lg" size="lg"
> >
&lt; Anterior &lt; Anterior
</Button> </Button>
{Array.from({ length: totalPages }, (_, index) => index + 1) {Array.from({ length: totalPages }, (_, index) => index + 1)
.slice(Math.max(0, page - 3), Math.min(totalPages, page + 2)) .slice(Math.max(0, page - 3), Math.min(totalPages, page + 2))
.map((pageNumber) => ( .map((pageNumber) => (
<Button <Button
key={pageNumber} key={pageNumber}
onClick={() => setPage(pageNumber)} onClick={() => setPage(pageNumber)}
variant={pageNumber === page ? "default" : "outline"} variant={pageNumber === page ? "default" : "outline"}
size="lg" size="lg"
className={pageNumber === page ? "bg-blue-600 hover:bg-blue-700 text-white" : "text-gray-700"} className={pageNumber === page ? "bg-primary hover:bg-primary/90 text-primary-foreground" : "text-muted-foreground"}
> >
{pageNumber} {pageNumber}
</Button> </Button>
))} ))}
<Button <Button
onClick={() => setPage((prev) => Math.min(totalPages, prev + 1))} onClick={() => setPage((prev) => Math.min(totalPages, prev + 1))}
disabled={page === totalPages} disabled={page === totalPages}
variant="outline" variant="outline"
size="lg" size="lg"
> >
Próximo &gt; Próximo &gt;
</Button> </Button>
</div> </div>
</div> </div>
)} )}
{/* AlertDialogs (Permanecem os mesmos) */} {/* AlertDialogs (Permanecem os mesmos) */}
<AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}> <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
<AlertDialogContent> <AlertDialogContent>
<AlertDialogHeader> <AlertDialogHeader>
<AlertDialogTitle>Confirmar exclusão</AlertDialogTitle> <AlertDialogTitle>Confirmar exclusão</AlertDialogTitle>
<AlertDialogDescription>Tem certeza que deseja excluir este paciente? Esta ação não pode ser desfeita.</AlertDialogDescription> <AlertDialogDescription>Tem certeza que deseja excluir este paciente? Esta ação não pode ser desfeita.</AlertDialogDescription>
</AlertDialogHeader> </AlertDialogHeader>
<AlertDialogFooter> <AlertDialogFooter>
<AlertDialogCancel>Cancelar</AlertDialogCancel> <AlertDialogCancel>Cancelar</AlertDialogCancel>
<AlertDialogAction onClick={() => patientToDelete && handleDeletePatient(patientToDelete)} className="bg-red-600 hover:bg-red-700"> <AlertDialogAction onClick={() => patientToDelete && handleDeletePatient(patientToDelete)} className="bg-destructive hover:bg-destructive/90">
Excluir Excluir
</AlertDialogAction> </AlertDialogAction>
</AlertDialogFooter> </AlertDialogFooter>
</AlertDialogContent> </AlertDialogContent>
</AlertDialog> </AlertDialog>
<AlertDialog <AlertDialog
open={detailsDialogOpen} open={detailsDialogOpen}
@ -503,12 +504,12 @@ export default function PacientesPage() {
<AlertDialogTitle>Detalhes do Paciente</AlertDialogTitle> <AlertDialogTitle>Detalhes do Paciente</AlertDialogTitle>
<AlertDialogDescription> <AlertDialogDescription>
{patientDetails === null ? ( {patientDetails === null ? (
<div className="text-gray-500"> <div className="text-muted-foreground">
<Loader2 className="w-6 h-6 animate-spin mx-auto text-green-600 my-4" /> <Loader2 className="w-6 h-6 animate-spin mx-auto text-primary my-4" />
Carregando... Carregando...
</div> </div>
) : patientDetails?.error ? ( ) : patientDetails?.error ? (
<div className="text-red-600 p-4">{patientDetails.error}</div> <div className="text-destructive p-4">{patientDetails.error}</div>
) : ( ) : (
<div className="grid gap-4 py-4"> <div className="grid gap-4 py-4">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">

84
components/Sidebar.tsx
View File

@ -7,6 +7,7 @@ import Link from "next/link";
import Cookies from "js-cookie"; import Cookies from "js-cookie";
import { api } from "@/services/api.mjs"; import { api } from "@/services/api.mjs";
import { usersService } from "@/services/usersApi.mjs"; // Importando usersService import { usersService } from "@/services/usersApi.mjs"; // Importando usersService
import { useAccessibility } from "@/app/context/AccessibilityContext";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
@ -30,7 +31,6 @@ import {
SquareUser, SquareUser,
ClipboardList, ClipboardList,
Stethoscope, Stethoscope,
ClipboardMinus,
} from "lucide-react"; } from "lucide-react";
import SidebarUserSection from "@/components/ui/userToolTip"; import SidebarUserSection from "@/components/ui/userToolTip";
@ -85,6 +85,7 @@ export default function Sidebar({ children }: SidebarProps) {
const separator = cleanPath.includes('?') ? '&' : '?'; const separator = cleanPath.includes('?') ? '&' : '?';
return `${baseUrl}/storage/v1/object/avatars/${cleanPath}${separator}t=${new Date().getTime()}`; return `${baseUrl}/storage/v1/object/avatars/${cleanPath}${separator}t=${new Date().getTime()}`;
}; };
const { theme, contrast } = useAccessibility();
useEffect(() => { useEffect(() => {
const userInfoString = localStorage.getItem("user_info"); const userInfoString = localStorage.getItem("user_info");
@ -275,6 +276,7 @@ export default function Sidebar({ children }: SidebarProps) {
}; };
const menuItems = SetMenuItems(role); const menuItems = SetMenuItems(role);
const isDefaultMode = theme === "light" && contrast === "normal";
if (!userData) { if (!userData) {
return ( return (
@ -285,17 +287,17 @@ export default function Sidebar({ children }: SidebarProps) {
} }
return ( return (
<div className="min-h-screen bg-gray-50 flex"> <div className="min-h-screen bg-background flex">
<div <div
className={`fixed top-0 h-screen flex flex-col z-30 transition-all duration-300 className={`fixed top-0 h-screen flex flex-col z-30 transition-all duration-300
${sidebarCollapsed ? "w-16" : "w-64"} ${sidebarCollapsed ? "w-16" : "w-64"}
bg-[#123965] text-white`} ${isDefaultMode ? "bg-[#123965] text-white" : "bg-sidebar text-sidebar-foreground"}`}
> >
{/* TOPO */} {/* TOPO */}
<div className="p-4 border-b border-white/10 flex items-center justify-between"> <div className={`p-4 border-b ${isDefaultMode ? "border-white/10" : "border-sidebar-border"} flex items-center justify-between`}>
{!sidebarCollapsed && ( {!sidebarCollapsed && (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="bg-white p-1 rounded-lg"> <div className="bg-background p-1 rounded-lg">
<img <img
src="/Logo MedConnect.png" src="/Logo MedConnect.png"
alt="Logo MedConnect" alt="Logo MedConnect"
@ -303,7 +305,7 @@ export default function Sidebar({ children }: SidebarProps) {
/> />
</div> </div>
<span className="font-semibold text-white text-lg"> <span className="font-semibold text-lg">
MedConnect MedConnect
</span> </span>
</div> </div>
@ -313,7 +315,7 @@ export default function Sidebar({ children }: SidebarProps) {
variant="ghost" variant="ghost"
size="sm" size="sm"
onClick={() => setSidebarCollapsed(!sidebarCollapsed)} onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
className="p-1 text-white hover:bg-white/10 cursor-pointer" className={`p-1 ${isDefaultMode ? "text-white hover:bg-white/10" : "hover:bg-sidebar-accent"} cursor-pointer`}
> >
{sidebarCollapsed ? ( {sidebarCollapsed ? (
<ChevronRight className="w-5 h-5" /> <ChevronRight className="w-5 h-5" />
@ -324,7 +326,7 @@ export default function Sidebar({ children }: SidebarProps) {
</div> </div>
{/* MENU */} {/* MENU */}
<nav className="flex-1 p-3 overflow-y-auto"> <nav className="flex-1 px-3 py-6 overflow-y-auto flex flex-col gap-2">
{menuItems.map((item) => { {menuItems.map((item) => {
const Icon = item.icon; const Icon = item.icon;
const isActive = pathname === item.href; const isActive = pathname === item.href;
@ -333,13 +335,13 @@ export default function Sidebar({ children }: SidebarProps) {
<Link key={item.label} href={item.href}> <Link key={item.label} href={item.href}>
<div <div
className={` className={`
flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors flex items-center gap-3 px-3 py-2 rounded-lg transition-colors
${ ${
isActive isActive
? "bg-white/20 text-white font-semibold" ? `${isDefaultMode ? "bg-white/20 text-white font-semibold" : "bg-sidebar-primary text-sidebar-primary-foreground font-semibold"}`
: "text-white/80 hover:bg-white/10 hover:text-white" : `${isDefaultMode ? "text-white/80 hover:bg-white/10 hover:text-white" : "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"}`
} }
`} `}
> >
<Icon className="w-5 h-5 flex-shrink-0" /> <Icon className="w-5 h-5 flex-shrink-0" />
{!sidebarCollapsed && ( {!sidebarCollapsed && (
@ -351,8 +353,15 @@ export default function Sidebar({ children }: SidebarProps) {
})} })}
</nav> </nav>
{/* PERFIL ORIGINAL + NOME BRANCO */} {/* PERFIL ORIGINAL + NOME BRANCO - CORREÇÃO DE ALINHAMENTO AQUI */}
<div className="mt-auto p-3 border-t border-white/10"> <div
className={`
mt-auto p-3 border-t
${isDefaultMode ? "border-white/10" : "border-sidebar-border"}
flex flex-col
${sidebarCollapsed ? "items-center justify-center" : "items-stretch"}
`}
>
<SidebarUserSection <SidebarUserSection
userData={userData} userData={userData}
sidebarCollapsed={sidebarCollapsed} sidebarCollapsed={sidebarCollapsed}
@ -368,28 +377,27 @@ export default function Sidebar({ children }: SidebarProps) {
}`} }`}
> >
<main className="flex-1 p-4 md:p-6">{children}</main> <main className="flex-1 p-4 md:p-6">{children}</main>
<Dialog open={showLogoutDialog} onOpenChange={setShowLogoutDialog}>
<DialogContent className="sm:max-w-md">
<DialogHeader>
<DialogTitle>Confirmar Saída</DialogTitle>
<DialogDescription>
Deseja realmente sair do sistema? Você precisará fazer login
novamente.
</DialogDescription>
</DialogHeader>
<DialogFooter className="flex gap-2">
<Button variant="outline" onClick={cancelLogout}>
Cancelar
</Button>
<Button variant="destructive" onClick={confirmLogout}>
<LogOut className="mr-2 h-4 w-4" />
Sair
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</div> </div>
<Dialog open={showLogoutDialog} onOpenChange={setShowLogoutDialog}>
<DialogContent className="sm:max-w-md">
<DialogHeader>
<DialogTitle>Confirmar Saída</DialogTitle>
<DialogDescription>
Deseja realmente sair do sistema? Você precisará fazer login
novamente.
</DialogDescription>
</DialogHeader>
<DialogFooter className="flex gap-2">
<Button variant="outline" onClick={cancelLogout}>
Cancelar
</Button>
<Button variant="destructive" onClick={confirmLogout}>
<LogOut className="mr-2 h-4 w-4" />
Sair
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
 
</div> </div>
); );
} }

818
components/schedule/schedule-form.tsx
View File

@ -19,12 +19,12 @@ import {
import { Textarea } from "@/components/ui/textarea"; import { Textarea } from "@/components/ui/textarea";
import { Calendar as CalendarShadcn } from "@/components/ui/calendar"; import { Calendar as CalendarShadcn } from "@/components/ui/calendar";
import { format, addDays } from "date-fns"; import { format, addDays } from "date-fns";
import { User, StickyNote, Check, ChevronsUpDown } from "lucide-react"; import { User, StickyNote, CalendarDays, Stethoscope, Check, ChevronsUpDown } from "lucide-react";
import { smsService } from "@/services/Sms.mjs"; import { smsService } from "@/services/Sms.mjs";
import { toast } from "@/hooks/use-toast"; import { toast } from "@/hooks/use-toast";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
// Componentes do Combobox (Barra de Pesquisa) // --- Importações do Combobox ---
import { import {
Command, Command,
CommandEmpty, CommandEmpty,
@ -40,19 +40,21 @@ import {
} from "@/components/ui/popover"; } from "@/components/ui/popover";
export default function ScheduleForm() { export default function ScheduleForm() {
// Estado do usuário e role // --- ESTADOS ---
const [role, setRole] = useState<string>("paciente") const [role, setRole] = useState<string>("paciente");
const [userId, setUserId] = useState<string | null>(null) const [userId, setUserId] = useState<string | null>(null);
// Listas e seleções // Estados de Paciente
const [patients, setPatients] = useState<any[]>([]); const [patients, setPatients] = useState<any[]>([]);
const [selectedPatient, setSelectedPatient] = useState(""); const [selectedPatient, setSelectedPatient] = useState("");
const [openPatientCombobox, setOpenPatientCombobox] = useState(false); const [openPatientCombobox, setOpenPatientCombobox] = useState(false);
// Estados de Médico
const [doctors, setDoctors] = useState<any[]>([]); const [doctors, setDoctors] = useState<any[]>([]);
const [selectedDoctor, setSelectedDoctor] = useState(""); const [selectedDoctor, setSelectedDoctor] = useState("");
const [openDoctorCombobox, setOpenDoctorCombobox] = useState(false); // Novo estado para médico const [openDoctorCombobox, setOpenDoctorCombobox] = useState(false);
// Estados de Agendamento
const [selectedDate, setSelectedDate] = useState(""); const [selectedDate, setSelectedDate] = useState("");
const [selectedTime, setSelectedTime] = useState(""); const [selectedTime, setSelectedTime] = useState("");
const [notes, setNotes] = useState(""); const [notes, setNotes] = useState("");
@ -60,187 +62,180 @@ export default function ScheduleForm() {
const [loadingDoctors, setLoadingDoctors] = useState(true); const [loadingDoctors, setLoadingDoctors] = useState(true);
const [loadingSlots, setLoadingSlots] = useState(false); const [loadingSlots, setLoadingSlots] = useState(false);
// Outras configs // Configurações
const [tipoConsulta] = useState("presencial") const [tipoConsulta] = useState("presencial");
const [duracao] = useState("30") const [duracao] = useState("30");
const [disponibilidades, setDisponibilidades] = useState<any[]>([]) const [disponibilidades, setDisponibilidades] = useState<any[]>([]);
const [availabilityCounts, setAvailabilityCounts] = useState<Record<string, number>>({}) const [availabilityCounts, setAvailabilityCounts] = useState<Record<string, number>>({});
const [tooltip, setTooltip] = useState<{ x: number; y: number; text: string } | null>(null) const [tooltip, setTooltip] = useState<{ x: number; y: number; text: string } | null>(null);
const calendarRef = useRef<HTMLDivElement | null>(null)
const calendarRef = useRef<HTMLDivElement | null>(null);
// Funções auxiliares // --- HELPER FUNCTIONS ---
const getWeekdayNumber = (weekday: string) => const getWeekdayNumber = (weekday: string) =>
["monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday"].indexOf(weekday.toLowerCase()) + 1 ["monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday"].indexOf(weekday.toLowerCase()) + 1;
const getBrazilDate = (date: Date) => const getBrazilDate = (date: Date) =>
new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), 12, 0, 0)) new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), 12, 0, 0));
// 🔹 Buscar dados do usuário e role // --- EFFECTS ---
useEffect(() => { useEffect(() => {
;(async () => { (async () => {
try { try {
const me = await usersService.getMe() const me = await usersService.getMe();
const currentRole = me?.roles?.[0] || "paciente" const currentRole = me?.roles?.[0] || "paciente";
setRole(currentRole) setRole(currentRole);
setUserId(me?.user?.id || null) setUserId(me?.user?.id || null);
if (["secretaria", "gestor", "admin"].includes(currentRole)) { if (["secretaria", "gestor", "admin"].includes(currentRole)) {
const pats = await patientsService.list() const pats = await patientsService.list();
setPatients(pats || []) setPatients(pats || []);
} }
} catch (err) { } catch (err) {
console.error("Erro ao carregar usuário:", err) console.error("Erro ao carregar usuário:", err);
} }
})() })();
}, []) }, []);
// 🔹 Buscar médicos
const fetchDoctors = useCallback(async () => { const fetchDoctors = useCallback(async () => {
setLoadingDoctors(true) setLoadingDoctors(true);
try { try {
const data = await doctorsService.list() const data = await doctorsService.list();
setDoctors(data || []) setDoctors(data || []);
} catch (err) { } catch (err) {
console.error("Erro ao buscar médicos:", err) console.error("Erro ao buscar médicos:", err);
toast({ title: "Erro", description: "Não foi possível carregar médicos." }) toast({ title: "Erro", description: "Não foi possível carregar médicos." });
} finally { } finally {
setLoadingDoctors(false) setLoadingDoctors(false);
} }
}, []) }, []);
useEffect(() => { useEffect(() => {
fetchDoctors() fetchDoctors();
}, [fetchDoctors]) }, [fetchDoctors]);
// 🔹 Buscar disponibilidades
const loadDoctorDisponibilidades = useCallback(async (doctorId?: string) => { const loadDoctorDisponibilidades = useCallback(async (doctorId?: string) => {
if (!doctorId) return if (!doctorId) return;
try { try {
const disp = await AvailabilityService.listById(doctorId) const disp = await AvailabilityService.listById(doctorId);
setDisponibilidades(disp || []) setDisponibilidades(disp || []);
await computeAvailabilityCountsPreview(doctorId, disp || []) await computeAvailabilityCountsPreview(doctorId, disp || []);
} catch (err) { } catch (err) {
console.error("Erro ao buscar disponibilidades:", err) console.error("Erro ao buscar disponibilidades:", err);
setDisponibilidades([]) setDisponibilidades([]);
} }
}, []) }, []);
const computeAvailabilityCountsPreview = async ( const computeAvailabilityCountsPreview = async (doctorId: string, dispList: any[]) => {
doctorId: string,
dispList: any[]
) => {
try { try {
const today = new Date() const today = new Date();
const start = format(today, "yyyy-MM-dd") const start = format(today, "yyyy-MM-dd");
const endDate = addDays(today, 90) const endDate = addDays(today, 90);
const end = format(endDate, "yyyy-MM-dd") const end = format(endDate, "yyyy-MM-dd");
const appointments = await appointmentsService.search_appointment( const appointments = await appointmentsService.search_appointment(
`doctor_id=eq.${doctorId}&scheduled_at=gte.${start}T00:00:00Z&scheduled_at=lt.${end}T23:59:59Z`, `doctor_id=eq.${doctorId}&scheduled_at=gte.${start}T00:00:00Z&scheduled_at=lt.${end}T23:59:59Z`
) );
const apptsByDate: Record<string, number> = {} const apptsByDate: Record<string, number> = {};
;(appointments || []).forEach((a: any) => { (appointments || []).forEach((a: any) => {
const d = String(a.scheduled_at).split("T")[0] const d = String(a.scheduled_at).split("T")[0];
apptsByDate[d] = (apptsByDate[d] || 0) + 1 apptsByDate[d] = (apptsByDate[d] || 0) + 1;
}) });
const counts: Record<string, number> = {} const counts: Record<string, number> = {};
for (let i = 0; i <= 90; i++) { for (let i = 0; i <= 90; i++) {
const d = addDays(today, i) const d = addDays(today, i);
const key = format(d, "yyyy-MM-dd") const key = format(d, "yyyy-MM-dd");
const dayOfWeek = d.getDay() === 0 ? 7 : d.getDay() const dayOfWeek = d.getDay() === 0 ? 7 : d.getDay();
const dailyDisp = dispList.filter((p) => getWeekdayNumber(p.weekday) === dayOfWeek) const dailyDisp = dispList.filter((p) => getWeekdayNumber(p.weekday) === dayOfWeek);
if (dailyDisp.length === 0) { if (dailyDisp.length === 0) {
counts[key] = 0 counts[key] = 0;
continue continue;
} }
let possible = 0 let possible = 0;
dailyDisp.forEach((p) => { dailyDisp.forEach((p) => {
const [sh, sm] = p.start_time.split(":").map(Number) const [sh, sm] = p.start_time.split(":").map(Number);
const [eh, em] = p.end_time.split(":").map(Number) const [eh, em] = p.end_time.split(":").map(Number);
const startMin = sh * 60 + sm const startMin = sh * 60 + sm;
const endMin = eh * 60 + em const endMin = eh * 60 + em;
const slot = p.slot_minutes || 30 const slot = p.slot_minutes || 30;
if (endMin >= startMin) possible += Math.floor((endMin - startMin) / slot) + 1 if (endMin >= startMin) possible += Math.floor((endMin - startMin) / slot) + 1;
}) });
const occupied = apptsByDate[key] || 0 const occupied = apptsByDate[key] || 0;
counts[key] = Math.max(0, possible - occupied) counts[key] = Math.max(0, possible - occupied);
} }
setAvailabilityCounts(counts) setAvailabilityCounts(counts);
} catch (err) { } catch (err) {
console.error("Erro ao calcular contagens:", err) console.error("Erro ao calcular contagens:", err);
setAvailabilityCounts({}) setAvailabilityCounts({});
} }
} };
// 🔹 Quando médico muda
useEffect(() => { useEffect(() => {
if (selectedDoctor) { if (selectedDoctor) {
loadDoctorDisponibilidades(selectedDoctor) loadDoctorDisponibilidades(selectedDoctor);
} else { } else {
setDisponibilidades([]) setDisponibilidades([]);
setAvailabilityCounts({}) setAvailabilityCounts({});
} }
setSelectedDate("") setSelectedDate("");
setSelectedTime("") setSelectedTime("");
setAvailableTimes([]) setAvailableTimes([]);
}, [selectedDoctor, loadDoctorDisponibilidades]) }, [selectedDoctor, loadDoctorDisponibilidades]);
// 🔹 Buscar horários disponíveis
const fetchAvailableSlots = useCallback(async (doctorId: string, date: string) => { const fetchAvailableSlots = useCallback(async (doctorId: string, date: string) => {
if (!doctorId || !date) return if (!doctorId || !date) return;
setLoadingSlots(true) setLoadingSlots(true);
setAvailableTimes([]) setAvailableTimes([]);
try { try {
const disponibilidades = await AvailabilityService.listById(doctorId) const disponibilidades = await AvailabilityService.listById(doctorId);
const consultas = await appointmentsService.search_appointment( const consultas = await appointmentsService.search_appointment(
`doctor_id=eq.${doctorId}&scheduled_at=gte.${date}T00:00:00Z&scheduled_at=lt.${date}T23:59:59Z`, `doctor_id=eq.${doctorId}&scheduled_at=gte.${date}T00:00:00Z&scheduled_at=lt.${date}T23:59:59Z`
) );
const diaJS = new Date(date).getDay() const diaJS = new Date(date).getDay();
const diaAPI = diaJS === 0 ? 7 : diaJS const diaAPI = diaJS === 0 ? 7 : diaJS;
const disponibilidadeDia = disponibilidades.find((d: any) => getWeekdayNumber(d.weekday) === diaAPI) const disponibilidadeDia = disponibilidades.find((d: any) => getWeekdayNumber(d.weekday) === diaAPI);
if (!disponibilidadeDia) { if (!disponibilidadeDia) {
toast({ title: "Nenhuma disponibilidade", description: "Nenhum horário para este dia." }) toast({ title: "Nenhuma disponibilidade", description: "Nenhum horário para este dia." });
return setAvailableTimes([]) return setAvailableTimes([]);
} }
const [startHour, startMin] = disponibilidadeDia.start_time.split(":").map(Number) const [startHour, startMin] = disponibilidadeDia.start_time.split(":").map(Number);
const [endHour, endMin] = disponibilidadeDia.end_time.split(":").map(Number) const [endHour, endMin] = disponibilidadeDia.end_time.split(":").map(Number);
const slot = disponibilidadeDia.slot_minutes || 30 const slot = disponibilidadeDia.slot_minutes || 30;
const horariosGerados: string[] = [] const horariosGerados: string[] = [];
let atual = new Date(date) let atual = new Date(date);
atual.setHours(startHour, startMin, 0, 0) atual.setHours(startHour, startMin, 0, 0);
const end = new Date(date) const end = new Date(date);
end.setHours(endHour, endMin, 0, 0) end.setHours(endHour, endMin, 0, 0);
while (atual <= end) { while (atual <= end) {
horariosGerados.push(atual.toTimeString().slice(0, 5)) horariosGerados.push(atual.toTimeString().slice(0, 5));
atual = new Date(atual.getTime() + slot * 60000) atual = new Date(atual.getTime() + slot * 60000);
} }
const ocupados = (consultas || []).map((c: any) => String(c.scheduled_at).split("T")[1]?.slice(0, 5)) const ocupados = (consultas || []).map((c: any) => String(c.scheduled_at).split("T")[1]?.slice(0, 5));
const livres = horariosGerados.filter((h) => !ocupados.includes(h)) const livres = horariosGerados.filter((h) => !ocupados.includes(h));
setAvailableTimes(livres) setAvailableTimes(livres);
} catch (err) { } catch (err) {
console.error(err) console.error(err);
toast({ title: "Erro", description: "Falha ao carregar horários." }) toast({ title: "Erro", description: "Falha ao carregar horários." });
} finally { } finally {
setLoadingSlots(false) setLoadingSlots(false);
} }
}, []) }, []);
useEffect(() => { useEffect(() => {
if (selectedDoctor && selectedDate) fetchAvailableSlots(selectedDoctor, selectedDate) if (selectedDoctor && selectedDate) fetchAvailableSlots(selectedDoctor, selectedDate);
}, [selectedDoctor, selectedDate, fetchAvailableSlots]) }, [selectedDoctor, selectedDate, fetchAvailableSlots]);
// 🔹 Submeter agendamento // --- SUBMIT ---
const handleSubmit = async (e: React.FormEvent) => { const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault() e.preventDefault();
const isSecretaryLike = ["secretaria", "admin", "gestor"].includes(role);
const isSecretaryLike = ["secretaria", "admin", "gestor"].includes(role) const patientId = isSecretaryLike ? selectedPatient : userId;
const patientId = isSecretaryLike ? selectedPatient : userId
if (!patientId || !selectedDoctor || !selectedDate || !selectedTime) { if (!patientId || !selectedDoctor || !selectedDate || !selectedTime) {
toast({ title: "Campos obrigatórios", description: "Preencha todos os campos." }) toast({ title: "Campos obrigatórios", description: "Preencha todos os campos." });
return return;
} }
try { try {
@ -251,66 +246,16 @@ export default function ScheduleForm() {
duration_minutes: Number(duracao), duration_minutes: Number(duracao),
notes, notes,
appointment_type: tipoConsulta, appointment_type: tipoConsulta,
} };
await appointmentsService.create(body); await appointmentsService.create(body);
const dateFormatted = selectedDate.split("-").reverse().join("/"); const dateFormatted = selectedDate.split("-").reverse().join("/");
toast({ toast({
title: "Consulta agendada!", title: "Consulta agendada!",
description: `Consulta marcada para ${dateFormatted} às ${selectedTime} com o(a) médico(a) ${ description: `Consulta marcada para ${dateFormatted} às ${selectedTime}.`,
doctors.find((d) => d.id === selectedDoctor)?.full_name || ""
}.`,
}); });
let phoneNumber = "+5511999999999";
try {
if (isSecretaryLike) {
const patient = patients.find((p: any) => p.id === patientId)
const rawPhone = patient?.phone || patient?.phone_mobile || null
if (rawPhone) phoneNumber = rawPhone
} else {
const me = await usersService.getMe()
const rawPhone =
me?.profile?.phone ||
(typeof me?.profile === "object" && "phone_mobile" in me.profile
? (me.profile as any).phone_mobile
: null) ||
(typeof me === "object" && "user_metadata" in me ? (me as any).user_metadata?.phone : null) ||
null
if (rawPhone) phoneNumber = rawPhone
}
if (phoneNumber) {
phoneNumber = phoneNumber.replace(/\D/g, "")
if (!phoneNumber.startsWith("55")) phoneNumber = `55${phoneNumber}`
phoneNumber = `+${phoneNumber}`
}
console.log("📞 Telefone usado:", phoneNumber)
} catch (err) {
console.warn("⚠️ Não foi possível obter telefone do paciente:", err)
}
try {
const smsRes = await smsService.sendSms({
phone_number: phoneNumber,
message: `Lembrete: sua consulta é em ${dateFormatted} às ${selectedTime} na Clínica MediConnect.`,
patient_id: patientId,
})
if (smsRes?.success) {
console.log("✅ SMS enviado com sucesso:", smsRes.message_sid);
} else {
console.warn("⚠️ Falha no envio do SMS:", smsRes);
}
} catch (smsErr) {
console.error("❌ Erro ao enviar SMS:", smsErr);
}
// 🧹 limpa os campos
setSelectedDoctor(""); setSelectedDoctor("");
setSelectedDate(""); setSelectedDate("");
setSelectedTime(""); setSelectedTime("");
@ -322,241 +267,330 @@ export default function ScheduleForm() {
} }
}; };
// 🔹 Tooltip no calendário // --- TOOLTIP ---
useEffect(() => { useEffect(() => {
const cont = calendarRef.current const cont = calendarRef.current;
if (!cont) return if (!cont) return;
const onMove = (ev: MouseEvent) => { const onMove = (ev: MouseEvent) => {
const target = ev.target as HTMLElement | null const target = ev.target as HTMLElement | null;
const btn = target?.closest("button") const btn = target?.closest("button");
if (!btn) return setTooltip(null) if (!btn) return setTooltip(null);
const aria = btn.getAttribute("aria-label") || btn.textContent || "" const aria = btn.getAttribute("aria-label") || btn.textContent || "";
const parsed = new Date(aria) const parsed = new Date(aria);
if (isNaN(parsed.getTime())) return setTooltip(null) if (isNaN(parsed.getTime())) return setTooltip(null);
const key = format(getBrazilDate(parsed), "yyyy-MM-dd") const key = format(getBrazilDate(parsed), "yyyy-MM-dd");
const count = availabilityCounts[key] ?? 0 const count = availabilityCounts[key] ?? 0;
setTooltip({ setTooltip({
x: ev.pageX + 10, x: ev.pageX + 10,
y: ev.pageY + 10, y: ev.pageY + 10,
text: `${count} horário${count !== 1 ? "s" : ""} disponíveis`, text: `${count} horário${count !== 1 ? "s" : ""} disponíveis`,
}) });
} };
const onLeave = () => setTooltip(null) const onLeave = () => setTooltip(null);
cont.addEventListener("mousemove", onMove) cont.addEventListener("mousemove", onMove);
cont.addEventListener("mouseleave", onLeave) cont.addEventListener("mouseleave", onLeave);
return () => { return () => {
cont.removeEventListener("mousemove", onMove) cont.removeEventListener("mousemove", onMove);
cont.removeEventListener("mouseleave", onLeave) cont.removeEventListener("mouseleave", onLeave);
} };
}, [availabilityCounts]) }, [availabilityCounts]);
return ( return (
<div className="py-3 px-2"> <div className="w-full min-h-screen p-4 md:p-6 lg:p-8">
<div className="max-w-7xl mx-auto space-y-3"> <div className="max-w-7xl mx-auto space-y-6">
<div className="space-y-1"> <div className="space-y-1">
<h1 className="text-3xl font-bold text-slate-900">Agendar Consulta</h1> <h1 className="text-2xl md:text-3xl font-bold text-foreground">
<p className="text-slate-600">Selecione o médico, data e horário para sua consulta</p> Agendar Consulta
</h1>
<p className="text-muted-foreground text-sm md:text-base">
Preencha os dados abaixo para marcar seu horário.
</p>
</div> </div>
<div className="grid lg:grid-cols-[1fr,380px] gap-4"> <div className="grid grid-cols-1 xl:grid-cols-[1fr_350px] gap-6">
{/* Coluna do Formulário */}
<form onSubmit={handleSubmit} className="space-y-3"> {/* == ESQUERDA == */}
<Card className="border shadow-sm"> <div className="space-y-6">
<CardHeader className="pb-2">
<CardTitle className="text-lg">Informações Básicas</CardTitle> <div className="grid grid-cols-1 md:grid-cols-2 gap-6 items-start">
</CardHeader>
<CardContent className="space-y-3"> {/* BLOCO 1: SELEÇÃO */}
{["secretaria", "gestor", "admin"].includes(role) && ( <Card className="h-full border shadow-sm">
<CardHeader className="pb-3 border-b bg-muted/20">
<CardTitle className="text-base flex items-center gap-2">
<Stethoscope className="w-4 h-4 text-primary" />
Dados da Consulta
</CardTitle>
</CardHeader>
<CardContent className="space-y-5 pt-5">
{/* COMBOBOX DE PACIENTE */}
{["secretaria", "gestor", "admin"].includes(role) && (
<div className="space-y-2">
<Label className="text-sm font-medium">Selecione o Paciente</Label>
<Popover open={openPatientCombobox} onOpenChange={setOpenPatientCombobox}>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={openPatientCombobox}
className="w-full justify-between"
>
{selectedPatient
? patients.find((p) => p.id === selectedPatient)?.full_name
: "Buscar paciente..."}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
{/* AQUI: align="start" e w igual ao trigger garantem que não invada a lateral */}
<PopoverContent
className="w-[--radix-popover-trigger-width] min-w-0 p-0"
align="start"
side="bottom"
>
<Command>
<CommandInput placeholder="Procurar paciente..." />
{/* AQUI: max-h-[130px] no mobile deixa a lista bem compacta */}
<CommandList className="max-h-[130px] md:max-h-[300px] overflow-y-auto">
<CommandEmpty>Nenhum paciente encontrado.</CommandEmpty>
<CommandGroup>
{patients.map((p) => (
<CommandItem
key={p.id}
value={p.full_name}
onSelect={() => {
setSelectedPatient(p.id === selectedPatient ? "" : p.id);
setOpenPatientCombobox(false);
}}
className="text-xs md:text-sm py-1.5 md:py-2"
>
<Check
className={cn(
"mr-2 h-3 w-3 md:h-4 md:w-4",
selectedPatient === p.id ? "opacity-100" : "opacity-0"
)}
/>
<span className="truncate">{p.full_name}</span>
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
)}
{/* COMBOBOX DE MÉDICO */}
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="patient-select" className="text-sm font-medium"> <Label className="text-sm font-medium">Selecione o Médico</Label>
Paciente
</Label> <Popover open={openDoctorCombobox} onOpenChange={setOpenDoctorCombobox}>
<Select value={selectedPatient} onValueChange={setSelectedPatient}> <PopoverTrigger asChild>
<SelectTrigger id="patient-select"> <Button
<SelectValue placeholder="Selecione o paciente" /> variant="outline"
</SelectTrigger> role="combobox"
<SelectContent> aria-expanded={openDoctorCombobox}
{patients.map((p) => ( className="w-full justify-between"
<SelectItem key={p.id} value={p.id}> disabled={loadingDoctors}
{p.full_name} >
</SelectItem> {loadingDoctors ? "Carregando..." : (
))} selectedDoctor
</SelectContent> ? doctors.find((doctor) => doctor.id === selectedDoctor)?.full_name
</Select> : "Buscar médico..."
)}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
{/* AQUI: Configurações de largura e posicionamento corrigidos */}
<PopoverContent
className="w-[--radix-popover-trigger-width] min-w-0 p-0"
align="start"
side="bottom"
>
<Command>
<CommandInput placeholder="Procurar médico..." />
{/* AQUI: Altura reduzida no mobile */}
<CommandList className="max-h-[130px] md:max-h-[300px] overflow-y-auto">
<CommandEmpty>Nenhum médico encontrado.</CommandEmpty>
<CommandGroup>
{doctors.map((doctor) => (
<CommandItem
key={doctor.id}
value={doctor.full_name}
onSelect={() => {
setSelectedDoctor(doctor.id === selectedDoctor ? "" : doctor.id);
setOpenDoctorCombobox(false);
}}
className="text-xs md:text-sm py-1.5 md:py-2"
>
<Check
className={cn(
"mr-2 h-3 w-3 md:h-4 md:w-4",
selectedDoctor === doctor.id ? "opacity-100" : "opacity-0"
)}
/>
<div className="flex flex-col truncate">
<span className="truncate font-medium">{doctor.full_name}</span>
<span className="text-[10px] md:text-xs text-muted-foreground truncate">{doctor.specialty}</span>
</div>
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
<p className="text-xs text-muted-foreground mt-1">
Digite para filtrar por nome.
</p>
</div> </div>
)} </CardContent>
</Card>
<div className="space-y-2"> {/* BLOCO 2: CALENDÁRIO */}
<Label htmlFor="doctor-select" className="text-sm font-medium"> <Card className="h-full border shadow-sm flex flex-col">
Médico <CardHeader className="pb-3 border-b bg-muted/20">
</Label> <CardTitle className="text-base flex items-center gap-2">
<Select value={selectedDoctor} onValueChange={setSelectedDoctor}> <CalendarDays className="w-4 h-4 text-primary" />
<SelectTrigger id="doctor-select"> Data Disponível
<SelectValue placeholder="Selecione o médico" /> </CardTitle>
</SelectTrigger> </CardHeader>
<SelectContent> <CardContent className="flex-1 flex items-center justify-center pt-4 pb-4">
{loadingDoctors ? ( <div ref={calendarRef} className="flex justify-center w-full overflow-x-auto">
<SelectItem value="loading" disabled> <CalendarShadcn
Carregando... mode="single"
</SelectItem> disabled={!selectedDoctor}
) : ( selected={selectedDate ? new Date(selectedDate + "T12:00:00") : undefined}
doctors onSelect={(date) => {
.slice() // evita mutar o state original if (!date) return;
.sort((a, b) => a.full_name.localeCompare(b.full_name, "pt-BR")) const formatted = format(new Date(date.getTime() + 12 * 60 * 60 * 1000), "yyyy-MM-dd");
.map((d) => ( setSelectedDate(formatted);
<SelectItem key={d.id} value={d.id}> }}
{d.full_name} — {d.specialty} className="rounded-md border p-3 w-fit"
</SelectItem> />
)) </div>
)} </CardContent>
</SelectContent> </Card>
</div>
</Select>
</div>
</CardContent>
</Card>
{/* BLOCO 3: OBSERVAÇÕES */}
<Card className="border shadow-sm"> <Card className="border shadow-sm">
<CardHeader className="pb-2"> <CardHeader className="pb-3 border-b bg-muted/20">
<CardTitle className="text-lg">Selecione a Data</CardTitle> <CardTitle className="text-base flex items-center gap-2">
<StickyNote className="w-4 h-4 text-primary" />
Observações (Opcional)
</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="pt-4">
<div ref={calendarRef} className="flex justify-center">
<CalendarShadcn
mode="single"
disabled={!selectedDoctor}
selected={
selectedDate
? new Date(selectedDate + "T12:00:00")
: undefined
}
onSelect={(date) => {
if (!date) return
const formatted = format(new Date(date.getTime() + 12 * 60 * 60 * 1000), "yyyy-MM-dd")
setSelectedDate(formatted)
}}
className="rounded-md"
/>
</div>
</CardContent>
</Card>
<Card className="border shadow-sm">
<CardHeader className="pb-2">
<CardTitle className="text-lg">Observações (Opcional)</CardTitle>
</CardHeader>
<CardContent>
<Textarea <Textarea
placeholder="Adicione instruções ou informações importantes para o médico..." placeholder="Instruções especiais, sintomas ou motivos da consulta..."
value={notes} value={notes}
onChange={(e) => setNotes(e.target.value)} onChange={(e) => setNotes(e.target.value)}
rows={4} rows={3}
className="resize-none" className="resize-none w-full"
/> />
</CardContent> </CardContent>
</Card> </Card>
</form>
<div className="space-y-3">
<Card className="border-2 border-blue-200 shadow-lg bg-gradient-to-br from-blue-50 to-white sticky top-6">
<CardHeader className="pb-3 border-b border-blue-100">
<CardTitle className="text-blue-900 flex items-center gap-2">
<User className="h-5 w-5" />
Resumo da Consulta
</CardTitle>
</CardHeader>
<CardContent className="pt-3 space-y-3">
<div className="space-y-1">
<p className="text-xs font-medium text-slate-600">Médico</p>
<p className="text-sm font-semibold text-slate-900">
{selectedDoctor ? doctors.find((d) => d.id === selectedDoctor)?.full_name : "Não selecionado"}
</p>
</div>
<div className="space-y-1">
<p className="text-xs font-medium text-slate-600">Data</p>
<p className="text-sm font-semibold text-slate-900">
{selectedDate ? format(new Date(selectedDate + "T12:00:00"), "dd/MM/yyyy") : "Não selecionada"}
</p>
</div>
<div className="space-y-2">
<Label htmlFor="time-select" className="text-xs font-medium text-slate-600">
Horário
</Label>
<Select
value={selectedTime}
onValueChange={setSelectedTime}
disabled={loadingSlots || availableTimes.length === 0}
>
<SelectTrigger id="time-select" className="bg-white">
<SelectValue
placeholder={
loadingSlots
? "Carregando..."
: availableTimes.length === 0
? "Nenhum horário"
: "Escolha o horário"
}
/>
</SelectTrigger>
<SelectContent>
{availableTimes.map((h) => (
<SelectItem key={h} value={h}>
{h}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="pt-3 border-t border-blue-100 space-y-2">
<div className="flex justify-between text-xs">
<span className="text-slate-600">Tipo:</span>
<span className="font-medium text-slate-900 capitalize">{tipoConsulta}</span>
</div>
<div className="flex justify-between text-xs">
<span className="text-slate-600">Duração:</span>
<span className="font-medium text-slate-900">{duracao} minutos</span>
</div>
</div>
{notes && (
<div className="pt-3 border-t border-blue-100">
<div className="flex items-start gap-2">
<StickyNote className="h-4 w-4 text-blue-600 mt-0.5 flex-shrink-0" />
<p className="text-xs italic text-slate-700 line-clamp-3">{notes}</p>
</div>
</div>
)}
<div className="pt-2 space-y-2">
<Button
type="submit"
onClick={handleSubmit}
className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium shadow-md"
disabled={!selectedDoctor || !selectedDate || !selectedTime}
>
Confirmar Agendamento
</Button>
<Button
type="button"
variant="outline"
onClick={() => {
setSelectedDoctor("")
setSelectedDate("")
setSelectedTime("")
setNotes("")
setSelectedPatient("")
}}
className="w-full"
>
Limpar Formulário
</Button>
</div>
</CardContent>
</Card>
</div> </div>
{/* == DIREITA == */}
<div className="w-full">
<div className="xl:sticky xl:top-6">
<Card className="border-2 border-primary shadow-lg h-full flex flex-col">
<CardHeader className="pb-4 border-b border-primary/20 bg-primary/5">
<CardTitle className="text-primary flex items-center gap-2 text-lg">
<User className="h-5 w-5" />
Resumo da Consulta
</CardTitle>
</CardHeader>
<CardContent className="pt-6 space-y-5 flex-1">
<div className="grid grid-cols-2 gap-4 xl:grid-cols-1">
<div className="space-y-1">
<p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Médico</p>
<p className="text-sm font-semibold text-foreground break-words">
{selectedDoctor ? doctors.find((d) => d.id === selectedDoctor)?.full_name : "—"}
</p>
</div>
<div className="space-y-1">
<p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Data</p>
<p className="text-sm font-semibold text-foreground">
{selectedDate ? format(new Date(selectedDate + "T12:00:00"), "dd/MM/yyyy") : "—"}
</p>
</div>
</div>
<div className="space-y-2 pt-2">
<Label htmlFor="time-select" className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
Horário da Sessão
</Label>
<Select
value={selectedTime}
onValueChange={setSelectedTime}
disabled={loadingSlots || availableTimes.length === 0}
>
<SelectTrigger id="time-select" className="bg-white w-full border-primary/30 focus:ring-primary">
<SelectValue
placeholder={
loadingSlots ? "Carregando..." : availableTimes.length === 0 ? "Selecione uma data" : "Escolha o horário"
}
/>
</SelectTrigger>
<SelectContent>
{availableTimes.map((h) => (
<SelectItem key={h} value={h}>{h}</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="pt-4 border-t border-dashed space-y-2">
<div className="flex justify-between text-sm">
<span className="text-muted-foreground">Tipo:</span>
<span className="font-medium capitalize">{tipoConsulta}</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-muted-foreground">Duração estimada:</span>
<span className="font-medium">{duracao} min</span>
</div>
</div>
<div className="pt-4 space-y-3 mt-auto">
<Button
type="submit"
onClick={handleSubmit}
className="w-full bg-primary hover:bg-primary/90 text-primary-foreground font-semibold shadow-md py-6 h-auto text-base transition-all"
disabled={!selectedDoctor || !selectedDate || !selectedTime}
>
Confirmar Agendamento
</Button>
<Button
type="button"
variant="ghost"
onClick={() => {
setSelectedDoctor("");
setSelectedDate("");
setSelectedTime("");
setNotes("");
setSelectedPatient("");
}}
className="w-full text-muted-foreground hover:text-destructive"
>
Limpar Formulário
</Button>
</div>
</CardContent>
</Card>
</div>
</div>
</div> </div>
</div> </div>
@ -580,5 +614,5 @@ export default function ScheduleForm() {
</div> </div>
)} )}
</div> </div>
) );
} }

12
components/ui/WeeklyScheduleCard.tsx
View File

@ -76,23 +76,23 @@ export default function WeeklyScheduleCard({ doctorId }: WeeklyScheduleProps) {
return ( return (
<div className="space-y-4 grid md:grid-cols-7 gap-2"> <div className="space-y-4 grid md:grid-cols-7 gap-2">
{loading ? ( {loading ? (
<p className="text-sm text-gray-500 col-span-7 text-center">Carregando...</p> <p className="text-sm text-muted-foreground col-span-7 text-center">Carregando...</p>
) : ( ) : (
["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "Saturday"].map((day) => { ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"].map((day) => {
const times = schedule[day] || []; const times = schedule[day] || [];
return ( return (
<div key={day} className="space-y-4"> <div key={day} className="space-y-4">
<div className="flex flex-col items-center justify-between p-3 bg-blue-50 rounded-lg"> <div className="flex flex-col items-center justify-between p-3 bg-primary/10 rounded-lg">
<p className="font-medium capitalize">{weekdaysPT[day]}</p> <p className="font-medium capitalize text-foreground">{weekdaysPT[day]}</p>
<div className="text-center"> <div className="text-center">
{times.length > 0 ? ( {times.length > 0 ? (
times.map((t, i) => ( times.map((t, i) => (
<p key={i} className="text-sm text-gray-600"> <p key={i} className="text-sm text-muted-foreground">
{formatTime(t.start)} <br /> {formatTime(t.end)} {formatTime(t.start)} <br /> {formatTime(t.end)}
</p> </p>
)) ))
) : ( ) : (
<p className="text-sm text-gray-400 italic">Sem horário</p> <p className="text-sm text-muted-foreground italic">Sem horário</p>
)} )}
</div> </div>
</div> </div>

8
components/ui/filter-bar.tsx
View File

@ -53,16 +53,16 @@ export function FilterBar({
Object.values(activeFilters).some(val => val !== "all" && val !== ""); Object.values(activeFilters).some(val => val !== "all" && val !== "");
return ( return (
<div className={`flex flex-col md:flex-row items-start md:items-center gap-3 bg-white p-4 rounded-lg border border-gray-200 ${className}`}> <div className={`flex flex-col md:flex-row items-start md:items-center gap-3 bg-card p-4 rounded-lg border ${className}`}>
{/* Barra de Pesquisa */} {/* Barra de Pesquisa */}
<div className="relative w-full md:flex-1"> <div className="relative w-full md:flex-1">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" /> <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<Input <Input
placeholder={searchPlaceholder} placeholder={searchPlaceholder}
value={searchTerm} value={searchTerm}
onChange={(e) => onSearch(e.target.value)} onChange={(e) => onSearch(e.target.value)}
className="pl-10 w-full bg-gray-50 border-gray-200 focus:bg-white transition-colors" className="pl-10 w-full bg-muted border-border focus:bg-card transition-colors"
/> />
</div> </div>
@ -100,7 +100,7 @@ export function FilterBar({
variant="ghost" variant="ghost"
size="icon" size="icon"
onClick={onClearFilters} onClick={onClearFilters}
className="text-gray-500 hover:text-red-600" className="text-muted-foreground hover:text-destructive"
title="Limpar filtros" title="Limpar filtros"
> >
<X className="h-4 w-4" /> <X className="h-4 w-4" />

66
components/ui/patient-details-modal.tsx
View File

@ -45,10 +45,10 @@ export function PatientDetailsModal({
return ( return (
<Dialog open={isOpen} onOpenChange={onClose}> <Dialog open={isOpen} onOpenChange={onClose}>
<DialogContent className="max-w-[95%] sm:max-w-lg max-h-[90vh] overflow-y-auto"> <DialogContent className="max-w-[95%] sm:max-w-lg max-h-[90vh] overflow-y-auto bg-card text-card-foreground border border-border">
<DialogHeader> <DialogHeader>
<DialogTitle className="text-xl font-bold">Detalhes do Paciente</DialogTitle> <DialogTitle className="text-xl font-bold text-foreground">Detalhes do Paciente</DialogTitle>
<DialogDescription> <DialogDescription className="text-muted-foreground">
Informações detalhadas sobre o paciente. Informações detalhadas sobre o paciente.
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
@ -57,80 +57,80 @@ export function PatientDetailsModal({
{/* Grid Principal */} {/* Grid Principal */}
<div className="grid grid-cols-2 gap-4 text-sm"> <div className="grid grid-cols-2 gap-4 text-sm">
<div> <div>
<p className="font-semibold text-gray-900">Nome Completo</p> <p className="font-semibold text-foreground">Nome Completo</p>
<p className="text-gray-700">{patient.nome}</p> <p className="text-muted-foreground">{patient.nome}</p>
</div> </div>
{/* CORREÇÃO AQUI: Adicionado 'break-all' para quebrar o email */} {/* CORREÇÃO AQUI: Adicionado 'break-all' para quebrar o email */}
<div> <div>
<p className="font-semibold text-gray-900">Email</p> <p className="font-semibold text-foreground">Email</p>
<p className="text-gray-700 break-all">{patient.email || "N/A"}</p> <p className="text-muted-foreground break-all">{patient.email || "N/A"}</p>
</div> </div>
<div> <div>
<p className="font-semibold text-gray-900">Telefone</p> <p className="font-semibold text-foreground">Telefone</p>
<p className="text-gray-700">{patient.telefone}</p> <p className="text-muted-foreground">{patient.telefone}</p>
</div> </div>
<div> <div>
<p className="font-semibold text-gray-900">Data de Nascimento</p> <p className="font-semibold text-foreground">Data de Nascimento</p>
<p className="text-gray-700">{patient.birth_date || "N/A"}</p> <p className="text-muted-foreground">{patient.birth_date || "N/A"}</p>
</div> </div>
<div> <div>
<p className="font-semibold text-gray-900">CPF</p> <p className="font-semibold text-foreground">CPF</p>
<p className="text-gray-700">{patient.cpf || "N/A"}</p> <p className="text-muted-foreground">{patient.cpf || "N/A"}</p>
</div> </div>
<div> <div>
<p className="font-semibold text-gray-900">Tipo Sanguíneo</p> <p className="font-semibold text-foreground">Tipo Sanguíneo</p>
<p className="text-gray-700">{patient.blood_type || "N/A"}</p> <p className="text-muted-foreground">{patient.blood_type || "N/A"}</p>
</div> </div>
<div> <div>
<p className="font-semibold text-gray-900">Peso (kg)</p> <p className="font-semibold text-foreground">Peso (kg)</p>
<p className="text-gray-700">{patient.weight_kg || "0"}</p> <p className="text-muted-foreground">{patient.weight_kg || "0"}</p>
</div> </div>
<div> <div>
<p className="font-semibold text-gray-900">Altura (m)</p> <p className="font-semibold text-foreground">Altura (m)</p>
<p className="text-gray-700">{patient.height_m || "0"}</p> <p className="text-muted-foreground">{patient.height_m || "0"}</p>
</div> </div>
</div> </div>
<hr className="border-gray-200" /> <hr className="border-border" />
{/* Seção de Endereço */} {/* Seção de Endereço */}
<div> <div>
<h4 className="font-semibold mb-3 text-gray-900">Endereço</h4> <h4 className="font-semibold mb-3 text-foreground">Endereço</h4>
<div className="grid grid-cols-2 gap-4 text-sm"> <div className="grid grid-cols-2 gap-4 text-sm">
<div> <div>
<p className="font-semibold text-gray-900">Rua</p> <p className="font-semibold text-foreground">Rua</p>
<p className="text-gray-700"> <p className="text-muted-foreground">
{patient.street && patient.street !== "N/A" {patient.street && patient.street !== "N/A"
? `${patient.street}, ${patient.number || ""}` ? `${patient.street}, ${patient.number || ""}`
: "N/A"} : "N/A"}
</p> </p>
</div> </div>
<div> <div>
<p className="font-semibold text-gray-900">Complemento</p> <p className="font-semibold text-foreground">Complemento</p>
<p className="text-gray-700">{patient.complement || "N/A"}</p> <p className="text-muted-foreground">{patient.complement || "N/A"}</p>
</div> </div>
<div> <div>
<p className="font-semibold text-gray-900">Bairro</p> <p className="font-semibold text-foreground">Bairro</p>
<p className="text-gray-700">{patient.neighborhood || "N/A"}</p> <p className="text-muted-foreground">{patient.neighborhood || "N/A"}</p>
</div> </div>
<div> <div>
<p className="font-semibold text-gray-900">Cidade</p> <p className="font-semibold text-foreground">Cidade</p>
<p className="text-gray-700">{patient.cidade || "N/A"}</p> <p className="text-muted-foreground">{patient.cidade || "N/A"}</p>
</div> </div>
<div> <div>
<p className="font-semibold text-gray-900">Estado</p> <p className="font-semibold text-foreground">Estado</p>
<p className="text-gray-700">{patient.estado || "N/A"}</p> <p className="text-muted-foreground">{patient.estado || "N/A"}</p>
</div> </div>
<div> <div>
<p className="font-semibold text-gray-900">CEP</p> <p className="font-semibold text-foreground">CEP</p>
<p className="text-gray-700">{patient.cep || "N/A"}</p> <p className="text-muted-foreground">{patient.cep || "N/A"}</p>
</div> </div>
</div> </div>
</div> </div>

14
components/ui/userToolTip.tsx
View File

@ -108,7 +108,7 @@ export default function SidebarUserSection({
<PopoverContent <PopoverContent
align="center" align="center"
side="top" side="top"
className="w-64 p-4 shadow-lg border bg-white" className="w-64 p-4 shadow-2xl border-2 border-primary/20 bg-card text-card-foreground ring-1 ring-primary/10"
> >
<nav> <nav>
{menuItems.map((item) => { {menuItems.map((item) => {
@ -119,8 +119,8 @@ export default function SidebarUserSection({
<div <div
className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${ className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${
isActive isActive
? "bg-blue-50 text-blue-600 border-r-2 border-blue-600" ? "bg-primary/10 text-primary border-r-2 border-primary"
: "text-gray-600 hover:bg-gray-50" : "text-foreground hover:bg-muted"
}`} }`}
> >
<Icon className="w-5 h-5 flex-shrink-0" /> <Icon className="w-5 h-5 flex-shrink-0" />
@ -140,19 +140,19 @@ export default function SidebarUserSection({
size="sm" size="sm"
className={ className={
sidebarCollapsed sidebarCollapsed
? "w-full bg-white text-black flex justify-center items-center p-2 hover:bg-gray-200" ? "w-full bg-card text-foreground border-2 border-border flex justify-center items-center p-2 hover:bg-muted"
: "w-full bg-white text-black hover:bg-gray-200 cursor-pointer" : "w-full bg-card text-foreground border-2 border-border hover:bg-muted cursor-pointer"
} }
onClick={handleLogout} onClick={handleLogout}
> >
<LogOut <LogOut
className={ className={
sidebarCollapsed ? "h-5 w-5 text-black" : "mr-2 h-4 w-4 text-black" sidebarCollapsed ? "h-5 w-5" : "mr-2 h-4 w-4"
} }
/> />
{!sidebarCollapsed && "Sair"} {!sidebarCollapsed && "Sair"}
</Button> </Button>
   
</div> </div>
); );
} }

105
hooks/useAuthLayout.ts
View File

@ -6,63 +6,72 @@ import { usersService } from "@/services/usersApi.mjs";
import { toast } from "@/hooks/use-toast"; import { toast } from "@/hooks/use-toast";
interface UserLayoutData { interface UserLayoutData {
id: string; id: string;
name: string; name: string;
email: string; email: string;
roles: string[]; roles: string[];
avatar_url?: string; avatar_url?: string;
avatarFullUrl?: string; avatarFullUrl?: string;
} }
interface UseAuthLayoutOptions { interface UseAuthLayoutOptions {
requiredRole?: string[]; requiredRole?: string[];
} }
export function useAuthLayout({ requiredRole }: UseAuthLayoutOptions = {}) { export function useAuthLayout(
const [user, setUser] = useState<UserLayoutData | null>(null); { requiredRole }: UseAuthLayoutOptions = {}
const [isLoading, setIsLoading] = useState(true); ) {
const router = useRouter(); const [user, setUser] = useState<UserLayoutData | null>(null);
const [isLoading, setIsLoading] = useState(true);
const router = useRouter();
useEffect(() => { useEffect(() => {
const fetchUserData = async () => { const fetchUserData = async () => {
try { try {
const fullUserData = await usersService.getMe(); const fullUserData = await usersService.getMe();
if (!fullUserData.roles.some((role) => requiredRole?.includes(role))) { // só verifica papel se requiredRole existir
console.error(`Acesso negado. Requer perfil '${requiredRole}', mas o usuário tem '${fullUserData.roles.join(", ")}'.`); if (
toast({ requiredRole &&
title: "Acesso Negado", !fullUserData.roles.some((role: string) =>
description: "Você não tem permissão para acessar esta página.", requiredRole.includes(role)
variant: "destructive", )
}); ) {
router.push("/"); console.error(
return; `Acesso negado. Requer perfil '${requiredRole}', mas o usuário tem '${fullUserData.roles.join(", ")}'.`
} );
toast({
title: "Acesso Negado",
description: "Você não tem permissão para acessar esta página.",
variant: "destructive",
});
router.push("/");
return;
}
const avatarPath = fullUserData.profile.avatar_url; const avatarPath = fullUserData.profile.avatar_url;
const avatarFullUrl = avatarPath
? `https://yuanqfswhberkoevtmfr.supabase.co/storage/v1/object/public/avatars/${avatarPath}`
: undefined;
// *** A CORREÇÃO ESTÁ AQUI *** setUser({
// Adicionamos o nome do bucket 'avatars' na URL final. id: fullUserData.user.id,
const avatarFullUrl = avatarPath ? `https://yuanqfswhberkoevtmfr.supabase.co/storage/v1/object/public/avatars/${avatarPath}` : undefined; name: fullUserData.profile.full_name || "Usuário",
email: fullUserData.user.email,
roles: fullUserData.roles,
avatar_url: avatarPath,
avatarFullUrl,
});
} catch (error) {
console.error("Falha na autenticação do layout:", error);
router.push("/login");
} finally {
setIsLoading(false);
}
};
setUser({ fetchUserData();
id: fullUserData.user.id, }, [router]); // não depende mais de requiredRole
name: fullUserData.profile.full_name || "Usuário",
email: fullUserData.user.email,
roles: fullUserData.roles,
avatar_url: avatarPath,
avatarFullUrl: avatarFullUrl,
});
} catch (error) {
console.error("Falha na autenticação do layout:", error);
router.push("/login");
} finally {
setIsLoading(false);
}
};
fetchUserData(); return { user, isLoading };
}, [router, requiredRole]);
return { user, isLoading };
} }

6
services/patientsApi.mjs
View File

@ -2,7 +2,11 @@ import { api } from "./api.mjs";
export const patientsService = { export const patientsService = {
list: () => api.get("/rest/v1/patients"), list: () => api.get("/rest/v1/patients"),
getById: (id) => api.get(`/rest/v1/patients?id=eq.${id}`), getById: (id) => {
console.log("getById chamado", id);
return api.get(`/rest/v1/patients?id=eq.${id}`);
},
create: (data) => api.post("/rest/v1/patients", data), create: (data) => api.post("/rest/v1/patients", data),
update: (id, data) => api.patch(`/rest/v1/patients?id=eq.${id}`, data), update: (id, data) => api.patch(`/rest/v1/patients?id=eq.${id}`, data),
delete: (id) => api.delete(`/rest/v1/patients?id=eq.${id}`), delete: (id) => api.delete(`/rest/v1/patients?id=eq.${id}`),

1
services/usersApi.mjs
View File

@ -3,6 +3,7 @@ import { api } from "./api.mjs";
export const usersService = { export const usersService = {
// Função getMe corrigida para chamar a si mesma pelo nome // Função getMe corrigida para chamar a si mesma pelo nome
async getMe() { async getMe() {
console.log("getMe chamado");
const sessionData = await api.getSession(); const sessionData = await api.getSession();
if (!sessionData?.id) { if (!sessionData?.id) {
console.error("Sessão não encontrada ou usuário sem ID.", sessionData); console.error("Sessão não encontrada ou usuário sem ID.", sessionData);