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

Merge pull request #21 from m1guelmcf/ajustes-visuais-paginas

Browse Source 
ajustes visuais em todas as paginas
This commit is contained in:
DaniloSts 2025-11-26 18:46:11 -03:00 committed by GitHub
commit 9fb2ff1c4d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 4444 additions and 3541 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,9 +1,24 @@
"use client"; "use client";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Calendar, Clock, User, Trash2 } from "lucide-react"; import { Calendar, Clock, User, Trash2 } from "lucide-react";
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog"; import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import Link from "next/link"; import Link from "next/link";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
@ -111,10 +126,15 @@ export default function PatientDashboard() {
const [userData, setUserData] = useState<UserData>(); const [userData, setUserData] = useState<UserData>();
const [availability, setAvailability] = useState<any | null>(null); const [availability, setAvailability] = useState<any | null>(null);
const [exceptions, setExceptions] = useState<Exception[]>([]); const [exceptions, setExceptions] = useState<Exception[]>([]);
const [schedule, setSchedule] = useState<Record<string, { start: string; end: string }[]>>({}); const [schedule, setSchedule] = useState<
const formatTime = (time?: string | null) => time?.split(":")?.slice(0, 2).join(":") ?? ""; Record<string, { start: string; end: string }[]>
>({});
const formatTime = (time?: string | null) =>
time?.split(":")?.slice(0, 2).join(":") ?? "";
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false); const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
const [exceptionToDelete, setExceptionToDelete] = useState<string | null>(null); const [exceptionToDelete, setExceptionToDelete] = useState<string | null>(
null
);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
// Mapa de tradução // Mapa de tradução
@ -141,7 +161,9 @@ export default function PatientDashboard() {
const availabilityList = await AvailabilityService.list(); const availabilityList = await AvailabilityService.list();
// Filtra já com a variável local // Filtra já com a variável local
const filteredAvail = availabilityList.filter((disp: { doctor_id: string }) => disp.doctor_id === doctor?.id); const filteredAvail = availabilityList.filter(
(disp: { doctor_id: string }) => disp.doctor_id === doctor?.id
);
setAvailability(filteredAvail); setAvailability(filteredAvail);
// Busca exceções // Busca exceções
@ -174,7 +196,9 @@ export default function PatientDashboard() {
let message = "Exceção deletada com sucesso"; let message = "Exceção deletada com sucesso";
try { try {
if (res) { if (res) {
throw new Error(`${res.error} ${res.message}` || "A API retornou erro"); throw new Error(
`${res.error} ${res.message}` || "A API retornou erro"
);
} else { } else {
console.log(message); console.log(message);
} }
@ -185,7 +209,9 @@ export default function PatientDashboard() {
description: message, description: message,
}); });
setExceptions((prev: Exception[]) => prev.filter((p) => String(p.id) !== String(ExceptionId))); setExceptions((prev: Exception[]) =>
prev.filter((p) => String(p.id) !== String(ExceptionId))
);
} catch (e: any) { } catch (e: any) {
toast({ toast({
title: "Erro", title: "Erro",
@ -230,13 +256,17 @@ export default function PatientDashboard() {
<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-gray-900">Dashboard</h1>
<p className="text-gray-600">Bem-vindo ao seu portal de consultas médicas</p> <p className="text-gray-600">
Bem-vindo ao seu portal de consultas médicas
</p>
</div> </div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<Card> <Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Próxima Consulta</CardTitle> <CardTitle className="text-sm font-medium">
Próxima Consulta
</CardTitle>
<Calendar className="h-4 w-4 text-muted-foreground" /> <Calendar className="h-4 w-4 text-muted-foreground" />
</CardHeader> </CardHeader>
<CardContent> <CardContent>
@ -247,7 +277,9 @@ export default function PatientDashboard() {
<Card> <Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Consultas Este Mês</CardTitle> <CardTitle className="text-sm font-medium">
Consultas Este Mês
</CardTitle>
<Clock className="h-4 w-4 text-muted-foreground" /> <Clock className="h-4 w-4 text-muted-foreground" />
</CardHeader> </CardHeader>
<CardContent> <CardContent>
@ -272,12 +304,14 @@ export default function PatientDashboard() {
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle>Ações Rápidas</CardTitle> <CardTitle>Ações Rápidas</CardTitle>
<CardDescription>Acesse rapidamente as principais funcionalidades</CardDescription> <CardDescription>
Acesse rapidamente as principais funcionalidades
</CardDescription>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<Link href="/doctor/medicos/consultas"> <Link href="/doctor/medicos/consultas">
<Button className="w-full justify-start"> <Button className="bg-blue-600 hover:bg-blue-700 text-white cursor-pointer">
<Calendar className="mr-2 h-4 w-4" /> <Calendar className="mr-2 h-4 w-4 text-white" />
Ver Minhas Consultas Ver Minhas Consultas
</Button> </Button>
</Link> </Link>

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

@ -6,7 +6,13 @@ import Link from "next/link";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { AvailabilityService } from "@/services/availabilityApi.mjs"; import { AvailabilityService } from "@/services/availabilityApi.mjs";
import { usersService } from "@/services/usersApi.mjs"; import { usersService } from "@/services/usersApi.mjs";
@ -14,11 +20,31 @@ import { doctorsService } from "@/services/doctorsApi.mjs";
import { toast } from "@/hooks/use-toast"; import { toast } from "@/hooks/use-toast";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card"; import {
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"; Card,
CardHeader,
CardTitle,
CardDescription,
CardContent,
} from "@/components/ui/card";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Edit, Trash2 } from "lucide-react"; import { Edit, Trash2 } from "lucide-react";
import { AvailabilityEditModal } from "@/components/ui/availability-edit-modal"; import { AvailabilityEditModal } from "@/components/ui/availability-edit-modal";
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog"; import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import Sidebar from "@/components/Sidebar"; import Sidebar from "@/components/Sidebar";
// ... (Interfaces de tipo omitidas para brevidade, pois não foram alteradas) // ... (Interfaces de tipo omitidas para brevidade, pois não foram alteradas)
@ -80,7 +106,7 @@ type Doctor = {
updated_by: string | null; updated_by: string | null;
max_days_in_advance: number; max_days_in_advance: number;
rating: number | null; rating: number | null;
} };
type Availability = { type Availability = {
id: string; id: string;
@ -101,27 +127,38 @@ export default function AvailabilityPage() {
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const router = useRouter(); const router = useRouter();
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [schedule, setSchedule] = useState<Record<string, { start: string; end: string }[]>>({}); const [schedule, setSchedule] = useState<
const formatTime = (time?: string | null) => time?.split(":")?.slice(0, 2).join(":") ?? ""; Record<string, { start: string; end: string }[]>
>({});
const formatTime = (time?: string | null) =>
time?.split(":")?.slice(0, 2).join(":") ?? "";
const [userData, setUserData] = useState<UserData>(); const [userData, setUserData] = useState<UserData>();
const [availability, setAvailability] = useState<any | null>(null); const [availability, setAvailability] = useState<any | null>(null);
const [doctorId, setDoctorId] = useState<string>(); const [doctorId, setDoctorId] = useState<string>();
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false); const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
const [modalidadeConsulta, setModalidadeConsulta] = useState<string>(""); const [modalidadeConsulta, setModalidadeConsulta] = useState<string>("");
const [selectedAvailability, setSelectedAvailability] = useState<Availability | null>(null); const [selectedAvailability, setSelectedAvailability] =
useState<Availability | null>(null);
const [isModalOpen, setIsModalOpen] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false);
const selectAvailability = (schedule: { start: string; end: string;}, day: string) => { const selectAvailability = (
const selected = availability.filter((a: Availability) => schedule: { start: string; end: string },
day: string
) => {
const selected = availability.filter(
(a: Availability) =>
a.start_time === schedule.start && a.start_time === schedule.start &&
a.end_time === schedule.end && a.end_time === schedule.end &&
a.weekday === day a.weekday === day
); );
setSelectedAvailability(selected[0]); setSelectedAvailability(selected[0]);
} };
const handleOpenModal = (schedule: { start: string; end: string;}, day: string) => { const handleOpenModal = (
selectAvailability(schedule, day) schedule: { start: string; end: string },
day: string
) => {
selectAvailability(schedule, day);
setIsModalOpen(true); setIsModalOpen(true);
}; };
@ -130,7 +167,13 @@ export default function AvailabilityPage() {
setIsModalOpen(false); setIsModalOpen(false);
}; };
const handleEdit = async (formData:{ start_time: "", end_time: "", slot_minutes: "", appointment_type: "", id:""}) => { const handleEdit = async (formData: {
start_time: "";
end_time: "";
slot_minutes: "";
appointment_type: "";
id: "";
}) => {
if (isLoading) return; if (isLoading) return;
setIsLoading(true); setIsLoading(true);
@ -149,7 +192,9 @@ export default function AvailabilityPage() {
let message = "disponibilidade editada com sucesso"; let message = "disponibilidade editada com sucesso";
try { try {
if (!res[0].id) { if (!res[0].id) {
throw new Error(`${res.error} ${res.message}` || "A API retornou erro"); throw new Error(
`${res.error} ${res.message}` || "A API retornou erro"
);
} else { } else {
console.log(message); console.log(message);
} }
@ -159,16 +204,17 @@ export default function AvailabilityPage() {
title: "Sucesso", title: "Sucesso",
description: message, description: message,
}); });
router.push("#") router.push("#");
} catch (err: any) { } catch (err: any) {
toast({ toast({
title: "Erro", title: "Erro",
description: err?.message || "Não foi possível editar a disponibilidade", description:
err?.message || "Não foi possível editar a disponibilidade",
}); });
} finally { } finally {
setIsLoading(false); setIsLoading(false);
handleCloseModal(); handleCloseModal();
fetchData() fetchData();
} }
}; };
@ -212,7 +258,6 @@ export default function AvailabilityPage() {
return doctors.find((doctor) => doctor.user_id === id); return doctors.find((doctor) => doctor.user_id === id);
} }
function formatAvailability(data: Availability[]) { function formatAvailability(data: Availability[]) {
// Agrupar os horários por dia da semana // Agrupar os horários por dia da semana
const schedule = data.reduce((acc: any, item) => { const schedule = data.reduce((acc: any, item) => {
@ -267,7 +312,9 @@ export default function AvailabilityPage() {
let message = "disponibilidade cadastrada com sucesso"; let message = "disponibilidade cadastrada com sucesso";
try { try {
if (!res[0].id) { if (!res[0].id) {
throw new Error(`${res.error} ${res.message}` || "A API retornou erro"); throw new Error(
`${res.error} ${res.message}` || "A API retornou erro"
);
} else { } else {
console.log(message); console.log(message);
} }
@ -289,8 +336,11 @@ export default function AvailabilityPage() {
} }
}; };
const openDeleteDialog = (schedule: { start: string; end: string;}, day: string) => { const openDeleteDialog = (
selectAvailability(schedule, day) schedule: { start: string; end: string },
day: string
) => {
selectAvailability(schedule, day);
setDeleteDialogOpen(true); setDeleteDialogOpen(true);
}; };
@ -329,8 +379,12 @@ 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">Definir Disponibilidade</h1> <h1 className="text-2xl font-bold text-gray-900">
<p className="text-gray-600">Defina sua disponibilidade para consultas </p> Definir Disponibilidade
</h1>
<p className="text-gray-600">
Defina sua disponibilidade para consultas{" "}
</p>
</div> </div>
</div> </div>
@ -341,35 +395,72 @@ export default function AvailabilityPage() {
<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">Dia Da Semana</Label> <Label className="text-sm font-medium text-gray-700">
Dia Da Semana
</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: */}
<div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-7 gap-x-4 gap-y-2 mt-2"> <div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-7 gap-x-4 gap-y-2 mt-2">
<label className="flex items-center gap-1"> <label className="flex items-center gap-1">
<input type="radio" name="weekday" value="monday" className="text-blue-600" /> <input
type="radio"
name="weekday"
value="monday"
className="text-blue-600"
/>
<span className="whitespace-nowrap text-sm">Segunda</span> <span className="whitespace-nowrap text-sm">Segunda</span>
</label> </label>
<label className="flex items-center gap-1"> <label className="flex items-center gap-1">
<input type="radio" name="weekday" value="tuesday" className="text-blue-600" /> <input
type="radio"
name="weekday"
value="tuesday"
className="text-blue-600"
/>
<span className="whitespace-nowrap text-sm">Terça</span> <span className="whitespace-nowrap text-sm">Terça</span>
</label> </label>
<label className="flex items-center gap-1"> <label className="flex items-center gap-1">
<input type="radio" name="weekday" value="wednesday" className="text-blue-600" /> <input
type="radio"
name="weekday"
value="wednesday"
className="text-blue-600"
/>
<span className="whitespace-nowrap text-sm">Quarta</span> <span className="whitespace-nowrap text-sm">Quarta</span>
</label> </label>
<label className="flex items-center gap-1"> <label className="flex items-center gap-1">
<input type="radio" name="weekday" value="thursday" className="text-blue-600" /> <input
type="radio"
name="weekday"
value="thursday"
className="text-blue-600"
/>
<span className="whitespace-nowrap text-sm">Quinta</span> <span className="whitespace-nowrap text-sm">Quinta</span>
</label> </label>
<label className="flex items-center gap-1"> <label className="flex items-center gap-1">
<input type="radio" name="weekday" value="friday" className="text-blue-600" /> <input
type="radio"
name="weekday"
value="friday"
className="text-blue-600"
/>
<span className="whitespace-nowrap text-sm">Sexta</span> <span className="whitespace-nowrap text-sm">Sexta</span>
</label> </label>
<label className="flex items-center gap-1"> <label className="flex items-center gap-1">
<input type="radio" name="weekday" value="saturday" className="text-blue-600" /> <input
type="radio"
name="weekday"
value="saturday"
className="text-blue-600"
/>
<span className="whitespace-nowrap text-sm">Sábado</span> <span className="whitespace-nowrap text-sm">Sábado</span>
</label> </label>
<label className="flex items-center gap-1"> <label className="flex items-center gap-1">
<input type="radio" name="weekday" value="sunday" className="text-blue-600" /> <input
type="radio"
name="weekday"
value="sunday"
className="text-blue-600"
/>
<span className="whitespace-nowrap text-sm">Domingo</span> <span className="whitespace-nowrap text-sm">Domingo</span>
</label> </label>
</div> </div>
@ -379,31 +470,64 @@ export default function AvailabilityPage() {
{/* Ajustado para 1 coluna em móvel, 2 em tablet e 5 em desktop (mantendo o que já existia com ajustes) */} {/* Ajustado para 1 coluna em móvel, 2 em tablet e 5 em desktop (mantendo o que já existia com ajustes) */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-6"> <div className="grid grid-cols-1 sm:grid-cols-2 lg: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-gray-700"
>
Horario De Entrada Horario De Entrada
</Label> </Label>
<Input type="time" id="horarioEntrada" name="horarioEntrada" required className="mt-1" /> <Input
type="time"
id="horarioEntrada"
name="horarioEntrada"
required
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-gray-700"
>
Horario De Saida Horario De Saida
</Label> </Label>
<Input type="time" id="horarioSaida" name="horarioSaida" required className="mt-1" /> <Input
type="time"
id="horarioSaida"
name="horarioSaida"
required
className="mt-1"
/>
</div> </div>
<div> <div>
<Label htmlFor="duracaoConsulta" className="text-sm font-medium text-gray-700"> <Label
htmlFor="duracaoConsulta"
className="text-sm font-medium text-gray-700"
>
Duração Da Consulta (min) Duração Da Consulta (min)
</Label> </Label>
<Input type="number" id="duracaoConsulta" name="duracaoConsulta" required className="mt-1" /> <Input
type="number"
id="duracaoConsulta"
name="duracaoConsulta"
required
className="mt-1"
/>
</div> </div>
{/* O Select de modalidade fica fora deste grid para ocupar uma linha inteira em telas menores, como no original, garantindo clareza */} {/* O Select de modalidade fica fora deste grid para ocupar uma linha inteira em telas menores, como no original, garantindo clareza */}
</div> </div>
<div> <div>
<Label htmlFor="modalidadeConsulta" className="text-sm font-medium text-gray-700"> <Label
htmlFor="modalidadeConsulta"
className="text-sm font-medium text-gray-700"
>
Modalidade De Consulta Modalidade De Consulta
</Label> </Label>
<Select onValueChange={(value) => setModalidadeConsulta(value)} value={modalidadeConsulta}> <Select
onValueChange={(value) => setModalidadeConsulta(value)}
value={modalidadeConsulta}
>
<SelectTrigger className="mt-1"> <SelectTrigger className="mt-1">
<SelectValue placeholder="Selecione" /> <SelectValue placeholder="Selecione" />
</SelectTrigger> </SelectTrigger>

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

@ -2,11 +2,22 @@
import { useEffect, useState, useCallback } from "react"; import { useEffect, useState, useCallback } from "react";
import Link from "next/link"; import Link from "next/link";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"; import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Eye, Edit, Calendar, Trash2, Loader2 } from "lucide-react"; import { Eye, Edit, Calendar, Trash2, Loader2 } from "lucide-react";
import { api } from "@/services/api.mjs"; import { api } from "@/services/api.mjs";
import { PatientDetailsModal } from "@/components/ui/patient-details-modal"; import { PatientDetailsModal } from "@/components/ui/patient-details-modal";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import Sidebar from "@/components/Sidebar"; import Sidebar from "@/components/Sidebar";
@ -91,7 +102,6 @@ export default function PacientesPage() {
}; };
// --- Lógica de Paginação FIM --- // --- Lógica de Paginação FIM ---
const handleOpenModal = (patient: Paciente) => { const handleOpenModal = (patient: Paciente) => {
setSelectedPatient(patient); setSelectedPatient(patient);
setIsModalOpen(true); setIsModalOpen(true);
@ -162,7 +172,9 @@ export default function PacientesPage() {
<Sidebar> <Sidebar>
<div className="space-y-6 px-2 sm:px-4 md:px-6"> <div className="space-y-6 px-2 sm:px-4 md:px-6">
{/* Cabeçalho */} {/* Cabeçalho */}
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3"> {/* Ajustado para flex-col em telas pequenas */} <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
{" "}
{/* Ajustado para flex-col em telas pequenas */}
<div> <div>
<h1 className="text-2xl font-bold text-foreground">Pacientes</h1> <h1 className="text-2xl font-bold text-foreground">Pacientes</h1>
<p className="text-muted-foreground text-sm sm:text-base"> <p className="text-muted-foreground text-sm sm:text-base">
@ -186,21 +198,27 @@ export default function PacientesPage() {
</SelectContent> </SelectContent>
</Select> </Select>
<Link href="/doctor/pacientes/novo" className="w-full sm:w-auto"> <Link href="/doctor/pacientes/novo" className="w-full sm:w-auto">
<Button variant="default" className="bg-green-600 hover:bg-green-700 w-full sm:w-auto"> <Button
variant="default"
className="bg-blue-600 hover:bg-blue-700 w-full sm:w-auto"
>
Novo Paciente Novo Paciente
</Button> </Button>
</Link> </Link>
</div> </div>
</div> </div>
<div className="bg-card rounded-lg border border-border overflow-hidden shadow-md"> <div className="bg-card rounded-lg border border-border overflow-hidden shadow-md">
{/* Tabela para Telas Médias e Grandes */} {/* Tabela para Telas Médias e Grandes */}
<div className="overflow-x-auto hidden md:block"> {/* Esconde em telas pequenas */} <div className="overflow-x-auto hidden md:block">
{" "}
{/* Esconde em telas pequenas */}
<table className="min-w-[600px] w-full"> <table className="min-w-[600px] w-full">
<thead className="bg-muted border-b border-border"> <thead className="bg-muted border-b border-border">
<tr> <tr>
<th className="text-left p-3 sm:p-4 font-medium text-foreground">Nome</th> <th className="text-left p-3 sm:p-4 font-medium text-foreground">
Nome
</th>
<th className="text-left p-3 sm:p-4 font-medium text-foreground"> <th className="text-left p-3 sm:p-4 font-medium text-foreground">
Telefone Telefone
</th> </th>
@ -216,24 +234,35 @@ export default function PacientesPage() {
<th className="text-left p-3 sm:p-4 font-medium text-foreground hidden xl:table-cell"> <th className="text-left p-3 sm:p-4 font-medium text-foreground hidden xl:table-cell">
Próximo atendimento Próximo atendimento
</th> </th>
<th className="text-left p-3 sm:p-4 font-medium text-foreground">Ações</th> <th className="text-left p-3 sm:p-4 font-medium text-foreground">
Ações
</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{loading ? ( {loading ? (
<tr> <tr>
<td colSpan={7} className="p-6 text-muted-foreground text-center"> <td
colSpan={7}
className="p-6 text-muted-foreground text-center"
>
<Loader2 className="w-6 h-6 animate-spin mx-auto text-primary" /> <Loader2 className="w-6 h-6 animate-spin mx-auto text-primary" />
Carregando pacientes... Carregando pacientes...
</td> </td>
</tr> </tr>
) : error ? ( ) : error ? (
<tr> <tr>
<td colSpan={7} className="p-6 text-red-600 text-center">{`Erro: ${error}`}</td> <td
colSpan={7}
className="p-6 text-red-600 text-center"
>{`Erro: ${error}`}</td>
</tr> </tr>
) : pacientes.length === 0 ? ( ) : pacientes.length === 0 ? (
<tr> <tr>
<td colSpan={7} className="p-8 text-center text-muted-foreground"> <td
colSpan={7}
className="p-8 text-center text-muted-foreground"
>
Nenhum paciente encontrado Nenhum paciente encontrado
</td> </td>
</tr> </tr>
@ -267,7 +296,9 @@ export default function PacientesPage() {
</button> </button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end"> <DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => handleOpenModal(p)}> <DropdownMenuItem
onClick={() => handleOpenModal(p)}
>
<Eye className="w-4 h-4 mr-2" /> <Eye className="w-4 h-4 mr-2" />
Ver detalhes Ver detalhes
</DropdownMenuItem> </DropdownMenuItem>
@ -277,13 +308,19 @@ export default function PacientesPage() {
Laudos Laudos
</Link> </Link>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem onClick={() => alert(`Agenda para paciente ID: ${p.id}`)}> <DropdownMenuItem
onClick={() =>
alert(`Agenda para paciente ID: ${p.id}`)
}
>
<Calendar className="w-4 h-4 mr-2" /> <Calendar className="w-4 h-4 mr-2" />
Ver agenda Ver agenda
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem <DropdownMenuItem
onClick={() => { onClick={() => {
const newPacientes = pacientes.filter((pac) => pac.id !== p.id); const newPacientes = pacientes.filter(
(pac) => pac.id !== p.id
);
setPacientes(newPacientes); setPacientes(newPacientes);
alert(`Paciente ID: ${p.id} excluído`); alert(`Paciente ID: ${p.id} excluído`);
}} }}
@ -303,7 +340,9 @@ export default function PacientesPage() {
</div> </div>
{/* Layout em Cards/Lista para Telas Pequenas */} {/* Layout em Cards/Lista para Telas Pequenas */}
<div className="md:hidden divide-y divide-border"> {/* Visível apenas em telas pequenas */} <div className="md:hidden divide-y divide-border">
{" "}
{/* Visível apenas em telas pequenas */}
{loading ? ( {loading ? (
<div className="p-6 text-muted-foreground text-center"> <div className="p-6 text-muted-foreground text-center">
<Loader2 className="w-6 h-6 animate-spin mx-auto text-primary" /> <Loader2 className="w-6 h-6 animate-spin mx-auto text-primary" />
@ -317,9 +356,16 @@ export default function PacientesPage() {
</div> </div>
) : ( ) : (
currentItems.map((p) => ( currentItems.map((p) => (
<div key={p.id} className="flex items-center justify-between p-4 hover:bg-accent/40 transition-colors"> <div
<div className="flex-1 min-w-0 pr-4"> {/* Adicionado padding à direita */} key={p.id}
<div className="text-base font-semibold text-foreground break-words"> {/* Aumentado a fonte e break-words para evitar corte do nome */} className="flex items-center justify-between p-4 hover:bg-accent/40 transition-colors"
>
<div className="flex-1 min-w-0 pr-4">
{" "}
{/* Adicionado padding à direita */}
<div className="text-base font-semibold text-foreground break-words">
{" "}
{/* Aumentado a fonte e break-words para evitar corte do nome */}
{p.nome || "—"} {p.nome || "—"}
</div> </div>
{/* Removido o 'truncate' e adicionado 'break-words' no telefone */} {/* Removido o 'truncate' e adicionado 'break-words' no telefone */}
@ -345,13 +391,19 @@ export default function PacientesPage() {
Laudos Laudos
</Link> </Link>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem onClick={() => alert(`Agenda para paciente ID: ${p.id}`)}> <DropdownMenuItem
onClick={() =>
alert(`Agenda para paciente ID: ${p.id}`)
}
>
<Calendar className="w-4 h-4 mr-2" /> <Calendar className="w-4 h-4 mr-2" />
Ver agenda Ver agenda
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem <DropdownMenuItem
onClick={() => { onClick={() => {
const newPacientes = pacientes.filter((pac) => pac.id !== p.id); const newPacientes = pacientes.filter(
(pac) => pac.id !== p.id
);
setPacientes(newPacientes); setPacientes(newPacientes);
alert(`Paciente ID: ${p.id} excluído`); alert(`Paciente ID: ${p.id} excluído`);
}} }}
@ -368,11 +420,9 @@ export default function PacientesPage() {
)} )}
</div> </div>
{/* Paginação */} {/* Paginação */}
{totalPages > 1 && ( {totalPages > 1 && (
<div className="flex flex-wrap justify-center items-center gap-2 border-t border-border p-4 bg-muted/40"> <div className="flex flex-wrap justify-center items-center gap-2 border-t border-border p-4 bg-muted/40">
{/* Botão Anterior */} {/* Botão Anterior */}
<button <button
onClick={goToPrevPage} onClick={goToPrevPage}
@ -389,7 +439,7 @@ export default function PacientesPage() {
onClick={() => paginate(number)} onClick={() => paginate(number)}
className={`px-4 py-2 rounded-md font-medium transition-colors text-sm border border-border ${ className={`px-4 py-2 rounded-md font-medium transition-colors text-sm border border-border ${
currentPage === number currentPage === number
? "bg-green-600 text-primary-foreground shadow-md border-green-600" ? "bg-blue-600 text-primary-foreground shadow-md border-blue-600"
: "bg-secondary text-secondary-foreground hover:bg-secondary/80" : "bg-secondary text-secondary-foreground hover:bg-secondary/80"
}`} }`}
> >
@ -405,7 +455,6 @@ export default function PacientesPage() {
> >
{"Próximo >"} {"Próximo >"}
</button> </button>
</div> </div>
)} )}
</div> </div>

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

@ -1,6 +1,12 @@
"use client"; "use client";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Calendar, Clock, Plus, User } from "lucide-react"; import { Calendar, Clock, Plus, User } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
@ -60,7 +66,9 @@ export default function ManagerDashboard() {
{/* Cabeçalho */} {/* Cabeçalho */}
<div> <div>
<h1 className="text-3xl font-bold text-gray-900">Dashboard</h1> <h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
<p className="text-gray-600">Bem-vindo ao seu portal de consultas médicas</p> <p className="text-gray-600">
Bem-vindo ao seu portal de consultas médicas
</p>
</div> </div>
{/* Cards principais */} {/* Cards principais */}
@ -68,33 +76,45 @@ export default function ManagerDashboard() {
{/* Card 1 */} {/* Card 1 */}
<Card> <Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Relatórios gerenciais</CardTitle> <CardTitle className="text-sm font-medium">
Relatórios gerenciais
</CardTitle>
<Calendar className="h-4 w-4 text-muted-foreground" /> <Calendar className="h-4 w-4 text-muted-foreground" />
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="text-2xl font-bold">0</div> <div className="text-2xl font-bold">0</div>
<p className="text-xs text-muted-foreground">Relatórios disponíveis</p> <p className="text-xs text-muted-foreground">
Relatórios disponíveis
</p>
</CardContent> </CardContent>
</Card> </Card>
{/* Card 2 — Gestão de usuários */} {/* Card 2 — Gestão de usuários */}
<Card> <Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Gestão de usuários</CardTitle> <CardTitle className="text-sm font-medium">
Gestão de usuários
</CardTitle>
<Clock className="h-4 w-4 text-muted-foreground" /> <Clock className="h-4 w-4 text-muted-foreground" />
</CardHeader> </CardHeader>
<CardContent> <CardContent>
{loadingUser ? ( {loadingUser ? (
<div className="text-gray-500 text-sm">Carregando usuário...</div> <div className="text-gray-500 text-sm">
Carregando usuário...
</div>
) : firstUser ? ( ) : firstUser ? (
<> <>
<div className="text-2xl font-bold">{firstUser.full_name || "Sem nome"}</div> <div className="text-2xl font-bold">
{firstUser.full_name || "Sem nome"}
</div>
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
{firstUser.email || "Sem e-mail cadastrado"} {firstUser.email || "Sem e-mail cadastrado"}
</p> </p>
</> </>
) : ( ) : (
<div className="text-sm text-gray-500">Nenhum usuário encontrado</div> <div className="text-sm text-gray-500">
Nenhum usuário encontrado
</div>
)} )}
</CardContent> </CardContent>
</Card> </Card>
@ -118,29 +138,40 @@ export default function ManagerDashboard() {
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle>Ações Rápidas</CardTitle> <CardTitle>Ações Rápidas</CardTitle>
<CardDescription>Acesse rapidamente as principais funcionalidades</CardDescription> <CardDescription>
Acesse rapidamente as principais funcionalidades
</CardDescription>
</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"> <Button className="w-full justify-start bg-blue-600 text-white hover:bg-blue-700">
<User className="mr-2 h-4 w-4" /> <User className="mr-2 h-4 w-4 text-white" />
Gestão de Médicos Gestão de Médicos
</Button> </Button>
</Link> </Link>
<Link href="/manager/usuario"> <Link href="/manager/usuario">
<Button variant="outline" className="w-full justify-start bg-transparent"> <Button
variant="outline"
className="w-full justify-start bg-transparent"
>
<User className="mr-2 h-4 w-4" /> <User className="mr-2 h-4 w-4" />
Usuários Cadastrados Usuários Cadastrados
</Button> </Button>
</Link> </Link>
<Link href="/manager/home/novo"> <Link href="/manager/home/novo">
<Button variant="outline" className="w-full justify-start bg-transparent"> <Button
variant="outline"
className="w-full justify-start bg-transparent"
>
<Plus className="mr-2 h-4 w-4" /> <Plus className="mr-2 h-4 w-4" />
Adicionar Novo Médico Adicionar Novo Médico
</Button> </Button>
</Link> </Link>
<Link href="/manager/usuario/novo"> <Link href="/manager/usuario/novo">
<Button variant="outline" className="w-full justify-start bg-transparent"> <Button
variant="outline"
className="w-full justify-start bg-transparent"
>
<Plus className="mr-2 h-4 w-4" /> <Plus className="mr-2 h-4 w-4" />
Criar novo Usuário Criar novo Usuário
</Button> </Button>
@ -152,13 +183,17 @@ export default function ManagerDashboard() {
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle>Gestão de Médicos</CardTitle> <CardTitle>Gestão de Médicos</CardTitle>
<CardDescription>Médicos cadastrados recentemente</CardDescription> <CardDescription>
Médicos cadastrados recentemente
</CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
{loadingDoctors ? ( {loadingDoctors ? (
<p className="text-sm text-gray-500">Carregando médicos...</p> <p className="text-sm text-gray-500">Carregando médicos...</p>
) : doctors.length === 0 ? ( ) : doctors.length === 0 ? (
<p className="text-sm text-gray-500">Nenhum médico cadastrado.</p> <p className="text-sm text-gray-500">
Nenhum médico cadastrado.
</p>
) : ( ) : (
<div className="space-y-4"> <div className="space-y-4">
{doctors.map((doc, index) => ( {doctors.map((doc, index) => (
@ -167,7 +202,9 @@ export default function ManagerDashboard() {
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-green-50 rounded-lg border border-green-100"
> >
<div> <div>
<p className="font-medium">{doc.full_name || "Sem nome"}</p> <p className="font-medium">
{doc.full_name || "Sem nome"}
</p>
<p className="text-sm text-gray-600"> <p className="text-sm text-gray-600">
{doc.specialty || "Sem especialidade"} {doc.specialty || "Sem especialidade"}
</p> </p>

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

@ -1,18 +1,37 @@
"use client"; "use client";
import React, { useEffect, useState, useCallback, useMemo } from "react" import React, { useEffect, useState, useCallback, useMemo } from "react";
import Link from "next/link" import Link from "next/link";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import {
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" DropdownMenu,
import { Edit, Trash2, Eye, Calendar, Filter, Loader2 } from "lucide-react" DropdownMenuContent,
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog" DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Edit, Trash2, Eye, Calendar, Filter, Loader2 } from "lucide-react";
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { doctorsService } from "services/doctorsApi.mjs"; import { doctorsService } from "services/doctorsApi.mjs";
import Sidebar from "@/components/Sidebar"; import Sidebar from "@/components/Sidebar";
interface Doctor { interface Doctor {
id: number; id: number;
full_name: string; full_name: string;
@ -51,7 +70,9 @@ export default function DoctorsPage() {
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const [detailsDialogOpen, setDetailsDialogOpen] = useState(false); const [detailsDialogOpen, setDetailsDialogOpen] = useState(false);
const [doctorDetails, setDoctorDetails] = useState<DoctorDetails | null>(null); const [doctorDetails, setDoctorDetails] = useState<DoctorDetails | null>(
null
);
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false); const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
const [doctorToDeleteId, setDoctorToDeleteId] = useState<number | null>(null); const [doctorToDeleteId, setDoctorToDeleteId] = useState<number | null>(null);
@ -70,13 +91,16 @@ export default function DoctorsPage() {
const data: Doctor[] = await doctorsService.list(); const data: Doctor[] = await doctorsService.list();
const dataWithStatus = data.map((doc, index) => ({ const dataWithStatus = data.map((doc, index) => ({
...doc, ...doc,
status: index % 3 === 0 ? "Inativo" : index % 2 === 0 ? "Férias" : "Ativo", status:
index % 3 === 0 ? "Inativo" : index % 2 === 0 ? "Férias" : "Ativo",
})); }));
setDoctors(dataWithStatus || []); setDoctors(dataWithStatus || []);
setCurrentPage(1); setCurrentPage(1);
} catch (e: any) { } catch (e: any) {
console.error("Erro ao carregar lista de médicos:", e); console.error("Erro ao carregar lista de médicos:", e);
setError("Não foi possível carregar a lista de médicos. Verifique a conexão com a API."); setError(
"Não foi possível carregar a lista de médicos. Verifique a conexão com a API."
);
setDoctors([]); setDoctors([]);
} finally { } finally {
setLoading(false); setLoading(false);
@ -94,7 +118,10 @@ export default function DoctorsPage() {
crm: doctor.crm, crm: doctor.crm,
especialidade: doctor.specialty, especialidade: doctor.specialty,
contato: { celular: doctor.phone_mobile ?? undefined }, contato: { celular: doctor.phone_mobile ?? undefined },
endereco: { cidade: doctor.city ?? undefined, estado: doctor.state ?? undefined }, endereco: {
cidade: doctor.city ?? undefined,
estado: doctor.state ?? undefined,
},
status: doctor.status || "Ativo", status: doctor.status || "Ativo",
convenio: "Particular", convenio: "Particular",
vip: false, vip: false,
@ -125,13 +152,17 @@ export default function DoctorsPage() {
}; };
const uniqueSpecialties = useMemo(() => { const uniqueSpecialties = useMemo(() => {
const specialties = doctors.map((doctor) => doctor.specialty).filter(Boolean); const specialties = doctors
.map((doctor) => doctor.specialty)
.filter(Boolean);
return [...new Set(specialties)]; return [...new Set(specialties)];
}, [doctors]); }, [doctors]);
const filteredDoctors = doctors.filter((doctor) => { const filteredDoctors = doctors.filter((doctor) => {
const specialtyMatch = specialtyFilter === "all" || doctor.specialty === specialtyFilter; const specialtyMatch =
const statusMatch = statusFilter === "all" || doctor.status === statusFilter; specialtyFilter === "all" || doctor.specialty === specialtyFilter;
const statusMatch =
statusFilter === "all" || doctor.status === statusFilter;
return specialtyMatch && statusMatch; return specialtyMatch && statusMatch;
}); });
@ -184,15 +215,21 @@ 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">Médicos Cadastrados</h1> <h1 className="text-2xl font-bold text-gray-900">
<p className="text-sm text-gray-500">Gerencie todos os profissionais de saúde.</p> Médicos Cadastrados
</h1>
<p className="text-sm text-gray-500">
Gerencie todos os profissionais de saúde.
</p>
</div> </div>
</div> </div>
{/* Filtros e Itens por Página */} {/* Filtros e Itens por Página */}
<div className="flex flex-wrap items-center gap-3 bg-white p-3 sm:p-4 rounded-lg border border-gray-200"> <div className="flex flex-wrap items-center gap-3 bg-white p-3 sm:p-4 rounded-lg border border-gray-200">
<div className="flex items-center gap-2 w-full md:w-auto"> <div className="flex items-center gap-2 w-full md:w-auto">
<span className="text-sm font-medium text-foreground">Especialidade</span> <span className="text-sm font-medium text-foreground">
Especialidade
</span>
<Select value={specialtyFilter} onValueChange={setSpecialtyFilter}> <Select value={specialtyFilter} onValueChange={setSpecialtyFilter}>
<SelectTrigger className="w-[160px] sm:w-[180px]"> <SelectTrigger className="w-[160px] sm:w-[180px]">
<SelectValue placeholder="Especialidade" /> <SelectValue placeholder="Especialidade" />
@ -222,8 +259,13 @@ export default function DoctorsPage() {
</Select> </Select>
</div> </div>
<div className="flex items-center gap-2 w-full md:w-auto"> <div className="flex items-center gap-2 w-full md:w-auto">
<span className="text-sm font-medium text-foreground">Itens por página</span> <span className="text-sm font-medium text-foreground">
<Select onValueChange={handleItemsPerPageChange} defaultValue={String(itemsPerPage)}> Itens por página
</span>
<Select
onValueChange={handleItemsPerPageChange}
defaultValue={String(itemsPerPage)}
>
<SelectTrigger className="w-[140px]"> <SelectTrigger className="w-[140px]">
<SelectValue placeholder="Itens por pág." /> <SelectValue placeholder="Itens por pág." />
</SelectTrigger> </SelectTrigger>
@ -251,43 +293,79 @@ export default function DoctorsPage() {
<div className="p-8 text-center text-red-600">{error}</div> <div className="p-8 text-center text-red-600">{error}</div>
) : filteredDoctors.length === 0 ? ( ) : filteredDoctors.length === 0 ? (
<div className="p-8 text-center text-gray-500"> <div className="p-8 text-center text-gray-500">
{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 encontrado com os filtros aplicados." Nenhum médico cadastrado.{" "}
} <Link
href="/manager/home/novo"
className="text-green-600 hover:underline"
>
Adicione um novo
</Link>
.
</>
) : (
"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-gray-50 border-b border-gray-200">
<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-gray-700">
<th className="text-left p-2 md:p-4 font-medium text-gray-700">CRM</th> Nome
<th className="text-left p-2 md:p-4 font-medium text-gray-700">Especialidade</th> </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-gray-700">
<th className="text-left p-2 md:p-4 font-medium text-gray-700 hidden xl:table-cell">Cidade/Estado</th> CRM
<th className="text-right p-4 font-medium text-gray-700">Ações</th> </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-gray-700 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-right p-4 font-medium text-gray-700">
Ações
</th>
</tr> </tr>
</thead> </thead>
<tbody className="bg-white divide-y divide-gray-200"> <tbody className="bg-white divide-y divide-gray-200">
{currentItems.map((doctor) => ( {currentItems.map((doctor) => (
<tr key={doctor.id} className="hover:bg-gray-50 transition"> <tr key={doctor.id} className="hover:bg-gray-50 transition">
<td className="px-4 py-3 font-medium text-gray-900">{doctor.full_name}</td> <td className="px-4 py-3 font-medium text-gray-900">
<td className="px-4 py-3 text-gray-500 hidden sm:table-cell">{doctor.crm}</td> {doctor.full_name}
<td className="px-4 py-3 text-gray-500 hidden md:table-cell">{doctor.specialty}</td> </td>
<td className="px-4 py-3 text-gray-500 hidden lg:table-cell">{doctor.status || "N/A"}</td> <td className="px-4 py-3 text-gray-500 hidden sm:table-cell">
{doctor.crm}
</td>
<td className="px-4 py-3 text-gray-500 hidden md:table-cell">
{doctor.specialty}
</td>
<td className="px-4 py-3 text-gray-500 hidden lg:table-cell">
{doctor.status || "N/A"}
</td>
<td className="px-4 py-3 text-gray-500 hidden xl:table-cell"> <td className="px-4 py-3 text-gray-500 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"}
</td> </td>
<td className="px-4 py-3 text-right"> <td className="px-4 py-3 text-right">
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<div className="text-blue-600 cursor-pointer inline-block">Ações</div> <div className="text-blue-600 cursor-pointer inline-block">
Ações
</div>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end"> <DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => openDetailsDialog(doctor)}> <DropdownMenuItem
onClick={() => openDetailsDialog(doctor)}
>
<Eye className="mr-2 h-4 w-4" /> <Eye className="mr-2 h-4 w-4" />
Ver detalhes Ver detalhes
</DropdownMenuItem> </DropdownMenuItem>
@ -301,7 +379,10 @@ 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-red-600"
onClick={() => openDeleteDialog(doctor.id)}
>
<Trash2 className="mr-2 h-4 w-4" /> <Trash2 className="mr-2 h-4 w-4" />
Excluir Excluir
</DropdownMenuItem> </DropdownMenuItem>
@ -327,25 +408,46 @@ export default function DoctorsPage() {
<div className="p-8 text-center text-red-600">{error}</div> <div className="p-8 text-center text-red-600">{error}</div>
) : filteredDoctors.length === 0 ? ( ) : filteredDoctors.length === 0 ? (
<div className="p-8 text-center text-gray-500"> <div className="p-8 text-center text-gray-500">
{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 encontrado com os filtros aplicados." Nenhum médico cadastrado.{" "}
} <Link
href="/manager/home/novo"
className="text-green-600 hover:underline"
>
Adicione um novo
</Link>
.
</>
) : (
"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-white-50 rounded-lg p-4 flex justify-between items-center border border-white-200"> <div
key={doctor.id}
className="bg-white-50 rounded-lg p-4 flex justify-between items-center border border-white-200"
>
<div> <div>
<div className="font-semibold text-gray-900">{doctor.full_name}</div> <div className="font-semibold text-gray-900">
<div className="text-sm text-gray-600">{doctor.specialty}</div> {doctor.full_name}
</div>
<div className="text-sm text-gray-600">
{doctor.specialty}
</div>
</div> </div>
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<div className="text-blue-600 cursor-pointer inline-block">Ações</div> <div className="text-blue-600 cursor-pointer inline-block">
Ações
</div>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end"> <DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => openDetailsDialog(doctor)}> <DropdownMenuItem
onClick={() => openDetailsDialog(doctor)}
>
<Eye className="mr-2 h-4 w-4" /> <Eye className="mr-2 h-4 w-4" />
Ver detalhes Ver detalhes
</DropdownMenuItem> </DropdownMenuItem>
@ -359,7 +461,10 @@ 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-red-600"
onClick={() => openDeleteDialog(doctor.id)}
>
<Trash2 className="mr-2 h-4 w-4" /> <Trash2 className="mr-2 h-4 w-4" />
Excluir Excluir
</DropdownMenuItem> </DropdownMenuItem>
@ -388,7 +493,7 @@ export default function DoctorsPage() {
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 border-gray-300 ${
currentPage === number currentPage === number
? "bg-green-600 text-white shadow-md border-green-600" ? "bg-blue-600 text-white shadow-md border-blue-600"
: "bg-gray-100 text-gray-700 hover:bg-gray-200" : "bg-gray-100 text-gray-700 hover:bg-gray-200"
}`} }`}
> >
@ -411,62 +516,91 @@ export default function DoctorsPage() {
<AlertDialogContent> <AlertDialogContent>
<AlertDialogHeader> <AlertDialogHeader>
<AlertDialogTitle>Confirma a exclusão?</AlertDialogTitle> <AlertDialogTitle>Confirma a exclusão?</AlertDialogTitle>
<AlertDialogDescription>Esta ação é irreversível e excluirá permanentemente o registro deste médico.</AlertDialogDescription> <AlertDialogDescription>
Esta ação é irreversível e excluirá permanentemente o registro
deste médico.
</AlertDialogDescription>
</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
{loading ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : null} onClick={handleDelete}
className="bg-red-600 hover:bg-red-700"
disabled={loading}
>
{loading ? (
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
) : null}
Excluir Excluir
</AlertDialogAction> </AlertDialogAction>
</AlertDialogFooter> </AlertDialogFooter>
</AlertDialogContent> </AlertDialogContent>
</AlertDialog> </AlertDialog>
<AlertDialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}> <AlertDialog
open={detailsDialogOpen}
onOpenChange={setDetailsDialogOpen}
>
<AlertDialogContent className="max-w-[95%] sm:max-w-lg"> <AlertDialogContent className="max-w-[95%] sm:max-w-lg">
<AlertDialogHeader> <AlertDialogHeader>
<AlertDialogTitle className="text-2xl">{doctorDetails?.nome}</AlertDialogTitle> <AlertDialogTitle className="text-2xl">
{doctorDetails?.nome}
</AlertDialogTitle>
<AlertDialogDescription className="text-left text-gray-700"> <AlertDialogDescription className="text-left text-gray-700">
{doctorDetails && ( {doctorDetails && (
<div className="space-y-3 text-left"> <div className="space-y-3 text-left">
<h3 className="font-semibold mt-2">Informações Principais</h3> <h3 className="font-semibold mt-2">
Informações Principais
</h3>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-y-2 gap-x-4 text-sm"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-y-2 gap-x-4 text-sm">
<div> <div>
<strong>CRM:</strong> {doctorDetails.crm} <strong>CRM:</strong> {doctorDetails.crm}
</div> </div>
<div> <div>
<strong>Especialidade:</strong> {doctorDetails.especialidade} <strong>Especialidade:</strong>{" "}
{doctorDetails.especialidade}
</div> </div>
<div> <div>
<strong>Celular:</strong> {doctorDetails.contato.celular || "N/A"} <strong>Celular:</strong>{" "}
{doctorDetails.contato.celular || "N/A"}
</div> </div>
<div> <div>
<strong>Localização:</strong> {`${doctorDetails.endereco.cidade || "N/A"}/${doctorDetails.endereco.estado || "N/A"}`} <strong>Localização:</strong>{" "}
{`${doctorDetails.endereco.cidade || "N/A"}/${
doctorDetails.endereco.estado || "N/A"
}`}
</div> </div>
</div> </div>
<h3 className="font-semibold mt-4">Atendimento e Convênio</h3> <h3 className="font-semibold mt-4">
Atendimento e Convênio
</h3>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-y-2 gap-x-4 text-sm"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-y-2 gap-x-4 text-sm">
<div> <div>
<strong>Convênio:</strong> {doctorDetails.convenio || "N/A"} <strong>Convênio:</strong>{" "}
{doctorDetails.convenio || "N/A"}
</div> </div>
<div> <div>
<strong>VIP:</strong> {doctorDetails.vip ? "Sim" : "Não"} <strong>VIP:</strong>{" "}
{doctorDetails.vip ? "Sim" : "Não"}
</div> </div>
<div> <div>
<strong>Status:</strong> {doctorDetails.status || "N/A"} <strong>Status:</strong> {doctorDetails.status || "N/A"}
</div> </div>
<div> <div>
<strong>Último atendimento:</strong> {doctorDetails.ultimo_atendimento || "N/A"} <strong>Último atendimento:</strong>{" "}
{doctorDetails.ultimo_atendimento || "N/A"}
</div> </div>
<div> <div>
<strong>Próximo atendimento:</strong> {doctorDetails.proximo_atendimento || "N/A"} <strong>Próximo atendimento:</strong>{" "}
{doctorDetails.proximo_atendimento || "N/A"}
</div> </div>
</div> </div>
</div> </div>
)} )}
{doctorDetails === null && !loading && <div className="text-red-600">Detalhes não disponíveis.</div>} {doctorDetails === null && !loading && (
<div className="text-red-600">Detalhes não disponíveis.</div>
)}
</AlertDialogDescription> </AlertDialogDescription>
</AlertDialogHeader> </AlertDialogHeader>
<AlertDialogFooter> <AlertDialogFooter>

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

@ -3,10 +3,30 @@
import { useState, useEffect, useCallback } from "react"; import { useState, useEffect, useCallback } from "react";
import Link from "next/link"; import Link from "next/link";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"; import {
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Edit, Trash2, Eye, Calendar, Filter, Loader2 } from "lucide-react"; import { Edit, Trash2, Eye, Calendar, Filter, Loader2 } from "lucide-react";
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog"; import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { patientsService } from "@/services/patientsApi.mjs"; import { patientsService } from "@/services/patientsApi.mjs";
import Sidebar from "@/components/Sidebar"; import Sidebar from "@/components/Sidebar";
@ -46,8 +66,7 @@ export default function PacientesPage() {
// --- 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 {
@ -61,8 +80,8 @@ export default function PacientesPage() {
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,
@ -75,9 +94,7 @@ export default function PacientesPage() {
} 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(() => {
@ -89,8 +106,7 @@ export default function PacientesPage() {
// 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 =
@ -112,7 +128,6 @@ 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) => {
@ -130,9 +145,11 @@ export default function PacientesPage() {
try { try {
await patientsService.delete(patientId); await patientsService.delete(patientId);
// Atualiza a lista completa para refletir a exclusão // Atualiza a lista completa para refletir a exclusão
setAllPatients((prev) => prev.filter((p) => String(p.id) !== String(patientId))); setAllPatients((prev) =>
prev.filter((p) => String(p.id) !== String(patientId))
);
} catch (e: any) { } catch (e: any) {
alert(`Erro ao deletar paciente: ${e?.message || 'Erro desconhecido'}`); alert(`Erro ao deletar paciente: ${e?.message || "Erro desconhecido"}`);
} }
setDeleteDialogOpen(false); setDeleteDialogOpen(false);
setPatientToDelete(null); setPatientToDelete(null);
@ -149,8 +166,12 @@ 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">Pacientes</h1> <h1 className="text-xl md:text-2xl font-bold text-foreground">
<p className="text-muted-foreground text-sm md:text-base">Gerencie as informações de seus pacientes</p> Pacientes
</h1>
<p className="text-muted-foreground text-sm md:text-base">
Gerencie as informações de seus pacientes
</p>
</div> </div>
</div> </div>
@ -171,9 +192,13 @@ export default function PacientesPage() {
{/* 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">Convênio</span> <span className="text-sm font-medium text-foreground whitespace-nowrap hidden md:block">
Convênio
</span>
<Select value={convenioFilter} onValueChange={setConvenioFilter}> <Select value={convenioFilter} onValueChange={setConvenioFilter}>
<SelectTrigger className="w-full sm:w-40"> {/* w-full para mobile, w-40 para sm+ */} <SelectTrigger className="w-full sm:w-40">
{" "}
{/* w-full para mobile, w-40 para sm+ */}
<SelectValue placeholder="Convênio" /> <SelectValue placeholder="Convênio" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@ -188,9 +213,13 @@ export default function PacientesPage() {
{/* 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 text-foreground 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>
@ -211,69 +240,115 @@ export default function PacientesPage() {
{/* --- 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-white rounded-lg border border-gray-200 shadow-md hidden md:block">
<div className="overflow-x-auto"> {/* Permite rolagem horizontal se a tabela for muito larga */} <div className="overflow-x-auto">
{" "}
{/* 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-red-600">{`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-gray-500 flex items-center justify-center">
<Loader2 className="w-6 h-6 mr-2 animate-spin text-green-600" /> Carregando pacientes... <Loader2 className="w-6 h-6 mr-2 animate-spin text-green-600" />{" "}
Carregando pacientes...
</div> </div>
) : ( ) : (
<table className="w-full min-w-[650px]"> {/* min-w para evitar que a tabela se contraia demais */} <table className="w-full min-w-[650px]">
{" "}
{/* min-w para evitar que a tabela se contraia demais */}
<thead className="bg-gray-50 border-b border-gray-200"> <thead className="bg-gray-50 border-b border-gray-200">
<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-gray-700 w-[20%]">
Nome
</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">Telefone</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-gray-700 w-[15%] hidden md:table-cell">Cidade / Estado</th> Telefone
<th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden sm:table-cell">Convênio</th> </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-gray-700 w-[15%] hidden md:table-cell">
<th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden lg:table-cell">Próximo atendimento</th> Cidade / Estado
<th className="text-left p-4 font-medium text-gray-700 w-[5%]">Ações</th> </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-gray-700 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-gray-700 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-gray-500">
{allPatients.length === 0 ? "Nenhum paciente cadastrado" : "Nenhum paciente encontrado com os filtros aplicados"} {allPatients.length === 0
? "Nenhum paciente cadastrado"
: "Nenhum paciente encontrado com os filtros aplicados"}
</td> </td>
</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 border-gray-100 hover:bg-gray-50"
>
<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-green-100 rounded-full flex items-center justify-center"> <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
<span className="text-green-600 font-medium text-sm">{patient.nome?.charAt(0) || "?"}</span> <span className="text-blue-600 font-medium text-sm">
{patient.nome?.charAt(0) || "?"}
</span>
</div> </div>
<span className="font-medium text-gray-900"> <span className="font-medium text-gray-900">
{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">VIP</span> <span className="ml-2 px-2 py-0.5 text-xs font-semibold text-purple-600 bg-purple-100 rounded-full">
VIP
</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-gray-600 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-gray-600 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-gray-600 hidden sm:table-cell">
<td className="p-4 text-gray-600 hidden lg:table-cell">{patient.ultimoAtendimento}</td> {patient.convenio}
<td className="p-4 text-gray-600 hidden lg:table-cell">{patient.proximoAtendimento}</td> </td>
<td className="p-4 text-gray-600 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"> <td className="p-4">
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<div className="text-blue-600 cursor-pointer">Ações</div> <div className="text-blue-600 cursor-pointer">
Ações
</div>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end"> <DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => openDetailsDialog(String(patient.id))}> <DropdownMenuItem
onClick={() =>
openDetailsDialog(String(patient.id))
}
>
<Eye className="w-4 h-4 mr-2" /> <Eye className="w-4 h-4 mr-2" />
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>
@ -283,7 +358,12 @@ 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-red-600"
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>
@ -306,38 +386,59 @@ export default function PacientesPage() {
<div className="p-6 text-red-600">{`Erro ao carregar pacientes: ${error}`}</div> <div className="p-6 text-red-600">{`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-gray-500 flex items-center justify-center">
<Loader2 className="w-6 h-6 mr-2 animate-spin text-green-600" /> Carregando pacientes... <Loader2 className="w-6 h-6 mr-2 animate-spin text-green-600" />{" "}
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-gray-500">
{allPatients.length === 0 ? "Nenhum paciente cadastrado" : "Nenhum paciente encontrado com os filtros aplicados"} {allPatients.length === 0
? "Nenhum paciente cadastrado"
: "Nenhum paciente encontrado com os filtros aplicados"}
</div> </div>
) : ( ) : (
<div className="space-y-4"> <div className="space-y-4">
{currentPatients.map((patient) => ( {currentPatients.map((patient) => (
<div 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"> <div
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"
>
<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 text-gray-900 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">VIP</span> <span className="ml-2 px-2 py-0.5 text-xs font-semibold text-purple-600 bg-purple-100 rounded-full">
VIP
</span>
)} )}
</div> </div>
<div className="text-sm text-gray-600">Telefone: {patient.telefone}</div> <div className="text-sm text-gray-600">
<div className="text-sm text-gray-600">Convênio: {patient.convenio}</div> Telefone: {patient.telefone}
</div>
<div className="text-sm text-gray-600">
Convênio: {patient.convenio}
</div>
</div> </div>
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<div className="w-full"><Button variant="outline" className="w-full">Ações</Button></div> <div className="w-full">
<Button variant="outline" className="w-full">
Ações
</Button>
</div>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end"> <DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => openDetailsDialog(String(patient.id))}> <DropdownMenuItem
onClick={() => openDetailsDialog(String(patient.id))}
>
<Eye className="w-4 h-4 mr-2" /> <Eye className="w-4 h-4 mr-2" />
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>
@ -347,7 +448,10 @@ 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-red-600"
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>
@ -362,7 +466,9 @@ 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-gray-200">
<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}
@ -371,7 +477,6 @@ export default function PacientesPage() {
> >
&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) => (
@ -380,14 +485,19 @@ export default function PacientesPage() {
onClick={() => setPage(pageNumber)} onClick={() => setPage(pageNumber)}
variant={pageNumber === page ? "default" : "outline"} variant={pageNumber === page ? "default" : "outline"}
size="lg" size="lg"
className={pageNumber === page ? "bg-green-600 hover:bg-green-700 text-white" : "text-gray-700"} className={
pageNumber === page
? "bg-blue-600 hover:bg-blue-700 text-white"
: "text-gray-700"
}
> >
{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"
@ -403,18 +513,29 @@ export default function PacientesPage() {
<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-red-600 hover:bg-red-700"
>
Excluir Excluir
</AlertDialogAction> </AlertDialogAction>
</AlertDialogFooter> </AlertDialogFooter>
</AlertDialogContent> </AlertDialogContent>
</AlertDialog> </AlertDialog>
<AlertDialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}> <AlertDialog
open={detailsDialogOpen}
onOpenChange={setDetailsDialogOpen}
>
<AlertDialogContent> <AlertDialogContent>
<AlertDialogHeader> <AlertDialogHeader>
<AlertDialogTitle>Detalhes do Paciente</AlertDialogTitle> <AlertDialogTitle>Detalhes do Paciente</AlertDialogTitle>

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

@ -3,9 +3,23 @@
import React, { useEffect, useState, useCallback } from "react"; import React, { useEffect, useState, useCallback } from "react";
import Link from "next/link"; import Link from "next/link";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Plus, Eye, Filter, Loader2 } from "lucide-react"; import { Plus, Eye, Filter, Loader2 } from "lucide-react";
import { AlertDialog, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog"; import {
AlertDialog,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { api, login } from "services/api.mjs"; import { api, login } from "services/api.mjs";
import { usersService } from "services/usersApi.mjs"; import { usersService } from "services/usersApi.mjs";
import Sidebar from "@/components/Sidebar"; import Sidebar from "@/components/Sidebar";
@ -31,9 +45,7 @@ export default function UsersPage() {
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const [detailsDialogOpen, setDetailsDialogOpen] = useState(false); const [detailsDialogOpen, setDetailsDialogOpen] = useState(false);
const [userDetails, setUserDetails] = useState<UserInfoResponse | null>( const [userDetails, setUserDetails] = useState<UserInfoResponse | null>(null);
null
);
const [selectedRole, setSelectedRole] = useState<string>("all"); const [selectedRole, setSelectedRole] = useState<string>("all");
// --- Lógica de Paginação INÍCIO --- // --- Lógica de Paginação INÍCIO ---
@ -166,7 +178,6 @@ export default function UsersPage() {
return ( return (
<Sidebar> <Sidebar>
<div className="space-y-6 px-2 sm:px-4 md:px-8"> <div className="space-y-6 px-2 sm:px-4 md:px-8">
{/* 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>
@ -174,7 +185,7 @@ export default function UsersPage() {
<p className="text-sm text-gray-500">Gerencie usuários.</p> <p className="text-sm text-gray-500">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-green-600 hover:bg-green-700"> <Button className="w-full sm:w-auto bg-blue-600 hover:bg-blue-700">
<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>
@ -182,7 +193,6 @@ export default function UsersPage() {
{/* Filtro e Itens por Página */} {/* Filtro e Itens por Página */}
<div className="flex flex-wrap items-center gap-3 bg-white p-4 rounded-lg border border-gray-200"> <div className="flex flex-wrap items-center gap-3 bg-white p-4 rounded-lg border border-gray-200">
{/* Select de Filtro por Papel - Ajustado para resetar a página */} {/* Select de Filtro por Papel - Ajustado para resetar a página */}
<div className="flex items-center gap-2 w-full md:w-auto"> <div className="flex items-center gap-2 w-full md:w-auto">
<span className="text-sm font-medium text-foreground whitespace-nowrap"> <span className="text-sm font-medium text-foreground whitespace-nowrap">
@ -193,9 +203,11 @@ export default function UsersPage() {
setSelectedRole(value); setSelectedRole(value);
setCurrentPage(1); setCurrentPage(1);
}} }}
value={selectedRole}> value={selectedRole}
>
<SelectTrigger className="w-full sm:w-[180px]"> {/* w-full para mobile, w-[180px] para sm+ */} <SelectTrigger className="w-full sm:w-[180px]">
{" "}
{/* w-full para mobile, w-[180px] para sm+ */}
<SelectValue placeholder="Filtrar por papel" /> <SelectValue placeholder="Filtrar por papel" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@ -218,7 +230,9 @@ export default function UsersPage() {
onValueChange={handleItemsPerPageChange} onValueChange={handleItemsPerPageChange}
defaultValue={String(itemsPerPage)} defaultValue={String(itemsPerPage)}
> >
<SelectTrigger className="w-full sm:w-[140px]"> {/* w-full para mobile, w-[140px] para sm+ */} <SelectTrigger className="w-full sm:w-[140px]">
{" "}
{/* w-full para mobile, w-[140px] para sm+ */}
<SelectValue placeholder="Itens por pág." /> <SelectValue placeholder="Itens por pág." />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@ -254,11 +268,21 @@ export default function UsersPage() {
<table className="min-w-full divide-y divide-gray-200 hidden md:table"> <table className="min-w-full divide-y divide-gray-200 hidden md:table">
<thead className="bg-gray-50"> <thead className="bg-gray-50">
<tr> <tr>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Nome</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-gray-500 uppercase">E-mail</th> Nome
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Telefone</th> </th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Cargo</th> <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Ações</th> E-mail
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
Telefone
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
Cargo
</th>
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">
Ações
</th>
</tr> </tr>
</thead> </thead>
<tbody className="bg-white divide-y divide-gray-200"> <tbody className="bg-white divide-y divide-gray-200">
@ -294,7 +318,10 @@ export default function UsersPage() {
{/* 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 divide-gray-200">
{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-gray-50"
>
<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 text-gray-900 truncate">
{u.full_name || "—"} {u.full_name || "—"}
@ -320,7 +347,6 @@ 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 border-gray-200">
{/* Botão Anterior */} {/* Botão Anterior */}
<button <button
onClick={goToPrevPage} onClick={goToPrevPage}
@ -335,8 +361,9 @@ 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 ${currentPage === number className={`px-4 py-2 rounded-md font-medium transition-colors text-sm border border-gray-300 ${
? "bg-green-600 text-white shadow-md border-green-600" currentPage === number
? "bg-blue-600 text-white shadow-md border-blue-600"
: "bg-gray-100 text-gray-700 hover:bg-gray-200" : "bg-gray-100 text-gray-700 hover:bg-gray-200"
}`} }`}
> >
@ -352,7 +379,6 @@ export default function UsersPage() {
> >
{"Próximo >"} {"Próximo >"}
</button> </button>
</div> </div>
)} )}
</> </>
@ -360,7 +386,10 @@ export default function UsersPage() {
</div> </div>
{/* Modal de Detalhes */} {/* Modal de Detalhes */}
<AlertDialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}> <AlertDialog
open={detailsDialogOpen}
onOpenChange={setDetailsDialogOpen}
>
<AlertDialogContent> <AlertDialogContent>
<AlertDialogHeader> <AlertDialogHeader>
<AlertDialogTitle className="text-2xl"> <AlertDialogTitle className="text-2xl">
@ -388,19 +417,25 @@ export default function UsersPage() {
<strong>Telefone:</strong> {userDetails.profile.phone} <strong>Telefone:</strong> {userDetails.profile.phone}
</div> </div>
<div> <div>
<strong>Roles:</strong>{" "} <strong>Roles:</strong> {userDetails.roles?.join(", ")}
{userDetails.roles?.join(", ")}
</div> </div>
<div className="pt-2"> <div className="pt-2">
<strong className="block mb-1">Permissões:</strong> <strong className="block mb-1">Permissões:</strong>
<ul className="list-disc list-inside space-y-0.5 text-sm"> <ul className="list-disc list-inside space-y-0.5 text-sm">
{Object.entries( {Object.entries(userDetails.permissions || {}).map(
userDetails.permissions || {} ([k, v]) => (
).map(([k, v]) => (
<li key={k}> <li key={k}>
{k}: <span className={`font-semibold ${v ? 'text-green-600' : 'text-red-600'}`}>{v ? "Sim" : "Não"}</span> {k}:{" "}
<span
className={`font-semibold ${
v ? "text-green-600" : "text-red-600"
}`}
>
{v ? "Sim" : "Não"}
</span>
</li> </li>
))} )
)}
</ul> </ul>
</div> </div>
</div> </div>

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

@ -1,8 +1,14 @@
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import {
import { Button } from "@/components/ui/button" Card,
import { Calendar, Clock, User, Plus } from "lucide-react" CardContent,
import Link from "next/link" CardDescription,
import Sidebar from "@/components/Sidebar" CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Calendar, Clock, User, Plus } from "lucide-react";
import Link from "next/link";
import Sidebar from "@/components/Sidebar";
export default function PatientDashboard() { export default function PatientDashboard() {
return ( return (
@ -10,13 +16,17 @@ export default function PatientDashboard() {
<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-gray-900">Dashboard</h1>
<p className="text-gray-600">Bem-vindo ao seu portal de consultas médicas</p> <p className="text-gray-600">
Bem-vindo ao seu portal de consultas médicas
</p>
</div> </div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<Card> <Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Próxima Consulta</CardTitle> <CardTitle className="text-sm font-medium">
Próxima Consulta
</CardTitle>
<Calendar className="h-4 w-4 text-muted-foreground" /> <Calendar className="h-4 w-4 text-muted-foreground" />
</CardHeader> </CardHeader>
<CardContent> <CardContent>
@ -27,12 +37,16 @@ export default function PatientDashboard() {
<Card> <Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Consultas Este Mês</CardTitle> <CardTitle className="text-sm font-medium">
Consultas Este Mês
</CardTitle>
<Clock className="h-4 w-4 text-muted-foreground" /> <Clock className="h-4 w-4 text-muted-foreground" />
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="text-2xl font-bold">3</div> <div className="text-2xl font-bold">3</div>
<p className="text-xs text-muted-foreground">2 realizadas, 1 agendada</p> <p className="text-xs text-muted-foreground">
2 realizadas, 1 agendada
</p>
</CardContent> </CardContent>
</Card> </Card>
@ -52,23 +66,31 @@ export default function PatientDashboard() {
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle>Ações Rápidas</CardTitle> <CardTitle>Ações Rápidas</CardTitle>
<CardDescription>Acesse rapidamente as principais funcionalidades</CardDescription> <CardDescription>
Acesse rapidamente as principais funcionalidades
</CardDescription>
</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"> <Button className="w-full justify-start bg-blue-600 text-white hover:bg-blue-700">
<Plus className="mr-2 h-4 w-4" /> <User className="mr-2 h-4 w-4 text-white" />
Agendar Nova Consulta Agendar Nova Consulta
</Button> </Button>
</Link> </Link>
<Link href="/patient/appointments"> <Link href="/patient/appointments">
<Button variant="outline" className="w-full justify-start bg-transparent"> <Button
variant="outline"
className="w-full justify-start bg-transparent"
>
<Calendar className="mr-2 h-4 w-4" /> <Calendar className="mr-2 h-4 w-4" />
Ver Minhas Consultas Ver Minhas Consultas
</Button> </Button>
</Link> </Link>
<Link href="/patient/profile"> <Link href="/patient/profile">
<Button variant="outline" className="w-full justify-start bg-transparent"> <Button
variant="outline"
className="w-full justify-start bg-transparent"
>
<User className="mr-2 h-4 w-4" /> <User className="mr-2 h-4 w-4" />
Atualizar Dados Atualizar Dados
</Button> </Button>
@ -109,5 +131,5 @@ export default function PatientDashboard() {
</div> </div>
</div> </div>
</Sidebar> </Sidebar>
) );
} }

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

@ -31,8 +31,12 @@ interface PatientProfileData {
} }
export default function PatientProfile() { export default function PatientProfile() {
const { user, isLoading: isAuthLoading } = useAuthLayout({ requiredRole: ["paciente", "admin", "medico", "gestor", "secretaria"] }); const { user, isLoading: isAuthLoading } = useAuthLayout({
const [patientData, setPatientData] = useState<PatientProfileData | null>(null); requiredRole: ["paciente", "admin", "medico", "gestor", "secretaria"],
});
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);
@ -56,14 +60,21 @@ export default function PatientProfile() {
}); });
} catch (error) { } catch (error) {
console.error("Erro ao buscar detalhes do paciente:", error); console.error("Erro ao buscar detalhes do paciente:", error);
toast({ title: "Erro", description: "Não foi possível carregar seus dados completos.", variant: "destructive" }); toast({
title: "Erro",
description: "Não foi possível carregar seus dados completos.",
variant: "destructive",
});
} }
}; };
fetchPatientDetails(); fetchPatientDetails();
} }
}, [user]); }, [user]);
const handleInputChange = (field: keyof PatientProfileData, value: string) => { const handleInputChange = (
field: keyof PatientProfileData,
value: string
) => {
setPatientData((prev) => (prev ? { ...prev, [field]: value } : null)); setPatientData((prev) => (prev ? { ...prev, [field]: value } : null));
}; };
@ -82,11 +93,18 @@ export default function PatientProfile() {
city: patientData.city, city: patientData.city,
}; };
await patientsService.update(user.id, patientPayload); await patientsService.update(user.id, patientPayload);
toast({ title: "Sucesso!", description: "Seus dados foram atualizados." }); toast({
title: "Sucesso!",
description: "Seus dados foram atualizados.",
});
setIsEditing(false); setIsEditing(false);
} catch (error) { } catch (error) {
console.error("Erro ao salvar dados:", error); console.error("Erro ao salvar dados:", error);
toast({ title: "Erro", description: "Não foi possível salvar suas alterações.", variant: "destructive" }); toast({
title: "Erro",
description: "Não foi possível salvar suas alterações.",
variant: "destructive",
});
} finally { } finally {
setIsSaving(false); setIsSaving(false);
} }
@ -96,7 +114,9 @@ export default function PatientProfile() {
fileInputRef.current?.click(); fileInputRef.current?.click();
}; };
const handleAvatarUpload = async (event: React.ChangeEvent<HTMLInputElement>) => { const handleAvatarUpload = async (
event: React.ChangeEvent<HTMLInputElement>
) => {
const file = event.target.files?.[0]; const file = event.target.files?.[0];
if (!file || !user) return; if (!file || !user) return;
@ -108,15 +128,26 @@ export default function PatientProfile() {
try { try {
await api.storage.upload("avatars", filePath, file); await api.storage.upload("avatars", filePath, file);
await api.patch(`/rest/v1/profiles?id=eq.${user.id}`, { avatar_url: filePath }); await api.patch(`/rest/v1/profiles?id=eq.${user.id}`, {
avatar_url: filePath,
});
const newFullUrl = `https://yuanqfswhberkoevtmfr.supabase.co/storage/v1/object/public/avatars/${filePath}?t=${new Date().getTime()}`; const newFullUrl = `https://yuanqfswhberkoevtmfr.supabase.co/storage/v1/object/public/avatars/${filePath}?t=${new Date().getTime()}`;
setPatientData((prev) => (prev ? { ...prev, avatarFullUrl: newFullUrl } : null)); setPatientData((prev) =>
prev ? { ...prev, avatarFullUrl: newFullUrl } : null
);
toast({ title: "Sucesso!", description: "Sua foto de perfil foi atualizada." }); toast({
title: "Sucesso!",
description: "Sua foto de perfil foi atualizada.",
});
} catch (error) { } catch (error) {
console.error("Erro no upload do avatar:", error); console.error("Erro no upload do avatar:", error);
toast({ title: "Erro de Upload", description: "Não foi possível enviar sua foto.", variant: "destructive" }); toast({
title: "Erro de Upload",
description: "Não foi possível enviar sua foto.",
variant: "destructive",
});
} }
}; };
@ -136,8 +167,16 @@ export default function PatientProfile() {
<h1 className="text-3xl font-bold text-gray-900">Meus Dados</h1> <h1 className="text-3xl font-bold text-gray-900">Meus Dados</h1>
<p className="text-gray-600">Gerencie suas informações pessoais</p> <p className="text-gray-600">Gerencie suas informações pessoais</p>
</div> </div>
<Button onClick={() => (isEditing ? handleSave() : setIsEditing(true))} disabled={isSaving}> <Button
{isEditing ? (isSaving ? "Salvando..." : "Salvar Alterações") : "Editar Dados"} onClick={() => (isEditing ? handleSave() : setIsEditing(true))}
disabled={isSaving}
className="bg-blue-600 hover:bg-blue-700 text-white"
>
{isEditing
? isSaving
? "Salvando..."
: "Salvar Alterações"
: "Editar Dados"}
</Button> </Button>
</div> </div>
@ -154,16 +193,36 @@ export default function PatientProfile() {
<div className="grid md:grid-cols-2 gap-4"> <div className="grid md:grid-cols-2 gap-4">
<div> <div>
<Label htmlFor="name">Nome Completo</Label> <Label htmlFor="name">Nome Completo</Label>
<Input id="name" value={patientData.name} onChange={(e) => handleInputChange("name", e.target.value)} disabled={!isEditing} /> <Input
id="name"
value={patientData.name}
onChange={(e) =>
handleInputChange("name", e.target.value)
}
disabled={!isEditing}
/>
</div> </div>
<div> <div>
<Label htmlFor="cpf">CPF</Label> <Label htmlFor="cpf">CPF</Label>
<Input id="cpf" value={patientData.cpf} onChange={(e) => handleInputChange("cpf", e.target.value)} disabled={!isEditing} /> <Input
id="cpf"
value={patientData.cpf}
onChange={(e) => handleInputChange("cpf", e.target.value)}
disabled={!isEditing}
/>
</div> </div>
</div> </div>
<div> <div>
<Label htmlFor="birthDate">Data de Nascimento</Label> <Label htmlFor="birthDate">Data de Nascimento</Label>
<Input id="birthDate" type="date" value={patientData.birthDate} onChange={(e) => handleInputChange("birthDate", e.target.value)} disabled={!isEditing} /> <Input
id="birthDate"
type="date"
value={patientData.birthDate}
onChange={(e) =>
handleInputChange("birthDate", e.target.value)
}
disabled={!isEditing}
/>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
@ -178,31 +237,69 @@ export default function PatientProfile() {
<div className="grid md:grid-cols-2 gap-4"> <div className="grid md:grid-cols-2 gap-4">
<div> <div>
<Label htmlFor="email">Email</Label> <Label htmlFor="email">Email</Label>
<Input id="email" type="email" value={patientData.email} disabled /> <Input
id="email"
type="email"
value={patientData.email}
disabled
/>
</div> </div>
<div> <div>
<Label htmlFor="phone">Telefone</Label> <Label htmlFor="phone">Telefone</Label>
<Input id="phone" value={patientData.phone} onChange={(e) => handleInputChange("phone", e.target.value)} disabled={!isEditing} /> <Input
id="phone"
value={patientData.phone}
onChange={(e) =>
handleInputChange("phone", e.target.value)
}
disabled={!isEditing}
/>
</div> </div>
</div> </div>
<div className="grid md:grid-cols-3 gap-4"> <div className="grid md:grid-cols-3 gap-4">
<div> <div>
<Label htmlFor="cep">CEP</Label> <Label htmlFor="cep">CEP</Label>
<Input id="cep" value={patientData.cep} onChange={(e) => handleInputChange("cep", e.target.value)} disabled={!isEditing} /> <Input
id="cep"
value={patientData.cep}
onChange={(e) => handleInputChange("cep", e.target.value)}
disabled={!isEditing}
/>
</div> </div>
<div className="md:col-span-2"> <div className="md:col-span-2">
<Label htmlFor="street">Rua / Logradouro</Label> <Label htmlFor="street">Rua / Logradouro</Label>
<Input id="street" value={patientData.street} onChange={(e) => handleInputChange("street", e.target.value)} disabled={!isEditing} /> <Input
id="street"
value={patientData.street}
onChange={(e) =>
handleInputChange("street", e.target.value)
}
disabled={!isEditing}
/>
</div> </div>
</div> </div>
<div className="grid md:grid-cols-2 gap-4"> <div className="grid md:grid-cols-2 gap-4">
<div> <div>
<Label htmlFor="number">Número</Label> <Label htmlFor="number">Número</Label>
<Input id="number" value={patientData.number} onChange={(e) => handleInputChange("number", e.target.value)} disabled={!isEditing} /> <Input
id="number"
value={patientData.number}
onChange={(e) =>
handleInputChange("number", e.target.value)
}
disabled={!isEditing}
/>
</div> </div>
<div> <div>
<Label htmlFor="city">Cidade</Label> <Label htmlFor="city">Cidade</Label>
<Input id="city" value={patientData.city} onChange={(e) => handleInputChange("city", e.target.value)} disabled={!isEditing} /> <Input
id="city"
value={patientData.city}
onChange={(e) =>
handleInputChange("city", e.target.value)
}
disabled={!isEditing}
/>
</div> </div>
</div> </div>
</CardContent> </CardContent>
@ -217,7 +314,10 @@ export default function PatientProfile() {
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
<div className="relative"> <div className="relative">
<Avatar className="w-16 h-16 cursor-pointer" onClick={handleAvatarClick}> <Avatar
className="w-16 h-16 cursor-pointer"
onClick={handleAvatarClick}
>
<AvatarImage src={patientData.avatarFullUrl} /> <AvatarImage src={patientData.avatarFullUrl} />
<AvatarFallback className="text-2xl"> <AvatarFallback className="text-2xl">
{patientData.name {patientData.name
@ -226,10 +326,19 @@ export default function PatientProfile() {
.join("")} .join("")}
</AvatarFallback> </AvatarFallback>
</Avatar> </Avatar>
<div className="absolute bottom-0 right-0 bg-primary text-primary-foreground rounded-full p-1 cursor-pointer hover:bg-primary/80" onClick={handleAvatarClick}> <div
className="absolute bottom-0 right-0 bg-primary text-primary-foreground rounded-full p-1 cursor-pointer hover:bg-primary/80"
onClick={handleAvatarClick}
>
<Upload className="w-3 h-3" /> <Upload className="w-3 h-3" />
</div> </div>
<input type="file" ref={fileInputRef} onChange={handleAvatarUpload} className="hidden" accept="image/png, image/jpeg" /> <input
type="file"
ref={fileInputRef}
onChange={handleAvatarUpload}
className="hidden"
accept="image/png, image/jpeg"
/>
</div> </div>
<div> <div>
<p className="font-medium">{patientData.name}</p> <p className="font-medium">{patientData.name}</p>
@ -247,7 +356,14 @@ export default function PatientProfile() {
</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-gray-500" />
<span>{patientData.birthDate ? new Date(patientData.birthDate).toLocaleDateString("pt-BR", { timeZone: "UTC" }) : "Não informado"}</span> <span>
{patientData.birthDate
? new Date(patientData.birthDate).toLocaleDateString(
"pt-BR",
{ timeZone: "UTC" }
)
: "Não informado"}
</span>
</div> </div>
</div> </div>
</CardContent> </CardContent>

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

@ -1,11 +1,25 @@
"use client"; "use client";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
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 { Calendar, Clock, MapPin, Phone, User, Trash2, Pencil } from "lucide-react"; import {
Calendar,
Clock,
MapPin,
Phone,
User,
Trash2,
Pencil,
} from "lucide-react";
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";
@ -34,7 +48,7 @@ export default function SecretaryAppointments() {
try { try {
// 1. DEFINIR O PARÂMETRO DE ORDENAÇÃO // 1. DEFINIR O PARÂMETRO DE ORDENAÇÃO
// 'scheduled_at.desc' ordena pela data do agendamento, em ordem descendente (mais recentes primeiro). // 'scheduled_at.desc' ordena pela data do agendamento, em ordem descendente (mais recentes primeiro).
const queryParams = 'order=scheduled_at.desc'; 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 // 2. USAR A FUNÇÃO DE BUSCA COM O PARÂMETRO DE ORDENAÇÃO
@ -48,8 +62,13 @@ export default function SecretaryAppointments() {
const enrichedAppointments = appointmentList.map((apt: any) => ({ const enrichedAppointments = appointmentList.map((apt: any) => ({
...apt, ...apt,
patient: patientMap.get(apt.patient_id) || { full_name: "Paciente não encontrado" }, patient: patientMap.get(apt.patient_id) || {
doctor: doctorMap.get(apt.doctor_id) || { full_name: "Médico não encontrado", specialty: "N/A" }, full_name: "Paciente não encontrado",
},
doctor: doctorMap.get(apt.doctor_id) || {
full_name: "Médico não encontrado",
specialty: "N/A",
},
})); }));
setAppointments(enrichedAppointments); setAppointments(enrichedAppointments);
@ -71,21 +90,32 @@ export default function SecretaryAppointments() {
const appointmentDate = new Date(appointment.scheduled_at); const appointmentDate = new Date(appointment.scheduled_at);
setEditFormData({ setEditFormData({
date: appointmentDate.toISOString().split('T')[0], date: appointmentDate.toISOString().split("T")[0],
time: appointmentDate.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit', timeZone: 'UTC' }), time: appointmentDate.toLocaleTimeString("pt-BR", {
hour: "2-digit",
minute: "2-digit",
timeZone: "UTC",
}),
status: appointment.status, status: appointment.status,
}); });
setEditModal(true); setEditModal(true);
}; };
const confirmEdit = async () => { const confirmEdit = async () => {
if (!selectedAppointment || !editFormData.date || !editFormData.time || !editFormData.status) { if (
!selectedAppointment ||
!editFormData.date ||
!editFormData.time ||
!editFormData.status
) {
toast.error("Todos os campos são obrigatórios para a edição."); toast.error("Todos os campos são obrigatórios para a edição.");
return; return;
} }
try { try {
const newScheduledAt = new Date(`${editFormData.date}T${editFormData.time}:00Z`).toISOString(); const newScheduledAt = new Date(
`${editFormData.date}T${editFormData.time}:00Z`
).toISOString();
const updatePayload = { const updatePayload = {
scheduled_at: newScheduledAt, scheduled_at: newScheduledAt,
status: editFormData.status, status: editFormData.status,
@ -99,7 +129,6 @@ export default function SecretaryAppointments() {
setEditModal(false); setEditModal(false);
toast.success("Consulta atualizada com sucesso!"); toast.success("Consulta atualizada com sucesso!");
} catch (error) { } catch (error) {
console.error("Erro ao atualizar consulta:", error); console.error("Erro ao atualizar consulta:", error);
toast.error("Não foi possível atualizar a consulta."); toast.error("Não foi possível atualizar a consulta.");
@ -116,7 +145,9 @@ export default function SecretaryAppointments() {
if (!selectedAppointment) return; if (!selectedAppointment) return;
try { try {
await appointmentsService.delete(selectedAppointment.id); await appointmentsService.delete(selectedAppointment.id);
setAppointments((prev) => prev.filter((apt) => apt.id !== selectedAppointment.id)); setAppointments((prev) =>
prev.filter((apt) => apt.id !== selectedAppointment.id)
);
setDeleteModal(false); setDeleteModal(false);
toast.success("Consulta deletada com sucesso!"); toast.success("Consulta deletada com sucesso!");
} catch (error) { } catch (error) {
@ -127,41 +158,89 @@ export default function SecretaryAppointments() {
const getStatusBadge = (status: string) => { const getStatusBadge = (status: string) => {
switch (status) { switch (status) {
case "requested": return <Badge className="bg-yellow-100 text-yellow-800">Solicitada</Badge>; case "requested":
case "confirmed": return <Badge className="bg-blue-100 text-blue-800">Confirmada</Badge>; return (
case "checked_in": return <Badge className="bg-indigo-100 text-indigo-800">Check-in</Badge>; <Badge className="bg-yellow-100 text-yellow-800">Solicitada</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 "confirmed":
case "no_show": return <Badge className="bg-gray-100 text-gray-800">Não Compareceu</Badge>; return <Badge className="bg-blue-100 text-blue-800">Confirmada</Badge>;
default: return <Badge variant="secondary">{status}</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 timeSlots = [
const appointmentStatuses = ["requested", "confirmed", "checked_in", "completed", "cancelled", "no_show"]; "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"> <div className="flex justify-between items-center">
<div> <div>
<h1 className="text-3xl font-bold text-gray-900">Consultas Agendadas</h1> <h1 className="text-3xl font-bold text-gray-900">
Consultas Agendadas
</h1>
<p className="text-gray-600">Gerencie as consultas dos pacientes</p> <p className="text-gray-600">Gerencie as consultas dos pacientes</p>
</div> </div>
<Link href="/secretary/schedule"> <Link href="/secretary/schedule">
<Button><Calendar className="mr-2 h-4 w-4" /> Agendar Nova Consulta</Button> <Button className="bg-blue-600 hover:bg-blue-700 text-white">
<Calendar className="mr-2 h-4 w-4 text-white" />
Agendar Nova Consulta
</Button>
</Link> </Link>
</div> </div>
<div className="grid gap-6"> <div className="grid gap-6">
{isLoading ? <p>Carregando consultas...</p> : appointments.length > 0 ? ( {isLoading ? (
<p>Carregando consultas...</p>
) : appointments.length > 0 ? (
appointments.map((appointment) => ( appointments.map((appointment) => (
<Card key={appointment.id}> <Card key={appointment.id}>
<CardHeader> <CardHeader>
<div className="flex justify-between items-start"> <div className="flex justify-between items-start">
<div> <div>
<CardTitle className="text-lg">{appointment.doctor.full_name}</CardTitle> <CardTitle className="text-lg">
<CardDescription>{appointment.doctor.specialty}</CardDescription> {appointment.doctor.full_name}
</CardTitle>
<CardDescription>
{appointment.doctor.specialty}
</CardDescription>
</div> </div>
{getStatusBadge(appointment.status)} {getStatusBadge(appointment.status)}
</div> </div>
@ -175,11 +254,21 @@ export default function SecretaryAppointments() {
</div> </div>
<div className="flex items-center text-sm text-gray-600"> <div className="flex items-center text-sm text-gray-600">
<Calendar className="mr-2 h-4 w-4" /> <Calendar className="mr-2 h-4 w-4" />
{new Date(appointment.scheduled_at).toLocaleDateString("pt-BR", { timeZone: "UTC" })} {new Date(appointment.scheduled_at).toLocaleDateString(
"pt-BR",
{ timeZone: "UTC" }
)}
</div> </div>
<div className="flex items-center text-sm text-gray-600"> <div className="flex items-center text-sm text-gray-600">
<Clock className="mr-2 h-4 w-4" /> <Clock className="mr-2 h-4 w-4" />
{new Date(appointment.scheduled_at).toLocaleTimeString("pt-BR", { hour: '2-digit', minute: '2-digit', timeZone: "UTC" })} {new Date(appointment.scheduled_at).toLocaleTimeString(
"pt-BR",
{
hour: "2-digit",
minute: "2-digit",
timeZone: "UTC",
}
)}
</div> </div>
</div> </div>
<div className="space-y-3"> <div className="space-y-3">
@ -195,11 +284,20 @@ export default function SecretaryAppointments() {
</div> </div>
<div className="flex gap-2 mt-4 pt-4 border-t"> <div className="flex gap-2 mt-4 pt-4 border-t">
<Button variant="outline" size="sm" onClick={() => handleEdit(appointment)}> <Button
variant="outline"
size="sm"
onClick={() => handleEdit(appointment)}
>
<Pencil className="mr-2 h-4 w-4" /> <Pencil className="mr-2 h-4 w-4" />
Editar Editar
</Button> </Button>
<Button variant="outline" size="sm" className="text-red-600 hover:text-red-700 hover:bg-red-50 bg-transparent" onClick={() => handleDelete(appointment)}> <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" /> <Trash2 className="mr-2 h-4 w-4" />
Deletar Deletar
</Button> </Button>

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

@ -1,6 +1,9 @@
"use client"; "use client";
import { Card, CardContent, CardDescription, import {
Card,
CardContent,
CardDescription,
CardHeader, CardHeader,
CardTitle, CardTitle,
} from "@/components/ui/card"; } from "@/components/ui/card";
@ -102,7 +105,9 @@ export default function SecretaryDashboard() {
{/* Cabeçalho */} {/* Cabeçalho */}
<div> <div>
<h1 className="text-3xl font-bold text-gray-900">Dashboard</h1> <h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
<p className="text-gray-600">Bem-vindo ao seu portal de consultas médicas</p> <p className="text-gray-600">
Bem-vindo ao seu portal de consultas médicas
</p>
</div> </div>
{/* Cards principais */} {/* Cards principais */}
@ -132,12 +137,13 @@ export default function SecretaryDashboard() {
? `Dr(a). ${firstConfirmed.doctor_name}` ? `Dr(a). ${firstConfirmed.doctor_name}`
: "Médico não informado"}{" "} : "Médico não informado"}{" "}
-{" "} -{" "}
{new Date( {new Date(firstConfirmed.scheduled_at).toLocaleTimeString(
firstConfirmed.scheduled_at "pt-BR",
).toLocaleTimeString("pt-BR", { {
hour: "2-digit", hour: "2-digit",
minute: "2-digit", minute: "2-digit",
})} }
)}
</p> </p>
</> </>
) : ( ) : (
@ -164,20 +170,22 @@ export default function SecretaryDashboard() {
) : nextAgendada ? ( ) : nextAgendada ? (
<> <>
<div className="text-lg font-bold text-gray-900"> <div className="text-lg font-bold text-gray-900">
{new Date( {new Date(nextAgendada.scheduled_at).toLocaleDateString(
nextAgendada.scheduled_at "pt-BR",
).toLocaleDateString("pt-BR", { {
day: "2-digit", day: "2-digit",
month: "2-digit", month: "2-digit",
year: "numeric", year: "numeric",
})}{" "} }
)}{" "}
às{" "} às{" "}
{new Date( {new Date(nextAgendada.scheduled_at).toLocaleTimeString(
nextAgendada.scheduled_at "pt-BR",
).toLocaleTimeString("pt-BR", { {
hour: "2-digit", hour: "2-digit",
minute: "2-digit", minute: "2-digit",
})} }
)}
</div> </div>
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
{nextAgendada.doctor_name {nextAgendada.doctor_name
@ -223,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"> <Button className="w-full justify-start bg-blue-600 text-white hover:bg-blue-700">
<Plus className="mr-2 h-4 w-4" /> <User className="mr-2 h-4 w-4 text-white" />
Agendar Nova Consulta Agendar Nova Consulta
</Button> </Button>
</Link> </Link>
@ -253,15 +261,11 @@ export default function SecretaryDashboard() {
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle>Pacientes</CardTitle> <CardTitle>Pacientes</CardTitle>
<CardDescription> <CardDescription>Últimos pacientes cadastrados</CardDescription>
Últimos pacientes cadastrados
</CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
{loadingPatients ? ( {loadingPatients ? (
<p className="text-sm text-gray-500"> <p className="text-sm text-gray-500">Carregando pacientes...</p>
Carregando pacientes...
</p>
) : patients.length === 0 ? ( ) : patients.length === 0 ? (
<p className="text-sm text-gray-500"> <p className="text-sm text-gray-500">
Nenhum paciente cadastrado. Nenhum paciente cadastrado.

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

@ -4,10 +4,38 @@
import { useState, useEffect, useCallback } from "react"; import { useState, useEffect, useCallback } from "react";
import Link from "next/link"; import Link from "next/link";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"; import {
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; DropdownMenu,
import { Plus, Edit, Trash2, Eye, Calendar, Filter, Loader2 } from "lucide-react"; DropdownMenuContent,
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog"; DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import {
Plus,
Edit,
Trash2,
Eye,
Calendar,
Filter,
Loader2,
} from "lucide-react";
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { patientsService } from "@/services/patientsApi.mjs"; import { patientsService } from "@/services/patientsApi.mjs";
import Sidebar from "@/components/Sidebar"; import Sidebar from "@/components/Sidebar";
@ -47,8 +75,7 @@ export default function PacientesPage() {
// --- 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 {
@ -62,8 +89,8 @@ export default function PacientesPage() {
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,
@ -76,9 +103,7 @@ export default function PacientesPage() {
} 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(() => {
@ -90,8 +115,7 @@ export default function PacientesPage() {
// 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 =
@ -113,7 +137,6 @@ 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) => {
@ -131,9 +154,11 @@ export default function PacientesPage() {
try { try {
await patientsService.delete(patientId); await patientsService.delete(patientId);
// Atualiza a lista completa para refletir a exclusão // Atualiza a lista completa para refletir a exclusão
setAllPatients((prev) => prev.filter((p) => String(p.id) !== String(patientId))); setAllPatients((prev) =>
prev.filter((p) => String(p.id) !== String(patientId))
);
} catch (e: any) { } catch (e: any) {
alert(`Erro ao deletar paciente: ${e?.message || 'Erro desconhecido'}`); alert(`Erro ao deletar paciente: ${e?.message || "Erro desconhecido"}`);
} }
setDeleteDialogOpen(false); setDeleteDialogOpen(false);
setPatientToDelete(null); setPatientToDelete(null);
@ -150,12 +175,16 @@ 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">Pacientes</h1> <h1 className="text-xl md:text-2xl font-bold text-foreground">
<p className="text-muted-foreground text-sm md:text-base">Gerencie as informações de seus pacientes</p> Pacientes
</h1>
<p className="text-muted-foreground text-sm md:text-base">
Gerencie as informações de seus pacientes
</p>
</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-green-600 hover:bg-green-700"> <Button className="w-full bg-blue-600 hover:bg-blue-700">
<Plus className="w-4 h-4 mr-2" /> <Plus className="w-4 h-4 mr-2" />
Adicionar Adicionar
</Button> </Button>
@ -179,9 +208,13 @@ export default function PacientesPage() {
{/* 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">Convênio</span> <span className="text-sm font-medium text-foreground whitespace-nowrap hidden md:block">
Convênio
</span>
<Select value={convenioFilter} onValueChange={setConvenioFilter}> <Select value={convenioFilter} onValueChange={setConvenioFilter}>
<SelectTrigger className="w-full sm:w-40"> {/* w-full para mobile, w-40 para sm+ */} <SelectTrigger className="w-full sm:w-40">
{" "}
{/* w-full para mobile, w-40 para sm+ */}
<SelectValue placeholder="Convênio" /> <SelectValue placeholder="Convênio" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@ -196,9 +229,13 @@ export default function PacientesPage() {
{/* 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 text-foreground 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>
@ -219,69 +256,115 @@ export default function PacientesPage() {
{/* --- 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-white rounded-lg border border-gray-200 shadow-md hidden md:block">
<div className="overflow-x-auto"> {/* Permite rolagem horizontal se a tabela for muito larga */} <div className="overflow-x-auto">
{" "}
{/* 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-red-600">{`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-gray-500 flex items-center justify-center">
<Loader2 className="w-6 h-6 mr-2 animate-spin text-green-600" /> Carregando pacientes... <Loader2 className="w-6 h-6 mr-2 animate-spin text-green-600" />{" "}
Carregando pacientes...
</div> </div>
) : ( ) : (
<table className="w-full min-w-[650px]"> {/* min-w para evitar que a tabela se contraia demais */} <table className="w-full min-w-[650px]">
{" "}
{/* min-w para evitar que a tabela se contraia demais */}
<thead className="bg-gray-50 border-b border-gray-200"> <thead className="bg-gray-50 border-b border-gray-200">
<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-gray-700 w-[20%]">
Nome
</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">Telefone</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-gray-700 w-[15%] hidden md:table-cell">Cidade / Estado</th> Telefone
<th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden sm:table-cell">Convênio</th> </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-gray-700 w-[15%] hidden md:table-cell">
<th className="text-left p-4 font-medium text-gray-700 w-[15%] hidden lg:table-cell">Próximo atendimento</th> Cidade / Estado
<th className="text-left p-4 font-medium text-gray-700 w-[5%]">Ações</th> </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-gray-700 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-gray-700 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-gray-500">
{allPatients.length === 0 ? "Nenhum paciente cadastrado" : "Nenhum paciente encontrado com os filtros aplicados"} {allPatients.length === 0
? "Nenhum paciente cadastrado"
: "Nenhum paciente encontrado com os filtros aplicados"}
</td> </td>
</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 border-gray-100 hover:bg-gray-50"
>
<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-green-100 rounded-full flex items-center justify-center"> <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
<span className="text-green-600 font-medium text-sm">{patient.nome?.charAt(0) || "?"}</span> <span className="text-blue-600 font-medium text-sm">
{patient.nome?.charAt(0) || "?"}
</span>
</div> </div>
<span className="font-medium text-gray-900"> <span className="font-medium text-gray-900">
{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">VIP</span> <span className="ml-2 px-2 py-0.5 text-xs font-semibold text-purple-600 bg-purple-100 rounded-full">
VIP
</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-gray-600 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-gray-600 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-gray-600 hidden sm:table-cell">
<td className="p-4 text-gray-600 hidden lg:table-cell">{patient.ultimoAtendimento}</td> {patient.convenio}
<td className="p-4 text-gray-600 hidden lg:table-cell">{patient.proximoAtendimento}</td> </td>
<td className="p-4 text-gray-600 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"> <td className="p-4">
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<div className="text-blue-600 cursor-pointer">Ações</div> <div className="text-blue-600 cursor-pointer">
Ações
</div>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end"> <DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => openDetailsDialog(String(patient.id))}> <DropdownMenuItem
onClick={() =>
openDetailsDialog(String(patient.id))
}
>
<Eye className="w-4 h-4 mr-2" /> <Eye className="w-4 h-4 mr-2" />
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>
@ -291,7 +374,12 @@ 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-red-600"
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>
@ -314,38 +402,59 @@ export default function PacientesPage() {
<div className="p-6 text-red-600">{`Erro ao carregar pacientes: ${error}`}</div> <div className="p-6 text-red-600">{`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-gray-500 flex items-center justify-center">
<Loader2 className="w-6 h-6 mr-2 animate-spin text-green-600" /> Carregando pacientes... <Loader2 className="w-6 h-6 mr-2 animate-spin text-green-600" />{" "}
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-gray-500">
{allPatients.length === 0 ? "Nenhum paciente cadastrado" : "Nenhum paciente encontrado com os filtros aplicados"} {allPatients.length === 0
? "Nenhum paciente cadastrado"
: "Nenhum paciente encontrado com os filtros aplicados"}
</div> </div>
) : ( ) : (
<div className="space-y-4"> <div className="space-y-4">
{currentPatients.map((patient) => ( {currentPatients.map((patient) => (
<div 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"> <div
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"
>
<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 text-gray-900 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">VIP</span> <span className="ml-2 px-2 py-0.5 text-xs font-semibold text-purple-600 bg-purple-100 rounded-full">
VIP
</span>
)} )}
</div> </div>
<div className="text-sm text-gray-600">Telefone: {patient.telefone}</div> <div className="text-sm text-gray-600">
<div className="text-sm text-gray-600">Convênio: {patient.convenio}</div> Telefone: {patient.telefone}
</div>
<div className="text-sm text-gray-600">
Convênio: {patient.convenio}
</div>
</div> </div>
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<div className="w-full"><Button variant="outline" className="w-full">Ações</Button></div> <div className="w-full">
<Button variant="outline" className="w-full">
Ações
</Button>
</div>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end"> <DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => openDetailsDialog(String(patient.id))}> <DropdownMenuItem
onClick={() => openDetailsDialog(String(patient.id))}
>
<Eye className="w-4 h-4 mr-2" /> <Eye className="w-4 h-4 mr-2" />
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>
@ -355,7 +464,10 @@ 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-red-600"
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>
@ -370,7 +482,9 @@ 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-gray-200">
<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}
@ -379,7 +493,6 @@ export default function PacientesPage() {
> >
&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) => (
@ -388,14 +501,19 @@ export default function PacientesPage() {
onClick={() => setPage(pageNumber)} onClick={() => setPage(pageNumber)}
variant={pageNumber === page ? "default" : "outline"} variant={pageNumber === page ? "default" : "outline"}
size="lg" size="lg"
className={pageNumber === page ? "bg-green-600 hover:bg-green-700 text-white" : "text-gray-700"} className={
pageNumber === page
? "bg-blue-600 hover:bg-blue-700 text-white"
: "text-gray-700"
}
> >
{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"
@ -411,18 +529,29 @@ export default function PacientesPage() {
<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-red-600 hover:bg-red-700"
>
Excluir Excluir
</AlertDialogAction> </AlertDialogAction>
</AlertDialogFooter> </AlertDialogFooter>
</AlertDialogContent> </AlertDialogContent>
</AlertDialog> </AlertDialog>
<AlertDialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}> <AlertDialog
open={detailsDialogOpen}
onOpenChange={setDetailsDialogOpen}
>
<AlertDialogContent> <AlertDialogContent>
<AlertDialogHeader> <AlertDialogHeader>
<AlertDialogTitle>Detalhes do Paciente</AlertDialogTitle> <AlertDialogTitle>Detalhes do Paciente</AlertDialogTitle>

2
components/ui/userToolTip.tsx
View File

@ -126,7 +126,7 @@ export default function SidebarUserSection({
className={ className={
sidebarCollapsed sidebarCollapsed
? "w-full bg-white text-black flex justify-center items-center p-2 hover:bg-gray-200" ? "w-full bg-white text-black flex justify-center items-center p-2 hover:bg-gray-200"
: "w-full bg-white text-black hover:bg-gray-200" : "w-full bg-white text-black hover:bg-gray-200 cursor-pointer"
} }
onClick={handleLogout} onClick={handleLogout}
> >