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

Fix and UI imporvements 2

Browse Source
This commit is contained in:
Urtzi Alfaro
2025-12-09 13:45:09 +01:00
parent 508f4569b9
commit 46f5158536
6 changed files with 286 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
frontend/src/components/dashboard/NetworkSummaryCards.tsx
View File

@@ -43,10 +43,10 @@ const NetworkSummaryCards: React.FC<NetworkSummaryCardsProps> = ({
{[...Array(5)].map((_, index) => (
<Card key={index} className="animate-pulse">
<CardHeader className="pb-3">
<CardTitle className="text-sm text-gray-500 h-4 bg-gray-200 rounded w-3/4"></CardTitle>
<CardTitle className="text-sm text-[var(--text-tertiary)] h-4 bg-[var(--bg-tertiary)] rounded w-3/4"></CardTitle>
</CardHeader>
<CardContent>
<div className="h-6 bg-gray-200 rounded w-1/2"></div>
<div className="h-6 bg-[var(--bg-tertiary)] rounded w-1/2"></div>
</CardContent>
</Card>
))}
@@ -56,7 +56,7 @@ const NetworkSummaryCards: React.FC<NetworkSummaryCardsProps> = ({
if (!data) {
return (
<div className="text-center py-8 text-gray-500">
<div className="text-center py-8 text-[var(--text-secondary)]">
{t('enterprise.no_network_data')}
</div>
);
@@ -67,16 +67,16 @@ const NetworkSummaryCards: React.FC<NetworkSummaryCardsProps> = ({
{/* Network Outlets Card */}
<Card>
<CardHeader className="flex flex-row items-center justify-between pb-2">
<CardTitle className="text-sm font-medium text-gray-500">
<CardTitle className="text-sm font-medium text-[var(--text-secondary)]">
{t('enterprise.network_outlets')}
</CardTitle>
<StoreIcon className="w-4 h-4 text-blue-500" />
<StoreIcon className="w-5 h-5 text-[var(--color-primary)]" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold text-gray-900">
<div className="text-2xl font-bold text-[var(--text-primary)]">
{data.child_tenant_count}
</div>
<p className="text-xs text-gray-500 mt-1">
<p className="text-xs text-[var(--text-secondary)] mt-1">
{t('enterprise.outlets_in_network')}
</p>
</CardContent>
@@ -85,16 +85,16 @@ const NetworkSummaryCards: React.FC<NetworkSummaryCardsProps> = ({
{/* Network Sales Card */}
<Card>
<CardHeader className="flex flex-row items-center justify-between pb-2">
<CardTitle className="text-sm font-medium text-gray-500">
<CardTitle className="text-sm font-medium text-[var(--text-secondary)]">
{t('enterprise.network_sales')}
</CardTitle>
<DollarSign className="w-4 h-4 text-green-500" />
<DollarSign className="w-5 h-5 text-[var(--color-success)]" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold text-gray-900">
<div className="text-2xl font-bold text-[var(--text-primary)]">
{formatCurrency(data.network_sales_30d, 'EUR')}
</div>
<p className="text-xs text-gray-500 mt-1">
<p className="text-xs text-[var(--text-secondary)] mt-1">
{t('enterprise.last_30_days')}
</p>
</CardContent>
@@ -103,16 +103,16 @@ const NetworkSummaryCards: React.FC<NetworkSummaryCardsProps> = ({
{/* Production Volume Card */}
<Card>
<CardHeader className="flex flex-row items-center justify-between pb-2">
<CardTitle className="text-sm font-medium text-gray-500">
<CardTitle className="text-sm font-medium text-[var(--text-secondary)]">
{t('enterprise.production_volume')}
</CardTitle>
<Package className="w-4 h-4 text-purple-500" />
<Package className="w-5 h-5 text-[var(--color-secondary)]" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold text-gray-900">
<div className="text-2xl font-bold text-[var(--text-primary)]">
{new Intl.NumberFormat('es-ES').format(data.production_volume_30d)} kg
</div>
<p className="text-xs text-gray-500 mt-1">
<p className="text-xs text-[var(--text-secondary)] mt-1">
{t('enterprise.last_30_days')}
</p>
</CardContent>
@@ -121,16 +121,16 @@ const NetworkSummaryCards: React.FC<NetworkSummaryCardsProps> = ({
{/* Pending Internal Transfers Card */}
<Card>
<CardHeader className="flex flex-row items-center justify-between pb-2">
<CardTitle className="text-sm font-medium text-gray-500">
<CardTitle className="text-sm font-medium text-[var(--text-secondary)]">
{t('enterprise.pending_orders')}
</CardTitle>
<ShoppingCart className="w-4 h-4 text-yellow-500" />
<ShoppingCart className="w-5 h-5 text-[var(--color-warning)]" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold text-gray-900">
<div className="text-2xl font-bold text-[var(--text-primary)]">
{data.pending_internal_transfers_count}
</div>
<p className="text-xs text-gray-500 mt-1">
<p className="text-xs text-[var(--text-secondary)] mt-1">
{t('enterprise.internal_transfers')}
</p>
</CardContent>
@@ -139,16 +139,16 @@ const NetworkSummaryCards: React.FC<NetworkSummaryCardsProps> = ({
{/* Active Shipments Card */}
<Card>
<CardHeader className="flex flex-row items-center justify-between pb-2">
<CardTitle className="text-sm font-medium text-gray-500">
<CardTitle className="text-sm font-medium text-[var(--text-secondary)]">
{t('enterprise.active_shipments')}
</CardTitle>
<Truck className="w-4 h-4 text-red-500" />
<Truck className="w-5 h-5 text-[var(--color-info)]" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold text-gray-900">
<div className="text-2xl font-bold text-[var(--text-primary)]">
{data.active_shipments_count}
</div>
<p className="text-xs text-gray-500 mt-1">
<p className="text-xs text-[var(--text-secondary)] mt-1">
{t('enterprise.today')}
</p>
</CardContent>

54
frontend/src/components/dashboard/UnifiedActionQueueCard.tsx
View File

@@ -133,6 +133,10 @@ function getActionLabelKey(actionType: string, metadata?: Record<string, any>):
key: 'alerts:actions.reject_po',
extractParams: () => ({})
},
'modify_po': {
key: 'alerts:actions.modify_po',
extractParams: () => ({})
},
'view_po_details': {
key: 'alerts:actions.view_po_details',
extractParams: () => ({})
@@ -252,6 +256,17 @@ function ActionCard({ alert, showEscalationBadge = false, onActionSuccess, onAct
// Determine if this is a critical alert that needs stronger visual treatment
const isCritical = alert.priority_level === 'critical' || alert.priority_level === 'CRITICAL';
// Detect if this is an AI-generated PO
const isAIGeneratedPO = alert.event_type?.includes('po') &&
(alert.orchestrator_context?.already_addressed ||
alert.orchestrator_context?.action_type === 'create_po' ||
alert.event_metadata?.source === 'orchestrator' ||
alert.event_metadata?.auto_generated === true ||
alert.event_metadata?.reasoning_data?.metadata?.ai_assisted === true ||
alert.event_metadata?.reasoning_data?.metadata?.trigger_source === 'orchestrator_auto' ||
alert.ai_reasoning?.details?.metadata?.ai_assisted === true ||
alert.ai_reasoning?.details?.metadata?.trigger_source === 'orchestrator_auto');
// Extract reasoning from alert using new rendering utility
const reasoningText = renderAIReasoning(alert, t) || '';
@@ -294,6 +309,16 @@ function ActionCard({ alert, showEscalationBadge = false, onActionSuccess, onAct
)}
</div>
{/* AI-Generated PO Badge */}
{isAIGeneratedPO && (
<div className="mb-2">
<div className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-semibold bg-gradient-to-r from-[var(--color-info-100)] to-[var(--color-success-100)] text-[var(--color-info-900)] border-2 border-[var(--color-info-300)] shadow-sm">
<Bot className="w-4 h-4" />
<span>{t('alerts:orchestration.ai_generated_po')}</span>
</div>
</div>
)}
{/* Escalation Badge Details */}
{showEscalationBadge && <EscalationBadge alert={alert} />}
@@ -580,6 +605,7 @@ export function UnifiedActionQueueCard({
// PO Details Modal state
const [isPODetailsModalOpen, setIsPODetailsModalOpen] = useState(false);
const [selectedPOId, setSelectedPOId] = useState<string | null>(null);
const [poModalMode, setPOModalMode] = useState<'view' | 'edit'>('view');
// Subscribe to SSE notifications for real-time alerts
const { notifications, isConnected } = useEventNotifications();
@@ -638,13 +664,14 @@ export function UnifiedActionQueueCard({
};
}, [actionQueue]);
// Listen for PO details modal open events
// Listen for PO details modal open events (view mode)
useEffect(() => {
const handlePODetailsOpen = (event: CustomEvent) => {
const { po_id } = event.detail;
const { po_id, mode } = event.detail;
if (po_id) {
setSelectedPOId(po_id);
setPOModalMode(mode || 'view');
setIsPODetailsModalOpen(true);
}
};
@@ -655,6 +682,24 @@ export function UnifiedActionQueueCard({
};
}, []);
// Listen for PO edit modal open events (edit mode)
useEffect(() => {
const handlePOEditOpen = (event: CustomEvent) => {
const { po_id, mode } = event.detail;
if (po_id) {
setSelectedPOId(po_id);
setPOModalMode(mode || 'edit');
setIsPODetailsModalOpen(true);
}
};
window.addEventListener('po:open-edit' as any, handlePOEditOpen);
return () => {
window.removeEventListener('po:open-edit' as any, handlePOEditOpen);
};
}, []);
// Create a stable identifier for notifications to prevent infinite re-renders
// Only recalculate when the actual notification IDs and read states change
const notificationKey = useMemo(() => {
@@ -976,7 +1021,7 @@ export function UnifiedActionQueueCard({
/>
)}
{/* PO Details Modal - Opened by "Ver detalles" action */}
{/* PO Details Modal - Opened by "Ver detalles" or "Modificar PO" action */}
{isPODetailsModalOpen && selectedPOId && tenantId && (
<UnifiedPurchaseOrderModal
poId={selectedPOId}
@@ -985,9 +1030,10 @@ export function UnifiedActionQueueCard({
onClose={() => {
setIsPODetailsModalOpen(false);
setSelectedPOId(null);
setPOModalMode('view');
}}
showApprovalActions={true}
initialMode="view"
initialMode={poModalMode}
/>
)}
</div>

4
frontend/src/locales/en/alerts.json
View File

@@ -24,6 +24,7 @@
"actions": {
"approve_po": "Approve €{amount} order",
"reject_po": "Reject order",
"modify_po": "Modify order",
"view_po_details": "View details",
"call_supplier": "Call {supplier} ({phone})",
"see_reasoning": "See full reasoning",
@@ -45,7 +46,8 @@
"estimated_impact": "Estimated Impact",
"impact_description": "Savings from prevented rush orders, stockouts, and waste",
"last_run": "Last run",
"what_ai_did": "What AI did for you"
"what_ai_did": "What AI did for you",
"ai_generated_po": "AI-Generated PO"
},
"no_reasoning_available": "No reasoning available",
"metrics": {

4
frontend/src/locales/es/alerts.json
View File

@@ -24,6 +24,7 @@
"actions": {
"approve_po": "Aprobar pedido €{amount}",
"reject_po": "Rechazar pedido",
"modify_po": "Modificar pedido",
"view_po_details": "Ver detalles",
"call_supplier": "Llamar a {supplier} ({phone})",
"see_reasoning": "Ver razonamiento completo",
@@ -45,7 +46,8 @@
"estimated_impact": "Impacto Estimado",
"impact_description": "Ahorros por prevención de pedidos urgentes, faltas de stock y desperdicios",
"last_run": "Última ejecución",
"what_ai_did": "Lo que hizo la IA por ti"
"what_ai_did": "Lo que hizo la IA por ti",
"ai_generated_po": "PO Generada por IA"
},
"ai_reasoning_label": "Razonamiento de IA",
"no_reasoning_available": "No hay razonamiento disponible",

252
frontend/src/pages/app/EnterpriseDashboardPage.tsx
View File

@@ -200,22 +200,22 @@ const EnterpriseDashboardPage: React.FC<EnterpriseDashboardPageProps> = ({ tenan
return (
<ErrorBoundary FallbackComponent={ErrorFallback}>
<div className="px-4 sm:px-6 lg:px-8 py-6 min-h-screen" style={{ backgroundColor: 'var(--bg-secondary)' }}>
<div className="px-4 sm:px-6 lg:px-8 py-6 min-h-screen bg-[var(--bg-secondary)]">
{/* Breadcrumb / Return to Network Banner */}
{enterpriseState.selectedOutletId && !enterpriseState.isNetworkView && (
<div className="mb-6 rounded-lg p-4" style={{
backgroundColor: 'var(--color-info-light, #dbeafe)',
borderColor: 'var(--color-info, #3b82f6)',
borderWidth: '1px',
borderStyle: 'solid'
}}>
<div
className="mb-6 rounded-lg p-4 border border-[var(--border-primary)]"
style={{
backgroundColor: 'var(--color-info-50)',
}}
>
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<Network className="w-5 h-5" style={{ color: 'var(--color-info)' }} />
<Network className="w-5 h-5 text-[var(--color-info)]" />
<div className="flex items-center gap-2 text-sm">
<span className="font-medium" style={{ color: 'var(--color-info)' }}>Network Overview</span>
<ChevronRight className="w-4 h-4" style={{ color: 'var(--color-info-light, #93c5fd)' }} />
<span className="text-gray-700 font-semibold">{enterpriseState.selectedOutletName}</span>
<span className="font-medium text-[var(--color-info)]">Network Overview</span>
<ChevronRight className="w-4 h-4 text-[var(--color-info-300)]" />
<span className="text-[var(--text-primary)] font-semibold">{enterpriseState.selectedOutletName}</span>
</div>
</div>
<Button
@@ -230,18 +230,18 @@ const EnterpriseDashboardPage: React.FC<EnterpriseDashboardPageProps> = ({ tenan
</div>
{enterpriseState.networkMetrics && (
<div className="mt-3 pt-3 border-t grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 text-sm"
style={{ borderColor: 'var(--color-info-light, #93c5fd)' }}>
style={{ borderColor: 'var(--border-primary)' }}>
<div>
<span style={{ color: 'var(--color-info)' }}>Network Average Sales:</span>
<span className="ml-2 font-semibold">€{enterpriseState.networkMetrics.averageSales.toLocaleString()}</span>
<span className="text-[var(--color-info)]">Network Average Sales:</span>
<span className="ml-2 font-semibold text-[var(--text-primary)]">€{enterpriseState.networkMetrics.averageSales.toLocaleString()}</span>
</div>
<div>
<span style={{ color: 'var(--color-info)' }}>Total Outlets:</span>
<span className="ml-2 font-semibold">{enterpriseState.networkMetrics.childCount}</span>
<span className="text-[var(--color-info)]">Total Outlets:</span>
<span className="ml-2 font-semibold text-[var(--text-primary)]">{enterpriseState.networkMetrics.childCount}</span>
</div>
<div>
<span style={{ color: 'var(--color-info)' }}>Network Total:</span>
<span className="ml-2 font-semibold">€{enterpriseState.networkMetrics.totalSales.toLocaleString()}</span>
<span className="text-[var(--color-info)]">Network Total:</span>
<span className="ml-2 font-semibold text-[var(--text-primary)]">€{enterpriseState.networkMetrics.totalSales.toLocaleString()}</span>
</div>
</div>
)}
@@ -262,10 +262,10 @@ const EnterpriseDashboardPage: React.FC<EnterpriseDashboardPageProps> = ({ tenan
<Network className="w-8 h-8 text-white" />
</div>
<div>
<h1 className="text-4xl font-bold" style={{ color: 'var(--text-primary)' }}>
<h1 className="text-4xl font-bold text-[var(--text-primary)]">
{t('enterprise.network_dashboard')}
</h1>
<p className="mt-1" style={{ color: 'var(--text-secondary)' }}>
<p className="mt-1 text-[var(--text-secondary)]">
{t('enterprise.network_summary_description')}
</p>
</div>
@@ -288,16 +288,16 @@ const EnterpriseDashboardPage: React.FC<EnterpriseDashboardPageProps> = ({ tenan
<Card className="h-full">
<CardHeader className="flex flex-row items-center justify-between">
<div className="flex items-center gap-2">
<Truck className="w-5 h-5 text-blue-600" />
<Truck className="w-5 h-5 text-[var(--color-info)]" />
<CardTitle>{t('enterprise.distribution_map')}</CardTitle>
</div>
<div className="flex items-center gap-2">
<Calendar className="w-4 h-4 text-gray-500" />
<Calendar className="w-4 h-4 text-[var(--text-secondary)]" />
<input
type="date"
value={selectedDate}
onChange={(e) => setSelectedDate(e.target.value)}
className="border rounded px-2 py-1 text-sm"
className="border border-[var(--border-primary)] rounded-md px-2 py-1 text-sm bg-[var(--input-bg)] text-[var(--text-primary)]"
/>
</div>
</CardHeader>
@@ -308,7 +308,7 @@ const EnterpriseDashboardPage: React.FC<EnterpriseDashboardPageProps> = ({ tenan
shipments={distributionOverview.status_counts}
/>
) : (
<div className="h-96 flex items-center justify-center text-gray-500">
<div className="h-96 flex items-center justify-center text-[var(--text-secondary)]">
{t('enterprise.no_distribution_data')}
</div>
)}
@@ -321,14 +321,14 @@ const EnterpriseDashboardPage: React.FC<EnterpriseDashboardPageProps> = ({ tenan
<Card className="h-full">
<CardHeader className="flex flex-row items-center justify-between">
<div className="flex items-center gap-2">
<BarChart3 className="w-5 h-5 text-green-600" />
<BarChart3 className="w-5 h-5 text-[var(--color-success)]" />
<CardTitle>{t('enterprise.outlet_performance')}</CardTitle>
</div>
<div className="flex gap-2">
<select
value={selectedMetric}
onChange={(e) => setSelectedMetric(e.target.value)}
className="border rounded px-2 py-1 text-sm"
className="border border-[var(--border-primary)] rounded-md px-2 py-1 text-sm bg-[var(--input-bg)] text-[var(--text-primary)]"
>
<option value="sales">{t('enterprise.metrics.sales')}</option>
<option value="inventory_value">{t('enterprise.metrics.inventory_value')}</option>
@@ -337,7 +337,7 @@ const EnterpriseDashboardPage: React.FC<EnterpriseDashboardPageProps> = ({ tenan
<select
value={selectedPeriod}
onChange={(e) => setSelectedPeriod(Number(e.target.value))}
className="border rounded px-2 py-1 text-sm"
className="border border-[var(--border-primary)] rounded-md px-2 py-1 text-sm bg-[var(--input-bg)] text-[var(--text-primary)]"
>
<option value={7}>{t('enterprise.last_7_days')}</option>
<option value={30}>{t('enterprise.last_30_days')}</option>
@@ -354,7 +354,7 @@ const EnterpriseDashboardPage: React.FC<EnterpriseDashboardPageProps> = ({ tenan
onOutletClick={handleOutletClick}
/>
) : (
<div className="h-96 flex items-center justify-center text-gray-500">
<div className="h-96 flex items-center justify-center text-[var(--text-secondary)]">
{t('enterprise.no_performance_data')}
</div>
)}
@@ -367,121 +367,105 @@ const EnterpriseDashboardPage: React.FC<EnterpriseDashboardPageProps> = ({ tenan
<div className="mb-8">
<Card>
<CardHeader className="flex flex-row items-center gap-2">
<TrendingUp className="w-5 h-5 text-purple-600" />
<TrendingUp className="w-5 h-5 text-[var(--color-primary)]" />
<CardTitle>{t('enterprise.network_forecast')}</CardTitle>
</CardHeader>
<CardContent>
{forecastSummary && forecastSummary.aggregated_forecasts ? (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
{/* Total Demand Card */}
<div
className="p-6 rounded-xl border-2 transition-all duration-300 hover:shadow-lg"
style={{
backgroundColor: 'var(--color-info-50)',
borderColor: 'var(--color-info-200)',
}}
>
<div className="flex items-center gap-3 mb-3">
<div
className="w-10 h-10 rounded-lg flex items-center justify-center shadow-md"
style={{ backgroundColor: 'var(--color-info-100)' }}
>
<Package className="w-5 h-5" style={{ color: 'var(--color-info-600)' }} />
<Card className="hover:shadow-lg transition-shadow duration-300">
<CardContent className="p-6">
<div className="flex items-center gap-3 mb-3">
<div
className="w-10 h-10 rounded-lg flex items-center justify-center shadow-md"
style={{ backgroundColor: 'var(--color-info-100)' }}
>
<Package className="w-5 h-5" style={{ color: 'var(--color-info-600)' }} />
</div>
<h3 className="font-semibold text-sm" style={{ color: 'var(--color-info-800)' }}>
{t('enterprise.total_demand')}
</h3>
</div>
<h3 className="font-semibold text-sm" style={{ color: 'var(--color-info-800)' }}>
{t('enterprise.total_demand')}
</h3>
</div>
<p className="text-3xl font-bold" style={{ color: 'var(--color-info-900)' }}>
{Object.values(forecastSummary.aggregated_forecasts).reduce((total: number, day: any) =>
total + Object.values(day).reduce((dayTotal: number, product: any) =>
dayTotal + (product.predicted_demand || 0), 0), 0
).toLocaleString()}
</p>
</div>
<p className="text-3xl font-bold" style={{ color: 'var(--color-info-900)' }}>
{Object.values(forecastSummary.aggregated_forecasts).reduce((total: number, day: any) =>
total + Object.values(day).reduce((dayTotal: number, product: any) =>
dayTotal + (product.predicted_demand || 0), 0), 0
).toLocaleString()}
</p>
</CardContent>
</Card>
{/* Days Forecast Card */}
<div
className="p-6 rounded-xl border-2 transition-all duration-300 hover:shadow-lg"
style={{
backgroundColor: 'var(--color-success-50)',
borderColor: 'var(--color-success-200)',
}}
>
<div className="flex items-center gap-3 mb-3">
<div
className="w-10 h-10 rounded-lg flex items-center justify-center shadow-md"
style={{ backgroundColor: 'var(--color-success-100)' }}
>
<Calendar className="w-5 h-5" style={{ color: 'var(--color-success-600)' }} />
<Card className="hover:shadow-lg transition-shadow duration-300">
<CardContent className="p-6">
<div className="flex items-center gap-3 mb-3">
<div
className="w-10 h-10 rounded-lg flex items-center justify-center shadow-md"
style={{ backgroundColor: 'var(--color-success-100)' }}
>
<Calendar className="w-5 h-5" style={{ color: 'var(--color-success-600)' }} />
</div>
<h3 className="font-semibold text-sm" style={{ color: 'var(--color-success-800)' }}>
{t('enterprise.days_forecast')}
</h3>
</div>
<h3 className="font-semibold text-sm" style={{ color: 'var(--color-success-800)' }}>
{t('enterprise.days_forecast')}
</h3>
</div>
<p className="text-3xl font-bold" style={{ color: 'var(--color-success-900)' }}>
{forecastSummary.days_forecast || 7}
</p>
</div>
<p className="text-3xl font-bold" style={{ color: 'var(--color-success-900)' }}>
{forecastSummary.days_forecast || 7}
</p>
</CardContent>
</Card>
{/* Average Daily Demand Card */}
<div
className="p-6 rounded-xl border-2 transition-all duration-300 hover:shadow-lg"
style={{
backgroundColor: 'var(--color-secondary-50)',
borderColor: 'var(--color-secondary-200)',
}}
>
<div className="flex items-center gap-3 mb-3">
<div
className="w-10 h-10 rounded-lg flex items-center justify-center shadow-md"
style={{ backgroundColor: 'var(--color-secondary-100)' }}
>
<Activity className="w-5 h-5" style={{ color: 'var(--color-secondary-600)' }} />
<Card className="hover:shadow-lg transition-shadow duration-300">
<CardContent className="p-6">
<div className="flex items-center gap-3 mb-3">
<div
className="w-10 h-10 rounded-lg flex items-center justify-center shadow-md"
style={{ backgroundColor: 'var(--color-secondary-100)' }}
>
<Activity className="w-5 h-5" style={{ color: 'var(--color-secondary-600)' }} />
</div>
<h3 className="font-semibold text-sm" style={{ color: 'var(--color-secondary-800)' }}>
{t('enterprise.avg_daily_demand')}
</h3>
</div>
<h3 className="font-semibold text-sm" style={{ color: 'var(--color-secondary-800)' }}>
{t('enterprise.avg_daily_demand')}
</h3>
</div>
<p className="text-3xl font-bold" style={{ color: 'var(--color-secondary-900)' }}>
{forecastSummary.aggregated_forecasts
? Math.round(Object.values(forecastSummary.aggregated_forecasts).reduce((total: number, day: any) =>
total + Object.values(day).reduce((dayTotal: number, product: any) =>
dayTotal + (product.predicted_demand || 0), 0), 0) /
Object.keys(forecastSummary.aggregated_forecasts).length
).toLocaleString()
: 0}
</p>
</div>
<p className="text-3xl font-bold" style={{ color: 'var(--color-secondary-900)' }}>
{forecastSummary.aggregated_forecasts
? Math.round(Object.values(forecastSummary.aggregated_forecasts).reduce((total: number, day: any) =>
total + Object.values(day).reduce((dayTotal: number, product: any) =>
dayTotal + (product.predicted_demand || 0), 0), 0) /
Object.keys(forecastSummary.aggregated_forecasts).length
).toLocaleString()
: 0}
</p>
</CardContent>
</Card>
{/* Last Updated Card */}
<div
className="p-6 rounded-xl border-2 transition-all duration-300 hover:shadow-lg"
style={{
backgroundColor: 'var(--color-warning-50)',
borderColor: 'var(--color-warning-200)',
}}
>
<div className="flex items-center gap-3 mb-3">
<div
className="w-10 h-10 rounded-lg flex items-center justify-center shadow-md"
style={{ backgroundColor: 'var(--color-warning-100)' }}
>
<Clock className="w-5 h-5" style={{ color: 'var(--color-warning-600)' }} />
<Card className="hover:shadow-lg transition-shadow duration-300">
<CardContent className="p-6">
<div className="flex items-center gap-3 mb-3">
<div
className="w-10 h-10 rounded-lg flex items-center justify-center shadow-md"
style={{ backgroundColor: 'var(--color-warning-100)' }}
>
<Clock className="w-5 h-5" style={{ color: 'var(--color-warning-600)' }} />
</div>
<h3 className="font-semibold text-sm" style={{ color: 'var(--color-warning-800)' }}>
{t('enterprise.last_updated')}
</h3>
</div>
<h3 className="font-semibold text-sm" style={{ color: 'var(--color-warning-800)' }}>
{t('enterprise.last_updated')}
</h3>
</div>
<p className="text-lg font-semibold" style={{ color: 'var(--color-warning-900)' }}>
{forecastSummary.last_updated ?
new Date(forecastSummary.last_updated).toLocaleTimeString() :
'N/A'}
</p>
</div>
<p className="text-lg font-semibold" style={{ color: 'var(--color-warning-900)' }}>
{forecastSummary.last_updated ?
new Date(forecastSummary.last_updated).toLocaleTimeString() :
'N/A'}
</p>
</CardContent>
</Card>
</div>
) : (
<div className="flex items-center justify-center h-48 text-gray-500">
<div className="flex items-center justify-center h-48 text-[var(--text-secondary)]">
{t('enterprise.no_forecast_data')}
</div>
)}
@@ -494,10 +478,10 @@ const EnterpriseDashboardPage: React.FC<EnterpriseDashboardPageProps> = ({ tenan
<Card>
<CardContent className="p-6">
<div className="flex items-center gap-3 mb-4">
<Building2 className="w-6 h-6 text-blue-600" />
<h3 className="text-lg font-semibold">Agregar Punto de Venta</h3>
<Building2 className="w-6 h-6 text-[var(--color-primary)]" />
<h3 className="text-lg font-semibold text-[var(--text-primary)]">Agregar Punto de Venta</h3>
</div>
<p className="text-gray-600 mb-4">Añadir un nuevo outlet a la red enterprise</p>
<p className="text-[var(--text-secondary)] mb-4">Añadir un nuevo outlet a la red enterprise</p>
<Button
onClick={() => navigate(`/app/tenants/${tenantId}/settings/organization`)}
className="w-full"
@@ -510,10 +494,10 @@ const EnterpriseDashboardPage: React.FC<EnterpriseDashboardPageProps> = ({ tenan
<Card>
<CardContent className="p-6">
<div className="flex items-center gap-3 mb-4">
<PackageCheck className="w-6 h-6 text-green-600" />
<h3 className="text-lg font-semibold">Transferencias Internas</h3>
<PackageCheck className="w-6 h-6 text-[var(--color-success)]" />
<h3 className="text-lg font-semibold text-[var(--text-primary)]">Transferencias Internas</h3>
</div>
<p className="text-gray-600 mb-4">Gestionar pedidos entre obrador central y outlets</p>
<p className="text-[var(--text-secondary)] mb-4">Gestionar pedidos entre obrador central y outlets</p>
<Button
onClick={() => navigate(`/app/tenants/${tenantId}/procurement/internal-transfers`)}
variant="outline"
@@ -527,10 +511,10 @@ const EnterpriseDashboardPage: React.FC<EnterpriseDashboardPageProps> = ({ tenan
<Card>
<CardContent className="p-6">
<div className="flex items-center gap-3 mb-4">
<MapPin className="w-6 h-6 text-red-600" />
<h3 className="text-lg font-semibold">Rutas de Distribución</h3>
<MapPin className="w-6 h-6 text-[var(--color-info)]" />
<h3 className="text-lg font-semibold text-[var(--text-primary)]">Rutas de Distribución</h3>
</div>
<p className="text-gray-600 mb-4">Optimizar rutas de entrega entre ubicaciones</p>
<p className="text-[var(--text-secondary)] mb-4">Optimizar rutas de entrega entre ubicaciones</p>
<Button
onClick={() => navigate(`/app/tenants/${tenantId}/distribution/routes`)}
variant="outline"

96
frontend/src/utils/i18n/alertRendering.ts
View File

@@ -118,22 +118,98 @@ export function renderDisabledReason(
/**
* Render AI reasoning summary with parameter substitution
* Enhanced to extract orchestrator reasoning from event_metadata.reasoning_data
*/
export function renderAIReasoning(
event: Alert,
t: TFunction
): string | null {
if (!event.ai_reasoning?.summary_key) return null;
try {
return t(
event.ai_reasoning.summary_key,
event.ai_reasoning.summary_params || {}
);
} catch (error) {
console.error('Error rendering AI reasoning:', error);
return null;
// First, try the standard ai_reasoning field
if (event.ai_reasoning?.summary_key) {
try {
return t(
event.ai_reasoning.summary_key,
event.ai_reasoning.summary_params || {}
);
} catch (error) {
console.error('Error rendering AI reasoning:', error);
}
}
// For orchestrator-generated POs, extract reasoning from event_metadata.reasoning_data
if (event.event_type?.includes('po') && event.event_metadata?.reasoning_data) {
try {
const reasoningData = event.event_metadata.reasoning_data;
const params = reasoningData.parameters || {};
const metadata = reasoningData.metadata || {};
// Check if this is an orchestrator-generated PO
const isOrchestratorGenerated =
metadata.ai_assisted === true ||
metadata.trigger_source === 'orchestrator_auto' ||
event.event_metadata?.source === 'orchestrator' ||
event.event_metadata?.auto_generated === true;
if (!isOrchestratorGenerated) return null;
// Extract reasoning details from parameters
const minDepletionHours = params.min_depletion_hours;
const minDepletionDays = params.min_depletion_days;
const supplierLeadTimeDays = params.supplier_lead_time_days;
const orderUrgency = params.order_urgency;
const potentialLossEur = params.potential_loss_eur;
const affectedBatches = params.affected_batches || [];
const supplierName = params.supplier_name;
const criticalProducts = params.critical_products || [];
const productDetails = params.product_details || [];
// Build ICU MessageFormat parameters
const i18nParams: Record<string, any> = {
critical_product_count: criticalProducts.length || 0,
min_depletion_hours: minDepletionHours || 0,
min_depletion_days: minDepletionDays || 0,
supplier_name: supplierName || t('common:supplier'),
supplier_lead_time_days: supplierLeadTimeDays || 0,
order_urgency: orderUrgency || 'now',
affected_batches_count: affectedBatches.length || 0,
potential_loss_eur: potentialLossEur || 0,
};
// Add critical product names to parameters
criticalProducts.forEach((product: string, index: number) => {
i18nParams[`critical_products_${index}`] = product;
});
// Add affected batch names to parameters
affectedBatches.forEach((batch: string, index: number) => {
i18nParams[`affected_batches_${index}`] = batch;
});
// Generate reasoning text using i18n template
let result = t('reasoning:purchaseOrder.low_stock_detection_detailed', i18nParams);
// Add stock details for each product if available
if (productDetails.length > 0) {
const stockDetails = productDetails.map((detail: any) => {
const productName = detail.product_name;
const currentStock = detail.current_stock_kg;
const reorderPoint = detail.reorder_point_kg;
const daysUntilDepletion = detail.days_until_depletion;
return `${productName}: ${currentStock?.toFixed(1)}kg actual vs ${reorderPoint?.toFixed(0)}kg punto de reorden (${daysUntilDepletion?.toFixed(1)} días hasta agotamiento)`;
}).join('. ');
result += ` ${stockDetails}`;
}
return result;
} catch (error) {
console.error('Error extracting orchestrator reasoning:', error);
return null;
}
}
return null;
}
// ============================================================