Stripe-style UI overhaul + Expenses feed with month grouping #15

aetos · 2026-08-18T13:49:57Z

aetos commented

2026-08-18 13:49:57 +00:00

Title

Stripe-style UI overhaul + Expenses feed with month grouping

Summary

Rework the khata-ui frontend to a Stripe-grade design system and add a
rich, monthly-grouped Expenses experience driven by react-openapi's
shared, spec-configured field renderers.

Highlights

Design overhaul

New design system: single indigo (#635BFF), 6px radius, Inter type
scale, streamlined surfaces/inputs/feedback tokens
Sticky app bar with brand-left header + inline footer, route titles
Split-panel auth pages, Stripe-style Home hero + feature cards
Toast provider + shared PageHeader/EmptyState UI primitives
Admin polish: right-aligned numerics, row-hover actions, skeletons,
richer empty states, breadcrumbed fetch-request flows

Expenses page

Monthly grouped feed with stat cards (total spent / this month / income)
Month cards as single-open accordions with red-spent / green-income totals
Flat transaction rows: logo, name/date, account, amount (no accordion)
Floating month–year selector pill (scroll-spy) that expands + scrolls
to the selected month
Strict DD-MM-YYYY date parsing (day-first), no format guessing

Shared react-openapi fields

New CurrencyField + formatCurrency (cached Intl, sign-colored,
sign-less amounts; form editing reuses NumberField)
resourceConfig.fieldTypes override mechanism (amount → currency)
Expenses page rendered via ListCellRenderer / DetailFieldRenderer /
applyDisplayFormat — zero custom field renderers
resolveMediaUrl resolves relative /uploads/... against the API
base for every image field (Admin + Expenses logos)

Fixes

Perf: memoized rows, formatter caches, single-open accordions —
cuts slow-click INP and DOM-nesting warnings
Removed unused @mui/x-data-grid@7, which hoisted @mui/system@7 and
crashed Box/createTheme at runtime (v5/v7 mix)

Commits (10)

9808a1f design overhaul + expenses page
d6856a5 fix expenses list performance + dom nesting
3dd833a shared currency field + expenses rendered from react-openapi fields
e8c585b fix expenses grouping to parse occurred_at as DD-MM-YYYY strictly
cc940ee expense list: split month totals, sticky headers + month pill
47d799f expense list: clickable month pill + fix scroll-to-month
537aef9 resolve relative media URLs against the API base in react-openapi
8e9a13d expense list: replace accordion with flat Stripe-style rows
62dd06c expense list: month accordions + month-year selector; drop unused x-data-grid
806bd42 dropped amount sign from CurrencyField.tsx

## Title Stripe-style UI overhaul + Expenses feed with month grouping ## Summary Rework the khata-ui frontend to a Stripe-grade design system and add a rich, monthly-grouped Expenses experience driven by react-openapi's shared, spec-configured field renderers. ## Highlights ### Design overhaul - New design system: single indigo (#635BFF), 6px radius, Inter type scale, streamlined surfaces/inputs/feedback tokens - Sticky app bar with brand-left header + inline footer, route titles - Split-panel auth pages, Stripe-style Home hero + feature cards - Toast provider + shared PageHeader/EmptyState UI primitives - Admin polish: right-aligned numerics, row-hover actions, skeletons, richer empty states, breadcrumbed fetch-request flows ### Expenses page - Monthly grouped feed with stat cards (total spent / this month / income) - Month cards as single-open accordions with red-spent / green-income totals - Flat transaction rows: logo, name/date, account, amount (no accordion) - Floating month–year selector pill (scroll-spy) that expands + scrolls to the selected month - Strict DD-MM-YYYY date parsing (day-first), no format guessing ### Shared react-openapi fields - New `CurrencyField` + `formatCurrency` (cached Intl, sign-colored, sign-less amounts; form editing reuses NumberField) - `resourceConfig.fieldTypes` override mechanism (amount → currency) - Expenses page rendered via ListCellRenderer / DetailFieldRenderer / applyDisplayFormat — zero custom field renderers - `resolveMediaUrl` resolves relative `/uploads/...` against the API base for every image field (Admin + Expenses logos) ### Fixes - Perf: memoized rows, formatter caches, single-open accordions — cuts slow-click INP and DOM-nesting warnings - Removed unused @mui/x-data-grid@7, which hoisted @mui/system@7 and crashed Box/createTheme at runtime (v5/v7 mix) ## Commits (10) - 9808a1f design overhaul + expenses page - d6856a5 fix expenses list performance + dom nesting - 3dd833a shared currency field + expenses rendered from react-openapi fields - e8c585b fix expenses grouping to parse occurred_at as DD-MM-YYYY strictly - cc940ee expense list: split month totals, sticky headers + month pill - 47d799f expense list: clickable month pill + fix scroll-to-month - 537aef9 resolve relative media URLs against the API base in react-openapi - 8e9a13d expense list: replace accordion with flat Stripe-style rows - 62dd06c expense list: month accordions + month-year selector; drop unused x-data-grid - 806bd42 dropped amount sign from CurrencyField.tsx

aetos added 10 commits 2026-08-18 13:50:00 +00:00

design overhaul + expenses page 9808a1f39b

- Stripe-style theme: single indigo (#635BFF) brand, 6px radius,
  Inter scale; rewritten themePrimitives + MUI customizations
  (solid primary, near-black secondary, severity-aware Alert)
- Sticky Header (brand-left nav, theme toggle, mobile drawer),
  inline Footer, route fade-in, per-route document.title
- Home hero + feature cards (dead /dashboard,/reports links replaced)
- Split-panel AuthPage with validation and password visibility
- Data pages: PageHeader/EmptyState, breadcrumbed Fetch Request
  pages, admin table polish (numeric alignment, row-hover actions,
  skeletons, empty states), single-accent admin SideMenu
- Global ToastProvider wired into app shell
- New /expenses page: month-grouped feed, single-open accordion
  with inline detail (account, tags, amount, timestamps)

fix expenses list performance + dom nesting d6856a538f

- memoize accordion cards and groupByMonth so toggling one
  expense re-renders O(1) cards instead of the whole list
- cache Intl.NumberFormat and date formatters per key (was
  ~2-3 instantiations per item per render)
- unmount collapsed accordion details via unmountOnExit to cut
  initial mount cost and input delay
- restructure Account row in ExpenseDetail so Chip is not nested
  inside <p> (fixes validateDOMNesting warning)
- avoid mutating expenses state array when sorting

shared currency field + expenses rendered from react-openapi fields 3dd833ac2b

- add CurrencyField renderer (inherits NumberField for editing) with
  cached Intl formatter; route via uiType "currency" in list/detail/form
- add resourceConfig.fieldTypes override applied in AppProvider, so
  amount becomes currency for both Admin and the Expenses page
- render Expenses page through react-openapi fields (ListCellRenderer,
  DetailFieldRenderer, applyDisplayFormat) instead of custom fields
- resolve relative /uploads entity logos against the API base URL on
  load so entity logos render on the expenses feed
- drop custom avatar, currency/date formatters from the Expense module

fix expenses grouping to parse occurred_at as DD-MM-YYYY strictly e8c585bdb8

occurred_at comes from the backend as a DD-MM-YYYY string, which
new Date() cannot parse (NaN), so most transactions fell into an
"unknown" bucket and month sorting was broken.

- add parseOccurredAt() that only accepts DD-MM-YYYY, day-first,
  and throws on any other format or invalid date
- monthKey() now throws instead of returning "unknown"
- add currentMonthKey() for the "this month" stat
- sort groupByMonth/summary by parsed timestamp

expense list: split month totals, sticky headers + month pill cc940ee6e3

- show spent and income totals separately per month header
  (debits red, credits green) instead of a single net amount
- pin the current month header below the navbar while scrolling
  its section (glass backdrop, divider), Stripe-style grouping
- add a floating month pill that updates via scroll-spy so the
  active month stays visible across long feeds

expense list: clickable month pill + fix scroll-to-month 47d799fe5f

- make the floating month pill interactive (button role, hover,
  focus ring) and jump to the active month's header on click/Enter
- scroll via a non-sticky month anchor + window.scrollTo instead of
  scrollIntoView, which no-ops on sticky headers that are always
  already in view

resolve relative media URLs against the API base in react-openapi 537aef94ff

- add resolveMediaUrl() in fields/utils.ts: prefixes /uploads/... and
  other relative paths with the configured baseApiUrl, leaves absolute
  http/data/blob URLs untouched
- use it for every image render: ListCellRenderer, DetailFieldRenderer,
  ImageField form preview, and FileUploadField preview/href (which
  hardcoded /uploads/<value>)
- drop the Expense-side resolveLogoUrl hack and logo pre-normalization;
  the Expenses page now renders logos through the same react-openapi
  path as the admin entity list

expense list: replace accordion with flat Stripe-style rows 8e9a13dd19

- drop the per-row accordion and delete ExpenseDetail (was only used
  for the expanded view); rows are now static bordered cards with a
  hover highlight
- row layout: logo | name/date + account chip | amount
- tag chips were added to the row during iteration but removed for
  now until a better placement is settled

expense list: month accordions + month-year selector; drop unused x-data-grid 62dd06c226

- make each month a card-sized accordion (single-open, first month
  expanded by default) instead of a sticky header over flat rows
- turn the floating pill into a month-year selector: opens a menu of
  all months and expands + scrolls to the chosen month
- remove tags from expense rows again until a placement is settled
- remove unused @mui/x-data-grid@7, which pulled @mui/system@7 over
  material's v5 and caused the createTheme runtime crash

dropped amount sign from CurrencyField.tsx 806bd42673

aetos merged commit 25ec534597 into main

2026-08-18 13:51:33 +00:00

aetos deleted branch stripe-ui

2026-08-18 13:51:34 +00:00

aetos referenced this issue from a commit

2026-08-18 13:51:34 +00:00

Stripe-style UI overhaul + Expenses feed with month grouping (#15)

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: apps/khata-ui#15