@umituz/web-dashboard 2.0.7 → 2.0.8

package/src/domains/settings/hooks/useSettings.ts

@@ -0,0 +1,80 @@
+/**
+ * Settings Hooks
+ *
+ * Custom React hooks for settings functionality
+ */
+
+import { useState, useCallback } from "react";
+import type { SettingsConfig, SettingsItem } from "../types/settings";
+
+/**
+ * Use Settings Hook
+ *
+ * Manages settings state and actions
+ *
+ * @param initialConfig - Initial settings configuration
+ * @returns Settings state and actions
+ */
+export function useSettings(initialConfig: SettingsConfig) {
+  const [config, setConfig] = useState<SettingsConfig>(initialConfig);
+
+  const updateItem = useCallback(
+    (sectionKey: string, itemKey: string, updates: Partial<SettingsItem>) => {
+      setConfig((prev) => ({
+        ...prev,
+        sections: prev.sections.map((section) =>
+          section.key === sectionKey
+            ? {
+                ...section,
+                items: section.items.map((item) =>
+                  item.key === itemKey ? { ...item, ...updates } : item
+                ),
+              }
+            : section
+        ),
+      }));
+    },
+    []
+  );
+
+  const toggleItem = useCallback((sectionKey: string, itemKey: string) => {
+    setConfig((prev) => ({
+      ...prev,
+      sections: prev.sections.map((section) =>
+        section.key === sectionKey
+          ? {
+              ...section,
+              items: section.items.map((item) =>
+                item.key === itemKey
+                  ? { ...item, enabled: item.enabled === undefined ? true : !item.enabled }
+                  : item
+              ),
+            }
+          : section
+      ),
+    }));
+  }, []);
+
+  const setItemBadge = useCallback((sectionKey: string, itemKey: string, badge: number | undefined) => {
+    setConfig((prev) => ({
+      ...prev,
+      sections: prev.sections.map((section) =>
+        section.key === sectionKey
+          ? {
+              ...section,
+              items: section.items.map((item) =>
+                item.key === itemKey ? { ...item, badge } : item
+              ),
+            }
+          : section
+      ),
+    }));
+  }, []);
+
+  return {
+    config,
+    updateItem,
+    toggleItem,
+    setItemBadge,
+  };
+}

package/src/domains/settings/index.ts

@@ -0,0 +1,22 @@
+/**
+ * @umituz/web-dashboard - Settings Domain
+ *
+ * Config-driven Settings System
+ */
+
+export { SettingsLayout, SettingsSection } from './components';
+export { useSettings } from './hooks';
+export {
+  findSettingsItem,
+  findSettingsSection,
+  filterSettingsByPermission,
+  getSettingsDefaultRoute,
+  generateSettingsKey,
+} from './utils';
+export type {
+  SettingsItem,
+  SettingsSection as SettingsSectionType,
+  SettingsConfig,
+  SettingsLayoutProps,
+  SettingsSectionProps,
+} from './types';

package/src/domains/settings/types/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Settings Types Export
+ */
+
+export type {
+  SettingsItem,
+  SettingsSection,
+  SettingsConfig,
+  SettingsLayoutProps,
+  SettingsSectionProps,
+} from './settings';

package/src/domains/settings/types/settings.ts

