Sean & Yam · Financial Tracker

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_375":376,"_377":378},"routes/_app.x.$handle.$name",{"_109":108,"_38":50,"_117":95,"_33":111,"_13":14,"_118":-5,"_11":119,"_120":121,"_122":123,"_124":125,"_126":127,"_26":-5,"_128":129,"_130":131,"_132":31,"_133":134,"_135":64,"_136":-5,"_137":-5,"_138":139},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_48":49,"_38":50,"_43":51,"_52":-5,"_53":31,"_54":55,"_56":55,"_57":58,"_59":-5,"_19":60,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":72,"_73":74,"_75":76,"_77":-5,"_78":79,"_80":79,"_81":82,"_83":82,"_84":82,"_85":79,"_86":79,"_87":88,"_89":90,"_91":92,"_93":31},"version",21,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","2d7ecf92-2fa1-435f-975e-d197ea519597","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":34,"_39":26,"_40":42,"_43":44,"_45":14,"_46":47,"_30":31},"previous",{"_36":37,"_38":34,"_39":26,"_40":41},"deleted",false,"deletedHere","path","README.md","latestPath","fileId","019e354b-4058-72f9-b23c-11bbeafa2ec0","name","fileType","content","# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"index.html\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend + API routes)\nfrontend/\n index.html ← HTML shell (loads Twind + React)\n index.tsx ← React entrypoint (mounts )\n favicon.svg ← App icon\n components/\n App.tsx ← Root component (layout + view source link)\n Counter.tsx ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n frontend and any API routes you add.\n2. **`frontend/index.html`** loads Twind and the React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n a full-stack example with database, queries, and shared types","# 💎 Sean & Yam Financial Tracker\n\nA premium shared financial dashboard for tracking loans, commitments, and debt repayment progress together.\n\n## Features\n\n- **Dashboard** — Monthly commitments per person and combined, total loan debt, estimated payoff date\n- **Loan Management** — Full CRUD with lender dropdown, loan type, descriptions, and all financial details\n- **12-Month Payment Tracker** — Toggle PAID/UNPAID per month, auto-updates balances\n- **Payment Due Alerts** — Warnings when any payment is due within 5 days\n- **Milestone Celebrations** — 🎉 at 70% and 🏆 at 100% paid off\n- **What-If Calculator** — See how extra payments accelerate debt freedom\n- **Message Board** — Leave notes for each other with timestamps\n- **Debt Chart** — Visual bar chart showing projected debt reduction over time\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|GET /| Hono[index.ts]\n Hono -->|serves| HTML[index.html]\n HTML -->|loads| React[App.tsx]\n React -->|fetch| API[/api/*]\n API -->|queries| SQLite[(SQLite DB)]\n```\n\n## Tech Stack\n\n- **Frontend**: React 18 + Twind (Tailwind CSS)\n- **Backend**: Hono on Val Town\n- **Database**: Val Town SQLite\n- **Theme**: Deep navy (#0a0f1e) + electric blue (#3b82f6) + teal (#14b8a6)\n","createdAt",["D",1779010934724],"branchVersion","branchId","defc9c24-51d3-11f1-8889-ee650bb23af1","id","deb47d54-51d3-11f1-8889-ee650bb23af1","financial-tracker",["D",1779010584120],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Starter template with client-side React & Hono server","imageUrl","94ef5435-553f-4787-a0fb-c0926a04820d","pinnedFileId","019e354b-4058-72f9-b23c-16462c7b2d59","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019e34c6-b41c-7572-aff8-b2f2f04c460f","tursoName","deb47d5451d311f18889ee650bb23af1","tursoHostname","deb47d5451d311f18889ee650bb23af1-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789555877593],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_109":108,"_116":111},"org",{"_109":108,"_110":111,"_112":111,"_19":60,"_113":114,"_115":31},"branch",{"_13":94,"_38":95,"_48":47,"_96":49,"_97":98,"_99":100,"_101":55,"_102":103,"_104":105,"_106":50,"_107":108},"isOwned",28,"main","projectId","forkedBranchId","961078ea-f528-11ef-aa68-569c3dd06744","forkedBranchVersion",88,"forkedProjectPrivacy","forkedProjectId","96102714-f528-11ef-aa68-569c3dd06744","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","yamunna","handle","displayName","","avatar","tier","free","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_48":49,"_38":50,"_43":370,"_52":-5,"_53":31,"_54":55,"_56":55,"_57":58,"_59":-5,"_19":60,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":72,"_73":74,"_75":371,"_77":-5,"_78":79,"_80":79,"_81":82,"_83":82,"_84":82,"_85":79,"_86":79,"_87":372,"_89":373,"_91":374,"_93":31},"tree",[198,201,216,218,219],"files",[198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,219],"counts",{"_188":68,"_189":162,"_190":68,"_191":192,"_193":194},"contents",[151,152,153,154,155],"upstreamProject",{"_48":103,"_38":147,"_57":58,"_59":148,"_54":55,"_87":149},"upstreamBranch",{"_48":98,"_43":140,"_141":142,"_38":95,"_96":103,"_13":143,"_97":-5,"_99":-5,"_144":145,"_52":-5,"_93":31,"_54":55,"_107":146,"_69":105,"_106":147},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],"updatedAt",["D",1785420707976],91,"lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","templates","react-hono-starter","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789585199&sig=1baafecf11cec877edc88f123efd7f687a508ecc290c26f9eecfc4b3e272df79",{"_109":146,"_116":150},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789585199&sig=e0ad9b96a0e58967744de3785adb3e9a68085da5b0c135b58439da2ef923cdc0",{"_48":182,"_38":183,"_36":184,"_158":-5,"_46":47,"_45":185,"_160":64,"_43":186,"_13":68,"_39":175,"_40":-5,"_30":31,"_165":-5,"_33":187},{"_48":177,"_38":178,"_36":179,"_158":-5,"_46":47,"_45":162,"_160":64,"_43":180,"_13":68,"_39":175,"_40":-5,"_30":31,"_165":-5,"_33":181},{"_48":170,"_38":171,"_36":172,"_158":-5,"_46":47,"_45":173,"_160":64,"_43":174,"_13":68,"_39":175,"_40":-5,"_30":31,"_165":-5,"_33":176},{"_48":167,"_38":34,"_36":37,"_158":-5,"_46":47,"_45":14,"_160":31,"_43":168,"_13":162,"_39":26,"_40":42,"_30":31,"_165":-5,"_33":169},{"_48":156,"_38":157,"_36":62,"_158":-5,"_46":47,"_45":159,"_160":31,"_43":161,"_13":162,"_39":163,"_40":164,"_30":31,"_165":-5,"_33":166},"04226132-51d4-11f1-8811-ee650bb23af1","index.ts","parentId",7,"latest",["D",1779010646930],1,"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport api from \"./backend/routes.ts\";\n\nconst app = new Hono();\n\n// API routes\napp.route(\"/api\", api);\n\n// Serve index.html at the root\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\n\n// Serve all frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","label",[157],"afab1f6c-51d4-11f1-be2d-ee650bb23af1",["D",1779010934724],[34],"e3e017e8-51d3-11f1-bbb6-ee650bb23af1","shared","e3e018ba-51d3-11f1-bbb6-ee650bb23af1",2,["D",1779010592818],"directory",[171],"df052a92-51d3-11f1-8889-ee650bb23af1","frontend","019e354b-4058-72f9-b23c-0d28155a884c",["D",1779010584120],[178],"e3e6c7c8-51d3-11f1-83a1-ee650bb23af1","backend","e3e6c87c-51d3-11f1-83a1-ee650bb23af1",3,["D",1779010592837],[183],"pulls","branches","forks","envVars",{"_195":68,"_197":68},"connections",{"_195":68,"_196":68},"count","unfilledCount","emptyCount",{"_48":182,"_38":183,"_36":184,"_158":-5,"_46":47,"_45":185,"_160":64,"_43":367,"_13":68,"_39":175,"_40":-5,"_30":31,"_165":-5,"_221":368,"_33":369},{"_48":359,"_38":360,"_36":361,"_158":184,"_46":47,"_45":362,"_160":64,"_43":363,"_13":68,"_39":232,"_40":364,"_30":31,"_165":-5,"_221":365,"_33":366},{"_48":351,"_38":352,"_36":353,"_158":184,"_46":47,"_45":354,"_160":31,"_43":355,"_13":68,"_39":232,"_40":356,"_30":31,"_165":-5,"_221":357,"_33":358},{"_48":177,"_38":178,"_36":179,"_158":-5,"_46":47,"_45":162,"_160":64,"_43":348,"_13":68,"_39":175,"_40":-5,"_30":31,"_165":-5,"_221":349,"_33":350},{"_48":344,"_38":271,"_36":265,"_158":179,"_46":47,"_45":162,"_160":64,"_43":345,"_13":68,"_39":175,"_40":-5,"_30":31,"_165":-5,"_221":346,"_33":347},{"_48":336,"_38":337,"_36":338,"_158":265,"_46":47,"_45":339,"_160":64,"_43":340,"_13":162,"_39":232,"_40":341,"_30":31,"_165":-5,"_221":342,"_33":343},{"_48":328,"_38":329,"_36":330,"_158":265,"_46":47,"_45":331,"_160":64,"_43":332,"_13":68,"_39":232,"_40":333,"_30":31,"_165":-5,"_221":334,"_33":335},{"_48":320,"_38":321,"_36":322,"_158":265,"_46":47,"_45":323,"_160":64,"_43":324,"_13":68,"_39":232,"_40":325,"_30":31,"_165":-5,"_221":326,"_33":327},{"_48":312,"_38":313,"_36":314,"_158":265,"_46":47,"_45":315,"_160":64,"_43":316,"_13":68,"_39":232,"_40":317,"_30":31,"_165":-5,"_221":318,"_33":319},{"_48":304,"_38":305,"_36":306,"_158":265,"_46":47,"_45":307,"_160":64,"_43":308,"_13":68,"_39":232,"_40":309,"_30":31,"_165":-5,"_221":310,"_33":311},{"_48":296,"_38":297,"_36":298,"_158":265,"_46":47,"_45":299,"_160":64,"_43":300,"_13":68,"_39":232,"_40":301,"_30":31,"_165":-5,"_221":302,"_33":303},{"_48":288,"_38":289,"_36":290,"_158":265,"_46":47,"_45":291,"_160":64,"_43":292,"_13":68,"_39":232,"_40":293,"_30":31,"_165":-5,"_221":294,"_33":295},{"_48":280,"_38":281,"_36":282,"_158":265,"_46":47,"_45":283,"_160":64,"_43":284,"_13":68,"_39":232,"_40":285,"_30":31,"_165":-5,"_221":286,"_33":287},{"_48":272,"_38":273,"_36":274,"_158":265,"_46":47,"_45":275,"_160":64,"_43":276,"_13":68,"_39":232,"_40":277,"_30":31,"_165":-5,"_221":278,"_33":279},{"_48":262,"_38":263,"_36":264,"_158":265,"_46":47,"_45":266,"_160":64,"_43":267,"_13":68,"_39":232,"_40":268,"_30":31,"_165":-5,"_221":269,"_33":270},{"_48":254,"_38":255,"_36":256,"_158":179,"_46":47,"_45":257,"_160":64,"_43":258,"_13":162,"_39":26,"_40":259,"_30":31,"_165":-5,"_221":260,"_33":261},{"_48":246,"_38":247,"_36":248,"_158":179,"_46":47,"_45":249,"_160":64,"_43":250,"_13":162,"_39":26,"_40":251,"_30":31,"_165":-5,"_221":252,"_33":253},{"_48":239,"_38":240,"_36":241,"_158":179,"_46":47,"_45":162,"_160":64,"_43":242,"_13":68,"_39":232,"_40":243,"_30":31,"_165":-5,"_221":244,"_33":245},{"_48":170,"_38":171,"_36":172,"_158":-5,"_46":47,"_45":173,"_160":64,"_43":236,"_13":68,"_39":175,"_40":-5,"_30":31,"_165":-5,"_221":237,"_33":238},{"_48":227,"_38":228,"_36":229,"_158":172,"_46":47,"_45":230,"_160":64,"_43":231,"_13":68,"_39":232,"_40":233,"_30":31,"_165":-5,"_221":234,"_33":235},{"_48":167,"_38":34,"_36":37,"_158":-5,"_46":47,"_45":14,"_160":31,"_43":224,"_13":162,"_39":26,"_40":42,"_30":31,"_165":-5,"_221":225,"_33":226},{"_48":156,"_38":157,"_36":62,"_158":-5,"_46":47,"_45":159,"_160":31,"_43":220,"_13":162,"_39":163,"_40":164,"_30":31,"_165":-5,"_221":222,"_33":223},["D",1779010646930],"children",[],[157],["D",1779010934724],[],[34],"e8eaa762-51d3-11f1-8889-ee650bb23af1","types.ts","e8eaa87a-51d3-11f1-8889-ee650bb23af1",4,["D",1779010601265],"script","export interface Loan {\n id?: number;\n name: string;\n lender: string;\n lenderOther?: string;\n loanType: string;\n description: string;\n principal: number;\n interestRate: number;\n monthlyPayment: number;\n totalPaid: number;\n currentBalance: number;\n startDate: string;\n endDate: string;\n paymentDueDay: number;\n paidBy: \"Sean\" | \"Yam\";\n isRental: boolean;\n createdAt?: string;\n}\n\nexport interface PaymentRecord {\n id?: number;\n loanId: number;\n month: number; // 1-12\n year: number;\n isPaid: boolean;\n paidBy: \"Sean\" | \"Yam\";\n paidAt?: string;\n}\n\nexport interface Message {\n id?: number;\n author: \"Sean\" | \"Yam\";\n content: string;\n createdAt?: string;\n}\n\nexport const LENDERS = [\n \"Atome\",\n \"Shopee Loan\",\n \"SPayLater\",\n \"GX Bank\",\n \"CIMB\",\n \"PTPTN\",\n \"RHB\",\n \"Public Bank\",\n \"Other\",\n] as const;\n\nexport const LOAN_TYPES = [\n \"Car Loan\",\n \"Personal Loan\",\n \"Student Loan\",\n \"Mobile Loan\",\n \"Buy Now Pay Later\",\n \"Salary Recovery\",\n \"Rental\",\n \"Utility\",\n \"Other\",\n] as const;\n",[],[171,228],["D",1779010592818],[217],[171],"df0525ec-51d3-11f1-8889-ee650bb23af1","index.tsx","019e354b-4058-72f9-b23c-0b897c958766",["D",1779010584120],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[178,240],"0bc47362-51d4-11f1-9d75-ee650bb23af1","index.html","019e354b-4058-72f9-b23c-07070e8c2ee9",8,["D",1779010659735],"\n\n \n \n \n Sean & Yam · Financial Tracker\n \n \n \n \n \n \n \n \n

