ApprovalQueue

Pending-approval inbox view. Renders one card per record in the surrounding <ListContext> (typically scoped to status=pending via <List filter>). Each card has approve + reject buttons. On click, writes { status, approverId, approverNote, decidedAt } atomically.

Installation

pnpm dlx shadcn@latest add @shadmin/approval-queue

Usage

import { ApprovalQueue, List } from "@/components/admin";
 
const ExpenseApprovals = () => (
  <List resource="expenses" filter={{ status: "pending" }}>
    <ApprovalQueue titleSource="title" subtitleSource="amount" requireReason />
  </List>
);

Props

Prop	Required	Type	Default	Description
`titleSource`	Optional	`string`	`"title"`	Field for the row heading
`subtitleSource`	Optional	`string`	-	Optional secondary text
`statusSource`	Optional	`string`	`"status"`	Field written on decision
`approverSource`	Optional	`string`	`"approverId"`	Field receiving the current user id
`noteSource`	Optional	`string`	`"approverNote"`	Field receiving the reason note
`decidedAtSource`	Optional	`string`	`"decidedAt"`	Field receiving the ISO timestamp
`requireReason`	Optional	`boolean`	`false`	Block reject (and approve) without a reason
`rowExtra`	Optional	`(record) => ReactNode`	-	Custom slot between header and action row

Required parent context

<ApprovalQueue> must be rendered inside a <List> / <ListBase> parent so useListContext() resolves. The component itself does not fetch data.