{t('queue.bulkEdit.title', { count: selectedCount })}
{t('queue.bulkEdit.description')}
{/* Printer Assignment */}
{label}
);
}
// Four-state selector for the tri-state calibration options in bulk edit
// (unchanged / off / auto / on). Mirrors TriStateToggle's chrome.
function CalibrationModeToggle({
label,
value,
onChange,
t,
}: {
label: string;
value: CalibrationMode | 'unchanged';
onChange: (val: CalibrationMode | 'unchanged') => void;
t: (key: string) => string;
}) {
const modes: Array<{ key: CalibrationMode | 'unchanged'; label: string; active: string }> = [
{ key: 'unchanged', label: '—', active: 'bg-bambu-dark-tertiary text-white' },
{ key: 'off', label: t('settings.calibrationMode_off'), active: 'bg-red-100 dark:bg-red-500/20 text-red-700 dark:text-red-400' },
{ key: 'auto', label: t('settings.calibrationMode_auto'), active: 'bg-blue-100 dark:bg-blue-500/20 text-blue-700 dark:text-blue-400' },
{ key: 'on', label: t('settings.calibrationMode_on'), active: 'bg-bambu-green/20 text-bambu-green' },
];
return (
{label}
);
}
// Sortable queue item for drag and drop
function SortableQueueItem({
item,
position,
onEdit,
onCancel,
onRemove,
onStop,
onRequeue,
onStart,
onMoveUp,
onMoveDown,
timeFormat = 'system',
isSelected = false,
onToggleSelect,
hasPermission,
canModify,
printerState,
showEta = false,
etaNow,
t,
}: {
item: PrintQueueItem;
position?: number;
onEdit: () => void;
onCancel: () => void;
onRemove: () => void;
onStop: () => void;
onRequeue: () => void;
onStart: () => void;
// Mobile tap-to-reorder (#2667). Undefined = at a list boundary (button
// shown disabled) or reordering isn't available; the desktop drag handle
// is unaffected. Move one step among siblings, then persist via reorder.
onMoveUp?: () => void;
onMoveDown?: () => void;
timeFormat?: TimeFormat;
isSelected?: boolean;
onToggleSelect?: () => void;
hasPermission: (permission: Permission) => boolean;
canModify: (resource: 'queue' | 'archives' | 'library', action: 'update' | 'delete' | 'reprint', createdById: number | null | undefined) => boolean;
printerState?: string | null;
// Whether this item qualifies for an "if started now" ETA (#2740), and the
// instant to measure it from. Both are decided by the page so every row on
// screen quotes the same clock.
showEta?: boolean;
etaNow?: number;
t: (key: string, options?: Record
{modes.map(({ key, label: modeLabel, active }) => (
))}
{
if (window.innerWidth < 640) onToggleSelect();
} : undefined}
>
{/* Mobile selected left accent bar */}
{isMobileSelectable && isSelected && (
)}
);
}
type QueueRow =
| { kind: 'item'; item: PrintQueueItem }
| { kind: 'batch'; batchId: number; batchName: string; items: PrintQueueItem[] };
interface QueueRowRenderProps {
row: QueueRow;
collapsed: boolean;
onToggleBatch?: () => void;
onUngroup?: () => void;
setEditItem: (item: PrintQueueItem) => void;
setConfirmAction: (a: { type: 'cancel' | 'remove' | 'stop'; item: PrintQueueItem }) => void;
startMutation: { mutate: (vars: { id: number; skipFilamentCheck?: boolean }) => void };
selectedItems: number[];
handleToggleSelect: (id: number) => void;
timeFormat: TimeFormat;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
hasPermission: (p: any) => boolean;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
canModify: (resource: any, action: any, createdById?: number | null) => boolean;
t: (key: string, options?: Record
{/* Mobile reorder arrows (#2667). The desktop drag handle is hidden on
phones and touch-drag is unreliable there, so pending rows get
tap-to-move up/down controls instead. Shown only below `sm`. */}
{isPending && (onMoveUp || onMoveDown) && (
{bed.label}
);
})()}
{item.created_by_username && (
e.stopPropagation()}
>
)}
{/* Mobile selection indicator — left accent bar only, no tick */}
{/* Selection checkbox for pending items - hidden on mobile, tap card instead */}
{isPending && onToggleSelect && (
)}
{/* Drag handle or position number - hidden on mobile */}
{isPending ? (
#{position}
) : (
)}
{/* Thumbnail - use plate-specific thumbnail if plate_id is set */}
{item.archive_thumbnail ? (
) : item.library_file_thumbnail ? (
) : (
{/* Info */}
{queueItemDisplayName(item, (n) => t('common.plusNMore', { count: n }))} {(platesData?.is_multi_plate ?? false) && item.plate_id !== undefined && item.plate_id !== null && ` • ${plates.find(plate => plate.index === item.plate_id)?.name || t('queue.plateNumber', { index: item.plate_id })}`}
{item.archive_id ? (
{item.manual_start && (
{/* Progress bar for printing items - TODO: integrate with WebSocket */}
{isPrinting && status && (() => {
// Gate progress/remaining/layer on printer actually running this print.
// Between dispatch and RUNNING transition (H2D/P1 MQTT lag), status.progress
// is stale from the previous print — showing 100% then snapping back to 0%
// once the new print starts. Only trust these fields when state is active.
const isActive = status.state === 'RUNNING' || status.state === 'PAUSE';
const progress = isActive ? (status.progress || 0) : 0;
const remaining = isActive ? status.remaining_time : null;
const layerNum = isActive ? status.layer_num : null;
const totalLayers = isActive ? status.total_layers : null;
return (
{remaining != null && remaining > 0 && (
<>
e.stopPropagation()}>
{isPrinting && (
)}
{isPending && (
<>
{item.manual_start && (
)}
)}
{isHistory && (
<>
)}
{/* Parent header */}
);
}
type HistoryRow =
| { kind: 'item'; item: PrintQueueItem }
| { kind: 'batch'; batchId: number; batchName: string; items: PrintQueueItem[] };
interface HistorySectionProps {
items: PrintQueueItem[];
collapsed: boolean;
visibleCount: number;
onShowMore: () => void;
sortBy: 'date' | 'name' | 'printer';
sortAsc: boolean;
onSortByChange: (v: 'date' | 'name' | 'printer') => void;
onSortAscToggle: () => void;
onRemove: (item: PrintQueueItem) => void;
onRequeue: (item: PrintQueueItem) => void;
timeFormat: TimeFormat;
batchCollapsed: Record
{/* Mobile reorder arrows for the whole group (#2667), mirroring the
desktop drag handle which is hidden on phones. */}
{canReorder && (onMoveUp || onMoveDown) && (
)}
{canReorder && (
{/* Children (only when expanded) */}
{!collapsed && (
{collapsed ? (
{batchRow.batchName}
{t('queue.batch.label', { count: agg.count })}
{agg.time > 0 && (
{onUngroup && (
)}
{batchRow.items.map((child, ci) => (
setEditItem(child)}
onCancel={() => setConfirmAction({ type: 'cancel', item: child })}
onRemove={() => {}}
onStop={() => {}}
onRequeue={() => {}}
onStart={() => startMutation.mutate({ id: child.id })}
onMoveUp={
onMoveBlock && ci > 0
? () => onMoveBlock([child.id], batchRow.items[ci - 1].id, false)
: undefined
}
onMoveDown={
onMoveBlock && ci < batchRow.items.length - 1
? () => onMoveBlock([child.id], batchRow.items[ci + 1].id, true)
: undefined
}
timeFormat={timeFormat}
isSelected={selectedItems.includes(child.id)}
onToggleSelect={() => handleToggleSelect(child.id)}
hasPermission={hasPermission}
canModify={canModify}
showEta={etaEligibleIds.has(child.id)}
etaNow={etaNow}
t={t}
/>
))}
)}
{t('queue.history.emptyTitle')}
{t('queue.history.emptyDescription')}
{t('queue.sections.history')} ({t('queue.itemCount', { count: items.length })})
{rows.map((row) => {
if (row.kind === 'item') {
return (
onRemove(row.item)}
onRequeue={() => onRequeue(row.item)}
timeFormat={timeFormat}
hasPermission={hasPermission}
canModify={canModify}
t={t}
/>
);
}
// Batch group — spans the full grid width so it visually anchors
// its children below it. The children themselves render in the
// same responsive grid pattern inside the expanded body.
const collapsed = batchCollapsed[row.batchId] ?? true;
const completed = row.items.filter((i) => i.status === 'completed').length;
const failed = row.items.filter((i) => i.status === 'failed').length;
const skipped = row.items.filter((i) => i.status === 'skipped').length;
const cancelled = row.items.filter((i) => i.status === 'cancelled').length;
const latest = row.items
.map((i) => i.completed_at || i.created_at)
.filter((v): v is string => !!v)
.sort()
.at(-1);
return (
{items.length > visibleCount && (
{!collapsed && (
);
})}
{row.items.map((child) => (
onRemove(child)}
onRequeue={() => onRequeue(child)}
timeFormat={timeFormat}
hasPermission={hasPermission}
canModify={canModify}
t={t}
/>
))}
)}
{t('queue.history.showingCount', {
shown: Math.min(visibleCount, items.length),
total: items.length,
})}
)}
{/* Header */}
{/* Tab strip — Active queue is the main view; History and Timeline
live in their own tabs so the queue page stays focused. */}
) : activeTab === 'timeline' ? (
{
if (['completed', 'failed', 'skipped', 'cancelled'].includes(item.status)) {
setRequeueItem(item);
} else if (item.status === 'pending') {
setEditItem(item);
} else if (item.status === 'printing') {
setConfirmAction({ type: 'stop', item });
}
}}
t={t}
/>
) : activeTab === 'history' ? (
setHistoryVisibleCount((c) => c + HISTORY_PAGE_SIZE)}
sortBy={historySortBy}
sortAsc={historySortAsc}
onSortByChange={setHistorySortBy}
onSortAscToggle={() => setHistorySortAsc(!historySortAsc)}
onRemove={(item) => setConfirmAction({ type: 'remove', item })}
onRequeue={setRequeueItem}
timeFormat={timeFormat}
batchCollapsed={batchCollapsed}
toggleBatchCollapsed={toggleBatchCollapsed}
hasPermission={hasPermission}
canModify={canModify}
t={t}
/>
) : (
t('common.plusNMore', { count: n }))}
queueItem={editItem}
onClose={() => setEditItem(null)}
/>
)}
{/* Re-queue Modal */}
{requeueItem && (
t('common.plusNMore', { count: n }))}
onClose={() => setRequeueItem(null)}
/>
)}
{/* Confirm Action Modal */}
{filamentShortConfirm && (
t('queue.filamentShort.lineItem', {
slot: d.slot_id,
required: Math.round(d.required_grams),
remaining:
d.remaining_grams == null
? t('queue.filamentShort.unknown')
: Math.round(d.remaining_grams),
}),
)
.join('\n')
}
confirmText={t('queue.filamentShort.printAnyway')}
variant="warning"
onConfirm={() => {
startMutation.mutate({ id: filamentShortConfirm.itemId, skipFilamentCheck: true });
}}
onCancel={() => setFilamentShortConfirm(null)}
/>
)}
{confirmAction && (
{
if (confirmAction.type === 'cancel') {
cancelMutation.mutate(confirmAction.item.id);
} else if (confirmAction.type === 'stop') {
stopMutation.mutate(confirmAction.item.id);
} else {
removeMutation.mutate(confirmAction.item.id);
}
setConfirmAction(null);
}}
onCancel={() => setConfirmAction(null)}
/>
)}
{/* #1818: Resume-after-failure confirm */}
{resumeConfirm && (
resumeAfterFailureMutation.mutate(resumeConfirm.printerId)}
onCancel={() => setResumeConfirm(null)}
/>
)}
{/* Clear History Confirm Modal */}
{showClearHistoryConfirm && (
{
clearHistoryMutation.mutate();
setShowClearHistoryConfirm(false);
}}
onCancel={() => setShowClearHistoryConfirm(false)}
/>
)}
{/* Bulk Edit Modal */}
{showBulkEditModal && (
({ id: p.id, name: p.name, nozzle_count: p.nozzle_count })) || []}
onSave={(data) => {
if (Object.keys(data).length > 0) {
bulkUpdateMutation.mutate({ item_ids: selectedItems, ...data });
}
}}
onClose={() => setShowBulkEditModal(false)}
isSaving={bulkUpdateMutation.isPending}
canControlPrinter={hasPermission('printers:control')}
hasGcodeSnippets={!!settings?.gcode_snippets}
t={t}
/>
)}
{/* Group as batch modal — name prompt */}
{groupBatchModal && (
{
// Suggest a name derived from the first selected item's source.
const first = pendingItems.find((i) => selectedItems.includes(i.id));
const raw = first?.archive_name || first?.library_file_name || '';
const cleaned = raw.replace(/\.gcode\.3mf$/i, '').replace(/\.3mf$/i, '');
return cleaned ? `${cleaned}` : t('queue.batch.defaultName');
})()}
onSave={(name) => createBatchMutation.mutate({ name, item_ids: selectedItems })}
onClose={() => setGroupBatchModal(false)}
t={t}
/>
)}
{/* Ungroup batch confirm */}
{ungroupBatchId !== null && (
ungroupBatchMutation.mutate(ungroupBatchId)}
onCancel={() => setUngroupBatchId(null)}
/>
)}
);
}
interface GroupBatchModalProps {
itemCount: number;
defaultName: string;
isSaving: boolean;
onSave: (name: string) => void;
onClose: () => void;
t: (key: string, options?: Record
{t('queue.subtitle')}
{([
{ id: 'queue' as const, label: t('queue.tabs.queue'), icon: Clock, count: pendingItems.length + activeItems.length },
{ id: 'batches' as const, label: t('queue.tabs.batches'), icon: Package, count: activeBatchCount },
{ id: 'history' as const, label: t('queue.tabs.history'), icon: ListOrdered, count: historyItems.length },
{ id: 'timeline' as const, label: t('queue.tabs.timeline'), icon: GanttChart, count: null as number | null },
// Slicer Pipelines dashboard (#1425 PR C). Lives here instead of
// its own sidebar entry so the Print Queue page is the single
// place an operator looks for "what's running / what ran".
{ id: 'pipelines' as const, label: t('queue.tabs.pipelines'), icon: Workflow, count: null as number | null },
]).map(({ id, label, icon: Icon, count }) => (
))}
{/* Summary Stats — about the print queue, not pipelines. */}
{activeTab !== 'pipelines' && activeTab !== 'batches' &&
{gateBlockedPrinters.map(({ printerId, printerName, skippedCount }) => (
)}
{/* Filters — about the print queue items (printer / status / location).
The Pipelines tab has its own pipeline + status filters inside the
dashboard, so this row is hidden when that tab is active. */}
{activeTab !== 'pipelines' && activeTab !== 'batches' && (
{t('queue.resumeAfterFailure.banner', {
printer: printerName,
count: skippedCount,
})}
{t('queue.resumeAfterFailure.bannerHint')}
{uniqueLocations.length > 0 && (
)}
{activeTab === 'history' && historyItems.length > 0 && (
)}
)}
{/* Queue-tab controls: layout toggle (Position / Printer) + SJF.
Hidden on History/Timeline tabs since they don't apply. */}
{activeTab === 'queue' && (
{t('common.loading')}
) : queue?.length === 0 ? (
{t('queue.empty.title')}
{t('queue.empty.description')}
{/* Active Prints */}
{activeItems.length > 0 && (
)}
{/* Pending Queue */}
{pendingItems.length > 0 && (
{/* Bulk action toolbar (now with "Group as batch") */}
{activeLayout === 'position' ? (
{(() => {
if (activeDragId === null) return null;
// Batch drag — show the group ghost with copy count.
if (typeof activeDragId === 'string' && activeDragId.startsWith('batch-')) {
const batchId = Number(activeDragId.slice('batch-'.length));
const siblings = pendingItems.filter((i) => i.batch_id === batchId);
if (siblings.length === 0) return null;
const name = siblings[0].batch_name || t('queue.batch.defaultName');
return (
)}
)}
{/* Edit Modal */}
{editItem && (
{t('queue.sections.currentlyPrinting')}
{activeItems.map((item) => (
{}}
onCancel={() => {}}
onRemove={() => {}}
onStop={() => setConfirmAction({ type: 'stop', item })}
onRequeue={() => {}}
onStart={() => {}}
timeFormat={timeFormat}
hasPermission={hasPermission}
canModify={canModify}
printerState={item.printer_id ? printerStateMap[item.printer_id] : null}
t={t}
/>
))}
{selectedItems.length > 0 && (
<>
{t('queue.bulkEdit.selected', { count: selectedItems.length })}
{canGroupSelected && (
)}
)}
{groupedRows.map((row, idx) => (
toggleBatchCollapsed(row.batchId) : undefined}
onUngroup={row.kind === 'batch' ? () => setUngroupBatchId(row.batchId) : undefined}
setEditItem={setEditItem}
setConfirmAction={setConfirmAction}
startMutation={startMutation}
selectedItems={selectedItems}
handleToggleSelect={handleToggleSelect}
timeFormat={timeFormat}
hasPermission={hasPermission}
canModify={canModify}
t={t}
etaEligibleIds={etaEligibleIds}
etaNow={etaNow}
aggregateForRows={aggregateForRows}
{...rowMovers(groupedRows, idx)}
onMoveBlock={canReorderManually ? moveBlockRelativeTo : undefined}
/>
))}
) : (
{printerBuckets.map((bucket) => {
const agg = aggregateForRows(bucket.rows);
return (
)}
{bucket.rows.map((row, idx) => (
toggleBatchCollapsed(row.batchId) : undefined}
onUngroup={row.kind === 'batch' ? () => setUngroupBatchId(row.batchId) : undefined}
setEditItem={setEditItem}
setConfirmAction={setConfirmAction}
startMutation={startMutation}
selectedItems={selectedItems}
handleToggleSelect={handleToggleSelect}
timeFormat={timeFormat}
hasPermission={hasPermission}
canModify={canModify}
t={t}
etaEligibleIds={etaEligibleIds}
etaNow={etaNow}
aggregateForRows={aggregateForRows}
{...rowMovers(bucket.rows, idx)}
onMoveBlock={canReorderManually ? moveBlockRelativeTo : undefined}
/>
))}
{t('queue.batch.groupAsBatchDescription', { count: itemCount })}
setName(e.target.value)} placeholder={t('queue.batch.namePlaceholder')} maxLength={120} className="w-full px-3 py-2 bg-bambu-dark border border-bambu-dark-tertiary rounded-lg text-white focus:border-bambu-green focus:outline-none mb-5" />