54 lines
4.6 KiB
Markdown
54 lines
4.6 KiB
Markdown
# Structure frontend
|
|
|
|
## Layout principal
|
|
- Header fixe (logo + actions + versions)
|
|
- Grille responsive de cartes produits.
|
|
- Zone debug/logs avec sections SQLite et journaux JSON. (repliable)
|
|
|
|
## Diagramme ASCII (UI globale)
|
|
|
|
|
|
```
|
|
┌──────────────────────────────────────────────────────────────────────────┐
|
|
│ suivi_produits [Add Product] [Refresh] [Settings] FE vX BE vY │
|
|
│ (header fixed) [debug] (⋯) │
|
|
├──────────────────────────────────────────────────────────────────────────┤
|
|
│ Grid (cols = config_frontend.json) │
|
|
│ │
|
|
│ ┌──────────────────────────── Card Produit ──────────────────────────┐ │
|
|
│ │ Boutique + Titre (2 lignes) │ │
|
|
│ │ Amazon │ │
|
|
│ │ Samsung SSD Interne 9100 Pro… │ │
|
|
│ │ │ │
|
|
│ │ ┌───────────────┐ ┌──────────────────────────────────────────┐ │ │
|
|
│ │ │ Image │ │ ACTUEL 249€99 │ │ │
|
|
│ │ │ (non rognée) │ │ PRIX CONSEILLÉ 329€99 (si présent) │ │ │
|
|
│ │ │ │ │ RÉDUCTION -24% (si présent) │ │ │
|
|
│ │ └───────────────┘ │ STOCK Disponible │ │ │
|
|
│ │ │ NOTE 4,7 (967) │ │ │
|
|
│ │ │ CHOIX AMAZON Oui/Non │ │ │
|
|
│ │ │ PRIME Oui/Non │ │ │
|
|
│ │ │ DEAL Oui/Non │ │ │
|
|
│ │ │ Ref: ASIN [Lien produit] │ │ │
|
|
│ │ └──────────────────────────────────────────┘ │ │
|
|
│ │ │ │
|
|
│ │ ┌────────────────────── Graph 30j (clair) ─────────────────────┐ │ │
|
|
│ │ │ ligne + points, axes lisibles, tooltip │ │ │
|
|
│ │ └──────────────────────────────────────────────────────────────┘ │ │
|
|
│ │ │ │
|
|
│ │ Min 249€99 Max 249€99 Tendance → stable +0.0% Dernier: now │ │
|
|
│ │ Catégorie: SSD Type: NVMe │ │
|
|
│ │ │ │
|
|
│ │ [Scrap] [Edit] [Delete] [Détail] │ │
|
|
│ └────────────────────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
└──────────────────────────────────────────────────────────────────────────┘
|
|
```
|
|
page de debug et log qui affiche le contenue des differentes tables sqlite dans des section distincte, une section log qui affiche les log json de scrap
|
|
---
|
|
|
|
|
|
|
|
> Commentaire : le render React maintient `columns_desktop` depuis `config_frontend.json` et passe en 1 colonne sur mobile.
|
|
> Commentaire : chaque `Card` inclut image non rognée, badges, actions (Scrap/Edit/Delete/Détail) et graphique 30j.
|