merge upstream
This commit is contained in:
commit
11fa3ee260
@ -1,298 +1,108 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import Link from "next/link";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
|
|
||||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
||||||
import { Plus, Edit, Trash2, Eye, Calendar, Filter } from "lucide-react";
|
|
||||||
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
|
|
||||||
import DoctorLayout from "@/components/doctor-layout";
|
import DoctorLayout from "@/components/doctor-layout";
|
||||||
export default function MedicosPage() {
|
|
||||||
const [searchTerm, setSearchTerm] = useState("");
|
|
||||||
const [especialidadeFilter, setEspecialidadeFilter] = useState("all");
|
|
||||||
const [statusFilter, setStatusFilter] = useState("all");
|
|
||||||
const [doctors, setDoctors] = useState<any[]>([]);
|
|
||||||
const [loading, setLoading] = useState(true);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
|
||||||
const [doctorToDelete, setDoctorToDelete] = useState<string | null>(null);
|
|
||||||
const [detailsDialogOpen, setDetailsDialogOpen] = useState(false);
|
|
||||||
const [doctorDetails, setDoctorDetails] = useState<any | null>(null);
|
|
||||||
const openDetailsDialog = async (doctorId: string) => {
|
|
||||||
setDetailsDialogOpen(true);
|
|
||||||
setDoctorDetails(null);
|
|
||||||
try {
|
|
||||||
const res = await fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${doctorId}`);
|
|
||||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
|
||||||
const json = await res.json();
|
|
||||||
setDoctorDetails(json?.data ?? null);
|
|
||||||
} catch (e: any) {
|
|
||||||
setDoctorDetails({ error: e?.message || "Erro ao buscar detalhes" });
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
interface Paciente {
|
||||||
const controller = new AbortController();
|
id: string;
|
||||||
async function fetchFromPacientes() {
|
nome: string;
|
||||||
try {
|
telefone: string;
|
||||||
setLoading(true);
|
cidade: string;
|
||||||
setError(null);
|
estado: string;
|
||||||
const res = await fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes", {
|
ultimoAtendimento?: string;
|
||||||
signal: controller.signal,
|
proximoAtendimento?: string;
|
||||||
});
|
}
|
||||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
|
||||||
const json = await res.json();
|
export default function PacientesPage() {
|
||||||
const items = Array.isArray(json?.data) ? json.data : [];
|
const [pacientes, setPacientes] = useState<Paciente[]>([]);
|
||||||
const mapped = items.map((p: any) => ({
|
const [loading, setLoading] = useState(true);
|
||||||
id: String(p.id ?? ""),
|
const [error, setError] = useState<string | null>(null);
|
||||||
nome: p.nome ?? "",
|
|
||||||
crm: "",
|
useEffect(() => {
|
||||||
especialidade: "",
|
async function fetchPacientes() {
|
||||||
telefone: p?.contato?.celular ?? p?.contato?.telefone1 ?? p?.telefone ?? "",
|
try {
|
||||||
cidade: p?.endereco?.cidade ?? p?.cidade ?? "",
|
setLoading(true);
|
||||||
estado: p?.endereco?.estado ?? p?.estado ?? "",
|
setError(null);
|
||||||
ultimoAtendimento: p.ultimo_atendimento ?? p.ultimoAtendimento ?? "",
|
const res = await fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes");
|
||||||
proximoAtendimento: p.proximo_atendimento ?? p.proximoAtendimento ?? "",
|
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||||
status: p.status ?? "",
|
const json = await res.json();
|
||||||
}));
|
const items = Array.isArray(json?.data) ? json.data : [];
|
||||||
setDoctors(mapped);
|
|
||||||
} catch (e: any) {
|
const mapped = items.map((p: any) => ({
|
||||||
const isAbort = e?.name === "AbortError" || /aborted/i.test(e?.message || "");
|
id: String(p.id ?? ""),
|
||||||
if (isAbort) return;
|
nome: p.nome ?? "",
|
||||||
setError(e?.message || "Erro ao carregar dados");
|
telefone: p?.contato?.celular ?? p?.contato?.telefone1 ?? p?.telefone ?? "",
|
||||||
} finally {
|
cidade: p?.endereco?.cidade ?? p?.cidade ?? "",
|
||||||
setLoading(false);
|
estado: p?.endereco?.estado ?? p?.estado ?? "",
|
||||||
}
|
ultimoAtendimento: p.ultimo_atendimento ?? p.ultimoAtendimento ?? "",
|
||||||
}
|
proximoAtendimento: p.proximo_atendimento ?? p.proximoAtendimento ?? "",
|
||||||
fetchFromPacientes();
|
}));
|
||||||
return () => controller.abort();
|
|
||||||
}, []);
|
setPacientes(mapped);
|
||||||
|
} catch (e: any) {
|
||||||
const handleDeleteDoctor = async (doctorId: string) => {
|
setError(e?.message || "Erro ao carregar pacientes");
|
||||||
try {
|
} finally {
|
||||||
await fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${doctorId}`, {
|
setLoading(false);
|
||||||
method: "DELETE",
|
}
|
||||||
});
|
}
|
||||||
} catch {}
|
fetchPacientes();
|
||||||
setDoctors((prev) => prev.filter((doctor) => String(doctor.id) !== String(doctorId)));
|
}, []);
|
||||||
setDeleteDialogOpen(false);
|
|
||||||
setDoctorToDelete(null);
|
return (
|
||||||
};
|
<DoctorLayout>
|
||||||
|
<div className="space-y-6">
|
||||||
const openDeleteDialog = (doctorId: string) => {
|
<div>
|
||||||
setDoctorToDelete(doctorId);
|
<h1 className="text-2xl font-bold text-gray-900">Pacientes</h1>
|
||||||
setDeleteDialogOpen(true);
|
<p className="text-gray-600">Lista de pacientes vinculados</p>
|
||||||
};
|
</div>
|
||||||
|
|
||||||
const filteredDoctors = doctors.filter((doctor) => {
|
<div className="bg-white rounded-lg border border-gray-200">
|
||||||
const matchesSearch = doctor.nome.toLowerCase().includes(searchTerm.toLowerCase()) || doctor.crm.toLowerCase().includes(searchTerm.toLowerCase()) || doctor.telefone.includes(searchTerm);
|
<div className="overflow-x-auto">
|
||||||
const matchesEspecialidade = especialidadeFilter === "all" || doctor.especialidade === especialidadeFilter;
|
<table className="w-full">
|
||||||
const matchesStatus = statusFilter === "all" || doctor.status === statusFilter;
|
<thead className="bg-gray-50 border-b border-gray-200">
|
||||||
|
<tr>
|
||||||
return matchesSearch && matchesEspecialidade && matchesStatus;
|
<th className="text-left p-4 font-medium text-gray-700">Nome</th>
|
||||||
});
|
<th className="text-left p-4 font-medium text-gray-700">Telefone</th>
|
||||||
|
<th className="text-left p-4 font-medium text-gray-700">Cidade</th>
|
||||||
return (
|
<th className="text-left p-4 font-medium text-gray-700">Estado</th>
|
||||||
<DoctorLayout>
|
<th className="text-left p-4 font-medium text-gray-700">Último atendimento</th>
|
||||||
<div className="space-y-6">
|
<th className="text-left p-4 font-medium text-gray-700">Próximo atendimento</th>
|
||||||
<div className="flex items-center justify-between">
|
</tr>
|
||||||
<div>
|
</thead>
|
||||||
<h1 className="text-2xl font-bold text-gray-900">Médicos</h1>
|
<tbody>
|
||||||
<p className="text-gray-600">Gerencie as informações dos médicos</p>
|
{loading ? (
|
||||||
</div>
|
<tr>
|
||||||
<Link href="/doctor/medicos/novo">
|
<td colSpan={6} className="p-6 text-gray-600">
|
||||||
<Button className="bg-green-600 hover:bg-green-700">
|
Carregando pacientes...
|
||||||
<Plus className="w-4 h-4 mr-2" />
|
</td>
|
||||||
Adicionar
|
</tr>
|
||||||
</Button>
|
) : error ? (
|
||||||
</Link>
|
<tr>
|
||||||
</div>
|
<td colSpan={6} className="p-6 text-red-600">{`Erro: ${error}`}</td>
|
||||||
|
</tr>
|
||||||
<div className="flex items-center gap-4 bg-white p-4 rounded-lg border border-gray-200">
|
) : pacientes.length === 0 ? (
|
||||||
<div className="flex items-center gap-2">
|
<tr>
|
||||||
<span className="text-sm font-medium text-gray-700">Especialidade</span>
|
<td colSpan={6} className="p-8 text-center text-gray-500">
|
||||||
<Select value={especialidadeFilter} onValueChange={setEspecialidadeFilter}>
|
Nenhum paciente encontrado
|
||||||
<SelectTrigger className="w-40">
|
</td>
|
||||||
<SelectValue placeholder="Selecione a Especialidade" />
|
</tr>
|
||||||
</SelectTrigger>
|
) : (
|
||||||
<SelectContent>
|
pacientes.map((p) => (
|
||||||
<SelectItem value="all">Todas</SelectItem>
|
<tr key={p.id} className="border-b border-gray-100 hover:bg-gray-50">
|
||||||
<SelectItem value="Cardiologia">Cardiologia</SelectItem>
|
<td className="p-4">{p.nome}</td>
|
||||||
<SelectItem value="Pediatria">Pediatria</SelectItem>
|
<td className="p-4 text-gray-600">{p.telefone}</td>
|
||||||
<SelectItem value="Ortopedia">Ortopedia</SelectItem>
|
<td className="p-4 text-gray-600">{p.cidade}</td>
|
||||||
</SelectContent>
|
<td className="p-4 text-gray-600">{p.estado}</td>
|
||||||
</Select>
|
<td className="p-4 text-gray-600">{p.ultimoAtendimento}</td>
|
||||||
</div>
|
<td className="p-4 text-gray-600">{p.proximoAtendimento}</td>
|
||||||
|
</tr>
|
||||||
<div className="flex items-center gap-2">
|
))
|
||||||
<span className="text-sm font-medium text-gray-700">Status</span>
|
)}
|
||||||
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
</tbody>
|
||||||
<SelectTrigger className="w-32">
|
</table>
|
||||||
<SelectValue placeholder="Selecione" />
|
</div>
|
||||||
</SelectTrigger>
|
</div>
|
||||||
<SelectContent>
|
</div>
|
||||||
<SelectItem value="all">Todos</SelectItem>
|
</DoctorLayout>
|
||||||
<SelectItem value="Ativo">Ativo</SelectItem>
|
);
|
||||||
<SelectItem value="Inativo">Inativo</SelectItem>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Button variant="outline" className="ml-auto bg-transparent">
|
|
||||||
<Filter className="w-4 h-4 mr-2" />
|
|
||||||
Filtro avançado
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="bg-white rounded-lg border border-gray-200">
|
|
||||||
<div className="overflow-x-auto">
|
|
||||||
<table className="w-full">
|
|
||||||
<thead className="bg-gray-50 border-b border-gray-200">
|
|
||||||
<tr>
|
|
||||||
<th className="text-left p-4 font-medium text-gray-700">Nome</th>
|
|
||||||
<th className="text-left p-4 font-medium text-gray-700">CRM</th>
|
|
||||||
<th className="text-left p-4 font-medium text-gray-700">Telefone</th>
|
|
||||||
<th className="text-left p-4 font-medium text-gray-700">Cidade</th>
|
|
||||||
<th className="text-left p-4 font-medium text-gray-700">Estado</th>
|
|
||||||
<th className="text-left p-4 font-medium text-gray-700">Último atendimento</th>
|
|
||||||
<th className="text-left p-4 font-medium text-gray-700">Próximo atendimento</th>
|
|
||||||
<th className="text-left p-4 font-medium text-gray-700">Ações</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{loading ? (
|
|
||||||
<tr>
|
|
||||||
<td colSpan={8} className="p-6 text-gray-600">
|
|
||||||
Carregando médicos...
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
) : error ? (
|
|
||||||
<tr>
|
|
||||||
<td colSpan={8} className="p-6 text-red-600">{`Erro: ${error}`}</td>
|
|
||||||
</tr>
|
|
||||||
) : filteredDoctors.length === 0 ? (
|
|
||||||
<tr>
|
|
||||||
<td colSpan={8} className="p-8 text-center text-gray-500">
|
|
||||||
Nenhum registro encontrado
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
) : (
|
|
||||||
filteredDoctors.map((doctor) => (
|
|
||||||
<tr key={doctor.id} className="border-b border-gray-100 hover:bg-gray-50">
|
|
||||||
<td className="p-4">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<div className="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center">
|
|
||||||
<span className="text-gray-600 font-medium text-sm">{doctor.nome?.charAt(0) || "?"}</span>
|
|
||||||
</div>
|
|
||||||
<span className="font-medium text-gray-900">{doctor.nome}</span>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td className="p-4 text-gray-600">{doctor.crm}</td>
|
|
||||||
<td className="p-4 text-gray-600">{doctor.telefone}</td>
|
|
||||||
<td className="p-4 text-gray-600">{doctor.cidade}</td>
|
|
||||||
<td className="p-4 text-gray-600">{doctor.estado}</td>
|
|
||||||
<td className="p-4 text-gray-600">{doctor.ultimoAtendimento}</td>
|
|
||||||
<td className="p-4 text-gray-600">{doctor.proximoAtendimento}</td>
|
|
||||||
<td className="p-4">
|
|
||||||
<DropdownMenu>
|
|
||||||
<DropdownMenuTrigger asChild>
|
|
||||||
<div className="text-blue-600">Ações</div>
|
|
||||||
</DropdownMenuTrigger>
|
|
||||||
<DropdownMenuContent align="end">
|
|
||||||
<DropdownMenuItem onClick={() => openDetailsDialog(String(doctor.id))}>
|
|
||||||
<Eye className="w-4 h-4 mr-2" />
|
|
||||||
Ver detalhes
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuItem asChild>
|
|
||||||
<Link href={`/doctor/medicos/${doctor.id}/editar`}>
|
|
||||||
<Edit className="w-4 h-4 mr-2" />
|
|
||||||
Editar
|
|
||||||
</Link>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuItem>
|
|
||||||
<Calendar className="w-4 h-4 mr-2" />
|
|
||||||
Ver agenda
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuItem className="text-red-600" onClick={() => openDeleteDialog(String(doctor.id))}>
|
|
||||||
<Trash2 className="w-4 h-4 mr-2" />
|
|
||||||
Excluir
|
|
||||||
</DropdownMenuItem>
|
|
||||||
</DropdownMenuContent>
|
|
||||||
</DropdownMenu>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
|
|
||||||
<AlertDialogContent>
|
|
||||||
<AlertDialogHeader>
|
|
||||||
<AlertDialogTitle>Confirmar exclusão</AlertDialogTitle>
|
|
||||||
<AlertDialogDescription>Tem certeza que deseja excluir este médico? Esta ação não pode ser desfeita.</AlertDialogDescription>
|
|
||||||
</AlertDialogHeader>
|
|
||||||
<AlertDialogFooter>
|
|
||||||
<AlertDialogCancel>Cancelar</AlertDialogCancel>
|
|
||||||
<AlertDialogAction onClick={() => doctorToDelete && handleDeleteDoctor(doctorToDelete)} className="bg-red-600 hover:bg-red-700">
|
|
||||||
Excluir
|
|
||||||
</AlertDialogAction>
|
|
||||||
</AlertDialogFooter>
|
|
||||||
</AlertDialogContent>
|
|
||||||
</AlertDialog>
|
|
||||||
|
|
||||||
{/* Modal de detalhes do médico */}
|
|
||||||
<AlertDialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}>
|
|
||||||
<AlertDialogContent>
|
|
||||||
<AlertDialogHeader>
|
|
||||||
<AlertDialogTitle>Detalhes do Médico</AlertDialogTitle>
|
|
||||||
<AlertDialogDescription>
|
|
||||||
{doctorDetails === null ? (
|
|
||||||
<div className="text-gray-500">Carregando...</div>
|
|
||||||
) : doctorDetails?.error ? (
|
|
||||||
<div className="text-red-600">{doctorDetails.error}</div>
|
|
||||||
) : (
|
|
||||||
<div className="space-y-2 text-left">
|
|
||||||
<div>
|
|
||||||
<strong>Nome:</strong> {doctorDetails.nome}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<strong>Telefone:</strong> {doctorDetails?.contato?.celular ?? doctorDetails?.contato?.telefone1 ?? doctorDetails?.telefone ?? ""}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<strong>Cidade:</strong> {doctorDetails?.endereco?.cidade ?? doctorDetails?.cidade ?? ""}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<strong>Estado:</strong> {doctorDetails?.endereco?.estado ?? doctorDetails?.estado ?? ""}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<strong>Convênio:</strong> {doctorDetails.convenio ?? ""}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<strong>VIP:</strong> {doctorDetails.vip ? "Sim" : "Não"}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<strong>Status:</strong> {doctorDetails.status ?? ""}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<strong>Último atendimento:</strong> {doctorDetails.ultimo_atendimento ?? doctorDetails.ultimoAtendimento ?? ""}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<strong>Próximo atendimento:</strong> {doctorDetails.proximo_atendimento ?? doctorDetails.proximoAtendimento ?? ""}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</AlertDialogDescription>
|
|
||||||
</AlertDialogHeader>
|
|
||||||
<AlertDialogFooter>
|
|
||||||
<AlertDialogCancel>Fechar</AlertDialogCancel>
|
|
||||||
</AlertDialogFooter>
|
|
||||||
</AlertDialogContent>
|
|
||||||
</AlertDialog>
|
|
||||||
</div>
|
|
||||||
</DoctorLayout>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user