frontend fully integreated with the backend

distribution_fe/components/layout/app-sidebar.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import Link from 'next/link'
+import { useEffect, useState } from 'react'
 import { usePathname } from 'next/navigation'
 import { HugeiconsIcon } from '@hugeicons/react'
 import { ChevronRightIcon, UserIcon } from '@hugeicons/core-free-icons'
@@ -31,6 +32,11 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
 import { useAuth, type Role } from '@/contexts/auth-context'
 import { DASHBOARD_ITEM, NAV_GROUPS, type NavGroup, type NavItem } from '@/config/nav'
 
@@ -48,6 +54,32 @@ export function AppSidebar() {
   const pathname = usePathname()
 
   const dashboardActive = pathname === DASHBOARD_ITEM.href
+  const [openGroups, setOpenGroups] = useState<Record<string, boolean>>({})
+
+  useEffect(() => {
+    setOpenGroups((prev) => {
+      const next = { ...prev }
+
+      for (const group of NAV_GROUPS) {
+        if (!isGroupVisible(group, permissions)) continue
+
+        const visibleItems = group.items.filter((item) => canSee(item, permissions))
+        const groupActive = visibleItems.some(
+          (item) =>
+            pathname === item.href ||
+            (item.href !== '/' && pathname.startsWith(item.href)),
+        )
+
+        if (groupActive) {
+          next[group.title] = true
+        } else if (!(group.title in next)) {
+          next[group.title] = false
+        }
+      }
+
+      return next
+    })
+  }, [pathname, permissions])
 
   return (
     <Sidebar collapsible="icon">
@@ -95,7 +127,10 @@ export function AppSidebar() {
           return (
             <Collapsible
               key={group.title}
-              defaultOpen={false}
+              open={openGroups[group.title] ?? groupActive}
+              onOpenChange={(open) =>
+                setOpenGroups((prev) => ({ ...prev, [group.title]: open }))
+              }
               className="group/collapsible"
             >
               <SidebarGroup className="py-0">
@@ -126,15 +161,18 @@ export function AppSidebar() {
                           (item.href !== '/' &&
                             pathname.startsWith(item.href))
                         return (
-                          <SidebarMenuSubItem key={item.href}>
-                            <SidebarMenuSubButton
-                              render={<Link href={item.href} />}
-                              isActive={isActive}
-                            >
-                              <HugeiconsIcon icon={item.icon} size={15} />
-                              <span>{item.title}</span>
-                            </SidebarMenuSubButton>
-                          </SidebarMenuSubItem>
+                          <Tooltip key={item.href}>
+                            <SidebarMenuSubItem>
+                              <SidebarMenuSubButton
+                                render={<TooltipTrigger render={<Link href={item.href} />} />}
+                                isActive={isActive}
+                              >
+                                <HugeiconsIcon icon={item.icon} size={15} />
+                                <span>{item.title}</span>
+                              </SidebarMenuSubButton>
+                            </SidebarMenuSubItem>
+                            <TooltipContent side="right">{item.description ?? item.title}</TooltipContent>
+                          </Tooltip>
                         )
                       })}
                     </SidebarMenuSub>