# Expense approval interface

> A green approvals queue: expense cards are approved one by one with a stamp and the pending total counts down.

- Kind: Plan
- Page: https://ownlyplans.com/bhaskar/expense-approval-interface/
- Licence: CC BY 4.0 (reuse with credit)

## Steps

### 1. Paste the prompt

One prompt builds the queue.

Prompt:

```text
Make a single-file HTML expense approval screen, 1280x720, pale green background #f2f7f1, ink #12301f, accent green #16a34a. System fonts, no libraries.
Header: H1 "Expense approvals", muted "4 waiting on you" and on the right a Pending total (label above, 34px number) that counts from $4,820 down to $3,940 with a CSS @property integer animation.
Four absolutely positioned white cards (104px tall, 18px radius): a striped receipt thumbnail, title and meta line (person, date, category), the amount on the right (24px bold) and two buttons Reject (grey) and Approve (green): Client dinner $486.20, Flight to Berlin $1,240.00, Conference tickets x3 $894.00, Design software annual $2,199.80.
Motion (8 second loop): cards rise in. The first card gets a rotated green APPROVED stamp that scales from 2x to 1x, then the card slides right and fades; the cards below move up one slot. Repeat for the third card. The pending total counts down while this happens. Fade out at the end and restart.
Respect prefers-reduced-motion. Return only the complete HTML.
```

### 2. Check the approvals

Stamped cards should slide away and the rest should move up.

### 3. Check the total

Pending should count down to $3,940.

Done when: You can see it working in the browser.

### 4. Make it real

Replace sample data and add real approve and reject actions.

## Files

- prompt.md: https://ownlyplans.com/bhaskar/expense-approval-interface/prompt/ (The full prompt.)
- index.html.md: https://ownlyplans.com/bhaskar/expense-approval-interface/index-html/ (Complete code of the result in the video.)

## About

A manager approval list with four expense cards. Two of them get an APPROVED stamp and slide away, the cards below move up and the Pending total counts down from $4,820 to $3,940. Topic inspired by OpenDesign's public dashboard prompt list; this prompt and design are written from scratch.

---
Also available as JSON: https://ownlyplans.com/bhaskar/expense-approval-interface/?format=json
MCP server: https://ownlyplans.com/mcp