cesnimda/jobtrackingapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(admin): migrate audit presentation and protect pending actions

Browse Source
This commit is contained in:
cesnimda
2026-10-20 15:26:49 +02:00
parent 4760fd102c
commit f9e1d06bf7
12 changed files with 636 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
job-tracker-ui/src/views/AdminAuditPage.tsx
+43 -43
View File
@@ -1,10 +1,9 @@
import React, { useState } from "react";
import React, { useEffect, useRef, useState } from "react";
import {
Box,
Button,
Chip,
Paper,
Table,
TableBody,
TableCell,
@@ -14,11 +13,13 @@ import {
Typography,
} from "@mui/material";
import { api } from "../api";
import { api, getApiErrorMessage } from "../api";
import { useToast } from "../toast";
import { useI18n } from "../i18n/I18nProvider";
import { useViewResource } from "../hooks/useViewResource";
import ViewStateNotice from "../components/ViewStateNotice";
import { PageHeader, PageSection } from "../layout/PageLayout";
import { checkSessionCookie, getSessionContext, isSessionInvalidated } from "../sessionBoundary";
type AuditItem = {
id: number;
@@ -43,72 +44,69 @@ export default function AdminAuditPage() {
const { toast } = useToast();
const { language, t } = useI18n();
const [busyId, setBusyId] = useState<number | null>(null);
const body=useRef<HTMLDivElement>(null);
const owner=useRef({ mounted: true, generation: 0, busy: false });
const currentTranslation=useRef(t);
const fallback=useRef(t("adminAuditLoadFailed"));
useEffect(() => { currentTranslation.current=t; }, [t]);
useEffect(() => { const lifetime=owner.current; lifetime.mounted=true; lifetime.generation+=1; return () => { lifetime.mounted=false; lifetime.generation+=1; }; }, []);
const auditResource = useViewResource(
async () => {
const r = await api.get<AuditItem[]>("/admin/audit?take=200");
return r.data ?? [];
},
{ initialData: [], errorMessage: t("adminAuditLoadFailed"), deps: [t] },
{ initialData: [], errorMessage: fallback.current },
);
const undo = async (e: AuditItem) => {
if (!canUndo(e.type)) return;
const mutate = async (e: AuditItem, action: "undo" | "restore") => {
if (action === "undo" ? !canUndo(e.type) : e.type !== "Deleted") return;
checkSessionCookie(); const lifetime=owner.current;
if (!lifetime.mounted || lifetime.busy || isSessionInvalidated()) return;
lifetime.busy=true;
const generation=lifetime.generation; const context=getSessionContext();
const active=() => { checkSessionCookie(); return lifetime.mounted && lifetime.generation===generation && !isSessionInvalidated() && getSessionContext()===context; };
if (body.current?.contains(document.activeElement)) body.current.focus();
setBusyId(e.id);
try {
const res = await api.post<{ ok: boolean; message: string }>(`/admin/audit/${e.id}/undo`, {});
toast(res.data?.message || t("adminAuditUndone"), "success");
const res=await api.post<{ ok: boolean; message?: string }>(action === "undo" ? `/admin/audit/${e.id}/undo` : `/jobapplications/${e.jobApplicationId}/restore`, {});
if (!active()) return;
toast(action === "undo" && res.data?.message || currentTranslation.current(action === "undo" ? "adminAuditUndone" : "adminAuditRestored"), "success");
await auditResource.reload();
} catch (err: any) {
const msg = err?.response?.data?.message || err?.response?.data || err?.message || t("adminAuditUndoFailed");
toast(String(msg), "error");
} catch (error) {
if (active()) toast(getApiErrorMessage(error, currentTranslation.current(action === "undo" ? "adminAuditUndoFailed" : "adminAuditRestoreFailed")), "error");
} finally {
setBusyId(null);
}
};
const restore = async (e: AuditItem) => {
setBusyId(e.id);
try {
await api.post(`/jobapplications/${e.jobApplicationId}/restore`, {});
toast(t("adminAuditRestored"), "success");
await auditResource.reload();
} catch (err: any) {
const msg = err?.response?.data || err?.message || t("adminAuditRestoreFailed");
toast(String(msg), "error");
} finally {
setBusyId(null);
lifetime.busy=false;
if (active()) setBusyId(null);
}
};
const rows = auditResource.data;
const error=auditResource.error?.message===fallback.current ? { ...auditResource.error, message: t("adminAuditLoadFailed") } : auditResource.error;
return (
<Paper sx={{ mt: 0, p: 2 }}>
<Typography component="h2" variant="h5" sx={{ fontWeight: 900, mb: 1 }}>
{t("adminAuditTitle")}
</Typography>
<Typography sx={{ color: "text.secondary", mb: 2 }}>
{t("adminAuditSubtitle")}
</Typography>
<Box sx={{ display: "grid", gap: "var(--app-section-gap)", minWidth: 0 }}>
<PageHeader level="h2" title={t("adminAuditTitle")} description={t("adminAuditSubtitle")} />
<PageSection level="h3" surface title={t("adminAuditEvents")}>
<Box ref={body} role="region" aria-label={t("adminAuditTitle")} tabIndex={0} aria-busy={busyId!==null || auditResource.loading || auditResource.refreshing} sx={{ minWidth: 0, overflow: "auto" }}>
<ViewStateNotice
loading={auditResource.loading}
error={auditResource.error}
error={error}
title={t("adminAuditLoadFailed")}
description={t("adminAuditLoadFailedBody")}
onRetry={auditResource.reload}
onRetry={async () => { body.current?.focus(); await auditResource.reload(); }}
/>
{!auditResource.error ? <TableContainer sx={{ borderRadius: 2, border: "none", boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)" }}>
<Table size="small">
{!auditResource.error ? <TableContainer sx={{ overflow: "visible" }}>
<Table size="small" aria-label={t("adminAuditTitle")} sx={{ minWidth: 900, "& th, & td": { overflowWrap: "anywhere" }, "& button": { whiteSpace: "normal", "@media (pointer: coarse)": { minHeight: 44 } } }}>
<TableHead>
<TableRow>
<TableCell sx={{ width: 165 }}>{t("adminAuditAt")}</TableCell>
<TableCell sx={{ width: 160 }}>{t("adminAuditType")}</TableCell>
<TableCell>{t("adminAuditJob")}</TableCell>
<TableCell sx={{ minWidth: 260 }}>{t("adminAuditJob")}</TableCell>
<TableCell sx={{ width: 220 }}>{t("adminAuditUser")}</TableCell>
<TableCell>{t("adminAuditDetails")}</TableCell>
<TableCell sx={{ minWidth: 220 }}>{t("adminAuditDetails")}</TableCell>
<TableCell sx={{ width: 170 }}>{t("adminAuditActions")}</TableCell>
</TableRow>
</TableHead>
@@ -130,7 +128,7 @@ export default function AdminAuditPage() {
const jobLabel = e.jobTitle || t("adminAuditJobFallback", { id: e.jobApplicationId });
const ownerLabel = e.ownerEmail || e.ownerUserName || e.ownerUserId || "-";
const details = e.oldValue || e.newValue ? `${e.oldValue ?? ""} -> ${e.newValue ?? ""}` : "";
const disabled = busyId === e.id;
const disabled = busyId !== null;
const showRestore = e.type === "Deleted";
return (
@@ -160,12 +158,12 @@ export default function AdminAuditPage() {
<TableCell>
<Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
{canUndo(e.type) ? (
<Button size="small" variant="outlined" disabled={disabled} onClick={() => void undo(e)}>
<Button size="small" variant="outlined" disabled={disabled} onClick={() => void mutate(e, "undo")}>
{t("adminAuditUndo")}
</Button>
) : null}
{showRestore ? (
<Button size="small" variant="contained" disabled={disabled} onClick={() => void restore(e)}>
<Button size="small" variant="contained" disabled={disabled} onClick={() => void mutate(e, "restore")}>
{t("adminAuditRestore")}
</Button>
) : null}
@@ -178,6 +176,8 @@ export default function AdminAuditPage() {
</TableBody>
</Table>
</TableContainer> : null}
</Paper>
</Box>
</PageSection>
</Box>
);
}