Salle-Réservation

Application mobile de réservation de salles multi-tenant — iOS, Android et Web.

Stack technique

Couche	Technologie
Mobile/Web	Expo 52 + React Native 0.76
Navigation	Expo Router v4 (file-based)
État global	Zustand
Backend/DB	Supabase (PostgreSQL + Auth + Realtime)
Notifications	Expo Notifications
i18n	i18next + react-i18next (FR/AR)
Validation	Zod
Requêtes	TanStack Query (phase 2)

Structure du projet

salle-reservation/
├── app/                        # Expo Router — chaque fichier = une route
│   ├── _layout.tsx             # Root layout (i18n, notifications)
│   ├── tabs/
│   │   ├── _layout.tsx         # Bottom tab navigation
│   │   ├── index.tsx           # Accueil — stats + prochaines réservations
│   │   ├── rooms.tsx           # Liste des salles
│   │   ├── bookings.tsx        # Mes réservations
│   │   ├── admin.tsx           # Tableau de bord admin
│   │   └── display.tsx         # Affichage public (semaine/mois + plan)
│   ├── rooms/
│   │   └── [id].tsx            # Détail d'une salle
│   └── booking/
│       ├── [roomId].tsx        # Formulaire de réservation
│       └── detail/[id].tsx     # Détail d'une réservation
│
├── components/
│   ├── ui/
│   │   └── StatusBadge.tsx     # Badge coloré par statut
│   ├── booking/
│   │   └── BookingCard.tsx     # Carte résumé d'une réservation
│   └── rooms/
│       └── RoomCard.tsx        # Carte d'une salle
│
├── constants/index.ts           # Couleurs, typo, espacements, statuts
├── hooks/
│   ├── useBookings.ts           # Sélecteurs et actions réservations
│   └── useRooms.ts              # Sélecteurs et actions salles
├── i18n/
│   ├── fr.ts                    # Traductions françaises
│   ├── ar.ts                    # Traductions arabes
│   └── index.ts                 # Config i18next
├── lib/
│   ├── supabase.ts              # Client Supabase
│   ├── database.types.ts        # Types DB + schéma SQL commenté
│   └── notifications.ts         # Push notifications
├── store/index.ts               # Zustand store (état global + données démo)
└── types/index.ts               # Types TypeScript métier

Démarrage rapide

# 1. Installer les dépendances
npm install

# 2. Configurer les variables d'environnement
cp .env.example .env
# Renseigner EXPO_PUBLIC_SUPABASE_URL et EXPO_PUBLIC_SUPABASE_ANON_KEY

# 3. Lancer
npx expo start

# iOS
npx expo start --ios

# Android
npx expo start --android

# Web
npx expo start --web

Configuration Supabase

1. Créer un projet sur supabase.com
2. Exécuter le schéma SQL depuis lib/database.types.ts (commentaires en haut du fichier)
3. Activer Row Level Security sur toutes les tables
4. Copier l'URL et la clé anon dans .env

Variables d'environnement

EXPO_PUBLIC_SUPABASE_URL=https://xxxx.supabase.co
EXPO_PUBLIC_SUPABASE_ANON_KEY=eyJhbGci...

Internationalisation

Ajouter une nouvelle langue :

1. Créer i18n/en.ts en copiant i18n/fr.ts
2. Importer et ajouter dans i18n/index.ts
3. Ajouter dans SUPPORTED_LANGUAGES

Workflow de réservation

Demande soumise (pending)
    → Responsable notifié (push)
    → Validation ou refus (inProgress → validated | refused)
    → Demandeur notifié (push)
    → Rappels automatiques (J-1, H-2) via Edge Function Supabase

Phases de développement

Phase 1 (MVP — ce projet)

• Navigation multi-écrans
• Gestion des salles (ajout, activation/désactivation)
• Formulaire de réservation complet
• Workflow de validation admin
• Affichage public (semaine/mois + plan)
• Bilingue FR/AR avec support RTL
• Store Zustand avec données de démo

Phase 2

• Connexion Supabase réelle (remplacer le store démo)
• Authentification (admin vs utilisateur)
• Push notifications réelles
• Éditeur de plan visuel
• Vue calendrier interactive

Phase 3

• Multi-tenant complet (plusieurs institutions)
• Analytics et exports
• Mode kiosque pour affichage TV