diff --git a/app/(main)/admin/attributions/page.tsx b/app/(main)/admin/attributions/page.tsx
index 61a51f0..dd7bbe2 100644
--- a/app/(main)/admin/attributions/page.tsx
+++ b/app/(main)/admin/attributions/page.tsx
@@ -1,381 +1,381 @@
-'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 { Card } from 'primereact/card';
-import { Toast } from 'primereact/toast';
-import { Toolbar } from 'primereact/toolbar';
-import { Dialog } from 'primereact/dialog';
-import { Dropdown } from 'primereact/dropdown';
-import { MultiSelect } from 'primereact/multiselect';
-import { Tag } from 'primereact/tag';
-import { Divider } from 'primereact/divider';
-import clientService from '../../../../services/clientService';
-import userService from '../../../../services/userService';
-import type { Client } from '../../../../types/btp';
-import type { User } from '../../../../types/auth';
-
-interface ClientGestionnaire {
-    client: Client;
-    gestionnairePrincipal?: User;
-    gestionnairesSecondaires: User[];
-}
-
-const AttributionsPage = () => {
-    const [clients, setClients] = useState<Client[]>([]);
-    const [gestionnaires, setGestionnaires] = useState<User[]>([]);
-    const [attributions, setAttributions] = useState<ClientGestionnaire[]>([]);
-    const [loading, setLoading] = useState(true);
-    const [attributionDialog, setAttributionDialog] = useState(false);
-    const [selectedClient, setSelectedClient] = useState<Client | null>(null);
-    const [selectedGestionnairePrincipal, setSelectedGestionnairePrincipal] = useState<User | null>(null);
-    const [selectedGestionnairesSecondaires, setSelectedGestionnairesSecondaires] = useState<User[]>([]);
-    const toast = useRef<Toast>(null);
-
-    useEffect(() => {
-        loadData();
-    }, []);
-
-    const loadData = async () => {
-        try {
-            setLoading(true);
-            
-            // Charger les clients
-            const clientsData = await clientService.getAll();
-            setClients(clientsData);
-
-            // Charger les gestionnaires depuis le service
-            const gestionnairesData = await userService.getGestionnaires();
-            setGestionnaires(gestionnairesData);
-
-            // Construire les attributions
-            const attributionsData = clientsData.map(client => ({
-                client,
-                gestionnairePrincipal: gestionnairesData.find(g => g.id === client.gestionnairePrincipalId),
-                gestionnairesSecondaires: gestionnairesData.filter(g => 
-                    client.gestionnairesSecondaires?.includes(g.id)
-                )
-            }));
-            setAttributions(attributionsData);
-            
-        } catch (error) {
-            console.error('Erreur lors du chargement des données:', error);
-            toast.current?.show({
-                severity: 'error',
-                summary: 'Erreur',
-                detail: 'Impossible de charger les données',
-                life: 3000
-            });
-        } finally {
-            setLoading(false);
-        }
-    };
-
-    const openAttributionDialog = (client: Client) => {
-        setSelectedClient(client);
-        
-        // Pré-remplir les sélections actuelles
-        const gestionnairePrincipal = gestionnaires.find(g => g.id === client.gestionnairePrincipalId);
-        setSelectedGestionnairePrincipal(gestionnairePrincipal || null);
-        
-        const gestionnairesSecondaires = gestionnaires.filter(g => 
-            client.gestionnairesSecondaires?.includes(g.id)
-        );
-        setSelectedGestionnairesSecondaires(gestionnairesSecondaires);
-        
-        setAttributionDialog(true);
-    };
-
-    const saveAttribution = async () => {
-        if (!selectedClient) return;
-
-        try {
-            const updatedClient = {
-                ...selectedClient,
-                gestionnairePrincipalId: selectedGestionnairePrincipal?.id,
-                gestionnairesSecondaires: selectedGestionnairesSecondaires.map(g => g.id)
-            };
-
-            // Mise à jour côté serveur
-            await clientService.update(selectedClient.id, updatedClient);
-
-            // Mettre à jour localement
-            const updatedClients = clients.map(c => 
-                c.id === selectedClient.id ? updatedClient : c
-            );
-            setClients(updatedClients);
-
-            // Mettre à jour les attributions
-            const updatedAttributions = attributions.map(a => 
-                a.client.id === selectedClient.id 
-                    ? {
-                        ...a,
-                        client: updatedClient,
-                        gestionnairePrincipal: selectedGestionnairePrincipal || undefined,
-                        gestionnairesSecondaires: selectedGestionnairesSecondaires
-                    }
-                    : a
-            );
-            setAttributions(updatedAttributions);
-
-            setAttributionDialog(false);
-            toast.current?.show({
-                severity: 'success',
-                summary: 'Succès',
-                detail: 'Attribution mise à jour',
-                life: 3000
-            });
-            
-        } catch (error) {
-            console.error('Erreur lors de la sauvegarde:', error);
-            toast.current?.show({
-                severity: 'error',
-                summary: 'Erreur',
-                detail: 'Impossible de sauvegarder l\'attribution',
-                life: 3000
-            });
-        }
-    };
-
-    const hideDialog = () => {
-        setAttributionDialog(false);
-        setSelectedClient(null);
-        setSelectedGestionnairePrincipal(null);
-        setSelectedGestionnairesSecondaires([]);
-    };
-
-    const leftToolbarTemplate = () => {
-        return (
-            <div className="my-2">
-                <Button 
-                    label="Actualiser" 
-                    icon="pi pi-refresh" 
-                    className="mr-2" 
-                    onClick={loadData} 
-                />
-            </div>
-        );
-    };
-
-    const rightToolbarTemplate = () => {
-        return (
-            <div className="flex align-items-center">
-                <span className="text-color-secondary mr-2">
-                    {attributions.filter(a => a.gestionnairePrincipal).length} / {attributions.length} clients attribués
-                </span>
-            </div>
-        );
-    };
-
-    const actionBodyTemplate = (rowData: ClientGestionnaire) => {
-        return (
-            <Button 
-                icon="pi pi-pencil" 
-                className="p-button-rounded p-button-text p-button-info" 
-                tooltip="Attribuer"
-                onClick={() => openAttributionDialog(rowData.client)}
-            />
-        );
-    };
-
-    const clientBodyTemplate = (rowData: ClientGestionnaire) => {
-        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 gestionnairePrincipalBodyTemplate = (rowData: ClientGestionnaire) => {
-        if (!rowData.gestionnairePrincipal) {
-            return (
-                <Tag 
-                    value="Non attribué" 
-                    severity="danger" 
-                    className="text-sm"
-                />
-            );
-        }
-
-        return (
-            <div className="flex flex-column">
-                <span className="font-medium">
-                    {`${rowData.gestionnairePrincipal.prenom} ${rowData.gestionnairePrincipal.nom}`}
-                </span>
-                <span className="text-sm text-color-secondary">
-                    {rowData.gestionnairePrincipal.email}
-                </span>
-            </div>
-        );
-    };
-
-    const gestionnairesSecondairesBodyTemplate = (rowData: ClientGestionnaire) => {
-        if (rowData.gestionnairesSecondaires.length === 0) {
-            return <span className="text-color-secondary">Aucun</span>;
-        }
-
-        return (
-            <div className="flex flex-column gap-1">
-                {rowData.gestionnairesSecondaires.map(gestionnaire => (
-                    <Tag 
-                        key={gestionnaire.id}
-                        value={`${gestionnaire.prenom} ${gestionnaire.nom}`}
-                        severity="info"
-                        className="text-sm"
-                    />
-                ))}
-            </div>
-        );
-    };
-
-    const header = (
-        <div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
-            <h5 className="m-0">Attribution des Clients aux Gestionnaires</h5>
-        </div>
-    );
-
-    const attributionDialogFooter = (
-        <>
-            <Button 
-                label="Annuler" 
-                icon="pi pi-times" 
-                text 
-                onClick={hideDialog} 
-            />
-            <Button 
-                label="Sauvegarder" 
-                icon="pi pi-check" 
-                text 
-                onClick={saveAttribution} 
-            />
-        </>
-    );
-
-    return (
-        <div className="grid">
-            <div className="col-12">
-                <Card>
-                    <Toast ref={toast} />
-                    <Toolbar 
-                        className="mb-4" 
-                        left={leftToolbarTemplate} 
-                        right={rightToolbarTemplate} 
-                    />
-
-                    <DataTable
-                        value={attributions}
-                        dataKey="client.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} attributions"
-                        emptyMessage="Aucune attribution trouvée."
-                        header={header}
-                        responsiveLayout="scroll"
-                        loading={loading}
-                    >
-                        <Column 
-                            header="Client" 
-                            body={clientBodyTemplate} 
-                            sortable 
-                            headerStyle={{ minWidth: '15rem' }} 
-                        />
-                        <Column 
-                            header="Gestionnaire Principal" 
-                            body={gestionnairePrincipalBodyTemplate} 
-                            headerStyle={{ minWidth: '15rem' }} 
-                        />
-                        <Column 
-                            header="Gestionnaires Secondaires" 
-                            body={gestionnairesSecondairesBodyTemplate} 
-                            headerStyle={{ minWidth: '12rem' }} 
-                        />
-                        <Column 
-                            body={actionBodyTemplate} 
-                            headerStyle={{ minWidth: '8rem' }} 
-                        />
-                    </DataTable>
-
-                    <Dialog 
-                        visible={attributionDialog} 
-                        style={{ width: '600px' }} 
-                        header="Attribution des Gestionnaires" 
-                        modal 
-                        className="p-fluid" 
-                        footer={attributionDialogFooter} 
-                        onHide={hideDialog}
-                    >
-                        {selectedClient && (
-                            <div>
-                                <div className="field mb-4">
-                                    <h6 className="text-primary">Client</h6>
-                                    <div className="p-3 surface-100 border-round">
-                                        <div className="font-medium text-lg">
-                                            {`${selectedClient.prenom} ${selectedClient.nom}`}
-                                        </div>
-                                        {selectedClient.entreprise && (
-                                            <div className="text-color-secondary">
-                                                {selectedClient.entreprise}
-                                            </div>
-                                        )}
-                                    </div>
-                                </div>
-
-                                <Divider />
-
-                                <div className="field">
-                                    <label htmlFor="gestionnairePrincipal">
-                                        <strong>Gestionnaire Principal</strong>
-                                    </label>
-                                    <Dropdown 
-                                        id="gestionnairePrincipal"
-                                        value={selectedGestionnairePrincipal} 
-                                        options={gestionnaires}
-                                        onChange={(e) => setSelectedGestionnairePrincipal(e.value)}
+'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 { Card } from 'primereact/card';
+import { Toast } from 'primereact/toast';
+import { Toolbar } from 'primereact/toolbar';
+import { Dialog } from 'primereact/dialog';
+import { Dropdown } from 'primereact/dropdown';
+import { MultiSelect } from 'primereact/multiselect';
+import { Tag } from 'primereact/tag';
+import { Divider } from 'primereact/divider';
+import clientService from '../../../../services/clientService';
+import userService from '../../../../services/userService';
+import type { Client } from '../../../../types/btp';
+import type { User } from '../../../../types/auth';
+
+interface ClientGestionnaire {
+    client: Client;
+    gestionnairePrincipal?: User;
+    gestionnairesSecondaires: User[];
+}
+
+const AttributionsPage = () => {
+    const [clients, setClients] = useState<Client[]>([]);
+    const [gestionnaires, setGestionnaires] = useState<User[]>([]);
+    const [attributions, setAttributions] = useState<ClientGestionnaire[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [attributionDialog, setAttributionDialog] = useState(false);
+    const [selectedClient, setSelectedClient] = useState<Client | null>(null);
+    const [selectedGestionnairePrincipal, setSelectedGestionnairePrincipal] = useState<User | null>(null);
+    const [selectedGestionnairesSecondaires, setSelectedGestionnairesSecondaires] = useState<User[]>([]);
+    const toast = useRef<Toast>(null);
+
+    useEffect(() => {
+        loadData();
+    }, []);
+
+    const loadData = async () => {
+        try {
+            setLoading(true);
+            
+            // Charger les clients
+            const clientsData = await clientService.getAll();
+            setClients(clientsData);
+
+            // Charger les gestionnaires depuis le service
+            const gestionnairesData = await userService.getGestionnaires();
+            setGestionnaires(gestionnairesData);
+
+            // Construire les attributions
+            const attributionsData = clientsData.map(client => ({
+                client,
+                gestionnairePrincipal: gestionnairesData.find(g => g.id === client.gestionnairePrincipalId),
+                gestionnairesSecondaires: gestionnairesData.filter(g => 
+                    client.gestionnairesSecondaires?.includes(g.id)
+                )
+            }));
+            setAttributions(attributionsData);
+            
+        } catch (error) {
+            console.error('Erreur lors du chargement des données:', error);
+            toast.current?.show({
+                severity: 'error',
+                summary: 'Erreur',
+                detail: 'Impossible de charger les données',
+                life: 3000
+            });
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const openAttributionDialog = (client: Client) => {
+        setSelectedClient(client);
+        
+        // Pré-remplir les sélections actuelles
+        const gestionnairePrincipal = gestionnaires.find(g => g.id === client.gestionnairePrincipalId);
+        setSelectedGestionnairePrincipal(gestionnairePrincipal || null);
+        
+        const gestionnairesSecondaires = gestionnaires.filter(g => 
+            client.gestionnairesSecondaires?.includes(g.id)
+        );
+        setSelectedGestionnairesSecondaires(gestionnairesSecondaires);
+        
+        setAttributionDialog(true);
+    };
+
+    const saveAttribution = async () => {
+        if (!selectedClient) return;
+
+        try {
+            const updatedClient = {
+                ...selectedClient,
+                gestionnairePrincipalId: selectedGestionnairePrincipal?.id,
+                gestionnairesSecondaires: selectedGestionnairesSecondaires.map(g => g.id)
+            };
+
+            // Mise à jour côté serveur
+            await clientService.update(selectedClient.id, updatedClient);
+
+            // Mettre à jour localement
+            const updatedClients = clients.map(c => 
+                c.id === selectedClient.id ? updatedClient : c
+            );
+            setClients(updatedClients);
+
+            // Mettre à jour les attributions
+            const updatedAttributions = attributions.map(a => 
+                a.client.id === selectedClient.id 
+                    ? {
+                        ...a,
+                        client: updatedClient,
+                        gestionnairePrincipal: selectedGestionnairePrincipal || undefined,
+                        gestionnairesSecondaires: selectedGestionnairesSecondaires
+                    }
+                    : a
+            );
+            setAttributions(updatedAttributions);
+
+            setAttributionDialog(false);
+            toast.current?.show({
+                severity: 'success',
+                summary: 'Succès',
+                detail: 'Attribution mise à jour',
+                life: 3000
+            });
+            
+        } catch (error) {
+            console.error('Erreur lors de la sauvegarde:', error);
+            toast.current?.show({
+                severity: 'error',
+                summary: 'Erreur',
+                detail: 'Impossible de sauvegarder l\'attribution',
+                life: 3000
+            });
+        }
+    };
+
+    const hideDialog = () => {
+        setAttributionDialog(false);
+        setSelectedClient(null);
+        setSelectedGestionnairePrincipal(null);
+        setSelectedGestionnairesSecondaires([]);
+    };
+
+    const leftToolbarTemplate = () => {
+        return (
+            <div className="my-2">
+                <Button 
+                    label="Actualiser" 
+                    icon="pi pi-refresh" 
+                    className="mr-2" 
+                    onClick={loadData} 
+                />
+            </div>
+        );
+    };
+
+    const rightToolbarTemplate = () => {
+        return (
+            <div className="flex align-items-center">
+                <span className="text-color-secondary mr-2">
+                    {attributions.filter(a => a.gestionnairePrincipal).length} / {attributions.length} clients attribués
+                </span>
+            </div>
+        );
+    };
+
+    const actionBodyTemplate = (rowData: ClientGestionnaire) => {
+        return (
+            <Button 
+                icon="pi pi-pencil" 
+                className="p-button-rounded p-button-text p-button-info" 
+                tooltip="Attribuer"
+                onClick={() => openAttributionDialog(rowData.client)}
+            />
+        );
+    };
+
+    const clientBodyTemplate = (rowData: ClientGestionnaire) => {
+        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 gestionnairePrincipalBodyTemplate = (rowData: ClientGestionnaire) => {
+        if (!rowData.gestionnairePrincipal) {
+            return (
+                <Tag 
+                    value="Non attribué" 
+                    severity="danger" 
+                    className="text-sm"
+                />
+            );
+        }
+
+        return (
+            <div className="flex flex-column">
+                <span className="font-medium">
+                    {`${rowData.gestionnairePrincipal.prenom} ${rowData.gestionnairePrincipal.nom}`}
+                </span>
+                <span className="text-sm text-color-secondary">
+                    {rowData.gestionnairePrincipal.email}
+                </span>
+            </div>
+        );
+    };
+
+    const gestionnairesSecondairesBodyTemplate = (rowData: ClientGestionnaire) => {
+        if (rowData.gestionnairesSecondaires.length === 0) {
+            return <span className="text-color-secondary">Aucun</span>;
+        }
+
+        return (
+            <div className="flex flex-column gap-1">
+                {rowData.gestionnairesSecondaires.map(gestionnaire => (
+                    <Tag 
+                        key={gestionnaire.id}
+                        value={`${gestionnaire.prenom} ${gestionnaire.nom}`}
+                        severity="info"
+                        className="text-sm"
+                    />
+                ))}
+            </div>
+        );
+    };
+
+    const header = (
+        <div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
+            <h5 className="m-0">Attribution des Clients aux Gestionnaires</h5>
+        </div>
+    );
+
+    const attributionDialogFooter = (
+        <>
+            <Button 
+                label="Annuler" 
+                icon="pi pi-times" 
+                text 
+                onClick={hideDialog} 
+            />
+            <Button 
+                label="Sauvegarder" 
+                icon="pi pi-check" 
+                text 
+                onClick={saveAttribution} 
+            />
+        </>
+    );
+
+    return (
+        <div className="grid">
+            <div className="col-12">
+                <Card>
+                    <Toast ref={toast} />
+                    <Toolbar 
+                        className="mb-4" 
+                        left={leftToolbarTemplate} 
+                        right={rightToolbarTemplate} 
+                    />
+
+                    <DataTable
+                        value={attributions}
+                        dataKey="client.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} attributions"
+                        emptyMessage="Aucune attribution trouvée."
+                        header={header}
+                        responsiveLayout="scroll"
+                        loading={loading}
+                    >
+                        <Column 
+                            header="Client" 
+                            body={clientBodyTemplate} 
+                            sortable 
+                            headerStyle={{ minWidth: '15rem' }} 
+                        />
+                        <Column 
+                            header="Gestionnaire Principal" 
+                            body={gestionnairePrincipalBodyTemplate} 
+                            headerStyle={{ minWidth: '15rem' }} 
+                        />
+                        <Column 
+                            header="Gestionnaires Secondaires" 
+                            body={gestionnairesSecondairesBodyTemplate} 
+                            headerStyle={{ minWidth: '12rem' }} 
+                        />
+                        <Column 
+                            body={actionBodyTemplate} 
+                            headerStyle={{ minWidth: '8rem' }} 
+                        />
+                    </DataTable>
+
+                    <Dialog 
+                        visible={attributionDialog} 
+                        style={{ width: '600px' }} 
+                        header="Attribution des Gestionnaires" 
+                        modal 
+                        className="p-fluid" 
+                        footer={attributionDialogFooter} 
+                        onHide={hideDialog}
+                    >
+                        {selectedClient && (
+                            <div>
+                                <div className="field mb-4">
+                                    <h6 className="text-primary">Client</h6>
+                                    <div className="p-3 surface-100 border-round">
+                                        <div className="font-medium text-lg">
+                                            {`${selectedClient.prenom} ${selectedClient.nom}`}
+                                        </div>
+                                        {selectedClient.entreprise && (
+                                            <div className="text-color-secondary">
+                                                {selectedClient.entreprise}
+                                            </div>
+                                        )}
+                                    </div>
+                                </div>
+
+                                <Divider />
+
+                                <div className="field">
+                                    <label htmlFor="gestionnairePrincipal">
+                                        <strong>Gestionnaire Principal</strong>
+                                    </label>
+                                    <Dropdown 
+                                        id="gestionnairePrincipal"
+                                        value={selectedGestionnairePrincipal} 
+                                        options={gestionnaires}
+                                        onChange={(e) => setSelectedGestionnairePrincipal(e.value)}
+                                        optionLabel="nom"
+                                        itemTemplate={(option) => option ? `${option.prenom} ${option.nom}` : ''}
+                                        placeholder="Sélectionnez un gestionnaire principal"
+                                        showClear
+                                        className="w-full"
+                                    />
+                                    <small className="text-color-secondary">
+                                        Le gestionnaire principal est responsable de la relation client
+                                    </small>
+                                </div>
+
+                                <div className="field">
+                                    <label htmlFor="gestionnairesSecondaires">
+                                        <strong>Gestionnaires Secondaires</strong>
+                                    </label>
+                                    <MultiSelect 
+                                        id="gestionnairesSecondaires"
+                                        value={selectedGestionnairesSecondaires} 
+                                        options={gestionnaires.filter(g => g.id !== selectedGestionnairePrincipal?.id)}
+                                        onChange={(e) => setSelectedGestionnairesSecondaires(e.value)}
                                         optionLabel="nom"
-                                        itemTemplate={(option) => option ? `${option.prenom} ${option.nom}` : ''}
-                                        placeholder="Sélectionnez un gestionnaire principal"
-                                        showClear
-                                        className="w-full"
-                                    />
-                                    <small className="text-color-secondary">
-                                        Le gestionnaire principal est responsable de la relation client
-                                    </small>
-                                </div>
-
-                                <div className="field">
-                                    <label htmlFor="gestionnairesSecondaires">
-                                        <strong>Gestionnaires Secondaires</strong>
-                                    </label>
-                                    <MultiSelect 
-                                        id="gestionnairesSecondaires"
-                                        value={selectedGestionnairesSecondaires} 
-                                        options={gestionnaires.filter(g => g.id !== selectedGestionnairePrincipal?.id)}
-                                        onChange={(e) => setSelectedGestionnairesSecondaires(e.value)}
-                                        optionLabel="nom"
-                                        itemTemplate={(option) => option ? `${option.prenom} ${option.nom}` : ''}
-                                        placeholder="Sélectionnez des gestionnaires secondaires"
-                                        className="w-full"
-                                        maxSelectedLabels={3}
-                                    />
-                                    <small className="text-color-secondary">
-                                        Les gestionnaires secondaires peuvent consulter et collaborer sur les projets
-                                    </small>
-                                </div>
-                            </div>
-                        )}
-                    </Dialog>
-                </Card>
-            </div>
-        </div>
-    );
-};
-
-export default AttributionsPage;
+                                        itemTemplate={(option) => option ? `${option.prenom} ${option.nom}` : ''}
+                                        placeholder="Sélectionnez des gestionnaires secondaires"
+                                        className="w-full"
+                                        maxSelectedLabels={3}
+                                    />
+                                    <small className="text-color-secondary">
+                                        Les gestionnaires secondaires peuvent consulter et collaborer sur les projets
+                                    </small>
+                                </div>
+                            </div>
+                        )}
+                    </Dialog>
+                </Card>
+            </div>
+        </div>
+    );
+};
+
+export default AttributionsPage;
diff --git a/app/(main)/admin/demandes-acces/page.tsx b/app/(main)/admin/demandes-acces/page.tsx
index eedc0c6..4ae7f93 100644
--- a/app/(main)/admin/demandes-acces/page.tsx
+++ b/app/(main)/admin/demandes-acces/page.tsx
@@ -26,6 +26,7 @@ import { Avatar } from 'primereact/avatar';
 import { AvatarGroup } from 'primereact/avatargroup';
 import { Chip } from 'primereact/chip';
 import { Message } from 'primereact/message';
+<<<<<<< HEAD
 import { Messages } from 'primereact/messages';
 import { Skeleton } from 'primereact/skeleton';
 import { SpeedDial } from 'primereact/speeddial';
@@ -1799,3 +1800,1778 @@ if (typeof document !== 'undefined') {
 }
 
 
+=======
+import { Messages } from 'primereact/messages';
+import { Skeleton } from 'primereact/skeleton';
+import { SpeedDial } from 'primereact/speeddial';
+import { ScrollPanel } from 'primereact/scrollpanel';
+import { Splitter, SplitterPanel } from 'primereact/splitter';
+import { FileUpload } from 'primereact/fileupload';
+import { Image } from 'primereact/image';
+import { Galleria } from 'primereact/galleria';
+import { DataView } from 'primereact/dataview';
+import { OrderList } from 'primereact/orderlist';
+import { PickList } from 'primereact/picklist';
+import { OverlayPanel } from 'primereact/overlaypanel';
+import { Sidebar } from 'primereact/sidebar';
+import { ContextMenu } from 'primereact/contextmenu';
+import { Menu } from 'primereact/menu';
+import { TieredMenu } from 'primereact/tieredmenu';
+import { ConfirmDialog, confirmDialog } from 'primereact/confirmdialog';
+import { BlockUI } from 'primereact/blockui';
+import { Chart } from 'primereact/chart';
+import { Rating } from 'primereact/rating';
+import { Knob } from 'primereact/knob';
+import { InputSwitch } from 'primereact/inputswitch';
+import { MultiSelect } from 'primereact/multiselect';
+import { Checkbox } from 'primereact/checkbox';
+import { RadioButton } from 'primereact/radiobutton';
+import { Slider } from 'primereact/slider';
+import { ToggleButton } from 'primereact/togglebutton';
+import { SelectButton } from 'primereact/selectbutton';
+import { InputNumber } from 'primereact/inputnumber';
+import { ColorPicker } from 'primereact/colorpicker';
+import { ListBox } from 'primereact/listbox';
+import { Fieldset } from 'primereact/fieldset';
+// import { ProgressBar } from 'primereact/progressbar'; // Module not available
+import { TreeTable } from 'primereact/treetable';
+import { Tree } from 'primereact/tree';
+import { ScrollTop } from 'primereact/scrolltop';
+import { VirtualScroller } from 'primereact/virtualscroller';
+import { DeferredContent } from 'primereact/deferredcontent';
+import { Carousel } from 'primereact/carousel';
+import { Terminal } from 'primereact/terminal';
+
+interface DemandeAcces {
+    id: string;
+    userId: string;
+    nom: string;
+    prenom: string;
+    email: string;
+    telephone: string;
+    entreprise: string;
+    siret: string;
+    secteurActivite: string;
+    effectif?: number;
+    role: string;
+    status: 'PENDING' | 'APPROVED' | 'REJECTED' | 'SUSPENDED';
+    dateCreation: string;
+    dateModification?: string;
+    dateTraitement?: string;
+    commentaireDemandeur?: string;
+    commentaireAdmin?: string;
+    kbisUploade?: boolean;
+    assuranceRCUploade?: boolean;
+    assuranceDecennaleUploade?: boolean;
+    attestationUrssafUploade?: boolean;
+    pourcentageCompletion?: number;
+    validateurNom?: string;
+}
+
+const DemandesAccesAdmin = () => {
+    const [demandes, setDemandes] = useState<DemandeAcces[]>([]);
+    const [selectedDemande, setSelectedDemande] = useState<DemandeAcces | null>(null);
+    const [detailDialog, setDetailDialog] = useState(false);
+    const [validationDialog, setValidationDialog] = useState(false);
+    const [bulkDialog, setBulkDialog] = useState(false);
+    const [workflowDialog, setWorkflowDialog] = useState(false);
+    const [analyticsDialog, setAnalyticsDialog] = useState(false);
+    const [actionType, setActionType] = useState<'APPROVE' | 'REJECT'>('APPROVE');
+    const [commentaire, setCommentaire] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [blocked, setBlocked] = useState(false);
+    const [globalFilter, setGlobalFilter] = useState('');
+    const [statusFilter, setStatusFilter] = useState<string>('');
+    const [dateFilter, setDateFilter] = useState<Date | null>(null);
+    const [sectorFilter, setSectorFilter] = useState<string>('');
+    const [selectedDemandes, setSelectedDemandes] = useState<DemandeAcces[]>([]);
+    const [viewMode, setViewMode] = useState<'table' | 'grid' | 'timeline'>('table');
+    const [autoRefresh, setAutoRefresh] = useState(true);
+    const [refreshInterval, setRefreshInterval] = useState(30);
+    const [sidebarVisible, setSidebarVisible] = useState(false);
+    const [activeTab, setActiveTab] = useState(0);
+    const [processingQueue, setProcessingQueue] = useState<DemandeAcces[]>([]);
+    const [approvalWorkflow, setApprovalWorkflow] = useState([]);
+    const [auditLog, setAuditLog] = useState([]);
+    const [kpiData, setKpiData] = useState({
+        totalDemandes: 0,
+        enAttente: 0,
+        approuvees: 0,
+        rejetees: 0,
+        tauxApprobation: 0,
+        delaiMoyenTraitement: 0
+    });
+    const [chartData, setChartData] = useState({});
+    const [timelineData, setTimelineData] = useState([]);
+    const [validationRules, setValidationRules] = useState([]);
+    const [notifications, setNotifications] = useState([]);
+    const [documentPreview, setDocumentPreview] = useState(null);
+    const [compareMode, setCompareMode] = useState(false);
+    const [selectedForComparison, setSelectedForComparison] = useState<DemandeAcces[]>([]);
+    const [exportProgress, setExportProgress] = useState(0);
+    const [aiRecommendations, setAiRecommendations] = useState([]);
+    const [riskScore, setRiskScore] = useState(0);
+    const [complianceCheck, setComplianceCheck] = useState(true);
+    
+    const toast = useRef<Toast>(null);
+    const messages = useRef<Messages>(null);
+    const overlayPanel = useRef<OverlayPanel>(null);
+    const contextMenu = useRef<ContextMenu>(null);
+    const terminal = useRef<Terminal>(null);
+    const dt = useRef<DataTable<any>>(null);
+
+    const statusOptions = [
+        { label: 'Tous', value: '', icon: 'pi pi-list' },
+        { label: 'En attente', value: 'PENDING', icon: 'pi pi-clock', color: '#f59e0b' },
+        { label: 'Approuvé', value: 'APPROVED', icon: 'pi pi-check', color: '#10b981' },
+        { label: 'Rejeté', value: 'REJECTED', icon: 'pi pi-times', color: '#ef4444' },
+        { label: 'Suspendu', value: 'SUSPENDED', icon: 'pi pi-pause', color: '#6b7280' },
+        { label: 'En révision', value: 'UNDER_REVIEW', icon: 'pi pi-eye', color: '#3b82f6' },
+        { label: 'Incomplet', value: 'INCOMPLETE', icon: 'pi pi-exclamation-triangle', color: '#f97316' }
+    ];
+
+    const sectorOptions = [
+        { label: 'Tous les secteurs', value: '' },
+        { label: 'BTP Général', value: 'BTP_GENERAL' },
+        { label: 'Électricité', value: 'ELECTRICITE' },
+        { label: 'Plomberie', value: 'PLOMBERIE' },
+        { label: 'Maçonnerie', value: 'MACONNERIE' },
+        { label: 'Menuiserie', value: 'MENUISERIE' },
+        { label: 'Peinture', value: 'PEINTURE' },
+        { label: 'Couverture', value: 'COUVERTURE' },
+        { label: 'Terrassement', value: 'TERRASSEMENT' }
+    ];
+
+    const viewModeOptions = [
+        { label: 'Tableau', value: 'table', icon: 'pi pi-table' },
+        { label: 'Grille', value: 'grid', icon: 'pi pi-th-large' },
+        { label: 'Timeline', value: 'timeline', icon: 'pi pi-calendar' }
+    ];
+
+    const bulkActions = [
+        { label: 'Approuver sélection', icon: 'pi pi-check', command: () => processBulkAction('APPROVE') },
+        { label: 'Rejeter sélection', icon: 'pi pi-times', command: () => processBulkAction('REJECT') },
+        { label: 'Marquer comme incomplet', icon: 'pi pi-exclamation-triangle', command: () => processBulkAction('INCOMPLETE') },
+        { label: 'Exporter sélection', icon: 'pi pi-download', command: () => exportSelected() },
+        { label: 'Assigner à un validateur', icon: 'pi pi-user', command: () => assignValidator() },
+        { label: 'Envoyer rappel', icon: 'pi pi-send', command: () => sendReminder() }
+    ];
+
+    const quickFilters = [
+        { label: 'Nouvelles demandes (24h)', filter: () => filterByDate(1), icon: 'pi pi-clock' },
+        { label: 'En attente > 7 jours', filter: () => filterByDelay(7), icon: 'pi pi-exclamation-triangle' },
+        { label: 'Documents manquants', filter: () => filterByDocuments(), icon: 'pi pi-file' },
+        { label: 'Score de risque élevé', filter: () => filterByRisk(), icon: 'pi pi-shield' },
+        { label: 'Grandes entreprises', filter: () => filterBySize('large'), icon: 'pi pi-building' }
+    ];
+
+    const workflowSteps = [
+        { label: 'Soumission', icon: 'pi pi-send' },
+        { label: 'Vérification automatique', icon: 'pi pi-cog' },
+        { label: 'Contrôle documents', icon: 'pi pi-file-check' },
+        { label: 'Validation métier', icon: 'pi pi-user-check' },
+        { label: 'Approbation finale', icon: 'pi pi-check-circle' }
+    ];
+
+    const validationCriteria = [
+        { name: 'Informations entreprise', weight: 25, status: 'complete' },
+        { name: 'Documents légaux', weight: 30, status: 'incomplete' },
+        { name: 'Assurances', weight: 20, status: 'complete' },
+        { name: 'Références clients', weight: 15, status: 'pending' },
+        { name: 'Capacité financière', weight: 10, status: 'complete' }
+    ];
+
+    useEffect(() => {
+        loadDemandes();
+    }, []);
+
+    const loadDemandes = async () => {
+        setLoading(true);
+        try {
+            // TODO: Remplacer par un appel API réel pour charger les demandes d'accès
+            // Exemple: const response = await fetch('/api/admin/demandes-acces');
+            // const demandesData = await response.json();
+            const mockData: DemandeAcces[] = [];
+            setDemandes(mockData);
+        } catch (error) {
+            toast.current?.show({
+                severity: 'error',
+                summary: 'Erreur',
+                detail: 'Impossible de charger les demandes',
+                life: 3000
+            });
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const getStatusSeverity = (status: string) => {
+        switch (status) {
+            case 'PENDING': return 'warning';
+            case 'APPROVED': return 'success';
+            case 'REJECTED': return 'danger';
+            case 'SUSPENDED': return 'info';
+            default: return 'info';
+        }
+    };
+
+    const getStatusLabel = (status: string) => {
+        switch (status) {
+            case 'PENDING': return 'En attente';
+            case 'APPROVED': return 'Approuvé';
+            case 'REJECTED': return 'Rejeté';
+            case 'SUSPENDED': return 'Suspendu';
+            default: return status;
+        }
+    };
+
+    // Filtrage des demandes
+    const filteredDemandes = demandes.filter(demande => {
+        const matchesGlobal = !globalFilter || 
+            demande.nom.toLowerCase().includes(globalFilter.toLowerCase()) ||
+            demande.prenom.toLowerCase().includes(globalFilter.toLowerCase()) ||
+            demande.email.toLowerCase().includes(globalFilter.toLowerCase()) ||
+            demande.entreprise.toLowerCase().includes(globalFilter.toLowerCase());
+        
+        const matchesStatus = !statusFilter || demande.status === statusFilter;
+        
+        return matchesGlobal && matchesStatus;
+    });
+
+    const statusBodyTemplate = (rowData: DemandeAcces) => {
+        return <Tag value={getStatusLabel(rowData.status)} severity={getStatusSeverity(rowData.status)} />;
+    };
+
+    const entrepriseBodyTemplate = (rowData: DemandeAcces) => {
+        return (
+            <div>
+                <div className="font-bold">{rowData.entreprise}</div>
+                <div className="text-sm text-500">SIRET: {rowData.siret}</div>
+            </div>
+        );
+    };
+
+    const contactBodyTemplate = (rowData: DemandeAcces) => {
+        return (
+            <div>
+                <div className="font-bold">{rowData.prenom} {rowData.nom}</div>
+                <div className="text-sm text-500">{rowData.email}</div>
+            </div>
+        );
+    };
+
+    const documentsBodyTemplate = (rowData: DemandeAcces) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <ProgressBar 
+                    value={rowData.pourcentageCompletion || 0} 
+                    style={{ width: '60px', height: '6px' }}
+                />
+                <span className="text-sm">{rowData.pourcentageCompletion || 0}%</span>
+            </div>
+        );
+    };
+
+    const dateBodyTemplate = (rowData: DemandeAcces) => {
+        return new Date(rowData.dateCreation).toLocaleDateString('fr-FR');
+    };
+
+    const actionsBodyTemplate = (rowData: DemandeAcces) => {
+        return (
+            <div className="flex gap-2">
+                <Button
+                    icon="pi pi-eye"
+                    className="p-button-rounded p-button-text"
+                    onClick={() => {
+                        setSelectedDemande(rowData);
+                        setDetailDialog(true);
+                    }}
+                    tooltip="Voir détails"
+                />
+                {rowData.status === 'PENDING' && (
+                    <>
+                        <Button
+                            icon="pi pi-check"
+                            className="p-button-rounded p-button-success p-button-text"
+                            onClick={() => openValidationDialog(rowData, 'APPROVE')}
+                            tooltip="Approuver"
+                        />
+                        <Button
+                            icon="pi pi-times"
+                            className="p-button-rounded p-button-danger p-button-text"
+                            onClick={() => openValidationDialog(rowData, 'REJECT')}
+                            tooltip="Rejeter"
+                        />
+                    </>
+                )}
+            </div>
+        );
+    };
+
+    const openValidationDialog = (demande: DemandeAcces, action: 'APPROVE' | 'REJECT') => {
+        setSelectedDemande(demande);
+        setActionType(action);
+        setCommentaire('');
+        setValidationDialog(true);
+    };
+
+    const handleValidation = async () => {
+        if (!selectedDemande || !commentaire.trim()) {
+            toast.current?.show({
+                severity: 'warn',
+                summary: 'Attention',
+                detail: 'Veuillez saisir un commentaire',
+                life: 3000
+            });
+            return;
+        }
+
+        try {
+            setLoading(true);
+            
+            // Simuler l'appel API
+            const updatedDemandes = demandes.map(d => 
+                d.id === selectedDemande.id 
+                    ? { ...d, status: actionType === 'APPROVE' ? 'APPROVED' as const : 'REJECTED' as const, commentaireAdmin: commentaire, dateTraitement: new Date().toISOString() }
+                    : d
+            );
+            setDemandes(updatedDemandes);
+
+            toast.current?.show({
+                severity: 'success',
+                summary: 'Succès',
+                detail: `Demande ${actionType === 'APPROVE' ? 'approuvée' : 'rejetée'} avec succès`,
+                life: 3000
+            });
+
+            setValidationDialog(false);
+        } catch (error) {
+            toast.current?.show({
+                severity: 'error',
+                summary: 'Erreur',
+                detail: 'Erreur lors de la validation',
+                life: 3000
+            });
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        loadDemandes();
+        loadKPIData();
+        loadAnalytics();
+        
+        if (autoRefresh) {
+            const interval = setInterval(() => {
+                loadDemandes();
+                loadKPIData();
+            }, refreshInterval * 1000);
+            return () => clearInterval(interval);
+        }
+    }, [autoRefresh, refreshInterval]);
+
+    const loadKPIData = async () => {
+        // TODO: Remplacer par un appel API réel
+        const mockKPI = {
+            totalDemandes: 156,
+            enAttente: 23,
+            approuvees: 98,
+            rejetees: 35,
+            tauxApprobation: 73.6,
+            delaiMoyenTraitement: 4.2
+        };
+        setKpiData(mockKPI);
+    };
+
+    const loadAnalytics = async () => {
+        // TODO: Remplacer par un appel API réel pour les analytics
+        const mockChartData = {
+            labels: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Jun'],
+            datasets: [
+                {
+                    label: 'Demandes reçues',
+                    data: [25, 32, 28, 45, 38, 42],
+                    backgroundColor: '#3B82F6',
+                    borderColor: '#1D4ED8'
+                },
+                {
+                    label: 'Demandes approuvées',
+                    data: [18, 24, 21, 32, 28, 31],
+                    backgroundColor: '#10B981',
+                    borderColor: '#047857'
+                }
+            ]
+        };
+        setChartData(mockChartData);
+        
+        const mockTimeline = [
+            { date: new Date(), event: 'Nouvelle demande reçue', type: 'info', user: 'Système' },
+            { date: new Date(), event: 'Demande approuvée', type: 'success', user: 'Admin' },
+            { date: new Date(), event: 'Documents manquants signalés', type: 'warning', user: 'Validateur' }
+        ];
+        setTimelineData(mockTimeline);
+    };
+
+    const processBulkAction = (action: string) => {
+        if (selectedDemandes.length === 0) {
+            toast.current?.show({
+                severity: 'warn',
+                summary: 'Attention',
+                detail: 'Veuillez sélectionner au moins une demande',
+                life: 3000
+            });
+            return;
+        }
+        
+        confirmDialog({
+            message: `Voulez-vous ${action === 'APPROVE' ? 'approuver' : 'rejeter'} ${selectedDemandes.length} demande(s) ?`,
+            header: 'Action groupée',
+            icon: 'pi pi-question-circle',
+            acceptLabel: 'Confirmer',
+            rejectLabel: 'Annuler',
+            accept: () => {
+                setBlocked(true);
+                setTimeout(() => {
+                    setBlocked(false);
+                    setSelectedDemandes([]);
+                    toast.current?.show({
+                        severity: 'success',
+                        summary: 'Action terminée',
+                        detail: `${selectedDemandes.length} demandes traitées avec succès`,
+                        life: 3000
+                    });
+                }, 2000);
+            }
+        });
+    };
+
+    const exportSelected = () => {
+        if (selectedDemandes.length === 0) {
+            toast.current?.show({
+                severity: 'warn',
+                summary: 'Attention',
+                detail: 'Veuillez sélectionner au moins une demande',
+                life: 3000
+            });
+            return;
+        }
+        
+        setExportProgress(0);
+        const interval = setInterval(() => {
+            setExportProgress(prev => {
+                if (prev >= 100) {
+                    clearInterval(interval);
+                    toast.current?.show({
+                        severity: 'success',
+                        summary: 'Export terminé',
+                        detail: `${selectedDemandes.length} demandes exportées`,
+                        life: 3000
+                    });
+                    return 100;
+                }
+                return prev + 10;
+            });
+        }, 200);
+    };
+
+    const assignValidator = () => {
+        toast.current?.show({
+            severity: 'info',
+            summary: 'Assignation',
+            detail: 'Fonction d\'assignation en cours de développement',
+            life: 3000
+        });
+    };
+
+    const sendReminder = () => {
+        toast.current?.show({
+            severity: 'success',
+            summary: 'Rappels envoyés',
+            detail: `Rappels envoyés pour ${selectedDemandes.length} demandes`,
+            life: 3000
+        });
+    };
+
+    const filterByDate = (days: number) => {
+        const cutoffDate = new Date();
+        cutoffDate.setDate(cutoffDate.getDate() - days);
+        // Implémentation du filtre
+        toast.current?.show({
+            severity: 'info',
+            summary: 'Filtre appliqué',
+            detail: `Affichage des demandes des ${days} derniers jours`,
+            life: 3000
+        });
+    };
+
+    const filterByDelay = (days: number) => {
+        toast.current?.show({
+            severity: 'info',
+            summary: 'Filtre appliqué',
+            detail: `Affichage des demandes en attente depuis plus de ${days} jours`,
+            life: 3000
+        });
+    };
+
+    const filterByDocuments = () => {
+        toast.current?.show({
+            severity: 'info',
+            summary: 'Filtre appliqué',
+            detail: 'Affichage des demandes avec documents manquants',
+            life: 3000
+        });
+    };
+
+    const filterByRisk = () => {
+        toast.current?.show({
+            severity: 'info',
+            summary: 'Filtre appliqué',
+            detail: 'Affichage des demandes à risque élevé',
+            life: 3000
+        });
+    };
+
+    const filterBySize = (size: string) => {
+        toast.current?.show({
+            severity: 'info',
+            summary: 'Filtre appliqué',
+            detail: `Affichage des ${size === 'large' ? 'grandes' : 'petites'} entreprises`,
+            life: 3000
+        });
+    };
+
+    const advancedToolbar = (
+        <div className="flex flex-wrap align-items-center justify-content-between gap-3 p-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white border-round">
+            <div className="flex align-items-center gap-3">
+                <Avatar icon="pi pi-users" className="bg-white-alpha-20" style={{ color: 'white' }} />
+                <div>
+                    <div className="text-xl font-bold">Gestion des Demandes d'Accès</div>
+                    <div className="text-sm opacity-90">
+                        {kpiData.totalDemandes} demandes | {kpiData.enAttente} en attente | Taux d'approbation: {kpiData.tauxApprobation}%
+                    </div>
+                </div>
+            </div>
+            
+            <div className="flex align-items-center gap-2">
+                <SelectButton 
+                    value={viewMode} 
+                    options={viewModeOptions} 
+                    onChange={(e) => setViewMode(e.value)}
+                    optionLabel="label"
+                    optionValue="value"
+                    className="view-mode-selector"
+                />
+                
+                <ToggleButton 
+                    checked={autoRefresh} 
+                    onChange={(e) => setAutoRefresh(e.value)}
+                    onIcon="pi pi-pause" 
+                    offIcon="pi pi-play"
+                    onLabel="" 
+                    offLabel=""
+                    className="bg-white-alpha-20"
+                    tooltip="Auto-refresh"
+                />
+                
+                <Button 
+                    icon="pi pi-chart-bar" 
+                    rounded 
+                    text 
+                    onClick={() => setAnalyticsDialog(true)}
+                    tooltip="Analytics"
+                    className="text-white"
+                />
+                
+                <Button 
+                    icon="pi pi-cog" 
+                    rounded 
+                    text 
+                    onClick={() => setSidebarVisible(true)}
+                    tooltip="Configuration"
+                    className="text-white"
+                />
+            </div>
+        </div>
+    );
+
+    const searchToolbar = (
+        <div className="flex flex-wrap align-items-center justify-content-between gap-3 p-3 bg-gray-50 border-round mb-3">
+            <div className="flex flex-wrap align-items-center gap-2">
+                <span className="p-input-icon-left">
+                    <i className="pi pi-search" />
+                    <InputText
+                        type="search"
+                        placeholder="Rechercher par nom, email, entreprise..."
+                        value={globalFilter}
+                        onChange={(e) => setGlobalFilter(e.target.value)}
+                        className="w-20rem"
+                    />
+                </span>
+                
+                <Dropdown
+                    value={statusFilter}
+                    options={statusOptions}
+                    onChange={(e) => setStatusFilter(e.value)}
+                    placeholder="Statut"
+                    className="w-12rem"
+                    showClear
+                />
+                
+                <Dropdown
+                    value={sectorFilter}
+                    options={sectorOptions}
+                    onChange={(e) => setSectorFilter(e.value)}
+                    placeholder="Secteur"
+                    className="w-12rem"
+                    showClear
+                />
+                
+                <Calendar
+                    value={dateFilter}
+                    onChange={(e) => setDateFilter(e.value)}
+                    placeholder="Date création"
+                    showIcon
+                    className="w-12rem"
+                />
+            </div>
+            
+            <div className="flex align-items-center gap-2">
+                <Badge value={filteredDemandes.length} className="mr-2" />
+                <span className="text-sm text-600">résultats</span>
+                
+                <Button
+                    icon="pi pi-filter-slash"
+                    label="Effacer"
+                    size="small"
+                    outlined
+                    onClick={() => {
+                        setGlobalFilter('');
+                        setStatusFilter('');
+                        setSectorFilter('');
+                        setDateFilter(null);
+                    }}
+                />
+                
+                <Button
+                    icon="pi pi-refresh"
+                    label="Actualiser"
+                    size="small"
+                    onClick={loadDemandes}
+                    loading={loading}
+                />
+            </div>
+        </div>
+    );
+
+    
+
+
+    const renderKPIDashboard = () => (
+        <div className="grid mb-4">
+            <div className="col-12 md:col-3">
+                <Card className="bg-gradient-to-r from-blue-500 to-blue-600 text-white">
+                    <div className="flex align-items-center justify-content-between">
+                        <div>
+                            <div className="text-2xl font-bold">{kpiData.totalDemandes}</div>
+                            <div className="text-sm opacity-90">Total demandes</div>
+                        </div>
+                        <Avatar icon="pi pi-users" size="large" className="bg-white-alpha-20" />
+                    </div>
+                </Card>
+            </div>
+            
+            <div className="col-12 md:col-3">
+                <Card className="bg-gradient-to-r from-orange-500 to-orange-600 text-white">
+                    <div className="flex align-items-center justify-content-between">
+                        <div>
+                            <div className="text-2xl font-bold">{kpiData.enAttente}</div>
+                            <div className="text-sm opacity-90">En attente</div>
+                        </div>
+                        <Avatar icon="pi pi-clock" size="large" className="bg-white-alpha-20" />
+                    </div>
+                </Card>
+            </div>
+            
+            <div className="col-12 md:col-3">
+                <Card className="bg-gradient-to-r from-green-500 to-green-600 text-white">
+                    <div className="flex align-items-center justify-content-between">
+                        <div>
+                            <div className="text-2xl font-bold">{kpiData.tauxApprobation}%</div>
+                            <div className="text-sm opacity-90">Taux approbation</div>
+                        </div>
+                        <Avatar icon="pi pi-check-circle" size="large" className="bg-white-alpha-20" />
+                    </div>
+                </Card>
+            </div>
+            
+            <div className="col-12 md:col-3">
+                <Card className="bg-gradient-to-r from-purple-500 to-purple-600 text-white">
+                    <div className="flex align-items-center justify-content-between">
+                        <div>
+                            <div className="text-2xl font-bold">{kpiData.delaiMoyenTraitement}j</div>
+                            <div className="text-sm opacity-90">Délai moyen</div>
+                        </div>
+                        <Avatar icon="pi pi-calendar" size="large" className="bg-white-alpha-20" />
+                    </div>
+                </Card>
+            </div>
+        </div>
+    );
+
+    const renderQuickFilters = () => (
+        <Card className="mb-4">
+            <h6 className="mb-3">Filtres rapides</h6>
+            <div className="flex flex-wrap gap-2">
+                {quickFilters.map((filter, index) => (
+                    <Chip 
+                        key={index}
+                        label={filter.label}
+                        icon={filter.icon}
+                        className="cursor-pointer hover:bg-primary-50"
+                        onClick={filter.filter}
+                    />
+                ))}
+            </div>
+        </Card>
+    );
+
+    const renderTableView = () => (
+        <Card>
+            {selectedDemandes.length > 0 && (
+                <div className="mb-3 p-3 bg-blue-50 border-round">
+                    <div className="flex align-items-center justify-content-between">
+                        <div className="flex align-items-center gap-2">
+                            <i className="pi pi-check-circle text-blue-500" />
+                            <span>{selectedDemandes.length} demande(s) sélectionnée(s)</span>
+                        </div>
+                        <div className="flex gap-2">
+                            <Button 
+                                label="Actions groupées" 
+                                icon="pi pi-chevron-down" 
+                                size="small"
+                                onClick={(e) => overlayPanel.current?.toggle(e)}
+                            />
+                            <Button 
+                                icon="pi pi-times" 
+                                size="small" 
+                                text
+                                onClick={() => setSelectedDemandes([])}
+                            />
+                        </div>
+                    </div>
+                </div>
+            )}
+            
+            <DataTable
+                ref={dt}
+                value={filteredDemandes}
+                selection={selectedDemandes}
+                onSelectionChange={(e) => setSelectedDemandes(e.value)}
+                paginator
+                rows={10}
+                rowsPerPageOptions={[10, 25, 50, 100]}
+                loading={loading}
+                globalFilter={globalFilter}
+                emptyMessage="Aucune demande trouvée"
+                responsiveLayout="stack"
+                breakpoint="768px"
+                className="p-datatable-striped"
+                showGridlines
+                sortMode="multiple"
+                removableSort
+                reorderableColumns
+                resizableColumns
+                columnResizeMode="expand"
+                contextMenuSelection={selectedDemande}
+                onContextMenuSelectionChange={(e) => setSelectedDemande(e.value)}
+                onContextMenu={(e) => contextMenu.current?.show(e.originalEvent)}
+            >
+                <Column selectionMode="multiple" headerStyle={{ width: '3rem' }} />
+                <Column 
+                    field="entreprise" 
+                    header="Entreprise" 
+                    body={entrepriseBodyTemplate}
+                    sortable
+                    filter
+                    filterPlaceholder="Rechercher..."
+                />
+                <Column 
+                    field="contact" 
+                    header="Contact" 
+                    body={contactBodyTemplate}
+                    sortable
+                />
+                <Column 
+                    field="secteurActivite" 
+                    header="Secteur" 
+                    sortable
+                    filter
+                    filterElement={sectorFilterTemplate}
+                />
+                <Column 
+                    field="role" 
+                    header="Rôle" 
+                    sortable
+                />
+                <Column 
+                    field="status" 
+                    header="Statut" 
+                    body={statusBodyTemplate}
+                    sortable
+                    filter
+                    filterElement={statusFilterTemplate}
+                />
+                <Column 
+                    field="documents" 
+                    header="Documents" 
+                    body={documentsBodyTemplate}
+                />
+                <Column 
+                    field="dateCreation" 
+                    header="Date création" 
+                    body={dateBodyTemplate}
+                    sortable
+                    filter
+                    filterElement={dateFilterTemplate}
+                />
+                <Column 
+                    field="riskScore"
+                    header="Risque"
+                    body={riskScoreTemplate}
+                    sortable
+                />
+                <Column 
+                    header="Actions" 
+                    body={actionsBodyTemplate}
+                    exportable={false}
+                    frozen
+                    alignFrozen="right"
+                />
+            </DataTable>
+        </Card>
+    );
+
+    const renderGridView = () => (
+        <div className="grid">
+            {filteredDemandes.map((demande) => (
+                <div key={demande.id} className="col-12 md:col-6 lg:col-4">
+                    <Card className="h-full hover:shadow-lg transition-shadow">
+                        <div className="flex align-items-center justify-content-between mb-3">
+                            <Avatar 
+                                label={demande.prenom.charAt(0) + demande.nom.charAt(0)} 
+                                className="mr-2" 
+                                style={{ backgroundColor: '#DEE2E6', color: '#495057' }}
+                            />
+                            <Tag 
+                                value={getStatusLabel(demande.status)} 
+                                severity={getStatusSeverity(demande.status)}
+                            />
+                        </div>
+                        
+                        <h6 className="mb-2">{demande.prenom} {demande.nom}</h6>
+                        <p className="text-sm text-600 mb-2">{demande.email}</p>
+                        <p className="font-bold mb-2">{demande.entreprise}</p>
+                        <p className="text-sm text-500 mb-3">{demande.secteurActivite}</p>
+                        
+                        <div className="flex align-items-center mb-3">
+                            <ProgressBar 
+                                value={demande.pourcentageCompletion || 0} 
+                                className="flex-1 mr-2"
+                                style={{ height: '6px' }}
+                            />
+                            <span className="text-sm">{demande.pourcentageCompletion || 0}%</span>
+                        </div>
+                        
+                        <div className="flex justify-content-between">
+                            <Button 
+                                icon="pi pi-eye" 
+                                size="small" 
+                                outlined
+                                onClick={() => {
+                                    setSelectedDemande(demande);
+                                    setDetailDialog(true);
+                                }}
+                            />
+                            {demande.status === 'PENDING' && (
+                                <div className="flex gap-1">
+                                    <Button 
+                                        icon="pi pi-check" 
+                                        size="small" 
+                                        severity="success"
+                                        onClick={() => openValidationDialog(demande, 'APPROVE')}
+                                    />
+                                    <Button 
+                                        icon="pi pi-times" 
+                                        size="small" 
+                                        severity="danger"
+                                        onClick={() => openValidationDialog(demande, 'REJECT')}
+                                    />
+                                </div>
+                            )}
+                        </div>
+                    </Card>
+                </div>
+            ))}
+        </div>
+    );
+
+    const renderTimelineView = () => (
+        <Card>
+            <Timeline 
+                value={filteredDemandes}
+                content={(item) => (
+                    <Card className="ml-3">
+                        <div className="flex align-items-center justify-content-between mb-2">
+                            <div className="flex align-items-center">
+                                <Avatar 
+                                    label={item.prenom.charAt(0) + item.nom.charAt(0)} 
+                                    className="mr-2" 
+                                    size="normal"
+                                />
+                                <div>
+                                    <div className="font-bold">{item.prenom} {item.nom}</div>
+                                    <div className="text-sm text-600">{item.entreprise}</div>
+                                </div>
+                            </div>
+                            <Tag 
+                                value={getStatusLabel(item.status)} 
+                                severity={getStatusSeverity(item.status)}
+                            />
+                        </div>
+                        
+                        <div className="text-sm text-500 mb-2">
+                            {new Date(item.dateCreation).toLocaleDateString('fr-FR')}
+                        </div>
+                        
+                        <div className="flex justify-content-end gap-2">
+                            <Button 
+                                icon="pi pi-eye" 
+                                size="small" 
+                                text
+                                onClick={() => {
+                                    setSelectedDemande(item);
+                                    setDetailDialog(true);
+                                }}
+                            />
+                        </div>
+                    </Card>
+                )}
+                className="w-full"
+            />
+        </Card>
+    );
+
+    const sectorFilterTemplate = (options: any) => (
+        <Dropdown 
+            value={options.value} 
+            options={sectorOptions} 
+            onChange={(e) => options.filterCallback(e.value)} 
+            placeholder="Tous" 
+            className="p-column-filter" 
+            showClear 
+        />
+    );
+
+    const statusFilterTemplate = (options: any) => (
+        <Dropdown 
+            value={options.value} 
+            options={statusOptions} 
+            onChange={(e) => options.filterCallback(e.value)} 
+            placeholder="Tous" 
+            className="p-column-filter" 
+            showClear 
+        />
+    );
+
+    const dateFilterTemplate = (options: any) => (
+        <Calendar 
+            value={options.value} 
+            onChange={(e) => options.filterCallback(e.value)} 
+            placeholder="Sélectionner" 
+            className="p-column-filter" 
+            showIcon 
+        />
+    );
+
+    const riskScoreTemplate = (rowData: DemandeAcces) => {
+        const score = Math.floor(Math.random() * 40) + 30; // Score entre 30-70
+        const getSeverity = () => {
+            if (score >= 60) return 'danger';
+            if (score >= 40) return 'warning';
+            return 'success';
+        };
+        
+        return (
+            <div className="flex align-items-center">
+                <Badge value={score} severity={getSeverity()} className="mr-2" />
+                <div className="w-4rem">
+                    <ProgressBar value={score} style={{ height: '4px' }} />
+                </div>
+            </div>
+        );
+    };
+
+    return (
+        <div className="access-requests-management">
+            <BlockUI blocked={blocked}>
+                <Toast ref={toast} />
+                <Messages ref={messages} />
+                <ConfirmDialog />
+                
+                {advancedToolbar}
+                
+                {exportProgress > 0 && exportProgress < 100 && (
+                    <Card className="mb-4">
+                        <div className="flex align-items-center gap-3">
+                            <i className="pi pi-spin pi-download text-blue-500" />
+                            <div className="flex-1">
+                                <p className="m-0 font-bold">Export en cours...</p>
+                                <ProgressBar value={exportProgress} className="mt-2" />
+                            </div>
+                        </div>
+                    </Card>
+                )}
+                
+                <TabView activeIndex={activeTab} onTabChange={(e) => setActiveTab(e.index)}>
+                    <TabPanel header="Demandes" leftIcon="pi pi-list mr-2">
+                        {renderKPIDashboard()}
+                        {renderQuickFilters()}
+                        {searchToolbar}
+                        
+                        {viewMode === 'table' && renderTableView()}
+                        {viewMode === 'grid' && renderGridView()}
+                        {viewMode === 'timeline' && renderTimelineView()}
+                    </TabPanel>
+                    
+                    <TabPanel header="Workflow" leftIcon="pi pi-sitemap mr-2">
+                        <Card title="Processus d'approbation">
+                            <Steps 
+                                model={workflowSteps} 
+                                activeIndex={2}
+                                className="mb-4"
+                            />
+                            
+                            <div className="grid">
+                                <div className="col-12 md:col-6">
+                                    <h6>File d'attente de traitement</h6>
+                                    <DataView 
+                                        value={processingQueue}
+                                        itemTemplate={(item) => (
+                                            <div className="p-3 border-bottom-1 surface-border">
+                                                <div className="flex align-items-center justify-content-between">
+                                                    <div>
+                                                        <div className="font-bold">{item.entreprise}</div>
+                                                        <div className="text-sm text-600">{item.prenom} {item.nom}</div>
+                                                    </div>
+                                                    <Badge value="En cours" severity="info" />
+                                                </div>
+                                            </div>
+                                        )}
+                                        emptyMessage="Aucune demande en cours de traitement"
+                                    />
+                                </div>
+                                
+                                <div className="col-12 md:col-6">
+                                    <h6>Règles de validation</h6>
+                                    {validationCriteria.map((criteria, index) => (
+                                        <div key={index} className="flex align-items-center justify-content-between mb-2 p-2 border-round bg-gray-50">
+                                            <span className="text-sm">{criteria.name}</span>
+                                            <div className="flex align-items-center gap-2">
+                                                <Badge value={`${criteria.weight}%`} />
+                                                <Tag 
+                                                    value={criteria.status} 
+                                                    severity={
+                                                        criteria.status === 'complete' ? 'success' :
+                                                        criteria.status === 'incomplete' ? 'danger' : 'warning'
+                                                    }
+                                                />
+                                            </div>
+                                        </div>
+                                    ))}
+                                </div>
+                            </div>
+                        </Card>
+                    </TabPanel>
+                    
+                    <TabPanel header="Analytics" leftIcon="pi pi-chart-bar mr-2">
+                        <div className="grid">
+                            <div className="col-12 md:col-8">
+                                <Card title="Tendances des demandes">
+                                    <Chart type="bar" data={chartData} className="w-full" />
+                                </Card>
+                            </div>
+                            
+                            <div className="col-12 md:col-4">
+                                <Card title="Répartition par secteur">
+                                    <Chart 
+                                        type="doughnut" 
+                                        data={{
+                                            labels: ['BTP Général', 'Électricité', 'Plomberie', 'Autres'],
+                                            datasets: [{
+                                                data: [45, 25, 20, 10],
+                                                backgroundColor: ['#3B82F6', '#10B981', '#F59E0B', '#8B5CF6']
+                                            }]
+                                        }}
+                                        options={{
+                                            plugins: {
+                                                legend: { position: 'bottom' }
+                                            }
+                                        }}
+                                    />
+                                </Card>
+                            </div>
+                            
+                            <div className="col-12">
+                                <Card title="Activité récente">
+                                    <Timeline 
+                                        value={timelineData}
+                                        content={(item) => (
+                                            <div className="flex align-items-center">
+                                                <Badge 
+                                                    value={item.type} 
+                                                    severity={
+                                                        item.type === 'success' ? 'success' :
+                                                        item.type === 'warning' ? 'warning' : 'info'
+                                                    }
+                                                    className="mr-2"
+                                                />
+                                                <div>
+                                                    <div className="font-bold">{item.event}</div>
+                                                    <div className="text-sm text-600">{item.user} - {item.date.toLocaleTimeString()}</div>
+                                                </div>
+                                            </div>
+                                        )}
+                                    />
+                                </Card>
+                            </div>
+                        </div>
+                    </TabPanel>
+                    
+                    <TabPanel header="Audit" leftIcon="pi pi-shield mr-2">
+                        <Card>
+                            <Terminal 
+                                ref={terminal}
+                                welcomeMessage="Console d'audit - Tapez 'help' pour les commandes disponibles"
+                                prompt="audit $"
+                                className="bg-gray-900 text-white"
+                            />
+                        </Card>
+                    </TabPanel>
+                </TabView>
+                
+                <SpeedDial 
+                    model={bulkActions}
+                    radius={80}
+                    type="semi-circle"
+                    direction="up-left"
+                    style={{ left: 'calc(50% - 2rem)', bottom: 0 }}
+                    buttonClassName="p-button-help"
+                    maskClassName="bg-black-alpha-30"
+                    visible={selectedDemandes.length > 0}
+                />
+                
+                <OverlayPanel ref={overlayPanel}>
+                    <div className="flex flex-column gap-2">
+                        {bulkActions.map((action, index) => (
+                            <Button 
+                                key={index}
+                                label={action.label}
+                                icon={action.icon}
+                                text
+                                className="justify-content-start"
+                                onClick={() => {
+                                    action.command();
+                                    overlayPanel.current?.hide();
+                                }}
+                            />
+                        ))}
+                    </div>
+                </OverlayPanel>
+                
+                <ContextMenu 
+                    ref={contextMenu}
+                    model={[
+                        { label: 'Voir détails', icon: 'pi pi-eye', command: () => setDetailDialog(true) },
+                        { label: 'Approuver', icon: 'pi pi-check', command: () => openValidationDialog(selectedDemande, 'APPROVE') },
+                        { label: 'Rejeter', icon: 'pi pi-times', command: () => openValidationDialog(selectedDemande, 'REJECT') },
+                        { separator: true },
+                        { label: 'Dupliquer', icon: 'pi pi-copy' },
+                        { label: 'Exporter', icon: 'pi pi-download' }
+                    ]}
+                />
+                
+                <Sidebar 
+                    visible={sidebarVisible} 
+                    onHide={() => setSidebarVisible(false)}
+                    position="right"
+                    className="w-25rem"
+                >
+                    <h3>Configuration avancée</h3>
+                    
+                    <Accordion multiple>
+                        <AccordionTab header="Paramètres d'affichage">
+                            <div className="field">
+                                <label>Mode d'affichage</label>
+                                <SelectButton 
+                                    value={viewMode} 
+                                    options={viewModeOptions} 
+                                    onChange={(e) => setViewMode(e.value)}
+                                    optionLabel="label"
+                                    optionValue="value"
+                                    className="w-full mt-2"
+                                />
+                            </div>
+                            
+                            <div className="field">
+                                <div className="flex align-items-center gap-2">
+                                    <InputSwitch 
+                                        checked={autoRefresh} 
+                                        onChange={(e) => setAutoRefresh(e.value)}
+                                    />
+                                    <label>Auto-refresh</label>
+                                </div>
+                            </div>
+                            
+                            <div className="field">
+                                <label>Intervalle de refresh (secondes)</label>
+                                <Slider 
+                                    value={refreshInterval} 
+                                    onChange={(e) => setRefreshInterval(e.value as number)}
+                                    min={10} 
+                                    max={300} 
+                                    step={10}
+                                    className="w-full mt-2"
+                                />
+                            </div>
+                        </AccordionTab>
+                        
+                        <AccordionTab header="Notifications">
+                            <div className="field">
+                                <div className="flex align-items-center gap-2 mb-2">
+                                    <Checkbox checked />
+                                    <label>Nouvelles demandes</label>
+                                </div>
+                                <div className="flex align-items-center gap-2 mb-2">
+                                    <Checkbox checked />
+                                    <label>Demandes approuvées</label>
+                                </div>
+                                <div className="flex align-items-center gap-2">
+                                    <Checkbox checked={false} onChange={() => {}} />
+                                    <label>Demandes en retard</label>
+                                </div>
+                            </div>
+                        </AccordionTab>
+                        
+                        <AccordionTab header="Validation automatique">
+                            <div className="field">
+                                <div className="flex align-items-center gap-2 mb-3">
+                                    <InputSwitch checked={complianceCheck} onChange={(e) => setComplianceCheck(e.value)} />
+                                    <label>Vérification conformité</label>
+                                </div>
+                                
+                                <div className="field">
+                                    <label>Seuil de risque</label>
+                                    <Knob 
+                                        value={riskScore} 
+                                        onChange={(e) => setRiskScore(e.value)}
+                                        min={0} 
+                                        max={100}
+                                        size={80}
+                                        className="mt-2"
+                                    />
+                                </div>
+                            </div>
+                        </AccordionTab>
+                    </Accordion>
+                </Sidebar>
+                
+                <ScrollTop threshold={600} className="w-3rem h-3rem border-round bg-primary" />
+
+                {/* Dialog de détails ultra-avancé */}
+                <Dialog
+                    visible={detailDialog}
+                    onHide={() => setDetailDialog(false)}
+                    header={(
+                        <div className="flex align-items-center gap-3">
+                            <Avatar 
+                                label={selectedDemande?.prenom?.charAt(0) + selectedDemande?.nom?.charAt(0)} 
+                                size="large"
+                                style={{ backgroundColor: '#3B82F6', color: 'white' }}
+                            />
+                            <div>
+                                <div className="text-lg font-bold">Détails de la demande d'accès</div>
+                                <div className="text-sm text-600">
+                                    {selectedDemande?.entreprise} - {selectedDemande?.secteurActivite}
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                    style={{ width: '95vw', maxWidth: '1200px', height: '90vh' }}
+                    modal
+                    maximizable
+                >
+                    {selectedDemande && (
+                        <Splitter style={{ height: '70vh' }}>
+                            <SplitterPanel size={70}>
+                                <ScrollPanel style={{ width: '100%', height: '100%' }}>
+                                    <TabView>
+                                        <TabPanel header="Informations générales" leftIcon="pi pi-user mr-2">
+                                            <div className="grid">
+                                                <div className="col-12 md:col-6">
+                                                    <Fieldset legend="Contact">
+                                                        <div className="grid">
+                                                            <div className="col-6">
+                                                                <div className="field">
+                                                                    <label className="font-bold text-sm">Prénom</label>
+                                                                    <InputText value={selectedDemande.prenom} disabled className="w-full" />
+                                                                </div>
+                                                            </div>
+                                                            <div className="col-6">
+                                                                <div className="field">
+                                                                    <label className="font-bold text-sm">Nom</label>
+                                                                    <InputText value={selectedDemande.nom} disabled className="w-full" />
+                                                                </div>
+                                                            </div>
+                                                            <div className="col-12">
+                                                                <div className="field">
+                                                                    <label className="font-bold text-sm">Email</label>
+                                                                    <InputText value={selectedDemande.email} disabled className="w-full" />
+                                                                </div>
+                                                            </div>
+                                                            <div className="col-12">
+                                                                <div className="field">
+                                                                    <label className="font-bold text-sm">Téléphone</label>
+                                                                    <InputText value={selectedDemande.telephone} disabled className="w-full" />
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </Fieldset>
+                                                </div>
+                                                
+                                                <div className="col-12 md:col-6">
+                                                    <Fieldset legend="Entreprise">
+                                                        <div className="grid">
+                                                            <div className="col-12">
+                                                                <div className="field">
+                                                                    <label className="font-bold text-sm">Raison sociale</label>
+                                                                    <InputText value={selectedDemande.entreprise} disabled className="w-full" />
+                                                                </div>
+                                                            </div>
+                                                            <div className="col-8">
+                                                                <div className="field">
+                                                                    <label className="font-bold text-sm">SIRET</label>
+                                                                    <InputText value={selectedDemande.siret} disabled className="w-full" />
+                                                                </div>
+                                                            </div>
+                                                            <div className="col-4">
+                                                                <div className="field">
+                                                                    <label className="font-bold text-sm">Effectif</label>
+                                                                    <InputNumber value={selectedDemande.effectif} disabled className="w-full" />
+                                                                </div>
+                                                            </div>
+                                                            <div className="col-12">
+                                                                <div className="field">
+                                                                    <label className="font-bold text-sm">Secteur d'activité</label>
+                                                                    <InputText value={selectedDemande.secteurActivite} disabled className="w-full" />
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </Fieldset>
+                                                </div>
+                                            </div>
+                                        </TabPanel>
+                                        
+                                        <TabPanel header="Documents" leftIcon="pi pi-file mr-2">
+                                            <div className="grid">
+                                                <div className="col-12">
+                                                    <Card title="État des documents">
+                                                        <div className="grid">
+                                                            <div className="col-12 md:col-3">
+                                                                <div className="text-center p-3 border-round bg-gray-50">
+                                                                    <i className={`pi ${selectedDemande.kbisUploade ? 'pi-check-circle text-green-500' : 'pi-times-circle text-red-500'} text-4xl mb-2`}></i>
+                                                                    <div className="font-bold">KBIS</div>
+                                                                    <Tag 
+                                                                        value={selectedDemande.kbisUploade ? 'Fourni' : 'Manquant'} 
+                                                                        severity={selectedDemande.kbisUploade ? 'success' : 'danger'}
+                                                                        className="mt-2"
+                                                                    />
+                                                                </div>
+                                                            </div>
+                                                            <div className="col-12 md:col-3">
+                                                                <div className="text-center p-3 border-round bg-gray-50">
+                                                                    <i className={`pi ${selectedDemande.assuranceRCUploade ? 'pi-check-circle text-green-500' : 'pi-times-circle text-red-500'} text-4xl mb-2`}></i>
+                                                                    <div className="font-bold">Assurance RC</div>
+                                                                    <Tag 
+                                                                        value={selectedDemande.assuranceRCUploade ? 'Fournie' : 'Manquante'} 
+                                                                        severity={selectedDemande.assuranceRCUploade ? 'success' : 'danger'}
+                                                                        className="mt-2"
+                                                                    />
+                                                                </div>
+                                                            </div>
+                                                            <div className="col-12 md:col-3">
+                                                                <div className="text-center p-3 border-round bg-gray-50">
+                                                                    <i className={`pi ${selectedDemande.assuranceDecennaleUploade ? 'pi-check-circle text-green-500' : 'pi-times-circle text-red-500'} text-4xl mb-2`}></i>
+                                                                    <div className="font-bold">Décennale</div>
+                                                                    <Tag 
+                                                                        value={selectedDemande.assuranceDecennaleUploade ? 'Fournie' : 'Manquante'} 
+                                                                        severity={selectedDemande.assuranceDecennaleUploade ? 'success' : 'danger'}
+                                                                        className="mt-2"
+                                                                    />
+                                                                </div>
+                                                            </div>
+                                                            <div className="col-12 md:col-3">
+                                                                <div className="text-center p-3 border-round bg-gray-50">
+                                                                    <i className={`pi ${selectedDemande.attestationUrssafUploade ? 'pi-check-circle text-green-500' : 'pi-times-circle text-red-500'} text-4xl mb-2`}></i>
+                                                                    <div className="font-bold">URSSAF</div>
+                                                                    <Tag 
+                                                                        value={selectedDemande.attestationUrssafUploade ? 'Fournie' : 'Manquante'} 
+                                                                        severity={selectedDemande.attestationUrssafUploade ? 'success' : 'danger'}
+                                                                        className="mt-2"
+                                                                    />
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        
+                                                        <Divider />
+                                                        
+                                                        <div className="flex align-items-center justify-content-between">
+                                                            <div>
+                                                                <label className="font-bold">Progression globale</label>
+                                                                <div className="text-sm text-600">Complétude du dossier</div>
+                                                            </div>
+                                                            <div className="text-center">
+                                                                <Knob 
+                                                                    value={selectedDemande.pourcentageCompletion || 0} 
+                                                                    readOnly 
+                                                                    size={60}
+                                                                    strokeWidth={8}
+                                                                />
+                                                            </div>
+                                                        </div>
+                                                    </Card>
+                                                </div>
+                                            </div>
+                                        </TabPanel>
+                                        
+                                        <TabPanel header="Historique" leftIcon="pi pi-history mr-2">
+                                            <Timeline 
+                                                value={[
+                                                    { date: selectedDemande.dateCreation, event: 'Demande soumise', status: 'info' },
+                                                    { date: selectedDemande.dateModification, event: 'Documents vérifiés', status: 'success' },
+                                                    { date: selectedDemande.dateTraitement, event: 'En cours de validation', status: 'warning' }
+                                                ].filter(item => item.date)}
+                                                content={(item) => (
+                                                    <div className="flex align-items-center">
+                                                        <Badge 
+                                                            value={item.status} 
+                                                            severity={item.status === 'success' ? 'success' : item.status === 'warning' ? 'warning' : 'info'}
+                                                            className="mr-2"
+                                                        />
+                                                        <div>
+                                                            <div className="font-bold">{item.event}</div>
+                                                            <div className="text-sm text-600">{new Date(item.date).toLocaleString('fr-FR')}</div>
+                                                        </div>
+                                                    </div>
+                                                )}
+                                            />
+                                        </TabPanel>
+                                        
+                                        <TabPanel header="Analyse" leftIcon="pi pi-chart-line mr-2">
+                                            <div className="grid">
+                                                <div className="col-12 md:col-6">
+                                                    <Card title="Score de conformité">
+                                                        <div className="text-center">
+                                                            <Rating 
+                                                                value={4} 
+                                                                readOnly 
+                                                                stars={5} 
+                                                                className="mb-3"
+                                                            />
+                                                            <div className="text-lg font-bold text-green-600">Excellent</div>
+                                                            <div className="text-sm text-600">Toutes les exigences sont respectées</div>
+                                                        </div>
+                                                    </Card>
+                                                </div>
+                                                
+                                                <div className="col-12 md:col-6">
+                                                    <Card title="Recommandations IA">
+                                                        <div className="flex flex-column gap-2">
+                                                            <Message 
+                                                                severity="success" 
+                                                                text="Dossier complet - Approbation recommandée"
+                                                                className="w-full"
+                                                            />
+                                                            <Message 
+                                                                severity="info" 
+                                                                text="Entreprise avec historique positif"
+                                                                className="w-full"
+                                                            />
+                                                            <Message 
+                                                                severity="warn" 
+                                                                text="Vérifier la validité des assurances"
+                                                                className="w-full"
+                                                            />
+                                                        </div>
+                                                    </Card>
+                                                </div>
+                                            </div>
+                                        </TabPanel>
+                                    </TabView>
+                                </ScrollPanel>
+                            </SplitterPanel>
+                            
+                            <SplitterPanel size={30}>
+                                <ScrollPanel style={{ width: '100%', height: '100%' }}>
+                                    <div className="p-3">
+                                        <h6>Actions rapides</h6>
+                                        
+                                        <div className="flex flex-column gap-2 mb-4">
+                                            <Button 
+                                                label="Approuver" 
+                                                icon="pi pi-check" 
+                                                severity="success"
+                                                className="w-full"
+                                                onClick={() => openValidationDialog(selectedDemande, 'APPROVE')}
+                                            />
+                                            <Button 
+                                                label="Rejeter" 
+                                                icon="pi pi-times" 
+                                                severity="danger"
+                                                className="w-full"
+                                                onClick={() => openValidationDialog(selectedDemande, 'REJECT')}
+                                            />
+                                            <Button 
+                                                label="Demander complément" 
+                                                icon="pi pi-exclamation-triangle" 
+                                                severity="warning"
+                                                className="w-full"
+                                                outlined
+                                            />
+                                            <Button 
+                                                label="Programmer entretien" 
+                                                icon="pi pi-calendar" 
+                                                className="w-full"
+                                                outlined
+                                            />
+                                        </div>
+                                        
+                                        <Divider />
+                                        
+                                        <h6>Informations système</h6>
+                                        <div className="text-sm text-600 mb-2">
+                                            <div><strong>ID:</strong> {selectedDemande.id}</div>
+                                            <div><strong>Créée le:</strong> {new Date(selectedDemande.dateCreation).toLocaleDateString('fr-FR')}</div>
+                                            <div><strong>Statut:</strong> {getStatusLabel(selectedDemande.status)}</div>
+                                            {selectedDemande.validateurNom && (
+                                                <div><strong>Validateur:</strong> {selectedDemande.validateurNom}</div>
+                                            )}
+                                        </div>
+                                        
+                                        <Divider />
+                                        
+                                        {selectedDemande.commentaireDemandeur && (
+                                            <div className="mb-3">
+                                                <h6>Commentaire demandeur</h6>
+                                                <Panel>
+                                                    <p className="text-sm">{selectedDemande.commentaireDemandeur}</p>
+                                                </Panel>
+                                            </div>
+                                        )}
+                                        
+                                        {selectedDemande.commentaireAdmin && (
+                                            <div>
+                                                <h6>Commentaire admin</h6>
+                                                <Panel>
+                                                    <p className="text-sm">{selectedDemande.commentaireAdmin}</p>
+                                                    {selectedDemande.validateurNom && (
+                                                        <div className="text-xs text-500 mt-2">Par: {selectedDemande.validateurNom}</div>
+                                                    )}
+                                                </Panel>
+                                            </div>
+                                        )}
+                                    </div>
+                                </ScrollPanel>
+                            </SplitterPanel>
+                        </Splitter>
+                    )}
+                </Dialog>
+
+                {/* Dialog de validation amélioré */}
+                <Dialog
+                    visible={validationDialog}
+                    onHide={() => setValidationDialog(false)}
+                    header={(
+                        <div className="flex align-items-center gap-2">
+                            <i className={`pi ${actionType === 'APPROVE' ? 'pi-check text-green-500' : 'pi-times text-red-500'} text-xl`} />
+                            <span>{actionType === 'APPROVE' ? 'Approuver' : 'Rejeter'} la demande</span>
+                        </div>
+                    )}
+                    style={{ width: '500px' }}
+                    modal
+                >
+                    <div className="formgrid grid">
+                        <div className="field col-12">
+                            <Message 
+                                severity={actionType === 'APPROVE' ? 'success' : 'warn'}
+                                text={actionType === 'APPROVE' 
+                                    ? 'Cette action accordera l\'accès à l\'entreprise' 
+                                    : 'Cette action refusera définitivement l\'accès'}
+                                className="w-full mb-3"
+                            />
+                        </div>
+                        
+                        <div className="field col-12">
+                            <label htmlFor="commentaire" className="font-bold">
+                                Commentaire {actionType === 'REJECT' ? '(obligatoire)' : ''}
+                            </label>
+                            <InputTextarea
+                                id="commentaire"
+                                value={commentaire}
+                                onChange={(e) => setCommentaire(e.target.value)}
+                                rows={4}
+                                placeholder={actionType === 'APPROVE' 
+                                    ? 'Commentaire d\'approbation...' 
+                                    : 'Motif du rejet...'
+                                }
+                                className="w-full"
+                                autoResize
+                            />
+                        </div>
+                        
+                        {actionType === 'APPROVE' && (
+                            <div className="field col-12">
+                                <div className="flex align-items-center gap-2">
+                                    <Checkbox checked />
+                                    <label className="text-sm">Envoyer un email de bienvenue</label>
+                                </div>
+                                <div className="flex align-items-center gap-2 mt-2">
+                                    <Checkbox checked={false} onChange={() => {}} />
+                                    <label className="text-sm">Programmer une formation</label>
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                    
+                    <div className="flex justify-content-end gap-2 mt-4">
+                        <Button
+                            label="Annuler"
+                            icon="pi pi-times"
+                            outlined
+                            onClick={() => setValidationDialog(false)}
+                        />
+                        <Button
+                            label={actionType === 'APPROVE' ? 'Approuver' : 'Rejeter'}
+                            icon={actionType === 'APPROVE' ? 'pi pi-check' : 'pi pi-times'}
+                            severity={actionType === 'APPROVE' ? 'success' : 'danger'}
+                            onClick={handleValidation}
+                            loading={loading}
+                        />
+                    </div>
+                </Dialog>
+            </BlockUI>
+        </div>
+    );
+};
+
+export default DemandesAccesAdmin;
+
+// Styles CSS personnalisés pour l'interface ultra-professionnelle
+const customStyles = `
+.access-requests-management .p-tabview-nav {
+    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+    border-radius: 10px 10px 0 0;
+}
+
+.access-requests-management .p-tabview-nav li .p-tabview-nav-link {
+    color: white;
+    border: none;
+}
+
+.access-requests-management .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 8px;
+    margin: 4px;
+}
+
+.view-mode-selector .p-button {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    color: white;
+}
+
+.view-mode-selector .p-button.p-highlight {
+    background: rgba(255, 255, 255, 0.3);
+}
+
+.p-datatable-striped .p-datatable-tbody > tr:nth-child(odd) {
+    background: rgba(0, 0, 0, 0.02);
+}
+
+.p-datatable .p-datatable-tbody > tr:hover {
+    background: rgba(59, 130, 246, 0.1);
+}
+
+.hover\\:shadow-lg:hover {
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    transition: box-shadow 0.3s ease;
+}
+
+.transition-shadow {
+    transition: box-shadow 0.3s ease;
+}
+
+.cursor-pointer {
+    cursor: pointer;
+}
+
+.bg-gradient-to-r {
+    background: linear-gradient(90deg, var(--tw-gradient-stops));
+}
+
+.from-blue-500 {
+    --tw-gradient-from: #3b82f6;
+    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(59, 130, 246, 0));
+}
+
+.to-purple-600 {
+    --tw-gradient-to: #9333ea;
+}
+
+.from-orange-500 {
+    --tw-gradient-from: #f97316;
+    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(249, 115, 22, 0));
+}
+
+.to-orange-600 {
+    --tw-gradient-to: #ea580c;
+}
+
+.from-green-500 {
+    --tw-gradient-from: #22c55e;
+    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(34, 197, 94, 0));
+}
+
+.to-green-600 {
+    --tw-gradient-to: #16a34a;
+}
+
+.from-purple-500 {
+    --tw-gradient-from: #a855f7;
+    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(168, 85, 247, 0));
+}
+
+.to-purple-600 {
+    --tw-gradient-to: #9333ea;
+}
+`;
+
+// Injection du style dans le document
+if (typeof document !== 'undefined') {
+    const style = document.createElement('style');
+    style.textContent = customStyles;
+    document.head.appendChild(style);
+}
+
+
+>>>>>>> 5ed9a80339c59d689b9655e8be1a68312d19d4a1
diff --git a/app/(main)/admin/parametres/page.tsx b/app/(main)/admin/parametres/page.tsx
index 24d8cb4..ff76a5e 100644
--- a/app/(main)/admin/parametres/page.tsx
+++ b/app/(main)/admin/parametres/page.tsx
@@ -1,3 +1,1706 @@
+<<<<<<< HEAD
+'use client';
+
+import React, { useState, useRef, useEffect } from 'react';
+import { useAuth } from '../../../../contexts/AuthContext';
+import ProtectedRoute from '../../../../components/auth/ProtectedRoute';
+import { Card } from 'primereact/card';
+import { Button } from 'primereact/button';
+import { InputText } from 'primereact/inputtext';
+import { InputTextarea } from 'primereact/inputtextarea';
+import { InputNumber } from 'primereact/inputnumber';
+import { InputSwitch } from 'primereact/inputswitch';
+import { Dropdown } from 'primereact/dropdown';
+import { Toast } from 'primereact/toast';
+import { TabView, TabPanel } from 'primereact/tabview';
+import { FileUpload } from 'primereact/fileupload';
+import { Divider } from 'primereact/divider';
+import { ColorPicker } from 'primereact/colorpicker';
+import { SelectButton } from 'primereact/selectbutton';
+import { Calendar } from 'primereact/calendar';
+import { Chip } from 'primereact/chip';
+import { ConfirmDialog, confirmDialog } from 'primereact/confirmdialog';
+import { Toolbar } from 'primereact/toolbar';
+import { SpeedDial } from 'primereact/speeddial';
+import { Panel } from 'primereact/panel';
+import { Accordion, AccordionTab } from 'primereact/accordion';
+import { Badge } from 'primereact/badge';
+import { Tag } from 'primereact/tag';
+import { Avatar } from 'primereact/avatar';
+import { AvatarGroup } from 'primereact/avatargroup';
+import { Knob } from 'primereact/knob';
+import { ProgressBar } from 'primereact/progressbar';
+import { Skeleton } from 'primereact/skeleton';
+import { Message } from 'primereact/message';
+import { Messages } from 'primereact/messages';
+import { Fieldset } from 'primereact/fieldset';
+import { ScrollPanel } from 'primereact/scrollpanel';
+import { Splitter, SplitterPanel } from 'primereact/splitter';
+import { DataView } from 'primereact/dataview';
+import { Timeline } from 'primereact/timeline';
+import { Steps } from 'primereact/steps';
+import { MenuItem } from 'primereact/menuitem';
+import { Menu } from 'primereact/menu';
+import { TieredMenu } from 'primereact/tieredmenu';
+import { ContextMenu } from 'primereact/contextmenu';
+import { Sidebar } from 'primereact/sidebar';
+import { OverlayPanel } from 'primereact/overlaypanel';
+import { Dialog } from 'primereact/dialog';
+import { Rating } from 'primereact/rating';
+import { Slider } from 'primereact/slider';
+import { ToggleButton } from 'primereact/togglebutton';
+import { MultiSelect } from 'primereact/multiselect';
+import { Checkbox } from 'primereact/checkbox';
+import { RadioButton } from 'primereact/radiobutton';
+import { ListBox } from 'primereact/listbox';
+import { InputMask } from 'primereact/inputmask';
+import { AutoComplete } from 'primereact/autocomplete';
+import { Password } from 'primereact/password';
+import { BlockUI } from 'primereact/blockui';
+import { PickList } from 'primereact/picklist';
+import { OrderList } from 'primereact/orderlist';
+import { DataScroller } from 'primereact/datascroller';
+import { VirtualScroller } from 'primereact/virtualscroller';
+import { Galleria } from 'primereact/galleria';
+import { Image } from 'primereact/image';
+import { Carousel } from 'primereact/carousel';
+import { Chart } from 'primereact/chart';
+import { Terminal } from 'primereact/terminal';
+import { DeferredContent } from 'primereact/deferredcontent';
+import { ScrollTop } from 'primereact/scrolltop';
+import { CascadeSelect } from 'primereact/cascadeselect';
+import { TreeSelect } from 'primereact/treeselect';
+import { Mention } from 'primereact/mention';
+import { Editor } from 'primereact/editor';
+import { Tree } from 'primereact/tree';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+
+interface CompanySettings {
+    nom: string;
+    adresse: string;
+    telephone: string;
+    email: string;
+    siteWeb: string;
+    numeroTVA: string;
+    numeroSiret: string;
+    capitalSocial: number;
+    formeJuridique: string;
+    logo: string;
+}
+
+interface InvoiceSettings {
+    prefixFacture: string;
+    prefixDevis: string;
+    prochainNumeroFacture: number;
+    prochainNumeroDevis: number;
+    tauxTVADefaut: number;
+    conditionsPaiement: string;
+    mentionsLegales: string;
+    delaiPaiementDefaut: number;
+    penalitesRetard: number;
+}
+
+interface EmailSettings {
+    serveurSMTP: string;
+    portSMTP: number;
+    utilisateurSMTP: string;
+    motDePasseSMTP: string;
+    expediteurDefaut: string;
+    useTLS: boolean;
+    emailsNotification: string[];
+}
+
+interface SystemSettings {
+    langue: string;
+    fuseau: string;
+    deviseDefaut: string;
+    formatDate: string;
+    formatHeure: string;
+    theme: string;
+    couleurPrimaire: string;
+    activerNotifications: boolean;
+    activerRappels: boolean;
+    delaiRappelFacture: number;
+    delaiRappelDevis: number;
+}
+
+interface BackupSettings {
+    sauvegardeAuto: boolean;
+    frequenceSauvegarde: string;
+    heureSauvegarde: Date;
+    retention: number;
+    destination: string;
+    chiffrementActif: boolean;
+}
+
+const ParametresPage = () => {
+    const [activeIndex, setActiveIndex] = useState(0);
+    const [loading, setLoading] = useState(false);
+    const [blocked, setBlocked] = useState(false);
+    const [darkMode, setDarkMode] = useState(false);
+    const [compactMode, setCompactMode] = useState(false);
+    const [expertMode, setExpertMode] = useState(false);
+    const [autoSave, setAutoSave] = useState(true);
+    const [settingsHistory, setSettingsHistory] = useState([]);
+    const [lastSaved, setLastSaved] = useState<Date | null>(null);
+    const [unsavedChanges, setUnsavedChanges] = useState(false);
+    const [configProfile, setConfigProfile] = useState('standard');
+    const [performanceLevel, setPerformanceLevel] = useState(75);
+    const [securityScore, setSecurityScore] = useState(85);
+    const [systemHealth, setSystemHealth] = useState(92);
+    const [backupProgress, setBackupProgress] = useState(0);
+    const [exportProgress, setExportProgress] = useState(0);
+    const [sidebarVisible, setSidebarVisible] = useState(false);
+    const [helpVisible, setHelpVisible] = useState(false);
+    const [historyVisible, setHistoryVisible] = useState(false);
+    const [configWizard, setConfigWizard] = useState(false);
+    const [wizardStep, setWizardStep] = useState(0);
+    const [autoRefresh, setAutoRefresh] = useState(true);
+    const [refreshInterval, setRefreshInterval] = useState(30);
+    const [notifications, setNotifications] = useState([]);
+    const [searchTerm, setSearchTerm] = useState('');
+    const [filteredSettings, setFilteredSettings] = useState([]);
+    const [settingsComparison, setSettingsComparison] = useState(false);
+    const [recommendedSettings, setRecommendedSettings] = useState([]);
+    const [quickActions, setQuickActions] = useState([]);
+    
+    const toast = useRef<Toast>(null);
+    const messages = useRef<Messages>(null);
+    const overlayPanel = useRef<OverlayPanel>(null);
+    const contextMenu = useRef<ContextMenu>(null);
+    const tieredMenu = useRef<TieredMenu>(null);
+    const terminal = useRef<Terminal>(null);
+
+    // TODO: Charger les paramètres de l'entreprise depuis l'API
+    // Exemple: useEffect(() => { fetch('/api/admin/company-settings').then(res => res.json()).then(setCompanySettings); }, []);
+    const [companySettings, setCompanySettings] = useState<CompanySettings>({
+        nom: '',
+        adresse: '',
+        telephone: '',
+        email: '',
+        siteWeb: '',
+        numeroTVA: '',
+        numeroSiret: '',
+        capitalSocial: 0,
+        formeJuridique: '',
+        logo: ''
+    });
+
+    // TODO: Charger les paramètres de facturation depuis l'API
+    const [invoiceSettings, setInvoiceSettings] = useState<InvoiceSettings>({
+        prefixFacture: '',
+        prefixDevis: '',
+        prochainNumeroFacture: 0,
+        prochainNumeroDevis: 0,
+        tauxTVADefaut: 0,
+        conditionsPaiement: '',
+        mentionsLegales: '',
+        delaiPaiementDefaut: 0,
+        penalitesRetard: 0
+    });
+
+    // TODO: Charger les paramètres email depuis l'API
+    const [emailSettings, setEmailSettings] = useState<EmailSettings>({
+        serveurSMTP: '',
+        portSMTP: 0,
+        utilisateurSMTP: '',
+        motDePasseSMTP: '',
+        expediteurDefaut: '',
+        useTLS: false,
+        emailsNotification: []
+    });
+
+    // TODO: Charger les paramètres système depuis l'API
+    const [systemSettings, setSystemSettings] = useState<SystemSettings>({
+        langue: '',
+        fuseau: '',
+        deviseDefaut: '',
+        formatDate: '',
+        formatHeure: '',
+        theme: '',
+        couleurPrimaire: '',
+        activerNotifications: false,
+        activerRappels: false,
+        delaiRappelFacture: 0,
+        delaiRappelDevis: 0
+    });
+
+    // TODO: Charger les paramètres de sauvegarde depuis l'API
+    const [backupSettings, setBackupSettings] = useState<BackupSettings>({
+        sauvegardeAuto: false,
+        frequenceSauvegarde: '',
+        heureSauvegarde: new Date(),
+        retention: 0,
+        destination: '',
+        chiffrementActif: false
+    });
+
+    const formesJuridiques = [
+        { label: 'SARL', value: 'SARL' },
+        { label: 'SAS', value: 'SAS' },
+        { label: 'SA', value: 'SA' },
+        { label: 'EURL', value: 'EURL' },
+        { label: 'Auto-entrepreneur', value: 'AUTO' },
+        { label: 'Autre', value: 'AUTRE' }
+    ];
+
+    const langues = [
+        { label: 'Français', value: 'fr' },
+        { label: 'English', value: 'en' },
+        { label: 'Español', value: 'es' },
+        { label: 'Deutsch', value: 'de' }
+    ];
+
+    const fuseaux = [
+        { label: 'Europe/Paris', value: 'Europe/Paris' },
+        { label: 'Europe/London', value: 'Europe/London' },
+        { label: 'America/New_York', value: 'America/New_York' },
+        { label: 'Asia/Tokyo', value: 'Asia/Tokyo' }
+    ];
+
+    const devises = [
+        { label: 'Euro (EUR)', value: 'EUR' },
+        { label: 'Dollar US (USD)', value: 'USD' },
+        { label: 'Livre Sterling (GBP)', value: 'GBP' },
+        { label: 'Franc CFA (XOF)', value: 'XOF' }
+    ];
+
+    const themes = [
+        { label: 'Clair', value: 'light', icon: 'sun' },
+        { label: 'Sombre', value: 'dark', icon: 'moon' },
+        { label: 'Auto', value: 'auto', icon: 'adjust' },
+        { label: 'Contraste élevé', value: 'contrast', icon: 'eye' },
+        { label: 'Mode nuit', value: 'night', icon: 'moon' }
+    ];
+
+    const configProfiles = [
+        { label: 'Basique', value: 'basic', description: 'Configuration simplifiée' },
+        { label: 'Standard', value: 'standard', description: 'Configuration recommandée' },
+        { label: 'Avancé', value: 'advanced', description: 'Toutes les options' },
+        { label: 'Expert', value: 'expert', description: 'Configuration complète' },
+        { label: 'Personnalisé', value: 'custom', description: 'Configuration sur mesure' }
+    ];
+
+    const wizardSteps = [
+        { label: 'Entreprise', icon: 'pi pi-building' },
+        { label: 'Utilisateurs', icon: 'pi pi-users' },
+        { label: 'Sécurité', icon: 'pi pi-shield' },
+        { label: 'Intégrations', icon: 'pi pi-link' },
+        { label: 'Finalisation', icon: 'pi pi-check' }
+    ];
+
+    const quickActionsData = [
+        { label: 'Sauvegarde rapide', icon: 'pi pi-save', command: () => quickBackup() },
+        { label: 'Mode maintenance', icon: 'pi pi-wrench', command: () => toggleMaintenance() },
+        { label: 'Réinitialiser cache', icon: 'pi pi-refresh', command: () => clearCache() },
+        { label: 'Export complet', icon: 'pi pi-download', command: () => exportAll() },
+        { label: 'Test connectivité', icon: 'pi pi-wifi', command: () => testConnections() },
+        { label: 'Optimiser DB', icon: 'pi pi-database', command: () => optimizeDatabase() }
+    ];
+
+    const performanceMetrics = [
+        { label: 'CPU', value: 45, color: '#10B981' },
+        { label: 'Mémoire', value: 67, color: '#F59E0B' },
+        { label: 'Disque', value: 23, color: '#3B82F6' },
+        { label: 'Réseau', value: 89, color: '#8B5CF6' }
+    ];
+
+    const securityAudits = [
+        { date: new Date(), action: 'Connexion admin', status: 'success', ip: '192.168.1.100' },
+        { date: new Date(), action: 'Modification paramètres', status: 'success', ip: '192.168.1.100' },
+        { date: new Date(), action: 'Tentative accès', status: 'warning', ip: '192.168.1.205' },
+        { date: new Date(), action: 'Sauvegarde auto', status: 'success', ip: 'system' }
+    ];
+
+    const integrationsList = [
+        { name: 'QuickBooks', status: 'connected', icon: 'pi pi-calculator' },
+        { name: 'Slack', status: 'connected', icon: 'pi pi-slack' },
+        { name: 'Google Drive', status: 'disconnected', icon: 'pi pi-google' },
+        { name: 'Dropbox', status: 'error', icon: 'pi pi-cloud' },
+        { name: 'Microsoft 365', status: 'connected', icon: 'pi pi-microsoft' },
+        { name: 'Zapier', status: 'pending', icon: 'pi pi-bolt' }
+    ];
+
+    const frequenceOptions = [
+        { label: 'Horaire', value: 'horaire' },
+        { label: 'Quotidien', value: 'quotidien' },
+        { label: 'Hebdomadaire', value: 'hebdomadaire' },
+        { label: 'Mensuel', value: 'mensuel' }
+    ];
+
+    const destinationOptions = [
+        { label: 'Stockage local', value: 'local' },
+        { label: 'Cloud (Google Drive)', value: 'google' },
+        { label: 'Cloud (Dropbox)', value: 'dropbox' },
+        { label: 'Serveur FTP', value: 'ftp' }
+    ];
+
+    const saveSettings = (section: string) => {
+        setLoading(true);
+        
+        // Simuler la sauvegarde
+        setTimeout(() => {
+            setLoading(false);
+            toast.current?.show({
+                severity: 'success',
+                summary: 'Succès',
+                detail: `Les paramètres ${section} ont été sauvegardés`,
+                life: 3000
+            });
+        }, 1000);
+    };
+
+    const resetSettings = (section: string) => {
+        confirmDialog({
+            message: `Êtes-vous sûr de vouloir réinitialiser les paramètres ${section} ?`,
+            header: 'Confirmation',
+            icon: 'pi pi-exclamation-triangle',
+            acceptLabel: 'Oui',
+            rejectLabel: 'Non',
+            accept: () => {
+                toast.current?.show({
+                    severity: 'info',
+                    summary: 'Réinitialisation',
+                    detail: `Les paramètres ${section} ont été réinitialisés`,
+                    life: 3000
+                });
+            }
+        });
+    };
+
+    const testEmailConnection = () => {
+        setLoading(true);
+        
+        setTimeout(() => {
+            setLoading(false);
+            toast.current?.show({
+                severity: 'success',
+                summary: 'Test réussi',
+                detail: 'La connexion au serveur SMTP a été établie avec succès',
+                life: 3000
+            });
+        }, 2000);
+    };
+
+    useEffect(() => {
+        if (autoRefresh) {
+            const interval = setInterval(() => {
+                updateSystemMetrics();
+            }, refreshInterval * 1000);
+            return () => clearInterval(interval);
+        }
+    }, [autoRefresh, refreshInterval]);
+
+    const updateSystemMetrics = () => {
+        setPerformanceLevel(Math.floor(Math.random() * 20) + 70);
+        setSecurityScore(Math.floor(Math.random() * 15) + 80);
+        setSystemHealth(Math.floor(Math.random() * 10) + 85);
+    };
+
+    const quickBackup = () => {
+        setBackupProgress(0);
+        const interval = setInterval(() => {
+            setBackupProgress(prev => {
+                if (prev >= 100) {
+                    clearInterval(interval);
+                    toast.current?.show({
+                        severity: 'success',
+                        summary: 'Sauvegarde terminée',
+                        detail: 'Sauvegarde rapide effectuée avec succès',
+                        life: 3000
+                    });
+                    return 100;
+                }
+                return prev + 10;
+            });
+        }, 200);
+    };
+
+    const toggleMaintenance = () => {
+        confirmDialog({
+            message: 'Activer le mode maintenance ?',
+            header: 'Mode Maintenance',
+            icon: 'pi pi-wrench',
+            acceptLabel: 'Activer',
+            rejectLabel: 'Annuler',
+            accept: () => {
+                toast.current?.show({
+                    severity: 'info',
+                    summary: 'Mode maintenance',
+                    detail: 'Le mode maintenance a été activé',
+                    life: 3000
+                });
+            }
+        });
+    };
+
+    const clearCache = () => {
+        toast.current?.show({
+            severity: 'success',
+            summary: 'Cache vidé',
+            detail: 'Le cache système a été réinitialisé',
+            life: 3000
+        });
+    };
+
+    const exportAll = () => {
+        setExportProgress(0);
+        const interval = setInterval(() => {
+            setExportProgress(prev => {
+                if (prev >= 100) {
+                    clearInterval(interval);
+                    exportSettings();
+                    return 100;
+                }
+                return prev + 5;
+            });
+        }, 100);
+    };
+
+    const testConnections = () => {
+        toast.current?.show({
+            severity: 'info',
+            summary: 'Test en cours',
+            detail: 'Test de connectivité en cours...',
+            life: 3000
+        });
+        
+        setTimeout(() => {
+            toast.current?.show({
+                severity: 'success',
+                summary: 'Connectivité OK',
+                detail: 'Toutes les connexions sont opérationnelles',
+                life: 3000
+            });
+        }, 2000);
+    };
+
+    const optimizeDatabase = () => {
+        toast.current?.show({
+            severity: 'info',
+            summary: 'Optimisation DB',
+            detail: 'Optimisation de la base de données en cours...',
+            life: 5000
+        });
+    };
+
+    const exportSettings = () => {
+        const allSettings = {
+            company: companySettings,
+            invoice: invoiceSettings,
+            email: emailSettings,
+            system: systemSettings,
+            backup: backupSettings,
+            metadata: {
+                exportDate: new Date().toISOString(),
+                version: '2.1.0',
+                profile: configProfile
+            }
+        };
+        
+        const blob = new Blob([JSON.stringify(allSettings, null, 2)], { type: 'application/json' });
+        const link = document.createElement('a');
+        link.href = URL.createObjectURL(blob);
+        link.download = `btpxpress-settings-${new Date().toISOString().split('T')[0]}.json`;
+        link.click();
+        
+        toast.current?.show({
+            severity: 'success',
+            summary: 'Export réussi',
+            detail: 'Les paramètres ont été exportés',
+            life: 3000
+        });
+        
+        setLastSaved(new Date());
+        setUnsavedChanges(false);
+    };
+
+    const renderCompanySettings = () => (
+        <Card>
+            <div className="formgrid grid">
+                <div className="field col-12">
+                    <h5>Informations de l'entreprise</h5>
+                </div>
+                
+                <div className="field col-12 md:col-6">
+                    <label htmlFor="companyName">Nom de l'entreprise</label>
+                    <InputText 
+                        id="companyName" 
+                        value={companySettings.nom} 
+                        onChange={(e) => setCompanySettings({...companySettings, nom: e.target.value})}
+                        className="w-full" 
+                    />
+                </div>
+                
+                <div className="field col-12 md:col-6">
+                    <label htmlFor="formeJuridique">Forme juridique</label>
+                    <Dropdown 
+                        id="formeJuridique"
+                        value={companySettings.formeJuridique} 
+                        options={formesJuridiques}
+                        onChange={(e) => setCompanySettings({...companySettings, formeJuridique: e.value})}
+                        className="w-full" 
+                    />
+                </div>
+                
+                <div className="field col-12">
+                    <label htmlFor="address">Adresse</label>
+                    <InputTextarea 
+                        id="address" 
+                        value={companySettings.adresse} 
+                        onChange={(e) => setCompanySettings({...companySettings, adresse: e.target.value})}
+                        rows={3}
+                        className="w-full" 
+                    />
+                </div>
+                
+                <div className="field col-12 md:col-4">
+                    <label htmlFor="phone">Téléphone</label>
+                    <InputText 
+                        id="phone" 
+                        value={companySettings.telephone} 
+                        onChange={(e) => setCompanySettings({...companySettings, telephone: e.target.value})}
+                        className="w-full" 
+                    />
+                </div>
+                
+                <div className="field col-12 md:col-4">
+                    <label htmlFor="email">Email</label>
+                    <InputText 
+                        id="email" 
+                        value={companySettings.email} 
+                        onChange={(e) => setCompanySettings({...companySettings, email: e.target.value})}
+                        className="w-full" 
+                    />
+                </div>
+                
+                <div className="field col-12 md:col-4">
+                    <label htmlFor="website">Site web</label>
+                    <InputText 
+                        id="website" 
+                        value={companySettings.siteWeb} 
+                        onChange={(e) => setCompanySettings({...companySettings, siteWeb: e.target.value})}
+                        className="w-full" 
+                    />
+                </div>
+                
+                <div className="field col-12 md:col-4">
+                    <label htmlFor="tva">Numéro TVA</label>
+                    <InputText 
+                        id="tva" 
+                        value={companySettings.numeroTVA} 
+                        onChange={(e) => setCompanySettings({...companySettings, numeroTVA: e.target.value})}
+                        className="w-full" 
+                    />
+                </div>
+                
+                <div className="field col-12 md:col-4">
+                    <label htmlFor="siret">Numéro SIRET</label>
+                    <InputText 
+                        id="siret" 
+                        value={companySettings.numeroSiret} 
+                        onChange={(e) => setCompanySettings({...companySettings, numeroSiret: e.target.value})}
+                        className="w-full" 
+                    />
+                </div>
+                
+                <div className="field col-12 md:col-4">
+                    <label htmlFor="capital">Capital social (€)</label>
+                    <InputNumber 
+                        id="capital" 
+                        value={companySettings.capitalSocial} 
+                        onValueChange={(e) => setCompanySettings({...companySettings, capitalSocial: e.value || 0})}
+                        mode="currency" 
+                        currency="EUR" 
+                        locale="fr-FR"
+                        className="w-full" 
+                    />
+                </div>
+                
+                <div className="field col-12">
+                    <label htmlFor="logo">Logo de l'entreprise</label>
+                    <FileUpload 
+                        name="logo" 
+                        accept="image/*" 
+                        maxFileSize={1000000}
+                        emptyTemplate={
+                            <p className="m-0">Glissez et déposez le logo ici ou cliquez pour sélectionner.</p>
+                        }
+                    />
+                </div>
+                
+                <div className="field col-12">
+                    <div className="flex gap-2">
+                        <Button 
+                            label="Sauvegarder" 
+                            icon="pi pi-save" 
+                            onClick={() => saveSettings('entreprise')}
+                            loading={loading}
+                        />
+                        <Button 
+                            label="Réinitialiser" 
+                            icon="pi pi-refresh" 
+                            severity={"secondary" as any}
+                            onClick={() => resetSettings('entreprise')}
+                        />
+                    </div>
+                </div>
+            </div>
+        </Card>
+    );
+
+    const renderInvoiceSettings = () => (
+        <Card>
+            <div className="formgrid grid">
+                <div className="field col-12">
+                    <h5>Paramètres de facturation</h5>
+                </div>
+                
+                <div className="field col-12 md:col-3">
+                    <label htmlFor="prefixFacture">Préfixe factures</label>
+                    <InputText 
+                        id="prefixFacture" 
+                        value={invoiceSettings.prefixFacture} 
+                        onChange={(e) => setInvoiceSettings({...invoiceSettings, prefixFacture: e.target.value})}
+                        className="w-full" 
+                    />
+                </div>
+                
+                <div className="field col-12 md:col-3">
+                    <label htmlFor="nextFacture">Prochain n° facture</label>
+                    <InputNumber 
+                        id="nextFacture" 
+                        value={invoiceSettings.prochainNumeroFacture} 
+                        onValueChange={(e) => setInvoiceSettings({...invoiceSettings, prochainNumeroFacture: e.value || 1})}
+                        className="w-full" 
+                    />
+                </div>
+                
+                <div className="field col-12 md:col-3">
+                    <label htmlFor="prefixDevis">Préfixe devis</label>
+                    <InputText 
+                        id="prefixDevis" 
+                        value={invoiceSettings.prefixDevis} 
+                        onChange={(e) => setInvoiceSettings({...invoiceSettings, prefixDevis: e.target.value})}
+                        className="w-full" 
+                    />
+                </div>
+                
+                <div className="field col-12 md:col-3">
+                    <label htmlFor="nextDevis">Prochain n° devis</label>
+                    <InputNumber 
+                        id="nextDevis" 
+                        value={invoiceSettings.prochainNumeroDevis} 
+                        onValueChange={(e) => setInvoiceSettings({...invoiceSettings, prochainNumeroDevis: e.value || 1})}
+                        className="w-full" 
+                    />
+                </div>
+                
+                <div className="field col-12 md:col-4">
+                    <label htmlFor="tauxTVA">Taux TVA par défaut (%)</label>
+                    <InputNumber 
+                        id="tauxTVA" 
+                        value={invoiceSettings.tauxTVADefaut} 
+                        onValueChange={(e) => setInvoiceSettings({...invoiceSettings, tauxTVADefaut: e.value || 0})}
+                        suffix="%" 
+                        min={0} 
+                        max={100}
+                        className="w-full" 
+                    />
+                </div>
+                
+                <div className="field col-12 md:col-4">
+                    <label htmlFor="delaiPaiement">Délai de paiement (jours)</label>
+                    <InputNumber 
+                        id="delaiPaiement" 
+                        value={invoiceSettings.delaiPaiementDefaut} 
+                        onValueChange={(e) => setInvoiceSettings({...invoiceSettings, delaiPaiementDefaut: e.value || 30})}
+                        suffix=" jours" 
+                        min={0}
+                        className="w-full" 
+                    />
+                </div>
+                
+                <div className="field col-12 md:col-4">
+                    <label htmlFor="penalites">Pénalités de retard (%)</label>
+                    <InputNumber 
+                        id="penalites" 
+                        value={invoiceSettings.penalitesRetard} 
+                        onValueChange={(e) => setInvoiceSettings({...invoiceSettings, penalitesRetard: e.value || 0})}
+                        suffix="%" 
+                        min={0} 
+                        max={100}
+                        className="w-full" 
+                    />
+                </div>
+                
+                <div className="field col-12">
+                    <label htmlFor="conditionsPaiement">Conditions de paiement</label>
+                    <InputTextarea 
+                        id="conditionsPaiement" 
+                        value={invoiceSettings.conditionsPaiement} 
+                        onChange={(e) => setInvoiceSettings({...invoiceSettings, conditionsPaiement: e.target.value})}
+                        rows={3}
+                        className="w-full" 
+                    />
+                </div>
+                
+                <div className="field col-12">
+                    <label htmlFor="mentionsLegales">Mentions légales</label>
+                    <InputTextarea 
+                        id="mentionsLegales" 
+                        value={invoiceSettings.mentionsLegales} 
+                        onChange={(e) => setInvoiceSettings({...invoiceSettings, mentionsLegales: e.target.value})}
+                        rows={4}
+                        className="w-full" 
+                    />
+                </div>
+                
+                <div className="field col-12">
+                    <div className="flex gap-2">
+                        <Button 
+                            label="Sauvegarder" 
+                            icon="pi pi-save" 
+                            onClick={() => saveSettings('facturation')}
+                            loading={loading}
+                        />
+                        <Button 
+                            label="Réinitialiser" 
+                            icon="pi pi-refresh" 
+                            severity={"secondary" as any}
+                            onClick={() => resetSettings('facturation')}
+                        />
+                    </div>
+                </div>
+            </div>
+        </Card>
+    );
+
+    const renderEmailSettings = () => (
+        <Card>
+            <div className="formgrid grid">
+                <div className="field col-12">
+                    <h5>Configuration email</h5>
+                </div>
+                
+                <div className="field col-12 md:col-8">
+                    <label htmlFor="smtpServer">Serveur SMTP</label>
+                    <InputText 
+                        id="smtpServer" 
+                        value={emailSettings.serveurSMTP} 
+                        onChange={(e) => setEmailSettings({...emailSettings, serveurSMTP: e.target.value})}
+                        className="w-full" 
+                    />
+                </div>
+                
+                <div className="field col-12 md:col-4">
+                    <label htmlFor="smtpPort">Port SMTP</label>
+                    <InputNumber 
+                        id="smtpPort" 
+                        value={emailSettings.portSMTP} 
+                        onValueChange={(e) => setEmailSettings({...emailSettings, portSMTP: e.value || 587})}
+                        className="w-full" 
+                    />
+                </div>
+                
+                <div className="field col-12 md:col-6">
+                    <label htmlFor="smtpUser">Utilisateur SMTP</label>
+                    <InputText 
+                        id="smtpUser" 
+                        value={emailSettings.utilisateurSMTP} 
+                        onChange={(e) => setEmailSettings({...emailSettings, utilisateurSMTP: e.target.value})}
+                        className="w-full" 
+                    />
+                </div>
+                
+                <div className="field col-12 md:col-6">
+                    <label htmlFor="smtpPassword">Mot de passe SMTP</label>
+                    <InputText 
+                        id="smtpPassword" 
+                        type="password"
+                        value={emailSettings.motDePasseSMTP} 
+                        onChange={(e) => setEmailSettings({...emailSettings, motDePasseSMTP: e.target.value})}
+                        className="w-full" 
+                    />
+                </div>
+                
+                <div className="field col-12 md:col-8">
+                    <label htmlFor="fromEmail">Email expéditeur par défaut</label>
+                    <InputText 
+                        id="fromEmail" 
+                        value={emailSettings.expediteurDefaut} 
+                        onChange={(e) => setEmailSettings({...emailSettings, expediteurDefaut: e.target.value})}
+                        className="w-full" 
+                    />
+                </div>
+                
+                <div className="field col-12 md:col-4">
+                    <label htmlFor="useTLS">Utiliser TLS/SSL</label>
+                    <div className="flex align-items-center h-3rem">
+                        <InputSwitch 
+                            id="useTLS"
+                            checked={emailSettings.useTLS} 
+                            onChange={(e) => setEmailSettings({...emailSettings, useTLS: e.value})} 
+                        />
+                    </div>
+                </div>
+                
+                <div className="field col-12">
+                    <label>Emails de notification</label>
+                    <div className="flex flex-wrap gap-2 mb-2">
+                        {emailSettings.emailsNotification.map((email, index) => (
+                            <Chip
+                                key={index}
+                                label={email}
+                                removable
+                                onRemove={() => {
+                                    const newEmails = [...emailSettings.emailsNotification];
+                                    newEmails.splice(index, 1);
+                                    setEmailSettings({...emailSettings, emailsNotification: newEmails});
+                                    return true;
+                                }}
+                            />
+                        ))}
+                    </div>
+                    <div className="p-inputgroup">
+                        <InputText 
+                            placeholder="Ajouter un email de notification" 
+                            onKeyPress={(e) => {
+                                if (e.key === 'Enter') {
+                                    const input = e.currentTarget;
+                                    if (input.value && input.value.includes('@')) {
+                                        setEmailSettings({
+                                            ...emailSettings, 
+                                            emailsNotification: [...emailSettings.emailsNotification, input.value]
+                                        });
+                                        input.value = '';
+                                    }
+                                }
+                            }}
+                        />
+                        <Button icon="pi pi-plus" />
+                    </div>
+                </div>
+                
+                <div className="field col-12">
+                    <div className="flex gap-2">
+                        <Button 
+                            label="Tester la connexion" 
+                            icon="pi pi-wifi" 
+                            severity="info"
+                            onClick={testEmailConnection}
+                            loading={loading}
+                        />
+                        <Button 
+                            label="Sauvegarder" 
+                            icon="pi pi-save" 
+                            onClick={() => saveSettings('email')}
+                            loading={loading}
+                        />
+                        <Button 
+                            label="Réinitialiser" 
+                            icon="pi pi-refresh" 
+                            severity={"secondary" as any}
+                            onClick={() => resetSettings('email')}
+                        />
+                    </div>
+                </div>
+            </div>
+        </Card>
+    );
+
+    const renderSystemSettings = () => (
+        <Card>
+            <div className="formgrid grid">
+                <div className="field col-12">
+                    <h5>Paramètres système</h5>
+                </div>
+                
+                <div className="field col-12 md:col-3">
+                    <label htmlFor="langue">Langue</label>
+                    <Dropdown 
+                        id="langue"
+                        value={systemSettings.langue} 
+                        options={langues}
+                        onChange={(e) => setSystemSettings({...systemSettings, langue: e.value})}
+                        className="w-full" 
+                    />
+                </div>
+                
+                <div className="field col-12 md:col-3">
+                    <label htmlFor="fuseau">Fuseau horaire</label>
+                    <Dropdown 
+                        id="fuseau"
+                        value={systemSettings.fuseau} 
+                        options={fuseaux}
+                        onChange={(e) => setSystemSettings({...systemSettings, fuseau: e.value})}
+                        className="w-full" 
+                    />
+                </div>
+                
+                <div className="field col-12 md:col-3">
+                    <label htmlFor="devise">Devise par défaut</label>
+                    <Dropdown 
+                        id="devise"
+                        value={systemSettings.deviseDefaut} 
+                        options={devises}
+                        onChange={(e) => setSystemSettings({...systemSettings, deviseDefaut: e.value})}
+                        className="w-full" 
+                    />
+                </div>
+                
+                <div className="field col-12 md:col-3">
+                    <label htmlFor="theme">Thème</label>
+                    <SelectButton 
+                        value={systemSettings.theme} 
+                        options={themes} 
+                        onChange={(e) => setSystemSettings({...systemSettings, theme: e.value})}
+                    />
+                </div>
+                
+                <div className="field col-12 md:col-3">
+                    <label htmlFor="couleurPrimaire">Couleur primaire</label>
+                    <div className="flex align-items-center gap-2">
+                        <ColorPicker 
+                            value={systemSettings.couleurPrimaire} 
+                            onChange={(e) => setSystemSettings({...systemSettings, couleurPrimaire: `#${e.value}`})} 
+                        />
+                        <InputText 
+                            value={systemSettings.couleurPrimaire} 
+                            onChange={(e) => setSystemSettings({...systemSettings, couleurPrimaire: e.target.value})}
+                            className="flex-1"
+                        />
+                    </div>
+                </div>
+                
+                <Divider />
+                
+                <div className="field col-12">
+                    <h6>Notifications et rappels</h6>
+                </div>
+                
+                <div className="field col-12 md:col-3">
+                    <label htmlFor="notifications">Activer les notifications</label>
+                    <div className="flex align-items-center h-3rem">
+                        <InputSwitch 
+                            id="notifications"
+                            checked={systemSettings.activerNotifications} 
+                            onChange={(e) => setSystemSettings({...systemSettings, activerNotifications: e.value})} 
+                        />
+                    </div>
+                </div>
+                
+                <div className="field col-12 md:col-3">
+                    <label htmlFor="rappels">Activer les rappels</label>
+                    <div className="flex align-items-center h-3rem">
+                        <InputSwitch 
+                            id="rappels"
+                            checked={systemSettings.activerRappels} 
+                            onChange={(e) => setSystemSettings({...systemSettings, activerRappels: e.value})} 
+                        />
+                    </div>
+                </div>
+                
+                <div className="field col-12 md:col-3">
+                    <label htmlFor="rappelFacture">Rappel factures (jours)</label>
+                    <InputNumber 
+                        id="rappelFacture" 
+                        value={systemSettings.delaiRappelFacture} 
+                        onValueChange={(e) => setSystemSettings({...systemSettings, delaiRappelFacture: e.value || 7})}
+                        suffix=" jours" 
+                        min={1}
+                        className="w-full"
+                        disabled={!systemSettings.activerRappels}
+                    />
+                </div>
+                
+                <div className="field col-12 md:col-3">
+                    <label htmlFor="rappelDevis">Rappel devis (jours)</label>
+                    <InputNumber 
+                        id="rappelDevis" 
+                        value={systemSettings.delaiRappelDevis} 
+                        onValueChange={(e) => setSystemSettings({...systemSettings, delaiRappelDevis: e.value || 3})}
+                        suffix=" jours" 
+                        min={1}
+                        className="w-full"
+                        disabled={!systemSettings.activerRappels}
+                    />
+                </div>
+                
+                <div className="field col-12">
+                    <div className="flex gap-2">
+                        <Button 
+                            label="Sauvegarder" 
+                            icon="pi pi-save" 
+                            onClick={() => saveSettings('système')}
+                            loading={loading}
+                        />
+                        <Button 
+                            label="Réinitialiser" 
+                            icon="pi pi-refresh" 
+                            severity={"secondary" as any}
+                            onClick={() => resetSettings('système')}
+                        />
+                        <Button 
+                            label="Exporter tous les paramètres" 
+                            icon="pi pi-download" 
+                            severity="help"
+                            onClick={exportSettings}
+                        />
+                    </div>
+                </div>
+            </div>
+        </Card>
+    );
+
+    const renderSystemOverview = () => (
+        <div className="grid">
+            <div className="col-12 md:col-4">
+                <Card className="bg-gradient-to-r from-blue-500 to-purple-600 text-white">
+                    <div className="text-center">
+                        <Knob 
+                            value={performanceLevel} 
+                            readOnly 
+                            size={80}
+                            strokeWidth={8}
+                            valueColor="white"
+                            rangeColor="rgba(255,255,255,0.3)"
+                        />
+                        <h6 className="mt-3 mb-0">Performance Système</h6>
+                        <p className="text-sm opacity-90">Optimal</p>
+                    </div>
+                </Card>
+            </div>
+            
+            <div className="col-12 md:col-4">
+                <Card className="bg-gradient-to-r from-green-500 to-teal-600 text-white">
+                    <div className="text-center">
+                        <Knob 
+                            value={securityScore} 
+                            readOnly 
+                            size={80}
+                            strokeWidth={8}
+                            valueColor="white"
+                            rangeColor="rgba(255,255,255,0.3)"
+                        />
+                        <h6 className="mt-3 mb-0">Score Sécurité</h6>
+                        <p className="text-sm opacity-90">Excellent</p>
+                    </div>
+                </Card>
+            </div>
+            
+            <div className="col-12 md:col-4">
+                <Card className="bg-gradient-to-r from-orange-500 to-pink-600 text-white">
+                    <div className="text-center">
+                        <Knob 
+                            value={systemHealth} 
+                            readOnly 
+                            size={80}
+                            strokeWidth={8}
+                            valueColor="white"
+                            rangeColor="rgba(255,255,255,0.3)"
+                        />
+                        <h6 className="mt-3 mb-0">Santé Système</h6>
+                        <p className="text-sm opacity-90">Très bon</p>
+                    </div>
+                </Card>
+            </div>
+            
+            <div className="col-12">
+                <Card title="Métriques en temps réel">
+                    <div className="mb-4">
+                        {performanceMetrics.map((metric, index) => (
+                            <div key={index} className="mb-3">
+                                <div className="flex justify-content-between mb-2">
+                                    <span>{metric.label}</span>
+                                    <span>{metric.value}%</span>
+                                </div>
+                                <ProgressBar value={metric.value} color={metric.color} />
+                            </div>
+                        ))}
+                    </div>
+                    
+                    <div className="grid">
+                        <div className="col-12 md:col-3">
+                            <div className="text-center p-3 border-round bg-blue-50">
+                                <i className="pi pi-server text-blue-500 text-2xl mb-2" />
+                                <div className="text-lg font-bold text-blue-700">24h</div>
+                                <div className="text-sm text-600">Uptime</div>
+                            </div>
+                        </div>
+                        <div className="col-12 md:col-3">
+                            <div className="text-center p-3 border-round bg-green-50">
+                                <i className="pi pi-users text-green-500 text-2xl mb-2" />
+                                <div className="text-lg font-bold text-green-700">1,247</div>
+                                <div className="text-sm text-600">Utilisateurs actifs</div>
+                            </div>
+                        </div>
+                        <div className="col-12 md:col-3">
+                            <div className="text-center p-3 border-round bg-purple-50">
+                                <i className="pi pi-database text-purple-500 text-2xl mb-2" />
+                                <div className="text-lg font-bold text-purple-700">2.4GB</div>
+                                <div className="text-sm text-600">Données traitées</div>
+                            </div>
+                        </div>
+                        <div className="col-12 md:col-3">
+                            <div className="text-center p-3 border-round bg-orange-50">
+                                <i className="pi pi-bolt text-orange-500 text-2xl mb-2" />
+                                <div className="text-lg font-bold text-orange-700">156ms</div>
+                                <div className="text-sm text-600">Temps réponse</div>
+                            </div>
+                        </div>
+                    </div>
+                </Card>
+            </div>
+        </div>
+    );
+
+    const renderIntegrationsTab = () => (
+        <div className="grid">
+            <div className="col-12">
+                <Card title="Intégrations tierces">
+                    <DataView 
+                        value={integrationsList}
+                        itemTemplate={(item) => (
+                            <div className="col-12 md:col-6 lg:col-4 p-2">
+                                <Card className="h-full">
+                                    <div className="flex align-items-center justify-content-between mb-3">
+                                        <div className="flex align-items-center">
+                                            <Avatar 
+                                                icon={item.icon} 
+                                                className="mr-2" 
+                                                style={{ backgroundColor: '#DEE2E6', color: '#495057' }}
+                                            />
+                                            <span className="font-bold">{item.name}</span>
+                                        </div>
+                                        <Tag 
+                                            value={item.status} 
+                                            severity={
+                                                item.status === 'connected' ? 'success' :
+                                                item.status === 'error' ? 'danger' :
+                                                item.status === 'pending' ? 'warning' : 'info'
+                                            }
+                                        />
+                                    </div>
+                                    <div className="flex gap-2">
+                                        <Button 
+                                            label="Configure" 
+                                            size="small" 
+                                            className="flex-1"
+                                        />
+                                        <Button 
+                                            icon="pi pi-cog" 
+                                            size="small" 
+                                            outlined
+                                        />
+                                    </div>
+                                </Card>
+                            </div>
+                        )}
+                        layout="grid"
+                    />
+                </Card>
+            </div>
+        </div>
+    );
+
+    const renderSecurityTab = () => (
+        <div className="grid">
+            <div className="col-12 md:col-6">
+                <Card title="Audit de sécurité">
+                    <Timeline 
+                        value={securityAudits}
+                        content={(item) => (
+                            <div className="flex align-items-center">
+                                <Badge 
+                                    value={item.status} 
+                                    severity={
+                                        item.status === 'success' ? 'success' :
+                                        item.status === 'warning' ? 'warning' : 'danger'
+                                    }
+                                    className="mr-2"
+                                />
+                                <div>
+                                    <div className="font-bold">{item.action}</div>
+                                    <div className="text-sm text-600">{item.ip} - {item.date.toLocaleTimeString()}</div>
+                                </div>
+                            </div>
+                        )}
+                        className="w-full"
+                    />
+                </Card>
+            </div>
+            
+            <div className="col-12 md:col-6">
+                <Card title="Paramètres de sécurité avancés">
+                    <Accordion multiple>
+                        <AccordionTab header="Authentification">
+                            <div className="field">
+                                <label>Authentification à deux facteurs</label>
+                                <InputSwitch checked={false} onChange={() => {}} className="ml-2" />
+                            </div>
+                            <div className="field">
+                                <label>Durée de session (minutes)</label>
+                                <Slider value={30} min={5} max={480} step={5} className="w-full mt-2" />
+                            </div>
+                        </AccordionTab>
+                        
+                        <AccordionTab header="Mots de passe">
+                            <div className="field">
+                                <label>Longueur minimale</label>
+                                <InputNumber value={8} min={6} max={32} className="w-full" />
+                            </div>
+                            <div className="field">
+                                <label>Complexité requise</label>
+                                <div className="flex flex-column gap-2 mt-2">
+                                    <div className="flex align-items-center">
+                                        <Checkbox checked className="mr-2" />
+                                        <label>Majuscules</label>
+                                    </div>
+                                    <div className="flex align-items-center">
+                                        <Checkbox checked className="mr-2" />
+                                        <label>Caractères spéciaux</label>
+                                    </div>
+                                    <div className="flex align-items-center">
+                                        <Checkbox checked className="mr-2" />
+                                        <label>Chiffres</label>
+                                    </div>
+                                </div>
+                            </div>
+                        </AccordionTab>
+                        
+                        <AccordionTab header="Chiffrement">
+                            <div className="field">
+                                <label>Algorithme de chiffrement</label>
+                                <Dropdown 
+                                    value="AES-256" 
+                                    options={[
+                                        { label: 'AES-128', value: 'AES-128' },
+                                        { label: 'AES-256', value: 'AES-256' },
+                                        { label: 'RSA-2048', value: 'RSA-2048' }
+                                    ]}
+                                    className="w-full"
+                                />
+                            </div>
+                        </AccordionTab>
+                    </Accordion>
+                </Card>
+            </div>
+        </div>
+    );
+
+    const renderAdvancedTab = () => (
+        <Splitter style={{ height: '600px' }}>
+            <SplitterPanel size={30}>
+                <ScrollPanel style={{ width: '100%', height: '100%' }}>
+                    <div className="p-3">
+                        <h6>Navigation rapide</h6>
+                        <Menu 
+                            model={[
+                                { label: 'API & Webhooks', icon: 'pi pi-link' },
+                                { label: 'Variables d\'environnement', icon: 'pi pi-code' },
+                                { label: 'Logs système', icon: 'pi pi-file' },
+                                { label: 'Performance', icon: 'pi pi-chart-line' },
+                                { label: 'Base de données', icon: 'pi pi-database' },
+                                { label: 'Terminal', icon: 'pi pi-desktop' }
+                            ]}
+                        />
+                    </div>
+                </ScrollPanel>
+            </SplitterPanel>
+            
+            <SplitterPanel size={70}>
+                <ScrollPanel style={{ width: '100%', height: '100%' }}>
+                    <div className="p-3">
+                        <Card title="Configuration avancée">
+                            <Fieldset legend="API Configuration" toggleable>
+                                <div className="grid">
+                                    <div className="col-12 md:col-6">
+                                        <div className="field">
+                                            <label>Rate Limiting (req/min)</label>
+                                            <InputNumber value={1000} className="w-full" />
+                                        </div>
+                                    </div>
+                                    <div className="col-12 md:col-6">
+                                        <div className="field">
+                                            <label>Timeout (ms)</label>
+                                            <InputNumber value={30000} className="w-full" />
+                                        </div>
+                                    </div>
+                                </div>
+                            </Fieldset>
+                            
+                            <Fieldset legend="Terminal système" toggleable className="mt-3">
+                                <Terminal 
+                                    ref={terminal}
+                                    welcomeMessage="Bienvenue dans le terminal BTpXpress. Tapez 'help' pour les commandes disponibles."
+                                    prompt="btpxpress $"
+                                    className="bg-gray-900 text-white"
+                                />
+                            </Fieldset>
+                            
+                            <Fieldset legend="Monitoring avancé" toggleable className="mt-3">
+                                <Chart 
+                                    type="line" 
+                                    data={{
+                                        labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
+                                        datasets: [{
+                                            label: 'CPU Usage',
+                                            data: [20, 35, 60, 45, 70, 30],
+                                            borderColor: '#42A5F5',
+                                            backgroundColor: 'rgba(66, 165, 245, 0.1)'
+                                        }]
+                                    }}
+                                    options={{
+                                        responsive: true,
+                                        plugins: {
+                                            legend: { position: 'top' }
+                                        }
+                                    }}
+                                />
+                            </Fieldset>
+                        </Card>
+                    </div>
+                </ScrollPanel>
+            </SplitterPanel>
+        </Splitter>
+    );
+
+    const leftToolbarTemplate = () => (
+        <div className="flex align-items-center gap-2">
+            <Avatar 
+                icon="pi pi-cog" 
+                className="mr-2" 
+                style={{ backgroundColor: '#3B82F6', color: 'white' }}
+            />
+            <div>
+                <div className="font-bold text-lg">Paramètres Système</div>
+                <div className="text-sm text-600">
+                    {lastSaved ? `Dernière sauvegarde: ${lastSaved.toLocaleString()}` : 'Aucune sauvegarde'}
+                    {unsavedChanges && <Badge value="Non sauvé" severity="warning" className="ml-2" />}
+                </div>
+            </div>
+        </div>
+    );
+
+    const rightToolbarTemplate = () => (
+        <div className="flex align-items-center gap-2">
+            <ToggleButton 
+                checked={autoRefresh} 
+                onChange={(e) => setAutoRefresh(e.value)}
+                onIcon="pi pi-pause" 
+                offIcon="pi pi-play"
+                onLabel="Auto-refresh" 
+                offLabel="Manual"
+            />
+            
+            <Button 
+                icon="pi pi-question-circle" 
+                rounded 
+                text 
+                onClick={() => setHelpVisible(true)}
+                tooltip="Aide"
+            />
+            
+            <Button 
+                icon="pi pi-history" 
+                rounded 
+                text 
+                onClick={() => setHistoryVisible(true)}
+                tooltip="Historique"
+            />
+            
+            <Button 
+                icon="pi pi-bars" 
+                rounded 
+                text 
+                onClick={() => setSidebarVisible(true)}
+                tooltip="Menu"
+            />
+        </div>
+    );
+
+    return (
+        <div className="grid">
+            <div className="col-12">
+                <BlockUI blocked={blocked}>
+                    <Toast ref={toast} />
+                    <Messages ref={messages} />
+                    <ConfirmDialog />
+                    
+                    <Toolbar 
+                        left={leftToolbarTemplate} 
+                        right={rightToolbarTemplate}
+                        className="mb-4 bg-gradient-to-r from-blue-500 to-purple-600 text-white border-round"
+                    />
+                    
+                    {exportProgress > 0 && exportProgress < 100 && (
+                        <Card className="mb-4">
+                            <div className="flex align-items-center gap-3">
+                                <i className="pi pi-spin pi-spinner text-blue-500" />
+                                <div className="flex-1">
+                                    <p className="m-0 font-bold">Export en cours...</p>
+                                    <ProgressBar value={exportProgress} className="mt-2" />
+                                </div>
+                            </div>
+                        </Card>
+                    )}
+                    
+                    {backupProgress > 0 && backupProgress < 100 && (
+                        <Card className="mb-4">
+                            <div className="flex align-items-center gap-3">
+                                <i className="pi pi-spin pi-save text-green-500" />
+                                <div className="flex-1">
+                                    <p className="m-0 font-bold">Sauvegarde en cours...</p>
+                                    <ProgressBar value={backupProgress} className="mt-2" />
+                                </div>
+                            </div>
+                        </Card>
+                    )}
+                    
+                    <TabView 
+                        activeIndex={activeIndex} 
+                        onTabChange={(e) => setActiveIndex(e.index)}
+                        className="tabview-custom"
+                    >
+                        <TabPanel header="Vue d'ensemble" leftIcon="pi pi-home mr-2">
+                            {renderSystemOverview()}
+                        </TabPanel>
+                        
+                        <TabPanel header="Entreprise" leftIcon="pi pi-building mr-2">
+                            {renderCompanySettings()}
+                        </TabPanel>
+                        
+                        <TabPanel header="Facturation" leftIcon="pi pi-file-edit mr-2">
+                            {renderInvoiceSettings()}
+                        </TabPanel>
+                        
+                        <TabPanel header="Email" leftIcon="pi pi-envelope mr-2">
+                            {renderEmailSettings()}
+                        </TabPanel>
+                        
+                        <TabPanel header="Système" leftIcon="pi pi-cog mr-2">
+                            {renderSystemSettings()}
+                        </TabPanel>
+                        
+                        <TabPanel header="Sécurité" leftIcon="pi pi-shield mr-2">
+                            {renderSecurityTab()}
+                        </TabPanel>
+                        
+                        <TabPanel header="Intégrations" leftIcon="pi pi-link mr-2">
+                            {renderIntegrationsTab()}
+                        </TabPanel>
+                        
+                        <TabPanel header="Avancé" leftIcon="pi pi-code mr-2">
+                            {renderAdvancedTab()}
+                        </TabPanel>
+                    </TabView>
+                    
+                    <SpeedDial 
+                        model={quickActionsData}
+                        radius={80}
+                        type="semi-circle"
+                        direction="up-left"
+                        style={{ left: 'calc(50% - 2rem)', bottom: 0 }}
+                        buttonClassName="p-button-help"
+                        maskClassName="bg-black-alpha-30"
+                    />
+                    
+                    <Sidebar 
+                        visible={sidebarVisible} 
+                        onHide={() => setSidebarVisible(false)}
+                        position="right"
+                        className="w-20rem"
+                    >
+                        <h3>Actions rapides</h3>
+                        <div className="flex flex-column gap-2">
+                            {quickActionsData.map((action, index) => (
+                                <Button 
+                                    key={index}
+                                    label={action.label}
+                                    icon={action.icon}
+                                    outlined
+                                    className="justify-content-start"
+                                    onClick={action.command}
+                                />
+                            ))}
+                        </div>
+                        
+                        <Divider />
+                        
+                        <h4>Profil de configuration</h4>
+                        <Dropdown 
+                            value={configProfile}
+                            options={configProfiles}
+                            onChange={(e) => setConfigProfile(e.value)}
+                            optionLabel="label"
+                            optionValue="value"
+                            className="w-full"
+                        />
+                        
+                        <div className="mt-3">
+                            <h5>Options d'affichage</h5>
+                            <div className="flex align-items-center gap-2 mb-2">
+                                <InputSwitch 
+                                    checked={darkMode} 
+                                    onChange={(e) => setDarkMode(e.value)}
+                                />
+                                <label>Mode sombre</label>
+                            </div>
+                            <div className="flex align-items-center gap-2 mb-2">
+                                <InputSwitch 
+                                    checked={compactMode} 
+                                    onChange={(e) => setCompactMode(e.value)}
+                                />
+                                <label>Mode compact</label>
+                            </div>
+                            <div className="flex align-items-center gap-2">
+                                <InputSwitch 
+                                    checked={expertMode} 
+                                    onChange={(e) => setExpertMode(e.value)}
+                                />
+                                <label>Mode expert</label>
+                            </div>
+                        </div>
+                    </Sidebar>
+                    
+                    <Dialog 
+                        header="Assistant de configuration" 
+                        visible={configWizard} 
+                        onHide={() => setConfigWizard(false)}
+                        style={{ width: '50vw' }}
+                        modal
+                    >
+                        <Steps 
+                            model={wizardSteps} 
+                            activeIndex={wizardStep}
+                            onSelect={(e) => setWizardStep(e.index)}
+                            readOnly={false}
+                            className="mb-4"
+                        />
+                        
+                        <div className="wizard-content">
+                            {wizardStep === 0 && (
+                                <div>
+                                    <h4>Configuration de l'entreprise</h4>
+                                    <p>Configurons d'abord les informations de base de votre entreprise.</p>
+                                    {renderCompanySettings()}
+                                </div>
+                            )}
+                            {wizardStep === 1 && (
+                                <div>
+                                    <h4>Gestion des utilisateurs</h4>
+                                    <p>Définissez les paramètres d'accès et de sécurité.</p>
+                                    <Message 
+                                        severity="info" 
+                                        text="Configuration des rôles et permissions utilisateurs"
+                                        className="w-full"
+                                    />
+                                </div>
+                            )}
+                            {wizardStep === 4 && (
+                                <div className="text-center">
+                                    <i className="pi pi-check-circle text-green-500 text-6xl mb-3" />
+                                    <h4>Configuration terminée !</h4>
+                                    <p>Votre système est maintenant configuré et prêt à l'emploi.</p>
+                                </div>
+                            )}
+                        </div>
+                        
+                        <div className="flex justify-content-between mt-4">
+                            <Button 
+                                label="Précédent" 
+                                icon="pi pi-chevron-left" 
+                                outlined
+                                disabled={wizardStep === 0}
+                                onClick={() => setWizardStep(wizardStep - 1)}
+                            />
+                            <Button 
+                                label={wizardStep === wizardSteps.length - 1 ? 'Terminer' : 'Suivant'}
+                                icon={wizardStep === wizardSteps.length - 1 ? 'pi pi-check' : 'pi pi-chevron-right'}
+                                iconPos="right"
+                                onClick={() => {
+                                    if (wizardStep === wizardSteps.length - 1) {
+                                        setConfigWizard(false);
+                                        toast.current?.show({
+                                            severity: 'success',
+                                            summary: 'Configuration terminée',
+                                            detail: 'Votre système a été configuré avec succès',
+                                            life: 5000
+                                        });
+                                    } else {
+                                        setWizardStep(wizardStep + 1);
+                                    }
+                                }}
+                            />
+                        </div>
+                    </Dialog>
+                    
+                    <ScrollTop threshold={600} className="w-3rem h-3rem border-round bg-primary" />
+                    
+                </BlockUI>
+            </div>
+        </div>
+    );
+};
+
+const ProtectedParametresPage = () => {
+    return (
+        <ProtectedRoute requiredRoles={['SUPER_ADMIN', 'ADMIN']}>
+            <ParametresPage />
+        </ProtectedRoute>
+    );
+};
+
+export default ProtectedParametresPage;
+
+// Style CSS personnalisé pour améliorer l'apparence
+const customStyles = `
+.tabview-custom .p-tabview-nav {
+    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+    border-radius: 10px 10px 0 0;
+}
+
+.tabview-custom .p-tabview-nav li .p-tabview-nav-link {
+    color: white;
+    border: none;
+}
+
+.tabview-custom .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 8px;
+    margin: 4px;
+}
+
+.bg-gradient-to-r {
+    background: linear-gradient(90deg, var(--tw-gradient-stops));
+}
+
+.from-blue-500 {
+    --tw-gradient-from: #3b82f6;
+    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(59, 130, 246, 0));
+}
+
+.to-purple-600 {
+    --tw-gradient-to: #9333ea;
+}
+
+.wizard-content {
+    min-height: 300px;
+}
+`;
+
+// Injection du style dans le document
+if (typeof document !== 'undefined') {
+    const style = document.createElement('style');
+    style.textContent = customStyles;
+    document.head.appendChild(style);
+}
+
+
+
+=======
 'use client';
 
 import React, { useState, useRef, useEffect } from 'react';
@@ -851,12 +2554,13 @@ const ParametresPage = () => {
                         {emailSettings.emailsNotification.map((email, index) => (
                             <Chip 
                                 key={index}
-                                label={email} 
-                                removable 
+                                label={email}
+                                removable
                                 onRemove={() => {
                                     const newEmails = [...emailSettings.emailsNotification];
                                     newEmails.splice(index, 1);
                                     setEmailSettings({...emailSettings, emailsNotification: newEmails});
+                                    return true;
                                 }}
                             />
                         ))}
@@ -1698,3 +3402,4 @@ if (typeof document !== 'undefined') {
 
 
 
+>>>>>>> 5ed9a80339c59d689b9655e8be1a68312d19d4a1
diff --git a/app/(main)/admin/roles/page.tsx b/app/(main)/admin/roles/page.tsx
index 32237f2..151af83 100644
--- a/app/(main)/admin/roles/page.tsx
+++ b/app/(main)/admin/roles/page.tsx
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 'use client';
 
 import React, { useState, useEffect, useRef } from 'react';
@@ -710,3 +711,717 @@ const ProtectedRolesPermissionsPage = () => {
 };
 
 export default ProtectedRolesPermissionsPage;
+=======
+'use client';
+
+import React, { useState, useEffect, useRef } from 'react';
+import { useAuth } from '../../../../contexts/AuthContext';
+import ProtectedRoute from '../../../../components/auth/ProtectedRoute';
+import { Card } from 'primereact/card';
+import { Button } from 'primereact/button';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Toast } from 'primereact/toast';
+import { Toolbar } from 'primereact/toolbar';
+import { InputText } from 'primereact/inputtext';
+import { Dialog } from 'primereact/dialog';
+import { Dropdown } from 'primereact/dropdown';
+import { InputTextarea } from 'primereact/inputtextarea';
+import { Tag } from 'primereact/tag';
+import { Checkbox } from 'primereact/checkbox';
+import { Tree } from 'primereact/tree';
+import { TabView, TabPanel } from 'primereact/tabview';
+import { Panel } from 'primereact/panel';
+import { Badge } from 'primereact/badge';
+import { Chip } from 'primereact/chip';
+
+interface Permission {
+    id: string;
+    nom: string;
+    description: string;
+    module: string;
+    action: 'CREATE' | 'READ' | 'UPDATE' | 'DELETE' | 'EXECUTE';
+    ressource: string;
+    cle: string;
+}
+
+interface Role {
+    id: string;
+    nom: string;
+    description: string;
+    type: 'SYSTEM' | 'CUSTOM';
+    permissions: string[];
+    utilisateursAssignes: number;
+    dateCreation: Date;
+    dateModification: Date;
+    actif: boolean;
+    couleur: string;
+    priorite: number;
+    heriteDe?: string;
+}
+
+interface ModulePermission {
+    module: string;
+    permissions: Permission[];
+}
+
+const RolesPermissionsPage = () => {
+    const [roles, setRoles] = useState<Role[]>([]);
+    const [permissions, setPermissions] = useState<Permission[]>([]);
+    const [modulesPermissions, setModulesPermissions] = useState<ModulePermission[]>([]);
+    const [selectedRoles, setSelectedRoles] = useState<Role[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [globalFilter, setGlobalFilter] = useState('');
+    const [roleDialog, setRoleDialog] = useState(false);
+    const [permissionDialog, setPermissionDialog] = useState(false);
+    const [deleteRoleDialog, setDeleteRoleDialog] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const [role, setRole] = useState<Role>({
+        id: '',
+        nom: '',
+        description: '',
+        type: 'CUSTOM',
+        permissions: [],
+        utilisateursAssignes: 0,
+        dateCreation: new Date(),
+        dateModification: new Date(),
+        actif: true,
+        couleur: '#2196F3',
+        priorite: 0
+    });
+    const [permission, setPermission] = useState<Permission>({
+        id: '',
+        nom: '',
+        description: '',
+        module: '',
+        action: 'READ',
+        ressource: '',
+        cle: ''
+    });
+    const [submitted, setSubmitted] = useState(false);
+    const [selectedPermissions, setSelectedPermissions] = useState<string[]>([]);
+    const toast = useRef<Toast>(null);
+    const dt = useRef<DataTable<Role[]>>(null);
+
+    const modules = [
+        'Dashboard', 'Utilisateurs', 'Clients', 'Chantiers', 'Devis', 'Factures', 
+        'Stock', 'Planning', 'Rapports', 'Administration', 'Système'
+    ];
+
+    const actions = [
+        { label: 'Créer', value: 'CREATE' },
+        { label: 'Lire', value: 'READ' },
+        { label: 'Modifier', value: 'UPDATE' },
+        { label: 'Supprimer', value: 'DELETE' },
+        { label: 'Exécuter', value: 'EXECUTE' }
+    ];
+
+    const couleurs = [
+        { label: 'Bleu', value: '#2196F3' },
+        { label: 'Vert', value: '#4CAF50' },
+        { label: 'Orange', value: '#FF9800' },
+        { label: 'Rouge', value: '#F44336' },
+        { label: 'Violet', value: '#9C27B0' },
+        { label: 'Indigo', value: '#3F51B5' }
+    ];
+
+    useEffect(() => {
+        loadData();
+    }, []);
+
+    const loadData = async () => {
+        try {
+            setLoading(true);
+            
+            // TODO: Remplacer par un appel API réel pour charger les permissions depuis le backend
+            // Exemple: const response = await fetch('/api/admin/permissions');
+            // const permissions = await response.json();
+            const mockPermissions: Permission[] = [];
+
+            // TODO: Remplacer par un appel API réel pour charger les rôles depuis le backend
+            // Exemple: const response = await fetch('/api/admin/roles');
+            // const roles = await response.json();
+            const mockRoles: Role[] = [];
+
+            // Groupement par modules
+            const groupedPermissions: ModulePermission[] = modules.map(module => ({
+                module,
+                permissions: mockPermissions.filter(p => p.module === module)
+            })).filter(group => group.permissions.length > 0);
+
+            setPermissions(mockPermissions);
+            setRoles(mockRoles);
+            setModulesPermissions(groupedPermissions);
+        } catch (error) {
+            console.error('Erreur lors du chargement:', error);
+            toast.current?.show({
+                severity: 'error',
+                summary: 'Erreur',
+                detail: 'Impossible de charger les données',
+                life: 3000
+            });
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const openNewRole = () => {
+        setRole({
+            id: '',
+            nom: '',
+            description: '',
+            type: 'CUSTOM',
+            permissions: [],
+            utilisateursAssignes: 0,
+            dateCreation: new Date(),
+            dateModification: new Date(),
+            actif: true,
+            couleur: '#2196F3',
+            priorite: 0
+        });
+        setSelectedPermissions([]);
+        setSubmitted(false);
+        setRoleDialog(true);
+    };
+
+    const editRole = (role: Role) => {
+        setRole({ ...role });
+        setSelectedPermissions([...role.permissions]);
+        setRoleDialog(true);
+    };
+
+    const confirmDeleteRole = (role: Role) => {
+        setRole(role);
+        setDeleteRoleDialog(true);
+    };
+
+    const deleteRole = () => {
+        if (role.type === 'SYSTEM') {
+            toast.current?.show({
+                severity: 'error',
+                summary: 'Erreur',
+                detail: 'Impossible de supprimer un rôle système',
+                life: 3000
+            });
+            return;
+        }
+
+        const updatedRoles = roles.filter(r => r.id !== role.id);
+        setRoles(updatedRoles);
+        setDeleteRoleDialog(false);
+        toast.current?.show({
+            severity: 'success',
+            summary: 'Succès',
+            detail: 'Rôle supprimé',
+            life: 3000
+        });
+    };
+
+    const saveRole = () => {
+        setSubmitted(true);
+
+        if (role.nom.trim() && role.description.trim()) {
+            let updatedRoles = [...roles];
+            const roleToSave = { ...role, permissions: selectedPermissions };
+            
+            if (role.id) {
+                // Mise à jour
+                const index = roles.findIndex(r => r.id === role.id);
+                updatedRoles[index] = { ...roleToSave, dateModification: new Date() };
+                
+                toast.current?.show({
+                    severity: 'success',
+                    summary: 'Succès',
+                    detail: 'Rôle mis à jour',
+                    life: 3000
+                });
+            } else {
+                // Création
+                const newRole = {
+                    ...roleToSave,
+                    id: Date.now().toString(),
+                    dateCreation: new Date(),
+                    dateModification: new Date()
+                };
+                updatedRoles.push(newRole);
+                
+                toast.current?.show({
+                    severity: 'success',
+                    summary: 'Succès',
+                    detail: 'Rôle créé',
+                    life: 3000
+                });
+            }
+
+            setRoles(updatedRoles);
+            setRoleDialog(false);
+        }
+    };
+
+    const duplicateRole = (role: Role) => {
+        const newRole = {
+            ...role,
+            id: Date.now().toString(),
+            nom: `${role.nom} (Copie)`,
+            type: 'CUSTOM' as const,
+            utilisateursAssignes: 0,
+            dateCreation: new Date(),
+            dateModification: new Date()
+        };
+        
+        setRoles([...roles, newRole]);
+        toast.current?.show({
+            severity: 'success',
+            summary: 'Succès',
+            detail: 'Rôle dupliqué',
+            life: 3000
+        });
+    };
+
+    const onPermissionToggle = (permissionId: string, checked: boolean) => {
+        if (checked) {
+            setSelectedPermissions([...selectedPermissions, permissionId]);
+        } else {
+            setSelectedPermissions(selectedPermissions.filter(id => id !== permissionId));
+        }
+    };
+
+    const selectAllPermissionsForModule = (module: string, checked: boolean) => {
+        const modulePermissions = permissions.filter(p => p.module === module).map(p => p.id);
+        
+        if (checked) {
+            const newPermissions = [...selectedPermissions];
+            modulePermissions.forEach(permId => {
+                if (!newPermissions.includes(permId)) {
+                    newPermissions.push(permId);
+                }
+            });
+            setSelectedPermissions(newPermissions);
+        } else {
+            setSelectedPermissions(selectedPermissions.filter(id => !modulePermissions.includes(id)));
+        }
+    };
+
+    const exportCSV = () => {
+        dt.current?.exportCSV();
+    };
+
+    const leftToolbarTemplate = () => {
+        return (
+            <div className="flex flex-wrap gap-2">
+                <Button 
+                    label="Nouveau Rôle" 
+                    icon="pi pi-plus" 
+                    severity="success" 
+                    onClick={openNewRole} 
+                />
+            </div>
+        );
+    };
+
+    const rightToolbarTemplate = () => {
+        return (
+            <div className="flex flex-wrap gap-2">
+                <Button 
+                    label="Exporter" 
+                    icon="pi pi-upload" 
+                    severity="help" 
+                    onClick={exportCSV} 
+                />
+                <span className="p-input-icon-left">
+                    <i className="pi pi-search" />
+                    <InputText 
+                        type="search" 
+                        placeholder="Rechercher..." 
+                        onInput={(e) => setGlobalFilter(e.currentTarget.value)} 
+                    />
+                </span>
+            </div>
+        );
+    };
+
+    const actionBodyTemplate = (rowData: Role) => {
+        return (
+            <div className="flex gap-2">
+                <Button 
+                    icon="pi pi-eye" 
+                    rounded 
+                    severity="info" 
+                    onClick={() => editRole(rowData)} 
+                    tooltip="Voir/Modifier"
+                />
+                <Button 
+                    icon="pi pi-copy" 
+                    rounded 
+                    severity="success" 
+                    onClick={() => duplicateRole(rowData)} 
+                    tooltip="Dupliquer"
+                />
+                {rowData.type === 'CUSTOM' && (
+                    <Button 
+                        icon="pi pi-trash" 
+                        rounded 
+                        severity="danger" 
+                        onClick={() => confirmDeleteRole(rowData)} 
+                        tooltip="Supprimer"
+                    />
+                )}
+            </div>
+        );
+    };
+
+    const typeBodyTemplate = (rowData: Role) => {
+        return (
+            <Tag 
+                value={rowData.type === 'SYSTEM' ? 'Système' : 'Personnalisé'} 
+                severity={rowData.type === 'SYSTEM' ? 'danger' : 'success'} 
+            />
+        );
+    };
+
+    const utilisateursBodyTemplate = (rowData: Role) => {
+        return <Badge value={rowData.utilisateursAssignes} severity="info" />;
+    };
+
+    const permissionsBodyTemplate = (rowData: Role) => {
+        return <Badge value={rowData.permissions.length} />;
+    };
+
+    const couleurBodyTemplate = (rowData: Role) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <div 
+                    className="w-1rem h-1rem border-circle" 
+                    style={{ backgroundColor: rowData.couleur }}
+                ></div>
+                <span>{rowData.nom}</span>
+            </div>
+        );
+    };
+
+    const prioriteBodyTemplate = (rowData: Role) => {
+        const getPriorityColor = (priority: number) => {
+            if (priority >= 90) return 'danger';
+            if (priority >= 70) return 'warning';
+            if (priority >= 50) return 'info';
+            return 'success';
+        };
+
+        return <Tag value={rowData.priorite} severity={getPriorityColor(rowData.priorite)} />;
+    };
+
+    const header = (
+        <div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
+            <h5 className="m-0">Gestion des Rôles et Permissions</h5>
+            <div className="flex gap-2">
+                <Badge value={roles.filter(r => r.actif).length} className="mr-2" />
+                <span className="text-sm">rôles actifs</span>
+            </div>
+        </div>
+    );
+
+    return (
+        <div className="grid">
+            <div className="col-12">
+                <Card>
+                    <Toast ref={toast} />
+                    
+                    <TabView activeIndex={activeIndex} onTabChange={(e) => setActiveIndex(e.index)}>
+                        <TabPanel header="Rôles" leftIcon="pi pi-users mr-2">
+                            <Toolbar className="mb-4" left={leftToolbarTemplate} right={rightToolbarTemplate} />
+
+                            <DataTable
+                                ref={dt}
+                                value={roles}
+                                selection={selectedRoles}
+                                onSelectionChange={(e) => setSelectedRoles(e.value)}
+                                selectionMode="multiple"
+                                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} rôles"
+                                globalFilter={globalFilter}
+                                emptyMessage="Aucun rôle trouvé."
+                                header={header}
+                                loading={loading}
+                            >
+                                <Column selectionMode="multiple" headerStyle={{ width: '4rem' }} />
+                                <Column field="nom" header="Nom" body={couleurBodyTemplate} sortable />
+                                <Column field="description" header="Description" />
+                                <Column field="type" header="Type" body={typeBodyTemplate} sortable />
+                                <Column field="priorite" header="Priorité" body={prioriteBodyTemplate} sortable />
+                                <Column field="permissions" header="Permissions" body={permissionsBodyTemplate} />
+                                <Column field="utilisateursAssignes" header="Utilisateurs" body={utilisateursBodyTemplate} sortable />
+                                <Column field="dateModification" header="Modifié le" body={(rowData) => rowData.dateModification.toLocaleDateString()} sortable />
+                                <Column body={actionBodyTemplate} headerStyle={{ minWidth: '8rem' }} />
+                            </DataTable>
+                        </TabPanel>
+
+                        <TabPanel header="Permissions" leftIcon="pi pi-key mr-2">
+                            <div className="grid">
+                                {modulesPermissions.map((moduleGroup, index) => (
+                                    <div key={index} className="col-12 md:col-6 lg:col-4">
+                                        <Panel header={moduleGroup.module} className="mb-3">
+                                            <div className="grid">
+                                                {moduleGroup.permissions.map((permission) => (
+                                                    <div key={permission.id} className="col-12">
+                                                        <div className="flex align-items-center justify-content-between p-2 border-bottom-1 surface-border">
+                                                            <div>
+                                                                <div className="font-semibold">{permission.nom}</div>
+                                                                <div className="text-sm text-color-secondary">{permission.description}</div>
+                                                                <Chip 
+                                                                    label={permission.action} 
+                                                                    className="mt-1" 
+                                                                    style={{ fontSize: '0.75rem' }}
+                                                                />
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                ))}
+                                            </div>
+                                        </Panel>
+                                    </div>
+                                ))}
+                            </div>
+                        </TabPanel>
+
+                        <TabPanel header="Matrice" leftIcon="pi pi-table mr-2">
+                            <Card title="Matrice Rôles-Permissions">
+                                <div className="overflow-auto">
+                                    <table className="w-full">
+                                        <thead>
+                                            <tr>
+                                                <th className="text-left p-2 border-bottom-1 surface-border">Permission</th>
+                                                {roles.map(role => (
+                                                    <th key={role.id} className="text-center p-2 border-bottom-1 surface-border">
+                                                        <div className="flex flex-column align-items-center gap-1">
+                                                            <div 
+                                                                className="w-1rem h-1rem border-circle" 
+                                                                style={{ backgroundColor: role.couleur }}
+                                                            ></div>
+                                                            <span className="text-xs">{role.nom}</span>
+                                                        </div>
+                                                    </th>
+                                                ))}
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            {modulesPermissions.map((moduleGroup, moduleIndex) => (
+                                                <React.Fragment key={moduleIndex}>
+                                                    <tr>
+                                                        <td colSpan={roles.length + 1} className="p-2 font-bold surface-100">
+                                                            {moduleGroup.module}
+                                                        </td>
+                                                    </tr>
+                                                    {moduleGroup.permissions.map((permission) => (
+                                                        <tr key={permission.id}>
+                                                            <td className="p-2 border-bottom-1 surface-border">
+                                                                <div className="font-semibold">{permission.nom}</div>
+                                                                <div className="text-xs text-color-secondary">{permission.action}</div>
+                                                            </td>
+                                                            {roles.map(role => (
+                                                                <td key={role.id} className="text-center p-2 border-bottom-1 surface-border">
+                                                                    {role.permissions.includes(permission.id) ? (
+                                                                        <i className="pi pi-check text-green-500"></i>
+                                                                    ) : (
+                                                                        <i className="pi pi-times text-red-500"></i>
+                                                                    )}
+                                                                </td>
+                                                            ))}
+                                                        </tr>
+                                                    ))}
+                                                </React.Fragment>
+                                            ))}
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </Card>
+                        </TabPanel>
+                    </TabView>
+
+                    {/* Dialog rôle */}
+                    <Dialog 
+                        visible={roleDialog} 
+                        style={{ width: '900px' }} 
+                        header="Détails du rôle" 
+                        modal 
+                        className="p-fluid" 
+                        footer={
+                            <div className="flex justify-content-end gap-2">
+                                <Button label="Annuler" icon="pi pi-times" text onClick={() => setRoleDialog(false)} />
+                                <Button label="Sauvegarder" icon="pi pi-check" onClick={saveRole} />
+                            </div>
+                        }
+                        onHide={() => setRoleDialog(false)}
+                    >
+                        <TabView>
+                            <TabPanel header="Informations générales">
+                                <div className="formgrid grid">
+                                    <div className="field col-12 md:col-6">
+                                        <label htmlFor="nom">Nom du rôle *</label>
+                                        <InputText 
+                                            id="nom" 
+                                            value={role.nom} 
+                                            onChange={(e) => setRole({...role, nom: e.target.value})} 
+                                            required 
+                                            className={submitted && !role.nom ? 'p-invalid' : ''} 
+                                        />
+                                        {submitted && !role.nom && <small className="p-invalid">Le nom est requis.</small>}
+                                    </div>
+
+                                    <div className="field col-12 md:col-6">
+                                        <label htmlFor="couleur">Couleur</label>
+                                        <Dropdown 
+                                            id="couleur" 
+                                            value={role.couleur} 
+                                            options={couleurs} 
+                                            onChange={(e) => setRole({...role, couleur: e.value})} 
+                                            itemTemplate={(option) => (
+                                                <div className="flex align-items-center gap-2">
+                                                    <div 
+                                                        className="w-1rem h-1rem border-circle" 
+                                                        style={{ backgroundColor: option.value }}
+                                                    ></div>
+                                                    <span>{option.label}</span>
+                                                </div>
+                                            )}
+                                        />
+                                    </div>
+
+                                    <div className="field col-12">
+                                        <label htmlFor="description">Description *</label>
+                                        <InputTextarea 
+                                            id="description" 
+                                            value={role.description} 
+                                            onChange={(e) => setRole({...role, description: e.target.value})} 
+                                            rows={3}
+                                            required 
+                                            className={submitted && !role.description ? 'p-invalid' : ''} 
+                                        />
+                                        {submitted && !role.description && <small className="p-invalid">La description est requise.</small>}
+                                    </div>
+
+                                    <div className="field col-12 md:col-6">
+                                        <label htmlFor="priorite">Priorité (0-100)</label>
+                                        <InputText 
+                                            id="priorite" 
+                                            type="number"
+                                            min="0"
+                                            max="100"
+                                            value={role.priorite.toString()} 
+                                            onChange={(e) => setRole({...role, priorite: parseInt(e.target.value) || 0})} 
+                                        />
+                                    </div>
+
+                                    <div className="field col-12 md:col-6">
+                                        <label>Type de rôle</label>
+                                        <div className="flex align-items-center">
+                                            <Tag 
+                                                value={role.type === 'SYSTEM' ? 'Système' : 'Personnalisé'} 
+                                                severity={role.type === 'SYSTEM' ? 'danger' : 'success'} 
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+                            </TabPanel>
+
+                            <TabPanel header="Permissions">
+                                <div className="grid">
+                                    {modulesPermissions.map((moduleGroup, index) => (
+                                        <div key={index} className="col-12">
+                                            <Panel 
+                                                header={
+                                                    <div className="flex align-items-center justify-content-between w-full">
+                                                        <span>{moduleGroup.module}</span>
+                                                        <Checkbox 
+                                                            checked={moduleGroup.permissions.every(p => selectedPermissions.includes(p.id))}
+                                                            onChange={(e) => selectAllPermissionsForModule(moduleGroup.module, e.checked || false)}
+                                                        />
+                                                    </div>
+                                                }
+                                                className="mb-3"
+                                            >
+                                                <div className="grid">
+                                                    {moduleGroup.permissions.map((permission) => (
+                                                        <div key={permission.id} className="col-12 md:col-6">
+                                                            <div className="flex align-items-center">
+                                                                <Checkbox 
+                                                                    checked={selectedPermissions.includes(permission.id)}
+                                                                    onChange={(e) => onPermissionToggle(permission.id, e.checked || false)}
+                                                                />
+                                                                <div className="ml-2">
+                                                                    <div className="font-semibold">{permission.nom}</div>
+                                                                    <div className="text-sm text-color-secondary">{permission.description}</div>
+                                                                    <Chip 
+                                                                        label={permission.action} 
+                                                                        className="mt-1" 
+                                                                        style={{ fontSize: '0.75rem' }}
+                                                                    />
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    ))}
+                                                </div>
+                                            </Panel>
+                                        </div>
+                                    ))}
+                                </div>
+
+                                <div className="mt-3 p-3 surface-100 border-round">
+                                    <div className="font-semibold mb-2">Résumé des permissions sélectionnées:</div>
+                                    <Badge value={selectedPermissions.length} className="mr-2" />
+                                    <span>permissions sélectionnées</span>
+                                </div>
+                            </TabPanel>
+                        </TabView>
+                    </Dialog>
+
+                    {/* Dialog suppression */}
+                    <Dialog 
+                        visible={deleteRoleDialog} 
+                        style={{ width: '450px' }} 
+                        header="Confirmer la suppression" 
+                        modal 
+                        footer={
+                            <div className="flex justify-content-end gap-2">
+                                <Button label="Non" icon="pi pi-times" text onClick={() => setDeleteRoleDialog(false)} />
+                                <Button label="Oui" icon="pi pi-check" onClick={deleteRole} />
+                            </div>
+                        }
+                        onHide={() => setDeleteRoleDialog(false)}
+                    >
+                        <div className="flex align-items-center justify-content-center">
+                            <i className="pi pi-exclamation-triangle mr-3" style={{ fontSize: '2rem' }} />
+                            {role && (
+                                <span>
+                                    Êtes-vous sûr de vouloir supprimer le rôle <b>{role.nom}</b> ?
+                                    {role.utilisateursAssignes > 0 && (
+                                        <div className="mt-2">
+                                            <small className="text-orange-600">
+                                                Attention: {role.utilisateursAssignes} utilisateur(s) ont ce rôle assigné.
+                                            </small>
+                                        </div>
+                                    )}
+                                </span>
+                            )}
+                        </div>
+                    </Dialog>
+                </Card>
+            </div>
+        </div>
+    );
+};
+
+const ProtectedRolesPermissionsPage = () => {
+    return (
+        <ProtectedRoute requiredRoles={['SUPER_ADMIN', 'ADMIN']}>
+            <RolesPermissionsPage />
+        </ProtectedRoute>
+    );
+};
+
+export default ProtectedRolesPermissionsPage;
+>>>>>>> 5ed9a80339c59d689b9655e8be1a68312d19d4a1
diff --git a/app/(main)/admin/sauvegarde/page.tsx b/app/(main)/admin/sauvegarde/page.tsx
index e6c1263..edd9a87 100644
--- a/app/(main)/admin/sauvegarde/page.tsx
+++ b/app/(main)/admin/sauvegarde/page.tsx
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 'use client';
 
 import React, { useState, useRef, useEffect } from 'react';
@@ -1279,3 +1280,1286 @@ if (typeof document !== 'undefined') {
 }
 
 
+=======
+'use client';
+
+import React, { useState, useRef, useEffect } from 'react';
+import { Card } from 'primereact/card';
+import { Button } from 'primereact/button';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Toast } from 'primereact/toast';
+import { Toolbar } from 'primereact/toolbar';
+import { Tag } from 'primereact/tag';
+import { Dialog } from 'primereact/dialog';
+import { Calendar } from 'primereact/calendar';
+import { Dropdown } from 'primereact/dropdown';
+import { InputSwitch } from 'primereact/inputswitch';
+import { InputNumber } from 'primereact/inputnumber';
+import { ProgressBar } from 'primereact/progressbar';
+import { FileUpload } from 'primereact/fileupload';
+import { Checkbox } from 'primereact/checkbox';
+import { RadioButton } from 'primereact/radiobutton';
+import { Timeline } from 'primereact/timeline';
+import { ConfirmDialog, confirmDialog } from 'primereact/confirmdialog';
+import { Divider } from 'primereact/divider';
+import { Panel } from 'primereact/panel';
+import { Badge } from 'primereact/badge';
+import { TabView, TabPanel } from 'primereact/tabview';
+import { SpeedDial } from 'primereact/speeddial';
+import { Accordion, AccordionTab } from 'primereact/accordion';
+import { Avatar } from 'primereact/avatar';
+import { AvatarGroup } from 'primereact/avatargroup';
+import { Chip } from 'primereact/chip';
+import { Message } from 'primereact/message';
+import { Messages } from 'primereact/messages';
+import { Skeleton } from 'primereact/skeleton';
+import { ScrollPanel } from 'primereact/scrollpanel';
+import { Splitter, SplitterPanel } from 'primereact/splitter';
+import { DataView } from 'primereact/dataview';
+import { Knob } from 'primereact/knob';
+// import { MeterGroup } from 'primereact/metergroup'; // Non disponible dans cette version
+import { Chart } from 'primereact/chart';
+import { Sidebar } from 'primereact/sidebar';
+import { OverlayPanel } from 'primereact/overlaypanel';
+import { ContextMenu } from 'primereact/contextmenu';
+import { Menu } from 'primereact/menu';
+import { TieredMenu } from 'primereact/tieredmenu';
+import { Fieldset } from 'primereact/fieldset';
+import { Steps } from 'primereact/steps';
+import { MenuItem } from 'primereact/menuitem';
+import { InputText } from 'primereact/inputtext';
+import { Rating } from 'primereact/rating';
+import { Slider } from 'primereact/slider';
+import { ToggleButton } from 'primereact/togglebutton';
+import { SelectButton } from 'primereact/selectbutton';
+import { ColorPicker } from 'primereact/colorpicker';
+import { MultiSelect } from 'primereact/multiselect';
+import { ListBox } from 'primereact/listbox';
+import { OrderList } from 'primereact/orderlist';
+import { PickList } from 'primereact/picklist';
+import { DataScroller } from 'primereact/datascroller';
+import { VirtualScroller } from 'primereact/virtualscroller';
+import { Galleria } from 'primereact/galleria';
+import { Image } from 'primereact/image';
+import { Carousel } from 'primereact/carousel';
+import { Terminal } from 'primereact/terminal';
+import { DeferredContent } from 'primereact/deferredcontent';
+import { ScrollTop } from 'primereact/scrolltop';
+import { BlockUI } from 'primereact/blockui';
+import { TreeTable } from 'primereact/treetable';
+import { Tree } from 'primereact/tree';
+import { Mention } from 'primereact/mention';
+import { Editor } from 'primereact/editor';
+import { AutoComplete } from 'primereact/autocomplete';
+import { InputMask } from 'primereact/inputmask';
+import { Password } from 'primereact/password';
+import { CascadeSelect } from 'primereact/cascadeselect';
+import { TreeSelect } from 'primereact/treeselect';
+
+interface Backup {
+    id: string;
+    nom: string;
+    type: string;
+    statut: 'EN_COURS' | 'TERMINE' | 'ERREUR';
+    dateCreation: Date;
+    dateModification?: Date;
+    taille: number;
+    destination: string;
+    checksum?: string;
+    description?: string;
+}
+
+interface BackupSchedule {
+    id: string;
+    nom: string;
+    frequence: string;
+    heure: Date;
+    actif: boolean;
+    prochainExecution: Date;
+    derniereExecution?: Date;
+    nombreBackups: number;
+    description?: string;
+    inclureBase: boolean;
+    inclureFichiers: boolean;
+    inclureConfig: boolean;
+    compression: boolean;
+    joursSelection?: string[];
+}
+
+interface RestorePoint {
+    id: string;
+    nom: string;
+    dateCreation: Date;
+    taille: number;
+    description?: string;
+}
+
+const SauvegardePage = () => {
+    const [backups, setBackups] = useState<Backup[]>([]);
+    const [schedules, setSchedules] = useState<BackupSchedule[]>([]);
+    const [restorePoints, setRestorePoints] = useState<RestorePoint[]>([]);
+    const [loading, setLoading] = useState(false);
+    const [blocked, setBlocked] = useState(false);
+    const [backupInProgress, setBackupInProgress] = useState(false);
+    const [restoreInProgress, setRestoreInProgress] = useState(false);
+    const [progress, setProgress] = useState(0);
+    const [restoreProgress, setRestoreProgress] = useState(0);
+    const [globalFilter, setGlobalFilter] = useState('');
+    const [scheduleDialog, setScheduleDialog] = useState(false);
+    const [restoreDialog, setRestoreDialog] = useState(false);
+    const [monitoringDialog, setMonitoringDialog] = useState(false);
+    const [analyticsDialog, setAnalyticsDialog] = useState(false);
+    const [configDialog, setConfigDialog] = useState(false);
+    const [selectedBackup, setSelectedBackup] = useState<Backup | null>(null);
+    const [selectedSchedule, setSelectedSchedule] = useState<BackupSchedule | null>(null);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const [sidebarVisible, setSidebarVisible] = useState(false);
+    const [autoRefresh, setAutoRefresh] = useState(true);
+    const [refreshInterval, setRefreshInterval] = useState(30);
+    const [viewMode, setViewMode] = useState<'table' | 'grid' | 'timeline'>('table');
+    const [storageQuota, setStorageQuota] = useState(85);
+    const [systemHealth, setSystemHealth] = useState(92);
+    const [backupSpeed, setBackupSpeed] = useState(45);
+    const [securityLevel, setSecurityLevel] = useState(88);
+    const [compressionRatio, setCompressionRatio] = useState(67);
+    const [networkBandwidth, setNetworkBandwidth] = useState(234);
+    const [activeConnections, setActiveConnections] = useState(12);
+    const [encryptionStrength, setEncryptionStrength] = useState(256);
+    const [retentionCompliance, setRetentionCompliance] = useState(95);
+    const [replicationStatus, setReplicationStatus] = useState('active');
+    const [cloudSync, setCloudSync] = useState(true);
+    const [incrementalBackup, setIncrementalBackup] = useState(true);
+    const [verificationEnabled, setVerificationEnabled] = useState(true);
+    const [compressionLevel, setCompressionLevel] = useState(6);
+    const [notificationLevel, setNotificationLevel] = useState('all');
+    const [searchTerm, setSearchTerm] = useState('');
+    const [selectedBackups, setSelectedBackups] = useState<Backup[]>([]);
+    const [kpiData, setKpiData] = useState({
+        totalBackups: 0,
+        successRate: 0,
+        storageUsed: 0,
+        avgDuration: 0,
+        lastBackup: null,
+        scheduledCount: 0
+    });
+    const [chartData, setChartData] = useState({});
+    const [performanceMetrics, setPerformanceMetrics] = useState([]);
+    const [alertsData, setAlertsData] = useState([]);
+    const [storageAnalytics, setStorageAnalytics] = useState([]);
+    const [complianceReport, setComplianceReport] = useState([]);
+    const [auditTrail, setAuditTrail] = useState([]);
+    const [backupVerification, setBackupVerification] = useState([]);
+    const [cloudProviders, setCloudProviders] = useState([]);
+    const [replicationTargets, setReplicationTargets] = useState([]);
+    const [comparisonMode, setComparisonMode] = useState(false);
+    const [selectedForComparison, setSelectedForComparison] = useState<Backup[]>([]);
+    const [exportProgress, setExportProgress] = useState(0);
+    const [importProgress, setImportProgress] = useState(0);
+    const [terminalVisible, setTerminalVisible] = useState(false);
+    const [wizardMode, setWizardMode] = useState(false);
+    const [wizardStep, setWizardStep] = useState(0);
+    const [smartRecommendations, setSmartRecommendations] = useState([]);
+    const [predictiveAnalysis, setPredictiveAnalysis] = useState({});
+    const [costOptimization, setCostOptimization] = useState([]);
+    
+    const toast = useRef<Toast>(null);
+    const messages = useRef<Messages>(null);
+    const overlayPanel = useRef<OverlayPanel>(null);
+    const contextMenu = useRef<ContextMenu>(null);
+    const terminal = useRef<Terminal>(null);
+    const dt = useRef<DataTable<any>>(null);
+
+    // Configuration pour l'interface utilisateur ultra-avancée
+    const frequenceOptions = [
+        { label: 'Toutes les heures', value: 'HORAIRE', icon: 'pi pi-clock' },
+        { label: 'Quotidien', value: 'QUOTIDIEN', icon: 'pi pi-calendar' },
+        { label: 'Hebdomadaire', value: 'HEBDOMADAIRE', icon: 'pi pi-calendar-times' },
+        { label: 'Mensuel', value: 'MENSUEL', icon: 'pi pi-calendar-plus' },
+        { label: 'Temps réel', value: 'REALTIME', icon: 'pi pi-bolt' },
+        { label: 'Sur événement', value: 'EVENT', icon: 'pi pi-exclamation-triangle' }
+    ];
+
+    const viewModeOptions = [
+        { label: 'Tableau', value: 'table', icon: 'pi pi-table' },
+        { label: 'Grille', value: 'grid', icon: 'pi pi-th-large' },
+        { label: 'Timeline', value: 'timeline', icon: 'pi pi-calendar' }
+    ];
+
+    const notificationOptions = [
+        { label: 'Toutes', value: 'all' },
+        { label: 'Erreurs uniquement', value: 'errors' },
+        { label: 'Critiques', value: 'critical' },
+        { label: 'Aucune', value: 'none' }
+    ];
+
+    const speedDialActions = [
+        { label: 'Sauvegarde rapide', icon: 'pi pi-save', command: () => startManualBackup() },
+        { label: 'Restauration', icon: 'pi pi-replay', command: () => setRestoreDialog(true) },
+        { label: 'Nouvelle planification', icon: 'pi pi-calendar-plus', command: () => setScheduleDialog(true) },
+        { label: 'Nettoyage', icon: 'pi pi-trash', command: () => cleanupOldBackups() },
+        { label: 'Synchronisation cloud', icon: 'pi pi-cloud-upload', command: () => syncToCloud() },
+        { label: 'Vérification intégrité', icon: 'pi pi-shield', command: () => verifyBackups() }
+    ];
+
+    const wizardSteps = [
+        { label: 'Configuration', icon: 'pi pi-cog' },
+        { label: 'Destination', icon: 'pi pi-folder' },
+        { label: 'Planification', icon: 'pi pi-calendar' },
+        { label: 'Sécurité', icon: 'pi pi-shield' },
+        { label: 'Validation', icon: 'pi pi-check' }
+    ];
+
+    const cloudProvidersData = [
+        { name: 'AWS S3', status: 'connected', quota: 1000, used: 345, icon: 'pi pi-amazon' },
+        { name: 'Google Cloud', status: 'connected', quota: 500, used: 123, icon: 'pi pi-google' },
+        { name: 'Azure Blob', status: 'disconnected', quota: 750, used: 0, icon: 'pi pi-microsoft' },
+        { name: 'Dropbox', status: 'error', quota: 100, used: 89, icon: 'pi pi-cloud' }
+    ];
+
+    const alertsExample = [
+        { type: 'warning', message: 'Espace de stockage à 85%', time: new Date(), severity: 'warn' },
+        { type: 'error', message: 'Échec sauvegarde AWS S3', time: new Date(), severity: 'error' },
+        { type: 'info', message: 'Sauvegarde programmée terminée', time: new Date(), severity: 'success' },
+        { type: 'critical', message: 'Corruption détectée dans backup_2024_01_15', time: new Date(), severity: 'error' }
+    ];
+
+    const performanceData = [
+        { label: 'Vitesse sauvegarde', value: backupSpeed, color: '#3B82F6', unit: 'MB/s' },
+        { label: 'Compression', value: compressionRatio, color: '#10B981', unit: '%' },
+        { label: 'Bande passante', value: networkBandwidth, color: '#F59E0B', unit: 'Mbps' },
+        { label: 'Vérifications', value: retentionCompliance, color: '#8B5CF6', unit: '%' }
+    ];
+
+    // Fonctions utilitaires
+    const formatFileSize = (bytes: number) => {
+        if (bytes === 0) return '0 Bytes';
+        const k = 1024;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    };
+
+    const formatDuration = (seconds: number) => {
+        const hours = Math.floor(seconds / 3600);
+        const minutes = Math.floor((seconds % 3600) / 60);
+        const secs = seconds % 60;
+        
+        if (hours > 0) {
+            return `${hours}h ${minutes}m ${secs}s`;
+        } else if (minutes > 0) {
+            return `${minutes}m ${secs}s`;
+        }
+        return `${secs}s`;
+    };
+
+    const formatDateTime = (date: Date) => {
+        return new Date(date).toLocaleString('fr-FR');
+    };
+
+    const formatDate = (date: Date) => {
+        return new Date(date).toLocaleDateString('fr-FR');
+    };
+
+    // Effets et chargement des données
+    useEffect(() => {
+        loadBackupData();
+        loadKPIData();
+        loadAnalytics();
+        loadAlertsData();
+        setCloudProviders(cloudProvidersData);
+        setAlertsData(alertsExample);
+        setPerformanceMetrics(performanceData);
+        
+        if (autoRefresh) {
+            const interval = setInterval(() => {
+                loadBackupData();
+                loadKPIData();
+                updateRealtimeMetrics();
+            }, refreshInterval * 1000);
+            return () => clearInterval(interval);
+        }
+    }, [autoRefresh, refreshInterval]);
+
+    const loadBackupData = async () => {
+        setLoading(true);
+        // TODO: Remplacer par un appel API réel
+        const mockBackups: Backup[] = [];
+        setBackups(mockBackups);
+        
+        const mockSchedules: BackupSchedule[] = [];
+        setSchedules(mockSchedules);
+        
+        const mockRestorePoints: RestorePoint[] = [];
+        setRestorePoints(mockRestorePoints);
+        
+        setLoading(false);
+    };
+
+    const loadKPIData = async () => {
+        // TODO: Remplacer par un appel API réel
+        const mockKPI = {
+            totalBackups: 156,
+            successRate: 94.2,
+            storageUsed: 2.4,
+            avgDuration: 4.2,
+            lastBackup: new Date(),
+            scheduledCount: 8
+        };
+        setKpiData(mockKPI);
+    };
+
+    const loadAnalytics = async () => {
+        // TODO: Remplacer par un appel API réel pour les analytics
+        const mockChartData = {
+            labels: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Jun'],
+            datasets: [
+                {
+                    label: 'Sauvegardes réussies',
+                    data: [25, 32, 28, 45, 38, 42],
+                    backgroundColor: '#10B981',
+                    borderColor: '#047857'
+                },
+                {
+                    label: 'Sauvegardes échouées',
+                    data: [2, 1, 3, 2, 1, 2],
+                    backgroundColor: '#EF4444',
+                    borderColor: '#DC2626'
+                }
+            ]
+        };
+        setChartData(mockChartData);
+    };
+
+    const loadAlertsData = async () => {
+        // TODO: Remplacer par un appel API réel
+        setAlertsData(alertsExample);
+    };
+
+    const updateRealtimeMetrics = () => {
+        setStorageQuota(Math.floor(Math.random() * 15) + 80);
+        setSystemHealth(Math.floor(Math.random() * 10) + 85);
+        setBackupSpeed(Math.floor(Math.random() * 50) + 30);
+        setNetworkBandwidth(Math.floor(Math.random() * 100) + 200);
+        setActiveConnections(Math.floor(Math.random() * 20) + 5);
+    };
+
+    // Actions principales
+    const startManualBackup = () => {
+        setBackupInProgress(true);
+        setProgress(0);
+        
+        const interval = setInterval(() => {
+            setProgress(prev => {
+                if (prev >= 100) {
+                    clearInterval(interval);
+                    setBackupInProgress(false);
+                    toast.current?.show({
+                        severity: 'success',
+                        summary: 'Sauvegarde terminée',
+                        detail: 'La sauvegarde manuelle a été créée avec succès',
+                        life: 3000
+                    });
+                    loadBackupData();
+                    return 100;
+                }
+                return prev + 5;
+            });
+        }, 200);
+    };
+
+    const cleanupOldBackups = () => {
+        confirmDialog({
+            message: 'Supprimer toutes les sauvegardes de plus de 90 jours ?',
+            header: 'Nettoyage automatique',
+            icon: 'pi pi-exclamation-triangle',
+            acceptLabel: 'Nettoyer',
+            rejectLabel: 'Annuler',
+            acceptClassName: 'p-button-warning',
+            accept: () => {
+                setBlocked(true);
+                setTimeout(() => {
+                    setBlocked(false);
+                    toast.current?.show({
+                        severity: 'success',
+                        summary: 'Nettoyage terminé',
+                        detail: '12 anciennes sauvegardes supprimées - 4.2 GB libérés',
+                        life: 5000
+                    });
+                }, 3000);
+            }
+        });
+    };
+
+    const syncToCloud = () => {
+        setBlocked(true);
+        let progress = 0;
+        const interval = setInterval(() => {
+            progress += 10;
+            if (progress >= 100) {
+                clearInterval(interval);
+                setBlocked(false);
+                toast.current?.show({
+                    severity: 'success',
+                    summary: 'Synchronisation terminée',
+                    detail: 'Toutes les sauvegardes ont été synchronisées avec le cloud',
+                    life: 3000
+                });
+            }
+        }, 300);
+    };
+
+    const verifyBackups = () => {
+        setBlocked(true);
+        setTimeout(() => {
+            setBlocked(false);
+            toast.current?.show({
+                severity: 'success',
+                summary: 'Vérification terminée',
+                detail: 'Toutes les sauvegardes ont été vérifiées avec succès',
+                life: 3000
+            });
+        }, 5000);
+    };
+
+    // Composants de rendu
+    const renderKPIDashboard = () => (
+        <div className="grid mb-4">
+            <div className="col-12 md:col-2">
+                <Card className="bg-gradient-to-r from-blue-500 to-blue-600 text-white text-center">
+                    <div className="flex flex-column align-items-center">
+                        <Knob 
+                            value={kpiData.successRate} 
+                            readOnly 
+                            size={60}
+                            strokeWidth={8}
+                            valueColor="white"
+                            rangeColor="rgba(255,255,255,0.3)"
+                        />
+                        <div className="text-sm mt-2 opacity-90">Taux de succès</div>
+                    </div>
+                </Card>
+            </div>
+            
+            <div className="col-12 md:col-2">
+                <Card className="bg-gradient-to-r from-green-500 to-green-600 text-white text-center">
+                    <div className="flex flex-column align-items-center">
+                        <div className="text-2xl font-bold">{kpiData.totalBackups}</div>
+                        <div className="text-sm opacity-90">Sauvegardes</div>
+                        <Avatar icon="pi pi-database" size="large" className="mt-2 bg-white-alpha-20" />
+                    </div>
+                </Card>
+            </div>
+            
+            <div className="col-12 md:col-2">
+                <Card className="bg-gradient-to-r from-purple-500 to-purple-600 text-white text-center">
+                    <div className="flex flex-column align-items-center">
+                        <div className="text-2xl font-bold">{kpiData.storageUsed}TB</div>
+                        <div className="text-sm opacity-90">Stockage utilisé</div>
+                        <ProgressBar 
+                            value={storageQuota} 
+                            className="mt-2 w-full" 
+                            style={{ height: '4px' }}
+                        />
+                    </div>
+                </Card>
+            </div>
+            
+            <div className="col-12 md:col-2">
+                <Card className="bg-gradient-to-r from-orange-500 to-orange-600 text-white text-center">
+                    <div className="flex flex-column align-items-center">
+                        <div className="text-2xl font-bold">{kpiData.avgDuration}min</div>
+                        <div className="text-sm opacity-90">Durée moyenne</div>
+                        <Avatar icon="pi pi-clock" size="large" className="mt-2 bg-white-alpha-20" />
+                    </div>
+                </Card>
+            </div>
+            
+            <div className="col-12 md:col-2">
+                <Card className="bg-gradient-to-r from-teal-500 to-teal-600 text-white text-center">
+                    <div className="flex flex-column align-items-center">
+                        <div className="text-2xl font-bold">{kpiData.scheduledCount}</div>
+                        <div className="text-sm opacity-90">Planifiées actives</div>
+                        <Avatar icon="pi pi-calendar" size="large" className="mt-2 bg-white-alpha-20" />
+                    </div>
+                </Card>
+            </div>
+            
+            <div className="col-12 md:col-2">
+                <Card className="bg-gradient-to-r from-pink-500 to-pink-600 text-white text-center">
+                    <div className="flex flex-column align-items-center">
+                        <Knob 
+                            value={systemHealth} 
+                            readOnly 
+                            size={60}
+                            strokeWidth={8}
+                            valueColor="white"
+                            rangeColor="rgba(255,255,255,0.3)"
+                        />
+                        <div className="text-sm mt-2 opacity-90">Santé système</div>
+                    </div>
+                </Card>
+            </div>
+        </div>
+    );
+
+    const renderRealtimeMonitoring = () => (
+        <Card title="Monitoring temps réel" className="mb-4">
+            <div className="grid">
+                <div className="col-12 md:col-8">
+                    <div className="mb-4">
+                        {performanceMetrics.map((metric, index) => (
+                            <div key={index} className="mb-3">
+                                <div className="flex justify-content-between mb-1">
+                                    <span className="text-sm font-medium">{metric.label}</span>
+                                    <span className="text-sm font-bold">{metric.value}{metric.unit}</span>
+                                </div>
+                                <ProgressBar 
+                                    value={metric.value} 
+                                    className="h-1rem"
+                                    style={{ '--p-progressbar-value-bg': metric.color } as any}
+                                />
+                            </div>
+                        ))}
+                    </div>
+                    
+                    <Chart 
+                        type="line" 
+                        data={{
+                            labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
+                            datasets: [{
+                                label: 'Vitesse de sauvegarde (MB/s)',
+                                data: [20, 35, 60, 45, 70, 30],
+                                borderColor: '#3B82F6',
+                                backgroundColor: 'rgba(59, 130, 245, 0.1)',
+                                tension: 0.4
+                            }]
+                        }}
+                        options={{
+                            responsive: true,
+                            plugins: {
+                                legend: { position: 'top' }
+                            },
+                            scales: {
+                                y: {
+                                    beginAtZero: true
+                                }
+                            }
+                        }}
+                    />
+                </div>
+                
+                <div className="col-12 md:col-4">
+                    <div className="grid">
+                        <div className="col-12">
+                            <div className="bg-blue-50 p-3 border-round text-center">
+                                <i className="pi pi-server text-blue-500 text-2xl mb-2" />
+                                <div className="text-lg font-bold text-blue-700">{activeConnections}</div>
+                                <div className="text-sm text-600">Connexions actives</div>
+                            </div>
+                        </div>
+                        
+                        <div className="col-12">
+                            <div className="bg-green-50 p-3 border-round text-center">
+                                <i className="pi pi-shield text-green-500 text-2xl mb-2" />
+                                <div className="text-lg font-bold text-green-700">AES-{encryptionStrength}</div>
+                                <div className="text-sm text-600">Chiffrement</div>
+                            </div>
+                        </div>
+                        
+                        <div className="col-12">
+                            <div className="bg-purple-50 p-3 border-round text-center">
+                                <i className="pi pi-cloud text-purple-500 text-2xl mb-2" />
+                                <div className="text-lg font-bold text-purple-700">
+                                    {replicationStatus === 'active' ? 'Actif' : 'Inactif'}
+                                </div>
+                                <div className="text-sm text-600">Réplication</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </Card>
+    );
+
+    const renderCloudProviders = () => (
+        <Card title="Fournisseurs Cloud" className="mb-4">
+            <DataView 
+                value={cloudProviders}
+                itemTemplate={(provider) => (
+                    <div className="col-12 md:col-6 lg:col-3 p-2">
+                        <Card className="h-full">
+                            <div className="flex align-items-center justify-content-between mb-3">
+                                <div className="flex align-items-center">
+                                    <Avatar 
+                                        icon={provider.icon} 
+                                        className="mr-2" 
+                                        style={{ backgroundColor: '#DEE2E6', color: '#495057' }}
+                                    />
+                                    <span className="font-bold">{provider.name}</span>
+                                </div>
+                                <Tag 
+                                    value={provider.status} 
+                                    severity={
+                                        provider.status === 'connected' ? 'success' :
+                                        provider.status === 'error' ? 'danger' : 'info'
+                                    }
+                                />
+                            </div>
+                            
+                            <div className="mb-3">
+                                <div className="flex justify-content-between text-sm mb-1">
+                                    <span>Utilisation</span>
+                                    <span>{provider.used}GB / {provider.quota}GB</span>
+                                </div>
+                                <ProgressBar 
+                                    value={(provider.used / provider.quota) * 100} 
+                                    className="h-1rem"
+                                />
+                            </div>
+                            
+                            <div className="flex gap-2">
+                                <Button 
+                                    label="Configurer" 
+                                    size="small" 
+                                    className="flex-1"
+                                />
+                                <Button 
+                                    icon="pi pi-cog" 
+                                    size="small" 
+                                    outlined
+                                />
+                            </div>
+                        </Card>
+                    </div>
+                )}
+                layout="grid"
+            />
+        </Card>
+    );
+
+    const renderAlertsPanel = () => (
+        <Card title="Alertes et notifications" className="mb-4">
+            <div className="flex align-items-center justify-content-between mb-3">
+                <div className="flex align-items-center gap-2">
+                    <Badge value={alertsData.length} severity="warning" />
+                    <span>alertes actives</span>
+                </div>
+                <Button 
+                    label="Tout marquer comme lu" 
+                    size="small" 
+                    text
+                />
+            </div>
+            
+            <Timeline 
+                value={alertsData}
+                content={(item) => (
+                    <div className="flex align-items-center">
+                        <Badge 
+                            value={item.type} 
+                            severity={item.severity}
+                            className="mr-2"
+                        />
+                        <div className="flex-1">
+                            <div className="font-medium">{item.message}</div>
+                            <div className="text-sm text-600">{item.time.toLocaleTimeString('fr-FR')}</div>
+                        </div>
+                        <Button 
+                            icon="pi pi-times" 
+                            size="small" 
+                            text 
+                            rounded
+                        />
+                    </div>
+                )}
+                className="w-full"
+            />
+        </Card>
+    );
+
+    const renderAdvancedToolbar = () => (
+        <div className="flex flex-wrap align-items-center justify-content-between gap-3 p-3 bg-gradient-to-r from-indigo-500 to-purple-600 text-white border-round mb-4">
+            <div className="flex align-items-center gap-3">
+                <Avatar icon="pi pi-database" className="bg-white-alpha-20" style={{ color: 'white' }} />
+                <div>
+                    <div className="text-xl font-bold">Centre de Sauvegarde Avancé</div>
+                    <div className="text-sm opacity-90">
+                        {kpiData.totalBackups} sauvegardes | {kpiData.successRate}% de réussite | {kpiData.storageUsed}TB utilisés
+                    </div>
+                </div>
+            </div>
+            
+            <div className="flex align-items-center gap-2">
+                <SelectButton 
+                    value={viewMode} 
+                    options={viewModeOptions} 
+                    onChange={(e) => setViewMode(e.value)}
+                    optionLabel="label"
+                    optionValue="value"
+                    className="view-mode-selector"
+                />
+                
+                <div className="flex align-items-center gap-2 bg-white-alpha-20 px-3 py-1 border-round">
+                    <i className="pi pi-wifi" />
+                    <span className="text-sm">Auto-refresh</span>
+                    <ToggleButton 
+                        checked={autoRefresh} 
+                        onChange={(e) => setAutoRefresh(e.value)}
+                        onIcon="pi pi-pause" 
+                        offIcon="pi pi-play"
+                        className="ml-2"
+                    />
+                </div>
+                
+                <Button 
+                    icon="pi pi-chart-line" 
+                    rounded 
+                    text 
+                    onClick={() => setAnalyticsDialog(true)}
+                    tooltip="Analytics avancées"
+                    className="text-white"
+                />
+                
+                <Button 
+                    icon="pi pi-desktop" 
+                    rounded 
+                    text 
+                    onClick={() => setTerminalVisible(true)}
+                    tooltip="Terminal"
+                    className="text-white"
+                />
+                
+                <Button 
+                    icon="pi pi-cog" 
+                    rounded 
+                    text 
+                    onClick={() => setSidebarVisible(true)}
+                    tooltip="Configuration"
+                    className="text-white"
+                />
+            </div>
+        </div>
+    );
+
+    const renderBackupList = () => (
+        <Card title="Liste des sauvegardes">
+            <DataTable
+                ref={dt}
+                value={backups}
+                paginator
+                rows={10}
+                rowsPerPageOptions={[10, 25, 50]}
+                loading={loading}
+                globalFilter={globalFilter}
+                emptyMessage="Aucune sauvegarde trouvée"
+                responsiveLayout="stack"
+                breakpoint="768px"
+            >
+                <Column field="nom" header="Nom" sortable />
+                <Column field="type" header="Type" sortable />
+                <Column field="statut" header="Statut" sortable />
+                <Column field="dateCreation" header="Date" sortable />
+                <Column field="taille" header="Taille" sortable />
+                <Column header="Actions" />
+            </DataTable>
+        </Card>
+    );
+
+    const renderSchedules = () => (
+        <Card title="Planifications">
+            <DataTable
+                value={schedules}
+                emptyMessage="Aucune planification configurée"
+            >
+                <Column field="nom" header="Nom" />
+                <Column field="frequence" header="Fréquence" />
+                <Column field="actif" header="Actif" />
+                <Column header="Actions" />
+            </DataTable>
+        </Card>
+    );
+
+    return (
+        <div className="backup-management-system">
+            <BlockUI blocked={blocked}>
+                <Toast ref={toast} />
+                <Messages ref={messages} />
+                <ConfirmDialog />
+                
+                {renderAdvancedToolbar()}
+                
+                {(backupInProgress || restoreInProgress || exportProgress > 0) && (
+                    <Card className="mb-4">
+                        <div className="grid">
+                            {backupInProgress && (
+                                <div className="col-12 md:col-4">
+                                    <div className="flex align-items-center gap-3">
+                                        <i className="pi pi-spin pi-save text-blue-500" />
+                                        <div className="flex-1">
+                                            <p className="m-0 font-bold">Sauvegarde en cours...</p>
+                                            <ProgressBar value={progress} className="mt-2" />
+                                        </div>
+                                    </div>
+                                </div>
+                            )}
+                            
+                            {restoreInProgress && (
+                                <div className="col-12 md:col-4">
+                                    <div className="flex align-items-center gap-3">
+                                        <i className="pi pi-spin pi-replay text-green-500" />
+                                        <div className="flex-1">
+                                            <p className="m-0 font-bold">Restauration en cours...</p>
+                                            <ProgressBar value={restoreProgress} className="mt-2" />
+                                        </div>
+                                    </div>
+                                </div>
+                            )}
+                            
+                            {exportProgress > 0 && exportProgress < 100 && (
+                                <div className="col-12 md:col-4">
+                                    <div className="flex align-items-center gap-3">
+                                        <i className="pi pi-spin pi-download text-purple-500" />
+                                        <div className="flex-1">
+                                            <p className="m-0 font-bold">Export en cours...</p>
+                                            <ProgressBar value={exportProgress} className="mt-2" />
+                                        </div>
+                                    </div>
+                                </div>
+                            )}
+                        </div>
+                    </Card>
+                )}
+                
+                <TabView activeIndex={activeIndex} onTabChange={(e) => setActiveIndex(e.index)}>
+                    <TabPanel header="Vue d'ensemble" leftIcon="pi pi-home mr-2">
+                        {renderKPIDashboard()}
+                        {renderRealtimeMonitoring()}
+                        {renderAlertsPanel()}
+                    </TabPanel>
+                    
+                    <TabPanel header="Sauvegardes" leftIcon="pi pi-database mr-2">
+                        {renderBackupList()}
+                    </TabPanel>
+                    
+                    <TabPanel header="Planifications" leftIcon="pi pi-calendar mr-2">
+                        {renderSchedules()}
+                    </TabPanel>
+                    
+                    <TabPanel header="Cloud" leftIcon="pi pi-cloud mr-2">
+                        {renderCloudProviders()}
+                    </TabPanel>
+                    
+                    <TabPanel header="Analytics" leftIcon="pi pi-chart-bar mr-2">
+                        <div className="grid">
+                            <div className="col-12 md:col-8">
+                                <Card title="Tendances des sauvegardes">
+                                    <Chart type="bar" data={chartData} className="w-full" />
+                                </Card>
+                            </div>
+                            
+                            <div className="col-12 md:col-4">
+                                <Card title="Répartition par destination">
+                                    <Chart 
+                                        type="doughnut" 
+                                        data={{
+                                            labels: ['Local', 'AWS S3', 'Google Cloud', 'Azure'],
+                                            datasets: [{
+                                                data: [40, 30, 20, 10],
+                                                backgroundColor: ['#3B82F6', '#10B981', '#F59E0B', '#8B5CF6']
+                                            }]
+                                        }}
+                                        options={{
+                                            plugins: {
+                                                legend: { position: 'bottom' }
+                                            }
+                                        }}
+                                    />
+                                </Card>
+                            </div>
+                        </div>
+                    </TabPanel>
+                    
+                    <TabPanel header="Sécurité" leftIcon="pi pi-shield mr-2">
+                        <div className="grid">
+                            <div className="col-12 md:col-6">
+                                <Card title="Chiffrement et sécurité">
+                                    <Fieldset legend="Configuration du chiffrement">
+                                        <div className="field">
+                                            <label>Algorithme de chiffrement</label>
+                                            <Dropdown 
+                                                value="AES-256" 
+                                                options={[
+                                                    { label: 'AES-128', value: 'AES-128' },
+                                                    { label: 'AES-256', value: 'AES-256' },
+                                                    { label: 'RSA-2048', value: 'RSA-2048' }
+                                                ]}
+                                                className="w-full"
+                                            />
+                                        </div>
+                                        
+                                        <div className="field">
+                                            <div className="flex align-items-center gap-2">
+                                                <InputSwitch checked={verificationEnabled} onChange={(e) => setVerificationEnabled(e.value)} />
+                                                <label>Vérification d'intégrité</label>
+                                            </div>
+                                        </div>
+                                    </Fieldset>
+                                </Card>
+                            </div>
+                            
+                            <div className="col-12 md:col-6">
+                                <Card title="Audit Trail">
+                                    <Timeline 
+                                        value={[
+                                            { event: 'Sauvegarde créée', time: new Date(), user: 'Admin' },
+                                            { event: 'Accès à la sauvegarde', time: new Date(), user: 'User1' },
+                                            { event: 'Restauration initialisée', time: new Date(), user: 'Admin' }
+                                        ]}
+                                        content={(item) => (
+                                            <div>
+                                                <div className="font-bold">{item.event}</div>
+                                                <div className="text-sm text-600">{item.user} - {item.time.toLocaleTimeString()}</div>
+                                            </div>
+                                        )}
+                                    />
+                                </Card>
+                            </div>
+                        </div>
+                    </TabPanel>
+                    
+                    <TabPanel header="Maintenance" leftIcon="pi pi-wrench mr-2">
+                        <Splitter style={{ height: '500px' }}>
+                            <SplitterPanel size={30}>
+                                <ScrollPanel style={{ width: '100%', height: '100%' }}>
+                                    <div className="p-3">
+                                        <h6>Actions de maintenance</h6>
+                                        <Menu 
+                                            model={[
+                                                { label: 'Nettoyage automatique', icon: 'pi pi-trash', command: cleanupOldBackups },
+                                                { label: 'Vérification intégrité', icon: 'pi pi-shield', command: verifyBackups },
+                                                { label: 'Optimisation stockage', icon: 'pi pi-cog' },
+                                                { label: 'Synchronisation cloud', icon: 'pi pi-cloud-upload', command: syncToCloud },
+                                                { label: 'Rapport de santé', icon: 'pi pi-chart-line' },
+                                                { label: 'Réindexation', icon: 'pi pi-refresh' }
+                                            ]}
+                                        />
+                                    </div>
+                                </ScrollPanel>
+                            </SplitterPanel>
+                            
+                            <SplitterPanel size={70}>
+                                <ScrollPanel style={{ width: '100%', height: '100%' }}>
+                                    <div className="p-3">
+                                        <Card title="Console de maintenance">
+                                            <Terminal 
+                                                ref={terminal}
+                                                welcomeMessage="Console de maintenance BTpXpress - Tapez 'help' pour les commandes disponibles"
+                                                prompt="backup $"
+                                                className="bg-gray-900 text-white"
+                                            />
+                                        </Card>
+                                    </div>
+                                </ScrollPanel>
+                            </SplitterPanel>
+                        </Splitter>
+                    </TabPanel>
+                </TabView>
+                
+                <SpeedDial 
+                    model={speedDialActions}
+                    radius={80}
+                    type="semi-circle"
+                    direction="up-left"
+                    style={{ left: 'calc(50% - 2rem)', bottom: 0 }}
+                    buttonClassName="p-button-help"
+                    maskClassName="bg-black-alpha-30"
+                />
+                
+                <Sidebar 
+                    visible={sidebarVisible} 
+                    onHide={() => setSidebarVisible(false)}
+                    position="right"
+                    className="w-25rem"
+                >
+                    <h3>Configuration avancée</h3>
+                    
+                    <Accordion multiple>
+                        <AccordionTab header="Paramètres généraux">
+                            <div className="field">
+                                <label>Mode d'affichage</label>
+                                <SelectButton 
+                                    value={viewMode} 
+                                    options={viewModeOptions} 
+                                    onChange={(e) => setViewMode(e.value)}
+                                    optionLabel="label"
+                                    optionValue="value"
+                                    className="w-full mt-2"
+                                />
+                            </div>
+                            
+                            <div className="field">
+                                <div className="flex align-items-center gap-2">
+                                    <InputSwitch 
+                                        checked={autoRefresh} 
+                                        onChange={(e) => setAutoRefresh(e.value)}
+                                    />
+                                    <label>Actualisation automatique</label>
+                                </div>
+                            </div>
+                            
+                            <div className="field">
+                                <label>Intervalle (secondes)</label>
+                                <Slider 
+                                    value={refreshInterval} 
+                                    onChange={(e) => setRefreshInterval(e.value as number)}
+                                    min={10} 
+                                    max={300} 
+                                    step={10}
+                                    className="w-full mt-2"
+                                />
+                            </div>
+                        </AccordionTab>
+                        
+                        <AccordionTab header="Compression et optimisation">
+                            <div className="field">
+                                <label>Niveau de compression</label>
+                                <Knob 
+                                    value={compressionLevel} 
+                                    onChange={(e) => setCompressionLevel(e.value)}
+                                    min={1} 
+                                    max={9}
+                                    size={80}
+                                    className="mt-2"
+                                />
+                            </div>
+                            
+                            <div className="field">
+                                <div className="flex align-items-center gap-2">
+                                    <InputSwitch 
+                                        checked={incrementalBackup} 
+                                        onChange={(e) => setIncrementalBackup(e.value)}
+                                    />
+                                    <label>Sauvegarde incrémentale</label>
+                                </div>
+                            </div>
+                        </AccordionTab>
+                        
+                        <AccordionTab header="Notifications">
+                            <div className="field">
+                                <label>Niveau de notification</label>
+                                <Dropdown 
+                                    value={notificationLevel} 
+                                    options={notificationOptions} 
+                                    onChange={(e) => setNotificationLevel(e.value)}
+                                    className="w-full"
+                                />
+                            </div>
+                            
+                            <div className="field">
+                                <div className="flex align-items-center gap-2">
+                                    <InputSwitch 
+                                        checked={cloudSync} 
+                                        onChange={(e) => setCloudSync(e.value)}
+                                    />
+                                    <label>Synchronisation cloud</label>
+                                </div>
+                            </div>
+                        </AccordionTab>
+                    </Accordion>
+                </Sidebar>
+                
+                <Dialog 
+                    header="Assistant de configuration" 
+                    visible={wizardMode} 
+                    onHide={() => setWizardMode(false)}
+                    style={{ width: '70vw' }}
+                    modal
+                >
+                    <Steps 
+                        model={wizardSteps} 
+                        activeIndex={wizardStep}
+                        onSelect={(e) => setWizardStep(e.index)}
+                        readOnly={false}
+                        className="mb-4"
+                    />
+                    
+                    <div className="wizard-content">
+                        {wizardStep === 0 && (
+                            <div>
+                                <h4>Configuration de base</h4>
+                                <p>Définissons les paramètres fondamentaux de votre système de sauvegarde.</p>
+                                <div className="field">
+                                    <label>Fréquence par défaut</label>
+                                    <Dropdown options={frequenceOptions} className="w-full" />
+                                </div>
+                            </div>
+                        )}
+                        {wizardStep === 4 && (
+                            <div className="text-center">
+                                <i className="pi pi-check-circle text-green-500 text-6xl mb-3" />
+                                <h4>Configuration terminée !</h4>
+                                <p>Votre système de sauvegarde est maintenant configuré et opérationnel.</p>
+                            </div>
+                        )}
+                    </div>
+                    
+                    <div className="flex justify-content-between mt-4">
+                        <Button 
+                            label="Précédent" 
+                            icon="pi pi-chevron-left" 
+                            outlined
+                            disabled={wizardStep === 0}
+                            onClick={() => setWizardStep(wizardStep - 1)}
+                        />
+                        <Button 
+                            label={wizardStep === wizardSteps.length - 1 ? 'Terminer' : 'Suivant'}
+                            icon={wizardStep === wizardSteps.length - 1 ? 'pi pi-check' : 'pi pi-chevron-right'}
+                            iconPos="right"
+                            onClick={() => {
+                                if (wizardStep === wizardSteps.length - 1) {
+                                    setWizardMode(false);
+                                    toast.current?.show({
+                                        severity: 'success',
+                                        summary: 'Configuration terminée',
+                                        detail: 'Votre système de sauvegarde a été configuré avec succès',
+                                        life: 5000
+                                    });
+                                } else {
+                                    setWizardStep(wizardStep + 1);
+                                }
+                            }}
+                        />
+                    </div>
+                </Dialog>
+                
+                <ScrollTop threshold={600} className="w-3rem h-3rem border-round bg-primary" />
+            </BlockUI>
+        </div>
+    );
+};
+
+export default SauvegardePage;
+
+// Styles CSS pour l'interface ultra-professionnelle de sauvegarde
+const customStyles = `
+.backup-management-system .p-tabview-nav {
+    background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%);
+    border-radius: 10px 10px 0 0;
+}
+
+.backup-management-system .p-tabview-nav li .p-tabview-nav-link {
+    color: white;
+    border: none;
+}
+
+.backup-management-system .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 8px;
+    margin: 4px;
+}
+
+.view-mode-selector .p-button {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    color: white;
+}
+
+.view-mode-selector .p-button.p-highlight {
+    background: rgba(255, 255, 255, 0.3);
+}
+
+.hover\\:shadow-lg:hover {
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    transition: box-shadow 0.3s ease;
+}
+
+.transition-shadow {
+    transition: box-shadow 0.3s ease;
+}
+
+.bg-gradient-to-r {
+    background: linear-gradient(90deg, var(--tw-gradient-stops));
+}
+
+.from-blue-500 {
+    --tw-gradient-from: #3b82f6;
+    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(59, 130, 246, 0));
+}
+
+.to-blue-600 {
+    --tw-gradient-to: #2563eb;
+}
+
+.from-green-500 {
+    --tw-gradient-from: #22c55e;
+    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(34, 197, 94, 0));
+}
+
+.to-green-600 {
+    --tw-gradient-to: #16a34a;
+}
+
+.from-purple-500 {
+    --tw-gradient-from: #a855f7;
+    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(168, 85, 247, 0));
+}
+
+.to-purple-600 {
+    --tw-gradient-to: #9333ea;
+}
+
+.from-orange-500 {
+    --tw-gradient-from: #f97316;
+    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(249, 115, 22, 0));
+}
+
+.to-orange-600 {
+    --tw-gradient-to: #ea580c;
+}
+
+.from-teal-500 {
+    --tw-gradient-from: #14b8a6;
+    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(20, 184, 166, 0));
+}
+
+.to-teal-600 {
+    --tw-gradient-to: #0d9488;
+}
+
+.from-pink-500 {
+    --tw-gradient-from: #ec4899;
+    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(236, 72, 153, 0));
+}
+
+.to-pink-600 {
+    --tw-gradient-to: #db2777;
+}
+
+.from-indigo-500 {
+    --tw-gradient-from: #6366f1;
+    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(99, 102, 241, 0));
+}
+
+.to-purple-600 {
+    --tw-gradient-to: #9333ea;
+}
+
+.bg-white-alpha-20 {
+    background: rgba(255, 255, 255, 0.2);
+}
+
+.wizard-content {
+    min-height: 300px;
+}
+`;
+
+// Injection du style dans le document
+if (typeof document !== 'undefined') {
+    const style = document.createElement('style');
+    style.textContent = customStyles;
+    document.head.appendChild(style);
+}
+
+
+>>>>>>> 5ed9a80339c59d689b9655e8be1a68312d19d4a1
diff --git a/app/(main)/admin/utilisateurs/page.tsx b/app/(main)/admin/utilisateurs/page.tsx
index 94a88a2..a8c7dfb 100644
--- a/app/(main)/admin/utilisateurs/page.tsx
+++ b/app/(main)/admin/utilisateurs/page.tsx
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 'use client';
 
 import React, { useState, useEffect, useRef } from 'react';
@@ -989,3 +990,996 @@ const ProtectedUtilisateursPage = () => {
 };
 
 export default ProtectedUtilisateursPage;
+=======
+'use client';
+
+import React, { useState, useEffect, useRef } from 'react';
+import { useAuth } from '../../../../contexts/AuthContext';
+import ProtectedRoute from '../../../../components/auth/ProtectedRoute';
+import { Card } from 'primereact/card';
+import { Button } from 'primereact/button';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Toast } from 'primereact/toast';
+import { Toolbar } from 'primereact/toolbar';
+import { InputText } from 'primereact/inputtext';
+import { Dialog } from 'primereact/dialog';
+import { Dropdown } from 'primereact/dropdown';
+import { Tag } from 'primereact/tag';
+import { ToggleButton } from 'primereact/togglebutton';
+import { Password } from 'primereact/password';
+import { Checkbox } from 'primereact/checkbox';
+import { Calendar } from 'primereact/calendar';
+import { Avatar } from 'primereact/avatar';
+import { Badge } from 'primereact/badge';
+import { Chip } from 'primereact/chip';
+import { Chart } from 'primereact/chart';
+import { TabView, TabPanel } from 'primereact/tabview';
+import { 
+    ActionButtonGroup, 
+    ViewButton, 
+    EditButton, 
+    DeleteButton,
+    ActionButton
+} from '../../../../components/ui/ActionButton';
+
+interface Utilisateur {
+    id: string;
+    nom: string;
+    prenom: string;
+    email: string;
+    telephone: string;
+    role: 'ADMIN' | 'MANAGER' | 'USER' | 'VIEWER';
+    departement: string;
+    statut: 'ACTIF' | 'INACTIF' | 'SUSPENDU' | 'CONGE';
+    actif: boolean;
+    derniereConnexion: Date;
+    dateCreation: Date;
+    dateModification: Date;
+    permissions: string[];
+    avatar?: string;
+    adresse: string;
+    dateNaissance?: Date;
+    numeroEmploye: string;
+    manager?: string;
+    tentativesConnexion: number;
+    derniereMiseAJourMotDePasse: Date;
+    motDePasseExpire: boolean;
+    deuxFacteursActive: boolean;
+    sessionActive: boolean;
+    heuresConnexion: number;
+    dernierAction: string;
+    preferences: {
+        theme: 'light' | 'dark';
+        langue: string;
+        notifications: boolean;
+        timezone: string;
+    };
+}
+
+interface ActiviteUtilisateur {
+    id: string;
+    utilisateurId: string;
+    action: string;
+    module: string;
+    timestamp: Date;
+    details: string;
+    adresseIP: string;
+    navigateur: string;
+}
+
+const UtilisateursPage = () => {
+    const [utilisateurs, setUtilisateurs] = useState<Utilisateur[]>([]);
+    const [activites, setActivites] = useState<ActiviteUtilisateur[]>([]);
+    const [selectedUtilisateurs, setSelectedUtilisateurs] = useState<Utilisateur[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [globalFilter, setGlobalFilter] = useState('');
+    const [utilisateurDialog, setUtilisateurDialog] = useState(false);
+    const [activiteDialog, setActiviteDialog] = useState(false);
+    const [deleteDialog, setDeleteDialog] = useState(false);
+    const [resetPasswordDialog, setResetPasswordDialog] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const [utilisateur, setUtilisateur] = useState<Utilisateur>({
+        id: '',
+        nom: '',
+        prenom: '',
+        email: '',
+        telephone: '',
+        role: 'USER',
+        departement: '',
+        statut: 'ACTIF',
+        actif: true,
+        derniereConnexion: new Date(),
+        dateCreation: new Date(),
+        dateModification: new Date(),
+        permissions: [],
+        adresse: '',
+        numeroEmploye: '',
+        tentativesConnexion: 0,
+        derniereMiseAJourMotDePasse: new Date(),
+        motDePasseExpire: false,
+        deuxFacteursActive: false,
+        sessionActive: false,
+        heuresConnexion: 0,
+        dernierAction: '',
+        preferences: {
+            theme: 'light',
+            langue: 'fr',
+            notifications: true,
+            timezone: 'Europe/Paris'
+        }
+    });
+    const [submitted, setSubmitted] = useState(false);
+    const [password, setPassword] = useState('');
+    const [confirmPassword, setConfirmPassword] = useState('');
+    const toast = useRef<Toast>(null);
+    const dt = useRef<DataTable<Utilisateur[]>>(null);
+
+    const roles = [
+        { label: 'Administrateur', value: 'ADMIN' },
+        { label: 'Manager', value: 'MANAGER' },
+        { label: 'Utilisateur', value: 'USER' },
+        { label: 'Lecture seule', value: 'VIEWER' }
+    ];
+
+    const departements = [
+        { label: 'Direction', value: 'direction' },
+        { label: 'Commercial', value: 'commercial' },
+        { label: 'Technique', value: 'technique' },
+        { label: 'Administratif', value: 'administratif' },
+        { label: 'Chantier', value: 'chantier' },
+        { label: 'Maintenance', value: 'maintenance' }
+    ];
+
+    const statuts = [
+        { label: 'Actif', value: 'ACTIF' },
+        { label: 'Inactif', value: 'INACTIF' },
+        { label: 'Suspendu', value: 'SUSPENDU' },
+        { label: 'Congé', value: 'CONGE' }
+    ];
+
+    const availablePermissions = [
+        'dashboard.read',
+        'clients.read', 'clients.write', 'clients.delete',
+        'chantiers.read', 'chantiers.write', 'chantiers.delete',
+        'devis.read', 'devis.write', 'devis.delete',
+        'factures.read', 'factures.write', 'factures.delete',
+        'stock.read', 'stock.write', 'stock.delete',
+        'planning.read', 'planning.write',
+        'rapports.read', 'rapports.write',
+        'administration.read', 'administration.write',
+        'utilisateurs.read', 'utilisateurs.write', 'utilisateurs.delete',
+        'backup.read', 'backup.write'
+    ];
+
+    useEffect(() => {
+        loadUtilisateurs();
+    }, []);
+
+    const loadUtilisateurs = async () => {
+        try {
+            setLoading(true);
+            
+            // TODO: Remplacer par un appel API réel pour charger les utilisateurs depuis le backend
+            // Exemple: const response = await fetch('/api/admin/users');
+            // const utilisateursData = await response.json();
+            const mockUtilisateurs: Utilisateur[] = [];
+
+            // TODO: Remplacer par un appel API réel pour charger l'activité des utilisateurs
+            // Exemple: const response = await fetch('/api/admin/user-activities');
+            // const activitesData = await response.json();
+            const mockActivites: ActiviteUtilisateur[] = [];
+
+            setUtilisateurs(mockUtilisateurs);
+            setActivites(mockActivites);
+        } catch (error) {
+            console.error('Erreur lors du chargement:', error);
+            toast.current?.show({
+                severity: 'error',
+                summary: 'Erreur',
+                detail: 'Impossible de charger les utilisateurs',
+                life: 3000
+            });
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const openNew = () => {
+        setUtilisateur({
+            id: '',
+            nom: '',
+            prenom: '',
+            email: '',
+            telephone: '',
+            role: 'USER',
+            departement: '',
+            statut: 'ACTIF',
+            actif: true,
+            derniereConnexion: new Date(),
+            dateCreation: new Date(),
+            dateModification: new Date(),
+            permissions: [],
+            adresse: '',
+            numeroEmploye: '',
+            tentativesConnexion: 0,
+            derniereMiseAJourMotDePasse: new Date(),
+            motDePasseExpire: false,
+            deuxFacteursActive: false,
+            sessionActive: false,
+            heuresConnexion: 0,
+            dernierAction: '',
+            preferences: {
+                theme: 'light',
+                langue: 'fr',
+                notifications: true,
+                timezone: 'Europe/Paris'
+            }
+        });
+        setPassword('');
+        setConfirmPassword('');
+        setSubmitted(false);
+        setUtilisateurDialog(true);
+    };
+
+    const editUtilisateur = (utilisateur: Utilisateur) => {
+        setUtilisateur({ ...utilisateur });
+        setPassword('');
+        setConfirmPassword('');
+        setUtilisateurDialog(true);
+    };
+
+    const confirmDelete = (utilisateur: Utilisateur) => {
+        setUtilisateur(utilisateur);
+        setDeleteDialog(true);
+    };
+
+    const deleteUtilisateur = () => {
+        const updatedUtilisateurs = utilisateurs.filter(u => u.id !== utilisateur.id);
+        setUtilisateurs(updatedUtilisateurs);
+        setDeleteDialog(false);
+        toast.current?.show({
+            severity: 'success',
+            summary: 'Succès',
+            detail: 'Utilisateur supprimé',
+            life: 3000
+        });
+    };
+
+    const saveUtilisateur = () => {
+        setSubmitted(true);
+
+        if (utilisateur.nom.trim() && utilisateur.prenom.trim() && utilisateur.email.trim()) {
+            if (!utilisateur.id && (!password || password !== confirmPassword)) {
+                toast.current?.show({
+                    severity: 'error',
+                    summary: 'Erreur',
+                    detail: 'Mot de passe requis et doit correspondre',
+                    life: 3000
+                });
+                return;
+            }
+
+            let updatedUtilisateurs = [...utilisateurs];
+            
+            if (utilisateur.id) {
+                // Mise à jour
+                const index = utilisateurs.findIndex(u => u.id === utilisateur.id);
+                updatedUtilisateurs[index] = { ...utilisateur, dateModification: new Date() };
+                
+                toast.current?.show({
+                    severity: 'success',
+                    summary: 'Succès',
+                    detail: 'Utilisateur mis à jour',
+                    life: 3000
+                });
+            } else {
+                // Création
+                const newUtilisateur = {
+                    ...utilisateur,
+                    id: Date.now().toString(),
+                    numeroEmploye: `EMP${String(utilisateurs.length + 1).padStart(3, '0')}`,
+                    dateCreation: new Date(),
+                    dateModification: new Date()
+                };
+                updatedUtilisateurs.push(newUtilisateur);
+                
+                toast.current?.show({
+                    severity: 'success',
+                    summary: 'Succès',
+                    detail: 'Utilisateur créé',
+                    life: 3000
+                });
+            }
+
+            setUtilisateurs(updatedUtilisateurs);
+            setUtilisateurDialog(false);
+        }
+    };
+
+    const resetPassword = (utilisateur: Utilisateur) => {
+        setUtilisateur(utilisateur);
+        setPassword('');
+        setConfirmPassword('');
+        setResetPasswordDialog(true);
+    };
+
+    const confirmResetPassword = () => {
+        if (password && password === confirmPassword) {
+            const updatedUtilisateurs = utilisateurs.map(u =>
+                u.id === utilisateur.id
+                    ? { ...u, derniereMiseAJourMotDePasse: new Date(), motDePasseExpire: false, tentativesConnexion: 0 }
+                    : u
+            );
+            setUtilisateurs(updatedUtilisateurs);
+            setResetPasswordDialog(false);
+            
+            toast.current?.show({
+                severity: 'success',
+                summary: 'Succès',
+                detail: 'Mot de passe réinitialisé',
+                life: 3000
+            });
+        } else {
+            toast.current?.show({
+                severity: 'error',
+                summary: 'Erreur',
+                detail: 'Les mots de passe ne correspondent pas',
+                life: 3000
+            });
+        }
+    };
+
+    const suspendUser = (utilisateur: Utilisateur) => {
+        const updatedUtilisateurs = utilisateurs.map(u =>
+            u.id === utilisateur.id
+                ? { ...u, statut: u.statut === 'SUSPENDU' ? 'ACTIF' : 'SUSPENDU' } as Utilisateur
+                : u
+        );
+        setUtilisateurs(updatedUtilisateurs);
+        
+        toast.current?.show({
+            severity: 'info',
+            summary: 'Statut modifié',
+            detail: `Utilisateur ${utilisateur.statut === 'SUSPENDU' ? 'réactivé' : 'suspendu'}`,
+            life: 3000
+        });
+    };
+
+    const exportCSV = () => {
+        dt.current?.exportCSV();
+    };
+
+    const leftToolbarTemplate = () => {
+        return (
+            <div className="flex flex-wrap gap-2">
+                <Button 
+                    label="Nouvel Utilisateur" 
+                    icon="pi pi-plus" 
+                    severity="success" 
+                    onClick={openNew} 
+                />
+                <Button 
+                    label="Activité" 
+                    icon="pi pi-list" 
+                    onClick={() => setActiviteDialog(true)} 
+                />
+            </div>
+        );
+    };
+
+    const rightToolbarTemplate = () => {
+        return (
+            <div className="flex flex-wrap gap-2">
+                <Button 
+                    label="Exporter" 
+                    icon="pi pi-upload" 
+                    severity="help" 
+                    onClick={exportCSV} 
+                />
+                <span className="p-input-icon-left">
+                    <i className="pi pi-search" />
+                    <InputText 
+                        type="search" 
+                        placeholder="Rechercher..." 
+                        onInput={(e) => setGlobalFilter(e.currentTarget.value)} 
+                    />
+                </span>
+            </div>
+        );
+    };
+
+    const actionBodyTemplate = (rowData: Utilisateur) => {
+        return (
+            <ActionButtonGroup>
+                <EditButton 
+                    onClick={() => editUtilisateur(rowData)} 
+                    tooltip="Modifier"
+                />
+                <ActionButton 
+                    icon="pi pi-key" 
+                    color="orange" 
+                    onClick={() => resetPassword(rowData)} 
+                    tooltip="Réinitialiser mot de passe"
+                />
+                <ActionButton 
+                    icon={rowData.statut === 'SUSPENDU' ? 'pi pi-check' : 'pi pi-ban'} 
+                    color={rowData.statut === 'SUSPENDU' ? 'blue' : 'red'} 
+                    onClick={() => suspendUser(rowData)} 
+                    tooltip={rowData.statut === 'SUSPENDU' ? 'Réactiver' : 'Suspendre'}
+                />
+                <DeleteButton 
+                    onClick={() => confirmDelete(rowData)} 
+                    tooltip="Supprimer"
+                />
+            </ActionButtonGroup>
+        );
+    };
+
+    const statusBodyTemplate = (rowData: Utilisateur) => {
+        let severity: "success" | "warning" | "danger" | "info" = 'success';
+        let label: string = rowData.statut;
+
+        switch (rowData.statut) {
+            case 'ACTIF':
+                severity = 'success';
+                label = 'Actif';
+                break;
+            case 'INACTIF':
+                severity = 'warning';
+                label = 'Inactif';
+                break;
+            case 'SUSPENDU':
+                severity = 'danger';
+                label = 'Suspendu';
+                break;
+            case 'CONGE':
+                severity = 'info';
+                label = 'Congé';
+                break;
+        }
+
+        return <Tag value={label} severity={severity} />;
+    };
+
+    const roleBodyTemplate = (rowData: Utilisateur) => {
+        const roleLabels = {
+            'ADMIN': 'Administrateur',
+            'MANAGER': 'Manager',
+            'USER': 'Utilisateur',
+            'VIEWER': 'Lecture seule'
+        };
+        return roleLabels[rowData.role] || rowData.role;
+    };
+
+    const sessionBodyTemplate = (rowData: Utilisateur) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <i className={`pi ${rowData.sessionActive ? 'pi-circle-fill text-green-500' : 'pi-circle text-gray-400'}`}></i>
+                <span>{rowData.sessionActive ? 'En ligne' : 'Hors ligne'}</span>
+            </div>
+        );
+    };
+
+    const securityBodyTemplate = (rowData: Utilisateur) => {
+        return (
+            <div className="flex gap-1">
+                {rowData.deuxFacteursActive && <Chip label="2FA" className="p-0 text-xs" style={{ fontSize: '0.75rem', padding: '0.25rem 0.5rem' }} />}
+                {rowData.motDePasseExpire && <Chip label="PWD" className="p-0 text-xs" style={{ fontSize: '0.75rem', padding: '0.25rem 0.5rem' }} />}
+                {rowData.tentativesConnexion > 0 && <Badge value={rowData.tentativesConnexion} severity="warning" />}
+            </div>
+        );
+    };
+
+    const avatarBodyTemplate = (rowData: Utilisateur) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <Avatar 
+                    label={`${rowData.prenom[0]}${rowData.nom[0]}`} 
+                    size="normal" 
+                    shape="circle" 
+                    style={{ backgroundColor: '#2196F3', color: 'white' }}
+                />
+                <div>
+                    <div className="font-semibold">{rowData.prenom} {rowData.nom}</div>
+                    <div className="text-sm text-color-secondary">{rowData.numeroEmploye}</div>
+                </div>
+            </div>
+        );
+    };
+
+    const dernierActionBodyTemplate = (rowData: Utilisateur) => {
+        const diffTime = Math.abs(new Date().getTime() - rowData.derniereConnexion.getTime());
+        const diffHours = Math.floor(diffTime / (1000 * 60 * 60));
+        const diffDays = Math.floor(diffHours / 24);
+        
+        const timeAgo = diffDays > 0 ? `Il y a ${diffDays}j` : `Il y a ${diffHours}h`;
+        
+        return (
+            <div>
+                <div className="text-sm">{rowData.dernierAction}</div>
+                <div className="text-xs text-color-secondary">{timeAgo}</div>
+            </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 Utilisateurs</h5>
+            <div className="flex gap-2">
+                <Badge value={utilisateurs.filter(u => u.sessionActive).length} className="mr-2" />
+                <span className="text-sm">utilisateurs en ligne</span>
+            </div>
+        </div>
+    );
+
+    // Statistiques pour le dashboard
+    const totalUtilisateurs = utilisateurs.length;
+    const utilisateursActifs = utilisateurs.filter(u => u.statut === 'ACTIF').length;
+    const utilisateursEnLigne = utilisateurs.filter(u => u.sessionActive).length;
+    const utilisateursAvec2FA = utilisateurs.filter(u => u.deuxFacteursActive).length;
+
+    const rolesData = {
+        labels: ['Admin', 'Manager', 'User', 'Viewer'],
+        datasets: [
+            {
+                data: [
+                    utilisateurs.filter(u => u.role === 'ADMIN').length,
+                    utilisateurs.filter(u => u.role === 'MANAGER').length,
+                    utilisateurs.filter(u => u.role === 'USER').length,
+                    utilisateurs.filter(u => u.role === 'VIEWER').length
+                ],
+                backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0'],
+                hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0']
+            }
+        ]
+    };
+
+    const departementsData = {
+        labels: departements.map(d => d.label),
+        datasets: [
+            {
+                label: 'Utilisateurs',
+                data: departements.map(dept => utilisateurs.filter(u => u.departement === dept.value).length),
+                backgroundColor: '#36A2EB',
+                borderColor: '#36A2EB',
+                borderWidth: 1
+            }
+        ]
+    };
+
+    return (
+        <div className="grid">
+            <div className="col-12">
+                <Card>
+                    <Toast ref={toast} />
+                    
+                    <TabView activeIndex={activeIndex} onTabChange={(e) => setActiveIndex(e.index)}>
+                        <TabPanel header="Utilisateurs" leftIcon="pi pi-users mr-2">
+                            <Toolbar className="mb-4" left={leftToolbarTemplate} right={rightToolbarTemplate} />
+
+                            <DataTable
+                                ref={dt}
+                                value={utilisateurs}
+                                selection={selectedUtilisateurs}
+                                onSelectionChange={(e) => setSelectedUtilisateurs(e.value)}
+                                selectionMode="multiple"
+                                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} utilisateurs"
+                                globalFilter={globalFilter}
+                                emptyMessage="Aucun utilisateur trouvé."
+                                header={header}
+                                loading={loading}
+                            >
+                                <Column selectionMode="multiple" headerStyle={{ width: '4rem' }} />
+                                <Column field="utilisateur" header="Utilisateur" body={avatarBodyTemplate} />
+                                <Column field="email" header="Email" sortable />
+                                <Column field="role" header="Rôle" body={roleBodyTemplate} sortable />
+                                <Column field="departement" header="Département" sortable />
+                                <Column field="statut" header="Statut" body={statusBodyTemplate} sortable />
+                                <Column field="session" header="Session" body={sessionBodyTemplate} />
+                                <Column field="derniereConnexion" header="Dernière activité" body={dernierActionBodyTemplate} sortable />
+                                <Column field="securite" header="Sécurité" body={securityBodyTemplate} />
+                                <Column body={actionBodyTemplate} headerStyle={{ minWidth: '12rem' }} />
+                            </DataTable>
+                        </TabPanel>
+
+                        <TabPanel header="Statistiques" leftIcon="pi pi-chart-bar mr-2">
+                            <div className="grid">
+                                {/* Indicateurs principaux */}
+                                <div className="col-12 md:col-3">
+                                    <Card className="text-center">
+                                        <div className="text-6xl text-primary mb-2">
+                                            <i className="pi pi-users"></i>
+                                        </div>
+                                        <div className="text-3xl font-bold text-primary mb-1">
+                                            {totalUtilisateurs}
+                                        </div>
+                                        <div className="text-lg text-color-secondary">
+                                            Total Utilisateurs
+                                        </div>
+                                    </Card>
+                                </div>
+
+                                <div className="col-12 md:col-3">
+                                    <Card className="text-center">
+                                        <div className="text-6xl text-green-500 mb-2">
+                                            <i className="pi pi-check-circle"></i>
+                                        </div>
+                                        <div className="text-3xl font-bold text-green-500 mb-1">
+                                            {utilisateursActifs}
+                                        </div>
+                                        <div className="text-lg text-color-secondary">
+                                            Utilisateurs Actifs
+                                        </div>
+                                    </Card>
+                                </div>
+
+                                <div className="col-12 md:col-3">
+                                    <Card className="text-center">
+                                        <div className="text-6xl text-orange-500 mb-2">
+                                            <i className="pi pi-circle-fill"></i>
+                                        </div>
+                                        <div className="text-3xl font-bold text-orange-500 mb-1">
+                                            {utilisateursEnLigne}
+                                        </div>
+                                        <div className="text-lg text-color-secondary">
+                                            En Ligne
+                                        </div>
+                                    </Card>
+                                </div>
+
+                                <div className="col-12 md:col-3">
+                                    <Card className="text-center">
+                                        <div className="text-6xl text-purple-500 mb-2">
+                                            <i className="pi pi-shield"></i>
+                                        </div>
+                                        <div className="text-3xl font-bold text-purple-500 mb-1">
+                                            {utilisateursAvec2FA}
+                                        </div>
+                                        <div className="text-lg text-color-secondary">
+                                            Avec 2FA
+                                        </div>
+                                    </Card>
+                                </div>
+
+                                {/* Graphiques */}
+                                <div className="col-12 md:col-6">
+                                    <Card title="Répartition par Rôle">
+                                        <Chart type="doughnut" data={rolesData} style={{ height: '300px' }} />
+                                    </Card>
+                                </div>
+
+                                <div className="col-12 md:col-6">
+                                    <Card title="Répartition par Département">
+                                        <Chart type="bar" data={departementsData} style={{ height: '300px' }} />
+                                    </Card>
+                                </div>
+                            </div>
+                        </TabPanel>
+                    </TabView>
+
+                    {/* Dialog utilisateur */}
+                    <Dialog 
+                        visible={utilisateurDialog} 
+                        style={{ width: '900px' }} 
+                        header="Détails de l'utilisateur" 
+                        modal 
+                        className="p-fluid" 
+                        footer={
+                            <div className="flex justify-content-end gap-2">
+                                <Button label="Annuler" icon="pi pi-times" text onClick={() => setUtilisateurDialog(false)} />
+                                <Button label="Sauvegarder" icon="pi pi-check" onClick={saveUtilisateur} />
+                            </div>
+                        }
+                        onHide={() => setUtilisateurDialog(false)}
+                    >
+                        <TabView>
+                            <TabPanel header="Informations générales">
+                                <div className="formgrid grid">
+                                    <div className="field col-12 md:col-6">
+                                        <label htmlFor="prenom">Prénom *</label>
+                                        <InputText 
+                                            id="prenom" 
+                                            value={utilisateur.prenom} 
+                                            onChange={(e) => setUtilisateur({...utilisateur, prenom: e.target.value})} 
+                                            required 
+                                            className={submitted && !utilisateur.prenom ? 'p-invalid' : ''} 
+                                        />
+                                        {submitted && !utilisateur.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={utilisateur.nom} 
+                                            onChange={(e) => setUtilisateur({...utilisateur, nom: e.target.value})} 
+                                            required 
+                                            className={submitted && !utilisateur.nom ? 'p-invalid' : ''} 
+                                        />
+                                        {submitted && !utilisateur.nom && <small className="p-invalid">Le nom est requis.</small>}
+                                    </div>
+
+                                    <div className="field col-12 md:col-6">
+                                        <label htmlFor="email">Email *</label>
+                                        <InputText 
+                                            id="email" 
+                                            value={utilisateur.email} 
+                                            onChange={(e) => setUtilisateur({...utilisateur, email: e.target.value})} 
+                                            required 
+                                            className={submitted && !utilisateur.email ? 'p-invalid' : ''} 
+                                        />
+                                        {submitted && !utilisateur.email && <small className="p-invalid">L'email est requis.</small>}
+                                    </div>
+
+                                    <div className="field col-12 md:col-6">
+                                        <label htmlFor="telephone">Téléphone</label>
+                                        <InputText 
+                                            id="telephone" 
+                                            value={utilisateur.telephone} 
+                                            onChange={(e) => setUtilisateur({...utilisateur, telephone: e.target.value})} 
+                                        />
+                                    </div>
+
+                                    <div className="field col-12 md:col-4">
+                                        <label htmlFor="role">Rôle</label>
+                                        <Dropdown 
+                                            id="role" 
+                                            value={utilisateur.role} 
+                                            options={roles} 
+                                            onChange={(e) => setUtilisateur({...utilisateur, role: e.value})} 
+                                            placeholder="Sélectionnez un rôle"
+                                        />
+                                    </div>
+
+                                    <div className="field col-12 md:col-4">
+                                        <label htmlFor="departement">Département</label>
+                                        <Dropdown 
+                                            id="departement" 
+                                            value={utilisateur.departement} 
+                                            options={departements} 
+                                            onChange={(e) => setUtilisateur({...utilisateur, departement: e.value})} 
+                                            placeholder="Sélectionnez un département"
+                                        />
+                                    </div>
+
+                                    <div className="field col-12 md:col-4">
+                                        <label htmlFor="statut">Statut</label>
+                                        <Dropdown 
+                                            id="statut" 
+                                            value={utilisateur.statut} 
+                                            options={statuts} 
+                                            onChange={(e) => setUtilisateur({...utilisateur, statut: e.value})} 
+                                        />
+                                    </div>
+
+                                    <div className="field col-12">
+                                        <label htmlFor="adresse">Adresse</label>
+                                        <InputText 
+                                            id="adresse" 
+                                            value={utilisateur.adresse} 
+                                            onChange={(e) => setUtilisateur({...utilisateur, adresse: e.target.value})} 
+                                        />
+                                    </div>
+
+                                    <div className="field col-12 md:col-6">
+                                        <label htmlFor="dateNaissance">Date de naissance</label>
+                                        <Calendar 
+                                            id="dateNaissance" 
+                                            value={utilisateur.dateNaissance} 
+                                            onChange={(e) => setUtilisateur({...utilisateur, dateNaissance: e.value || undefined})} 
+                                            showIcon 
+                                        />
+                                    </div>
+
+                                    <div className="field col-12 md:col-6">
+                                        <label htmlFor="manager">Manager</label>
+                                        <InputText 
+                                            id="manager" 
+                                            value={utilisateur.manager || ''} 
+                                            onChange={(e) => setUtilisateur({...utilisateur, manager: e.target.value})} 
+                                        />
+                                    </div>
+
+                                    {!utilisateur.id && (
+                                        <>
+                                            <div className="field col-12 md:col-6">
+                                                <label htmlFor="password">Mot de passe *</label>
+                                                <Password 
+                                                    id="password" 
+                                                    value={password} 
+                                                    onChange={(e) => setPassword(e.target.value)} 
+                                                    required 
+                                                    className={submitted && !password ? 'p-invalid' : ''} 
+                                                />
+                                                {submitted && !password && <small className="p-invalid">Le mot de passe est requis.</small>}
+                                            </div>
+
+                                            <div className="field col-12 md:col-6">
+                                                <label htmlFor="confirmPassword">Confirmer le mot de passe *</label>
+                                                <Password 
+                                                    id="confirmPassword" 
+                                                    value={confirmPassword} 
+                                                    onChange={(e) => setConfirmPassword(e.target.value)} 
+                                                    required 
+                                                    className={submitted && password !== confirmPassword ? 'p-invalid' : ''} 
+                                                />
+                                                {submitted && password !== confirmPassword && <small className="p-invalid">Les mots de passe ne correspondent pas.</small>}
+                                            </div>
+                                        </>
+                                    )}
+                                </div>
+                            </TabPanel>
+
+                            <TabPanel header="Permissions">
+                                <div className="grid">
+                                    {availablePermissions.map(permission => (
+                                        <div key={permission} className="col-12 md:col-6">
+                                            <div className="flex align-items-center">
+                                                <Checkbox 
+                                                    checked={utilisateur.permissions.includes(permission)}
+                                                    onChange={(e) => {
+                                                        const newPermissions = e.checked
+                                                            ? [...utilisateur.permissions, permission]
+                                                            : utilisateur.permissions.filter(p => p !== permission);
+                                                        setUtilisateur({...utilisateur, permissions: newPermissions});
+                                                    }}
+                                                />
+                                                <label className="ml-2">{permission}</label>
+                                            </div>
+                                        </div>
+                                    ))}
+                                </div>
+                            </TabPanel>
+
+                            <TabPanel header="Sécurité">
+                                <div className="formgrid grid">
+                                    <div className="field col-12">
+                                        <div className="flex align-items-center">
+                                            <Checkbox 
+                                                checked={utilisateur.deuxFacteursActive}
+                                                onChange={(e) => setUtilisateur({...utilisateur, deuxFacteursActive: e.checked || false})}
+                                            />
+                                            <label className="ml-2">Authentification à deux facteurs (2FA)</label>
+                                        </div>
+                                    </div>
+
+                                    <div className="field col-12">
+                                        <div className="flex align-items-center">
+                                            <Checkbox 
+                                                checked={utilisateur.motDePasseExpire}
+                                                onChange={(e) => setUtilisateur({...utilisateur, motDePasseExpire: e.checked || false})}
+                                            />
+                                            <label className="ml-2">Forcer le changement de mot de passe</label>
+                                        </div>
+                                    </div>
+
+                                    <div className="field col-12 md:col-6">
+                                        <label>Tentatives de connexion échouées</label>
+                                        <InputText value={utilisateur.tentativesConnexion.toString()} disabled />
+                                    </div>
+
+                                    <div className="field col-12 md:col-6">
+                                        <label>Dernière mise à jour du mot de passe</label>
+                                        <InputText value={utilisateur.derniereMiseAJourMotDePasse.toLocaleDateString()} disabled />
+                                    </div>
+                                </div>
+                            </TabPanel>
+                        </TabView>
+                    </Dialog>
+
+                    {/* Dialog réinitialisation mot de passe */}
+                    <Dialog 
+                        visible={resetPasswordDialog} 
+                        style={{ width: '450px' }} 
+                        header="Réinitialiser le mot de passe" 
+                        modal 
+                        className="p-fluid" 
+                        footer={
+                            <div className="flex justify-content-end gap-2">
+                                <Button label="Annuler" icon="pi pi-times" text onClick={() => setResetPasswordDialog(false)} />
+                                <Button label="Réinitialiser" icon="pi pi-check" onClick={confirmResetPassword} />
+                            </div>
+                        }
+                        onHide={() => setResetPasswordDialog(false)}
+                    >
+                        <div className="formgrid grid">
+                            <div className="field col-12">
+                                <p>Réinitialiser le mot de passe pour <strong>{utilisateur.prenom} {utilisateur.nom}</strong></p>
+                            </div>
+
+                            <div className="field col-12">
+                                <label htmlFor="newPassword">Nouveau mot de passe</label>
+                                <Password 
+                                    id="newPassword" 
+                                    value={password} 
+                                    onChange={(e) => setPassword(e.target.value)} 
+                                />
+                            </div>
+
+                            <div className="field col-12">
+                                <label htmlFor="confirmNewPassword">Confirmer le nouveau mot de passe</label>
+                                <Password 
+                                    id="confirmNewPassword" 
+                                    value={confirmPassword} 
+                                    onChange={(e) => setConfirmPassword(e.target.value)} 
+                                />
+                            </div>
+                        </div>
+                    </Dialog>
+
+                    {/* Dialog suppression */}
+                    <Dialog 
+                        visible={deleteDialog} 
+                        style={{ width: '450px' }} 
+                        header="Confirmer la suppression" 
+                        modal 
+                        footer={
+                            <div className="flex justify-content-end gap-2">
+                                <Button label="Non" icon="pi pi-times" text onClick={() => setDeleteDialog(false)} />
+                                <Button label="Oui" icon="pi pi-check" onClick={deleteUtilisateur} />
+                            </div>
+                        }
+                        onHide={() => setDeleteDialog(false)}
+                    >
+                        <div className="flex align-items-center justify-content-center">
+                            <i className="pi pi-exclamation-triangle mr-3" style={{ fontSize: '2rem' }} />
+                            {utilisateur && (
+                                <span>
+                                    Êtes-vous sûr de vouloir supprimer l'utilisateur <b>{utilisateur.prenom} {utilisateur.nom}</b> ?
+                                </span>
+                            )}
+                        </div>
+                    </Dialog>
+
+                    {/* Dialog activité */}
+                    <Dialog 
+                        visible={activiteDialog} 
+                        style={{ width: '80vw' }} 
+                        header="Activité des utilisateurs" 
+                        modal 
+                        footer={
+                            <Button label="Fermer" icon="pi pi-times" onClick={() => setActiviteDialog(false)} />
+                        }
+                        onHide={() => setActiviteDialog(false)}
+                    >
+                        <DataTable 
+                            value={activites}
+                            paginator
+                            rows={15}
+                            loading={loading}
+                        >
+                            <Column field="timestamp" header="Date/Heure" body={(rowData) => rowData.timestamp.toLocaleString()} sortable />
+                            <Column field="utilisateurId" header="Utilisateur" body={(rowData) => {
+                                const user = utilisateurs.find(u => u.id === rowData.utilisateurId);
+                                return user ? `${user.prenom} ${user.nom}` : 'Utilisateur inconnu';
+                            }} />
+                            <Column field="action" header="Action" />
+                            <Column field="module" header="Module" />
+                            <Column field="details" header="Détails" />
+                            <Column field="adresseIP" header="IP" />
+                            <Column field="navigateur" header="Navigateur" />
+                        </DataTable>
+                    </Dialog>
+                </Card>
+            </div>
+        </div>
+    );
+};
+
+const ProtectedUtilisateursPage = () => {
+    return (
+        <ProtectedRoute requiredRoles={['SUPER_ADMIN', 'ADMIN']}>
+            <UtilisateursPage />
+        </ProtectedRoute>
+    );
+};
+
+export default ProtectedUtilisateursPage;
+>>>>>>> 5ed9a80339c59d689b9655e8be1a68312d19d4a1
diff --git a/app/(main)/chantiers/[id]/execution-granulaire/page.tsx b/app/(main)/chantiers/[id]/execution-granulaire/page.tsx
index 76dc431..70f2e9f 100644
--- a/app/(main)/chantiers/[id]/execution-granulaire/page.tsx
+++ b/app/(main)/chantiers/[id]/execution-granulaire/page.tsx
@@ -560,4 +560,8 @@ const ExecutionGranulaireChantier = () => {
     );
 };
 
+<<<<<<< HEAD
 export default ExecutionGranulaireChantier;
+=======
+export default ExecutionGranulaireChantier;
+>>>>>>> 5ed9a80339c59d689b9655e8be1a68312d19d4a1
diff --git a/app/(main)/chantiers/[id]/phases-clean/page.tsx b/app/(main)/chantiers/[id]/phases-clean/page.tsx
index a247f5b..960d1bc 100644
--- a/app/(main)/chantiers/[id]/phases-clean/page.tsx
+++ b/app/(main)/chantiers/[id]/phases-clean/page.tsx
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 'use client';
 
 import React, { useState, useRef, useEffect } from 'react';
@@ -327,3 +328,334 @@ const PhasesCleanPage: React.FC = () => {
 export default PhasesCleanPage;
 
 
+=======
+'use client';
+
+import React, { useState, useRef, useEffect } from 'react';
+import { useParams } from 'next/navigation';
+import { Card } from 'primereact/card';
+import { Button } from 'primereact/button';
+import { Dialog } from 'primereact/dialog';
+import { InputText } from 'primereact/inputtext';
+import { InputTextarea } from 'primereact/inputtextarea';
+import { Calendar } from 'primereact/calendar';
+import { InputNumber } from 'primereact/inputnumber';
+import { Dropdown } from 'primereact/dropdown';
+import { Checkbox } from 'primereact/checkbox';
+import { Toast } from 'primereact/toast';
+import { Toolbar } from 'primereact/toolbar';
+import { Badge } from 'primereact/badge';
+
+import PhasesTable from '../../../../../components/phases/PhasesTable';
+import usePhasesManager from '../../../../../hooks/usePhasesManager';
+import type { PhaseChantier, PhaseFormData } from '../../../../../types/btp-extended';
+
+const PhasesCleanPage: React.FC = () => {
+    const params = useParams();
+    const chantierId = params?.id as string;
+    const toast = useRef<Toast>(null);
+    
+    // Hook de gestion des phases
+    const {
+        phases,
+        loading,
+        selectedPhase,
+        setSelectedPhase,
+        loadPhases,
+        createPhase,
+        updatePhase,
+        deletePhase,
+        startPhase,
+        setToastRef
+    } = usePhasesManager({ chantierId });
+    
+    const [globalFilter, setGlobalFilter] = useState('');
+    
+    // États pour les dialogues
+    const [showPhaseDialog, setShowPhaseDialog] = useState(false);
+    const [editingPhase, setEditingPhase] = useState(false);
+    
+    // États pour les formulaires
+    const [phaseForm, setPhaseForm] = useState<PhaseFormData>({
+        nom: '',
+        description: '',
+        dateDebutPrevue: '',
+        dateFinPrevue: '',
+        dureeEstimeeHeures: 8,
+        priorite: 'MOYENNE',
+        critique: false,
+        statut: 'PLANIFIEE',
+        ordreExecution: 1,
+        budgetPrevu: 0,
+        coutReel: 0,
+        prerequisPhases: [],
+        competencesRequises: [],
+        materielsNecessaires: [],
+        fournisseursRecommandes: []
+    });
+
+    // Initialisation
+    useEffect(() => {
+        setToastRef(toast.current);
+        if (chantierId) {
+            loadPhases();
+        }
+    }, [chantierId, setToastRef, loadPhases]);
+
+    // Gestionnaires d'événements
+    const handleEditPhase = (phase: PhaseChantier) => {
+        setSelectedPhase(phase);
+        setEditingPhase(true);
+        setPhaseForm({
+            nom: phase.nom,
+            description: phase.description || '',
+            dateDebutPrevue: phase.dateDebutPrevue || '',
+            dateFinPrevue: phase.dateFinPrevue || '',
+            dureeEstimeeHeures: phase.dureeEstimeeHeures || 8,
+            priorite: phase.priorite || 'MOYENNE',
+            critique: phase.critique || false,
+            statut: phase.statut,
+            ordreExecution: phase.ordreExecution || 1,
+            budgetPrevu: phase.budgetPrevu || 0,
+            coutReel: phase.coutReel || 0,
+            prerequisPhases: phase.prerequisPhases || [],
+            competencesRequises: phase.competencesRequises || [],
+            materielsNecessaires: phase.materielsNecessaires || [],
+            fournisseursRecommandes: phase.fournisseursRecommandes || []
+        });
+        setShowPhaseDialog(true);
+    };
+
+    const handleSavePhase = async () => {
+        if (!phaseForm.nom.trim()) {
+            toast.current?.show({
+                severity: 'warn',
+                summary: 'Données manquantes',
+                detail: 'Veuillez remplir le nom de la phase',
+                life: 3000
+            });
+            return;
+        }
+
+        try {
+            const phaseData = {
+                ...phaseForm,
+                chantierId: chantierId
+            };
+            
+            if (editingPhase && selectedPhase) {
+                await updatePhase(selectedPhase.id!, phaseData);
+            } else {
+                await createPhase(phaseData);
+            }
+            
+            setShowPhaseDialog(false);
+            setEditingPhase(false);
+            setSelectedPhase(null);
+            resetPhaseForm();
+            
+        } catch (error) {
+            console.error('Erreur lors de la sauvegarde de la phase:', error);
+        }
+    };
+
+    const resetPhaseForm = () => {
+        setPhaseForm({
+            nom: '',
+            description: '',
+            dateDebutPrevue: '',
+            dateFinPrevue: '',
+            dureeEstimeeHeures: 8,
+            priorite: 'MOYENNE',
+            critique: false,
+            statut: 'PLANIFIEE',
+            ordreExecution: 1,
+            budgetPrevu: 0,
+            coutReel: 0,
+            prerequisPhases: [],
+            competencesRequises: [],
+            materielsNecessaires: [],
+            fournisseursRecommandes: []
+        });
+    };
+
+    // Templates de la toolbar
+    const toolbarStartTemplate = (
+        <div className="flex align-items-center gap-2">
+            <h5 className="m-0 text-color">Phases - Version Clean</h5>
+            <Badge value={phases.length} />
+        </div>
+    );
+
+    const toolbarEndTemplate = (
+        <div className="flex gap-2">
+            <span className="p-input-icon-left">
+                <i className="pi pi-search" />
+                <InputText
+                    value={globalFilter}
+                    onChange={(e) => setGlobalFilter(e.target.value)}
+                    placeholder="Rechercher..."
+                />
+            </span>
+            <Button
+                label="Nouvelle phase"
+                icon="pi pi-plus"
+                className="p-button-success"
+                onClick={() => {
+                    resetPhaseForm();
+                    setEditingPhase(false);
+                    setShowPhaseDialog(true);
+                }}
+            />
+        </div>
+    );
+
+    return (
+        <div className="grid">
+            <Toast ref={toast} />
+            
+            <div className="col-12">
+                <Card>
+                    <Toolbar 
+                        start={toolbarStartTemplate} 
+                        end={toolbarEndTemplate}
+                        className="mb-4"
+                    />
+                    
+                    <PhasesTable
+                        phases={phases}
+                        loading={loading}
+                        chantierId={chantierId}
+                        showStats={false}
+                        showChantierColumn={false}
+                        showSubPhases={true}
+                        showBudget={true}
+                        showExpansion={true}
+                        actions={['view', 'edit', 'delete', 'start']}
+                        onRefresh={loadPhases}
+                        onPhaseEdit={handleEditPhase}
+                        onPhaseDelete={deletePhase}
+                        onPhaseStart={startPhase}
+                        rows={15}
+                        globalFilter={globalFilter}
+                        showGlobalFilter={true}
+                    />
+                </Card>
+            </div>
+
+            {/* Dialog pour créer/modifier une phase */}
+            <Dialog
+                header={editingPhase ? "Modifier la phase" : "Nouvelle phase"}
+                visible={showPhaseDialog}
+                onHide={() => {
+                    setShowPhaseDialog(false);
+                    setEditingPhase(false);
+                    resetPhaseForm();
+                }}
+                footer={
+                    <div>
+                        <Button 
+                            label="Annuler" 
+                            icon="pi pi-times" 
+                            className="p-button-text" 
+                            onClick={() => {
+                                setShowPhaseDialog(false);
+                                setEditingPhase(false);
+                                resetPhaseForm();
+                            }}
+                        />
+                        <Button 
+                            label={editingPhase ? "Modifier" : "Créer"}
+                            icon="pi pi-check" 
+                            className="p-button-success" 
+                            onClick={handleSavePhase}
+                        />
+                    </div>
+                }
+                style={{ width: '50vw', maxWidth: '600px' }}
+                modal
+            >
+                <div className="grid">
+                    <div className="col-12">
+                        <div className="field">
+                            <label htmlFor="phaseNom" className="font-semibold">
+                                Nom de la phase <span className="text-red-500">*</span>
+                            </label>
+                            <InputText
+                                id="phaseNom"
+                                value={phaseForm.nom}
+                                onChange={(e) => setPhaseForm(prev => ({ ...prev, nom: e.target.value }))}
+                                className="w-full"
+                                placeholder="Ex: Fondations, Gros œuvre..."
+                            />
+                        </div>
+                    </div>
+                    
+                    <div className="col-12">
+                        <div className="field">
+                            <label htmlFor="phaseDescription" className="font-semibold">Description</label>
+                            <InputTextarea
+                                id="phaseDescription"
+                                value={phaseForm.description}
+                                onChange={(e) => setPhaseForm(prev => ({ ...prev, description: e.target.value }))}
+                                className="w-full"
+                                rows={3}
+                                placeholder="Description détaillée de la phase..."
+                            />
+                        </div>
+                    </div>
+                    
+                    <div className="col-12 md:col-6">
+                        <div className="field">
+                            <label htmlFor="phaseDuree" className="font-semibold">Durée estimée (heures)</label>
+                            <InputNumber
+                                id="phaseDuree"
+                                value={phaseForm.dureeEstimeeHeures}
+                                onChange={(e) => setPhaseForm(prev => ({ ...prev, dureeEstimeeHeures: e.value || 0 }))}
+                                className="w-full"
+                                min={1}
+                                suffix=" h"
+                            />
+                        </div>
+                    </div>
+                    
+                    <div className="col-12 md:col-6">
+                        <div className="field">
+                            <label htmlFor="phasePriorite" className="font-semibold">Priorité</label>
+                            <Dropdown
+                                id="phasePriorite"
+                                value={phaseForm.priorite}
+                                options={[
+                                    { label: 'Faible', value: 'FAIBLE' },
+                                    { label: 'Moyenne', value: 'MOYENNE' },
+                                    { label: 'Élevée', value: 'ELEVEE' },
+                                    { label: 'Critique', value: 'CRITIQUE' }
+                                ]}
+                                onChange={(e) => setPhaseForm(prev => ({ ...prev, priorite: e.value }))}
+                                className="w-full"
+                            />
+                        </div>
+                    </div>
+                    
+                    <div className="col-12">
+                        <div className="field-checkbox">
+                            <Checkbox
+                                id="phaseCritique"
+                                checked={phaseForm.critique}
+                                onChange={(e) => setPhaseForm(prev => ({ ...prev, critique: e.checked }))}
+                            />
+                            <label htmlFor="phaseCritique" className="ml-2 font-semibold">
+                                Phase critique
+                            </label>
+                        </div>
+                    </div>
+                </div>
+            </Dialog>
+        </div>
+    );
+};
+
+export default PhasesCleanPage;
+
+
+>>>>>>> 5ed9a80339c59d689b9655e8be1a68312d19d4a1
diff --git a/app/(main)/chantiers/[id]/phases/page.tsx b/app/(main)/chantiers/[id]/phases/page.tsx
index 8956fe2..5da5432 100644
--- a/app/(main)/chantiers/[id]/phases/page.tsx
+++ b/app/(main)/chantiers/[id]/phases/page.tsx
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 'use client';
 
 import React, { useState, useRef, useEffect, useContext, useCallback } from 'react';
@@ -1131,3 +1132,1138 @@ export default PhasesPage;
 
 
 
+=======
+'use client';
+
+import React, { useState, useRef, useEffect, useContext, useCallback } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { LayoutContext } from '../../../../../layout/context/layoutcontext';
+import { Card } from 'primereact/card';
+import { Button } from 'primereact/button';
+import { Dialog } from 'primereact/dialog';
+import { InputText } from 'primereact/inputtext';
+import { InputTextarea } from 'primereact/inputtextarea';
+import { Calendar } from 'primereact/calendar';
+import { InputNumber } from 'primereact/inputnumber';
+import { Dropdown } from 'primereact/dropdown';
+import { Checkbox } from 'primereact/checkbox';
+import { Toast } from 'primereact/toast';
+import { Badge } from 'primereact/badge';
+import { Toolbar } from 'primereact/toolbar';
+
+import PhasesTable from '../../../../../components/phases/PhasesTable';
+import usePhasesManager from '../../../../../hooks/usePhasesManager';
+import BudgetPlanningDialog from '../../../../../components/phases/BudgetPlanningDialog';
+import BudgetExecutionDialog from '../../../../../components/phases/BudgetExecutionDialog';
+import PhaseGenerationWizard from '../../../../../components/phases/PhaseGenerationWizard';
+import PhaseValidationPanel from '../../../../../components/phases/PhaseValidationPanel';
+
+import { PhaseChantier, PhaseFormData, PhaseChantierFormData, StatutPhase } from '../../../../../types/btp-extended';
+import { Chantier } from '../../../../../types/btp';
+import chantierService from '../../../../../services/chantierService';
+import phaseService from '../../../../../services/phaseService';
+import { ConfirmDialog } from 'primereact/confirmdialog';
+
+const PhasesPage: React.FC = () => {
+    const params = useParams();
+    const router = useRouter();
+    const chantierId = params?.id as string;
+    const { setBreadcrumbs } = useContext(LayoutContext);
+    const toast = useRef<Toast>(null);
+    
+    // Hook de gestion des phases
+    const {
+        phases,
+        loading,
+        selectedPhase,
+        setSelectedPhase,
+        loadPhases,
+        createPhase,
+        updatePhase,
+        deletePhase,
+        startPhase,
+        updateProgress,
+        createSubPhase,
+        setToastRef
+    } = usePhasesManager({ chantierId });
+    
+    // États locaux
+    const [chantier, setChantier] = useState<Chantier | null>(null);
+    const [globalFilter, setGlobalFilter] = useState('');
+    const [operationLoading, setOperationLoading] = useState(false);
+    
+    // États pour les dialogues
+    const [showPhaseDialog, setShowPhaseDialog] = useState(false);
+    const [showSousPhaseDialog, setShowSousPhaseDialog] = useState(false);
+    const [showWizardDialog, setShowWizardDialog] = useState(false);
+    const [showValidationDialog, setShowValidationDialog] = useState(false);
+    const [showProgressDialog, setShowProgressDialog] = useState(false);
+    const [showBudgetPlanningDialog, setShowBudgetPlanningDialog] = useState(false);
+    const [showBudgetExecutionDialog, setShowBudgetExecutionDialog] = useState(false);
+    const [editingPhase, setEditingPhase] = useState(false);
+    const [parentPhaseForSubPhase, setParentPhaseForSubPhase] = useState<PhaseChantier | null>(null);
+    
+    // États pour les formulaires
+    const [phaseForm, setPhaseForm] = useState<PhaseFormData>({
+        nom: '',
+        description: '',
+        dateDebutPrevue: '',
+        dateFinPrevue: '',
+        dureeEstimeeHeures: 8,
+        priorite: 'MOYENNE',
+        critique: false,
+        statut: 'PLANIFIEE',
+        ordreExecution: 1,
+        budgetPrevu: 0,
+        coutReel: 0,
+        prerequisPhases: [],
+        competencesRequises: [],
+        materielsNecessaires: [],
+        fournisseursRecommandes: []
+    });
+    
+    const [sousPhaseForm, setSousPhaseForm] = useState<PhaseFormData>({
+        nom: '',
+        description: '',
+        dateDebutPrevue: '',
+        dateFinPrevue: '',
+        dureeEstimeeHeures: 8,
+        priorite: 'MOYENNE',
+        critique: false,
+        statut: 'PLANIFIEE',
+        ordreExecution: 1,
+        budgetPrevu: 0,
+        coutReel: 0,
+        prerequisPhases: [],
+        competencesRequises: [],
+        materielsNecessaires: [],
+        fournisseursRecommandes: []
+    });
+
+    // État pour l'avancement
+    const [avancement, setAvancement] = useState<number>(0);
+
+    // Breadcrumbs
+    useEffect(() => {
+        if (chantier) {
+            setBreadcrumbs([
+                {
+                    labels: ['Chantiers', chantier.nom, 'Phases'],
+                    to: `/chantiers/${chantierId}/phases`
+                }
+            ]);
+        } else {
+            setBreadcrumbs([
+                {
+                    labels: ['Chantiers', 'Phases'],
+                    to: `/chantiers/${chantierId}/phases`
+                }
+            ]);
+        }
+    }, [chantier, chantierId, setBreadcrumbs]);
+
+    const loadChantier = useCallback(async () => {
+        if (!chantierId) return;
+        try {
+            const chantierData = await chantierService.getById(chantierId);
+            setChantier(chantierData);
+        } catch (error) {
+            console.error('Erreur lors du chargement du chantier:', error);
+            toast.current?.show({
+                severity: 'error',
+                summary: 'Erreur',
+                detail: 'Impossible de charger les informations du chantier',
+                life: 5000
+            });
+        }
+    }, [chantierId]);
+
+    // Initialisation du toast
+    useEffect(() => {
+        setToastRef(toast.current);
+    }, [setToastRef]);
+
+    // Chargement des données
+    useEffect(() => {
+        if (chantierId) {
+            loadChantier();
+            loadPhases();
+        }
+    }, [chantierId]);
+
+    // Gestionnaire pour les phases générées par l'assistant
+    const handlePhasesGenerated = async (phasesGenerees: any[]) => {
+        try {
+            console.log('Phases générées par l\'assistant:', phasesGenerees);
+            
+            toast.current?.show({
+                severity: 'success',
+                summary: 'Phases générées',
+                detail: `${phasesGenerees.length} phases ont été créées avec succès`,
+                life: 5000
+            });
+            
+            // Attendre un peu pour que les données soient persistées
+            setTimeout(async () => {
+                console.log('Rechargement des phases après génération...');
+                await loadPhases();
+            }, 1000);
+            
+        } catch (error) {
+            console.error('Erreur lors de la gestion des phases générées:', error);
+            toast.current?.show({
+                severity: 'error',
+                summary: 'Erreur',
+                detail: 'Impossible de traiter les phases générées',
+                life: 3000
+            });
+        }
+    };
+
+    // Gestionnaires d'événements pour les callbacks du composant PhasesTable
+
+    // Gestionnaires d'événements pour les callbacks du composant PhasesTable
+    const handleViewPhase = (phase: PhaseChantier) => {
+        setSelectedPhase(phase);
+        setShowValidationDialog(true);
+    };
+
+    const handleEditPhase = (phase: PhaseChantier) => {
+        setSelectedPhase(phase);
+        setEditingPhase(true);
+        setPhaseForm({
+            nom: phase.nom,
+            description: phase.description || '',
+            dateDebutPrevue: phase.dateDebutPrevue || '',
+            dateFinPrevue: phase.dateFinPrevue || '',
+            dureeEstimeeHeures: phase.dureeEstimeeHeures || 8,
+            priorite: phase.priorite || 'MOYENNE',
+            critique: phase.critique || false,
+            statut: phase.statut,
+            ordreExecution: phase.ordreExecution || 1,
+            budgetPrevu: phase.budgetPrevu || 0,
+            coutReel: phase.coutReel || 0,
+            prerequisPhases: phase.prerequisPhases || [],
+            competencesRequises: phase.competencesRequises || [],
+            materielsNecessaires: phase.materielsNecessaires || [],
+            fournisseursRecommandes: phase.fournisseursRecommandes || []
+        });
+        setShowPhaseDialog(true);
+    };
+
+    const handleProgressPhase = (phase: PhaseChantier) => {
+        setSelectedPhase(phase);
+        setAvancement(phase.pourcentageAvancement || 0);
+        setShowProgressDialog(true);
+    };
+
+    const handleBudgetPlanPhase = (phase: PhaseChantier) => {
+        setSelectedPhase(phase);
+        setShowBudgetPlanningDialog(true);
+    };
+
+    const handleBudgetTrackPhase = (phase: PhaseChantier) => {
+        setSelectedPhase(phase);
+        setShowBudgetExecutionDialog(true);
+    };
+
+    const handleSubPhaseAdd = (parentPhase: PhaseChantier) => {
+        setParentPhaseForSubPhase(parentPhase);
+        setSelectedPhase(parentPhase);
+        setEditingPhase(false);
+        
+        const sousPhases = phases.filter(p => p.phaseParent === parentPhase.id);
+        setSousPhaseForm({
+            nom: '',
+            description: '',
+            dateDebutPrevue: '',
+            dateFinPrevue: '',
+            dureeEstimeeHeures: 8,
+            priorite: 'MOYENNE',
+            critique: false,
+            statut: 'PLANIFIEE',
+            ordreExecution: sousPhases.length + 1,
+            budgetPrevu: 0,
+            coutReel: 0,
+            prerequisPhases: [],
+            competencesRequises: [],
+            materielsNecessaires: [],
+            fournisseursRecommandes: []
+        });
+        setShowSousPhaseDialog(true);
+    };
+
+    // Fonction pour sauvegarder la planification budgétaire
+    const handleSaveBudgetPlanning = async (budgetData: any) => {
+        if (!selectedPhase) return;
+
+        try {
+            setOperationLoading(true);
+            
+            // Mettre à jour le budget prévu de la phase avec le prix calculé
+            const updatedPhaseData = {
+                ...selectedPhase,
+                budgetPrevu: budgetData.prixVenteCalcule,
+                // Stocker l'analyse détaillée en tant que métadonnées
+                analyseBudgetaire: {
+                    totalMateriel: budgetData.totalMateriel,
+                    totalMainOeuvre: budgetData.totalMainOeuvre,
+                    totalSousTraitance: budgetData.totalSousTraitance,
+                    totalTransport: budgetData.totalTransport,
+                    totalAutres: budgetData.totalAutres,
+                    totalHT: budgetData.totalHT,
+                    margeObjectif: budgetData.margeObjectif,
+                    tauxMarge: budgetData.tauxMarge,
+                    dateAnalyse: new Date().toISOString()
+                }
+            };
+
+            // Appeler l'API pour mettre à jour la phase
+            await phaseService.update(selectedPhase.id!, updatedPhaseData);
+            await loadPhases();
+
+            toast.current?.show({
+                severity: 'success',
+                summary: 'Budget planifié',
+                detail: `Le budget de la phase "${selectedPhase.nom}" a été mis à jour`,
+                life: 3000
+            });
+
+        } catch (error) {
+            console.error('Erreur lors de la sauvegarde du budget:', error);
+            toast.current?.show({
+                severity: 'error',
+                summary: 'Erreur',
+                detail: 'Impossible de sauvegarder la planification budgétaire',
+                life: 3000
+            });
+        } finally {
+            setOperationLoading(false);
+        }
+    };
+
+    // Fonction pour sauvegarder l'exécution budgétaire
+    const handleSaveBudgetExecution = async (executionData: any) => {
+        if (!selectedPhase) return;
+
+        try {
+            setOperationLoading(true);
+            
+            // Mettre à jour le coût réel de la phase
+            const updatedPhaseData = {
+                ...selectedPhase,
+                coutReel: executionData.coutTotal,
+                // Stocker l'analyse d'exécution en tant que métadonnées
+                analyseExecution: {
+                    depensesValidees: executionData.depenses,
+                    analyseEcarts: executionData.analyse,
+                    ecartTotal: executionData.ecartTotal,
+                    ecartPourcentage: executionData.ecartPourcentage,
+                    dateAnalyse: executionData.dateAnalyse,
+                    statut: executionData.ecartPourcentage > 10 ? 'DEPASSEMENT' : 
+                             executionData.ecartPourcentage > 5 ? 'ALERTE' : 'CONFORME'
+                }
+            };
+
+            // Appeler l'API pour mettre à jour la phase
+            await phaseService.update(selectedPhase.id!, updatedPhaseData);
+            await loadPhases();
+
+            toast.current?.show({
+                severity: 'success',
+                summary: 'Exécution budgétaire mise à jour',
+                detail: `Les dépenses de la phase "${selectedPhase.nom}" ont été enregistrées`,
+                life: 3000
+            });
+
+        } catch (error) {
+            console.error('Erreur lors de la sauvegarde de l\'exécution:', error);
+            toast.current?.show({
+                severity: 'error',
+                summary: 'Erreur',
+                detail: 'Impossible de sauvegarder l\'exécution budgétaire',
+                life: 3000
+            });
+        } finally {
+            setOperationLoading(false);
+        }
+    };
+
+
+    // Fonction pour créer/modifier une phase principale
+    const handleSavePhase = async () => {
+        if (!phaseForm.nom.trim()) {
+            toast.current?.show({
+                severity: 'warn',
+                summary: 'Données manquantes',
+                detail: 'Veuillez remplir le nom de la phase',
+                life: 3000
+            });
+            return;
+        }
+
+        try {
+            setOperationLoading(true);
+            
+            const phaseData = {
+                nom: phaseForm.nom,
+                description: phaseForm.description,
+                statut: 'PLANIFIEE' as StatutPhase,
+                dateDebutPrevue: phaseForm.dateDebutPrevue,
+                dateFinPrevue: phaseForm.dateFinPrevue,
+                dureeEstimeeHeures: phaseForm.dureeEstimeeHeures,
+                priorite: phaseForm.priorite,
+                critique: phaseForm.critique,
+                ordreExecution: phaseForm.ordreExecution,
+                budgetPrevu: phaseForm.budgetPrevu,
+                coutReel: phaseForm.coutReel,
+                chantierId: chantierId,
+                prerequisPhases: phaseForm.prerequisPhases,
+                competencesRequises: phaseForm.competencesRequises,
+                materielsNecessaires: phaseForm.materielsNecessaires,
+                fournisseursRecommandes: phaseForm.fournisseursRecommandes
+            };
+            
+            console.log('Données de la phase à créer:', phaseData);
+            console.log('ID du chantier:', chantierId);
+            
+            if (editingPhase && selectedPhase) {
+                // Modification
+                // ID sera ajouté par le service
+                await phaseService.update(selectedPhase.id!, { ...phaseData, id: selectedPhase.id } as any);
+                
+                toast.current?.show({
+                    severity: 'success',
+                    summary: 'Phase modifiée',
+                    detail: `La phase "${phaseForm.nom}" a été modifiée`,
+                    life: 3000
+                });
+            } else {
+                // Création
+                await phaseService.create(phaseData);
+                
+                toast.current?.show({
+                    severity: 'success',
+                    summary: 'Phase créée',
+                    detail: `La phase "${phaseForm.nom}" a été créée`,
+                    life: 3000
+                });
+            }
+            
+            // Ajouter un petit délai pour s'assurer que le backend a bien persisté les données
+            await new Promise(resolve => setTimeout(resolve, 500));
+            
+            await loadPhases();
+            setShowPhaseDialog(false);
+            setEditingPhase(false);
+            setSelectedPhase(null);
+            
+        } catch (error: any) {
+            console.error('Erreur lors de la sauvegarde de la phase:', error);
+            
+            // Gérer le cas où le serveur backend n'est pas disponible
+            if (error.code === 'ECONNREFUSED' || error.message?.includes('Network Error') || error.response?.status === undefined) {
+                toast.current?.show({
+                    severity: 'warn',
+                    summary: 'Serveur indisponible',
+                    detail: 'Le serveur backend n\'est pas démarré. La phase sera créée quand le serveur sera disponible.',
+                    life: 8000
+                });
+                
+                // En mode développement, simuler la création pour ne pas bloquer l'UI
+                if (process.env.NODE_ENV === 'development') {
+                    const simulatedPhase: PhaseChantier = {
+                        id: Math.random().toString(), // ID temporaire
+                        nom: phaseForm.nom,
+                        description: phaseForm.description,
+                        statut: 'PLANIFIEE',
+                        dateDebutPrevue: phaseForm.dateDebutPrevue,
+                        dateFinPrevue: phaseForm.dateFinPrevue,
+                        dureeEstimeeHeures: phaseForm.dureeEstimeeHeures,
+                        priorite: phaseForm.priorite,
+                        critique: phaseForm.critique,
+                        ordreExecution: phaseForm.ordreExecution,
+                        chantierId: chantierId,
+                        prerequisPhases: phaseForm.prerequisPhases,
+                        competencesRequises: phaseForm.competencesRequises,
+                        materielsNecessaires: phaseForm.materielsNecessaires,
+                        fournisseursRecommandes: phaseForm.fournisseursRecommandes,
+                        dateCreation: new Date().toISOString(),
+                        dateModification: new Date().toISOString()
+                    };
+                    
+                    // Ajouter la phase simulée à la liste locale
+                    // setPhases(prev => [...prev, simulatedPhase]); // Phases gérées par le chantier
+                    setShowPhaseDialog(false);
+                    setEditingPhase(false);
+                    setSelectedPhase(null);
+                    return;
+                }
+            } else {
+                let errorMessage = 'Erreur inconnue';
+                
+                if (error.response?.status === 400) {
+                    errorMessage = error.response?.data?.message || 'Données invalides. Vérifiez les champs obligatoires.';
+                } else if (error.response?.status === 401) {
+                    errorMessage = 'Vous n\'\u00eates pas autorisé à effectuer cette action.';
+                } else if (error.response?.status === 404) {
+                    errorMessage = 'Ressource non trouvée sur le serveur.';
+                } else if (error.response?.status >= 500) {
+                    errorMessage = 'Erreur interne du serveur. Veuillez réessayer plus tard.';
+                } else {
+                    errorMessage = error.response?.data?.message || error.message || 'Erreur inconnue';
+                }
+                
+                console.error('Détails de l\'erreur:', {
+                    status: error.response?.status,
+                    data: error.response?.data,
+                    config: error.config
+                });
+                
+                toast.current?.show({
+                    severity: 'error',
+                    summary: 'Erreur',
+                    detail: `${editingPhase ? 'Impossible de modifier la phase' : 'Impossible de créer la phase'}: ${errorMessage}`,
+                    life: 8000
+                });
+            }
+        } finally {
+            setOperationLoading(false);
+        }
+    };
+
+    // Fonction pour créer/modifier une sous-phase
+    const createSousPhase = async () => {
+        if (!selectedPhase || !sousPhaseForm.nom.trim()) {
+            toast.current?.show({
+                severity: 'warn',
+                summary: 'Données manquantes',
+                detail: 'Veuillez remplir le nom de la sous-phase',
+                life: 3000
+            });
+            return;
+        }
+
+        // Debug logs
+        console.log('createSousPhase - selectedPhase:', selectedPhase);
+        console.log('createSousPhase - sousPhaseForm:', sousPhaseForm);
+        console.log('createSousPhase - chantierId:', chantierId);
+
+        try {
+            setOperationLoading(true);
+            
+            // Calculer l'ordre d'exécution pour éviter les doublons
+            let maxOrder = 0;
+            try {
+                if (phases && phases.length > 0) {
+                    const ordres = phases
+                        .map(p => p && typeof p.ordreExecution === 'number' ? p.ordreExecution : 0)
+                        .filter(ordre => !isNaN(ordre));
+                    maxOrder = ordres.length > 0 ? Math.max(...ordres) : 0;
+                }
+            } catch (e) {
+                console.warn('Erreur lors du calcul de l\'ordre max:', e);
+                maxOrder = 0;
+            }
+            const nextOrder = maxOrder + 1;
+            
+            console.log('Ordre d\'exécution calculé:', nextOrder, 'Max actuel:', maxOrder);
+            
+            const phaseData: PhaseChantierFormData = {
+                nom: sousPhaseForm.nom,
+                description: sousPhaseForm.description,
+                statut: 'PLANIFIEE',
+                dateDebutPrevue: sousPhaseForm.dateDebutPrevue,
+                dateFinPrevue: sousPhaseForm.dateFinPrevue,
+                dureeEstimeeHeures: sousPhaseForm.dureeEstimeeHeures,
+                priorite: sousPhaseForm.priorite,
+                critique: sousPhaseForm.critique,
+                pourcentageAvancement: 0,
+                phaseParentId: selectedPhase.id,
+                chantierId: selectedPhase.chantierId || chantierId,
+                ordreExecution: nextOrder, // Utiliser l'ordre calculé
+                budgetPrevu: sousPhaseForm.budgetPrevu,
+                coutReel: sousPhaseForm.coutReel,
+                prerequisPhases: sousPhaseForm.prerequisPhases,
+                competencesRequises: sousPhaseForm.competencesRequises,
+                materielsNecessaires: sousPhaseForm.materielsNecessaires,
+                fournisseursRecommandes: sousPhaseForm.fournisseursRecommandes,
+                actif: true
+            };
+            
+            if (editingPhase && selectedPhase.id) {
+                await phaseService.update(selectedPhase.id, phaseData);
+                toast.current?.show({
+                    severity: 'success',
+                    summary: 'Sous-phase modifiée',
+                    detail: 'La sous-phase a été mise à jour',
+                    life: 3000
+                });
+            } else {
+                await phaseService.create(phaseData);
+                toast.current?.show({
+                    severity: 'success',
+                    summary: 'Sous-phase créée',
+                    detail: `La sous-phase "${phaseData.nom}" a été ajoutée`,
+                    life: 3000
+                });
+            }
+            
+            await loadPhases();
+            setShowSousPhaseDialog(false);
+            setEditingPhase(false);
+            
+        } catch (error) {
+            // Gestion d'erreur super simplifiée pour éviter les erreurs dans la gestion d'erreur
+            console.log('=== ERREUR CREATESOUXPHASE ===');
+            console.log('Type:', typeof error);
+            console.log('Error object:', error);
+            
+            let errorMessage = 'Erreur lors de la création de la sous-phase';
+            
+            // Tentative d'extraction du message de façon très sécurisée
+            if (error?.response?.data?.message) {
+                errorMessage = error.response.data.message;
+            } else if (error?.message) {
+                errorMessage = error.message;
+            }
+            
+            console.log('Message final:', errorMessage);
+            
+            // Affichage du toast de façon très sécurisée
+            if (toast && toast.current && typeof toast.current.show === 'function') {
+                toast.current.show({
+                    severity: 'error',
+                    summary: 'Erreur',
+                    detail: errorMessage,
+                    life: 8000
+                });
+            }
+        } finally {
+            setOperationLoading(false);
+        }
+    };
+
+
+
+    // Toolbar
+    const toolbarStartTemplate = (
+        <div className="flex align-items-center gap-2">
+            <h5 className="m-0 text-color">
+                {chantier ? `Phases - ${chantier.nom}` : 'Gestion des phases'}
+            </h5>
+            <Badge value={phases.filter(p => !p.phaseParent).length} />
+        </div>
+    );
+
+    const toolbarEndTemplate = (
+        <div className="flex gap-2">
+            <span className="p-input-icon-left">
+                <i className="pi pi-search" />
+                <InputText
+                    value={globalFilter}
+                    onChange={(e) => setGlobalFilter(e.target.value)}
+                    placeholder="Rechercher..."
+                />
+            </span>
+            <Button
+                label="Assistant Phases"
+                icon="pi pi-magic"
+                className="p-button-text p-button-rounded p-button-help"
+                onClick={() => setShowWizardDialog(true)}
+                tooltip="Générer automatiquement les phases selon le type de chantier"
+                tooltipOptions={{ position: 'top' }}
+            />
+            <Button
+                label="Nouvelle phase"
+                icon="pi pi-plus"
+                className="p-button-text p-button-rounded p-button-success"
+                onClick={() => setShowPhaseDialog(true)}
+            />
+        </div>
+    );
+
+    // Footer du dialog de sous-phase
+    const sousPhaseDialogFooter = (
+        <div>
+            <Button 
+                label="Annuler" 
+                icon="pi pi-times" 
+                onClick={() => {
+                    setShowSousPhaseDialog(false);
+                    setEditingPhase(false);
+                }}
+                className="p-button-text p-button-rounded" 
+            />
+            <Button 
+                label={editingPhase ? "Modifier" : "Créer"} 
+                icon="pi pi-check" 
+                onClick={createSousPhase}
+                disabled={!sousPhaseForm.nom.trim()}
+                loading={operationLoading}
+            />
+        </div>
+    );
+
+    return (
+        <div className="grid">
+            <Toast ref={toast} />
+            <ConfirmDialog />
+            
+            <div className="col-12">
+                <Card>
+                    <Toolbar 
+                        start={toolbarStartTemplate} 
+                        end={toolbarEndTemplate}
+                        className="mb-4"
+                    />
+                    
+                    <PhasesTable
+                        phases={phases}
+                        loading={operationLoading}
+                        chantierId={chantierId}
+                        showStats={false}
+                        showChantierColumn={false}
+                        showSubPhases={true}
+                        showBudget={true}
+                        showExpansion={true}
+                        actions={['all']}
+                        onRefresh={loadPhases}
+                        onPhaseSelect={handleViewPhase}
+                        onPhaseEdit={handleEditPhase}
+                        onPhaseDelete={deletePhase}
+                        onPhaseStart={startPhase}
+                        onPhaseProgress={handleProgressPhase}
+                        onPhaseBudgetPlan={handleBudgetPlanPhase}
+                        onPhaseBudgetTrack={handleBudgetTrackPhase}
+                        onSubPhaseAdd={handleSubPhaseAdd}
+                        rows={15}
+                        globalFilter={globalFilter}
+                        showGlobalFilter={true}
+                    />
+                </Card>
+            </div>
+
+            {/* Dialog pour créer/modifier une phase principale */}
+            <Dialog
+                header={editingPhase ? "Modifier la phase" : "Nouvelle phase"}
+                visible={showPhaseDialog}
+                onHide={() => {
+                    setShowPhaseDialog(false);
+                    setEditingPhase(false);
+                    setPhaseForm({
+                        nom: '',
+                        description: '',
+                        dateDebutPrevue: '',
+                        dateFinPrevue: '',
+                        dureeEstimeeHeures: 8,
+                        priorite: 'MOYENNE',
+                        critique: false,
+        statut: 'PLANIFIEE',
+        ordreExecution: 1,
+                        prerequisPhases: [],
+                        competencesRequises: [],
+                        materielsNecessaires: [],
+                        fournisseursRecommandes: []
+                    });
+                }}
+                footer={
+                    <div>
+                        <Button 
+                            label="Annuler" 
+                            icon="pi pi-times" 
+                            className="p-button-text p-button-rounded" 
+                            onClick={() => {
+                                setShowPhaseDialog(false);
+                                setEditingPhase(false);
+                            }}
+                        />
+                        <Button 
+                            label={editingPhase ? "Modifier" : "Créer"}
+                            icon="pi pi-check" 
+                            className="p-button-text p-button-rounded p-button-success" 
+                            onClick={handleSavePhase}
+                        />
+                    </div>
+                }
+                style={{ width: '70vw', maxWidth: '900px' }}
+                modal
+            >
+                <div className="grid">
+                    <div className="col-12">
+                        <div className="field">
+                            <label htmlFor="phaseNom" className="font-semibold">
+                                Nom de la phase <span className="text-red-500">*</span>
+                            </label>
+                            <InputText
+                                id="phaseNom"
+                                value={phaseForm.nom}
+                                onChange={(e) => setPhaseForm(prev => ({ ...prev, nom: e.target.value }))}
+                                className="w-full"
+                                placeholder="Ex: Fondations, Gros œuvre, Finitions..."
+                            />
+                        </div>
+                    </div>
+                    
+                    <div className="col-12">
+                        <div className="field">
+                            <label htmlFor="phaseDescription" className="font-semibold">
+                                Description
+                            </label>
+                            <InputTextarea
+                                id="phaseDescription"
+                                value={phaseForm.description}
+                                onChange={(e) => setPhaseForm(prev => ({ ...prev, description: e.target.value }))}
+                                className="w-full"
+                                rows={3}
+                                placeholder="Description détaillée de la phase..."
+                            />
+                        </div>
+                    </div>
+                    
+                    <div className="col-12 md:col-6">
+                        <div className="field">
+                            <label htmlFor="phaseDebut" className="font-semibold">Date début prévue</label>
+                            <Calendar
+                                id="phaseDebut"
+                                value={phaseForm.dateDebutPrevue ? new Date(phaseForm.dateDebutPrevue) : null}
+                                onChange={(e) => setPhaseForm(prev => ({ 
+                                    ...prev, 
+                                    dateDebutPrevue: e.value ? e.value.toISOString().split('T')[0] : '' 
+                                }))}
+                                className="w-full"
+                                dateFormat="dd/mm/yy"
+                                placeholder="Sélectionner une date"
+                            />
+                        </div>
+                    </div>
+                    
+                    <div className="col-12 md:col-6">
+                        <div className="field">
+                            <label htmlFor="phaseFin" className="font-semibold">Date fin prévue</label>
+                            <Calendar
+                                id="phaseFin"
+                                value={phaseForm.dateFinPrevue ? new Date(phaseForm.dateFinPrevue) : null}
+                                onChange={(e) => setPhaseForm(prev => ({ 
+                                    ...prev, 
+                                    dateFinPrevue: e.value ? e.value.toISOString().split('T')[0] : '' 
+                                }))}
+                                className="w-full"
+                                dateFormat="dd/mm/yy"
+                                placeholder="Sélectionner une date"
+                            />
+                        </div>
+                    </div>
+                    
+                    <div className="col-12 md:col-6">
+                        <div className="field">
+                            <label htmlFor="phaseDuree" className="font-semibold">Durée estimée (heures)</label>
+                            <InputNumber
+                                id="phaseDuree"
+                                value={phaseForm.dureeEstimeeHeures}
+                                onChange={(e) => setPhaseForm(prev => ({ ...prev, dureeEstimeeHeures: e.value || 0 }))}
+                                className="w-full"
+                                min={1}
+                                suffix=" h"
+                            />
+                        </div>
+                    </div>
+                    
+                    <div className="col-12 md:col-6">
+                        <div className="field">
+                            <label htmlFor="phaseOrdre" className="font-semibold">Ordre d'exécution</label>
+                            <InputNumber
+                                id="phaseOrdre"
+                                value={phaseForm.ordreExecution}
+                                onChange={(e) => setPhaseForm(prev => ({ ...prev, ordreExecution: e.value || 1 }))}
+                                className="w-full"
+                                min={1}
+                            />
+                        </div>
+                    </div>
+                    
+                    <div className="col-12 md:col-6">
+                        <div className="field">
+                            <label htmlFor="phasePriorite" className="font-semibold">Priorité</label>
+                            <Dropdown
+                                id="phasePriorite"
+                                value={phaseForm.priorite}
+                                options={[
+                                    { label: 'Faible', value: 'FAIBLE' },
+                                    { label: 'Moyenne', value: 'MOYENNE' },
+                                    { label: 'Élevée', value: 'ELEVEE' },
+                                    { label: 'Critique', value: 'CRITIQUE' }
+                                ]}
+                                onChange={(e) => setPhaseForm(prev => ({ ...prev, priorite: e.value }))}
+                                className="w-full"
+                            />
+                        </div>
+                    </div>
+                    
+                    <div className="col-12 md:col-6">
+                        <div className="field">
+                            <label htmlFor="phaseBudgetPrevu" className="font-semibold">Budget prévu (€)</label>
+                            <InputNumber
+                                id="phaseBudgetPrevu"
+                                value={phaseForm.budgetPrevu}
+                                onChange={(e) => setPhaseForm(prev => ({ ...prev, budgetPrevu: e.value || 0 }))}
+                                className="w-full"
+                                min={0}
+                                mode="currency"
+                                currency="EUR"
+                                locale="fr-FR"
+                                placeholder="0,00 €"
+                            />
+                        </div>
+                    </div>
+                    
+                    <div className="col-12 md:col-6">
+                        <div className="field">
+                            <label htmlFor="phaseCoutReel" className="font-semibold">Coût réel (€)</label>
+                            <InputNumber
+                                id="phaseCoutReel"
+                                value={phaseForm.coutReel}
+                                onChange={(e) => setPhaseForm(prev => ({ ...prev, coutReel: e.value || 0 }))}
+                                className="w-full"
+                                min={0}
+                                mode="currency"
+                                currency="EUR"
+                                locale="fr-FR"
+                                placeholder="0,00 €"
+                            />
+                        </div>
+                    </div>
+                    
+                    <div className="col-12">
+                        <div className="field-checkbox">
+                            <Checkbox
+                                id="phaseCritique"
+                                checked={phaseForm.critique}
+                                onChange={(e) => setPhaseForm(prev => ({ ...prev, critique: e.checked }))}
+                            />
+                            <label htmlFor="phaseCritique" className="ml-2 font-semibold">
+                                Phase critique
+                            </label>
+                        </div>
+                    </div>
+                </div>
+            </Dialog>
+
+            {/* Dialog pour créer/modifier une sous-phase */}
+            <Dialog
+                header={editingPhase ? "Modifier la sous-phase" : "Nouvelle sous-phase"}
+                visible={showSousPhaseDialog}
+                onHide={() => {
+                    setShowSousPhaseDialog(false);
+                    setEditingPhase(false);
+                }}
+                footer={sousPhaseDialogFooter}
+                style={{ width: '50vw' }}
+                modal
+            >
+                <div className="grid">
+                    <div className="col-12">
+                        <div className="field">
+                            <label htmlFor="sousPhaseNom" className="font-semibold">
+                                Nom de la sous-phase <span className="text-red-500">*</span>
+                            </label>
+                            <InputText
+                                id="sousPhaseNom"
+                                value={sousPhaseForm.nom}
+                                onChange={(e) => setSousPhaseForm(prev => ({ ...prev, nom: e.target.value }))}
+                                className="w-full"
+                                placeholder="Ex: Préparation du béton"
+                            />
+                        </div>
+                    </div>
+                    
+                    <div className="col-12">
+                        <div className="field">
+                            <label htmlFor="sousPhaseDescription" className="font-semibold">Description</label>
+                            <InputTextarea
+                                id="sousPhaseDescription"
+                                value={sousPhaseForm.description}
+                                onChange={(e) => setSousPhaseForm(prev => ({ ...prev, description: e.target.value }))}
+                                className="w-full"
+                                rows={3}
+                                placeholder="Description détaillée de la sous-phase"
+                            />
+                        </div>
+                    </div>
+                    
+                    <div className="col-12 md:col-6">
+                        <div className="field">
+                            <label htmlFor="sousPhaseDebut" className="font-semibold">Date début prévue</label>
+                            <Calendar
+                                id="sousPhaseDebut"
+                                value={sousPhaseForm.dateDebutPrevue ? new Date(sousPhaseForm.dateDebutPrevue) : null}
+                                onChange={(e) => setSousPhaseForm(prev => ({ 
+                                    ...prev, 
+                                    dateDebutPrevue: e.value ? e.value.toISOString().split('T')[0] : '' 
+                                }))}
+                                className="w-full"
+                                dateFormat="dd/mm/yy"
+                                placeholder="Sélectionner une date"
+                            />
+                        </div>
+                    </div>
+                    
+                    <div className="col-12 md:col-6">
+                        <div className="field">
+                            <label htmlFor="sousPhaseFin" className="font-semibold">Date fin prévue</label>
+                            <Calendar
+                                id="sousPhaseFin"
+                                value={sousPhaseForm.dateFinPrevue ? new Date(sousPhaseForm.dateFinPrevue) : null}
+                                onChange={(e) => setSousPhaseForm(prev => ({ 
+                                    ...prev, 
+                                    dateFinPrevue: e.value ? e.value.toISOString().split('T')[0] : '' 
+                                }))}
+                                className="w-full"
+                                dateFormat="dd/mm/yy"
+                                placeholder="Sélectionner une date"
+                            />
+                        </div>
+                    </div>
+                    
+                    <div className="col-12 md:col-6">
+                        <div className="field">
+                            <label htmlFor="sousPhaseDuree" className="font-semibold">Durée estimée (heures)</label>
+                            <InputNumber
+                                id="sousPhaseDuree"
+                                value={sousPhaseForm.dureeEstimeeHeures}
+                                onValueChange={(e) => setSousPhaseForm(prev => ({ 
+                                    ...prev, 
+                                    dureeEstimeeHeures: e.value || 8 
+                                }))}
+                                className="w-full"
+                                min={1}
+                                max={1000}
+                            />
+                        </div>
+                    </div>
+                    
+                    <div className="col-12 md:col-6">
+                        <div className="field">
+                            <label htmlFor="sousPhasePriorite" className="font-semibold">Priorité</label>
+                            <Dropdown
+                                id="sousPhasePriorite"
+                                value={sousPhaseForm.priorite}
+                                options={[
+                                    { label: 'Faible', value: 'FAIBLE' },
+                                    { label: 'Moyenne', value: 'MOYENNE' },
+                                    { label: 'Élevée', value: 'ELEVEE' },
+                                    { label: 'Critique', value: 'CRITIQUE' }
+                                ]}
+                                onChange={(e) => setSousPhaseForm(prev => ({ ...prev, priorite: e.value }))}
+                                className="w-full"
+                            />
+                        </div>
+                    </div>
+                    
+                    <div className="col-12 md:col-6">
+                        <div className="field">
+                            <label htmlFor="sousPhaseBudgetPrevu" className="font-semibold">Budget prévu (€)</label>
+                            <InputNumber
+                                id="sousPhaseBudgetPrevu"
+                                value={sousPhaseForm.budgetPrevu}
+                                onChange={(e) => setSousPhaseForm(prev => ({ ...prev, budgetPrevu: e.value || 0 }))}
+                                className="w-full"
+                                min={0}
+                                mode="currency"
+                                currency="EUR"
+                                locale="fr-FR"
+                                placeholder="0,00 €"
+                            />
+                        </div>
+                    </div>
+                    
+                    <div className="col-12 md:col-6">
+                        <div className="field">
+                            <label htmlFor="sousPhaseCoutReel" className="font-semibold">Coût réel (€)</label>
+                            <InputNumber
+                                id="sousPhaseCoutReel"
+                                value={sousPhaseForm.coutReel}
+                                onChange={(e) => setSousPhaseForm(prev => ({ ...prev, coutReel: e.value || 0 }))}
+                                className="w-full"
+                                min={0}
+                                mode="currency"
+                                currency="EUR"
+                                locale="fr-FR"
+                                placeholder="0,00 €"
+                            />
+                        </div>
+                    </div>
+                    
+                    <div className="col-12">
+                        <div className="field-checkbox">
+                            <Checkbox
+                                id="sousPhaseCritique"
+                                checked={sousPhaseForm.critique}
+                                onChange={(e) => setSousPhaseForm(prev => ({ ...prev, critique: e.checked }))}
+                            />
+                            <label htmlFor="sousPhaseCritique" className="ml-2 font-semibold">
+                                Sous-phase critique
+                            </label>
+                        </div>
+                    </div>
+                </div>
+            </Dialog>
+
+            {/* Dialog de validation des prérequis */}
+            <Dialog
+                header="Validation des prérequis"
+                visible={showValidationDialog}
+                onHide={() => setShowValidationDialog(false)}
+                style={{ width: '90vw', maxWidth: '800px' }}
+                modal
+            >
+                {selectedPhase && (
+                    <PhaseValidationPanel
+                        phase={selectedPhase}
+                        allPhases={phases}
+                        onStartPhase={startPhase}
+                        onViewPrerequisite={(prereqId) => {
+                            const prereq = phases.find(p => p.id === prereqId);
+                            if (prereq) {
+                                setSelectedPhase(prereq);
+                            }
+                        }}
+                    />
+                )}
+            </Dialog>
+
+            {/* Dialog de planification budgétaire */}
+            <BudgetPlanningDialog
+                visible={showBudgetPlanningDialog}
+                onHide={() => setShowBudgetPlanningDialog(false)}
+                phase={selectedPhase}
+                onSave={handleSaveBudgetPlanning}
+            />
+
+            {/* Dialog d'exécution budgétaire */}
+            <BudgetExecutionDialog
+                visible={showBudgetExecutionDialog}
+                onHide={() => setShowBudgetExecutionDialog(false)}
+                phase={selectedPhase}
+                onSave={handleSaveBudgetExecution}
+            />
+
+            {/* Assistant de génération automatique de phases */}
+            {chantier && (
+                <PhaseGenerationWizard
+                    visible={showWizardDialog}
+                    onHide={() => setShowWizardDialog(false)}
+                    chantier={chantier}
+                    onGenerated={handlePhasesGenerated}
+                />
+            )}
+        </div>
+    );
+};
+
+export default PhasesPage;
+
+
+
+
+>>>>>>> 5ed9a80339c59d689b9655e8be1a68312d19d4a1
diff --git a/app/(main)/chantiers/en-cours/page.tsx b/app/(main)/chantiers/en-cours/page.tsx
index cec8b43..2028f88 100644
--- a/app/(main)/chantiers/en-cours/page.tsx
+++ b/app/(main)/chantiers/en-cours/page.tsx
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 'use client';
 
 import React, { useState, useEffect, useRef } from 'react';
@@ -339,3 +340,346 @@ export default ChantiersEnCoursPage;
 
 
 
+=======
+'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 { Toast } from 'primereact/toast';
+import { Toolbar } from 'primereact/toolbar';
+import { Tag } from 'primereact/tag';
+import { ProgressBar } from 'primereact/progressbar';
+import { Dialog } from 'primereact/dialog';
+import { Calendar } from 'primereact/calendar';
+import { InputNumber } from 'primereact/inputnumber';
+import { chantierService } from '../../../../services/api';
+import { formatDate, formatCurrency } from '../../../../utils/formatters';
+import type { Chantier, StatutChantier } from '../../../../types/btp';
+
+const ChantiersEnCoursPage = () => {
+    const [chantiers, setChantiers] = useState<Chantier[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [globalFilter, setGlobalFilter] = useState('');
+    const [selectedChantiers, setSelectedChantiers] = useState<Chantier[]>([]);
+    const [updateDialog, setUpdateDialog] = useState(false);
+    const [selectedChantier, setSelectedChantier] = useState<Chantier | null>(null);
+    const [updateData, setUpdateData] = useState({ dateFinReelle: null, montantReel: 0 });
+    const toast = useRef<Toast>(null);
+    const dt = useRef<DataTable<Chantier[]>>(null);
+
+    useEffect(() => {
+        loadChantiers();
+    }, []);
+
+    const loadChantiers = async () => {
+        try {
+            setLoading(true);
+            const data = await chantierService.getAll();
+            // Filtrer seulement les chantiers en cours
+            const chantiersEnCours = data.filter(chantier => chantier.statut === 'EN_COURS');
+            setChantiers(chantiersEnCours);
+        } catch (error) {
+            console.error('Erreur lors du chargement des chantiers:', error);
+            toast.current?.show({
+                severity: 'error',
+                summary: 'Erreur',
+                detail: 'Impossible de charger les chantiers en cours',
+                life: 3000
+            });
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const calculateProgress = (chantier: Chantier) => {
+        if (!chantier.dateDebut || !chantier.dateFinPrevue) return 0;
+        
+        const now = new Date();
+        const start = new Date(chantier.dateDebut);
+        const end = new Date(chantier.dateFinPrevue);
+        const totalDays = (end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24);
+        const elapsedDays = (now.getTime() - start.getTime()) / (1000 * 60 * 60 * 24);
+        
+        return Math.min(Math.max((elapsedDays / totalDays) * 100, 0), 100);
+    };
+
+    const isLate = (chantier: Chantier) => {
+        if (!chantier.dateFinPrevue) return false;
+        const today = new Date();
+        const endDate = new Date(chantier.dateFinPrevue);
+        return today > endDate;
+    };
+
+    const markAsCompleted = (chantier: Chantier) => {
+        setSelectedChantier(chantier);
+        setUpdateData({
+            dateFinReelle: new Date(),
+            montantReel: chantier.montantReel || chantier.montantPrevu || 0
+        });
+        setUpdateDialog(true);
+    };
+
+    const handleCompleteChantier = async () => {
+        if (!selectedChantier) return;
+
+        try {
+            const updatedChantier = {
+                ...selectedChantier,
+                statut: 'TERMINE' as StatutChantier,
+                dateFinReelle: updateData.dateFinReelle,
+                montantReel: updateData.montantReel
+            };
+
+            await chantierService.update(selectedChantier.id, updatedChantier);
+            
+            // Retirer le chantier de la liste car il n'est plus "en cours"
+            setChantiers(prev => prev.filter(c => c.id !== selectedChantier.id));
+            setUpdateDialog(false);
+            
+            toast.current?.show({
+                severity: 'success',
+                summary: 'Succès',
+                detail: 'Chantier marqué comme terminé',
+                life: 3000
+            });
+        } catch (error) {
+            console.error('Erreur lors de la mise à jour:', error);
+            toast.current?.show({
+                severity: 'error',
+                summary: 'Erreur',
+                detail: 'Impossible de mettre à jour le chantier',
+                life: 3000
+            });
+        }
+    };
+
+    const exportCSV = () => {
+        dt.current?.exportCSV();
+    };
+
+    const leftToolbarTemplate = () => {
+        return (
+            <div className="my-2">
+                <h5 className="m-0">Chantiers en cours ({chantiers.length})</h5>
+            </div>
+        );
+    };
+
+    const rightToolbarTemplate = () => {
+        return (
+            <Button 
+                label="Exporter" 
+                icon="pi pi-upload" 
+                severity="help" 
+                onClick={exportCSV} 
+            />
+        );
+    };
+
+    const actionBodyTemplate = (rowData: Chantier) => {
+        return (
+            <div className="flex gap-2">
+                <Button 
+                    icon="pi pi-check" 
+                    rounded 
+                    severity="success" 
+                    size="small"
+                    tooltip="Marquer comme terminé"
+                    onClick={() => markAsCompleted(rowData)}
+                />
+                <Button 
+                    icon="pi pi-eye" 
+                    rounded 
+                    severity="info" 
+                    size="small"
+                    tooltip="Voir détails"
+                    onClick={() => {
+                        toast.current?.show({
+                            severity: 'info',
+                            summary: 'Info',
+                            detail: `Détails du chantier ${rowData.nom}`,
+                            life: 3000
+                        });
+                    }}
+                />
+            </div>
+        );
+    };
+
+    const statusBodyTemplate = (rowData: Chantier) => {
+        const late = isLate(rowData);
+        return (
+            <div className="flex align-items-center gap-2">
+                <Tag value="En cours" severity="success" />
+                {late && <Tag value="En retard" severity="danger" />}
+            </div>
+        );
+    };
+
+    const progressBodyTemplate = (rowData: Chantier) => {
+        const progress = calculateProgress(rowData);
+        const late = isLate(rowData);
+        
+        return (
+            <div className="flex align-items-center gap-2">
+                <ProgressBar 
+                    value={progress} 
+                    style={{ height: '6px', width: '100px' }}
+                    color={late ? '#ef4444' : undefined}
+                />
+                <span className={`text-sm ${late ? 'text-red-500' : ''}`}>
+                    {Math.round(progress)}%
+                </span>
+            </div>
+        );
+    };
+
+    const clientBodyTemplate = (rowData: Chantier) => {
+        if (!rowData.client) return '';
+        return `${rowData.client.prenom} ${rowData.client.nom}`;
+    };
+
+    const dateBodyTemplate = (rowData: Chantier, field: string) => {
+        const date = (rowData as any)[field];
+        const late = field === 'dateFinPrevue' && isLate(rowData);
+        
+        return (
+            <span className={late ? 'text-red-500 font-bold' : ''}>
+                {date ? formatDate(date) : ''}
+                {late && <i className="pi pi-exclamation-triangle ml-1"></i>}
+            </span>
+        );
+    };
+
+    const budgetBodyTemplate = (rowData: Chantier) => {
+        const prevu = rowData.montantPrevu || 0;
+        const reel = rowData.montantReel || 0;
+        const progress = calculateProgress(rowData);
+        const estimated = prevu * (progress / 100);
+        
+        return (
+            <div className="text-sm">
+                <div>Prévu: {formatCurrency(prevu)}</div>
+                <div className="text-600">Estimé: {formatCurrency(estimated)}</div>
+            </div>
+        );
+    };
+
+    const header = (
+        <div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
+            <h5 className="m-0">Chantiers en cours de réalisation</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 completeDialogFooter = (
+        <>
+            <Button 
+                label="Annuler" 
+                icon="pi pi-times" 
+                text 
+                onClick={() => setUpdateDialog(false)} 
+            />
+            <Button 
+                label="Marquer comme terminé" 
+                icon="pi pi-check" 
+                text 
+                onClick={handleCompleteChantier} 
+            />
+        </>
+    );
+
+    return (
+        <div className="grid">
+            <div className="col-12">
+                <Card>
+                    <Toast ref={toast} />
+                    <Toolbar className="mb-4" left={leftToolbarTemplate} right={rightToolbarTemplate} />
+
+                    <DataTable
+                        ref={dt}
+                        value={chantiers}
+                        selection={selectedChantiers}
+                        onSelectionChange={(e) => setSelectedChantiers(e.value)}
+                        selectionMode="multiple"
+                        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} chantiers"
+                        globalFilter={globalFilter}
+                        emptyMessage="Aucun chantier en cours trouvé."
+                        header={header}
+                        responsiveLayout="scroll"
+                        loading={loading}
+                    >
+                        <Column selectionMode="multiple" headerStyle={{ width: '4rem' }} />
+                        <Column field="nom" header="Nom" sortable headerStyle={{ minWidth: '12rem' }} />
+                        <Column field="client" header="Client" body={clientBodyTemplate} sortable headerStyle={{ minWidth: '12rem' }} />
+                        <Column field="adresse" header="Adresse" sortable headerStyle={{ minWidth: '12rem' }} />
+                        <Column field="dateDebut" header="Date début" body={(rowData) => dateBodyTemplate(rowData, 'dateDebut')} sortable headerStyle={{ minWidth: '10rem' }} />
+                        <Column field="dateFinPrevue" header="Date fin prévue" body={(rowData) => dateBodyTemplate(rowData, 'dateFinPrevue')} sortable headerStyle={{ minWidth: '10rem' }} />
+                        <Column field="statut" header="Statut" body={statusBodyTemplate} headerStyle={{ minWidth: '10rem' }} />
+                        <Column field="progress" header="Progression" body={progressBodyTemplate} headerStyle={{ minWidth: '12rem' }} />
+                        <Column field="budget" header="Budget" body={budgetBodyTemplate} headerStyle={{ minWidth: '12rem' }} />
+                        <Column body={actionBodyTemplate} headerStyle={{ minWidth: '8rem' }} />
+                    </DataTable>
+
+                    <Dialog 
+                        visible={updateDialog} 
+                        style={{ width: '450px' }} 
+                        header="Finaliser le chantier" 
+                        modal 
+                        className="p-fluid" 
+                        footer={completeDialogFooter} 
+                        onHide={() => setUpdateDialog(false)}
+                    >
+                        <div className="formgrid grid">
+                            <div className="field col-12">
+                                <label htmlFor="dateFinReelle">Date de fin réelle</label>
+                                <Calendar 
+                                    id="dateFinReelle" 
+                                    value={updateData.dateFinReelle} 
+                                    onChange={(e) => setUpdateData(prev => ({ ...prev, dateFinReelle: e.value }))} 
+                                    dateFormat="dd/mm/yy" 
+                                    showIcon 
+                                />
+                            </div>
+
+                            <div className="field col-12">
+                                <label htmlFor="montantReel">Montant réel (€)</label>
+                                <InputNumber 
+                                    id="montantReel" 
+                                    value={updateData.montantReel} 
+                                    onValueChange={(e) => setUpdateData(prev => ({ ...prev, montantReel: e.value || 0 }))} 
+                                    mode="currency" 
+                                    currency="EUR" 
+                                    locale="fr-FR" 
+                                />
+                            </div>
+                        </div>
+                    </Dialog>
+                </Card>
+            </div>
+        </div>
+    );
+};
+
+export default ChantiersEnCoursPage;
+
+
+
+>>>>>>> 5ed9a80339c59d689b9655e8be1a68312d19d4a1
diff --git a/app/(main)/chantiers/execution-granulaire/page.tsx b/app/(main)/chantiers/execution-granulaire/page.tsx
index 7febf55..01fed19 100644
--- a/app/(main)/chantiers/execution-granulaire/page.tsx
+++ b/app/(main)/chantiers/execution-granulaire/page.tsx
@@ -374,6 +374,12 @@ const ChantiersExecutionGranulaire = () => {
     );
 };
 
+<<<<<<< HEAD
 export default ChantiersExecutionGranulaire;
 
 
+=======
+export default ChantiersExecutionGranulaire;
+
+
+>>>>>>> 5ed9a80339c59d689b9655e8be1a68312d19d4a1
diff --git a/app/(main)/chantiers/nouveau/page.tsx b/app/(main)/chantiers/nouveau/page.tsx
index 35b45c7..7dc31d5 100644
--- a/app/(main)/chantiers/nouveau/page.tsx
+++ b/app/(main)/chantiers/nouveau/page.tsx
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 'use client';
 
 import React, { useState, useEffect, useRef } from 'react';
@@ -1241,3 +1242,1248 @@ const NouveauChantierPage = () => {
 };
 
 export default NouveauChantierPage;
+=======
+'use client';
+
+import React, { useState, useEffect, 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 { InputNumber } from 'primereact/inputnumber';
+import { Calendar } from 'primereact/calendar';
+import { Dropdown } from 'primereact/dropdown';
+import { Toast } from 'primereact/toast';
+import { Divider } from 'primereact/divider';
+import { Checkbox } from 'primereact/checkbox';
+import { Steps } from 'primereact/steps';
+import { Panel } from 'primereact/panel';
+import { Badge } from 'primereact/badge';
+import { Tag } from 'primereact/tag';
+import { Timeline } from 'primereact/timeline';
+import { ProgressBar } from 'primereact/progressbar';
+import { Accordion, AccordionTab } from 'primereact/accordion';
+import PhasesTimelinePreview from '../../../../components/phases/PhasesTimelinePreview';
+import { chantierService, clientService } from '../../../../services/api';
+import type { Chantier, Client } from '../../../../types/btp';
+import type { TypeChantier } from '../../../../types/chantier-templates';
+import type { ChantierFormData, ChantierPreview } from '../../../../types/chantier-form';
+
+const NouveauChantierPage = () => {
+    const router = useRouter();
+    const toast = useRef<Toast>(null);
+    const [loading, setLoading] = useState(false);
+    const [submitted, setSubmitted] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const [clients, setClients] = useState<any[]>([]);
+    const [chantierTypes, setChantierTypes] = useState<any[]>([]);
+    const [preview, setPreview] = useState<ChantierPreview | null>(null);
+    const [calculatingPreview, setCalculatingPreview] = useState(false);
+    
+    const [chantierForm, setChantierForm] = useState<ChantierFormData>({
+        nom: '',
+        description: '',
+        adresse: '',
+        codePostal: '',
+        ville: '',
+        dateDebut: new Date().toISOString().split('T')[0],
+        dateFinPrevue: '',
+        montantPrevu: 0,
+        clientId: '',
+        
+        // Nouveaux champs avancés
+        typeChantier: 'MAISON_INDIVIDUELLE' as TypeChantier,
+        surface: 0,
+        nombreNiveaux: 1,
+        autoGenererPhases: true,
+        inclureSousPhases: true,
+        ajusterDelais: true,
+        
+        // Spécificités
+        specificites: [],
+        contraintes: '',
+        accesPMR: false,
+        performanceEnergetique: 'STANDARD',
+        
+        // Informations techniques
+        natureTerrain: 'PLAT',
+        presenceReseaux: true,
+        accessibiliteChantier: 'FACILE',
+        stockagePossible: true,
+        
+        // Réglementation
+        permisRequis: true,
+        numeroPermis: '',
+        dateObtentionPermis: '',
+        controleUrbanismeRequis: false,
+        
+        // Options de planification
+        margeSecurite: 5,
+        periodesTravailRestreintes: [],
+        
+        // Équipes et ressources
+        equipePrefereId: '',
+        materielsRequis: [],
+        
+        // Champs manquants pour compatibilité
+        statut: 'PLANIFIE',
+        actif: true
+    });
+
+    const [errors, setErrors] = useState<Record<string, string>>({});
+
+    const statuts = [
+        { label: 'Planifié', value: 'PLANIFIE' },
+        { label: 'En cours', value: 'EN_COURS' },
+        { label: 'Terminé', value: 'TERMINE' },
+        { label: 'Annulé', value: 'ANNULE' },
+        { label: 'Suspendu', value: 'SUSPENDU' }
+    ];
+
+    const steps = [
+        { label: 'Informations générales' },
+        { label: 'Type de chantier' },
+        { label: 'Configuration technique' },
+        { label: 'Localisation' },
+        { label: 'Planification' },
+        { label: 'Options avancées' },
+        { label: 'Prévisualisation' },
+        { label: 'Validation' }
+    ];
+
+    useEffect(() => {
+        loadClients();
+        loadChantierTypes();
+    }, []);
+
+    // Effet pour calculer la prévisualisation quand le type change
+    useEffect(() => {
+        if (chantierForm.typeChantier && chantierForm.dateDebut) {
+            calculatePreview();
+        }
+    }, [chantierForm.typeChantier, chantierForm.dateDebut, chantierForm.surface, chantierForm.nombreNiveaux]);
+
+    const loadClients = async () => {
+        try {
+            const data = await clientService.getAll();
+            setClients(data.map(client => ({
+                label: `${client.prenom} ${client.nom}${client.entreprise ? ' - ' + client.entreprise : ''}`,
+                value: client.id,
+                client: client
+            })));
+        } catch (error) {
+            console.error('Erreur lors du chargement des clients:', error);
+        }
+    };
+
+    const loadChantierTypes = async () => {
+        try {
+            // Utiliser le service API standardisé avec authentification
+            const { typeChantierService } = await import('../../../../services/api');
+            const typesParCategorie = await typeChantierService.getByCategorie();
+            console.log('Types récupérés depuis l\'API:', typesParCategorie);
+            
+            // Convertir en format attendu par PrimeReact
+            const groupedTypes: any[] = [];
+            
+            Object.keys(typesParCategorie).forEach(categorie => {
+                const categoryTypes = typesParCategorie[categorie];
+                groupedTypes.push({
+                    label: categorie,
+                    items: categoryTypes.map((type: any) => ({
+                        label: type.nom,
+                        value: type.code
+                    }))
+                });
+            });
+            
+            setChantierTypes(groupedTypes);
+        } catch (error) {
+            console.error('❌ API TypeChantier non disponible. Le backend doit être redémarré.', error);
+            
+            // Afficher un message d'erreur à l'utilisateur
+            if (toast.current) {
+                toast.current.show({
+                    severity: 'error',
+                    summary: 'API non disponible',
+                    detail: 'Les endpoints TypeChantier ne sont pas encore exposés. Redémarrez le backend.',
+                    life: 5000
+                });
+            }
+            
+            setChantierTypes([]);
+        }
+    };
+
+    const calculatePreview = async () => {
+        if (!chantierForm.typeChantier || !chantierForm.dateDebut) return;
+
+        setCalculatingPreview(true);
+        try {
+            let typeChantier: any = null;
+
+            try {
+                // Essayer d'utiliser le service API standardisé avec authentification
+                const { typeChantierService } = await import('../../../../services/api');
+                typeChantier = await typeChantierService.getByCode(chantierForm.typeChantier);
+                console.log('Type de chantier récupéré depuis l\'API:', typeChantier);
+            } catch (apiError) {
+                console.warn('Impossible de récupérer les données du type de chantier depuis l\'API, utilisation des données par défaut');
+
+                // Données de fallback pour les types de chantier courants
+                const typeChantierDefaults: Record<string, any> = {
+                    'MAISON_INDIVIDUELLE': {
+                        code: 'MAISON_INDIVIDUELLE',
+                        nom: 'Maison individuelle',
+                        dureeMoyenneJours: 120,
+                        coutMoyenM2: 1200,
+                        description: 'Construction de maison individuelle'
+                    },
+                    'IMMEUBLE_COLLECTIF': {
+                        code: 'IMMEUBLE_COLLECTIF',
+                        nom: 'Immeuble collectif',
+                        dureeMoyenneJours: 365,
+                        coutMoyenM2: 1500,
+                        description: 'Construction d\'immeuble résidentiel collectif'
+                    },
+                    'RENOVATION': {
+                        code: 'RENOVATION',
+                        nom: 'Rénovation',
+                        dureeMoyenneJours: 90,
+                        coutMoyenM2: 800,
+                        description: 'Travaux de rénovation'
+                    }
+                };
+
+                typeChantier = typeChantierDefaults[chantierForm.typeChantier] || {
+                    code: chantierForm.typeChantier,
+                    nom: chantierForm.typeChantier,
+                    dureeMoyenneJours: 180,
+                    coutMoyenM2: 1000,
+                    description: 'Type de chantier personnalisé'
+                };
+
+                console.log('Utilisation des données par défaut:', typeChantier);
+            }
+
+            const dateDebut = new Date(chantierForm.dateDebut);
+            const dateFinEstimee = new Date(dateDebut.getTime() + (typeChantier.dureeMoyenneJours || 180) * 24 * 60 * 60 * 1000);
+            
+            const previewData: ChantierPreview = {
+                typeChantier: chantierForm.typeChantier,
+                nom: chantierForm.nom || typeChantier.nom,
+                dureeEstimee: typeChantier.dureeMoyenneJours || 180,
+                dateFinEstimee: dateFinEstimee,
+                complexite: {
+                    niveau: (typeChantier.dureeMoyenneJours || 180) > 300 ? 'COMPLEXE' : 'SIMPLE',
+                    score: (typeChantier.dureeMoyenneJours || 180) > 300 ? 75 : 25,
+                    facteurs: []
+                },
+                phasesCount: 8, // Valeur par défaut en attendant les templates
+                sousePhasesCount: 24, // Valeur par défaut en attendant les templates
+                specificites: [],
+                reglementations: []
+            };
+
+            setPreview(previewData);
+            
+            // Auto-calculer la date de fin
+            if (!chantierForm.dateFinPrevue) {
+                setChantierForm(prev => ({
+                    ...prev,
+                    dateFinPrevue: dateFinEstimee.toISOString().split('T')[0]
+                }));
+            }
+        } catch (error) {
+            console.error('❌ Impossible de calculer la prévisualisation - API TypeChantier non disponible:', error);
+            
+            if (toast.current) {
+                toast.current.show({
+                    severity: 'warn',
+                    summary: 'Prévisualisation indisponible',
+                    detail: 'Impossible de calculer la prévisualisation sans l\'API TypeChantier',
+                    life: 3000
+                });
+            }
+        } finally {
+            setCalculatingPreview(false);
+        }
+    };
+
+    const validateStep = (step: number) => {
+        const newErrors: Record<string, string> = {};
+
+        switch (step) {
+            case 0: // Informations générales
+                if (!chantierForm.nom.trim()) {
+                    newErrors.nom = 'Le nom du chantier est obligatoire';
+                }
+                if (!chantierForm.clientId) {
+                    newErrors.clientId = 'Le client est obligatoire';
+                }
+                break;
+
+            case 1: // Type de chantier
+                if (!chantierForm.typeChantier) {
+                    newErrors.typeChantier = 'Le type de chantier est obligatoire';
+                }
+                break;
+
+            case 2: // Configuration technique
+                if (chantierForm.surface && chantierForm.surface <= 0) {
+                    newErrors.surface = 'La surface doit être supérieure à 0';
+                }
+                break;
+
+            case 3: // Localisation
+                if (!chantierForm.adresse.trim()) {
+                    newErrors.adresse = 'L\'adresse est obligatoire';
+                }
+                break;
+
+            case 4: // Planification
+                if (!chantierForm.dateDebut) {
+                    newErrors.dateDebut = 'La date de début est obligatoire';
+                }
+                if (!chantierForm.dateFinPrevue) {
+                    newErrors.dateFinPrevue = 'La date de fin prévue est obligatoire';
+                }
+                if (chantierForm.dateDebut && chantierForm.dateFinPrevue && 
+                    new Date(chantierForm.dateDebut) > new Date(chantierForm.dateFinPrevue)) {
+                    newErrors.dateFinPrevue = 'La date de fin doit être postérieure à la date de début';
+                }
+                break;
+
+            case 5: // Options avancées
+                if (chantierForm.montantPrevu && chantierForm.montantPrevu <= 0) {
+                    newErrors.montantPrevu = 'Le montant prévu doit être supérieur à 0';
+                }
+                break;
+        }
+
+        setErrors(newErrors);
+        return Object.keys(newErrors).length === 0;
+    };
+
+    const nextStep = () => {
+        if (validateStep(activeIndex)) {
+            setActiveIndex(prev => Math.min(prev + 1, steps.length - 1));
+        }
+    };
+
+    const prevStep = () => {
+        setActiveIndex(prev => Math.max(prev - 1, 0));
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setSubmitted(true);
+
+        if (!validateStep(activeIndex)) {
+            toast.current?.show({
+                severity: 'error',
+                summary: 'Erreur',
+                detail: 'Veuillez corriger les erreurs du formulaire',
+                life: 3000
+            });
+            return;
+        }
+
+        setLoading(true);
+        try {
+            // Préparer les données pour l'envoi
+            const chantierToSave: any = {
+                nom: chantierForm.nom,
+                description: chantierForm.description || '',
+                adresse: chantierForm.adresse,
+                dateDebut: chantierForm.dateDebut,
+                dateFinPrevue: chantierForm.dateFinPrevue || null,
+                statut: chantierForm.statut || 'PLANIFIE',
+                montantPrevu: Number(chantierForm.montantPrevu) || 0,
+                actif: chantierForm.actif,
+                clientId: chantierForm.clientId,
+                // Nouveaux champs avancés
+                typeChantier: chantierForm.typeChantier,
+                surface: chantierForm.surface,
+                nombreNiveaux: chantierForm.nombreNiveaux,
+                dureeEstimeeJours: preview?.dureeEstimee,
+                complexite: preview?.complexite?.niveau
+            };
+            
+            console.log('Données à envoyer:', chantierToSave);
+
+            await chantierService.create(chantierToSave);
+            toast.current?.show({
+                severity: 'success',
+                summary: 'Succès',
+                detail: 'Chantier créé avec succès',
+                life: 3000
+            });
+            
+            setTimeout(() => {
+                router.push('/chantiers');
+            }, 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 chantier';
+            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);
+            }
+            
+            toast.current?.show({
+                severity: 'error',
+                summary: 'Erreur',
+                detail: errorMessage,
+                life: 5000
+            });
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleCancel = () => {
+        router.push('/chantiers');
+    };
+
+    const onInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, name: string) => {
+        const val = (e.target && e.target.value) || '';
+        setChantierForm(prev => ({ ...prev, [name]: val }));
+
+        // Clear error when user starts typing
+        if (errors[name]) {
+            const newErrors = { ...errors };
+            delete newErrors[name];
+            setErrors(newErrors);
+        }
+    };
+
+    const onDateChange = (e: any, name: string) => {
+        setChantierForm(prev => ({ ...prev, [name]: e.value }));
+
+        if (errors[name]) {
+            const newErrors = { ...errors };
+            delete newErrors[name];
+            setErrors(newErrors);
+        }
+    };
+
+    const onNumberChange = (e: any, name: string) => {
+        setChantierForm(prev => ({ ...prev, [name]: e.value }));
+
+        if (errors[name]) {
+            const newErrors = { ...errors };
+            delete newErrors[name];
+            setErrors(newErrors);
+        }
+    };
+
+    const onDropdownChange = (e: any, name: string) => {
+        setChantierForm(prev => ({ ...prev, [name]: e.value }));
+
+        if (errors[name]) {
+            const newErrors = { ...errors };
+            delete newErrors[name];
+            setErrors(newErrors);
+        }
+    };
+
+    const onCheckboxChange = (e: any, name: string) => {
+        setChantierForm(prev => ({ ...prev, [name]: e.checked }));
+    };
+
+    const renderStepContent = () => {
+        switch (activeIndex) {
+            case 0: // Informations générales
+                return (
+                    <div className="formgrid grid">
+                        <div className="field col-12">
+                            <label htmlFor="nom" className="font-bold">
+                                Nom du chantier <span className="text-red-500">*</span>
+                            </label>
+                            <InputText 
+                                id="nom" 
+                                value={chantierForm.nom} 
+                                onChange={(e) => onInputChange(e, 'nom')} 
+                                className={errors.nom ? 'p-invalid' : ''} 
+                                placeholder="Nom du chantier"
+                            />
+                            {errors.nom && <small className="p-error">{errors.nom}</small>}
+                        </div>
+
+                        <div className="field col-12">
+                            <label htmlFor="clientId" className="font-bold">
+                                Client <span className="text-red-500">*</span>
+                            </label>
+                            <Dropdown 
+                                id="clientId" 
+                                value={chantierForm.clientId} 
+                                options={clients} 
+                                onChange={(e) => onDropdownChange(e, 'clientId')} 
+                                placeholder="Sélectionnez un client"
+                                className={errors.clientId ? 'p-invalid' : ''} 
+                                filter
+                            />
+                            {errors.clientId && <small className="p-error">{errors.clientId}</small>}
+                        </div>
+
+                        <div className="field col-12">
+                            <label htmlFor="description" className="font-bold">Description</label>
+                            <InputTextarea 
+                                id="description" 
+                                value={chantierForm.description} 
+                                onChange={(e) => onInputChange(e, 'description')} 
+                                rows={4} 
+                                placeholder="Description détaillée du chantier"
+                            />
+                        </div>
+                    </div>
+                );
+
+            case 1: // Type de chantier
+                return (
+                    <div className="formgrid grid">
+                        <div className="field col-12">
+                            <label htmlFor="typeChantier" className="font-bold">
+                                Type de chantier <span className="text-red-500">*</span>
+                            </label>
+                            <Dropdown 
+                                id="typeChantier" 
+                                value={chantierForm.typeChantier} 
+                                options={chantierTypes} 
+                                optionLabel="label"
+                                optionValue="value"
+                                optionGroupLabel="label"
+                                optionGroupChildren="items"
+                                onChange={(e) => onDropdownChange(e, 'typeChantier')} 
+                                placeholder="Sélectionnez le type de chantier"
+                                className={errors.typeChantier ? 'p-invalid' : ''} 
+                                filter
+                            />
+                            {errors.typeChantier && <small className="p-error">{errors.typeChantier}</small>}
+                        </div>
+
+                        {/* Options de génération automatique */}
+                        <div className="field col-12">
+                            <div className="formgrid grid">
+                                <div className="field col-12 md:col-4">
+                                    <div className="flex align-items-center">
+                                        <Checkbox 
+                                            id="autoGenererPhases" 
+                                            checked={chantierForm.autoGenererPhases} 
+                                            onChange={(e) => onCheckboxChange(e, 'autoGenererPhases')} 
+                                        />
+                                        <label htmlFor="autoGenererPhases" className="ml-2 font-bold">
+                                            Générer automatiquement les phases
+                                        </label>
+                                    </div>
+                                    <small className="text-600">
+                                        Les phases seront créées selon le type de chantier
+                                    </small>
+                                </div>
+
+                                <div className="field col-12 md:col-4">
+                                    <div className="flex align-items-center">
+                                        <Checkbox 
+                                            id="inclureSousPhases" 
+                                            checked={chantierForm.inclureSousPhases} 
+                                            onChange={(e) => onCheckboxChange(e, 'inclureSousPhases')} 
+                                            disabled={!chantierForm.autoGenererPhases}
+                                        />
+                                        <label htmlFor="inclureSousPhases" className="ml-2 font-bold">
+                                            Inclure les sous-phases
+                                        </label>
+                                    </div>
+                                    <small className="text-600">
+                                        Détailler chaque phase principale
+                                    </small>
+                                </div>
+
+                                <div className="field col-12 md:col-4">
+                                    <div className="flex align-items-center">
+                                        <Checkbox 
+                                            id="ajusterDelais" 
+                                            checked={chantierForm.ajusterDelais} 
+                                            onChange={(e) => onCheckboxChange(e, 'ajusterDelais')} 
+                                            disabled={!chantierForm.autoGenererPhases}
+                                        />
+                                        <label htmlFor="ajusterDelais" className="ml-2 font-bold">
+                                            Ajuster les délais
+                                        </label>
+                                    </div>
+                                    <small className="text-600">
+                                        Adapter selon la complexité
+                                    </small>
+                                </div>
+                            </div>
+                        </div>
+
+                        {/* Prévisualisation des phases */}
+                        {chantierForm.typeChantier && chantierForm.autoGenererPhases && preview && (
+                            <div className="field col-12">
+                                <Card title="Prévisualisation des phases" className="mt-4">
+                                    <div className="grid">
+                                        <div className="col-12 md:col-6">
+                                            <div className="text-center p-3 border-1 surface-border border-round">
+                                                <div className="text-xl font-bold text-primary">{preview.phasesCount}</div>
+                                                <div className="text-600">Phases principales</div>
+                                            </div>
+                                        </div>
+                                        <div className="col-12 md:col-6">
+                                            <div className="text-center p-3 border-1 surface-border border-round">
+                                                <div className="text-xl font-bold text-primary">{preview.sousePhasesCount}</div>
+                                                <div className="text-600">Sous-phases détaillées</div>
+                                            </div>
+                                        </div>
+                                        <div className="col-12 md:col-6">
+                                            <div className="text-center p-3 border-1 surface-border border-round">
+                                                <div className="text-xl font-bold text-orange-500">{preview.dureeEstimee}</div>
+                                                <div className="text-600">Jours estimés</div>
+                                            </div>
+                                        </div>
+                                        <div className="col-12 md:col-6">
+                                            <div className="text-center p-3 border-1 surface-border border-round">
+                                                <Tag 
+                                                    value={preview.complexite.niveau} 
+                                                    severity={
+                                                        preview.complexite.niveau === 'SIMPLE' ? 'success' :
+                                                        preview.complexite.niveau === 'MOYEN' ? 'warning' :
+                                                        preview.complexite.niveau === 'COMPLEXE' ? 'danger' : 'danger'
+                                                    }
+                                                />
+                                                <div className="text-600 mt-1">Complexité estimée</div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    
+                                    {calculatingPreview && (
+                                        <div className="flex align-items-center justify-content-center mt-3">
+                                            <ProgressBar mode="indeterminate" style={{ height: '4px' }} />
+                                            <span className="ml-2 text-600">Calcul en cours...</span>
+                                        </div>
+                                    )}
+                                </Card>
+                            </div>
+                        )}
+                    </div>
+                );
+
+            case 2: // Configuration technique
+                return (
+                    <div className="formgrid grid">
+                        <div className="field col-12 md:col-6">
+                            <label htmlFor="surface" className="font-bold">
+                                Surface (m²)
+                            </label>
+                            <InputNumber 
+                                id="surface" 
+                                value={chantierForm.surface} 
+                                onValueChange={(e) => onNumberChange(e, 'surface')} 
+                                mode="decimal"
+                                locale="fr-FR"
+                                minFractionDigits={0}
+                                maxFractionDigits={2}
+                                className={errors.surface ? 'p-invalid' : ''} 
+                                placeholder="Surface en m²"
+                            />
+                            {errors.surface && <small className="p-error">{errors.surface}</small>}
+                        </div>
+
+                        <div className="field col-12 md:col-6">
+                            <label htmlFor="nombreNiveaux" className="font-bold">
+                                Nombre de niveaux
+                            </label>
+                            <InputNumber 
+                                id="nombreNiveaux" 
+                                value={chantierForm.nombreNiveaux} 
+                                onValueChange={(e) => onNumberChange(e, 'nombreNiveaux')} 
+                                min={1}
+                                max={20}
+                                placeholder="Nombre de niveaux"
+                            />
+                        </div>
+
+                        <div className="field col-12 md:col-6">
+                            <label htmlFor="natureTerrain" className="font-bold">Nature du terrain</label>
+                            <Dropdown 
+                                id="natureTerrain" 
+                                value={chantierForm.natureTerrain} 
+                                options={[
+                                    { label: 'Terrain plat', value: 'PLAT' },
+                                    { label: 'Pente légère', value: 'PENTE_LEGERE' },
+                                    { label: 'Pente forte', value: 'PENTE_FORTE' },
+                                    { label: 'Terrain rocheux', value: 'ROCHEUX' },
+                                    { label: 'Terrain humide', value: 'HUMIDE' },
+                                    { label: 'Terrain instable', value: 'INSTABLE' }
+                                ]} 
+                                onChange={(e) => onDropdownChange(e, 'natureTerrain')} 
+                                placeholder="Sélectionnez la nature du terrain"
+                            />
+                        </div>
+
+                        <div className="field col-12 md:col-6">
+                            <label htmlFor="accessibiliteChantier" className="font-bold">Accessibilité du chantier</label>
+                            <Dropdown 
+                                id="accessibiliteChantier" 
+                                value={chantierForm.accessibiliteChantier} 
+                                options={[
+                                    { label: 'Facile - Accès direct, terrain plat', value: 'FACILE' },
+                                    { label: 'Moyenne - Quelques contraintes d\'accès', value: 'MOYENNE' },
+                                    { label: 'Difficile - Accès restreint, terrain complexe', value: 'DIFFICILE' }
+                                ]} 
+                                onChange={(e) => onDropdownChange(e, 'accessibiliteChantier')} 
+                                placeholder="Sélectionnez l'accessibilité"
+                            />
+                        </div>
+
+                        <div className="field col-12">
+                            <div className="formgrid grid">
+                                <div className="field col-12 md:col-4">
+                                    <div className="flex align-items-center">
+                                        <Checkbox 
+                                            id="presenceReseaux" 
+                                            checked={chantierForm.presenceReseaux} 
+                                            onChange={(e) => onCheckboxChange(e, 'presenceReseaux')} 
+                                        />
+                                        <label htmlFor="presenceReseaux" className="ml-2 font-bold">
+                                            Réseaux existants
+                                        </label>
+                                    </div>
+                                    <small className="text-600">
+                                        Électricité, eau, gaz présents
+                                    </small>
+                                </div>
+
+                                <div className="field col-12 md:col-4">
+                                    <div className="flex align-items-center">
+                                        <Checkbox 
+                                            id="stockagePossible" 
+                                            checked={chantierForm.stockagePossible} 
+                                            onChange={(e) => onCheckboxChange(e, 'stockagePossible')} 
+                                        />
+                                        <label htmlFor="stockagePossible" className="ml-2 font-bold">
+                                            Stockage possible
+                                        </label>
+                                    </div>
+                                    <small className="text-600">
+                                        Espace pour matériaux disponible
+                                    </small>
+                                </div>
+
+                                <div className="field col-12 md:col-4">
+                                    <div className="flex align-items-center">
+                                        <Checkbox 
+                                            id="accesPMR" 
+                                            checked={chantierForm.accesPMR} 
+                                            onChange={(e) => onCheckboxChange(e, 'accesPMR')} 
+                                        />
+                                        <label htmlFor="accesPMR" className="ml-2 font-bold">
+                                            Accès PMR requis
+                                        </label>
+                                    </div>
+                                    <small className="text-600">
+                                        Accessibilité personnes handicapées
+                                    </small>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="field col-12">
+                            <label htmlFor="performanceEnergetique" className="font-bold">Performance énergétique</label>
+                            <Dropdown 
+                                id="performanceEnergetique" 
+                                value={chantierForm.performanceEnergetique} 
+                                options={[
+                                    { label: 'Standard (réglementation minimale)', value: 'STANDARD' },
+                                    { label: 'RT 2012', value: 'RT2012' },
+                                    { label: 'RT 2020', value: 'RT2020' },
+                                    { label: 'RE 2020 (obligatoire neuf)', value: 'RE2020' },
+                                    { label: 'Bâtiment passif', value: 'PASSIF' },
+                                    { label: 'Bâtiment à énergie positive', value: 'POSITIF' }
+                                ]} 
+                                onChange={(e) => onDropdownChange(e, 'performanceEnergetique')} 
+                                placeholder="Sélectionnez la performance énergétique"
+                            />
+                        </div>
+                    </div>
+                );
+
+            case 3: // Localisation
+                return (
+                    <div className="formgrid grid">
+                        <div className="field col-12">
+                            <label htmlFor="adresse" className="font-bold">
+                                Adresse du chantier <span className="text-red-500">*</span>
+                            </label>
+                            <InputTextarea 
+                                id="adresse" 
+                                value={chantierForm.adresse} 
+                                onChange={(e) => onInputChange(e, 'adresse')} 
+                                rows={3} 
+                                className={errors.adresse ? 'p-invalid' : ''} 
+                                placeholder="Adresse complète du chantier"
+                            />
+                            {errors.adresse && <small className="p-error">{errors.adresse}</small>}
+                        </div>
+
+                        <div className="field col-12 md:col-6">
+                            <label htmlFor="codePostal" className="font-bold">Code postal</label>
+                            <InputText 
+                                id="codePostal" 
+                                value={chantierForm.codePostal} 
+                                onChange={(e) => onInputChange(e, 'codePostal')} 
+                                placeholder="Code postal"
+                            />
+                        </div>
+
+                        <div className="field col-12 md:col-6">
+                            <label htmlFor="ville" className="font-bold">Ville</label>
+                            <InputText 
+                                id="ville" 
+                                value={chantierForm.ville} 
+                                onChange={(e) => onInputChange(e, 'ville')} 
+                                placeholder="Ville"
+                            />
+                        </div>
+                    </div>
+                );
+
+            case 4: // Planification
+                return (
+                    <div className="formgrid grid">
+                        <div className="field col-12 md:col-6">
+                            <label htmlFor="dateDebut" className="font-bold">
+                                Date de début <span className="text-red-500">*</span>
+                            </label>
+                            <Calendar 
+                                id="dateDebut" 
+                                value={chantierForm.dateDebut ? new Date(chantierForm.dateDebut) : null} 
+                                onChange={(e) => onDateChange(e, 'dateDebut')} 
+                                dateFormat="dd/mm/yy" 
+                                showIcon 
+                                className={errors.dateDebut ? 'p-invalid' : ''} 
+                            />
+                            {errors.dateDebut && <small className="p-error">{errors.dateDebut}</small>}
+                        </div>
+
+                        <div className="field col-12 md:col-6">
+                            <label htmlFor="dateFinPrevue" className="font-bold">
+                                Date de fin prévue
+                            </label>
+                            <Calendar 
+                                id="dateFinPrevue" 
+                                value={chantierForm.dateFinPrevue ? new Date(chantierForm.dateFinPrevue) : null} 
+                                onChange={(e) => onDateChange(e, 'dateFinPrevue')} 
+                                dateFormat="dd/mm/yy" 
+                                showIcon 
+                                className={errors.dateFinPrevue ? 'p-invalid' : ''} 
+                                minDate={chantierForm.dateDebut ? new Date(chantierForm.dateDebut) : undefined}
+                            />
+                            {errors.dateFinPrevue && <small className="p-error">{errors.dateFinPrevue}</small>}
+                            {preview?.dateFinEstimee && (
+                                <small className="text-600">
+                                    Date calculée automatiquement : {preview.dateFinEstimee.toLocaleDateString('fr-FR')}
+                                </small>
+                            )}
+                        </div>
+
+                        <div className="field col-12 md:col-6">
+                            <label htmlFor="statut" className="font-bold">Statut initial</label>
+                            <Dropdown 
+                                id="statut" 
+                                value={chantierForm.statut} 
+                                options={statuts} 
+                                onChange={(e) => onDropdownChange(e, 'statut')} 
+                                placeholder="Sélectionnez un statut"
+                            />
+                        </div>
+
+                        <div className="field col-12 md:col-6">
+                            <label htmlFor="margeSecurite" className="font-bold">Marge de sécurité (jours)</label>
+                            <InputNumber 
+                                id="margeSecurite" 
+                                value={chantierForm.margeSecurite} 
+                                onValueChange={(e) => onNumberChange(e, 'margeSecurite')} 
+                                min={0}
+                                max={30}
+                                placeholder="Jours de marge"
+                            />
+                            <small className="text-600">
+                                Délai supplémentaire pour imprévus
+                            </small>
+                        </div>
+
+                        {/* Prévisualisation du planning */}
+                        {preview && (
+                            <div className="field col-12">
+                                <Card title="Planning estimé" className="mt-3">
+                                    <Timeline
+                                        value={[
+                                            {
+                                                status: 'Début projet',
+                                                date: chantierForm.dateDebut,
+                                                icon: 'pi pi-play',
+                                                color: '#9C27B0'
+                                            },
+                                            {
+                                                status: 'Fin estimée',
+                                                date: preview.dateFinEstimee.toLocaleDateString('fr-FR'),
+                                                icon: 'pi pi-check',
+                                                color: '#673AB7'
+                                            }
+                                        ]}
+                                        opposite={(item) => item.status}
+                                        content={(item) => <small className="text-color-secondary">{item.date}</small>}
+                                    />
+                                    
+                                    <div className="mt-3 p-3 surface-100 border-round">
+                                        <div className="flex align-items-center justify-content-between">
+                                            <span className="font-semibold">Durée totale estimée:</span>
+                                            <Badge value={`${preview.dureeEstimee} jours`} severity="info" />
+                                        </div>
+                                    </div>
+                                </Card>
+                            </div>
+                        )}
+                    </div>
+                );
+
+            case 5: // Options avancées
+                return (
+                    <div className="formgrid grid">
+                        <div className="field col-12">
+                            <label htmlFor="montantPrevu" className="font-bold">
+                                Montant prévu
+                            </label>
+                            <InputNumber 
+                                id="montantPrevu" 
+                                value={chantierForm.montantPrevu} 
+                                onValueChange={(e) => onNumberChange(e, 'montantPrevu')} 
+                                mode="currency" 
+                                currency="EUR" 
+                                locale="fr-FR" 
+                                className={errors.montantPrevu ? 'p-invalid' : ''} 
+                            />
+                            {errors.montantPrevu && <small className="p-error">{errors.montantPrevu}</small>}
+                        </div>
+
+                        <div className="field col-12">
+                            <label htmlFor="contraintes" className="font-bold">Contraintes particulières</label>
+                            <InputTextarea 
+                                id="contraintes" 
+                                value={chantierForm.contraintes} 
+                                onChange={(e) => onInputChange(e, 'contraintes')} 
+                                rows={3} 
+                                placeholder="Décrivez les contraintes particulières du chantier"
+                            />
+                        </div>
+
+                        <div className="field col-12">
+                            <div className="formgrid grid">
+                                <div className="field col-12 md:col-6">
+                                    <div className="flex align-items-center">
+                                        <Checkbox 
+                                            id="permisRequis" 
+                                            checked={chantierForm.permisRequis} 
+                                            onChange={(e) => onCheckboxChange(e, 'permisRequis')} 
+                                        />
+                                        <label htmlFor="permisRequis" className="ml-2 font-bold">
+                                            Permis de construire requis
+                                        </label>
+                                    </div>
+                                </div>
+
+                                <div className="field col-12 md:col-6">
+                                    <div className="flex align-items-center">
+                                        <Checkbox 
+                                            id="controleUrbanismeRequis" 
+                                            checked={chantierForm.controleUrbanismeRequis} 
+                                            onChange={(e) => onCheckboxChange(e, 'controleUrbanismeRequis')} 
+                                        />
+                                        <label htmlFor="controleUrbanismeRequis" className="ml-2 font-bold">
+                                            Contrôle urbanisme requis
+                                        </label>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        {chantierForm.permisRequis && (
+                            <div className="field col-12">
+                                <div className="formgrid grid">
+                                    <div className="field col-12 md:col-6">
+                                        <label htmlFor="numeroPermis" className="font-bold">Numéro de permis</label>
+                                        <InputText 
+                                            id="numeroPermis" 
+                                            value={chantierForm.numeroPermis} 
+                                            onChange={(e) => onInputChange(e, 'numeroPermis')} 
+                                            placeholder="Numéro du permis de construire"
+                                        />
+                                    </div>
+
+                                    <div className="field col-12 md:col-6">
+                                        <label htmlFor="dateObtentionPermis" className="font-bold">Date d'obtention</label>
+                                        <Calendar 
+                                            id="dateObtentionPermis" 
+                                            value={chantierForm.dateObtentionPermis ? new Date(chantierForm.dateObtentionPermis) : null} 
+                                            onChange={(e) => onDateChange(e, 'dateObtentionPermis')} 
+                                            dateFormat="dd/mm/yy" 
+                                            showIcon 
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+
+                        <div className="field col-12">
+                            <div className="flex align-items-center">
+                                <Checkbox 
+                                    id="actif" 
+                                    checked={chantierForm.actif} 
+                                    onChange={(e) => onCheckboxChange(e, 'actif')} 
+                                />
+                                <label htmlFor="actif" className="ml-2 font-bold">
+                                    Chantier actif
+                                </label>
+                            </div>
+                            <small className="text-600">
+                                Un chantier inactif n'apparaîtra pas dans les listes de sélection
+                            </small>
+                        </div>
+                    </div>
+                );
+
+            case 6: // Prévisualisation
+                return (
+                    <div className="formgrid grid">
+                        <div className="field col-12">
+                            <h3 className="text-primary">Récapitulatif du projet</h3>
+                            <Divider />
+                        </div>
+
+                        {/* Informations générales dans un layout plus compact */}
+                        <div className="field col-12">
+                            <Card title="Informations générales" className="mb-3">
+                                <div className="grid">
+                                    <div className="col-12 md:col-6">
+                                        <div className="flex flex-column gap-2">
+                                            <div>
+                                                <span className="font-semibold text-600">Nom du chantier: </span>
+                                                <span>{chantierForm.nom}</span>
+                                            </div>
+                                            <div>
+                                                <span className="font-semibold text-600">Client: </span>
+                                                <span>{clients.find(c => c.value === chantierForm.clientId)?.label}</span>
+                                            </div>
+                                            <div>
+                                                <span className="font-semibold text-600">Type de chantier: </span>
+                                                <span>{chantierTypes.find(group => 
+                                                    group.items?.find((item: any) => item.value === chantierForm.typeChantier)
+                                                )?.items?.find((item: any) => item.value === chantierForm.typeChantier)?.label}</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div className="col-12 md:col-6">
+                                        <div className="flex flex-column gap-2">
+                                            <div>
+                                                <span className="font-semibold text-600">Surface: </span>
+                                                <span>{chantierForm.surface ? `${chantierForm.surface} m²` : 'Non spécifiée'}</span>
+                                            </div>
+                                            <div>
+                                                <span className="font-semibold text-600">Date de début: </span>
+                                                <span>{chantierForm.dateDebut}</span>
+                                            </div>
+                                            <div>
+                                                <span className="font-semibold text-600">Montant prévu: </span>
+                                                <span>{chantierForm.montantPrevu?.toLocaleString('fr-FR', { style: 'currency', currency: 'EUR' }) || 'Non spécifié'}</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </Card>
+                        </div>
+
+                        {/* Planning détaillé des phases */}
+                        {chantierForm.typeChantier && chantierForm.autoGenererPhases && (
+                            <div className="field col-12">
+                                <PhasesTimelinePreview
+                                    typeChantier={chantierForm.typeChantier}
+                                    dateDebut={chantierForm.dateDebut ? new Date(chantierForm.dateDebut) : new Date()}
+                                    surface={chantierForm.surface}
+                                    nombreNiveaux={chantierForm.nombreNiveaux}
+                                    inclureSousPhases={chantierForm.inclureSousPhases}
+                                    ajusterDelais={chantierForm.ajusterDelais}
+                                    margeSecurite={chantierForm.margeSecurite}
+                                    compact={false}
+                                    showDetails={true}
+                                />
+                            </div>
+                        )}
+
+                        {/* Configuration et options */}
+                        <div className="field col-12">
+                            <Card title="Configuration" className="mb-3">
+                                <div className="grid">
+                                    <div className="col-12 md:col-4">
+                                        <div className="flex align-items-center gap-2 mb-2">
+                                            <i className={`pi ${chantierForm.autoGenererPhases ? 'pi-check text-green-500' : 'pi-times text-red-500'}`}></i>
+                                            <span>Génération automatique des phases</span>
+                                        </div>
+                                    </div>
+                                    <div className="col-12 md:col-4">
+                                        <div className="flex align-items-center gap-2 mb-2">
+                                            <i className={`pi ${chantierForm.inclureSousPhases ? 'pi-check text-green-500' : 'pi-times text-red-500'}`}></i>
+                                            <span>Sous-phases incluses</span>
+                                        </div>
+                                    </div>
+                                    <div className="col-12 md:col-4">
+                                        <div className="flex align-items-center gap-2 mb-2">
+                                            <i className={`pi ${chantierForm.ajusterDelais ? 'pi-check text-green-500' : 'pi-times text-red-500'}`}></i>
+                                            <span>Ajustement des délais</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </Card>
+                        </div>
+                    </div>
+                );
+
+            case 7: // Validation
+                return (
+                    <div className="formgrid grid">
+                        <div className="field col-12">
+                            <div className="surface-card p-4 border-round shadow-2">
+                                <div className="flex align-items-center mb-3">
+                                    <i className="pi pi-check-circle text-4xl text-green-500 mr-3"></i>
+                                    <div>
+                                        <h3 className="m-0 text-green-600">Projet prêt à être créé</h3>
+                                        <p className="text-600 m-0">Vérifiez les informations avant de finaliser</p>
+                                    </div>
+                                </div>
+
+                                <div className="grid">
+                                    <div className="col-12 md:col-6">
+                                        <div className="border-1 surface-border border-round p-3">
+                                            <h4 className="mt-0 mb-2">Informations générales</h4>
+                                            <ul className="list-none p-0 m-0">
+                                                <li className="pb-2">✓ Nom du chantier défini</li>
+                                                <li className="pb-2">✓ Client sélectionné</li>
+                                                <li className="pb-2">✓ Type de chantier choisi</li>
+                                                <li className="pb-2">✓ Localisation renseignée</li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                    <div className="col-12 md:col-6">
+                                        <div className="border-1 surface-border border-round p-3">
+                                            <h4 className="mt-0 mb-2">Configuration</h4>
+                                            <ul className="list-none p-0 m-0">
+                                                <li className="pb-2">✓ Planification configurée</li>
+                                                {chantierForm.autoGenererPhases && <li className="pb-2">✓ Phases automatiques activées</li>}
+                                                {chantierForm.inclureSousPhases && <li className="pb-2">✓ Sous-phases incluses</li>}
+                                                {chantierForm.montantPrevu && <li className="pb-2">✓ Budget défini</li>}
+                                            </ul>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <Divider />
+
+                                <div className="text-center">
+                                    <p className="text-600 mb-3">
+                                        En cliquant sur "Créer le chantier", le projet sera enregistré et
+                                        {chantierForm.autoGenererPhases ? ' les phases seront générées automatiquement' : ' vous pourrez ajouter les phases manuellement'}.
+                                    </p>
+                                    <div className="flex justify-content-center gap-2">
+                                        <i className="pi pi-info-circle text-blue-500"></i>
+                                        <small className="text-600">
+                                            Vous pourrez modifier ces informations après la création
+                                        </small>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                );
+
+            default:
+                return null;
+        }
+    };
+
+    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 Chantier</h2>
+                        <Button 
+                            icon="pi pi-arrow-left" 
+                            label="Retour" 
+                            className="p-button-text" 
+                            onClick={handleCancel} 
+                        />
+                    </div>
+
+                    <Steps model={steps} activeIndex={activeIndex} className="mb-4" />
+
+                    <form onSubmit={handleSubmit} className="p-fluid">
+                        {renderStepContent()}
+
+                        <Divider />
+
+                        <div className="flex justify-content-between">
+                            <Button 
+                                type="button"
+                                label="Précédent" 
+                                icon="pi pi-chevron-left" 
+                                className="p-button-text" 
+                                onClick={prevStep}
+                                disabled={activeIndex === 0}
+                            />
+
+                            <div className="flex gap-2">
+                                <Button 
+                                    type="button"
+                                    label="Annuler" 
+                                    icon="pi pi-times" 
+                                    className="p-button-text" 
+                                    onClick={handleCancel} 
+                                    disabled={loading}
+                                />
+
+                                {activeIndex < steps.length - 1 ? (
+                                    <Button 
+                                        type="button"
+                                        label="Suivant" 
+                                        icon="pi pi-chevron-right" 
+                                        iconPos="right"
+                                        onClick={nextStep}
+                                    />
+                                ) : (
+                                    <Button 
+                                        type="submit"
+                                        label="Créer le chantier" 
+                                        icon="pi pi-check" 
+                                        loading={loading}
+                                        disabled={loading}
+                                    />
+                                )}
+                            </div>
+                        </div>
+                    </form>
+                </Card>
+            </div>
+        </div>
+    );
+};
+
+export default NouveauChantierPage;
+>>>>>>> 5ed9a80339c59d689b9655e8be1a68312d19d4a1
diff --git a/app/(main)/chantiers/planifies/page.tsx b/app/(main)/chantiers/planifies/page.tsx
index fc9e010..f0bc7b4 100644
--- a/app/(main)/chantiers/planifies/page.tsx
+++ b/app/(main)/chantiers/planifies/page.tsx
@@ -375,5 +375,10 @@ const ChantiersPlanifiesPage = () => {
 };
 
 export default ChantiersPlanifiesPage;
+<<<<<<< HEAD
 
 
+=======
+
+
+>>>>>>> 5ed9a80339c59d689b9655e8be1a68312d19d4a1
diff --git a/app/(main)/chantiers/retard/page.tsx b/app/(main)/chantiers/retard/page.tsx
index 2010ac5..ccda1ad 100644
--- a/app/(main)/chantiers/retard/page.tsx
+++ b/app/(main)/chantiers/retard/page.tsx
@@ -473,5 +473,10 @@ STATISTIQUES:
 };
 
 export default ChantiersRetardPage;
+<<<<<<< HEAD
 
 
+=======
+
+
+>>>>>>> 5ed9a80339c59d689b9655e8be1a68312d19d4a1
diff --git a/app/(main)/chantiers/termines/page.tsx b/app/(main)/chantiers/termines/page.tsx
index 3964428..09618be 100644
--- a/app/(main)/chantiers/termines/page.tsx
+++ b/app/(main)/chantiers/termines/page.tsx
@@ -403,5 +403,10 @@ Variance budgétaire: ${formatCurrency(totalCost - totalBudget)} (${Math.round((
 };
 
 export default ChantiersTerminesPage;
+<<<<<<< HEAD
 
 
+=======
+
+
+>>>>>>> 5ed9a80339c59d689b9655e8be1a68312d19d4a1
diff --git a/app/(main)/chantiers/workflow/page.tsx b/app/(main)/chantiers/workflow/page.tsx
index d2a4b0e..a12cad0 100644
--- a/app/(main)/chantiers/workflow/page.tsx
+++ b/app/(main)/chantiers/workflow/page.tsx
@@ -581,7 +581,14 @@ const WorkflowChantiers = () => {
 };
 
 export default WorkflowChantiers;
+<<<<<<< HEAD
 
 
 
 
+=======
+
+
+
+
+>>>>>>> 5ed9a80339c59d689b9655e8be1a68312d19d4a1
diff --git a/app/(main)/clients/recherche/page.tsx b/app/(main)/clients/recherche/page.tsx
index 52e1e69..5c319db 100644
--- a/app/(main)/clients/recherche/page.tsx
+++ b/app/(main)/clients/recherche/page.tsx
@@ -487,5 +487,10 @@ const RechercheClientPage = () => {
     );
 };
 
+<<<<<<< HEAD
 export default RechercheClientPage;
 
+=======
+export default RechercheClientPage;
+
+>>>>>>> 5ed9a80339c59d689b9655e8be1a68312d19d4a1
diff --git a/app/(main)/dashboard/maintenance/page.tsx b/app/(main)/dashboard/maintenance/page.tsx
index 4b338e7..fef120a 100644
--- a/app/(main)/dashboard/maintenance/page.tsx
+++ b/app/(main)/dashboard/maintenance/page.tsx
@@ -535,4 +535,8 @@ className="w-full md:w-14rem"
 };
 
 export default DashboardMaintenance;
+<<<<<<< HEAD
 
+=======
+
+>>>>>>> 5ed9a80339c59d689b9655e8be1a68312d19d4a1
diff --git a/app/(main)/dashboard/ressources/page.tsx b/app/(main)/dashboard/ressources/page.tsx
index 5ebca03..970add8 100644
--- a/app/(main)/dashboard/ressources/page.tsx
+++ b/app/(main)/dashboard/ressources/page.tsx
@@ -718,4 +718,8 @@ const DashboardRessources = () => {
 };
 
 export default DashboardRessources;
+<<<<<<< HEAD
 
+=======
+
+>>>>>>> 5ed9a80339c59d689b9655e8be1a68312d19d4a1
diff --git a/app/(main)/factures/payees/page.tsx b/app/(main)/factures/payees/page.tsx
index 073fd0c..0aa9262 100644
--- a/app/(main)/factures/payees/page.tsx
+++ b/app/(main)/factures/payees/page.tsx
@@ -607,6 +607,12 @@ RECOMMANDATIONS:
     );
 };
 
+<<<<<<< HEAD
 export default FacturesPayeesPage;
 
 
+=======
+export default FacturesPayeesPage;
+
+
+>>>>>>> 5ed9a80339c59d689b9655e8be1a68312d19d4a1
diff --git a/app/(main)/factures/retard/page.tsx b/app/(main)/factures/retard/page.tsx
index 4044aff..0e7ac55 100644
--- a/app/(main)/factures/retard/page.tsx
+++ b/app/(main)/factures/retard/page.tsx
@@ -712,6 +712,12 @@ ACTIONS RECOMMANDÉES:
     );
 };
 
+<<<<<<< HEAD
 export default FacturesRetardPage;
 
 
+=======
+export default FacturesRetardPage;
+
+
+>>>>>>> 5ed9a80339c59d689b9655e8be1a68312d19d4a1
diff --git a/app/(main)/maintenances/en-cours/page.tsx b/app/(main)/maintenances/en-cours/page.tsx
index 5499f65..b39ebb2 100644
--- a/app/(main)/maintenances/en-cours/page.tsx
+++ b/app/(main)/maintenances/en-cours/page.tsx
@@ -310,5 +310,10 @@ const MaintenancesEnCoursPage = () => {
     );
 };
 
+<<<<<<< HEAD
 export default MaintenancesEnCoursPage;
 
+=======
+export default MaintenancesEnCoursPage;
+
+>>>>>>> 5ed9a80339c59d689b9655e8be1a68312d19d4a1
diff --git a/app/(main)/maintenances/planifiees/page.tsx b/app/(main)/maintenances/planifiees/page.tsx
index 4a82d03..fcc6f21 100644
--- a/app/(main)/maintenances/planifiees/page.tsx
+++ b/app/(main)/maintenances/planifiees/page.tsx
@@ -445,5 +445,10 @@ const MaintenancesPlanifieesPage = () => {
     );
 };
 
+<<<<<<< HEAD
 export default MaintenancesPlanifieesPage;
 
+=======
+export default MaintenancesPlanifieesPage;
+
+>>>>>>> 5ed9a80339c59d689b9655e8be1a68312d19d4a1
diff --git a/app/(main)/materiels/disponibles/page.tsx b/app/(main)/materiels/disponibles/page.tsx
index 98c73f6..b5d5142 100644
--- a/app/(main)/materiels/disponibles/page.tsx
+++ b/app/(main)/materiels/disponibles/page.tsx
@@ -324,5 +324,10 @@ const MaterielsDisponiblesPage = () => {
     );
 };
 
+<<<<<<< HEAD
 export default MaterielsDisponiblesPage;
 
+=======
+export default MaterielsDisponiblesPage;
+
+>>>>>>> 5ed9a80339c59d689b9655e8be1a68312d19d4a1
diff --git a/app/(main)/materiels/maintenance-prevue/page.tsx b/app/(main)/materiels/maintenance-prevue/page.tsx
index b5a0be4..19bbf03 100644
--- a/app/(main)/materiels/maintenance-prevue/page.tsx
+++ b/app/(main)/materiels/maintenance-prevue/page.tsx
@@ -339,5 +339,10 @@ const MaintenancePrevuePage = () => {
     );
 };
 
+<<<<<<< HEAD
 export default MaintenancePrevuePage;
 
+=======
+export default MaintenancePrevuePage;
+
+>>>>>>> 5ed9a80339c59d689b9655e8be1a68312d19d4a1
diff --git a/app/(main)/materiels/search/page.tsx b/app/(main)/materiels/search/page.tsx
index fa0008f..ac62db1 100644
--- a/app/(main)/materiels/search/page.tsx
+++ b/app/(main)/materiels/search/page.tsx
@@ -255,4 +255,8 @@ const RechercheMaterielsPage = () => {
     );
 };
 
+<<<<<<< HEAD
 export default RechercheMaterielsPage;
+=======
+export default RechercheMaterielsPage;
+>>>>>>> 5ed9a80339c59d689b9655e8be1a68312d19d4a1
diff --git a/app/(main)/page.tsx b/app/(main)/page.tsx
index cc2b85e..91b69b5 100644
--- a/app/(main)/page.tsx
+++ b/app/(main)/page.tsx
@@ -551,4 +551,8 @@ const LandingPage: Page = () => {
 };
 
 export default LandingPage;
+<<<<<<< HEAD
 
+=======
+
+>>>>>>> 5ed9a80339c59d689b9655e8be1a68312d19d4a1
diff --git a/app/(main)/phases-chantier/retard/page.tsx b/app/(main)/phases-chantier/retard/page.tsx
index e3d154b..371ddf3 100644
--- a/app/(main)/phases-chantier/retard/page.tsx
+++ b/app/(main)/phases-chantier/retard/page.tsx
@@ -494,4 +494,8 @@ const PhasesEnRetardPage: Page = () => {
     );
 };
 
+<<<<<<< HEAD
 export default PhasesEnRetardPage;
+=======
+export default PhasesEnRetardPage;
+>>>>>>> 5ed9a80339c59d689b9655e8be1a68312d19d4a1
diff --git a/app/(main)/planning/calendrier/page.tsx b/app/(main)/planning/calendrier/page.tsx
index 89efaf5..1f87273 100644
--- a/app/(main)/planning/calendrier/page.tsx
+++ b/app/(main)/planning/calendrier/page.tsx
@@ -1010,6 +1010,12 @@ const CalendrierPlanningPage = () => {
     );
 };
 
+<<<<<<< HEAD
 export default CalendrierPlanningPage;
 
 
+=======
+export default CalendrierPlanningPage;
+
+
+>>>>>>> 5ed9a80339c59d689b9655e8be1a68312d19d4a1
diff --git a/app/(main)/planning/equipes/page.tsx b/app/(main)/planning/equipes/page.tsx
index 7968769..5c20844 100644
--- a/app/(main)/planning/equipes/page.tsx
+++ b/app/(main)/planning/equipes/page.tsx
@@ -1351,6 +1351,12 @@ const EquipesPage = () => {
     );
 };
 
+<<<<<<< HEAD
 export default EquipesPage;
 
 
+=======
+export default EquipesPage;
+
+
+>>>>>>> 5ed9a80339c59d689b9655e8be1a68312d19d4a1
diff --git a/app/(main)/planning/materiel/page.tsx b/app/(main)/planning/materiel/page.tsx
index faee3a4..673ba40 100644
--- a/app/(main)/planning/materiel/page.tsx
+++ b/app/(main)/planning/materiel/page.tsx
@@ -1549,6 +1549,12 @@ const MaterielPage = () => {
     );
 };
 
+<<<<<<< HEAD
 export default MaterielPage;
 
 
+=======
+export default MaterielPage;
+
+
+>>>>>>> 5ed9a80339c59d689b9655e8be1a68312d19d4a1
diff --git a/app/(main)/stock/commandes/page.tsx b/app/(main)/stock/commandes/page.tsx
index 070bd95..170c622 100644
--- a/app/(main)/stock/commandes/page.tsx
+++ b/app/(main)/stock/commandes/page.tsx
@@ -836,5 +836,10 @@ const CommandesPage = () => {
     );
 };
 
+<<<<<<< HEAD
 export default CommandesPage;
 
+=======
+export default CommandesPage;
+
+>>>>>>> 5ed9a80339c59d689b9655e8be1a68312d19d4a1
diff --git a/app/(main)/stock/sorties/page.tsx b/app/(main)/stock/sorties/page.tsx
index b1aebb0..c33b12d 100644
--- a/app/(main)/stock/sorties/page.tsx
+++ b/app/(main)/stock/sorties/page.tsx
@@ -1022,5 +1022,10 @@ const SortiesPage = () => {
     );
 };
 
+<<<<<<< HEAD
 export default SortiesPage;
 
+=======
+export default SortiesPage;
+
+>>>>>>> 5ed9a80339c59d689b9655e8be1a68312d19d4a1
diff --git a/app/clients/page.tsx b/app/clients/page.tsx
new file mode 100644
index 0000000..16f2028
--- /dev/null
+++ b/app/clients/page.tsx
@@ -0,0 +1,21 @@
+'use client';
+
+import React from 'react';
+import { useRouter } from 'next/navigation';
+
+const ClientsPage = () => {
+    const router = useRouter();
+
+    React.useEffect(() => {
+        // Rediriger vers la page principale des clients dans (main)
+        router.replace('/(main)/clients');
+    }, [router]);
+
+    return (
+        <div>
+            <p>Redirection vers les clients...</p>
+        </div>
+    );
+};
+
+export default ClientsPage;
diff --git a/app/home/page.tsx b/app/home/page.tsx
new file mode 100644
index 0000000..9197f0f
--- /dev/null
+++ b/app/home/page.tsx
@@ -0,0 +1,21 @@
+'use client';
+
+import React from 'react';
+import { useRouter } from 'next/navigation';
+
+const HomePage = () => {
+    const router = useRouter();
+
+    React.useEffect(() => {
+        // Rediriger vers la page d'accueil principale
+        router.replace('/');
+    }, [router]);
+
+    return (
+        <div>
+            <p>Redirection vers l'accueil...</p>
+        </div>
+    );
+};
+
+export default HomePage;
diff --git a/app/login/page.tsx b/app/login/page.tsx
new file mode 100644
index 0000000..7dc97bf
--- /dev/null
+++ b/app/login/page.tsx
@@ -0,0 +1,21 @@
+'use client';
+
+import React from 'react';
+import { useRouter } from 'next/navigation';
+
+const LoginPage = () => {
+    const router = useRouter();
+
+    React.useEffect(() => {
+        // Rediriger vers la page de connexion dans auth
+        router.replace('/auth/login');
+    }, [router]);
+
+    return (
+        <div>
+            <p>Redirection vers la connexion...</p>
+        </div>
+    );
+};
+
+export default LoginPage;
diff --git a/app/materiel/page.tsx b/app/materiel/page.tsx
new file mode 100644
index 0000000..ec5f2b7
--- /dev/null
+++ b/app/materiel/page.tsx
@@ -0,0 +1,21 @@
+'use client';
+
+import React from 'react';
+import { useRouter } from 'next/navigation';
+
+const MaterielPage = () => {
+    const router = useRouter();
+
+    React.useEffect(() => {
+        // Rediriger vers la page principale du matériel dans (main)
+        router.replace('/(main)/materiels');
+    }, [router]);
+
+    return (
+        <div>
+            <p>Redirection vers le matériel...</p>
+        </div>
+    );
+};
+
+export default MaterielPage;
diff --git a/tsconfig.json b/tsconfig.json
index b400f20..be0e274 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -38,4 +38,4 @@
   "exclude": [
     "node_modules"
   ]
-}
+}