Global Insights
{/* Controls */}
{/* NEW: Filters panel */}
{filtersOpen && (
Exclude Categories
{categoryOptions.length ? (
categoryOptions.map((cat) => {
const key = (cat || "").toLowerCase();
const sel = exclude.categories.includes(key);
return (
);
})
) : (
No categories yet.
)}
Exclude Bills
{billOptions.length ? (
billOptions.map((b) => {
const sel = exclude.billIds.includes(b.id);
return (
);
})
) : (
No bills yet.
)}
)}
{loading &&
Loading…
}
{!loading && data && (
<>
{/* Stat Tiles */}
Total
{rupee(data.summary.total)}
Avg / month
{rupee(data.summary.avg_month)}
Best month
{fmtYMpretty(data.summary.min_month?.ym)} ·{" "}
{rupee(data.summary.min_month?.total)}
Peak month
{fmtYMpretty(data.summary.max_month?.ym)} ·{" "}
{rupee(data.summary.max_month?.total)}
{budget !== "" && (
Budget vs Avg
0
? "text-danger"
: overUnder < 0
? "text-success"
: ""
}`}
>
{overUnder > 0
? `Over by ${rupee(overUnder)}`
: overUnder < 0
? `Under by ${rupee(Math.abs(overUnder))}`
: "On budget"}
0 ? "bg-danger" : "bg-success"
}`}
style={{
width: `${Math.min(
100,
(avgMonth / (Number(budget) || 1)) * 100
)}%`,
}}
title={`Avg ${rupee(avgMonth)} vs Budget ${rupee(
Number(budget || 0)
)}`}
/>
)}
{/* Charts */}
By Category
{data.categories?.length ? (
) : (
No data.
)}
{/* Category breakdown */}
Category Breakdown
{catWithPct.length ? (
{catWithPct.map((c, i) => (
{c.category}
{rupee(c.total)}
))}
) : (
No data.
)}
{/* Top bills */}
Top Bills (total in range)
{data.topBills?.length ? (
{data.topBills.map((t, i) => (
-
{t.title}
{rupee(t.total)}
))}
) : (
No data.
)}
)}
);
}
/* ---------------- Dashboard ---------------- */
/* ---------------- Dashboard (agenda-style month view) ---------------- */
/* ---------------- Dashboard (collapsible agenda-style) ---------------- */
function Dashboard({ month }) {
const [data, setData] = React.useState({ paid: [], unpaid: [] });
const [dueDayById, setDueDayById] = React.useState({}); // id -> true due day (1..31)
const [payAmt, setPayAmt] = React.useState({});
const [insightsBill, setInsightsBill] = React.useState(null);
const [insightsOpen, setInsightsOpen] = React.useState(false);
const [hidePaid, setHidePaid] = React.useState(false); // NEW: toggle to hide paid items
// Quick Add (one-time for selected month)
const [qa, setQa] = React.useState({
open: false,
title: "",
amount: "",
category: "Other",
tags: "",
markPaid: false,
date: "",
});
const qaRef = React.useRef(null);
// anchor for “today” (only used on month change)
const todayRef = React.useRef(null);
// ----- helpers -----
const dayFromDateStr = (s) => {
const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(String(s || ""));
return m ? Number(m[3]) : null;
};
const daysInMonth = (ym) => {
const [y, m] = ym.split("-").map(Number);
return new Date(y, m, 0).getDate();
};
const weekdayShort = (Y, M, d) =>
new Date(Y, M - 1, d).toLocaleDateString(undefined, { weekday: "short" });
// ----- load dashboard + master list (for true due days) -----
React.useEffect(() => {
let alive = true;
Promise.all([api.dashboard(month), api.billsList()]).then(
([dash, list]) => {
if (!alive) return;
setData(dash || { paid: [], unpaid: [] });
const map = {};
(list || []).forEach((b) => {
const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(String(b.due_date || ""));
map[b.id] = m ? Number(m[3]) : 1;
});
setDueDayById(map);
setPayAmt({});
}
);
return () => {
alive = false;
};
}, [month]);
const openInsights = (bill) => {
setInsightsBill(bill);
setInsightsOpen(true);
};
const closeInsights = () => {
setInsightsOpen(false);
setInsightsBill(null);
};
// optimistic move helper
function moveBetween(state, id, fromKey, toKey) {
const from = state[fromKey] || [];
const to = state[toKey] || [];
const idx = from.findIndex((x) => x.id === id);
if (idx < 0) return state;
const item = from[idx];
return {
...state,
[fromKey]: from.filter((_, i) => i !== idx),
[toKey]: [{ ...item, __status: toKey.slice(0, -1) }, ...to],
};
}
const markPaid = async (bill, overrideAmt) => {
const displayAmt = getDisplayAmount(bill);
const useAmt =
overrideAmt !== undefined
? overrideAmt
: isVariableBill(bill)
? payAmt[bill.id] ?? ""
: displayAmt;
if (useAmt === "" || isNaN(Number(useAmt))) {
alert("Please enter a valid amount first.");
return;
}
// optimistic
setData((s) => moveBetween(s, bill.id, "unpaid", "paid"));
try {
await api.complete(bill.id, month, Number(useAmt));
const fresh = await api.dashboard(month);
setData(fresh || { paid: [], unpaid: [] });
setPayAmt((s) => ({ ...s, [bill.id]: "" })); // harmless now, but keeps things tidy
} catch {
setData((s) => moveBetween(s, bill.id, "paid", "unpaid"));
alert("Failed to mark as paid.");
}
};
const unmarkPaid = async (id) => {
// optimistic
setData((s) => moveBetween(s, id, "paid", "unpaid"));
try {
await api.uncomplete(id, month);
const fresh = await api.dashboard(month);
setData(fresh || { paid: [], unpaid: [] });
} catch {
setData((s) => moveBetween(s, id, "unpaid", "paid"));
alert("Failed to move back to pending.");
}
};
// ------- Build "agenda" data: day -> bills[] (paid + unpaid) -------
function groupByDay() {
const map = {};
const all = [
...(data.unpaid || []).map((b) => ({ ...b, __status: "unpaid" })),
...(data.paid || []).map((b) => ({ ...b, __status: "paid" })),
];
all.forEach((b) => {
const day = dueDayById[b.id] ?? dayFromDateStr(b.due_date) ?? 1;
(map[day] ||= []).push(b);
});
// sort: unpaid first, then by title
Object.values(map).forEach((list) => {
list.sort((a, b) => {
if (a.__status !== b.__status) return a.__status === "unpaid" ? -1 : 1;
return String(a.title || "").localeCompare(String(b.title || ""));
});
});
return map;
}
const byDay = groupByDay();
// Scroll to today ONLY on month change (not on every data change)
React.useEffect(() => {
const [y, m] = month.split("-").map(Number);
const now = new Date();
if (now.getFullYear() === y && now.getMonth() + 1 === m) {
setTimeout(() => {
const el = todayRef.current;
if (!el) return;
const targetY = window.scrollY + el.getBoundingClientRect().top - 240; // leave 40px from top
window.scrollTo({ top: targetY, behavior: "smooth" });
}, 80);
}
}, [month]);
// helpers for day loop
const [Y, M] = month.split("-").map(Number);
const totalDays = daysInMonth(month);
const now = new Date();
const isCurrentMonth = now.getFullYear() === Y && now.getMonth() + 1 === M;
const todayNum = isCurrentMonth ? now.getDate() : -1;
// ----- Single bill row (compact) -----
const BillRow = React.memo(function BillRow({ b }) {
console.log(b);
const variable = isVariableBill(b);
const displayAmt = getDisplayAmount(b);
const completed = b.__status === "paid";
// local input state so typing doesn't touch parent & cause remounts
const [localAmt, setLocalAmt] = React.useState("");
// if you want to prefill from parent occasionally, keep this:
React.useEffect(() => {
setLocalAmt(payAmt[b.id] ?? "");
}, [b.id]); // keep very narrow deps so it doesn't fight typing
const handleMarkPaid = async () => {
await markPaid(b, variable ? localAmt : undefined);
if (variable) setLocalAmt(""); // clear after success
};
return (
openInsights(b)}
>
{/* Row 1: Title + actions */}
{b.title}
e.stopPropagation()}
>
{completed ? (
) : (
<>
{variable ? (
<>
) : (
<>
{fmtAmt(displayAmt)}
)}
)}
{/* Amount + date */}
e.stopPropagation()}>
{!completed && variable ? (
setLocalAmt(e.target.value)}
onMouseDown={(e) => e.stopPropagation()}
onTouchStart={(e) => e.stopPropagation()}
/>
) : (
fmtAmt(displayAmt)
)}
{/* Optional tags */}
{b.tags ? (
{b.tags}
) : null}
{b.paid_at ? (
{" "}
Paid on :{new Date(b.paid_at).toLocaleString() || " "}
) : undefined}
{/* Footer: category + recurring */}
{b.category || "-"}
{b.recurring == "6months" ? "Half-Yearly" : b.recurring}
);
});
// ----- Day block (always open, sticky header like calendar agenda) -----
function DayBlock({ d, items, wday, isToday }) {
return (
{d} {wday}
{isToday && (
Today
)}
{items.length}
{items.length ? (
items.map((b) =>
)
) : (
No bills.
)}
);
}
// ---- Quick Add ----
const openQuickAdd = () => {
const [Y, M] = month.split("-").map(Number);
const today = new Date();
const isThisMonth = today.getFullYear() === Y && today.getMonth() + 1 === M;
const defaultDay = isThisMonth ? today.getDate() : 1;
const dd = String(defaultDay).padStart(2, "0");
const mm = String(M).padStart(2, "0");
const defaultDate = `${Y}-${mm}-${dd}`;
setQa({
open: true,
title: "",
amount: "",
category: "Other",
markPaid: false,
date: defaultDate,
});
ensureBootstrapModal(qaRef.current).show();
cleanupBackdrops();
};
const saveQuickAdd = async () => {
if (!qa.title) {
alert("Title is required");
return;
}
const due =
qa.date ||
(() => {
const d = ymParse(month);
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(
2,
"0"
)}-01`;
})();
const res = await api.billCreate({
title: qa.title,
amount: qa.amount === "" ? null : Number(qa.amount),
due_date: due,
recurring: "once",
category: qa.category || "Other",
tags: "",
comments: "",
});
if (qa.markPaid && res?.id) {
await api.complete(
res.id,
month,
qa.amount === "" ? undefined : Number(qa.amount)
);
}
ensureBootstrapModal(qaRef.current).hide();
cleanupBackdrops();
setQa({
open: false,
title: "",
amount: "",
category: "Other",
markPaid: false,
date: "",
});
const fresh = await api.dashboard(month);
setData(fresh || { paid: [], unpaid: [] });
};
// ---- render ----
const [Y2, M2] = month.split("-").map(Number);
return (
{/* Header + toggle */}
{/* Agenda-style month view (always open) */}
{Array.from({ length: daysInMonth(month) }, (_, i) => i + 1).map((d) => {
const allItems = byDay[d] || [];
const shown = hidePaid
? allItems.filter((b) => b.__status !== "paid")
: allItems;
if (hidePaid && shown.length === 0) return null; // hide empty day when hiding paid
const wday = weekdayShort(Y2, M2, d);
const now = new Date();
const isToday =
now.getFullYear() === Y2 &&
now.getMonth() + 1 === M2 &&
now.getDate() === d;
return (
);
})}
{/* Bill-level Insights */}
{/* FAB */}
{/* Quick Add Modal */}
Add One-time Expense
For{" "}
{ymParse(month).toLocaleString(undefined, {
month: "short",
year: "numeric",
})}{" "}
only
);
}
/* ---------------- Master List ---------------- */
function MasterList() {
const [rows, setRows] = useState([]);
const [loading, setLoading] = useState(true);
const [form, setForm] = useState({
id: null,
title: "",
amount: "",
due_date: "",
recurring: "monthly",
category: "",
selectedCategory: "Other",
customCategory: "",
tags: "",
comments: "",
});
// NEW: filter state
const [filter, setFilter] = useState("all"); // 'all' | 'once' | 'monthly' | '6months' | 'yearly'
const load = () =>
api.billsList().then((d) => {
setRows(d || []);
setLoading(false);
});
useEffect(() => {
load();
}, []);
const openAdd = () => {
setForm({
id: null,
title: "",
amount: "",
due_date: "",
recurring: "monthly",
category: "",
selectedCategory: "Other",
customCategory: "",
tags: "",
comments: "",
});
cleanupBackdrops();
// eslint-disable-next-line no-undef
new bootstrap.Modal(document.getElementById("billModal")).show();
};
const openEdit = (b) => {
const inList = CATEGORIES.includes(b.category);
setForm({
id: b.id,
amount: b.default_amount ?? "",
title: b.title,
due_date: b.due_date,
recurring: b.recurring,
selectedCategory: inList ? b.category : "Other",
customCategory: inList ? "" : b.category || "",
category: b.category || "",
tags: b.tags || "",
comments: b.comments || "",
});
cleanupBackdrops();
// eslint-disable-next-line no-undef
new bootstrap.Modal(document.getElementById("billModal")).show();
};
const save = async () => {
console.log(form);
const categoryToSave =
form.selectedCategory === "Other"
? form.customCategory || ""
: form.selectedCategory;
const amt =
form.amount === "" || form.amount === null || form.amount === undefined
? null
: parseFloat(form.amount);
const data = { ...form, category: categoryToSave, amount: amt };
if (!data.title || !data.due_date)
return alert("Title and Due Date are required");
if (data.id) await api.billUpdate(data.id, data);
else await api.billCreate(data);
// eslint-disable-next-line no-undef
bootstrap.Modal.getInstance(document.getElementById("billModal")).hide();
cleanupBackdrops();
load();
};
const remove = async (id) => {
if (confirm("Delete this bill?")) {
await api.billDelete(id);
load();
}
};
// --- NEW: normalize recurring and compute counts + filtered rows ---
const recKey = (r) => {
const rr = String(r || "")
.toLowerCase()
.replace(/\s+/g, "");
if (
rr === "once" ||
rr === "onetime" ||
rr === "one-time" ||
rr === "one_time" ||
rr == ""
)
return "once";
if (rr === "monthly") return "monthly";
if (
rr === "6months" ||
rr === "sixmonths" ||
rr === "semiannual" ||
rr === "semiannually" ||
rr === "semi-annual" ||
rr === "semi-annually"
)
return "6months";
if (rr === "yearly" || rr === "annual" || rr === "annually")
return "yearly";
return "other";
};
const counts = React.useMemo(() => {
const c = {
all: rows.length,
once: 0,
monthly: 0,
"6months": 0,
yearly: 0,
};
rows.forEach((b) => {
const k = recKey(b.recurring);
if (k in c) c[k]++;
});
return c;
}, [rows]);
const filteredRows = React.useMemo(() => {
if (filter === "all") return rows;
return rows.filter((b) => recKey(b.recurring) === filter);
}, [rows, filter]);
const labelOf = (k) =>
({
all: "All",
once: "Once",
monthly: "Monthly",
"6months": "Half-Yearly",
yearly: "Yearly",
}[k]);
return (
<>
Master List
{/* NEW: Filter bar */}
{["all", "once", "monthly", "6months", "yearly"].map((k) => (
))}
{loading ? (
Loading…
) : filteredRows.length ? (
filteredRows.map((b) => {
const rShort = (rec) => {
const k = String(rec || "").toLowerCase();
if (k === "monthly") return "m";
if (k === "6months") return "6m";
if (k === "yearly") return "y";
if (k === "once") return "1x";
return k || "-";
};
return (
{/* Row 1: Title + actions */}
{b.title}
{" "}
{fmtAmt(b.default_amount)}
Due date: {b.due_date || "-"}
{/* Row 2: Amount */}
{b.tags ? (
{b.tags || ""}
) : undefined}
{/* Divider */}
{/* Row 3: (recurring) (category) (date) */}
{b.category || "-"}
{b.recurring == "6months" ? "Half-Yearly" : b.recurring}
);
})
) : (
No bills for {labelOf(filter)}.
)}
{/* Add/Edit modal */}
{/* Header */}
{form.id ? "Edit Bill" : "Add Bill"}
Keep amount blank for variable bills (e.g., electricity).
{/* Body */}
{/* Title */}
setForm({ ...form, title: e.target.value })}
/>
{/* Amount + Date */}
{/* Recurrence */}
We’ll auto-show it on the dashboard when it’s due.
{/* Category */}
{form.selectedCategory === "Other" && (
setForm({ ...form, customCategory: e.target.value })
}
/>
)}
{/* Tags + Comments */}
{/* Footer */}
);
}
/* ---------------- Auth & App ---------------- */
function Auth({ onAuthed }) {
const [mode, setMode] = useState("login");
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [err, setErr] = useState("");
async function submit() {
setErr("");
if (mode === "login") {
const r = await auth.login(email, password);
if (r.ok) onAuthed();
else setErr(r.error || "Login failed");
} else {
const r = await auth.register(name, email, password);
if (r.ok) {
const r2 = await auth.login(email, password);
if (r2.ok) onAuthed();
else setErr(r2.error || "Login failed");
} else setErr(r.error || "Register failed");
}
}
return (
{/* Logo + Title */}
{/* Card */}
{/* Tiny footer note */}
Secure • Private • Local-first
);
}
function App() {
const [authed, setAuthed] = useState(false);
const [view, setView] = useState("dashboard");
const [month, setMonth] = useState(ymFormat(new Date()));
const [globalOpen, setGlobalOpen] = useState(false);
const todayYM = ymFormat(new Date());
const isToday = month === todayYM;
useEffect(() => {
auth.me().then((u) => setAuthed(!!u.id));
}, []);
if (!authed) return
setAuthed(true)} />;
return (
<>
auth.logout().then(() => location.reload())}
onRefresh={refreshApp}
onToday={() => setMonth(ymFormat(new Date()))}
showToday={!isToday}
onOpenGlobal={() => setGlobalOpen(true)}
month={month}
setMonth={setMonth}
/>
{view === "dashboard" && (
<>
)}
{view === "master" && }
{/* Global Insights Modal */}
setGlobalOpen(false)}
/>
);
}
ReactDOM.createRoot(document.getElementById("root")).render();
// After render line:
const splash = document.getElementById("dw-splash");
if (splash) splash.style.display = "none";