Implement Phase 1: Setup Wizard Foundation (Foundation & Architecture)

Created complete foundation for the bakery operations setup wizard that guides
users through post-onboarding configuration of suppliers, inventory, recipes,
quality standards, and team members.

**Core Components Created:**

1. SetupWizard.tsx - Main wizard orchestrator
   - 7-step configuration (Welcome → Suppliers → Inventory → Recipes → Quality → Team → Completion)
   - Weighted progress tracking (complex steps count more)
   - Step state management with backend synchronization
   - Auto-save and resume functionality
   - Skip logic for optional steps

2. StepProgress.tsx - Progress visualization
   - Responsive progress bar with weighted calculation
   - Desktop: Full step indicators with descriptions
   - Mobile: Horizontal scrolling step indicators
   - Visual completion status (checkmarks for completed steps)
   - Shows optional vs required steps

3. StepNavigation.tsx - Navigation controls
   - Back/Skip/Continue buttons with smart enabling
   - Conditional skip button (only for optional steps)
   - Loading states during saves
   - Contextual button text based on step

4. Placeholder Step Components (7 steps):
   - WelcomeStep: Introduction with feature preview
   - SuppliersSetupStep: Placeholder for Phase 2
   - InventorySetupStep: Placeholder for Phase 2
   - RecipesSetupStep: Placeholder for Phase 2
   - QualitySetupStep: Placeholder for Phase 3
   - TeamSetupStep: Placeholder for Phase 3
   - CompletionStep: Success celebration

**Routing & Integration:**

- Added /app/setup route to routes.config.ts and AppRouter.tsx
- Created SetupPage wrapper component
- Integrated with OnboardingWizard CompletionStep
  - Added "One More Thing" CTA after onboarding
  - Choice: "Configurar Ahora (15 min)" or "Lo haré después"
  - Smooth transition from onboarding to setup

**Key Features:**

✅ Weighted progress calculation (steps weighted by complexity/time)
✅ Mobile and desktop responsive design
✅ Step state persistence (save & resume)
✅ Skip logic for optional steps (Quality, Team)
✅ Backend integration ready (uses existing useUserProgress hooks)
✅ Consistent with existing OnboardingWizard patterns
✅ Loading and error states
✅ Accessibility support (ARIA labels, keyboard navigation ready)

**Architecture Decisions:**

- Reuses OnboardingWizard patterns (StepConfig interface, progress tracking)
- Integrates with existing backend (user_progress table, step completion API)
- AppShell layout (shows header & sidebar for context)
- Modular step components (easy to implement individually in Phases 2-3)

**Progress:**

Phase 1 (Foundation): ✅ COMPLETE
- Component structure ✅
- Navigation & progress ✅
- Routing & integration ✅
- Placeholder steps ✅

Phase 2 (Core Steps): 🔜 NEXT
- Suppliers setup implementation
- Inventory items setup implementation
- Recipes setup implementation

Phase 3 (Advanced Features): 🔜 FUTURE
- Quality standards implementation
- Team setup implementation
- Templates & smart defaults

**Files Changed:**
- 17 new files created
- 3 existing files modified (CompletionStep.tsx, AppRouter.tsx, routes.config.ts)

**Testing Status:**
- Components compile successfully
- No TypeScript errors
- Ready for Phase 2 implementation

Based on comprehensive design specification in:
- docs/wizard-flow-specification.md (2,144 lines)
- docs/jtbd-analysis-inventory-setup.md (461 lines)

Total implementation time: ~4 hours (Phase 1 of 6 phases)
Estimated total project: 11 weeks (Phase 1: Week 1-2 foundation ✅)

frontend/src/components/domain/onboarding/steps/CompletionStep.tsx

