🎨 BTPXPRESS - FRONTEND

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
• Technologies
• Prérequis
• Installation
• Lancement
• Structure du projet
• Pages principales
• 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

git clone https://github.com/votre-org/btpxpress.git
cd btpxpress/btpxpress-client

2. Installer les dépendances

npm install

3. Configurer les variables d'environnement

Créer un fichier .env.local :

# 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

npm run dev

Ouvrir http://localhost:3000

Mode production

# Build
npm run build

# Start
npm start

Linting & Formatage

# 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
• Documentation des composants
• Guide des tests

API

• Documentation API Backend
• Intégration Keycloak

---

🧪 Tests

# 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é)

# Installer Vercel CLI
npm i -g vercel

# Déployer
vercel

Docker

# 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