Add groups to sidebar

inventory/src/components/layout/AppSidebar.tsx

@@ -10,6 +10,7 @@ import {
   ShoppingBag,
   Truck,
   MessageCircle,
+  LayoutDashboard,
 } from "lucide-react";
 import { IconCrystalBall } from "@tabler/icons-react";
 import {
@@ -17,6 +18,7 @@ import {
   SidebarContent,
   SidebarGroup,
   SidebarGroupContent,
+  SidebarGroupLabel,
   SidebarHeader,
   SidebarFooter,
   SidebarMenu,
@@ -28,12 +30,21 @@ import {
 import { useLocation, useNavigate, Link } from "react-router-dom";
 import { Protected } from "@/components/auth/Protected";
 
-const items = [
+const dashboardItems = [
+  {
+    title: "Dashboard",
+    icon: LayoutDashboard,
+    url: "",
+    permission: "access:dashboard"
+  }
+];
+
+const inventoryItems = [
   {
     title: "Overview",
     icon: Home,
     url: "/",
-    permission: "access:dashboard"
+    permission: "access:overview"
   },
   {
     title: "Products",
@@ -76,15 +87,21 @@ const items = [
     icon: IconCrystalBall,
     url: "/forecasting",
     permission: "access:forecasting"
-  },
+  }
+];
+
+const productSetupItems = [
   {
     title: "Create Products",
     icon: Plus,
     url: "/import",
     permission: "access:import"
-  },
+  }
+];
+
+const chatItems = [
   {
-    title: "Chat",
+    title: "Chat Archive",
     icon: MessageCircle,
     url: "/chat",
     permission: "access:chat"
@@ -102,6 +119,46 @@ export function AppSidebar() {
     navigate('/login');
   };
 
+  const renderMenuItems = (items: typeof inventoryItems) => {
+    return items.map((item) => {
+      const isActive =
+        location.pathname === item.url ||
+        (item.url !== "/" && item.url !== "#" && location.pathname.startsWith(item.url));
+      return (
+        <Protected
+          key={item.title}
+          permission={item.permission}
+          fallback={null}
+        >
+          <SidebarMenuItem>
+            <SidebarMenuButton
+              asChild={item.url !== "#"}
+              tooltip={item.title}
+              isActive={isActive}
+              disabled={item.url === "#"}
+            >
+              {item.url === "#" ? (
+                <div>
+                  <item.icon className="h-4 w-4" />
+                  <span className="group-data-[collapsible=icon]:hidden">
+                    {item.title}
+                  </span>
+                </div>
+              ) : (
+                <Link to={item.url}>
+                  <item.icon className="h-4 w-4" />
+                  <span className="group-data-[collapsible=icon]:hidden">
+                    {item.title}
+                  </span>
+                </Link>
+              )}
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </Protected>
+      );
+    });
+  };
+
   return (
     <Sidebar collapsible="icon" variant="sidebar">
       <SidebarHeader>
@@ -122,42 +179,53 @@ export function AppSidebar() {
       </SidebarHeader>
       <SidebarSeparator />
       <SidebarContent>
+        {/* Dashboard Section */}
         <SidebarGroup>
+          <SidebarGroupLabel>Dashboard</SidebarGroupLabel>
           <SidebarGroupContent>
             <SidebarMenu>
-              {items.map((item) => {
+              {renderMenuItems(dashboardItems)}
-                const isActive =
+            </SidebarMenu>
-                  location.pathname === item.url ||
+          </SidebarGroupContent>
-                  (item.url !== "/" && location.pathname.startsWith(item.url));
+        </SidebarGroup>
-                return (
+   
-                  <Protected
+
-                    key={item.title}
+        {/* Inventory Section */}
-                    permission={item.permission}
+        <SidebarGroup>
-                    fallback={null}
+          <SidebarGroupLabel>Inventory</SidebarGroupLabel>
-                  >
+          <SidebarGroupContent>
-                    <SidebarMenuItem>
+            <SidebarMenu>
-                      <SidebarMenuButton
+              {renderMenuItems(inventoryItems)}
-                        asChild
+            </SidebarMenu>
-                        tooltip={item.title}
+          </SidebarGroupContent>
-                        isActive={isActive}
+        </SidebarGroup>
-                      >
+ 
-                        <Link to={item.url}>
+
-                          <item.icon className="h-4 w-4" />
+        {/* Product Setup Section */}
-                          <span className="group-data-[collapsible=icon]:hidden">
+        <SidebarGroup>
-                            {item.title}
+          <SidebarGroupLabel>Product Setup</SidebarGroupLabel>
-                          </span>
+          <SidebarGroupContent>
-                        </Link>
+            <SidebarMenu>
-                      </SidebarMenuButton>
+              {renderMenuItems(productSetupItems)}
-                    </SidebarMenuItem>
+            </SidebarMenu>
-                  </Protected>
+          </SidebarGroupContent>
-                );
+        </SidebarGroup>
-              })}
+
+
+        {/* Chat Section */}
+        <SidebarGroup>
+          <SidebarGroupLabel>Chat</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {renderMenuItems(chatItems)}
             </SidebarMenu>
           </SidebarGroupContent>
         </SidebarGroup>
         <SidebarSeparator />
 
+        {/* Settings Section */}
         <SidebarGroup>
+          
           <SidebarGroupContent>
             <SidebarMenu>
               <Protected