Phase 5: Frontend Admin Page
- Create /admin/random-jobs/page.tsx with outcomes table - Add 'admin-random-jobs' to PageId type in Header - Add 'Random Jobs' nav item to ADMIN_NAV_ITEMS - Display: ID, Job ID, Triggered By, Value, Duration, Status, Created At - Uses VIEW_AUDIT permission
This commit is contained in:
parent
b3ed81e8fd
commit
b8470b77a7
GPG key ID:
883EDBAA726BD96C
4 changed files with 299 additions and 3 deletions
229
frontend/app/admin/random-jobs/page.tsx
Normal file
229
frontend/app/admin/random-jobs/page.tsx
Normal file
|
|
@ -0,0 +1,229 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import { Permission } from "../../auth-context";
|
||||
import { api } from "../../api";
|
||||
import { sharedStyles } from "../../styles/shared";
|
||||
import { Header } from "../../components/Header";
|
||||
import { useRequireAuth } from "../../hooks/useRequireAuth";
|
||||
import { components } from "../../generated/api";
|
||||
|
||||
type RandomNumberOutcome = components["schemas"]["RandomNumberOutcomeResponse"];
|
||||
|
||||
export default function AdminRandomJobsPage() {
|
||||
const [outcomes, setOutcomes] = useState<RandomNumberOutcome[]>([]);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [isLoadingData, setIsLoadingData] = useState(true);
|
||||
const { user, isLoading, isAuthorized } = useRequireAuth({
|
||||
requiredPermission: Permission.VIEW_AUDIT,
|
||||
fallbackRedirect: "/",
|
||||
});
|
||||
|
||||
const fetchOutcomes = useCallback(async () => {
|
||||
setError(null);
|
||||
try {
|
||||
const data = await api.get<RandomNumberOutcome[]>("/api/audit/random-jobs");
|
||||
setOutcomes(data);
|
||||
} catch (err) {
|
||||
setOutcomes([]);
|
||||
setError(err instanceof Error ? err.message : "Failed to load outcomes");
|
||||
} finally {
|
||||
setIsLoadingData(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (user && isAuthorized) {
|
||||
fetchOutcomes();
|
||||
}
|
||||
}, [user, isAuthorized, fetchOutcomes]);
|
||||
|
||||
const formatDate = (dateStr: string) => {
|
||||
return new Date(dateStr).toLocaleString();
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<main style={styles.main}>
|
||||
<div style={styles.loader}>Loading...</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
if (!user || !isAuthorized) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<main style={styles.main}>
|
||||
<Header currentPage="admin-random-jobs" />
|
||||
|
||||
<div style={styles.content}>
|
||||
<div style={styles.tableCard}>
|
||||
<div style={styles.tableHeader}>
|
||||
<h2 style={styles.tableTitle}>Random Number Job Outcomes</h2>
|
||||
<span style={styles.totalCount}>{outcomes.length} outcomes</span>
|
||||
</div>
|
||||
|
||||
<div style={styles.tableWrapper}>
|
||||
<table style={styles.table}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={styles.th}>ID</th>
|
||||
<th style={styles.th}>Job ID</th>
|
||||
<th style={styles.th}>Triggered By</th>
|
||||
<th style={styles.th}>Value</th>
|
||||
<th style={styles.th}>Duration</th>
|
||||
<th style={styles.th}>Status</th>
|
||||
<th style={styles.th}>Created At</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{error && (
|
||||
<tr>
|
||||
<td colSpan={7} style={styles.errorRow}>
|
||||
{error}
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{!error && isLoadingData && (
|
||||
<tr>
|
||||
<td colSpan={7} style={styles.emptyRow}>
|
||||
Loading...
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{!error && !isLoadingData && outcomes.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={7} style={styles.emptyRow}>
|
||||
No job outcomes yet
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{!error &&
|
||||
!isLoadingData &&
|
||||
outcomes.map((outcome) => (
|
||||
<tr key={outcome.id} style={styles.tr}>
|
||||
<td style={styles.tdNum}>{outcome.id}</td>
|
||||
<td style={styles.tdNum}>{outcome.job_id}</td>
|
||||
<td style={styles.td}>{outcome.triggered_by_email}</td>
|
||||
<td style={styles.tdValue}>{outcome.value}</td>
|
||||
<td style={styles.tdNum}>{outcome.duration_ms}ms</td>
|
||||
<td style={styles.td}>
|
||||
<span style={styles.statusBadge}>{outcome.status}</span>
|
||||
</td>
|
||||
<td style={styles.tdDate}>{formatDate(outcome.created_at)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
const pageStyles: Record<string, React.CSSProperties> = {
|
||||
content: {
|
||||
flex: 1,
|
||||
padding: "2rem",
|
||||
overflowY: "auto",
|
||||
},
|
||||
tableCard: {
|
||||
background: "rgba(255, 255, 255, 0.03)",
|
||||
backdropFilter: "blur(10px)",
|
||||
border: "1px solid rgba(255, 255, 255, 0.08)",
|
||||
borderRadius: "20px",
|
||||
padding: "1.5rem",
|
||||
boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)",
|
||||
maxWidth: "1200px",
|
||||
margin: "0 auto",
|
||||
},
|
||||
tableHeader: {
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
marginBottom: "1rem",
|
||||
},
|
||||
tableTitle: {
|
||||
fontFamily: "'Instrument Serif', Georgia, serif",
|
||||
fontSize: "1.5rem",
|
||||
fontWeight: 400,
|
||||
color: "#fff",
|
||||
margin: 0,
|
||||
},
|
||||
totalCount: {
|
||||
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||
fontSize: "0.875rem",
|
||||
color: "rgba(255, 255, 255, 0.4)",
|
||||
},
|
||||
tableWrapper: {
|
||||
overflowX: "auto",
|
||||
},
|
||||
table: {
|
||||
width: "100%",
|
||||
borderCollapse: "collapse",
|
||||
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||
},
|
||||
th: {
|
||||
textAlign: "left",
|
||||
padding: "0.75rem 1rem",
|
||||
fontSize: "0.75rem",
|
||||
fontWeight: 600,
|
||||
color: "rgba(255, 255, 255, 0.4)",
|
||||
textTransform: "uppercase",
|
||||
letterSpacing: "0.05em",
|
||||
borderBottom: "1px solid rgba(255, 255, 255, 0.08)",
|
||||
},
|
||||
tr: {
|
||||
borderBottom: "1px solid rgba(255, 255, 255, 0.04)",
|
||||
},
|
||||
td: {
|
||||
padding: "0.875rem 1rem",
|
||||
fontSize: "0.875rem",
|
||||
color: "rgba(255, 255, 255, 0.7)",
|
||||
},
|
||||
tdNum: {
|
||||
padding: "0.875rem 1rem",
|
||||
fontSize: "0.875rem",
|
||||
color: "rgba(255, 255, 255, 0.9)",
|
||||
fontFamily: "'DM Mono', monospace",
|
||||
},
|
||||
tdValue: {
|
||||
padding: "0.875rem 1rem",
|
||||
fontSize: "1rem",
|
||||
color: "#a78bfa",
|
||||
fontWeight: 600,
|
||||
fontFamily: "'DM Mono', monospace",
|
||||
},
|
||||
tdDate: {
|
||||
padding: "0.875rem 1rem",
|
||||
fontSize: "0.75rem",
|
||||
color: "rgba(255, 255, 255, 0.4)",
|
||||
},
|
||||
statusBadge: {
|
||||
fontFamily: "'DM Sans', system-ui, sans-serif",
|
||||
fontSize: "0.7rem",
|
||||
fontWeight: 500,
|
||||
padding: "0.25rem 0.5rem",
|
||||
borderRadius: "4px",
|
||||
textTransform: "uppercase",
|
||||
background: "rgba(34, 197, 94, 0.2)",
|
||||
color: "rgba(34, 197, 94, 0.9)",
|
||||
},
|
||||
emptyRow: {
|
||||
padding: "2rem 1rem",
|
||||
textAlign: "center",
|
||||
color: "rgba(255, 255, 255, 0.3)",
|
||||
fontSize: "0.875rem",
|
||||
},
|
||||
errorRow: {
|
||||
padding: "2rem 1rem",
|
||||
textAlign: "center",
|
||||
color: "#f87171",
|
||||
fontSize: "0.875rem",
|
||||
},
|
||||
};
|
||||
|
||||
const styles = { ...sharedStyles, ...pageStyles };
|
||||
|
|
@ -17,7 +17,8 @@ type PageId =
|
|||
| "audit"
|
||||
| "admin-invites"
|
||||
| "admin-availability"
|
||||
| "admin-appointments";
|
||||
| "admin-appointments"
|
||||
| "admin-random-jobs";
|
||||
|
||||
interface HeaderProps {
|
||||
currentPage: PageId;
|
||||
|
|
@ -45,6 +46,7 @@ const ADMIN_NAV_ITEMS: NavItem[] = [
|
|||
{ id: "admin-invites", label: "Invites", href: "/admin/invites", adminOnly: true },
|
||||
{ id: "admin-availability", label: "Availability", href: "/admin/availability", adminOnly: true },
|
||||
{ id: "admin-appointments", label: "Appointments", href: "/admin/appointments", adminOnly: true },
|
||||
{ id: "admin-random-jobs", label: "Random Jobs", href: "/admin/random-jobs", adminOnly: true },
|
||||
];
|
||||
|
||||
export function Header({ currentPage }: HeaderProps) {
|
||||
|
|
|
|||
|
|
@ -135,7 +135,7 @@ export interface paths {
|
|||
put?: never;
|
||||
/**
|
||||
* Increment Counter
|
||||
* @description Increment the counter and record the action.
|
||||
* @description Increment the counter, record the action, and enqueue a random number job.
|
||||
*/
|
||||
post: operations["increment_counter_api_counter_increment_post"];
|
||||
delete?: never;
|
||||
|
|
@ -184,6 +184,26 @@ export interface paths {
|
|||
patch?: never;
|
||||
trace?: never;
|
||||
};
|
||||
"/api/audit/random-jobs": {
|
||||
parameters: {
|
||||
query?: never;
|
||||
header?: never;
|
||||
path?: never;
|
||||
cookie?: never;
|
||||
};
|
||||
/**
|
||||
* Get Random Job Outcomes
|
||||
* @description Get all random number job outcomes, newest first.
|
||||
*/
|
||||
get: operations["get_random_job_outcomes_api_audit_random_jobs_get"];
|
||||
put?: never;
|
||||
post?: never;
|
||||
delete?: never;
|
||||
options?: never;
|
||||
head?: never;
|
||||
patch?: never;
|
||||
trace?: never;
|
||||
};
|
||||
"/api/profile": {
|
||||
parameters: {
|
||||
query?: never;
|
||||
|
|
@ -786,6 +806,31 @@ export interface components {
|
|||
/** Nostr Npub */
|
||||
nostr_npub?: string | null;
|
||||
};
|
||||
/**
|
||||
* RandomNumberOutcomeResponse
|
||||
* @description Response model for a random number job outcome.
|
||||
*/
|
||||
RandomNumberOutcomeResponse: {
|
||||
/** Id */
|
||||
id: number;
|
||||
/** Job Id */
|
||||
job_id: number;
|
||||
/** Triggered By User Id */
|
||||
triggered_by_user_id: number;
|
||||
/** Triggered By Email */
|
||||
triggered_by_email: string;
|
||||
/** Value */
|
||||
value: number;
|
||||
/** Duration Ms */
|
||||
duration_ms: number;
|
||||
/** Status */
|
||||
status: string;
|
||||
/**
|
||||
* Created At
|
||||
* Format: date-time
|
||||
*/
|
||||
created_at: string;
|
||||
};
|
||||
/**
|
||||
* RegisterWithInvite
|
||||
* @description Request model for registration with invite.
|
||||
|
|
@ -1188,6 +1233,26 @@ export interface operations {
|
|||
};
|
||||
};
|
||||
};
|
||||
get_random_job_outcomes_api_audit_random_jobs_get: {
|
||||
parameters: {
|
||||
query?: never;
|
||||
header?: never;
|
||||
path?: never;
|
||||
cookie?: never;
|
||||
};
|
||||
requestBody?: never;
|
||||
responses: {
|
||||
/** @description Successful Response */
|
||||
200: {
|
||||
headers: {
|
||||
[name: string]: unknown;
|
||||
};
|
||||
content: {
|
||||
"application/json": components["schemas"]["RandomNumberOutcomeResponse"][];
|
||||
};
|
||||
};
|
||||
};
|
||||
};
|
||||
get_profile_api_profile_get: {
|
||||
parameters: {
|
||||
query?: never;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue