Checkpoint: Modernisation de l'ergonomie des pages Administration des listes et Paramètres d'import avec icônes colorées, dégradés, badges de statut, et animations
This commit is contained in:
Manus
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user