@umituz/web-dashboard 1.0.7 → 2.0.0

package/dist/components/BrandLogo.d.ts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface BrandLogoProps {
+    className?: string;
+    size?: number;
+}
+/**
+ * BrandLogo Component
+ *
+ * Displays the application brand logo as an SVG.
+ * Supports custom sizing and styling through className.
+ *
+ * @param className - Optional CSS classes for styling
+ * @param size - Width and height in pixels (default: 32)
+ */
+declare const BrandLogo: ({ className, size }: BrandLogoProps) => react_jsx_runtime.JSX.Element;
+
+export { BrandLogo };

package/dist/components/BrandLogo.js

@@ -0,0 +1,88 @@
+"use client";
+
+// src/domains/layouts/components/BrandLogo.tsx
+import { cn } from "@umituz/web-design-system/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+var BrandLogo = ({ className, size = 32 }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 100 100",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: cn("shrink-0", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: "15",
+            y: "65",
+            width: "70",
+            height: "15",
+            rx: "4",
+            fill: "hsl(var(--primary))"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: "25",
+            y: "25",
+            width: "12",
+            height: "40",
+            rx: "2",
+            fill: "hsl(var(--primary))"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: "44",
+            y: "35",
+            width: "12",
+            height: "30",
+            rx: "2",
+            fill: "hsl(var(--primary))"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: "63",
+            y: "20",
+            width: "12",
+            height: "45",
+            rx: "2",
+            fill: "hsl(var(--primary))"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: "20",
+            y: "45",
+            width: "60",
+            height: "10",
+            rx: "2",
+            fill: "hsl(var(--secondary))"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: "50",
+            cy: "20",
+            r: "5",
+            fill: "hsl(var(--secondary))"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  BrandLogo
+};
+//# sourceMappingURL=BrandLogo.js.map

package/dist/components/BrandLogo.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/domains/layouts/components/BrandLogo.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn } from \"@umituz/web-design-system/utils\";\n\ninterface BrandLogoProps {\n  className?: string;\n  size?: number;\n}\n\n/**\n * BrandLogo Component\n *\n * Displays the application brand logo as an SVG.\n * Supports custom sizing and styling through className.\n *\n * @param className - Optional CSS classes for styling\n * @param size - Width and height in pixels (default: 32)\n */\nexport const BrandLogo = ({ className, size = 32 }: BrandLogoProps) => {\n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox=\"0 0 100 100\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={cn(\"shrink-0\", className)}\n    >\n      {/* Solid Foundation / Platform */}\n      <rect\n        x=\"15\"\n        y=\"65\"\n        width=\"70\"\n        height=\"15\"\n        rx=\"4\"\n        fill=\"hsl(var(--primary))\"\n      />\n\n      {/* Assembly Paths / Structure */}\n      <rect\n        x=\"25\"\n        y=\"25\"\n        width=\"12\"\n        height=\"40\"\n        rx=\"2\"\n        fill=\"hsl(var(--primary))\"\n      />\n      <rect\n        x=\"44\"\n        y=\"35\"\n        width=\"12\"\n        height=\"30\"\n        rx=\"2\"\n        fill=\"hsl(var(--primary))\"\n      />\n      <rect\n        x=\"63\"\n        y=\"20\"\n        width=\"12\"\n        height=\"45\"\n        rx=\"2\"\n        fill=\"hsl(var(--primary))\"\n      />\n\n      {/* Modern Accent - The 'Assembly' Bridge */}\n      <rect\n        x=\"20\"\n        y=\"45\"\n        width=\"60\"\n        height=\"10\"\n        rx=\"2\"\n        fill=\"hsl(var(--secondary))\"\n      />\n\n      {/* Connection Point / Beacon */}\n      <circle\n        cx=\"50\"\n        cy=\"20\"\n        r=\"5\"\n        fill=\"hsl(var(--secondary))\"\n      />\n    </svg>\n  );\n};\n"],"mappings":";;;AACA,SAAS,UAAU;AAkBf,SASE,KATF;AAFG,IAAM,YAAY,CAAC,EAAE,WAAW,OAAO,GAAG,MAAsB;AACrE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,OAAM;AAAA,MACN,WAAW,GAAG,YAAY,SAAS;AAAA,MAGnC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,GAAE;AAAA,YACF,GAAE;AAAA,YACF,OAAM;AAAA,YACN,QAAO;AAAA,YACP,IAAG;AAAA,YACH,MAAK;AAAA;AAAA,QACP;AAAA,QAGA;AAAA,UAAC;AAAA;AAAA,YACC,GAAE;AAAA,YACF,GAAE;AAAA,YACF,OAAM;AAAA,YACN,QAAO;AAAA,YACP,IAAG;AAAA,YACH,MAAK;AAAA;AAAA,QACP;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,GAAE;AAAA,YACF,GAAE;AAAA,YACF,OAAM;AAAA,YACN,QAAO;AAAA,YACP,IAAG;AAAA,YACH,MAAK;AAAA;AAAA,QACP;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,GAAE;AAAA,YACF,GAAE;AAAA,YACF,OAAM;AAAA,YACN,QAAO;AAAA,YACP,IAAG;AAAA,YACH,MAAK;AAAA;AAAA,QACP;AAAA,QAGA;AAAA,UAAC;AAAA;AAAA,YACC,GAAE;AAAA,YACF,GAAE;AAAA,YACF,OAAM;AAAA,YACN,QAAO;AAAA,YACP,IAAG;AAAA,YACH,MAAK;AAAA;AAAA,QACP;AAAA,QAGA;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,IAAG;AAAA,YACH,GAAE;AAAA,YACF,MAAK;AAAA;AAAA,QACP;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/DashboardHeader.d.ts

