First crack at the app. Still lots of bugs to squash.

src/lib/components/StatusBadge.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  type Status = 'NOT_FOUND' | 'SUBMITTED' | 'APPROVED' | 'REJECTED' | 'REMOVED'
+    | 'UNSTARTED' | 'ONGOING' | 'CLOSED'
+
+  let { status }: { status: Status } = $props()
+
+  const config: Record<Status, { label: string; cls: string }> = {
+    NOT_FOUND:  { label: 'Not Found',  cls: 'badge-ghost' },
+    SUBMITTED:  { label: 'Submitted',  cls: 'badge-warning' },
+    APPROVED:   { label: 'Approved',   cls: 'badge-success' },
+    REJECTED:   { label: 'Rejected',   cls: 'badge-error' },
+    REMOVED:    { label: 'Removed',    cls: 'badge-ghost' },
+    UNSTARTED:  { label: 'Upcoming',   cls: 'badge-info' },
+    ONGOING:    { label: 'Active',     cls: 'badge-success' },
+    CLOSED:     { label: 'Closed',     cls: 'badge-ghost' },
+  }
+
+  const { label, cls } = $derived(config[status] ?? { label: status, cls: 'badge-ghost' })
+</script>
+
+<span class="badge {cls} font-medium px-3">{label}</span>