Skip to content

Commit 30e9d92

Browse files
remiv1remiv1
committed
feat: Implement client details page with tabs and search functionality
- Added a new client details template with tabs for information, addresses, emails, phones, and orders. - Updated the clients overview page to include the new client details section. - Enhanced the client search form with additional fields for better filtering. - Created a loading state and error handling for the client search results. - Integrated API endpoints for searching clients and retrieving client details. - Added a new FastAPI service for handling client-related API requests. - Updated the Docker Compose configuration to include the new FastAPI service. - Added requirements for FastAPI and Uvicorn in the API requirements file. - Created a new example API implementation for client management. - Updated the base template to include Font Awesome for icons and improved CSS loading.
1 parent a0e863a commit 30e9d92

24 files changed

Lines changed: 3114 additions & 46 deletions

‎.github/workflows/docker-ci.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ jobs:
9393
docker compose -f docker-compose.yml ps
9494
9595
# Test database connection
96-
docker compose -f docker-compose.yml exec -T acfc-db mariadb -u acfc_user -pacfc_password_ci -e "SELECT 1 as test;" acfc
96+
docker compose -f docker-compose.yml exec -T acfc-db mariadb -u acfc_user -psecure_password -e "SELECT 1 as test;" acfc
9797
9898
# Test MongoDB connection
9999
docker compose -f docker-compose.yml exec -T acfc-logs mongosh --eval "db.adminCommand('ping')"

‎CLIENTS_INTERFACE_README.md‎

Lines changed: 199 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,199 @@
1+
# Documentation - Interface de gestion des clients
2+
3+
## Vue d'ensemble
4+
5+
Cette interface complète de gestion des clients permet de rechercher des clients et d'afficher leurs détails complets avec tous les éléments associés (adresses, emails, téléphones, commandes).
6+
7+
## Fichiers créés/modifiés
8+
9+
### Templates HTML
10+
11+
1. **`app_acfc/templates/clients/research.html`**
12+
- Interface de recherche multi-critères
13+
- Affichage des résultats de recherche
14+
- États de chargement et messages d'erreur
15+
16+
2. **`app_acfc/templates/clients/client_details.html`**
17+
- Interface détaillée avec onglets
18+
- Affichage des informations client (particulier/professionnel)
19+
- Onglets pour adresses, emails, téléphones, commandes
20+
- Boutons d'action pour CRUD
21+
22+
3. **`app_acfc/templates/clients/clients.html`** (modifié)
23+
- Inclut maintenant les deux templates ci-dessus
24+
25+
### JavaScript
26+
27+
4. **`app_acfc/statics/clients/js/clients.js`** (remplacé)
28+
- Gestion complète de la recherche et des détails
29+
- Fonctions utilitaires (formatage, validation)
30+
- Gestion des erreurs et des états de chargement
31+
- Compatibilité avec l'ancien système
32+
33+
### CSS
34+
35+
5. **`app_acfc/statics/clients/css/clients.css`** (nouveau)
36+
- Styles responsifs pour l'interface
37+
- Animations et transitions
38+
- Thème cohérent avec Bootstrap
39+
40+
### API Example
41+
42+
6. **`clients_api_example.py`** (nouveau)
43+
- Exemple d'implémentation des endpoints API
44+
- Documentation des paramètres et réponses
45+
46+
## Fonctionnalités
47+
48+
### Recherche de clients
49+
50+
- **Critères multiples :** nom, email, téléphone, type de client, ville, code postal
51+
- **Types de clients :** Particulier ou Professionnel
52+
- **Résultats paginés :** Limité à 50 résultats
53+
- **Affichage enrichi :** Badges de type, icônes, informations contextuelles
54+
55+
### Détails du client
56+
57+
- **En-tête client :** Nom, type, statut, date de création, notes
58+
- **Informations spécifiques :**
59+
- Particulier : nom, prénom, date et lieu de naissance
60+
- Professionnel : raison sociale, type, SIREN, RNA
61+
62+
### Onglets de données
63+
64+
1. **Adresses** : Liste des adresses avec actions d'édition
65+
2. **Emails** : Emails avec indicateur principal
66+
3. **Téléphones** : Numéros avec indicateur principal
67+
4. **Commandes** : Historique anti-chronologique avec statuts
68+
69+
### Actions disponibles
70+
71+
- Modification du client
72+
- Ajout/modification/suppression d'adresses
73+
- Ajout/modification/suppression d'emails
74+
- Ajout/modification/suppression de téléphones
75+
- Ajout de commandes
76+
- Consultation/modification de commandes
77+
78+
## Intégration
79+
80+
### 1. Endpoints API requis
81+
82+
Vous devez implémenter ces endpoints dans votre application Flask :
83+
84+
```python
85+
# Recherche de clients
86+
GET /api/clients/search
87+
# Paramètres : nom, email, telephone, type_client, ville, code_postal
88+
89+
# Détails d'un client
90+
GET /api/clients/<id>/details
91+
```
92+
93+
### 2. Structure de réponse
94+
95+
#### Recherche
96+
```json
97+
{
98+
"success": true,
99+
"clients": [
100+
{
101+
"id": 123,
102+
"type_client": 1,
103+
"nom": "Martin Dupont",
104+
"email": "martin@email.com",
105+
"telephone": "0123456789",
106+
"created_at": "2024-01-15T10:30:00",
107+
"is_active": true
108+
}
109+
],
110+
"count": 1
111+
}
112+
```
113+
114+
#### Détails
115+
```json
116+
{
117+
"success": true,
118+
"client": {
119+
"id": 123,
120+
"type_client": 1,
121+
"created_at": "2024-01-15T10:30:00",
122+
"is_active": true,
123+
"notes": "Client fidèle",
124+
"particulier": {
125+
"nom": "Dupont",
126+
"prenom": "Martin",
127+
"date_naissance": "1980-05-15",
128+
"lieu_naissance": "Paris"
129+
},
130+
"emails": [...],
131+
"telephones": [...],
132+
"adresses": [...],
133+
"commandes": [...]
134+
}
135+
}
136+
```
137+
138+
### 3. Installation
139+
140+
1. **Copiez les fichiers** dans votre structure de projet
141+
142+
2. **Importez le CSS** dans votre template de base ou spécifiquement :
143+
```html
144+
<link rel="stylesheet" href="{{ url_for('static', filename='clients/css/clients.css') }}">
145+
```
146+
147+
3. **Implementez les API endpoints** en utilisant `clients_api_example.py` comme guide
148+
149+
4. **Testez l'interface** en accédant à `/clients?sub_context=research`
150+
151+
## Personnalisation
152+
153+
### CSS
154+
155+
Le fichier `clients.css` utilise des variables CSS qui peuvent être personnalisées :
156+
- Couleurs principales : `#007bff`, `#28a745`
157+
- Espacements et bordures
158+
- Animations et transitions
159+
160+
### JavaScript
161+
162+
Les fonctions JavaScript peuvent être étendues :
163+
- `displaySearchResults()` : Personnaliser l'affichage des résultats
164+
- `displayClientDetails()` : Modifier l'affichage des détails
165+
- Actions CRUD : Adapter selon vos endpoints
166+
167+
### Templates
168+
169+
Les templates utilisent Bootstrap 5 et peuvent être modifiés :
170+
- Ajout de nouveaux champs de recherche
171+
- Modification de la présentation des onglets
172+
- Personnalisation des boutons d'action
173+
174+
## Responsive Design
175+
176+
L'interface est entièrement responsive :
177+
- **Mobile** : Navigation simplifiée, onglets adaptés
178+
- **Tablet** : Grille flexible pour les formulaires
179+
- **Desktop** : Interface complète avec toutes les fonctionnalités
180+
181+
## Compatibilité
182+
183+
- **Navigateurs** : Chrome 80+, Firefox 75+, Safari 13+, Edge 80+
184+
- **Bootstrap** : Version 5.3.2
185+
- **Font Awesome** : Version 6.4.0
186+
- **JavaScript** : ES6+ (async/await, modules)
187+
188+
## Sécurité
189+
190+
N'oubliez pas d'implémenter :
191+
- Validation des paramètres d'entrée
192+
- Authentification/autorisation
193+
- Protection CSRF
194+
- Sanitisation des données
195+
- Limitation du taux de requêtes
196+
197+
## Support
198+
199+
Pour toute question ou modification, référez-vous aux commentaires dans le code JavaScript et aux exemples dans `clients_api_example.py`.

