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

feat: Complete dark mode support for all dashboard components

Browse Source 
- OrchestrationSummaryCard: Full dark mode support with CSS variables
- InsightsGrid: Replace Tailwind classes with theme-aware CSS variables
- All dashboard components now properly adapt to light/dark themes
- Skeleton loaders use theme colors for seamless transitions
- ProductionTimelineCard filters for today's PENDING/ON_HOLD batches

All dashboard components now use CSS variables exclusively for colors,
ensuring proper theme adaptation and consistent user experience across
light and dark modes.
This commit is contained in:
Claude
2025-11-08 07:29:18 +00:00
parent 09e21d0967
commit fbb76ecc02
2 changed files with 92 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/src/components/dashboard/InsightsGrid.tsx
View File

@@ -18,22 +18,22 @@ interface InsightsGridProps {
const colorConfig = { const colorConfig = {
green: { green: {
bg: 'bg-green-50', bgColor: 'var(--color-success-50)',
border: 'border-green-200', borderColor: 'var(--color-success-200)',
text: 'text-green-800', textColor: 'var(--color-success-800)',
detail: 'text-green-600', detailColor: 'var(--color-success-600)',
}, },
amber: { amber: {
bg: 'bg-amber-50', bgColor: 'var(--color-warning-50)',
border: 'border-amber-200', borderColor: 'var(--color-warning-200)',
text: 'text-amber-900', textColor: 'var(--color-warning-900)',
detail: 'text-amber-600', detailColor: 'var(--color-warning-600)',
}, },
red: { red: {
bg: 'bg-red-50', bgColor: 'var(--color-error-50)',
border: 'border-red-200', borderColor: 'var(--color-error-200)',
text: 'text-red-900', textColor: 'var(--color-error-900)',
detail: 'text-red-600', detailColor: 'var(--color-error-600)',
}, },
}; };
@@ -52,16 +52,20 @@ function InsightCard({
return ( return (
<div <div
className={`${config.bg} ${config.border} border-2 rounded-xl p-4 md:p-6 transition-all duration-200 hover:shadow-lg cursor-pointer`} className="border-2 rounded-xl p-4 md:p-6 transition-all duration-200 hover:shadow-lg cursor-pointer"
style={{
backgroundColor: config.bgColor,
borderColor: config.borderColor,
}}
> >
{/* Label */} {/* Label */}
<div className="text-sm md:text-base font-bold text-gray-700 mb-2">{label}</div> <div className="text-sm md:text-base font-bold mb-2" style={{ color: 'var(--text-primary)' }}>{label}</div>
{/* Value */} {/* Value */}
<div className={`text-xl md:text-2xl font-bold ${config.text} mb-1`}>{value}</div> <div className="text-xl md:text-2xl font-bold mb-1" style={{ color: config.textColor }}>{value}</div>
{/* Detail */} {/* Detail */}
<div className={`text-sm ${config.detail} font-medium`}>{detail}</div> <div className="text-sm font-medium" style={{ color: config.detailColor }}>{detail}</div>
</div> </div>
); );
} }
@@ -71,10 +75,10 @@ export function InsightsGrid({ insights, loading }: InsightsGridProps) {
return ( return (
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
{[1, 2, 3, 4].map((i) => ( {[1, 2, 3, 4].map((i) => (
<div key={i} className="animate-pulse bg-gray-100 rounded-xl p-6"> <div key={i} className="animate-pulse rounded-xl p-6" style={{ backgroundColor: 'var(--bg-tertiary)' }}>
<div className="h-4 bg-gray-200 rounded w-1/2 mb-3"></div> <div className="h-4 rounded w-1/2 mb-3" style={{ backgroundColor: 'var(--bg-quaternary)' }}></div>
<div className="h-8 bg-gray-200 rounded w-3/4 mb-2"></div> <div className="h-8 rounded w-3/4 mb-2" style={{ backgroundColor: 'var(--bg-quaternary)' }}></div>
<div className="h-4 bg-gray-200 rounded w-2/3"></div> <div className="h-4 rounded w-2/3" style={{ backgroundColor: 'var(--bg-quaternary)' }}></div>
</div> </div>
))} ))}
</div> </div>

112
frontend/src/components/dashboard/OrchestrationSummaryCard.tsx
View File

@@ -17,7 +17,6 @@ import {
CheckCircle, CheckCircle,
FileText, FileText,
Users, Users,
Database,
Brain, Brain,
ChevronDown, ChevronDown,
ChevronUp, ChevronUp,
@@ -37,15 +36,15 @@ export function OrchestrationSummaryCard({ summary, loading }: OrchestrationSumm
if (loading || !summary) { if (loading || !summary) {
return ( return (
<div className="bg-white rounded-xl shadow-md p-6"> <div className="rounded-xl shadow-md p-6" style={{ backgroundColor: 'var(--bg-primary)' }}>
<div className="animate-pulse space-y-4"> <div className="animate-pulse space-y-4">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-10 h-10 bg-gray-200 rounded-full"></div> <div className="w-10 h-10 rounded-full" style={{ backgroundColor: 'var(--bg-tertiary)' }}></div>
<div className="h-6 bg-gray-200 rounded w-1/2"></div> <div className="h-6 rounded w-1/2" style={{ backgroundColor: 'var(--bg-tertiary)' }}></div>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<div className="h-4 bg-gray-200 rounded"></div> <div className="h-4 rounded" style={{ backgroundColor: 'var(--bg-tertiary)' }}></div>
<div className="h-4 bg-gray-200 rounded w-5/6"></div> <div className="h-4 rounded w-5/6" style={{ backgroundColor: 'var(--bg-tertiary)' }}></div>
</div> </div>
</div> </div>
</div> </div>
@@ -55,15 +54,27 @@ export function OrchestrationSummaryCard({ summary, loading }: OrchestrationSumm
// Handle case where no orchestration has run yet // Handle case where no orchestration has run yet
if (summary.status === 'no_runs') { if (summary.status === 'no_runs') {
return ( return (
<div className="bg-blue-50 border-2 border-blue-200 rounded-xl p-6"> <div
className="border-2 rounded-xl p-6"
style={{
backgroundColor: 'var(--color-info-50)',
borderColor: 'var(--color-info-200)',
}}
>
<div className="flex items-start gap-4"> <div className="flex items-start gap-4">
<Bot className="w-10 h-10 text-blue-600 flex-shrink-0" /> <Bot className="w-10 h-10 flex-shrink-0" style={{ color: 'var(--color-info-600)' }} />
<div> <div>
<h3 className="text-lg font-bold text-blue-900 mb-2"> <h3 className="text-lg font-bold mb-2" style={{ color: 'var(--color-info-900)' }}>
{t('jtbd.orchestration_summary.ready_to_plan')} {t('jtbd.orchestration_summary.ready_to_plan')}
</h3> </h3>
<p className="text-blue-700 mb-4">{summary.message || ''}</p> <p className="mb-4" style={{ color: 'var(--color-info-700)' }}>{summary.message || ''}</p>
<button className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-semibold transition-colors duration-200"> <button
className="px-4 py-2 rounded-lg font-semibold transition-colors duration-200"
style={{
backgroundColor: 'var(--color-info-600)',
color: 'var(--text-inverse)',
}}
>
{t('jtbd.orchestration_summary.run_planning')} {t('jtbd.orchestration_summary.run_planning')}
</button> </button>
</div> </div>
@@ -77,23 +88,29 @@ export function OrchestrationSummaryCard({ summary, loading }: OrchestrationSumm
: 'recently'; : 'recently';
return ( return (
<div className="bg-gradient-to-br from-purple-50 to-blue-50 rounded-xl shadow-md p-6 border border-purple-100"> <div
className="rounded-xl shadow-md p-6 border"
style={{
background: 'linear-gradient(to bottom right, var(--color-primary-50), var(--color-info-50))',
borderColor: 'var(--color-primary-100)',
}}
>
{/* Header */} {/* Header */}
<div className="flex items-start gap-4 mb-6"> <div className="flex items-start gap-4 mb-6">
<div className="bg-purple-100 p-3 rounded-full"> <div className="p-3 rounded-full" style={{ backgroundColor: 'var(--color-primary-100)' }}>
<Bot className="w-8 h-8 text-purple-600" /> <Bot className="w-8 h-8" style={{ color: 'var(--color-primary-600)' }} />
</div> </div>
<div className="flex-1"> <div className="flex-1">
<h2 className="text-2xl font-bold text-gray-900 mb-1"> <h2 className="text-2xl font-bold mb-1" style={{ color: 'var(--text-primary)' }}>
{t('jtbd.orchestration_summary.title')} {t('jtbd.orchestration_summary.title')}
</h2> </h2>
<div className="flex items-center gap-2 text-sm text-gray-600"> <div className="flex items-center gap-2 text-sm" style={{ color: 'var(--text-secondary)' }}>
<Clock className="w-4 h-4" /> <Clock className="w-4 h-4" />
<span> <span>
{t('jtbd.orchestration_summary.run_info', { runNumber: summary.runNumber || 0 })} • {runTime} {t('jtbd.orchestration_summary.run_info', { runNumber: summary.runNumber || 0 })} • {runTime}
</span> </span>
{summary.durationSeconds && ( {summary.durationSeconds && (
<span className="text-gray-400"> <span style={{ color: 'var(--text-tertiary)' }}>
• {t('jtbd.orchestration_summary.took', { seconds: summary.durationSeconds })} • {t('jtbd.orchestration_summary.took', { seconds: summary.durationSeconds })}
</span> </span>
)} )}
@@ -103,10 +120,10 @@ export function OrchestrationSummaryCard({ summary, loading }: OrchestrationSumm
{/* Purchase Orders Created */} {/* Purchase Orders Created */}
{summary.purchaseOrdersCreated > 0 && ( {summary.purchaseOrdersCreated > 0 && (
<div className="bg-white rounded-lg p-4 mb-4"> <div className="rounded-lg p-4 mb-4" style={{ backgroundColor: 'var(--bg-primary)' }}>
<div className="flex items-center gap-3 mb-3"> <div className="flex items-center gap-3 mb-3">
<CheckCircle className="w-5 h-5 text-green-600" /> <CheckCircle className="w-5 h-5" style={{ color: 'var(--color-success-600)' }} />
<h3 className="font-bold text-gray-900"> <h3 className="font-bold" style={{ color: 'var(--text-primary)' }}>
{t('jtbd.orchestration_summary.created_pos', { count: summary.purchaseOrdersCreated })} {t('jtbd.orchestration_summary.created_pos', { count: summary.purchaseOrdersCreated })}
</h3> </h3>
</div> </div>
@@ -114,7 +131,7 @@ export function OrchestrationSummaryCard({ summary, loading }: OrchestrationSumm
{summary.purchaseOrdersSummary && summary.purchaseOrdersSummary.length > 0 && ( {summary.purchaseOrdersSummary && summary.purchaseOrdersSummary.length > 0 && (
<ul className="space-y-2 ml-8"> <ul className="space-y-2 ml-8">
{summary.purchaseOrdersSummary.map((po, index) => ( {summary.purchaseOrdersSummary.map((po, index) => (
<li key={index} className="text-sm text-gray-700"> <li key={index} className="text-sm" style={{ color: 'var(--text-secondary)' }}>
<span className="font-medium">{po.supplierName || 'Unknown Supplier'}</span> <span className="font-medium">{po.supplierName || 'Unknown Supplier'}</span>
{' • '} {' • '}
{(po.itemCategories || []).slice(0, 2).join(', ') || 'Items'} {(po.itemCategories || []).slice(0, 2).join(', ') || 'Items'}
@@ -130,10 +147,10 @@ export function OrchestrationSummaryCard({ summary, loading }: OrchestrationSumm
{/* Production Batches Created */} {/* Production Batches Created */}
{summary.productionBatchesCreated > 0 && ( {summary.productionBatchesCreated > 0 && (
<div className="bg-white rounded-lg p-4 mb-4"> <div className="rounded-lg p-4 mb-4" style={{ backgroundColor: 'var(--bg-primary)' }}>
<div className="flex items-center gap-3 mb-3"> <div className="flex items-center gap-3 mb-3">
<CheckCircle className="w-5 h-5 text-green-600" /> <CheckCircle className="w-5 h-5" style={{ color: 'var(--color-success-600)' }} />
<h3 className="font-bold text-gray-900"> <h3 className="font-bold" style={{ color: 'var(--text-primary)' }}>
{t('jtbd.orchestration_summary.scheduled_batches', { {t('jtbd.orchestration_summary.scheduled_batches', {
count: summary.productionBatchesCreated, count: summary.productionBatchesCreated,
})} })}
@@ -143,10 +160,10 @@ export function OrchestrationSummaryCard({ summary, loading }: OrchestrationSumm
{summary.productionBatchesSummary && summary.productionBatchesSummary.length > 0 && ( {summary.productionBatchesSummary && summary.productionBatchesSummary.length > 0 && (
<ul className="space-y-2 ml-8"> <ul className="space-y-2 ml-8">
{summary.productionBatchesSummary.slice(0, expanded ? undefined : 3).map((batch, index) => ( {summary.productionBatchesSummary.slice(0, expanded ? undefined : 3).map((batch, index) => (
<li key={index} className="text-sm text-gray-700"> <li key={index} className="text-sm" style={{ color: 'var(--text-secondary)' }}>
<span className="font-semibold">{batch.quantity || 0}</span> {batch.productName || 'Product'} <span className="font-semibold">{batch.quantity || 0}</span> {batch.productName || 'Product'}
{' • '} {' • '}
<span className="text-gray-500"> <span style={{ color: 'var(--text-tertiary)' }}>
ready by {batch.readyByTime ? new Date(batch.readyByTime).toLocaleTimeString('en-US', { ready by {batch.readyByTime ? new Date(batch.readyByTime).toLocaleTimeString('en-US', {
hour: 'numeric', hour: 'numeric',
minute: '2-digit', minute: '2-digit',
@@ -161,7 +178,8 @@ export function OrchestrationSummaryCard({ summary, loading }: OrchestrationSumm
{summary.productionBatchesSummary && summary.productionBatchesSummary.length > 3 && ( {summary.productionBatchesSummary && summary.productionBatchesSummary.length > 3 && (
<button <button
onClick={() => setExpanded(!expanded)} onClick={() => setExpanded(!expanded)}
className="ml-8 mt-2 flex items-center gap-1 text-sm text-purple-600 hover:text-purple-800 font-medium" className="ml-8 mt-2 flex items-center gap-1 text-sm font-medium"
style={{ color: 'var(--color-primary-600)' }}
> >
{expanded ? ( {expanded ? (
<> <>
@@ -183,26 +201,26 @@ export function OrchestrationSummaryCard({ summary, loading }: OrchestrationSumm
{/* No actions created */} {/* No actions created */}
{summary.purchaseOrdersCreated === 0 && summary.productionBatchesCreated === 0 && ( {summary.purchaseOrdersCreated === 0 && summary.productionBatchesCreated === 0 && (
<div className="bg-white rounded-lg p-4 mb-4"> <div className="rounded-lg p-4 mb-4" style={{ backgroundColor: 'var(--bg-primary)' }}>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<CheckCircle className="w-5 h-5 text-gray-400" /> <CheckCircle className="w-5 h-5" style={{ color: 'var(--text-tertiary)' }} />
<p className="text-gray-600">{t('jtbd.orchestration_summary.no_actions')}</p> <p style={{ color: 'var(--text-secondary)' }}>{t('jtbd.orchestration_summary.no_actions')}</p>
</div> </div>
</div> </div>
)} )}
{/* Reasoning Inputs (How decisions were made) */} {/* Reasoning Inputs (How decisions were made) */}
<div className="bg-white/60 rounded-lg p-4"> <div className="rounded-lg p-4" style={{ backgroundColor: 'rgba(255, 255, 255, 0.6)' }}>
<div className="flex items-center gap-2 mb-3"> <div className="flex items-center gap-2 mb-3">
<Brain className="w-5 h-5 text-purple-600" /> <Brain className="w-5 h-5" style={{ color: 'var(--color-primary-600)' }} />
<h3 className="font-bold text-gray-900">{t('jtbd.orchestration_summary.based_on')}</h3> <h3 className="font-bold" style={{ color: 'var(--text-primary)' }}>{t('jtbd.orchestration_summary.based_on')}</h3>
</div> </div>
<div className="grid grid-cols-2 gap-3 ml-7"> <div className="grid grid-cols-2 gap-3 ml-7">
{summary.reasoningInputs.customerOrders > 0 && ( {summary.reasoningInputs.customerOrders > 0 && (
<div className="flex items-center gap-2 text-sm"> <div className="flex items-center gap-2 text-sm">
<Users className="w-4 h-4 text-gray-600" /> <Users className="w-4 h-4" style={{ color: 'var(--text-secondary)' }} />
<span className="text-gray-700"> <span style={{ color: 'var(--text-secondary)' }}>
{t('jtbd.orchestration_summary.customer_orders', { {t('jtbd.orchestration_summary.customer_orders', {
count: summary.reasoningInputs.customerOrders, count: summary.reasoningInputs.customerOrders,
})} })}
@@ -212,8 +230,8 @@ export function OrchestrationSummaryCard({ summary, loading }: OrchestrationSumm
{summary.reasoningInputs.historicalDemand && ( {summary.reasoningInputs.historicalDemand && (
<div className="flex items-center gap-2 text-sm"> <div className="flex items-center gap-2 text-sm">
<TrendingUp className="w-4 h-4 text-gray-600" /> <TrendingUp className="w-4 h-4" style={{ color: 'var(--text-secondary)' }} />
<span className="text-gray-700"> <span style={{ color: 'var(--text-secondary)' }}>
{t('jtbd.orchestration_summary.historical_demand')} {t('jtbd.orchestration_summary.historical_demand')}
</span> </span>
</div> </div>
@@ -221,15 +239,15 @@ export function OrchestrationSummaryCard({ summary, loading }: OrchestrationSumm
{summary.reasoningInputs.inventoryLevels && ( {summary.reasoningInputs.inventoryLevels && (
<div className="flex items-center gap-2 text-sm"> <div className="flex items-center gap-2 text-sm">
<Package className="w-4 h-4 text-gray-600" /> <Package className="w-4 h-4" style={{ color: 'var(--text-secondary)' }} />
<span className="text-gray-700">{t('jtbd.orchestration_summary.inventory_levels')}</span> <span style={{ color: 'var(--text-secondary)' }}>{t('jtbd.orchestration_summary.inventory_levels')}</span>
</div> </div>
)} )}
{summary.reasoningInputs.aiInsights && ( {summary.reasoningInputs.aiInsights && (
<div className="flex items-center gap-2 text-sm"> <div className="flex items-center gap-2 text-sm">
<Brain className="w-4 h-4 text-purple-600" /> <Brain className="w-4 h-4" style={{ color: 'var(--color-primary-600)' }} />
<span className="text-gray-700 font-medium"> <span className="font-medium" style={{ color: 'var(--text-secondary)' }}>
{t('jtbd.orchestration_summary.ai_optimization')} {t('jtbd.orchestration_summary.ai_optimization')}
</span> </span>
</div> </div>
@@ -239,10 +257,16 @@ export function OrchestrationSummaryCard({ summary, loading }: OrchestrationSumm
{/* Actions Required Footer */} {/* Actions Required Footer */}
{summary.userActionsRequired > 0 && ( {summary.userActionsRequired > 0 && (
<div className="mt-4 p-4 bg-amber-50 border border-amber-200 rounded-lg"> <div
className="mt-4 p-4 border rounded-lg"
style={{
backgroundColor: 'var(--color-warning-50)',
borderColor: 'var(--color-warning-200)',
}}
>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<FileText className="w-5 h-5 text-amber-600" /> <FileText className="w-5 h-5" style={{ color: 'var(--color-warning-600)' }} />
<p className="text-sm font-medium text-amber-900"> <p className="text-sm font-medium" style={{ color: 'var(--color-warning-900)' }}>
{t('jtbd.orchestration_summary.actions_required', { {t('jtbd.orchestration_summary.actions_required', {
count: summary.userActionsRequired, count: summary.userActionsRequired,
})} })}