From 877e0b6b477241fab4eff072be53ab53f4c9d357 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 6 Nov 2025 18:01:11 +0000
Subject: [PATCH] Implement Phase 2: Recipe & Supplier wizard modals
 (JTBD-driven UX)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../RecipeWizard/RecipeIngredientsStep.tsx    | 212 +++++++++++++
 .../RecipeWizard/RecipeProductStep.tsx        | 187 +++++++++++
 .../RecipeWizard/RecipeProductionStep.tsx     | 299 ++++++++++++++++++
 .../recipes/RecipeWizard/RecipeReviewStep.tsx | 234 ++++++++++++++
 .../RecipeWizard/RecipeWizardModal.tsx        | 297 +++++++++++++++++
 .../domain/recipes/RecipeWizard/index.ts      |   5 +
 .../SupplierWizard/SupplierBasicStep.tsx      | 191 +++++++++++
 .../SupplierWizard/SupplierDeliveryStep.tsx   | 198 ++++++++++++
 .../SupplierWizard/SupplierReviewStep.tsx     | 225 +++++++++++++
 .../SupplierWizard/SupplierWizardModal.tsx    | 155 +++++++++
 .../domain/suppliers/SupplierWizard/index.ts  |   4 +
 .../components/ui/WizardModal/WizardModal.tsx | 271 ++++++++++++++++
 .../src/components/ui/WizardModal/index.ts    |   2 +
 13 files changed, 2280 insertions(+)
 create mode 100644 frontend/src/components/domain/recipes/RecipeWizard/RecipeIngredientsStep.tsx
 create mode 100644 frontend/src/components/domain/recipes/RecipeWizard/RecipeProductStep.tsx
 create mode 100644 frontend/src/components/domain/recipes/RecipeWizard/RecipeProductionStep.tsx
 create mode 100644 frontend/src/components/domain/recipes/RecipeWizard/RecipeReviewStep.tsx
 create mode 100644 frontend/src/components/domain/recipes/RecipeWizard/RecipeWizardModal.tsx
 create mode 100644 frontend/src/components/domain/recipes/RecipeWizard/index.ts
 create mode 100644 frontend/src/components/domain/suppliers/SupplierWizard/SupplierBasicStep.tsx
 create mode 100644 frontend/src/components/domain/suppliers/SupplierWizard/SupplierDeliveryStep.tsx
 create mode 100644 frontend/src/components/domain/suppliers/SupplierWizard/SupplierReviewStep.tsx
 create mode 100644 frontend/src/components/domain/suppliers/SupplierWizard/SupplierWizardModal.tsx
 create mode 100644 frontend/src/components/domain/suppliers/SupplierWizard/index.ts
 create mode 100644 frontend/src/components/ui/WizardModal/WizardModal.tsx
 create mode 100644 frontend/src/components/ui/WizardModal/index.ts

