StsDanilo/riseup-squad21
1
0
Fork 0
forked from RiseUP/riseup-squad21
Code Pull Requests Activity

dashboards

Browse Source
This commit is contained in:
pedrosiimoes 2025-10-08 22:40:23 -03:00
parent 6f81f1b594
commit 613b70654e
7 changed files with 436 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
app/doctor/dashboard/page.tsx Normal file
View File

@ -0,0 +1,91 @@
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, Plus } from "lucide-react"
import Link from "next/link"
export default function PatientDashboard() {
return (
<DoctorLayout>
<div className="space-y-6">
<div>
<h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
<p className="text-gray-600">Bem-vindo ao seu portal de consultas médicas</p>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Próxima Consulta</CardTitle>
<Calendar className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">02 out</div>
<p className="text-xs text-muted-foreground">Dr. Silva - 14:30</p>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Consultas Este Mês</CardTitle>
<Clock className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">4</div>
<p className="text-xs text-muted-foreground">4 agendadas</p>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Perfil</CardTitle>
<User className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">100%</div>
<p className="text-xs text-muted-foreground">Dados completos</p>
</CardContent>
</Card>
</div>
<div className="grid md:grid-cols-2 gap-6">
<Card>
<CardHeader>
<CardTitle>Ações Rápidas</CardTitle>
<CardDescription>Acesse rapidamente as principais funcionalidades</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<Link href="/doctor/medicos/consultas">
<Button className="w-full justify-start">
<Calendar className="mr-2 h-4 w-4" />
Ver Minhas Consultas
</Button>
</Link>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Próximas Consultas</CardTitle>
<CardDescription>Suas consultas agendadas</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">
<div className="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
<div>
<p className="font-medium">Dr. João Santos</p>
<p className="text-sm text-gray-600">Cardiologia</p>
</div>
<div className="text-right">
<p className="font-medium">02 out</p>
<p className="text-sm text-gray-600">14:30</p>
</div>
</div>
</div>
</CardContent>
</Card>
</div>
</div>
</DoctorLayout>
)
}

50
app/doctor/medicos/consultas/page.tsx
View File