@@ -0,0 +1,36 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { DashboardHeaderProps } from '../types/layout.js';
+import { DashboardNotification } from '../types/notification.js';
+import { DashboardUser } from '../types/user.js';
+import '../types/sidebar.js';
+import 'lucide-react';
+
+interface DashboardHeaderPropsExtended extends DashboardHeaderProps {
+    /** Auth user */
+    user?: DashboardUser;
+    /** Notifications */
+    notifications?: DashboardNotification[];
+    /** Logout function */
+    onLogout?: () => Promise<void>;
+    /** Mark all as read function */
+    onMarkAllRead?: () => void;
+    /** Dismiss notification function */
+    onDismissNotification?: (id: string) => void;
+    /** Settings route */
+    settingsRoute?: string;
+    /** Profile route */
+    profileRoute?: string;
+    /** Billing route */
+    billingRoute?: string;
+}
+/**
+ * Dashboard Header Component
+ *
+ * Displays top navigation bar with theme toggle, notifications,
+ * user menu, and organisation selector.
+ *
+ * @param props - Dashboard header props
+ */
+declare const DashboardHeader: ({ collapsed, setCollapsed, setMobileOpen, title, user, notifications, onLogout, onMarkAllRead, onDismissNotification, settingsRoute, profileRoute, billingRoute, }: DashboardHeaderPropsExtended) => react_jsx_runtime.JSX.Element;
+
+export { DashboardHeader };

package/dist/components/DashboardHeader.js

