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: "Reports", path: "/reports" },
|
||||
].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
|
||||
} from "@mui/material";
|
||||
import Home from './Home';
|
||||
import Dashboard from './Dashboard';
|
||||
import FetchRequests from './FetchRequests';
|
||||
import FetchRequestDetail from './FetchRequestDetail';
|
||||
import ReportSnapshots from './ReportSnapshots';
|
||||
import { RequireAuth } from './RequireAuth';
|
||||
import { AppProvider, Admin } from '../react-openapi';
|
||||
import { Buffer } from 'buffer';
|
||||
@@ -39,10 +37,8 @@ const AUTH_BASE = import.meta.env.VITE_AUTH_BASE_URL;
|
||||
const routerMapping = [
|
||||
{ path: "/", 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/:id", component: FetchRequestDetail, headerTitle: "Fetch Request" },
|
||||
{ path: "/reports", component: ReportSnapshots, headerTitle: "Reports" },
|
||||
{ path: "/admin/*", component: Admin, headerTitle: "Admin" },
|
||||
];
|
||||
|
||||
|
||||
Reference in New Issue
Block a user