Lizenzverwaltung: Übersicht, Vergabe, Aktivierungen, Lebenszyklus und Kundensicht
Neuer Menüpunkt "Lizenzen" (Personal) bzw. "Meine Lizenzen" (Kunden): - Übersicht mit Kennzahlen, Filtern (aktiv, läuft in 30 Tagen ab, gesperrt, abgelaufen, ohne Kunde) und Suche; Dashboard-Kachel - Vergabe mit Vertrag (normaler Bestellweg) oder ohne Berechnung direkt im Lizenzsystem: Lizenz, Test (Trial) oder Add-on zu einer Basislizenz - Detailseite: Schlüssel, Geräte (Aktivierungen) freigeben, Sperren/Entsperren, Verlängern, Widerrufen, Limits, Funktionsumfang (Entitlement), Produktwechsel bzw. Testumwandlung, Add-ons, Verlauf - Kunden-Selbstbedienung: Inhaber/Admin geben eigene Geräte frei Verwaltungs-Client für das Lizenzsystem in @kc/connector-licensing (createLicensingAdmin), Fehlermeldungen des Lizenzsystems werden verständlich weitergereicht. Alle Änderungen im Audit-Protokoll; der lokale Stand wird danach sofort aktualisiert. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Claude
parent
9336f46d0a
commit
a322166d01
11 changed files with 784 additions and 31 deletions
|
|
@ -9,6 +9,7 @@ interface Sys { jobs: Record<string, number>; oldestPendingJob: string | null; b
|
|||
export default function Dashboard() {
|
||||
const { me, can } = useSession();
|
||||
const [mine, setMine] = useState<{ contracts: { status: string; cancelEffectiveAt: string | null }[]; resources: { state: string; stale: boolean }[]; orders: { status: string }[] } | null>(null);
|
||||
const [licenses, setLicenses] = useState<{ active: number; expiring: number; unassigned: number } | null>(null);
|
||||
const [customers, setCustomers] = useState<number | null>(null); const [sys, setSys] = useState<Sys | null>(null); const [err, setErr] = useState('');
|
||||
useEffect(() => {
|
||||
if (me?.kind === 'customer') {
|
||||
|
|
@ -18,6 +19,7 @@ export default function Dashboard() {
|
|||
if (!me || me.kind !== 'staff') return;
|
||||
if (can('customers.read')) api<unknown[]>('GET', '/admin/customers').then((l) => setCustomers(l.length)).catch((e) => setErr(errMsg(e)));
|
||||
if (can('jobs.read')) api<Sys>('GET', '/admin/system').then(setSys).catch((e) => setErr(errMsg(e)));
|
||||
if (can('licenses.read')) api<{ active: number; expiring: number; unassigned: number }>('GET', '/admin/licenses/summary').then(setLicenses).catch(() => undefined);
|
||||
}, [me, can]);
|
||||
if (!me) return null;
|
||||
const failed = sys ? (sys.jobs.failed ?? 0) + (sys.jobs.needs_review ?? 0) : 0;
|
||||
|
|
@ -37,6 +39,7 @@ export default function Dashboard() {
|
|||
</>) : (<>
|
||||
<div className="grid">
|
||||
{customers !== null && <div className="card"><div className="stat">{customers}</div><p className="muted">Kunden</p><Link href="/admin/kunden">Kunden verwalten</Link></div>}
|
||||
{licenses && <div className="card"><div className="stat">{licenses.active}</div><p className="muted">Aktive Lizenzen</p>{licenses.expiring > 0 && <p className="small"><span className="badge warn"><span aria-hidden="true">▲</span>{licenses.expiring} laufen in 30 Tagen ab</span></p>}{licenses.unassigned > 0 && <p className="small"><span className="badge warn"><span aria-hidden="true">▲</span>{licenses.unassigned} ohne Kunde</span></p>}<Link href="/lizenzen">Lizenzen verwalten</Link></div>}
|
||||
{sys && <div className="card"><div className="stat">{sys.jobs.scheduled ?? 0}</div><p className="muted">Wartende Aufträge</p></div>}
|
||||
{sys?.backup && <div className="card"><h3>Backup</h3><p className="small"><Link href="/einstellungen/backup">Details und Einstellungen</Link></p>
|
||||
{!sys.backup.configured ? <><p className="muted">Nicht eingerichtet.</p><span className="badge warn"><span aria-hidden="true">▲</span>Kein Backup</span></>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ export default function AppLayout({ children }: { children: ReactNode }) {
|
|||
);
|
||||
async function logout() { await api('POST', '/auth/logout'); await reload(); r.replace('/login'); }
|
||||
async function stopImpersonation() { const orgId = me!.impersonating!.orgId; await api('POST', '/auth/impersonate/stop'); await reload(); r.replace(`/admin/kunden/${orgId}`); }
|
||||
const produkte = [(me.kind === 'customer' || can('resources.read')) && ['/ressourcen', 'Ressourcen'], (me.kind === 'customer' || can('contracts.read')) && ['/vertraege', 'Verträge'], (me.kind === 'customer' || can('orders.read')) && ['/bestellungen', 'Bestellungen']].filter(Boolean) as [string, string][];
|
||||
const produkte = [(me.kind === 'customer' || can('licenses.read')) && ['/lizenzen', me.kind === 'customer' ? 'Meine Lizenzen' : 'Lizenzen'], (me.kind === 'customer' || can('resources.read')) && ['/ressourcen', 'Ressourcen'], (me.kind === 'customer' || can('contracts.read')) && ['/vertraege', 'Verträge'], (me.kind === 'customer' || can('orders.read')) && ['/bestellungen', 'Bestellungen']].filter(Boolean) as [string, string][];
|
||||
const verwaltung = [can('customers.read') && ['/admin/kunden', 'Kunden'], can('products.read') && ['/admin/produkte', 'Produkte'], can('domains.read') && ['/admin/domains', 'Domain-Aufstellung'], can('users.read') && ['/admin/benutzer', 'Benutzer'], can('jobs.read') && ['/admin/auftraege', 'Aufträge'], can('audit.read') && ['/admin/audit', 'Audit-Protokoll'], (can('connectors.read') || can('backup.read')) && ['/einstellungen', 'Einstellungen']].filter(Boolean) as [string, string][];
|
||||
const nav = (
|
||||
<nav className={`nav ${open ? 'open' : ''}`} aria-label="Hauptnavigation">
|
||||
|
|
|
|||
170
apps/web/src/app/(app)/lizenzen/[id]/page.tsx
Normal file
170
apps/web/src/app/(app)/lizenzen/[id]/page.tsx
Normal file
|
|
@ -0,0 +1,170 @@
|
|||
'use client';
|
||||
import { useCallback, useEffect, useState, type FormEvent, type ReactNode } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useParams } from 'next/navigation';
|
||||
import { api, errMsg } from '@/lib/api';
|
||||
import { useSession } from '@/lib/session';
|
||||
import { Alert, Field, ResState, fmt } from '@/components/ui';
|
||||
import { SecretField } from '@/components/SecretField';
|
||||
import { LicKind, type Lic } from '@/components/Licenses';
|
||||
|
||||
interface Activation { id: number; instanceId: string | null; hardwareIdMasked: string | null; environment: string | null; lastSeenIp: string | null; productVersion: string | null; activatedAt: string; lastSeenAt: string }
|
||||
interface Detail extends Lic {
|
||||
live: boolean; liveError: string | null; activations: Activation[];
|
||||
entitlement: { plan: string | null; modules: string[]; customerLimit: number | null; version: number } | null;
|
||||
limits: { maxActivations: number | null; activationLimit: number | null; userLimit: number | null; graceDays: number | null; effectiveGraceDays: number | null } | null;
|
||||
origin: { source: string | null; orderRef: string | null; externalRef: string | null; customerName: string | null; customerEmail: string | null; createdAt: string | null } | null;
|
||||
providerStatus: string | null; revokeReason: string | null; durationType: string | null; productId: number | null; programId: number | null; lastCheckAt: string | null;
|
||||
addons: Lic[]; parent: Lic | null; history: { action: string; result: string; at: string; actor: string | null }[];
|
||||
can: { reveal: boolean; resetActivation: boolean; manage: boolean };
|
||||
}
|
||||
interface CatalogProduct { id: number; name: string; groupName: string; programId: number; type: string; durationType: string; active: boolean }
|
||||
const DURATION: Record<string, string> = { WEEK: 'Woche', MONTH: 'Monat', YEAR: 'Jahr', UNLIMITED: 'unbefristet', TRIAL: 'Test' };
|
||||
const HISTORY: Record<string, string> = {
|
||||
'license.issue': 'Lizenz vergeben', 'license.update': 'Lizenz geändert', 'license.entitlement': 'Funktionsumfang geändert', 'license.suspend': 'Gesperrt', 'license.unsuspend': 'Entsperrt',
|
||||
'license.extend': 'Verlängert', 'license.revoke': 'Widerrufen', 'license.activation.reset': 'Gerät freigegeben', 'resource.reveal': 'Schlüssel angezeigt', 'resource.update': 'Zuordnung geändert',
|
||||
'resource.suspend': 'Gesperrt (Vertrag)', 'resource.unsuspend': 'Entsperrt (Vertrag)', 'resource.extend': 'Verlängert (Vertrag)',
|
||||
};
|
||||
const Dd = ({ label, children }: { label: string; children: ReactNode }) => <div><dt className="muted small">{label}</dt><dd style={{ margin: 0 }}>{children}</dd></div>;
|
||||
const toLocalInput = (iso: string | null) => (iso ? new Date(new Date(iso).getTime() - new Date().getTimezoneOffset() * 60000).toISOString().slice(0, 10) : '');
|
||||
|
||||
export default function Lizenz() {
|
||||
const { id } = useParams<{ id: string }>(); const { can } = useSession(); const staff = can('licenses.read');
|
||||
const [d, setD] = useState<Detail | null>(null); const [msg, setMsg] = useState<{ k: 'ok' | 'err' | 'warn'; t: string } | null>(null); const [busy, setBusy] = useState(false);
|
||||
const [confirm, setConfirm] = useState<null | { title: string; text: string; run: () => Promise<unknown> }>(null);
|
||||
const [products, setProducts] = useState<CatalogProduct[] | null>(null);
|
||||
const load = useCallback(() => api<Detail>('GET', `/licenses/${id}`).then(setD).catch((e) => setMsg({ k: 'err', t: errMsg(e) })), [id]);
|
||||
useEffect(() => { void load(); }, [load]);
|
||||
useEffect(() => { if (d?.can.manage && products === null) api<{ products: CatalogProduct[] }>('GET', '/admin/licenses/catalog').then((c) => setProducts(c.products)).catch(() => setProducts([])); }, [d?.can.manage, products]);
|
||||
if (!d) return msg ? <Alert kind={msg.k}>{msg.t}</Alert> : <p className="muted" role="status">Wird geladen …</p>;
|
||||
|
||||
async function act(fn: () => Promise<unknown>, ok: string) {
|
||||
setBusy(true); setMsg(null);
|
||||
try { await fn(); setMsg({ k: 'ok', t: ok }); setConfirm(null); await load(); } catch (x) { setMsg({ k: 'err', t: errMsg(x) }); setConfirm(null); } finally { setBusy(false); }
|
||||
}
|
||||
const ask = (title: string, text: string, run: () => Promise<unknown>) => setConfirm({ title, text, run });
|
||||
const lifecycle = (body: Record<string, unknown>) => api('POST', `/admin/licenses/${id}/lifecycle`, body);
|
||||
const sameKind = (products ?? []).filter((p) => p.programId === d.programId && (p.type === 'ADDON') === d.addon);
|
||||
const used = d.activations.length; const limit = d.limits?.activationLimit ?? d.activationLimit;
|
||||
|
||||
function saveLimits(e: FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault(); const f = new FormData(e.currentTarget); const n = (k: string) => { const v = String(f.get(k) ?? '').trim(); return v === '' ? null : Number(v); };
|
||||
const body: Record<string, unknown> = { maxActivations: n('maxActivations') ?? undefined, userLimit: n('userLimit'), graceDays: n('graceDays') };
|
||||
if (!d!.addon) body.customerLimit = n('customerLimit');
|
||||
void act(() => api('PATCH', `/admin/licenses/${id}`, body), 'Limits gespeichert.');
|
||||
}
|
||||
function saveEntitlement(e: FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault(); const f = new FormData(e.currentTarget);
|
||||
const modules = String(f.get('modules') ?? '').split(/[\n,]/).map((x) => x.trim()).filter(Boolean);
|
||||
void act(() => api('POST', `/admin/licenses/${id}/entitlement`, { planKey: String(f.get('plan') ?? '').trim() || undefined, modules, reason: String(f.get('reason') ?? '').trim() || undefined }), 'Funktionsumfang gespeichert (neue Entitlement-Version).');
|
||||
}
|
||||
function changeProduct(e: FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault(); const f = new FormData(e.currentTarget); const productId = Number(f.get('productId')); const durationType = String(f.get('durationType') ?? '');
|
||||
const p = sameKind.find((x) => x.id === productId);
|
||||
ask(d!.trial ? 'Test in Vollversion umwandeln' : 'Produkt wechseln', `Die Lizenz wird auf „${p?.groupName} – ${p?.name}“ umgestellt${durationType ? ` (Laufzeit: ${DURATION[durationType]}, Ablauf wird neu berechnet)` : ''}. Plan, Module und Kundenlimit werden vom neuen Produkt übernommen.`,
|
||||
() => api('PATCH', `/admin/licenses/${id}`, { productId, ...(durationType ? { durationType } : {}) }));
|
||||
}
|
||||
function extend(e: FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault(); const f = new FormData(e.currentTarget); const until = String(f.get('until') ?? ''); const preset = String(f.get('preset') ?? ''); const reason = String(f.get('reason') ?? '').trim() || undefined;
|
||||
if (until) { const iso = new Date(`${until}T23:59:59`).toISOString(); ask('Verlängern', `Die Lizenz gilt dann bis ${fmt(iso)}.`, () => lifecycle({ action: 'extend', until: iso, reason })); return; }
|
||||
if (!preset) { setMsg({ k: 'warn', t: 'Bitte ein Datum oder eine Laufzeit wählen.' }); return; }
|
||||
const [count, durationType] = preset.split(':');
|
||||
ask('Verlängern', `Die Lizenz wird um ${count} ${DURATION[durationType!]}${Number(count) > 1 ? 'e' : ''} verlängert (ab dem späteren von heute und dem aktuellen Ablauf).`, () => lifecycle({ action: 'extend', durationType, count: Number(count), reason }));
|
||||
}
|
||||
|
||||
return (<>
|
||||
<p><Link href="/lizenzen">← Alle Lizenzen</Link></p>
|
||||
<div className="row between"><h1>{d.program ?? d.name}{d.product ? ` · ${d.product}` : ''}</h1><div className="row"><ResState value={d.state} /><LicKind l={d} /></div></div>
|
||||
{msg && <Alert kind={msg.k}>{msg.t}</Alert>}
|
||||
{!d.live && <Alert kind="warn"><strong>Das Lizenzsystem ist gerade nicht erreichbar</strong> ({d.liveError}). Angezeigt wird der Stand vom {fmt(d.syncedAt)}, Änderungen sind währenddessen nicht möglich.</Alert>}
|
||||
{d.trial && d.trialPending && <Alert kind="info">Testlizenz: Die Testzeit beginnt erst mit der ersten Aktivierung.</Alert>}
|
||||
{d.revoked && <Alert kind="err">Diese Lizenz wurde widerrufen{d.revokeReason ? `: ${d.revokeReason}` : ''}. Ein Widerruf ist endgültig.</Alert>}
|
||||
|
||||
{d.can.reveal && <div className="card"><h2>Lizenzschlüssel</h2><SecretField resourceId={d.id} /></div>}
|
||||
|
||||
<div className="card"><h2>Details</h2>
|
||||
<dl className="cols" style={{ margin: 0 }}>
|
||||
{staff && <Dd label="Kunde">{d.orgId ? <Link href={`/admin/kunden/${d.orgId}`}>{d.customerNumber} · {d.orgName}</Link> : 'nicht zugewiesen'}</Dd>}
|
||||
<Dd label="Programm">{d.program ?? '–'}</Dd>
|
||||
<Dd label="Produkt">{d.product ?? d.edition ?? '–'}</Dd>
|
||||
<Dd label="Laufzeit">{d.durationType ? DURATION[d.durationType] ?? d.durationType : '–'}</Dd>
|
||||
<Dd label="Gültig ab">{d.validFrom ? fmt(d.validFrom) : '–'}</Dd>
|
||||
<Dd label="Gültig bis">{d.validUntil ? fmt(d.validUntil) : 'unbefristet'}</Dd>
|
||||
<Dd label="Letzte Prüfung durch das Programm">{d.lastCheckAt ? fmt(d.lastCheckAt) : 'noch nie'}</Dd>
|
||||
<Dd label="Abrechnung">{d.contractId ? <Link href={`/vertraege/${d.contractId}`}>Vertrag {d.contractNumber}</Link> : 'ohne Berechnung'}</Dd>
|
||||
{d.parent && <Dd label="Basislizenz"><Link href={`/lizenzen/${d.parent.id}`}>{d.parent.program}{d.parent.product ? ` · ${d.parent.product}` : ''}</Link></Dd>}
|
||||
{d.entitlement && <Dd label="Plan">{d.entitlement.plan ?? '–'}</Dd>}
|
||||
{d.entitlement && !d.addon && <Dd label="Kundenlimit">{d.entitlement.customerLimit ?? 'unbegrenzt'}</Dd>}
|
||||
{staff && d.origin && <Dd label="Herkunft">{d.origin.source ?? '–'}{d.origin.orderRef ? ` · ${d.origin.orderRef}` : ''}</Dd>}
|
||||
</dl>
|
||||
{d.entitlement && d.entitlement.modules.length > 0 && <p className="small" style={{ marginTop: 16 }}><span className="muted">Freigeschaltete Module:</span> {d.entitlement.modules.join(', ')}</p>}
|
||||
</div>
|
||||
|
||||
<div className="card"><h2>Geräte <span className="muted small">({used} von {limit ?? '∞'})</span></h2>
|
||||
{d.activations.length === 0 ? <p className="muted">{d.live ? 'Die Lizenz ist noch auf keinem Gerät aktiviert.' : 'Keine Angaben verfügbar.'}</p> : <div className="tablewrap"><table><thead><tr><th>Gerät</th><th>Umgebung</th><th>Version</th><th>Aktiviert</th><th>Zuletzt gesehen</th>{staff && <th>IP</th>}<th></th></tr></thead><tbody>
|
||||
{d.activations.map((a) => <tr key={a.id}>
|
||||
<td className="mono small">{a.instanceId ?? a.hardwareIdMasked ?? `#${a.id}`}</td><td>{a.environment ?? '–'}</td><td>{a.productVersion ?? '–'}</td><td>{fmt(a.activatedAt)}</td><td>{fmt(a.lastSeenAt)}</td>{staff && <td className="mono small">{a.lastSeenIp ?? '–'}</td>}
|
||||
<td>{d.can.resetActivation && <button className="btn small" disabled={busy} onClick={() => ask('Gerät freigeben', 'Das Gerät wird von der Lizenz gelöst. Das Programm auf diesem Gerät meldet sich danach als nicht lizenziert; der Platz kann auf einem anderen Gerät genutzt werden.', () => api('DELETE', `/licenses/${id}/activations/${a.id}`))}>Freigeben</button>}</td>
|
||||
</tr>)}</tbody></table></div>}
|
||||
{!staff && d.can.resetActivation && <p className="small muted" style={{ marginTop: 12 }}>Neues Gerät? Altes Gerät hier freigeben, dann das Programm auf dem neuen Gerät mit demselben Schlüssel aktivieren.</p>}
|
||||
</div>
|
||||
|
||||
{d.can.manage && <>
|
||||
<div className="card"><h2>Lebenszyklus</h2>
|
||||
<div className="row" style={{ marginBottom: 16 }}>
|
||||
{d.state !== 'suspended' && !d.revoked && <button className="btn" disabled={busy} onClick={() => ask('Sperren', 'Das Programm meldet sich danach als nicht lizenziert, bis die Lizenz wieder entsperrt wird.', () => lifecycle({ action: 'suspend' }))}>Sperren</button>}
|
||||
{d.state === 'suspended' && !d.revoked && <button className="btn" disabled={busy} onClick={() => ask('Entsperren', 'Die Lizenz ist danach wieder nutzbar.', () => lifecycle({ action: 'unsuspend' }))}>Entsperren</button>}
|
||||
{!d.revoked && <button className="btn" disabled={busy} onClick={() => { const reason = window.prompt('Grund für den Widerruf (Pflicht, wird protokolliert):')?.trim(); if (reason) ask('Endgültig widerrufen', `Der Widerruf ist endgültig und kann nicht rückgängig gemacht werden. Grund: ${reason}`, () => lifecycle({ action: 'revoke', reason })); }}>Widerrufen …</button>}
|
||||
</div>
|
||||
{d.durationType !== 'UNLIMITED' && !d.revoked && <form onSubmit={extend}>
|
||||
<div className="cols">
|
||||
<Field id="preset" label="Verlängern um"><select id="preset" name="preset" defaultValue=""><option value="">–</option>{!d.trial && <><option value="1:MONTH">1 Monat</option><option value="3:MONTH">3 Monate</option><option value="1:YEAR">1 Jahr</option></>}<option value="1:UNLIMITED" disabled={d.trial}>unbefristet</option></select></Field>
|
||||
<Field id="until" label="oder gültig bis (Datum)" hint={d.trial ? 'Tests lassen sich nur mit festem Datum verlängern (Kulanz).' : undefined}><input id="until" name="until" type="date" min={toLocalInput(new Date().toISOString())} /></Field>
|
||||
<Field id="reason" label="Grund (optional, wird protokolliert)"><input id="reason" name="reason" maxLength={255} /></Field>
|
||||
</div>
|
||||
<button className="btn primary" type="submit" disabled={busy}>Verlängern</button>
|
||||
</form>}
|
||||
</div>
|
||||
|
||||
{sameKind.length > 0 && <div className="card"><h2>{d.trial ? 'Test in Vollversion umwandeln' : 'Produkt wechseln (Upgrade/Downgrade)'}</h2>
|
||||
{d.trial && /^(TRIAL|PREMIUM|LIFETIME)-/i.test(d.keyMasked ?? '') && <Alert kind="warn">Der Schlüssel trägt ein Editions-Präfix. Programme wie das Familytool erkennen die Edition am Schlüssel – dort bitte stattdessen eine neue Lizenz vergeben.</Alert>}
|
||||
<form onSubmit={changeProduct}><div className="cols">
|
||||
<Field id="productId" label="Neues Produkt"><select id="productId" name="productId" required defaultValue={d.productId ?? ''}><option value="" disabled>Produkt wählen …</option>{sameKind.map((p) => <option key={p.id} value={p.id} disabled={p.id === d.productId}>{p.groupName} – {p.name}{p.active ? '' : ' (inaktiv)'}</option>)}</select></Field>
|
||||
<Field id="durationType" label={d.trial ? 'Laufzeit der Vollversion' : 'Laufzeit (optional neu setzen)'}><select id="durationType" name="durationType" required={d.trial} defaultValue=""><option value="">{d.trial ? 'bitte wählen …' : 'unverändert'}</option>{['MONTH', 'YEAR', 'UNLIMITED'].map((x) => <option key={x} value={x}>{DURATION[x]}</option>)}</select></Field>
|
||||
</div><button className="btn" type="submit" disabled={busy}>Umstellen …</button></form>
|
||||
</div>}
|
||||
|
||||
<div className="cols">
|
||||
<div className="card"><h2>Limits</h2>
|
||||
<form onSubmit={saveLimits}>
|
||||
<Field id="maxActivations" label="Geräte gleichzeitig"><input id="maxActivations" name="maxActivations" type="number" min={1} max={1000} defaultValue={d.limits?.maxActivations ?? d.limits?.activationLimit ?? 1} /></Field>
|
||||
<Field id="userLimit" label="Benutzer/Slots (leer = unbegrenzt)"><input id="userLimit" name="userLimit" type="number" min={0} defaultValue={d.limits?.userLimit ?? ''} /></Field>
|
||||
{!d.addon && <Field id="customerLimit" label="Kundenlimit (leer = unbegrenzt)"><input id="customerLimit" name="customerLimit" type="number" min={0} defaultValue={d.entitlement?.customerLimit ?? ''} /></Field>}
|
||||
<Field id="graceDays" label={`Offline-Gnadenfrist in Tagen (leer = vom Produkt${d.limits?.effectiveGraceDays != null ? `, derzeit ${d.limits.effectiveGraceDays}` : ''})`}><input id="graceDays" name="graceDays" type="number" min={0} max={365} defaultValue={d.limits?.graceDays ?? ''} /></Field>
|
||||
<button className="btn" type="submit" disabled={busy}>Limits speichern</button>
|
||||
</form></div>
|
||||
<div className="card"><h2>Funktionsumfang <span className="muted small">(Version {d.entitlement?.version ?? 0})</span></h2>
|
||||
<p className="small muted">Plan und Module sind bei der Vergabe an der Lizenz fixiert. Änderungen am Produkt wirken erst nach „Vom Produkt übernehmen“.</p>
|
||||
<div className="row" style={{ marginBottom: 12 }}><button className="btn" disabled={busy} onClick={() => ask('Vom Produkt übernehmen', 'Plan, Module und Kundenlimit werden mit den aktuellen Werten des Produkts überschrieben.', () => api('POST', `/admin/licenses/${id}/entitlement`, { fromProduct: true }))}>Vom Produkt übernehmen</button></div>
|
||||
<form onSubmit={saveEntitlement}>
|
||||
<Field id="plan" label="Plan"><input id="plan" name="plan" maxLength={50} defaultValue={d.entitlement?.plan ?? ''} /></Field>
|
||||
<Field id="modules" label="Module (eins pro Zeile oder kommagetrennt)"><textarea id="modules" name="modules" rows={4} defaultValue={(d.entitlement?.modules ?? []).join('\n')} /></Field>
|
||||
<Field id="ereason" label="Grund (optional)"><input id="ereason" name="reason" maxLength={255} /></Field>
|
||||
<button className="btn" type="submit" disabled={busy}>Funktionsumfang speichern</button>
|
||||
</form></div>
|
||||
</div>
|
||||
</>}
|
||||
|
||||
{(!d.addon && (d.addons.length > 0 || d.can.manage)) && <div className="card"><div className="row between"><h2>Add-ons</h2>{d.can.manage && d.orgId && <Link className="btn small" href={`/lizenzen/neu?org=${d.orgId}&parent=${d.id}`}>Add-on vergeben</Link>}</div>
|
||||
{d.addons.length === 0 ? <p className="muted">Keine Add-ons.</p> : <ul>{d.addons.map((x) => <li key={x.id}><Link href={`/lizenzen/${x.id}`}>{x.product ?? x.name}</Link> <ResState value={x.state} /> <span className="small muted">bis {x.validUntil ? fmt(x.validUntil) : 'unbefristet'}</span></li>)}</ul>}
|
||||
</div>}
|
||||
|
||||
{staff && d.history.length > 0 && <div className="card"><h2>Verlauf</h2><div className="tablewrap"><table><thead><tr><th>Zeitpunkt</th><th>Vorgang</th><th>Durch</th><th>Ergebnis</th></tr></thead><tbody>
|
||||
{d.history.map((h, i) => <tr key={i}><td>{fmt(h.at)}</td><td>{HISTORY[h.action] ?? h.action}</td><td>{h.actor ?? '–'}</td><td>{h.result === 'success' ? 'ok' : h.result}</td></tr>)}</tbody></table></div></div>}
|
||||
|
||||
{confirm && <div role="dialog" aria-modal="true" aria-labelledby="cf-t" style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,.45)', display: 'grid', placeItems: 'center', padding: 16, zIndex: 50 }}>
|
||||
<div className="card" style={{ maxWidth: 480, width: '100%' }}><h2 id="cf-t">{confirm.title}</h2><p>{confirm.text}</p>
|
||||
<div className="row"><button className="btn primary" disabled={busy} onClick={() => void act(confirm.run, `${confirm.title}: erledigt.`)}>{busy ? 'Bitte warten …' : 'Bestätigen'}</button><button className="btn" disabled={busy} onClick={() => setConfirm(null)}>Abbrechen</button></div>
|
||||
</div></div>}
|
||||
</>);
|
||||
}
|
||||
107
apps/web/src/app/(app)/lizenzen/neu/page.tsx
Normal file
107
apps/web/src/app/(app)/lizenzen/neu/page.tsx
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
'use client';
|
||||
import { Suspense, useEffect, useMemo, useState, type FormEvent } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useRouter, useSearchParams } from 'next/navigation';
|
||||
import { api, errMsg } from '@/lib/api';
|
||||
import { Alert, Field, eur, INTERVAL } from '@/components/ui';
|
||||
import type { Lic } from '@/components/Licenses';
|
||||
|
||||
interface CatalogProduct { id: number; name: string; groupName: string; programId: number; type: string; durationType: string; price: string | null; currency: string | null; planKey: string | null; modules: string[]; customerLimit: number | null; active: boolean }
|
||||
interface ShopProduct { id: string; name: string; recurringCents: number; setupCents: number; priceBasis: string; interval: string; termMonths: number; provisioning: { programId?: number; productId?: number } }
|
||||
interface Catalog { programs: { id: number; name: string }[]; products: CatalogProduct[]; shopProducts: ShopProduct[] }
|
||||
interface Cust { id: string; name: string; customerNumber: string; status: string }
|
||||
const DURATION: Record<string, string> = { WEEK: 'Woche', MONTH: 'Monat', YEAR: 'Jahr', UNLIMITED: 'unbefristet' };
|
||||
|
||||
/** Lizenz an einen Kunden vergeben: mit Vertrag (normaler Bestellweg, Preis und Verlängerung aus dem Produkt) oder ohne Berechnung (direkt im Lizenzsystem). */
|
||||
function Vergeben() {
|
||||
const sp = useSearchParams(); const router = useRouter();
|
||||
const [cat, setCat] = useState<Catalog | null>(null); const [custs, setCusts] = useState<Cust[]>([]); const [err, setErr] = useState(''); const [busy, setBusy] = useState(false);
|
||||
const [done, setDone] = useState<{ number: string } | null>(null);
|
||||
const [org, setOrg] = useState(sp.get('org') ?? ''); const parentParam = sp.get('parent') ?? '';
|
||||
const [mode, setMode] = useState<'contract' | 'free'>(parentParam ? 'free' : 'contract');
|
||||
const [kind, setKind] = useState<'license' | 'trial' | 'addon'>(parentParam ? 'addon' : 'license');
|
||||
const [program, setProgram] = useState(0); const [product, setProduct] = useState(0); const [parent, setParent] = useState(parentParam);
|
||||
const [orgLicenses, setOrgLicenses] = useState<Lic[]>([]);
|
||||
useEffect(() => {
|
||||
api<Catalog>('GET', '/admin/licenses/catalog').then(setCat).catch((e) => setErr(errMsg(e)));
|
||||
api<Cust[]>('GET', '/admin/customers').then((l) => setCusts(l.filter((c) => c.status === 'active'))).catch(() => undefined);
|
||||
}, []);
|
||||
useEffect(() => { if (org) api<Lic[]>('GET', `/licenses?org=${org}`).then(setOrgLicenses).catch(() => setOrgLicenses([])); else setOrgLicenses([]); }, [org]);
|
||||
// Add-on aus der Detailseite: Programm der Basislizenz vorwählen
|
||||
const parentLic = orgLicenses.find((l) => l.id === parent);
|
||||
useEffect(() => { if (kind === 'addon' && parentLic && cat) { const p = cat.programs.find((x) => x.name === parentLic.program); if (p) setProgram(p.id); } }, [kind, parentLic, cat]);
|
||||
const products = useMemo(() => (cat?.products ?? []).filter((p) => p.programId === program && (kind === 'addon' ? p.type === 'ADDON' : p.type !== 'ADDON')), [cat, program, kind]);
|
||||
const sel = products.find((p) => p.id === product);
|
||||
const bases = orgLicenses.filter((l) => !l.addon && !l.revoked);
|
||||
|
||||
async function submit(e: FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault(); if (!org) { setErr('Bitte einen Kunden wählen.'); return; }
|
||||
const f = new FormData(e.currentTarget); const v = (k: string) => String(f.get(k) ?? '').trim(); const n = (k: string) => (v(k) === '' ? undefined : Number(v(k)));
|
||||
setBusy(true); setErr('');
|
||||
try {
|
||||
if (mode === 'contract') {
|
||||
const r = await api<{ id: string; number: string }>('POST', '/orders', { orgId: org, note: v('note') || undefined, items: [{ productId: v('shopProduct'), quantity: 1, discountBp: Math.round((n('discount') ?? 0) * 100) }] });
|
||||
setDone({ number: r.number });
|
||||
} else {
|
||||
const until = v('expiresAt');
|
||||
const r = await api<{ id: string }>('POST', '/admin/licenses', {
|
||||
orgId: org, kind, programId: program, productId: product, parentId: kind === 'addon' ? parent : undefined,
|
||||
durationType: kind === 'trial' ? undefined : v('durationType') || sel?.durationType || 'YEAR', expiresAt: until && kind !== 'trial' ? new Date(`${until}T23:59:59`).toISOString() : undefined,
|
||||
maxActivations: n('maxActivations'), customerLimit: kind === 'license' ? n('customerLimit') : undefined, keyPrefix: v('keyPrefix') || undefined, note: v('note') || undefined,
|
||||
});
|
||||
router.push(`/lizenzen/${r.id}`);
|
||||
}
|
||||
} catch (x) { setErr(errMsg(x)); } finally { setBusy(false); }
|
||||
}
|
||||
if (done) return (<>
|
||||
<h1>Lizenz vergeben</h1>
|
||||
<Alert kind="ok">Bestellung {done.number} wurde angelegt und wird bereitgestellt. Die Lizenz erscheint in wenigen Sekunden in der Übersicht und beim Kunden, der Vertrag unter „Verträge“.</Alert>
|
||||
<div className="row"><Link className="btn primary" href="/lizenzen">Zur Übersicht</Link><Link className="btn" href="/bestellungen">Bestellungen ansehen</Link><button className="btn" onClick={() => setDone(null)}>Weitere Lizenz vergeben</button></div>
|
||||
</>);
|
||||
|
||||
return (<>
|
||||
<p><Link href="/lizenzen">← Alle Lizenzen</Link></p>
|
||||
<h1>Lizenz vergeben</h1>
|
||||
{err && <Alert kind="err">{err}</Alert>}
|
||||
{!cat ? <p className="muted" role="status">{err ? '' : 'Lizenzsystem wird abgefragt …'}</p> : <form onSubmit={submit}>
|
||||
<div className="card"><h2>Kunde</h2>
|
||||
<Field id="org" label="Kunde"><select id="org" value={org} onChange={(e) => { setOrg(e.target.value); setParent(''); }} required><option value="">Kunde wählen …</option>{custs.map((c) => <option key={c.id} value={c.id}>{c.customerNumber} · {c.name}</option>)}</select></Field>
|
||||
<fieldset style={{ border: 0, padding: 0, margin: 0 }}><legend className="small muted">Abrechnung</legend>
|
||||
<label className="row"><input type="radio" style={{ width: 20, minHeight: 20 }} checked={mode === 'contract'} onChange={() => setMode('contract')} disabled={kind === 'addon' && !!parentParam} /> Mit Vertrag – Preis, Laufzeit und Verlängerung aus dem Produkt, Rechnung wie bei einer Bestellung</label>
|
||||
<label className="row"><input type="radio" style={{ width: 20, minHeight: 20 }} checked={mode === 'free'} onChange={() => setMode('free')} /> Ohne Berechnung – Test, Kulanz, intern (direkt im Lizenzsystem)</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
{mode === 'contract' ? <div className="card"><h2>Produkt</h2>
|
||||
{cat.shopProducts.length === 0 ? <Alert kind="warn">Es gibt noch kein aktives Produkt, das eine Lizenz bereitstellt. Unter Produkte → „Aus Anbieter übernehmen“ anlegen.</Alert> : <>
|
||||
<Field id="shopProduct" label="Produkt"><select id="shopProduct" name="shopProduct" required defaultValue=""><option value="" disabled>Produkt wählen …</option>{cat.shopProducts.map((p) => <option key={p.id} value={p.id}>{p.name} – {eur(p.recurringCents)} {INTERVAL[p.interval] ?? p.interval}{p.setupCents ? ` + ${eur(p.setupCents)} einmalig` : ''}</option>)}</select></Field>
|
||||
<div className="cols"><Field id="discount" label="Rabatt in % (optional)"><input id="discount" name="discount" type="number" min={0} max={100} step="0.01" /></Field>
|
||||
<Field id="note" label="Notiz zur Bestellung (optional)"><input id="note" name="note" maxLength={500} /></Field></div>
|
||||
<p className="small muted">Die Bestellung wird sofort freigegeben; Vertrag und Lizenz entstehen automatisch. Limits und Geräteanzahl lassen sich danach auf der Lizenzseite anpassen.</p>
|
||||
</>}
|
||||
</div> : <div className="card"><h2>Lizenz</h2>
|
||||
<fieldset style={{ border: 0, padding: 0, margin: '0 0 16px' }}><legend className="small muted">Art</legend><div className="row">
|
||||
{([['license', 'Lizenz'], ['trial', 'Test (einmal je Kunde und Programm)'], ['addon', 'Add-on zu einer Basislizenz']] as const).map(([k, l]) => <label key={k} className="row"><input type="radio" style={{ width: 20, minHeight: 20 }} checked={kind === k} onChange={() => { setKind(k); setProduct(0); }} /> {l}</label>)}
|
||||
</div></fieldset>
|
||||
{kind === 'addon' && <Field id="parent" label="Basislizenz des Kunden"><select id="parent" value={parent} onChange={(e) => setParent(e.target.value)} required><option value="">{org ? (bases.length ? 'Basislizenz wählen …' : 'Dieser Kunde hat keine Basislizenz') : 'Erst Kunde wählen'}</option>{bases.map((l) => <option key={l.id} value={l.id}>{l.program}{l.product ? ` · ${l.product}` : ''} ({l.keyMasked})</option>)}</select></Field>}
|
||||
<div className="cols">
|
||||
<Field id="program" label="Programm"><select id="program" value={program || ''} onChange={(e) => { setProgram(Number(e.target.value)); setProduct(0); }} required disabled={kind === 'addon' && !!parentLic}><option value="">Programm wählen …</option>{cat.programs.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}</select></Field>
|
||||
<Field id="product" label={kind === 'addon' ? 'Add-on-Produkt' : 'Produkt'}><select id="product" value={product || ''} onChange={(e) => setProduct(Number(e.target.value))} required><option value="">{program ? (products.length ? 'Produkt wählen …' : 'Keine passenden Produkte') : 'Erst Programm wählen'}</option>{products.map((p) => <option key={p.id} value={p.id}>{p.groupName} – {p.name}{p.active ? '' : ' (inaktiv)'}</option>)}</select></Field>
|
||||
</div>
|
||||
{sel && <p className="small muted">Plan: {sel.planKey ?? '–'} · Module: {sel.modules.length ? sel.modules.join(', ') : '–'}{sel.type !== 'ADDON' ? ` · Kundenlimit: ${sel.customerLimit ?? 'unbegrenzt'}` : ''} · Laufzeit laut Produkt: {DURATION[sel.durationType] ?? sel.durationType}</p>}
|
||||
{kind === 'trial' ? <p className="small muted">Ein Test läuft 30 Tage ab der ersten Aktivierung, mit allen Modulen des Produkts. Je Kunde und Programm ist nur ein Test möglich.</p> : <div className="cols">
|
||||
<Field id="durationType" label="Laufzeit"><select id="durationType" name="durationType" key={sel?.id ?? 0} defaultValue={sel?.durationType && DURATION[sel.durationType] ? sel.durationType : 'YEAR'}>{Object.entries(DURATION).map(([k, l]) => <option key={k} value={k}>{l}</option>)}</select></Field>
|
||||
<Field id="expiresAt" label="oder festes Ablaufdatum (optional)"><input id="expiresAt" name="expiresAt" type="date" /></Field>
|
||||
</div>}
|
||||
<div className="cols">
|
||||
<Field id="maxActivations" label="Geräte gleichzeitig"><input id="maxActivations" name="maxActivations" type="number" min={1} max={1000} defaultValue={1} /></Field>
|
||||
{kind === 'license' && <Field id="customerLimit" label="Kundenlimit (leer = laut Produkt)"><input id="customerLimit" name="customerLimit" type="number" min={0} /></Field>}
|
||||
<Field id="keyPrefix" label="Editions-Präfix im Schlüssel (nur für Programme, die daran die Edition erkennen, z. B. Familytool)"><select id="keyPrefix" name="keyPrefix" defaultValue=""><option value="">keins</option><option value="PREMIUM">PREMIUM-…</option><option value="LIFETIME">LIFETIME…</option><option value="TRIAL">TRIAL-…</option></select></Field>
|
||||
<Field id="note" label="Notiz (optional, max. 50 Zeichen)"><input id="note" name="note" maxLength={50} placeholder="z. B. Kulanz Ticket T-1003" /></Field>
|
||||
</div>
|
||||
</div>}
|
||||
<div className="row"><button className="btn primary" type="submit" disabled={busy || (mode === 'contract' && cat.shopProducts.length === 0)}>{busy ? 'Bitte warten …' : mode === 'contract' ? 'Bestellung anlegen' : 'Lizenz vergeben'}</button><Link className="btn" href="/lizenzen">Abbrechen</Link></div>
|
||||
</form>}
|
||||
</>);
|
||||
}
|
||||
export default function Page() { return <Suspense><Vergeben /></Suspense>; }
|
||||
68
apps/web/src/app/(app)/lizenzen/page.tsx
Normal file
68
apps/web/src/app/(app)/lizenzen/page.tsx
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
'use client';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { api, errMsg } from '@/lib/api';
|
||||
import { useSession } from '@/lib/session';
|
||||
import { Alert, Empty, ResState, fmt } from '@/components/ui';
|
||||
import { SecretField } from '@/components/SecretField';
|
||||
import { LicKind, type Lic } from '@/components/Licenses';
|
||||
|
||||
interface Summary { total: number; active: number; suspended: number; expired: number; expiring: number; unassigned: number }
|
||||
type Filter = '' | 'active' | 'suspended' | 'expired' | 'expiring' | 'unassigned';
|
||||
const soon = (d: string | null) => !!d && new Date(d).getTime() - Date.now() < 30 * 86400000 && new Date(d).getTime() > Date.now();
|
||||
const devices = (l: Lic) => `${l.activationsUsed} / ${l.activationLimit ?? '∞'}`;
|
||||
|
||||
export default function Lizenzen() {
|
||||
const { can } = useSession(); const staff = can('licenses.read'); const w = can('licenses.write');
|
||||
const [list, setList] = useState<Lic[] | null>(null); const [sum, setSum] = useState<Summary | null>(null); const [err, setErr] = useState('');
|
||||
const [filter, setFilter] = useState<Filter>(''); const [q, setQ] = useState(''); const [query, setQuery] = useState('');
|
||||
const load = useCallback(() => {
|
||||
const p = new URLSearchParams();
|
||||
if (filter === 'expiring') p.set('expiring', '1'); else if (filter === 'unassigned') p.set('unassigned', '1'); else if (filter) p.set('state', filter);
|
||||
if (query) p.set('q', query);
|
||||
api<Lic[]>('GET', `/licenses${p.size ? `?${p}` : ''}`).then(setList).catch((e) => setErr(errMsg(e)));
|
||||
}, [filter, query]);
|
||||
useEffect(() => { load(); }, [load]);
|
||||
useEffect(() => { if (staff) api<Summary>('GET', '/admin/licenses/summary').then(setSum).catch(() => undefined); }, [staff]);
|
||||
const tile = (f: Filter, n: number, label: string, warn = false) => (
|
||||
<button type="button" className="card" onClick={() => setFilter(filter === f ? '' : f)} aria-pressed={filter === f} style={{ textAlign: 'left', cursor: 'pointer', outline: filter === f ? '2px solid var(--accent)' : undefined }}>
|
||||
<div className="stat">{n}</div><p className="muted" style={{ margin: 0 }}>{label}{warn && n > 0 && <> <span className="badge warn"><span aria-hidden="true">▲</span>Prüfen</span></>}</p>
|
||||
</button>);
|
||||
|
||||
return (<>
|
||||
<div className="pagehead row between"><h1>{staff ? 'Lizenzen' : 'Meine Lizenzen'}</h1>{w && <Link className="btn primary" href="/lizenzen/neu">Lizenz vergeben</Link>}</div>
|
||||
{err && <Alert kind="err">{err}</Alert>}
|
||||
{staff && sum && <div className="grid" style={{ marginBottom: 16 }}>
|
||||
{tile('', sum.total, 'Lizenzen gesamt')}{tile('active', sum.active, 'Aktiv')}{tile('expiring', sum.expiring, 'Laufen in 30 Tagen ab', true)}
|
||||
{tile('suspended', sum.suspended, 'Gesperrt')}{tile('expired', sum.expired, 'Abgelaufen')}{sum.unassigned > 0 && tile('unassigned', sum.unassigned, 'Ohne Kunde', true)}
|
||||
</div>}
|
||||
{staff && <form className="row" style={{ marginBottom: 16, gap: 8 }} onSubmit={(e) => { e.preventDefault(); setQuery(q.trim()); }}>
|
||||
<input aria-label="Suche nach Kunde, Kundennummer, Programm oder Lizenz-Nr." placeholder="Kunde, Kundennummer, Programm …" value={q} onChange={(e) => setQ(e.target.value)} style={{ maxWidth: 360 }} />
|
||||
<button className="btn" type="submit">Suchen</button>
|
||||
{(query || filter) && <button className="btn" type="button" onClick={() => { setQ(''); setQuery(''); setFilter(''); }}>Filter zurücksetzen</button>}
|
||||
</form>}
|
||||
{list === null ? <div className="card"><p className="muted" role="status">Wird geladen …</p></div>
|
||||
: list.length === 0 ? <div className="card"><Empty title={filter || query ? 'Keine passenden Lizenzen' : 'Noch keine Lizenzen'}>{staff ? (w ? 'Über „Lizenz vergeben“ eine Lizenz an einen Kunden ausgeben.' : '') : 'Für Ihre Organisation sind noch keine Lizenzen hinterlegt.'}</Empty></div>
|
||||
: staff ? (
|
||||
<div className="card"><div className="tablewrap"><table><thead><tr><th>Lizenz</th><th>Kunde</th><th>Status</th><th>Gültig bis</th><th>Geräte</th><th>Vertrag</th></tr></thead><tbody>
|
||||
{list.map((l) => <tr key={l.id}>
|
||||
<td><Link href={`/lizenzen/${l.id}`}>{l.program ?? l.name}{l.product ? ` · ${l.product}` : ''}</Link><LicKind l={l} /><div className="mono small muted">{l.keyMasked}</div></td>
|
||||
<td>{l.orgId ? <Link href={`/admin/kunden/${l.orgId}`}>{l.customerNumber} · {l.orgName}</Link> : <span className="badge warn"><span aria-hidden="true">▲</span>Nicht zugewiesen</span>}</td>
|
||||
<td><ResState value={l.state} /></td>
|
||||
<td>{l.validUntil ? <>{fmt(l.validUntil)}{soon(l.validUntil) && l.state === 'active' && <> <span className="badge warn"><span aria-hidden="true">▲</span>bald</span></>}</> : 'unbefristet'}</td>
|
||||
<td>{devices(l)}</td>
|
||||
<td>{l.contractId ? <Link href={`/vertraege/${l.contractId}`}>{l.contractNumber}</Link> : <span className="muted small">ohne Berechnung</span>}</td>
|
||||
</tr>)}</tbody></table></div></div>
|
||||
) : (
|
||||
<div className="productgrid">{list.map((l) => (
|
||||
<div className="productcard" key={l.id}>
|
||||
<div className="row between"><h3><Link href={`/lizenzen/${l.id}`}>{l.program ?? l.name}</Link></h3><ResState value={l.state} /></div>
|
||||
<div className="id">{l.product ?? l.edition}<LicKind l={l} /></div>
|
||||
<div className="small muted">Gültig bis: {l.validUntil ? fmt(l.validUntil) : 'unbefristet'}</div>
|
||||
<div className="small muted">Geräte: {devices(l)}</div>
|
||||
<div style={{ marginTop: 4 }}><SecretField resourceId={l.id} compact /></div>
|
||||
<div style={{ marginTop: 8 }}><Link className="btn small" href={`/lizenzen/${l.id}`}>Details und Geräte</Link></div>
|
||||
</div>))}</div>
|
||||
)}
|
||||
</>);
|
||||
}
|
||||
16
apps/web/src/components/Licenses.tsx
Normal file
16
apps/web/src/components/Licenses.tsx
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
'use client';
|
||||
/** Gemeinsame Typen und Anzeigebausteine der Lizenzverwaltung (Übersicht, Detail, Vergabe). */
|
||||
export interface Lic {
|
||||
id: string; name: string; state: string; validFrom: string | null; validUntil: string | null; syncedAt: string; missing: boolean; orgId: string | null; orgName: string | null; customerNumber: string | null;
|
||||
contractId: string | null; contractNumber: string | null; program: string | null; product: string | null; edition: string | null; keyMasked: string | null;
|
||||
activationsUsed: number; activationLimit: number | null; trial: boolean; trialPending: boolean; addon: boolean; revoked: boolean;
|
||||
}
|
||||
|
||||
/** Art der Lizenz als kleines Badge (Test, Add-on, Widerrufen). */
|
||||
export function LicKind({ l }: { l: Pick<Lic, 'trial' | 'trialPending' | 'addon' | 'revoked'> }) {
|
||||
return (<>
|
||||
{l.trial && <> <span className="badge info">{l.trialPending ? 'Test (startet bei Aktivierung)' : 'Test'}</span></>}
|
||||
{l.addon && <> <span className="badge info">Add-on</span></>}
|
||||
{l.revoked && <> <span className="badge err"><span aria-hidden="true">✕</span>Widerrufen</span></>}
|
||||
</>);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue