Patterns

Account history

An overview of the events on the player's gaming account: deposits, withdrawals, wagers and winnings.

Example

The account history from Tur, rebuilt on mock data. Pick a month to filter the list, and scroll to the end of the list to load more transactions.

In the example, the third month in the list has no activity and the fifth fails to load, so the empty and error states can be tried out.

PreviewCode

Anatomy

1. Heading and introduction.
2. Balance. The balance of the gaming account, with its own label.
3. Month filter. A select with the current month and the twelve before it.
4. Table header. Three columns: activity, amount and balance. Sticky while scrolling.
5. Day heading. A section header row that starts each new day.
6. Transaction row. The transaction type in bold, then time, product and retailer. Amount and balance are right aligned.
7. Load more. Loads the next page of transactions.
8. Gambling habits link. A link to the self test.

Behaviour

Grouping

Transactions are listed newest first and grouped by day. The date is a section header row inside the table, not a heading above separate tables.

Filtering

The month filter covers the current month and the twelve months before it. The current month is selected by default. Changing month replaces the list and starts over from the first page.

Paging

Transactions load in pages. The next page is fetched when the end of the list scrolls into view. The Hämta fler button is the fallback when automatic loading does not happen.

States

Loading

A skeleton with the same table structure as the loaded list, so the page does not jump when the data arrives. The balance has its own skeleton.

Empty

The table and its header stay, with a single centred row naming the month that has no activity.

Error

The table is replaced by a message. The balance and the month filter stay in place, so the player can pick another month.

Formatting

Amounts use a non-breaking space as thousand separator and a comma as decimal separator, and show decimals only when the amount has them, followed by kr.

The sign and colour of an amount follow from the transaction type. Types that take money off the account get a minus sign. Winnings are shown in text-success. The type and the sign carry the same information as the colour.

Dates and times are shown in Swedish time.

Accessibility

• The balance is connected to its label with aria-labelledby.
• The month filter has an accessible name, Välj månad.
• Amount and balance cells use the numeric type of the table.
• Day headings are section header cells inside the table, so they are read in context.
• The loading skeleton is marked with aria-busy.

Implementation

In Nova the pattern is built in apps/services/transactions-tur/src/app/kontohistorik. The page is a server component that prefetches from Jupiter through a server action and pages with an infinite query.

In the example the data layer is replaced by hooks/use-transactions.ts and mocks/transactions.ts, and the selected month is kept in state instead of in a month search parameter in the URL. Layout, components and copy are the same.