feat(HRT-143): Refonte design /depenses/ — glassmorphism + moderne #1

admin · 2026-05-11T16:03:27+02:00

admin commented

2026-05-11 16:03:27 +02:00

Résumé

Refonte complète du design de lapp /depenses/ selon les specs HRT-143.

Fichiers modifiés

templates/index.html — refonte complète (1444 lignes)
templates/dashboard.html — refonte complète (731 lignes)

Design

Palette : #020617 bg, #00d9ff cyan, #a855f7 violet, #00ff88 matrix, #f43f5e rose
Glassmorphism : backdrop-blur, border rgba, box-shadow glow
Layout 3 colonnes : sidebar form | main list | stats panel
4 KPI cards animées avec progress bar budget
Donut chart répartition catégories + top 5 dépenses
Badges colorés par catégorie/statut
Modales backdrop-blur avec animation spring

Dashboard

Grid 3 colonnes avec 6 cards
Chart multi-mode (bar/line/pie)
Répartition catégories avec % et progress bars
Résumé par personne avec progress bars
Top 7 dépenses
Sparkline tendance 6 derniers mois

Stack

HTML/CSS/JS vanilla uniquement
Tailwind CSS via cdn.tailwindcss.com
JetBrains Mono Google Fonts
Chart.js v4 (API v4 compatible)
jsPDF conservé tel quel

Tests post-deploy

curl http://localhost:8769/             → 200 ✅
curl http://localhost:8769/api/depenses → 200 ✅
curl http://localhost:8769/api/config   → 200 ✅
curl http://localhost:8769/dashboard    → 200 ✅

Backups

templates/index.html.backup_20260511_155553 ✅
templates/dashboard.html.backup_20260511_155553 ✅

0 modification app.py — toutes les APIs inchangées.

## Résumé Refonte complète du design de lapp /depenses/ selon les specs HRT-143. ### Fichiers modifiés - `templates/index.html` — refonte complète (1444 lignes) - `templates/dashboard.html` — refonte complète (731 lignes) ### Design - Palette : `#020617` bg, `#00d9ff` cyan, `#a855f7` violet, `#00ff88` matrix, `#f43f5e` rose - Glassmorphism : backdrop-blur, border rgba, box-shadow glow - Layout 3 colonnes : sidebar form | main list | stats panel - 4 KPI cards animées avec progress bar budget - Donut chart répartition catégories + top 5 dépenses - Badges colorés par catégorie/statut - Modales backdrop-blur avec animation spring ### Dashboard - Grid 3 colonnes avec 6 cards - Chart multi-mode (bar/line/pie) - Répartition catégories avec % et progress bars - Résumé par personne avec progress bars - Top 7 dépenses - Sparkline tendance 6 derniers mois ### Stack - HTML/CSS/JS vanilla uniquement - Tailwind CSS via cdn.tailwindcss.com - JetBrains Mono Google Fonts - Chart.js v4 (API v4 compatible) - jsPDF conservé tel quel ### Tests post-deploy ``` curl http://localhost:8769/ → 200 ✅ curl http://localhost:8769/api/depenses → 200 ✅ curl http://localhost:8769/api/config → 200 ✅ curl http://localhost:8769/dashboard → 200 ✅ ``` ### Backups - `templates/index.html.backup_20260511_155553` ✅ - `templates/dashboard.html.backup_20260511_155553` ✅ 0 modification app.py — toutes les APIs inchangées.

admin added 1 commit 2026-05-11 16:03:27 +02:00

feat(HRT-143): Refonte design /depenses/ glassmorphism + modern UI 7f0688d00a

- Refonte complète index.html (1444 lignes) :
  layout 3 colonnes desktop / mobile responsive
  Header sticky glassmorphism avec nav tabs
  4 KPI cards animées (total, budget restant, nb, max)
  Donut chart répartition catégories en sidebar droite
  Top 5 dépenses avec progress bars
  Formulaire avec labels uppercase + inputs focus glow
  Liste dépenses avec badges colorés par catégorie/statut
  Modales overlay backdrop-blur + animation spring
  Budget bar gradient animée (matrix → rose selon %)

- Refonte complète dashboard.html (731 lignes) :
  Grid 3 colonnes avec cards glassmorphism
  4 KPI cards (total, count, moyenne, catégories)
  Chart principal multi-mode (bar/line/pie)
  Donut répartition + table catégories avec %
  Résumé par personne avec progress bars
  Top 7 dépenses avec progress bars
  Sparkline tendance 6 derniers mois

- Stack : HTML/CSS/JS vanilla + Tailwind CDN + JetBrains Mono
- Palette : --bg-primary #020617, --cyan #00d9ff, --violet #a855f7
- 0 modification app.py, toutes APIs inchangées

Co-Authored-By: Paperclip <noreply@paperclip.ing>

This branch is already included in the target branch. There is nothing to merge.

View command line instructions

Checkout

From your project repository, check out a new branch and test the changes.

git fetch -u origin feature/HRT-143-depenses-redesign:feature/HRT-143-depenses-redesign

git checkout feature/HRT-143-depenses-redesign

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: admin/depenses_trello#1