@@ -0,0 +1,225 @@
+"use client";
+
+// src/domains/layouts/components/DashboardHeader.tsx
+import React, { useState } from "react";
+import {
+  Bell,
+  X,
+  Sun,
+  Moon,
+  Menu,
+  User,
+  Settings,
+  LogOut,
+  ChevronDown,
+  CreditCard
+} from "lucide-react";
+import { Button } from "@umituz/web-design-system/atoms";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+// src/domains/layouts/utils/dashboard.ts
+function formatNotificationTime(createdAt, t) {
+  const date = new Date(createdAt);
+  const secs = Math.floor((Date.now() - date.getTime()) / 1e3);
+  if (secs < 60) return t("dashboard.activityFeed.times.justNow");
+  if (secs < 3600) return t("dashboard.activityFeed.times.minutesAgo", { val: Math.floor(secs / 60) });
+  if (secs < 86400) return t("dashboard.activityFeed.times.hoursAgo", { val: Math.floor(secs / 3600) });
+  return t("dashboard.activityFeed.times.daysAgo", { val: Math.floor(secs / 86400) });
+}
+
+// src/domains/layouts/components/DashboardHeader.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DashboardHeader = ({
+  collapsed,
+  setCollapsed,
+  setMobileOpen,
+  title,
+  user,
+  notifications = [],
+  onLogout,
+  onMarkAllRead,
+  onDismissNotification,
+  settingsRoute = "/dashboard/settings",
+  profileRoute = "/dashboard/profile",
+  billingRoute = "/dashboard/billing"
+}) => {
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  const [notifOpen, setNotifOpen] = useState(false);
+  const [profileOpen, setProfileOpen] = useState(false);
+  const unreadCount = notifications.filter((n) => !n.read).length;
+  const markAllRead = () => {
+    onMarkAllRead?.();
+  };
+  const handleLogout = async () => {
+    try {
+      await onLogout?.();
+      navigate("/login");
+    } catch {
+    }
+  };
+  const ThemeToggle = () => {
+    const [resolvedTheme, setResolvedTheme] = React.useState("light");
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        onClick: () => setResolvedTheme(resolvedTheme === "light" ? "dark" : "light"),
+        className: "text-muted-foreground h-9 w-9",
+        title: resolvedTheme === "dark" ? t("common.tooltips.switchLight") : t("common.tooltips.switchDark"),
+        children: resolvedTheme === "dark" ? /* @__PURE__ */ jsx(Sun, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Moon, { className: "h-4 w-4" })
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs("header", { className: "flex h-14 items-center justify-between border-b border-border bg-card/50 backdrop-blur-md px-4 shrink-0 z-30", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "md:hidden", onClick: () => setMobileOpen(true), children: /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" }) }),
+      collapsed && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "hidden md:inline-flex", onClick: () => setCollapsed(false), children: /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" }) }),
+      /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold text-foreground", children: title })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(ThemeToggle, {}),
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            className: "text-muted-foreground relative h-9 w-9",
+            onClick: () => {
+              setNotifOpen(!notifOpen);
+              setProfileOpen(false);
+            },
+            children: [
+              /* @__PURE__ */ jsx(Bell, { className: "h-4 w-4" }),
+              unreadCount > 0 && /* @__PURE__ */ jsxs("span", { className: "absolute top-2 right-2 flex h-2 w-2", children: [
+                /* @__PURE__ */ jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-destructive opacity-75" }),
+                /* @__PURE__ */ jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-destructive" })
+              ] })
+            ]
+          }
+        ),
+        notifOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-40", onClick: () => setNotifOpen(false) }),
+          /* @__PURE__ */ jsxs("div", { className: "absolute top-12 right-0 w-80 bg-popover border border-border rounded-xl shadow-xl z-50 overflow-hidden animate-in fade-in zoom-in-95 duration-200", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-border bg-muted/50", children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-xs font-bold uppercase tracking-wider text-foreground", children: t("dashboard.notifications.title") }),
+              unreadCount > 0 && /* @__PURE__ */ jsx("button", { onClick: markAllRead, className: "text-[10px] font-bold text-primary hover:underline uppercase", children: t("dashboard.notifications.markAllRead") })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "max-h-[400px] overflow-y-auto", children: [
+              notifications.map((n) => /* @__PURE__ */ jsxs("div", { className: `px-4 py-3 border-b border-border last:border-0 flex items-start gap-3 transition-colors hover:bg-muted/30 ${!n.read ? "bg-primary/5" : ""}`, children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground leading-snug", children: n.text }),
+                  /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-muted-foreground mt-1 flex items-center gap-1", children: [
+                    /* @__PURE__ */ jsx("span", { className: "inline-block w-1 h-1 rounded-full bg-muted-foreground/30" }),
+                    formatNotificationTime(n.createdAt, t)
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => onDismissNotification?.(n.id),
+                    className: "text-muted-foreground/50 hover:text-foreground shrink-0 transition-colors",
+                    children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+                  }
+                )
+              ] }, n.id)),
+              notifications.length === 0 && /* @__PURE__ */ jsxs("div", { className: "px-4 py-10 text-center", children: [
+                /* @__PURE__ */ jsx("div", { className: "mx-auto w-10 h-10 rounded-full bg-muted flex items-center justify-center mb-3", children: /* @__PURE__ */ jsx(Bell, { className: "h-5 w-5 text-muted-foreground/50" }) }),
+                /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("dashboard.notifications.none") })
+              ] })
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "h-6 w-px bg-border mx-1" }),
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => {
+              setProfileOpen(!profileOpen);
+              setNotifOpen(false);
+            },
+            className: "flex items-center gap-2 p-1 pl-1 rounded-full hover:bg-muted transition-colors group",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-[10px] font-bold text-primary overflow-hidden border border-primary/20 ring-primary/20 group-hover:ring-4 transition-all", children: user?.avatar && /* @__PURE__ */ jsx("img", { src: user.avatar, alt: "User", className: "w-full h-full object-cover" }) }),
+              /* @__PURE__ */ jsx(ChevronDown, { className: `h-4 w-4 text-muted-foreground transition-transform duration-200 ${profileOpen && "rotate-180"}` })
+            ]
+          }
+        ),
+        profileOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-40", onClick: () => setProfileOpen(false) }),
+          /* @__PURE__ */ jsxs("div", { className: "absolute top-12 right-0 w-56 bg-popover border border-border rounded-xl shadow-xl z-50 overflow-hidden animate-in fade-in zoom-in-95 duration-200 p-1.5", children: [
+            /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 border-b border-border/50 mb-1", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-bold text-foreground", children: user?.name || t("common.roles.user") }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground truncate", children: user?.email })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => {
+                    navigate(profileRoute);
+                    setProfileOpen(false);
+                  },
+                  className: "flex w-full items-center gap-2.5 px-3 py-2 text-sm text-foreground hover:bg-muted rounded-lg transition-colors",
+                  children: [
+                    /* @__PURE__ */ jsx(User, { className: "h-4 w-4 text-muted-foreground" }),
+                    t("common.profile")
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => {
+                    navigate(billingRoute);
+                    setProfileOpen(false);
+                  },
+                  className: "flex w-full items-center gap-2.5 px-3 py-2 text-sm text-foreground hover:bg-muted rounded-lg transition-colors",
+                  children: [
+                    /* @__PURE__ */ jsx(CreditCard, { className: "h-4 w-4 text-muted-foreground" }),
+                    t("common.billing")
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => {
+                    navigate(settingsRoute);
+                    setProfileOpen(false);
+                  },
+                  className: "flex w-full items-center gap-2.5 px-3 py-2 text-sm text-foreground hover:bg-muted rounded-lg transition-colors",
+                  children: [
+                    /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4 text-muted-foreground" }),
+                    t("common.settings")
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "h-px bg-border my-1.5" }),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: handleLogout,
+                className: "flex w-full items-center gap-2.5 px-3 py-2 text-sm text-destructive hover:bg-destructive/10 rounded-lg transition-colors font-medium",
+                children: [
+                  /* @__PURE__ */ jsx(LogOut, { className: "h-4 w-4" }),
+                  t("common.logout")
+                ]
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+};
+export {
+  DashboardHeader
+};
+//# sourceMappingURL=DashboardHeader.js.map

package/dist/components/DashboardHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/domains/layouts/components/DashboardHeader.tsx","../../src/domains/layouts/utils/dashboard.ts"],"sourcesContent":["import React, { useState } from \"react\";\nimport {\n  Bell, X, Sun, Moon, Menu, User, Settings, LogOut,\n  ChevronDown, CreditCard\n} from \"lucide-react\";\nimport { Button } from \"@umituz/web-design-system/atoms\";\nimport { useNavigate } from \"react-router-dom\";\nimport { useTranslation } from \"react-i18next\";\nimport type { DashboardHeaderProps } from \"../types/layout\";\nimport type { DashboardNotification } from \"../types/notification\";\nimport type { DashboardUser } from \"../types/user\";\nimport { formatNotificationTime } from \"../utils/dashboard\";\n\ninterface DashboardHeaderPropsExtended extends DashboardHeaderProps {\n  /** Auth user */\n  user?: DashboardUser;\n  /** Notifications */\n  notifications?: DashboardNotification[];\n  /** Logout function */\n  onLogout?: () => Promise<void>;\n  /** Mark all as read function */\n  onMarkAllRead?: () => void;\n  /** Dismiss notification function */\n  onDismissNotification?: (id: string) => void;\n  /** Settings route */\n  settingsRoute?: string;\n  /** Profile route */\n  profileRoute?: string;\n  /** Billing route */\n  billingRoute?: string;\n}\n\n/**\n * Dashboard Header Component\n *\n * Displays top navigation bar with theme toggle, notifications,\n * user menu, and organisation selector.\n *\n * @param props - Dashboard header props\n */\nexport const DashboardHeader = ({\n  collapsed,\n  setCollapsed,\n  setMobileOpen,\n  title,\n  user,\n  notifications = [],\n  onLogout,\n  onMarkAllRead,\n  onDismissNotification,\n  settingsRoute = \"/dashboard/settings\",\n  profileRoute = \"/dashboard/profile\",\n  billingRoute = \"/dashboard/billing\",\n}: DashboardHeaderPropsExtended) => {\n  const navigate = useNavigate();\n  const { t } = useTranslation();\n  const [notifOpen, setNotifOpen] = useState(false);\n  const [profileOpen, setProfileOpen] = useState(false);\n\n  const unreadCount = notifications.filter((n) => !n.read).length;\n\n  const markAllRead = () => {\n    onMarkAllRead?.();\n  };\n\n  const handleLogout = async () => {\n    try {\n      await onLogout?.();\n      navigate(\"/login\");\n    } catch {\n      // Error handling can be added by parent component\n    }\n  };\n\n  // Placeholder components - these should be provided by the consuming app\n  const ThemeToggle = () => {\n    const [resolvedTheme, setResolvedTheme] = React.useState<\"light\" | \"dark\">(\"light\");\n\n    return (\n      <Button\n        variant=\"ghost\"\n        size=\"icon\"\n        onClick={() => setResolvedTheme(resolvedTheme === \"light\" ? \"dark\" : \"light\")}\n        className=\"text-muted-foreground h-9 w-9\"\n        title={resolvedTheme === \"dark\" ? t('common.tooltips.switchLight') : t('common.tooltips.switchDark')}\n      >\n        {resolvedTheme === \"dark\" ? <Sun className=\"h-4 w-4\" /> : <Moon className=\"h-4 w-4\" />}\n      </Button>\n    );\n  };\n\n  return (\n    <header className=\"flex h-14 items-center justify-between border-b border-border bg-card/50 backdrop-blur-md px-4 shrink-0 z-30\">\n      <div className=\"flex items-center gap-3\">\n        <Button variant=\"ghost\" size=\"icon\" className=\"md:hidden\" onClick={() => setMobileOpen(true)}>\n          <Menu className=\"h-5 w-5\" />\n        </Button>\n        {collapsed && (\n          <Button variant=\"ghost\" size=\"icon\" className=\"hidden md:inline-flex\" onClick={() => setCollapsed(false)}>\n            <Menu className=\"h-5 w-5\" />\n          </Button>\n        )}\n        <h2 className=\"text-sm font-semibold text-foreground\">\n          {title}\n        </h2>\n      </div>\n\n      <div className=\"flex items-center gap-2\">\n        {/* Theme Toggle */}\n        <ThemeToggle />\n\n        {/* Notifications */}\n        <div className=\"relative\">\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"text-muted-foreground relative h-9 w-9\"\n            onClick={() => {\n              setNotifOpen(!notifOpen);\n              setProfileOpen(false);\n            }}\n          >\n            <Bell className=\"h-4 w-4\" />\n            {unreadCount > 0 && (\n              <span className=\"absolute top-2 right-2 flex h-2 w-2\">\n                <span className=\"animate-ping absolute inline-flex h-full w-full rounded-full bg-destructive opacity-75\"></span>\n                <span className=\"relative inline-flex rounded-full h-2 w-2 bg-destructive\"></span>\n              </span>\n            )}\n          </Button>\n\n          {notifOpen && (\n            <>\n              <div className=\"fixed inset-0 z-40\" onClick={() => setNotifOpen(false)} />\n              <div className=\"absolute top-12 right-0 w-80 bg-popover border border-border rounded-xl shadow-xl z-50 overflow-hidden animate-in fade-in zoom-in-95 duration-200\">\n                <div className=\"flex items-center justify-between px-4 py-3 border-b border-border bg-muted/50\">\n                  <h3 className=\"text-xs font-bold uppercase tracking-wider text-foreground\">{t('dashboard.notifications.title')}</h3>\n                  {unreadCount > 0 && (\n                    <button onClick={markAllRead} className=\"text-[10px] font-bold text-primary hover:underline uppercase\">{t('dashboard.notifications.markAllRead')}</button>\n                  )}\n                </div>\n\n                <div className=\"max-h-[400px] overflow-y-auto\">\n                  {notifications.map((n) => (\n                    <div key={n.id} className={`px-4 py-3 border-b border-border last:border-0 flex items-start gap-3 transition-colors hover:bg-muted/30 ${!n.read ? \"bg-primary/5\" : \"\"}`}>\n                      <div className=\"flex-1 min-w-0\">\n                        <p className=\"text-sm text-foreground leading-snug\">{n.text}</p>\n                        <p className=\"text-[10px] text-muted-foreground mt-1 flex items-center gap-1\">\n                          <span className=\"inline-block w-1 h-1 rounded-full bg-muted-foreground/30\" />\n                          {formatNotificationTime(n.createdAt, t)}\n                        </p>\n                      </div>\n                      <button\n                        onClick={() => onDismissNotification?.(n.id)}\n                        className=\"text-muted-foreground/50 hover:text-foreground shrink-0 transition-colors\"\n                      >\n                        <X className=\"h-3 w-3\" />\n                      </button>\n                    </div>\n                  ))}\n                  {notifications.length === 0 && (\n                    <div className=\"px-4 py-10 text-center\">\n                      <div className=\"mx-auto w-10 h-10 rounded-full bg-muted flex items-center justify-center mb-3\">\n                        <Bell className=\"h-5 w-5 text-muted-foreground/50\" />\n                      </div>\n                      <p className=\"text-sm text-muted-foreground\">{t('dashboard.notifications.none')}</p>\n                    </div>\n                  )}\n                </div>\n              </div>\n            </>\n          )}\n        </div>\n\n        <div className=\"h-6 w-px bg-border mx-1\" />\n\n        <div className=\"relative\">\n          <button\n            onClick={() => {\n              setProfileOpen(!profileOpen);\n              setNotifOpen(false);\n            }}\n            className=\"flex items-center gap-2 p-1 pl-1 rounded-full hover:bg-muted transition-colors group\"\n          >\n            <div className=\"w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-[10px] font-bold text-primary overflow-hidden border border-primary/20 ring-primary/20 group-hover:ring-4 transition-all\">\n              {user?.avatar && <img src={user.avatar} alt=\"User\" className=\"w-full h-full object-cover\" />}\n            </div>\n            <ChevronDown className={`h-4 w-4 text-muted-foreground transition-transform duration-200 ${profileOpen && \"rotate-180\"}`} />\n          </button>\n\n          {profileOpen && (\n            <>\n              <div className=\"fixed inset-0 z-40\" onClick={() => setProfileOpen(false)} />\n              <div className=\"absolute top-12 right-0 w-56 bg-popover border border-border rounded-xl shadow-xl z-50 overflow-hidden animate-in fade-in zoom-in-95 duration-200 p-1.5\">\n                <div className=\"px-3 py-2 border-b border-border/50 mb-1\">\n                  <p className=\"text-sm font-bold text-foreground\">{user?.name || t(\"common.roles.user\")}</p>\n                  <p className=\"text-xs text-muted-foreground truncate\">{user?.email}</p>\n                </div>\n\n                <div className=\"space-y-0.5\">\n                  <button\n                    onClick={() => { navigate(profileRoute); setProfileOpen(false); }}\n                    className=\"flex w-full items-center gap-2.5 px-3 py-2 text-sm text-foreground hover:bg-muted rounded-lg transition-colors\"\n                  >\n                    <User className=\"h-4 w-4 text-muted-foreground\" />\n                    {t('common.profile')}\n                  </button>\n                  <button\n                    onClick={() => { navigate(billingRoute); setProfileOpen(false); }}\n                    className=\"flex w-full items-center gap-2.5 px-3 py-2 text-sm text-foreground hover:bg-muted rounded-lg transition-colors\"\n                  >\n                    <CreditCard className=\"h-4 w-4 text-muted-foreground\" />\n                    {t('common.billing')}\n                  </button>\n                  <button\n                    onClick={() => { navigate(settingsRoute); setProfileOpen(false); }}\n                    className=\"flex w-full items-center gap-2.5 px-3 py-2 text-sm text-foreground hover:bg-muted rounded-lg transition-colors\"\n                  >\n                    <Settings className=\"h-4 w-4 text-muted-foreground\" />\n                    {t('common.settings')}\n                  </button>\n                </div>\n\n                <div className=\"h-px bg-border my-1.5\" />\n\n                <button\n                  onClick={handleLogout}\n                  className=\"flex w-full items-center gap-2.5 px-3 py-2 text-sm text-destructive hover:bg-destructive/10 rounded-lg transition-colors font-medium\"\n                >\n                  <LogOut className=\"h-4 w-4\" />\n                  {t('common.logout')}\n                </button>\n              </div>\n            </>\n          )}\n        </div>\n      </div>\n    </header>\n  );\n};\n","/**\n * Dashboard Utilities\n *\n * Utility functions for dashboard operations\n */\n\n/**\n * Format notification timestamp to relative time\n *\n * @param createdAt - Notification creation timestamp\n * @param t - i18n translation function\n * @returns Formatted time string\n */\nexport function formatNotificationTime(\n  createdAt: Date | string | number,\n  t: (key: string, params?: Record<string, unknown>) => string\n): string {\n  const date = new Date(createdAt);\n  const secs = Math.floor((Date.now() - date.getTime()) / 1000);\n\n  if (secs < 60) return t(\"dashboard.activityFeed.times.justNow\");\n  if (secs < 3600) return t(\"dashboard.activityFeed.times.minutesAgo\", { val: Math.floor(secs / 60) });\n  if (secs < 86400) return t(\"dashboard.activityFeed.times.hoursAgo\", { val: Math.floor(secs / 3600) });\n  return t(\"dashboard.activityFeed.times.daysAgo\", { val: Math.floor(secs / 86400) });\n}\n\n/**\n * Check if a path is active\n *\n * @param currentPath - Current location pathname\n * @param targetPath - Target path to check\n * @returns True if paths match\n */\nexport function isPathActive(currentPath: string, targetPath: string): boolean {\n  return currentPath === targetPath;\n}\n\n/**\n * Get page title from sidebar configuration\n *\n * @param pathname - Current pathname\n * @param sidebarGroups - Sidebar groups configuration\n * @param extraTitleMap - Extra title mappings\n * @returns Page title or null\n */\nexport function getPageTitle(\n  pathname: string,\n  sidebarGroups: Array<{ items: Array<{ path: string; label: string }> }>,\n  extraTitleMap?: Record<string, string>\n): string | null {\n  // Search in sidebar groups\n  for (const group of sidebarGroups) {\n    const item = group.items.find((i) => i.path === pathname);\n    if (item) return item.label;\n  }\n\n  // Search in extra title map\n  if (extraTitleMap?.[pathname]) {\n    return extraTitleMap[pathname];\n  }\n\n  return null;\n}\n\n/**\n * Filter sidebar items by app type and enabled status\n *\n * @param items - Sidebar items to filter\n * @param user - Current user object\n * @returns Filtered items\n */\nexport function filterSidebarItems<T extends { enabled?: boolean; requiredApp?: \"mobile\" | \"web\" }>(\n  items: T[],\n  user?: { hasMobileApp?: boolean; hasWebApp?: boolean }\n): T[] {\n  return items.filter((item) => {\n    // Skip disabled items\n    if (item.enabled === false) return false;\n\n    // Skip items that require specific app types\n    if (!item.requiredApp) return true;\n    if (item.requiredApp === \"mobile\") return user?.hasMobileApp ?? false;\n    if (item.requiredApp === \"web\") return user?.hasWebApp ?? false;\n\n    return true;\n  });\n}\n\n/**\n * Generate notification ID\n *\n * @returns Unique notification ID\n */\nexport function generateNotificationId(): string {\n  return crypto.randomUUID();\n}\n"],"mappings":"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","names":[]}

