## Title Stripe-style UI overhaul + Expenses feed with month grouping ## Summary Rework the khata-ui frontend to a Stripe-grade design system and add a rich, monthly-grouped Expenses experience driven by react-openapi's shared, spec-configured field renderers. ## Highlights ### Design overhaul - New design system: single indigo (#635BFF), 6px radius, Inter type scale, streamlined surfaces/inputs/feedback tokens - Sticky app bar with brand-left header + inline footer, route titles - Split-panel auth pages, Stripe-style Home hero + feature cards - Toast provider + shared PageHeader/EmptyState UI primitives - Admin polish: right-aligned numerics, row-hover actions, skeletons, richer empty states, breadcrumbed fetch-request flows ### Expenses page - Monthly grouped feed with stat cards (total spent / this month / income) - Month cards as single-open accordions with red-spent / green-income totals - Flat transaction rows: logo, name/date, account, amount (no accordion) - Floating month–year selector pill (scroll-spy) that expands + scrolls to the selected month - Strict DD-MM-YYYY date parsing (day-first), no format guessing ### Shared react-openapi fields - New `CurrencyField` + `formatCurrency` (cached Intl, sign-colored, sign-less amounts; form editing reuses NumberField) - `resourceConfig.fieldTypes` override mechanism (amount → currency) - Expenses page rendered via ListCellRenderer / DetailFieldRenderer / applyDisplayFormat — zero custom field renderers - `resolveMediaUrl` resolves relative `/uploads/...` against the API base for every image field (Admin + Expenses logos) ### Fixes - Perf: memoized rows, formatter caches, single-open accordions — cuts slow-click INP and DOM-nesting warnings - Removed unused @mui/x-data-grid@7, which hoisted @mui/system@7 and crashed Box/createTheme at runtime (v5/v7 mix) ## Commits (10) -9808a1fdesign overhaul + expenses page -d6856a5fix expenses list performance + dom nesting -3dd833ashared currency field + expenses rendered from react-openapi fields -e8c585bfix expenses grouping to parse occurred_at as DD-MM-YYYY strictly -cc940eeexpense list: split month totals, sticky headers + month pill -47d799fexpense list: clickable month pill + fix scroll-to-month -537aef9resolve relative media URLs against the API base in react-openapi -8e9a13dexpense list: replace accordion with flat Stripe-style rows -62dd06cexpense list: month accordions + month-year selector; drop unused x-data-grid -806bd42dropped amount sign from CurrencyField.tsx Reviewed-on: #15 Co-authored-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com> Co-committed-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
138 lines
3.0 KiB
TypeScript
138 lines
3.0 KiB
TypeScript
export type FilterMode = "client" | "server";
|
|
|
|
export interface ResourceConfiguration {
|
|
filterOptions?: {
|
|
mode?: FilterMode;
|
|
};
|
|
/** Map of field name → uiType override (e.g. { amount: "currency" }). */
|
|
fieldTypes?: Record<string, string>;
|
|
}
|
|
|
|
export interface ProfileComponents {
|
|
create?: React.ComponentType<any>;
|
|
edit?: React.ComponentType<any>;
|
|
view?: React.ComponentType<any>;
|
|
}
|
|
|
|
export interface SpecConfiguration {
|
|
specUrl: string;
|
|
baseApiUrl?: string;
|
|
title?: string;
|
|
getToken?: () => string | null;
|
|
resourceConfig?: Record<string, ResourceConfiguration>;
|
|
profileComponents?: ProfileComponents;
|
|
}
|
|
|
|
/** Auth server config extracted from securitySchemes extensions. */
|
|
export interface AuthConfig {
|
|
serverUrl: string;
|
|
loginPath: string;
|
|
registerPath: string;
|
|
logoutPath: string;
|
|
mePath: string;
|
|
introspectPath: string;
|
|
}
|
|
|
|
/** Represents a single operation marked with `x-profile: true` in the spec. */
|
|
export interface ProfileOperation {
|
|
path: string;
|
|
method: string;
|
|
operationId: string;
|
|
summary?: string;
|
|
}
|
|
|
|
export interface ValidationMessage {
|
|
type: "error" | "warning" | "info";
|
|
message: string;
|
|
}
|
|
|
|
export interface ResourceRelationship {
|
|
fieldName: string;
|
|
config: FKFieldConfig;
|
|
targetSchemaName: string;
|
|
}
|
|
|
|
export interface ResourceConfig {
|
|
name: string;
|
|
schemaName: string;
|
|
displayName: string;
|
|
path: string;
|
|
primaryKey: string;
|
|
displayFormat: string;
|
|
listColumns: string[];
|
|
fields: FieldConfig[];
|
|
orderedFields: FieldConfig[];
|
|
operations: {
|
|
list: boolean;
|
|
get: boolean;
|
|
create: boolean;
|
|
update: boolean;
|
|
patch: boolean;
|
|
delete: boolean;
|
|
};
|
|
updateMethod: "put" | "patch";
|
|
pagination: {
|
|
limitParam: string;
|
|
offsetParam: string;
|
|
defaultLimit: number;
|
|
} | null;
|
|
relationships: ResourceRelationship[];
|
|
streaming?: boolean;
|
|
parent?: { resource: string; pathParam: string };
|
|
subResources?: string[];
|
|
}
|
|
|
|
export interface FKFieldConfig {
|
|
resource: string;
|
|
prefetch: boolean;
|
|
}
|
|
|
|
export interface OneOfOption {
|
|
value: string;
|
|
label: string;
|
|
fields: FieldConfig[];
|
|
}
|
|
|
|
export interface FieldConfig {
|
|
name: string;
|
|
label: string;
|
|
description: string;
|
|
type: string;
|
|
format?: string;
|
|
order: number;
|
|
hidden: { form?: boolean; list?: boolean; detail?: boolean };
|
|
filterable: boolean;
|
|
sortable: boolean;
|
|
readOnly: boolean;
|
|
required: boolean;
|
|
enumValues?: string[];
|
|
fk?: FKFieldConfig;
|
|
uiType?: string;
|
|
uploadUrl?: string;
|
|
upload?: { type: string; url: string };
|
|
refSchema?: string;
|
|
inlineDisplayFormat?: string;
|
|
isArray: boolean;
|
|
oneOfOptions?: OneOfOption[];
|
|
discriminatorProperty?: string;
|
|
autocomplete?: "text" | "token" | "email" | "phone";
|
|
}
|
|
|
|
export interface OpenApiSpec {
|
|
openapi: string;
|
|
info: {
|
|
title: string;
|
|
version: string;
|
|
};
|
|
servers?: { url: string }[];
|
|
components?: {
|
|
schemas?: Record<string, any>;
|
|
};
|
|
paths?: Record<string, any>;
|
|
}
|
|
|
|
export interface ParsedListResponse {
|
|
total?: number;
|
|
items?: any[];
|
|
}
|