Reservation de salle
This commit is contained in:
sartron_Northblue
@@ -0,0 +1,34 @@
|
||||
# Node
|
||||
node_modules
|
||||
npm-debug.log
|
||||
.next
|
||||
|
||||
# Python
|
||||
__pycache__
|
||||
*.pyc
|
||||
*.pyo
|
||||
*.pyd
|
||||
.Python
|
||||
env/
|
||||
venv/
|
||||
.venv
|
||||
|
||||
# IDE
|
||||
.vscode
|
||||
.idea
|
||||
*.swp
|
||||
*.swo
|
||||
*~
|
||||
|
||||
# Git
|
||||
.git
|
||||
.gitignore
|
||||
|
||||
# Env files
|
||||
.env
|
||||
.env.local
|
||||
|
||||
# OS
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
+38
@@ -0,0 +1,38 @@
|
||||
# Dependencies
|
||||
node_modules/
|
||||
__pycache__/
|
||||
*.pyc
|
||||
venv/
|
||||
.venv/
|
||||
env/
|
||||
|
||||
# Next.js
|
||||
.next/
|
||||
out/
|
||||
build/
|
||||
|
||||
# Environment variables
|
||||
.env
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# IDE
|
||||
.vscode/
|
||||
.idea/
|
||||
*.swp
|
||||
*.swo
|
||||
|
||||
# OS
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
# Logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Database
|
||||
*.db
|
||||
*.sqlite
|
||||
|
||||
+139
@@ -0,0 +1,139 @@
|
||||
# 🔧 Guide de Dépannage - Expernet
|
||||
|
||||
## Problème : Les onglets "Réserver une salle" et "Mes réservations" ne fonctionnent pas
|
||||
|
||||
### Solution 1 : Vider le cache du navigateur (Recommandé)
|
||||
|
||||
1. **Ouvrez votre navigateur** sur http://localhost:3000
|
||||
2. **Appuyez sur** `Ctrl + Shift + R` (Windows/Linux) ou `Cmd + Shift + R` (Mac)
|
||||
- Cela force le rechargement de la page sans cache
|
||||
3. **Ou utilisez le mode navigation privée** :
|
||||
- Chrome/Edge : `Ctrl + Shift + N`
|
||||
- Firefox : `Ctrl + Shift + P`
|
||||
|
||||
### Solution 2 : Vider complètement le cache
|
||||
|
||||
#### Chrome / Edge
|
||||
1. `Ctrl + Shift + Delete`
|
||||
2. Sélectionnez "Images et fichiers en cache"
|
||||
3. Cliquez sur "Effacer les données"
|
||||
4. Rechargez http://localhost:3000
|
||||
|
||||
#### Firefox
|
||||
1. `Ctrl + Shift + Delete`
|
||||
2. Sélectionnez "Cache"
|
||||
3. Cliquez sur "Effacer maintenant"
|
||||
4. Rechargez http://localhost:3000
|
||||
|
||||
### Solution 3 : Reconstruire complètement le frontend
|
||||
|
||||
Si le problème persiste :
|
||||
|
||||
```bash
|
||||
# Arrêter tous les services
|
||||
docker-compose down
|
||||
|
||||
# Reconstruire uniquement le frontend
|
||||
docker-compose up -d --build frontend
|
||||
|
||||
# Ou reconstruire tout
|
||||
docker-compose up -d --build
|
||||
```
|
||||
|
||||
### Solution 4 : Vérifier la console du navigateur
|
||||
|
||||
1. Appuyez sur `F12` pour ouvrir les outils de développement
|
||||
2. Allez dans l'onglet **Console**
|
||||
3. Recherchez des erreurs en rouge
|
||||
4. Si vous voyez des erreurs, notez-les et contactez le support
|
||||
|
||||
### Solution 5 : Vérifier que les services fonctionnent
|
||||
|
||||
```bash
|
||||
# Vérifier l'état des conteneurs
|
||||
docker-compose ps
|
||||
|
||||
# Tous doivent afficher "Up" dans la colonne STATUS
|
||||
|
||||
# Vérifier les logs du frontend
|
||||
docker-compose logs frontend --tail=20
|
||||
|
||||
# Vérifier les logs du backend
|
||||
docker-compose logs backend --tail=20
|
||||
```
|
||||
|
||||
## Vérification Rapide
|
||||
|
||||
### Test 1 : API Backend
|
||||
Ouvrez dans votre navigateur : http://localhost:8000/rooms
|
||||
- ✅ Vous devez voir un JSON avec la liste des salles
|
||||
|
||||
### Test 2 : Frontend
|
||||
Ouvrez dans votre navigateur : http://localhost:3000
|
||||
- ✅ Vous devez voir la page avec 3 onglets
|
||||
|
||||
### Test 3 : Planning
|
||||
Sur http://localhost:3000 :
|
||||
- ✅ L'onglet "Planning des salles" doit être actif par défaut
|
||||
- ✅ Vous devez voir une grille avec les 5 salles
|
||||
|
||||
## Problèmes Courants
|
||||
|
||||
### Les onglets sont visibles mais ne répondent pas aux clics
|
||||
➡️ **Solution** : Videz le cache (`Ctrl + Shift + R`)
|
||||
|
||||
### La page est blanche
|
||||
➡️ **Solution** :
|
||||
```bash
|
||||
docker-compose restart frontend
|
||||
```
|
||||
|
||||
### Erreur "Cannot connect to server"
|
||||
➡️ **Solution** :
|
||||
```bash
|
||||
# Vérifier que tous les services sont up
|
||||
docker-compose ps
|
||||
|
||||
# Redémarrer si nécessaire
|
||||
docker-compose restart
|
||||
```
|
||||
|
||||
### Les données ne se chargent pas
|
||||
➡️ **Solution** :
|
||||
1. Vérifiez que le backend fonctionne : http://localhost:8000/docs
|
||||
2. Ouvrez F12 > Network pour voir les requêtes
|
||||
3. Vérifiez qu'il n'y a pas d'erreurs CORS
|
||||
|
||||
## Redémarrage Complet (Solution ultime)
|
||||
|
||||
Si rien ne fonctionne :
|
||||
|
||||
```bash
|
||||
# 1. Tout arrêter et nettoyer
|
||||
docker-compose down -v
|
||||
|
||||
# 2. Reconstruire tout
|
||||
docker-compose up -d --build
|
||||
|
||||
# 3. Attendre 30 secondes que tout démarre
|
||||
|
||||
# 4. Ouvrir en mode privé
|
||||
# Chrome: Ctrl + Shift + N
|
||||
# Puis aller sur http://localhost:3000
|
||||
```
|
||||
|
||||
## Accès Direct aux Fonctionnalités
|
||||
|
||||
- **Planning** : http://localhost:3000 (onglet par défaut)
|
||||
- **API Salles** : http://localhost:8000/rooms
|
||||
- **API Réservations** : http://localhost:8000/reservations
|
||||
- **Documentation API** : http://localhost:8000/docs
|
||||
|
||||
## Contact Support
|
||||
|
||||
Si le problème persiste après toutes ces étapes :
|
||||
1. Notez le message d'erreur exact
|
||||
2. Faites une capture d'écran de la console (F12)
|
||||
3. Exécutez : `docker-compose logs > logs.txt`
|
||||
4. Envoyez ces informations au support
|
||||
|
||||
@@ -0,0 +1,187 @@
|
||||
# 📖 Guide d'Utilisation - Expernet Réservation de Salles
|
||||
|
||||
## 🚀 Démarrage Rapide
|
||||
|
||||
### 1. Lancer l'application
|
||||
|
||||
**Windows :**
|
||||
```bash
|
||||
start.bat
|
||||
```
|
||||
|
||||
**Linux/Mac :**
|
||||
```bash
|
||||
docker-compose up -d
|
||||
```
|
||||
|
||||
### 2. Accéder à l'interface
|
||||
|
||||
Ouvrez votre navigateur : **http://localhost:3000**
|
||||
|
||||
## 📊 Consulter le Planning
|
||||
|
||||
### Vue d'ensemble
|
||||
|
||||
1. Cliquez sur l'onglet **"📊 Planning des salles"** (onglet par défaut)
|
||||
2. Sélectionnez une date avec le sélecteur de date
|
||||
3. Le planning affiche :
|
||||
- ✅ **Cases vertes** : Créneaux disponibles
|
||||
- ❌ **Cases rouges** : Créneaux réservés (avec le nom de l'utilisateur)
|
||||
4. Passez la souris sur une case réservée pour voir les détails
|
||||
5. En bas du planning, la liste détaillée des réservations du jour
|
||||
|
||||
### Avantages du Planning
|
||||
|
||||
- 🔍 Vision globale de toutes les salles
|
||||
- ⏰ Horaires de 8h à 22h
|
||||
- 📅 Navigation par date
|
||||
- 👤 Identification rapide de qui a réservé
|
||||
|
||||
## 📅 Comment Réserver une Salle
|
||||
|
||||
### Étape 1 : Consulter le planning (recommandé)
|
||||
|
||||
1. Allez dans **"📊 Planning des salles"**
|
||||
2. Vérifiez les disponibilités pour votre date
|
||||
3. Notez les créneaux libres
|
||||
|
||||
### Étape 2 : Sélectionner une salle
|
||||
|
||||
1. Cliquez sur l'onglet **"📅 Réserver une salle"**
|
||||
2. Vous verrez la liste des 5 salles disponibles à gauche
|
||||
3. Chaque salle affiche :
|
||||
- 👥 Sa capacité
|
||||
- 🔧 Ses équipements
|
||||
- 📝 Sa description
|
||||
4. Cliquez sur la salle souhaitée (elle sera surlignée en bleu)
|
||||
|
||||
### Étape 3 : Remplir le formulaire
|
||||
|
||||
1. **Nom** : Votre nom complet *(obligatoire)*
|
||||
2. **Email** : Votre adresse email *(optionnel)*
|
||||
3. **Date** : Sélectionnez la date de réservation *(obligatoire)*
|
||||
4. **Heure de début** : Heure de début souhaitée *(obligatoire)*
|
||||
5. **Heure de fin** : Heure de fin souhaitée *(obligatoire)*
|
||||
6. **Objet** : Décrivez le but de la réservation *(obligatoire)*
|
||||
|
||||
### Étape 4 : Vérification automatique
|
||||
|
||||
⚡ **Nouveau !** Le système vérifie automatiquement la disponibilité :
|
||||
- ✅ **Message vert** : "Ce créneau est disponible !"
|
||||
- ❌ **Message rouge** : "Ce créneau est déjà réservé. Choisissez un autre horaire."
|
||||
|
||||
Le bouton de confirmation est **automatiquement désactivé** si le créneau est occupé !
|
||||
|
||||
### Étape 5 : Confirmer
|
||||
|
||||
Cliquez sur **"✅ Confirmer la réservation"** (uniquement si le créneau est disponible)
|
||||
|
||||
### ⚠️ Gestion des Conflits
|
||||
|
||||
Le système empêche **automatiquement** les doubles réservations :
|
||||
- ❌ Le bouton de réservation est désactivé si le créneau est occupé
|
||||
- 🔒 Impossible de réserver sur un créneau déjà pris
|
||||
- ✅ Vérification en temps réel pendant la saisie
|
||||
|
||||
## 📋 Consulter vos Réservations
|
||||
|
||||
1. Cliquez sur l'onglet **"📋 Mes réservations"**
|
||||
2. Vous verrez toutes les réservations actuelles avec :
|
||||
- 🏛️ Le nom de la salle
|
||||
- 👤 Le nom de l'utilisateur
|
||||
- 📅 La date
|
||||
- ⏰ Les horaires
|
||||
- 📧 L'email de contact
|
||||
- 📝 L'objet de la réservation
|
||||
|
||||
## ❌ Annuler une Réservation
|
||||
|
||||
1. Dans l'onglet **"Mes réservations"**
|
||||
2. Cliquez sur **"❌ Annuler"** à côté de la réservation
|
||||
3. Confirmez l'annulation
|
||||
|
||||
## 🏛️ Les 5 Salles Expernet
|
||||
|
||||
### 🎓 Salle Atlas (30 personnes)
|
||||
- Vidéoprojecteur, Tableau blanc, WiFi
|
||||
- **Usage** : Grande formation, séminaire
|
||||
|
||||
### 🤝 Salle Horizon (15 personnes)
|
||||
- Écran TV, Tableau blanc, WiFi
|
||||
- **Usage** : Réunion, petit groupe
|
||||
|
||||
### 🎤 Salle Innovation (50 personnes)
|
||||
- Vidéoprojecteur, Sono, WiFi, Climatisation
|
||||
- **Usage** : Conférence, grand événement
|
||||
|
||||
### 💼 Salle Connect (8 personnes)
|
||||
- Écran TV, Visioconférence, WiFi
|
||||
- **Usage** : Réunion d'équipe, visio
|
||||
|
||||
### 💻 Salle Digital (20 personnes)
|
||||
- 20 postes informatiques, Vidéoprojecteur, WiFi
|
||||
- **Usage** : Formation pratique, TP informatique
|
||||
|
||||
## 🔧 Administration
|
||||
|
||||
### Ajouter une nouvelle salle
|
||||
|
||||
Accédez à la documentation API : **http://localhost:8000/docs**
|
||||
|
||||
1. Trouvez l'endpoint `POST /rooms`
|
||||
2. Cliquez sur "Try it out"
|
||||
3. Remplissez les informations :
|
||||
```json
|
||||
{
|
||||
"name": "Salle Créative",
|
||||
"capacity": 12,
|
||||
"equipment": "Tableau interactif, WiFi",
|
||||
"description": "Salle pour ateliers créatifs"
|
||||
}
|
||||
```
|
||||
4. Cliquez sur "Execute"
|
||||
|
||||
### Consulter les statistiques
|
||||
|
||||
Via l'API :
|
||||
- **Toutes les réservations** : http://localhost:8000/reservations
|
||||
- **Réservations par salle** : http://localhost:8000/reservations/room/{id}
|
||||
- **Réservations par date** : http://localhost:8000/reservations/date/2025-10-15
|
||||
|
||||
## 🛠️ Dépannage
|
||||
|
||||
### L'application ne se charge pas
|
||||
```bash
|
||||
# Vérifier l'état des conteneurs
|
||||
docker-compose ps
|
||||
|
||||
# Voir les logs
|
||||
docker-compose logs -f
|
||||
```
|
||||
|
||||
### Erreur de connexion à la base
|
||||
```bash
|
||||
# Redémarrer tous les services
|
||||
docker-compose restart
|
||||
```
|
||||
|
||||
### Réinitialiser complètement
|
||||
```bash
|
||||
# Arrêter et supprimer tout (⚠️ perd les données)
|
||||
docker-compose down -v
|
||||
|
||||
# Relancer
|
||||
docker-compose up -d
|
||||
```
|
||||
|
||||
## 📞 Support
|
||||
|
||||
Pour toute question ou problème, consultez :
|
||||
- 📖 **Documentation API** : http://localhost:8000/docs
|
||||
- 📋 **README** : Voir le fichier README.md
|
||||
- 🔧 **Logs** : `docker-compose logs`
|
||||
|
||||
---
|
||||
|
||||
**Bon usage du système de réservation Expernet ! 🎯**
|
||||
|
||||
@@ -0,0 +1,371 @@
|
||||
# 🏢 Expernet - Système de Réservation de Salles
|
||||
|
||||
Système complet de réservation de salles pour le centre de formation **Expernet**, développé avec **FastAPI** (Backend), **Next.js** (Frontend) et **PostgreSQL** (Base de données), orchestré avec Docker Compose.
|
||||
|
||||
## 📋 Stack Technique
|
||||
|
||||
- **Backend**: FastAPI (Python) avec AsyncPG
|
||||
- **Frontend**: Next.js 14 + TypeScript + Tailwind CSS
|
||||
- **Base de données**: PostgreSQL 16
|
||||
- **Containerisation**: Docker & Docker Compose
|
||||
|
||||
## ✨ Fonctionnalités
|
||||
|
||||
### 🏛️ Gestion des Salles
|
||||
- 5 salles pré-configurées (Atlas, Horizon, Innovation, Connect, Digital)
|
||||
- Affichage des capacités et équipements
|
||||
- Interface intuitive de sélection
|
||||
|
||||
### 📅 Réservations
|
||||
- Formulaire de réservation complet
|
||||
- Champ email optionnel
|
||||
- Sélection de date et horaires
|
||||
- **Vérification en temps réel** de la disponibilité
|
||||
- Détection automatique des conflits d'horaires
|
||||
- **Bouton désactivé** si créneau occupé
|
||||
- Validation des créneaux disponibles
|
||||
- Annulation de réservations
|
||||
|
||||
### 📊 Planning Visuel
|
||||
- **Grille de planning par jour** (8h-22h)
|
||||
- Vue d'ensemble de toutes les salles
|
||||
- Code couleur : ✅ Disponible / ❌ Réservé
|
||||
- Nom de l'utilisateur affiché sur les créneaux réservés
|
||||
- Navigation par date
|
||||
- Liste détaillée des réservations du jour
|
||||
|
||||
### 📋 Suivi
|
||||
- Vue d'ensemble de toutes les réservations
|
||||
- Filtrage par salle et par date
|
||||
- Historique complet
|
||||
|
||||
## 🚀 Démarrage Rapide
|
||||
|
||||
### Prérequis
|
||||
|
||||
- Docker et Docker Compose installés sur votre machine
|
||||
- Ports 3000, 8000 et 5432 disponibles
|
||||
|
||||
### Installation et lancement
|
||||
|
||||
1. **Cloner le projet** (si applicable)
|
||||
```bash
|
||||
git clone <votre-repo>
|
||||
cd dockezr
|
||||
```
|
||||
|
||||
2. **Lancer tous les services avec Docker Compose**
|
||||
```bash
|
||||
docker-compose up -d
|
||||
```
|
||||
|
||||
ou utilisez le script Windows :
|
||||
```bash
|
||||
start.bat
|
||||
```
|
||||
|
||||
Cette commande va :
|
||||
- Créer le réseau Docker `dockezr_network`
|
||||
- Démarrer PostgreSQL sur le port 5432
|
||||
- Créer automatiquement les tables et les 5 salles par défaut
|
||||
- Démarrer le backend FastAPI sur le port 8000
|
||||
- Démarrer le frontend Next.js sur le port 3000
|
||||
|
||||
3. **Accéder à l'application**
|
||||
- **Frontend (Interface de réservation)**: http://localhost:3000
|
||||
- **Backend API**: http://localhost:8000
|
||||
- **Documentation API (Swagger)**: http://localhost:8000/docs
|
||||
- **Documentation API (ReDoc)**: http://localhost:8000/redoc
|
||||
|
||||
## 📁 Structure du Projet
|
||||
|
||||
```
|
||||
dockezr/
|
||||
├── backend/ # API FastAPI
|
||||
│ ├── main.py # Point d'entrée de l'API
|
||||
│ ├── requirements.txt # Dépendances Python
|
||||
│ └── Dockerfile # Configuration Docker
|
||||
│
|
||||
├── frontend/ # Application Next.js
|
||||
│ ├── app/ # Pages et composants Next.js 14
|
||||
│ │ ├── layout.tsx
|
||||
│ │ ├── page.tsx
|
||||
│ │ └── globals.css
|
||||
│ ├── package.json # Dépendances Node.js
|
||||
│ ├── tsconfig.json # Configuration TypeScript
|
||||
│ ├── tailwind.config.ts # Configuration Tailwind
|
||||
│ └── Dockerfile # Configuration Docker
|
||||
│
|
||||
├── docker-compose.yml # Orchestration des services
|
||||
├── .dockerignore # Fichiers ignorés par Docker
|
||||
├── .gitignore # Fichiers ignorés par Git
|
||||
└── README.md # Ce fichier
|
||||
```
|
||||
|
||||
## 🔧 Commandes Utiles
|
||||
|
||||
### Démarrer les services
|
||||
```bash
|
||||
docker-compose up -d
|
||||
```
|
||||
|
||||
### Arrêter les services
|
||||
```bash
|
||||
docker-compose down
|
||||
```
|
||||
|
||||
### Voir les logs
|
||||
```bash
|
||||
# Tous les services
|
||||
docker-compose logs -f
|
||||
|
||||
# Service spécifique
|
||||
docker-compose logs -f backend
|
||||
docker-compose logs -f frontend
|
||||
docker-compose logs -f db
|
||||
```
|
||||
|
||||
### Reconstruire les images
|
||||
```bash
|
||||
docker-compose up -d --build
|
||||
```
|
||||
|
||||
### Arrêter et supprimer les volumes (⚠️ supprime les données)
|
||||
```bash
|
||||
docker-compose down -v
|
||||
```
|
||||
|
||||
### Accéder à un conteneur
|
||||
```bash
|
||||
# Backend
|
||||
docker exec -it dockezr_backend sh
|
||||
|
||||
# Frontend
|
||||
docker exec -it dockezr_frontend sh
|
||||
|
||||
# Base de données
|
||||
docker exec -it dockezr_db psql -U user -d dockezr
|
||||
```
|
||||
|
||||
## 🏛️ Salles Pré-configurées
|
||||
|
||||
Le système est livré avec 5 salles de formation :
|
||||
|
||||
| Salle | Capacité | Équipements |
|
||||
|-------|----------|-------------|
|
||||
| **Salle Atlas** | 30 personnes | Vidéoprojecteur, Tableau blanc, WiFi |
|
||||
| **Salle Horizon** | 15 personnes | Écran TV, Tableau blanc, WiFi |
|
||||
| **Salle Innovation** | 50 personnes | Vidéoprojecteur, Sono, WiFi, Climatisation |
|
||||
| **Salle Connect** | 8 personnes | Écran TV, Visioconférence, WiFi |
|
||||
| **Salle Digital** | 20 personnes | 20 postes informatiques, Vidéoprojecteur, WiFi |
|
||||
|
||||
## 🌐 API Endpoints
|
||||
|
||||
### Routes des Salles
|
||||
|
||||
- `GET /rooms` - Liste toutes les salles
|
||||
- `GET /rooms/{room_id}` - Récupère une salle spécifique
|
||||
- `POST /rooms` - Crée une nouvelle salle
|
||||
- `DELETE /rooms/{room_id}` - Supprime une salle
|
||||
|
||||
### Routes des Réservations
|
||||
|
||||
- `GET /reservations` - Liste toutes les réservations
|
||||
- `GET /reservations/room/{room_id}` - Réservations d'une salle spécifique
|
||||
- `GET /reservations/date/{date}` - Réservations pour une date donnée
|
||||
- `POST /reservations` - Crée une nouvelle réservation
|
||||
- `DELETE /reservations/{reservation_id}` - Annule une réservation
|
||||
|
||||
### Validation automatique
|
||||
|
||||
L'API vérifie automatiquement :
|
||||
- ✅ La disponibilité de la salle
|
||||
- ✅ Les conflits d'horaires
|
||||
- ✅ La cohérence des horaires (début < fin)
|
||||
- ✅ L'existence de la salle
|
||||
|
||||
### Documentation interactive
|
||||
- **Swagger UI**: http://localhost:8000/docs
|
||||
- **ReDoc**: http://localhost:8000/redoc
|
||||
|
||||
## 🗄️ Base de Données
|
||||
|
||||
### Configuration
|
||||
- **Host**: localhost (ou `db` depuis les conteneurs)
|
||||
- **Port**: 5432
|
||||
- **Utilisateur**: user
|
||||
- **Mot de passe**: password
|
||||
- **Base de données**: dockezr
|
||||
|
||||
### Structure des tables
|
||||
|
||||
**Table `rooms`**
|
||||
- id (SERIAL PRIMARY KEY)
|
||||
- name (VARCHAR UNIQUE)
|
||||
- capacity (INTEGER)
|
||||
- equipment (TEXT)
|
||||
- description (TEXT)
|
||||
|
||||
**Table `reservations`**
|
||||
- id (SERIAL PRIMARY KEY)
|
||||
- room_id (INTEGER FOREIGN KEY)
|
||||
- user_name (VARCHAR)
|
||||
- user_email (VARCHAR)
|
||||
- reservation_date (DATE)
|
||||
- start_time (TIME)
|
||||
- end_time (TIME)
|
||||
- purpose (TEXT)
|
||||
- created_at (TIMESTAMP)
|
||||
|
||||
### Connexion à PostgreSQL
|
||||
```bash
|
||||
docker exec -it dockezr_db psql -U user -d dockezr
|
||||
```
|
||||
|
||||
## 🎨 Frontend
|
||||
|
||||
L'interface utilise :
|
||||
- **Next.js 14** avec App Router
|
||||
- **TypeScript** pour le typage statique
|
||||
- **Tailwind CSS** pour le styling moderne et responsive
|
||||
- **Axios** pour les requêtes HTTP vers l'API
|
||||
|
||||
### Fonctionnalités de l'interface
|
||||
|
||||
**Onglet Planning (par défaut)**
|
||||
- 📊 Grille de planning visuelle (8h-22h)
|
||||
- 🎨 Code couleur : vert (disponible) / rouge (réservé)
|
||||
- 📅 Sélecteur de date
|
||||
- 👤 Affichage du nom de l'utilisateur sur les créneaux
|
||||
- 📋 Liste détaillée des réservations du jour sélectionné
|
||||
- 🖱️ Info-bulle au survol des créneaux réservés
|
||||
|
||||
**Onglet Réservation**
|
||||
- Liste visuelle des salles disponibles avec détails
|
||||
- Sélection interactive de salle
|
||||
- Formulaire de réservation complet
|
||||
- **Email optionnel** (pas obligatoire)
|
||||
- ⚡ **Vérification en temps réel** de la disponibilité
|
||||
- ✅/❌ Indicateur visuel de disponibilité du créneau
|
||||
- 🔒 Bouton désactivé automatiquement si créneau occupé
|
||||
|
||||
**Onglet Mes Réservations**
|
||||
- Affichage de toutes les réservations
|
||||
- Informations détaillées (salle, date, horaire, objet)
|
||||
- Possibilité d'annuler une réservation
|
||||
|
||||
## 🔄 Développement
|
||||
|
||||
### Mode développement avec hot-reload
|
||||
|
||||
Les deux services (backend et frontend) sont configurés en mode développement avec rechargement automatique :
|
||||
|
||||
- **Backend**: Uvicorn avec `--reload`
|
||||
- **Frontend**: Next.js avec `npm run dev`
|
||||
|
||||
Les modifications de code sont automatiquement détectées et appliquées.
|
||||
|
||||
### Variables d'environnement
|
||||
|
||||
#### Backend
|
||||
- `DATABASE_URL`: URL de connexion PostgreSQL
|
||||
|
||||
#### Frontend
|
||||
- `NEXT_PUBLIC_API_URL`: URL de l'API backend
|
||||
|
||||
## 🐛 Dépannage
|
||||
|
||||
### Les conteneurs ne démarrent pas
|
||||
```bash
|
||||
# Vérifier les logs
|
||||
docker-compose logs
|
||||
|
||||
# Reconstruire les images
|
||||
docker-compose up -d --build
|
||||
```
|
||||
|
||||
### La base de données n'est pas prête
|
||||
Le backend attend que PostgreSQL soit complètement démarré grâce au healthcheck.
|
||||
|
||||
### Erreurs de connexion à l'API
|
||||
Vérifiez que :
|
||||
- Le backend est démarré : `docker-compose ps`
|
||||
- L'URL de l'API est correcte dans le frontend
|
||||
- Le réseau Docker fonctionne : `docker network ls`
|
||||
|
||||
## 📝 Personnalisation
|
||||
|
||||
### Ajouter de nouvelles salles
|
||||
|
||||
Via l'API :
|
||||
```bash
|
||||
curl -X POST http://localhost:8000/rooms \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"name": "Salle Formation",
|
||||
"capacity": 25,
|
||||
"equipment": "Vidéoprojecteur, WiFi",
|
||||
"description": "Salle de formation polyvalente"
|
||||
}'
|
||||
```
|
||||
|
||||
Ou directement dans la base de données :
|
||||
```sql
|
||||
INSERT INTO rooms (name, capacity, equipment, description)
|
||||
VALUES ('Ma Salle', 40, 'Équipements', 'Description');
|
||||
```
|
||||
|
||||
### Modifier les ports
|
||||
Éditez le fichier `docker-compose.yml` et changez les mappings de ports :
|
||||
```yaml
|
||||
ports:
|
||||
- "VOTRE_PORT:PORT_INTERNE"
|
||||
```
|
||||
|
||||
### Ajouter des dépendances
|
||||
|
||||
**Backend (Python)**:
|
||||
1. Ajoutez la dépendance dans `backend/requirements.txt`
|
||||
2. Reconstruisez : `docker-compose up -d --build backend`
|
||||
|
||||
**Frontend (Node.js)**:
|
||||
1. Ajoutez la dépendance dans `frontend/package.json`
|
||||
2. Reconstruisez : `docker-compose up -d --build frontend`
|
||||
|
||||
## 🎯 Cas d'Usage
|
||||
|
||||
Ce système est idéal pour :
|
||||
- ✅ Centres de formation
|
||||
- ✅ Espaces de coworking
|
||||
- ✅ Entreprises avec salles de réunion
|
||||
- ✅ Universités et écoles
|
||||
- ✅ Bibliothèques avec salles d'étude
|
||||
|
||||
## 📦 Production
|
||||
|
||||
Pour un déploiement en production, modifiez :
|
||||
|
||||
1. Les mots de passe et secrets dans `docker-compose.yml`
|
||||
2. Désactivez le mode debug/reload
|
||||
3. Utilisez des variables d'environnement sécurisées
|
||||
4. Configurez HTTPS/SSL
|
||||
5. Ajoutez un reverse proxy (Nginx, Traefik)
|
||||
6. Mettez en place des sauvegardes de la base de données
|
||||
|
||||
## 🔐 Sécurité
|
||||
|
||||
⚠️ **Important pour la production** :
|
||||
- Changez les identifiants PostgreSQL par défaut
|
||||
- Utilisez des secrets Docker pour les mots de passe
|
||||
- Activez l'authentification utilisateur
|
||||
- Configurez CORS correctement
|
||||
- Utilisez HTTPS
|
||||
|
||||
## 📄 Licence
|
||||
|
||||
Ce projet est développé pour **Expernet** - Centre de Formation.
|
||||
|
||||
---
|
||||
|
||||
**🏢 Système de réservation Expernet - Simplifions la gestion des salles ! 🚀**
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
# Image de base Python
|
||||
FROM python:3.11-slim
|
||||
|
||||
# Définir le répertoire de travail
|
||||
WORKDIR /app
|
||||
|
||||
# Installer les dépendances système nécessaires pour PostgreSQL
|
||||
RUN apt-get update && apt-get install -y \
|
||||
gcc \
|
||||
postgresql-client \
|
||||
&& rm -rf /var/lib/apt/lists/*
|
||||
|
||||
# Copier les fichiers de requirements
|
||||
COPY requirements.txt .
|
||||
|
||||
# Installer les dépendances Python
|
||||
RUN pip install --no-cache-dir -r requirements.txt
|
||||
|
||||
# Copier le code de l'application
|
||||
COPY . .
|
||||
|
||||
# Exposer le port
|
||||
EXPOSE 8000
|
||||
|
||||
# Commande pour démarrer l'application
|
||||
CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000", "--reload"]
|
||||
|
||||
+256
@@ -0,0 +1,256 @@
|
||||
from fastapi import FastAPI, HTTPException
|
||||
from fastapi.middleware.cors import CORSMiddleware
|
||||
from pydantic import BaseModel
|
||||
from typing import List, Optional
|
||||
import asyncpg
|
||||
from datetime import datetime, date, time
|
||||
import os
|
||||
|
||||
# Configuration de la base de données
|
||||
DATABASE_URL = os.getenv("DATABASE_URL", "postgresql://user:password@db:5432/dockezr")
|
||||
|
||||
# Pool de connexions
|
||||
pool = None
|
||||
|
||||
# Modèles Pydantic pour les Salles
|
||||
class RoomCreate(BaseModel):
|
||||
name: str
|
||||
capacity: int
|
||||
equipment: Optional[str] = None
|
||||
description: Optional[str] = None
|
||||
|
||||
class Room(BaseModel):
|
||||
id: int
|
||||
name: str
|
||||
capacity: int
|
||||
equipment: Optional[str]
|
||||
description: Optional[str]
|
||||
|
||||
# Modèles Pydantic pour les Réservations
|
||||
class ReservationCreate(BaseModel):
|
||||
room_id: int
|
||||
user_name: str
|
||||
user_email: Optional[str] = None
|
||||
reservation_date: date
|
||||
start_time: time
|
||||
end_time: time
|
||||
purpose: str
|
||||
|
||||
class Reservation(BaseModel):
|
||||
id: int
|
||||
room_id: int
|
||||
room_name: Optional[str] = None
|
||||
user_name: str
|
||||
user_email: Optional[str] = None
|
||||
reservation_date: date
|
||||
start_time: time
|
||||
end_time: time
|
||||
purpose: str
|
||||
created_at: datetime
|
||||
|
||||
# Application FastAPI
|
||||
app = FastAPI(
|
||||
title="Expernet - Système de Réservation de Salles",
|
||||
version="1.0.0",
|
||||
description="API de gestion des réservations de salles pour le centre de formation Expernet"
|
||||
)
|
||||
|
||||
# Configuration CORS
|
||||
app.add_middleware(
|
||||
CORSMiddleware,
|
||||
allow_origins=["http://localhost:3000", "http://frontend:3000"],
|
||||
allow_credentials=True,
|
||||
allow_methods=["*"],
|
||||
allow_headers=["*"],
|
||||
)
|
||||
|
||||
@app.on_event("startup")
|
||||
async def startup():
|
||||
global pool
|
||||
pool = await asyncpg.create_pool(DATABASE_URL)
|
||||
# Créer les tables si elles n'existent pas
|
||||
async with pool.acquire() as conn:
|
||||
# Table des salles
|
||||
await conn.execute('''
|
||||
CREATE TABLE IF NOT EXISTS rooms (
|
||||
id SERIAL PRIMARY KEY,
|
||||
name VARCHAR(255) NOT NULL UNIQUE,
|
||||
capacity INTEGER NOT NULL,
|
||||
equipment TEXT,
|
||||
description TEXT
|
||||
)
|
||||
''')
|
||||
|
||||
# Table des réservations
|
||||
await conn.execute('''
|
||||
CREATE TABLE IF NOT EXISTS reservations (
|
||||
id SERIAL PRIMARY KEY,
|
||||
room_id INTEGER NOT NULL REFERENCES rooms(id) ON DELETE CASCADE,
|
||||
user_name VARCHAR(255) NOT NULL,
|
||||
user_email VARCHAR(255),
|
||||
reservation_date DATE NOT NULL,
|
||||
start_time TIME NOT NULL,
|
||||
end_time TIME NOT NULL,
|
||||
purpose TEXT NOT NULL,
|
||||
created_at TIMESTAMP DEFAULT NOW()
|
||||
)
|
||||
''')
|
||||
|
||||
# Insérer des salles par défaut si la table est vide
|
||||
count = await conn.fetchval('SELECT COUNT(*) FROM rooms')
|
||||
if count == 0:
|
||||
await conn.execute('''
|
||||
INSERT INTO rooms (name, capacity, equipment, description) VALUES
|
||||
('Salle Atlas', 30, 'Vidéoprojecteur, Tableau blanc, WiFi', 'Grande salle de formation idéale pour les cours'),
|
||||
('Salle Horizon', 15, 'Écran TV, Tableau blanc, WiFi', 'Salle de réunion moyenne capacité'),
|
||||
('Salle Innovation', 50, 'Vidéoprojecteur, Sono, WiFi, Climatisation', 'Salle de conférence grande capacité'),
|
||||
('Salle Connect', 8, 'Écran TV, Visioconférence, WiFi', 'Petite salle pour réunions d''équipe'),
|
||||
('Salle Digital', 20, '20 postes informatiques, Vidéoprojecteur, WiFi', 'Salle informatique pour formations pratiques')
|
||||
''')
|
||||
|
||||
@app.on_event("shutdown")
|
||||
async def shutdown():
|
||||
await pool.close()
|
||||
|
||||
@app.get("/")
|
||||
async def root():
|
||||
return {"message": "Bienvenue sur le système de réservation de salles Expernet!", "status": "running"}
|
||||
|
||||
@app.get("/health")
|
||||
async def health_check():
|
||||
return {"status": "healthy", "database": "connected"}
|
||||
|
||||
# === ROUTES POUR LES SALLES ===
|
||||
|
||||
@app.get("/rooms", response_model=List[Room])
|
||||
async def get_rooms():
|
||||
"""Récupérer toutes les salles"""
|
||||
async with pool.acquire() as conn:
|
||||
rows = await conn.fetch('SELECT * FROM rooms ORDER BY name')
|
||||
return [dict(row) for row in rows]
|
||||
|
||||
@app.get("/rooms/{room_id}", response_model=Room)
|
||||
async def get_room(room_id: int):
|
||||
"""Récupérer une salle spécifique"""
|
||||
async with pool.acquire() as conn:
|
||||
row = await conn.fetchrow('SELECT * FROM rooms WHERE id = $1', room_id)
|
||||
if row is None:
|
||||
raise HTTPException(status_code=404, detail="Salle non trouvée")
|
||||
return dict(row)
|
||||
|
||||
@app.post("/rooms", response_model=Room)
|
||||
async def create_room(room: RoomCreate):
|
||||
"""Créer une nouvelle salle"""
|
||||
async with pool.acquire() as conn:
|
||||
try:
|
||||
row = await conn.fetchrow(
|
||||
'INSERT INTO rooms (name, capacity, equipment, description) VALUES ($1, $2, $3, $4) RETURNING *',
|
||||
room.name, room.capacity, room.equipment, room.description
|
||||
)
|
||||
return dict(row)
|
||||
except asyncpg.UniqueViolationError:
|
||||
raise HTTPException(status_code=400, detail="Une salle avec ce nom existe déjà")
|
||||
|
||||
@app.delete("/rooms/{room_id}")
|
||||
async def delete_room(room_id: int):
|
||||
"""Supprimer une salle"""
|
||||
async with pool.acquire() as conn:
|
||||
result = await conn.execute('DELETE FROM rooms WHERE id = $1', room_id)
|
||||
if result == "DELETE 0":
|
||||
raise HTTPException(status_code=404, detail="Salle non trouvée")
|
||||
return {"message": "Salle supprimée avec succès"}
|
||||
|
||||
# === ROUTES POUR LES RÉSERVATIONS ===
|
||||
|
||||
@app.get("/reservations", response_model=List[Reservation])
|
||||
async def get_reservations():
|
||||
"""Récupérer toutes les réservations avec les informations des salles"""
|
||||
async with pool.acquire() as conn:
|
||||
rows = await conn.fetch('''
|
||||
SELECT r.*, ro.name as room_name
|
||||
FROM reservations r
|
||||
JOIN rooms ro ON r.room_id = ro.id
|
||||
ORDER BY r.reservation_date DESC, r.start_time DESC
|
||||
''')
|
||||
return [dict(row) for row in rows]
|
||||
|
||||
@app.get("/reservations/room/{room_id}", response_model=List[Reservation])
|
||||
async def get_reservations_by_room(room_id: int):
|
||||
"""Récupérer les réservations d'une salle spécifique"""
|
||||
async with pool.acquire() as conn:
|
||||
rows = await conn.fetch('''
|
||||
SELECT r.*, ro.name as room_name
|
||||
FROM reservations r
|
||||
JOIN rooms ro ON r.room_id = ro.id
|
||||
WHERE r.room_id = $1
|
||||
ORDER BY r.reservation_date, r.start_time
|
||||
''', room_id)
|
||||
return [dict(row) for row in rows]
|
||||
|
||||
@app.get("/reservations/date/{reservation_date}")
|
||||
async def get_reservations_by_date(reservation_date: date):
|
||||
"""Récupérer les réservations pour une date spécifique"""
|
||||
async with pool.acquire() as conn:
|
||||
rows = await conn.fetch('''
|
||||
SELECT r.*, ro.name as room_name
|
||||
FROM reservations r
|
||||
JOIN rooms ro ON r.room_id = ro.id
|
||||
WHERE r.reservation_date = $1
|
||||
ORDER BY r.start_time
|
||||
''', reservation_date)
|
||||
return [dict(row) for row in rows]
|
||||
|
||||
@app.post("/reservations", response_model=Reservation)
|
||||
async def create_reservation(reservation: ReservationCreate):
|
||||
"""Créer une nouvelle réservation"""
|
||||
async with pool.acquire() as conn:
|
||||
# Vérifier que la salle existe
|
||||
room = await conn.fetchrow('SELECT * FROM rooms WHERE id = $1', reservation.room_id)
|
||||
if room is None:
|
||||
raise HTTPException(status_code=404, detail="Salle non trouvée")
|
||||
|
||||
# Vérifier que l'heure de fin est après l'heure de début
|
||||
if reservation.end_time <= reservation.start_time:
|
||||
raise HTTPException(status_code=400, detail="L'heure de fin doit être après l'heure de début")
|
||||
|
||||
# Vérifier les conflits de réservation
|
||||
conflicts = await conn.fetch('''
|
||||
SELECT * FROM reservations
|
||||
WHERE room_id = $1
|
||||
AND reservation_date = $2
|
||||
AND (
|
||||
(start_time < $4 AND end_time > $3)
|
||||
OR (start_time >= $3 AND start_time < $4)
|
||||
)
|
||||
''', reservation.room_id, reservation.reservation_date,
|
||||
reservation.start_time, reservation.end_time)
|
||||
|
||||
if conflicts:
|
||||
raise HTTPException(
|
||||
status_code=409,
|
||||
detail="La salle est déjà réservée pour ce créneau horaire"
|
||||
)
|
||||
|
||||
# Créer la réservation
|
||||
row = await conn.fetchrow('''
|
||||
INSERT INTO reservations
|
||||
(room_id, user_name, user_email, reservation_date, start_time, end_time, purpose, created_at)
|
||||
VALUES ($1, $2, $3, $4, $5, $6, $7, $8)
|
||||
RETURNING *
|
||||
''', reservation.room_id, reservation.user_name, reservation.user_email,
|
||||
reservation.reservation_date, reservation.start_time, reservation.end_time,
|
||||
reservation.purpose, datetime.utcnow())
|
||||
|
||||
result = dict(row)
|
||||
result['room_name'] = room['name']
|
||||
return result
|
||||
|
||||
@app.delete("/reservations/{reservation_id}")
|
||||
async def delete_reservation(reservation_id: int):
|
||||
"""Annuler une réservation"""
|
||||
async with pool.acquire() as conn:
|
||||
result = await conn.execute('DELETE FROM reservations WHERE id = $1', reservation_id)
|
||||
if result == "DELETE 0":
|
||||
raise HTTPException(status_code=404, detail="Réservation non trouvée")
|
||||
return {"message": "Réservation annulée avec succès"}
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
fastapi==0.104.1
|
||||
uvicorn[standard]==0.24.0
|
||||
sqlalchemy==1.4.51
|
||||
asyncpg==0.29.0
|
||||
psycopg2-binary==2.9.9
|
||||
pydantic==2.5.0
|
||||
python-dotenv==1.0.0
|
||||
|
||||
@@ -0,0 +1,73 @@
|
||||
version: '3.8'
|
||||
|
||||
services:
|
||||
# Base de données PostgreSQL
|
||||
db:
|
||||
image: postgres:16-alpine
|
||||
container_name: dockezr_db
|
||||
restart: always
|
||||
environment:
|
||||
POSTGRES_USER: user
|
||||
POSTGRES_PASSWORD: password
|
||||
POSTGRES_DB: dockezr
|
||||
ports:
|
||||
- "5432:5432"
|
||||
volumes:
|
||||
- postgres_data:/var/lib/postgresql/data
|
||||
networks:
|
||||
- dockezr_network
|
||||
healthcheck:
|
||||
test: ["CMD-SHELL", "pg_isready -U user -d dockezr"]
|
||||
interval: 10s
|
||||
timeout: 5s
|
||||
retries: 5
|
||||
|
||||
# Backend FastAPI
|
||||
backend:
|
||||
build:
|
||||
context: ./backend
|
||||
dockerfile: Dockerfile
|
||||
container_name: dockezr_backend
|
||||
restart: always
|
||||
environment:
|
||||
DATABASE_URL: postgresql://user:password@db:5432/dockezr
|
||||
ports:
|
||||
- "8000:8000"
|
||||
volumes:
|
||||
- ./backend:/app
|
||||
depends_on:
|
||||
db:
|
||||
condition: service_healthy
|
||||
networks:
|
||||
- dockezr_network
|
||||
command: uvicorn main:app --host 0.0.0.0 --port 8000 --reload
|
||||
|
||||
# Frontend Next.js
|
||||
frontend:
|
||||
build:
|
||||
context: ./frontend
|
||||
dockerfile: Dockerfile
|
||||
container_name: dockezr_frontend
|
||||
restart: always
|
||||
environment:
|
||||
NEXT_PUBLIC_API_URL: http://localhost:8000
|
||||
ports:
|
||||
- "3000:3000"
|
||||
volumes:
|
||||
- ./frontend:/app
|
||||
- /app/node_modules
|
||||
- /app/.next
|
||||
depends_on:
|
||||
- backend
|
||||
networks:
|
||||
- dockezr_network
|
||||
|
||||
networks:
|
||||
dockezr_network:
|
||||
driver: bridge
|
||||
name: dockezr_network
|
||||
|
||||
volumes:
|
||||
postgres_data:
|
||||
name: dockezr_postgres_data
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"extends": "next/core-web-vitals"
|
||||
}
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
# Image de base Node.js
|
||||
FROM node:20-alpine
|
||||
|
||||
# Définir le répertoire de travail
|
||||
WORKDIR /app
|
||||
|
||||
# Copier les fichiers package
|
||||
COPY package*.json ./
|
||||
|
||||
# Installer les dépendances
|
||||
RUN npm install
|
||||
|
||||
# Copier le reste des fichiers
|
||||
COPY . .
|
||||
|
||||
# Exposer le port
|
||||
EXPOSE 3000
|
||||
|
||||
# Commande pour démarrer l'application
|
||||
CMD ["npm", "run", "dev"]
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--foreground-rgb: 0, 0, 0;
|
||||
--background-start-rgb: 214, 219, 220;
|
||||
--background-end-rgb: 255, 255, 255;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
max-width: 100vw;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
color: rgb(var(--foreground-rgb));
|
||||
}
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
import './globals.css'
|
||||
import type { Metadata } from 'next'
|
||||
import { Inter } from 'next/font/google'
|
||||
|
||||
const inter = Inter({ subsets: ['latin'] })
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Expernet - Réservation de Salles',
|
||||
description: 'Système de réservation de salles pour le centre de formation Expernet',
|
||||
}
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<html lang="fr">
|
||||
<body className={inter.className}>{children}</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,625 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import axios from 'axios'
|
||||
import {
|
||||
BuildingOffice2Icon,
|
||||
CalendarIcon,
|
||||
ClipboardDocumentListIcon,
|
||||
ChartBarIcon,
|
||||
UserGroupIcon,
|
||||
WrenchScrewdriverIcon,
|
||||
CheckCircleIcon,
|
||||
XCircleIcon,
|
||||
ClockIcon,
|
||||
EnvelopeIcon,
|
||||
DocumentTextIcon,
|
||||
TrashIcon,
|
||||
CheckIcon,
|
||||
XMarkIcon
|
||||
} from '@heroicons/react/24/outline'
|
||||
|
||||
interface Room {
|
||||
id: number
|
||||
name: string
|
||||
capacity: number
|
||||
equipment: string | null
|
||||
description: string | null
|
||||
}
|
||||
|
||||
interface Reservation {
|
||||
id: number
|
||||
room_id: number
|
||||
room_name?: string
|
||||
user_name: string
|
||||
user_email: string
|
||||
reservation_date: string
|
||||
start_time: string
|
||||
end_time: string
|
||||
purpose: string
|
||||
created_at: string
|
||||
}
|
||||
|
||||
export default function Home() {
|
||||
const [rooms, setRooms] = useState<Room[]>([])
|
||||
const [reservations, setReservations] = useState<Reservation[]>([])
|
||||
const [selectedRoom, setSelectedRoom] = useState<number | null>(null)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [activeTab, setActiveTab] = useState<'rooms' | 'reservations' | 'planning'>('planning')
|
||||
const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0])
|
||||
|
||||
// Formulaire de réservation
|
||||
const [formData, setFormData] = useState({
|
||||
user_name: '',
|
||||
user_email: '',
|
||||
reservation_date: '',
|
||||
start_time: '',
|
||||
end_time: '',
|
||||
purpose: ''
|
||||
})
|
||||
|
||||
const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000'
|
||||
|
||||
useEffect(() => {
|
||||
fetchRooms()
|
||||
fetchReservations()
|
||||
}, [])
|
||||
|
||||
const fetchRooms = async () => {
|
||||
try {
|
||||
const response = await axios.get(`${API_URL}/rooms`)
|
||||
setRooms(response.data)
|
||||
} catch (error) {
|
||||
console.error('Erreur lors du chargement des salles:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const fetchReservations = async () => {
|
||||
try {
|
||||
const response = await axios.get(`${API_URL}/reservations`)
|
||||
setReservations(response.data)
|
||||
} catch (error) {
|
||||
console.error('Erreur lors du chargement des réservations:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const fetchReservationsByDate = async (date: string) => {
|
||||
try {
|
||||
const response = await axios.get(`${API_URL}/reservations/date/${date}`)
|
||||
return response.data
|
||||
} catch (error) {
|
||||
console.error('Erreur lors du chargement des réservations par date:', error)
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
const getReservationsForRoom = (roomId: number, date: string) => {
|
||||
return reservations.filter(r =>
|
||||
r.room_id === roomId &&
|
||||
r.reservation_date === date
|
||||
)
|
||||
}
|
||||
|
||||
const isSlotAvailable = (roomId: number, date: string, startTime: string, endTime: string) => {
|
||||
const roomReservations = getReservationsForRoom(roomId, date)
|
||||
|
||||
for (const reservation of roomReservations) {
|
||||
const resStart = reservation.start_time
|
||||
const resEnd = reservation.end_time
|
||||
|
||||
// Vérifie s'il y a chevauchement
|
||||
if ((startTime < resEnd && endTime > resStart)) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
const handleReservation = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (!selectedRoom) {
|
||||
alert('Veuillez sélectionner une salle')
|
||||
return
|
||||
}
|
||||
|
||||
setLoading(true)
|
||||
try {
|
||||
await axios.post(`${API_URL}/reservations`, {
|
||||
room_id: selectedRoom,
|
||||
...formData
|
||||
})
|
||||
|
||||
alert('Réservation effectuée avec succès !')
|
||||
setFormData({
|
||||
user_name: '',
|
||||
user_email: '',
|
||||
reservation_date: '',
|
||||
start_time: '',
|
||||
end_time: '',
|
||||
purpose: ''
|
||||
})
|
||||
setSelectedRoom(null)
|
||||
fetchReservations()
|
||||
} catch (error: any) {
|
||||
if (error.response?.status === 409) {
|
||||
alert('Cette salle est déjà réservée pour ce créneau horaire')
|
||||
} else {
|
||||
alert('Erreur lors de la réservation: ' + (error.response?.data?.detail || error.message))
|
||||
}
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDeleteReservation = async (id: number) => {
|
||||
if (!confirm('Voulez-vous vraiment annuler cette réservation ?')) return
|
||||
|
||||
try {
|
||||
await axios.delete(`${API_URL}/reservations/${id}`)
|
||||
fetchReservations()
|
||||
alert('Réservation annulée avec succès')
|
||||
} catch (error) {
|
||||
console.error('Erreur lors de l\'annulation:', error)
|
||||
alert('Erreur lors de l\'annulation de la réservation')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-8">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<div className="flex items-center justify-center gap-3 mb-2">
|
||||
<BuildingOffice2Icon className="w-12 h-12 text-indigo-900" />
|
||||
<h1 className="text-5xl font-bold text-indigo-900">
|
||||
Expernet
|
||||
</h1>
|
||||
</div>
|
||||
<p className="text-xl text-gray-600">
|
||||
Centre de Formation - Réservation de Salles
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex justify-center mb-8">
|
||||
<div className="bg-white rounded-lg shadow-md p-1 inline-flex">
|
||||
<button
|
||||
onClick={() => setActiveTab('planning')}
|
||||
className={`px-6 py-2 rounded-md font-medium transition-colors flex items-center gap-2 ${
|
||||
activeTab === 'planning'
|
||||
? 'bg-indigo-600 text-white'
|
||||
: 'text-gray-600 hover:text-gray-900'
|
||||
}`}
|
||||
>
|
||||
<ChartBarIcon className="w-5 h-5" />
|
||||
Planning des salles
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('rooms')}
|
||||
className={`px-6 py-2 rounded-md font-medium transition-colors flex items-center gap-2 ${
|
||||
activeTab === 'rooms'
|
||||
? 'bg-indigo-600 text-white'
|
||||
: 'text-gray-600 hover:text-gray-900'
|
||||
}`}
|
||||
>
|
||||
<CalendarIcon className="w-5 h-5" />
|
||||
Réserver une salle
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('reservations')}
|
||||
className={`px-6 py-2 rounded-md font-medium transition-colors flex items-center gap-2 ${
|
||||
activeTab === 'reservations'
|
||||
? 'bg-indigo-600 text-white'
|
||||
: 'text-gray-600 hover:text-gray-900'
|
||||
}`}
|
||||
>
|
||||
<ClipboardDocumentListIcon className="w-5 h-5" />
|
||||
Mes réservations
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Onglet Planning */}
|
||||
{activeTab === 'planning' && (
|
||||
<div className="bg-white rounded-lg shadow-lg p-6">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-2xl font-semibold mb-4 text-gray-800">
|
||||
Planning des Salles
|
||||
</h2>
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<label className="text-sm font-medium text-gray-700">
|
||||
Date :
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
value={selectedDate}
|
||||
onChange={(e) => setSelectedDate(e.target.value)}
|
||||
className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Grille de planning */}
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-indigo-50">
|
||||
<th className="border border-gray-300 px-4 py-2 text-left font-semibold text-gray-700">
|
||||
Salle
|
||||
</th>
|
||||
{Array.from({ length: 14 }, (_, i) => i + 8).map((hour) => (
|
||||
<th key={hour} className="border border-gray-300 px-2 py-2 text-center text-sm font-medium text-gray-700">
|
||||
{hour}h
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rooms.map((room) => {
|
||||
const roomReservations = getReservationsForRoom(room.id, selectedDate)
|
||||
|
||||
return (
|
||||
<tr key={room.id} className="hover:bg-gray-50">
|
||||
<td className="border border-gray-300 px-4 py-2 font-medium text-gray-900 whitespace-nowrap">
|
||||
{room.name}
|
||||
<div className="text-xs text-gray-500 flex items-center gap-1">
|
||||
<UserGroupIcon className="w-3 h-3" />
|
||||
{room.capacity} pers.
|
||||
</div>
|
||||
</td>
|
||||
{Array.from({ length: 14 }, (_, i) => i + 8).map((hour) => {
|
||||
const hourStart = `${hour.toString().padStart(2, '0')}:00`
|
||||
const hourEnd = `${(hour + 1).toString().padStart(2, '0')}:00`
|
||||
|
||||
// Trouver les réservations qui couvrent cette heure
|
||||
const overlappingReservations = roomReservations.filter(res => {
|
||||
return res.start_time < hourEnd && res.end_time > hourStart
|
||||
})
|
||||
|
||||
const isOccupied = overlappingReservations.length > 0
|
||||
const reservation = overlappingReservations[0]
|
||||
|
||||
return (
|
||||
<td
|
||||
key={hour}
|
||||
className={`border border-gray-300 px-1 py-2 text-center text-xs ${
|
||||
isOccupied ? 'bg-red-100' : 'bg-green-50'
|
||||
}`}
|
||||
title={
|
||||
reservation
|
||||
? `${reservation.user_name} - ${reservation.purpose}\n${reservation.start_time} - ${reservation.end_time}`
|
||||
: 'Disponible'
|
||||
}
|
||||
>
|
||||
{isOccupied ? (
|
||||
<div className="text-red-700 font-medium">
|
||||
<XMarkIcon className="w-4 h-4 mx-auto" />
|
||||
<div className="text-[10px] mt-1 truncate">
|
||||
{reservation.user_name}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-green-600">
|
||||
<CheckIcon className="w-4 h-4 mx-auto" />
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
)
|
||||
})}
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Légende */}
|
||||
<div className="mt-6 flex gap-6 justify-center">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-6 h-6 bg-green-50 border border-gray-300 flex items-center justify-center text-green-600">
|
||||
<CheckIcon className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="text-sm text-gray-700">Disponible</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-6 h-6 bg-red-100 border border-gray-300 flex items-center justify-center text-red-700">
|
||||
<XMarkIcon className="w-4 h-4" />
|
||||
</div>
|
||||
<span className="text-sm text-gray-700">Réservé</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Liste des réservations du jour */}
|
||||
<div className="mt-8">
|
||||
<h3 className="text-lg font-semibold mb-4 text-gray-800">
|
||||
Réservations du {new Date(selectedDate).toLocaleDateString('fr-FR')}
|
||||
</h3>
|
||||
{reservations.filter(r => r.reservation_date === selectedDate).length === 0 ? (
|
||||
<p className="text-gray-500 text-center py-4">Aucune réservation pour cette date</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{reservations
|
||||
.filter(r => r.reservation_date === selectedDate)
|
||||
.sort((a, b) => a.start_time.localeCompare(b.start_time))
|
||||
.map((reservation) => (
|
||||
<div
|
||||
key={reservation.id}
|
||||
className="border border-gray-200 rounded-lg p-3 bg-gray-50"
|
||||
>
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<span className="font-semibold text-indigo-900">{reservation.room_name}</span>
|
||||
<span className="mx-2">•</span>
|
||||
<span className="text-gray-700">{reservation.start_time} - {reservation.end_time}</span>
|
||||
</div>
|
||||
<div className="text-right text-sm">
|
||||
<div className="font-medium text-gray-900">{reservation.user_name}</div>
|
||||
<div className="text-gray-600">{reservation.purpose}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Onglet Réservation */}
|
||||
{activeTab === 'rooms' && (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
{/* Liste des salles */}
|
||||
<div className="bg-white rounded-lg shadow-lg p-6">
|
||||
<h2 className="text-2xl font-semibold mb-4 text-gray-800">
|
||||
Nos Salles Disponibles
|
||||
</h2>
|
||||
<div className="space-y-4 max-h-[600px] overflow-y-auto">
|
||||
{rooms.map((room) => (
|
||||
<div
|
||||
key={room.id}
|
||||
onClick={() => setSelectedRoom(room.id)}
|
||||
className={`border-2 rounded-lg p-4 cursor-pointer transition-all ${
|
||||
selectedRoom === room.id
|
||||
? 'border-indigo-600 bg-indigo-50'
|
||||
: 'border-gray-200 hover:border-indigo-300'
|
||||
}`}
|
||||
>
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-bold text-gray-900">
|
||||
{room.name}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 mt-1 flex items-center gap-1">
|
||||
<UserGroupIcon className="w-4 h-4" />
|
||||
Capacité: {room.capacity} personnes
|
||||
</p>
|
||||
{room.equipment && (
|
||||
<p className="text-sm text-gray-600 mt-1 flex items-center gap-1">
|
||||
<WrenchScrewdriverIcon className="w-4 h-4" />
|
||||
{room.equipment}
|
||||
</p>
|
||||
)}
|
||||
{room.description && (
|
||||
<p className="text-sm text-gray-500 mt-2">
|
||||
{room.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{selectedRoom === room.id && (
|
||||
<div className="ml-2">
|
||||
<span className="inline-block bg-indigo-600 text-white rounded-full p-2">
|
||||
<CheckIcon className="w-4 h-4" />
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Formulaire de réservation */}
|
||||
<div className="bg-white rounded-lg shadow-lg p-6">
|
||||
<h2 className="text-2xl font-semibold mb-4 text-gray-800">
|
||||
Formulaire de Réservation
|
||||
</h2>
|
||||
{!selectedRoom ? (
|
||||
<div className="text-center py-12 text-gray-500">
|
||||
<BuildingOffice2Icon className="w-16 h-16 mx-auto mb-4 text-gray-400" />
|
||||
<p className="text-lg">Sélectionnez une salle pour continuer</p>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleReservation} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Votre nom *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.user_name}
|
||||
onChange={(e) => setFormData({ ...formData, user_name: e.target.value })}
|
||||
required
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
||||
placeholder="Jean Dupont"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Email (optionnel)
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
value={formData.user_email}
|
||||
onChange={(e) => setFormData({ ...formData, user_email: e.target.value })}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
||||
placeholder="jean.dupont@expernet.fr"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Date *
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
value={formData.reservation_date}
|
||||
onChange={(e) => setFormData({ ...formData, reservation_date: e.target.value })}
|
||||
required
|
||||
min={new Date().toISOString().split('T')[0]}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Heure de début *
|
||||
</label>
|
||||
<input
|
||||
type="time"
|
||||
value={formData.start_time}
|
||||
onChange={(e) => setFormData({ ...formData, start_time: e.target.value })}
|
||||
required
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Heure de fin *
|
||||
</label>
|
||||
<input
|
||||
type="time"
|
||||
value={formData.end_time}
|
||||
onChange={(e) => setFormData({ ...formData, end_time: e.target.value })}
|
||||
required
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Objet de la réservation *
|
||||
</label>
|
||||
<textarea
|
||||
value={formData.purpose}
|
||||
onChange={(e) => setFormData({ ...formData, purpose: e.target.value })}
|
||||
required
|
||||
rows={3}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
||||
placeholder="Formation Python, Réunion d'équipe, etc."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Vérification de disponibilité */}
|
||||
{selectedRoom && formData.reservation_date && formData.start_time && formData.end_time && (
|
||||
<div className={`p-3 rounded-lg ${
|
||||
isSlotAvailable(selectedRoom, formData.reservation_date, formData.start_time, formData.end_time)
|
||||
? 'bg-green-50 border border-green-200'
|
||||
: 'bg-red-50 border border-red-200'
|
||||
}`}>
|
||||
{isSlotAvailable(selectedRoom, formData.reservation_date, formData.start_time, formData.end_time) ? (
|
||||
<div className="flex items-center gap-2 text-green-700">
|
||||
<CheckCircleIcon className="w-6 h-6" />
|
||||
<span className="font-medium">Ce créneau est disponible !</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-2 text-red-700">
|
||||
<XCircleIcon className="w-6 h-6" />
|
||||
<span className="font-medium">Ce créneau est déjà réservé. Choisissez un autre horaire.</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading || (selectedRoom && formData.reservation_date && formData.start_time && formData.end_time && !isSlotAvailable(selectedRoom, formData.reservation_date, formData.start_time, formData.end_time))}
|
||||
className="w-full bg-indigo-600 text-white py-3 px-4 rounded-lg hover:bg-indigo-700 transition-colors disabled:bg-gray-400 font-medium text-lg flex items-center justify-center gap-2"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<ClockIcon className="w-5 h-5 animate-spin" />
|
||||
Réservation en cours...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<CheckCircleIcon className="w-5 h-5" />
|
||||
Confirmer la réservation
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Onglet Liste des réservations */}
|
||||
{activeTab === 'reservations' && (
|
||||
<div className="bg-white rounded-lg shadow-lg p-6">
|
||||
<h2 className="text-2xl font-semibold mb-6 text-gray-800">
|
||||
Liste des Réservations
|
||||
</h2>
|
||||
{reservations.length === 0 ? (
|
||||
<div className="text-center py-12 text-gray-500">
|
||||
<p className="text-lg">Aucune réservation pour le moment</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{reservations.map((reservation) => (
|
||||
<div
|
||||
key={reservation.id}
|
||||
className="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow"
|
||||
>
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<h3 className="text-lg font-bold text-indigo-900">
|
||||
{reservation.room_name}
|
||||
</h3>
|
||||
<span className="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs rounded-full">
|
||||
{reservation.user_name}
|
||||
</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2 text-sm text-gray-600">
|
||||
<p className="flex items-center gap-1">
|
||||
<CalendarIcon className="w-4 h-4" />
|
||||
{new Date(reservation.reservation_date).toLocaleDateString('fr-FR')}
|
||||
</p>
|
||||
<p className="flex items-center gap-1">
|
||||
<ClockIcon className="w-4 h-4" />
|
||||
{reservation.start_time} - {reservation.end_time}
|
||||
</p>
|
||||
{reservation.user_email && (
|
||||
<p className="col-span-2 flex items-center gap-1">
|
||||
<EnvelopeIcon className="w-4 h-4" />
|
||||
{reservation.user_email}
|
||||
</p>
|
||||
)}
|
||||
<p className="col-span-2 flex items-center gap-1">
|
||||
<DocumentTextIcon className="w-4 h-4" />
|
||||
{reservation.purpose}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleDeleteReservation(reservation.id)}
|
||||
className="ml-4 px-4 py-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors font-medium flex items-center gap-2"
|
||||
>
|
||||
<TrashIcon className="w-5 h-5" />
|
||||
Annuler
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
Vendored
+5
@@ -0,0 +1,5 @@
|
||||
/// <reference types="next" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
|
||||
@@ -0,0 +1,10 @@
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
reactStrictMode: true,
|
||||
env: {
|
||||
NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000',
|
||||
},
|
||||
}
|
||||
|
||||
module.exports = nextConfig
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"name": "dockezr-frontend",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"next": "^14.0.3",
|
||||
"axios": "^1.6.2",
|
||||
"@heroicons/react": "^2.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^20.10.0",
|
||||
"@types/react": "^18.2.42",
|
||||
"@types/react-dom": "^18.2.17",
|
||||
"typescript": "^5.3.2",
|
||||
"eslint": "^8.54.0",
|
||||
"eslint-config-next": "^14.0.3",
|
||||
"tailwindcss": "^3.3.5",
|
||||
"autoprefixer": "^10.4.16",
|
||||
"postcss": "^8.4.31"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
import type { Config } from 'tailwindcss'
|
||||
|
||||
const config: Config = {
|
||||
content: [
|
||||
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
'./components/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
'./app/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
export default config
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": ["./*"]
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
@echo off
|
||||
echo ========================================
|
||||
echo Demarrage de Dockezr
|
||||
echo ========================================
|
||||
echo.
|
||||
|
||||
echo Verification de Docker...
|
||||
docker --version >nul 2>&1
|
||||
if errorlevel 1 (
|
||||
echo [ERREUR] Docker n'est pas installe ou n'est pas dans le PATH
|
||||
pause
|
||||
exit /b 1
|
||||
)
|
||||
|
||||
echo Docker est installe !
|
||||
echo.
|
||||
|
||||
echo Demarrage des conteneurs...
|
||||
docker-compose up -d
|
||||
|
||||
echo.
|
||||
echo ========================================
|
||||
echo Services demarres avec succes !
|
||||
echo ========================================
|
||||
echo.
|
||||
echo Frontend: http://localhost:3000
|
||||
echo Backend API: http://localhost:8000
|
||||
echo API Docs: http://localhost:8000/docs
|
||||
echo.
|
||||
echo Pour voir les logs: docker-compose logs -f
|
||||
echo Pour arreter: docker-compose down
|
||||
echo.
|
||||
pause
|
||||
|
||||
Reference in New Issue
Block a user