\n \n \n \n\n",[],[178,247],"a86a84fe-51d4-11f1-adba-ee650bb23af1","favicon.svg","019e354b-4058-72f9-b23c-000f0dfe3a0f",20,["D",1779010922523],"\n\n",[],[178,255],"1076e2fa-51d4-11f1-8811-ee650bb23af1","hooks.ts","1076e3c2-51d4-11f1-8811-ee650bb23af1","019e354b-4058-72f9-b23b-fdf265d1b880",9,["D",1779010667606],"import { useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\n\nexport function useApi(url: string, deps: any[] = []) {\n const [data, setData] = useState(null);\n const [loading, setLoading] = useState(true);\n\n const refetch = useCallback(async () => {\n setLoading(true);\n try {\n const res = await fetch(url);\n const json = await res.json();\n setData(json);\n } catch (e) {\n console.error(\"API error:\", e);\n }\n setLoading(false);\n }, [url, ...deps]);\n\n useEffect(() => { refetch(); }, [refetch]);\n\n return { data, loading, refetch };\n}\n\nexport async function apiPost(url: string, body: any) {\n const res = await fetch(url, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(body),\n });\n return res.json();\n}\n\nexport async function apiPut(url: string, body: any) {\n const res = await fetch(url, {\n method: \"PUT\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(body),\n });\n return res.json();\n}\n\nexport async function apiDelete(url: string) {\n const res = await fetch(url, { method: \"DELETE\" });\n return res.json();\n}\n",[],[178,271,263],"components","667b8ff2-51d4-11f1-bda7-ee650bb23af1","WhatIfCalculator.tsx","667b90e2-51d4-11f1-bda7-ee650bb23af1",15,["D",1779010811941],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useMemo } from \"https://esm.sh/react@18.2.0\";\nimport { CalculatorIcon } from \"./Icons.tsx\";\n\nconst fmt = (n: number) => `RM ${n.toLocaleString(\"en-MY\", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;\n\nexport function WhatIfCalculator({ loans }: { loans: any[] }) {\n const [extra, setExtra] = useState(\"\");\n\n const results = useMemo(() => {\n const extraAmt = Number(extra) || 0;\n if (extraAmt <= 0) return null;\n\n const nonRental = loans.filter((l: any) => !l.isRental && l.currentBalance > 0);\n const totalBalance = nonRental.reduce((s: number, l: any) => s + l.currentBalance, 0);\n const totalMonthly = nonRental.reduce((s: number, l: any) => s + l.monthlyPayment, 0);\n if (totalMonthly === 0 || totalBalance === 0) return null;\n\n const monthsWithout = Math.ceil(totalBalance / totalMonthly);\n const monthsWith = Math.ceil(totalBalance / (totalMonthly + extraAmt));\n const monthsSaved = monthsWithout - monthsWith;\n\n // Rough interest saved (simplified)\n const avgRate = nonRental.reduce((s: number, l: any) => s + l.interestRate, 0) / (nonRental.length || 1);\n const interestSaved = totalBalance * (avgRate / 100 / 12) * monthsSaved;\n\n const newPayoffDate = new Date();\n newPayoffDate.setMonth(newPayoffDate.getMonth() + monthsWith);\n\n return { monthsWithout, monthsWith, monthsSaved, interestSaved, newPayoffDate };\n }, [extra, loans]);\n\n return (\n

\n 🔮 What-If Calculator\n

See how extra payments speed up your debt freedom!

\n\n

\n Extra Monthly Payment (RM)\n setExtra(e.target.value)}\n className=\"w-full bg-navy-700 text-white rounded-xl px-4 py-3 text-sm border border-navy-600/30 focus:outline-none focus:ring-2 focus:ring-electric/50\"\n />\n

\n\n {results && (\n

⏱ Months Saved

{results.monthsSaved}

{results.monthsWith} instead of {results.monthsWithout} months

💰 Interest Saved

{fmt(results.interestSaved)}

Estimated savings

🎯 New Payoff Date

{results.newPayoffDate.toLocaleDateString(\"en-MY\", { month: \"short\", year: \"numeric\" })}

Debt-free sooner!

\n )}\n

\n );\n}\n",[],[178,271,273],"51296dd6-51d4-11f1-9af0-ee650bb23af1","PaymentTracker.tsx","51296ebc-51d4-11f1-9af0-ee650bb23af1",13,["D",1779010776171],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useMemo } from \"https://esm.sh/react@18.2.0\";\nimport { CheckIcon, XIcon } from \"./Icons.tsx\";\nimport { apiPost } from \"./hooks.ts\";\n\nconst MONTH_NAMES = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"];\nconst fmt = (n: number) => `RM ${n.toLocaleString(\"en-MY\", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;\n\nexport function PaymentTracker({ loans, payments, onUpdate }: { loans: any[]; payments: any[]; onUpdate: () => void }) {\n const [toggling, setToggling] = useState(null);\n const currentYear = new Date().getFullYear();\n const [year, setYear] = useState(currentYear);\n\n const toggle = async (loanId: number, month: number, isPaid: boolean, paidBy: string) => {\n const key = `${loanId}-${month}-${year}`;\n setToggling(key);\n await apiPost(\"/api/payments/toggle\", { loanId, month, year, isPaid: !isPaid, paidBy });\n onUpdate();\n setToggling(null);\n };\n\n if (loans.length === 0) {\n return (\n

\n No loans added yet. Add your first loan above! ☝️\n

\n );\n }\n\n return (\n

📅 12-Month Payment Tracker

\n \n {year}\n \n

\n\n {loans.map((loan: any) => {\n const loanPayments = payments.filter((p: any) => p.loanId === loan.id && p.year === year);\n const progress = loan.principal > 0 ? Math.min(100, (loan.totalPaid / loan.principal) * 100) : 0;\n\n return (\n

\n {loan.name}\n ({loan.lender === \"Other\" ? loan.lenderOther : loan.lender})\n {loan.paidBy}\n

\n Balance: {fmt(loan.currentBalance)}\n

\n\n {/* Progress bar */}\n

{progress.toFixed(1)}% paid off

\n\n {/* Month grid */}\n

\n {MONTH_NAMES.map((m, idx) => {\n const monthNum = idx + 1;\n const record = loanPayments.find((p: any) => p.month === monthNum);\n const isPaid = record?.isPaid;\n const key = `${loan.id}-${monthNum}-${year}`;\n const isLoading = toggling === key;\n\n return (\n toggle(loan.id, monthNum, isPaid, loan.paidBy)}\n disabled={isLoading}\n className={`flex flex-col items-center p-2 rounded-xl transition-all cursor-pointer text-xs font-medium border ${\n isPaid\n ? \"bg-teal/10 border-teal/30 text-teal hover:bg-teal/20\"\n : \"bg-navy-700/50 border-navy-600/20 text-blue-400 hover:bg-navy-600/50\"\n } ${isLoading ? \"opacity-50\" : \"\"}`}\n >\n {m}\n {isPaid ? : }\n {isPaid ? \"PAID\" : \"—\"}\n \n );\n })}\n

\n );\n })}\n

