add pipeline Kanban board: route, layout, review/queue/processing/done columns, schedule controls

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-27 01:51:47 +01:00
parent fd72a6d212
commit 8bdfa79215
10 changed files with 515 additions and 5 deletions
@@ -0,0 +1,62 @@
+import { Badge } from '~/shared/components/ui/badge';
+
+interface ProcessingColumnProps {
+	items: any[];
+	progress?: { id: number; seconds: number; total: number } | null;
+	queueStatus?: { status: string; until?: string; seconds?: number } | null;
+}
+
+export function ProcessingColumn({ items, progress, queueStatus }: ProcessingColumnProps) {
+	const job = items[0]; // at most one running job
+
+	const formatTime = (s: number) => {
+		const m = Math.floor(s / 60);
+		const sec = Math.floor(s % 60);
+		return `${m}:${String(sec).padStart(2, '0')}`;
+	};
+
+	return (
+		<div className="flex flex-col w-72 min-w-72 bg-gray-50 rounded-lg">
+			<div className="px-3 py-2 border-b font-medium text-sm">Processing</div>
+			<div className="flex-1 p-3">
+				{queueStatus && queueStatus.status !== 'running' && (
+					<div className="mb-3 text-xs text-gray-500 bg-white rounded border p-2">
+						{queueStatus.status === 'paused' && <>Paused until {queueStatus.until}</>}
+						{queueStatus.status === 'sleeping' && <>Sleeping {queueStatus.seconds}s between jobs</>}
+						{queueStatus.status === 'idle' && <>Idle</>}
+					</div>
+				)}
+
+				{job ? (
+					<div className="rounded border bg-white p-3">
+						<p className="text-sm font-medium truncate">{job.name}</p>
+						<div className="flex items-center gap-2 mt-1">
+							<Badge variant="running">running</Badge>
+							<Badge variant={job.job_type === 'transcode' ? 'manual' : 'noop'}>
+								{job.job_type}
+							</Badge>
+						</div>
+
+						{progress && progress.total > 0 && (
+							<div className="mt-3">
+								<div className="flex justify-between text-xs text-gray-500 mb-1">
+									<span>{formatTime(progress.seconds)}</span>
+									<span>{Math.round((progress.seconds / progress.total) * 100)}%</span>
+									<span>{formatTime(progress.total)}</span>
+								</div>
+								<div className="h-2 bg-gray-200 rounded-full overflow-hidden">
+									<div
+										className="h-full bg-blue-500 rounded-full transition-all"
+										style={{ width: `${Math.min(100, (progress.seconds / progress.total) * 100)}%` }}
+									/>
+								</div>
+							</div>
+						)}
+					</div>
+				) : (
+					<p className="text-sm text-gray-400 text-center py-8">No active job</p>
+				)}
+			</div>
+		</div>
+	);
+}