@wakastellar/ui 2.4.0 → 3.1.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

package/src/blocks/scan-history-log/ScanHistoryLog.stories.tsx

@@ -0,0 +1,231 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { ScanHistoryLog, type ScanLogEntry } from "./index"
+
+const meta = {
+  title: "Blocks/Antivirus/ScanHistoryLog",
+  component: ScanHistoryLog,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof ScanHistoryLog>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const generateMockEntries = (): ScanLogEntry[] => {
+  const now = new Date()
+  const users = [
+    { id: "user-1", name: "Marie Dupont" },
+    { id: "user-2", name: "Jean Martin" },
+    { id: "user-3", name: "Sophie Bernard" },
+    { id: "user-4", name: "Luc Moreau" },
+  ]
+
+  const cleanFiles = [
+    "rapport-mensuel.pdf",
+    "presentation.pptx",
+    "document.docx",
+    "image.jpg",
+    "archive.zip",
+    "script.js",
+    "style.css",
+    "index.html",
+    "data.json",
+    "config.yaml",
+  ]
+
+  const infectedFiles = [
+    "virus.exe",
+    "trojan-downloader.zip",
+    "malware.pdf",
+    "ransomware.docx",
+  ]
+
+  const errorFiles = [
+    "corrupted-archive.zip",
+    "encrypted-file.bin",
+    "large-file.iso",
+  ]
+
+  const threats = [
+    "Trojan.Generic.KD.12345678",
+    "Win32.Malware.Agent",
+    "EICAR-Test-File",
+    "Ransom.WannaCry.Variant",
+    "Adware.Generic.BundleInstaller",
+  ]
+
+  const entries: ScanLogEntry[] = []
+  let idCounter = 1
+
+  // Clean files (10 entries)
+  for (let i = 0; i < 10; i++) {
+    const daysAgo = Math.floor(Math.random() * 7)
+    const hoursAgo = Math.floor(Math.random() * 24)
+    const scanDate = new Date(now)
+    scanDate.setDate(scanDate.getDate() - daysAgo)
+    scanDate.setHours(scanDate.getHours() - hoursAgo)
+
+    const user = users[Math.floor(Math.random() * users.length)]
+    const filename = cleanFiles[Math.floor(Math.random() * cleanFiles.length)]
+    const fileSize = Math.floor(Math.random() * 10000000) + 1000
+
+    entries.push({
+      id: `scan-${idCounter++}`,
+      filename,
+      fileSize,
+      fileHash: Array.from({ length: 64 }, () =>
+        Math.floor(Math.random() * 16).toString(16)
+      ).join(""),
+      result: "clean",
+      scanDate,
+      duration: Math.floor(Math.random() * 2000) + 100,
+      userId: user.id,
+      userName: user.name,
+      engineVersion: "ClamAV 1.2.1",
+      signatureVersion: `${Math.floor(Math.random() * 30000) + 25000}`,
+    })
+  }
+
+  // Infected files (5 entries)
+  for (let i = 0; i < 5; i++) {
+    const daysAgo = Math.floor(Math.random() * 7)
+    const hoursAgo = Math.floor(Math.random() * 24)
+    const scanDate = new Date(now)
+    scanDate.setDate(scanDate.getDate() - daysAgo)
+    scanDate.setHours(scanDate.getHours() - hoursAgo)
+
+    const user = users[Math.floor(Math.random() * users.length)]
+    const filename = infectedFiles[Math.floor(Math.random() * infectedFiles.length)]
+    const fileSize = Math.floor(Math.random() * 5000000) + 1000
+    const threatName = threats[Math.floor(Math.random() * threats.length)]
+
+    entries.push({
+      id: `scan-${idCounter++}`,
+      filename,
+      fileSize,
+      fileHash: Array.from({ length: 64 }, () =>
+        Math.floor(Math.random() * 16).toString(16)
+      ).join(""),
+      result: "infected",
+      threatName,
+      scanDate,
+      duration: Math.floor(Math.random() * 3000) + 500,
+      userId: user.id,
+      userName: user.name,
+      engineVersion: "ClamAV 1.2.1",
+      signatureVersion: `${Math.floor(Math.random() * 30000) + 25000}`,
+    })
+  }
+
+  // Error files (3 entries)
+  for (let i = 0; i < 3; i++) {
+    const daysAgo = Math.floor(Math.random() * 7)
+    const hoursAgo = Math.floor(Math.random() * 24)
+    const scanDate = new Date(now)
+    scanDate.setDate(scanDate.getDate() - daysAgo)
+    scanDate.setHours(scanDate.getHours() - hoursAgo)
+
+    const user = users[Math.floor(Math.random() * users.length)]
+    const filename = errorFiles[Math.floor(Math.random() * errorFiles.length)]
+    const fileSize = Math.floor(Math.random() * 50000000) + 10000000
+
+    entries.push({
+      id: `scan-${idCounter++}`,
+      filename,
+      fileSize,
+      fileHash: Array.from({ length: 64 }, () =>
+        Math.floor(Math.random() * 16).toString(16)
+      ).join(""),
+      result: "error",
+      scanDate,
+      duration: Math.floor(Math.random() * 5000) + 1000,
+      userId: user.id,
+      userName: user.name,
+      engineVersion: "ClamAV 1.2.1",
+      signatureVersion: `${Math.floor(Math.random() * 30000) + 25000}`,
+    })
+  }
+
+  // Sort by date (most recent first)
+  return entries.sort((a, b) => b.scanDate.getTime() - a.scanDate.getTime())
+}
+
+export const Default: Story = {
+  args: {
+    entries: generateMockEntries(),
+    totalEntries: 18,
+    currentPage: 1,
+    pageSize: 10,
+    periodFilter: "7d",
+    onPageChange: (page: number) => console.log("Page changed:", page),
+    onFilterChange: (filters: any) => console.log("Filters changed:", filters),
+    onExport: () => console.log("Export triggered"),
+  },
+}
+
+export const Empty: Story = {
+  args: {
+    entries: [],
+    totalEntries: 0,
+    currentPage: 1,
+    pageSize: 10,
+    periodFilter: "7d",
+    onPageChange: (page: number) => console.log("Page changed:", page),
+    onFilterChange: (filters: any) => console.log("Filters changed:", filters),
+    onExport: () => console.log("Export triggered"),
+  },
+}
+
+export const OnlyCleanScans: Story = {
+  args: {
+    entries: generateMockEntries().filter((e) => e.result === "clean"),
+    totalEntries: 10,
+    currentPage: 1,
+    pageSize: 10,
+    periodFilter: "7d",
+    onPageChange: (page: number) => console.log("Page changed:", page),
+    onFilterChange: (filters: any) => console.log("Filters changed:", filters),
+    onExport: () => console.log("Export triggered"),
+  },
+}
+
+export const WithInfections: Story = {
+  args: {
+    entries: generateMockEntries().filter((e) => e.result === "infected"),
+    totalEntries: 5,
+    currentPage: 1,
+    pageSize: 10,
+    periodFilter: "7d",
+    onPageChange: (page: number) => console.log("Page changed:", page),
+    onFilterChange: (filters: any) => console.log("Filters changed:", filters),
+    onExport: () => console.log("Export triggered"),
+  },
+}
+
+export const WithErrors: Story = {
+  args: {
+    entries: generateMockEntries().filter((e) => e.result === "error"),
+    totalEntries: 3,
+    currentPage: 1,
+    pageSize: 10,
+    periodFilter: "7d",
+    onPageChange: (page: number) => console.log("Page changed:", page),
+    onFilterChange: (filters: any) => console.log("Filters changed:", filters),
+    onExport: () => console.log("Export triggered"),
+  },
+}
+
+export const WithPagination: Story = {
+  args: {
+    entries: generateMockEntries(),
+    totalEntries: 50,
+    currentPage: 2,
+    pageSize: 5,
+    periodFilter: "30d",
+    onPageChange: (page: number) => console.log("Page changed:", page),
+    onFilterChange: (filters: any) => console.log("Filters changed:", filters),
+    onExport: () => console.log("Export triggered"),
+  },
+}