📋 Fiche Descriptive : Suivi Budget Vestimentaire – Bureau

🔷 INFORMATIONS GÉNÉRALES

Champ Détail

Nom du template suivi_budget_vestimentaire_bureau.html

Version 1.0.0

Date de création 19/03/2026

Auteur / Designer Gemini / Refoia Jeremy Tech

Type de page Dashboard de suivi budgétaire personnel

Objectif principal Visualiser l’évolution des dépenses vestimentaires pro vs budget annuel

🎯 DESCRIPTION FONCTIONNELLE

📌 Que fait ce template ?

Ce template est un outil de visualisation de données minimaliste. Il permet à un employé de bureau de suivre son budget annuel (2 160 €) par rapport à ses dépenses réelles estimées (chaussures de ville et t-shirts). Il combine des indicateurs clés (KPI) sous forme de cartes et un graphique linéaire interactif pour identifier les pics de dépenses (notamment en période estivale).

📌 Public cible (Persona)

👤 Professionnels en bureau souhaitant gérer leur garde-robe.

👤 Particuliers cherchant un exemple simple d’intégration de Chart.js.

⚙️ SPÉCIFICATIONS TECHNIQUES

🌐 Environnement & Compatibilité

Standard HTML : HTML5

Framework CSS : CSS Pur (Custom Properties & Flexbox/Grid)

Framework JS : Vanilla JS + Chart.js (CDN)

Responsive : ✅ Oui (Grille adaptative et graphique responsive)

📦 Dépendances / Assets

HTML

📥 ENTRÉES — CONTENU DYNAMIQUE

# Nom de la variable Type Obligatoire Description

1 labels array ✅ Oui Liste des mois (Janvier à Décembre)

2 depenses array ✅ Oui Valeurs numériques des dépenses par mois

3 budgetMensuel array ✅ Oui Ligne de référence (seuil de 180 €)

🧱 STRUCTURE DU FICHIER — DOM

suivi_budget_vestimentaire_bureau.html

│

├── 📌(Métadonnées, Styles, Chart.js)

│

└── 📌

│

└── 🏗️