commit

src/components/layout/app-sidebar.tsx

@@ -29,7 +29,7 @@ import {
   SidebarRail,
 } from "@/components/ui/sidebar";
 //import { UserAvatarProfile } from "@/components/user-avatar-profile";
-import { navItems } from "@/constants/data";
+import { navItems, tenantNavConfig } from "@/constants/data";
 import { useMediaQuery } from "@/hooks/use-media-query";
 
 import {
@@ -47,31 +47,36 @@ import { usePathname, useRouter } from "next/navigation";
 import * as React from "react";
 import { Icons } from "../icons";
 import { OrgSwitcher } from "../org-switcher";
+import { useAuth } from "@/providers/AuthProvider";
 export const company = {
-  name: "Acme Inc",
+  name: "ALLA",
   logo: IconPhotoUp,
   plan: "Enterprise",
 };
 
 const tenants = [
-  { id: "1", name: "Acme Inc" },
-  { id: "2", name: "Beta Corp" },
-  { id: "3", name: "Gamma Ltd" },
+  { id: "1", name: "ALLA" },
+  { id: "2", name: "ONVALLA" },
 ];
 
 export default function AppSidebar() {
   const pathname = usePathname();
   const { isOpen } = useMediaQuery();
   const router = useRouter();
-  const handleSwitchTenant = (_tenantId: string) => {
-    // Tenant switching functionality would be implemented here
+  const [activeTenant, setActiveTenant] = React.useState(tenants[0]);
+  const { isAuthenticated, userInfo, logout } = useAuth();
+
+  const handleSwitchTenant = (tenantId: string) => {
+    const newTenant = tenants.find((t) => t.id === tenantId);
+    if (newTenant) {
+      setActiveTenant(newTenant);
+      // Optional: Redirect to the tenant's dashboard after switching
+      // router.push(tenantNavConfig[tenantId][0]?.url || "/");
+    }
   };
 
-  const activeTenant = tenants[0];
-
-  React.useEffect(() => {
-    // Side effects based on sidebar state changes
-  }, [isOpen]);
+  // Get navItems based on active tenant
+  const currentNavItems = tenantNavConfig[activeTenant.id] || navItems;
 
   return (
     <Sidebar collapsible="icon">
@@ -86,7 +91,7 @@ export default function AppSidebar() {
         <SidebarGroup>
           <SidebarGroupLabel>Overview</SidebarGroupLabel>
           <SidebarMenu>
-            {navItems.map((item) => {
+            {currentNavItems.map((item) => {
               const Icon = item.icon ? Icons[item.icon] : Icons.logo;
               return item?.items && item?.items?.length > 0 ? (
                 <Collapsible
@@ -151,13 +156,18 @@ export default function AppSidebar() {
                   size="lg"
                   className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
                 >
-                  {/* {user && (
-                    <UserAvatarProfile
-                      className='h-8 w-8 rounded-lg'
-                      showInfo
-                      user={user}
-                    />
-                  )} */}
+                  {userInfo && (
+                    <div className="flex items-center gap-2">
+                      <IconUserCircle className="h-8 w-8" />
+                      <div className="flex flex-col text-center">
+                        <span className="text-sm ">
+                          {userInfo?.name ||
+                            userInfo?.preferred_username ||
+                            "User"}
+                        </span>
+                      </div>
+                    </div>
+                  )}
                   <IconChevronsDown className="ml-auto size-4" />
                 </SidebarMenuButton>
               </DropdownMenuTrigger>
@@ -168,38 +178,33 @@ export default function AppSidebar() {
                 sideOffset={4}
               >
                 <DropdownMenuLabel className="p-0 font-normal">
-                  <div className="px-1 py-1.5">
-                    {/* {user && (
-                      <UserAvatarProfile
-                        className='h-8 w-8 rounded-lg'
-                        showInfo
-                        user={user}
-                      />
-                    )} */}
+                  <div className="flex items-center gap-3 px-1 py-1.5 text-left text-sm">
+                    {userInfo && (
+                      <>
+                        <IconUserCircle className="h-8 w-8 rounded-lg bg-muted" />
+                        <div className="grid flex-1 text-left text-sm leading-tight">
+                          <span className="truncate font-semibold">
+                            {userInfo?.name ||
+                              userInfo?.preferred_username ||
+                              "User"}
+                          </span>
+                        </div>
+                      </>
+                    )}
                   </div>
                 </DropdownMenuLabel>
                 <DropdownMenuSeparator />
 
                 <DropdownMenuGroup>
-                  <DropdownMenuItem
-                    onClick={() => router.push("/dashboard/profile")}
-                  >
-                    <IconUserCircle className="mr-2 h-4 w-4" />
-                    Profile
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <IconCreditCard className="mr-2 h-4 w-4" />
-                    Billing
-                  </DropdownMenuItem>
                   <DropdownMenuItem>
                     <IconBell className="mr-2 h-4 w-4" />
                     Notifications
                   </DropdownMenuItem>
                 </DropdownMenuGroup>
                 <DropdownMenuSeparator />
-                <DropdownMenuItem>
+                <DropdownMenuItem onClick={() => logout()}>
                   <IconLogout className="mr-2 h-4 w-4" />
-                  {/* <SignOutButton redirectUrl='/auth/sign-in' /> */}
+                  Logout
                 </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>