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

## 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

Reviewed-on: #15
Co-authored-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
Co-committed-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>

react-openapi/src/components/fields/renderers/CurrencyField.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { Typography } from "@mui/material";
+
+const CURRENCIES = ["INR", "USD", "EUR", "GBP", "AED", "SGD"];
+const _currencyFormatters = new Map<string, Intl.NumberFormat>();
+
+export function formatCurrency(amount: number, currency?: string): string {
+  const code = currency && CURRENCIES.includes(currency) ? currency : "INR";
+  let formatter = _currencyFormatters.get(code);
+  if (!formatter) {
+    formatter = new Intl.NumberFormat("en-IN", {
+      style: "currency",
+      currency: code,
+      maximumFractionDigits: 2,
+    });
+    _currencyFormatters.set(code, formatter);
+  }
+  return formatter.format(Math.abs(amount));
+}
+
+interface CurrencyFieldProps {
+  value: number;
+  currency?: string;
+  large?: boolean;
+}
+
+export function CurrencyField({ value, currency, large }: CurrencyFieldProps) {
+  const negative = value < 0;
+  return (
+    <Typography
+      component="span"
+      sx={{
+        fontWeight: 700,
+        fontSize: large ? "0.9375rem" : "0.8125rem",
+        fontVariantNumeric: "tabular-nums",
+        color: negative ? "error.main" : "success.main",
+      }}
+    >
+      {formatCurrency(value, currency)}
+    </Typography>
+  );
+}

react-openapi/src/components/fields/renderers/FileUploadField.tsx

@@ -2,6 +2,8 @@ import React from "react";
 import { Box, Typography, Avatar, Chip, Button, FormHelperText } from "@mui/material";
 import type { FieldConfig } from "../../../types";
 import { getApi } from "../../../hooks/useApi";
+import { useAppContext } from "../../../context/AppContext";
+import { resolveMediaUrl } from "../utils";
 
 interface Props {
   field: FieldConfig;
@@ -19,6 +21,7 @@ const acceptMap: Record<string, string> = {
 export function FileUploadField({ field, value, onChange }: Props) {
   const uploadConfig = field.upload!;
   const inputRef = React.useRef<HTMLInputElement>(null);
+  const { config } = useAppContext();
 
   const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
@@ -51,12 +54,12 @@ export function FileUploadField({ field, value, onChange }: Props) {
       </Typography>
       {value ? (
         uploadConfig.type === "image" ? (
-          <Avatar src={`/uploads/${value}`} variant="rounded" sx={{ width: 120, height: 120 }} />
+          <Avatar src={resolveMediaUrl(`/uploads/${value}`, config.baseApiUrl)} variant="rounded" sx={{ width: 120, height: 120 }} />
         ) : (
           <Chip
             label={value}
             component="a"
-            href={`/uploads/${value}`}
+            href={resolveMediaUrl(`/uploads/${value}`, config.baseApiUrl)}
             clickable
             onDelete={handleReplace}
           />

react-openapi/src/components/fields/renderers/ImageField.tsx

@@ -3,6 +3,8 @@ import { Box, Typography, Avatar, FormHelperText } from "@mui/material";
 import Button from "@mui/material/Button";
 import type { FieldConfig } from "../../../types";
 import { getApi } from "../../../hooks/useApi";
+import { useAppContext } from "../../../context/AppContext";
+import { resolveMediaUrl } from "../utils";
 
 interface Props {
   field: FieldConfig;
@@ -13,6 +15,7 @@ interface Props {
 }
 
 export function ImageField({ field, value, onChange, id, uploadUrl }: Props) {
+  const { config } = useAppContext();
   const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (!file) return;
@@ -47,7 +50,7 @@ export function ImageField({ field, value, onChange, id, uploadUrl }: Props) {
         {field.label}
       </Typography>
       {value ? (
-        <Avatar src={value} variant="rounded" sx={{ width: 120, height: 120 }} />
+        <Avatar src={resolveMediaUrl(value, config.baseApiUrl)} variant="rounded" sx={{ width: 120, height: 120 }} />
       ) : (
         <Button variant="outlined" component="label" size="small">
           Upload {field.label}