update nanoid

Reviewed-on: maximus/aegis#42

.env.example

@@ -0,0 +1 @@
+VITE_PB_URL=

.gitea/workflows/deploy-environments.yml

@@ -0,0 +1,88 @@
+name: Déploiement AEGIS Portal
+
+on:
+  push:
+    branches:
+      - dev
+      - test
+      - acc
+      - master
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    env:
+      GIT_SSL_NO_VERIFY: "true"
+      NODE_TLS_REJECT_UNAUTHORIZED: "0"
+
+    steps:
+      - name: Patch DNS local pour Gitea Runner
+        run: sudo echo "10.10.40.31 git.bunker.lan" | sudo tee -a /etc/hosts
+
+      - name: Configuration de Git pour SSL
+        run: git config --global http.sslVerify false
+
+      - name: Récupération du code
+        uses: actions/checkout@v4
+      
+      - name: Configuration de Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+      
+      - name: Activation de pnpm
+        run: corepack enable pnpm
+      
+      - name: Installation des dépendances
+        run: pnpm install --frozen-lockfile
+      
+      - name: Compilation de la Build
+        env:
+          VITE_APP_ENV: ${{ github.ref_name }}
+          VITE_PB_URL: ${{ secrets.PB_URL }}
+        run: pnpm run build
+      
+      - name: Installation de lftp
+        run: sudo apt-get update && sudo apt-get install -y lftp
+      
+      - name: Routage et Déploiement FTP
+        env: # 1. On charge tous les secrets de manière sécurisée
+          SERVER: ${{ secrets.FTP_SERVER }}
+          DEV_U: ${{ secrets.DEV_FTP_USER }}
+          DEV_P: ${{ secrets.DEV_FTP_PASSWORD }}
+          TEST_U: ${{ secrets.TEST_FTP_USER }}
+          TEST_P: ${{ secrets.TEST_FTP_PASSWORD }}
+          ACC_U: ${{ secrets.ACC_FTP_USER }}
+          ACC_P: ${{ secrets.ACC_FTP_PASSWORD }}
+          PROD_U: ${{ secrets.PROD_FTP_USER }}
+          PROD_P: ${{ secrets.PROD_FTP_PASSWORD }}
+          BRANCH: ${{ github.ref_name }}
+        run: |
+          # 2. On attribue les bons identifiants selon la branche
+          if [ "$BRANCH" == "master" ]; then
+            TARGET_USER=$PROD_U; TARGET_PASS=$PROD_P;
+          elif [ "$BRANCH" == "acc" ]; then
+            TARGET_USER=$ACC_U; TARGET_PASS=$ACC_P;
+          elif [ "$BRANCH" == "test" ]; then
+            TARGET_USER=$TEST_U; TARGET_PASS=$TEST_P;
+          else
+            TARGET_USER=$DEV_U; TARGET_PASS=$DEV_P;
+          fi
+          
+          echo "Déploiement de la branche [$BRANCH]"
+          
+          # 3. Exécution du script FTP
+          cat << EOF > script.lftp
+          set ftp:passive-mode true
+          set ftp:ssl-allow no
+          set ssl:verify-certificate no
+          set net:timeout 5
+          set net:max-retries 2
+          set dns:fatal-timeout 2
+          open -u "${TARGET_USER}","${TARGET_PASS}" "${SERVER}"
+          cd home/${TARGET_USER}
+          mirror -R --delete --verbose dist/ ./
+          quit
+          EOF
+          
+          lftp -f script.lftp

.gitea/workflows/deploy.yml

@@ -1,61 +0,0 @@
-name: Deploy Aegis Portal
-
-on:
-  push:
-    branches:
-      - master # Branche principale confirmée
-
-jobs:
-  build-and-deploy:
-    runs-on: ubuntu-latest
-    
-    # 1. On désactive la vérification SSL pour tout le conteneur du job (Node.js et Git)
-    env:
-      GIT_SSL_NO_VERIFY: "true"
-      NODE_TLS_REJECT_UNAUTHORIZED: "0"
-
-    steps:
-      - name: Patch DNS local pour Gitea Runner
-        run: sudo echo "10.10.40.31 git.bunker.lan" | sudo tee -a /etc/hosts
-
-      # 2. On force l'exécutable Git interne à ignorer la vérification de l'autorité locale
-      - name: Configuration de Git pour SSL
-        run: git config --global http.sslVerify false
-
-      - name: Récupération du code
-        uses: actions/checkout@v4
-      
-      - name: Configuration de Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 22
-      
-      - name: Installation des dépendances (React/Vite)
-        run: npm ci
-      
-      - name: Compilation de la Build (Aegis)
-        run: npm run build
-      
-      - name: Installation de lftp
-        run: sudo apt-get update && sudo apt-get install -y lftp
-      
-      - name: Déploiement FTP (10.10.40.12)
-        env:
-          FTP_USER: ${{ secrets.FTP_USER }}        # Le compte FTP enfermé dans aegis.gise.be
-          FTP_PASSWORD: ${{ secrets.FTP_PASSWORD }}
-          FTP_SERVER: ${{ secrets.FTP_SERVER }}    # Doit contenir : 10.10.40.12
-        run: |
-          cat << EOF > script.lftp
-          set ftp:passive-mode true
-          set ftp:ssl-allow no
-          set ssl:verify-certificate no
-          set net:timeout 5
-          set net:max-retries 2
-          set dns:fatal-timeout 2
-          open -u "${FTP_USER}","${FTP_PASSWORD}" "${FTP_SERVER}"
-          cd home/${FTP_USER}
-          mirror -R --delete --verbose dist/ ./
-          quit
-          EOF
-          
-          lftp -f script.lftp

