@umituz/web-dashboard 6.1.0 → 6.2.0

package/src/domains/layouts/types/user.ts

@@ -1,37 +1,16 @@
-/**
- * Dashboard Types - User
- *
- * Type definitions for user profile
- */
-
 import type { ComponentType } from "react";
 
-/**
- * User profile info for header
- */
 export interface DashboardUser {
-  /** User ID */
-  id: string;
-  /** Display name */
-  name?: string;
-  /** Email address */
-  email?: string;
-  /** Avatar URL */
-  avatar?: string;
-  /** Whether user has mobile app access */
-  hasMobileApp?: boolean;
-  /** Whether user has web app access */
-  hasWebApp?: boolean;
+    id: string;
+    name?: string;
+    email?: string;
+    avatar?: string;
+    hasMobileApp?: boolean;
+    hasWebApp?: boolean;
 }
 
-/**
- * Navigation item for user menu
- */
 export interface UserNavMenuItem {
-  /** Display label */
-  label: string;
-  /** Icon component */
-  icon: ComponentType<{ className?: string }>;
-  /** Route path */
-  path: string;
+    label: string;
+    icon: ComponentType<{ className?: string }>;
+    path: string;
 }

package/src/domains/layouts/utils/dashboard.ts

@@ -1,16 +1,3 @@
-/**
- * Dashboard Utilities
- *
- * Utility functions for dashboard operations
- */
-
-/**
- * Format notification timestamp to relative time
- *
- * @param createdAt - Notification creation timestamp
- * @param t - i18n translation function
- * @returns Formatted time string
- */
 export function formatNotificationTime(
   createdAt: Date | string | number,
   t: (key: string, params?: Record<string, unknown>) => string
@@ -24,61 +11,35 @@ export function formatNotificationTime(
   return t("dashboard.activityFeed.times.daysAgo", { val: Math.floor(secs / 86400) });
 }
 
-/**
- * Check if a path is active
- *
- * @param currentPath - Current location pathname
- * @param targetPath - Target path to check
- * @returns True if paths match
- */
 export function isPathActive(currentPath: string, targetPath: string): boolean {
   return currentPath === targetPath;
 }
 
-/**
- * Get page title from sidebar configuration
- *
- * @param pathname - Current pathname
- * @param sidebarGroups - Sidebar groups configuration
- * @param extraTitleMap - Extra title mappings
- * @returns Page title or null
- */
 export function getPageTitle(
   pathname: string,
   sidebarGroups: Array<{ items: Array<{ path: string; label: string }> }>,
   extraTitleMap?: Record<string, string>
 ): string | null {
-  // Search in sidebar groups
-  for (const group of sidebarGroups) {
+    for (const group of sidebarGroups) {
     const item = group.items.find((i) => i.path === pathname);
     if (item) return item.label;
   }
 
-  // Search in extra title map
-  if (extraTitleMap?.[pathname]) {
+    if (extraTitleMap?.[pathname]) {
     return extraTitleMap[pathname];
   }
 
   return null;
 }
 
-/**
- * Filter sidebar items by app type and enabled status
- *
- * @param items - Sidebar items to filter
- * @param user - Current user object
- * @returns Filtered items
- */
 export function filterSidebarItems<T extends { enabled?: boolean; requiredApp?: "mobile" | "web" }>(
   items: T[],
   user?: { hasMobileApp?: boolean; hasWebApp?: boolean }
 ): T[] {
   return items.filter((item) => {
-    // Skip disabled items
-    if (item.enabled === false) return false;
+        if (item.enabled === false) return false;
 
-    // Skip items that require specific app types
-    if (!item.requiredApp) return true;
+        if (!item.requiredApp) return true;
     if (item.requiredApp === "mobile") return user?.hasMobileApp ?? false;
     if (item.requiredApp === "web") return user?.hasWebApp ?? false;
 
@@ -86,11 +47,6 @@ export function filterSidebarItems<T extends { enabled?: boolean; requiredApp?:
   });
 }
 
-/**
- * Generate notification ID
- *
- * @returns Unique notification ID
- */
 export function generateNotificationId(): string {
   return crypto.randomUUID();
 }

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

@@ -1,7 +1,3 @@
-/**
- * Layout Utils Export
- */
-
 export {
   formatNotificationTime,
   isPathActive,

package/src/domains/modules/build.tsx

@@ -1,14 +1,3 @@
-/**
- * buildRoutes / buildNav — derive route configs and sidebar groups
- * from a single DashboardModule list.
- *
- * - buildRoutes wraps every permissioned module's element in
- *   <RequirePermission>, so hosts only map the result to <Route>.
- * - buildNav filters by the same permissions via `can`, hides
- *   inNav:false detail routes, groups by navGroup (first-appearance
- *   order) and sorts items by `order` (stable for ties).
- */
-
 import type { ReactNode } from "react";
 import type { SidebarGroup } from "../layouts/types";
 import { RequirePermission } from "../permissions";
@@ -33,8 +22,7 @@ export const buildRoutes = (modules: readonly DashboardModule[]): RouteConfig[]
   }));
 
 export interface BuildNavOptions {
-  /** Permission check, e.g. usePermissions().can. */
-  can: (permission: Permission) => boolean;
+    can: (permission: Permission) => boolean;
 }
 
 export const buildNav = (
@@ -45,9 +33,7 @@ export const buildNav = (
     .filter((module) => module.inNav !== false)
     .filter((module) => !module.permission || can(module.permission));
 
-  // Groups keep their first-appearance order in the module list;
-  // `order` sorts items within their group.
-  const grouped = new Map<string, DashboardModule[]>();
+      const grouped = new Map<string, DashboardModule[]>();
   for (const module of visible) {
     const items = grouped.get(module.navGroup) ?? [];
     items.push(module);

package/src/domains/modules/types.ts

@@ -1,29 +1,14 @@
-/**
- * Dashboard module model — the single source of truth a host app
- * registers once per module; routes and sidebar nav are both derived
- * from it (see build.ts). Generalizes the texora/visora pattern
- * where MODULE_ROUTES and NAV_GROUPS were hand-kept in sync.
- */
-
 import type { ReactNode } from "react";
 import type { LucideIcon } from "lucide-react";
 import type { Permission } from "../permissions/types";
 
 export interface DashboardModule {
-  /** Route path (may contain params, e.g. "/sales/:id"). */
-  path: string;
-  /** i18n key (or plain label) for nav + page headers. */
-  labelKey: string;
-  /** lucide-react icon for the nav item. */
-  icon: LucideIcon;
-  /** Nav group title key — modules with the same key land in one group. */
-  navGroup: string;
-  /** Page content; permission-guarded automatically when `permission` is set. */
-  element: ReactNode;
-  /** Permission required to see/use this module (optional). */
-  permission?: Permission;
-  /** Sort weight inside its nav group (lower first, default last). */
-  order?: number;
-  /** Include in the nav (default true — set false for detail routes). */
-  inNav?: boolean;
+    path: string;
+    labelKey: string;
+    icon: LucideIcon;
+    navGroup: string;
+    element: ReactNode;
+    permission?: Permission;
+    order?: number;
+    inNav?: boolean;
 }

package/src/domains/onboarding/calc/calc.test.ts

@@ -32,7 +32,6 @@ import {
   getCardTransitionDurationMs,
 } from './card-stack-motion-curve';
 
-// TEST_SCENARIOS.md §22
 describe('progress-percentage (§22.1)', () => {
   it('computes percentages without NaN or Infinity', () => {
     expect(computeProgressPercentage(0, 5)).toBe(0);
@@ -56,7 +55,6 @@ describe('progress-percentage (§22.1)', () => {
   });
 });
 
-// TEST_SCENARIOS.md §22.2
 describe('step-index-clamp (§22.2)', () => {
   it('clamps arbitrary indices into range', () => {
     expect(clampStepIndex(0, 5)).toBe(0);
@@ -78,12 +76,10 @@ describe('step-index-clamp (§22.2)', () => {
   });
 });
 
-// TEST_SCENARIOS.md §22.3
 describe('swipe-gesture-curve (§22.3)', () => {
   it('registers right swipes only above the threshold', () => {
     expect(didCrossRightSwipeThreshold(50)).toBe(false);
-    expect(didCrossRightSwipeThreshold(120)).toBe(false); // boundary is not "above"
-    expect(didCrossRightSwipeThreshold(150)).toBe(true);
+    expect(didCrossRightSwipeThreshold(120)).toBe(false);     expect(didCrossRightSwipeThreshold(150)).toBe(true);
   });
 
   it('registers left swipes only below the negative threshold', () => {
@@ -96,7 +92,6 @@ describe('swipe-gesture-curve (§22.3)', () => {
   });
 });
 
-// TEST_SCENARIOS.md §22.4
 describe('slider-value-bounds (§22.4)', () => {
   it('clamps values into bounds', () => {
     expect(clampValueToBounds(50, 0, 100, 'x')).toBe(50);
@@ -123,7 +118,6 @@ describe('slider-value-bounds (§22.4)', () => {
   });
 });
 
-// TEST_SCENARIOS.md §22.5
 describe('duration-equal-split (§22.5)', () => {
   it('splits a total duration evenly', () => {
     expect(splitTotalDuration(3000, 3)).toBe(1000);
@@ -140,7 +134,6 @@ describe('duration-equal-split (§22.5)', () => {
   });
 });
 
-// TEST_SCENARIOS.md §22.6
 describe('count-with-locale (§22.6)', () => {
   it('formats counts for human display', () => {
     expect(formatCountWithLocale(250000, 'en-US')).toBe('250,000');
@@ -156,7 +149,6 @@ describe('count-with-locale (§22.6)', () => {
   });
 });
 
-// TEST_SCENARIOS.md §22.7
 describe('elapsed-millis (§22.7)', () => {
   it('returns the positive difference', () => {
     const start = new Date('2026-01-01T10:00:00Z');

package/src/domains/onboarding/calc/card-stack-motion-curve.ts

@@ -1,9 +1,3 @@
-/**
- * Card stack motion math.
- * Owns the scale/opacity transitions used by TinderCardsScreen and similar
- * stack-style screens. Tuning these in one place keeps the stack feel consistent.
- */
-
 const MOTION_ENTER_DURATION_MS = 250;
 const INITIAL_SCALE = 0.95;
 const STEADY_SCALE = 1;

package/src/domains/onboarding/calc/count-with-locale.ts

@@ -1,11 +1,3 @@
-/**
- * Locale-aware count formatting.
- * Used wherever a large count (e.g. "Trusted by 250,000+") is shown to the user.
- * The consumer never has to call .toLocaleString() directly.
- */
-
-/** Format a number for human display. e.g. 250000 -> "250,000" (en) / "250.000" (de-DE).
- *  An omitted locale uses the host default; an invalid locale falls back to en-US. */
 export function formatCountWithLocale(value: number, locale?: string): string {
   if (!Number.isFinite(value)) return '0';
   try {

package/src/domains/onboarding/calc/duration-equal-split.ts

@@ -1,24 +1,12 @@
-/**
- * Duration equal-split math.
- * Splits a total processing duration into equal per-step slices.
- * Falls back to a sensible default when the consumer doesn't provide a total.
- */
-
 const DEFAULT_STEP_DURATION_MS = 1500;
 const MIN_PARTS = 1;
 
-/**
- * Per-step duration when a total is given.
- * Returns 0 if the total is unset OR the parts list is empty —
- * never divides by zero.
- */
 export function splitTotalDuration(totalMs: number | undefined, parts: number): number {
   if (totalMs === undefined || totalMs <= 0) return DEFAULT_STEP_DURATION_MS;
   const safeParts = Math.max(MIN_PARTS, parts);
   return totalMs / safeParts;
 }
 
-/** The default per-step duration when the consumer omits the total. */
 export function getDefaultStepDurationMs(): number {
   return DEFAULT_STEP_DURATION_MS;
 }

package/src/domains/onboarding/calc/elapsed-millis.ts

@@ -1,11 +1,5 @@
-/**
- * Elapsed-millisecond math.
- * Single source of truth for "how long did this take?".
- */
-
 const ZERO_MS = 0;
 
-/** Milliseconds between two Dates. Never negative — clamps to 0. */
 export function elapsedMillis(start: Date, end: Date): number {
   const diff = end.getTime() - start.getTime();
   return diff > ZERO_MS ? diff : ZERO_MS;

package/src/domains/onboarding/calc/progress-percentage.ts

@@ -1,15 +1,8 @@
-/**
- * Progress percentage calculations.
- * Owns the math for "how far are we through the flow?".
- * Zero hardcoded fallbacks — every input is explicit.
- */
-
 const ZERO_FRACTION = 0;
 const PERCENT_MULTIPLIER = 100;
 
 function defensiveDenominator(totalSteps: number): number {
-  // Defensive: an empty flow must report 0%, never NaN or Infinity.
-  return totalSteps > 0 ? totalSteps : 1;
+    return totalSteps > 0 ? totalSteps : 1;
 }
 
 function defensiveCurrentStep(currentStep: number, totalSteps: number): number {
@@ -18,19 +11,16 @@ function defensiveCurrentStep(currentStep: number, totalSteps: number): number {
   return currentStep;
 }
 
-/** Progress as a 0..1 fraction. `1` means "all steps visited". */
 export function computeProgressFraction(currentStep: number, totalSteps: number): number {
   if (totalSteps <= 0) return ZERO_FRACTION;
   const safeCurrent = defensiveCurrentStep(currentStep, totalSteps);
   return safeCurrent / defensiveDenominator(totalSteps);
 }
 
-/** Progress as a 0..100 percentage. Safe for the UI bar. */
 export function computeProgressPercentage(currentStep: number, totalSteps: number): number {
   return computeProgressFraction(currentStep, totalSteps) * PERCENT_MULTIPLIER;
 }
 
-/** Number of steps remaining (including the current one). */
 export function computeRemainingSteps(currentStep: number, totalSteps: number): number {
   if (totalSteps <= 0) return 0;
   return Math.max(0, totalSteps - defensiveCurrentStep(currentStep, totalSteps));

package/src/domains/onboarding/calc/slider-value-bounds.ts

@@ -1,13 +1,6 @@
-/**
- * Slider value math.
- * Owns the bounds enforcement for preference sliders.
- * Misconfigured bounds (min > max) are surfaced via console — never silently masked.
- */
-
 const SLIDER_MIN_IF_UNSET = 0;
 const SLIDER_MAX_IF_UNSET = 100;
 
-/** Defensive bounds for a slider: if the config omits one, fall back to a sensible default. */
 export function resolveSliderBounds(
   min: number | undefined,
   max: number | undefined,
@@ -18,12 +11,10 @@ export function resolveSliderBounds(
   };
 }
 
-/** Were the configured bounds logically valid? */
 export function areSliderBoundsValid(min: number, max: number): boolean {
   return min <= max;
 }
 
-/** Clamp a value into the [min, max] range, surfacing misconfigured bounds to the console. */
 export function clampValueToBounds(
   value: number,
   min: number,
@@ -31,8 +22,7 @@ export function clampValueToBounds(
   preferenceId: string,
 ): number {
   if (!areSliderBoundsValid(min, max)) {
-    // Surface the misconfiguration — never silently mask.
-     
+         
     console.error(
       `[web-onboarding] preference "${preferenceId}" has min > max (${min} > ${max}); returning value as-is.`,
     );

package/src/domains/onboarding/calc/step-index-clamp.ts

@@ -1,13 +1,6 @@
-/**
- * Step index math.
- * Owns the bounds for "where can the cursor be in the flow?".
- * Pure, no React, no side effects.
- */
-
 const MIN_INDEX = 0;
 const MIN_TOTAL_STEPS = 1;
 
-/** Clamp an arbitrary index into the valid [0, totalSteps-1] range. */
 export function clampStepIndex(index: number, totalSteps: number): number {
   if (totalSteps < MIN_TOTAL_STEPS) return MIN_INDEX;
   if (index < MIN_INDEX) return MIN_INDEX;
@@ -15,14 +8,12 @@ export function clampStepIndex(index: number, totalSteps: number): number {
   return index;
 }
 
-/** Move one step forward, stopping at the last step. */
 export function advanceStepIndex(currentIndex: number, totalSteps: number): number {
   if (totalSteps < MIN_TOTAL_STEPS) return MIN_INDEX;
   const lastIndex = totalSteps - MIN_TOTAL_STEPS;
   return Math.min(currentIndex + MIN_TOTAL_STEPS, lastIndex);
 }
 
-/** Move one step backward, stopping at the first step. */
 export function retreatStepIndex(currentIndex: number): number {
   return Math.max(MIN_INDEX, currentIndex - MIN_TOTAL_STEPS);
 }

package/src/domains/onboarding/calc/swipe-gesture-curve.ts

@@ -1,12 +1,5 @@
-/**
- * Swipe gesture math.
- * Owns every numeric value used by SwipeCard's drag/rotation/opacity curves.
- * Centralizing them here means the gesture "feel" can be tuned in one place.
- */
-
 const SWIPE_THRESHOLD_PX = 120;
 const DRAG_RANGE_PX = 200;
-/** Drag distance (px) at which the decision badges reach half opacity. */
 const OPACITY_MIDPOINT_PX = 50;
 const FULL_OPACITY = 1;
 const HALF_OPACITY = 0.5;
@@ -14,10 +7,8 @@ const ZERO_OPACITY = 0;
 const MAX_ROTATION_DEG = 15;
 const ZERO_ROTATION_DEG = 0;
 
-/** Minimum horizontal distance the user must drag to commit a swipe decision. */
 export const SWIPE_DECISION_THRESHOLD_PX = SWIPE_THRESHOLD_PX;
 
-/** Card rotation expressed in degrees, mapped from -200..+200 px drag. */
 export const SWIPE_ROTATION_RANGE: [number, number, number] = [
   -DRAG_RANGE_PX,
   ZERO_ROTATION_DEG,
@@ -30,7 +21,6 @@ export const SWIPE_ROTATION_VALUES: [number, number, number] = [
   MAX_ROTATION_DEG,
 ];
 
-/** DISAGREE badge opacity curve, mapped from -200..0 px drag. */
 export const SWIPE_LEFT_OPACITY_INPUT: [number, number, number] = [
   -DRAG_RANGE_PX,
   -OPACITY_MIDPOINT_PX,
@@ -43,7 +33,6 @@ export const SWIPE_LEFT_OPACITY_VALUES: [number, number, number] = [
   ZERO_OPACITY,
 ];
 
-/** AGREE badge opacity curve, mapped from 0..+200 px drag. */
 export const SWIPE_RIGHT_OPACITY_INPUT: [number, number, number] = [
   0,
   OPACITY_MIDPOINT_PX,
@@ -56,12 +45,10 @@ export const SWIPE_RIGHT_OPACITY_VALUES: [number, number, number] = [
   FULL_OPACITY,
 ];
 
-/** Did the gesture cross the threshold to register as a right-swipe? */
 export function didCrossRightSwipeThreshold(offsetX: number): boolean {
   return offsetX > SWIPE_THRESHOLD_PX;
 }
 
-/** Did the gesture cross the threshold to register as a left-swipe? */
 export function didCrossLeftSwipeThreshold(offsetX: number): boolean {
   return offsetX < -SWIPE_THRESHOLD_PX;
 }

package/src/domains/onboarding/components/{shared/AnimationWrapper.tsx → AnimationWrapper.tsx}

@@ -36,10 +36,6 @@ const variantsByTransition: Record<
   },
 };
 
-/**
- * Wraps children with a transition keyed on stepKey.
- * Respects `prefers-reduced-motion` by disabling transitions.
- */
 export function AnimationWrapper({
   stepKey,
   children,

package/src/domains/onboarding/components/{shared/OnboardingErrorBoundary.tsx → OnboardingErrorBoundary.tsx}

@@ -1,28 +1,19 @@
 import { Component, Fragment, type ContextType, type ErrorInfo, type ReactNode } from 'react';
 import { AlertTriangle } from 'lucide-react';
 import { PrimaryButton } from './PrimaryButton';
-import { OnboardingIntlContext, type OnboardingIntl } from '../OnboardingIntl';
+import { OnboardingIntlContext, type OnboardingIntl } from './OnboardingIntl';
 
 export interface OnboardingErrorBoundaryProps {
   children: ReactNode;
-  /** Called when the boundary trips — useful for analytics. */
   onError?: (error: Error, info: ErrorInfo) => void;
-  /** Render a custom error UI. */
   renderError?: (error: Error, retry: () => void) => ReactNode;
 }
 
 interface OnboardingErrorBoundaryState {
   error: Error | null;
-  /** Bumped on retry so the children subtree fully remounts, not just re-renders. */
   attempt: number;
 }
 
-/**
- * Catches render-time errors inside the onboarding flow.
- * Critical path rule: a broken screen must never produce a blank white page.
- * Retry clears the error AND remounts the children (a fresh subtree gets a
- * fresh chance at rendering — deterministic throws aside).
- */
 export class OnboardingErrorBoundary extends Component<
   OnboardingErrorBoundaryProps,
   OnboardingErrorBoundaryState
@@ -38,8 +29,7 @@ export class OnboardingErrorBoundary extends Component<
 
   componentDidCatch(error: Error, info: ErrorInfo): void {
     this.props.onError?.(error, info);
-     
-    console.error('[web-onboarding] render error', error, info.componentStack);
+    console.error('[onboarding] render error', error, info.componentStack);
   }
 
   retry = (): void => {
@@ -58,22 +48,12 @@ export class OnboardingErrorBoundary extends Component<
 
     const { labels } = intl;
     return (
-      <div
-        role="alert"
-        className="uob-flow mx-auto flex min-h-screen w-full max-w-md flex-col items-center justify-center gap-4 px-6 text-center"
-      >
-        <div
-          className="flex h-16 w-16 items-center justify-center rounded-2xl bg-[rgb(var(--uob-error))]/10 text-[rgb(var(--uob-error))]"
-          aria-hidden="true"
-        >
-          <AlertTriangle className="h-8 w-8" />
+      <div role="alert" className="udb-onb udb-onb-errorpage">
+        <div className="udb-onb-errorpage__icon" aria-hidden="true">
+          <AlertTriangle className="udb-onb-icon--lg" />
         </div>
-        <h2 className="text-2xl font-semibold text-[rgb(var(--uob-text-primary))]">
-          {labels.somethingWentWrong}
-        </h2>
-        <p className="text-sm text-[rgb(var(--uob-text-muted))]">
-          {error.message || labels.unexpectedError}
-        </p>
+        <h2 className="udb-onb-title">{labels.somethingWentWrong}</h2>
+        <p className="udb-onb-lead">{error.message || labels.unexpectedError}</p>
         <PrimaryButton onClick={this.retry}>{labels.tryAgain}</PrimaryButton>
       </div>
     );