diff --git a/web/frontend/src/features/transcription/components/AudioFilesTable.tsx b/web/frontend/src/features/transcription/components/AudioFilesTable.tsx index c965955f..113b2a32 100644 --- a/web/frontend/src/features/transcription/components/AudioFilesTable.tsx +++ b/web/frontend/src/features/transcription/components/AudioFilesTable.tsx @@ -228,10 +228,23 @@ export const AudioFilesTable = memo(function AudioFilesTable({ const [deleteDialogOpen, setDeleteDialogOpen] = useState(false); const [selectedFile, setSelectedFile] = useState(null); + // Calculate queue positions for pending jobs + const queuePositions = useMemo(() => { + const pendingJobs = data.filter(job => job.status === "pending"); + // Sort by created_at ascending (FIFO) + pendingJobs.sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime()); + + const positions: Record = {}; + pendingJobs.forEach((job, index) => { + positions[job.id] = index + 1; + }); + return positions; + }, [data]); + // Side effects for queue and progress useEffect(() => { if (data.length > 0) { - // queuePositions logic removed + // queuePositions logic derived above // Fetch track progress for processing multi-track jobs const processingMultiTrackJobs = data.filter(job => @@ -640,14 +653,28 @@ export const AudioFilesTable = memo(function AudioFilesTable({ ); case "pending": + const position = queuePositions[file.id]; return ( -
- +
+
+ #{position || "-"} +
- Queued + Queue Position: #{position} + + ); + case "uploaded": + return ( + + +
+ +
+
+ Uploaded (Ready to Transcribe)
); default: @@ -658,11 +685,11 @@ export const AudioFilesTable = memo(function AudioFilesTable({
- Uploaded + Unknown Status
); } - }, [trackProgress]); + }, [trackProgress, queuePositions]); // formatDuration removed as requested