Implement 5 UX enhancements for ingredient management
This commit implements the requested enhancements for the ingredient quick-add system and batch management: **1. Duplicate Detection** - Real-time Levenshtein distance-based similarity checking - Shows warning with top 3 similar ingredients (70%+ similarity) - Prevents accidental duplicate creation - Location: QuickAddIngredientModal.tsx **2. Smart Category Suggestions** - Auto-populates category based on ingredient name patterns - Supports Spanish and English ingredient names - Shows visual indicator when category is AI-suggested - Pattern matching for: Baking, Dairy, Fruits, Vegetables, Meat, Seafood, Spices - Location: ingredientHelpers.ts **3. Quick Templates** - 10 pre-configured common bakery ingredients - One-click template application - Templates include: Flour, Butter, Sugar, Eggs, Yeast, Milk, Chocolate, Vanilla, Salt, Cream - Each template has sensible defaults (shelf life, refrigeration requirements) - Location: QuickAddIngredientModal.tsx **4. Batch Creation Mode** - BatchAddIngredientsModal component for adding multiple ingredients at once - Table-based interface for efficient data entry - "Load from Templates" quick action - Duplicate detection within batch - Partial success handling (some ingredients succeed, some fail) - Location: BatchAddIngredientsModal.tsx - Integration: UploadSalesDataStep.tsx (2 buttons: "Add One" / "Add Multiple") **5. Dashboard Alert for Incomplete Ingredients** - IncompleteIngredientsAlert component on dashboard - Queries ingredients with needs_review metadata flag - Shows count badge and first 5 incomplete ingredients - "Complete Information" button links to inventory page - Only shows when incomplete ingredients exist - Location: IncompleteIngredientsAlert.tsx - Integration: DashboardPage.tsx **New Files Created:** - ingredientHelpers.ts - Utilities for duplicate detection, smart suggestions, templates - BatchAddIngredientsModal.tsx - Batch ingredient creation component - IncompleteIngredientsAlert.tsx - Dashboard alert component **Files Modified:** - QuickAddIngredientModal.tsx - Added duplicate detection, smart suggestions, templates - UploadSalesDataStep.tsx - Integrated batch creation modal - DashboardPage.tsx - Added incomplete ingredients alert **Technical Highlights:** - Levenshtein distance algorithm for fuzzy name matching - Pattern-based category suggestions (supports 100+ ingredient patterns) - Metadata tracking (needs_review, created_context) - Real-time validation and error handling - Responsive UI with animations - Consistent with existing design system All features built and tested successfully. Build time: 21.29s
This commit is contained in:
Claude
@@ -0,0 +1,444 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useCreateIngredient } from '../../../api/hooks/inventory';
|
||||
import type { Ingredient } from '../../../api/types/inventory';
|
||||
import { commonIngredientTemplates } from './ingredientHelpers';
|
||||
|
||||
interface BatchIngredientRow {
|
||||
id: string;
|
||||
name: string;
|
||||
category: string;
|
||||
unit_of_measure: string;
|
||||
stock_quantity?: number;
|
||||
cost_per_unit?: number;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
interface BatchAddIngredientsModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onCreated: (ingredients: Ingredient[]) => void;
|
||||
tenantId: string;
|
||||
}
|
||||
|
||||
export const BatchAddIngredientsModal: React.FC<BatchAddIngredientsModalProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
onCreated,
|
||||
tenantId
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const createIngredient = useCreateIngredient();
|
||||
|
||||
const [rows, setRows] = useState<BatchIngredientRow[]>([
|
||||
{ id: '1', name: '', category: 'Baking Ingredients', unit_of_measure: 'kg' },
|
||||
{ id: '2', name: '', category: 'Baking Ingredients', unit_of_measure: 'kg' },
|
||||
{ id: '3', name: '', category: 'Baking Ingredients', unit_of_measure: 'kg' }
|
||||
]);
|
||||
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [globalError, setGlobalError] = useState<string | null>(null);
|
||||
|
||||
const categoryOptions = [
|
||||
'Baking Ingredients',
|
||||
'Dairy',
|
||||
'Fruits',
|
||||
'Vegetables',
|
||||
'Meat',
|
||||
'Seafood',
|
||||
'Spices',
|
||||
'Other'
|
||||
];
|
||||
|
||||
const unitOptions = ['kg', 'g', 'L', 'ml', 'units', 'dozen'];
|
||||
|
||||
const updateRow = (id: string, field: keyof BatchIngredientRow, value: any) => {
|
||||
setRows(rows.map(row =>
|
||||
row.id === id ? { ...row, [field]: value, error: undefined } : row
|
||||
));
|
||||
};
|
||||
|
||||
const addRow = () => {
|
||||
const newId = String(Date.now());
|
||||
setRows([...rows, {
|
||||
id: newId,
|
||||
name: '',
|
||||
category: 'Baking Ingredients',
|
||||
unit_of_measure: 'kg'
|
||||
}]);
|
||||
};
|
||||
|
||||
const removeRow = (id: string) => {
|
||||
if (rows.length > 1) {
|
||||
setRows(rows.filter(row => row.id !== id));
|
||||
}
|
||||
};
|
||||
|
||||
const loadFromTemplates = () => {
|
||||
const templateRows: BatchIngredientRow[] = commonIngredientTemplates.slice(0, 10).map((template, index) => ({
|
||||
id: String(Date.now() + index),
|
||||
name: template.name,
|
||||
category: template.category,
|
||||
unit_of_measure: template.unit_of_measure,
|
||||
stock_quantity: 0,
|
||||
cost_per_unit: 0
|
||||
}));
|
||||
setRows(templateRows);
|
||||
};
|
||||
|
||||
const validateRows = (): boolean => {
|
||||
let hasError = false;
|
||||
const updatedRows = rows.map(row => {
|
||||
if (!row.name.trim()) {
|
||||
hasError = true;
|
||||
return { ...row, error: 'El nombre es requerido' };
|
||||
}
|
||||
if (!row.category) {
|
||||
hasError = true;
|
||||
return { ...row, error: 'La categoría es requerida' };
|
||||
}
|
||||
return { ...row, error: undefined };
|
||||
});
|
||||
|
||||
if (hasError) {
|
||||
setRows(updatedRows);
|
||||
return false;
|
||||
}
|
||||
|
||||
// Check for duplicates within batch
|
||||
const names = rows.map(r => r.name.toLowerCase().trim());
|
||||
const duplicates = names.filter((name, index) => names.indexOf(name) !== index);
|
||||
if (duplicates.length > 0) {
|
||||
setGlobalError(`Hay nombres duplicados en el lote: ${duplicates.join(', ')}`);
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setGlobalError(null);
|
||||
|
||||
if (!validateRows()) return;
|
||||
|
||||
setIsSubmitting(true);
|
||||
|
||||
try {
|
||||
const createdIngredients: Ingredient[] = [];
|
||||
const errors: string[] = [];
|
||||
|
||||
// Create all ingredients
|
||||
for (const row of rows) {
|
||||
try {
|
||||
const ingredientData = {
|
||||
name: row.name.trim(),
|
||||
product_type: 'ingredient',
|
||||
category: row.category,
|
||||
unit_of_measure: row.unit_of_measure,
|
||||
low_stock_threshold: 1,
|
||||
max_stock_level: 100,
|
||||
reorder_point: 2,
|
||||
shelf_life_days: 30,
|
||||
requires_refrigeration: false,
|
||||
requires_freezing: false,
|
||||
is_seasonal: false,
|
||||
average_cost: row.cost_per_unit || 0,
|
||||
notes: 'Creado mediante adición por lote',
|
||||
metadata: {
|
||||
created_context: 'batch',
|
||||
is_complete: !!(row.stock_quantity && row.cost_per_unit),
|
||||
needs_review: !(row.stock_quantity && row.cost_per_unit),
|
||||
}
|
||||
};
|
||||
|
||||
const created = await createIngredient.mutateAsync({
|
||||
tenantId,
|
||||
ingredientData
|
||||
});
|
||||
|
||||
createdIngredients.push(created);
|
||||
} catch (error: any) {
|
||||
errors.push(`${row.name}: ${error.message || 'Error al crear'}`);
|
||||
}
|
||||
}
|
||||
|
||||
if (createdIngredients.length > 0) {
|
||||
onCreated(createdIngredients);
|
||||
handleClose();
|
||||
}
|
||||
|
||||
if (errors.length > 0) {
|
||||
setGlobalError(`Algunos ingredientes no se pudieron crear:\n${errors.join('\n')}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error in batch creation:', error);
|
||||
setGlobalError('Error al crear los ingredientes. Inténtalo de nuevo.');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setRows([
|
||||
{ id: '1', name: '', category: 'Baking Ingredients', unit_of_measure: 'kg' },
|
||||
{ id: '2', name: '', category: 'Baking Ingredients', unit_of_measure: 'kg' },
|
||||
{ id: '3', name: '', category: 'Baking Ingredients', unit_of_measure: 'kg' }
|
||||
]);
|
||||
setGlobalError(null);
|
||||
onClose();
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className="fixed inset-0 bg-black/50 z-40 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-lg shadow-2xl max-w-6xl w-full max-h-[90vh] overflow-y-auto pointer-events-auto animate-slideUp"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-6 border-b border-[var(--border-secondary)] sticky top-0 bg-[var(--bg-primary)] z-10">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-full bg-[var(--color-primary)]/10 flex items-center justify-center">
|
||||
<svg className="w-5 h-5 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold text-[var(--text-primary)]">
|
||||
📋 Agregar Múltiples Ingredientes
|
||||
</h2>
|
||||
<p className="text-sm text-[var(--text-secondary)] mt-0.5">
|
||||
Agrega varios ingredientes a la vez para ahorrar tiempo
|
||||
</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"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Form */}
|
||||
<form onSubmit={handleSubmit} className="p-6 space-y-5">
|
||||
{/* Quick Actions */}
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={loadFromTemplates}
|
||||
className="px-4 py-2 bg-[var(--color-primary)]/10 text-[var(--color-primary)] rounded-lg hover:bg-[var(--color-primary)]/20 transition-colors text-sm font-medium flex items-center gap-2"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
Cargar Plantillas Comunes
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={addRow}
|
||||
className="px-4 py-2 bg-[var(--bg-secondary)] text-[var(--text-primary)] rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors text-sm font-medium flex items-center gap-2"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||
</svg>
|
||||
Agregar Fila
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<div className="border border-[var(--border-secondary)] rounded-lg overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="bg-[var(--bg-secondary)] border-b border-[var(--border-secondary)]">
|
||||
<th className="px-3 py-2 text-left text-xs font-semibold text-[var(--text-primary)] w-8">#</th>
|
||||
<th className="px-3 py-2 text-left text-xs font-semibold text-[var(--text-primary)]">Nombre *</th>
|
||||
<th className="px-3 py-2 text-left text-xs font-semibold text-[var(--text-primary)]">Categoría *</th>
|
||||
<th className="px-3 py-2 text-left text-xs font-semibold text-[var(--text-primary)]">Unidad *</th>
|
||||
<th className="px-3 py-2 text-left text-xs font-semibold text-[var(--text-primary)]">Stock Inicial</th>
|
||||
<th className="px-3 py-2 text-left text-xs font-semibold text-[var(--text-primary)]">Costo (€)</th>
|
||||
<th className="px-3 py-2 text-left text-xs font-semibold text-[var(--text-primary)] w-12"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.map((row, index) => (
|
||||
<tr
|
||||
key={row.id}
|
||||
className={`border-b border-[var(--border-secondary)] hover:bg-[var(--bg-secondary)]/50 transition-colors ${row.error ? 'bg-[var(--color-error)]/5' : ''}`}
|
||||
>
|
||||
<td className="px-3 py-2 text-sm text-[var(--text-secondary)]">
|
||||
{index + 1}
|
||||
</td>
|
||||
<td className="px-3 py-2">
|
||||
<input
|
||||
type="text"
|
||||
value={row.name}
|
||||
onChange={(e) => updateRow(row.id, 'name', e.target.value)}
|
||||
className="w-full px-2 py-1.5 bg-[var(--bg-primary)] border border-[var(--border-secondary)] rounded text-sm text-[var(--text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--color-primary)]"
|
||||
placeholder="Ej: Harina"
|
||||
/>
|
||||
{row.error && (
|
||||
<p className="text-xs text-[var(--color-error)] mt-1">{row.error}</p>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-3 py-2">
|
||||
<select
|
||||
value={row.category}
|
||||
onChange={(e) => updateRow(row.id, 'category', e.target.value)}
|
||||
className="w-full px-2 py-1.5 bg-[var(--bg-primary)] border border-[var(--border-secondary)] rounded text-sm text-[var(--text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--color-primary)]"
|
||||
>
|
||||
{categoryOptions.map(cat => (
|
||||
<option key={cat} value={cat}>{cat}</option>
|
||||
))}
|
||||
</select>
|
||||
</td>
|
||||
<td className="px-3 py-2">
|
||||
<select
|
||||
value={row.unit_of_measure}
|
||||
onChange={(e) => updateRow(row.id, 'unit_of_measure', e.target.value)}
|
||||
className="w-full px-2 py-1.5 bg-[var(--bg-primary)] border border-[var(--border-secondary)] rounded text-sm text-[var(--text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--color-primary)]"
|
||||
>
|
||||
{unitOptions.map(unit => (
|
||||
<option key={unit} value={unit}>{unit}</option>
|
||||
))}
|
||||
</select>
|
||||
</td>
|
||||
<td className="px-3 py-2">
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
step="0.01"
|
||||
value={row.stock_quantity || ''}
|
||||
onChange={(e) => updateRow(row.id, 'stock_quantity', parseFloat(e.target.value) || undefined)}
|
||||
className="w-full px-2 py-1.5 bg-[var(--bg-primary)] border border-[var(--border-secondary)] rounded text-sm text-[var(--text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--color-primary)]"
|
||||
placeholder="0"
|
||||
/>
|
||||
</td>
|
||||
<td className="px-3 py-2">
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
step="0.01"
|
||||
value={row.cost_per_unit || ''}
|
||||
onChange={(e) => updateRow(row.id, 'cost_per_unit', parseFloat(e.target.value) || undefined)}
|
||||
className="w-full px-2 py-1.5 bg-[var(--bg-primary)] border border-[var(--border-secondary)] rounded text-sm text-[var(--text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--color-primary)]"
|
||||
placeholder="0.00"
|
||||
/>
|
||||
</td>
|
||||
<td className="px-3 py-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeRow(row.id)}
|
||||
disabled={rows.length === 1}
|
||||
className="p-1.5 text-[var(--color-error)] hover:bg-[var(--color-error)]/10 rounded transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
|
||||
title="Eliminar fila"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Info Box */}
|
||||
<div className="bg-[var(--color-info)]/10 border border-[var(--color-info)]/20 rounded-lg p-3">
|
||||
<p className="text-sm text-[var(--text-secondary)] flex items-start gap-2">
|
||||
<svg className="w-4 h-4 text-[var(--color-info)] mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span>
|
||||
💡 Los campos de stock y costo son opcionales. Puedes completarlos más tarde en la gestión de inventario.
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Global Error */}
|
||||
{globalError && (
|
||||
<div className="bg-[var(--color-error)]/10 border border-[var(--color-error)]/20 rounded-lg p-3">
|
||||
<p className="text-sm text-[var(--color-error)] flex items-center gap-2 whitespace-pre-line">
|
||||
<svg className="w-4 h-4 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
|
||||
</svg>
|
||||
{globalError}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-3 pt-2 sticky bottom-0 bg-[var(--bg-primary)] pb-2 border-t border-[var(--border-secondary)] -mx-6 px-6 -mb-5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleClose}
|
||||
disabled={isSubmitting}
|
||||
className="flex-1 px-4 py-2.5 text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-secondary)] rounded-lg transition-colors font-medium disabled:opacity-50"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="flex-1 px-4 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 justify-center gap-2"
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
|
||||
Creando {rows.length} ingredientes...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<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>
|
||||
Crear {rows.length} Ingredientes
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user