removed dashboard and reports
This commit is contained in:
@@ -1,339 +0,0 @@
|
|||||||
import * as React from "react";
|
|
||||||
import {
|
|
||||||
Box,
|
|
||||||
Container,
|
|
||||||
CircularProgress,
|
|
||||||
Alert,
|
|
||||||
TextField,
|
|
||||||
Paper,
|
|
||||||
Autocomplete,
|
|
||||||
Button
|
|
||||||
} from "@mui/material";
|
|
||||||
|
|
||||||
import DashboardView from "./components/Dashboard";
|
|
||||||
|
|
||||||
import {
|
|
||||||
DashboardState,
|
|
||||||
DashboardStateSetters,
|
|
||||||
DashboardFlow,
|
|
||||||
} from "./components/Dashboard";
|
|
||||||
|
|
||||||
import { configuration } from "./dashboard-config";
|
|
||||||
import {
|
|
||||||
useReport,
|
|
||||||
prepareReport,
|
|
||||||
} from "./features/report";
|
|
||||||
import { useReportSnapshotsList } from "./features/report-snapshots";
|
|
||||||
|
|
||||||
function formatSnapshotDate(iso: string) {
|
|
||||||
const d = new Date(iso);
|
|
||||||
return d.toLocaleString(undefined, {
|
|
||||||
year: "numeric",
|
|
||||||
month: "short",
|
|
||||||
day: "numeric",
|
|
||||||
hour: "2-digit",
|
|
||||||
minute: "2-digit",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function Dashboard() {
|
|
||||||
const [state, setState] = React.useState<DashboardState>({
|
|
||||||
flow: "outflows",
|
|
||||||
periodType: "rolling",
|
|
||||||
selectedPeriodId: null,
|
|
||||||
selectedGroupKey: null,
|
|
||||||
comparison: false,
|
|
||||||
});
|
|
||||||
|
|
||||||
const [appliedPayees, setAppliedPayees] = React.useState<string[]>([]);
|
|
||||||
const [appliedTags, setAppliedTags] = React.useState<string[]>([]);
|
|
||||||
|
|
||||||
const [payeeInput, setPayeeInput] = React.useState<string[]>([]);
|
|
||||||
const [tagsInput, setTagsInput] = React.useState<string[]>([]);
|
|
||||||
|
|
||||||
const [loadedPayees, setLoadedPayees] = React.useState<string[]>([]);
|
|
||||||
const [loadedTags, setLoadedTags] = React.useState<string[]>([]);
|
|
||||||
|
|
||||||
const [selectedSnapshotId, setSelectedSnapshotId] = React.useState<string | null>(null);
|
|
||||||
|
|
||||||
const { data: snapshotsData } = useReportSnapshotsList();
|
|
||||||
const snapshotOptions = React.useMemo(() => {
|
|
||||||
const options: { label: string; value: string | null }[] = [
|
|
||||||
{ label: "Latest (auto)", value: null },
|
|
||||||
];
|
|
||||||
if (snapshotsData?.items) {
|
|
||||||
for (const snap of snapshotsData.items) {
|
|
||||||
options.push({
|
|
||||||
label: `Snapshot from ${formatSnapshotDate(snap.created_at)}`,
|
|
||||||
value: snap.snapshot_id,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return options;
|
|
||||||
}, [snapshotsData]);
|
|
||||||
|
|
||||||
const selectedSnapshotOption = snapshotOptions.find((o) => o.value === selectedSnapshotId) ?? snapshotOptions[0];
|
|
||||||
|
|
||||||
const report = useReport({
|
|
||||||
snapshot_id: selectedSnapshotId ?? undefined,
|
|
||||||
periods: ["daily", "weekly", "monthly", "all"],
|
|
||||||
flow: state.flow,
|
|
||||||
payee: appliedPayees.length > 0 ? appliedPayees : undefined,
|
|
||||||
tags: appliedTags.length > 0 ? appliedTags : undefined,
|
|
||||||
});
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
if (report.data) {
|
|
||||||
setLoadedPayees(prev => {
|
|
||||||
const pSet = new Set<string>(prev);
|
|
||||||
report.data.buckets.forEach((b: any) => {
|
|
||||||
Object.values(b.periods).forEach((periodArray: any) => {
|
|
||||||
periodArray?.forEach((p: any) => {
|
|
||||||
p.metric?.transactions?.forEach((t: any) => {
|
|
||||||
if (t.payee?.name) pSet.add(t.payee.name);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
return Array.from(pSet).sort();
|
|
||||||
});
|
|
||||||
|
|
||||||
setLoadedTags(prev => {
|
|
||||||
const tSet = new Set<string>(prev);
|
|
||||||
report.data.buckets.forEach((b: any) => {
|
|
||||||
Object.values(b.periods).forEach((periodArray: any) => {
|
|
||||||
periodArray?.forEach((p: any) => {
|
|
||||||
p.metric?.transactions?.forEach((t: any) => {
|
|
||||||
t.tags?.forEach((tag: any) => tSet.add(tag.name || tag));
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
return Array.from(tSet).sort();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, [report.data]);
|
|
||||||
|
|
||||||
const toggleFlow =
|
|
||||||
React.useCallback(() => {
|
|
||||||
setState((prev) => ({
|
|
||||||
...prev,
|
|
||||||
|
|
||||||
flow:
|
|
||||||
prev.flow ===
|
|
||||||
"outflows"
|
|
||||||
? "inflows"
|
|
||||||
: "outflows",
|
|
||||||
|
|
||||||
selectedGroupKey:
|
|
||||||
null,
|
|
||||||
|
|
||||||
selectedPeriodId:
|
|
||||||
null,
|
|
||||||
}));
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const setFlow =
|
|
||||||
React.useCallback(
|
|
||||||
(
|
|
||||||
flow: DashboardFlow
|
|
||||||
) => {
|
|
||||||
setState((prev) => ({
|
|
||||||
...prev,
|
|
||||||
|
|
||||||
flow,
|
|
||||||
|
|
||||||
selectedGroupKey:
|
|
||||||
null,
|
|
||||||
|
|
||||||
selectedPeriodId:
|
|
||||||
null,
|
|
||||||
}));
|
|
||||||
},
|
|
||||||
[]
|
|
||||||
);
|
|
||||||
|
|
||||||
const togglePeriodType =
|
|
||||||
React.useCallback(() => {
|
|
||||||
setState((prev) => ({
|
|
||||||
...prev,
|
|
||||||
|
|
||||||
periodType:
|
|
||||||
prev.periodType ===
|
|
||||||
"rolling"
|
|
||||||
? "calendar"
|
|
||||||
: "rolling",
|
|
||||||
}));
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const toggleComparison =
|
|
||||||
React.useCallback(() => {
|
|
||||||
setState((prev) => ({
|
|
||||||
...prev,
|
|
||||||
|
|
||||||
comparison:
|
|
||||||
!prev.comparison,
|
|
||||||
}));
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const setSelectedPeriodId =
|
|
||||||
React.useCallback(
|
|
||||||
(
|
|
||||||
selectedPeriodId: DashboardState["selectedPeriodId"]
|
|
||||||
) => {
|
|
||||||
setState((prev) => ({
|
|
||||||
...prev,
|
|
||||||
|
|
||||||
selectedPeriodId,
|
|
||||||
}));
|
|
||||||
},
|
|
||||||
[]
|
|
||||||
);
|
|
||||||
|
|
||||||
const setSelectedGroupKey =
|
|
||||||
React.useCallback(
|
|
||||||
(
|
|
||||||
selectedGroupKey: DashboardState["selectedGroupKey"]
|
|
||||||
) => {
|
|
||||||
setState((prev) => ({
|
|
||||||
...prev,
|
|
||||||
|
|
||||||
selectedGroupKey,
|
|
||||||
}));
|
|
||||||
},
|
|
||||||
[]
|
|
||||||
);
|
|
||||||
|
|
||||||
const stateSetters: DashboardStateSetters =
|
|
||||||
React.useMemo(
|
|
||||||
() => ({
|
|
||||||
toggleFlow,
|
|
||||||
|
|
||||||
setFlow,
|
|
||||||
|
|
||||||
togglePeriodType,
|
|
||||||
|
|
||||||
toggleComparison,
|
|
||||||
|
|
||||||
setSelectedPeriodId,
|
|
||||||
|
|
||||||
setSelectedGroupKey,
|
|
||||||
}),
|
|
||||||
[
|
|
||||||
toggleFlow,
|
|
||||||
setFlow,
|
|
||||||
togglePeriodType,
|
|
||||||
toggleComparison,
|
|
||||||
setSelectedPeriodId,
|
|
||||||
setSelectedGroupKey,
|
|
||||||
]
|
|
||||||
);
|
|
||||||
|
|
||||||
const isLoading = report.isLoading;
|
|
||||||
const error = report.error;
|
|
||||||
|
|
||||||
if (isLoading && !report.data) {
|
|
||||||
return (
|
|
||||||
<Box sx={{ display: "flex", justifyContent: "center", alignItems: "center", height: "60vh" }}>
|
|
||||||
<CircularProgress />
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
return (
|
|
||||||
<Container sx={{ mt: 4 }}>
|
|
||||||
<Alert severity="error">{String(error)}</Alert>
|
|
||||||
</Container>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!report.data) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = prepareReport(report.data);
|
|
||||||
return (
|
|
||||||
<Box>
|
|
||||||
<Container>
|
|
||||||
<Paper
|
|
||||||
sx={{
|
|
||||||
mt: 4,
|
|
||||||
p: 2,
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: { xs: "column", sm: "row" },
|
|
||||||
gap: 2,
|
|
||||||
alignItems: { xs: "stretch", sm: "flex-end" },
|
|
||||||
borderRadius: 4,
|
|
||||||
mb: -2 // pull up to be closer to the dashboard container below
|
|
||||||
}}
|
|
||||||
elevation={0}
|
|
||||||
variant="outlined"
|
|
||||||
>
|
|
||||||
<Box sx={{ display: 'flex', flexDirection: 'column', flex: 1, minWidth: { sm: 250 } }}>
|
|
||||||
<Box sx={{ typography: 'caption', mb: 1, color: 'text.secondary' }}>
|
|
||||||
Filter by Payee
|
|
||||||
</Box>
|
|
||||||
<Autocomplete
|
|
||||||
multiple
|
|
||||||
freeSolo
|
|
||||||
options={loadedPayees}
|
|
||||||
value={payeeInput}
|
|
||||||
onChange={(_, val) => setPayeeInput(val as string[])}
|
|
||||||
renderInput={(params) => <TextField {...params} placeholder="Add payees..." />}
|
|
||||||
sx={{ '& .MuiOutlinedInput-root': { height: 'auto', minHeight: '2.5rem', py: 0.5 } }}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
<Box sx={{ display: 'flex', flexDirection: 'column', flex: 1, minWidth: { sm: 250 } }}>
|
|
||||||
<Box sx={{ typography: 'caption', mb: 1, color: 'text.secondary' }}>
|
|
||||||
Filter by Tags
|
|
||||||
</Box>
|
|
||||||
<Autocomplete
|
|
||||||
multiple
|
|
||||||
freeSolo
|
|
||||||
options={loadedTags}
|
|
||||||
value={tagsInput}
|
|
||||||
onChange={(_, val) => setTagsInput(val as string[])}
|
|
||||||
renderInput={(params) => <TextField {...params} placeholder="Add tags..." />}
|
|
||||||
sx={{ '& .MuiOutlinedInput-root': { height: 'auto', minHeight: '2.5rem', py: 0.5 } }}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
<Box sx={{ display: 'flex', flexDirection: 'column', minWidth: { sm: 220 } }}>
|
|
||||||
<Box sx={{ typography: 'caption', mb: 1, color: 'text.secondary' }}>
|
|
||||||
Snapshot
|
|
||||||
</Box>
|
|
||||||
<Autocomplete
|
|
||||||
options={snapshotOptions}
|
|
||||||
value={selectedSnapshotOption}
|
|
||||||
onChange={(_, option) => setSelectedSnapshotId(option?.value ?? null)}
|
|
||||||
getOptionLabel={(o) => o.label}
|
|
||||||
isOptionEqualToValue={(o, v) => o.value === v.value}
|
|
||||||
renderInput={(params) => <TextField {...params} placeholder="Select snapshot..." />}
|
|
||||||
sx={{ '& .MuiOutlinedInput-root': { height: 'auto', minHeight: '2.5rem', py: 0.5 } }}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
variant="contained"
|
|
||||||
size="large"
|
|
||||||
onClick={() => {
|
|
||||||
setAppliedPayees(payeeInput);
|
|
||||||
setAppliedTags(tagsInput);
|
|
||||||
}}
|
|
||||||
disabled={isLoading}
|
|
||||||
sx={{ height: 40, borderRadius: 2 }}
|
|
||||||
>
|
|
||||||
Apply
|
|
||||||
</Button>
|
|
||||||
</Paper>
|
|
||||||
</Container>
|
|
||||||
<DashboardView
|
|
||||||
config={configuration}
|
|
||||||
data={data}
|
|
||||||
state={state}
|
|
||||||
stateSetters={stateSetters}
|
|
||||||
isFetching={report.isFetching}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -101,7 +101,6 @@ export default function Header({
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{[
|
{[
|
||||||
{ label: "Dashboard", path: "/dashboard" },
|
|
||||||
{ label: "Fetch", path: "/fetch-requests" },
|
{ label: "Fetch", path: "/fetch-requests" },
|
||||||
{ label: "Reports", path: "/reports" },
|
{ label: "Reports", path: "/reports" },
|
||||||
].map(({ label, path }) => (
|
].map(({ label, path }) => (
|
||||||
|
|||||||
@@ -1,61 +0,0 @@
|
|||||||
import * as React from "react";
|
|
||||||
import {
|
|
||||||
ReportData,
|
|
||||||
GroupKey,
|
|
||||||
} from "../../features/report";
|
|
||||||
|
|
||||||
export type DashboardFlow = "outflows" | "inflows";
|
|
||||||
export type DashboardPeriodType = "rolling" | "calendar";
|
|
||||||
export type DashboardSelectedPeriodId = string | null;
|
|
||||||
|
|
||||||
export interface DashboardState {
|
|
||||||
flow: DashboardFlow;
|
|
||||||
periodType: DashboardPeriodType;
|
|
||||||
selectedPeriodId: DashboardSelectedPeriodId;
|
|
||||||
selectedGroupKey: GroupKey | null;
|
|
||||||
comparison: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface DashboardStateSetters {
|
|
||||||
setSelectedPeriodId: (id: DashboardSelectedPeriodId) => void;
|
|
||||||
setSelectedGroupKey: (groupKey: GroupKey | null) => void;
|
|
||||||
toggleFlow: () => void;
|
|
||||||
togglePeriodType: () => void;
|
|
||||||
toggleComparison: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface DashboardSection {
|
|
||||||
id: string;
|
|
||||||
title: string;
|
|
||||||
component: React.ComponentType<any>;
|
|
||||||
summary?: string;
|
|
||||||
settings?: Record<string, any>;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface DashboardConfig {
|
|
||||||
sections: DashboardSection[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface DashboardViewProps {
|
|
||||||
config: DashboardConfig;
|
|
||||||
data: ReportData;
|
|
||||||
state: DashboardState;
|
|
||||||
stateSetters: DashboardStateSetters;
|
|
||||||
isFetching: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ColorScheme {
|
|
||||||
primary: string;
|
|
||||||
surface: string;
|
|
||||||
text: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ComponentProps extends DashboardSection {
|
|
||||||
reportData: ReportData;
|
|
||||||
|
|
||||||
state: DashboardState;
|
|
||||||
stateSetters: DashboardStateSetters;
|
|
||||||
isFetching: boolean;
|
|
||||||
|
|
||||||
colorScheme: ColorScheme;
|
|
||||||
}
|
|
||||||
@@ -1,105 +0,0 @@
|
|||||||
import * as React from "react";
|
|
||||||
import {
|
|
||||||
Box,
|
|
||||||
Container,
|
|
||||||
Grid,
|
|
||||||
ToggleButton,
|
|
||||||
ToggleButtonGroup,
|
|
||||||
Button
|
|
||||||
} from "@mui/material";
|
|
||||||
import { useTheme, alpha } from "@mui/material/styles";
|
|
||||||
import { DashboardViewProps } from "./Dashboard.models";
|
|
||||||
|
|
||||||
export default function DashboardView({
|
|
||||||
config,
|
|
||||||
data,
|
|
||||||
state,
|
|
||||||
stateSetters,
|
|
||||||
isFetching,
|
|
||||||
}: DashboardViewProps) {
|
|
||||||
const theme = useTheme();
|
|
||||||
|
|
||||||
const {
|
|
||||||
flow,
|
|
||||||
selectedGroupKey,
|
|
||||||
} = state;
|
|
||||||
|
|
||||||
const colorScheme = flow === "outflows" ? theme.palette.flows.outflows : theme.palette.flows.inflows;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Container
|
|
||||||
sx={{
|
|
||||||
mt: 4,
|
|
||||||
mb: 4,
|
|
||||||
background: `linear-gradient(180deg, ${alpha(colorScheme.primary, theme.palette.mode === "dark" ? 0.06 : 0.04)} 0%, transparent 100%)`,
|
|
||||||
borderRadius: 4,
|
|
||||||
p: 2,
|
|
||||||
transition: "background 0.3s ease",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
alignItems: "center",
|
|
||||||
mb: 3,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<ToggleButtonGroup
|
|
||||||
value={flow}
|
|
||||||
exclusive
|
|
||||||
onChange={stateSetters.toggleFlow}
|
|
||||||
sx={{
|
|
||||||
borderRadius: 3,
|
|
||||||
overflow: "hidden",
|
|
||||||
"& .MuiToggleButton-root": {
|
|
||||||
px: 3,
|
|
||||||
textTransform: "none",
|
|
||||||
color: "text.secondary",
|
|
||||||
},
|
|
||||||
"&.Mui-selected": {
|
|
||||||
bgcolor: colorScheme.primary,
|
|
||||||
color: "white",
|
|
||||||
borderColor: colorScheme.primary,
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<ToggleButton value="outflows">Outflows</ToggleButton>
|
|
||||||
<ToggleButton value="inflows">Inflows</ToggleButton>
|
|
||||||
</ToggleButtonGroup>
|
|
||||||
|
|
||||||
{selectedGroupKey && Object.keys(selectedGroupKey).length > 0 && (
|
|
||||||
<Button
|
|
||||||
size="small"
|
|
||||||
sx={{ mt: 1, textTransform: "none" }}
|
|
||||||
onClick={() => stateSetters.setSelectedGroupKey(null)}
|
|
||||||
>
|
|
||||||
Clear Drill-down
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
<Grid container spacing={4}>
|
|
||||||
{config.sections.map((section) => {
|
|
||||||
const Component = section.component;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Grid key={section.id} size={12}>
|
|
||||||
<Component
|
|
||||||
{...section}
|
|
||||||
|
|
||||||
reportData={data}
|
|
||||||
|
|
||||||
state={state}
|
|
||||||
stateSetters={stateSetters}
|
|
||||||
isFetching={isFetching}
|
|
||||||
|
|
||||||
colorScheme={colorScheme}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</Grid>
|
|
||||||
</Container>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,2 +0,0 @@
|
|||||||
export { default } from "./Dashboard.view";
|
|
||||||
export * from "./Dashboard.models";
|
|
||||||
@@ -1,73 +0,0 @@
|
|||||||
import { ReportData } from "../../features/report";
|
|
||||||
import {
|
|
||||||
mergeBucketPeriods,
|
|
||||||
getAmount,
|
|
||||||
PeriodKey,
|
|
||||||
} from "../report.helpers";
|
|
||||||
import { ChartDataPoint } from "./HistoryChart.models";
|
|
||||||
|
|
||||||
// ─── Tab → PeriodKey ─────────────────────────────────────────
|
|
||||||
|
|
||||||
const TAB_TO_KEY: Record<string, PeriodKey> = {
|
|
||||||
Daily: "daily",
|
|
||||||
Weekly: "weekly",
|
|
||||||
Monthly: "monthly",
|
|
||||||
"All Time": "all",
|
|
||||||
};
|
|
||||||
|
|
||||||
export function tabToKey(tab: string): PeriodKey {
|
|
||||||
return TAB_TO_KEY[tab] ?? "all";
|
|
||||||
}
|
|
||||||
|
|
||||||
// ─── Comparison ──────────────────────────────────────────────
|
|
||||||
|
|
||||||
function attachComparison(
|
|
||||||
points: ChartDataPoint[],
|
|
||||||
key: PeriodKey
|
|
||||||
): ChartDataPoint[] {
|
|
||||||
const getCompareIndex = (i: number) => {
|
|
||||||
if (key === "daily") return i - 7;
|
|
||||||
if (key === "weekly") return i - 4;
|
|
||||||
if (key === "monthly") return i - 12;
|
|
||||||
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,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// ─── Main adapter ────────────────────────────────────────────
|
|
||||||
|
|
||||||
export function buildChartData(
|
|
||||||
reportData: ReportData,
|
|
||||||
key: PeriodKey,
|
|
||||||
flow: "outflows" | "inflows",
|
|
||||||
comparison: boolean
|
|
||||||
): ChartDataPoint[] {
|
|
||||||
const merged = mergeBucketPeriods(reportData.buckets, key);
|
|
||||||
|
|
||||||
let points: ChartDataPoint[] = merged.map((p) => ({
|
|
||||||
id: p.id,
|
|
||||||
label: p.label,
|
|
||||||
amount: getAmount(p),
|
|
||||||
}));
|
|
||||||
|
|
||||||
if (comparison) {
|
|
||||||
points = attachComparison(points, key);
|
|
||||||
}
|
|
||||||
|
|
||||||
return points;
|
|
||||||
}
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
export interface _ChartDataPoint {
|
|
||||||
id: string;
|
|
||||||
label: string;
|
|
||||||
amount: number;
|
|
||||||
highlighted?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ChartDataPoint extends _ChartDataPoint {
|
|
||||||
compare?: _ChartDataPoint;
|
|
||||||
}
|
|
||||||
@@ -1,21 +0,0 @@
|
|||||||
import * as React from "react";
|
|
||||||
import { ComponentProps } from "../Dashboard";
|
|
||||||
import { ChartDataPoint } from "./HistoryChart.models";
|
|
||||||
|
|
||||||
export interface HistoryChartProps extends ComponentProps {
|
|
||||||
settings: {
|
|
||||||
tabs: string[];
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface HistoryChartViewProps 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;
|
|
||||||
}
|
|
||||||
@@ -1,96 +0,0 @@
|
|||||||
import * as React from "react";
|
|
||||||
import HistoryChartView from "./HistoryChart.view";
|
|
||||||
import { buildChartData, tabToKey } from "./HistoryChart.adapter";
|
|
||||||
import { HistoryChartProps } from "./HistoryChart.props";
|
|
||||||
|
|
||||||
|
|
||||||
export default function HistoryChart(props: HistoryChartProps) {
|
|
||||||
const {
|
|
||||||
settings,
|
|
||||||
reportData,
|
|
||||||
state,
|
|
||||||
stateSetters,
|
|
||||||
|
|
||||||
isFetching,
|
|
||||||
} = props;
|
|
||||||
|
|
||||||
const { flow, comparison, selectedPeriodId } = state;
|
|
||||||
const { setSelectedPeriodId } = stateSetters;
|
|
||||||
const { tabs } = settings;
|
|
||||||
|
|
||||||
const [activeTab, setActiveTab] = React.useState<string>(tabs[0] || "");
|
|
||||||
const [startIndex, setStartIndex] = React.useState(0);
|
|
||||||
|
|
||||||
const activeDataKey = tabToKey(activeTab);
|
|
||||||
|
|
||||||
const currentData = React.useMemo(() => {
|
|
||||||
return buildChartData(reportData, activeDataKey, flow, comparison);
|
|
||||||
}, [reportData, activeDataKey, flow, 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 = {
|
|
||||||
daily: 7,
|
|
||||||
weekly: 6,
|
|
||||||
monthly: 4,
|
|
||||||
all: 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]);
|
|
||||||
|
|
||||||
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}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,27 +0,0 @@
|
|||||||
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))})`;
|
|
||||||
};
|
|
||||||
@@ -1,205 +0,0 @@
|
|||||||
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 {
|
|
||||||
HistoryChartViewProps,
|
|
||||||
} from "./HistoryChart.props";
|
|
||||||
import { formatDisplay } from "./HistoryChart.utils";
|
|
||||||
|
|
||||||
export default function HistoryChartView({
|
|
||||||
title,
|
|
||||||
summary,
|
|
||||||
settings,
|
|
||||||
|
|
||||||
state,
|
|
||||||
stateSetters,
|
|
||||||
isFetching,
|
|
||||||
|
|
||||||
colorScheme,
|
|
||||||
|
|
||||||
activeTab,
|
|
||||||
setActiveTab,
|
|
||||||
currentData,
|
|
||||||
visibleData,
|
|
||||||
maxAmount,
|
|
||||||
visibleCount,
|
|
||||||
startIndex,
|
|
||||||
setStartIndex,
|
|
||||||
activeDataKey,
|
|
||||||
}: HistoryChartViewProps) {
|
|
||||||
|
|
||||||
const { flow, periodType, selectedPeriodId, comparison } = state;
|
|
||||||
const { togglePeriodType, setSelectedPeriodId, toggleComparison } = stateSetters;
|
|
||||||
|
|
||||||
const theme = useTheme();
|
|
||||||
const isDark = theme.palette.mode === "dark";
|
|
||||||
|
|
||||||
const total = currentData.length;
|
|
||||||
const maxStartIndex = Math.max(total - visibleCount, 0);
|
|
||||||
const clampedStartIndex = Math.min(startIndex, maxStartIndex);
|
|
||||||
|
|
||||||
const handleTabChange = (_: React.MouseEvent<HTMLElement>, newTab: string | null) => {
|
|
||||||
if (newTab !== null) setActiveTab(newTab);
|
|
||||||
};
|
|
||||||
|
|
||||||
const canGoLeft = clampedStartIndex > 0;
|
|
||||||
const canGoRight = clampedStartIndex < maxStartIndex;
|
|
||||||
|
|
||||||
const handlePrev = () => {
|
|
||||||
if (!canGoLeft) return;
|
|
||||||
setStartIndex((prev) => Math.max(prev - visibleCount, 0));
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleNext = () => {
|
|
||||||
if (!canGoRight) return;
|
|
||||||
setStartIndex((prev) => {
|
|
||||||
const next = prev + visibleCount;
|
|
||||||
return Math.min(next, maxStartIndex);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
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.surface,
|
|
||||||
opacity: isFetching ? 0.6 : 1,
|
|
||||||
transition: "opacity 0.3s ease",
|
|
||||||
pointerEvents: isFetching ? "none" : "auto",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Typography variant="h6" fontWeight={700} gutterBottom>
|
|
||||||
{title}
|
|
||||||
</Typography>
|
|
||||||
|
|
||||||
{summary && (
|
|
||||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
|
|
||||||
{summary}
|
|
||||||
</Typography>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<ToggleButtonGroup value={activeTab} exclusive onChange={handleTabChange} fullWidth sx={{ mb: 4 }}>
|
|
||||||
{settings.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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,2 +0,0 @@
|
|||||||
export { default } from "./HistoryChart";
|
|
||||||
export * from "./HistoryChart.models";
|
|
||||||
@@ -1,31 +0,0 @@
|
|||||||
import { ReportData, GroupKey } from "../../features/report";
|
|
||||||
import {
|
|
||||||
formatCurrency,
|
|
||||||
extractFilteredTransactions,
|
|
||||||
} from "../report.helpers";
|
|
||||||
import { LatestItem } from "./LatestItems.models";
|
|
||||||
|
|
||||||
// ─── Main adapter ────────────────────────────────────────────
|
|
||||||
|
|
||||||
export function buildLatestItems(
|
|
||||||
reportData: ReportData,
|
|
||||||
selectedPeriodId: string | null | undefined,
|
|
||||||
selectedGroupKey: GroupKey | null | undefined,
|
|
||||||
flow: "outflows" | "inflows"
|
|
||||||
): LatestItem[] {
|
|
||||||
const txns = extractFilteredTransactions(reportData, selectedPeriodId, selectedGroupKey);
|
|
||||||
|
|
||||||
return txns
|
|
||||||
.sort(
|
|
||||||
(a, b) =>
|
|
||||||
new Date(b.occurred_at).getTime() -
|
|
||||||
new Date(a.occurred_at).getTime()
|
|
||||||
)
|
|
||||||
.map((t, index) => ({
|
|
||||||
id: index + 1,
|
|
||||||
title: t.payee.name,
|
|
||||||
subtitle: t.tags.map((tag) => tag.name).join(", "),
|
|
||||||
amount: formatCurrency(t.amount),
|
|
||||||
timeAgo: new Date(t.occurred_at).toLocaleDateString("en-IN"),
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
export interface LatestItem {
|
|
||||||
id: string | number;
|
|
||||||
title: string;
|
|
||||||
subtitle: string;
|
|
||||||
amount: string;
|
|
||||||
timeAgo: string;
|
|
||||||
}
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
import { ComponentProps } from "../Dashboard";
|
|
||||||
import { LatestItem } from "./LatestItems.models";
|
|
||||||
|
|
||||||
export interface LatestItemsProps extends ComponentProps {}
|
|
||||||
|
|
||||||
export interface LatestItemsViewProps extends LatestItemsProps {
|
|
||||||
items: LatestItem[];
|
|
||||||
canExpand: boolean;
|
|
||||||
onExpand: () => void;
|
|
||||||
}
|
|
||||||
@@ -1,40 +0,0 @@
|
|||||||
import * as React from "react";
|
|
||||||
import { buildLatestItems } from "./LatestItems.adapter";
|
|
||||||
import LatestItemsView from "./LatestItems.view";
|
|
||||||
import { LatestItemsProps } from "./LatestItems.props";
|
|
||||||
|
|
||||||
export default function LatestItems(props: LatestItemsProps) {
|
|
||||||
const {
|
|
||||||
reportData,
|
|
||||||
state,
|
|
||||||
stateSetters,
|
|
||||||
isFetching,
|
|
||||||
} = props;
|
|
||||||
|
|
||||||
const { flow, selectedPeriodId, selectedGroupKey } = state;
|
|
||||||
const [visibleCount, setVisibleCount] = React.useState(5);
|
|
||||||
|
|
||||||
// Reset count when flow changes to start clean
|
|
||||||
React.useEffect(() => {
|
|
||||||
setVisibleCount(5);
|
|
||||||
}, [flow]);
|
|
||||||
|
|
||||||
const allItems = React.useMemo(() => {
|
|
||||||
return buildLatestItems(reportData, selectedPeriodId, selectedGroupKey, flow);
|
|
||||||
}, [reportData, selectedPeriodId, selectedGroupKey, flow]);
|
|
||||||
|
|
||||||
const visibleItems = React.useMemo(() => {
|
|
||||||
return allItems.slice(0, visibleCount);
|
|
||||||
}, [allItems, visibleCount]);
|
|
||||||
|
|
||||||
const canExpand = visibleCount < allItems.length;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<LatestItemsView
|
|
||||||
{...props}
|
|
||||||
items={visibleItems}
|
|
||||||
canExpand={canExpand}
|
|
||||||
onExpand={() => setVisibleCount((prev) => prev + 5)}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,93 +0,0 @@
|
|||||||
import * as React from "react";
|
|
||||||
import {
|
|
||||||
List,
|
|
||||||
ListItem,
|
|
||||||
ListItemAvatar,
|
|
||||||
ListItemText,
|
|
||||||
Avatar,
|
|
||||||
Typography,
|
|
||||||
Box,
|
|
||||||
IconButton,
|
|
||||||
} from "@mui/material";
|
|
||||||
import { alpha } from "@mui/material/styles";
|
|
||||||
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
|
||||||
import { LatestItemsViewProps } from "./LatestItems.props";
|
|
||||||
|
|
||||||
export default function LatestItemsView({
|
|
||||||
items,
|
|
||||||
title,
|
|
||||||
canExpand,
|
|
||||||
onExpand,
|
|
||||||
isFetching,
|
|
||||||
colorScheme,
|
|
||||||
}: LatestItemsViewProps) {
|
|
||||||
const accentColor = colorScheme?.primary || "";
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Box sx={{ width: "100%", bgcolor: "background.paper", borderRadius: 4, p: 2, opacity: isFetching ? 0.6 : 1, transition: "opacity 0.3s ease", pointerEvents: isFetching ? "none" : "auto" }}>
|
|
||||||
<Box sx={{ mb: 2, px: 2 }}>
|
|
||||||
<Typography variant="h6" fontWeight="bold">
|
|
||||||
{title}
|
|
||||||
</Typography>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
<List disablePadding>
|
|
||||||
{items.map((item, index) => (
|
|
||||||
<ListItem
|
|
||||||
key={item.id}
|
|
||||||
sx={{
|
|
||||||
px: { xs: 1, sm: 2 },
|
|
||||||
py: 2,
|
|
||||||
mb: index !== items.length - 1 ? 1 : 0,
|
|
||||||
borderRadius: 3,
|
|
||||||
"&:hover": { bgcolor: "action.hover" },
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<ListItemAvatar>
|
|
||||||
<Avatar
|
|
||||||
variant="rounded"
|
|
||||||
sx={{
|
|
||||||
bgcolor: alpha(accentColor, 0.13),
|
|
||||||
width: 48,
|
|
||||||
height: 48,
|
|
||||||
borderRadius: 3,
|
|
||||||
mr: 2,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</ListItemAvatar>
|
|
||||||
|
|
||||||
<ListItemText
|
|
||||||
primary={
|
|
||||||
<Typography variant="subtitle1" fontWeight={600}>
|
|
||||||
{item.title}
|
|
||||||
</Typography>
|
|
||||||
}
|
|
||||||
secondary={
|
|
||||||
<Typography variant="body2" color="text.secondary">
|
|
||||||
{item.subtitle}
|
|
||||||
</Typography>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Box sx={{ textAlign: "right" }}>
|
|
||||||
<Typography variant="subtitle1" fontWeight={700}>
|
|
||||||
{item.amount}
|
|
||||||
</Typography>
|
|
||||||
<Typography variant="caption" color="text.secondary">
|
|
||||||
{item.timeAgo}
|
|
||||||
</Typography>
|
|
||||||
</Box>
|
|
||||||
</ListItem>
|
|
||||||
))}
|
|
||||||
|
|
||||||
{canExpand && (
|
|
||||||
<Box sx={{ display: "flex", justifyContent: "center", mt: 2 }}>
|
|
||||||
<IconButton size="small" onClick={onExpand}>
|
|
||||||
<ExpandMoreIcon />
|
|
||||||
</IconButton>
|
|
||||||
</Box>
|
|
||||||
)}
|
|
||||||
</List>
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,2 +0,0 @@
|
|||||||
export { default } from "./LatestItems";
|
|
||||||
export * from "./LatestItems.models";
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
import { ComponentProps } from "../Dashboard";
|
|
||||||
|
|
||||||
export interface ProgressCardProps extends ComponentProps {
|
|
||||||
settings: {
|
|
||||||
compact: boolean;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ProgressCardViewProps extends ProgressCardProps {
|
|
||||||
progressAmount: number;
|
|
||||||
totalAmount: number;
|
|
||||||
selected: boolean;
|
|
||||||
onClick: () => void;
|
|
||||||
}
|
|
||||||
@@ -1,129 +0,0 @@
|
|||||||
import * as React from "react";
|
|
||||||
import {
|
|
||||||
Box,
|
|
||||||
Typography,
|
|
||||||
Paper,
|
|
||||||
LinearProgress,
|
|
||||||
Divider,
|
|
||||||
linearProgressClasses
|
|
||||||
} from "@mui/material";
|
|
||||||
import { useTheme, alpha } from "@mui/material/styles";
|
|
||||||
import { getPercentage, formatCurrency } from "../report.helpers";
|
|
||||||
import { ProgressCardViewProps } from "./ProgressCard.props";
|
|
||||||
|
|
||||||
export default function ProgressCardView({
|
|
||||||
title,
|
|
||||||
settings,
|
|
||||||
|
|
||||||
isFetching,
|
|
||||||
|
|
||||||
colorScheme,
|
|
||||||
|
|
||||||
progressAmount,
|
|
||||||
totalAmount,
|
|
||||||
selected,
|
|
||||||
onClick,
|
|
||||||
}: ProgressCardViewProps) {
|
|
||||||
const theme = useTheme();
|
|
||||||
|
|
||||||
const percentage = getPercentage(progressAmount, totalAmount);
|
|
||||||
const formattedProgress = formatCurrency(progressAmount);
|
|
||||||
const formattedTotal = formatCurrency(totalAmount);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Paper
|
|
||||||
elevation={settings.compact ? 2 : 4}
|
|
||||||
onClick={onClick}
|
|
||||||
sx={{
|
|
||||||
width: "100%",
|
|
||||||
p: settings.compact ? { xs: 2.5, md: 3 } : { xs: 3, md: 4 },
|
|
||||||
borderRadius: settings.compact ? 3 : 4,
|
|
||||||
transform: selected ? "scale(1.02)" : "scale(1)",
|
|
||||||
transition: "transform 0.2s ease, box-shadow 0.2s ease",
|
|
||||||
bgcolor: colorScheme.surface,
|
|
||||||
color: colorScheme.text,
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
alignItems: settings.compact ? "flex-start" : "center",
|
|
||||||
justifyContent: "center",
|
|
||||||
position: "relative",
|
|
||||||
overflow: "hidden",
|
|
||||||
border: selected
|
|
||||||
? `2px solid ${colorScheme.primary}`
|
|
||||||
: "1px solid",
|
|
||||||
borderColor: selected ? colorScheme.primary : "divider",
|
|
||||||
boxShadow: "none",
|
|
||||||
opacity: isFetching ? 0.6 : 1,
|
|
||||||
pointerEvents: isFetching ? "none" : "auto",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Typography
|
|
||||||
variant={settings.compact ? "body2" : "subtitle1"}
|
|
||||||
fontWeight={700}
|
|
||||||
sx={{
|
|
||||||
opacity: 0.95,
|
|
||||||
mb: settings.compact ? 1.5 : 2,
|
|
||||||
width: "100%",
|
|
||||||
overflow: "hidden",
|
|
||||||
textOverflow: "ellipsis",
|
|
||||||
whiteSpace: "nowrap",
|
|
||||||
letterSpacing: 0.5,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{title}
|
|
||||||
</Typography>
|
|
||||||
|
|
||||||
<Box sx={{ mb: settings.compact ? 2 : 3, width: "100%" }}>
|
|
||||||
<Typography
|
|
||||||
variant={settings.compact ? "h5" : "h3"}
|
|
||||||
fontWeight={900}
|
|
||||||
sx={{
|
|
||||||
mb: 0.5,
|
|
||||||
lineHeight: 1.2,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{formattedProgress}
|
|
||||||
</Typography>
|
|
||||||
|
|
||||||
<Divider
|
|
||||||
sx={{
|
|
||||||
my: 1,
|
|
||||||
borderColor: "divider",
|
|
||||||
width: "100%",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Typography
|
|
||||||
variant={settings.compact ? "caption" : "body2"}
|
|
||||||
sx={{
|
|
||||||
opacity: 0.85,
|
|
||||||
fontWeight: 500,
|
|
||||||
display: "block",
|
|
||||||
color: alpha(colorScheme.text, 0.85),
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
of {formattedTotal}
|
|
||||||
</Typography>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
<Box sx={{ width: "100%", mt: "auto" }}>
|
|
||||||
<LinearProgress
|
|
||||||
variant="determinate"
|
|
||||||
value={percentage}
|
|
||||||
sx={{
|
|
||||||
height: settings.compact ? 6 : 10,
|
|
||||||
borderRadius: 5,
|
|
||||||
[`&.${linearProgressClasses.colorPrimary}`]: {
|
|
||||||
backgroundColor: alpha(theme.palette.divider, 0.5),
|
|
||||||
},
|
|
||||||
[`& .${linearProgressClasses.bar}`]: {
|
|
||||||
borderRadius: 5,
|
|
||||||
backgroundColor: colorScheme.primary,
|
|
||||||
boxShadow: `0 0 8px ${alpha(colorScheme.primary, 0.4)}`,
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
</Paper>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,31 +0,0 @@
|
|||||||
import { GroupKey, ReportData } from "../../features/report";
|
|
||||||
import {
|
|
||||||
extractFilteredTransactions,
|
|
||||||
aggregateTransactions,
|
|
||||||
} from "../report.helpers";
|
|
||||||
|
|
||||||
export interface PayeeItem {
|
|
||||||
name: string;
|
|
||||||
amount: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function extractTopPayees(
|
|
||||||
reportData: ReportData,
|
|
||||||
flow: "outflows" | "inflows",
|
|
||||||
selectedPeriodId?: string | null,
|
|
||||||
selectedGroupKey?: GroupKey | null
|
|
||||||
): { items: PayeeItem[]; total: number } {
|
|
||||||
const txns = extractFilteredTransactions(reportData, selectedPeriodId, selectedGroupKey);
|
|
||||||
|
|
||||||
const { items, total } = aggregateTransactions(txns, (txn) => {
|
|
||||||
if (txn.payee && txn.payee.name) {
|
|
||||||
return [txn.payee.name];
|
|
||||||
}
|
|
||||||
return [];
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
items,
|
|
||||||
total,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@@ -1,83 +0,0 @@
|
|||||||
import * as React from "react";
|
|
||||||
import { Box, Paper, Typography } from "@mui/material";
|
|
||||||
import ProgressCardView from "./ProgressCard.view";
|
|
||||||
import { extractTopPayees } from "./TopPayees.adapter";
|
|
||||||
import { ProgressCardProps } from "./ProgressCard.props";
|
|
||||||
|
|
||||||
export default function TopPayees(props: ProgressCardProps) {
|
|
||||||
const {
|
|
||||||
title,
|
|
||||||
|
|
||||||
reportData,
|
|
||||||
state,
|
|
||||||
stateSetters,
|
|
||||||
|
|
||||||
isFetching,
|
|
||||||
} = props
|
|
||||||
const { flow, selectedPeriodId, selectedGroupKey } = state;
|
|
||||||
const { setSelectedGroupKey } = stateSetters;
|
|
||||||
|
|
||||||
const { items, total } = React.useMemo(() => {
|
|
||||||
return extractTopPayees(reportData, flow, selectedPeriodId, selectedGroupKey);
|
|
||||||
}, [reportData, flow, selectedPeriodId, selectedGroupKey]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Paper
|
|
||||||
sx={{
|
|
||||||
p: { xs: 2.5, sm: 4 },
|
|
||||||
borderRadius: 4,
|
|
||||||
width: "100%",
|
|
||||||
boxShadow: "none",
|
|
||||||
border: "1px solid",
|
|
||||||
borderColor: "divider",
|
|
||||||
bgcolor: "background.paper",
|
|
||||||
opacity: isFetching ? 0.6 : 1,
|
|
||||||
transition: "opacity 0.3s ease",
|
|
||||||
pointerEvents: isFetching ? "none" : "auto",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Typography variant="h6" fontWeight={700} gutterBottom>
|
|
||||||
{title}
|
|
||||||
</Typography>
|
|
||||||
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
display: "grid",
|
|
||||||
gridTemplateColumns: {
|
|
||||||
xs: "1fr",
|
|
||||||
sm: "repeat(2, 1fr)",
|
|
||||||
md: "repeat(4, 1fr)",
|
|
||||||
},
|
|
||||||
gap: 2,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{items.map((item) => {
|
|
||||||
const isSelected = !!selectedGroupKey?.payee?.includes(item.name);
|
|
||||||
return (
|
|
||||||
<ProgressCardView
|
|
||||||
{...props}
|
|
||||||
key={item.name}
|
|
||||||
title={item.name}
|
|
||||||
progressAmount={item.amount}
|
|
||||||
totalAmount={total}
|
|
||||||
selected={isSelected}
|
|
||||||
onClick={() => {
|
|
||||||
if (setSelectedGroupKey) {
|
|
||||||
let newKey = selectedGroupKey ? { ...selectedGroupKey } : {};
|
|
||||||
|
|
||||||
if (isSelected) {
|
|
||||||
delete newKey.payee;
|
|
||||||
} else {
|
|
||||||
newKey.payee = [item.name];
|
|
||||||
}
|
|
||||||
|
|
||||||
setSelectedGroupKey(Object.keys(newKey).length ? newKey : null);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</Box>
|
|
||||||
</Paper>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,31 +0,0 @@
|
|||||||
import { ReportData, GroupKey } from "../../features/report";
|
|
||||||
import {
|
|
||||||
extractFilteredTransactions,
|
|
||||||
aggregateTransactions,
|
|
||||||
} from "../report.helpers";
|
|
||||||
|
|
||||||
export interface TagItem {
|
|
||||||
tag: string;
|
|
||||||
amount: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function extractTopTags(
|
|
||||||
reportData: ReportData,
|
|
||||||
flow: "outflows" | "inflows",
|
|
||||||
selectedPeriodId?: string | null,
|
|
||||||
selectedGroupKey?: GroupKey | null
|
|
||||||
): { items: TagItem[]; total: number } {
|
|
||||||
const txns = extractFilteredTransactions(reportData, selectedPeriodId, selectedGroupKey);
|
|
||||||
|
|
||||||
const { items, total } = aggregateTransactions(txns, (txn) => {
|
|
||||||
if (txn.tags && txn.tags.length > 0) {
|
|
||||||
return txn.tags.map((t) => (typeof t === "string" ? t : t.name));
|
|
||||||
}
|
|
||||||
return ["Untagged"];
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
items: items.map((item) => ({ tag: item.name, amount: item.amount })),
|
|
||||||
total,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@@ -1,83 +0,0 @@
|
|||||||
import * as React from "react";
|
|
||||||
import { Box, Paper, Typography } from "@mui/material";
|
|
||||||
import ProgressCardView from "./ProgressCard.view";
|
|
||||||
import { extractTopTags } from "./TopTags.adapter";
|
|
||||||
import { ProgressCardProps } from "./ProgressCard.props";
|
|
||||||
|
|
||||||
export default function TopTags(props: ProgressCardProps) {
|
|
||||||
const {
|
|
||||||
title,
|
|
||||||
|
|
||||||
reportData,
|
|
||||||
state,
|
|
||||||
stateSetters,
|
|
||||||
|
|
||||||
isFetching,
|
|
||||||
} = props
|
|
||||||
const { flow, selectedPeriodId, selectedGroupKey } = state;
|
|
||||||
const { setSelectedGroupKey } = stateSetters;
|
|
||||||
|
|
||||||
const { items, total } = React.useMemo(() => {
|
|
||||||
return extractTopTags(reportData, flow, selectedPeriodId, selectedGroupKey);
|
|
||||||
}, [reportData, flow, selectedPeriodId, selectedGroupKey]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Paper
|
|
||||||
sx={{
|
|
||||||
p: { xs: 2.5, sm: 4 },
|
|
||||||
borderRadius: 4,
|
|
||||||
width: "100%",
|
|
||||||
boxShadow: "none",
|
|
||||||
border: "1px solid",
|
|
||||||
borderColor: "divider",
|
|
||||||
bgcolor: "background.paper",
|
|
||||||
opacity: isFetching ? 0.6 : 1,
|
|
||||||
transition: "opacity 0.3s ease",
|
|
||||||
pointerEvents: isFetching ? "none" : "auto",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Typography variant="h6" fontWeight={700} gutterBottom>
|
|
||||||
{title}
|
|
||||||
</Typography>
|
|
||||||
|
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
display: "grid",
|
|
||||||
gridTemplateColumns: {
|
|
||||||
xs: "1fr",
|
|
||||||
sm: "repeat(2, 1fr)",
|
|
||||||
md: "repeat(4, 1fr)",
|
|
||||||
},
|
|
||||||
gap: 2,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{items.map((item) => {
|
|
||||||
const isSelected = !!selectedGroupKey?.tags?.includes(item.tag);
|
|
||||||
return (
|
|
||||||
<ProgressCardView
|
|
||||||
{...props}
|
|
||||||
key={item.tag}
|
|
||||||
title={item.tag}
|
|
||||||
progressAmount={item.amount}
|
|
||||||
totalAmount={total}
|
|
||||||
selected={isSelected}
|
|
||||||
onClick={() => {
|
|
||||||
if (setSelectedGroupKey) {
|
|
||||||
let newKey = selectedGroupKey ? { ...selectedGroupKey } : {};
|
|
||||||
|
|
||||||
if (isSelected) {
|
|
||||||
delete newKey.tags;
|
|
||||||
} else {
|
|
||||||
newKey.tags = [item.tag];
|
|
||||||
}
|
|
||||||
|
|
||||||
setSelectedGroupKey(Object.keys(newKey).length ? newKey : null);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</Box>
|
|
||||||
</Paper>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,2 +0,0 @@
|
|||||||
export { default } from "./ProgressCard.view";
|
|
||||||
export * from "./ProgressCard.props";
|
|
||||||
@@ -1,230 +0,0 @@
|
|||||||
import {
|
|
||||||
ReportPeriod,
|
|
||||||
ReportBucket,
|
|
||||||
GroupKey,
|
|
||||||
PeriodType,
|
|
||||||
ReportData,
|
|
||||||
Transaction,
|
|
||||||
} from "../features/report";
|
|
||||||
|
|
||||||
// ─── Types ────────────────────────────────────────────────────
|
|
||||||
|
|
||||||
export type PeriodKey = PeriodType;
|
|
||||||
|
|
||||||
export type DecoratedPeriod = ReportPeriod & {
|
|
||||||
id: string;
|
|
||||||
label: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
// ─── Period helpers ───────────────────────────────────────────
|
|
||||||
|
|
||||||
const PREFIX_TO_KEY: Record<string, PeriodKey> = {
|
|
||||||
D: "daily",
|
|
||||||
W: "weekly",
|
|
||||||
M: "monthly",
|
|
||||||
ALL: "all",
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Derive the period key from a decorated-period id.
|
|
||||||
* E.g. `"W:2026-04-28_2026-05-04"` → `"weekly"`
|
|
||||||
*/
|
|
||||||
export function periodIdToKey(periodId: string): PeriodKey {
|
|
||||||
const prefix = periodId.split(":")[0];
|
|
||||||
return PREFIX_TO_KEY[prefix] ?? "all";
|
|
||||||
}
|
|
||||||
|
|
||||||
// ─── Metric helpers ───────────────────────────────────────────
|
|
||||||
|
|
||||||
export function getAmount(period: ReportPeriod): number {
|
|
||||||
return period.metric.sum;
|
|
||||||
}
|
|
||||||
|
|
||||||
function mergeMetric(a: ReportPeriod["metric"], b: ReportPeriod["metric"]) {
|
|
||||||
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,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Merge periods with the same id across all buckets, summing
|
|
||||||
* their metrics and concatenating transactions.
|
|
||||||
*
|
|
||||||
* Returns sorted by start date ascending.
|
|
||||||
*/
|
|
||||||
export function mergeBucketPeriods(
|
|
||||||
buckets: ReportBucket[],
|
|
||||||
key: PeriodKey
|
|
||||||
): 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,
|
|
||||||
metric: { ...p.metric },
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
map.set(p.id, {
|
|
||||||
...existing,
|
|
||||||
metric: mergeMetric(existing.metric, p.metric),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return Array.from(map.values()).sort(
|
|
||||||
(a, b) => new Date(a.start).getTime() - new Date(b.start).getTime()
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ─── Formatting ───────────────────────────────────────────────
|
|
||||||
|
|
||||||
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)}`;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const getPercentage = (progressAmount: number, totalAmount: number) => {
|
|
||||||
if (!totalAmount) return 0;
|
|
||||||
return Math.min(100, Math.max(0, (progressAmount / totalAmount) * 100));
|
|
||||||
};
|
|
||||||
|
|
||||||
// ─── Group filtering ──────────────────────────────────────────
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Check if a bucket's group_key matches the selected GroupKey.
|
|
||||||
* Every dimension present in `selected` must exist in the bucket
|
|
||||||
* and contain all the selected values.
|
|
||||||
*/
|
|
||||||
export function matchesGroupKey(
|
|
||||||
bucket: ReportBucket,
|
|
||||||
selected: GroupKey
|
|
||||||
): boolean {
|
|
||||||
for (const [dim, values] of Object.entries(selected)) {
|
|
||||||
const bucketValues = bucket.group_key[dim];
|
|
||||||
if (!bucketValues) return false;
|
|
||||||
if (!(values as string[]).every((v) => bucketValues.includes(v)))
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Return only buckets matching the selected group key,
|
|
||||||
* or all buckets if no selection.
|
|
||||||
*/
|
|
||||||
export function filterBuckets(
|
|
||||||
buckets: ReportBucket[],
|
|
||||||
selectedGroupKey: GroupKey | null
|
|
||||||
): ReportBucket[] {
|
|
||||||
if (!selectedGroupKey) return buckets;
|
|
||||||
return buckets.filter((b) => matchesGroupKey(b, selectedGroupKey));
|
|
||||||
}
|
|
||||||
|
|
||||||
export function extractFilteredTransactions(
|
|
||||||
reportData: ReportData,
|
|
||||||
selectedPeriodId: string | null | undefined,
|
|
||||||
selectedGroupKey: GroupKey | null | undefined
|
|
||||||
): Transaction[] {
|
|
||||||
let txns: Transaction[] = [];
|
|
||||||
|
|
||||||
if (selectedPeriodId) {
|
|
||||||
const key = periodIdToKey(selectedPeriodId);
|
|
||||||
const periods = mergeBucketPeriods(reportData.buckets, key);
|
|
||||||
const selected = periods.find((p) => p.id === selectedPeriodId);
|
|
||||||
txns = selected?.metric.transactions || [];
|
|
||||||
} else {
|
|
||||||
const periods = mergeBucketPeriods(reportData.buckets, "all");
|
|
||||||
if (periods.length > 0) {
|
|
||||||
const period = periods.reduce((latest, p) =>
|
|
||||||
new Date(p.start).getTime() > new Date(latest.start).getTime()
|
|
||||||
? p
|
|
||||||
: latest
|
|
||||||
, periods[0]);
|
|
||||||
txns = period?.metric.transactions || [];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (selectedGroupKey) {
|
|
||||||
txns = txns.filter((txn) => {
|
|
||||||
let match = true;
|
|
||||||
if (selectedGroupKey.tags && selectedGroupKey.tags.length > 0) {
|
|
||||||
if (!txn.tags) {
|
|
||||||
match = false;
|
|
||||||
} else {
|
|
||||||
const txnTags = txn.tags.map((t: any) =>
|
|
||||||
typeof t === "string" ? t : t.name
|
|
||||||
);
|
|
||||||
if (
|
|
||||||
!selectedGroupKey.tags.every((selectedTag) =>
|
|
||||||
txnTags.includes(selectedTag)
|
|
||||||
)
|
|
||||||
) {
|
|
||||||
match = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (match && selectedGroupKey.payee && selectedGroupKey.payee.length > 0) {
|
|
||||||
if (!txn.payee || !txn.payee.name) {
|
|
||||||
match = false;
|
|
||||||
} else {
|
|
||||||
if (!selectedGroupKey.payee.includes(txn.payee.name)) {
|
|
||||||
match = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return match;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
return txns;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function aggregateTransactions(
|
|
||||||
transactions: Transaction[],
|
|
||||||
keyExtractor: (txn: Transaction) => string[],
|
|
||||||
limit = 4
|
|
||||||
): { items: { name: string; amount: number }[]; total: number } {
|
|
||||||
const map = new Map<string, number>();
|
|
||||||
|
|
||||||
for (const txn of transactions) {
|
|
||||||
const keys = keyExtractor(txn);
|
|
||||||
for (const key of keys) {
|
|
||||||
map.set(key, (map.get(key) || 0) + txn.amount);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const items = Array.from(map.entries()).map(([name, amount]) => ({
|
|
||||||
name,
|
|
||||||
amount,
|
|
||||||
}));
|
|
||||||
|
|
||||||
items.sort((a, b) => b.amount - a.amount);
|
|
||||||
|
|
||||||
const top = items.slice(0, limit);
|
|
||||||
const total = top.reduce((sum, item) => sum + item.amount, 0);
|
|
||||||
|
|
||||||
return { items: top, total };
|
|
||||||
}
|
|
||||||
@@ -1,40 +0,0 @@
|
|||||||
import HistoryChart from "./components/HistoryChart";
|
|
||||||
import LatestItems from "./components/LatestItems";
|
|
||||||
import { DashboardConfig } from "./components/Dashboard";
|
|
||||||
import TopTags from "./components/ProgressCard/TopTags";
|
|
||||||
import TopPayees from "./components/ProgressCard/TopPayees";
|
|
||||||
|
|
||||||
export const configuration: DashboardConfig = {
|
|
||||||
sections: [
|
|
||||||
{
|
|
||||||
id: "breakdown",
|
|
||||||
title: "Breakdown",
|
|
||||||
summary: "Interactive chronological tracking",
|
|
||||||
component: HistoryChart,
|
|
||||||
settings: {
|
|
||||||
tabs: ["Weekly", "Monthly"],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "top-categories",
|
|
||||||
title: 'Top Categories',
|
|
||||||
component: TopTags,
|
|
||||||
settings: {
|
|
||||||
compact: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "top-payees",
|
|
||||||
title: 'Top Payees',
|
|
||||||
component: TopPayees,
|
|
||||||
settings: {
|
|
||||||
compact: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "items",
|
|
||||||
title: 'Recent Transactions',
|
|
||||||
component: LatestItems,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
export type {
|
|
||||||
ReportSnapshot,
|
|
||||||
ReportQuery,
|
|
||||||
} from "./report-snapshots.models";
|
|
||||||
export {
|
|
||||||
useReportSnapshotsList,
|
|
||||||
useCreateSnapshot,
|
|
||||||
useDeleteSnapshot,
|
|
||||||
} from "./useReportSnapshots";
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
export interface ReportQuery {
|
|
||||||
accounts?: string[] | null;
|
|
||||||
ignore_self?: boolean | null;
|
|
||||||
start_date?: string | null;
|
|
||||||
end_date?: string | null;
|
|
||||||
min_amount?: number | null;
|
|
||||||
max_amount?: number | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ReportSnapshot {
|
|
||||||
id: string;
|
|
||||||
snapshot_id: string;
|
|
||||||
created_at: string;
|
|
||||||
query?: ReportQuery;
|
|
||||||
}
|
|
||||||
@@ -1,28 +0,0 @@
|
|||||||
import { useResource } from "../../../react-openapi";
|
|
||||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
||||||
|
|
||||||
export function useReportSnapshotsList() {
|
|
||||||
const { list } = useResource("reports");
|
|
||||||
return useQuery({
|
|
||||||
queryKey: ["reports", "list"],
|
|
||||||
queryFn: () => list(),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function useCreateSnapshot() {
|
|
||||||
const { create } = useResource("reports");
|
|
||||||
return useMutation({
|
|
||||||
mutationFn: (data: any) => create(data),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
export function useDeleteSnapshot() {
|
|
||||||
const queryClient = useQueryClient();
|
|
||||||
const { remove } = useResource("reports");
|
|
||||||
return useMutation({
|
|
||||||
mutationFn: (id: string) => remove(id),
|
|
||||||
onSuccess: () => {
|
|
||||||
queryClient.invalidateQueries({ queryKey: ["reports", "list"] });
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
export {
|
|
||||||
useReport
|
|
||||||
} from './useReport'
|
|
||||||
export type {
|
|
||||||
Transaction,
|
|
||||||
ReportData,
|
|
||||||
ReportBucket,
|
|
||||||
ReportPeriod,
|
|
||||||
ReportQuery,
|
|
||||||
GroupKey,
|
|
||||||
PeriodType,
|
|
||||||
} from './report.models'
|
|
||||||
export {
|
|
||||||
prepareReport
|
|
||||||
} from './report.utils'
|
|
||||||
@@ -1,112 +0,0 @@
|
|||||||
export interface Payor {
|
|
||||||
id?: string;
|
|
||||||
name: string;
|
|
||||||
username: string;
|
|
||||||
email: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface Payee {
|
|
||||||
type: "merchant" | "person" | "transfer" | "other";
|
|
||||||
name: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface Account {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
number: string;
|
|
||||||
type: "cash" | "bank" | "credit_card" | "wallet" | "other";
|
|
||||||
currency: string;
|
|
||||||
is_active?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface Tag {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
icon: string;
|
|
||||||
parent_id?: string | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface Transaction {
|
|
||||||
id: string;
|
|
||||||
payor: Payor;
|
|
||||||
payee: Payee;
|
|
||||||
amount: number;
|
|
||||||
account: Account;
|
|
||||||
tags: Tag[];
|
|
||||||
occurred_at: string;
|
|
||||||
created_at: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
// -----------------------------
|
|
||||||
// Metrics
|
|
||||||
// -----------------------------
|
|
||||||
|
|
||||||
export interface ReportMetric {
|
|
||||||
sum: number;
|
|
||||||
count: number;
|
|
||||||
average: number;
|
|
||||||
transactions?: Transaction[];
|
|
||||||
}
|
|
||||||
|
|
||||||
// -----------------------------
|
|
||||||
// Period
|
|
||||||
// -----------------------------
|
|
||||||
|
|
||||||
export type PeriodType = "daily" | "weekly" | "monthly" | "all";
|
|
||||||
|
|
||||||
export interface ReportPeriod {
|
|
||||||
start: string;
|
|
||||||
end: string;
|
|
||||||
metric: ReportMetric;
|
|
||||||
}
|
|
||||||
|
|
||||||
// -----------------------------
|
|
||||||
// Group (bucket)
|
|
||||||
// -----------------------------
|
|
||||||
|
|
||||||
export type GroupKey = {
|
|
||||||
[dimension: string]: string[];
|
|
||||||
};
|
|
||||||
|
|
||||||
export interface ReportBucket {
|
|
||||||
group_key: GroupKey;
|
|
||||||
|
|
||||||
periods: {
|
|
||||||
daily?: ReportPeriod[];
|
|
||||||
weekly?: ReportPeriod[];
|
|
||||||
monthly?: ReportPeriod[];
|
|
||||||
all?: ReportPeriod[];
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// -----------------------------
|
|
||||||
// Report Query
|
|
||||||
// -----------------------------
|
|
||||||
|
|
||||||
export interface ReportQuery {
|
|
||||||
accounts?: string[] | null;
|
|
||||||
ignore_self?: boolean | null;
|
|
||||||
start_date?: string | null;
|
|
||||||
end_date?: string | null;
|
|
||||||
min_amount?: number | null;
|
|
||||||
max_amount?: number | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
// -----------------------------
|
|
||||||
// Final Report
|
|
||||||
// -----------------------------
|
|
||||||
|
|
||||||
export interface ReportData {
|
|
||||||
snapshot_id?: string | null;
|
|
||||||
|
|
||||||
flow?: "inflows" | "outflows" | null;
|
|
||||||
|
|
||||||
periods: PeriodType[];
|
|
||||||
|
|
||||||
tags?: string[] | null;
|
|
||||||
payee?: string[] | null;
|
|
||||||
|
|
||||||
buckets: ReportBucket[];
|
|
||||||
|
|
||||||
query: ReportQuery;
|
|
||||||
}
|
|
||||||
@@ -1,117 +0,0 @@
|
|||||||
import {
|
|
||||||
ReportData,
|
|
||||||
ReportPeriod,
|
|
||||||
PeriodType,
|
|
||||||
} from "./report.models";
|
|
||||||
|
|
||||||
/* ---------- ID BUILDING ---------- */
|
|
||||||
|
|
||||||
function formatDate(d: Date): string {
|
|
||||||
const y = d.getUTCFullYear();
|
|
||||||
const m = String(d.getUTCMonth() + 1).padStart(2, "0");
|
|
||||||
const day = String(d.getUTCDate()).padStart(2, "0");
|
|
||||||
return `${y}-${m}-${day}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function buildPeriodId(
|
|
||||||
type: PeriodType,
|
|
||||||
start: Date,
|
|
||||||
end: Date
|
|
||||||
): string {
|
|
||||||
const s = formatDate(start);
|
|
||||||
const e = formatDate(end);
|
|
||||||
|
|
||||||
switch (type) {
|
|
||||||
case "daily":
|
|
||||||
return `D:${s}_${e}`;
|
|
||||||
case "weekly":
|
|
||||||
return `W:${s}_${e}`;
|
|
||||||
case "monthly":
|
|
||||||
return `M:${s}_${e}`;
|
|
||||||
case "all":
|
|
||||||
return `ALL:${s}_${e}`;
|
|
||||||
default:
|
|
||||||
return `${s}_${e}`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ---------- LABEL BUILDING ---------- */
|
|
||||||
|
|
||||||
const dayFmt = new Intl.DateTimeFormat("en-GB", {
|
|
||||||
day: "numeric",
|
|
||||||
month: "short",
|
|
||||||
timeZone: "UTC",
|
|
||||||
});
|
|
||||||
|
|
||||||
const monthDayFmt = new Intl.DateTimeFormat("en-GB", {
|
|
||||||
month: "short",
|
|
||||||
day: "numeric",
|
|
||||||
timeZone: "UTC",
|
|
||||||
});
|
|
||||||
|
|
||||||
const monthFmt = new Intl.DateTimeFormat("en-GB", {
|
|
||||||
month: "short",
|
|
||||||
timeZone: "UTC",
|
|
||||||
});
|
|
||||||
|
|
||||||
const yearFmt = new Intl.DateTimeFormat("en-GB", {
|
|
||||||
year: "numeric",
|
|
||||||
timeZone: "UTC",
|
|
||||||
});
|
|
||||||
|
|
||||||
function buildLabel(
|
|
||||||
type: PeriodType,
|
|
||||||
start: Date,
|
|
||||||
end: Date
|
|
||||||
): string {
|
|
||||||
switch (type) {
|
|
||||||
case "daily":
|
|
||||||
return dayFmt.format(start);
|
|
||||||
|
|
||||||
case "weekly": {
|
|
||||||
const sDay = start.getUTCDate();
|
|
||||||
const m = monthFmt.format(start);
|
|
||||||
return `${sDay} ${m}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
case "monthly":
|
|
||||||
return `${monthFmt.format(start)} ${yearFmt.format(start)}`;
|
|
||||||
|
|
||||||
default:
|
|
||||||
return `${monthDayFmt.format(start)} - ${monthDayFmt.format(end)}`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ---------- MAIN ---------- */
|
|
||||||
|
|
||||||
function decoratePeriods(
|
|
||||||
type: PeriodType,
|
|
||||||
periods: ReportPeriod[]
|
|
||||||
): (ReportPeriod & { id: string; label: string })[] {
|
|
||||||
return periods.map((p) => ({
|
|
||||||
...p,
|
|
||||||
id: buildPeriodId(type, new Date(p.start + "Z"), new Date(p.end + "Z")),
|
|
||||||
label: buildLabel(type, new Date(p.start + "Z"), new Date(p.end + "Z")),
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
|
|
||||||
export function prepareReport(reportData: ReportData): ReportData {
|
|
||||||
return {
|
|
||||||
...reportData,
|
|
||||||
buckets: reportData.buckets.map((bucket) => {
|
|
||||||
const newPeriods: typeof bucket.periods = {};
|
|
||||||
|
|
||||||
for (const type of reportData.periods) {
|
|
||||||
const arr = bucket.periods[type];
|
|
||||||
if (arr) {
|
|
||||||
newPeriods[type] = decoratePeriods(type, arr);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
...bucket,
|
|
||||||
periods: newPeriods,
|
|
||||||
};
|
|
||||||
}),
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
import { useResource } from "../../../react-openapi";
|
|
||||||
import { useQuery } from "@tanstack/react-query";
|
|
||||||
|
|
||||||
export interface ReportParams {
|
|
||||||
snapshot_id?: string;
|
|
||||||
periods?: ("daily" | "weekly" | "monthly" | "all")[];
|
|
||||||
flow?: "inflows" | "outflows";
|
|
||||||
payee?: string[];
|
|
||||||
tags?: string[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export function useReport(params: ReportParams) {
|
|
||||||
const { get } = useResource("reports");
|
|
||||||
|
|
||||||
const { snapshot_id, ...queryParams } = params;
|
|
||||||
|
|
||||||
return useQuery({
|
|
||||||
queryKey: ["reports", "read", params],
|
|
||||||
queryFn: () =>
|
|
||||||
get(snapshot_id ?? "latest", queryParams),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@@ -12,10 +12,8 @@ import {
|
|||||||
Toolbar
|
Toolbar
|
||||||
} from "@mui/material";
|
} from "@mui/material";
|
||||||
import Home from './Home';
|
import Home from './Home';
|
||||||
import Dashboard from './Dashboard';
|
|
||||||
import FetchRequests from './FetchRequests';
|
import FetchRequests from './FetchRequests';
|
||||||
import FetchRequestDetail from './FetchRequestDetail';
|
import FetchRequestDetail from './FetchRequestDetail';
|
||||||
import ReportSnapshots from './ReportSnapshots';
|
|
||||||
import { RequireAuth } from './RequireAuth';
|
import { RequireAuth } from './RequireAuth';
|
||||||
import { AppProvider, Admin } from '../react-openapi';
|
import { AppProvider, Admin } from '../react-openapi';
|
||||||
import { Buffer } from 'buffer';
|
import { Buffer } from 'buffer';
|
||||||
@@ -39,10 +37,8 @@ const AUTH_BASE = import.meta.env.VITE_AUTH_BASE_URL;
|
|||||||
const routerMapping = [
|
const routerMapping = [
|
||||||
{ path: "/", component: Home, headerTitle: "Home" },
|
{ path: "/", component: Home, headerTitle: "Home" },
|
||||||
{ path: "/home", component: Home, headerTitle: "Home" },
|
{ path: "/home", component: Home, headerTitle: "Home" },
|
||||||
{ path: "/dashboard", component: Dashboard, headerTitle: "Dashboard" },
|
|
||||||
{ path: "/fetch-requests", component: FetchRequests, headerTitle: "Fetch Requests" },
|
{ path: "/fetch-requests", component: FetchRequests, headerTitle: "Fetch Requests" },
|
||||||
{ path: "/fetch-requests/:id", component: FetchRequestDetail, headerTitle: "Fetch Request" },
|
{ path: "/fetch-requests/:id", component: FetchRequestDetail, headerTitle: "Fetch Request" },
|
||||||
{ path: "/reports", component: ReportSnapshots, headerTitle: "Reports" },
|
|
||||||
{ path: "/admin/*", component: Admin, headerTitle: "Admin" },
|
{ path: "/admin/*", component: Admin, headerTitle: "Admin" },
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user