Improve the inventory page 3
This commit is contained in:
Urtzi Alfaro
@@ -65,9 +65,7 @@ export interface IngredientCreate {
|
||||
low_stock_threshold: number;
|
||||
max_stock_level?: number;
|
||||
reorder_point: number;
|
||||
shelf_life_days?: number;
|
||||
requires_refrigeration?: boolean;
|
||||
requires_freezing?: boolean;
|
||||
shelf_life_days?: number; // Default shelf life only
|
||||
is_seasonal?: boolean;
|
||||
supplier_id?: string;
|
||||
average_cost?: number;
|
||||
@@ -89,13 +87,7 @@ export interface IngredientUpdate {
|
||||
reorder_point?: 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;
|
||||
shelf_life_days?: number; // Default shelf life only
|
||||
is_active?: boolean;
|
||||
is_perishable?: boolean;
|
||||
is_seasonal?: boolean;
|
||||
@@ -121,13 +113,7 @@ export interface IngredientResponse {
|
||||
reorder_point: 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;
|
||||
shelf_life_days?: number; // Default shelf life only
|
||||
is_active: boolean;
|
||||
is_perishable: boolean;
|
||||
is_seasonal?: boolean;
|
||||
@@ -149,38 +135,81 @@ export interface IngredientResponse {
|
||||
// Stock Management Types
|
||||
export interface StockCreate {
|
||||
ingredient_id: string;
|
||||
batch_number?: string;
|
||||
lot_number?: string;
|
||||
supplier_batch_ref?: string;
|
||||
|
||||
// Production stage tracking
|
||||
production_stage?: ProductionStage;
|
||||
transformation_reference?: string;
|
||||
quantity: number;
|
||||
unit_price: number;
|
||||
|
||||
current_quantity: number;
|
||||
received_date?: string;
|
||||
expiration_date?: string;
|
||||
batch_number?: string;
|
||||
supplier_id?: string;
|
||||
purchase_order_reference?: string;
|
||||
best_before_date?: string;
|
||||
|
||||
// Stage-specific expiration fields
|
||||
original_expiration_date?: string;
|
||||
transformation_date?: string;
|
||||
final_expiration_date?: string;
|
||||
|
||||
notes?: string;
|
||||
unit_cost?: number;
|
||||
storage_location?: string;
|
||||
warehouse_zone?: string;
|
||||
shelf_position?: string;
|
||||
|
||||
quality_status?: string;
|
||||
|
||||
// Batch-specific storage requirements
|
||||
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;
|
||||
|
||||
// Optional supplier reference
|
||||
supplier_id?: string;
|
||||
}
|
||||
|
||||
export interface StockUpdate {
|
||||
batch_number?: string;
|
||||
lot_number?: string;
|
||||
supplier_batch_ref?: string;
|
||||
|
||||
// Production stage tracking
|
||||
production_stage?: ProductionStage;
|
||||
transformation_reference?: string;
|
||||
quantity?: number;
|
||||
unit_price?: number;
|
||||
|
||||
current_quantity?: number;
|
||||
reserved_quantity?: number;
|
||||
received_date?: string;
|
||||
expiration_date?: string;
|
||||
batch_number?: string;
|
||||
best_before_date?: string;
|
||||
|
||||
// Stage-specific expiration fields
|
||||
original_expiration_date?: string;
|
||||
transformation_date?: string;
|
||||
final_expiration_date?: string;
|
||||
|
||||
unit_cost?: number;
|
||||
storage_location?: string;
|
||||
warehouse_zone?: string;
|
||||
shelf_position?: string;
|
||||
|
||||
quality_status?: string;
|
||||
notes?: string;
|
||||
is_available?: boolean;
|
||||
|
||||
// Batch-specific storage requirements
|
||||
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;
|
||||
}
|
||||
|
||||
export interface StockResponse {
|
||||
@@ -209,6 +238,7 @@ export interface StockResponse {
|
||||
batch_number?: string;
|
||||
supplier_id?: string;
|
||||
purchase_order_reference?: string;
|
||||
storage_location?: string;
|
||||
|
||||
// Stage-specific expiration fields
|
||||
original_expiration_date?: string;
|
||||
@@ -219,6 +249,16 @@ export interface StockResponse {
|
||||
is_available: boolean;
|
||||
is_expired: boolean;
|
||||
days_until_expiry?: number;
|
||||
|
||||
// Batch-specific storage requirements
|
||||
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;
|
||||
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
created_by?: string;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Plus, Package, Euro, Calendar, FileText } from 'lucide-react';
|
||||
import { Plus, Package, Euro, Calendar, FileText, Thermometer } from 'lucide-react';
|
||||
import { StatusModal } from '../../ui/StatusModal/StatusModal';
|
||||
import { IngredientResponse, StockCreate } from '../../../api/types/inventory';
|
||||
import { Button } from '../../ui/Button';
|
||||
@@ -24,35 +24,51 @@ export const AddStockModal: React.FC<AddStockModalProps> = ({
|
||||
}) => {
|
||||
const [formData, setFormData] = useState<Partial<StockCreate>>({
|
||||
ingredient_id: ingredient.id,
|
||||
quantity: 0,
|
||||
unit_price: Number(ingredient.average_cost) || 0,
|
||||
current_quantity: 0,
|
||||
unit_cost: Number(ingredient.average_cost) || 0,
|
||||
expiration_date: '',
|
||||
batch_number: '',
|
||||
supplier_id: '',
|
||||
purchase_order_reference: '',
|
||||
storage_location: '',
|
||||
requires_refrigeration: false,
|
||||
requires_freezing: false,
|
||||
storage_temperature_min: undefined,
|
||||
storage_temperature_max: undefined,
|
||||
storage_humidity_max: undefined,
|
||||
shelf_life_days: undefined,
|
||||
storage_instructions: '',
|
||||
notes: ''
|
||||
});
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [mode, setMode] = useState<'overview' | 'edit'>('edit');
|
||||
|
||||
const handleFieldChange = (_sectionIndex: number, fieldIndex: number, value: string | number) => {
|
||||
const fields = ['quantity', 'unit_price', 'expiration_date', 'batch_number', 'supplier_id', 'purchase_order_reference', 'notes'];
|
||||
const fieldName = fields[fieldIndex] as keyof typeof formData;
|
||||
const handleFieldChange = (sectionIndex: number, fieldIndex: number, value: string | number | boolean) => {
|
||||
const fieldMappings = [
|
||||
// Basic Stock Information section
|
||||
['current_quantity', 'unit_cost', 'expiration_date'],
|
||||
// Additional Information section
|
||||
['batch_number', 'supplier_id', 'storage_location', 'notes'],
|
||||
// Storage Requirements section
|
||||
['requires_refrigeration', 'requires_freezing', 'storage_temperature_min', 'storage_temperature_max', 'storage_humidity_max', 'shelf_life_days', 'storage_instructions']
|
||||
];
|
||||
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[fieldName]: value
|
||||
}));
|
||||
const fieldName = fieldMappings[sectionIndex]?.[fieldIndex] as keyof typeof formData;
|
||||
if (fieldName) {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[fieldName]: value
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!formData.quantity || formData.quantity <= 0) {
|
||||
if (!formData.current_quantity || formData.current_quantity <= 0) {
|
||||
alert('Por favor, ingresa una cantidad válida');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!formData.unit_price || formData.unit_price <= 0) {
|
||||
if (!formData.unit_cost || formData.unit_cost <= 0) {
|
||||
alert('Por favor, ingresa un precio unitario válido');
|
||||
return;
|
||||
}
|
||||
@@ -61,12 +77,19 @@ export const AddStockModal: React.FC<AddStockModalProps> = ({
|
||||
try {
|
||||
const stockData: StockCreate = {
|
||||
ingredient_id: ingredient.id,
|
||||
quantity: Number(formData.quantity),
|
||||
unit_price: Number(formData.unit_price),
|
||||
current_quantity: Number(formData.current_quantity),
|
||||
unit_cost: Number(formData.unit_cost),
|
||||
expiration_date: formData.expiration_date || undefined,
|
||||
batch_number: formData.batch_number || undefined,
|
||||
supplier_id: formData.supplier_id || undefined,
|
||||
purchase_order_reference: formData.purchase_order_reference || undefined,
|
||||
storage_location: formData.storage_location || undefined,
|
||||
requires_refrigeration: formData.requires_refrigeration || false,
|
||||
requires_freezing: formData.requires_freezing || false,
|
||||
storage_temperature_min: formData.storage_temperature_min ? Number(formData.storage_temperature_min) : undefined,
|
||||
storage_temperature_max: formData.storage_temperature_max ? Number(formData.storage_temperature_max) : undefined,
|
||||
storage_humidity_max: formData.storage_humidity_max ? Number(formData.storage_humidity_max) : undefined,
|
||||
shelf_life_days: formData.shelf_life_days ? Number(formData.shelf_life_days) : undefined,
|
||||
storage_instructions: formData.storage_instructions || undefined,
|
||||
notes: formData.notes || undefined
|
||||
};
|
||||
|
||||
@@ -77,12 +100,19 @@ export const AddStockModal: React.FC<AddStockModalProps> = ({
|
||||
// Reset form
|
||||
setFormData({
|
||||
ingredient_id: ingredient.id,
|
||||
quantity: 0,
|
||||
unit_price: Number(ingredient.average_cost) || 0,
|
||||
current_quantity: 0,
|
||||
unit_cost: Number(ingredient.average_cost) || 0,
|
||||
expiration_date: '',
|
||||
batch_number: '',
|
||||
supplier_id: '',
|
||||
purchase_order_reference: '',
|
||||
storage_location: '',
|
||||
requires_refrigeration: false,
|
||||
requires_freezing: false,
|
||||
storage_temperature_min: undefined,
|
||||
storage_temperature_max: undefined,
|
||||
storage_humidity_max: undefined,
|
||||
shelf_life_days: undefined,
|
||||
storage_instructions: '',
|
||||
notes: ''
|
||||
});
|
||||
|
||||
@@ -96,13 +126,15 @@ export const AddStockModal: React.FC<AddStockModalProps> = ({
|
||||
};
|
||||
|
||||
const currentStock = Number(ingredient.current_stock) || 0;
|
||||
const newTotal = currentStock + (Number(formData.quantity) || 0);
|
||||
const totalValue = (Number(formData.quantity) || 0) * (Number(formData.unit_price) || 0);
|
||||
const newTotal = currentStock + (Number(formData.current_quantity) || 0);
|
||||
const totalValue = (Number(formData.current_quantity) || 0) * (Number(formData.unit_cost) || 0);
|
||||
|
||||
const statusConfig = {
|
||||
color: statusColors.normal.primary,
|
||||
color: statusColors.inProgress.primary,
|
||||
text: 'Agregar Stock',
|
||||
icon: Plus
|
||||
icon: Plus,
|
||||
isCritical: false,
|
||||
isHighlight: true
|
||||
};
|
||||
|
||||
const sections = [
|
||||
@@ -112,7 +144,7 @@ export const AddStockModal: React.FC<AddStockModalProps> = ({
|
||||
fields: [
|
||||
{
|
||||
label: `Cantidad (${ingredient.unit_of_measure})`,
|
||||
value: formData.quantity || 0,
|
||||
value: formData.current_quantity || 0,
|
||||
type: 'number' as const,
|
||||
editable: true,
|
||||
required: true,
|
||||
@@ -120,7 +152,7 @@ export const AddStockModal: React.FC<AddStockModalProps> = ({
|
||||
},
|
||||
{
|
||||
label: 'Precio Unitario',
|
||||
value: formData.unit_price || 0,
|
||||
value: formData.unit_cost || 0,
|
||||
type: 'currency' as const,
|
||||
editable: true,
|
||||
required: true,
|
||||
@@ -154,11 +186,11 @@ export const AddStockModal: React.FC<AddStockModalProps> = ({
|
||||
placeholder: 'Ej: PROV001'
|
||||
},
|
||||
{
|
||||
label: 'Referencia de Pedido',
|
||||
value: formData.purchase_order_reference || '',
|
||||
label: 'Ubicación de Almacenamiento',
|
||||
value: formData.storage_location || '',
|
||||
type: 'text' as const,
|
||||
editable: true,
|
||||
placeholder: 'Ej: PO-2024-001',
|
||||
placeholder: 'Ej: Estante A-3',
|
||||
span: 2 as const
|
||||
},
|
||||
{
|
||||
@@ -172,25 +204,55 @@ export const AddStockModal: React.FC<AddStockModalProps> = ({
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Resumen',
|
||||
icon: Euro,
|
||||
title: 'Requisitos de Almacenamiento',
|
||||
icon: Thermometer,
|
||||
fields: [
|
||||
{
|
||||
label: 'Stock Actual',
|
||||
value: `${currentStock} ${ingredient.unit_of_measure}`,
|
||||
span: 1 as const
|
||||
label: 'Requiere Refrigeración',
|
||||
value: formData.requires_refrigeration || false,
|
||||
type: 'boolean' as const,
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
label: 'Nuevo Total',
|
||||
value: `${newTotal} ${ingredient.unit_of_measure}`,
|
||||
highlight: true,
|
||||
span: 1 as const
|
||||
label: 'Requiere Congelación',
|
||||
value: formData.requires_freezing || false,
|
||||
type: 'boolean' as const,
|
||||
editable: true
|
||||
},
|
||||
{
|
||||
label: 'Valor de la Entrada',
|
||||
value: `€${totalValue.toFixed(2)}`,
|
||||
type: 'currency' as const,
|
||||
highlight: true,
|
||||
label: 'Temperatura Mínima (°C)',
|
||||
value: formData.storage_temperature_min || '',
|
||||
type: 'number' as const,
|
||||
editable: true,
|
||||
placeholder: 'Ej: 2'
|
||||
},
|
||||
{
|
||||
label: 'Temperatura Máxima (°C)',
|
||||
value: formData.storage_temperature_max || '',
|
||||
type: 'number' as const,
|
||||
editable: true,
|
||||
placeholder: 'Ej: 8'
|
||||
},
|
||||
{
|
||||
label: 'Humedad Máxima (%)',
|
||||
value: formData.storage_humidity_max || '',
|
||||
type: 'number' as const,
|
||||
editable: true,
|
||||
placeholder: 'Ej: 60'
|
||||
},
|
||||
{
|
||||
label: 'Vida Útil (días)',
|
||||
value: formData.shelf_life_days || '',
|
||||
type: 'number' as const,
|
||||
editable: true,
|
||||
placeholder: 'Ej: 30'
|
||||
},
|
||||
{
|
||||
label: 'Instrucciones de Almacenamiento',
|
||||
value: formData.storage_instructions || '',
|
||||
type: 'text' as const,
|
||||
editable: true,
|
||||
placeholder: 'Instrucciones específicas...',
|
||||
span: 2 as const
|
||||
}
|
||||
]
|
||||
@@ -208,7 +270,7 @@ export const AddStockModal: React.FC<AddStockModalProps> = ({
|
||||
label: 'Agregar Stock',
|
||||
variant: 'primary' as const,
|
||||
onClick: handleSave,
|
||||
disabled: loading || !formData.quantity || !formData.unit_price,
|
||||
disabled: loading || !formData.current_quantity || !formData.unit_cost,
|
||||
loading
|
||||
}
|
||||
];
|
||||
|
||||
450
frontend/src/components/domain/inventory/BatchModal.tsx
Normal file
450
frontend/src/components/domain/inventory/BatchModal.tsx
Normal file
@@ -0,0 +1,450 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Package, AlertTriangle, Clock, Archive, Thermometer, Plus, Edit, Trash2, CheckCircle, X, Save } from 'lucide-react';
|
||||
import { StatusModal } from '../../ui/StatusModal/StatusModal';
|
||||
import { IngredientResponse, StockResponse, StockUpdate } from '../../../api/types/inventory';
|
||||
import { formatters } from '../../ui/Stats/StatsPresets';
|
||||
import { statusColors } from '../../../styles/colors';
|
||||
import { Button } from '../../ui/Button';
|
||||
|
||||
interface BatchModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
ingredient: IngredientResponse;
|
||||
batches: StockResponse[];
|
||||
loading?: boolean;
|
||||
onAddBatch?: () => void;
|
||||
onEditBatch?: (batchId: string, updateData: StockUpdate) => Promise<void>;
|
||||
onMarkAsWaste?: (batchId: string) => Promise<void>;
|
||||
}
|
||||
|
||||
/**
|
||||
* BatchModal - Card-based batch management modal
|
||||
* Mobile-friendly design with edit and waste marking functionality
|
||||
*/
|
||||
export const BatchModal: React.FC<BatchModalProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
ingredient,
|
||||
batches = [],
|
||||
loading = false,
|
||||
onAddBatch,
|
||||
onEditBatch,
|
||||
onMarkAsWaste
|
||||
}) => {
|
||||
const [editingBatch, setEditingBatch] = useState<string | null>(null);
|
||||
const [editData, setEditData] = useState<StockUpdate>({});
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
// Get batch status based on expiration and availability
|
||||
const getBatchStatus = (batch: StockResponse) => {
|
||||
if (!batch.is_available) {
|
||||
return {
|
||||
label: 'No Disponible',
|
||||
color: statusColors.cancelled.primary,
|
||||
icon: X,
|
||||
isCritical: true
|
||||
};
|
||||
}
|
||||
|
||||
if (batch.is_expired) {
|
||||
return {
|
||||
label: 'Vencido',
|
||||
color: statusColors.expired.primary,
|
||||
icon: AlertTriangle,
|
||||
isCritical: true
|
||||
};
|
||||
}
|
||||
|
||||
if (!batch.expiration_date) {
|
||||
return {
|
||||
label: 'Sin Vencimiento',
|
||||
color: statusColors.other.primary,
|
||||
icon: Archive,
|
||||
isCritical: false
|
||||
};
|
||||
}
|
||||
|
||||
const today = new Date();
|
||||
const expirationDate = new Date(batch.expiration_date);
|
||||
const daysUntilExpiry = Math.ceil((expirationDate.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
|
||||
|
||||
if (daysUntilExpiry <= 0) {
|
||||
return {
|
||||
label: 'Vencido',
|
||||
color: statusColors.expired.primary,
|
||||
icon: AlertTriangle,
|
||||
isCritical: true
|
||||
};
|
||||
} else if (daysUntilExpiry <= 3) {
|
||||
return {
|
||||
label: 'Vence Pronto',
|
||||
color: statusColors.low.primary,
|
||||
icon: AlertTriangle,
|
||||
isCritical: true
|
||||
};
|
||||
} else if (daysUntilExpiry <= 7) {
|
||||
return {
|
||||
label: 'Por Vencer',
|
||||
color: statusColors.pending.primary,
|
||||
icon: Clock,
|
||||
isCritical: false
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
label: 'Fresco',
|
||||
color: statusColors.completed.primary,
|
||||
icon: CheckCircle,
|
||||
isCritical: false
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditStart = (batch: StockResponse) => {
|
||||
setEditingBatch(batch.id);
|
||||
setEditData({
|
||||
current_quantity: batch.current_quantity,
|
||||
expiration_date: batch.expiration_date,
|
||||
storage_location: batch.storage_location || '',
|
||||
requires_refrigeration: batch.requires_refrigeration,
|
||||
requires_freezing: batch.requires_freezing,
|
||||
storage_temperature_min: batch.storage_temperature_min,
|
||||
storage_temperature_max: batch.storage_temperature_max,
|
||||
storage_humidity_max: batch.storage_humidity_max,
|
||||
shelf_life_days: batch.shelf_life_days,
|
||||
storage_instructions: batch.storage_instructions || ''
|
||||
});
|
||||
};
|
||||
|
||||
const handleEditCancel = () => {
|
||||
setEditingBatch(null);
|
||||
setEditData({});
|
||||
};
|
||||
|
||||
const handleEditSave = async (batchId: string) => {
|
||||
if (!onEditBatch) return;
|
||||
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
await onEditBatch(batchId, editData);
|
||||
setEditingBatch(null);
|
||||
setEditData({});
|
||||
} catch (error) {
|
||||
console.error('Error updating batch:', error);
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleMarkAsWaste = async (batchId: string) => {
|
||||
if (!onMarkAsWaste) return;
|
||||
|
||||
const confirmed = window.confirm('¿Está seguro que desea marcar este lote como desperdicio? Esta acción no se puede deshacer.');
|
||||
if (!confirmed) return;
|
||||
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
await onMarkAsWaste(batchId);
|
||||
} catch (error) {
|
||||
console.error('Error marking batch as waste:', error);
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const statusConfig = {
|
||||
color: statusColors.inProgress.primary,
|
||||
text: `${batches.length} lotes`,
|
||||
icon: Package
|
||||
};
|
||||
|
||||
// Create card-based batch list
|
||||
const batchCards = batches.length > 0 ? (
|
||||
<div className="space-y-4">
|
||||
{batches.map((batch) => {
|
||||
const status = getBatchStatus(batch);
|
||||
const StatusIcon = status.icon;
|
||||
const isEditing = editingBatch === batch.id;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={batch.id}
|
||||
className="bg-[var(--surface-secondary)] rounded-lg border border-[var(--border-primary)] overflow-hidden"
|
||||
style={{
|
||||
borderColor: status.isCritical ? `${status.color}40` : undefined,
|
||||
backgroundColor: status.isCritical ? `${status.color}05` : undefined
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="p-4 border-b border-[var(--border-secondary)]">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className="flex-shrink-0 p-2 rounded-lg"
|
||||
style={{ backgroundColor: `${status.color}15` }}
|
||||
>
|
||||
<StatusIcon
|
||||
className="w-5 h-5"
|
||||
style={{ color: status.color }}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-[var(--text-primary)]">
|
||||
Lote #{batch.batch_number || 'Sin número'}
|
||||
</h3>
|
||||
<div
|
||||
className="text-sm font-medium"
|
||||
style={{ color: status.color }}
|
||||
>
|
||||
{status.label}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{!isEditing && (
|
||||
<>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleEditStart(batch)}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
<Edit className="w-4 h-4" />
|
||||
</Button>
|
||||
{status.isCritical && batch.is_available && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleMarkAsWaste(batch.id)}
|
||||
disabled={isSubmitting}
|
||||
className="text-red-600 border-red-300 hover:bg-red-50"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{isEditing && (
|
||||
<>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleEditCancel}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
onClick={() => handleEditSave(batch.id)}
|
||||
disabled={isSubmitting}
|
||||
isLoading={isSubmitting}
|
||||
>
|
||||
<Save className="w-4 h-4" />
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-4 space-y-4">
|
||||
{/* Basic Info */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="text-xs font-medium text-[var(--text-tertiary)] mb-1 block">
|
||||
Cantidad Actual
|
||||
</label>
|
||||
{isEditing ? (
|
||||
<input
|
||||
type="number"
|
||||
value={editData.current_quantity || ''}
|
||||
onChange={(e) => setEditData(prev => ({ ...prev, current_quantity: Number(e.target.value) }))}
|
||||
className="w-full px-3 py-2 border border-[var(--border-color)] bg-[var(--background-primary)] text-[var(--text-primary)] rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
) : (
|
||||
<div className="text-lg font-bold text-[var(--text-primary)]">
|
||||
{batch.current_quantity} {ingredient.unit_of_measure}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-xs font-medium text-[var(--text-tertiary)] mb-1 block">
|
||||
Valor Total
|
||||
</label>
|
||||
<div className="text-lg font-bold text-[var(--text-primary)]">
|
||||
{formatters.currency(Number(batch.total_cost || 0))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Dates */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="text-xs font-medium text-[var(--text-tertiary)] mb-1 block">
|
||||
Fecha de Vencimiento
|
||||
</label>
|
||||
{isEditing ? (
|
||||
<input
|
||||
type="date"
|
||||
value={editData.expiration_date ? new Date(editData.expiration_date).toISOString().split('T')[0] : ''}
|
||||
onChange={(e) => setEditData(prev => ({ ...prev, expiration_date: e.target.value }))}
|
||||
className="w-full px-3 py-2 border border-[var(--border-color)] bg-[var(--background-primary)] text-[var(--text-primary)] rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
) : (
|
||||
<div className="text-sm text-[var(--text-secondary)]">
|
||||
{batch.expiration_date
|
||||
? new Date(batch.expiration_date).toLocaleDateString('es-ES')
|
||||
: 'Sin vencimiento'
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-xs font-medium text-[var(--text-tertiary)] mb-1 block">
|
||||
Ubicación
|
||||
</label>
|
||||
{isEditing ? (
|
||||
<input
|
||||
type="text"
|
||||
value={editData.storage_location || ''}
|
||||
onChange={(e) => setEditData(prev => ({ ...prev, storage_location: e.target.value }))}
|
||||
placeholder="Ubicación del lote"
|
||||
className="w-full px-3 py-2 border border-[var(--border-color)] bg-[var(--background-primary)] text-[var(--text-primary)] rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
) : (
|
||||
<div className="text-sm text-[var(--text-secondary)]">
|
||||
{batch.storage_location || 'No especificada'}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Storage Requirements */}
|
||||
<div className="pt-3 border-t border-[var(--border-secondary)]">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Thermometer className="w-4 h-4 text-[var(--text-tertiary)]" />
|
||||
<span className="text-sm font-medium text-[var(--text-tertiary)]">
|
||||
Almacenamiento
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 gap-3 text-xs">
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-[var(--text-tertiary)]">Tipo:</span>
|
||||
<span className="font-medium text-[var(--text-secondary)]">
|
||||
{batch.requires_refrigeration ? 'Refrigeración' :
|
||||
batch.requires_freezing ? 'Congelación' : 'Ambiente'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{(batch.storage_temperature_min || batch.storage_temperature_max) && (
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-[var(--text-tertiary)]">Temp:</span>
|
||||
<span className="font-medium text-[var(--text-secondary)]">
|
||||
{batch.storage_temperature_min || '-'}°C a {batch.storage_temperature_max || '-'}°C
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{batch.storage_humidity_max && (
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-[var(--text-tertiary)]">Humedad:</span>
|
||||
<span className="font-medium text-[var(--text-secondary)]">
|
||||
≤{batch.storage_humidity_max}%
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{batch.shelf_life_days && (
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-[var(--text-tertiary)]">Vida útil:</span>
|
||||
<span className="font-medium text-[var(--text-secondary)]">
|
||||
{batch.shelf_life_days} días
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{batch.storage_instructions && (
|
||||
<div className="mt-2 p-2 bg-[var(--surface-tertiary)] rounded-md">
|
||||
<div className="text-xs text-[var(--text-secondary)] italic">
|
||||
"{batch.storage_instructions}"
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-12 text-[var(--text-secondary)]">
|
||||
<Package className="w-16 h-16 mx-auto mb-4 opacity-30" />
|
||||
<h3 className="text-lg font-medium text-[var(--text-primary)] mb-2">
|
||||
No hay lotes registrados
|
||||
</h3>
|
||||
<p className="text-sm mb-6">
|
||||
Los lotes se crean automáticamente al agregar stock
|
||||
</p>
|
||||
{onAddBatch && (
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={onAddBatch}
|
||||
className="inline-flex items-center gap-2"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
Agregar Primer Lote
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
const sections = [
|
||||
{
|
||||
title: 'Lotes de Stock',
|
||||
icon: Package,
|
||||
fields: [
|
||||
{
|
||||
label: '',
|
||||
value: batchCards,
|
||||
span: 2 as const
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const actions = [];
|
||||
if (onAddBatch && batches.length > 0) {
|
||||
actions.push({
|
||||
label: 'Agregar Lote',
|
||||
icon: Plus,
|
||||
variant: 'primary' as const,
|
||||
onClick: onAddBatch
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<StatusModal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
mode="view"
|
||||
title={`Lotes de Stock: ${ingredient.name}`}
|
||||
subtitle={`${ingredient.category} • ${batches.length} lotes registrados`}
|
||||
statusIndicator={statusConfig}
|
||||
sections={sections}
|
||||
size="lg"
|
||||
loading={loading}
|
||||
showDefaultActions={false}
|
||||
actions={actions}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default BatchModal;
|
||||
@@ -1,20 +1,20 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Plus, Package, Calculator, Settings, Thermometer } from 'lucide-react';
|
||||
import { Plus, Package, Calculator, Settings } from 'lucide-react';
|
||||
import { StatusModal } from '../../ui/StatusModal/StatusModal';
|
||||
import { IngredientCreate, UnitOfMeasure, IngredientCategory, ProductCategory } from '../../../api/types/inventory';
|
||||
import { statusColors } from '../../../styles/colors';
|
||||
|
||||
interface CreateItemModalProps {
|
||||
interface CreateIngredientModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onCreateIngredient?: (ingredientData: IngredientCreate) => Promise<void>;
|
||||
}
|
||||
|
||||
/**
|
||||
* CreateItemModal - Modal for creating a new inventory ingredient
|
||||
* CreateIngredientModal - Modal for creating a new inventory ingredient
|
||||
* Comprehensive form for adding new items to inventory
|
||||
*/
|
||||
export const CreateItemModal: React.FC<CreateItemModalProps> = ({
|
||||
export const CreateIngredientModal: React.FC<CreateIngredientModalProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
onCreateIngredient
|
||||
@@ -27,9 +27,6 @@ export const CreateItemModal: React.FC<CreateItemModalProps> = ({
|
||||
low_stock_threshold: 10,
|
||||
reorder_point: 20,
|
||||
max_stock_level: 100,
|
||||
shelf_life_days: undefined,
|
||||
requires_refrigeration: false,
|
||||
requires_freezing: false,
|
||||
is_seasonal: false,
|
||||
supplier_id: '',
|
||||
average_cost: 0,
|
||||
@@ -85,9 +82,7 @@ export const CreateItemModal: React.FC<CreateItemModalProps> = ({
|
||||
['name', 'description', 'category', 'unit_of_measure'],
|
||||
// Cost and Quantities section
|
||||
['average_cost', 'low_stock_threshold', 'reorder_point', 'max_stock_level'],
|
||||
// Storage Requirements section
|
||||
['requires_refrigeration', 'requires_freezing', 'shelf_life_days', 'is_seasonal'],
|
||||
// Additional Information section
|
||||
// Additional Information section (moved up after removing storage section)
|
||||
['supplier_id', 'notes']
|
||||
];
|
||||
|
||||
@@ -268,49 +263,6 @@ export const CreateItemModal: React.FC<CreateItemModalProps> = ({
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Requisitos de Almacenamiento',
|
||||
icon: Thermometer,
|
||||
fields: [
|
||||
{
|
||||
label: 'Requiere Refrigeración',
|
||||
value: formData.requires_refrigeration ? 'Sí' : 'No',
|
||||
type: 'select' as const,
|
||||
editable: true,
|
||||
options: [
|
||||
{ label: 'No', value: false },
|
||||
{ label: 'Sí', value: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Requiere Congelación',
|
||||
value: formData.requires_freezing ? 'Sí' : 'No',
|
||||
type: 'select' as const,
|
||||
editable: true,
|
||||
options: [
|
||||
{ label: 'No', value: false },
|
||||
{ label: 'Sí', value: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Vida Útil (días)',
|
||||
value: formData.shelf_life_days || '',
|
||||
type: 'number' as const,
|
||||
editable: true,
|
||||
placeholder: 'Días de vida útil'
|
||||
},
|
||||
{
|
||||
label: 'Es Estacional',
|
||||
value: formData.is_seasonal ? 'Sí' : 'No',
|
||||
type: 'select' as const,
|
||||
editable: true,
|
||||
options: [
|
||||
{ label: 'No', value: false },
|
||||
{ label: 'Sí', value: true }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Información Adicional',
|
||||
icon: Settings,
|
||||
@@ -352,4 +304,4 @@ export const CreateItemModal: React.FC<CreateItemModalProps> = ({
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateItemModal;
|
||||
export default CreateIngredientModal;
|
||||
@@ -1,100 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Trash2 } from 'lucide-react';
|
||||
import { Button } from '../../ui';
|
||||
import { DeleteIngredientModal } from './';
|
||||
import { useSoftDeleteIngredient, useHardDeleteIngredient } from '../../../api/hooks/inventory';
|
||||
import { useAuthStore } from '../../../stores/auth.store';
|
||||
import { IngredientResponse } from '../../../api/types/inventory';
|
||||
|
||||
interface DeleteIngredientExampleProps {
|
||||
ingredient: IngredientResponse;
|
||||
onDeleteSuccess?: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Example component showing how to use DeleteIngredientModal
|
||||
* This can be integrated into inventory cards, tables, or detail pages
|
||||
*/
|
||||
export const DeleteIngredientExample: React.FC<DeleteIngredientExampleProps> = ({
|
||||
ingredient,
|
||||
onDeleteSuccess
|
||||
}) => {
|
||||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||
const { tenantId } = useAuthStore();
|
||||
|
||||
// Hook for soft delete
|
||||
const softDeleteMutation = useSoftDeleteIngredient({
|
||||
onSuccess: () => {
|
||||
setShowDeleteModal(false);
|
||||
onDeleteSuccess?.();
|
||||
},
|
||||
onError: (error) => {
|
||||
console.error('Soft delete failed:', error);
|
||||
// Here you could show a toast notification
|
||||
}
|
||||
});
|
||||
|
||||
// Hook for hard delete
|
||||
const hardDeleteMutation = useHardDeleteIngredient({
|
||||
onSuccess: (result) => {
|
||||
console.log('Hard delete completed:', result);
|
||||
onDeleteSuccess?.();
|
||||
// Modal will handle closing itself after showing results
|
||||
},
|
||||
onError: (error) => {
|
||||
console.error('Hard delete failed:', error);
|
||||
// Here you could show a toast notification
|
||||
}
|
||||
});
|
||||
|
||||
const handleSoftDelete = async (ingredientId: string) => {
|
||||
if (!tenantId) {
|
||||
throw new Error('No tenant ID available');
|
||||
}
|
||||
|
||||
return softDeleteMutation.mutateAsync({
|
||||
tenantId,
|
||||
ingredientId
|
||||
});
|
||||
};
|
||||
|
||||
const handleHardDelete = async (ingredientId: string) => {
|
||||
if (!tenantId) {
|
||||
throw new Error('No tenant ID available');
|
||||
}
|
||||
|
||||
return hardDeleteMutation.mutateAsync({
|
||||
tenantId,
|
||||
ingredientId
|
||||
});
|
||||
};
|
||||
|
||||
const isLoading = softDeleteMutation.isPending || hardDeleteMutation.isPending;
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Delete Button - This could be in a dropdown menu, action bar, etc. */}
|
||||
<Button
|
||||
variant="danger"
|
||||
size="sm"
|
||||
onClick={() => setShowDeleteModal(true)}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<Trash2 className="w-4 h-4 mr-2" />
|
||||
Eliminar
|
||||
</Button>
|
||||
|
||||
{/* Delete Modal */}
|
||||
<DeleteIngredientModal
|
||||
isOpen={showDeleteModal}
|
||||
onClose={() => setShowDeleteModal(false)}
|
||||
ingredient={ingredient}
|
||||
onSoftDelete={handleSoftDelete}
|
||||
onHardDelete={handleHardDelete}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default DeleteIngredientExample;
|
||||
@@ -41,8 +41,11 @@ export const DeleteIngredientModal: React.FC<DeleteIngredientModalProps> = ({
|
||||
if (selectedMode === 'hard') {
|
||||
const result = await onHardDelete(ingredient.id);
|
||||
setDeletionResult(result);
|
||||
// Close modal immediately after successful hard delete
|
||||
onClose();
|
||||
} else {
|
||||
await onSoftDelete(ingredient.id);
|
||||
// Close modal immediately after successful soft delete
|
||||
onClose();
|
||||
}
|
||||
} catch (error) {
|
||||
@@ -212,16 +215,10 @@ export const DeleteIngredientModal: React.FC<DeleteIngredientModalProps> = ({
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={handleClose} size="lg">
|
||||
<div className="p-6">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl font-semibold text-[var(--text-primary)]">
|
||||
Eliminar Artículo
|
||||
</h2>
|
||||
<button
|
||||
onClick={handleClose}
|
||||
className="text-[var(--text-tertiary)] hover:text-[var(--text-secondary)]"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
|
||||
@@ -1,297 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Edit, Package, AlertTriangle, Settings, Thermometer } from 'lucide-react';
|
||||
import { StatusModal } from '../../ui/StatusModal/StatusModal';
|
||||
import { IngredientResponse, IngredientUpdate, IngredientCategory, UnitOfMeasure } from '../../../api/types/inventory';
|
||||
import { statusColors } from '../../../styles/colors';
|
||||
|
||||
interface EditItemModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
ingredient: IngredientResponse;
|
||||
onUpdateIngredient?: (id: string, updateData: IngredientUpdate) => Promise<void>;
|
||||
}
|
||||
|
||||
/**
|
||||
* EditItemModal - Focused modal for editing ingredient details
|
||||
* Organized form for updating ingredient properties
|
||||
*/
|
||||
export const EditItemModal: React.FC<EditItemModalProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
ingredient,
|
||||
onUpdateIngredient
|
||||
}) => {
|
||||
const [formData, setFormData] = useState<IngredientUpdate>({
|
||||
name: ingredient.name,
|
||||
description: ingredient.description || '',
|
||||
category: ingredient.category,
|
||||
brand: ingredient.brand || '',
|
||||
unit_of_measure: ingredient.unit_of_measure,
|
||||
average_cost: ingredient.average_cost || 0,
|
||||
low_stock_threshold: ingredient.low_stock_threshold,
|
||||
reorder_point: ingredient.reorder_point,
|
||||
max_stock_level: ingredient.max_stock_level || undefined,
|
||||
requires_refrigeration: ingredient.requires_refrigeration,
|
||||
requires_freezing: ingredient.requires_freezing,
|
||||
shelf_life_days: ingredient.shelf_life_days || undefined,
|
||||
storage_instructions: ingredient.storage_instructions || '',
|
||||
is_active: ingredient.is_active,
|
||||
notes: ingredient.notes || ''
|
||||
});
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [mode, setMode] = useState<'overview' | 'edit'>('edit');
|
||||
|
||||
const handleFieldChange = (sectionIndex: number, fieldIndex: number, value: string | number | boolean) => {
|
||||
// Map field positions to form data fields
|
||||
const fieldMappings = [
|
||||
// Basic Information section
|
||||
['name', 'description', 'category', 'brand'],
|
||||
// Measurements section
|
||||
['unit_of_measure', 'average_cost', 'low_stock_threshold', 'reorder_point', 'max_stock_level'],
|
||||
// Storage Requirements section
|
||||
['requires_refrigeration', 'requires_freezing', 'shelf_life_days', 'storage_instructions'],
|
||||
// Additional Settings section
|
||||
['is_active', 'notes']
|
||||
];
|
||||
|
||||
const fieldName = fieldMappings[sectionIndex]?.[fieldIndex] as keyof IngredientUpdate;
|
||||
if (fieldName) {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[fieldName]: value
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!formData.name?.trim()) {
|
||||
alert('El nombre es requerido');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!formData.low_stock_threshold || formData.low_stock_threshold < 0) {
|
||||
alert('El umbral de stock bajo debe ser un número positivo');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!formData.reorder_point || formData.reorder_point < 0) {
|
||||
alert('El punto de reorden debe ser un número positivo');
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
if (onUpdateIngredient) {
|
||||
await onUpdateIngredient(ingredient.id, formData);
|
||||
}
|
||||
onClose();
|
||||
} catch (error) {
|
||||
console.error('Error updating ingredient:', error);
|
||||
alert('Error al actualizar el artículo. Por favor, intenta de nuevo.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const statusConfig = {
|
||||
color: statusColors.inProgress.primary,
|
||||
text: 'Editar Artículo',
|
||||
icon: Edit
|
||||
};
|
||||
|
||||
const categoryOptions = Object.values(IngredientCategory).map(cat => ({
|
||||
label: cat.charAt(0).toUpperCase() + cat.slice(1),
|
||||
value: cat
|
||||
}));
|
||||
|
||||
const unitOptions = Object.values(UnitOfMeasure).map(unit => ({
|
||||
label: unit,
|
||||
value: unit
|
||||
}));
|
||||
|
||||
const sections = [
|
||||
{
|
||||
title: 'Información Básica',
|
||||
icon: Package,
|
||||
fields: [
|
||||
{
|
||||
label: 'Nombre',
|
||||
value: formData.name || '',
|
||||
type: 'text' as const,
|
||||
editable: true,
|
||||
required: true,
|
||||
placeholder: 'Nombre del artículo'
|
||||
},
|
||||
{
|
||||
label: 'Descripción',
|
||||
value: formData.description || '',
|
||||
type: 'text' as const,
|
||||
editable: true,
|
||||
placeholder: 'Descripción del artículo'
|
||||
},
|
||||
{
|
||||
label: 'Categoría',
|
||||
value: formData.category || '',
|
||||
type: 'select' as const,
|
||||
editable: true,
|
||||
required: true,
|
||||
options: categoryOptions
|
||||
},
|
||||
{
|
||||
label: 'Marca',
|
||||
value: formData.brand || '',
|
||||
type: 'text' as const,
|
||||
editable: true,
|
||||
placeholder: 'Marca del producto'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Medidas y Costos',
|
||||
icon: Settings,
|
||||
fields: [
|
||||
{
|
||||
label: 'Unidad de Medida',
|
||||
value: formData.unit_of_measure || '',
|
||||
type: 'select' as const,
|
||||
editable: true,
|
||||
required: true,
|
||||
options: unitOptions
|
||||
},
|
||||
{
|
||||
label: 'Costo Promedio',
|
||||
value: formData.average_cost || 0,
|
||||
type: 'currency' as const,
|
||||
editable: true,
|
||||
placeholder: '0.00'
|
||||
},
|
||||
{
|
||||
label: 'Umbral Stock Bajo',
|
||||
value: formData.low_stock_threshold || 0,
|
||||
type: 'number' as const,
|
||||
editable: true,
|
||||
required: true,
|
||||
placeholder: 'Cantidad mínima'
|
||||
},
|
||||
{
|
||||
label: 'Punto de Reorden',
|
||||
value: formData.reorder_point || 0,
|
||||
type: 'number' as const,
|
||||
editable: true,
|
||||
required: true,
|
||||
placeholder: 'Cuando reordenar'
|
||||
},
|
||||
{
|
||||
label: 'Stock Máximo',
|
||||
value: formData.max_stock_level || 0,
|
||||
type: 'number' as const,
|
||||
editable: true,
|
||||
placeholder: 'Stock máximo (opcional)'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Requisitos de Almacenamiento',
|
||||
icon: Thermometer,
|
||||
fields: [
|
||||
{
|
||||
label: 'Requiere Refrigeración',
|
||||
value: formData.requires_refrigeration ? 'Sí' : 'No',
|
||||
type: 'select' as const,
|
||||
editable: true,
|
||||
options: [
|
||||
{ label: 'No', value: false },
|
||||
{ label: 'Sí', value: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Requiere Congelación',
|
||||
value: formData.requires_freezing ? 'Sí' : 'No',
|
||||
type: 'select' as const,
|
||||
editable: true,
|
||||
options: [
|
||||
{ label: 'No', value: false },
|
||||
{ label: 'Sí', value: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Vida Útil (días)',
|
||||
value: formData.shelf_life_days || 0,
|
||||
type: 'number' as const,
|
||||
editable: true,
|
||||
placeholder: 'Días de duración'
|
||||
},
|
||||
{
|
||||
label: 'Instrucciones de Almacenamiento',
|
||||
value: formData.storage_instructions || '',
|
||||
type: 'text' as const,
|
||||
editable: true,
|
||||
placeholder: 'Instrucciones especiales...',
|
||||
span: 2 as const
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Configuración Adicional',
|
||||
icon: AlertTriangle,
|
||||
fields: [
|
||||
{
|
||||
label: 'Estado',
|
||||
value: formData.is_active ? 'Activo' : 'Inactivo',
|
||||
type: 'select' as const,
|
||||
editable: true,
|
||||
options: [
|
||||
{ label: 'Activo', value: true },
|
||||
{ label: 'Inactivo', value: false }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Notas',
|
||||
value: formData.notes || '',
|
||||
type: 'text' as const,
|
||||
editable: true,
|
||||
placeholder: 'Notas adicionales...',
|
||||
span: 2 as const
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const actions = [
|
||||
{
|
||||
label: 'Cancelar',
|
||||
variant: 'outline' as const,
|
||||
onClick: onClose,
|
||||
disabled: loading
|
||||
},
|
||||
{
|
||||
label: 'Guardar Cambios',
|
||||
variant: 'primary' as const,
|
||||
onClick: handleSave,
|
||||
disabled: loading || !formData.name?.trim(),
|
||||
loading
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<StatusModal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
mode={mode}
|
||||
onModeChange={setMode}
|
||||
title={`Editar: ${ingredient.name}`}
|
||||
subtitle={`${ingredient.category} • ID: ${ingredient.id.slice(0, 8)}...`}
|
||||
statusIndicator={statusConfig}
|
||||
sections={sections}
|
||||
actions={actions}
|
||||
onFieldChange={handleFieldChange}
|
||||
onSave={handleSave}
|
||||
size="xl"
|
||||
loading={loading}
|
||||
showDefaultActions={false}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditItemModal;
|
||||
@@ -1,244 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Clock, TrendingUp, TrendingDown, Package, AlertCircle, RotateCcw } from 'lucide-react';
|
||||
import { StatusModal } from '../../ui/StatusModal/StatusModal';
|
||||
import { IngredientResponse, StockMovementResponse } from '../../../api/types/inventory';
|
||||
import { formatters } from '../../ui/Stats/StatsPresets';
|
||||
import { statusColors } from '../../../styles/colors';
|
||||
|
||||
interface HistoryModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
ingredient: IngredientResponse;
|
||||
movements: StockMovementResponse[];
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* HistoryModal - Focused modal for viewing stock movement history
|
||||
* Clean, scannable list of recent movements
|
||||
*/
|
||||
export const HistoryModal: React.FC<HistoryModalProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
ingredient,
|
||||
movements = [],
|
||||
loading = false
|
||||
}) => {
|
||||
// Group movements by type for better organization
|
||||
const groupedMovements = movements.reduce((acc, movement) => {
|
||||
const type = movement.movement_type;
|
||||
if (!acc[type]) acc[type] = [];
|
||||
acc[type].push(movement);
|
||||
return acc;
|
||||
}, {} as Record<string, StockMovementResponse[]>);
|
||||
|
||||
// Get movement type display info
|
||||
const getMovementTypeInfo = (type: string) => {
|
||||
switch (type) {
|
||||
case 'purchase':
|
||||
return { label: 'Compra', icon: TrendingUp, color: statusColors.normal.primary };
|
||||
case 'production_use':
|
||||
return { label: 'Uso en Producción', icon: TrendingDown, color: statusColors.pending.primary };
|
||||
case 'adjustment':
|
||||
return { label: 'Ajuste', icon: Package, color: statusColors.inProgress.primary };
|
||||
case 'waste':
|
||||
return { label: 'Merma', icon: AlertCircle, color: statusColors.cancelled.primary };
|
||||
case 'transfer':
|
||||
return { label: 'Transferencia', icon: RotateCcw, color: statusColors.bread.primary };
|
||||
case 'return':
|
||||
return { label: 'Devolución', icon: RotateCcw, color: statusColors.inTransit.primary };
|
||||
case 'initial_stock':
|
||||
return { label: 'Stock Inicial', icon: Package, color: statusColors.completed.primary };
|
||||
case 'transformation':
|
||||
return { label: 'Transformación', icon: RotateCcw, color: statusColors.pastry.primary };
|
||||
default:
|
||||
return { label: type, icon: Package, color: statusColors.other.primary };
|
||||
}
|
||||
};
|
||||
|
||||
// Format movement for display
|
||||
const formatMovement = (movement: StockMovementResponse) => {
|
||||
const typeInfo = getMovementTypeInfo(movement.movement_type);
|
||||
const date = new Date(movement.movement_date).toLocaleDateString('es-ES');
|
||||
const time = new Date(movement.movement_date).toLocaleTimeString('es-ES', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
|
||||
const quantity = Number(movement.quantity);
|
||||
const isPositive = quantity > 0;
|
||||
const quantityText = `${isPositive ? '+' : ''}${quantity} ${ingredient.unit_of_measure}`;
|
||||
|
||||
return {
|
||||
id: movement.id,
|
||||
type: typeInfo.label,
|
||||
icon: typeInfo.icon,
|
||||
color: typeInfo.color,
|
||||
quantity: quantityText,
|
||||
isPositive,
|
||||
date: `${date} ${time}`,
|
||||
reference: movement.reference_number || '-',
|
||||
notes: movement.notes || '-',
|
||||
cost: movement.total_cost ? formatters.currency(movement.total_cost) : '-',
|
||||
quantityBefore: movement.quantity_before || 0,
|
||||
quantityAfter: movement.quantity_after || 0
|
||||
};
|
||||
};
|
||||
|
||||
const recentMovements = movements
|
||||
.slice(0, 20) // Show last 20 movements
|
||||
.map(formatMovement);
|
||||
|
||||
|
||||
const statusConfig = {
|
||||
color: statusColors.inProgress.primary,
|
||||
text: `${movements.length} movimientos`,
|
||||
icon: Clock
|
||||
};
|
||||
|
||||
// Create a visual movement list
|
||||
const movementsList = recentMovements.length > 0 ? (
|
||||
<div className="space-y-3 max-h-96 overflow-y-auto">
|
||||
{recentMovements.map((movement) => {
|
||||
const MovementIcon = movement.icon;
|
||||
return (
|
||||
<div
|
||||
key={movement.id}
|
||||
className="flex items-center gap-3 p-3 bg-[var(--surface-secondary)] rounded-lg hover:bg-[var(--surface-tertiary)] transition-colors"
|
||||
>
|
||||
{/* Icon and type */}
|
||||
<div
|
||||
className="flex-shrink-0 p-2 rounded-lg"
|
||||
style={{ backgroundColor: `${movement.color}15` }}
|
||||
>
|
||||
<MovementIcon
|
||||
className="w-4 h-4"
|
||||
style={{ color: movement.color }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Main content */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-medium text-[var(--text-primary)]">
|
||||
{movement.type}
|
||||
</span>
|
||||
<span
|
||||
className="font-bold"
|
||||
style={{
|
||||
color: movement.isPositive
|
||||
? statusColors.normal.primary
|
||||
: statusColors.pending.primary
|
||||
}}
|
||||
>
|
||||
{movement.quantity}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between text-sm text-[var(--text-secondary)] mt-1">
|
||||
<span>{movement.date}</span>
|
||||
<span>{movement.cost}</span>
|
||||
</div>
|
||||
|
||||
{movement.reference !== '-' && (
|
||||
<div className="text-xs text-[var(--text-tertiary)] mt-1">
|
||||
Ref: {movement.reference}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{movement.notes !== '-' && (
|
||||
<div className="text-xs text-[var(--text-secondary)] mt-1 truncate">
|
||||
{movement.notes}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Stock levels */}
|
||||
<div className="text-right text-sm">
|
||||
<div className="text-[var(--text-tertiary)]">
|
||||
{movement.quantityBefore} → {movement.quantityAfter}
|
||||
</div>
|
||||
<div className="text-xs text-[var(--text-tertiary)]">
|
||||
{ingredient.unit_of_measure}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-8 text-[var(--text-secondary)]">
|
||||
<Clock className="w-12 h-12 mx-auto mb-3 opacity-50" />
|
||||
<p>No hay movimientos de stock registrados</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
const sections = [
|
||||
{
|
||||
title: 'Historial de Movimientos',
|
||||
icon: Clock,
|
||||
fields: [
|
||||
{
|
||||
label: '',
|
||||
value: movementsList,
|
||||
span: 2 as const
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
// Add summary if we have movements
|
||||
if (movements.length > 0) {
|
||||
const totalIn = movements
|
||||
.filter(m => Number(m.quantity) > 0)
|
||||
.reduce((sum, m) => sum + Number(m.quantity), 0);
|
||||
|
||||
const totalOut = movements
|
||||
.filter(m => Number(m.quantity) < 0)
|
||||
.reduce((sum, m) => sum + Math.abs(Number(m.quantity)), 0);
|
||||
|
||||
const totalValue = movements
|
||||
.reduce((sum, m) => sum + (Number(m.total_cost) || 0), 0);
|
||||
|
||||
sections.unshift({
|
||||
title: 'Resumen de Actividad',
|
||||
icon: Package,
|
||||
fields: [
|
||||
{
|
||||
label: 'Total Entradas',
|
||||
value: `${totalIn} ${ingredient.unit_of_measure}`,
|
||||
highlight: true,
|
||||
span: 1 as const
|
||||
},
|
||||
{
|
||||
label: 'Total Salidas',
|
||||
value: `${totalOut} ${ingredient.unit_of_measure}`,
|
||||
span: 1 as const
|
||||
},
|
||||
{
|
||||
label: 'Valor Total Movimientos',
|
||||
value: formatters.currency(Math.abs(totalValue)),
|
||||
type: 'currency' as const,
|
||||
span: 2 as const
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<StatusModal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
mode="view"
|
||||
title={`Historial: ${ingredient.name}`}
|
||||
subtitle={`${ingredient.category} • Últimos ${Math.min(movements.length, 20)} movimientos`}
|
||||
statusIndicator={statusConfig}
|
||||
sections={sections}
|
||||
size="lg"
|
||||
loading={loading}
|
||||
showDefaultActions={false}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default HistoryModal;
|
||||
@@ -1,166 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Package, AlertTriangle, CheckCircle, Clock, Euro } from 'lucide-react';
|
||||
import { StatusModal } from '../../ui/StatusModal/StatusModal';
|
||||
import { IngredientResponse } from '../../../api/types/inventory';
|
||||
import { formatters } from '../../ui/Stats/StatsPresets';
|
||||
import { statusColors } from '../../../styles/colors';
|
||||
|
||||
interface QuickViewModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
ingredient: IngredientResponse;
|
||||
}
|
||||
|
||||
/**
|
||||
* QuickViewModal - Focused modal for viewing essential stock information
|
||||
* Shows only the most important data users need for quick decisions
|
||||
*/
|
||||
export const QuickViewModal: React.FC<QuickViewModalProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
ingredient
|
||||
}) => {
|
||||
// Safe number conversions
|
||||
const currentStock = Number(ingredient.current_stock) || 0;
|
||||
const maxStock = Number(ingredient.max_stock_level) || 0;
|
||||
const averageCost = Number(ingredient.average_cost) || 0;
|
||||
const lowThreshold = Number(ingredient.low_stock_threshold) || 0;
|
||||
const reorderPoint = Number(ingredient.reorder_point) || 0;
|
||||
|
||||
// Calculate derived values
|
||||
const totalValue = currentStock * averageCost;
|
||||
const stockPercentage = maxStock > 0 ? Math.round((currentStock / maxStock) * 100) : 0;
|
||||
const daysOfStock = currentStock > 0 ? Math.round(currentStock / (averageCost || 1)) : 0;
|
||||
|
||||
// Status configuration
|
||||
const getStatusConfig = () => {
|
||||
if (currentStock === 0) {
|
||||
return {
|
||||
color: statusColors.out.primary,
|
||||
text: 'Sin Stock',
|
||||
icon: AlertTriangle,
|
||||
isCritical: true
|
||||
};
|
||||
}
|
||||
if (currentStock <= lowThreshold) {
|
||||
return {
|
||||
color: statusColors.low.primary,
|
||||
text: 'Stock Bajo',
|
||||
icon: AlertTriangle,
|
||||
isHighlight: true
|
||||
};
|
||||
}
|
||||
return {
|
||||
color: statusColors.normal.primary,
|
||||
text: 'Stock Normal',
|
||||
icon: CheckCircle
|
||||
};
|
||||
};
|
||||
|
||||
const statusConfig = getStatusConfig();
|
||||
|
||||
const sections = [
|
||||
{
|
||||
title: 'Estado del Stock',
|
||||
icon: Package,
|
||||
fields: [
|
||||
{
|
||||
label: 'Cantidad Actual',
|
||||
value: `${currentStock} ${ingredient.unit_of_measure}`,
|
||||
highlight: true,
|
||||
span: 1 as const
|
||||
},
|
||||
{
|
||||
label: 'Valor Total',
|
||||
value: formatters.currency(totalValue),
|
||||
type: 'currency' as const,
|
||||
highlight: true,
|
||||
span: 1 as const
|
||||
},
|
||||
{
|
||||
label: 'Nivel de Stock',
|
||||
value: maxStock > 0 ? `${stockPercentage}%` : 'N/A',
|
||||
span: 1 as const
|
||||
},
|
||||
{
|
||||
label: 'Días Estimados',
|
||||
value: `~${daysOfStock} días`,
|
||||
span: 1 as const
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Umbrales de Control',
|
||||
icon: AlertTriangle,
|
||||
fields: [
|
||||
{
|
||||
label: 'Punto de Reorden',
|
||||
value: `${reorderPoint} ${ingredient.unit_of_measure}`,
|
||||
span: 1 as const
|
||||
},
|
||||
{
|
||||
label: 'Stock Mínimo',
|
||||
value: `${lowThreshold} ${ingredient.unit_of_measure}`,
|
||||
span: 1 as const
|
||||
},
|
||||
{
|
||||
label: 'Stock Máximo',
|
||||
value: maxStock > 0 ? `${maxStock} ${ingredient.unit_of_measure}` : 'No definido',
|
||||
span: 1 as const
|
||||
},
|
||||
{
|
||||
label: 'Costo Promedio',
|
||||
value: formatters.currency(averageCost),
|
||||
type: 'currency' as const,
|
||||
span: 1 as const
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
// Add storage requirements if available
|
||||
if (ingredient.requires_refrigeration || ingredient.requires_freezing || ingredient.shelf_life_days) {
|
||||
sections.push({
|
||||
title: 'Requisitos de Almacenamiento',
|
||||
icon: Clock,
|
||||
fields: [
|
||||
...(ingredient.shelf_life_days ? [{
|
||||
label: 'Vida Útil',
|
||||
value: `${ingredient.shelf_life_days} días`,
|
||||
span: 1 as const
|
||||
}] : []),
|
||||
...(ingredient.requires_refrigeration ? [{
|
||||
label: 'Refrigeración',
|
||||
value: 'Requerida',
|
||||
span: 1 as const
|
||||
}] : []),
|
||||
...(ingredient.requires_freezing ? [{
|
||||
label: 'Congelación',
|
||||
value: 'Requerida',
|
||||
span: 1 as const
|
||||
}] : []),
|
||||
...(ingredient.storage_instructions ? [{
|
||||
label: 'Instrucciones',
|
||||
value: ingredient.storage_instructions,
|
||||
span: 2 as const
|
||||
}] : [])
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<StatusModal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
mode="view"
|
||||
title={ingredient.name}
|
||||
subtitle={`${ingredient.category} • ${ingredient.description || 'Sin descripción'}`}
|
||||
statusIndicator={statusConfig}
|
||||
sections={sections}
|
||||
size="md"
|
||||
showDefaultActions={false}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default QuickViewModal;
|
||||
303
frontend/src/components/domain/inventory/ShowInfoModal.tsx
Normal file
303
frontend/src/components/domain/inventory/ShowInfoModal.tsx
Normal file
@@ -0,0 +1,303 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Package, AlertTriangle, CheckCircle, Clock, Euro, Edit, Info, Thermometer, Calendar, Tag, Save, X, TrendingUp } from 'lucide-react';
|
||||
import { StatusModal } from '../../ui/StatusModal/StatusModal';
|
||||
import { IngredientResponse } from '../../../api/types/inventory';
|
||||
import { formatters } from '../../ui/Stats/StatsPresets';
|
||||
import { statusColors } from '../../../styles/colors';
|
||||
|
||||
interface ShowInfoModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
ingredient: IngredientResponse;
|
||||
onSave?: (updatedData: Partial<IngredientResponse>) => Promise<void>;
|
||||
}
|
||||
|
||||
/**
|
||||
* ShowInfoModal - Complete item details modal
|
||||
* Shows ALL item information excluding stock, lots, and movements data
|
||||
* Includes edit functionality for item properties
|
||||
*/
|
||||
export const ShowInfoModal: React.FC<ShowInfoModalProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
ingredient,
|
||||
onSave
|
||||
}) => {
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [editData, setEditData] = useState<Partial<IngredientResponse>>({});
|
||||
|
||||
const handleEdit = () => {
|
||||
setIsEditing(true);
|
||||
setEditData(ingredient);
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
setIsEditing(false);
|
||||
setEditData({});
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (onSave) {
|
||||
await onSave(editData);
|
||||
setIsEditing(false);
|
||||
setEditData({});
|
||||
}
|
||||
};
|
||||
|
||||
// Status configuration based on item status (not stock)
|
||||
const statusConfig = {
|
||||
color: ingredient.is_active ? statusColors.normal.primary : statusColors.cancelled.primary,
|
||||
text: ingredient.is_active ? 'Activo' : 'Inactivo',
|
||||
icon: ingredient.is_active ? CheckCircle : AlertTriangle,
|
||||
isCritical: !ingredient.is_active
|
||||
};
|
||||
|
||||
const currentData = isEditing ? editData : ingredient;
|
||||
|
||||
const sections = [
|
||||
{
|
||||
title: 'Información Básica',
|
||||
icon: Info,
|
||||
fields: [
|
||||
{
|
||||
label: 'Nombre',
|
||||
value: currentData.name || '',
|
||||
highlight: true,
|
||||
span: 2 as const,
|
||||
editable: true,
|
||||
required: true
|
||||
},
|
||||
{
|
||||
label: 'Descripción',
|
||||
value: currentData.description || '',
|
||||
span: 2 as const,
|
||||
editable: true,
|
||||
placeholder: 'Descripción del producto'
|
||||
},
|
||||
{
|
||||
label: 'Categoría',
|
||||
value: currentData.category || '',
|
||||
span: 1 as const,
|
||||
editable: true,
|
||||
required: true
|
||||
},
|
||||
{
|
||||
label: 'Subcategoría',
|
||||
value: currentData.subcategory || '',
|
||||
span: 1 as const,
|
||||
editable: true,
|
||||
placeholder: 'Subcategoría'
|
||||
},
|
||||
{
|
||||
label: 'Marca',
|
||||
value: currentData.brand || '',
|
||||
span: 1 as const,
|
||||
editable: true,
|
||||
placeholder: 'Marca del producto'
|
||||
},
|
||||
{
|
||||
label: 'Tipo de Producto',
|
||||
value: currentData.product_type || '',
|
||||
span: 1 as const,
|
||||
editable: true,
|
||||
placeholder: 'Tipo de producto'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Especificaciones',
|
||||
icon: Package,
|
||||
fields: [
|
||||
{
|
||||
label: 'Unidad de Medida',
|
||||
value: currentData.unit_of_measure || '',
|
||||
span: 1 as const,
|
||||
editable: true,
|
||||
required: true,
|
||||
placeholder: 'kg, litros, unidades, etc.'
|
||||
},
|
||||
{
|
||||
label: 'Tamaño del Paquete',
|
||||
value: currentData.package_size || '',
|
||||
span: 1 as const,
|
||||
editable: true,
|
||||
type: 'number' as const,
|
||||
placeholder: 'Tamaño del paquete'
|
||||
},
|
||||
{
|
||||
label: 'Es Perecedero',
|
||||
value: currentData.is_perishable ? 'Sí' : 'No',
|
||||
span: 1 as const,
|
||||
editable: true,
|
||||
type: 'select' as const,
|
||||
options: [
|
||||
{ label: 'Sí', value: 'true' },
|
||||
{ label: 'No', value: 'false' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Es de Temporada',
|
||||
value: currentData.is_seasonal ? 'Sí' : 'No',
|
||||
span: 1 as const,
|
||||
editable: true,
|
||||
type: 'select' as const,
|
||||
options: [
|
||||
{ label: 'Sí', value: 'true' },
|
||||
{ label: 'No', value: 'false' }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Costos y Precios',
|
||||
icon: Euro,
|
||||
fields: [
|
||||
{
|
||||
label: 'Costo Promedio',
|
||||
value: Number(currentData.average_cost) || 0,
|
||||
type: 'currency' as const,
|
||||
span: 1 as const,
|
||||
editable: true,
|
||||
placeholder: '0.00'
|
||||
},
|
||||
{
|
||||
label: 'Último Precio de Compra',
|
||||
value: Number(currentData.last_purchase_price) || 0,
|
||||
type: 'currency' as const,
|
||||
span: 1 as const,
|
||||
editable: true,
|
||||
placeholder: '0.00'
|
||||
},
|
||||
{
|
||||
label: 'Costo Estándar',
|
||||
value: Number(currentData.standard_cost) || 0,
|
||||
type: 'currency' as const,
|
||||
span: 2 as const,
|
||||
editable: true,
|
||||
placeholder: '0.00'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Parámetros de Inventario',
|
||||
icon: TrendingUp,
|
||||
fields: [
|
||||
{
|
||||
label: 'Umbral Stock Bajo',
|
||||
value: currentData.low_stock_threshold || 0,
|
||||
span: 1 as const,
|
||||
editable: true,
|
||||
type: 'number' as const,
|
||||
placeholder: 'Cantidad mínima antes de alerta'
|
||||
},
|
||||
{
|
||||
label: 'Punto de Reorden',
|
||||
value: currentData.reorder_point || 0,
|
||||
span: 1 as const,
|
||||
editable: true,
|
||||
type: 'number' as const,
|
||||
placeholder: 'Punto para reordenar'
|
||||
},
|
||||
{
|
||||
label: 'Cantidad de Reorden',
|
||||
value: currentData.reorder_quantity || 0,
|
||||
span: 1 as const,
|
||||
editable: true,
|
||||
type: 'number' as const,
|
||||
placeholder: 'Cantidad a reordenar'
|
||||
},
|
||||
{
|
||||
label: 'Stock Máximo',
|
||||
value: currentData.max_stock_level || '',
|
||||
span: 1 as const,
|
||||
editable: true,
|
||||
type: 'number' as const,
|
||||
placeholder: 'Cantidad máxima permitida'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
// Actions based on edit mode
|
||||
const actions = [];
|
||||
if (isEditing) {
|
||||
actions.push(
|
||||
{
|
||||
label: 'Cancelar',
|
||||
icon: X,
|
||||
variant: 'outline' as const,
|
||||
onClick: handleCancel
|
||||
},
|
||||
{
|
||||
label: 'Guardar',
|
||||
icon: Save,
|
||||
variant: 'primary' as const,
|
||||
onClick: handleSave
|
||||
}
|
||||
);
|
||||
} else if (onSave) {
|
||||
actions.push({
|
||||
label: 'Editar',
|
||||
icon: Edit,
|
||||
variant: 'primary' as const,
|
||||
onClick: handleEdit
|
||||
});
|
||||
}
|
||||
|
||||
// Handle field changes
|
||||
const handleFieldChange = (sectionIndex: number, fieldIndex: number, value: string | number) => {
|
||||
if (!isEditing) return;
|
||||
|
||||
// Map field indices to ingredient properties
|
||||
const fieldMappings = [
|
||||
// Section 0: Información Básica
|
||||
['name', 'description', 'category', 'subcategory', 'brand', 'product_type'],
|
||||
// Section 1: Especificaciones
|
||||
['unit_of_measure', 'package_size', 'is_perishable', 'is_seasonal'],
|
||||
// Section 2: Costos y Precios
|
||||
['average_cost', 'last_purchase_price', 'standard_cost'],
|
||||
// Section 3: Parámetros de Inventario
|
||||
['low_stock_threshold', 'reorder_point', 'reorder_quantity', 'max_stock_level']
|
||||
];
|
||||
|
||||
const fieldName = fieldMappings[sectionIndex]?.[fieldIndex];
|
||||
if (!fieldName) return;
|
||||
|
||||
let processedValue = value;
|
||||
|
||||
// Handle boolean fields
|
||||
if (fieldName === 'is_perishable' || fieldName === 'is_seasonal') {
|
||||
processedValue = value === 'true';
|
||||
}
|
||||
|
||||
// Handle numeric fields
|
||||
if (fieldName === 'package_size' || fieldName.includes('cost') || fieldName.includes('price') ||
|
||||
fieldName.includes('threshold') || fieldName.includes('point') || fieldName.includes('quantity') ||
|
||||
fieldName.includes('level')) {
|
||||
processedValue = Number(value) || 0;
|
||||
}
|
||||
|
||||
setEditData(prev => ({
|
||||
...prev,
|
||||
[fieldName]: processedValue
|
||||
}));
|
||||
};
|
||||
|
||||
return (
|
||||
<StatusModal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
mode={isEditing ? "edit" : "view"}
|
||||
title={`${isEditing ? 'Editar' : 'Detalles'}: ${ingredient.name}`}
|
||||
subtitle={`${ingredient.category} • Información del artículo`}
|
||||
statusIndicator={statusConfig}
|
||||
sections={sections}
|
||||
size="lg"
|
||||
showDefaultActions={false}
|
||||
actions={actions}
|
||||
onFieldChange={handleFieldChange}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default ShowInfoModal;
|
||||
232
frontend/src/components/domain/inventory/StockHistoryModal.tsx
Normal file
232
frontend/src/components/domain/inventory/StockHistoryModal.tsx
Normal file
@@ -0,0 +1,232 @@
|
||||
import React from 'react';
|
||||
import { Clock, TrendingDown, Package, AlertCircle, RotateCcw, X } from 'lucide-react';
|
||||
import { StatusModal } from '../../ui/StatusModal/StatusModal';
|
||||
import { IngredientResponse, StockMovementResponse } from '../../../api/types/inventory';
|
||||
import { formatters } from '../../ui/Stats/StatsPresets';
|
||||
import { statusColors } from '../../../styles/colors';
|
||||
|
||||
interface StockHistoryModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
ingredient: IngredientResponse;
|
||||
movements: StockMovementResponse[];
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* StockHistoryModal - Dedicated modal for stock movement history
|
||||
* Shows only the movements list in a clean, focused interface
|
||||
*/
|
||||
export const StockHistoryModal: React.FC<StockHistoryModalProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
ingredient,
|
||||
movements = [],
|
||||
loading = false
|
||||
}) => {
|
||||
// Get movement type display info
|
||||
const getMovementTypeInfo = (type: string, quantity: number) => {
|
||||
const isPositive = quantity > 0;
|
||||
const absQuantity = Math.abs(quantity);
|
||||
|
||||
switch (type) {
|
||||
case 'PURCHASE':
|
||||
return {
|
||||
type: 'Compra',
|
||||
icon: Package,
|
||||
color: statusColors.completed.primary,
|
||||
isPositive: true,
|
||||
quantity: `+${absQuantity}`
|
||||
};
|
||||
case 'PRODUCTION_USE':
|
||||
return {
|
||||
type: 'Uso en Producción',
|
||||
icon: TrendingDown,
|
||||
color: statusColors.pending.primary,
|
||||
isPositive: false,
|
||||
quantity: `-${absQuantity}`
|
||||
};
|
||||
case 'ADJUSTMENT':
|
||||
return {
|
||||
type: 'Ajuste',
|
||||
icon: AlertCircle,
|
||||
color: statusColors.inProgress.primary,
|
||||
isPositive,
|
||||
quantity: isPositive ? `+${absQuantity}` : `-${absQuantity}`
|
||||
};
|
||||
case 'WASTE':
|
||||
return {
|
||||
type: 'Desperdicio',
|
||||
icon: X,
|
||||
color: statusColors.out.primary,
|
||||
isPositive: false,
|
||||
quantity: `-${absQuantity}`
|
||||
};
|
||||
case 'TRANSFORMATION':
|
||||
return {
|
||||
type: 'Transformación',
|
||||
icon: RotateCcw,
|
||||
color: statusColors.low.primary,
|
||||
isPositive,
|
||||
quantity: isPositive ? `+${absQuantity}` : `-${absQuantity}`
|
||||
};
|
||||
case 'INITIAL_STOCK':
|
||||
return {
|
||||
type: 'Stock Inicial',
|
||||
icon: Package,
|
||||
color: statusColors.normal.primary,
|
||||
isPositive: true,
|
||||
quantity: `+${absQuantity}`
|
||||
};
|
||||
default:
|
||||
return {
|
||||
type: 'Otro',
|
||||
icon: Package,
|
||||
color: statusColors.other.primary,
|
||||
isPositive,
|
||||
quantity: isPositive ? `+${absQuantity}` : `-${absQuantity}`
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
// Process movements for display
|
||||
const recentMovements = movements.slice(0, 20).map(movement => {
|
||||
const movementInfo = getMovementTypeInfo(movement.movement_type, Number(movement.quantity));
|
||||
|
||||
return {
|
||||
id: movement.id,
|
||||
...movementInfo,
|
||||
date: movement.movement_date ? new Date(movement.movement_date).toLocaleDateString('es-ES') : 'Sin fecha',
|
||||
cost: movement.unit_cost ? formatters.currency(Number(movement.unit_cost)) : '-',
|
||||
reference: movement.reference_number || '-',
|
||||
notes: movement.notes || '-',
|
||||
quantityBefore: Number(movement.quantity_before) || 0,
|
||||
quantityAfter: Number(movement.quantity_after) || 0
|
||||
};
|
||||
});
|
||||
|
||||
const statusConfig = {
|
||||
color: statusColors.inProgress.primary,
|
||||
text: `${movements.length} movimientos`,
|
||||
icon: Clock
|
||||
};
|
||||
|
||||
// Create movements list display
|
||||
const movementsList = recentMovements.length > 0 ? (
|
||||
<div className="space-y-3 max-h-96 overflow-y-auto">
|
||||
{recentMovements.map((movement) => {
|
||||
const MovementIcon = movement.icon;
|
||||
return (
|
||||
<div
|
||||
key={movement.id}
|
||||
className="flex items-center gap-3 p-4 bg-[var(--surface-secondary)] rounded-lg hover:bg-[var(--surface-tertiary)] transition-colors border border-[var(--border-primary)]"
|
||||
>
|
||||
{/* Icon and type */}
|
||||
<div
|
||||
className="flex-shrink-0 p-2 rounded-lg"
|
||||
style={{ backgroundColor: `${movement.color}15` }}
|
||||
>
|
||||
<MovementIcon
|
||||
className="w-5 h-5"
|
||||
style={{ color: movement.color }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Main content */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-medium text-[var(--text-primary)]">
|
||||
{movement.type}
|
||||
</span>
|
||||
<span
|
||||
className="font-bold text-lg"
|
||||
style={{
|
||||
color: movement.isPositive
|
||||
? statusColors.completed.primary
|
||||
: statusColors.out.primary
|
||||
}}
|
||||
>
|
||||
{movement.quantity}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between text-sm text-[var(--text-secondary)] mt-1">
|
||||
<span>{movement.date}</span>
|
||||
<span>{movement.cost}</span>
|
||||
</div>
|
||||
|
||||
{movement.reference !== '-' && (
|
||||
<div className="text-xs text-[var(--text-tertiary)] mt-1">
|
||||
Ref: {movement.reference}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{movement.notes !== '-' && (
|
||||
<div className="text-xs text-[var(--text-secondary)] mt-1 truncate">
|
||||
{movement.notes}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Stock levels */}
|
||||
<div className="text-right text-sm">
|
||||
<div className="text-[var(--text-tertiary)]">
|
||||
{movement.quantityBefore} → {movement.quantityAfter}
|
||||
</div>
|
||||
<div className="text-xs text-[var(--text-tertiary)]">
|
||||
{ingredient.unit_of_measure}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{movements.length > 20 && (
|
||||
<div className="text-center text-sm text-[var(--text-secondary)] mt-4 p-3 bg-[var(--surface-secondary)] rounded-lg">
|
||||
Y {movements.length - 20} movimientos más...
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-12 text-[var(--text-secondary)]">
|
||||
<Clock className="w-16 h-16 mx-auto mb-4 opacity-30" />
|
||||
<h3 className="text-lg font-medium text-[var(--text-primary)] mb-2">
|
||||
No hay movimientos registrados
|
||||
</h3>
|
||||
<p className="text-sm">
|
||||
Los movimientos de stock aparecerán aquí cuando se agregue o use inventario
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
const sections = [
|
||||
{
|
||||
title: 'Historial de Movimientos',
|
||||
icon: Clock,
|
||||
fields: [
|
||||
{
|
||||
label: '',
|
||||
value: movementsList,
|
||||
span: 2 as const
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<StatusModal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
mode="view"
|
||||
title={`Historial de Stock: ${ingredient.name}`}
|
||||
subtitle={`${ingredient.category} • ${movements.length} movimientos registrados`}
|
||||
statusIndicator={statusConfig}
|
||||
sections={sections}
|
||||
size="lg"
|
||||
loading={loading}
|
||||
showDefaultActions={false}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default StockHistoryModal;
|
||||
@@ -1,311 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Package, Calendar, AlertTriangle, CheckCircle, Clock } from 'lucide-react';
|
||||
import { StatusModal } from '../../ui/StatusModal/StatusModal';
|
||||
import { IngredientResponse, StockResponse } from '../../../api/types/inventory';
|
||||
import { formatters } from '../../ui/Stats/StatsPresets';
|
||||
import { statusColors } from '../../../styles/colors';
|
||||
|
||||
interface StockLotsModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
ingredient: IngredientResponse;
|
||||
stockLots: StockResponse[];
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* StockLotsModal - Focused modal for viewing individual stock lots/batches
|
||||
* Shows detailed breakdown of all stock batches with expiration, quantities, etc.
|
||||
*/
|
||||
export const StockLotsModal: React.FC<StockLotsModalProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
ingredient,
|
||||
stockLots = [],
|
||||
loading = false
|
||||
}) => {
|
||||
|
||||
// Sort stock lots by expiration date (earliest first, then by batch number)
|
||||
// Use current_quantity from API response
|
||||
const sortedLots = stockLots
|
||||
.filter(lot => (lot.current_quantity || lot.quantity || 0) > 0) // Handle both API variations
|
||||
.sort((a, b) => {
|
||||
if (a.expiration_date && b.expiration_date) {
|
||||
return new Date(a.expiration_date).getTime() - new Date(b.expiration_date).getTime();
|
||||
}
|
||||
if (a.expiration_date && !b.expiration_date) return -1;
|
||||
if (!a.expiration_date && b.expiration_date) return 1;
|
||||
return (a.batch_number || '').localeCompare(b.batch_number || '');
|
||||
});
|
||||
|
||||
// Get lot status info using global color system
|
||||
const getLotStatus = (lot: StockResponse) => {
|
||||
if (!lot.expiration_date) {
|
||||
return {
|
||||
label: 'Sin Vencimiento',
|
||||
color: statusColors.other.primary,
|
||||
icon: Package,
|
||||
isCritical: false
|
||||
};
|
||||
}
|
||||
|
||||
const today = new Date();
|
||||
const expirationDate = new Date(lot.expiration_date);
|
||||
const daysUntilExpiry = Math.ceil((expirationDate.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
|
||||
|
||||
if (daysUntilExpiry < 0) {
|
||||
return {
|
||||
label: 'Vencido',
|
||||
color: statusColors.expired.primary,
|
||||
icon: AlertTriangle,
|
||||
isCritical: true
|
||||
};
|
||||
} else if (daysUntilExpiry <= 3) {
|
||||
return {
|
||||
label: 'Vence Pronto',
|
||||
color: statusColors.low.primary,
|
||||
icon: AlertTriangle,
|
||||
isCritical: true
|
||||
};
|
||||
} else if (daysUntilExpiry <= 7) {
|
||||
return {
|
||||
label: 'Por Vencer',
|
||||
color: statusColors.pending.primary,
|
||||
icon: Clock,
|
||||
isCritical: false
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
label: 'Fresco',
|
||||
color: statusColors.normal.primary,
|
||||
icon: CheckCircle,
|
||||
isCritical: false
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
// Format lot for display
|
||||
const formatLot = (lot: StockResponse, index: number) => {
|
||||
const status = getLotStatus(lot);
|
||||
const expirationDate = lot.expiration_date ?
|
||||
new Date(lot.expiration_date).toLocaleDateString('es-ES') : 'N/A';
|
||||
|
||||
const daysUntilExpiry = lot.expiration_date ?
|
||||
Math.ceil((new Date(lot.expiration_date).getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24)) : null;
|
||||
|
||||
const StatusIcon = status.icon;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={lot.id}
|
||||
className="flex items-center gap-3 p-4 rounded-lg border border-[var(--border-primary)] bg-[var(--surface-secondary)] hover:bg-[var(--surface-tertiary)] transition-colors"
|
||||
style={{
|
||||
borderColor: status.isCritical ? `${status.color}40` : undefined,
|
||||
backgroundColor: status.isCritical ? `${status.color}08` : undefined
|
||||
}}
|
||||
>
|
||||
{/* Status indicator */}
|
||||
<div
|
||||
className="flex-shrink-0 p-2 rounded-lg"
|
||||
style={{ backgroundColor: `${status.color}15` }}
|
||||
>
|
||||
<StatusIcon
|
||||
className="w-5 h-5"
|
||||
style={{ color: status.color }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Lot information */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div>
|
||||
<div className="font-medium text-[var(--text-primary)]">
|
||||
Lote #{index + 1} {lot.batch_number && `(${lot.batch_number})`}
|
||||
</div>
|
||||
<div
|
||||
className="text-sm font-medium"
|
||||
style={{ color: status.color }}
|
||||
>
|
||||
{status.label} {daysUntilExpiry !== null && daysUntilExpiry >= 0 && `(${daysUntilExpiry} días)`}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-lg font-bold text-[var(--text-primary)]">
|
||||
{lot.current_quantity || lot.quantity} {ingredient.unit_of_measure}
|
||||
</div>
|
||||
{lot.available_quantity !== (lot.current_quantity || lot.quantity) && (
|
||||
<div className="text-xs text-[var(--text-secondary)]">
|
||||
Disponible: {lot.available_quantity}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
|
||||
<div>
|
||||
<span className="text-[var(--text-secondary)]">Vencimiento:</span>
|
||||
<div className="font-medium">{expirationDate}</div>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-[var(--text-secondary)]">Precio/unidad:</span>
|
||||
<div className="font-medium">{formatters.currency(lot.unit_cost || lot.unit_price || 0)}</div>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-[var(--text-secondary)]">Valor total:</span>
|
||||
<div className="font-medium">{formatters.currency(lot.total_cost || lot.total_value || 0)}</div>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-[var(--text-secondary)]">Etapa:</span>
|
||||
<div className="font-medium capitalize">{lot.production_stage.replace('_', ' ')}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{lot.notes && (
|
||||
<div className="mt-2 text-xs text-[var(--text-secondary)]">
|
||||
📝 {lot.notes}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const statusConfig = {
|
||||
color: statusColors.inProgress.primary,
|
||||
text: loading
|
||||
? 'Cargando...'
|
||||
: stockLots.length === 0
|
||||
? 'Sin datos de lotes'
|
||||
: `${sortedLots.length} de ${stockLots.length} lotes`,
|
||||
icon: Package
|
||||
};
|
||||
|
||||
// Create the lots list
|
||||
const lotsDisplay = loading ? (
|
||||
<div className="text-center py-8 text-[var(--text-secondary)]">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[var(--color-primary)] mx-auto mb-3"></div>
|
||||
<p>Cargando lotes...</p>
|
||||
</div>
|
||||
) : stockLots.length === 0 ? (
|
||||
<div className="text-center py-8 text-[var(--text-secondary)]">
|
||||
<Package className="w-12 h-12 mx-auto mb-3 opacity-50" />
|
||||
<p>No hay datos de lotes para este ingrediente</p>
|
||||
<p className="text-xs mt-2">Es posible que no se hayan registrado lotes individuales</p>
|
||||
</div>
|
||||
) : sortedLots.length === 0 ? (
|
||||
<div className="text-center py-8 text-[var(--text-secondary)]">
|
||||
<Package className="w-12 h-12 mx-auto mb-3 opacity-50" />
|
||||
<p>No hay lotes disponibles con stock</p>
|
||||
<p className="text-xs mt-2">Total de lotes registrados: {stockLots.length}</p>
|
||||
<div className="text-xs mt-2 text-left max-w-sm mx-auto">
|
||||
<div>Lotes filtrados por:</div>
|
||||
<ul className="list-disc list-inside">
|
||||
<li>Cantidad > 0</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3 max-h-96 overflow-y-auto">
|
||||
{sortedLots.map((lot, index) => formatLot(lot, index))}
|
||||
</div>
|
||||
);
|
||||
|
||||
const sections = [
|
||||
{
|
||||
title: stockLots.length === 0 ? 'Información de Stock' : 'Lotes de Stock Disponibles',
|
||||
icon: Package,
|
||||
fields: [
|
||||
{
|
||||
label: '',
|
||||
value: stockLots.length === 0 ? (
|
||||
<div className="space-y-4">
|
||||
<div className="text-center py-6 text-[var(--text-secondary)]">
|
||||
<Package className="w-10 h-10 mx-auto mb-3 opacity-50" />
|
||||
<p>Este ingrediente no tiene lotes individuales registrados</p>
|
||||
<p className="text-xs mt-2">Se muestra información agregada del stock</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4 p-4 bg-[var(--surface-secondary)] rounded-lg">
|
||||
<div>
|
||||
<span className="text-[var(--text-secondary)] text-sm">Stock Total:</span>
|
||||
<div className="font-medium">{ingredient.current_stock || 0} {ingredient.unit_of_measure}</div>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-[var(--text-secondary)] text-sm">Costo Promedio:</span>
|
||||
<div className="font-medium">€{(ingredient.average_cost || 0).toFixed(2)}</div>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-[var(--text-secondary)] text-sm">Umbral Mínimo:</span>
|
||||
<div className="font-medium">{ingredient.low_stock_threshold} {ingredient.unit_of_measure}</div>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-[var(--text-secondary)] text-sm">Punto de Reorden:</span>
|
||||
<div className="font-medium">{ingredient.reorder_point} {ingredient.unit_of_measure}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : lotsDisplay,
|
||||
span: 2 as const
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
// Add summary if we have lots
|
||||
if (sortedLots.length > 0) {
|
||||
const totalQuantity = sortedLots.reduce((sum, lot) => sum + (lot.current_quantity || lot.quantity || 0), 0);
|
||||
const totalValue = sortedLots.reduce((sum, lot) => sum + (lot.total_cost || lot.total_value || 0), 0);
|
||||
const expiringSoon = sortedLots.filter(lot => {
|
||||
if (!lot.expiration_date) return false;
|
||||
const daysUntilExpiry = Math.ceil((new Date(lot.expiration_date).getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24));
|
||||
return daysUntilExpiry <= 7;
|
||||
}).length;
|
||||
|
||||
sections.unshift({
|
||||
title: 'Resumen de Lotes',
|
||||
icon: CheckCircle,
|
||||
fields: [
|
||||
{
|
||||
label: 'Total Cantidad',
|
||||
value: `${totalQuantity} ${ingredient.unit_of_measure}`,
|
||||
highlight: true,
|
||||
span: 1 as const
|
||||
},
|
||||
{
|
||||
label: 'Número de Lotes',
|
||||
value: sortedLots.length,
|
||||
span: 1 as const
|
||||
},
|
||||
{
|
||||
label: 'Valor Total',
|
||||
value: formatters.currency(totalValue),
|
||||
type: 'currency' as const,
|
||||
span: 1 as const
|
||||
},
|
||||
{
|
||||
label: 'Por Vencer (7 días)',
|
||||
value: expiringSoon,
|
||||
highlight: expiringSoon > 0,
|
||||
span: 1 as const
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<StatusModal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
mode="view"
|
||||
title={`Lotes: ${ingredient.name}`}
|
||||
subtitle={`${ingredient.category} • Gestión por lotes y vencimientos`}
|
||||
statusIndicator={statusConfig}
|
||||
sections={sections}
|
||||
size="xl"
|
||||
loading={loading}
|
||||
showDefaultActions={false}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default StockLotsModal;
|
||||
@@ -1,213 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Minus, Package, FileText, AlertTriangle } from 'lucide-react';
|
||||
import { StatusModal } from '../../ui/StatusModal/StatusModal';
|
||||
import { IngredientResponse, StockMovementCreate } from '../../../api/types/inventory';
|
||||
import { statusColors } from '../../../styles/colors';
|
||||
|
||||
interface UseStockModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
ingredient: IngredientResponse;
|
||||
onUseStock?: (movementData: StockMovementCreate) => Promise<void>;
|
||||
}
|
||||
|
||||
/**
|
||||
* UseStockModal - Focused modal for recording stock consumption
|
||||
* Quick form for production usage tracking
|
||||
*/
|
||||
export const UseStockModal: React.FC<UseStockModalProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
ingredient,
|
||||
onUseStock
|
||||
}) => {
|
||||
const [formData, setFormData] = useState({
|
||||
quantity: 0,
|
||||
reference_number: '',
|
||||
notes: '',
|
||||
reason_code: 'production_use'
|
||||
});
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [mode, setMode] = useState<'overview' | 'edit'>('edit');
|
||||
|
||||
const handleFieldChange = (_sectionIndex: number, fieldIndex: number, value: string | number) => {
|
||||
const fields = ['quantity', 'reference_number', 'notes', 'reason_code'];
|
||||
const fieldName = fields[fieldIndex] as keyof typeof formData;
|
||||
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[fieldName]: value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
const currentStock = Number(ingredient.current_stock) || 0;
|
||||
const requestedQuantity = Number(formData.quantity);
|
||||
|
||||
if (!requestedQuantity || requestedQuantity <= 0) {
|
||||
alert('Por favor, ingresa una cantidad válida');
|
||||
return;
|
||||
}
|
||||
|
||||
if (requestedQuantity > currentStock) {
|
||||
alert(`No hay suficiente stock. Disponible: ${currentStock} ${ingredient.unit_of_measure}`);
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const movementData: StockMovementCreate = {
|
||||
ingredient_id: ingredient.id,
|
||||
movement_type: formData.reason_code === 'waste' ? 'waste' : 'production_use',
|
||||
quantity: -requestedQuantity, // Negative for consumption
|
||||
reference_number: formData.reference_number || undefined,
|
||||
notes: formData.notes || undefined,
|
||||
reason_code: formData.reason_code || undefined
|
||||
};
|
||||
|
||||
if (onUseStock) {
|
||||
await onUseStock(movementData);
|
||||
}
|
||||
|
||||
// Reset form
|
||||
setFormData({
|
||||
quantity: 0,
|
||||
reference_number: '',
|
||||
notes: '',
|
||||
reason_code: 'production_use'
|
||||
});
|
||||
|
||||
onClose();
|
||||
} catch (error) {
|
||||
console.error('Error using stock:', error);
|
||||
alert('Error al registrar el uso de stock. Por favor, intenta de nuevo.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const currentStock = Number(ingredient.current_stock) || 0;
|
||||
const requestedQuantity = Number(formData.quantity) || 0;
|
||||
const remainingStock = Math.max(0, currentStock - requestedQuantity);
|
||||
const isLowStock = remainingStock <= (Number(ingredient.low_stock_threshold) || 0);
|
||||
|
||||
const statusConfig = {
|
||||
color: statusColors.pending.primary,
|
||||
text: 'Usar Stock',
|
||||
icon: Minus
|
||||
};
|
||||
|
||||
const reasonOptions = [
|
||||
{ label: 'Uso en Producción', value: 'production_use' },
|
||||
{ label: 'Merma/Desperdicio', value: 'waste' },
|
||||
{ label: 'Ajuste de Inventario', value: 'adjustment' },
|
||||
{ label: 'Transferencia', value: 'transfer' }
|
||||
];
|
||||
|
||||
const sections = [
|
||||
{
|
||||
title: 'Consumo de Stock',
|
||||
icon: Package,
|
||||
fields: [
|
||||
{
|
||||
label: `Cantidad a Usar (${ingredient.unit_of_measure})`,
|
||||
value: formData.quantity || 0,
|
||||
type: 'number' as const,
|
||||
editable: true,
|
||||
required: true,
|
||||
placeholder: `Máx: ${currentStock}`
|
||||
},
|
||||
{
|
||||
label: 'Motivo',
|
||||
value: formData.reason_code,
|
||||
type: 'select' as const,
|
||||
editable: true,
|
||||
required: true,
|
||||
options: reasonOptions
|
||||
},
|
||||
{
|
||||
label: 'Referencia/Pedido',
|
||||
value: formData.reference_number || '',
|
||||
type: 'text' as const,
|
||||
editable: true,
|
||||
placeholder: 'Ej: PROD-2024-001',
|
||||
span: 2 as const
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Detalles Adicionales',
|
||||
icon: FileText,
|
||||
fields: [
|
||||
{
|
||||
label: 'Notas',
|
||||
value: formData.notes || '',
|
||||
type: 'text' as const,
|
||||
editable: true,
|
||||
placeholder: 'Detalles del uso, receta, observaciones...',
|
||||
span: 2 as const
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Resumen del Movimiento',
|
||||
icon: isLowStock ? AlertTriangle : Package,
|
||||
fields: [
|
||||
{
|
||||
label: 'Stock Actual',
|
||||
value: `${currentStock} ${ingredient.unit_of_measure}`,
|
||||
span: 1 as const
|
||||
},
|
||||
{
|
||||
label: 'Stock Restante',
|
||||
value: `${remainingStock} ${ingredient.unit_of_measure}`,
|
||||
highlight: isLowStock,
|
||||
span: 1 as const
|
||||
},
|
||||
...(isLowStock ? [{
|
||||
label: 'Advertencia',
|
||||
value: '⚠️ El stock quedará por debajo del umbral mínimo',
|
||||
span: 2 as const
|
||||
}] : [])
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const actions = [
|
||||
{
|
||||
label: 'Cancelar',
|
||||
variant: 'outline' as const,
|
||||
onClick: onClose,
|
||||
disabled: loading
|
||||
},
|
||||
{
|
||||
label: formData.reason_code === 'waste' ? 'Registrar Merma' : 'Usar Stock',
|
||||
variant: formData.reason_code === 'waste' ? 'outline' : 'primary' as const,
|
||||
onClick: handleSave,
|
||||
disabled: loading || !formData.quantity || requestedQuantity > currentStock,
|
||||
loading
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<StatusModal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
mode={mode}
|
||||
onModeChange={setMode}
|
||||
title={`Usar Stock: ${ingredient.name}`}
|
||||
subtitle={`${ingredient.category} • Disponible: ${currentStock} ${ingredient.unit_of_measure}`}
|
||||
statusIndicator={statusConfig}
|
||||
sections={sections}
|
||||
actions={actions}
|
||||
onFieldChange={handleFieldChange}
|
||||
onSave={handleSave}
|
||||
size="md"
|
||||
loading={loading}
|
||||
showDefaultActions={false}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default UseStockModal;
|
||||
@@ -1,13 +1,10 @@
|
||||
// Inventory Domain Components
|
||||
|
||||
// Focused Modal Components
|
||||
export { default as CreateItemModal } from './CreateItemModal';
|
||||
export { default as QuickViewModal } from './QuickViewModal';
|
||||
export { default as AddStockModal } from './AddStockModal';
|
||||
export { default as UseStockModal } from './UseStockModal';
|
||||
export { default as HistoryModal } from './HistoryModal';
|
||||
export { default as StockLotsModal } from './StockLotsModal';
|
||||
export { default as EditItemModal } from './EditItemModal';
|
||||
export { default as CreateIngredientModal } from './CreateIngredientModal';
|
||||
export { default as ShowInfoModal } from './ShowInfoModal';
|
||||
export { default as StockHistoryModal } from './StockHistoryModal';
|
||||
export { default as BatchModal } from './BatchModal';
|
||||
export { default as DeleteIngredientModal } from './DeleteIngredientModal';
|
||||
|
||||
// Re-export related types from inventory types
|
||||
|
||||
@@ -1,11 +1,19 @@
|
||||
import React, { forwardRef } from 'react';
|
||||
import { clsx } from 'clsx';
|
||||
import { baseColors, statusColors } from '../../../styles/colors';
|
||||
|
||||
/**
|
||||
* ProgressBar component with global color system integration
|
||||
*
|
||||
* Supports both base color variants (with gradients) and status color variants (solid colors)
|
||||
* - Base variants: default, success, warning, danger, info (use gradients from color scales)
|
||||
* - Status variants: pending, inProgress, completed (use solid colors from statusColors)
|
||||
*/
|
||||
export interface ProgressBarProps {
|
||||
value: number;
|
||||
max?: number;
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
variant?: 'default' | 'success' | 'warning' | 'danger';
|
||||
variant?: 'default' | 'success' | 'warning' | 'danger' | 'info' | 'pending' | 'inProgress' | 'completed';
|
||||
showLabel?: boolean;
|
||||
label?: string;
|
||||
className?: string;
|
||||
@@ -33,11 +41,43 @@ const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(({
|
||||
lg: 'h-4',
|
||||
};
|
||||
|
||||
const variantClasses = {
|
||||
default: 'bg-[var(--color-info)]',
|
||||
success: 'bg-[var(--color-success)]',
|
||||
warning: 'bg-[var(--color-warning)]',
|
||||
danger: 'bg-[var(--color-error)]',
|
||||
const getVariantStyle = (variant: string) => {
|
||||
// Map base color variants
|
||||
const baseColorMap = {
|
||||
default: baseColors.primary,
|
||||
success: baseColors.success,
|
||||
warning: baseColors.warning,
|
||||
danger: baseColors.error,
|
||||
info: baseColors.info,
|
||||
};
|
||||
|
||||
// Map status color variants (these use single colors from statusColors)
|
||||
const statusColorMap = {
|
||||
pending: statusColors.pending.primary,
|
||||
inProgress: statusColors.inProgress.primary,
|
||||
completed: statusColors.completed.primary,
|
||||
};
|
||||
|
||||
// Check if it's a base color variant (has color scales)
|
||||
if (variant in baseColorMap) {
|
||||
const colors = baseColorMap[variant as keyof typeof baseColorMap];
|
||||
return {
|
||||
background: `linear-gradient(to right, ${colors[400]}, ${colors[500]})`,
|
||||
};
|
||||
}
|
||||
|
||||
// Check if it's a status color variant (single color)
|
||||
if (variant in statusColorMap) {
|
||||
const color = statusColorMap[variant as keyof typeof statusColorMap];
|
||||
return {
|
||||
backgroundColor: color,
|
||||
};
|
||||
}
|
||||
|
||||
// Default fallback
|
||||
return {
|
||||
background: `linear-gradient(to right, ${baseColors.primary[400]}, ${baseColors.primary[500]})`,
|
||||
};
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -61,18 +101,22 @@ const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(({
|
||||
<div
|
||||
className={clsx(
|
||||
'h-full rounded-full transition-all duration-300 ease-out relative overflow-hidden',
|
||||
!customColor && variantClasses[variant],
|
||||
{
|
||||
'animate-pulse': animated && percentage < 100,
|
||||
}
|
||||
)}
|
||||
style={{
|
||||
width: `${percentage}%`,
|
||||
backgroundColor: customColor || undefined
|
||||
...(customColor ? { backgroundColor: customColor } : getVariantStyle(variant))
|
||||
}}
|
||||
>
|
||||
{animated && percentage < 100 && (
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-20 animate-pulse" />
|
||||
<div
|
||||
className="absolute inset-0 opacity-20 animate-pulse"
|
||||
style={{
|
||||
background: 'linear-gradient(to right, transparent, var(--text-inverse), transparent)'
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -241,69 +241,68 @@ export const StatusCard: React.FC<StatusCardProps> = ({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Elegant Action System */}
|
||||
{/* Simplified Action System */}
|
||||
{actions.length > 0 && (
|
||||
<div className="pt-5">
|
||||
{/* Primary Actions Row */}
|
||||
{primaryActions.length > 0 && (
|
||||
<div className="flex gap-3 mb-3">
|
||||
<Button
|
||||
variant={primaryActions[0].destructive ? 'outline' : 'primary'}
|
||||
size="md"
|
||||
className={`
|
||||
flex-1 h-11 font-medium justify-center
|
||||
${primaryActions[0].destructive
|
||||
? 'border-red-300 text-red-600 hover:bg-red-50 hover:border-red-400'
|
||||
: 'bg-gradient-to-r from-[var(--color-primary-600)] to-[var(--color-primary-500)] hover:from-[var(--color-primary-700)] hover:to-[var(--color-primary-600)] text-white border-transparent shadow-md hover:shadow-lg'
|
||||
}
|
||||
transition-all duration-200 transform hover:scale-[1.02] active:scale-[0.98]
|
||||
`}
|
||||
<div className="pt-4 border-t border-[var(--border-primary)]">
|
||||
{/* All actions in a clean horizontal layout */}
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
|
||||
{/* Primary action as a subtle text button */}
|
||||
{primaryActions.length > 0 && (
|
||||
<button
|
||||
onClick={primaryActions[0].onClick}
|
||||
className={`
|
||||
flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg
|
||||
transition-all duration-200 hover:scale-105 active:scale-95
|
||||
${primaryActions[0].destructive
|
||||
? 'text-red-600 hover:bg-red-50 hover:text-red-700'
|
||||
: 'text-[var(--color-primary-600)] hover:bg-[var(--color-primary-50)] hover:text-[var(--color-primary-700)]'
|
||||
}
|
||||
`}
|
||||
>
|
||||
{primaryActions[0].icon && React.createElement(primaryActions[0].icon, { className: "w-4 h-4 mr-2" })}
|
||||
{primaryActions[0].icon && React.createElement(primaryActions[0].icon, { className: "w-4 h-4" })}
|
||||
<span>{primaryActions[0].label}</span>
|
||||
</Button>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Secondary Action Button */}
|
||||
{primaryActions.length > 1 && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="md"
|
||||
className="h-11 w-11 p-0 border-[var(--border-secondary)] hover:border-[var(--color-primary-400)] hover:bg-[var(--color-primary-50)] transition-all duration-200"
|
||||
onClick={primaryActions[1].onClick}
|
||||
title={primaryActions[1].label}
|
||||
>
|
||||
{primaryActions[1].icon && React.createElement(primaryActions[1].icon, { className: "w-4 h-4" })}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Secondary Actions Row - Smaller buttons */}
|
||||
{secondaryActions.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{/* Action icons for secondary actions */}
|
||||
<div className="flex items-center gap-1">
|
||||
{secondaryActions.map((action, index) => (
|
||||
<Button
|
||||
key={`secondary-${index}`}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className={`
|
||||
h-8 px-3 text-xs font-medium border-[var(--border-secondary)]
|
||||
${action.destructive
|
||||
? 'text-red-600 border-red-200 hover:bg-red-50 hover:border-red-300'
|
||||
: 'text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:border-[var(--color-primary-300)] hover:bg-[var(--color-primary-50)]'
|
||||
}
|
||||
transition-all duration-200 flex items-center gap-1.5
|
||||
`}
|
||||
<button
|
||||
key={`action-${index}`}
|
||||
onClick={action.onClick}
|
||||
title={action.label}
|
||||
className={`
|
||||
p-2 rounded-lg transition-all duration-200 hover:scale-110 active:scale-95
|
||||
${action.destructive
|
||||
? 'text-red-500 hover:bg-red-50 hover:text-red-600'
|
||||
: 'text-[var(--text-tertiary)] hover:text-[var(--text-primary)] hover:bg-[var(--surface-secondary)]'
|
||||
}
|
||||
`}
|
||||
>
|
||||
{action.icon && React.createElement(action.icon, { className: "w-3.5 h-3.5" })}
|
||||
<span>{action.label}</span>
|
||||
</Button>
|
||||
{action.icon && React.createElement(action.icon, { className: "w-4 h-4" })}
|
||||
</button>
|
||||
))}
|
||||
|
||||
{/* Include additional primary actions as icons */}
|
||||
{primaryActions.slice(1).map((action, index) => (
|
||||
<button
|
||||
key={`primary-icon-${index}`}
|
||||
onClick={action.onClick}
|
||||
title={action.label}
|
||||
className={`
|
||||
p-2 rounded-lg transition-all duration-200 hover:scale-110 active:scale-95
|
||||
${action.destructive
|
||||
? 'text-red-500 hover:bg-red-50 hover:text-red-600'
|
||||
: 'text-[var(--color-primary-500)] hover:text-[var(--color-primary-600)] hover:bg-[var(--color-primary-50)]'
|
||||
}
|
||||
`}
|
||||
>
|
||||
{action.icon && React.createElement(action.icon, { className: "w-4 h-4" })}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -59,21 +59,6 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
|
||||
initializeAuth();
|
||||
}, []);
|
||||
|
||||
// Set up token refresh interval
|
||||
useEffect(() => {
|
||||
if (authStore.isAuthenticated && authStore.token) {
|
||||
const refreshInterval = setInterval(() => {
|
||||
if (authStore.refreshToken) {
|
||||
authStore.refreshAuth().catch(() => {
|
||||
// Refresh failed, logout user
|
||||
authStore.logout();
|
||||
});
|
||||
}
|
||||
}, 14 * 60 * 1000); // Refresh every 14 minutes
|
||||
|
||||
return () => clearInterval(refreshInterval);
|
||||
}
|
||||
}, [authStore.isAuthenticated, authStore.token, authStore.refreshToken]);
|
||||
|
||||
const contextValue: AuthContextType = {
|
||||
user: authStore.user,
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import { Plus, AlertTriangle, Package, CheckCircle, Eye, Clock, Euro, ArrowRight, Minus, Edit, Trash2 } from 'lucide-react';
|
||||
import { Plus, AlertTriangle, Package, CheckCircle, Eye, Clock, Euro, ArrowRight, Minus, Edit, Trash2, Archive, TrendingUp, History } from 'lucide-react';
|
||||
import { Button, Input, Card, StatsGrid, StatusCard, getStatusColor } from '../../../../components/ui';
|
||||
import { LoadingSpinner } from '../../../../components/shared';
|
||||
import { formatters } from '../../../../components/ui/Stats/StatsPresets';
|
||||
import { PageHeader } from '../../../../components/layout';
|
||||
import {
|
||||
CreateItemModal,
|
||||
QuickViewModal,
|
||||
AddStockModal,
|
||||
UseStockModal,
|
||||
HistoryModal,
|
||||
StockLotsModal,
|
||||
EditItemModal,
|
||||
CreateIngredientModal,
|
||||
ShowInfoModal,
|
||||
StockHistoryModal,
|
||||
BatchModal,
|
||||
DeleteIngredientModal
|
||||
} from '../../../../components/domain/inventory';
|
||||
import { useIngredients, useStockAnalytics, useStockMovements, useStockByIngredient, useCreateIngredient, useSoftDeleteIngredient, useHardDeleteIngredient } from '../../../../api/hooks/inventory';
|
||||
|
||||
// Import AddStockModal separately since we need it for adding batches
|
||||
import AddStockModal from '../../../../components/domain/inventory/AddStockModal';
|
||||
import { useIngredients, useStockAnalytics, useStockMovements, useStockByIngredient, useCreateIngredient, useSoftDeleteIngredient, useHardDeleteIngredient, useAddStock, useConsumeStock, useUpdateIngredient, useTransformationsByIngredient } from '../../../../api/hooks/inventory';
|
||||
import { useCurrentTenant } from '../../../../stores/tenant.store';
|
||||
import { IngredientResponse, StockCreate, StockMovementCreate, IngredientCreate } from '../../../../api/types/inventory';
|
||||
|
||||
@@ -23,14 +23,12 @@ const InventoryPage: React.FC = () => {
|
||||
const [selectedItem, setSelectedItem] = useState<IngredientResponse | null>(null);
|
||||
|
||||
// Modal states for focused actions
|
||||
const [showCreateItem, setShowCreateItem] = useState(false);
|
||||
const [showQuickView, setShowQuickView] = useState(false);
|
||||
const [showAddStock, setShowAddStock] = useState(false);
|
||||
const [showUseStock, setShowUseStock] = useState(false);
|
||||
const [showHistory, setShowHistory] = useState(false);
|
||||
const [showStockLots, setShowStockLots] = useState(false);
|
||||
const [showEdit, setShowEdit] = useState(false);
|
||||
const [showCreateIngredient, setShowCreateIngredient] = useState(false);
|
||||
const [showInfo, setShowInfo] = useState(false);
|
||||
const [showStockHistory, setShowStockHistory] = useState(false);
|
||||
const [showBatches, setShowBatches] = useState(false);
|
||||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||
const [showAddBatch, setShowAddBatch] = useState(false);
|
||||
|
||||
const currentTenant = useCurrentTenant();
|
||||
const tenantId = currentTenant?.id || '';
|
||||
@@ -39,6 +37,9 @@ const InventoryPage: React.FC = () => {
|
||||
const createIngredientMutation = useCreateIngredient();
|
||||
const softDeleteMutation = useSoftDeleteIngredient();
|
||||
const hardDeleteMutation = useHardDeleteIngredient();
|
||||
const addStockMutation = useAddStock();
|
||||
const consumeStockMutation = useConsumeStock();
|
||||
const updateIngredientMutation = useUpdateIngredient();
|
||||
|
||||
// API Data
|
||||
const {
|
||||
@@ -69,10 +70,10 @@ const InventoryPage: React.FC = () => {
|
||||
selectedItem?.id,
|
||||
50,
|
||||
0,
|
||||
{ enabled: !!selectedItem?.id && showHistory }
|
||||
{ enabled: !!selectedItem?.id && showStockHistory }
|
||||
);
|
||||
|
||||
// Stock lots for stock lots modal
|
||||
// Stock lots for stock lots modal and history modal
|
||||
const {
|
||||
data: stockLotsData,
|
||||
isLoading: stockLotsLoading,
|
||||
@@ -81,17 +82,31 @@ const InventoryPage: React.FC = () => {
|
||||
tenantId,
|
||||
selectedItem?.id || '',
|
||||
false, // includeUnavailable
|
||||
{ enabled: !!selectedItem?.id && showStockLots }
|
||||
{ enabled: !!selectedItem?.id && showBatches }
|
||||
);
|
||||
|
||||
// Debug stock lots data
|
||||
console.log('Stock lots hook state:', {
|
||||
// Transformations for history modal (not currently used in new design)
|
||||
const {
|
||||
data: transformationsData,
|
||||
isLoading: transformationsLoading
|
||||
} = useTransformationsByIngredient(
|
||||
tenantId,
|
||||
selectedItem?.id || '',
|
||||
50, // limit
|
||||
{ enabled: false } // Disabled for now since transformations not shown in new modals
|
||||
);
|
||||
|
||||
// Debug data
|
||||
console.log('Inventory data debug:', {
|
||||
selectedItem: selectedItem?.id,
|
||||
showStockLots,
|
||||
showBatches,
|
||||
showStockHistory,
|
||||
stockLotsData,
|
||||
stockLotsLoading,
|
||||
stockLotsError,
|
||||
enabled: !!selectedItem?.id && showStockLots
|
||||
transformationsData,
|
||||
transformationsLoading,
|
||||
enabled: !!selectedItem?.id && showBatches
|
||||
});
|
||||
|
||||
|
||||
@@ -267,41 +282,22 @@ const InventoryPage: React.FC = () => {
|
||||
};
|
||||
|
||||
// Focused action handlers
|
||||
const handleQuickView = (ingredient: IngredientResponse) => {
|
||||
const handleShowInfo = (ingredient: IngredientResponse) => {
|
||||
setSelectedItem(ingredient);
|
||||
setShowQuickView(true);
|
||||
setShowInfo(true);
|
||||
};
|
||||
|
||||
const handleAddStock = (ingredient: IngredientResponse) => {
|
||||
const handleShowStockHistory = (ingredient: IngredientResponse) => {
|
||||
setSelectedItem(ingredient);
|
||||
setShowAddStock(true);
|
||||
setShowStockHistory(true);
|
||||
};
|
||||
|
||||
const handleUseStock = (ingredient: IngredientResponse) => {
|
||||
const handleShowBatches = (ingredient: IngredientResponse) => {
|
||||
setSelectedItem(ingredient);
|
||||
setShowUseStock(true);
|
||||
setShowBatches(true);
|
||||
};
|
||||
|
||||
const handleHistory = (ingredient: IngredientResponse) => {
|
||||
setSelectedItem(ingredient);
|
||||
setShowHistory(true);
|
||||
};
|
||||
|
||||
const handleStockLots = (ingredient: IngredientResponse) => {
|
||||
console.log('🔍 Opening stock lots for ingredient:', {
|
||||
id: ingredient.id,
|
||||
name: ingredient.name,
|
||||
current_stock: ingredient.current_stock,
|
||||
category: ingredient.category
|
||||
});
|
||||
setSelectedItem(ingredient);
|
||||
setShowStockLots(true);
|
||||
};
|
||||
|
||||
const handleEdit = (ingredient: IngredientResponse) => {
|
||||
setSelectedItem(ingredient);
|
||||
setShowEdit(true);
|
||||
};
|
||||
// This function is now replaced by handleShowBatches
|
||||
|
||||
const handleDelete = (ingredient: IngredientResponse) => {
|
||||
setSelectedItem(ingredient);
|
||||
@@ -310,7 +306,7 @@ const InventoryPage: React.FC = () => {
|
||||
|
||||
// Handle new item creation
|
||||
const handleNewItem = () => {
|
||||
setShowCreateItem(true);
|
||||
setShowCreateIngredient(true);
|
||||
};
|
||||
|
||||
// Handle creating a new ingredient
|
||||
@@ -329,19 +325,32 @@ const InventoryPage: React.FC = () => {
|
||||
|
||||
// Modal action handlers
|
||||
const handleAddStockSubmit = async (stockData: StockCreate) => {
|
||||
console.log('Add stock:', stockData);
|
||||
// TODO: Implement API call
|
||||
if (!tenantId) {
|
||||
throw new Error('No tenant ID available');
|
||||
}
|
||||
|
||||
return addStockMutation.mutateAsync({
|
||||
tenantId,
|
||||
stockData
|
||||
});
|
||||
};
|
||||
|
||||
const handleUseStockSubmit = async (movementData: StockMovementCreate) => {
|
||||
console.log('Use stock:', movementData);
|
||||
// TODO: Implement API call
|
||||
if (!tenantId) {
|
||||
throw new Error('No tenant ID available');
|
||||
}
|
||||
|
||||
return consumeStockMutation.mutateAsync({
|
||||
tenantId,
|
||||
consumptionData: {
|
||||
ingredient_id: movementData.ingredient_id,
|
||||
quantity: Number(movementData.quantity),
|
||||
reference_number: movementData.reference_number,
|
||||
notes: movementData.notes
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleUpdateIngredient = async (id: string, updateData: any) => {
|
||||
console.log('Update ingredient:', id, updateData);
|
||||
// TODO: Implement API call
|
||||
};
|
||||
|
||||
// Delete handlers using mutation hooks
|
||||
const handleSoftDelete = async (ingredientId: string) => {
|
||||
@@ -557,49 +566,29 @@ const InventoryPage: React.FC = () => {
|
||||
color: statusConfig.color
|
||||
} : undefined}
|
||||
actions={[
|
||||
// Primary action - Most common user need
|
||||
// Primary action - View item details
|
||||
{
|
||||
label: currentStock === 0 ? 'Agregar Stock' : 'Ver Detalles',
|
||||
icon: currentStock === 0 ? Plus : Eye,
|
||||
variant: currentStock === 0 ? 'primary' : 'outline',
|
||||
label: 'Ver Detalles',
|
||||
icon: Eye,
|
||||
variant: 'primary',
|
||||
priority: 'primary',
|
||||
onClick: () => currentStock === 0 ? handleAddStock(ingredient) : handleQuickView(ingredient)
|
||||
},
|
||||
// Secondary primary - Quick access to other main action
|
||||
{
|
||||
label: currentStock === 0 ? 'Ver Info' : 'Agregar',
|
||||
icon: currentStock === 0 ? Eye : Plus,
|
||||
variant: 'outline',
|
||||
priority: 'primary',
|
||||
onClick: () => currentStock === 0 ? handleQuickView(ingredient) : handleAddStock(ingredient)
|
||||
},
|
||||
// Secondary actions - Most used operations
|
||||
{
|
||||
label: 'Lotes',
|
||||
icon: Package,
|
||||
priority: 'secondary',
|
||||
onClick: () => handleStockLots(ingredient)
|
||||
},
|
||||
{
|
||||
label: 'Usar',
|
||||
icon: Minus,
|
||||
priority: 'secondary',
|
||||
onClick: () => handleUseStock(ingredient)
|
||||
onClick: () => handleShowInfo(ingredient)
|
||||
},
|
||||
// Stock history action - Icon button
|
||||
{
|
||||
label: 'Historial',
|
||||
icon: Clock,
|
||||
icon: History,
|
||||
priority: 'secondary',
|
||||
onClick: () => handleHistory(ingredient)
|
||||
onClick: () => handleShowStockHistory(ingredient)
|
||||
},
|
||||
// Least common action
|
||||
// Batch management action
|
||||
{
|
||||
label: 'Editar',
|
||||
icon: Edit,
|
||||
label: 'Ver Lotes',
|
||||
icon: Package,
|
||||
priority: 'secondary',
|
||||
onClick: () => handleEdit(ingredient)
|
||||
onClick: () => handleShowBatches(ingredient)
|
||||
},
|
||||
// Destructive action - separated for safety
|
||||
// Destructive action
|
||||
{
|
||||
label: 'Eliminar',
|
||||
icon: Trash2,
|
||||
@@ -637,48 +626,39 @@ const InventoryPage: React.FC = () => {
|
||||
|
||||
{/* Focused Action Modals */}
|
||||
|
||||
{/* Create Item Modal - doesn't need selectedItem */}
|
||||
<CreateItemModal
|
||||
isOpen={showCreateItem}
|
||||
onClose={() => setShowCreateItem(false)}
|
||||
{/* Create Ingredient Modal - doesn't need selectedItem */}
|
||||
<CreateIngredientModal
|
||||
isOpen={showCreateIngredient}
|
||||
onClose={() => setShowCreateIngredient(false)}
|
||||
onCreateIngredient={handleCreateIngredient}
|
||||
/>
|
||||
|
||||
{selectedItem && (
|
||||
<>
|
||||
<QuickViewModal
|
||||
isOpen={showQuickView}
|
||||
<ShowInfoModal
|
||||
isOpen={showInfo}
|
||||
onClose={() => {
|
||||
setShowQuickView(false);
|
||||
setShowInfo(false);
|
||||
setSelectedItem(null);
|
||||
}}
|
||||
ingredient={selectedItem}
|
||||
/>
|
||||
onSave={async (updatedData) => {
|
||||
if (!tenantId || !selectedItem) {
|
||||
throw new Error('Missing tenant ID or selected item');
|
||||
}
|
||||
|
||||
<AddStockModal
|
||||
isOpen={showAddStock}
|
||||
onClose={() => {
|
||||
setShowAddStock(false);
|
||||
setSelectedItem(null);
|
||||
return updateIngredientMutation.mutateAsync({
|
||||
tenantId,
|
||||
ingredientId: selectedItem.id,
|
||||
updateData: updatedData
|
||||
});
|
||||
}}
|
||||
ingredient={selectedItem}
|
||||
onAddStock={handleAddStockSubmit}
|
||||
/>
|
||||
|
||||
<UseStockModal
|
||||
isOpen={showUseStock}
|
||||
<StockHistoryModal
|
||||
isOpen={showStockHistory}
|
||||
onClose={() => {
|
||||
setShowUseStock(false);
|
||||
setSelectedItem(null);
|
||||
}}
|
||||
ingredient={selectedItem}
|
||||
onUseStock={handleUseStockSubmit}
|
||||
/>
|
||||
|
||||
<HistoryModal
|
||||
isOpen={showHistory}
|
||||
onClose={() => {
|
||||
setShowHistory(false);
|
||||
setShowStockHistory(false);
|
||||
setSelectedItem(null);
|
||||
}}
|
||||
ingredient={selectedItem}
|
||||
@@ -686,25 +666,26 @@ const InventoryPage: React.FC = () => {
|
||||
loading={movementsLoading}
|
||||
/>
|
||||
|
||||
<StockLotsModal
|
||||
isOpen={showStockLots}
|
||||
<BatchModal
|
||||
isOpen={showBatches}
|
||||
onClose={() => {
|
||||
setShowStockLots(false);
|
||||
setShowBatches(false);
|
||||
setSelectedItem(null);
|
||||
}}
|
||||
ingredient={selectedItem}
|
||||
stockLots={stockLotsData || []}
|
||||
batches={stockLotsData || []}
|
||||
loading={stockLotsLoading}
|
||||
/>
|
||||
|
||||
<EditItemModal
|
||||
isOpen={showEdit}
|
||||
onClose={() => {
|
||||
setShowEdit(false);
|
||||
setSelectedItem(null);
|
||||
onAddBatch={() => {
|
||||
setShowAddBatch(true);
|
||||
}}
|
||||
onEditBatch={async (batchId, updateData) => {
|
||||
// TODO: Implement edit batch functionality
|
||||
console.log('Edit batch:', batchId, updateData);
|
||||
}}
|
||||
onMarkAsWaste={async (batchId) => {
|
||||
// TODO: Implement mark as waste functionality
|
||||
console.log('Mark as waste:', batchId);
|
||||
}}
|
||||
ingredient={selectedItem}
|
||||
onUpdateIngredient={handleUpdateIngredient}
|
||||
/>
|
||||
|
||||
<DeleteIngredientModal
|
||||
@@ -718,6 +699,15 @@ const InventoryPage: React.FC = () => {
|
||||
onHardDelete={handleHardDelete}
|
||||
isLoading={softDeleteMutation.isPending || hardDeleteMutation.isPending}
|
||||
/>
|
||||
|
||||
<AddStockModal
|
||||
isOpen={showAddBatch}
|
||||
onClose={() => {
|
||||
setShowAddBatch(false);
|
||||
}}
|
||||
ingredient={selectedItem}
|
||||
onAddStock={handleAddStockSubmit}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -564,7 +564,7 @@ export const formatDateInTimezone = (
|
||||
): string => {
|
||||
try {
|
||||
const dateObj = typeof date === 'string' ? parseISO(date) : date;
|
||||
|
||||
|
||||
if (!isValid(dateObj)) {
|
||||
return '';
|
||||
}
|
||||
@@ -580,4 +580,23 @@ export const formatDateInTimezone = (
|
||||
} catch {
|
||||
return formatDate(date, formatStr);
|
||||
}
|
||||
};
|
||||
|
||||
// Convert HTML date input (YYYY-MM-DD) to end-of-day datetime for API
|
||||
export const formatExpirationDateForAPI = (dateString: string): string | undefined => {
|
||||
try {
|
||||
if (!dateString) return undefined;
|
||||
|
||||
// Parse the date string (YYYY-MM-DD format from HTML date input)
|
||||
const dateObj = parseISO(dateString);
|
||||
|
||||
if (!isValid(dateObj)) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
// Set to end of day for expiration dates and return ISO string
|
||||
return getEndOfDay(dateObj).toISOString();
|
||||
} catch {
|
||||
return undefined;
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user