Implement Phase 2: Recipe & Supplier wizard modals (JTBD-driven UX)
Following Jobs-To-Be-Done analysis, break down complex forms into multi-step wizards to reduce cognitive load for non-technical bakery owners. **Core Infrastructure:** - Add reusable WizardModal component with progress tracking, validation, and navigation - Multi-step progress bar with clickable previous steps - Per-step validation with clear error messaging - Back/Next/Complete navigation with loading states - Optional step skipping support - Responsive modal design (sm/md/lg/xl/2xl sizes) **Recipe Wizard (4 steps):** - Step 1 (Product): Name, category, finished product, cuisine type, difficulty, description - Step 2 (Ingredients): Dynamic ingredient list with add/remove, quantities, units, optional flags - Step 3 (Production): Times (prep/cook/rest), yield, batch sizes, temperature, humidity, special flags - Step 4 (Review): Instructions, storage, nutritional info, allergens, final summary **Supplier Wizard (3 steps):** - Step 1 (Basic): Name, type, status, contact person, email, phone, tax ID, registration - Step 2 (Delivery): Payment terms, lead time, minimum order, delivery schedule, address - Step 3 (Review): Certifications, sustainability practices, notes, summary **Benefits:** - Reduces form overwhelm from 8 sections to 4 sequential steps (recipes) and 3 steps (suppliers) - Clear progress indication and next actions - Validation feedback per step instead of at end - Summary review before final submission - Matches mental model of "configure then review" workflow Files: - WizardModal: Reusable wizard infrastructure - RecipeWizard: 4-step recipe creation (Product → Ingredients → Production → Review) - SupplierWizard: 3-step supplier creation (Basic → Delivery → Review) Related to Phase 1 (ConfigurationProgressWidget) for post-onboarding guidance.
This commit is contained in:
Claude
@@ -0,0 +1,212 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Package, Plus, Trash2 } from 'lucide-react';
|
||||||
|
import type { WizardStepProps } from '../../../ui/WizardModal/WizardModal';
|
||||||
|
import type { RecipeCreate, RecipeIngredientCreate, MeasurementUnit } from '../../../../api/types/recipes';
|
||||||
|
|
||||||
|
interface RecipeIngredientsStepProps extends WizardStepProps {
|
||||||
|
recipeData: Partial<RecipeCreate>;
|
||||||
|
onUpdate: (data: Partial<RecipeCreate>) => void;
|
||||||
|
availableIngredients: Array<{ value: string; label: string }>;
|
||||||
|
unitOptions: Array<{ value: MeasurementUnit; label: string }>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const RecipeIngredientsStep: React.FC<RecipeIngredientsStepProps> = ({
|
||||||
|
recipeData,
|
||||||
|
onUpdate,
|
||||||
|
onNext,
|
||||||
|
onBack,
|
||||||
|
availableIngredients,
|
||||||
|
unitOptions
|
||||||
|
}) => {
|
||||||
|
const ingredients = recipeData.ingredients || [];
|
||||||
|
|
||||||
|
const addIngredient = () => {
|
||||||
|
const newIngredient: RecipeIngredientCreate = {
|
||||||
|
ingredient_id: '',
|
||||||
|
quantity: 1,
|
||||||
|
unit: 'grams' as MeasurementUnit,
|
||||||
|
ingredient_order: ingredients.length + 1,
|
||||||
|
is_optional: false
|
||||||
|
};
|
||||||
|
onUpdate({ ...recipeData, ingredients: [...ingredients, newIngredient] });
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeIngredient = (index: number) => {
|
||||||
|
if (ingredients.length > 1) {
|
||||||
|
const updated = ingredients.filter((_, i) => i !== index);
|
||||||
|
onUpdate({ ...recipeData, ingredients: updated });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateIngredient = (index: number, field: keyof RecipeIngredientCreate, value: any) => {
|
||||||
|
const updated = ingredients.map((ing, i) =>
|
||||||
|
i === index ? { ...ing, [field]: value } : ing
|
||||||
|
);
|
||||||
|
onUpdate({ ...recipeData, ingredients: updated });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
onNext();
|
||||||
|
};
|
||||||
|
|
||||||
|
// Validation: at least one ingredient with valid data
|
||||||
|
const isValid =
|
||||||
|
ingredients.length > 0 &&
|
||||||
|
ingredients.some((ing) => ing.ingredient_id && ing.ingredient_id.trim() !== '' && ing.quantity > 0);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-start gap-4 pb-4 border-b border-[var(--border-secondary)]">
|
||||||
|
<div className="w-12 h-12 rounded-full bg-[var(--color-primary)]/10 flex items-center justify-center flex-shrink-0">
|
||||||
|
<Package className="w-6 h-6 text-[var(--color-primary)]" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-1">
|
||||||
|
Ingredientes
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-[var(--text-secondary)]">
|
||||||
|
Agrega los ingredientes necesarios para esta receta
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={addIngredient}
|
||||||
|
className="px-4 py-2 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary-dark)] transition-colors flex items-center gap-2 text-sm font-medium"
|
||||||
|
>
|
||||||
|
<Plus className="w-4 h-4" />
|
||||||
|
Agregar
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Ingredients List */}
|
||||||
|
<div className="space-y-4 max-h-[450px] overflow-y-auto pr-2">
|
||||||
|
{ingredients.length === 0 ? (
|
||||||
|
<div className="text-center py-12 border-2 border-dashed border-[var(--border-secondary)] rounded-lg">
|
||||||
|
<Package className="w-12 h-12 text-[var(--text-tertiary)] mx-auto mb-3" />
|
||||||
|
<p className="text-sm text-[var(--text-secondary)] mb-4">
|
||||||
|
No hay ingredientes agregados
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={addIngredient}
|
||||||
|
className="px-4 py-2 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary-dark)] transition-colors inline-flex items-center gap-2"
|
||||||
|
>
|
||||||
|
<Plus className="w-4 h-4" />
|
||||||
|
Agregar Primer Ingrediente
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
ingredients.map((ingredient, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="p-4 border border-[var(--border-secondary)] rounded-lg bg-[var(--bg-secondary)]/50 space-y-3"
|
||||||
|
>
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-sm font-medium text-[var(--text-primary)]">
|
||||||
|
Ingrediente #{index + 1}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => removeIngredient(index)}
|
||||||
|
disabled={ingredients.length <= 1}
|
||||||
|
className="p-1.5 text-red-500 hover:text-red-700 hover:bg-red-50 rounded disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||||
|
title={ingredients.length <= 1 ? 'Debe haber al menos un ingrediente' : 'Eliminar'}
|
||||||
|
>
|
||||||
|
<Trash2 className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Fields */}
|
||||||
|
<div className="grid grid-cols-1 gap-3">
|
||||||
|
{/* Ingredient Selection */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-xs font-medium text-[var(--text-secondary)] mb-1">
|
||||||
|
Ingrediente <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={ingredient.ingredient_id}
|
||||||
|
onChange={(e) => updateIngredient(index, 'ingredient_id', e.target.value)}
|
||||||
|
className="w-full px-3 py-2 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)] text-sm"
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<option value="">Seleccionar...</option>
|
||||||
|
{availableIngredients.map((ing) => (
|
||||||
|
<option key={ing.value} value={ing.value}>
|
||||||
|
{ing.label}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-3 gap-3">
|
||||||
|
{/* Quantity */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-xs font-medium text-[var(--text-secondary)] mb-1">
|
||||||
|
Cantidad <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={ingredient.quantity}
|
||||||
|
onChange={(e) => updateIngredient(index, 'quantity', parseFloat(e.target.value) || 0)}
|
||||||
|
className="w-full px-3 py-2 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)] text-sm"
|
||||||
|
min="0"
|
||||||
|
step="0.1"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Unit */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-xs font-medium text-[var(--text-secondary)] mb-1">
|
||||||
|
Unidad <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={ingredient.unit}
|
||||||
|
onChange={(e) => updateIngredient(index, 'unit', e.target.value as MeasurementUnit)}
|
||||||
|
className="w-full px-3 py-2 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)] text-sm"
|
||||||
|
required
|
||||||
|
>
|
||||||
|
{unitOptions.map((unit) => (
|
||||||
|
<option key={unit.value} value={unit.value}>
|
||||||
|
{unit.label}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Optional Checkbox */}
|
||||||
|
<div className="flex items-end">
|
||||||
|
<label className="flex items-center gap-2 text-sm text-[var(--text-primary)] cursor-pointer pb-2">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={ingredient.is_optional}
|
||||||
|
onChange={(e) => updateIngredient(index, 'is_optional', e.target.checked)}
|
||||||
|
className="w-4 h-4 text-[var(--color-primary)] border-[var(--border-secondary)] rounded focus:ring-[var(--color-primary)]"
|
||||||
|
/>
|
||||||
|
Opcional
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Validation Message */}
|
||||||
|
{!isValid && ingredients.length > 0 && (
|
||||||
|
<div className="p-3 bg-[var(--color-warning)]/10 border border-[var(--color-warning)]/30 rounded-lg">
|
||||||
|
<p className="text-sm text-[var(--text-primary)]">
|
||||||
|
<span className="font-medium">⚠️ Atención:</span> Asegúrate de seleccionar al menos un ingrediente con cantidad válida.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Hidden submit button for form handling */}
|
||||||
|
<button type="submit" className="hidden" disabled={!isValid} />
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,187 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { ChefHat } from 'lucide-react';
|
||||||
|
import type { WizardStepProps } from '../../../ui/WizardModal/WizardModal';
|
||||||
|
import type { RecipeCreate } from '../../../../api/types/recipes';
|
||||||
|
|
||||||
|
interface RecipeProductStepProps extends WizardStepProps {
|
||||||
|
recipeData: Partial<RecipeCreate>;
|
||||||
|
onUpdate: (data: Partial<RecipeCreate>) => void;
|
||||||
|
finishedProducts: Array<{ value: string; label: string }>;
|
||||||
|
categoryOptions: Array<{ value: string; label: string }>;
|
||||||
|
cuisineTypeOptions: Array<{ value: string; label: string }>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const RecipeProductStep: React.FC<RecipeProductStepProps> = ({
|
||||||
|
recipeData,
|
||||||
|
onUpdate,
|
||||||
|
onNext,
|
||||||
|
finishedProducts,
|
||||||
|
categoryOptions,
|
||||||
|
cuisineTypeOptions
|
||||||
|
}) => {
|
||||||
|
const handleFieldChange = (field: keyof RecipeCreate, value: any) => {
|
||||||
|
onUpdate({ ...recipeData, [field]: value });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
onNext();
|
||||||
|
};
|
||||||
|
|
||||||
|
const isValid =
|
||||||
|
recipeData.name &&
|
||||||
|
recipeData.name.trim().length >= 2 &&
|
||||||
|
recipeData.finished_product_id &&
|
||||||
|
recipeData.category;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-start gap-4 pb-4 border-b border-[var(--border-secondary)]">
|
||||||
|
<div className="w-12 h-12 rounded-full bg-[var(--color-primary)]/10 flex items-center justify-center flex-shrink-0">
|
||||||
|
<ChefHat className="w-6 h-6 text-[var(--color-primary)]" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-1">
|
||||||
|
Información del Producto
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-[var(--text-secondary)]">
|
||||||
|
Configura la información básica de tu receta
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Form Fields */}
|
||||||
|
<div className="space-y-5">
|
||||||
|
{/* Recipe Name */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
|
||||||
|
Nombre de la Receta <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={recipeData.name || ''}
|
||||||
|
onChange={(e) => handleFieldChange('name', e.target.value)}
|
||||||
|
placeholder="Ej: Pan de molde integral"
|
||||||
|
className="w-full px-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)]"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
{recipeData.name && recipeData.name.trim().length < 2 && (
|
||||||
|
<p className="mt-1 text-xs text-red-500">
|
||||||
|
El nombre debe tener al menos 2 caracteres
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Finished Product */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
|
||||||
|
Producto Terminado <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={recipeData.finished_product_id || ''}
|
||||||
|
onChange={(e) => handleFieldChange('finished_product_id', e.target.value)}
|
||||||
|
className="w-full px-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)]"
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<option value="">Seleccionar producto...</option>
|
||||||
|
{finishedProducts.map((product) => (
|
||||||
|
<option key={product.value} value={product.value}>
|
||||||
|
{product.label}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
<p className="mt-1 text-xs text-[var(--text-tertiary)]">
|
||||||
|
El producto final que se obtiene con esta receta
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Category */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
|
||||||
|
Categoría <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={recipeData.category || ''}
|
||||||
|
onChange={(e) => handleFieldChange('category', e.target.value)}
|
||||||
|
className="w-full px-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)]"
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<option value="">Seleccionar categoría...</option>
|
||||||
|
{categoryOptions.map((category) => (
|
||||||
|
<option key={category.value} value={category.value}>
|
||||||
|
{category.label}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
{/* Cuisine Type */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
|
||||||
|
Tipo de Cocina
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={recipeData.cuisine_type || ''}
|
||||||
|
onChange={(e) => handleFieldChange('cuisine_type', e.target.value)}
|
||||||
|
className="w-full px-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)]"
|
||||||
|
>
|
||||||
|
<option value="">Seleccionar tipo...</option>
|
||||||
|
{cuisineTypeOptions.map((type) => (
|
||||||
|
<option key={type.value} value={type.value}>
|
||||||
|
{type.label}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Difficulty Level */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
|
||||||
|
Nivel de Dificultad <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={recipeData.difficulty_level || 1}
|
||||||
|
onChange={(e) => handleFieldChange('difficulty_level', Number(e.target.value))}
|
||||||
|
className="w-full px-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)]"
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<option value={1}>1 - Fácil</option>
|
||||||
|
<option value={2}>2 - Medio</option>
|
||||||
|
<option value={3}>3 - Difícil</option>
|
||||||
|
<option value={4}>4 - Muy Difícil</option>
|
||||||
|
<option value={5}>5 - Extremo</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Description */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
|
||||||
|
Descripción (Opcional)
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
value={recipeData.description || ''}
|
||||||
|
onChange={(e) => handleFieldChange('description', e.target.value)}
|
||||||
|
placeholder="Descripción breve de la receta..."
|
||||||
|
rows={3}
|
||||||
|
className="w-full px-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)] resize-none"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Validation Message */}
|
||||||
|
{!isValid && (
|
||||||
|
<div className="p-3 bg-[var(--color-warning)]/10 border border-[var(--color-warning)]/30 rounded-lg">
|
||||||
|
<p className="text-sm text-[var(--text-primary)]">
|
||||||
|
<span className="font-medium">⚠️ Campos requeridos:</span> Asegúrate de completar el nombre, producto terminado y categoría.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Hidden submit button for form handling */}
|
||||||
|
<button type="submit" className="hidden" disabled={!isValid} />
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,299 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Clock, Settings } from 'lucide-react';
|
||||||
|
import type { WizardStepProps } from '../../../ui/WizardModal/WizardModal';
|
||||||
|
import type { RecipeCreate, MeasurementUnit } from '../../../../api/types/recipes';
|
||||||
|
|
||||||
|
interface RecipeProductionStepProps extends WizardStepProps {
|
||||||
|
recipeData: Partial<RecipeCreate>;
|
||||||
|
onUpdate: (data: Partial<RecipeCreate>) => void;
|
||||||
|
unitOptions: Array<{ value: MeasurementUnit; label: string }>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const RecipeProductionStep: React.FC<RecipeProductionStepProps> = ({
|
||||||
|
recipeData,
|
||||||
|
onUpdate,
|
||||||
|
onNext,
|
||||||
|
onBack,
|
||||||
|
unitOptions
|
||||||
|
}) => {
|
||||||
|
const handleFieldChange = (field: keyof RecipeCreate, value: any) => {
|
||||||
|
onUpdate({ ...recipeData, [field]: value });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
onNext();
|
||||||
|
};
|
||||||
|
|
||||||
|
const isValid =
|
||||||
|
recipeData.yield_quantity &&
|
||||||
|
Number(recipeData.yield_quantity) > 0 &&
|
||||||
|
recipeData.yield_unit;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-start gap-4 pb-4 border-b border-[var(--border-secondary)]">
|
||||||
|
<div className="w-12 h-12 rounded-full bg-[var(--color-primary)]/10 flex items-center justify-center flex-shrink-0">
|
||||||
|
<Clock className="w-6 h-6 text-[var(--color-primary)]" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-1">
|
||||||
|
Detalles de Producción
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-[var(--text-secondary)]">
|
||||||
|
Define tiempos, rendimientos y parámetros de producción
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Yield & Servings Section */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h4 className="text-sm font-semibold text-[var(--text-primary)] flex items-center gap-2">
|
||||||
|
<Clock className="w-4 h-4" />
|
||||||
|
Rendimiento y Porciones
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-3 gap-4">
|
||||||
|
{/* Yield Quantity */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
|
||||||
|
Cantidad <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={recipeData.yield_quantity || ''}
|
||||||
|
onChange={(e) => handleFieldChange('yield_quantity', parseFloat(e.target.value) || 0)}
|
||||||
|
className="w-full px-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)]"
|
||||||
|
min="0.1"
|
||||||
|
step="0.1"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Yield Unit */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
|
||||||
|
Unidad <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={recipeData.yield_unit || 'units'}
|
||||||
|
onChange={(e) => handleFieldChange('yield_unit', e.target.value as MeasurementUnit)}
|
||||||
|
className="w-full px-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)]"
|
||||||
|
required
|
||||||
|
>
|
||||||
|
{unitOptions.map((unit) => (
|
||||||
|
<option key={unit.value} value={unit.value}>
|
||||||
|
{unit.label}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Serves Count */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
|
||||||
|
Porciones
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={recipeData.serves_count || 1}
|
||||||
|
onChange={(e) => handleFieldChange('serves_count', parseInt(e.target.value) || 1)}
|
||||||
|
className="w-full px-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)]"
|
||||||
|
min="1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Time Section */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h4 className="text-sm font-semibold text-[var(--text-primary)] flex items-center gap-2">
|
||||||
|
<Clock className="w-4 h-4" />
|
||||||
|
Tiempos de Preparación
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-3 gap-4">
|
||||||
|
{/* Prep Time */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
|
||||||
|
Preparación (min)
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={recipeData.prep_time_minutes || 0}
|
||||||
|
onChange={(e) => handleFieldChange('prep_time_minutes', parseInt(e.target.value) || 0)}
|
||||||
|
className="w-full px-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)]"
|
||||||
|
min="0"
|
||||||
|
/>
|
||||||
|
<p className="mt-1 text-xs text-[var(--text-tertiary)]">Tiempo de prep. ingredientes</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Cook Time */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
|
||||||
|
Cocción (min)
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={recipeData.cook_time_minutes || 0}
|
||||||
|
onChange={(e) => handleFieldChange('cook_time_minutes', parseInt(e.target.value) || 0)}
|
||||||
|
className="w-full px-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)]"
|
||||||
|
min="0"
|
||||||
|
/>
|
||||||
|
<p className="mt-1 text-xs text-[var(--text-tertiary)]">Tiempo de horneado</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Rest Time */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
|
||||||
|
Reposo (min)
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={recipeData.rest_time_minutes || 0}
|
||||||
|
onChange={(e) => handleFieldChange('rest_time_minutes', parseInt(e.target.value) || 0)}
|
||||||
|
className="w-full px-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)]"
|
||||||
|
min="0"
|
||||||
|
/>
|
||||||
|
<p className="mt-1 text-xs text-[var(--text-tertiary)]">Tiempo de fermentación</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Total Time Display */}
|
||||||
|
{((recipeData.prep_time_minutes || 0) + (recipeData.cook_time_minutes || 0) + (recipeData.rest_time_minutes || 0)) > 0 && (
|
||||||
|
<div className="p-3 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-secondary)]">
|
||||||
|
<p className="text-sm text-[var(--text-primary)]">
|
||||||
|
<span className="font-medium">Tiempo Total:</span>{' '}
|
||||||
|
{(recipeData.prep_time_minutes || 0) + (recipeData.cook_time_minutes || 0) + (recipeData.rest_time_minutes || 0)} minutos
|
||||||
|
({Math.round(((recipeData.prep_time_minutes || 0) + (recipeData.cook_time_minutes || 0) + (recipeData.rest_time_minutes || 0)) / 60 * 10) / 10} horas)
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Production Parameters Section */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h4 className="text-sm font-semibold text-[var(--text-primary)] flex items-center gap-2">
|
||||||
|
<Settings className="w-4 h-4" />
|
||||||
|
Parámetros de Producción (Opcional)
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
{/* Batch Sizes */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
|
||||||
|
Tamaño Mínimo de Lote
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={recipeData.minimum_batch_size || ''}
|
||||||
|
onChange={(e) => handleFieldChange('minimum_batch_size', e.target.value ? parseInt(e.target.value) : undefined)}
|
||||||
|
className="w-full px-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)]"
|
||||||
|
min="1"
|
||||||
|
placeholder="Ej: 10"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
|
||||||
|
Tamaño Máximo de Lote
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={recipeData.maximum_batch_size || ''}
|
||||||
|
onChange={(e) => handleFieldChange('maximum_batch_size', e.target.value ? parseInt(e.target.value) : undefined)}
|
||||||
|
className="w-full px-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)]"
|
||||||
|
min="1"
|
||||||
|
placeholder="Ej: 100"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Temperature & Humidity */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
|
||||||
|
Temperatura Óptima (°C)
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={recipeData.optimal_production_temperature || ''}
|
||||||
|
onChange={(e) => handleFieldChange('optimal_production_temperature', e.target.value ? parseFloat(e.target.value) : undefined)}
|
||||||
|
className="w-full px-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)]"
|
||||||
|
step="0.1"
|
||||||
|
placeholder="Ej: 180"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
|
||||||
|
Humedad Óptima (%)
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={recipeData.optimal_humidity || ''}
|
||||||
|
onChange={(e) => handleFieldChange('optimal_humidity', e.target.value ? parseFloat(e.target.value) : undefined)}
|
||||||
|
className="w-full px-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)]"
|
||||||
|
min="0"
|
||||||
|
max="100"
|
||||||
|
step="1"
|
||||||
|
placeholder="Ej: 65"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Special Configuration */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h4 className="text-sm font-semibold text-[var(--text-primary)]">
|
||||||
|
Configuración Especial
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
{/* Signature Item */}
|
||||||
|
<label className="flex items-center gap-3 p-3 border border-[var(--border-secondary)] rounded-lg cursor-pointer hover:bg-[var(--bg-secondary)] transition-colors">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={recipeData.is_signature_item || false}
|
||||||
|
onChange={(e) => handleFieldChange('is_signature_item', e.target.checked)}
|
||||||
|
className="w-5 h-5 text-[var(--color-primary)] border-[var(--border-secondary)] rounded focus:ring-[var(--color-primary)]"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-[var(--text-primary)]">Receta Estrella</p>
|
||||||
|
<p className="text-xs text-[var(--text-tertiary)]">Destacar como producto emblema</p>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
{/* Target Margin */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
|
||||||
|
Margen Objetivo (%)
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={recipeData.target_margin_percentage || 30}
|
||||||
|
onChange={(e) => handleFieldChange('target_margin_percentage', parseFloat(e.target.value) || 30)}
|
||||||
|
className="w-full px-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)]"
|
||||||
|
min="0"
|
||||||
|
max="100"
|
||||||
|
step="1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Validation Message */}
|
||||||
|
{!isValid && (
|
||||||
|
<div className="p-3 bg-[var(--color-warning)]/10 border border-[var(--color-warning)]/30 rounded-lg">
|
||||||
|
<p className="text-sm text-[var(--text-primary)]">
|
||||||
|
<span className="font-medium">⚠️ Campos requeridos:</span> Asegúrate de completar la cantidad y unidad de rendimiento.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Hidden submit button for form handling */}
|
||||||
|
<button type="submit" className="hidden" disabled={!isValid} />
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,234 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { FileText, CheckCircle2, Package, Clock, Settings } from 'lucide-react';
|
||||||
|
import type { WizardStepProps } from '../../../ui/WizardModal/WizardModal';
|
||||||
|
import type { RecipeCreate } from '../../../../api/types/recipes';
|
||||||
|
|
||||||
|
interface RecipeReviewStepProps extends WizardStepProps {
|
||||||
|
recipeData: Partial<RecipeCreate>;
|
||||||
|
onUpdate: (data: Partial<RecipeCreate>) => void;
|
||||||
|
ingredientNames: Map<string, string>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const RecipeReviewStep: React.FC<RecipeReviewStepProps> = ({
|
||||||
|
recipeData,
|
||||||
|
onUpdate,
|
||||||
|
onNext,
|
||||||
|
onBack,
|
||||||
|
ingredientNames
|
||||||
|
}) => {
|
||||||
|
const handleFieldChange = (field: keyof RecipeCreate, value: any) => {
|
||||||
|
onUpdate({ ...recipeData, [field]: value });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
onNext();
|
||||||
|
};
|
||||||
|
|
||||||
|
// Calculate costs if available (future enhancement)
|
||||||
|
const totalIngredients = recipeData.ingredients?.length || 0;
|
||||||
|
const validIngredients = recipeData.ingredients?.filter(ing => ing.ingredient_id && ing.quantity > 0).length || 0;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-start gap-4 pb-4 border-b border-[var(--border-secondary)]">
|
||||||
|
<div className="w-12 h-12 rounded-full bg-[var(--color-primary)]/10 flex items-center justify-center flex-shrink-0">
|
||||||
|
<FileText className="w-6 h-6 text-[var(--color-primary)]" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-1">
|
||||||
|
Instrucciones y Revisión
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-[var(--text-secondary)]">
|
||||||
|
Completa las instrucciones y revisa la receta antes de guardar
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Recipe Summary */}
|
||||||
|
<div className="p-4 bg-gradient-to-r from-[var(--color-primary)]/5 to-[var(--color-primary)]/10 border border-[var(--color-primary)]/20 rounded-lg">
|
||||||
|
<h4 className="text-sm font-semibold text-[var(--text-primary)] mb-3 flex items-center gap-2">
|
||||||
|
<CheckCircle2 className="w-4 h-4 text-[var(--color-success)]" />
|
||||||
|
Resumen de la Receta
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
{/* Product Info */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex items-start gap-2">
|
||||||
|
<Package className="w-4 h-4 text-[var(--text-secondary)] mt-0.5 flex-shrink-0" />
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-[var(--text-tertiary)]">Producto</p>
|
||||||
|
<p className="text-sm font-medium text-[var(--text-primary)]">{recipeData.name || 'Sin nombre'}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-start gap-2">
|
||||||
|
<Package className="w-4 h-4 text-[var(--text-secondary)] mt-0.5 flex-shrink-0" />
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-[var(--text-tertiary)]">Categoría</p>
|
||||||
|
<p className="text-sm font-medium text-[var(--text-primary)]">{recipeData.category || 'No especificada'}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-start gap-2">
|
||||||
|
<Package className="w-4 h-4 text-[var(--text-secondary)] mt-0.5 flex-shrink-0" />
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-[var(--text-tertiary)]">Ingredientes</p>
|
||||||
|
<p className="text-sm font-medium text-[var(--text-primary)]">{validIngredients} de {totalIngredients}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Production Info */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex items-start gap-2">
|
||||||
|
<Clock className="w-4 h-4 text-[var(--text-secondary)] mt-0.5 flex-shrink-0" />
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-[var(--text-tertiary)]">Tiempo Total</p>
|
||||||
|
<p className="text-sm font-medium text-[var(--text-primary)]">
|
||||||
|
{(recipeData.prep_time_minutes || 0) + (recipeData.cook_time_minutes || 0) + (recipeData.rest_time_minutes || 0)} min
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-start gap-2">
|
||||||
|
<Settings className="w-4 h-4 text-[var(--text-secondary)] mt-0.5 flex-shrink-0" />
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-[var(--text-tertiary)]">Rendimiento</p>
|
||||||
|
<p className="text-sm font-medium text-[var(--text-primary)]">
|
||||||
|
{recipeData.yield_quantity || 0} {recipeData.yield_unit || 'unidades'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-start gap-2">
|
||||||
|
<Settings className="w-4 h-4 text-[var(--text-secondary)] mt-0.5 flex-shrink-0" />
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-[var(--text-tertiary)]">Dificultad</p>
|
||||||
|
<p className="text-sm font-medium text-[var(--text-primary)]">
|
||||||
|
Nivel {recipeData.difficulty_level || 1}/5
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Ingredients Preview */}
|
||||||
|
{recipeData.ingredients && recipeData.ingredients.length > 0 && (
|
||||||
|
<div className="mt-3 pt-3 border-t border-[var(--border-secondary)]">
|
||||||
|
<p className="text-xs font-medium text-[var(--text-primary)] mb-2">Lista de Ingredientes:</p>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{recipeData.ingredients.map((ing, idx) => {
|
||||||
|
const name = ingredientNames.get(ing.ingredient_id) || 'Desconocido';
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
key={idx}
|
||||||
|
className="inline-flex items-center gap-1 px-2 py-1 bg-[var(--bg-secondary)] border border-[var(--border-secondary)] rounded text-xs text-[var(--text-primary)]"
|
||||||
|
>
|
||||||
|
<span className="font-medium">{name}</span>
|
||||||
|
<span className="text-[var(--text-tertiary)]">({ing.quantity} {ing.unit})</span>
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Instructions Section */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h4 className="text-sm font-semibold text-[var(--text-primary)]">
|
||||||
|
Instrucciones de Preparación
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
{/* Preparation Notes */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
|
||||||
|
Notas de Preparación
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
value={recipeData.preparation_notes || ''}
|
||||||
|
onChange={(e) => handleFieldChange('preparation_notes', e.target.value)}
|
||||||
|
placeholder="Pasos detallados para la preparación de la receta..."
|
||||||
|
rows={4}
|
||||||
|
className="w-full px-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)] resize-none"
|
||||||
|
/>
|
||||||
|
<p className="mt-1 text-xs text-[var(--text-tertiary)]">
|
||||||
|
Describe el proceso paso a paso
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Storage Instructions */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
|
||||||
|
Instrucciones de Almacenamiento
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
value={recipeData.storage_instructions || ''}
|
||||||
|
onChange={(e) => handleFieldChange('storage_instructions', e.target.value)}
|
||||||
|
placeholder="Cómo conservar el producto terminado..."
|
||||||
|
rows={2}
|
||||||
|
className="w-full px-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)] resize-none"
|
||||||
|
/>
|
||||||
|
<p className="mt-1 text-xs text-[var(--text-tertiary)]">
|
||||||
|
Condiciones de almacenamiento recomendadas
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Nutritional Information (Optional) */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h4 className="text-sm font-semibold text-[var(--text-primary)]">
|
||||||
|
Información Nutricional (Opcional)
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 gap-4">
|
||||||
|
{/* Allergens */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
|
||||||
|
Alérgenos
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={recipeData.allergen_info ? (recipeData.allergen_info as any).allergens?.join(', ') : ''}
|
||||||
|
onChange={(e) => handleFieldChange('allergen_info', e.target.value ? { allergens: e.target.value.split(',').map((a: string) => a.trim()) } : null)}
|
||||||
|
placeholder="Ej: Gluten, Lácteos, Huevos"
|
||||||
|
className="w-full px-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)]"
|
||||||
|
/>
|
||||||
|
<p className="mt-1 text-xs text-[var(--text-tertiary)]">
|
||||||
|
Separar con comas
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Dietary Tags */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
|
||||||
|
Etiquetas Dietéticas
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={recipeData.dietary_tags ? (recipeData.dietary_tags as any).tags?.join(', ') : ''}
|
||||||
|
onChange={(e) => handleFieldChange('dietary_tags', e.target.value ? { tags: e.target.value.split(',').map((t: string) => t.trim()) } : null)}
|
||||||
|
placeholder="Ej: Vegano, Sin gluten, Orgánico"
|
||||||
|
className="w-full px-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)]"
|
||||||
|
/>
|
||||||
|
<p className="mt-1 text-xs text-[var(--text-tertiary)]">
|
||||||
|
Separar con comas
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Ready to Save Message */}
|
||||||
|
<div className="p-4 bg-[var(--color-success)]/10 border border-[var(--color-success)]/30 rounded-lg">
|
||||||
|
<p className="text-sm text-[var(--text-primary)] flex items-center gap-2">
|
||||||
|
<CheckCircle2 className="w-4 h-4 text-[var(--color-success)]" />
|
||||||
|
<span>
|
||||||
|
<span className="font-medium">¡Listo para guardar!</span> Revisa la información y haz clic en "Completar" para crear la receta.
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Hidden submit button for form handling */}
|
||||||
|
<button type="submit" className="hidden" />
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,297 @@
|
|||||||
|
import React, { useState, useMemo } from 'react';
|
||||||
|
import { ChefHat } from 'lucide-react';
|
||||||
|
import { WizardModal, WizardStep } from '../../../ui/WizardModal/WizardModal';
|
||||||
|
import { RecipeProductStep } from './RecipeProductStep';
|
||||||
|
import { RecipeIngredientsStep } from './RecipeIngredientsStep';
|
||||||
|
import { RecipeProductionStep } from './RecipeProductionStep';
|
||||||
|
import { RecipeReviewStep } from './RecipeReviewStep';
|
||||||
|
import type { RecipeCreate, RecipeIngredientCreate, MeasurementUnit } from '../../../../api/types/recipes';
|
||||||
|
import { useIngredients } from '../../../../api/hooks/inventory';
|
||||||
|
import { useCurrentTenant } from '../../../../stores/tenant.store';
|
||||||
|
|
||||||
|
interface RecipeWizardModalProps {
|
||||||
|
isOpen: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
onCreateRecipe: (recipeData: RecipeCreate) => Promise<void>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const RecipeWizardModal: React.FC<RecipeWizardModalProps> = ({
|
||||||
|
isOpen,
|
||||||
|
onClose,
|
||||||
|
onCreateRecipe
|
||||||
|
}) => {
|
||||||
|
// Recipe state
|
||||||
|
const [recipeData, setRecipeData] = useState<Partial<RecipeCreate>>({
|
||||||
|
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
|
||||||
|
}]
|
||||||
|
});
|
||||||
|
|
||||||
|
// Get tenant and fetch data
|
||||||
|
const currentTenant = useCurrentTenant();
|
||||||
|
const tenantId = currentTenant?.id || '';
|
||||||
|
|
||||||
|
const {
|
||||||
|
data: inventoryItems = [],
|
||||||
|
isLoading: inventoryLoading
|
||||||
|
} = useIngredients(tenantId, {});
|
||||||
|
|
||||||
|
// Separate finished products and ingredients
|
||||||
|
const finishedProducts = useMemo(() =>
|
||||||
|
(inventoryItems || [])
|
||||||
|
.filter(item => item.product_type === 'finished_product')
|
||||||
|
.map(product => ({
|
||||||
|
value: product.id,
|
||||||
|
label: `${product.name} (${product.category || 'Sin categoría'})`
|
||||||
|
})),
|
||||||
|
[inventoryItems]
|
||||||
|
);
|
||||||
|
|
||||||
|
const availableIngredients = useMemo(() =>
|
||||||
|
(inventoryItems || [])
|
||||||
|
.filter(item => item.product_type !== 'finished_product')
|
||||||
|
.map(ingredient => ({
|
||||||
|
value: ingredient.id,
|
||||||
|
label: `${ingredient.name} (${ingredient.category || 'Sin categoría'})`
|
||||||
|
})),
|
||||||
|
[inventoryItems]
|
||||||
|
);
|
||||||
|
|
||||||
|
// Create map of ingredient IDs to names for display
|
||||||
|
const ingredientNames = useMemo(() => {
|
||||||
|
const map = new Map<string, string>();
|
||||||
|
inventoryItems.forEach(item => {
|
||||||
|
map.set(item.id, item.name);
|
||||||
|
});
|
||||||
|
return map;
|
||||||
|
}, [inventoryItems]);
|
||||||
|
|
||||||
|
// Options
|
||||||
|
const categoryOptions = [
|
||||||
|
{ value: 'bread', label: 'Pan' },
|
||||||
|
{ value: 'pastry', label: 'Bollería' },
|
||||||
|
{ value: 'cake', label: 'Tarta' },
|
||||||
|
{ value: 'cookie', label: 'Galleta' },
|
||||||
|
{ value: 'muffin', label: 'Muffin' },
|
||||||
|
{ value: 'savory', label: 'Salado' },
|
||||||
|
{ value: 'desserts', label: 'Postres' },
|
||||||
|
{ value: 'specialty', label: 'Especialidad' },
|
||||||
|
{ value: 'other', label: 'Otro' }
|
||||||
|
];
|
||||||
|
|
||||||
|
const cuisineTypeOptions = [
|
||||||
|
{ value: 'french', label: 'Francés' },
|
||||||
|
{ value: 'spanish', label: 'Español' },
|
||||||
|
{ value: 'italian', label: 'Italiano' },
|
||||||
|
{ value: 'german', label: 'Alemán' },
|
||||||
|
{ value: 'american', label: 'Americano' },
|
||||||
|
{ value: 'artisanal', label: 'Artesanal' },
|
||||||
|
{ value: 'traditional', label: 'Tradicional' },
|
||||||
|
{ value: 'modern', label: 'Moderno' }
|
||||||
|
];
|
||||||
|
|
||||||
|
const unitOptions = [
|
||||||
|
{ value: 'units' as MeasurementUnit, label: 'Unidades' },
|
||||||
|
{ value: 'pieces' as MeasurementUnit, label: 'Piezas' },
|
||||||
|
{ value: 'grams' as MeasurementUnit, label: 'Gramos' },
|
||||||
|
{ value: 'kilograms' as MeasurementUnit, label: 'Kilogramos' },
|
||||||
|
{ value: 'milliliters' as MeasurementUnit, label: 'Mililitros' },
|
||||||
|
{ value: 'liters' as MeasurementUnit, label: 'Litros' }
|
||||||
|
];
|
||||||
|
|
||||||
|
const handleUpdate = (data: Partial<RecipeCreate>) => {
|
||||||
|
setRecipeData(data);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleComplete = async () => {
|
||||||
|
try {
|
||||||
|
// Generate recipe code if not provided
|
||||||
|
const recipeCode = recipeData.recipe_code ||
|
||||||
|
(recipeData.name?.substring(0, 3).toUpperCase() || 'RCP') +
|
||||||
|
String(Date.now()).slice(-3);
|
||||||
|
|
||||||
|
// Calculate total time
|
||||||
|
const totalTime = (recipeData.prep_time_minutes || 0) +
|
||||||
|
(recipeData.cook_time_minutes || 0) +
|
||||||
|
(recipeData.rest_time_minutes || 0);
|
||||||
|
|
||||||
|
// Filter and validate ingredients
|
||||||
|
const validIngredients = (recipeData.ingredients || [])
|
||||||
|
.filter((ing: RecipeIngredientCreate) => ing.ingredient_id && ing.ingredient_id.trim() !== '')
|
||||||
|
.map((ing: RecipeIngredientCreate, index: number) => ({
|
||||||
|
...ing,
|
||||||
|
ingredient_order: index + 1
|
||||||
|
}));
|
||||||
|
|
||||||
|
if (validIngredients.length === 0) {
|
||||||
|
throw new Error('Debe agregar al menos un ingrediente válido');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Build final recipe data
|
||||||
|
const finalRecipeData: RecipeCreate = {
|
||||||
|
name: recipeData.name!,
|
||||||
|
recipe_code: recipeCode,
|
||||||
|
version: recipeData.version || '1.0',
|
||||||
|
finished_product_id: recipeData.finished_product_id!,
|
||||||
|
description: recipeData.description || '',
|
||||||
|
category: recipeData.category!,
|
||||||
|
cuisine_type: recipeData.cuisine_type || '',
|
||||||
|
difficulty_level: recipeData.difficulty_level!,
|
||||||
|
yield_quantity: recipeData.yield_quantity!,
|
||||||
|
yield_unit: recipeData.yield_unit!,
|
||||||
|
prep_time_minutes: recipeData.prep_time_minutes || 0,
|
||||||
|
cook_time_minutes: recipeData.cook_time_minutes || 0,
|
||||||
|
total_time_minutes: totalTime,
|
||||||
|
rest_time_minutes: recipeData.rest_time_minutes || 0,
|
||||||
|
target_margin_percentage: recipeData.target_margin_percentage || 30,
|
||||||
|
instructions: null,
|
||||||
|
preparation_notes: recipeData.preparation_notes || '',
|
||||||
|
storage_instructions: recipeData.storage_instructions || '',
|
||||||
|
quality_check_configuration: null,
|
||||||
|
serves_count: recipeData.serves_count || 1,
|
||||||
|
is_seasonal: recipeData.is_seasonal || false,
|
||||||
|
season_start_month: recipeData.is_seasonal ? recipeData.season_start_month : undefined,
|
||||||
|
season_end_month: recipeData.is_seasonal ? recipeData.season_end_month : undefined,
|
||||||
|
is_signature_item: recipeData.is_signature_item || false,
|
||||||
|
batch_size_multiplier: recipeData.batch_size_multiplier || 1.0,
|
||||||
|
minimum_batch_size: recipeData.minimum_batch_size,
|
||||||
|
maximum_batch_size: recipeData.maximum_batch_size,
|
||||||
|
optimal_production_temperature: recipeData.optimal_production_temperature,
|
||||||
|
optimal_humidity: recipeData.optimal_humidity,
|
||||||
|
allergen_info: recipeData.allergen_info || null,
|
||||||
|
dietary_tags: recipeData.dietary_tags || null,
|
||||||
|
nutritional_info: recipeData.nutritional_info || null,
|
||||||
|
ingredients: validIngredients
|
||||||
|
};
|
||||||
|
|
||||||
|
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
|
||||||
|
}]
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error creating recipe:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Define wizard steps
|
||||||
|
const steps: WizardStep[] = [
|
||||||
|
{
|
||||||
|
id: 'product',
|
||||||
|
title: 'Información del Producto',
|
||||||
|
description: 'Configura los datos básicos de la receta',
|
||||||
|
component: (props) => (
|
||||||
|
<RecipeProductStep
|
||||||
|
{...props}
|
||||||
|
recipeData={recipeData}
|
||||||
|
onUpdate={handleUpdate}
|
||||||
|
finishedProducts={finishedProducts}
|
||||||
|
categoryOptions={categoryOptions}
|
||||||
|
cuisineTypeOptions={cuisineTypeOptions}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
validate: () => {
|
||||||
|
return !!(
|
||||||
|
recipeData.name &&
|
||||||
|
recipeData.name.trim().length >= 2 &&
|
||||||
|
recipeData.finished_product_id &&
|
||||||
|
recipeData.category
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'ingredients',
|
||||||
|
title: 'Ingredientes',
|
||||||
|
description: 'Agrega los ingredientes necesarios',
|
||||||
|
component: (props) => (
|
||||||
|
<RecipeIngredientsStep
|
||||||
|
{...props}
|
||||||
|
recipeData={recipeData}
|
||||||
|
onUpdate={handleUpdate}
|
||||||
|
availableIngredients={availableIngredients}
|
||||||
|
unitOptions={unitOptions}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
validate: () => {
|
||||||
|
const ingredients = recipeData.ingredients || [];
|
||||||
|
return ingredients.length > 0 &&
|
||||||
|
ingredients.some(ing => ing.ingredient_id && ing.ingredient_id.trim() !== '' && ing.quantity > 0);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'production',
|
||||||
|
title: 'Detalles de Producción',
|
||||||
|
description: 'Define tiempos y parámetros',
|
||||||
|
component: (props) => (
|
||||||
|
<RecipeProductionStep
|
||||||
|
{...props}
|
||||||
|
recipeData={recipeData}
|
||||||
|
onUpdate={handleUpdate}
|
||||||
|
unitOptions={unitOptions}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
validate: () => {
|
||||||
|
return !!(recipeData.yield_quantity && Number(recipeData.yield_quantity) > 0 && recipeData.yield_unit);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'review',
|
||||||
|
title: 'Instrucciones y Revisión',
|
||||||
|
description: 'Completa las instrucciones y revisa',
|
||||||
|
component: (props) => (
|
||||||
|
<RecipeReviewStep
|
||||||
|
{...props}
|
||||||
|
recipeData={recipeData}
|
||||||
|
onUpdate={handleUpdate}
|
||||||
|
ingredientNames={ingredientNames}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<WizardModal
|
||||||
|
isOpen={isOpen}
|
||||||
|
onClose={onClose}
|
||||||
|
onComplete={handleComplete}
|
||||||
|
title="Nueva Receta"
|
||||||
|
steps={steps}
|
||||||
|
icon={<ChefHat className="w-6 h-6" />}
|
||||||
|
size="2xl"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
export { RecipeWizardModal } from './RecipeWizardModal';
|
||||||
|
export { RecipeProductStep } from './RecipeProductStep';
|
||||||
|
export { RecipeIngredientsStep } from './RecipeIngredientsStep';
|
||||||
|
export { RecipeProductionStep } from './RecipeProductionStep';
|
||||||
|
export { RecipeReviewStep } from './RecipeReviewStep';
|
||||||
@@ -0,0 +1,191 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Users } from 'lucide-react';
|
||||||
|
import type { WizardStepProps } from '../../../ui/WizardModal/WizardModal';
|
||||||
|
import type { SupplierCreate, SupplierType, SupplierStatus, PaymentTerms } from '../../../../api/types/suppliers';
|
||||||
|
|
||||||
|
interface SupplierBasicStepProps extends WizardStepProps {
|
||||||
|
supplierData: Partial<SupplierCreate>;
|
||||||
|
onUpdate: (data: Partial<SupplierCreate>) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const SupplierBasicStep: React.FC<SupplierBasicStepProps> = ({
|
||||||
|
supplierData,
|
||||||
|
onUpdate,
|
||||||
|
onNext
|
||||||
|
}) => {
|
||||||
|
const handleFieldChange = (field: keyof SupplierCreate, value: any) => {
|
||||||
|
onUpdate({ ...supplierData, [field]: value });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
onNext();
|
||||||
|
};
|
||||||
|
|
||||||
|
const isValid = supplierData.name && supplierData.name.trim().length >= 1 && supplierData.supplier_type;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-start gap-4 pb-4 border-b border-[var(--border-secondary)]">
|
||||||
|
<div className="w-12 h-12 rounded-full bg-[var(--color-primary)]/10 flex items-center justify-center flex-shrink-0">
|
||||||
|
<Users className="w-6 h-6 text-[var(--color-primary)]" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-1">
|
||||||
|
Información Básica
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-[var(--text-secondary)]">
|
||||||
|
Configura los datos esenciales del proveedor
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Form Fields */}
|
||||||
|
<div className="space-y-5">
|
||||||
|
{/* Supplier Name */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
|
||||||
|
Nombre del Proveedor <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={supplierData.name || ''}
|
||||||
|
onChange={(e) => handleFieldChange('name', e.target.value)}
|
||||||
|
placeholder="Ej: Molinos La Victoria"
|
||||||
|
className="w-full px-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)]"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
{/* Supplier Type */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
|
||||||
|
Tipo de Proveedor <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={supplierData.supplier_type || ''}
|
||||||
|
onChange={(e) => handleFieldChange('supplier_type', e.target.value as SupplierType)}
|
||||||
|
className="w-full px-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)]"
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<option value="">Seleccionar...</option>
|
||||||
|
<option value="ingredients">Ingredientes</option>
|
||||||
|
<option value="packaging">Empaque</option>
|
||||||
|
<option value="equipment">Equipo</option>
|
||||||
|
<option value="utilities">Servicios Públicos</option>
|
||||||
|
<option value="services">Servicios</option>
|
||||||
|
<option value="logistics">Logística</option>
|
||||||
|
<option value="other">Otro</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Status */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
|
||||||
|
Estado <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={supplierData.status || 'pending_approval'}
|
||||||
|
onChange={(e) => handleFieldChange('status', e.target.value as SupplierStatus)}
|
||||||
|
className="w-full px-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)]"
|
||||||
|
>
|
||||||
|
<option value="pending_approval">Pendiente de Aprobación</option>
|
||||||
|
<option value="active">Activo</option>
|
||||||
|
<option value="inactive">Inactivo</option>
|
||||||
|
<option value="suspended">Suspendido</option>
|
||||||
|
<option value="terminated">Terminado</option>
|
||||||
|
<option value="evaluation">En Evaluación</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Contact Information */}
|
||||||
|
<div className="grid grid-cols-1 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
|
||||||
|
Persona de Contacto
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={supplierData.contact_person || ''}
|
||||||
|
onChange={(e) => handleFieldChange('contact_person', e.target.value)}
|
||||||
|
placeholder="Nombre del representante"
|
||||||
|
className="w-full px-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>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
|
||||||
|
Email
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
value={supplierData.email || ''}
|
||||||
|
onChange={(e) => handleFieldChange('email', e.target.value)}
|
||||||
|
placeholder="correo@ejemplo.com"
|
||||||
|
className="w-full px-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>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
|
||||||
|
Teléfono
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="tel"
|
||||||
|
value={supplierData.phone || ''}
|
||||||
|
onChange={(e) => handleFieldChange('phone', e.target.value)}
|
||||||
|
placeholder="+34 600 000 000"
|
||||||
|
className="w-full px-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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tax & Registration */}
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
|
||||||
|
NIF/CIF (Opcional)
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={supplierData.tax_id || ''}
|
||||||
|
onChange={(e) => handleFieldChange('tax_id', e.target.value)}
|
||||||
|
placeholder="Ej: B12345678"
|
||||||
|
className="w-full px-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>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
|
||||||
|
Número de Registro (Opcional)
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={supplierData.registration_number || ''}
|
||||||
|
onChange={(e) => handleFieldChange('registration_number', e.target.value)}
|
||||||
|
placeholder="Número de registro oficial"
|
||||||
|
className="w-full px-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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Validation Message */}
|
||||||
|
{!isValid && (
|
||||||
|
<div className="p-3 bg-[var(--color-warning)]/10 border border-[var(--color-warning)]/30 rounded-lg">
|
||||||
|
<p className="text-sm text-[var(--text-primary)]">
|
||||||
|
<span className="font-medium">⚠️ Campos requeridos:</span> Asegúrate de completar el nombre y tipo de proveedor.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Hidden submit button for form handling */}
|
||||||
|
<button type="submit" className="hidden" disabled={!isValid} />
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,198 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Truck } from 'lucide-react';
|
||||||
|
import type { WizardStepProps } from '../../../ui/WizardModal/WizardModal';
|
||||||
|
import type { SupplierCreate, PaymentTerms, DeliverySchedule } from '../../../../api/types/suppliers';
|
||||||
|
|
||||||
|
interface SupplierDeliveryStepProps extends WizardStepProps {
|
||||||
|
supplierData: Partial<SupplierCreate>;
|
||||||
|
onUpdate: (data: Partial<SupplierCreate>) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const SupplierDeliveryStep: React.FC<SupplierDeliveryStepProps> = ({
|
||||||
|
supplierData,
|
||||||
|
onUpdate,
|
||||||
|
onNext,
|
||||||
|
onBack
|
||||||
|
}) => {
|
||||||
|
const handleFieldChange = (field: keyof SupplierCreate, value: any) => {
|
||||||
|
onUpdate({ ...supplierData, [field]: value });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
onNext();
|
||||||
|
};
|
||||||
|
|
||||||
|
const isValid = supplierData.payment_terms;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-start gap-4 pb-4 border-b border-[var(--border-secondary)]">
|
||||||
|
<div className="w-12 h-12 rounded-full bg-[var(--color-primary)]/10 flex items-center justify-center flex-shrink-0">
|
||||||
|
<Truck className="w-6 h-6 text-[var(--color-primary)]" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-1">
|
||||||
|
Entrega y Términos
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-[var(--text-secondary)]">
|
||||||
|
Define términos de pago, entrega y ubicación
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Form Fields */}
|
||||||
|
<div className="space-y-5">
|
||||||
|
{/* Payment Terms & Lead Time */}
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
|
||||||
|
Términos de Pago <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={supplierData.payment_terms || ''}
|
||||||
|
onChange={(e) => handleFieldChange('payment_terms', e.target.value as PaymentTerms)}
|
||||||
|
className="w-full px-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)]"
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<option value="">Seleccionar...</option>
|
||||||
|
<option value="immediate">Inmediato</option>
|
||||||
|
<option value="net_7">Neto 7 días</option>
|
||||||
|
<option value="net_15">Neto 15 días</option>
|
||||||
|
<option value="net_30">Neto 30 días</option>
|
||||||
|
<option value="net_60">Neto 60 días</option>
|
||||||
|
<option value="net_90">Neto 90 días</option>
|
||||||
|
<option value="cod">Contra reembolso</option>
|
||||||
|
<option value="cia">Efectivo por adelantado</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
|
||||||
|
Tiempo de Entrega (días)
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={supplierData.lead_time_days || ''}
|
||||||
|
onChange={(e) => handleFieldChange('lead_time_days', e.target.value ? parseInt(e.target.value) : undefined)}
|
||||||
|
placeholder="Ej: 3"
|
||||||
|
min="0"
|
||||||
|
className="w-full px-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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Minimum Order & Delivery Schedule */}
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
|
||||||
|
Pedido Mínimo (€)
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={supplierData.minimum_order_value || ''}
|
||||||
|
onChange={(e) => handleFieldChange('minimum_order_value', e.target.value ? parseFloat(e.target.value) : undefined)}
|
||||||
|
placeholder="Ej: 100"
|
||||||
|
min="0"
|
||||||
|
step="0.01"
|
||||||
|
className="w-full px-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>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
|
||||||
|
Frecuencia de Entrega
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={supplierData.delivery_schedule || ''}
|
||||||
|
onChange={(e) => handleFieldChange('delivery_schedule', e.target.value as DeliverySchedule)}
|
||||||
|
className="w-full px-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)]"
|
||||||
|
>
|
||||||
|
<option value="">Seleccionar...</option>
|
||||||
|
<option value="daily">Diario</option>
|
||||||
|
<option value="weekly">Semanal</option>
|
||||||
|
<option value="biweekly">Quincenal</option>
|
||||||
|
<option value="monthly">Mensual</option>
|
||||||
|
<option value="on_demand">Bajo demanda</option>
|
||||||
|
<option value="custom">Personalizado</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Address Section */}
|
||||||
|
<div className="space-y-4 pt-4 border-t border-[var(--border-secondary)]">
|
||||||
|
<h4 className="text-sm font-semibold text-[var(--text-primary)]">
|
||||||
|
Dirección del Proveedor (Opcional)
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
|
||||||
|
Calle y Número
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={supplierData.address_street || ''}
|
||||||
|
onChange={(e) => handleFieldChange('address_street', e.target.value)}
|
||||||
|
placeholder="Ej: Calle Mayor, 123"
|
||||||
|
className="w-full px-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>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-3 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
|
||||||
|
Ciudad
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={supplierData.address_city || ''}
|
||||||
|
onChange={(e) => handleFieldChange('address_city', e.target.value)}
|
||||||
|
placeholder="Ej: Madrid"
|
||||||
|
className="w-full px-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>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
|
||||||
|
Código Postal
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={supplierData.address_postal_code || ''}
|
||||||
|
onChange={(e) => handleFieldChange('address_postal_code', e.target.value)}
|
||||||
|
placeholder="Ej: 28001"
|
||||||
|
className="w-full px-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>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
|
||||||
|
País
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={supplierData.address_country || ''}
|
||||||
|
onChange={(e) => handleFieldChange('address_country', e.target.value)}
|
||||||
|
placeholder="Ej: España"
|
||||||
|
className="w-full px-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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Validation Message */}
|
||||||
|
{!isValid && (
|
||||||
|
<div className="p-3 bg-[var(--color-warning)]/10 border border-[var(--color-warning)]/30 rounded-lg">
|
||||||
|
<p className="text-sm text-[var(--text-primary)]">
|
||||||
|
<span className="font-medium">⚠️ Campo requerido:</span> Selecciona los términos de pago.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Hidden submit button for form handling */}
|
||||||
|
<button type="submit" className="hidden" disabled={!isValid} />
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,225 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { FileText, CheckCircle2, Users, Truck, Award } from 'lucide-react';
|
||||||
|
import type { WizardStepProps } from '../../../ui/WizardModal/WizardModal';
|
||||||
|
import type { SupplierCreate } from '../../../../api/types/suppliers';
|
||||||
|
|
||||||
|
interface SupplierReviewStepProps extends WizardStepProps {
|
||||||
|
supplierData: Partial<SupplierCreate>;
|
||||||
|
onUpdate: (data: Partial<SupplierCreate>) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const SupplierReviewStep: React.FC<SupplierReviewStepProps> = ({
|
||||||
|
supplierData,
|
||||||
|
onUpdate,
|
||||||
|
onNext,
|
||||||
|
onBack
|
||||||
|
}) => {
|
||||||
|
const handleFieldChange = (field: keyof SupplierCreate, value: any) => {
|
||||||
|
onUpdate({ ...supplierData, [field]: value });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
onNext();
|
||||||
|
};
|
||||||
|
|
||||||
|
const getSupplierTypeLabel = (type?: string) => {
|
||||||
|
const labels: Record<string, string> = {
|
||||||
|
'ingredients': 'Ingredientes',
|
||||||
|
'packaging': 'Empaque',
|
||||||
|
'equipment': 'Equipo',
|
||||||
|
'utilities': 'Servicios Públicos',
|
||||||
|
'services': 'Servicios',
|
||||||
|
'logistics': 'Logística',
|
||||||
|
'other': 'Otro'
|
||||||
|
};
|
||||||
|
return labels[type || ''] || type || 'No especificado';
|
||||||
|
};
|
||||||
|
|
||||||
|
const getPaymentTermsLabel = (terms?: string) => {
|
||||||
|
const labels: Record<string, string> = {
|
||||||
|
'immediate': 'Inmediato',
|
||||||
|
'net_7': 'Neto 7 días',
|
||||||
|
'net_15': 'Neto 15 días',
|
||||||
|
'net_30': 'Neto 30 días',
|
||||||
|
'net_60': 'Neto 60 días',
|
||||||
|
'net_90': 'Neto 90 días',
|
||||||
|
'cod': 'Contra reembolso',
|
||||||
|
'cia': 'Efectivo por adelantado'
|
||||||
|
};
|
||||||
|
return labels[terms || ''] || terms || 'No especificado';
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-start gap-4 pb-4 border-b border-[var(--border-secondary)]">
|
||||||
|
<div className="w-12 h-12 rounded-full bg-[var(--color-primary)]/10 flex items-center justify-center flex-shrink-0">
|
||||||
|
<FileText className="w-6 h-6 text-[var(--color-primary)]" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-1">
|
||||||
|
Detalles Adicionales y Revisión
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-[var(--text-secondary)]">
|
||||||
|
Completa información adicional y revisa el proveedor
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Supplier Summary */}
|
||||||
|
<div className="p-4 bg-gradient-to-r from-[var(--color-primary)]/5 to-[var(--color-primary)]/10 border border-[var(--color-primary)]/20 rounded-lg">
|
||||||
|
<h4 className="text-sm font-semibold text-[var(--text-primary)] mb-3 flex items-center gap-2">
|
||||||
|
<CheckCircle2 className="w-4 h-4 text-[var(--color-success)]" />
|
||||||
|
Resumen del Proveedor
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
{/* Basic Info */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex items-start gap-2">
|
||||||
|
<Users className="w-4 h-4 text-[var(--text-secondary)] mt-0.5 flex-shrink-0" />
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-[var(--text-tertiary)]">Proveedor</p>
|
||||||
|
<p className="text-sm font-medium text-[var(--text-primary)]">{supplierData.name || 'Sin nombre'}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-start gap-2">
|
||||||
|
<Users className="w-4 h-4 text-[var(--text-secondary)] mt-0.5 flex-shrink-0" />
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-[var(--text-tertiary)]">Tipo</p>
|
||||||
|
<p className="text-sm font-medium text-[var(--text-primary)]">
|
||||||
|
{getSupplierTypeLabel(supplierData.supplier_type)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{supplierData.contact_person && (
|
||||||
|
<div className="flex items-start gap-2">
|
||||||
|
<Users className="w-4 h-4 text-[var(--text-secondary)] mt-0.5 flex-shrink-0" />
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-[var(--text-tertiary)]">Contacto</p>
|
||||||
|
<p className="text-sm font-medium text-[var(--text-primary)]">{supplierData.contact_person}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Delivery Info */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex items-start gap-2">
|
||||||
|
<Truck className="w-4 h-4 text-[var(--text-secondary)] mt-0.5 flex-shrink-0" />
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-[var(--text-tertiary)]">Términos de Pago</p>
|
||||||
|
<p className="text-sm font-medium text-[var(--text-primary)]">
|
||||||
|
{getPaymentTermsLabel(supplierData.payment_terms)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{supplierData.lead_time_days && (
|
||||||
|
<div className="flex items-start gap-2">
|
||||||
|
<Truck className="w-4 h-4 text-[var(--text-secondary)] mt-0.5 flex-shrink-0" />
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-[var(--text-tertiary)]">Tiempo de Entrega</p>
|
||||||
|
<p className="text-sm font-medium text-[var(--text-primary)]">{supplierData.lead_time_days} días</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{supplierData.minimum_order_value && (
|
||||||
|
<div className="flex items-start gap-2">
|
||||||
|
<Truck className="w-4 h-4 text-[var(--text-secondary)] mt-0.5 flex-shrink-0" />
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-[var(--text-tertiary)]">Pedido Mínimo</p>
|
||||||
|
<p className="text-sm font-medium text-[var(--text-primary)]">€{supplierData.minimum_order_value}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Additional Details */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h4 className="text-sm font-semibold text-[var(--text-primary)] flex items-center gap-2">
|
||||||
|
<Award className="w-4 h-4" />
|
||||||
|
Información Adicional (Opcional)
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
{/* Certifications */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
|
||||||
|
Certificaciones
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={
|
||||||
|
supplierData.certifications
|
||||||
|
? typeof supplierData.certifications === 'string'
|
||||||
|
? supplierData.certifications
|
||||||
|
: JSON.stringify(supplierData.certifications)
|
||||||
|
: ''
|
||||||
|
}
|
||||||
|
onChange={(e) => {
|
||||||
|
const value = e.target.value;
|
||||||
|
handleFieldChange('certifications', value ? { certs: value.split(',').map(c => c.trim()) } : null);
|
||||||
|
}}
|
||||||
|
placeholder="Ej: ISO 9001, HACCP, Orgánico"
|
||||||
|
className="w-full px-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)]"
|
||||||
|
/>
|
||||||
|
<p className="mt-1 text-xs text-[var(--text-tertiary)]">
|
||||||
|
Separar con comas
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Sustainability Practices */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
|
||||||
|
Prácticas de Sostenibilidad
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
value={
|
||||||
|
supplierData.sustainability_practices
|
||||||
|
? typeof supplierData.sustainability_practices === 'string'
|
||||||
|
? supplierData.sustainability_practices
|
||||||
|
: JSON.stringify(supplierData.sustainability_practices)
|
||||||
|
: ''
|
||||||
|
}
|
||||||
|
onChange={(e) => {
|
||||||
|
const value = e.target.value;
|
||||||
|
handleFieldChange('sustainability_practices', value ? { practices: value } : null);
|
||||||
|
}}
|
||||||
|
placeholder="Describe las prácticas sostenibles del proveedor..."
|
||||||
|
rows={2}
|
||||||
|
className="w-full px-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)] resize-none"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Notes */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-[var(--text-primary)] mb-1.5">
|
||||||
|
Notas
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
value={supplierData.notes || ''}
|
||||||
|
onChange={(e) => handleFieldChange('notes', e.target.value)}
|
||||||
|
placeholder="Notas adicionales sobre el proveedor..."
|
||||||
|
rows={3}
|
||||||
|
className="w-full px-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)] resize-none"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Ready to Save Message */}
|
||||||
|
<div className="p-4 bg-[var(--color-success)]/10 border border-[var(--color-success)]/30 rounded-lg">
|
||||||
|
<p className="text-sm text-[var(--text-primary)] flex items-center gap-2">
|
||||||
|
<CheckCircle2 className="w-4 h-4 text-[var(--color-success)]" />
|
||||||
|
<span>
|
||||||
|
<span className="font-medium">¡Listo para guardar!</span> Revisa la información y haz clic en "Completar" para crear el proveedor.
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Hidden submit button for form handling */}
|
||||||
|
<button type="submit" className="hidden" />
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,155 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Users } from 'lucide-react';
|
||||||
|
import { WizardModal, WizardStep } from '../../../ui/WizardModal/WizardModal';
|
||||||
|
import { SupplierBasicStep } from './SupplierBasicStep';
|
||||||
|
import { SupplierDeliveryStep } from './SupplierDeliveryStep';
|
||||||
|
import { SupplierReviewStep } from './SupplierReviewStep';
|
||||||
|
import type { SupplierCreate, SupplierType, SupplierStatus, PaymentTerms } from '../../../../api/types/suppliers';
|
||||||
|
|
||||||
|
interface SupplierWizardModalProps {
|
||||||
|
isOpen: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
onCreateSupplier: (supplierData: SupplierCreate) => Promise<void>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const SupplierWizardModal: React.FC<SupplierWizardModalProps> = ({
|
||||||
|
isOpen,
|
||||||
|
onClose,
|
||||||
|
onCreateSupplier
|
||||||
|
}) => {
|
||||||
|
// Supplier state
|
||||||
|
const [supplierData, setSupplierData] = useState<Partial<SupplierCreate>>({
|
||||||
|
status: 'pending_approval' as SupplierStatus,
|
||||||
|
payment_terms: 'net_30' as PaymentTerms,
|
||||||
|
quality_rating: 0,
|
||||||
|
delivery_rating: 0,
|
||||||
|
pricing_rating: 0,
|
||||||
|
overall_rating: 0
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleUpdate = (data: Partial<SupplierCreate>) => {
|
||||||
|
setSupplierData(data);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleComplete = async () => {
|
||||||
|
try {
|
||||||
|
// Generate supplier code if not provided
|
||||||
|
const supplierCode = supplierData.supplier_code ||
|
||||||
|
(supplierData.name?.substring(0, 3).toUpperCase() || 'SUP') +
|
||||||
|
String(Date.now()).slice(-3);
|
||||||
|
|
||||||
|
// Build final supplier data
|
||||||
|
const finalSupplierData: SupplierCreate = {
|
||||||
|
name: supplierData.name!,
|
||||||
|
supplier_code: supplierCode,
|
||||||
|
tax_id: supplierData.tax_id || null,
|
||||||
|
registration_number: supplierData.registration_number || null,
|
||||||
|
supplier_type: supplierData.supplier_type!,
|
||||||
|
status: supplierData.status || ('pending_approval' as SupplierStatus),
|
||||||
|
contact_person: supplierData.contact_person || null,
|
||||||
|
email: supplierData.email || null,
|
||||||
|
phone: supplierData.phone || null,
|
||||||
|
website: supplierData.website || null,
|
||||||
|
address_street: supplierData.address_street || null,
|
||||||
|
address_city: supplierData.address_city || null,
|
||||||
|
address_state: supplierData.address_state || null,
|
||||||
|
address_postal_code: supplierData.address_postal_code || null,
|
||||||
|
address_country: supplierData.address_country || null,
|
||||||
|
payment_terms: supplierData.payment_terms!,
|
||||||
|
credit_limit: supplierData.credit_limit || null,
|
||||||
|
currency: supplierData.currency || 'EUR',
|
||||||
|
tax_rate: supplierData.tax_rate || null,
|
||||||
|
lead_time_days: supplierData.lead_time_days || null,
|
||||||
|
minimum_order_value: supplierData.minimum_order_value || null,
|
||||||
|
delivery_schedule: supplierData.delivery_schedule || null,
|
||||||
|
preferred_delivery_method: supplierData.preferred_delivery_method || null,
|
||||||
|
bank_account: supplierData.bank_account || null,
|
||||||
|
bank_name: supplierData.bank_name || null,
|
||||||
|
swift_code: supplierData.swift_code || null,
|
||||||
|
certifications: supplierData.certifications || null,
|
||||||
|
quality_rating: supplierData.quality_rating || 0,
|
||||||
|
delivery_rating: supplierData.delivery_rating || 0,
|
||||||
|
pricing_rating: supplierData.pricing_rating || 0,
|
||||||
|
overall_rating: supplierData.overall_rating || 0,
|
||||||
|
sustainability_practices: supplierData.sustainability_practices || null,
|
||||||
|
insurance_info: supplierData.insurance_info || null,
|
||||||
|
notes: supplierData.notes || null,
|
||||||
|
business_hours: supplierData.business_hours || null,
|
||||||
|
specializations: supplierData.specializations || null
|
||||||
|
};
|
||||||
|
|
||||||
|
await onCreateSupplier(finalSupplierData);
|
||||||
|
|
||||||
|
// Reset state
|
||||||
|
setSupplierData({
|
||||||
|
status: 'pending_approval' as SupplierStatus,
|
||||||
|
payment_terms: 'net_30' as PaymentTerms,
|
||||||
|
quality_rating: 0,
|
||||||
|
delivery_rating: 0,
|
||||||
|
pricing_rating: 0,
|
||||||
|
overall_rating: 0
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error creating supplier:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Define wizard steps
|
||||||
|
const steps: WizardStep[] = [
|
||||||
|
{
|
||||||
|
id: 'basic',
|
||||||
|
title: 'Información Básica',
|
||||||
|
description: 'Datos esenciales del proveedor',
|
||||||
|
component: (props) => (
|
||||||
|
<SupplierBasicStep
|
||||||
|
{...props}
|
||||||
|
supplierData={supplierData}
|
||||||
|
onUpdate={handleUpdate}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
validate: () => {
|
||||||
|
return !!(supplierData.name && supplierData.name.trim().length >= 1 && supplierData.supplier_type);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'delivery',
|
||||||
|
title: 'Entrega y Términos',
|
||||||
|
description: 'Términos de pago y entrega',
|
||||||
|
component: (props) => (
|
||||||
|
<SupplierDeliveryStep
|
||||||
|
{...props}
|
||||||
|
supplierData={supplierData}
|
||||||
|
onUpdate={handleUpdate}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
validate: () => {
|
||||||
|
return !!supplierData.payment_terms;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'review',
|
||||||
|
title: 'Revisión',
|
||||||
|
description: 'Detalles adicionales y revisión',
|
||||||
|
component: (props) => (
|
||||||
|
<SupplierReviewStep
|
||||||
|
{...props}
|
||||||
|
supplierData={supplierData}
|
||||||
|
onUpdate={handleUpdate}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<WizardModal
|
||||||
|
isOpen={isOpen}
|
||||||
|
onClose={onClose}
|
||||||
|
onComplete={handleComplete}
|
||||||
|
title="Nuevo Proveedor"
|
||||||
|
steps={steps}
|
||||||
|
icon={<Users className="w-6 h-6" />}
|
||||||
|
size="xl"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,4 @@
|
|||||||
|
export { SupplierWizardModal } from './SupplierWizardModal';
|
||||||
|
export { SupplierBasicStep } from './SupplierBasicStep';
|
||||||
|
export { SupplierDeliveryStep } from './SupplierDeliveryStep';
|
||||||
|
export { SupplierReviewStep } from './SupplierReviewStep';
|
||||||
271
frontend/src/components/ui/WizardModal/WizardModal.tsx
Normal file
271
frontend/src/components/ui/WizardModal/WizardModal.tsx
Normal file
@@ -0,0 +1,271 @@
|
|||||||
|
import React, { useState, useCallback } from 'react';
|
||||||
|
import { X, ChevronLeft, ChevronRight } from 'lucide-react';
|
||||||
|
|
||||||
|
export interface WizardStep {
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
description?: string;
|
||||||
|
component: React.ComponentType<WizardStepProps>;
|
||||||
|
isOptional?: boolean;
|
||||||
|
validate?: () => Promise<boolean> | boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface WizardStepProps {
|
||||||
|
onNext: () => void;
|
||||||
|
onBack: () => void;
|
||||||
|
onComplete: () => void;
|
||||||
|
isFirstStep: boolean;
|
||||||
|
isLastStep: boolean;
|
||||||
|
currentStepIndex: number;
|
||||||
|
totalSteps: number;
|
||||||
|
goToStep: (index: number) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface WizardModalProps {
|
||||||
|
isOpen: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
onComplete: (data?: any) => void;
|
||||||
|
title: string;
|
||||||
|
steps: WizardStep[];
|
||||||
|
icon?: React.ReactNode;
|
||||||
|
size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
||||||
|
}
|
||||||
|
|
||||||
|
export const WizardModal: React.FC<WizardModalProps> = ({
|
||||||
|
isOpen,
|
||||||
|
onClose,
|
||||||
|
onComplete,
|
||||||
|
title,
|
||||||
|
steps,
|
||||||
|
icon,
|
||||||
|
size = 'xl'
|
||||||
|
}) => {
|
||||||
|
const [currentStepIndex, setCurrentStepIndex] = useState(0);
|
||||||
|
const [isValidating, setIsValidating] = useState(false);
|
||||||
|
|
||||||
|
const currentStep = steps[currentStepIndex];
|
||||||
|
const isFirstStep = currentStepIndex === 0;
|
||||||
|
const isLastStep = currentStepIndex === steps.length - 1;
|
||||||
|
|
||||||
|
const sizeClasses = {
|
||||||
|
sm: 'max-w-md',
|
||||||
|
md: 'max-w-2xl',
|
||||||
|
lg: 'max-w-4xl',
|
||||||
|
xl: 'max-w-5xl',
|
||||||
|
'2xl': 'max-w-7xl'
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleNext = useCallback(async () => {
|
||||||
|
// Validate current step if validator exists
|
||||||
|
if (currentStep.validate) {
|
||||||
|
setIsValidating(true);
|
||||||
|
try {
|
||||||
|
const isValid = await currentStep.validate();
|
||||||
|
if (!isValid) {
|
||||||
|
setIsValidating(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Validation error:', error);
|
||||||
|
setIsValidating(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setIsValidating(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isLastStep) {
|
||||||
|
handleComplete();
|
||||||
|
} else {
|
||||||
|
setCurrentStepIndex(prev => Math.min(prev + 1, steps.length - 1));
|
||||||
|
}
|
||||||
|
}, [currentStep, isLastStep, steps.length]);
|
||||||
|
|
||||||
|
const handleBack = useCallback(() => {
|
||||||
|
setCurrentStepIndex(prev => Math.max(prev - 1, 0));
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleComplete = useCallback(() => {
|
||||||
|
onComplete();
|
||||||
|
handleClose();
|
||||||
|
}, [onComplete]);
|
||||||
|
|
||||||
|
const handleClose = useCallback(() => {
|
||||||
|
setCurrentStepIndex(0);
|
||||||
|
onClose();
|
||||||
|
}, [onClose]);
|
||||||
|
|
||||||
|
const goToStep = useCallback((index: number) => {
|
||||||
|
if (index >= 0 && index < steps.length) {
|
||||||
|
setCurrentStepIndex(index);
|
||||||
|
}
|
||||||
|
}, [steps.length]);
|
||||||
|
|
||||||
|
if (!isOpen) return null;
|
||||||
|
|
||||||
|
const StepComponent = currentStep.component;
|
||||||
|
const progressPercentage = ((currentStepIndex + 1) / steps.length) * 100;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* Backdrop */}
|
||||||
|
<div
|
||||||
|
className="fixed inset-0 bg-black/50 z-50 animate-fadeIn"
|
||||||
|
onClick={handleClose}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Modal */}
|
||||||
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 pointer-events-none">
|
||||||
|
<div
|
||||||
|
className={`bg-[var(--bg-primary)] rounded-xl shadow-2xl ${sizeClasses[size]} w-full max-h-[90vh] overflow-hidden pointer-events-auto animate-slideUp`}
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
>
|
||||||
|
{/* Header */}
|
||||||
|
<div className="sticky top-0 z-10 bg-[var(--bg-primary)] border-b border-[var(--border-secondary)]">
|
||||||
|
{/* Title Bar */}
|
||||||
|
<div className="flex items-center justify-between p-6 pb-4">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
{icon && (
|
||||||
|
<div className="w-10 h-10 rounded-full bg-[var(--color-primary)]/10 flex items-center justify-center text-[var(--color-primary)]">
|
||||||
|
{icon}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div>
|
||||||
|
<h2 className="text-xl font-semibold text-[var(--text-primary)]">
|
||||||
|
{title}
|
||||||
|
</h2>
|
||||||
|
<p className="text-sm text-[var(--text-secondary)] mt-0.5">
|
||||||
|
{currentStep.description || `Step ${currentStepIndex + 1} of ${steps.length}`}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={handleClose}
|
||||||
|
className="p-2 text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-secondary)] rounded-lg transition-colors"
|
||||||
|
>
|
||||||
|
<X className="w-5 h-5" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Progress Bar */}
|
||||||
|
<div className="px-6 pb-4">
|
||||||
|
<div className="flex items-center gap-2 mb-2">
|
||||||
|
{steps.map((step, index) => (
|
||||||
|
<React.Fragment key={step.id}>
|
||||||
|
<button
|
||||||
|
onClick={() => index < currentStepIndex && goToStep(index)}
|
||||||
|
disabled={index > currentStepIndex}
|
||||||
|
className={`flex-1 h-2 rounded-full transition-all duration-300 ${
|
||||||
|
index < currentStepIndex
|
||||||
|
? 'bg-[var(--color-success)] cursor-pointer hover:bg-[var(--color-success)]/80'
|
||||||
|
: index === currentStepIndex
|
||||||
|
? 'bg-[var(--color-primary)]'
|
||||||
|
: 'bg-[var(--bg-tertiary)] cursor-not-allowed'
|
||||||
|
}`}
|
||||||
|
title={step.title}
|
||||||
|
/>
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between text-xs text-[var(--text-secondary)]">
|
||||||
|
<span className="font-medium">{currentStep.title}</span>
|
||||||
|
<span>{currentStepIndex + 1} / {steps.length}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Step Content */}
|
||||||
|
<div className="p-6 overflow-y-auto" style={{ maxHeight: 'calc(90vh - 220px)' }}>
|
||||||
|
<StepComponent
|
||||||
|
onNext={handleNext}
|
||||||
|
onBack={handleBack}
|
||||||
|
onComplete={handleComplete}
|
||||||
|
isFirstStep={isFirstStep}
|
||||||
|
isLastStep={isLastStep}
|
||||||
|
currentStepIndex={currentStepIndex}
|
||||||
|
totalSteps={steps.length}
|
||||||
|
goToStep={goToStep}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Footer Navigation */}
|
||||||
|
<div className="sticky bottom-0 border-t border-[var(--border-secondary)] bg-[var(--bg-secondary)]/50 backdrop-blur-sm px-6 py-4">
|
||||||
|
<div className="flex items-center justify-between gap-3">
|
||||||
|
{/* Back Button */}
|
||||||
|
{!isFirstStep && (
|
||||||
|
<button
|
||||||
|
onClick={handleBack}
|
||||||
|
disabled={isValidating}
|
||||||
|
className="px-4 py-2.5 text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-primary)] rounded-lg transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center gap-2"
|
||||||
|
>
|
||||||
|
<ChevronLeft className="w-4 h-4" />
|
||||||
|
Back
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="flex-1" />
|
||||||
|
|
||||||
|
{/* Skip Button (for optional steps) */}
|
||||||
|
{currentStep.isOptional && !isLastStep && (
|
||||||
|
<button
|
||||||
|
onClick={() => setCurrentStepIndex(prev => prev + 1)}
|
||||||
|
disabled={isValidating}
|
||||||
|
className="px-4 py-2.5 text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-primary)] rounded-lg transition-colors font-medium disabled:opacity-50"
|
||||||
|
>
|
||||||
|
Skip This Step
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Next/Complete Button */}
|
||||||
|
<button
|
||||||
|
onClick={handleNext}
|
||||||
|
disabled={isValidating}
|
||||||
|
className="px-6 py-2.5 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary-dark)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium inline-flex items-center gap-2 min-w-[140px] justify-center"
|
||||||
|
>
|
||||||
|
{isValidating ? (
|
||||||
|
<>
|
||||||
|
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
|
||||||
|
Validating...
|
||||||
|
</>
|
||||||
|
) : isLastStep ? (
|
||||||
|
<>
|
||||||
|
Complete
|
||||||
|
<ChevronRight className="w-4 h-4" />
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
Next
|
||||||
|
<ChevronRight className="w-4 h-4" />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Animation Styles */}
|
||||||
|
<style>{`
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; }
|
||||||
|
to { opacity: 1; }
|
||||||
|
}
|
||||||
|
@keyframes slideUp {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.animate-fadeIn {
|
||||||
|
animation: fadeIn 0.2s ease-out;
|
||||||
|
}
|
||||||
|
.animate-slideUp {
|
||||||
|
animation: slideUp 0.3s ease-out;
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
2
frontend/src/components/ui/WizardModal/index.ts
Normal file
2
frontend/src/components/ui/WizardModal/index.ts
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
export { WizardModal } from './WizardModal';
|
||||||
|
export type { WizardStep, WizardStepProps } from './WizardModal';
|
||||||
Reference in New Issue
Block a user