108 lines
3.2 KiB
TypeScript
108 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { useAuth } from "@/lib/auth";
|
|
|
|
export default function Sidebar() {
|
|
const pathname = usePathname();
|
|
const { user, logout } = useAuth();
|
|
|
|
const navItems = [
|
|
// Dashboard para todos: el equipo ve el global (o su área) y los
|
|
// usuarios normales ven solo sus tickets (sin mensaje de permisos).
|
|
{ href: "/", icon: "bi-speedometer2", label: "Dashboard" },
|
|
{ href: "/tickets", icon: "bi-ticket-detailed", label: "Tickets" },
|
|
{ href: "/knowledge-base", icon: "bi-journal-bookmark", label: "Knowledge Base" },
|
|
];
|
|
|
|
const configItems = [
|
|
{ href: "/settings/departments", icon: "bi-diagram-3", label: "Departamentos" },
|
|
{ href: "/settings/team", icon: "bi-people", label: "Equipo" },
|
|
{ href: "/settings/sla", icon: "bi-stopwatch", label: "SLA" },
|
|
{ href: "/settings/email", icon: "bi-envelope", label: "Correo" },
|
|
];
|
|
|
|
const isActive = (href: string) =>
|
|
pathname === href || (href !== "/" && pathname.startsWith(href));
|
|
|
|
const fullName = user ? `${user.nombres} ${user.apPaterno}` : "Usuario";
|
|
const isAdmin = user?.role === "admin";
|
|
const roleLabel =
|
|
user?.role === "admin"
|
|
? "Administrador"
|
|
: user?.role === "supervisor"
|
|
? "Supervisor"
|
|
: user?.role === "agent"
|
|
? "Agente"
|
|
: "Usuario";
|
|
const initials = user?.nombres
|
|
?.split(" ")
|
|
.map((n: string) => n[0])
|
|
.join("")
|
|
.toUpperCase()
|
|
.slice(0, 2) || "U";
|
|
|
|
return (
|
|
<aside className="sidebar" id="sidebar">
|
|
<div className="sidebar-brand">
|
|
<i className="bi bi-headset fs-3"></i>
|
|
<h5>HelpDesk ICHN</h5>
|
|
</div>
|
|
|
|
<nav className="flex-column mt-3">
|
|
{navItems.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={`nav-link ${
|
|
pathname === item.href ||
|
|
(item.href !== "/" && pathname.startsWith(item.href))
|
|
? "active"
|
|
: ""
|
|
}`}
|
|
>
|
|
<i className={`bi ${item.icon}`}></i>
|
|
<span>{item.label}</span>
|
|
</Link>
|
|
))}
|
|
{isAdmin && (
|
|
<>
|
|
<div
|
|
className="text-uppercase mt-3 mb-1 px-3"
|
|
style={{ fontSize: "0.7rem", letterSpacing: "0.08em", opacity: 0.6 }}
|
|
>
|
|
Configuración
|
|
</div>
|
|
{configItems.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={`nav-link ${isActive(item.href) ? "active" : ""}`}
|
|
>
|
|
<i className={`bi ${item.icon}`}></i>
|
|
<span>{item.label}</span>
|
|
</Link>
|
|
))}
|
|
</>
|
|
)}
|
|
</nav>
|
|
|
|
<div className="sidebar-user">
|
|
<div className="avatar">{initials}</div>
|
|
<div className="sidebar-user-info">
|
|
<div className="name">{fullName}</div>
|
|
<div className="role">{roleLabel}</div>
|
|
</div>
|
|
<button
|
|
onClick={logout}
|
|
className="btn btn-link text-white p-1"
|
|
title="Cerrar sesión"
|
|
>
|
|
<i className="bi bi-box-arrow-right fs-5"></i>
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|