.gitea/workflows/enforce-git-flow.yml

@@ -0,0 +1,40 @@
+name: Sécurité - Architecture Git-Flow
+
+on:
+  pull_request:
+    branches:
+      - dev
+      - test
+      - acc
+      - master
+
+jobs:
+  validate-flow:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Vérification du flux de promotion
+        run: |
+          TARGET_BRANCH="${{ github.base_ref }}"
+          SOURCE_BRANCH="${{ github.head_ref }}"
+          
+          echo "Tentative de promotion : $SOURCE_BRANCH ➔ $TARGET_BRANCH"
+          
+          # Règle 1 : Vers TEST (Doit venir de DEV)
+          if [ "$TARGET_BRANCH" == "test" ] && [ "$SOURCE_BRANCH" != "dev" ]; then
+            echo "ERREUR : L'environnement TEST ne peut recevoir que du code de DEV."
+            exit 1
+          fi
+          
+          # Règle 2 : Vers ACC (Doit venir de TEST)
+          if [ "$TARGET_BRANCH" == "acc" ] && [ "$SOURCE_BRANCH" != "test" ]; then
+            echo "ERREUR : L'environnement d'ACCEPTATION ne peut recevoir que du code de TEST."
+            exit 1
+          fi
+          
+          # Règle 3 : Vers PROD (Doit venir de ACC)
+          if [ "$TARGET_BRANCH" == "master" ] && [ "$SOURCE_BRANCH" != "acc" ]; then
+            echo "ERREUR : La PRODUCTION ne peut recevoir que du code validé en ACCEPTATION (acc)."
+            exit 1
+          fi
+          
+          echo "Flux réglementaire respecté ! Promotion autorisée."

.gitea/workflows/quality-checks.yml

@@ -0,0 +1,59 @@
+name: Contrôle Qualité & Sécurité (QA)
+
+on:
+  pull_request:
+    branches:
+      - dev
+      - test
+      - acc
+      - master
+
+jobs:
+  quality-gate:
+    name: qa-s-check
+    runs-on: ubuntu-latest
+    
+    env:
+      GIT_SSL_NO_VERIFY: "true"
+      NODE_TLS_REJECT_UNAUTHORIZED: "0"
+
+    steps:
+      - name: Patch DNS local pour Gitea Runner
+        run: sudo echo "10.10.40.31 git.bunker.lan" | sudo tee -a /etc/hosts
+
+      - name: Configuration de Git pour SSL
+        run: git config --global http.sslVerify false
+
+      - name: Récupération du code source
+        uses: actions/checkout@v4
+
+      - name: Configuration de Node.js (v22)
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: Activation de pnpm
+        run: corepack enable pnpm
+
+      - name: Installation des dépendances
+        run: pnpm install --frozen-lockfile
+
+      # Étape 1 : ESLint (Syntaxe et conventions)
+      - name: Analyse Linter (ESLint)
+        run: pnpm run lint
+
+      # Étape 2 : Verification stricte des types TypeScript (sans émettre de fichiers)
+      - name: Verification des Types TypeScript
+        run: pnpm exec tsc --noEmit
+
+      # Étape 3 : Exécution des tests unitaires
+      - name: Tests Unitaires (Vitest)
+        run: pnpm run test -- --run
+
+      # Étape 4 : Audit des vulnérabilités npm (Niveau High/Critical)
+      - name: Audit de Sécurité des Dépendances
+        run: pnpm audit --audit-level=high
+
+      # Étape 5 : Validation de la compilation ViteJS
+      - name: Validation du Build de Production
+        run: pnpm run build

App.test.ts

@@ -0,0 +1,7 @@
+import { describe, it, expect } from 'vitest';
+
+describe('AEGIS Initial Test', () => {
+  it('devrait valider que 1 + 1 font 2', () => {
+    expect(1 + 1).toBe(2);
+  });
+});