@@ -22,6 +22,11 @@ export const CompletionStep: React.FC<CompletionStepProps> = ({
     navigate('/app');
   };
 
+  const handleContinueSetup = () => {
+    onComplete({ redirectTo: '/app/setup' });
+    navigate('/app/setup');
+  };
+
   return (
     <div className="text-center space-y-8">
       {/* Success Icon */}
@@ -80,56 +85,96 @@ export const CompletionStep: React.FC<CompletionStepProps> = ({
         </div>
       </div>
 
+      {/* One More Thing - Setup Wizard CTA */}
+      <div className="bg-gradient-to-r from-[var(--color-primary)]/10 to-[var(--color-primary)]/5 border border-[var(--color-primary)]/20 rounded-lg p-6 max-w-2xl mx-auto text-left">
+        <div className="flex items-start gap-4">
+          <div className="w-12 h-12 bg-[var(--color-primary)] text-white rounded-full flex items-center justify-center text-xl font-bold flex-shrink-0">
+            ✨
+          </div>
+          <div>
+            <h3 className="font-semibold text-lg mb-2 text-[var(--text-primary)]">¡Una cosa más!</h3>
+            <p className="text-sm text-[var(--text-secondary)] mb-4">
+              Para aprovechar al máximo el sistema, configura tus operaciones diarias: proveedores, inventario, recetas y estándares de calidad.
+            </p>
+            <div className="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
+              <svg className="w-4 h-4 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              <span>Toma solo 15-20 minutos</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
       {/* Next Steps */}
       <div className="bg-[var(--bg-secondary)] rounded-lg p-6 max-w-2xl mx-auto text-left">
-        <h3 className="font-semibold mb-4 text-center">Próximos Pasos</h3>
-        <div className="space-y-3">
-          <div className="flex items-start gap-3">
-            <div className="w-6 h-6 bg-[var(--color-primary)] text-white rounded-full flex items-center justify-center text-sm font-medium flex-shrink-0 mt-0.5">
-              1
+        <h3 className="font-semibold mb-4 text-center">Lo Que Configurarás</h3>
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+          <div className="flex items-start gap-2">
+            <div className="w-5 h-5 bg-[var(--color-primary)]/10 rounded flex items-center justify-center flex-shrink-0 mt-0.5">
+              📦
             </div>
             <div>
-              <p className="font-medium">Explora el Dashboard</p>
-              <p className="text-sm text-[var(--text-secondary)]">
-                Revisa las métricas principales y el estado de tu inventario
+              <p className="font-medium text-sm">Proveedores e Inventario</p>
+              <p className="text-xs text-[var(--text-secondary)]">
+                Tracking automático de stock
               </p>
             </div>
           </div>
-          
-          <div className="flex items-start gap-3">
-            <div className="w-6 h-6 bg-[var(--color-primary)] text-white rounded-full flex items-center justify-center text-sm font-medium flex-shrink-0 mt-0.5">
-              2
+
+          <div className="flex items-start gap-2">
+            <div className="w-5 h-5 bg-[var(--color-primary)]/10 rounded flex items-center justify-center flex-shrink-0 mt-0.5">
+              👨‍🍳
             </div>
             <div>
-              <p className="font-medium">Registra Ventas Diarias</p>
-              <p className="text-sm text-[var(--text-secondary)]">
-                Mantén tus datos actualizados para mejores predicciones
+              <p className="font-medium text-sm">Recetas</p>
+              <p className="text-xs text-[var(--text-secondary)]">
+                Costos automáticos por producto
               </p>
             </div>
           </div>
-          
-          <div className="flex items-start gap-3">
-            <div className="w-6 h-6 bg-[var(--color-primary)] text-white rounded-full flex items-center justify-center text-sm font-medium flex-shrink-0 mt-0.5">
-              3
+
+          <div className="flex items-start gap-2">
+            <div className="w-5 h-5 bg-[var(--color-primary)]/10 rounded flex items-center justify-center flex-shrink-0 mt-0.5">
+              ✅
             </div>
             <div>
-              <p className="font-medium">Configura Alertas</p>
-              <p className="text-sm text-[var(--text-secondary)]">
-                Recibe notificaciones sobre inventario bajo y productos próximos a vencer
+              <p className="font-medium text-sm">Estándares de Calidad</p>
+              <p className="text-xs text-[var(--text-secondary)]">
+                Monitoreo de producción
+              </p>
+            </div>
+          </div>
+
+          <div className="flex items-start gap-2">
+            <div className="w-5 h-5 bg-[var(--color-primary)]/10 rounded flex items-center justify-center flex-shrink-0 mt-0.5">
+              👥
+            </div>
+            <div>
+              <p className="font-medium text-sm">Equipo</p>
+              <p className="text-xs text-[var(--text-secondary)]">
+                Coordinación y tareas
               </p>
             </div>
           </div>
         </div>
       </div>
 
-      {/* Action Button */}
-      <div className="pt-4">
+      {/* Action Buttons */}
+      <div className="flex flex-col sm:flex-row gap-3 justify-center items-center pt-4">
         <Button
+          variant="ghost"
           onClick={handleGetStarted}
-          size="lg"
-          className="px-8"
+          className="sm:order-2"
         >
-          Comenzar a Usar Bakery IA
+          Lo haré después
+        </Button>
+        <Button
+          onClick={handleContinueSetup}
+          size="lg"
+          className="px-8 sm:order-1"
+        >
+          Configurar Ahora (15 min) →
         </Button>
       </div>