@umituz/web-dashboard 3.2.2 → 4.0.0

package/src/domains/session/inMemoryAuthAdapter.ts

@@ -0,0 +1,53 @@
+/**
+ * In-memory auth adapter — zero-dependency default for demos,
+ * Storybook-style setups and tests. Credentials are NOT checked
+ * (any password logs in); demo accounts log in by user id.
+ */
+
+import type {
+  AuthAdapter,
+  LoginCredentials,
+  SessionUser,
+} from "./types";
+
+export interface InMemoryAuthAdapterOptions {
+  /** Users available for login/demo. */
+  users: readonly SessionUser[];
+}
+
+export const createInMemoryAuthAdapter = ({
+  users,
+}: InMemoryAuthAdapterOptions): AuthAdapter => {
+  let currentUser: SessionUser | null = null;
+
+  const findByEmail = (email: string): SessionUser | undefined =>
+    users.find((user) => user.email === email);
+
+  return {
+    async login({ email }: LoginCredentials): Promise<SessionUser> {
+      const user = findByEmail(email);
+      if (!user) {
+        throw new Error(`No user with email ${email}`);
+      }
+      currentUser = user;
+      return user;
+    },
+
+    async logout(): Promise<void> {
+      currentUser = null;
+    },
+
+    async current(): Promise<SessionUser | null> {
+      return currentUser;
+    },
+
+    async demoLogin(userId: string): Promise<SessionUser> {
+      const user = users.find((candidate) => candidate.id === userId);
+      if (!user) {
+        throw new Error(`No demo user with id ${userId}`);
+      }
+      currentUser = user;
+      return user;
+    },
+  };
+};

package/src/domains/session/index.ts

@@ -0,0 +1,18 @@
+export {
+  SessionProvider,
+  useSession,
+  type SessionProviderProps,
+} from "./SessionContext";
+export { OrgSwitcher, type OrgSwitcherProps } from "./OrgSwitcher";
+export { DemoLogin, type DemoLoginProps } from "./DemoLogin";
+export { createInMemoryAuthAdapter, type InMemoryAuthAdapterOptions } from "./inMemoryAuthAdapter";
+export {
+  SESSION_KEYS,
+} from "./utils/i18nKeys";
+export type {
+  AuthAdapter,
+  LoginCredentials,
+  SessionStatus,
+  SessionUser,
+  Tenant,
+} from "./types";

package/src/domains/session/types.ts

@@ -0,0 +1,47 @@
+/**
+ * Session model — the host-facing auth contract.
+ *
+ * The package performs no authentication itself; hosts adapt their
+ * provider (Firebase, Supabase, NEON-backed REST, mock...) to this
+ * interface and hand it to <SessionProvider>.
+ */
+
+/** Authenticated user as the dashboard presents it. */
+export interface SessionUser {
+  id: string;
+  name: string;
+  email: string;
+  /** Host role key — pairs with the permissions matrix. */
+  role: string;
+  avatarUrl?: string;
+}
+
+/** Tenant/organization the user may switch between. */
+export interface Tenant {
+  id: string;
+  name: string;
+  /** Short initials for avatar-style rendering. */
+  initials?: string;
+  /** Optional plan badge (e.g. "starter" | "growth" | "enterprise"). */
+  plan?: string;
+}
+
+export interface LoginCredentials {
+  email: string;
+  password: string;
+}
+
+/**
+ * Auth adapter seam. `login`/`logout`/`current` are required;
+ * `listTenants` and `demoLogin` power the multi-tenant switcher and
+ * one-click demo entry when the host supports them.
+ */
+export interface AuthAdapter {
+  login(credentials: LoginCredentials): Promise<SessionUser>;
+  logout(): Promise<void>;
+  current(): Promise<SessionUser | null>;
+  listTenants?(userId: string): Promise<Tenant[]>;
+  demoLogin?(userId: string): Promise<SessionUser>;
+}
+
+export type SessionStatus = "loading" | "authenticated" | "anonymous";

package/src/domains/session/utils/i18nKeys.ts

@@ -0,0 +1,12 @@
+/**
+ * Session domain i18n keys — the documented string contract.
+ */
+
+export const SESSION_KEYS = {
+  orgSwitcher: {
+    label: "session.orgSwitcher.label",
+  },
+  demoLogin: {
+    action: "session.demoLogin.action",
+  },
+} as const;

package/src/domains/settings/components/AuditLogList.tsx

