867 lines
58 KiB
Markdown
867 lines
58 KiB
Markdown
# MatosBox - Documentation Détaillée du Projet
|
||
|
||
**Version du document** : 1.0
|
||
**Date** : 21 janvier 2026
|
||
**Auteur** : Grok (basé sur la discussion complète avec l'utilisateur)
|
||
**Description** : Ce document synthétise l'ensemble de la discussion sur le développement de **MatosBox**, une application open-source self-hosted d'inventaire de matériel (inspirée de Homebox, étendue pour composants électroniques, informatique, outillage, cuisine, etc.). Il couvre toutes les caractéristiques, outils, structures, plans et consignes.
|
||
|
||
**Consignes à Envoyer à un Agent (type Claude Code)** :
|
||
"tu est un expert en developement web senior et tu maitrise parfaitement les backend, frontend, api, ndd. Développe le backend Go pour MatosBox : implémente schéma Ent pour tables Objet, Emplacement, Categorie en français. Ajoute endpoint POST /v1/objets/{id}/pieces_jointes pour upload multiple. Commente en français. Utilise Gin et Ent."
|
||
effectue une analyse complete, un brainstorming du projet, un plan de dev et des fichier intermediaire de developpement stock dans doc_dev/ (par etapes) au format md . qui reprenne les consignes, les outils, les caractristiques, les details, .... de l'etapes)
|
||
|
||
Le français est utilisé pour :
|
||
- Les messages utilisateurs et notifications.
|
||
- Les commentaires de code.
|
||
- Les noms des tables et de la base de données.
|
||
- L'interface utilisateur (UI).
|
||
|
||
# Table des matières
|
||
|
||
- [Caractéristiques](#1-caractéristiques-de-fonctionnement-de-lapp)
|
||
- [Outils de développement](#2-outils-de-développement)
|
||
- [Structure base de données](#3-structure-des-bases-de-données-et-des-tables)
|
||
- [Structure projet](#5-structure-du-projet)
|
||
- [Plan de développement](#8-plan-détaillé-de-développement-test-et-déploiement)
|
||
- [Vues ASCII interface](#vues-de-linterface-ascii-art)
|
||
- [Tests](#liste-des-scripts-de-tests-pour-matosbox)
|
||
- [Consigne éditeur Markdown](#consigne-dintégration-de-léditeur-markdown-style-easymde)
|
||
- [plan de developpement]
|
||
|
||
L'application cible ~5000 objets, avec focus sur simplicité, portabilité et extensibilité.
|
||
|
||
## 0. leprojet sera stocker dans mon serveur gitea
|
||
|
||
- url : https://gitea.maison43.duckdns.org/gilles/matosbox.git
|
||
- user: gilles
|
||
- token :
|
||
|
||
tu effectuera le commit et les push apres chaque etape clef du projet
|
||
si skill present pour le commit sinon .env dans doc_dev qui contient le token
|
||
|
||
|
||
## 1. Caractéristiques de Fonctionnement de l'App
|
||
|
||
MatosBox permet d'inventorier tout type de matériel (composants électroniques, informatique, outillage, accessoires, matériel électrique, de cuisine). Fonctionnalités principales :
|
||
|
||
- **Gestion des Objets** :
|
||
- Création, édition, suppression d'objets avec ID unique (UUID ou séquentiel).
|
||
- Champs standards : Nom, Description, Quantité en stock, Prix d'achat, Date d'achat, Boutique/Fournisseur, Numéro de série, Numéro de modèle, Fabricant.
|
||
- Statuts : En stock, Prêt, Hors service, Archivé.
|
||
- Caractéristiques personnalisées (ajout dynamique via bouton "+").
|
||
- ajouts de tags
|
||
|
||
- **Catégorisation et Hiérarchie** :
|
||
- Catégories/Sous-catégories (arbre récursif : ex. Catégorie/Composant/Résistance).
|
||
- Labels/Tags multiples (ex. Fragile, Haute Valeur).
|
||
|
||
- **Emplacements et Stockage** :
|
||
- Emplacements hiérarchiques (arbre récursif : ex. Emplacement/Bureau/Étagère1/Boîte2).
|
||
- Distinction : Stocké à vs Utilisé dans (relations many-to-many).
|
||
- Numéro de boîte, Pièce, Meuble.
|
||
|
||
- **Gestion de Stock et Prêts** :
|
||
- Historique des mouvements (entrées/sorties).
|
||
- Alertes seuils bas (notifications email/push).
|
||
- Prêts : À qui, dates, rappels.
|
||
|
||
- **Pièces Jointes et Documents** :
|
||
- Plusieurs images par objet (galerie, thumbnail principal).
|
||
- Notices PDF (viewer intégré).
|
||
- Tutos Markdown (éditeur inline, stockage fichier .md).
|
||
|
||
- **Intégrations Spécifiques** :
|
||
- Import achats (CSV/JSON depuis Amazon, AliExpress).
|
||
- Gestion garanties (dates, preuves, alertes expiration).
|
||
- Scan hardware (lsusb/lspci via agent sécurisé pour informatique).
|
||
|
||
- **Recherche et Rapports** :
|
||
- Recherche full-text par nom, catégorie, emplacement, prix.
|
||
- Statistiques (valeur totale, stocks bas).
|
||
- Export/Import : CSV, JSON, PDF, ZIP complet (DB + pièces jointes).
|
||
|
||
- **Multi-Utilisateurs** :
|
||
- Groupes, invitations, rôles (admin, viewer).
|
||
|
||
- **Autres** :
|
||
- QR codes générés par objet.
|
||
- Backups automatiques.
|
||
- Intégration Home Assistant (optionnelle).
|
||
|
||
|
||
|
||
|
||
|
||
**Liste TODO pour validation des features** :
|
||
- [ ] Implémenter upload multiple images/PDF/MD.
|
||
- [ ] Ajouter alertes garanties et stock bas.
|
||
- [ ] Tester scan lsusb/lspci.
|
||
- [ ] Valider export ZIP (DB + pièces jointes).
|
||
- [ ] Intégrer éditeur Markdown pour tutos.
|
||
|
||
## 2. Outils de Développement
|
||
|
||
- **Backend** : Go 1.23+ (performant, faible consommation mémoire).
|
||
- **Frontend** : Vue 3 + Nuxt.js (SSR, PWA-ready).
|
||
- **ORM** : Ent (pour schémas Go, migrations).
|
||
- **Migrations** : Goose ou Atlas (génération SQL incrémentale).
|
||
- **API** : Gin (router HTTP), Swaggo (documentation Swagger).
|
||
- **Base de Données** : SQLite par défaut (léger), Postgres optionnel.
|
||
- **Gestion Paquets Frontend** : pnpm.
|
||
- **Automatisation** : Taskfile (build, test, lint).
|
||
- **Déploiement** : Docker + Docker Compose (images hardened/rootless).
|
||
- **CI/CD** : GitLab CI (fichier .gitlab-ci.yml).
|
||
- **Documentation** : Vitepress.
|
||
- **Traduction** : Weblate.
|
||
- **Autres** : Tailwind CSS (styling), Shadcn-vue (composants UI), Python3 (scripts utils).
|
||
|
||
**Liste TODO pour outils** :
|
||
- [ ] Configurer Taskfile pour migrations.
|
||
- [ ] Intégrer Swaggo pour docs API.
|
||
- [ ] Tester Docker Compose avec SQLite/Postgres.
|
||
|
||
## 3. Structure des Bases de Données et des Tables
|
||
|
||
**Nom de la Base de Données** : `matosbox.db` (SQLite) ou `matosbox` (Postgres).
|
||
|
||
Tables principales (noms en français) :
|
||
|
||
- **Objet** : Objets inventoriés.
|
||
Champs : id, nom, description, quantite, prix_achat, date_achat, boutique, numero_serie, numero_modele, fabricant, statut (enum: en_stock, pret, hors_service, archive), caracteristiques (JSONB).
|
||
|
||
- **Categorie** : Arbre des catégories.
|
||
Champs : id, nom, parent_id, slug, icone.
|
||
Relations : Self-referencing (parent_id).
|
||
|
||
- **Emplacement** : Arbre des emplacements.
|
||
Champs : id, nom, parent_id, slug, piece, meuble, numero_boite, icone.
|
||
Relations : Self-referencing.
|
||
|
||
- **LienObjetEmplacement** : Liens flexibles (stocké/utilisé).
|
||
Champs : id, objet_id, emplacement_id, type (enum: stocke, utilise_dans).
|
||
|
||
- **ChampPersonnalise** : Caractéristiques dynamiques.
|
||
Champs : id, objet_id, nom_champ, type_champ (string/int/bool/date), valeur, unite.
|
||
|
||
- **PieceJointe** : Images, PDF, MD.
|
||
Champs : id, objet_id, nom_fichier, chemin, type_mime, est_principale, categorie (image/pdf_notice/markdown_tuto).
|
||
|
||
- **HistoriqueAchat** : Achats (Amazon, etc.).
|
||
Champs : id, objet_id, boutique, numero_commande, prix, date, quantite.
|
||
|
||
- **Pret** : Prêts.
|
||
Champs : id, objet_id, a_utilisateur, date_debut, date_fin, notes.
|
||
|
||
- **MouvementStock** : Mouvements.
|
||
Champs : id, objet_id, delta_quantite, raison, date.
|
||
|
||
- **Garantie** : Gestion garanties.
|
||
Champs : id, objet_id, fournisseur, duree_mois, date_debut, preuve (piece_jointe_id).
|
||
|
||
Relations :
|
||
- Objet → Plusieurs PieceJointe, ChampPersonnalise, etc.
|
||
- Arbres récursifs pour Categorie/Emplacement (CTE SQL pour chemins).
|
||
|
||
**Migrations** : Simples via Atlas/Goose. Évolution : Ajouter champ → Modifier schéma Go → Générer migration. SQLite → Postgres : Via pgloader ou CSV export/import.
|
||
|
||
**Liste TODO pour DB** :
|
||
- [ ] Générer schémas Ent en français.
|
||
- [ ] Tester migration SQLite → Postgres.
|
||
- [ ] Activer WAL pour SQLite perf.
|
||
|
||
## 4. Fichiers de Configuration
|
||
|
||
- **.env** : Variables (DATABASE_DRIVER=sqlite3|postgres, DATABASE_URL, ATTACHMENTS_DIR=/data/pieces_jointes, BACKUP_DIR=/data/backups, PORT=8080).
|
||
- **config.yaml** : Options app (thèmes par défaut, limites upload, i18n=fr).
|
||
- **docker-compose.yml** : Services (app, db optionnelle).
|
||
- **tailwind.config.ts** : Thèmes, rounded, shadows.
|
||
- **nuxt.config.ts** : Modules Nuxt, thèmes CSS.
|
||
|
||
## 5. Structure du Projet
|
||
|
||
Structure globale (mono-repo) :
|
||
matosbox/
|
||
├── backend/ # Go backend
|
||
├── frontend/ # Nuxt/Vue frontend
|
||
├── data/ # DB, pièces jointes (volume Docker)
|
||
├── docs/ # Vitepress documentation
|
||
├── migrations/ # Fichiers SQL Goose/Atlas
|
||
├── .gitlab-ci.yml # CI/CD
|
||
├── Taskfile.yml # Tâches automatisées
|
||
├── docker-compose.yml
|
||
├── README.md # Installation, usage
|
||
└── LICENSE # AGPL-3.0 (comme alternatives)
|
||
|
||
|
||
## 6. Structure des Dossiers
|
||
|
||
- **backend/** :
|
||
- cmd/app/ (main.go)
|
||
- internal/ (data/ent/schema/, handlers/, services/, models/)
|
||
- pkg/ (utils, qr, scan_hardware/)
|
||
|
||
- **frontend/** :
|
||
- app/ (pages, components/)
|
||
- assets/ (css, images/)
|
||
- components/ (ThemeToggle.vue, FileUploader.vue, MarkdownEditor.vue)
|
||
- stores/ (Pinia pour état)
|
||
|
||
- **data/** :
|
||
- matosbox.db
|
||
- pieces_jointes/ (images, pdf, tutos.md)
|
||
- backups/ (ZIP auto)
|
||
|
||
- **migrations/** : up.sql, down.sql par version.
|
||
|
||
## 7. Consignes de Développement
|
||
|
||
- **Langue** : Commentaires de code en français. Messages UI en français.
|
||
- **Style Code** : Go : golangci-lint. Vue : ESLint + Prettier.
|
||
- **Tests** : Unitaires (Go test), E2E (Cypress).
|
||
- **Sécurité** : Auth JWT, chiffrement pièces sensibles, sandbox exec commandes (lsusb).
|
||
- **Performance** : Cache pour stats, limites upload (50MB/fichier).
|
||
- **Accessibilité** : ARIA, contrastes WCAG.
|
||
- **Git** : Branches feature/, PR reviews.
|
||
|
||
|
||
|
||
## 8. Plan Détailé de Développement, Test et Déploiement
|
||
|
||
**Développement (Phases)** :
|
||
1. MVP (1-2 mois) : Core objets + emplacements + pièces jointes.
|
||
2. Extensions (mois 3) : Scan hardware, garanties, imports achats.
|
||
3. Polish (mois 4) : Thèmes, UI responsive, tutos MD.
|
||
|
||
**Test** :
|
||
- Unit : Go test backend, Vitest frontend.
|
||
- Intégration : API tests avec Postman.
|
||
- E2E : Cypress (upload, thèmes switch).
|
||
- Performance : Charge avec 5000 objets (SQLite WAL).
|
||
- Sécurité : OWASP scans.
|
||
|
||
**Déploiement** :
|
||
- Local : go run + npm dev.
|
||
- Prod : Docker Compose (port 8080).
|
||
- Cloud Self-Host : Raspberry Pi, VPS.
|
||
- Releases : Git tags, Docker Hub.
|
||
|
||
**Kanban (Simple Tableau Markdown)** :
|
||
|
||
| To Do | In Progress | Done |
|
||
|--------------------------------|--------------------------------|--------------------------------|
|
||
| Schémas Ent (Objet, Emplacement) | Upload pièces jointes | Thèmes dark/light implémentés |
|
||
| Endpoint scan lsusb | Migration DB | Export ZIP complet |
|
||
| Éditeur Markdown | UI Galerie images | Documentation Swagger |
|
||
|
||
**Changelog** :
|
||
- v0.1.0 (Jan 2026) : MVP core + DB SQLite.
|
||
- v0.2.0 : Pièces jointes multiples + Thèmes (dark/light/Monokai/Gruvbox).
|
||
- v1.0.0 : Full features + Déploiement Docker.
|
||
|
||
## 9. Structure du Backend, de l'API, du Frontend
|
||
|
||
**Backend (Go)** :
|
||
- Handlers : /v1/objets (CRUD), /v1/emplacements/tree, /v1/pieces_jointes/upload.
|
||
- Services : Gestion QR, scan hardware (os/exec sécurisé).
|
||
|
||
**API (RESTful + Swagger)** :
|
||
- GET /v1/objets : Liste filtrée.
|
||
- POST /v1/objets : Création.
|
||
- POST /v1/objets/{id}/pieces_jointes : Upload multiple.
|
||
- GET /v1/qrcode/{id} : Génère QR.
|
||
- Docs : /swagger/index.html.
|
||
|
||
**Frontend (Nuxt/Vue)** :
|
||
- Pages : /objets, /objets/[id], /emplacements.
|
||
- Composants : ObjetCard.vue (avec icônes), ThemeToggle.vue, FileUploader.vue.
|
||
- Stores : UseObjetsStore (Pinia).
|
||
|
||
## 10. Thèmes, Styles, Fonts, Icons
|
||
|
||
**Thèmes** : Light (défaut), Dark, Monokai, Gruvbox-dark. Switch via data-theme sur <html>. CSS vars pour couleurs.
|
||
|
||
**Styles** : Tailwind v4 + Shadcn-vue. Rounded-2xl/3xl, shadows soft/glow, transitions. Popups avec backdrop-blur.
|
||
|
||
**Fonts** : Inter (sans-serif moderne, via Google Fonts ou self-hosted). Fallback : system-ui.
|
||
|
||
**Icons** : Heroicons (primaire, SVG pur) + Lucide (complément, >1800 icônes). Exemples : Cpu, Wrench, Box, Archive. Usage : <Cpu class="h-6 w-6 text-accent" />.
|
||
|
||
**Liste TODO pour UI** :
|
||
- [ ] Intégrer Heroicons + Lucide.
|
||
- [ ] Appliquer CSS vars pour thèmes.
|
||
- [ ] Tester switch système (prefers-color-scheme).
|
||
|
||
Description de la Fonctionnalité : Gestion du Matériel Déjà Utilisé dans MatosBox
|
||
|
||
Salut Gilles ! Voici une description détaillée et structurée pour la fonctionnalité de gestion du matériel déjà utilisé (c'est-à-dire installé ou intégré dans un équipement existant, comme un composant dans un PC ou un périphérique réseau). Cette feature s'intègre parfaitement à MatosBox, en s'appuyant sur les structures existantes (tables comme Objet, Emplacement, ChampPersonnalise). Elle permet d'ajouter des caractéristiques spécifiques, de gérer un ID unique pour l'équipement hôte, et d'intégrer les résultats de commandes hardware (ex. lspci, lsusb) via un champ dédié, avec analyse automatique et stockage en JSON.
|
||
|
||
Je l'ai rédigée comme une section de documentation pour ton app, prête à être intégrée dans le README ou Vitepress. Elle inclut des recommandations pour l'implémentation (UI, DB, backend), y compris le bouton "+" pour ajouter des items par commande.
|
||
1. Objectif de la Fonctionnalité
|
||
|
||
Cette section de MatosBox gère les objets qui ne sont pas "en stock" mais déjà en utilisation (ex. : une carte WiFi installée dans un PC salon, un HDD dans un NAS, un capteur dans un projet Arduino). Elle permet :
|
||
|
||
De lier l'objet à un équipement hôte (ex. : "PC Salon") avec un ID unique (créé si inexistant, ou réutilisé si déjà en base).
|
||
D'ajouter des infos nécessaires : Nom, Marque, Modèle, Numéro de Série (SN), Adresse IP (pour réseau/informatique).
|
||
D'intégrer les résultats de commandes système (ex. lspci, lsusb) via un champ texte, avec analyse automatique pour extraire et stocker en JSON structuré.
|
||
Un bouton "+" pour ajouter rapidement de nouveaux items basés sur l'analyse de la commande (recommandation implémentée comme flux automatisé).
|
||
|
||
Cela rend MatosBox plus puissant pour l'inventaire informatique/électronique, en évitant les doublons et en automatisant la détection hardware.
|
||
2. Champs et Caractéristiques Intégrées
|
||
|
||
Pour chaque objet "déjà utilisé", les infos sont stockées dans la table Objet (champs standards) + ChampPersonnalise (pour dynamisme) + une nouvelle relation vers un EquipementHote (table dédiée pour éviter la surcharge).
|
||
|
||
Infos Nécessaires (Champs Obligatoires/Standards) :
|
||
Nom : Nom de l'objet (ex. : "Carte WiFi Intel").
|
||
Marque : Fabricant (ex. : "Intel").
|
||
Modèle : Référence précise (ex. : "AX200").
|
||
SN (Numéro de Série) : Identifiant unique hardware (ex. : "ABC123456").
|
||
IP (Adresse IP) : Pour objets réseau (ex. : "192.168.1.100" ; optionnel si non applicable).
|
||
Lien vers l'Équipement Hôte :
|
||
Nom de l'Équipement où il est Installé : Ex. : "PC Salon" ou "NAS Atelier".
|
||
ID Unique : UUID généré automatiquement.
|
||
Logique : Lors de l'ajout, vérifie si un équipement avec ce nom existe déjà en base (recherche fuzzy pour tolérer variations comme "Pc salon"). Si oui, utilise son ID existant. Sinon, crée un nouvel équipement avec ID fresh et l'ajoute à la table EquipementHote.
|
||
Relation : Many-to-many (un équipement peut avoir plusieurs objets installés ; un objet peut être lié à un équipement).
|
||
Champ pour Résultat de Commande :
|
||
Un textarea dédié dans le formulaire d'édition objet : "Coller le résultat d'une commande hardware".
|
||
Exemples de commandes affichées en aide (tooltip ou label) :
|
||
lspci -v : Liste les périphériques PCI (cartes graphiques, réseau, etc.).
|
||
lsusb -v : Liste les périphériques USB (claviers, hubs, etc.).
|
||
lshw -short : Aperçu hardware global.
|
||
dmidecode : Infos BIOS/SMBIOS (mémoire, CPU).
|
||
Une fois collé, bouton "Analyser" déclenche une analyse backend :
|
||
Parse le texte brut (via regex ou libs Go comme strings.Split/Trim).
|
||
Extrait clés : Vendor, Device ID, Driver, Bus Info, etc.
|
||
Stocke en JSON dans un champ resultat_commande_json (JSONB dans DB) :
|
||
Exemple JSON généré :
|
||
JSON
|
||
|
||
{
|
||
"commande": "lspci -v",
|
||
"date_execution": "2026-01-21T19:00:00Z",
|
||
"dispositifs": [
|
||
{
|
||
"bus": "00:1f.6",
|
||
"nom": "Ethernet controller",
|
||
"marque": "Intel Corporation",
|
||
"modele": "Ethernet Connection (7) I219-V",
|
||
"sn": "N/A",
|
||
"driver": "e1000e",
|
||
"ip": "192.168.1.1" // Si détectable via autre commande comme ip addr
|
||
}
|
||
]
|
||
}
|
||
|
||
Si erreur parse, message : "Analyse incomplète – Vérifiez le format de la commande."
|
||
Bouton "+" : Ajouter un Item par Commande
|
||
Recommandation implémentée : Après analyse, un bouton "+" apparaît pour chaque dispositif détecté dans le JSON.
|
||
Clique : Crée automatiquement un nouvel objet dans la base, en mappant :
|
||
Nom → Device Name.
|
||
Marque → Vendor.
|
||
Modèle → Model.
|
||
SN → Serial (si disponible).
|
||
IP → IP détectée (via croisement avec ip addr show).
|
||
Équipement Hôte : Auto-lien à l'hôte courant (ex. : "PC Salon").
|
||
Si ID hôte n'existe pas, le crée.
|
||
Confirmation popup : "Ajouter cet item ? (Nom: Carte WiFi Intel)" avec preview champs.
|
||
Cela évite la saisie manuelle pour du hardware détecté, et gère les doublons (vérifie SN ou Model existant).
|
||
|
||
3. Flux Utilisateur dans l'UI
|
||
|
||
Aller à la fiche d'un objet (ou créer un nouveau marqué "Déjà utilisé" via statut).
|
||
Section "Installation" : Champs pour Nom/Marque/Modèle/SN/IP + dropdown/sélecteur pour Équipement Hôte (avec auto-création si nouveau nom saisi).
|
||
Champ "Résultat Commande" : Coller texte + bouton "Analyser".
|
||
Résultat : Affichage JSON preview + boutons "+" pour ajouter items détectés.
|
||
Sauvegarde : Met à jour DB, avec lien vers hôte.
|
||
|
||
4. Implémentation Technique (Recommandations)
|
||
|
||
DB (Ent Go) : Nouvelle table EquipementHote (id, nom, description). Relation edge vers Objet.
|
||
Backend (API) :
|
||
POST /v1/objets/{id}/analyse-commande : Body { "commande_texte": "résultat collé" } → Parse et renvoie JSON.
|
||
POST /v1/objets/ajouter-par-commande : Crée item(s) depuis JSON parsé.
|
||
Frontend (Vue) : Composant AnalyseCommande.vue avec textarea, bouton Analyser (fetch API), et boucle v-for sur résultats pour boutons "+".
|
||
Sécurité : Valide input texte (anti-injection), limite taille (10kB).
|
||
Tests : Vérifier création ID unique, parse lspci/lsusb, doublons évités.
|
||
|
||
|
||
Recommandations concrètes pour MatosBox (2026, usage desktop + mobile)
|
||
Voici ce que je te conseille, en fonction des écrans/pages les plus courants dans ton app :
|
||
|
||
Utilise un Modal (Popup) pour :
|
||
Ajout rapide d’un objet (form simple : nom, quantité, emplacement, 3–4 champs customs)
|
||
Édition inline d’un objet (depuis la liste ou le dashboard)
|
||
Confirmation de suppression / archivage
|
||
Analyse de commande (coller lspci/lsusb → popup avec textarea + boutons +)
|
||
Ajout pièce jointe (drag & drop images/PDF/MD)
|
||
Génération QR code (petit aperçu + download)
|
||
Alertes rapides (stock bas, garantie expire bientôt)
|
||
→ Pourquoi ? Ça garde l’utilisateur dans son contexte (ex. liste des objets), c’est rapide, et ça évite de charger une page entière pour 2 minutes d’action.
|
||
Utilise une Page séparée pour :
|
||
Fiche détaillée d’un objet (plein écran : galerie photos, tutos Markdown render, historique prêts/achats, caractéristiques longues, résultat commande JSON formaté, liens vers équipement hôte)
|
||
Liste complète des emplacements (arborescence profonde → scroll + recherche)
|
||
Page Achats / Historique (tableaux filtrables, imports CSV)
|
||
Page Garanties (liste avec countdown, filtres par expiration)
|
||
Page Scan hardware / Analyse avancée (si tu ajoutes un module dédié)
|
||
Dashboard global (stats, valeur totale, etc. – déjà plein écran)
|
||
→ Pourquoi ? Ces écrans ont beaucoup de contenu, scroll vertical long, plusieurs sections, besoin de liens profonds (ex. bookmark une fiche objet), et sur mobile c’est plus agréable en plein écran.
|
||
Hybride intelligent (ce que je te recommande le plus) :
|
||
Sur desktop/large écran : Modal pour éditions rapides + Page pour fiches détaillées (clique "Voir détails" → nouvelle page ; clique icône crayon → modal édition).
|
||
Sur mobile : Toujours page séparée pour tout ce qui dépasse 2–3 scrolls (évite les modals minuscules et frustrants sur téléphone).
|
||
Utilise un breakpoint dans Nuxt/Tailwind (ex. md: modal, sm: page) pour basculer automatiquement.
|
||
|
||
|
||
Exemples concrets dans MatosBox
|
||
|
||
Clique sur un objet dans la liste → Page dédiée (plein écran, URL /objets/123)
|
||
Clique sur "Éditer" dans la fiche → Modal (overlay sur la fiche, focus sur form)
|
||
Clique sur "Analyser commande" → Modal (textarea + boutons + pour créer items)
|
||
Clique sur "Ajouter objet" depuis dashboard → Modal (form rapide)
|
||
Clique sur un emplacement dans l’arborescence → Page (détail emplacement + liste objets dedans)
|
||
|
||
Verdict final pour ton projet
|
||
|
||
Évite les modals abusifs : ils fatiguent vite si utilisés pour tout (surtout sur fiches longues).
|
||
Privilégie les pages pour le contenu dense : fiches objets, tutos, historiques.
|
||
Modals pour les micro-interactions : éditions courtes, confirmations, uploads, analyses rapides.
|
||
Rends-le responsive : sur petit écran, transforme les modals en pages (meilleure UX mobile).
|
||
|
||
# MatosBox – Vues de l'interface (ASCII Art)
|
||
|
||
Ce document présente les principales vues de l’interface utilisateur de **MatosBox** sous forme d’ASCII art simplifiée.
|
||
L’objectif est de donner une idée visuelle rapide du style moderne, épuré, avec coins arrondis, ombres douces, icônes, thèmes dark/light compatibles, et approche hybride :
|
||
|
||
- **Pages complètes** pour les contenus denses, longs ou nécessitant scroll (fiches, listes profondes)
|
||
- **Modals / Popups** pour les actions rapides, contextuelles, éditions courtes, uploads, analyses
|
||
|
||
Toutes les vues sont pensées responsive (desktop → modal ou page ; mobile → priorité page pleine écran).
|
||
|
||
## 1. Dashboard / Page d’accueil (Page complète)
|
||
┌──────────────────────────────────────────────────────────────────────────────┐
|
||
│ MatosBox [Light / Dark / Monokai / Gruvbox ▼] [g] │
|
||
├──────────────────────────────────────────────────────────────────────────────┤
|
||
│ ◄ Dashboard Objets Emplacements Achats Garanties Scan │
|
||
│ │
|
||
│ ▼ Aperçu global │
|
||
│ ┌──────────────────────┐ ┌──────────────────────┐ ┌──────────────────┐ │
|
||
│ │ Valeur totale │ │ Objets en stock bas │ │ Prêts en cours │ │
|
||
│ │ 4 872 € │ │ 7 objets < 5 unités │ │ 3 objets │ │
|
||
│ └──────────────────────┘ └──────────────────────┘ └──────────────────┘ │
|
||
│ │
|
||
│ ▼ Objets récents (5 derniers ajoutés / modifiés) │
|
||
│ ┌────────────────────────────────────────────────────────────────────────┐ │
|
||
│ │ Carte WiFi Intel AX200 • PC Salon • 2026-01-18 • En utilisation │ │
|
||
│ │ Résistance 10kΩ x48 • Atelier • Boîte 17 • Stock │ │
|
||
│ │ Tournevis Torx T10 • Garage • Étagère 3 • Stock │ │
|
||
│ │ HDD 4To Seagate • NAS Bureau • En utilisation │ │
|
||
│ │ Multiprise intelligente • Salon • Prêt jusqu’au 25/01 │ │
|
||
│ └────────────────────────────────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ [ + Ajouter un objet ] │
|
||
└──────────────────────────────────────────────────────────────────────────────┘
|
||
|
||
|
||
## 2. Liste des objets – Vue en grille / cards (Page complète)
|
||
|
||
┌──────────────────────────────────────────────────────────────────────────────┐
|
||
│ MatosBox ◄ Objets │
|
||
├──────────────────────────────────────────────────────────────────────────────┤
|
||
│ Recherche : [ carte wifi ▼ Catégorie ▼ Emplacement ▼ Statut ] │
|
||
│ │
|
||
│ ┌───────────────┐ ┌───────────────┐ ┌───────────────┐ ┌───────────────┐ │
|
||
│ │ Carte WiFi │ │ Résistances │ │ Tournevis Torx│ │ HDD Seagate │ │
|
||
│ │ Intel AX200 │ │ 10kΩ – 0805 │ │ T10 set 6pcs │ │ 4To Barracuda │ │
|
||
│ │ │ │ │ │ │ │ │ │
|
||
│ │ PC Salon │ │ Boîte 17 │ │ Étagère 3 │ │ NAS Bureau │ │
|
||
│ │ En utilisation│ │ 48 en stock │ │ Stock │ │ En utilisation│ │
|
||
│ │ │ │ │ │ │ │ │ │
|
||
│ │ [Voir] [QR] │ │ [Voir] [QR] │ │ [Voir] [QR] │ │ [Voir] [QR] │ │
|
||
│ └───────────────┘ └───────────────┘ └───────────────┘ └───────────────┘ │
|
||
│ │
|
||
│ Page 1 2 3 4 … 42 [ + Ajouter ] │
|
||
└──────────────────────────────────────────────────────────────────────────────┘
|
||
|
||
|
||
## 3. Fiche objet détaillée (Page complète)
|
||
|
||
|
||
┌──────────────────────────────────────────────────────────────────────────────┐
|
||
│ MatosBox ◄ Carte WiFi Intel AX200 │
|
||
├──────────────────────────────────────────────────────────────────────────────┤
|
||
│ [← Retour à la liste] │
|
||
│ │
|
||
│ ┌───────────────────────────────┐ ┌───────────────────────────────────────┐ │
|
||
│ │ Galerie photos │ │ Caractéristiques principales │ │
|
||
│ │ ┌───────┐ ┌───────┐ ┌───────┐ │ │ Marque : Intel │ │
|
||
│ │ │ photo │ │ photo │ │ photo │ │ │ Modèle : AX200 │ │
|
||
│ │ └───────┘ └───────┘ └───────┘ │ │ SN : ABC123XYZ │ │
|
||
│ │ [Ajouter photo] │ │ IP actuelle : 192.168.1.45 │ │
|
||
│ └───────────────────────────────┘ │ Statut : En utilisation │ │
|
||
│ │ Équipement : PC Salon │ │
|
||
│ └───────────────────────────────────────┘ │
|
||
│ │
|
||
│ ▼ Résultat dernière analyse lspci │
|
||
│ 03:00.0 Network controller: Intel Corporation Wi-Fi 6 AX200 │
|
||
│ Subsystem: Intel Corporation Device 0084 │
|
||
│ Kernel driver in use: iwlwifi │
|
||
│ │
|
||
│ [Analyser une nouvelle sortie] [Voir historique analyses] │
|
||
│ │
|
||
│ ▼ Pièces jointes │
|
||
│ Datasheet.pdf Tuto-installation.md Photo-slot.jpg │
|
||
│ │
|
||
│ ▼ Historique │
|
||
│ 2026-01-18 : Installé dans PC Salon │
|
||
│ 2026-01-10 : Acheté sur Amazon – 28,90 € │
|
||
│ │
|
||
│ [ Éditer ] [ Archiver ] [ Générer QR ] [ Prêter ] [ Supprimer ] │
|
||
└──────────────────────────────────────────────────────────────────────────────┘
|
||
|
||
|
||
## 4. Modal – Ajout / Édition rapide d’objet
|
||
┌───────────────────────────────────────────────────────┐
|
||
│ Ajouter un objet │
|
||
├───────────────────────────────────────────────────────┤
|
||
│ Nom ................ [ Résistance 1kΩ 0805 ] │
|
||
│ Quantité ........... [ 120 ] │
|
||
│ Prix achat ......... [ 0.02 € ] │
|
||
│ Date achat ......... [ 2026-01-20 ▼ ] │
|
||
│ Boutique ........... [ AliExpress ] │
|
||
│ Catégorie .......... [ Composant ▼ ] │
|
||
│ Emplacement ........ [ Atelier > Boîte 12 ▼ ] │
|
||
│ Statut ............. [ En stock ] │
|
||
│ │
|
||
│ ▼ Caractéristiques personnalisées │
|
||
│ Tension max ........ [ 200 V ] │
|
||
│ Tolérance .......... [ 5 % ] │
|
||
│ │
|
||
│ [ + Ajouter champ ] [ + Ajouter une table ] │
|
||
│ │
|
||
│ [ Annuler ] [ Enregistrer ] │
|
||
└───────────────────────────────────────────────────────┘
|
||
(fond flouté avec la liste des objets visible)
|
||
|
||
|
||
## 5. Modal – Analyse sortie de commande hardware (lspci / lsusb)
|
||
┌───────────────────────────────────────────────────────┐
|
||
│ Analyser sortie de commande │
|
||
├───────────────────────────────────────────────────────┤
|
||
│ Collez le résultat ici : │
|
||
│ │
|
||
│ 03:00.0 Network controller: Intel Corporation Wi-Fi 6 │
|
||
│ AX200 (rev 1a) │
|
||
│ Kernel driver in use: iwlwifi │
|
||
│ │
|
||
│ [ Analyser ] │
|
||
│ │
|
||
│ Résultats détectés : │
|
||
│ • Carte réseau WiFi Intel AX200 │
|
||
│ Marque : Intel │
|
||
│ Modèle : AX200 │
|
||
│ Driver : iwlwifi │
|
||
│ │
|
||
│ [ + Créer cet objet ] [ + Créer tous ] │
|
||
│ │
|
||
│ [ Fermer ] │
|
||
└───────────────────────────────────────────────────────┘
|
||
|
||
## 6. Modal – Upload pièces jointes (drag & drop)
|
||
|
||
┌───────────────────────────────────────────────────────┐
|
||
│ Ajouter pièces jointes │
|
||
├───────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ Glissez-déposez ici ou cliquez │
|
||
│ │
|
||
│ Images • PDF • Markdown • Autres │
|
||
│ │
|
||
│ Fichiers sélectionnés : │
|
||
│ • AX200-datasheet.pdf (2.1 Mo) │
|
||
│ • photo-face-avant.jpg (1.4 Mo) │
|
||
│ • tuto-soudure.md (8 Ko) │
|
||
│ │
|
||
│ [Annuler] [Uploader 3 fichiers] │
|
||
└───────────────────────────────────────────────────────┘
|
||
|
||
|
||
## 7. Page Emplacements – Arborescence + détails (Page complète)
|
||
|
||
|
||
┌──────────────────────────────────────────────────────────────────────────────┐
|
||
│ MatosBox ◄ Emplacements │
|
||
├──────────────────────────────────────────────────────────────────────────────┤
|
||
│ Recherche emplacement : [ atelier ] │
|
||
│ │
|
||
│ ┌─────────────────────────────┐ ┌─────────────────────────────────────────┐ │
|
||
│ │ Arborescence │ │ Détails emplacement sélectionné │ │
|
||
│ │ │ │ │ │
|
||
│ │ ▼ Atelier │ │ Nom : Atelier │ │
|
||
│ │ ├─ Étagère composants │ │ Type : Zone de travail │ │
|
||
│ │ │ └─ Boîte résistances │ │ Nombre d’objets : 187 │ │
|
||
│ │ └─ Étagère outils │ │ Valeur totale : 1 240 € │ │
|
||
│ │ │ │ │ │
|
||
│ │ ▼ Maison │ │ Objets les plus nombreux : │ │
|
||
│ │ └─ Bureau │ │ • Résistance 10kΩ ............. 48 │ │
|
||
│ │ └─ PC Salon │ │ • Vis M3 ...................... 120 │ │
|
||
│ │ │ │ │ │
|
||
│ └─────────────────────────────┘ └─────────────────────────────────────────┘ │
|
||
│ │
|
||
│ [ + Nouvel emplacement ] │
|
||
└──────────────────────────────────────────────────────────────────────────────┘
|
||
|
||
================================================================================
|
||
LISTE DES SCRIPTS DE TESTS POUR MATOSBOX
|
||
================================================================================
|
||
|
||
Date : 21 janvier 2026
|
||
Auteur : Grok (basé sur la discussion avec Gilles)
|
||
|
||
1. Tests autour de l'analyse / parsing des commandes hardware (lspci, lsusb, etc.)
|
||
|
||
N° | Type | Description | Entrée attendue | Sortie attendue (extrait JSON) | Outil / Méthode suggérée | Priorité
|
||
---|--------------------|-----------------------------------------------------------------------------|------------------------------------------------------|--------------------------------------------------------------------------------------------------------|----------------------------------------|---------
|
||
1 | Unitaire | Parsing d'une sortie lspci -v classique | Chaîne multi-lignes lspci | JSON avec vendor, device, subsystem, kernel driver, class, etc. | Go (regexp + strings.Split) | Haute
|
||
2 | Unitaire | Parsing sortie lsusb -v (Bus, Device, idVendor, idProduct, etc.) | Sortie lsusb -v | JSON array de périphériques USB avec vendorID, productID, manufacturer, product, driver si présent | Go ou regex multi-lignes | Haute
|
||
3 | Unitaire | Cas vide / invalide | "" ou "Error: permission denied" | JSON vide ou { "error": "..." } | Go (validation pré-parse) | Moyenne
|
||
4 | Unitaire | Parsing partiel (sortie lspci incomplète) | Sortie tronquée | JSON avec champs disponibles + "partial": true | Go | Moyenne
|
||
5 | Intégration | Appel API POST /analyse-commande avec texte brut | { "texte": "lspci -v sortie..." } | 200 + { "resultat": { ... JSON parsé ... } } | curl / Postman + serveur test | Haute
|
||
6 | Fonctionnel | Après parsing → clic "+ Créer cet objet" → vérif création | JSON parsé + clic bouton | Nouvel Objet créé + lien EquipementHote créé ou réutilisé | Playwright / Cypress | Haute
|
||
7 | Performance | Parsing sortie lspci très longue (~200 périphériques) | Sortie lspci machine virtuelle surchargée | Temps < 500 ms, mémoire raisonnable | Go benchmark + test unitaire | Moyenne
|
||
|
||
2. Tests autour de l'import de commandes (Amazon / AliExpress / autres)
|
||
|
||
N° | Type | Description | Entrée | Sortie attendue | Outil / Méthode | Priorité
|
||
---|--------------------|-------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------|------------------------------------------|---------
|
||
8 | Unitaire | Parse CSV Amazon (Order ID, Date, Item Name, Price, Qty…) | Fichier CSV Amazon | Slice { nom, prix, date_achat, quantite, boutique: "Amazon", ... } | Go (encoding/csv) | Haute
|
||
9 | Unitaire | Parse CSV AliExpress (Order Number, Product Name, Unit Price…) | CSV AliExpress | Même structure interne que Amazon | Go (encoding/csv) | Haute
|
||
10 | Unitaire | Import JSON générique (format standardisé ou extension navigateur) | { "commandes": [ { "nom": "...", "prix": 12.99, ... } ] } | Slice d'objets MatosBox prêts à insérer | Go (encoding/json) | Moyenne
|
||
11 | Intégration | POST multipart /v1/imports/commandes avec fichier CSV | Fichier + boutique="amazon" | 200 + { "importes": 42, "erreurs": 0, "objets_crees": 38 } | curl / Postman | Haute
|
||
12 | Fonctionnel | Import même CSV deux fois → pas de doublons si même Order ID | Même fichier deux fois | Seconde importation → 0 nouveaux objets (ou update quantité si configuré) | Test E2E (Cypress/Playwright) | Haute
|
||
13 | Fonctionnel | Vérification champ boutique bien setté ("Amazon", "AliExpress", etc.) | CSV Amazon + CSV AliExpress | Tous les objets ont le bon champ boutique | Test E2E | Moyenne
|
||
14 | Erreur | Upload fichier mal formé ou PDF au lieu de CSV | Fichier corrompu / mauvais format | 400 + message "Format non supporté" ou "Colonnes manquantes" | Postman + assertions | Moyenne
|
||
15 | Performance | Import CSV 500–1000 lignes (cas extrême) | Gros fichier CSV | Import terminé < 10 s, mémoire raisonnable | Go benchmark + test intégration | Moyenne
|
||
|
||
3. Tests transversaux / end-to-end importants
|
||
|
||
N° | Type | Description | Flux | Critère de succès | Outil principal | Priorité
|
||
---|--------------------|-------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------|------------------------------------------|---------
|
||
16 | E2E | Workflow complet hardware : coller lspci → analyser → + Créer objet → vérif création | Page objet → modal analyse → création objet | Nouvel Objet créé avec champs remplis + lien EquipementHote correct | Cypress / Playwright | Très haute
|
||
17 | E2E | Import CSV Amazon → vérif liste objets → ouvrir un objet importé | Dashboard → Import → Liste Objets → Fiche Objet | Objet visible avec prix/date/boutique corrects + pièce jointe si importée | Cypress / Playwright | Haute
|
||
18 | E2E | Import même commande 2× → pas de doublon si même Order ID | Import ×2 | Nombre d'objets reste identique après 2e import | Cypress | Haute
|
||
19 | Sécurité | Injection via commande (coller texte avec <script>alert(1)</script>) | Modal analyse avec texte malveillant | JSON généré propre, pas d'exécution JS dans frontend | Test manuel + scan XSS | Moyenne
|
||
20 | Sauvegarde | Après import CSV + scan lspci → export ZIP → réimport → vérifier intégrité | Import → modifications → Export ZIP → Import ZIP | Tous objets, pièces jointes, liens hôte restaurés correctement | Script bash + test manuel | Moyenne
|
||
|
||
Ordre de priorité suggéré (premiers tests à faire) :
|
||
|
||
1. Tests unitaires parsing lspci / lsusb (n°1–4)
|
||
2. Endpoint analyse-commande + création items (n°5–6)
|
||
3. Import CSV Amazon/AliExpress basique (n°8–11)
|
||
4. E2E workflow complet hardware + import (n°16–17)
|
||
5. Tests de dédoublonnage et erreurs (n°12,14)
|
||
|
||
|
||
================================================================================
|
||
CONSIGNE D'INTÉGRATION DE L'ÉDITEUR MARKDOWN (STYLE EASYMDE)
|
||
POUR MATOSBOX
|
||
================================================================================
|
||
|
||
Date : 21 janvier 2026
|
||
Auteur : Grok (basé sur la discussion avec Gilles)
|
||
|
||
Objectif :
|
||
Intégrer un éditeur Markdown simple et agréable (inspiré d'EasyMDE) dans MatosBox.
|
||
Fonctionnalités demandées :
|
||
- Bouton "+" → Ouvre un popup (modal) avec l'éditeur intégré.
|
||
- Bouton/icône "Enregistrer" → Sauvegarde le fichier .md dans un dossier dédié.
|
||
- Nom du fichier : compréhensible + unique (ex. : tuto-montage-carte-wifi-abcdef12.md).
|
||
- Possibilité d'éditer un fichier .md déjà existant (chargement du contenu).
|
||
- Le fichier est lié à l'objet dans la base de données (table PieceJointe ou équivalent).
|
||
- Le popup est moderne : coins arrondis, ombre douce, compatible thèmes dark/light/Monokai/Gruvbox.
|
||
|
||
Étapes d'intégration :
|
||
|
||
1. Installation (frontend Nuxt/Vue) :
|
||
pnpm add easymde
|
||
(optionnel : pnpm add highlight.js pour coloration code)
|
||
|
||
Ajouter le CSS global dans app.vue ou layouts/default.vue :
|
||
import 'easymde/dist/easymde.min.css'
|
||
|
||
2. Composant réutilisable : components/MarkdownEditor.vue
|
||
- Utilise EasyMDE avec toolbar personnalisée (gras, italique, listes, code, preview, fullscreen)
|
||
- v-model pour synchroniser le contenu
|
||
- Hauteur ~400–500px, police monospace
|
||
- Preview live à droite (split view)
|
||
- Compatible thèmes via CSS vars (--bg-primary, --text-primary, etc.)
|
||
|
||
3. Popup modal : components/TutoMarkdownModal.vue
|
||
- Ouvre en overlay (backdrop-blur, z-50)
|
||
- Titre du tuto (input texte)
|
||
- MarkdownEditor intégré
|
||
- Boutons : Annuler / Enregistrer (avec icône disquette)
|
||
- Modes : 'add' (nouveau) ou 'edit' (chargement contenu existant)
|
||
- Props : isOpen, mode, initialTitle, initialContent, objetId
|
||
- Emits : close, saved (avec chemin fichier retourné)
|
||
|
||
4. Utilisation dans la fiche objet (ex. pages/objets/[id].vue)
|
||
- Section "Tutos Markdown"
|
||
- Liste des tutos existants (titre + boutons Éditer / Supprimer)
|
||
- Bouton "+ Ajouter un tuto Markdown" → ouvre modal en mode 'add'
|
||
- Sur édition : charge contenu via API GET /tutos/{id}/contenu
|
||
|
||
5. Backend Go (Gin + Ent)
|
||
- POST /v1/objets/{id}/tutos
|
||
- Reçoit { titre, contenu }
|
||
- Génère nom fichier : slug(titre) + short-uuid + ".md"
|
||
- Sauvegarde dans dossier configurable (env TUTOS_DIR = /data/tutos/)
|
||
- Crée entrée PieceJointe :
|
||
- categorie: "markdown_tuto"
|
||
- nom_fichier
|
||
- chemin
|
||
- objet_id
|
||
- GET /v1/tutos/{id}/contenu → lit le fichier et renvoie le texte brut
|
||
- PUT pour mise à jour (overwrite fichier + update DB si besoin)
|
||
- DELETE → supprime fichier + entrée DB
|
||
|
||
6. Règles nommage fichier
|
||
- slug(titre) : minuscules, espaces → tirets, accents supprimés
|
||
- short UUID (8 premiers caractères) pour unicité
|
||
- Exemple : "tuto-installation-carte-wifi-abcdef12.md"
|
||
|
||
7. Sécurité & Bonnes pratiques
|
||
- Sanitize Markdown au rendu (markdown-it + filtre XSS)
|
||
- Limite taille contenu (~100 Ko max par tuto)
|
||
- Permissions dossier tutos : 0755, propriétaire app
|
||
- Backup inclus dans export ZIP global
|
||
|
||
8. Améliorations futures possibles
|
||
- Upload images via drag & drop (intercept event EasyMDE → appel API upload)
|
||
- Sauvegarde automatique (debounce 30s)
|
||
- Coloration syntaxique avec highlight.js (thèmes Monokai/Gruvbox)
|
||
|
||
================================================================================
|
||
Fin de la consigne
|
||
================================================================================
|
||
|
||
Plan de Développement Découpé en Étapes pour un Agent de Dev
|
||
Voici un plan clair, découpé en phases (basé sur le document : MVP, Extensions, Polish). Il est conçu pour un agent expert web senior (comme Claude Code), avec étapes backend/frontend/API/DB/UI/test. Chaque étape inclut dépendances, outils, et critères de validation. Priorité aux TODO du doc.
|
||
Consignes générales pour l'agent :
|
||
|
||
Langue : Commentaires code en français ; UI/messages en français.
|
||
Style : Go : golangci-lint ; Vue : ESLint + Prettier.
|
||
Git : Branches feature/ (ex. feature/objets-crud) ; PR reviews.
|
||
Tests : Unitaires (Go test/Vitest) + E2E (Cypress) pour chaque étape.
|
||
Sécurité : Auth JWT sur endpoints ; sandbox exec (lsusb/lspci).
|
||
Perf : Limites (50MB upload, cache stats).
|
||
|
||
Phase 1 : MVP (1-2 mois) – Core (Objets, Emplacements, Pièces Jointes)
|
||
Objectif : Fonctionnalités de base pour inventaire simple (5000 objets max).
|
||
|
||
Setup Projet Global (1-2 jours)
|
||
Créer mono-repo : backend/ (Go), frontend/ (Nuxt/Vue), data/, docs/ (Vitepress), migrations/.
|
||
Config .env, config.yaml, docker-compose.yml (SQLite default).
|
||
Init Git + .gitlab-ci.yml pour CI/CD basique.
|
||
Taskfile.yml pour tâches (build, test, migrate).
|
||
Validation : Lancer localement (go run + npm dev) ; Docker up sans erreur.
|
||
|
||
Backend DB & Schémas (3-5 jours)
|
||
Installer Ent, Goose/Atlas.
|
||
Implémenter schémas Ent en français : tables Objet, Categorie, Emplacement, LienObjetEmplacement, ChampPersonnalise, PieceJointe (multiples images/PDF/MD).
|
||
Migrations initiales (arbre récursif pour Categorie/Emplacement).
|
||
Activer WAL pour SQLite.
|
||
Validation : Générer DB ; tester migration SQLite → Postgres (pgloader).
|
||
|
||
Backend API Core (5-7 jours)
|
||
Installer Gin, Swaggo.
|
||
Endpoints : GET/POST/PUT/DELETE /v1/objets ; /v1/objets/{id}/pieces_jointes (POST upload multiple, avec MIME type et catégorie).
|
||
Services : CRUD basique, recherche full-text.
|
||
Commentaires en français.
|
||
Validation : Docs Swagger OK ; Postman tests (upload 3 fichiers → DB + dossier /data/pieces_jointes/).
|
||
|
||
Frontend Base (5-7 jours)
|
||
Setup Nuxt : pages /dashboard, /objets, /objets/[id], /emplacements.
|
||
Composants : ObjetCard.vue (icônes Heroicons/Lucide), FileUploader.vue (drag & drop).
|
||
Stores Pinia : UseObjetsStore.
|
||
UI : Tailwind + Shadcn-vue (rounded, shadows).
|
||
Validation : Liste objets, fiche détaillée, upload pièces jointes fonctionnent.
|
||
|
||
Intégration & Tests Phase 1 (3 jours)
|
||
Connexion frontend → backend (API calls).
|
||
Tests unitaires : Go (CRUD DB), Vitest (composants).
|
||
E2E Cypress : Ajout objet, upload multiple.
|
||
Validation : App locale OK avec ~100 objets test.
|
||
|
||
|
||
Phase 2 : Extensions (Mois 3) – Scan Hardware, Garanties, Imports
|
||
Objectif : Ajouts avancés (scan, imports).
|
||
|
||
Gestion Garanties & Prêts (4 jours)
|
||
DB : Ajouter table Garantie, Pret.
|
||
API : Endpoints /v1/objets/{id}/garanties, /v1/objets/{id}/prets.
|
||
Services : Alertes (cron job email).
|
||
Frontend : Sections dans fiche objet ; modals pour ajout/édition.
|
||
Validation : Test alerte expiration.
|
||
|
||
Scan Hardware & Analyse Commandes (5-7 jours)
|
||
Backend : Service parse (lspci/lsusb) → JSON (regex/strings).
|
||
API : POST /v1/objets/{id}/analyse-commande ; POST /v1/objets/ajouter-par-commande (création auto avec ID hôte unique).
|
||
DB : Table EquipementHote ; champ resultat_commande_json en JSONB.
|
||
Frontend : Modal AnalyseCommande.vue (textarea + boutons "+ Créer").
|
||
Validation : Test parsing sortie lspci → création 2 objets.
|
||
|
||
Imports Achats (4 jours)
|
||
Backend : Parse CSV/JSON (Amazon/AliExpress) → objets.
|
||
API : POST /v1/imports/commandes (multipart fichier + boutique).
|
||
DB : Table HistoriqueAchat.
|
||
Frontend : Page /achats ; modal upload CSV.
|
||
Validation : Import CSV → 10 objets créés sans doublons.
|
||
|
||
Intégration & Tests Phase 2 (4 jours)
|
||
Ajouts UI : Modals pour analyse/imports.
|
||
Tests : Unitaires (parse commandes), E2E (workflow scan → création).
|
||
Perf : Test 500 lignes CSV <10s.
|
||
Validation : App gère 1000 objets avec scan/import.
|
||
|
||
|
||
Phase 3 : Polish (Mois 4) – Thèmes, UI Responsive, Tutos MD
|
||
Objectif : Finalisation UX, docs, déploiement.
|
||
|
||
Thèmes & Styles (3 jours)
|
||
Frontend : Switch thèmes (CSS vars : light/dark/monokai/gruvbox).
|
||
Intégrer Heroicons + Lucide.
|
||
Popups avec backdrop-blur ; responsive (modal → page sur mobile).
|
||
Fonts : Inter.
|
||
Validation : Test switch système (prefers-color-scheme).
|
||
|
||
Éditeur Markdown & Tutos (4 jours)
|
||
Frontend : Composants MarkdownEditor.vue, TutoMarkdownModal.vue.
|
||
Backend : Endpoints /v1/objets/{id}/tutos (sauvegarde .md dans /data/tutos/, nom unique slug+uuid).
|
||
UI : Bouton "+" dans fiche → popup ; édition existant.
|
||
Rendu : Markdown-it pour preview.
|
||
Validation : Créer/éditer tuto → fichier + DB OK.
|
||
|
||
QR, Backups, Alertes (4 jours)
|
||
Backend : Génère QR ; backups ZIP (DB + dossiers).
|
||
API : GET /v1/qrcode/{id} ; POST /v1/backups.
|
||
Frontend : Bouton QR dans fiche ; alertes UI.
|
||
Validation : Export ZIP → réimport sans perte.
|
||
|
||
Documentation & CI/CD (3 jours)
|
||
Vitepress pour docs.
|
||
Weblate pour i18n (français default).
|
||
GitLab CI : Build/test/deploy.
|
||
Validation : Docs en ligne ; traductions OK.
|
||
|
||
Tests Globaux & Déploiement (5 jours)
|
||
E2E complet : Cypress (uploads, thèmes, scan, imports).
|
||
Sécurité : OWASP scans.
|
||
Déploiement : Docker images (hardened/rootless) ; Raspberry Pi test.
|
||
Releases : v0.1.0 sur GitHub/Docker Hub.
|
||
Validation : App full avec 5000 objets simulés.
|
||
|
||
|
||
## autres remarques a integrer
|
||
|
||
- version du backend et du frontend afficher dans le footer
|
||
- theme gruvbox dark ( style seventies par defaut)
|
||
- onglet setting permet de regler les parametre du backend et du frontend ( stock" sous forme de config.json)
|
||
- onglet debug avec des log pour le backend et le frontend
|
||
- timezone europe/paris |