Merge remote-tracking branch 'origin/Stage' into refactor/user-creation-and-scheduling
This commit is contained in:
commit
fe68a31e57
@ -4,12 +4,16 @@ import DoctorLayout from "@/components/doctor-layout";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Calendar, Clock, User, Trash2 } from "lucide-react";
|
||||
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useEffect, useState } from "react";
|
||||
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
|
||||
import { toast } from "@/hooks/use-toast";
|
||||
|
||||
import { AvailabilityService } from "@/services/availabilityApi.mjs";
|
||||
import { exceptionsService } from "@/services/exceptionApi.mjs";
|
||||
import { toast } from "@/hooks/use-toast";
|
||||
import { doctorsService } from "@/services/doctorsApi.mjs";
|
||||
import { usersService } from "@/services/usersApi.mjs";
|
||||
|
||||
type Availability = {
|
||||
id: string;
|
||||
@ -30,15 +34,86 @@ type Schedule = {
|
||||
weekday: object;
|
||||
};
|
||||
|
||||
type Doctor = {
|
||||
id: string;
|
||||
user_id: string | null;
|
||||
crm: string;
|
||||
crm_uf: string;
|
||||
specialty: string;
|
||||
full_name: string;
|
||||
cpf: string;
|
||||
email: string;
|
||||
phone_mobile: string | null;
|
||||
phone2: string | null;
|
||||
cep: string | null;
|
||||
street: string | null;
|
||||
number: string | null;
|
||||
complement: string | null;
|
||||
neighborhood: string | null;
|
||||
city: string | null;
|
||||
state: string | null;
|
||||
birth_date: string | null;
|
||||
rg: string | null;
|
||||
active: boolean;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
created_by: string;
|
||||
updated_by: string | null;
|
||||
max_days_in_advance: number;
|
||||
rating: number | null;
|
||||
}
|
||||
|
||||
interface UserPermissions {
|
||||
isAdmin: boolean;
|
||||
isManager: boolean;
|
||||
isDoctor: boolean;
|
||||
isSecretary: boolean;
|
||||
isAdminOrManager: boolean;
|
||||
}
|
||||
|
||||
interface UserData {
|
||||
user: {
|
||||
id: string;
|
||||
email: string;
|
||||
email_confirmed_at: string | null;
|
||||
created_at: string | null;
|
||||
last_sign_in_at: string | null;
|
||||
};
|
||||
profile: {
|
||||
id: string;
|
||||
full_name: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
avatar_url: string | null;
|
||||
disabled: boolean;
|
||||
created_at: string | null;
|
||||
updated_at: string | null;
|
||||
};
|
||||
roles: string[];
|
||||
permissions: UserPermissions;
|
||||
}
|
||||
|
||||
interface Exception {
|
||||
id: string; // id da exceção
|
||||
doctor_id: string;
|
||||
date: string; // formato YYYY-MM-DD
|
||||
start_time: string | null; // null = dia inteiro
|
||||
end_time: string | null; // null = dia inteiro
|
||||
kind: "bloqueio" | "disponibilidade"; // tipos conhecidos
|
||||
reason: string | null; // pode ser null
|
||||
created_at: string; // timestamp ISO
|
||||
created_by: string;
|
||||
}
|
||||
|
||||
export default function PatientDashboard() {
|
||||
const userInfo = JSON.parse(localStorage.getItem("user_info") || "{}");
|
||||
const doctorId = "3bb9ee4a-cfdd-4d81-b628-383907dfa225"; //userInfo.id;
|
||||
const [loggedDoctor, setLoggedDoctor] = useState<Doctor>();
|
||||
const [userData, setUserData] = useState<UserData>();
|
||||
const [availability, setAvailability] = useState<any | null>(null);
|
||||
const [exceptions, setExceptions] = useState<any | null>(null);
|
||||
const [exceptions, setExceptions] = useState<Exception[]>([]);
|
||||
const [schedule, setSchedule] = useState<Record<string, { start: string; end: string }[]>>({});
|
||||
const formatTime = (time: string) => time.split(":").slice(0, 2).join(":");
|
||||
const formatTime = (time?: string | null) => time?.split(":")?.slice(0, 2).join(":") ?? "";
|
||||
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
||||
const [patientToDelete, setPatientToDelete] = useState<string | null>(null);
|
||||
const [exceptionToDelete, setExceptionToDelete] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Mapa de tradução
|
||||
@ -55,30 +130,51 @@ export default function PatientDashboard() {
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
// fetch para disponibilidade
|
||||
const response = await AvailabilityService.list();
|
||||
const filteredResponse = response.filter((disp: { doctor_id: any }) => disp.doctor_id == doctorId);
|
||||
setAvailability(filteredResponse);
|
||||
// fetch para exceções
|
||||
const res = await exceptionsService.list();
|
||||
const filteredRes = res.filter((disp: { doctor_id: any }) => disp.doctor_id == doctorId);
|
||||
setExceptions(filteredRes);
|
||||
const doctorsList: Doctor[] = await doctorsService.list();
|
||||
const doctor = doctorsList[0];
|
||||
|
||||
// Salva no estado
|
||||
setLoggedDoctor(doctor);
|
||||
|
||||
// Busca disponibilidade
|
||||
const availabilityList = await AvailabilityService.list();
|
||||
|
||||
// Filtra já com a variável local
|
||||
const filteredAvail = availabilityList.filter(
|
||||
(disp: { doctor_id: string }) => disp.doctor_id === doctor?.id
|
||||
);
|
||||
setAvailability(filteredAvail);
|
||||
|
||||
// Busca exceções
|
||||
const exceptionsList = await exceptionsService.list();
|
||||
const filteredExc = exceptionsList.filter(
|
||||
(exc: { doctor_id: string }) => exc.doctor_id === doctor?.id
|
||||
);
|
||||
console.log(exceptionsList)
|
||||
setExceptions(filteredExc);
|
||||
|
||||
} catch (e: any) {
|
||||
alert(`${e?.error} ${e?.message}`);
|
||||
}
|
||||
};
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
const openDeleteDialog = (patientId: string) => {
|
||||
setPatientToDelete(patientId);
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
// Função auxiliar para filtrar o id do doctor correspondente ao user logado
|
||||
function findDoctorById(id: string, doctors: Doctor[]) {
|
||||
return doctors.find((doctor) => doctor.user_id === id);
|
||||
}
|
||||
|
||||
const openDeleteDialog = (exceptionId: string) => {
|
||||
setExceptionToDelete(exceptionId);
|
||||
setDeleteDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleDeletePatient = async (patientId: string) => {
|
||||
// Remove from current list (client-side deletion)
|
||||
const handleDeleteException = async (ExceptionId: string) => {
|
||||
try {
|
||||
const res = await exceptionsService.delete(patientId);
|
||||
alert(ExceptionId)
|
||||
const res = await exceptionsService.delete(ExceptionId);
|
||||
|
||||
let message = "Exceção deletada com sucesso";
|
||||
try {
|
||||
@ -94,7 +190,7 @@ export default function PatientDashboard() {
|
||||
description: message,
|
||||
});
|
||||
|
||||
setExceptions((prev: any[]) => prev.filter((p) => String(p.id) !== String(patientId)));
|
||||
setExceptions((prev: Exception[]) => prev.filter((p) => String(p.id) !== String(ExceptionId)));
|
||||
} catch (e: any) {
|
||||
toast({
|
||||
title: "Erro",
|
||||
@ -102,7 +198,7 @@ export default function PatientDashboard() {
|
||||
});
|
||||
}
|
||||
setDeleteDialogOpen(false);
|
||||
setPatientToDelete(null);
|
||||
setExceptionToDelete(null);
|
||||
};
|
||||
|
||||
function formatAvailability(data: Availability[]) {
|
||||
@ -256,12 +352,13 @@ export default function PatientDashboard() {
|
||||
|
||||
<CardContent className="space-y-4 grid md:grid-cols-7 gap-2">
|
||||
{exceptions && exceptions.length > 0 ? (
|
||||
exceptions.map((ex: any) => {
|
||||
exceptions.map((ex: Exception) => {
|
||||
// Formata data e hora
|
||||
const date = new Date(ex.date).toLocaleDateString("pt-BR", {
|
||||
weekday: "long",
|
||||
day: "2-digit",
|
||||
month: "long",
|
||||
timeZone: "UTC"
|
||||
});
|
||||
|
||||
const startTime = formatTime(ex.start_time);
|
||||
@ -273,7 +370,9 @@ export default function PatientDashboard() {
|
||||
<div className="text-center">
|
||||
<p className="font-semibold capitalize">{date}</p>
|
||||
<p className="text-sm text-gray-600">
|
||||
{startTime} - {endTime} <br/> -
|
||||
{startTime && endTime
|
||||
? `${startTime} - ${endTime}`
|
||||
: "Dia todo"}
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-center mt-2">
|
||||
@ -299,11 +398,11 @@ export default function PatientDashboard() {
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<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 esta exceção? 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">
|
||||
<AlertDialogAction onClick={() => exceptionToDelete && handleDeleteException(exceptionToDelete)} className="bg-red-600 hover:bg-red-700">
|
||||
Excluir
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
|
||||
@ -18,8 +18,36 @@ import { exceptionsService } from "@/services/exceptionApi.mjs";
|
||||
// IMPORTAR O COMPONENTE CALENDÁRIO DA SHADCN
|
||||
import { Calendar } from "@/components/ui/calendar";
|
||||
import { format } from "date-fns"; // Usaremos o date-fns para formatação e comparação de datas
|
||||
import { doctorsService } from "@/services/doctorsApi.mjs";
|
||||
|
||||
const APPOINTMENTS_STORAGE_KEY = "clinic-appointments";
|
||||
type Doctor = {
|
||||
id: string;
|
||||
user_id: string | null;
|
||||
crm: string;
|
||||
crm_uf: string;
|
||||
specialty: string;
|
||||
full_name: string;
|
||||
cpf: string;
|
||||
email: string;
|
||||
phone_mobile: string | null;
|
||||
phone2: string | null;
|
||||
cep: string | null;
|
||||
street: string | null;
|
||||
number: string | null;
|
||||
complement: string | null;
|
||||
neighborhood: string | null;
|
||||
city: string | null;
|
||||
state: string | null;
|
||||
birth_date: string | null;
|
||||
rg: string | null;
|
||||
active: boolean;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
created_by: string;
|
||||
updated_by: string | null;
|
||||
max_days_in_advance: number;
|
||||
rating: number | null;
|
||||
}
|
||||
|
||||
// --- TIPAGEM DA CONSULTA SALVA NO LOCALSTORAGE ---
|
||||
interface LocalStorageAppointment {
|
||||
@ -34,8 +62,6 @@ interface LocalStorageAppointment {
|
||||
phone: string;
|
||||
}
|
||||
|
||||
const LOGGED_IN_DOCTOR_NAME = "Dr. João Santos";
|
||||
|
||||
// Função auxiliar para comparar se duas datas (Date objects) são o mesmo dia
|
||||
const isSameDay = (date1: Date, date2: Date) => {
|
||||
return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();
|
||||
@ -48,10 +74,25 @@ export default function ExceptionPage() {
|
||||
const router = useRouter();
|
||||
const [filteredAppointments, setFilteredAppointments] = useState<LocalStorageAppointment[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const userInfo = JSON.parse(localStorage.getItem("user_info") || "{}");
|
||||
const doctorIdTemp = "3bb9ee4a-cfdd-4d81-b628-383907dfa225";
|
||||
const [loggedDoctor, setLoggedDoctor] = useState<Doctor>();
|
||||
const [tipo, setTipo] = useState<string>("");
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const doctorsList: Doctor[] = await doctorsService.list();
|
||||
const doctor = doctorsList[0];
|
||||
|
||||
// Salva no estado
|
||||
setLoggedDoctor(doctor);
|
||||
} catch (e: any) {
|
||||
alert(`${e?.error} ${e?.message}`);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
// NOVO ESTADO 1: Armazena os dias com consultas (para o calendário)
|
||||
const [bookedDays, setBookedDays] = useState<Date[]>([]);
|
||||
|
||||
@ -66,11 +107,11 @@ export default function ExceptionPage() {
|
||||
const formData = new FormData(form);
|
||||
|
||||
const apiPayload = {
|
||||
doctor_id: doctorIdTemp,
|
||||
created_by: doctorIdTemp,
|
||||
doctor_id: loggedDoctor?.id,
|
||||
created_by: loggedDoctor?.user_id,
|
||||
date: selectedCalendarDate ? format(selectedCalendarDate, "yyyy-MM-dd") : "",
|
||||
start_time: ((formData.get("horarioEntrada") + ":00") as string) || undefined,
|
||||
end_time: ((formData.get("horarioSaida") + ":00") as string) || undefined,
|
||||
start_time: ((formData.get("horarioEntrada")?formData.get("horarioEntrada") + ":00":null) as string) || null,
|
||||
end_time: ((formData.get("horarioSaida")?formData.get("horarioSaida") + ":00":null) as string) || null,
|
||||
kind: tipo || undefined,
|
||||
reason: formData.get("reason"),
|
||||
};
|
||||
@ -110,7 +151,7 @@ export default function ExceptionPage() {
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">Adicione exceções</h1>
|
||||
<p className="text-gray-600">Altere a disponibilidade em casos especiais para o Dr. {userInfo.user_metadata.full_name}</p>
|
||||
<p className="text-gray-600">Altere a disponibilidade em casos especiais para o Dr. João Silva</p>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center">
|
||||
@ -167,13 +208,13 @@ export default function ExceptionPage() {
|
||||
<Label htmlFor="horarioEntrada" className="text-sm font-medium text-gray-700">
|
||||
Horario De Entrada
|
||||
</Label>
|
||||
<Input type="time" id="horarioEntrada" name="horarioEntrada" required className="mt-1" />
|
||||
<Input type="time" id="horarioEntrada" name="horarioEntrada" className="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="horarioSaida" className="text-sm font-medium text-gray-700">
|
||||
Horario De Saida
|
||||
</Label>
|
||||
<Input type="time" id="horarioSaida" name="horarioSaida" required className="mt-1" />
|
||||
<Input type="time" id="horarioSaida" name="horarioSaida" className="mt-1" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -187,7 +228,7 @@ export default function ExceptionPage() {
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="bloqueio">Bloqueio </SelectItem>
|
||||
<SelectItem value="liberacao">Liberação</SelectItem>
|
||||
<SelectItem value="disponibilidade_extra">Disponibilidade extra</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
@ -2,15 +2,24 @@
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import DoctorLayout from "@/components/doctor-layout";
|
||||
|
||||
import { AvailabilityService } from "@/services/availabilityApi.mjs";
|
||||
import { usersService } from "@/services/usersApi.mjs";
|
||||
import { doctorsService } from "@/services/doctorsApi.mjs";
|
||||
|
||||
import { toast } from "@/hooks/use-toast";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
|
||||
import { Eye, Edit, Calendar, Trash2 } from "lucide-react";
|
||||
import { AvailabilityEditModal } from "@/components/ui/availability-edit-modal";
|
||||
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
|
||||
|
||||
interface UserPermissions {
|
||||
isAdmin: boolean;
|
||||
@ -42,29 +51,195 @@ interface UserData {
|
||||
permissions: UserPermissions;
|
||||
}
|
||||
|
||||
type Doctor = {
|
||||
id: string;
|
||||
user_id: string | null;
|
||||
crm: string;
|
||||
crm_uf: string;
|
||||
specialty: string;
|
||||
full_name: string;
|
||||
cpf: string;
|
||||
email: string;
|
||||
phone_mobile: string | null;
|
||||
phone2: string | null;
|
||||
cep: string | null;
|
||||
street: string | null;
|
||||
number: string | null;
|
||||
complement: string | null;
|
||||
neighborhood: string | null;
|
||||
city: string | null;
|
||||
state: string | null;
|
||||
birth_date: string | null;
|
||||
rg: string | null;
|
||||
active: boolean;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
created_by: string;
|
||||
updated_by: string | null;
|
||||
max_days_in_advance: number;
|
||||
rating: number | null;
|
||||
}
|
||||
|
||||
type Availability = {
|
||||
id: string;
|
||||
doctor_id: string;
|
||||
weekday: string;
|
||||
start_time: string;
|
||||
end_time: string;
|
||||
slot_minutes: number;
|
||||
appointment_type: string;
|
||||
active: boolean;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
created_by: string;
|
||||
updated_by: string | null;
|
||||
};
|
||||
|
||||
export default function AvailabilityPage() {
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const router = useRouter();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [schedule, setSchedule] = useState<Record<string, { start: string; end: string }[]>>({});
|
||||
const formatTime = (time?: string | null) => time?.split(":")?.slice(0, 2).join(":") ?? "";
|
||||
const [userData, setUserData] = useState<UserData>();
|
||||
const [availability, setAvailability] = useState<any | null>(null);
|
||||
const [doctorId, setDoctorId] = useState<string>();
|
||||
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
||||
const [modalidadeConsulta, setModalidadeConsulta] = useState<string>("");
|
||||
const [selectedAvailability, setSelectedAvailability] = useState<Availability | null>(null);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const selectAvailability = (schedule: { start: string; end: string;}, day: string) => {
|
||||
const selected = availability.filter((a: Availability) =>
|
||||
a.start_time === schedule.start &&
|
||||
a.end_time === schedule.end &&
|
||||
a.weekday === day
|
||||
);
|
||||
setSelectedAvailability(selected[0]);
|
||||
}
|
||||
|
||||
const handleOpenModal = (schedule: { start: string; end: string;}, day: string) => {
|
||||
selectAvailability(schedule, day)
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
const handleCloseModal = () => {
|
||||
setSelectedAvailability(null);
|
||||
setIsModalOpen(false);
|
||||
};
|
||||
|
||||
const handleEdit = async (formData:{ start_time: "", end_time: "", slot_minutes: "", appointment_type: "", id:""}) => {
|
||||
if (isLoading) return;
|
||||
setIsLoading(true);
|
||||
|
||||
const apiPayload = {
|
||||
start_time: formData.start_time,
|
||||
end_time: formData.end_time,
|
||||
slot_minutes: formData.slot_minutes,
|
||||
appointment_type: formData.appointment_type,
|
||||
};
|
||||
console.log(apiPayload);
|
||||
|
||||
try {
|
||||
const res = await AvailabilityService.update(formData.id, apiPayload);
|
||||
console.log(res);
|
||||
|
||||
let message = "disponibilidade editada com sucesso";
|
||||
try {
|
||||
if (!res[0].id) {
|
||||
throw new Error(`${res.error} ${res.message}` || "A API retornou erro");
|
||||
} else {
|
||||
console.log(message);
|
||||
}
|
||||
} catch {}
|
||||
|
||||
toast({
|
||||
title: "Sucesso",
|
||||
description: message,
|
||||
});
|
||||
router.push("#")
|
||||
} catch (err: any) {
|
||||
toast({
|
||||
title: "Erro",
|
||||
description: err?.message || "Não foi possível editar a disponibilidade",
|
||||
});
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
handleCloseModal();
|
||||
fetchData()
|
||||
}
|
||||
};
|
||||
|
||||
// Mapa de tradução
|
||||
const weekdaysPT: Record<string, string> = {
|
||||
sunday: "Domingo",
|
||||
monday: "Segunda",
|
||||
tuesday: "Terça",
|
||||
wednesday: "Quarta",
|
||||
thursday: "Quinta",
|
||||
friday: "Sexta",
|
||||
saturday: "Sábado",
|
||||
};
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const response = await AvailabilityService.list();
|
||||
console.log(response);
|
||||
const user = await usersService.getMe();
|
||||
console.log(user);
|
||||
setUserData(user);
|
||||
const loggedUser = await usersService.getMe();
|
||||
const doctorList = await doctorsService.list();
|
||||
setUserData(loggedUser);
|
||||
const doctor = findDoctorById(loggedUser.user.id, doctorList);
|
||||
setDoctorId(doctor?.id);
|
||||
console.log(doctor);
|
||||
// Busca disponibilidade
|
||||
const availabilityList = await AvailabilityService.list();
|
||||
|
||||
// Filtra já com a variável local
|
||||
const filteredAvail = availabilityList.filter(
|
||||
(disp: { doctor_id: string }) => disp.doctor_id === doctor?.id
|
||||
);
|
||||
setAvailability(filteredAvail);
|
||||
} catch (e: any) {
|
||||
alert(`${e?.error} ${e?.message}`);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
// Função auxiliar para filtrar o id do doctor correspondente ao user logado
|
||||
function findDoctorById(id: string, doctors: Doctor[]) {
|
||||
return doctors.find((doctor) => doctor.user_id === id);
|
||||
}
|
||||
|
||||
|
||||
function formatAvailability(data: Availability[]) {
|
||||
// Agrupar os horários por dia da semana
|
||||
const schedule = data.reduce((acc: any, item) => {
|
||||
const { weekday, start_time, end_time } = item;
|
||||
|
||||
// Se o dia ainda não existe, cria o array
|
||||
if (!acc[weekday]) {
|
||||
acc[weekday] = [];
|
||||
}
|
||||
|
||||
// Adiciona o horário do dia
|
||||
acc[weekday].push({
|
||||
start: start_time,
|
||||
end: end_time,
|
||||
});
|
||||
|
||||
return acc;
|
||||
}, {} as Record<string, { start: string; end: string }[]>);
|
||||
|
||||
return schedule;
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (availability) {
|
||||
const formatted = formatAvailability(availability);
|
||||
setSchedule(formatted);
|
||||
}
|
||||
}, [availability]);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
if (isLoading) return;
|
||||
@ -73,7 +248,7 @@ export default function AvailabilityPage() {
|
||||
const formData = new FormData(form);
|
||||
|
||||
const apiPayload = {
|
||||
doctor_id: userData?.user.id,
|
||||
doctor_id: doctorId,
|
||||
weekday: (formData.get("weekday") as string) || undefined,
|
||||
start_time: (formData.get("horarioEntrada") as string) || undefined,
|
||||
end_time: (formData.get("horarioSaida") as string) || undefined,
|
||||
@ -104,13 +279,47 @@ export default function AvailabilityPage() {
|
||||
} catch (err: any) {
|
||||
toast({
|
||||
title: "Erro",
|
||||
description: err?.message || "Não foi possível cadastrar o paciente",
|
||||
description: err?.message || "Não foi possível criar a disponibilidade",
|
||||
});
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const openDeleteDialog = (schedule: { start: string; end: string;}, day: string) => {
|
||||
selectAvailability(schedule, day)
|
||||
setDeleteDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleDeleteAvailability = async (AvailabilityId: string) => {
|
||||
try {
|
||||
const res = await AvailabilityService.delete(AvailabilityId);
|
||||
|
||||
let message = "Disponibilidade deletada com sucesso";
|
||||
try {
|
||||
if (res) {
|
||||
throw new Error(`${res.error} ${res.message}` || "A API retornou erro");
|
||||
} else {
|
||||
console.log(message);
|
||||
}
|
||||
} catch {}
|
||||
|
||||
toast({
|
||||
title: "Sucesso",
|
||||
description: message,
|
||||
});
|
||||
|
||||
setAvailability((prev: Availability[]) => prev.filter((p) => String(p.id) !== String(AvailabilityId)));
|
||||
} catch (e: any) {
|
||||
toast({
|
||||
title: "Erro",
|
||||
description: e?.message || "Não foi possível deletar a disponibilidade",
|
||||
});
|
||||
}
|
||||
setDeleteDialogOpen(false);
|
||||
setSelectedAvailability(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<DoctorLayout>
|
||||
<div className="space-y-6">
|
||||
@ -152,7 +361,7 @@ export default function AvailabilityPage() {
|
||||
</label>
|
||||
<label className="flex items-center gap-2">
|
||||
<input type="radio" name="weekday" value="saturday" className="text-blue-600" />
|
||||
<span className="whitespace-nowrap text-sm">Sabado</span>
|
||||
<span className="whitespace-nowrap text-sm">Sábado</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2">
|
||||
<input type="radio" name="weekday" value="sunday" className="text-blue-600" />
|
||||
@ -200,10 +409,11 @@ export default function AvailabilityPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-4">
|
||||
<div className="flex justify-between gap-4">
|
||||
<Link href="/doctor/disponibilidade/excecoes">
|
||||
<Button variant="outline">Adicionar Exceção</Button>
|
||||
<Button variant="default">Adicionar Exceção</Button>
|
||||
</Link>
|
||||
<div>
|
||||
<Link href="/doctor/dashboard">
|
||||
<Button variant="outline">Cancelar</Button>
|
||||
</Link>
|
||||
@ -211,8 +421,81 @@ export default function AvailabilityPage() {
|
||||
Salvar Disponibilidade
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</form>
|
||||
<div>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Horário Semanal</CardTitle>
|
||||
<CardDescription>Confira ou altere a sua disponibilidade da semana</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4 grid md:grid-cols-7 gap-2">
|
||||
{["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"].map((day) => {
|
||||
const times = schedule[day] || [];
|
||||
return (
|
||||
<div key={day} className="space-y-4">
|
||||
<div className="flex flex-col items-center justify-between p-3 bg-blue-50 rounded-lg">
|
||||
<div>
|
||||
<p className="font-medium capitalize">{weekdaysPT[day]}</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
{times.length > 0 ? (
|
||||
times.map((t, i) => (
|
||||
<div key={i}>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<p className="text-sm text-gray-600 hover:text-accent-foreground hover:bg-gray-200">
|
||||
{formatTime(t.start)} <br /> {formatTime(t.end)}
|
||||
</p>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => handleOpenModal(t, day)}>
|
||||
<Eye className="w-4 h-4 mr-2" />
|
||||
Editar
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => openDeleteDialog(t, day)}
|
||||
className="text-red-600">
|
||||
<Trash2 className="w-4 h-4 mr-2" />
|
||||
Excluir
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<p className="text-sm text-gray-400 italic">Sem horário</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Confirmar exclusão</AlertDialogTitle>
|
||||
<AlertDialogDescription>Tem certeza que deseja excluir esta disponibilidade? Esta ação não pode ser desfeita.</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancelar</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={() => selectedAvailability && handleDeleteAvailability(selectedAvailability.id)} className="bg-red-600 hover:bg-red-700">
|
||||
Excluir
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
<AvailabilityEditModal
|
||||
availability={selectedAvailability}
|
||||
isOpen={isModalOpen}
|
||||
onClose={handleCloseModal}
|
||||
onSubmit={handleEdit}
|
||||
/>
|
||||
|
||||
</DoctorLayout>
|
||||
);
|
||||
}
|
||||
|
||||
682
app/manager/pacientes/[id]/editar/page.tsx
Normal file
682
app/manager/pacientes/[id]/editar/page.tsx
Normal file
@ -0,0 +1,682 @@
|
||||
"use client";
|
||||
|
||||
import type React from "react";
|
||||
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { useRouter, useParams } from "next/navigation";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { ArrowLeft, Save, Trash2, Paperclip, Upload } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import SecretaryLayout from "@/components/secretary-layout";
|
||||
import { patientsService } from "@/services/patientsApi.mjs";
|
||||
import { json } from "stream/consumers";
|
||||
|
||||
export default function EditarPacientePage() {
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
const patientId = params.id;
|
||||
const { toast } = useToast();
|
||||
|
||||
// Photo upload state
|
||||
const fileInputRef = useRef<HTMLInputElement | null>(null);
|
||||
const [isUploadingPhoto, setIsUploadingPhoto] = useState(false);
|
||||
const [photoUrl, setPhotoUrl] = useState<string | null>(null);
|
||||
// Anexos state
|
||||
const [anexos, setAnexos] = useState<any[]>([]);
|
||||
const [isUploadingAnexo, setIsUploadingAnexo] = useState(false);
|
||||
const anexoInputRef = useRef<HTMLInputElement | null>(null);
|
||||
|
||||
type FormData = {
|
||||
nome: string; // full_name
|
||||
cpf: string;
|
||||
dataNascimento: string; // birth_date
|
||||
sexo: string; // sex
|
||||
id?: string;
|
||||
nomeSocial?: string; // social_name
|
||||
rg?: string;
|
||||
documentType?: string; // document_type
|
||||
documentNumber?: string; // document_number
|
||||
ethnicity?: string;
|
||||
race?: string;
|
||||
naturality?: string;
|
||||
nationality?: string;
|
||||
profession?: string;
|
||||
maritalStatus?: string; // marital_status
|
||||
motherName?: string; // mother_name
|
||||
motherProfession?: string; // mother_profession
|
||||
fatherName?: string; // father_name
|
||||
fatherProfession?: string; // father_profession
|
||||
guardianName?: string; // guardian_name
|
||||
guardianCpf?: string; // guardian_cpf
|
||||
spouseName?: string; // spouse_name
|
||||
rnInInsurance?: boolean; // rn_in_insurance
|
||||
legacyCode?: string; // legacy_code
|
||||
notes?: string;
|
||||
email?: string;
|
||||
phoneMobile?: string; // phone_mobile
|
||||
phone1?: string;
|
||||
phone2?: string;
|
||||
cep?: string;
|
||||
street?: string;
|
||||
number?: string;
|
||||
complement?: string;
|
||||
neighborhood?: string;
|
||||
city?: string;
|
||||
state?: string;
|
||||
reference?: string;
|
||||
vip?: boolean;
|
||||
lastVisitAt?: string;
|
||||
nextAppointmentAt?: string;
|
||||
createdAt?: string;
|
||||
updatedAt?: string;
|
||||
createdBy?: string;
|
||||
updatedBy?: string;
|
||||
weightKg?: string;
|
||||
heightM?: string;
|
||||
bmi?: string;
|
||||
bloodType?: string;
|
||||
};
|
||||
|
||||
|
||||
const [formData, setFormData] = useState<FormData>({
|
||||
nome: "",
|
||||
cpf: "",
|
||||
dataNascimento: "",
|
||||
sexo: "",
|
||||
id: "",
|
||||
nomeSocial: "",
|
||||
rg: "",
|
||||
documentType: "",
|
||||
documentNumber: "",
|
||||
ethnicity: "",
|
||||
race: "",
|
||||
naturality: "",
|
||||
nationality: "",
|
||||
profession: "",
|
||||
maritalStatus: "",
|
||||
motherName: "",
|
||||
motherProfession: "",
|
||||
fatherName: "",
|
||||
fatherProfession: "",
|
||||
guardianName: "",
|
||||
guardianCpf: "",
|
||||
spouseName: "",
|
||||
rnInInsurance: false,
|
||||
legacyCode: "",
|
||||
notes: "",
|
||||
email: "",
|
||||
phoneMobile: "",
|
||||
phone1: "",
|
||||
phone2: "",
|
||||
cep: "",
|
||||
street: "",
|
||||
number: "",
|
||||
complement: "",
|
||||
neighborhood: "",
|
||||
city: "",
|
||||
state: "",
|
||||
reference: "",
|
||||
vip: false,
|
||||
lastVisitAt: "",
|
||||
nextAppointmentAt: "",
|
||||
createdAt: "",
|
||||
updatedAt: "",
|
||||
createdBy: "",
|
||||
updatedBy: "",
|
||||
weightKg: "",
|
||||
heightM: "",
|
||||
bmi: "",
|
||||
bloodType: "",
|
||||
});
|
||||
|
||||
const [isGuiaConvenio, setIsGuiaConvenio] = useState(false);
|
||||
const [validadeIndeterminada, setValidadeIndeterminada] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchPatient() {
|
||||
try {
|
||||
const res = await patientsService.getById(patientId);
|
||||
// Map API snake_case/nested to local camelCase form
|
||||
setFormData({
|
||||
id: res[0]?.id ?? "",
|
||||
nome: res[0]?.full_name ?? "",
|
||||
nomeSocial: res[0]?.social_name ?? "",
|
||||
cpf: res[0]?.cpf ?? "",
|
||||
rg: res[0]?.rg ?? "",
|
||||
documentType: res[0]?.document_type ?? "",
|
||||
documentNumber: res[0]?.document_number ?? "",
|
||||
sexo: res[0]?.sex ?? "",
|
||||
dataNascimento: res[0]?.birth_date ?? "",
|
||||
ethnicity: res[0]?.ethnicity ?? "",
|
||||
race: res[0]?.race ?? "",
|
||||
naturality: res[0]?.naturality ?? "",
|
||||
nationality: res[0]?.nationality ?? "",
|
||||
profession: res[0]?.profession ?? "",
|
||||
maritalStatus: res[0]?.marital_status ?? "",
|
||||
motherName: res[0]?.mother_name ?? "",
|
||||
motherProfession: res[0]?.mother_profession ?? "",
|
||||
fatherName: res[0]?.father_name ?? "",
|
||||
fatherProfession: res[0]?.father_profession ?? "",
|
||||
guardianName: res[0]?.guardian_name ?? "",
|
||||
guardianCpf: res[0]?.guardian_cpf ?? "",
|
||||
spouseName: res[0]?.spouse_name ?? "",
|
||||
rnInInsurance: res[0]?.rn_in_insurance ?? false,
|
||||
legacyCode: res[0]?.legacy_code ?? "",
|
||||
notes: res[0]?.notes ?? "",
|
||||
email: res[0]?.email ?? "",
|
||||
phoneMobile: res[0]?.phone_mobile ?? "",
|
||||
phone1: res[0]?.phone1 ?? "",
|
||||
phone2: res[0]?.phone2 ?? "",
|
||||
cep: res[0]?.cep ?? "",
|
||||
street: res[0]?.street ?? "",
|
||||
number: res[0]?.number ?? "",
|
||||
complement: res[0]?.complement ?? "",
|
||||
neighborhood: res[0]?.neighborhood ?? "",
|
||||
city: res[0]?.city ?? "",
|
||||
state: res[0]?.state ?? "",
|
||||
reference: res[0]?.reference ?? "",
|
||||
vip: res[0]?.vip ?? false,
|
||||
lastVisitAt: res[0]?.last_visit_at ?? "",
|
||||
nextAppointmentAt: res[0]?.next_appointment_at ?? "",
|
||||
createdAt: res[0]?.created_at ?? "",
|
||||
updatedAt: res[0]?.updated_at ?? "",
|
||||
createdBy: res[0]?.created_by ?? "",
|
||||
updatedBy: res[0]?.updated_by ?? "",
|
||||
weightKg: res[0]?.weight_kg ? String(res[0].weight_kg) : "",
|
||||
heightM: res[0]?.height_m ? String(res[0].height_m) : "",
|
||||
bmi: res[0]?.bmi ? String(res[0].bmi) : "",
|
||||
bloodType: res[0]?.blood_type ?? "",
|
||||
});
|
||||
|
||||
} catch (e: any) {
|
||||
toast({ title: "Erro", description: e?.message || "Falha ao carregar paciente" });
|
||||
}
|
||||
}
|
||||
fetchPatient();
|
||||
}, [patientId, toast]);
|
||||
|
||||
const handleInputChange = (field: string, value: string) => {
|
||||
setFormData((prev) => ({ ...prev, [field]: value }));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
// Build API payload (snake_case)
|
||||
const payload = {
|
||||
full_name: formData.nome || null,
|
||||
cpf: formData.cpf || null,
|
||||
email: formData.email || null,
|
||||
phone_mobile: formData.phoneMobile || null,
|
||||
birth_date: formData.dataNascimento || null,
|
||||
social_name: formData.nomeSocial || null,
|
||||
sex: formData.sexo || null,
|
||||
blood_type: formData.bloodType || null,
|
||||
weight_kg: formData.weightKg ? Number(formData.weightKg) : null,
|
||||
height_m: formData.heightM ? Number(formData.heightM) : null,
|
||||
street: formData.street || null,
|
||||
number: formData.number || null,
|
||||
complement: formData.complement || null,
|
||||
neighborhood: formData.neighborhood || null,
|
||||
city: formData.city || null,
|
||||
state: formData.state || null,
|
||||
cep: formData.cep || null,
|
||||
};
|
||||
|
||||
try {
|
||||
await patientsService.update(patientId, payload);
|
||||
toast({
|
||||
title: "Sucesso",
|
||||
description: "Paciente atualizado com sucesso",
|
||||
variant: "default"
|
||||
});
|
||||
router.push("/manager/pacientes");
|
||||
} catch (err: any) {
|
||||
console.error("Erro ao atualizar paciente:", err);
|
||||
toast({
|
||||
title: "Erro",
|
||||
description: err?.message || "Não foi possível atualizar o paciente",
|
||||
variant: "destructive"
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<SecretaryLayout>
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<Link href="/manager/pacientes">
|
||||
<Button variant="ghost" size="sm">
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Voltar
|
||||
</Button>
|
||||
</Link>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Editar Paciente</h1>
|
||||
<p className="text-gray-600">Atualize as informações do paciente</p>
|
||||
</div>
|
||||
|
||||
{/* Anexos Section */}
|
||||
<div className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-900 mb-6">Anexos</h2>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<input ref={anexoInputRef} type="file" className="hidden" />
|
||||
<Button type="button" variant="outline" disabled={isUploadingAnexo}>
|
||||
<Paperclip className="w-4 h-4 mr-2" /> {isUploadingAnexo ? "Enviando..." : "Adicionar anexo"}
|
||||
</Button>
|
||||
</div>
|
||||
{anexos.length === 0 ? (
|
||||
<p className="text-sm text-gray-500">Nenhum anexo encontrado.</p>
|
||||
) : (
|
||||
<ul className="divide-y">
|
||||
{anexos.map((a) => (
|
||||
<li key={a.id} className="flex items-center justify-between py-2">
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<Paperclip className="w-4 h-4 text-gray-500 shrink-0" />
|
||||
<span className="text-sm text-gray-800 truncate">{a.nome || a.filename || `Anexo ${a.id}`}</span>
|
||||
</div>
|
||||
<Button type="button" variant="ghost" className="text-red-600">
|
||||
<Trash2 className="w-4 h-4 mr-1" /> Remover
|
||||
</Button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-8">
|
||||
<div className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-900 mb-6">Dados Pessoais</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{/* Photo upload */}
|
||||
<div className="space-y-2">
|
||||
<Label>Foto do paciente</Label>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-20 h-20 rounded-full bg-gray-100 overflow-hidden flex items-center justify-center">
|
||||
{photoUrl ? (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img src={photoUrl} alt="Foto do paciente" className="w-full h-full object-cover" />
|
||||
) : (
|
||||
<span className="text-gray-400 text-sm">Sem foto</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<input ref={fileInputRef} type="file" accept="image/*" className="hidden" />
|
||||
<Button type="button" variant="outline" disabled={isUploadingPhoto}>
|
||||
{isUploadingPhoto ? "Enviando..." : "Enviar foto"}
|
||||
</Button>
|
||||
{photoUrl && (
|
||||
<Button type="button" variant="ghost" disabled={isUploadingPhoto}>
|
||||
Remover
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="nome">Nome *</Label>
|
||||
<Input id="nome" value={formData.nome} onChange={(e) => handleInputChange("nome", e.target.value)} required />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="cpf">CPF *</Label>
|
||||
<Input id="cpf" value={formData.cpf} onChange={(e) => handleInputChange("cpf", e.target.value)} placeholder="000.000.000-00" required />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="rg">RG</Label>
|
||||
<Input id="rg" value={formData.rg} onChange={(e) => handleInputChange("rg", e.target.value)} placeholder="00.000.000-0" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Sexo *</Label>
|
||||
<div className="flex gap-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<input type="radio" id="Masculino" name="sexo" value="Masculino" checked={formData.sexo === "Masculino"} onChange={(e) => handleInputChange("sexo", e.target.value)} className="w-4 h-4 text-blue-600" />
|
||||
<Label htmlFor="Masculino">Masculino</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<input type="radio" id="Feminino" name="sexo" value="Feminino" checked={formData.sexo === "Feminino"} onChange={(e) => handleInputChange("sexo", e.target.value)} className="w-4 h-4 text-blue-600" />
|
||||
<Label htmlFor="Feminino">Feminino</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="dataNascimento">Data de nascimento *</Label>
|
||||
<Input id="dataNascimento" type="date" value={formData.dataNascimento} onChange={(e) => handleInputChange("dataNascimento", e.target.value)} required />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="etnia">Etnia</Label>
|
||||
<Select value={formData.ethnicity} onValueChange={(value) => handleInputChange("ethnicity", value)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="branca">Branca</SelectItem>
|
||||
<SelectItem value="preta">Preta</SelectItem>
|
||||
<SelectItem value="parda">Parda</SelectItem>
|
||||
<SelectItem value="amarela">Amarela</SelectItem>
|
||||
<SelectItem value="indigena">Indígena</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="raca">Raça</Label>
|
||||
<Select value={formData.race} onValueChange={(value) => handleInputChange("race", value)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="caucasiana">Caucasiana</SelectItem>
|
||||
<SelectItem value="negroide">Negroide</SelectItem>
|
||||
<SelectItem value="mongoloide">Mongoloide</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="naturalidade">Naturalidade</Label>
|
||||
<Input id="naturalidade" value={formData.naturality} onChange={(e) => handleInputChange("naturality", e.target.value)} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="nacionalidade">Nacionalidade</Label>
|
||||
<Select value={formData.nationality} onValueChange={(value) => handleInputChange("nationality", value)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="brasileira">Brasileira</SelectItem>
|
||||
<SelectItem value="estrangeira">Estrangeira</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="profissao">Profissão</Label>
|
||||
<Input id="profissao" value={formData.profession} onChange={(e) => handleInputChange("profession", e.target.value)} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="estadoCivil">Estado civil</Label>
|
||||
<Select value={formData.maritalStatus} onValueChange={(value) => handleInputChange("maritalStatus", value)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="solteiro">Solteiro(a)</SelectItem>
|
||||
<SelectItem value="casado">Casado(a)</SelectItem>
|
||||
<SelectItem value="divorciado">Divorciado(a)</SelectItem>
|
||||
<SelectItem value="viuvo">Viúvo(a)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="nomeMae">Nome da mãe</Label>
|
||||
<Input id="nomeMae" value={formData.motherName} onChange={(e) => handleInputChange("motherName", e.target.value)} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="profissaoMae">Profissão da mãe</Label>
|
||||
<Input id="profissaoMae" value={formData.motherProfession} onChange={(e) => handleInputChange("motherProfession", e.target.value)} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="nomePai">Nome do pai</Label>
|
||||
<Input id="nomePai" value={formData.fatherName} onChange={(e) => handleInputChange("fatherName", e.target.value)} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="profissaoPai">Profissão do pai</Label>
|
||||
<Input id="profissaoPai" value={formData.fatherProfession} onChange={(e) => handleInputChange("fatherProfession", e.target.value)} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="nomeResponsavel">Nome do responsável</Label>
|
||||
<Input id="nomeResponsavel" value={formData.guardianName} onChange={(e) => handleInputChange("guardianName", e.target.value)} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="cpfResponsavel">CPF do responsável</Label>
|
||||
<Input id="cpfResponsavel" value={formData.guardianCpf} onChange={(e) => handleInputChange("guardianCpf", e.target.value)} placeholder="000.000.000-00" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="nomeEsposo">Nome do esposo(a)</Label>
|
||||
<Input id="nomeEsposo" value={formData.spouseName} onChange={(e) => handleInputChange("spouseName", e.target.value)} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox id="guiaConvenio" checked={isGuiaConvenio} onCheckedChange={(checked) => setIsGuiaConvenio(checked === true)} />
|
||||
<Label htmlFor="guiaConvenio">RN na Guia do convênio</Label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<Label htmlFor="observacoes">Observações</Label>
|
||||
<Textarea id="observacoes" value={formData.notes} onChange={(e) => handleInputChange("notes", e.target.value)} placeholder="Digite observações sobre o paciente..." className="mt-2" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact Section */}
|
||||
<div className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-900 mb-6">Contato</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">E-mail *</Label>
|
||||
<Input id="email" type="email" value={formData.email} onChange={(e) => handleInputChange("email", e.target.value)} required/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="celular">Celular *</Label>
|
||||
<Input id="celular" value={formData.phoneMobile} onChange={(e) => handleInputChange("phoneMobile", e.target.value)} placeholder="(00) 00000-0000" required/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="telefone1">Telefone 1</Label>
|
||||
<Input id="telefone1" value={formData.phone1} onChange={(e) => handleInputChange("phone1", e.target.value)} placeholder="(00) 0000-0000" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="telefone2">Telefone 2</Label>
|
||||
<Input id="telefone2" value={formData.phone2} onChange={(e) => handleInputChange("phone2", e.target.value)} placeholder="(00) 0000-0000" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Address Section */}
|
||||
<div className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-900 mb-6">Endereço</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="cep">CEP</Label>
|
||||
<Input id="cep" value={formData.cep} onChange={(e) => handleInputChange("cep", e.target.value)} placeholder="00000-000" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="endereco">Endereço</Label>
|
||||
<Input id="endereco" value={formData.street} onChange={(e) => handleInputChange("street", e.target.value)} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="numero">Número</Label>
|
||||
<Input id="numero" value={formData.number} onChange={(e) => handleInputChange("number", e.target.value)} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="complemento">Complemento</Label>
|
||||
<Input id="complemento" value={formData.complement} onChange={(e) => handleInputChange("complement", e.target.value)} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="bairro">Bairro</Label>
|
||||
<Input id="bairro" value={formData.neighborhood} onChange={(e) => handleInputChange("neighborhood", e.target.value)} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="cidade">Cidade</Label>
|
||||
<Input id="cidade" value={formData.city} onChange={(e) => handleInputChange("city", e.target.value)} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="estado">Estado</Label>
|
||||
<Select value={formData.state} onValueChange={(value) => handleInputChange("state", value)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="AC">Acre</SelectItem>
|
||||
<SelectItem value="AL">Alagoas</SelectItem>
|
||||
<SelectItem value="AP">Amapá</SelectItem>
|
||||
<SelectItem value="AM">Amazonas</SelectItem>
|
||||
<SelectItem value="BA">Bahia</SelectItem>
|
||||
<SelectItem value="CE">Ceará</SelectItem>
|
||||
<SelectItem value="DF">Distrito Federal</SelectItem>
|
||||
<SelectItem value="ES">Espírito Santo</SelectItem>
|
||||
<SelectItem value="GO">Goiás</SelectItem>
|
||||
<SelectItem value="MA">Maranhão</SelectItem>
|
||||
<SelectItem value="MT">Mato Grosso</SelectItem>
|
||||
<SelectItem value="MS">Mato Grosso do Sul</SelectItem>
|
||||
<SelectItem value="MG">Minas Gerais</SelectItem>
|
||||
<SelectItem value="PA">Pará</SelectItem>
|
||||
<SelectItem value="PB">Paraíba</SelectItem>
|
||||
<SelectItem value="PR">Paraná</SelectItem>
|
||||
<SelectItem value="PE">Pernambuco</SelectItem>
|
||||
<SelectItem value="PI">Piauí</SelectItem>
|
||||
<SelectItem value="RJ">Rio de Janeiro</SelectItem>
|
||||
<SelectItem value="RN">Rio Grande do Norte</SelectItem>
|
||||
<SelectItem value="RS">Rio Grande do Sul</SelectItem>
|
||||
<SelectItem value="RO">Rondônia</SelectItem>
|
||||
<SelectItem value="RR">Roraima</SelectItem>
|
||||
<SelectItem value="SC">Santa Catarina</SelectItem>
|
||||
<SelectItem value="SP">São Paulo</SelectItem>
|
||||
<SelectItem value="SE">Sergipe</SelectItem>
|
||||
<SelectItem value="TO">Tocantins</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Medical Information Section */}
|
||||
<div className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-900 mb-6">Informações Médicas</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="tipoSanguineo">Tipo Sanguíneo</Label>
|
||||
<Select value={formData.bloodType} onValueChange={(value) => handleInputChange("bloodType", value)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="A+">A+</SelectItem>
|
||||
<SelectItem value="A-">A-</SelectItem>
|
||||
<SelectItem value="B+">B+</SelectItem>
|
||||
<SelectItem value="B-">B-</SelectItem>
|
||||
<SelectItem value="AB+">AB+</SelectItem>
|
||||
<SelectItem value="AB-">AB-</SelectItem>
|
||||
<SelectItem value="O+">O+</SelectItem>
|
||||
<SelectItem value="O-">O-</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="peso">Peso (kg)</Label>
|
||||
<Input id="peso" type="number" value={formData.weightKg} onChange={(e) => handleInputChange("weightKg", e.target.value)} placeholder="0.0" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="altura">Altura (m)</Label>
|
||||
<Input id="altura" type="number" step="0.01" value={formData.heightM} onChange={(e) => handleInputChange("heightM", e.target.value)} placeholder="0.00" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>IMC</Label>
|
||||
<Input value={formData.weightKg && formData.heightM ? (Number.parseFloat(formData.weightKg) / Number.parseFloat(formData.heightM) ** 2).toFixed(2) : ""} disabled placeholder="Calculado automaticamente" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<Label htmlFor="alergias">Alergias</Label>
|
||||
<Textarea id="alergias" onChange={(e) => handleInputChange("alergias", e.target.value)} placeholder="Ex: AAS, Dipirona, etc." className="mt-2" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Insurance Information Section */}
|
||||
<div className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-900 mb-6">Informações de convênio</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="convenio">Convênio</Label>
|
||||
<Select onValueChange={(value) => handleInputChange("convenio", value)}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="Particular">Particular</SelectItem>
|
||||
<SelectItem value="SUS">SUS</SelectItem>
|
||||
<SelectItem value="Unimed">Unimed</SelectItem>
|
||||
<SelectItem value="Bradesco">Bradesco Saúde</SelectItem>
|
||||
<SelectItem value="Amil">Amil</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="plano">Plano</Label>
|
||||
<Input id="plano" onChange={(e) => handleInputChange("plano", e.target.value)} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="numeroMatricula">Nº de matrícula</Label>
|
||||
<Input id="numeroMatricula" onChange={(e) => handleInputChange("numeroMatricula", e.target.value)} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="validadeCarteira">Validade da Carteira</Label>
|
||||
<Input id="validadeCarteira" type="date" onChange={(e) => handleInputChange("validadeCarteira", e.target.value)} disabled={validadeIndeterminada} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox id="validadeIndeterminada" checked={validadeIndeterminada} onCheckedChange={(checked) => setValidadeIndeterminada(checked === true)} />
|
||||
<Label htmlFor="validadeIndeterminada">Validade Indeterminada</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-4">
|
||||
<Link href="/manager/pacientes">
|
||||
<Button type="button" variant="outline">
|
||||
Cancelar
|
||||
</Button>
|
||||
</Link>
|
||||
<Button type="submit" className="bg-blue-600 hover:bg-blue-700">
|
||||
<Save className="w-4 h-4 mr-2" />
|
||||
Salvar Alterações
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</SecretaryLayout>
|
||||
);
|
||||
}
|
||||
3
app/manager/pacientes/loading.tsx
Normal file
3
app/manager/pacientes/loading.tsx
Normal file
@ -0,0 +1,3 @@
|
||||
export default function Loading() {
|
||||
return null
|
||||
}
|
||||
676
app/manager/pacientes/novo/page.tsx
Normal file
676
app/manager/pacientes/novo/page.tsx
Normal file
@ -0,0 +1,676 @@
|
||||
"use client";
|
||||
|
||||
import type React from "react";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Upload, Plus, X, ChevronDown } from "lucide-react";
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import SecretaryLayout from "@/components/secretary-layout";
|
||||
import { patientsService } from "@/services/patientsApi.mjs";
|
||||
|
||||
export default function NovoPacientePage() {
|
||||
const [anexosOpen, setAnexosOpen] = useState(false);
|
||||
const [anexos, setAnexos] = useState<string[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const router = useRouter();
|
||||
const { toast } = useToast();
|
||||
|
||||
const adicionarAnexo = () => {
|
||||
setAnexos([...anexos, `Documento ${anexos.length + 1}`]);
|
||||
};
|
||||
|
||||
const removerAnexo = (index: number) => {
|
||||
setAnexos(anexos.filter((_, i) => i !== index));
|
||||
};
|
||||
|
||||
|
||||
const cleanNumber = (value: string): string => value.replace(/\D/g, '');
|
||||
|
||||
const formatCPF = (value: string): string => {
|
||||
const cleaned = cleanNumber(value).substring(0, 11);
|
||||
return cleaned.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3-$4');
|
||||
};
|
||||
|
||||
const formatCEP = (value: string): string => {
|
||||
const cleaned = cleanNumber(value).substring(0, 8);
|
||||
return cleaned.replace(/(\d{5})(\d{3})/, '$1-$2');
|
||||
};
|
||||
|
||||
const formatPhoneMobile = (value: string): string => {
|
||||
const cleaned = cleanNumber(value).substring(0, 11);
|
||||
if (cleaned.length > 10) {
|
||||
return cleaned.replace(/(\d{2})(\d{5})(\d{4})/, '+55 ($1) $2-$3');
|
||||
}
|
||||
return cleaned.replace(/(\d{2})(\d{4})(\d{4})/, '+55 ($1) $2-$3');
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
if (isLoading) return;
|
||||
setIsLoading(true);
|
||||
const form = e.currentTarget;
|
||||
const formData = new FormData(form);
|
||||
|
||||
const apiPayload = {
|
||||
full_name: (formData.get("nome") as string) || "", // obrigatório
|
||||
social_name: (formData.get("nomeSocial") as string) || undefined,
|
||||
cpf: (formatCPF(formData.get("cpf") as string)) || "", // obrigatório
|
||||
email: (formData.get("email") as string) || "", // obrigatório
|
||||
phone_mobile: (formatPhoneMobile(formData.get("celular") as string)) || "", // obrigatório
|
||||
birth_date: formData.get("dataNascimento") ? new Date(formData.get("dataNascimento") as string) : undefined,
|
||||
sex: (formData.get("sexo") as string) || undefined,
|
||||
blood_type: (formData.get("tipoSanguineo") as string) || undefined,
|
||||
weight_kg: formData.get("peso") ? parseFloat(formData.get("peso") as string) : undefined,
|
||||
height_m: formData.get("altura") ? parseFloat(formData.get("altura") as string) : undefined,
|
||||
cep: (formatCEP(formData.get("cep") as string)) || undefined,
|
||||
street: (formData.get("endereco") as string) || undefined,
|
||||
number: (formData.get("numero") as string) || undefined,
|
||||
complement: (formData.get("complemento") as string) || undefined,
|
||||
neighborhood: (formData.get("bairro") as string) || undefined,
|
||||
city: (formData.get("cidade") as string) || undefined,
|
||||
state: (formData.get("estado") as string) || undefined,
|
||||
};
|
||||
|
||||
console.log(apiPayload.email)
|
||||
console.log(apiPayload.cep)
|
||||
console.log(apiPayload.phone_mobile)
|
||||
|
||||
const errors: string[] = [];
|
||||
const fullName = apiPayload.full_name?.trim() || "";
|
||||
if (!fullName || fullName.length < 2 || fullName.length > 255) {
|
||||
errors.push("Nome deve ter entre 2 e 255 caracteres.");
|
||||
}
|
||||
|
||||
const cpf = apiPayload.cpf || "";
|
||||
if (!/^\d{3}\.\d{3}\.\d{3}-\d{2}$/.test(cpf)) {
|
||||
errors.push("CPF deve estar no formato XXX.XXX.XXX-XX.");
|
||||
}
|
||||
|
||||
const sex = apiPayload.sex;
|
||||
const allowedSex = ["Masculino", "Feminino", "outro"];
|
||||
if (!sex || !allowedSex.includes(sex)) {
|
||||
errors.push("Sexo é obrigatório e deve ser masculino, feminino ou outro.");
|
||||
}
|
||||
|
||||
if (!apiPayload.birth_date) {
|
||||
errors.push("Data de nascimento é obrigatória.");
|
||||
}
|
||||
|
||||
const phoneMobile = apiPayload.phone_mobile || "";
|
||||
if (phoneMobile && !/^\+55 \(\d{2}\) \d{4,5}-\d{4}$/.test(phoneMobile)) {
|
||||
errors.push("Celular deve estar no formato +55 (XX) XXXXX-XXXX.");
|
||||
}
|
||||
|
||||
const cep = apiPayload.cep || "";
|
||||
if (cep && !/^\d{5}-\d{3}$/.test(cep)) {
|
||||
errors.push("CEP deve estar no formato XXXXX-XXX.");
|
||||
}
|
||||
|
||||
const state = apiPayload.state || "";
|
||||
if (state && state.length !== 2) {
|
||||
errors.push("Estado (UF) deve ter 2 caracteres.");
|
||||
}
|
||||
if (errors.length) {
|
||||
toast({ title: "Corrija os campos", description: errors[0] });
|
||||
console.log("campos errados")
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await patientsService.create(apiPayload);
|
||||
console.log(res)
|
||||
|
||||
let message = "Paciente cadastrado com sucesso";
|
||||
try {
|
||||
if (!res[0].id) {
|
||||
throw new Error(`${res.error} ${res.message}`|| "A API retornou erro");
|
||||
} else {
|
||||
console.log(message)
|
||||
}
|
||||
} catch {}
|
||||
|
||||
toast({
|
||||
title: "Sucesso",
|
||||
description: message,
|
||||
});
|
||||
router.push("/manager/pacientes");
|
||||
} catch (err: any) {
|
||||
toast({
|
||||
title: "Erro",
|
||||
description: err?.message || "Não foi possível cadastrar o paciente",
|
||||
});
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<SecretaryLayout>
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Novo Paciente</h1>
|
||||
<p className="text-gray-600">Cadastre um novo paciente no sistema</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form className="space-y-6" onSubmit={handleSubmit}>
|
||||
<div className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-900 mb-6">Dados Pessoais</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center">
|
||||
<Upload className="w-8 h-8 text-gray-400" />
|
||||
</div>
|
||||
<Button variant="outline" type="button" size="sm">
|
||||
<Upload className="w-4 h-4 mr-2" />
|
||||
Carregar Foto
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="nome" className="text-sm font-medium text-gray-700">
|
||||
Nome *
|
||||
</Label>
|
||||
<Input id="nome" name="nome" placeholder="Nome completo" required className="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="nomeSocial" className="text-sm font-medium text-gray-700">
|
||||
Nome Social
|
||||
</Label>
|
||||
<Input id="nomeSocial" name="nomeSocial" placeholder="Nome social ou apelido" className="mt-1" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="cpf" className="text-sm font-medium text-gray-700">
|
||||
CPF *
|
||||
</Label>
|
||||
<Input id="cpf" name="cpf" placeholder="000.000.000-00" required className="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="rg" className="text-sm font-medium text-gray-700">
|
||||
RG
|
||||
</Label>
|
||||
<Input id="rg" name="rg" placeholder="00.000.000-0" className="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="outrosDocumentos" className="text-sm font-medium text-gray-700">
|
||||
Outros Documentos
|
||||
</Label>
|
||||
<Select name="outrosDocumentos">
|
||||
<SelectTrigger className="mt-1">
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="cnh">CNH</SelectItem>
|
||||
<SelectItem value="passaporte">Passaporte</SelectItem>
|
||||
<SelectItem value="carteira-trabalho">Carteira de Trabalho</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<Label className="text-sm font-medium text-gray-700">Sexo *</Label>
|
||||
<div className="flex gap-4 mt-2">
|
||||
<label className="flex items-center gap-2">
|
||||
<input type="radio" name="sexo" value="Masculino" className="text-blue-600" required/>
|
||||
<span className="text-sm">Masculino</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2">
|
||||
<input type="radio" name="sexo" value="Feminino" className="text-blue-600" required/>
|
||||
<span className="text-sm">Feminino</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="dataNascimento" className="text-sm font-medium text-gray-700">
|
||||
Data de Nascimento *
|
||||
</Label>
|
||||
<Input id="dataNascimento" name="dataNascimento" type="date" className="mt-1" required/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="estadoCivil" className="text-sm font-medium text-gray-700">
|
||||
Estado Civil
|
||||
</Label>
|
||||
<Select name="estadoCivil">
|
||||
<SelectTrigger className="mt-1">
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="solteiro">Solteiro(a)</SelectItem>
|
||||
<SelectItem value="casado">Casado(a)</SelectItem>
|
||||
<SelectItem value="divorciado">Divorciado(a)</SelectItem>
|
||||
<SelectItem value="viuvo">Viúvo(a)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="etnia" className="text-sm font-medium text-gray-700">
|
||||
Etnia
|
||||
</Label>
|
||||
<Select name="etnia">
|
||||
<SelectTrigger className="mt-1">
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="branca">Branca</SelectItem>
|
||||
<SelectItem value="preta">Preta</SelectItem>
|
||||
<SelectItem value="parda">Parda</SelectItem>
|
||||
<SelectItem value="amarela">Amarela</SelectItem>
|
||||
<SelectItem value="indigena">Indígena</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="raca" className="text-sm font-medium text-gray-700">
|
||||
Raça
|
||||
</Label>
|
||||
<Select name="raca">
|
||||
<SelectTrigger className="mt-1">
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="branca">Branca</SelectItem>
|
||||
<SelectItem value="preta">Preta</SelectItem>
|
||||
<SelectItem value="parda">Parda</SelectItem>
|
||||
<SelectItem value="amarela">Amarela</SelectItem>
|
||||
<SelectItem value="indigena">Indígena</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="naturalidade" className="text-sm font-medium text-gray-700">
|
||||
Naturalidade
|
||||
</Label>
|
||||
<Select name="naturalidade">
|
||||
<SelectTrigger className="mt-1">
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="aracaju">Aracaju</SelectItem>
|
||||
<SelectItem value="salvador">Salvador</SelectItem>
|
||||
<SelectItem value="recife">Recife</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="nacionalidade" className="text-sm font-medium text-gray-700">
|
||||
Nacionalidade
|
||||
</Label>
|
||||
<Select name="nacionalidade">
|
||||
<SelectTrigger className="mt-1">
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="brasileira">Brasileira</SelectItem>
|
||||
<SelectItem value="estrangeira">Estrangeira</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="profissao" className="text-sm font-medium text-gray-700">
|
||||
Profissão
|
||||
</Label>
|
||||
<Input id="profissao" name="profissao" placeholder="Profissão" className="mt-1" />
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="nomeMae" className="text-sm font-medium text-gray-700">
|
||||
Nome da Mãe
|
||||
</Label>
|
||||
<Input id="nomeMae" name="nomeMae" placeholder="Nome da mãe" className="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="profissaoMae" className="text-sm font-medium text-gray-700">
|
||||
Profissão da Mãe
|
||||
</Label>
|
||||
<Input id="profissaoMae" name="profissaoMae" placeholder="Profissão da mãe" className="mt-1" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="nomePai" className="text-sm font-medium text-gray-700">
|
||||
Nome do Pai
|
||||
</Label>
|
||||
<Input id="nomePai" name="nomePai" placeholder="Nome do pai" className="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="profissaoPai" className="text-sm font-medium text-gray-700">
|
||||
Profissão do Pai
|
||||
</Label>
|
||||
<Input id="profissaoPai" name="profissaoPai" placeholder="Profissão do pai" className="mt-1" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="nomeResponsavel" className="text-sm font-medium text-gray-700">
|
||||
Nome do Responsável
|
||||
</Label>
|
||||
<Input id="nomeResponsavel" name="nomeResponsavel" placeholder="Nome do responsável" className="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="cpfResponsavel" className="text-sm font-medium text-gray-700">
|
||||
CPF do Responsável
|
||||
</Label>
|
||||
<Input id="cpfResponsavel" name="cpfResponsavel" placeholder="000.000.000-00" className="mt-1" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="nomeEsposo" className="text-sm font-medium text-gray-700">
|
||||
Nome do Esposo(a)
|
||||
</Label>
|
||||
<Input id="nomeEsposo" name="nomeEsposo" placeholder="Nome do esposo(a)" className="mt-1" />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox id="rnGuia" name="rnGuia" />
|
||||
<Label htmlFor="rnGuia" className="text-sm text-gray-700">
|
||||
RN na Guia do convênio
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="codigoLegado" className="text-sm font-medium text-gray-700">
|
||||
Código Legado
|
||||
</Label>
|
||||
<Input id="codigoLegado" name="codigoLegado" placeholder="Código do sistema anterior" className="mt-1" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="observacoes" className="text-sm font-medium text-gray-700">
|
||||
Observações
|
||||
</Label>
|
||||
<Textarea id="observacoes" name="observacoes" placeholder="Observações gerais sobre o paciente" className="min-h-[100px] mt-1" />
|
||||
</div>
|
||||
|
||||
<Collapsible open={anexosOpen} onOpenChange={setAnexosOpen}>
|
||||
<CollapsibleTrigger asChild>
|
||||
<Button variant="ghost" type="button" className="w-full justify-between p-0 h-auto text-left">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-4 h-4 bg-gray-400 rounded-sm flex items-center justify-center">
|
||||
<span className="text-white text-xs">📎</span>
|
||||
</div>
|
||||
<span className="text-sm font-medium text-gray-700">Anexos do paciente</span>
|
||||
</div>
|
||||
<ChevronDown className={`w-4 h-4 transition-transform ${anexosOpen ? "rotate-180" : ""}`} />
|
||||
</Button>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="space-y-4 mt-4">
|
||||
{anexos.map((anexo, index) => (
|
||||
<div key={index} className="flex items-center justify-between p-3 border rounded-lg bg-gray-50">
|
||||
<span className="text-sm">{anexo}</span>
|
||||
<Button variant="ghost" size="sm" onClick={() => removerAnexo(index)} type="button">
|
||||
<X className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
<Button variant="outline" onClick={adicionarAnexo} type="button" size="sm">
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Adicionar Anexo
|
||||
</Button>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-900 mb-6">Contato</h2>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="grid md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="email" className="text-sm font-medium text-gray-700">
|
||||
E-mail *
|
||||
</Label>
|
||||
<Input id="email" name="email" type="email" placeholder="email@exemplo.com" className="mt-1" required/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="celular" className="text-sm font-medium text-gray-700">
|
||||
Celular *
|
||||
</Label>
|
||||
<div className="flex mt-1">
|
||||
<Select>
|
||||
<SelectTrigger className="w-20 rounded-r-none">
|
||||
<SelectValue placeholder="+55" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="+55">+55</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Input id="celular" name="celular" placeholder="(XX) XXXXX-XXXX" className="rounded-l-none" required/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="telefone1" className="text-sm font-medium text-gray-700">
|
||||
Telefone 1
|
||||
</Label>
|
||||
<Input id="telefone1" name="telefone1" placeholder="(XX) XXXX-XXXX" className="mt-1" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="telefone2" className="text-sm font-medium text-gray-700">
|
||||
Telefone 2
|
||||
</Label>
|
||||
<Input id="telefone2" name="telefone2" placeholder="(XX) XXXX-XXXX" className="mt-1" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-900 mb-6">Endereço</h2>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="cep" className="text-sm font-medium text-gray-700">
|
||||
CEP
|
||||
</Label>
|
||||
<Input id="cep" name="cep" placeholder="00000-000" className="mt-1 max-w-xs" />
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-4">
|
||||
<div className="md:col-span-2">
|
||||
<Label htmlFor="endereco" className="text-sm font-medium text-gray-700">
|
||||
Endereço
|
||||
</Label>
|
||||
<Input id="endereco" name="endereco" placeholder="Rua, Avenida..." className="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="numero" className="text-sm font-medium text-gray-700">
|
||||
Número
|
||||
</Label>
|
||||
<Input id="numero" name="numero" placeholder="123" className="mt-1" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="complemento" className="text-sm font-medium text-gray-700">
|
||||
Complemento
|
||||
</Label>
|
||||
<Input id="complemento" name="complemento" placeholder="Apto, Bloco..." className="mt-1" />
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="bairro" className="text-sm font-medium text-gray-700">
|
||||
Bairro
|
||||
</Label>
|
||||
<Input id="bairro" name="bairro" placeholder="Bairro" className="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="cidade" className="text-sm font-medium text-gray-700">
|
||||
Cidade
|
||||
</Label>
|
||||
<Input id="cidade" name="cidade" placeholder="Cidade" className="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="estado" className="text-sm font-medium text-gray-700">
|
||||
Estado
|
||||
</Label>
|
||||
<Select name="estado">
|
||||
<SelectTrigger className="mt-1">
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="SE">Sergipe</SelectItem>
|
||||
<SelectItem value="BA">Bahia</SelectItem>
|
||||
<SelectItem value="AL">Alagoas</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-900 mb-6">Informações Médicas</h2>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="grid md:grid-cols-4 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="tipoSanguineo" className="text-sm font-medium text-gray-700">
|
||||
Tipo Sanguíneo
|
||||
</Label>
|
||||
<Select name="tipoSanguineo">
|
||||
<SelectTrigger className="mt-1">
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="A+">A+</SelectItem>
|
||||
<SelectItem value="A-">A-</SelectItem>
|
||||
<SelectItem value="B+">B+</SelectItem>
|
||||
<SelectItem value="B-">B-</SelectItem>
|
||||
<SelectItem value="AB+">AB+</SelectItem>
|
||||
<SelectItem value="AB-">AB-</SelectItem>
|
||||
<SelectItem value="O+">O+</SelectItem>
|
||||
<SelectItem value="O-">O-</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="peso" className="text-sm font-medium text-gray-700">
|
||||
Peso
|
||||
</Label>
|
||||
<div className="relative mt-1">
|
||||
<Input id="peso" name="peso" type="number" placeholder="70" />
|
||||
<span className="absolute right-3 top-1/2 transform -translate-y-1/2 text-sm text-gray-500">kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="altura" className="text-sm font-medium text-gray-700">
|
||||
Altura
|
||||
</Label>
|
||||
<div className="relative mt-1">
|
||||
<Input id="altura" name="altura" type="number" step="0.01" placeholder="1.70" />
|
||||
<span className="absolute right-3 top-1/2 transform -translate-y-1/2 text-sm text-gray-500">m</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="imc" className="text-sm font-medium text-gray-700">
|
||||
IMC
|
||||
</Label>
|
||||
<div className="relative mt-1">
|
||||
<Input id="imc" name="imc" placeholder="Calculado automaticamente" disabled />
|
||||
<span className="absolute right-3 top-1/2 transform -translate-y-1/2 text-sm text-gray-500">kg/m²</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="alergias" className="text-sm font-medium text-gray-700">
|
||||
Alergias
|
||||
</Label>
|
||||
<Textarea id="alergias" name="alergias" placeholder="Ex: AAS, Dipirona, etc." className="min-h-[80px] mt-1" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg border border-gray-200 p-6">
|
||||
<h2 className="text-lg font-semibold text-gray-900 mb-6">Informações de Convênio</h2>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="convenio" className="text-sm font-medium text-gray-700">
|
||||
Convênio
|
||||
</Label>
|
||||
<Select name="convenio">
|
||||
<SelectTrigger className="mt-1">
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="particular">Particular</SelectItem>
|
||||
<SelectItem value="sus">SUS</SelectItem>
|
||||
<SelectItem value="unimed">Unimed</SelectItem>
|
||||
<SelectItem value="bradesco">Bradesco Saúde</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="plano" className="text-sm font-medium text-gray-700">
|
||||
Plano
|
||||
</Label>
|
||||
<Input id="plano" name="plano" placeholder="Nome do plano" className="mt-1" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="numeroMatricula" className="text-sm font-medium text-gray-700">
|
||||
Nº de Matrícula
|
||||
</Label>
|
||||
<Input id="numeroMatricula" name="numeroMatricula" placeholder="Número da matrícula" className="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="validadeCarteira" className="text-sm font-medium text-gray-700">
|
||||
Validade da Carteira
|
||||
</Label>
|
||||
<Input id="validadeCarteira" name="validadeCarteira" type="date" className="mt-1" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox id="validadeIndeterminada" name="validadeIndeterminada" />
|
||||
<Label htmlFor="validadeIndeterminada" className="text-sm text-gray-700">
|
||||
Validade Indeterminada
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-4">
|
||||
<Link href="/manager/pacientes">
|
||||
<Button variant="outline" type="button">
|
||||
Cancelar
|
||||
</Button>
|
||||
</Link>
|
||||
<Button type="submit" className="bg-blue-600 hover:bg-blue-700" disabled={isLoading}>
|
||||
{isLoading ? "Salvando..." : "Salvar Paciente"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</SecretaryLayout>
|
||||
);
|
||||
}
|
||||
467
app/manager/pacientes/page.tsx
Normal file
467
app/manager/pacientes/page.tsx
Normal file
@ -0,0 +1,467 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useRef, useCallback } 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 ManagerLayout from "@/components/manager-layout";
|
||||
import { patientsService } from "@/services/patientsApi.mjs";
|
||||
|
||||
export default function PacientesPage() {
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [convenioFilter, setConvenioFilter] = useState("all");
|
||||
const [vipFilter, setVipFilter] = useState("all");
|
||||
const [patients, setPatients] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [page, setPage] = useState(1);
|
||||
const [hasNext, setHasNext] = useState(true);
|
||||
const [isFetching, setIsFetching] = useState(false);
|
||||
const observerRef = useRef<HTMLDivElement | null>(null);
|
||||
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
||||
const [patientToDelete, setPatientToDelete] = useState<string | null>(null);
|
||||
const [detailsDialogOpen, setDetailsDialogOpen] = useState(false);
|
||||
const [patientDetails, setPatientDetails] = useState<any | null>(null);
|
||||
const openDetailsDialog = async (patientId: string) => {
|
||||
setDetailsDialogOpen(true);
|
||||
setPatientDetails(null);
|
||||
try {
|
||||
const res = await patientsService.getById(patientId);
|
||||
setPatientDetails(res[0]);
|
||||
} catch (e: any) {
|
||||
setPatientDetails({ error: e?.message || "Erro ao buscar detalhes" });
|
||||
}
|
||||
};
|
||||
|
||||
const fetchPacientes = useCallback(
|
||||
async (pageToFetch: number) => {
|
||||
if (isFetching || !hasNext) return;
|
||||
setIsFetching(true);
|
||||
setError(null);
|
||||
try {
|
||||
const res = await patientsService.list();
|
||||
const mapped = res.map((p: any) => ({
|
||||
id: String(p.id ?? ""),
|
||||
nome: p.full_name ?? "",
|
||||
telefone: p.phone_mobile ?? p.phone1 ?? "",
|
||||
cidade: p.city ?? "",
|
||||
estado: p.state ?? "",
|
||||
ultimoAtendimento: p.last_visit_at ?? "",
|
||||
proximoAtendimento: p.next_appointment_at ?? "",
|
||||
vip: Boolean(p.vip ?? false),
|
||||
convenio: p.convenio ?? "", // se não existir, fica vazio
|
||||
status: p.status ?? undefined,
|
||||
}));
|
||||
|
||||
setPatients((prev) => {
|
||||
const all = [...prev, ...mapped];
|
||||
const unique = Array.from(
|
||||
new Map(all.map((p) => [p.id, p])).values()
|
||||
);
|
||||
return unique;
|
||||
});
|
||||
|
||||
if (!mapped.id) setHasNext(false); // parar carregamento
|
||||
else setPage((prev) => prev + 1);
|
||||
} catch (e: any) {
|
||||
setError(e?.message || "Erro ao buscar pacientes");
|
||||
} finally {
|
||||
setIsFetching(false);
|
||||
}
|
||||
},
|
||||
[isFetching, hasNext]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
fetchPacientes(page);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!observerRef.current || !hasNext) return;
|
||||
const observer = new window.IntersectionObserver((entries) => {
|
||||
if (entries[0].isIntersecting && !isFetching && hasNext) {
|
||||
fetchPacientes(page);
|
||||
}
|
||||
});
|
||||
observer.observe(observerRef.current);
|
||||
return () => {
|
||||
if (observerRef.current) observer.unobserve(observerRef.current);
|
||||
};
|
||||
}, [fetchPacientes, page, hasNext, isFetching]);
|
||||
|
||||
const handleDeletePatient = async (patientId: string) => {
|
||||
// Remove from current list (client-side deletion)
|
||||
try {
|
||||
const res = await patientsService.delete(patientId);
|
||||
|
||||
if (res) {
|
||||
alert(`${res.error} ${res.message}`);
|
||||
}
|
||||
|
||||
setPatients((prev) =>
|
||||
prev.filter((p) => String(p.id) !== String(patientId))
|
||||
);
|
||||
} catch (e: any) {
|
||||
setError(e?.message || "Erro ao deletar paciente");
|
||||
}
|
||||
setDeleteDialogOpen(false);
|
||||
setPatientToDelete(null);
|
||||
};
|
||||
|
||||
const openDeleteDialog = (patientId: string) => {
|
||||
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 (
|
||||
<ManagerLayout>
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-xl md:text-2xl font-bold text-foreground">
|
||||
Pacientes
|
||||
</h1>
|
||||
<p className="text-muted-foreground text-sm md:text-base">
|
||||
Gerencie as informações de seus pacientes
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Link href="/manager/pacientes/novo">
|
||||
<Button className="w-full md:w-auto">
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Adicionar
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row flex-wrap gap-4 bg-card p-4 rounded-lg border border-border">
|
||||
{/* Convênio */}
|
||||
<div className="flex items-center gap-2 w-full md:w-auto">
|
||||
<span className="text-sm font-medium text-foreground">
|
||||
Convênio
|
||||
</span>
|
||||
<Select value={convenioFilter} onValueChange={setConvenioFilter}>
|
||||
<SelectTrigger className="w-full md: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 w-full md:w-auto">
|
||||
<span className="text-sm font-medium text-foreground">VIP</span>
|
||||
<Select value={vipFilter} onValueChange={setVipFilter}>
|
||||
<SelectTrigger className="w-full md: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 w-full md:w-auto">
|
||||
<span className="text-sm font-medium text-foreground">
|
||||
Aniversariantes
|
||||
</span>
|
||||
<Select>
|
||||
<SelectTrigger className="w-full md: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 w-full md:w-auto">
|
||||
<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">
|
||||
{error ? (
|
||||
<div className="p-6 text-red-600">{`Erro ao carregar pacientes: ${error}`}</div>
|
||||
) : (
|
||||
<table className="w-full min-w-[600px]">
|
||||
<thead className="bg-gray-50 border-b border-gray-200">
|
||||
<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">
|
||||
Telefone
|
||||
</th>
|
||||
<th className="text-left p-2 md:p-4 font-medium text-gray-700">
|
||||
Cidade
|
||||
</th>
|
||||
<th className="text-left p-2 md:p-4 font-medium text-gray-700">
|
||||
Estado
|
||||
</th>
|
||||
<th className="text-left p-2 md:p-4 font-medium text-gray-700">
|
||||
Último atendimento
|
||||
</th>
|
||||
<th className="text-left p-2 md:p-4 font-medium text-gray-700">
|
||||
Próximo atendimento
|
||||
</th>
|
||||
<th className="text-left p-2 md: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>
|
||||
<div className="text-blue-600">Ações</div>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem
|
||||
onClick={() =>
|
||||
openDetailsDialog(String(patient.id))
|
||||
}
|
||||
>
|
||||
<Eye className="w-4 h-4 mr-2" />
|
||||
Ver detalhes
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link
|
||||
href={`/manager/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(String(patient.id))
|
||||
}
|
||||
>
|
||||
<Trash2 className="w-4 h-4 mr-2" />
|
||||
Excluir
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
<div ref={observerRef} style={{ height: 1 }} />
|
||||
{isFetching && (
|
||||
<div className="p-4 text-center text-gray-500">
|
||||
Carregando mais pacientes...
|
||||
</div>
|
||||
)}
|
||||
</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>
|
||||
|
||||
{/* Modal de detalhes do paciente */}
|
||||
<AlertDialog
|
||||
open={detailsDialogOpen}
|
||||
onOpenChange={setDetailsDialogOpen}
|
||||
>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Detalhes do Paciente</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
{patientDetails === null ? (
|
||||
<div className="text-gray-500">Carregando...</div>
|
||||
) : patientDetails?.error ? (
|
||||
<div className="text-red-600">{patientDetails.error}</div>
|
||||
) : (
|
||||
<div className="space-y-2 text-left">
|
||||
<p>
|
||||
<strong>Nome:</strong> {patientDetails.full_name}
|
||||
</p>
|
||||
<p>
|
||||
<strong>CPF:</strong> {patientDetails.cpf}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Email:</strong> {patientDetails.email}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Telefone:</strong>{" "}
|
||||
{patientDetails.phone_mobile ??
|
||||
patientDetails.phone1 ??
|
||||
patientDetails.phone2 ??
|
||||
"-"}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Nome social:</strong>{" "}
|
||||
{patientDetails.social_name ?? "-"}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Sexo:</strong> {patientDetails.sex ?? "-"}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Tipo sanguíneo:</strong>{" "}
|
||||
{patientDetails.blood_type ?? "-"}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Peso:</strong> {patientDetails.weight_kg ?? "-"}
|
||||
{patientDetails.weight_kg ? "kg" : ""}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Altura:</strong> {patientDetails.height_m ?? "-"}
|
||||
{patientDetails.height_m ? "m" : ""}
|
||||
</p>
|
||||
<p>
|
||||
<strong>IMC:</strong> {patientDetails.bmi ?? "-"}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Endereço:</strong> {patientDetails.street ?? "-"}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Bairro:</strong>{" "}
|
||||
{patientDetails.neighborhood ?? "-"}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Cidade:</strong> {patientDetails.city ?? "-"}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Estado:</strong> {patientDetails.state ?? "-"}
|
||||
</p>
|
||||
<p>
|
||||
<strong>CEP:</strong> {patientDetails.cep ?? "-"}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Criado em:</strong>{" "}
|
||||
{patientDetails.created_at ?? "-"}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Atualizado em:</strong>{" "}
|
||||
{patientDetails.updated_at ?? "-"}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Id:</strong> {patientDetails.id ?? "-"}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Fechar</AlertDialogCancel>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
</ManagerLayout>
|
||||
);
|
||||
}
|
||||
@ -3,10 +3,30 @@
|
||||
import { useState, useEffect, useRef, useCallback } 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 {
|
||||
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 {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import SecretaryLayout from "@/components/secretary-layout";
|
||||
import { patientsService } from "@/services/patientsApi.mjs";
|
||||
|
||||
@ -58,7 +78,9 @@ export default function PacientesPage() {
|
||||
|
||||
setPatients((prev) => {
|
||||
const all = [...prev, ...mapped];
|
||||
const unique = Array.from(new Map(all.map((p) => [p.id, p])).values());
|
||||
const unique = Array.from(
|
||||
new Map(all.map((p) => [p.id, p])).values()
|
||||
);
|
||||
return unique;
|
||||
});
|
||||
|
||||
@ -100,7 +122,9 @@ export default function PacientesPage() {
|
||||
alert(`${res.error} ${res.message}`);
|
||||
}
|
||||
|
||||
setPatients((prev) => prev.filter((p) => String(p.id) !== String(patientId)));
|
||||
setPatients((prev) =>
|
||||
prev.filter((p) => String(p.id) !== String(patientId))
|
||||
);
|
||||
} catch (e: any) {
|
||||
setError(e?.message || "Erro ao deletar paciente");
|
||||
}
|
||||
@ -114,9 +138,15 @@ export default function PacientesPage() {
|
||||
};
|
||||
|
||||
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);
|
||||
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;
|
||||
});
|
||||
@ -126,8 +156,12 @@ export default function PacientesPage() {
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-xl md:text-2xl font-bold text-foreground">Pacientes</h1>
|
||||
<p className="text-muted-foreground text-sm md:text-base">Gerencie as informações de seus pacientes</p>
|
||||
<h1 className="text-xl md:text-2xl font-bold text-foreground">
|
||||
Pacientes
|
||||
</h1>
|
||||
<p className="text-muted-foreground text-sm md:text-base">
|
||||
Gerencie as informações de seus pacientes
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Link href="/secretary/pacientes/novo">
|
||||
@ -142,7 +176,9 @@ export default function PacientesPage() {
|
||||
<div className="flex flex-col md:flex-row flex-wrap gap-4 bg-card p-4 rounded-lg border border-border">
|
||||
{/* Convênio */}
|
||||
<div className="flex items-center gap-2 w-full md:w-auto">
|
||||
<span className="text-sm font-medium text-foreground">Convênio</span>
|
||||
<span className="text-sm font-medium text-foreground">
|
||||
Convênio
|
||||
</span>
|
||||
<Select value={convenioFilter} onValueChange={setConvenioFilter}>
|
||||
<SelectTrigger className="w-full md:w-40">
|
||||
<SelectValue placeholder="Selecione o Convênio" />
|
||||
@ -170,7 +206,9 @@ export default function PacientesPage() {
|
||||
</Select>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 w-full md:w-auto">
|
||||
<span className="text-sm font-medium text-foreground">Aniversariantes</span>
|
||||
<span className="text-sm font-medium text-foreground">
|
||||
Aniversariantes
|
||||
</span>
|
||||
<Select>
|
||||
<SelectTrigger className="w-full md:w-32">
|
||||
<SelectValue placeholder="Selecione" />
|
||||
@ -183,34 +221,6 @@ export default function PacientesPage() {
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium text-foreground">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-foreground">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 w-full md:w-auto">
|
||||
<Filter className="w-4 h-4 mr-2" />
|
||||
Filtro avançado
|
||||
@ -225,50 +235,85 @@ export default function PacientesPage() {
|
||||
<table className="w-full min-w-[600px]">
|
||||
<thead className="bg-gray-50 border-b border-gray-200">
|
||||
<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">Telefone</th>
|
||||
<th className="text-left p-2 md:p-4 font-medium text-gray-700">Cidade</th>
|
||||
<th className="text-left p-2 md:p-4 font-medium text-gray-700">Estado</th>
|
||||
<th className="text-left p-2 md:p-4 font-medium text-gray-700">Último atendimento</th>
|
||||
<th className="text-left p-2 md:p-4 font-medium text-gray-700">Próximo atendimento</th>
|
||||
<th className="text-left p-2 md:p-4 font-medium text-gray-700">Ações</th>
|
||||
<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">
|
||||
Telefone
|
||||
</th>
|
||||
<th className="text-left p-2 md:p-4 font-medium text-gray-700">
|
||||
Cidade
|
||||
</th>
|
||||
<th className="text-left p-2 md:p-4 font-medium text-gray-700">
|
||||
Estado
|
||||
</th>
|
||||
<th className="text-left p-2 md:p-4 font-medium text-gray-700">
|
||||
Último atendimento
|
||||
</th>
|
||||
<th className="text-left p-2 md:p-4 font-medium text-gray-700">
|
||||
Próximo atendimento
|
||||
</th>
|
||||
<th className="text-left p-2 md: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"}
|
||||
{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">
|
||||
<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>
|
||||
<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>
|
||||
<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.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 text-gray-600">
|
||||
{patient.ultimoAtendimento}
|
||||
</td>
|
||||
<td className="p-4 text-gray-600">
|
||||
{patient.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(patient.id))}>
|
||||
<DropdownMenuItem
|
||||
onClick={() =>
|
||||
openDetailsDialog(String(patient.id))
|
||||
}
|
||||
>
|
||||
<Eye className="w-4 h-4 mr-2" />
|
||||
Ver detalhes
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href={`/secretary/pacientes/${patient.id}/editar`}>
|
||||
<Link
|
||||
href={`/secretary/pacientes/${patient.id}/editar`}
|
||||
>
|
||||
<Edit className="w-4 h-4 mr-2" />
|
||||
Editar
|
||||
</Link>
|
||||
@ -277,7 +322,12 @@ export default function PacientesPage() {
|
||||
<Calendar className="w-4 h-4 mr-2" />
|
||||
Marcar consulta
|
||||
</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" />
|
||||
Excluir
|
||||
</DropdownMenuItem>
|
||||
@ -291,7 +341,11 @@ export default function PacientesPage() {
|
||||
</table>
|
||||
)}
|
||||
<div ref={observerRef} style={{ height: 1 }} />
|
||||
{isFetching && <div className="p-4 text-center text-gray-500">Carregando mais pacientes...</div>}
|
||||
{isFetching && (
|
||||
<div className="p-4 text-center text-gray-500">
|
||||
Carregando mais pacientes...
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -299,11 +353,19 @@ export default function PacientesPage() {
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<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>
|
||||
<AlertDialogFooter>
|
||||
<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
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
@ -311,7 +373,10 @@ export default function PacientesPage() {
|
||||
</AlertDialog>
|
||||
|
||||
{/* Modal de detalhes do paciente */}
|
||||
<AlertDialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}>
|
||||
<AlertDialog
|
||||
open={detailsDialogOpen}
|
||||
onOpenChange={setDetailsDialogOpen}
|
||||
>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Detalhes do Paciente</AlertDialogTitle>
|
||||
@ -332,16 +397,22 @@ export default function PacientesPage() {
|
||||
<strong>Email:</strong> {patientDetails.email}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Telefone:</strong> {patientDetails.phone_mobile ?? patientDetails.phone1 ?? patientDetails.phone2 ?? "-"}
|
||||
<strong>Telefone:</strong>{" "}
|
||||
{patientDetails.phone_mobile ??
|
||||
patientDetails.phone1 ??
|
||||
patientDetails.phone2 ??
|
||||
"-"}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Nome social:</strong> {patientDetails.social_name ?? "-"}
|
||||
<strong>Nome social:</strong>{" "}
|
||||
{patientDetails.social_name ?? "-"}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Sexo:</strong> {patientDetails.sex ?? "-"}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Tipo sanguíneo:</strong> {patientDetails.blood_type ?? "-"}
|
||||
<strong>Tipo sanguíneo:</strong>{" "}
|
||||
{patientDetails.blood_type ?? "-"}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Peso:</strong> {patientDetails.weight_kg ?? "-"}
|
||||
@ -358,7 +429,8 @@ export default function PacientesPage() {
|
||||
<strong>Endereço:</strong> {patientDetails.street ?? "-"}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Bairro:</strong> {patientDetails.neighborhood ?? "-"}
|
||||
<strong>Bairro:</strong>{" "}
|
||||
{patientDetails.neighborhood ?? "-"}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Cidade:</strong> {patientDetails.city ?? "-"}
|
||||
@ -370,10 +442,12 @@ export default function PacientesPage() {
|
||||
<strong>CEP:</strong> {patientDetails.cep ?? "-"}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Criado em:</strong> {patientDetails.created_at ?? "-"}
|
||||
<strong>Criado em:</strong>{" "}
|
||||
{patientDetails.created_at ?? "-"}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Atualizado em:</strong> {patientDetails.updated_at ?? "-"}
|
||||
<strong>Atualizado em:</strong>{" "}
|
||||
{patientDetails.updated_at ?? "-"}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Id:</strong> {patientDetails.id ?? "-"}
|
||||
|
||||
@ -61,7 +61,7 @@ export function LoginForm({ children }: LoginFormProps) {
|
||||
case "secretary":
|
||||
redirectPath = "/secretary/pacientes";
|
||||
break;
|
||||
case "patient":
|
||||
case "paciente":
|
||||
redirectPath = "/patient/dashboard";
|
||||
break;
|
||||
case "finance":
|
||||
|
||||
@ -11,8 +11,28 @@ import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||||
import { Search, Bell, Calendar, Clock, User, LogOut, Menu, X, Home, FileText, ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
Search,
|
||||
Bell,
|
||||
Calendar,
|
||||
Clock,
|
||||
User,
|
||||
LogOut,
|
||||
Menu,
|
||||
X,
|
||||
Home,
|
||||
FileText,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
} from "lucide-react";
|
||||
|
||||
interface DoctorData {
|
||||
id: string;
|
||||
@ -152,7 +172,11 @@ export default function DoctorLayout({ children }: PatientLayoutProps) {
|
||||
return (
|
||||
// O restante do seu código JSX permanece exatamente o mesmo
|
||||
<div className="min-h-screen bg-background flex">
|
||||
<div className={`bg-card border-r border transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"} fixed left-0 top-0 h-screen flex flex-col z-50`}>
|
||||
<div
|
||||
className={`bg-card border-r border transition-all duration-300 ${
|
||||
sidebarCollapsed ? "w-16" : "w-64"
|
||||
} fixed left-0 top-0 h-screen flex flex-col z-50`}
|
||||
>
|
||||
<div className="p-4 border-b border">
|
||||
<div className="flex items-center justify-between">
|
||||
{!sidebarCollapsed && (
|
||||
@ -163,21 +187,40 @@ export default function DoctorLayout({ children }: PatientLayoutProps) {
|
||||
<span className="font-semibold text-gray-900">MediConnect</span>
|
||||
</div>
|
||||
)}
|
||||
<Button variant="ghost" size="sm" onClick={() => setSidebarCollapsed(!sidebarCollapsed)} className="p-1">
|
||||
{sidebarCollapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronLeft className="w-4 h-4" />}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
|
||||
className="p-1"
|
||||
>
|
||||
{sidebarCollapsed ? (
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
) : (
|
||||
<ChevronLeft className="w-4 h-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<nav className="flex-1 p-2 overflow-y-auto">
|
||||
{menuItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const isActive = pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href));
|
||||
const isActive =
|
||||
pathname === item.href ||
|
||||
(item.href !== "/" && pathname.startsWith(item.href));
|
||||
|
||||
return (
|
||||
<Link key={item.href} href={item.href}>
|
||||
<div className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600" : "text-gray-600 hover:bg-gray-50"}`}>
|
||||
<div
|
||||
className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${
|
||||
isActive
|
||||
? "bg-blue-50 text-blue-600 border-r-2 border-blue-600"
|
||||
: "text-gray-600 hover:bg-gray-50"
|
||||
}`}
|
||||
>
|
||||
<Icon className="w-5 h-5 flex-shrink-0" />
|
||||
{!sidebarCollapsed && <span className="font-medium">{item.label}</span>}
|
||||
{!sidebarCollapsed && (
|
||||
<span className="font-medium">{item.label}</span>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
@ -185,7 +228,11 @@ export default function DoctorLayout({ children }: PatientLayoutProps) {
|
||||
</nav>
|
||||
// ... (seu código anterior)
|
||||
{/* Sidebar para desktop */}
|
||||
<div className={`bg-white border-r border-gray-200 transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"} fixed left-0 top-0 h-screen flex flex-col z-50`}>
|
||||
<div
|
||||
className={`bg-white border-r border-gray-200 transition-all duration-300 ${
|
||||
sidebarCollapsed ? "w-16" : "w-64"
|
||||
} fixed left-0 top-0 h-screen flex flex-col z-50`}
|
||||
>
|
||||
<div className="p-4 border-b border-gray-200">
|
||||
<div className="flex items-center justify-between">
|
||||
{!sidebarCollapsed && (
|
||||
@ -193,11 +240,22 @@ export default function DoctorLayout({ children }: PatientLayoutProps) {
|
||||
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
|
||||
<div className="w-4 h-4 bg-white rounded-sm"></div>
|
||||
</div>
|
||||
<span className="font-semibold text-gray-900">MediConnect</span>
|
||||
<span className="font-semibold text-gray-900">
|
||||
MediConnect
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<Button variant="ghost" size="sm" onClick={() => setSidebarCollapsed(!sidebarCollapsed)} className="p-1">
|
||||
{sidebarCollapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronLeft className="w-4 h-4" />}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
|
||||
className="p-1"
|
||||
>
|
||||
{sidebarCollapsed ? (
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
) : (
|
||||
<ChevronLeft className="w-4 h-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@ -205,13 +263,23 @@ export default function DoctorLayout({ children }: PatientLayoutProps) {
|
||||
<nav className="flex-1 p-2 overflow-y-auto">
|
||||
{menuItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const isActive = pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href));
|
||||
const isActive =
|
||||
pathname === item.href ||
|
||||
(item.href !== "/" && pathname.startsWith(item.href));
|
||||
|
||||
return (
|
||||
<Link key={item.href} href={item.href}>
|
||||
<div className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600" : "text-gray-600 hover:bg-gray-50"}`}>
|
||||
<div
|
||||
className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${
|
||||
isActive
|
||||
? "bg-blue-50 text-blue-600 border-r-2 border-blue-600"
|
||||
: "text-gray-600 hover:bg-gray-50"
|
||||
}`}
|
||||
>
|
||||
<Icon className="w-5 h-5 flex-shrink-0" />
|
||||
{!sidebarCollapsed && <span className="font-medium">{item.label}</span>}
|
||||
{!sidebarCollapsed && (
|
||||
<span className="font-medium">{item.label}</span>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
@ -232,8 +300,12 @@ export default function DoctorLayout({ children }: PatientLayoutProps) {
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-gray-900 truncate">{doctorData.name}</p>
|
||||
<p className="text-xs text-gray-500 truncate">{doctorData.specialty}</p>
|
||||
<p className="text-sm font-medium text-gray-900 truncate">
|
||||
{doctorData.name}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 truncate">
|
||||
{doctorData.specialty}
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
@ -250,15 +322,29 @@ export default function DoctorLayout({ children }: PatientLayoutProps) {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors text-muted-foreground hover:bg-accent cursor-pointer ${sidebarCollapsed ? "justify-center" : ""}`} onClick={handleLogout}>
|
||||
<div
|
||||
className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors text-muted-foreground hover:bg-accent cursor-pointer ${
|
||||
sidebarCollapsed ? "justify-center" : ""
|
||||
}`}
|
||||
onClick={handleLogout}
|
||||
>
|
||||
<LogOut className="w-5 h-5 flex-shrink-0" />
|
||||
{!sidebarCollapsed && <span className="font-medium">Sair</span>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{isMobileMenuOpen && <div className="fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden" onClick={toggleMobileMenu}></div>}
|
||||
<div className={`bg-white border-r border-gray-200 fixed left-0 top-0 h-screen flex flex-col z-50 transition-transform duration-300 md:hidden ${isMobileMenuOpen ? "translate-x-0 w-64" : "-translate-x-full w-64"}`}>
|
||||
{isMobileMenuOpen && (
|
||||
<div
|
||||
className="fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden"
|
||||
onClick={toggleMobileMenu}
|
||||
></div>
|
||||
)}
|
||||
<div
|
||||
className={`bg-white border-r border-gray-200 fixed left-0 top-0 h-screen flex flex-col z-50 transition-transform duration-300 md:hidden ${
|
||||
isMobileMenuOpen ? "translate-x-0 w-64" : "-translate-x-full w-64"
|
||||
}`}
|
||||
>
|
||||
<div className="p-4 border-b border-gray-200 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
|
||||
@ -266,7 +352,12 @@ export default function DoctorLayout({ children }: PatientLayoutProps) {
|
||||
</div>
|
||||
<span className="font-semibold text-gray-900">Hospital System</span>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" onClick={toggleMobileMenu} className="p-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={toggleMobileMenu}
|
||||
className="p-1"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
@ -274,11 +365,19 @@ export default function DoctorLayout({ children }: PatientLayoutProps) {
|
||||
<nav className="flex-1 p-2 overflow-y-auto">
|
||||
{menuItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const isActive = pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href));
|
||||
const isActive =
|
||||
pathname === item.href ||
|
||||
(item.href !== "/" && pathname.startsWith(item.href));
|
||||
|
||||
return (
|
||||
<Link key={item.href} href={item.href} onClick={toggleMobileMenu}>
|
||||
<div className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive ? "bg-accent text-accent-foreground border-r-2 border-primary" : "text-muted-foreground hover:bg-accent"}`}>
|
||||
<div
|
||||
className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${
|
||||
isActive
|
||||
? "bg-accent text-accent-foreground border-r-2 border-primary"
|
||||
: "text-muted-foreground hover:bg-accent"
|
||||
}`}
|
||||
>
|
||||
<Icon className="w-5 h-5 flex-shrink-0" />
|
||||
<span className="font-medium">{item.label}</span>
|
||||
</div>
|
||||
@ -299,8 +398,12 @@ export default function DoctorLayout({ children }: PatientLayoutProps) {
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-gray-900 truncate">{doctorData.name}</p>
|
||||
<p className="text-xs text-gray-500 truncate">{doctorData.specialty}</p>
|
||||
<p className="text-sm font-medium text-gray-900 truncate">
|
||||
{doctorData.name}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 truncate">
|
||||
{doctorData.specialty}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
@ -318,20 +421,21 @@ export default function DoctorLayout({ children }: PatientLayoutProps) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={`flex-1 flex flex-col transition-all duration-300 ${sidebarCollapsed ? "ml-16" : "ml-64"}`}>
|
||||
<div
|
||||
className={`flex-1 flex flex-col transition-all duration-300 ${
|
||||
sidebarCollapsed ? "ml-16" : "ml-64"
|
||||
}`}
|
||||
>
|
||||
<header className="bg-card border-b border px-6 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4 flex-1">
|
||||
<div className="relative flex-1 max-w-md">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
<Input placeholder="Buscar paciente" className="pl-10 bg-background border" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 flex-1"></div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<Button variant="ghost" size="sm" className="relative">
|
||||
<Bell className="w-5 h-5" />
|
||||
<Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-red-500 text-white text-xs">1</Badge>
|
||||
<Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-red-500 text-white text-xs">
|
||||
1
|
||||
</Badge>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@ -344,7 +448,10 @@ export default function DoctorLayout({ children }: PatientLayoutProps) {
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Confirmar Saída</DialogTitle>
|
||||
<DialogDescription>Deseja realmente sair do sistema? Você precisará fazer login novamente para acessar sua conta.</DialogDescription>
|
||||
<DialogDescription>
|
||||
Deseja realmente sair do sistema? Você precisará fazer login
|
||||
novamente para acessar sua conta.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter className="flex gap-2">
|
||||
<Button variant="outline" onClick={cancelLogout}>
|
||||
|
||||
@ -6,14 +6,34 @@ import type React from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useRouter, usePathname } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { api } from '@/services/api.mjs';
|
||||
import { api } from "@/services/api.mjs";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||||
import { Search, Bell, Calendar, Clock, User, LogOut, Menu, X, Home, FileText, ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
Search,
|
||||
Bell,
|
||||
Calendar,
|
||||
Clock,
|
||||
User,
|
||||
LogOut,
|
||||
Menu,
|
||||
X,
|
||||
Home,
|
||||
FileText,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
} from "lucide-react";
|
||||
|
||||
interface FinancierData {
|
||||
id: string;
|
||||
@ -30,7 +50,9 @@ interface PatientLayoutProps {
|
||||
}
|
||||
|
||||
export default function FinancierLayout({ children }: PatientLayoutProps) {
|
||||
const [financierData, setFinancierData] = useState<FinancierData | null>(null);
|
||||
const [financierData, setFinancierData] = useState<FinancierData | null>(
|
||||
null
|
||||
);
|
||||
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
|
||||
const [showLogoutDialog, setShowLogoutDialog] = useState(false);
|
||||
const router = useRouter();
|
||||
@ -48,7 +70,8 @@ export default function FinancierLayout({ children }: PatientLayoutProps) {
|
||||
id: userInfo.id || "",
|
||||
name: userInfo.user_metadata?.full_name || "Financeiro",
|
||||
email: userInfo.email || "",
|
||||
department: userInfo.user_metadata?.department || "Departamento Financeiro",
|
||||
department:
|
||||
userInfo.user_metadata?.department || "Departamento Financeiro",
|
||||
phone: userInfo.phone || "",
|
||||
cpf: "",
|
||||
permissions: {},
|
||||
@ -106,7 +129,11 @@ export default function FinancierLayout({ children }: PatientLayoutProps) {
|
||||
];
|
||||
|
||||
if (!financierData) {
|
||||
return <div className="flex h-screen w-full items-center justify-center">Carregando...</div>;
|
||||
return (
|
||||
<div className="flex h-screen w-full items-center justify-center">
|
||||
Carregando...
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
@ -202,9 +229,7 @@ export default function FinancierLayout({ children }: PatientLayoutProps) {
|
||||
}
|
||||
onClick={handleLogout}
|
||||
>
|
||||
<LogOut
|
||||
className={sidebarCollapsed ? "h-5 w-5" : "mr-2 h-4 w-4"}
|
||||
/>
|
||||
<LogOut className={sidebarCollapsed ? "h-5 w-5" : "mr-2 h-4 w-4"} />
|
||||
{!sidebarCollapsed && "Sair"}
|
||||
</Button>
|
||||
</div>
|
||||
@ -217,15 +242,7 @@ export default function FinancierLayout({ children }: PatientLayoutProps) {
|
||||
>
|
||||
<header className="bg-card border-b border-border px-6 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4 flex-1 max-w-md">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
|
||||
<Input
|
||||
placeholder="Buscar paciente"
|
||||
className="pl-10 bg-background border-border"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 flex-1 max-w-md"></div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<Button variant="ghost" size="sm" className="relative">
|
||||
|
||||
@ -6,14 +6,30 @@ import { useState, useEffect } from "react";
|
||||
import { useRouter, usePathname } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import Cookies from "js-cookie"; // Mantido apenas para a limpeza de segurança no logout
|
||||
import { api } from '@/services/api.mjs';
|
||||
import { api } from "@/services/api.mjs";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||||
import { Search, Bell, Calendar, User, LogOut, ChevronLeft, ChevronRight, Home } from "lucide-react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
Search,
|
||||
Bell,
|
||||
Calendar,
|
||||
User,
|
||||
LogOut,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Home,
|
||||
} from "lucide-react";
|
||||
|
||||
interface ManagerData {
|
||||
id: string;
|
||||
@ -99,17 +115,24 @@ export default function ManagerLayout({ children }: ManagerLayoutProps) {
|
||||
{ href: "#", icon: Calendar, label: "Relatórios gerenciais" },
|
||||
{ href: "/manager/usuario", icon: User, label: "Gestão de Usuários" },
|
||||
{ href: "/manager/home", icon: User, label: "Gestão de Médicos" },
|
||||
{ href: "/manager/pacientes", icon: User, label: "Gestão de Pacientes" },
|
||||
{ href: "#", icon: Calendar, label: "Configurações" },
|
||||
];
|
||||
|
||||
if (!managerData) {
|
||||
return <div className="flex h-screen w-full items-center justify-center">Carregando...</div>;
|
||||
return (
|
||||
<div className="flex h-screen w-full items-center justify-center">
|
||||
Carregando...
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex">
|
||||
<div
|
||||
className={`bg-white border-r border-gray-200 transition-all duration-300 fixed top-0 h-screen flex flex-col z-30 ${sidebarCollapsed ? "w-16" : "w-64"}`}
|
||||
className={`bg-white border-r border-gray-200 transition-all duration-300 fixed top-0 h-screen flex flex-col z-30 ${
|
||||
sidebarCollapsed ? "w-16" : "w-64"
|
||||
}`}
|
||||
>
|
||||
<div className="p-4 border-b border-gray-200 flex items-center justify-between">
|
||||
{!sidebarCollapsed && (
|
||||
@ -117,9 +140,7 @@ export default function ManagerLayout({ children }: ManagerLayoutProps) {
|
||||
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
|
||||
<div className="w-4 h-4 bg-white rounded-sm"></div>
|
||||
</div>
|
||||
<span className="font-semibold text-gray-900">
|
||||
MediConnect
|
||||
</span>
|
||||
<span className="font-semibold text-gray-900">MediConnect</span>
|
||||
</div>
|
||||
)}
|
||||
<Button
|
||||
@ -128,7 +149,11 @@ export default function ManagerLayout({ children }: ManagerLayoutProps) {
|
||||
onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
|
||||
className="p-1"
|
||||
>
|
||||
{sidebarCollapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronLeft className="w-4 h-4" />}
|
||||
{sidebarCollapsed ? (
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
) : (
|
||||
<ChevronLeft className="w-4 h-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@ -139,10 +164,16 @@ export default function ManagerLayout({ children }: ManagerLayoutProps) {
|
||||
return (
|
||||
<Link key={item.label} href={item.href}>
|
||||
<div
|
||||
className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600" : "text-gray-600 hover:bg-gray-50"}`}
|
||||
className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${
|
||||
isActive
|
||||
? "bg-blue-50 text-blue-600 border-r-2 border-blue-600"
|
||||
: "text-gray-600 hover:bg-gray-50"
|
||||
}`}
|
||||
>
|
||||
<Icon className="w-5 h-5 flex-shrink-0" />
|
||||
{!sidebarCollapsed && <span className="font-medium">{item.label}</span>}
|
||||
{!sidebarCollapsed && (
|
||||
<span className="font-medium">{item.label}</span>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
@ -153,19 +184,32 @@ export default function ManagerLayout({ children }: ManagerLayoutProps) {
|
||||
<div className="flex items-center space-x-3 mb-4">
|
||||
<Avatar>
|
||||
<AvatarImage src="/placeholder.svg?height=40&width=40" />
|
||||
<AvatarFallback>{managerData.name.split(" ").map((n) => n[0]).join("")}</AvatarFallback>
|
||||
<AvatarFallback>
|
||||
{managerData.name
|
||||
.split(" ")
|
||||
.map((n) => n[0])
|
||||
.join("")}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
{!sidebarCollapsed && (
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-gray-900 truncate">{managerData.name}</p>
|
||||
<p className="text-xs text-gray-500 truncate">{managerData.department}</p>
|
||||
<p className="text-sm font-medium text-gray-900 truncate">
|
||||
{managerData.name}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 truncate">
|
||||
{managerData.department}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className={sidebarCollapsed ? "w-full bg-transparent flex justify-center items-center p-2" : "w-full bg-transparent"}
|
||||
className={
|
||||
sidebarCollapsed
|
||||
? "w-full bg-transparent flex justify-center items-center p-2"
|
||||
: "w-full bg-transparent"
|
||||
}
|
||||
onClick={handleLogout}
|
||||
>
|
||||
<LogOut className={sidebarCollapsed ? "h-5 w-5" : "mr-2 h-4 w-4"} />
|
||||
@ -174,18 +218,19 @@ export default function ManagerLayout({ children }: ManagerLayoutProps) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={`flex-1 flex flex-col transition-all duration-300 w-full ${sidebarCollapsed ? "ml-16" : "ml-64"}`}>
|
||||
<div
|
||||
className={`flex-1 flex flex-col transition-all duration-300 w-full ${
|
||||
sidebarCollapsed ? "ml-16" : "ml-64"
|
||||
}`}
|
||||
>
|
||||
<header className="bg-white border-b border-gray-200 px-4 md:px-6 py-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-4 flex-1 max-w-md">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
<Input placeholder="Buscar paciente" className="pl-10 bg-gray-50 border-gray-200" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 flex-1 max-w-md"></div>
|
||||
<div className="flex items-center gap-4 ml-auto">
|
||||
<Button variant="ghost" size="sm" className="relative">
|
||||
<Bell className="w-5 h-5" />
|
||||
<Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-red-500 text-white text-xs">1</Badge>
|
||||
<Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-red-500 text-white text-xs">
|
||||
1
|
||||
</Badge>
|
||||
</Button>
|
||||
</div>
|
||||
</header>
|
||||
@ -196,11 +241,19 @@ export default function ManagerLayout({ children }: ManagerLayoutProps) {
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Confirmar Saída</DialogTitle>
|
||||
<DialogDescription>Deseja realmente sair do sistema? Você precisará fazer login novamente para acessar sua conta.</DialogDescription>
|
||||
<DialogDescription>
|
||||
Deseja realmente sair do sistema? Você precisará fazer login
|
||||
novamente para acessar sua conta.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter className="flex gap-2">
|
||||
<Button variant="outline" onClick={cancelLogout}>Cancelar</Button>
|
||||
<Button variant="destructive" onClick={confirmLogout}><LogOut className="mr-2 h-4 w-4" />Sair</Button>
|
||||
<Button variant="outline" onClick={cancelLogout}>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button variant="destructive" onClick={confirmLogout}>
|
||||
<LogOut className="mr-2 h-4 w-4" />
|
||||
Sair
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
@ -1,52 +1,70 @@
|
||||
"use client"
|
||||
"use client";
|
||||
|
||||
import Cookies from "js-cookie";
|
||||
import type React from "react"
|
||||
import { useState, useEffect } from "react"
|
||||
import Link from "next/link"
|
||||
import { useRouter, usePathname } from "next/navigation"
|
||||
import type React from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter, usePathname } from "next/navigation";
|
||||
import { api } from "@/services/api.mjs"; // Importando nosso cliente de API
|
||||
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
||||
import { Search, Bell, User, LogOut, FileText, Clock, Calendar, Home, ChevronLeft, ChevronRight } from "lucide-react"
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import {
|
||||
Search,
|
||||
Bell,
|
||||
User,
|
||||
LogOut,
|
||||
FileText,
|
||||
Clock,
|
||||
Calendar,
|
||||
Home,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
|
||||
interface PatientData {
|
||||
name: string
|
||||
email: string
|
||||
phone: string
|
||||
cpf: string
|
||||
birthDate: string
|
||||
address: string
|
||||
name: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
cpf: string;
|
||||
birthDate: string;
|
||||
address: string;
|
||||
}
|
||||
|
||||
interface PatientLayoutProps {
|
||||
children: React.ReactNode
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
// --- ALTERAÇÃO 1: Renomeando o componente para maior clareza ---
|
||||
export default function PatientLayout({ children }: PatientLayoutProps) {
|
||||
const [patientData, setPatientData] = useState<PatientData | null>(null)
|
||||
const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
|
||||
const [showLogoutDialog, setShowLogoutDialog] = useState(false)
|
||||
const router = useRouter()
|
||||
const pathname = usePathname()
|
||||
const [patientData, setPatientData] = useState<PatientData | null>(null);
|
||||
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
|
||||
const [showLogoutDialog, setShowLogoutDialog] = useState(false);
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
if (window.innerWidth < 1024) {
|
||||
setSidebarCollapsed(true)
|
||||
setSidebarCollapsed(true);
|
||||
} else {
|
||||
setSidebarCollapsed(false)
|
||||
setSidebarCollapsed(false);
|
||||
}
|
||||
}
|
||||
handleResize()
|
||||
window.addEventListener("resize", handleResize)
|
||||
return () => window.removeEventListener("resize", handleResize)
|
||||
}, [])
|
||||
};
|
||||
handleResize();
|
||||
window.addEventListener("resize", handleResize);
|
||||
return () => window.removeEventListener("resize", handleResize);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const userInfoString = localStorage.getItem("user_info");
|
||||
@ -70,7 +88,7 @@ export default function PatientLayout({ children }: PatientLayoutProps) {
|
||||
}
|
||||
}, [router]);
|
||||
|
||||
const handleLogout = () => setShowLogoutDialog(true)
|
||||
const handleLogout = () => setShowLogoutDialog(true);
|
||||
|
||||
// --- ALTERAÇÃO 4: Função de logout completa e padronizada ---
|
||||
const confirmLogout = async () => {
|
||||
@ -90,18 +108,26 @@ export default function PatientLayout({ children }: PatientLayoutProps) {
|
||||
}
|
||||
};
|
||||
|
||||
const cancelLogout = () => setShowLogoutDialog(false)
|
||||
const cancelLogout = () => setShowLogoutDialog(false);
|
||||
|
||||
const menuItems = [
|
||||
{ href: "/patient/dashboard", icon: Home, label: "Dashboard" },
|
||||
{ href: "/patient/appointments", icon: Calendar, label: "Minhas Consultas" },
|
||||
{
|
||||
href: "/patient/appointments",
|
||||
icon: Calendar,
|
||||
label: "Minhas Consultas",
|
||||
},
|
||||
{ href: "/patient/schedule", icon: Clock, label: "Agendar Consulta" },
|
||||
{ href: "/patient/reports", icon: FileText, label: "Meus Laudos" },
|
||||
{ href: "/patient/profile", icon: User, label: "Meus Dados" },
|
||||
]
|
||||
];
|
||||
|
||||
if (!patientData) {
|
||||
return <div className="flex h-screen w-full items-center justify-center">Carregando...</div>;
|
||||
return (
|
||||
<div className="flex h-screen w-full items-center justify-center">
|
||||
Carregando...
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
@ -120,7 +146,9 @@ export default function PatientLayout({ children }: PatientLayoutProps) {
|
||||
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
|
||||
<div className="w-4 h-4 bg-primary-foreground rounded-sm"></div>
|
||||
</div>
|
||||
<span className="font-semibold text-foreground">MediConnect</span>
|
||||
<span className="font-semibold text-foreground">
|
||||
MediConnect
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<Button
|
||||
@ -141,10 +169,10 @@ export default function PatientLayout({ children }: PatientLayoutProps) {
|
||||
{/* Menu */}
|
||||
<nav className="flex-1 p-2 overflow-y-auto">
|
||||
{menuItems.map((item) => {
|
||||
const Icon = item.icon
|
||||
const Icon = item.icon;
|
||||
const isActive =
|
||||
pathname === item.href ||
|
||||
(item.href !== "/" && pathname.startsWith(item.href))
|
||||
(item.href !== "/" && pathname.startsWith(item.href));
|
||||
|
||||
return (
|
||||
<Link key={item.href} href={item.href}>
|
||||
@ -161,7 +189,7 @@ export default function PatientLayout({ children }: PatientLayoutProps) {
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
@ -199,9 +227,7 @@ export default function PatientLayout({ children }: PatientLayoutProps) {
|
||||
}
|
||||
onClick={handleLogout}
|
||||
>
|
||||
<LogOut
|
||||
className={sidebarCollapsed ? "h-5 w-5" : "mr-2 h-4 w-4"}
|
||||
/>{" "}
|
||||
<LogOut className={sidebarCollapsed ? "h-5 w-5" : "mr-2 h-4 w-4"} />{" "}
|
||||
{/* Remove margem quando colapsado */}
|
||||
{!sidebarCollapsed && "Sair"}{" "}
|
||||
{/* Mostra o texto apenas quando não está colapsado */}
|
||||
@ -218,15 +244,7 @@ export default function PatientLayout({ children }: PatientLayoutProps) {
|
||||
{/* Header */}
|
||||
<header className="bg-card border-b border-border px-6 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4 flex-1 max-w-md">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
|
||||
<Input
|
||||
placeholder="Buscar paciente"
|
||||
className="pl-10 bg-background border-input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 flex-1 max-w-md"></div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<Button variant="ghost" size="sm" className="relative">
|
||||
@ -265,5 +283,5 @@ export default function PatientLayout({ children }: PatientLayoutProps) {
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
@ -1,41 +1,60 @@
|
||||
// Caminho: app/(secretary)/layout.tsx (ou o caminho do seu arquivo)
|
||||
"use client"
|
||||
"use client";
|
||||
|
||||
import type React from "react"
|
||||
import { useState, useEffect } from "react"
|
||||
import { useRouter, usePathname } from "next/navigation"
|
||||
import Link from "next/link"
|
||||
import type React from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useRouter, usePathname } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import Cookies from "js-cookie";
|
||||
import { api } from '@/services/api.mjs'; // Importando nosso cliente de API central
|
||||
import { api } from "@/services/api.mjs"; // Importando nosso cliente de API central
|
||||
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||||
import { Search, Bell, Calendar, Clock, User, LogOut, Home, ChevronLeft, ChevronRight } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
Search,
|
||||
Bell,
|
||||
Calendar,
|
||||
Clock,
|
||||
User,
|
||||
LogOut,
|
||||
Home,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
} from "lucide-react";
|
||||
|
||||
interface SecretaryData {
|
||||
id: string
|
||||
name: string
|
||||
email: string
|
||||
phone: string
|
||||
cpf: string
|
||||
employeeId: string
|
||||
department: string
|
||||
permissions: object
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
cpf: string;
|
||||
employeeId: string;
|
||||
department: string;
|
||||
permissions: object;
|
||||
}
|
||||
|
||||
interface SecretaryLayoutProps {
|
||||
children: React.ReactNode
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export default function SecretaryLayout({ children }: SecretaryLayoutProps) {
|
||||
const [secretaryData, setSecretaryData] = useState<SecretaryData | null>(null);
|
||||
const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
|
||||
const [showLogoutDialog, setShowLogoutDialog] = useState(false)
|
||||
const router = useRouter()
|
||||
const pathname = usePathname()
|
||||
const [secretaryData, setSecretaryData] = useState<SecretaryData | null>(
|
||||
null
|
||||
);
|
||||
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
|
||||
const [showLogoutDialog, setShowLogoutDialog] = useState(false);
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
|
||||
useEffect(() => {
|
||||
const userInfoString = localStorage.getItem("user_info");
|
||||
@ -64,17 +83,17 @@ export default function SecretaryLayout({ children }: SecretaryLayoutProps) {
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
if (window.innerWidth < 1024) {
|
||||
setSidebarCollapsed(true)
|
||||
setSidebarCollapsed(true);
|
||||
} else {
|
||||
setSidebarCollapsed(false)
|
||||
setSidebarCollapsed(false);
|
||||
}
|
||||
}
|
||||
handleResize()
|
||||
window.addEventListener("resize", handleResize)
|
||||
return () => window.removeEventListener("resize", handleResize)
|
||||
}, [])
|
||||
};
|
||||
handleResize();
|
||||
window.addEventListener("resize", handleResize);
|
||||
return () => window.removeEventListener("resize", handleResize);
|
||||
}, []);
|
||||
|
||||
const handleLogout = () => setShowLogoutDialog(true)
|
||||
const handleLogout = () => setShowLogoutDialog(true);
|
||||
|
||||
// --- ALTERAÇÃO 3: Função de logout completa e padronizada ---
|
||||
const confirmLogout = async () => {
|
||||
@ -94,20 +113,23 @@ export default function SecretaryLayout({ children }: SecretaryLayoutProps) {
|
||||
}
|
||||
};
|
||||
|
||||
const cancelLogout = () => setShowLogoutDialog(false)
|
||||
const cancelLogout = () => setShowLogoutDialog(false);
|
||||
|
||||
const menuItems = [
|
||||
{ href: "/secretary/dashboard", icon: Home, label: "Dashboard" },
|
||||
{ href: "/secretary/appointments", icon: Calendar, label: "Consultas" },
|
||||
{ href: "/secretary/schedule", icon: Clock, label: "Agendar Consulta" },
|
||||
{ href: "/secretary/pacientes", icon: User, label: "Pacientes" },
|
||||
]
|
||||
];
|
||||
|
||||
if (!secretaryData) {
|
||||
return <div className="flex h-screen w-full items-center justify-center">Carregando...</div>;
|
||||
return (
|
||||
<div className="flex h-screen w-full items-center justify-center">
|
||||
Carregando...
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background flex">
|
||||
{/* Sidebar */}
|
||||
@ -123,7 +145,9 @@ export default function SecretaryLayout({ children }: SecretaryLayoutProps) {
|
||||
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
|
||||
<div className="w-4 h-4 bg-primary-foreground rounded-sm"></div>
|
||||
</div>
|
||||
<span className="font-semibold text-foreground">MediConnect</span>
|
||||
<span className="font-semibold text-foreground">
|
||||
MediConnect
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<Button
|
||||
@ -143,23 +167,27 @@ export default function SecretaryLayout({ children }: SecretaryLayoutProps) {
|
||||
|
||||
<nav className="flex-1 p-2 overflow-y-auto">
|
||||
{menuItems.map((item) => {
|
||||
const Icon = item.icon
|
||||
const Icon = item.icon;
|
||||
const isActive =
|
||||
pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href))
|
||||
pathname === item.href ||
|
||||
(item.href !== "/" && pathname.startsWith(item.href));
|
||||
|
||||
return (
|
||||
<Link key={item.href} href={item.href}>
|
||||
<div
|
||||
className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive
|
||||
className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${
|
||||
isActive
|
||||
? "bg-accent text-accent-foreground"
|
||||
: "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
|
||||
}`}
|
||||
>
|
||||
<Icon className="w-5 h-5 flex-shrink-0" />
|
||||
{!sidebarCollapsed && <span className="font-medium">{item.label}</span>}
|
||||
{!sidebarCollapsed && (
|
||||
<span className="font-medium">{item.label}</span>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
@ -179,7 +207,9 @@ export default function SecretaryLayout({ children }: SecretaryLayoutProps) {
|
||||
<p className="text-sm font-medium text-foreground truncate">
|
||||
{secretaryData.name}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground truncate">{secretaryData.email}</p>
|
||||
<p className="text-xs text-muted-foreground truncate">
|
||||
{secretaryData.email}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@ -193,9 +223,7 @@ export default function SecretaryLayout({ children }: SecretaryLayoutProps) {
|
||||
}
|
||||
onClick={handleLogout}
|
||||
>
|
||||
<LogOut
|
||||
className={sidebarCollapsed ? "h-5 w-5" : "mr-2 h-4 w-4"}
|
||||
/>
|
||||
<LogOut className={sidebarCollapsed ? "h-5 w-5" : "mr-2 h-4 w-4"} />
|
||||
{!sidebarCollapsed && "Sair"}
|
||||
</Button>
|
||||
</div>
|
||||
@ -203,20 +231,13 @@ export default function SecretaryLayout({ children }: SecretaryLayoutProps) {
|
||||
|
||||
{/* Main Content */}
|
||||
<div
|
||||
className={`flex-1 flex flex-col transition-all duration-300 ${sidebarCollapsed ? "ml-16" : "ml-64"
|
||||
className={`flex-1 flex flex-col transition-all duration-300 ${
|
||||
sidebarCollapsed ? "ml-16" : "ml-64"
|
||||
}`}
|
||||
>
|
||||
<header className="bg-card border-b border-border px-6 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4 flex-1 max-w-md">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
|
||||
<Input
|
||||
placeholder="Buscar paciente"
|
||||
className="pl-10 bg-background border-border"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 flex-1 max-w-md"></div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<Button variant="ghost" size="sm" className="relative">
|
||||
@ -238,7 +259,8 @@ export default function SecretaryLayout({ children }: SecretaryLayoutProps) {
|
||||
<DialogHeader>
|
||||
<DialogTitle>Confirmar Saída</DialogTitle>
|
||||
<DialogDescription>
|
||||
Deseja realmente sair do sistema? Você precisará fazer login novamente para acessar sua conta.
|
||||
Deseja realmente sair do sistema? Você precisará fazer login
|
||||
novamente para acessar sua conta.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter className="flex gap-2">
|
||||
@ -253,5 +275,5 @@ export default function SecretaryLayout({ children }: SecretaryLayoutProps) {
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
130
components/ui/availability-edit-modal.tsx
Normal file
130
components/ui/availability-edit-modal.tsx
Normal file
@ -0,0 +1,130 @@
|
||||
'use client'
|
||||
|
||||
import {
|
||||
Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { useEffect, useState } from "react";
|
||||
import { start } from "repl";
|
||||
import { appointmentsService } from "@/services/appointmentsApi.mjs";
|
||||
|
||||
type Availability = {
|
||||
id: string;
|
||||
doctor_id: string;
|
||||
weekday: string;
|
||||
start_time: string;
|
||||
end_time: string;
|
||||
slot_minutes: number;
|
||||
appointment_type: string;
|
||||
active: boolean;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
created_by: string;
|
||||
updated_by: string | null;
|
||||
};
|
||||
|
||||
interface AvailabilityEditModalProps {
|
||||
isOpen: boolean;
|
||||
availability: Availability | null;
|
||||
onClose: () => void;
|
||||
onSubmit: (formData: any) => void;
|
||||
}
|
||||
|
||||
export function AvailabilityEditModal({ availability, isOpen, onClose, onSubmit }: AvailabilityEditModalProps) {
|
||||
const [modalidadeConsulta, setModalidadeConsulta] = useState<string>("");
|
||||
const [form, setForm] = useState({ start_time: "", end_time: "", slot_minutes: "", appointment_type: "", id:availability?.id});
|
||||
// Mapa de tradução
|
||||
const weekdaysPT: Record<string, string> = {
|
||||
sunday: "Domingo",
|
||||
monday: "Segunda-Feira",
|
||||
tuesday: "Terça-Feira",
|
||||
wednesday: "Quarta-Feira",
|
||||
thursday: "Quinta-Feira",
|
||||
friday: "Sexta-Feira",
|
||||
saturday: "Sábado",
|
||||
};
|
||||
|
||||
const handleInputChange = (field: string, value: string) => {
|
||||
setForm((prev) => ({ ...prev, [field]: value }));
|
||||
};
|
||||
|
||||
const handleFormSubmit = () => {
|
||||
onSubmit(form);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (availability) {
|
||||
setModalidadeConsulta(availability.appointment_type);
|
||||
setForm({
|
||||
start_time: availability.start_time,
|
||||
end_time: availability.end_time,
|
||||
slot_minutes: availability.slot_minutes.toString(),
|
||||
appointment_type: availability.appointment_type,
|
||||
id: availability.id
|
||||
});
|
||||
}
|
||||
}, [availability])
|
||||
|
||||
if (!availability) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={onClose}>
|
||||
<DialogContent className="sm:max-w-[600px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Edite a disponibilidade</DialogTitle>
|
||||
<DialogDescription>Altere a disponibilidade atual.</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form onSubmit={(e) => { e.preventDefault(); handleFormSubmit(); }}>
|
||||
<div className="grid gap-4 py-1" >
|
||||
<h3 className="font-semibold mb-2">{weekdaysPT[availability.weekday]}</h3>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="start_time" className="font-semibold">Horário de entrada *</Label>
|
||||
<Input id="start_time" type="time" value={form.start_time} onChange={(e) => handleInputChange("start_time", e.target.value)}/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="end_time" className="font-semibold">Horário de saída *</Label>
|
||||
<Input id="end_time" type="time" value={form.end_time} onChange={(e) => handleInputChange("end_time", e.target.value)}/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label htmlFor="duracaoConsulta" className="text-sm font-medium text-gray-700">
|
||||
Duração Da Consulta (min)
|
||||
</Label>
|
||||
<Input type="number" id="duracaoConsulta" value={form.slot_minutes} onChange={(e) => handleInputChange("slot_minutes", e.target.value)} name="duracaoConsulta" required className="mt-1" />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="modalidadeConsulta" className="text-sm font-medium text-gray-700">
|
||||
Modalidade De Consulta
|
||||
</Label>
|
||||
<Select value={form.appointment_type} onValueChange={(value) => {setModalidadeConsulta(value); handleInputChange("appointment_type", value);}}>
|
||||
<SelectTrigger className="mt-1">
|
||||
<SelectValue placeholder="Selecione" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="presencial">Presencial </SelectItem>
|
||||
<SelectItem value="telemedicina">Telemedicina</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-5 gap-4">
|
||||
<Button type="submit" className="col-start-5 bg-green-600 hover:bg-green-700">Confirmar</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<DialogFooter>
|
||||
<DialogClose asChild>
|
||||
<Button type="button" variant="outline" className="px-4 py-2 bg-gray-200 rounded-md">Fechar</Button>
|
||||
</DialogClose>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user