package/dist/components/DashboardLayout.d.ts

@@ -0,0 +1,45 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { DashboardLayoutConfig } from '../types/layout.js';
+import { DashboardNotification } from '../types/notification.js';
+import { DashboardUser } from '../types/user.js';
+import '../types/sidebar.js';
+import 'lucide-react';
+
+interface DashboardLayoutProps {
+    /** Layout configuration */
+    config: DashboardLayoutConfig;
+    /** Auth user */
+    user?: DashboardUser;
+    /** Auth loading state */
+    authLoading?: boolean;
+    /** Authenticated state */
+    isAuthenticated?: boolean;
+    /** Notifications */
+    notifications?: DashboardNotification[];
+    /** Logout function */
+    onLogout?: () => Promise<void>;
+    /** Mark all as read function */
+    onMarkAllRead?: () => void;
+    /** Dismiss notification function */
+    onDismissNotification?: (id: string) => void;
+    /** Login route for redirect */
+    loginRoute?: string;
+}
+/**
+ * Dashboard Layout Component
+ *
+ * Main layout wrapper for dashboard pages.
+ * Provides sidebar, header, and content area with responsive design.
+ *
+ * Features:
+ * - Collapsible sidebar
+ * - Mobile menu overlay
+ * - Breadcrumb page titles
+ * - Loading skeletons
+ * - Auth protection
+ *
+ * @param props - Dashboard layout props
+ */
+declare const DashboardLayout: ({ config, user, authLoading, isAuthenticated, notifications, onLogout, onMarkAllRead, onDismissNotification, loginRoute, }: DashboardLayoutProps) => react_jsx_runtime.JSX.Element | null;
+
+export { DashboardLayout, DashboardLayout as default };