# visitapp-web

App visiteur web MyInfoMate — `app.myinfomate.be/[slug]`

Next.js 14+ (App Router), TypeScript, Tailwind CSS.

---

## Prérequis

- Node.js 20+
- npm ou pnpm
- Accès à une instance `manager-service` (local ou prod)

---

## Variables d'environnement

| Variable | Description |
|----------|-------------|
| `NEXT_PUBLIC_API_URL` | URL de base de `manager-service` |

Créer les fichiers suivants (non commités) :

```bash
# .env.local — dev local vers backend local
NEXT_PUBLIC_API_URL=http://localhost:5000

# .env.production.local — build local vers backend prod
NEXT_PUBLIC_API_URL=https://api.myinfomate.be
```

---

## Génération du client API

Le client TypeScript est généré depuis le Swagger de `manager-service`.

```bash
npx @hey-api/openapi-ts -i http://localhost:5000/openapi.json -o src/lib/api/generated
```

À relancer après chaque modification des DTOs ou endpoints dans `manager-service`.

---

## Développement local

```bash
npm install
npm run dev
```

L'app tourne sur `http://localhost:3000`.

Pour tester un slug client : `http://localhost:3000/nom-du-client`

---

## Tester un build local pointant vers la prod

```bash
# Crée .env.production.local avec NEXT_PUBLIC_API_URL=https://api.myinfomate.be
npm run build
npm run start
```

Permet de valider le build de production avec les vraies données avant déploiement.

---

## Déploiement

Le déploiement est manuel via Docker sur le serveur.

### 1. Se connecter au serveur

```bash
ssh user@server
cd /path/to/manager-service
```

### 2. Builder et relancer le conteneur - A VERIFIER AVANT DE LANCER

```bash
docker compose -f docker-compose-myinfomate.yml build visitapp-web
docker compose -f docker-compose-myinfomate.yml up -d visitapp-web
```

### 3. Vérifier

```bash
docker compose -f docker-compose-myinfomate.yml logs -f visitapp-web
```

L'app est accessible sur `https://app.myinfomate.be`.

---

## Structure du projet

```
src/
├── app/
│   ├── [slug]/
│   │   ├── layout.tsx          # Fetch config client, inject thème CSS
│   │   ├── page.tsx            # Accueil (grille configurations)
│   │   ├── sections/
│   │   │   └── [sectionId]/
│   │   │       └── page.tsx    # Dispatcher par type de section
│   │   ├── agenda/
│   │   ├── map/
│   │   └── ...
│   └── layout.tsx              # Root layout
├── lib/
│   ├── api/                    # Client généré depuis OpenAPI manager-service
│   └── i18n.ts                 # Helper traductions (TranslationDTO[])
├── components/
│   ├── ui/                     # Composants génériques
│   └── sections/               # Un composant par type de section
└── context/
    └── VisitorContext.tsx      # Langue sélectionnée, config client
```

---

## Theming multi-client

Le thème est injecté dynamiquement depuis `ConfigurationDTO` :

```css
:root {
  --color-primary: #e52122;
  --color-secondary: #ed7082;
}
```

Tous les composants utilisent `var(--color-primary)` — aucune config par client
côté code, tout vient du backend.