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:
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user