Initial commit

app/(main)/clients/__tests__/page.test.tsx

@@ -0,0 +1,389 @@
+import React from 'react'
+import { render, screen, waitFor } from '../../../../test-utils'
+import userEvent from '@testing-library/user-event'
+import ClientsPage from '../page'
+import { clientService } from '../../../../services/api'
+import { Client } from '../../../../types/btp'
+
+// Mock des services
+jest.mock('../../../../services/api')
+
+const mockClientService = clientService as jest.Mocked<typeof clientService>
+
+const mockClients: Client[] = [
+  {
+    id: '1',
+    nom: 'Dupont',
+    prenom: 'Jean',
+    entreprise: 'Entreprise ABC',
+    email: 'jean.dupont@abc.com',
+    telephone: '0612345678',
+    adresse: '123 rue de la Paix',
+    codePostal: '75001',
+    ville: 'Paris',
+    numeroTVA: 'FR12345678901',
+    siret: '12345678901234',
+    actif: true,
+  },
+  {
+    id: '2',
+    nom: 'Martin',
+    prenom: 'Marie',
+    entreprise: 'Société XYZ',
+    email: 'marie.martin@xyz.com',
+    telephone: '0687654321',
+    adresse: '456 avenue des Champs',
+    codePostal: '75008',
+    ville: 'Paris',
+    numeroTVA: 'FR98765432109',
+    siret: '98765432109876',
+    actif: true,
+  },
+]
+
+describe('Page Clients', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockClientService.getAll.mockResolvedValue(mockClients)
+  })
+
+  it('devrait charger et afficher la liste des clients', async () => {
+    render(<ClientsPage />)
+    
+    expect(screen.getByText('Gestion des Clients')).toBeInTheDocument()
+    
+    await waitFor(() => {
+      expect(screen.getByText('Jean Dupont')).toBeInTheDocument()
+      expect(screen.getByText('Marie Martin')).toBeInTheDocument()
+    })
+    
+    expect(mockClientService.getAll).toHaveBeenCalledTimes(1)
+  })
+
+  it('devrait permettre d\'ouvrir le formulaire de création', async () => {
+    const user = userEvent.setup()
+    render(<ClientsPage />)
+    
+    await waitFor(() => {
+      expect(screen.getByText('Jean Dupont')).toBeInTheDocument()
+    })
+    
+    const newButton = screen.getByText('Nouveau')
+    await user.click(newButton)
+    
+    expect(screen.getByText('Détails du Client')).toBeInTheDocument()
+    expect(screen.getByLabelText('Nom')).toBeInTheDocument()
+    expect(screen.getByLabelText('Prénom')).toBeInTheDocument()
+  })
+
+  it('devrait permettre de créer un nouveau client', async () => {
+    const user = userEvent.setup()
+    const newClient = {
+      id: '3',
+      nom: 'Nouveau',
+      prenom: 'Client',
+      entreprise: 'Nouvelle Entreprise',
+      email: 'nouveau@client.com',
+      telephone: '0123456789',
+      adresse: '789 rue Neuve',
+      codePostal: '69000',
+      ville: 'Lyon',
+      numeroTVA: 'FR11111111111',
+      siret: '11111111111111',
+      actif: true,
+    }
+    
+    mockClientService.create.mockResolvedValue(newClient)
+    
+    render(<ClientsPage />)
+    
+    await waitFor(() => {
+      expect(screen.getByText('Jean Dupont')).toBeInTheDocument()
+    })
+    
+    // Ouvrir le formulaire
+    const newButton = screen.getByText('Nouveau')
+    await user.click(newButton)
+    
+    // Remplir le formulaire
+    await user.type(screen.getByLabelText('Nom'), 'Nouveau')
+    await user.type(screen.getByLabelText('Prénom'), 'Client')
+    await user.type(screen.getByLabelText('Entreprise'), 'Nouvelle Entreprise')
+    await user.type(screen.getByLabelText('Email'), 'nouveau@client.com')
+    await user.type(screen.getByLabelText('Téléphone'), '0123456789')
+    await user.type(screen.getByLabelText('Adresse'), '789 rue Neuve')
+    await user.type(screen.getByLabelText('Code Postal'), '69000')
+    await user.type(screen.getByLabelText('Ville'), 'Lyon')
+    
+    // Sauvegarder
+    const saveButton = screen.getByText('Sauvegarder')
+    await user.click(saveButton)
+    
+    await waitFor(() => {
+      expect(mockClientService.create).toHaveBeenCalledWith({
+        id: '',
+        nom: 'Nouveau',
+        prenom: 'Client',
+        entreprise: 'Nouvelle Entreprise',
+        email: 'nouveau@client.com',
+        telephone: '0123456789',
+        adresse: '789 rue Neuve',
+        codePostal: '69000',
+        ville: 'Lyon',
+        numeroTVA: '',
+        siret: '',
+        actif: true,
+      })
+    })
+  })
+
+  it('devrait permettre de modifier un client existant', async () => {
+    const user = userEvent.setup()
+    const updatedClient = { ...mockClients[0], nom: 'Dupont-Modifié' }
+    
+    mockClientService.update.mockResolvedValue(updatedClient)
+    
+    render(<ClientsPage />)
+    
+    await waitFor(() => {
+      expect(screen.getByText('Jean Dupont')).toBeInTheDocument()
+    })
+    
+    // Cliquer sur le bouton d'édition
+    const editButtons = screen.getAllByRole('button', { name: '' })
+    const editButton = editButtons.find(button => 
+      button.querySelector('.pi-pencil')
+    )
+    expect(editButton).toBeInTheDocument()
+    await user.click(editButton!)
+    
+    // Modifier le nom
+    const nomInput = screen.getByLabelText('Nom')
+    await user.clear(nomInput)
+    await user.type(nomInput, 'Dupont-Modifié')
+    
+    // Sauvegarder
+    const saveButton = screen.getByText('Sauvegarder')
+    await user.click(saveButton)
+    
+    await waitFor(() => {
+      expect(mockClientService.update).toHaveBeenCalledWith('1', {
+        ...mockClients[0],
+        nom: 'Dupont-Modifié',
+      })
+    })
+  })
+
+  it('devrait permettre de supprimer un client', async () => {
+    const user = userEvent.setup()
+    mockClientService.delete.mockResolvedValue()
+    
+    render(<ClientsPage />)
+    
+    await waitFor(() => {
+      expect(screen.getByText('Jean Dupont')).toBeInTheDocument()
+    })
+    
+    // Cliquer sur le bouton de suppression
+    const deleteButtons = screen.getAllByRole('button', { name: '' })
+    const deleteButton = deleteButtons.find(button => 
+      button.querySelector('.pi-trash')
+    )
+    expect(deleteButton).toBeInTheDocument()
+    await user.click(deleteButton!)
+    
+    // Confirmer la suppression
+    expect(screen.getByText('Êtes-vous sûr de vouloir supprimer Jean Dupont ?')).toBeInTheDocument()
+    const confirmButton = screen.getByText('Oui')
+    await user.click(confirmButton)
+    
+    await waitFor(() => {
+      expect(mockClientService.delete).toHaveBeenCalledWith('1')
+    })
+  })
+
+  it('devrait permettre la recherche dans la liste', async () => {
+    const user = userEvent.setup()
+    render(<ClientsPage />)
+    
+    await waitFor(() => {
+      expect(screen.getByText('Jean Dupont')).toBeInTheDocument()
+      expect(screen.getByText('Marie Martin')).toBeInTheDocument()
+    })
+    
+    // Rechercher "Jean"
+    const searchInput = screen.getByPlaceholderText('Rechercher...')
+    await user.type(searchInput, 'Jean')
+    
+    // La recherche est gérée par PrimeReact DataTable
+    // On vérifie que l'input a bien la valeur
+    expect(searchInput).toHaveValue('Jean')
+  })
+
+  it('devrait permettre d\'exporter les données', async () => {
+    const user = userEvent.setup()
+    render(<ClientsPage />)
+    
+    await waitFor(() => {
+      expect(screen.getByText('Jean Dupont')).toBeInTheDocument()
+    })
+    
+    const exportButton = screen.getByText('Exporter')
+    expect(exportButton).toBeInTheDocument()
+    
+    // L'export est géré par PrimeReact DataTable
+    await user.click(exportButton)
+  })
+
+  it('devrait valider les champs requis', async () => {
+    const user = userEvent.setup()
+    render(<ClientsPage />)
+    
+    await waitFor(() => {
+      expect(screen.getByText('Jean Dupont')).toBeInTheDocument()
+    })
+    
+    // Ouvrir le formulaire
+    const newButton = screen.getByText('Nouveau')
+    await user.click(newButton)
+    
+    // Essayer de sauvegarder sans remplir les champs requis
+    const saveButton = screen.getByText('Sauvegarder')
+    await user.click(saveButton)
+    
+    // Vérifier les messages d'erreur
+    await waitFor(() => {
+      expect(screen.getByText('Le nom est requis.')).toBeInTheDocument()
+      expect(screen.getByText('Le prénom est requis.')).toBeInTheDocument()
+    })
+    
+    // Le service ne devrait pas être appelé
+    expect(mockClientService.create).not.toHaveBeenCalled()
+  })
+
+  it('devrait afficher les erreurs de l\'API', async () => {
+    const user = userEvent.setup()
+    mockClientService.create.mockRejectedValue(new Error('Erreur serveur'))
+    
+    render(<ClientsPage />)
+    
+    await waitFor(() => {
+      expect(screen.getByText('Jean Dupont')).toBeInTheDocument()
+    })
+    
+    // Ouvrir le formulaire et remplir les champs requis
+    const newButton = screen.getByText('Nouveau')
+    await user.click(newButton)
+    
+    await user.type(screen.getByLabelText('Nom'), 'Test')
+    await user.type(screen.getByLabelText('Prénom'), 'Client')
+    
+    // Sauvegarder
+    const saveButton = screen.getByText('Sauvegarder')
+    await user.click(saveButton)
+    
+    // Vérifier qu'une erreur est affichée
+    await waitFor(() => {
+      expect(screen.getByText('Impossible de sauvegarder le client')).toBeInTheDocument()
+    })
+  })
+
+  it('devrait permettre la suppression multiple', async () => {
+    const user = userEvent.setup()
+    mockClientService.delete.mockResolvedValue()
+    
+    render(<ClientsPage />)
+    
+    await waitFor(() => {
+      expect(screen.getByText('Jean Dupont')).toBeInTheDocument()
+    })
+    
+    // Sélectionner plusieurs clients
+    const checkboxes = screen.getAllByRole('checkbox')
+    await user.click(checkboxes[1]) // Premier client
+    await user.click(checkboxes[2]) // Deuxième client
+    
+    // Supprimer les clients sélectionnés
+    const deleteButton = screen.getByText('Supprimer')
+    await user.click(deleteButton)
+    
+    // Confirmer la suppression
+    const confirmButton = screen.getByText('Oui')
+    await user.click(confirmButton)
+    
+    await waitFor(() => {
+      expect(mockClientService.delete).toHaveBeenCalledTimes(2)
+    })
+  })
+
+  it('devrait afficher les statuts des clients', async () => {
+    render(<ClientsPage />)
+    
+    await waitFor(() => {
+      expect(screen.getByText('Jean Dupont')).toBeInTheDocument()
+    })
+    
+    // Vérifier que les statuts "Actif" sont affichés
+    const activeStatuses = screen.getAllByText('Actif')
+    expect(activeStatuses).toHaveLength(2)
+  })
+
+  it('devrait formater les numéros de téléphone', async () => {
+    render(<ClientsPage />)
+    
+    await waitFor(() => {
+      expect(screen.getByText('Jean Dupont')).toBeInTheDocument()
+    })
+    
+    // Les numéros de téléphone sont formatés par la fonction formatPhoneNumber
+    expect(screen.getByText('0612345678')).toBeInTheDocument()
+    expect(screen.getByText('0687654321')).toBeInTheDocument()
+  })
+
+  it('devrait formater les adresses complètes', async () => {
+    render(<ClientsPage />)
+    
+    await waitFor(() => {
+      expect(screen.getByText('Jean Dupont')).toBeInTheDocument()
+    })
+    
+    // Les adresses sont formatées par la fonction formatAddress
+    expect(screen.getByText('123 rue de la Paix, 75001 Paris')).toBeInTheDocument()
+    expect(screen.getByText('456 avenue des Champs, 75008 Paris')).toBeInTheDocument()
+  })
+
+  it('devrait gérer l\'état de chargement', () => {
+    mockClientService.getAll.mockImplementation(
+      () => new Promise(() => {}) // Promise qui ne se résout jamais
+    )
+    
+    render(<ClientsPage />)
+    
+    // Vérifier que le tableau est en état de chargement
+    const dataTable = document.querySelector('[data-pc-name="datatable"]')
+    expect(dataTable).toBeInTheDocument()
+  })
+
+  it('devrait annuler les modifications', async () => {
+    const user = userEvent.setup()
+    render(<ClientsPage />)
+    
+    await waitFor(() => {
+      expect(screen.getByText('Jean Dupont')).toBeInTheDocument()
+    })
+    
+    // Ouvrir le formulaire
+    const newButton = screen.getByText('Nouveau')
+    await user.click(newButton)
+    
+    // Remplir partiellement le formulaire
+    await user.type(screen.getByLabelText('Nom'), 'Test')
+    
+    // Annuler
+    const cancelButton = screen.getByText('Annuler')
+    await user.click(cancelButton)
+    
+    // Vérifier que le formulaire est fermé
+    expect(screen.queryByText('Détails du Client')).not.toBeInTheDocument()
+  })
+})

