From f14643fa6a9138632b27a165e8a94b282649791c Mon Sep 17 00:00:00 2001 From: M-Gabrielly Date: Thu, 25 Sep 2025 02:09:47 -0300 Subject: [PATCH] feat(ui): implements a visualization mode and standardizes the layout for patients, physicians, and appointments --- .../app/(main-routes)/consultas/page.tsx | 114 +++++++++++++++--- .../app/(main-routes)/doutores/page.tsx | 54 ++++++++- .../app/(main-routes)/pacientes/page.tsx | 50 +++++++- 3 files changed, 199 insertions(+), 19 deletions(-) diff --git a/susconecta/app/(main-routes)/consultas/page.tsx b/susconecta/app/(main-routes)/consultas/page.tsx index 22c84b9..68e07d3 100644 --- a/susconecta/app/(main-routes)/consultas/page.tsx +++ b/susconecta/app/(main-routes)/consultas/page.tsx @@ -21,6 +21,14 @@ import { CardHeader, CardTitle, } from "@/components/ui/card"; +import { + Dialog, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle, + DialogFooter, +} from "@/components/ui/dialog"; import { DropdownMenu, DropdownMenuContent, @@ -36,6 +44,7 @@ import { TableRow, } from "@/components/ui/table"; import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; import { Select, SelectContent, @@ -49,6 +58,7 @@ import { CalendarRegistrationForm } from "@/components/forms/calendar-registrati // --- Helper Functions --- const formatDate = (date: string | Date) => { + if (!date) return ""; return new Date(date).toLocaleDateString("pt-BR", { day: "2-digit", month: "2-digit", @@ -58,13 +68,17 @@ const formatDate = (date: string | Date) => { }); }; -const capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1); +const capitalize = (s: string) => { + if (typeof s !== 'string' || s.length === 0) return ''; + return s.charAt(0).toUpperCase() + s.slice(1); +}; // --- Main Page Component --- export default function ConsultasPage() { const [appointments, setAppointments] = useState(mockAppointments); const [showForm, setShowForm] = useState(false); const [editingAppointment, setEditingAppointment] = useState(null); + const [viewingAppointment, setViewingAppointment] = useState(null); // Converte o objeto da consulta para o formato esperado pelo formulário const mapAppointmentToFormData = (appointment: any) => { @@ -104,6 +118,10 @@ export default function ConsultasPage() { setEditingAppointment(formData); setShowForm(true); }; + + const handleView = (appointment: any) => { + setViewingAppointment(appointment); + }; const handleCancel = () => { setEditingAppointment(null); @@ -133,7 +151,7 @@ export default function ConsultasPage() { if (showForm && editingAppointment) { return ( -
+
+ + + + )}
); } \ No newline at end of file diff --git a/susconecta/app/(main-routes)/doutores/page.tsx b/susconecta/app/(main-routes)/doutores/page.tsx index 243c4ac..501e40d 100644 --- a/susconecta/app/(main-routes)/doutores/page.tsx +++ b/susconecta/app/(main-routes)/doutores/page.tsx @@ -5,6 +5,8 @@ import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"; +import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"; +import { Label } from "@/components/ui/label"; import { MoreHorizontal, Plus, Search, Edit, Trash2, ArrowLeft, Eye } from "lucide-react"; import { Badge } from "@/components/ui/badge"; import { DoctorRegistrationForm } from "@/components/forms/doctor-registration-form"; @@ -18,6 +20,7 @@ export default function DoutoresPage() { const [search, setSearch] = useState(""); const [showForm, setShowForm] = useState(false); const [editingId, setEditingId] = useState(null); + const [viewingDoctor, setViewingDoctor] = useState(null); // Carrega da API async function load() { @@ -55,6 +58,10 @@ export default function DoutoresPage() { setShowForm(true); } + function handleView(doctor: Medico) { + setViewingDoctor(doctor); + } + // Excluir via API e recarregar async function handleDelete(id: string) { if (!confirm("Excluir este médico?")) return; @@ -70,7 +77,7 @@ export default function DoutoresPage() { if (showForm) { return ( -
+
- alert(JSON.stringify(doctor, null, 2))}> + handleView(doctor)}> Ver @@ -182,6 +189,47 @@ export default function DoutoresPage() {
+ + {viewingDoctor && ( + setViewingDoctor(null)}> + + + Detalhes do Médico + + Informações detalhadas de {viewingDoctor?.nome}. + + +
+
+ + {viewingDoctor?.nome} +
+
+ + + {viewingDoctor?.especialidade} + +
+
+ + {viewingDoctor?.crm} +
+
+ + {viewingDoctor?.email} +
+
+ + {viewingDoctor?.telefone} +
+
+ + + + + + )} +
Mostrando {filtered.length} de {doctors.length}
diff --git a/susconecta/app/(main-routes)/pacientes/page.tsx b/susconecta/app/(main-routes)/pacientes/page.tsx index 074b512..3f2d75f 100644 --- a/susconecta/app/(main-routes)/pacientes/page.tsx +++ b/susconecta/app/(main-routes)/pacientes/page.tsx @@ -6,6 +6,8 @@ import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"; +import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"; +import { Label } from "@/components/ui/label"; import { MoreHorizontal, Plus, Search, Eye, Edit, Trash2, ArrowLeft } from "lucide-react"; import { Paciente, Endereco, listarPacientes, buscarPacientePorId, excluirPaciente } from "@/lib/api"; @@ -47,6 +49,7 @@ export default function PacientesPage() { const [search, setSearch] = useState(""); const [showForm, setShowForm] = useState(false); const [editingId, setEditingId] = useState(null); + const [viewingPatient, setViewingPatient] = useState(null); async function loadAll() { try { @@ -88,6 +91,10 @@ export default function PacientesPage() { setShowForm(true); } + function handleView(patient: Paciente) { + setViewingPatient(patient); + } + async function handleDelete(id: string) { if (!confirm("Excluir este paciente?")) return; try { @@ -161,7 +168,6 @@ export default function PacientesPage() { return (
- {}

Pacientes

@@ -217,7 +223,7 @@ export default function PacientesPage() { - alert(JSON.stringify(p, null, 2))}> + handleView(p)}> Ver @@ -245,6 +251,46 @@ export default function PacientesPage() {
+ {viewingPatient && ( + setViewingPatient(null)}> + + + Detalhes do Paciente + + Informações detalhadas de {viewingPatient.nome}. + + +
+
+ + {viewingPatient.nome} +
+
+ + {viewingPatient.cpf} +
+
+ + {viewingPatient.telefone} +
+
+ + + {`${viewingPatient.endereco.logradouro}, ${viewingPatient.endereco.numero} - ${viewingPatient.endereco.bairro}, ${viewingPatient.endereco.cidade} - ${viewingPatient.endereco.estado}`} + +
+
+ + {viewingPatient.observacoes || "Nenhuma"} +
+
+ + + + + + )} +
Mostrando {filtered.length} de {patients.length}
);