@ -2,7 +2,7 @@
import type React from "react"; import type React from "react";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import DoctorLayout from "@/components/doctor-layout"; import DoctorLayout from "@/components/doctor-layout";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Clock, Calendar as CalendarIcon, MapPin, Phone, User, X, RefreshCw } from "lucide-react"; import { Clock, Calendar as CalendarIcon, MapPin, Phone, User, X, RefreshCw } from "lucide-react";
@ -19,7 +19,7 @@ const APPOINTMENTS_STORAGE_KEY = "clinic-appointments";
interface LocalStorageAppointment { interface LocalStorageAppointment {
id: number; id: number;
patientName: string; patientName: string;
doctor: string; doctor: string;
specialty: string; specialty: string;
date: string; // Data no formato YYYY-MM-DD date: string; // Data no formato YYYY-MM-DD
time: string; // Hora no formato HH:MM time: string; // Hora no formato HH:MM
@ -28,13 +28,13 @@ interface LocalStorageAppointment {
phone: string; phone: string;
} }
const LOGGED_IN_DOCTOR_NAME = "Dr. João Santos"; const LOGGED_IN_DOCTOR_NAME = "Dr. João Santos";
// Função auxiliar para comparar se duas datas (Date objects) são o mesmo dia // Função auxiliar para comparar se duas datas (Date objects) são o mesmo dia
const isSameDay = (date1: Date, date2: Date) => { const isSameDay = (date1: Date, date2: Date) => {
return date1.getFullYear() === date2.getFullYear() && return date1.getFullYear() === date2.getFullYear() &&
date1.getMonth() === date2.getMonth() && date1.getMonth() === date2.getMonth() &&
date1.getDate() === date2.getDate(); date1.getDate() === date2.getDate();
}; };
// --- COMPONENTE PRINCIPAL --- // --- COMPONENTE PRINCIPAL ---
@ -43,10 +43,10 @@ export default function DoctorAppointmentsPage() {
const [allAppointments, setAllAppointments] = useState<LocalStorageAppointment[]>([]); const [allAppointments, setAllAppointments] = useState<LocalStorageAppointment[]>([]);
const [filteredAppointments, setFilteredAppointments] = useState<LocalStorageAppointment[]>([]); const [filteredAppointments, setFilteredAppointments] = useState<LocalStorageAppointment[]>([]);
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
// NOVO ESTADO 1: Armazena os dias com consultas (para o calendário) // NOVO ESTADO 1: Armazena os dias com consultas (para o calendário)
const [bookedDays, setBookedDays] = useState<Date[]>([]); const [bookedDays, setBookedDays] = useState<Date[]>([]);
// NOVO ESTADO 2: Armazena a data selecionada no calendário // NOVO ESTADO 2: Armazena a data selecionada no calendário
const [selectedCalendarDate, setSelectedCalendarDate] = useState<Date | undefined>(new Date()); const [selectedCalendarDate, setSelectedCalendarDate] = useState<Date | undefined>(new Date());
@ -58,20 +58,20 @@ export default function DoctorAppointmentsPage() {
useEffect(() => { useEffect(() => {
if (selectedCalendarDate) { if (selectedCalendarDate) {
const dateString = format(selectedCalendarDate, 'yyyy-MM-dd'); const dateString = format(selectedCalendarDate, 'yyyy-MM-dd');
// Filtra a lista completa de agendamentos pela data selecionada // Filtra a lista completa de agendamentos pela data selecionada
const todayAppointments = allAppointments const todayAppointments = allAppointments
.filter(app => app.date === dateString) .filter(app => app.date === dateString)
.sort((a, b) => a.time.localeCompare(b.time)); // Ordena por hora .sort((a, b) => a.time.localeCompare(b.time)); // Ordena por hora
setFilteredAppointments(todayAppointments); setFilteredAppointments(todayAppointments);
} else { } else {
// Se nenhuma data estiver selecionada (ou se for limpa), mostra todos (ou os de hoje) // Se nenhuma data estiver selecionada (ou se for limpa), mostra todos (ou os de hoje)
const todayDateString = format(new Date(), 'yyyy-MM-dd'); const todayDateString = format(new Date(), 'yyyy-MM-dd');
const todayAppointments = allAppointments const todayAppointments = allAppointments
.filter(app => app.date === todayDateString) .filter(app => app.date === todayDateString)
.sort((a, b) => a.time.localeCompare(b.time)); .sort((a, b) => a.time.localeCompare(b.time));
setFilteredAppointments(todayAppointments); setFilteredAppointments(todayAppointments);
} }
}, [allAppointments, selectedCalendarDate]); }, [allAppointments, selectedCalendarDate]);
@ -87,7 +87,7 @@ export default function DoctorAppointmentsPage() {
// 1. EXTRAI E PREPARA AS DATAS PARA O CALENDÁRIO // 1. EXTRAI E PREPARA AS DATAS PARA O CALENDÁRIO
const uniqueBookedDates = Array.from(new Set(appointmentsToShow.map(app => app.date))); const uniqueBookedDates = Array.from(new Set(appointmentsToShow.map(app => app.date)));
// Converte YYYY-MM-DD para objetos Date, garantindo que o tempo seja meia-noite (00:00:00) // Converte YYYY-MM-DD para objetos Date, garantindo que o tempo seja meia-noite (00:00:00)
const dateObjects = uniqueBookedDates.map(dateString => new Date(dateString + 'T00:00:00')); const dateObjects = uniqueBookedDates.map(dateString => new Date(dateString + 'T00:00:00'));
@ -122,12 +122,12 @@ export default function DoctorAppointmentsPage() {
const storedAppointmentsRaw = localStorage.getItem(APPOINTMENTS_STORAGE_KEY); const storedAppointmentsRaw = localStorage.getItem(APPOINTMENTS_STORAGE_KEY);
const allAppts: LocalStorageAppointment[] = storedAppointmentsRaw ? JSON.parse(storedAppointmentsRaw) : []; const allAppts: LocalStorageAppointment[] = storedAppointmentsRaw ? JSON.parse(storedAppointmentsRaw) : [];
const updatedAppointments = allAppts.map(app => const updatedAppointments = allAppts.map(app =>
app.id === id ? { ...app, status: "cancelada" as const } : app app.id === id ? { ...app, status: "cancelada" as const } : app
); );
localStorage.setItem(APPOINTMENTS_STORAGE_KEY, JSON.stringify(updatedAppointments)); localStorage.setItem(APPOINTMENTS_STORAGE_KEY, JSON.stringify(updatedAppointments));
loadAppointments(); loadAppointments();
toast.info(`Consulta cancelada com sucesso.`); toast.info(`Consulta cancelada com sucesso.`);
}; };
@ -135,8 +135,8 @@ export default function DoctorAppointmentsPage() {
toast.info(`Reagendamento da Consulta ID: ${id}. Navegar para a página de agendamento.`); toast.info(`Reagendamento da Consulta ID: ${id}. Navegar para a página de agendamento.`);
}; };
const displayDate = selectedCalendarDate ? const displayDate = selectedCalendarDate ?
new Date(selectedCalendarDate).toLocaleDateString("pt-BR", {weekday: 'long', day: '2-digit', month: 'long'}) : new Date(selectedCalendarDate).toLocaleDateString("pt-BR", { weekday: 'long', day: '2-digit', month: 'long' }) :
"Selecione uma data"; "Selecione uma data";
@ -158,7 +158,7 @@ export default function DoctorAppointmentsPage() {
{/* NOVO LAYOUT DE DUAS COLUNAS */} {/* NOVO LAYOUT DE DUAS COLUNAS */}
<div className="grid lg:grid-cols-3 gap-6"> <div className="grid lg:grid-cols-3 gap-6">
{/* COLUNA 1: CALENDÁRIO */} {/* COLUNA 1: CALENDÁRIO */}
<div className="lg:col-span-1"> <div className="lg:col-span-1">
<Card> <Card>
@ -176,10 +176,10 @@ export default function DoctorAppointmentsPage() {
onSelect={setSelectedCalendarDate} onSelect={setSelectedCalendarDate}
initialFocus initialFocus
// A CHAVE DO HIGHLIGHT: Passa o array de datas agendadas // A CHAVE DO HIGHLIGHT: Passa o array de datas agendadas
modifiers={{ booked: bookedDays }} modifiers={{ booked: bookedDays }}
// Define o estilo CSS para o modificador 'booked' // Define o estilo CSS para o modificador 'booked'
modifiersClassNames={{ modifiersClassNames={{
booked: "bg-blue-600 text-white aria-selected:!bg-blue-700 hover:!bg-blue-700/90" booked: "bg-blue-600 text-white aria-selected:!bg-blue-700 hover:!bg-blue-700/90"
}} }}
className="rounded-md border p-2" className="rounded-md border p-2"
/> />
@ -233,23 +233,23 @@ export default function DoctorAppointmentsPage() {
</div> </div>
<div className="flex items-center text-sm text-gray-700"> <div className="flex items-center text-sm text-gray-700">
<Phone className="mr-2 h-4 w-4 text-gray-500" /> <Phone className="mr-2 h-4 w-4 text-gray-500" />
{appointment.phone || "N/A"} {appointment.phone || "N/A"}
</div> </div>
</div> </div>
<div className="flex flex-col justify-center items-end"> <div className="flex flex-col justify-center items-end">
{showActions && ( {showActions && (
<div className="flex space-x-2"> <div className="flex space-x-2">
<Button <Button
variant="outline" variant="outline"
size="sm" size="sm"
onClick={() => handleReSchedule(appointment.id)} onClick={() => handleReSchedule(appointment.id)}
> >
<RefreshCw className="mr-2 h-4 w-4" /> <RefreshCw className="mr-2 h-4 w-4" />
Reagendar Reagendar
</Button> </Button>
<Button <Button
variant="destructive" variant="destructive"
size="sm" size="sm"
onClick={() => handleCancel(appointment.id)} onClick={() => handleCancel(appointment.id)}
> >

113
app/manager/dashboard/page.tsx Normal file
View File

@ -0,0 +1,113 @@
import ManagerLayout from "@/components/manager-layout"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Calendar, Clock, User, Plus } from "lucide-react"
import Link from "next/link"
export default function ManagerDashboard() {
return (
<ManagerLayout>
<div className="space-y-6">
<div>
<h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
<p className="text-gray-600">Bem-vindo ao seu portal de consultas médicas</p>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Relatórios gerenciais</CardTitle>
<Calendar className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">3</div>
<p className="text-xs text-muted-foreground">2 não lidos, 1 lido</p>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Gestão de usuários</CardTitle>
<Clock className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">João Marques</div>
<p className="text-xs text-muted-foreground">fez login a 13min</p>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Perfil</CardTitle>
<User className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">100%</div>
<p className="text-xs text-muted-foreground">Dados completos</p>
</CardContent>
</Card>
</div>
<div className="grid md:grid-cols-2 gap-6">
<Card>
<CardHeader>
<CardTitle>Ações Rápidas</CardTitle>
<CardDescription>Acesse rapidamente as principais funcionalidades</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<Link href="##">
<Button className="w-full justify-start">
<Plus className="mr-2 h-4 w-4" />
#
</Button>
</Link>
<Link href="##">
<Button variant="outline" className="w-full justify-start bg-transparent">
<Calendar className="mr-2 h-4 w-4" />
#
</Button>
</Link>
<Link href="##">
<Button variant="outline" className="w-full justify-start bg-transparent">
<User className="mr-2 h-4 w-4" />
#
</Button>
</Link>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Gestão de Médicos</CardTitle>
<CardDescription>Médicos online</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">
<div className="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
<div>
<p className="font-medium">Dr. Silva</p>
<p className="text-sm text-gray-600">Cardiologia</p>
</div>
<div className="text-right">
<p className="font-medium">On-line</p>
<p className="text-sm text-gray-600"></p>
</div>
</div>
<div className="flex items-center justify-between p-3 bg-green-50 rounded-lg">
<div>
<p className="font-medium">Dra. Santos</p>
<p className="text-sm text-gray-600">Dermatologia</p>
</div>
<div className="text-right">
<p className="font-medium">Off-line</p>
<p className="text-sm text-gray-600">Visto as 8:33</p>
</div>
</div>
</div>
</CardContent>
</Card>
</div>
</div>
</ManagerLayout>
)
}

113
app/secretary/dashboard/page.tsx Normal file
View File

@ -0,0 +1,113 @@
import SecretaryLayout from "@/components/secretary-layout"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Calendar, Clock, User, Plus } from "lucide-react"
import Link from "next/link"
export default function SecretaryDashboard() {
return (
<SecretaryLayout>
<div className="space-y-6">
<div>
<h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
<p className="text-gray-600">Bem-vindo ao seu portal de consultas médicas</p>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Próxima Consulta</CardTitle>
<Calendar className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">15 Jan</div>
<p className="text-xs text-muted-foreground">Dr. Silva - 14:30</p>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Consultas Este Mês</CardTitle>
<Clock className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">3</div>
<p className="text-xs text-muted-foreground">2 realizadas, 1 agendada</p>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Perfil</CardTitle>
<User className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">100%</div>
<p className="text-xs text-muted-foreground">Dados completos</p>
</CardContent>
</Card>
</div>
<div className="grid md:grid-cols-2 gap-6">
<Card>
<CardHeader>
<CardTitle>Ações Rápidas</CardTitle>
<CardDescription>Acesse rapidamente as principais funcionalidades</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<Link href="/secretary/schedule">
<Button className="w-full justify-start">
<Plus className="mr-2 h-4 w-4" />
Agendar Nova Consulta
</Button>
</Link>
<Link href="/secretary/appointments">
<Button variant="outline" className="w-full justify-start bg-transparent">
<Calendar className="mr-2 h-4 w-4" />
Ver Consultas
</Button>
</Link>
<Link href="##">
<Button variant="outline" className="w-full justify-start bg-transparent">
<User className="mr-2 h-4 w-4" />
Atualizar Dados
</Button>
</Link>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Próximas Consultas</CardTitle>
<CardDescription>Suas consultas agendadas</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">
<div className="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
<div>
<p className="font-medium">Dr. Silva</p>
<p className="text-sm text-gray-600">Cardiologia</p>
</div>
<div className="text-right">
<p className="font-medium">15 Jan</p>
<p className="text-sm text-gray-600">14:30</p>
</div>
</div>
<div className="flex items-center justify-between p-3 bg-green-50 rounded-lg">
<div>
<p className="font-medium">Dra. Santos</p>
<p className="text-sm text-gray-600">Dermatologia</p>
</div>
<div className="text-right">
<p className="font-medium">22 Jan</p>
<p className="text-sm text-gray-600">10:00</p>
</div>
</div>
</div>
</CardContent>
</Card>
</div>
</div>
</SecretaryLayout>
)
}

156
components/doctor-layout.tsx
View File

@ -24,11 +24,11 @@ interface DoctorData {
permissions: object; permissions: object;
} }
interface PatientLayoutProps { interface DoctorLayoutProps {
children: React.ReactNode; children: React.ReactNode;
} }
export default function DoctorLayout({ children }: PatientLayoutProps) { export default function DoctorLayout({ children }: DoctorLayoutProps) {
const [doctorData, setDoctorData] = useState<DoctorData | null>(null); const [doctorData, setDoctorData] = useState<DoctorData | null>(null);
const [sidebarCollapsed, setSidebarCollapsed] = useState(false); const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
const [showLogoutDialog, setShowLogoutDialog] = useState(false); const [showLogoutDialog, setShowLogoutDialog] = useState(false);
@ -48,19 +48,19 @@ export default function DoctorLayout({ children }: PatientLayoutProps) {
}, [router]); }, [router]);
useEffect(() => { useEffect(() => {
const handleResize = () => setWindowWidth(window.innerWidth); const handleResize = () => setWindowWidth(window.innerWidth);
handleResize(); // inicializa com a largura atual handleResize(); // inicializa com a largura atual
window.addEventListener("resize", handleResize); window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize); return () => window.removeEventListener("resize", handleResize);
}, []); }, []);
useEffect(() => { useEffect(() => {
if (isMobile) { if (isMobile) {
setSidebarCollapsed(true); setSidebarCollapsed(true);
} else { } else {
setSidebarCollapsed(false); setSidebarCollapsed(false);
} }
}, [isMobile]); }, [isMobile]);
const handleLogout = () => { const handleLogout = () => {
setShowLogoutDialog(true); setShowLogoutDialog(true);
@ -82,7 +82,7 @@ useEffect(() => {
const menuItems = [ const menuItems = [
{ {
href: "#", href: "/doctor/dashboard",
icon: Home, icon: Home,
label: "Dashboard", label: "Dashboard",
// Botão para o dashboard do médico // Botão para o dashboard do médico
@ -149,46 +149,62 @@ useEffect(() => {
// ... (seu código anterior) // ... (seu código anterior)
{/* Sidebar para desktop */} {/* Sidebar para desktop */}
<div className={`bg-card border-r border-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-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-border"> <div className="p-4 border-b border-border">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
{!sidebarCollapsed && ( {!sidebarCollapsed && (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center"> <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 className="w-4 h-4 bg-primary-foreground rounded-sm"></div>
</div>
<span className="font-semibold text-foreground">MedConnect</span>
</div> </div>
<span className="font-semibold text-foreground">MedConnect</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"> </Button>
{sidebarCollapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronLeft className="w-4 h-4" />} </div>
</Button>
</div> </div>
</div>
<nav className="flex-1 p-2 overflow-y-auto"> <nav className="flex-1 p-2 overflow-y-auto">
{menuItems.map((item) => { {menuItems.map((item) => {
const Icon = item.icon; 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 ( return (
<Link key={item.href} href={item.href}> <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-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"}`}> <div 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" /> <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> </div>
</Link> </Link>
); );
})} })}
</nav> </nav>
<div className="border-t p-4 mt-auto"> <div className="border-t p-4 mt-auto">
<div className="flex items-center space-x-3 mb-4"> <div className="flex items-center space-x-3 mb-4">
{/* Se a sidebar estiver recolhida, o avatar e o texto do usuário também devem ser condensados ou ocultados */} {/* Se a sidebar estiver recolhida, o avatar e o texto do usuário também devem ser condensados ou ocultados */}
{!sidebarCollapsed && ( {!sidebarCollapsed && (
<> <>
<Avatar> <Avatar>
<AvatarImage src="/placeholder.svg?height=40&width=40" />
<AvatarFallback>
{doctorData.name
.split(" ")
.map((n) => n[0])
.join("")}
</AvatarFallback>
</Avatar>
<div className="flex-1 min-w-0">
<p className="text-sm font-medium text-foreground truncate">{doctorData.name}</p>
<p className="text-xs text-muted-foreground truncate">{doctorData.specialty}</p>
</div>
</>
)}
{sidebarCollapsed && (
<Avatar className="mx-auto"> {/* Centraliza o avatar quando recolhido */}
<AvatarImage src="/placeholder.svg?height=40&width=40" /> <AvatarImage src="/placeholder.svg?height=40&width=40" />
<AvatarFallback> <AvatarFallback>
{doctorData.name {doctorData.name
@ -197,36 +213,20 @@ useEffect(() => {
.join("")} .join("")}
</AvatarFallback> </AvatarFallback>
</Avatar> </Avatar>
<div className="flex-1 min-w-0"> )}
<p className="text-sm font-medium text-foreground truncate">{doctorData.name}</p> </div>
<p className="text-xs text-muted-foreground truncate">{doctorData.specialty}</p>
</div>
</>
)}
{sidebarCollapsed && (
<Avatar className="mx-auto"> {/* Centraliza o avatar quando recolhido */}
<AvatarImage src="/placeholder.svg?height=40&width=40" />
<AvatarFallback>
{doctorData.name
.split(" ")
.map((n) => n[0])
.join("")}
</AvatarFallback>
</Avatar>
)}
</div>
{/* Novo botão de sair, usando a mesma estrutura dos itens de menu */} {/* Novo botão de sair, usando a mesma estrutura dos itens de menu */}
<div <div
className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors text-muted-foreground hover:bg-accent hover:text-accent-foreground cursor-pointer ${sidebarCollapsed ? "justify-center" : ""}`} className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors text-muted-foreground hover:bg-accent hover:text-accent-foreground cursor-pointer ${sidebarCollapsed ? "justify-center" : ""}`}
onClick={handleLogout} onClick={handleLogout}
> >
<LogOut className="w-5 h-5 flex-shrink-0" /> <LogOut className="w-5 h-5 flex-shrink-0" />
{!sidebarCollapsed && <span className="font-medium">Sair</span>} {!sidebarCollapsed && <span className="font-medium">Sair</span>}
</div>
</div> </div>
</div> </div>
</div>
</div> </div>
{/* Sidebar para mobile (apresentado como um menu overlay) */} {/* Sidebar para mobile (apresentado como um menu overlay) */}
@ -287,7 +287,7 @@ useEffect(() => {
{/* Main Content */} {/* Main Content */}
<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 */} {/* Header */}
<header className="bg-card border-b border-border px-6 py-4"> <header className="bg-card border-b border-border px-6 py-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">

15
components/manager-layout.tsx
View File

@ -37,11 +37,11 @@ interface ManagerData {
permissions: object; permissions: object;
} }
interface PatientLayoutProps { interface ManagerLayoutProps {
children: React.ReactNode; children: React.ReactNode;
} }
export default function ManagerLayout({ children }: PatientLayoutProps) { export default function ManagerLayout({ children }: ManagerLayoutProps) {
const [managerData, setManagerData] = useState<ManagerData | null>(null); const [managerData, setManagerData] = useState<ManagerData | null>(null);
const [sidebarCollapsed, setSidebarCollapsed] = useState(false); const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
const [showLogoutDialog, setShowLogoutDialog] = useState(false); const [showLogoutDialog, setShowLogoutDialog] = useState(false);
@ -84,7 +84,7 @@ export default function ManagerLayout({ children }: PatientLayoutProps) {
const cancelLogout = () => setShowLogoutDialog(false); const cancelLogout = () => setShowLogoutDialog(false);
const menuItems = [ const menuItems = [
{ href: "#", icon: Home, label: "Dashboard" }, { href: "/manager/dashboard", icon: Home, label: "Dashboard" },
{ href: "#", icon: Calendar, label: "Relatórios gerenciais" }, { href: "#", icon: Calendar, label: "Relatórios gerenciais" },
{ href: "#", icon: User, label: "Gestão de Usuários" }, { href: "#", icon: User, label: "Gestão de Usuários" },
{ href: "#", icon: User, label: "Gestão de Médicos" }, { href: "#", icon: User, label: "Gestão de Médicos" },
@ -139,11 +139,10 @@ export default function ManagerLayout({ children }: PatientLayoutProps) {
return ( return (
<Link key={item.href} href={item.href}> <Link key={item.href} href={item.href}>
<div <div
className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${ className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive
isActive ? "bg-accent text-accent-foreground"
? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
: "text-muted-foreground hover:bg-accent hover:text-accent-foreground" }`}
}`}
> >
<Icon className="w-5 h-5 flex-shrink-0" /> <Icon className="w-5 h-5 flex-shrink-0" />
{!sidebarCollapsed && ( {!sidebarCollapsed && (

20
components/secretary-layout.tsx
View File

@ -41,11 +41,11 @@ interface SecretaryData {
permissions: object permissions: object
} }
interface PatientLayoutProps { interface SecretaryLayoutProps {
children: React.ReactNode children: React.ReactNode
} }
export default function SecretaryLayout({ children }: PatientLayoutProps) { export default function SecretaryLayout({ children }: SecretaryLayoutProps) {
const [sidebarCollapsed, setSidebarCollapsed] = useState(false) const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
const [showLogoutDialog, setShowLogoutDialog] = useState(false) const [showLogoutDialog, setShowLogoutDialog] = useState(false)
const router = useRouter() const router = useRouter()
@ -73,7 +73,7 @@ export default function SecretaryLayout({ children }: PatientLayoutProps) {
const cancelLogout = () => setShowLogoutDialog(false) const cancelLogout = () => setShowLogoutDialog(false)
const menuItems = [ const menuItems = [
{ href: "##", icon: Home, label: "Dashboard" }, { href: "/secretary/dashboard", icon: Home, label: "Dashboard" },
{ href: "/secretary/appointments", icon: Calendar, label: "Consultas" }, { href: "/secretary/appointments", icon: Calendar, label: "Consultas" },
{ href: "/secretary/schedule", icon: Clock, label: "Agendar Consulta" }, { href: "/secretary/schedule", icon: Clock, label: "Agendar Consulta" },
{ href: "/secretary/pacientes", icon: User, label: "Pacientes" }, { href: "/secretary/pacientes", icon: User, label: "Pacientes" },
@ -132,11 +132,10 @@ export default function SecretaryLayout({ children }: PatientLayoutProps) {
return ( return (
<Link key={item.href} href={item.href}> <Link key={item.href} href={item.href}>
<div <div
className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${ className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive
isActive ? "bg-accent text-accent-foreground"
? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
: "text-muted-foreground hover:bg-accent hover:text-accent-foreground" }`}
}`}
> >
<Icon className="w-5 h-5 flex-shrink-0" /> <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>}
@ -189,9 +188,8 @@ export default function SecretaryLayout({ children }: PatientLayoutProps) {
{/* Main Content */} {/* Main Content */}
<div <div
className={`flex-1 flex flex-col transition-all duration-300 ${ className={`flex-1 flex flex-col transition-all duration-300 ${sidebarCollapsed ? "ml-16" : "ml-64"
sidebarCollapsed ? "ml-16" : "ml-64" }`}
}`}
> >
{/* Header */} {/* Header */}
<header className="bg-card border-b border-border px-6 py-4"> <header className="bg-card border-b border-border px-6 py-4">