esdras/sistema-de-chamados
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: secure convex admin flows with real metrics\n\nCo-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>

Browse source
This commit is contained in:
esdrasrenan 2025-10-05 19:59:24 -03:00
parent 0ec5b49e8a
commit 29a647f6c6
43 changed files with 4992 additions and 363 deletions
Download patch file Download diff file Expand all files Collapse all files

142
web/src/components/app-sidebar.tsx
View file

@ -15,6 +15,7 @@ import {
Timer,
Plug,
Layers3,
Settings,
} from "lucide-react"
import { usePathname } from "next/navigation"
@ -32,43 +33,69 @@ import {
SidebarMenuItem,
SidebarRail,
} from "@/components/ui/sidebar"
import { useAuth } from "@/lib/auth-client"
import type { LucideIcon } from "lucide-react"
const navigation = {
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 },
{ title: "Tickets", url: "/tickets", icon: Ticket },
{ title: "Visualizações", url: "/views", icon: PanelsTopLeft },
{ title: "Modo Play", url: "/play", icon: PlayCircle },
{ title: "Base de conhecimento", url: "/knowledge", icon: BookOpen },
],
},
{
title: "Relatorios",
items: [
{ title: "SLA e produtividade", url: "/reports/sla", icon: Gauge },
{ title: "Qualidade (CSAT)", url: "/reports/csat", icon: LifeBuoy },
{ title: "Backlog", url: "/reports/backlog", icon: BarChart3 },
],
},
{
title: "Configuração",
items: [
{ title: "Canais & roteamento", url: "/admin/channels", icon: Waypoints },
{ title: "Times & papéis", url: "/admin/teams", icon: Users },
{ title: "Campos personalizados", url: "/admin/fields", icon: Layers3 },
{ title: "SLAs", url: "/admin/slas", icon: Timer },
{ title: "Integrações", url: "/admin/integrations", icon: Plug },
],
},
],
} as const
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: "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
@ -77,6 +104,14 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
}
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}>
@ -89,25 +124,30 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
<SearchForm placeholder="Buscar tickets, macros ou artigos" />
</SidebarHeader>
<SidebarContent>
{navigation.navMain.map((group) => (
<SidebarGroup key={group.title}>
<SidebarGroupLabel>{group.title}</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
{group.items.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>
))}
{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>