Sean & Yam · Financial Tracker

\n \n \n \n\n",[],[134,152],"a86a84fe-51d4-11f1-adba-ee650bb23af1","favicon.svg","019e354b-4058-72f9-b23c-000f0dfe3a0f",20,["D",1779010922523],"\n\n",[],[134,160],"df05139a-51d3-11f1-8889-ee650bb23af1","components","019e354b-4058-72f9-b23b-fdf265d1b880",["D",1779010584120],[173,174,175,176,177,178,179,180,181,182],[134,168],{"_36":255,"_13":256,"_64":257,"_66":169,"_68":69,"_70":258,"_72":73,"_38":259,"_17":136,"_75":76,"_77":260,"_79":51,"_80":-5,"_106":261,"_18":262},{"_36":247,"_13":248,"_64":249,"_66":169,"_68":69,"_70":250,"_72":73,"_38":251,"_17":87,"_75":76,"_77":252,"_79":51,"_80":-5,"_106":253,"_18":254},{"_36":239,"_13":240,"_64":241,"_66":169,"_68":69,"_70":242,"_72":73,"_38":243,"_17":87,"_75":76,"_77":244,"_79":51,"_80":-5,"_106":245,"_18":246},{"_36":231,"_13":232,"_64":233,"_66":169,"_68":69,"_70":234,"_72":73,"_38":235,"_17":87,"_75":76,"_77":236,"_79":51,"_80":-5,"_106":237,"_18":238},{"_36":223,"_13":224,"_64":225,"_66":169,"_68":69,"_70":226,"_72":73,"_38":227,"_17":87,"_75":76,"_77":228,"_79":51,"_80":-5,"_106":229,"_18":230},{"_36":215,"_13":216,"_64":217,"_66":169,"_68":69,"_70":218,"_72":73,"_38":219,"_17":87,"_75":76,"_77":220,"_79":51,"_80":-5,"_106":221,"_18":222},{"_36":207,"_13":208,"_64":209,"_66":169,"_68":69,"_70":210,"_72":73,"_38":211,"_17":87,"_75":76,"_77":212,"_79":51,"_80":-5,"_106":213,"_18":214},{"_36":199,"_13":200,"_64":201,"_66":169,"_68":69,"_70":202,"_72":73,"_38":203,"_17":87,"_75":76,"_77":204,"_79":51,"_80":-5,"_106":205,"_18":206},{"_36":191,"_13":192,"_64":193,"_66":169,"_68":69,"_70":194,"_72":73,"_38":195,"_17":87,"_75":76,"_77":196,"_79":51,"_80":-5,"_106":197,"_18":198},{"_36":183,"_13":184,"_64":185,"_66":169,"_68":69,"_70":186,"_72":73,"_38":187,"_17":87,"_75":76,"_77":188,"_79":51,"_80":-5,"_106":189,"_18":190},"1076e2fa-51d4-11f1-8811-ee650bb23af1","hooks.ts","1076e3c2-51d4-11f1-8811-ee650bb23af1",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",[],[134,168,184],"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",[],[134,168,192],"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",[],[134,168,200],"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",[],[134,168,208],"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",[],[134,168,216],"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",[],[134,168,224],"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",[],[134,168,232],"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",[],[134,168,240],"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",[],[134,168,248],"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",[],[134,168,256],["D",1779010592837],[266,267],[19],{"_36":82,"_13":83,"_64":84,"_66":67,"_68":69,"_70":85,"_72":73,"_38":271,"_17":87,"_75":76,"_77":88,"_79":51,"_80":-5,"_106":272,"_18":273},{"_36":62,"_13":63,"_64":65,"_66":67,"_68":69,"_70":71,"_72":73,"_38":268,"_17":34,"_75":76,"_77":78,"_79":51,"_80":-5,"_106":269,"_18":270},["D",1779012777434],[],[19,63],["D",1779010614208],[],[19,83],"deb47d54-51d3-11f1-8889-ee650bb23af1",["D",1779010584120],"legacyEnvVars","httpPrivacy","description","Starter template with client-side React & Hono server","imageUrl","userId","94ef5435-553f-4787-a0fb-c0926a04820d","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","019e34c6-b41c-7572-aff8-b2f2f04c460f","tursoName","deb47d5451d311f18889ee650bb23af1","tursoHostname","deb47d5451d311f18889ee650bb23af1-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789469441210],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_321":316},"org",{"_11":12,"_315":316,"_317":316,"_281":282,"_318":319,"_320":51},"branch",{"_17":102,"_13":16,"_36":69,"_42":274,"_45":37,"_46":311,"_312":53,"_313":43,"_314":57,"_58":14,"_54":12},88,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","","avatar","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":274,"_13":14,"_38":429,"_49":-5,"_276":51,"_52":53,"_277":53,"_278":279,"_280":-5,"_281":282,"_283":101,"_284":73,"_285":-5,"_286":-5,"_287":87,"_56":288,"_289":290,"_291":292,"_293":430,"_295":-5,"_296":297,"_298":297,"_299":300,"_301":300,"_302":300,"_303":297,"_304":297,"_305":431,"_307":432,"_309":433,"_50":51},[363,366,381,383,384],"files",[363,364,365,366,367,368,369,370,371,372,373,374,375,376,377,378,379,380,381,382,383,384],"counts",{"_354":87,"_355":136,"_356":87,"_35":357,"_358":359},[350,351],{"_36":90,"_13":19,"_64":67,"_66":-5,"_68":69,"_70":34,"_72":73,"_38":348,"_17":87,"_75":91,"_77":-5,"_79":51,"_80":-5,"_18":349},"upstreamProject",{"_36":43,"_13":59,"_278":279,"_280":345,"_52":53,"_305":346},"upstreamBranch",{"_36":37,"_38":343,"_40":344,"_13":16,"_42":43,"_17":44,"_45":-5,"_46":-5,"_47":48,"_49":-5,"_50":51,"_52":53,"_54":55,"_56":57,"_58":59},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],["D",1785420707976],"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789556399&sig=39cf692678889e4858e1d3f239cccdbb768d0b4bdeeecb6f122e7581a8e69c0b",{"_11":55,"_321":347},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789556399&sig=d4d039bf60786a03d56ec8a29ec1b19630253aab318e490fcd07a6f24846b070",["D",1779010592837],[19],{"_36":82,"_13":83,"_64":84,"_66":67,"_68":69,"_70":85,"_72":73,"_38":86,"_17":87,"_75":76,"_77":88,"_79":51,"_80":-5,"_18":353},{"_36":62,"_13":63,"_64":65,"_66":67,"_68":69,"_70":71,"_72":73,"_38":74,"_17":34,"_75":76,"_77":78,"_79":51,"_80":-5,"_18":352},[19,63],[19,83],"pulls","branches","forks",{"_360":87,"_362":87},"connections",{"_360":87,"_361":87},"count","unfilledCount","emptyCount",{"_36":90,"_13":19,"_64":67,"_66":-5,"_68":69,"_70":34,"_72":73,"_38":263,"_17":87,"_75":91,"_77":-5,"_79":51,"_80":-5,"_106":427,"_18":428},{"_36":82,"_13":83,"_64":84,"_66":67,"_68":69,"_70":85,"_72":73,"_38":271,"_17":87,"_75":76,"_77":88,"_79":51,"_80":-5,"_106":425,"_18":426},{"_36":62,"_13":63,"_64":65,"_66":67,"_68":69,"_70":71,"_72":73,"_38":268,"_17":34,"_75":76,"_77":78,"_79":51,"_80":-5,"_106":423,"_18":424},{"_36":133,"_13":134,"_64":135,"_66":-5,"_68":69,"_70":136,"_72":73,"_38":137,"_17":87,"_75":91,"_77":-5,"_79":51,"_80":-5,"_106":421,"_18":422},{"_36":167,"_13":168,"_64":169,"_66":135,"_68":69,"_70":136,"_72":73,"_38":170,"_17":87,"_75":91,"_77":-5,"_79":51,"_80":-5,"_106":419,"_18":420},{"_36":255,"_13":256,"_64":257,"_66":169,"_68":69,"_70":258,"_72":73,"_38":259,"_17":136,"_75":76,"_77":260,"_79":51,"_80":-5,"_106":417,"_18":418},{"_36":247,"_13":248,"_64":249,"_66":169,"_68":69,"_70":250,"_72":73,"_38":251,"_17":87,"_75":76,"_77":252,"_79":51,"_80":-5,"_106":415,"_18":416},{"_36":239,"_13":240,"_64":241,"_66":169,"_68":69,"_70":242,"_72":73,"_38":243,"_17":87,"_75":76,"_77":244,"_79":51,"_80":-5,"_106":413,"_18":414},{"_36":231,"_13":232,"_64":233,"_66":169,"_68":69,"_70":234,"_72":73,"_38":235,"_17":87,"_75":76,"_77":236,"_79":51,"_80":-5,"_106":411,"_18":412},{"_36":223,"_13":224,"_64":225,"_66":169,"_68":69,"_70":226,"_72":73,"_38":227,"_17":87,"_75":76,"_77":228,"_79":51,"_80":-5,"_106":409,"_18":410},{"_36":215,"_13":216,"_64":217,"_66":169,"_68":69,"_70":218,"_72":73,"_38":219,"_17":87,"_75":76,"_77":220,"_79":51,"_80":-5,"_106":407,"_18":408},{"_36":207,"_13":208,"_64":209,"_66":169,"_68":69,"_70":210,"_72":73,"_38":211,"_17":87,"_75":76,"_77":212,"_79":51,"_80":-5,"_106":405,"_18":406},{"_36":199,"_13":200,"_64":201,"_66":169,"_68":69,"_70":202,"_72":73,"_38":203,"_17":87,"_75":76,"_77":204,"_79":51,"_80":-5,"_106":403,"_18":404},{"_36":191,"_13":192,"_64":193,"_66":169,"_68":69,"_70":194,"_72":73,"_38":195,"_17":87,"_75":76,"_77":196,"_79":51,"_80":-5,"_106":401,"_18":402},{"_36":183,"_13":184,"_64":185,"_66":169,"_68":69,"_70":186,"_72":73,"_38":187,"_17":87,"_75":76,"_77":188,"_79":51,"_80":-5,"_106":399,"_18":400},{"_36":159,"_13":160,"_64":161,"_66":135,"_68":69,"_70":162,"_72":73,"_38":163,"_17":136,"_75":24,"_77":164,"_79":51,"_80":-5,"_106":397,"_18":398},{"_36":151,"_13":152,"_64":153,"_66":135,"_68":69,"_70":154,"_72":73,"_38":155,"_17":136,"_75":24,"_77":156,"_79":51,"_80":-5,"_106":395,"_18":396},{"_36":144,"_13":145,"_64":146,"_66":135,"_68":69,"_70":136,"_72":73,"_38":147,"_17":87,"_75":76,"_77":148,"_79":51,"_80":-5,"_106":393,"_18":394},{"_36":117,"_13":118,"_64":119,"_66":-5,"_68":69,"_70":120,"_72":73,"_38":121,"_17":87,"_75":91,"_77":-5,"_79":51,"_80":-5,"_106":391,"_18":392},{"_36":125,"_13":126,"_64":127,"_66":119,"_68":69,"_70":128,"_72":73,"_38":129,"_17":87,"_75":76,"_77":130,"_79":51,"_80":-5,"_106":389,"_18":390},{"_36":109,"_13":110,"_64":111,"_66":-5,"_68":69,"_70":112,"_72":73,"_38":113,"_17":34,"_75":24,"_77":114,"_79":51,"_80":-5,"_106":387,"_18":388},{"_36":99,"_13":100,"_64":101,"_66":-5,"_68":69,"_70":102,"_72":73,"_38":103,"_17":34,"_75":104,"_77":105,"_79":51,"_80":-5,"_106":385,"_18":386},[],[100],[],[110],[],[118,126],[382],[118],[],[134,145],[],[134,152],[],[134,160],[],[134,168,184],[],[134,168,192],[],[134,168,200],[],[134,168,208],[],[134,168,216],[],[134,168,224],[],[134,168,232],[],[134,168,240],[],[134,168,248],[],[134,168,256],[368,369,370,371,372,373,374,375,376,377],[134,168],[367,378,379,380],[134],[],[19,63],[],[19,83],[364,365],[19],["D",1779010584120],["D",1789469441210],{"_11":12,"_321":316},{"_11":12,"_315":316,"_317":316,"_281":282,"_318":319,"_320":51},{"_17":102,"_13":16,"_36":69,"_42":274,"_45":37,"_46":311,"_312":53,"_313":43,"_314":57,"_58":14,"_54":12},"ctx",{"_305":-5,"_340":467,"_468":469,"_470":471,"_472":51,"_473":51,"_474":51,"_475":73,"_476":-5,"_477":-7,"_478":-7,"_479":87,"_480":51,"_481":51,"_482":-5,"_483":51,"_484":51,"_485":51,"_486":-5},"ENV",{"_438":439,"_440":441,"_442":16,"_443":444,"_445":446,"_447":448,"_449":450,"_451":452,"_453":454,"_455":456,"_457":458,"_459":460,"_461":462,"_463":464,"_465":466},"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>