307 lines
13 KiB
TypeScript
307 lines
13 KiB
TypeScript
'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>
|
|
)
|
|
}
|