220 lines
9.2 KiB
TypeScript
220 lines
9.2 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect } 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 { dataStore } from "@/lib/data-store"
|
|
|
|
export default function PacientesPage() {
|
|
const [searchTerm, setSearchTerm] = useState("")
|
|
const [convenioFilter, setConvenioFilter] = useState("all")
|
|
const [vipFilter, setVipFilter] = useState("all")
|
|
const [patients, setPatients] = useState(dataStore.getPatients())
|
|
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
|
|
const [patientToDelete, setPatientToDelete] = useState<number | null>(null)
|
|
|
|
useEffect(() => {
|
|
setPatients(dataStore.getPatients())
|
|
}, [])
|
|
|
|
const handleDeletePatient = (patientId: number) => {
|
|
dataStore.deletePatient(patientId)
|
|
setPatients(dataStore.getPatients())
|
|
setDeleteDialogOpen(false)
|
|
setPatientToDelete(null)
|
|
}
|
|
|
|
const openDeleteDialog = (patientId: number) => {
|
|
setPatientToDelete(patientId)
|
|
setDeleteDialogOpen(true)
|
|
}
|
|
|
|
const filteredPatients = patients.filter((patient) => {
|
|
const matchesSearch =
|
|
patient.nome?.toLowerCase().includes(searchTerm.toLowerCase()) || patient.telefone?.includes(searchTerm)
|
|
const matchesConvenio = convenioFilter === "all" || patient.convenio === convenioFilter
|
|
const matchesVip =
|
|
vipFilter === "all" || (vipFilter === "vip" && patient.vip) || (vipFilter === "regular" && !patient.vip)
|
|
|
|
return matchesSearch && matchesConvenio && matchesVip
|
|
})
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900">Pacientes</h1>
|
|
<p className="text-gray-600">Gerencie as informações de seus pacientes</p>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Link href="/pacientes/novo">
|
|
<Button className="bg-blue-600 hover:bg-blue-700">
|
|
<Plus className="w-4 h-4 mr-2" />
|
|
Adicionar
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4 bg-white p-4 rounded-lg border border-gray-200">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm font-medium text-gray-700">Convênio</span>
|
|
<Select value={convenioFilter} onValueChange={setConvenioFilter}>
|
|
<SelectTrigger className="w-40">
|
|
<SelectValue placeholder="Selecione o Convênio" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">Todos</SelectItem>
|
|
<SelectItem value="Particular">Particular</SelectItem>
|
|
<SelectItem value="SUS">SUS</SelectItem>
|
|
<SelectItem value="Unimed">Unimed</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm font-medium text-gray-700">VIP</span>
|
|
<Select value={vipFilter} onValueChange={setVipFilter}>
|
|
<SelectTrigger className="w-32">
|
|
<SelectValue placeholder="Selecione" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">Todos</SelectItem>
|
|
<SelectItem value="vip">VIP</SelectItem>
|
|
<SelectItem value="regular">Regular</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm font-medium text-gray-700">Aniversariantes</span>
|
|
<Select>
|
|
<SelectTrigger className="w-32">
|
|
<SelectValue placeholder="Selecione" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="today">Hoje</SelectItem>
|
|
<SelectItem value="week">Esta semana</SelectItem>
|
|
<SelectItem value="month">Este mês</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">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>
|
|
{filteredPatients.length === 0 ? (
|
|
<tr>
|
|
<td colSpan={7} className="p-8 text-center text-gray-500">
|
|
{patients.length === 0
|
|
? "Nenhum paciente cadastrado"
|
|
: "Nenhum paciente encontrado com os filtros aplicados"}
|
|
</td>
|
|
</tr>
|
|
) : (
|
|
filteredPatients.map((patient) => (
|
|
<tr key={patient.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">{patient.nome?.charAt(0) || "?"}</span>
|
|
</div>
|
|
<span className="font-medium text-gray-900">{patient.nome}</span>
|
|
</div>
|
|
</td>
|
|
<td className="p-4 text-gray-600">{patient.telefone}</td>
|
|
<td className="p-4 text-gray-600">{patient.cidade}</td>
|
|
<td className="p-4 text-gray-600">{patient.estado}</td>
|
|
<td className="p-4 text-gray-600">{patient.ultimoAtendimento}</td>
|
|
<td className="p-4 text-gray-600">{patient.proximoAtendimento}</td>
|
|
<td className="p-4">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="sm" className="text-blue-600">
|
|
Ações
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem>
|
|
<Eye className="w-4 h-4 mr-2" />
|
|
Ver detalhes
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem asChild>
|
|
<Link href={`/pacientes/${patient.id}/editar`}>
|
|
<Edit className="w-4 h-4 mr-2" />
|
|
Editar
|
|
</Link>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<Calendar className="w-4 h-4 mr-2" />
|
|
Marcar consulta
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem className="text-red-600" onClick={() => openDeleteDialog(patient.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 paciente? Esta ação não pode ser desfeita.
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel>Cancelar</AlertDialogCancel>
|
|
<AlertDialogAction
|
|
onClick={() => patientToDelete && handleDeletePatient(patientToDelete)}
|
|
className="bg-red-600 hover:bg-red-700"
|
|
>
|
|
Excluir
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
</div>
|
|
)
|
|
}
|