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)
This commit is contained in:
2026-08-17 15:14:57 +05:30
parent 51762f8d18
commit 9808a1f39b
22 changed files with 1567 additions and 790 deletions

View File

@@ -3,17 +3,19 @@
<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>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
</html>

View File

@@ -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,114 +45,200 @@ 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 (
<Box
sx={{
maxWidth: 400,
mx: 'auto',
mt: 8,
p: 4,
borderRadius: 3,
boxShadow: 3,
bgcolor: 'background.paper',
}}
>
<IconButton onClick={onBack} sx={{ mb: 2 }}>
<ArrowBackRoundedIcon />
const validate = (): boolean => {
const next: { username?: string; password?: string } = {};
if (!username.trim()) next.username = "Username is required";
else if (username.trim().length < 3) next.username = "Username must be at least 3 characters";
if (!password) next.password = "Password is required";
else if (password.length < 6) next.password = "Password must be at least 6 characters";
setFieldErrors(next);
return Object.keys(next).length === 0;
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!validate()) return;
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>
{isLogin ? "Sign In" : "Create Account"}
<Typography variant="h4" fontWeight={700} gutterBottom sx={{ letterSpacing: '-0.02em' }}>
{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"
: "Create an account to get started"}
? "Welcome back. Enter your credentials to continue."
: "Start managing your ledger in a few seconds."}
</Typography>
<form onSubmit={handleSubmit}>
<TextField
fullWidth
label="Username"
type="username"
margin="normal"
value={username}
onChange={(e) => setUsername(e.target.value)}
required
autoFocus
/>
<TextField
fullWidth
label="Password"
type="password"
margin="normal"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
<form onSubmit={handleSubmit} noValidate>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
<TextField
fullWidth
label="Username"
type="text"
value={username}
onChange={(e) => {
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={showPassword ? 'text' : 'password'}
value={password}
onChange={(e) => {
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 }}>
{error}
</Typography>
)}
<Button
fullWidth
type="submit"
variant="contained"
color="primary"
sx={{ mt: 3 }}
disabled={loading}
>
{loading ? (
<CircularProgress size={24} color="inherit" />
) : isLogin ? (
"Login"
) : (
"Register"
{error && (
<Typography color="error" variant="body2" sx={{ mt: 0.5 }}>
{error}
</Typography>
)}
</Button>
<Button
fullWidth
type="submit"
variant="contained"
size="large"
sx={{ mt: 1, fontWeight: 600 }}
disabled={loading}
>
{loading ? (
<CircularProgress size={20} color="inherit" />
) : isLogin ? (
"Sign In"
) : (
"Create Account"
)}
</Button>
</Box>
</form>
<Typography
variant="body2"
color="text.secondary"
align="center"
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"}
<Typography variant="body2" color="text.secondary" align="center" sx={{ mt: 3 }}>
{isLogin ? "Don't have an account?" : "Already have an account?"}{' '}
<Link component="button" underline="hover" color="primary" onClick={handleSwitch} sx={{ fontWeight: 600 }}>
{isLogin ? "Register" : "Sign In"}
</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>
);
}

View File

