apps/khata-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

major refactor of the dashboard and react-openapi integration (#1)

Browse Source 
## Summary

This MR introduces a major refactor of the dashboard and react-openapi integration, focusing on configurability, separation of concerns, and improved extensibility.

---

## Key Changes

### 1. OpenAPI / Admin Refactor

* Extracted `ConfigContext` into a dedicated provider.
* Introduced `AppProvider` to encapsulate:

  * Config loading
  * API client initialization
  * React Query setup
* Removed internal `QueryClientProvider` from `Admin` for better composability.
* `Admin` now supports both:

  * Standalone usage
  * Nested usage inside an existing provider

### 2. Resource System Improvements

* Added `hidden` flag to `ResourceConfig` and overrides.
* Admin UI now filters out hidden resources.
* Added `useResourceByName` helper for dynamic resource access.
* Improved `useResource`:

  * Handles undefined config safely
  * Adds guards for missing endpoints
  * Disables queries when endpoint is absent

### 3. API Client Enhancements

* Added custom `paramsSerializer`:

  * Serializes arrays without `[]`
  * Ensures backend-compatible query formats

### 4. Dashboard Architecture Overhaul

* Replaced hardcoded dashboard with **config-driven system**:

  * Introduced `ConfigurableDashboard`
  * Dashboard sections defined via config
* New state model:

  * `mode` (expense/income)
  * `periodType` (rolling/calendar)
  * `comparison`
  * `selectedPeriodId`

### 5. Component Refactor (View / Logic Split)

* Split major components into:

  * `.tsx` (logic/controller)
  * `.view.tsx` (presentation)
  * `.models.ts` (types)
* Applied to:

  * Dashboard
  * HistoryChart
  * ProgressCard
  * LatestItems

### 6. HistoryChart Redesign

* Fully rebuilt using report-driven data
* Supports:

  * Weekly / Monthly / Yearly / FY / Full views
  * Rolling vs Calendar periods
  * Comparison mode (auto-aligned offsets)
* Introduced:

  * Bucket merging logic
  * Dynamic comparison attachment

### 7. Reporting Integration

* Dashboard now powered by:

  * `useReport`
  * `prepareReport`
* Removes need for multiple manual API calls

### 8. UI / UX Improvements

* Theme-aware color system
* Dynamic accent colors per mode
* Cleaner layout using section-based rendering
* Improved selection and interaction in charts

### 9. Cleanup & Removals

* Removed legacy components:

  * Old `HistoryChart`
  * Old `ProgressCard`
* Simplified Header layout spacing

---

## Behavior Changes

* Hidden resources are no longer visible in Admin UI.
* Dashboard is now entirely configuration-driven.
* API query params for arrays no longer use `[]`.
* Resource hooks no longer crash on missing config.

---

## Risks / Considerations

* Dashboard depends on correct configuration structure.
* Hidden flag may unintentionally hide resources if misconfigured.
* Query param serialization change must align with backend expectations.

---

## Follow-ups

* Add typing improvements to remove `@ts-ignore` in `GenericForm`.
* Extend dashboard config with more reusable section presets.
* Add tests for report aggregation and comparison logic.

---

Reviewed-on: #1
Co-authored-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
Co-committed-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
This commit is contained in:
Vishesh 'ironeagle' Bangotra
2026-05-07 11:00:54 +00:00
committed by aetos
parent b1db439dda
commit 009ab50b47
45 changed files with 1600 additions and 1099 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/components/Dashboard/Dashboard.models.ts Normal file
View File

@@ -0,0 +1,51 @@
import * as React from "react";
import {
ReportData
} from "../../features/report";
export type DashboardMode = "expense" | "income";
export type DashboardPeriodType = "rolling" | "calendar";
export type DashboardSelectedPeriodId = string | null;
export interface DashboardState {
mode: DashboardMode;
periodType: DashboardPeriodType;
selectedPeriodId: DashboardSelectedPeriodId;
comparison: boolean;
}
export interface DashboardSection {
id: string;
title?: string;
summary?: string;
component: React.ComponentType<any>;
settings?: Record<string, any>;
isList?: boolean;
style?: {
size?: number;
[key: string]: any;
};
}
export interface ColorDefinition {
primary: string;
background?: string;
text?: string;
}
export interface ThemeAwarePalette {
light: ColorDefinition;
dark: ColorDefinition;
}
export interface DashboardConfig {
sections: DashboardSection[];
style?: {
palette?: Record<DashboardMode, ThemeAwarePalette>;
};
}
export interface DashboardProps {
config: DashboardConfig;
data: ReportData;
}

49
src/components/Dashboard/Dashboard.tsx Normal file
View File

@@ -0,0 +1,49 @@
import * as React from "react";
import DashboardView from "./Dashboard.view";
import { DashboardProps, DashboardState } from "./Dashboard.models";
export default function Dashboard(props: DashboardProps) {
const [state, setState] = React.useState<DashboardState>({
mode: "expense",
periodType: "rolling",
selectedPeriodId: null,
comparison: false,
});
const toggleMode = () => {
setState(prev => ({
...prev,
mode: prev.mode === "expense" ? "income" : "expense",
}));
};
const togglePeriodType = () => {
setState(prev => ({
...prev,
periodType: prev.periodType === "rolling" ? "calendar" : "rolling",
}));
};
const toggleComparison = () => {
setState(prev => ({
...prev,
comparison: !prev.comparison,
}));
};
const setSelectedPeriodId = (selectedPeriodId: typeof state.selectedPeriodId) => {
setState(prev => ({ ...prev, selectedPeriodId }));
};
return (
<DashboardView
{...props}
state={state}
setState={setState}
toggleMode={toggleMode}
togglePeriodType={togglePeriodType}
toggleComparison={toggleComparison}
setSelectedPeriodId={setSelectedPeriodId}
/>
);
}

134
src/components/Dashboard/Dashboard.view.tsx Normal file
View File

@@ -0,0 +1,134 @@
import * as React from "react";
import {
Box,
Container,
Grid,
Typography,
ToggleButton,
ToggleButtonGroup
} from "@mui/material";
import { useTheme, alpha } from "@mui/material/styles";
import { DashboardProps, DashboardState } from "./Dashboard.models";
interface ViewProps extends DashboardProps {
state: DashboardState;
setState: React.Dispatch<React.SetStateAction<DashboardState>>;
toggleMode: () => void;
togglePeriodType: () => void;
setSelectedPeriodId: (id: string | null) => void;
toggleComparison: () => void;
}
export default function DashboardView({
config,
data,
state,
setState,
toggleMode,
togglePeriodType,
toggleComparison,
setSelectedPeriodId,
}: ViewProps) {
const theme = useTheme();
const themeMode = theme.palette.mode;
const { mode, periodType, comparison, selectedPeriodId } = state;
// Resolve colors with fallbacks
const colors = React.useMemo(() => {
const palette = config.style?.palette?.[mode];
const modeColors = palette ? palette[themeMode] : null;
if (modeColors) {
return {
primary: modeColors.primary,
light: modeColors.background || alpha(modeColors.primary, 0.1),
text: modeColors.text || (themeMode === 'light' ? theme.palette.text.primary : '#fff')
};
}
// Fallback to standard theme colors
const themeColor = mode === 'expense' ? theme.palette.error : theme.palette.success;
return {
primary: themeColor.main,
light: alpha(themeColor.main, themeMode === 'light' ? 0.08 : 0.15),
text: themeColor.main
};
}, [config.style?.palette, mode, themeMode, theme.palette]);
return (
<Container
sx={{
mt: 4,
mb: 4,
background: `linear-gradient(180deg, ${colors.light} 0%, transparent 100%)`,
borderRadius: 4,
p: 2,
transition: 'background 0.3s ease'
}}
>
<Box sx={{ display: "flex", justifyContent: "center", mb: 3 }}>
<ToggleButtonGroup
value={mode}
exclusive
onChange={toggleMode}
sx={{
borderRadius: 3,
overflow: "hidden",
"& .MuiToggleButton-root": {
px: 3,
textTransform: "none",
color: "text.secondary"
},
"&.Mui-selected": {
bgcolor: colors.primary,
color: "white",
borderColor: colors.primary
},
}}
>
<ToggleButton value="expense">Expenses</ToggleButton>
<ToggleButton value="income">Income</ToggleButton>
</ToggleButtonGroup>
</Box>
<Grid container spacing={4}>
{config.sections.map((section) => {
const Component = section.component;
return (
<Grid key={section.id} size={section.style?.size || 12 as any}>
{section.title && !section.isList && (
<Box sx={{ mb: 2 }}>
<Typography variant="h6" fontWeight={700}>
{section.title}
</Typography>
</Box>
)}
<Component
{...section.settings}
header={section.title}
summary={section.summary}
reportData={data}
title={section.title}
accentColor={colors.primary}
colorScheme={colors}
// State management
mode={mode}
periodType={periodType}
comparison={comparison}
selectedPeriodId={selectedPeriodId}
togglePeriodType={togglePeriodType}
toggleComparison={toggleComparison}
setSelectedPeriodId={setSelectedPeriodId}
/>
</Grid>
);
})}
</Grid>
</Container>
);
}

2
src/components/Dashboard/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export { default } from "./Dashboard";
export * from "./Dashboard.models";

387
src/components/HistoryChart.tsx
View File

@@ -1,387 +0,0 @@
import * as React from "react";
import {
Box,
Typography,
ToggleButtonGroup,
ToggleButton,
Paper
} from "@mui/material";
import {
ChartDataPoint,
HistoryChartProps,
ChartData,
} from "../types/historyChart";
import IconButton from "@mui/material/IconButton";
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
const formatDisplay = (
point: ChartDataPoint,
tab: string,
comparison: boolean
) => {
const base = point.amount;
const cmp = point.compareAmount ?? 0;
const formatShort = (val: number) => {
if (tab === "monthly") {
if (val >= 100000) return `${(val / 100000).toFixed(2)}L`;
}
if (tab === "weekly") {
if (val >= 1000) return `${(val / 1000).toFixed(1)}K`;
}
return val.toLocaleString("en-IN");
};
// Only hide diff when comparison OFF or compare is undefined
if (!comparison) {
return `₹ ${formatShort(base)}`;
}
const diff = base - cmp;
const sign = diff >= 0 ? "+" : "-";
const absDiff = Math.abs(diff);
return `₹ ${formatShort(base)} (${sign}${formatShort(absDiff)})`;
};
const formatLabel = (label: string, type: string) => {
if (type === "monthly") return label;
if (type === "weekly") {
const parts = label.split(" - ");
if (parts.length === 2) {
const [start, end] = parts;
const startDay = start.split(" ")[0];
const endParts = end.split(" ");
const endDay = endParts[0];
const month = endParts[1];
return `${startDay}–${endDay} ${month}`;
}
}
return label;
};
export default function HistoryChart({
header,
summary,
tabs,
data,
period,
onPeriodChange,
comparison,
setComparison,
}: HistoryChartProps) {
const [activeTab, setActiveTab] = React.useState<string>(tabs[0] || "");
const handleTabChange = (_: React.MouseEvent<HTMLElement>, newTab: string | null) => {
if (newTab !== null) setActiveTab(newTab);
};
const activeDataKey = activeTab.toLowerCase() as keyof ChartData;
let rawData: ChartDataPoint[] = [];
if (activeDataKey === "daily") {
rawData = data.daily || [];
} else {
const section = data[activeDataKey];
rawData = section?.[period] || [];
}
const currentData = rawData;
const maxAmount =
currentData.length > 0
? Math.max(
...currentData.flatMap((d) =>
comparison ? [d.amount, d.compareAmount || 0] : [d.amount]
),
1
)
: 1;
const [startIndex, setStartIndex] = React.useState(0);
const visibleCountDataTabMapping = {
daily: 7,
weekly: 6,
monthly: 4,
}
const visibleCount = visibleCountDataTabMapping[activeDataKey];
const total = currentData.length;
// clamp startIndex so we always show full 5 (when possible)
const clampedStartIndex = Math.min(
startIndex,
Math.max(total - visibleCount, 0)
);
const visibleData = currentData.slice(
clampedStartIndex,
clampedStartIndex + visibleCount
);
const canGoLeft = startIndex > 0;
const canGoRight = startIndex + visibleCount < currentData.length;
const handlePrev = () => {
if (canGoLeft) setStartIndex((prev) => prev - visibleCount);
};
const handleNext = () => {
if (canGoRight) setStartIndex((prev) => prev + visibleCount);
};
return (
<Paper
sx={{
p: { xs: 2, sm: 4 },
borderRadius: 4,
width: "100%",
boxShadow: "none",
border: "1px solid",
borderColor: "divider"
}}
>
<Typography variant="h6" fontWeight={700} gutterBottom>
{header}
</Typography>
{summary && (
<Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
{summary}
</Typography>
)}
<ToggleButtonGroup
value={activeTab}
exclusive
onChange={handleTabChange}
fullWidth
sx={{ mb: 4 }}
>
{tabs.map((tab) => (
<ToggleButton key={tab} value={tab}>
{tab}
</ToggleButton>
))}
</ToggleButtonGroup>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
mb: 3
}}
>
{/* Rolling / Calendar */}
<ToggleButtonGroup
value={period}
exclusive
onChange={(_, v) => v && onPeriodChange(v)}
size="small"
>
<ToggleButton value="rolling">Rolling</ToggleButton>
<ToggleButton
value="calendar"
disabled={activeDataKey === "daily"}
>
Calendar
</ToggleButton>
</ToggleButtonGroup>
{/* Compare toggle */}
<ToggleButton
value="compare"
selected={comparison}
onChange={() => setComparison(!comparison)}
size="small"
sx={{
textTransform: "none",
borderRadius: 2,
px: 2,
// OFF
color: "text.secondary",
border: "1px solid",
borderColor: "divider",
// ON
"&.Mui-selected": {
color: "white",
bgcolor: "success.main",
borderColor: "success.main"
},
"&.Mui-selected:hover": {
bgcolor: "success.dark"
}
}}
>
Compare
</ToggleButton>
</Box>
{currentData.length > 0 ? (
<Box sx={{ position: "relative", mt: 4 }}>
{/* LEFT ARROW */}
{canGoLeft && (
<IconButton
onClick={handlePrev}
size="small"
sx={{
position: "absolute",
left: 0,
top: "50%",
transform: "translateY(-50%)",
zIndex: 2,
bgcolor: "background.paper",
boxShadow: 1
}}
>
<ChevronLeftIcon fontSize="small" />
</IconButton>
)}
{/* CHART */}
<Box sx={{ display: "flex", alignItems: "flex-end", height: 220, mt: 4 }}>
{visibleData.map((point) => {
const currentHeight = (point.amount / maxAmount) * 100;
const compareHeight = comparison
? ((point.compareAmount || 0) / maxAmount) * 100
: 0;
const labelHeight = Math.max(currentHeight, compareHeight);
return (
<Box
key={point.id}
sx={{
flex: 1,
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "flex-end",
height: "100%"
}}
>
<Box
sx={{
display: "flex",
alignItems: "flex-end",
gap: comparison ? 0.5 : 0,
height: "100%",
position: "relative"
}}
>
<Typography
variant="caption"
sx={{
position: "absolute",
bottom: `${labelHeight}%`,
left: "50%",
transform: "translate(-50%, -6px)",
fontSize: "0.65rem",
whiteSpace: "nowrap",
pointerEvents: "none"
}}
>
{formatDisplay(point, activeTab.toLowerCase(), comparison)}
</Typography>
{/* Compare */}
{comparison && (
<Box
sx={{
width: 6,
height: `${compareHeight}%`,
bgcolor: "grey.400",
borderRadius: 2
}}
/>
)}
{/* Spacer */}
<Box sx={{ width: 4 }} />
{/* Current */}
<Box
sx={{
width: 10,
height: `${currentHeight}%`,
bgcolor: point.highlighted ? "error.main" : "primary.main",
borderRadius: 2
}}
/>
</Box>
<Box
sx={{
mt: 1,
textAlign: "center",
display: "flex",
flexDirection: "column",
alignItems: "center",
lineHeight: 1.1
}}
>
<Typography
variant="caption"
sx={{
fontSize: "0.7rem",
opacity: 0.7,
color: "text.primary",
}}
>
{formatLabel(point.id, activeDataKey)}
</Typography>
<Typography
variant="caption"
sx={{
fontSize: "0.65rem",
color: "grey.400",
visibility:
comparison && point.compareLabel && activeDataKey !== "daily"
? "visible"
: "hidden"
}}
>
{point.compareLabel
? formatLabel(point.compareLabel, activeDataKey)
: "placeholder"}
</Typography>
</Box>
</Box>
);
})}
</Box>
{/* RIGHT ARROW */}
{canGoRight && (
<IconButton
onClick={handleNext}
size="small"
sx={{
position: "absolute",
right: 0,
top: "50%",
transform: "translateY(-50%)",
zIndex: 2,
bgcolor: "background.paper",
boxShadow: 1
}}
>
<ChevronRightIcon fontSize="small" />
</IconButton>
)}
</Box>
) : (
<Box sx={{ height: 200, display: "flex", alignItems: "center", justifyContent: "center" }}>
<Typography color="text.secondary">No Data Available</Typography>
</Box>
)}
</Paper>
);
}

