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

rolling and calender toggle

Browse Source
This commit is contained in:
Vishesh 'ironeagle' Bangotra
2026-04-06 18:27:05 +05:30
parent 787324260c
commit fc88703a38
3 changed files with 133 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/Dashboard.tsx
View File

@@ -56,8 +56,8 @@ export default function Dashboard() {
] = await Promise.all([
fetchLatestTransactions("expense"),
fetchLatestTransactions("income"),
fetchAggregatedExpenses(period),
fetchAggregatedIncome(period)
fetchAggregatedExpenses(),
fetchAggregatedIncome()
]);
setLatest({
@@ -79,7 +79,7 @@ export default function Dashboard() {
}
loadData();
}, [period]);
}, []);
const currentData = aggregated[mode];
const currentLatest = latest[mode];

9
src/components/HistoryChart.tsx
View File

@@ -4,6 +4,7 @@ import { Box, Typography, ToggleButtonGroup, ToggleButton, Paper } from "@mui/ma
export interface ChartDataPoint {
id: string;
amount: number;
compareAmount?: number;
count?: number;
highlighted?: boolean;
}
@@ -34,7 +35,13 @@ export default function HistoryChart({
};
const activeDataKey = activeTab.toLowerCase();
const rawData = data[activeDataKey] || data[activeTab] || [];
let rawData;
if (activeDataKey === "daily") {
rawData = data.daily;
} else {
// @ts-ignore
rawData = data[activeDataKey]?.[period] || [];
}
const currentData = [...rawData].reverse();
const maxAmount =

154
src/utils/dashboardLoader.ts
View File

@@ -71,17 +71,26 @@ export async function fetchLatestTransactions(
}
// ---------------- TYPES ----------------
export interface ChartSeries {
rolling: ChartDataPoint[];
calendar: ChartDataPoint[];
}
export interface ChartData {
daily: ChartDataPoint[];
weekly: ChartSeries;
monthly: ChartSeries;
}
export interface AggregatedDashboardData {
chartData: Record<string, ChartDataPoint[]>;
chartData: ChartData;
totalAmount: number;
topPayees: Array<{ payeeName: string; amount: number }>;
}
// ---------------- AGGREGATION ----------------
// ---------------- AGGREGATION ----------------
export async function fetchAggregatedData(
type: "expense" | "income",
mode: "rolling" | "calendar" = "rolling"
type: "expense" | "income"
): Promise<AggregatedDashboardData> {
const res = await api.get("/expenses", { params: { limit: 0 } });
const all: any[] = res.data?.items || res.data || [];
@@ -96,7 +105,7 @@ export async function fetchAggregatedData(
const normalize = (amt: number) => Math.abs(amt);
// ---------------- WEEK ----------------
// ---------------- DAILY ----------------
const dailyBuckets: Record<string, number> = {
Mon: 0, Tue: 0, Wed: 0, Thu: 0,
Fri: 0, Sat: 0, Sun: 0
@@ -105,78 +114,82 @@ export async function fetchAggregatedData(
const weekStart = getStartOfWeek(now);
const weekEnd = endOfDay(new Date(weekStart.getTime() + 6 * 86400000));
// ---------------- MONTH (rolling 5 weeks, Mon–Sun aligned) ----------------
const weeklyBuckets = [];
// ---------------- WEEKLY ----------------
const weeklyRolling: any[] = [];
const weeklyCalendar: any[] = [];
if (mode === "rolling") {
const currentWeekStart = getStartOfWeek(now);
for (let i = 0; i < 5; i++) {
// rolling (last 5 weeks, oldest → newest)
for (let i = 4; i >= 0; i--) {
const start = new Date(currentWeekStart.getTime() - i * 7 * 86400000);
const end = endOfDay(new Date(start.getTime() + 6 * 86400000));
weeklyBuckets.push({
weeklyRolling.push({
label: `${format(start)} - ${format(end)}`,
start,
end,
amount: 0
});
}
} else {
// calendar weeks within current month
const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
let cursor = getStartOfWeek(startOfMonth);
while (cursor <= now) {
const start = new Date(cursor);
// calendar (full weeks covering current month)
const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0);
const firstWeekStart = getStartOfWeek(startOfMonth);
const totalWeeks = Math.ceil(
(endOfMonth.getTime() - firstWeekStart.getTime()) / (7 * 86400000)
) + 1;
for (let i = 0; i < totalWeeks; i++) {
const start = new Date(firstWeekStart.getTime() + i * 7 * 86400000);
const end = endOfDay(new Date(start.getTime() + 6 * 86400000));
weeklyBuckets.push({
weeklyCalendar.push({
label: `${format(start)} - ${format(end)}`,
start,
end,
amount: 0
});
cursor = new Date(cursor.getTime() + 7 * 86400000);
}
}
// ---------------- YEAR (rolling 12 months) ----------------
const monthlyBuckets = [];
// ---------------- MONTHLY ----------------
const monthlyRolling: any[] = [];
const monthlyCalendar: any[] = [];
if (mode === "rolling") {
for (let i = 0; i < 12; i++) {
// rolling (last 12 months, oldest → newest)
for (let i = 11; i >= 0; i--) {
const d = new Date(now);
d.setMonth(d.getMonth() - i);
const start = new Date(d.getFullYear(), d.getMonth(), 1);
const end =
i === 0
? endOfDay(now) // current month → till now
? endOfDay(now)
: endOfDay(new Date(d.getFullYear(), d.getMonth() + 1, 0));
monthlyBuckets.push({
monthlyRolling.push({
label: `${d.toLocaleString("default", { month: "short" })}-${String(d.getFullYear()).slice(2)}`,
start,
end,
amount: 0
});
}
} else {
// calendar year (Jan → current month)
for (let i = 0; i <= now.getMonth(); i++) {
// calendar (full year Jan → Dec)
for (let i = 0; i < 12; i++) {
const start = new Date(now.getFullYear(), i, 1);
const end = endOfDay(new Date(now.getFullYear(), i + 1, 0));
monthlyBuckets.push({
monthlyCalendar.push({
label: `${start.toLocaleString("default", { month: "short" })}-${String(start.getFullYear()).slice(2)}`,
start,
end,
amount: 0
});
}
}
// ---------------- LOOP ----------------
for (const item of all) {
@@ -194,7 +207,7 @@ export async function fetchAggregatedData(
const payee = item.payee?.name || item.payee || "Unknown";
payeeMap[payee] = (payeeMap[payee] || 0) + amt;
// WEEK
// DAILY
if (d >= weekStart && d <= weekEnd) {
const day = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"][d.getDay()];
if (dailyBuckets[day] !== undefined) {
@@ -202,42 +215,51 @@ export async function fetchAggregatedData(
}
}
// MONTH (rolling weeks)
for (const b of weeklyBuckets) {
if (d >= b.start && d <= b.end) {
b.amount += amt;
// WEEKLY
for (const b of weeklyRolling) {
if (d >= b.start && d <= b.end) b.amount += amt;
}
for (const b of weeklyCalendar) {
if (d >= b.start && d <= b.end) b.amount += amt;
}
// MONTHLY
for (const b of monthlyRolling) {
if (d >= b.start && d <= b.end) b.amount += amt;
}
for (const b of monthlyCalendar) {
if (d >= b.start && d <= b.end) b.amount += amt;
}
}
// YEAR (rolling months)
for (const b of monthlyBuckets) {
if (d >= b.start && d <= b.end) {
b.amount += amt;
}
}
}
const toPoints = (b: any): ChartDataPoint[] =>
Array.isArray(b)
? b.map((x) => ({
const toPoints = (arr: any[]): ChartDataPoint[] =>
arr.map((x) => ({
id: x.label,
amount: x.amount
}))
: Object.entries(b).map(([k, v]: any) => ({
id: k,
amount: v
}));
const chartData = {
daily: toPoints(dailyBuckets),
weekly: toPoints(weeklyBuckets),
monthly: toPoints(monthlyBuckets)
const chartData: ChartData = {
daily: Object.entries(dailyBuckets).map(([k, v]) => ({
id: k,
amount: v
})),
weekly: {
rolling: toPoints(weeklyRolling),
calendar: toPoints(weeklyCalendar)
},
monthly: {
rolling: toPoints(monthlyRolling),
calendar: toPoints(monthlyCalendar)
}
};
// highlight max
Object.values(chartData).forEach(group => {
let max = group[0];
for (const g of group) {
// highlight max (per visible set default to rolling)
Object.values(chartData).forEach((group: any) => {
const arr = Array.isArray(group) ? group : group.rolling;
if (!arr?.length) return;
let max = arr[0];
for (const g of arr) {
if (g.amount > max.amount) max = g;
}
if (max.amount > 0) max.highlighted = true;
@@ -252,12 +274,8 @@ export async function fetchAggregatedData(
}
// ---------------- EXPORTS ----------------
export const fetchAggregatedExpenses = (
mode: "rolling" | "calendar"
) =>
fetchAggregatedData("expense", mode);
export const fetchAggregatedExpenses = () =>
fetchAggregatedData("expense");
export const fetchAggregatedIncome = (
mode: "rolling" | "calendar"
) =>
fetchAggregatedData("income", mode);
export const fetchAggregatedIncome = () =>
fetchAggregatedData("income");