@@ -58,9 +58,14 @@ export function ResourceDetail({ resource, basePath }: ResourceDetailProps) {
if (!data) {
return (
<Typography variant="body1" color="text.secondary" sx={{ py: 4 }}>
Record not found
</Typography>
<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) => {

View File

@@ -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 }}>
{isStreaming ? "Waiting for events\u2026" : "No records found"}
</Typography>
<Box sx={{ py: 5, display: "flex", flexDirection: "column", alignItems: "center", gap: 1 }}>
<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,34 +361,56 @@ 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()}>
{resource.operations.get && !isStreaming && (
<Tooltip title="View">
<IconButton size="small" onClick={() => navigate(`${basePath}/${resource.name}/${rowId}`)}>
<VisibilityIcon fontSize="small" />
</IconButton>
</Tooltip>
)}
{resource.operations.update && (
<Tooltip title="Edit">
<IconButton size="small" onClick={() => navigate(`${basePath}/${resource.name}/${rowId}/edit`)}>
<EditIcon fontSize="small" />
</IconButton>
</Tooltip>
)}
{resource.operations.delete && (
<Tooltip title="Delete">
<IconButton size="small" onClick={() => handleDelete(rowId)} color="error">
<DeleteIcon fontSize="small" />
</IconButton>
</Tooltip>
)}
<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}`)}>
<VisibilityIcon fontSize="small" />
</IconButton>
</Tooltip>
)}
{resource.operations.update && (
<Tooltip title="Edit">
<IconButton size="small" onClick={() => navigate(`${basePath}/${resource.name}/${rowId}/edit`)}>
<EditIcon fontSize="small" />
</IconButton>
</Tooltip>
)}
{resource.operations.delete && (
<Tooltip title="Delete">
<IconButton size="small" onClick={() => handleDelete(rowId)} color="error">
<DeleteIcon fontSize="small" />
</IconButton>
</Tooltip>
)}
</Box>
</TableCell>
)}
</TableRow>

View File

@@ -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`,
"&:hover": { bgcolor: `${colors[i % colors.length]}20` },
bgcolor: "primary.main",
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}

140
src/Expense/Expense.tsx Normal file
View File

@@ -0,0 +1,140 @@
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 } from "../../react-openapi";
import { PageHeader } from "../ui/PageHeader";
import { EmptyState } from "../ui/EmptyState";
import { ExpenseList } from "./ExpenseList";
import { ExpenseItem, formatCurrency, isExpense, monthKey, monthLabel } 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 } = useResource("expenses");
const [items, setItems] = useState<ExpenseItem[] | null>(null);
useEffect(() => {
let mounted = true;
list({ limit: 0 }).then((res) => {
if (mounted) setItems(res.items as ExpenseItem[]);
});
return () => {
mounted = false;
};
}, []);
const sorted = useMemo(
() =>
(items ?? []).sort(
(a, b) => new Date(b.occurred_at ?? 0).getTime() - new Date(a.occurred_at ?? 0).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 now = new Date();
const thisMonth = monthKey(now.toISOString());
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>
<ExpenseList items={sorted} />
</>
)}
</Container>
);
}

View File

@@ -0,0 +1,85 @@
import React from "react";
import { Box, Typography, Chip, Divider } from "@mui/material";
import type { ExpenseItem } from "./types";
import { formatCurrency, formatDate, formatDateTime } from "./types";
function Row({ label, value }: { label: string; value: React.ReactNode }) {
return (
<Box sx={{ display: "flex", gap: 2, alignItems: "baseline", py: 0.75 }}>
<Typography variant="body2" color="text.secondary" sx={{ width: 160, flexShrink: 0 }}>
{label}
</Typography>
<Box sx={{ flex: 1, minWidth: 0 }}>{value}</Box>
</Box>
);
}
export function ExpenseDetail({ item }: { item: ExpenseItem }) {
const account = item.account;
const tags = item.tags ?? [];
const last4 = account?.number ? `…${account.number.slice(-4)}` : "";
return (
<Box sx={{ pt: 1, pb: 0.5 }}>
<Divider sx={{ mb: 1.5 }} />
<Row
label="Amount"
value={
<Typography variant="body2" fontWeight={600}>
{formatCurrency(item.amount, account?.currency)}
</Typography>
}
/>
<Row
label="Account"
value={
<Typography variant="body2">
{account ? `${account.name}${last4 ? ` (${last4})` : ""}` : "—"}
{account?.type && (
<Chip
size="small"
label={account.type.replace(/_/g, " ")}
variant="outlined"
sx={{ ml: 1.5, fontSize: 11, height: 20 }}
/>
)}
</Typography>
}
/>
<Row
label="Tags"
value={
tags.length > 0 ? (
<Box sx={{ display: "flex", gap: 0.75, flexWrap: "wrap" }}>
{tags.map((tag, i) => (
<Chip
key={`${tag.name}-${i}`}
size="small"
label={`${tag.icon ?? ""} ${tag.name ?? ""}`.trim()}
sx={{ fontSize: 12, height: 24 }}
/>
))}
</Box>
) : (
<Typography variant="body2" color="text.disabled">
No tags
</Typography>
)
}
/>
<Row label="Date" value={<Typography variant="body2">{formatDate(item.occurred_at)}</Typography>} />
<Row
label="Transaction ID"
value={
<Typography variant="body2" sx={{ fontFamily: "monospace", fontSize: "0.8125rem" }}>
{item.id}
</Typography>
}
/>
<Row
label="Created"
value={<Typography variant="body2" color="text.secondary">{formatDateTime(item.created_at)}</Typography>}
/>
</Box>
);
}

