@wakastellar/ui 2.3.5 → 3.0.0

package/src/blocks/quarantine-manager/index.tsx

@@ -0,0 +1,435 @@
+"use client"
+
+import * as React from "react"
+import { AlertTriangle, Download, RefreshCw, RotateCcw, Search, Trash2, X } from "lucide-react"
+import { Badge } from "../../components/badge"
+import { Button } from "../../components/button"
+import { Card } from "../../components/card"
+import { Input } from "../../components/input"
+import { ScrollArea } from "../../components/scroll-area"
+import { Select } from "../../components/select"
+import { cn } from "../../utils/cn"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../../components/dialog"
+
+export type ThreatSeverity = "critical" | "high" | "medium" | "low"
+
+export interface QuarantinedFile {
+  id: string
+  originalName: string
+  originalPath: string
+  threatName: string
+  severity: ThreatSeverity
+  quarantinedAt: Date
+  fileSize: number
+  fileHash: string
+  uploadedBy?: string
+  scanEngine: string
+  signatureVersion: string
+}
+
+export interface QuarantineManagerProps {
+  files?: QuarantinedFile[]
+  totalCount?: number
+  onDelete?: (fileId: string) => void
+  onRestore?: (fileId: string) => void
+  onRescan?: (fileId: string) => void
+  onPurgeAll?: () => void
+  onDownloadReport?: (fileId: string) => void
+  className?: string
+}
+
+const severityConfig = {
+  critical: { label: "Critique", color: "bg-red-500/10 text-red-700 dark:text-red-400 border-red-500/20" },
+  high: { label: "Élevée", color: "bg-orange-500/10 text-orange-700 dark:text-orange-400 border-orange-500/20" },
+  medium: { label: "Moyenne", color: "bg-yellow-500/10 text-yellow-700 dark:text-yellow-400 border-yellow-500/20" },
+  low: { label: "Faible", color: "bg-blue-500/10 text-blue-700 dark:text-blue-400 border-blue-500/20" },
+}
+
+const formatFileSize = (bytes: number): string => {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+  return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`
+}
+
+const formatDate = (date: Date): string => {
+  return new Intl.DateTimeFormat("fr-FR", {
+    dateStyle: "short",
+    timeStyle: "short",
+  }).format(date)
+}
+
+export const QuarantineManager: React.FC<QuarantineManagerProps> = ({
+  files = [],
+  totalCount = 0,
+  onDelete,
+  onRestore,
+  onRescan,
+  onPurgeAll,
+  onDownloadReport,
+  className,
+}) => {
+  const [searchQuery, setSearchQuery] = React.useState("")
+  const [severityFilter, setSeverityFilter] = React.useState<ThreatSeverity | "all">("all")
+  const [dateFilter, setDateFilter] = React.useState<string>("all")
+  const [deleteDialogOpen, setDeleteDialogOpen] = React.useState(false)
+  const [restoreDialogOpen, setRestoreDialogOpen] = React.useState(false)
+  const [purgeDialogOpen, setPurgeDialogOpen] = React.useState(false)
+  const [selectedFile, setSelectedFile] = React.useState<QuarantinedFile | null>(null)
+
+  const filteredFiles = React.useMemo(() => {
+    let result = files
+
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase()
+      result = result.filter(
+        (file) =>
+          file.originalName.toLowerCase().includes(query) ||
+          file.threatName.toLowerCase().includes(query) ||
+          file.originalPath.toLowerCase().includes(query)
+      )
+    }
+
+    if (severityFilter !== "all") {
+      result = result.filter((file) => file.severity === severityFilter)
+    }
+
+    if (dateFilter !== "all") {
+      const now = new Date()
+      const filterDate = new Date()
+
+      switch (dateFilter) {
+        case "today":
+          filterDate.setHours(0, 0, 0, 0)
+          break
+        case "week":
+          filterDate.setDate(now.getDate() - 7)
+          break
+        case "month":
+          filterDate.setMonth(now.getMonth() - 1)
+          break
+      }
+
+      if (dateFilter !== "all") {
+        result = result.filter((file) => new Date(file.quarantinedAt) >= filterDate)
+      }
+    }
+
+    return result
+  }, [files, searchQuery, severityFilter, dateFilter])
+
+  const stats = React.useMemo(() => {
+    const counts = {
+      critical: 0,
+      high: 0,
+      medium: 0,
+      low: 0,
+    }
+
+    files.forEach((file) => {
+      counts[file.severity]++
+    })
+
+    return counts
+  }, [files])
+
+  const handleDelete = (file: QuarantinedFile) => {
+    setSelectedFile(file)
+    setDeleteDialogOpen(true)
+  }
+
+  const handleRestore = (file: QuarantinedFile) => {
+    setSelectedFile(file)
+    setRestoreDialogOpen(true)
+  }
+
+  const confirmDelete = () => {
+    if (selectedFile && onDelete) {
+      onDelete(selectedFile.id)
+    }
+    setDeleteDialogOpen(false)
+    setSelectedFile(null)
+  }
+
+  const confirmRestore = () => {
+    if (selectedFile && onRestore) {
+      onRestore(selectedFile.id)
+    }
+    setRestoreDialogOpen(false)
+    setSelectedFile(null)
+  }
+
+  const confirmPurge = () => {
+    if (onPurgeAll) {
+      onPurgeAll()
+    }
+    setPurgeDialogOpen(false)
+  }
+
+  return (
+    <div className={cn("space-y-6", className)}>
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div className="space-y-1">
+          <h2 className="text-2xl font-semibold tracking-tight">Quarantaine</h2>
+          <p className="text-sm text-muted-foreground">
+            {totalCount || files.length} fichier{(totalCount || files.length) > 1 ? "s" : ""} en quarantaine
+          </p>
+        </div>
+        <Button
+          variant="destructive"
+          onClick={() => setPurgeDialogOpen(true)}
+          disabled={files.length === 0}
+        >
+          <Trash2 className="mr-2 h-4 w-4" />
+          Vider la quarantaine
+        </Button>
+      </div>
+
+      {/* Stats */}
+      <div className="grid gap-4 md:grid-cols-4">
+        {(["critical", "high", "medium", "low"] as ThreatSeverity[]).map((severity) => (
+          <Card key={severity} className="p-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm font-medium text-muted-foreground">
+                  {severityConfig[severity].label}
+                </p>
+                <p className="text-2xl font-bold">{stats[severity]}</p>
+              </div>
+              <AlertTriangle
+                className={cn(
+                  "h-5 w-5",
+                  severity === "critical" && "text-red-500",
+                  severity === "high" && "text-orange-500",
+                  severity === "medium" && "text-yellow-500",
+                  severity === "low" && "text-blue-500"
+                )}
+              />
+            </div>
+          </Card>
+        ))}
+      </div>
+
+      {/* Filters */}
+      <Card className="p-4">
+        <div className="grid gap-4 md:grid-cols-3">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              placeholder="Rechercher par nom, menace ou chemin..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-9"
+            />
+          </div>
+
+          <Select
+            value={severityFilter}
+            onValueChange={(value) => setSeverityFilter(value as ThreatSeverity | "all")}
+          >
+            <option value="all">Toutes les sévérités</option>
+            <option value="critical">Critique</option>
+            <option value="high">Élevée</option>
+            <option value="medium">Moyenne</option>
+            <option value="low">Faible</option>
+          </Select>
+
+          <Select value={dateFilter} onValueChange={setDateFilter}>
+            <option value="all">Toutes les dates</option>
+            <option value="today">Aujourd'hui</option>
+            <option value="week">7 derniers jours</option>
+            <option value="month">30 derniers jours</option>
+          </Select>
+        </div>
+      </Card>
+
+      {/* Files Table */}
+      <Card>
+        <ScrollArea className="h-[600px]">
+          <div className="p-4">
+            {filteredFiles.length === 0 ? (
+              <div className="flex flex-col items-center justify-center py-12 text-center">
+                <AlertTriangle className="mb-4 h-12 w-12 text-muted-foreground" />
+                <h3 className="mb-1 text-lg font-semibold">Aucun fichier trouvé</h3>
+                <p className="text-sm text-muted-foreground">
+                  {files.length === 0
+                    ? "La quarantaine est vide"
+                    : "Aucun fichier ne correspond aux filtres"}
+                </p>
+              </div>
+            ) : (
+              <div className="space-y-4">
+                {filteredFiles.map((file) => (
+                  <Card key={file.id} className="p-4">
+                    <div className="space-y-3">
+                      {/* File Header */}
+                      <div className="flex items-start justify-between">
+                        <div className="flex-1 space-y-1">
+                          <div className="flex items-center gap-2">
+                            <h4 className="font-medium">{file.originalName}</h4>
+                            <Badge className={severityConfig[file.severity].color}>
+                              {severityConfig[file.severity].label}
+                            </Badge>
+                          </div>
+                          <p className="text-sm text-muted-foreground">{file.originalPath}</p>
+                        </div>
+                      </div>
+
+                      {/* File Details */}
+                      <div className="grid gap-3 text-sm md:grid-cols-2">
+                        <div>
+                          <span className="font-medium">Menace détectée:</span>{" "}
+                          <span className="text-muted-foreground">{file.threatName}</span>
+                        </div>
+                        <div>
+                          <span className="font-medium">Date quarantaine:</span>{" "}
+                          <span className="text-muted-foreground">
+                            {formatDate(file.quarantinedAt)}
+                          </span>
+                        </div>
+                        <div>
+                          <span className="font-medium">Taille:</span>{" "}
+                          <span className="text-muted-foreground">{formatFileSize(file.fileSize)}</span>
+                        </div>
+                        {file.uploadedBy && (
+                          <div>
+                            <span className="font-medium">Uploadé par:</span>{" "}
+                            <span className="text-muted-foreground">{file.uploadedBy}</span>
+                          </div>
+                        )}
+                        <div>
+                          <span className="font-medium">Hash:</span>{" "}
+                          <span className="font-mono text-xs text-muted-foreground">
+                            {file.fileHash.substring(0, 16)}...
+                          </span>
+                        </div>
+                        <div>
+                          <span className="font-medium">Moteur:</span>{" "}
+                          <span className="text-muted-foreground">
+                            {file.scanEngine} ({file.signatureVersion})
+                          </span>
+                        </div>
+                      </div>
+
+                      {/* Actions */}
+                      <div className="flex gap-2 border-t pt-3">
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => onRescan?.(file.id)}
+                        >
+                          <RefreshCw className="mr-2 h-3 w-3" />
+                          Re-scanner
+                        </Button>
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => handleRestore(file)}
+                        >
+                          <RotateCcw className="mr-2 h-3 w-3" />
+                          Restaurer
+                        </Button>
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => onDownloadReport?.(file.id)}
+                        >
+                          <Download className="mr-2 h-3 w-3" />
+                          Rapport
+                        </Button>
+                        <Button
+                          variant="destructive"
+                          size="sm"
+                          onClick={() => handleDelete(file)}
+                        >
+                          <Trash2 className="mr-2 h-3 w-3" />
+                          Supprimer
+                        </Button>
+                      </div>
+                    </div>
+                  </Card>
+                ))}
+              </div>
+            )}
+          </div>
+        </ScrollArea>
+      </Card>
+
+      {/* Delete Dialog */}
+      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Supprimer définitivement</DialogTitle>
+            <DialogDescription>
+              Êtes-vous sûr de vouloir supprimer définitivement le fichier{" "}
+              <span className="font-medium">{selectedFile?.originalName}</span> ?<br />
+              Cette action est irréversible.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDeleteDialogOpen(false)}>
+              Annuler
+            </Button>
+            <Button variant="destructive" onClick={confirmDelete}>
+              Supprimer
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Restore Dialog */}
+      <Dialog open={restoreDialogOpen} onOpenChange={setRestoreDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Restaurer le fichier</DialogTitle>
+            <DialogDescription>
+              Êtes-vous sûr de vouloir restaurer le fichier{" "}
+              <span className="font-medium">{selectedFile?.originalName}</span> ?<br />
+              Le fichier sera replacé à son emplacement d'origine :{" "}
+              <span className="font-mono text-xs">{selectedFile?.originalPath}</span>
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setRestoreDialogOpen(false)}>
+              Annuler
+            </Button>
+            <Button onClick={confirmRestore}>Restaurer</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Purge Dialog */}
+      <Dialog open={purgeDialogOpen} onOpenChange={setPurgeDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Vider la quarantaine</DialogTitle>
+            <DialogDescription>
+              Êtes-vous sûr de vouloir supprimer définitivement tous les fichiers en quarantaine ?
+              <br />
+              {files.length} fichier{files.length > 1 ? "s" : ""} ser{files.length > 1 ? "ont" : "a"}{" "}
+              supprimé{files.length > 1 ? "s" : ""}. Cette action est irréversible.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setPurgeDialogOpen(false)}>
+              Annuler
+            </Button>
+            <Button variant="destructive" onClick={confirmPurge}>
+              Vider la quarantaine
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
+
+export default QuarantineManager