Application web de gestion de recettes professionnelles pour auto-entrepreneur.
HTML/CSS/JavaScript pur — aucune dépendance externe — s'ouvre directement dans le navigateur.
| Onglet | Contenu |
|---|---|
| Tableau de bord | KPI (recettes, dépenses, solde), camembert cliquable, barres mensuelles, sous-totaux trimestriels, top clients |
| Nouvelle saisie | Formulaire avec autocomplétion client, deux dates distinctes (prestation / paiement), validation inline |
| Historique | Tableau filtrable et triable, export CSV compatible Excel |
| Clients | Grille de cartes par client avec total encaissé, nb transactions, dernière prestation |
- Deux dates par transaction : date de prestation (obligatoire) et date de paiement (optionnelle)
- Catégories : Chant · Yoga · Livres · Autres
- Navigation contextuelle : clic sur un secteur du camembert ou un client → historique pré-filtré
- Préférences persistées : onglet actif, filtres, tri, année sélectionnée — restaurés à chaque ouverture
- Export CSV avec encodage UTF-8 + BOM (compatible Excel)
git clone https://github.com/lnadolski/monbudget.git
cd monbudget
cp data.example.js data.js # créer le fichier de données
open index.html # ouvrir dans le navigateurdata.js est exclu du dépôt (données personnelles — CNIL).
Copier data.example.js en data.js et renseigner vos propres transactions.
// Une transaction dans data.js
{
id: "hist0001", // identifiant unique
type: "recette", // "recette" | "dépense"
date_paiement: "2026-01-12", // YYYY-MM-DD | null
date_prestation: "2026-01-09", // YYYY-MM-DD | null
client: "Nom du client",
categorie: "Chant", // Chant | Yoga | Livres | Autres
montant: 65.0, // en euros
mode: "Virement", // Virement | Chèque | Espèces | Autre
reference: "Facture 01", // optionnel
remarques: "Cours 1" // optionnel
}monbudget/
├── index.html # Structure SPA (4 onglets)
├── style.css # Design, variables CSS, responsive
├── app.js # Navigation, formulaire, historique, clients, préférences
├── storage.js # CRUD localStorage, normalisation clients, statistiques
├── chart.js # Graphiques Canvas API
├── data.example.js # Modèle de données vide (à copier en data.js)
├── data.js # ⚠ Données personnelles — non versionné (.gitignore)
└── CLAUDE.md # Documentation technique pour Claude Code
- HTML5 / CSS3 / JavaScript ES6+ — aucun framework
- Canvas API — graphiques natifs
- localStorage — persistance des données et préférences
data.js contient des données personnelles (clients, montants, dates) et est exclu du dépôt via .gitignore.