fix UI 1

2026-01-01 19:01:33 +01:00
parent d6728b4bd8
commit 93c9475239
10 changed files with 286 additions and 84 deletions
--- a/frontend/src/components/domain/setup-wizard/steps/InventorySetupStep.tsx
+++ b/frontend/src/components/domain/setup-wizard/steps/InventorySetupStep.tsx
@@ -1,12 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { SetupStepProps } from '../types';
-import { useIngredients, useCreateIngredient, useUpdateIngredient, useSoftDeleteIngredient, useAddStock, useStockByIngredient } from '../../../../api/hooks/inventory';
+import { useIngredients, useCreateIngredient, useUpdateIngredient, useSoftDeleteIngredient, useBulkAddStock } from '../../../../api/hooks/inventory';
 import { useSuppliers } from '../../../../api/hooks/suppliers';
 import { useCurrentTenant } from '../../../../stores/tenant.store';
 import { useAuthUser } from '../../../../stores/auth.store';
 import { UnitOfMeasure, IngredientCategory, ProductionStage } from '../../../../api/types/inventory';
-import type { IngredientCreate, IngredientUpdate, StockCreate, StockResponse } from '../../../../api/types/inventory';
+import type { IngredientCreate, IngredientUpdate, StockCreate } from '../../../../api/types/inventory';
 import { ESSENTIAL_INGREDIENTS, COMMON_INGREDIENTS, PACKAGING_ITEMS, type IngredientTemplate, templateToIngredientCreate } from '../data/ingredientTemplates';

 export const InventorySetupStep: React.FC<SetupStepProps> = ({ onUpdate, onComplete, onPrevious, canContinue }) => {
@@ -29,7 +29,7 @@ export const InventorySetupStep: React.FC<SetupStepProps> = ({ onUpdate, onCompl
  const createIngredientMutation = useCreateIngredient();
  const updateIngredientMutation = useUpdateIngredient();
  const deleteIngredientMutation = useSoftDeleteIngredient();
-  const addStockMutation = useAddStock();
+  const bulkAddStockMutation = useBulkAddStock();

  // Form state
  const [isAdding, setIsAdding] = useState(false);
@@ -59,8 +59,10 @@ export const InventorySetupStep: React.FC<SetupStepProps> = ({ onUpdate, onCompl
  });
  const [stockErrors, setStockErrors] = useState<Record<string, string>>({});

-  // Track stocks added per ingredient (for displaying the list)
-  const [ingredientStocks, setIngredientStocks] = useState<Record<string, StockResponse[]>>({});
+  // Track pending stocks to be submitted in batch (for display and batch submission)
+  const [pendingStocks, setPendingStocks] = useState<StockCreate[]>([]);
+  // Track stocks display per ingredient (using StockCreate for pending, before API submission)
+  const [ingredientStocks, setIngredientStocks] = useState<Record<string, Array<StockCreate & { _tempId: string }>>>({});

  // Notify parent when count changes
  useEffect(() => {
@@ -270,55 +272,79 @@ export const InventorySetupStep: React.FC<SetupStepProps> = ({ onUpdate, onCompl
  const handleSaveStock = async (addAnother: boolean = false) => {
    if (!addingStockForId || !validateStockForm()) return;

-    try {
-      const stockData: StockCreate = {
-        ingredient_id: addingStockForId,
-        current_quantity: Number(stockFormData.current_quantity),
-        expiration_date: stockFormData.expiration_date || undefined,
-        supplier_id: stockFormData.supplier_id || undefined,
-        batch_number: stockFormData.batch_number || undefined,
-        lot_number: stockFormData.lot_number || undefined,
-        production_stage: ProductionStage.RAW_INGREDIENT,
-        quality_status: 'good',
-      };
+    const stockData: StockCreate = {
+      ingredient_id: addingStockForId,
+      current_quantity: Number(stockFormData.current_quantity),
+      expiration_date: stockFormData.expiration_date || undefined,
+      supplier_id: stockFormData.supplier_id || undefined,
+      batch_number: stockFormData.batch_number || undefined,
+      lot_number: stockFormData.lot_number || undefined,
+      production_stage: ProductionStage.RAW_INGREDIENT,
+      quality_status: 'good',
+    };

-      const result = await addStockMutation.mutateAsync({
-        tenantId,
-        stockData,
+    // Generate a temporary ID for display purposes
+    const tempId = `temp-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`;
+    const stockWithTempId = { ...stockData, _tempId: tempId };
+
+    // Add to pending stocks for batch submission
+    setPendingStocks(prev => [...prev, stockData]);
+
+    // Add to local state for display
+    setIngredientStocks(prev => ({
+      ...prev,
+      [addingStockForId]: [...(prev[addingStockForId] || []), stockWithTempId],
+    }));
+
+    if (addAnother) {
+      // Reset form for adding another lot
+      setStockFormData({
+        current_quantity: '',
+        expiration_date: '',
+        supplier_id: stockFormData.supplier_id, // Keep supplier selected
+        batch_number: '',
+        lot_number: '',
      });
-
-      // Add to local state for display
-      setIngredientStocks(prev => ({
-        ...prev,
-        [addingStockForId]: [...(prev[addingStockForId] || []), result],
-      }));
-
-      if (addAnother) {
-        // Reset form for adding another lot
-        setStockFormData({
-          current_quantity: '',
-          expiration_date: '',
-          supplier_id: stockFormData.supplier_id, // Keep supplier selected
-          batch_number: '',
-          lot_number: '',
-        });
-        setStockErrors({});
-      } else {
-        handleCancelStock();
-      }
-    } catch (error) {
-      console.error('Error adding stock:', error);
-      setStockErrors({ submit: t('common:error_saving', 'Error saving. Please try again.') });
+      setStockErrors({});
+    } else {
+      handleCancelStock();
    }
  };

-  const handleDeleteStock = async (ingredientId: string, stockId: string) => {
-    // Remove from local state
+  const handleDeleteStock = (ingredientId: string, tempId: string) => {
+    // Remove from local display state
    setIngredientStocks(prev => ({
      ...prev,
-      [ingredientId]: (prev[ingredientId] || []).filter(s => s.id !== stockId),
+      [ingredientId]: (prev[ingredientId] || []).filter(s => s._tempId !== tempId),
    }));
-    // Note: We don't delete from backend during setup - stocks are created and can be managed later
+    // Remove from pending stocks
+    setPendingStocks(prev => prev.filter((s) => {
+      // Find and remove the matching stock entry
+      const stocksForIngredient = ingredientStocks[ingredientId] || [];
+      const stockToRemove = stocksForIngredient.find(st => st._tempId === tempId);
+      if (!stockToRemove) return true;
+      return s.ingredient_id !== stockToRemove.ingredient_id ||
+             s.current_quantity !== stockToRemove.current_quantity ||
+             s.batch_number !== stockToRemove.batch_number;
+    }));
+  };
+
+  // Submit all pending stocks when proceeding to next step
+  const handleSubmitPendingStocks = async (): Promise<boolean> => {
+    if (pendingStocks.length === 0) return true;
+
+    try {
+      await bulkAddStockMutation.mutateAsync({
+        tenantId,
+        stocks: pendingStocks,
+      });
+      // Clear pending stocks after successful submission
+      setPendingStocks([]);
+      return true;
+    } catch (error) {
+      console.error('Error submitting stocks:', error);
+      return false;
+    }
  };

  const categoryOptions = [
@@ -640,7 +666,7 @@ export const InventorySetupStep: React.FC<SetupStepProps> = ({ onUpdate, onCompl
                    <div className="ml-6 space-y-1">
                      {stocks.map((stock) => (
                        <div
-                          key={stock.id}
+                          key={stock._tempId}
                          className="flex items-center justify-between p-2 bg-[var(--bg-primary)] border border-[var(--border-secondary)] rounded text-sm"
                        >
                          <div className="flex items-center gap-3 text-xs">
@@ -659,7 +685,7 @@ export const InventorySetupStep: React.FC<SetupStepProps> = ({ onUpdate, onCompl
                          </div>
                          <button
                            type="button"
-                            onClick={() => handleDeleteStock(ingredient.id, stock.id)}
+                            onClick={() => handleDeleteStock(ingredient.id, stock._tempId)}
                            className="p-1 text-[var(--text-secondary)] hover:text-[var(--color-error)] rounded transition-colors"
                            aria-label="Delete lot"
                          >
@@ -782,33 +808,19 @@ export const InventorySetupStep: React.FC<SetupStepProps> = ({ onUpdate, onCompl
                        <button
                          type="button"
                          onClick={() => handleSaveStock(true)}
-                          disabled={addStockMutation.isPending}
-                          className="px-4 py-2 text-sm bg-[var(--bg-primary)] border border-[var(--border-secondary)] text-[var(--text-primary)] rounded hover:bg-[var(--bg-secondary)] disabled:opacity-50 transition-colors"
+                          className="px-4 py-2 text-sm bg-[var(--bg-primary)] border border-[var(--border-secondary)] text-[var(--text-primary)] rounded hover:bg-[var(--bg-secondary)] transition-colors"
                        >
                          {t('setup_wizard:inventory.add_another_lot', '+ Add Another Lot')}
                        </button>
                        <button
                          type="button"
                          onClick={() => handleSaveStock(false)}
-                          disabled={addStockMutation.isPending}
-                          className="px-4 py-2 text-sm bg-[var(--color-primary)] text-white rounded hover:bg-[var(--color-primary-dark)] disabled:opacity-50 transition-colors flex items-center gap-1"
+                          className="px-4 py-2 text-sm bg-[var(--color-primary)] text-white rounded hover:bg-[var(--color-primary-dark)] transition-colors flex items-center gap-1"
                        >
-                          {addStockMutation.isPending ? (
-                            <>
-                              <svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
-                                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-                                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
-                              </svg>
-                              {t('common:saving', 'Saving...')}
-                            </>
-                          ) : (
-                            <>
-                              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-                              </svg>
-                              {t('common:save', 'Save')}
-                            </>
-                          )}
+                          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                          </svg>
+                          {t('common:save', 'Save')}
                        </button>
                      </div>

@@ -1021,13 +1033,33 @@ export const InventorySetupStep: React.FC<SetupStepProps> = ({ onUpdate, onCompl
          </div>

          <div className="flex items-center gap-3">
+            {pendingStocks.length > 0 && (
+              <span className="text-sm text-[var(--text-secondary)]">
+                {pendingStocks.length} {t('setup_wizard:inventory.pending_stocks', 'stock entries pending')}
+              </span>
+            )}
            <button
              type="button"
-              onClick={() => onComplete()}
-              disabled={canContinue === false}
+              onClick={async () => {
+                const success = await handleSubmitPendingStocks();
+                if (success) {
+                  onComplete();
+                }
+              }}
+              disabled={canContinue === false || bulkAddStockMutation.isPending}
              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 flex items-center gap-2"
            >
-              {t('common:next', 'Continuar →')}
+              {bulkAddStockMutation.isPending ? (
+                <>
+                  <svg className="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+                  </svg>
+                  {t('common:saving', 'Saving...')}
+                </>
+              ) : (
+                t('common:next', 'Continuar →')
+              )}
            </button>
          </div>
        </div>