added to remote repo

2026-05-21 08:18:29 +02:00
parent 8697c9f405
commit cc599b6e18
8049 changed files with 1096323 additions and 0 deletions
@@ -0,0 +1,45 @@
+export function JobStatusPanel({ job }) {
+  return (
+    <section className="rounded-md border border-zinc-800 bg-zinc-900/70">
+      <div className="flex items-center justify-between border-b border-zinc-800 px-4 py-3">
+        <h2 className="text-sm font-semibold">Job Status</h2>
+        <span className={`rounded-md border px-2 py-1 text-xs ${statusClass(job?.status)}`}>
+          {job?.status || 'idle'}
+        </span>
+      </div>
+      <div className="grid gap-4 p-4 lg:grid-cols-[280px_1fr]">
+        <dl className="space-y-3 text-sm">
+          <Info label="Type" value={job?.type || '-'} />
+          <Info label="Current Step" value={job?.currentStep || 'No active job'} />
+          <Info label="Started" value={formatTime(job?.startedAt)} />
+          <Info label="Finished" value={formatTime(job?.finishedAt)} />
+          {job?.error ? <Info label="Error" value={job.error} tone="text-red-300" /> : null}
+        </dl>
+        <pre className="max-h-80 overflow-auto rounded-md border border-zinc-800 bg-zinc-950 p-3 text-xs leading-5 text-zinc-300">
+          {(job?.logs || ['No logs yet.']).join('\n')}
+        </pre>
+      </div>
+    </section>
+  );
+}
+
+function Info({ label, value, tone = 'text-zinc-300' }) {
+  return (
+    <div>
+      <dt className="text-xs uppercase tracking-wide text-zinc-500">{label}</dt>
+      <dd className={`mt-1 break-words ${tone}`}>{value}</dd>
+    </div>
+  );
+}
+
+function statusClass(status) {
+  if (status === 'success') return 'border-emerald-800 bg-emerald-950 text-emerald-300';
+  if (status === 'failed') return 'border-red-800 bg-red-950 text-red-300';
+  if (status === 'running' || status === 'queued') return 'border-cyan-800 bg-cyan-950 text-cyan-300';
+  return 'border-zinc-800 bg-zinc-950 text-zinc-400';
+}
+
+function formatTime(value) {
+  if (!value) return '-';
+  return new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'medium' }).format(new Date(value));
+}