BatchMoveSparePartsModal

Modal for moving multiple spare parts at once. Shows the selected parts in a table and lets the user choose a new location and/or status plus an observation,…

Modal for moving multiple spare parts at once. Shows the selected parts in a table and lets the user choose a new location and/or status plus an observation, applied to every part. Receives the parts, option lists, and submit handler as props.

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

Prop	Status	Type	Default	Description
`isOpen`	Required	`boolean`	—	—
`onClose`	Required	`VoidFunction`	—	—
`spareParts`	Required	`BatchMoveSparePart[]`	—	—
`locationOptions`	Required	`FormSelectOption[]`	—	—
`statusOptions`	Required	`FormSelectOption[]`	—	—
`onSubmit`	Required	`(values: { location: string \| null; status: string \| null; observation: string \| null; }) => void \| Promise<void>`	—	—

Usage

Modal for moving multiple spare parts at once. Shows the selected parts in a table (code, current location, current status) and lets the user choose a new location and/or status plus an observation, applied to every selected part in one submit.

When to use

Use this when an operator multi-selects spare-part rows and wants to relocate or re-status them together. At least one of location or status must be chosen. For a single part with a confirm step, use MoveSparePartModal.

Data shape

const spareParts: BatchMoveSparePart[] = [
  { id: 'sp-001', code: 'HB-A001', location: 'site.warehouse', status: 'ok_brand_new' },
  { id: 'sp-002', code: 'HB-A002', location: 'workshop.lab',   status: 'faulty' },
]

Notes

The form validates that either a location or a status is selected before submit.
Table location/status cells are resolved to display labels from the passed option lists.

Example

import { useState } from "react";import {  BatchMoveSparePartsModal,  Button,  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 mockSpareParts = [  { id: "sp-001", code: "HB-A001", location: SPARE_PART_LOCATIONS.SITE_WAREHOUSE, status: SPARE_PART_STATUSES.OK_BRAND_NEW },  { id: "sp-002", code: "HB-A002", location: SPARE_PART_LOCATIONS.WORKSHOP_LAB, status: SPARE_PART_STATUSES.FAULTY },  { id: "sp-003", code: "CB-B001", location: SPARE_PART_LOCATIONS.SITE_WAREHOUSE, status: SPARE_PART_STATUSES.OK_RECOVERED },];export const BatchMoveSparePartsModalExample = () => {  const [isOpen, setIsOpen] = useState(false);  return (    <div>      <Button variant="outline" onClick={() => setIsOpen(true)}>        Batch Move ({mockSpareParts.length} parts)      </Button>      <BatchMoveSparePartsModal        isOpen={isOpen}        onClose={() => setIsOpen(false)}        spareParts={mockSpareParts}        locationOptions={locationOptions}        statusOptions={statusOptions}        onSubmit={async () => {          setIsOpen(false);        }}      />    </div>  );};