package.json

@@ -7,35 +7,37 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest"
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.3.3",
     "@zitadel/react-auth": "^1.2.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^1.27.0",
+    "lucide-react": "^1.28.0",
     "oidc-client-ts": "^3.5.0",
     "otpauth": "^9.5.1",
-    "pocketbase": "^0.27.0",
+    "pocketbase": "^0.27.1",
     "qrcode.react": "^4.2.0",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
-    "react-router-dom": "^7.18.1",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "react-router-dom": "^7.18.2",
     "tailwind-merge": "^3.6.0",
     "tailwindcss": "^4.3.3"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
-    "@types/node": "^24.13.2",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.3",
-    "eslint": "^10.6.0",
+    "@types/node": "^24.13.3",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "@vitejs/plugin-react": "^6.0.5",
+    "eslint": "^10.8.0",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.3",
-    "globals": "^17.7.0",
-    "typescript": "~6.0.2",
-    "typescript-eslint": "^8.62.0",
-    "vite": "^8.1.1"
+    "globals": "^17.9.0",
+    "typescript": "~6.0.3",
+    "typescript-eslint": "^8.65.0",
+    "vite": "^8.2.0",
+    "vitest": "^4.1.10"
   }
 }

pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+overrides:
+  react-router: "^6.30.4"
+  react-router-dom: "^6.30.4"

src/App.tsx

@@ -14,6 +14,7 @@ import Analytics from '@/pages/trustcenter/Analytics';
 import Backups from '@/pages/trustcenter/Backups';
 import NewTicket from '@/pages/servicedesk/NewTicket';
 import TicketDetail from '@/pages/servicedesk/TicketDetail';
