@wakastellar/ui 2.4.0 → 3.1.0

package/src/blocks/scan-history-log/index.tsx

@@ -0,0 +1,406 @@
+"use client"
+
+import { useState } from "react"
+import { Download, Search, Copy, Check } 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,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../components/select"
+import { cn } from "../../utils/cn"
+
+export type ScanResult = "clean" | "infected" | "error"
+
+export interface ScanLogEntry {
+  id: string
+  filename: string
+  fileSize: number
+  fileHash: string
+  result: ScanResult
+  threatName?: string
+  scanDate: Date
+  duration: number
+  userId: string
+  userName: string
+  engineVersion: string
+  signatureVersion: string
+}
+
+export interface ScanHistoryLogProps {
+  entries?: ScanLogEntry[]
+  totalEntries?: number
+  currentPage?: number
+  pageSize?: number
+  periodFilter?: "today" | "7d" | "30d" | "custom"
+  onPageChange?: (page: number) => void
+  onFilterChange?: (filters: Record<string, string>) => void
+  onExport?: () => void
+  className?: string
+}
+
+const defaultEntries: ScanLogEntry[] = []
+
+export function ScanHistoryLog({
+  entries = defaultEntries,
+  totalEntries = entries.length,
+  currentPage = 1,
+  pageSize = 10,
+  periodFilter = "7d",
+  onPageChange,
+  onFilterChange,
+  onExport,
+  className,
+}: ScanHistoryLogProps) {
+  const [searchQuery, setSearchQuery] = useState("")
+  const [resultFilter, setResultFilter] = useState<string>("all")
+  const [period, setPeriod] = useState<string>(periodFilter)
+  const [userFilter, setUserFilter] = useState<string>("all")
+  const [copiedHash, setCopiedHash] = useState<string | null>(null)
+
+  const filteredEntries = entries.filter((entry) => {
+    if (searchQuery && !entry.filename.toLowerCase().includes(searchQuery.toLowerCase())) {
+      return false
+    }
+    if (resultFilter !== "all" && entry.result !== resultFilter) {
+      return false
+    }
+    if (userFilter !== "all" && entry.userId !== userFilter) {
+      return false
+    }
+    return true
+  })
+
+  const paginatedEntries = filteredEntries.slice(
+    (currentPage - 1) * pageSize,
+    currentPage * pageSize
+  )
+
+  const totalPages = Math.ceil(filteredEntries.length / pageSize)
+
+  const stats = {
+    total: filteredEntries.length,
+    clean: filteredEntries.filter((e) => e.result === "clean").length,
+    infected: filteredEntries.filter((e) => e.result === "infected").length,
+    errors: filteredEntries.filter((e) => e.result === "error").length,
+  }
+
+  const uniqueUsers = Array.from(new Set(entries.map((e) => e.userId)))
+
+  const handleCopyHash = (hash: string) => {
+    navigator.clipboard.writeText(hash)
+    setCopiedHash(hash)
+    setTimeout(() => setCopiedHash(null), 2000)
+  }
+
+  const handleFilterChange = (key: string, value: string) => {
+    const filters: Record<string, string> = {
+      search: searchQuery,
+      result: resultFilter,
+      period,
+      user: userFilter,
+      [key]: value,
+    }
+    onFilterChange?.(filters)
+  }
+
+  const getResultBadge = (result: ScanResult) => {
+    switch (result) {
+      case "clean":
+        return <Badge variant="secondary" className="bg-green-500/10 text-green-600 border-green-500/20">Clean</Badge>
+      case "infected":
+        return <Badge variant="destructive">Infected</Badge>
+      case "error":
+        return <Badge variant="secondary" className="bg-yellow-500/10 text-yellow-600 border-yellow-500/20">Error</Badge>
+    }
+  }
+
+  const formatFileSize = (bytes: number) => {
+    if (bytes < 1024) return `${bytes} B`
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(2)} KB`
+    return `${(bytes / (1024 * 1024)).toFixed(2)} MB`
+  }
+
+  const formatDate = (date: Date) => {
+    return new Intl.DateTimeFormat("fr-FR", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+    }).format(date)
+  }
+
+  const truncateHash = (hash: string) => {
+    return `${hash.slice(0, 8)}...${hash.slice(-8)}`
+  }
+
+  return (
+    <div className={cn("space-y-6", className)}>
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-2xl font-bold tracking-tight">Historique des scans</h2>
+          <p className="text-sm text-muted-foreground mt-1">
+            {totalEntries} scan{totalEntries > 1 ? "s" : ""} au total
+          </p>
+        </div>
+        <Button onClick={onExport} variant="outline">
+          <Download className="w-4 h-4 mr-2" />
+          Exporter le journal
+        </Button>
+      </div>
+
+      {/* Stats Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+        <Card className="p-4">
+          <div className="text-sm font-medium text-muted-foreground">Total scans</div>
+          <div className="text-2xl font-bold mt-1">{stats.total}</div>
+        </Card>
+        <Card className="p-4">
+          <div className="text-sm font-medium text-muted-foreground">Clean</div>
+          <div className="text-2xl font-bold mt-1 text-green-600 dark:text-green-500">
+            {stats.clean}
+          </div>
+        </Card>
+        <Card className="p-4">
+          <div className="text-sm font-medium text-muted-foreground">Infected</div>
+          <div className="text-2xl font-bold mt-1 text-red-600 dark:text-red-500">
+            {stats.infected}
+          </div>
+        </Card>
+        <Card className="p-4">
+          <div className="text-sm font-medium text-muted-foreground">Errors</div>
+          <div className="text-2xl font-bold mt-1 text-orange-600 dark:text-orange-500">
+            {stats.errors}
+          </div>
+        </Card>
+      </div>
+
+      {/* Filters */}
+      <Card className="p-4">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+            <Input
+              placeholder="Rechercher un fichier..."
+              value={searchQuery}
+              onChange={(e) => {
+                setSearchQuery(e.target.value)
+                handleFilterChange("search", e.target.value)
+              }}
+              className="pl-9"
+            />
+          </div>
+
+          <Select
+            value={resultFilter}
+            onValueChange={(value) => {
+              setResultFilter(value)
+              handleFilterChange("result", value)
+            }}
+          >
+            <SelectTrigger>
+              <SelectValue placeholder="Résultat" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">Tous les résultats</SelectItem>
+              <SelectItem value="clean">Clean</SelectItem>
+              <SelectItem value="infected">Infected</SelectItem>
+              <SelectItem value="error">Error</SelectItem>
+            </SelectContent>
+          </Select>
+
+          <Select
+            value={period}
+            onValueChange={(value) => {
+              setPeriod(value)
+              handleFilterChange("period", value)
+            }}
+          >
+            <SelectTrigger>
+              <SelectValue placeholder="Période" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="today">Aujourd'hui</SelectItem>
+              <SelectItem value="7d">7 derniers jours</SelectItem>
+              <SelectItem value="30d">30 derniers jours</SelectItem>
+              <SelectItem value="custom">Personnalisé</SelectItem>
+            </SelectContent>
+          </Select>
+
+          <Select
+            value={userFilter}
+            onValueChange={(value) => {
+              setUserFilter(value)
+              handleFilterChange("user", value)
+            }}
+          >
+            <SelectTrigger>
+              <SelectValue placeholder="Utilisateur" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">Tous les utilisateurs</SelectItem>
+              {uniqueUsers.map((userId) => {
+                const user = entries.find((e) => e.userId === userId)
+                return (
+                  <SelectItem key={userId} value={userId}>
+                    {user?.userName || userId}
+                  </SelectItem>
+                )
+              })}
+            </SelectContent>
+          </Select>
+        </div>
+      </Card>
+
+      {/* Table */}
+      <Card>
+        <ScrollArea className="h-[600px]">
+          <div className="min-w-full">
+            <table className="w-full">
+              <thead className="sticky top-0 bg-muted/50 backdrop-blur-sm border-b">
+                <tr>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                    Date/Heure
+                  </th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                    Fichier
+                  </th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                    Taille
+                  </th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                    Hash SHA256
+                  </th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                    Résultat
+                  </th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                    Menace
+                  </th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                    Utilisateur
+                  </th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                    Durée
+                  </th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                    Moteur
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="divide-y">
+                {paginatedEntries.length === 0 ? (
+                  <tr>
+                    <td colSpan={9} className="px-4 py-8 text-center text-muted-foreground">
+                      Aucun scan trouvé
+                    </td>
+                  </tr>
+                ) : (
+                  paginatedEntries.map((entry) => (
+                    <tr
+                      key={entry.id}
+                      className="hover:bg-muted/50 transition-colors"
+                    >
+                      <td className="px-4 py-3 text-sm whitespace-nowrap">
+                        {formatDate(entry.scanDate)}
+                      </td>
+                      <td className="px-4 py-3 text-sm font-medium max-w-xs truncate">
+                        {entry.filename}
+                      </td>
+                      <td className="px-4 py-3 text-sm whitespace-nowrap">
+                        {formatFileSize(entry.fileSize)}
+                      </td>
+                      <td className="px-4 py-3 text-sm">
+                        <div className="flex items-center gap-2">
+                          <code className="text-xs bg-muted px-2 py-1 rounded">
+                            {truncateHash(entry.fileHash)}
+                          </code>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => handleCopyHash(entry.fileHash)}
+                            className="h-6 w-6 p-0"
+                          >
+                            {copiedHash === entry.fileHash ? (
+                              <Check className="w-3 h-3 text-green-600" />
+                            ) : (
+                              <Copy className="w-3 h-3" />
+                            )}
+                          </Button>
+                        </div>
+                      </td>
+                      <td className="px-4 py-3 text-sm">
+                        {getResultBadge(entry.result)}
+                      </td>
+                      <td className="px-4 py-3 text-sm">
+                        {entry.threatName ? (
+                          <code className="text-xs bg-red-100 dark:bg-red-900/20 text-red-700 dark:text-red-400 px-2 py-1 rounded">
+                            {entry.threatName}
+                          </code>
+                        ) : (
+                          <span className="text-muted-foreground">-</span>
+                        )}
+                      </td>
+                      <td className="px-4 py-3 text-sm whitespace-nowrap">
+                        {entry.userName}
+                      </td>
+                      <td className="px-4 py-3 text-sm whitespace-nowrap">
+                        {entry.duration}ms
+                      </td>
+                      <td className="px-4 py-3 text-sm whitespace-nowrap">
+                        <div className="text-xs">
+                          <div className="font-medium">{entry.engineVersion}</div>
+                          <div className="text-muted-foreground">
+                            {entry.signatureVersion}
+                          </div>
+                        </div>
+                      </td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+        </ScrollArea>
+
+        {/* Pagination */}
+        {totalPages > 1 && (
+          <div className="border-t px-4 py-3 flex items-center justify-between">
+            <div className="text-sm text-muted-foreground">
+              Page {currentPage} sur {totalPages}
+            </div>
+            <div className="flex gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => onPageChange?.(currentPage - 1)}
+                disabled={currentPage === 1}
+              >
+                Précédent
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => onPageChange?.(currentPage + 1)}
+                disabled={currentPage === totalPages}
+              >
+                Suivant
+              </Button>
+            </div>
+          </div>
+        )}
+      </Card>
+    </div>
+  )
+}
+
+export default ScanHistoryLog

package/src/blocks/scan-policy-editor/ScanPolicyEditor.stories.tsx

@@ -0,0 +1,106 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { ScanPolicyEditor, defaultScanPolicy, type ScanPolicy } from "./index"
+
+const meta: Meta<typeof ScanPolicyEditor> = {
+  title: "Blocks/Antivirus/ScanPolicyEditor",
+  component: ScanPolicyEditor,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof ScanPolicyEditor>
+
+export const Default: Story = {
+  args: {
+    policy: defaultScanPolicy,
+    onSave: (policy: ScanPolicy) => {
+      console.log("Policy saved:", policy)
+    },
+    onCancel: () => {
+      console.log("Cancelled")
+    },
+    onResetDefaults: () => {
+      console.log("Reset to defaults")
+    },
+  },
+}
+
+const customPolicy: ScanPolicy = {
+  autoScanOnUpload: true,
+  maxFileSize: 500,
+  maxFileSizeUnit: "MB",
+  scanTimeout: 300,
+  maxConcurrentScans: 8,
+  scanArchives: true,
+  maxArchiveDepth: 5,
+  excludedExtensions: [".log", ".tmp", ".lock", ".cache", ".bak", ".old"],
+  excludedPaths: ["/tmp", "/var/cache", "/var/log", "/home/user/.cache"],
+  whitelistedHashes: [
+    "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855",
+    "d2d2d2d2d2d2d2d2d2d2d2d2d2d2d2d2d2d2d2d2d2d2d2d2d2d2d2d2d2d2d2d2",
+  ],
+  detectionAction: "block_and_notify",
+  notifyAdmin: true,
+  notifyUser: true,
+  auditLog: true,
+}
+
+export const CustomPolicy: Story = {
+  args: {
+    policy: customPolicy,
+    onSave: (policy: ScanPolicy) => {
+      console.log("Custom policy saved:", policy)
+    },
+    onCancel: () => {
+      console.log("Cancelled")
+    },
+    onResetDefaults: () => {
+      console.log("Reset to defaults")
+    },
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    policy: defaultScanPolicy,
+    isLoading: true,
+    onSave: (policy: ScanPolicy) => {
+      console.log("Policy saved:", policy)
+    },
+  },
+}
+
+export const ArchiveScanningDisabled: Story = {
+  args: {
+    policy: {
+      ...defaultScanPolicy,
+      scanArchives: false,
+    },
+    onSave: (policy: ScanPolicy) => {
+      console.log("Policy saved:", policy)
+    },
+  },
+}
+
+export const StrictPolicy: Story = {
+  args: {
+    policy: {
+      ...defaultScanPolicy,
+      maxFileSize: 50,
+      maxFileSizeUnit: "MB",
+      scanTimeout: 60,
+      maxConcurrentScans: 2,
+      maxArchiveDepth: 1,
+      detectionAction: "delete",
+      notifyAdmin: true,
+      notifyUser: false,
+      auditLog: true,
+    },
+    onSave: (policy: ScanPolicy) => {
+      console.log("Strict policy saved:", policy)
+    },
+  },
+}