app/(main)/clients/historique/page.tsx

@@ -0,0 +1,397 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { Card } from 'primereact/card';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { InputText } from 'primereact/inputtext';
+import { Calendar } from 'primereact/calendar';
+import { Tag } from 'primereact/tag';
+import { Button } from 'primereact/button';
+import { Dropdown } from 'primereact/dropdown';
+import { Divider } from 'primereact/divider';
+import clientService from '../../../../services/clientService';
+
+/**
+ * Page Historique Clients - BTP Express
+ * Suivi complet de l'activité clients avec métriques BTP
+ */
+const HistoriqueClientsPage = () => {
+    const [activites, setActivites] = useState<any[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [globalFilter, setGlobalFilter] = useState('');
+    const [selectedClient, setSelectedClient] = useState<any>(null);
+    const [dateDebut, setDateDebut] = useState<Date | null>(null);
+    const [dateFin, setDateFin] = useState<Date | null>(null);
+    const [typeActivite, setTypeActivite] = useState<string>('');
+    const [metriques, setMetriques] = useState({
+        nouveauxClients: 0,
+        chantiersTermines: 0,
+        caTotal: 0,
+        relancesEnvoyees: 0
+    });
+
+    const typesActivite = [
+        { label: 'Toutes', value: '' },
+        { label: 'Création client', value: 'CLIENT_CREATION' },
+        { label: 'Modification client', value: 'CLIENT_UPDATE' },
+        { label: 'Nouveau chantier', value: 'CHANTIER_CREATION' },
+        { label: 'Chantier terminé', value: 'CHANTIER_TERMINE' },
+        { label: 'Devis envoyé', value: 'DEVIS_ENVOYE' },
+        { label: 'Devis accepté', value: 'DEVIS_ACCEPTE' },
+        { label: 'Facture émise', value: 'FACTURE_EMISE' },
+        { label: 'Paiement reçu', value: 'PAIEMENT_RECU' },
+        { label: 'Relance envoyée', value: 'RELANCE_ENVOYEE' }
+    ];
+
+    useEffect(() => {
+        loadHistorique();
+        loadMetriques();
+    }, [selectedClient, dateDebut, dateFin, typeActivite]);
+
+    const loadHistorique = async () => {
+        try {
+            setLoading(true);
+            
+            // Simulation données historique BTP
+            const mockActivites = [
+                {
+                    id: '1',
+                    date: new Date('2025-01-30'),
+                    type: 'CHANTIER_CREATION',
+                    client: { nom: 'Dupont', prenom: 'Jean', entreprise: 'Maçonnerie Dupont' },
+                    description: 'Nouveau chantier: Rénovation villa 150m²',
+                    montant: 45000,
+                    statut: 'EN_COURS',
+                    utilisateur: 'M. Laurent (Chef de projet)'
+                },
+                {
+                    id: '2',
+                    date: new Date('2025-01-29'),
+                    type: 'DEVIS_ACCEPTE',
+                    client: { nom: 'Martin', prenom: 'Sophie', entreprise: 'Construction Martin' },
+                    description: 'Devis DEV-2025-001 accepté - Extension maison',
+                    montant: 28500,
+                    statut: 'ACCEPTE',
+                    utilisateur: 'Mme Petit (Commerciale)'
+                },
+                {
+                    id: '3',
+                    date: new Date('2025-01-28'),
+                    type: 'FACTURE_EMISE',
+                    client: { nom: 'Bernard', prenom: 'Michel', entreprise: null },
+                    description: 'Facture FAC-2025-012 émise - Acompte 30%',
+                    montant: 15600,
+                    statut: 'ENVOYEE',
+                    utilisateur: 'Mme Durand (Comptabilité)'
+                },
+                {
+                    id: '4',
+                    date: new Date('2025-01-27'),
+                    type: 'CHANTIER_TERMINE',
+                    client: { nom: 'Rousseau', prenom: 'Claire', entreprise: 'Pharmacie Rousseau' },
+                    description: 'Chantier terminé: Aménagement officine 80m²',
+                    montant: 32000,
+                    statut: 'TERMINE',
+                    utilisateur: 'M. Thomas (Chef équipe)'
+                },
+                {
+                    id: '5',
+                    date: new Date('2025-01-26'),
+                    type: 'CLIENT_CREATION',
+                    client: { nom: 'Leroy', prenom: 'Antoine', entreprise: 'Boulangerie Leroy' },
+                    description: 'Nouveau client créé - Secteur alimentaire',
+                    montant: 0,
+                    statut: 'ACTIF',
+                    utilisateur: 'Mme Petit (Commerciale)'
+                },
+                {
+                    id: '6',
+                    date: new Date('2025-01-25'),
+                    type: 'PAIEMENT_RECU',
+                    client: { nom: 'Garcia', prenom: 'Maria', entreprise: 'Restaurant Garcia' },
+                    description: 'Paiement reçu - Solde chantier cuisine pro',
+                    montant: 18750,
+                    statut: 'PAYE',
+                    utilisateur: 'Système (Automatique)'
+                }
+            ];
+
+            setActivites(mockActivites);
+        } catch (error) {
+            console.error('Erreur chargement historique:', error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const loadMetriques = () => {
+        // Simulation métriques période
+        setMetriques({
+            nouveauxClients: 8,
+            chantiersTermines: 12,
+            caTotal: 185600,
+            relancesEnvoyees: 3
+        });
+    };
+
+    const typeActiviteBodyTemplate = (rowData: any) => {
+        const getConfig = (type: string) => {
+            switch (type) {
+                case 'CLIENT_CREATION': return { label: 'Nouveau client', severity: 'info', icon: 'pi-user-plus' };
+                case 'CLIENT_UPDATE': return { label: 'Client modifié', severity: 'warning', icon: 'pi-user-edit' };
+                case 'CHANTIER_CREATION': return { label: 'Nouveau chantier', severity: 'success', icon: 'pi-map' };
+                case 'CHANTIER_TERMINE': return { label: 'Chantier terminé', severity: 'success', icon: 'pi-check-circle' };
+                case 'DEVIS_ENVOYE': return { label: 'Devis envoyé', severity: 'info', icon: 'pi-send' };
+                case 'DEVIS_ACCEPTE': return { label: 'Devis accepté', severity: 'success', icon: 'pi-thumbs-up' };
+                case 'FACTURE_EMISE': return { label: 'Facture émise', severity: 'warning', icon: 'pi-file-excel' };
+                case 'PAIEMENT_RECU': return { label: 'Paiement reçu', severity: 'success', icon: 'pi-euro' };
+                case 'RELANCE_ENVOYEE': return { label: 'Relance envoyée', severity: 'danger', icon: 'pi-exclamation-triangle' };
+                default: return { label: type, severity: 'secondary', icon: 'pi-info-circle' };
+            }
+        };
+
+        const config = getConfig(rowData.type);
+        return (
+            <div className="flex align-items-center">
+                <i className={`pi ${config.icon} mr-2`} />
+                <Tag value={config.label} severity={config.severity} />
+            </div>
+        );
+    };
+
+    const clientBodyTemplate = (rowData: any) => {
+        return (
+            <div className="flex flex-column">
+                <span className="font-medium">{`${rowData.client.prenom} ${rowData.client.nom}`}</span>
+                {rowData.client.entreprise && (
+                    <span className="text-sm text-color-secondary">{rowData.client.entreprise}</span>
+                )}
+            </div>
+        );
+    };
+
+    const montantBodyTemplate = (rowData: any) => {
+        if (rowData.montant === 0) return <span className="text-color-secondary">-</span>;
+        
+        return (
+            <span className={rowData.montant > 0 ? 'text-green-500 font-medium' : 'text-red-500 font-medium'}>
+                {new Intl.NumberFormat('fr-FR', {
+                    style: 'currency',
+                    currency: 'EUR'
+                }).format(rowData.montant)}
+            </span>
+        );
+    };
+
+    const dateBodyTemplate = (rowData: any) => {
+        return (
+            <div className="flex flex-column">
+                <span>{rowData.date.toLocaleDateString('fr-FR')}</span>
+                <span className="text-sm text-color-secondary">
+                    {rowData.date.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })}
+                </span>
+            </div>
+        );
+    };
+
+    const utilisateurBodyTemplate = (rowData: any) => {
+        return (
+            <div className="flex align-items-center">
+                <i className="pi pi-user mr-2 text-color-secondary" />
+                <span className="text-sm">{rowData.utilisateur}</span>
+            </div>
+        );
+    };
+
+    const header = (
+        <div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center gap-3">
+            <h5 className="m-0">Historique d'Activité Clients</h5>
+            
+            <div className="flex flex-wrap gap-2">
+                <span className="p-input-icon-left">
+                    <i className="pi pi-search" />
+                    <InputText 
+                        type="search" 
+                        placeholder="Rechercher..." 
+                        onInput={(e) => setGlobalFilter(e.currentTarget.value)} 
+                        style={{ width: '250px' }}
+                    />
+                </span>
+                
+                <Calendar
+                    placeholder="Date début"
+                    value={dateDebut}
+                    onChange={(e) => setDateDebut(e.value || null)}
+                    dateFormat="dd/mm/yy"
+                    showIcon
+                    style={{ width: '150px' }}
+                />
+                
+                <Calendar
+                    placeholder="Date fin"
+                    value={dateFin}
+                    onChange={(e) => setDateFin(e.value || null)}
+                    dateFormat="dd/mm/yy"
+                    showIcon
+                    style={{ width: '150px' }}
+                />
+                
+                <Dropdown
+                    value={typeActivite}
+                    options={typesActivite}
+                    onChange={(e) => setTypeActivite(e.value)}
+                    placeholder="Type d'activité"
+                    style={{ width: '180px' }}
+                />
+                
+                <Button
+                    icon="pi pi-filter-slash"
+                    className="p-button-outlined"
+                    onClick={() => {
+                        setDateDebut(null);
+                        setDateFin(null);
+                        setTypeActivite('');
+                        setSelectedClient(null);
+                        setGlobalFilter('');
+                    }}
+                    tooltip="Réinitialiser les filtres"
+                />
+            </div>
+        </div>
+    );
+
+    return (
+        <div className="grid">
+            {/* Métriques de la période */}
+            <div className="col-12">
+                <div className="grid">
+                    <div className="col-12 md:col-3">
+                        <Card>
+                            <div className="flex justify-content-between align-items-center">
+                                <div>
+                                    <div className="text-2xl font-bold text-blue-500">{metriques.nouveauxClients}</div>
+                                    <div className="text-color-secondary">Nouveaux clients</div>
+                                </div>
+                                <i className="pi pi-user-plus text-blue-500 text-3xl" />
+                            </div>
+                        </Card>
+                    </div>
+                    
+                    <div className="col-12 md:col-3">
+                        <Card>
+                            <div className="flex justify-content-between align-items-center">
+                                <div>
+                                    <div className="text-2xl font-bold text-green-500">{metriques.chantiersTermines}</div>
+                                    <div className="text-color-secondary">Chantiers terminés</div>
+                                </div>
+                                <i className="pi pi-check-circle text-green-500 text-3xl" />
+                            </div>
+                        </Card>
+                    </div>
+                    
+                    <div className="col-12 md:col-3">
+                        <Card>
+                            <div className="flex justify-content-between align-items-center">
+                                <div>
+                                    <div className="text-2xl font-bold text-cyan-500">
+                                        {new Intl.NumberFormat('fr-FR', {
+                                            style: 'currency',
+                                            currency: 'EUR',
+                                            notation: 'compact'
+                                        }).format(metriques.caTotal)}
+                                    </div>
+                                    <div className="text-color-secondary">CA généré</div>
+                                </div>
+                                <i className="pi pi-euro text-cyan-500 text-3xl" />
+                            </div>
+                        </Card>
+                    </div>
+                    
+                    <div className="col-12 md:col-3">
+                        <Card>
+                            <div className="flex justify-content-between align-items-center">
+                                <div>
+                                    <div className="text-2xl font-bold text-orange-500">{metriques.relancesEnvoyees}</div>
+                                    <div className="text-color-secondary">Relances envoyées</div>
+                                </div>
+                                <i className="pi pi-exclamation-triangle text-orange-500 text-3xl" />
+                            </div>
+                        </Card>
+                    </div>
+                </div>
+            </div>
+
+            <div className="col-12">
+                <Divider />
+            </div>
+
+            {/* Tableau historique */}
+            <div className="col-12">
+                <Card>
+                    <DataTable
+                        value={activites}
+                        paginator
+                        rows={20}
+                        rowsPerPageOptions={[10, 20, 50]}
+                        className="datatable-responsive"
+                        paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
+                        currentPageReportTemplate="Affichage de {first} à {last} sur {totalRecords} activités"
+                        globalFilter={globalFilter}
+                        emptyMessage="Aucune activité trouvée."
+                        header={header}
+                        responsiveLayout="scroll"
+                        loading={loading}
+                        sortField="date"
+                        sortOrder={-1}
+                    >
+                        <Column 
+                            field="date" 
+                            header="Date & Heure" 
+                            body={dateBodyTemplate} 
+                            sortable 
+                            style={{ minWidth: '120px' }} 
+                        />
+                        
+                        <Column 
+                            field="type" 
+                            header="Type d'activité" 
+                            body={typeActiviteBodyTemplate} 
+                            sortable 
+                            style={{ minWidth: '180px' }} 
+                        />
+                        
+                        <Column 
+                            header="Client" 
+                            body={clientBodyTemplate} 
+                            style={{ minWidth: '200px' }} 
+                        />
+                        
+                        <Column 
+                            field="description" 
+                            header="Description" 
+                            style={{ minWidth: '300px' }} 
+                        />
+                        
+                        <Column 
+                            field="montant" 
+                            header="Montant" 
+                            body={montantBodyTemplate} 
+                            sortable 
+                            style={{ minWidth: '120px' }} 
+                        />
+                        
+                        <Column 
+                            field="utilisateur" 
+                            header="Utilisateur" 
+                            body={utilisateurBodyTemplate} 
+                            style={{ minWidth: '180px' }} 
+                        />
+                    </DataTable>
+                </Card>
+            </div>
+        </div>
+    );
+};
+
+export default HistoriqueClientsPage;

app/(main)/clients/nouveau/page.tsx

@@ -0,0 +1,355 @@
+'use client';
+
+import React, { useState, useRef } from 'react';
+import { useRouter } from 'next/navigation';
+import { Card } from 'primereact/card';
+import { Button } from 'primereact/button';
+import { InputText } from 'primereact/inputtext';
+import { InputTextarea } from 'primereact/inputtextarea';
+import { Toast } from 'primereact/toast';
+import { Message } from 'primereact/message';
+import { Divider } from 'primereact/divider';
+import { Checkbox } from 'primereact/checkbox';
+import { clientService } from '../../../../services/api';
+import type { Client } from '../../../../types/btp';
+
+const NouveauClientPage = () => {
+    const router = useRouter();
+    const toast = useRef<Toast>(null);
+    const [loading, setLoading] = useState(false);
+    const [submitted, setSubmitted] = useState(false);
+    
+    const [client, setClient] = useState<Client>({
+        id: '',
+        nom: '',
+        prenom: '',
+        entreprise: '',
+        email: '',
+        telephone: '',
+        adresse: '',
+        codePostal: '',
+        ville: '',
+        numeroTVA: '',
+        siret: '',
+        actif: true
+    });
+
+    const [errors, setErrors] = useState<Record<string, string>>({});
+
+    const validateForm = () => {
+        const newErrors: Record<string, string> = {};
+
+        if (!client.nom.trim()) {
+            newErrors.nom = 'Le nom est obligatoire';
+        }
+
+        if (!client.prenom.trim()) {
+            newErrors.prenom = 'Le prénom est obligatoire';
+        }
+
+        if (client.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(client.email)) {
+            newErrors.email = 'Format d\'email invalide';
+        }
+
+        if (client.codePostal && !/^\d{5}$/.test(client.codePostal)) {
+            newErrors.codePostal = 'Le code postal doit contenir 5 chiffres';
+        }
+
+        if (client.siret && !/^\d{14}$/.test(client.siret.replace(/\s/g, ''))) {
+            newErrors.siret = 'Le SIRET doit contenir 14 chiffres';
+        }
+
+        if (client.numeroTVA && !/^[A-Z]{2}\d{11}$/.test(client.numeroTVA.replace(/\s/g, ''))) {
+            newErrors.numeroTVA = 'Format de TVA invalide (ex: FR12345678901)';
+        }
+
+        setErrors(newErrors);
+        return Object.keys(newErrors).length === 0;
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setSubmitted(true);
+
+        if (!validateForm()) {
+            toast.current?.show({
+                severity: 'error',
+                summary: 'Erreur',
+                detail: 'Veuillez corriger les erreurs du formulaire',
+                life: 3000
+            });
+            return;
+        }
+
+        setLoading(true);
+        try {
+            await clientService.create(client);
+            toast.current?.show({
+                severity: 'success',
+                summary: 'Succès',
+                detail: 'Client créé avec succès',
+                life: 3000
+            });
+            
+            setTimeout(() => {
+                router.push('/clients');
+            }, 1000);
+        } catch (error: any) {
+            console.error('Erreur lors de la création:', error);
+            
+            // Extraire le message d'erreur du backend
+            let errorMessage = 'Impossible de créer le client';
+            if (error.response?.data?.message) {
+                errorMessage = error.response.data.message;
+            } else if (error.response?.data?.error) {
+                errorMessage = error.response.data.error;
+            } else if (error.response?.data) {
+                errorMessage = JSON.stringify(error.response.data);
+            } else if (error.response?.status === 400) {
+                errorMessage = 'Données invalides. Vérifiez que tous les champs obligatoires sont remplis correctement.';
+            }
+            
+            toast.current?.show({
+                severity: 'error',
+                summary: 'Erreur',
+                detail: errorMessage,
+                life: 5000
+            });
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleCancel = () => {
+        router.push('/clients');
+    };
+
+    const onInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, name: string) => {
+        const val = (e.target && e.target.value) || '';
+        let _client = { ...client };
+        (_client as any)[name] = val;
+        setClient(_client);
+
+        // Clear error when user starts typing
+        if (errors[name]) {
+            const newErrors = { ...errors };
+            delete newErrors[name];
+            setErrors(newErrors);
+        }
+    };
+
+    const onCheckboxChange = (e: any) => {
+        setClient(prev => ({ ...prev, actif: e.checked }));
+    };
+
+    return (
+        <div className="grid">
+            <div className="col-12">
+                <Card>
+                    <Toast ref={toast} />
+                    
+                    <div className="flex justify-content-between align-items-center mb-4">
+                        <h2>Nouveau Client</h2>
+                        <Button 
+                            icon="pi pi-arrow-left" 
+                            label="Retour" 
+                            className="p-button-text" 
+                            onClick={handleCancel} 
+                        />
+                    </div>
+
+                    <form onSubmit={handleSubmit} className="p-fluid">
+                        <div className="formgrid grid">
+                            {/* Informations personnelles */}
+                            <div className="col-12">
+                                <h3 className="text-primary">Informations personnelles</h3>
+                                <Divider />
+                            </div>
+
+                            <div className="field col-12 md:col-6">
+                                <label htmlFor="nom" className="font-bold">
+                                    Nom <span className="text-red-500">*</span>
+                                </label>
+                                <InputText 
+                                    id="nom" 
+                                    value={client.nom} 
+                                    onChange={(e) => onInputChange(e, 'nom')} 
+                                    className={errors.nom ? 'p-invalid' : ''} 
+                                    placeholder="Nom du client"
+                                />
+                                {errors.nom && <small className="p-error">{errors.nom}</small>}
+                            </div>
+
+                            <div className="field col-12 md:col-6">
+                                <label htmlFor="prenom" className="font-bold">
+                                    Prénom <span className="text-red-500">*</span>
+                                </label>
+                                <InputText 
+                                    id="prenom" 
+                                    value={client.prenom} 
+                                    onChange={(e) => onInputChange(e, 'prenom')} 
+                                    className={errors.prenom ? 'p-invalid' : ''} 
+                                    placeholder="Prénom du client"
+                                />
+                                {errors.prenom && <small className="p-error">{errors.prenom}</small>}
+                            </div>
+
+                            <div className="field col-12">
+                                <label htmlFor="entreprise" className="font-bold">Entreprise</label>
+                                <InputText 
+                                    id="entreprise" 
+                                    value={client.entreprise} 
+                                    onChange={(e) => onInputChange(e, 'entreprise')} 
+                                    placeholder="Nom de l'entreprise"
+                                />
+                            </div>
+
+                            {/* Contact */}
+                            <div className="col-12">
+                                <h3 className="text-primary">Contact</h3>
+                                <Divider />
+                            </div>
+
+                            <div className="field col-12 md:col-6">
+                                <label htmlFor="email" className="font-bold">Email</label>
+                                <InputText 
+                                    id="email" 
+                                    value={client.email} 
+                                    onChange={(e) => onInputChange(e, 'email')} 
+                                    type="email"
+                                    className={errors.email ? 'p-invalid' : ''} 
+                                    placeholder="email@exemple.com"
+                                />
+                                {errors.email && <small className="p-error">{errors.email}</small>}
+                            </div>
+
+                            <div className="field col-12 md:col-6">
+                                <label htmlFor="telephone" className="font-bold">Téléphone</label>
+                                <InputText 
+                                    id="telephone" 
+                                    value={client.telephone} 
+                                    onChange={(e) => onInputChange(e, 'telephone')} 
+                                    placeholder="01 23 45 67 89"
+                                />
+                            </div>
+
+                            {/* Adresse */}
+                            <div className="col-12">
+                                <h3 className="text-primary">Adresse</h3>
+                                <Divider />
+                            </div>
+
+                            <div className="field col-12">
+                                <label htmlFor="adresse" className="font-bold">Adresse</label>
+                                <InputTextarea 
+                                    id="adresse" 
+                                    value={client.adresse} 
+                                    onChange={(e) => onInputChange(e, 'adresse')} 
+                                    rows={3} 
+                                    placeholder="Adresse complète"
+                                />
+                            </div>
+
+                            <div className="field col-12 md:col-6">
+                                <label htmlFor="codePostal" className="font-bold">Code Postal</label>
+                                <InputText 
+                                    id="codePostal" 
+                                    value={client.codePostal} 
+                                    onChange={(e) => onInputChange(e, 'codePostal')} 
+                                    className={errors.codePostal ? 'p-invalid' : ''} 
+                                    placeholder="75000"
+                                />
+                                {errors.codePostal && <small className="p-error">{errors.codePostal}</small>}
+                            </div>
+
+                            <div className="field col-12 md:col-6">
+                                <label htmlFor="ville" className="font-bold">Ville</label>
+                                <InputText 
+                                    id="ville" 
+                                    value={client.ville} 
+                                    onChange={(e) => onInputChange(e, 'ville')} 
+                                    placeholder="Ville"
+                                />
+                            </div>
+
+                            {/* Informations légales */}
+                            <div className="col-12">
+                                <h3 className="text-primary">Informations légales</h3>
+                                <Divider />
+                            </div>
+
+                            <div className="field col-12 md:col-6">
+                                <label htmlFor="numeroTVA" className="font-bold">Numéro TVA</label>
+                                <InputText 
+                                    id="numeroTVA" 
+                                    value={client.numeroTVA} 
+                                    onChange={(e) => onInputChange(e, 'numeroTVA')} 
+                                    className={errors.numeroTVA ? 'p-invalid' : ''} 
+                                    placeholder="FR12345678901"
+                                />
+                                {errors.numeroTVA && <small className="p-error">{errors.numeroTVA}</small>}
+                            </div>
+
+                            <div className="field col-12 md:col-6">
+                                <label htmlFor="siret" className="font-bold">SIRET</label>
+                                <InputText 
+                                    id="siret" 
+                                    value={client.siret} 
+                                    onChange={(e) => onInputChange(e, 'siret')} 
+                                    className={errors.siret ? 'p-invalid' : ''} 
+                                    placeholder="12345678901234"
+                                />
+                                {errors.siret && <small className="p-error">{errors.siret}</small>}
+                            </div>
+
+                            {/* Statut */}
+                            <div className="col-12">
+                                <h3 className="text-primary">Statut</h3>
+                                <Divider />
+                            </div>
+
+                            <div className="field col-12">
+                                <div className="flex align-items-center">
+                                    <Checkbox 
+                                        id="actif" 
+                                        checked={client.actif} 
+                                        onChange={onCheckboxChange} 
+                                    />
+                                    <label htmlFor="actif" className="ml-2 font-bold">
+                                        Client actif
+                                    </label>
+                                </div>
+                                <small className="text-600">
+                                    Un client inactif n'apparaîtra pas dans les listes de sélection
+                                </small>
+                            </div>
+
+                            {/* Boutons */}
+                            <div className="col-12">
+                                <Divider />
+                                <div className="flex justify-content-end gap-2">
+                                    <Button 
+                                        label="Annuler" 
+                                        icon="pi pi-times" 
+                                        className="p-button-text" 
+                                        onClick={handleCancel} 
+                                        disabled={loading}
+                                    />
+                                    <Button 
+                                        type="submit"
+                                        label="Créer le client" 
+                                        icon="pi pi-check" 
+                                        loading={loading}
+                                        disabled={loading}
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </form>
+                </Card>
+            </div>
+        </div>
+    );
+};
+
+export default NouveauClientPage;

app/(main)/clients/page.tsx

@@ -0,0 +1,845 @@
+'use client';
+
+import React, { useState, useEffect, useRef } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Button } from 'primereact/button';
+import { InputText } from 'primereact/inputtext';
+import { Card } from 'primereact/card';
+import { Dialog } from 'primereact/dialog';
+import { Toast } from 'primereact/toast';
+import { Toolbar } from 'primereact/toolbar';
+import { Tag } from 'primereact/tag';
+import { ConfirmDialog } from 'primereact/confirmdialog';
+import { InputTextarea } from 'primereact/inputtextarea';
+import { Dropdown } from 'primereact/dropdown';
+import clientService from '../../../services/clientService';
+import chantierService from '../../../services/chantierService';
+import type { Client } from '../../../types/btp';
+import RoleProtectedPage from '@/components/RoleProtectedPage';
+import { 
+    ActionButtonGroup, 
+    ViewButton, 
+    EditButton, 
+    DeleteButton,
+    ActionButton
+} from '../../../components/ui/ActionButton';
+
+const ClientsPageContent = () => {
+    const [clients, setClients] = useState<Client[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [globalFilter, setGlobalFilter] = useState('');
+    const [selectedClients, setSelectedClients] = useState<Client[]>([]);
+    const [clientDialog, setClientDialog] = useState(false);
+    const [deleteClientDialog, setDeleteClientDialog] = useState(false);
+    const [deleteClientsDialog, setDeleteClientsDialog] = useState(false);
+    const [chantiersDialog, setChantiersDialog] = useState(false);
+    const [selectedClientChantiers, setSelectedClientChantiers] = useState<any[]>([]);
+    const [currentClient, setCurrentClient] = useState<Client | null>(null);
+    const [client, setClient] = useState<Client>({
+        id: '',
+        nom: '',
+        prenom: '',
+        entreprise: '',
+        email: '',
+        telephone: '',
+        adresse: '',
+        codePostal: '',
+        ville: '',
+        numeroTVA: '',
+        siret: '',
+        typeClient: 'PARTICULIER',
+        pays: 'France',
+        actif: true
+    });
+    const [submitted, setSubmitted] = useState(false);
+    const toast = useRef<Toast>(null);
+    const dt = useRef<DataTable<Client[]>>(null);
+
+    const typesClient = [
+        { label: 'Particulier', value: 'PARTICULIER' },
+        { label: 'Professionnel', value: 'PROFESSIONNEL' }
+    ];
+
+    useEffect(() => {
+        loadClients();
+    }, []);
+
+    const loadClients = async () => {
+        try {
+            setLoading(true);
+            const data = await clientService.getAll();
+            setClients(data);
+        } catch (error) {
+            console.error('Erreur lors du chargement des clients:', error);
+            toast.current?.show({
+                severity: 'error',
+                summary: 'Erreur',
+                detail: 'Impossible de charger les clients',
+                life: 3000
+            });
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const openNew = () => {
+        setClient({
+            id: '',
+            nom: '',
+            prenom: '',
+            entreprise: '',
+            email: '',
+            telephone: '',
+            adresse: '',
+            codePostal: '',
+            ville: '',
+            numeroTVA: '',
+            siret: '',
+            typeClient: 'PARTICULIER',
+            pays: 'France',
+            actif: true
+        });
+        setSubmitted(false);
+        setClientDialog(true);
+    };
+
+    const hideDialog = () => {
+        setSubmitted(false);
+        setClientDialog(false);
+    };
+
+    const hideDeleteClientDialog = () => {
+        setDeleteClientDialog(false);
+    };
+
+    const hideDeleteClientsDialog = () => {
+        setDeleteClientsDialog(false);
+    };
+
+    const saveClient = async () => {
+        setSubmitted(true);
+
+        if (client.nom.trim() && client.prenom.trim()) {
+            try {
+                let updatedClients = [...clients];
+
+                if (client.id) {
+                    // Mise à jour
+                    const updatedClient = await clientService.update(client.id, client);
+                    const index = clients.findIndex(c => c.id === client.id);
+                    updatedClients[index] = updatedClient;
+                    
+                    toast.current?.show({
+                        severity: 'success',
+                        summary: 'Succès',
+                        detail: 'Client mis à jour',
+                        life: 3000
+                    });
+                } else {
+                    // Création
+                    const newClient = await clientService.create(client);
+                    updatedClients.push(newClient);
+                    
+                    toast.current?.show({
+                        severity: 'success',
+                        summary: 'Succès',
+                        detail: 'Client créé',
+                        life: 3000
+                    });
+                }
+
+                setClients(updatedClients);
+                setClientDialog(false);
+                setClient({
+                    id: '',
+                    nom: '',
+                    prenom: '',
+                    entreprise: '',
+                    email: '',
+                    telephone: '',
+                    adresse: '',
+                    codePostal: '',
+                    ville: '',
+                    numeroTVA: '',
+                    siret: '',
+                    typeClient: 'PARTICULIER',
+                    pays: 'France',
+                    actif: true
+                });
+            } catch (error: any) {
+                console.error('Erreur lors de la sauvegarde:', error);
+                
+                // Extraire le message d'erreur du backend
+                let errorMessage = 'Impossible de sauvegarder le client';
+                if (error.response?.data?.message) {
+                    errorMessage = error.response.data.message;
+                } else if (error.response?.data?.error) {
+                    errorMessage = error.response.data.error;
+                } else if (error.response?.data) {
+                    errorMessage = JSON.stringify(error.response.data);
+                } else if (error.response?.status === 400) {
+                    errorMessage = 'Données invalides. Vérifiez que tous les champs obligatoires sont remplis correctement.';
+                }
+                
+                toast.current?.show({
+                    severity: 'error',
+                    summary: 'Erreur',
+                    detail: errorMessage,
+                    life: 5000
+                });
+            }
+        }
+    };
+
+    const editClient = (client: Client) => {
+        setClient({ ...client });
+        setClientDialog(true);
+    };
+
+    const confirmDeleteClient = (client: Client) => {
+        setClient(client);
+        setDeleteClientDialog(true);
+    };
+
+    const deleteClient = async () => {
+        try {
+            await clientService.delete(client.id);
+            let updatedClients = clients.filter(c => c.id !== client.id);
+            setClients(updatedClients);
+            setDeleteClientDialog(false);
+            setClient({
+                id: '',
+                nom: '',
+                prenom: '',
+                entreprise: '',
+                email: '',
+                telephone: '',
+                adresse: '',
+                codePostal: '',
+                ville: '',
+                numeroTVA: '',
+                siret: '',
+                typeClient: 'PARTICULIER',
+                pays: 'France',
+                actif: true
+            });
+            toast.current?.show({
+                severity: 'success',
+                summary: 'Succès',
+                detail: 'Client supprimé',
+                life: 3000
+            });
+        } catch (error) {
+            console.error('Erreur lors de la suppression:', error);
+            toast.current?.show({
+                severity: 'error',
+                summary: 'Erreur',
+                detail: 'Impossible de supprimer le client',
+                life: 3000
+            });
+        }
+    };
+
+    const confirmDeleteSelected = () => {
+        setDeleteClientsDialog(true);
+    };
+
+    const deleteSelectedClients = async () => {
+        try {
+            await Promise.all(selectedClients.map(c => clientService.delete(c.id)));
+            let updatedClients = clients.filter(c => !selectedClients.includes(c));
+            setClients(updatedClients);
+            setDeleteClientsDialog(false);
+            setSelectedClients([]);
+            toast.current?.show({
+                severity: 'success',
+                summary: 'Succès',
+                detail: 'Clients supprimés',
+                life: 3000
+            });
+        } catch (error) {
+            console.error('Erreur lors de la suppression:', error);
+            toast.current?.show({
+                severity: 'error',
+                summary: 'Erreur',
+                detail: 'Impossible de supprimer les clients',
+                life: 3000
+            });
+        }
+    };
+
+    const exportCSV = () => {
+        dt.current?.exportCSV();
+    };
+
+    const voirChantiersClient = async (client: Client) => {
+        try {
+            setCurrentClient(client);
+            const chantiers = await chantierService.getByClient(client.id!);
+            setSelectedClientChantiers(chantiers || []);
+            
+            // Si pas de chantiers, afficher seulement un message informatif sans ouvrir le dialog
+            if (!chantiers || chantiers.length === 0) {
+                toast.current?.show({
+                    severity: 'info',
+                    summary: 'Information',
+                    detail: `Le client ${client.nom} n'a pas encore de chantiers`,
+                    life: 4000
+                });
+                return; // Sortir sans ouvrir le dialog
+            }
+            
+            // Ouvrir le dialog seulement s'il y a des chantiers à afficher
+            setChantiersDialog(true);
+            
+        } catch (error: any) {
+            console.error('Erreur lors du chargement des chantiers:', error);
+            
+            // Si c'est une erreur réseau ou serveur, afficher un message approprié
+            let errorMessage = 'Erreur technique lors du chargement des chantiers';
+            if (error.code === 'NETWORK_ERROR' || error.message?.includes('Network Error')) {
+                errorMessage = 'Impossible de contacter le serveur. Vérifiez votre connexion.';
+            } else if (error.response?.status === 500) {
+                errorMessage = 'Erreur interne du serveur lors de la récupération des chantiers';
+            }
+            
+            toast.current?.show({
+                severity: 'error',
+                summary: 'Erreur',
+                detail: errorMessage,
+                life: 4000
+            });
+            
+            // En cas d'erreur technique, ne pas ouvrir le dialog non plus
+        }
+    };
+
+    const onInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, name: string) => {
+        const val = (e.target && e.target.value) || '';
+        let _client = { ...client };
+        (_client as any)[name] = val;
+        setClient(_client);
+    };
+
+    const onDropdownChange = (e: any, name: string) => {
+        let _client = { ...client };
+        (_client as any)[name] = e.value;
+        setClient(_client);
+    };
+
+    const leftToolbarTemplate = () => {
+        return (
+            <div className="my-2">
+                <Button 
+                    label="Nouveau" 
+                    icon="pi pi-plus" 
+                    severity="success" 
+                    className="mr-2 p-button-text p-button-rounded" 
+                    onClick={openNew} 
+                />
+                <Button 
+                    label="Supprimer" 
+                    icon="pi pi-trash" 
+                    severity="danger" 
+                    className="p-button-text p-button-rounded"
+                    onClick={confirmDeleteSelected} 
+                    disabled={!selectedClients || selectedClients.length === 0} 
+                />
+            </div>
+        );
+    };
+
+    const rightToolbarTemplate = () => {
+        return (
+            <Button 
+                label="Exporter" 
+                icon="pi pi-upload" 
+                severity="help" 
+                className="p-button-text p-button-rounded"
+                onClick={exportCSV} 
+            />
+        );
+    };
+
+    const actionBodyTemplate = (rowData: Client) => {
+        return (
+            <ActionButtonGroup>
+                <ActionButton 
+                    icon="pi pi-map" 
+                    tooltip="Voir les chantiers"
+                    onClick={() => voirChantiersClient(rowData)}
+                    color="blue"
+                />
+                <EditButton 
+                    tooltip="Modifier"
+                    onClick={() => editClient(rowData)} 
+                />
+                <DeleteButton 
+                    tooltip="Supprimer"
+                    onClick={() => confirmDeleteClient(rowData)}
+                />
+            </ActionButtonGroup>
+        );
+    };
+
+    const statusBodyTemplate = (rowData: Client) => {
+        return (
+            <Tag 
+                value={rowData.actif ? 'Actif' : 'Inactif'} 
+                severity={rowData.actif ? 'success' : 'danger'} 
+            />
+        );
+    };
+
+    const typeClientBodyTemplate = (rowData: Client) => {
+        const getSeverity = (type: string) => {
+            switch (type) {
+                case 'PARTICULIER': return 'info';
+                case 'PROFESSIONNEL': return 'warning';
+                default: return 'info';
+            }
+        };
+
+        const getLabel = (type: string) => {
+            switch (type) {
+                case 'PARTICULIER': return 'Particulier';
+                case 'PROFESSIONNEL': return 'Professionnel';
+                default: return type;
+            }
+        };
+
+        return (
+            <Tag 
+                value={getLabel(rowData.typeClient || 'PARTICULIER')} 
+                severity={getSeverity(rowData.typeClient || 'PARTICULIER')} 
+            />
+        );
+    };
+
+    const contactBodyTemplate = (rowData: Client) => {
+        return (
+            <div className="flex flex-column">
+                {rowData.email && (
+                    <div className="flex align-items-center mb-1">
+                        <i className="pi pi-envelope mr-2 text-color-secondary"></i>
+                        <span className="text-sm">{rowData.email}</span>
+                    </div>
+                )}
+                {rowData.telephone && (
+                    <div className="flex align-items-center">
+                        <i className="pi pi-phone mr-2 text-color-secondary"></i>
+                        <span className="text-sm">{rowData.telephone}</span>
+                    </div>
+                )}
+            </div>
+        );
+    };
+
+    const nomCompletBodyTemplate = (rowData: Client) => {
+        return (
+            <div className="flex flex-column">
+                <span className="font-medium">{`${rowData.prenom} ${rowData.nom}`}</span>
+                {rowData.entreprise && (
+                    <span className="text-sm text-color-secondary">{rowData.entreprise}</span>
+                )}
+            </div>
+        );
+    };
+
+    const header = (
+        <div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
+            <h5 className="m-0">Gestion des Clients</h5>
+            <span className="block mt-2 md:mt-0 p-input-icon-left">
+                <i className="pi pi-search" />
+                <InputText 
+                    type="search" 
+                    placeholder="Rechercher..." 
+                    onInput={(e) => setGlobalFilter(e.currentTarget.value)} 
+                />
+            </span>
+        </div>
+    );
+
+    const clientDialogFooter = (
+        <>
+            <Button 
+                label="Annuler" 
+                icon="pi pi-times" 
+                text 
+                onClick={hideDialog} 
+            />
+            <Button 
+                label="Sauvegarder" 
+                icon="pi pi-check" 
+                text 
+                onClick={saveClient} 
+            />
+        </>
+    );
+
+    const deleteClientDialogFooter = (
+        <>
+            <Button 
+                label="Non" 
+                icon="pi pi-times" 
+                text 
+                onClick={hideDeleteClientDialog} 
+            />
+            <Button 
+                label="Oui" 
+                icon="pi pi-check" 
+                text 
+                onClick={deleteClient} 
+            />
+        </>
+    );
+
+    const deleteClientsDialogFooter = (
+        <>
+            <Button 
+                label="Non" 
+                icon="pi pi-times" 
+                text 
+                onClick={hideDeleteClientsDialog} 
+            />
+            <Button 
+                label="Oui" 
+                icon="pi pi-check" 
+                text 
+                onClick={deleteSelectedClients} 
+            />
+        </>
+    );
+
+    return (
+        <div className="grid">
+            <div className="col-12">
+                <Card>
+                    <Toast ref={toast} />
+                    <Toolbar 
+                        className="mb-4" 
+                        left={leftToolbarTemplate} 
+                        right={rightToolbarTemplate} 
+                    />
+
+                    <DataTable
+                        ref={dt}
+                        value={clients}
+                        selection={selectedClients}
+                        onSelectionChange={(e) => setSelectedClients(e.value)}
+                        dataKey="id"
+                        paginator
+                        rows={10}
+                        rowsPerPageOptions={[5, 10, 25]}
+                        className="datatable-responsive"
+                        paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
+                        currentPageReportTemplate="Affichage de {first} à {last} sur {totalRecords} clients"
+                        globalFilter={globalFilter}
+                        emptyMessage="Aucun client trouvé."
+                        header={header}
+                        responsiveLayout="scroll"
+                        loading={loading}
+                    >
+                        <Column selectionMode="multiple" headerStyle={{ width: '4rem' }} />
+                        <Column header="Nom complet" body={nomCompletBodyTemplate} sortable headerStyle={{ minWidth: '12rem' }} />
+                        <Column field="typeClient" header="Type" body={typeClientBodyTemplate} sortable headerStyle={{ minWidth: '8rem' }} />
+                        <Column header="Contact" body={contactBodyTemplate} headerStyle={{ minWidth: '12rem' }} />
+                        <Column field="ville" header="Ville" sortable headerStyle={{ minWidth: '10rem' }} />
+                        <Column field="actif" header="Statut" body={statusBodyTemplate} sortable headerStyle={{ minWidth: '8rem' }} />
+                        <Column body={actionBodyTemplate} headerStyle={{ minWidth: '12rem' }} />
+                    </DataTable>
+
+                    <Dialog 
+                        visible={clientDialog} 
+                        style={{ width: '600px' }} 
+                        header="Détails du Client" 
+                        modal 
+                        className="p-fluid" 
+                        footer={clientDialogFooter} 
+                        onHide={hideDialog}
+                    >
+                        <div className="formgrid grid">
+                            <div className="field col-12 md:col-6">
+                                <label htmlFor="prenom">Prénom</label>
+                                <InputText 
+                                    id="prenom" 
+                                    value={client.prenom} 
+                                    onChange={(e) => onInputChange(e, 'prenom')} 
+                                    required 
+                                    className={submitted && !client.prenom ? 'p-invalid' : ''} 
+                                />
+                                {submitted && !client.prenom && <small className="p-invalid">Le prénom est requis.</small>}
+                            </div>
+
+                            <div className="field col-12 md:col-6">
+                                <label htmlFor="nom">Nom</label>
+                                <InputText 
+                                    id="nom" 
+                                    value={client.nom} 
+                                    onChange={(e) => onInputChange(e, 'nom')} 
+                                    required 
+                                    className={submitted && !client.nom ? 'p-invalid' : ''} 
+                                />
+                                {submitted && !client.nom && <small className="p-invalid">Le nom est requis.</small>}
+                            </div>
+
+                            <div className="field col-12">
+                                <label htmlFor="entreprise">Entreprise</label>
+                                <InputText 
+                                    id="entreprise" 
+                                    value={client.entreprise} 
+                                    onChange={(e) => onInputChange(e, 'entreprise')} 
+                                />
+                            </div>
+
+                            <div className="field col-12 md:col-6">
+                                <label htmlFor="typeClient">Type de client</label>
+                                <Dropdown 
+                                    id="typeClient" 
+                                    value={client.typeClient} 
+                                    options={typesClient} 
+                                    onChange={(e) => onDropdownChange(e, 'typeClient')} 
+                                    placeholder="Sélectionnez un type"
+                                />
+                            </div>
+
+                            <div className="field col-12 md:col-6">
+                                <label htmlFor="email">Email</label>
+                                <InputText 
+                                    id="email" 
+                                    value={client.email} 
+                                    onChange={(e) => onInputChange(e, 'email')} 
+                                    type="email"
+                                />
+                            </div>
+
+                            <div className="field col-12 md:col-6">
+                                <label htmlFor="telephone">Téléphone</label>
+                                <InputText 
+                                    id="telephone" 
+                                    value={client.telephone} 
+                                    onChange={(e) => onInputChange(e, 'telephone')} 
+                                />
+                            </div>
+
+                            <div className="field col-12 md:col-6">
+                                <label htmlFor="pays">Pays</label>
+                                <InputText 
+                                    id="pays" 
+                                    value={client.pays} 
+                                    onChange={(e) => onInputChange(e, 'pays')} 
+                                />
+                            </div>
+
+                            <div className="field col-12">
+                                <label htmlFor="adresse">Adresse</label>
+                                <InputTextarea 
+                                    id="adresse" 
+                                    value={client.adresse} 
+                                    onChange={(e) => onInputChange(e, 'adresse')} 
+                                    rows={2} 
+                                />
+                            </div>
+
+                            <div className="field col-12 md:col-6">
+                                <label htmlFor="ville">Ville</label>
+                                <InputText 
+                                    id="ville" 
+                                    value={client.ville} 
+                                    onChange={(e) => onInputChange(e, 'ville')} 
+                                />
+                            </div>
+
+                            <div className="field col-12 md:col-6">
+                                <label htmlFor="codePostal">Code postal</label>
+                                <InputText 
+                                    id="codePostal" 
+                                    value={client.codePostal} 
+                                    onChange={(e) => onInputChange(e, 'codePostal')} 
+                                />
+                            </div>
+
+                            <div className="field col-12 md:col-6">
+                                <label htmlFor="numeroTVA">Numéro TVA</label>
+                                <InputText 
+                                    id="numeroTVA" 
+                                    value={client.numeroTVA} 
+                                    onChange={(e) => onInputChange(e, 'numeroTVA')} 
+                                />
+                            </div>
+
+                            <div className="field col-12 md:col-6">
+                                <label htmlFor="siret">SIRET</label>
+                                <InputText 
+                                    id="siret" 
+                                    value={client.siret} 
+                                    onChange={(e) => onInputChange(e, 'siret')} 
+                                />
+                            </div>
+                        </div>
+                    </Dialog>
+
+                    <Dialog 
+                        visible={deleteClientDialog} 
+                        style={{ width: '450px' }} 
+                        header="Confirmer" 
+                        modal 
+                        footer={deleteClientDialogFooter} 
+                        onHide={hideDeleteClientDialog}
+                    >
+                        <div className="flex align-items-center justify-content-center">
+                            <i className="pi pi-exclamation-triangle mr-3" style={{ fontSize: '2rem' }} />
+                            {client && (
+                                <span>
+                                    Êtes-vous sûr de vouloir supprimer <b>{client.prenom} {client.nom}</b> ?
+                                </span>
+                            )}
+                        </div>
+                    </Dialog>
+
+                    <Dialog 
+                        visible={deleteClientsDialog} 
+                        style={{ width: '450px' }} 
+                        header="Confirmer" 
+                        modal 
+                        footer={deleteClientsDialogFooter} 
+                        onHide={hideDeleteClientsDialog}
+                    >
+                        <div className="flex align-items-center justify-content-center">
+                            <i className="pi pi-exclamation-triangle mr-3" style={{ fontSize: '2rem' }} />
+                            {selectedClients && <span>Êtes-vous sûr de vouloir supprimer les clients sélectionnés ?</span>}
+                        </div>
+                    </Dialog>
+
+                    {/* Dialog des chantiers du client */}
+                    <Dialog 
+                        visible={chantiersDialog} 
+                        style={{ width: '90vw', height: '80vh' }} 
+                        header={`Chantiers de ${currentClient?.prenom} ${currentClient?.nom}`}
+                        modal 
+                        className="p-fluid" 
+                        footer={<Button label="Fermer" icon="pi pi-times" onClick={() => setChantiersDialog(false)} />} 
+                        onHide={() => setChantiersDialog(false)}
+                        maximizable
+                    >
+                        <div className="grid mb-3">
+                            <div className="col-12 md:col-3">
+                                <Card>
+                                    <div className="text-center">
+                                        <div className="text-2xl font-bold text-blue-500">{selectedClientChantiers.length}</div>
+                                        <div className="text-color-secondary">Total chantiers</div>
+                                    </div>
+                                </Card>
+                            </div>
+                            <div className="col-12 md:col-3">
+                                <Card>
+                                    <div className="text-center">
+                                        <div className="text-2xl font-bold text-green-500">
+                                            {selectedClientChantiers.filter(c => c.statut === 'EN_COURS').length}
+                                        </div>
+                                        <div className="text-color-secondary">En cours</div>
+                                    </div>
+                                </Card>
+                            </div>
+                            <div className="col-12 md:col-3">
+                                <Card>
+                                    <div className="text-center">
+                                        <div className="text-2xl font-bold text-purple-500">
+                                            {selectedClientChantiers.filter(c => c.statut === 'TERMINE').length}
+                                        </div>
+                                        <div className="text-color-secondary">Terminés</div>
+                                    </div>
+                                </Card>
+                            </div>
+                            <div className="col-12 md:col-3">
+                                <Card>
+                                    <div className="text-center">
+                                        <div className="text-2xl font-bold text-cyan-500">
+                                            {new Intl.NumberFormat('fr-FR', {
+                                                style: 'currency',
+                                                currency: 'EUR',
+                                                notation: 'compact'
+                                            }).format(selectedClientChantiers.reduce((sum, c) => sum + (c.montantPrevu || 0), 0))}
+                                        </div>
+                                        <div className="text-color-secondary">CA Total</div>
+                                    </div>
+                                </Card>
+                            </div>
+                        </div>
+
+                        <DataTable
+                            value={selectedClientChantiers}
+                            paginator
+                            rows={10}
+                            dataKey="id"
+                            className="datatable-responsive"
+                            emptyMessage="Aucun chantier pour ce client"
+                            responsiveLayout="scroll"
+                        >
+                            <Column field="nom" header="Chantier" sortable style={{ minWidth: '12rem' }} />
+                            <Column 
+                                header="Statut" 
+                                body={(rowData) => (
+                                    <Tag 
+                                        value={chantierService.getStatutLabel(rowData.statut)} 
+                                        style={{ 
+                                            backgroundColor: chantierService.getStatutColor(rowData.statut),
+                                            color: 'white'
+                                        }}
+                                    />
+                                )}
+                                sortable 
+                                style={{ minWidth: '8rem' }} 
+                            />
+                            <Column 
+                                field="dateDebut" 
+                                header="Date début" 
+                                body={(rowData) => {
+                                    if (!rowData.dateDebut) return '';
+                                    const date = new Date(rowData.dateDebut);
+                                    return date.toLocaleDateString('fr-FR');
+                                }}
+                                sortable 
+                                style={{ minWidth: '10rem' }} 
+                            />
+                            <Column 
+                                field="dateFinPrevue" 
+                                header="Fin prévue" 
+                                body={(rowData) => {
+                                    if (!rowData.dateFinPrevue) return '';
+                                    const date = new Date(rowData.dateFinPrevue);
+                                    return date.toLocaleDateString('fr-FR');
+                                }}
+                                sortable 
+                                style={{ minWidth: '10rem' }} 
+                            />
+                            <Column 
+                                header="Montant" 
+                                body={(rowData) => new Intl.NumberFormat('fr-FR', {
+                                    style: 'currency',
+                                    currency: 'EUR'
+                                }).format(rowData.montantPrevu || 0)}
+                                style={{ minWidth: '8rem' }} 
+                            />
+                            <Column field="adresse" header="Adresse" style={{ minWidth: '12rem' }} />
+                        </DataTable>
+                    </Dialog>
+                </Card>
+            </div>
+        </div>
+    );
+};
+
+const ClientsPage = () => {
+    return (
+        <RoleProtectedPage
+            requiredPage="CLIENTS"
+            fallbackMessage="Vous devez avoir un rôle commercial ou supérieur pour accéder aux clients."
+        >
+            <ClientsPageContent />
+        </RoleProtectedPage>
+    );
+};
+
+export default ClientsPage;

app/(main)/clients/recherche/page.tsx

@@ -0,0 +1,490 @@
+'use client';
+
+import React, { useState, useRef } from 'react';
+import { Card } from 'primereact/card';
+import { Button } from 'primereact/button';
+import { InputText } from 'primereact/inputtext';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Toast } from 'primereact/toast';
+import { Divider } from 'primereact/divider';
+import { Tag } from 'primereact/tag';
+import { Dropdown } from 'primereact/dropdown';
+import { ProgressSpinner } from 'primereact/progressspinner';
+import { clientService } from '../../../../services/api';
+import { formatPhoneNumber, formatAddress } from '../../../../utils/formatters';
+import type { Client } from '../../../../types/btp';
+
+const RechercheClientPage = () => {
+    const toast = useRef<Toast>(null);
+    const [loading, setLoading] = useState(false);
+    const [clients, setClients] = useState<Client[]>([]);
+    const [hasSearched, setHasSearched] = useState(false);
+    
+    const [searchCriteria, setSearchCriteria] = useState({
+        nom: '',
+        entreprise: '',
+        ville: '',
+        email: '',
+        telephone: '',
+        codePostal: '',
+        siret: '',
+        numeroTVA: ''
+    });
+
+    const [searchType, setSearchType] = useState<'simple' | 'advanced'>('simple');
+
+    const searchTypes = [
+        { label: 'Recherche simple', value: 'simple' },
+        { label: 'Recherche avancée', value: 'advanced' }
+    ];
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>, field: string) => {
+        setSearchCriteria(prev => ({
+            ...prev,
+            [field]: e.target.value
+        }));
+    };
+
+    const handleSearch = async () => {
+        // Vérifier qu'au moins un critère est rempli
+        const hasSearchCriteria = Object.values(searchCriteria).some(value => value.trim() !== '');
+        
+        if (!hasSearchCriteria) {
+            toast.current?.show({
+                severity: 'warn',
+                summary: 'Attention',
+                detail: 'Veuillez saisir au moins un critère de recherche',
+                life: 3000
+            });
+            return;
+        }
+
+        setLoading(true);
+        try {
+            // Pour la démonstration, nous utilisons une recherche simple
+            // En production, vous pourriez avoir des endpoints spécifiques pour chaque type de recherche
+            let results: Client[] = [];
+            
+            if (searchCriteria.nom) {
+                results = await clientService.searchByNom(searchCriteria.nom);
+            } else if (searchCriteria.entreprise) {
+                results = await clientService.searchByEntreprise(searchCriteria.entreprise);
+            } else if (searchCriteria.ville) {
+                results = await clientService.searchByVille(searchCriteria.ville);
+            } else if (searchCriteria.email) {
+                results = await clientService.searchByEmail(searchCriteria.email);
+            } else {
+                // Recherche générale
+                results = await clientService.getAll();
+                
+                // Filtrer les résultats côté client pour les critères non supportés par l'API
+                results = results.filter(client => {
+                    return (
+                        (!searchCriteria.telephone || client.telephone?.includes(searchCriteria.telephone)) &&
+                        (!searchCriteria.codePostal || client.codePostal?.includes(searchCriteria.codePostal)) &&
+                        (!searchCriteria.siret || client.siret?.includes(searchCriteria.siret)) &&
+                        (!searchCriteria.numeroTVA || client.numeroTVA?.includes(searchCriteria.numeroTVA))
+                    );
+                });
+            }
+
+            setClients(results);
+            setHasSearched(true);
+            
+            toast.current?.show({
+                severity: 'success',
+                summary: 'Recherche terminée',
+                detail: `${results.length} client(s) trouvé(s)`,
+                life: 3000
+            });
+        } catch (error) {
+            console.error('Erreur lors de la recherche:', error);
+            toast.current?.show({
+                severity: 'error',
+                summary: 'Erreur',
+                detail: 'Impossible d\'effectuer la recherche',
+                life: 3000
+            });
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleReset = () => {
+        setSearchCriteria({
+            nom: '',
+            entreprise: '',
+            ville: '',
+            email: '',
+            telephone: '',
+            codePostal: '',
+            siret: '',
+            numeroTVA: ''
+        });
+        setClients([]);
+        setHasSearched(false);
+    };
+
+    const exportResults = () => {
+        if (clients.length === 0) {
+            toast.current?.show({
+                severity: 'warn',
+                summary: 'Attention',
+                detail: 'Aucun résultat à exporter',
+                life: 3000
+            });
+            return;
+        }
+
+        // Créer un CSV simple
+        const headers = ['Nom', 'Prénom', 'Entreprise', 'Email', 'Téléphone', 'Ville', 'Code Postal'];
+        const csvContent = [
+            headers.join(','),
+            ...clients.map(client => [
+                client.nom,
+                client.prenom,
+                client.entreprise || '',
+                client.email || '',
+                client.telephone || '',
+                client.ville || '',
+                client.codePostal || ''
+            ].join(','))
+        ].join('\n');
+
+        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+        const link = document.createElement('a');
+        link.href = URL.createObjectURL(blob);
+        link.download = `recherche_clients_${new Date().toISOString().split('T')[0]}.csv`;
+        link.click();
+        
+        toast.current?.show({
+            severity: 'success',
+            summary: 'Export réussi',
+            detail: 'Les résultats ont été exportés',
+            life: 3000
+        });
+    };
+
+    const statusBodyTemplate = (rowData: Client) => {
+        return (
+            <Tag 
+                value={rowData.actif ? 'Actif' : 'Inactif'} 
+                severity={rowData.actif ? 'success' : 'danger'} 
+            />
+        );
+    };
+
+    const phoneBodyTemplate = (rowData: Client) => {
+        return rowData.telephone ? formatPhoneNumber(rowData.telephone) : '';
+    };
+
+    const addressBodyTemplate = (rowData: Client) => {
+        return formatAddress(rowData.adresse, rowData.codePostal, rowData.ville);
+    };
+
+    const actionBodyTemplate = (rowData: Client) => {
+        return (
+            <div className="flex gap-2">
+                <Button 
+                    icon="pi pi-eye" 
+                    rounded 
+                    severity="info" 
+                    size="small"
+                    tooltip="Voir détails"
+                    onClick={() => {
+                        toast.current?.show({
+                            severity: 'info',
+                            summary: 'Info',
+                            detail: `Affichage des détails de ${rowData.prenom} ${rowData.nom}`,
+                            life: 3000
+                        });
+                    }}
+                />
+                <Button 
+                    icon="pi pi-pencil" 
+                    rounded 
+                    severity="success" 
+                    size="small"
+                    tooltip="Modifier"
+                    onClick={() => {
+                        toast.current?.show({
+                            severity: 'info',
+                            summary: 'Info',
+                            detail: `Modification de ${rowData.prenom} ${rowData.nom}`,
+                            life: 3000
+                        });
+                    }}
+                />
+            </div>
+        );
+    };
+
+    return (
+        <div className="grid">
+            <div className="col-12">
+                <Card>
+                    <Toast ref={toast} />
+                    
+                    <div className="flex justify-content-between align-items-center mb-4">
+                        <h2>Recherche de Clients</h2>
+                        <div className="flex gap-2">
+                            <Button 
+                                icon="pi pi-refresh" 
+                                label="Réinitialiser"
+                                className="p-button-text" 
+                                onClick={handleReset}
+                            />
+                            {hasSearched && clients.length > 0 && (
+                                <Button 
+                                    icon="pi pi-download" 
+                                    label="Exporter"
+                                    className="p-button-help" 
+                                    onClick={exportResults}
+                                />
+                            )}
+                        </div>
+                    </div>
+
+                    {/* Critères de recherche */}
+                    <div className="p-fluid">
+                        <div className="field mb-4">
+                            <label htmlFor="searchType" className="font-bold">Type de recherche</label>
+                            <Dropdown 
+                                id="searchType"
+                                value={searchType} 
+                                options={searchTypes} 
+                                onChange={(e) => setSearchType(e.value)}
+                                placeholder="Sélectionnez le type de recherche"
+                            />
+                        </div>
+
+                        <div className="formgrid grid">
+                            {/* Recherche simple */}
+                            {searchType === 'simple' && (
+                                <>
+                                    <div className="field col-12 md:col-6">
+                                        <label htmlFor="nom" className="font-bold">Nom/Prénom</label>
+                                        <InputText 
+                                            id="nom" 
+                                            value={searchCriteria.nom} 
+                                            onChange={(e) => handleInputChange(e, 'nom')} 
+                                            placeholder="Rechercher par nom ou prénom"
+                                        />
+                                    </div>
+
+                                    <div className="field col-12 md:col-6">
+                                        <label htmlFor="entreprise" className="font-bold">Entreprise</label>
+                                        <InputText 
+                                            id="entreprise" 
+                                            value={searchCriteria.entreprise} 
+                                            onChange={(e) => handleInputChange(e, 'entreprise')} 
+                                            placeholder="Nom de l'entreprise"
+                                        />
+                                    </div>
+
+                                    <div className="field col-12 md:col-6">
+                                        <label htmlFor="ville" className="font-bold">Ville</label>
+                                        <InputText 
+                                            id="ville" 
+                                            value={searchCriteria.ville} 
+                                            onChange={(e) => handleInputChange(e, 'ville')} 
+                                            placeholder="Ville"
+                                        />
+                                    </div>
+
+                                    <div className="field col-12 md:col-6">
+                                        <label htmlFor="email" className="font-bold">Email</label>
+                                        <InputText 
+                                            id="email" 
+                                            value={searchCriteria.email} 
+                                            onChange={(e) => handleInputChange(e, 'email')} 
+                                            placeholder="Adresse email"
+                                        />
+                                    </div>
+                                </>
+                            )}
+
+                            {/* Recherche avancée */}
+                            {searchType === 'advanced' && (
+                                <>
+                                    <div className="field col-12 md:col-4">
+                                        <label htmlFor="nom" className="font-bold">Nom/Prénom</label>
+                                        <InputText 
+                                            id="nom" 
+                                            value={searchCriteria.nom} 
+                                            onChange={(e) => handleInputChange(e, 'nom')} 
+                                            placeholder="Nom ou prénom"
+                                        />
+                                    </div>
+
+                                    <div className="field col-12 md:col-4">
+                                        <label htmlFor="entreprise" className="font-bold">Entreprise</label>
+                                        <InputText 
+                                            id="entreprise" 
+                                            value={searchCriteria.entreprise} 
+                                            onChange={(e) => handleInputChange(e, 'entreprise')} 
+                                            placeholder="Nom de l'entreprise"
+                                        />
+                                    </div>
+
+                                    <div className="field col-12 md:col-4">
+                                        <label htmlFor="email" className="font-bold">Email</label>
+                                        <InputText 
+                                            id="email" 
+                                            value={searchCriteria.email} 
+                                            onChange={(e) => handleInputChange(e, 'email')} 
+                                            placeholder="Adresse email"
+                                        />
+                                    </div>
+
+                                    <div className="field col-12 md:col-4">
+                                        <label htmlFor="telephone" className="font-bold">Téléphone</label>
+                                        <InputText 
+                                            id="telephone" 
+                                            value={searchCriteria.telephone} 
+                                            onChange={(e) => handleInputChange(e, 'telephone')} 
+                                            placeholder="Numéro de téléphone"
+                                        />
+                                    </div>
+
+                                    <div className="field col-12 md:col-4">
+                                        <label htmlFor="ville" className="font-bold">Ville</label>
+                                        <InputText 
+                                            id="ville" 
+                                            value={searchCriteria.ville} 
+                                            onChange={(e) => handleInputChange(e, 'ville')} 
+                                            placeholder="Ville"
+                                        />
+                                    </div>
+
+                                    <div className="field col-12 md:col-4">
+                                        <label htmlFor="codePostal" className="font-bold">Code Postal</label>
+                                        <InputText 
+                                            id="codePostal" 
+                                            value={searchCriteria.codePostal} 
+                                            onChange={(e) => handleInputChange(e, 'codePostal')} 
+                                            placeholder="Code postal"
+                                        />
+                                    </div>
+
+                                    <div className="field col-12 md:col-6">
+                                        <label htmlFor="siret" className="font-bold">SIRET</label>
+                                        <InputText 
+                                            id="siret" 
+                                            value={searchCriteria.siret} 
+                                            onChange={(e) => handleInputChange(e, 'siret')} 
+                                            placeholder="Numéro SIRET"
+                                        />
+                                    </div>
+
+                                    <div className="field col-12 md:col-6">
+                                        <label htmlFor="numeroTVA" className="font-bold">Numéro TVA</label>
+                                        <InputText 
+                                            id="numeroTVA" 
+                                            value={searchCriteria.numeroTVA} 
+                                            onChange={(e) => handleInputChange(e, 'numeroTVA')} 
+                                            placeholder="Numéro TVA"
+                                        />
+                                    </div>
+                                </>
+                            )}
+                        </div>
+
+                        <div className="flex justify-content-center gap-2 mt-4">
+                            <Button 
+                                label="Rechercher" 
+                                icon="pi pi-search" 
+                                onClick={handleSearch}
+                                loading={loading}
+                            />
+                            <Button 
+                                label="Réinitialiser" 
+                                icon="pi pi-refresh" 
+                                className="p-button-text" 
+                                onClick={handleReset}
+                            />
+                        </div>
+                    </div>
+
+                    <Divider />
+
+                    {/* Résultats */}
+                    {loading && (
+                        <div className="flex justify-content-center py-4">
+                            <ProgressSpinner />
+                        </div>
+                    )}
+
+                    {hasSearched && !loading && (
+                        <>
+                            <div className="flex justify-content-between align-items-center mb-3">
+                                <h3>Résultats de la recherche</h3>
+                                <span className="text-600">
+                                    {clients.length} client(s) trouvé(s)
+                                </span>
+                            </div>
+
+                            <DataTable
+                                value={clients}
+                                paginator
+                                rows={10}
+                                rowsPerPageOptions={[5, 10, 25]}
+                                className="datatable-responsive"
+                                paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
+                                currentPageReportTemplate="Affichage de {first} à {last} sur {totalRecords} clients"
+                                emptyMessage="Aucun client trouvé avec ces critères."
+                                responsiveLayout="scroll"
+                            >
+                                <Column 
+                                    field="nom" 
+                                    header="Nom" 
+                                    sortable 
+                                    body={(rowData) => `${rowData.prenom} ${rowData.nom}`}
+                                    headerStyle={{ minWidth: '12rem' }} 
+                                />
+                                <Column 
+                                    field="entreprise" 
+                                    header="Entreprise" 
+                                    sortable 
+                                    headerStyle={{ minWidth: '10rem' }} 
+                                />
+                                <Column 
+                                    field="email" 
+                                    header="Email" 
+                                    sortable 
+                                    headerStyle={{ minWidth: '12rem' }} 
+                                />
+                                <Column 
+                                    field="telephone" 
+                                    header="Téléphone" 
+                                    body={phoneBodyTemplate}
+                                    headerStyle={{ minWidth: '10rem' }} 
+                                />
+                                <Column 
+                                    field="ville" 
+                                    header="Ville" 
+                                    sortable
+                                    headerStyle={{ minWidth: '8rem' }} 
+                                />
+                                <Column 
+                                    field="actif" 
+                                    header="Statut" 
+                                    body={statusBodyTemplate}
+                                    sortable 
+                                    headerStyle={{ minWidth: '8rem' }} 
+                                />
+                                <Column 
+                                    body={actionBodyTemplate}
+                                    headerStyle={{ minWidth: '8rem' }} 
+                                />
+                            </DataTable>
+                        </>
+                    )}
+                </Card>
+            </div>
+        </div>
+    );
+};
+
+export default RechercheClientPage;