+import UpdatePasswordPage from './pages/accountsettings/UpdatePasswordPage';
 
 function App() {
   const [isAuthenticated, setIsAuthenticated] = useState(pb.authStore.isValid);
@@ -63,6 +64,7 @@ function App() {
         <Route path="/backups" element={<Backups />} />
         <Route path="/support/new" element={<NewTicket />} />
         <Route path="/support/tickets/:ticketId" element={<TicketDetail />} />
+        <Route path="/settings/security/password" element={<UpdatePasswordPage />} />
 
         {/* Sécurité : Si l'URL n'existe pas, on redirige vers le dashboard */}
         <Route path="*" element={<Navigate to="/dashboard" replace />} />

src/components/ui/Badge.tsx

@@ -6,7 +6,7 @@ interface BadgeProps {
     name: string
 }
 
-export const StatusBadge: React.FC<BadgeProps> = ({ className, name }) => {
+export const Badge: React.FC<BadgeProps> = ({ className, name }) => {
 
     return (
         <div
@@ -20,4 +20,4 @@ export const StatusBadge: React.FC<BadgeProps> = ({ className, name }) => {
     );
 };
 
-export default StatusBadge;
+export default Badge;

src/components/widgets/AccessWidget.tsx

@@ -1,43 +1,74 @@
-import { Card, CardContent, CardHeader } from '@/components/ui/Card';
-import { Lock } from "lucide-react";
+import React from 'react';
+import { Loader, Lock, KeyRound } from "lucide-react";
+import { useNavigate } from "react-router-dom"; // Assurez-vous d'utiliser react-router
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+import StatusBadge from '../ui/StatusBadge';
+import type { User } from '@/types/User';
 
-export function AccessWidget() {
+interface AccessWidgetProps {
+    user: User | null;
+    isLoading: boolean;
+    error: string | null;
+}
+
+export const AccessWidget: React.FC<AccessWidgetProps> = ({
+    user,
+    isLoading,
+    error,
+}) => {
+    // Hook de navigation
+    const navigate = useNavigate();
 
     return (
-        <Card>
-            <CardHeader className="p-6 border-slate-100">
-                <h2 className="text-lg font-semibold text-slate-900 border-slate-100 flex items-center"><Lock className="w-5 h-5 mr-2 text-slate-400"></Lock>Sécurité de l'accès</h2>
-            </CardHeader>
+        <Card className="flex flex-col h-full">
+            <div className="p-6 border-b border-slate-300/30 dark:border-slate-700/30">
+                <h2 className="text-lg font-black text-slate-900 dark:text-slate-100 flex items-center gap-3">
+                    <div className="p-2 rounded-xl bg-[#e8e8e8] dark:bg-[#1e293b] shadow-[3px_3px_6px_#c5c5c5,-3px_-3px_6px_#ffffff] dark:shadow-[3px_3px_6px_#121926,-3px_-3px_6px_#2a3850]">
+                        <Lock className="w-5 h-5 text-blue-600 dark:text-blue-500" />
+                    </div>
+                    Sécurité de l'accès
+                </h2>
+            </div>
 
-            <CardContent className="space-y-6">
-                {/* MFA Status */}
+            {isLoading && !error && (
+                <div className="p-8 flex justify-center items-center flex-1">
+                    <Loader className="w-6 h-6 animate-spin text-blue-600" />
+                </div>
+            )}
+
+            {!isLoading && !error && (
+                <div className="p-6 space-y-8 flex-1">
+                    
+                    {/* MFA */}
                     <div className="flex items-center justify-between">
                         <div>
-                        <p className="text-sm font-medium text-slate-900">Authentification à double facteur (MFA)</p>
-                        <p className="text-xs text-slate-500 mt-1">Exigée par les politiques de sécurité GISE</p>
+                            <p className="text-sm font-bold text-slate-900 dark:text-slate-200">Authentification (MFA)</p>
+                            <p className="text-xs font-medium text-slate-500 dark:text-slate-400 mt-1">Exigée par GISE</p>
                         </div>
-                    <span className="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-emerald-50 text-emerald-700 border border-emerald-200">
-                        <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 mr-1.5"></span>
-                        Actif
-                    </span>
+                        <StatusBadge status={user?.mfa_enabled ? "Actif" : "Hors Ligne"} />
                     </div>
 
-                <div className="pt-4 border-t border-slate-100">
-                    <button className="text-sm font-medium text-blue-900 hover:text-blue-800 bg-blue-50 hover:bg-blue-100 px-4 py-2 rounded-lg transition-colors duration-200 border border-blue-100">
-                        Générer de nouveaux codes de secours
-                    </button>
-                </div>
+                    {/* MOT DE PASSE (Lien vers la sous-page) */}
+                    <div className="pt-8 border-t border-slate-300/30 dark:border-slate-700/30">
+                        <p className="text-sm font-bold text-slate-900 dark:text-slate-200 mb-1">Mot de passe institutionnel</p>
+                        <p className="text-xs font-medium text-slate-500 dark:text-slate-400 mb-5">Dernière modification : Il y a 43 jours</p>
                         
-                {/* Mot de passe */}
-                <div className="pt-4 border-t border-slate-100">
-                    <p className="text-sm font-medium text-slate-900 mb-2">Mot de passe institutionnel</p>
-                    <p className="text-xs text-slate-500 mb-4">Dernière modification : Il y a 43 jours</p>
-                    <button className="text-sm font-medium text-slate-700 hover:text-slate-900 bg-white hover:bg-slate-50 border border-slate-300 px-4 py-2 rounded-lg transition-colors duration-200 shadow-sm">
+                        <Button 
+                            variant="primary" 
+                            size="sm"
+                            // Navigation vers votre route dédiée
+                            onClick={() => navigate('/settings/security/password')} 
+                            leftIcon={<KeyRound className="w-4 h-4" />}
+                            className="w-full sm:w-auto"
+                        >
                             Modifier le mot de passe
-                    </button>
+                        </Button>
                     </div>
-            </CardContent>
+                </div>
+            )}
         </Card>
     );
 }
+
 export default AccessWidget;

src/components/widgets/InformationWidget.tsx

@@ -1,7 +1,33 @@
 import { Card, CardContent, CardHeader } from '@/components/ui/Card';
+import type { Company } from '@/types/Company';
+import type { User } from '@/types/User';
+import { Loader } from '@/components/ui/Loader';
 import { Building } from "lucide-react";
 
-export function InformationWidget() {
+interface InformationWidgetProps {
+    user: User | null;
+    company: Company | null;
+    isLoading: boolean;
+    error: string | null;
+}
+
+function setVipBadge(vip_level: string | undefined) {
+    switch (vip_level?.toLowerCase()) {
+        case "platinum":
+            return <span className="px-2 py-1 bg-amber-600 text-white text-xs font-bold rounded shadow-sm mr-2 tracking-wider">{vip_level?.toUpperCase()}</span>;
+        case "premium":
+            return <span className="px-2 py-1 bg-violet-600 text-white text-xs font-bold rounded shadow-sm mr-2 tracking-wider">{vip_level?.toUpperCase()}</span>;
+        default:
+            return <span className="px-2 py-1 bg-blue-600 text-white text-xs font-bold rounded shadow-sm mr-2 tracking-wider">{vip_level?.toUpperCase()}</span>;
+    }
+}
+
+export const InformationWidget: React.FC<InformationWidgetProps> = ({
+    user,
+    company,
+    isLoading,
+    error,
+}) => {
     return (
         <Card>
             <CardHeader className="p-6 border-slate-100">
@@ -11,25 +37,29 @@ export function InformationWidget() {
                 </h2>
             </CardHeader>
 
+            {isLoading && !error && <Loader />}
+            {!isLoading && !error && (
                 <CardContent>
                     <dl className="space-y-4 text-sm">
                         <div>
                             <dt className="text-slate-500 font-medium">Entité Légale</dt>
-                        <dd className="mt-1 font-semibold text-slate-900">Cabinet Juridique Example & Associés</dd>
+                            <dd className="mt-1 font-semibold text-slate-900">{company?.name}</dd>
                         </div>
                         <div>
                             <dt className="text-slate-500 font-medium">Administrateur du compte</dt>
-                        <dd className="mt-1 text-slate-900">Direction Générale (direction@example.com)</dd>
+                            <dd className="mt-1 text-slate-900">{user?.role} {user?.name}</dd>
+                            <dd className="mt-1 text-slate-500">Email : {user?.emailVisibility && user?.email}{!user?.emailVisibility && "caché"}</dd>
                         </div>
                         <div>
                             <dt className="text-slate-500 font-medium">Niveau d'Infogérance (SLA)</dt>
                             <dd className="mt-1 flex items-center">
-                            <span className="px-2 py-1 bg-blue-900 text-white text-xs font-bold rounded shadow-sm mr-2 tracking-wider">VIP PLATINUM</span>
+                                {setVipBadge(company?.vip_level)}
                                 <span className="text-slate-700 font-medium">Couverture 24/7 (99.99%)</span>
                             </dd>
                         </div>
                     </dl>
                 </CardContent>
+            )}
         </Card>
     );
 }

src/components/widgets/NewTicketWidget.tsx

@@ -5,6 +5,8 @@ import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 import { Select } from '@/components/ui/Select';
 import { Textarea } from '@/components/ui/Textarea';
+import type { TicketCategory } from '@/types/Category';
+import type { ButtonVariantStyle } from '@/styles/VariantStyle';
 
 interface NewTicketWidgetProps {
   onCancel: () => void;
@@ -15,13 +17,13 @@ export const NewTicketWidget: React.FC<NewTicketWidgetProps> = ({ onCancel, onSu
   const { createTicket, isSubmitting, error } = useCreateTicket();
 
   // États locaux isolés dans le widget
-  const [category, setCategory] = useState<'Incident Critique' | 'Évolution' | 'Administratif'>('Incident Critique');
+  const [category, setCategory] = useState<TicketCategory>('Incident Critique');
   const [ci, setCi] = useState('general');
   const [subject, setSubject] = useState('');
   const [affectedAsset, setAffectedAsset] = useState('');
   const [incidentTime, setIncidentTime] = useState('');
   const [description, setDescription] = useState('');
-  const [buttonVariant, setButtonVariant]=useState('primary');
+  const [buttonVariant, setButtonVariant]=useState<ButtonVariantStyle>('primary');
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -62,7 +64,7 @@ export const NewTicketWidget: React.FC<NewTicketWidgetProps> = ({ onCancel, onSu
               <Select
                 label="Type de demande"
                 value={category}
-                onChange={(e) => {setCategory(e.target.value as any); setButtonVariant(e.target.value==="Incident Critique"?"danger":"primary")}}
+                onChange={(e) => {setCategory(e.target.value as TicketCategory); setButtonVariant(e.target.value==="Incident Critique"?"danger":"primary")}}
                 options={[
                   { value: 'Incident Critique', label: 'Incident Critique (Panne, Dégradation)' },
                   { value: 'Évolution', label: 'Évolution (Ajout de ressources, Modification)' },

src/components/widgets/TicketChatWidget.tsx

@@ -28,7 +28,7 @@ export const TicketChatWidget: React.FC<TicketChatWidgetProps> = ({
     try {
       await onSendMessage(newMessage);
       setNewMessage(''); // Vide l'input uniquement si l'envoi réussit
-    } catch (err) {
+    } catch {
       alert("Erreur lors de l'envoi.");
     }
   };

src/hooks/useDocumentDownload.ts

@@ -33,8 +33,7 @@ export function useDocumentDownload() {
             link.click();
             document.body.removeChild(link);
 
-        } catch (err) {
-            console.error("Erreur lors du téléchargement sécurisé :", err);
+        } catch {
             setError("Accès refusé au coffre-fort documentaire.");
         } finally {
             setIsDownloading(false);

src/hooks/useDocuments.ts

@@ -24,6 +24,7 @@ export const useDocuments = () => {
   }, []);
 
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     fetchDocuments();
   }, [fetchDocuments]);
 

src/hooks/useInfrastructureNodes.ts

@@ -15,7 +15,7 @@ export const useInfrastructureNodes = () => {
           sort: 'created',
         });
         setNodes(records);
-      } catch (err) {
+      } catch {
         setError("Impossible de charger l'infrastructure.");
       } finally {
         setIsLoading(false);

src/hooks/useLoginFlow.ts

@@ -23,8 +23,7 @@ export const useLoginFlow = (onLoginSuccess: () => void) => {
     try {
       const authData = await pb.collection('aegis_users').authWithOAuth2({ provider: 'oidc' });
       if (authData) onLoginSuccess();
-    } catch (err) {
-      console.error(err);
+    } catch {
       setError("Échec de la connexion via GISE Identity.");
       pb.authStore.clear();
     } finally {
@@ -64,7 +63,7 @@ export const useLoginFlow = (onLoginSuccess: () => void) => {
       } else {
         onLoginSuccess();
       }
-    } catch (err) {
+    } catch {
       setError("Identifiants incorrects ou accès révoqué.");
       pb.authStore.clear();
     } finally {
@@ -98,7 +97,7 @@ export const useLoginFlow = (onLoginSuccess: () => void) => {
       } else {
         setError("Code de sécurité invalide ou expiré.");
       }
-    } catch (err) {
+    } catch {
       setError("Erreur critique lors de la vérification.");
     } finally {
       setIsLoading(false);

src/hooks/useTicketDetail.ts

@@ -37,6 +37,7 @@ export const useTicketDetail = (ticketId?: string) => {
   }, [ticketId]);
 
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     fetchTicketData();
   }, [fetchTicketData]);
 
@@ -51,9 +52,8 @@ export const useTicketDetail = (ticketId?: string) => {
         content: content.trim(),
       });
       await fetchTicketData(); // On recharge les messages après l'envoi
-    } catch (err) {
-      console.error("Erreur lors de l'envoi du message :", err);
-      throw new Error("Impossible d'envoyer le message.");
+    } catch (error) {
+      throw new Error("Impossible de charger le ticket", { cause: error });
     } finally {
       setIsSending(false);
     }

src/hooks/useTickets.ts

@@ -15,8 +15,7 @@ export const useTickets = () => {
         sort: '-created', // Du plus récent au plus ancien
       });
       setTickets(records);
-    } catch (err) {
-      console.error("Erreur lors de la récupération des tickets :", err);
+    } catch {
       setError("Impossible de charger l'historique de vos requêtes.");
     } finally {
       setIsLoading(false);
@@ -24,6 +23,7 @@ export const useTickets = () => {
   }, []);
 
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     fetchTickets();
   }, [fetchTickets]);
 

src/hooks/useUserInformations.ts

@@ -0,0 +1,30 @@
+import { pb } from "@/services/pocketbase";
+import type { Company } from "@/types/Company";
+import type { User } from "@/types/User";
+import { useEffect, useState } from "react";
+
+export const useUserInformations = () => {
+  const [user, setUser] = useState<User | null>(null);
+  const [company, setCompany] = useState<Company | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchInformations = async () => {
+        setIsLoading(true);
+      try {
+        const userRecords = await pb.collection('aegis_users').getFullList<User>();
+        setUser(userRecords[0]);
+        const companyRecords = await pb.collection('aegis_companies').getFullList<Company>();
+        setCompany(companyRecords[0])
+      } catch (err) {
+        setError("Erreur lors de la récupération des infos utilisateur :"+err);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchInformations();
+  }, []);
+
+  return { user, company, isLoading, error };
+};

src/pages/AccountSettings.tsx

@@ -1,29 +1,33 @@
 import PageHeader from "@/components/ui/PageHeader";
 import AccessWidget from "@/components/widgets/AccessWidget";
 import InformationWidget from "@/components/widgets/InformationWidget";
+import { useUserInformations } from "@/hooks/useUserInformations";
 
 export default function AccountSettings() {
+  const { user, company, isLoading, error } = useUserInformations();
   return (
     <div className="font-sans relative min-h-[calc(100vh-4rem)]">
-
-
       {/* Contenu Principal */}
       <main className="max-w-7xl mx-auto px-8 sm:px-8 space-y-6 m-4">
         {/* Header */}
         <PageHeader
           title="Paramètres du compte"
           description="Gestion de la sécurité et informations contractuelles" />
-
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-
           {/* Colonne 1 : Sécurité */}
-          <AccessWidget/>
-
+          <AccessWidget
+            user={user}
+            isLoading={isLoading}
+            error={error}
+          />
           {/* Colonne 2 : Organisation & Contrat */}
-          <InformationWidget/>
-
+          <InformationWidget
+            user={user}
+            company={company}
+            isLoading={isLoading}
+            error={error}
+          />
         </div>
-
       </main>
     </div>
   );

src/pages/accountsettings/UpdatePasswordPage.tsx

@@ -0,0 +1,142 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { KeyRound, AlertCircle, ShieldCheck } from "lucide-react";
+import { Card } from '@/components/ui/Card';
+import { Input } from '@/components/ui/Input';
+import { Button } from '@/components/ui/Button';
+import { pb } from '@/services/pocketbase';
+import BackButton from '@/components/ui/BackButton';
+import { NEUMORPHISM } from '@/styles/Neumorphism';
+
+export default function UpdatePasswordPage() {
+    const navigate = useNavigate();
+
+    const [isUpdating, setIsUpdating] = useState(false);
+    const [feedback, setFeedback] = useState<{ type: 'error' | 'success', message: string } | null>(null);
+
+    const [formData, setFormData] = useState({
+        oldPassword: '',
+        newPassword: '',
+        confirmPassword: ''
+    });
+
+    const handlePasswordChange = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setIsUpdating(true);
+        setFeedback(null);
+
+        if (formData.newPassword !== formData.confirmPassword) {
+            setFeedback({ type: 'error', message: "Les nouveaux mots de passe ne correspondent pas." });
+            setIsUpdating(false);
+            return;
+        }
+
+        if (formData.newPassword.length < 8) {
+            setFeedback({ type: 'error', message: "Le mot de passe doit contenir au moins 8 caractères minimum." });
+            setIsUpdating(false);
+            return;
+        }
+
+        try {
+            const userId = pb.authStore.model?.id;
+            if (!userId) throw new Error("Non authentifié.");
+
+            await pb.collection("users").update(userId, {
+                oldPassword: formData.oldPassword,
+                password: formData.newPassword,
+                passwordConfirm: formData.confirmPassword,
+            });
+
+            setFeedback({ type: 'success', message: "Votre mot de passe a été modifié avec succès." });
+            setFormData({ oldPassword: '', newPassword: '', confirmPassword: '' });
+
+            // Retour automatique après 2.5 secondes
+            setTimeout(() => navigate(-1), 2500);
+
+        } catch {
+            setFeedback({ type: 'error', message: "Ancien mot de passe incorrect ou erreur réseau." });
+        } finally {
+            setIsUpdating(false);
+        }
+    };
+    return (
+        <div className="max-w-4xl mx-auto py-8 px-4 space-y-6">
+
+            {/* BOUTON DE RETOUR EXTRAIT */}
+            <BackButton to="/account" label="Retour aux paramètres" />
+
+            {/* LE FORMULAIRE */}
+            <Card className="p-8 sm:p-10">
+                <div className="flex items-center gap-4 mb-8 pb-6 border-b border-slate-300/30 dark:border-slate-700/30">
+                    <div className="p-4 rounded-2xl bg-[#e8e8e8] dark:bg-[#1e293b] shadow-[3px_3px_6px_#c5c5c5,-3px_-3px_6px_#ffffff] dark:shadow-[3px_3px_6px_#121926,-3px_-3px_6px_#2a3850]">
+                        <KeyRound className="w-8 h-8 text-slate-700 dark:text-slate-200" />
+                    </div>
+                    <div>
+                        <h1 className="text-2xl font-black text-slate-800 dark:text-slate-100 tracking-tight">
+                            Renouvellement du mot de passe
+                        </h1>
+                        <p className="text-slate-500 dark:text-slate-400 font-medium mt-1">
+                            Veuillez choisir un mot de passe fort et unique pour sécuriser votre accès AEGIS.
+                        </p>
+                    </div>
+                </div>
+
+                <form onSubmit={handlePasswordChange} className="space-y-6">
+                    <div className="space-y-2">
+                        <Input
+                            label="Mot de passe actuel"
+                            type="password"
+                            required
+                            placeholder="••••••••"
+                            value={formData.oldPassword}
+                            onChange={(e) => setFormData({ ...formData, oldPassword: e.target.value })}
+                        />
+                    </div>
+
+                    <div className="grid sm:grid-cols-2 gap-6 pt-4">
+                        <Input
+                            label="Nouveau mot de passe"
+                            type="password"
+                            required
+                            placeholder="••••••••"
+                            value={formData.newPassword}
+                            onChange={(e) => setFormData({ ...formData, newPassword: e.target.value })}
+                        />
+                        <Input
+                            label="Confirmez le nouveau mot de passe"
+                            type="password"
+                            required
+                            placeholder="••••••••"
+                            value={formData.confirmPassword}
+                            onChange={(e) => setFormData({ ...formData, confirmPassword: e.target.value })}
+                        />
+                    </div>
+
+                    {/* Zone de Feedback */}
+                    {feedback && (
+                        <div className={`p-4 mt-4 rounded-xl flex items-center gap-3 text-sm font-bold ${feedback.type === 'error'
+                            ? `bg-rose-50/50 dark:bg-rose-950/20 text-rose-600 dark:text-rose-400 ${NEUMORPHISM.insetLight} ${NEUMORPHISM.insetDark}`
+                            : `bg-emerald-50/50 dark:bg-emerald-950/20 text-emerald-600 dark:text-emerald-400 ${NEUMORPHISM.insetLight} ${NEUMORPHISM.insetDark}`
+                            }`}>
+                            {feedback.type === 'error' ? <AlertCircle className="w-5 h-5 shrink-0" /> : <ShieldCheck className="w-5 h-5 shrink-0" />}
+                            {feedback.message}
+                            {feedback.type === 'success' && <span className="ml-auto font-normal text-xs animate-pulse">Redirection...</span>}
+                        </div>
+                    )}
+
+                    <div className="pt-6 flex justify-center">
+                        <Button
+                            type="submit"
+                            variant="primary"
+                            size="lg"
+                            isLoading={isUpdating}
+                            disabled={!formData.oldPassword || !formData.newPassword || !formData.confirmPassword}
+                        >
+                            Valider le nouveau mot de passe
+                        </Button>
+                    </div>
+                </form>
+            </Card>
+        </div>
+    );
+}

src/pages/trustcenter/InfrastructureEvolution.tsx

@@ -6,7 +6,6 @@ import { useEvolutionRequest } from '@/hooks/useEvolutionRequest';
 
 import { BackButton } from '@/components/ui/BackButton';
 import { EmptyState } from '@/components/ui/EmptyState';
-import { Button } from '@/components/ui/Button';
 
 // Nos nouveaux composants
 import { EvolutionOptionCard } from '@/components/widgets/EvolutionOptionCard';

src/styles/VariantStyle.ts

@@ -0,0 +1 @@
+export type ButtonVariantStyle = "primary" | "danger" | "secondary" | "success" | "outline" | "ghost";

src/types/Category.ts

@@ -0,0 +1 @@
+export type TicketCategory = "Incident Critique" | "Évolution" | "Administratif";

src/types/Company.ts

@@ -0,0 +1,8 @@
+export interface Company {
+    id: string;
+    name: string;
+    no: string;
+    vip_level: string;
+    created: string;
+    updated: string
+}

src/types/User.ts

@@ -0,0 +1,12 @@
+export interface User {
+    id: string;
+    email: string;
+    emailVisibility: boolean;
+    verified: boolean;
+    name: string;
+    role: string;
+    company: string;
+    mfa_enabled: boolean;
+    created: string;
+    updated: string
+}

vite.config.ts

@@ -11,20 +11,20 @@ export default defineConfig({
   ],
   resolve: {
     alias: {
-      '@': path.resolve(__dirname, './src'),
-      '@components': path.resolve(__dirname, './src/components'),
-      '@ui': path.resolve(__dirname, './src/components/ui'),
-      '@common': path.resolve(__dirname, './src/components/common'),
-      '@pages': path.resolve(__dirname, './src/pages'),
-      '@hooks': path.resolve(__dirname, './src/hooks'),
-      '@layouts': path.resolve(__dirname, './src/layouts'),
-      '@features': path.resolve(__dirname, './src/features'),
-      '@services': path.resolve(__dirname, './src/services'),
-      '@utils': path.resolve(__dirname, './src/utils'),
-      '@assets': path.resolve(__dirname, './src/assets'),
-      '@data': path.resolve(__dirname, './src/data'),
-      '@widgets': path.resolve(__dirname, './src/components/widgets'),
-      '@styles': path.resolve(__dirname, './src/styles'),
+      '@': path.resolve(import.meta.dirname, './src'),
+      '@components': path.resolve(import.meta.dirname, './src/components'),
+      '@ui': path.resolve(import.meta.dirname, './src/components/ui'),
+      '@common': path.resolve(import.meta.dirname, './src/components/common'),
+      '@pages': path.resolve(import.meta.dirname, './src/pages'),
+      '@hooks': path.resolve(import.meta.dirname, './src/hooks'),
+      '@layouts': path.resolve(import.meta.dirname, './src/layouts'),
+      '@features': path.resolve(import.meta.dirname, './src/features'),
+      '@services': path.resolve(import.meta.dirname, './src/services'),
+      '@utils': path.resolve(import.meta.dirname, './src/utils'),
+      '@assets': path.resolve(import.meta.dirname, './src/assets'),
+      '@data': path.resolve(import.meta.dirname, './src/data'),
+      '@widgets': path.resolve(import.meta.dirname, './src/components/widgets'),
+      '@styles': path.resolve(import.meta.dirname, './src/styles'),
     }
   }
 })