2e3d89bd7b
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 ✅)
39 lines
1.8 KiB
TypeScript
39 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import type { SetupStepProps } from '../SetupWizard';
|
|
|
|
export const TeamSetupStep: React.FC<SetupStepProps> = () => {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="bg-[var(--color-info)]/10 border border-[var(--color-info)]/20 rounded-lg p-4">
|
|
<h3 className="font-semibold text-[var(--text-primary)] mb-2 flex items-center gap-2">
|
|
<svg className="w-5 h-5 text-[var(--color-info)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
{t('setup_wizard:why_this_matters', 'Why This Matters')}
|
|
</h3>
|
|
<p className="text-sm text-[var(--text-secondary)]">
|
|
{t('setup_wizard:team.why', 'Adding team members allows you to assign tasks, track who does what, and give everyone the tools they need to work efficiently.')}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="text-center py-12 border-2 border-dashed border-[var(--border-secondary)] rounded-lg">
|
|
<div className="w-16 h-16 bg-[var(--bg-secondary)] rounded-full mx-auto mb-4 flex items-center justify-center">
|
|
👥
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">
|
|
{t('setup_wizard:team.placeholder_title', 'Team Management')}
|
|
</h3>
|
|
<p className="text-[var(--text-secondary)] mb-4">
|
|
{t('setup_wizard:team.placeholder_desc', 'This feature will be implemented in Phase 3')}
|
|
</p>
|
|
<p className="text-sm text-[var(--text-tertiary)]">
|
|
{t('setup_wizard:team.optional', 'This step is optional')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|