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

fix: Update dashboard to match backend structure and support dark mode

Browse Source 
Frontend changes:
- Updated API endpoints to call /tenants/{id}/dashboard/*
  (removed /orchestrator/ prefix to match backend router)
- Updated DashboardPage to use CSS theme variables instead of hardcoded colors
- Replaced bg-white, text-gray-*, bg-blue-* with var(--bg-primary), var(--text-primary), etc.
- Quick action buttons now use color accents with left border for visual distinction

This ensures:
1. Frontend calls the correct backend endpoints (fixes 404 errors)
2. Dashboard respects theme (light/dark mode)
3. Consistent styling with rest of application
This commit is contained in:
Claude
2025-11-07 21:44:24 +00:00
parent c8b7724be3
commit 449c231af0
2 changed files with 34 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
frontend/src/pages/app/DashboardPage.tsx
View File

@@ -126,18 +126,24 @@ export function NewDashboardPage() {
};
return (
<div className="min-h-screen bg-gray-50 pb-20 md:pb-8">
<div className="min-h-screen pb-20 md:pb-8" style={{ backgroundColor: 'var(--bg-secondary)' }}>
{/* Mobile-optimized container */}
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
{/* Header */}
<div className="flex items-center justify-between mb-6">
<div>
<h1 className="text-3xl md:text-4xl font-bold text-gray-900">Panel de Control</h1>
<p className="text-gray-600 mt-1">Your bakery at a glance</p>
<h1 className="text-3xl md:text-4xl font-bold" style={{ color: 'var(--text-primary)' }}>Panel de Control</h1>
<p className="mt-1" style={{ color: 'var(--text-secondary)' }}>Your bakery at a glance</p>
</div>
<button
onClick={handleRefreshAll}
className="flex items-center gap-2 px-4 py-2 bg-white hover:bg-gray-50 border border-gray-300 rounded-lg font-semibold text-gray-700 transition-colors duration-200"
className="flex items-center gap-2 px-4 py-2 rounded-lg font-semibold transition-colors duration-200"
style={{
backgroundColor: 'var(--bg-primary)',
borderColor: 'var(--border-primary)',
border: '1px solid',
color: 'var(--text-secondary)'
}}
>
<RefreshCw className="w-5 h-5" />
<span className="hidden sm:inline">Refresh</span>
@@ -181,45 +187,49 @@ export function NewDashboardPage() {
{/* SECTION 5: Quick Insights Grid */}
{insights && (
<div>
<h2 className="text-2xl font-bold text-gray-900 mb-4">Key Metrics</h2>
<h2 className="text-2xl font-bold mb-4" style={{ color: 'var(--text-primary)' }}>Key Metrics</h2>
<InsightsGrid insights={insights} loading={insightsLoading} />
</div>
)}
{/* SECTION 6: Quick Action Links */}
<div className="bg-white rounded-xl shadow-md p-6">
<h2 className="text-xl font-bold text-gray-900 mb-4">Quick Actions</h2>
<div className="rounded-xl shadow-md p-6" style={{ backgroundColor: 'var(--bg-primary)' }}>
<h2 className="text-xl font-bold mb-4" style={{ color: 'var(--text-primary)' }}>Quick Actions</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<button
onClick={() => navigate('/app/operations/procurement')}
className="flex items-center justify-between p-4 bg-blue-50 hover:bg-blue-100 rounded-lg transition-colors duration-200 group"
className="flex items-center justify-between p-4 rounded-lg transition-colors duration-200 group"
style={{ backgroundColor: 'var(--bg-tertiary)', borderLeft: '4px solid var(--color-info)' }}
>
<span className="font-semibold text-blue-900">View Orders</span>
<ExternalLink className="w-5 h-5 text-blue-600 group-hover:translate-x-1 transition-transform duration-200" />
<span className="font-semibold" style={{ color: 'var(--text-primary)' }}>View Orders</span>
<ExternalLink className="w-5 h-5 group-hover:translate-x-1 transition-transform duration-200" style={{ color: 'var(--color-info)' }} />
</button>
<button
onClick={() => navigate('/app/operations/production')}
className="flex items-center justify-between p-4 bg-green-50 hover:bg-green-100 rounded-lg transition-colors duration-200 group"
className="flex items-center justify-between p-4 rounded-lg transition-colors duration-200 group"
style={{ backgroundColor: 'var(--bg-tertiary)', borderLeft: '4px solid var(--color-success)' }}
>
<span className="font-semibold text-green-900">Production</span>
<ExternalLink className="w-5 h-5 text-green-600 group-hover:translate-x-1 transition-transform duration-200" />
<span className="font-semibold" style={{ color: 'var(--text-primary)' }}>Production</span>
<ExternalLink className="w-5 h-5 group-hover:translate-x-1 transition-transform duration-200" style={{ color: 'var(--color-success)' }} />
</button>
<button
onClick={() => navigate('/app/database/inventory')}
className="flex items-center justify-between p-4 bg-purple-50 hover:bg-purple-100 rounded-lg transition-colors duration-200 group"
className="flex items-center justify-between p-4 rounded-lg transition-colors duration-200 group"
style={{ backgroundColor: 'var(--bg-tertiary)', borderLeft: '4px solid var(--color-secondary)' }}
>
<span className="font-semibold text-purple-900">Inventory</span>
<ExternalLink className="w-5 h-5 text-purple-600 group-hover:translate-x-1 transition-transform duration-200" />
<span className="font-semibold" style={{ color: 'var(--text-primary)' }}>Inventory</span>
<ExternalLink className="w-5 h-5 group-hover:translate-x-1 transition-transform duration-200" style={{ color: 'var(--color-secondary)' }} />
</button>
<button
onClick={() => navigate('/app/database/suppliers')}
className="flex items-center justify-between p-4 bg-amber-50 hover:bg-amber-100 rounded-lg transition-colors duration-200 group"
className="flex items-center justify-between p-4 rounded-lg transition-colors duration-200 group"
style={{ backgroundColor: 'var(--bg-tertiary)', borderLeft: '4px solid var(--color-warning)' }}
>
<span className="font-semibold text-amber-900">Suppliers</span>
<ExternalLink className="w-5 h-5 text-amber-600 group-hover:translate-x-1 transition-transform duration-200" />
<span className="font-semibold" style={{ color: 'var(--text-primary)' }}>Suppliers</span>
<ExternalLink className="w-5 h-5 group-hover:translate-x-1 transition-transform duration-200" style={{ color: 'var(--color-warning)' }} />
</button>
</div>
</div>