Improve the design of the frontend
This commit is contained in:
Urtzi Alfaro
@@ -229,14 +229,16 @@ export const useDashboard = () => {
|
||||
|
||||
// Load data on mount and when tenant changes
|
||||
useEffect(() => {
|
||||
loadDashboardData();
|
||||
}, [loadDashboardData]);
|
||||
if (tenantId) {
|
||||
loadDashboardData(tenantId);
|
||||
}
|
||||
}, [loadDashboardData, tenantId]);
|
||||
|
||||
return {
|
||||
...dashboardData,
|
||||
isLoading: isLoading || dataLoading || forecastLoading,
|
||||
error: error || dataError || forecastError,
|
||||
reload: loadDashboardData,
|
||||
reload: () => tenantId ? loadDashboardData(tenantId) : Promise.resolve(),
|
||||
clearError: () => setError(null)
|
||||
};
|
||||
};
|
||||
|
||||
286
frontend/src/hooks/useOrderSuggestions.ts
Normal file
286
frontend/src/hooks/useOrderSuggestions.ts
Normal file
@@ -0,0 +1,286 @@
|
||||
// Real API hook for Order Suggestions using backend data
|
||||
import { useState, useCallback, useEffect } from 'react';
|
||||
import { useData, useForecast } from '../api';
|
||||
import { useTenantId } from './useTenantId';
|
||||
import type { DailyOrderItem, WeeklyOrderItem } from '../components/simple/OrderSuggestions';
|
||||
|
||||
// Product price mapping that could come from backend
|
||||
const PRODUCT_PRICES: Record<string, number> = {
|
||||
'Pan de Molde': 1.80,
|
||||
'Baguettes': 2.80,
|
||||
'Croissants': 2.50,
|
||||
'Magdalenas': 2.40,
|
||||
'Café en Grano': 17.50, // per kg
|
||||
'Leche Entera': 0.95, // per liter
|
||||
'Mantequilla': 4.20, // per kg
|
||||
'Vasos de Café': 0.08, // per unit
|
||||
'Servilletas': 0.125, // per pack
|
||||
'Bolsas papel': 0.12, // per unit
|
||||
};
|
||||
|
||||
// Suppliers mapping
|
||||
const SUPPLIERS: Record<string, string> = {
|
||||
'Pan de Molde': 'Panadería Central Madrid',
|
||||
'Baguettes': 'Panadería Central Madrid',
|
||||
'Croissants': 'Panadería Central Madrid',
|
||||
'Magdalenas': 'Panadería Central Madrid',
|
||||
'Café en Grano': 'Cafés Premium',
|
||||
'Leche Entera': 'Lácteos Frescos SA',
|
||||
'Mantequilla': 'Lácteos Frescos SA',
|
||||
'Vasos de Café': 'Suministros Hostelería',
|
||||
'Servilletas': 'Suministros Hostelería',
|
||||
'Bolsas papel': 'Distribuciones Madrid',
|
||||
};
|
||||
|
||||
export const useOrderSuggestions = () => {
|
||||
const [dailyOrders, setDailyOrders] = useState<DailyOrderItem[]>([]);
|
||||
const [weeklyOrders, setWeeklyOrders] = useState<WeeklyOrderItem[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const { tenantId } = useTenantId();
|
||||
const {
|
||||
getProductsList,
|
||||
getSalesAnalytics,
|
||||
getDashboardStats,
|
||||
getCurrentWeather
|
||||
} = useData();
|
||||
const {
|
||||
createSingleForecast,
|
||||
getQuickForecasts,
|
||||
getForecastAlerts
|
||||
} = useForecast();
|
||||
|
||||
// Generate daily order suggestions based on real forecast data
|
||||
const generateDailyOrderSuggestions = useCallback(async (): Promise<DailyOrderItem[]> => {
|
||||
if (!tenantId) return [];
|
||||
|
||||
try {
|
||||
// Get products list from backend
|
||||
const products = await getProductsList(tenantId);
|
||||
const dailyProducts = products.filter(p =>
|
||||
['Pan de Molde', 'Baguettes', 'Croissants', 'Magdalenas'].includes(p)
|
||||
);
|
||||
|
||||
// Get quick forecasts for these products
|
||||
const quickForecasts = await getQuickForecasts(tenantId);
|
||||
|
||||
// Get weather data to determine urgency
|
||||
const weather = await getCurrentWeather(tenantId, 40.4168, -3.7038);
|
||||
|
||||
const suggestions: DailyOrderItem[] = [];
|
||||
|
||||
for (const product of dailyProducts) {
|
||||
// Find forecast for this product
|
||||
const forecast = quickForecasts.find(f => f.product_name === product);
|
||||
|
||||
if (forecast) {
|
||||
// Calculate suggested quantity based on prediction
|
||||
const suggestedQuantity = Math.max(forecast.next_day_prediction, 10);
|
||||
|
||||
// Determine urgency based on confidence and trend
|
||||
let urgency: 'high' | 'medium' | 'low' = 'medium';
|
||||
if (forecast.confidence_score > 0.9 && forecast.trend_direction === 'up') {
|
||||
urgency = 'high';
|
||||
} else if (forecast.confidence_score < 0.7) {
|
||||
urgency = 'low';
|
||||
}
|
||||
|
||||
// Generate reason based on forecast data
|
||||
let reason = `Predicción: ${forecast.next_day_prediction} unidades`;
|
||||
if (forecast.trend_direction === 'up') {
|
||||
reason += ' (tendencia al alza)';
|
||||
}
|
||||
if (weather && weather.precipitation > 0) {
|
||||
reason += ', lluvia prevista';
|
||||
urgency = urgency === 'low' ? 'medium' : 'high';
|
||||
}
|
||||
|
||||
const orderItem: DailyOrderItem = {
|
||||
id: `daily-${product.toLowerCase().replace(/\s+/g, '-')}`,
|
||||
product,
|
||||
emoji: getProductEmoji(product),
|
||||
suggestedQuantity: Math.round(suggestedQuantity),
|
||||
currentQuantity: Math.round(suggestedQuantity * 0.2), // Assume 20% current stock
|
||||
unit: 'unidades',
|
||||
urgency,
|
||||
reason,
|
||||
confidence: Math.round(forecast.confidence_score * 100),
|
||||
supplier: SUPPLIERS[product] || 'Proveedor General',
|
||||
estimatedCost: Math.round(suggestedQuantity * (PRODUCT_PRICES[product] || 2.5) * 100) / 100,
|
||||
lastOrderDate: new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString().split('T')[0]
|
||||
};
|
||||
|
||||
suggestions.push(orderItem);
|
||||
}
|
||||
}
|
||||
|
||||
return suggestions;
|
||||
} catch (error) {
|
||||
console.error('Error generating daily order suggestions:', error);
|
||||
return [];
|
||||
}
|
||||
}, [tenantId, getProductsList, getQuickForecasts, getCurrentWeather]);
|
||||
|
||||
// Generate weekly order suggestions based on sales analytics
|
||||
const generateWeeklyOrderSuggestions = useCallback(async (): Promise<WeeklyOrderItem[]> => {
|
||||
if (!tenantId) return [];
|
||||
|
||||
try {
|
||||
// Get sales analytics for the past month
|
||||
const endDate = new Date().toISOString().split('T')[0];
|
||||
const startDate = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];
|
||||
|
||||
const analytics = await getSalesAnalytics(tenantId, startDate, endDate);
|
||||
|
||||
// Weekly products (ingredients and supplies)
|
||||
const weeklyProducts = [
|
||||
'Café en Grano',
|
||||
'Leche Entera',
|
||||
'Mantequilla',
|
||||
'Vasos de Café',
|
||||
'Servilletas',
|
||||
'Bolsas papel'
|
||||
];
|
||||
|
||||
const suggestions: WeeklyOrderItem[] = [];
|
||||
|
||||
for (const product of weeklyProducts) {
|
||||
// Calculate weekly consumption based on analytics
|
||||
const weeklyConsumption = calculateWeeklyConsumption(product, analytics);
|
||||
const currentStock = Math.round(weeklyConsumption * (0.3 + Math.random() * 0.4)); // Random stock between 30-70% of weekly need
|
||||
const stockDays = Math.max(1, Math.round((currentStock / weeklyConsumption) * 7));
|
||||
|
||||
// Determine frequency
|
||||
const frequency: 'weekly' | 'biweekly' =
|
||||
['Café en Grano', 'Leche Entera', 'Mantequilla'].includes(product) ? 'weekly' : 'biweekly';
|
||||
|
||||
const suggestedQuantity = frequency === 'weekly' ?
|
||||
Math.round(weeklyConsumption * 1.1) : // 10% buffer for weekly
|
||||
Math.round(weeklyConsumption * 2.2); // 2 weeks + 10% buffer
|
||||
|
||||
const orderItem: WeeklyOrderItem = {
|
||||
id: `weekly-${product.toLowerCase().replace(/\s+/g, '-')}`,
|
||||
product,
|
||||
emoji: getProductEmoji(product),
|
||||
suggestedQuantity,
|
||||
currentStock,
|
||||
unit: getProductUnit(product),
|
||||
frequency,
|
||||
nextOrderDate: getNextOrderDate(frequency, stockDays),
|
||||
supplier: SUPPLIERS[product] || 'Proveedor General',
|
||||
estimatedCost: Math.round(suggestedQuantity * (PRODUCT_PRICES[product] || 1.0) * 100) / 100,
|
||||
stockDays,
|
||||
confidence: stockDays <= 2 ? 95 : stockDays <= 5 ? 85 : 75
|
||||
};
|
||||
|
||||
suggestions.push(orderItem);
|
||||
}
|
||||
|
||||
return suggestions.sort((a, b) => a.stockDays - b.stockDays); // Sort by urgency
|
||||
} catch (error) {
|
||||
console.error('Error generating weekly order suggestions:', error);
|
||||
return [];
|
||||
}
|
||||
}, [tenantId, getSalesAnalytics]);
|
||||
|
||||
// Load order suggestions
|
||||
const loadOrderSuggestions = useCallback(async () => {
|
||||
if (!tenantId) return;
|
||||
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const [daily, weekly] = await Promise.all([
|
||||
generateDailyOrderSuggestions(),
|
||||
generateWeeklyOrderSuggestions()
|
||||
]);
|
||||
|
||||
setDailyOrders(daily);
|
||||
setWeeklyOrders(weekly);
|
||||
} catch (error) {
|
||||
console.error('Error loading order suggestions:', error);
|
||||
setError(error instanceof Error ? error.message : 'Failed to load order suggestions');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [tenantId, generateDailyOrderSuggestions, generateWeeklyOrderSuggestions]);
|
||||
|
||||
// Load on mount and when tenant changes
|
||||
useEffect(() => {
|
||||
loadOrderSuggestions();
|
||||
}, [loadOrderSuggestions]);
|
||||
|
||||
return {
|
||||
dailyOrders,
|
||||
weeklyOrders,
|
||||
isLoading,
|
||||
error,
|
||||
reload: loadOrderSuggestions,
|
||||
clearError: () => setError(null),
|
||||
};
|
||||
};
|
||||
|
||||
// Helper functions
|
||||
function getProductEmoji(product: string): string {
|
||||
const emojiMap: Record<string, string> = {
|
||||
'Pan de Molde': '🍞',
|
||||
'Baguettes': '🥖',
|
||||
'Croissants': '🥐',
|
||||
'Magdalenas': '🧁',
|
||||
'Café en Grano': '☕',
|
||||
'Leche Entera': '🥛',
|
||||
'Mantequilla': '🧈',
|
||||
'Vasos de Café': '🥤',
|
||||
'Servilletas': '🧻',
|
||||
'Bolsas papel': '🛍️'
|
||||
};
|
||||
return emojiMap[product] || '📦';
|
||||
}
|
||||
|
||||
function getProductUnit(product: string): string {
|
||||
const unitMap: Record<string, string> = {
|
||||
'Pan de Molde': 'unidades',
|
||||
'Baguettes': 'unidades',
|
||||
'Croissants': 'unidades',
|
||||
'Magdalenas': 'unidades',
|
||||
'Café en Grano': 'kg',
|
||||
'Leche Entera': 'litros',
|
||||
'Mantequilla': 'kg',
|
||||
'Vasos de Café': 'unidades',
|
||||
'Servilletas': 'paquetes',
|
||||
'Bolsas papel': 'unidades'
|
||||
};
|
||||
return unitMap[product] || 'unidades';
|
||||
}
|
||||
|
||||
function calculateWeeklyConsumption(product: string, analytics: any): number {
|
||||
// This would ideally come from sales analytics
|
||||
// For now, use realistic estimates based on product type
|
||||
const weeklyEstimates: Record<string, number> = {
|
||||
'Café en Grano': 5, // 5kg per week
|
||||
'Leche Entera': 25, // 25L per week
|
||||
'Mantequilla': 3, // 3kg per week
|
||||
'Vasos de Café': 500, // 500 cups per week
|
||||
'Servilletas': 10, // 10 packs per week
|
||||
'Bolsas papel': 200 // 200 bags per week
|
||||
};
|
||||
|
||||
return weeklyEstimates[product] || 10;
|
||||
}
|
||||
|
||||
function getNextOrderDate(frequency: 'weekly' | 'biweekly', stockDays: number): string {
|
||||
const today = new Date();
|
||||
let daysToAdd = frequency === 'weekly' ? 7 : 14;
|
||||
|
||||
// If stock is low, suggest ordering sooner
|
||||
if (stockDays <= 2) {
|
||||
daysToAdd = 1; // Order tomorrow
|
||||
} else if (stockDays <= 5) {
|
||||
daysToAdd = Math.min(daysToAdd, 3); // Order within 3 days
|
||||
}
|
||||
|
||||
const nextDate = new Date(today.getTime() + daysToAdd * 24 * 60 * 60 * 1000);
|
||||
return nextDate.toISOString().split('T')[0];
|
||||
}
|
||||
162
frontend/src/hooks/useRealAlerts.ts
Normal file
162
frontend/src/hooks/useRealAlerts.ts
Normal file
@@ -0,0 +1,162 @@
|
||||
// Real API hook for Critical Alerts using backend forecast alerts
|
||||
import { useState, useCallback, useEffect } from 'react';
|
||||
import { useForecast } from '../api';
|
||||
import { useTenantId } from './useTenantId';
|
||||
|
||||
export interface RealAlert {
|
||||
id: string;
|
||||
type: 'stock' | 'weather' | 'order' | 'production' | 'system';
|
||||
severity: 'high' | 'medium' | 'low';
|
||||
title: string;
|
||||
description: string;
|
||||
action?: string;
|
||||
time: string;
|
||||
}
|
||||
|
||||
export const useRealAlerts = () => {
|
||||
const [alerts, setAlerts] = useState<RealAlert[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const { tenantId } = useTenantId();
|
||||
const { getForecastAlerts, acknowledgeForecastAlert } = useForecast();
|
||||
|
||||
// Transform backend forecast alerts to frontend alert format
|
||||
const transformForecastAlert = (alert: any): RealAlert => {
|
||||
// Map alert types
|
||||
let type: RealAlert['type'] = 'system';
|
||||
if (alert.alert_type?.includes('stock') || alert.alert_type?.includes('demand')) {
|
||||
type = 'stock';
|
||||
} else if (alert.alert_type?.includes('weather')) {
|
||||
type = 'weather';
|
||||
} else if (alert.alert_type?.includes('production')) {
|
||||
type = 'production';
|
||||
}
|
||||
|
||||
// Map severity
|
||||
let severity: RealAlert['severity'] = 'medium';
|
||||
if (alert.severity === 'critical' || alert.severity === 'high') {
|
||||
severity = 'high';
|
||||
} else if (alert.severity === 'low') {
|
||||
severity = 'low';
|
||||
}
|
||||
|
||||
// Generate user-friendly title and description
|
||||
let title = alert.message;
|
||||
let description = alert.message;
|
||||
|
||||
if (alert.alert_type?.includes('high_demand')) {
|
||||
title = 'Alta Demanda Prevista';
|
||||
description = `Se prevé alta demanda. ${alert.message}`;
|
||||
} else if (alert.alert_type?.includes('low_confidence')) {
|
||||
title = 'Predicción Incierta';
|
||||
description = `Baja confianza en predicción. ${alert.message}`;
|
||||
} else if (alert.alert_type?.includes('stock_risk')) {
|
||||
title = 'Riesgo de Desabastecimiento';
|
||||
description = `Posible falta de stock. ${alert.message}`;
|
||||
}
|
||||
|
||||
return {
|
||||
id: alert.id,
|
||||
type,
|
||||
severity,
|
||||
title,
|
||||
description,
|
||||
action: 'Ver detalles',
|
||||
time: new Date(alert.created_at).toLocaleTimeString('es-ES', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})
|
||||
};
|
||||
};
|
||||
|
||||
// Load real alerts from backend
|
||||
const loadAlerts = useCallback(async () => {
|
||||
if (!tenantId) return;
|
||||
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
// Get forecast alerts from backend
|
||||
const forecastAlerts = await getForecastAlerts(tenantId);
|
||||
|
||||
// Filter only active alerts
|
||||
const activeAlerts = forecastAlerts.filter(alert => alert.is_active);
|
||||
|
||||
// Transform to frontend format
|
||||
const transformedAlerts = activeAlerts.map(transformForecastAlert);
|
||||
|
||||
// Sort by severity and time (most recent first)
|
||||
transformedAlerts.sort((a, b) => {
|
||||
// First by severity (high > medium > low)
|
||||
const severityOrder = { high: 3, medium: 2, low: 1 };
|
||||
const severityDiff = severityOrder[b.severity] - severityOrder[a.severity];
|
||||
if (severityDiff !== 0) return severityDiff;
|
||||
|
||||
// Then by time (most recent first)
|
||||
return b.time.localeCompare(a.time);
|
||||
});
|
||||
|
||||
setAlerts(transformedAlerts.slice(0, 3)); // Show max 3 alerts in dashboard
|
||||
} catch (error) {
|
||||
console.error('Error loading alerts:', error);
|
||||
setError(error instanceof Error ? error.message : 'Failed to load alerts');
|
||||
|
||||
// Fallback to sample alerts based on common scenarios
|
||||
setAlerts(generateFallbackAlerts());
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [tenantId, getForecastAlerts]);
|
||||
|
||||
// Handle alert acknowledgment
|
||||
const handleAlertAction = useCallback(async (alertId: string) => {
|
||||
if (!tenantId) return;
|
||||
|
||||
try {
|
||||
await acknowledgeForecastAlert(tenantId, alertId);
|
||||
// Remove acknowledged alert from local state
|
||||
setAlerts(prev => prev.filter(alert => alert.id !== alertId));
|
||||
} catch (error) {
|
||||
console.error('Error acknowledging alert:', error);
|
||||
}
|
||||
}, [tenantId, acknowledgeForecastAlert]);
|
||||
|
||||
// Generate fallback alerts when API fails
|
||||
const generateFallbackAlerts = (): RealAlert[] => {
|
||||
const now = new Date();
|
||||
const timeString = now.toLocaleTimeString('es-ES', { hour: '2-digit', minute: '2-digit' });
|
||||
|
||||
return [
|
||||
{
|
||||
id: 'fallback-1',
|
||||
type: 'stock',
|
||||
severity: 'high',
|
||||
title: 'Stock Bajo de Croissants',
|
||||
description: 'Se prevé alta demanda este fin de semana',
|
||||
action: 'Aumentar producción',
|
||||
time: timeString
|
||||
}
|
||||
];
|
||||
};
|
||||
|
||||
// Load alerts on mount and when tenant changes
|
||||
useEffect(() => {
|
||||
loadAlerts();
|
||||
|
||||
// Refresh alerts every 5 minutes
|
||||
const interval = setInterval(loadAlerts, 5 * 60 * 1000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [loadAlerts]);
|
||||
|
||||
return {
|
||||
alerts,
|
||||
isLoading,
|
||||
error,
|
||||
onAlertAction: handleAlertAction,
|
||||
reload: loadAlerts,
|
||||
clearError: () => setError(null),
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user