303 lines
7.9 KiB
Markdown
303 lines
7.9 KiB
Markdown
# 🎨 BTPXPRESS - FRONTEND
|
|
|
|
[](https://nextjs.org/)
|
|
[](https://reactjs.org/)
|
|
[](https://www.typescriptlang.org/)
|
|
[](https://primereact.org/)
|
|
[](LICENSE)
|
|
|
|
Application web frontend pour la gestion d'entreprise BTP - Chantiers, Matériel, Employés, Planning, Devis et plus encore.
|
|
|
|
---
|
|
|
|
## 📋 Table des matières
|
|
|
|
- [Vue d'ensemble](#vue-densemble)
|
|
- [Technologies](#technologies)
|
|
- [Prérequis](#prérequis)
|
|
- [Installation](#installation)
|
|
- [Lancement](#lancement)
|
|
- [Structure du projet](#structure-du-projet)
|
|
- [Pages principales](#pages-principales)
|
|
- [Documentation](#documentation)
|
|
|
|
---
|
|
|
|
## 🎯 Vue d'ensemble
|
|
|
|
**BTPXpress Frontend** est une application web moderne construite avec Next.js 15 et React 18, utilisant PrimeReact pour l'interface utilisateur. Elle communique avec le backend Quarkus via API REST et utilise Keycloak pour l'authentification.
|
|
|
|
### **Fonctionnalités principales**
|
|
|
|
- 🏗️ **Gestion des chantiers** - Création, suivi, planning
|
|
- 👥 **Gestion des clients** - Particuliers et professionnels
|
|
- 🔧 **Gestion du matériel** - Stock, réservations, maintenance
|
|
- 👷 **Gestion des employés** - Équipes, compétences, planning
|
|
- 💰 **Devis & Factures** - Génération, envoi, suivi
|
|
- 📅 **Planning** - Calendrier, événements, affectations
|
|
- 📊 **Tableaux de bord** - Statistiques et KPIs
|
|
- 🔔 **Notifications** - Alertes en temps réel
|
|
- 📄 **Documents** - GED (Gestion Électronique des Documents)
|
|
|
|
---
|
|
|
|
## 🛠️ Technologies
|
|
|
|
### **Framework & Librairies**
|
|
|
|
| Technologie | Version | Description |
|
|
|-------------|---------|-------------|
|
|
| **Next.js** | 15.2.4 | Framework React avec App Router |
|
|
| **React** | 18.2.0 | Bibliothèque UI |
|
|
| **TypeScript** | 5.0.4 | Typage statique |
|
|
| **PrimeReact** | 10.2.1 | Composants UI |
|
|
| **PrimeIcons** | 6.0.1 | Icônes |
|
|
| **Axios** | 1.3.4 | Client HTTP |
|
|
| **Keycloak-js** | 23.0.7 | Authentification |
|
|
| **React Hook Form** | 7.43.9 | Gestion des formulaires |
|
|
| **Chart.js** | 4.2.1 | Graphiques |
|
|
| **Date-fns** | 2.29.3 | Manipulation de dates |
|
|
|
|
---
|
|
|
|
## 📦 Prérequis
|
|
|
|
| Logiciel | Version minimale | Recommandée | Vérification |
|
|
|----------|------------------|-------------|--------------|
|
|
| **Node.js** | 18.x | 20.x LTS | `node --version` |
|
|
| **npm** | 9.x | 10.x | `npm --version` |
|
|
| **Git** | 2.30 | 2.40+ | `git --version` |
|
|
|
|
### **Services externes**
|
|
|
|
- **Backend API** : http://localhost:8080
|
|
- **Keycloak** : http://localhost:8180
|
|
|
|
---
|
|
|
|
## 🚀 Installation
|
|
|
|
### **1. Cloner le repository**
|
|
|
|
```bash
|
|
git clone https://github.com/votre-org/btpxpress.git
|
|
cd btpxpress/btpxpress-client
|
|
```
|
|
|
|
### **2. Installer les dépendances**
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
### **3. Configurer les variables d'environnement**
|
|
|
|
Créer un fichier `.env.local` :
|
|
|
|
```bash
|
|
# API Backend
|
|
NEXT_PUBLIC_API_URL=http://localhost:8080/api/v1
|
|
|
|
# Keycloak
|
|
NEXT_PUBLIC_KEYCLOAK_URL=http://localhost:8180
|
|
NEXT_PUBLIC_KEYCLOAK_REALM=btpxpress
|
|
NEXT_PUBLIC_KEYCLOAK_CLIENT_ID=btpxpress-frontend
|
|
|
|
# Application
|
|
NEXT_PUBLIC_APP_NAME=BTPXpress
|
|
NEXT_PUBLIC_APP_VERSION=1.0.0
|
|
```
|
|
|
|
---
|
|
|
|
## 🎬 Lancement
|
|
|
|
### **Mode développement**
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
Ouvrir http://localhost:3000
|
|
|
|
### **Mode production**
|
|
|
|
```bash
|
|
# Build
|
|
npm run build
|
|
|
|
# Start
|
|
npm start
|
|
```
|
|
|
|
### **Linting & Formatage**
|
|
|
|
```bash
|
|
# Linting
|
|
npm run lint
|
|
|
|
# Formatage
|
|
npm run format
|
|
```
|
|
|
|
---
|
|
|
|
## 📁 Structure du projet
|
|
|
|
```
|
|
btpxpress-client/
|
|
├── app/ # App Router (Next.js 15)
|
|
│ ├── (auth)/ # Routes authentifiées
|
|
│ │ ├── chantiers/ # Pages chantiers
|
|
│ │ ├── clients/ # Pages clients
|
|
│ │ ├── materiels/ # Pages matériel
|
|
│ │ ├── employes/ # Pages employés
|
|
│ │ ├── devis/ # Pages devis
|
|
│ │ ├── planning/ # Pages planning
|
|
│ │ ├── notifications/ # Pages notifications
|
|
│ │ └── dashboard/ # Tableau de bord
|
|
│ ├── login/ # Page de connexion
|
|
│ ├── layout.tsx # Layout principal
|
|
│ └── page.tsx # Page d'accueil
|
|
├── components/ # Composants réutilisables
|
|
│ ├── layout/ # Layout (Header, Sidebar, Footer)
|
|
│ ├── forms/ # Formulaires
|
|
│ ├── tables/ # Tableaux de données
|
|
│ ├── charts/ # Graphiques
|
|
│ └── common/ # Composants communs
|
|
├── services/ # Services API
|
|
│ ├── api/ # Clients API
|
|
│ ├── auth/ # Service d'authentification
|
|
│ └── utils/ # Utilitaires
|
|
├── types/ # Types TypeScript
|
|
├── hooks/ # Custom React Hooks
|
|
├── contexts/ # React Contexts
|
|
├── styles/ # Styles globaux
|
|
├── public/ # Assets statiques
|
|
├── docs/ # Documentation
|
|
└── README.md # Ce fichier
|
|
```
|
|
|
|
---
|
|
|
|
## 📄 Pages principales
|
|
|
|
| Page | Route | Description |
|
|
|------|-------|-------------|
|
|
| **Dashboard** | `/dashboard` | Vue d'ensemble, KPIs, graphiques |
|
|
| **Chantiers** | `/chantiers` | Liste, création, suivi |
|
|
| **Clients** | `/clients` | Gestion clients |
|
|
| **Matériel** | `/materiels` | Inventaire, réservations |
|
|
| **Employés** | `/employes` | Équipes, compétences |
|
|
| **Devis** | `/devis` | Devis et factures |
|
|
| **Planning** | `/planning` | Calendrier, événements |
|
|
| **Notifications** | `/notifications` | Alertes et messages |
|
|
|
|
---
|
|
|
|
## 🧩 Composants PrimeReact
|
|
|
|
### **Layout**
|
|
- `Header` - En-tête avec navigation
|
|
- `Sidebar` - Menu latéral
|
|
- `Footer` - Pied de page
|
|
- `Breadcrumb` - Fil d'Ariane
|
|
|
|
### **Formulaires**
|
|
- `ChantierForm` - Formulaire chantier
|
|
- `ClientForm` - Formulaire client
|
|
- `MaterielForm` - Formulaire matériel
|
|
- `DevisForm` - Formulaire devis
|
|
|
|
### **Tableaux**
|
|
- `DataTable` - Tableau de données générique
|
|
- `ChantierTable` - Tableau chantiers
|
|
- `ClientTable` - Tableau clients
|
|
|
|
### **Graphiques**
|
|
- `ChartBar` - Graphique en barres
|
|
- `ChartLine` - Graphique en ligne
|
|
- `ChartPie` - Graphique circulaire
|
|
|
|
---
|
|
|
|
## 🔌 Services API
|
|
|
|
| Service | Description |
|
|
|---------|-------------|
|
|
| `chantierService` | API Chantiers |
|
|
| `clientService` | API Clients |
|
|
| `materielService` | API Matériel |
|
|
| `employeService` | API Employés |
|
|
| `devisService` | API Devis |
|
|
| `planningService` | API Planning |
|
|
| `notificationService` | API Notifications |
|
|
| `authService` | Authentification Keycloak |
|
|
|
|
---
|
|
|
|
## 📚 Documentation
|
|
|
|
### **Guides**
|
|
- [Guide de développement](./DEVELOPMENT.md)
|
|
- [Documentation des composants](./COMPONENTS.md)
|
|
- [Guide des tests](./TESTING.md)
|
|
|
|
### **API**
|
|
- [Documentation API Backend](../btpxpress-server/API.md)
|
|
- [Intégration Keycloak](./docs/KEYCLOAK_INTEGRATION.md)
|
|
|
|
---
|
|
|
|
## 🧪 Tests
|
|
|
|
```bash
|
|
# Exécuter tous les tests
|
|
npm test
|
|
|
|
# Tests en mode watch
|
|
npm run test:watch
|
|
|
|
# Couverture de code
|
|
npm run test:coverage
|
|
```
|
|
|
|
---
|
|
|
|
## 🚀 Déploiement
|
|
|
|
### **Vercel (recommandé)**
|
|
|
|
```bash
|
|
# Installer Vercel CLI
|
|
npm i -g vercel
|
|
|
|
# Déployer
|
|
vercel
|
|
```
|
|
|
|
### **Docker**
|
|
|
|
```bash
|
|
# Build image
|
|
docker build -t btpxpress-client .
|
|
|
|
# Run container
|
|
docker run -p 3000:3000 btpxpress-client
|
|
```
|
|
|
|
---
|
|
|
|
## 📞 Support
|
|
|
|
- **Email** : support@btpxpress.fr
|
|
- **Documentation** : https://docs.btpxpress.fr
|
|
- **Issues** : https://github.com/votre-org/btpxpress/issues
|
|
|
|
---
|
|
|
|
**Dernière mise à jour** : 2025-09-30
|
|
**Version** : 1.0.0
|
|
**Auteur** : Équipe BTPXpress
|
|
|