40
src/components/HistoryChart/HistoryChart.models.ts Normal file
View File

@@ -0,0 +1,40 @@
import {
DashboardMode,
DashboardPeriodType,
DashboardSelectedPeriodId
} from "../Dashboard";
import { ReportData } from "../../features/report";
export interface _ChartDataPoint {
id: string;
label: string;
amount: number;
highlighted?: boolean;
}
export interface ChartDataPoint extends _ChartDataPoint {
compare?: _ChartDataPoint;
}
export interface HistoryChartProps {
header: string;
summary?: string;
tabs: string[];
reportData: ReportData;
colorScheme: {
primary: string;
light: string;
text: string;
};
mode: DashboardMode;
periodType: DashboardPeriodType;
selectedPeriodId: DashboardSelectedPeriodId;
comparison: boolean;
togglePeriodType: () => void;
setSelectedPeriodId: (id: string | null) => void;
toggleComparison: () => void;
}

212
src/components/HistoryChart/HistoryChart.tsx Normal file
View File

@@ -0,0 +1,212 @@
import * as React from "react";
import { HistoryChartProps, ChartDataPoint } from "./HistoryChart.models";
import HistoryChartView from "./HistoryChart.view";
import { ReportPeriod } from "../../features/report";
type DecoratedPeriod = ReportPeriod & {
id: string;
label: string;
};
const TAB_TO_KEY: Record<string, "weekly" | "monthly" | "yearly" | "fyly" | "full"> = {
Weekly: "weekly",
Monthly: "monthly",
Yearly: "yearly",
'Financial Year': "fyly",
'All Time': "full"
};
function getAmount(p: ReportPeriod, mode: "expense" | "income") {
return mode === "expense" ? p.expenses.sum : p.incomes.sum;
}
function mergeMetric(a: any, b: any) {
const sum = a.sum + b.sum;
const count = a.count + b.count;
return {
...a,
sum,
count,
average: count > 0 ? sum / count : 0,
transactions: a.transactions || b.transactions
? [
...(a.transactions || []),
...(b.transactions || [])
]
: undefined
};
}
function mergeBuckets(
buckets: any[],
key: "weekly" | "monthly" | "yearly" | "fyly" | "full"
): DecoratedPeriod[] {
const map = new Map<string, DecoratedPeriod>();
for (const bucket of buckets) {
const periods = (bucket.periods[key] || []) as DecoratedPeriod[];
for (const p of periods) {
const existing = map.get(p.id);
if (!existing) {
map.set(p.id, {
...p,
expenses: { ...p.expenses },
incomes: { ...p.incomes }
});
} else {
map.set(p.id, {
...existing,
expenses: mergeMetric(existing.expenses, p.expenses),
incomes: mergeMetric(existing.incomes, p.incomes)
});
}
}
}
return Array.from(map.values()).sort(
(a, b) => new Date(a.start).getTime() - new Date(b.start).getTime()
);
}
function attachComparison(
points: ChartDataPoint[],
key: "weekly" | "monthly" | "yearly" | "fyly" | "full"
): ChartDataPoint[] {
const getCompareIndex = (i: number) => {
if (key === "weekly") return i - 4;
if (key === "monthly") return i - 12;
if (key === "yearly") return i - 1;
if (key === "fyly") return i - 1;
return -1;
};
return points.map((p, i) => {
const ci = getCompareIndex(i);
return {
...p,
compare:
ci >= 0 && points[ci]
? {
id: points[ci].id,
label: points[ci].label,
amount: points[ci].amount
}
: undefined
};
});
}
function buildChartData(
reportData: HistoryChartProps["reportData"],
key: "weekly" | "monthly" | "yearly" | "fyly" | "full",
mode: "expense" | "income",
comparison: boolean
): ChartDataPoint[] {
const merged = mergeBuckets(reportData.buckets, key);
console.log("Merged periods:", merged);
let points: ChartDataPoint[] = merged.map((p) => ({
id: p.id,
label: p.label,
amount: getAmount(p, mode)
}));
if (comparison) {
points = attachComparison(points, key);
}
return points;
}
export default function HistoryChart(props: HistoryChartProps) {
const {
tabs,
reportData,
mode,
periodType,
comparison,
selectedPeriodId,
setSelectedPeriodId
} = props;
const [activeTab, setActiveTab] = React.useState<string>(tabs[0] || "");
const [startIndex, setStartIndex] = React.useState(0);
const activeDataKey = TAB_TO_KEY[activeTab];
const currentData = React.useMemo(() => {
return buildChartData(reportData, activeDataKey, mode, comparison);
}, [reportData, activeDataKey, mode, comparison]);
const maxAmount =
currentData.length > 0
? Math.max(
...currentData.flatMap((d) =>
comparison
? [d.amount, ...(d.compare ? [d.compare.amount] : [])]
: [d.amount]
),
1
)
: 1;
const visibleCountMap = {
weekly: 6,
monthly: 4,
yearly: 4,
fyly: 4,
full: 4,
};
const visibleCount = visibleCountMap[activeDataKey] ?? 4;
const total = currentData.length;
const clampedStartIndex = Math.min(
startIndex,
Math.max(total - visibleCount, 0)
);
React.useEffect(() => {
if (startIndex !== clampedStartIndex) {
setStartIndex(clampedStartIndex);
}
}, [startIndex, clampedStartIndex]);
const visibleData = currentData.slice(
clampedStartIndex,
clampedStartIndex + visibleCount
);
React.useEffect(() => {
setSelectedPeriodId(null);
}, [activeTab, periodType]);
React.useEffect(() => {
if (
selectedPeriodId &&
!visibleData.some((p) => p.id === selectedPeriodId)
) {
setSelectedPeriodId(null);
}
}, [visibleData, selectedPeriodId]);
return (
<HistoryChartView
{...props}
activeTab={activeTab}
setActiveTab={setActiveTab}
currentData={currentData}
visibleData={visibleData}
maxAmount={maxAmount}
visibleCount={visibleCount}
startIndex={clampedStartIndex}
setStartIndex={setStartIndex}
activeDataKey={activeDataKey}
/>
);
}

