This commit is contained in:
2026-03-14 21:36:42 -05:00
parent 65269f172f
commit 240922b417

View File

@@ -21,9 +21,12 @@ export function InventoryFormPage({ mode }: InventoryFormPageProps) {
const [status, setStatus] = useState(mode === "create" ? "Create a new inventory item." : "Loading inventory item...");
const [isSaving, setIsSaving] = useState(false);
function getComponentLabel(componentItemId: string) {
const match = componentOptions.find((option) => option.id === componentItemId);
return match ? `${match.sku} - ${match.name}` : "";
function getComponentOption(componentItemId: string) {
return componentOptions.find((option) => option.id === componentItemId) ?? null;
}
function getComponentSku(componentItemId: string) {
return getComponentOption(componentItemId)?.sku ?? "";
}
useEffect(() => {
@@ -43,7 +46,7 @@ export function InventoryFormPage({ mode }: InventoryFormPageProps) {
}
const match = nextOptions.find((option) => option.id === line.componentItemId);
return match ? `${match.sku} - ${match.name}` : "";
return match ? match.sku : "";
})
);
})
@@ -77,7 +80,7 @@ export function InventoryFormPage({ mode }: InventoryFormPageProps) {
position: line.position,
})),
});
setComponentSearchTerms(item.bomLines.map((line) => `${line.componentSku} - ${line.componentName}`));
setComponentSearchTerms(item.bomLines.map((line) => line.componentSku));
setStatus("Inventory item loaded.");
})
.catch((error: unknown) => {
@@ -302,7 +305,7 @@ export function InventoryFormPage({ mode }: InventoryFormPageProps) {
<span className="mb-2 block text-xs font-semibold uppercase tracking-[0.16em] text-muted">Component</span>
<div className="relative">
<input
value={componentSearchTerms[index] ?? getComponentLabel(line.componentItemId)}
value={componentSearchTerms[index] ?? getComponentSku(line.componentItemId)}
onChange={(event) => {
updateComponentSearchTerm(index, event.target.value);
updateBomLine(index, { ...line, componentItemId: "" });
@@ -315,13 +318,16 @@ export function InventoryFormPage({ mode }: InventoryFormPageProps) {
if (!form.bomLines[index]?.componentItemId) {
updateComponentSearchTerm(index, "");
} else {
updateComponentSearchTerm(index, getComponentLabel(form.bomLines[index].componentItemId));
updateComponentSearchTerm(index, getComponentSku(form.bomLines[index].componentItemId));
}
}, 120);
}}
placeholder="Search by SKU or item name"
placeholder="Search by SKU"
className="w-full rounded-2xl border border-line/70 bg-surface px-4 py-3 text-text outline-none transition focus:border-brand"
/>
<div className="mt-2 min-h-5 text-xs text-muted">
{getComponentOption(line.componentItemId)?.name ?? "No component selected"}
</div>
{activeComponentPicker === index ? (
<div className="absolute z-20 mt-2 max-h-64 w-full overflow-y-auto rounded-2xl border border-line/70 bg-surface shadow-panel">
{componentOptions
@@ -331,7 +337,7 @@ export function InventoryFormPage({ mode }: InventoryFormPageProps) {
return true;
}
return `${option.sku} ${option.name}`.toLowerCase().includes(query);
return option.sku.toLowerCase().includes(query);
})
.slice(0, 12)
.map((option) => (
@@ -341,7 +347,7 @@ export function InventoryFormPage({ mode }: InventoryFormPageProps) {
onMouseDown={(event) => {
event.preventDefault();
updateBomLine(index, { ...line, componentItemId: option.id });
updateComponentSearchTerm(index, `${option.sku} - ${option.name}`);
updateComponentSearchTerm(index, option.sku);
setActiveComponentPicker(null);
}}
className="block w-full border-b border-line/50 px-4 py-3 text-left text-sm text-text transition last:border-b-0 hover:bg-page/70"
@@ -356,7 +362,7 @@ export function InventoryFormPage({ mode }: InventoryFormPageProps) {
return true;
}
return `${option.sku} ${option.name}`.toLowerCase().includes(query);
return option.sku.toLowerCase().includes(query);
}).length === 0 ? (
<div className="px-4 py-3 text-sm text-muted">No matching components found.</div>
) : null}