From e7c26b3cfc813cf9b166fb326fee616c6ab2ac6e Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 6 Nov 2025 21:45:38 +0000
Subject: [PATCH] Fix inline edit form positioning in AI inventory
 configuration
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**Issue:** When clicking "Edit" on an ingredient in the list, the edit form
appeared at the bottom of the page after all ingredients, forcing users to
scroll down. This was poor UX especially with 10+ ingredients.

**Solution:** Moved edit form to appear inline directly below the ingredient
being edited.

**Changes Made:**

1. **Inline Edit Form Display**
   - Edit form now renders inside the ingredient map loop
   - Shows conditionally when `editingId === item.id`
   - Appears immediately below the specific ingredient being edited
   - Location: frontend/src/components/domain/onboarding/steps/UploadSalesDataStep.tsx:834-1029

2. **Hide Ingredient Card While Editing**
   - Ingredient card (with stock lots) hidden when that ingredient is being edited
   - Condition: `{editingId !== item.id && (...)}`
   - Prevents duplication of information
   - Location: lines 629-832

3. **Separate Add Manually Form**
   - Bottom form now only shows when adding new ingredient (not editing)
   - Condition changed from `{isAdding ? (` to `{isAdding && !editingId ? (`
   - Title simplified to "Agregar Ingrediente Manualmente"
   - Button label simplified to "Agregar a Lista"
   - Location: lines 1042-1237

**User Experience:**
Before: Edit button → scroll to bottom → edit form → scroll back up
After: Edit button → form appears right there → edit → save → continues

**Structure:**
```jsx
{inventoryItems.map((item) => (
  <div key={item.id}>
    {editingId !== item.id && (
      <>
        {/* Ingredient card */}
        {/* Stock lots section */}
      </>
    )}

    {editingId === item.id && (
      {/* Inline edit form */}
    )}
  </div>
))}

{isAdding && !editingId && (
  {/* Add manually form at bottom */}
)}
```

**Build Status:** ✓ Successful in 20.61s
---
 .../onboarding/steps/UploadSalesDataStep.tsx  | 217 +++++++++++++++++-
 1 file changed, 208 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/domain/onboarding/steps/UploadSalesDataStep.tsx b/frontend/src/components/domain/onboarding/steps/UploadSalesDataStep.tsx
