- web/retention-admin: eigenstaendige Next.js/React/TypeScript-App (kein Backend-Annex), auf web/shl (SHL-01) aufbauend - classes: Aufbewahrungsklasse anlegen/aendern/deaktivieren (AC1) - preview: Vorschauliste 30 Tage, nutzt denselben Endpunkt wie der periodische Job (AC2) - lib/api.ts: ForbiddenError bei 403, getrennt behandelt, keine eigene Autorisierungslogik im Frontend (RBAC-Entscheidung liegt bei RET-08/RBAC-06) - expliziter 403-Nachweis (nicht nur der 200-Fall): lib/api.test.ts, ClassesPage/PreviewPage zeigen 'Zugriff verweigert' statt leerer Seite - lokal getestet: tsc clean, next build clean, vitest 3/3 gruen Pruefungen siehe archive/docs/RET-06-PRUEFPROTOKOLL.md
59 lines
2.1 KiB
TypeScript
59 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { Table, type TableColumn } from "@nexarch/shl";
|
|
import { ExpiringObject, ForbiddenError, fetchExpiringPreview } from "../../lib/api";
|
|
|
|
// Akzeptanzkriterium 2: Vorschauliste bald ablaufender Objekte (naechste 30
|
|
// Tage) - ruft dieselbe RET-06-API /retention-classes/preview auf, die
|
|
// intern dieselbe Funktion wie der periodische Job nutzt (RET-02), keine
|
|
// eigene Berechnung im Frontend.
|
|
export default function PreviewPage() {
|
|
const [objects, setObjects] = useState<ExpiringObject[] | null>(null);
|
|
const [forbidden, setForbidden] = useState(false);
|
|
const [loadError, setLoadError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
fetchExpiringPreview()
|
|
.then(setObjects)
|
|
.catch((err) => {
|
|
if (err instanceof ForbiddenError) {
|
|
setForbidden(true);
|
|
} else {
|
|
setLoadError(err instanceof Error ? err.message : "Vorschauliste konnte nicht geladen werden.");
|
|
}
|
|
});
|
|
}, []);
|
|
|
|
if (forbidden) {
|
|
return (
|
|
<main style={{ maxWidth: 720, margin: "40px auto", padding: "0 16px" }}>
|
|
<p role="alert">Zugriff verweigert: Ihre Rolle ist nicht zur Fristenverwaltung berechtigt.</p>
|
|
</main>
|
|
);
|
|
}
|
|
if (loadError) {
|
|
return (
|
|
<main style={{ maxWidth: 720, margin: "40px auto", padding: "0 16px" }}>
|
|
<p role="alert">{loadError}</p>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
const columns: TableColumn<ExpiringObject>[] = [
|
|
{ key: "type", header: "Objekttyp", render: (o) => o.ObjectType },
|
|
{ key: "ref", header: "Referenz", render: (o) => o.ObjectReference },
|
|
{ key: "class", header: "Aufbewahrungsklasse", render: (o) => o.RetentionClass },
|
|
{ key: "due", header: "Fällig am", render: (o) => o.DueDate },
|
|
];
|
|
|
|
return (
|
|
<main style={{ maxWidth: 720, margin: "40px auto", padding: "0 16px" }}>
|
|
<h1>In den nächsten 30 Tagen ablaufende Objekte</h1>
|
|
{objects && (
|
|
<Table columns={columns} rows={objects} rowKey={(o) => o.RetentionObjectID} caption="Bald ablaufende Objekte" />
|
|
)}
|
|
</main>
|
|
);
|
|
}
|