forked from RiseUP/riseup-squad21
Compare commits
4 Commits
39790969c8
...
613b70654e
| Author | SHA1 | Date | |
|---|---|---|---|
| 613b70654e | |||
| 6f81f1b594 | |||
| 01ecf40ee6 | |||
| 64188f805c |
91
app/doctor/dashboard/page.tsx
Normal file
91
app/doctor/dashboard/page.tsx
Normal 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>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -33,8 +33,8 @@ 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 ---
|
||||||
@ -136,7 +136,7 @@ export default function DoctorAppointmentsPage() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
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";
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
113
app/manager/dashboard/page.tsx
Normal file
113
app/manager/dashboard/page.tsx
Normal 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>
|
||||||
|
)
|
||||||
|
}
|
||||||
283
app/secretary/appointments/page.tsx
Normal file
283
app/secretary/appointments/page.tsx
Normal file
@ -0,0 +1,283 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState, useEffect } from "react";
|
||||||
|
import SecretaryLayout from "@/components/secretary-layout";
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||||||
|
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 { Calendar, Clock, MapPin, Phone, CalendarDays, X, User } from "lucide-react";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
const APPOINTMENTS_STORAGE_KEY = "clinic-appointments";
|
||||||
|
|
||||||
|
const initialAppointments = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
patientName: "Carlos Pereira",
|
||||||
|
doctor: "Dr. João Silva",
|
||||||
|
specialty: "Cardiologia",
|
||||||
|
date: "2024-01-15",
|
||||||
|
time: "14:30",
|
||||||
|
status: "agendada",
|
||||||
|
location: "Consultório A - 2º andar",
|
||||||
|
phone: "(11) 3333-4444",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
patientName: "Ana Beatriz Costa",
|
||||||
|
doctor: "Dra. Maria Santos",
|
||||||
|
specialty: "Dermatologia",
|
||||||
|
date: "2024-01-22",
|
||||||
|
time: "10:00",
|
||||||
|
status: "agendada",
|
||||||
|
location: "Consultório B - 1º andar",
|
||||||
|
phone: "(11) 3333-5555",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
patientName: "Roberto Almeida",
|
||||||
|
doctor: "Dr. Pedro Costa",
|
||||||
|
specialty: "Ortopedia",
|
||||||
|
date: "2024-01-08",
|
||||||
|
time: "16:00",
|
||||||
|
status: "realizada",
|
||||||
|
location: "Consultório C - 3º andar",
|
||||||
|
phone: "(11) 3333-6666",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
patientName: "Fernanda Lima",
|
||||||
|
doctor: "Dra. Ana Lima",
|
||||||
|
specialty: "Ginecologia",
|
||||||
|
date: "2024-01-05",
|
||||||
|
time: "09:30",
|
||||||
|
status: "realizada",
|
||||||
|
location: "Consultório D - 2º andar",
|
||||||
|
phone: "(11) 3333-7777",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function SecretaryAppointments() {
|
||||||
|
const [appointments, setAppointments] = useState<any[]>([]);
|
||||||
|
const [rescheduleModal, setRescheduleModal] = useState(false);
|
||||||
|
const [cancelModal, setCancelModal] = useState(false);
|
||||||
|
const [selectedAppointment, setSelectedAppointment] = useState<any>(null);
|
||||||
|
const [rescheduleData, setRescheduleData] = useState({ date: "", time: "", reason: "" });
|
||||||
|
const [cancelReason, setCancelReason] = useState("");
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const storedAppointments = localStorage.getItem(APPOINTMENTS_STORAGE_KEY);
|
||||||
|
if (storedAppointments) {
|
||||||
|
setAppointments(JSON.parse(storedAppointments));
|
||||||
|
} else {
|
||||||
|
setAppointments(initialAppointments);
|
||||||
|
localStorage.setItem(APPOINTMENTS_STORAGE_KEY, JSON.stringify(initialAppointments));
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const updateAppointments = (updatedAppointments: any[]) => {
|
||||||
|
setAppointments(updatedAppointments);
|
||||||
|
localStorage.setItem(APPOINTMENTS_STORAGE_KEY, JSON.stringify(updatedAppointments));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleReschedule = (appointment: any) => {
|
||||||
|
setSelectedAppointment(appointment);
|
||||||
|
setRescheduleData({ date: "", time: "", reason: "" });
|
||||||
|
setRescheduleModal(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCancel = (appointment: any) => {
|
||||||
|
setSelectedAppointment(appointment);
|
||||||
|
setCancelReason("");
|
||||||
|
setCancelModal(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const confirmReschedule = () => {
|
||||||
|
if (!rescheduleData.date || !rescheduleData.time) {
|
||||||
|
toast.error("Por favor, selecione uma nova data e horário");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const updated = appointments.map((apt) => (apt.id === selectedAppointment.id ? { ...apt, date: rescheduleData.date, time: rescheduleData.time } : apt));
|
||||||
|
updateAppointments(updated);
|
||||||
|
setRescheduleModal(false);
|
||||||
|
toast.success("Consulta reagendada com sucesso!");
|
||||||
|
};
|
||||||
|
|
||||||
|
const confirmCancel = () => {
|
||||||
|
if (!cancelReason.trim() || cancelReason.trim().length < 10) {
|
||||||
|
toast.error("O motivo do cancelamento é obrigatório e deve ter no mínimo 10 caracteres.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const updated = appointments.map((apt) => (apt.id === selectedAppointment.id ? { ...apt, status: "cancelada" } : apt));
|
||||||
|
updateAppointments(updated);
|
||||||
|
setCancelModal(false);
|
||||||
|
toast.success("Consulta cancelada com sucesso!");
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStatusBadge = (status: string) => {
|
||||||
|
switch (status) {
|
||||||
|
case "agendada":
|
||||||
|
return <Badge className="bg-blue-100 text-blue-800">Agendada</Badge>;
|
||||||
|
case "realizada":
|
||||||
|
return <Badge className="bg-green-100 text-green-800">Realizada</Badge>;
|
||||||
|
case "cancelada":
|
||||||
|
return <Badge className="bg-red-100 text-red-800">Cancelada</Badge>;
|
||||||
|
default:
|
||||||
|
return <Badge variant="secondary">{status}</Badge>;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const timeSlots = ["08:00", "08:30", "09:00", "09:30", "10:00", "10:30", "11:00", "11:30", "14:00", "14:30", "15:00", "15:30", "16:00", "16:30", "17:00", "17:30"];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SecretaryLayout>
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-3xl font-bold text-gray-900">Consultas Agendadas</h1>
|
||||||
|
<p className="text-gray-600">Gerencie as consultas dos pacientes</p>
|
||||||
|
</div>
|
||||||
|
<Link href="/secretary/schedule">
|
||||||
|
<Button>
|
||||||
|
<Calendar className="mr-2 h-4 w-4" />
|
||||||
|
Agendar Nova Consulta
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-6">
|
||||||
|
{appointments.length > 0 ? (
|
||||||
|
appointments.map((appointment) => (
|
||||||
|
<Card key={appointment.id}>
|
||||||
|
<CardHeader>
|
||||||
|
<div className="flex justify-between items-start">
|
||||||
|
<div>
|
||||||
|
<CardTitle className="text-lg">{appointment.doctor}</CardTitle>
|
||||||
|
<CardDescription>{appointment.specialty}</CardDescription>
|
||||||
|
</div>
|
||||||
|
{getStatusBadge(appointment.status)}
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="grid md:grid-cols-2 gap-4">
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex items-center text-sm text-gray-800 font-medium">
|
||||||
|
<User className="mr-2 h-4 w-4 text-gray-600" />
|
||||||
|
{appointment.patientName}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center text-sm text-gray-600">
|
||||||
|
<Calendar className="mr-2 h-4 w-4" />
|
||||||
|
{new Date(appointment.date).toLocaleDateString("pt-BR", { timeZone: "UTC" })}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center text-sm text-gray-600">
|
||||||
|
<Clock className="mr-2 h-4 w-4" />
|
||||||
|
{appointment.time}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex items-center text-sm text-gray-600">
|
||||||
|
<MapPin className="mr-2 h-4 w-4" />
|
||||||
|
{appointment.location}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center text-sm text-gray-600">
|
||||||
|
<Phone className="mr-2 h-4 w-4" />
|
||||||
|
{appointment.phone}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{appointment.status === "agendada" && (
|
||||||
|
<div className="flex gap-2 mt-4 pt-4 border-t">
|
||||||
|
<Button variant="outline" size="sm" onClick={() => handleReschedule(appointment)}>
|
||||||
|
<CalendarDays className="mr-2 h-4 w-4" />
|
||||||
|
Reagendar
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" size="sm" className="text-red-600 hover:text-red-700 hover:bg-red-50 bg-transparent" onClick={() => handleCancel(appointment)}>
|
||||||
|
<X className="mr-2 h-4 w-4" />
|
||||||
|
Cancelar
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<p>Nenhuma consulta encontrada.</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Dialog open={rescheduleModal} onOpenChange={setRescheduleModal}>
|
||||||
|
<DialogContent className="sm:max-w-[425px]">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Reagendar Consulta</DialogTitle>
|
||||||
|
<DialogDescription>Reagendar consulta com {selectedAppointment?.doctor} para {selectedAppointment?.patientName}</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="grid gap-4 py-4">
|
||||||
|
<div className="grid gap-2">
|
||||||
|
<Label htmlFor="date">Nova Data</Label>
|
||||||
|
<Input id="date" type="date" value={rescheduleData.date} onChange={(e) => setRescheduleData((prev) => ({ ...prev, date: e.target.value }))} min={new Date().toISOString().split("T")[0]} />
|
||||||
|
</div>
|
||||||
|
<div className="grid gap-2">
|
||||||
|
<Label htmlFor="time">Novo Horário</Label>
|
||||||
|
<Select value={rescheduleData.time} onValueChange={(value) => setRescheduleData((prev) => ({ ...prev, time: value }))}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Selecione um horário" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{timeSlots.map((time) => (
|
||||||
|
<SelectItem key={time} value={time}>
|
||||||
|
{time}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div className="grid gap-2">
|
||||||
|
<Label htmlFor="reason">Motivo do Reagendamento (opcional)</Label>
|
||||||
|
<Textarea id="reason" placeholder="Informe o motivo do reagendamento..." value={rescheduleData.reason} onChange={(e) => setRescheduleData((prev) => ({ ...prev, reason: e.target.value }))} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="outline" onClick={() => setRescheduleModal(false)}>
|
||||||
|
Cancelar
|
||||||
|
</Button>
|
||||||
|
<Button onClick={confirmReschedule}>Confirmar Reagendamento</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
<Dialog open={cancelModal} onOpenChange={setCancelModal}>
|
||||||
|
<DialogContent className="sm:max-w-[425px]">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Cancelar Consulta</DialogTitle>
|
||||||
|
<DialogDescription>Tem certeza que deseja cancelar a consulta de {selectedAppointment?.patientName} com {selectedAppointment?.doctor}?</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="grid gap-4 py-4">
|
||||||
|
<div className="grid gap-2">
|
||||||
|
<Label htmlFor="cancel-reason" className="text-sm font-medium">
|
||||||
|
Motivo do Cancelamento <span className="text-red-500">*</span>
|
||||||
|
</Label>
|
||||||
|
<Textarea id="cancel-reason" placeholder="Por favor, informe o motivo do cancelamento... (obrigatório)" value={cancelReason} onChange={(e) => setCancelReason(e.target.value)} required className={`min-h-[100px] ${!cancelReason.trim() && cancelModal ? "border-red-300 focus:border-red-500" : ""}`} />
|
||||||
|
<p className="text-xs text-gray-500">Mínimo de 10 caracteres. Este campo é obrigatório.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="outline" onClick={() => setCancelModal(false)}>
|
||||||
|
Voltar
|
||||||
|
</Button>
|
||||||
|
<Button variant="destructive" onClick={confirmCancel} disabled={!cancelReason.trim() || cancelReason.trim().length < 10}>
|
||||||
|
Confirmar Cancelamento
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</SecretaryLayout>
|
||||||
|
);
|
||||||
|
}
|
||||||
113
app/secretary/dashboard/page.tsx
Normal file
113
app/secretary/dashboard/page.tsx
Normal 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>
|
||||||
|
)
|
||||||
|
}
|
||||||
241
app/secretary/schedule/page.tsx
Normal file
241
app/secretary/schedule/page.tsx
Normal file
@ -0,0 +1,241 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import type React from "react";
|
||||||
|
import { useState, useEffect } from "react";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import SecretaryLayout from "@/components/secretary-layout";
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
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 { Calendar, Clock, User } from "lucide-react";
|
||||||
|
import { patientsService } from "@/services/patientsApi.mjs";
|
||||||
|
import { doctorsService } from "@/services/doctorsApi.mjs"; // Importar o serviço de médicos
|
||||||
|
import { toast } from "sonner";
|
||||||
|
|
||||||
|
const APPOINTMENTS_STORAGE_KEY = "clinic-appointments";
|
||||||
|
|
||||||
|
export default function ScheduleAppointment() {
|
||||||
|
const router = useRouter();
|
||||||
|
const [patients, setPatients] = useState<any[]>([]);
|
||||||
|
const [doctors, setDoctors] = useState<any[]>([]); // Estado para armazenar os médicos da API
|
||||||
|
const [selectedPatient, setSelectedPatient] = useState("");
|
||||||
|
const [selectedDoctor, setSelectedDoctor] = useState("");
|
||||||
|
const [selectedDate, setSelectedDate] = useState("");
|
||||||
|
const [selectedTime, setSelectedTime] = useState("");
|
||||||
|
const [notes, setNotes] = useState("");
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchData = async () => {
|
||||||
|
try {
|
||||||
|
// Carrega pacientes e médicos em paralelo para melhor performance
|
||||||
|
const [patientList, doctorList] = await Promise.all([
|
||||||
|
patientsService.list(),
|
||||||
|
doctorsService.list()
|
||||||
|
]);
|
||||||
|
setPatients(patientList);
|
||||||
|
setDoctors(doctorList);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Falha ao buscar dados iniciais:", error);
|
||||||
|
toast.error("Não foi possível carregar os dados de pacientes e médicos.");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
fetchData();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const availableTimes = ["08:00", "08:30", "09:00", "09:30", "10:00", "10:30", "14:00", "14:30", "15:00", "15:30", "16:00", "16:30"];
|
||||||
|
|
||||||
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const patientDetails = patients.find((p) => String(p.id) === selectedPatient);
|
||||||
|
const doctorDetails = doctors.find((d) => String(d.id) === selectedDoctor);
|
||||||
|
|
||||||
|
if (!patientDetails || !doctorDetails) {
|
||||||
|
toast.error("Erro ao encontrar detalhes do paciente ou médico.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const newAppointment = {
|
||||||
|
id: new Date().getTime(), // ID único simples
|
||||||
|
patientName: patientDetails.full_name,
|
||||||
|
doctor: doctorDetails.full_name, // Usar full_name para consistência
|
||||||
|
specialty: doctorDetails.specialty,
|
||||||
|
date: selectedDate,
|
||||||
|
time: selectedTime,
|
||||||
|
status: "agendada",
|
||||||
|
location: doctorDetails.location || "Consultório a definir", // Fallback
|
||||||
|
phone: doctorDetails.phone || "N/A", // Fallback
|
||||||
|
};
|
||||||
|
|
||||||
|
const storedAppointmentsRaw = localStorage.getItem(APPOINTMENTS_STORAGE_KEY);
|
||||||
|
const currentAppointments = storedAppointmentsRaw ? JSON.parse(storedAppointmentsRaw) : [];
|
||||||
|
const updatedAppointments = [...currentAppointments, newAppointment];
|
||||||
|
|
||||||
|
localStorage.setItem(APPOINTMENTS_STORAGE_KEY, JSON.stringify(updatedAppointments));
|
||||||
|
|
||||||
|
toast.success("Consulta agendada com sucesso!");
|
||||||
|
router.push("/secretary/appointments");
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SecretaryLayout>
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-3xl font-bold text-gray-900">Agendar Consulta</h1>
|
||||||
|
<p className="text-gray-600">Escolha o paciente, médico, data e horário para a consulta</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid lg:grid-cols-3 gap-6">
|
||||||
|
<div className="lg:col-span-2">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Dados da Consulta</CardTitle>
|
||||||
|
<CardDescription>Preencha as informações para agendar a consulta</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="patient">Paciente</Label>
|
||||||
|
<Select value={selectedPatient} onValueChange={setSelectedPatient}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Selecione um paciente" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{patients.length > 0 ? (
|
||||||
|
patients.map((patient) => (
|
||||||
|
<SelectItem key={patient.id} value={String(patient.id)}>
|
||||||
|
{patient.full_name}
|
||||||
|
</SelectItem>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<SelectItem value="loading" disabled>
|
||||||
|
Carregando pacientes...
|
||||||
|
</SelectItem>
|
||||||
|
)}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="doctor">Médico</Label>
|
||||||
|
<Select value={selectedDoctor} onValueChange={setSelectedDoctor}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Selecione um médico" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{doctors.length > 0 ? (
|
||||||
|
doctors.map((doctor) => (
|
||||||
|
<SelectItem key={doctor.id} value={String(doctor.id)}>
|
||||||
|
{doctor.full_name} - {doctor.specialty}
|
||||||
|
</SelectItem>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<SelectItem value="loading" disabled>
|
||||||
|
Carregando médicos...
|
||||||
|
</SelectItem>
|
||||||
|
)}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-2 gap-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="date">Data</Label>
|
||||||
|
<Input id="date" type="date" value={selectedDate} onChange={(e) => setSelectedDate(e.target.value)} min={new Date().toISOString().split("T")[0]} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="time">Horário</Label>
|
||||||
|
<Select value={selectedTime} onValueChange={setSelectedTime}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Selecione um horário" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{availableTimes.map((time) => (
|
||||||
|
<SelectItem key={time} value={time}>
|
||||||
|
{time}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="notes">Observações (opcional)</Label>
|
||||||
|
<Textarea id="notes" placeholder="Descreva brevemente o motivo da consulta ou observações importantes" value={notes} onChange={(e) => setNotes(e.target.value)} rows={3} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button type="submit" className="w-full" disabled={!selectedPatient || !selectedDoctor || !selectedDate || !selectedTime}>
|
||||||
|
Agendar Consulta
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-6">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center">
|
||||||
|
<Calendar className="mr-2 h-5 w-5" />
|
||||||
|
Resumo
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
{selectedPatient && (
|
||||||
|
<div className="flex items-start space-x-2">
|
||||||
|
<User className="h-4 w-4 text-gray-500 mt-1 flex-shrink-0" />
|
||||||
|
<div className="text-sm">
|
||||||
|
<span className="font-semibold text-gray-800">Paciente:</span>
|
||||||
|
<p className="text-gray-600">{patients.find((p) => String(p.id) === selectedPatient)?.full_name}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{selectedDoctor && (
|
||||||
|
<div className="flex items-start space-x-2">
|
||||||
|
<User className="h-4 w-4 text-gray-500 mt-1 flex-shrink-0" />
|
||||||
|
<div className="text-sm">
|
||||||
|
<span className="font-semibold text-gray-800">Médico:</span>
|
||||||
|
<p className="text-gray-600">{doctors.find((d) => String(d.id) === selectedDoctor)?.full_name}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{selectedDate && (
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Calendar className="h-4 w-4 text-gray-500" />
|
||||||
|
<span className="text-sm">{new Date(selectedDate).toLocaleDateString("pt-BR", { timeZone: "UTC" })}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{selectedTime && (
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Clock className="h-4 w-4 text-gray-500" />
|
||||||
|
<span className="text-sm">{selectedTime}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Informações Importantes</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="text-sm text-gray-600 space-y-2">
|
||||||
|
<p>• Chegue com 15 minutos de antecedência</p>
|
||||||
|
<p>• Traga documento com foto</p>
|
||||||
|
<p>• Traga carteirinha do convênio</p>
|
||||||
|
<p>• Traga exames anteriores, se houver</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</SecretaryLayout>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -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,35 +213,19 @@ 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>
|
||||||
|
|
||||||
@ -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">
|
||||||
|
|||||||
@ -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 && (
|
||||||
|
|||||||
@ -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,9 +73,9 @@ 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: "###", icon: Calendar, label: "Consultas" },
|
{ href: "/secretary/appointments", icon: Calendar, label: "Consultas" },
|
||||||
{ href: "#", 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">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user