\n );\n}\n",[],[178,271,281],"5ac504c2-51d4-11f1-949d-ee650bb23af1","MessageBoard.tsx","5ac505d0-51d4-11f1-949d-ee650bb23af1",14,["D",1779010792289],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { MessageIcon } from \"./Icons.tsx\";\nimport { apiPost } from \"./hooks.ts\";\n\nexport function MessageBoard({ messages, onRefresh }: { messages: any[]; onRefresh: () => void }) {\n const [author, setAuthor] = useState<\"Sean\" | \"Yam\">(\"Sean\");\n const [content, setContent] = useState(\"\");\n const [sending, setSending] = useState(false);\n\n const send = async () => {\n if (!content.trim()) return;\n setSending(true);\n await apiPost(\"/api/messages\", { author, content: content.trim() });\n setContent(\"\");\n onRefresh();\n setSending(false);\n };\n\n const handleKeyDown = (e: any) => {\n if (e.key === \"Enter\" && !e.shiftKey) { e.preventDefault(); send(); }\n };\n\n return (\n

\n 💬 Message Board\n

\n\n {/* Input */}\n

\n setAuthor(e.target.value)}\n className=\"bg-navy-700 text-white rounded-xl px-3 py-3 text-sm border border-navy-600/30 cursor-pointer focus:outline-none focus:ring-2 focus:ring-electric/50\"\n >\n \n \n \n setContent(e.target.value)}\n onKeyDown={handleKeyDown}\n placeholder=\"Leave a note for each other...\"\n className=\"flex-1 bg-navy-700 text-white rounded-xl px-4 py-3 text-sm border border-navy-600/30 focus:outline-none focus:ring-2 focus:ring-electric/50\"\n />\n \n Send\n \n

