From 196bd7103d6952b73d46685592ddbd8680cd2e3d Mon Sep 17 00:00:00 2001
From: Manus <dev-agent@manus.ai>
Date: Fri, 13 Feb 2026 04:07:35 -0500
Subject: [PATCH] =?UTF-8?q?Checkpoint:=20Modernisation=20de=20l'ergonomie?=
 =?UTF-8?q?=20des=20pages=20Administration=20des=20listes=20et=20Param?=
 =?UTF-8?q?=C3=A8tres=20d'import=20avec=20ic=C3=B4nes=20color=C3=A9es,=20d?=
 =?UTF-8?q?=C3=A9grad=C3=A9s,=20badges=20de=20statut,=20et=20animations?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/pages/ImportSettings.tsx | 460 ++++++++++++++--------------
 client/src/pages/ListsAdmin.tsx     | 215 +++++++++----
 todo.md                             |  10 +
 3 files changed, 400 insertions(+), 285 deletions(-)

diff --git a/client/src/pages/ImportSettings.tsx b/client/src/pages/ImportSettings.tsx
index b585c68..7c6e955 100644
--- a/client/src/pages/ImportSettings.tsx
+++ b/client/src/pages/ImportSettings.tsx
@@ -5,8 +5,9 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
+import { Badge } from "@/components/ui/badge";
 import { toast } from "sonner";
-import { Loader2, Save, Upload, FolderOpen, Mail, Play, Square } from "lucide-react";
+import { Loader2, Save, Upload, FolderOpen, Mail, Play, Square, Download, Inbox, CheckCircle2 } from "lucide-react";
 import DashboardLayout from "@/components/DashboardLayout";
 
 export default function ImportSettings() {
@@ -73,53 +74,66 @@ export default function ImportSettings() {
         exportFolder: exportFolder || null,
       });
 
