From 44a21f9ea83edcb7254da7409c360017d99b2091 Mon Sep 17 00:00:00 2001
From: bluemoehre <bluemoehre@gmx.de>
Date: Wed, 1 Jul 2026 00:18:29 +0200
Subject: [PATCH] add Jobs components

---
 src/components/JobList.tsx     | 25 +++++++++++
 src/components/JobListItem.tsx | 30 +++++++++++++
 src/components/ui/label.tsx    | 18 ++++++++
 src/components/ui/progress.tsx | 81 ++++++++++++++++++++++++++++++++++
 src/views/JobsView.tsx         |  7 ++-
 5 files changed, 159 insertions(+), 2 deletions(-)
 create mode 100644 src/components/JobList.tsx
 create mode 100644 src/components/JobListItem.tsx
 create mode 100644 src/components/ui/label.tsx
 create mode 100644 src/components/ui/progress.tsx

diff --git a/src/components/JobList.tsx b/src/components/JobList.tsx
new file mode 100644
index 0000000..8993573
--- /dev/null
+++ b/src/components/JobList.tsx
@@ -0,0 +1,25 @@
+import { JobListItem, type JobListItemProps } from "@/components/JobListItem"
+import { cn } from "@/lib/utils"
+
+export interface JobListProps {
+  jobs: JobListItemProps[]
+  className?: string
+}
+
+export function JobList({ jobs, className }: JobListProps) {
+  if (jobs.length === 0) {
+    return (
+      <div className={cn("flex flex-col gap-2", className)}>
+        <p className="text-sm text-muted-foreground">No running jobs.</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn("flex flex-col gap-2", className)}>
+      {jobs.map((job, index) => (
+        <JobListItem key={index} {...job} />
+      ))}
+    </div>
+  )
+}
diff --git a/src/components/JobListItem.tsx b/src/components/JobListItem.tsx
new file mode 100644
index 0000000..bee23dd
--- /dev/null
+++ b/src/components/JobListItem.tsx
@@ -0,0 +1,30 @@
+import { Progress } from "@/components/ui/progress"
+import { cn } from "@/lib/utils"
+import { formatTime } from "@/utils/datetime"
+
+export interface JobListItemProps {
+  title: string
+  runningTime: string
+  progress: number
+  startTime?: string
+  eta?: string
+  className?: string
+}
+
+export function JobListItem({ title, runningTime, progress, startTime, eta, className }: JobListItemProps) {
+  return (
+    <div className={cn("flex flex-col gap-2 rounded-lg border p-3", className)}>
+      <div className="flex items-center justify-between">
+        <span className="text-sm font-medium">{title}</span>
+        <span className="text-xs text-muted-foreground tabular-nums">{runningTime}</span>
+      </div>
+      <Progress value={progress} />
+      {(startTime || eta) && (
+        <div className="flex items-center justify-between">
+          <span className="text-xs text-muted-foreground tabular-nums">{startTime ? formatTime(startTime) : ""} started</span>
+          <span className="text-xs text-muted-foreground tabular-nums">{eta ? `ETA ${formatTime(eta)}` : ""}</span>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
new file mode 100644
index 0000000..f162996
--- /dev/null
+++ b/src/components/ui/label.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Label({ className, ...props }: React.ComponentProps<"label">) {
+  return (
+    <label
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
diff --git a/src/components/ui/progress.tsx b/src/components/ui/progress.tsx
new file mode 100644
index 0000000..844e869
--- /dev/null
+++ b/src/components/ui/progress.tsx
@@ -0,0 +1,81 @@
+import { Progress as ProgressPrimitive } from "@base-ui/react/progress"
+
+import { cn } from "@/lib/utils"
+
+function Progress({
+  className,
+  children,
+  value,
+  ...props
+}: ProgressPrimitive.Root.Props) {
+  return (
+    <ProgressPrimitive.Root
+      value={value}
+      data-slot="progress"
+      className={cn("flex flex-wrap gap-3", className)}
+      {...props}
+    >
+      {children}
+      <ProgressTrack>
+        <ProgressIndicator />
+      </ProgressTrack>
+    </ProgressPrimitive.Root>
+  )
+}
+
+function ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {
+  return (
+    <ProgressPrimitive.Track
+      className={cn(
+        "relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted",
+        className
+      )}
+      data-slot="progress-track"
+      {...props}
+    />
+  )
+}
+
+function ProgressIndicator({
+  className,
+  ...props
+}: ProgressPrimitive.Indicator.Props) {
+  return (
+    <ProgressPrimitive.Indicator
+      data-slot="progress-indicator"
+      className={cn("h-full bg-primary transition-all", className)}
+      {...props}
+    />
+  )
+}
+
+function ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {
+  return (
+    <ProgressPrimitive.Label
+      className={cn("text-sm font-medium", className)}
+      data-slot="progress-label"
+      {...props}
+    />
+  )
+}
+
+function ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {
+  return (
+    <ProgressPrimitive.Value
+      className={cn(
+        "ml-auto text-sm text-muted-foreground tabular-nums",
+        className
+      )}
+      data-slot="progress-value"
+      {...props}
+    />
+  )
+}
+
+export {
+  Progress,
+  ProgressTrack,
+  ProgressIndicator,
+  ProgressLabel,
+  ProgressValue,
+}
diff --git a/src/views/JobsView.tsx b/src/views/JobsView.tsx
index 42be260..78a3e16 100644
--- a/src/views/JobsView.tsx
+++ b/src/views/JobsView.tsx
@@ -1,7 +1,10 @@
+import { JobList } from "@/components/JobList"
+import mockJobs from "@/mocks/jobs.json"
+
 export function JobsView() {
   return (
-    <div className="flex flex-1 flex-col gap-1 p-4">
-      <p className="text-sm text-muted-foreground">Running jobs coming soon.</p>
+    <div className="flex flex-1 flex-col gap-1 mt-4 mb-4">
+      <JobList jobs={mockJobs} />
     </div>
   )
 }