173
src/Expense/ExpenseList.tsx Normal file
View File

@@ -0,0 +1,173 @@
import React, { useState } from "react";
import {
Box,
Paper,
Typography,
Accordion,
AccordionSummary,
AccordionDetails,
Avatar,
Chip,
useTheme,
} from "@mui/material";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import type { ExpenseItem } from "./types";
import { formatCurrency, formatDate, isExpense, monthKey, monthLabel } from "./types";
import { ExpenseDetail } from "./ExpenseDetail";
interface GroupedMonth {
key: string;
items: ExpenseItem[];
total: 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) => new Date(b.occurred_at ?? 0).getTime() - new Date(a.occurred_at ?? 0).getTime(),
);
const currency = sorted.find((it) => it.account?.currency)?.account?.currency ?? "INR";
const total = sorted.reduce((sum, it) => sum + (it.amount ?? 0), 0);
return { key, items: sorted, total, currency };
})
.sort((a, b) => b.key.localeCompare(a.key));
}
function EntityAvatar({ entity }: { entity: ExpenseItem["entity"] }) {
const theme = useTheme();
const name = entity?.name ?? "?";
const letter = name.trim().charAt(0).toUpperCase() || "?";
const logo = entity?.logo;
const isImage = typeof logo === "string" && (logo.startsWith("http") || logo.startsWith("data:"));
return (
<Avatar
src={isImage ? logo : undefined}
sx={{
width: 36,
height: 36,
fontSize: 15,
fontWeight: 700,
bgcolor: theme.palette.primary.main,
color: theme.palette.primary.contrastText,
borderRadius: 2,
}}
>
{letter}
</Avatar>
);
}
export function ExpenseList({ items }: { items: ExpenseItem[] }) {
const [expandedId, setExpandedId] = useState<string | null>(null);
const groups = groupByMonth(items);
return (
<Box sx={{ display: "flex", flexDirection: "column", gap: 4 }}>
{groups.map((group) => (
<Box key={group.key}>
<Box sx={{ display: "flex", alignItems: "baseline", gap: 1.5, mb: 1.5 }}>
<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={600}>
{formatCurrency(group.total, group.currency)}
</Typography>
</Box>
<Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
{group.items.map((item) => {
const negative = isExpense(item);
const currency = item.account?.currency ?? group.currency;
return (
<Accordion
key={item.id}
disableGutters
expanded={expandedId === item.id}
onChange={(_, expanded) => setExpandedId(expanded ? item.id : null)}
sx={{
border: "1px solid",
borderColor: expandedId === item.id ? "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,
},
}}
>
<EntityAvatar entity={item.entity} />
<Box sx={{ flex: 1, minWidth: 0 }}>
<Typography
variant="body1"
fontWeight={600}
noWrap
sx={{ fontSize: "0.9375rem", lineHeight: 1.3 }}
>
{item.entity?.name ?? "Unknown"}
</Typography>
<Box sx={{ display: "flex", alignItems: "center", gap: 1, mt: 0.25 }}>
<Typography variant="caption" color="text.secondary">
{formatDate(item.occurred_at)}
</Typography>
{item.account?.name && (
<Chip
size="small"
label={item.account.name}
variant="outlined"
sx={{ height: 20, fontSize: 11, "& .MuiChip-label": { px: 1 } }}
/>
)}
</Box>
</Box>
<Typography
variant="body1"
fontWeight={700}
sx={{
fontSize: "0.9375rem",
fontVariantNumeric: "tabular-nums",
color: negative ? "error.main" : "success.main",
flexShrink: 0,
}}
>
{formatCurrency(item.amount, currency)}
</Typography>
</AccordionSummary>
<AccordionDetails sx={{ pt: 0 }}>
<ExpenseDetail item={item} />
</AccordionDetails>
</Accordion>
);
})}
</Box>
</Box>
))}
</Box>
);
}
export { groupByMonth };

