Files
bakery-ia/frontend/src/components/domain/unified-wizard/wizards/CustomerWizard.tsx

40 lines
1.2 KiB
TypeScript
Raw Normal View History

feat: Add JTBD-driven Unified Add Wizard system Implemented a comprehensive unified wizard system to consolidate all "add new content" actions into a single, intuitive, step-by-step guided experience based on Jobs To Be Done (JTBD) methodology. ## What's New ### Core Components - **UnifiedAddWizard**: Main orchestrator component that routes to specific wizards - **ItemTypeSelector**: Beautiful visual card-based selection for 9 content types - **9 Individual Wizards**: Step-by-step flows for each content type ### Priority Implementations (P0) 1. **SalesEntryWizard** ⭐ (MOST CRITICAL) - Manual entry with dynamic product lists and auto-calculated totals - File upload placeholder for CSV/Excel bulk import - Critical for small bakeries without POS systems 2. **InventoryWizard** - Type selection (ingredient vs finished product) - Context-aware forms based on inventory type - Optional initial lot entry ### Placeholder Wizards (P1/P2) - Customer Order, Supplier, Recipe, Customer, Quality Template, Equipment, Team Member - Proper structure in place for incremental enhancement ### Dashboard Integration - Added prominent "Agregar" button in dashboard header - Opens wizard modal with visual type selection - Auto-refreshes dashboard after wizard completion ### Design Highlights - Mobile-first responsive design (full-screen on mobile, modal on desktop) - Touch-friendly with 44px+ touch targets - Follows existing color system and design tokens - Progressive disclosure to reduce cognitive load - Accessibility-compliant (WCAG AA) ## Documentation Created comprehensive documentation: - `JTBD_UNIFIED_ADD_WIZARD.md` - Full JTBD analysis and research - `WIZARD_ARCHITECTURE_DESIGN.md` - Technical design and specifications - `UNIFIED_WIZARD_IMPLEMENTATION_SUMMARY.md` - Implementation guide ## Files Changed - New: `frontend/src/components/domain/unified-wizard/` (15 new files) - Modified: `frontend/src/pages/app/DashboardPage.tsx` (added wizard integration) ## Next Steps - [ ] Connect wizards to real API endpoints (currently mock/placeholder) - [ ] Implement full CSV upload for sales entry - [ ] Add comprehensive form validation - [ ] Enhance P1 priority wizards based on user feedback ## JTBD Alignment Main Job: "When I need to expand or update my bakery operations, I want to quickly add new resources to my management system, so I can keep my business running smoothly." Key insights applied: - Prioritized sales entry (most bakeries lack POS) - Mobile-first (bakery owners are on their feet) - Progressive disclosure (reduce overwhelm) - Forgiving interactions (can go back, save drafts)
2025-11-09 08:40:01 +00:00
import React from 'react';
import { WizardStep } from '../../../ui/WizardModal/WizardModal';
export const CustomerWizardSteps = (
data: Record<string, any>,
setData: (data: Record<string, any>) => void
): WizardStep[] => [
{
id: 'customer-details',
title: 'Detalles del Cliente',
description: 'Información de contacto',
component: (props) => (
<div className="text-center py-12">
<p className="text-[var(--text-secondary)]">
Wizard de Cliente - Información básica y contacto
</p>
<button onClick={props.onNext} className="mt-4 px-6 py-2 bg-[var(--color-primary)] text-white rounded-lg">
Continuar
</button>
</div>
),
},
{
id: 'customer-preferences',
title: 'Preferencias y Términos',
description: 'Condiciones comerciales',
component: (props) => (
<div className="text-center py-12">
<p className="text-[var(--text-secondary)]">
Preferencias y términos de pago
</p>
<button onClick={props.onComplete} className="mt-4 px-6 py-2 bg-green-600 text-white rounded-lg">
Finalizar
</button>
</div>
),
isOptional: true,
},
];