ptechcore_ui 1.0.1 → 1.0.2

package/dist/index.cjs

@@ -0,0 +1,1317 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  PrimaryButton: () => Buttons_default,
+  RewiseLayout: () => ModernDoubleSidebarLayout_default,
+  SecondaryButton: () => SecondaryButton,
+  SessionProvider: () => SessionProvider,
+  ThemeProvider: () => ThemeContext_default,
+  ToastContainer: () => Toast_default,
+  ToastProvider: () => ToastProvider
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/common/Buttons.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var PrimaryButton = ({
+  loading = false,
+  children,
+  classname = "",
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "button",
+  {
+    type: "submit",
+    disabled: loading || props.disabled,
+    className: `px-4 py-2 text-sm bg-[#6A8A82] text-white rounded-lg hover:bg-[#5A7A72] transition-colors  disabled:opacity-50 disabled:cursor-not-allowed flex justify-center items-center ${classname}`,
+    ...props,
+    children: loading ? "Connexion en cours..." : children
+  }
+);
+var SecondaryButton = ({
+  loading = false,
+  children,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "button",
+  {
+    type: "button",
+    disabled: loading || props.disabled,
+    className: "px-4 py-2 bg-[#B87333] text-white rounded-lg hover:bg-[#A66B2A] transition-colors  disabled:opacity-50 disabled:cursor-not-allowed flex items-center",
+    ...props,
+    children: loading ? "Connexion en cours..." : children
+  }
+);
+var Buttons_default = PrimaryButton;
+
+// src/components/layout/ModernDoubleSidebarLayout.tsx
+var import_react2 = __toESM(require("react"), 1);
+var import_react_router_dom = require("react-router-dom");
+var import_lucide_react = require("lucide-react");
+
+// src/utils/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/contexts/ThemeContext.tsx
+var import_react = require("react");
+
+// src/styles/theme.ts
+var elegantTheme = {
+  name: "\xC9l\xE9gance Sobre",
+  description: "Finance traditionnelle moderne - s\xE9rieux, luxe discret, rassurant",
+  colors: {
+    primary: "#2E7D69",
+    // Vert émeraude
+    primaryHover: "#246456",
+    primaryLight: "rgba(46, 125, 105, 0.1)",
+    secondary: "#D4AF37",
+    // Or pâle
+    accent: "#D4AF37",
+    background: "#F5F5F7",
+    // Gris clair neutre
+    surface: "#FFFFFF",
+    surfaceHover: "#FAFAFA",
+    text: {
+      primary: "#1E1E2F",
+      // Charbon profond
+      secondary: "#4A4A5C",
+      tertiary: "#C2C7CE",
+      // Gris moyen
+      inverse: "#FFFFFF"
+    },
+    border: "#E5E5E7",
+    borderLight: "#F0F0F2",
+    success: "#2E7D69",
+    successLight: "rgba(46, 125, 105, 0.1)",
+    error: "#DC3545",
+    errorLight: "rgba(220, 53, 69, 0.1)",
+    warning: "#D4AF37",
+    warningLight: "rgba(212, 175, 55, 0.1)",
+    info: "#5B9BD5",
+    infoLight: "rgba(91, 155, 213, 0.1)",
+    sidebar: {
+      bg: "#1E1E2F",
+      bgHover: "#252538",
+      text: "#C2C7CE",
+      textHover: "#FFFFFF",
+      border: "rgba(194, 199, 206, 0.1)",
+      active: "#2E7D69",
+      activeBg: "rgba(46, 125, 105, 0.1)"
+    },
+    card: {
+      bg: "#FFFFFF",
+      border: "#E5E5E7",
+      shadow: "rgba(30, 30, 47, 0.05)"
+    }
+  },
+  shadows: {
+    sm: "0 1px 3px rgba(30, 30, 47, 0.05)",
+    md: "0 4px 6px rgba(30, 30, 47, 0.07)",
+    lg: "0 10px 15px rgba(30, 30, 47, 0.1)",
+    xl: "0 20px 25px rgba(30, 30, 47, 0.12)"
+  },
+  transitions: {
+    fast: "150ms ease",
+    normal: "250ms ease",
+    slow: "350ms ease"
+  },
+  borderRadius: {
+    sm: "4px",
+    md: "8px",
+    lg: "12px",
+    xl: "16px",
+    full: "9999px"
+  }
+};
+var fintechTheme = {
+  name: "Modern Fintech",
+  description: "Moderne, clair, orient\xE9 tableau de bord financier",
+  colors: {
+    primary: "#27AE60",
+    // Vert doux
+    primaryHover: "#219A52",
+    primaryLight: "rgba(39, 174, 96, 0.1)",
+    secondary: "#2C3E50",
+    // Bleu nuit désaturé
+    accent: "#3498DB",
+    background: "#FAFAFA",
+    // Blanc cassé
+    surface: "#FFFFFF",
+    surfaceHover: "#F8F9FA",
+    text: {
+      primary: "#2C3E50",
+      secondary: "#7F8C8D",
+      // Gris ardoise
+      tertiary: "#95A5A6",
+      inverse: "#FFFFFF"
+    },
+    border: "#E0E6ED",
+    borderLight: "#F1F4F7",
+    success: "#27AE60",
+    successLight: "rgba(39, 174, 96, 0.1)",
+    error: "#C0392B",
+    // Rouge bourgogne
+    errorLight: "rgba(192, 57, 43, 0.1)",
+    warning: "#F39C12",
+    warningLight: "rgba(243, 156, 18, 0.1)",
+    info: "#3498DB",
+    infoLight: "rgba(52, 152, 219, 0.1)",
+    sidebar: {
+      bg: "#2C3E50",
+      bgHover: "#34495E",
+      text: "#95A5A6",
+      textHover: "#FFFFFF",
+      border: "rgba(149, 165, 166, 0.1)",
+      active: "#27AE60",
+      activeBg: "rgba(39, 174, 96, 0.1)"
+    },
+    card: {
+      bg: "#FFFFFF",
+      border: "#E0E6ED",
+      shadow: "rgba(44, 62, 80, 0.04)"
+    }
+  },
+  shadows: {
+    sm: "0 1px 3px rgba(44, 62, 80, 0.04)",
+    md: "0 4px 6px rgba(44, 62, 80, 0.06)",
+    lg: "0 10px 15px rgba(44, 62, 80, 0.08)",
+    xl: "0 20px 25px rgba(44, 62, 80, 0.1)"
+  },
+  transitions: {
+    fast: "150ms ease",
+    normal: "250ms ease",
+    slow: "350ms ease"
+  },
+  borderRadius: {
+    sm: "4px",
+    md: "8px",
+    lg: "12px",
+    xl: "16px",
+    full: "9999px"
+  }
+};
+var minimalistTheme = {
+  name: "Minimaliste Premium",
+  description: "\xC9l\xE9gance minimaliste avec touche premium",
+  colors: {
+    primary: "#6A8A82",
+    // Vert sauge
+    primaryHover: "#5A7A72",
+    primaryLight: "rgba(106, 138, 130, 0.1)",
+    secondary: "#B87333",
+    // Cuivre rosé
+    accent: "#B87333",
+    background: "#ECECEC",
+    // Gris clair perle
+    surface: "#FFFFFF",
+    surfaceHover: "#FAFAFA",
+    text: {
+      primary: "#191919",
+      // Noir fumé
+      secondary: "#444444",
+      // Anthracite doux
+      tertiary: "#767676",
+      inverse: "#FFFFFF"
+    },
+    border: "#D9D9D9",
+    borderLight: "#E8E8E8",
+    success: "#6A8A82",
+    successLight: "rgba(106, 138, 130, 0.1)",
+    error: "#B85450",
+    errorLight: "rgba(184, 84, 80, 0.1)",
+    warning: "#B87333",
+    warningLight: "rgba(184, 115, 51, 0.1)",
+    info: "#7A99AC",
+    infoLight: "rgba(122, 153, 172, 0.1)",
+    sidebar: {
+      bg: "#191919",
+      bgHover: "#242424",
+      text: "#999999",
+      textHover: "#FFFFFF",
+      border: "rgba(153, 153, 153, 0.1)",
+      active: "#B87333",
+      activeBg: "rgba(184, 115, 51, 0.1)"
+    },
+    card: {
+      bg: "#FFFFFF",
+      border: "#D9D9D9",
+      shadow: "rgba(25, 25, 25, 0.03)"
+    }
+  },
+  shadows: {
+    sm: "0 1px 3px rgba(25, 25, 25, 0.03)",
+    md: "0 4px 6px rgba(25, 25, 25, 0.05)",
+    lg: "0 10px 15px rgba(25, 25, 25, 0.07)",
+    xl: "0 20px 25px rgba(25, 25, 25, 0.09)"
+  },
+  transitions: {
+    fast: "150ms ease",
+    normal: "250ms ease",
+    slow: "350ms ease"
+  },
+  borderRadius: {
+    sm: "4px",
+    md: "8px",
+    lg: "12px",
+    xl: "16px",
+    full: "9999px"
+  }
+};
+var neutralOdysseyTheme = {
+  name: "Neutral Odyssey",
+  description: "Palette haut de gamme pour immobilier - \xE9l\xE9gance neutre et moderne",
+  colors: {
+    primary: "#373B4D",
+    // Gris profond, élégant - Actions fortes
+    primaryHover: "#2C2F3D",
+    // Version plus sombre pour hover
+    primaryLight: "rgba(55, 59, 77, 0.1)",
+    secondary: "#BDBFB7",
+    // Accents - éléments surlignés, cartes de projet
+    accent: "#BDBFB7",
+    background: "#ECEDEF",
+    // Fond clair principal
+    surface: "#ECECEF",
+    // Surface des cartes et panneaux
+    surfaceHover: "#E6E6E9",
+    text: {
+      primary: "#373B4D",
+      // Texte principal sur fond clair
+      secondary: "#949597",
+      // Texte secondaire / icônes
+      tertiary: "#BDBFB7",
+      // Texte tertiaire
+      inverse: "#ECECEF"
+      // Texte sur fond sombre
+    },
+    border: "#BDBFB7",
+    // Bordures principales
+    borderLight: "#E0E0E3",
+    // Bordures légères
+    success: "#6A8A82",
+    // Réutilisation du vert sauge pour succès
+    successLight: "rgba(106, 138, 130, 0.1)",
+    error: "#B85450",
+    errorLight: "rgba(184, 84, 80, 0.1)",
+    warning: "#D4AF37",
+    // Or pour les avertissements
+    warningLight: "rgba(212, 175, 55, 0.1)",
+    info: "#7A99AC",
+    infoLight: "rgba(122, 153, 172, 0.1)",
+    sidebar: {
+      bg: "linear-gradient(180deg, #ECECEF 0%, #ECEDEF 100%)",
+      // Dégradé vertical
+      bgHover: "#E6E6E9",
+      text: "#373B4D",
+      // Icônes et texte en gris profond
+      textHover: "#2C2F3D",
+      // Plus sombre au hover
+      border: "rgba(189, 191, 183, 0.2)",
+      active: "#373B4D",
+      // État actif en couleur principale
+      activeBg: "rgba(55, 59, 77, 0.1)"
+    },
+    card: {
+      bg: "#ECEDEF",
+      // Cartes sur fond légèrement différent
+      border: "#BDBFB7",
+      // Encadrement des cartes
+      shadow: "rgba(55, 59, 77, 0.08)"
+    }
+  },
+  shadows: {
+    sm: "0 1px 3px rgba(55, 59, 77, 0.08)",
+    md: "0 4px 6px rgba(55, 59, 77, 0.10)",
+    lg: "0 10px 15px rgba(55, 59, 77, 0.12)",
+    xl: "0 20px 25px rgba(55, 59, 77, 0.15)"
+  },
+  transitions: {
+    fast: "150ms ease",
+    normal: "250ms ease",
+    slow: "350ms ease"
+  },
+  borderRadius: {
+    sm: "4px",
+    md: "8px",
+    lg: "12px",
+    xl: "16px",
+    full: "9999px"
+  }
+};
+var themes = {
+  elegant: elegantTheme,
+  fintech: fintechTheme,
+  minimalist: minimalistTheme,
+  neutralOdyssey: neutralOdysseyTheme
+};
+var defaultTheme = minimalistTheme;
+var getThemeCSSVariables = (theme) => {
+  return {
+    "--color-primary": theme.colors.primary,
+    "--color-primary-hover": theme.colors.primaryHover,
+    "--color-primary-light": theme.colors.primaryLight,
+    "--color-secondary": theme.colors.secondary,
+    "--color-accent": theme.colors.accent,
+    "--color-background": theme.colors.background,
+    "--color-surface": theme.colors.surface,
+    "--color-surface-hover": theme.colors.surfaceHover,
+    "--color-text-primary": theme.colors.text.primary,
+    "--color-text-secondary": theme.colors.text.secondary,
+    "--color-text-tertiary": theme.colors.text.tertiary,
+    "--color-text-inverse": theme.colors.text.inverse,
+    "--color-border": theme.colors.border,
+    "--color-border-light": theme.colors.borderLight,
+    "--color-success": theme.colors.success,
+    "--color-success-light": theme.colors.successLight,
+    "--color-error": theme.colors.error,
+    "--color-error-light": theme.colors.errorLight,
+    "--color-warning": theme.colors.warning,
+    "--color-warning-light": theme.colors.warningLight,
+    "--color-info": theme.colors.info,
+    "--color-info-light": theme.colors.infoLight,
+    "--shadow-sm": theme.shadows.sm,
+    "--shadow-md": theme.shadows.md,
+    "--shadow-lg": theme.shadows.lg,
+    "--shadow-xl": theme.shadows.xl,
+    "--transition-fast": theme.transitions.fast,
+    "--transition-normal": theme.transitions.normal,
+    "--transition-slow": theme.transitions.slow,
+    "--radius-sm": theme.borderRadius.sm,
+    "--radius-md": theme.borderRadius.md,
+    "--radius-lg": theme.borderRadius.lg,
+    "--radius-xl": theme.borderRadius.xl,
+    "--radius-full": theme.borderRadius.full
+  };
+};
+
+// src/contexts/ThemeContext.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ThemeContext = (0, import_react.createContext)(void 0);
+var useTheme = () => {
+  const context = (0, import_react.useContext)(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+};
+var ThemeProvider = ({ children }) => {
+  const [themeType, setThemeType] = (0, import_react.useState)(() => {
+    const saved = localStorage.getItem("wisebook-theme");
+    return saved && saved in themes ? saved : "minimalist";
+  });
+  const [theme, setThemeState] = (0, import_react.useState)(themes[themeType] || defaultTheme);
+  (0, import_react.useEffect)(() => {
+    const root = document.documentElement;
+    const cssVars = getThemeCSSVariables(theme);
+    Object.entries(cssVars).forEach(([key, value]) => {
+      root.style.setProperty(key, value);
+    });
+    root.style.backgroundColor = theme.colors.background;
+    root.style.color = theme.colors.text.primary;
+    localStorage.setItem("wisebook-theme", themeType);
+  }, [theme, themeType]);
+  const setTheme = (type) => {
+    if (type in themes) {
+      setThemeType(type);
+      setThemeState(themes[type]);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ThemeContext.Provider, { value: { theme, themeType, setTheme }, children });
+};
+var ThemeContext_default = ThemeProvider;
+
+// src/components/layout/ModernDoubleSidebarLayout.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var RewiseLayout = ({ children, module_name = "Rewise", primaryMenuItems, secondaryMenuItems }) => {
+  const location = (0, import_react_router_dom.useLocation)();
+  const navigate = (0, import_react_router_dom.useNavigate)();
+  const { theme, themeType, setTheme } = useTheme();
+  const [primaryCollapsed, setPrimaryCollapsed] = (0, import_react2.useState)(false);
+  const [secondaryCollapsed, setSecondaryCollapsed] = (0, import_react2.useState)(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = (0, import_react2.useState)(false);
+  const [selectedModule, setSelectedModule] = (0, import_react2.useState)("dashboard");
+  const [searchQuery, setSearchQuery] = (0, import_react2.useState)("");
+  const [showNotifications, setShowNotifications] = (0, import_react2.useState)(false);
+  const [showUserMenu, setShowUserMenu] = (0, import_react2.useState)(false);
+  const [showThemeMenu, setShowThemeMenu] = (0, import_react2.useState)(false);
+  const [notifications, setNotifications] = (0, import_react2.useState)([
+    {
+      id: "1",
+      title: "Nouvelle facture",
+      message: "3 nouvelles factures en attente de validation",
+      type: "info",
+      timestamp: /* @__PURE__ */ new Date(),
+      read: false
+    },
+    {
+      id: "2",
+      title: "Cl\xF4ture mensuelle",
+      message: "La cl\xF4ture de janvier est pr\xEAte",
+      type: "success",
+      timestamp: /* @__PURE__ */ new Date(),
+      read: false
+    }
+  ]);
+  (0, import_react2.useEffect)(() => {
+    const handleKeyDown = (e) => {
+      if (e.altKey && e.key === "m") {
+        e.preventDefault();
+        setMobileMenuOpen((prev) => !prev);
+      }
+      if (e.altKey && e.key === "s") {
+        e.preventDefault();
+        document.getElementById("global-search")?.focus();
+      }
+      if (e.key === "Escape") {
+        setShowNotifications(false);
+        setShowUserMenu(false);
+        setShowThemeMenu(false);
+        setMobileMenuOpen(false);
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    const path = location.pathname;
+    const moduleMatch = path.match(/^\/([^/]+)/);
+    if (moduleMatch) {
+      const moduleId = moduleMatch[1];
+      const routeMapping = {
+        "dashboard": "dashboard",
+        "organizations": "organizations",
+        "entities": "entities"
+      };
+      setSelectedModule(routeMapping[moduleId] || "dashboard");
+    }
+  }, [location]);
+  const handleThemeChange = (type) => {
+    setTheme(type);
+    setShowThemeMenu(false);
+  };
+  const isActive = (path) => location.pathname === path;
+  const isModuleActive = (moduleId) => selectedModule === moduleId;
+  const getBreadcrumbs = () => {
+    const paths = location.pathname.split("/").filter(Boolean);
+    const breadcrumbs = [{ label: "Accueil", path: "/" }];
+    paths.forEach((path, index) => {
+      const fullPath = "/" + paths.slice(0, index + 1).join("/");
+      const module2 = primaryMenuItems.find((m) => m.id === path);
+      const label = module2 ? module2.label : path.charAt(0).toUpperCase() + path.slice(1);
+      breadcrumbs.push({ label, path: fullPath });
+    });
+    return breadcrumbs;
+  };
+  const markNotificationAsRead = (id) => {
+    setNotifications(
+      (prev) => prev.map((n) => n.id === id ? { ...n, read: true } : n)
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex h-screen bg-[var(--color-background)] overflow-hidden", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "a",
+      {
+        href: "#main-content",
+        className: "sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 z-50 bg-[var(--color-primary)] text-[var(--color-background)] px-4 py-2 rounded",
+        children: "Aller au contenu principal"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "aside",
+      {
+        className: cn(
+          "hidden lg:flex flex-col bg-[var(--color-sidebar-bg)] transition-all duration-300",
+          primaryCollapsed ? "w-20" : "w-64"
+        ),
+        role: "navigation",
+        "aria-label": "Navigation principale",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "h-16 flex items-center justify-between px-4 border-b border-[var(--color-sidebar-border)]", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cn(
+              "flex items-center gap-3",
+              primaryCollapsed && "justify-center"
+            ), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "w-10 h-10 bg-[var(--color-primary)] rounded-lg flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-[var(--color-background)] font-bold text-xl", children: "W" }) }),
+              !primaryCollapsed && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h1", { className: "text-[var(--color-sidebar-text)] font-bold text-lg", children: "WiseBook" }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-[var(--color-sidebar-text-secondary)] text-xs", children: "ERP Next-Gen" })
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "button",
+              {
+                onClick: () => setPrimaryCollapsed(!primaryCollapsed),
+                className: "text-[var(--color-sidebar-text-secondary)] hover:text-[var(--color-sidebar-text)] transition-colors",
+                "aria-label": primaryCollapsed ? "D\xE9velopper le menu" : "R\xE9duire le menu",
+                "aria-expanded": !primaryCollapsed,
+                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.ChevronLeft, { className: cn(
+                  "w-5 h-5 transition-transform",
+                  primaryCollapsed && "rotate-180"
+                ) })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "nav",
+            {
+              className: "flex-1 py-4 overflow-y-auto",
+              role: "menubar",
+              "aria-label": "Modules principaux",
+              children: primaryMenuItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                "button",
+                {
+                  onClick: () => {
+                    if (item.path) {
+                      navigate(item.path);
+                    } else {
+                      setSelectedModule(item.id);
+                    }
+                  },
+                  className: cn(
+                    "w-full flex items-center gap-3 px-4 py-3 transition-all duration-200",
+                    "hover:bg-[var(--color-sidebar-hover)] relative group",
+                    isModuleActive(item.id) && "bg-[var(--color-sidebar-active)] border-l-4 border-[var(--color-primary)]",
+                    primaryCollapsed && "justify-center"
+                  ),
+                  role: "menuitem",
+                  "aria-label": item.ariaLabel || item.label,
+                  "aria-current": isModuleActive(item.id) ? "page" : void 0,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: cn(
+                      "transition-colors",
+                      isModuleActive(item.id) ? "text-[var(--color-primary)]" : "text-[var(--color-sidebar-text-secondary)] group-hover:text-[var(--color-sidebar-text)]"
+                    ), children: item.icon }),
+                    !primaryCollapsed && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cn(
+                        "flex-1 text-left text-sm font-medium transition-colors",
+                        isModuleActive(item.id) ? "text-[var(--color-sidebar-text)]" : "text-[var(--color-sidebar-text-secondary)] group-hover:text-[var(--color-sidebar-text)]"
+                      ), children: item.label }),
+                      item.badge && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "px-2 py-0.5 text-xs bg-[var(--color-primary)] text-[var(--color-background)] rounded-full", children: item.badge })
+                    ] }),
+                    primaryCollapsed && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute left-full ml-2 px-2 py-1 bg-[var(--color-sidebar-active)] text-[var(--color-sidebar-text)] text-xs rounded opacity-0 group-hover:opacity-100 pointer-events-none whitespace-nowrap z-50", children: item.label })
+                  ]
+                },
+                item.id
+              ))
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "p-4 border-t border-[var(--color-sidebar-border)]", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cn(
+            "flex items-center gap-3",
+            primaryCollapsed && "justify-center"
+          ), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "w-10 h-10 bg-[var(--color-sidebar-avatar-bg)] rounded-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.User, { className: "w-5 h-5 text-[var(--color-sidebar-text-secondary)]" }) }),
+            !primaryCollapsed && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-sm font-medium text-[var(--color-sidebar-text)]", children: "Admin" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-xs text-[var(--color-sidebar-text-secondary)]", children: "admin@wisebook.com" })
+            ] })
+          ] }) })
+        ]
+      }
+    ),
+    secondaryMenuItems[selectedModule] && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+      secondaryCollapsed && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "button",
+        {
+          onClick: () => setSecondaryCollapsed(false),
+          className: "hidden lg:flex items-center justify-center w-12 h-full bg-[var(--color-background)] border-r border-[var(--color-border)] hover:bg-[var(--color-surface-hover)] transition-colors",
+          "aria-label": "Ouvrir le sous-menu",
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.ChevronRight, { className: "w-5 h-5 text-[var(--color-text-tertiary)]" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "aside",
+        {
+          className: cn(
+            "hidden lg:flex flex-col bg-[var(--color-background)] border-r border-[var(--color-border)] transition-all duration-300",
+            secondaryCollapsed ? "w-0 overflow-hidden" : "w-64"
+          ),
+          role: "navigation",
+          "aria-label": "Navigation secondaire",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "h-16 flex items-center justify-between px-4 border-b border-[var(--color-border)]", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { className: "text-sm font-semibold text-[var(--color-text-secondary)] uppercase tracking-wider whitespace-nowrap", children: primaryMenuItems.find((item) => item.id === selectedModule)?.label }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "button",
+                {
+                  onClick: () => setSecondaryCollapsed(!secondaryCollapsed),
+                  className: "text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] flex-shrink-0",
+                  "aria-label": secondaryCollapsed ? "D\xE9velopper le sous-menu" : "R\xE9duire le sous-menu",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.ChevronLeft, { className: cn(
+                    "w-4 h-4 transition-transform",
+                    secondaryCollapsed && "rotate-180"
+                  ) })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "nav",
+              {
+                className: "flex-1 py-4 overflow-y-auto",
+                role: "menu",
+                "aria-label": "Sous-navigation",
+                children: secondaryMenuItems[selectedModule]?.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  "button",
+                  {
+                    onClick: () => item.path && navigate(item.path),
+                    className: cn(
+                      "w-full flex items-center gap-3 px-4 py-2.5 transition-all duration-200",
+                      "hover:bg-[var(--color-surface-hover)]",
+                      isActive(item.path || "") && "bg-[var(--color-primary-light)] border-l-4 border-[var(--color-primary)]"
+                    ),
+                    role: "menuitem",
+                    "aria-current": isActive(item.path || "") ? "page" : void 0,
+                    children: [
+                      item.icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: cn(
+                        "transition-colors",
+                        isActive(item.path || "") ? "text-[var(--color-primary)]" : "text-[var(--color-text-tertiary)]"
+                      ), children: item.icon }),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cn(
+                        "flex-1 text-left text-sm",
+                        isActive(item.path || "") ? "text-[var(--color-primary)] font-medium" : "text-[var(--color-text-secondary)]"
+                      ), children: item.label }),
+                      item.badge && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "px-2 py-0.5 text-xs bg-[var(--color-primary)] text-white rounded-full", children: item.badge })
+                    ]
+                  },
+                  item.id
+                ))
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    mobileMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        className: "fixed inset-0 bg-black bg-opacity-50 z-50 lg:hidden",
+        onClick: () => setMobileMenuOpen(false),
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "aside",
+          {
+            className: "w-80 h-full bg-[var(--color-sidebar-bg)]",
+            onClick: (e) => e.stopPropagation(),
+            role: "navigation",
+            "aria-label": "Navigation mobile",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "h-16 flex items-center justify-between px-4 border-b border-[var(--color-sidebar-border)]", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-3", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "w-10 h-10 bg-[var(--color-primary)] rounded-lg flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-[var(--color-background)] font-bold text-xl", children: "W" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h1", { className: "text-white font-bold text-lg", children: "WiseBook" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-gray-400 text-xs", children: "ERP Next-Gen" })
+                  ] })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "button",
+                  {
+                    onClick: () => setMobileMenuOpen(false),
+                    className: "text-[var(--color-sidebar-text-secondary)]",
+                    "aria-label": "Fermer le menu",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.X, { className: "w-6 h-6" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("nav", { className: "py-4", role: "menubar", children: primaryMenuItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  "button",
+                  {
+                    onClick: () => {
+                      if (item.path) {
+                        navigate(item.path);
+                        setMobileMenuOpen(false);
+                      } else {
+                        setSelectedModule(item.id);
+                      }
+                    },
+                    className: cn(
+                      "w-full flex items-center gap-3 px-4 py-3 transition-all duration-200",
+                      "hover:bg-[var(--color-sidebar-hover)]",
+                      isModuleActive(item.id) && "bg-[var(--color-sidebar-active)] border-l-4 border-[var(--color-primary)]"
+                    ),
+                    role: "menuitem",
+                    "aria-current": isModuleActive(item.id) ? "page" : void 0,
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: cn(
+                        "transition-colors",
+                        isModuleActive(item.id) ? "text-[var(--color-primary)]" : "text-[var(--color-sidebar-text-secondary)]"
+                      ), children: item.icon }),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cn(
+                        "flex-1 text-left text-sm font-medium",
+                        isModuleActive(item.id) ? "text-[var(--color-sidebar-text)]" : "text-[var(--color-sidebar-text-secondary)]"
+                      ), children: item.label }),
+                      item.badge && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "px-2 py-0.5 text-xs bg-[var(--color-primary)] text-[var(--color-background)] rounded-full", children: item.badge })
+                    ]
+                  }
+                ),
+                isModuleActive(item.id) && secondaryMenuItems[item.id] && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "bg-[var(--color-sidebar-submenu-bg)] py-2", children: secondaryMenuItems[item.id].map((subItem) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  "button",
+                  {
+                    onClick: () => {
+                      if (subItem.path) {
+                        navigate(subItem.path);
+                        setMobileMenuOpen(false);
+                      }
+                    },
+                    className: cn(
+                      "w-full flex items-center gap-3 pl-12 pr-4 py-2 text-sm",
+                      "hover:bg-[var(--color-sidebar-hover)]",
+                      isActive(subItem.path || "") && "bg-[var(--color-sidebar-active)] text-[var(--color-primary)]"
+                    ),
+                    children: [
+                      subItem.icon,
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cn(
+                        isActive(subItem.path || "") ? "text-[var(--color-primary)]" : "text-[var(--color-sidebar-text-secondary)]"
+                      ), children: subItem.label })
+                    ]
+                  },
+                  subItem.id
+                )) })
+              ] }, item.id)) })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex-1 flex flex-col overflow-hidden", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "header",
+        {
+          className: "h-14 bg-[var(--color-background)] border-b border-[var(--color-border)] flex items-center justify-between px-3 lg:px-4",
+          role: "banner",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-4 flex-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "button",
+                {
+                  onClick: () => setMobileMenuOpen(true),
+                  className: "lg:hidden text-[var(--color-text-primary)]",
+                  "aria-label": "Ouvrir le menu mobile",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Menu, { className: "w-6 h-6" })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "nav",
+                {
+                  className: "hidden sm:flex items-center gap-2 text-sm",
+                  "aria-label": "Fil d'Ariane",
+                  children: getBreadcrumbs().map((crumb, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react2.default.Fragment, { children: [
+                    index > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.ChevronRight, { className: "w-4 h-4 text-[var(--color-text-tertiary)]" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      "button",
+                      {
+                        onClick: () => navigate(crumb.path),
+                        className: cn(
+                          "hover:text-[var(--color-primary)]",
+                          index === getBreadcrumbs().length - 1 ? "text-[var(--color-text-primary)] font-medium" : "text-[var(--color-text-tertiary)]"
+                        ),
+                        children: crumb.label
+                      }
+                    )
+                  ] }, crumb.path))
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative max-w-md flex-1 hidden lg:block", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 text-[var(--color-text-tertiary)] w-5 h-5" }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "input",
+                  {
+                    id: "global-search",
+                    type: "text",
+                    placeholder: "Rechercher... (Alt+S)",
+                    value: searchQuery,
+                    onChange: (e) => setSearchQuery(e.target.value),
+                    className: "w-full pl-10 pr-4 py-2 bg-[var(--color-surface-hover)] border border-[var(--color-border)] rounded-lg text-sm focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary-light)]",
+                    "aria-label": "Recherche globale"
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "button",
+                  {
+                    onClick: () => setShowThemeMenu(!showThemeMenu),
+                    className: "p-2 hover:bg-[var(--color-surface-hover)] rounded-lg transition-colors",
+                    title: "Changer le th\xE8me",
+                    "aria-label": "S\xE9lecteur de th\xE8me",
+                    "aria-expanded": showThemeMenu,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Palette, { className: "w-5 h-5 text-[var(--color-text-secondary)]" })
+                  }
+                ),
+                showThemeMenu && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "div",
+                  {
+                    className: "absolute right-0 mt-2 w-64 bg-[var(--color-background)] rounded-lg shadow-xl border border-[var(--color-border)] z-50",
+                    role: "menu",
+                    "aria-label": "S\xE9lection du th\xE8me",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "p-2", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "px-3 py-2 text-xs font-semibold text-[var(--color-text-tertiary)] uppercase", children: "Th\xE8mes disponibles" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                        "button",
+                        {
+                          onClick: () => handleThemeChange("elegant"),
+                          className: cn(
+                            "w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-[var(--color-surface-hover)] transition-colors",
+                            themeType === "elegant" && "bg-[var(--color-primary-light)]"
+                          ),
+                          role: "menuitem",
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "w-10 h-10 rounded-lg bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-accent)]" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "text-left", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-sm font-medium", children: "\xC9l\xE9gance Sobre" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-xs text-[var(--color-text-tertiary)]", children: "Finance traditionnelle" })
+                            ] })
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                        "button",
+                        {
+                          onClick: () => handleThemeChange("fintech"),
+                          className: cn(
+                            "w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-[var(--color-surface-hover)] transition-colors",
+                            themeType === "fintech" && "bg-[var(--color-primary-light)]"
+                          ),
+                          role: "menuitem",
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "w-10 h-10 rounded-lg bg-gradient-to-br from-[var(--color-success)] to-[var(--color-text-primary)]" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "text-left", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-sm font-medium", children: "Modern Fintech" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-xs text-[var(--color-text-tertiary)]", children: "Tableau de bord moderne" })
+                            ] })
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                        "button",
+                        {
+                          onClick: () => handleThemeChange("minimalist"),
+                          className: cn(
+                            "w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-[var(--color-surface-hover)] transition-colors",
+                            themeType === "minimalist" && "bg-[var(--color-primary-light)]"
+                          ),
+                          role: "menuitem",
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "w-10 h-10 rounded-lg bg-gradient-to-br from-[var(--color-text-secondary)] to-[var(--color-accent)]" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "text-left", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-sm font-medium", children: "Minimaliste Premium" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-xs text-[var(--color-text-tertiary)]", children: "\xC9l\xE9gance minimaliste" })
+                            ] })
+                          ]
+                        }
+                      )
+                    ] })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center px-3 py-1.5 bg-[var(--color-surface)] rounded-lg border border-[var(--color-border)]", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.DollarSign, { className: "w-4 h-4 text-[var(--color-primary)] mr-2" }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-sm font-medium text-[var(--color-text-primary)]", children: "FCFA" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  "button",
+                  {
+                    className: "relative p-2 hover:bg-[var(--color-surface-hover)] rounded-lg transition-colors",
+                    onClick: () => setShowNotifications(!showNotifications),
+                    "aria-label": `Notifications ${notifications.filter((n) => !n.read).length > 0 ? `(${notifications.filter((n) => !n.read).length} non lues)` : ""}`,
+                    "aria-expanded": showNotifications,
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Bell, { className: "w-5 h-5 text-[var(--color-text-secondary)]" }),
+                      notifications.filter((n) => !n.read).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "absolute top-1 right-1 w-2 h-2 bg-[var(--color-error)] rounded-full" })
+                    ]
+                  }
+                ),
+                showNotifications && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  "div",
+                  {
+                    className: "absolute right-0 mt-2 w-80 bg-[var(--color-background)] rounded-lg shadow-xl border border-[var(--color-border)] z-50 max-h-96 overflow-y-auto",
+                    role: "region",
+                    "aria-label": "Centre de notifications",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "p-4 border-b border-[var(--color-border)]", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: "font-semibold text-[var(--color-text-primary)]", children: "Notifications" }) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "divide-y divide-[var(--color-border)]", children: notifications.map((notif) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "div",
+                        {
+                          className: cn(
+                            "p-4 hover:bg-[var(--color-surface-hover)] cursor-pointer",
+                            !notif.read && "bg-[var(--color-primary-light)] bg-opacity-10"
+                          ),
+                          onClick: () => markNotificationAsRead(notif.id),
+                          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-start gap-3", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: cn(
+                              "w-2 h-2 rounded-full mt-2",
+                              notif.type === "error" && "bg-[var(--color-error)]",
+                              notif.type === "warning" && "bg-[var(--color-warning)]",
+                              notif.type === "success" && "bg-[var(--color-success)]",
+                              notif.type === "info" && "bg-[var(--color-info)]"
+                            ) }),
+                            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex-1", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-sm font-medium text-[var(--color-text-primary)]", children: notif.title }),
+                              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-xs text-[var(--color-text-secondary)] mt-1", children: notif.message }),
+                              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-xs text-[var(--color-text-tertiary)] mt-2", children: notif.timestamp.toLocaleTimeString() })
+                            ] })
+                          ] })
+                        },
+                        notif.id
+                      )) })
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "button",
+                  {
+                    onClick: () => setShowUserMenu(!showUserMenu),
+                    className: "flex items-center gap-2 p-2 hover:bg-[var(--color-surface-hover)] rounded-lg transition-colors",
+                    "aria-label": "Menu utilisateur",
+                    "aria-expanded": showUserMenu,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "w-8 h-8 bg-[var(--color-primary)] rounded-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.User, { className: "w-4 h-4 text-[var(--color-background)]" }) })
+                  }
+                ),
+                showUserMenu && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "div",
+                  {
+                    className: "absolute right-0 mt-2 w-56 bg-[var(--color-background)] rounded-lg shadow-xl border border-[var(--color-border)] z-50",
+                    role: "menu",
+                    "aria-label": "Menu utilisateur",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "p-2", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                        "button",
+                        {
+                          className: "w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-[var(--color-surface-hover)] transition-colors",
+                          role: "menuitem",
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.User, { className: "w-4 h-4" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-sm", children: "Mon profil" })
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                        "button",
+                        {
+                          onClick: () => {
+                            navigate("/settings");
+                            setShowUserMenu(false);
+                          },
+                          className: "w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-[var(--color-surface-hover)] transition-colors",
+                          role: "menuitem",
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Settings, { className: "w-4 h-4" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-sm", children: "Param\xE8tres" })
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                        "button",
+                        {
+                          className: "w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-[var(--color-surface-hover)] transition-colors",
+                          role: "menuitem",
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.HelpCircle, { className: "w-4 h-4" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-sm", children: "Aide" })
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("hr", { className: "my-2 border-[var(--color-border)]" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                        "button",
+                        {
+                          className: "w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-[var(--color-surface-hover)] text-[var(--color-error)] transition-colors",
+                          role: "menuitem",
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.LogOut, { className: "w-4 h-4" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-sm", children: "D\xE9connexion" })
+                          ]
+                        }
+                      )
+                    ] })
+                  }
+                )
+              ] })
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "main",
+        {
+          id: "main-content",
+          className: "flex-1 overflow-y-auto bg-[var(--color-background)]",
+          role: "main",
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "p-3 lg:p-4", children })
+        }
+      )
+    ] })
+  ] });
+};
+var ModernDoubleSidebarLayout_default = RewiseLayout;
+
+// src/components/ui/Toast.tsx
+var import_react4 = require("react");
+
+// src/contexts/ToastContext.tsx
+var import_react3 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ToastContext = (0, import_react3.createContext)(void 0);
+var useToast = () => {
+  const context = (0, import_react3.useContext)(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+};
+var ToastProvider = ({ children }) => {
+  const [toasts, setToasts] = (0, import_react3.useState)([]);
+  const generateId = () => {
+    return Date.now().toString(36) + Math.random().toString(36).substr(2);
+  };
+  const addToast = (0, import_react3.useCallback)((toast) => {
+    const id = generateId();
+    const newToast = {
+      id,
+      duration: 5e3,
+      ...toast
+    };
+    setToasts((prev) => [...prev, newToast]);
+    if (newToast.duration && newToast.duration > 0) {
+      setTimeout(() => {
+        removeToast(id);
+      }, newToast.duration);
+    }
+  }, []);
+  const removeToast = (0, import_react3.useCallback)((id) => {
+    setToasts((prev) => prev.filter((toast) => toast.id !== id));
+  }, []);
+  const success = (0, import_react3.useCallback)((message, duration) => {
+    addToast({ message, type: "success", duration });
+  }, [addToast]);
+  const error = (0, import_react3.useCallback)((message, duration) => {
+    addToast({ message, type: "error", duration });
+  }, [addToast]);
+  const warning = (0, import_react3.useCallback)((message, duration) => {
+    addToast({ message, type: "warning", duration });
+  }, [addToast]);
+  const info = (0, import_react3.useCallback)((message, duration) => {
+    addToast({ message, type: "info", duration });
+  }, [addToast]);
+  const value = {
+    toasts,
+    addToast,
+    removeToast,
+    success,
+    error,
+    warning,
+    info
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ToastContext.Provider, { value, children });
+};
+
+// src/components/ui/Toast.tsx
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ToastItem = ({ toast }) => {
+  const { removeToast } = useToast();
+  const [isVisible, setIsVisible] = (0, import_react4.useState)(false);
+  const [isLeaving, setIsLeaving] = (0, import_react4.useState)(false);
+  (0, import_react4.useEffect)(() => {
+    const timer = setTimeout(() => setIsVisible(true), 10);
+    return () => clearTimeout(timer);
+  }, []);
+  const handleClose = () => {
+    setIsLeaving(true);
+    setTimeout(() => {
+      removeToast(toast.id);
+    }, 300);
+  };
+  const getIcon = () => {
+    switch (toast.type) {
+      case "success":
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.CheckCircle, { className: "w-5 h-5 text-green-600" });
+      case "error":
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.XCircle, { className: "w-5 h-5 text-red-600" });
+      case "warning":
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.AlertTriangle, { className: "w-5 h-5 text-yellow-600" });
+      case "info":
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.Info, { className: "w-5 h-5 text-blue-600" });
+    }
+  };
+  const getBackgroundColor = () => {
+    switch (toast.type) {
+      case "success":
+        return "bg-green-50 border-green-200";
+      case "error":
+        return "bg-red-50 border-red-200";
+      case "warning":
+        return "bg-yellow-50 border-yellow-200";
+      case "info":
+        return "bg-blue-50 border-blue-200";
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      className: `
+        transform transition-all duration-300 ease-in-out
+        ${isVisible && !isLeaving ? "translate-x-0 opacity-100" : "translate-x-full opacity-0"}
+        ${getBackgroundColor()}
+        max-w-sm w-full border rounded-lg p-4 shadow-lg
+        flex items-start space-x-3
+      `,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex-shrink-0", children: getIcon() }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-sm text-gray-900 font-medium", children: toast.message }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "button",
+          {
+            onClick: handleClose,
+            className: "flex-shrink-0 ml-4 text-gray-400 hover:text-gray-600 transition-colors",
+            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.X, { className: "w-4 h-4" })
+          }
+        )
+      ]
+    }
+  );
+};
+var ToastContainer = () => {
+  const { toasts } = useToast();
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "fixed top-4 right-4 z-50 space-y-3", children: toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ToastItem, { toast }, toast.id)) });
+};
+var Toast_default = ToastContainer;
+
+// src/contexts/SessionContext.tsx
+var import_react5 = require("react");
+
+// src/services/api.ts
+var ADDRESS_IP = "localhost:8000";
+var ADDRESS_IP_URL = `http://${ADDRESS_IP}/`;
+var API_URL = `${ADDRESS_IP_URL}api`;
+
+// src/services/AuthServices.ts
+var API_BASE_URL = `${API_URL}/core/auth/`;
+var FetchApi = class {
+  static async post(url, payload, token) {
+    const headers = {
+      "Content-Type": "application/json"
+    };
+    if (token) {
+      headers["Authorization"] = `Token ${token}`;
+    }
+    const res = await fetch(url, {
+      method: "POST",
+      headers,
+      body: payload ? JSON.stringify(payload) : void 0
+    });
+    if (!res.ok) throw new Error(await res.text());
+    return res.json();
+  }
+  static async get(url, token) {
+    const headers = {};
+    if (token) {
+      headers["Authorization"] = `Token ${token}`;
+    }
+    const res = await fetch(url, {
+      method: "GET",
+      headers
+    });
+    if (!res.ok) throw new Error(await res.text());
+    return res.json();
+  }
+};
+var AuthServices = {
+  sendOtp: (payload) => FetchApi.post(`${API_BASE_URL}send-otp/`, payload),
+  verifyOtp: (payload) => FetchApi.post(`${API_BASE_URL}verify-otp/`, payload),
+  completeRegistration: (payload) => FetchApi.post(`${API_BASE_URL}complete-registration/`, payload),
+  addUser: (payload) => FetchApi.post(`${API_BASE_URL}add-user/`, payload),
+  login: (payload) => FetchApi.post(`${API_BASE_URL}login/`, payload),
+  getUserInformations: (token) => FetchApi.get(`${API_BASE_URL}user-informations/`, token),
+  logout: () => FetchApi.post(`${API_BASE_URL}logout/`)
+};
+
+// src/contexts/SessionContext.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var SessionContext = (0, import_react5.createContext)(void 0);
+var SessionProvider = ({ children }) => {
+  const [token, setToken] = (0, import_react5.useState)(localStorage.getItem("token"));
+  const [loggedUser, setLoggedUser] = (0, import_react5.useState)(null);
+  (0, import_react5.useEffect)(() => {
+    const storedToken = localStorage.getItem("token");
+    if (storedToken) {
+      setToken(storedToken);
+    }
+  }, []);
+  const login = (newToken) => {
+    localStorage.setItem("token", newToken);
+    setToken(newToken);
+  };
+  const logout = () => {
+    localStorage.removeItem("token");
+    setToken(null);
+  };
+  (0, import_react5.useEffect)(() => {
+    if (token) {
+      AuthServices.getUserInformations(token).then((res) => {
+        const result = res;
+        if (result.success === true) {
+          setLoggedUser(result.data.user);
+        } else {
+          setLoggedUser(null);
+        }
+      }).catch(() => setLoggedUser(null));
+    } else {
+      setLoggedUser(null);
+    }
+  }, [token]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SessionContext.Provider, { value: {
+    isAuthenticated: !!token,
+    loggedUser,
+    token,
+    login,
+    logout
+  }, children });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PrimaryButton,
+  RewiseLayout,
+  SecondaryButton,
+  SessionProvider,
+  ThemeProvider,
+  ToastContainer,
+  ToastProvider
+});