27
src/components/HistoryChart/HistoryChart.utils.ts Normal file
View File

@@ -0,0 +1,27 @@
import { ChartDataPoint } from "./HistoryChart.models";
export const formatDisplay = (
point: ChartDataPoint,
tab: string,
comparison: boolean
) => {
const base = point.amount;
const cmp = point.compare?.amount ?? 0;
const formatShort = (val: number) => {
if (tab === "monthly" && val >= 100000) {
return `${(val / 100000).toFixed(2)}L`;
}
if (tab === "weekly" && val >= 1000) {
return `${(val / 1000).toFixed(1)}K`;
}
return val.toLocaleString("en-IN");
};
if (!comparison) return `₹ ${formatShort(base)}`;
const diff = base - cmp;
const sign = diff >= 0 ? "+" : "-";
return `₹ ${formatShort(base)} (${sign}${formatShort(Math.abs(diff))})`;
};

208
src/components/HistoryChart/HistoryChart.view.tsx Normal file
View File

@@ -0,0 +1,208 @@
import * as React from "react";
import {
Box,
Typography,
ToggleButtonGroup,
ToggleButton,
Paper
} from "@mui/material";
import { useTheme, alpha } from "@mui/material/styles";
import IconButton from "@mui/material/IconButton";
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import {
ChartDataPoint,
HistoryChartProps,
} from "./HistoryChart.models";
import { formatDisplay } from "./HistoryChart.utils";
interface ViewProps extends HistoryChartProps {
activeTab: string;
setActiveTab: (v: string) => void;
currentData: ChartDataPoint[];
visibleData: ChartDataPoint[];
maxAmount: number;
visibleCount: number;
startIndex: number;
setStartIndex: React.Dispatch<React.SetStateAction<number>>;
activeDataKey: string;
}
export default function HistoryChartView(props: ViewProps) {
const {
header,
summary,
tabs,
colorScheme,
mode,
periodType,
selectedPeriodId,
comparison,
togglePeriodType,
setSelectedPeriodId,
toggleComparison,
activeTab,
setActiveTab,
currentData,
visibleData,
maxAmount,
visibleCount,
startIndex,
setStartIndex,
activeDataKey,
} = props;
const theme = useTheme();
const isDark = theme.palette.mode === "dark";
const handleTabChange = (_: React.MouseEvent<HTMLElement>, newTab: string | null) => {
if (newTab !== null) setActiveTab(newTab);
};
const canGoLeft = startIndex > 0;
const canGoRight = startIndex + visibleCount < currentData.length;
const handlePrev = () => {
if (canGoLeft) setStartIndex((prev) => prev - visibleCount);
};
const handleNext = () => {
if (canGoRight) setStartIndex((prev) => prev + visibleCount);
};
return (
<Paper
sx={{
p: { xs: 2.5, sm: 4 },
borderRadius: 4,
width: "100%",
boxShadow: "none",
border: "1px solid",
borderColor: "divider",
bgcolor: isDark ? "background.paper" : colorScheme.light,
}}
>
<Typography variant="h6" fontWeight={700} gutterBottom>
{header}
</Typography>
{summary && (
<Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
{summary}
</Typography>
)}
<ToggleButtonGroup value={activeTab} exclusive onChange={handleTabChange} fullWidth sx={{ mb: 4 }}>
{tabs.map((tab) => (
<ToggleButton key={tab} value={tab}>
{tab}
</ToggleButton>
))}
</ToggleButtonGroup>
<Box sx={{ display: "flex", justifyContent: "space-between", mb: 3 }}>
<ToggleButtonGroup value={periodType} exclusive onChange={togglePeriodType} size="small">
<ToggleButton value="rolling">Rolling</ToggleButton>
<ToggleButton value="calendar">Calendar</ToggleButton>
</ToggleButtonGroup>
<ToggleButton
value="compare"
selected={comparison}
onChange={toggleComparison}
size="small"
>
Compare
</ToggleButton>
</Box>
{currentData.length > 0 ? (
<Box sx={{ position: "relative", mt: 4 }}>
{canGoLeft && (
<IconButton onClick={handlePrev} size="small" sx={{ position: "absolute", left: 0, top: "50%" }}>
<ChevronLeftIcon fontSize="small" />
</IconButton>
)}
<Box sx={{ display: "flex", alignItems: "flex-end", height: 220, mt: 4 }}>
{visibleData.map((point) => {
const currentHeight = (point.amount / maxAmount) * 100;
const compareHeight = comparison
? ((point.compare?.amount ?? 0) / maxAmount) * 100
: 0;
const isSelected = selectedPeriodId === point.id;
const display = formatDisplay(point, activeDataKey, comparison);
return (
<Box
key={point.id}
onClick={() =>
setSelectedPeriodId(isSelected ? null : point.id)
}
sx={{
flex: 1,
display: "flex",
flexDirection: "column",
alignItems: "center",
cursor: "pointer",
height: "100%"
}}
>
<Box sx={{ display: "flex", alignItems: "flex-end", gap: 1, height: "100%" }}>
{comparison && (
<Box
sx={{
width: 8,
height: `${compareHeight}%`,
bgcolor: alpha(colorScheme.primary, 0.4),
borderRadius: "4px 4px 0 0"
}}
/>
)}
<Box
sx={{
width: 12,
height: `${currentHeight}%`,
bgcolor: isSelected ? "warning.main" : colorScheme.primary,
borderRadius: "4px 4px 0 0"
}}
/>
</Box>
<Typography variant="caption">
{point.label}
</Typography>
{comparison && point.compare && (
<Typography variant="caption" color="text.secondary">
{point.compare.label}
</Typography>
)}
<Typography variant="caption">
{display}
</Typography>
</Box>
);
})}
</Box>
{canGoRight && (
<IconButton onClick={handleNext} size="small" sx={{ position: "absolute", right: 0, top: "50%" }}>
<ChevronRightIcon fontSize="small" />
</IconButton>
)}
</Box>
) : (
<Box sx={{ height: 200, display: "flex", alignItems: "center", justifyContent: "center" }}>
<Typography color="text.secondary">No Data Available</Typography>
</Box>
)}
</Paper>
);
}

