A React component that renders an individual approval request card in two variants — `admin` (technician-facing, shows raw command + structured fields) and `client` (Fae end-user-facing, shows only the human-readable explanation). Both variants switch between a pending state with Approve/Reject actions and a resolved state with a status tag. ## Key Components | Export / Symbol | Description | |---|---| | `ApprovalRequestMessage` | Primary `forwardRef` component — the main export | | `ApprovalCardBody` | Internal shared body (command block + fields/explanation) rendered for the `admin` variant | | `ApprovalFieldList` | Internal `

`-based renderer for structured `label/value` field pairs | **Props (`ApprovalRequestMessageProps`):** | Prop | Type | Default | Description | |---|---|---|---| | `data` | `ApprovalRequestData` | — | Command, fields, explanation, requestId | | `status` | `'pending' \| 'approved' \| 'rejected' \| 'cancelled'` | `'pending'` | Controls action vs. resolved UI | | `variant` | `'admin' \| 'client'` | `'admin'` | Switches between technician and end-user layout | | `onApprove` | `(requestId) => Promise` | — | Callback fired on Approve click | | `onReject` | `(requestId) => Promise` | — | Callback fired on Reject click | | `resolvedByName` | `string` | — | Name shown in resolved status tag (client variant) | | `assistantType` | `string` | — | Accepted for prop parity with batch card; unused internally | ## Usage Example ```typescript import { ApprovalRequestMessage } from "./approval-request-message" // Admin (technician) view — shows command block and structured fields await approveRequest(id)} onReject={async (id) => await rejectRequest(id)} /> // Client (Fae end-user) view — shows explanation only ```