RiseUP/riseup-squad21
5
0
Fork 2
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: RiseUP:652dc2745a1365d7916ec2d019e4f15ce9b488cf
Branches Tags
RiseUP:main
RiseUP:responsividade-nova
RiseUP:user2
RiseUP:refatoracao
RiseUP:refatoracao-ui
RiseUP:refatoracao-manager
RiseUP:disponibilidade
RiseUP:Users
RiseUP:laudo-API
RiseUP:feat/refatorar-login
RiseUP:consultas-página-médico
RiseUP:acessibilidade
RiseUP:lista-de-pacientes-j2
RiseUP:sec-marca
..
compare: RiseUP:36600e2b33208f1425110b221ff94d41759a3cfc
Branches Tags
RiseUP:main
RiseUP:responsividade-nova
RiseUP:user2
RiseUP:refatoracao
RiseUP:refatoracao-ui
RiseUP:refatoracao-manager
RiseUP:disponibilidade
RiseUP:Users
RiseUP:laudo-API
RiseUP:feat/refatorar-login
RiseUP:consultas-página-médico
RiseUP:acessibilidade
RiseUP:lista-de-pacientes-j2
RiseUP:sec-marca

No commits in common. "652dc2745a1365d7916ec2d019e4f15ce9b488cf" and "36600e2b33208f1425110b221ff94d41759a3cfc" have entirely different histories.
652dc2745a ... 36600e2b33

5 changed files with 461 additions and 828 deletions
Show Stats Expand all files Collapse all files

152
components/doctor-layout.tsx
View File

