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)
This commit is contained in:
@@ -0,0 +1,39 @@
|
||||
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,
|
||||
},
|
||||
];
|
||||
Reference in New Issue
Block a user