b6167bcb-7363-4695-9481-addd81de4367

src/components/aos/views/licenses.tsx

@@ -0,0 +1,306 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  Plus,
+  KeyRound,
+  ShieldCheck,
+  AlertTriangle,
+  CalendarClock,
+  RefreshCw,
+  CheckCircle2,
+  XCircle,
+  PauseCircle,
+} from 'lucide-react'
+import { useFetch } from '@/hooks/use-fetch'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Skeleton } from '@/components/ui/skeleton'
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
+import { PageHeader } from '../primitives'
+import { formatEuro, formatDate, daysUntil } from '@/lib/format'
+import { cn } from '@/lib/utils'
+
+interface License {
+  id: string
+  key: string
+  product: string
+  plan: string
+  status: string
+  maxActivations: number
+  validUntil: string | null
+  createdAt: string
+  company: { id: string; name: string }
+  activations: { id: string; domain: string; environment: string; version: string | null; lastCheck: string }[]
+}
+interface Asset {
+  id: string
+  name: string
+  type: string
+  provider: string | null
+  costCentsPerMonth: number | null
+  renewalDate: string
+  rebill: boolean
+  markupPct: number
+  status: string
+}
+interface LicensesData {
+  licenses: License[]
+  assets: Asset[]
+  stats: {
+    activeLicenses: number
+    suspended: number
+    expired: number
+    totalActivations: number
+    expiringSoon: number
+    expiredAssets: number
+    monthlyRebill: number
+  }
+}
+
+const LIC_STATUS: Record<string, { label: string; icon: typeof CheckCircle2 }> = {
+  active: { label: 'Aktiv', icon: CheckCircle2 },
+  suspended: { label: 'Suspendiert', icon: PauseCircle },
+  expired: { label: 'Abgelaufen', icon: XCircle },
+  revoked: { label: 'Widerrufen', icon: XCircle },
+}
+
+const ASSET_TYPE_LABELS: Record<string, string> = {
+  domain: 'Domain',
+  hosting: 'Hosting',
+  ssl: 'SSL',
+  'plugin-seat': 'Plugin-Seat',
+  saas: 'SaaS',
+}
+
+export function LicensesView() {
+  const { data, loading } = useFetch<LicensesData>('/api/aos/licenses')
+
+  if (loading || !data) {
+    return (
+      <div className="space-y-6 p-4 md:p-6">
+        <Skeleton className="h-9 w-32" />
+        <Skeleton className="h-48" />
+      </div>
+    )
+  }
+
+  const { licenses, assets, stats } = data
+
+  return (
+    <div className="space-y-6 p-4 md:p-6">
+      <PageHeader
+        title="Lizenzverwaltung"
+        description="Ausgestellte Produktlizenzen mit Ed25519-signierten Tokens und Erneuerungsregister für verwaltete Assets."
+        actions={
+          <Button size="sm">
+            <Plus className="size-4" />
+            Lizenz ausstellen
+          </Button>
+        }
+      />
+
+      <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
+        <Card className="p-4">
+          <div className="flex items-center justify-between">
+            <p className="text-xs text-muted-foreground">Aktive Lizenzen</p>
+            <KeyRound className="size-3.5 text-muted-foreground" />
+          </div>
+          <p className="mt-1 text-2xl font-semibold tabular-nums">{stats.activeLicenses}</p>
+        </Card>
+        <Card className="p-4">
+          <div className="flex items-center justify-between">
+            <p className="text-xs text-muted-foreground">Aktivierungen</p>
+            <ShieldCheck className="size-3.5 text-muted-foreground" />
+          </div>
+          <p className="mt-1 text-2xl font-semibold tabular-nums">{stats.totalActivations}</p>
+        </Card>
+        <Card className="p-4">
+          <div className="flex items-center justify-between">
+            <p className="text-xs text-muted-foreground">Erneuerungen fällig</p>
+            <AlertTriangle className="size-3.5 text-muted-foreground" />
+          </div>
+          <p className="mt-1 text-2xl font-semibold tabular-nums">{stats.expiringSoon + stats.expiredAssets}</p>
+          <p className="text-[10px] text-muted-foreground">{stats.expiredAssets} abgelaufen</p>
+        </Card>
+        <Card className="p-4">
+          <div className="flex items-center justify-between">
+            <p className="text-xs text-muted-foreground">Monatl. Weiterbelastung</p>
+            <CalendarClock className="size-3.5 text-muted-foreground" />
+          </div>
+          <p className="mt-1 text-2xl font-semibold tabular-nums">{formatEuro(stats.monthlyRebill)}</p>
+        </Card>
+      </div>
+
+      <Tabs defaultValue="licenses">
+        <TabsList>
+          <TabsTrigger value="licenses">Ausgestellte Lizenzen</TabsTrigger>
+          <TabsTrigger value="assets">Erneuerungsregister</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="licenses" className="mt-4">
+          <Card>
+            <CardHeader className="pb-2">
+              <CardTitle className="text-sm">Produktlizenzen ({licenses.length})</CardTitle>
+            </CardHeader>
+            <CardContent className="p-0">
+              <div className="overflow-x-auto">
+                <table className="w-full text-sm">
+                  <thead className="border-y border-border bg-muted/40 text-left text-[11px] uppercase tracking-wide text-muted-foreground">
+                    <tr>
+                      <th className="px-4 py-2 font-medium">Lizenzschlüssel</th>
+                      <th className="px-4 py-2 font-medium">Produkt / Plan</th>
+                      <th className="px-4 py-2 font-medium">Kunde</th>
+                      <th className="px-4 py-2 font-medium">Aktivierungen</th>
+                      <th className="px-4 py-2 font-medium">Status</th>
+                      <th className="px-4 py-2 font-medium">Gültig bis</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-border">
+                    {licenses.map((l) => {
+                      const st = LIC_STATUS[l.status] ?? LIC_STATUS.active
+                      const Icon = st.icon
+                      const valid = l.validUntil ? daysUntil(l.validUntil) : null
+                      return (
+                        <tr key={l.id} className="transition hover:bg-muted/40">
+                          <td className="px-4 py-2.5">
+                            <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-[11px]">{l.key}</code>
+                          </td>
+                          <td className="px-4 py-2.5">
+                            <p className="text-xs font-medium">{l.product}</p>
+                            <Badge variant="outline" className="mt-0.5 text-[10px] capitalize">{l.plan}</Badge>
+                          </td>
+                          <td className="px-4 py-2.5 text-xs">{l.company.name}</td>
+                          <td className="px-4 py-2.5">
+                            <span className="text-xs tabular-nums">
+                              {l.activations.length} / {l.maxActivations}
+                            </span>
+                            {l.activations[0] && (
+                              <p className="text-[10px] text-muted-foreground">{l.activations[0].domain}</p>
+                            )}
+                          </td>
+                          <td className="px-4 py-2.5">
+                            <Badge variant="outline" className={cn('gap-1 text-[10px]', l.status === 'active' && 'border-foreground/40')}>
+                              <Icon className="size-3" />{st.label}
+                            </Badge>
+                          </td>
+                          <td className="px-4 py-2.5 text-xs">
+                            {l.validUntil ? (
+                              <span className={cn(valid !== null && valid < 0 && 'text-foreground')}>
+                                {formatDate(l.validUntil)}
+                                {valid !== null && (
+                                  <span className="ml-1 text-[10px] text-muted-foreground">
+                                    {valid < 0 ? `(${Math.abs(valid)} d vorbei)` : `(${valid} d)`}
+                                  </span>
+                                )}
+                              </span>
+                            ) : '—'}
+                          </td>
+                        </tr>
+                      )
+                    })}
+                  </tbody>
+                </table>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Signing info card */}
+          <Card className="mt-4">
+            <CardContent className="p-4">
+              <div className="flex items-start gap-3">
+                <div className="flex size-9 items-center justify-center rounded-md border border-border">
+                  <ShieldCheck className="size-4 text-muted-foreground" />
+                </div>
+                <div className="flex-1">
+                  <p className="text-sm font-medium">Ed25519-signierte Lizenz-Tokens</p>
+                  <p className="mt-1 text-xs text-muted-foreground">
+                    Jede Lizenz hat einen menschenlesbaren Schlüssel plus einen kryptografisch signierten Token. Kunden können offline verifizieren.
+                    Der private Schlüssel ist verschlüsselt (AES-256-GCM); Rotation wird unterstützt.
+                  </p>
+                  <div className="mt-2 flex flex-wrap gap-2">
+                    <Badge variant="outline" className="text-[10px]">Public API: /api/v1/validate</Badge>
+                    <Badge variant="outline" className="text-[10px]">WordPress-Updater kompatibel</Badge>
+                    <Badge variant="outline" className="text-[10px]">Offline-Grace: 14 d</Badge>
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="assets" className="mt-4">
+          <Card>
+            <CardHeader className="pb-2">
+              <CardTitle className="text-sm">Asset- & Erneuerungsregister ({assets.length})</CardTitle>
+            </CardHeader>
+            <CardContent className="p-0">
+              <div className="overflow-x-auto">
+                <table className="w-full text-sm">
+                  <thead className="border-y border-border bg-muted/40 text-left text-[11px] uppercase tracking-wide text-muted-foreground">
+                    <tr>
+                      <th className="px-4 py-2 font-medium">Asset</th>
+                      <th className="px-4 py-2 font-medium">Typ</th>
+                      <th className="px-4 py-2 font-medium">Anbieter</th>
+                      <th className="px-4 py-2 font-medium">Kosten/Monat</th>
+                      <th className="px-4 py-2 font-medium">Erneuerung</th>
+                      <th className="px-4 py-2 font-medium">Weiterbelasten</th>
+                      <th className="px-4 py-2 font-medium">Status</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-border">
+                    {assets.map((a) => {
+                      const days = daysUntil(a.renewalDate)
+                      return (
+                        <tr key={a.id} className="transition hover:bg-muted/40">
+                          <td className="px-4 py-2.5 text-xs font-medium">{a.name}</td>
+                          <td className="px-4 py-2.5">
+                            <Badge variant="secondary" className="text-[10px]">{ASSET_TYPE_LABELS[a.type] ?? a.type}</Badge>
+                          </td>
+                          <td className="px-4 py-2.5 text-xs text-muted-foreground">{a.provider ?? '—'}</td>
+                          <td className="px-4 py-2.5 text-xs tabular-nums">
+                            {a.costCentsPerMonth ? formatEuro(a.costCentsPerMonth) : '—'}
+                          </td>
+                          <td className="px-4 py-2.5 text-xs">
+                            <span className={cn(days < 0 && 'text-foreground')}>
+                              {formatDate(a.renewalDate)}
+                            </span>
+                            <span className="ml-1 text-[10px] text-muted-foreground">
+                              {days < 0 ? `(${Math.abs(days)} d vorbei)` : `(${days} d)`}
+                            </span>
+                          </td>
+                          <td className="px-4 py-2.5">
+                            {a.rebill ? (
+                              <Badge variant="outline" className="text-[10px] gap-1">
+                                <RefreshCw className="size-2.5" />+{a.markupPct}%
+                              </Badge>
+                            ) : (
+                              <span className="text-[10px] text-muted-foreground">—</span>
+                            )}
+                          </td>
+                          <td className="px-4 py-2.5">
+                            <Badge
+                              variant="outline"
+                              className={cn(
+                                'text-[10px]',
+                                a.status === 'expired' && 'border-foreground/40',
+                                a.status === 'expiring' && 'border-foreground/30'
+                              )}
+                            >
+                              {a.status === 'expired' ? 'Abgelaufen' : a.status === 'expiring' ? 'Läuft ab' : 'Aktiv'}
+                            </Badge>
+                          </td>
+                        </tr>
+                      )
+                    })}
+                  </tbody>
+                </table>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}