Compose spare parts inventory flows

@tetherto/mdk-react-devkit

Spare parts inventory is not one component: it is seven dialogs from Dialog components that cover registering a part, keeping its subtypes current, moving it (alone or in a batch), reviewing where it has been, and retiring it. Each dialog receives its data and options as props and does no fetching of its own, so you wire the data layer and API calls yourself. This guide walks through composing them into one workflow.

Prerequisites

Complete the installation and import styles: import '@tetherto/mdk-react-devkit/styles.css'.

How the pieces fit together

• AddSparePartModal: registers a single new spare part
• SparePartSubTypesModal: views and adds part-model subtypes for a part type
• BulkAddSparePartsModal: registers many parts at once from a CSV file
• MoveSparePartModal: moves a single part to a new location or status
• BatchMoveSparePartsModal: moves several selected parts to a new location or status in one submit
• MovementDetailsModal: shows the origin-to-destination detail of a historical move
• ConfirmDeleteSparePartModal: confirms an irreversible delete

Two of these pieces are coupled rather than independent:

• AddSparePartModal can embed SparePartSubTypesModal through its subTypes* props. This lets someone add a missing part model without losing the in-progress Add form. SparePartSubTypesModal also works standalone, opened directly rather than through Add.
• MoveSparePartModal and BatchMoveSparePartsModal both move parts, but for a different cardinality: reach for MoveSparePartModal when a single row action moves one part through an edit-then-confirm step, and for BatchMoveSparePartsModal when a multi-select table applies one new location or status to every selected part in a single submit, with no confirmation step

Walk through a typical flow

Add a part

Open AddSparePartModal from your own add-part entry point. Part-type tabs drive which fields validate: a controller part type requires a MAC address, other part types require a serial number instead. Supply modelOptions for the active part type and refetch them in onPartTypeChange when the tab changes.

Maintain subtypes

If the part model someone needs is not in modelOptions, they can open SparePartSubTypesModal from inside Add without losing their progress, or you can open it standalone from an inventory settings surface. Either way, the parent owns activePartTypeId and subTypes and re-supplies them when the tab changes.

Bulk-add many parts instead

For registering many parts at once, use BulkAddSparePartsModal instead of repeating the one-by-one Add flow. It offers a CSV template download, parses the selected file client-side, and submits the parsed records through your onSubmit handler; CSV parsing and validation helpers are exported alongside the component for wiring that handler up.

Move a part, one or many

Move a single part with MoveSparePartModal: it previews the before-to-after location and status transition before the user confirms. Move a multi-selected group with BatchMoveSparePartsModal, which applies one new location and status to every part in the selection.

View its movement history

MovementDetailsModal is read-only: pass it a historical movement record and it renders the device summary alongside the origin-to-destination transition. It does not trigger a move itself, it explains one that already happened.

Delete a part

ConfirmDeleteSparePartModal gates the destructive path. It surfaces the part code so the user can verify what they are about to remove, and disables its action buttons through isLoading while the delete call is in flight.

Next steps

• Dialog components: full props reference for all seven components
• React UI guides: other guides for composing MDK React UI components