diff --git a/frontend/src/components/domain/recipes/RecipeWizard/RecipeIngredientsStep.tsx b/frontend/src/components/domain/recipes/RecipeWizard/RecipeIngredientsStep.tsx
new file mode 100644
index 00000000..3ad1d37d
--- /dev/null
+++ b/frontend/src/components/domain/recipes/RecipeWizard/RecipeIngredientsStep.tsx
@@ -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>
+  );
+};
diff --git a/frontend/src/components/domain/recipes/RecipeWizard/RecipeProductStep.tsx b/frontend/src/components/domain/recipes/RecipeWizard/RecipeProductStep.tsx
new file mode 100644
index 00000000..e8d2ff8e
--- /dev/null
+++ b/frontend/src/components/domain/recipes/RecipeWizard/RecipeProductStep.tsx
@@ -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>
+  );
+};
diff --git a/frontend/src/components/domain/recipes/RecipeWizard/RecipeProductionStep.tsx b/frontend/src/components/domain/recipes/RecipeWizard/RecipeProductionStep.tsx
new file mode 100644
index 00000000..f944f524
--- /dev/null
+++ b/frontend/src/components/domain/recipes/RecipeWizard/RecipeProductionStep.tsx
@@ -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>
+  );
+};
diff --git a/frontend/src/components/domain/recipes/RecipeWizard/RecipeReviewStep.tsx b/frontend/src/components/domain/recipes/RecipeWizard/RecipeReviewStep.tsx
new file mode 100644
index 00000000..252d3097
--- /dev/null
+++ b/frontend/src/components/domain/recipes/RecipeWizard/RecipeReviewStep.tsx
@@ -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>
+  );
+};
diff --git a/frontend/src/components/domain/recipes/RecipeWizard/RecipeWizardModal.tsx b/frontend/src/components/domain/recipes/RecipeWizard/RecipeWizardModal.tsx
new file mode 100644
index 00000000..1276bfca
--- /dev/null
+++ b/frontend/src/components/domain/recipes/RecipeWizard/RecipeWizardModal.tsx
@@ -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"
+    />
+  );
+};
diff --git a/frontend/src/components/domain/recipes/RecipeWizard/index.ts b/frontend/src/components/domain/recipes/RecipeWizard/index.ts
new file mode 100644
index 00000000..00496014
--- /dev/null
+++ b/frontend/src/components/domain/recipes/RecipeWizard/index.ts
@@ -0,0 +1,5 @@
+export { RecipeWizardModal } from './RecipeWizardModal';
+export { RecipeProductStep } from './RecipeProductStep';
+export { RecipeIngredientsStep } from './RecipeIngredientsStep';
+export { RecipeProductionStep } from './RecipeProductionStep';
+export { RecipeReviewStep } from './RecipeReviewStep';
diff --git a/frontend/src/components/domain/suppliers/SupplierWizard/SupplierBasicStep.tsx b/frontend/src/components/domain/suppliers/SupplierWizard/SupplierBasicStep.tsx
new file mode 100644
index 00000000..bece8d67
--- /dev/null
+++ b/frontend/src/components/domain/suppliers/SupplierWizard/SupplierBasicStep.tsx
@@ -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>
+  );
+};
diff --git a/frontend/src/components/domain/suppliers/SupplierWizard/SupplierDeliveryStep.tsx b/frontend/src/components/domain/suppliers/SupplierWizard/SupplierDeliveryStep.tsx
new file mode 100644
index 00000000..6fa4dc18
--- /dev/null
+++ b/frontend/src/components/domain/suppliers/SupplierWizard/SupplierDeliveryStep.tsx
@@ -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>
+  );
+};
diff --git a/frontend/src/components/domain/suppliers/SupplierWizard/SupplierReviewStep.tsx b/frontend/src/components/domain/suppliers/SupplierWizard/SupplierReviewStep.tsx
new file mode 100644
index 00000000..e17fe1d5
--- /dev/null
+++ b/frontend/src/components/domain/suppliers/SupplierWizard/SupplierReviewStep.tsx
@@ -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>
+  );
+};
diff --git a/frontend/src/components/domain/suppliers/SupplierWizard/SupplierWizardModal.tsx b/frontend/src/components/domain/suppliers/SupplierWizard/SupplierWizardModal.tsx
new file mode 100644
index 00000000..22b48bcd
--- /dev/null
+++ b/frontend/src/components/domain/suppliers/SupplierWizard/SupplierWizardModal.tsx
@@ -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"
+    />
+  );
+};
diff --git a/frontend/src/components/domain/suppliers/SupplierWizard/index.ts b/frontend/src/components/domain/suppliers/SupplierWizard/index.ts
new file mode 100644
index 00000000..a2c2f10b
--- /dev/null
+++ b/frontend/src/components/domain/suppliers/SupplierWizard/index.ts
@@ -0,0 +1,4 @@
+export { SupplierWizardModal } from './SupplierWizardModal';
+export { SupplierBasicStep } from './SupplierBasicStep';
+export { SupplierDeliveryStep } from './SupplierDeliveryStep';
+export { SupplierReviewStep } from './SupplierReviewStep';
diff --git a/frontend/src/components/ui/WizardModal/WizardModal.tsx b/frontend/src/components/ui/WizardModal/WizardModal.tsx
new file mode 100644
index 00000000..66874d6d
--- /dev/null
+++ b/frontend/src/components/ui/WizardModal/WizardModal.tsx
@@ -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>
+    </>
+  );
+};
diff --git a/frontend/src/components/ui/WizardModal/index.ts b/frontend/src/components/ui/WizardModal/index.ts
new file mode 100644
index 00000000..92e4b64e
--- /dev/null
+++ b/frontend/src/components/ui/WizardModal/index.ts
@@ -0,0 +1,2 @@
+export { WizardModal } from './WizardModal';
+export type { WizardStep, WizardStepProps } from './WizardModal';