\n\n {/* Messages */}\n

\n {messages.length === 0 &&

No messages yet. Say hi! 👋

}\n {messages.map((msg: any) => (\n

\n {msg.author[0]}\n

\n {msg.author}\n {new Date(msg.createdAt + \"Z\").toLocaleString(\"en-MY\", { dateStyle: \"medium\", timeStyle: \"short\" })}\n

{msg.content}

\n ))}\n

\n );\n}\n",[],[178,271,289],"824cf9e6-51d4-11f1-be2d-ee650bb23af1","LoanList.tsx","824cfa90-51d4-11f1-be2d-ee650bb23af1",17,["D",1779010858612],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { EditIcon, TrashIcon } from \"./Icons.tsx\";\n\nconst fmt = (n: number) => `RM ${n.toLocaleString(\"en-MY\", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;\n\nexport function LoanList({ loans, onEdit, onDelete }: { loans: any[]; onEdit: (l: any) => void; onDelete: (id: number) => void }) {\n if (loans.length === 0) return null;\n\n const seanLoans = loans.filter((l: any) => l.paidBy === \"Sean\");\n const yamLoans = loans.filter((l: any) => l.paidBy === \"Yam\");\n\n const renderGroup = (title: string, items: any[], color: string) => {\n if (items.length === 0) return null;\n return (\n

👤 {title}'s Commitments ({items.length})

\n {items.map((loan: any) => {\n const progress = loan.principal > 0 ? Math.min(100, (loan.totalPaid / loan.principal) * 100) : 0;\n return (\n

\n {loan.name}\n {loan.isRental && RENTAL}\n

\n \n \n

\n\n

Lender: {loan.lender === \"Other\" ? loan.lenderOther : loan.lender}

Type: {loan.loanType}

Monthly: {fmt(loan.monthlyPayment)}

Balance: {fmt(loan.currentBalance)}

Principal: {fmt(loan.principal)}

Interest: {loan.interestRate}%

Due day: {loan.paymentDueDay}th

Paid: {fmt(loan.totalPaid)}

\n\n {loan.description && (\n

\n {loan.description}\n

\n )}\n\n {!loan.isRental && (\n

\n )}\n

\n );\n })}\n

\n );\n };\n\n return (\n

💳 All Loans & Commitments

\n {renderGroup(\"Sean\", seanLoans, \"text-blue-300\")}\n {renderGroup(\"Yam\", yamLoans, \"text-teal\")}\n

\n );\n}\n",[],[178,271,297],"42d858be-51d4-11f1-b112-ee650bb23af1","LoanForm.tsx","42d8595e-51d4-11f1-b112-ee650bb23af1",12,["D",1779010752151],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { LENDERS, LOAN_TYPES } from \"../../shared/types.ts\";\nimport { PlusIcon, EditIcon } from \"./Icons.tsx\";\n\nconst inputCls = \"w-full rounded-xl px-4 py-3 text-white text-sm focus:outline-none focus:ring-2 focus:ring-electric/50 transition-all\";\nconst labelCls = \"text-blue-300 text-xs font-semibold uppercase tracking-wider mb-1.5 block\";\nconst selectCls = `${inputCls} appearance-none cursor-pointer`;\n\nexport function LoanForm({ onSubmit, editLoan, onCancel }: { onSubmit: (data: any) => void; editLoan?: any; onCancel?: () => void }) {\n const blank = {\n name: \"\", lender: \"Atome\", lenderOther: \"\", loanType: \"Personal Loan\", description: \"\",\n principal: \"\", interestRate: \"\", monthlyPayment: \"\", totalPaid: \"\", currentBalance: \"\",\n startDate: \"\", endDate: \"\", paymentDueDay: \"1\", paidBy: \"Sean\", isRental: false,\n };\n const [form, setForm] = useState(blank);\n\n useEffect(() => {\n if (editLoan) {\n setForm({\n ...editLoan,\n principal: String(editLoan.principal),\n interestRate: String(editLoan.interestRate),\n monthlyPayment: String(editLoan.monthlyPayment),\n totalPaid: String(editLoan.totalPaid),\n currentBalance: String(editLoan.currentBalance),\n paymentDueDay: String(editLoan.paymentDueDay),\n isRental: Boolean(editLoan.isRental),\n });\n }\n }, [editLoan]);\n\n const set = (key: string) => (e: any) => {\n const val = e.target.type === \"checkbox\" ? e.target.checked : e.target.value;\n setForm((f: any) => ({ ...f, [key]: val }));\n };\n\n const handleSubmit = (e: any) => {\n e.preventDefault();\n onSubmit({\n ...form,\n principal: Number(form.principal) || 0,\n interestRate: Number(form.interestRate) || 0,\n monthlyPayment: Number(form.monthlyPayment) || 0,\n totalPaid: Number(form.totalPaid) || 0,\n currentBalance: Number(form.currentBalance) || 0,\n paymentDueDay: Number(form.paymentDueDay) || 1,\n });\n if (!editLoan) setForm(blank);\n };\n\n return (\n

\n {editLoan ? <> Edit Loan : <> Add New Loan}\n

\n\n

\n 💳 Loan Name\n \n

\n 🏦 Lender\n \n

\n {form.lender === \"Other\" && (\n

\n 🏦 Lender Name\n \n

\n )}\n

\n 📋 Loan Type\n \n

\n 💰 Principal Amount (RM)\n \n

\n 📊 Interest Rate (%)\n \n

\n 📅 Monthly Payment (RM)\n \n

\n ✅ Total Paid So Far (RM)\n \n

\n 📉 Current Balance (RM)\n \n

\n 🗓 Start Date\n \n

\n 🏁 End Date\n \n

\n 📆 Due Day (1-31)\n \n

\n 👤 Paid By\n \n

\n \n \n 🏠 This is rental / utility (not a loan)\n \n

\n\n

\n 📝 Description\n