-      toast.success("Paramètres enregistrés", {
-        description: "Vos paramètres de réception ont été mis à jour avec succès.",
-      });
+      toast.success("Paramètres enregistrés avec succès");
     } catch (error) {
-      toast.error("Erreur", {
-        description: "Impossible d'enregistrer les paramètres. Veuillez réessayer.",
-      });
+      toast.error("Impossible d'enregistrer les paramètres");
     }
   };
 
   if (isLoading) {
     return (
-      <div className="flex items-center justify-center h-[calc(100vh-200px)]">
-        <Loader2 className="h-8 w-8 animate-spin text-primary" />
-      </div>
+      <DashboardLayout>
+        <div className="flex flex-col items-center justify-center h-64 gap-4">
+          <Loader2 className="w-12 h-12 animate-spin text-primary" />
+          <p className="text-muted-foreground">Chargement des paramètres...</p>
+        </div>
+      </DashboardLayout>
     );
   }
 
   return (
     <DashboardLayout>
-      <div className="container max-w-4xl py-8">
-      <div className="mb-8">
-        <h1 className="text-3xl font-bold mb-2">Paramètres de réception</h1>
-        <p className="text-muted-foreground">
-          Configurez les différentes méthodes d'importation de factures
-        </p>
-      </div>
+      <div className="max-w-5xl space-y-8">
+        {/* Header */}
+        <div className="space-y-2">
+          <div className="flex items-center gap-3">
+            <div className="p-3 bg-gradient-to-br from-blue-500 to-cyan-600 rounded-xl shadow-lg">
+              <Inbox className="w-7 h-7 text-white" />
+            </div>
+            <div>
+              <h1 className="text-4xl font-bold bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent">
+                Paramètres de réception
+              </h1>
+              <p className="text-muted-foreground mt-1">
+                Configurez les différentes méthodes d'importation de factures
+              </p>
+            </div>
+          </div>
+        </div>
 
-      <div className="space-y-6">
         {/* Manual Import */}
-        <Card>
-          <CardHeader>
-            <div className="flex items-center gap-3">
-              <div className="p-2 bg-primary/10 rounded-lg">
-                <Upload className="h-5 w-5 text-primary" />
-              </div>
-              <div>
-                <CardTitle>Import manuel</CardTitle>
-                <CardDescription>
-                  Autoriser l'upload manuel de fichiers PDF via l'interface
-                </CardDescription>
+        <Card className="border-2 hover:border-primary/50 transition-colors">
+          <CardHeader className="bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-950/20 dark:to-pink-950/20 border-b">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <div className="p-2 bg-purple-500 rounded-lg">
+                  <Upload className="w-6 h-6 text-white" />
+                </div>
+                <div>
+                  <CardTitle className="text-xl">Import manuel</CardTitle>
+                  <CardDescription className="mt-1">
+                    Autoriser l'upload manuel de fichiers PDF via l'interface
+                  </CardDescription>
+                </div>
               </div>
+              <Badge variant={manualImportEnabled ? "default" : "secondary"} className="text-sm">
+                {manualImportEnabled ? "Activé" : "Désactivé"}
+              </Badge>
             </div>
           </CardHeader>
-          <CardContent>
-            <div className="flex items-center justify-between">
-              <Label htmlFor="manual-import" className="text-base">
+          <CardContent className="pt-6">
+            <div className="flex items-center justify-between p-4 bg-muted/30 rounded-lg">
+              <Label htmlFor="manual-import" className="text-base font-medium">
                 Activer l'import manuel
               </Label>
               <Switch
@@ -132,23 +146,28 @@ export default function ImportSettings() {
         </Card>
 
         {/* Automatic Import from Folder */}
-        <Card>
-          <CardHeader>
-            <div className="flex items-center gap-3">
-              <div className="p-2 bg-blue-500/10 rounded-lg">
-                <FolderOpen className="h-5 w-5 text-blue-500" />
-              </div>
-              <div>
-                <CardTitle>Import automatique depuis dossier</CardTitle>
-                <CardDescription>
-                  Surveiller un dossier et importer automatiquement les nouveaux fichiers PDF
-                </CardDescription>
+        <Card className="border-2 hover:border-primary/50 transition-colors">
+          <CardHeader className="bg-gradient-to-r from-blue-50 to-cyan-50 dark:from-blue-950/20 dark:to-cyan-950/20 border-b">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <div className="p-2 bg-blue-500 rounded-lg">
+                  <FolderOpen className="w-6 h-6 text-white" />
+                </div>
+                <div>
+                  <CardTitle className="text-xl">Import automatique depuis dossier</CardTitle>
+                  <CardDescription className="mt-1">
+                    Surveiller un dossier et importer automatiquement les nouveaux fichiers PDF
+                  </CardDescription>
+                </div>
               </div>
+              <Badge variant={autoImportEnabled ? "default" : "secondary"} className="text-sm">
+                {autoImportEnabled ? "Activé" : "Désactivé"}
+              </Badge>
             </div>
           </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="flex items-center justify-between">
-              <Label htmlFor="auto-import" className="text-base">
+          <CardContent className="space-y-6 pt-6">
+            <div className="flex items-center justify-between p-4 bg-muted/30 rounded-lg">
+              <Label htmlFor="auto-import" className="text-base font-medium">
                 Activer l'import automatique
               </Label>
               <Switch
@@ -159,15 +178,16 @@ export default function ImportSettings() {
             </div>
 
             {autoImportEnabled && (
-              <>
+              <div className="space-y-4 p-4 bg-blue-50/50 dark:bg-blue-950/10 rounded-lg border-2 border-blue-200 dark:border-blue-800">
                 <div className="space-y-2">
-                  <Label htmlFor="source-path">Chemin du dossier source</Label>
+                  <Label htmlFor="source-path" className="text-base font-medium">Chemin du dossier source</Label>
                   <Input
                     id="source-path"
                     type="text"
                     placeholder="/chemin/vers/dossier/factures"
                     value={autoImportSourcePath}
                     onChange={(e) => setAutoImportSourcePath(e.target.value)}
+                    className="h-11"
                   />
                   <p className="text-sm text-muted-foreground">
                     Chemin absolu du dossier à surveiller pour les nouveaux fichiers PDF
@@ -175,107 +195,104 @@ export default function ImportSettings() {
                 </div>
 
                 <div className="space-y-2">
-                  <Label htmlFor="auto-frequency">Fréquence de lecture (minutes)</Label>
+                  <Label htmlFor="auto-frequency" className="text-base font-medium">Fréquence de lecture (minutes)</Label>
                   <Input
                     id="auto-frequency"
                     type="number"
                     min="1"
                     value={autoImportFrequency}
                     onChange={(e) => setAutoImportFrequency(parseInt(e.target.value) || 60)}
+                    className="h-11"
                   />
                   <p className="text-sm text-muted-foreground">
-                  Intervalle de temps entre chaque vérification du dossier (minimum: 1 minute)
-                </p>
-              </div>
+                    Intervalle de temps entre chaque vérification du dossier (minimum: 1 minute)
+                  </p>
+                </div>
 
-              {/* Service Control Buttons */}
-              <div className="flex gap-2 pt-4 border-t">
-                {folderServiceStatus?.isRunning ? (
-                  <Button
-                    variant="destructive"
-                    onClick={async () => {
-                      try {
-                        await stopFolderServiceMutation.mutateAsync();
-                        await utils.folderImportService.status.invalidate();
-                        toast.success("Service arrêté", {
-                          description: "L'import automatique depuis dossier a été arrêté.",
-                        });
-                      } catch (error) {
-                        toast.error("Erreur", {
-                          description: "Impossible d'arrêter le service.",
-                        });
-                      }
-                    }}
-                    disabled={stopFolderServiceMutation.isPending}
-                  >
-                    {stopFolderServiceMutation.isPending ? (
-                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                    ) : (
-                      <Square className="mr-2 h-4 w-4" />
-                    )}
-                    Arrêter le service
-                  </Button>
-                ) : (
-                  <Button
-                    onClick={async () => {
+                {/* Service Control Buttons */}
+                <div className="flex gap-3 pt-4 border-t border-blue-200 dark:border-blue-800">
+                  {folderServiceStatus?.isRunning ? (
+                    <>
+                      <Button
+                        variant="destructive"
+                        onClick={async () => {
+                          try {
+                            await stopFolderServiceMutation.mutateAsync();
+                            await utils.folderImportService.status.invalidate();
+                            toast.success("Service arrêté");
+                          } catch (error) {
+                            toast.error("Impossible d'arrêter le service");
+                          }
+                        }}
+                        disabled={stopFolderServiceMutation.isPending}
+                      >
+                        {stopFolderServiceMutation.isPending ? (
+                          <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+                        ) : (
+                          <Square className="mr-2 h-5 w-5" />
+                        )}
+                        Arrêter le service
+                      </Button>
+                      <Badge variant="default" className="flex items-center gap-2 px-4 bg-green-500">
+                        <span className="w-2 h-2 bg-white rounded-full animate-pulse" />
+                        Service actif
+                      </Badge>
+                    </>
+                  ) : (
+                    <Button
+                      onClick={async () => {
                         try {
                           const result = await startFolderServiceMutation.mutateAsync();
                           if (result.success) {
                             await utils.folderImportService.status.invalidate();
-                            toast.success("Service démarré", {
-                              description: "L'import automatique depuis dossier est maintenant actif.",
-                            });
+                            toast.success("Service démarré");
                           } else {
-                          toast.error("Erreur", {
-                            description: "Impossible de démarrer le service. Vérifiez la configuration.",
-                          });
+                            toast.error("Impossible de démarrer le service");
+                          }
+                        } catch (error) {
+                          toast.error("Impossible de démarrer le service");
                         }
-                      } catch (error) {
-                        toast.error("Erreur", {
-                          description: "Impossible de démarrer le service.",
-                        });
-                      }
-                    }}
-                    disabled={!autoImportEnabled || startFolderServiceMutation.isPending}
-                  >
-                    {startFolderServiceMutation.isPending ? (
-                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                    ) : (
-                      <Play className="mr-2 h-4 w-4" />
-                    )}
-                    Démarrer le service
-                  </Button>
-                )}
-                {folderServiceStatus?.isRunning && (
-                  <span className="flex items-center text-sm text-green-600">
-                    <span className="w-2 h-2 bg-green-600 rounded-full mr-2 animate-pulse" />
-                    Service actif
-                  </span>
-                )}
+                      }}
+                      disabled={!autoImportEnabled || startFolderServiceMutation.isPending}
+                      className="bg-blue-500 hover:bg-blue-600"
+                    >
+                      {startFolderServiceMutation.isPending ? (
+                        <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+                      ) : (
+                        <Play className="mr-2 h-5 w-5" />
+                      )}
+                      Démarrer le service
+                    </Button>
+                  )}
+                </div>
               </div>
-              </>
             )}
           </CardContent>
         </Card>
 
         {/* Email Import */}
-        <Card>
-          <CardHeader>
-            <div className="flex items-center gap-3">
-              <div className="p-2 bg-green-500/10 rounded-lg">
-                <Mail className="h-5 w-5 text-green-500" />
-              </div>
-              <div>
-                <CardTitle>Import par email</CardTitle>
-                <CardDescription>
-                  Récupérer automatiquement les factures reçues par email
-                </CardDescription>
+        <Card className="border-2 hover:border-primary/50 transition-colors">
+          <CardHeader className="bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-950/20 dark:to-emerald-950/20 border-b">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <div className="p-2 bg-green-500 rounded-lg">
+                  <Mail className="w-6 h-6 text-white" />
+                </div>
+                <div>
+                  <CardTitle className="text-xl">Import par email</CardTitle>
+                  <CardDescription className="mt-1">
+                    Récupérer automatiquement les factures reçues par email
+                  </CardDescription>
+                </div>
               </div>
+              <Badge variant={emailImportEnabled ? "default" : "secondary"} className="text-sm">
+                {emailImportEnabled ? "Activé" : "Désactivé"}
+              </Badge>
             </div>
           </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="flex items-center justify-between">
-              <Label htmlFor="email-import" className="text-base">
+          <CardContent className="space-y-6 pt-6">
+            <div className="flex items-center justify-between p-4 bg-muted/30 rounded-lg">
+              <Label htmlFor="email-import" className="text-base font-medium">
                 Activer l'import par email
               </Label>
               <Switch
@@ -286,15 +303,16 @@ export default function ImportSettings() {
             </div>
 
             {emailImportEnabled && (
-              <>
+              <div className="space-y-4 p-4 bg-green-50/50 dark:bg-green-950/10 rounded-lg border-2 border-green-200 dark:border-green-800">
                 <div className="space-y-2">
-                  <Label htmlFor="email-address">Adresse email</Label>
+                  <Label htmlFor="email-address" className="text-base font-medium">Adresse email</Label>
                   <Input
                     id="email-address"
                     type="email"
                     placeholder="factures@votreentreprise.com"
                     value={emailImportAddress}
                     onChange={(e) => setEmailImportAddress(e.target.value)}
+                    className="h-11"
                   />
                   <p className="text-sm text-muted-foreground">
                     Adresse email à surveiller pour les factures
@@ -302,28 +320,30 @@ export default function ImportSettings() {
                 </div>
 
                 <div className="space-y-2">
-                  <Label htmlFor="email-password">Mot de passe</Label>
+                  <Label htmlFor="email-password" className="text-base font-medium">Mot de passe</Label>
                   <Input
                     id="email-password"
                     type="password"
                     placeholder="••••••••"
                     value={emailImportPassword}
                     onChange={(e) => setEmailImportPassword(e.target.value)}
+                    className="h-11"
                   />
                   <p className="text-sm text-muted-foreground">
                     Mot de passe du compte email (stocké de manière sécurisée)
                   </p>
                 </div>
 
-                <div className="grid grid-cols-2 gap-4">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                   <div className="space-y-2">
-                    <Label htmlFor="email-host">Serveur IMAP</Label>
+                    <Label htmlFor="email-host" className="text-base font-medium">Serveur IMAP</Label>
                     <Input
                       id="email-host"
                       type="text"
                       placeholder="imap.gmail.com"
                       value={emailImportHost}
                       onChange={(e) => setEmailImportHost(e.target.value)}
+                      className="h-11"
                     />
                     <p className="text-sm text-muted-foreground">
                       Adresse du serveur IMAP
@@ -331,7 +351,7 @@ export default function ImportSettings() {
                   </div>
 
                   <div className="space-y-2">
-                    <Label htmlFor="email-port">Port IMAP</Label>
+                    <Label htmlFor="email-port" className="text-base font-medium">Port IMAP</Label>
                     <Input
                       id="email-port"
                       type="number"
@@ -339,6 +359,7 @@ export default function ImportSettings() {
                       max="65535"
                       value={emailImportPort}
                       onChange={(e) => setEmailImportPort(parseInt(e.target.value) || 993)}
+                      className="h-11"
                     />
                     <p className="text-sm text-muted-foreground">
                       Port SSL (993 par défaut)
@@ -347,13 +368,14 @@ export default function ImportSettings() {
                 </div>
 
                 <div className="space-y-2">
-                  <Label htmlFor="email-frequency">Fréquence de lecture (minutes)</Label>
+                  <Label htmlFor="email-frequency" className="text-base font-medium">Fréquence de lecture (minutes)</Label>
                   <Input
                     id="email-frequency"
                     type="number"
                     min="1"
                     value={emailImportFrequency}
                     onChange={(e) => setEmailImportFrequency(parseInt(e.target.value) || 30)}
+                    className="h-11"
                   />
                   <p className="text-sm text-muted-foreground">
                     Intervalle de temps entre chaque vérification des emails (minimum: 1 minute)
@@ -361,32 +383,60 @@ export default function ImportSettings() {
                 </div>
 
                 {/* Service Control Buttons */}
-                <div className="flex gap-2 pt-4 border-t">
+                <div className="flex flex-wrap gap-3 pt-4 border-t border-green-200 dark:border-green-800">
                   {emailServiceStatus?.isRunning ? (
-                    <Button
-                      variant="destructive"
-                      onClick={async () => {
-                        try {
-                          await stopEmailServiceMutation.mutateAsync();
-                          await utils.emailImportService.status.invalidate();
-                          toast.success("Service arrêté", {
-                            description: "L'import automatique par email a été arrêté.",
-                          });
-                        } catch (error) {
-                          toast.error("Erreur", {
-                            description: "Impossible d'arrêter le service.",
-                          });
-                        }
-                      }}
-                      disabled={stopEmailServiceMutation.isPending}
-                    >
-                      {stopEmailServiceMutation.isPending ? (
-                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                      ) : (
-                        <Square className="mr-2 h-4 w-4" />
-                      )}
-                      Arrêter le service
-                    </Button>
+                    <>
+                      <Button
+                        variant="destructive"
+                        onClick={async () => {
+                          try {
+                            await stopEmailServiceMutation.mutateAsync();
+                            await utils.emailImportService.status.invalidate();
+                            toast.success("Service arrêté");
+                          } catch (error) {
+                            toast.error("Impossible d'arrêter le service");
+                          }
+                        }}
+                        disabled={stopEmailServiceMutation.isPending}
+                      >
+                        {stopEmailServiceMutation.isPending ? (
+                          <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+                        ) : (
+                          <Square className="mr-2 h-5 w-5" />
+                        )}
+                        Arrêter le service
+                      </Button>
+                      <Button
+                        variant="outline"
+                        onClick={async () => {
+                          try {
+                            toast.info("Vérification en cours...");
+                            const result = await checkNowEmailMutation.mutateAsync();
+                            if (result.success) {
+                              await utils.importLogs.getByUser.invalidate();
+                              toast.success(result.message);
+                            } else {
+                              toast.error(result.message);
+                            }
+                          } catch (error: any) {
+                            toast.error("Impossible de vérifier les emails");
+                          }
+                        }}
+                        disabled={checkNowEmailMutation.isPending}
+                        className="border-green-300 hover:bg-green-50 dark:hover:bg-green-950/20"
+                      >
+                        {checkNowEmailMutation.isPending ? (
+                          <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+                        ) : (
+                          <CheckCircle2 className="mr-2 h-5 w-5" />
+                        )}
+                        Vérifier maintenant
+                      </Button>
+                      <Badge variant="default" className="flex items-center gap-2 px-4 bg-green-500">
+                        <span className="w-2 h-2 bg-white rounded-full animate-pulse" />
+                        Service actif
+                      </Badge>
+                    </>
                   ) : (
                     <Button
                       onClick={async () => {
@@ -394,98 +444,56 @@ export default function ImportSettings() {
                           const result = await startEmailServiceMutation.mutateAsync();
                           if (result.success) {
                             await utils.emailImportService.status.invalidate();
-                            toast.success("Service démarré", {
-                              description: "L'import automatique par email est maintenant actif.",
-                            });
+                            toast.success("Service démarré");
                           } else {
-                            toast.error("Erreur", {
-                              description: "Impossible de démarrer le service. Vérifiez la configuration.",
-                            });
+                            toast.error("Impossible de démarrer le service");
                           }
                         } catch (error) {
-                          toast.error("Erreur", {
-                            description: "Impossible de démarrer le service.",
-                          });
+                          toast.error("Impossible de démarrer le service");
                         }
                       }}
                       disabled={!emailImportEnabled || startEmailServiceMutation.isPending}
+                      className="bg-green-500 hover:bg-green-600"
                     >
                       {startEmailServiceMutation.isPending ? (
-                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                        <Loader2 className="mr-2 h-5 w-5 animate-spin" />
                       ) : (
-                        <Play className="mr-2 h-4 w-4" />
+                        <Play className="mr-2 h-5 w-5" />
                       )}
                       Démarrer le service
                     </Button>
                   )}
-                  {emailServiceStatus?.isRunning && (
-                    <span className="flex items-center text-sm text-green-600">
-                      <span className="w-2 h-2 bg-green-600 rounded-full mr-2 animate-pulse" />
-                      Service actif
-                    </span>
-                  )}
-                  
-                  {emailServiceStatus?.isRunning && (
-                    <Button
-                      variant="outline"
-                      onClick={async () => {
-                        try {
-                          toast.info("Vérification en cours...", {
-                            description: "Connexion au serveur IMAP et recherche de nouveaux emails.",
-                          });
-                          const result = await checkNowEmailMutation.mutateAsync();
-                          if (result.success) {
-                            await utils.importLogs.getByUser.invalidate();
-                            toast.success("Vérification terminée", {
-                              description: result.message,
-                            });
-                          } else {
-                            toast.error("Erreur", {
-                              description: result.message,
-                            });
-                          }
-                        } catch (error: any) {
-                          toast.error("Erreur", {
-                            description: error.message || "Impossible de vérifier les emails.",
-                          });
-                        }
-                      }}
-                      disabled={checkNowEmailMutation.isPending}
-                    >
-                      {checkNowEmailMutation.isPending ? (
-                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                      ) : (
-                        <Mail className="mr-2 h-4 w-4" />
-                      )}
-                      Vérifier maintenant
-                    </Button>
-                  )}
                 </div>
-              </>
+              </div>
             )}
           </CardContent>
         </Card>
 
         {/* Export Folder */}
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <FolderOpen className="h-5 w-5" />
-              Dossier d'export
-            </CardTitle>
-            <CardDescription>
-              Configurez le dossier de destination pour l'export des factures
-            </CardDescription>
+        <Card className="border-2 hover:border-primary/50 transition-colors">
+          <CardHeader className="bg-gradient-to-r from-orange-50 to-amber-50 dark:from-orange-950/20 dark:to-amber-950/20 border-b">
+            <div className="flex items-center gap-3">
+              <div className="p-2 bg-orange-500 rounded-lg">
+                <Download className="w-6 h-6 text-white" />
+              </div>
+              <div>
+                <CardTitle className="text-xl">Dossier d'export</CardTitle>
+                <CardDescription className="mt-1">
+                  Configurez le dossier de destination pour l'export des factures
+                </CardDescription>
+              </div>
+            </div>
           </CardHeader>
-          <CardContent className="space-y-4">
+          <CardContent className="space-y-4 pt-6">
             <div className="space-y-2">
-              <Label htmlFor="exportFolder">Chemin du dossier d'export</Label>
+              <Label htmlFor="exportFolder" className="text-base font-medium">Chemin du dossier d'export</Label>
               <Input
                 id="exportFolder"
                 type="text"
                 placeholder="/chemin/vers/dossier/export"
                 value={exportFolder}
                 onChange={(e) => setExportFolder(e.target.value)}
+                className="h-11"
               />
               <p className="text-sm text-muted-foreground">
                 Spécifiez le chemin absolu du dossier où les factures seront exportées
@@ -495,27 +503,27 @@ export default function ImportSettings() {
         </Card>
 
         {/* Save Button */}
-        <div className="flex justify-end">
+        <div className="flex justify-end pb-8">
           <Button
             onClick={handleSave}
             disabled={updateMutation.isPending}
             size="lg"
+            className="bg-gradient-to-r from-blue-500 to-cyan-600 hover:from-blue-600 hover:to-cyan-700 text-white shadow-lg"
           >
             {updateMutation.isPending ? (
               <>
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                <Loader2 className="mr-2 h-5 w-5 animate-spin" />
                 Enregistrement...
               </>
             ) : (
               <>
-                <Save className="mr-2 h-4 w-4" />
+                <Save className="mr-2 h-5 w-5" />
                 Enregistrer les paramètres
               </>
             )}
           </Button>
         </div>
       </div>
-      </div>
     </DashboardLayout>
   );
 }
diff --git a/client/src/pages/ListsAdmin.tsx b/client/src/pages/ListsAdmin.tsx
index 9516409..67472e7 100644
--- a/client/src/pages/ListsAdmin.tsx
+++ b/client/src/pages/ListsAdmin.tsx
@@ -3,9 +3,9 @@ import { trpc } from "@/lib/trpc";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
 import { toast } from "sonner";
-import { Loader2, Plus, Trash2, Settings } from "lucide-react";
+import { Loader2, Plus, Trash2, List, Building2, Calculator, Sparkles } from "lucide-react";
 import DashboardLayout from "@/components/DashboardLayout";
 import {
   AlertDialog,
@@ -36,7 +36,7 @@ export default function ListsAdmin() {
 
   const handleCreateDepartment = async () => {
     if (!newDepartment.trim()) {
-      toast.error("Erreur", { description: "Le nom ne peut pas être vide" });
+      toast.error("Le nom ne peut pas être vide");
       return;
     }
     
@@ -44,15 +44,15 @@ export default function ListsAdmin() {
       await createDepartmentMutation.mutateAsync({ name: newDepartment.trim() });
       await utils.departments.getByUser.invalidate();
       setNewDepartment("");
-      toast.success("Service ajouté", { description: `"${newDepartment}" a été ajouté à la liste` });
+      toast.success(`Service "${newDepartment}" ajouté avec succès`);
     } catch (error: any) {
-      toast.error("Erreur", { description: error.message || "Impossible d'ajouter le service" });
+      toast.error(error.message || "Impossible d'ajouter le service");
     }
   };
 
   const handleCreateAllocation = async () => {
     if (!newAllocation.trim()) {
-      toast.error("Erreur", { description: "Le nom ne peut pas être vide" });
+      toast.error("Le nom ne peut pas être vide");
       return;
     }
     
@@ -60,9 +60,9 @@ export default function ListsAdmin() {
       await createAllocationMutation.mutateAsync({ name: newAllocation.trim() });
       await utils.accountingAllocations.getByUser.invalidate();
       setNewAllocation("");
-      toast.success("Ventilation ajoutée", { description: `"${newAllocation}" a été ajoutée à la liste` });
+      toast.success(`Ventilation "${newAllocation}" ajoutée avec succès`);
     } catch (error: any) {
-      toast.error("Erreur", { description: error.message || "Impossible d'ajouter la ventilation" });
+      toast.error(error.message || "Impossible d'ajouter la ventilation");
     }
   };
 
@@ -82,9 +82,9 @@ export default function ListsAdmin() {
         await deleteAllocationMutation.mutateAsync({ id: itemToDelete.id });
         await utils.accountingAllocations.getByUser.invalidate();
       }
-      toast.success("Supprimé", { description: `"${itemToDelete.name}" a été supprimé` });
+      toast.success(`"${itemToDelete.name}" supprimé avec succès`);
     } catch (error: any) {
-      toast.error("Erreur", { description: error.message || "Impossible de supprimer" });
+      toast.error(error.message || "Impossible de supprimer");
     } finally {
       setDeleteDialogOpen(false);
       setItemToDelete(null);
@@ -94,36 +94,91 @@ export default function ListsAdmin() {
   if (loadingDepartments || loadingAllocations) {
     return (
       <DashboardLayout>
-        <div className="flex items-center justify-center h-64">
-          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+        <div className="flex flex-col items-center justify-center h-64 gap-4">
+          <Loader2 className="w-12 h-12 animate-spin text-primary" />
+          <p className="text-muted-foreground">Chargement des listes...</p>
         </div>
       </DashboardLayout>
     );
   }
 
+  const departmentCount = departments?.length || 0;
+  const allocationCount = allocations?.length || 0;
+
   return (
     <DashboardLayout>
-      <div className="space-y-6">
-        <div>
-          <h1 className="text-3xl font-bold tracking-tight flex items-center gap-3">
-            <Settings className="h-8 w-8" />
-            Administration des listes
-          </h1>
-          <p className="text-muted-foreground mt-2">
-            Gérez les listes de valeurs pour les champs métier des factures
-          </p>
+      <div className="max-w-5xl space-y-8">
+        {/* Header */}
+        <div className="space-y-2">
+          <div className="flex items-center gap-3">
+            <div className="p-3 bg-gradient-to-br from-purple-500 to-pink-600 rounded-xl shadow-lg">
+              <List className="w-7 h-7 text-white" />
+            </div>
+            <div>
+              <h1 className="text-4xl font-bold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
+                Administration des listes
+              </h1>
+              <p className="text-muted-foreground mt-1">
+                Gérez les listes de valeurs pour les champs métier des factures
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Statistics */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="p-4 bg-gradient-to-r from-blue-50 to-cyan-50 dark:from-blue-950/20 dark:to-cyan-950/20 rounded-lg border border-blue-200 dark:border-blue-800">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <div className="p-2 bg-blue-500 rounded-lg">
+                  <Building2 className="w-5 h-5 text-white" />
+                </div>
+                <div>
+                  <p className="text-sm text-muted-foreground">Services</p>
+                  <p className="text-2xl font-bold text-blue-900 dark:text-blue-100">{departmentCount}</p>
+                </div>
+              </div>
+              <Badge variant="secondary" className="text-sm">
+                Actif{departmentCount > 1 ? 's' : ''}
+              </Badge>
+            </div>
+          </div>
+
+          <div className="p-4 bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-950/20 dark:to-emerald-950/20 rounded-lg border border-green-200 dark:border-green-800">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <div className="p-2 bg-green-500 rounded-lg">
+                  <Calculator className="w-5 h-5 text-white" />
+                </div>
+                <div>
+                  <p className="text-sm text-muted-foreground">Ventilations</p>
+                  <p className="text-2xl font-bold text-green-900 dark:text-green-100">{allocationCount}</p>
+                </div>
+              </div>
+              <Badge variant="secondary" className="text-sm">
+                Active{allocationCount > 1 ? 's' : ''}
+              </Badge>
+            </div>
+          </div>
         </div>
 
         {/* Department List */}
-        <Card>
-          <CardHeader>
-            <CardTitle>Service concerné</CardTitle>
-            <CardDescription>
-              Gérez la liste des services disponibles pour la classification des factures
-            </CardDescription>
+        <Card className="border-2 hover:border-primary/50 transition-colors">
+          <CardHeader className="bg-gradient-to-r from-blue-50 to-cyan-50 dark:from-blue-950/20 dark:to-cyan-950/20 border-b">
+            <div className="flex items-center gap-3">
+              <div className="p-2 bg-blue-500 rounded-lg">
+                <Building2 className="w-6 h-6 text-white" />
+              </div>
+              <div>
+                <CardTitle className="text-xl">Service concerné</CardTitle>
+                <CardDescription className="mt-1">
+                  Gérez la liste des services disponibles pour la classification des factures
+                </CardDescription>
+              </div>
+            </div>
           </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="flex gap-2">
+          <CardContent className="space-y-6 pt-6">
+            <div className="flex gap-3">
               <div className="flex-1">
                 <Input
                   placeholder="Nouveau service (ex: INFORMATIQUE)"
@@ -134,58 +189,80 @@ export default function ListsAdmin() {
                       handleCreateDepartment();
                     }
                   }}
+                  className="h-11"
                 />
               </div>
               <Button
                 onClick={handleCreateDepartment}
                 disabled={createDepartmentMutation.isPending || !newDepartment.trim()}
+                size="lg"
+                className="bg-blue-500 hover:bg-blue-600"
               >
                 {createDepartmentMutation.isPending ? (
-                  <Loader2 className="h-4 w-4 animate-spin" />
+                  <Loader2 className="h-5 w-5 animate-spin" />
                 ) : (
-                  <Plus className="h-4 w-4" />
+                  <Plus className="h-5 w-5" />
                 )}
                 <span className="ml-2">Ajouter</span>
               </Button>
             </div>
 
-            <div className="space-y-2">
+            <div className="space-y-3">
               {departments && departments.length > 0 ? (
                 departments.map((dept) => (
                   <div
                     key={dept.id}
-                    className="flex items-center justify-between p-3 border rounded-lg hover:bg-accent/50 transition-colors"
+                    className="group flex items-center justify-between p-4 border-2 rounded-lg hover:border-blue-300 hover:bg-blue-50/50 dark:hover:bg-blue-950/20 transition-all"
                   >
-                    <span className="font-medium">{dept.name}</span>
+                    <div className="flex items-center gap-3">
+                      <div className="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-lg group-hover:bg-blue-200 dark:group-hover:bg-blue-900/50 transition-colors">
+                        <Building2 className="h-4 w-4 text-blue-600 dark:text-blue-400" />
+                      </div>
+                      <span className="font-semibold text-lg">{dept.name}</span>
+                    </div>
                     <Button
                       variant="ghost"
                       size="sm"
                       onClick={() => confirmDelete("department", dept.id, dept.name)}
                       disabled={deleteDepartmentMutation.isPending}
+                      className="opacity-0 group-hover:opacity-100 transition-opacity hover:bg-red-100 dark:hover:bg-red-900/30"
                     >
-                      <Trash2 className="h-4 w-4 text-destructive" />
+                      <Trash2 className="h-5 w-5 text-destructive" />
                     </Button>
                   </div>
                 ))
               ) : (
-                <p className="text-sm text-muted-foreground text-center py-4">
-                  Aucun service configuré. Ajoutez-en un pour commencer.
-                </p>
+                <div className="text-center py-12 bg-muted/30 rounded-lg border-2 border-dashed">
+                  <Building2 className="h-12 w-12 mx-auto text-muted-foreground/50 mb-3" />
+                  <p className="text-muted-foreground font-medium">
+                    Aucun service configuré
+                  </p>
+                  <p className="text-sm text-muted-foreground/70 mt-1">
+                    Ajoutez-en un pour commencer
+                  </p>
+                </div>
               )}
             </div>
           </CardContent>
         </Card>
 
         {/* Accounting Allocation List */}
-        <Card>
-          <CardHeader>
-            <CardTitle>Ventilation comptable</CardTitle>
-            <CardDescription>
-              Gérez la liste des ventilations comptables disponibles pour la classification des factures
-            </CardDescription>
+        <Card className="border-2 hover:border-primary/50 transition-colors">
+          <CardHeader className="bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-950/20 dark:to-emerald-950/20 border-b">
+            <div className="flex items-center gap-3">
+              <div className="p-2 bg-green-500 rounded-lg">
+                <Calculator className="w-6 h-6 text-white" />
+              </div>
+              <div>
+                <CardTitle className="text-xl">Ventilation comptable</CardTitle>
+                <CardDescription className="mt-1">
+                  Gérez la liste des ventilations comptables disponibles pour la classification des factures
+                </CardDescription>
+              </div>
+            </div>
           </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="flex gap-2">
+          <CardContent className="space-y-6 pt-6">
+            <div className="flex gap-3">
               <div className="flex-1">
                 <Input
                   placeholder="Nouvelle ventilation (ex: MAINTENANCE)"
@@ -196,43 +273,58 @@ export default function ListsAdmin() {
                       handleCreateAllocation();
                     }
                   }}
+                  className="h-11"
                 />
               </div>
               <Button
                 onClick={handleCreateAllocation}
                 disabled={createAllocationMutation.isPending || !newAllocation.trim()}
+                size="lg"
+                className="bg-green-500 hover:bg-green-600"
               >
                 {createAllocationMutation.isPending ? (
-                  <Loader2 className="h-4 w-4 animate-spin" />
+                  <Loader2 className="h-5 w-5 animate-spin" />
                 ) : (
-                  <Plus className="h-4 w-4" />
+                  <Plus className="h-5 w-5" />
                 )}
                 <span className="ml-2">Ajouter</span>
               </Button>
             </div>
 
-            <div className="space-y-2">
+            <div className="space-y-3">
               {allocations && allocations.length > 0 ? (
                 allocations.map((alloc) => (
                   <div
                     key={alloc.id}
-                    className="flex items-center justify-between p-3 border rounded-lg hover:bg-accent/50 transition-colors"
+                    className="group flex items-center justify-between p-4 border-2 rounded-lg hover:border-green-300 hover:bg-green-50/50 dark:hover:bg-green-950/20 transition-all"
                   >
-                    <span className="font-medium">{alloc.name}</span>
+                    <div className="flex items-center gap-3">
+                      <div className="p-2 bg-green-100 dark:bg-green-900/30 rounded-lg group-hover:bg-green-200 dark:group-hover:bg-green-900/50 transition-colors">
+                        <Calculator className="h-4 w-4 text-green-600 dark:text-green-400" />
+                      </div>
+                      <span className="font-semibold text-lg">{alloc.name}</span>
+                    </div>
                     <Button
                       variant="ghost"
                       size="sm"
                       onClick={() => confirmDelete("allocation", alloc.id, alloc.name)}
                       disabled={deleteAllocationMutation.isPending}
+                      className="opacity-0 group-hover:opacity-100 transition-opacity hover:bg-red-100 dark:hover:bg-red-900/30"
                     >
-                      <Trash2 className="h-4 w-4 text-destructive" />
+                      <Trash2 className="h-5 w-5 text-destructive" />
                     </Button>
                   </div>
                 ))
               ) : (
-                <p className="text-sm text-muted-foreground text-center py-4">
-                  Aucune ventilation configurée. Ajoutez-en une pour commencer.
-                </p>
+                <div className="text-center py-12 bg-muted/30 rounded-lg border-2 border-dashed">
+                  <Calculator className="h-12 w-12 mx-auto text-muted-foreground/50 mb-3" />
+                  <p className="text-muted-foreground font-medium">
+                    Aucune ventilation configurée
+                  </p>
+                  <p className="text-sm text-muted-foreground/70 mt-1">
+                    Ajoutez-en une pour commencer
+                  </p>
+                </div>
               )}
             </div>
           </CardContent>
@@ -243,15 +335,20 @@ export default function ListsAdmin() {
       <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>Confirmer la suppression</AlertDialogTitle>
-            <AlertDialogDescription>
-              Êtes-vous sûr de vouloir supprimer "{itemToDelete?.name}" ?
+            <AlertDialogTitle className="text-xl">Confirmer la suppression</AlertDialogTitle>
+            <AlertDialogDescription className="text-base">
+              Êtes-vous sûr de vouloir supprimer <span className="font-semibold">"{itemToDelete?.name}"</span> ?
+              <br />
               Cette action est irréversible.
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel>Annuler</AlertDialogCancel>
-            <AlertDialogAction onClick={handleDelete} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
+            <AlertDialogAction 
+              onClick={handleDelete} 
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              <Trash2 className="h-4 w-4 mr-2" />
               Supprimer
             </AlertDialogAction>
           </AlertDialogFooter>
diff --git a/todo.md b/todo.md
index ffe331f..9a33454 100644
--- a/todo.md
+++ b/todo.md
@@ -395,4 +395,14 @@
 - [x] Améliorer le responsive design pour mobile
 - [x] Ajouter des badges de statut (Actif/Inactif) avec couleurs
 - [x] Tester localement l'interface modernisée
+- [x] Déployer sur le VPS
+
+## Modernisation des pages Administration et Import
+- [x] Identifier les pages Administration des listes et Paramètres d'import
+- [x] Analyser la structure actuelle de ces pages
+- [x] Moderniser la page Administration des listes avec Tabs, icônes colorées, cards
+- [x] Moderniser la page Paramètres d'import avec le même style
+- [x] Appliquer les badges de statut et animations
+- [x] Améliorer la typographie et les espacements
+- [x] Tester localement les interfaces modernisées
 - [ ] Déployer sur le VPS