‎HOMEPAGE_README.md‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
# Page d'accueil ACFC - Guide d'utilisation
2+
3+
## Vue d'ensemble
4+
5+
La page d'accueil de l'application ACFC a été conçue pour offrir un aperçu complet et interactif du système de gestion. Elle est responsive et s'adapte automatiquement aux différentes tailles d'écran.
6+
7+
## Structure de la page
8+
9+
### 1. Section d'accueil (25% de la hauteur)
10+
- Message de bienvenue prominent
11+
- Présentation de la plateforme
12+
- Design responsive avec animations
13+
14+
### 2. Dashboard principal (50% de la hauteur)
15+
- **Colonne gauche (25%)** : Commandes en cours
16+
- **Colonne centrale (50%)** : Logo de l'entreprise
17+
- **Colonne droite (25%)** : Indicateurs commerciaux
18+
19+
### 3. Liens rapides (25% de la hauteur)
20+
- Accès direct aux différents modules
21+
- Icônes représentatives de chaque section
22+
- Animations au survol
23+
24+
## Fichiers créés/modifiés
25+
26+
### Templates
27+
- `app_acfc/templates/default.html` - Template principal de la page d'accueil
28+
- `app_acfc/templates/dashboard/commandes_en_cours.html` - Composant des commandes
29+
- `app_acfc/templates/dashboard/indicateurs_commerciaux.html` - Composant des indicateurs
30+
- `app_acfc/templates/base.html` - Modifié pour inclure CSS et JS
31+
32+
### Assets statiques
33+
- `app_acfc/statics/common/css/home.css` - Styles CSS pour la page d'accueil
34+
- `app_acfc/statics/common/js/home.js` - JavaScript interactif
35+
- `app_acfc/statics/common/img/Logo.svg` - Logo de l'entreprise
36+
37+
### Configuration
38+
- `api_fast_dashboard_example.py` - Exemple d'API FastAPI pour les données
39+
40+
## Intégration avec l'API Fast
41+
42+
### Endpoints requis
43+
44+
La page d'accueil s'attend à recevoir des données depuis les endpoints suivants :
45+
46+
1. **`/api/fast/commandes-en-cours`**
47+
```json
48+
{
49+
"success": true,
50+
"commandes": [
51+
{
52+
"numero": "CMD-2025-0001",
53+
"client": "Entreprise ABC",
54+
"montant": 1250.00,
55+
"date": "2025-08-20"
56+
}
57+
],
58+
"total_commandes": 3,
59+
"total_montant": 4291.25
60+
}
61+
```
62+
63+
2. **`/api/fast/indicateurs-commerciaux`**
64+
```json
65+
{
66+
"success": true,
67+
"indicateurs": {
68+
"ca_mensuel": 45230.75,
69+
"nb_commandes": 23,
70+
"nb_devis": 12,
71+
"nb_clients": 156
72+
}
73+
}
74+
```
75+
76+
### Configuration du proxy
77+
78+
Assurez-vous que votre serveur web (nginx/apache) redirige les appels `/api/fast/*` vers votre application FastAPI.
79+
80+
Exemple de configuration nginx :
81+
```nginx
82+
location /api/fast/ {
83+
proxy_pass http://fastapi-server:8000/api/fast/;
84+
proxy_set_header Host $host;
85+
proxy_set_header X-Real-IP $remote_addr;
86+
}
87+
```
88+
89+
## Fonctionnalités JavaScript
90+
91+
### Animations
92+
- Fade-in des cartes au chargement
93+
- Animations au survol du logo et des liens
94+
- Effets de transition fluides
95+
96+
### Actualisation automatique
97+
- Rafraîchissement des données toutes les 5 minutes
98+
- Boutons de rafraîchissement manuel
99+
- Notifications de statut
100+
101+
### Responsive Design
102+
- Adaptation mobile-first
103+
- Réorganisation des colonnes sur petits écrans
104+
- Optimisation des tailles de police et espaces
105+
106+
## Personnalisation
107+
108+
### Couleurs et thème
109+
Modifiez les variables CSS dans `home.css` :
110+
```css
111+
:root {
112+
--primary-color: #007bff;
113+
--success-color: #28a745;
114+
--warning-color: #ffc107;
115+
--danger-color: #dc3545;
116+
}
117+
```
118+
119+
### Logo
120+
Remplacez le fichier `Logo.svg` par votre propre logo en conservant les mêmes dimensions pour un rendu optimal.
121+
122+
### Liens rapides
123+
Modifiez la section des liens rapides dans `default.html` pour ajouter/supprimer des modules selon vos besoins.
124+
125+
## Dépendances
126+
127+
### CSS
128+
- Bootstrap 5.3.2
129+
- Font Awesome 6.4.0
130+
131+
### JavaScript
132+
- Bootstrap JS Bundle
133+
- JavaScript vanilla (ES6+)
134+
135+
## Compatibilité
136+
137+
- **Navigateurs** : Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
138+
- **Résolutions** : 320px à 4K
139+
- **Appareils** : Desktop, tablette, mobile
140+
141+
## Points d'attention
142+
143+
1. **Performance** : Les données sont rafraîchies automatiquement - surveillez la charge sur l'API
144+
2. **Sécurité** : Assurez-vous que les endpoints de l'API sont sécurisés
145+
3. **Fallback** : La page fonctionne même si l'API Fast n'est pas disponible
146+
4. **SEO** : Optimisée pour les moteurs de recherche avec un markup sémantique
147+
148+
## Dépannage
149+
150+
### Problèmes courants
151+
152+
1. **Logo ne s'affiche pas**
153+
- Vérifiez que le fichier `Logo.svg` existe dans `statics/common/img/`
154+
- Contrôlez les permissions du fichier
155+
156+
2. **Données ne se chargent pas**
157+
- Vérifiez que l'API Fast est accessible
158+
- Consultez la console du navigateur pour les erreurs
159+
- Testez les endpoints manuellement
160+
161+
3. **Styles cassés**
162+
- Vérifiez que `home.css` est bien chargé
163+
- Contrôlez l'ordre de chargement des CSS
164+
165+
4. **JavaScript non fonctionnel**
166+
- Vérifiez la console pour les erreurs JS
167+
- Assurez-vous que Bootstrap JS est chargé avant `home.js`
168+
169+
## Support
170+
171+
Pour toute question ou problème, consultez :
172+
- Les logs de l'application Flask
173+
- Les logs de votre serveur web
174+
- La console du navigateur (F12)

‎api_acfc/api_back.py‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
from fastapi import FastAPI
2+
from api_fast_dashboard import dashboard_router
3+
4+
app = FastAPI()
5+
app.include_router(dashboard_router)

0 commit comments

Comments
 (0)