@ -32,9 +32,6 @@ export default function DoctorLayout({ children }: PatientLayoutProps) {
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);
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); // Novo estado para menu mobile
const [windowWidth, setWindowWidth] = useState(0);
const isMobile = windowWidth < 1024; // breakpoint lg
const router = useRouter(); const router = useRouter();
const pathname = usePathname(); const pathname = usePathname();
@ -47,21 +44,6 @@ export default function DoctorLayout({ children }: PatientLayoutProps) {
} }
}, [router]); }, [router]);
useEffect(() => {
const handleResize = () => setWindowWidth(window.innerWidth);
handleResize(); // inicializa com a largura atual
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, []);
useEffect(() => {
if (isMobile) {
setSidebarCollapsed(true);
} else {
setSidebarCollapsed(false);
}
}, [isMobile]);
const handleLogout = () => { const handleLogout = () => {
setShowLogoutDialog(true); setShowLogoutDialog(true);
}; };
@ -76,10 +58,6 @@ useEffect(() => {
setShowLogoutDialog(false); setShowLogoutDialog(false);
}; };
const toggleMobileMenu = () => {
setIsMobileMenuOpen(!isMobileMenuOpen);
};
const menuItems = [ const menuItems = [
{ {
href: "#", href: "#",
@ -113,8 +91,8 @@ useEffect(() => {
return ( return (
<div className="min-h-screen bg-gray-50 flex"> <div className="min-h-screen bg-gray-50 flex">
{/* Sidebar para desktop */} {/* Sidebar */}
<div className={`bg-white border-r border-gray-200 transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"} fixed left-0 top-0 h-screen flex flex-col z-50`}> <div className={`bg-white border-r border-gray-200 transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"} fixed left-0 top-0 h-screen flex flex-col z-10`}>
<div className="p-4 border-b border-gray-200"> <div className="p-4 border-b border-gray-200">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
{!sidebarCollapsed && ( {!sidebarCollapsed && (
@ -147,121 +125,6 @@ useEffect(() => {
})} })}
</nav> </nav>
// ... (seu código anterior)
{/* Sidebar para desktop */}
<div className={`bg-white border-r border-gray-200 transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"} fixed left-0 top-0 h-screen flex flex-col z-50`}>
<div className="p-4 border-b border-gray-200">
<div className="flex items-center justify-between">
{!sidebarCollapsed && (
<div className="flex items-center gap-2">
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
<div className="w-4 h-4 bg-white rounded-sm"></div>
</div>
<span className="font-semibold text-gray-900">Hospital System</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>
</div>
</div>
<nav className="flex-1 p-2 overflow-y-auto">
{menuItems.map((item) => {
const Icon = item.icon;
const isActive = pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href));
return (
<Link key={item.href} href={item.href}>
<div className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600" : "text-gray-600 hover:bg-gray-50"}`}>
<Icon className="w-5 h-5 flex-shrink-0" />
{!sidebarCollapsed && <span className="font-medium">{item.label}</span>}
</div>
</Link>
);
})}
</nav>
<div className="border-t p-4 mt-auto">
<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 */}
{!sidebarCollapsed && (
<>
<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-gray-900 truncate">{doctorData.name}</p>
<p className="text-xs text-gray-500 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 */}
<div
className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors text-gray-600 hover:bg-gray-50 cursor-pointer ${sidebarCollapsed ? "justify-center" : ""}`}
onClick={handleLogout}
>
<LogOut className="w-5 h-5 flex-shrink-0" />
{!sidebarCollapsed && <span className="font-medium">Sair</span>}
</div>
</div>
</div>
</div>
{/* Sidebar para mobile (apresentado como um menu overlay) */}
{isMobileMenuOpen && (
<div className="fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden" onClick={toggleMobileMenu}></div>
)}
<div className={`bg-white border-r border-gray-200 fixed left-0 top-0 h-screen flex flex-col z-50 transition-transform duration-300 md:hidden ${isMobileMenuOpen ? "translate-x-0 w-64" : "-translate-x-full w-64"}`}>
<div className="p-4 border-b border-gray-200 flex items-center justify-between">
<div className="flex items-center gap-2">
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
<div className="w-4 h-4 bg-white rounded-sm"></div>
</div>
<span className="font-semibold text-gray-900">Hospital System</span>
</div>
<Button variant="ghost" size="sm" onClick={toggleMobileMenu} className="p-1">
<X className="w-4 h-4" />
</Button>
</div>
<nav className="flex-1 p-2 overflow-y-auto">
{menuItems.map((item) => {
const Icon = item.icon;
const isActive = pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href));
return (
<Link key={item.href} href={item.href} onClick={toggleMobileMenu}> {/* Fechar menu ao clicar */}
<div className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600" : "text-gray-600 hover:bg-gray-50"}`}>
<Icon className="w-5 h-5 flex-shrink-0" />
<span className="font-medium">{item.label}</span>
</div>
</Link>
);
})}
</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">
<Avatar> <Avatar>
@ -278,21 +141,20 @@ useEffect(() => {
<p className="text-xs text-gray-500 truncate">{doctorData.specialty}</p> <p className="text-xs text-gray-500 truncate">{doctorData.specialty}</p>
</div> </div>
</div> </div>
<Button variant="outline" size="sm" className="w-full bg-transparent" onClick={() => { handleLogout(); toggleMobileMenu(); }}> {/* Fechar menu ao deslogar */} <Button variant="outline" size="sm" className="w-full bg-transparent" onClick={handleLogout}>
<LogOut className="mr-2 h-4 w-4" /> <LogOut className="mr-2 h-4 w-4" />
Sair Sair
</Button> </Button>
</div> </div>
</div> </div>
{/* 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-white border-b border-gray-200 px-6 py-4"> <header className="bg-white border-b border-gray-200 px-6 py-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-4 flex-1"> <div className="flex items-center gap-4 flex-1 max-w-md">
<div className="relative flex-1 max-w-md"> <div className="relative flex-1">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" /> <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
<Input placeholder="Buscar paciente" className="pl-10 bg-gray-50 border-gray-200" /> <Input placeholder="Buscar paciente" className="pl-10 bg-gray-50 border-gray-200" />
</div> </div>
@ -331,4 +193,4 @@ useEffect(() => {
</Dialog> </Dialog>
</div> </div>
); );
} }

413
components/finance-layout.tsx
View File

@ -1,6 +1,7 @@
"use client"; "use client";
import type React from "react"; import type React from "react";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { useRouter, usePathname } from "next/navigation"; import { useRouter, usePathname } from "next/navigation";
import Link from "next/link"; import Link from "next/link";
@ -8,279 +9,187 @@ import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
Dialog, import { Search, Bell, Calendar, Clock, User, LogOut, Menu, X, Home, FileText, ChevronLeft, ChevronRight } from "lucide-react";
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import {
Search,
Bell,
Calendar,
Clock,
User,
LogOut,
Menu,
X,
Home,
FileText,
ChevronLeft,
ChevronRight,
} from "lucide-react";
interface FinancierData { interface FinancierData {
id: string; id: string,
name: string; name: string,
email: string; email: string,
phone: string; phone: string,
cpf: string; cpf: string,
department: string; department: string,
permissions: object; permissions: object,
} }
interface PatientLayoutProps { interface PatientLayoutProps {
children: React.ReactNode; children: React.ReactNode;
} }
export default function FinancierLayout({ children }: PatientLayoutProps) { export default function FinancierLayout({ children }: PatientLayoutProps) {
const [financierData, setFinancierData] = useState<FinancierData | null>( const [financierData, setFinancierData] = useState<FinancierData | null>(null);
null const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
); const [showLogoutDialog, setShowLogoutDialog] = useState(false);
const [sidebarCollapsed, setSidebarCollapsed] = useState(false); const router = useRouter();
const [showLogoutDialog, setShowLogoutDialog] = useState(false); const pathname = usePathname();
const router = useRouter();
const pathname = usePathname();
useEffect(() => { useEffect(() => {
const data = localStorage.getItem("financierData"); const data = localStorage.getItem("financierData");
if (data) { if (data) {
setFinancierData(JSON.parse(data)); setFinancierData(JSON.parse(data));
} else { } else {
router.push("/finance/login"); router.push("/finance/login");
} }
}, [router]); }, [router]);
// 🔥 Responsividade automática da sidebar const handleLogout = () => {
useEffect(() => { setShowLogoutDialog(true);
const handleResize = () => {
// Ajuste o breakpoint conforme necessário. 1024px (lg) ou 768px (md) são comuns.
if (window.innerWidth < 1024) {
setSidebarCollapsed(true);
} else {
setSidebarCollapsed(false);
}
}; };
handleResize(); // executa na primeira carga const confirmLogout = () => {
window.addEventListener("resize", handleResize); localStorage.removeItem("financierData");
setShowLogoutDialog(false);
router.push("/");
};
return () => window.removeEventListener("resize", handleResize); const cancelLogout = () => {
}, []); setShowLogoutDialog(false);
};
const handleLogout = () => { const menuItems = [
setShowLogoutDialog(true); {
}; href: "#",
icon: Home,
label: "Dashboard",
// Botão para o dashboard do médico
},
{
href: "#",
icon: Calendar,
label: "Relatórios financeiros",
// Botão para o dashboard do médico
},
{
href: "#",
icon: User,
label: "Finanças Gerais",
// Botão para página do editor de laudo
},
{
href: "#",
icon: Calendar,
label: "Configurações",
// Botão para página de consultas marcadas do médico atual
},
];
const confirmLogout = () => { if (!financierData) {
localStorage.removeItem("financierData"); return <div>Carregando...</div>;
setShowLogoutDialog(false); }
router.push("/");
};
const cancelLogout = () => { return (
setShowLogoutDialog(false); <div className="min-h-screen bg-gray-50 flex">
}; {/* Sidebar */}
<div className={`bg-white border-r border-gray-200 transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"} fixed left-0 top-0 h-screen flex flex-col z-10`}>
const menuItems = [ <div className="p-4 border-b border-gray-200">
{ <div className="flex items-center justify-between">
href: "#", {!sidebarCollapsed && (
icon: Home, <div className="flex items-center gap-2">
label: "Dashboard", <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
}, <div className="w-4 h-4 bg-white rounded-sm"></div>
{ </div>
href: "#", <span className="font-semibold text-gray-900">Hospital System</span>
icon: Calendar, </div>
label: "Relatórios financeiros", )}
}, <Button variant="ghost" size="sm" onClick={() => setSidebarCollapsed(!sidebarCollapsed)} className="p-1">
{ {sidebarCollapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronLeft className="w-4 h-4" />}
href: "#", </Button>
icon: User, </div>
label: "Finanças Gerais",
},
{
href: "#",
icon: Calendar,
label: "Configurações",
},
];
if (!financierData) {
return <div>Carregando...</div>;
}
return (
<div className="min-h-screen bg-gray-50 flex">
{/* Sidebar */}
<div
className={`bg-white border-r border-gray-200 transition-all duration-300 ${
sidebarCollapsed ? "w-16" : "w-64"
} fixed left-0 top-0 h-screen flex flex-col z-10`}
>
<div className="p-4 border-b border-gray-200">
<div className="flex items-center justify-between">
{!sidebarCollapsed && (
<div className="flex items-center gap-2">
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
<div className="w-4 h-4 bg-white rounded-sm"></div>
</div> </div>
<span className="font-semibold text-gray-900">
Hospital System
</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>
</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 = const isActive = pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href));
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 <div className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600" : "text-gray-600 hover:bg-gray-50"}`}>
className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${ <Icon className="w-5 h-5 flex-shrink-0" />
isActive {!sidebarCollapsed && <span className="font-medium">{item.label}</span>}
? "bg-blue-50 text-blue-600 border-r-2 border-blue-600" </div>
: "text-gray-600 hover:bg-gray-50" </Link>
}`} );
> })}
<Icon className="w-5 h-5 flex-shrink-0" /> </nav>
{!sidebarCollapsed && (
<span className="font-medium">{item.label}</span> <div className="border-t p-4 mt-auto">
)} <div className="flex items-center space-x-3 mb-4">
<Avatar>
<AvatarImage src="/placeholder.svg?height=40&width=40" />
<AvatarFallback>
{financierData.name
.split(" ")
.map((n) => n[0])
.join("")}
</AvatarFallback>
</Avatar>
<div className="flex-1 min-w-0">
<p className="text-sm font-medium text-gray-900 truncate">{financierData.name}</p>
<p className="text-xs text-gray-500 truncate">{financierData.department}</p>
</div>
</div>
<Button variant="outline" size="sm" className="w-full bg-transparent" onClick={handleLogout}>
<LogOut className="mr-2 h-4 w-4" />
Sair
</Button>
</div> </div>
</Link>
);
})}
</nav>
{/* Footer user info */}
<div className="border-t p-4 mt-auto">
<div className="flex items-center space-x-3 mb-4">
<Avatar>
<AvatarImage src="/placeholder.svg?height=40&width=40" />
<AvatarFallback>
{financierData.name
.split(" ")
.map((n) => n[0])
.join("")}
</AvatarFallback>
</Avatar>
{!sidebarCollapsed && (
<div className="flex-1 min-w-0">
<p className="text-sm font-medium text-gray-900 truncate">
{financierData.name}
</p>
<p className="text-xs text-gray-500 truncate">
{financierData.department}
</p>
</div>
)}
</div>
{/* Botão Sair - ajustado para responsividade */}
<Button
variant="outline"
size="sm"
className={
sidebarCollapsed
? "w-full bg-transparent flex justify-center items-center p-2" // Centraliza o ícone quando colapsado
: "w-full bg-transparent"
}
onClick={handleLogout}
>
<LogOut
className={sidebarCollapsed ? "h-5 w-5" : "mr-2 h-4 w-4"}
/>{" "}
{/* Remove margem quando colapsado */}
{!sidebarCollapsed && "Sair"}{" "}
{/* Mostra o texto apenas quando não está colapsado */}
</Button>
</div>
</div>
{/* Main Content */}
<div
className={`flex-1 flex flex-col transition-all duration-300 ${
sidebarCollapsed ? "ml-16" : "ml-64"
}`}
>
{/* Header */}
<header className="bg-white border-b border-gray-200 px-6 py-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-4 flex-1 max-w-md">
<div className="relative flex-1">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
<Input
placeholder="Buscar paciente"
className="pl-10 bg-gray-50 border-gray-200"
/>
</div>
</div> </div>
<div className="flex items-center gap-4"> {/* Main Content */}
<Button variant="ghost" size="sm" className="relative"> <div className={`flex-1 flex flex-col transition-all duration-300 ${sidebarCollapsed ? "ml-16" : "ml-64"}`}>
<Bell className="w-5 h-5" /> {/* Header */}
<Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-red-500 text-white text-xs"> <header className="bg-white border-b border-gray-200 px-6 py-4">
1 <div className="flex items-center justify-between">
</Badge> <div className="flex items-center gap-4 flex-1 max-w-md">
</Button> <div className="relative flex-1">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
<Input placeholder="Buscar paciente" className="pl-10 bg-gray-50 border-gray-200" />
</div>
</div>
<div className="flex items-center gap-4">
<Button variant="ghost" size="sm" className="relative">
<Bell className="w-5 h-5" />
<Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-red-500 text-white text-xs">1</Badge>
</Button>
</div>
</div>
</header>
{/* Page Content */}
<main className="flex-1 p-6">{children}</main>
</div> </div>
</div>
</header>
{/* Page Content */} {/* Logout confirmation dialog */}
<main className="flex-1 p-6">{children}</main> <Dialog open={showLogoutDialog} onOpenChange={setShowLogoutDialog}>
</div> <DialogContent className="sm:max-w-md">
<DialogHeader>
{/* Logout confirmation dialog */} <DialogTitle>Confirmar Saída</DialogTitle>
<Dialog open={showLogoutDialog} onOpenChange={setShowLogoutDialog}> <DialogDescription>Deseja realmente sair do sistema? Você precisará fazer login novamente para acessar sua conta.</DialogDescription>
<DialogContent className="sm:max-w-md"> </DialogHeader>
<DialogHeader> <DialogFooter className="flex gap-2">
<DialogTitle>Confirmar Saída</DialogTitle> <Button variant="outline" onClick={cancelLogout}>
<DialogDescription> Cancelar
Deseja realmente sair do sistema? Você precisará fazer login </Button>
novamente para acessar sua conta. <Button variant="destructive" onClick={confirmLogout}>
</DialogDescription> <LogOut className="mr-2 h-4 w-4" />
</DialogHeader> Sair
<DialogFooter className="flex gap-2"> </Button>
<Button variant="outline" onClick={cancelLogout}> </DialogFooter>
Cancelar </DialogContent>
</Button> </Dialog>
<Button variant="destructive" onClick={confirmLogout}> </div>
<LogOut className="mr-2 h-4 w-4" /> );
Sair }
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</div>
);
}

393
components/manager-layout.tsx
View File

@ -1,6 +1,7 @@
"use client"; "use client";
import type React from "react"; import type React from "react";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { useRouter, usePathname } from "next/navigation"; import { useRouter, usePathname } from "next/navigation";
import Link from "next/link"; import Link from "next/link";
@ -8,251 +9,193 @@ import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
Dialog, import { Search, Bell, Calendar, Clock, User, LogOut, Menu, X, Home, FileText, ChevronLeft, ChevronRight } from "lucide-react";
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import {
Search,
Bell,
Calendar,
User,
LogOut,
ChevronLeft,
ChevronRight,
Home,
} from "lucide-react";
interface ManagerData { interface ManagerData {
id: string; id: string,
name: string; name: string,
email: string; email: string,
phone: string; phone: string,
cpf: string; cpf: string,
department: string; department: string,
permissions: object; permissions: object,
} }
interface PatientLayoutProps { interface PatientLayoutProps {
children: React.ReactNode; children: React.ReactNode;
} }
export default function ManagerLayout({ children }: PatientLayoutProps) { export default function ManagerLayout({ children }: PatientLayoutProps) {
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);
const router = useRouter(); const router = useRouter();
const pathname = usePathname(); const pathname = usePathname();
useEffect(() => { useEffect(() => {
const data = localStorage.getItem("managerData"); const data = localStorage.getItem("managerData");
if (data) { if (data) {
setManagerData(JSON.parse(data)); setManagerData(JSON.parse(data));
} else { } else {
router.push("/manager/login"); router.push("/manager/login");
} }
}, [router]); }, [router]);
// 🔥 Responsividade automática da sidebar const handleLogout = () => {
useEffect(() => { setShowLogoutDialog(true);
const handleResize = () => {
if (window.innerWidth < 1024) {
setSidebarCollapsed(true); // colapsa em telas pequenas (lg breakpoint ~ 1024px)
} else {
setSidebarCollapsed(false); // expande em desktop
}
}; };
handleResize(); // roda na primeira carga const confirmLogout = () => {
window.addEventListener("resize", handleResize); localStorage.removeItem("managerData");
setShowLogoutDialog(false);
router.push("/");
};
return () => window.removeEventListener("resize", handleResize); const cancelLogout = () => {
}, []); setShowLogoutDialog(false);
};
const handleLogout = () => setShowLogoutDialog(true); const menuItems = [
{
href: "#",
icon: Home,
label: "Dashboard",
// Botão para o dashboard do médico
},
{
href: "#",
icon: Calendar,
label: "Relatórios gerenciais",
// Botão para o dashboard do médico
},
{
href: "#",
icon: User,
label: "Gestão de Usuários",
// Botão para página do editor de laudo
},
{
href: "#",
icon: User,
label: "Gestão de Médicos",
// Botão para a página de visualização de todos os pacientes
},
{
href: "#",
icon: Calendar,
label: "Configurações",
// Botão para página de consultas marcadas do médico atual
},
];
const confirmLogout = () => { if (!managerData) {
localStorage.removeItem("managerData"); return <div>Carregando...</div>;
setShowLogoutDialog(false); }
router.push("/");
};
const cancelLogout = () => setShowLogoutDialog(false); return (
<div className="min-h-screen bg-gray-50 flex">
const menuItems = [ {/* Sidebar */}
{ href: "#", icon: Home, label: "Dashboard" }, <div className={`bg-white border-r border-gray-200 transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"} fixed left-0 top-0 h-screen flex flex-col z-10`}>
{ href: "#", icon: Calendar, label: "Relatórios gerenciais" }, <div className="p-4 border-b border-gray-200">
{ href: "#", icon: User, label: "Gestão de Usuários" }, <div className="flex items-center justify-between">
{ href: "#", icon: User, label: "Gestão de Médicos" }, {!sidebarCollapsed && (
{ href: "#", icon: Calendar, label: "Configurações" }, <div className="flex items-center gap-2">
]; <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
<div className="w-4 h-4 bg-white rounded-sm"></div>
if (!managerData) { </div>
return <div>Carregando...</div>; <span className="font-semibold text-gray-900">Hospital System</span>
} </div>
)}
return ( <Button variant="ghost" size="sm" onClick={() => setSidebarCollapsed(!sidebarCollapsed)} className="p-1">
<div className="min-h-screen bg-gray-50 flex"> {sidebarCollapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronLeft className="w-4 h-4" />}
{/* Sidebar */} </Button>
<div </div>
className={`bg-white border-r border-gray-200 transition-all duration-300 fixed top-0 h-screen flex flex-col z-30
${sidebarCollapsed ? "w-16" : "w-64"}`}
>
{/* Logo + collapse button */}
<div className="p-4 border-b border-gray-200 flex items-center justify-between">
{!sidebarCollapsed && (
<div className="flex items-center gap-2">
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
<div className="w-4 h-4 bg-white rounded-sm"></div>
</div>
<span className="font-semibold text-gray-900">
Hospital System
</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>
</div>
{/* Menu Items */}
<nav className="flex-1 p-2 overflow-y-auto">
{menuItems.map((item) => {
const Icon = item.icon;
const isActive =
pathname === item.href ||
(item.href !== "/" && pathname.startsWith(item.href));
return (
<Link key={item.href} href={item.href}>
<div
className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${
isActive
? "bg-blue-50 text-blue-600 border-r-2 border-blue-600"
: "text-gray-600 hover:bg-gray-50"
}`}
>
<Icon className="w-5 h-5 flex-shrink-0" />
{!sidebarCollapsed && (
<span className="font-medium">{item.label}</span>
)}
</div> </div>
</Link>
);
})}
</nav>
{/* Perfil no rodapé */} <nav className="flex-1 p-2 overflow-y-auto">
<div className="border-t p-4 mt-auto"> {menuItems.map((item) => {
<div className="flex items-center space-x-3 mb-4"> const Icon = item.icon;
<Avatar> const isActive = pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href));
<AvatarImage src="/placeholder.svg?height=40&width=40" />
<AvatarFallback>
{managerData.name
.split(" ")
.map((n) => n[0])
.join("")}
</AvatarFallback>
</Avatar>
{!sidebarCollapsed && (
<div className="flex-1 min-w-0">
<p className="text-sm font-medium text-gray-900 truncate">
{managerData.name}
</p>
<p className="text-xs text-gray-500 truncate">
{managerData.department}
</p>
</div>
)}
</div>
{/* Botão Sair - ajustado para responsividade */}
<Button
variant="outline"
size="sm"
className={
sidebarCollapsed
? "w-full bg-transparent flex justify-center items-center p-2" // Centraliza o ícone quando colapsado
: "w-full bg-transparent"
}
onClick={handleLogout}
>
<LogOut
className={sidebarCollapsed ? "h-5 w-5" : "mr-2 h-4 w-4"}
/>{" "}
{/* Remove margem quando colapsado */}
{!sidebarCollapsed && "Sair"}{" "}
{/* Mostra o texto apenas quando não está colapsado */}
</Button>
</div>
</div>
{/* Conteúdo principal */} return (
<div <Link key={item.href} href={item.href}>
className={`flex-1 flex flex-col transition-all duration-300 w-full <div className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600" : "text-gray-600 hover:bg-gray-50"}`}>
${sidebarCollapsed ? "ml-16" : "ml-64"}`} <Icon className="w-5 h-5 flex-shrink-0" />
> {!sidebarCollapsed && <span className="font-medium">{item.label}</span>}
{/* Header */} </div>
<header className="bg-white border-b border-gray-200 px-4 md:px-6 py-4 flex items-center justify-between"> </Link>
{/* Search */} );
<div className="flex items-center gap-4 flex-1 max-w-md"> })}
<div className="relative flex-1"> </nav>
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
<Input <div className="border-t p-4 mt-auto">
placeholder="Buscar paciente" <div className="flex items-center space-x-3 mb-4">
className="pl-10 bg-gray-50 border-gray-200" <Avatar>
/> <AvatarImage src="/placeholder.svg?height=40&width=40" />
<AvatarFallback>
{managerData.name
.split(" ")
.map((n) => n[0])
.join("")}
</AvatarFallback>
</Avatar>
<div className="flex-1 min-w-0">
<p className="text-sm font-medium text-gray-900 truncate">{managerData.name}</p>
<p className="text-xs text-gray-500 truncate">{managerData.department}</p>
</div>
</div>
<Button variant="outline" size="sm" className="w-full bg-transparent" onClick={handleLogout}>
<LogOut className="mr-2 h-4 w-4" />
Sair
</Button>
</div>
</div> </div>
</div>
{/* Notifications */} {/* Main Content */}
<div className="flex items-center gap-4 ml-auto"> <div className={`flex-1 flex flex-col transition-all duration-300 ${sidebarCollapsed ? "ml-16" : "ml-64"}`}>
<Button variant="ghost" size="sm" className="relative"> {/* Header */}
<Bell className="w-5 h-5" /> <header className="bg-white border-b border-gray-200 px-6 py-4">
<Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-red-500 text-white text-xs"> <div className="flex items-center justify-between">
1 <div className="flex items-center gap-4 flex-1 max-w-md">
</Badge> <div className="relative flex-1">
</Button> <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
</div> <Input placeholder="Buscar paciente" className="pl-10 bg-gray-50 border-gray-200" />
</header> </div>
</div>
{/* Page Content */} <div className="flex items-center gap-4">
<main className="flex-1 p-4 md:p-6">{children}</main> <Button variant="ghost" size="sm" className="relative">
</div> <Bell className="w-5 h-5" />
<Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-red-500 text-white text-xs">1</Badge>
</Button>
</div>
</div>
</header>
{/* Logout confirmation dialog */} {/* Page Content */}
<Dialog open={showLogoutDialog} onOpenChange={setShowLogoutDialog}> <main className="flex-1 p-6">{children}</main>
<DialogContent className="sm:max-w-md"> </div>
<DialogHeader>
<DialogTitle>Confirmar Saída</DialogTitle> {/* Logout confirmation dialog */}
<DialogDescription> <Dialog open={showLogoutDialog} onOpenChange={setShowLogoutDialog}>
Deseja realmente sair do sistema? Você precisará fazer login <DialogContent className="sm:max-w-md">
novamente para acessar sua conta. <DialogHeader>
</DialogDescription> <DialogTitle>Confirmar Saída</DialogTitle>
</DialogHeader> <DialogDescription>Deseja realmente sair do sistema? Você precisará fazer login novamente para acessar sua conta.</DialogDescription>
<DialogFooter className="flex gap-2"> </DialogHeader>
<Button variant="outline" onClick={cancelLogout}> <DialogFooter className="flex gap-2">
Cancelar <Button variant="outline" onClick={cancelLogout}>
</Button> Cancelar
<Button variant="destructive" onClick={confirmLogout}> </Button>
<LogOut className="mr-2 h-4 w-4" /> <Button variant="destructive" onClick={confirmLogout}>
Sair <LogOut className="mr-2 h-4 w-4" />
</Button> Sair
</DialogFooter> </Button>
</DialogContent> </DialogFooter>
</Dialog> </DialogContent>
</div> </Dialog>
); </div>
} );
}

152
components/patient-layout.tsx
View File

@ -1,6 +1,7 @@
"use client" "use client"
import type React from "react" import type React from "react"
import { useState, useEffect } from "react" import { useState, useEffect } from "react"
import Link from "next/link" import Link from "next/link"
import { useRouter, usePathname } from "next/navigation" import { useRouter, usePathname } from "next/navigation"
@ -11,11 +12,15 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { import {
Search, Search,
Bell, Bell,
Settings,
Users,
UserCheck,
Calendar,
Clock,
User, User,
LogOut, LogOut,
FileText, FileText,
Clock, BarChart3,
Calendar,
Home, Home,
ChevronLeft, ChevronLeft,
ChevronRight, ChevronRight,
@ -50,21 +55,6 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
const router = useRouter() const router = useRouter()
const pathname = usePathname() const pathname = usePathname()
// 🔹 Ajuste automático no resize
useEffect(() => {
const handleResize = () => {
if (window.innerWidth < 1024) {
setSidebarCollapsed(true) // colapsa no mobile
} else {
setSidebarCollapsed(false) // expande no desktop
}
}
handleResize()
window.addEventListener("resize", handleResize)
return () => window.removeEventListener("resize", handleResize)
}, [])
useEffect(() => { useEffect(() => {
const data = localStorage.getItem("patientData") const data = localStorage.getItem("patientData")
if (data) { if (data) {
@ -74,7 +64,9 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
} }
}, [router]) }, [router])
const handleLogout = () => setShowLogoutDialog(true) const handleLogout = () => {
setShowLogoutDialog(true)
}
const confirmLogout = () => { const confirmLogout = () => {
localStorage.removeItem("patientData") localStorage.removeItem("patientData")
@ -82,14 +74,36 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
router.push("/") router.push("/")
} }
const cancelLogout = () => setShowLogoutDialog(false) const cancelLogout = () => {
setShowLogoutDialog(false)
}
const menuItems = [ const menuItems = [
{ href: "/patient/dashboard", icon: Home, label: "Dashboard" }, {
{ href: "/patient/appointments", icon: Calendar, label: "Minhas Consultas" }, href: "/patient/dashboard",
{ href: "/patient/schedule", icon: Clock, label: "Agendar Consulta" }, icon: Home,
{ href: "/patient/reports", icon: FileText, label: "Meus Laudos" }, label: "Dashboard",
{ href: "/patient/profile", icon: User, label: "Meus Dados" }, },
{
href: "/patient/appointments",
icon: Calendar,
label: "Minhas Consultas",
},
{
href: "/patient/schedule",
icon: Clock,
label: "Agendar Consulta",
},
{
href: "/patient/reports",
icon: FileText,
label: "Meus Laudos",
},
{
href: "/patient/profile",
icon: User,
label: "Meus Dados",
},
] ]
if (!patientData) { if (!patientData) {
@ -99,12 +113,7 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
return ( return (
<div className="min-h-screen bg-gray-50 flex"> <div className="min-h-screen bg-gray-50 flex">
{/* Sidebar */} {/* Sidebar */}
<div <div className={`bg-white border-r border-gray-200 transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"} fixed left-0 top-0 h-screen flex flex-col z-10`}>
className={`bg-white border-r border-gray-200 transition-all duration-300 ${
sidebarCollapsed ? "w-16" : "w-64"
} fixed left-0 top-0 h-screen flex flex-col z-10`}
>
{/* Header da Sidebar */}
<div className="p-4 border-b border-gray-200"> <div className="p-4 border-b border-gray-200">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
{!sidebarCollapsed && ( {!sidebarCollapsed && (
@ -112,54 +121,35 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center"> <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
<div className="w-4 h-4 bg-white rounded-sm"></div> <div className="w-4 h-4 bg-white rounded-sm"></div>
</div> </div>
<span className="font-semibold text-gray-900"> <span className="font-semibold text-gray-900">Hospital System</span>
Hospital System
</span>
</div> </div>
)} )}
<Button <Button variant="ghost" size="sm" onClick={() => setSidebarCollapsed(!sidebarCollapsed)} className="p-1">
variant="ghost" {sidebarCollapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronLeft className="w-4 h-4" />}
size="sm"
onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
className="p-1"
>
{sidebarCollapsed ? (
<ChevronRight className="w-4 h-4" />
) : (
<ChevronLeft className="w-4 h-4" />
)}
</Button> </Button>
</div> </div>
</div> </div>
{/* Menu */}
<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 = const isActive = pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href))
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 <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-blue-50 text-blue-600 border-r-2 border-blue-600" : "text-gray-600 hover:bg-gray-50"
? "bg-blue-50 text-blue-600 border-r-2 border-blue-600"
: "text-gray-600 hover:bg-gray-50"
}`} }`}
> >
<Icon className="w-5 h-5 flex-shrink-0" /> <Icon className="w-5 h-5 flex-shrink-0" />
{!sidebarCollapsed && ( {!sidebarCollapsed && <span className="font-medium">{item.label}</span>}
<span className="font-medium">{item.label}</span>
)}
</div> </div>
</Link> </Link>
) )
})} })}
</nav> </nav>
{/* Rodapé com Avatar e Logout */}
<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">
<Avatar> <Avatar>
@ -171,54 +161,27 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
.join("")} .join("")}
</AvatarFallback> </AvatarFallback>
</Avatar> </Avatar>
{!sidebarCollapsed && ( <div className="flex-1 min-w-0">
<div className="flex-1 min-w-0"> <p className="text-sm font-medium text-gray-900 truncate">{patientData.name}</p>
<p className="text-sm font-medium text-gray-900 truncate"> <p className="text-xs text-gray-500 truncate">{patientData.email}</p>
{patientData.name} </div>
</p>
<p className="text-xs text-gray-500 truncate">
{patientData.email}
</p>
</div>
)}
</div> </div>
{/* Botão Sair - ajustado para responsividade */} <Button variant="outline" size="sm" className="w-full bg-transparent" onClick={handleLogout}>
<Button <LogOut className="mr-2 h-4 w-4" />
variant="outline" Sair
size="sm"
className={
sidebarCollapsed
? "w-full bg-transparent flex justify-center items-center p-2" // Centraliza o ícone quando colapsado
: "w-full bg-transparent"
}
onClick={handleLogout}
>
<LogOut
className={sidebarCollapsed ? "h-5 w-5" : "mr-2 h-4 w-4"}
/>{" "}
{/* Remove margem quando colapsado */}
{!sidebarCollapsed && "Sair"}{" "}
{/* Mostra o texto apenas quando não está colapsado */}
</Button> </Button>
</div> </div>
</div> </div>
{/* Main Content */} {/* Main Content */}
<div <div className={`flex-1 flex flex-col transition-all duration-300 ${sidebarCollapsed ? "ml-16" : "ml-64"}`}>
className={`flex-1 flex flex-col transition-all duration-300 ${
sidebarCollapsed ? "ml-16" : "ml-64"
}`}
>
{/* Header */} {/* Header */}
<header className="bg-white border-b border-gray-200 px-6 py-4"> <header className="bg-white border-b border-gray-200 px-6 py-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-4 flex-1 max-w-md"> <div className="flex items-center gap-4 flex-1 max-w-md">
<div className="relative flex-1"> <div className="relative flex-1">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" /> <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
<Input <Input placeholder="Buscar paciente" className="pl-10 bg-gray-50 border-gray-200" />
placeholder="Buscar paciente"
className="pl-10 bg-gray-50 border-gray-200"
/>
</div> </div>
</div> </div>
@ -243,8 +206,7 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
<DialogHeader> <DialogHeader>
<DialogTitle>Confirmar Saída</DialogTitle> <DialogTitle>Confirmar Saída</DialogTitle>
<DialogDescription> <DialogDescription>
Deseja realmente sair do sistema? Você precisará fazer login Deseja realmente sair do sistema? Você precisará fazer login novamente para acessar sua conta.
novamente para acessar sua conta.
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<DialogFooter className="flex gap-2"> <DialogFooter className="flex gap-2">
@ -260,4 +222,4 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
</Dialog> </Dialog>
</div> </div>
) )
} }

