@wakastellar/ui 2.4.0 → 3.1.0

package/src/blocks/scan-report-generator/index.tsx

@@ -0,0 +1,612 @@
+"use client"
+
+import { useState } from "react"
+import { Badge } from "../../components/badge"
+import { Button } from "../../components/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../../components/card"
+import { Input } from "../../components/input"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../components/select"
+import { Progress } from "../../components/progress"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../components/tabs"
+import { Checkbox } from "../../components/checkbox"
+import { Label } from "../../components/label"
+import {
+  FileText,
+  Download,
+  Mail,
+  Calendar,
+  CheckCircle2,
+  AlertTriangle,
+  XCircle,
+  Shield,
+  TrendingUp,
+  BarChart3,
+  FileSpreadsheet,
+  FileJson,
+} from "lucide-react"
+import { cn } from "../../utils/cn"
+
+export type ReportFormat = "pdf" | "csv" | "json"
+export type ReportType = "executive_summary" | "detailed" | "iso27001_compliance" | "hds_audit"
+
+export interface ReportConfig {
+  startDate: Date
+  endDate: Date
+  format: ReportFormat
+  type: ReportType
+  includeSections: {
+    generalStats: boolean
+    threatDetails: boolean
+    scannedFiles: boolean
+    actionsTaken: boolean
+    recommendations: boolean
+  }
+  recipientEmail?: string
+}
+
+export interface ReportPreview {
+  totalScans: number
+  totalThreats: number
+  detectionRate: number
+  quarantinedFiles: number
+  threatsBySeverity: { severity: string; count: number }[]
+  complianceChecks: { name: string; passed: boolean; details: string }[]
+  weeklyTrend: { week: string; scans: number; threats: number }[]
+}
+
+export interface ScanReportGeneratorProps {
+  config?: Partial<ReportConfig>
+  preview?: ReportPreview
+  isGenerating?: boolean
+  generationProgress?: number
+  onGenerate?: (config: ReportConfig) => void
+  onSchedule?: (config: ReportConfig, frequency: "daily" | "weekly" | "monthly") => void
+  onSendEmail?: (config: ReportConfig, email: string) => void
+  className?: string
+}
+
+const defaultConfig: ReportConfig = {
+  startDate: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000),
+  endDate: new Date(),
+  format: "pdf",
+  type: "executive_summary",
+  includeSections: {
+    generalStats: true,
+    threatDetails: true,
+    scannedFiles: true,
+    actionsTaken: true,
+    recommendations: true,
+  },
+}
+
+const defaultPreview: ReportPreview = {
+  totalScans: 1247,
+  totalThreats: 34,
+  detectionRate: 98.5,
+  quarantinedFiles: 28,
+  threatsBySeverity: [
+    { severity: "critical", count: 3 },
+    { severity: "high", count: 8 },
+    { severity: "medium", count: 15 },
+    { severity: "low", count: 8 },
+  ],
+  complianceChecks: [
+    { name: "Antivirus actif", passed: true, details: "ClamAV opérationnel" },
+    { name: "Scans automatisés", passed: true, details: "Planification quotidienne" },
+    { name: "Quarantaine sécurisée", passed: true, details: "Isolation cryptographique" },
+    { name: "Audit trail", passed: true, details: "Logs immutables activés" },
+  ],
+  weeklyTrend: [
+    { week: "S1", scans: 280, threats: 7 },
+    { week: "S2", scans: 295, threats: 9 },
+    { week: "S3", scans: 340, threats: 11 },
+    { week: "S4", scans: 332, threats: 7 },
+  ],
+}
+
+export function ScanReportGenerator({
+  config: initialConfig,
+  preview: initialPreview,
+  isGenerating = false,
+  generationProgress = 0,
+  onGenerate,
+  onSchedule,
+  onSendEmail,
+  className,
+}: ScanReportGeneratorProps) {
+  const [config, setConfig] = useState<ReportConfig>({ ...defaultConfig, ...initialConfig })
+  const [preview] = useState<ReportPreview>(initialPreview || defaultPreview)
+  const [recipientEmail, setRecipientEmail] = useState("")
+  const [activeTab, setActiveTab] = useState("config")
+
+  const formatIcons: Record<ReportFormat, React.ReactNode> = {
+    pdf: <FileText className="h-4 w-4" />,
+    csv: <FileSpreadsheet className="h-4 w-4" />,
+    json: <FileJson className="h-4 w-4" />,
+  }
+
+  const reportTypeLabels: Record<ReportType, string> = {
+    executive_summary: "Résumé exécutif",
+    detailed: "Détail complet",
+    iso27001_compliance: "Conformité ISO27001",
+    hds_audit: "Audit HDS",
+  }
+
+  const severityColors: Record<string, string> = {
+    critical: "bg-red-500",
+    high: "bg-orange-500",
+    medium: "bg-yellow-500",
+    low: "bg-blue-500",
+  }
+
+  const updateSection = (section: keyof ReportConfig["includeSections"], value: boolean) => {
+    setConfig({
+      ...config,
+      includeSections: {
+        ...config.includeSections,
+        [section]: value,
+      },
+    })
+  }
+
+  const maxThreatCount = Math.max(...preview.threatsBySeverity.map((t) => t.count))
+  const maxTrendValue = Math.max(...preview.weeklyTrend.map((t) => Math.max(t.scans, t.threats)))
+
+  return (
+    <div className={cn("space-y-6", className)}>
+      {/* Header */}
+      <div className="flex items-start justify-between">
+        <div>
+          <h2 className="text-2xl font-bold">Générateur de rapports</h2>
+          <p className="text-sm text-muted-foreground mt-1">
+            Créez des rapports de scan personnalisés pour vos audits de sécurité
+          </p>
+        </div>
+        <Badge variant="outline" className="gap-1.5">
+          <Shield className="h-3.5 w-3.5" />
+          ISO27001 / HDS
+        </Badge>
+      </div>
+
+      {/* Main Content */}
+      <Tabs value={activeTab} onValueChange={setActiveTab}>
+        <TabsList>
+          <TabsTrigger value="config">Configuration</TabsTrigger>
+          <TabsTrigger value="preview">Aperçu</TabsTrigger>
+        </TabsList>
+
+        {/* Configuration Tab */}
+        <TabsContent value="config" className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>Période du rapport</CardTitle>
+              <CardDescription>Sélectionnez la plage de dates à analyser</CardDescription>
+            </CardHeader>
+            <CardContent className="grid gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor="startDate">Date de début</Label>
+                <Input
+                  id="startDate"
+                  type="date"
+                  value={config.startDate.toISOString().split("T")[0]}
+                  onChange={(e) =>
+                    setConfig({ ...config, startDate: new Date(e.target.value) })
+                  }
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="endDate">Date de fin</Label>
+                <Input
+                  id="endDate"
+                  type="date"
+                  value={config.endDate.toISOString().split("T")[0]}
+                  onChange={(e) => setConfig({ ...config, endDate: new Date(e.target.value) })}
+                />
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Type et format</CardTitle>
+              <CardDescription>Choisissez le type de rapport et le format de sortie</CardDescription>
+            </CardHeader>
+            <CardContent className="grid gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor="reportType">Type de rapport</Label>
+                <Select
+                  value={config.type}
+                  onValueChange={(value) => setConfig({ ...config, type: value as ReportType })}
+                >
+                  <SelectTrigger id="reportType">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {Object.entries(reportTypeLabels).map(([value, label]) => (
+                      <SelectItem key={value} value={value}>
+                        {label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="format">Format de sortie</Label>
+                <Select
+                  value={config.format}
+                  onValueChange={(value) => setConfig({ ...config, format: value as ReportFormat })}
+                >
+                  <SelectTrigger id="format">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="pdf">
+                      <span className="flex items-center gap-2">
+                        {formatIcons.pdf}
+                        PDF
+                      </span>
+                    </SelectItem>
+                    <SelectItem value="csv">
+                      <span className="flex items-center gap-2">
+                        {formatIcons.csv}
+                        CSV
+                      </span>
+                    </SelectItem>
+                    <SelectItem value="json">
+                      <span className="flex items-center gap-2">
+                        {formatIcons.json}
+                        JSON
+                      </span>
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Sections à inclure</CardTitle>
+              <CardDescription>Personnalisez le contenu du rapport</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              <div className="flex items-center gap-2">
+                <Checkbox
+                  id="generalStats"
+                  checked={config.includeSections.generalStats}
+                  onCheckedChange={(checked) =>
+                    updateSection("generalStats", checked as boolean)
+                  }
+                />
+                <Label htmlFor="generalStats" className="cursor-pointer">
+                  Statistiques générales
+                </Label>
+              </div>
+              <div className="flex items-center gap-2">
+                <Checkbox
+                  id="threatDetails"
+                  checked={config.includeSections.threatDetails}
+                  onCheckedChange={(checked) =>
+                    updateSection("threatDetails", checked as boolean)
+                  }
+                />
+                <Label htmlFor="threatDetails" className="cursor-pointer">
+                  Détails des menaces détectées
+                </Label>
+              </div>
+              <div className="flex items-center gap-2">
+                <Checkbox
+                  id="scannedFiles"
+                  checked={config.includeSections.scannedFiles}
+                  onCheckedChange={(checked) =>
+                    updateSection("scannedFiles", checked as boolean)
+                  }
+                />
+                <Label htmlFor="scannedFiles" className="cursor-pointer">
+                  Liste des fichiers scannés
+                </Label>
+              </div>
+              <div className="flex items-center gap-2">
+                <Checkbox
+                  id="actionsTaken"
+                  checked={config.includeSections.actionsTaken}
+                  onCheckedChange={(checked) =>
+                    updateSection("actionsTaken", checked as boolean)
+                  }
+                />
+                <Label htmlFor="actionsTaken" className="cursor-pointer">
+                  Actions prises
+                </Label>
+              </div>
+              <div className="flex items-center gap-2">
+                <Checkbox
+                  id="recommendations"
+                  checked={config.includeSections.recommendations}
+                  onCheckedChange={(checked) =>
+                    updateSection("recommendations", checked as boolean)
+                  }
+                />
+                <Label htmlFor="recommendations" className="cursor-pointer">
+                  Recommandations
+                </Label>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Actions */}
+          <div className="flex flex-col sm:flex-row gap-3">
+            <Button
+              className="flex-1"
+              onClick={() => onGenerate?.(config)}
+              disabled={isGenerating}
+            >
+              <Download className="h-4 w-4 mr-2" />
+              Générer le rapport
+            </Button>
+            <Button
+              variant="outline"
+              className="flex-1"
+              onClick={() => onSchedule?.(config, "weekly")}
+              disabled={isGenerating}
+            >
+              <Calendar className="h-4 w-4 mr-2" />
+              Planifier génération
+            </Button>
+          </div>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Envoi par email</CardTitle>
+              <CardDescription>Envoyez le rapport directement par email</CardDescription>
+            </CardHeader>
+            <CardContent className="flex gap-2">
+              <Input
+                placeholder="email@example.com"
+                type="email"
+                value={recipientEmail}
+                onChange={(e) => setRecipientEmail(e.target.value)}
+                className="flex-1"
+              />
+              <Button
+                variant="outline"
+                onClick={() => onSendEmail?.(config, recipientEmail)}
+                disabled={!recipientEmail || isGenerating}
+              >
+                <Mail className="h-4 w-4 mr-2" />
+                Envoyer
+              </Button>
+            </CardContent>
+          </Card>
+
+          {/* Generation Progress */}
+          {isGenerating && (
+            <Card>
+              <CardContent className="pt-6">
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between text-sm">
+                    <span className="text-muted-foreground">Génération en cours...</span>
+                    <span className="font-medium">{generationProgress}%</span>
+                  </div>
+                  <Progress value={generationProgress} />
+                </div>
+              </CardContent>
+            </Card>
+          )}
+        </TabsContent>
+
+        {/* Preview Tab */}
+        <TabsContent value="preview" className="space-y-6">
+          {/* Header Preview */}
+          <Card>
+            <CardContent className="pt-6">
+              <div className="space-y-4">
+                <div className="flex items-start justify-between">
+                  <div>
+                    <div className="h-12 w-12 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center mb-3">
+                      <Shield className="h-6 w-6 text-white" />
+                    </div>
+                    <h3 className="text-xl font-bold">Rapport de scan de sécurité</h3>
+                    <p className="text-sm text-muted-foreground mt-1">
+                      {reportTypeLabels[config.type]}
+                    </p>
+                  </div>
+                  <Badge variant="secondary">
+                    {config.startDate.toLocaleDateString()} -{" "}
+                    {config.endDate.toLocaleDateString()}
+                  </Badge>
+                </div>
+                <div className="text-xs text-muted-foreground">
+                  Généré le {new Date().toLocaleString()}
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Summary Stats */}
+          {config.includeSections.generalStats && (
+            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+              <Card>
+                <CardContent className="pt-6">
+                  <div className="space-y-2">
+                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                      <BarChart3 className="h-4 w-4" />
+                      Total scans
+                    </div>
+                    <div className="text-2xl font-bold">{preview.totalScans.toLocaleString()}</div>
+                  </div>
+                </CardContent>
+              </Card>
+              <Card>
+                <CardContent className="pt-6">
+                  <div className="space-y-2">
+                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                      <AlertTriangle className="h-4 w-4" />
+                      Menaces détectées
+                    </div>
+                    <div className="text-2xl font-bold">{preview.totalThreats}</div>
+                  </div>
+                </CardContent>
+              </Card>
+              <Card>
+                <CardContent className="pt-6">
+                  <div className="space-y-2">
+                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                      <TrendingUp className="h-4 w-4" />
+                      Taux de détection
+                    </div>
+                    <div className="text-2xl font-bold">{preview.detectionRate}%</div>
+                  </div>
+                </CardContent>
+              </Card>
+              <Card>
+                <CardContent className="pt-6">
+                  <div className="space-y-2">
+                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                      <Shield className="h-4 w-4" />
+                      Fichiers en quarantaine
+                    </div>
+                    <div className="text-2xl font-bold">{preview.quarantinedFiles}</div>
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+          )}
+
+          {/* Threats by Severity */}
+          {config.includeSections.threatDetails && (
+            <Card>
+              <CardHeader>
+                <CardTitle>Menaces par sévérité</CardTitle>
+                <CardDescription>Distribution des menaces détectées</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                {preview.threatsBySeverity.map((item) => (
+                  <div key={item.severity} className="space-y-2">
+                    <div className="flex items-center justify-between text-sm">
+                      <span className="capitalize font-medium">{item.severity}</span>
+                      <span className="text-muted-foreground">{item.count}</span>
+                    </div>
+                    <div className="h-2 bg-muted rounded-full overflow-hidden">
+                      <div
+                        className={cn("h-full rounded-full", severityColors[item.severity])}
+                        style={{ width: `${(item.count / maxThreatCount) * 100}%` }}
+                      />
+                    </div>
+                  </div>
+                ))}
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Weekly Trend */}
+          {config.includeSections.generalStats && (
+            <Card>
+              <CardHeader>
+                <CardTitle>Tendance hebdomadaire</CardTitle>
+                <CardDescription>Évolution des scans et menaces</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-4">
+                  <div className="flex items-end gap-4 h-48">
+                    {preview.weeklyTrend.map((item) => (
+                      <div key={item.week} className="flex-1 flex flex-col items-center gap-2">
+                        <div className="flex-1 w-full flex items-end gap-1">
+                          <div
+                            className="flex-1 bg-blue-500 rounded-t"
+                            style={{ height: `${(item.scans / maxTrendValue) * 100}%` }}
+                            title={`Scans: ${item.scans}`}
+                          />
+                          <div
+                            className="flex-1 bg-orange-500 rounded-t"
+                            style={{ height: `${(item.threats / maxTrendValue) * 100}%` }}
+                            title={`Menaces: ${item.threats}`}
+                          />
+                        </div>
+                        <span className="text-xs text-muted-foreground">{item.week}</span>
+                      </div>
+                    ))}
+                  </div>
+                  <div className="flex items-center justify-center gap-6 text-xs">
+                    <div className="flex items-center gap-2">
+                      <div className="h-3 w-3 rounded bg-blue-500" />
+                      <span className="text-muted-foreground">Scans</span>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <div className="h-3 w-3 rounded bg-orange-500" />
+                      <span className="text-muted-foreground">Menaces</span>
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Compliance Checks */}
+          {(config.type === "iso27001_compliance" || config.type === "hds_audit") && (
+            <Card>
+              <CardHeader>
+                <CardTitle>Vérifications de conformité</CardTitle>
+                <CardDescription>
+                  {config.type === "iso27001_compliance"
+                    ? "Conformité ISO27001"
+                    : "Audit HDS"}
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-3">
+                {preview.complianceChecks.map((check, index) => (
+                  <div
+                    key={index}
+                    className="flex items-start gap-3 p-3 rounded-lg border bg-card"
+                  >
+                    {check.passed ? (
+                      <CheckCircle2 className="h-5 w-5 text-green-500 mt-0.5" />
+                    ) : (
+                      <XCircle className="h-5 w-5 text-red-500 mt-0.5" />
+                    )}
+                    <div className="flex-1 space-y-1">
+                      <div className="font-medium">{check.name}</div>
+                      <div className="text-sm text-muted-foreground">{check.details}</div>
+                    </div>
+                    <Badge variant={check.passed ? "default" : "destructive"} className={check.passed ? "bg-green-500/10 text-green-600 border-green-500/20" : ""}>
+                      {check.passed ? "Conforme" : "Non conforme"}
+                    </Badge>
+                  </div>
+                ))}
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Recommendations */}
+          {config.includeSections.recommendations && (
+            <Card>
+              <CardHeader>
+                <CardTitle>Recommandations</CardTitle>
+                <CardDescription>Actions suggérées pour améliorer la sécurité</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <ul className="space-y-2 text-sm">
+                  <li className="flex items-start gap-2">
+                    <span className="text-muted-foreground mt-1">•</span>
+                    <span>Augmenter la fréquence des scans pour les répertoires critiques</span>
+                  </li>
+                  <li className="flex items-start gap-2">
+                    <span className="text-muted-foreground mt-1">•</span>
+                    <span>Mettre à jour les signatures de virus (dernière mise à jour: il y a 2h)</span>
+                  </li>
+                  <li className="flex items-start gap-2">
+                    <span className="text-muted-foreground mt-1">•</span>
+                    <span>Configurer des alertes en temps réel pour les menaces critiques</span>
+                  </li>
+                  <li className="flex items-start gap-2">
+                    <span className="text-muted-foreground mt-1">•</span>
+                    <span>Réviser la politique de quarantaine automatique</span>
+                  </li>
+                </ul>
+              </CardContent>
+            </Card>
+          )}
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}

package/src/blocks/sidebar/index.tsx

@@ -596,7 +596,8 @@ export function WakaSidebar({
     "bg-[var(--sidebar-bg)] text-[var(--sidebar-text)]",
     "[&_.bg-sidebar-active]:bg-[var(--sidebar-active)]",
     "[&_.text-sidebar-active-foreground]:text-[var(--sidebar-active-foreground)]",
-    "[&_.text-sidebar-foreground\\/70]:text-[var(--sidebar-text)]/70",
+    "[&_.text-sidebar-foreground\\/70]:text-[var(--sidebar-text)]",
+    "[&_.text-sidebar-foreground\\/70]:opacity-70",
     "[&_.border-sidebar-active]:border-[var(--sidebar-active)]",
     contentClassName
   )