@wakastellar/ui 2.4.0 → 3.1.0

package/src/blocks/antivirus-dashboard/index.tsx

@@ -0,0 +1,525 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { Badge } from "../../components/badge"
+import { Button } from "../../components/button"
+import { Card, CardContent, CardHeader, CardTitle } from "../../components/card"
+import { Progress } from "../../components/progress"
+import { Separator } from "../../components/separator"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../components/tabs"
+import {
+  Shield,
+  ShieldAlert,
+  ShieldCheck,
+  ShieldX,
+  Activity,
+  AlertTriangle,
+  CheckCircle,
+  XCircle,
+  Clock,
+  FileText,
+  TrendingUp,
+  PlayCircle,
+  Archive,
+  AlertCircle,
+} from "lucide-react"
+
+// ============================================
+// TYPES
+// ============================================
+
+export type ServiceHealth = "healthy" | "degraded" | "down"
+export type ScanResult = "clean" | "infected" | "error"
+export type ThreatSeverity = "critical" | "high" | "medium" | "low"
+
+export interface ScanEntry {
+  id: string
+  filename: string
+  result: ScanResult
+  threatName?: string
+  scanDate: Date
+  duration: number // ms
+  fileSize: number
+  userId?: string
+}
+
+export interface ThreatInfo {
+  name: string
+  count: number
+  severity: ThreatSeverity
+}
+
+export interface WeeklyStat {
+  day: string
+  scans: number
+  threats: number
+}
+
+export interface AntivirusDashboardProps {
+  serviceHealth?: ServiceHealth
+  clamavVersion?: string
+  signatureCount?: number
+  lastSignatureUpdate?: Date
+  scansToday?: number
+  threatsDetected?: number
+  quarantinedFiles?: number
+  detectionRate?: number
+  recentScans?: ScanEntry[]
+  weeklyStats?: WeeklyStat[]
+  topThreats?: ThreatInfo[]
+  onStartScan?: () => void
+  onViewQuarantine?: () => void
+  className?: string
+}
+
+// ============================================
+// CONFIG & HELPERS
+// ============================================
+
+const serviceHealthConfig: Record<ServiceHealth, { color: string; icon: React.ReactNode; label: string }> = {
+  healthy: { color: "text-green-500 bg-green-500/10", icon: <ShieldCheck className="h-4 w-4" />, label: "Healthy" },
+  degraded: { color: "text-yellow-500 bg-yellow-500/10", icon: <ShieldAlert className="h-4 w-4" />, label: "Degraded" },
+  down: { color: "text-red-500 bg-red-500/10", icon: <ShieldX className="h-4 w-4" />, label: "Down" },
+}
+
+const scanResultConfig: Record<ScanResult, { color: string; icon: React.ReactNode; label: string; bgColor: string }> = {
+  clean: { color: "text-green-500", icon: <CheckCircle className="h-4 w-4" />, label: "Clean", bgColor: "bg-green-500" },
+  infected: { color: "text-red-500", icon: <XCircle className="h-4 w-4" />, label: "Infected", bgColor: "bg-red-500" },
+  error: { color: "text-orange-500", icon: <AlertCircle className="h-4 w-4" />, label: "Error", bgColor: "bg-orange-500" },
+}
+
+const threatSeverityConfig: Record<ThreatSeverity, { color: string; bgColor: string }> = {
+  critical: { color: "text-red-500", bgColor: "bg-red-500" },
+  high: { color: "text-orange-500", bgColor: "bg-orange-500" },
+  medium: { color: "text-yellow-500", bgColor: "bg-yellow-500" },
+  low: { color: "text-blue-500", bgColor: "bg-blue-500" },
+}
+
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+}
+
+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${ms}ms`
+  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`
+  return `${Math.floor(ms / 60000)}m ${Math.floor((ms % 60000) / 1000)}s`
+}
+
+function formatRelativeTime(date: Date): string {
+  const now = new Date()
+  const diff = now.getTime() - date.getTime()
+  const minutes = Math.floor(diff / 60000)
+  const hours = Math.floor(minutes / 60)
+  const days = Math.floor(hours / 24)
+
+  if (minutes < 1) return "just now"
+  if (minutes < 60) return `${minutes}m ago`
+  if (hours < 24) return `${hours}h ago`
+  return `${days}d ago`
+}
+
+// ============================================
+// SUBCOMPONENTS
+// ============================================
+
+function ServiceHealthBadge({ health }: { health: ServiceHealth }) {
+  const config = serviceHealthConfig[health]
+  return (
+    <Badge variant="outline" className={cn("gap-1", config.color)}>
+      {config.icon}
+      {config.label}
+    </Badge>
+  )
+}
+
+function ScanResultBadge({ result }: { result: ScanResult }) {
+  const config = scanResultConfig[result]
+  return (
+    <Badge variant="outline" className={cn("gap-1", config.color)}>
+      {config.icon}
+      {config.label}
+    </Badge>
+  )
+}
+
+function KPICard({
+  title,
+  value,
+  icon,
+  trend,
+  color = "text-primary"
+}: {
+  title: string
+  value: string | number
+  icon: React.ReactNode
+  trend?: string
+  color?: string
+}) {
+  return (
+    <Card>
+      <CardContent className="p-6">
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="text-sm text-muted-foreground mb-1">{title}</p>
+            <div className="flex items-baseline gap-2">
+              <p className={cn("text-3xl font-bold", color)}>{value}</p>
+              {trend && (
+                <span className="text-xs text-muted-foreground">{trend}</span>
+              )}
+            </div>
+          </div>
+          <div className={cn("p-3 rounded-lg", `${color.replace("text-", "bg-")}/10`)}>
+            {icon}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+function WeeklyChart({ stats }: { stats: WeeklyStat[] }) {
+  const maxValue = Math.max(...stats.map(s => Math.max(s.scans, s.threats)), 1)
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-base flex items-center gap-2">
+          <TrendingUp className="h-4 w-4" />
+          Weekly Activity
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-4">
+          {stats.map((stat, index) => {
+            const scansPercent = (stat.scans / maxValue) * 100
+            const threatsPercent = (stat.threats / maxValue) * 100
+
+            return (
+              <div key={stat.day} className="space-y-2">
+                <div className="flex items-center justify-between text-sm">
+                  <span className="text-muted-foreground min-w-12">{stat.day}</span>
+                  <div className="flex items-center gap-4 text-xs">
+                    <span className="flex items-center gap-1">
+                      <div className="w-2 h-2 rounded-full bg-blue-500" />
+                      {stat.scans} scans
+                    </span>
+                    <span className="flex items-center gap-1">
+                      <div className="w-2 h-2 rounded-full bg-red-500" />
+                      {stat.threats} threats
+                    </span>
+                  </div>
+                </div>
+                <div className="space-y-1">
+                  <div className="h-2 w-full bg-muted rounded-full overflow-hidden">
+                    <div
+                      className="h-full bg-blue-500 rounded-full transition-all"
+                      style={{ width: `${scansPercent}%` }}
+                    />
+                  </div>
+                  {stat.threats > 0 && (
+                    <div className="h-2 w-full bg-muted rounded-full overflow-hidden">
+                      <div
+                        className="h-full bg-red-500 rounded-full transition-all"
+                        style={{ width: `${threatsPercent}%` }}
+                      />
+                    </div>
+                  )}
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+function RecentScansTable({ scans }: { scans: ScanEntry[] }) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-base flex items-center gap-2">
+          <Activity className="h-4 w-4" />
+          Recent Scans
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-3">
+          {scans.length === 0 ? (
+            <div className="text-center py-8 text-muted-foreground">
+              <Shield className="h-12 w-12 mx-auto mb-3 opacity-50" />
+              <p className="text-sm">No scans yet</p>
+            </div>
+          ) : (
+            scans.map((scan) => (
+              <div
+                key={scan.id}
+                className={cn(
+                  "flex items-center justify-between p-3 rounded-lg border transition-colors",
+                  scan.result === "infected" && "border-red-500/50 bg-red-500/5"
+                )}
+              >
+                <div className="flex items-center gap-3 flex-1 min-w-0">
+                  <div className={cn("p-2 rounded-lg shrink-0", scanResultConfig[scan.result].color.replace("text-", "bg-") + "/10")}>
+                    {scanResultConfig[scan.result].icon}
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2 flex-wrap">
+                      <p className="text-sm font-medium truncate">{scan.filename}</p>
+                      <ScanResultBadge result={scan.result} />
+                    </div>
+                    {scan.threatName && (
+                      <p className="text-xs text-red-500 mt-1 flex items-center gap-1">
+                        <AlertTriangle className="h-3 w-3" />
+                        {scan.threatName}
+                      </p>
+                    )}
+                    <div className="flex items-center gap-3 mt-1 text-xs text-muted-foreground">
+                      <span className="flex items-center gap-1">
+                        <Clock className="h-3 w-3" />
+                        {formatRelativeTime(scan.scanDate)}
+                      </span>
+                      <span>{formatDuration(scan.duration)}</span>
+                      <span>{formatFileSize(scan.fileSize)}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+function TopThreatsTable({ threats }: { threats: ThreatInfo[] }) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-base flex items-center gap-2">
+          <AlertTriangle className="h-4 w-4" />
+          Top Threats
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-3">
+          {threats.length === 0 ? (
+            <div className="text-center py-8 text-muted-foreground">
+              <ShieldCheck className="h-12 w-12 mx-auto mb-3 text-green-500 opacity-50" />
+              <p className="text-sm">No threats detected</p>
+            </div>
+          ) : (
+            threats.map((threat, index) => {
+              const sevConfig = threatSeverityConfig[threat.severity]
+              return (
+                <div key={threat.name} className="flex items-center gap-3">
+                  <div className="flex items-center justify-center w-8 h-8 rounded-full bg-muted text-sm font-medium">
+                    {index + 1}
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                      <p className="text-sm font-medium truncate">{threat.name}</p>
+                      <Badge
+                        variant="outline"
+                        className={cn("text-xs capitalize", sevConfig.color)}
+                      >
+                        {threat.severity}
+                      </Badge>
+                    </div>
+                    <div className="flex items-center gap-2 mt-1">
+                      <div className="flex-1 h-2 bg-muted rounded-full overflow-hidden">
+                        <div
+                          className={cn("h-full rounded-full", sevConfig.bgColor)}
+                          style={{ width: `${Math.min((threat.count / Math.max(...threats.map(t => t.count))) * 100, 100)}%` }}
+                        />
+                      </div>
+                      <span className="text-xs text-muted-foreground font-medium min-w-12 text-right">
+                        {threat.count} {threat.count === 1 ? 'time' : 'times'}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              )
+            })
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+// ============================================
+// MAIN COMPONENT
+// ============================================
+
+export function AntivirusDashboard({
+  serviceHealth = "healthy",
+  clamavVersion = "1.0.3",
+  signatureCount = 8642758,
+  lastSignatureUpdate,
+  scansToday = 0,
+  threatsDetected = 0,
+  quarantinedFiles = 0,
+  detectionRate = 0,
+  recentScans = [],
+  weeklyStats = [],
+  topThreats = [],
+  onStartScan,
+  onViewQuarantine,
+  className,
+}: AntivirusDashboardProps) {
+  return (
+    <div className={cn("space-y-6", className)}>
+      {/* Header */}
+      <div className="flex flex-col sm:flex-row gap-4 justify-between items-start">
+        <div>
+          <div className="flex items-center gap-3">
+            <div className="p-2 rounded-lg bg-primary/10">
+              <Shield className="h-6 w-6 text-primary" />
+            </div>
+            <div>
+              <h1 className="text-2xl font-bold">Antivirus ClamAV</h1>
+              <p className="text-sm text-muted-foreground">
+                Version {clamavVersion} • {signatureCount.toLocaleString()} signatures
+                {lastSignatureUpdate && (
+                  <> • Updated {formatRelativeTime(lastSignatureUpdate)}</>
+                )}
+              </p>
+            </div>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <ServiceHealthBadge health={serviceHealth} />
+          {onViewQuarantine && (
+            <Button variant="outline" onClick={onViewQuarantine}>
+              <Archive className="h-4 w-4 mr-2" />
+              Quarantine
+            </Button>
+          )}
+          {onStartScan && (
+            <Button onClick={onStartScan}>
+              <PlayCircle className="h-4 w-4 mr-2" />
+              Start Scan
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* KPI Cards */}
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        <KPICard
+          title="Scans Today"
+          value={scansToday.toLocaleString()}
+          icon={<Activity className="h-6 w-6" />}
+          color="text-blue-500"
+        />
+        <KPICard
+          title="Threats Detected"
+          value={threatsDetected.toLocaleString()}
+          icon={<AlertTriangle className="h-6 w-6" />}
+          color="text-red-500"
+        />
+        <KPICard
+          title="Quarantined Files"
+          value={quarantinedFiles.toLocaleString()}
+          icon={<Archive className="h-6 w-6" />}
+          color="text-orange-500"
+        />
+        <KPICard
+          title="Detection Rate"
+          value={`${detectionRate.toFixed(1)}%`}
+          icon={<ShieldCheck className="h-6 w-6" />}
+          color="text-green-500"
+        />
+      </div>
+
+      {/* Charts and Stats */}
+      <div className="grid gap-4 lg:grid-cols-2">
+        <WeeklyChart stats={weeklyStats} />
+        <TopThreatsTable threats={topThreats} />
+      </div>
+
+      {/* Recent Scans */}
+      <RecentScansTable scans={recentScans} />
+    </div>
+  )
+}
+
+// ============================================
+// PRESET DATA
+// ============================================
+
+export const defaultRecentScans: ScanEntry[] = [
+  {
+    id: "scan1",
+    filename: "document.pdf",
+    result: "clean",
+    scanDate: new Date(Date.now() - 5 * 60000),
+    duration: 234,
+    fileSize: 2048576,
+    userId: "user123",
+  },
+  {
+    id: "scan2",
+    filename: "malicious_script.js",
+    result: "infected",
+    threatName: "Trojan.GenericKD.67890123",
+    scanDate: new Date(Date.now() - 15 * 60000),
+    duration: 156,
+    fileSize: 45678,
+    userId: "user456",
+  },
+  {
+    id: "scan3",
+    filename: "eicar_test.txt",
+    result: "infected",
+    threatName: "Eicar-Test-Signature",
+    scanDate: new Date(Date.now() - 30 * 60000),
+    duration: 89,
+    fileSize: 68,
+    userId: "admin",
+  },
+  {
+    id: "scan4",
+    filename: "report_2024.xlsx",
+    result: "clean",
+    scanDate: new Date(Date.now() - 45 * 60000),
+    duration: 567,
+    fileSize: 5242880,
+    userId: "user789",
+  },
+  {
+    id: "scan5",
+    filename: "suspicious_archive.zip",
+    result: "infected",
+    threatName: "Win.Trojan.Genome-9999999",
+    scanDate: new Date(Date.now() - 60 * 60000),
+    duration: 1234,
+    fileSize: 10485760,
+    userId: "user321",
+  },
+]
+
+export const defaultWeeklyStats: WeeklyStat[] = [
+  { day: "Mon", scans: 145, threats: 3 },
+  { day: "Tue", scans: 198, threats: 5 },
+  { day: "Wed", scans: 167, threats: 2 },
+  { day: "Thu", scans: 223, threats: 8 },
+  { day: "Fri", scans: 189, threats: 4 },
+  { day: "Sat", scans: 98, threats: 1 },
+  { day: "Sun", scans: 76, threats: 0 },
+]
+
+export const defaultTopThreats: ThreatInfo[] = [
+  { name: "Eicar-Test-Signature", count: 12, severity: "low" },
+  { name: "Trojan.GenericKD.67890123", count: 8, severity: "high" },
+  { name: "Win.Trojan.Genome-9999999", count: 5, severity: "critical" },
+  { name: "JS.Downloader.Nemucod", count: 4, severity: "medium" },
+  { name: "PHP.Webshell.Generic", count: 3, severity: "high" },
+]
+
+export default AntivirusDashboard