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/router/AppRouter.tsx

@@ -56,8 +56,9 @@ const ModelsConfigPage = React.lazy(() => import('../pages/app/database/models/M
 const QualityTemplatesPage = React.lazy(() => import('../pages/app/database/quality-templates/QualityTemplatesPage'));
 const SustainabilityPage = React.lazy(() => import('../pages/app/database/sustainability/SustainabilityPage'));
 
-// Onboarding pages
+// Onboarding & Setup pages
 const OnboardingPage = React.lazy(() => import('../pages/onboarding/OnboardingPage'));
+const SetupPage = React.lazy(() => import('../pages/setup/SetupPage'));
 
 export const AppRouter: React.FC = () => {
   return (
@@ -377,13 +378,25 @@ export const AppRouter: React.FC = () => {
         />
 
         {/* Onboarding Route - Protected but without AppShell */}
-        <Route 
-          path="/app/onboarding" 
+        <Route
+          path="/app/onboarding"
           element={
             <ProtectedRoute>
               <OnboardingPage />
             </ProtectedRoute>
-          } 
+          }
+        />
+
+        {/* Setup Wizard Route - Protected with AppShell */}
+        <Route
+          path="/app/setup"
+          element={
+            <ProtectedRoute>
+              <AppShell>
+                <SetupPage />
+              </AppShell>
+            </ProtectedRoute>
+          }
         />
 
         {/* Default redirects */}

frontend/src/router/routes.config.ts

@@ -163,7 +163,11 @@ export const ROUTES = {
   HELP_TUTORIALS: '/help/tutorials',
   HELP_SUPPORT: '/help/support',
   HELP_FEEDBACK: '/help/feedback',
-  
+
+  // Onboarding & Setup
+  ONBOARDING: '/app/onboarding',
+  SETUP: '/app/setup',
+
   // Error pages
   NOT_FOUND: '/404',
   UNAUTHORIZED: '/401',
@@ -558,7 +562,24 @@ export const routesConfig: RouteConfig[] = [
     },
   },
 
-  
+  // Setup Wizard - Bakery operations setup (post-onboarding)
+  {
+    path: '/app/setup',
+    name: 'Setup',
+    component: 'SetupPage',
+    title: 'Configurar Operaciones',
+    description: 'Configure suppliers, inventory, recipes, and quality standards',
+    icon: 'settings',
+    requiresAuth: true,
+    showInNavigation: false,
+    meta: {
+      hideHeader: false,  // Show header for easy navigation
+      hideSidebar: false,  // Show sidebar for context
+      fullScreen: false,
+    },
+  },
+
+
   // Error pages
   {
     path: ROUTES.NOT_FOUND,