# Finance app transaction history

> A transaction history screen for a Figma banking app: a period switch, category chips and rows grouped by day, with amounts that line up, light and dark.

The list every banking app is opened for, drawn in Appetite UI, a Figma UI kit for iOS and Android apps built like a design system: a Day, Week, Month and Year switch, All, Income, Expense, Bills and Trading chips, and transactions under Today, Yesterday and Earlier.

Page: https://www.appetiteui.com/screens/finance/transaction-history. Every screen of the app: https://www.appetiteui.com/docs/screens-finance.

## Screens

| Screen | What it shows | Built from |
| --- | --- | --- |
| History | Transactions by day, with a period switch and category chips | Top Bar, Tab, Chip, Navigation |

- History, light: Finance app History screen: Day, Week, Month and Year tabs with Month selected, All, Income, Expense, Bills and Trading chips, and transactions grouped under Today, Yesterday and Earlier with the amount on the right of each row
  Picture: https://www.appetiteui.com/images/au_finance_history_light.webp (dark: https://www.appetiteui.com/images/au_finance_history_dark.webp)

## How the screen follows the history pattern

| Rule | On this screen |
| --- | --- |
| Group by time | Rows are grouped under Today, Yesterday and Earlier rather than under dates, so the most recent money is found by reading, not by counting days. |
| Filter by kind | The period is a Tab set and the kind is a row of Chips, two separate controls, so a reader can ask for this month’s bills in two taps. |
| Amounts line up | Every amount is right aligned with two decimals, so the decimal points stack down the column; a credit differs from a debit by color alone, state/success/base-500. |

## Built from

| Component | Screens |
| --- | --- |
| Top Bar | History |
| Tab | History |
| Chip | History |
| Navigation | History |

## iOS and Material

The frames are drawn in the ios-md Platform mode; an android frame reads the Material values.

| What it sets | iOS | Android | Variable |
| --- | --- | --- | --- |
| List row, minimum height | 44 pt | 56 dp | `platform/list-row/min-height` |

| Component | iOS | Material 3 | What differs |
| --- | --- | --- | --- |
| List | iOS / List with a 44 minimum row | M3 / List Item, 56, 72 or 88 high by Lines | Material sets the row height by lines of text, iOS sets only a minimum |

## Related

- Finance app: [Finance app dashboard](https://www.appetiteui.com/screens/finance/dashboard)
- Finance app: [Finance app payment screen](https://www.appetiteui.com/screens/finance/payment)
- Docs: [Finance app screens, every screen and token](https://www.appetiteui.com/docs/screens-finance)
- Docs: [List](https://www.appetiteui.com/docs/list)
- Docs: [Tab](https://www.appetiteui.com/docs/tab)
- Glossary: [List row](https://www.appetiteui.com/academy/glossary#list-row)