373 lines
15 KiB
TypeScript
373 lines
15 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Package, Salad, AlertCircle, ArrowRight, ArrowLeft, CheckCircle } from 'lucide-react';
|
|
import Button from '../../../ui/Button/Button';
|
|
import Card from '../../../ui/Card/Card';
|
|
import Input from '../../../ui/Input/Input';
|
|
import { useCurrentTenant } from '../../../../stores/tenant.store';
|
|
import { useAddStock, useStock } from '../../../../api/hooks/inventory';
|
|
import InfoCard from '../../../ui/InfoCard';
|
|
|
|
export interface ProductWithStock {
|
|
id: string;
|
|
name: string;
|
|
type: 'ingredient' | 'finished_product';
|
|
category?: string;
|
|
unit?: string;
|
|
initialStock?: number;
|
|
}
|
|
|
|
export interface InitialStockEntryStepProps {
|
|
products?: ProductWithStock[]; // Made optional - will use empty array if not provided
|
|
onUpdate?: (data: { productsWithStock: ProductWithStock[] }) => void;
|
|
onComplete?: () => void;
|
|
onPrevious?: () => void;
|
|
initialData?: {
|
|
productsWithStock?: ProductWithStock[];
|
|
};
|
|
}
|
|
|
|
export const InitialStockEntryStep: React.FC<InitialStockEntryStepProps> = ({
|
|
products: initialProducts,
|
|
onUpdate,
|
|
onComplete,
|
|
onPrevious,
|
|
initialData,
|
|
}) => {
|
|
const { t } = useTranslation();
|
|
const currentTenant = useCurrentTenant();
|
|
const tenantId = currentTenant?.id || '';
|
|
const addStockMutation = useAddStock();
|
|
const { data: stockData } = useStock(tenantId);
|
|
const [isSaving, setIsSaving] = useState(false);
|
|
|
|
const [products, setProducts] = useState<ProductWithStock[]>(() => {
|
|
if (initialData?.productsWithStock) {
|
|
return initialData.productsWithStock;
|
|
}
|
|
// Handle case where initialProducts is undefined (shouldn't happen, but defensive)
|
|
if (!initialProducts || initialProducts.length === 0) {
|
|
return [];
|
|
}
|
|
return initialProducts.map(p => ({
|
|
...p,
|
|
initialStock: p.initialStock ?? undefined,
|
|
}));
|
|
});
|
|
|
|
// Merge existing stock from backend on mount
|
|
useEffect(() => {
|
|
if (!stockData?.items || products.length === 0) return;
|
|
|
|
console.log('🔄 Merging backend stock data into initial stock entry state...', { itemsCount: stockData.items.length });
|
|
|
|
let hasChanges = false;
|
|
const updatedProducts = products.map(p => {
|
|
const existingStock = stockData.items.find(s => s.ingredient_id === p.id);
|
|
|
|
// Only merge if user hasn't entered value yet
|
|
if (existingStock && p.initialStock === undefined) {
|
|
hasChanges = true;
|
|
return {
|
|
...p,
|
|
initialStock: existingStock.current_quantity
|
|
};
|
|
}
|
|
return p;
|
|
});
|
|
|
|
if (hasChanges) {
|
|
setProducts(updatedProducts);
|
|
onUpdate?.({ productsWithStock: updatedProducts });
|
|
}
|
|
}, [stockData]); // Only depend on stockData to avoid infinite loop
|
|
|
|
const ingredients = products.filter(p => p.type === 'ingredient');
|
|
const finishedProducts = products.filter(p => p.type === 'finished_product');
|
|
|
|
const handleStockChange = (productId: string, value: string) => {
|
|
const numValue = value === '' ? undefined : parseFloat(value);
|
|
const updatedProducts = products.map(p =>
|
|
p.id === productId ? { ...p, initialStock: numValue } : p
|
|
);
|
|
|
|
setProducts(updatedProducts);
|
|
onUpdate?.({ productsWithStock: updatedProducts });
|
|
};
|
|
|
|
const handleSetAllToZero = () => {
|
|
const updatedProducts = products.map(p => ({ ...p, initialStock: 0 }));
|
|
setProducts(updatedProducts);
|
|
onUpdate?.({ productsWithStock: updatedProducts });
|
|
};
|
|
|
|
const handleSkipForNow = () => {
|
|
// Set all undefined values to 0
|
|
const updatedProducts = products.map(p => ({
|
|
...p,
|
|
initialStock: p.initialStock ?? 0,
|
|
}));
|
|
setProducts(updatedProducts);
|
|
onUpdate?.({ productsWithStock: updatedProducts });
|
|
onComplete?.();
|
|
};
|
|
|
|
const handleContinue = async () => {
|
|
setIsSaving(true);
|
|
try {
|
|
// STEP 0: Check for existing stock to avoid duplication
|
|
const existingStockMap = new Map(
|
|
stockData?.items?.map(s => [s.ingredient_id, s.current_quantity]) || []
|
|
);
|
|
|
|
// Create stock entries only for products where:
|
|
// 1. initialStock is defined AND > 0
|
|
// 2. AND (it doesn't exist OR the value is different)
|
|
const stockEntriesToSync = products.filter(p => {
|
|
const currentVal = p.initialStock ?? 0;
|
|
const backendVal = existingStockMap.get(p.id);
|
|
|
|
// Only sync if it's new (> 0 and doesn't exist) or changed
|
|
if (backendVal === undefined) {
|
|
return currentVal > 0;
|
|
}
|
|
return currentVal !== backendVal;
|
|
});
|
|
|
|
console.log(`📦 Stock processing: ${stockEntriesToSync.length} to sync, ${products.length - stockEntriesToSync.length} skipped.`);
|
|
|
|
if (stockEntriesToSync.length > 0) {
|
|
// Create or update stock entries
|
|
// Note: useAddStock currently handles creation/initial set.
|
|
// If the backend requires a different endpoint for updates, this might need adjustment.
|
|
// For onboarding, we assume addStock is a "set-and-forget" for initial levels.
|
|
const stockPromises = stockEntriesToSync.map(product =>
|
|
addStockMutation.mutateAsync({
|
|
tenantId,
|
|
stockData: {
|
|
ingredient_id: product.id,
|
|
current_quantity: product.initialStock || 0,
|
|
unit_cost: 0,
|
|
}
|
|
})
|
|
);
|
|
|
|
await Promise.all(stockPromises);
|
|
console.log(`✅ Synced ${stockEntriesToSync.length} stock entries successfully`);
|
|
}
|
|
|
|
onComplete?.();
|
|
} catch (error) {
|
|
console.error('Error syncing stock entries:', error);
|
|
alert(t('onboarding:stock.error_creating_stock', 'Error al guardar los niveles de stock. Por favor, inténtalo de nuevo.'));
|
|
} finally {
|
|
setIsSaving(false);
|
|
}
|
|
};
|
|
|
|
const productsWithStock = products.filter(p => p.initialStock !== undefined && p.initialStock >= 0);
|
|
const productsWithoutStock = products.filter(p => p.initialStock === undefined);
|
|
const completionPercentage = products.length > 0 ? (productsWithStock.length / products.length) * 100 : 100;
|
|
const allCompleted = productsWithoutStock.length === 0;
|
|
|
|
// If no products, show a skip message
|
|
if (products.length === 0) {
|
|
return (
|
|
<div className="max-w-4xl mx-auto p-4 md:p-6 space-y-4 md:space-y-6">
|
|
<div className="text-center space-y-4">
|
|
<div className="text-6xl">✓</div>
|
|
<h2 className="text-xl md:text-2xl font-bold text-[var(--text-primary)]">
|
|
{t('onboarding:stock.no_products_title', 'Stock Inicial')}
|
|
</h2>
|
|
<p className="text-[var(--text-secondary)]">
|
|
{t('onboarding:stock.no_products_message', 'Podrás configurar los niveles de stock más tarde en la sección de inventario.')}
|
|
</p>
|
|
<Button onClick={handleContinue} variant="primary" rightIcon={<ArrowRight />}>
|
|
{t('common:continue', 'Continuar')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4 md:space-y-6">
|
|
{/* Why This Matters */}
|
|
<InfoCard
|
|
variant="info"
|
|
title={t('setup_wizard:why_this_matters', '¿Por qué es importante?')}
|
|
description={t(
|
|
'onboarding:stock.info_text',
|
|
'Sin niveles de stock iniciales, el sistema no puede alertarte sobre stock bajo, planificar producción o calcular costos correctamente. Tómate un momento para ingresar tus cantidades actuales.'
|
|
)}
|
|
/>
|
|
|
|
{/* Progress */}
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between text-sm">
|
|
<span className="text-[var(--text-secondary)]">
|
|
{t('onboarding:stock.progress', 'Progreso de captura')}
|
|
</span>
|
|
<span className="font-medium text-[var(--text-primary)]">
|
|
{productsWithStock.length} / {products.length}
|
|
</span>
|
|
</div>
|
|
<div className="w-full bg-[var(--bg-secondary)] rounded-full h-2">
|
|
<div
|
|
className="bg-[var(--color-primary)] h-2 rounded-full transition-all duration-300"
|
|
style={{ width: `${completionPercentage}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Quick Actions */}
|
|
<div className="flex flex-col sm:flex-row justify-between items-stretch sm:items-center gap-2">
|
|
<Button onClick={handleSetAllToZero} variant="outline" size="sm" className="w-full sm:w-auto">
|
|
{t('onboarding:stock.set_all_zero', 'Establecer todo a 0')}
|
|
</Button>
|
|
<Button onClick={handleSkipForNow} variant="ghost" size="sm" className="w-full sm:w-auto">
|
|
{t('onboarding:stock.skip_for_now', 'Omitir por ahora (se establecerá a 0)')}
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Ingredients Section */}
|
|
{ingredients.length > 0 && (
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-8 h-8 bg-[var(--color-success)]/10 dark:bg-[var(--color-success)]/20 rounded-lg flex items-center justify-center">
|
|
<Salad className="w-4 h-4 text-[var(--color-success)]" />
|
|
</div>
|
|
<h3 className="font-semibold text-[var(--text-primary)]">
|
|
{t('onboarding:stock.ingredients', 'Ingredientes')} ({ingredients.length})
|
|
</h3>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
|
{ingredients.map(product => {
|
|
const hasStock = product.initialStock !== undefined;
|
|
return (
|
|
<Card key={product.id} className={hasStock ? 'bg-[var(--color-success)]/10 dark:bg-[var(--color-success)]/20 border-[var(--color-success)]/30' : ''}>
|
|
<div className="p-3">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<div className="flex-1">
|
|
<div className="font-medium text-[var(--text-primary)] flex items-center gap-2">
|
|
{product.name}
|
|
{hasStock && <CheckCircle className="w-4 h-4 text-[var(--color-success)]" />}
|
|
</div>
|
|
{product.category && (
|
|
<div className="text-xs text-[var(--text-secondary)]">{product.category}</div>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Input
|
|
type="number"
|
|
value={product.initialStock ?? ''}
|
|
onChange={(e) => handleStockChange(product.id, e.target.value)}
|
|
placeholder="0"
|
|
min="0"
|
|
step="0.01"
|
|
className="w-20 sm:w-24 text-right min-h-[44px]"
|
|
/>
|
|
<span className="text-sm text-[var(--text-secondary)] whitespace-nowrap">
|
|
{product.unit || 'kg'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Finished Products Section */}
|
|
{finishedProducts.length > 0 && (
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-8 h-8 bg-[var(--color-info)]/10 dark:bg-[var(--color-info)]/20 rounded-lg flex items-center justify-center">
|
|
<Package className="w-4 h-4 text-[var(--color-info)]" />
|
|
</div>
|
|
<h3 className="font-semibold text-[var(--text-primary)]">
|
|
{t('onboarding:stock.finished_products', 'Productos Terminados')} ({finishedProducts.length})
|
|
</h3>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
|
{finishedProducts.map(product => {
|
|
const hasStock = product.initialStock !== undefined;
|
|
return (
|
|
<Card key={product.id} className={hasStock ? 'bg-[var(--color-info)]/10 dark:bg-[var(--color-info)]/20 border-[var(--color-info)]/30' : ''}>
|
|
<div className="p-3">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<div className="flex-1">
|
|
<div className="font-medium text-[var(--text-primary)] flex items-center gap-2">
|
|
{product.name}
|
|
{hasStock && <CheckCircle className="w-4 h-4 text-[var(--color-info)]" />}
|
|
</div>
|
|
{product.category && (
|
|
<div className="text-xs text-[var(--text-secondary)]">{product.category}</div>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Input
|
|
type="number"
|
|
value={product.initialStock ?? ''}
|
|
onChange={(e) => handleStockChange(product.id, e.target.value)}
|
|
placeholder="0"
|
|
min="0"
|
|
step="1"
|
|
className="w-24 text-right"
|
|
/>
|
|
<span className="text-sm text-[var(--text-secondary)] whitespace-nowrap">
|
|
{product.unit || t('common:units', 'unidades')}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Warning for incomplete */}
|
|
{!allCompleted && (
|
|
<InfoCard
|
|
variant="warning"
|
|
title={t('onboarding:stock.incomplete_warning', 'Faltan {{count}} productos por completar', {
|
|
count: productsWithoutStock.length,
|
|
})}
|
|
description={t(
|
|
'onboarding:stock.incomplete_help',
|
|
'Puedes continuar, pero recomendamos ingresar todas las cantidades para un mejor control de inventario.'
|
|
)}
|
|
/>
|
|
)}
|
|
|
|
{/* Footer Actions */}
|
|
<div className="flex items-center justify-between pt-6 border-t border-[var(--border-primary)]">
|
|
<Button onClick={onPrevious} variant="ghost" leftIcon={<ArrowLeft />}>
|
|
{t('common:previous', 'Anterior')}
|
|
</Button>
|
|
|
|
<Button
|
|
onClick={handleContinue}
|
|
variant="primary"
|
|
rightIcon={<ArrowRight />}
|
|
disabled={isSaving}
|
|
>
|
|
{isSaving
|
|
? t('common:saving', 'Guardando...')
|
|
: allCompleted
|
|
? t('onboarding:stock.continue_to_next', 'Continuar →')
|
|
: t('onboarding:stock.continue_anyway', 'Continuar de todos modos')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default InitialStockEntryStep;
|