61
src/Expense/types.ts Normal file
View File

@@ -0,0 +1,61 @@
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 function isExpense(item: ExpenseItem): boolean {
return (item.amount ?? 0) < 0;
}
export function formatCurrency(amount: number, currency?: string): string {
const code = currency && ["INR", "USD", "EUR", "GBP", "AED", "SGD"].includes(currency) ? currency : "INR";
try {
return new Intl.NumberFormat("en-IN", {
style: "currency",
currency: code,
maximumFractionDigits: 2,
}).format(amount);
} catch {
return `₹${amount.toFixed(2)}`;
}
}
export function formatDate(iso?: string): string {
if (!iso) return "—";
const d = new Date(iso);
if (Number.isNaN(d.getTime())) return "—";
return d.toLocaleDateString("en-IN", { day: "numeric", month: "short", year: "numeric" });
}
export function formatDateTime(iso?: string): string {
if (!iso) return "—";
const d = new Date(iso);
if (Number.isNaN(d.getTime())) return "—";
return d.toLocaleString("en-IN", {
day: "numeric",
month: "short",
year: "numeric",
hour: "numeric",
minute: "2-digit",
});
}
export function monthKey(iso?: string): string {
if (!iso) return "unknown";
const d = new Date(iso);
if (Number.isNaN(d.getTime())) return "unknown";
return `${d.getFullYear()}-${String(d.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" });
}

View File

@@ -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 }}>
<CircularProgress size={24} />
<Box sx={{ display: "flex", justifyContent: "center", py: 6 }}>
<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>
Fetch Requests
</Typography>
<PageHeader
crumbs={[{ label: "Home", path: "/" }, { label: "Fetch Requests" }]}
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" } }}>
<Box sx={{ ml: 0.5, mb: 2.5 }}>
<Typography variant="subtitle1" fontWeight={700}>
New Fetch Request
</Typography>
</Box>
<Paper
id="new-fetch-request"
variant="outlined"
sx={{ p: 3, mb: 4, borderRadius: 3 }}
>
<Typography variant="subtitle1" fontWeight={700} gutterBottom>
New Fetch Request
</Typography>
<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>
)}

View File

@@ -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 }}>
Back
</Button>
<PageHeader
crumbs={[{ label: "Home", path: "/" }, { label: "Fetch Requests", path: "/fetch-requests" }, { label: "Details" }]}
title="Fetch Request"
/>
<Alert severity="error">Failed to load fetch request</Alert>
</Container>
);
}
return (
<Container sx={{ mt: 4, mb: 4 }}>
<Button startIcon={<ArrowBackIcon />} onClick={() => navigate("/fetch-requests")} sx={{ mb: 2 }}>
Back to Fetch Requests
</Button>
<Container maxWidth="lg" sx={{ py: 4 }}>
<PageHeader
crumbs={[{ label: "Home", path: "/" }, { label: "Fetch Requests", path: "/fetch-requests" }, { label: displayTitle }]}
title={displayTitle}
subtitle="Live pipeline status, progress events, and ambiguity resolution for this import."
/>
<Paper sx={{ p: 3, borderRadius: 4, mb: 3 }} variant="outlined">
<Box sx={{ display: "flex", alignItems: "center", gap: 2, mb: 2, flexWrap: "wrap" }}>
<Section
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">
<Box sx={{ display: "flex", alignItems: "center", gap: 1, p: 2, pb: 0 }}>
<Typography variant="subtitle1" fontWeight={600} sx={{ flex: 1 }}>
Progress Events
</Typography>
<Box
sx={{
width: 10,
height: 10,
borderRadius: "50%",
bgcolor: sseConnected ? "success.main" : "error.main",
flexShrink: 0,
}}
/>
<Typography variant="caption" color="text.secondary">
{sseConnected ? "Connected" : "Disconnected"}
</Typography>
</Box>
<Section
title="Progress Events"
action={
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
<Box
sx={{
width: 8,
height: 8,
borderRadius: "50%",
bgcolor: sseConnected ? "success.main" : "error.main",
}}
/>
<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>
);
}

View File

@@ -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
position="fixed"
color="default"
<Box
component="footer"
sx={{
top: 'auto',
bottom: 0,
backdropFilter: 'blur(8px)',
boxShadow: 'none',
borderTop: '1px solid',
borderColor: 'divider',
py: 3,
mt: 'auto',
}}
>
<Toolbar>
<React.Fragment>
<Container
sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: { xs: 2, sm: 4 },
textAlign: { sm: 'center', md: 'left' },
}}
>
<Copyright />
</Container>
</React.Fragment>
</Toolbar>
</AppBar>
<Container
maxWidth="lg"
sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
gap: 2,
flexWrap: 'wrap',
}}
>
<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>
</Box>
);
}
}

View File

@@ -1,8 +1,5 @@
import * as React from "react";
import {
useLocation,
matchPath
} from "react-router-dom";
import { useLocation, matchPath, useNavigate } 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,134 +31,260 @@ interface HeaderProps {
onDrawerToggle?: () => void;
}
export default function Header({
routerMapping,
onDrawerToggle,
}: HeaderProps) {
const location = useLocation();
const matchedRoute = routerMapping.find((route) =>
matchPath({ path: route.path, end: false }, location.pathname)
);
const headerTitle = matchedRoute?.headerTitle ?? "Khata";
const NAV_LINKS = [
{ label: "Home", path: "/" },
{ label: "Expenses", path: "/expenses" },
{ label: "Fetch Requests", path: "/fetch-requests" },
];
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 (
<AppBar
position="fixed"
color="default"
const navContent = (
<Box
sx={{
zIndex: (theme) => theme.zIndex.drawer + 1,
backdropFilter: "blur(8px)",
boxShadow: "none",
borderBottom: "1px solid",
borderColor: "divider",
display: { xs: "none", md: "flex" },
alignItems: "center",
gap: 0.5,
ml: 3,
}}
>
<Toolbar>
{/* MOBILE MENU BUTTON */}
{isMobile && onDrawerToggle && (
<IconButton
{NAV_LINKS.map((link) => {
const active = isActive(link.path, location.pathname);
return (
<Button
key={link.path}
color="inherit"
edge="start"
onClick={onDrawerToggle}
sx={{ mr: 2 }}
onClick={() => navigate(link.path)}
sx={{
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" },
}}
>
<MenuIcon />
</IconButton>
)}
{link.label}
</Button>
);
})}
</Box>
);
{/* 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: 1,
}}
>
{[
{ label: "Fetch", path: "/fetch-requests" },
].map(({ label, path }) => (
<Button
key={path}
color="inherit"
onClick={() => navigate(path)}
sx={{ textTransform: "none", fontWeight: 500, px: 1.5 }}
size="small"
>
{label}
</Button>
))}
</Box>
{/* AUTH SECTION */}
{isAuthenticated ? (
<>
<Box
sx={{
display: { xs: "none", sm: "flex" },
alignItems: "center",
mr: 2,
}}
>
<Button
color="inherit"
onClick={() => navigate("/admin")}
sx={{ textTransform: "none", fontWeight: 500 }}
>
Admin
</Button>
<Button
color="inherit"
onClick={() => navigate("/profile/me")}
sx={{ textTransform: "none", fontWeight: 500 }}
>
{currentUser.username}
</Button>
</Box>
<Tooltip title="Logout">
<IconButton color="inherit" onClick={logout}>
<LogoutIcon />
</IconButton>
</Tooltip>
</>
) : (
const authSection = (
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
{isAuthenticated ? (
<>
<Button
color="inherit"
variant="outlined"
onClick={() => navigate("/login")}
sx={{ textTransform: "none" }}
onClick={() => navigate("/admin")}
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" },
}}
>
Login
Admin
</Button>
)}
</Toolbar>
</AppBar>
<Button
color="inherit"
onClick={() => navigate("/profile/me")}
sx={{ textTransform: "none", fontWeight: 500 }}
>
{currentUser.username}
</Button>
<Tooltip title="Logout">
<IconButton color="inherit" onClick={logout} aria-label="Logout">
<LogoutIcon />
</IconButton>
</Tooltip>
</>
) : (
<Button
color="inherit"
variant="outlined"
onClick={() => navigate("/login")}
sx={{ textTransform: "none" }}
>
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>
);
}

View File

@@ -1,11 +1,11 @@
import * as React from "react";
import { Box, Typography, Button, Container, Grid, Paper, Chip } from "@mui/material";
import { useTheme, alpha } from "@mui/material/styles";
import { Box, Typography, Button, Container, Grid, Paper, alpha } from "@mui/material";
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 SettingsIcon from "@mui/icons-material/Settings";
import AccountBalanceWalletIcon from "@mui/icons-material/AccountBalanceWallet";
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,206 +33,154 @@ function FeatureCard({ icon, title, description, path, label, accent }: FeatureC
height: "100%",
display: "flex",
flexDirection: "column",
position: "relative",
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",
},
transition: "border-color 180ms ease, box-shadow 180ms ease, transform 180ms 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,
height: 40,
borderRadius: 2,
display: "flex",
alignItems: "center",
justifyContent: "center",
background: alpha(accent, 0.12),
color: accent,
}}
>
{icon}
</Box>
<Typography variant="subtitle1" fontWeight={700}>
{title}
</Typography>
<Box
sx={{
width: 40,
height: 40,
borderRadius: 2,
display: "flex",
alignItems: "center",
justifyContent: "center",
backgroundColor: "action.hover",
color: "primary.main",
mb: 2,
}}
>
{icon}
</Box>
<Typography variant="subtitle1" fontWeight={600} sx={{ mb: 0.75 }}>
{title}
</Typography>
<Typography variant="body2" color="text.secondary" sx={{ flex: 1, lineHeight: 1.6 }}>
{description}
</Typography>
{label && (
<Chip
label={label}
size="small"
variant="outlined"
sx={{ mt: 2, alignSelf: "flex-start", textTransform: "capitalize" }}
/>
)}
<Box
className="feature-arrow"
sx={{
mt: 2,
display: "flex",
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 />,
title: "Dashboard",
description: "Visualise inflows and outflows with interactive charts, drill into categories, and track trends over daily, weekly, and monthly periods.",
path: "/dashboard",
accent: theme.palette.mode === "dark" ? "#818cf8" : "#6366f1",
icon: <ReceiptLongIcon />,
title: "Expenses",
description:
"Browse every transaction imported from your accounts — grouped by month, with entity, account, tags, and amount at a glance.",
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 />,
title: "Report Snapshots",
description: "Generate cached report snapshots with custom filters — accounts, date ranges, amount bounds — then pin a snapshot on the dashboard for consistent comparisons.",
path: "/reports",
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.",
icon: <AccountBalanceWalletIcon />,
title: "Accounts & Entities",
description:
"Manage your accounts, expenses, tags, and payors through the OpenAPI-driven admin panel with full CRUD and server-side filters.",
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
sx={{
minHeight: "calc(100vh - 64px)",
display: "flex",
flexDirection: "column",
position: "relative",
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,
}}
>
<Box sx={{ width: "100%" }}>
<Container maxWidth="lg" sx={{ py: { xs: 6, md: 10 } }}>
<Box sx={{ maxWidth: 680, mx: { xs: "auto", md: 0 }, textAlign: { xs: "center", md: "left" } }}>
<Typography
variant="overline"
sx={{ color: "primary.main", mb: 1.5, display: "block", fontWeight: 700 }}
>
Khata · Financial Ledger
</Typography>
<Typography
variant="h1"
sx={{
fontWeight: 800,
fontSize: { xs: "2.5rem", sm: "3.5rem", md: "5rem" },
background: "linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)",
WebkitBackgroundClip: "text",
WebkitTextFillColor: "transparent",
color: "text.primary",
fontSize: { xs: "2.25rem", md: "3.25rem" },
letterSpacing: "-0.03em",
mb: 2,
}}
>
Welcome to Khata
Your intelligent, extensible financial ledger.
</Typography>
<Typography
variant="h6"
variant="body1"
color="text.secondary"
sx={{
maxWidth: 580,
mx: "auto",
lineHeight: 1.7,
fontWeight: 400,
fontSize: { xs: "1rem", md: "1.15rem" },
}}
sx={{ maxWidth: 540, lineHeight: 1.7, fontSize: "1.0625rem" }}
>
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")}
sx={{
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)}`,
},
}}
onClick={() => navigate(currentUser ? "/fetch-requests" : "/login")}
sx={{ px: 3.5, py: 1.4, fontWeight: 600 }}
>
Enter Dashboard
{currentUser ? "Enter App" : "Get Started"}
</Button>
<Button
variant="outlined"
size="large"
onClick={() => navigate("/fetch-requests")}
sx={{
px: 4,
py: 1.4,
borderRadius: "50px",
fontWeight: 600,
borderWidth: 2,
"&:hover": { borderWidth: 2 },
}}
sx={{ px: 3.5, py: 1.4, fontWeight: 600 }}
>
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} />

