[FA-misc] Reporting service now has a status page on the frontend

fictionarchive-web-astro/src/lib/components/JobsTable.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import JobRow from './JobRow.svelte';
+
+	interface Props {
+		jobs: any[];
+	}
+
+	let { jobs }: Props = $props();
+
+	let expandedJobId: string | null = $state(null);
+
+	const COLUMN_COUNT = 6;
+
+	function toggleRow(jobId: string) {
+		expandedJobId = expandedJobId === jobId ? null : jobId;
+	}
+</script>
+
+<div class="overflow-x-auto rounded-md border">
+	<table class="w-full text-left">
+		<thead>
+			<tr class="border-b bg-muted/50">
+				<th class="w-10 px-3 py-3"></th>
+				<th class="px-3 py-3 text-sm font-medium text-muted-foreground">Name</th>
+				<th class="px-3 py-3 text-sm font-medium text-muted-foreground">Type</th>
+				<th class="px-3 py-3 text-sm font-medium text-muted-foreground">Status</th>
+				<th class="px-3 py-3 text-sm font-medium text-muted-foreground">Created</th>
+				<th class="px-3 py-3 text-sm font-medium text-muted-foreground">Sub-jobs</th>
+			</tr>
+		</thead>
+		<tbody>
+			{#each jobs as job (job.id)}
+				<JobRow
+					{job}
+					expanded={expandedJobId === job.id}
+					onToggle={() => toggleRow(job.id)}
+					columnCount={COLUMN_COUNT}
+				/>
+			{/each}
+		</tbody>
+	</table>
+</div>