Fix UI for inventory page
This commit is contained in:
Urtzi Alfaro
@@ -113,6 +113,8 @@ export type {
|
||||
PaginatedResponse,
|
||||
} from './types/inventory';
|
||||
|
||||
export { ProductType } from './types/inventory';
|
||||
|
||||
// Types - Classification
|
||||
export type {
|
||||
ProductClassificationRequest,
|
||||
|
||||
@@ -2,6 +2,52 @@
|
||||
* Inventory API Types - Mirror backend schemas
|
||||
*/
|
||||
|
||||
// Enums - Mirror backend enum definitions
|
||||
export enum ProductType {
|
||||
INGREDIENT = 'ingredient',
|
||||
FINISHED_PRODUCT = 'finished_product'
|
||||
}
|
||||
|
||||
export enum UnitOfMeasure {
|
||||
KILOGRAMS = 'kg',
|
||||
GRAMS = 'g',
|
||||
LITERS = 'l',
|
||||
MILLILITERS = 'ml',
|
||||
UNITS = 'units',
|
||||
PIECES = 'pcs',
|
||||
PACKAGES = 'pkg',
|
||||
BAGS = 'bags',
|
||||
BOXES = 'boxes'
|
||||
}
|
||||
|
||||
export enum IngredientCategory {
|
||||
FLOUR = 'flour',
|
||||
YEAST = 'yeast',
|
||||
DAIRY = 'dairy',
|
||||
EGGS = 'eggs',
|
||||
SUGAR = 'sugar',
|
||||
FATS = 'fats',
|
||||
SALT = 'salt',
|
||||
SPICES = 'spices',
|
||||
ADDITIVES = 'additives',
|
||||
PACKAGING = 'packaging',
|
||||
CLEANING = 'cleaning',
|
||||
OTHER = 'other'
|
||||
}
|
||||
|
||||
export enum ProductCategory {
|
||||
BREAD = 'bread',
|
||||
CROISSANTS = 'croissants',
|
||||
PASTRIES = 'pastries',
|
||||
CAKES = 'cakes',
|
||||
COOKIES = 'cookies',
|
||||
MUFFINS = 'muffins',
|
||||
SANDWICHES = 'sandwiches',
|
||||
SEASONAL = 'seasonal',
|
||||
BEVERAGES = 'beverages',
|
||||
OTHER_PRODUCTS = 'other_products'
|
||||
}
|
||||
|
||||
// Base Inventory Types
|
||||
export interface IngredientCreate {
|
||||
name: string;
|
||||
@@ -24,16 +70,28 @@ export interface IngredientUpdate {
|
||||
name?: string;
|
||||
description?: string;
|
||||
category?: string;
|
||||
subcategory?: string;
|
||||
brand?: string;
|
||||
unit_of_measure?: string;
|
||||
package_size?: number;
|
||||
average_cost?: number;
|
||||
last_purchase_price?: number;
|
||||
standard_cost?: number;
|
||||
low_stock_threshold?: number;
|
||||
max_stock_level?: number;
|
||||
reorder_point?: number;
|
||||
shelf_life_days?: number;
|
||||
reorder_quantity?: number;
|
||||
max_stock_level?: number;
|
||||
requires_refrigeration?: boolean;
|
||||
requires_freezing?: boolean;
|
||||
storage_temperature_min?: number;
|
||||
storage_temperature_max?: number;
|
||||
storage_humidity_max?: number;
|
||||
shelf_life_days?: number;
|
||||
storage_instructions?: string;
|
||||
is_active?: boolean;
|
||||
is_perishable?: boolean;
|
||||
is_seasonal?: boolean;
|
||||
supplier_id?: string;
|
||||
average_cost?: number;
|
||||
allergen_info?: any;
|
||||
notes?: string;
|
||||
}
|
||||
|
||||
@@ -42,26 +100,42 @@ export interface IngredientResponse {
|
||||
tenant_id: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
product_type: ProductType;
|
||||
category: string;
|
||||
subcategory?: string;
|
||||
brand?: string;
|
||||
unit_of_measure: string;
|
||||
package_size?: number;
|
||||
average_cost?: number;
|
||||
last_purchase_price?: number;
|
||||
standard_cost?: number;
|
||||
low_stock_threshold: number;
|
||||
max_stock_level: number;
|
||||
reorder_point: number;
|
||||
shelf_life_days?: number;
|
||||
reorder_quantity: number;
|
||||
max_stock_level?: number;
|
||||
requires_refrigeration: boolean;
|
||||
requires_freezing: boolean;
|
||||
is_seasonal: boolean;
|
||||
supplier_id?: string;
|
||||
average_cost?: number;
|
||||
notes?: string;
|
||||
current_stock_level: number;
|
||||
available_stock: number;
|
||||
reserved_stock: number;
|
||||
stock_status: 'in_stock' | 'low_stock' | 'out_of_stock' | 'overstock';
|
||||
last_restocked?: string;
|
||||
storage_temperature_min?: number;
|
||||
storage_temperature_max?: number;
|
||||
storage_humidity_max?: number;
|
||||
shelf_life_days?: number;
|
||||
storage_instructions?: string;
|
||||
is_active: boolean;
|
||||
is_perishable: boolean;
|
||||
is_seasonal?: boolean;
|
||||
allergen_info?: any;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
created_by?: string;
|
||||
|
||||
// Computed fields
|
||||
current_stock?: number;
|
||||
is_low_stock?: boolean;
|
||||
needs_reorder?: boolean;
|
||||
stock_status?: 'in_stock' | 'low_stock' | 'out_of_stock' | 'overstock';
|
||||
last_restocked?: string;
|
||||
supplier_id?: string;
|
||||
notes?: string;
|
||||
}
|
||||
|
||||
// Stock Management Types
|
||||
|
||||
389
frontend/src/components/domain/inventory/InventoryModal.tsx
Normal file
389
frontend/src/components/domain/inventory/InventoryModal.tsx
Normal file
@@ -0,0 +1,389 @@
|
||||
import React from 'react';
|
||||
import { Layers, Settings, Calculator, FileText, Calendar } from 'lucide-react';
|
||||
import { StatusModal, StatusModalSection, getStatusColor } from '../../ui';
|
||||
import { IngredientResponse, ProductType, UnitOfMeasure, IngredientCategory, ProductCategory, IngredientCreate, IngredientUpdate } from '../../../api/types/inventory';
|
||||
|
||||
export interface InventoryModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
mode: 'create' | 'view' | 'edit';
|
||||
onModeChange?: (mode: 'view' | 'edit') => void;
|
||||
selectedItem?: IngredientResponse | null;
|
||||
formData: Partial<IngredientCreate & IngredientUpdate & { initial_stock?: number; product_type?: string }>;
|
||||
onFieldChange: (sectionIndex: number, fieldIndex: number, value: string | number) => void;
|
||||
onSave: () => Promise<void>;
|
||||
onCancel: () => void;
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Unified Inventory Modal Component
|
||||
* Handles create, view, and edit modes with consistent styling and UX
|
||||
*/
|
||||
export const InventoryModal: React.FC<InventoryModalProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
mode,
|
||||
onModeChange,
|
||||
selectedItem,
|
||||
formData,
|
||||
onFieldChange,
|
||||
onSave,
|
||||
onCancel,
|
||||
loading = false
|
||||
}) => {
|
||||
const isCreating = mode === 'create';
|
||||
const isEditing = mode === 'edit';
|
||||
const isViewing = mode === 'view';
|
||||
|
||||
// Helper functions to get dropdown options
|
||||
const getUnitOfMeasureOptions = () => {
|
||||
return Object.entries(UnitOfMeasure).map(([, value]) => ({
|
||||
label: value,
|
||||
value: value
|
||||
}));
|
||||
};
|
||||
|
||||
const getCategoryOptions = (productType?: ProductType) => {
|
||||
if (productType === ProductType.INGREDIENT) {
|
||||
return Object.entries(IngredientCategory).map(([, value]) => ({
|
||||
label: value.charAt(0).toUpperCase() + value.slice(1).replace('_', ' '),
|
||||
value: value
|
||||
}));
|
||||
} else {
|
||||
return Object.entries(ProductCategory).map(([, value]) => ({
|
||||
label: value.charAt(0).toUpperCase() + value.slice(1).replace('_', ' '),
|
||||
value: value
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
// Get status indicator based on mode and item
|
||||
const getStatusIndicator = () => {
|
||||
if (isCreating) {
|
||||
return undefined; // No status indicator for create mode to reduce clutter
|
||||
}
|
||||
|
||||
if (!selectedItem) return undefined;
|
||||
|
||||
const { stock_status } = selectedItem;
|
||||
|
||||
switch (stock_status) {
|
||||
case 'out_of_stock':
|
||||
return {
|
||||
color: getStatusColor('cancelled'),
|
||||
text: 'Sin Stock',
|
||||
icon: Calendar,
|
||||
isCritical: true,
|
||||
isHighlight: false
|
||||
};
|
||||
case 'low_stock':
|
||||
return {
|
||||
color: getStatusColor('pending'),
|
||||
text: 'Stock Bajo',
|
||||
icon: Calendar,
|
||||
isCritical: false,
|
||||
isHighlight: true
|
||||
};
|
||||
case 'overstock':
|
||||
return {
|
||||
color: getStatusColor('info'),
|
||||
text: 'Sobrestock',
|
||||
icon: Calendar,
|
||||
isCritical: false,
|
||||
isHighlight: false
|
||||
};
|
||||
case 'in_stock':
|
||||
default:
|
||||
return {
|
||||
color: getStatusColor('completed'),
|
||||
text: 'Normal',
|
||||
icon: Calendar,
|
||||
isCritical: false,
|
||||
isHighlight: false
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
// Get modal title based on mode
|
||||
const getTitle = () => {
|
||||
if (isCreating) return 'Nuevo Artículo';
|
||||
return selectedItem?.name || 'Artículo de Inventario';
|
||||
};
|
||||
|
||||
// Get modal subtitle based on mode
|
||||
const getSubtitle = () => {
|
||||
if (isCreating) return ''; // No subtitle for create mode
|
||||
if (!selectedItem) return '';
|
||||
|
||||
const category = selectedItem.category || '';
|
||||
const description = selectedItem.description || '';
|
||||
return `${category}${description ? ` - ${description}` : ''}`;
|
||||
};
|
||||
|
||||
// Define modal sections with create-mode simplification
|
||||
const sections: StatusModalSection[] = isCreating ? [
|
||||
// SIMPLIFIED CREATE MODE - Only essential fields
|
||||
{
|
||||
title: 'Información Básica',
|
||||
icon: Layers,
|
||||
fields: [
|
||||
{
|
||||
label: 'Tipo de producto',
|
||||
value: formData.product_type || ProductType.INGREDIENT,
|
||||
type: 'select',
|
||||
editable: true,
|
||||
required: true,
|
||||
placeholder: 'Seleccionar tipo',
|
||||
options: [
|
||||
{ label: 'Ingrediente', value: ProductType.INGREDIENT },
|
||||
{ label: 'Producto Final', value: ProductType.FINISHED_PRODUCT }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Nombre',
|
||||
value: formData.name || '',
|
||||
highlight: true,
|
||||
editable: true,
|
||||
required: true,
|
||||
placeholder: 'Ej: Harina de trigo o Croissant de chocolate'
|
||||
},
|
||||
{
|
||||
label: 'Categoría',
|
||||
value: formData.category || '',
|
||||
type: 'select',
|
||||
editable: true,
|
||||
required: true,
|
||||
placeholder: 'Seleccionar categoría',
|
||||
options: getCategoryOptions(formData.product_type as ProductType || ProductType.INGREDIENT)
|
||||
},
|
||||
{
|
||||
label: 'Unidad de medida',
|
||||
value: formData.unit_of_measure || '',
|
||||
type: 'select',
|
||||
editable: true,
|
||||
required: true,
|
||||
placeholder: 'Seleccionar unidad',
|
||||
options: getUnitOfMeasureOptions()
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Configuración de Stock',
|
||||
icon: Settings,
|
||||
fields: [
|
||||
{
|
||||
label: 'Stock inicial (opcional)',
|
||||
value: formData.initial_stock || '',
|
||||
type: 'number' as const,
|
||||
editable: true,
|
||||
required: false,
|
||||
placeholder: 'Ej: 50 (si ya tienes este producto)'
|
||||
},
|
||||
{
|
||||
label: 'Umbral mínimo',
|
||||
value: formData.low_stock_threshold || 10,
|
||||
type: 'number' as const,
|
||||
editable: true,
|
||||
required: true,
|
||||
placeholder: 'Ej: 10'
|
||||
},
|
||||
{
|
||||
label: 'Punto de reorden',
|
||||
value: formData.reorder_point || 20,
|
||||
type: 'number' as const,
|
||||
editable: true,
|
||||
required: true,
|
||||
placeholder: 'Ej: 20'
|
||||
}
|
||||
]
|
||||
}
|
||||
] : [
|
||||
// FULL VIEW/EDIT MODE - Complete information
|
||||
{
|
||||
title: 'Información Básica',
|
||||
icon: Layers,
|
||||
fields: [
|
||||
{
|
||||
label: 'Nombre',
|
||||
value: formData.name || selectedItem?.name || '',
|
||||
highlight: true,
|
||||
editable: isEditing,
|
||||
required: true,
|
||||
placeholder: 'Nombre del ingrediente'
|
||||
},
|
||||
{
|
||||
label: 'Categoría',
|
||||
value: formData.category || selectedItem?.category || '',
|
||||
type: 'select',
|
||||
editable: isEditing,
|
||||
placeholder: 'Seleccionar categoría',
|
||||
options: getCategoryOptions(selectedItem?.product_type || ProductType.INGREDIENT)
|
||||
},
|
||||
{
|
||||
label: 'Descripción',
|
||||
value: formData.description || selectedItem?.description || '',
|
||||
editable: isEditing,
|
||||
placeholder: 'Descripción del producto'
|
||||
},
|
||||
{
|
||||
label: 'Unidad de medida',
|
||||
value: formData.unit_of_measure || selectedItem?.unit_of_measure || '',
|
||||
type: 'select',
|
||||
editable: isEditing,
|
||||
required: true,
|
||||
placeholder: 'Seleccionar unidad',
|
||||
options: getUnitOfMeasureOptions()
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Gestión de Stock',
|
||||
icon: Settings,
|
||||
fields: [
|
||||
{
|
||||
label: 'Stock actual',
|
||||
value: `${Number(selectedItem?.current_stock) || 0} ${selectedItem?.unit_of_measure || ''}`,
|
||||
highlight: true
|
||||
},
|
||||
{
|
||||
label: 'Umbral mínimo',
|
||||
value: formData.low_stock_threshold || selectedItem?.low_stock_threshold || 10,
|
||||
type: 'number' as const,
|
||||
editable: isEditing,
|
||||
required: true,
|
||||
placeholder: 'Cantidad mínima'
|
||||
},
|
||||
{
|
||||
label: 'Stock máximo',
|
||||
value: formData.max_stock_level || selectedItem?.max_stock_level || '',
|
||||
type: 'number' as const,
|
||||
editable: isEditing,
|
||||
placeholder: 'Cantidad máxima (opcional)'
|
||||
},
|
||||
{
|
||||
label: 'Punto de reorden',
|
||||
value: formData.reorder_point || selectedItem?.reorder_point || 20,
|
||||
type: 'number' as const,
|
||||
editable: isEditing,
|
||||
required: true,
|
||||
placeholder: 'Punto de reorden'
|
||||
},
|
||||
{
|
||||
label: 'Cantidad a reordenar',
|
||||
value: formData.reorder_quantity || selectedItem?.reorder_quantity || 50,
|
||||
type: 'number' as const,
|
||||
editable: isEditing,
|
||||
required: true,
|
||||
placeholder: 'Cantidad por pedido'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Información Financiera',
|
||||
icon: Calculator,
|
||||
fields: [
|
||||
{
|
||||
label: 'Costo promedio por unidad',
|
||||
value: formData.average_cost || selectedItem?.average_cost || 0,
|
||||
type: 'currency',
|
||||
editable: isEditing,
|
||||
placeholder: 'Costo por unidad'
|
||||
},
|
||||
{
|
||||
label: 'Valor total en stock',
|
||||
value: (Number(selectedItem?.current_stock) || 0) * (Number(formData.average_cost || selectedItem?.average_cost) || 0),
|
||||
type: 'currency' as const,
|
||||
highlight: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Información Adicional',
|
||||
icon: Calendar,
|
||||
fields: [
|
||||
{
|
||||
label: 'Último restock',
|
||||
value: selectedItem?.last_restocked || 'Sin historial',
|
||||
type: selectedItem?.last_restocked ? 'datetime' as const : 'text' as const
|
||||
},
|
||||
{
|
||||
label: 'Vida útil (días)',
|
||||
value: formData.shelf_life_days || selectedItem?.shelf_life_days || '',
|
||||
type: 'number',
|
||||
editable: isEditing,
|
||||
placeholder: 'Días de vida útil'
|
||||
},
|
||||
{
|
||||
label: 'Requiere refrigeración',
|
||||
value: (formData.requires_refrigeration !== undefined ? formData.requires_refrigeration : selectedItem?.requires_refrigeration) ? 'Sí' : 'No',
|
||||
type: 'select',
|
||||
editable: isEditing,
|
||||
options: [
|
||||
{ label: 'No', value: 'false' },
|
||||
{ label: 'Sí', value: 'true' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Requiere congelación',
|
||||
value: (formData.requires_freezing !== undefined ? formData.requires_freezing : selectedItem?.requires_freezing) ? 'Sí' : 'No',
|
||||
type: 'select',
|
||||
editable: isEditing,
|
||||
options: [
|
||||
{ label: 'No', value: 'false' },
|
||||
{ label: 'Sí', value: 'true' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Producto estacional',
|
||||
value: (formData.is_seasonal !== undefined ? formData.is_seasonal : selectedItem?.is_seasonal) ? 'Sí' : 'No',
|
||||
type: 'select',
|
||||
editable: isEditing,
|
||||
options: [
|
||||
{ label: 'No', value: 'false' },
|
||||
{ label: 'Sí', value: 'true' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Creado',
|
||||
value: selectedItem?.created_at,
|
||||
type: 'datetime' as const
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Notas',
|
||||
icon: FileText,
|
||||
fields: [
|
||||
{
|
||||
label: 'Observaciones',
|
||||
value: formData.notes || selectedItem?.notes || '',
|
||||
span: 2 as const,
|
||||
editable: isEditing,
|
||||
placeholder: 'Notas adicionales sobre el producto'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<StatusModal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
mode={isViewing ? 'view' : 'edit'}
|
||||
onModeChange={onModeChange}
|
||||
title={getTitle()}
|
||||
subtitle={getSubtitle()}
|
||||
statusIndicator={getStatusIndicator()}
|
||||
size="lg"
|
||||
sections={sections}
|
||||
onFieldChange={onFieldChange}
|
||||
onSave={onSave}
|
||||
onCancel={onCancel}
|
||||
loading={loading}
|
||||
showDefaultActions={true}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default InventoryModal;
|
||||
@@ -3,6 +3,7 @@ export { default as InventoryTable, type InventoryTableProps } from './Inventory
|
||||
export { default as StockLevelIndicator, type StockLevelIndicatorProps, useStockLevels } from './StockLevelIndicator';
|
||||
export { default as InventoryForm, type InventoryFormProps } from './InventoryForm';
|
||||
export { default as LowStockAlert, type LowStockAlertProps } from './LowStockAlert';
|
||||
export { default as InventoryModal, type InventoryModalProps } from './InventoryModal';
|
||||
|
||||
// Re-export related types from inventory types
|
||||
export type {
|
||||
|
||||
@@ -9,7 +9,7 @@ import { formatters } from '../Stats/StatsPresets';
|
||||
export interface StatusModalField {
|
||||
label: string;
|
||||
value: string | number | React.ReactNode;
|
||||
type?: 'text' | 'currency' | 'date' | 'datetime' | 'percentage' | 'list' | 'status' | 'image' | 'email' | 'tel' | 'number';
|
||||
type?: 'text' | 'currency' | 'date' | 'datetime' | 'percentage' | 'list' | 'status' | 'image' | 'email' | 'tel' | 'number' | 'select';
|
||||
highlight?: boolean;
|
||||
span?: 1 | 2; // For grid layout
|
||||
editable?: boolean; // Whether this field can be edited
|
||||
@@ -52,6 +52,7 @@ export interface StatusModalProps {
|
||||
onEdit?: () => void;
|
||||
onSave?: () => Promise<void>;
|
||||
onCancel?: () => void;
|
||||
onFieldChange?: (sectionIndex: number, fieldIndex: number, value: string | number) => void;
|
||||
|
||||
// Layout
|
||||
size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
||||
@@ -186,6 +187,26 @@ const renderEditableField = (
|
||||
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent"
|
||||
/>
|
||||
);
|
||||
case 'select':
|
||||
return (
|
||||
<select
|
||||
value={String(field.value)}
|
||||
onChange={(e) => onChange?.(e.target.value)}
|
||||
required={field.required}
|
||||
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent bg-[var(--bg-primary)]"
|
||||
>
|
||||
{field.placeholder && (
|
||||
<option value="" disabled>
|
||||
{field.placeholder}
|
||||
</option>
|
||||
)}
|
||||
{field.options?.map((option, index) => (
|
||||
<option key={index} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<Input
|
||||
@@ -219,6 +240,7 @@ export const StatusModal: React.FC<StatusModalProps> = ({
|
||||
onEdit,
|
||||
onSave,
|
||||
onCancel,
|
||||
onFieldChange,
|
||||
size = 'lg',
|
||||
loading = false,
|
||||
}) => {
|
||||
@@ -364,11 +386,11 @@ export const StatusModal: React.FC<StatusModalProps> = ({
|
||||
<div className="space-y-6">
|
||||
{sections.map((section, sectionIndex) => (
|
||||
<div key={sectionIndex} className="space-y-4">
|
||||
<div className="flex items-center gap-2 pb-2 border-b border-[var(--border-primary)]">
|
||||
<div className="flex items-baseline gap-3 pb-3 border-b border-[var(--border-primary)]">
|
||||
{section.icon && (
|
||||
<section.icon className="w-4 h-4 text-[var(--text-tertiary)]" />
|
||||
<section.icon className="w-5 h-5 text-[var(--text-secondary)] flex-shrink-0 mt-0.5" />
|
||||
)}
|
||||
<h3 className="font-medium text-[var(--text-primary)]">
|
||||
<h3 className="font-medium text-[var(--text-primary)] leading-tight">
|
||||
{section.title}
|
||||
</h3>
|
||||
</div>
|
||||
@@ -387,7 +409,11 @@ export const StatusModal: React.FC<StatusModalProps> = ({
|
||||
? 'font-semibold text-[var(--text-primary)]'
|
||||
: 'text-[var(--text-primary)]'
|
||||
}`}>
|
||||
{renderEditableField(field, mode === 'edit')}
|
||||
{renderEditableField(
|
||||
field,
|
||||
mode === 'edit',
|
||||
(value: string | number) => onFieldChange?.(sectionIndex, fieldIndex, value)
|
||||
)}
|
||||
</dd>
|
||||
</div>
|
||||
))}
|
||||
|
||||
@@ -1,34 +1,42 @@
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import { Plus, Download, AlertTriangle, Package, Clock, CheckCircle, Eye, Edit, Calendar, DollarSign, ArrowRight, TrendingUp, Shield } from 'lucide-react';
|
||||
import { Plus, AlertTriangle, Package, CheckCircle, Eye, Edit, Clock, Euro, ArrowRight } from 'lucide-react';
|
||||
import { Button, Input, Card, StatsGrid, StatusCard, getStatusColor, StatusModal } from '../../../../components/ui';
|
||||
import { LoadingSpinner } from '../../../../components/shared';
|
||||
import { formatters } from '../../../../components/ui/Stats/StatsPresets';
|
||||
import { PageHeader } from '../../../../components/layout';
|
||||
import { LowStockAlert } from '../../../../components/domain/inventory';
|
||||
import { useIngredients, useStockAnalytics } from '../../../../api/hooks/inventory';
|
||||
import { LowStockAlert, InventoryModal } from '../../../../components/domain/inventory';
|
||||
import { useIngredients, useStockAnalytics, useUpdateIngredient, useCreateIngredient } from '../../../../api/hooks/inventory';
|
||||
import { useCurrentTenant } from '../../../../stores/tenant.store';
|
||||
import { IngredientResponse } from '../../../../api/types/inventory';
|
||||
import { IngredientResponse, IngredientUpdate, IngredientCreate, UnitOfMeasure, IngredientCategory, ProductType } from '../../../../api/types/inventory';
|
||||
|
||||
const InventoryPage: React.FC = () => {
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [modalMode, setModalMode] = useState<'view' | 'edit'>('view');
|
||||
const [modalMode, setModalMode] = useState<'create' | 'view' | 'edit'>('view');
|
||||
const [selectedItem, setSelectedItem] = useState<IngredientResponse | null>(null);
|
||||
|
||||
const [formData, setFormData] = useState<Partial<IngredientCreate & IngredientUpdate & { initial_stock?: number; product_type?: string }>>({});
|
||||
|
||||
const currentTenant = useCurrentTenant();
|
||||
const tenantId = currentTenant?.id || '';
|
||||
|
||||
|
||||
|
||||
// API Data
|
||||
const {
|
||||
data: ingredientsData,
|
||||
isLoading: ingredientsLoading,
|
||||
error: ingredientsError
|
||||
const {
|
||||
data: ingredientsData,
|
||||
isLoading: ingredientsLoading,
|
||||
error: ingredientsError
|
||||
} = useIngredients(tenantId, { search: searchTerm || undefined });
|
||||
|
||||
|
||||
const {
|
||||
data: analyticsData,
|
||||
isLoading: analyticsLoading
|
||||
const {
|
||||
data: analyticsData,
|
||||
isLoading: analyticsLoading
|
||||
} = useStockAnalytics(tenantId);
|
||||
|
||||
// Mutations
|
||||
const updateIngredientMutation = useUpdateIngredient();
|
||||
const createIngredientMutation = useCreateIngredient();
|
||||
|
||||
const ingredients = ingredientsData || [];
|
||||
const lowStockItems = ingredients.filter(ingredient => ingredient.stock_status === 'low_stock');
|
||||
@@ -73,6 +81,125 @@ const InventoryPage: React.FC = () => {
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// Form handlers
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
if (modalMode === 'create') {
|
||||
// Create new ingredient - ensure required fields are present
|
||||
const createData: IngredientCreate = {
|
||||
name: formData.name || '',
|
||||
unit_of_measure: formData.unit_of_measure || UnitOfMeasure.GRAMS,
|
||||
low_stock_threshold: formData.low_stock_threshold || 10,
|
||||
reorder_point: formData.reorder_point || 20,
|
||||
description: formData.description,
|
||||
category: formData.category,
|
||||
max_stock_level: formData.max_stock_level,
|
||||
shelf_life_days: formData.shelf_life_days,
|
||||
requires_refrigeration: formData.requires_refrigeration,
|
||||
requires_freezing: formData.requires_freezing,
|
||||
is_seasonal: formData.is_seasonal,
|
||||
supplier_id: formData.supplier_id,
|
||||
average_cost: formData.average_cost,
|
||||
notes: formData.notes
|
||||
};
|
||||
|
||||
const createdItem = await createIngredientMutation.mutateAsync({
|
||||
tenantId,
|
||||
ingredientData: createData
|
||||
});
|
||||
|
||||
// TODO: Handle initial stock if provided
|
||||
// if (formData.initial_stock && formData.initial_stock > 0) {
|
||||
// // Add initial stock using stock transaction API
|
||||
// await addStockMutation.mutateAsync({
|
||||
// tenantId,
|
||||
// ingredientId: createdItem.id,
|
||||
// quantity: formData.initial_stock,
|
||||
// transaction_type: 'addition',
|
||||
// notes: 'Stock inicial'
|
||||
// });
|
||||
// }
|
||||
} else {
|
||||
// Update existing ingredient
|
||||
if (!selectedItem) return;
|
||||
await updateIngredientMutation.mutateAsync({
|
||||
tenantId,
|
||||
ingredientId: selectedItem.id,
|
||||
updateData: formData as IngredientUpdate
|
||||
});
|
||||
}
|
||||
|
||||
// Reset form data and close modal
|
||||
setFormData({});
|
||||
setModalMode('view');
|
||||
setShowForm(false);
|
||||
setSelectedItem(null);
|
||||
} catch (error) {
|
||||
console.error(`Error ${modalMode === 'create' ? 'creating' : 'updating'} ingredient:`, error);
|
||||
// TODO: Show error toast
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
setFormData({});
|
||||
setModalMode('view');
|
||||
setShowForm(false);
|
||||
setSelectedItem(null);
|
||||
};
|
||||
|
||||
const handleFieldChange = (sectionIndex: number, fieldIndex: number, value: string | number) => {
|
||||
// Map section and field indexes to actual field names
|
||||
// Different mapping for create vs view/edit modes
|
||||
const createFieldMap: { [key: string]: string } = {
|
||||
'0-0': 'product_type', // Basic Info - Product Type
|
||||
'0-1': 'name', // Basic Info - Name
|
||||
'0-2': 'category', // Basic Info - Category
|
||||
'0-3': 'unit_of_measure', // Basic Info - Unit of measure
|
||||
'1-0': 'initial_stock', // Stock Config - Initial stock
|
||||
'1-1': 'low_stock_threshold', // Stock Config - Threshold
|
||||
'1-2': 'reorder_point', // Stock Config - Reorder point
|
||||
};
|
||||
|
||||
const viewEditFieldMap: { [key: string]: string } = {
|
||||
'0-0': 'name', // Basic Info - Name
|
||||
'0-1': 'category', // Basic Info - Category
|
||||
'0-2': 'description', // Basic Info - Description
|
||||
'0-3': 'unit_of_measure', // Basic Info - Unit of measure
|
||||
'1-1': 'low_stock_threshold', // Stock - Threshold
|
||||
'1-2': 'max_stock_level', // Stock - Max level
|
||||
'1-3': 'reorder_point', // Stock - Reorder point
|
||||
'1-4': 'reorder_quantity', // Stock - Reorder quantity
|
||||
'2-0': 'average_cost', // Financial - Average cost
|
||||
'3-1': 'shelf_life_days', // Additional - Shelf life
|
||||
'3-2': 'requires_refrigeration', // Additional - Refrigeration
|
||||
'3-3': 'requires_freezing', // Additional - Freezing
|
||||
'3-4': 'is_seasonal', // Additional - Seasonal
|
||||
'4-0': 'notes' // Notes - Observations
|
||||
};
|
||||
|
||||
// Use appropriate field map based on modal mode
|
||||
const fieldMap = modalMode === 'create' ? createFieldMap : viewEditFieldMap;
|
||||
|
||||
// Boolean field mapping for proper conversion
|
||||
const booleanFields = ['requires_refrigeration', 'requires_freezing', 'is_seasonal'];
|
||||
|
||||
const fieldKey = `${sectionIndex}-${fieldIndex}`;
|
||||
const fieldName = fieldMap[fieldKey];
|
||||
|
||||
if (fieldName) {
|
||||
// Convert string boolean values to actual booleans for boolean fields
|
||||
const processedValue = booleanFields.includes(fieldName)
|
||||
? value === 'true'
|
||||
: value;
|
||||
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[fieldName]: processedValue
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const filteredItems = useMemo(() => {
|
||||
if (!searchTerm) return ingredients;
|
||||
|
||||
@@ -84,6 +211,55 @@ const InventoryPage: React.FC = () => {
|
||||
});
|
||||
}, [ingredients, searchTerm]);
|
||||
|
||||
// Helper function to get category display name
|
||||
const getCategoryDisplayName = (category?: string): string => {
|
||||
const categoryMappings: Record<string, string> = {
|
||||
'flour': 'Harina',
|
||||
'dairy': 'Lácteos',
|
||||
'eggs': 'Huevos',
|
||||
'sugar': 'Azúcar',
|
||||
'yeast': 'Levadura',
|
||||
'fats': 'Grasas',
|
||||
'spices': 'Especias',
|
||||
'croissants': 'Croissants',
|
||||
'pastries': 'Pastelería',
|
||||
'beverages': 'Bebidas',
|
||||
'bread': 'Pan',
|
||||
'other': 'Otros'
|
||||
};
|
||||
|
||||
return categoryMappings[category?.toLowerCase() || ''] || category || 'Sin categoría';
|
||||
};
|
||||
|
||||
// Simplified item action handler
|
||||
const handleItemAction = (ingredient: any, action: 'view' | 'edit') => {
|
||||
setSelectedItem(ingredient);
|
||||
setModalMode(action);
|
||||
setFormData({});
|
||||
setShowForm(true);
|
||||
};
|
||||
|
||||
// Handle new item creation
|
||||
const handleNewItem = () => {
|
||||
setSelectedItem(null);
|
||||
setModalMode('create');
|
||||
setFormData({
|
||||
product_type: 'ingredient', // Default to ingredient
|
||||
name: '',
|
||||
unit_of_measure: UnitOfMeasure.GRAMS,
|
||||
low_stock_threshold: 10,
|
||||
reorder_point: 20,
|
||||
reorder_quantity: 50,
|
||||
category: IngredientCategory.OTHER,
|
||||
requires_refrigeration: false,
|
||||
requires_freezing: false,
|
||||
is_seasonal: false
|
||||
});
|
||||
setShowForm(true);
|
||||
};
|
||||
|
||||
|
||||
|
||||
const inventoryStats = useMemo(() => {
|
||||
if (!analyticsData) {
|
||||
return {
|
||||
@@ -91,8 +267,8 @@ const InventoryPage: React.FC = () => {
|
||||
lowStockItems: lowStockItems.length,
|
||||
outOfStock: ingredients.filter(item => item.stock_status === 'out_of_stock').length,
|
||||
expiringSoon: 0, // This would come from expired stock API
|
||||
totalValue: ingredients.reduce((sum, item) => sum + (item.current_stock_level * (item.average_cost || 0)), 0),
|
||||
categories: [...new Set(ingredients.map(item => item.category))].length,
|
||||
totalValue: ingredients.reduce((sum, item) => sum + ((item.current_stock || 0) * (item.average_cost || 0)), 0),
|
||||
categories: Array.from(new Set(ingredients.map(item => item.category))).length,
|
||||
turnoverRate: 0,
|
||||
fastMovingItems: 0,
|
||||
qualityScore: 85,
|
||||
@@ -101,7 +277,7 @@ const InventoryPage: React.FC = () => {
|
||||
}
|
||||
|
||||
// Extract data from new analytics structure
|
||||
const stockoutCount = Object.values(analyticsData.stockout_frequency || {}).reduce((sum: number, count) => sum + count, 0);
|
||||
const stockoutCount = Object.values(analyticsData.stockout_frequency || {}).reduce((sum: number, count: unknown) => sum + (typeof count === 'number' ? count : 0), 0);
|
||||
const fastMovingCount = (analyticsData.fast_moving_items || []).length;
|
||||
|
||||
return {
|
||||
@@ -110,7 +286,7 @@ const InventoryPage: React.FC = () => {
|
||||
outOfStock: stockoutCount || ingredients.filter(item => item.stock_status === 'out_of_stock').length,
|
||||
expiringSoon: Math.round(Number(analyticsData.quality_incidents_rate || 0) * ingredients.length), // Estimate from quality incidents
|
||||
totalValue: Number(analyticsData.total_inventory_cost || 0),
|
||||
categories: Object.keys(analyticsData.cost_by_category || {}).length || [...new Set(ingredients.map(item => item.category))].length,
|
||||
categories: Object.keys(analyticsData.cost_by_category || {}).length || Array.from(new Set(ingredients.map(item => item.category))).length,
|
||||
turnoverRate: Number(analyticsData.inventory_turnover_rate || 0),
|
||||
fastMovingItems: fastMovingCount,
|
||||
qualityScore: Number(analyticsData.food_safety_score || 85),
|
||||
@@ -147,7 +323,7 @@ const InventoryPage: React.FC = () => {
|
||||
title: 'Valor Total',
|
||||
value: formatters.currency(inventoryStats.totalValue),
|
||||
variant: 'success' as const,
|
||||
icon: DollarSign,
|
||||
icon: Euro,
|
||||
},
|
||||
{
|
||||
title: 'Tasa Rotación',
|
||||
@@ -155,18 +331,6 @@ const InventoryPage: React.FC = () => {
|
||||
variant: 'info' as const,
|
||||
icon: ArrowRight,
|
||||
},
|
||||
{
|
||||
title: 'Items Dinámicos',
|
||||
value: inventoryStats.fastMovingItems,
|
||||
variant: 'success' as const,
|
||||
icon: TrendingUp,
|
||||
},
|
||||
{
|
||||
title: 'Puntuación Calidad',
|
||||
value: `${inventoryStats.qualityScore}%`,
|
||||
variant: inventoryStats.qualityScore >= 90 ? 'success' as const : inventoryStats.qualityScore >= 70 ? 'warning' as const : 'error' as const,
|
||||
icon: Shield,
|
||||
},
|
||||
];
|
||||
|
||||
// Loading and error states
|
||||
@@ -201,19 +365,12 @@ const InventoryPage: React.FC = () => {
|
||||
title="Gestión de Inventario"
|
||||
description="Controla el stock de ingredientes y materias primas"
|
||||
actions={[
|
||||
{
|
||||
id: "export",
|
||||
label: "Exportar",
|
||||
variant: "outline" as const,
|
||||
icon: Download,
|
||||
onClick: () => console.log('Export inventory')
|
||||
},
|
||||
{
|
||||
id: "new",
|
||||
label: "Nuevo Artículo",
|
||||
variant: "primary" as const,
|
||||
icon: Plus,
|
||||
onClick: () => setShowForm(true)
|
||||
onClick: handleNewItem
|
||||
}
|
||||
]}
|
||||
/>
|
||||
@@ -221,96 +378,9 @@ const InventoryPage: React.FC = () => {
|
||||
{/* Stats Grid */}
|
||||
<StatsGrid
|
||||
stats={stats}
|
||||
columns={4}
|
||||
columns={3}
|
||||
/>
|
||||
|
||||
{/* Analytics Section */}
|
||||
{analyticsData && (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Fast Moving Items */}
|
||||
<Card className="p-6">
|
||||
<h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
|
||||
<TrendingUp className="w-5 h-5 text-green-500" />
|
||||
Items de Alta Rotación
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
{(analyticsData.fast_moving_items || []).slice(0, 5).map((item: any, index: number) => (
|
||||
<div key={item.ingredient_id || index} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
||||
<div>
|
||||
<p className="font-medium">{item.name}</p>
|
||||
<p className="text-sm text-gray-600">{item.movement_count} movimientos</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="font-medium">{formatters.currency(item.avg_cost)}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{(!analyticsData.fast_moving_items || analyticsData.fast_moving_items.length === 0) && (
|
||||
<p className="text-gray-500 text-center py-4">No hay datos de items de alta rotación</p>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Cost by Category */}
|
||||
<Card className="p-6">
|
||||
<h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
|
||||
<Package className="w-5 h-5 text-blue-500" />
|
||||
Costos por Categoría
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
{Object.entries(analyticsData.cost_by_category || {}).slice(0, 5).map(([category, cost]) => (
|
||||
<div key={category} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
||||
<div>
|
||||
<p className="font-medium capitalize">{category}</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="font-medium">{formatters.currency(Number(cost))}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{Object.keys(analyticsData.cost_by_category || {}).length === 0 && (
|
||||
<p className="text-gray-500 text-center py-4">No hay datos de costos por categoría</p>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Efficiency Metrics */}
|
||||
<Card className="p-6">
|
||||
<h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
|
||||
<Shield className="w-5 h-5 text-purple-500" />
|
||||
Métricas de Eficiencia
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="text-center p-3 bg-gray-50 rounded-lg">
|
||||
<p className="text-2xl font-bold text-blue-600">{inventoryStats.reorderAccuracy}%</p>
|
||||
<p className="text-sm text-gray-600">Precisión Reorden</p>
|
||||
</div>
|
||||
<div className="text-center p-3 bg-gray-50 rounded-lg">
|
||||
<p className="text-2xl font-bold text-green-600">{inventoryStats.turnoverRate.toFixed(1)}</p>
|
||||
<p className="text-sm text-gray-600">Tasa Rotación</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Quality Metrics */}
|
||||
<Card className="p-6">
|
||||
<h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
|
||||
<CheckCircle className="w-5 h-5 text-green-500" />
|
||||
Indicadores de Calidad
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="text-center p-3 bg-gray-50 rounded-lg">
|
||||
<p className="text-2xl font-bold text-green-600">{inventoryStats.qualityScore}%</p>
|
||||
<p className="text-sm text-gray-600">Puntuación Seguridad</p>
|
||||
</div>
|
||||
<div className="text-center p-3 bg-gray-50 rounded-lg">
|
||||
<p className="text-2xl font-bold text-blue-600">{Number(analyticsData.temperature_compliance_rate || 95).toFixed(1)}%</p>
|
||||
<p className="text-sm text-gray-600">Cumplimiento Temp.</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Low Stock Alert */}
|
||||
{lowStockItems.length > 0 && (
|
||||
@@ -328,10 +398,6 @@ const InventoryPage: React.FC = () => {
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
<Button variant="outline" onClick={() => console.log('Export filtered')}>
|
||||
<Download className="w-4 h-4 mr-2" />
|
||||
Exportar
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
@@ -339,10 +405,18 @@ const InventoryPage: React.FC = () => {
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{filteredItems.map((ingredient) => {
|
||||
const statusConfig = getInventoryStatusConfig(ingredient);
|
||||
const stockPercentage = ingredient.max_stock_level ?
|
||||
Math.round((ingredient.current_stock_level / ingredient.max_stock_level) * 100) : 0;
|
||||
const averageCost = ingredient.average_cost || 0;
|
||||
const totalValue = ingredient.current_stock_level * averageCost;
|
||||
|
||||
// Safe number conversions with fallbacks
|
||||
const currentStock = Number(ingredient.current_stock) || 0;
|
||||
const maxStock = Number(ingredient.max_stock_level) || 0;
|
||||
const averageCost = Number(ingredient.average_cost) || 0;
|
||||
|
||||
// Calculate stock percentage safely
|
||||
const stockPercentage = maxStock > 0 ?
|
||||
Math.round((currentStock / maxStock) * 100) : 0;
|
||||
|
||||
// Calculate total value safely
|
||||
const totalValue = currentStock * averageCost;
|
||||
|
||||
return (
|
||||
<StatusCard
|
||||
@@ -350,47 +424,30 @@ const InventoryPage: React.FC = () => {
|
||||
id={ingredient.id}
|
||||
statusIndicator={statusConfig}
|
||||
title={ingredient.name}
|
||||
subtitle={`${ingredient.category}${ingredient.description ? ` • ${ingredient.description}` : ''}`}
|
||||
primaryValue={ingredient.current_stock_level}
|
||||
subtitle={getCategoryDisplayName(ingredient.category)}
|
||||
primaryValue={currentStock}
|
||||
primaryValueLabel={ingredient.unit_of_measure}
|
||||
secondaryInfo={{
|
||||
label: 'Valor total',
|
||||
value: `${formatters.currency(totalValue)}${averageCost > 0 ? ` (${formatters.currency(averageCost)}/${ingredient.unit_of_measure})` : ''}`
|
||||
label: 'Valor',
|
||||
value: formatters.currency(totalValue)
|
||||
}}
|
||||
progress={ingredient.max_stock_level ? {
|
||||
label: 'Nivel de stock',
|
||||
progress={maxStock > 0 ? {
|
||||
label: `${stockPercentage}% stock`,
|
||||
percentage: stockPercentage,
|
||||
color: statusConfig.color
|
||||
} : undefined}
|
||||
metadata={[
|
||||
`Rango: ${ingredient.low_stock_threshold} - ${ingredient.max_stock_level || 'Sin límite'} ${ingredient.unit_of_measure}`,
|
||||
`Stock disponible: ${ingredient.available_stock} ${ingredient.unit_of_measure}`,
|
||||
`Stock reservado: ${ingredient.reserved_stock} ${ingredient.unit_of_measure}`,
|
||||
ingredient.last_restocked ? `Último restock: ${new Date(ingredient.last_restocked).toLocaleDateString('es-ES')}` : 'Sin historial de restock',
|
||||
...(ingredient.requires_refrigeration ? ['Requiere refrigeración'] : []),
|
||||
...(ingredient.requires_freezing ? ['Requiere congelación'] : []),
|
||||
...(ingredient.is_seasonal ? ['Producto estacional'] : [])
|
||||
]}
|
||||
actions={[
|
||||
{
|
||||
label: 'Ver',
|
||||
icon: Eye,
|
||||
variant: 'outline',
|
||||
onClick: () => {
|
||||
setSelectedItem(ingredient);
|
||||
setModalMode('view');
|
||||
setShowForm(true);
|
||||
}
|
||||
onClick: () => handleItemAction(ingredient, 'view')
|
||||
},
|
||||
{
|
||||
label: 'Editar',
|
||||
icon: Edit,
|
||||
variant: 'outline',
|
||||
onClick: () => {
|
||||
setSelectedItem(ingredient);
|
||||
setModalMode('edit');
|
||||
setShowForm(true);
|
||||
}
|
||||
variant: 'primary',
|
||||
onClick: () => handleItemAction(ingredient, 'edit')
|
||||
}
|
||||
]}
|
||||
/>
|
||||
@@ -408,148 +465,31 @@ const InventoryPage: React.FC = () => {
|
||||
<p className="text-[var(--text-secondary)] mb-4">
|
||||
Intenta ajustar la búsqueda o agregar un nuevo artículo al inventario
|
||||
</p>
|
||||
<Button onClick={() => setShowForm(true)}>
|
||||
<Button onClick={handleNewItem}>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Nuevo Artículo
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Inventory Item Modal */}
|
||||
{showForm && selectedItem && (
|
||||
<StatusModal
|
||||
{/* Unified Inventory Modal */}
|
||||
{showForm && (
|
||||
<InventoryModal
|
||||
isOpen={showForm}
|
||||
onClose={() => {
|
||||
setShowForm(false);
|
||||
setSelectedItem(null);
|
||||
setModalMode('view');
|
||||
setFormData({});
|
||||
}}
|
||||
mode={modalMode}
|
||||
onModeChange={setModalMode}
|
||||
title={selectedItem.name}
|
||||
subtitle={`${selectedItem.category}${selectedItem.description ? ` - ${selectedItem.description}` : ''}`}
|
||||
statusIndicator={getInventoryStatusConfig(selectedItem)}
|
||||
size="lg"
|
||||
sections={[
|
||||
{
|
||||
title: 'Información Básica',
|
||||
icon: Package,
|
||||
fields: [
|
||||
{
|
||||
label: 'Nombre',
|
||||
value: selectedItem.name,
|
||||
highlight: true
|
||||
},
|
||||
{
|
||||
label: 'Categoría',
|
||||
value: selectedItem.category
|
||||
},
|
||||
{
|
||||
label: 'Descripción',
|
||||
value: selectedItem.description || 'Sin descripción'
|
||||
},
|
||||
{
|
||||
label: 'Unidad de medida',
|
||||
value: selectedItem.unit_of_measure
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Stock y Niveles',
|
||||
icon: Package,
|
||||
fields: [
|
||||
{
|
||||
label: 'Stock actual',
|
||||
value: `${selectedItem.current_stock_level} ${selectedItem.unit_of_measure}`,
|
||||
highlight: true
|
||||
},
|
||||
{
|
||||
label: 'Stock disponible',
|
||||
value: `${selectedItem.available_stock} ${selectedItem.unit_of_measure}`
|
||||
},
|
||||
{
|
||||
label: 'Stock reservado',
|
||||
value: `${selectedItem.reserved_stock} ${selectedItem.unit_of_measure}`
|
||||
},
|
||||
{
|
||||
label: 'Umbral mínimo',
|
||||
value: `${selectedItem.low_stock_threshold} ${selectedItem.unit_of_measure}`
|
||||
},
|
||||
{
|
||||
label: 'Stock máximo',
|
||||
value: selectedItem.max_stock_level ? `${selectedItem.max_stock_level} ${selectedItem.unit_of_measure}` : 'Sin límite'
|
||||
},
|
||||
{
|
||||
label: 'Punto de reorden',
|
||||
value: `${selectedItem.reorder_point} ${selectedItem.unit_of_measure}`
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Información Financiera',
|
||||
icon: DollarSign,
|
||||
fields: [
|
||||
{
|
||||
label: 'Costo promedio por unidad',
|
||||
value: selectedItem.average_cost || 0,
|
||||
type: 'currency'
|
||||
},
|
||||
{
|
||||
label: 'Valor total en stock',
|
||||
value: selectedItem.current_stock_level * (selectedItem.average_cost || 0),
|
||||
type: 'currency',
|
||||
highlight: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Información Adicional',
|
||||
icon: Calendar,
|
||||
fields: [
|
||||
{
|
||||
label: 'Último restock',
|
||||
value: selectedItem.last_restocked || 'Sin historial',
|
||||
type: selectedItem.last_restocked ? 'datetime' : undefined
|
||||
},
|
||||
{
|
||||
label: 'Vida útil',
|
||||
value: selectedItem.shelf_life_days ? `${selectedItem.shelf_life_days} días` : 'No especificada'
|
||||
},
|
||||
{
|
||||
label: 'Requiere refrigeración',
|
||||
value: selectedItem.requires_refrigeration ? 'Sí' : 'No',
|
||||
highlight: selectedItem.requires_refrigeration
|
||||
},
|
||||
{
|
||||
label: 'Requiere congelación',
|
||||
value: selectedItem.requires_freezing ? 'Sí' : 'No',
|
||||
highlight: selectedItem.requires_freezing
|
||||
},
|
||||
{
|
||||
label: 'Producto estacional',
|
||||
value: selectedItem.is_seasonal ? 'Sí' : 'No'
|
||||
},
|
||||
{
|
||||
label: 'Creado',
|
||||
value: selectedItem.created_at,
|
||||
type: 'datetime'
|
||||
}
|
||||
]
|
||||
},
|
||||
...(selectedItem.notes ? [{
|
||||
title: 'Notas',
|
||||
fields: [
|
||||
{
|
||||
label: 'Observaciones',
|
||||
value: selectedItem.notes,
|
||||
span: 2 as const
|
||||
}
|
||||
]
|
||||
}] : [])
|
||||
]}
|
||||
onEdit={() => {
|
||||
console.log('Editing inventory item:', selectedItem.id);
|
||||
}}
|
||||
onModeChange={(mode) => setModalMode(mode as 'create' | 'view' | 'edit')}
|
||||
selectedItem={selectedItem}
|
||||
formData={formData}
|
||||
onFieldChange={handleFieldChange}
|
||||
onSave={handleSave}
|
||||
onCancel={handleCancel}
|
||||
loading={updateIngredientMutation.isPending || createIngredientMutation.isPending}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user