@umituz/web-dashboard 2.0.6 → 2.0.8

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

@@ -0,0 +1,35 @@
+/**
+ * Dashboard Types - User
+ *
+ * Type definitions for user profile
+ */
+
+/**
+ * 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;
+}
+
+/**
+ * Navigation item for user menu
+ */
+export interface UserNavMenuItem {
+  /** Display label */
+  label: string;
+  /** Icon component */
+  icon: React.ComponentType<{ className?: string }>;
+  /** Route path */
+  path: string;
+}

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

@@ -0,0 +1,96 @@
+/**
+ * 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
+): string {
+  const date = new Date(createdAt);
+  const secs = Math.floor((Date.now() - date.getTime()) / 1000);
+
+  if (secs < 60) return t("dashboard.activityFeed.times.justNow");
+  if (secs < 3600) return t("dashboard.activityFeed.times.minutesAgo", { val: Math.floor(secs / 60) });
+  if (secs < 86400) return t("dashboard.activityFeed.times.hoursAgo", { val: Math.floor(secs / 3600) });
+  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) {
+    const item = group.items.find((i) => i.path === pathname);
+    if (item) return item.label;
+  }
+
+  // Search in extra title map
+  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;
+
+    // Skip items that require specific app types
+    if (!item.requiredApp) return true;
+    if (item.requiredApp === "mobile") return user?.hasMobileApp ?? false;
+    if (item.requiredApp === "web") return user?.hasWebApp ?? false;
+
+    return true;
+  });
+}
+
+/**
+ * Generate notification ID
+ *
+ * @returns Unique notification ID
+ */
+export function generateNotificationId(): string {
+  return crypto.randomUUID();
+}

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

@@ -0,0 +1,11 @@
+/**
+ * Layout Utils Export
+ */
+
+export {
+  formatNotificationTime,
+  isPathActive,
+  getPageTitle,
+  filterSidebarItems,
+  generateNotificationId,
+} from './dashboard';

package/src/domains/onboarding/components/AppFocusStep.tsx

@@ -0,0 +1,113 @@
+import { Check } from "lucide-react";
+import { cn } from "@umituz/web-design-system/utils";
+import type { OnboardingState } from "../types/onboarding";
+
+interface AppFocusStepProps {
+  /** Current onboarding state */
+  state: OnboardingState;
+  /** Update state function */
+  updateState: (updates: Partial<OnboardingState>) => void;
+  /** Custom app type options */
+  appTypes?: Array<{
+    id: string;
+    label: string;
+    description: string;
+    icon: string;
+  }>;
+}
+
+/**
+ * App Focus Selection Step
+ *
+ * Second step - select which app types to focus on (mobile/web)
+ */
+export const AppFocusStep = ({
+  state,
+  updateState,
+  appTypes,
+}: AppFocusStepProps) => {
+  // Default app types
+  const defaultAppTypes = [
+    {
+      id: "mobile",
+      label: "Mobile App",
+      description: "iOS or Android application",
+      icon: "📱",
+    },
+    {
+      id: "web",
+      label: "Web App",
+      description: "Web application or website",
+      icon: "💻",
+    },
+  ];
+
+  const types = appTypes || defaultAppTypes;
+
+  return (
+    <div className="w-full max-w-xl">
+      <div className="text-center mb-10">
+        <h1 className="text-3xl md:text-4xl font-extrabold text-foreground mb-3">
+          What type of app are you building?
+        </h1>
+        <p className="text-muted-foreground">
+          Select all that apply - you can change this later
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 gap-4">
+        {types.map((type) => {
+          const isSelected = type.id === "mobile" ? state.hasMobileApp : state.hasWebApp;
+
+          return (
+            <button
+              key={type.id}
+              onClick={() => {
+                if (type.id === "mobile") {
+                  updateState({ hasMobileApp: !state.hasMobileApp });
+                } else {
+                  updateState({ hasWebApp: !state.hasWebApp });
+                }
+              }}
+              className={cn(
+                "w-full flex items-center gap-4 p-6 rounded-2xl border bg-background text-left transition-all",
+                isSelected ? "border-primary ring-2 ring-primary/20 bg-primary/5" : "border-border hover:border-primary/40"
+              )}
+            >
+              <div
+                className={cn(
+                  "w-12 h-12 rounded-2xl bg-muted flex items-center justify-center text-2xl shrink-0 transition-transform",
+                  isSelected && "scale-110"
+                )}
+              >
+                {type.icon}
+              </div>
+
+              <div className="flex-1">
+                <p className="font-bold text-foreground text-lg">{type.label}</p>
+                <p className="text-sm text-muted-foreground">{type.description}</p>
+              </div>
+
+              <div
+                className={cn(
+                  "w-6 h-6 rounded-full border-2 flex items-center justify-center shrink-0 transition-colors",
+                  isSelected ? "border-primary bg-primary text-white" : "border-muted-foreground/30"
+                )}
+              >
+                {isSelected && <Check className="h-4 w-4" />}
+              </div>
+            </button>
+          );
+        })}
+      </div>
+
+      {(state.hasMobileApp || state.hasWebApp) && (
+        <p className="mt-8 text-center text-sm text-muted-foreground animate-in fade-in slide-in-from-bottom-2 duration-500">
+          ✨ Great choice! We'll tailor your experience accordingly.
+        </p>
+      )}
+    </div>
+  );
+};
+
+export default AppFocusStep;