\n      </div>\n\n      <div className=\"flex gap-3 pt-2\">\n        <button type=\"submit\" className=\"bg-electric hover:bg-blue-600 text-white font-semibold px-8 py-3 rounded-xl transition-all shadow-lg shadow-blue-500/20 cursor-pointer text-sm\">\n          {editLoan ? \"💾 Save Changes\" : \"➕ Add Loan\"}\n        </button>\n        {onCancel && (\n          <button type=\"button\" onClick={onCancel} className=\"bg-navy-700 hover:bg-navy-600 text-blue-300 font-semibold px-6 py-3 rounded-xl transition-all cursor-pointer text-sm\">\n            Cancel\n          </button>\n        )}\n      </div>\n    </form>\n  );\n}\n",[],[178,271,305],"1d33ca94-51d4-11f1-8d38-ee650bb23af1","Icons.tsx","1d33cb34-51d4-11f1-8d38-ee650bb23af1",10,["D",1779010688996],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\n// Simple SVG icon components for the finance app\nexport const Icon = ({ d, size = 18, color = \"currentColor\" }: { d: string; size?: number; color?: string }) => (\n  <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke={color} strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n    <path d={d} />\n  </svg>\n);\n\nexport const WalletIcon = () => <Icon d=\"M21 12V7H5a2 2 0 0 1 0-4h14v4M3 5v14a2 2 0 0 0 2 2h16v-5M18 12a1 1 0 1 0 0 2 1 1 0 0 0 0-2z\" />;\nexport const ChartIcon = () => <Icon d=\"M18 20V10M12 20V4M6 20v-6\" />;\nexport const CalendarIcon = () => <Icon d=\"M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z\" />;\nexport const UserIcon = () => <Icon d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2M12 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8z\" />;\nexport const PlusIcon = () => <Icon d=\"M12 5v14M5 12h14\" />;\nexport const AlertIcon = () => <Icon d=\"M12 9v4M12 17h.01M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\" color=\"#f59e0b\" />;\nexport const CheckIcon = () => <Icon d=\"M20 6L9 17l-5-5\" color=\"#14b8a6\" />;\nexport const XIcon = () => <Icon d=\"M18 6L6 18M6 6l12 12\" color=\"#ef4444\" />;\nexport const MessageIcon = () => <Icon d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\" />;\nexport const TrophyIcon = () => <Icon d=\"M6 9H4.5a2.5 2.5 0 0 1 0-5H6M18 9h1.5a2.5 2.5 0 0 0 0-5H18M4 22h16M10 22V9M14 22V9M8 2h8l-1 7H9L8 2z\" color=\"#f59e0b\" />;\nexport const CalculatorIcon = () => <Icon d=\"M4 2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zM8 10h.01M12 10h.01M16 10h.01M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01M16 18h.01\" />;\nexport const TrashIcon = () => <Icon d=\"M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\" color=\"#ef4444\" />;\nexport const EditIcon = () => <Icon d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\" />;\nexport const DollarIcon = () => <Icon d=\"M12 1v22M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6\" color=\"#14b8a6\" />;\nexport const TargetIcon = () => <Icon d=\"M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM12 6a6 6 0 1 0 0 12 6 6 0 0 0 0-6zM12 10a2 2 0 1 0 0 4 2 2 0 0 0 0-4z\" />;\n",[],[178,271,313],"754b17b4-51d4-11f1-b2ff-ee650bb23af1","DebtChart.tsx","754b1854-51d4-11f1-b2ff-ee650bb23af1",16,["D",1779010836789],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useMemo } from \"https://esm.sh/react@18.2.0\";\nimport { ChartIcon } from \"./Icons.tsx\";\n\nconst fmt = (n: number) => `RM ${(n / 1000).toFixed(1)}k`;\n\nexport function DebtChart({ loans }: { loans: any[] }) {\n  const chartData = useMemo(() => {\n    const seanLoans = loans.filter((l: any) => l.paidBy === \"Sean\" && !l.isRental);\n    const yamLoans = loans.filter((l: any) => l.paidBy === \"Yam\" && !l.isRental);\n\n    let seanBal = seanLoans.reduce((s: number, l: any) => s + l.currentBalance, 0);\n    let yamBal = yamLoans.reduce((s: number, l: any) => s + l.currentBalance, 0);\n    const seanMonthly = seanLoans.reduce((s: number, l: any) => s + l.monthlyPayment, 0);\n    const yamMonthly = yamLoans.reduce((s: number, l: any) => s + l.monthlyPayment, 0);\n\n    const points: { label: string; sean: number; yam: number }[] = [];\n    const now = new Date();\n\n    for (let i = 0; i <= 36; i += 2) {\n      const d = new Date(now);\n      d.setMonth(d.getMonth() + i);\n      const label = d.toLocaleDateString(\"en-MY\", { month: \"short\", year: \"2-digit\" });\n      points.push({\n        label,\n        sean: Math.max(0, seanBal),\n        yam: Math.max(0, yamBal),\n      });\n      seanBal -= seanMonthly * 2;\n      yamBal -= yamMonthly * 2;\n      if (seanBal <= 0 && yamBal <= 0) break;\n    }\n\n    return points;\n  }, [loans]);\n\n  if (loans.filter((l: any) => !l.isRental).length === 0) {\n    return null;\n  }\n\n  const maxVal = Math.max(...chartData.flatMap((d) => [d.sean, d.yam]), 1);\n  const chartH = 220;\n  const barW = Math.max(12, Math.min(30, 600 / chartData.length / 2.5));\n\n  return (\n    <div className=\"bg-navy-800 rounded-2xl p-5 border border-navy-600/30\">\n      <h3 className=\"text-lg font-bold text-white flex items-center gap-2 mb-2\">\n        <ChartIcon /> 📊 Debt Reduction Timeline\n      </h3>\n      <p className=\"text-blue-300 text-sm mb-4\">Projected balance every 2 months — watch it go to zero! 🎯</p>\n\n      <div className=\"flex items-center gap-6 mb-4 text-xs\">\n        <div className=\"flex items-center gap-2\">\n          <div className=\"w-3 h-3 rounded-sm bg-electric\" />\n          <span className=\"text-blue-300\">Sean</span>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <div className=\"w-3 h-3 rounded-sm bg-teal\" />\n          <span className=\"text-blue-300\">Yam</span>\n        </div>\n      </div>\n\n      <div className=\"overflow-x-auto\">\n        <div className=\"min-w-[500px]\">\n          {/* Y-axis labels */}\n          <div className=\"flex\">\n            <div className=\"w-16 shrink-0 flex flex-col justify-between text-right pr-2\" style={{ height: chartH }}>\n              <span className=\"text-blue-400/50 text-[10px]\">{fmt(maxVal)}</span>\n              <span className=\"text-blue-400/50 text-[10px]\">{fmt(maxVal / 2)}</span>\n              <span className=\"text-blue-400/50 text-[10px]\">RM 0</span>\n            </div>\n\n            {/* Chart area */}\n            <div className=\"flex-1 border-l border-b border-navy-600/30 relative\" style={{ height: chartH }}>\n              {/* Grid lines */}\n              <div className=\"absolute inset-0\">\n                <div className=\"border-b border-navy-600/15 absolute w-full\" style={{ top: \"25%\" }} />\n                <div className=\"border-b border-navy-600/15 absolute w-full\" style={{ top: \"50%\" }} />\n                <div className=\"border-b border-navy-600/15 absolute w-full\" style={{ top: \"75%\" }} />\n              </div>\n\n              {/* Bars */}\n              <div className=\"absolute inset-0 flex items-end justify-around px-2\">\n                {chartData.map((d, i) => (\n                  <div key={i} className=\"flex flex-col items-center gap-0.5\">\n                    <div className=\"flex items-end gap-0.5\">\n                      <div\n                        className=\"bg-gradient-to-t from-electric to-blue-400 rounded-t-sm transition-all duration-500\"\n                        style={{ width: barW, height: `${(d.sean / maxVal) * (chartH - 30)}px` }}\n                        title={`Sean: RM ${d.sean.toLocaleString()}`}\n                      />\n                      <div\n                        className=\"bg-gradient-to-t from-teal to-emerald-400 rounded-t-sm transition-all duration-500\"\n                        style={{ width: barW, height: `${(d.yam / maxVal) * (chartH - 30)}px` }}\n                        title={`Yam: RM ${d.yam.toLocaleString()}`}\n                      />\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </div>\n          </div>\n\n          {/* X-axis labels */}\n          <div className=\"flex ml-16\">\n            <div className=\"flex-1 flex justify-around\">\n              {chartData.map((d, i) => (\n                <span key={i} className=\"text-blue-400/50 text-[10px] text-center\" style={{ width: barW * 2 + 4 }}>{d.label}</span>\n              ))}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n",[],[178,271,321],"31419322-51d4-11f1-a219-ee650bb23af1","Dashboard.tsx","314193e0-51d4-11f1-a219-ee650bb23af1",11,["D",1779010722642],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useMemo } from \"https://esm.sh/react@18.2.0\";\nimport { WalletIcon, UserIcon, CalendarIcon, AlertIcon, DollarIcon, TargetIcon } from \"./Icons.tsx\";\n\nconst fmt = (n: number) => `RM ${n.toLocaleString(\"en-MY\", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;\n\nfunction Card({ children, className = \"\", glow = false }: any) {\n  return (\n    <div className={`bg-navy-800 rounded-2xl p-5 border border-navy-600/30 ${glow ? \"shadow-[0_0_30px_rgba(59,130,246,0.08)]\" : \"\"} ${className}`}>\n      {children}\n    </div>\n  );\n}\n\nfunction StatCard({ icon, label, value, sub, color = \"text-white\" }: any) {\n  return (\n    <Card glow>\n      <div className=\"flex items-center gap-3 mb-2\">\n        <div className=\"w-9 h-9 rounded-xl bg-navy-700 flex items-center justify-center\">{icon}</div>\n        <span className=\"text-blue-300 text-sm font-medium\">{label}</span>\n      </div>\n      <div className={`text-2xl sm:text-3xl font-bold ${color} tracking-tight`}>{value}</div>\n      {sub && <div className=\"text-blue-400/60 text-xs mt-1\">{sub}</div>}\n    </Card>\n  );\n}\n\nexport function Dashboard({ loans, payments }: { loans: any[]; payments: any[] }) {\n  const stats = useMemo(() => {\n    const seanLoans = loans.filter((l: any) => l.paidBy === \"Sean\");\n    const yamLoans = loans.filter((l: any) => l.paidBy === \"Yam\");\n\n    const seanMonthly = seanLoans.reduce((s: number, l: any) => s + l.monthlyPayment, 0);\n    const yamMonthly = yamLoans.reduce((s: number, l: any) => s + l.monthlyPayment, 0);\n    const totalMonthly = seanMonthly + yamMonthly;\n\n    // Loan debt excludes rental\n    const seanDebt = seanLoans.filter((l: any) => !l.isRental).reduce((s: number, l: any) => s + l.currentBalance, 0);\n    const yamDebt = yamLoans.filter((l: any) => !l.isRental).reduce((s: number, l: any) => s + l.currentBalance, 0);\n    const totalDebt = seanDebt + yamDebt;\n\n    // Estimated payoff date\n    const allNonRental = loans.filter((l: any) => !l.isRental);\n    const totalMonthlyNonRental = allNonRental.reduce((s: number, l: any) => s + l.monthlyPayment, 0);\n    let monthsToPayoff = totalMonthlyNonRental > 0 ? Math.ceil(totalDebt / totalMonthlyNonRental) : 0;\n    const payoffDate = new Date();\n    payoffDate.setMonth(payoffDate.getMonth() + monthsToPayoff);\n\n    // Due soon alerts (within 5 days)\n    const today = new Date();\n    const alerts: any[] = [];\n    loans.forEach((l: any) => {\n      const dueDate = new Date(today.getFullYear(), today.getMonth(), l.paymentDueDay);\n      if (dueDate < today) dueDate.setMonth(dueDate.getMonth() + 1);\n      const diff = Math.ceil((dueDate.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));\n      if (diff <= 5 && diff >= 0 && l.currentBalance > 0) {\n        alerts.push({ loan: l, daysLeft: diff, dueDate });\n      }\n    });\n\n    // Milestone celebrations\n    const milestones: any[] = [];\n    allNonRental.forEach((l: any) => {\n      if (l.principal > 0) {\n        const pct = (l.totalPaid / l.principal) * 100;\n        if (pct >= 100) milestones.push({ loan: l, pct: 100 });\n        else if (pct >= 70) milestones.push({ loan: l, pct: 70 });\n      }\n    });\n\n    return { seanMonthly, yamMonthly, totalMonthly, seanDebt, yamDebt, totalDebt, payoffDate, monthsToPayoff, alerts, milestones };\n  }, [loans, payments]);\n\n  return (\n    <div className=\"space-y-5\">\n      {/* Alerts */}\n      {stats.alerts.length > 0 && (\n        <div className=\"space-y-2\">\n          {stats.alerts.map((a: any, i: number) => (\n            <div key={i} className=\"bg-gradient-to-r from-amber-900/40 to-amber-800/20 border border-amber-500/30 rounded-xl p-4 flex items-center gap-3\">\n              <AlertIcon />\n              <div>\n                <span className=\"text-amber-300 font-semibold\">⏰ Payment Due Soon</span>\n                <span className=\"text-amber-100 ml-2\">\n                  {a.loan.name} — {fmt(a.loan.monthlyPayment)} due in {a.daysLeft} day{a.daysLeft !== 1 ? \"s\" : \"\"}\n                </span>\n              </div>\n            </div>\n          ))}\n        </div>\n      )}\n\n      {/* Milestones */}\n      {stats.milestones.length > 0 && (\n        <div className=\"space-y-2\">\n          {stats.milestones.map((m: any, i: number) => (\n            <div key={i} className={`rounded-xl p-4 border ${m.pct >= 100 ? \"bg-gradient-to-r from-teal-900/50 to-emerald-800/30 border-teal-400/40\" : \"bg-gradient-to-r from-blue-900/40 to-indigo-800/20 border-blue-400/30\"}`}>\n              <span className=\"text-2xl mr-2\">{m.pct >= 100 ? \"🎉🎊🏆\" : \"🎉✨\"}</span>\n              <span className={`font-bold ${m.pct >= 100 ? \"text-teal-300\" : \"text-blue-300\"}`}>\n                {m.pct >= 100 ? \"FULLY PAID OFF!\" : \"70% Milestone!\"}{\" \"}\n              </span>\n              <span className=\"text-white\">{m.loan.name} — {m.pct >= 100 ? \"Congratulations! This loan is completely paid off!\" : \"You've paid more than 70% — almost there! Keep going!\"}</span>\n            </div>\n          ))}\n        </div>\n      )}\n\n      {/* Stats Grid */}\n      <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\">\n        <StatCard icon={<UserIcon />} label=\"Sean's Monthly\" value={fmt(stats.seanMonthly)} sub=\"Including rental\" />\n        <StatCard icon={<UserIcon />} label=\"Yam's Monthly\" value={fmt(stats.yamMonthly)} />\n        <StatCard icon={<WalletIcon />} label=\"Combined Monthly\" value={fmt(stats.totalMonthly)} color=\"text-electric\" sub=\"Total commitments\" />\n        <StatCard icon={<DollarIcon />} label=\"Sean's Loan Debt\" value={fmt(stats.seanDebt)} sub=\"Excluding rental\" />\n        <StatCard icon={<DollarIcon />} label=\"Yam's Loan Debt\" value={fmt(stats.yamDebt)} sub=\"Excluding rental\" />\n        <StatCard icon={<TargetIcon />} label=\"Total Loan Debt\" value={fmt(stats.totalDebt)} color=\"text-teal\" sub={`Est. debt-free by ${stats.payoffDate.toLocaleDateString(\"en-MY\", { month: \"long\", year: \"numeric\" })} (~${stats.monthsToPayoff} months)`} />\n      </div>\n    </div>\n  );\n}\n",[],[178,271,329],"9a75504a-51d4-11f1-b525-ee650bb23af1","App.tsx","019e354b-4058-72f9-b23b-f4f7aea91f3e",18,["D",1779010899129],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useCallback, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { useApi, apiPost, apiPut, apiDelete } from \"./hooks.ts\";\nimport { Dashboard } from \"./Dashboard.tsx\";\nimport { LoanForm } from \"./LoanForm.tsx\";\nimport { LoanList } from \"./LoanList.tsx\";\nimport { PaymentTracker } from \"./PaymentTracker.tsx\";\nimport { MessageBoard } from \"./MessageBoard.tsx\";\nimport { WhatIfCalculator } from \"./WhatIfCalculator.tsx\";\nimport { DebtChart } from \"./DebtChart.tsx\";\n\ntype Tab = \"dashboard\" | \"loans\" | \"payments\" | \"tools\";\n\nexport function App() {\n  const [tab, setTab] = useState<Tab>(\"dashboard\");\n  const [editLoan, setEditLoan] = useState<any>(null);\n  const [showForm, setShowForm] = useState(false);\n\n  const { data: statsData, refetch: refetchStats } = useApi<any>(\"/api/stats\");\n  const { data: messages, refetch: refetchMessages } = useApi<any[]>(\"/api/messages\");\n\n  const loans = statsData?.loans || [];\n  const payments = statsData?.payments || [];\n\n  const refetchAll = useCallback(() => {\n    refetchStats();\n    refetchMessages();\n  }, [refetchStats, refetchMessages]);\n\n  const handleAddLoan = async (data: any) => {\n    if (editLoan) {\n      await apiPut(`/api/loans/${editLoan.id}`, data);\n      setEditLoan(null);\n    } else {\n      await apiPost(\"/api/loans\", data);\n    }\n    setShowForm(false);\n    refetchStats();\n  };\n\n  const handleDeleteLoan = async (id: number) => {\n    await apiDelete(`/api/loans/${id}`);\n    refetchStats();\n  };\n\n  const tabCls = (t: Tab) =>\n    `px-5 py-2.5 rounded-xl font-semibold text-sm transition-all cursor-pointer ${\n      tab === t\n        ? \"bg-electric text-white shadow-lg shadow-blue-500/20\"\n        : \"text-blue-300 hover:bg-navy-700 hover:text-white\"\n    }`;\n\n  return (\n    <div className=\"min-h-screen bg-navy-900 text-white\">\n      {/* Header */}\n      <header className=\"bg-gradient-to-r from-navy-800 to-navy-900 border-b border-navy-600/30 sticky top-0 z-50\">\n        <div className=\"max-w-6xl mx-auto px-4 py-4\">\n          <div className=\"flex flex-col sm:flex-row sm:items-center justify-between gap-3\">\n            <div>\n              <h1 className=\"text-xl sm:text-2xl font-bold bg-gradient-to-r from-white to-blue-300 bg-clip-text text-transparent\">\n                💎 Sean & Yam\n              </h1>\n              <p className=\"text-blue-400/60 text-xs\">Financial Freedom Tracker</p>\n            </div>\n            <nav className=\"flex gap-1 bg-navy-900/50 p-1 rounded-xl border border-navy-600/20 overflow-x-auto\">\n              <button onClick={() => setTab(\"dashboard\")} className={tabCls(\"dashboard\")}>📊 Overview</button>\n              <button onClick={() => setTab(\"loans\")} className={tabCls(\"loans\")}>💳 Loans</button>\n              <button onClick={() => setTab(\"payments\")} className={tabCls(\"payments\")}>📅 Payments</button>\n              <button onClick={() => setTab(\"tools\")} className={tabCls(\"tools\")}>🔧 Tools</button>\n            </nav>\n          </div>\n        </div>\n      </header>\n\n      {/* Content */}\n      <main className=\"max-w-6xl mx-auto px-4 py-6 space-y-6\">\n        {tab === \"dashboard\" && (\n          <>\n            <Dashboard loans={loans} payments={payments} />\n            <DebtChart loans={loans} />\n          </>\n        )}\n\n        {tab === \"loans\" && (\n          <>\n            {!showForm && !editLoan && (\n              <button\n                onClick={() => setShowForm(true)}\n                className=\"bg-electric hover:bg-blue-600 text-white font-semibold px-6 py-3 rounded-xl transition-all shadow-lg shadow-blue-500/20 cursor-pointer flex items-center gap-2\"\n              >\n                ➕ Add New Loan\n              </button>\n            )}\n            {(showForm || editLoan) && (\n              <LoanForm\n                editLoan={editLoan}\n                onSubmit={handleAddLoan}\n                onCancel={() => { setShowForm(false); setEditLoan(null); }}\n              />\n            )}\n            <LoanList loans={loans} onEdit={(l) => { setEditLoan(l); setShowForm(false); }} onDelete={handleDeleteLoan} />\n          </>\n        )}\n\n        {tab === \"payments\" && (\n          <PaymentTracker loans={loans} payments={payments} onUpdate={refetchStats} />\n        )}\n\n        {tab === \"tools\" && (\n          <>\n            <WhatIfCalculator loans={loans} />\n            <MessageBoard messages={messages || []} onRefresh={refetchMessages} />\n          </>\n        )}\n      </main>\n\n      {/* Footer */}\n      <footer className=\"border-t border-navy-600/20 mt-12 py-6 text-center\">\n        <p className=\"text-blue-400/40 text-xs\">\n          Sean & Yam Financial Tracker · Built with 💙 ·{\" \"}\n          <a href=\"/source\" className=\"underline hover:text-blue-300 transition-colors\">View Source</a>\n        </p>\n      </footer>\n    </div>\n  );\n}\n",[],[178,271,337],"df05139a-51d3-11f1-8889-ee650bb23af1",["D",1779010584120],[203,204,205,206,207,208,209,210,211,212],[178,271],["D",1779010584120],[202,213,214,215],[178],"fd9e4ce0-51d3-11f1-9d75-ee650bb23af1","routes.ts","fd9e4d9e-51d3-11f1-9d75-ee650bb23af1",6,["D",1779010635982],"import { Hono } from \"npm:hono\";\nimport { initDB, sqlite } from \"./db.ts\";\n\nconst api = new Hono();\n\n// Initialize DB on first request\nlet dbReady = false;\napi.use(\"*\", async (_c, next) => {\n  if (!dbReady) {\n    await initDB();\n    dbReady = true;\n  }\n  await next();\n});\n\n// ── Loans CRUD ──\n\napi.get(\"/loans\", async (c) => {\n  const result = await sqlite.execute(\"SELECT * FROM loans ORDER BY paidBy, name\");\n  return c.json(result.rows);\n});\n\napi.post(\"/loans\", async (c) => {\n  const loan = await c.req.json();\n  const result = await sqlite.execute({\n    sql: `INSERT INTO loans (name, lender, lenderOther, loanType, description, principal, interestRate, monthlyPayment, totalPaid, currentBalance, startDate, endDate, paymentDueDay, paidBy, isRental)\n          VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,\n    args: [\n      loan.name, loan.lender, loan.lenderOther || \"\", loan.loanType, loan.description || \"\",\n      loan.principal, loan.interestRate || 0, loan.monthlyPayment, loan.totalPaid || 0,\n      loan.currentBalance, loan.startDate, loan.endDate || \"\", loan.paymentDueDay || 1,\n      loan.paidBy, loan.isRental ? 1 : 0,\n    ],\n  });\n  return c.json({ id: result.lastInsertRowid, ...loan }, 201);\n});\n\napi.put(\"/loans/:id\", async (c) => {\n  const id = c.req.param(\"id\");\n  const loan = await c.req.json();\n  await sqlite.execute({\n    sql: `UPDATE loans SET name=?, lender=?, lenderOther=?, loanType=?, description=?, principal=?, interestRate=?, monthlyPayment=?, totalPaid=?, currentBalance=?, startDate=?, endDate=?, paymentDueDay=?, paidBy=?, isRental=? WHERE id=?`,\n    args: [\n      loan.name, loan.lender, loan.lenderOther || \"\", loan.loanType, loan.description || \"\",\n      loan.principal, loan.interestRate || 0, loan.monthlyPayment, loan.totalPaid || 0,\n      loan.currentBalance, loan.startDate, loan.endDate || \"\", loan.paymentDueDay || 1,\n      loan.paidBy, loan.isRental ? 1 : 0, Number(id),\n    ],\n  });\n  return c.json({ id: Number(id), ...loan });\n});\n\napi.delete(\"/loans/:id\", async (c) => {\n  const id = c.req.param(\"id\");\n  await sqlite.batch([\n    { sql: \"DELETE FROM payment_records WHERE loanId = ?\", args: [Number(id)] },\n    { sql: \"DELETE FROM loans WHERE id = ?\", args: [Number(id)] },\n  ]);\n  return c.json({ ok: true });\n});\n\n// ── Payment Records ──\n\napi.get(\"/payments/:loanId\", async (c) => {\n  const loanId = c.req.param(\"loanId\");\n  const result = await sqlite.execute({\n    sql: \"SELECT * FROM payment_records WHERE loanId = ? ORDER BY year, month\",\n    args: [Number(loanId)],\n  });\n  return c.json(result.rows);\n});\n\napi.post(\"/payments/toggle\", async (c) => {\n  const { loanId, month, year, isPaid, paidBy } = await c.req.json();\n\n  if (isPaid) {\n    await sqlite.execute({\n      sql: `INSERT INTO payment_records (loanId, month, year, isPaid, paidBy, paidAt)\n            VALUES (?, ?, ?, 1, ?, datetime('now'))\n            ON CONFLICT(loanId, month, year) DO UPDATE SET isPaid=1, paidBy=?, paidAt=datetime('now')`,\n      args: [loanId, month, year, paidBy, paidBy],\n    });\n    // Reduce balance\n    const loan = await sqlite.execute({ sql: \"SELECT * FROM loans WHERE id = ?\", args: [loanId] });\n    if (loan.rows.length > 0) {\n      const l = loan.rows[0] as any;\n      const newBalance = Math.max(0, l.currentBalance - l.monthlyPayment);\n      const newTotalPaid = l.totalPaid + l.monthlyPayment;\n      await sqlite.execute({\n        sql: \"UPDATE loans SET currentBalance = ?, totalPaid = ? WHERE id = ?\",\n        args: [newBalance, newTotalPaid, loanId],\n      });\n    }\n  } else {\n    // Check if record exists and was paid\n    const existing = await sqlite.execute({\n      sql: \"SELECT * FROM payment_records WHERE loanId = ? AND month = ? AND year = ?\",\n      args: [loanId, month, year],\n    });\n    if (existing.rows.length > 0 && (existing.rows[0] as any).isPaid) {\n      await sqlite.execute({\n        sql: \"UPDATE payment_records SET isPaid = 0, paidAt = NULL WHERE loanId = ? AND month = ? AND year = ?\",\n        args: [loanId, month, year],\n      });\n      // Restore balance\n      const loan = await sqlite.execute({ sql: \"SELECT * FROM loans WHERE id = ?\", args: [loanId] });\n      if (loan.rows.length > 0) {\n        const l = loan.rows[0] as any;\n        const newBalance = l.currentBalance + l.monthlyPayment;\n        const newTotalPaid = Math.max(0, l.totalPaid - l.monthlyPayment);\n        await sqlite.execute({\n          sql: \"UPDATE loans SET currentBalance = ?, totalPaid = ? WHERE id = ?\",\n          args: [newBalance, newTotalPaid, loanId],\n        });\n      }\n    }\n  }\n  return c.json({ ok: true });\n});\n\napi.get(\"/payments/all/list\", async (c) => {\n  const result = await sqlite.execute(\"SELECT * FROM payment_records ORDER BY year, month\");\n  return c.json(result.rows);\n});\n\n// ── Messages ──\n\napi.get(\"/messages\", async (c) => {\n  const result = await sqlite.execute(\"SELECT * FROM messages ORDER BY createdAt DESC LIMIT 50\");\n  return c.json(result.rows);\n});\n\napi.post(\"/messages\", async (c) => {\n  const msg = await c.req.json();\n  const result = await sqlite.execute({\n    sql: \"INSERT INTO messages (author, content) VALUES (?, ?)\",\n    args: [msg.author, msg.content],\n  });\n  return c.json({ id: result.lastInsertRowid, ...msg }, 201);\n});\n\n// ── Dashboard Stats ──\n\napi.get(\"/stats\", async (c) => {\n  const loans = await sqlite.execute(\"SELECT * FROM loans ORDER BY paidBy, name\");\n  const payments = await sqlite.execute(\"SELECT * FROM payment_records\");\n  return c.json({\n    loans: loans.rows,\n    payments: payments.rows,\n  });\n});\n\nexport default api;\n",[],[183,352],"f0a0bc9e-51d3-11f1-9c7f-ee650bb23af1","db.ts","f0a0bd66-51d3-11f1-9c7f-ee650bb23af1",5,["D",1779010614208],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nexport async function initDB() {\n  await sqlite.batch([\n    {\n      sql: `CREATE TABLE IF NOT EXISTS loans (\n        id INTEGER PRIMARY KEY AUTOINCREMENT,\n        name TEXT NOT NULL,\n        lender TEXT NOT NULL,\n        lenderOther TEXT DEFAULT '',\n        loanType TEXT NOT NULL,\n        description TEXT DEFAULT '',\n        principal REAL NOT NULL,\n        interestRate REAL DEFAULT 0,\n        monthlyPayment REAL NOT NULL,\n        totalPaid REAL DEFAULT 0,\n        currentBalance REAL NOT NULL,\n        startDate TEXT NOT NULL,\n        endDate TEXT DEFAULT '',\n        paymentDueDay INTEGER DEFAULT 1,\n        paidBy TEXT NOT NULL DEFAULT 'Sean',\n        isRental INTEGER DEFAULT 0,\n        createdAt TEXT DEFAULT (datetime('now'))\n      )`,\n    },\n    {\n      sql: `CREATE TABLE IF NOT EXISTS payment_records (\n        id INTEGER PRIMARY KEY AUTOINCREMENT,\n        loanId INTEGER NOT NULL,\n        month INTEGER NOT NULL,\n        year INTEGER NOT NULL,\n        isPaid INTEGER DEFAULT 0,\n        paidBy TEXT NOT NULL DEFAULT 'Sean',\n        paidAt TEXT,\n        FOREIGN KEY (loanId) REFERENCES loans(id) ON DELETE CASCADE,\n        UNIQUE(loanId, month, year)\n      )`,\n    },\n    {\n      sql: `CREATE TABLE IF NOT EXISTS messages (\n        id INTEGER PRIMARY KEY AUTOINCREMENT,\n        author TEXT NOT NULL,\n        content TEXT NOT NULL,\n        createdAt TEXT DEFAULT (datetime('now'))\n      )`,\n    },\n  ]);\n}\n\nexport { sqlite };\n",[],[183,360],["D",1779010592837],[199,200],[183],["D",1779010584120],["D",1789555877593],{"_109":108,"_116":111},{"_109":108,"_110":111,"_112":111,"_19":60,"_113":114,"_115":31},{"_13":94,"_38":95,"_48":47,"_96":49,"_97":98,"_99":100,"_101":55,"_102":103,"_104":105,"_106":50,"_107":108},"ctx",{"_87":-5,"_137":408,"_409":410,"_411":412,"_413":31,"_414":31,"_415":31,"_416":64,"_417":-5,"_418":-7,"_419":-7,"_420":68,"_421":31,"_422":31,"_423":-5,"_424":31,"_425":31,"_426":31,"_427":-5},"ENV",{"_379":380,"_381":382,"_383":95,"_384":385,"_386":387,"_388":389,"_390":391,"_392":393,"_394":395,"_396":397,"_398":399,"_400":401,"_402":403,"_404":405,"_406":407},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]
</article></body></html>

Diff · v21