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

frontend/app/admin/random-jobs/page.tsx

@@ -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 };

frontend/app/components/Header.tsx

@@ -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) {

frontend/app/generated/api.ts

@@ -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;