@pablo2410/shared-ui 0.3.2

package/dist/layout/index.js

@@ -0,0 +1,788 @@
+import {
+  cn
+} from "../chunk-JT3XLKKD.js";
+
+// src/layout/SharedSidebar.tsx
+import { useEffect, useRef, useState } from "react";
+var ADMIN_ROLES = ["enterprise_admin", "platform_admin", "admin", "superuser"];
+function isAdminRole(role) {
+  return !!role && ADMIN_ROLES.includes(role);
+}
+function getInitials(name) {
+  if (!name) return "U";
+  return name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
+}
+function isMenuItemActive(itemPath, location, basePath) {
+  if (basePath) {
+    if (itemPath === basePath) return location === basePath;
+    return location.startsWith(itemPath);
+  }
+  if (itemPath === "/") return location === "/";
+  return location.startsWith(itemPath);
+}
+function useSidebarResize(config) {
+  const [width, setWidth] = useState(() => {
+    if (typeof window === "undefined") return config.defaultWidth;
+    const saved = localStorage.getItem(config.storageKey);
+    return saved ? parseInt(saved, 10) : config.defaultWidth;
+  });
+  const [isResizing, setIsResizing] = useState(false);
+  const startX = useRef(0);
+  const startWidth = useRef(config.defaultWidth);
+  useEffect(() => {
+    localStorage.setItem(config.storageKey, String(width));
+  }, [width, config.storageKey]);
+  useEffect(() => {
+    if (!isResizing) return;
+    const onMove = (e) => {
+      const newWidth = Math.min(
+        config.maxWidth,
+        Math.max(config.minWidth, startWidth.current + (e.clientX - startX.current))
+      );
+      setWidth(newWidth);
+    };
+    const onUp = () => {
+      setIsResizing(false);
+    };
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+    return () => {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+  }, [isResizing, config.minWidth, config.maxWidth]);
+  const startResize = (e) => {
+    setIsResizing(true);
+    startX.current = e.clientX;
+    startWidth.current = width;
+  };
+  return { width, isResizing, startResize };
+}
+
+// src/layout/DashboardLayout.tsx
+import {
+  ChevronLeft,
+  ChevronRight,
+  LogOut,
+  Menu,
+  X,
+  ExternalLink
+} from "lucide-react";
+import {
+  useState as useState2,
+  useCallback
+} from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function SidebarItem({
+  item,
+  isActive,
+  collapsed,
+  onNavigate
+}) {
+  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]"
+      ),
+      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 })
+      ]
+    }
+  );
+}
+function SidebarSection({
+  section,
+  activePath,
+  collapsed,
+  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
+    ))
+  ] });
+}
+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({
+  serviceName,
+  serviceIcon,
+  menuSections,
+  activePath,
+  onNavigate,
+  user,
+  isAuthenticated = true,
+  isLoading = false,
+  onLogout,
+  onLogin,
+  showBackToPortal = false,
+  portalUrl = "https://portal.oplytics.digital",
+  isAdmin = false,
+  adminSections,
+  hierarchyNavigator,
+  reportingToolbar,
+  loadingSkeleton,
+  children,
+  className
+}) {
+  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: [
+        /* @__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" })
+          }
+        ),
+        /* @__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 })
+      ] }),
+      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 })
+    ] })
+  ] });
+}
+
+// src/layout/DashboardLayoutSkeleton.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function Skeleton({ className }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: cn(
+        "animate-pulse rounded-md bg-[#1E2738]",
+        className
+      )
+    }
+  );
+}
+function DashboardLayoutSkeleton({ className }) {
+  return /* @__PURE__ */ jsxs2("div", { className: cn("flex min-h-screen bg-[#0A0E1A]", className), children: [
+    /* @__PURE__ */ jsxs2("div", { className: "w-[260px] border-r border-[#1E2738] bg-[#0D1220] p-4 space-y-6", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3 px-2", children: [
+        /* @__PURE__ */ jsx2(Skeleton, { className: "h-8 w-8 rounded-md" }),
+        /* @__PURE__ */ jsx2(Skeleton, { className: "h-4 w-24" })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "space-y-2 px-2", children: [
+        /* @__PURE__ */ jsx2(Skeleton, { className: "h-9 w-full rounded-lg" }),
+        /* @__PURE__ */ jsx2(Skeleton, { className: "h-9 w-full rounded-lg" }),
+        /* @__PURE__ */ jsx2(Skeleton, { className: "h-9 w-full rounded-lg" }),
+        /* @__PURE__ */ jsx2(Skeleton, { className: "h-9 w-full rounded-lg" })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "px-2", children: [
+        /* @__PURE__ */ jsx2(Skeleton, { className: "h-3 w-16 mb-3" }),
+        /* @__PURE__ */ jsx2(Skeleton, { className: "h-9 w-full rounded-lg" }),
+        /* @__PURE__ */ jsx2(Skeleton, { className: "h-9 w-full rounded-lg mt-2" })
+      ] }),
+      /* @__PURE__ */ jsx2("div", { className: "absolute bottom-4 left-4 right-4", children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3 px-1", children: [
+        /* @__PURE__ */ jsx2(Skeleton, { className: "h-8 w-8 rounded-full" }),
+        /* @__PURE__ */ jsxs2("div", { className: "flex-1 space-y-2", children: [
+          /* @__PURE__ */ jsx2(Skeleton, { className: "h-3 w-20" }),
+          /* @__PURE__ */ jsx2(Skeleton, { className: "h-2 w-32" })
+        ] })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex-1 p-6 space-y-4", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx2(Skeleton, { className: "h-8 w-48 rounded-lg" }),
+        /* @__PURE__ */ jsx2(Skeleton, { className: "h-9 w-24 rounded-lg" })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-4", children: [
+        /* @__PURE__ */ jsx2(Skeleton, { className: "h-24 rounded-xl" }),
+        /* @__PURE__ */ jsx2(Skeleton, { className: "h-24 rounded-xl" }),
+        /* @__PURE__ */ jsx2(Skeleton, { className: "h-24 rounded-xl" }),
+        /* @__PURE__ */ jsx2(Skeleton, { className: "h-24 rounded-xl" })
+      ] }),
+      /* @__PURE__ */ jsx2(Skeleton, { className: "h-64 rounded-xl" }),
+      /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx2(Skeleton, { className: "h-10 w-full rounded-lg" }),
+        /* @__PURE__ */ jsx2(Skeleton, { className: "h-10 w-full rounded-lg" }),
+        /* @__PURE__ */ jsx2(Skeleton, { className: "h-10 w-full rounded-lg" })
+      ] })
+    ] })
+  ] });
+}
+
+// src/layout/SharedPageHeader.tsx
+import { ChevronLeft as ChevronLeft2 } from "lucide-react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function SharedPageHeader({
+  title,
+  subtitle,
+  icon,
+  onBack,
+  actions,
+  breadcrumbs,
+  showBorder = true,
+  compact = false,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: cn(
+        "w-full",
+        showBorder && "border-b border-[#1E2738]",
+        compact ? "px-4 py-3" : "px-6 py-4",
+        className
+      ),
+      children: [
+        breadcrumbs && /* @__PURE__ */ jsx3("div", { className: cn("mb-2", compact && "mb-1"), children: breadcrumbs }),
+        /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between gap-4", children: [
+          /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-3 min-w-0", children: [
+            onBack && /* @__PURE__ */ jsx3(
+              "button",
+              {
+                onClick: onBack,
+                className: cn(
+                  "shrink-0 p-1.5 rounded-md",
+                  "text-[#8890A0] hover:text-[#E2E8F0] hover:bg-[#1E2738]",
+                  "transition-colors cursor-pointer",
+                  "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" })
+              }
+            ),
+            icon && /* @__PURE__ */ jsx3("div", { className: "shrink-0 text-[#8C34E9]", children: icon }),
+            /* @__PURE__ */ jsxs3("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx3(
+                "h1",
+                {
+                  className: cn(
+                    "font-semibold text-[#E2E8F0] truncate",
+                    "font-[Montserrat,sans-serif]",
+                    compact ? "text-lg" : "text-xl"
+                  ),
+                  children: title
+                }
+              ),
+              subtitle && /* @__PURE__ */ jsx3(
+                "p",
+                {
+                  className: cn(
+                    "text-[#8890A0] truncate mt-0.5",
+                    "font-[Space_Grotesk,sans-serif]",
+                    compact ? "text-xs" : "text-sm"
+                  ),
+                  children: subtitle
+                }
+              )
+            ] })
+          ] }),
+          actions && /* @__PURE__ */ jsx3("div", { className: "shrink-0 flex items-center gap-2", children: actions })
+        ] }),
+        children && /* @__PURE__ */ jsx3("div", { className: cn("mt-3", compact && "mt-2"), children })
+      ]
+    }
+  );
+}
+
+// src/layout/SharedFooter.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var FOOTER_SERVICES = [
+  { name: "SQDCP", slug: "sqdcp", localRoute: "/services/sqdcp", externalUrl: "https://sqdcp.oplytics.digital" },
+  { name: "OEE Manager", slug: "oee-manager", localRoute: "/services/oee-manager", externalUrl: "https://oee.oplytics.digital" },
+  { name: "Policy Deployment", slug: "policy-deployment", localRoute: "/services/policy-deployment", externalUrl: "https://policy.oplytics.digital" },
+  { name: "Action Manager", slug: "action-manager", localRoute: "/services/action-manager", externalUrl: "https://actions.oplytics.digital" },
+  { name: "Safety Manager", slug: "safety-manager", localRoute: "/services/safety-manager" },
+  { name: "Connect", slug: "connect", localRoute: "/services/connect", externalUrl: "https://connect.oplytics.digital" }
+];
+function SharedFooter({
+  services = FOOTER_SERVICES,
+  showPricing = true,
+  showSignIn = true,
+  onServiceClick,
+  onPricingClick,
+  onSignInClick,
+  children,
+  className,
+  useExternalUrls = false,
+  year
+}) {
+  const currentYear = year ?? (/* @__PURE__ */ new Date()).getFullYear();
+  return /* @__PURE__ */ jsx4(
+    "footer",
+    {
+      className: cn(
+        "w-full border-t border-[#1E2738]",
+        "bg-[#0D1220] text-[#8890A0]",
+        "font-[Space_Grotesk,sans-serif]",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs4("div", { className: "max-w-7xl mx-auto px-6 py-10", children: [
+        /* @__PURE__ */ jsxs4("div", { className: "grid grid-cols-1 md:grid-cols-4 gap-8 mb-8", children: [
+          /* @__PURE__ */ jsxs4("div", { className: "md:col-span-1", children: [
+            /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 mb-3", children: [
+              /* @__PURE__ */ jsx4(
+                "div",
+                {
+                  className: "w-7 h-7 rounded-full flex items-center justify-center",
+                  style: { background: "#8C34E9" },
+                  children: /* @__PURE__ */ jsx4("span", { className: "text-white font-bold text-xs", children: "O" })
+                }
+              ),
+              /* @__PURE__ */ jsx4("span", { className: "text-[#E2E8F0] font-semibold text-sm font-[Montserrat,sans-serif]", children: "Oplytics.digital" })
+            ] }),
+            /* @__PURE__ */ jsx4("p", { className: "text-xs text-[#596475] leading-relaxed", children: "Operational intelligence platform for manufacturing excellence." })
+          ] }),
+          /* @__PURE__ */ jsxs4("div", { children: [
+            /* @__PURE__ */ jsx4("h4", { className: "text-[#E2E8F0] font-medium text-xs uppercase tracking-wider mb-3 font-[Montserrat,sans-serif]", children: "Services" }),
+            /* @__PURE__ */ jsx4("ul", { className: "space-y-2", children: services.map((service) => /* @__PURE__ */ jsx4("li", { children: /* @__PURE__ */ jsx4(
+              "a",
+              {
+                href: useExternalUrls && service.externalUrl ? service.externalUrl : service.localRoute,
+                onClick: onServiceClick ? (e) => onServiceClick(service, e) : void 0,
+                className: "text-xs text-[#8890A0] hover:text-[#E2E8F0] transition-colors",
+                children: service.name
+              }
+            ) }, service.slug)) })
+          ] }),
+          /* @__PURE__ */ jsxs4("div", { children: [
+            /* @__PURE__ */ jsx4("h4", { className: "text-[#E2E8F0] font-medium text-xs uppercase tracking-wider mb-3 font-[Montserrat,sans-serif]", children: "Company" }),
+            /* @__PURE__ */ jsxs4("ul", { className: "space-y-2", children: [
+              showPricing && /* @__PURE__ */ jsx4("li", { children: /* @__PURE__ */ jsx4(
+                "a",
+                {
+                  href: "/pricing",
+                  onClick: onPricingClick,
+                  className: "text-xs text-[#8890A0] hover:text-[#E2E8F0] transition-colors",
+                  children: "Pricing"
+                }
+              ) }),
+              /* @__PURE__ */ jsx4("li", { children: /* @__PURE__ */ jsx4(
+                "a",
+                {
+                  href: "/about",
+                  className: "text-xs text-[#8890A0] hover:text-[#E2E8F0] transition-colors",
+                  children: "About"
+                }
+              ) }),
+              /* @__PURE__ */ jsx4("li", { children: /* @__PURE__ */ jsx4(
+                "a",
+                {
+                  href: "/contact",
+                  className: "text-xs text-[#8890A0] hover:text-[#E2E8F0] transition-colors",
+                  children: "Contact"
+                }
+              ) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs4("div", { children: [
+            /* @__PURE__ */ jsx4("h4", { className: "text-[#E2E8F0] font-medium text-xs uppercase tracking-wider mb-3 font-[Montserrat,sans-serif]", children: "Legal" }),
+            /* @__PURE__ */ jsxs4("ul", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx4("li", { children: /* @__PURE__ */ jsx4(
+                "a",
+                {
+                  href: "/privacy",
+                  className: "text-xs text-[#8890A0] hover:text-[#E2E8F0] transition-colors",
+                  children: "Privacy Policy"
+                }
+              ) }),
+              /* @__PURE__ */ jsx4("li", { children: /* @__PURE__ */ jsx4(
+                "a",
+                {
+                  href: "/terms",
+                  className: "text-xs text-[#8890A0] hover:text-[#E2E8F0] transition-colors",
+                  children: "Terms of Service"
+                }
+              ) })
+            ] }),
+            showSignIn && /* @__PURE__ */ jsx4("div", { className: "mt-4", children: /* @__PURE__ */ jsx4(
+              "a",
+              {
+                href: "/login",
+                onClick: onSignInClick,
+                className: "text-xs text-[#8C34E9] hover:text-[#A855F7] transition-colors font-medium",
+                children: "Sign In"
+              }
+            ) })
+          ] })
+        ] }),
+        children,
+        /* @__PURE__ */ jsxs4("div", { className: "pt-6 border-t border-[#1E2738] flex flex-col sm:flex-row items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs4("p", { className: "text-xs text-[#596475]", children: [
+            "\xA9 ",
+            currentYear,
+            " Oplytics.digital. All rights reserved."
+          ] }),
+          /* @__PURE__ */ jsx4("p", { className: "text-xs text-[#3E4A5C]", children: "Built for manufacturing excellence" })
+        ] })
+      ] })
+    }
+  );
+}
+
+// src/layout/createServiceLayout.tsx
+function defineServiceLayout(config) {
+  return {
+    defaultWidth: 260,
+    minWidth: 200,
+    maxWidth: 480,
+    showPageHeader: true,
+    showReportingToolbar: false,
+    wrapHierarchyProvider: false,
+    showAuthGate: true,
+    ...config,
+    storageKeyPrefix: config.storageKeyPrefix || config.serviceName.toLowerCase().replace(/\s+/g, "-")
+  };
+}
+
+// src/layout/serviceConfigs.ts
+var sqdcpConfig = {
+  serviceName: "SQDCP",
+  serviceAbbreviation: "S",
+  serviceIconName: "BarChart3",
+  menuSections: [
+    {
+      items: [
+        { iconName: "LayoutDashboard", label: "Dashboard", path: "/" },
+        { iconName: "PenLine", label: "Data Entry", path: "/entry" },
+        { iconName: "ClipboardList", label: "Action Tracker", path: "/actions" },
+        { iconName: "FileText", label: "Reports", path: "/reports" },
+        { iconName: "Settings", label: "Admin", path: "/admin" }
+      ]
+    }
+  ],
+  showPageHeader: true,
+  showReportingToolbar: true,
+  reportingModuleName: "SQDCP",
+  wrapHierarchyProvider: false,
+  showAuthGate: false,
+  storageKeyPrefix: "sqdcp-sidebar",
+  defaultWidth: 260,
+  minWidth: 200,
+  maxWidth: 480
+};
+var oeeManagerConfig = {
+  serviceName: "OEE Manager",
+  serviceAbbreviation: "o",
+  serviceIconName: "BarChart3",
+  menuSections: [
+    {
+      items: [
+        { iconName: "BarChart3", label: "Dashboard", path: "/" },
+        { iconName: "Database", label: "Data Input", path: "/data-input" },
+        { iconName: "Clock", label: "Downtime", path: "/downtime" },
+        { iconName: "Settings", label: "Settings", path: "/settings" }
+      ]
+    }
+  ],
+  backLink: {
+    label: "Back to Portal",
+    path: "https://portal.oplytics.digital"
+  },
+  showPageHeader: true,
+  showReportingToolbar: true,
+  reportingModuleName: "OEE Enterprise Manager",
+  wrapHierarchyProvider: false,
+  showAuthGate: false,
+  storageKeyPrefix: "oee-sidebar",
+  defaultWidth: 240,
+  minWidth: 200,
+  maxWidth: 400
+};
+var actionManagerConfig = {
+  serviceName: "Action Manager",
+  serviceAbbreviation: "A",
+  serviceIconName: "LayoutDashboard",
+  menuSections: [
+    {
+      items: [
+        { iconName: "LayoutDashboard", label: "Dashboard", path: "/" },
+        { iconName: "Users", label: "Teams", path: "/teams" }
+      ]
+    }
+  ],
+  showPageHeader: true,
+  showReportingToolbar: false,
+  reportingModuleName: "Action Manager",
+  wrapHierarchyProvider: false,
+  showAuthGate: true,
+  storageKeyPrefix: "actionmanager-sidebar",
+  defaultWidth: 280,
+  minWidth: 200,
+  maxWidth: 480
+};
+var businessHubConfig = {
+  serviceName: "Business Hub",
+  serviceAbbreviation: "B",
+  serviceIconName: "LayoutDashboard",
+  menuSections: [
+    {
+      items: [
+        { iconName: "LayoutDashboard", label: "Dashboard", path: "/" },
+        { iconName: "Users", label: "Analytics", path: "/analytics" }
+      ]
+    }
+  ],
+  showPageHeader: true,
+  showReportingToolbar: false,
+  reportingModuleName: "Business Hub",
+  wrapHierarchyProvider: false,
+  showAuthGate: true,
+  storageKeyPrefix: "businesshub-sidebar",
+  defaultWidth: 280,
+  minWidth: 200,
+  maxWidth: 480
+};
+var policyDeploymentConfig = {
+  serviceName: "Policy Deployment",
+  serviceAbbreviation: "PD",
+  serviceIconName: "FileStack",
+  menuSections: [
+    {
+      label: "Analysis",
+      items: [
+        { iconName: "LayoutGrid", label: "Dashboard", path: "/app/policy-deployment" },
+        { iconName: "Grid3X3", label: "X-Matrix", path: "/app/policy-deployment/xmatrix" },
+        { iconName: "BarChart3", label: "Bowling Chart", path: "/app/policy-deployment/bowling" },
+        { iconName: "FolderKanban", label: "Action Plans", path: "/app/policy-deployment/actions" },
+        { iconName: "GitBranchPlus", label: "Catchball", path: "/app/policy-deployment/catchball" },
+        { iconName: "Target", label: "Deployments", path: "/app/policy-deployment/deployments" }
+      ]
+    },
+    {
+      label: "Administration",
+      adminOnly: true,
+      items: [
+        { iconName: "Settings", label: "Manage Policy", path: "/app/policy-deployment/manage" },
+        { iconName: "Plug", label: "Integrations", path: "/app/policy-deployment/integrations" }
+      ]
+    }
+  ],
+  backLink: {
+    label: "Service Hub",
+    path: "/app"
+  },
+  showPageHeader: true,
+  showReportingToolbar: true,
+  reportingModuleName: "Policy Deployment",
+  wrapHierarchyProvider: true,
+  showAuthGate: true,
+  storageKeyPrefix: "policy-sidebar",
+  defaultWidth: 260,
+  minWidth: 200,
+  maxWidth: 480
+};
+var SERVICE_CONFIGS = {
+  sqdcp: sqdcpConfig,
+  oeeManager: oeeManagerConfig,
+  actionManager: actionManagerConfig,
+  businessHub: businessHubConfig,
+  policyDeployment: policyDeploymentConfig
+};
+export {
+  DashboardLayout,
+  DashboardLayoutSkeleton,
+  FOOTER_SERVICES,
+  SERVICE_CONFIGS,
+  SharedFooter,
+  SharedPageHeader,
+  actionManagerConfig,
+  businessHubConfig,
+  defineServiceLayout,
+  getInitials,
+  isAdminRole,
+  isMenuItemActive,
+  oeeManagerConfig,
+  policyDeploymentConfig,
+  sqdcpConfig,
+  useSidebarResize
+};
+//# sourceMappingURL=index.js.map