View File

@@ -5,22 +5,25 @@ import {
BrowserRouter,
Routes,
Route,
useNavigate
useNavigate,
useLocation,
matchPath
} from "react-router-dom";
import {
Box,
CssBaseline,
CircularProgress,
Toolbar
CircularProgress
} 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,23 +111,37 @@ function AppContent() {
<AuthProvider authConfig={authConfig} onUnauthorized={() => navigate("/login")}>
<AppTheme>
<CssBaseline enableColorScheme />
<Header routerMapping={routerMapping} />
<ToastProvider>
<Box sx={{ display: "flex", flexDirection: "column", minHeight: "100vh" }}>
<Header routerMapping={routerMapping} />
<Box sx={{ pb: 8 }}>
<Toolbar />
<Box
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
key={path}
path={path}
element={<Component basePath={path.replace(/\/\*$/, "")} />}
/>
))}
</Routes>
</Box>
<Routes>
{routerMapping.map(({ path, component: Component }) => (
<Route
key={path}
path={path}
element={<Component basePath={path.replace(/\/\*$/, "")} />}
/>
))}
</Routes>
</Box>
<Footer />
<Footer />
</Box>
</ToastProvider>
</AppTheme>
</AuthProvider>
);

View File

@@ -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,
backgroundColor: orange[100],
color: (theme.vars || theme).palette.text.primary,
border: `1px solid ${alpha(orange[300], 0.5)}`,
'& .MuiAlert-icon': {
color: orange[500],
},
borderRadius: (theme.vars || theme).shape.borderRadius,
...theme.applyStyles('dark', {
backgroundColor: alpha(orange[900], 0.35),
border: `1px solid ${alpha(orange[800], 0.3)}`,
backgroundColor: alpha((theme.vars || theme).palette.background.paper, 0.6),
}),
}),
},
@@ -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,
},

