# Design — Webapp Gestion Jardin

**Date :** 2026-02-21
**Stack :** FastAPI + Vue 3 + SQLite + Docker Compose + Tailwind CSS
**Langue :** Français
**Thème :** Gruvbox Dark Seventies

---

## Architecture globale

Monorepo avec deux services distincts orchestrés par Docker Compose :
- `backend/` : API FastAPI (Python), SQLite, gestion des uploads
- `frontend/` : SPA Vue 3/Vite, servie par Nginx en production
- `data/` : volume persistant (SQLite + images uploadées)

```
jardin/
├── backend/
│   ├── app/
│   │   ├── main.py
│   │   ├── database.py
│   │   ├── models/
│   │   └── routers/
│   ├── tests/
│   ├── seed.py
│   ├── requirements.txt
│   └── Dockerfile
├── frontend/
│   ├── src/
│   │   ├── views/
│   │   ├── components/
│   │   ├── router/
│   │   ├── stores/
│   │   └── api/
│   ├── tailwind.config.js
│   ├── package.json
│   └── Dockerfile
├── data/
├── docker-compose.yml
└── README.md
```

---

## Backend FastAPI

### Modèles SQLModel

| Fichier | Tables |
|---|---|
| `models/garden.py` | `Garden`, `GardenCell`, `GardenImage`, `Measurement` |
| `models/plant.py` | `PlantVariety`, `PlantImage` |
| `models/planting.py` | `Planting`, `PlantingEvent` |
| `models/task.py` | `Task` |
| `models/settings.py` | `UserSettings`, `LunarCalendarEntry` |

### Routers API (préfixe `/api`)

| Router | Endpoints |
|---|---|
| `gardens.py` | CRUD `/gardens`, `/gardens/{id}/cells`, `/gardens/{id}/measurements` |
| `varieties.py` | CRUD `/varieties` |
| `plantings.py` | CRUD `/plantings`, `/plantings/{id}/events` |
| `tasks.py` | CRUD `/tasks` |
| `settings.py` | GET/PUT `/settings`, GET `/lunar?month=YYYY-MM` |
| `media.py` | POST `/upload`, DELETE `/upload/{filename}` |

### Choix techniques

- SQLModel synchrone (pas d'async DB, compatible SQLite sans friction)
- `lifespan` FastAPI : création des tables au démarrage, seed si DB vide
- CORS ouvert (`*`) configurable via `.env`
- Validation Pydantic native via SQLModel
- Sans authentification pour le MVP (module prévu, non implémenté)

---

## Frontend Vue 3

### Stack

Vue 3 + Vite + TypeScript + Pinia + Vue Router + Tailwind CSS

### Routes

| Route | Vue | Rôle |
|---|---|---|
| `/` | `DashboardView` | Tâches du jour, mesures récentes, plantations actives |
| `/jardins` | `JardinsView` | Liste des jardins + création |
| `/jardins/:id` | `JardinDetailView` | Fiche jardin + grille 2D |
| `/varietes` | `VarietesView` | Catalogue des variétés |
| `/plantations` | `PlantationsView` | Liste filtrable des plantations |
| `/planning` | `PlanningView` | Calendrier mois/semaine |
| `/taches` | `TachesView` | Liste / Kanban des tâches |
| `/lunaire` | `LunaireView` | Calendrier lunaire |
| `/reglages` | `ReglagesView` | Paramètres, export/import |

### Layout

- `AppHeader.vue` — navigation fixe, liens actifs, icônes
- `AppDrawer.vue` — menu burger slide-in sur mobile
- Toutes les vues dans le layout principal `App.vue`

### Thème Tailwind Gruvbox

```js
// tailwind.config.js
colors: {
  bg:         '#282828',
  'bg-soft':  '#3c3836',
  text:       '#ebdbb2',
  'text-muted': '#a89984',
  green:      '#b8bb26',
  yellow:     '#fabd2f',
  blue:       '#83a598',
  orange:     '#fe8019',
  red:        '#fb4934',
}
```

### Stores Pinia

Un store par domaine (`useGardensStore`, `useVarietesStore`, `usePlantationsStore`, `useTasksStore`).
Les appels API sont centralisés dans `src/api/` (un fichier par ressource).

---

## Périmètre de la session

Livrable : scaffold complet + étape 1 fonctionnelle

- [x] `docker-compose.yml` + Dockerfiles
- [x] Backend FastAPI : structure + modèles + CRUD complet (jardins, variétés, plantations, tâches)
- [x] Seed de démo (1 jardin, variétés, plantations, tâches)
- [x] Frontend Vue 3 : structure + navigation + pages (squelettes avec appels API réels)
- [x] README d'installation