426 lines
13 KiB
TypeScript
426 lines
13 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Plus, Download, AlertTriangle, Package, Clock, CheckCircle, Eye, Edit, Calendar, DollarSign } from 'lucide-react';
|
|
import { Button, Input, Card, Badge, StatsGrid } from '../../../../components/ui';
|
|
import { formatters } from '../../../../components/ui/Stats/StatsPresets';
|
|
import { PageHeader } from '../../../../components/layout';
|
|
import { InventoryForm, LowStockAlert } from '../../../../components/domain/inventory';
|
|
|
|
const InventoryPage: React.FC = () => {
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [showForm, setShowForm] = useState(false);
|
|
const [selectedItem, setSelectedItem] = useState<typeof mockInventoryItems[0] | null>(null);
|
|
|
|
const mockInventoryItems = [
|
|
{
|
|
id: '1',
|
|
name: 'Harina de Trigo',
|
|
category: 'Harinas',
|
|
currentStock: 45,
|
|
minStock: 20,
|
|
maxStock: 100,
|
|
unit: 'kg',
|
|
cost: 1.20,
|
|
supplier: 'Molinos del Sur',
|
|
lastRestocked: '2024-01-20',
|
|
expirationDate: '2024-06-30',
|
|
status: 'normal',
|
|
},
|
|
{
|
|
id: '2',
|
|
name: 'Levadura Fresca',
|
|
category: 'Levaduras',
|
|
currentStock: 8,
|
|
minStock: 10,
|
|
maxStock: 25,
|
|
unit: 'kg',
|
|
cost: 8.50,
|
|
supplier: 'Levaduras SA',
|
|
lastRestocked: '2024-01-25',
|
|
expirationDate: '2024-02-15',
|
|
status: 'low',
|
|
},
|
|
{
|
|
id: '3',
|
|
name: 'Mantequilla',
|
|
category: 'Lácteos',
|
|
currentStock: 15,
|
|
minStock: 5,
|
|
maxStock: 30,
|
|
unit: 'kg',
|
|
cost: 5.80,
|
|
supplier: 'Lácteos Frescos',
|
|
lastRestocked: '2024-01-24',
|
|
expirationDate: '2024-02-10',
|
|
status: 'normal',
|
|
},
|
|
{
|
|
id: '4',
|
|
name: 'Azúcar Blanco',
|
|
category: 'Azúcares',
|
|
currentStock: 0,
|
|
minStock: 15,
|
|
maxStock: 50,
|
|
unit: 'kg',
|
|
cost: 0.95,
|
|
supplier: 'Distribuidora Central',
|
|
lastRestocked: '2024-01-10',
|
|
expirationDate: '2024-12-31',
|
|
status: 'out',
|
|
},
|
|
{
|
|
id: '5',
|
|
name: 'Leche Entera',
|
|
category: 'Lácteos',
|
|
currentStock: 3,
|
|
minStock: 10,
|
|
maxStock: 40,
|
|
unit: 'L',
|
|
cost: 1.45,
|
|
supplier: 'Lácteos Frescos',
|
|
lastRestocked: '2024-01-22',
|
|
expirationDate: '2024-01-28',
|
|
status: 'expired',
|
|
},
|
|
];
|
|
|
|
const getStockStatusBadge = (item: typeof mockInventoryItems[0]) => {
|
|
const { currentStock, minStock, status } = item;
|
|
|
|
if (status === 'expired') {
|
|
return (
|
|
<Badge
|
|
variant="error"
|
|
icon={<AlertTriangle size={12} />}
|
|
text="Caducado"
|
|
/>
|
|
);
|
|
}
|
|
|
|
if (currentStock === 0) {
|
|
return (
|
|
<Badge
|
|
variant="error"
|
|
icon={<AlertTriangle size={12} />}
|
|
text="Sin Stock"
|
|
/>
|
|
);
|
|
}
|
|
|
|
if (currentStock <= minStock) {
|
|
return (
|
|
<Badge
|
|
variant="warning"
|
|
icon={<AlertTriangle size={12} />}
|
|
text="Stock Bajo"
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Badge
|
|
variant="success"
|
|
icon={<CheckCircle size={12} />}
|
|
text="Normal"
|
|
/>
|
|
);
|
|
};
|
|
|
|
const getCategoryBadge = (category: string) => {
|
|
const categoryConfig = {
|
|
'Harinas': { color: 'default' },
|
|
'Levaduras': { color: 'info' },
|
|
'Lácteos': { color: 'secondary' },
|
|
'Grasas': { color: 'warning' },
|
|
'Azúcares': { color: 'primary' },
|
|
'Especias': { color: 'success' },
|
|
};
|
|
|
|
const config = categoryConfig[category as keyof typeof categoryConfig] || { color: 'default' };
|
|
return (
|
|
<Badge
|
|
variant={config.color as any}
|
|
text={category}
|
|
/>
|
|
);
|
|
};
|
|
|
|
const filteredItems = mockInventoryItems.filter(item => {
|
|
const matchesSearch = item.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
item.category.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
item.supplier.toLowerCase().includes(searchTerm.toLowerCase());
|
|
|
|
return matchesSearch;
|
|
});
|
|
|
|
const lowStockItems = mockInventoryItems.filter(item =>
|
|
item.currentStock <= item.minStock || item.status === 'low' || item.status === 'out' || item.status === 'expired'
|
|
);
|
|
|
|
const mockInventoryStats = {
|
|
totalItems: mockInventoryItems.length,
|
|
lowStockItems: lowStockItems.length,
|
|
outOfStock: mockInventoryItems.filter(item => item.currentStock === 0).length,
|
|
expiringSoon: mockInventoryItems.filter(item => item.status === 'expired').length,
|
|
totalValue: mockInventoryItems.reduce((sum, item) => sum + (item.currentStock * item.cost), 0),
|
|
categories: [...new Set(mockInventoryItems.map(item => item.category))].length,
|
|
};
|
|
|
|
const inventoryStats = [
|
|
{
|
|
title: 'Total Artículos',
|
|
value: mockInventoryStats.totalItems,
|
|
variant: 'default' as const,
|
|
icon: Package,
|
|
},
|
|
{
|
|
title: 'Stock Bajo',
|
|
value: mockInventoryStats.lowStockItems,
|
|
variant: 'warning' as const,
|
|
icon: AlertTriangle,
|
|
},
|
|
{
|
|
title: 'Sin Stock',
|
|
value: mockInventoryStats.outOfStock,
|
|
variant: 'error' as const,
|
|
icon: AlertTriangle,
|
|
},
|
|
{
|
|
title: 'Por Caducar',
|
|
value: mockInventoryStats.expiringSoon,
|
|
variant: 'error' as const,
|
|
icon: Clock,
|
|
},
|
|
{
|
|
title: 'Valor Total',
|
|
value: formatters.currency(mockInventoryStats.totalValue),
|
|
variant: 'success' as const,
|
|
icon: DollarSign,
|
|
},
|
|
{
|
|
title: 'Categorías',
|
|
value: mockInventoryStats.categories,
|
|
variant: 'info' as const,
|
|
icon: Package,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<PageHeader
|
|
title="Gestión de Inventario"
|
|
description="Controla el stock de ingredientes y materias primas"
|
|
actions={[
|
|
{
|
|
id: "export",
|
|
label: "Exportar",
|
|
variant: "outline" as const,
|
|
icon: Download,
|
|
onClick: () => console.log('Export inventory')
|
|
},
|
|
{
|
|
id: "new",
|
|
label: "Nuevo Artículo",
|
|
variant: "primary" as const,
|
|
icon: Plus,
|
|
onClick: () => setShowForm(true)
|
|
}
|
|
]}
|
|
/>
|
|
|
|
{/* Stats Grid */}
|
|
<StatsGrid
|
|
stats={inventoryStats}
|
|
columns={6}
|
|
/>
|
|
|
|
{/* Low Stock Alert */}
|
|
{lowStockItems.length > 0 && (
|
|
<LowStockAlert items={lowStockItems} />
|
|
)}
|
|
|
|
{/* Simplified Controls */}
|
|
<Card className="p-4">
|
|
<div className="flex flex-col sm:flex-row gap-4">
|
|
<div className="flex-1">
|
|
<Input
|
|
placeholder="Buscar artículos por nombre, categoría o proveedor..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="w-full"
|
|
/>
|
|
</div>
|
|
<Button variant="outline" onClick={() => console.log('Export filtered')}>
|
|
<Download className="w-4 h-4 mr-2" />
|
|
Exportar
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Inventory Items Grid */}
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
|
{filteredItems.map((item) => (
|
|
<Card key={item.id} className="p-4">
|
|
<div className="space-y-4">
|
|
{/* Header */}
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex items-start gap-3">
|
|
<div className="flex-shrink-0 bg-[var(--color-primary)]/10 p-2 rounded-lg">
|
|
<Package className="w-4 h-4 text-[var(--text-tertiary)]" />
|
|
</div>
|
|
<div>
|
|
<div className="font-medium text-[var(--text-primary)]">
|
|
{item.name}
|
|
</div>
|
|
<div className="text-sm text-[var(--text-secondary)]">
|
|
{item.supplier}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{getStockStatusBadge(item)}
|
|
</div>
|
|
|
|
{/* Category and Stock */}
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
{getCategoryBadge(item.category)}
|
|
</div>
|
|
<div className="text-right">
|
|
<div className="text-lg font-bold text-[var(--text-primary)]">
|
|
{item.currentStock} {item.unit}
|
|
</div>
|
|
<div className="text-xs text-[var(--text-tertiary)]">
|
|
Mín: {item.minStock} | Máx: {item.maxStock}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Value and Dates */}
|
|
<div className="flex items-center justify-between text-sm">
|
|
<div>
|
|
<div className="text-[var(--text-secondary)]">Costo unitario:</div>
|
|
<div className="font-medium text-[var(--text-primary)]">
|
|
{formatters.currency(item.cost)}
|
|
</div>
|
|
</div>
|
|
<div className="text-right">
|
|
<div className="text-[var(--text-secondary)]">Valor total:</div>
|
|
<div className="font-medium text-[var(--text-primary)]">
|
|
{formatters.currency(item.currentStock * item.cost)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Dates */}
|
|
<div className="space-y-2 text-xs">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-[var(--text-secondary)]">Último restock:</span>
|
|
<span className="text-[var(--text-primary)]">
|
|
{new Date(item.lastRestocked).toLocaleDateString('es-ES')}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-[var(--text-secondary)]">Caducidad:</span>
|
|
<span className={`font-medium ${
|
|
new Date(item.expirationDate) < new Date()
|
|
? 'text-[var(--color-error)]'
|
|
: new Date(item.expirationDate) < new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)
|
|
? 'text-[var(--color-warning)]'
|
|
: 'text-[var(--text-primary)]'
|
|
}`}>
|
|
{new Date(item.expirationDate).toLocaleDateString('es-ES')}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stock Level Progress */}
|
|
<div className="space-y-1">
|
|
<div className="flex justify-between text-xs">
|
|
<span className="text-[var(--text-secondary)]">Nivel de stock</span>
|
|
<span className="text-[var(--text-primary)]">
|
|
{Math.round((item.currentStock / item.maxStock) * 100)}%
|
|
</span>
|
|
</div>
|
|
<div className="w-full bg-[var(--bg-tertiary)] rounded-full h-2">
|
|
<div
|
|
className={`h-2 rounded-full transition-all duration-300 ${
|
|
item.currentStock <= item.minStock
|
|
? 'bg-[var(--color-error)]'
|
|
: item.currentStock <= item.minStock * 1.5
|
|
? 'bg-[var(--color-warning)]'
|
|
: 'bg-[var(--color-success)]'
|
|
}`}
|
|
style={{ width: `${Math.min((item.currentStock / item.maxStock) * 100, 100)}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="flex gap-2 pt-2 border-t border-[var(--border-primary)]">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="flex-1"
|
|
onClick={() => {
|
|
setSelectedItem(item);
|
|
setShowForm(true);
|
|
}}
|
|
>
|
|
<Eye className="w-4 h-4 mr-1" />
|
|
Ver
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="flex-1"
|
|
onClick={() => {
|
|
setSelectedItem(item);
|
|
setShowForm(true);
|
|
}}
|
|
>
|
|
<Edit className="w-4 h-4 mr-1" />
|
|
Editar
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
|
|
{/* Empty State */}
|
|
{filteredItems.length === 0 && (
|
|
<div className="text-center py-12">
|
|
<Package className="mx-auto h-12 w-12 text-[var(--text-tertiary)] mb-4" />
|
|
<h3 className="text-lg font-medium text-[var(--text-primary)] mb-2">
|
|
No se encontraron artículos
|
|
</h3>
|
|
<p className="text-[var(--text-secondary)] mb-4">
|
|
Intenta ajustar la búsqueda o agregar un nuevo artículo al inventario
|
|
</p>
|
|
<Button onClick={() => setShowForm(true)}>
|
|
<Plus className="w-4 h-4 mr-2" />
|
|
Nuevo Artículo
|
|
</Button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Inventory Form Modal */}
|
|
{showForm && (
|
|
<InventoryForm
|
|
item={selectedItem}
|
|
onClose={() => {
|
|
setShowForm(false);
|
|
setSelectedItem(null);
|
|
}}
|
|
onSave={(item) => {
|
|
// Handle save logic
|
|
console.log('Saving item:', item);
|
|
setShowForm(false);
|
|
setSelectedItem(null);
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default InventoryPage; |