Implement Phase 3: Advanced post-onboarding features (JTBD-driven UX)
Complete JTBD implementation with 4 advanced features to reduce friction and accelerate configuration for non-technical bakery owners. **1. Recipe Templates Library:** - Add RecipeTemplateSelector modal with searchable template gallery - Pre-built templates: Baguette, Pan de Molde, Medialunas, Facturas, Bizcochuelo, Galletas - Smart ingredient matching between templates and user's inventory - Category filtering (Panes, Facturas, Tortas, Galletitas) - One-click template loading with pre-filled wizard data - "Create from scratch" option for custom recipes - Integrated as pre-wizard step in RecipeWizardModal **2. Bulk Supplier CSV Import:** - Add BulkSupplierImportModal with CSV upload & parsing - Downloadable CSV template with examples - Live validation with error detection - Preview table showing valid/invalid rows - Multi-column support (15+ fields: name, type, email, phone, payment terms, address, etc.) - Batch import with progress tracking - Success/error notifications **3. Configuration Recovery (Auto-save):** - Add useWizardDraft hook with localStorage persistence - Auto-save wizard progress every 30 seconds - 7-day draft expiration (configurable TTL) - DraftRecoveryPrompt component for restore/discard choice - Shows "saved X time ago" with human-friendly formatting - Prevents data loss from accidental browser closes **4. Milestone Notifications (Feature Unlocks):** - Add Toast notification system (ToastNotification, ToastContainer, useToast hook) - Support for success, error, info, and milestone toast types - Animated slide-in/slide-out transitions - Auto-dismiss with configurable duration - useFeatureUnlocks hook to track when features are unlocked - Visual feedback for configuration milestones **Benefits:** - Templates: Reduce recipe creation time from 10+ min to <2 min - Bulk Import: Add 50+ suppliers in seconds vs hours - Auto-save: Zero data loss from accidental exits - Notifications: Clear feedback on progress and unlocked capabilities Files: - RecipeTemplateSelector: Template library UI - BulkSupplierImportModal: CSV import system - useWizardDraft + DraftRecoveryPrompt: Auto-save infrastructure - Toast system + useToast + useFeatureUnlocks: Notification framework Part of 3-phase JTBD implementation (Phase 1: Progress Widget, Phase 2: Wizards, Phase 3: Advanced Features).
This commit is contained in:
Claude
@@ -0,0 +1,243 @@
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import { ChefHat, BookOpen, Search, Sparkles, X } from 'lucide-react';
|
||||
import type { RecipeTemplate } from '../../setup-wizard/data/recipeTemplates';
|
||||
import { getAllRecipeTemplates, matchIngredientToTemplate } from '../../setup-wizard/data/recipeTemplates';
|
||||
import type { RecipeCreate, RecipeIngredientCreate, MeasurementUnit } from '../../../../api/types/recipes';
|
||||
|
||||
interface RecipeTemplateSelectorProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onSelectTemplate: (recipeData: Partial<RecipeCreate>) => void;
|
||||
onStartFromScratch: () => void;
|
||||
availableIngredients: Array<{ id: string; name: string }>;
|
||||
}
|
||||
|
||||
export const RecipeTemplateSelector: React.FC<RecipeTemplateSelectorProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
onSelectTemplate,
|
||||
onStartFromScratch,
|
||||
availableIngredients
|
||||
}) => {
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [selectedCategory, setSelectedCategory] = useState<string>('all');
|
||||
|
||||
const allTemplates = useMemo(() => getAllRecipeTemplates(), []);
|
||||
|
||||
// Flatten all templates
|
||||
const templates = useMemo(() => {
|
||||
const flat: RecipeTemplate[] = [];
|
||||
Object.values(allTemplates).forEach(categoryTemplates => {
|
||||
flat.push(...categoryTemplates);
|
||||
});
|
||||
return flat;
|
||||
}, [allTemplates]);
|
||||
|
||||
// Filter templates
|
||||
const filteredTemplates = useMemo(() => {
|
||||
return templates.filter(template => {
|
||||
const matchesSearch = template.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
template.description.toLowerCase().includes(searchTerm.toLowerCase());
|
||||
const matchesCategory = selectedCategory === 'all' ||
|
||||
template.category.toLowerCase() === selectedCategory.toLowerCase();
|
||||
return matchesSearch && matchesCategory;
|
||||
});
|
||||
}, [templates, searchTerm, selectedCategory]);
|
||||
|
||||
const categories = useMemo(() => {
|
||||
const cats = new Set(templates.map(t => t.category));
|
||||
return ['all', ...Array.from(cats)];
|
||||
}, [templates]);
|
||||
|
||||
const handleSelectTemplate = (template: RecipeTemplate) => {
|
||||
// Match template ingredients to actual inventory
|
||||
const matchedIngredients: RecipeIngredientCreate[] = template.ingredients
|
||||
.map((templateIng, index) => {
|
||||
const matchedId = matchIngredientToTemplate(templateIng, availableIngredients);
|
||||
return {
|
||||
ingredient_id: matchedId || '',
|
||||
quantity: templateIng.quantity,
|
||||
unit: templateIng.unit,
|
||||
ingredient_order: index + 1,
|
||||
is_optional: false
|
||||
};
|
||||
});
|
||||
|
||||
// Build recipe data from template
|
||||
const recipeData: Partial<RecipeCreate> = {
|
||||
name: template.name,
|
||||
category: template.category.toLowerCase(),
|
||||
description: template.description,
|
||||
difficulty_level: template.difficulty,
|
||||
yield_quantity: template.yieldQuantity,
|
||||
yield_unit: template.yieldUnit,
|
||||
prep_time_minutes: template.prepTime || 0,
|
||||
cook_time_minutes: template.cookTime || 0,
|
||||
total_time_minutes: template.totalTime || 0,
|
||||
preparation_notes: template.instructions || '',
|
||||
ingredients: matchedIngredients
|
||||
};
|
||||
|
||||
onSelectTemplate(recipeData);
|
||||
onClose();
|
||||
};
|
||||
|
||||
const getDifficultyLabel = (level: number) => {
|
||||
const labels = ['', 'Fácil', 'Medio', 'Difícil', 'Muy Difícil', 'Extremo'];
|
||||
return labels[level] || '';
|
||||
};
|
||||
|
||||
const getDifficultyColor = (level: number) => {
|
||||
if (level <= 2) return 'text-green-600 bg-green-50';
|
||||
if (level === 3) return 'text-yellow-600 bg-yellow-50';
|
||||
return 'text-red-600 bg-red-50';
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className="absolute inset-0 bg-black/50 backdrop-blur-sm"
|
||||
onClick={onClose}
|
||||
/>
|
||||
|
||||
{/* Modal */}
|
||||
<div className="relative w-full max-w-4xl max-h-[90vh] bg-[var(--bg-primary)] rounded-xl shadow-2xl flex flex-col overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="px-6 py-5 border-b border-[var(--border-secondary)] bg-gradient-to-r from-[var(--color-primary)]/5 to-[var(--color-primary)]/10">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-full bg-[var(--color-primary)] flex items-center justify-center">
|
||||
<BookOpen className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold text-[var(--text-primary)]">
|
||||
Biblioteca de Recetas
|
||||
</h2>
|
||||
<p className="text-sm text-[var(--text-secondary)]">
|
||||
Comienza con una receta clásica o crea la tuya desde cero
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 hover:bg-[var(--bg-secondary)] rounded-lg transition-colors"
|
||||
>
|
||||
<X className="w-5 h-5 text-[var(--text-secondary)]" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Search and Filter */}
|
||||
<div className="px-6 py-4 border-b border-[var(--border-secondary)] space-y-4">
|
||||
{/* Search */}
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-[var(--text-tertiary)]" />
|
||||
<input
|
||||
type="text"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
placeholder="Buscar recetas..."
|
||||
className="w-full pl-10 pr-4 py-2.5 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Category Filter */}
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
{categories.map(category => (
|
||||
<button
|
||||
key={category}
|
||||
onClick={() => setSelectedCategory(category)}
|
||||
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||
selectedCategory === category
|
||||
? 'bg-[var(--color-primary)] text-white'
|
||||
: 'bg-[var(--bg-secondary)] text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)]'
|
||||
}`}
|
||||
>
|
||||
{category === 'all' ? 'Todas' : category}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Templates Grid */}
|
||||
<div className="flex-1 overflow-y-auto p-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
|
||||
{filteredTemplates.map(template => (
|
||||
<div
|
||||
key={template.id}
|
||||
onClick={() => handleSelectTemplate(template)}
|
||||
className="p-5 border border-[var(--border-secondary)] rounded-lg hover:border-[var(--color-primary)] hover:shadow-md transition-all cursor-pointer group bg-[var(--bg-primary)]"
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold text-[var(--text-primary)] group-hover:text-[var(--color-primary)] transition-colors mb-1">
|
||||
{template.name}
|
||||
</h3>
|
||||
<p className="text-sm text-[var(--text-secondary)] line-clamp-2">
|
||||
{template.description}
|
||||
</p>
|
||||
</div>
|
||||
<ChefHat className="w-5 h-5 text-[var(--text-tertiary)] flex-shrink-0 ml-2" />
|
||||
</div>
|
||||
|
||||
{/* Details */}
|
||||
<div className="flex items-center gap-3 text-xs text-[var(--text-tertiary)] mb-3">
|
||||
<span className="flex items-center gap-1">
|
||||
<span className="font-medium">{template.yieldQuantity}</span>
|
||||
<span>{template.yieldUnit === 'pieces' ? 'piezas' : template.yieldUnit}</span>
|
||||
</span>
|
||||
<span>•</span>
|
||||
<span>{template.totalTime || 60} min</span>
|
||||
<span>•</span>
|
||||
<span className={`px-2 py-0.5 rounded-full ${getDifficultyColor(template.difficulty)}`}>
|
||||
{getDifficultyLabel(template.difficulty)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Ingredients Count */}
|
||||
<div className="flex items-center justify-between pt-3 border-t border-[var(--border-secondary)]">
|
||||
<span className="text-sm text-[var(--text-secondary)]">
|
||||
{template.ingredients.length} ingredientes
|
||||
</span>
|
||||
<span className="text-xs text-[var(--color-primary)] opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
Click para usar →
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{filteredTemplates.length === 0 && (
|
||||
<div className="text-center py-12">
|
||||
<BookOpen className="w-16 h-16 text-[var(--text-tertiary)] mx-auto mb-4" />
|
||||
<p className="text-[var(--text-secondary)]">No se encontraron recetas</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="px-6 py-4 border-t border-[var(--border-secondary)] bg-[var(--bg-secondary)]">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2 text-sm text-[var(--text-tertiary)]">
|
||||
<Sparkles className="w-4 h-4" />
|
||||
<span>{filteredTemplates.length} recetas disponibles</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => {
|
||||
onStartFromScratch();
|
||||
onClose();
|
||||
}}
|
||||
className="px-4 py-2 bg-[var(--bg-primary)] border border-[var(--border-secondary)] text-[var(--text-primary)] rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors"
|
||||
>
|
||||
Crear desde cero
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -5,6 +5,7 @@ import { RecipeProductStep } from './RecipeProductStep';
|
||||
import { RecipeIngredientsStep } from './RecipeIngredientsStep';
|
||||
import { RecipeProductionStep } from './RecipeProductionStep';
|
||||
import { RecipeReviewStep } from './RecipeReviewStep';
|
||||
import { RecipeTemplateSelector } from './RecipeTemplateSelector';
|
||||
import type { RecipeCreate, RecipeIngredientCreate, MeasurementUnit } from '../../../../api/types/recipes';
|
||||
import { useIngredients } from '../../../../api/hooks/inventory';
|
||||
import { useCurrentTenant } from '../../../../stores/tenant.store';
|
||||
@@ -20,6 +21,10 @@ export const RecipeWizardModal: React.FC<RecipeWizardModalProps> = ({
|
||||
onClose,
|
||||
onCreateRecipe
|
||||
}) => {
|
||||
// Template selector state
|
||||
const [showTemplateSelector, setShowTemplateSelector] = useState(true);
|
||||
const [wizardStarted, setWizardStarted] = useState(false);
|
||||
|
||||
// Recipe state
|
||||
const [recipeData, setRecipeData] = useState<Partial<RecipeCreate>>({
|
||||
difficulty_level: 1,
|
||||
@@ -118,6 +123,46 @@ export const RecipeWizardModal: React.FC<RecipeWizardModalProps> = ({
|
||||
setRecipeData(data);
|
||||
};
|
||||
|
||||
const handleSelectTemplate = (templateData: Partial<RecipeCreate>) => {
|
||||
setRecipeData({
|
||||
...recipeData,
|
||||
...templateData
|
||||
});
|
||||
setShowTemplateSelector(false);
|
||||
setWizardStarted(true);
|
||||
};
|
||||
|
||||
const handleStartFromScratch = () => {
|
||||
setShowTemplateSelector(false);
|
||||
setWizardStarted(true);
|
||||
};
|
||||
|
||||
const handleCloseWizard = () => {
|
||||
setShowTemplateSelector(true);
|
||||
setWizardStarted(false);
|
||||
setRecipeData({
|
||||
difficulty_level: 1,
|
||||
yield_quantity: 1,
|
||||
yield_unit: 'units' as MeasurementUnit,
|
||||
serves_count: 1,
|
||||
prep_time_minutes: 0,
|
||||
cook_time_minutes: 0,
|
||||
rest_time_minutes: 0,
|
||||
target_margin_percentage: 30,
|
||||
batch_size_multiplier: 1.0,
|
||||
is_seasonal: false,
|
||||
is_signature_item: false,
|
||||
ingredients: [{
|
||||
ingredient_id: '',
|
||||
quantity: 1,
|
||||
unit: 'grams' as MeasurementUnit,
|
||||
ingredient_order: 1,
|
||||
is_optional: false
|
||||
}]
|
||||
});
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleComplete = async () => {
|
||||
try {
|
||||
// Generate recipe code if not provided
|
||||
@@ -182,26 +227,7 @@ export const RecipeWizardModal: React.FC<RecipeWizardModalProps> = ({
|
||||
await onCreateRecipe(finalRecipeData);
|
||||
|
||||
// Reset state
|
||||
setRecipeData({
|
||||
difficulty_level: 1,
|
||||
yield_quantity: 1,
|
||||
yield_unit: 'units' as MeasurementUnit,
|
||||
serves_count: 1,
|
||||
prep_time_minutes: 0,
|
||||
cook_time_minutes: 0,
|
||||
rest_time_minutes: 0,
|
||||
target_margin_percentage: 30,
|
||||
batch_size_multiplier: 1.0,
|
||||
is_seasonal: false,
|
||||
is_signature_item: false,
|
||||
ingredients: [{
|
||||
ingredient_id: '',
|
||||
quantity: 1,
|
||||
unit: 'grams' as MeasurementUnit,
|
||||
ingredient_order: 1,
|
||||
is_optional: false
|
||||
}]
|
||||
});
|
||||
handleCloseWizard();
|
||||
} catch (error) {
|
||||
console.error('Error creating recipe:', error);
|
||||
throw error;
|
||||
@@ -284,14 +310,26 @@ export const RecipeWizardModal: React.FC<RecipeWizardModalProps> = ({
|
||||
];
|
||||
|
||||
return (
|
||||
<WizardModal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
onComplete={handleComplete}
|
||||
title="Nueva Receta"
|
||||
steps={steps}
|
||||
icon={<ChefHat className="w-6 h-6" />}
|
||||
size="2xl"
|
||||
/>
|
||||
<>
|
||||
{/* Template Selector */}
|
||||
<RecipeTemplateSelector
|
||||
isOpen={isOpen && showTemplateSelector && !wizardStarted}
|
||||
onClose={handleCloseWizard}
|
||||
onSelectTemplate={handleSelectTemplate}
|
||||
onStartFromScratch={handleStartFromScratch}
|
||||
availableIngredients={availableIngredients.map(ing => ({ id: ing.value, name: ing.label }))}
|
||||
/>
|
||||
|
||||
{/* Wizard Modal */}
|
||||
<WizardModal
|
||||
isOpen={isOpen && !showTemplateSelector && wizardStarted}
|
||||
onClose={handleCloseWizard}
|
||||
onComplete={handleComplete}
|
||||
title="Nueva Receta"
|
||||
steps={steps}
|
||||
icon={<ChefHat className="w-6 h-6" />}
|
||||
size="2xl"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -3,3 +3,4 @@ export { RecipeProductStep } from './RecipeProductStep';
|
||||
export { RecipeIngredientsStep } from './RecipeIngredientsStep';
|
||||
export { RecipeProductionStep } from './RecipeProductionStep';
|
||||
export { RecipeReviewStep } from './RecipeReviewStep';
|
||||
export { RecipeTemplateSelector } from './RecipeTemplateSelector';
|
||||
|
||||
Reference in New Issue
Block a user