2
src/components/HistoryChart/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export { default } from "./HistoryChart";
export * from "./HistoryChart.models";

18
src/components/LatestItems/LatestItems.models.ts Normal file
View File

@@ -0,0 +1,18 @@
import * as React from "react";
export interface LatestItem {
id: string | number;
icon: React.ReactNode;
iconBgColor?: string;
title: string;
subtitle: string;
amount: string;
timeAgo: string;
}
export interface LatestItemsListProps {
title?: string;
items: LatestItem[];
onViewAll?: () => void;
accentColor: string;
}

6
src/components/LatestItemsList.tsx → src/components/LatestItems/LatestItems.tsx
View File

@@ -24,12 +24,14 @@ export interface LatestItemsListProps {
title?: string;
items: LatestItem[];
onViewAll?: () => void;
accentColor: any;
}
export default function LatestItemsList({
export default function LatestItems({
title = "Recent Transactions",
items,
onViewAll,
accentColor,
}: LatestItemsListProps) {
return (
<Box sx={{ width: "100%", bgcolor: "background.paper", borderRadius: 4, p: 2 }}>
@@ -69,7 +71,7 @@ export default function LatestItemsList({
<Avatar
variant="rounded"
sx={{
bgcolor: item.iconBgColor || "grey.200",
bgcolor: `${accentColor}22`,
color: "inherit",
width: 48,
height: 48,

6
src/components/LatestItems/LatestItems.view.tsx Normal file
View File

@@ -0,0 +1,6 @@
import LatestItemsListView from "./LatestItems.view";
import { LatestItemsListProps } from "./LatestItems.models";
export default function LatestItemsList(props: LatestItemsListProps) {
return <LatestItemsListView {...props} />;
}

2
src/components/LatestItems/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export { default } from "./LatestItems";
export * from "./LatestItems.models";

80
src/components/ProgressCard.tsx
View File

@@ -1,80 +0,0 @@
import * as React from "react";
import { Box, Typography, Paper, LinearProgress, linearProgressClasses } from "@mui/material";
export interface ProgressCardProps {
header: string;
summary?: string;
progressAmount: number;
totalAmount: number;
colorTheme?: "primary" | "secondary" | "error" | "info" | "success" | "warning";
}
export default function ProgressCard({
header,
summary,
progressAmount,
totalAmount,
colorTheme = "info",
}: ProgressCardProps) {
const percentage = Math.min(100, Math.max(0, (progressAmount / totalAmount) * 100)) || 0;
const displaySummary = summary ?? `Rs ${progressAmount} / Rs ${totalAmount}`;
const parts = displaySummary.split('/');
const prefixAmount = parts[0]?.trim() || '';
const suffixString = parts.length > 1 ? `/ ${parts.slice(1).join('/').trim()}` : '';
return (
<Paper
elevation={4}
sx={{
width: "100%",
p: { xs: 3, md: 4 },
borderRadius: 4,
background: (theme) =>
colorTheme === "info"
? "linear-gradient(135deg, #0284c7 0%, #06b6d4 100%)"
: `linear-gradient(135deg, ${theme.palette[colorTheme].main} 0%, ${theme.palette[colorTheme].light} 100%)`,
color: "#fff",
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
position: 'relative',
overflow: 'hidden',
boxShadow: (theme) => `0 12px 24px -10px ${theme.palette.mode === 'dark' ? '#000' : theme.palette[colorTheme].main}`,
}}
>
<Typography variant="subtitle1" fontWeight={600} sx={{ opacity: 0.9, mb: 1 }}>
{header}
</Typography>
<Typography variant="h3" fontWeight={800} sx={{ mb: 3 }}>
{prefixAmount}{" "}
{suffixString && (
<Typography component="span" variant="subtitle1" sx={{ opacity: 0.7, fontWeight: 500 }}>
{suffixString}
</Typography>
)}
</Typography>
<Box sx={{ width: "85%" }}>
<LinearProgress
variant="determinate"
value={percentage}
sx={{
height: 10,
borderRadius: 5,
[`&.${linearProgressClasses.colorPrimary}`]: {
backgroundColor: "rgba(0, 0, 0, 0.2)",
},
[`& .${linearProgressClasses.bar}`]: {
borderRadius: 5,
backgroundColor: "#fff",
},
}}
/>
</Box>
</Paper>
);
}

8
src/components/ProgressCard/ProgressCard.models.ts Normal file
View File

@@ -0,0 +1,8 @@
export interface ProgressCardProps {
header: string;
summary?: string;
progressAmount: number;
totalAmount: number;
colorTheme?: "primary" | "secondary" | "error" | "info" | "success" | "warning";
compact?: boolean;
}

23
src/components/ProgressCard/ProgressCard.tsx Normal file
View File

@@ -0,0 +1,23 @@
import * as React from "react";
import ProgressCardView from "./ProgressCard.view";
import { ProgressCardProps } from "./ProgressCard.models";
import { getPercentage, formatCurrency } from "./ProgressCard.utils";
export default function ProgressCard(props: ProgressCardProps) {
const { progressAmount, totalAmount, compact = false } = props;
const percentage = getPercentage(progressAmount, totalAmount);
const formattedProgress = formatCurrency(progressAmount);
const formattedTotal = formatCurrency(totalAmount);
return (
<ProgressCardView
{...props}
percentage={percentage}
formattedProgress={formattedProgress}
formattedTotal={formattedTotal}
compact={compact}
/>
);
}

15
src/components/ProgressCard/ProgressCard.utils.ts Normal file
View File

@@ -0,0 +1,15 @@
export const getPercentage = (progressAmount: number, totalAmount: number) => {
if (!totalAmount) return 0;
return Math.min(100, Math.max(0, (progressAmount / totalAmount) * 100));
};
export const formatCurrency = (val: number) => {
const absVal = Math.abs(val);
if (absVal >= 100000) {
return `₹ ${(val / 100000).toFixed(2)}L`;
}
if (absVal >= 1000) {
return `₹ ${(val / 1000).toFixed(2)}k`;
}
return `₹ ${val.toFixed(2)}`;
};

127
src/components/ProgressCard/ProgressCard.view.tsx Normal file
View File

@@ -0,0 +1,127 @@
import * as React from "react";
import {
Box,
Typography,
Paper,
LinearProgress,
Divider,
linearProgressClasses
} from "@mui/material";
import { useTheme, alpha } from "@mui/material/styles";
import { ProgressCardProps } from "./ProgressCard.models";
interface ViewProps extends ProgressCardProps {
percentage: number;
formattedProgress: string;
formattedTotal: string;
}
export default function ProgressCardView({
header,
colorTheme = "info",
percentage,
formattedProgress,
formattedTotal,
compact = false,
}: ViewProps) {
const theme = useTheme();
const isDark = theme.palette.mode === "dark";
return (
<Paper
elevation={compact ? 2 : 4}
sx={{
width: "100%",
p: compact ? { xs: 2.5, md: 3 } : { xs: 3, md: 4 },
borderRadius: compact ? 3 : 4,
background: (theme) => {
const baseColor = theme.palette[colorTheme]?.main || theme.palette.primary.main;
const lightColor = theme.palette[colorTheme]?.light || theme.palette.primary.light;
return isDark
? `linear-gradient(135deg, ${alpha(baseColor, 0.9)} 0%, ${alpha(baseColor, 0.3)} 100%)`
: `linear-gradient(135deg, ${baseColor} 0%, ${lightColor} 100%)`;
},
color: "#fff",
display: "flex",
flexDirection: "column",
alignItems: compact ? "flex-start" : "center",
justifyContent: "center",
position: "relative",
overflow: "hidden",
border: isDark ? "1px solid rgba(255,255,255,0.1)" : "none",
boxShadow: (theme) =>
`0 ${compact ? 6 : 12}px ${compact ? 12 : 24}px -10px ${
isDark
? "rgba(0,0,0,0.5)"
: theme.palette[colorTheme]?.main || theme.palette.primary.main
}`,
}}
>
<Typography
variant={compact ? "body2" : "subtitle1"}
fontWeight={700}
sx={{
opacity: 0.95,
mb: compact ? 1.5 : 2,
width: '100%',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
letterSpacing: 0.5,
textShadow: isDark ? '0 1px 2px rgba(0,0,0,0.3)' : 'none'
}}
>
{header}
</Typography>
<Box sx={{ mb: compact ? 2 : 3, width: '100%' }}>
<Typography
variant={compact ? "h5" : "h3"}
fontWeight={900}
sx={{ mb: 0.5, lineHeight: 1.2, textShadow: isDark ? '0 2px 4px rgba(0,0,0,0.3)' : 'none' }}
>
{formattedProgress}
</Typography>
<Divider
sx={{
my: 1,
borderColor: "rgba(255,255,255,0.25)",
width: "100%",
}}
/>
<Typography
variant={compact ? "caption" : "body2"}
sx={{
opacity: 0.85,
fontWeight: 500,
display: "block",
color: "rgba(255,255,255,0.9)"
}}
>
of {formattedTotal}
</Typography>
</Box>
<Box sx={{ width: "100%", mt: 'auto' }}>
<LinearProgress
variant="determinate"
value={percentage}
sx={{
height: compact ? 6 : 10,
borderRadius: 5,
[`&.${linearProgressClasses.colorPrimary}`]: {
backgroundColor: "rgba(0, 0, 0, 0.25)",
},
[`& .${linearProgressClasses.bar}`]: {
borderRadius: 5,
backgroundColor: "#fff",
boxShadow: '0 0 8px rgba(255,255,255,0.4)'
},
}}
/>
</Box>
</Paper>
);
}

105
src/components/ProgressCard/TopTags.tsx Normal file
View File

@@ -0,0 +1,105 @@
import * as React from "react";
import { Box } from "@mui/material";
import { ReportData, ReportPeriod } from "../../features/report";
import ProgressCard from "./ProgressCard";
type Props = {
reportData: ReportData;
mode: "expense" | "income";
selectedPeriodId?: string | null;
compact?: boolean;
};
type DecoratedPeriod = ReportPeriod & {
id: string;
label: string;
};
function getAmount(p: ReportPeriod, mode: "expense" | "income") {
return mode === "expense" ? p.expenses.sum : p.incomes.sum;
}
function findPeriod(
periods: DecoratedPeriod[],
selectedPeriodId?: string | null
) {
if (!periods.length) return null;
if (selectedPeriodId) {
const match = periods.find((p) => p.id === selectedPeriodId);
if (match) return match;
}
// fallback → latest
return periods.reduce((latest, p) =>
new Date(p.start).getTime() > new Date(latest.start).getTime()
? p
: latest
);
}
export default function TopTags({
reportData,
mode,
selectedPeriodId,
compact = true
}: Props) {
const { items, total } = React.useMemo(() => {
const tagMap = new Map<string, number>();
for (const bucket of reportData.buckets) {
const tags = bucket.group_key.tags;
if (!tags || tags.length === 0) continue;
// Prefer FULL if available
const fullPeriods = (bucket.periods.full || []) as DecoratedPeriod[];
const periodsToUse =
selectedPeriodId
? Object.values(bucket.periods).flat() as DecoratedPeriod[]
: fullPeriods;
const period = findPeriod(periodsToUse, selectedPeriodId);
if (!period) continue;
const amount = getAmount(period, mode);
for (const tag of tags) {
tagMap.set(tag, (tagMap.get(tag) || 0) + amount);
}
}
const arr = Array.from(tagMap.entries()).map(([tag, amount]) => ({
tag,
amount
}));
arr.sort((a, b) => b.amount - a.amount);
const top = arr.slice(0, 4);
const total = top.reduce((sum, t) => sum + t.amount, 0);
return { items: top, total };
}, [reportData, mode, selectedPeriodId]);
return (
<Box
sx={{
display: "grid",
gridTemplateColumns: "repeat(4, 1fr)",
gap: 2
}}
>
{items.map((item) => (
<ProgressCard
key={item.tag}
header={item.tag}
progressAmount={item.amount}
totalAmount={total}
compact={compact}
colorTheme={mode === "expense" ? "error" : "success"}
/>
))}
</Box>
);
}

2
src/components/ProgressCard/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export { default } from "./ProgressCard";
export * from "./ProgressCard.models";