Merge pull request 'Feat/account sets' (#44) from feat/account-sets into dev

Reviewed-on: maximus/aegis#44

.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

.gitignore

@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+

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": "^19.2.8",
-    "react-dom": "^19.2.7",
+    "react-dom": "^19.2.8",
-    "react-router-dom": "^7.18.1",
+    "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/node": "^24.13.3",
-    "@types/react": "^19.2.17",
+    "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.3",
+    "@types/react-dom": "^19.2.4",
-    "@vitejs/plugin-react": "^6.0.3",
+    "@vitejs/plugin-react": "^6.0.5",
-    "eslint": "^10.6.0",
+    "eslint": "^10.8.0",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.3",
-    "globals": "^17.7.0",
+    "globals": "^17.9.0",
-    "typescript": "~6.0.2",
+    "typescript": "~6.0.3",
-    "typescript-eslint": "^8.62.0",
+    "typescript-eslint": "^8.65.0",
-    "vite": "^8.1.1"
+    "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.css

@@ -1,184 +0,0 @@
-.counter {
-  font-size: 16px;
-  padding: 5px 10px;
-  border-radius: 5px;
-  color: var(--accent);
-  background: var(--accent-bg);
-  border: 2px solid transparent;
-  transition: border-color 0.3s;
-  margin-bottom: 24px;
-
-  &:hover {
-    border-color: var(--accent-border);
-  }
-  &:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 2px;
-  }
-}
-
-.hero {
-  position: relative;
-
-  .base,
-  .framework,
-  .vite {
-    inset-inline: 0;
-    margin: 0 auto;
-  }
-
-  .base {
-    width: 170px;
-    position: relative;
-    z-index: 0;
-  }
-
-  .framework,
-  .vite {
-    position: absolute;
-  }
-
-  .framework {
-    z-index: 1;
-    top: 34px;
-    height: 28px;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
-      scale(1.4);
-  }
-
-  .vite {
-    z-index: 0;
-    top: 107px;
-    height: 26px;
-    width: auto;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
-      scale(0.8);
-  }
-}
-
-#center {
-  display: flex;
-  flex-direction: column;
-  gap: 25px;
-  place-content: center;
-  place-items: center;
-  flex-grow: 1;
-
-  @media (max-width: 1024px) {
-    padding: 32px 20px 24px;
-    gap: 18px;
-  }
-}
-
-#next-steps {
-  display: flex;
-  border-top: 1px solid var(--border);
-  text-align: left;
-
-  & > div {
-    flex: 1 1 0;
-    padding: 32px;
-    @media (max-width: 1024px) {
-      padding: 24px 20px;
-    }
-  }
-
-  .icon {
-    margin-bottom: 16px;
-    width: 22px;
-    height: 22px;
-  }
-
-  @media (max-width: 1024px) {
-    flex-direction: column;
-    text-align: center;
-  }
-}
-
-#docs {
-  border-right: 1px solid var(--border);
-
-  @media (max-width: 1024px) {
-    border-right: none;
-    border-bottom: 1px solid var(--border);
-  }
-}
-
-#next-steps ul {
-  list-style: none;
-  padding: 0;
-  display: flex;
-  gap: 8px;
-  margin: 32px 0 0;
-
-  .logo {
-    height: 18px;
-  }
-
-  a {
-    color: var(--text-h);
-    font-size: 16px;
-    border-radius: 6px;
-    background: var(--social-bg);
-    display: flex;
-    padding: 6px 12px;
-    align-items: center;
-    gap: 8px;
-    text-decoration: none;
-    transition: box-shadow 0.3s;
-
-    &:hover {
-      box-shadow: var(--shadow);
-    }
-    .button-icon {
-      height: 18px;
-      width: 18px;
-    }
-  }
-
-  @media (max-width: 1024px) {
-    margin-top: 20px;
-    flex-wrap: wrap;
-    justify-content: center;
-
-    li {
-      flex: 1 1 calc(50% - 8px);
-    }
-
-    a {
-      width: 100%;
-      justify-content: center;
-      box-sizing: border-box;
-    }
-  }
-}
-
-#spacer {
-  height: 88px;
-  border-top: 1px solid var(--border);
-  @media (max-width: 1024px) {
-    height: 48px;
-  }
-}
-
-.ticks {
-  position: relative;
-  width: 100%;
-
-  &::before,
-  &::after {
-    content: '';
-    position: absolute;
-    top: -4.5px;
-    border: 5px solid transparent;
-  }
-
-  &::before {
-    left: 0;
-    border-left-color: var(--border);
-  }
-  &::after {
-    right: 0;
-    border-right-color: var(--border);
-  }
-}

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/auth/LocalLoginForm.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { Button } from '@/components/ui/Button';
+import { Input } from '../ui/Input';
 
 interface LocalLoginFormProps {
   onSubmit: (email: string, pass: string) => void;
@@ -20,10 +21,9 @@ export const LocalLoginForm: React.FC<LocalLoginFormProps> = ({ onSubmit, isLoad
       <div>
         <label htmlFor="email" className="block text-sm font-medium text-slate-700">Identifiant institutionnel</label>
         <div className="mt-1">
-          <input 
+          <Input 
             id="email" type="email" required placeholder="direction@client.com"
             value={email} onChange={(e) => setEmail(e.target.value)}
-            className="block w-full rounded-md border border-slate-300 px-3 py-2 shadow-sm focus:border-blue-900 focus:ring-blue-900 sm:text-sm" 
           />
         </div>
       </div>
@@ -31,10 +31,9 @@ export const LocalLoginForm: React.FC<LocalLoginFormProps> = ({ onSubmit, isLoad
       <div>
         <label htmlFor="password" className="block text-sm font-medium text-slate-700">Mot de passe</label>
         <div className="mt-1">
-          <input 
+          <Input 
             id="password" type="password" required placeholder="••••••••••••"
-            value={password} onChange={(e) => setPassword(e.target.value)}
+            value={password} onChange={(e) => setPassword(e.target.value)} 
-            className="block w-full rounded-md border border-slate-300 px-3 py-2 shadow-sm focus:border-blue-900 focus:ring-blue-900 sm:text-sm" 
           />
         </div>
       </div>

src/components/layout/Sidebar.tsx

@@ -4,6 +4,8 @@ import { Shield, ShieldCheck, HelpCircle, Lock, Settings, LogOut } from 'lucide-
 import { cn } from '@/utils/utils';
 import { Card } from '@/components/ui/Card';
 import { NEUMORPHISM } from '@/styles/Neumorphism';
+import { useTheme } from '@/hooks/useTheme';
+import { ThemeToggle } from '@ui/ThemeToggle';
 
 interface SidebarProps {
   onLogout: () => void;
@@ -21,20 +23,21 @@ const NAVIGATION_ITEMS = [
 
 
 export const Sidebar: React.FC<SidebarProps> = ({ onLogout, className }) => {
+  const { isDark, toggleTheme } = useTheme();
   return (
     <Card className={cn("w-60 flex flex-col p-6 shrink-0", className)}>
       {/* 1. EN-TÊTE / LOGO */}
       <div className="flex items-center gap-4 mb-10 px-2">
         {/* Petit badge logo avec effet creusé */}
         <div className={cn(
-          "w-12 h-12 rounded-2xl flex items-center justify-center bg-[#e8e8e8] dark:bg-[#1e293b]",
+          "w-12 h-12 rounded-2xl flex items-center justify-center bg-[#e8e8e8] dark:bg-[#1e293b] transition-all duration-300 ease-in-out",
           "shadow-[inset_4px_4px_8px_#c5c5c5,inset_-4px_-4px_8px_#ffffff] dark:shadow-[inset_4px_4px_8px_#121926,inset_-4px_-4px_8px_#2a3850]"
         )}>
-          <Shield className="w-6 h-6 text-blue-600 dark:text-blue-500" />
+          <Shield className="w-6 h-6 text-blue-600 dark:text-blue-500 transition-all duration-300 ease-in-out" />
         </div>
         <div>
-          <h1 className="text-2xl font-black tracking-widest text-slate-800 dark:text-white leading-none">AEGIS</h1>
+          <h1 className="text-2xl font-black tracking-widest text-slate-800 dark:text-white leading-none transition-all duration-300 ease-in-out">AEGIS</h1>
-          <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">by GISE</span>
+          <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest transition-all duration-300 ease-in-out">by GISE</span>
         </div>
       </div>
 
@@ -52,7 +55,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ onLogout, className }) => {
                   "w-full flex items-center gap-4 px-5 py-4 rounded-2xl transition-all duration-300 ease-in-out cursor-pointer",
                   "bg-[#e8e8e8] dark:bg-[#1e293b]",
                   isActive
-                    ? cn(NEUMORPHISM.insetLight, NEUMORPHISM.insetDark, "!text-blue-600 dark:!text-blue-400 font-black")
+                    ? cn(NEUMORPHISM.insetLight, NEUMORPHISM.insetDark, "text-blue-600! dark:text-blue-400! font-black")
                     : cn(NEUMORPHISM.lightShadow, NEUMORPHISM.darkShadow, "text-slate-500 dark:text-slate-400 font-bold hover:text-slate-700 dark:hover:text-slate-200")
                 )
               }
@@ -74,6 +77,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ onLogout, className }) => {
         })}
       </nav>
 
+      <ThemeToggle isDark={isDark} toggleTheme={toggleTheme} />
       {/* 3. ZONE DE DÉCONNEXION */}
       <div className="pt-6 mt-6 border-t border-white/40 dark:border-slate-800/50">
         <button

src/components/ui/Badge.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { cn } from '@/utils/utils';
+
+interface BadgeProps {
+    className?: string;
+    name: string
+}
+
+export const Badge: React.FC<BadgeProps> = ({ className, name }) => {
+
+    return (
+        <div
+            className={cn(
+                "px-2.5 py-1 rounded-full text-xs font-semibold inline-flex items-center border transition-colors min-w-fit max-h-fit",
+                className
+            )}
+        >
+            {name}
+        </div>
+    );
+};
+
+export default Badge;

src/components/ui/Button.tsx

@@ -64,7 +64,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         {isLoading && (
           <svg 
             className="animate-spin -ml-1 mr-2 h-5 w-5 text-current" 
-            xmlns="http://www.w3.org/2000/svg" 
+            xmlns="http://www.w3.org/2000/svg"
             fill="none" 
             viewBox="0 0 24 24"
           >

src/components/ui/Card.tsx

@@ -12,7 +12,7 @@ import { NEUMORPHISM } from '@/styles/Neumorphism';
 interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
   // 'raised'  : relief neumorphique complet — dashboards, widgets isolés, peu nombreux à l'écran.
   // 'flat'    : bordure fine, sans ombre — listes/tables denses (perf + lisibilité).
-  variant?: 'raised' | 'flat'|'digged';
+  variant?: 'raised' | 'flat'|'digged'|'prophunt';
 }
 
 export const Card = React.forwardRef<HTMLDivElement, CardProps>(
@@ -21,11 +21,12 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(
       ref={ref}
       className={cn(
         // Style de base
-        "rounded-3xl border-none transition-[background-color,box-shadow] duration-300 ease-in-out flex flex-col overflow-hidden",
+        "rounded-3xl border-none transition-all duration-300 ease-in-out flex flex-col",
         "bg-[#e8e8e8] dark:bg-[#1e293b]",
         // Relief neumorphique (par défaut)
         variant === 'raised' && [NEUMORPHISM.lightShadow, NEUMORPHISM.darkShadow],
         variant === 'digged' && [NEUMORPHISM.insetDark, NEUMORPHISM.insetLight],
+        variant === 'prophunt' && [NEUMORPHISM.insetDark, NEUMORPHISM.insetLight,NEUMORPHISM.lightShadowHover,NEUMORPHISM.darkShadowHover],
         // Variante plate : pas d'ombre, juste une bordure discrète — pour tables/listes denses
         variant === 'flat' && "border border-black/5 dark:border-white/10",
         className
@@ -42,7 +43,7 @@ export const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<
       ref={ref}
       className={cn(
         // Séparation discrète (bordure fine plutôt qu'ombre inset, pour rester léger)
-        "px-6 py-5 flex flex-col space-y-1.5 border-b border-black/5 dark:border-white/5",
+        "px-6 py-5 flex flex-col space-y-1.5 border-black/5 dark:border-white/5 transition-all duration-300",
         className
       )}
       {...props}
@@ -55,7 +56,7 @@ export const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn("p-6 flex-1", className)}
+      className={cn("p-6 flex-1 transition-all duration-300 ease-in-out", className)}
       {...props}
     />
   )

src/components/ui/DocumentObject.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Download } from 'lucide-react';
+import { cn } from '@/utils/utils';
+import type { Document } from '@/types/Document';
+import { Button } from './Button';
+import { useDocumentDownload } from '@/hooks/useDocumentDownload';
+
+interface DocumentObjectProps {
+    doc: Document;
+}
+
+export const DocumentObject: React.FC<DocumentObjectProps> = ({ doc }) => {
+    // 2. On initialise le Hook pour ce document spécifique
+    const { downloadFile, isDownloading } = useDocumentDownload();
+
+    const getCategoryBadge = (category: string) => {
+        switch (category) {
+            case 'Audit': return 'bg-purple-50 text-purple-700 border-purple-200';
+            case 'Facture': return 'bg-slate-100 text-slate-700 border-slate-200';
+            case 'Rapport de conformité': return 'bg-emerald-50 text-emerald-700 border-emerald-200';
+            default: return 'bg-blue-50 text-blue-700 border-blue-200';
+        }
+    };
+
+    return (
+        <tr key={doc.id} className={cn('hover:bg-amber-50 hover:dark:bg-slate-600 cursor-default transition-all duration-300')}>
+            <td className="px-6 py-4 whitespace-nowrap">
+                <div className="flex items-center">
+                    <svg className="shrink-0 h-6 w-6 text-slate-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                    </svg>
+                    <div>
+                        <div className="text-sm font-medium text-slate-900 dark:text-slate-100">{doc.title}</div>
+                        <div className="text-xs text-slate-500 dark:text-slate-400">{doc.file} • PDF</div>
+                    </div>
+                </div>
+            </td>
+            <td className="px-6 py-4 whitespace-nowrap">
+                <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${getCategoryBadge(doc.category)}`}>
+                    {doc.category}
+                </span>
+            </td>
+            <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500 dark:text-slate-400">
+                {/* Petit conseil d'optimisation : utiliser une fonction date pour éviter les crashs si doc.created est mal formaté */}
+                {doc.created ? `${doc.created.split(" ")[0]} ${doc.created.split(" ")[1]?.substring(0,5)}` : 'N/A'}
+            </td>
+            <td className="px-6 py-4 items-center">
+                {/* 3. On relie le bouton à l'état et à la fonction du Hook */}
+                <Button 
+                    className="text-blue-900 dark:text-blue-400 hover:text-blue-700 px-3 py-1.5 flex ml-auto" 
+                    size='sm'
+                    leftIcon={<Download className="w-4 h-4" />}
+                    onClick={() => downloadFile(doc)}
+                    isLoading={isDownloading} // Si votre composant Button supporte cette prop !
+                    disabled={isDownloading}
+                > 
+                    {isDownloading ? 'Téléchargement...' : 'Télécharger'}
+                </Button>
+            </td>
+        </tr>
+    );
+};

src/components/ui/Input.tsx

@@ -57,7 +57,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
               "bg-[#e8e8e8] dark:bg-[#1e293b]",
               "text-slate-800 dark:text-slate-100 font-medium placeholder:text-slate-400 dark:placeholder:text-slate-500",
               
-              // 🎯 Utilisation directe de tes constantes Neumorphic creusées
+              // Utilisation directe de tes constantes Neumorphic creusées
               NEUMORPHISM.insetLight,
               NEUMORPHISM.insetDark,
 

src/components/ui/LogoGise.tsx

@@ -0,0 +1,20 @@
+export function LogoGise(){
+    return(
+        <div className="sm:mx-auto sm:w-full sm:max-w-md">
+        <div className="flex justify-center">
+          <div className="h-12 w-12 bg-blue-900 rounded-lg flex items-center justify-center shadow-sm border border-blue-800">
+            <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+            </svg>
+          </div>
+        </div>
+        <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-slate-900">
+          AEGIS <span className="font-light text-slate-500">by GISE</span>
+        </h2>
+        <p className="mt-2 text-center text-sm text-slate-500 uppercase tracking-widest font-semibold">
+          Accès restreint
+        </p>
+      </div>
+    );
+};
+export default LogoGise;

src/components/ui/ServiceObject.tsx

@@ -9,7 +9,7 @@ interface ServiceObjectProps {
 
 export const ServiceObject: React.FC<ServiceObjectProps> = ({ contract }) => {
   return (
-    <Card variant= 'digged' className="p-4 rounded-lg border border-slate-100 flex flex-col">
+    <Card variant= 'prophunt' className="p-4 flex flex-col cursor-pointer">
       <div className='flex flex-row justify-between'>
         <h3 className="text-sm font-medium text-slate-900">{contract.service_name}</h3>
         {/* Fonctionne instantanément avec 'Actif', 'En déploiement', 'Suspendu' */}

src/components/ui/StatusBadge.tsx

@@ -1,5 +1,3 @@
-// Fichier : src/components/ui/StatusBadge.tsx
-
 import React from 'react';
 import { cn } from '@/utils/utils';
 import type { AegisStatus } from '@/types/Status';

src/components/ui/ThemeToggle.tsx

@@ -0,0 +1,52 @@
+import { Sun, Moon } from "lucide-react";
+import { cn } from "@utils/utils";
+
+interface ThemeToggleProps {
+  isDark: boolean;
+  toggleTheme: () => void;
+}
+
+export function ThemeToggle({ isDark, toggleTheme }: ThemeToggleProps) {
+  
+  const lightInset = "shadow-[inset_4px_4px_8px_#c5c5c5,inset_-4px_-4px_8px_#ffffff]";
+  const darkInset = "dark:shadow-[inset_4px_4px_8px_#121926,inset_-4px_-4px_8px_#2a3850]";
+  
+  const lightExtrude = "shadow-[3px_3px_6px_#c5c5c5,-3px_-3px_6px_#ffffff]";
+  const darkExtrude = "dark:shadow-[3px_3px_6px_#121926,-3px_-3px_6px_#2a3850]";
+
+  return (
+    <button 
+      onClick={toggleTheme}
+      // 1. On ajoute la transition globale sur le fond du bouton principal
+      className="group relative flex items-center w-20 h-10 rounded-full bg-[#e8e8e8] dark:bg-[#1e293b] outline-none cursor-pointer shrink-0 transition-all duration-300 ease-in-out"
+      aria-label="Basculer le thème"
+    >
+      {/* 2. Le Rail : On s'assure qu'il est bien à 300ms ease-in-out */}
+      <div className={cn(
+        "absolute inset-0 rounded-full transition-all duration-300 ease-in-out",
+        lightInset, darkInset
+      )}></div>
+
+      {/* 3. La Bille : On remplace 'transition-transform duration-500' par la transition globale */}
+      <div className={cn(
+        "absolute left-1 w-8 h-8 rounded-full bg-[#e8e8e8] dark:bg-[#1e293b] z-10 flex items-center justify-center",
+        "transition-all duration-300 ease-in-out", // <-- LA CORRECTION EST ICI
+        lightExtrude, darkExtrude,
+        isDark ? "translate-x-10" : "translate-x-0"
+      )}>
+        
+        {/* 4. Les icônes : On les passe aussi à 300ms pour que la rotation suive le mouvement */}
+        <Sun className={cn(
+          "absolute w-4 h-4 text-amber-500 transition-all duration-300 ease-in-out",
+          isDark ? "opacity-0 rotate-90 scale-50" : "opacity-100 rotate-0 scale-100"
+        )} strokeWidth={2.5} />
+        
+        <Moon className={cn(
+          "absolute w-4 h-4 text-indigo-400 transition-all duration-300 ease-in-out",
+          isDark ? "opacity-100 rotate-0 scale-100" : "opacity-0 -rotate-90 scale-50"
+        )} strokeWidth={2.5} />
+        
+      </div>
+    </button>
+  );
+}

src/components/ui/TicketRow.tsx

@@ -11,7 +11,7 @@ export const TicketRow: React.FC<TicketRowProps> = ({ ticket, onClick }) => {
   return (
     <div 
       onClick={() => onClick(ticket.id)}
-      className="p-6 flex items-center justify-between hover:bg-slate-50 transition-colors cursor-pointer group"
+      className="p-6 flex items-center justify-between hover:bg-amber-50 transition-colors"
     >
       <div className="space-y-1">
         <div className="flex items-center space-x-3">

src/components/ui/UptimeObject.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { InfrastructureNode } from '@/types/InfrastructureNode';
 import { StatusBadge } from '@ui/StatusBadge';
+import { cn } from '@/utils/utils';
 
 interface UptimeObjectProps {
   node: InfrastructureNode;
@@ -9,24 +10,25 @@ interface UptimeObjectProps {
 export const UptimeObject: React.FC<UptimeObjectProps> = ({ node }) => {
   return (
     // La "key" a été retirée d'ici, elle sera gérée par le parent
-    <div className="py-4 flex items-center justify-between first:pt-0 last:pb-0">
+    <tr className={cn(
-      
+      "hover:bg-amber-50 dark:hover:bg-slate-900 cursor-pointer transition-all duration-300 ease-in-out",
-      {/* Infos Serveur */}
+    )}>
-      <div>
-        <p className="font-medium text-slate-900">{node.label}</p>
-        <p className="text-xs text-slate-500 mt-0.5">{node.type}</p>
-      </div>
-      
-      {/* Métriques & Badge */}
-      <div className="flex items-center space-x-6">
-        <div className="text-right">
-          <p className="text-xs text-slate-500">SLA</p>
-          <p className="text-sm font-semibold text-slate-900">{node.uptime_sla}</p>
-        </div>
-        
-        <StatusBadge status={node.status} />
-      </div>
 
-    </div>
+      {/* Infos Serveur */}
+      <td className='p-2'>
+        <p className="font-medium text-slate-900 dark:text-slate-400 transition-all duration-300 ease-in-out">{node.label}</p>
+        <p className="text-xs text-slate-500 mt-0.5">{node.type}</p>
+      </td>
+
+      {/* Métriques & Badge */}
+      <td className='p-2'>
+        <p className="text-xs text-slate-500">SLA</p>
+        <p className="text-sm font-semibold text-slate-900 dark:text-slate-400 transition-all duration-300 ease-in-out">{node.uptime_sla}</p>
+      </td>
+      <td className='text-right p-2'>
+        <StatusBadge status={node.status} />
+      </td>
+
+    </tr>
   );
 };

src/components/widgets/AccessWidget.tsx

@@ -0,0 +1,74 @@
+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';
+
+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 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>
+
+            {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-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>
+                        <StatusBadge status={user?.mfa_enabled ? "Actif" : "Hors Ligne"} />
+                    </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>
+                        
+                        <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>
+                    </div>
+                </div>
+            )}
+        </Card>
+    );
+}
+
+export default AccessWidget;

src/components/widgets/BackupWidget.tsx

@@ -1,4 +1,6 @@
-import { Card, CardContent } from '@/components/ui/Card';
+import { Card, CardContent, CardHeader } from '@/components/ui/Card';
+import { Check } from 'lucide-react';
+import Badge from '@ui/Badge';
 
 interface BackupWidgetProps {
   onClick?: () => void;
@@ -6,27 +8,22 @@ interface BackupWidgetProps {
 
 export default function BackupWidget({ onClick }: BackupWidgetProps) {
   return (
-    <Card 
+    <Card
       onClick={onClick}
-      className="cursor-pointer hover:border-blue-300 hover:shadow-md transition-all group"
+      className="cursor-pointer transition-all duration-300 ease-in-out"
     >
-      <CardContent className="p-6">
+      <CardHeader>
-        <div className="flex items-center justify-between mb-4">
+        <h2 className="text-lg font-semibold">Sauvegardes</h2>
-          <h2 className="text-lg font-semibold text-slate-900 group-hover:text-blue-900 transition-colors">Sauvegardes</h2>
+        <Badge className="max-w-fit min-w-fit" name="PRA Immuable">
-          <span className="bg-slate-100 text-slate-600 text-xs px-2 py-1 rounded font-medium border border-slate-200">
+        </Badge>
-            PRA Immuable
+      </CardHeader>
-          </span>
+      <CardContent className="p-6 flex flex-col h-full">
-        </div>
+        <Card variant="flat" className="rounded-lg p-4 border border-slate-100 mb-4">
-        
-        <div className="bg-slate-50 rounded-lg p-4 border border-slate-100 mb-4 group-hover:bg-blue-50/50 transition-colors">
           <p className="text-sm text-slate-500 mb-1">Dernier snapshot système</p>
           <p className="text-slate-900 font-medium">Aujourd'hui à 03:00 AM</p>
-        </div>
+        </Card>
-
         <div className="flex items-center text-emerald-600 text-sm font-medium">
-          <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <Check></Check>
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
-          </svg>
           Intégrité validée avec succès
         </div>
       </CardContent>

src/components/widgets/DocumentsWidget.tsx

@@ -0,0 +1,36 @@
+import { useDocuments } from '@/hooks/useDocuments';
+import {DocumentObject} from '@ui/DocumentObject'
+import { Card } from '../ui/Card';
+
+export function DocumentsWidget(){
+    const { documents } = useDocuments();
+    return (
+        <Card className='pb-7'>
+            <table className="min-w-full divide-y divide-slate-200">
+                <thead>
+                    <tr>
+                        <th scope="col" className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
+                            Nom du fichier
+                        </th>
+                        <th scope="col" className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
+                            Catégorie
+                        </th>
+                        <th scope="col" className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
+                            Ajouté le
+                        </th>
+                        <th scope="col" className="px-6 py-3 text-right text-xs font-semibold text-slate-500 uppercase tracking-wider">
+                            Action
+                        </th>
+                    </tr>
+                </thead>
+                <tbody className="divide-y divide-slate-200">
+                    {documents.map((doc) => (
+                        <DocumentObject doc={doc}></DocumentObject>
+                    ))}
+                </tbody>
+            </table>
+        </Card>
+    );
+};
+
+export default DocumentsWidget;

src/components/widgets/EvolutionOptionCard.tsx

@@ -19,7 +19,7 @@ export const EvolutionOptionCard: React.FC<EvolutionOptionCardProps> = ({
   return (
     <div
       className={cn(
-        "group bg-white rounded-xl border p-6 flex flex-col justify-between transition-all duration-200 hover:border-blue-900 hover:shadow-md relative overflow-hidden",
+        "group bg-white rounded-xl border p-6 flex flex-col justify-between transition-all duration-300 hover:border-blue-900 hover:shadow-md relative overflow-hidden",
         isSubmitting ? "border-blue-900 bg-blue-50/30" : "border-slate-200"
       )}
     >

src/components/widgets/InformationWidget.tsx

@@ -0,0 +1,67 @@
+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";
+
+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">
+                <h2 className="text-lg font-semibold text-slate-900 border-slate-100 flex items-center">
+                    <Building className="w-5 h-5 mr-2 text-slate-400" />
+                    Profil de l'Organisation
+                </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">{company?.name}</dd>
+                        </div>
+                        <div>
+                            <dt className="text-slate-500 font-medium">Administrateur du compte</dt>
+                            <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">
+                                {setVipBadge(company?.vip_level)}
+                                <span className="text-slate-700 font-medium">Couverture 24/7 (99.99%)</span>
+                            </dd>
+                        </div>
+                    </dl>
+                </CardContent>
+            )}
+        </Card>
+    );
+}
+
+export default InformationWidget;

src/components/widgets/NewTicketWidget.tsx

@@ -5,7 +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 { cn } from '@/utils/utils';
+import type { TicketCategory } from '@/types/Category';
+import type { ButtonVariantStyle } from '@/styles/VariantStyle';
 
 interface NewTicketWidgetProps {
   onCancel: () => void;
@@ -16,12 +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<ButtonVariantStyle>('primary');
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -39,7 +41,7 @@ export const NewTicketWidget: React.FC<NewTicketWidgetProps> = ({ onCancel, onSu
 
   return (
     <Card>
-      <CardHeader className="bg-slate-50 border-b border-slate-100">
+      <CardHeader>
         <h1 className="text-xl font-bold text-slate-900 tracking-tight">Ouvrir un nouveau ticket</h1>
         <p className="text-sm text-slate-500 mt-0.5">Qualification de votre requête ITSM</p>
       </CardHeader>
@@ -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)}
+                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)' },
@@ -143,11 +145,7 @@ export const NewTicketWidget: React.FC<NewTicketWidgetProps> = ({ onCancel, onSu
             <Button
               type="submit"
               isLoading={isSubmitting}
-              className={cn(
+              variant={buttonVariant}
-                category === 'Incident Critique'
-                  ? "bg-red-600 hover:bg-red-700 focus:ring-red-600"
-                  : ""
-              )}
             >
               Soumettre le ticket
             </Button>

src/components/widgets/SecurityWidget.tsx

@@ -1,4 +1,4 @@
-import { Card, CardContent } from '@/components/ui/Card';
+import { Card, CardContent, CardHeader } from '@/components/ui/Card';
 
 interface SecurityWidgetProps {
   onClick?: () => void;
@@ -6,18 +6,18 @@ interface SecurityWidgetProps {
 
 export default function SecurityWidget({ onClick }: SecurityWidgetProps) {
   return (
-    <Card 
+    <Card
       onClick={onClick}
-      className="cursor-pointer hover:border-blue-300 hover:shadow-md transition-all group"
+      className="cursor-pointer hover:border-blue-300 transition-all duration-300 ease-in-out"
     >
+      <CardHeader>
+        <h2 className="text-lg font-semibold transition-colors">Posture de Sécurité</h2>
+      </CardHeader>
       <CardContent className="p-6">
-        <h2 className="text-lg font-semibold text-slate-900 mb-4 group-hover:text-blue-900 transition-colors">Posture de Sécurité</h2>
-        
         <div className="flex items-baseline space-x-2 mb-4">
           <span className="text-3xl font-bold text-slate-900">1,432</span>
           <span className="text-sm text-slate-500">menaces bloquées (30j)</span>
         </div>
-
         <div className="space-y-3">
           <div className="flex justify-between items-center text-sm">
             <span className="text-slate-600">Bouclier Cloudflare WAF</span>

src/components/widgets/ServicesWidget.tsx

@@ -30,10 +30,10 @@ export default function ServicesWidget() {
           ))}
         </div>
 
-        <Button size="lg" onClick={() => navigate('/evolution-infrastructure')}>
+        <Button className ="text-green-600" size="lg" onClick={() => navigate('/evolution-infrastructure')}>
-          Demander une évolution du parc
+          Mise à niveau du Parc
         </Button>
-
+ 
       </CardContent>
     </Card>
   );

src/components/widgets/SupportCtaWidget.tsx

@@ -8,14 +8,14 @@ export const SupportCtaWidget: React.FC = () => {
 
   return (
     <Card>
-      <CardContent className="p-6">
+      <CardContent className="p-6 rounded-xl">
         <h3 className="text-lg font-semibold mb-2">Centre de Support</h3>
-        <p className="text-blue-900 text-sm mb-4 leading-relaxed">
+        <p className="text-sm mb-4 leading-relaxed">
           Déclarez un incident critique ou demandez une évolution de votre infrastructure.
         </p>
-        <Button 
+        <Button
           onClick={() => navigate('/support')}
-          className="w-full text-blue-900"
+          className= "text-rose-500 w-full"
         >
           Ouvrir un ticket sécurisé
         </Button>

src/components/widgets/SupportFooterWidget.tsx

@@ -16,7 +16,7 @@ export const SupportFooterWidget: React.FC<SupportFooterWidgetProps> = ({
   const navigate = useNavigate();
 
   return (
-    <div className="mt-12 bg-slate-900 text-slate-300 rounded-xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4 shadow-sm">
+    <div className="mt-12 bg-slate-500 text-slate-300 rounded-xl p-6 flex flex-col sm:flex-row items-center justify-between gap-4 shadow-sm">
       <div>
         <h4 className="text-sm font-bold text-white">{title}</h4>
         <p className="text-xs text-slate-400 mt-0.5">

src/components/widgets/TicketChatWidget.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import type { TicketMessage } from '@/types/Message';
-import { Card } from '@/components/ui/Card';
+import { Card, CardContent, CardHeader } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 import { EmptyState } from '@/components/ui/EmptyState';
@@ -28,19 +28,19 @@ 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.");
     }
   };
 
   return (
-    <Card className="flex flex-col h-[500px] overflow-hidden shadow-sm">
+    <Card className="h-125">
-      <div className="p-4 border-b border-slate-100 bg-slate-50">
+      <CardHeader>
-        <h2 className="text-sm font-semibold text-slate-800">Échanges chiffrés avec l'ingénierie</h2>
+        <h2 className="text-sm font-semibold text-slate-800">Échanges chiffrés</h2>
-      </div>
+      </CardHeader>
 
       {/* Zone des messages */}
-      <div className="flex-1 overflow-y-auto p-6 space-y-6 scrollbar-hide bg-white">
+      <CardContent className="flex-1 overflow-y-auto p-6 space-y-6">
         {messages.length === 0 ? (
           <EmptyState message="Aucun message pour l'instant. Démarrez la conversation ci-dessous." />
         ) : (
@@ -48,10 +48,10 @@ export const TicketChatWidget: React.FC<TicketChatWidgetProps> = ({
             <MessageBubble key={msg.id} message={msg} currentUserId={currentUserId} />
           ))
         )}
-      </div>
+      </CardContent>
 
       {/* Zone de saisie avec notre composant UI */}
-      <form onSubmit={handleSubmit} className="p-4 border-t border-slate-100 bg-slate-50 flex items-start space-x-3">
+      <form onSubmit={handleSubmit} className="p-4 flex items-start space-x-3">
         <div className="flex-1">
           <Input
             value={newMessage}

src/components/widgets/TicketInfoWidget.tsx

@@ -10,7 +10,7 @@ interface TicketInfoWidgetProps {
 export const TicketInfoWidget: React.FC<TicketInfoWidgetProps> = ({ ticket }) => {
   return (
     <Card>
-      <CardHeader className="bg-slate-50 border-b border-slate-100 flex flex-col sm:flex-row sm:items-start justify-between gap-4">
+      <CardHeader>
         <div className="space-y-2">
           <div className="flex items-center space-x-3">
             <span className="text-xs font-bold uppercase tracking-wider px-2.5 py-1 bg-slate-200 text-slate-700 rounded-md">
@@ -24,10 +24,10 @@ export const TicketInfoWidget: React.FC<TicketInfoWidgetProps> = ({ ticket }) =>
           </p>
         </div>
         
-        <StatusBadge status={ticket.status} className="shrink-0" />
+        <StatusBadge status={ticket.status} className="shrink-0 max-w-fit" />
       </CardHeader>
       
-      <CardContent className="p-6 bg-white">
+      <CardContent>
         <p className="text-xs font-semibold text-slate-400 mb-2 uppercase tracking-wide">
           Description du besoin :
         </p>

src/components/widgets/TicketsWidget.tsx

@@ -13,7 +13,7 @@ export const TicketsWidget: React.FC<TicketsWidgetProps> = ({ onSelectTicket })
   const { tickets, isLoading, error } = useTickets();
 
   return (
-    <Card>
+    <Card className='pb-7'>
       <CardContent className="p-0">
         {/* En-tête du Widget */}
         <div className="p-6 border-b border-slate-100">

src/components/widgets/UptimeWidget.tsx

@@ -10,8 +10,8 @@ export default function UptimeWidget() {
   return (
     <Card>
       <CardContent className="p-6 flex flex-col h-full">
-        <h2 className="text-lg font-semibold text-slate-900 mb-4">État des Services & SLA</h2>
+        <h2 className="text-lg font-semibold text-slate-900 dark:text-slate-400 mb-4 transition-all duration-300 ease-in-out">État des Services & SLA</h2>
-        
+
         {/* 1. Gestion de l'erreur */}
         {error && (
           <EmptyState message={error} className="text-red-500 not-italic font-medium" />
@@ -26,13 +26,15 @@ export default function UptimeWidget() {
         )}
 
         {/* 4. Affichage des données */}
+        <table className="divide-y divide-slate-100 table-auto">
         {!isLoading && !error && nodes.length > 0 && (
-          <div className="divide-y divide-slate-100 flex-1">
+            <tbody className=''>
-            {nodes.map((node) => (
+              {nodes.map((node) => (
-              <UptimeObject key={node.id} node={node} />
+                <UptimeObject key={node.id} node={node} />
-            ))}
+              ))}
-          </div>
+            </tbody>
         )}
+        </table>
       </CardContent>
     </Card>
   );

src/hooks/useDocumentDownload.ts

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+// Importez votre instance PocketBase
+import {pb} from '@/services/pocketbase'; 
+import type { Document } from '@/types/Document';
+
+export function useDocumentDownload() {
+    const [isDownloading, setIsDownloading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const downloadFile = async (doc: Document) => {
+        try {
+            setIsDownloading(true);
+            setError(null);
+
+            // 1. Demander un jeton éphémère de téléchargement (Sécurité Max)
+            // Ce jeton autorise le navigateur à télécharger un fichier protégé sans exposer votre session
+            const fileToken = await pb.files.getToken();
+
+            // 2. Générer l'URL du fichier
+            // ATTENTION : Pour que getUrl fonctionne, 'doc' DOIT contenir doc.id ET doc.collectionId (ou doc.collectionName)
+            const fileUrl = pb.files.getUrl(doc, doc.file);
+            
+            // 3. Ajouter le jeton sécurisé et forcer le téléchargement (?download=1)
+            const downloadUrl = `${fileUrl}?token=${fileToken}&download=1`;
+
+            // 4. Créer un lien invisible pour forcer le navigateur à télécharger
+            const link = document.createElement("a");
+            link.href = downloadUrl;
+            // On s'assure d'avoir un nom de fichier par défaut si doc.title est vide
+            link.setAttribute("download", doc.title || "document_aegis.pdf"); 
+            
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+
+        } catch {
+            setError("Accès refusé au coffre-fort documentaire.");
+        } finally {
+            setIsDownloading(false);
+        }
+    };
+
+    return { downloadFile, isDownloading, error };
+}

src/hooks/useDocuments.ts

@@ -0,0 +1,32 @@
+import { useState, useEffect, useCallback } from 'react';
+import { pb } from '@/services/pocketbase';
+import type { Document } from '@/types/Document';
+
+export const useDocuments = () => {
+  const [documents, setDocuments] = useState<Document[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchDocuments = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const records = await pb.collection('aegis_documents_vault').getFullList<Document>({
+        sort: '-created', // Du plus récent au plus ancien
+      });
+      setDocuments(records);
+    } catch (err) {
+      console.error("Erreur lors de la récupération des documents :", err);
+      setError("Impossible de charger les documents.");
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    fetchDocuments();
+  }, [fetchDocuments]);
+
+  return { documents, isLoading, error, refetch: 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) {
+    } catch {
-      console.error(err);
       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/useTheme.ts

@@ -0,0 +1,42 @@
+import { useState, useEffect } from 'react';
+
+type Theme = 'light' | 'dark';
+
+export function useTheme() {
+  // Initialisation de l'état avec une fonction pour ne lire le localStorage qu'une seule fois
+  const [theme, setTheme] = useState<Theme>(() => {
+    // 1. On vérifie si un choix a déjà été sauvegardé
+    const storedTheme = localStorage.getItem('theme');
+    if (storedTheme === 'dark' || storedTheme === 'light') {
+      return storedTheme;
+    }
+    
+    // 2. Sinon, on vérifie la préférence système de l'utilisateur
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      return 'dark';
+    }
+    
+    // 3. Par défaut, mode clair
+    return 'light';
+  });
+
+  // À chaque fois que 'theme' change, on met à jour le HTML et on sauvegarde
+  useEffect(() => {
+    const root = window.document.documentElement;
+    
+    if (theme === 'dark') {
+      root.classList.add('dark');
+    } else {
+      root.classList.remove('dark');
+    }
+    
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+
+  // Fonction utilitaire pour basculer facilement
+  const toggleTheme = () => {
+    setTheme((prevTheme) => (prevTheme === 'dark' ? 'light' : 'dark'));
+  };
+
+  return { theme, isDark: theme === 'dark', toggleTheme, setTheme };
+}

src/hooks/useTicketDetail.ts

@@ -15,7 +15,7 @@ export const useTicketDetail = (ticketId?: string) => {
   const fetchTicketData = useCallback(async () => {
     if (!ticketId) return;
     setError(null);
-    
+
     try {
       // 1. Récupération du ticket
       const ticketData = await pb.collection('aegis_tickets').getOne<Ticket>(ticketId);
@@ -37,12 +37,13 @@ export const useTicketDetail = (ticketId?: string) => {
   }, [ticketId]);
 
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     fetchTicketData();
   }, [fetchTicketData]);
 
   const sendMessage = async (content: string) => {
     if (!content.trim() || !currentUser || !ticketId) return;
-    
+
     setIsSending(true);
     try {
       await pb.collection('aegis_ticket_messages').create({
@@ -51,9 +52,8 @@ export const useTicketDetail = (ticketId?: string) => {
         content: content.trim(),
       });
       await fetchTicketData(); // On recharge les messages après l'envoi
-    } catch (err) {
+    } catch (error) {
-      console.error("Erreur lors de l'envoi du message :", err);
+      throw new Error("Impossible de charger le ticket", { cause: error });
-      throw new Error("Impossible d'envoyer le message.");
     } 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) {
+    } catch {
-      console.error("Erreur lors de la récupération des tickets :", err);
       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/index.css

@@ -4,6 +4,8 @@
 @tailwind components;
 @tailwind utilities;
 
+@custom-variant dark (&:where(.dark, .dark *));
+
 /* --- VOS UTILITAIRES PERSONNALISÉS --- */
 @layer utilities {
   .scrollbar-hide {

src/pages/AccountSettings.tsx

@@ -1,91 +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="min-h-screen bg-slate-50 font-sans text-slate-900 selection:bg-blue-900 selection:text-white">
+    <div className="font-sans relative min-h-[calc(100vh-4rem)]">
-      
-      {/* Header */}
-      <header className="bg-white border-b border-slate-200 px-8 py-6">
-        <div className="max-w-7xl mx-auto flex flex-col sm:flex-row justify-between items-start sm:items-center space-y-4 sm:space-y-0">
-          <div>
-            <h1 className="text-2xl font-bold text-slate-900 tracking-tight">Paramètres du compte</h1>
-            <p className="text-sm text-slate-500 mt-1">Gestion de la sécurité et informations contractuelles</p>
-          </div>
-        </div>
-      </header>
-
       {/* Contenu Principal */}
-      <main className="max-w-7xl mx-auto px-8 py-8 space-y-8">
+      <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é */}
-          <div className="space-y-8">
+          <AccessWidget
-            <section className="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
+            user={user}
-              <h2 className="text-lg font-semibold text-slate-900 mb-4 border-b border-slate-100 pb-2 flex items-center">
+            isLoading={isLoading}
-                <svg className="w-5 h-5 mr-2 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg>
+            error={error}
-                Sécurité de l'accès
+          />
-              </h2>
-              
-              <div className="space-y-6">
-                {/* MFA Status */}
-                <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>
-                  </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>
-                </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 */}
-                <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">
-                    Modifier le mot de passe
-                  </button>
-                </div>
-              </div>
-            </section>
-          </div>
-
           {/* Colonne 2 : Organisation & Contrat */}
-          <div className="space-y-8">
+          <InformationWidget
-            <section className="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
+            user={user}
-              <h2 className="text-lg font-semibold text-slate-900 mb-4 border-b border-slate-100 pb-2 flex items-center">
+            company={company}
-                <svg className="w-5 h-5 mr-2 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" /></svg>
+            isLoading={isLoading}
-                Profil de l'Organisation
+            error={error}
-              </h2>
+          />
-              
-              <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>
-                </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>
-                </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>
-                    <span className="text-slate-700 font-medium">Couverture 24/7 (99.99%)</span>
-                  </dd>
-                </div>
-              </dl>
-            </section>
-          </div>
-
         </div>
-
       </main>
     </div>
   );

src/pages/DocumentVault.tsx

@@ -1,119 +1,32 @@
+import { Input } from '@/components/ui/Input';
+import PageHeader from '@/components/ui/PageHeader';
+import DocumentsWidget from '@/components/widgets/DocumentsWidget';
 import { useState } from 'react';
 
-// Données fictives pour le maquettage visuel
-const mockDocuments = [
-  { id: 'DOC-102', title: 'Rapport d\'Audit de Vulnérabilité Q2', category: 'Audit', date: '12 Juil. 2026', size: '2.4 MB', encrypted: true },
-  { id: 'DOC-101', title: 'Facture Infogérance - Juin 2026', category: 'Facture', date: '01 Juil. 2026', size: '1.1 MB', encrypted: true },
-  { id: 'DOC-095', title: 'Certificat de Conformité ISO 27001', category: 'Rapport de conformité', date: '15 Jan. 2026', size: '4.8 MB', encrypted: true }
-];
-
 export default function DocumentVault() {
   const [searchTerm, setSearchTerm] = useState('');
 
-  const getCategoryBadge = (category: string) => {
-    switch (category) {
-      case 'Audit': return 'bg-purple-50 text-purple-700 border-purple-200';
-      case 'Facture': return 'bg-slate-100 text-slate-700 border-slate-200';
-      case 'Rapport de conformité': return 'bg-emerald-50 text-emerald-700 border-emerald-200';
-      default: return 'bg-blue-50 text-blue-700 border-blue-200';
-    }
-  };
-
   return (
-    <div className="min-h-screen bg-slate-50 font-sans text-slate-900 selection:bg-blue-900 selection:text-white">
+    <div className="font-sans relative min-h-[calc(100vh-4rem)]">
-      
-      {/* Header du Coffre-Fort */}
-      <header className="bg-white border-b border-slate-200 px-8 py-6">
-        <div className="max-w-7xl mx-auto flex flex-col sm:flex-row justify-between items-start sm:items-center space-y-4 sm:space-y-0">
-          <div>
-            <h1 className="text-2xl font-bold text-slate-900 tracking-tight">Coffre-Fort Documentaire</h1>
-            <p className="text-sm text-slate-500 mt-1 flex items-center">
-              <svg className="w-4 h-4 mr-1.5 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
-              </svg>
-              Espace de stockage chiffré de bout en bout
-            </p>
-          </div>
-        </div>
-      </header>
 
       {/* Contenu Principal */}
-      <main className="max-w-7xl mx-auto px-8 py-8">
+      <main className="max-w-7xl mx-auto px-8 sm:px-8 space-y-6 m-4">
-        
+        <PageHeader
+          title='Coffre-Fort Documentaire'
+          description='Espace de stockage chiffré de bout en bout'>
+        </PageHeader>
+
         {/* Barre de recherche (Visuelle) */}
-        <div className="mb-6 flex">
+        <Input
-          <div className="relative flex-1 max-w-lg">
+          type="text"
-            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+          placeholder="Rechercher un document, une facture..."
-              <svg className="h-5 w-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          value={searchTerm}
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+          onChange={(e) => setSearchTerm(e.target.value)}
-              </svg>
+        />
-            </div>
-            <input
-              type="text"
-              placeholder="Rechercher un document, une facture..."
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              className="block w-full pl-10 pr-3 py-2 border border-slate-300 rounded-lg leading-5 bg-white placeholder-slate-400 focus:outline-none focus:ring-1 focus:ring-blue-900 focus:border-blue-900 sm:text-sm shadow-sm"
-            />
-          </div>
-        </div>
 
         {/* Liste des Documents (La Carte) */}
-        <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
+        <DocumentsWidget></DocumentsWidget>
-          <table className="min-w-full divide-y divide-slate-200">
-            <thead className="bg-slate-50">
-              <tr>
-                <th scope="col" className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
-                  Nom du fichier
-                </th>
-                <th scope="col" className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
-                  Catégorie
-                </th>
-                <th scope="col" className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">
-                  Ajouté le
-                </th>
-                <th scope="col" className="px-6 py-3 text-right text-xs font-semibold text-slate-500 uppercase tracking-wider">
-                  Action
-                </th>
-              </tr>
-            </thead>
-            <tbody className="bg-white divide-y divide-slate-200">
-              {mockDocuments.map((doc) => (
-                <tr key={doc.id} className="hover:bg-slate-50 transition-colors">
-                  <td className="px-6 py-4 whitespace-nowrap">
-                    <div className="flex items-center">
-                      <svg className="flex-shrink-0 h-6 w-6 text-slate-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                      </svg>
-                      <div>
-                        <div className="text-sm font-medium text-slate-900">{doc.title}</div>
-                        <div className="text-xs text-slate-500">{doc.size} • PDF</div>
-                      </div>
-                    </div>
-                  </td>
-                  <td className="px-6 py-4 whitespace-nowrap">
-                    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${getCategoryBadge(doc.category)}`}>
-                      {doc.category}
-                    </span>
-                  </td>
-                  <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">
-                    {doc.date}
-                  </td>
-                  <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                    <button className="text-blue-900 hover:text-blue-700 bg-blue-50 hover:bg-blue-100 px-3 py-1.5 rounded flex items-center justify-end ml-auto transition-colors">
-                      <svg className="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
-                      </svg>
-                      Télécharger
-                    </button>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-
       </main>
-    </div>
+    </div >
   );
 }

src/pages/Login.tsx

@@ -2,42 +2,32 @@ import { useLoginFlow } from '@/hooks/useLoginFlow';
 import { LocalLoginForm } from '@/components/auth/LocalLoginForm';
 import { MfaForm } from '@/components/auth/MfaForm';
 import { Card, CardContent } from '@/components/ui/Card';
+import LogoGise from '@/components/ui/LogoGise';
+import { Button } from '@/components/ui/Button';
+import { GlobeLock } from 'lucide-react';
+import Badge from '@/components/ui/Badge';
 
 interface LoginProps {
   onLoginSuccess: () => void;
 }
 
 export default function Login({ onLoginSuccess }: LoginProps) {
-  const { 
+  const {
-    step, isLoading, error, mfaConfig, 
+    step, isLoading, error, mfaConfig,
-    loginWithZitadel, loginWithLocal, verifyMfa, cancelMfa 
+    loginWithZitadel, loginWithLocal, verifyMfa, cancelMfa
   } = useLoginFlow(onLoginSuccess);
 
   return (
-    <div className="min-h-screen bg-slate-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8 font-sans selection:bg-blue-900 selection:text-white">
+    <div className="min-h-screen bg-[#e8e8e8] dark:bg-[#1e293b] flex flex-col justify-center py-12 sm:px-6 lg:px-8 font-sans selection:bg-blue-900 selection:text-white">
-      
+
       {/* HEADER LOGO */}
-      <div className="sm:mx-auto sm:w-full sm:max-w-md">
+      <LogoGise />
-        <div className="flex justify-center">
-          <div className="h-12 w-12 bg-blue-900 rounded-lg flex items-center justify-center shadow-sm border border-blue-800">
-            <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
-            </svg>
-          </div>
-        </div>
-        <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-slate-900">
-          AEGIS <span className="font-light text-slate-500">by GISE</span>
-        </h2>
-        <p className="mt-2 text-center text-sm text-slate-500 uppercase tracking-widest font-semibold">
-          Accès restreint
-        </p>
-      </div>
 
       {/* BOÎTE CENTRALE DÉCLINÉE AVEC NOTRE OBJET CARD */}
-      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
+      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md justify-center flex">
-        <Card className="shadow-sm border-slate-200">
+        <Card>
           <CardContent className="p-6 sm:p-10">
-            
+
             {/* AFFICHAGE DES ERREURS GLOBALES */}
             {error && (
               <div className="mb-6 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md text-sm font-medium animate-in fade-in slide-in-from-top-1">
@@ -47,32 +37,28 @@ export default function Login({ onLoginSuccess }: LoginProps) {
 
             {/* ROUTAGE INTERNE DES ÉTAPES */}
             {step === 1 ? (
-              <div className="space-y-6">
+              <div className="space-y-6 items-center">
-                <button
+                <Button
                   type="button"
                   onClick={loginWithZitadel}
                   disabled={isLoading}
-                  className="flex w-full justify-center items-center rounded-md border border-slate-300 bg-white py-2.5 px-4 text-sm font-semibold text-slate-700 shadow-sm hover:bg-slate-50 focus:outline-none transition-colors disabled:opacity-70 cursor-pointer"
+                  leftIcon={<GlobeLock className="w-5 h-5 mr-2 text-blue-900" />}>
-                >
-                  <svg className="w-5 h-5 mr-2 text-blue-900" fill="currentColor" viewBox="0 0 24 24">
-                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
-                  </svg>
                   {isLoading ? 'Connexion en cours...' : 'Connexion via GISE Identity'}
-                </button>
+                </Button>
 
                 <div className="relative">
                   <div className="absolute inset-0 flex items-center">
                     <div className="w-full border-t border-slate-200" />
                   </div>
                   <div className="relative flex justify-center text-sm">
-                    <span className="bg-white px-2 text-slate-400">Ou via vos identifiants locaux</span>
+                    <Badge name="Ou via authentification classique"></Badge>
                   </div>
                 </div>
 
                 <LocalLoginForm onSubmit={loginWithLocal} isLoading={isLoading} />
               </div>
             ) : (
-              <MfaForm 
+              <MfaForm
                 isFirstSetup={mfaConfig?.isFirstSetup || false}
                 qrUrl={mfaConfig?.qrUrl || ''}
                 isLoading={isLoading}

src/pages/ServiceDesk.tsx

@@ -7,15 +7,15 @@ export default function ServiceDesk() {
   const navigate = useNavigate();
 
   return (
-    <div className="bg-slate-50 font-sans text-slate-900 relative min-h-[calc(100vh-4rem)]">
+    <div className="font-sans relative min-h-[calc(100vh-4rem)]">
-      <main className="max-w-7xl mx-auto px-4 sm:px-8 py-8 space-y-6">
+      <main className="max-w-7xl mx-auto px-8 sm:px-8 space-y-6 m-4">
 
         {/* HEADER EXTRAIT */}
         <PageHeader 
           title="Centre de Support (Service Desk)"
           description="Canal de communication sécurisé avec vos experts GISE."
         >
-          <Button onClick={() => navigate('/support/new')}>
+          <Button className= "text-rose-500" onClick={() => navigate('/support/new')}>
             Ouvrir un ticket sécurisé
           </Button>
         </PageHeader>

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/Neumorphism.ts

@@ -3,21 +3,31 @@
 export const NEUMORPHISM = {
 
   // Reliefs au repos
-    lightShadow: "shadow-[6px_6px_12px_#c5c5c5,-6px_-6px_12px_#ffffff]",
+  lightShadow: "shadow-[6px_6px_12px_#c5c5c5,-6px_-6px_12px_#ffffff]",
-    darkShadow: "dark:shadow-[6px_6px_12px_#121926,-6px_-6px_12px_#2a3850]",
+  darkShadow: "dark:shadow-[6px_6px_12px_#121926,-6px_-6px_12px_#2a3850]",
 
- // Ombres Neumorphic quand on clique (enfoncé)
+  lightShadowHover: "hover:shadow-[6px_6px_12px_#c5c5c5,-6px_-6px_12px_#ffffff]",
-    lightActive: "active:shadow-[4px_4px_12px_#c5c5c5,-4px_-4px_12px_#ffffff]",
+  darkShadowHover: "dark:hover:shadow-[6px_6px_12px_#121926,-6px_-6px_12px_#2a3850]",
-    darkActive: "dark:active:shadow-[4px_4px_12px_#121926,-4px_-4px_12px_#2a3850]",
 
-    sizeStyles: {
+  // Ombres Neumorphic quand on clique (enfoncé)
-     sm: "px-5 py-2 text-sm rounded-md",
+  lightActive: "active:shadow-[4px_4px_12px_#c5c5c5,-4px_-4px_12px_#ffffff]",
-     md: "px-[1.7em] py-[0.7em] text-[18px] rounded-[0.5em]",
+  darkActive: "dark:active:shadow-[4px_4px_12px_#121926,-4px_-4px_12px_#2a3850]",
+
+
+  insetLightActive: "active:shadow-[inset_4px_4px_8px_#c5c5c5,inset_-4px_-4px_8px_#ffffff]",
+  insetDarkActive: "dark:active:shadow-[inset_4px_4px_8px_#121926,inset_-4px_-4px_8px_#2a3850]",
+
+  insetLightHover: "hover:shadow-[inset_4px_4px_8px_#c5c5c5,inset_-4px_-4px_8px_#ffffff]",
+  insetDarkHover: "dark:hover:shadow-[inset_4px_4px_8px_#121926,inset_-4px_-4px_8px_#2a3850]",
+
+  sizeStyles: {
+    sm: "px-5 py-2 text-sm rounded-md",
+    md: "px-[1.7em] py-[0.7em] text-[18px] rounded-[0.5em]",
     lg: "px-10 py-4 text-xl rounded-xl",
     icon: "p-3 rounded-lg",
-    },
+  },
   // Ombres du bouton ACTIF (effet enfoncé/creusé "inset")
-    insetLight: "!shadow-[inset_4px_4px_8px_#c5c5c5,inset_-4px_-4px_8px_#ffffff]",
+  insetLight: "shadow-[inset_4px_4px_8px_#c5c5c5,inset_-4px_-4px_8px_#ffffff]",
-    insetDark: "dark:!shadow-[inset_4px_4px_8px_#121926,inset_-4px_-4px_8px_#2a3850]",
+  insetDark: "dark:shadow-[inset_4px_4px_8px_#121926,inset_-4px_-4px_8px_#2a3850]",
 
-  } as const;
+} as const;

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/Document.ts

@@ -0,0 +1,11 @@
+export interface Document {
+    id: string;
+    collectionId: string; // <-- OBLIGATOIRE pour pb.files.getUrl()
+    collectionName: string; // (ex: 'aegis_documents_vault')
+    created: string;
+    updated: string;
+    title: string;
+    file: string; // Le nom du fichier généré par PocketBase (ex: 'rapport_7b3a.pdf')
+    category: string;
+    company?: string; // L'ID du client (Relation)
+}

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'),
+      '@': path.resolve(import.meta.dirname, './src'),
-      '@components': path.resolve(__dirname, './src/components'),
+      '@components': path.resolve(import.meta.dirname, './src/components'),
-      '@ui': path.resolve(__dirname, './src/components/ui'),
+      '@ui': path.resolve(import.meta.dirname, './src/components/ui'),
-      '@common': path.resolve(__dirname, './src/components/common'),
+      '@common': path.resolve(import.meta.dirname, './src/components/common'),
-      '@pages': path.resolve(__dirname, './src/pages'),
+      '@pages': path.resolve(import.meta.dirname, './src/pages'),
-      '@hooks': path.resolve(__dirname, './src/hooks'),
+      '@hooks': path.resolve(import.meta.dirname, './src/hooks'),
-      '@layouts': path.resolve(__dirname, './src/layouts'),
+      '@layouts': path.resolve(import.meta.dirname, './src/layouts'),
-      '@features': path.resolve(__dirname, './src/features'),
+      '@features': path.resolve(import.meta.dirname, './src/features'),
-      '@services': path.resolve(__dirname, './src/services'),
+      '@services': path.resolve(import.meta.dirname, './src/services'),
-      '@utils': path.resolve(__dirname, './src/utils'),
+      '@utils': path.resolve(import.meta.dirname, './src/utils'),
-      '@assets': path.resolve(__dirname, './src/assets'),
+      '@assets': path.resolve(import.meta.dirname, './src/assets'),
-      '@data': path.resolve(__dirname, './src/data'),
+      '@data': path.resolve(import.meta.dirname, './src/data'),
-      '@widgets': path.resolve(__dirname, './src/components/widgets'),
+      '@widgets': path.resolve(import.meta.dirname, './src/components/widgets'),
-      '@styles': path.resolve(__dirname, './src/styles'),
+      '@styles': path.resolve(import.meta.dirname, './src/styles'),
     }
   }
 })