bakery-admin/bakery-ia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix frontend 1

Browse Source
This commit is contained in:
Urtzi Alfaro
2025-08-28 18:07:16 +02:00
parent 9ea6794923
commit 68bb5a6449
11 changed files with 427 additions and 400 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
frontend/src/pages/app/analytics/forecasting/ForecastingPage.tsx
View File

@@ -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>
);