@wakastellar/ui 2.3.5 → 3.0.0

package/src/blocks/threat-alert-banner/index.tsx

@@ -0,0 +1,320 @@
+"use client"
+
+import { useState } from "react"
+import { Badge } from "../../components/badge"
+import { Button } from "../../components/button"
+import { Card } from "../../components/card"
+import { ShieldAlert, AlertTriangle, AlertCircle, Info, X, ChevronDown, ChevronUp, Eye, Archive } from "lucide-react"
+import { cn } from "../../utils/cn"
+
+export type AlertSeverity = "critical" | "high" | "medium" | "low"
+export type ThreatAction = "quarantined" | "deleted" | "blocked" | "allowed"
+
+export interface ThreatAlert {
+  id: string
+  threatName: string
+  filename: string
+  filePath: string
+  severity: AlertSeverity
+  action: ThreatAction
+  detectedAt: Date
+  userId?: string
+  engineVersion: string
+  dismissed: boolean
+}
+
+export interface ThreatAlertBannerProps {
+  alerts?: ThreatAlert[]
+  maxVisible?: number
+  autoHideAfter?: number // ms, 0 = never
+  onDismiss?: (alertId: string) => void
+  onDismissAll?: () => void
+  onViewDetails?: (alertId: string) => void
+  onViewQuarantine?: () => void
+  className?: string
+}
+
+const severityConfig = {
+  critical: {
+    icon: ShieldAlert,
+    bgColor: "bg-red-950/50 border-red-800",
+    iconColor: "text-red-400",
+    badgeVariant: "destructive" as const,
+  },
+  high: {
+    icon: AlertTriangle,
+    bgColor: "bg-orange-950/50 border-orange-800",
+    iconColor: "text-orange-400",
+    badgeVariant: "destructive" as const,
+  },
+  medium: {
+    icon: AlertCircle,
+    bgColor: "bg-yellow-950/50 border-yellow-800",
+    iconColor: "text-yellow-400",
+    badgeVariant: "secondary" as const,
+  },
+  low: {
+    icon: Info,
+    bgColor: "bg-blue-950/50 border-blue-800",
+    iconColor: "text-blue-400",
+    badgeVariant: "default" as const,
+  },
+}
+
+const actionLabels: Record<ThreatAction, string> = {
+  quarantined: "Mis en quarantaine",
+  deleted: "Supprimé",
+  blocked: "Bloqué",
+  allowed: "Autorisé",
+}
+
+const actionColors: Record<ThreatAction, string> = {
+  quarantined: "text-orange-400",
+  deleted: "text-red-400",
+  blocked: "text-red-400",
+  allowed: "text-green-400",
+}
+
+export const ThreatAlertBanner = ({
+  alerts = [],
+  maxVisible = 3,
+  autoHideAfter = 0,
+  onDismiss,
+  onDismissAll,
+  onViewDetails,
+  onViewQuarantine,
+  className,
+}: ThreatAlertBannerProps) => {
+  const [expandedAlertIds, setExpandedAlertIds] = useState<Set<string>>(new Set())
+
+  const activeAlerts = alerts.filter((alert) => !alert.dismissed)
+
+  if (activeAlerts.length === 0) {
+    return null
+  }
+
+  const toggleExpanded = (alertId: string) => {
+    setExpandedAlertIds((prev) => {
+      const next = new Set(prev)
+      if (next.has(alertId)) {
+        next.delete(alertId)
+      } else {
+        next.add(alertId)
+      }
+      return next
+    })
+  }
+
+  const visibleAlerts = activeAlerts.slice(0, maxVisible)
+  const remainingCount = activeAlerts.length - maxVisible
+
+  const formatTimestamp = (date: Date) => {
+    const now = new Date()
+    const diff = now.getTime() - date.getTime()
+    const minutes = Math.floor(diff / 60000)
+    const hours = Math.floor(diff / 3600000)
+
+    if (minutes < 1) return "À l'instant"
+    if (minutes < 60) return `Il y a ${minutes}m`
+    if (hours < 24) return `Il y a ${hours}h`
+    return date.toLocaleDateString("fr-FR", { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" })
+  }
+
+  return (
+    <div className={cn("space-y-2", className)}>
+      {activeAlerts.length > 1 && (
+        <div className="flex items-center justify-between bg-red-950/30 border border-red-800/50 rounded-lg px-4 py-2">
+          <div className="flex items-center gap-2">
+            <ShieldAlert className="h-4 w-4 text-red-400" />
+            <span className="text-sm font-medium text-red-200">
+              {activeAlerts.length} alerte{activeAlerts.length > 1 ? "s" : ""} active{activeAlerts.length > 1 ? "s" : ""}
+            </span>
+          </div>
+          {onDismissAll && (
+            <Button variant="ghost" size="sm" onClick={onDismissAll} className="text-red-300 hover:text-red-200">
+              Tout ignorer
+            </Button>
+          )}
+        </div>
+      )}
+
+      {visibleAlerts.map((alert) => {
+        const config = severityConfig[alert.severity]
+        const Icon = config.icon
+        const isExpanded = expandedAlertIds.has(alert.id)
+
+        return (
+          <Card
+            key={alert.id}
+            className={cn(
+              "border-2 backdrop-blur-sm transition-all duration-200",
+              config.bgColor,
+              isExpanded && "shadow-lg"
+            )}
+          >
+            <div className="p-4">
+              <div className="flex items-start gap-3">
+                <div className={cn("mt-0.5 flex-shrink-0", config.iconColor)}>
+                  <Icon className="h-5 w-5" />
+                </div>
+
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-start justify-between gap-3">
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2 flex-wrap">
+                        <h4 className="text-sm font-semibold text-white truncate">{alert.threatName}</h4>
+                        <Badge variant={config.badgeVariant} className="text-xs">
+                          {alert.severity.toUpperCase()}
+                        </Badge>
+                      </div>
+
+                      <div className="mt-1 flex items-center gap-2 text-xs text-gray-400">
+                        <span className="truncate" title={alert.filePath}>
+                          {alert.filename}
+                        </span>
+                        <span>•</span>
+                        <span className={actionColors[alert.action]}>{actionLabels[alert.action]}</span>
+                        <span>•</span>
+                        <span>{formatTimestamp(alert.detectedAt)}</span>
+                      </div>
+                    </div>
+
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => onDismiss?.(alert.id)}
+                      className="flex-shrink-0 h-8 w-8 p-0 text-gray-400 hover:text-white"
+                    >
+                      <X className="h-4 w-4" />
+                    </Button>
+                  </div>
+
+                  {isExpanded && (
+                    <div className="mt-3 pt-3 border-t border-white/10 space-y-2 text-xs text-gray-300">
+                      <div className="grid grid-cols-2 gap-2">
+                        <div>
+                          <span className="text-gray-500">Chemin complet:</span>
+                          <p className="font-mono break-all">{alert.filePath}</p>
+                        </div>
+                        <div>
+                          <span className="text-gray-500">Moteur antivirus:</span>
+                          <p className="font-mono">{alert.engineVersion}</p>
+                        </div>
+                        {alert.userId && (
+                          <div>
+                            <span className="text-gray-500">Utilisateur:</span>
+                            <p className="font-mono">{alert.userId}</p>
+                          </div>
+                        )}
+                        <div>
+                          <span className="text-gray-500">Détecté le:</span>
+                          <p>
+                            {alert.detectedAt.toLocaleString("fr-FR", {
+                              dateStyle: "medium",
+                              timeStyle: "short",
+                            })}
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  )}
+
+                  <div className="mt-3 flex items-center gap-2">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => toggleExpanded(alert.id)}
+                      className="text-xs"
+                    >
+                      {isExpanded ? (
+                        <>
+                          <ChevronUp className="h-3 w-3 mr-1" />
+                          Masquer
+                        </>
+                      ) : (
+                        <>
+                          <ChevronDown className="h-3 w-3 mr-1" />
+                          Détails
+                        </>
+                      )}
+                    </Button>
+
+                    {onViewDetails && (
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => onViewDetails(alert.id)}
+                        className="text-xs"
+                      >
+                        <Eye className="h-3 w-3 mr-1" />
+                        Analyse complète
+                      </Button>
+                    )}
+
+                    {alert.action === "quarantined" && onViewQuarantine && (
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={onViewQuarantine}
+                        className="text-xs"
+                      >
+                        <Archive className="h-3 w-3 mr-1" />
+                        Quarantaine
+                      </Button>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Card>
+        )
+      })}
+
+      {remainingCount > 0 && (
+        <div className="text-center">
+          <Button variant="ghost" size="sm" className="text-xs text-gray-400 hover:text-white">
+            + {remainingCount} autre{remainingCount > 1 ? "s" : ""} alerte{remainingCount > 1 ? "s" : ""}
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export const defaultThreatAlerts: ThreatAlert[] = [
+  {
+    id: "1",
+    threatName: "Trojan.GenericKD.12345678",
+    filename: "invoice_2024.pdf.exe",
+    filePath: "/home/user/Downloads/invoice_2024.pdf.exe",
+    severity: "critical",
+    action: "quarantined",
+    detectedAt: new Date(Date.now() - 5 * 60000),
+    userId: "user@example.com",
+    engineVersion: "ClamAV 1.4.1",
+    dismissed: false,
+  },
+  {
+    id: "2",
+    threatName: "Malware.Suspicious.Archive",
+    filename: "files.zip",
+    filePath: "/var/www/uploads/files.zip",
+    severity: "high",
+    action: "blocked",
+    detectedAt: new Date(Date.now() - 15 * 60000),
+    engineVersion: "ClamAV 1.4.1",
+    dismissed: false,
+  },
+  {
+    id: "3",
+    threatName: "PUA.Win.Adware.Generic",
+    filename: "installer.exe",
+    filePath: "/tmp/installer.exe",
+    severity: "medium",
+    action: "deleted",
+    detectedAt: new Date(Date.now() - 3600000),
+    userId: "admin@example.com",
+    engineVersion: "ClamAV 1.4.1",
+    dismissed: false,
+  },
+]