MoveSparePartModal

Two-step modal for moving a single spare part. Step one shows the part details with its current location and status and lets the user pick a new location, st…

Two-step modal for moving a single spare part. Step one shows the part details with its current location and status and lets the user pick a new location, status, and observation; step two previews the before → after transition for confirmation. Receives the part, option lists, and submit handler as props.

import { MoveSparePartModal } from "@tetherto/mdk-react-devkit";

Prop	Status	Type	Default	Description
`isOpen`	Optional	`boolean \| undefined`	—	—
`onClose`	Optional	`VoidFunction \| undefined`	—	—
`sparePart`	Optional	`MoveSparePartModalSparePart \| undefined`	—	—
`requestedValues`	Optional	`{ location?: string \| undefined; status?: string \| undefined; } \| undefined`	—	—
`locationOptions`	Required	`FormSelectOption[]`	—	—
`statusOptions`	Required	`FormSelectOption[]`	—	—
`onSubmit`	Required	`(values: { location: string; status: string; observation: string; }, sparePart: MoveSparePartModalSparePart) => void \| Promise<void>`	—	—

Usage

Two-step modal for moving a single spare part. Step one shows the part details (SparePartDetails) alongside its current location and status, and lets the user pick a new location, status, and an observation. Step two previews the before → after transition with color-coded badges for confirmation before submitting.

When to use

Use this from a spare-parts inventory row action when an operator moves one part and you want an explicit confirm step showing exactly what will change. For moving many parts at once, use BatchMoveSparePartsModal instead.

Data shape

const sparePart: MoveSparePartModalSparePart = {
  id: 'sp-001',
  code: 'CB-AM-CB5_V10-01',  // shown via SparePartDetails
  type: 'CB5_V10',
  site: 'Site A',
  serialNum: 'test-miner',
  macAddress: 'aa:bb:cc:dd:ee:ff',
  location: 'site.warehouse',  // dot-separated location key
  status: 'ok_repaired',       // spare part status key
}

Label & color resolution

Location/status labels are resolved from the passed option lists (getOptionLabel).
The current/new badges are colored from SPARE_PART_LOCATION_BG_COLORS / SPARE_PART_STATUS_BG_COLORS; an unknown location key renders with no background.
The footer shows "No Changes made" until the target location or status differs from the current values, at which point "Save Changes" advances to the confirmation step.

Example

import { useState } from "react";import {  Button,  MoveSparePartModal,  SPARE_PART_LOCATION_LABELS,  SPARE_PART_LOCATIONS,  SPARE_PART_STATUS_NAMES,  SPARE_PART_STATUSES,} from "@tetherto/mdk-react-devkit";const locationOptions = Object.values(SPARE_PART_LOCATIONS)  .filter((value) => value !== SPARE_PART_LOCATIONS.SITE_CONTAINER)  .map((value) => ({ value, label: SPARE_PART_LOCATION_LABELS[value] ?? value }));const statusOptions = Object.values(SPARE_PART_STATUSES).map((value) => ({  value,  label: SPARE_PART_STATUS_NAMES[value as keyof typeof SPARE_PART_STATUS_NAMES] ?? value,}));const mockSparePart = {  id: "sp-001",  code: "HB-A001",  type: "HB-S19",  site: "Site A",  serialNum: "SN123456",  location: SPARE_PART_LOCATIONS.SITE_WAREHOUSE,  status: SPARE_PART_STATUSES.OK_BRAND_NEW,};export const MoveSparePartModalExample = () => {  const [isOpen, setIsOpen] = useState(false);  return (    <div>      <Button variant="outline" onClick={() => setIsOpen(true)}>        Move Spare Part      </Button>      <MoveSparePartModal        isOpen={isOpen}        onClose={() => setIsOpen(false)}        sparePart={mockSparePart}        locationOptions={locationOptions}        statusOptions={statusOptions}        onSubmit={async () => {          setIsOpen(false);        }}      />    </div>  );};