c103ed6efc
Main Entry Point (ItemTypeSelector): - Moved Registro de Ventas to first position (most common) - Changed icon from DollarSign to Euro icon - Fixed alignment between icons and text (items-center instead of items-start) - Improved spacing between title and subtitle (mb-0.5, mt-1) - Better visual centering of all elements Inventory Wizard (TypeSelectionStep): - Enhanced selection UI with ring and shadow when selected - Better color feedback (10% opacity background, ring-2) - Dynamic icon color (primary when selected, tertiary when not) - Dynamic title color (primary when selected) - Improved spacing between title and description (mb-3, mt-3) - Added hover effects (shadow-lg, -translate-y-0.5) - Better visual distinction for selected state All changes improve visual feedback and user experience.
368 lines
14 KiB
TypeScript
368 lines
14 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { WizardStep, WizardStepProps } from '../../../ui/WizardModal/WizardModal';
|
|
import { Package, Leaf, Cookie, CheckCircle2 } from 'lucide-react';
|
|
|
|
interface WizardDataProps extends WizardStepProps {
|
|
data: Record<string, any>;
|
|
onDataChange: (data: Record<string, any>) => void;
|
|
}
|
|
|
|
// Step 1: Type Selection
|
|
const TypeSelectionStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNext }) => {
|
|
const [selectedType, setSelectedType] = useState<'ingredient' | 'finished_product'>(
|
|
data.inventoryType || 'ingredient'
|
|
);
|
|
|
|
const handleContinue = () => {
|
|
onDataChange({ ...data, inventoryType: selectedType });
|
|
onNext();
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="text-center pb-4 border-b border-[var(--border-primary)]">
|
|
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">
|
|
¿Qué tipo de inventario agregarás?
|
|
</h3>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<button
|
|
onClick={() => setSelectedType('ingredient')}
|
|
className={`
|
|
p-6 rounded-xl border-2 transition-all duration-200
|
|
hover:shadow-lg hover:-translate-y-0.5
|
|
${
|
|
selectedType === 'ingredient'
|
|
? 'border-[var(--color-primary)] bg-[var(--color-primary)]/10 shadow-md ring-2 ring-[var(--color-primary)]/20'
|
|
: 'border-[var(--border-secondary)] hover:border-[var(--color-primary)]/50'
|
|
}
|
|
`}
|
|
>
|
|
<Leaf className={`w-10 h-10 mx-auto mb-4 transition-colors ${
|
|
selectedType === 'ingredient' ? 'text-[var(--color-primary)]' : 'text-[var(--text-tertiary)]'
|
|
}`} />
|
|
<h4 className={`font-semibold mb-3 transition-colors ${
|
|
selectedType === 'ingredient' ? 'text-[var(--color-primary)]' : 'text-[var(--text-primary)]'
|
|
}`}>
|
|
Ingrediente
|
|
</h4>
|
|
<p className="text-sm text-[var(--text-secondary)] leading-relaxed">
|
|
Materias primas usadas en recetas
|
|
</p>
|
|
<p className="text-xs text-[var(--text-tertiary)] mt-3 leading-relaxed">
|
|
Ej: Harina, azúcar, huevos, mantequilla
|
|
</p>
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => setSelectedType('finished_product')}
|
|
className={`
|
|
p-6 rounded-xl border-2 transition-all duration-200
|
|
hover:shadow-lg hover:-translate-y-0.5
|
|
${
|
|
selectedType === 'finished_product'
|
|
? 'border-[var(--color-primary)] bg-[var(--color-primary)]/10 shadow-md ring-2 ring-[var(--color-primary)]/20'
|
|
: 'border-[var(--border-secondary)] hover:border-[var(--color-primary)]/50'
|
|
}
|
|
`}
|
|
>
|
|
<Cookie className={`w-10 h-10 mx-auto mb-4 transition-colors ${
|
|
selectedType === 'finished_product' ? 'text-[var(--color-primary)]' : 'text-[var(--text-tertiary)]'
|
|
}`} />
|
|
<h4 className={`font-semibold mb-3 transition-colors ${
|
|
selectedType === 'finished_product' ? 'text-[var(--color-primary)]' : 'text-[var(--text-primary)]'
|
|
}`}>
|
|
Producto Terminado
|
|
</h4>
|
|
<p className="text-sm text-[var(--text-secondary)] leading-relaxed">
|
|
Productos listos para venta
|
|
</p>
|
|
<p className="text-xs text-[var(--text-tertiary)] mt-3 leading-relaxed">
|
|
Ej: Baguettes, croissants, pasteles
|
|
</p>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex justify-end">
|
|
<button
|
|
onClick={handleContinue}
|
|
className="px-6 py-2.5 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary)]/90 transition-colors"
|
|
>
|
|
Continuar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Step 2: Core Details
|
|
const CoreDetailsStep: React.FC<WizardDataProps> = ({ data, onDataChange, onNext }) => {
|
|
const isIngredient = data.inventoryType === 'ingredient';
|
|
|
|
const [formData, setFormData] = useState({
|
|
name: data.name || '',
|
|
category: data.category || '',
|
|
unit: data.unit || '',
|
|
storage: data.storage || 'dry',
|
|
reorderPoint: data.reorderPoint || '',
|
|
shelfLife: data.shelfLife || '',
|
|
});
|
|
|
|
const handleSubmit = () => {
|
|
onDataChange({ ...data, ...formData });
|
|
onNext();
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="text-center pb-4 border-b border-[var(--border-primary)]">
|
|
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">
|
|
Detalles del {isIngredient ? 'Ingrediente' : 'Producto'}
|
|
</h3>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div className="md:col-span-2">
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
Nombre *
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={formData.name}
|
|
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
|
placeholder={isIngredient ? "Ej: Harina de trigo" : "Ej: Baguette tradicional"}
|
|
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)]"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
Categoría *
|
|
</label>
|
|
<select
|
|
value={formData.category}
|
|
onChange={(e) => setFormData({ ...formData, category: 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)]"
|
|
>
|
|
<option value="">Seleccionar...</option>
|
|
{isIngredient ? (
|
|
<>
|
|
<option value="flour">Harinas</option>
|
|
<option value="dairy">Lácteos</option>
|
|
<option value="eggs">Huevos</option>
|
|
<option value="fats">Grasas</option>
|
|
<option value="sweeteners">Endulzantes</option>
|
|
<option value="additives">Aditivos</option>
|
|
</>
|
|
) : (
|
|
<>
|
|
<option value="bread">Pan</option>
|
|
<option value="pastry">Pastelería</option>
|
|
<option value="cake">Repostería</option>
|
|
<option value="cookies">Galletas</option>
|
|
</>
|
|
)}
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
Unidad de Medida *
|
|
</label>
|
|
<select
|
|
value={formData.unit}
|
|
onChange={(e) => setFormData({ ...formData, unit: 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)]"
|
|
>
|
|
<option value="">Seleccionar...</option>
|
|
<option value="kg">Kilogramos (kg)</option>
|
|
<option value="l">Litros (L)</option>
|
|
<option value="units">Unidades</option>
|
|
<option value="g">Gramos (g)</option>
|
|
<option value="ml">Mililitros (ml)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
Almacenamiento
|
|
</label>
|
|
<select
|
|
value={formData.storage}
|
|
onChange={(e) => setFormData({ ...formData, storage: 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)]"
|
|
>
|
|
<option value="dry">Seco</option>
|
|
<option value="refrigerated">Refrigerado</option>
|
|
<option value="frozen">Congelado</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
Punto de Reorden
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={formData.reorderPoint}
|
|
onChange={(e) => setFormData({ ...formData, reorderPoint: e.target.value })}
|
|
placeholder="Cantidad mínima"
|
|
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)]"
|
|
min="0"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end">
|
|
<button
|
|
onClick={handleSubmit}
|
|
disabled={!formData.name || !formData.category || !formData.unit}
|
|
className="px-6 py-2.5 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary)]/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
|
>
|
|
Continuar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Step 3: Initial Lot (Optional)
|
|
const InitialLotStep: React.FC<WizardDataProps> = ({ data, onDataChange, onComplete }) => {
|
|
const [addLot, setAddLot] = useState(false);
|
|
const [lotData, setLotData] = useState({
|
|
quantity: '',
|
|
batchNumber: '',
|
|
expiryDate: '',
|
|
costPerUnit: '',
|
|
});
|
|
|
|
const handleComplete = () => {
|
|
if (addLot) {
|
|
onDataChange({ ...data, initialLot: lotData });
|
|
}
|
|
// Here you would save to API
|
|
console.log('Saving inventory:', data);
|
|
onComplete();
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="text-center pb-4 border-b border-[var(--border-primary)]">
|
|
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">
|
|
Inventario Inicial (Opcional)
|
|
</h3>
|
|
<p className="text-sm text-[var(--text-secondary)]">
|
|
Agrega un lote inicial si ya tienes stock
|
|
</p>
|
|
</div>
|
|
|
|
<div className="text-center">
|
|
<button
|
|
onClick={() => setAddLot(!addLot)}
|
|
className={`px-6 py-3 rounded-lg border-2 transition-all ${
|
|
addLot
|
|
? 'border-[var(--color-primary)] bg-[var(--color-primary)]/5 text-[var(--color-primary)]'
|
|
: 'border-[var(--border-secondary)] text-[var(--text-secondary)]'
|
|
}`}
|
|
>
|
|
{addLot ? '✓ Agregar lote inicial' : '+ Agregar lote inicial'}
|
|
</button>
|
|
</div>
|
|
|
|
{addLot && (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 p-4 border border-[var(--border-secondary)] rounded-lg bg-[var(--bg-secondary)]/30">
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
Cantidad *
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={lotData.quantity}
|
|
onChange={(e) => setLotData({ ...lotData, quantity: e.target.value })}
|
|
placeholder="100"
|
|
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)]"
|
|
min="0"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
Número de Lote
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={lotData.batchNumber}
|
|
onChange={(e) => setLotData({ ...lotData, batchNumber: e.target.value })}
|
|
placeholder="LOT-2025-001"
|
|
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)]"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
Fecha de Caducidad
|
|
</label>
|
|
<input
|
|
type="date"
|
|
value={lotData.expiryDate}
|
|
onChange={(e) => setLotData({ ...lotData, expiryDate: 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)]"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
|
Costo por Unidad (€)
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={lotData.costPerUnit}
|
|
onChange={(e) => setLotData({ ...lotData, costPerUnit: e.target.value })}
|
|
placeholder="1.50"
|
|
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)]"
|
|
min="0"
|
|
step="0.01"
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex justify-end gap-3 pt-4 border-t border-[var(--border-primary)]">
|
|
<button
|
|
onClick={handleComplete}
|
|
className="px-8 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors font-semibold inline-flex items-center gap-2"
|
|
>
|
|
<CheckCircle2 className="w-5 h-5" />
|
|
Finalizar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const InventoryWizardSteps = (
|
|
data: Record<string, any>,
|
|
setData: (data: Record<string, any>) => void
|
|
): WizardStep[] => [
|
|
{
|
|
id: 'type-selection',
|
|
title: 'Tipo',
|
|
description: 'Ingrediente o producto terminado',
|
|
component: (props) => <TypeSelectionStep {...props} data={data} onDataChange={setData} />,
|
|
},
|
|
{
|
|
id: 'core-details',
|
|
title: 'Detalles',
|
|
description: 'Información básica',
|
|
component: (props) => <CoreDetailsStep {...props} data={data} onDataChange={setData} />,
|
|
},
|
|
{
|
|
id: 'initial-lot',
|
|
title: 'Lote Inicial',
|
|
description: 'Inventario de arranque (opcional)',
|
|
component: (props) => <InitialLotStep {...props} data={data} onDataChange={setData} />,
|
|
isOptional: true,
|
|
},
|
|
];
|