add traslations 2

This commit is contained in:
Urtzi Alfaro
2025-12-25 20:51:03 +01:00
parent 532b057f59
commit 6e3a6590d6
6 changed files with 1128 additions and 252 deletions

View File

@@ -55,23 +55,23 @@ const SupplierSelectionStep: React.FC<WizardStepProps> = ({ dataRef, onDataChang
<div className="text-center pb-4 border-b border-[var(--border-primary)]">
<Building2 className="w-12 h-12 mx-auto mb-3 text-[var(--color-primary)]" />
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">
Seleccionar Proveedor
{t('purchaseOrder.supplierSelection.title')}
</h3>
<p className="text-sm text-[var(--text-secondary)]">
Elige el proveedor para esta orden de compra
{t('purchaseOrder.supplierSelection.description')}
</p>
</div>
{isError && (
<div className="p-3 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
Error al cargar proveedores
{t('purchaseOrder.supplierSelection.errorLoading')}
</div>
)}
{isLoading ? (
<div className="flex items-center justify-center py-12">
<Loader2 className="w-8 h-8 animate-spin text-[var(--color-primary)]" />
<span className="ml-3 text-[var(--text-secondary)]">Cargando proveedores...</span>
<span className="ml-3 text-[var(--text-secondary)]">{t('purchaseOrder.supplierSelection.loading')}</span>
</div>
) : (
<>
@@ -82,7 +82,7 @@ const SupplierSelectionStep: React.FC<WizardStepProps> = ({ dataRef, onDataChang
type="text"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
placeholder="Buscar proveedor por nombre o código..."
placeholder={t('purchaseOrder.supplierSelection.searchPlaceholder')}
className="w-full pl-10 pr-4 py-3 border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/>
</div>
@@ -92,8 +92,8 @@ const SupplierSelectionStep: React.FC<WizardStepProps> = ({ dataRef, onDataChang
{filteredSuppliers.length === 0 ? (
<div className="text-center py-8 border-2 border-dashed border-[var(--border-secondary)] rounded-lg">
<Building2 className="w-12 h-12 mx-auto mb-3 text-[var(--text-tertiary)]" />
<p className="text-[var(--text-secondary)] mb-1">No se encontraron proveedores</p>
<p className="text-sm text-[var(--text-tertiary)]">Intenta con una búsqueda diferente</p>
<p className="text-[var(--text-secondary)] mb-1">{t('purchaseOrder.supplierSelection.noSuppliers')}</p>
<p className="text-sm text-[var(--text-tertiary)]">{t('purchaseOrder.supplierSelection.tryDifferentSearch')}</p>
</div>
) : (
filteredSuppliers.map((supplier: any) => (
@@ -250,36 +250,36 @@ const AddItemsStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange }) => {
};
const unitOptions = [
{ value: 'kg', label: 'Kilogramos' },
{ value: 'g', label: 'Gramos' },
{ value: 'l', label: 'Litros' },
{ value: 'ml', label: 'Mililitros' },
{ value: 'units', label: 'Unidades' },
{ value: 'boxes', label: 'Cajas' },
{ value: 'bags', label: 'Bolsas' },
{ value: 'kg', label: t('purchaseOrder.orderItems.units.kg') },
{ value: 'g', label: t('purchaseOrder.orderItems.units.g') },
{ value: 'l', label: t('purchaseOrder.orderItems.units.l') },
{ value: 'ml', label: t('purchaseOrder.orderItems.units.ml') },
{ value: 'units', label: t('purchaseOrder.orderItems.units.units') },
{ value: 'boxes', label: t('purchaseOrder.orderItems.units.boxes') },
{ value: 'bags', label: t('purchaseOrder.orderItems.units.bags') },
];
return (
<div className="space-y-6">
<div className="text-center pb-4 border-b border-[var(--border-primary)]">
<Package className="w-12 h-12 mx-auto mb-3 text-[var(--color-primary)]" />
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">Productos a Comprar</h3>
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">{t('purchaseOrder.orderItems.titleHeader')}</h3>
<p className="text-sm text-[var(--text-secondary)]">
Proveedor: <span className="font-semibold">{data.supplier?.name || 'N/A'}</span>
{t('purchaseOrder.orderItems.supplier')}: <span className="font-semibold">{data.supplier?.name || 'N/A'}</span>
</p>
</div>
{isLoadingIngredients || isLoadingSupplierProducts ? (
<div className="flex items-center justify-center py-12">
<Loader2 className="w-8 h-8 animate-spin text-[var(--color-primary)]" />
<span className="ml-3 text-[var(--text-secondary)]">Cargando productos...</span>
<span className="ml-3 text-[var(--text-secondary)]">{t('purchaseOrder.orderItems.loadingProducts')}</span>
</div>
) : (
<>
<div className="space-y-3">
<div className="flex items-center justify-between">
<label className="block text-sm font-medium text-[var(--text-secondary)]">
Productos en la orden
{t('purchaseOrder.orderItems.productsInOrder')}
</label>
<button
onClick={handleAddItem}
@@ -287,7 +287,7 @@ const AddItemsStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange }) => {
className="px-3 py-1.5 text-sm bg-[var(--color-primary)] text-white rounded-md hover:bg-[var(--color-primary)]/90 transition-colors flex items-center gap-1 disabled:opacity-50 disabled:cursor-not-allowed"
>
<Plus className="w-4 h-4" />
Agregar Producto
{t('purchaseOrder.orderItems.addProduct')}
</button>
</div>
@@ -295,7 +295,7 @@ const AddItemsStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange }) => {
<div className="p-4 bg-amber-50 border border-amber-200 rounded-lg text-amber-700 text-sm flex items-center gap-2">
<AlertCircle className="w-5 h-5 flex-shrink-0" />
<span>
Este proveedor no tiene ingredientes asignados. Configura la lista de precios del proveedor primero.
{t('purchaseOrder.orderItems.noIngredientsForSupplier')}
</span>
</div>
)}
@@ -303,8 +303,8 @@ const AddItemsStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange }) => {
{(data.items || []).length === 0 ? (
<div className="text-center py-12 border-2 border-dashed border-[var(--border-secondary)] rounded-lg text-[var(--text-tertiary)]">
<Package className="w-12 h-12 mx-auto mb-3 opacity-50" />
<p className="mb-2">No hay productos en la orden</p>
<p className="text-sm">Haz clic en "Agregar Producto" para comenzar</p>
<p className="mb-2">{t('purchaseOrder.orderItems.noProducts')}</p>
<p className="text-sm">{t('purchaseOrder.orderItems.clickToAdd')}</p>
</div>
) : (
<div className="space-y-3">
@@ -315,7 +315,7 @@ const AddItemsStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange }) => {
>
<div className="flex items-center justify-between">
<span className="text-sm font-semibold text-[var(--text-primary)]">
Producto #{index + 1}
{t('purchaseOrder.orderItems.productNumber', { number: index + 1 })}
</span>
<button
onClick={() => handleRemoveItem(index)}
@@ -328,14 +328,14 @@ const AddItemsStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange }) => {
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<div className="md:col-span-2">
<label className="block text-xs font-medium text-[var(--text-secondary)] mb-1">
Ingrediente *
{t('purchaseOrder.orderItems.ingredient')} *
</label>
<select
value={item.inventory_product_id}
onChange={(e) => handleUpdateItem(index, 'inventory_product_id', e.target.value)}
className="w-full px-3 py-2 text-sm border border-[var(--border-secondary)] rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
>
<option value="">Seleccionar ingrediente...</option>
<option value="">{t('purchaseOrder.orderItems.selectIngredient')}</option>
{ingredientsData.map((product: any) => (
<option key={product.id} value={product.id}>
{product.name} - {(product.last_purchase_price || product.average_cost || 0).toFixed(2)} /{' '}
@@ -347,7 +347,7 @@ const AddItemsStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange }) => {
<div>
<label className="block text-xs font-medium text-[var(--text-secondary)] mb-1">
Cantidad *
{t('purchaseOrder.orderItems.quantity')} *
</label>
<input
type="number"
@@ -362,7 +362,7 @@ const AddItemsStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange }) => {
</div>
<div>
<label className="block text-xs font-medium text-[var(--text-secondary)] mb-1">Unidad *</label>
<label className="block text-xs font-medium text-[var(--text-secondary)] mb-1">{t('purchaseOrder.orderItems.unit')} *</label>
<select
value={item.unit_of_measure}
onChange={(e) => handleUpdateItem(index, 'unit_of_measure', e.target.value)}
@@ -378,7 +378,7 @@ const AddItemsStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange }) => {
<div className="md:col-span-2">
<label className="block text-xs font-medium text-[var(--text-secondary)] mb-1">
Precio Unitario () *
{t('purchaseOrder.orderItems.unitPrice')} *
</label>
<input
type="number"
@@ -393,7 +393,7 @@ const AddItemsStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange }) => {
<div className="pt-2 border-t border-[var(--border-primary)] text-sm">
<span className="font-semibold text-[var(--text-primary)]">
Subtotal: {item.subtotal.toFixed(2)}
{t('purchaseOrder.orderItems.subtotal')}: {item.subtotal.toFixed(2)}
</span>
</div>
</div>
@@ -404,7 +404,7 @@ const AddItemsStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange }) => {
{(data.items || []).length > 0 && (
<div className="p-4 bg-gradient-to-r from-[var(--color-primary)]/5 to-[var(--color-primary)]/10 rounded-lg border-2 border-[var(--color-primary)]/20">
<div className="flex justify-between items-center">
<span className="text-lg font-semibold text-[var(--text-primary)]">Total:</span>
<span className="text-lg font-semibold text-[var(--text-primary)]">{t('purchaseOrder.orderItems.total')}:</span>
<span className="text-2xl font-bold text-[var(--color-primary)]">{calculateTotal().toFixed(2)}</span>
</div>
</div>
@@ -430,24 +430,24 @@ const OrderDetailsStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange })
};
const priorityOptions = [
{ value: 'low', label: 'Baja' },
{ value: 'normal', label: 'Normal' },
{ value: 'high', label: 'Alta' },
{ value: 'critical', label: 'Crítica' },
{ value: 'low', label: t('purchaseOrder.orderDetails.priorityOptions.low') },
{ value: 'normal', label: t('purchaseOrder.orderDetails.priorityOptions.normal') },
{ value: 'high', label: t('purchaseOrder.orderDetails.priorityOptions.high') },
{ value: 'critical', label: t('purchaseOrder.orderDetails.priorityOptions.critical') },
];
return (
<div className="space-y-6">
<div className="text-center pb-4 border-b border-[var(--border-primary)]">
<Calendar className="w-12 h-12 mx-auto mb-3 text-[var(--color-primary)]" />
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">Detalles de la Orden</h3>
<p className="text-sm text-[var(--text-secondary)]">Configura fecha de entrega y prioridad</p>
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">{t('purchaseOrder.orderDetails.title')}</h3>
<p className="text-sm text-[var(--text-secondary)]">{t('purchaseOrder.orderDetails.description')}</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
Fecha de Entrega Requerida *
{t('purchaseOrder.orderDetails.requiredDeliveryDate')} *
</label>
<input
type="date"
@@ -459,7 +459,7 @@ const OrderDetailsStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange })
</div>
<div>
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">Prioridad *</label>
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">{t('purchaseOrder.orderDetails.priority')} *</label>
<select
value={getValue('priority', 'normal')}
onChange={(e) => handleFieldChange({ priority: e.target.value })}
@@ -475,12 +475,12 @@ const OrderDetailsStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange })
<div className="md:col-span-2">
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
Notas (Opcional)
{t('purchaseOrder.orderDetails.notes')}
</label>
<textarea
value={getValue('notes')}
onChange={(e) => handleFieldChange({ notes: e.target.value })}
placeholder="Instrucciones especiales para el proveedor..."
placeholder={t('purchaseOrder.orderDetails.notesPlaceholder')}
rows={4}
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)] bg-[var(--bg-primary)] text-[var(--text-primary)]"
/>
@@ -488,12 +488,12 @@ const OrderDetailsStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange })
</div>
<AdvancedOptionsSection
title="Opciones Avanzadas"
description="Información financiera adicional"
title={t('purchaseOrder.advancedOptions.title')}
description={t('purchaseOrder.advancedOptions.description')}
>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div>
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">Impuestos ()</label>
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">{t('purchaseOrder.advancedOptions.tax')}</label>
<input
type="number"
value={getValue('tax_amount', 0)}
@@ -505,7 +505,7 @@ const OrderDetailsStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange })
</div>
<div>
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">Costo de Envío ()</label>
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">{t('purchaseOrder.advancedOptions.shippingCost')}</label>
<input
type="number"
value={getValue('shipping_cost', 0)}
@@ -517,7 +517,7 @@ const OrderDetailsStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange })
</div>
<div>
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">Descuento ()</label>
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">{t('purchaseOrder.advancedOptions.discount')}</label>
<input
type="number"
value={getValue('discount_amount', 0)}
@@ -554,28 +554,28 @@ const ReviewSubmitStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange })
<div className="space-y-6">
<div className="text-center pb-4 border-b border-[var(--border-primary)]">
<CheckCircle2 className="w-12 h-12 mx-auto mb-3 text-[var(--color-primary)]" />
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">Revisar y Confirmar</h3>
<p className="text-sm text-[var(--text-secondary)]">Verifica los detalles antes de crear la orden</p>
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-2">{t('purchaseOrder.review.title')}</h3>
<p className="text-sm text-[var(--text-secondary)]">{t('purchaseOrder.review.description')}</p>
</div>
{/* Supplier Info */}
<div className="p-4 bg-[var(--bg-secondary)]/50 rounded-lg border border-[var(--border-secondary)]">
<h4 className="font-semibold text-[var(--text-primary)] mb-3 flex items-center gap-2">
<Building2 className="w-5 h-5" />
Información del Proveedor
{t('purchaseOrder.review.supplierInfo')}
</h4>
<div className="space-y-2 text-sm">
<div className="flex justify-between">
<span className="text-[var(--text-secondary)]">Proveedor:</span>
<span className="text-[var(--text-secondary)]">{t('purchaseOrder.review.supplier')}:</span>
<span className="font-medium">{data.supplier?.name || 'N/A'}</span>
</div>
<div className="flex justify-between">
<span className="text-[var(--text-secondary)]">Código:</span>
<span className="text-[var(--text-secondary)]">{t('purchaseOrder.review.code')}:</span>
<span className="font-medium">{data.supplier?.supplier_code || 'N/A'}</span>
</div>
{data.supplier?.email && (
<div className="flex justify-between">
<span className="text-[var(--text-secondary)]">Email:</span>
<span className="text-[var(--text-secondary)]">{t('purchaseOrder.review.email')}:</span>
<span className="font-medium">{data.supplier.email}</span>
</div>
)}
@@ -586,24 +586,24 @@ const ReviewSubmitStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange })
<div className="p-4 bg-[var(--bg-secondary)]/50 rounded-lg border border-[var(--border-secondary)]">
<h4 className="font-semibold text-[var(--text-primary)] mb-3 flex items-center gap-2">
<Calendar className="w-5 h-5" />
Detalles de la Orden
{t('purchaseOrder.review.orderDetails')}
</h4>
<div className="space-y-2 text-sm">
<div className="flex justify-between">
<span className="text-[var(--text-secondary)]">Fecha de Entrega:</span>
<span className="text-[var(--text-secondary)]">{t('purchaseOrder.review.deliveryDate')}:</span>
<span className="font-medium">
{data.required_delivery_date
? new Date(data.required_delivery_date).toLocaleDateString('es-ES')
: 'No especificada'}
: t('purchaseOrder.review.notSpecified')}
</span>
</div>
<div className="flex justify-between">
<span className="text-[var(--text-secondary)]">Prioridad:</span>
<span className="text-[var(--text-secondary)]">{t('purchaseOrder.review.priority')}:</span>
<span className="font-medium capitalize">{data.priority || 'normal'}</span>
</div>
{data.notes && (
<div className="pt-2 border-t border-[var(--border-primary)]">
<span className="text-[var(--text-secondary)] block mb-1">Notas:</span>
<span className="text-[var(--text-secondary)] block mb-1">{t('purchaseOrder.review.notes')}:</span>
<span className="font-medium">{data.notes}</span>
</div>
)}
@@ -614,7 +614,7 @@ const ReviewSubmitStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange })
<div className="p-4 bg-[var(--bg-secondary)]/50 rounded-lg border border-[var(--border-secondary)]">
<h4 className="font-semibold text-[var(--text-primary)] mb-3 flex items-center gap-2">
<Package className="w-5 h-5" />
Productos ({(data.items || []).length})
{t('purchaseOrder.review.products')} ({(data.items || []).length})
</h4>
<div className="space-y-2">
{(data.items || []).map((item: any, index: number) => (
@@ -623,7 +623,7 @@ const ReviewSubmitStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange })
className="flex justify-between items-start p-3 bg-[var(--bg-primary)] rounded-lg border border-[var(--border-secondary)]"
>
<div className="flex-1">
<p className="font-medium text-[var(--text-primary)]">{item.product_name || 'Producto sin nombre'}</p>
<p className="font-medium text-[var(--text-primary)]">{item.product_name || t('purchaseOrder.review.productNoName')}</p>
<p className="text-sm text-[var(--text-secondary)]">
{item.ordered_quantity} {item.unit_of_measure} × {item.unit_price.toFixed(2)}
</p>
@@ -640,33 +640,33 @@ const ReviewSubmitStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange })
<div className="p-4 bg-gradient-to-r from-[var(--color-primary)]/5 to-[var(--color-primary)]/10 rounded-lg border-2 border-[var(--color-primary)]/20">
<h4 className="font-semibold text-[var(--text-primary)] mb-3 flex items-center gap-2">
<TrendingUp className="w-5 h-5" />
Resumen Financiero
{t('purchaseOrder.review.financialSummary')}
</h4>
<div className="space-y-2 text-sm">
<div className="flex justify-between">
<span className="text-[var(--text-secondary)]">Subtotal:</span>
<span className="text-[var(--text-secondary)]">{t('purchaseOrder.review.subtotal')}:</span>
<span className="font-medium">{calculateSubtotal().toFixed(2)}</span>
</div>
{(data.tax_amount || 0) > 0 && (
<div className="flex justify-between">
<span className="text-[var(--text-secondary)]">Impuestos:</span>
<span className="text-[var(--text-secondary)]">{t('purchaseOrder.review.taxes')}:</span>
<span className="font-medium">{(data.tax_amount || 0).toFixed(2)}</span>
</div>
)}
{(data.shipping_cost || 0) > 0 && (
<div className="flex justify-between">
<span className="text-[var(--text-secondary)]">Costo de Envío:</span>
<span className="text-[var(--text-secondary)]">{t('purchaseOrder.review.shipping')}:</span>
<span className="font-medium">{(data.shipping_cost || 0).toFixed(2)}</span>
</div>
)}
{(data.discount_amount || 0) > 0 && (
<div className="flex justify-between">
<span className="text-[var(--text-secondary)]">Descuento:</span>
<span className="text-[var(--text-secondary)]">{t('purchaseOrder.review.discount')}:</span>
<span className="font-medium text-green-600">-{(data.discount_amount || 0).toFixed(2)}</span>
</div>
)}
<div className="pt-2 border-t-2 border-[var(--color-primary)]/30 flex justify-between">
<span className="text-lg font-semibold text-[var(--text-primary)]">Total:</span>
<span className="text-lg font-semibold text-[var(--text-primary)]">{t('purchaseOrder.review.total')}:</span>
<span className="text-2xl font-bold text-[var(--color-primary)]">{calculateTotal().toFixed(2)}</span>
</div>
</div>
@@ -677,17 +677,17 @@ const ReviewSubmitStep: React.FC<WizardStepProps> = ({ dataRef, onDataChange })
export const PurchaseOrderWizardSteps = (
dataRef: React.MutableRefObject<Record<string, any>>,
setData: (data: Record<string, any>) => void
_setData: (data: Record<string, any>) => void
): WizardStep[] => {
return [
{
id: 'supplier-selection',
title: 'Seleccionar Proveedor',
title: 'Seleccionar Proveedor', // Will be translated in UnifiedAddWizard
component: SupplierSelectionStep,
validate: () => {
const data = dataRef.current;
if (!data.supplier_id) {
return 'Debes seleccionar un proveedor';
throw new Error('Debes seleccionar un proveedor');
}
return true;
},
@@ -699,13 +699,13 @@ export const PurchaseOrderWizardSteps = (
validate: () => {
const data = dataRef.current;
if (!data.items || data.items.length === 0) {
return 'Debes agregar al menos un producto';
throw new Error('Debes agregar al menos un producto');
}
const invalidItems = data.items.some(
(item: any) => !item.inventory_product_id || item.ordered_quantity < 0.01 || item.unit_price < 0.01
);
if (invalidItems) {
return 'Todos los productos deben tener ingrediente, cantidad mayor a 0 y precio mayor a 0';
throw new Error('Todos los productos deben tener ingrediente, cantidad mayor a 0 y precio mayor a 0');
}
return true;
},
@@ -717,7 +717,7 @@ export const PurchaseOrderWizardSteps = (
validate: () => {
const data = dataRef.current;
if (!data.required_delivery_date) {
return 'Debes especificar una fecha de entrega';
throw new Error('Debes especificar una fecha de entrega');
}
return true;
},