@pablo2410/shared-ui 0.4.1 → 0.5.0

package/dist/layout/index.d.ts

@@ -106,52 +106,56 @@ declare function useSidebarResize(config: {
 };
 
 interface DashboardLayoutUser {
-    name: string;
+    name?: string;
     email?: string;
     role?: string;
     avatarUrl?: string;
 }
+interface DashboardLayoutEnterprise {
+    name: string;
+    code?: string;
+}
 interface DashboardLayoutProps {
-    /** Service/module name displayed in the sidebar header */
+    /** Service/module name shown in the sidebar brand header (e.g. "OEE Manager"). */
     serviceName: string;
-    /** Optional service icon (ReactNode) */
+    /** Service icon (a lucide icon element), shown in the sidebar brand + header. */
     serviceIcon?: ReactNode;
-    /** Menu sections with items */
+    /** Primary navigation sections. */
     menuSections: MenuSection[];
-    /** Currently active path/route */
+    /** Admin-only navigation sections, rendered when `isAdmin` is true. */
+    adminSections?: MenuSection[];
+    /** Whether the current user may see `adminSections`. */
+    isAdmin?: boolean;
+    /** Current route (the app's router supplies this). */
     activePath: string;
-    /** Handler when a menu item is clicked */
+    /** Navigate handler (the app's router supplies this). */
     onNavigate: (path: string) => void;
-    /** Current user info */
+    /** Optional override for active-item detection. */
+    isActive?: (itemPath: string, activePath: string) => boolean;
+    /** URL for the "← Service Hub" link at the top of the nav (full-page nav). */
+    serviceHubUrl?: string;
+    /** Footer "Settings" route. Omit to hide the footer. */
+    settingsPath?: string;
+    /** Authenticated user (drives the header user menu). */
     user?: DashboardLayoutUser | null;
-    /** Whether the user is authenticated */
-    isAuthenticated?: boolean;
-    /** Whether auth state is loading */
-    isLoading?: boolean;
-    /** Logout handler */
+    /** Sign-out handler invoked from the user menu. */
     onLogout?: () => void;
-    /** Login handler / redirect */
-    onLogin?: () => void;
-    /** Show "Back to Portal" link (default: false) */
-    showBackToPortal?: boolean;
-    /** Portal URL for "Back to Portal" link */
-    portalUrl?: string;
-    /** Whether user has admin role */
-    isAdmin?: boolean;
-    /** Admin menu sections (shown only for admins) */
-    adminSections?: MenuSection[];
-    /** Optional hierarchy navigator to render in the sidebar */
+    /** "User Settings" target in the user menu (full-page nav). */
+    userSettingsUrl?: string;
+    /** App-provided hierarchy navigator rendered in the header breadcrumb slot. */
     hierarchyNavigator?: ReactNode;
-    /** Optional reporting toolbar to render in the header */
+    /** Selected enterprise — drives the header enterprise badge. */
+    enterprise?: DashboardLayoutEnterprise | null;
+    /** App-provided reporting toolbar rendered on the right of the header. */
     reportingToolbar?: ReactNode;
-    /** Loading skeleton to show while auth is loading */
-    loadingSkeleton?: ReactNode;
-    /** Main content */
+    /** Whether the sidebar starts expanded. Defaults to `!isMobile`. */
+    defaultOpen?: boolean;
+    /** Extra footer rendered fixed at the bottom (e.g. a debug/health bar). */
+    footer?: ReactNode;
+    /** Main content. */
     children: ReactNode;
-    /** Additional CSS class for the outer container */
-    className?: string;
 }
-declare function DashboardLayout({ serviceName, serviceIcon, menuSections, activePath, onNavigate, user, isAuthenticated, isLoading, onLogout, onLogin, showBackToPortal, portalUrl, isAdmin, adminSections, hierarchyNavigator, reportingToolbar, loadingSkeleton, children, className, }: DashboardLayoutProps): react_jsx_runtime.JSX.Element | null;
+declare function DashboardLayout(props: DashboardLayoutProps): react_jsx_runtime.JSX.Element;
 
 interface DashboardLayoutSkeletonProps {
     className?: string;
@@ -353,4 +357,4 @@ declare const SERVICE_CONFIGS: {
 };
 type ServiceKey = keyof typeof SERVICE_CONFIGS;
 
-export { DashboardLayout, type DashboardLayoutProps, DashboardLayoutSkeleton, type DashboardLayoutSkeletonProps, type DashboardLayoutUser, FOOTER_SERVICES, type FooterService, type MenuItem, type MenuItemConfig, type MenuSection, type MenuSectionConfig, SERVICE_CONFIGS, type ServiceConfig, ServiceFooter, type ServiceFooterProps, type ServiceKey, type ServiceLayoutConfig, SharedFooter, type SharedFooterProps, SharedPageHeader, type SharedPageHeaderProps, type SharedSidebarConfig, type SharedSidebarProps, type SharedSidebarConfig as SidebarConfig, actionManagerConfig, businessHubConfig, defineServiceLayout, getInitials, isAdminRole, isMenuItemActive, oeeManagerConfig, policyDeploymentConfig, sqdcpConfig, useSidebarResize };
+export { DashboardLayout, type DashboardLayoutEnterprise, type DashboardLayoutProps, DashboardLayoutSkeleton, type DashboardLayoutSkeletonProps, type DashboardLayoutUser, FOOTER_SERVICES, type FooterService, type MenuItem, type MenuItemConfig, type MenuSection, type MenuSectionConfig, SERVICE_CONFIGS, type ServiceConfig, ServiceFooter, type ServiceFooterProps, type ServiceKey, type ServiceLayoutConfig, SharedFooter, type SharedFooterProps, SharedPageHeader, type SharedPageHeaderProps, type SharedSidebarConfig, type SharedSidebarProps, type SharedSidebarConfig as SidebarConfig, actionManagerConfig, businessHubConfig, defineServiceLayout, getInitials, isAdminRole, isMenuItemActive, oeeManagerConfig, policyDeploymentConfig, sqdcpConfig, useSidebarResize };

package/dist/layout/index.js

@@ -1,6 +1,27 @@
 import {
   cn
 } from "../chunk-JT3XLKKD.js";
+import {
+  Avatar,
+  AvatarFallback,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+  SidebarTrigger,
+  useIsMobile,
+  useSidebar
+} from "../chunk-LTUYIBMA.js";
 
 // src/layout/SharedSidebar.tsx
 import { useEffect, useRef, useState } from "react";
@@ -64,278 +85,215 @@ function useSidebarResize(config) {
 }
 
 // src/layout/DashboardLayout.tsx
-import {
-  ChevronLeft,
-  ChevronRight,
-  LogOut,
-  Menu,
-  X,
-  ExternalLink
-} from "lucide-react";
-import {
-  useState as useState2,
-  useCallback
-} from "react";
+import { ArrowLeft, LogOut, PanelLeft, Settings } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function SidebarItem({
-  item,
-  isActive,
-  collapsed,
-  onNavigate
+var DEFAULT_SERVICE_HUB_URL = "https://portal.oplytics.digital/app";
+var DEFAULT_USER_SETTINGS_URL = "https://portal.oplytics.digital/account";
+function UserMenu({
+  user,
+  onLogout,
+  userSettingsUrl = DEFAULT_USER_SETTINGS_URL
 }) {
-  const Icon = item.icon;
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      onClick: () => onNavigate(item.path),
-      className: cn(
-        "w-full flex items-center gap-3 rounded-lg transition-all duration-200",
-        "text-sm font-medium outline-none",
-        "focus-visible:ring-1 focus-visible:ring-[#8C34E9]",
-        collapsed ? "px-3 py-2.5 justify-center" : "px-3 py-2",
-        isActive ? "bg-[#8C34E9]/15 text-[#A855F7] border-l-2 border-[#8C34E9]" : "text-[#8890A0] hover:bg-[#1E2738] hover:text-[#E2E8F0]"
+  const initials = (user.name || "U").split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("button", { className: "flex items-center gap-2 rounded-md px-2 py-1 hover:bg-[#1E2738] transition-colors outline-none focus-visible:ring-1 focus-visible:ring-[#8C34E9]", children: [
+      /* @__PURE__ */ jsx(Avatar, { className: "h-7 w-7 border border-[#2A2A3E]", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "text-[10px] font-medium bg-[#8C34E9]/20 text-[#C084FC]", children: initials }) }),
+      /* @__PURE__ */ jsx("span", { className: "hidden md:block text-xs text-[#E2E8F0] truncate max-w-[100px]", children: user.name || "User" })
+    ] }) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-48 bg-[#0D1220] border-[#1E2738]", children: [
+      /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 border-b border-[#1E2738]", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-[#E2E8F0] truncate", children: user.name }),
+        /* @__PURE__ */ jsx("p", { className: "text-[10px] text-[#596475] truncate", children: user.role })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        DropdownMenuItem,
+        {
+          onClick: () => {
+            window.location.href = userSettingsUrl;
+          },
+          className: "text-xs text-[#E2E8F0] hover:bg-[#1E2738] cursor-pointer focus:bg-[#1E2738]",
+          children: [
+            /* @__PURE__ */ jsx(Settings, { className: "h-3.5 w-3.5 mr-2 text-[#8890A0]" }),
+            "User Settings"
+          ]
+        }
       ),
-      title: collapsed ? item.label : void 0,
-      children: [
-        Icon && /* @__PURE__ */ jsx(Icon, { className: cn("shrink-0", collapsed ? "h-5 w-5" : "h-4 w-4") }),
-        !collapsed && /* @__PURE__ */ jsx("span", { className: "truncate", children: item.label }),
-        !collapsed && item.badge && /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0 text-[10px] font-semibold px-1.5 py-0.5 rounded-full bg-[#8C34E9]/20 text-[#A855F7]", children: item.badge })
-      ]
-    }
-  );
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, { className: "bg-[#1E2738]" }),
+      /* @__PURE__ */ jsxs(
+        DropdownMenuItem,
+        {
+          onClick: () => onLogout?.(),
+          className: "text-xs text-[#EF4444] hover:bg-[#EF4444]/10 cursor-pointer focus:bg-[#EF4444]/10 focus:text-[#EF4444]",
+          children: [
+            /* @__PURE__ */ jsx(LogOut, { className: "h-3.5 w-3.5 mr-2" }),
+            "Sign Out"
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function EnterpriseBadge({ enterprise }) {
+  if (!enterprise) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "hidden lg:flex items-center gap-1.5 px-2 py-1 rounded-md bg-[#8C34E9]/10 border border-[#8C34E9]/20", children: [
+    /* @__PURE__ */ jsx("div", { className: "h-4 w-4 rounded-sm bg-[#8C34E9]/30 flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-[8px] font-bold text-[#C084FC]", children: enterprise.name.charAt(0).toUpperCase() }) }),
+    /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-[#C084FC] truncate max-w-[80px]", children: enterprise.code || enterprise.name })
+  ] });
 }
-function SidebarSection({
+function NavSection({
   section,
-  activePath,
-  collapsed,
+  marginTop,
+  isCollapsed,
+  resolveActive,
   onNavigate
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-    !collapsed && section.title && /* @__PURE__ */ jsx("p", { className: "px-3 py-1 text-[10px] font-semibold uppercase tracking-wider text-[#596475]", children: section.title }),
-    collapsed && section.title && /* @__PURE__ */ jsx("div", { className: "mx-auto w-6 border-t border-[#1E2738] my-2" }),
-    section.items.map((item) => /* @__PURE__ */ jsx(
-      SidebarItem,
-      {
-        item,
-        isActive: isMenuItemActive(item.path, activePath),
-        collapsed,
-        onNavigate
-      },
-      item.path
-    ))
+  const label = section.title ?? section.label;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    label && /* @__PURE__ */ jsx("div", { className: cn("px-4 py-2", marginTop && "mt-2"), children: !isCollapsed && /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider", children: label }) }),
+    /* @__PURE__ */ jsx(SidebarMenu, { className: "px-2 py-1", children: section.items.map((item) => {
+      const active = resolveActive(item.path);
+      const Icon = item.icon;
+      return /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(
+        SidebarMenuButton,
+        {
+          isActive: active,
+          onClick: () => onNavigate(item.path),
+          tooltip: item.label,
+          className: "h-10 transition-all font-normal",
+          children: [
+            Icon && /* @__PURE__ */ jsx(Icon, { className: cn("h-4 w-4", active && "text-primary") }),
+            /* @__PURE__ */ jsx("span", { children: item.label })
+          ]
+        }
+      ) }, item.path);
+    }) })
   ] });
 }
-function UserProfile({
-  user,
-  collapsed,
-  onLogout
-}) {
-  const initials = getInitials(user.name);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "border-t border-[#1E2738] p-3",
-        collapsed ? "flex flex-col items-center gap-2" : "flex items-center gap-3"
-      ),
-      children: [
-        user.avatarUrl ? /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: user.avatarUrl,
-            alt: user.name,
-            className: "h-8 w-8 rounded-full shrink-0 object-cover"
-          }
-        ) : /* @__PURE__ */ jsx("div", { className: "h-8 w-8 rounded-full shrink-0 bg-[#8C34E9]/20 flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-[#A855F7]", children: initials }) }),
-        !collapsed && /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[#E2E8F0] truncate", children: user.name }),
-          user.email && /* @__PURE__ */ jsx("p", { className: "text-[10px] text-[#596475] truncate", children: user.email }),
-          user.role && /* @__PURE__ */ jsx("p", { className: "text-[10px] text-[#8C34E9] capitalize", children: user.role })
-        ] }),
-        onLogout && /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: onLogout,
-            className: cn(
-              "shrink-0 p-1.5 rounded-md",
-              "text-[#596475] hover:text-[#E2E8F0] hover:bg-[#1E2738]",
-              "transition-colors cursor-pointer",
-              "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#8C34E9]"
-            ),
-            title: "Sign out",
-            children: /* @__PURE__ */ jsx(LogOut, { className: "h-4 w-4" })
-          }
-        )
-      ]
-    }
-  );
-}
-function DashboardLayout({
+function DashboardShell({
   serviceName,
   serviceIcon,
   menuSections,
+  adminSections,
+  isAdmin = false,
   activePath,
   onNavigate,
+  isActive,
+  serviceHubUrl = DEFAULT_SERVICE_HUB_URL,
+  settingsPath,
   user,
-  isAuthenticated = true,
-  isLoading = false,
   onLogout,
-  onLogin,
-  showBackToPortal = false,
-  portalUrl = "https://portal.oplytics.digital",
-  isAdmin = false,
-  adminSections,
+  userSettingsUrl,
   hierarchyNavigator,
+  enterprise,
   reportingToolbar,
-  loadingSkeleton,
-  children,
-  className
+  footer,
+  children
 }) {
-  const [collapsed, setCollapsed] = useState2(false);
-  const [mobileOpen, setMobileOpen] = useState2(false);
-  const { width: sidebarWidth } = useSidebarResize({
-    storageKey: `oplytics-sidebar-${serviceName}`,
-    defaultWidth: collapsed ? 72 : 260,
-    minWidth: 72,
-    maxWidth: 480
-  });
-  const toggleCollapse = useCallback(() => setCollapsed((c) => !c), []);
-  const toggleMobile = useCallback(() => setMobileOpen((o) => !o), []);
-  const closeMobile = useCallback(() => setMobileOpen(false), []);
-  const handleNavigate = useCallback(
-    (path) => {
-      onNavigate(path);
-      closeMobile();
-    },
-    [onNavigate, closeMobile]
-  );
-  if (isLoading && loadingSkeleton) {
-    return /* @__PURE__ */ jsx(Fragment, { children: loadingSkeleton });
-  }
-  if (!isLoading && !isAuthenticated && onLogin) {
-    onLogin();
-    return loadingSkeleton ? /* @__PURE__ */ jsx(Fragment, { children: loadingSkeleton }) : null;
-  }
-  return /* @__PURE__ */ jsxs("div", { className: cn("min-h-screen flex", "bg-[#0A0E1A]", className), children: [
-    mobileOpen && /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "fixed inset-0 z-40 bg-black/60 lg:hidden",
-        onClick: closeMobile
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      "aside",
-      {
-        className: cn(
-          "fixed top-0 left-0 h-full z-50 flex flex-col",
-          "bg-[#0D1220] border-r border-[#1E2738]",
-          "transition-all duration-300",
-          // Mobile: slide in/out
-          "lg:relative lg:translate-x-0",
-          mobileOpen ? "translate-x-0" : "-translate-x-full"
-        ),
-        style: { width: sidebarWidth },
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: cn(
-            "flex items-center gap-2 p-4 border-b border-[#1E2738]",
-            collapsed && "justify-center px-2"
-          ), children: [
-            serviceIcon && /* @__PURE__ */ jsx("div", { className: "shrink-0 text-[#8C34E9]", children: serviceIcon }),
-            !collapsed && /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-[#E2E8F0] truncate font-[Montserrat,sans-serif]", children: serviceName }),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: toggleCollapse,
-                className: cn(
-                  "hidden lg:flex shrink-0 p-1 rounded-md ml-auto",
-                  "text-[#596475] hover:text-[#E2E8F0] hover:bg-[#1E2738]",
-                  "transition-colors cursor-pointer",
-                  collapsed && "ml-0"
-                ),
-                children: collapsed ? /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: closeMobile,
-                className: "lg:hidden shrink-0 p-1 rounded-md ml-auto text-[#596475] hover:text-[#E2E8F0]",
-                children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
-              }
-            )
-          ] }),
-          hierarchyNavigator && !collapsed && /* @__PURE__ */ jsx("div", { className: "px-3 py-2 border-b border-[#1E2738]", children: hierarchyNavigator }),
-          showBackToPortal && /* @__PURE__ */ jsx("div", { className: cn("px-3 py-2", collapsed && "px-2"), children: /* @__PURE__ */ jsxs(
-            "a",
-            {
-              href: portalUrl,
-              className: cn(
-                "flex items-center gap-2 px-3 py-1.5 rounded-md text-xs",
-                "text-[#596475] hover:text-[#8890A0] hover:bg-[#1E2738]",
-                "transition-colors",
-                collapsed && "justify-center px-2"
-              ),
-              children: [
-                /* @__PURE__ */ jsx(ExternalLink, { className: "h-3.5 w-3.5 shrink-0" }),
-                !collapsed && /* @__PURE__ */ jsx("span", { children: "Back to Portal" })
-              ]
-            }
-          ) }),
-          /* @__PURE__ */ jsxs("nav", { className: "flex-1 overflow-y-auto px-3 py-3 space-y-4", children: [
-            menuSections.map((section, idx) => /* @__PURE__ */ jsx(
-              SidebarSection,
-              {
-                section,
-                activePath,
-                collapsed,
-                onNavigate: handleNavigate
-              },
-              section.title || `section-${idx}`
-            )),
-            isAdmin && adminSections && adminSections.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-              !collapsed && /* @__PURE__ */ jsx("div", { className: "mx-3 border-t border-[#1E2738] my-2" }),
-              adminSections.map((section, idx) => /* @__PURE__ */ jsx(
-                SidebarSection,
-                {
-                  section,
-                  activePath,
-                  collapsed,
-                  onNavigate: handleNavigate
-                },
-                section.title || `admin-${idx}`
-              ))
-            ] })
-          ] }),
-          user && /* @__PURE__ */ jsx(
-            UserProfile,
-            {
-              user,
-              collapsed,
-              onLogout
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col min-w-0", children: [
-      /* @__PURE__ */ jsxs("header", { className: "lg:hidden flex items-center gap-3 px-4 py-2.5 border-b border-[#1E2738] bg-[#0D1220]", children: [
+  const { toggleSidebar, state } = useSidebar();
+  const isCollapsed = state === "collapsed";
+  const navigate = onNavigate;
+  const resolveActive = (path) => isActive ? isActive(path, activePath) : isMenuItemActive(path, activePath);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Sidebar, { collapsible: "icon", className: "border-r-0", children: [
+      /* @__PURE__ */ jsx(SidebarHeader, { className: "h-16 justify-center", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-2 transition-all w-full", children: [
         /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: toggleMobile,
-            className: "p-1.5 rounded-md text-[#8890A0] hover:text-[#E2E8F0] hover:bg-[#1E2738]",
-            children: /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" })
+            onClick: toggleSidebar,
+            className: "h-8 w-8 flex items-center justify-center hover:bg-accent rounded-lg transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring shrink-0",
+            "aria-label": "Toggle navigation",
+            children: /* @__PURE__ */ jsx(PanelLeft, { className: "h-4 w-4 text-muted-foreground" })
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-[#E2E8F0] font-[Montserrat,sans-serif]", children: serviceName }),
-        reportingToolbar && /* @__PURE__ */ jsx("div", { className: "ml-auto", children: reportingToolbar })
+        !isCollapsed ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
+          serviceIcon && /* @__PURE__ */ jsx("span", { className: "text-[#8C34E9] shrink-0", children: serviceIcon }),
+          /* @__PURE__ */ jsx("span", { className: "font-semibold tracking-tight truncate", children: serviceName })
+        ] }) : null
+      ] }) }),
+      /* @__PURE__ */ jsxs(SidebarContent, { className: "gap-0", children: [
+        serviceHubUrl && /* @__PURE__ */ jsx(SidebarMenu, { className: "px-2 pt-2 pb-1", children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(
+          SidebarMenuButton,
+          {
+            onClick: () => {
+              window.location.href = serviceHubUrl;
+            },
+            tooltip: "Back to Service Hub",
+            className: "h-10 transition-all font-normal text-muted-foreground hover:text-foreground",
+            children: [
+              /* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx("span", { children: "Service Hub" })
+            ]
+          }
+        ) }) }),
+        menuSections.map((section, i) => /* @__PURE__ */ jsx(
+          NavSection,
+          {
+            section,
+            isCollapsed,
+            resolveActive,
+            onNavigate: navigate
+          },
+          section.title ?? section.label ?? `section-${i}`
+        )),
+        isAdmin && adminSections?.map((section, i) => /* @__PURE__ */ jsx(
+          NavSection,
+          {
+            section,
+            marginTop: true,
+            isCollapsed,
+            resolveActive,
+            onNavigate: navigate
+          },
+          section.title ?? section.label ?? `admin-${i}`
+        ))
       ] }),
-      reportingToolbar && /* @__PURE__ */ jsx("div", { className: "hidden lg:flex items-center justify-end px-4 py-1.5 border-b border-[#1E2738] bg-[#0D1220]/50", children: reportingToolbar }),
-      /* @__PURE__ */ jsx("main", { className: "flex-1 overflow-y-auto", children })
-    ] })
+      settingsPath && /* @__PURE__ */ jsx(SidebarFooter, { className: "p-2", children: /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(
+        SidebarMenuButton,
+        {
+          onClick: () => navigate(settingsPath),
+          tooltip: "Settings",
+          className: "h-10 transition-all font-normal text-muted-foreground hover:text-foreground",
+          children: [
+            /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx("span", { children: "Settings" })
+          ]
+        }
+      ) }) }) })
+    ] }),
+    /* @__PURE__ */ jsxs(SidebarInset, { children: [
+      /* @__PURE__ */ jsxs(
+        "header",
+        {
+          className: cn(
+            "flex items-center justify-between h-14 px-4",
+            "bg-[#0D1220]/95 border-b border-[#1E2738]",
+            "backdrop-blur supports-[backdrop-filter]:backdrop-blur",
+            "sticky top-0 z-40"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx(SidebarTrigger, { className: "h-9 w-9 rounded-lg bg-background shrink-0 md:hidden" }),
+              serviceIcon && /* @__PURE__ */ jsx("span", { className: "text-[#8C34E9] shrink-0 hidden sm:block", children: serviceIcon }),
+              hierarchyNavigator && /* @__PURE__ */ jsx("div", { className: "min-w-0 overflow-x-auto scrollbar-none", children: hierarchyNavigator })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
+              reportingToolbar,
+              /* @__PURE__ */ jsx(EnterpriseBadge, { enterprise }),
+              /* @__PURE__ */ jsx("div", { className: "w-px h-6 bg-[#1E2738] hidden md:block" }),
+              user && /* @__PURE__ */ jsx(UserMenu, { user, onLogout, userSettingsUrl })
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("main", { className: "flex-1 p-4 md:p-6 pb-14", children })
+    ] }),
+    footer
   ] });
 }
+function DashboardLayout(props) {
+  const isMobile = useIsMobile();
+  return /* @__PURE__ */ jsx(SidebarProvider, { defaultOpen: props.defaultOpen ?? !isMobile, children: /* @__PURE__ */ jsx(DashboardShell, { ...props }) });
+}
 
 // src/layout/DashboardLayoutSkeleton.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -398,7 +356,7 @@ function DashboardLayoutSkeleton({ className }) {
 }
 
 // src/layout/SharedPageHeader.tsx
-import { ChevronLeft as ChevronLeft2 } from "lucide-react";
+import { ChevronLeft } from "lucide-react";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function SharedPageHeader({
   title,
@@ -436,7 +394,7 @@ function SharedPageHeader({
                   "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#8C34E9]"
                 ),
                 "aria-label": "Go back",
-                children: /* @__PURE__ */ jsx3(ChevronLeft2, { className: compact ? "h-4 w-4" : "h-5 w-5" })
+                children: /* @__PURE__ */ jsx3(ChevronLeft, { className: compact ? "h-4 w-4" : "h-5 w-5" })
               }
             ),
             icon && /* @__PURE__ */ jsx3("div", { className: "shrink-0 text-[#8C34E9]", children: icon }),