327 lines
11 KiB
TypeScript
327 lines
11 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
import {
|
|
LayoutDashboard,
|
|
LayoutTemplate,
|
|
LifeBuoy,
|
|
Ticket,
|
|
PlayCircle,
|
|
BarChart3,
|
|
TrendingUp,
|
|
PanelsTopLeft,
|
|
UserCog,
|
|
Building,
|
|
Building2,
|
|
Waypoints,
|
|
Clock4,
|
|
Timer,
|
|
MonitorCog,
|
|
UserPlus,
|
|
ChevronDown,
|
|
ShieldCheck,
|
|
Users,
|
|
} from "lucide-react"
|
|
import { usePathname } from "next/navigation"
|
|
import Link from "next/link"
|
|
|
|
import { SearchForm } from "@/components/search-form"
|
|
import { SidebarBrand } from "@/components/sidebar-brand"
|
|
import {
|
|
Sidebar,
|
|
SidebarContent,
|
|
SidebarFooter,
|
|
SidebarGroup,
|
|
SidebarGroupContent,
|
|
SidebarGroupLabel,
|
|
SidebarHeader,
|
|
SidebarMenu,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
SidebarRail,
|
|
} from "@/components/ui/sidebar"
|
|
import { Skeleton } from "@/components/ui/skeleton"
|
|
import { NavUser } from "@/components/nav-user"
|
|
import { useAuth } from "@/lib/auth-client"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
import type { LucideIcon } from "lucide-react"
|
|
|
|
type NavRoleRequirement = "staff" | "admin"
|
|
|
|
type NavigationItem = {
|
|
title: string
|
|
url: string
|
|
icon?: LucideIcon
|
|
requiredRole?: NavRoleRequirement
|
|
exact?: boolean
|
|
children?: NavigationItem[]
|
|
}
|
|
|
|
type NavigationGroup = {
|
|
title: string
|
|
requiredRole?: NavRoleRequirement
|
|
items: NavigationItem[]
|
|
}
|
|
|
|
const navigation: NavigationGroup[] = [
|
|
{
|
|
title: "Operação",
|
|
items: [
|
|
{ title: "Dashboard", url: "/dashboard", icon: LayoutDashboard, requiredRole: "staff" },
|
|
{
|
|
title: "Tickets",
|
|
url: "/tickets",
|
|
icon: Ticket,
|
|
requiredRole: "staff",
|
|
children: [{ title: "Resolvidos", url: "/tickets/resolved", icon: ShieldCheck, requiredRole: "staff" }],
|
|
},
|
|
{ title: "Visualizações", url: "/views", icon: PanelsTopLeft, requiredRole: "staff" },
|
|
{ title: "Modo Play", url: "/play", icon: PlayCircle, requiredRole: "staff" },
|
|
],
|
|
},
|
|
{
|
|
title: "Relatórios",
|
|
requiredRole: "staff",
|
|
items: [
|
|
{ title: "Dashboards", url: "/dashboards", icon: LayoutTemplate, requiredRole: "staff" },
|
|
{ title: "Produtividade", url: "/reports/sla", icon: TrendingUp, requiredRole: "staff" },
|
|
{ title: "Qualidade (CSAT)", url: "/reports/csat", icon: LifeBuoy, requiredRole: "staff" },
|
|
{ title: "Backlog", url: "/reports/backlog", icon: BarChart3, requiredRole: "staff" },
|
|
{ title: "Empresas", url: "/reports/company", icon: Building2, requiredRole: "staff" },
|
|
{ title: "Horas", url: "/reports/hours", icon: Clock4, requiredRole: "staff" },
|
|
],
|
|
},
|
|
{
|
|
title: "Administração",
|
|
requiredRole: "admin",
|
|
items: [
|
|
{
|
|
title: "Administração",
|
|
url: "/admin",
|
|
icon: UserPlus,
|
|
requiredRole: "admin",
|
|
exact: true,
|
|
},
|
|
{ title: "Filas", url: "/admin/channels", icon: Waypoints, requiredRole: "admin" },
|
|
{ title: "Times & papéis", url: "/admin/teams", icon: UserCog, requiredRole: "admin" },
|
|
{
|
|
title: "Empresas",
|
|
url: "/admin/companies",
|
|
icon: Building,
|
|
requiredRole: "admin",
|
|
},
|
|
{ title: "Usuários", url: "/admin/users", icon: Users, requiredRole: "admin" },
|
|
{ title: "Dispositivos", url: "/admin/devices", icon: MonitorCog, requiredRole: "admin" },
|
|
{ title: "SLAs", url: "/admin/slas", icon: Timer, requiredRole: "admin" },
|
|
],
|
|
},
|
|
// Removido grupo "Conta" (Configurações) para evitar redundância com o menu do usuário no rodapé
|
|
]
|
|
|
|
export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
|
|
const pathname = usePathname()
|
|
const { session, isLoading, isAdmin, isStaff } = useAuth()
|
|
const [isHydrated, setIsHydrated] = React.useState(false)
|
|
const canAccess = React.useCallback(
|
|
(requiredRole?: NavRoleRequirement) => {
|
|
if (!requiredRole) return true
|
|
if (requiredRole === "admin") return isAdmin
|
|
if (requiredRole === "staff") return isStaff
|
|
return false
|
|
},
|
|
[isAdmin, isStaff]
|
|
)
|
|
const initialExpanded = React.useMemo(() => {
|
|
const open = new Set<string>()
|
|
navigation.forEach((group) => {
|
|
group.items.forEach((item) => {
|
|
if (!item.children || item.children.length === 0) return
|
|
const shouldOpen = item.children.some((child) => {
|
|
if (!canAccess(child.requiredRole)) return false
|
|
return pathname === child.url || pathname.startsWith(`${child.url}/`)
|
|
})
|
|
if (shouldOpen) {
|
|
open.add(item.title)
|
|
}
|
|
})
|
|
})
|
|
return open
|
|
}, [pathname, canAccess])
|
|
const [expanded, setExpanded] = React.useState<Set<string>>(initialExpanded)
|
|
|
|
React.useEffect(() => {
|
|
setExpanded((prev) => {
|
|
const next = new Set(prev)
|
|
initialExpanded.forEach((key) => next.add(key))
|
|
return next
|
|
})
|
|
}, [initialExpanded])
|
|
|
|
React.useEffect(() => {
|
|
setIsHydrated(true)
|
|
}, [])
|
|
|
|
function isActive(item: NavigationItem) {
|
|
const { url, exact } = item
|
|
if (!pathname) return false
|
|
if (url === "/dashboard" && pathname === "/") {
|
|
return true
|
|
}
|
|
if (exact) {
|
|
return pathname === url
|
|
}
|
|
return pathname === url || pathname.startsWith(`${url}/`)
|
|
}
|
|
|
|
const toggleExpanded = React.useCallback((title: string) => {
|
|
setExpanded((prev) => {
|
|
const next = new Set(prev)
|
|
if (next.has(title)) {
|
|
next.delete(title)
|
|
} else {
|
|
next.add(title)
|
|
}
|
|
return next
|
|
})
|
|
}, [])
|
|
|
|
if (!isHydrated) {
|
|
return (
|
|
<Sidebar {...props}>
|
|
<SidebarHeader className="gap-3">
|
|
<Skeleton className="h-12 w-full rounded-lg" />
|
|
<Skeleton className="h-9 w-full rounded-lg" />
|
|
</SidebarHeader>
|
|
<SidebarContent>
|
|
{[0, 1, 2].map((group) => (
|
|
<SidebarGroup key={group}>
|
|
<SidebarGroupLabel>
|
|
<Skeleton className="h-3 w-20 rounded" />
|
|
</SidebarGroupLabel>
|
|
<SidebarGroupContent>
|
|
<div className="space-y-2">
|
|
{[0, 1, 2].map((item) => (
|
|
<Skeleton key={item} className="h-9 w-full rounded-md" />
|
|
))}
|
|
</div>
|
|
</SidebarGroupContent>
|
|
</SidebarGroup>
|
|
))}
|
|
</SidebarContent>
|
|
<SidebarRail />
|
|
</Sidebar>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Sidebar {...props}>
|
|
<SidebarHeader className="gap-3">
|
|
<SidebarBrand
|
|
logoSrc="/logo-raven.png"
|
|
logoAlt="Logotipo Raven"
|
|
title="Raven"
|
|
subtitle="Por Rever Tecnologia"
|
|
/>
|
|
<SearchForm placeholder="Buscar tickets" />
|
|
</SidebarHeader>
|
|
<SidebarContent>
|
|
{navigation.map((group) => {
|
|
if (!canAccess(group.requiredRole)) return null
|
|
const visibleItems = group.items.filter((item) => canAccess(item.requiredRole))
|
|
if (visibleItems.length === 0) return null
|
|
return (
|
|
<SidebarGroup key={group.title}>
|
|
<SidebarGroupLabel>{group.title}</SidebarGroupLabel>
|
|
<SidebarGroupContent>
|
|
<SidebarMenu>
|
|
{visibleItems.map((item) => {
|
|
if (item.children && item.children.length > 0) {
|
|
const childItems = item.children.filter((child) => canAccess(child.requiredRole))
|
|
const isExpanded = expanded.has(item.title)
|
|
const isChildActive = childItems.some((child) => isActive(child))
|
|
const parentActive = isActive(item) || isChildActive
|
|
|
|
return (
|
|
<React.Fragment key={item.title}>
|
|
<SidebarMenuItem>
|
|
<SidebarMenuButton asChild isActive={parentActive}>
|
|
<Link href={item.url} className={cn("gap-2", "relative pr-7") }>
|
|
{item.icon ? <item.icon className="size-4" /> : null}
|
|
<span className="flex-1">{item.title}</span>
|
|
<span
|
|
role="button"
|
|
aria-label={isExpanded ? "Recolher submenu" : "Expandir submenu"}
|
|
onClick={(event) => {
|
|
event.preventDefault()
|
|
event.stopPropagation()
|
|
toggleExpanded(item.title)
|
|
}}
|
|
className={cn(
|
|
"absolute right-1.5 top-1/2 inline-flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md text-neutral-500 transition hover:bg-slate-200 hover:text-neutral-700",
|
|
isExpanded && "rotate-180"
|
|
)}
|
|
>
|
|
<ChevronDown className="size-3" />
|
|
</span>
|
|
</Link>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
{isExpanded
|
|
? childItems.map((child) => (
|
|
<SidebarMenuItem key={`${item.title}-${child.title}`}>
|
|
<SidebarMenuButton asChild isActive={isActive(child)}>
|
|
<Link href={child.url} className="gap-2 pl-7 text-sm">
|
|
{child.icon ? <child.icon className="size-3.5 text-neutral-500" /> : null}
|
|
<span>{child.title}</span>
|
|
</Link>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
))
|
|
: null}
|
|
</React.Fragment>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<SidebarMenuItem key={item.title}>
|
|
<SidebarMenuButton asChild isActive={isActive(item)}>
|
|
<Link href={item.url} className="gap-2">
|
|
{item.icon ? <item.icon className="size-4" /> : null}
|
|
<span>{item.title}</span>
|
|
</Link>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
)
|
|
})}
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</SidebarGroup>
|
|
)
|
|
})}
|
|
</SidebarContent>
|
|
<SidebarFooter>
|
|
{isLoading ? (
|
|
<div className="flex items-center gap-3 rounded-lg border border-border/70 bg-sidebar p-3 shadow-sm">
|
|
<Skeleton className="h-9 w-9 rounded-lg" />
|
|
<div className="flex-1 space-y-1">
|
|
<Skeleton className="h-3.5 w-24 rounded" />
|
|
<Skeleton className="h-3 w-32 rounded" />
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<NavUser
|
|
user={{
|
|
name: session?.user?.name,
|
|
email: session?.user?.email,
|
|
avatarUrl: session?.user?.avatarUrl ?? undefined,
|
|
}}
|
|
/>
|
|
)}
|
|
{/* Dev debug removido */}
|
|
</SidebarFooter>
|
|
<SidebarRail />
|
|
</Sidebar>
|
|
)
|
|
}
|
|
|