feat(dashboard): Enhance dashboard with PageHeader, StatCard, and auth fixes

- Create PageHeader component with title, description, and action slots
- Create StatCard component with trend indicators and icons
- Update dashboard with KPI cards, Quick Actions, and Allocation Preview
- Polish login page with branding and centered layout
- Fix auth redirect: authenticated users accessing /login go to dashboard
- Fix page refresh: auth state persists, no blank page
- Fix sidebar: visible after login, toggle works, state persists
- Fix CSS import: add app.css to layout, fix DaisyUI import path
- Fix breadcrumbs: home icon links to /dashboard
- Add comprehensive E2E and unit tests

Refs: openspec/changes/p03-dashboard-enhancement
Closes: p03-dashboard-enhancement
This commit is contained in:
2026-02-18 18:14:57 -05:00
parent 493cb78173
commit 96f1d0a6e5
22 changed files with 770 additions and 138 deletions

View File

@@ -10,6 +10,7 @@
<script lang="ts">
import { onMount } from 'svelte';
import { get } from 'svelte/store';
import {
Moon,
PanelLeftClose,
@@ -26,6 +27,7 @@
toggleTheme
} from '$lib/stores/layout';
import { user } from '$lib/stores/auth';
import type { SidebarState } from '$lib/types/layout';
import SidebarSection from './SidebarSection.svelte';
$: isExpanded = $sidebarState === 'expanded';
@@ -46,13 +48,22 @@
document.documentElement.setAttribute('data-sidebar', $sidebarState);
}
function getSidebarStateForWidth(width: number): SidebarState {
if (width < 768) return 'hidden';
if (width < 1280) return 'collapsed';
return 'expanded';
}
onMount(() => {
if ($sidebarState === 'expanded') {
if (window.innerWidth < 768) {
setSidebarState('hidden');
} else if (window.innerWidth < 1280) {
setSidebarState('collapsed');
}
if (typeof window === 'undefined') return;
const currentState = get(sidebarState);
const desiredState = getSidebarStateForWidth(window.innerWidth);
if (window.innerWidth < 768 && currentState !== 'hidden') {
setSidebarState('hidden');
} else if (currentState === 'hidden' && window.innerWidth >= 768) {
setSidebarState(desiredState);
}
window.addEventListener('keydown', toggleWithShortcut);