# Approval Inbox

> All open approvals across projects, oldest first, next to the selected ApprovalCard.

Component · AI · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/ApprovalInbox/)

All open approvals across projects, oldest first, next to the selected ApprovalCard.

Props: `items` ({id, title, agent, project, family, familyLabel, age, ageMin, urgent}), `selected`, `onSelect(id)`, `emptyTitle`, `emptyText`, `label`.

- Oldest first: the one closest to escalation is on top; `urgent` turns its age into a warning.
- J / K or ↓ / ↑ move the selection; the card next to it takes A–D.

## Example

```tsx
import * as React from "react";
import { ApprovalInbox } from "@twentyfirstmedia/pro";
import type { ApprovalInboxItem } from "@twentyfirstmedia/pro";

const items: ApprovalInboxItem[] = [
  {
    id: 1,
    title: "Send reply to Northwind",
    agent: "Atlas",
    project: "Support",
    family: "comms",
    age: "2 h 10 min",
    ageMin: 130,
    urgent: true,
  },
  {
    id: 2,
    title: "Refund €10.00 to card ending 4242",
    agent: "Ledger",
    project: "Chatteo",
    family: "money",
    age: "38 min",
    ageMin: 38,
  },
  {
    id: 3,
    title: "Set daily ad budget to €30",
    agent: "Ads",
    project: "Northwind",
    family: "marketing",
    age: "12 min",
    ageMin: 12,
  },
  {
    id: 4,
    title: "Add TXT record ops-test",
    agent: "Scout",
    project: "Domains",
    family: "infra",
    age: "3 min",
    ageMin: 3,
  },
];
function App() {
  const s = React.useState<string | number>(1);
  return (
    <div className="tf-panel tf-panel-flush tf-panel-list">
      <ApprovalInbox items={items} selected={s[0]} onSelect={s[1]} />
    </div>
  );
}
export default App;
```

## Props

### ApprovalInbox

| Prop | Type | Notes |
| --- | --- | --- |
| `items` | `ApprovalInboxItem[]` | Required |
| `selected?` | `ApprovalInboxItem["id"]` |  |
| `onSelect?` | `(id: ApprovalInboxItem["id"]) => void` |  |
| `emptyTitle?` | `string` |  |
| `emptyText?` | `string` |  |
| `label?` | `string` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |