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

- 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: clickable month pill + fix scroll-to-month
2026-08-18 13:01:55 +05:30 · 2026-08-17 20:38:28 +05:30 · 2026-08-17 20:15:39 +05:30 · 2026-08-17 16:43:46 +05:30 · 2026-08-17 16:27:43 +05:30 · 2026-08-17 15:22:37 +05:30
34 changed files with 1784 additions and 799 deletions
--- a/index.html
+++ b/index.html
@@ -3,14 +3,16 @@
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, width=device-width" />
    <meta name="description" content="Khata — your intelligent, extensible financial ledger. Import transactions, generate reports, and stay on top of your cashflow." />
    <meta name="theme-color" content="#635BFF" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
    />
    <link rel="icon" type="image/png" href="/favicon.png" />
-    <title>khata - Aetoskia</title>
+    <title>Khata — Financial Ledger</title>
  </head>
  <body>
    <div id="root"></div>
--- a/react-auth/AuthPage.tsx
+++ b/react-auth/AuthPage.tsx
@@ -1,6 +1,20 @@
 import * as React from 'react';
-import { Box, TextField, Button, Typography, IconButton, CircularProgress, Link } from '@mui/material';
+import {
  Box,
  TextField,
  Button,
  Typography,
  IconButton,
  CircularProgress,
  Link,
  InputAdornment,
  alpha,
 } from '@mui/material';
 import VisibilityIcon from '@mui/icons-material/Visibility';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 import { useTheme } from '@mui/material/styles';
 export type AuthMode = "login" | "register";
@@ -15,6 +29,12 @@ export interface AuthPageProps {
  currentUser: any;
 }
 const FEATURES = [
  "OpenAPI-driven admin for accounts, expenses, tags & payors",
  "Import bank statements with live pipeline progress",
  "Entity & tag enrichment for clean, comparable data",
 ];
 export function AuthPage({
  mode,
  onBack,
@@ -25,75 +45,106 @@ export function AuthPage({
  error,
  currentUser,
 }: AuthPageProps) {
-
+  const theme = useTheme();
  const [username, setUsername] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [showPassword, setShowPassword] = React.useState(false);
  const [fieldErrors, setFieldErrors] = React.useState<{ username?: string; password?: string }>({});
  const isLogin = mode === "login";
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (isLogin) {
      await login(username, password);
    } else {
      await register(username, password);
    }
  };
  // ✅ Auto-return if already logged in
  React.useEffect(() => {
    if (currentUser) onBack();
  }, [currentUser, onBack]);
-  return (
+  const validate = (): boolean => {
-    <Box
+    const next: { username?: string; password?: string } = {};
-      sx={{
+    if (!username.trim()) next.username = "Username is required";
-        maxWidth: 400,
+    else if (username.trim().length < 3) next.username = "Username must be at least 3 characters";
-        mx: 'auto',
+    if (!password) next.password = "Password is required";
-        mt: 8,
+    else if (password.length < 6) next.password = "Password must be at least 6 characters";
-        p: 4,
+    setFieldErrors(next);
-        borderRadius: 3,
+    return Object.keys(next).length === 0;
-        boxShadow: 3,
+  };
-        bgcolor: 'background.paper',
+
-      }}
+  const handleSubmit = async (e: React.FormEvent) => {
-    >
+    e.preventDefault();
-      <IconButton onClick={onBack} sx={{ mb: 2 }}>
+    if (!validate()) return;
-        <ArrowBackRoundedIcon />
+    if (isLogin) {
      await login(username.trim(), password);
    } else {
      await register(username.trim(), password);
    }
  };
  const handleSwitch = () => {
    setFieldErrors({});
    onSwitchMode();
  };
  const form = (
    <Box sx={{ width: '100%', maxWidth: 400 }}>
      <IconButton onClick={onBack} sx={{ mb: 2, border: '1px solid', borderColor: 'divider' }} aria-label="Go back">
        <ArrowBackRoundedIcon fontSize="small" />
      </IconButton>
-      <Typography variant="h4" fontWeight="bold" gutterBottom>
+      <Typography variant="h4" fontWeight={700} gutterBottom sx={{ letterSpacing: '-0.02em' }}>
-        {isLogin ? "Sign In" : "Create Account"}
+        {isLogin ? "Sign in to Khata" : "Create your account"}
      </Typography>
-      <Typography variant="body2" color="text.secondary" gutterBottom>
+      <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
        {isLogin
-          ? "Please log in to continue"
+          ? "Welcome back. Enter your credentials to continue."
-          : "Create an account to get started"}
+          : "Start managing your ledger in a few seconds."}
      </Typography>
-      <form onSubmit={handleSubmit}>
+      <form onSubmit={handleSubmit} noValidate>
        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
          <TextField
            fullWidth
            label="Username"
-          type="username"
+            type="text"
          margin="normal"
            value={username}
-          onChange={(e) => setUsername(e.target.value)}
+            onChange={(e) => {
-          required
+              setUsername(e.target.value);
              if (fieldErrors.username) setFieldErrors((p) => ({ ...p, username: undefined }));
            }}
            error={!!fieldErrors.username}
            helperText={fieldErrors.username}
            autoComplete="username"
            autoFocus
          />
          <TextField
            fullWidth
            label="Password"
-          type="password"
+            type={showPassword ? 'text' : 'password'}
          margin="normal"
            value={password}
-          onChange={(e) => setPassword(e.target.value)}
+            onChange={(e) => {
-          required
+              setPassword(e.target.value);
              if (fieldErrors.password) setFieldErrors((p) => ({ ...p, password: undefined }));
            }}
            error={!!fieldErrors.password}
            helperText={fieldErrors.password}
            autoComplete={isLogin ? 'current-password' : 'new-password'}
            InputProps={{
              endAdornment: (
                <InputAdornment position="end">
                  <IconButton
                    aria-label={showPassword ? 'Hide password' : 'Show password'}
                    onClick={() => setShowPassword((s) => !s)}
                    edge="end"
                    size="small"
                    sx={{ border: 'none' }}
                  >
                    {showPassword ? <VisibilityOffIcon fontSize="small" /> : <VisibilityIcon fontSize="small" />}
                  </IconButton>
                </InputAdornment>
              ),
            }}
          />
          {error && (
-          <Typography color="error" variant="body2" sx={{ mt: 1 }}>
+            <Typography color="error" variant="body2" sx={{ mt: 0.5 }}>
              {error}
            </Typography>
          )}
@@ -102,37 +153,92 @@ export function AuthPage({
            fullWidth
            type="submit"
            variant="contained"
-          color="primary"
+            size="large"
-          sx={{ mt: 3 }}
+            sx={{ mt: 1, fontWeight: 600 }}
            disabled={loading}
          >
            {loading ? (
-            <CircularProgress size={24} color="inherit" />
+              <CircularProgress size={20} color="inherit" />
            ) : isLogin ? (
-            "Login"
+              "Sign In"
            ) : (
-            "Register"
+              "Create Account"
            )}
          </Button>
        </Box>
      </form>
-      <Typography
+      <Typography variant="body2" color="text.secondary" align="center" sx={{ mt: 3 }}>
-        variant="body2"
+        {isLogin ? "Don't have an account?" : "Already have an account?"}{' '}
-        color="text.secondary"
+        <Link component="button" underline="hover" color="primary" onClick={handleSwitch} sx={{ fontWeight: 600 }}>
-        align="center"
+          {isLogin ? "Register" : "Sign In"}
        sx={{ mt: 3 }}
      >
        {isLogin ? "Don’t have an account?" : "Already have an account?"}{' '}
        <Link
          component="button"
          underline="hover"
          color="primary"
          onClick={onSwitchMode}
          sx={{ fontWeight: 500 }}
        >
          {isLogin ? "Register" : "Login"}
        </Link>
      </Typography>
    </Box>
  );
  return (
    <Box
      sx={{
        minHeight: 'calc(100vh - 64px)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        p: { xs: 2, md: 4 },
      }}
    >
      <Box
        sx={{
          width: '100%',
          maxWidth: 960,
          display: 'grid',
          gridTemplateColumns: { xs: '1fr', md: '5fr 6fr' },
          borderRadius: 3,
          overflow: 'hidden',
          border: '1px solid',
          borderColor: 'divider',
          backgroundColor: 'background.paper',
          boxShadow: (t) =>
            `0 12px 40px ${alpha(t.palette.common.black, t.palette.mode === 'dark' ? 0.4 : 0.08)}`,
        }}
      >
        {/* LEFT BRAND PANEL */}
        <Box
          sx={{
            display: { xs: 'none', md: 'flex' },
            flexDirection: 'column',
            justifyContent: 'space-between',
            p: 4,
            background: 'linear-gradient(150deg, #635BFF 0%, #4F46E5 55%, #3B82F6 100%)',
            color: '#fff',
          }}
        >
          <Box>
            <Typography variant="h6" fontWeight={700} sx={{ letterSpacing: '-0.02em' }}>
              Khata
            </Typography>
            <Typography sx={{ mt: 3, fontSize: '1.25rem', fontWeight: 600, lineHeight: 1.4, maxWidth: 320 }}>
              The intelligent, extensible financial ledger for your cashflow.
            </Typography>
          </Box>
          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
            {FEATURES.map((f) => (
              <Box key={f} sx={{ display: 'flex', gap: 1.5, alignItems: 'flex-start' }}>
                <CheckRoundedIcon sx={{ fontSize: 18, mt: 0.25, color: alpha('#fff', 0.9) }} />
                <Typography variant="body2" sx={{ color: alpha('#fff', 0.92), lineHeight: 1.5 }}>
                  {f}
                </Typography>
              </Box>
            ))}
          </Box>
        </Box>
        {/* RIGHT FORM PANEL */}
        <Box sx={{ p: { xs: 3, md: 5 }, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
          {form}
        </Box>
      </Box>
    </Box>
  );
 }
--- a/react-openapi/index.ts
+++ b/react-openapi/index.ts
@@ -5,6 +5,7 @@ export { useAppContext } from "./src/context/AppContext";
 export { useResource } from "./src/context/useResource";
 export { ListCellRenderer, DetailFieldRenderer, applyDisplayFormat } from "./src/components/fields";
 export { FormFieldRenderer } from "./src/components/fields/FormFieldRenderer";
 export { CurrencyField, formatCurrency } from "./src/components/fields/renderers/CurrencyField";
 export { SseStreamView } from "./src/components/SseStreamView";
 export { SseConnectionStatus } from "./src/components/SseConnectionStatus";
 export { getApi } from "./src/hooks/useApi";
--- a/react-openapi/src/components/ResourceDetail.tsx
+++ b/react-openapi/src/components/ResourceDetail.tsx
@@ -58,9 +58,14 @@ export function ResourceDetail({ resource, basePath }: ResourceDetailProps) {
  if (!data) {
    return (
-      <Typography variant="body1" color="text.secondary" sx={{ py: 4 }}>
+      <Box sx={{ py: 6, textAlign: "center" }}>
        <Typography variant="body2" color="text.secondary">
          Record not found
        </Typography>
        <Button sx={{ mt: 1.5 }} onClick={() => navigate(`${basePath}/${resource.name}`)}>
          Back to list
        </Button>
      </Box>
    );
  }
@@ -82,7 +87,7 @@ export function ResourceDetail({ resource, basePath }: ResourceDetailProps) {
        <Button startIcon={<ArrowBackIcon />} onClick={() => navigate(`${basePath}/${resource.name}`)}>
          Back
        </Button>
-        <Typography variant="h5" fontWeight={700} sx={{ flex: 1 }}>
+        <Typography variant="h5" fontWeight={700} sx={{ flex: 1, letterSpacing: "-0.02em" }}>
          {applyDisplayFormat(
            Object.fromEntries(
              resource.orderedFields.map((field) => {
--- a/react-openapi/src/components/ResourceList.tsx
+++ b/react-openapi/src/components/ResourceList.tsx
@@ -20,11 +20,13 @@ import {
  DialogContent,
  DialogActions,
  Grid,
  Skeleton,
 } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
 import EditIcon from "@mui/icons-material/Edit";
 import DeleteIcon from "@mui/icons-material/Delete";
 import VisibilityIcon from "@mui/icons-material/Visibility";
 import StorageIcon from "@mui/icons-material/Storage";
 import type { ResourceConfig, FieldConfig } from "../types";
 import { useResource } from "../context/useResource";
 import { useAppContext } from "../context/AppContext";
@@ -38,6 +40,10 @@ interface ResourceListProps {
  basePath: string;
 }
 function isNumericColumn(col: FieldConfig): boolean {
  return col.type === "integer" || col.type === "number";
 }
 function matchRow(row: any, filters: Record<string, string>, fields: FieldConfig[], allResources: ResourceConfig[]): boolean {
  for (const field of fields) {
    if (!field.filterable) continue;
@@ -265,12 +271,16 @@ export function ResourceList({ resource, basePath }: ResourceListProps) {
        />
      )}
-      <TableContainer component={Paper} variant="outlined">
+      <TableContainer component={Paper} variant="outlined" sx={{ borderRadius: 3 }}>
        <Table size="small">
          <TableHead>
            <TableRow>
              {visibleColumns.map((col) => (
-                <TableCell key={col.name} sx={{ fontWeight: 700 }}>
+                <TableCell
                  key={col.name}
                  align={isNumericColumn(col) ? "right" : "left"}
                  sx={{ fontWeight: 700, fontSize: "0.75rem", py: 1, whiteSpace: "nowrap" }}
                >
                  {col.sortable ? (
                    <TableSortLabel
                      active={sortField === col.name}
@@ -284,16 +294,45 @@ export function ResourceList({ resource, basePath }: ResourceListProps) {
                  )}
                </TableCell>
              ))}
-              {hasActions && <TableCell align="right" sx={{ fontWeight: 700 }}>Actions</TableCell>}
+              {hasActions && <TableCell align="right" sx={{ fontWeight: 700, fontSize: "0.75rem", py: 1 }}>Actions</TableCell>}
            </TableRow>
          </TableHead>
          <TableBody>
-            {displayData.length === 0 ? (
+            {crud.loading && displayData.length === 0 ? (
              Array.from({ length: 6 }).map((_, i) => (
                <TableRow key={`skeleton-${i}`}>
                  {visibleColumns.map((col) => (
                    <TableCell key={col.name} align={isNumericColumn(col) ? "right" : "left"} sx={{ py: 1 }}>
                      <Skeleton variant="text" width={col.type === "integer" || col.type === "number" ? 56 : "80%"} />
                    </TableCell>
                  ))}
                  {hasActions && (
                    <TableCell align="right" sx={{ py: 1 }}>
                      <Skeleton variant="rectangular" width={72} height={24} sx={{ ml: "auto", borderRadius: 1 }} />
                    </TableCell>
                  )}
                </TableRow>
              ))
            ) : displayData.length === 0 ? (
              <TableRow>
                <TableCell colSpan={visibleColumns.length + (hasActions ? 1 : 0)} align="center">
-                  <Typography variant="body2" color="text.secondary" sx={{ py: 4 }}>
+                  <Box sx={{ py: 5, display: "flex", flexDirection: "column", alignItems: "center", gap: 1 }}>
-                    {isStreaming ? "Waiting for events\u2026" : "No records found"}
+                    <StorageIcon sx={{ fontSize: 32, color: "text.disabled" }} />
                    <Typography variant="body2" color="text.secondary">
                      {isStreaming ? "Waiting for events…" : "No records found"}
                    </Typography>
                    {!isStreaming && resource.operations.create && (
                      <Button
                        variant="contained"
                        size="small"
                        startIcon={<AddIcon />}
                        onClick={() => navigate(`${basePath}/${resource.name}/new`)}
                        sx={{ mt: 1 }}
                      >
                        Create
                      </Button>
                    )}
                  </Box>
                </TableCell>
              </TableRow>
            ) : (
@@ -303,7 +342,7 @@ export function ResourceList({ resource, basePath }: ResourceListProps) {
                  <TableRow
                    key={rowId}
                    hover
-                    sx={{ cursor: "pointer" }}
+                    sx={{ cursor: "pointer", "&:hover .row-actions": { opacity: 1 } }}
                    onClick={() => {
                      if (isStreaming) {
                        setDetailRow(row);
@@ -322,13 +361,34 @@ export function ResourceList({ resource, basePath }: ResourceListProps) {
                        fmt = col.inlineDisplayFormat;
                      }
                      return (
-                        <TableCell key={col.name}>
+                        <TableCell
                          key={col.name}
                          align={isNumericColumn(col) ? "right" : "left"}
                          sx={{
                            py: 1,
                            fontSize: "0.8125rem",
                            ...(isNumericColumn(col) && { fontVariantNumeric: "tabular-nums" }),
                          }}
                        >
                          <ListCellRenderer field={col} value={value} displayFormat={fmt} basePath={basePath} />
                        </TableCell>
                      );
                    })}
                    {hasActions && (
-                      <TableCell align="right" onClick={(e) => e.stopPropagation()}>
+                      <TableCell
                        align="right"
                        onClick={(e) => e.stopPropagation()}
                      >
                        <Box
                          className="row-actions"
                          sx={{
                            opacity: { xs: 1, md: 0 },
                            display: "flex",
                            justifyContent: "flex-end",
                            gap: 0.5,
                            transition: "opacity 160ms ease",
                          }}
                        >
                          {resource.operations.get && !isStreaming && (
                            <Tooltip title="View">
                              <IconButton size="small" onClick={() => navigate(`${basePath}/${resource.name}/${rowId}`)}>
@@ -350,6 +410,7 @@ export function ResourceList({ resource, basePath }: ResourceListProps) {
                              </IconButton>
                            </Tooltip>
                          )}
                        </Box>
                      </TableCell>
                    )}
                  </TableRow>
--- a/react-openapi/src/components/SideMenu.tsx
+++ b/react-openapi/src/components/SideMenu.tsx
@@ -30,11 +30,6 @@ export function SideMenu({ resources, basePath, mobileOpen, onClose }: SideMenuP
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
  const colors = [
    "#6366f1", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6",
    "#ec4899", "#14b8a6", "#f97316", "#06b6d4", "#84cc16",
  ];
  const content = (
    <Box>
      <Toolbar>
@@ -43,7 +38,7 @@ export function SideMenu({ resources, basePath, mobileOpen, onClose }: SideMenuP
        </Typography>
      </Toolbar>
      <List sx={{ px: 1 }}>
-        {resources.map((r, i) => {
+        {resources.map((r) => {
          const listPath = `${basePath}/${r.name}`;
          const active = location.pathname.startsWith(listPath);
          return (
@@ -58,13 +53,15 @@ export function SideMenu({ resources, basePath, mobileOpen, onClose }: SideMenuP
                borderRadius: 2,
                mb: 0.5,
                "&.Mui-selected": {
-                  bgcolor: `${colors[i % colors.length]}15`,
+                  bgcolor: "primary.main",
-                  "&:hover": { bgcolor: `${colors[i % colors.length]}20` },
+                  color: "primary.contrastText",
                  "&:hover": { bgcolor: "primary.main" },
                  "& .MuiListItemIcon-root": { color: "primary.contrastText" },
                },
              }}
            >
              <ListItemIcon sx={{ minWidth: 36 }}>
-                <CircleIcon sx={{ color: colors[i % colors.length], fontSize: 12 }} />
+                <CircleIcon sx={{ fontSize: 12 }} />
              </ListItemIcon>
              <ListItemText
                primary={r.displayName}
--- a/react-openapi/src/components/fields/DetailFieldRenderer.tsx
+++ b/react-openapi/src/components/fields/DetailFieldRenderer.tsx
@@ -2,6 +2,9 @@ import React from "react";
 import { Box, Typography, Avatar } from "@mui/material";
 import type { FieldConfig } from "../../types";
 import { ListCellRenderer } from "./ListCellRenderer";
 import { CurrencyField } from "./renderers/CurrencyField";
 import { resolveMediaUrl } from "./utils";
 import { useAppContext } from "../../context/AppContext";
 interface DetailFieldProps {
  field: FieldConfig;
@@ -11,6 +14,7 @@ interface DetailFieldProps {
 }
 export function DetailFieldRenderer({ field, value, displayFormat, basePath }: DetailFieldProps) {
  const { config } = useAppContext();
  if (field.hidden?.detail) return null;
  return (
@@ -18,8 +22,10 @@ export function DetailFieldRenderer({ field, value, displayFormat, basePath }: D
      <Typography variant="caption" color="text.secondary" fontWeight={600} sx={{ mb: 0.25, display: "block" }}>
        {field.label}
      </Typography>
-      {field.uiType === "image" ? (
+      {field.uiType === "currency" ? (
-        <Avatar src={value} variant="rounded" sx={{ width: 120, height: 120 }} />
+        <CurrencyField value={Number(value)} large />
      ) : field.uiType === "image" ? (
        <Avatar src={resolveMediaUrl(value, config.baseApiUrl)} variant="rounded" sx={{ width: 120, height: 120 }} />
      ) : (
        <ListCellRenderer field={field} value={value} displayFormat={displayFormat} basePath={basePath} />
      )}
--- a/react-openapi/src/components/fields/FormFieldRenderer.tsx
+++ b/react-openapi/src/components/fields/FormFieldRenderer.tsx
@@ -96,6 +96,17 @@ export function FormFieldRenderer({ field, value, onChange, error, fkOptions, fk
    return <BooleanField field={field} value={value} onChange={onChange} />;
  }
  if (field.uiType === "currency") {
    return (
      <NumberField
        field={field}
        value={value}
        onChange={onChange}
        error={error}
      />
    );
  }
  if (field.type === "integer" || field.type === "number") {
    return (
      <NumberField
--- a/react-openapi/src/components/fields/ListCellRenderer.tsx
+++ b/react-openapi/src/components/fields/ListCellRenderer.tsx
@@ -2,8 +2,9 @@ import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { Box, Typography, Chip, Avatar, Dialog, DialogTitle, DialogContent, DialogActions, Button, Grid } from "@mui/material";
 import type { FieldConfig } from "../../types";
-import { applyDisplayFormat } from "./utils";
+import { applyDisplayFormat, resolveMediaUrl } from "./utils";
 import { InlineRefField } from "./renderers/InlineRefField";
 import { CurrencyField } from "./renderers/CurrencyField";
 import { extractFields } from "../../transformers/field-config";
 import { useAppContext } from "../../context/AppContext";
@@ -16,7 +17,7 @@ interface ListCellProps {
 export function ListCellRenderer({ field, value, displayFormat, basePath }: ListCellProps) {
  const navigate = useNavigate();
-  const { schemas } = useAppContext();
+  const { schemas, config } = useAppContext();
  const [inlineItem, setInlineItem] = useState<any>(null);
  if (value === null || value === undefined) {
@@ -137,7 +138,11 @@ export function ListCellRenderer({ field, value, displayFormat, basePath }: List
  }
  if (field.uiType === "image" && value) {
-    return <Avatar src={value} variant="rounded" sx={{ width: 40, height: 40 }} />;
+    return <Avatar src={resolveMediaUrl(value, config.baseApiUrl)} variant="rounded" sx={{ width: 40, height: 40 }} />;
  }
  if (field.uiType === "currency" && value != null && !Number.isNaN(Number(value))) {
    return <CurrencyField value={Number(value)} />;
  }
  if (field.type === "boolean") {
--- a/react-openapi/src/components/fields/index.ts
+++ b/react-openapi/src/components/fields/index.ts
@@ -3,3 +3,4 @@ export { ListCellRenderer } from "./ListCellRenderer";
 export { DetailFieldRenderer } from "./DetailFieldRenderer";
 export { applyDisplayFormat } from "./utils";
 export { JsonField } from "./renderers/JsonField";
 export { CurrencyField, formatCurrency } from "./renderers/CurrencyField";
--- a/react-openapi/src/components/fields/renderers/CurrencyField.tsx
+++ b/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(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>
  );
 }
--- a/react-openapi/src/components/fields/renderers/FileUploadField.tsx
+++ b/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}
          />
--- a/react-openapi/src/components/fields/renderers/ImageField.tsx
+++ b/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}
--- a/react-openapi/src/components/fields/utils.ts
+++ b/react-openapi/src/components/fields/utils.ts
@@ -9,3 +9,15 @@ export function applyDisplayFormat(item: any, format: string): string {
    return val != null ? String(val) : "";
  });
 }
 /**
 * Resolve a media/image URL against the API base so relative paths
 * like `/uploads/entity_logos/x.svg` point at the backend origin.
 * Absolute (http/data/blob) URLs are returned untouched.
 */
 export function resolveMediaUrl(value: string | null | undefined, baseUrl?: string): string | undefined {
  if (value == null || value === "") return undefined;
  if (value.startsWith("http") || value.startsWith("data:") || value.startsWith("blob:")) return value;
  if (value.startsWith("/") && baseUrl) return `${baseUrl.replace(/\/+$/, "")}${value}`;
  return value;
 }
--- a/react-openapi/src/context/AppProvider.tsx
+++ b/react-openapi/src/context/AppProvider.tsx
@@ -43,6 +43,20 @@ function extractProfileOperations(spec: any): ProfileOperation[] {
  return ops;
 }
 function applyResourceOverrides(configs: ResourceConfig[], specConfiguration: SpecConfiguration): ResourceConfig[] {
  for (const resource of configs) {
    const fieldTypes = specConfiguration.resourceConfig?.[resource.name]?.fieldTypes;
    if (!fieldTypes) continue;
    // fields and orderedFields share the same FieldConfig object references,
    // so an in-place mutation updates both.
    for (const field of resource.fields) {
      const override = fieldTypes[field.name];
      if (override) field.uiType = override;
    }
  }
  return configs;
 }
 const DEFAULT_AUTH_CONFIG: AuthConfig = {
  serverUrl: "",
  loginPath: "/login",
@@ -88,7 +102,7 @@ export function AppProvider({ specConfiguration, children }: AppProviderProps) {
        if (errs.length === 0) {
          const configs = buildResourceConfigs(spec);
          if (!cancelled) {
-            setResources(configs);
+            setResources(applyResourceOverrides(configs, specConfiguration));
          }
          const baseUrl = specConfiguration.baseApiUrl ?? spec.servers?.[0]?.url ?? "";
--- a/react-openapi/src/types.ts
+++ b/react-openapi/src/types.ts
@@ -4,6 +4,8 @@ export interface ResourceConfiguration {
  filterOptions?: {
    mode?: FilterMode;
  };
  /** Map of field name → uiType override (e.g. { amount: "currency" }). */
  fieldTypes?: Record<string, string>;
 }
 export interface ProfileComponents {
--- a/src/Expense/Expense.tsx
+++ b/src/Expense/Expense.tsx
@@ -0,0 +1,169 @@
 import React, { useEffect, useMemo, useState } from "react";
 import {
  Container,
  Box,
  Paper,
  Typography,
  Alert,
  Skeleton,
  Button,
 } from "@mui/material";
 import ReceiptLongIcon from "@mui/icons-material/ReceiptLong";
 import { useNavigate } from "react-router-dom";
 import { useResource, useAppContext, formatCurrency } from "../../react-openapi";
 import { PageHeader } from "../ui/PageHeader";
 import { EmptyState } from "../ui/EmptyState";
 import { ExpenseList } from "./ExpenseList";
 import { ExpenseItem, ExpenseFieldConfigs, isExpense, currentMonthKey, monthKey, monthLabel, parseOccurredAt } from "./types";
 function StatCard({ label, value, hint }: { label: string; value: string; hint?: string }) {
  return (
    <Paper
      variant="outlined"
      sx={{ p: 2.5, borderRadius: 3, flex: 1, minWidth: 180 }}
    >
      <Typography variant="caption" color="text.secondary" sx={{ textTransform: "uppercase", letterSpacing: "0.05em" }}>
        {label}
      </Typography>
      <Typography variant="h5" fontWeight={700} sx={{ mt: 0.5, letterSpacing: "-0.02em" }}>
        {value}
      </Typography>
      {hint && (
        <Typography variant="caption" color="text.secondary">
          {hint}
        </Typography>
      )}
    </Paper>
  );
 }
 export default function Expense() {
  const navigate = useNavigate();
  const { list, loading, error, resource } = useResource("expenses");
  const { resources } = useAppContext();
  const [items, setItems] = useState<ExpenseItem[] | null>(null);
  const fieldConfigs = useMemo<ExpenseFieldConfigs | null>(() => {
    if (!resource) return null;
    const find = (name: string) => resource.fields.find((f) => f.name === name);
    const entity = find("entity");
    const amount = find("amount");
    const account = find("account");
    const tags = find("tags");
    const occurredAt = find("occurred_at");
    const entitiesRes = resources.find((r) => r.name === "entities");
    const accountsRes = resources.find((r) => r.name === "accounts");
    const tagsRes = resources.find((r) => r.name === "tags");
    const logo = entitiesRes?.fields.find((f) => f.name === "logo");
    if (!entity || !amount || !account || !tags || !occurredAt || !logo) return null;
    return {
      entity,
      amount,
      account,
      tags,
      occurredAt,
      logo,
      formats: {
        entity: entitiesRes?.displayFormat ?? "{name}",
        account: accountsRes?.displayFormat ?? "{name}",
        tags: tagsRes?.displayFormat ?? "{name}",
      },
    };
  }, [resource, resources]);
  useEffect(() => {
    let mounted = true;
    list({ limit: 0 }).then((res) => {
      if (!mounted) return;
      setItems((res.items ?? []) as ExpenseItem[]);
    });
    return () => {
      mounted = false;
    };
  }, []);
  const sorted = useMemo(
    () =>
      [...(items ?? [])].sort(
        (a, b) => parseOccurredAt(b.occurred_at).getTime() - parseOccurredAt(a.occurred_at).getTime(),
      ),
    [items],
  );
  const summary = useMemo(() => {
    const currency = sorted.find((it) => it.account?.currency)?.account?.currency ?? "INR";
    const totalSpent = sorted.filter(isExpense).reduce((s, it) => s + (it.amount ?? 0), 0);
    const totalIncome = sorted.filter((it) => !isExpense(it)).reduce((s, it) => s + (it.amount ?? 0), 0);
    const thisMonth = currentMonthKey();
    const monthItems = sorted.filter((it) => monthKey(it.occurred_at) === thisMonth);
    const monthTotal = monthItems.filter(isExpense).reduce((s, it) => s + (it.amount ?? 0), 0);
    return { currency, totalSpent, totalIncome, thisMonth: monthLabel(thisMonth), monthItems, monthTotal };
  }, [sorted]);
  const loadingUI = (
    <Box sx={{ display: "flex", flexDirection: "column", gap: 4 }}>
      {[0, 1, 2].map((i) => (
        <Box key={i}>
          <Skeleton variant="text" width={160} height={32} sx={{ mb: 1.5 }} />
          <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
            {[0, 1, 2].map((j) => (
              <Skeleton key={j} variant="rounded" height={64} sx={{ borderRadius: 2 }} />
            ))}
          </Box>
        </Box>
      ))}
    </Box>
  );
  return (
    <Container maxWidth="lg" sx={{ py: 4 }}>
      <PageHeader
        crumbs={[{ label: "Home", path: "/" }, { label: "Expenses" }]}
        title="Expenses"
        subtitle="Every transaction imported from your accounts, grouped by month."
        actions={
          <Button
            variant="contained"
            onClick={() => navigate("/admin/expenses/new")}
          >
            New Expense
          </Button>
        }
      />
      {error && (
        <Alert severity="error" sx={{ mb: 3, borderRadius: 2 }}>
          Failed to load expenses: {error}
        </Alert>
      )}
      {items === null && !error ? (
        loadingUI
      ) : items && items.length === 0 ? (
        <Paper variant="outlined" sx={{ borderRadius: 3, mt: 2 }}>
          <EmptyState
            icon={<ReceiptLongIcon />}
            title="No expenses yet"
            description="Once you run a fetch request, imported transactions will show up here grouped by month."
            actionLabel="Go to Fetch Requests"
            onAction={() => navigate("/fetch-requests")}
          />
        </Paper>
      ) : (
        <>
          <Box sx={{ display: "flex", gap: 2, flexWrap: "wrap", mb: 4 }}>
            <StatCard
              label="Total spent"
              value={formatCurrency(summary.totalSpent, summary.currency)}
              hint={`${summary.monthItems.length} transaction${summary.monthItems.length === 1 ? "" : "s"} this month`}
            />
            <StatCard label="This month" value={formatCurrency(summary.monthTotal, summary.currency)} hint={summary.thisMonth} />
            <StatCard label="Income" value={formatCurrency(summary.totalIncome, summary.currency)} />
          </Box>
          {fieldConfigs && <ExpenseList items={sorted} fields={fieldConfigs} />}
        </>
      )}
    </Container>
  );
 }
--- a/src/Expense/ExpenseDetail.tsx
+++ b/src/Expense/ExpenseDetail.tsx
@@ -0,0 +1,24 @@
 import React from "react";
 import { Box, Divider } from "@mui/material";
 import { DetailFieldRenderer } from "../../react-openapi";
 import type { ExpenseItem, ExpenseFieldConfigs } from "./types";
 interface ExpenseDetailProps {
  item: ExpenseItem;
  fields: ExpenseFieldConfigs;
 }
 export function ExpenseDetail({ item, fields }: ExpenseDetailProps) {
  return (
    <Box sx={{ pt: 1, pb: 0.5 }}>
      <Divider sx={{ mb: 1.5 }} />
      <Box sx={{ display: "flex", flexDirection: "column", gap: 0.5 }}>
        <DetailFieldRenderer field={fields.entity} value={item.entity} displayFormat={fields.formats.entity} />
        <DetailFieldRenderer field={fields.amount} value={item.amount} />
        <DetailFieldRenderer field={fields.account} value={item.account} displayFormat={fields.formats.account} />
        <DetailFieldRenderer field={fields.tags} value={item.tags} displayFormat={fields.formats.tags} />
        <DetailFieldRenderer field={fields.occurredAt} value={item.occurred_at} />
      </Box>
    </Box>
  );
 }
--- a/src/Expense/ExpenseList.tsx
+++ b/src/Expense/ExpenseList.tsx
@@ -0,0 +1,308 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
  Box,
  Typography,
  Accordion,
  AccordionSummary,
  AccordionDetails,
 } from "@mui/material";
 import { alpha } from "@mui/material/styles";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
 import { ListCellRenderer, CurrencyField, applyDisplayFormat, formatCurrency } from "../../react-openapi";
 import type { ExpenseItem, ExpenseFieldConfigs } from "./types";
 import { isExpense, monthKey, monthLabel, parseOccurredAt } from "./types";
 import { ExpenseDetail } from "./ExpenseDetail";
 interface GroupedMonth {
  key: string;
  items: ExpenseItem[];
  spent: number;
  income: number;
  currency: string;
 }
 function groupByMonth(items: ExpenseItem[]): GroupedMonth[] {
  const map = new Map<string, ExpenseItem[]>();
  for (const item of items) {
    const key = monthKey(item.occurred_at);
    const list = map.get(key) ?? [];
    list.push(item);
    map.set(key, list);
  }
  return [...map.entries()]
    .map(([key, list]) => {
      const sorted = [...list].sort(
        (a, b) => parseOccurredAt(b.occurred_at).getTime() - parseOccurredAt(a.occurred_at).getTime(),
      );
      const currency = sorted.find((it) => it.account?.currency)?.account?.currency ?? "INR";
      const spent = sorted.filter(isExpense).reduce((sum, it) => sum + Math.abs(it.amount ?? 0), 0);
      const income = sorted.filter((it) => !isExpense(it)).reduce((sum, it) => sum + (it.amount ?? 0), 0);
      return { key, items: sorted, spent, income, currency };
    })
    .sort((a, b) => b.key.localeCompare(a.key));
 }
 interface ExpenseCardProps {
  item: ExpenseItem;
  expanded: boolean;
  currency: string;
  fields: ExpenseFieldConfigs;
  onToggle: (id: string) => void;
 }
 const ExpenseCard = React.memo(function ExpenseCard({ item, expanded, currency, fields, onToggle }: ExpenseCardProps) {
  const itemCurrency = item.account?.currency ?? currency;
  return (
    <Accordion
      disableGutters
      expanded={expanded}
      onChange={(_, isExpanded) => onToggle(isExpanded ? item.id : "")}
      TransitionProps={{ unmountOnExit: true }}
      sx={{
        border: "1px solid",
        borderColor: expanded ? "primary.main" : "divider",
        borderRadius: 2,
        overflow: "hidden",
        boxShadow: "none",
        "&:before": { display: "none" },
        transition: "border-color 160ms ease, background-color 160ms ease",
        "&:hover": { borderColor: "primary.light" },
      }}
    >
      <AccordionSummary
        expandIcon={<ExpandMoreIcon />}
        sx={{
          "& .MuiAccordionSummary-content": {
            alignItems: "center",
            gap: 2,
            minWidth: 0,
            py: 0.5,
          },
        }}
      >
        <Box
          sx={{
            width: 40,
            flexShrink: 0,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
          }}
        >
          {item.entity?.logo ? (
            <ListCellRenderer field={fields.logo} value={item.entity.logo} />
          ) : (
            <Box sx={{ width: 40, height: 40, borderRadius: 2, bgcolor: "action.hover" }} />
          )}
        </Box>
        <Box sx={{ flex: 1, minWidth: 0 }}>
          <Typography
            variant="body1"
            fontWeight={600}
            noWrap
            sx={{ fontSize: "0.9375rem", lineHeight: 1.3 }}
          >
            {item.entity ? applyDisplayFormat(item.entity, fields.formats.entity) : "Unknown"}
          </Typography>
          <Box sx={{ display: "flex", alignItems: "center", gap: 1, mt: 0.25, flexWrap: "wrap" }}>
            <ListCellRenderer field={fields.occurredAt} value={item.occurred_at} />
            {item.account?.name && (
              <ListCellRenderer
                field={fields.account}
                value={item.account}
                displayFormat={fields.formats.account}
              />
            )}
          </Box>
        </Box>
        <CurrencyField value={item.amount} currency={itemCurrency} large />
      </AccordionSummary>
      <AccordionDetails sx={{ pt: 0 }}>
        <ExpenseDetail item={item} fields={fields} />
      </AccordionDetails>
    </Accordion>
  );
 });
 interface ExpenseListProps {
  items: ExpenseItem[];
  fields: ExpenseFieldConfigs;
 }
 export function ExpenseList({ items, fields }: ExpenseListProps) {
  const [expandedId, setExpandedId] = useState<string | null>(null);
  const [activeMonth, setActiveMonth] = useState<string | null>(null);
  const groups = useMemo(() => groupByMonth(items), [items]);
  const listRef = useRef<HTMLDivElement>(null);
  const handleToggle = useCallback((id: string) => {
    setExpandedId((prev) => (prev === id ? null : id));
  }, []);
  const jumpToActiveMonth = useCallback(() => {
    if (!activeMonth) return;
    const anchor = listRef.current?.querySelector<HTMLElement>(
      `[data-month-anchor="${activeMonth}"]`,
    );
    if (!anchor) return;
    const offset = window.matchMedia("(min-width: 900px)").matches ? 64 : 56;
    const top = anchor.getBoundingClientRect().top + window.scrollY - offset;
    window.scrollTo({ top, behavior: "smooth" });
  }, [activeMonth]);
  const handlePillKeyDown = useCallback(
    (event: React.KeyboardEvent) => {
      if (event.key === "Enter" || event.key === " ") {
        event.preventDefault();
        jumpToActiveMonth();
      }
    },
    [jumpToActiveMonth],
  );
  useEffect(() => {
    const root = listRef.current;
    if (!root || groups.length === 0) return;
    let ticking = false;
    const update = () => {
      ticking = false;
      const headers = root.querySelectorAll<HTMLElement>("[data-month-header]");
      let current: string | null = null;
      for (const header of headers) {
        if (header.getBoundingClientRect().top <= 72) {
          current = header.dataset.monthHeader ?? null;
        } else {
          break;
        }
      }
      setActiveMonth(current);
    };
    const onScroll = () => {
      if (!ticking) {
        ticking = true;
        requestAnimationFrame(update);
      }
    };
    update();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
    };
  }, [groups]);
  return (
    <>
      <Box ref={listRef} sx={{ display: "flex", flexDirection: "column", gap: 4 }}>
        {groups.map((group) => (
          <Box key={group.key}>
            <span data-month-anchor={group.key} aria-hidden="true" style={{ display: "block", height: 0 }} />
            <Box
              data-month-header={group.key}
              sx={{
                display: "flex",
                alignItems: "baseline",
                gap: 1.5,
                mb: 1.5,
                position: "sticky",
                top: { xs: 56, md: 64 },
                zIndex: 2,
                py: 0.5,
                backgroundColor: (theme) => alpha(theme.palette.background.default, 0.85),
                backdropFilter: "blur(8px)",
                borderBottom: "1px solid",
                borderColor: "divider",
              }}
            >
            <Typography variant="h6" fontWeight={700} sx={{ letterSpacing: "-0.01em" }}>
              {monthLabel(group.key)}
            </Typography>
            <Typography variant="caption" color="text.secondary">
              {group.items.length} transaction{group.items.length === 1 ? "" : "s"}
            </Typography>
            <Box sx={{ flex: 1 }} />
            <Typography variant="body2" fontWeight={700} color="error.main">
              {formatCurrency(group.spent, group.currency)}
            </Typography>
            <Typography variant="body2" color="text.disabled">
              /
            </Typography>
            <Typography variant="body2" fontWeight={700} color="success.main">
              {formatCurrency(group.income, group.currency)}
            </Typography>
          </Box>
          <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
            {group.items.map((item) => (
              <ExpenseCard
                key={item.id}
                item={item}
                expanded={expandedId === item.id}
                currency={group.currency}
                fields={fields}
                onToggle={handleToggle}
              />
            ))}
          </Box>
        </Box>
      ))}
      </Box>
      <Box
        sx={{
          position: "fixed",
          bottom: 16,
          left: "50%",
          transform: "translateX(-50%)",
          zIndex: 3,
          pointerEvents: activeMonth ? "auto" : "none",
          opacity: activeMonth ? 1 : 0,
          transition: "opacity 160ms ease",
        }}
      >
        <Box
          role="button"
          tabIndex={0}
          onClick={jumpToActiveMonth}
          onKeyDown={handlePillKeyDown}
          sx={{
            display: "flex",
            alignItems: "center",
            gap: 0.5,
            px: 1.5,
            py: 0.75,
            borderRadius: "999px",
            cursor: "pointer",
            userSelect: "none",
            backgroundColor: (theme) => alpha(theme.palette.background.default, 0.85),
            backdropFilter: "blur(8px)",
            border: "1px solid",
            borderColor: "divider",
            boxShadow: 1,
            transition: "background-color 160ms ease, transform 160ms ease",
            "&:hover": {
              backgroundColor: (theme) => alpha(theme.palette.background.default, 0.95),
              transform: "translateY(-1px)",
            },
            "&:focus-visible": {
              outline: "2px solid",
              outlineColor: "primary.main",
            },
          }}
        >
          <KeyboardArrowUpIcon sx={{ fontSize: 14, color: "text.secondary" }} />
          <Typography variant="caption" fontWeight={700} color="text.secondary">
            {activeMonth ? monthLabel(activeMonth) : ""}
          </Typography>
        </Box>
      </Box>
    </>
  );
 }
 export { groupByMonth };
--- a/src/Expense/types.ts
+++ b/src/Expense/types.ts
@@ -0,0 +1,65 @@
 import type { FieldConfig } from "../../react-openapi";
 export interface ExpenseItem {
  id: string;
  entity?: { name?: string; type?: string; logo?: string } | null;
  amount: number;
  account?: { name?: string; number?: string; type?: string; currency?: string } | null;
  tags?: { icon?: string; name?: string }[];
  occurred_at?: string;
  created_at?: string;
  updated_at?: string;
 }
 export interface ExpenseFieldConfigs {
  entity: FieldConfig;
  amount: FieldConfig;
  account: FieldConfig;
  tags: FieldConfig;
  occurredAt: FieldConfig;
  logo: FieldConfig;
  formats: {
    entity: string;
    account: string;
    tags: string;
  };
 }
 export function isExpense(item: ExpenseItem): boolean {
  return (item.amount ?? 0) < 0;
 }
 export function parseOccurredAt(value?: string): Date {
  const m = value?.match(/^(\d{2})-(\d{2})-(\d{4})$/);
  if (!m) {
    throw new Error(`Expense occurred_at is not DD-MM-YYYY: ${value}`);
  }
  const [, dd, mm, yyyy] = m;
  const d = new Date(Number(yyyy), Number(mm) - 1, Number(dd));
  if (
    Number.isNaN(d.getTime()) ||
    d.getDate() !== Number(dd) ||
    d.getMonth() !== Number(mm) - 1 ||
    d.getFullYear() !== Number(yyyy)
  ) {
    throw new Error(`Invalid expense occurred_at date: ${value}`);
  }
  return d;
 }
 export function monthKey(value?: string): string {
  const d = parseOccurredAt(value);
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`;
 }
 export function currentMonthKey(): string {
  const now = new Date();
  return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}`;
 }
 export function monthLabel(key: string): string {
  const [y, m] = key.split("-").map(Number);
  if (!y || !m) return key;
  const d = new Date(y, m - 1, 1);
  return d.toLocaleDateString("en-IN", { month: "long", year: "numeric" });
 }
--- a/src/FetchRequest/FetchRequestCreate.tsx
+++ b/src/FetchRequest/FetchRequestCreate.tsx
@@ -4,8 +4,11 @@ import {
  CircularProgress,
 } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import ReceiptLongIcon from "@mui/icons-material/ReceiptLong";
 import { useAppContext, useResource, ListCellRenderer, FormFieldRenderer, getApi, applyDisplayFormat } from "../../react-openapi";
 import type { FieldConfig } from "../../react-openapi";
 import { PageHeader } from "../ui/PageHeader";
 import { EmptyState } from "../ui/EmptyState";
 const CREATE_FIELDS = ["account", "bank", "pipeline", "start_date", "end_date", "source"];
@@ -29,25 +32,39 @@ function FetchRequestList() {
  if (!rows) {
    return (
-      <Box sx={{ display: "flex", justifyContent: "center", py: 4 }}>
+      <Box sx={{ display: "flex", justifyContent: "center", py: 6 }}>
-        <CircularProgress size={24} />
+        <CircularProgress size={28} />
      </Box>
    );
  }
  if (rows.length === 0) {
-    return <Typography variant="body2" color="text.secondary">No fetch requests found.</Typography>;
+    return (
      <EmptyState
        icon={<ReceiptLongIcon />}
        title="No fetch requests yet"
        description="Upload a bank statement or configure email ingestion to import your first transactions."
        actionLabel="New Fetch Request"
        onAction={() => document.getElementById("new-fetch-request")?.scrollIntoView({ behavior: "smooth", block: "center" })}
      />
    );
  }
  return (
-    <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
+    <Box sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
      {rows.map((row, i) => {
        const displayFormat = resource?.displayFormat ?? "";
        return (
          <Paper
            key={row.id ?? i}
            variant="outlined"
-            sx={{ p: 2, cursor: "pointer", "&:hover": { borderColor: "primary.main" } }}
+            sx={{
              p: 2,
              cursor: "pointer",
              borderRadius: 2,
              transition: "border-color 160ms ease, box-shadow 160ms ease",
              "&:hover": { borderColor: "primary.main", boxShadow: 1 },
            }}
            onClick={() => navigate(`/fetch-requests/${row.id}`)}
          >
            <Box sx={{ display: "flex", gap: 2, flexWrap: "wrap", alignItems: "center" }}>
@@ -145,18 +162,25 @@ export default function FetchRequestCreate() {
  return (
    <Container maxWidth="lg" sx={{ py: 4 }}>
-      <Typography variant="h5" fontWeight={800} gutterBottom>
+      <PageHeader
-        Fetch Requests
+        crumbs={[{ label: "Home", path: "/" }, { label: "Fetch Requests" }]}
-      </Typography>
+        title="Fetch Requests"
        subtitle="Import transactions from bank statements or email and track pipeline progress."
      />
-      <Paper variant="outlined" sx={{ p: 3, mb: 4, borderRadius: 2, position: "relative", overflow: "hidden", "&::before": { content: '""', position: "absolute", left: 0, top: 0, bottom: 0, width: 4, bgcolor: "primary.main" } }}>
+      <Paper
-        <Box sx={{ ml: 0.5, mb: 2.5 }}>
+        id="new-fetch-request"
-          <Typography variant="subtitle1" fontWeight={700}>
+        variant="outlined"
        sx={{ p: 3, mb: 4, borderRadius: 3 }}
      >
        <Typography variant="subtitle1" fontWeight={700} gutterBottom>
          New Fetch Request
        </Typography>
-        </Box>
+        <Typography variant="body2" color="text.secondary" sx={{ mb: 3, maxWidth: 520, lineHeight: 1.6 }}>
          Choose an account, pipeline, and a file or email source to kick off an import.
        </Typography>
-        <Box sx={{ display: "flex", flexDirection: "column", gap: 2, maxWidth: 480 }}>
+        <Box sx={{ display: "flex", flexDirection: "column", gap: 2, maxWidth: 520 }}>
          {formFields.map((field) => (
            <FormFieldRenderer
              key={field.name}
@@ -168,18 +192,18 @@ export default function FetchRequestCreate() {
          ))}
        </Box>
-        <Box sx={{ display: "flex", justifyContent: "flex-end", mt: 2, gap: 1 }}>
+        <Box sx={{ display: "flex", justifyContent: "flex-end", mt: 3, gap: 1.5 }}>
          <Button variant="outlined" onClick={() => { setFormData({}); setResult(null); }}>
            Reset
          </Button>
-          <Button variant="contained" onClick={handleSubmit} disabled={loading}>
+          <Button variant="contained" onClick={handleSubmit} disabled={loading} sx={{ minWidth: 180 }}>
            {loading ? <CircularProgress size={20} sx={{ mr: 0.5 }} /> : null}
            Create Fetch Request
          </Button>
        </Box>
        {result && (
-          <Alert severity={result.severity} sx={{ mt: 1 }} onClose={() => setResult(null)}>
+          <Alert severity={result.severity} sx={{ mt: 2 }} onClose={() => setResult(null)}>
            {result.message}
          </Alert>
        )}
--- a/src/FetchRequest/FetchRequestDetail.tsx
+++ b/src/FetchRequest/FetchRequestDetail.tsx
@@ -9,9 +9,8 @@ import {
  Chip,
  CircularProgress,
  Alert,
-  Snackbar,
+  Divider,
 } from "@mui/material";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import ReplayIcon from "@mui/icons-material/Replay";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import ErrorIcon from "@mui/icons-material/Error";
@@ -25,6 +24,8 @@ import { RETRY_MAX, formatApiError } from "../features/fetch-requests";
 import type { FetchRequestStatus, SSEEvent, ProgressMessage } from "../features/fetch-requests";
 import { PipelineStepper } from "./components/PipelineStepper";
 import { AmbiguityResolver } from "./components/AmbiguityResolver";
 import { PageHeader } from "../ui/PageHeader";
 import { useToast } from "../ui/Toast";
 const statusColors: Record<FetchRequestStatus, "default" | "primary" | "warning" | "info" | "success" | "error"> = {
  pending: "default",
@@ -67,6 +68,20 @@ function sseIcon(status: SSEEvent["status"]) {
  }
 }
 function Section({ title, children, action }: { title: string; children: React.ReactNode; action?: React.ReactNode }) {
  return (
    <Paper sx={{ p: 3, borderRadius: 3, mb: 3 }} variant="outlined">
      <Box sx={{ display: "flex", alignItems: "center", gap: 1, mb: 2 }}>
        <Typography variant="subtitle1" fontWeight={700} sx={{ flex: 1 }}>
          {title}
        </Typography>
        {action}
      </Box>
      {children}
    </Paper>
  );
 }
 export default function FetchRequestDetail() {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
@@ -75,7 +90,7 @@ export default function FetchRequestDetail() {
  const [stepStats, setStepStats] = useState<Record<string, number>>({});
  const [liveParsedCount, setLiveParsedCount] = useState<number | undefined>(undefined);
  const [retrying, setRetrying] = useState(false);
-  const [failNotif, setFailNotif] = useState<string | null>(null);
+  const { showToast } = useToast();
  const feedRef = useRef<HTMLDivElement>(null);
  const { data: fetchRequest, isLoading, error: fetchError, refetch: refetchRequest } = useQuery({
@@ -109,7 +124,7 @@ export default function FetchRequestDetail() {
        refetchRequest();
      }
      if (parsed.status === "failed") {
-        setFailNotif(parsed.message.error || "Fetch request failed");
+        showToast(parsed.message.error || "Fetch request failed", "error");
        refetchRequest();
      }
      if (parsed.status === "completed" || parsed.step === "resume_extract") {
@@ -153,7 +168,7 @@ export default function FetchRequestDetail() {
      await patch(id, { status: "pending" });
      refetchRequest();
    } catch (err: any) {
-      setFailNotif(formatApiError(err));
+      showToast(formatApiError(err), "error");
    } finally {
      setRetrying(false);
    }
@@ -162,7 +177,7 @@ export default function FetchRequestDetail() {
  const req = fetchRequest as any;
  const retryCount = req?.retry_count ?? 0;
  const isRetryExhausted = retryCount >= RETRY_MAX;
-  const status = req?.status as FetchRequestStatus | undefined;
+  const status = (req?.status ?? "pending") as FetchRequestStatus;
  const detailFields = (resource?.orderedFields ?? []).filter(
    (f) => f.name !== "source",
  );
@@ -193,34 +208,44 @@ export default function FetchRequestDetail() {
  if (fetchError || !fetchRequest) {
    return (
      <Container sx={{ mt: 4 }}>
-        <Button startIcon={<ArrowBackIcon />} onClick={() => navigate("/fetch-requests")} sx={{ mb: 2 }}>
+        <PageHeader
-          Back
+          crumbs={[{ label: "Home", path: "/" }, { label: "Fetch Requests", path: "/fetch-requests" }, { label: "Details" }]}
-        </Button>
+          title="Fetch Request"
        />
        <Alert severity="error">Failed to load fetch request</Alert>
      </Container>
    );
  }
  return (
-    <Container sx={{ mt: 4, mb: 4 }}>
+    <Container maxWidth="lg" sx={{ py: 4 }}>
-      <Button startIcon={<ArrowBackIcon />} onClick={() => navigate("/fetch-requests")} sx={{ mb: 2 }}>
+      <PageHeader
-        Back to Fetch Requests
+        crumbs={[{ label: "Home", path: "/" }, { label: "Fetch Requests", path: "/fetch-requests" }, { label: displayTitle }]}
-      </Button>
+        title={displayTitle}
        subtitle="Live pipeline status, progress events, and ambiguity resolution for this import."
      />
-      <Paper sx={{ p: 3, borderRadius: 4, mb: 3 }} variant="outlined">
+      <Section
-        <Box sx={{ display: "flex", alignItems: "center", gap: 2, mb: 2, flexWrap: "wrap" }}>
+        title="Overview"
        action={
          <Chip
            icon={statusIcons[status] as any}
            label={status.replace(/_/g, " ")}
            color={statusColors[status]}
            sx={{ textTransform: "capitalize" }}
          />
-          <Typography variant="h6" fontWeight={600}>{displayTitle}</Typography>
+        }
      >
        <Box sx={{ display: "flex", alignItems: "center", gap: 2, mb: 2, flexWrap: "wrap" }}>
          <Chip
            label={"path" in (req.source ?? {}) ? "File" : "Email"}
            size="small"
            variant="outlined"
            color={"path" in (req.source ?? {}) ? "primary" : "secondary"}
          />
          <Typography variant="caption" color="text.secondary">
            ID: {req.id}
          </Typography>
        </Box>
        <Box sx={{ display: "flex", gap: 4, flexWrap: "wrap", mb: 2 }}>
@@ -242,6 +267,8 @@ export default function FetchRequestDetail() {
          })}
        </Box>
        <Divider sx={{ my: 2 }} />
        <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
          <Box sx={{ flex: 1, maxWidth: 300 }}>
            <Typography variant="caption" color="text.secondary">
@@ -260,7 +287,7 @@ export default function FetchRequestDetail() {
            </Button>
          )}
        </Box>
-      </Paper>
+      </Section>
      {status === "failed" && req.error_message && (
        <Alert severity="error" sx={{ mb: 3, borderRadius: 2 }}>
@@ -280,33 +307,33 @@ export default function FetchRequestDetail() {
        liveParsedCount={liveParsedCount ?? 0}
      />
-      <Paper sx={{ borderRadius: 4, mb: 3 }} variant="outlined">
+      <Section
-        <Box sx={{ display: "flex", alignItems: "center", gap: 1, p: 2, pb: 0 }}>
+        title="Progress Events"
-          <Typography variant="subtitle1" fontWeight={600} sx={{ flex: 1 }}>
+        action={
-            Progress Events
+          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
          </Typography>
            <Box
              sx={{
-              width: 10,
+                width: 8,
-              height: 10,
+                height: 8,
                borderRadius: "50%",
                bgcolor: sseConnected ? "success.main" : "error.main",
              flexShrink: 0,
              }}
            />
            <Typography variant="caption" color="text.secondary">
              {sseConnected ? "Connected" : "Disconnected"}
            </Typography>
          </Box>
        }
      >
        <Box
          ref={feedRef}
          sx={{
            maxHeight: 300,
            overflowY: "auto",
            p: 2,
            display: "flex",
            flexDirection: "column",
            gap: 1,
            pr: 0.5,
          }}
        >
          {displayEvents.length === 0 ? (
@@ -321,7 +348,7 @@ export default function FetchRequestDetail() {
                  display: "flex",
                  alignItems: "center",
                  gap: 1.5,
-                  p: 1,
+                  p: 1.25,
                  borderRadius: 2,
                  bgcolor: "action.hover",
                }}
@@ -341,20 +368,9 @@ export default function FetchRequestDetail() {
            ))
          )}
        </Box>
-      </Paper>
+      </Section>
      <AmbiguityResolver fetchRequestId={id!} />
      <Snackbar
        open={!!failNotif}
        autoHideDuration={6000}
        onClose={() => setFailNotif(null)}
        anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
      >
        <Alert severity="error" onClose={() => setFailNotif(null)} sx={{ borderRadius: 2 }}>
          {failNotif}
        </Alert>
      </Snackbar>
    </Container>
  );
 }
--- a/src/Footer.tsx
+++ b/src/Footer.tsx
@@ -1,52 +1,36 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
 import Link from '@mui/material/Link';
 import Typography from '@mui/material/Typography';
 import {AppBar, Box, Button, IconButton, Toolbar, Tooltip} from "@mui/material";
 import MenuIcon from "@mui/icons-material/Menu";
 import LogoutIcon from "@mui/icons-material/Logout";
 function Copyright() {
  return (
    <Typography variant="body2" sx={{ color: 'text.secondary' }}>
      <Link color="text.secondary" href="https://www.aetoskia.com/">
        {'Copyright © Aetoskia Internal Infrastructure — All rights reserved.'}
      </Link>
      &nbsp;
      {new Date().getFullYear()}
    </Typography>
  );
 }
 export default function Footer() {
  return (
-    <AppBar
+    <Box
-      position="fixed"
+      component="footer"
      color="default"
      sx={{
        top: 'auto',
        bottom: 0,
        backdropFilter: 'blur(8px)',
        boxShadow: 'none',
        borderTop: '1px solid',
        borderColor: 'divider',
        py: 3,
        mt: 'auto',
      }}
    >
      <Toolbar>
        <React.Fragment>
      <Container
        maxWidth="lg"
        sx={{
          display: 'flex',
              flexDirection: 'column',
          alignItems: 'center',
-              gap: { xs: 2, sm: 4 },
+          justifyContent: 'space-between',
-              textAlign: { sm: 'center', md: 'left' },
+          gap: 2,
          flexWrap: 'wrap',
        }}
      >
-            <Copyright />
+        <Typography variant="body2" color="text.secondary" fontWeight={500}>
          Khata
        </Typography>
        <Typography variant="caption" color="text.secondary">
          © {new Date().getFullYear()} Aetoskia Internal Infrastructure — All rights reserved.
        </Typography>
      </Container>
-        </React.Fragment>
+    </Box>
      </Toolbar>
    </AppBar>
  );
 }
--- a/src/Header.tsx
+++ b/src/Header.tsx
@@ -1,8 +1,5 @@
 import * as React from "react";
-import {
+import { useLocation, matchPath, useNavigate } from "react-router-dom";
  useLocation,
  matchPath
 } from "react-router-dom";
 import {
  AppBar,
  Toolbar,
@@ -11,6 +8,11 @@ import {
  Tooltip,
  Button,
  Box,
  Drawer,
  List,
  ListItemButton,
  ListItemText,
  Divider,
  useMediaQuery,
  useTheme,
 } from "@mui/material";
@@ -18,7 +20,6 @@ import MenuIcon from "@mui/icons-material/Menu";
 import LogoutIcon from "@mui/icons-material/Logout";
 import DarkModeIcon from "@mui/icons-material/DarkMode";
 import LightModeIcon from "@mui/icons-material/LightMode";
 import { useNavigate } from "react-router-dom";
 import { useAuth } from "../react-auth";
 import { ColorModeContext } from "./shared-theme/AppTheme";
@@ -30,105 +31,88 @@ interface HeaderProps {
  onDrawerToggle?: () => void;
 }
-export default function Header({
+const NAV_LINKS = [
-  routerMapping,
+  { label: "Home", path: "/" },
-  onDrawerToggle,
+  { label: "Expenses", path: "/expenses" },
-}: HeaderProps) {
+  { label: "Fetch Requests", path: "/fetch-requests" },
-  const location = useLocation();
+];
  const matchedRoute = routerMapping.find((route) =>
    matchPath({ path: route.path, end: false }, location.pathname)
  );
  const headerTitle = matchedRoute?.headerTitle ?? "Khata";
 function isActive(path: string, locationPath: string): boolean {
  if (path === "/") return locationPath === "/" || locationPath === "/home";
  return matchPath({ path, end: false }, locationPath) !== null;
 }
 export default function Header({ routerMapping, onDrawerToggle }: HeaderProps) {
  const location = useLocation();
  const navigate = useNavigate();
  const { currentUser, logout } = useAuth();
  const { mode, toggleColorMode } = React.useContext(ColorModeContext);
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const isAuthenticated = !!currentUser;
-  return (
+  const navContent = (
    <AppBar
      position="fixed"
      color="default"
      sx={{
        zIndex: (theme) => theme.zIndex.drawer + 1,
        backdropFilter: "blur(8px)",
        boxShadow: "none",
        borderBottom: "1px solid",
        borderColor: "divider",
      }}
    >
      <Toolbar>
        {/* MOBILE MENU BUTTON */}
        {isMobile && onDrawerToggle && (
          <IconButton
            color="inherit"
            edge="start"
            onClick={onDrawerToggle}
            sx={{ mr: 2 }}
          >
            <MenuIcon />
          </IconButton>
        )}
        {/* THEME TOGGLE */}
        <IconButton onClick={toggleColorMode} color="inherit" sx={{ mr: 2 }}>
          {mode === 'dark' ? <LightModeIcon /> : <DarkModeIcon />}
        </IconButton>
        {/* TITLE */}
        <Typography
          variant="h6"
          noWrap
          sx={{ fontWeight: "bold", cursor: "pointer" }}
          onClick={() => navigate("/")}
        >
          {headerTitle}
        </Typography>
        <span style={{ flexGrow: 1 }} />
        {/* NAV LINKS */}
    <Box
      sx={{
        display: { xs: "none", md: "flex" },
        alignItems: "center",
-            mr: 2,
+        gap: 0.5,
-            gap: 1,
+        ml: 3,
      }}
    >
-          {[
+      {NAV_LINKS.map((link) => {
-            { label: "Fetch", path: "/fetch-requests" },
+        const active = isActive(link.path, location.pathname);
-          ].map(({ label, path }) => (
+        return (
          <Button
-              key={path}
+            key={link.path}
            color="inherit"
-              onClick={() => navigate(path)}
+            onClick={() => navigate(link.path)}
-              sx={{ textTransform: "none", fontWeight: 500, px: 1.5 }}
+            sx={{
-              size="small"
+              textTransform: "none",
              fontWeight: active ? 600 : 500,
              color: active ? "text.primary" : "text.secondary",
              px: 1.5,
              borderRadius: "6px",
              position: "relative",
              "&::after":
                active
                  ? {
                      content: '""',
                      position: "absolute",
                      left: 12,
                      right: 12,
                      bottom: 4,
                      height: 2,
                      borderRadius: 1,
                      backgroundColor: "primary.main",
                    }
                  : {},
              "&:hover": { backgroundColor: "action.hover", color: "text.primary" },
            }}
          >
-              {label}
+            {link.label}
          </Button>
-          ))}
+        );
      })}
    </Box>
  );
-        {/* AUTH SECTION */}
+  const authSection = (
    <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
      {isAuthenticated ? (
        <>
            <Box
              sx={{
                display: { xs: "none", sm: "flex" },
                alignItems: "center",
                mr: 2,
              }}
            >
          <Button
            color="inherit"
            onClick={() => navigate("/admin")}
-                sx={{ textTransform: "none", fontWeight: 500 }}
+            sx={{
              textTransform: "none",
              fontWeight: isActive("/admin", location.pathname) ? 600 : 500,
              color: isActive("/admin", location.pathname) ? "text.primary" : "text.secondary",
              display: { xs: "none", sm: "inline-flex" },
            }}
          >
            Admin
          </Button>
@@ -139,10 +123,8 @@ export default function Header({
          >
            {currentUser.username}
          </Button>
            </Box>
          <Tooltip title="Logout">
-              <IconButton color="inherit" onClick={logout}>
+            <IconButton color="inherit" onClick={logout} aria-label="Logout">
              <LogoutIcon />
            </IconButton>
          </Tooltip>
@@ -157,7 +139,152 @@ export default function Header({
          Login
        </Button>
      )}
    </Box>
  );
  const drawerContent = (
    <Box sx={{ width: 260 }} role="presentation">
      <Box sx={{ p: 2 }}>
        <Brand />
      </Box>
      <Divider />
      <List>
        {routerMapping
          .filter((r) => !r.path.startsWith("/login") && !r.path.startsWith("/register") && !r.path.startsWith("/profile"))
          .map((route) => {
            const active = isActive(route.path, location.pathname);
            return (
              <ListItemButton
                key={route.path}
                selected={active}
                onClick={() => {
                  navigate(route.path);
                  setMobileOpen(false);
                }}
                sx={{
                  borderRadius: "6px",
                  mx: 1,
                  mb: 0.5,
                  "&.Mui-selected": {
                    backgroundColor: "action.selected",
                  },
                }}
              >
                <ListItemText
                  primary={route.headerTitle}
                  primaryTypographyProps={{ fontWeight: active ? 600 : 500, fontSize: 14 }}
                />
              </ListItemButton>
            );
          })}
        <Divider sx={{ my: 1 }} />
        {isAuthenticated ? (
          <>
            <ListItemButton onClick={() => navigate("/profile/me")} sx={{ borderRadius: "6px", mx: 1 }}>
              <ListItemText primary="Profile" primaryTypographyProps={{ fontSize: 14 }} />
            </ListItemButton>
            <ListItemButton onClick={logout} sx={{ borderRadius: "6px", mx: 1 }}>
              <ListItemText primary="Logout" primaryTypographyProps={{ fontSize: 14 }} />
            </ListItemButton>
          </>
        ) : (
          <ListItemButton onClick={() => navigate("/login")} sx={{ borderRadius: "6px", mx: 1 }}>
            <ListItemText primary="Login" primaryTypographyProps={{ fontSize: 14 }} />
          </ListItemButton>
        )}
      </List>
    </Box>
  );
  return (
    <>
      <AppBar
        position="sticky"
        color="default"
        sx={{
          zIndex: (theme) => theme.zIndex.drawer + 1,
          backdropFilter: "blur(8px)",
          boxShadow: "none",
          borderBottom: "1px solid",
          borderColor: "divider",
          backgroundColor: "background.default",
        }}
      >
        <Toolbar>
          {/* MOBILE MENU */}
          {isMobile && (
            <IconButton
              color="inherit"
              edge="start"
              onClick={() => setMobileOpen(true)}
              aria-label="Open navigation"
              sx={{ mr: 1 }}
            >
              <MenuIcon />
            </IconButton>
          )}
          {/* BRAND — always leftmost */}
          <Brand onClick={() => navigate("/")} />
          {navContent}
          <Box sx={{ flexGrow: 1 }} />
          {/* THEME TOGGLE — right side */}
          <IconButton onClick={toggleColorMode} color="inherit" aria-label="Toggle color mode" sx={{ mr: 1 }}>
            {mode === "dark" ? <LightModeIcon /> : <DarkModeIcon />}
          </IconButton>
          {authSection}
        </Toolbar>
      </AppBar>
      <Drawer
        open={mobileOpen}
        onClose={() => setMobileOpen(false)}
        ModalProps={{ keepMounted: true }}
      >
        {drawerContent}
      </Drawer>
    </>
  );
 }
 function Brand({ onClick }: { onClick?: () => void }) {
  return (
    <Box
      onClick={onClick}
      sx={{
        display: "flex",
        alignItems: "center",
        gap: 1,
        cursor: onClick ? "pointer" : "default",
        userSelect: "none",
      }}
    >
      <Box
        sx={{
          width: 28,
          height: 28,
          borderRadius: "8px",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          background: "linear-gradient(135deg, #635BFF 0%, #8B5CF6 100%)",
          color: "#fff",
          fontWeight: 700,
          fontSize: 15,
        }}
      >
        K
      </Box>
      <Typography
        variant="h6"
        sx={{ fontWeight: 700, letterSpacing: "-0.02em", color: "text.primary" }}
      >
        Khata
      </Typography>
    </Box>
  );
 }
--- a/src/Home.tsx
+++ b/src/Home.tsx
@@ -1,11 +1,11 @@
 import * as React from "react";
-import { Box, Typography, Button, Container, Grid, Paper, Chip } from "@mui/material";
+import { Box, Typography, Button, Container, Grid, Paper, alpha } from "@mui/material";
-import { useTheme, alpha } from "@mui/material/styles";
+import { useTheme } from "@mui/material/styles";
 import { useNavigate } from "react-router-dom";
-import DashboardIcon from "@mui/icons-material/Dashboard";
+import ReceiptLongIcon from "@mui/icons-material/ReceiptLong";
 import SyncIcon from "@mui/icons-material/Sync";
-import BarChartIcon from "@mui/icons-material/BarChart";
+import AccountBalanceWalletIcon from "@mui/icons-material/AccountBalanceWallet";
-import SettingsIcon from "@mui/icons-material/Settings";
+import AccountCircleIcon from "@mui/icons-material/AccountCircle";
 import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
 import { useAuth } from "../react-auth";
@@ -14,11 +14,9 @@ interface FeatureCardProps {
  title: string;
  description: string;
  path: string;
  label?: string;
  accent: string;
 }
-function FeatureCard({ icon, title, description, path, label, accent }: FeatureCardProps) {
+function FeatureCard({ icon, title, description, path }: FeatureCardProps) {
  const navigate = useNavigate();
  const theme = useTheme();
@@ -35,29 +33,18 @@ function FeatureCard({ icon, title, description, path, label, accent }: FeatureC
        height: "100%",
        display: "flex",
        flexDirection: "column",
-        position: "relative",
+        transition: "border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease",
        overflow: "hidden",
        transition: "all 0.25s ease",
        "&::before": {
          content: '""',
          position: "absolute",
          top: 0,
          left: 0,
          right: 0,
          height: 3,
          background: accent,
          opacity: 0,
          transition: "opacity 0.25s ease",
        },
        "&:hover": {
          transform: "translateY(-4px)",
          boxShadow: `0 12px 32px ${alpha(theme.palette.common.black, theme.palette.mode === "dark" ? 0.3 : 0.08)}`,
          borderColor: "transparent",
-          "&::before": { opacity: 1 },
+          transform: "translateY(-2px)",
          boxShadow: `0 8px 24px ${alpha(theme.palette.common.black, theme.palette.mode === "dark" ? 0.35 : 0.08)}`,
          "& .feature-arrow": {
            opacity: 1,
            transform: "translateX(0)",
          },
        },
      }}
    >
      <Box sx={{ display: "flex", alignItems: "center", gap: 1.5, mb: 1.5 }}>
      <Box
        sx={{
          width: 40,
@@ -66,175 +53,134 @@ function FeatureCard({ icon, title, description, path, label, accent }: FeatureC
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
-            background: alpha(accent, 0.12),
+          backgroundColor: "action.hover",
-            color: accent,
+          color: "primary.main",
          mb: 2,
        }}
      >
        {icon}
      </Box>
-        <Typography variant="subtitle1" fontWeight={700}>
+
      <Typography variant="subtitle1" fontWeight={600} sx={{ mb: 0.75 }}>
        {title}
      </Typography>
      </Box>
      <Typography variant="body2" color="text.secondary" sx={{ flex: 1, lineHeight: 1.6 }}>
        {description}
      </Typography>
-      {label && (
+      <Box
-        <Chip
+        className="feature-arrow"
-          label={label}
+        sx={{
-          size="small"
+          mt: 2,
-          variant="outlined"
+          display: "flex",
-          sx={{ mt: 2, alignSelf: "flex-start", textTransform: "capitalize" }}
+          alignItems: "center",
-        />
+          gap: 0.5,
-      )}
+          color: "primary.main",
          fontWeight: 600,
          opacity: 0,
          transform: "translateX(-4px)",
          transition: "opacity 180ms ease, transform 180ms ease",
        }}
      >
        <Typography variant="caption" fontWeight={600} color="primary">
          Open
        </Typography>
        <ArrowForwardIcon sx={{ fontSize: 14 }} />
      </Box>
    </Paper>
  );
 }
 export default function Home() {
  const navigate = useNavigate();
  const theme = useTheme();
  const { currentUser } = useAuth();
  const features = [
    {
-      icon: <DashboardIcon />,
+      icon: <ReceiptLongIcon />,
-      title: "Dashboard",
+      title: "Expenses",
-      description: "Visualise inflows and outflows with interactive charts, drill into categories, and track trends over daily, weekly, and monthly periods.",
+      description:
-      path: "/dashboard",
+        "Browse every transaction imported from your accounts — grouped by month, with entity, account, tags, and amount at a glance.",
-      accent: theme.palette.mode === "dark" ? "#818cf8" : "#6366f1",
+      path: "/expenses",
    },
    {
      icon: <SyncIcon />,
      title: "Fetch Requests",
-      description: "Upload bank statements or configure email ingestion to auto-import transactions. Track pipeline status from pending through to completion.",
+      description:
        "Upload bank statements or configure email ingestion to auto-import transactions. Track pipeline status from pending through to completion.",
      path: "/fetch-requests",
      accent: theme.palette.mode === "dark" ? "#34d399" : "#10b981",
    },
    {
-      icon: <BarChartIcon />,
+      icon: <AccountBalanceWalletIcon />,
-      title: "Report Snapshots",
+      title: "Accounts & Entities",
-      description: "Generate cached report snapshots with custom filters — accounts, date ranges, amount bounds — then pin a snapshot on the dashboard for consistent comparisons.",
+      description:
-      path: "/reports",
+        "Manage your accounts, expenses, tags, and payors through the OpenAPI-driven admin panel with full CRUD and server-side filters.",
      accent: theme.palette.mode === "dark" ? "#fbbf24" : "#f59e0b",
    },
    {
      icon: <SettingsIcon />,
      title: "Admin",
      description: "Full CRUD over accounts, expenses, tags, and payors. Manage your data programmatically through the OpenAPI-driven admin panel.",
      path: "/admin",
-      accent: theme.palette.mode === "dark" ? "#e879f9" : "#d946ef",
+    },
    {
      icon: <AccountCircleIcon />,
      title: "Profile",
      description:
        "View and edit your user profile — username, email, and account preferences — from the profile page.",
      path: "/profile/me",
    },
  ];
  return (
-    <Box
+    <Box sx={{ width: "100%" }}>
-      sx={{
+      <Container maxWidth="lg" sx={{ py: { xs: 6, md: 10 } }}>
-        minHeight: "calc(100vh - 64px)",
+        <Box sx={{ maxWidth: 680, mx: { xs: "auto", md: 0 }, textAlign: { xs: "center", md: "left" } }}>
-        display: "flex",
+          <Typography
-        flexDirection: "column",
+            variant="overline"
-        position: "relative",
+            sx={{ color: "primary.main", mb: 1.5, display: "block", fontWeight: 700 }}
        overflow: "hidden",
        "&::before": {
          content: '""',
          position: "absolute",
          top: "-15%",
          left: "-8%",
          width: "45%",
          height: "55%",
          background: "radial-gradient(circle, rgba(99,102,241,0.12) 0%, transparent 70%)",
          zIndex: 0,
        },
        "&::after": {
          content: '""',
          position: "absolute",
          bottom: "-15%",
          right: "-8%",
          width: "45%",
          height: "55%",
          background: "radial-gradient(circle, rgba(236,72,153,0.1) 0%, transparent 70%)",
          zIndex: 0,
        },
      }}
    >
      <Container maxWidth="lg" sx={{ position: "relative", zIndex: 1, flex: 1, display: "flex", flexDirection: "column", justifyContent: "center", py: 6 }}>
        <Box
          sx={{
            textAlign: "center",
            mb: 6,
          }}
          >
            Khata · Financial Ledger
          </Typography>
          <Typography
            variant="h1"
            sx={{
-              fontWeight: 800,
+              color: "text.primary",
-              fontSize: { xs: "2.5rem", sm: "3.5rem", md: "5rem" },
+              fontSize: { xs: "2.25rem", md: "3.25rem" },
              background: "linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)",
              WebkitBackgroundClip: "text",
              WebkitTextFillColor: "transparent",
              letterSpacing: "-0.03em",
              mb: 2,
            }}
          >
-            Welcome to Khata
+            Your intelligent, extensible financial ledger.
          </Typography>
          <Typography
-            variant="h6"
+            variant="body1"
            color="text.secondary"
-            sx={{
+            sx={{ maxWidth: 540, lineHeight: 1.7, fontSize: "1.0625rem" }}
              maxWidth: 580,
              mx: "auto",
              lineHeight: 1.7,
              fontWeight: 400,
              fontSize: { xs: "1rem", md: "1.15rem" },
            }}
          >
-            Your intelligent, extensible financial ledger. Import transactions, generate reports, and stay on top of your cashflow.
+            Import transactions from bank statements, enrich them with entity and tag intelligence,
            and stay on top of your cashflow — all in one place.
          </Typography>
-          <Box sx={{ mt: 4, display: "flex", gap: 2, justifyContent: "center", flexWrap: "wrap" }}>
+          <Box sx={{ mt: 4, display: "flex", gap: 2, justifyContent: { xs: "center", md: "flex-start" }, flexWrap: "wrap" }}>
            <Button
              variant="contained"
              size="large"
              endIcon={<ArrowForwardIcon />}
-              onClick={() => navigate("/dashboard")}
+              onClick={() => navigate(currentUser ? "/fetch-requests" : "/login")}
-              sx={{
+              sx={{ px: 3.5, py: 1.4, fontWeight: 600 }}
                px: 4,
                py: 1.4,
                borderRadius: "50px",
                fontWeight: 700,
                background: "linear-gradient(135deg, #6366f1 0%, #ec4899 100%)",
                transition: "transform 0.2s ease, box-shadow 0.2s",
                "&:hover": {
                  transform: "translateY(-2px)",
                  boxShadow: `0 8px 24px ${alpha(theme.palette.primary.main, 0.35)}`,
                },
              }}
            >
-              Enter Dashboard
+              {currentUser ? "Enter App" : "Get Started"}
            </Button>
            <Button
              variant="outlined"
              size="large"
              onClick={() => navigate("/fetch-requests")}
-              sx={{
+              sx={{ px: 3.5, py: 1.4, fontWeight: 600 }}
                px: 4,
                py: 1.4,
                borderRadius: "50px",
                fontWeight: 600,
                borderWidth: 2,
                "&:hover": { borderWidth: 2 },
              }}
            >
              Import Data
            </Button>
          </Box>
        </Box>
-        <Grid container spacing={3}>
+        <Grid container spacing={3} sx={{ mt: { xs: 4, md: 8 } }}>
          {features.map((f) => (
            <Grid key={f.title} item xs={12} sm={6} md={3}>
              <FeatureCard {...f} />
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -5,22 +5,25 @@ import {
  BrowserRouter,
  Routes,
  Route,
-  useNavigate
+  useNavigate,
  useLocation,
  matchPath
 } from "react-router-dom";
 import {
  Box,
  CssBaseline,
-  CircularProgress,
+  CircularProgress
  Toolbar
 } from "@mui/material";
 import Home from './Home';
 import FetchRequests from './FetchRequest/FetchRequestCreate';
 import FetchRequestDetail from './FetchRequest/FetchRequestDetail';
 import Expense from './Expense/Expense';
 import { AppProvider, useAppContext, Admin, ProfileRoutes } from '../react-openapi';
 import { AuthProvider, AuthPage, useAuth, ProfileCreate, ProfileEdit, ProfileView } from "../react-auth";
 import Header from './Header';
 import Footer from './Footer';
 import AppTheme from './shared-theme/AppTheme';
 import { ToastProvider } from './ui/Toast';
 import { specConfiguration } from './openapi-config';
 const queryClient = new QueryClient();
@@ -76,6 +79,7 @@ const routerMapping = [
  { path: "/register", component: RegisterPage, headerTitle: "Register" },
  { path: "/fetch-requests", component: FetchRequests, headerTitle: "Fetch Requests" },
  { path: "/fetch-requests/:id", component: FetchRequestDetail, headerTitle: "Fetch Request" },
  { path: "/expenses", component: Expense, headerTitle: "Expenses" },
  { path: "/admin/*", component: Admin, headerTitle: "Admin" },
  { path: "/profile/*", component: ProfileRoutes, headerTitle: "Profile" },
 ];
@@ -84,6 +88,16 @@ const routerMapping = [
 function AppContent() {
  const { authConfig, loading } = useAppContext();
  const navigate = useNavigate();
  const location = useLocation();
  React.useEffect(() => {
    const matched = routerMapping.find((route) =>
      matchPath({ path: route.path, end: false }, location.pathname),
    );
    document.title = matched
      ? `${matched.headerTitle} · Khata`
      : "Khata — Financial Ledger";
  }, [location.pathname]);
  if (loading) {
    return (
@@ -97,11 +111,23 @@ function AppContent() {
    <AuthProvider authConfig={authConfig} onUnauthorized={() => navigate("/login")}>
      <AppTheme>
        <CssBaseline enableColorScheme />
        <ToastProvider>
          <Box sx={{ display: "flex", flexDirection: "column", minHeight: "100vh" }}>
            <Header routerMapping={routerMapping} />
-        <Box sx={{ pb: 8 }}>
+            <Box
-          <Toolbar />
+              component="main"
-
+              key={location.pathname}
              sx={{
                flexGrow: 1,
                width: "100%",
                animation: "fadeIn 220ms ease-out",
                "@keyframes fadeIn": {
                  from: { opacity: 0, transform: "translateY(4px)" },
                  to: { opacity: 1, transform: "translateY(0)" },
                },
              }}
            >
              <Routes>
                {routerMapping.map(({ path, component: Component }) => (
                  <Route
@@ -114,6 +140,8 @@ function AppContent() {
            </Box>
            <Footer />
          </Box>
        </ToastProvider>
      </AppTheme>
    </AuthProvider>
  );
--- a/src/openapi-config.ts
+++ b/src/openapi-config.ts
@@ -11,6 +11,7 @@ export const specConfiguration: SpecConfiguration = {
  resourceConfig: {
    expenses: {
      filterOptions: { mode: "client" },
      fieldTypes: { amount: "currency" },
    },
  },
 };
--- a/src/shared-theme/customizations/feedback.tsx
+++ b/src/shared-theme/customizations/feedback.tsx
@@ -1,21 +1,14 @@
 import { Theme, alpha, Components } from '@mui/material/styles';
-import { gray, orange } from '../themePrimitives';
+import { gray } from '../themePrimitives';
 /* eslint-disable import/prefer-default-export */
 export const feedbackCustomizations: Components<Theme> = {
  MuiAlert: {
    styleOverrides: {
      root: ({ theme }) => ({
-        borderRadius: 10,
+        borderRadius: (theme.vars || theme).shape.borderRadius,
        backgroundColor: orange[100],
        color: (theme.vars || theme).palette.text.primary,
        border: `1px solid ${alpha(orange[300], 0.5)}`,
        '& .MuiAlert-icon': {
          color: orange[500],
        },
        ...theme.applyStyles('dark', {
-          backgroundColor: alpha(orange[900], 0.35),
+          backgroundColor: alpha((theme.vars || theme).palette.background.paper, 0.6),
          border: `1px solid ${alpha(orange[800], 0.3)}`,
        }),
      }),
    },
@@ -24,7 +17,7 @@ export const feedbackCustomizations: Components<Theme> = {
    styleOverrides: {
      root: ({ theme }) => ({
        '& .MuiDialog-paper': {
-          borderRadius: '10px',
+          borderRadius: (theme.vars || theme).shape.borderRadius,
          border: '1px solid',
          borderColor: (theme.vars || theme).palette.divider,
        },
--- a/src/shared-theme/customizations/inputs.tsx
+++ b/src/shared-theme/customizations/inputs.tsx
@@ -58,31 +58,26 @@ export const inputsCustomizations: Components<Theme> = {
            },
            style: {
              color: 'white',
-              backgroundColor: gray[900],
+              backgroundColor: brand[500],
-              backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`,
+              border: `1px solid ${brand[600]}`,
-              boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`,
+              boxShadow: 'none',
              border: `1px solid ${gray[700]}`,
              '&:hover': {
-                backgroundImage: 'none',
+                backgroundColor: brand[600],
                backgroundColor: gray[700],
                boxShadow: 'none',
              },
              '&:active': {
-                backgroundColor: gray[800],
+                backgroundColor: brand[700],
              },
              ...theme.applyStyles('dark', {
-                color: 'black',
+                color: brand[50],
-                backgroundColor: gray[50],
+                backgroundColor: brand[500],
-                backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`,
+                border: `1px solid ${brand[600]}`,
                boxShadow: 'inset 0 -1px 0  hsl(220, 30%, 80%)',
                border: `1px solid ${gray[50]}`,
                '&:hover': {
-                  backgroundImage: 'none',
+                  backgroundColor: brand[400],
                  backgroundColor: gray[300],
                  boxShadow: 'none',
                },
                '&:active': {
-                  backgroundColor: gray[400],
+                  backgroundColor: brand[300],
                },
              }),
            },
@@ -94,18 +89,28 @@ export const inputsCustomizations: Components<Theme> = {
            },
            style: {
              color: 'white',
-              backgroundColor: brand[300],
+              backgroundColor: gray[900],
-              backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
+              border: `1px solid ${gray[700]}`,
-              boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
+              boxShadow: 'none',
              border: `1px solid ${brand[500]}`,
              '&:hover': {
-                backgroundColor: brand[700],
+                backgroundColor: gray[800],
                boxShadow: 'none',
              },
              '&:active': {
-                backgroundColor: brand[700],
+                backgroundColor: gray[700],
                backgroundImage: 'none',
              },
              ...theme.applyStyles('dark', {
                color: 'black',
                backgroundColor: gray[50],
                border: `1px solid ${gray[300]}`,
                '&:hover': {
                  backgroundColor: gray[200],
                  boxShadow: 'none',
                },
                '&:active': {
                  backgroundColor: gray[300],
                },
              }),
            },
          },
          {
--- a/src/shared-theme/customizations/surfaces.ts
+++ b/src/shared-theme/customizations/surfaces.ts
@@ -36,7 +36,7 @@ export const surfacesCustomizations: Components<Theme> = {
    styleOverrides: {
      root: ({ theme }) => ({
        border: 'none',
-        borderRadius: 8,
+        borderRadius: (theme.vars || theme).shape.borderRadius,
        '&:hover': { backgroundColor: gray[50] },
        '&:focus-visible': { backgroundColor: 'transparent' },
        ...theme.applyStyles('dark', {
--- a/src/shared-theme/themePrimitives.ts
+++ b/src/shared-theme/themePrimitives.ts
@@ -35,32 +35,37 @@ const defaultTheme = createTheme();
 const customShadows: Shadows = [...defaultTheme.shadows];
 /**
 * Stripe-like indigo brand. #635BFF ≈ hsl(243, 76%, 59%).
 * Single brand hue — no multi-colour accents.
 */
 export const brand = {
-  50: 'hsl(210, 100%, 95%)',
+  50: 'hsl(250, 100%, 98%)',
-  100: 'hsl(210, 100%, 92%)',
+  100: 'hsl(250, 95%, 95%)',
-  200: 'hsl(210, 100%, 80%)',
+  200: 'hsl(249, 92%, 90%)',
-  300: 'hsl(210, 100%, 65%)',
+  300: 'hsl(248, 92%, 80%)',
-  400: 'hsl(210, 98%, 48%)',
+  400: 'hsl(245, 90%, 72%)',
-  500: 'hsl(210, 98%, 42%)',
+  500: 'hsl(243, 76%, 59%)',
-  600: 'hsl(210, 98%, 55%)',
+  600: 'hsl(243, 75%, 51%)',
-  700: 'hsl(210, 100%, 35%)',
+  700: 'hsl(243, 78%, 42%)',
-  800: 'hsl(210, 100%, 16%)',
+  800: 'hsl(242, 76%, 30%)',
-  900: 'hsl(210, 100%, 21%)',
+  900: 'hsl(241, 75%, 20%)',
 };
 /** Cool, neutral grays. */
 export const gray = {
  50: 'hsl(220, 35%, 97%)',
  100: 'hsl(220, 30%, 94%)',
-  200: 'hsl(220, 20%, 88%)',
+  200: 'hsl(220, 20%, 89%)',
-  300: 'hsl(220, 20%, 80%)',
+  300: 'hsl(220, 17%, 80%)',
-  400: 'hsl(220, 20%, 65%)',
+  400: 'hsl(220, 15%, 64%)',
-  500: 'hsl(220, 20%, 42%)',
+  500: 'hsl(220, 14%, 45%)',
-  600: 'hsl(220, 20%, 35%)',
+  600: 'hsl(220, 13%, 36%)',
-  700: 'hsl(220, 20%, 25%)',
+  700: 'hsl(220, 13%, 27%)',
-  750: 'hsl(220, 20%, 18%)',
+  750: 'hsl(220, 13%, 20%)',
-  800: 'hsl(220, 30%, 6%)',
+  800: 'hsl(220, 12%, 12%)',
-  850: 'hsl(220, 22%, 11%)',
+  850: 'hsl(220, 10%, 8%)',
-  900: 'hsl(220, 35%, 3%)',
+  900: 'hsl(220, 9%, 6%)',
 };
 export const green = {
@@ -116,27 +121,39 @@ export const getDesignTokens = (mode: PaletteMode) => {
    palette: {
      mode,
      primary: {
-        light: brand[200],
+        light: brand[400],
-        main: brand[400],
+        main: brand[500],
        dark: brand[700],
        contrastText: brand[50],
        ...(mode === 'dark' && {
          contrastText: brand[50],
-          light: 'hsl(210, 50%, 65%)',
+          light: 'hsl(245, 85%, 70%)',
-          main: 'hsl(210, 55%, 55%)',
+          main: 'hsl(243, 76%, 64%)',
-          dark: 'hsl(210, 50%, 35%)',
+          dark: 'hsl(243, 78%, 48%)',
        }),
      },
      secondary: {
        light: gray[300],
        main: gray[600],
        dark: gray[800],
        contrastText: gray[50],
        ...(mode === 'dark' && {
          light: gray[200],
          main: gray[400],
          dark: gray[600],
          contrastText: gray[900],
        }),
      },
      info: {
        light: brand[100],
-        main: brand[300],
+        main: brand[400],
        dark: brand[600],
        contrastText: gray[50],
        ...(mode === 'dark' && {
          contrastText: 'hsl(210, 30%, 80%)',
-          light: 'hsl(210, 40%, 50%)',
+          light: 'hsl(245, 60%, 60%)',
-          main: 'hsl(210, 35%, 40%)',
+          main: 'hsl(243, 55%, 52%)',
-          dark: 'hsl(210, 30%, 25%)',
+          dark: 'hsl(243, 50%, 38%)',
        }),
      },
      warning: {
@@ -174,7 +191,7 @@ export const getDesignTokens = (mode: PaletteMode) => {
      },
      divider: mode === 'dark' ? 'hsla(0, 0%, 100%, 0.08)' : alpha(gray[300], 0.4),
      background: {
-        default: 'hsl(0, 0%, 99%)',
+        default: 'hsl(0, 0%, 100%)',
        paper: 'hsl(220, 35%, 97%)',
        ...(mode === 'dark' && { default: darkBg, paper: darkPaper }),
      },
@@ -208,242 +225,73 @@ export const getDesignTokens = (mode: PaletteMode) => {
    typography: {
      fontFamily: 'Inter, sans-serif',
      h1: {
-        fontSize: defaultTheme.typography.pxToRem(48),
+        fontSize: defaultTheme.typography.pxToRem(40),
        fontWeight: 600,
-        lineHeight: 1.2,
+        lineHeight: 1.1,
-        letterSpacing: -0.5,
+        letterSpacing: '-0.025em',
      },
      h2: {
-        fontSize: defaultTheme.typography.pxToRem(36),
+        fontSize: defaultTheme.typography.pxToRem(32),
        fontWeight: 600,
        lineHeight: 1.2,
        letterSpacing: '-0.02em',
      },
      h3: {
-        fontSize: defaultTheme.typography.pxToRem(30),
+        fontSize: defaultTheme.typography.pxToRem(26),
-        lineHeight: 1.2,
+        fontWeight: 600,
        lineHeight: 1.25,
        letterSpacing: '-0.015em',
      },
      h4: {
-        fontSize: defaultTheme.typography.pxToRem(24),
+        fontSize: defaultTheme.typography.pxToRem(20),
        fontWeight: 600,
        lineHeight: 1.4,
        letterSpacing: '-0.01em',
      },
      h5: {
        fontSize: defaultTheme.typography.pxToRem(18),
        fontWeight: 600,
        lineHeight: 1.4,
        letterSpacing: '-0.005em',
      },
      h6: {
        fontSize: defaultTheme.typography.pxToRem(16),
        fontWeight: 600,
        lineHeight: 1.5,
      },
      h5: {
        fontSize: defaultTheme.typography.pxToRem(20),
        fontWeight: 600,
      },
      h6: {
        fontSize: defaultTheme.typography.pxToRem(18),
        fontWeight: 600,
      },
      subtitle1: {
-        fontSize: defaultTheme.typography.pxToRem(18),
+        fontSize: defaultTheme.typography.pxToRem(16),
        fontWeight: 500,
      },
      subtitle2: {
-        fontSize: defaultTheme.typography.pxToRem(14),
+        fontSize: defaultTheme.typography.pxToRem(13),
        fontWeight: 500,
      },
      body1: {
-        fontSize: defaultTheme.typography.pxToRem(14),
+        fontSize: defaultTheme.typography.pxToRem(15),
        lineHeight: 1.5,
      },
      body2: {
        fontSize: defaultTheme.typography.pxToRem(14),
        fontWeight: 400,
        lineHeight: 1.45,
      },
      caption: {
        fontSize: defaultTheme.typography.pxToRem(12),
        fontWeight: 400,
        lineHeight: 1.4,
      },
      overline: {
        fontSize: defaultTheme.typography.pxToRem(11),
        fontWeight: 600,
        lineHeight: 1.5,
        textTransform: 'uppercase',
        letterSpacing: '0.06em',
      },
    },
    shape: {
-      borderRadius: 8,
+      borderRadius: 6,
    },
    shadows: customShadows,
  };
 };
 export const colorSchemes = {
  light: {
    palette: {
      primary: {
        light: brand[200],
        main: brand[400],
        dark: brand[700],
        contrastText: brand[50],
      },
      info: {
        light: brand[100],
        main: brand[300],
        dark: brand[600],
        contrastText: gray[50],
      },
      warning: {
        light: orange[300],
        main: orange[400],
        dark: orange[800],
      },
      error: {
        light: red[300],
        main: red[400],
        dark: red[800],
      },
      success: {
        light: green[300],
        main: green[400],
        dark: green[800],
      },
      grey: {
        ...gray,
      },
      divider: alpha(gray[300], 0.4),
      background: {
        default: 'hsl(0, 0%, 99%)',
        paper: 'hsl(220, 35%, 97%)',
      },
      text: {
        primary: gray[800],
        secondary: gray[600],
        warning: orange[400],
      },
      action: {
        hover: alpha(gray[200], 0.2),
        selected: `${alpha(gray[200], 0.3)}`,
      },
      flows: {
        outflows: {
          primary: '#d32f2f',
          surface: '#fdecea',
          text: '#b71c1c',
        },
        inflows: {
          primary: '#2e7d32',
          surface: '#e8f5e9',
          text: '#1b5e20',
        },
      },
      baseShadow:
        'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px',
    },
  },
  dark: {
    palette: {
      primary: {
        contrastText: brand[50],
        light: 'hsl(210, 50%, 65%)',
        main: 'hsl(210, 55%, 55%)',
        dark: 'hsl(210, 50%, 35%)',
      },
      info: {
        contrastText: 'hsl(210, 30%, 80%)',
        light: 'hsl(210, 40%, 50%)',
        main: 'hsl(210, 35%, 40%)',
        dark: 'hsl(210, 30%, 25%)',
      },
      warning: {
        light: 'hsl(45, 60%, 55%)',
        main: 'hsl(45, 55%, 45%)',
        dark: 'hsl(45, 50%, 30%)',
      },
      error: {
        light: 'hsl(0, 55%, 60%)',
        main: 'hsl(0, 55%, 50%)',
        dark: 'hsl(0, 50%, 35%)',
      },
      success: {
        light: 'hsl(120, 40%, 55%)',
        main: 'hsl(120, 40%, 45%)',
        dark: 'hsl(120, 35%, 30%)',
      },
      grey: {
        ...gray,
      },
      divider: 'hsla(0, 0%, 100%, 0.08)',
      background: {
        default: darkBg,
        paper: darkPaper,
      },
      text: {
        primary: 'hsl(0, 0%, 92%)',
        secondary: 'hsl(0, 0%, 60%)',
      },
      action: {
        hover: 'hsla(0, 0%, 100%, 0.06)',
        selected: 'hsla(0, 0%, 100%, 0.1)',
      },
      flows: {
        outflows: {
          primary: 'hsl(0, 55%, 60%)',
          surface: 'hsla(0, 35%, 25%, 0.6)',
          text: 'hsl(0, 60%, 80%)',
        },
        inflows: {
          primary: 'hsl(120, 40%, 55%)',
          surface: 'hsla(120, 25%, 22%, 0.6)',
          text: 'hsl(120, 40%, 78%)',
        },
      },
      baseShadow: '0 4px 16px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3)',
    },
  },
 };
 export const typography = {
  fontFamily: 'Inter, sans-serif',
  h1: {
    fontSize: defaultTheme.typography.pxToRem(48),
    fontWeight: 600,
    lineHeight: 1.2,
    letterSpacing: -0.5,
  },
  h2: {
    fontSize: defaultTheme.typography.pxToRem(36),
    fontWeight: 600,
    lineHeight: 1.2,
  },
  h3: {
    fontSize: defaultTheme.typography.pxToRem(30),
    lineHeight: 1.2,
  },
  h4: {
    fontSize: defaultTheme.typography.pxToRem(24),
    fontWeight: 600,
    lineHeight: 1.5,
  },
  h5: {
    fontSize: defaultTheme.typography.pxToRem(20),
    fontWeight: 600,
  },
  h6: {
    fontSize: defaultTheme.typography.pxToRem(18),
    fontWeight: 600,
  },
  subtitle1: {
    fontSize: defaultTheme.typography.pxToRem(18),
  },
  subtitle2: {
    fontSize: defaultTheme.typography.pxToRem(14),
    fontWeight: 500,
  },
  body1: {
    fontSize: defaultTheme.typography.pxToRem(14),
  },
  body2: {
    fontSize: defaultTheme.typography.pxToRem(14),
    fontWeight: 400,
  },
  caption: {
    fontSize: defaultTheme.typography.pxToRem(12),
    fontWeight: 400,
  },
 };
 export const shape = {
  borderRadius: 8,
 };
 // @ts-ignore
 const defaultShadows: Shadows = [
  'none',
  'var(--template-palette-baseShadow)',
  ...defaultTheme.shadows.slice(2),
 ];
 export const shadows = defaultShadows;
--- a/src/ui/EmptyState.tsx
+++ b/src/ui/EmptyState.tsx
@@ -0,0 +1,57 @@
 import * as React from "react";
 import { Box, Typography, Button } from "@mui/material";
 interface EmptyStateProps {
  icon?: React.ReactNode;
  title: string;
  description?: string;
  actionLabel?: string;
  onAction?: () => void;
 }
 export function EmptyState({ icon, title, description, actionLabel, onAction }: EmptyStateProps) {
  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        textAlign: "center",
        py: 6,
        px: 3,
      }}
    >
      {icon && (
        <Box
          sx={{
            width: 48,
            height: 48,
            borderRadius: 2,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            backgroundColor: "action.hover",
            color: "text.secondary",
            mb: 2,
          }}
        >
          {icon}
        </Box>
      )}
      <Typography variant="subtitle1" fontWeight={600} gutterBottom>
        {title}
      </Typography>
      {description && (
        <Typography variant="body2" color="text.secondary" sx={{ maxWidth: 360, lineHeight: 1.6, mb: 2 }}>
          {description}
        </Typography>
      )}
      {actionLabel && onAction && (
        <Button variant="contained" size="small" onClick={onAction} sx={{ mt: 1 }}>
          {actionLabel}
        </Button>
      )}
    </Box>
  );
 }
--- a/src/ui/PageHeader.tsx
+++ b/src/ui/PageHeader.tsx
@@ -0,0 +1,67 @@
 import * as React from "react";
 import { Box, Breadcrumbs, Typography, Link } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import NavigateNextIcon from "@mui/icons-material/NavigateNext";
 export interface Crumb {
  label: string;
  path?: string;
 }
 interface PageHeaderProps {
  crumbs: Crumb[];
  title: string;
  subtitle?: string;
  actions?: React.ReactNode;
 }
 export function PageHeader({ crumbs, title, subtitle, actions }: PageHeaderProps) {
  const navigate = useNavigate();
  return (
    <Box sx={{ mb: 3 }}>
      <Breadcrumbs
        separator={<NavigateNextIcon fontSize="small" sx={{ color: "text.disabled" }} />}
        aria-label="breadcrumb"
        sx={{ mb: 1 }}
      >
        {crumbs.map((crumb, i) => {
          const isLast = i === crumbs.length - 1;
          if (isLast || !crumb.path) {
            return (
              <Typography key={crumb.label} variant="body2" color="text.secondary">
                {crumb.label}
              </Typography>
            );
          }
          return (
            <Link
              key={crumb.label}
              component="button"
              underline="hover"
              color="text.primary"
              onClick={() => navigate(crumb.path!)}
              sx={{ fontWeight: 500, fontSize: "0.875rem" }}
            >
              {crumb.label}
            </Link>
          );
        })}
      </Breadcrumbs>
      <Box sx={{ display: "flex", alignItems: "flex-start", gap: 2, flexWrap: "wrap" }}>
        <Box sx={{ flex: 1, minWidth: 0 }}>
          <Typography variant="h4" fontWeight={700} sx={{ letterSpacing: "-0.02em" }}>
            {title}
          </Typography>
          {subtitle && (
            <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
              {subtitle}
            </Typography>
          )}
        </Box>
        {actions && <Box sx={{ display: "flex", gap: 1, alignItems: "center" }}>{actions}</Box>}
      </Box>
    </Box>
  );
 }
--- a/src/ui/Toast.tsx
+++ b/src/ui/Toast.tsx
@@ -0,0 +1,52 @@
 import * as React from "react";
 import { Snackbar, Alert, AlertColor } from "@mui/material";
 interface ToastState {
  open: boolean;
  message: string;
  severity: AlertColor;
 }
 interface ToastContextValue {
  showToast: (message: string, severity?: AlertColor) => void;
 }
 const ToastContext = React.createContext<ToastContextValue | null>(null);
 export function ToastProvider({ children }: { children: React.ReactNode }) {
  const [toast, setToast] = React.useState<ToastState>({ open: false, message: "", severity: "success" });
  const timerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
  const showToast = React.useCallback((message: string, severity: AlertColor = "success") => {
    if (timerRef.current) clearTimeout(timerRef.current);
    setToast({ open: true, message, severity });
    timerRef.current = setTimeout(() => setToast((t) => ({ ...t, open: false })), 4000);
  }, []);
  const handleClose = (_?: React.SyntheticEvent | Event, reason?: string) => {
    if (reason === "clickaway") return;
    setToast((t) => ({ ...t, open: false }));
  };
  return (
    <ToastContext.Provider value={{ showToast }}>
      {children}
      <Snackbar
        open={toast.open}
        autoHideDuration={4000}
        onClose={handleClose}
        anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
      >
        <Alert severity={toast.severity} onClose={handleClose} sx={{ borderRadius: 2, minWidth: 260 }}>
          {toast.message}
        </Alert>
      </Snackbar>
    </ToastContext.Provider>
  );
 }
 export function useToast(): ToastContextValue {
  const ctx = React.useContext(ToastContext);
  if (!ctx) throw new Error("useToast must be used within a ToastProvider");
  return ctx;
 }
Author	SHA1	Message	Date
Vishesh 'ironeagle' Bangotra	537aef94ff	resolve relative media URLs against the API base in react-openapi - 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	2026-08-18 13:01:55 +05:30
Vishesh 'ironeagle' Bangotra	47d799fe5f	expense list: clickable month pill + fix scroll-to-month - 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	2026-08-17 20:38:28 +05:30
Vishesh 'ironeagle' Bangotra	cc940ee6e3	expense list: split month totals, sticky headers + month pill - 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	2026-08-17 20:15:39 +05:30
Vishesh 'ironeagle' Bangotra	e8c585bdb8	fix expenses grouping to parse occurred_at as DD-MM-YYYY strictly 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	2026-08-17 16:43:46 +05:30
Vishesh 'ironeagle' Bangotra	3dd833ac2b	shared currency field + expenses rendered from react-openapi fields - 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	2026-08-17 16:27:43 +05:30
Vishesh 'ironeagle' Bangotra	d6856a538f	fix expenses list performance + dom nesting - 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	2026-08-17 15:22:37 +05:30
Vishesh 'ironeagle' Bangotra	9808a1f39b	design overhaul + expenses page - 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)	2026-08-17 15:14:57 +05:30