Fix frontend 1
This commit is contained in:
Urtzi Alfaro
@@ -1,6 +1,7 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Calendar, TrendingUp, AlertTriangle, BarChart3, Download, Settings } from 'lucide-react';
|
||||
import { Button, Card, Badge, Select } from '../../../../components/ui';
|
||||
import { Button, Card, Badge, Select, Table } from '../../../../components/ui';
|
||||
import type { TableColumn } from '../../../../components/ui';
|
||||
import { PageHeader } from '../../../../components/layout';
|
||||
import { DemandChart, ForecastTable, SeasonalityIndicator, AlertsPanel } from '../../../../components/domain/forecasting';
|
||||
|
||||
@@ -125,6 +126,57 @@ const ForecastingPage: React.FC = () => {
|
||||
return <Badge variant={config?.color as any}>{config?.text}</Badge>;
|
||||
};
|
||||
|
||||
const forecastColumns: TableColumn[] = [
|
||||
{
|
||||
key: 'product',
|
||||
title: 'Producto',
|
||||
dataIndex: 'product',
|
||||
},
|
||||
{
|
||||
key: 'currentStock',
|
||||
title: 'Stock Actual',
|
||||
dataIndex: 'currentStock',
|
||||
},
|
||||
{
|
||||
key: 'forecastDemand',
|
||||
title: 'Demanda Prevista',
|
||||
dataIndex: 'forecastDemand',
|
||||
render: (value) => (
|
||||
<span className="font-medium text-[var(--color-info)]">{value}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'recommendedProduction',
|
||||
title: 'Producción Recomendada',
|
||||
dataIndex: 'recommendedProduction',
|
||||
render: (value) => (
|
||||
<span className="font-medium text-[var(--color-success)]">{value}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'confidence',
|
||||
title: 'Confianza',
|
||||
dataIndex: 'confidence',
|
||||
render: (value) => `${value}%`,
|
||||
},
|
||||
{
|
||||
key: 'trend',
|
||||
title: 'Tendencia',
|
||||
dataIndex: 'trend',
|
||||
render: (value) => (
|
||||
<div className="flex items-center">
|
||||
{getTrendIcon(value)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'stockoutRisk',
|
||||
title: 'Riesgo Agotamiento',
|
||||
dataIndex: 'stockoutRisk',
|
||||
render: (value) => getRiskBadge(value),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-6">
|
||||
<PageHeader
|
||||
@@ -315,68 +367,16 @@ const ForecastingPage: React.FC = () => {
|
||||
</div>
|
||||
|
||||
{/* Detailed Forecasts Table */}
|
||||
<Card>
|
||||
<div className="p-6">
|
||||
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-4">Predicciones Detalladas</h3>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-[var(--bg-secondary)]">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider">
|
||||
Producto
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider">
|
||||
Stock Actual
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider">
|
||||
Demanda Prevista
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider">
|
||||
Producción Recomendada
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider">
|
||||
Confianza
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider">
|
||||
Tendencia
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider">
|
||||
Riesgo Agotamiento
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
{mockForecasts.map((forecast) => (
|
||||
<tr key={forecast.id} className="hover:bg-[var(--bg-secondary)]">
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="text-sm font-medium text-[var(--text-primary)]">{forecast.product}</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-[var(--text-primary)]">
|
||||
{forecast.currentStock}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-[var(--color-info)]">
|
||||
{forecast.forecastDemand}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-[var(--color-success)]">
|
||||
{forecast.recommendedProduction}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-[var(--text-primary)]">
|
||||
{forecast.confidence}%
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="flex items-center">
|
||||
{getTrendIcon(forecast.trend)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
{getRiskBadge(forecast.stockoutRisk)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<Card className="p-6">
|
||||
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-4">Predicciones Detalladas</h3>
|
||||
<Table
|
||||
columns={forecastColumns}
|
||||
data={mockForecasts}
|
||||
rowKey="id"
|
||||
hover={true}
|
||||
variant="default"
|
||||
size="md"
|
||||
/>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Plus, Search, Filter, Download, Calendar, Clock, User, Package } from 'lucide-react';
|
||||
import { Button, Input, Card, Badge } from '../../../../components/ui';
|
||||
import { Button, Input, Card, Badge, Table } from '../../../../components/ui';
|
||||
import type { TableColumn } from '../../../../components/ui';
|
||||
import { PageHeader } from '../../../../components/layout';
|
||||
import { OrdersTable, OrderForm } from '../../../../components/domain/sales';
|
||||
|
||||
@@ -115,6 +116,114 @@ const OrdersPage: React.FC = () => {
|
||||
return <Badge variant={config?.color as any}>{config?.text || status}</Badge>;
|
||||
};
|
||||
|
||||
const columns: TableColumn[] = [
|
||||
{
|
||||
key: 'id',
|
||||
title: 'Pedido',
|
||||
dataIndex: 'id',
|
||||
render: (value, record: any) => (
|
||||
<div>
|
||||
<div className="text-sm font-medium text-[var(--text-primary)]">{value}</div>
|
||||
<div className="text-xs text-[var(--text-tertiary)]">{record.deliveryMethod === 'delivery' ? 'Entrega' : 'Recogida'}</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'customer',
|
||||
title: 'Cliente',
|
||||
render: (_, record: any) => (
|
||||
<div className="flex items-center">
|
||||
<User className="h-4 w-4 text-[var(--text-tertiary)] mr-2" />
|
||||
<div>
|
||||
<div className="text-sm font-medium text-[var(--text-primary)]">{record.customerName}</div>
|
||||
<div className="text-xs text-[var(--text-tertiary)]">{record.customerEmail}</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'status',
|
||||
title: 'Estado',
|
||||
dataIndex: 'status',
|
||||
render: (value) => getStatusBadge(value),
|
||||
},
|
||||
{
|
||||
key: 'priority',
|
||||
title: 'Prioridad',
|
||||
dataIndex: 'priority',
|
||||
render: (value) => getPriorityBadge(value),
|
||||
},
|
||||
{
|
||||
key: 'orderDate',
|
||||
title: 'Fecha Pedido',
|
||||
dataIndex: 'orderDate',
|
||||
render: (value) => (
|
||||
<div>
|
||||
<div className="text-sm text-[var(--text-primary)]">{new Date(value).toLocaleDateString('es-ES')}</div>
|
||||
<div className="text-xs text-[var(--text-tertiary)]">
|
||||
{new Date(value).toLocaleTimeString('es-ES', { hour: '2-digit', minute: '2-digit' })}
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'deliveryDate',
|
||||
title: 'Entrega',
|
||||
dataIndex: 'deliveryDate',
|
||||
render: (value) => (
|
||||
<div>
|
||||
<div className="text-sm text-[var(--text-primary)]">{new Date(value).toLocaleDateString('es-ES')}</div>
|
||||
<div className="text-xs text-[var(--text-tertiary)]">
|
||||
{new Date(value).toLocaleTimeString('es-ES', { hour: '2-digit', minute: '2-digit' })}
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'total',
|
||||
title: 'Total',
|
||||
dataIndex: 'total',
|
||||
render: (value, record: any) => (
|
||||
<div>
|
||||
<div className="text-sm font-medium text-[var(--text-primary)]">€{value.toFixed(2)}</div>
|
||||
<div className="text-xs text-[var(--text-tertiary)]">{record.items.length} artículos</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'payment',
|
||||
title: 'Pago',
|
||||
render: (_, record: any) => (
|
||||
<div>
|
||||
{getPaymentStatusBadge(record.paymentStatus)}
|
||||
<div className="text-xs text-[var(--text-tertiary)] capitalize">{record.paymentMethod}</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'actions',
|
||||
title: 'Acciones',
|
||||
align: 'right' as const,
|
||||
render: (_, record: any) => (
|
||||
<div className="flex space-x-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setSelectedOrder(record);
|
||||
setShowForm(true);
|
||||
}}
|
||||
>
|
||||
Ver
|
||||
</Button>
|
||||
<Button variant="outline" size="sm">
|
||||
Editar
|
||||
</Button>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const filteredOrders = mockOrders.filter(order => {
|
||||
const matchesSearch = order.customerName.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
order.id.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
@@ -276,110 +385,15 @@ const OrdersPage: React.FC = () => {
|
||||
</Card>
|
||||
|
||||
{/* Orders Table */}
|
||||
<Card>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-[var(--bg-secondary)]">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider">
|
||||
Pedido
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider">
|
||||
Cliente
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider">
|
||||
Estado
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider">
|
||||
Prioridad
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider">
|
||||
Fecha Pedido
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider">
|
||||
Entrega
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider">
|
||||
Total
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider">
|
||||
Pago
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider">
|
||||
Acciones
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
{filteredOrders.map((order) => (
|
||||
<tr key={order.id} className="hover:bg-[var(--bg-secondary)]">
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="text-sm font-medium text-[var(--text-primary)]">{order.id}</div>
|
||||
<div className="text-xs text-[var(--text-tertiary)]">{order.deliveryMethod === 'delivery' ? 'Entrega' : 'Recogida'}</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="flex items-center">
|
||||
<User className="h-4 w-4 text-[var(--text-tertiary)] mr-2" />
|
||||
<div>
|
||||
<div className="text-sm font-medium text-[var(--text-primary)]">{order.customerName}</div>
|
||||
<div className="text-xs text-[var(--text-tertiary)]">{order.customerEmail}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
{getStatusBadge(order.status)}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
{getPriorityBadge(order.priority)}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-[var(--text-primary)]">
|
||||
{new Date(order.orderDate).toLocaleDateString('es-ES')}
|
||||
<div className="text-xs text-[var(--text-tertiary)]">
|
||||
{new Date(order.orderDate).toLocaleTimeString('es-ES', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-[var(--text-primary)]">
|
||||
{new Date(order.deliveryDate).toLocaleDateString('es-ES')}
|
||||
<div className="text-xs text-[var(--text-tertiary)]">
|
||||
{new Date(order.deliveryDate).toLocaleTimeString('es-ES', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="text-sm font-medium text-[var(--text-primary)]">€{order.total.toFixed(2)}</div>
|
||||
<div className="text-xs text-[var(--text-tertiary)]">{order.items.length} artículos</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
{getPaymentStatusBadge(order.paymentStatus)}
|
||||
<div className="text-xs text-[var(--text-tertiary)] capitalize">{order.paymentMethod}</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||
<div className="flex space-x-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setSelectedOrder(order);
|
||||
setShowForm(true);
|
||||
}}
|
||||
>
|
||||
Ver
|
||||
</Button>
|
||||
<Button variant="outline" size="sm">
|
||||
Editar
|
||||
</Button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<Card className="p-6">
|
||||
<Table
|
||||
columns={columns}
|
||||
data={filteredOrders}
|
||||
rowKey="id"
|
||||
hover={true}
|
||||
variant="default"
|
||||
size="md"
|
||||
/>
|
||||
</Card>
|
||||
|
||||
{/* Order Form Modal */}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Plus, Search, Filter, Download, ShoppingCart, Truck, DollarSign, Calendar } from 'lucide-react';
|
||||
import { Button, Input, Card, Badge } from '../../../../components/ui';
|
||||
import { Button, Input, Card, Badge, Table } from '../../../../components/ui';
|
||||
import type { TableColumn } from '../../../../components/ui';
|
||||
import { PageHeader } from '../../../../components/layout';
|
||||
|
||||
const ProcurementPage: React.FC = () => {
|
||||
@@ -124,6 +125,68 @@ const ProcurementPage: React.FC = () => {
|
||||
return <Badge variant={config?.color as any}>{config?.text || status}</Badge>;
|
||||
};
|
||||
|
||||
const columns: TableColumn[] = [
|
||||
{
|
||||
key: 'id',
|
||||
title: 'Orden',
|
||||
dataIndex: 'id',
|
||||
render: (value, record: any) => (
|
||||
<div>
|
||||
<div className="text-sm font-medium text-[var(--text-primary)]">{value}</div>
|
||||
{record.notes && (
|
||||
<div className="text-xs text-[var(--text-tertiary)]">{record.notes}</div>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'supplier',
|
||||
title: 'Proveedor',
|
||||
dataIndex: 'supplier',
|
||||
},
|
||||
{
|
||||
key: 'status',
|
||||
title: 'Estado',
|
||||
dataIndex: 'status',
|
||||
render: (value) => getStatusBadge(value),
|
||||
},
|
||||
{
|
||||
key: 'orderDate',
|
||||
title: 'Fecha Pedido',
|
||||
dataIndex: 'orderDate',
|
||||
render: (value) => new Date(value).toLocaleDateString('es-ES'),
|
||||
},
|
||||
{
|
||||
key: 'deliveryDate',
|
||||
title: 'Fecha Entrega',
|
||||
dataIndex: 'deliveryDate',
|
||||
render: (value) => new Date(value).toLocaleDateString('es-ES'),
|
||||
},
|
||||
{
|
||||
key: 'totalAmount',
|
||||
title: 'Monto Total',
|
||||
dataIndex: 'totalAmount',
|
||||
render: (value) => `€${value.toLocaleString()}`,
|
||||
},
|
||||
{
|
||||
key: 'paymentStatus',
|
||||
title: 'Pago',
|
||||
dataIndex: 'paymentStatus',
|
||||
render: (value) => getPaymentStatusBadge(value),
|
||||
},
|
||||
{
|
||||
key: 'actions',
|
||||
title: 'Acciones',
|
||||
align: 'right' as const,
|
||||
render: () => (
|
||||
<div className="flex space-x-2">
|
||||
<Button variant="outline" size="sm">Ver</Button>
|
||||
<Button variant="outline" size="sm">Editar</Button>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const stats = {
|
||||
totalOrders: mockPurchaseOrders.length,
|
||||
pendingOrders: mockPurchaseOrders.filter(o => o.status === 'pending').length,
|
||||
@@ -253,75 +316,15 @@ const ProcurementPage: React.FC = () => {
|
||||
|
||||
{/* Tab Content */}
|
||||
{activeTab === 'orders' && (
|
||||
<Card>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-[var(--bg-secondary)]">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider">
|
||||
Orden
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider">
|
||||
Proveedor
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider">
|
||||
Estado
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider">
|
||||
Fecha Pedido
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider">
|
||||
Fecha Entrega
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider">
|
||||
Monto Total
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider">
|
||||
Pago
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider">
|
||||
Acciones
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
{mockPurchaseOrders.map((order) => (
|
||||
<tr key={order.id} className="hover:bg-[var(--bg-secondary)]">
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="text-sm font-medium text-[var(--text-primary)]">{order.id}</div>
|
||||
{order.notes && (
|
||||
<div className="text-xs text-[var(--text-tertiary)]">{order.notes}</div>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-[var(--text-primary)]">
|
||||
{order.supplier}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
{getStatusBadge(order.status)}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-[var(--text-primary)]">
|
||||
{new Date(order.orderDate).toLocaleDateString('es-ES')}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-[var(--text-primary)]">
|
||||
{new Date(order.deliveryDate).toLocaleDateString('es-ES')}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-[var(--text-primary)]">
|
||||
€{order.totalAmount.toLocaleString()}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
{getPaymentStatusBadge(order.paymentStatus)}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||
<div className="flex space-x-2">
|
||||
<Button variant="outline" size="sm">Ver</Button>
|
||||
<Button variant="outline" size="sm">Editar</Button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<Card className="p-6">
|
||||
<Table
|
||||
columns={columns}
|
||||
data={mockPurchaseOrders}
|
||||
rowKey="id"
|
||||
hover={true}
|
||||
variant="default"
|
||||
size="md"
|
||||
/>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Plus, Calendar, Clock, Users, AlertCircle } from 'lucide-react';
|
||||
import { Button, Card, Badge } from '../../../../components/ui';
|
||||
import { Button, Card, Badge, Table } from '../../../../components/ui';
|
||||
import type { TableColumn } from '../../../../components/ui';
|
||||
import { PageHeader } from '../../../../components/layout';
|
||||
import { ProductionSchedule, BatchTracker, QualityControl } from '../../../../components/domain/production';
|
||||
|
||||
@@ -76,6 +77,86 @@ const ProductionPage: React.FC = () => {
|
||||
return <Badge variant={config.color as any}>{config.text}</Badge>;
|
||||
};
|
||||
|
||||
const columns: TableColumn[] = [
|
||||
{
|
||||
key: 'recipeName',
|
||||
title: 'Receta',
|
||||
dataIndex: 'recipeName',
|
||||
render: (value) => (
|
||||
<div className="text-sm font-medium text-[var(--text-primary)]">{value}</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'quantity',
|
||||
title: 'Cantidad',
|
||||
dataIndex: 'quantity',
|
||||
render: (value) => `${value} unidades`,
|
||||
},
|
||||
{
|
||||
key: 'status',
|
||||
title: 'Estado',
|
||||
dataIndex: 'status',
|
||||
render: (value) => getStatusBadge(value),
|
||||
},
|
||||
{
|
||||
key: 'priority',
|
||||
title: 'Prioridad',
|
||||
dataIndex: 'priority',
|
||||
render: (value) => getPriorityBadge(value),
|
||||
},
|
||||
{
|
||||
key: 'assignedTo',
|
||||
title: 'Asignado a',
|
||||
dataIndex: 'assignedTo',
|
||||
render: (value) => (
|
||||
<div className="flex items-center">
|
||||
<Users className="h-4 w-4 text-[var(--text-tertiary)] mr-2" />
|
||||
<span className="text-sm text-[var(--text-primary)]">{value}</span>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'progress',
|
||||
title: 'Progreso',
|
||||
dataIndex: 'progress',
|
||||
render: (value) => (
|
||||
<div className="flex items-center">
|
||||
<div className="w-full bg-[var(--bg-quaternary)] rounded-full h-2 mr-2">
|
||||
<div
|
||||
className="bg-blue-600 h-2 rounded-full"
|
||||
style={{ width: `${value}%` }}
|
||||
></div>
|
||||
</div>
|
||||
<span className="text-sm text-[var(--text-primary)]">{value}%</span>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'estimatedCompletion',
|
||||
title: 'Tiempo Estimado',
|
||||
dataIndex: 'estimatedCompletion',
|
||||
render: (value) => new Date(value).toLocaleTimeString('es-ES', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
}),
|
||||
},
|
||||
{
|
||||
key: 'actions',
|
||||
title: 'Acciones',
|
||||
align: 'right' as const,
|
||||
render: () => (
|
||||
<div className="flex space-x-2">
|
||||
<Button variant="outline" size="sm">
|
||||
Ver
|
||||
</Button>
|
||||
<Button variant="outline" size="sm">
|
||||
Editar
|
||||
</Button>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-6">
|
||||
<PageHeader
|
||||
@@ -216,87 +297,14 @@ const ProductionPage: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-[var(--bg-secondary)]">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider">
|
||||
Receta
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider">
|
||||
Cantidad
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider">
|
||||
Estado
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider">
|
||||
Prioridad
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider">
|
||||
Asignado a
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider">
|
||||
Progreso
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider">
|
||||
Tiempo Estimado
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider">
|
||||
Acciones
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
{mockProductionOrders.map((order) => (
|
||||
<tr key={order.id} className="hover:bg-[var(--bg-secondary)]">
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="text-sm font-medium text-[var(--text-primary)]">{order.recipeName}</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-[var(--text-primary)]">
|
||||
{order.quantity} unidades
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
{getStatusBadge(order.status)}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
{getPriorityBadge(order.priority)}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="flex items-center">
|
||||
<Users className="h-4 w-4 text-[var(--text-tertiary)] mr-2" />
|
||||
<span className="text-sm text-[var(--text-primary)]">{order.assignedTo}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="flex items-center">
|
||||
<div className="w-full bg-[var(--bg-quaternary)] rounded-full h-2 mr-2">
|
||||
<div
|
||||
className="bg-blue-600 h-2 rounded-full"
|
||||
style={{ width: `${order.progress}%` }}
|
||||
></div>
|
||||
</div>
|
||||
<span className="text-sm text-[var(--text-primary)]">{order.progress}%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-[var(--text-primary)]">
|
||||
{new Date(order.estimatedCompletion).toLocaleTimeString('es-ES', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||
<Button variant="outline" size="sm" className="mr-2">
|
||||
Ver
|
||||
</Button>
|
||||
<Button variant="outline" size="sm">
|
||||
Editar
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<Table
|
||||
columns={columns}
|
||||
data={mockProductionOrders}
|
||||
rowKey="id"
|
||||
hover={true}
|
||||
variant="default"
|
||||
size="md"
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user