@umituz/web-dashboard 5.0.1 → 6.1.0

package/src/domains/onboarding/components/screens/ProcessingScreen.tsx

@@ -0,0 +1,79 @@
+import { useEffect, useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Check } from 'lucide-react';
+import { cn } from '../../theme/cn';
+import { splitTotalDuration } from '../../calc/duration-equal-split';
+import type { ProcessingScreenConfig } from '../../types/screens';
+
+export interface ProcessingScreenProps {
+  config: ProcessingScreenConfig;
+  onComplete: (data: { completed: true }) => void;
+}
+
+export function ProcessingScreen({ config, onComplete }: ProcessingScreenProps) {
+  const stepDuration = splitTotalDuration(config.durationMs, config.steps.length);
+  const [currentStep, setCurrentStep] = useState(0);
+
+  useEffect(() => {
+    if (currentStep >= config.steps.length) {
+      onComplete({ completed: true });
+      return;
+    }
+    const timer = window.setTimeout(() => setCurrentStep((s) => s + 1), stepDuration);
+    return () => window.clearTimeout(timer);
+  }, [currentStep, config.steps.length, stepDuration, onComplete]);
+
+  return (
+    <div className="flex flex-1 flex-col items-center justify-center gap-8 text-center">
+      {config.title && (
+        <h2 className="text-2xl font-semibold text-[rgb(var(--uob-text-primary))] sm:text-3xl">
+          {config.title}
+        </h2>
+      )}
+      <ul className="flex w-full max-w-md flex-col gap-3" aria-live="polite">
+        {config.steps.map((step, i) => {
+          const isDone = i < currentStep;
+          const isActive = i === currentStep;
+          return (
+            <li
+              key={`${step}-${i}`}
+              className={cn(
+                'flex items-center gap-3 rounded-lg border p-3 text-left text-sm',
+                isDone
+                  ? 'border-[rgb(var(--uob-success))] bg-[rgb(var(--uob-success))]/10'
+                  : isActive
+                    ? 'border-[rgb(var(--uob-primary-500))] bg-[rgb(var(--uob-primary-50))]'
+                    : 'border-[rgb(var(--uob-border))] bg-[rgb(var(--uob-surface))]',
+              )}
+            >
+              <span
+                className={cn(
+                  'flex h-6 w-6 shrink-0 items-center justify-center rounded-full',
+                  isDone
+                    ? 'bg-[rgb(var(--uob-success))] text-white'
+                    : isActive
+                      ? 'bg-[rgb(var(--uob-primary-500))] text-white'
+                      : 'bg-[rgb(var(--uob-border))] text-[rgb(var(--uob-text-muted))]',
+                )}
+              >
+                {isDone ? <Check className="h-4 w-4" /> : <span className="text-xs">{i + 1}</span>}
+              </span>
+              <span className="text-[rgb(var(--uob-text-primary))]">{step}</span>
+              <AnimatePresence>
+                {isActive && (
+                  <motion.span
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    className="ml-auto h-2 w-2 animate-pulse rounded-full bg-[rgb(var(--uob-primary-500))]"
+                    aria-hidden="true"
+                  />
+                )}
+              </AnimatePresence>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}

package/src/domains/onboarding/components/screens/SocialProofScreen.tsx

@@ -0,0 +1,116 @@
+import { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Star } from 'lucide-react';
+import { PrimaryButton } from '../shared/PrimaryButton';
+import { cn } from '../../theme/cn';
+import { useOnboardingIntl } from '../OnboardingIntl';
+import type { SocialProofScreenConfig } from '../../types/screens';
+
+export interface SocialProofScreenProps {
+  config: SocialProofScreenConfig;
+  onNext: () => void;
+}
+
+export function SocialProofScreen({ config, onNext }: SocialProofScreenProps) {
+  const { labels } = useOnboardingIntl();
+  const [index, setIndex] = useState(0);
+  const total = config.testimonials.length;
+  const current = config.testimonials[index];
+
+  function go(delta: number) {
+    setIndex((i) => (i + delta + total) % total);
+  }
+
+  return (
+    <div className="flex flex-1 flex-col gap-8">
+      {config.title && (
+        <h2 className="text-2xl font-semibold text-[rgb(var(--uob-text-primary))] sm:text-3xl">
+          {config.title}
+        </h2>
+      )}
+      <div className="flex flex-1 flex-col items-center justify-center">
+        <AnimatePresence mode="wait">
+          <motion.blockquote
+            key={`${current.name}-${index}`}
+            initial={{ opacity: 0, y: 12 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -12 }}
+            transition={{ duration: 0.3 }}
+            className="flex max-w-xl flex-col items-center gap-4 rounded-2xl border border-[rgb(var(--uob-border))] bg-[rgb(var(--uob-surface))] p-8 text-center"
+          >
+            {current.rating !== undefined && (
+              <div className="flex items-center gap-1" aria-label={`Rated ${current.rating} out of 5`}>
+                {Array.from({ length: 5 }).map((_, i) => (
+                  <Star
+                    key={i}
+                    className={cn(
+                      'h-5 w-5',
+                      i < current.rating!
+                        ? 'fill-current text-[rgb(var(--uob-warning))]'
+                        : 'text-[rgb(var(--uob-border))]',
+                    )}
+                  />
+                ))}
+              </div>
+            )}
+            <p className="text-lg text-[rgb(var(--uob-text-primary))]">“{current.content}”</p>
+            <footer className="flex flex-col items-center gap-1">
+              {current.avatar && (
+                <img
+                  src={current.avatar}
+                  alt=""
+                  className="h-12 w-12 rounded-full object-cover"
+                />
+              )}
+              <cite className="text-sm font-semibold not-italic text-[rgb(var(--uob-text-primary))]">
+                {current.name}
+              </cite>
+              <span className="text-sm text-[rgb(var(--uob-text-muted))]">{current.role}</span>
+            </footer>
+          </motion.blockquote>
+        </AnimatePresence>
+      </div>
+      <div className="flex items-center justify-between gap-4">
+        <div className="flex gap-1.5" role="tablist" aria-label="Testimonials">
+          {config.testimonials.map((t, i) => (
+            <button
+              key={`${t.name}-${i}`}
+              type="button"
+              role="tab"
+              aria-selected={i === index}
+              aria-label={`${t.name}: ${t.content}`}
+              onClick={() => setIndex(i)}
+              className={cn(
+                'h-2 w-2 rounded-full transition-all',
+                i === index
+                  ? 'w-6 bg-[rgb(var(--uob-primary-500))]'
+                  : 'bg-[rgb(var(--uob-border))]',
+              )}
+            />
+          ))}
+        </div>
+        <div className="flex gap-2">
+          {total > 1 && (
+            <>
+              <button
+                type="button"
+                onClick={() => go(-1)}
+                className="rounded-md border border-[rgb(var(--uob-border))] bg-[rgb(var(--uob-surface))] px-3 py-1 text-sm hover:bg-[rgb(var(--uob-surface-muted))]"
+              >
+                {labels.previous}
+              </button>
+              <button
+                type="button"
+                onClick={() => go(1)}
+                className="rounded-md border border-[rgb(var(--uob-border))] bg-[rgb(var(--uob-surface))] px-3 py-1 text-sm hover:bg-[rgb(var(--uob-surface-muted))]"
+              >
+                {labels.nextAction}
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+      <PrimaryButton onClick={onNext}>{config.cta ?? labels.continueAction}</PrimaryButton>
+    </div>
+  );
+}

package/src/domains/onboarding/components/screens/TinderCardsScreen.tsx

@@ -0,0 +1,108 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { SwipeCard } from '../shared/SwipeCard';
+import { PrimaryButton } from '../shared/PrimaryButton';
+import {
+  getCardEnterAnimate,
+  getCardEnterExit,
+  getCardEnterInitial,
+  getCardTransitionDurationMs,
+} from '../../calc/card-stack-motion-curve';
+import { formatLabel, useOnboardingIntl } from '../OnboardingIntl';
+import type { TinderCardsScreenConfig } from '../../types/screens';
+
+export interface TinderCardsScreenProps {
+  config: TinderCardsScreenConfig;
+  onNext: (data: { liked: string[] }) => void;
+}
+
+export function TinderCardsScreen({ config, onNext }: TinderCardsScreenProps) {
+  const { labels } = useOnboardingIntl();
+  const [index, setIndex] = useState(0);
+  const [liked, setLiked] = useState<string[]>([]);
+  const total = config.statements.length;
+  const current = config.statements[index];
+  // Refs make decision handlers always see the latest state without recreating callbacks
+  // on every index change — which would have remounted SwipeCard and lost gestures.
+  const indexRef = useRef(index);
+  const likedRef = useRef(liked);
+  useEffect(() => {
+    indexRef.current = index;
+    likedRef.current = liked;
+  }, [index, liked]);
+
+  const handleDecision = useCallback(
+    (likedStatement: boolean) => {
+      if (likedStatement) {
+        setLiked((prev) => [...prev, config.statements[indexRef.current].id]);
+      }
+      setIndex((i) => i + 1);
+    },
+    [config.statements],
+  );
+
+  const onSwipeLeft = useCallback(() => handleDecision(false), [handleDecision]);
+  const onSwipeRight = useCallback(() => handleDecision(true), [handleDecision]);
+
+  if (!current) {
+    return (
+      <div className="flex flex-1 flex-col items-center justify-center gap-6">
+        <p className="text-lg text-[rgb(var(--uob-text-primary))]">{labels.allDone}</p>
+        <PrimaryButton onClick={() => onNext({ liked: likedRef.current })}>
+          {config.cta ?? labels.continueAction}
+        </PrimaryButton>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-1 flex-col gap-6">
+      {config.title && (
+        <h2 className="text-2xl font-semibold text-[rgb(var(--uob-text-primary))] sm:text-3xl">
+          {config.title}
+        </h2>
+      )}
+      <div className="flex flex-1 items-center justify-center">
+        <AnimatePresence mode="wait">
+          <motion.div
+            key={current.id}
+            initial={{ opacity: getCardEnterInitial().opacity, scale: getCardEnterInitial().scale }}
+            animate={{ opacity: getCardEnterAnimate().opacity, scale: getCardEnterAnimate().scale }}
+            exit={{ opacity: getCardEnterExit().opacity, scale: getCardEnterExit().scale }}
+            transition={{ duration: getCardTransitionDurationMs() / 1000 }}
+            className="w-full"
+          >
+            <SwipeCard
+              text={current.text}
+              category={current.category}
+              onSwipeLeft={onSwipeLeft}
+              onSwipeRight={onSwipeRight}
+            />
+          </motion.div>
+        </AnimatePresence>
+      </div>
+      <div className="flex items-center justify-between gap-2">
+        <button
+          type="button"
+          onClick={onSwipeLeft}
+          className="flex-1 rounded-xl border-2 border-[rgb(var(--uob-error))] py-3 font-semibold text-[rgb(var(--uob-error))] transition-colors hover:bg-[rgb(var(--uob-error))] hover:text-white"
+        >
+          {labels.disagree}
+        </button>
+        <button
+          type="button"
+          onClick={onSwipeRight}
+          className="flex-1 rounded-xl border-2 border-[rgb(var(--uob-success))] py-3 font-semibold text-[rgb(var(--uob-success))] transition-colors hover:bg-[rgb(var(--uob-success))] hover:text-white"
+        >
+          {labels.agree}
+        </button>
+      </div>
+      <p
+        className="text-center text-sm text-[rgb(var(--uob-text-muted))]"
+        aria-live="polite"
+      >
+        {formatLabel(labels.countOfPattern, { current: index + 1, total })}
+      </p>
+    </div>
+  );
+}

package/src/domains/onboarding/components/screens/ValueDeliveryScreen.tsx

@@ -0,0 +1,85 @@
+import { useEffect, useRef, useState } from 'react';
+import { Sparkles } from 'lucide-react';
+import { PrimaryButton } from '../shared/PrimaryButton';
+import { useOnboardingIntl } from '../OnboardingIntl';
+import type { ValueDeliveryScreenConfig } from '../../types/screens';
+
+export interface ValueDeliveryScreenProps<TResult = unknown> {
+  config: ValueDeliveryScreenConfig<TResult>;
+  onNext: () => void;
+}
+
+/**
+ * Shows the artifact produced earlier in the flow.
+ * The default body is a JSON dump of `result` — deliberately generic. Screens are
+ * expected to be customized per product; this default keeps templates runnable.
+ */
+export function ValueDeliveryScreen<TResult = unknown>({
+  config,
+  onNext,
+}: ValueDeliveryScreenProps<TResult>) {
+  const { labels } = useOnboardingIntl();
+  const [copied, setCopied] = useState(false);
+  const copiedTimer = useRef<number | null>(null);
+
+  useEffect(
+    () => () => {
+      if (copiedTimer.current !== null) window.clearTimeout(copiedTimer.current);
+    },
+    [],
+  );
+
+  async function handleShare() {
+    if (!config.shareConfig) return;
+    const { text, url } = config.shareConfig;
+    try {
+      if (typeof navigator !== 'undefined' && typeof navigator.share === 'function') {
+        await navigator.share({ text, url });
+        return;
+      }
+      if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(url ?? text);
+        setCopied(true);
+        if (copiedTimer.current !== null) window.clearTimeout(copiedTimer.current);
+        copiedTimer.current = window.setTimeout(() => setCopied(false), 2000);
+      }
+    } catch (error) {
+      // navigator.share rejects with AbortError when the user dismisses the sheet —
+      // that is an expected outcome, not a failure worth logging.
+      if (!(error instanceof DOMException && error.name === 'AbortError')) {
+         
+        console.error('[web-onboarding] share failed', error);
+      }
+    }
+  }
+
+  return (
+    <div className="flex flex-1 flex-col items-center justify-center gap-6 text-center">
+      <div
+        className="flex h-20 w-20 items-center justify-center rounded-2xl bg-[rgb(var(--uob-primary-50))] text-[rgb(var(--uob-primary-500))]"
+        aria-hidden="true"
+      >
+        <Sparkles className="h-10 w-10" />
+      </div>
+      <h2 className="text-3xl font-bold text-[rgb(var(--uob-text-primary))]">{config.title}</h2>
+      <div className="w-full max-w-md rounded-2xl border border-[rgb(var(--uob-border))] bg-[rgb(var(--uob-surface))] p-6 text-left">
+        <pre className="overflow-x-auto whitespace-pre-wrap text-sm text-[rgb(var(--uob-text-primary))]">
+          {JSON.stringify(config.result, null, 2)}
+        </pre>
+      </div>
+      {config.shareConfig && (
+        <div className="flex flex-col items-center gap-1 text-sm text-[rgb(var(--uob-text-muted))]">
+          <button
+            type="button"
+            onClick={handleShare}
+            className="rounded-xl border border-[rgb(var(--uob-border))] bg-[rgb(var(--uob-surface))] px-4 py-2 text-sm font-semibold text-[rgb(var(--uob-text-primary))] transition-colors hover:border-[rgb(var(--uob-primary-500))]"
+          >
+            {copied ? labels.copied : labels.share}
+          </button>
+          <span>{config.shareConfig.text}</span>
+        </div>
+      )}
+      <PrimaryButton onClick={onNext}>{config.cta ?? labels.continueAction}</PrimaryButton>
+    </div>
+  );
+}

package/src/domains/onboarding/components/screens/WelcomeScreen.tsx

@@ -0,0 +1,52 @@
+import { PrimaryButton } from '../shared/PrimaryButton';
+import { renderBundledIcon } from '../shared/renderBundledIcon';
+import { doesIconNameResolve } from '../../predicates/icon-name-resolves';
+import { useOnboardingIntl } from '../OnboardingIntl';
+import type { WelcomeScreenConfig } from '../../types/screens';
+
+export interface WelcomeScreenProps {
+  config: WelcomeScreenConfig;
+  onNext: () => void;
+  isLoading?: boolean;
+}
+
+export function WelcomeScreen({ config, onNext, isLoading }: WelcomeScreenProps) {
+  const { labels } = useOnboardingIntl();
+  return (
+    <div className="flex flex-1 flex-col items-center justify-center gap-8 text-center">
+      {doesIconNameResolve(config.heroIconName) && (
+        <div
+          className="flex h-24 w-24 items-center justify-center rounded-3xl bg-[rgb(var(--uob-primary-50))] text-[rgb(var(--uob-primary-500))]"
+          aria-hidden="true"
+        >
+          {renderBundledIcon(config.heroIconName, 'h-12 w-12')}
+        </div>
+      )}
+      <div className="flex flex-col gap-3">
+        {config.title && (
+          <h1 className="text-4xl font-bold text-[rgb(var(--uob-text-primary))] sm:text-5xl">
+            {config.title}
+          </h1>
+        )}
+        {config.subtitle && (
+          <p className="text-lg text-[rgb(var(--uob-text-muted))]">{config.subtitle}</p>
+        )}
+        {config.highlight && (
+          <p className="text-sm font-semibold uppercase tracking-wide text-[rgb(var(--uob-primary-500))]">
+            {config.highlight}
+          </p>
+        )}
+      </div>
+      {config.cta && (
+        <PrimaryButton onClick={config.onCta ?? onNext} loading={isLoading}>
+          {config.cta}
+        </PrimaryButton>
+      )}
+      {!config.cta && (
+        <PrimaryButton onClick={config.onCta ?? onNext} loading={isLoading}>
+          {labels.continueAction}
+        </PrimaryButton>
+      )}
+    </div>
+  );
+}

package/src/domains/onboarding/components/screens/index.ts

@@ -0,0 +1,28 @@
+export { WelcomeScreen } from './WelcomeScreen';
+export type { WelcomeScreenProps } from './WelcomeScreen';
+export { GoalQuestionScreen } from './GoalQuestionScreen';
+export type { GoalQuestionScreenProps } from './GoalQuestionScreen';
+export { PainPointsScreen } from './PainPointsScreen';
+export type { PainPointsScreenProps } from './PainPointsScreen';
+export { SocialProofScreen } from './SocialProofScreen';
+export type { SocialProofScreenProps } from './SocialProofScreen';
+export { TinderCardsScreen } from './TinderCardsScreen';
+export type { TinderCardsScreenProps } from './TinderCardsScreen';
+export { PersonalizedSolutionScreen } from './PersonalizedSolutionScreen';
+export type { PersonalizedSolutionScreenProps } from './PersonalizedSolutionScreen';
+export { ComparisonScreen } from './ComparisonScreen';
+export type { ComparisonScreenProps } from './ComparisonScreen';
+export { PreferencesScreen } from './PreferencesScreen';
+export type { PreferencesScreenProps } from './PreferencesScreen';
+export { PermissionPrimingScreen } from './PermissionPrimingScreen';
+export type { PermissionPrimingScreenProps } from './PermissionPrimingScreen';
+export { ProcessingScreen } from './ProcessingScreen';
+export type { ProcessingScreenProps } from './ProcessingScreen';
+export { AppDemoScreen } from './AppDemoScreen';
+export type { AppDemoScreenProps } from './AppDemoScreen';
+export { ValueDeliveryScreen } from './ValueDeliveryScreen';
+export type { ValueDeliveryScreenProps } from './ValueDeliveryScreen';
+export { AccountGateScreen } from './AccountGateScreen';
+export type { AccountGateScreenProps } from './AccountGateScreen';
+export { PaywallScreen } from './PaywallScreen';
+export type { PaywallScreenProps } from './PaywallScreen';

package/src/domains/onboarding/components/shared/AnimationWrapper.tsx

@@ -0,0 +1,73 @@
+import type { ReactNode } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useReducedMotion } from '../hooks/useReducedMotion';
+
+export type ScreenTransition = 'slide' | 'fade' | 'scale' | 'none';
+
+export interface AnimationWrapperProps {
+  stepKey: string;
+  children: ReactNode;
+  transition?: ScreenTransition;
+  className?: string;
+}
+
+const variantsByTransition: Record<
+  Exclude<ScreenTransition, 'none'>,
+  {
+    initial: { opacity: number; x?: number; y?: number; scale?: number };
+    animate: { opacity: number; x?: number; y?: number; scale?: number };
+    exit: { opacity: number; x?: number; y?: number; scale?: number };
+  }
+> = {
+  slide: {
+    initial: { opacity: 0, x: 40 },
+    animate: { opacity: 1, x: 0 },
+    exit: { opacity: 0, x: -40 },
+  },
+  fade: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+  },
+  scale: {
+    initial: { opacity: 0, scale: 0.96 },
+    animate: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 1.04 },
+  },
+};
+
+/**
+ * Wraps children with a transition keyed on stepKey.
+ * Respects `prefers-reduced-motion` by disabling transitions.
+ */
+export function AnimationWrapper({
+  stepKey,
+  children,
+  transition = 'slide',
+  className,
+}: AnimationWrapperProps) {
+  const reduced = useReducedMotion();
+  const effective: ScreenTransition = reduced ? 'none' : transition;
+  if (effective === 'none') {
+    return (
+      <div key={stepKey} className={className}>
+        {children}
+      </div>
+    );
+  }
+  const variants = variantsByTransition[effective];
+  return (
+    <AnimatePresence mode="wait" initial={false}>
+      <motion.div
+        key={stepKey}
+        initial={variants.initial}
+        animate={variants.animate}
+        exit={variants.exit}
+        transition={{ duration: 0.3, ease: 'easeOut' }}
+        className={className}
+      >
+        {children}
+      </motion.div>
+    </AnimatePresence>
+  );
+}

package/src/domains/onboarding/components/shared/OnboardingErrorBoundary.tsx

@@ -0,0 +1,81 @@
+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';
+
+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
+> {
+  static contextType = OnboardingIntlContext;
+  declare context: ContextType<typeof OnboardingIntlContext>;
+
+  state: OnboardingErrorBoundaryState = { error: null, attempt: 0 };
+
+  static getDerivedStateFromError(error: Error): OnboardingErrorBoundaryState {
+    return { error, attempt: 0 };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo): void {
+    this.props.onError?.(error, info);
+     
+    console.error('[web-onboarding] render error', error, info.componentStack);
+  }
+
+  retry = (): void => {
+    this.setState((prev) => ({ error: null, attempt: prev.attempt + 1 }));
+  };
+
+  render(): ReactNode {
+    const { error, attempt } = this.state;
+    const intl: OnboardingIntl = this.context;
+
+    if (!error) {
+      return <Fragment key={attempt}>{this.props.children}</Fragment>;
+    }
+
+    if (this.props.renderError) return this.props.renderError(error, this.retry);
+
+    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>
+        <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>
+        <PrimaryButton onClick={this.retry}>{labels.tryAgain}</PrimaryButton>
+      </div>
+    );
+  }
+}