feat : add dashboard with Chart.js charts and filters

Implement the dashboard page with real data from the API:
- KPI cards (hours, active tasks, total tasks, projects)
- Charts: hours by day (line), hours by project (doughnut),
  tasks by status (doughnut), tasks by priority (bar),
  tasks by project (horizontal stacked bar)
- Filters: period (week/month), project, user
- Add chart.js and vue-chartjs dependencies
- Add dashboard sidebar icon and translations

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-14 09:05:35 +01:00
parent 0733ac16cd
commit 25aef9b2d5
6 changed files with 776 additions and 69 deletions

View File

@@ -22,7 +22,7 @@
<nav class="flex-1 overflow-hidden" :class="ui.sidebarCollapsed ? 'px-1 pb-6' : 'px-4 pb-6'">
<SidebarLink
to="/"
icon="mdi:question-mark"
icon="mdi:view-dashboard-outline"
label="Tableau de bord"
:collapsed="ui.sidebarCollapsed"
:class="ui.sidebarCollapsed ? 'mt-4' : 'border-t border-secondary-500 pt-6'"
@@ -99,8 +99,8 @@
<div class="h-full flex-1 flex flex-col min-h-0">
<AppTopNav :user="auth.user" />
<main class="flex-1 overflow-y-auto bg-white px-16 pb-24">
<div aria-hidden="true" class="pointer-events-none sticky top-0 z-30 h-12 bg-white" />
<main class="flex flex-1 flex-col overflow-y-auto bg-white px-16 pb-24">
<div aria-hidden="true" class="pointer-events-none sticky top-0 z-30 h-12 flex-shrink-0 bg-white" />
<slot/>
</main>
</div>