@@ -0,0 +1,59 @@
+/**
+ * AuditLogList — admin skeleton for the audit trail screen.
+ * Entries arrive as props; the list is display-only.
+ */
+
+import { ScrollText } from "lucide-react";
+import { useT } from "../../../i18n";
+import { SETTINGS_ADMIN_KEYS } from "../utils/i18nKeys";
+
+export interface AuditEntry {
+  id: string;
+  /** Who performed the action. */
+  actor: string;
+  /** What happened, e.g. "role.changed". */
+  action: string;
+  /** Optional target of the action (user, invoice...). */
+  target?: string;
+  /** ISO timestamp. */
+  at: string;
+}
+
+export interface AuditLogListProps {
+  entries: AuditEntry[];
+}
+
+const formatAt = (iso: string): string => {
+  const date = new Date(iso);
+  return Number.isNaN(date.getTime()) ? iso : date.toISOString().slice(0, 16).replace("T", " ");
+};
+
+export const AuditLogList = ({ entries }: AuditLogListProps) => {
+  const t = useT();
+
+  if (entries.length === 0) {
+    return (
+      <div className="udb-empty">
+        <div className="udb-empty__icon">
+          <ScrollText className="udb-empty__glyph" aria-hidden="true" />
+        </div>
+        <p className="udb-empty__text">{t(SETTINGS_ADMIN_KEYS.audit.empty)}</p>
+      </div>
+    );
+  }
+
+  return (
+    <ul className="udb-audit">
+      {entries.map((entry) => (
+        <li key={entry.id} className="udb-audit__item">
+          <span className="udb-audit__at">{formatAt(entry.at)}</span>
+          <span className="udb-audit__actor">{entry.actor}</span>
+          <span className="udb-audit__action">{entry.action}</span>
+          {entry.target && <span className="udb-audit__target">{entry.target}</span>}
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export default AuditLogList;

package/src/domains/settings/components/PermissionMatrixScreen.tsx

@@ -0,0 +1,80 @@
+/**
+ * PermissionMatrixScreen — admin skeleton rendering the role x
+ * permission matrix. Read-only by default; pass `onToggle` to make
+ * cells interactive (delegated — persistence is the host's job).
+ */
+
+import { Check, Minus } from "lucide-react";
+import { cn } from "../../../primitives";
+import { hasPermission } from "../../permissions/hasPermission";
+import type {
+  Permission,
+  PermissionMatrix,
+  RoleInfo,
+} from "../../permissions/types";
+
+export interface PermissionMatrixScreenProps {
+  matrix: PermissionMatrix;
+  roles: RoleInfo[];
+  /** Permission column keys, in display order. */
+  permissions: Permission[];
+  onToggle?: (role: string, permission: Permission, granted: boolean) => void;
+}
+
+export const PermissionMatrixScreen = ({
+  matrix,
+  roles,
+  permissions,
+  onToggle,
+}: PermissionMatrixScreenProps) => (
+  <div className="udb-table__wrap">
+    <table className="udb-table">
+      <thead>
+        <tr>
+          <th className="udb-table__th" />
+          {permissions.map((permission) => (
+            <th key={permission} className="udb-table__th udb-table__th--code">
+              {permission}
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {roles.map((role) => (
+          <tr key={role.key} className="udb-table__row">
+            <td className="udb-table__td udb-table__td--strong">{role.label}</td>
+            {permissions.map((permission) => {
+              const granted = hasPermission(matrix, role.key, permission);
+              const cell = granted ? (
+                <Check className="udb-matrix__check" aria-hidden="true" />
+              ) : (
+                <Minus className="udb-matrix__deny" aria-hidden="true" />
+              );
+              return (
+                <td key={permission} className="udb-table__td udb-table__td--center">
+                  {onToggle ? (
+                    <button
+                      type="button"
+                      className={cn(
+                        "udb-matrix__cell",
+                        granted && "udb-matrix__cell--on",
+                      )}
+                      aria-pressed={granted}
+                      onClick={() => onToggle(role.key, permission, granted)}
+                    >
+                      {cell}
+                    </button>
+                  ) : (
+                    cell
+                  )}
+                </td>
+              );
+            })}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  </div>
+);
+
+export default PermissionMatrixScreen;

package/src/domains/settings/components/SettingsLayout.tsx

@@ -1,70 +1,87 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
+import { Skeleton, Button } from "../../../primitives";
+import { ChevronLeft, Menu } from "lucide-react";
 import { SettingsSection } from "./SettingsSection";
 import type { SettingsConfig } from "../types/settings";
-import { Skeleton } from "@umituz/web-design-system/atoms";
-import { ChevronLeft, Menu } from "lucide-react";
-import { Button } from "@umituz/web-design-system/atoms";
 
 interface SettingsLayoutProps {
   /** Settings configuration */
   config: SettingsConfig;
+  /**
+   * Artificial route-transition skeleton duration in ms (default: 0 = off).
+   * Content renders immediately by default; set > 0 only if you want
+   * a skeleton to mask route swaps.
+   */
+  routeTransitionMs?: number;
 }
 
 /**
  * Settings Layout Component
  *
  * Main layout wrapper for settings pages.
- * Provides sidebar navigation and content area.
- *
- * @param props - Settings layout props
+ * Provides sidebar navigation and content area. Styling is entirely
+ * `udb-settings*` classes from the package stylesheet.
  */
 export const SettingsLayout = ({
   config,
+  routeTransitionMs = 0,
 }: SettingsLayoutProps) => {
   const location = useLocation();
   const navigate = useNavigate();
   const [collapsed, setCollapsed] = useState(false);
   const [mobileOpen, setMobileOpen] = useState(false);
-  const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(routeTransitionMs > 0);
 
-  // Simulate loading on route change
-  useState(() => {
+  // Optional route-change skeleton. Cleanup is essential: setTimeout must be
+  // cancelled on unmount/route change. With routeTransitionMs = 0 (default)
+  // no artificial delay is applied at all.
+  useEffect(() => {
+    if (routeTransitionMs <= 0) {
+      setLoading(false);
+      return;
+    }
     setLoading(true);
-    const timer = setTimeout(() => setLoading(false), 200);
+    const timer = setTimeout(() => setLoading(false), routeTransitionMs);
     return () => clearTimeout(timer);
-  });
+  }, [location.pathname, routeTransitionMs]);
 
   const handleNavigate = (path: string) => {
     navigate(path);
     setMobileOpen(false);
   };
 
-  return (
-    <div className="flex h-screen w-full bg-background font-sans">
-      {/* Desktop Sidebar */}
-      <aside
-        className={`hidden md:flex flex-col shrink-0 border-r border-border bg-card transition-all duration-300 ${
-          collapsed ? "w-16" : "w-64"
-        }`}
+  const renderSidebarHeader = (onMenuClick: () => void, showMenuButton: boolean) => (
+    <div className="udb-settings__sidebar-header">
+      {!collapsed && (
+        <h2 className="udb-settings__sidebar-title">
+          {config.brandName}
+        </h2>
+      )}
+      <Button
+        variant="ghost"
+        size="icon"
+        onClick={onMenuClick}
+        className="udb-settings__sidebar-toggle"
+        aria-label={showMenuButton ? "Open sidebar" : "Toggle sidebar"}
       >
-        <div className="flex h-14 items-center justify-between border-b border-border px-4">
-          {!collapsed && (
-            <h2 className="text-lg font-semibold text-foreground">
-              {config.brandName || "Settings"}
-            </h2>
-          )}
-          <Button
-            variant="ghost"
-            size="icon"
-            onClick={() => setCollapsed(!collapsed)}
-            className="ml-auto"
-          >
-            {collapsed ? <Menu className="h-4 w-4" /> : <ChevronLeft className="h-4 w-4" />}
-          </Button>
-        </div>
+        {showMenuButton ? (
+          <Menu className="udb-settings__toggle-icon" />
+        ) : collapsed ? (
+          <Menu className="udb-settings__toggle-icon" />
+        ) : (
+          <ChevronLeft className="udb-settings__toggle-icon" />
+        )}
+      </Button>
+    </div>
+  );
 
-        <nav className="flex-1 overflow-y-auto p-2">
+  return (
+    <div className="udb-root udb-settings">
+      {/* Desktop Sidebar */}
+      <aside className={`udb-settings__sidebar${collapsed ? " udb-settings__sidebar--collapsed" : ""}`}>
+        {renderSidebarHeader(() => setCollapsed((prev) => !prev), false)}
+        <nav className="udb-settings__nav">
           {config.sections.map((section) => (
             <SettingsSection
               key={section.key}
@@ -79,22 +96,15 @@ export const SettingsLayout = ({
 
       {/* Mobile Menu Overlay */}
       {mobileOpen && (
-        <div className="fixed inset-0 z-50 md:hidden">
+        <div className="udb-settings__mobile">
           <div
-            className="absolute inset-0 bg-background/80 backdrop-blur-sm"
+            className="udb-backdrop"
             onClick={() => setMobileOpen(false)}
+            role="presentation"
           />
-          <aside className="absolute left-0 top-0 h-full w-64 border-r border-border bg-card shadow-xl">
-            <div className="flex h-14 items-center justify-between border-b border-border px-4">
-              <h2 className="text-lg font-semibold text-foreground">
-                {config.brandName || "Settings"}
-              </h2>
-              <Button variant="ghost" size="icon" onClick={() => setMobileOpen(false)}>
-                <Menu className="h-4 w-4" />
-              </Button>
-            </div>
-
-            <nav className="flex-1 overflow-y-auto p-2">
+          <aside className="udb-settings__mobile-sidebar">
+            {renderSidebarHeader(() => setMobileOpen(false), true)}
+            <nav className="udb-settings__nav">
               {config.sections.map((section) => (
                 <SettingsSection
                   key={section.key}
@@ -109,26 +119,31 @@ export const SettingsLayout = ({
       )}
 
       {/* Main Content Area */}
-      <div className="flex flex-1 flex-col overflow-hidden min-w-0">
+      <div className="udb-settings__main">
         {/* Mobile Header */}
-        <header className="flex h-14 items-center justify-between border-b border-border bg-card/50 backdrop-blur-md px-4 shrink-0 md:hidden">
-          <div className="flex items-center gap-3">
-            <Button variant="ghost" size="icon" onClick={() => setMobileOpen(true)}>
-              <Menu className="h-5 w-5" />
+        <header className="udb-settings__mobile-header">
+          <div className="udb-settings__mobile-lead">
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => setMobileOpen(true)}
+              aria-label="Open mobile menu"
+            >
+              <Menu className="udb-settings__toggle-icon-lg" />
             </Button>
-            <h2 className="text-sm font-semibold text-foreground">
-              {config.brandName || "Settings"}
+            <h2 className="udb-settings__mobile-title">
+              {config.brandName}
             </h2>
           </div>
         </header>
 
-        <main className="flex-1 overflow-y-auto p-4 md:p-8">
+        <main className="udb-settings__content">
           {loading ? (
-            <div className="mx-auto w-full max-w-4xl space-y-6">
-              <Skeleton className="h-8 w-1/3 rounded-xl" />
-              <div className="grid gap-4">
+            <div className="udb-settings__skeleton">
+              <Skeleton className="udb-skeleton--title" />
+              <div className="udb-settings__skeleton-list">
                 {Array.from({ length: 3 }).map((_, i) => (
-                  <Skeleton key={i} className="h-24 rounded-xl" />
+                  <Skeleton key={i} className="udb-settings__skeleton-row" />
                 ))}
               </div>
             </div>

package/src/domains/settings/components/SettingsSection.tsx

@@ -1,6 +1,7 @@
+import { useMemo } from "react";
 import { Link } from "react-router-dom";
 import { ChevronRight } from "lucide-react";
-import { cn } from "@umituz/web-design-system/utils";
+import { cn } from "../../../primitives";
 import type { SettingsSection as SettingsSectionType } from "../types/settings";
 
 interface SettingsSectionProps {
@@ -18,8 +19,8 @@ interface SettingsSectionProps {
  * Settings Section Component
  *
  * Displays a section of settings items.
- *
- * @param props - Settings section props
+ * Items without a path and without an onClick handler are hidden
+ * (an empty interactive element violates a11y and is dead code).
  */
 export const SettingsSection = ({
   section,
@@ -27,51 +28,61 @@ export const SettingsSection = ({
   onNavigate,
   collapsed = false,
 }: SettingsSectionProps) => {
-  const filteredItems = section.items.filter((item) => item.enabled !== false);
+  const filteredItems = useMemo(
+    () => section.items.filter((item) => item.enabled !== false),
+    [section.items],
+  );
 
   if (filteredItems.length === 0) return null;
 
   return (
-    <div className="mb-6 last:mb-0">
+    <div className="udb-settings-nav">
       {!collapsed && (
-        <h3 className="px-2 mb-2 text-xs font-bold uppercase tracking-wider text-muted-foreground">
+        <h3 className="udb-settings-nav__title">
           {section.title}
         </h3>
       )}
 
-      <div className="space-y-1">
+      <div className="udb-settings-nav__items">
         {filteredItems.map((item) => {
           const isActive = currentPath === item.path;
+          const hasNavigation = Boolean(item.path) || Boolean(item.onClick);
+
+          // Skip rendering items that have neither a path nor a click handler.
+          if (!hasNavigation) {
+            return null;
+          }
 
           const itemContent = (
             <>
               {item.icon && (
-                <item.icon
-                  className={cn(
-                    "h-4 w-4 shrink-0",
-                    isActive && "scale-110"
-                  )}
-                />
+                <item.icon className="udb-settings-nav__item-icon" />
               )}
               {!collapsed && (
                 <>
-                  <span className="flex-1 text-left">{item.label}</span>
+                  <span className="udb-settings-nav__item-label">{item.label}</span>
                   {item.badge !== undefined && item.badge > 0 && (
-                    <span className="ml-auto flex h-5 min-w-5 items-center justify-center rounded-full bg-destructive px-1.5 text-[10px] font-bold text-destructive-foreground">
+                    <span
+                      className="udb-settings-nav__badge"
+                      aria-label={`${item.badge} notifications`}
+                    >
                       {item.badge > 99 ? "99+" : item.badge}
                     </span>
                   )}
-                  {item.path && <ChevronRight className="h-4 w-4 text-muted-foreground" />}
+                  {item.path && (
+                    <ChevronRight
+                      className="udb-settings-nav__chevron"
+                      aria-hidden="true"
+                    />
+                  )}
                 </>
               )}
             </>
           );
 
           const itemClassName = cn(
-            "flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200 w-full",
-            "hover:bg-accent hover:text-accent-foreground",
-            isActive && "bg-accent text-accent-foreground",
-            collapsed ? "justify-center" : "justify-start"
+            "udb-settings-nav__item",
+            isActive && "udb-settings-nav__item--active",
           );
 
           if (item.path) {
@@ -79,9 +90,10 @@ export const SettingsSection = ({
               <Link
                 key={item.key}
                 to={item.path}
-                onClick={() => onNavigate?.(item.path!)}
+                onClick={() => onNavigate?.(item.path as string)}
                 className={itemClassName}
                 title={collapsed ? item.label : undefined}
+                aria-current={isActive ? "page" : undefined}
               >
                 {itemContent}
               </Link>
@@ -92,9 +104,10 @@ export const SettingsSection = ({
             <button
               key={item.key}
               type="button"
-              onClick={() => {}}
+              onClick={item.onClick}
               className={itemClassName}
               title={collapsed ? item.label : undefined}
+              aria-current={isActive ? "page" : undefined}
             >
               {itemContent}
             </button>

package/src/domains/settings/components/UserManagementTable.tsx

@@ -0,0 +1,87 @@
+/**
+ * UserManagementTable — admin skeleton for the users screen.
+ * Config-driven: rows and role catalog come in as props, role
+ * changes delegate out. No fetching, no package-side copy beyond
+ * the empty state.
+ */
+
+import { Users } from "lucide-react";
+import { useT } from "../../../i18n";
+import { SETTINGS_ADMIN_KEYS } from "../utils/i18nKeys";
+import type { RoleKey, RoleInfo } from "../../permissions/types";
+
+export interface ManagedUser {
+  id: string;
+  name: string;
+  email: string;
+  role: RoleKey;
+  status?: string;
+}
+
+export interface UserManagementTableProps {
+  users: ManagedUser[];
+  roles: RoleInfo[];
+  /** Provide to render an editable role select per row. */
+  onRoleChange?: (userId: string, role: RoleKey) => void;
+}
+
+export const UserManagementTable = ({
+  users,
+  roles,
+  onRoleChange,
+}: UserManagementTableProps) => {
+  const t = useT();
+
+  if (users.length === 0) {
+    return (
+      <div className="udb-empty">
+        <div className="udb-empty__icon">
+          <Users className="udb-empty__glyph" aria-hidden="true" />
+        </div>
+        <p className="udb-empty__text">{t(SETTINGS_ADMIN_KEYS.users.empty)}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="udb-table__wrap">
+      <table className="udb-table">
+        <thead>
+          <tr>
+            <th className="udb-table__th">{t("settings.users.columns.name")}</th>
+            <th className="udb-table__th">{t("settings.users.columns.email")}</th>
+            <th className="udb-table__th">{t("settings.users.columns.role")}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {users.map((user) => (
+            <tr key={user.id} className="udb-table__row">
+              <td className="udb-table__td">{user.name}</td>
+              <td className="udb-table__td">{user.email}</td>
+              <td className="udb-table__td">
+                {onRoleChange ? (
+                  <select
+                    className="udb-period-select__select"
+                    value={user.role}
+                    aria-label={t("settings.users.columns.role")}
+                    onChange={(e) => onRoleChange(user.id, e.target.value)}
+                  >
+                    {roles.map((role) => (
+                      <option key={role.key} value={role.key}>
+                        {role.label}
+                      </option>
+                    ))}
+                  </select>
+                ) : (
+                  roles.find((role) => role.key === user.role)?.label ?? user.role
+                )}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default UserManagementTable;