102 lines
3.6 KiB
TypeScript
102 lines
3.6 KiB
TypeScript
import { useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { useAuth } from "../hooks/useAuth";
|
|
import {
|
|
Users,
|
|
UserCog,
|
|
Calendar,
|
|
CalendarClock,
|
|
FileText,
|
|
LogOut,
|
|
} from "lucide-react";
|
|
import { SecretaryPatientList } from "../components/secretaria/SecretaryPatientList";
|
|
import { SecretaryDoctorList } from "../components/secretaria/SecretaryDoctorList";
|
|
import { SecretaryAppointmentList } from "../components/secretaria/SecretaryAppointmentList";
|
|
import { SecretaryDoctorSchedule } from "../components/secretaria/SecretaryDoctorSchedule";
|
|
import { SecretaryReportList } from "../components/secretaria/SecretaryReportList";
|
|
|
|
type TabId = "pacientes" | "medicos" | "consultas" | "agenda" | "relatorios";
|
|
|
|
export default function PainelSecretaria() {
|
|
const navigate = useNavigate();
|
|
const { user, logout } = useAuth();
|
|
const [activeTab, setActiveTab] = useState<TabId>("pacientes");
|
|
|
|
const handleLogout = () => {
|
|
logout();
|
|
navigate("/login-secretaria");
|
|
};
|
|
|
|
const tabs: { id: TabId; label: string; icon: typeof Users }[] = [
|
|
{ id: "pacientes", label: "Pacientes", icon: Users },
|
|
{ id: "medicos", label: "Médicos", icon: UserCog },
|
|
{ id: "consultas", label: "Consultas", icon: Calendar },
|
|
{ id: "agenda", label: "Agenda Médica", icon: CalendarClock },
|
|
{ id: "relatorios", label: "Relatórios", icon: FileText },
|
|
];
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50">
|
|
{/* Header */}
|
|
<header className="bg-white border-b border-gray-200 sticky top-0 z-10">
|
|
<div className="max-w-[1400px] mx-auto px-6 py-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900">
|
|
Painel da Secretaria
|
|
</h1>
|
|
{user && (
|
|
<p className="text-sm text-gray-600 mt-1">
|
|
Bem-vinda, {user.email}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<button
|
|
onClick={handleLogout}
|
|
className="flex items-center gap-2 px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors"
|
|
>
|
|
<LogOut className="h-4 w-4" />
|
|
Sair
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Tabs Navigation */}
|
|
<div className="bg-white border-b border-gray-200">
|
|
<div className="max-w-[1400px] mx-auto px-6">
|
|
<nav className="flex gap-2">
|
|
{tabs.map((tab) => {
|
|
const Icon = tab.icon;
|
|
const isActive = activeTab === tab.id;
|
|
return (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => setActiveTab(tab.id)}
|
|
className={`flex items-center gap-2 px-4 py-3 border-b-2 transition-colors ${
|
|
isActive
|
|
? "border-green-600 text-green-600 font-medium"
|
|
: "border-transparent text-gray-600 hover:text-gray-900 hover:border-gray-300"
|
|
}`}
|
|
>
|
|
<Icon className="h-4 w-4" />
|
|
{tab.label}
|
|
</button>
|
|
);
|
|
})}
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Main Content */}
|
|
<main className="max-w-[1400px] mx-auto px-6 py-8">
|
|
{activeTab === "pacientes" && <SecretaryPatientList />}
|
|
{activeTab === "medicos" && <SecretaryDoctorList />}
|
|
{activeTab === "consultas" && <SecretaryAppointmentList />}
|
|
{activeTab === "agenda" && <SecretaryDoctorSchedule />}
|
|
{activeTab === "relatorios" && <SecretaryReportList />}
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|