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

Imporve the UI 4

Browse Source
This commit is contained in:
Urtzi Alfaro
2026-01-02 22:03:25 +01:00
parent b91979b840
commit db12c57b0b
5 changed files with 164 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
frontend/src/components/ui/StatusCard/StatusCard.tsx
View File

@@ -1,7 +1,6 @@
import React from 'react';
import { LucideIcon } from 'lucide-react';
import { Card } from '../Card';
import { Button } from '../Button';
import { ProgressBar } from '../ProgressBar';
import { statusColors } from '../../../styles/colors';
import { TextOverflowPrevention, overflowClasses, getScreenSize, safeText } from '../../../utils/textUtils';
@@ -121,12 +120,12 @@ export const StatusCard: React.FC<StatusCardProps> = ({
return (
<Card
className={`
p-5 sm:p-6 transition-all duration-200 border-l-4 hover:shadow-lg
p-3 sm:p-5 lg:p-6 transition-all duration-200 border-l-4 hover:shadow-lg
${hasInteraction ? 'hover:shadow-xl cursor-pointer hover:scale-[1.01]' : ''}
${statusIndicator.isCritical
? 'ring-2 ring-red-200 shadow-md border-l-6 sm:border-l-8'
? 'ring-2 ring-red-200 shadow-md sm:border-l-6 lg:border-l-8'
: statusIndicator.isHighlight
? 'ring-1 ring-yellow-200 border-l-6'
? 'ring-1 ring-yellow-200 sm:border-l-6'
: ''
}
${className}
@@ -141,33 +140,33 @@ export const StatusCard: React.FC<StatusCardProps> = ({
}}
onClick={onClick}
>
<div className="space-y-4">
<div className="space-y-3 sm:space-y-4">
{/* Header with status indicator */}
<div className="flex items-start justify-between gap-4">
<div className="flex items-start gap-3 flex-1 min-w-0">
<div className="flex items-start justify-between gap-2 sm:gap-4">
<div className="flex items-start gap-2 sm:gap-3 flex-1 min-w-0">
<div
className={`flex-shrink-0 p-2.5 sm:p-3 rounded-lg shadow-sm ${
className={`flex-shrink-0 p-1.5 sm:p-2.5 lg:p-3 rounded-lg shadow-sm ${
statusIndicator.isCritical ? 'ring-2 ring-white' : ''
}`}
style={{ backgroundColor: `${statusIndicator.color}20` }}
>
{StatusIcon && (
<StatusIcon
className="w-5 h-5 sm:w-6 sm:h-6"
className="w-4 h-4 sm:w-5 sm:h-5 lg:w-6 lg:h-6"
style={{ color: statusIndicator.color }}
/>
)}
</div>
<div className="flex-1 min-w-0">
<div
className={`font-semibold text-[var(--text-primary)] text-base sm:text-lg leading-tight mb-2 ${overflowClasses.truncate}`}
className={`font-semibold text-[var(--text-primary)] text-sm sm:text-base lg:text-lg leading-tight mb-1 sm:mb-2 ${overflowClasses.truncate}`}
title={title}
>
{truncationEngine.title(title)}
</div>
{subtitle && (
<div
className={`text-sm text-[var(--text-secondary)] mb-2 ${overflowClasses.truncate}`}
className={`text-xs sm:text-sm text-[var(--text-secondary)] mb-1 sm:mb-2 ${overflowClasses.truncate}`}
title={subtitle}
>
{truncationEngine.subtitle(subtitle)}
@@ -175,13 +174,13 @@ export const StatusCard: React.FC<StatusCardProps> = ({
)}
<div className="flex items-center gap-2">
<div
className={`inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium transition-all ${
className={`inline-flex items-center px-2 py-1 sm:px-3 sm:py-1.5 rounded-full text-xs font-medium transition-all ${
statusIndicator.isCritical
? 'bg-red-100 text-red-800 ring-2 ring-red-300 shadow-sm animate-pulse'
: statusIndicator.isHighlight
? 'bg-yellow-100 text-yellow-800 ring-1 ring-yellow-300 shadow-sm'
: 'ring-1 shadow-sm'
} max-w-[200px] sm:max-w-[220px]`}
} max-w-full sm:max-w-[220px]`}
style={{
backgroundColor: statusIndicator.isCritical || statusIndicator.isHighlight
? undefined
@@ -208,16 +207,16 @@ export const StatusCard: React.FC<StatusCardProps> = ({
</div>
</div>
</div>
<div className="text-right flex-shrink-0 min-w-0 max-w-[130px] sm:max-w-[160px]">
<div className="text-right flex-shrink-0 min-w-[60px] sm:min-w-[80px] max-w-[100px] sm:max-w-[140px] lg:max-w-[160px]">
<div
className={`text-2xl sm:text-3xl font-bold text-[var(--text-primary)] leading-none mb-1 ${overflowClasses.truncate}`}
className={`text-xl sm:text-2xl lg:text-3xl font-bold text-[var(--text-primary)] leading-none mb-0.5 sm:mb-1 ${overflowClasses.truncate}`}
title={primaryValue?.toString()}
>
{safeText(primaryValue?.toString(), '0', isMobile ? 12 : 18)}
{safeText(primaryValue?.toString(), '0', isMobile ? 10 : 18)}
</div>
{primaryValueLabel && (
<div
className={`text-xs text-[var(--text-tertiary)] uppercase tracking-wide ${overflowClasses.truncate}`}
className={`text-[10px] sm:text-xs text-[var(--text-tertiary)] uppercase tracking-wide ${overflowClasses.truncate}`}
title={primaryValueLabel}
>
{truncationEngine.primaryValueLabel(primaryValueLabel)}
@@ -228,9 +227,9 @@ export const StatusCard: React.FC<StatusCardProps> = ({
{/* Secondary info - Mobile optimized */}
{secondaryInfo && (
<div className="flex items-center justify-between text-sm gap-2 min-w-0">
<div className="flex items-center justify-between text-xs sm:text-sm gap-2 min-w-0">
<span
className={`text-[var(--text-secondary)] flex-shrink-0 ${overflowClasses.truncate} max-w-[100px] sm:max-w-[120px]`}
className={`text-[var(--text-secondary)] flex-shrink-0 ${overflowClasses.truncate} max-w-[80px] sm:max-w-[120px]`}
title={secondaryInfo.label}
>
{truncationEngine.secondaryLabel(secondaryInfo.label)}
@@ -246,7 +245,7 @@ export const StatusCard: React.FC<StatusCardProps> = ({
{/* Progress indicator */}
{progress && (
<div className="space-y-3">
<div className="space-y-2 sm:space-y-3">
<ProgressBar
value={progress.percentage}
max={100}
@@ -265,19 +264,19 @@ export const StatusCard: React.FC<StatusCardProps> = ({
{/* Metadata - Improved mobile layout with overflow prevention */}
{metadata.length > 0 && (
<div className="text-xs text-[var(--text-secondary)] space-y-1">
{metadata.slice(0, isMobile ? 3 : 4).map((item, index) => (
<div className="text-[10px] sm:text-xs text-[var(--text-secondary)] space-y-0.5 sm:space-y-1">
{metadata.slice(0, isMobile ? 2 : 4).map((item, index) => (
<div
key={index}
className={`${overflowClasses.truncate} ${overflowClasses.breakWords}`}
className={`${overflowClasses.truncate} ${overflowClasses.breakWords} leading-tight`}
title={item}
>
{truncationEngine.metadataItem(item)}
</div>
))}
{metadata.length > (isMobile ? 3 : 4) && (
<div className="text-[var(--text-tertiary)] italic">
+{metadata.length - (isMobile ? 3 : 4)} más...
{metadata.length > (isMobile ? 2 : 4) && (
<div className="text-[var(--text-tertiary)] italic text-[10px]">
+{metadata.length - (isMobile ? 2 : 4)} más...
</div>
)}
</div>
@@ -285,9 +284,9 @@ export const StatusCard: React.FC<StatusCardProps> = ({
{/* Simplified Action System - Mobile optimized */}
{actions.length > 0 && (
<div className="pt-4 border-t border-[var(--border-primary)]">
<div className="pt-2 sm:pt-4 border-t border-[var(--border-primary)]">
{/* All actions in a clean horizontal layout */}
<div className="flex items-center justify-between gap-3 flex-wrap">
<div className="flex items-center justify-between gap-2 sm:gap-3 flex-wrap">
{/* Primary action as a subtle text button */}
{primaryActions.length > 0 && (
@@ -300,8 +299,8 @@ export const StatusCard: React.FC<StatusCardProps> = ({
}}
disabled={primaryActions[0].disabled}
className={`
flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg
transition-all duration-200 hover:scale-105 active:scale-95 flex-shrink-0 max-w-[140px] sm:max-w-[160px]
flex items-center gap-1.5 sm:gap-2 px-2 py-1.5 sm:px-3 sm:py-2 text-xs sm:text-sm font-medium rounded-lg
transition-all duration-200 hover:scale-105 active:scale-95 flex-shrink-0 max-w-[120px] sm:max-w-[160px]
${primaryActions[0].disabled
? 'opacity-50 cursor-not-allowed'
: primaryActions[0].destructive
@@ -311,7 +310,7 @@ export const StatusCard: React.FC<StatusCardProps> = ({
`}
title={primaryActions[0].label}
>
{primaryActions[0].icon && React.createElement(primaryActions[0].icon, { className: "w-4 h-4 flex-shrink-0" })}
{primaryActions[0].icon && React.createElement(primaryActions[0].icon, { className: "w-3.5 h-3.5 sm:w-4 sm:h-4 flex-shrink-0" })}
<span className={`${overflowClasses.truncate} flex-1`}>
{truncationEngine.actionLabel(primaryActions[0].label)}
</span>
@@ -319,7 +318,7 @@ export const StatusCard: React.FC<StatusCardProps> = ({
)}
{/* Action icons for secondary actions */}
<div className="flex items-center gap-2">
<div className="flex items-center gap-1.5 sm:gap-2">
{secondaryActions.map((action, index) => (
<button
key={`action-${index}`}
@@ -332,7 +331,7 @@ export const StatusCard: React.FC<StatusCardProps> = ({
disabled={action.disabled}
title={action.label}
className={`
p-2 rounded-lg transition-all duration-200 hover:scale-110 active:scale-95 hover:shadow-sm
p-1.5 sm:p-2 rounded-lg transition-all duration-200 hover:scale-110 active:scale-95 hover:shadow-sm
${action.disabled
? 'opacity-50 cursor-not-allowed'
: action.destructive
@@ -343,7 +342,7 @@ export const StatusCard: React.FC<StatusCardProps> = ({
}
`}
>
{action.icon && React.createElement(action.icon, { className: "w-4 h-4" })}
{action.icon && React.createElement(action.icon, { className: "w-3.5 h-3.5 sm:w-4 sm:h-4" })}
</button>
))}
@@ -360,7 +359,7 @@ export const StatusCard: React.FC<StatusCardProps> = ({
disabled={action.disabled}
title={action.label}
className={`
p-2 rounded-lg transition-all duration-200 hover:scale-110 active:scale-95 hover:shadow-sm
p-1.5 sm:p-2 rounded-lg transition-all duration-200 hover:scale-110 active:scale-95 hover:shadow-sm
${action.disabled
? 'opacity-50 cursor-not-allowed'
: action.destructive
@@ -369,7 +368,7 @@ export const StatusCard: React.FC<StatusCardProps> = ({
}
`}
>
{action.icon && React.createElement(action.icon, { className: "w-4 h-4" })}
{action.icon && React.createElement(action.icon, { className: "w-3.5 h-3.5 sm:w-4 sm:h-4" })}
</button>
))}
</div>

7
frontend/src/locales/en/dashboard.json
View File

@@ -102,7 +102,12 @@
"quality_checks": "Quality Checks",
"manage_quality": "Manage quality control processes",
"quality_management": "Quality Management",
"event_message": "Message"
"event_message": "Message",
"batches_today": "batches today",
"batches_late": "late",
"late_to_start": "Late to Start",
"running": "Currently Running",
"pending_today": "Pending Today"
},
"po_approvals": {
"title": "What purchase orders need approval?",

7
frontend/src/locales/es/dashboard.json
View File

@@ -102,7 +102,12 @@
"quality_checks": "Controles de Calidad",
"manage_quality": "Gestionar procesos de control de calidad",
"quality_management": "Gestión de Calidad",
"event_message": "Mensaje"
"event_message": "Mensaje",
"batches_today": "lotes hoy",
"batches_late": "atrasado",
"late_to_start": "Atrasados para Empezar",
"running": "En Ejecución",
"pending_today": "Pendientes Hoy"
},
"po_approvals": {
"title": "¿Qué órdenes debo aprobar?",

38
frontend/src/locales/eu/dashboard.json
View File

@@ -69,9 +69,43 @@
"items_needed": "elementu behar dira"
},
"production": {
"title": "Zer ekoiztu behar da gaur?",
"title": "Ekoizpen Egoera",
"empty": "Ez dago ekoizpen programaturik gaur",
"batches_pending": "sortak zain"
"batches_pending": "sortak zain",
"equipment_status": "Ekipamenduaren Egoera",
"temperature": "Tenperatura",
"utilization": "Erabilera",
"next_maintenance": "Hurrengo Mantentze-Lanak",
"last_maintenance": "Azken Mantentze-Lanak",
"view_details": "Xehetasunak Ikusi",
"status_critical": "Kritikoa",
"status_warning": "Abisua",
"status_normal": "Normala",
"no_equipment": "Ez dago ekipamendurik erabilgarri",
"efficiency_metrics": "Ekoizpen Eraginkortasunaren Metrikak",
"on_time_start_rate": "Denboraren Arabera Hasieraren Tasa",
"batches_started_on_time": "Denboraren arabera hasitako sortak",
"efficiency_rate": "Eraginkortasun Tasa",
"overall_efficiency": "Ekoizpen eraginkortasun orokorra",
"active_alerts": "Alerta Aktiboak",
"issues_require_attention": "Arreta behar duten arazoak",
"ai_prevented": "ADk Saihestutako Arazoak",
"problems_prevented": "ADk saihestutako arazoak",
"quick_actions": "Ekintza Azkarrak",
"create_batch": "Sortu Ekoizpen Sorta",
"create_batch_description": "Sortu ekoizpen sorta berria sarearentzat",
"maintenance": "Ekipamenduen Mantentze-Lanak",
"schedule_maintenance": "Programatu mantentze-lanak ekoizpen ekipamendurako",
"manage_equipment": "Kudeatu Ekipamendua",
"quality_checks": "Kalitate Egiaztapenak",
"manage_quality": "Kudeatu kalitate kontrol prozesuak",
"quality_management": "Kalitate Kudeaketa",
"event_message": "Mezua",
"batches_today": "lote gaur",
"batches_late": "atzeratuta",
"late_to_start": "Hasteko Atzeratua",
"running": "Martxan",
"pending_today": "Gaur Zain"
},
"po_approvals": {
"title": "Zein erosketa agindu onartu behar ditut?",

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

@@ -247,17 +247,21 @@ const EnterpriseDashboardPage: React.FC<EnterpriseDashboardPageProps> = ({ tenan
// Error boundary fallback
const ErrorFallback = ({ error, resetErrorBoundary }: { error: Error; resetErrorBoundary: () => void }) => (
<div className="p-6 text-center">
<AlertTriangle className="mx-auto h-12 w-12 text-red-500 mb-4" />
<h3 className="text-lg font-medium text-gray-900 mb-2">Something went wrong</h3>
<p className="text-gray-500 mb-4">{error.message}</p>
<Button onClick={resetErrorBoundary}>Try again</Button>
<div className="px-4 sm:px-6 lg:px-8 py-6">
<Card className="border-[var(--color-error)] bg-[var(--color-error-50)]">
<CardContent className="p-6 text-center">
<AlertTriangle className="mx-auto h-12 w-12 text-[var(--color-error)] mb-4" />
<h3 className="text-lg font-medium text-[var(--text-primary)] mb-2">Something went wrong</h3>
<p className="text-[var(--text-secondary)] mb-4">{error.message}</p>
<Button onClick={resetErrorBoundary} variant="primary">Try again</Button>
</CardContent>
</Card>
</div>
);
if (isNetworkSummaryLoading || isChildrenPerformanceLoading || isDistributionLoading || isForecastLoading) {
return (
<div className="p-6 min-h-screen">
<div className="px-4 sm:px-6 lg:px-8 py-6 min-h-screen">
<div className="flex items-center justify-center h-96">
<LoadingSpinner text={t('enterprise.loading')} />
</div>
@@ -267,32 +271,30 @@ const EnterpriseDashboardPage: React.FC<EnterpriseDashboardPageProps> = ({ tenan
if (networkSummaryError || childrenPerformanceError || distributionError || forecastError) {
return (
<div className="p-6 min-h-screen">
<div className="bg-red-50 border border-red-200 rounded-lg p-6 text-center">
<AlertTriangle className="mx-auto h-12 w-12 text-red-500 mb-4" />
<h3 className="text-lg font-medium text-red-800 mb-2">Error Loading Dashboard</h3>
<p className="text-red-600">
<div className="px-4 sm:px-6 lg:px-8 py-6 min-h-screen">
<Card className="border-[var(--color-error)] bg-[var(--color-error-50)]">
<CardContent className="p-6 text-center">
<AlertTriangle className="mx-auto h-12 w-12 text-[var(--color-error)] mb-4" />
<h3 className="text-lg font-medium text-[var(--text-primary)] mb-2">Error Loading Dashboard</h3>
<p className="text-[var(--text-secondary)]">
{networkSummaryError?.message ||
childrenPerformanceError?.message ||
distributionError?.message ||
forecastError?.message}
</p>
</div>
</CardContent>
</Card>
</div>
);
}
return (
<ErrorBoundary FallbackComponent={ErrorFallback}>
<div className="px-4 sm:px-6 lg:px-8 py-6 min-h-screen bg-[var(--bg-secondary)]">
<div className="px-4 sm:px-6 lg:px-8 py-6 min-h-screen">
{/* Breadcrumb / Return to Network Banner */}
{enterpriseState.selectedOutletId && !enterpriseState.isNetworkView && (
<div
className="mb-6 rounded-lg p-4 border border-[var(--border-primary)]"
style={{
backgroundColor: 'var(--color-info-50)',
}}
>
<Card className="mb-6 border-2 border-[var(--color-info)] bg-[var(--color-info-50)]">
<CardContent className="p-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<Network className="w-5 h-5 text-[var(--color-info)]" />
@@ -313,8 +315,7 @@ const EnterpriseDashboardPage: React.FC<EnterpriseDashboardPageProps> = ({ tenan
</Button>
</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(--border-primary)' }}>
<div className="mt-3 pt-3 border-t border-[var(--border-primary)] grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 text-sm">
<div>
<span className="text-[var(--color-info)]">Network Average Sales:</span>
<span className="ml-2 font-semibold text-[var(--text-primary)]">{currencySymbol}{enterpriseState.networkMetrics.averageSales.toLocaleString()}</span>
@@ -329,7 +330,8 @@ const EnterpriseDashboardPage: React.FC<EnterpriseDashboardPageProps> = ({ tenan
</div>
</div>
)}
</div>
</CardContent>
</Card>
)}
{/* Enhanced Header */}
@@ -423,22 +425,22 @@ const EnterpriseDashboardPage: React.FC<EnterpriseDashboardPageProps> = ({ tenan
</CardHeader>
<CardContent>
{forecastSummary && forecastSummary.aggregated_forecasts ? (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
{/* Total Demand Card */}
<Card className="hover:shadow-lg transition-shadow duration-300">
<Card className="hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border-[var(--border-primary)]">
<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"
className="w-12 h-12 rounded-xl flex items-center justify-center"
style={{ backgroundColor: 'var(--color-info-100)' }}
>
<Package className="w-5 h-5" style={{ color: 'var(--color-info-600)' }} />
<Package className="w-6 h-6" style={{ color: 'var(--color-info)' }} />
</div>
<h3 className="font-semibold text-sm" style={{ color: 'var(--color-info-800)' }}>
<h3 className="font-semibold text-sm text-[var(--text-secondary)]">
{t('enterprise.total_demand')}
</h3>
</div>
<p className="text-3xl font-bold" style={{ color: 'var(--color-info-900)' }}>
<p className="text-3xl font-bold text-[var(--text-primary)]">
{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
@@ -448,40 +450,40 @@ const EnterpriseDashboardPage: React.FC<EnterpriseDashboardPageProps> = ({ tenan
</Card>
{/* Days Forecast Card */}
<Card className="hover:shadow-lg transition-shadow duration-300">
<Card className="hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border-[var(--border-primary)]">
<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"
className="w-12 h-12 rounded-xl flex items-center justify-center"
style={{ backgroundColor: 'var(--color-success-100)' }}
>
<Calendar className="w-5 h-5" style={{ color: 'var(--color-success-600)' }} />
<Calendar className="w-6 h-6" style={{ color: 'var(--color-success)' }} />
</div>
<h3 className="font-semibold text-sm" style={{ color: 'var(--color-success-800)' }}>
<h3 className="font-semibold text-sm text-[var(--text-secondary)]">
{t('enterprise.days_forecast')}
</h3>
</div>
<p className="text-3xl font-bold" style={{ color: 'var(--color-success-900)' }}>
<p className="text-3xl font-bold text-[var(--text-primary)]">
{forecastSummary.days_forecast || 7}
</p>
</CardContent>
</Card>
{/* Average Daily Demand Card */}
<Card className="hover:shadow-lg transition-shadow duration-300">
<Card className="hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border-[var(--border-primary)]">
<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"
className="w-12 h-12 rounded-xl flex items-center justify-center"
style={{ backgroundColor: 'var(--color-secondary-100)' }}
>
<Activity className="w-5 h-5" style={{ color: 'var(--color-secondary-600)' }} />
<Activity className="w-6 h-6" style={{ color: 'var(--color-secondary)' }} />
</div>
<h3 className="font-semibold text-sm" style={{ color: 'var(--color-secondary-800)' }}>
<h3 className="font-semibold text-sm text-[var(--text-secondary)]">
{t('enterprise.avg_daily_demand')}
</h3>
</div>
<p className="text-3xl font-bold" style={{ color: 'var(--color-secondary-900)' }}>
<p className="text-3xl font-bold text-[var(--text-primary)]">
{forecastSummary.aggregated_forecasts
? Math.round(Object.values(forecastSummary.aggregated_forecasts).reduce((total: number, day: any) =>
total + Object.values(day).reduce((dayTotal: number, product: any) =>
@@ -494,20 +496,20 @@ const EnterpriseDashboardPage: React.FC<EnterpriseDashboardPageProps> = ({ tenan
</Card>
{/* Last Updated Card */}
<Card className="hover:shadow-lg transition-shadow duration-300">
<Card className="hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border-[var(--border-primary)]">
<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"
className="w-12 h-12 rounded-xl flex items-center justify-center"
style={{ backgroundColor: 'var(--color-warning-100)' }}
>
<Clock className="w-5 h-5" style={{ color: 'var(--color-warning-600)' }} />
<Clock className="w-6 h-6" style={{ color: 'var(--color-warning)' }} />
</div>
<h3 className="font-semibold text-sm" style={{ color: 'var(--color-warning-800)' }}>
<h3 className="font-semibold text-sm text-[var(--text-secondary)]">
{t('enterprise.last_updated')}
</h3>
</div>
<p className="text-lg font-semibold" style={{ color: 'var(--color-warning-900)' }}>
<p className="text-lg font-semibold text-[var(--text-primary)]">
{forecastSummary.last_updated ?
new Date(forecastSummary.last_updated).toLocaleTimeString() :
'N/A'}