index 814e0a51..ffbd3748 100644
--- a/frontend/src/components/domain/onboarding/steps/UploadSalesDataStep.tsx
+++ b/frontend/src/components/domain/onboarding/steps/UploadSalesDataStep.tsx
@@ -624,11 +624,11 @@ export const UploadSalesDataStep: React.FC<UploadSalesDataStepProps> = ({
           {inventoryItems.length > 0 ? (
             <div className="space-y-3">
               {inventoryItems.map((item) => (
-                <div
-                  key={item.id}
-                  className="p-4 bg-[var(--bg-secondary)] border border-[var(--border-secondary)] rounded-lg"
-                >
-                  <div className="flex items-start justify-between">
+                <div key={item.id}>
+                  {/* Show ingredient card only if NOT editing this item */}
+                  {editingId !== item.id && (
+                    <div className="p-4 bg-[var(--bg-secondary)] border border-[var(--border-secondary)] rounded-lg">
+                      <div className="flex items-start justify-between">
                     <div className="flex-1">
                       <div className="flex items-center gap-2">
                         <h5 className="font-medium text-[var(--text-primary)]">
@@ -828,6 +828,205 @@ export const UploadSalesDataStep: React.FC<UploadSalesDataStepProps> = ({
                       </div>
                     );
                   })()}
+                    </div>
+                  )}
+
+                  {/* Inline Edit Form - show only when editing this specific ingredient */}
+                  {editingId === item.id && (
+                    <div className="border-2 border-[var(--color-primary)] rounded-lg p-4 bg-gradient-to-br from-[var(--color-primary)]/5 to-transparent">
+                      <h4 className="font-semibold text-[var(--text-primary)] mb-4">
+                        Editar Ingrediente
+                      </h4>
+                      <form onSubmit={handleSubmitForm} className="space-y-4">
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                          <div>
+                            <label className="block text-sm font-medium text-[var(--text-primary)] mb-1">
+                              Nombre *
+                            </label>
+                            <input
+                              type="text"
+                              value={formData.name}
+                              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                              className="w-full px-3 py-2 bg-[var(--bg-primary)] border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] text-[var(--text-primary)]"
+                              placeholder="Ej: Harina de trigo"
+                            />
+                            {formErrors.name && (
+                              <p className="text-xs text-[var(--color-error)] mt-1">{formErrors.name}</p>
+                            )}
+                          </div>
+
+                          <div>
+                            <label className="block text-sm font-medium text-[var(--text-primary)] mb-1">
+                              Categoría *
+                            </label>
+                            <select
+                              value={formData.category}
+                              onChange={(e) => setFormData({ ...formData, category: e.target.value })}
+                              className="w-full px-3 py-2 bg-[var(--bg-primary)] border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] text-[var(--text-primary)]"
+                            >
+                              <option value="">Seleccionar...</option>
+                              {categoryOptions.map(cat => (
+                                <option key={cat} value={cat}>{cat}</option>
+                              ))}
+                            </select>
+                            {formErrors.category && (
+                              <p className="text-xs text-[var(--color-error)] mt-1">{formErrors.category}</p>
+                            )}
+                          </div>
+
+                          <div>
+                            <label className="block text-sm font-medium text-[var(--text-primary)] mb-1">
+                              Unidad de Medida
+                            </label>
+                            <select
+                              value={formData.unit_of_measure}
+                              onChange={(e) => setFormData({ ...formData, unit_of_measure: e.target.value })}
+                              className="w-full px-3 py-2 bg-[var(--bg-primary)] border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] text-[var(--text-primary)]"
+                            >
+                              {unitOptions.map(unit => (
+                                <option key={unit} value={unit}>{unit}</option>
+                              ))}
+                            </select>
+                          </div>
+
+                          <div>
+                            <label className="block text-sm font-medium text-[var(--text-primary)] mb-1">
+                              Stock Inicial
+                            </label>
+                            <input
+                              type="number"
+                              min="0"
+                              step="0.01"
+                              value={formData.stock_quantity}
+                              onChange={(e) => setFormData({ ...formData, stock_quantity: parseFloat(e.target.value) || 0 })}
+                              className="w-full px-3 py-2 bg-[var(--bg-primary)] border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] text-[var(--text-primary)]"
+                            />
+                            {formErrors.stock_quantity && (
+                              <p className="text-xs text-[var(--color-error)] mt-1">{formErrors.stock_quantity}</p>
+                            )}
+                          </div>
+
+                          <div>
+                            <label className="block text-sm font-medium text-[var(--text-primary)] mb-1">
+                              Costo por Unidad (€)
+                            </label>
+                            <input
+                              type="number"
+                              min="0"
+                              step="0.01"
+                              value={formData.cost_per_unit}
+                              onChange={(e) => setFormData({ ...formData, cost_per_unit: parseFloat(e.target.value) || 0 })}
+                              className="w-full px-3 py-2 bg-[var(--bg-primary)] border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] text-[var(--text-primary)]"
+                            />
+                            {formErrors.cost_per_unit && (
+                              <p className="text-xs text-[var(--color-error)] mt-1">{formErrors.cost_per_unit}</p>
+                            )}
+                          </div>
+
+                          <div>
+                            <label className="block text-sm font-medium text-[var(--text-primary)] mb-1">
+                              Días de Caducidad
+                            </label>
+                            <input
+                              type="number"
+                              min="1"
+                              value={formData.estimated_shelf_life_days}
+                              onChange={(e) => setFormData({ ...formData, estimated_shelf_life_days: parseInt(e.target.value) || 30 })}
+                              className="w-full px-3 py-2 bg-[var(--bg-primary)] border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] text-[var(--text-primary)]"
+                            />
+                            {formErrors.estimated_shelf_life_days && (
+                              <p className="text-xs text-[var(--color-error)] mt-1">{formErrors.estimated_shelf_life_days}</p>
+                            )}
+                          </div>
+
+                          <div>
+                            <label className="block text-sm font-medium text-[var(--text-primary)] mb-1">
+                              Stock Mínimo
+                            </label>
+                            <input
+                              type="number"
+                              min="0"
+                              value={formData.low_stock_threshold}
+                              onChange={(e) => setFormData({ ...formData, low_stock_threshold: parseInt(e.target.value) || 0 })}
+                              className="w-full px-3 py-2 bg-[var(--bg-primary)] border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] text-[var(--text-primary)]"
+                            />
+                          </div>
+
+                          <div>
+                            <label className="block text-sm font-medium text-[var(--text-primary)] mb-1">
+                              Punto de Reorden
+                            </label>
+                            <input
+                              type="number"
+                              min="0"
+                              value={formData.reorder_point}
+                              onChange={(e) => setFormData({ ...formData, reorder_point: parseInt(e.target.value) || 0 })}
+                              className="w-full px-3 py-2 bg-[var(--bg-primary)] border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] text-[var(--text-primary)]"
+                            />
+                          </div>
+                        </div>
+
+                        <div className="flex items-center gap-4">
+                          <label className="flex items-center gap-2 text-sm text-[var(--text-primary)]">
+                            <input
+                              type="checkbox"
+                              checked={formData.requires_refrigeration}
+                              onChange={(e) => setFormData({ ...formData, requires_refrigeration: e.target.checked })}
+                              className="rounded"
+                            />
+                            Requiere Refrigeración
+                          </label>
+                          <label className="flex items-center gap-2 text-sm text-[var(--text-primary)]">
+                            <input
+                              type="checkbox"
+                              checked={formData.requires_freezing}
+                              onChange={(e) => setFormData({ ...formData, requires_freezing: e.target.checked })}
+                              className="rounded"
+                            />
+                            Requiere Congelación
+                          </label>
+                          <label className="flex items-center gap-2 text-sm text-[var(--text-primary)]">
+                            <input
+                              type="checkbox"
+                              checked={formData.is_seasonal}
+                              onChange={(e) => setFormData({ ...formData, is_seasonal: e.target.checked })}
+                              className="rounded"
+                            />
+                            Estacional
+                          </label>
+                        </div>
+
+                        <div>
+                          <label className="block text-sm font-medium text-[var(--text-primary)] mb-1">
+                            Notas (opcional)
+                          </label>
+                          <textarea
+                            value={formData.notes}
+                            onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
+                            rows={2}
+                            className="w-full px-3 py-2 bg-[var(--bg-primary)] border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] text-[var(--text-primary)]"
+                            placeholder="Información adicional..."
+                          />
+                        </div>
+
+                        <div className="flex gap-2 pt-2">
+                          <button
+                            type="submit"
+                            className="px-4 py-2 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary-dark)] transition-colors font-medium"
+                          >
+                            Guardar Cambios
+                          </button>
+                          <button
+                            type="button"
+                            onClick={resetForm}
+                            className="px-4 py-2 text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-primary)] rounded-lg transition-colors"
+                          >
+                            Cancelar
+                          </button>
+                        </div>
+                      </form>
+                    </div>
+                  )}
                 </div>
               ))}
             </div>
@@ -840,11 +1039,11 @@ export const UploadSalesDataStep: React.FC<UploadSalesDataStepProps> = ({
           )}
         </div>
 
-        {/* Add/Edit Form */}
-        {isAdding ? (
+        {/* Add Manually Form - only show when adding new (not editing existing) */}
+        {isAdding && !editingId ? (
           <div className="border-2 border-[var(--color-primary)] rounded-lg p-4 bg-gradient-to-br from-[var(--color-primary)]/5 to-transparent">
             <h4 className="font-semibold text-[var(--text-primary)] mb-4">
-              {editingId ? 'Editar Ingrediente' : 'Agregar Ingrediente Manualmente'}
+              Agregar Ingrediente Manualmente
             </h4>
             <form onSubmit={handleSubmitForm} className="space-y-4">
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -1023,7 +1222,7 @@ export const UploadSalesDataStep: React.FC<UploadSalesDataStepProps> = ({
                   type="submit"
                   className="px-4 py-2 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary-dark)] transition-colors font-medium"
                 >
-                  {editingId ? 'Guardar Cambios' : 'Agregar a Lista'}
+                  Agregar a Lista
                 </button>
                 <button
                   type="button"