diff --git a/milventory/src/components/Map/FreePlaceDots.js b/milventory/src/components/Map/FreePlaceDots.js
new file mode 100644
index 0000000..8d45a0f
--- /dev/null
+++ b/milventory/src/components/Map/FreePlaceDots.js
@@ -0,0 +1,176 @@
+import React, { useEffect, useRef, useMemo } from 'react';
+import * as d3 from 'd3';
+import { useInventory, FREE_SUBTRACT_DOT_PREFIX } from '../../context/InventoryContext';
+
+const FreePlaceDots = () => {
+ const gRef = useRef(null);
+ const {
+ selectedMasterItem,
+ subtractModeItem,
+ moveModeItem,
+ freePlaceModeItem,
+ freePlacementsBySupplyPublicId,
+ freePlaceVisualDots,
+ subtractModePending,
+ moveModeFreeCoordById,
+ updateFreePlaceSessionCoord,
+ updateMoveModeFreeDotPosition,
+ updateMoveModeDotDragLiveForArrows,
+ moveModeDotDragLiveByIdRef,
+ requestMasterArrowsRedraw,
+ handleFreePlaceSessionDotDelete,
+ handleSubtractFreeDotClick
+ } = useInventory();
+
+ const dotItemName =
+ subtractModeItem || moveModeItem || freePlaceModeItem || selectedMasterItem || null;
+
+ const dots = useMemo(() => {
+ if (!dotItemName) return [];
+ if (freePlaceModeItem && dotItemName === freePlaceModeItem && freePlaceVisualDots != null) {
+ return freePlaceVisualDots;
+ }
+ return freePlacementsBySupplyPublicId.get(dotItemName) || [];
+ }, [dotItemName, freePlaceModeItem, freePlaceVisualDots, freePlacementsBySupplyPublicId]);
+
+ const displayDots = useMemo(() => {
+ if (!subtractModeItem || dotItemName !== subtractModeItem) return dots;
+ return dots
+ .map((d) => {
+ const key = `${FREE_SUBTRACT_DOT_PREFIX}||${d.id}`;
+ const pending = subtractModePending.get(key) || 0;
+ const displayQty = (d.qty || 0) - pending;
+ if (displayQty <= 0) return null;
+ return { ...d, displayQty, pendingSubtract: pending };
+ })
+ .filter(Boolean);
+ }, [dots, dotItemName, subtractModeItem, subtractModePending]);
+
+ const dotsInteractiveSubtract = Boolean(
+ subtractModeItem && dotItemName === subtractModeItem
+ );
+ const dotsInteractiveMove = Boolean(moveModeItem && dotItemName === moveModeItem);
+ const dotsInteractiveFreePlace = Boolean(
+ freePlaceModeItem && dotItemName === freePlaceModeItem
+ );
+ const dotsInteractive =
+ dotsInteractiveSubtract || dotsInteractiveMove || dotsInteractiveFreePlace;
+ const allowDrag = dotsInteractiveMove || dotsInteractiveFreePlace;
+
+ const renderDots = useMemo(() => {
+ if (!dotsInteractiveMove) return displayDots;
+ return displayDots.map((d) => {
+ const o = moveModeFreeCoordById.get(d.id);
+ if (!o) return d;
+ return { ...d, x: o.x, y: o.y };
+ });
+ }, [displayDots, dotsInteractiveMove, moveModeFreeCoordById]);
+
+ useEffect(() => {
+ if (!gRef.current) return;
+ const g = d3.select(gRef.current);
+ g.selectAll('*').remove();
+ if (!dotItemName || renderDots.length === 0) return;
+
+ const drag = d3
+ .drag()
+ .filter((event) => {
+ if (event.ctrlKey || event.button) return false;
+ const t = event.type;
+ if ((t === 'mousedown' || t === 'pointerdown') && event.detail > 1) return false;
+ return true;
+ })
+ .clickDistance(4)
+ .on('start', (event) => {
+ event.sourceEvent?.stopPropagation?.();
+ })
+ .on('drag', function dragMove(event, d) {
+ if (!allowDrag) return;
+ const node = d3.select(this);
+ const cx = (+node.attr('cx') || 0) + event.dx;
+ const cy = (+node.attr('cy') || 0) + event.dy;
+ node.attr('cx', cx).attr('cy', cy);
+ if (dotsInteractiveMove) {
+ updateMoveModeDotDragLiveForArrows(d.id, cx, cy);
+ }
+ })
+ .on('end', function dragEnd(event, d) {
+ if (!allowDrag) return;
+ const cx = +d3.select(this).attr('cx');
+ const cy = +d3.select(this).attr('cy');
+ const ox = d.x;
+ const oy = d.y;
+ const significant = Math.hypot(cx - ox, cy - oy) >= 0.5;
+ if (dotsInteractiveMove) {
+ moveModeDotDragLiveByIdRef.current.delete(d.id);
+ if (!significant) requestMasterArrowsRedraw();
+ }
+ if (!significant) return;
+ if (dotsInteractiveMove) {
+ updateMoveModeFreeDotPosition(d.id, cx, cy);
+ } else if (dotsInteractiveFreePlace) {
+ updateFreePlaceSessionCoord(d.id, cx, cy);
+ }
+ });
+
+ const cursor = dotsInteractiveSubtract
+ ? 'pointer'
+ : allowDrag
+ ? 'grab'
+ : 'default';
+
+ const circles = g
+ .selectAll('circle')
+ .data(renderDots, (d) => d.id)
+ .join('circle')
+ .attr('cx', (d) => d.x)
+ .attr('cy', (d) => d.y)
+ .attr('r', dotsInteractive ? 12 : 9)
+ .attr('class', 'free-place-dot')
+ .style('cursor', cursor)
+ .style('fill', 'var(--accent)')
+ .style('stroke', '#fff')
+ .style('stroke-width', 2)
+ .style('opacity', (d) =>
+ dotsInteractiveSubtract && d.pendingSubtract > 0 ? 0.62 : 1
+ )
+ .style('pointer-events', dotsInteractive ? 'all' : 'none')
+ .on('click', (e, d) => {
+ if (!dotsInteractiveSubtract) return;
+ e.stopPropagation();
+ e.preventDefault();
+ void handleSubtractFreeDotClick(d.id);
+ })
+ .on('dblclick', (e, d) => {
+ if (!dotsInteractiveFreePlace) return;
+ e.stopPropagation();
+ e.preventDefault();
+ handleFreePlaceSessionDotDelete(d.id);
+ });
+
+ if (allowDrag) {
+ circles.call(drag);
+ }
+ }, [
+ renderDots,
+ dotItemName,
+ dotsInteractive,
+ dotsInteractiveSubtract,
+ dotsInteractiveMove,
+ dotsInteractiveFreePlace,
+ allowDrag,
+ updateFreePlaceSessionCoord,
+ updateMoveModeFreeDotPosition,
+ updateMoveModeDotDragLiveForArrows,
+ moveModeDotDragLiveByIdRef,
+ requestMasterArrowsRedraw,
+ handleFreePlaceSessionDotDelete,
+ handleSubtractFreeDotClick
+ ]);
+
+ if (!dotItemName || renderDots.length === 0) return null;
+
+ return ;
+};
+
+export default FreePlaceDots;
diff --git a/milventory/src/components/Map/Map.js b/milventory/src/components/Map/Map.js
new file mode 100644
index 0000000..b8399a7
--- /dev/null
+++ b/milventory/src/components/Map/Map.js
@@ -0,0 +1,435 @@
+import React, { forwardRef, useRef } from 'react';
+import { useInventory } from '../../context/InventoryContext';
+import MasterItemPreview from '../Master/MasterItemPreview';
+import ArrowConnections from './ArrowConnections';
+import BoxInventoryOverlay from './BoxInventoryOverlay';
+import AddModeArrow from './AddModeArrow';
+import MoveModeBoxes from './MoveModeBoxes';
+import SubtractModePreview from './SubtractModePreview';
+import FreePlaceDots from './FreePlaceDots';
+import { svgMarkupToDataUrl } from '../../utils/svgDataUrl';
+import {
+ hasShelves,
+ getShelfCount,
+ getShelfLabel,
+ getShelfIndicesTopToBottom
+} from '../../utils/shelfLabels';
+
+function inventoryRowMatchesSupplyPublicId(invItem, supplyPublicId) {
+ if (!supplyPublicId) return false;
+ const k =
+ invItem.supplyPublicId ||
+ (invItem.supplyId != null ? `__legacy_id_${invItem.supplyId}` : null);
+ return k === supplyPublicId;
+}
+
+const MapComponent = forwardRef((props, ref) => {
+ const {
+ worldRef,
+ inventoryData,
+ inventoryBounds,
+ selectedBox,
+ currentDragOverBox,
+ handleBoxClick,
+ handleBoxHover,
+ handleBoxHoverLeave,
+ handleDrop,
+ setCurrentDragOverBox,
+ addModeItem,
+ addModePending,
+ handleBoxClickAddMode,
+ boxHasAnyPending,
+ selectedMasterItem,
+ getItemLocations,
+ moveModeItem,
+ moveModeDragging,
+ handleMoveModeDrop,
+ subtractModeItem,
+ subtractModePending,
+ handleBoxClickSubtractMode,
+ boxHasAnySubtractPending,
+ freePlaceModeItem,
+ handleFreePlaceWorldClick
+ } = useInventory();
+
+ const freePlaceRoomPointerRef = useRef(null);
+
+ // Compute highlighted box set from selected Master item (for React-managed className)
+ const highlightedBoxes = selectedMasterItem ? new Set(getItemLocations(selectedMasterItem)) : null;
+
+ // Compute highlighted box set for subtract mode (all boxes containing the item)
+ const subtractModeHighlightedBoxes = subtractModeItem ? new Set(getItemLocations(subtractModeItem)) : null;
+
+ const handleBoxMouseEnter = (e, boxTitle) => {
+ const rect = e.currentTarget.getBoundingClientRect();
+ const wrap = e.currentTarget.closest('.wrap');
+ if (wrap) {
+ const wrapRect = wrap.getBoundingClientRect();
+ const x = rect.left + rect.width / 2 - wrapRect.left;
+ const y = rect.top + rect.height / 2 - wrapRect.top;
+ handleBoxHover(boxTitle, x, y);
+ }
+ };
+
+ const handleDragEnter = (e, boxTitle) => {
+ e.preventDefault();
+ if (moveModeItem && moveModeDragging) {
+ // In move mode, track drag over for move boxes
+ if (boxTitle !== currentDragOverBox) {
+ setCurrentDragOverBox(boxTitle);
+ }
+ } else {
+ if (boxTitle !== currentDragOverBox) {
+ setCurrentDragOverBox(boxTitle);
+ }
+ }
+ };
+
+ const handleDragOver = (e, boxTitle) => {
+ e.preventDefault();
+ e.dataTransfer.dropEffect = 'move';
+ if (moveModeItem && moveModeDragging) {
+ // In move mode, track drag over for move boxes
+ if (boxTitle !== currentDragOverBox) {
+ setCurrentDragOverBox(boxTitle);
+ }
+ } else {
+ if (boxTitle !== currentDragOverBox) {
+ setCurrentDragOverBox(boxTitle);
+ }
+ }
+ };
+
+ const handleDragLeave = (e, boxTitle) => {
+ const target = e.currentTarget;
+ const clientX = e.clientX;
+ const clientY = e.clientY;
+
+ setTimeout(() => {
+ if (!target) return;
+ const rect = target.getBoundingClientRect();
+ if (clientX < rect.left || clientX > rect.right || clientY < rect.top || clientY > rect.bottom) {
+ if (currentDragOverBox === boxTitle) {
+ setCurrentDragOverBox(null);
+ }
+ }
+ }, 0);
+ };
+
+ const handleDropBox = (e, boxTitle) => {
+ e.preventDefault();
+ e.stopPropagation();
+ if (moveModeItem && moveModeDragging) {
+ // In move mode, handle drop for moving items
+ // For Tall Cabinets, we need to determine which shelf was dropped on
+ const boxData = inventoryData.get(boxTitle);
+ let targetShelf = undefined;
+
+ if (boxData && hasShelves(boxData) && worldRef.current) {
+ const shelfCount = getShelfCount(boxData);
+ const svg = e.currentTarget.ownerSVGElement;
+ if (svg) {
+ const pt = svg.createSVGPoint();
+ pt.x = e.clientX;
+ pt.y = e.clientY;
+ const ctm = worldRef.current.getScreenCTM();
+ if (ctm) {
+ const worldPt = pt.matrixTransform(ctm.inverse());
+ const shelfH = boxData.height / shelfCount;
+ const relativeY = worldPt.y - boxData.y;
+ const rowFromTop = Math.max(
+ 0,
+ Math.min(shelfCount - 1, Math.floor(relativeY / shelfH))
+ );
+ targetShelf = shelfCount - 1 - rowFromTop;
+ }
+ }
+ }
+
+ handleMoveModeDrop(boxTitle, targetShelf);
+ setCurrentDragOverBox(null);
+ } else {
+ handleDrop(boxTitle);
+ setCurrentDragOverBox(null);
+ }
+ };
+
+ const boxes = Array.from(inventoryData.values());
+
+ const viewBox = inventoryBounds?.viewBox
+ ? `${inventoryBounds.viewBox.x} ${inventoryBounds.viewBox.y} ${inventoryBounds.viewBox.width} ${inventoryBounds.viewBox.height}`
+ : "0 0 2000 2200";
+
+ const roomBounds = inventoryBounds?.room || {
+ x: 80,
+ y: 80,
+ width: 1840,
+ height: 2000,
+ rx: 18,
+ ry: 18
+ };
+
+ const onFreePlaceRoomPointerDown = (e) => {
+ if (!freePlaceModeItem || e.button !== 0) return;
+ freePlaceRoomPointerRef.current = { x: e.clientX, y: e.clientY };
+ };
+
+ const onFreePlaceRoomClick = (e) => {
+ if (!freePlaceModeItem || !worldRef.current || !handleFreePlaceWorldClick) return;
+ if (e.button !== 0) return;
+ const start = freePlaceRoomPointerRef.current;
+ freePlaceRoomPointerRef.current = null;
+ if (start) {
+ const d = Math.hypot(e.clientX - start.x, e.clientY - start.y);
+ if (d > 12) return;
+ }
+ e.stopPropagation();
+ const svg = e.currentTarget.ownerSVGElement;
+ if (!svg) return;
+ const pt = svg.createSVGPoint();
+ pt.x = e.clientX;
+ pt.y = e.clientY;
+ const ctm = worldRef.current.getScreenCTM();
+ if (!ctm) return;
+ const w = pt.matrixTransform(ctm.inverse());
+ void handleFreePlaceWorldClick(w.x, w.y);
+ };
+
+ const boxPointerBlockFreePlace = freePlaceModeItem ? { pointerEvents: 'none' } : undefined;
+
+ // Boxes with shelves get shelf overlays in add/subtract/move mode
+ const shelvedBoxes = (addModeItem || subtractModeItem || moveModeItem)
+ ? boxes.filter(hasShelves)
+ : [];
+
+ return (
+ <>
+
+
+
+
+ );
+});
+
+MapComponent.displayName = 'Map';
+
+export default MapComponent;
diff --git a/milventory/src/components/Map/MoveModeBoxes.js b/milventory/src/components/Map/MoveModeBoxes.js
new file mode 100644
index 0000000..b573dd8
--- /dev/null
+++ b/milventory/src/components/Map/MoveModeBoxes.js
@@ -0,0 +1,275 @@
+import React, { useEffect, useRef } from 'react';
+import { useInventory } from '../../context/InventoryContext';
+import { hasShelves, getShelfCount, normalizeShelfIndex } from '../../utils/shelfLabels';
+
+const MoveModeBoxes = () => {
+ const {
+ moveModeItem,
+ inventoryData,
+ moveModeDragging,
+ handleMoveModeDragStart,
+ handleMoveModeDragMove,
+ handleMoveModeDrop,
+ clearMoveModeDragging,
+ currentDragOverBox,
+ svgRef,
+ worldRef,
+ isDraggingMoveBoxRef
+ } = useInventory();
+
+ const dragStartRef = useRef(null);
+
+ // Track mouse position during drag
+ useEffect(() => {
+ if (!moveModeDragging) {
+ dragStartRef.current = null;
+ return;
+ }
+
+ const handleMouseMove = (e) => {
+ if (!svgRef.current || !worldRef.current || !moveModeDragging) return;
+
+ const svg = svgRef.current;
+ const pt = svg.createSVGPoint();
+ pt.x = e.clientX;
+ pt.y = e.clientY;
+
+ const ctm = worldRef.current.getScreenCTM();
+ if (!ctm) return;
+
+ const worldPt = pt.matrixTransform(ctm.inverse());
+ handleMoveModeDragMove(worldPt.x - 30, worldPt.y - 30); // Offset by half box size
+ };
+
+ const handleMouseUp = (e) => {
+ if (!moveModeDragging || !dragStartRef.current) return;
+
+ // Check if we're over an inventory box
+ const svg = svgRef.current;
+ if (!svg || !worldRef.current) {
+ // Reset to original position
+ clearMoveModeDragging();
+ return;
+ }
+
+ const pt = svg.createSVGPoint();
+ pt.x = e.clientX;
+ pt.y = e.clientY;
+ const ctm = worldRef.current.getScreenCTM();
+ if (!ctm) {
+ clearMoveModeDragging();
+ return;
+ }
+
+ const worldPt = pt.matrixTransform(ctm.inverse());
+
+ // Find which inventory box we're over
+ let targetBox = null;
+ let targetShelf = undefined;
+
+ for (const [boxTitle, boxData] of inventoryData.entries()) {
+ if (worldPt.x >= boxData.x && worldPt.x <= boxData.x + boxData.width &&
+ worldPt.y >= boxData.y && worldPt.y <= boxData.y + boxData.height) {
+ targetBox = boxTitle;
+
+ // If it has shelves, determine which one was dropped on.
+ if (hasShelves(boxData)) {
+ const shelfCount = getShelfCount(boxData);
+ const shelfH = boxData.height / shelfCount;
+ const relativeY = worldPt.y - boxData.y;
+ const rowFromTop = Math.max(
+ 0,
+ Math.min(shelfCount - 1, Math.floor(relativeY / shelfH))
+ );
+ targetShelf = shelfCount - 1 - rowFromTop;
+ }
+ break;
+ }
+ }
+
+ // Check if dropped on a different location (different box or different shelf of same box)
+ const isDifferentLocation =
+ targetBox &&
+ (targetBox !== dragStartRef.current.boxTitle ||
+ (targetBox === dragStartRef.current.boxTitle &&
+ normalizeShelfIndex(targetShelf) !==
+ normalizeShelfIndex(dragStartRef.current.shelf)));
+
+ if (isDifferentLocation) {
+ // Dropped on a different location - move the item
+ handleMoveModeDrop(targetBox, targetShelf);
+ } else {
+ // Dropped outside or on same location - reset to original position
+ clearMoveModeDragging();
+ }
+ };
+
+ window.addEventListener('mousemove', handleMouseMove);
+ window.addEventListener('mouseup', handleMouseUp);
+ return () => {
+ window.removeEventListener('mousemove', handleMouseMove);
+ window.removeEventListener('mouseup', handleMouseUp);
+ };
+ }, [moveModeDragging, svgRef, worldRef, handleMoveModeDragMove, handleMoveModeDrop, clearMoveModeDragging, inventoryData]);
+
+ if (!moveModeItem) return null;
+
+ const boxes = Array.from(inventoryData.values());
+ const moveBoxes = [];
+
+ boxes.forEach(box => {
+ const boxData = inventoryData.get(box.title);
+ if (!boxData) return;
+
+ const matchingItems = boxData.inventory.filter((item) => {
+ const pid =
+ item.supplyPublicId ||
+ (item.supplyId != null ? `__legacy_id_${item.supplyId}` : null);
+ return pid === moveModeItem;
+ });
+ if (matchingItems.length === 0) return;
+
+ const isShelved = hasShelves(box);
+
+ if (isShelved) {
+ // For shelved boxes, show one draggable handle per used shelf.
+ const shelfCount = getShelfCount(box);
+ matchingItems.forEach(item => {
+ const shelfIdx = item.shelf ?? 0;
+ const shelfH = box.height / shelfCount;
+ const shelfY = box.y + (shelfCount - 1 - shelfIdx) * shelfH;
+
+ // Position box in center of shelf
+ const boxSize = Math.min(shelfH * 0.6, box.width * 0.4, 60);
+ const boxX = box.x + (box.width - boxSize) / 2;
+ const boxY = shelfY + (shelfH - boxSize) / 2;
+
+ const isDragging = moveModeDragging &&
+ moveModeDragging.boxTitle === box.title &&
+ moveModeDragging.shelf === shelfIdx;
+ const isDragOver = currentDragOverBox === box.title;
+
+ moveBoxes.push({
+ key: `${box.title}||${shelfIdx}`,
+ x: boxX,
+ y: boxY,
+ width: boxSize,
+ height: boxSize,
+ qty: item.qty,
+ boxTitle: box.title,
+ shelf: shelfIdx,
+ isDragging,
+ isDragOver
+ });
+ });
+ } else {
+ // For regular boxes, show one box with total quantity
+ const totalQty = matchingItems.reduce((sum, item) => sum + (item.qty || 0), 0);
+
+ // Position box in center
+ const boxSize = Math.min(box.height * 0.5, box.width * 0.4, 60);
+ const boxX = box.x + (box.width - boxSize) / 2;
+ const boxY = box.y + (box.height - boxSize) / 2;
+
+ const isDragging = moveModeDragging &&
+ moveModeDragging.boxTitle === box.title &&
+ moveModeDragging.shelf === undefined;
+ const isDragOver = currentDragOverBox === box.title;
+
+ moveBoxes.push({
+ key: box.title,
+ x: boxX,
+ y: boxY,
+ width: boxSize,
+ height: boxSize,
+ qty: totalQty,
+ boxTitle: box.title,
+ shelf: undefined,
+ isDragging,
+ isDragOver
+ });
+ }
+ });
+
+ const handleMouseDown = (e, boxTitle, shelf, qty, x, y) => {
+ // Prevent D3 zoom from starting
+ e.preventDefault();
+ e.stopPropagation();
+ // Set dragging state immediately so D3 filter can see it
+ isDraggingMoveBoxRef.current = true;
+ dragStartRef.current = { boxTitle, shelf, qty, x, y };
+ handleMoveModeDragStart(boxTitle, shelf, qty, x, y);
+ };
+
+ return (
+
+ {moveBoxes.map(moveBox => {
+ if (moveBox.isDragging) return null; // Don't render the dragging box
+
+ return (
+
+ handleMouseDown(e, moveBox.boxTitle, moveBox.shelf, moveBox.qty, moveBox.x, moveBox.y)}
+ />
+
+ {moveBox.qty}
+
+
+ );
+ })}
+ {/* Render dragging box at cursor position */}
+ {moveModeDragging && (
+
+
+
+ {moveModeDragging.qty}
+
+
+ )}
+
+ );
+};
+
+export default MoveModeBoxes;
+
diff --git a/milventory/src/components/Map/SubtractModePreview.js b/milventory/src/components/Map/SubtractModePreview.js
new file mode 100644
index 0000000..cb1d873
--- /dev/null
+++ b/milventory/src/components/Map/SubtractModePreview.js
@@ -0,0 +1,150 @@
+import React from 'react';
+import { useInventory, FREE_SUBTRACT_DOT_PREFIX } from '../../context/InventoryContext';
+import { getShelfCount, getShelfLabel } from '../../utils/shelfLabels';
+
+const SubtractModePreview = () => {
+ const {
+ subtractModeItem,
+ subtractModeQtyPerClick,
+ setSubtractModeQtyPerClick,
+ subtractModePending,
+ finishSubtractMode,
+ cancelSubtractMode,
+ leftPaneWidth,
+ leftPaneCollapsed,
+ resolveMasterItem,
+ subtractModePreviewRef,
+ freePlacementsBySupplyPublicId,
+ inventoryData
+ } = useInventory();
+
+ const item = subtractModeItem ? resolveMasterItem(subtractModeItem) : null;
+
+ // Calculate position to the right of left pane
+ const leftPaneActualWidth = leftPaneCollapsed ? 40 : leftPaneWidth;
+ const positionX = leftPaneActualWidth + 20;
+ const positionY = 20;
+
+ const handleQtyChange = (delta) => {
+ setSubtractModeQtyPerClick(prev => Math.max(1, prev + delta));
+ };
+
+ const handleFinish = () => {
+ finishSubtractMode();
+ };
+
+ const handleCancel = () => {
+ cancelSubtractMode();
+ };
+
+ if (!subtractModeItem || !item) return null;
+
+ const pendingCount = Array.from(subtractModePending.values()).reduce((sum, qty) => sum + qty, 0);
+ const pendingEntries = Array.from(subtractModePending.entries());
+
+ // Format a pending key for display.
+ const formatPendingKey = (key) => {
+ const parts = key.split('||');
+ if (parts[0] === FREE_SUBTRACT_DOT_PREFIX && parts[1] != null && parts[1] !== '') {
+ const id = parseInt(parts[1], 10);
+ const placements = freePlacementsBySupplyPublicId.get(subtractModeItem) || [];
+ const dot = placements.find((p) => p.id === id);
+ if (dot) return `Floor (${Math.round(dot.x)}, ${Math.round(dot.y)})`;
+ return 'Floor placement';
+ }
+ if (parts.length > 1) {
+ const shelfIdx = parseInt(parts[1], 10);
+ const target = inventoryData?.get(parts[0]);
+ const shelfCount = getShelfCount(target);
+ return `${parts[0]} → ${getShelfLabel(shelfIdx, shelfCount)}`;
+ }
+ return parts[0];
+ };
+
+ return (
+
+
+
+
Subtract: {item.name}
+
+
+
+
+ Click boxes or floor markers to queue subtractions (same qty per click). Use Finish Subtract to apply, or Cancel to discard all pending.
+
+
+
+
+
+ {
+ const val = parseInt(e.target.value) || 1;
+ setSubtractModeQtyPerClick(Math.max(1, val));
+ }}
+ min="1"
+ />
+
+
+
+
+ {pendingEntries.length > 0 && (
+
+
Pending subtractions:
+
+ {pendingEntries.map(([key, qty]) => (
+ -
+ {formatPendingKey(key)}: -{qty}
+
+ ))}
+
+
+ Total: {pendingCount} items
+
+
+ )}
+
+
+
+
+
+
+
+ setForm((f) => ({ ...f, name: e.target.value }))}
+ />
+
+ 