158 lines
5 KiB
TypeScript
158 lines
5 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
import {
|
|
LayoutDashboard,
|
|
LifeBuoy,
|
|
Ticket,
|
|
PlayCircle,
|
|
BookOpen,
|
|
BarChart3,
|
|
Gauge,
|
|
PanelsTopLeft,
|
|
Users,
|
|
Waypoints,
|
|
Timer,
|
|
Plug,
|
|
Layers3,
|
|
UserPlus,
|
|
Settings,
|
|
} from "lucide-react"
|
|
import { usePathname } from "next/navigation"
|
|
|
|
import { SearchForm } from "@/components/search-form"
|
|
import { VersionSwitcher } from "@/components/version-switcher"
|
|
import {
|
|
Sidebar,
|
|
SidebarContent,
|
|
SidebarGroup,
|
|
SidebarGroupContent,
|
|
SidebarGroupLabel,
|
|
SidebarHeader,
|
|
SidebarMenu,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
SidebarRail,
|
|
} from "@/components/ui/sidebar"
|
|
import { useAuth } from "@/lib/auth-client"
|
|
|
|
import type { LucideIcon } from "lucide-react"
|
|
|
|
type NavRoleRequirement = "staff" | "admin" | "customer"
|
|
|
|
type NavigationItem = {
|
|
title: string
|
|
url: string
|
|
icon: LucideIcon
|
|
requiredRole?: NavRoleRequirement
|
|
}
|
|
|
|
type NavigationGroup = {
|
|
title: string
|
|
requiredRole?: NavRoleRequirement
|
|
items: NavigationItem[]
|
|
}
|
|
|
|
const navigation: { versions: string[]; navMain: NavigationGroup[] } = {
|
|
versions: ["0.0.1"],
|
|
navMain: [
|
|
{
|
|
title: "Operação",
|
|
items: [
|
|
{ title: "Dashboard", url: "/dashboard", icon: LayoutDashboard, requiredRole: "staff" },
|
|
{ title: "Tickets", url: "/tickets", icon: Ticket, requiredRole: "staff" },
|
|
{ title: "Visualizações", url: "/views", icon: PanelsTopLeft, requiredRole: "staff" },
|
|
{ title: "Modo Play", url: "/play", icon: PlayCircle, requiredRole: "staff" },
|
|
{ title: "Base de conhecimento", url: "/knowledge", icon: BookOpen, requiredRole: "staff" },
|
|
],
|
|
},
|
|
{
|
|
title: "Relatórios",
|
|
requiredRole: "staff",
|
|
items: [
|
|
{ title: "SLA e produtividade", url: "/reports/sla", icon: Gauge, requiredRole: "staff" },
|
|
{ title: "Qualidade (CSAT)", url: "/reports/csat", icon: LifeBuoy, requiredRole: "staff" },
|
|
{ title: "Backlog", url: "/reports/backlog", icon: BarChart3, requiredRole: "staff" },
|
|
],
|
|
},
|
|
{
|
|
title: "Administração",
|
|
requiredRole: "admin",
|
|
items: [
|
|
{ title: "Convites e acessos", url: "/admin", icon: UserPlus, requiredRole: "admin" },
|
|
{ title: "Canais & roteamento", url: "/admin/channels", icon: Waypoints, requiredRole: "admin" },
|
|
{ title: "Times & papéis", url: "/admin/teams", icon: Users, requiredRole: "admin" },
|
|
{ title: "Campos personalizados", url: "/admin/fields", icon: Layers3, requiredRole: "admin" },
|
|
{ title: "SLAs", url: "/admin/slas", icon: Timer, requiredRole: "admin" },
|
|
{ title: "Integrações", url: "/admin/integrations", icon: Plug, requiredRole: "admin" },
|
|
],
|
|
},
|
|
{
|
|
title: "Conta",
|
|
requiredRole: "staff",
|
|
items: [{ title: "Configurações", url: "/settings", icon: Settings, requiredRole: "staff" }],
|
|
},
|
|
],
|
|
}
|
|
|
|
export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
|
|
const pathname = usePathname()
|
|
const { isAdmin, isStaff, isCustomer } = useAuth()
|
|
|
|
function isActive(url: string) {
|
|
if (!pathname) return false
|
|
if (url === "/dashboard" && pathname === "/") {
|
|
return true
|
|
}
|
|
return pathname === url || pathname.startsWith(`${url}/`)
|
|
}
|
|
|
|
function canAccess(requiredRole?: NavRoleRequirement) {
|
|
if (!requiredRole) return true
|
|
if (requiredRole === "admin") return isAdmin
|
|
if (requiredRole === "staff") return isStaff
|
|
if (requiredRole === "customer") return isCustomer
|
|
return false
|
|
}
|
|
|
|
return (
|
|
<Sidebar {...props}>
|
|
<SidebarHeader className="gap-3">
|
|
<VersionSwitcher
|
|
label="Sistema de chamados"
|
|
versions={[...navigation.versions]}
|
|
defaultVersion={navigation.versions[0]}
|
|
/>
|
|
<SearchForm placeholder="Buscar tickets, macros ou artigos" />
|
|
</SidebarHeader>
|
|
<SidebarContent>
|
|
{navigation.navMain.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) => (
|
|
<SidebarMenuItem key={item.title}>
|
|
<SidebarMenuButton asChild isActive={isActive(item.url)}>
|
|
<a href={item.url} className="gap-2">
|
|
<item.icon className="size-4" />
|
|
<span>{item.title}</span>
|
|
</a>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
))}
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</SidebarGroup>
|
|
)
|
|
})}
|
|
</SidebarContent>
|
|
<SidebarRail />
|
|
</Sidebar>
|
|
)
|
|
}
|
|
|