package/src/domains/onboarding/components/OnboardingWizard.tsx

@@ -0,0 +1,262 @@
+import { useState, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+import { Check, Loader2 } from "lucide-react";
+import { cn } from "@umituz/web-design-system/utils";
+import { Button } from "@umituz/web-design-system/atoms";
+import { BrandLogo } from "../../layouts/components";
+import type {
+  OnboardingConfig,
+  OnboardingState,
+  OnboardingWizardProps,
+  StepProgressProps,
+  StepNavigationProps,
+} from "../types/onboarding";
+
+/**
+ * Step Progress Component
+ */
+const StepProgress = ({ currentStep, totalSteps, completedSteps = [] }: StepProgressProps) => {
+  return (
+    <div className="flex items-center gap-0 flex-1 justify-center">
+      {Array.from({ length: totalSteps }, (_, i) => i + 1).map((step) => {
+        const isCompleted = completedSteps.includes(step) || step < currentStep;
+        const isCurrent = step === currentStep;
+
+        return (
+          <div key={step} className="flex items-center">
+            <div
+              className={cn(
+                "w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold transition-colors",
+                isCompleted || isCurrent
+                  ? "bg-primary text-primary-foreground"
+                  : "bg-muted text-muted-foreground"
+              )}
+            >
+              {isCompleted ? <Check className="h-4 w-4" /> : step}
+            </div>
+            {step < totalSteps && (
+              <div
+                className={cn(
+                  "w-12 h-0.5 mx-1",
+                  step < currentStep ? "bg-primary" : "bg-border"
+                )}
+              />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+/**
+ * Step Navigation Component
+ */
+const StepNavigation = ({
+  currentStep,
+  totalSteps,
+  canGoNext,
+  isSaving = false,
+  nextLabel,
+  prevLabel,
+  onNext,
+  onPrev,
+  allowSkip = false,
+  onSkip,
+}: StepNavigationProps) => {
+  const t = (key: string) => key; // Simple i18n fallback
+
+  return (
+    <footer className="bg-background border-t border-border px-8 py-6 flex items-center justify-between">
+      {currentStep > 1 ? (
+        <Button
+          variant="ghost"
+          onClick={onPrev}
+          className="rounded-full px-6"
+          disabled={isSaving}
+        >
+          ← {prevLabel || t("onboarding.buttons.back")}
+        </Button>
+      ) : (
+        <div />
+      )}
+
+      <div className="flex items-center gap-3">
+        {allowSkip && onSkip && currentStep < totalSteps && (
+          <Button
+            variant="ghost"
+            onClick={onSkip}
+            className="rounded-full px-6"
+            disabled={isSaving}
+          >
+            {t("onboarding.buttons.skip")}
+          </Button>
+        )}
+
+        <Button
+          onClick={onNext}
+          className="rounded-full px-12 h-12 text-base font-bold"
+          disabled={!canGoNext || isSaving}
+        >
+          {isSaving ? (
+            <>
+              <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+              {t("onboarding.buttons.finalizing")}
+            </>
+          ) : currentStep === totalSteps ? (
+            nextLabel || t("onboarding.buttons.getStarted")
+          ) : (
+            t("onboarding.buttons.next")
+          )}
+        </Button>
+      </div>
+    </footer>
+  );
+};
+
+/**
+ * Onboarding Wizard Component
+ *
+ * Main onboarding container with step management
+ */
+export const OnboardingWizard = ({
+  config,
+  initialState,
+  onComplete,
+  onCancel,
+}: OnboardingWizardProps) => {
+  const navigate = useNavigate();
+  const [currentStep, setCurrentStep] = useState(1);
+  const [saving, setSaving] = useState(false);
+  const [completedSteps, setCompletedSteps] = useState<number[]>([]);
+
+  // State management
+  const [state, setState] = useState<OnboardingState>({
+    currentStep: 1,
+    connectedPlatforms: [],
+    billingCycle: "monthly",
+    stepData: {},
+    ...initialState,
+  });
+
+  const totalSteps = config.steps.length;
+
+  // Validate current step
+  const canGoNext = useCallback(() => {
+    const currentStepConfig = config.steps[currentStep - 1];
+    if (currentStepConfig?.validate) {
+      return currentStepConfig.validate(state);
+    }
+    return true;
+  }, [config.steps, currentStep, state]);
+
+  // Navigation handlers
+  const goToNext = useCallback(async () => {
+    if (currentStep < totalSteps) {
+      setCompletedSteps((prev) => [...prev, currentStep]);
+      setCurrentStep((prev) => prev + 1);
+      setState((prev) => ({ ...prev, currentStep: prev.currentStep + 1 }));
+    } else {
+      // Complete onboarding
+      setSaving(true);
+      try {
+        await onComplete?.(state);
+        navigate(config.completeRoute);
+      } catch (error) {
+        console.error("Onboarding completion error:", error);
+        setSaving(false);
+      }
+    }
+  }, [currentStep, totalSteps, state, onComplete, navigate, config.completeRoute]);
+
+  const goToPrev = useCallback(() => {
+    if (currentStep > 1) {
+      setCurrentStep((prev) => prev - 1);
+      setState((prev) => ({ ...prev, currentStep: prev.currentStep - 1 }));
+    }
+  }, [currentStep]);
+
+  const goToStep = useCallback((step: number) => {
+    if (step >= 1 && step <= totalSteps) {
+      setCurrentStep(step);
+      setState((prev) => ({ ...prev, currentStep: step }));
+    }
+  }, [totalSteps]);
+
+  const updateState = useCallback((updates: Partial<OnboardingState>) => {
+    setState((prev) => ({ ...prev, ...updates }));
+  }, []);
+
+  const handleCancel = useCallback(() => {
+    onCancel?.();
+    navigate(config.cancelRoute || "/");
+  }, [onCancel, navigate, config.cancelRoute]);
+
+  const handleSkip = useCallback(() => {
+    if (currentStep < totalSteps) {
+      goToNext();
+    }
+  }, [currentStep, totalSteps, goToNext]);
+
+  // Render current step content
+  const currentStepConfig = config.steps[currentStep - 1];
+  const StepContent = currentStepConfig?.component;
+
+  return (
+    <div className="min-h-screen bg-secondary flex flex-col">
+      {/* Header */}
+      <header className="bg-background border-b border-border px-6 py-3 flex items-center">
+        <div className="flex items-center gap-2 mr-8">
+          <BrandLogo size={28} />
+          <span className="font-bold text-foreground">{config.brandName}</span>
+        </div>
+
+        {config.showProgress !== false && (
+          <StepProgress
+            currentStep={currentStep}
+            totalSteps={totalSteps}
+            completedSteps={completedSteps}
+          />
+        )}
+
+        <div className="w-24" />
+      </header>
+
+      {/* Main Content */}
+      <main className="flex-1 flex flex-col items-center justify-center px-4 py-12">
+        <div className="w-full max-w-4xl">
+          {StepContent ? (
+            // Check if it's a function component (has call signature)
+            typeof StepContent === 'function' ? (
+              <StepContent
+                state={state}
+                updateState={updateState}
+                goToNext={goToNext}
+                goToPrev={goToPrev}
+                goToStep={goToStep}
+                config={config}
+              />
+            ) : (
+              // Otherwise it's a ReactElement
+              StepContent
+            )
+          ) : null}
+        </div>
+      </main>
+
+      {/* Footer Navigation */}
+      <StepNavigation
+        currentStep={currentStep}
+        totalSteps={totalSteps}
+        canGoNext={canGoNext()}
+        isSaving={saving}
+        onNext={goToNext}
+        onPrev={goToPrev}
+        allowSkip={config.allowSkip}
+        onSkip={handleSkip}
+      />
+    </div>
+  );
+};
+
+export default OnboardingWizard;