179
components/secretary-layout.tsx
View File

@ -1,10 +1,10 @@
"use client" "use client"
import type React from "react" import type React from "react"
import { useState, useEffect } from "react" import { useState, useEffect } from "react"
import { useRouter, usePathname } from "next/navigation" import { useRouter, usePathname } from "next/navigation"
import Link from "next/link" import Link from "next/link"
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input" import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge" import { Badge } from "@/components/ui/badge"
@ -17,28 +17,17 @@ import {
DialogHeader, DialogHeader,
DialogTitle, DialogTitle,
} from "@/components/ui/dialog" } from "@/components/ui/dialog"
import { Search, Bell, Calendar, Clock, User, LogOut, Menu, X, Home, FileText, ChevronLeft, ChevronRight } from "lucide-react"
import {
Search,
Bell,
Calendar,
Clock,
User,
LogOut,
Home,
ChevronLeft,
ChevronRight,
} from "lucide-react"
interface SecretaryData { interface SecretaryData {
id: string id: string,
name: string name: string,
email: string email: string,
phone: string phone: string,
cpf: string cpf: string,
employeeId: string employeeId: string,
department: string department: string,
permissions: object permissions: object,
} }
interface PatientLayoutProps { interface PatientLayoutProps {
@ -46,58 +35,70 @@ interface PatientLayoutProps {
} }
export default function SecretaryLayout({ children }: PatientLayoutProps) { export default function SecretaryLayout({ children }: PatientLayoutProps) {
const [secretaryData, setSecretaryData] = useState<SecretaryData | null>(null)
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()
const pathname = usePathname() const pathname = usePathname()
// 🔹 Colapsar no mobile e expandir no desktop automaticamente
useEffect(() => { useEffect(() => {
const handleResize = () => { const data = localStorage.getItem("secretaryData")
if (window.innerWidth < 1024) { if (data) {
setSidebarCollapsed(true) setSecretaryData(JSON.parse(data))
} else { } else {
setSidebarCollapsed(false) router.push("/patient/login")
}
} }
handleResize() }, [router])
window.addEventListener("resize", handleResize)
return () => window.removeEventListener("resize", handleResize) const handleLogout = () => {
}, []) setShowLogoutDialog(true)
}
const handleLogout = () => setShowLogoutDialog(true)
const confirmLogout = () => { const confirmLogout = () => {
localStorage.removeItem("secretaryData")
setShowLogoutDialog(false) setShowLogoutDialog(false)
router.push("/") router.push("/")
} }
const cancelLogout = () => setShowLogoutDialog(false)
const cancelLogout = () => {
setShowLogoutDialog(false)
}
const menuItems = [ const menuItems = [
{ href: "##", icon: Home, label: "Dashboard" }, {
{ href: "###", icon: Calendar, label: "Consultas" }, href: "##",
{ href: "#", icon: Clock, label: "Agendar Consulta" }, icon: Home,
{ href: "/secretary/pacientes", icon: User, label: "Pacientes" }, label: "Dashboard",
// Botão para o dashboard da secretária
},
{
href: "###",
icon: Calendar,
label: "Consultas",
// Botão para página de consultas marcadas
},
{
href: "#",
icon: Clock,
label: "Agendar Consulta",
// Botão para página de agendamento da consulta para o paciente
},
{
href: "/secretary/pacientes",
icon: User,
label: "Pacientes",
// Botão para a página de visualização de todos os pacientes
},
] ]
const secretaryData: SecretaryData = { if (!secretaryData) {
id: "1", return <div>Carregando...</div>
name: "Secretária Exemplo",
email: "secretaria@hospital.com",
phone: "999999999",
cpf: "000.000.000-00",
employeeId: "12345",
department: "Atendimento",
permissions: {},
} }
return ( return (
<div className="min-h-screen bg-gray-50 flex"> <div className="min-h-screen bg-gray-50 flex">
{/* Sidebar */} {/* Sidebar */}
<div <div className={`bg-white border-r border-gray-200 transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"} fixed left-0 top-0 h-screen flex flex-col z-10`}>
className={`bg-white border-r border-gray-200 transition-all duration-300
${sidebarCollapsed ? "w-16" : "w-64"}
fixed left-0 top-0 h-screen flex flex-col z-10`}
>
<div className="p-4 border-b border-gray-200"> <div className="p-4 border-b border-gray-200">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
{!sidebarCollapsed && ( {!sidebarCollapsed && (
@ -108,17 +109,8 @@ export default function SecretaryLayout({ children }: PatientLayoutProps) {
<span className="font-semibold text-gray-900">Hospital System</span> <span className="font-semibold text-gray-900">Hospital System</span>
</div> </div>
)} )}
<Button <Button variant="ghost" size="sm" onClick={() => setSidebarCollapsed(!sidebarCollapsed)} className="p-1">
variant="ghost" {sidebarCollapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronLeft className="w-4 h-4" />}
size="sm"
onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
className="p-1"
>
{sidebarCollapsed ? (
<ChevronRight className="w-4 h-4" />
) : (
<ChevronLeft className="w-4 h-4" />
)}
</Button> </Button>
</div> </div>
</div> </div>
@ -126,16 +118,13 @@ export default function SecretaryLayout({ children }: PatientLayoutProps) {
<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 = const isActive = pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href))
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 <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-blue-50 text-blue-600 border-r-2 border-blue-600" : "text-gray-600 hover:bg-gray-50"
? "bg-blue-50 text-blue-600 border-r-2 border-blue-600"
: "text-gray-600 hover:bg-gray-50"
}`} }`}
> >
<Icon className="w-5 h-5 flex-shrink-0" /> <Icon className="w-5 h-5 flex-shrink-0" />
@ -157,63 +146,31 @@ export default function SecretaryLayout({ children }: PatientLayoutProps) {
.join("")} .join("")}
</AvatarFallback> </AvatarFallback>
</Avatar> </Avatar>
{!sidebarCollapsed && ( <div className="flex-1 min-w-0">
<div className="flex-1 min-w-0"> <p className="text-sm font-medium text-gray-900 truncate">{secretaryData.name}</p>
<p className="text-sm font-medium text-gray-900 truncate"> <p className="text-xs text-gray-500 truncate">{secretaryData.email}</p>
{secretaryData.name} </div>
</p>
<p className="text-xs text-gray-500 truncate">{secretaryData.email}</p>
</div>
)}
</div> </div>
{/* Botão Sair - ajustado para responsividade */} <Button variant="outline" size="sm" className="w-full bg-transparent" onClick={handleLogout}>
<Button <LogOut className="mr-2 h-4 w-4" />
variant="outline" Sair
size="sm"
className={
sidebarCollapsed
? "w-full bg-transparent flex justify-center items-center p-2" // Centraliza o ícone quando colapsado
: "w-full bg-transparent"
}
onClick={handleLogout}
>
<LogOut
className={sidebarCollapsed ? "h-5 w-5" : "mr-2 h-4 w-4"}
/>{" "}
{/* Remove margem quando colapsado */}
{!sidebarCollapsed && "Sair"}{" "}
{/* Mostra o texto apenas quando não está colapsado */}
</Button> </Button>
</div> </div>
</div> </div>
{/* Main Content */} {/* Main Content */}
<div <div className={`flex-1 flex flex-col transition-all duration-300 ${sidebarCollapsed ? "ml-16" : "ml-64"}`}>
className={`flex-1 flex flex-col transition-all duration-300 ${
sidebarCollapsed ? "ml-16" : "ml-64"
}`}
>
{/* Header */} {/* Header */}
<header className="bg-white border-b border-gray-200 px-6 py-4"> <header className="bg-white border-b border-gray-200 px-6 py-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-4 flex-1 max-w-md"> <div className="flex items-center gap-4 flex-1 max-w-md">
<div className="relative flex-1"> <div className="relative flex-1">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" /> <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
<Input <Input placeholder="Buscar paciente" className="pl-10 bg-gray-50 border-gray-200" />
placeholder="Buscar paciente"
className="pl-10 bg-gray-50 border-gray-200"
/>
</div> </div>
</div> </div>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
{/* Este botão no header parece ter sido uma cópia do botão "Sair" da sidebar.
Removi a lógica de sidebarCollapsed aqui, pois o header é independente.
Se a intenção era ter um botão de logout no header, ele não deve ser afetado pela sidebar.
Ajustei para ser um botão de sino de notificação, como nos exemplos anteriores,
já que você tem o ícone Bell importado e uma badge para notificação.
Se você quer um botão de LogOut aqui, por favor, me avise!
*/}
<Button variant="ghost" size="sm" className="relative"> <Button variant="ghost" size="sm" className="relative">
<Bell className="w-5 h-5" /> <Bell className="w-5 h-5" />
<Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-red-500 text-white text-xs"> <Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-red-500 text-white text-xs">
@ -250,4 +207,4 @@ export default function SecretaryLayout({ children }: PatientLayoutProps) {
</Dialog> </Dialog>
</div> </div>
) )
} }