@specscreen/backoffice-core 0.1.1

package/dist/index.js

@@ -0,0 +1,1565 @@
+import * as React11 from 'react';
+import React11__default, { createContext, useReducer, useEffect, useCallback, useMemo, useContext, useState } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { ChevronDown, Check, Loader2, LayoutPanelTop, EllipsisVertical, ChevronRight, PanelLeft, Plus, ShieldOff, X, Settings, CircleDot, UserCog, MoreHorizontal, ChevronLeft, ChevronsLeft, ChevronsRight } from 'lucide-react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { createPortal } from 'react-dom';
+import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter } from '@dnd-kit/core';
+import { sortableKeyboardCoordinates, arrayMove, SortableContext, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
+
+// src/core/auth/AuthContext.tsx
+
+// src/core/rbac/evaluator.ts
+function canAccessResource(user, meta) {
+  if (!meta) return true;
+  const { requiredRoles, requiredPermissions } = meta;
+  const hasRoleConstraint = requiredRoles && requiredRoles.length > 0;
+  const hasPermissionConstraint = requiredPermissions && requiredPermissions.length > 0;
+  if (!hasRoleConstraint && !hasPermissionConstraint) return true;
+  if (!user) return false;
+  if (hasRoleConstraint) {
+    const userRoles = user.roles ?? [];
+    const rolesPassed = requiredRoles.some((role) => userRoles.includes(role));
+    if (!rolesPassed) return false;
+  }
+  if (hasPermissionConstraint) {
+    const userPermissions = user.permissions ?? [];
+    const permissionsPassed = requiredPermissions.every(
+      (perm) => userPermissions.includes(perm)
+    );
+    if (!permissionsPassed) return false;
+  }
+  return true;
+}
+function evaluateCan(user, permission) {
+  if (!user) return false;
+  return (user.permissions ?? []).includes(permission);
+}
+function evaluateHasRole(user, role) {
+  if (!user) return false;
+  return (user.roles ?? []).includes(role);
+}
+function evaluateCanAny(user, permissions) {
+  if (!user || permissions.length === 0) return false;
+  const userPermissions = user.permissions ?? [];
+  return permissions.some((perm) => userPermissions.includes(perm));
+}
+function evaluateCanAll(user, permissions) {
+  if (!user || permissions.length === 0) return false;
+  const userPermissions = user.permissions ?? [];
+  return permissions.every((perm) => userPermissions.includes(perm));
+}
+function authReducer(state, action) {
+  switch (action.type) {
+    case "LOADING":
+      return { ...state, isLoading: true, error: null };
+    case "AUTHENTICATED":
+      return {
+        isLoading: false,
+        isAuthenticated: true,
+        user: action.user,
+        error: null
+      };
+    case "UNAUTHENTICATED":
+      return {
+        isLoading: false,
+        isAuthenticated: false,
+        user: null,
+        error: null
+      };
+    case "ERROR":
+      return {
+        isLoading: false,
+        isAuthenticated: false,
+        user: null,
+        error: action.error
+      };
+    case "USER_UPDATED":
+      return { ...state, user: action.user };
+    default:
+      return state;
+  }
+}
+var initialState = {
+  isLoading: true,
+  isAuthenticated: false,
+  user: null,
+  error: null
+};
+var AuthContext = createContext(null);
+function AuthContextProvider({
+  authProvider,
+  children
+}) {
+  const [state, dispatch] = useReducer(authReducer, initialState);
+  useEffect(() => {
+    let cancelled = false;
+    async function boot() {
+      dispatch({ type: "LOADING" });
+      try {
+        const isAuthenticated = await authProvider.checkAuth();
+        if (cancelled) return;
+        if (!isAuthenticated) {
+          dispatch({ type: "UNAUTHENTICATED" });
+          return;
+        }
+        const user = await authProvider.getUser();
+        if (cancelled) return;
+        if (user) {
+          dispatch({ type: "AUTHENTICATED", user });
+        } else {
+          dispatch({ type: "UNAUTHENTICATED" });
+        }
+      } catch {
+        if (!cancelled) dispatch({ type: "UNAUTHENTICATED" });
+      }
+    }
+    boot();
+    return () => {
+      cancelled = true;
+    };
+  }, [authProvider]);
+  const login = useCallback(
+    async (params) => {
+      dispatch({ type: "LOADING" });
+      await authProvider.login(params);
+      const user = await authProvider.getUser();
+      if (user) {
+        dispatch({ type: "AUTHENTICATED", user });
+      } else {
+        dispatch({ type: "ERROR", error: "Failed to retrieve user after login." });
+      }
+    },
+    [authProvider]
+  );
+  const logout = useCallback(async () => {
+    try {
+      await authProvider.logout();
+    } catch (err) {
+      console.error("[BackofficeApp] Logout error:", err);
+    } finally {
+      dispatch({ type: "UNAUTHENTICATED" });
+    }
+  }, [authProvider]);
+  const refreshUser = useCallback(async () => {
+    const user = await authProvider.getUser();
+    if (user) dispatch({ type: "USER_UPDATED", user });
+  }, [authProvider]);
+  const can = useCallback(
+    (permission) => evaluateCan(state.user, permission),
+    [state.user]
+  );
+  const canAny = useCallback(
+    (permissions) => evaluateCanAny(state.user, permissions),
+    [state.user]
+  );
+  const canAll = useCallback(
+    (permissions) => evaluateCanAll(state.user, permissions),
+    [state.user]
+  );
+  const hasRole = useCallback(
+    (role) => evaluateHasRole(state.user, role),
+    [state.user]
+  );
+  const value = useMemo(
+    () => ({
+      ...state,
+      login,
+      logout,
+      refreshUser,
+      can,
+      canAny,
+      canAll,
+      hasRole
+    }),
+    [state, login, logout, refreshUser, can, canAny, canAll, hasRole]
+  );
+  return /* @__PURE__ */ jsx(AuthContext.Provider, { value, children });
+}
+function useAuthContext() {
+  const ctx = useContext(AuthContext);
+  if (!ctx) {
+    throw new Error("useAuthContext must be used inside <BackofficeApp>.");
+  }
+  return ctx;
+}
+function LoadingScreen({ message }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-screen w-full flex-col items-center justify-center gap-3 bg-background", children: [
+    /* @__PURE__ */ jsx(Loader2, { className: "size-8 animate-spin text-muted-foreground" }),
+    message && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: message })
+  ] });
+}
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-50 cursor-pointer",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90",
+        outline: "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-lg px-6",
+        icon: "size-8"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React11.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var Input = React11.forwardRef(({ className, type, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type,
+      className: cn(
+        "flex h-9 w-full rounded-lg border border-input bg-background px-3 py-1 text-base shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ref,
+      ...props
+    }
+  );
+});
+Input.displayName = "Input";
+var Label = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  LabelPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+      className
+    ),
+    ...props
+  }
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+function LoginPage({
+  appName = "backoffice",
+  logo,
+  onLoginSuccess,
+  onForgotPassword,
+  description
+}) {
+  const { login, isLoading, error } = useAuthContext();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [localError, setLocalError] = useState(null);
+  const [attempts, setAttempts] = useState(0);
+  const MAX_ATTEMPTS = 10;
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setLocalError(null);
+    if (!email.trim() || !password) {
+      setLocalError("Please enter your email and password.");
+      return;
+    }
+    setAttempts((n) => n + 1);
+    if (attempts >= MAX_ATTEMPTS) {
+      setLocalError("Too many failed attempts. Please wait before trying again.");
+      return;
+    }
+    try {
+      await login({ email: email.trim(), password });
+      setAttempts(0);
+      onLoginSuccess?.();
+    } catch (err) {
+      console.error("[BackofficeApp] Login error:", err);
+      setLocalError("Invalid email or password.");
+    }
+  }
+  const displayError = localError ?? (error ? "Authentication error. Please try again." : null);
+  return /* @__PURE__ */ jsx("div", { className: "min-h-screen w-full bg-background flex items-center justify-center p-4", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-sm rounded-xl border border-border bg-background shadow-xs overflow-hidden p-10", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 pb-8", children: [
+      logo ? /* @__PURE__ */ jsx("div", { className: "size-6", children: logo }) : /* @__PURE__ */ jsx("div", { className: "size-6 rounded-full bg-foreground flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-background text-xs font-bold", children: "B" }) }),
+      /* @__PURE__ */ jsxs("h1", { className: "text-xl font-semibold text-foreground text-center", children: [
+        "Welcome to ",
+        appName
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground text-center", children: description ?? "Enter your email below to login to your account" })
+    ] }),
+    /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "email", children: "Email" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "email",
+            type: "email",
+            placeholder: "m@example.com",
+            autoComplete: "email",
+            required: true,
+            value: email,
+            onChange: (e) => setEmail(e.target.value),
+            disabled: isLoading
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "password", children: "Password" }),
+          onForgotPassword && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onForgotPassword,
+              className: "text-sm text-foreground hover:underline",
+              children: "Forgot password?"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "password",
+            type: "password",
+            autoComplete: "current-password",
+            required: true,
+            value: password,
+            onChange: (e) => setPassword(e.target.value),
+            disabled: isLoading
+          }
+        )
+      ] }),
+      displayError && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive text-center", role: "alert", children: displayError }),
+      /* @__PURE__ */ jsx(Button, { type: "submit", className: "w-full", disabled: isLoading, children: isLoading ? "Logging in\u2026" : "Log in" })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "mt-4 text-sm text-muted-foreground text-center", children: "Don't have an account? Ask an admin for access." })
+  ] }) });
+}
+function AuthGuard({
+  children,
+  loginPageProps,
+  renderLogin,
+  renderLoading,
+  onLoginSuccess
+}) {
+  const { isLoading, isAuthenticated, error } = useAuthContext();
+  if (isLoading) {
+    return renderLoading ? /* @__PURE__ */ jsx(Fragment, { children: renderLoading() }) : /* @__PURE__ */ jsx(LoadingScreen, {});
+  }
+  if (!isAuthenticated || error) {
+    if (renderLogin) return /* @__PURE__ */ jsx(Fragment, { children: renderLogin() });
+    return /* @__PURE__ */ jsx(
+      LoginPage,
+      {
+        ...loginPageProps,
+        onLoginSuccess
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+var DefaultNavLink = ({
+  href,
+  children,
+  className,
+  onClick
+}) => /* @__PURE__ */ jsx("a", { href, className, onClick, children });
+function SidebarItem({
+  label,
+  path,
+  icon: Icon2,
+  isActive,
+  NavLink
+}) {
+  return /* @__PURE__ */ jsxs(
+    NavLink,
+    {
+      href: path,
+      isActive,
+      className: cn(
+        "flex h-8 w-full items-center gap-2 rounded-lg px-2 text-sm text-sidebar-foreground transition-colors",
+        "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        isActive && "bg-sidebar-accent text-sidebar-accent-foreground font-medium"
+      ),
+      children: [
+        Icon2 && /* @__PURE__ */ jsx(Icon2, { className: "size-4 shrink-0" }),
+        /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: label })
+      ]
+    }
+  );
+}
+function Sidebar({
+  config,
+  currentPath,
+  NavLink = DefaultNavLink,
+  onLogout
+}) {
+  const { user } = useAuthContext();
+  const [userMenuOpen, setUserMenuOpen] = useState(false);
+  const headerName = config.companyName ?? config.appName;
+  const websiteLabel = config.goToWebsite?.label ?? "Go to website";
+  const WebsiteIcon = config.goToWebsite?.icon ?? LayoutPanelTop;
+  const websiteTarget = config.goToWebsite?.target ?? "_blank";
+  const groups = config.sidebarGroups ?? (config.resources ? [{ label: "", resources: config.resources }] : []);
+  return /* @__PURE__ */ jsxs("aside", { className: "flex h-full w-[255px] shrink-0 flex-col border-r border-sidebar-border bg-sidebar", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 border-b border-sidebar-border px-2 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex h-8 w-full items-center gap-2 px-1.5", children: [
+      typeof config.logo === "string" ? /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: config.logo,
+          alt: headerName,
+          className: "size-5 shrink-0"
+        }
+      ) : config.logo ? /* @__PURE__ */ jsx(config.logo, { className: "size-5 shrink-0" }) : /* @__PURE__ */ jsx("div", { className: "size-5 shrink-0 rounded-sm bg-foreground flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-background text-[10px] font-bold leading-none", children: headerName.charAt(0).toUpperCase() }) }),
+      /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-base font-semibold text-foreground", children: headerName })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col gap-2 overflow-y-auto", children: groups.map((group, gi) => /* @__PURE__ */ jsx(
+      FilteredGroup,
+      {
+        group,
+        currentPath,
+        NavLink,
+        user
+      },
+      group.label || gi
+    )) }),
+    config.sidebarFooterLinks && config.sidebarFooterLinks.length > 0 || config.goToWebsite ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 p-2", children: [
+      config.sidebarFooterLinks?.map((link) => /* @__PURE__ */ jsxs(
+        NavLink,
+        {
+          href: link.path,
+          isActive: currentPath === link.path,
+          className: cn(
+            "flex h-8 w-full items-center gap-2 rounded-lg px-2 text-sm text-sidebar-foreground transition-colors",
+            "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+            currentPath === link.path && "bg-sidebar-accent text-sidebar-accent-foreground"
+          ),
+          children: [
+            link.icon && /* @__PURE__ */ jsx(link.icon, { className: "size-4 shrink-0" }),
+            /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: link.label })
+          ]
+        },
+        link.path
+      )),
+      config.goToWebsite && /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: config.goToWebsite.url,
+          target: websiteTarget,
+          rel: websiteTarget === "_blank" ? "noreferrer noopener" : void 0,
+          className: cn(
+            "flex h-8 w-full items-center gap-2 rounded-lg px-2 text-sm text-sidebar-foreground transition-colors",
+            "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(WebsiteIcon, { className: "size-4 shrink-0" }),
+            /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: websiteLabel })
+          ]
+        }
+      )
+    ] }) : null,
+    user && /* @__PURE__ */ jsx("div", { className: "flex flex-col p-2", children: /* @__PURE__ */ jsxs("div", { className: "relative flex items-center gap-2 p-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
+        /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-semibold text-sidebar-foreground", children: user.name ?? user.email.split("@")[0] }),
+        /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-muted-foreground", children: user.email })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "size-4 shrink-0 text-muted-foreground hover:text-foreground",
+          onClick: () => setUserMenuOpen((v) => !v),
+          "aria-label": "User menu",
+          children: /* @__PURE__ */ jsx(EllipsisVertical, { className: "size-4" })
+        }
+      ),
+      userMenuOpen && /* @__PURE__ */ jsx("div", { className: "absolute bottom-full right-0 mb-1 w-40 rounded-lg border border-border bg-background shadow-sm py-1 z-50", children: onLogout && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "w-full px-3 py-1.5 text-left text-sm text-foreground hover:bg-accent",
+          onClick: () => {
+            setUserMenuOpen(false);
+            onLogout();
+          },
+          children: "Log out"
+        }
+      ) })
+    ] }) })
+  ] });
+}
+function FilteredGroup({
+  group,
+  currentPath,
+  NavLink,
+  user
+}) {
+  const visibleResources = group.resources.filter((r) => {
+    const hideIfUnauthorized = r.meta?.hideIfUnauthorized ?? true;
+    if (!hideIfUnauthorized) return true;
+    return canAccessResource(user, r.meta);
+  });
+  if (visibleResources.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col p-2", children: [
+    group.label && /* @__PURE__ */ jsx("div", { className: "mb-1 flex h-8 items-center px-2 opacity-70", children: /* @__PURE__ */ jsx("span", { className: "text-xs text-sidebar-foreground", children: group.label }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: visibleResources.map((resource) => /* @__PURE__ */ jsx(
+      SidebarItem,
+      {
+        resource,
+        label: resource.label,
+        path: resource.path,
+        icon: resource.icon,
+        isActive: currentPath === resource.path || currentPath?.startsWith(resource.path + "/"),
+        NavLink
+      },
+      resource.name
+    )) })
+  ] });
+}
+function SidebarToggle({ collapsed, onToggle }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: onToggle,
+      className: "flex size-7 items-center justify-center rounded-lg hover:bg-accent transition-colors",
+      "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+      children: collapsed ? /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" }) : /* @__PURE__ */ jsx(PanelLeft, { className: "size-4" })
+    }
+  );
+}
+function AppShell({
+  config,
+  currentPath,
+  NavLink,
+  headerActionLabel,
+  onHeaderAction,
+  children
+}) {
+  const { logout } = useAuthContext();
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const allResources = config.resources ?? config.sidebarGroups?.flatMap((g) => g.resources) ?? [];
+  const activeResource = allResources.find(
+    (r) => currentPath === r.path || currentPath?.startsWith(r.path + "/")
+  );
+  const pageTitle = activeResource?.label ?? config.appName;
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-screen w-full overflow-hidden bg-background", children: [
+    !sidebarCollapsed && /* @__PURE__ */ jsx(
+      Sidebar,
+      {
+        config,
+        currentPath,
+        NavLink,
+        onLogout: logout
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden min-w-0", children: [
+      /* @__PURE__ */ jsxs("header", { className: "flex shrink-0 items-center justify-between border-b border-border px-6 py-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setSidebarCollapsed((v) => !v),
+              className: "flex size-7 items-center justify-center rounded-lg hover:bg-accent transition-colors",
+              "aria-label": "Toggle sidebar",
+              children: /* @__PURE__ */ jsx(PanelLeft, { className: "size-4 text-foreground" })
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "mx-2 h-[17px] w-px bg-border", "aria-hidden": true }),
+          /* @__PURE__ */ jsx("h1", { className: "text-base font-semibold text-foreground", children: pageTitle })
+        ] }),
+        headerActionLabel && onHeaderAction && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onHeaderAction,
+            className: cn(
+              "inline-flex items-center gap-1.5 rounded-lg bg-foreground px-2.5 py-1.5",
+              "text-sm font-medium text-background shadow-xs transition-opacity hover:opacity-90"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(Plus, { className: "size-4" }),
+              headerActionLabel
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("main", { className: "flex-1 overflow-auto p-6", children })
+    ] })
+  ] });
+}
+function BackofficeApp({
+  config,
+  authProvider,
+  NavLink,
+  currentPath,
+  loginPageProps,
+  renderLogin,
+  renderLoading,
+  headerActionLabel,
+  onHeaderAction,
+  onLoginSuccess,
+  children
+}) {
+  return /* @__PURE__ */ jsx(AuthContextProvider, { authProvider, children: /* @__PURE__ */ jsx(
+    AuthGuard,
+    {
+      loginPageProps,
+      renderLogin,
+      renderLoading,
+      onLoginSuccess,
+      children: /* @__PURE__ */ jsx(
+        AppShell,
+        {
+          config,
+          currentPath,
+          NavLink,
+          headerActionLabel,
+          onHeaderAction,
+          children: children ?? config.children
+        }
+      )
+    }
+  ) });
+}
+
+// src/hooks/useAuth.ts
+function useAuth() {
+  const { isLoading, isAuthenticated, user, error, login, logout, refreshUser } = useAuthContext();
+  return { isLoading, isAuthenticated, user, error, login, logout, refreshUser };
+}
+
+// src/hooks/usePermissions.ts
+function usePermissions() {
+  const { user, can, canAny, canAll, hasRole } = useAuthContext();
+  return {
+    roles: user?.roles ?? [],
+    permissions: user?.permissions ?? [],
+    can,
+    canAny,
+    canAll,
+    hasRole
+  };
+}
+function AccessDenied({
+  message = "You do not have permission to access this page.",
+  actionLabel,
+  onAction
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-full w-full flex-col items-center justify-center gap-6 p-10 text-center", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex size-14 items-center justify-center rounded-full bg-muted", children: /* @__PURE__ */ jsx(ShieldOff, { className: "size-7 text-muted-foreground" }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground", children: "Access Denied" }),
+      /* @__PURE__ */ jsx("p", { className: "max-w-sm text-sm text-muted-foreground", children: message })
+    ] }),
+    actionLabel && onAction && /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: onAction, children: actionLabel })
+  ] });
+}
+function ResourceGuard({ meta, children, fallback }) {
+  const { user, isLoading } = useAuthContext();
+  if (isLoading) return null;
+  if (!canAccessResource(user, meta)) {
+    return fallback !== void 0 ? /* @__PURE__ */ jsx(Fragment, { children: fallback }) : /* @__PURE__ */ jsx(AccessDenied, {});
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function Can({ permission, role, permissions, children, fallback = null }) {
+  const { can, hasRole, canAll } = useAuthContext();
+  let granted = true;
+  if (permission) {
+    granted = can(permission);
+  } else if (role) {
+    granted = hasRole(role);
+  } else if (permissions && permissions.length > 0) {
+    granted = canAll(permissions);
+  }
+  return granted ? /* @__PURE__ */ jsx(Fragment, { children }) : /* @__PURE__ */ jsx(Fragment, { children: fallback });
+}
+var Select = SelectPrimitive.Root;
+var SelectGroup = SelectPrimitive.Group;
+var SelectValue = SelectPrimitive.Value;
+var SelectTrigger = React11.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "flex h-9 w-full items-center justify-between rounded-lg border border-input bg-background px-3 py-2 text-base shadow-xs placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-pointer items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-pointer items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+var SelectContent = React11.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  SelectPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "relative z-50 max-h-96 min-w-32 overflow-hidden rounded-lg border border-border bg-background shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+      className
+    ),
+    position,
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      SelectPrimitive.Viewport,
+      {
+        className: cn(
+          "p-1",
+          position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        ),
+        children
+      }
+    )
+  }
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectItem = React11.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-base outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+var WIDTH_CLASS_MAP = {
+  sm: "max-w-md",
+  md: "max-w-lg",
+  lg: "max-w-2xl",
+  xl: "max-w-4xl",
+  "2xl": "max-w-6xl",
+  full: "max-w-[95vw]"
+};
+function RenderModal({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  renderContent,
+  footer,
+  width = "lg",
+  closeOnOverlayClick = true,
+  showCloseButton = true,
+  overlayClassName,
+  panelClassName,
+  contentClassName
+}) {
+  React11__default.useEffect(() => {
+    if (!open) return;
+    function handleEscape(event) {
+      if (event.key === "Escape") {
+        onOpenChange(false);
+      }
+    }
+    window.addEventListener("keydown", handleEscape);
+    return () => window.removeEventListener("keydown", handleEscape);
+  }, [open, onOpenChange]);
+  if (!open) return null;
+  const hasHeader = Boolean(title || description || showCloseButton);
+  const content = renderContent ? renderContent() : children;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "fixed inset-0 z-[2147483647] flex items-center justify-center bg-black/30 p-4 backdrop-blur-[1px]",
+          overlayClassName
+        ),
+        onMouseDown: (event) => {
+          if (!closeOnOverlayClick) return;
+          if (event.target === event.currentTarget) {
+            onOpenChange(false);
+          }
+        },
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "dialog",
+            "aria-modal": "true",
+            className: cn(
+              "w-full overflow-hidden rounded-xl border border-border bg-background shadow-xl",
+              WIDTH_CLASS_MAP[width],
+              panelClassName
+            ),
+            children: [
+              hasHeader && /* @__PURE__ */ jsxs("header", { className: "flex items-start justify-between gap-4 px-5 py-4", children: [
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                  title && /* @__PURE__ */ jsx("h2", { className: "truncate text-lg font-semibold text-foreground", children: title }),
+                  description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: description })
+                ] }),
+                showCloseButton && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": "Close modal",
+                    className: "inline-flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+                    onClick: () => onOpenChange(false),
+                    children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "max-h-[80vh] overflow-auto px-5 py-4",
+                    contentClassName
+                  ),
+                  children: content
+                }
+              ),
+              footer && /* @__PURE__ */ jsx("footer", { className: "px-5 py-4", children: footer })
+            ]
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+var DEFAULT_ACCENT_OPTIONS = [
+  { value: "neutral", label: "Neutral", previewClassName: "bg-foreground" },
+  { value: "blue", label: "Blue", previewClassName: "bg-blue-600" },
+  { value: "green", label: "Green", previewClassName: "bg-emerald-600" },
+  { value: "orange", label: "Orange", previewClassName: "bg-orange-500" }
+];
+function SettingsModal({
+  open,
+  onOpenChange,
+  mode,
+  onModeChange,
+  accent,
+  onAccentChange,
+  accentOptions = DEFAULT_ACCENT_OPTIONS,
+  personalizationContent,
+  usersContent,
+  defaultSection = "general",
+  width = "xl",
+  closeOnOverlayClick = true,
+  overlayClassName,
+  panelClassName,
+  contentClassName,
+  sidebarClassName,
+  bodyClassName
+}) {
+  const [section, setSection] = React11__default.useState(defaultSection);
+  React11__default.useEffect(() => {
+    if (open) {
+      setSection(defaultSection);
+    }
+  }, [open, defaultSection]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsx(
+    RenderModal,
+    {
+      open,
+      onOpenChange,
+      width,
+      closeOnOverlayClick,
+      showCloseButton: false,
+      overlayClassName,
+      contentClassName: cn(
+        "relative h-full overflow-hidden p-0",
+        contentClassName
+      ),
+      panelClassName: cn("h-[500px] max-w-[800px]", panelClassName),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex h-full", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => onOpenChange(false),
+            className: "absolute right-4 top-4 z-10 inline-flex size-8 items-center justify-center rounded-md text-foreground/70 transition-colors hover:bg-accent hover:text-foreground",
+            "aria-label": "Close settings",
+            children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "aside",
+          {
+            className: cn(
+              "flex h-full w-64 shrink-0 flex-col gap-1 overflow-y-auto bg-sidebar p-2",
+              sidebarClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                SettingsSectionButton,
+                {
+                  icon: Settings,
+                  label: "General",
+                  active: section === "general",
+                  onClick: () => setSection("general")
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                SettingsSectionButton,
+                {
+                  icon: CircleDot,
+                  label: "Personalization",
+                  active: section === "personalization",
+                  onClick: () => setSection("personalization")
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                SettingsSectionButton,
+                {
+                  icon: UserCog,
+                  label: "Users",
+                  active: section === "users",
+                  onClick: () => setSection("users")
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 flex-1 flex-col", bodyClassName), children: [
+          /* @__PURE__ */ jsx("header", { className: "flex h-16 items-center pr-12", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-4", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Settings" }),
+            /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5 text-muted-foreground" }),
+            /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground capitalize", children: section })
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col overflow-y-auto px-4 pb-4", children: [
+            /* @__PURE__ */ jsx("div", { className: "h-px w-full bg-border" }),
+            section === "general" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+              /* @__PURE__ */ jsx(SettingsRow, { label: "Appearance", children: /* @__PURE__ */ jsxs("div", { className: "relative inline-flex items-center", children: [
+                /* @__PURE__ */ jsxs(
+                  "select",
+                  {
+                    value: mode,
+                    onChange: (e) => onModeChange(e.target.value),
+                    className: "h-8 appearance-none rounded-lg px-2.5 pr-7 text-sm font-medium text-foreground outline-none transition-colors hover:bg-accent",
+                    children: [
+                      /* @__PURE__ */ jsx("option", { value: "light", children: "Light" }),
+                      /* @__PURE__ */ jsx("option", { value: "dark", children: "Dark" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(ChevronDown, { className: "pointer-events-none absolute right-2 size-4 text-foreground" })
+              ] }) }),
+              /* @__PURE__ */ jsx(SettingsRow, { label: "Accent color", children: /* @__PURE__ */ jsxs("div", { className: "relative inline-flex items-center", children: [
+                /* @__PURE__ */ jsx(
+                  "select",
+                  {
+                    value: accent,
+                    onChange: (e) => onAccentChange(e.target.value),
+                    className: "h-8 appearance-none rounded-lg pl-8 pr-7 text-sm font-medium text-foreground outline-none transition-colors hover:bg-accent",
+                    children: accentOptions.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "pointer-events-none absolute left-2.5 inline-flex size-2 rounded-full",
+                      accentOptions.find((o) => o.value === accent)?.previewClassName ?? "bg-foreground"
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(ChevronDown, { className: "pointer-events-none absolute right-2 size-4 text-foreground" })
+              ] }) })
+            ] }),
+            section === "personalization" && /* @__PURE__ */ jsx("div", { className: "pt-3", children: personalizationContent }),
+            section === "users" && /* @__PURE__ */ jsx("div", { className: "pt-3", children: usersContent })
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+function SettingsSectionButton({
+  icon: Icon2,
+  label,
+  active,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn(
+        "flex h-8 w-full items-center gap-2 rounded-md px-2 text-left text-sm text-sidebar-foreground",
+        "transition-colors hover:bg-sidebar-accent",
+        active && "bg-sidebar-accent font-medium"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Icon2, { className: "size-4 shrink-0" }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: label })
+      ]
+    }
+  );
+}
+function SettingsRow({ label, children }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-3", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground", children: label }),
+      /* @__PURE__ */ jsx("div", { className: "flex items-center", children })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "h-px w-full bg-border" })
+  ] });
+}
+function TableActionMenu({
+  items,
+  ariaLabel = "Open actions"
+}) {
+  const [open, setOpen] = React11__default.useState(false);
+  const [confirmingItem, setConfirmingItem] = React11__default.useState(null);
+  const [menuPosition, setMenuPosition] = React11__default.useState({ top: 0, left: 0 });
+  const dropdownRef = React11__default.useRef(null);
+  const triggerRef = React11__default.useRef(null);
+  const getConfirmOptions = React11__default.useCallback(
+    (item) => {
+      if (item.confirm === false) return null;
+      if (typeof item.confirm === "object") return item.confirm;
+      if (item.confirm || item.variant === "destructive") {
+        return {};
+      }
+      return null;
+    },
+    []
+  );
+  const confirmOptions = confirmingItem ? getConfirmOptions(confirmingItem) : null;
+  const confirmTitle = confirmOptions?.title ?? (confirmingItem?.variant === "destructive" ? "Confirm deletion" : "Confirm action");
+  const confirmDescription = confirmOptions?.description ?? (confirmingItem?.variant === "destructive" ? "This action cannot be undone." : "Please confirm that you want to continue.");
+  const confirmLabel = confirmOptions?.confirmLabel ?? "OK";
+  const cancelLabel = confirmOptions?.cancelLabel ?? "Cancel";
+  const handleItemSelect = React11__default.useCallback(
+    (item) => {
+      const nextConfirmOptions = getConfirmOptions(item);
+      if (nextConfirmOptions) {
+        setConfirmingItem(item);
+        setOpen(false);
+        return;
+      }
+      item.onSelect();
+      setOpen(false);
+    },
+    [getConfirmOptions]
+  );
+  const handleConfirm = React11__default.useCallback(() => {
+    if (!confirmingItem) return;
+    confirmingItem.onSelect();
+    setConfirmingItem(null);
+  }, [confirmingItem]);
+  const updateMenuPosition = React11__default.useCallback(() => {
+    if (!triggerRef.current) return;
+    const rect = triggerRef.current.getBoundingClientRect();
+    setMenuPosition({
+      top: rect.bottom + 4,
+      left: rect.right
+    });
+  }, []);
+  React11__default.useEffect(() => {
+    function handleOutsideClick(event) {
+      const target = event.target;
+      if (dropdownRef.current?.contains(target)) return;
+      if (triggerRef.current?.contains(target)) return;
+      setOpen(false);
+    }
+    function handleEscape(event) {
+      if (event.key === "Escape") {
+        if (confirmingItem) {
+          setConfirmingItem(null);
+          return;
+        }
+        setOpen(false);
+      }
+    }
+    if (open || confirmingItem) {
+      updateMenuPosition();
+      document.addEventListener("mousedown", handleOutsideClick);
+      window.addEventListener("resize", updateMenuPosition);
+      window.addEventListener("scroll", updateMenuPosition, true);
+      document.addEventListener("keydown", handleEscape);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleOutsideClick);
+      window.removeEventListener("resize", updateMenuPosition);
+      window.removeEventListener("scroll", updateMenuPosition, true);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [confirmingItem, open, updateMenuPosition]);
+  const visibleItems = items.filter(Boolean);
+  if (visibleItems.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "relative inline-flex", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        onClick: () => setOpen((v) => !v),
+        className: "inline-flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-label": ariaLabel,
+        children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-4" })
+      }
+    ),
+    open && createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: dropdownRef,
+          role: "menu",
+          className: "fixed z-[2147483647] min-w-[120px] -translate-x-full rounded-lg border border-border bg-popover p-1 shadow-md",
+          style: { top: menuPosition.top, left: menuPosition.left },
+          children: visibleItems.map((item) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              disabled: item.disabled,
+              onClick: () => handleItemSelect(item),
+              className: cn(
+                "flex w-full items-center rounded-md px-2 py-1.5 text-left text-sm transition-colors",
+                "hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50",
+                item.variant === "destructive" ? "text-destructive" : "text-popover-foreground"
+              ),
+              children: item.label
+            },
+            item.key
+          ))
+        }
+      ),
+      document.body
+    ),
+    confirmingItem && createPortal(
+      /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-[2147483647] flex items-center justify-center bg-neutral-950/30 p-4 backdrop-blur-[1.5px]", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-md rounded-xl border border-border bg-background p-6 shadow-lg", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground", children: confirmTitle }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: confirmDescription })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-6 flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              onClick: () => setConfirmingItem(null),
+              children: cancelLabel
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: confirmingItem.variant === "destructive" ? "destructive" : "default",
+              onClick: handleConfirm,
+              children: confirmLabel
+            }
+          )
+        ] })
+      ] }) }),
+      document.body
+    )
+  ] });
+}
+var toneClasses = {
+  neutral: "bg-secondary text-secondary-foreground",
+  success: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300",
+  danger: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300",
+  warning: "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300"
+};
+function TableBadge({
+  children,
+  tone = "neutral",
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium",
+        toneClasses[tone],
+        className
+      ),
+      children
+    }
+  );
+}
+var Table = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
+  "table",
+  {
+    ref,
+    className: cn("w-full caption-bottom text-sm bg-background", className),
+    ...props
+  }
+) }));
+Table.displayName = "Table";
+var TableHeader = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "thead",
+  {
+    ref,
+    className: cn("bg-muted/50 [&_tr]:border-b", className),
+    ...props
+  }
+));
+TableHeader.displayName = "TableHeader";
+var TableBody = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tbody",
+  {
+    ref,
+    className: cn("[&_tr:last-child]:border-0", className),
+    ...props
+  }
+));
+TableBody.displayName = "TableBody";
+var TableFooter = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tfoot",
+  {
+    ref,
+    className: cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    ),
+    ...props
+  }
+));
+TableFooter.displayName = "TableFooter";
+var TableRow = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "tr",
+  {
+    ref,
+    className: cn("h-[53px] border-b transition-colors hover:bg-muted/30 data-[state=selected]:bg-muted", className),
+    ...props
+  }
+));
+TableRow.displayName = "TableRow";
+var TableHead = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "th",
+  {
+    ref,
+    className: cn(
+      "h-10 px-2 text-left align-middle text-sm font-medium text-foreground",
+      className
+    ),
+    ...props
+  }
+));
+TableHead.displayName = "TableHead";
+var TableCell = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "td",
+  {
+    ref,
+    className: cn("px-2 py-2 align-middle text-sm", className),
+    ...props
+  }
+));
+TableCell.displayName = "TableCell";
+var TableCaption = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "caption",
+  {
+    ref,
+    className: cn("mt-4 text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+TableCaption.displayName = "TableCaption";
+function SortableDataTableRow({
+  row,
+  rowId
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({ id: rowId });
+  const verticalOnlyTransform = transform ? {
+    ...transform,
+    x: 0
+  } : null;
+  return /* @__PURE__ */ jsx(
+    TableRow,
+    {
+      ref: setNodeRef,
+      "data-state": row.getIsSelected() && "selected",
+      className: "cursor-grab active:cursor-grabbing",
+      style: {
+        transform: CSS.Transform.toString(verticalOnlyTransform),
+        transition,
+        opacity: isDragging ? 0.5 : 1,
+        position: "relative",
+        zIndex: isDragging ? 1 : 0,
+        willChange: "transform",
+        touchAction: "none"
+      },
+      ...attributes,
+      ...listeners,
+      children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
+    }
+  );
+}
+function DataTable({
+  columns,
+  data,
+  className,
+  emptyMessage = "No results.",
+  rowDragOptions
+}) {
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 6
+      }
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  );
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel()
+  });
+  const rowIds = React11.useMemo(
+    () => rowDragOptions ? data.map((row) => rowDragOptions.getRowId(row)) : [],
+    [data, rowDragOptions]
+  );
+  const handleDragEnd = React11.useCallback(
+    (event) => {
+      const { active, over } = event;
+      if (!rowDragOptions || !over || active.id === over.id) {
+        return;
+      }
+      const oldIndex = data.findIndex(
+        (row) => rowDragOptions.getRowId(row) === String(active.id)
+      );
+      const newIndex = data.findIndex(
+        (row) => rowDragOptions.getRowId(row) === String(over.id)
+      );
+      if (oldIndex < 0 || newIndex < 0 || oldIndex === newIndex) {
+        return;
+      }
+      rowDragOptions.onReorder(arrayMove(data, oldIndex, newIndex));
+    },
+    [data, rowDragOptions]
+  );
+  return /* @__PURE__ */ jsx(
+    DndContext,
+    {
+      sensors: rowDragOptions ? sensors : void 0,
+      collisionDetection: closestCenter,
+      onDragEnd: rowDragOptions ? handleDragEnd : void 0,
+      children: /* @__PURE__ */ jsx("div", { className: cn("rounded-md border", className), children: /* @__PURE__ */ jsxs(Table, { children: [
+        /* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(TableHead, { children: header.isPlaceholder ? null : flexRender(
+          header.column.columnDef.header,
+          header.getContext()
+        ) }, header.id)) }, headerGroup.id)) }),
+        /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows.length ? rowDragOptions ? /* @__PURE__ */ jsx(
+          SortableContext,
+          {
+            items: rowIds,
+            strategy: verticalListSortingStrategy,
+            children: table.getRowModel().rows.map((row) => {
+              const rowId = rowDragOptions.getRowId(row.original);
+              return /* @__PURE__ */ jsx(
+                SortableDataTableRow,
+                {
+                  row,
+                  rowId
+                },
+                rowId
+              );
+            })
+          }
+        ) : table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(
+          TableRow,
+          {
+            "data-state": row.getIsSelected() && "selected",
+            children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, { children: flexRender(
+              cell.column.columnDef.cell,
+              cell.getContext()
+            ) }, cell.id))
+          },
+          row.id
+        )) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
+          TableCell,
+          {
+            colSpan: columns.length,
+            className: "h-24 text-center",
+            children: emptyMessage
+          }
+        ) }) })
+      ] }) })
+    }
+  );
+}
+function TablePagination({
+  totalRows,
+  selectedRows,
+  page,
+  pageSize,
+  pageSizeOptions = [10, 20, 50, 100, "all"],
+  onPageChange,
+  onPageSizeChange,
+  className
+}) {
+  const safePageSize = Math.max(1, pageSize);
+  const totalPages = Math.max(1, Math.ceil(totalRows / safePageSize));
+  const safePage = Math.min(Math.max(1, page), totalPages);
+  const canGoPrev = safePage > 1;
+  const canGoNext = safePage < totalPages;
+  const hasAllOption = pageSizeOptions.includes("all");
+  const currentPageSizeValue = hasAllOption && totalRows > 0 && safePageSize === totalRows ? "all" : String(safePageSize);
+  const selectedCount = selectedRows ?? 0;
+  const rowsText = `${selectedCount} of ${totalRows} row(s) selected.`;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex h-9 w-full items-center justify-between gap-2", className), children: [
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: rowsText }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-8 text-foreground", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "pr-2 text-sm font-medium text-foreground", children: "Rows per page" }),
+        /* @__PURE__ */ jsx(
+          "select",
+          {
+            value: currentPageSizeValue,
+            onChange: (event) => {
+              const nextValue = event.target.value;
+              if (nextValue === "all") {
+                onPageSizeChange(Math.max(1, totalRows));
+                return;
+              }
+              onPageSizeChange(Number(nextValue));
+            },
+            className: "h-9 w-20 rounded-md border border-input bg-background px-3 text-sm shadow-sm",
+            "aria-label": "Rows per page",
+            children: pageSizeOptions.map((option) => /* @__PURE__ */ jsx("option", { value: String(option), children: option === "all" ? "All" : option }, String(option)))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "pr-2 text-sm font-medium", children: [
+        "Page ",
+        safePage,
+        " of ",
+        totalPages
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            label: "Previous page",
+            disabled: !canGoPrev,
+            onClick: () => onPageChange(safePage - 1),
+            icon: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            label: "First page",
+            disabled: !canGoPrev,
+            onClick: () => onPageChange(1),
+            icon: /* @__PURE__ */ jsx(ChevronsLeft, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            label: "Next page",
+            disabled: !canGoNext,
+            onClick: () => onPageChange(safePage + 1),
+            icon: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            label: "Last page",
+            disabled: !canGoNext,
+            onClick: () => onPageChange(totalPages),
+            icon: /* @__PURE__ */ jsx(ChevronsRight, { className: "size-4" })
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function IconButton({ label, icon, disabled, onClick }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      disabled,
+      "aria-label": label,
+      className: "inline-flex size-8 items-center justify-center rounded-md border border-input bg-background text-foreground shadow-sm transition-colors hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50",
+      children: icon
+    }
+  );
+}
+
+export { AccessDenied as SPC_AccessDenied, AppShell as SPC_AppShell, AuthContext as SPC_AuthContext, AuthContextProvider as SPC_AuthContextProvider, AuthGuard as SPC_AuthGuard, BackofficeApp as SPC_BackofficeApp, Button as SPC_Button, Can as SPC_Can, DataTable as SPC_DataTable, Input as SPC_Input, Label as SPC_Label, LoadingScreen as SPC_LoadingScreen, LoginPage as SPC_LoginPage, RenderModal as SPC_RenderModal, ResourceGuard as SPC_ResourceGuard, Select as SPC_Select, SelectContent as SPC_SelectContent, SelectGroup as SPC_SelectGroup, SelectItem as SPC_SelectItem, SelectScrollDownButton as SPC_SelectScrollDownButton, SelectScrollUpButton as SPC_SelectScrollUpButton, SelectSeparator as SPC_SelectSeparator, SelectTrigger as SPC_SelectTrigger, SelectValue as SPC_SelectValue, SettingsModal as SPC_SettingsModal, Sidebar as SPC_Sidebar, SidebarToggle as SPC_SidebarToggle, Table as SPC_Table, TableActionMenu as SPC_TableActionMenu, TableBadge as SPC_TableBadge, TableBody as SPC_TableBody, TableCaption as SPC_TableCaption, TableCell as SPC_TableCell, TableFooter as SPC_TableFooter, TableHead as SPC_TableHead, TableHeader as SPC_TableHeader, TablePagination as SPC_TablePagination, TableRow as SPC_TableRow, buttonVariants as SPC_buttonVariants, canAccessResource as SPC_canAccessResource, cn as SPC_cn, evaluateCan as SPC_evaluateCan, evaluateCanAll as SPC_evaluateCanAll, evaluateCanAny as SPC_evaluateCanAny, evaluateHasRole as SPC_evaluateHasRole, useAuth as SPC_useAuth, useAuthContext as SPC_useAuthContext, usePermissions as SPC_usePermissions };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map