feat(I): I-ONB/I-UI/I-DASH frontend — SetupWizard, WorkstreamBlockRenderer, Dashboard platform section, API hooks, i18n, tsc clean, 11/11 dashboard tests

2026-08-19 01:33:23 +02:00
parent 92ac6229d2
commit 0670fdb437
6 changed files with 879 additions and 4 deletions
@@ -0,0 +1,136 @@
+/**
+ * SetupWizard — Phase I.6 (I-ONB) setup wizard.
+ *
+ * Guides users through 4 steps: Welcome, Create first Agent,
+ * Create first Workflow, Enable Knowledge & Workstream.
+ *
+ * Uses lucide-react icons, Tailwind, and i18n via `t()`.
+ */
+
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Sparkles,
+  Bot,
+  Workflow,
+  BookOpen,
+  ChevronLeft,
+  ChevronRight,
+  X,
+} from 'lucide-react';
+import { Button } from '@/components/ui/Button';
+import { Card } from '@/components/ui/Card';
+
+interface SetupWizardProps {
+  open: boolean;
+  onClose: () => void;
+  onComplete?: () => void;
+}
+
+const STEP_ICONS = [Sparkles, Bot, Workflow, BookOpen];
+
+/**
+ * Setup wizard with 4 steps. Each step shows a title, description and an
+ * optional action button that deep-links to the relevant setup page.
+ */
+export function SetupWizard({ open, onClose, onComplete }: SetupWizardProps) {
+  const { t } = useTranslation();
+  const [step, setStep] = useState(0);
+
+  if (!open) return null;
+
+  const totalSteps = 4;
+  const isLast = step === totalSteps - 1;
+  const Icon = STEP_ICONS[step];
+
+  const handleNext = () => {
+    if (isLast) {
+      onComplete?.();
+      onClose();
+      return;
+    }
+    setStep((s) => s + 1);
+  };
+
+  const handleBack = () => {
+    if (step > 0) setStep((s) => s - 1);
+  };
+
+  const stepKey = `setupWizard.step${step + 1}`;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-secondary-900/50 p-4"
+      role="dialog"
+      aria-modal="true"
+      aria-label={t('setupWizard.title')}
+      data-testid="setup-wizard"
+    >
+      <Card className="w-full max-w-lg">
+        <div className="flex items-center justify-between px-6 py-4 border-b border-secondary-200">
+          <h2 className="text-lg font-semibold text-secondary-900">
+            {t('setupWizard.title')}
+          </h2>
+          <button
+            type="button"
+            onClick={onClose}
+            className="p-2 rounded-md text-secondary-400 hover:text-secondary-600 hover:bg-secondary-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
+            aria-label={t('setupWizard.close')}
+          >
+            <X className="h-5 w-5" aria-hidden="true" />
+          </button>
+        </div>
+
+        <div className="px-6 py-6">
+          {/* Progress indicator */}
+          <div className="flex items-center gap-2 mb-6" aria-hidden="true">
+            {Array.from({ length: totalSteps }).map((_, i) => (
+              <div
+                key={i}
+                className={`h-1.5 flex-1 rounded-full transition-colors ${
+                  i <= step ? 'bg-primary-500' : 'bg-secondary-200'
+                }`}
+              />
+            ))}
+          </div>
+
+          <div className="flex items-start gap-4">
+            <div className="flex-shrink-0 w-12 h-12 rounded-lg bg-primary-100 text-primary-700 flex items-center justify-center">
+              <Icon className="h-6 w-6" aria-hidden="true" />
+            </div>
+            <div className="flex-1 min-w-0">
+              <h3 className="text-lg font-semibold text-secondary-900">
+                {t(`${stepKey}.title`)}
+              </h3>
+              <p className="mt-1 text-sm text-secondary-600">
+                {t(`${stepKey}.description`)}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div className="px-6 py-4 border-t border-secondary-200 flex items-center justify-between">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleBack}
+            disabled={step === 0}
+            icon={<ChevronLeft className="h-4 w-4" />}
+          >
+            {t('setupWizard.back')}
+          </Button>
+          <Button
+            variant="primary"
+            size="sm"
+            onClick={handleNext}
+            icon={isLast ? undefined : <ChevronRight className="h-4 w-4" />}
+          >
+            {isLast ? t('setupWizard.finish') : t('setupWizard.next')}
+          </Button>
+        </div>
+      </Card>
+    </div>
+  );
+}
+
+export default SetupWizard;