370 lines
15 KiB
TypeScript
370 lines
15 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import {
|
|
countTotalPatients,
|
|
countTotalDoctors,
|
|
countAppointmentsToday,
|
|
getUpcomingAppointments,
|
|
getAppointmentsByDateRange,
|
|
getNewUsersLastDays,
|
|
getDisabledUsers,
|
|
getDoctorsAvailabilityToday,
|
|
getPatientById,
|
|
getDoctorById,
|
|
} from '@/lib/api';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Alert, AlertDescription } from '@/components/ui/alert';
|
|
import { AlertCircle, Calendar, Users, Stethoscope, Clock, AlertTriangle, Plus, ArrowLeft } from 'lucide-react';
|
|
import Link from 'next/link';
|
|
import { PatientRegistrationForm } from '@/components/features/forms/patient-registration-form';
|
|
import { DoctorRegistrationForm } from '@/components/features/forms/doctor-registration-form';
|
|
|
|
interface DashboardStats {
|
|
totalPatients: number;
|
|
totalDoctors: number;
|
|
appointmentsToday: number;
|
|
}
|
|
|
|
interface UpcomingAppointment {
|
|
id: string;
|
|
scheduled_at: string;
|
|
status: string;
|
|
doctor_id: string;
|
|
patient_id: string;
|
|
doctor?: { full_name?: string };
|
|
patient?: { full_name?: string };
|
|
}
|
|
|
|
export default function DashboardPage() {
|
|
const router = useRouter();
|
|
const [stats, setStats] = useState<DashboardStats>({
|
|
totalPatients: 0,
|
|
totalDoctors: 0,
|
|
appointmentsToday: 0,
|
|
});
|
|
const [appointments, setAppointments] = useState<UpcomingAppointment[]>([]);
|
|
const [appointmentData, setAppointmentData] = useState<any[]>([]);
|
|
const [newUsers, setNewUsers] = useState<any[]>([]);
|
|
const [disabledUsers, setDisabledUsers] = useState<any[]>([]);
|
|
const [doctors, setDoctors] = useState<Map<string, any>>(new Map());
|
|
const [patients, setPatients] = useState<Map<string, any>>(new Map());
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
// Estados para os modais de formulário
|
|
const [showPatientForm, setShowPatientForm] = useState(false);
|
|
const [showDoctorForm, setShowDoctorForm] = useState(false);
|
|
const [editingPatientId, setEditingPatientId] = useState<string | null>(null);
|
|
const [editingDoctorId, setEditingDoctorId] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
loadDashboardData();
|
|
}, []);
|
|
|
|
const loadDashboardData = async () => {
|
|
try {
|
|
setLoading(true);
|
|
|
|
// 1. Carrega stats
|
|
const [patientCount, doctorCount, todayCount] = await Promise.all([
|
|
countTotalPatients(),
|
|
countTotalDoctors(),
|
|
countAppointmentsToday(),
|
|
]);
|
|
|
|
setStats({
|
|
totalPatients: patientCount,
|
|
totalDoctors: doctorCount,
|
|
appointmentsToday: todayCount,
|
|
});
|
|
|
|
// 2. Carrega dados dos widgets em paralelo
|
|
const [upcomingAppts, appointmentDataRange, newUsersList, disabledUsersList] = await Promise.all([
|
|
getUpcomingAppointments(5),
|
|
getAppointmentsByDateRange(7),
|
|
getNewUsersLastDays(7),
|
|
getDisabledUsers(5),
|
|
]);
|
|
|
|
setAppointments(upcomingAppts);
|
|
setAppointmentData(appointmentDataRange);
|
|
setNewUsers(newUsersList);
|
|
setDisabledUsers(disabledUsersList);
|
|
|
|
// 3. Busca detalhes de pacientes e médicos para as próximas consultas
|
|
const doctorMap = new Map();
|
|
const patientMap = new Map();
|
|
|
|
for (const appt of upcomingAppts) {
|
|
if (appt.doctor_id && !doctorMap.has(appt.doctor_id)) {
|
|
const doctor = await getDoctorById(appt.doctor_id);
|
|
if (doctor) doctorMap.set(appt.doctor_id, doctor);
|
|
}
|
|
if (appt.patient_id && !patientMap.has(appt.patient_id)) {
|
|
const patient = await getPatientById(appt.patient_id);
|
|
if (patient) patientMap.set(appt.patient_id, patient);
|
|
}
|
|
}
|
|
|
|
setDoctors(doctorMap);
|
|
setPatients(patientMap);
|
|
} catch (err) {
|
|
console.error('[Dashboard] Erro ao carregar dados:', err);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handlePatientFormSaved = () => {
|
|
setShowPatientForm(false);
|
|
setEditingPatientId(null);
|
|
loadDashboardData();
|
|
};
|
|
|
|
const handleDoctorFormSaved = () => {
|
|
setShowDoctorForm(false);
|
|
setEditingDoctorId(null);
|
|
loadDashboardData();
|
|
};
|
|
|
|
const formatDate = (dateStr: string) => {
|
|
return new Date(dateStr).toLocaleDateString('pt-BR', {
|
|
day: '2-digit',
|
|
month: '2-digit',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
});
|
|
};
|
|
|
|
const getStatusBadge = (status: string) => {
|
|
const statusMap: Record<string, { variant: any; label: string }> = {
|
|
confirmed: { variant: 'default', label: 'Confirmado' },
|
|
completed: { variant: 'secondary', label: 'Concluído' },
|
|
cancelled: { variant: 'destructive', label: 'Cancelado' },
|
|
requested: { variant: 'outline', label: 'Solicitado' },
|
|
};
|
|
const s = statusMap[status] || { variant: 'outline', label: status };
|
|
return <Badge variant={s.variant as any}>{s.label}</Badge>;
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="space-y-4 sm:space-y-6 p-3 sm:p-4 md:p-6 bg-background">
|
|
<div className="animate-pulse space-y-4">
|
|
<div className="h-6 sm:h-8 bg-muted rounded w-1/4"></div>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 md:gap-6">
|
|
{[1, 2, 3, 4].map(i => (
|
|
<div key={i} className="h-24 sm:h-32 bg-muted rounded"></div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Se está exibindo formulário de paciente
|
|
if (showPatientForm) {
|
|
return (
|
|
<div className="space-y-4 sm:space-y-6 p-3 sm:p-4 md:p-6 bg-background min-h-screen">
|
|
<div className="flex items-center gap-2 sm:gap-4">
|
|
<Button variant="ghost" size="icon" onClick={() => {
|
|
setShowPatientForm(false);
|
|
setEditingPatientId(null);
|
|
}} className="h-8 w-8 sm:h-10 sm:w-10">
|
|
<ArrowLeft className="h-4 w-4 sm:h-5 sm:w-5" />
|
|
</Button>
|
|
<h1 className="text-xl sm:text-2xl font-bold">{editingPatientId ? "Editar paciente" : "Novo paciente"}</h1>
|
|
</div>
|
|
|
|
<PatientRegistrationForm
|
|
inline
|
|
mode={editingPatientId ? "edit" : "create"}
|
|
patientId={editingPatientId}
|
|
onSaved={handlePatientFormSaved}
|
|
onClose={() => {
|
|
setShowPatientForm(false);
|
|
setEditingPatientId(null);
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Se está exibindo formulário de médico
|
|
if (showDoctorForm) {
|
|
return (
|
|
<div className="space-y-4 sm:space-y-6 p-3 sm:p-4 md:p-6 bg-background min-h-screen">
|
|
<div className="flex items-center gap-2 sm:gap-4">
|
|
<Button variant="ghost" size="icon" onClick={() => {
|
|
setShowDoctorForm(false);
|
|
setEditingDoctorId(null);
|
|
}} className="h-8 w-8 sm:h-10 sm:w-10">
|
|
<ArrowLeft className="h-4 w-4 sm:h-5 sm:w-5" />
|
|
</Button>
|
|
<h1 className="text-xl sm:text-2xl font-bold">{editingDoctorId ? "Editar Médico" : "Novo Médico"}</h1>
|
|
</div>
|
|
|
|
<DoctorRegistrationForm
|
|
inline
|
|
mode={editingDoctorId ? "edit" : "create"}
|
|
doctorId={editingDoctorId}
|
|
onSaved={handleDoctorFormSaved}
|
|
onClose={() => {
|
|
setShowDoctorForm(false);
|
|
setEditingDoctorId(null);
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4 sm:space-y-6 p-3 sm:p-4 md:p-6 bg-background min-h-screen">
|
|
{/* Header - Responsivo */}
|
|
<div>
|
|
<h1 className="text-2xl sm:text-3xl font-bold text-foreground">Dashboard</h1>
|
|
<p className="text-xs sm:text-sm text-muted-foreground mt-1 sm:mt-2">Bem-vindo ao painel de controle</p>
|
|
</div>
|
|
|
|
{/* 1. CARDS RESUMO - Responsivo com 1/2/4 colunas */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 md:gap-6">
|
|
<div className="bg-card p-4 sm:p-5 md:p-6 rounded-lg border border-border hover:shadow-md transition">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div className="min-w-0 flex-1">
|
|
<h3 className="text-xs sm:text-sm font-medium text-muted-foreground truncate">Total de Pacientes</h3>
|
|
<p className="text-2xl sm:text-3xl font-bold text-foreground mt-1 sm:mt-2">{stats.totalPatients}</p>
|
|
</div>
|
|
<Users className="h-6 sm:h-8 w-6 sm:w-8 text-blue-500 opacity-20 flex-shrink-0" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-card p-4 sm:p-5 md:p-6 rounded-lg border border-border hover:shadow-md transition">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div className="min-w-0 flex-1">
|
|
<h3 className="text-xs sm:text-sm font-medium text-muted-foreground truncate">Total de Médicos</h3>
|
|
<p className="text-2xl sm:text-3xl font-bold text-foreground mt-1 sm:mt-2">{stats.totalDoctors}</p>
|
|
</div>
|
|
<Stethoscope className="h-6 sm:h-8 w-6 sm:w-8 text-green-500 opacity-20 flex-shrink-0" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-card p-4 sm:p-5 md:p-6 rounded-lg border border-border hover:shadow-md transition">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div className="min-w-0 flex-1">
|
|
<h3 className="text-xs sm:text-sm font-medium text-muted-foreground truncate">Consultas Hoje</h3>
|
|
<p className="text-2xl sm:text-3xl font-bold text-foreground mt-1 sm:mt-2">{stats.appointmentsToday}</p>
|
|
</div>
|
|
<Calendar className="h-6 sm:h-8 w-6 sm:w-8 text-purple-500 opacity-20 flex-shrink-0" />
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
{/* 6. AÇÕES RÁPIDAS - Responsivo: stack em mobile, wrap em desktop */}
|
|
<div className="bg-card p-4 sm:p-5 md:p-6 rounded-lg border border-border">
|
|
<h2 className="text-base sm:text-lg font-semibold text-foreground mb-3 sm:mb-4">Ações Rápidas</h2>
|
|
<div className="flex flex-col sm:flex-row flex-wrap gap-2 sm:gap-3">
|
|
<Button onClick={() => setShowPatientForm(true)} className="gap-2 text-sm sm:text-base w-full sm:w-auto">
|
|
<Plus className="h-4 w-4" />
|
|
<span className="hidden sm:inline">Novo Paciente</span>
|
|
<span className="sm:hidden">Paciente</span>
|
|
</Button>
|
|
<Button onClick={() => router.push('/agenda')} variant="outline" className="gap-2 text-sm sm:text-base w-full sm:w-auto hover:bg-primary! hover:text-white! transition-colors">
|
|
<Calendar className="h-4 w-4" />
|
|
<span className="hidden sm:inline">Novo Agendamento</span>
|
|
<span className="sm:hidden">Agendamento</span>
|
|
</Button>
|
|
<Button onClick={() => setShowDoctorForm(true)} variant="outline" className="gap-2 text-sm sm:text-base w-full sm:w-auto hover:bg-primary! hover:text-white! transition-colors">
|
|
<Stethoscope className="h-4 w-4" />
|
|
<span className="hidden sm:inline">Novo Médico</span>
|
|
<span className="sm:hidden">Médico</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 2. PRÓXIMAS CONSULTAS */}
|
|
<div className="grid grid-cols-1 gap-4 md:gap-6">
|
|
<div className="bg-card p-4 sm:p-5 md:p-6 rounded-lg border border-border">
|
|
<h2 className="text-base sm:text-lg font-semibold text-foreground mb-3 sm:mb-4">Próximas Consultas (7 dias)</h2>
|
|
{appointments.length > 0 ? (
|
|
<div className="space-y-2 sm:space-y-3">
|
|
{appointments.map(appt => (
|
|
<div key={appt.id} className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 p-3 sm:p-4 bg-muted rounded-lg hover:bg-muted/80 transition">
|
|
<div className="flex-1 min-w-0">
|
|
<p className="font-medium text-foreground text-sm sm:text-base truncate">
|
|
{patients.get(appt.patient_id)?.full_name || 'Paciente desconhecido'}
|
|
</p>
|
|
<p className="text-xs sm:text-sm text-muted-foreground truncate">
|
|
Médico: {doctors.get(appt.doctor_id)?.full_name || 'Médico desconhecido'}
|
|
</p>
|
|
<p className="text-[11px] sm:text-xs text-muted-foreground mt-1">{formatDate(appt.scheduled_at)}</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
{getStatusBadge(appt.status)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="text-xs sm:text-sm text-muted-foreground">Nenhuma consulta agendada para os próximos 7 dias</p>
|
|
)}
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
{/* 4. NOVOS USUÁRIOS */}
|
|
<div className="bg-card p-4 sm:p-5 md:p-6 rounded-lg border border-border">
|
|
<h2 className="text-base sm:text-lg font-semibold text-foreground mb-3 sm:mb-4">Novos Usuários (últimos 7 dias)</h2>
|
|
{newUsers.length > 0 ? (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 sm:gap-3">
|
|
{newUsers.map(user => (
|
|
<div key={user.id} className="p-2 sm:p-3 bg-muted rounded-lg">
|
|
<p className="font-medium text-foreground text-xs sm:text-sm truncate">{user.full_name || 'Sem nome'}</p>
|
|
<p className="text-[10px] sm:text-xs text-muted-foreground truncate">{user.email}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="text-xs sm:text-sm text-muted-foreground">Nenhum novo usuário nos últimos 7 dias</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* 8. ALERTAS */}
|
|
{disabledUsers.length > 0 && (
|
|
<div className="bg-card p-4 sm:p-5 md:p-6 rounded-lg border border-destructive/50">
|
|
<h2 className="text-base sm:text-lg font-semibold text-destructive mb-3 sm:mb-4 flex items-center gap-2">
|
|
<AlertTriangle className="h-4 sm:h-5 w-4 sm:w-5" />
|
|
<span className="truncate">Usuários Desabilitados</span>
|
|
</h2>
|
|
<div className="space-y-2">
|
|
{disabledUsers.map(user => (
|
|
<Alert key={user.id} variant="destructive" className="text-xs sm:text-sm">
|
|
<AlertCircle className="h-3 sm:h-4 w-3 sm:w-4" />
|
|
<AlertDescription className="ml-2">
|
|
<strong className="truncate">{user.full_name}</strong> ({user.email}) está desabilitado
|
|
</AlertDescription>
|
|
</Alert>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 11. LINK PARA RELATÓRIOS */}
|
|
<div className="bg-linear-to-r from-blue-500/10 to-purple-500/10 p-4 sm:p-5 md:p-6 rounded-lg border border-blue-500/20">
|
|
<h2 className="text-base sm:text-lg font-semibold text-foreground mb-2">Seção de Relatórios</h2>
|
|
<p className="text-xs sm:text-sm text-muted-foreground mb-3 sm:mb-4">
|
|
Acesse a seção de relatórios médicos para gerenciar, visualizar e exportar documentos.
|
|
</p>
|
|
<Button asChild className="w-full sm:w-auto text-sm sm:text-base">
|
|
<Link href="/dashboard/relatorios">Ir para Relatórios</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|