feat - Job Tracker

frontend/package.json

@@ -46,6 +46,7 @@
 		"prettier-plugin-svelte": "^3.3.2",
 		"svelte": "^5.15.0",
 		"svelte-check": "^4.1.1",
+		"svelte-headless-table": "^0.18.3",
 		"svelte-intersection-observer": "^1.0.0",
 		"svelte-radix": "^1.1.1",
 		"sveltekit-search-params": "^4.0.0-next.0",
@@ -74,7 +75,10 @@
 		"cookie": "^0.7.0",
 		"glob": "^9.0.0",
 		"vite": "^6.0.5",
-		"nanoid": "^3.3.8"
+		"nanoid": "^3.3.8",
+		"svelte-headless-table": {
+			"svelte": "^5.0.0"
+		}
 	},
 	"optionalDependencies": {
 		"@rollup/rollup-linux-x64-gnu": "^4.29.0"

frontend/src/app.css

@@ -100,6 +100,19 @@
 		--destructive-foreground: 0 0% 98%;
 
 		--ring: 0 0% 83.1%;
+
+		--job-waiting-bg: 0 0% 10%;
+		--job-waiting-text: 245 40% 72%;
+		--job-running-bg: 250 40% 15%;
+		--job-running-text: 245 40% 72%;
+		--job-failed-bg: 10 55% 13%;
+		--job-failed-text: 10 40% 58%;
+		--job-completed-bg: 160 47% 11%;
+		--job-completed-text: 160 30% 48%;
+		--job-queued-bg: 0 0% 10%;
+		--job-queued-text: 0 0% 64%;
+		--job-invalid-bg: 44 82% 11%;
+		--job-invalid-text: 44 35% 55%;
 	}
 }
 

frontend/src/lib/components/CellDivider/CellDivider.svelte

@@ -0,0 +1,3 @@
+<div
+	class="absolute inset-x-[-0.5px] inset-y-[0px] border-border border-r pointer-events-none"
+></div>

frontend/src/lib/components/ExpandableCell/ExpandableCell.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import IconChevronDown from '~icons/heroicons/chevron-down-16-solid';
+	import type { Writable } from 'svelte/store';
+	import CellDivider from '$lib/components/CellDivider/CellDivider.svelte';
+	import Badge from '$lib/components/ui/badge/badge.svelte';
+
+	let {
+		isExpanded,
+		canExpand,
+		depth,
+		name,
+		childrenCount
+	}: {
+		isExpanded: Writable<boolean>;
+		canExpand: Writable<boolean>;
+		depth: number;
+		name: string;
+		childrenCount: number;
+	} = $props();
+</script>
+
+<div class="flex items-center justify-center h-full relative">
+	<CellDivider />
+	<div
+		class="flex items-center bg-neutral-300 border border-neutral-400 rounded-md p-2 pl-0 w-full mr-4"
+		style:margin-left={`calc(${depth * 0.75}rem)`}
+	>
+		{#if $canExpand}
+			<button class="mr-1 ml-1" onclick={() => ($isExpanded = !$isExpanded)}>
+				<IconChevronDown
+					class="size-4 transition-transform duration-200 text-neutral-900 {$isExpanded
+						? ''
+						: '-rotate-90'}"
+				/>
+			</button>
+		{/if}
+		{#if childrenCount > 0}
+			<Badge variant="secondary" class="border-none rounded-xl bg-neutral-50 text-neutral-900">
+				{childrenCount}
+			</Badge>
+		{/if}
+		<span class="whitespace-nowrap pl-2 text-neutral-900">{name}</span>
+	</div>
+</div>

frontend/src/lib/components/JobOverviewChart/JobOverviewChart.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import type { JobTreeNode } from '$lib/types/Job/Job';
+	import { statusColors, statusBorderColors } from '$lib/types/Job/Job';
+
+	let {
+		job,
+		dates,
+		getDaysInRange,
+		formatDate
+	}: {
+		job: JobTreeNode;
+		dates: string[];
+		getDaysInRange: (start: string, end: string, availableDates: string[]) => number;
+		formatDate: (dateString: string) => string;
+	} = $props();
+</script>
+
+<div class="flex items-center px-2 bg-transparent w-full h-full">
+	{#if job}
+		<div class="flex items-center w-full">
+			{#each job.runs as run}
+				{@const daysInRange = getDaysInRange(run.start, run.end, dates)}
+				{@const widthPercentage = (daysInRange / dates.length) * 100}
+				<div
+					class={`h-4 rounded-sm ${statusColors[run.status]} ${statusBorderColors[run.status]}`}
+					style="width: {widthPercentage}%"
+					title={`${run.status}: ${formatDate(run.start)} - ${formatDate(run.end)}`}
+				></div>
+			{/each}
+		</div>
+	{:else}
+		<span class="text-sm text-neutral-600">No data available</span>
+	{/if}
+</div>