435 lines
15 KiB
TypeScript
435 lines
15 KiB
TypeScript
|
import React, { useState } from 'react';
|
||
|
|
import { Plus, Download, Building2, Phone, Mail, Eye, Edit, CheckCircle, AlertCircle, Timer, Users, DollarSign } from 'lucide-react';
|
||
|
|
import { Button, Input, Card, Badge, StatsGrid, StatusCard, getStatusColor, StatusModal } from '../../../../components/ui';
|
||
|
|
import { formatters } from '../../../../components/ui/Stats/StatsPresets';
|
||
|
|
import { PageHeader } from '../../../../components/layout';
|
||
|
|
import { SupplierStatus, SupplierType, PaymentTerms } from '../../../../api/types/suppliers';
|
||
|
|
|
||
|
|
const SuppliersPage: React.FC = () => {
|
||
|
|
const [activeTab] = useState('all');
|
||
|
|
const [searchTerm, setSearchTerm] = useState('');
|
||
|
|
const [showForm, setShowForm] = useState(false);
|
||
|
|
const [modalMode, setModalMode] = useState<'view' | 'edit'>('view');
|
||
|
|
const [selectedSupplier, setSelectedSupplier] = useState<typeof mockSuppliers[0] | null>(null);
|
||
|
|
|
||
|
|
const mockSuppliers = [
|
||
|
|
{
|
||
|
|
id: 'SUP-2024-001',
|
||
|
|
supplier_code: 'HAR001',
|
||
|
|
name: 'Harinas del Norte S.L.',
|
||
|
|
supplier_type: SupplierType.INGREDIENTS,
|
||
|
|
status: SupplierStatus.ACTIVE,
|
||
|
|
contact_person: 'María González',
|
||
|
|
email: 'maria@harinasdelnorte.es',
|
||
|
|
phone: '+34 987 654 321',
|
||
|
|
city: 'León',
|
||
|
|
country: 'España',
|
||
|
|
payment_terms: PaymentTerms.NET_30,
|
||
|
|
credit_limit: 5000,
|
||
|
|
currency: 'EUR',
|
||
|
|
standard_lead_time: 5,
|
||
|
|
minimum_order_amount: 200,
|
||
|
|
total_orders: 45,
|
||
|
|
total_spend: 12750.50,
|
||
|
|
last_order_date: '2024-01-25T14:30:00Z',
|
||
|
|
performance_score: 92,
|
||
|
|
notes: 'Proveedor principal de harinas. Excelente calidad y puntualidad.'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 'SUP-2024-002',
|
||
|
|
supplier_code: 'EMB002',
|
||
|
|
name: 'Embalajes Biodegradables SA',
|
||
|
|
supplier_type: SupplierType.PACKAGING,
|
||
|
|
status: SupplierStatus.ACTIVE,
|
||
|
|
contact_person: 'Carlos Ruiz',
|
||
|
|
email: 'carlos@embalajes-bio.com',
|
||
|
|
phone: '+34 600 123 456',
|
||
|
|
city: 'Valencia',
|
||
|
|
country: 'España',
|
||
|
|
payment_terms: PaymentTerms.NET_15,
|
||
|
|
credit_limit: 2500,
|
||
|
|
currency: 'EUR',
|
||
|
|
standard_lead_time: 3,
|
||
|
|
minimum_order_amount: 150,
|
||
|
|
total_orders: 28,
|
||
|
|
total_spend: 4280.75,
|
||
|
|
last_order_date: '2024-01-24T10:15:00Z',
|
||
|
|
performance_score: 88,
|
||
|
|
notes: 'Especialista en packaging sostenible.'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 'SUP-2024-003',
|
||
|
|
supplier_code: 'MAN003',
|
||
|
|
name: 'Maquinaria Industrial López',
|
||
|
|
supplier_type: SupplierType.EQUIPMENT,
|
||
|
|
status: SupplierStatus.PENDING_APPROVAL,
|
||
|
|
contact_person: 'Ana López',
|
||
|
|
email: 'ana@maquinaria-lopez.es',
|
||
|
|
phone: '+34 655 987 654',
|
||
|
|
city: 'Madrid',
|
||
|
|
country: 'España',
|
||
|
|
payment_terms: PaymentTerms.NET_45,
|
||
|
|
credit_limit: 15000,
|
||
|
|
currency: 'EUR',
|
||
|
|
standard_lead_time: 14,
|
||
|
|
minimum_order_amount: 500,
|
||
|
|
total_orders: 0,
|
||
|
|
total_spend: 0,
|
||
|
|
last_order_date: null,
|
||
|
|
performance_score: null,
|
||
|
|
notes: 'Nuevo proveedor de equipamiento industrial. Pendiente de aprobación.'
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
const getSupplierStatusConfig = (status: SupplierStatus) => {
|
||
|
|
const statusConfig = {
|
||
|
|
[SupplierStatus.ACTIVE]: { text: 'Activo', icon: CheckCircle },
|
||
|
|
[SupplierStatus.INACTIVE]: { text: 'Inactivo', icon: Timer },
|
||
|
|
[SupplierStatus.PENDING_APPROVAL]: { text: 'Pendiente Aprobación', icon: AlertCircle },
|
||
|
|
[SupplierStatus.SUSPENDED]: { text: 'Suspendido', icon: AlertCircle },
|
||
|
|
[SupplierStatus.BLACKLISTED]: { text: 'Lista Negra', icon: AlertCircle },
|
||
|
|
};
|
||
|
|
|
||
|
|
const config = statusConfig[status];
|
||
|
|
const Icon = config?.icon;
|
||
|
|
|
||
|
|
return {
|
||
|
|
color: getStatusColor(status === SupplierStatus.ACTIVE ? 'completed' :
|
||
|
|
status === SupplierStatus.PENDING_APPROVAL ? 'pending' : 'cancelled'),
|
||
|
|
text: config?.text || status,
|
||
|
|
icon: Icon,
|
||
|
|
isCritical: status === SupplierStatus.BLACKLISTED,
|
||
|
|
isHighlight: status === SupplierStatus.PENDING_APPROVAL
|
||
|
|
};
|
||
|
|
};
|
||
|
|
|
||
|
|
const getSupplierTypeText = (type: SupplierType): string => {
|
||
|
|
const typeMap = {
|
||
|
|
[SupplierType.INGREDIENTS]: 'Ingredientes',
|
||
|
|
[SupplierType.PACKAGING]: 'Embalajes',
|
||
|
|
[SupplierType.EQUIPMENT]: 'Equipamiento',
|
||
|
|
[SupplierType.SERVICES]: 'Servicios',
|
||
|
|
[SupplierType.UTILITIES]: 'Servicios Públicos',
|
||
|
|
[SupplierType.MULTI]: 'Múltiple',
|
||
|
|
};
|
||
|
|
return typeMap[type] || type;
|
||
|
|
};
|
||
|
|
|
||
|
|
const getPaymentTermsText = (terms: PaymentTerms): string => {
|
||
|
|
const termsMap = {
|
||
|
|
[PaymentTerms.CASH_ON_DELIVERY]: 'Pago Contraentrega',
|
||
|
|
[PaymentTerms.NET_15]: 'Neto 15 días',
|
||
|
|
[PaymentTerms.NET_30]: 'Neto 30 días',
|
||
|
|
[PaymentTerms.NET_45]: 'Neto 45 días',
|
||
|
|
[PaymentTerms.NET_60]: 'Neto 60 días',
|
||
|
|
[PaymentTerms.PREPAID]: 'Prepago',
|
||
|
|
};
|
||
|
|
return termsMap[terms] || terms;
|
||
|
|
};
|
||
|
|
|
||
|
|
const filteredSuppliers = mockSuppliers.filter(supplier => {
|
||
|
|
const matchesSearch = supplier.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||
|
|
supplier.supplier_code.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||
|
|
supplier.email?.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||
|
|
supplier.contact_person?.toLowerCase().includes(searchTerm.toLowerCase());
|
||
|
|
|
||
|
|
const matchesTab = activeTab === 'all' || supplier.status === activeTab;
|
||
|
|
|
||
|
|
return matchesSearch && matchesTab;
|
||
|
|
});
|
||
|
|
|
||
|
|
const mockSupplierStats = {
|
||
|
|
total: mockSuppliers.length,
|
||
|
|
active: mockSuppliers.filter(s => s.status === SupplierStatus.ACTIVE).length,
|
||
|
|
pendingApproval: mockSuppliers.filter(s => s.status === SupplierStatus.PENDING_APPROVAL).length,
|
||
|
|
suspended: mockSuppliers.filter(s => s.status === SupplierStatus.SUSPENDED).length,
|
||
|
|
totalSpend: mockSuppliers.reduce((sum, supplier) => sum + supplier.total_spend, 0),
|
||
|
|
averageScore: mockSuppliers
|
||
|
|
.filter(s => s.performance_score !== null)
|
||
|
|
.reduce((sum, supplier, _, arr) => sum + (supplier.performance_score || 0) / arr.length, 0),
|
||
|
|
totalOrders: mockSuppliers.reduce((sum, supplier) => sum + supplier.total_orders, 0),
|
||
|
|
};
|
||
|
|
|
||
|
|
const stats = [
|
||
|
|
{
|
||
|
|
title: 'Total Proveedores',
|
||
|
|
value: mockSupplierStats.total,
|
||
|
|
variant: 'default' as const,
|
||
|
|
icon: Building2,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Activos',
|
||
|
|
value: mockSupplierStats.active,
|
||
|
|
variant: 'success' as const,
|
||
|
|
icon: CheckCircle,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Pendientes',
|
||
|
|
value: mockSupplierStats.pendingApproval,
|
||
|
|
variant: 'warning' as const,
|
||
|
|
icon: AlertCircle,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Gasto Total',
|
||
|
|
value: formatters.currency(mockSupplierStats.totalSpend),
|
||
|
|
variant: 'info' as const,
|
||
|
|
icon: DollarSign,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Total Pedidos',
|
||
|
|
value: mockSupplierStats.totalOrders,
|
||
|
|
variant: 'default' as const,
|
||
|
|
icon: Building2,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Puntuación Media',
|
||
|
|
value: mockSupplierStats.averageScore.toFixed(1),
|
||
|
|
variant: 'success' as const,
|
||
|
|
icon: CheckCircle,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-6">
|
||
|
|
<PageHeader
|
||
|
|
title="Gestión de Proveedores"
|
||
|
|
description="Administra y supervisa todos los proveedores de la panadería"
|
||
|
|
actions={[
|
||
|
|
{
|
||
|
|
id: "export",
|
||
|
|
label: "Exportar",
|
||
|
|
variant: "outline" as const,
|
||
|
|
icon: Download,
|
||
|
|
onClick: () => console.log('Export suppliers')
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: "new",
|
||
|
|
label: "Nuevo Proveedor",
|
||
|
|
variant: "primary" as const,
|
||
|
|
icon: Plus,
|
||
|
|
onClick: () => setShowForm(true)
|
||
|
|
}
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* Stats Grid */}
|
||
|
|
<StatsGrid
|
||
|
|
stats={stats}
|
||
|
|
columns={3}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* Simplified Controls */}
|
||
|
|
<Card className="p-4">
|
||
|
|
<div className="flex flex-col sm:flex-row gap-4">
|
||
|
|
<div className="flex-1">
|
||
|
|
<Input
|
||
|
|
placeholder="Buscar proveedores por nombre, código, email o contacto..."
|
||
|
|
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>
|
||
|
|
|
||
|
|
{/* Suppliers Grid */}
|
||
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||
|
|
{filteredSuppliers.map((supplier) => {
|
||
|
|
const statusConfig = getSupplierStatusConfig(supplier.status);
|
||
|
|
const performanceNote = supplier.performance_score
|
||
|
|
? `Puntuación: ${supplier.performance_score}/100`
|
||
|
|
: 'Sin evaluación';
|
||
|
|
|
||
|
|
return (
|
||
|
|
<StatusCard
|
||
|
|
key={supplier.id}
|
||
|
|
id={supplier.id}
|
||
|
|
statusIndicator={statusConfig}
|
||
|
|
title={supplier.name}
|
||
|
|
subtitle={supplier.supplier_code}
|
||
|
|
primaryValue={formatters.currency(supplier.total_spend)}
|
||
|
|
primaryValueLabel={`${supplier.total_orders} pedidos`}
|
||
|
|
secondaryInfo={{
|
||
|
|
label: 'Tipo',
|
||
|
|
value: getSupplierTypeText(supplier.supplier_type)
|
||
|
|
}}
|
||
|
|
metadata={[
|
||
|
|
supplier.contact_person || 'Sin contacto',
|
||
|
|
supplier.email || 'Sin email',
|
||
|
|
supplier.phone || 'Sin teléfono',
|
||
|
|
performanceNote
|
||
|
|
]}
|
||
|
|
actions={[
|
||
|
|
{
|
||
|
|
label: 'Ver',
|
||
|
|
icon: Eye,
|
||
|
|
variant: 'outline',
|
||
|
|
onClick: () => {
|
||
|
|
setSelectedSupplier(supplier);
|
||
|
|
setModalMode('view');
|
||
|
|
setShowForm(true);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Editar',
|
||
|
|
icon: Edit,
|
||
|
|
variant: 'outline',
|
||
|
|
onClick: () => {
|
||
|
|
setSelectedSupplier(supplier);
|
||
|
|
setModalMode('edit');
|
||
|
|
setShowForm(true);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Empty State */}
|
||
|
|
{filteredSuppliers.length === 0 && (
|
||
|
|
<div className="text-center py-12">
|
||
|
|
<Building2 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 proveedores
|
||
|
|
</h3>
|
||
|
|
<p className="text-[var(--text-secondary)] mb-4">
|
||
|
|
Intenta ajustar la búsqueda o crear un nuevo proveedor
|
||
|
|
</p>
|
||
|
|
<Button onClick={() => setShowForm(true)}>
|
||
|
|
<Plus className="w-4 h-4 mr-2" />
|
||
|
|
Nuevo Proveedor
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Supplier Details Modal */}
|
||
|
|
{showForm && selectedSupplier && (
|
||
|
|
<StatusModal
|
||
|
|
isOpen={showForm}
|
||
|
|
onClose={() => {
|
||
|
|
setShowForm(false);
|
||
|
|
setSelectedSupplier(null);
|
||
|
|
setModalMode('view');
|
||
|
|
}}
|
||
|
|
mode={modalMode}
|
||
|
|
onModeChange={setModalMode}
|
||
|
|
title={selectedSupplier.name}
|
||
|
|
subtitle={`Proveedor ${selectedSupplier.supplier_code}`}
|
||
|
|
statusIndicator={getSupplierStatusConfig(selectedSupplier.status)}
|
||
|
|
size="lg"
|
||
|
|
sections={[
|
||
|
|
{
|
||
|
|
title: 'Información de Contacto',
|
||
|
|
icon: Users,
|
||
|
|
fields: [
|
||
|
|
{
|
||
|
|
label: 'Nombre',
|
||
|
|
value: selectedSupplier.name,
|
||
|
|
highlight: true
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Persona de Contacto',
|
||
|
|
value: selectedSupplier.contact_person || 'No especificado'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Email',
|
||
|
|
value: selectedSupplier.email || 'No especificado'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Teléfono',
|
||
|
|
value: selectedSupplier.phone || 'No especificado'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Ciudad',
|
||
|
|
value: selectedSupplier.city || 'No especificado'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'País',
|
||
|
|
value: selectedSupplier.country || 'No especificado'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Información Comercial',
|
||
|
|
icon: Building2,
|
||
|
|
fields: [
|
||
|
|
{
|
||
|
|
label: 'Código de Proveedor',
|
||
|
|
value: selectedSupplier.supplier_code,
|
||
|
|
highlight: true
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Tipo de Proveedor',
|
||
|
|
value: getSupplierTypeText(selectedSupplier.supplier_type)
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Condiciones de Pago',
|
||
|
|
value: getPaymentTermsText(selectedSupplier.payment_terms)
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Tiempo de Entrega',
|
||
|
|
value: `${selectedSupplier.standard_lead_time} días`
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Pedido Mínimo',
|
||
|
|
value: selectedSupplier.minimum_order_amount,
|
||
|
|
type: 'currency'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Límite de Crédito',
|
||
|
|
value: selectedSupplier.credit_limit,
|
||
|
|
type: 'currency'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: 'Rendimiento y Estadísticas',
|
||
|
|
icon: DollarSign,
|
||
|
|
fields: [
|
||
|
|
{
|
||
|
|
label: 'Total de Pedidos',
|
||
|
|
value: selectedSupplier.total_orders.toString()
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Gasto Total',
|
||
|
|
value: selectedSupplier.total_spend,
|
||
|
|
type: 'currency',
|
||
|
|
highlight: true
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Puntuación de Rendimiento',
|
||
|
|
value: selectedSupplier.performance_score ? `${selectedSupplier.performance_score}/100` : 'No evaluado'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'Último Pedido',
|
||
|
|
value: selectedSupplier.last_order_date || 'Nunca',
|
||
|
|
type: selectedSupplier.last_order_date ? 'datetime' : undefined
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
...(selectedSupplier.notes ? [{
|
||
|
|
title: 'Notas',
|
||
|
|
fields: [
|
||
|
|
{
|
||
|
|
label: 'Observaciones',
|
||
|
|
value: selectedSupplier.notes,
|
||
|
|
span: 2 as const
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}] : [])
|
||
|
|
]}
|
||
|
|
onEdit={() => {
|
||
|
|
console.log('Editing supplier:', selectedSupplier.id);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default SuppliersPage;
|