Imporve the predicciones page
This commit is contained in:
Urtzi Alfaro
@@ -15,10 +15,11 @@ import {
|
||||
DeleteForecastResponse,
|
||||
GetForecastsParams,
|
||||
ForecastingHealthResponse,
|
||||
MultiDayForecastResponse,
|
||||
} from '../types/forecasting';
|
||||
|
||||
export class ForecastingService {
|
||||
private readonly baseUrl = '/forecasts';
|
||||
private readonly baseUrl = '/tenants';
|
||||
|
||||
/**
|
||||
* Generate a single product forecast
|
||||
@@ -29,7 +30,7 @@ export class ForecastingService {
|
||||
request: ForecastRequest
|
||||
): Promise<ForecastResponse> {
|
||||
return apiClient.post<ForecastResponse, ForecastRequest>(
|
||||
`/tenants/${tenantId}${this.baseUrl}/single`,
|
||||
`${this.baseUrl}/${tenantId}/forecasts/single`,
|
||||
request
|
||||
);
|
||||
}
|
||||
@@ -43,7 +44,7 @@ export class ForecastingService {
|
||||
request: BatchForecastRequest
|
||||
): Promise<BatchForecastResponse> {
|
||||
return apiClient.post<BatchForecastResponse, BatchForecastRequest>(
|
||||
`/tenants/${tenantId}${this.baseUrl}/batch`,
|
||||
`${this.baseUrl}/${tenantId}/forecasts/batch`,
|
||||
request
|
||||
);
|
||||
}
|
||||
@@ -75,7 +76,7 @@ export class ForecastingService {
|
||||
}
|
||||
|
||||
const queryString = searchParams.toString();
|
||||
const url = `/tenants/${tenantId}${this.baseUrl}${queryString ? `?${queryString}` : ''}`;
|
||||
const url = `${this.baseUrl}/${tenantId}/forecasts${queryString ? `?${queryString}` : ''}`;
|
||||
|
||||
return apiClient.get<ForecastListResponse>(url);
|
||||
}
|
||||
@@ -89,7 +90,7 @@ export class ForecastingService {
|
||||
forecastId: string
|
||||
): Promise<ForecastByIdResponse> {
|
||||
return apiClient.get<ForecastByIdResponse>(
|
||||
`/tenants/${tenantId}${this.baseUrl}/${forecastId}`
|
||||
`${this.baseUrl}/${tenantId}/forecasts/${forecastId}`
|
||||
);
|
||||
}
|
||||
|
||||
@@ -102,7 +103,7 @@ export class ForecastingService {
|
||||
forecastId: string
|
||||
): Promise<DeleteForecastResponse> {
|
||||
return apiClient.delete<DeleteForecastResponse>(
|
||||
`/tenants/${tenantId}${this.baseUrl}/${forecastId}`
|
||||
`${this.baseUrl}/${tenantId}/forecasts/${forecastId}`
|
||||
);
|
||||
}
|
||||
|
||||
@@ -114,7 +115,21 @@ export class ForecastingService {
|
||||
tenantId: string
|
||||
): Promise<ForecastStatistics> {
|
||||
return apiClient.get<ForecastStatistics>(
|
||||
`/tenants/${tenantId}${this.baseUrl}/statistics`
|
||||
`${this.baseUrl}/${tenantId}/forecasts/statistics`
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate multi-day forecasts for a single product
|
||||
* POST /tenants/{tenant_id}/forecasts/multi-day
|
||||
*/
|
||||
async createMultiDayForecast(
|
||||
tenantId: string,
|
||||
request: ForecastRequest
|
||||
): Promise<MultiDayForecastResponse> {
|
||||
return apiClient.post<MultiDayForecastResponse, ForecastRequest>(
|
||||
`${this.baseUrl}/${tenantId}/forecasts/multi-day`,
|
||||
request
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -83,7 +83,7 @@ class TrainingService {
|
||||
|
||||
const queryString = params.toString() ? `?${params.toString()}` : '';
|
||||
return apiClient.get<PaginatedResponse<TrainedModelResponse>>(
|
||||
`${this.baseUrl}/${tenantId}/models${queryString}`
|
||||
`${this.baseUrl}/${tenantId}/models/${queryString}`
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -158,3 +158,14 @@ export interface ForecastingHealthResponse {
|
||||
features: string[];
|
||||
timestamp: string;
|
||||
}
|
||||
|
||||
export interface MultiDayForecastResponse {
|
||||
tenant_id: string;
|
||||
inventory_product_id: string;
|
||||
forecast_start_date: string; // ISO date string
|
||||
forecast_days: number;
|
||||
forecasts: ForecastResponse[];
|
||||
total_predicted_demand: number;
|
||||
average_confidence_level: number;
|
||||
processing_time_ms: number;
|
||||
}
|
||||
@@ -88,9 +88,15 @@ const DemandChart: React.FC<DemandChartProps> = ({
|
||||
|
||||
// Process forecast data for chart
|
||||
const chartData = useMemo(() => {
|
||||
console.log('🔍 Processing forecast data for chart:', data);
|
||||
|
||||
const processedData: ChartDataPoint[] = data.map(forecast => {
|
||||
// Convert forecast_date to a proper date format for the chart
|
||||
const forecastDate = new Date(forecast.forecast_date);
|
||||
const dateString = forecastDate.toISOString().split('T')[0];
|
||||
|
||||
return {
|
||||
date: forecast.forecast_date,
|
||||
date: dateString,
|
||||
actualDemand: undefined, // Not available in current forecast response
|
||||
predictedDemand: forecast.predicted_demand,
|
||||
confidenceLower: forecast.confidence_lower,
|
||||
@@ -99,23 +105,32 @@ const DemandChart: React.FC<DemandChartProps> = ({
|
||||
};
|
||||
});
|
||||
|
||||
console.log('📊 Processed chart data:', processedData);
|
||||
return processedData.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
|
||||
}, [data]);
|
||||
|
||||
// Filter data based on selected period
|
||||
const filteredData = useMemo(() => {
|
||||
console.log('🔍 Filtering data - selected period:', selectedPeriod);
|
||||
console.log('🔍 Chart data before filtering:', chartData);
|
||||
|
||||
if (!selectedPeriod.start || !selectedPeriod.end) {
|
||||
console.log('📊 No period filter, returning all chart data');
|
||||
return chartData;
|
||||
}
|
||||
|
||||
return chartData.filter(point => {
|
||||
const filtered = chartData.filter(point => {
|
||||
const pointDate = new Date(point.date);
|
||||
return pointDate >= selectedPeriod.start! && pointDate <= selectedPeriod.end!;
|
||||
});
|
||||
|
||||
console.log('📊 Filtered data:', filtered);
|
||||
return filtered;
|
||||
}, [chartData, selectedPeriod]);
|
||||
|
||||
// Update zoomed data when filtered data changes
|
||||
useEffect(() => {
|
||||
console.log('🔍 Setting zoomed data from filtered data:', filteredData);
|
||||
setZoomedData(filteredData);
|
||||
}, [filteredData]);
|
||||
|
||||
@@ -221,8 +236,11 @@ const DemandChart: React.FC<DemandChartProps> = ({
|
||||
);
|
||||
}
|
||||
|
||||
// Empty state
|
||||
if (zoomedData.length === 0) {
|
||||
// Use filteredData if zoomedData is empty but we have data
|
||||
const displayData = zoomedData.length > 0 ? zoomedData : filteredData;
|
||||
|
||||
// Empty state - only show if we truly have no data
|
||||
if (displayData.length === 0 && chartData.length === 0) {
|
||||
return (
|
||||
<Card className={className}>
|
||||
<CardHeader>
|
||||
@@ -286,7 +304,7 @@ const DemandChart: React.FC<DemandChartProps> = ({
|
||||
)}
|
||||
|
||||
{/* Reset zoom */}
|
||||
{zoomedData.length !== filteredData.length && (
|
||||
{displayData.length !== filteredData.length && (
|
||||
<Button variant="ghost" size="sm" onClick={handleResetZoom}>
|
||||
Restablecer Zoom
|
||||
</Button>
|
||||
@@ -298,28 +316,57 @@ const DemandChart: React.FC<DemandChartProps> = ({
|
||||
<CardBody padding="lg">
|
||||
<div style={{ width: '100%', height }}>
|
||||
<ResponsiveContainer>
|
||||
<ComposedChart data={zoomedData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
|
||||
<ComposedChart data={displayData} margin={{ top: 20, right: 30, left: 20, bottom: 60 }}>
|
||||
<defs>
|
||||
<linearGradient id="demandGradient" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="#10b981" stopOpacity={0.3}/>
|
||||
<stop offset="95%" stopColor="#10b981" stopOpacity={0.05}/>
|
||||
</linearGradient>
|
||||
<linearGradient id="confidenceGradient" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="#10b981" stopOpacity={0.1}/>
|
||||
<stop offset="95%" stopColor="#10b981" stopOpacity={0.02}/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid
|
||||
strokeDasharray="2 2"
|
||||
stroke="#e5e7eb"
|
||||
strokeOpacity={0.5}
|
||||
horizontal={true}
|
||||
vertical={false}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
stroke="#6b7280"
|
||||
fontSize={12}
|
||||
fontSize={11}
|
||||
tickMargin={8}
|
||||
angle={-45}
|
||||
textAnchor="end"
|
||||
height={80}
|
||||
interval={0}
|
||||
tickFormatter={(value) => {
|
||||
const date = new Date(value);
|
||||
return timeframe === 'weekly'
|
||||
? date.toLocaleDateString('es-ES', { month: 'short', day: 'numeric' })
|
||||
: timeframe === 'monthly'
|
||||
? date.toLocaleDateString('es-ES', { month: 'short', year: '2-digit' })
|
||||
: date.getFullYear().toString();
|
||||
return date.toLocaleDateString('es-ES', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
weekday: displayData.length <= 7 ? 'short' : undefined
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<YAxis
|
||||
stroke="#6b7280"
|
||||
fontSize={12}
|
||||
tickFormatter={(value) => `${value}`}
|
||||
fontSize={11}
|
||||
width={60}
|
||||
tickFormatter={(value) => value.toFixed(0)}
|
||||
domain={['dataMin - 5', 'dataMax + 5']}
|
||||
/>
|
||||
<Tooltip
|
||||
content={<CustomTooltip />}
|
||||
cursor={{ stroke: '#10b981', strokeWidth: 1, strokeOpacity: 0.5 }}
|
||||
/>
|
||||
<Legend
|
||||
wrapperStyle={{ paddingTop: '20px' }}
|
||||
iconType="line"
|
||||
/>
|
||||
<Tooltip content={<CustomTooltip />} />
|
||||
<Legend />
|
||||
|
||||
{/* Confidence interval area */}
|
||||
{showConfidenceInterval && (
|
||||
@@ -328,9 +375,9 @@ const DemandChart: React.FC<DemandChartProps> = ({
|
||||
dataKey="confidenceUpper"
|
||||
stackId={1}
|
||||
stroke="none"
|
||||
fill="#10b98120"
|
||||
fillOpacity={0.3}
|
||||
name="Intervalo de Confianza Superior"
|
||||
fill="url(#confidenceGradient)"
|
||||
fillOpacity={0.4}
|
||||
name="Límite Superior"
|
||||
/>
|
||||
)}
|
||||
{showConfidenceInterval && (
|
||||
@@ -340,20 +387,40 @@ const DemandChart: React.FC<DemandChartProps> = ({
|
||||
stackId={1}
|
||||
stroke="none"
|
||||
fill="#ffffff"
|
||||
name="Intervalo de Confianza Inferior"
|
||||
name="Límite Inferior"
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Background area for main prediction */}
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="predictedDemand"
|
||||
stroke="none"
|
||||
fill="url(#demandGradient)"
|
||||
fillOpacity={0.2}
|
||||
name="Área de Demanda"
|
||||
/>
|
||||
|
||||
{/* Predicted demand line */}
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="predictedDemand"
|
||||
stroke="#10b981"
|
||||
strokeWidth={3}
|
||||
dot={true}
|
||||
dotSize={6}
|
||||
activeDot={{ r: 8, stroke: '#10b981', strokeWidth: 2 }}
|
||||
dot={{
|
||||
fill: '#10b981',
|
||||
strokeWidth: 2,
|
||||
stroke: '#ffffff',
|
||||
r: 4
|
||||
}}
|
||||
activeDot={{
|
||||
r: 6,
|
||||
stroke: '#10b981',
|
||||
strokeWidth: 3,
|
||||
fill: '#ffffff'
|
||||
}}
|
||||
name="Demanda Predicha"
|
||||
connectNulls={false}
|
||||
/>
|
||||
</ComposedChart>
|
||||
</ResponsiveContainer>
|
||||
@@ -386,18 +453,46 @@ const DemandChart: React.FC<DemandChartProps> = ({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Chart legend */}
|
||||
<div className="flex items-center justify-center gap-6 mt-4 text-sm">
|
||||
{/* Enhanced Chart legend and insights */}
|
||||
<div className="mt-6 space-y-4">
|
||||
<div className="flex items-center justify-center gap-6 text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-4 h-0.5 bg-green-500"></div>
|
||||
<div className="w-4 h-0.5 bg-green-500 rounded"></div>
|
||||
<span className="text-text-secondary">Demanda Predicha</span>
|
||||
</div>
|
||||
{showConfidenceInterval && (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-4 h-2 bg-green-500 bg-opacity-20"></div>
|
||||
<div className="w-4 h-2 bg-green-500 bg-opacity-20 rounded"></div>
|
||||
<span className="text-text-secondary">Intervalo de Confianza</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-3 h-3 bg-green-500 rounded-full"></div>
|
||||
<span className="text-text-secondary">Puntos de Datos</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick stats */}
|
||||
<div className="grid grid-cols-3 gap-4 p-4 bg-gray-50 rounded-lg">
|
||||
<div className="text-center">
|
||||
<div className="text-lg font-bold text-green-600">
|
||||
{Math.min(...displayData.map(d => d.predictedDemand || 0)).toFixed(1)}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">Mínimo</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-lg font-bold text-blue-600">
|
||||
{(displayData.reduce((sum, d) => sum + (d.predictedDemand || 0), 0) / displayData.length).toFixed(1)}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">Promedio</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-lg font-bold text-orange-600">
|
||||
{Math.max(...displayData.map(d => d.predictedDemand || 0)).toFixed(1)}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">Máximo</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
@@ -1,29 +1,34 @@
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import { Calendar, TrendingUp, AlertTriangle, BarChart3, Download, Settings, Loader } from 'lucide-react';
|
||||
import { Button, Card, Badge, Select, Table } from '../../../../components/ui';
|
||||
import { Calendar, TrendingUp, AlertTriangle, BarChart3, Download, Settings, Loader, Zap, Brain, Target, CloudRain, Sun, Thermometer } from 'lucide-react';
|
||||
import { Button, Card, Badge, Select, Table, StatsGrid } from '../../../../components/ui';
|
||||
import type { TableColumn } from '../../../../components/ui';
|
||||
import { PageHeader } from '../../../../components/layout';
|
||||
import { DemandChart, ForecastTable, SeasonalityIndicator, AlertsPanel } from '../../../../components/domain/forecasting';
|
||||
import { useTenantForecasts, useForecastStatistics } from '../../../../api/hooks/forecasting';
|
||||
import { DemandChart, ForecastTable } from '../../../../components/domain/forecasting';
|
||||
import { useTenantForecasts, useCreateSingleForecast } from '../../../../api/hooks/forecasting';
|
||||
import { useIngredients } from '../../../../api/hooks/inventory';
|
||||
import { useAuthUser } from '../../../../stores/auth.store';
|
||||
import { useModels } from '../../../../api/hooks/training';
|
||||
import { useCurrentTenant } from '../../../../stores/tenant.store';
|
||||
import { ForecastResponse } from '../../../../api/types/forecasting';
|
||||
import { forecastingService } from '../../../../api/services/forecasting';
|
||||
|
||||
const ForecastingPage: React.FC = () => {
|
||||
const [selectedProduct, setSelectedProduct] = useState('all');
|
||||
const [selectedProduct, setSelectedProduct] = useState('');
|
||||
const [forecastPeriod, setForecastPeriod] = useState('7');
|
||||
const [viewMode, setViewMode] = useState<'chart' | 'table'>('chart');
|
||||
const [isGenerating, setIsGenerating] = useState(false);
|
||||
const [hasGeneratedForecast, setHasGeneratedForecast] = useState(false);
|
||||
const [currentForecastData, setCurrentForecastData] = useState<ForecastResponse[]>([]);
|
||||
|
||||
// Get tenant ID from auth user
|
||||
const user = useAuthUser();
|
||||
const tenantId = user?.tenant_id || '';
|
||||
// Get tenant ID from tenant store
|
||||
const currentTenant = useCurrentTenant();
|
||||
const tenantId = currentTenant?.id || '';
|
||||
|
||||
// Calculate date range based on selected period
|
||||
const endDate = new Date();
|
||||
const startDate = new Date();
|
||||
startDate.setDate(startDate.getDate() - parseInt(forecastPeriod));
|
||||
|
||||
// API hooks
|
||||
// Fetch existing forecasts
|
||||
const {
|
||||
data: forecastsData,
|
||||
isLoading: forecastsLoading,
|
||||
@@ -31,15 +36,12 @@ const ForecastingPage: React.FC = () => {
|
||||
} = useTenantForecasts(tenantId, {
|
||||
start_date: startDate.toISOString().split('T')[0],
|
||||
end_date: endDate.toISOString().split('T')[0],
|
||||
...(selectedProduct !== 'all' && { inventory_product_id: selectedProduct }),
|
||||
...(selectedProduct && { inventory_product_id: selectedProduct }),
|
||||
limit: 100
|
||||
}, {
|
||||
enabled: !!tenantId && hasGeneratedForecast && !!selectedProduct
|
||||
});
|
||||
|
||||
const {
|
||||
data: statisticsData,
|
||||
isLoading: statisticsLoading,
|
||||
error: statisticsError
|
||||
} = useForecastStatistics(tenantId);
|
||||
|
||||
// Fetch real inventory data
|
||||
const {
|
||||
@@ -48,21 +50,48 @@ const ForecastingPage: React.FC = () => {
|
||||
error: ingredientsError
|
||||
} = useIngredients(tenantId);
|
||||
|
||||
// Build products list from real inventory data
|
||||
const products = useMemo(() => {
|
||||
const productList = [{ id: 'all', name: 'Todos los productos' }];
|
||||
// Fetch trained models to filter products
|
||||
const {
|
||||
data: modelsData,
|
||||
isLoading: modelsLoading,
|
||||
error: modelsError
|
||||
} = useModels(tenantId, { active_only: true });
|
||||
|
||||
if (ingredientsData && ingredientsData.length > 0) {
|
||||
const inventoryProducts = ingredientsData.map(ingredient => ({
|
||||
// Forecast generation mutation
|
||||
const createForecastMutation = useCreateSingleForecast({
|
||||
onSuccess: (data) => {
|
||||
setIsGenerating(false);
|
||||
setHasGeneratedForecast(true);
|
||||
// Store the generated forecast data locally for immediate display
|
||||
setCurrentForecastData([data]);
|
||||
},
|
||||
onError: (error) => {
|
||||
setIsGenerating(false);
|
||||
console.error('Error generating forecast:', error);
|
||||
},
|
||||
});
|
||||
|
||||
// Build products list from ingredients that have trained models
|
||||
const products = useMemo(() => {
|
||||
if (!ingredientsData || !modelsData?.models) {
|
||||
return [];
|
||||
}
|
||||
|
||||
// Get inventory product IDs that have trained models
|
||||
const modelProductIds = new Set(modelsData.models.map(model => model.inventory_product_id));
|
||||
|
||||
// Filter ingredients to only those with models
|
||||
const ingredientsWithModels = ingredientsData.filter(ingredient =>
|
||||
modelProductIds.has(ingredient.id)
|
||||
);
|
||||
|
||||
return ingredientsWithModels.map(ingredient => ({
|
||||
id: ingredient.id,
|
||||
name: ingredient.name,
|
||||
category: ingredient.category,
|
||||
hasModel: true
|
||||
}));
|
||||
productList.push(...inventoryProducts);
|
||||
}
|
||||
|
||||
return productList;
|
||||
}, [ingredientsData]);
|
||||
}, [ingredientsData, modelsData]);
|
||||
|
||||
const periods = [
|
||||
{ value: '7', label: '7 días' },
|
||||
@@ -71,99 +100,107 @@ const ForecastingPage: React.FC = () => {
|
||||
{ value: '90', label: '3 meses' },
|
||||
];
|
||||
|
||||
// Transform forecast data for table display
|
||||
const transformForecastsForTable = (forecasts: ForecastResponse[]) => {
|
||||
return forecasts.map(forecast => ({
|
||||
id: forecast.id,
|
||||
product: forecast.inventory_product_id, // Will need to map to product name
|
||||
currentStock: 'N/A', // Not available in forecast data
|
||||
forecastDemand: forecast.predicted_demand,
|
||||
recommendedProduction: Math.ceil(forecast.predicted_demand * 1.1), // Simple calculation
|
||||
confidence: Math.round(forecast.confidence_level * 100),
|
||||
trend: forecast.predicted_demand > 0 ? 'up' : 'stable',
|
||||
stockoutRisk: forecast.confidence_level > 0.8 ? 'low' : forecast.confidence_level > 0.6 ? 'medium' : 'high',
|
||||
}));
|
||||
// Handle forecast generation
|
||||
const handleGenerateForecast = async () => {
|
||||
if (!tenantId || !selectedProduct) {
|
||||
alert('Por favor, selecciona un ingrediente para generar predicciones.');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsGenerating(true);
|
||||
|
||||
try {
|
||||
const today = new Date();
|
||||
const forecastRequest = {
|
||||
inventory_product_id: selectedProduct,
|
||||
forecast_date: today.toISOString().split('T')[0],
|
||||
forecast_days: parseInt(forecastPeriod),
|
||||
location: 'default',
|
||||
confidence_level: 0.8,
|
||||
};
|
||||
|
||||
// Generate alerts based on forecast data
|
||||
const generateAlertsFromForecasts = (forecasts: ForecastResponse[]) => {
|
||||
return forecasts
|
||||
.filter(forecast => forecast.confidence_level < 0.7 || forecast.predicted_demand > 50)
|
||||
.slice(0, 3) // Limit to 3 alerts
|
||||
.map((forecast, index) => ({
|
||||
id: (index + 1).toString(),
|
||||
type: forecast.confidence_level < 0.7 ? 'low-confidence' : 'high-demand',
|
||||
product: forecast.inventory_product_id,
|
||||
message: forecast.confidence_level < 0.7
|
||||
? `Baja confianza en predicción (${Math.round(forecast.confidence_level * 100)}%)`
|
||||
: `Alta demanda prevista: ${forecast.predicted_demand} unidades`,
|
||||
severity: forecast.confidence_level < 0.5 ? 'high' : 'medium',
|
||||
recommendation: forecast.confidence_level < 0.7
|
||||
? 'Revisar datos históricos y factores externos'
|
||||
: `Considerar aumentar producción a ${Math.ceil(forecast.predicted_demand * 1.2)} unidades`
|
||||
}));
|
||||
};
|
||||
|
||||
// Extract weather data from first forecast (if available)
|
||||
const getWeatherImpact = (forecasts: ForecastResponse[]) => {
|
||||
const firstForecast = forecasts?.[0];
|
||||
if (!firstForecast) return null;
|
||||
|
||||
return {
|
||||
today: firstForecast.weather_description || 'N/A',
|
||||
temperature: firstForecast.weather_temperature || 0,
|
||||
demandFactor: 1.0, // Could be calculated based on weather
|
||||
affectedCategories: [], // Could be derived from business logic
|
||||
};
|
||||
};
|
||||
|
||||
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" />;
|
||||
// Use the new multi-day endpoint for all forecasts
|
||||
const multiDayResult = await forecastingService.createMultiDayForecast(tenantId, forecastRequest);
|
||||
setIsGenerating(false);
|
||||
setHasGeneratedForecast(true);
|
||||
// Use the forecasts from the multi-day response
|
||||
setCurrentForecastData(multiDayResult.forecasts);
|
||||
} catch (error) {
|
||||
console.error('Failed to generate forecast:', error);
|
||||
setIsGenerating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getRiskBadge = (risk: string) => {
|
||||
const riskConfig = {
|
||||
low: { color: 'green', text: 'Bajo' },
|
||||
medium: { color: 'yellow', text: 'Medio' },
|
||||
high: { color: 'red', text: 'Alto' },
|
||||
// Transform forecast data for table display - only real data
|
||||
const transformForecastsForTable = (forecasts: ForecastResponse[]) => {
|
||||
return forecasts.map(forecast => ({
|
||||
id: forecast.id,
|
||||
product: forecast.inventory_product_id,
|
||||
forecastDate: forecast.forecast_date,
|
||||
forecastDemand: forecast.predicted_demand,
|
||||
confidence: Math.round(forecast.confidence_level * 100),
|
||||
confidenceRange: `${forecast.confidence_lower?.toFixed(1) || 'N/A'} - ${forecast.confidence_upper?.toFixed(1) || 'N/A'}`,
|
||||
algorithm: forecast.algorithm,
|
||||
}));
|
||||
};
|
||||
|
||||
const config = riskConfig[risk as keyof typeof riskConfig];
|
||||
return <Badge variant={config?.color as any}>{config?.text}</Badge>;
|
||||
|
||||
// Extract weather data from all forecasts for 7-day view
|
||||
const getWeatherImpact = (forecasts: ForecastResponse[]) => {
|
||||
if (!forecasts || forecasts.length === 0) return null;
|
||||
|
||||
// Calculate average temperature across all forecast days
|
||||
const avgTemp = forecasts.reduce((sum, f) => sum + (f.weather_temperature || 0), 0) / forecasts.length;
|
||||
const tempRange = {
|
||||
min: Math.min(...forecasts.map(f => f.weather_temperature || 0)),
|
||||
max: Math.max(...forecasts.map(f => f.weather_temperature || 0))
|
||||
};
|
||||
|
||||
// Aggregate weather descriptions
|
||||
const weatherTypes = forecasts
|
||||
.map(f => f.weather_description)
|
||||
.filter(Boolean)
|
||||
.reduce((acc, desc) => {
|
||||
acc[desc] = (acc[desc] || 0) + 1;
|
||||
return acc;
|
||||
}, {} as Record<string, number>);
|
||||
|
||||
const dominantWeather = Object.entries(weatherTypes)
|
||||
.sort(([,a], [,b]) => b - a)[0]?.[0] || 'N/A';
|
||||
|
||||
return {
|
||||
avgTemperature: Math.round(avgTemp),
|
||||
tempRange,
|
||||
dominantWeather,
|
||||
forecastDays: forecasts.length,
|
||||
dailyForecasts: forecasts.map(f => ({
|
||||
date: f.forecast_date,
|
||||
temperature: f.weather_temperature,
|
||||
description: f.weather_description,
|
||||
predicted_demand: f.predicted_demand
|
||||
}))
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
const forecastColumns: TableColumn[] = [
|
||||
{
|
||||
key: 'product',
|
||||
title: 'Producto',
|
||||
title: 'Producto ID',
|
||||
dataIndex: 'product',
|
||||
},
|
||||
{
|
||||
key: 'currentStock',
|
||||
title: 'Stock Actual',
|
||||
dataIndex: 'currentStock',
|
||||
key: 'forecastDate',
|
||||
title: 'Fecha',
|
||||
dataIndex: 'forecastDate',
|
||||
render: (value) => new Date(value).toLocaleDateString('es-ES'),
|
||||
},
|
||||
{
|
||||
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>
|
||||
<span className="font-medium text-[var(--color-info)]">{value?.toFixed(2) || 'N/A'}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
@@ -173,30 +210,23 @@ const ForecastingPage: React.FC = () => {
|
||||
render: (value) => `${value}%`,
|
||||
},
|
||||
{
|
||||
key: 'trend',
|
||||
title: 'Tendencia',
|
||||
dataIndex: 'trend',
|
||||
render: (value) => (
|
||||
<div className="flex items-center">
|
||||
{getTrendIcon(value)}
|
||||
</div>
|
||||
),
|
||||
key: 'confidenceRange',
|
||||
title: 'Rango de Confianza',
|
||||
dataIndex: 'confidenceRange',
|
||||
},
|
||||
{
|
||||
key: 'stockoutRisk',
|
||||
title: 'Riesgo Agotamiento',
|
||||
dataIndex: 'stockoutRisk',
|
||||
render: (value) => getRiskBadge(value),
|
||||
key: 'algorithm',
|
||||
title: 'Algoritmo',
|
||||
dataIndex: 'algorithm',
|
||||
},
|
||||
];
|
||||
|
||||
// Derived data from API responses
|
||||
const forecasts = forecastsData?.forecasts || [];
|
||||
// Use either current forecast data or fetched data
|
||||
const forecasts = currentForecastData.length > 0 ? currentForecastData : (forecastsData?.forecasts || []);
|
||||
const transformedForecasts = transformForecastsForTable(forecasts);
|
||||
const alerts = generateAlertsFromForecasts(forecasts);
|
||||
const weatherImpact = getWeatherImpact(forecasts);
|
||||
const isLoading = forecastsLoading || statisticsLoading || ingredientsLoading;
|
||||
const hasError = forecastsError || statisticsError || ingredientsError;
|
||||
const isLoading = forecastsLoading || ingredientsLoading || modelsLoading || isGenerating;
|
||||
const hasError = forecastsError || ingredientsError || modelsError;
|
||||
|
||||
// Calculate metrics from real data
|
||||
const totalDemand = forecasts.reduce((sum, f) => sum + f.predicted_demand, 0);
|
||||
@@ -204,6 +234,67 @@ const ForecastingPage: React.FC = () => {
|
||||
? Math.round((forecasts.reduce((sum, f) => sum + f.confidence_level, 0) / forecasts.length) * 100)
|
||||
: 0;
|
||||
|
||||
// Get forecast insights from the latest forecast - only real backend data
|
||||
const getForecastInsights = (forecast: ForecastResponse) => {
|
||||
const insights = [];
|
||||
|
||||
// Weather data (only factual)
|
||||
if (forecast.weather_temperature) {
|
||||
insights.push({
|
||||
type: 'weather',
|
||||
icon: Thermometer,
|
||||
title: 'Temperatura',
|
||||
description: `${forecast.weather_temperature}°C`,
|
||||
impact: 'info'
|
||||
});
|
||||
}
|
||||
|
||||
if (forecast.weather_description) {
|
||||
insights.push({
|
||||
type: 'weather',
|
||||
icon: CloudRain,
|
||||
title: 'Condición Climática',
|
||||
description: forecast.weather_description,
|
||||
impact: 'info'
|
||||
});
|
||||
}
|
||||
|
||||
// Temporal factors (only factual)
|
||||
if (forecast.is_weekend) {
|
||||
insights.push({
|
||||
type: 'temporal',
|
||||
icon: Calendar,
|
||||
title: 'Fin de Semana',
|
||||
description: 'Día de fin de semana',
|
||||
impact: 'info'
|
||||
});
|
||||
}
|
||||
|
||||
if (forecast.is_holiday) {
|
||||
insights.push({
|
||||
type: 'temporal',
|
||||
icon: Calendar,
|
||||
title: 'Día Festivo',
|
||||
description: 'Día festivo',
|
||||
impact: 'info'
|
||||
});
|
||||
}
|
||||
|
||||
// Model confidence (factual)
|
||||
insights.push({
|
||||
type: 'model',
|
||||
icon: Target,
|
||||
title: 'Confianza del Modelo',
|
||||
description: `${Math.round(forecast.confidence_level * 100)}%`,
|
||||
impact: forecast.confidence_level > 0.8 ? 'positive' : forecast.confidence_level > 0.6 ? 'moderate' : 'high'
|
||||
});
|
||||
|
||||
return insights;
|
||||
};
|
||||
|
||||
const currentInsights = forecasts.length > 0 ? getForecastInsights(forecasts[0]) : [];
|
||||
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-6">
|
||||
<PageHeader
|
||||
@@ -226,108 +317,74 @@ const ForecastingPage: React.FC = () => {
|
||||
{isLoading && (
|
||||
<Card className="p-6 flex items-center justify-center">
|
||||
<Loader className="h-6 w-6 animate-spin mr-2" />
|
||||
<span>Cargando predicciones...</span>
|
||||
<span>
|
||||
{isGenerating ? 'Generando nuevas predicciones...' : 'Cargando predicciones...'}
|
||||
</span>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{hasError && (
|
||||
<Card className="p-6 bg-red-50 border-red-200">
|
||||
<Card className="p-6 bg-[var(--color-error-50)] border-[var(--color-error-200)]">
|
||||
<div className="flex items-center">
|
||||
<AlertTriangle className="h-5 w-5 text-red-600 mr-2" />
|
||||
<span className="text-red-800">Error al cargar las predicciones. Por favor, inténtalo de nuevo.</span>
|
||||
<AlertTriangle className="h-5 w-5 text-[var(--color-error-600)] mr-2" />
|
||||
<span className="text-[var(--color-error-800)]">Error al cargar las predicciones. Por favor, inténtalo de nuevo.</span>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{!isLoading && !hasError && (
|
||||
<>
|
||||
{/* 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)]">
|
||||
{statisticsData?.accuracy_metrics?.average_accuracy
|
||||
? Math.round(statisticsData.accuracy_metrics.average_accuracy * 100)
|
||||
: averageConfidence}%
|
||||
</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)]">{Math.round(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">
|
||||
+{statisticsData?.accuracy_metrics?.accuracy_trend
|
||||
? Math.round(statisticsData.accuracy_metrics.accuracy_trend * 100)
|
||||
: 5}%
|
||||
</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)]">Total Predicciones</p>
|
||||
<p className="text-3xl font-bold text-[var(--color-primary)]">
|
||||
{statisticsData?.total_forecasts || forecasts.length}
|
||||
</p>
|
||||
<p className="text-xs text-[var(--text-tertiary)]">generadas</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 */}
|
||||
{/* Forecast Configuration */}
|
||||
<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">
|
||||
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-4">Configurar Predicción</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{/* Step 1: Select Ingredient */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">Producto</label>
|
||||
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||
<span className="flex items-center">
|
||||
<span className="bg-[var(--color-info-600)] text-white rounded-full w-6 h-6 flex items-center justify-center text-xs mr-2">1</span>
|
||||
Seleccionar Ingrediente
|
||||
</span>
|
||||
</label>
|
||||
<select
|
||||
value={selectedProduct}
|
||||
onChange={(e) => setSelectedProduct(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md"
|
||||
disabled={isGenerating}
|
||||
>
|
||||
<option value="">Selecciona un ingrediente...</option>
|
||||
{products.map(product => (
|
||||
<option key={product.id} value={product.id}>{product.name}</option>
|
||||
<option key={product.id} value={product.id}>
|
||||
🤖 {product.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{products.length === 0 && (
|
||||
<p className="text-xs text-[var(--text-tertiary)] mt-1">
|
||||
No hay ingredientes con modelos entrenados
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Step 2: Select Period */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">Período</label>
|
||||
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||
<span className="flex items-center">
|
||||
<span className={`rounded-full w-6 h-6 flex items-center justify-center text-xs mr-2 ${
|
||||
selectedProduct ? 'bg-[var(--color-info-600)] text-white' : 'bg-gray-300 text-gray-600'
|
||||
}`}>2</span>
|
||||
Período de Predicción
|
||||
</span>
|
||||
</label>
|
||||
<select
|
||||
value={forecastPeriod}
|
||||
onChange={(e) => setForecastPeriod(e.target.value)}
|
||||
className="w-full px-3 py-2 border border-[var(--border-secondary)] rounded-md"
|
||||
disabled={!selectedProduct || isGenerating}
|
||||
>
|
||||
{periods.map(period => (
|
||||
<option key={period.value} value={period.value}>{period.label}</option>
|
||||
@@ -335,96 +392,259 @@ const ForecastingPage: React.FC = () => {
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Step 3: Generate */}
|
||||
<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)]">
|
||||
<label className="block text-sm font-medium text-[var(--text-secondary)] mb-2">
|
||||
<span className="flex items-center">
|
||||
<span className={`rounded-full w-6 h-6 flex items-center justify-center text-xs mr-2 ${
|
||||
selectedProduct && forecastPeriod ? 'bg-[var(--color-info-600)] text-white' : 'bg-gray-300 text-gray-600'
|
||||
}`}>3</span>
|
||||
Generar Predicción
|
||||
</span>
|
||||
</label>
|
||||
<Button
|
||||
onClick={handleGenerateForecast}
|
||||
disabled={!selectedProduct || !forecastPeriod || isGenerating}
|
||||
className="w-full bg-[var(--color-primary)] text-white hover:bg-[var(--color-primary)]/90"
|
||||
>
|
||||
{isGenerating ? (
|
||||
<>
|
||||
<Loader className="w-4 h-4 mr-2 animate-spin" />
|
||||
Generando...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Zap className="w-4 h-4 mr-2" />
|
||||
Generar Predicción
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selectedProduct && (
|
||||
<div className="mt-4 p-3 bg-[var(--color-info-50)] border border-[var(--color-info-200)] rounded-lg">
|
||||
<p className="text-sm text-[var(--color-info-800)]">
|
||||
<strong>Ingrediente seleccionado:</strong> {products.find(p => p.id === selectedProduct)?.name}
|
||||
</p>
|
||||
<p className="text-xs text-[var(--color-info-600)] mt-1">
|
||||
Se generará una predicción de demanda para los próximos {forecastPeriod} días usando IA
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Results Section - Only show after generating forecast */}
|
||||
{hasGeneratedForecast && forecasts.length > 0 && (
|
||||
<>
|
||||
{/* Enhanced Layout Structure */}
|
||||
<div className="space-y-8">
|
||||
|
||||
{/* Key Metrics Row - Using StatsGrid */}
|
||||
<StatsGrid
|
||||
columns={4}
|
||||
gap="md"
|
||||
stats={[
|
||||
{
|
||||
title: "Confianza del Modelo",
|
||||
value: `${averageConfidence}%`,
|
||||
icon: Target,
|
||||
variant: "success",
|
||||
size: "sm"
|
||||
},
|
||||
{
|
||||
title: "Demanda Total",
|
||||
value: Math.round(totalDemand),
|
||||
icon: TrendingUp,
|
||||
variant: "info",
|
||||
size: "sm",
|
||||
subtitle: `próximos ${forecastPeriod} días`
|
||||
},
|
||||
{
|
||||
title: "Días Predichos",
|
||||
value: forecasts.length,
|
||||
icon: Calendar,
|
||||
variant: "default",
|
||||
size: "sm"
|
||||
},
|
||||
{
|
||||
title: "Variabilidad",
|
||||
value: (Math.max(...forecasts.map(f => f.predicted_demand)) - Math.min(...forecasts.map(f => f.predicted_demand))).toFixed(1),
|
||||
icon: BarChart3,
|
||||
variant: "warning",
|
||||
size: "sm"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* Main Content Grid */}
|
||||
<div className="grid grid-cols-12 gap-6">
|
||||
|
||||
{/* Chart Section - Takes most space */}
|
||||
<div className="col-span-12 lg:col-span-8">
|
||||
<Card className="h-full">
|
||||
<div className="p-6 border-b border-gray-200">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-gray-900">Predicción de Demanda</h3>
|
||||
<p className="text-sm text-gray-600 mt-1">
|
||||
{products.find(p => p.id === selectedProduct)?.name} • {forecastPeriod} días • {forecasts.length} puntos
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="flex rounded-lg border border-gray-300 overflow-hidden">
|
||||
<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`}
|
||||
className={`px-4 py-2 text-sm font-medium transition-colors ${
|
||||
viewMode === 'chart'
|
||||
? 'bg-[var(--color-info-600)] text-white'
|
||||
: 'bg-white text-gray-700 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
Gráfico
|
||||
📊 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`}
|
||||
className={`px-4 py-2 text-sm font-medium transition-colors border-l ${
|
||||
viewMode === 'table'
|
||||
? 'bg-[var(--color-info-600)] text-white'
|
||||
: 'bg-white text-gray-700 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
Tabla
|
||||
📋 Tabla
|
||||
</button>
|
||||
</div>
|
||||
<Button variant="outline" size="sm">
|
||||
<Download className="w-4 h-4 mr-2" />
|
||||
Exportar
|
||||
</Button>
|
||||
</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">
|
||||
<div className="p-6">
|
||||
{viewMode === 'chart' ? (
|
||||
<DemandChart
|
||||
data={forecasts}
|
||||
product={selectedProduct}
|
||||
period={forecastPeriod}
|
||||
loading={isLoading}
|
||||
error={hasError ? 'Error al cargar las predicciones' : null}
|
||||
height={450}
|
||||
title=""
|
||||
/>
|
||||
) : (
|
||||
<ForecastTable forecasts={transformedForecasts} />
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Alerts Panel */}
|
||||
{/* Right Sidebar - Insights */}
|
||||
<div className="col-span-12 lg:col-span-4 space-y-6">
|
||||
{/* Weather & External Factors */}
|
||||
<div className="space-y-6">
|
||||
<AlertsPanel alerts={alerts} />
|
||||
{/* Forecast Insights */}
|
||||
{currentInsights.length > 0 && (
|
||||
<Card className="p-6">
|
||||
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-4">Factores que Afectan la Predicción</h3>
|
||||
<div className="space-y-3">
|
||||
{currentInsights.map((insight, index) => {
|
||||
const IconComponent = insight.icon;
|
||||
return (
|
||||
<div key={index} className="flex items-start space-x-3 p-3 bg-[var(--bg-secondary)] rounded-lg">
|
||||
<div className={`p-2 rounded-lg ${
|
||||
insight.impact === 'positive' ? 'bg-[var(--color-success-100)] text-[var(--color-success-600)]' :
|
||||
insight.impact === 'high' ? 'bg-[var(--color-error-100)] text-[var(--color-error-600)]' :
|
||||
insight.impact === 'moderate' ? 'bg-[var(--color-warning-100)] text-[var(--color-warning-600)]' :
|
||||
'bg-[var(--color-info-100)] text-[var(--color-info-600)]'
|
||||
}`}>
|
||||
<IconComponent className="w-4 h-4" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-medium text-[var(--text-primary)]">{insight.title}</p>
|
||||
<p className="text-xs text-[var(--text-secondary)]">{insight.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Weather Impact */}
|
||||
{weatherImpact && (
|
||||
<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">
|
||||
<Card className="overflow-hidden">
|
||||
<div className="bg-gradient-to-r from-[var(--color-warning-500)] to-[var(--color-error-500)] p-4">
|
||||
<h3 className="text-lg font-bold text-white flex items-center">
|
||||
<Sun className="w-5 h-5 mr-2" />
|
||||
Clima ({weatherImpact.forecastDays} días)
|
||||
</h3>
|
||||
<p className="text-[var(--color-warning-100)] text-sm">Impacto meteorológico en la demanda</p>
|
||||
</div>
|
||||
<div className="p-4 space-y-4">
|
||||
{/* Temperature Overview */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="bg-[var(--color-warning-50)] p-3 rounded-lg border border-[var(--color-warning-200)]">
|
||||
<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>
|
||||
<Thermometer className="w-4 h-4 text-[var(--color-warning-600)]" />
|
||||
<span className="text-lg font-bold text-[var(--color-warning-800)]">{weatherImpact.avgTemperature}°C</span>
|
||||
</div>
|
||||
<p className="text-xs text-[var(--color-warning-600)] mt-1">Promedio</p>
|
||||
</div>
|
||||
<div className="bg-[var(--color-info-50)] p-3 rounded-lg border border-[var(--color-info-200)]">
|
||||
<div className="text-center">
|
||||
<p className="text-sm font-medium text-[var(--color-info-800)]">{weatherImpact.dominantWeather}</p>
|
||||
<p className="text-xs text-[var(--color-info-600)] mt-1">Condición</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-[var(--text-secondary)]">Condiciones:</span>
|
||||
<span className="text-sm font-medium text-[var(--color-info)]">{weatherImpact.today}</span>
|
||||
{/* Daily forecast - compact */}
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs font-medium text-gray-700">Pronóstico detallado:</p>
|
||||
<div className="max-h-24 overflow-y-auto space-y-1">
|
||||
{weatherImpact.dailyForecasts.slice(0, 5).map((day, index) => (
|
||||
<div key={index} className="flex items-center justify-between text-xs p-2 bg-gray-50 rounded">
|
||||
<span className="text-gray-600 font-medium">
|
||||
{new Date(day.date).toLocaleDateString('es-ES', { weekday: 'short', day: 'numeric' })}
|
||||
</span>
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-[var(--color-warning-600)]">{day.temperature}°C</span>
|
||||
<span className="text-[var(--color-info-600)] font-bold">{day.predicted_demand?.toFixed(0)}</span>
|
||||
</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>
|
||||
|
||||
{weatherImpact.affectedCategories.length > 0 && (
|
||||
<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>
|
||||
)}
|
||||
|
||||
{/* Model Performance */}
|
||||
{statisticsData?.model_performance && (
|
||||
<Card className="p-6">
|
||||
<h3 className="text-lg font-semibold text-[var(--text-primary)] mb-4">Rendimiento del Modelo</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="p-3 bg-[var(--bg-secondary)] rounded-lg">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm font-medium">Algoritmo principal</span>
|
||||
<Badge variant="purple">{statisticsData.model_performance.most_used_algorithm}</Badge>
|
||||
|
||||
{/* Model Information */}
|
||||
{forecasts.length > 0 && (
|
||||
<Card className="overflow-hidden">
|
||||
<div className="bg-gradient-to-r from-[var(--chart-quinary)] to-[var(--color-info-700)] p-4">
|
||||
<h3 className="text-lg font-bold text-white flex items-center">
|
||||
<Brain className="w-5 h-5 mr-2" />
|
||||
Modelo IA
|
||||
</h3>
|
||||
<p className="text-purple-100 text-sm">Información técnica del algoritmo</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs text-[var(--text-tertiary)]">Tiempo de procesamiento promedio</span>
|
||||
<span className="text-xs text-[var(--text-secondary)]">
|
||||
{Math.round(statisticsData.model_performance.average_processing_time)}ms
|
||||
</span>
|
||||
<div className="p-4 space-y-3">
|
||||
<div className="grid grid-cols-1 gap-2">
|
||||
<div className="flex items-center justify-between p-2 bg-[var(--color-info-50)] rounded border border-[var(--color-info-200)]">
|
||||
<span className="text-sm font-medium text-[var(--color-info-800)]">Algoritmo</span>
|
||||
<Badge variant="purple">{forecasts[0]?.algorithm || 'N/A'}</Badge>
|
||||
</div>
|
||||
<div className="flex items-center justify-between p-2 bg-gray-50 rounded">
|
||||
<span className="text-xs text-gray-600">Versión</span>
|
||||
<span className="text-xs font-mono text-gray-800">{forecasts[0]?.model_version || 'N/A'}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between p-2 bg-gray-50 rounded">
|
||||
<span className="text-xs text-gray-600">Tiempo</span>
|
||||
<span className="text-xs font-mono text-gray-800">{forecasts[0]?.processing_time_ms || 'N/A'}ms</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -432,6 +652,10 @@ const ForecastingPage: React.FC = () => {
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Detailed Forecasts Table */}
|
||||
{!isLoading && !hasError && transformedForecasts.length > 0 && (
|
||||
@@ -448,15 +672,57 @@ const ForecastingPage: React.FC = () => {
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{!isLoading && !hasError && transformedForecasts.length === 0 && (
|
||||
{/* Empty States */}
|
||||
{!isLoading && !hasError && products.length === 0 && (
|
||||
<Card className="p-6 text-center">
|
||||
<div className="py-8">
|
||||
<BarChart3 className="h-12 w-12 text-gray-400 mx-auto mb-4" />
|
||||
<h3 className="text-lg font-medium text-gray-600 mb-2">No hay predicciones disponibles</h3>
|
||||
<p className="text-gray-500">
|
||||
No se encontraron predicciones para el período seleccionado.
|
||||
Prueba ajustando los filtros o genera nuevas predicciones.
|
||||
<TrendingUp className="h-12 w-12 text-[var(--color-warning-400)] mx-auto mb-4" />
|
||||
<h3 className="text-lg font-medium text-gray-600 mb-2">No hay ingredientes con modelos entrenados</h3>
|
||||
<p className="text-gray-500 mb-6">
|
||||
Para generar predicciones, primero necesitas entrenar modelos de IA para tus ingredientes.
|
||||
Ve a la página de Modelos IA para entrenar modelos para tus ingredientes.
|
||||
</p>
|
||||
<div className="flex justify-center space-x-4">
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={() => {
|
||||
window.location.href = '/app/database/models';
|
||||
}}
|
||||
>
|
||||
<Settings className="w-4 h-4 mr-2" />
|
||||
Configurar Modelos IA
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{!isLoading && !hasError && products.length > 0 && !hasGeneratedForecast && (
|
||||
<Card className="p-6 text-center">
|
||||
<div className="py-8">
|
||||
<BarChart3 className="h-12 w-12 text-[var(--color-info-400)] mx-auto mb-4" />
|
||||
<h3 className="text-lg font-medium text-gray-600 mb-2">Listo para Generar Predicciones</h3>
|
||||
<p className="text-gray-500 mb-6">
|
||||
Tienes {products.length} ingrediente{products.length > 1 ? 's' : ''} con modelos entrenados disponibles.
|
||||
Selecciona un ingrediente y período para comenzar.
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 max-w-2xl mx-auto">
|
||||
<div className="text-center p-4 border rounded-lg">
|
||||
<div className="bg-[var(--color-info-600)] text-white rounded-full w-8 h-8 flex items-center justify-center mx-auto mb-2 text-sm">1</div>
|
||||
<p className="text-sm font-medium text-gray-600">Selecciona Ingrediente</p>
|
||||
<p className="text-xs text-gray-500">Elige un ingrediente con modelo IA</p>
|
||||
</div>
|
||||
<div className="text-center p-4 border rounded-lg">
|
||||
<div className="bg-gray-300 text-gray-600 rounded-full w-8 h-8 flex items-center justify-center mx-auto mb-2 text-sm">2</div>
|
||||
<p className="text-sm font-medium text-gray-600">Define Período</p>
|
||||
<p className="text-xs text-gray-500">Establece días a predecir</p>
|
||||
</div>
|
||||
<div className="text-center p-4 border rounded-lg">
|
||||
<div className="bg-gray-300 text-gray-600 rounded-full w-8 h-8 flex items-center justify-center mx-auto mb-2 text-sm">3</div>
|
||||
<p className="text-sm font-medium text-gray-600">Generar Predicción</p>
|
||||
<p className="text-xs text-gray-500">Obtén insights de IA</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
680
frontend/src/pages/app/database/models/ModelsConfigPage.tsx
Normal file
680
frontend/src/pages/app/database/models/ModelsConfigPage.tsx
Normal file
@@ -0,0 +1,680 @@
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import { Brain, TrendingUp, AlertCircle, Play, RotateCcw, Eye, Loader, CheckCircle } from 'lucide-react';
|
||||
import { Button, Card, Badge, Modal, Table, Select, Input } from '../../../../components/ui';
|
||||
import { PageHeader } from '../../../../components/layout';
|
||||
import { useToast } from '../../../../hooks/ui/useToast';
|
||||
import { useCurrentTenant } from '../../../../stores/tenant.store';
|
||||
import { useIngredients } from '../../../../api/hooks/inventory';
|
||||
import {
|
||||
useModels,
|
||||
useActiveModel,
|
||||
useTrainSingleProduct,
|
||||
useModelMetrics,
|
||||
useModelPerformance,
|
||||
useTenantTrainingStatistics
|
||||
} from '../../../../api/hooks/training';
|
||||
import type { IngredientResponse } from '../../../../api/types/inventory';
|
||||
import type { TrainedModelResponse, SingleProductTrainingRequest } from '../../../../api/types/training';
|
||||
|
||||
// Actual API response structure (different from expected paginated response)
|
||||
interface ModelsApiResponse {
|
||||
tenant_id: string;
|
||||
models: TrainedModelResponse[];
|
||||
total_returned: number;
|
||||
active_only: boolean;
|
||||
pagination: any;
|
||||
enhanced_features: boolean;
|
||||
repository_integration: boolean;
|
||||
}
|
||||
|
||||
interface ModelStatus {
|
||||
ingredient: IngredientResponse;
|
||||
hasModel: boolean;
|
||||
model?: TrainedModelResponse;
|
||||
isTraining: boolean;
|
||||
trainingJobId?: string;
|
||||
lastTrainingDate?: string;
|
||||
accuracy?: number;
|
||||
status: 'no_model' | 'active' | 'training' | 'error';
|
||||
}
|
||||
|
||||
const ModelsConfigPage: React.FC = () => {
|
||||
const { addToast } = useToast();
|
||||
const currentTenant = useCurrentTenant();
|
||||
const tenantId = currentTenant?.id || '';
|
||||
|
||||
const [selectedIngredient, setSelectedIngredient] = useState<IngredientResponse | null>(null);
|
||||
const [showTrainingModal, setShowTrainingModal] = useState(false);
|
||||
const [showModelDetailsModal, setShowModelDetailsModal] = useState(false);
|
||||
const [trainingSettings, setTrainingSettings] = useState<Partial<SingleProductTrainingRequest>>({
|
||||
seasonality_mode: 'additive',
|
||||
daily_seasonality: true,
|
||||
weekly_seasonality: true,
|
||||
yearly_seasonality: false,
|
||||
});
|
||||
|
||||
// API hooks
|
||||
const { data: ingredients = [], isLoading: ingredientsLoading } = useIngredients(tenantId);
|
||||
const { data: modelsData, isLoading: modelsLoading, error: modelsError } = useModels(tenantId);
|
||||
const { data: statistics, error: statsError } = useTenantTrainingStatistics(tenantId);
|
||||
const trainMutation = useTrainSingleProduct();
|
||||
|
||||
// Debug: Log the models data structure
|
||||
React.useEffect(() => {
|
||||
console.log('Models data structure:', {
|
||||
modelsData,
|
||||
modelsLoading,
|
||||
modelsError,
|
||||
ingredients: ingredients.length
|
||||
});
|
||||
}, [modelsData, modelsLoading, modelsError, ingredients]);
|
||||
|
||||
// Build model status for each ingredient
|
||||
const modelStatuses = useMemo<ModelStatus[]>(() => {
|
||||
// Handle different possible data structures from the API response
|
||||
let models: TrainedModelResponse[] = [];
|
||||
|
||||
// The API actually returns { models: [...], tenant_id: ..., total_returned: ... }
|
||||
const apiResponse = modelsData as any as ModelsApiResponse;
|
||||
if (apiResponse?.models && Array.isArray(apiResponse.models)) {
|
||||
models = apiResponse.models;
|
||||
} else if (modelsData?.data && Array.isArray(modelsData.data)) {
|
||||
models = modelsData.data;
|
||||
} else if (modelsData && Array.isArray(modelsData)) {
|
||||
models = modelsData as any;
|
||||
}
|
||||
|
||||
console.log('Processing models:', {
|
||||
modelsData,
|
||||
extractedModels: models,
|
||||
modelsCount: models.length,
|
||||
ingredientsCount: ingredients.length
|
||||
});
|
||||
|
||||
return ingredients.map((ingredient: IngredientResponse) => {
|
||||
const model = models.find((m: any) => {
|
||||
// Focus only on ID-based matching
|
||||
return m.inventory_product_id === ingredient.id ||
|
||||
String(m.inventory_product_id) === String(ingredient.id);
|
||||
});
|
||||
|
||||
const isTraining = false; // We'll track this separately for active training jobs
|
||||
|
||||
console.log(`Ingredient ${ingredient.name} (${ingredient.id}):`, {
|
||||
hasModel: !!model,
|
||||
model: model ? {
|
||||
id: model.model_id,
|
||||
created: model.created_at,
|
||||
inventory_product_id: model.inventory_product_id
|
||||
} : null
|
||||
});
|
||||
|
||||
return {
|
||||
ingredient,
|
||||
hasModel: !!model,
|
||||
model,
|
||||
isTraining,
|
||||
lastTrainingDate: model?.created_at,
|
||||
accuracy: model?.training_metrics?.mape ? (100 - model.training_metrics.mape) : undefined,
|
||||
status: model
|
||||
? (isTraining ? 'training' : 'active')
|
||||
: 'no_model'
|
||||
};
|
||||
});
|
||||
}, [ingredients, modelsData]);
|
||||
|
||||
// Calculate orphaned models (models for ingredients that no longer exist)
|
||||
const orphanedModels = useMemo(() => {
|
||||
const apiResponse = modelsData as any as ModelsApiResponse;
|
||||
const models = apiResponse?.models || [];
|
||||
const ingredientIds = new Set(ingredients.map(ing => ing.id));
|
||||
|
||||
return models.filter((model: any) => !ingredientIds.has(model.inventory_product_id));
|
||||
}, [modelsData, ingredients]);
|
||||
|
||||
// Filter and search
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [statusFilter, setStatusFilter] = useState<string>('all');
|
||||
|
||||
const filteredStatuses = useMemo(() => {
|
||||
return modelStatuses.filter(status => {
|
||||
const matchesSearch = status.ingredient.name.toLowerCase().includes(searchTerm.toLowerCase());
|
||||
const matchesStatus = statusFilter === 'all' || status.status === statusFilter;
|
||||
return matchesSearch && matchesStatus;
|
||||
});
|
||||
}, [modelStatuses, searchTerm, statusFilter]);
|
||||
|
||||
const handleTrainModel = async () => {
|
||||
if (!selectedIngredient) return;
|
||||
|
||||
try {
|
||||
await trainMutation.mutateAsync({
|
||||
tenantId,
|
||||
inventoryProductId: selectedIngredient.id,
|
||||
request: trainingSettings
|
||||
});
|
||||
|
||||
addToast(`Entrenamiento iniciado para ${selectedIngredient.name}`, { type: 'success' });
|
||||
setShowTrainingModal(false);
|
||||
} catch (error) {
|
||||
addToast('Error al iniciar el entrenamiento', { type: 'error' });
|
||||
}
|
||||
};
|
||||
|
||||
const handleViewModelDetails = (ingredient: IngredientResponse) => {
|
||||
setSelectedIngredient(ingredient);
|
||||
setShowModelDetailsModal(true);
|
||||
};
|
||||
|
||||
const handleStartTraining = (ingredient: IngredientResponse) => {
|
||||
setSelectedIngredient(ingredient);
|
||||
setShowTrainingModal(true);
|
||||
};
|
||||
|
||||
const getStatusBadge = (status: ModelStatus['status']) => {
|
||||
switch (status) {
|
||||
case 'no_model':
|
||||
return <Badge variant="secondary">Sin modelo</Badge>;
|
||||
case 'active':
|
||||
return <Badge variant="success">Activo</Badge>;
|
||||
case 'training':
|
||||
return <Badge variant="warning">Entrenando</Badge>;
|
||||
case 'error':
|
||||
return <Badge variant="error">Error</Badge>;
|
||||
default:
|
||||
return <Badge variant="secondary">Desconocido</Badge>;
|
||||
}
|
||||
};
|
||||
|
||||
const getAccuracyBadge = (accuracy?: number) => {
|
||||
if (!accuracy) return null;
|
||||
|
||||
const variant = accuracy >= 90 ? 'success' : accuracy >= 75 ? 'warning' : 'error';
|
||||
return <Badge variant={variant} size="sm">{accuracy.toFixed(1)}%</Badge>;
|
||||
};
|
||||
|
||||
// Table columns configuration
|
||||
const tableColumns = [
|
||||
{
|
||||
key: 'ingredient',
|
||||
title: 'Ingrediente',
|
||||
render: (_: any, status: ModelStatus) => (
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] rounded-lg flex items-center justify-center text-white font-bold">
|
||||
{status.ingredient.name.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium text-[var(--text-primary)]">{status.ingredient.name}</div>
|
||||
<div className="text-sm text-[var(--text-secondary)]">{status.ingredient.category}</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'status',
|
||||
title: 'Estado del Modelo',
|
||||
render: (_: any, status: ModelStatus) => (
|
||||
<div className="flex items-center gap-2">
|
||||
{getStatusBadge(status.status)}
|
||||
{status.accuracy && getAccuracyBadge(status.accuracy)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'lastTrained',
|
||||
title: 'Último Entrenamiento',
|
||||
render: (_: any, status: ModelStatus) => (
|
||||
<div className="text-sm text-[var(--text-secondary)]">
|
||||
{status.lastTrainingDate
|
||||
? new Date(status.lastTrainingDate).toLocaleDateString('es-ES')
|
||||
: 'Nunca'
|
||||
}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'actions',
|
||||
title: 'Acciones',
|
||||
render: (_: any, status: ModelStatus) => (
|
||||
<div className="flex items-center gap-2">
|
||||
{status.hasModel && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleViewModelDetails(status.ingredient)}
|
||||
leftIcon={<Eye className="w-4 h-4" />}
|
||||
>
|
||||
Ver detalles
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant={status.hasModel ? "outline" : "primary"}
|
||||
size="sm"
|
||||
onClick={() => handleStartTraining(status.ingredient)}
|
||||
leftIcon={status.hasModel ? <RotateCcw className="w-4 h-4" /> : <Play className="w-4 h-4" />}
|
||||
disabled={status.isTraining}
|
||||
>
|
||||
{status.hasModel ? 'Reentrenar' : 'Entrenar'}
|
||||
</Button>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
if (ingredientsLoading || modelsLoading) {
|
||||
return (
|
||||
<div className="p-6 space-y-6">
|
||||
<PageHeader
|
||||
title="Configuración de Modelos IA"
|
||||
description="Gestiona el entrenamiento y configuración de modelos de predicción para cada ingrediente"
|
||||
/>
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<Loader className="w-8 h-8 animate-spin" />
|
||||
<span className="ml-2">
|
||||
{ingredientsLoading ? 'Cargando ingredientes...' : 'Cargando modelos...'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (modelsError) {
|
||||
console.error('Error loading models:', modelsError);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-6">
|
||||
<PageHeader
|
||||
title="Configuración de Modelos IA"
|
||||
description="Gestiona el entrenamiento y configuración de modelos de predicción para cada ingrediente"
|
||||
/>
|
||||
|
||||
|
||||
{/* Statistics Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||||
<Card className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-[var(--text-primary)]">
|
||||
{modelStatuses.filter(s => s.hasModel).length}
|
||||
</div>
|
||||
<div className="text-sm text-[var(--text-secondary)]">Ingredientes con Modelo</div>
|
||||
</div>
|
||||
<Brain className="w-8 h-8 text-[var(--color-primary)]" />
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-[var(--text-primary)]">
|
||||
{modelStatuses.filter(s => s.status === 'no_model').length}
|
||||
</div>
|
||||
<div className="text-sm text-[var(--text-secondary)]">Sin Modelo</div>
|
||||
</div>
|
||||
<AlertCircle className="w-8 h-8 text-[var(--color-warning)]" />
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-[var(--text-primary)]">
|
||||
{orphanedModels.length}
|
||||
</div>
|
||||
<div className="text-sm text-[var(--text-secondary)]">Modelos Huérfanos</div>
|
||||
</div>
|
||||
<AlertCircle className="w-8 h-8 text-[var(--color-secondary)]" />
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-[var(--text-primary)]">
|
||||
{statsError ? 'N/A' : (statistics?.average_accuracy ? `${(100 - statistics.average_accuracy).toFixed(1)}%` : 'N/A')}
|
||||
</div>
|
||||
<div className="text-sm text-[var(--text-secondary)]">Precisión Promedio</div>
|
||||
</div>
|
||||
<TrendingUp className="w-8 h-8 text-[var(--color-primary)]" />
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Orphaned Models Warning */}
|
||||
{orphanedModels.length > 0 && (
|
||||
<Card className="p-4 bg-orange-50 border-orange-200">
|
||||
<div className="flex items-start gap-3">
|
||||
<AlertCircle className="w-5 h-5 text-orange-600 mt-0.5" />
|
||||
<div>
|
||||
<h4 className="font-medium text-orange-900 mb-1">
|
||||
Modelos Huérfanos Detectados
|
||||
</h4>
|
||||
<p className="text-sm text-orange-700">
|
||||
Se encontraron {orphanedModels.length} modelos entrenados para ingredientes que ya no existen en el inventario.
|
||||
Estos modelos pueden ser eliminados para optimizar el espacio de almacenamiento.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Filters */}
|
||||
<Card className="p-6">
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<div className="flex-1">
|
||||
<Input
|
||||
placeholder="Buscar ingrediente..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full sm:w-48">
|
||||
<Select
|
||||
value={statusFilter}
|
||||
onChange={(value) => setStatusFilter(value as string)}
|
||||
options={[
|
||||
{ value: 'all', label: 'Todos los estados' },
|
||||
{ value: 'no_model', label: 'Sin modelo' },
|
||||
{ value: 'active', label: 'Activo' },
|
||||
{ value: 'training', label: 'Entrenando' },
|
||||
{ value: 'error', label: 'Error' },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Models Table */}
|
||||
<Card>
|
||||
{filteredStatuses.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-12">
|
||||
<Brain className="w-12 h-12 text-[var(--color-secondary)] mb-4" />
|
||||
<h3 className="text-lg font-medium text-[var(--text-primary)] mb-2">
|
||||
No se encontraron ingredientes
|
||||
</h3>
|
||||
<p className="text-[var(--text-secondary)] text-center">
|
||||
No hay ingredientes que coincidan con los filtros aplicados.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<Table
|
||||
data={filteredStatuses}
|
||||
columns={tableColumns}
|
||||
/>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Training Modal */}
|
||||
<Modal
|
||||
isOpen={showTrainingModal}
|
||||
onClose={() => setShowTrainingModal(false)}
|
||||
title={`Entrenar Modelo - ${selectedIngredient?.name}`}
|
||||
size="lg"
|
||||
>
|
||||
<div className="space-y-6">
|
||||
<div className="p-4 bg-blue-50 rounded-lg">
|
||||
<h4 className="font-medium text-blue-900 mb-2">Configuración de Entrenamiento</h4>
|
||||
<p className="text-sm text-blue-700">
|
||||
Configure los parámetros para el entrenamiento del modelo de predicción de demanda.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2">Modo de Estacionalidad</label>
|
||||
<Select
|
||||
value={trainingSettings.seasonality_mode || 'additive'}
|
||||
onChange={(value) => setTrainingSettings(prev => ({ ...prev, seasonality_mode: value as any }))}
|
||||
options={[
|
||||
{ value: 'additive', label: 'Aditivo' },
|
||||
{ value: 'multiplicative', label: 'Multiplicativo' }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h4 className="font-medium text-sm">Patrones Estacionales</h4>
|
||||
|
||||
<label className="flex items-center space-x-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={trainingSettings.daily_seasonality || false}
|
||||
onChange={(e) => setTrainingSettings(prev => ({ ...prev, daily_seasonality: e.target.checked }))}
|
||||
className="rounded border-[var(--border-primary)]"
|
||||
/>
|
||||
<span className="text-sm">Estacionalidad diaria</span>
|
||||
</label>
|
||||
|
||||
<label className="flex items-center space-x-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={trainingSettings.weekly_seasonality || false}
|
||||
onChange={(e) => setTrainingSettings(prev => ({ ...prev, weekly_seasonality: e.target.checked }))}
|
||||
className="rounded border-[var(--border-primary)]"
|
||||
/>
|
||||
<span className="text-sm">Estacionalidad semanal</span>
|
||||
</label>
|
||||
|
||||
<label className="flex items-center space-x-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={trainingSettings.yearly_seasonality || false}
|
||||
onChange={(e) => setTrainingSettings(prev => ({ ...prev, yearly_seasonality: e.target.checked }))}
|
||||
className="rounded border-[var(--border-primary)]"
|
||||
/>
|
||||
<span className="text-sm">Estacionalidad anual</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end space-x-3 pt-4 border-t">
|
||||
<Button variant="outline" onClick={() => setShowTrainingModal(false)}>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleTrainModel}
|
||||
isLoading={trainMutation.isPending}
|
||||
leftIcon={<Play className="w-4 h-4" />}
|
||||
>
|
||||
Iniciar Entrenamiento
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
{/* Model Details Modal */}
|
||||
<Modal
|
||||
isOpen={showModelDetailsModal}
|
||||
onClose={() => setShowModelDetailsModal(false)}
|
||||
title={`Detalles del Modelo - ${selectedIngredient?.name}`}
|
||||
size="lg"
|
||||
>
|
||||
<div className="space-y-6">
|
||||
{selectedIngredient && (
|
||||
<ModelDetailsContent
|
||||
tenantId={tenantId}
|
||||
ingredientId={selectedIngredient.id}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Component for model details content
|
||||
const ModelDetailsContent: React.FC<{
|
||||
tenantId: string;
|
||||
ingredientId: string;
|
||||
}> = ({ tenantId, ingredientId }) => {
|
||||
const { data: activeModel } = useActiveModel(tenantId, ingredientId);
|
||||
|
||||
if (!activeModel) {
|
||||
return (
|
||||
<div className="text-center py-12">
|
||||
<AlertCircle className="w-16 h-16 text-[var(--color-warning)] mx-auto mb-4" />
|
||||
<h3 className="text-xl font-semibold mb-2 text-[var(--text-primary)]">No hay modelo disponible</h3>
|
||||
<p className="text-[var(--text-secondary)] max-w-md mx-auto">
|
||||
Este ingrediente no tiene un modelo entrenado disponible. Puedes entrenar uno nuevo usando el botón "Entrenar".
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const precision = activeModel.training_metrics?.mape
|
||||
? (100 - activeModel.training_metrics.mape).toFixed(1)
|
||||
: 'N/A';
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Model Overview */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="bg-gradient-to-br from-green-50 to-green-100 p-6 rounded-xl border border-green-200">
|
||||
<div className="text-center">
|
||||
<div className="text-3xl font-bold text-green-700 mb-1">
|
||||
{precision}%
|
||||
</div>
|
||||
<div className="text-sm font-medium text-green-600">Precisión</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-br from-blue-50 to-blue-100 p-6 rounded-xl border border-blue-200">
|
||||
<div className="text-center">
|
||||
<div className="text-3xl font-bold text-blue-700 mb-1">
|
||||
{activeModel.training_metrics?.mae?.toFixed(2) || 'N/A'}
|
||||
</div>
|
||||
<div className="text-sm font-medium text-blue-600">MAE</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-br from-purple-50 to-purple-100 p-6 rounded-xl border border-purple-200">
|
||||
<div className="text-center">
|
||||
<div className="text-3xl font-bold text-purple-700 mb-1">
|
||||
{activeModel.training_metrics?.rmse?.toFixed(2) || 'N/A'}
|
||||
</div>
|
||||
<div className="text-sm font-medium text-purple-600">RMSE</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Model Information */}
|
||||
<Card className="p-6 bg-[var(--bg-primary)]">
|
||||
<h4 className="text-lg font-semibold mb-6 text-[var(--text-primary)] flex items-center">
|
||||
<Brain className="w-5 h-5 mr-2 text-[var(--color-primary)]" />
|
||||
Información del Modelo
|
||||
</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="space-y-4">
|
||||
<div className="flex flex-col">
|
||||
<span className="text-xs font-semibold text-[var(--text-tertiary)] uppercase tracking-wide mb-1">
|
||||
Creado
|
||||
</span>
|
||||
<span className="text-sm text-[var(--text-primary)]">
|
||||
{new Date(activeModel.created_at).toLocaleString('es-ES', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col">
|
||||
<span className="text-xs font-semibold text-[var(--text-tertiary)] uppercase tracking-wide mb-1">
|
||||
Características usadas
|
||||
</span>
|
||||
<span className="text-sm text-[var(--text-primary)]">
|
||||
{activeModel.features_used?.length || 0} variables
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex flex-col">
|
||||
<span className="text-xs font-semibold text-[var(--text-tertiary)] uppercase tracking-wide mb-1">
|
||||
Período de entrenamiento
|
||||
</span>
|
||||
<span className="text-sm text-[var(--text-primary)]">
|
||||
{activeModel.training_period?.start_date && activeModel.training_period?.end_date
|
||||
? `${new Date(activeModel.training_period.start_date).toLocaleDateString('es-ES')} - ${new Date(activeModel.training_period.end_date).toLocaleDateString('es-ES')}`
|
||||
: 'No disponible'
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col">
|
||||
<span className="text-xs font-semibold text-[var(--text-tertiary)] uppercase tracking-wide mb-1">
|
||||
Hiperparámetros
|
||||
</span>
|
||||
<span className="text-sm text-[var(--text-primary)]">
|
||||
{Object.keys(activeModel.hyperparameters || {}).length} configurados
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Features Used */}
|
||||
{activeModel.features_used && activeModel.features_used.length > 0 && (
|
||||
<Card className="p-6 bg-[var(--bg-primary)]">
|
||||
<h4 className="text-lg font-semibold mb-4 text-[var(--text-primary)] flex items-center">
|
||||
<TrendingUp className="w-5 h-5 mr-2 text-[var(--color-primary)]" />
|
||||
Características del Modelo
|
||||
</h4>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
|
||||
{activeModel.features_used.map((feature: string, index: number) => (
|
||||
<div
|
||||
key={index}
|
||||
className="bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-lg px-3 py-2 text-center"
|
||||
>
|
||||
<span className="text-sm font-medium text-[var(--text-primary)]">
|
||||
{feature.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Training Performance */}
|
||||
{activeModel.training_metrics && (
|
||||
<Card className="p-6 bg-[var(--bg-primary)]">
|
||||
<h4 className="text-lg font-semibold mb-4 text-[var(--text-primary)] flex items-center">
|
||||
<CheckCircle className="w-5 h-5 mr-2 text-[var(--color-success)]" />
|
||||
Métricas de Rendimiento
|
||||
</h4>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div className="text-center p-4 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-primary)]">
|
||||
<div className="text-2xl font-bold text-[var(--color-success)] mb-1">
|
||||
{precision}%
|
||||
</div>
|
||||
<div className="text-xs text-[var(--text-tertiary)] uppercase tracking-wide">Precisión</div>
|
||||
</div>
|
||||
<div className="text-center p-4 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-primary)]">
|
||||
<div className="text-2xl font-bold text-[var(--text-primary)] mb-1">
|
||||
{activeModel.training_metrics.mae?.toFixed(2) || 'N/A'}
|
||||
</div>
|
||||
<div className="text-xs text-[var(--text-tertiary)] uppercase tracking-wide">MAE</div>
|
||||
</div>
|
||||
<div className="text-center p-4 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-primary)]">
|
||||
<div className="text-2xl font-bold text-[var(--text-primary)] mb-1">
|
||||
{activeModel.training_metrics.rmse?.toFixed(2) || 'N/A'}
|
||||
</div>
|
||||
<div className="text-xs text-[var(--text-tertiary)] uppercase tracking-wide">RMSE</div>
|
||||
</div>
|
||||
<div className="text-center p-4 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-primary)]">
|
||||
<div className="text-2xl font-bold text-[var(--text-primary)] mb-1">
|
||||
{activeModel.training_metrics.r2_score?.toFixed(3) || 'N/A'}
|
||||
</div>
|
||||
<div className="text-xs text-[var(--text-tertiary)] uppercase tracking-wide">R²</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ModelsConfigPage;
|
||||
1
frontend/src/pages/app/database/models/index.ts
Normal file
1
frontend/src/pages/app/database/models/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { default as ModelsConfigPage } from './ModelsConfigPage';
|
||||
@@ -8,6 +8,7 @@ import {
|
||||
useProcurementPlans,
|
||||
useCurrentProcurementPlan,
|
||||
useCriticalRequirements,
|
||||
usePlanRequirements,
|
||||
useGenerateProcurementPlan,
|
||||
useUpdateProcurementPlanStatus,
|
||||
useTriggerDailyScheduler
|
||||
@@ -22,6 +23,8 @@ const ProcurementPage: React.FC = () => {
|
||||
const [selectedPlan, setSelectedPlan] = useState<any>(null);
|
||||
const [editingPlan, setEditingPlan] = useState<any>(null);
|
||||
const [editFormData, setEditFormData] = useState<any>({});
|
||||
const [selectedPlanForRequirements, setSelectedPlanForRequirements] = useState<string | null>(null);
|
||||
const [showCriticalRequirements, setShowCriticalRequirements] = useState(false);
|
||||
|
||||
const { currentTenant } = useTenantStore();
|
||||
const tenantId = currentTenant?.id || '';
|
||||
@@ -36,6 +39,15 @@ const ProcurementPage: React.FC = () => {
|
||||
const { data: currentPlan, isLoading: isCurrentPlanLoading } = useCurrentProcurementPlan(tenantId);
|
||||
const { data: criticalRequirements, isLoading: isCriticalLoading } = useCriticalRequirements(tenantId);
|
||||
|
||||
// Get plan requirements for selected plan
|
||||
const { data: planRequirements, isLoading: isPlanRequirementsLoading } = usePlanRequirements({
|
||||
tenant_id: tenantId,
|
||||
plan_id: selectedPlanForRequirements || '',
|
||||
status: 'critical' // Only get critical requirements
|
||||
}, {
|
||||
enabled: !!selectedPlanForRequirements && !!tenantId
|
||||
});
|
||||
|
||||
const generatePlanMutation = useGenerateProcurementPlan();
|
||||
const updatePlanStatusMutation = useUpdateProcurementPlanStatus();
|
||||
const triggerSchedulerMutation = useTriggerDailyScheduler();
|
||||
@@ -107,6 +119,16 @@ const ProcurementPage: React.FC = () => {
|
||||
setEditFormData({});
|
||||
};
|
||||
|
||||
const handleShowCriticalRequirements = (planId: string) => {
|
||||
setSelectedPlanForRequirements(planId);
|
||||
setShowCriticalRequirements(true);
|
||||
};
|
||||
|
||||
const handleCloseCriticalRequirements = () => {
|
||||
setShowCriticalRequirements(false);
|
||||
setSelectedPlanForRequirements(null);
|
||||
};
|
||||
|
||||
if (!tenantId) {
|
||||
return (
|
||||
<div className="flex justify-center items-center h-64">
|
||||
@@ -391,6 +413,15 @@ const ProcurementPage: React.FC = () => {
|
||||
}
|
||||
});
|
||||
|
||||
// Show Critical Requirements button
|
||||
actions.push({
|
||||
label: 'Req. Críticos',
|
||||
icon: AlertCircle,
|
||||
variant: 'outline' as const,
|
||||
priority: 'secondary' as const,
|
||||
onClick: () => handleShowCriticalRequirements(plan.id)
|
||||
});
|
||||
|
||||
// Tertiary action: Cancel (least prominent, destructive)
|
||||
if (!['completed', 'cancelled'].includes(plan.status)) {
|
||||
actions.push({
|
||||
|
||||
@@ -33,6 +33,7 @@ const TeamPage = React.lazy(() => import('../pages/app/settings/team/TeamPage'))
|
||||
|
||||
// Database pages
|
||||
const DatabasePage = React.lazy(() => import('../pages/app/database/DatabasePage'));
|
||||
const ModelsConfigPage = React.lazy(() => import('../pages/app/database/models/ModelsConfigPage'));
|
||||
|
||||
// Data pages
|
||||
const WeatherPage = React.lazy(() => import('../pages/app/data/weather/WeatherPage'));
|
||||
@@ -176,6 +177,16 @@ export const AppRouter: React.FC = () => {
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/app/database/models"
|
||||
element={
|
||||
<ProtectedRoute>
|
||||
<AppShell>
|
||||
<ModelsConfigPage />
|
||||
</AppShell>
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Analytics Routes */}
|
||||
<Route
|
||||
|
||||
@@ -330,6 +330,16 @@ export const routesConfig: RouteConfig[] = [
|
||||
showInNavigation: true,
|
||||
showInBreadcrumbs: true,
|
||||
},
|
||||
{
|
||||
path: '/app/database/models',
|
||||
name: 'ModelsConfig',
|
||||
component: 'ModelsConfigPage',
|
||||
title: 'Modelos IA',
|
||||
icon: 'training',
|
||||
requiresAuth: true,
|
||||
showInNavigation: true,
|
||||
showInBreadcrumbs: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
|
||||
@@ -113,6 +113,12 @@ async def proxy_tenant_models(request: Request, tenant_id: str = Path(...), path
|
||||
target_path = f"/api/v1/tenants/{tenant_id}/models/{path}".rstrip("/")
|
||||
return await _proxy_to_training_service(request, target_path, tenant_id=tenant_id)
|
||||
|
||||
@router.api_route("/{tenant_id}/statistics", methods=["GET", "OPTIONS"])
|
||||
async def proxy_tenant_statistics(request: Request, tenant_id: str = Path(...)):
|
||||
"""Proxy tenant statistics requests to training service"""
|
||||
target_path = f"/api/v1/tenants/{tenant_id}/statistics"
|
||||
return await _proxy_to_training_service(request, target_path, tenant_id=tenant_id)
|
||||
|
||||
# ================================================================
|
||||
# TENANT-SCOPED FORECASTING SERVICE ENDPOINTS
|
||||
# ================================================================
|
||||
|
||||
@@ -12,7 +12,7 @@ import uuid
|
||||
from app.services.forecasting_service import EnhancedForecastingService
|
||||
from app.schemas.forecasts import (
|
||||
ForecastRequest, ForecastResponse, BatchForecastRequest,
|
||||
BatchForecastResponse
|
||||
BatchForecastResponse, MultiDayForecastResponse
|
||||
)
|
||||
from shared.auth.decorators import (
|
||||
get_current_user_dep,
|
||||
@@ -89,6 +89,70 @@ async def create_enhanced_single_forecast(
|
||||
)
|
||||
|
||||
|
||||
@router.post("/tenants/{tenant_id}/forecasts/multi-day", response_model=MultiDayForecastResponse)
|
||||
@track_execution_time("enhanced_multi_day_forecast_duration_seconds", "forecasting-service")
|
||||
async def create_enhanced_multi_day_forecast(
|
||||
request: ForecastRequest,
|
||||
tenant_id: str = Path(..., description="Tenant ID"),
|
||||
request_obj: Request = None,
|
||||
enhanced_forecasting_service: EnhancedForecastingService = Depends(get_enhanced_forecasting_service)
|
||||
):
|
||||
"""Generate multiple daily forecasts for the specified period using enhanced repository pattern"""
|
||||
metrics = get_metrics_collector(request_obj)
|
||||
|
||||
try:
|
||||
logger.info("Generating enhanced multi-day forecast",
|
||||
tenant_id=tenant_id,
|
||||
inventory_product_id=request.inventory_product_id,
|
||||
forecast_days=request.forecast_days,
|
||||
forecast_date=request.forecast_date.isoformat())
|
||||
|
||||
# Record metrics
|
||||
if metrics:
|
||||
metrics.increment_counter("enhanced_multi_day_forecasts_total")
|
||||
|
||||
# Validate forecast_days parameter
|
||||
if request.forecast_days <= 0 or request.forecast_days > 30:
|
||||
raise ValueError("forecast_days must be between 1 and 30")
|
||||
|
||||
# Generate multi-day forecast using enhanced service
|
||||
forecast_result = await enhanced_forecasting_service.generate_multi_day_forecast(
|
||||
tenant_id=tenant_id,
|
||||
request=request
|
||||
)
|
||||
|
||||
if metrics:
|
||||
metrics.increment_counter("enhanced_multi_day_forecasts_success_total")
|
||||
|
||||
logger.info("Enhanced multi-day forecast generated successfully",
|
||||
tenant_id=tenant_id,
|
||||
inventory_product_id=request.inventory_product_id,
|
||||
forecast_days=len(forecast_result.get("forecasts", [])))
|
||||
|
||||
return MultiDayForecastResponse(**forecast_result)
|
||||
|
||||
except ValueError as e:
|
||||
if metrics:
|
||||
metrics.increment_counter("enhanced_multi_day_forecast_validation_errors_total")
|
||||
logger.error("Enhanced multi-day forecast validation error",
|
||||
error=str(e),
|
||||
tenant_id=tenant_id)
|
||||
raise HTTPException(
|
||||
status_code=status.HTTP_400_BAD_REQUEST,
|
||||
detail=str(e)
|
||||
)
|
||||
except Exception as e:
|
||||
if metrics:
|
||||
metrics.increment_counter("enhanced_multi_day_forecasts_errors_total")
|
||||
logger.error("Enhanced multi-day forecast generation failed",
|
||||
error=str(e),
|
||||
tenant_id=tenant_id)
|
||||
raise HTTPException(
|
||||
status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
|
||||
detail="Enhanced multi-day forecast generation failed"
|
||||
)
|
||||
|
||||
|
||||
@router.post("/tenants/{tenant_id}/forecasts/batch", response_model=BatchForecastResponse)
|
||||
@track_execution_time("enhanced_batch_forecast_duration_seconds", "forecasting-service")
|
||||
async def create_enhanced_batch_forecast(
|
||||
|
||||
@@ -95,4 +95,15 @@ class BatchForecastResponse(BaseModel):
|
||||
forecasts: Optional[List[ForecastResponse]]
|
||||
error_message: Optional[str]
|
||||
|
||||
class MultiDayForecastResponse(BaseModel):
|
||||
"""Response schema for multi-day forecast results"""
|
||||
tenant_id: str = Field(..., description="Tenant ID")
|
||||
inventory_product_id: str = Field(..., description="Inventory product ID")
|
||||
forecast_start_date: date = Field(..., description="Start date of forecast period")
|
||||
forecast_days: int = Field(..., description="Number of forecasted days")
|
||||
forecasts: List[ForecastResponse] = Field(..., description="Daily forecasts")
|
||||
total_predicted_demand: float = Field(..., description="Total demand across all days")
|
||||
average_confidence_level: float = Field(..., description="Average confidence across all days")
|
||||
processing_time_ms: int = Field(..., description="Total processing time")
|
||||
|
||||
|
||||
|
||||
@@ -346,6 +346,100 @@ class EnhancedForecastingService:
|
||||
processing_time=processing_time)
|
||||
raise
|
||||
|
||||
async def generate_multi_day_forecast(
|
||||
self,
|
||||
tenant_id: str,
|
||||
request: ForecastRequest
|
||||
) -> Dict[str, Any]:
|
||||
"""
|
||||
Generate multiple daily forecasts for the specified period.
|
||||
"""
|
||||
start_time = datetime.utcnow()
|
||||
forecasts = []
|
||||
|
||||
try:
|
||||
logger.info("Generating multi-day forecast",
|
||||
tenant_id=tenant_id,
|
||||
inventory_product_id=request.inventory_product_id,
|
||||
forecast_days=request.forecast_days,
|
||||
start_date=request.forecast_date.isoformat())
|
||||
|
||||
# Generate a forecast for each day
|
||||
for day_offset in range(request.forecast_days):
|
||||
# Calculate the forecast date for this day
|
||||
current_date = request.forecast_date
|
||||
if isinstance(current_date, str):
|
||||
from dateutil.parser import parse
|
||||
current_date = parse(current_date).date()
|
||||
|
||||
if day_offset > 0:
|
||||
from datetime import timedelta
|
||||
current_date = current_date + timedelta(days=day_offset)
|
||||
|
||||
# Create a new request for this specific day
|
||||
daily_request = ForecastRequest(
|
||||
inventory_product_id=request.inventory_product_id,
|
||||
forecast_date=current_date,
|
||||
forecast_days=1, # Single day for each iteration
|
||||
location=request.location,
|
||||
confidence_level=request.confidence_level
|
||||
)
|
||||
|
||||
# Generate forecast for this day
|
||||
daily_forecast = await self.generate_forecast(tenant_id, daily_request)
|
||||
forecasts.append(daily_forecast)
|
||||
|
||||
# Calculate summary statistics
|
||||
total_demand = sum(f.predicted_demand for f in forecasts)
|
||||
avg_confidence = sum(f.confidence_level for f in forecasts) / len(forecasts)
|
||||
processing_time = int((datetime.utcnow() - start_time).total_seconds() * 1000)
|
||||
|
||||
# Convert forecasts to dictionary format for the response
|
||||
forecast_dicts = []
|
||||
for forecast in forecasts:
|
||||
forecast_dicts.append({
|
||||
"id": forecast.id,
|
||||
"tenant_id": forecast.tenant_id,
|
||||
"inventory_product_id": forecast.inventory_product_id,
|
||||
"location": forecast.location,
|
||||
"forecast_date": forecast.forecast_date.isoformat() if hasattr(forecast.forecast_date, 'isoformat') else str(forecast.forecast_date),
|
||||
"predicted_demand": forecast.predicted_demand,
|
||||
"confidence_lower": forecast.confidence_lower,
|
||||
"confidence_upper": forecast.confidence_upper,
|
||||
"confidence_level": forecast.confidence_level,
|
||||
"model_id": forecast.model_id,
|
||||
"model_version": forecast.model_version,
|
||||
"algorithm": forecast.algorithm,
|
||||
"business_type": forecast.business_type,
|
||||
"is_holiday": forecast.is_holiday,
|
||||
"is_weekend": forecast.is_weekend,
|
||||
"day_of_week": forecast.day_of_week,
|
||||
"weather_temperature": forecast.weather_temperature,
|
||||
"weather_precipitation": forecast.weather_precipitation,
|
||||
"weather_description": forecast.weather_description,
|
||||
"traffic_volume": forecast.traffic_volume,
|
||||
"created_at": forecast.created_at.isoformat() if hasattr(forecast.created_at, 'isoformat') else str(forecast.created_at),
|
||||
"processing_time_ms": forecast.processing_time_ms,
|
||||
"features_used": forecast.features_used
|
||||
})
|
||||
|
||||
return {
|
||||
"tenant_id": tenant_id,
|
||||
"inventory_product_id": request.inventory_product_id,
|
||||
"forecast_start_date": request.forecast_date.isoformat() if hasattr(request.forecast_date, 'isoformat') else str(request.forecast_date),
|
||||
"forecast_days": request.forecast_days,
|
||||
"forecasts": forecast_dicts,
|
||||
"total_predicted_demand": total_demand,
|
||||
"average_confidence_level": avg_confidence,
|
||||
"processing_time_ms": processing_time
|
||||
}
|
||||
|
||||
except Exception as e:
|
||||
logger.error("Multi-day forecast generation failed",
|
||||
tenant_id=tenant_id,
|
||||
error=str(e))
|
||||
raise
|
||||
|
||||
async def get_forecast_history(
|
||||
self,
|
||||
tenant_id: str,
|
||||
|
||||
Reference in New Issue
Block a user