# 🎨 BTPXPRESS - FRONTEND

[![Next.js](https://img.shields.io/badge/Next.js-15.2.4-black?logo=next.js)](https://nextjs.org/)
[![React](https://img.shields.io/badge/React-18.2.0-blue?logo=react)](https://reactjs.org/)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.0.4-blue?logo=typescript)](https://www.typescriptlang.org/)
[![PrimeReact](https://img.shields.io/badge/PrimeReact-10.2.1-blue)](https://primereact.org/)
[![License](https://img.shields.io/badge/License-MIT-green.svg)](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