Sean & Yam · Financial Tracker

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_379":380,"_381":382},"routes/_app.x.$handle.$name",{"_109":108,"_37":50,"_117":95,"_32":111,"_13":14,"_118":-5,"_11":119,"_120":121,"_122":123,"_124":125,"_126":127,"_26":-5,"_128":129,"_130":131,"_132":30,"_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,"_37":50,"_43":51,"_52":-5,"_53":30,"_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":30},"version",17,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","2d7ecf92-2fa1-435f-975e-d197ea519597","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":-7,"_29":30,"_31":30,"_32":33,"_34":33},"file",{"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":14,"_46":47,"_29":30},"previous","deleted",false,"deletedHere","path","frontend/components/LoanList.tsx","latestPath","fileId","824cfa90-51d4-11f1-be2d-ee650bb23af1","name","LoanList.tsx","fileType","script","content","/** @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","createdAt",["D",1779010858612],"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":30},"branch",{"_13":94,"_37":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,"_37":50,"_43":374,"_52":-5,"_53":30,"_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":375,"_77":-5,"_78":79,"_80":79,"_81":82,"_83":82,"_84":82,"_85":79,"_86":79,"_87":376,"_89":377,"_91":378,"_93":30},"tree",[201,204,220,222,223],"files",[201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222,223],"counts",{"_191":68,"_192":162,"_193":68,"_194":195,"_196":197},"contents",[151,152,153,154,155],"upstreamProject",{"_48":103,"_37":147,"_57":58,"_59":148,"_54":55,"_87":149},"upstreamBranch",{"_48":98,"_43":140,"_141":142,"_37":95,"_96":103,"_13":143,"_97":-5,"_99":-5,"_144":145,"_52":-5,"_93":30,"_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=1789577999&sig=2ab81189fced4fb576e9436da67acbaf730951eef80212e8dc3c2bf0f6be2f57",{"_109":146,"_116":150},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789577999&sig=aa7aec25480c67f41f9650e8445afc21cf1a6c5fd3969752b90fbd3f6a604c46",{"_48":185,"_37":186,"_35":187,"_158":-5,"_46":47,"_45":188,"_160":64,"_43":189,"_13":68,"_39":178,"_41":-5,"_29":30,"_165":-5,"_32":190},{"_48":180,"_37":181,"_35":182,"_158":-5,"_46":47,"_45":162,"_160":64,"_43":183,"_13":68,"_39":178,"_41":-5,"_29":30,"_165":-5,"_32":184},{"_48":173,"_37":174,"_35":175,"_158":-5,"_46":47,"_45":176,"_160":64,"_43":177,"_13":68,"_39":178,"_41":-5,"_29":30,"_165":-5,"_32":179},{"_48":167,"_37":168,"_35":169,"_158":-5,"_46":47,"_45":162,"_160":30,"_43":170,"_13":68,"_39":26,"_41":171,"_29":30,"_165":-5,"_32":172},{"_48":156,"_37":157,"_35":62,"_158":-5,"_46":47,"_45":159,"_160":30,"_43":161,"_13":162,"_39":163,"_41":164,"_29":30,"_165":-5,"_32":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],"df052cc2-51d3-11f1-8889-ee650bb23af1","README.md","019e354b-4058-72f9-b23c-11bbeafa2ec0",["D",1779010584120],"# 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",[168],"e3e017e8-51d3-11f1-bbb6-ee650bb23af1","shared","e3e018ba-51d3-11f1-bbb6-ee650bb23af1",2,["D",1779010592818],"directory",[174],"df052a92-51d3-11f1-8889-ee650bb23af1","frontend","019e354b-4058-72f9-b23c-0d28155a884c",["D",1779010584120],[181],"e3e6c7c8-51d3-11f1-83a1-ee650bb23af1","backend","e3e6c87c-51d3-11f1-83a1-ee650bb23af1",3,["D",1779010592837],[186],"pulls","branches","forks","envVars",{"_198":68,"_200":68},"connections",{"_198":68,"_199":68},"count","unfilledCount","emptyCount",{"_48":185,"_37":186,"_35":187,"_158":-5,"_46":47,"_45":188,"_160":64,"_43":371,"_13":68,"_39":178,"_41":-5,"_29":30,"_165":-5,"_225":372,"_32":373},{"_48":363,"_37":364,"_35":365,"_158":187,"_46":47,"_45":366,"_160":64,"_43":367,"_13":68,"_39":40,"_41":368,"_29":30,"_165":-5,"_225":369,"_32":370},{"_48":355,"_37":356,"_35":357,"_158":187,"_46":47,"_45":358,"_160":30,"_43":359,"_13":68,"_39":40,"_41":360,"_29":30,"_165":-5,"_225":361,"_32":362},{"_48":180,"_37":181,"_35":182,"_158":-5,"_46":47,"_45":162,"_160":64,"_43":352,"_13":68,"_39":178,"_41":-5,"_29":30,"_165":-5,"_225":353,"_32":354},{"_48":348,"_37":273,"_35":267,"_158":182,"_46":47,"_45":162,"_160":64,"_43":349,"_13":68,"_39":178,"_41":-5,"_29":30,"_165":-5,"_225":350,"_32":351},{"_48":341,"_37":342,"_35":343,"_158":267,"_46":47,"_45":162,"_160":30,"_43":344,"_13":68,"_39":40,"_41":345,"_29":30,"_165":-5,"_225":346,"_32":347},{"_48":334,"_37":335,"_35":336,"_158":267,"_46":47,"_45":162,"_160":30,"_43":337,"_13":68,"_39":40,"_41":338,"_29":30,"_165":-5,"_225":339,"_32":340},{"_48":326,"_37":327,"_35":328,"_158":267,"_46":47,"_45":329,"_160":64,"_43":330,"_13":68,"_39":40,"_41":331,"_29":30,"_165":-5,"_225":332,"_32":333},{"_48":318,"_37":319,"_35":320,"_158":267,"_46":47,"_45":321,"_160":64,"_43":322,"_13":68,"_39":40,"_41":323,"_29":30,"_165":-5,"_225":324,"_32":325},{"_48":310,"_37":311,"_35":312,"_158":267,"_46":47,"_45":313,"_160":64,"_43":314,"_13":68,"_39":40,"_41":315,"_29":30,"_165":-5,"_225":316,"_32":317},{"_48":302,"_37":303,"_35":304,"_158":267,"_46":47,"_45":305,"_160":64,"_43":306,"_13":68,"_39":40,"_41":307,"_29":30,"_165":-5,"_225":308,"_32":309},{"_48":298,"_37":38,"_35":36,"_158":267,"_46":47,"_45":14,"_160":64,"_43":299,"_13":68,"_39":40,"_41":42,"_29":30,"_165":-5,"_225":300,"_32":301},{"_48":290,"_37":291,"_35":292,"_158":267,"_46":47,"_45":293,"_160":64,"_43":294,"_13":68,"_39":40,"_41":295,"_29":30,"_165":-5,"_225":296,"_32":297},{"_48":282,"_37":283,"_35":284,"_158":267,"_46":47,"_45":285,"_160":64,"_43":286,"_13":68,"_39":40,"_41":287,"_29":30,"_165":-5,"_225":288,"_32":289},{"_48":274,"_37":275,"_35":276,"_158":267,"_46":47,"_45":277,"_160":64,"_43":278,"_13":68,"_39":40,"_41":279,"_29":30,"_165":-5,"_225":280,"_32":281},{"_48":264,"_37":265,"_35":266,"_158":267,"_46":47,"_45":268,"_160":64,"_43":269,"_13":68,"_39":40,"_41":270,"_29":30,"_165":-5,"_225":271,"_32":272},{"_48":257,"_37":258,"_35":259,"_158":182,"_46":47,"_45":162,"_160":30,"_43":260,"_13":68,"_39":26,"_41":261,"_29":30,"_165":-5,"_225":262,"_32":263},{"_48":249,"_37":250,"_35":251,"_158":182,"_46":47,"_45":252,"_160":64,"_43":253,"_13":162,"_39":26,"_41":254,"_29":30,"_165":-5,"_225":255,"_32":256},{"_48":242,"_37":243,"_35":244,"_158":182,"_46":47,"_45":162,"_160":64,"_43":245,"_13":68,"_39":40,"_41":246,"_29":30,"_165":-5,"_225":247,"_32":248},{"_48":173,"_37":174,"_35":175,"_158":-5,"_46":47,"_45":176,"_160":64,"_43":239,"_13":68,"_39":178,"_41":-5,"_29":30,"_165":-5,"_225":240,"_32":241},{"_48":231,"_37":232,"_35":233,"_158":175,"_46":47,"_45":234,"_160":64,"_43":235,"_13":68,"_39":40,"_41":236,"_29":30,"_165":-5,"_225":237,"_32":238},{"_48":167,"_37":168,"_35":169,"_158":-5,"_46":47,"_45":162,"_160":30,"_43":228,"_13":68,"_39":26,"_41":171,"_29":30,"_165":-5,"_225":229,"_32":230},{"_48":156,"_37":157,"_35":62,"_158":-5,"_46":47,"_45":159,"_160":30,"_43":224,"_13":162,"_39":163,"_41":164,"_29":30,"_165":-5,"_225":226,"_32":227},["D",1779010646930],"children",[],[157],["D",1779010584120],[],[168],"e8eaa762-51d3-11f1-8889-ee650bb23af1","types.ts","e8eaa87a-51d3-11f1-8889-ee650bb23af1",4,["D",1779010601265],"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",[],[174,232],["D",1779010592818],[221],[174],"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();",[],[181,243],"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",[],[181,250],"df051d40-51d3-11f1-8889-ee650bb23af1","favicon.svg","019e354b-4058-72f9-b23c-000f0dfe3a0f",["D",1779010584120],"\n",[],[181,258],"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",[],[181,273,265],"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",[],[181,273,275],"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",[],[181,273,283],"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",[],[181,273,291],"824cf9e6-51d4-11f1-be2d-ee650bb23af1",["D",1779010858612],[],[181,273,38],"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",[],[181,273,303],"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",[],[181,273,311],"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",[],[181,273,319],"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",[],[181,273,327],"df050c92-51d3-11f1-8889-ee650bb23af1","Counter.tsx","019e354b-4058-72f9-b23b-f8b86cf4bd32",["D",1779010584120],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function Counter() {\n  const [count, setCount] = useState(0);\n  return (\n    <div class=\"flex items-center gap-3\">\n      <span class=\"text-lg\">Clicked</span>\n      <button\n        onClick={() => setCount((c) => c + 1)}\n        class=\"bg-blue-500 hover:bg-blue-600 text-white font-medium px-4 py-2 rounded-lg transition-colors cursor-pointer\"\n      >\n        {count}\n      </button>\n      <span class=\"text-lg\">times</span>\n    </div>\n  );\n}\n",[],[181,273,335],"df04fb1c-51d3-11f1-8889-ee650bb23af1","App.tsx","019e354b-4058-72f9-b23b-f4f7aea91f3e",["D",1779010584120],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Counter } from \"./Counter.tsx\";\n\nexport function App() {\n  return (\n    <div class=\"max-w-md mx-auto mt-12\">\n      <h1 class=\"text-3xl font-bold mb-6\">React + Hono Starter</h1>\n      <Counter />\n      <p class=\"mt-8 text-sm text-gray-500\">\n        <a href=\"/source\" class=\"underline hover:text-gray-700\">View source</a>\n      </p>\n    </div>\n  );\n}\n",[],[181,273,342],"df05139a-51d3-11f1-8889-ee650bb23af1",["D",1779010584120],[206,207,208,209,210,211,212,213,214,215,216],[181,273],["D",1779010584120],[205,217,218,219],[181],"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",[],[186,356],"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",[],[186,364],["D",1779010592837],[202,203],[186],["D",1779010584120],["D",1789555877593],{"_109":108,"_116":111},{"_109":108,"_110":111,"_112":111,"_19":60,"_113":114,"_115":30},{"_13":94,"_37":95,"_48":47,"_96":49,"_97":98,"_99":100,"_101":55,"_102":103,"_104":105,"_106":50,"_107":108},"ctx",{"_87":-5,"_137":412,"_413":414,"_415":416,"_417":30,"_418":30,"_419":30,"_420":64,"_421":-5,"_422":-7,"_423":-7,"_424":68,"_425":30,"_426":30,"_427":-5,"_428":30,"_429":30,"_430":30,"_431":-5},"ENV",{"_383":384,"_385":386,"_387":95,"_388":389,"_390":391,"_392":393,"_394":395,"_396":397,"_398":399,"_400":401,"_402":403,"_404":405,"_406":407,"_408":409,"_410":411},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","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 · v17