Function PartItem

app/dashboardPage.tsx:593–792

({
	part,
	isLoading,
	updatePartQuantity,
	deletePart,
}: {
	part: PartState;
	isLoading: boolean;
	updatePartQuantity: (partId: number, quantity: number) => Promise<void>;
	deletePart: (partId: number) => Promise<void>;
})

}

function PartItem({
	part,
	isLoading,
	updatePartQuantity,
	deletePart,
}: {
	part: PartState;
	isLoading: boolean;
	updatePartQuantity: (partId: number, quantity: number) => Promise<void>;
	deletePart: (partId: number) => Promise<void>;
}) {
	const addQuantityRef = useRef<HTMLInputElement>(null);
	const removeQuantityRef = useRef<HTMLInputElement>(null);
	return (
		<Table.Tr key={part.id}>
			<Table.Td>
				<img
					src={part.productImages[0]}
					// alt={part.title}
					width="100"
					height="100"
				/>
			</Table.Td>
			<Table.Td>
				<Stack gap={"sm"}>
					{part.title}
					<NavLink
						href={"/part/" + part.id}
						label="Details"
						active
						leftSection={
							<ThemeIcon>
								<IconArrowLeftFromArc />
							</ThemeIcon>
						}
					/>
				</Stack>
			</Table.Td>
			<Table.Td>{part.productCode}</Table.Td>
			<Table.Td>{part.quantity}</Table.Td>
			<Table.Td>
				<Tabs variant="outline" defaultValue={"add"} w={200}>
					<Tabs.List justify="center">
						<Tabs.Tab value={"add"}>Add</Tabs.Tab>
						<Tabs.Tab value={"remove"}>Remove</Tabs.Tab>
					</Tabs.List>
					<Tabs.Panel value="add">
						<Stack gap={"sm"} pt={3}>
							<NumberInput
								placeholder="Quantity"
								label="Quantity"
								min={1}
								clampBehavior="strict"
								defaultValue={1}
								ref={addQuantityRef}
							/>
							<Button
								disabled={isLoading}