View File

@@ -58,31 +58,26 @@ export const inputsCustomizations: Components<Theme> = {
},
style: {
color: 'white',
backgroundColor: gray[900],
backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`,
boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`,
border: `1px solid ${gray[700]}`,
backgroundColor: brand[500],
border: `1px solid ${brand[600]}`,
boxShadow: 'none',
'&:hover': {
backgroundImage: 'none',
backgroundColor: gray[700],
backgroundColor: brand[600],
boxShadow: 'none',
},
'&:active': {
backgroundColor: gray[800],
backgroundColor: brand[700],
},
...theme.applyStyles('dark', {
color: 'black',
backgroundColor: gray[50],
backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`,
boxShadow: 'inset 0 -1px 0 hsl(220, 30%, 80%)',
border: `1px solid ${gray[50]}`,
color: brand[50],
backgroundColor: brand[500],
border: `1px solid ${brand[600]}`,
'&:hover': {
backgroundImage: 'none',
backgroundColor: gray[300],
backgroundColor: brand[400],
boxShadow: 'none',
},
'&:active': {
backgroundColor: gray[400],
backgroundColor: brand[300],
},
}),
},
@@ -94,18 +89,28 @@ export const inputsCustomizations: Components<Theme> = {
},
style: {
color: 'white',
backgroundColor: brand[300],
backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
border: `1px solid ${brand[500]}`,
backgroundColor: gray[900],
border: `1px solid ${gray[700]}`,
boxShadow: 'none',
'&:hover': {
backgroundColor: brand[700],
backgroundColor: gray[800],
boxShadow: 'none',
},
'&:active': {
backgroundColor: brand[700],
backgroundImage: 'none',
backgroundColor: gray[700],
},
...theme.applyStyles('dark', {
color: 'black',
backgroundColor: gray[50],
border: `1px solid ${gray[300]}`,
'&:hover': {
backgroundColor: gray[200],
boxShadow: 'none',
},
'&:active': {
backgroundColor: gray[300],
},
}),
},
},
{

View File

@@ -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', {

View File

@@ -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%)',
100: 'hsl(210, 100%, 92%)',
200: 'hsl(210, 100%, 80%)',
300: 'hsl(210, 100%, 65%)',
400: 'hsl(210, 98%, 48%)',
500: 'hsl(210, 98%, 42%)',
600: 'hsl(210, 98%, 55%)',
700: 'hsl(210, 100%, 35%)',
800: 'hsl(210, 100%, 16%)',
900: 'hsl(210, 100%, 21%)',
50: 'hsl(250, 100%, 98%)',
100: 'hsl(250, 95%, 95%)',
200: 'hsl(249, 92%, 90%)',
300: 'hsl(248, 92%, 80%)',
400: 'hsl(245, 90%, 72%)',
500: 'hsl(243, 76%, 59%)',
600: 'hsl(243, 75%, 51%)',
700: 'hsl(243, 78%, 42%)',
800: 'hsl(242, 76%, 30%)',
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%)',
300: 'hsl(220, 20%, 80%)',
400: 'hsl(220, 20%, 65%)',
500: 'hsl(220, 20%, 42%)',
600: 'hsl(220, 20%, 35%)',
700: 'hsl(220, 20%, 25%)',
750: 'hsl(220, 20%, 18%)',
800: 'hsl(220, 30%, 6%)',
850: 'hsl(220, 22%, 11%)',
900: 'hsl(220, 35%, 3%)',
200: 'hsl(220, 20%, 89%)',
300: 'hsl(220, 17%, 80%)',
400: 'hsl(220, 15%, 64%)',
500: 'hsl(220, 14%, 45%)',
600: 'hsl(220, 13%, 36%)',
700: 'hsl(220, 13%, 27%)',
750: 'hsl(220, 13%, 20%)',
800: 'hsl(220, 12%, 12%)',
850: 'hsl(220, 10%, 8%)',
900: 'hsl(220, 9%, 6%)',
};
export const green = {
@@ -116,27 +121,39 @@ export const getDesignTokens = (mode: PaletteMode) => {
palette: {
mode,
primary: {
light: brand[200],
main: brand[400],
light: brand[400],
main: brand[500],
dark: brand[700],
contrastText: brand[50],
...(mode === 'dark' && {
contrastText: brand[50],
light: 'hsl(210, 50%, 65%)',
main: 'hsl(210, 55%, 55%)',
dark: 'hsl(210, 50%, 35%)',
light: 'hsl(245, 85%, 70%)',
main: 'hsl(243, 76%, 64%)',
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%)',
main: 'hsl(210, 35%, 40%)',
dark: 'hsl(210, 30%, 25%)',
light: 'hsl(245, 60%, 60%)',
main: 'hsl(243, 55%, 52%)',
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,
letterSpacing: -0.5,
lineHeight: 1.1,
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),
lineHeight: 1.2,
fontSize: defaultTheme.typography.pxToRem(26),
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;
};

57
src/ui/EmptyState.tsx Normal file
View File

@@ -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>
);
}

67
src/ui/PageHeader.tsx Normal file
View File

@@ -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>
);
}

52
src/ui/Toast.tsx Normal file
View File

@@ -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;
}