@@ -0,0 +1,81 @@
+/**
+ * Settings Types
+ *
+ * Type definitions for settings system
+ */
+
+import type { LucideIcon } from "lucide-react";
+
+/**
+ * Settings item configuration
+ */
+export interface SettingsItem {
+  /** Unique key for the setting */
+  key: string;
+  /** Display label (can be i18n key) */
+  label: string;
+  /** Description text (optional) */
+  description?: string;
+  /** Icon component */
+  icon?: LucideIcon;
+  /** Route path for this setting */
+  path?: string;
+  /** Whether this item is enabled */
+  enabled?: boolean;
+  /** Required permission to access */
+  permission?: string;
+  /** Badge count (for notifications) */
+  badge?: number;
+}
+
+/**
+ * Settings section configuration
+ */
+export interface SettingsSection {
+  /** Section title */
+  title: string;
+  /** Section key */
+  key: string;
+  /** Items in this section */
+  items: SettingsItem[];
+  /** Optional: Section icon */
+  icon?: LucideIcon;
+}
+
+/**
+ * Settings layout configuration
+ */
+export interface SettingsConfig {
+  /** Settings sections */
+  sections: SettingsSection[];
+  /** Brand name */
+  brandName?: string;
+  /** Default route */
+  defaultRoute?: string;
+}
+
+/**
+ * Settings layout props
+ */
+export interface SettingsLayoutProps {
+  /** Settings configuration */
+  config: SettingsConfig;
+  /** Current path */
+  currentPath?: string;
+  /** On navigate callback */
+  onNavigate?: (path: string) => void;
+}
+
+/**
+ * Settings section component props
+ */
+export interface SettingsSectionProps {
+  /** Section configuration */
+  section: SettingsSection;
+  /** Current path */
+  currentPath?: string;
+  /** On navigate callback */
+  onNavigate?: (path: string) => void;
+  /** Collapsed state */
+  collapsed?: boolean;
+}

package/src/domains/settings/utils/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Settings Utils Export
+ */
+
+export {
+  findSettingsItem,
+  findSettingsSection,
+  filterSettingsByPermission,
+  getSettingsDefaultRoute,
+  generateSettingsKey,
+} from './settings';

package/src/domains/settings/utils/settings.ts

@@ -0,0 +1,80 @@
+/**
+ * Settings Utilities
+ *
+ * Utility functions for settings operations
+ */
+
+import type { SettingsConfig, SettingsItem, SettingsSection } from "../types/settings";
+
+/**
+ * Find settings item by key
+ *
+ * @param config - Settings configuration
+ * @param itemKey - Item key to find
+ * @returns Item or undefined
+ */
+export function findSettingsItem(config: SettingsConfig, itemKey: string): SettingsItem | undefined {
+  for (const section of config.sections) {
+    const item = section.items.find((i) => i.key === itemKey);
+    if (item) return item;
+  }
+  return undefined;
+}
+
+/**
+ * Find settings section by key
+ *
+ * @param config - Settings configuration
+ * @param sectionKey - Section key to find
+ * @returns Section or undefined
+ */
+export function findSettingsSection(config: SettingsConfig, sectionKey: string): SettingsSection | undefined {
+  return config.sections.find((s) => s.key === sectionKey);
+}
+
+/**
+ * Filter settings items by permission
+ *
+ * @param items - Settings items to filter
+ * @param userPermissions - User permissions
+ * @returns Filtered items
+ */
+export function filterSettingsByPermission<T extends SettingsItem>(
+  items: T[],
+  userPermissions?: string[]
+): T[] {
+  if (!userPermissions) return items.filter((item) => item.permission === undefined);
+
+  return items.filter((item) => {
+    if (item.permission === undefined) return true;
+    return userPermissions.includes(item.permission);
+  });
+}
+
+/**
+ * Get default route from settings config
+ *
+ * @param config - Settings configuration
+ * @returns Default route or first available route
+ */
+export function getSettingsDefaultRoute(config: SettingsConfig): string {
+  if (config.defaultRoute) return config.defaultRoute;
+
+  for (const section of config.sections) {
+    const firstEnabled = section.items.find((item) => item.enabled !== false && item.path);
+    if (firstEnabled?.path) return firstEnabled.path;
+  }
+
+  return "/settings";
+}
+
+/**
+ * Generate settings item key
+ *
+ * @param prefix - Key prefix
+ * @param identifier - Unique identifier
+ * @returns Generated key
+ */
+export function generateSettingsKey(prefix: string, identifier: string): string {
+  return `${prefix}_${identifier}`;
+}

package/dist/layouts/components/BrandLogo.d.ts

@@ -1,18 +0,0 @@
-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/layouts/components/BrandLogo.js

@@ -1,88 +0,0 @@
-"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/layouts/components/BrandLogo.js.map

@@ -1 +0,0 @@
-{"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/layouts/components/DashboardHeader.d.ts

@@ -1,36 +0,0 @@
-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/layouts/components/DashboardHeader.js

@@ -1,225 +0,0 @@
-"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