# green-e-react-crud — Agent Claude

## Vue d'ensemble

Dashboard d'administration React CRUD pour la gestion de produits green-e.
Stack : **React 19**, **TypeScript**, **Bun** (runtime + bundler), **TanStack Router**, **TanStack Query**, **Radix UI**, **Tailwind CSS v4**.

## Architecture

```
src/
├── api/          # Appels fetch bruts (get, post, patch, delete)
├── hooks/queries/ # Hooks TanStack Query (useQuery / useMutation)
├── pages/        # Pages par domaine (products/, contacts/, users/, authentification/)
├── components/   # Composants réutilisables (ui/, dashboard/)
├── types/        # Interfaces TypeScript (Products, Post, Image, Contact, User)
├── routes/       # Définitions de routes TanStack Router + constantes d'URLs
├── auth/         # Gestion du token JWT (localStorage)
└── constants.ts  # API_URL et BACK_URL (depuis process.env)
```

## Ressources gérées

| Ressource  | Identifiant  | Route API         |
|------------|-------------|-------------------|
| Category   | `slug`      | `/categories`     |
| Length     | `slug`      | `/lengths`        |
| Image      | `id`        | `/images`         |
| Product    | `slug`      | `/products`       |
| Contact    | `id`        | `/contacts`       |
| User       | `id`        | `/users`          |

## Conventions API

- **GET public** (`get`) : pas d'auth, `Accept: application/json`
- **GET privé** (`authedGet`) : Bearer token, lève `Error('Unauthorized')` sur 401
- **POST/DELETE** : Bearer token requis
- **PATCH** : `Content-Type: application/merge-patch+json` (sauf images : `POST` + `X-HTTP-Method-Override: PATCH`)
- **Uploads fichiers** : `FormData` (images, category image, product documents)
- **Catégorie dans Product** : doit être une IRI (`/api/categories/{id}`), convertir les URLs complètes
- **Tableaux (Product)** : sérialisés en `field[]` dans FormData

## Ajouter une nouvelle ressource

1. **Type** → `src/types/MonType.ts`
2. **API** → ajouter les fonctions dans `src/api/{get,post,patch,delete}.ts`
3. **Hooks** → ajouter les queries/mutations dans `src/hooks/queries/{get,post,patch,delete}.ts`
4. **Pages** → créer `src/pages/dashboard/maRessource/` avec `Listing`, `Add`, `Modify`
5. **Routes** → ajouter les constantes dans `src/routes/routes.constants.ts` et les routes dans `src/routes/routes.tsx`
6. **Sidebar** → référencer la route dans `src/components/dashboard/AppSidebar.tsx`

## Commandes

```bash
bun run dev       # Démarrage en mode hot-reload
bun run build     # Build de production
bun run lint      # ESLint
bun run format    # Prettier
```

## Variables d'environnement

```
API_URL   # URL de base de l'API (ex: http://127.0.0.1:8000/api)
BACK_URL  # URL du back (pour les assets)
```

## Points d'attention

- Les tokens JWT sont stockés et lus via `src/auth/token.ts`
- La navigation utilise exclusivement les constantes de `src/routes/routes.constants.ts`
- Les composants Radix UI sont wrappés dans `src/components/ui/`
- Le `Datagrid` générique (`src/components/dashboard/Datagrid.tsx`) est utilisé pour tous les listings
- `DynamicInputList` gère les champs tableau (short_description, specifications, etc.)