Inventory

@tetherto/mdk-react-devkit/foundation

Inventory components display historical device movement details. Pair with the Operations centre for full device-management context.

Prerequisites

Complete the @tetherto/mdk-react-devkit installation and add the dependency

Modal showing the details of a historical device movement — the device summary plus the origin → destination transition of location and status. All three props are optional (the component renders null when movement is absent), so you can gate the modal on a selection without separate conditional rendering:

Device details (movement.device): code, type, site, container, serial number, MAC address.
Movement preview: side-by-side origin and destination panels showing location and status with colour-coded badges.
Comments (movement.comments): optional free-text or node rendered below the movement panels.

The component does no data fetching — the parent is responsible for passing the selected movement.

Import

import { MovementDetailsModal } from '@tetherto/mdk-react-devkit/foundation'
import type {
  MovementDetailsModalProps,
  MovementData,
  MovementDevice,
} from '@tetherto/mdk-react-devkit/foundation'

Props

Prop	Status	Type	Default	Description
`isOpen`	Optional	`boolean`	`false`	When `true`, the modal is visible
`onClose`	Optional	`function`	none	Called when the user dismisses the modal
`movement`	Optional	`MovementData`	none	Movement record to display; modal renders `null` when absent

`MovementData` type

type MovementData = {
  origin: string
  destination: string
  previousStatus: string
  newStatus: string
  device?: MovementDevice
  comments?: ReactNode
}

`MovementDevice` type

type MovementDevice = Partial<{
  code: string
  tags: string[]
  type: string
  info: Partial<{
    subType: string
    site: string
    container: string
    serialNum: string
    macAddress: string
  }>
}>

Basic usage

import { useState } from 'react'
import { MovementDetailsModal } from '@tetherto/mdk-react-devkit/foundation'
import type { MovementData } from '@tetherto/mdk-react-devkit/foundation'

function InventoryTable({ movements }) {
  const [selected, setSelected] = useState<MovementData | null>(null)

  return (
    <>
      {/* … table that calls setSelected(row.movement) on row click … */}

      <MovementDetailsModal
        isOpen={selected !== null}
        movement={selected ?? undefined}
        onClose={() => setSelected(null)}
      />
    </>
  )
}

Behavior notes

When movement is undefined or null, buildMovementDetailsViewModel returns null and the component renders nothing — the Dialog is never mounted.
Location and status badge colours come from the MDK design-token maps (MINER_LOCATION_*, MINER_STATUS_*).
The modal title is fixed: "Historical Device Update".

Next steps

For device-level details, see the Operations centre pages