385 lines
15 KiB
TypeScript
385 lines
15 KiB
TypeScript
|
import React, { useState } from 'react';
|
||
|
|
import { Calendar, TrendingUp, AlertTriangle, BarChart3, Download, Settings } from 'lucide-react';
|
||
|
|
import { Button, Card, Badge, Select } from '../../../../components/ui';
|
||
|
|
import { PageHeader } from '../../../../components/layout';
|
||
|
|
import { DemandChart, ForecastTable, SeasonalityIndicator, AlertsPanel } from '../../../../components/domain/forecasting';
|
||
|
|
|
||
|
|
const ForecastingPage: React.FC = () => {
|
||
|
|
const [selectedProduct, setSelectedProduct] = useState('all');
|
||
|
|
const [forecastPeriod, setForecastPeriod] = useState('7');
|
||
|
|
const [viewMode, setViewMode] = useState<'chart' | 'table'>('chart');
|
||
|
|
|
||
|
|
const forecastData = {
|
||
|
|
accuracy: 92,
|
||
|
|
totalDemand: 1247,
|
||
|
|
growthTrend: 8.5,
|
||
|
|
seasonalityFactor: 1.15,
|
||
|
|
};
|
||
|
|
|
||
|
|
const products = [
|
||
|
|
{ id: 'all', name: 'Todos los productos' },
|
||
|
|
{ id: 'bread', name: 'Panes' },
|
||
|
|
{ id: 'pastry', name: 'Bollería' },
|
||
|
|
{ id: 'cake', name: 'Tartas' },
|
||
|
|
];
|
||
|
|
|
||
|
|
const periods = [
|
||
|
|
{ value: '7', label: '7 días' },
|
||
|
|
{ value: '14', label: '14 días' },
|
||
|
|
{ value: '30', label: '30 días' },
|
||
|
|
{ value: '90', label: '3 meses' },
|
||
|
|
];
|
||
|
|
|
||
|
|
const mockForecasts = [
|
||
|
|
{
|
||
|
|
id: '1',
|
||
|
|
product: 'Pan de Molde Integral',
|
||
|
|
currentStock: 25,
|
||
|
|
forecastDemand: 45,
|
||
|
|
recommendedProduction: 50,
|
||
|
|
confidence: 95,
|
||
|
|
trend: 'up',
|
||
|
|
stockoutRisk: 'low',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: '2',
|
||
|
|
product: 'Croissants de Mantequilla',
|
||
|
|
currentStock: 18,
|
||
|
|
forecastDemand: 32,
|
||
|
|
recommendedProduction: 35,
|
||
|
|
confidence: 88,
|
||
|
|
trend: 'stable',
|
||
|
|
stockoutRisk: 'medium',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: '3',
|
||
|
|
product: 'Baguettes Francesas',
|
||
|
|
currentStock: 12,
|
||
|
|
forecastDemand: 28,
|
||
|
|
recommendedProduction: 30,
|
||
|
|
confidence: 91,
|
||
|
|
trend: 'down',
|
||
|
|
stockoutRisk: 'high',
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
const alerts = [
|
||
|
|
{
|
||
|
|
id: '1',
|
||
|
|
type: 'stockout',
|
||
|
|
product: 'Baguettes Francesas',
|
||
|
|
message: 'Alto riesgo de agotamiento en las próximas 24h',
|
||
|
|
severity: 'high',
|
||
|
|
recommendation: 'Incrementar producción en 15 unidades',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: '2',
|
||
|
|
type: 'overstock',
|
||
|
|
product: 'Magdalenas',
|
||
|
|
message: 'Probable exceso de stock para mañana',
|
||
|
|
severity: 'medium',
|
||
|
|
recommendation: 'Reducir producción en 20%',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: '3',
|
||
|
|
type: 'weather',
|
||
|
|
product: 'Todos',
|
||
|
|
message: 'Lluvia prevista - incremento esperado en demanda de bollería',
|
||
|
|
severity: 'info',
|
||
|
|
recommendation: 'Aumentar producción de productos de interior en 10%',
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
const weatherImpact = {
|
||
|
|
today: 'sunny',
|
||
|
|
temperature: 22,
|
||
|
|
demandFactor: 0.95,
|
||
|
|
affectedCategories: ['helados', 'bebidas frías'],
|
||
|
|
};
|
||
|
|
|
||
|
|
const seasonalInsights = [
|
||
|
|
{ period: 'Mañana', factor: 1.2, products: ['Pan', 'Bollería'] },
|
||
|
|
{ period: 'Tarde', factor: 0.8, products: ['Tartas', 'Dulces'] },
|
||
|
|
{ period: 'Fin de semana', factor: 1.4, products: ['Tartas especiales'] },
|
||
|
|
];
|
||
|
|
|
||
|
|
const getTrendIcon = (trend: string) => {
|
||
|
|
switch (trend) {
|
||
|
|
case 'up':
|
||
|
|
return <TrendingUp className="h-4 w-4 text-[var(--color-success)]" />;
|
||
|
|
case 'down':
|
||
|
|
return <TrendingUp className="h-4 w-4 text-[var(--color-error)] rotate-180" />;
|
||
|
|
default:
|
||
|
|
return <div className="h-4 w-4 bg-gray-400 rounded-full" />;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const getRiskBadge = (risk: string) => {
|
||
|
|
const riskConfig = {
|
||
|
|
low: { color: 'green', text: 'Bajo' },
|
||
|
|
medium: { color: 'yellow', text: 'Medio' },
|
||
|
|
high: { color: 'red', text: 'Alto' },
|
||
|
|
};
|
||
|
|
|
||
|
|
const config = riskConfig[risk as keyof typeof riskConfig];
|
||
|
|
return <Badge variant={config?.color as any}>{config?.text}</Badge>;
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="p-6 space-y-6">
|
||
|
|
<PageHeader
|
||
|
|
title="Predicción de Demanda"
|
||
|
|
description="Predicciones inteligentes basadas en IA para optimizar tu producción"
|
||
|
|
action={
|
||
|
|
<div className="flex space-x-2">
|
||
|
|
<Button variant="outline">
|
||
|
|
<Settings className="w-4 h-4 mr-2" />
|
||
|
|
Configurar
|
||
|
|
</Button>
|
||
|
|
<Button variant="outline">
|
||
|
|
<Download className="w-4 h-4 mr-2" />
|
||
|
|
Exportar
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* Key Metrics */}
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
|
|
<Card className="p-6">
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<div>
|
||
|
|
<p className="text-sm font-medium text-[var(--text-secondary)]">Precisión del Modelo</p>
|
||
|
|
<p className="text-3xl font-bold text-[var(--color-success)]">{forecastData.accuracy}%</p>
|
||
|
|
</div>
|
||
|
|
<div className="h-12 w-12 bg-[var(--color-success)]/10 rounded-full flex items-center justify-center">
|
||
|
|
<BarChart3 className="h-6 w-6 text-[var(--color-success)]" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
<Card className="p-6">
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<div>
|
||
|
|
<p className="text-sm font-medium text-[var(--text-secondary)]">Demanda Prevista</p>
|
||
|
|
<p className="text-3xl font-bold text-[var(--color-info)]">{forecastData.totalDemand}</p>
|
||
|
|
<p className="text-xs text-[var(--text-tertiary)]">próximos {forecastPeriod} días</p>
|
||
|
|
</div>
|
||
|
|
<Calendar className="h-12 w-12 text-[var(--color-info)]" />
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
<Card className="p-6">
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<div>
|
||
|
|
<p className="text-sm font-medium text-[var(--text-secondary)]">Tendencia</p>
|
||
|
|
<p className="text-3xl font-bold text-purple-600">+{forecastData.growthTrend}%</p>
|
||
|
|
<p className="text-xs text-[var(--text-tertiary)]">vs período anterior</p>
|
||
|
|
</div>
|
||
|
|
<TrendingUp className="h-12 w-12 text-purple-600" />
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
<Card className="p-6">
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<div>
|
||
|
|
<p className="text-sm font-medium text-[var(--text-secondary)]">Factor Estacional</p>
|
||
|
|
<p className="text-3xl font-bold text-[var(--color-primary)]">{forecastData.seasonalityFactor}x</p>
|
||
|
|
<p className="text-xs text-[var(--text-tertiary)]">multiplicador actual</p>
|
||
|
|
</div>
|
||
|
|
<div className="h-12 w-12 bg-[var(--color-primary)]/10 rounded-full flex items-center justify-center">
|
||
|
|
<svg className="h-6 w-6 text-[var(--color-primary)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Controls */}
|
||
|
|
<Card className="p-6">
|
||
|
|
<div className="flex flex-col sm:flex-row gap-4">
|
||
|
|
<div className="flex-1 grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||
|
|
<div>
|
||
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">Producto</label>
|
||
|
|
<select
|
||
|
|
value={selectedProduct}
|
||
|
|
onChange={(e) => setSelectedProduct(e.target.value)}
|
||
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md"
|
||
|
|
>
|
||
|
|
{products.map(product => (
|
||
|
|
<option key={product.id} value={product.id}>{product.name}</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">Período</label>
|
||
|
|
<select
|
||
|
|
value={forecastPeriod}
|
||
|
|
onChange={(e) => setForecastPeriod(e.target.value)}
|
||
|
|
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md"
|
||
|
|
>
|
||
|
|
{periods.map(period => (
|
||
|
|
<option key={period.value} value={period.value}>{period.label}</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">Vista</label>
|
||
|
|
<div className="flex rounded-md border border-[var(--border-secondary)]">
|
||
|
|
<button
|
||
|
|
onClick={() => setViewMode('chart')}
|
||
|
|
className={`px-3 py-2 text-sm ${viewMode === 'chart' ? 'bg-blue-600 text-white' : 'bg-white text-[var(--text-secondary)]'} rounded-l-md`}
|
||
|
|
>
|
||
|
|
Gráfico
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={() => setViewMode('table')}
|
||
|
|
className={`px-3 py-2 text-sm ${viewMode === 'table' ? 'bg-blue-600 text-white' : 'bg-white text-[var(--text-secondary)]'} rounded-r-md border-l`}
|
||
|
|
>
|
||
|
|
Tabla
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||
|
|
{/* Main Forecast Display */}
|
||
|
|
<div className="lg:col-span-2">
|
||
|
|
{viewMode === 'chart' ? (
|
||
|
|
<DemandChart
|
||
|
|
product={selectedProduct}
|
||
|
|
period={forecastPeriod}
|
||
|
|
/>
|
||
|
|
) : (
|
||
|
|
<ForecastTable forecasts={mockForecasts} />
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Alerts Panel */}
|
||
|
|
<div className="space-y-6">
|
||
|
|
<AlertsPanel alerts={alerts} />
|
||
|
|
|
||
|
|
{/* Weather Impact */}
|
||
|
|
<Card className="p-6">
|
||
|
|
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-4">Impacto Meteorológico</h3>
|
||
|
|
<div className="space-y-3">
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<span className="text-sm text-[var(--text-secondary)]">Hoy:</span>
|
||
|
|
<div className="flex items-center">
|
||
|
|
<span className="text-sm font-medium">{weatherImpact.temperature}°C</span>
|
||
|
|
<div className="ml-2 w-6 h-6 bg-yellow-400 rounded-full"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<span className="text-sm text-[var(--text-secondary)]">Factor de demanda:</span>
|
||
|
|
<span className="text-sm font-medium text-[var(--color-info)]">{weatherImpact.demandFactor}x</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="mt-4">
|
||
|
|
<p className="text-xs text-[var(--text-tertiary)] mb-2">Categorías afectadas:</p>
|
||
|
|
<div className="flex flex-wrap gap-1">
|
||
|
|
{weatherImpact.affectedCategories.map((category, index) => (
|
||
|
|
<Badge key={index} variant="blue">{category}</Badge>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
{/* Seasonal Insights */}
|
||
|
|
<Card className="p-6">
|
||
|
|
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-4">Patrones Estacionales</h3>
|
||
|
|
<div className="space-y-3">
|
||
|
|
{seasonalInsights.map((insight, index) => (
|
||
|
|
<div key={index} className="p-3 bg-[var(--bg-secondary)] rounded-lg">
|
||
|
|
<div className="flex items-center justify-between mb-2">
|
||
|
|
<span className="text-sm font-medium">{insight.period}</span>
|
||
|
|
<span className="text-sm text-purple-600 font-medium">{insight.factor}x</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-wrap gap-1">
|
||
|
|
{insight.products.map((product, idx) => (
|
||
|
|
<Badge key={idx} variant="purple">{product}</Badge>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
</div>
|
||
|
|
</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>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ForecastingPage;
|