ADV160 Maintenance

\n \n \n \n\n",[],[246,256],"25734b9c-3227-485d-93ea-4ff3cc7cc50c","icon.svg","16eae79c-7f0d-11f1-ae2e-1607ee4eb77e",156,["D",1784601371388],5,"\n",[],[246,265],"157a7bf9-a860-48da-b484-25ea0d1e612f","app.tsx","18adaf38-7f0d-11f1-b187-1607ee4eb77e",14,["D",1783982964999],"/** @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) throw new Error(\"No #root element\");\ncreateRoot(root).render();\n\n// Register the service worker for installability + offline shell.\nif (\"serviceWorker\" in navigator) {\n window.addEventListener(\"load\", () => {\n navigator.serviceWorker.register(\"/sw.js\").catch((e) => console.warn(\"SW failed\", e));\n });\n}\n",[],[246,274],"03633853-c996-4d34-9d3b-67e5f884dabc","image.ts","2aee5742-7f0d-11f1-b1fc-1607ee4eb77e","2ac53dcb-575d-4f9f-b0d8-7b720b7a17cc",17,["D",1783982995614],"// Downscale a picked image to keep uploads small (blob storage is limited).\n// Returns a JPEG data URL no larger than `max` px on its longest side.\nexport async function fileToDataUrl(file: File, max = 1024, quality = 0.72): Promise {\n const original = await readAsDataUrl(file);\n try {\n const img = await loadImage(original);\n const scale = Math.min(1, max / Math.max(img.width, img.height));\n const w = Math.max(1, Math.round(img.width * scale));\n const h = Math.max(1, Math.round(img.height * scale));\n const canvas = document.createElement(\"canvas\");\n canvas.width = w;\n canvas.height = h;\n const ctx = canvas.getContext(\"2d\");\n if (!ctx) return original;\n ctx.drawImage(img, 0, 0, w, h);\n return canvas.toDataURL(\"image/jpeg\", quality);\n } catch (_) {\n return original;\n }\n}\n\nfunction readAsDataUrl(file: File): Promise {\n return new Promise((resolve, reject) => {\n const fr = new FileReader();\n fr.onload = () => resolve(fr.result as string);\n fr.onerror = reject;\n fr.readAsDataURL(file);\n });\n}\n\nfunction loadImage(src: string): Promise {\n return new Promise((resolve, reject) => {\n const img = new Image();\n img.onload = () => resolve(img);\n img.onerror = reject;\n img.src = src;\n });\n}\n",[],[246,290,282],"lib","0ae5cdf8-e47f-4e09-bffe-08ec848ada83","format.ts","27eb33b2-7f0d-11f1-a142-1607ee4eb77e",16,["D",1783982990612],"export function money(currency: string, v: number | null | undefined): string {\n if (v == null) return \"—\";\n try {\n return new Intl.NumberFormat(undefined, { style: \"currency\", currency, maximumFractionDigits: 2 })\n .format(v);\n } catch (_) {\n return `${currency} ${v.toFixed(2)}`;\n }\n}\n\nexport function km(v: number | null | undefined): string {\n if (v == null) return \"—\";\n return `${Math.round(v).toLocaleString()} km`;\n}\n\nexport function fdate(s: string | null | undefined): string {\n if (!s) return \"—\";\n const d = new Date(`${String(s).slice(0, 10)}T00:00:00`);\n if (isNaN(d.getTime())) return String(s);\n return d.toLocaleDateString(undefined, { year: \"numeric\", month: \"short\", day: \"numeric\" });\n}\n\nexport function monthLabel(ym: string): string {\n const d = new Date(`${ym}-01T00:00:00`);\n if (isNaN(d.getTime())) return ym;\n return d.toLocaleDateString(undefined, { year: \"numeric\", month: \"short\" });\n}\n\nexport function num(v: number | null | undefined, digits = 1): string {\n if (v == null) return \"—\";\n return v.toLocaleString(undefined, { maximumFractionDigits: digits });\n}\n\nexport function todayISO(): string {\n return new Date().toISOString().slice(0, 10);\n}\n",[],[246,290,292],"0b09da68-d810-4cf0-b2f1-74aa52039566","export.ts","11681d70-7f54-11f1-9faa-1607ee4eb77e",94,["D",1784013447105],"// Client-side file download helpers for exporting data.\n\ntype Cell = string | number | null | undefined;\n\nfunction escapeCsv(v: Cell): string {\n const s = v == null ? \"\" : String(v);\n return /[\",\\n]/.test(s) ? `\"${s.replace(/\"/g, '\"\"')}\"` : s;\n}\n\nexport function downloadCSV(filename: string, headers: string[], rows: Cell[][]): void {\n const lines = [headers, ...rows].map((r) => r.map(escapeCsv).join(\",\"));\n downloadBlob(filename, \"\" + lines.join(\"\\r\\n\"), \"text/csv;charset=utf-8\");\n}\n\nexport function downloadBlob(filename: string, content: string, type: string): void {\n const blob = new Blob([content], { type });\n const url = URL.createObjectURL(blob);\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = filename;\n document.body.appendChild(a);\n a.click();\n a.remove();\n setTimeout(() => URL.revokeObjectURL(url), 1000);\n}\n",[],[246,290,300],"bb89fc65-b5b0-4542-8490-ae49e0703cf7","api.ts","249219b0-7f0d-11f1-b130-1607ee4eb77e",89,["D",1783986556808],"import type {\n DocInfo,\n DueInfo,\n FuelLog,\n ServiceRecord,\n ServiceType,\n Settings,\n Vehicle,\n} from \"../../shared/types.ts\";\n\nexport interface FuelSegment {\n from_km: number;\n to_km: number;\n distance: number;\n liters: number;\n km_per_l: number;\n date: string;\n}\nexport interface FuelEconomy {\n segments: FuelSegment[];\n average_km_per_l: number | null;\n}\nexport interface Costs {\n service_total: number;\n fuel_total: number;\n total: number;\n by_month: Record;\n by_category: Record;\n}\nexport interface AppState {\n vehicle: Vehicle;\n settings: Settings;\n service_types: ServiceType[];\n records: ServiceRecord[];\n fuel: FuelLog[];\n due: DueInfo[];\n km_per_day: number | null;\n fuel_economy: FuelEconomy;\n costs: Costs;\n documents: DocInfo[];\n categories: string[];\n doc_types: string[];\n}\n\nexport class AuthError extends Error {\n constructor(public status: number) {\n super(\"auth\");\n }\n}\n\nasync function fetchJSON(path: string, method = \"GET\", body?: unknown): Promise {\n const res = await fetch(path, {\n method,\n headers: body ? { \"Content-Type\": \"application/json\" } : undefined,\n body: body ? JSON.stringify(body) : undefined,\n });\n if (res.status === 401 || res.status === 403) throw new AuthError(res.status);\n if (!res.ok) throw new Error(`${method} ${path} -> ${res.status}`);\n return res.json() as Promise;\n}\n\nexport const api = {\n bootstrap: () => fetchJSON(\"/api/bootstrap\"),\n updateVehicle: (v: Record) => fetchJSON(\"/api/vehicle\", \"PUT\", v),\n addOdometer: (km: number, recorded_at?: string) =>\n fetchJSON(\"/api/odometer\", \"POST\", { km, recorded_at }),\n addServiceType: (t: Record) => fetchJSON(\"/api/service-types\", \"POST\", t),\n updateServiceType: (id: number, t: Record) =>\n fetchJSON(`/api/service-types/${id}`, \"PUT\", t),\n deleteServiceType: (id: number) => fetchJSON(`/api/service-types/${id}`, \"DELETE\"),\n snooze: (id: number) => fetchJSON(`/api/service-types/${id}/snooze`, \"POST\", {}),\n addRecord: (r: Record) => fetchJSON(\"/api/records\", \"POST\", r),\n updateRecord: (id: number, r: Record) =>\n fetchJSON(`/api/records/${id}`, \"PUT\", r),\n deleteRecord: (id: number) => fetchJSON(`/api/records/${id}`, \"DELETE\"),\n addFuel: (f: Record) => fetchJSON(\"/api/fuel\", \"POST\", f),\n updateFuel: (id: number, f: Record) =>\n fetchJSON(`/api/fuel/${id}`, \"PUT\", f),\n deleteFuel: (id: number) => fetchJSON(`/api/fuel/${id}`, \"DELETE\"),\n updateSettings: (s: Record) => fetchJSON(\"/api/settings\", \"PUT\", s),\n addDocument: (d: Record) => fetchJSON(\"/api/documents\", \"POST\", d),\n updateDocument: (id: number, d: Record) =>\n fetchJSON(`/api/documents/${id}`, \"PUT\", d),\n deleteDocument: (id: number) => fetchJSON(`/api/documents/${id}`, \"DELETE\"),\n sendReminder: () =>\n fetchJSON<{ sent: boolean; reason: string; included: string[] }>(\"/api/send-reminder\", \"POST\", {}),\n};\n\nexport function photoUrl(key: string): string {\n return `/api/photos/${encodeURIComponent(key)}`;\n}\n",[],[246,290,308],"771dffc2-0eeb-4e2b-97e1-e1b1fe9a9852",15,["D",1783982984924],[190,191,192,193],[246,290],"71e9fff7-a6ce-4286-84ed-e2c8986f9469","ui.tsx","405db8b6-7f0d-11f1-a0da-1607ee4eb77e","771e6092-b2b2-48a3-9a7c-58834e7466e2",130,["D",1784041869609],13,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport type { ReactNode } from \"https://esm.sh/react@18.2.0\";\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { DueStatus } from \"../../shared/types.ts\";\n\nexport const RED = \"#E4002B\";\n\nconst ICON_PATHS: Record = {\n home: (\n <>\n \n \n \n ),\n fuel: (\n <>\n \n \n \n \n \n ),\n costs: (\n <>\n \n \n \n \n ),\n history: (\n <>\n \n \n \n \n ),\n gear: (\n <>\n \n \n \n ),\n gauge: (\n <>\n \n \n \n ),\n plus: (\n <>\n \n \n \n ),\n wrench: (\n \n ),\n doc: (\n <>\n \n \n \n \n \n ),\n close: (\n <>\n \n \n \n ),\n camera: (\n <>\n \n \n \n ),\n chevron: ,\n check: ,\n};\n\nexport function Icon(\n { name, size = 22, strokeWidth = 1.8, className = \"\" }: {\n name: string;\n size?: number;\n strokeWidth?: number;\n className?: string;\n },\n) {\n return (\n \n {ICON_PATHS[name] ?? null}\n \n );\n}\n\nexport function Card({ children, className = \"\" }: { children: ReactNode; className?: string }) {\n return (\n

\n {children}\n

\n );\n}\n\nexport function Button(\n { children, onClick, variant = \"primary\", type = \"button\", disabled, className = \"\", full }: {\n children: ReactNode;\n onClick?: () => void;\n variant?: \"primary\" | \"secondary\" | \"ghost\" | \"danger\";\n type?: \"button\" | \"submit\";\n disabled?: boolean;\n className?: string;\n full?: boolean;\n },\n) {\n const base = \"inline-flex items-center justify-center gap-2 rounded-xl font-semibold text-sm px-4 py-2.5 transition active:scale-[.98] disabled:opacity-50 disabled:pointer-events-none\";\n const styles = {\n primary: \"text-white shadow-sm\",\n secondary: \"bg-white border border-neutral-300 text-neutral-800 hover:bg-neutral-50\",\n ghost: \"text-neutral-600 hover:bg-neutral-100\",\n danger: \"bg-red-50 text-red-700 hover:bg-red-100\",\n }[variant];\n return (\n \n {children}\n \n );\n}\n\nexport function Field({ label, children, hint }: { label: string; children: ReactNode; hint?: string }) {\n return (\n \n {label}\n {children}\n {hint ? {hint} : null}\n \n );\n}\n\nconst inputCls =\n \"w-full rounded-xl border border-neutral-300 px-3 py-2.5 text-[15px] bg-white focus:outline-none focus:ring-2 focus:ring-red-200 focus:border-red-400\";\n\nexport function Input(props: Record) {\n return ;\n}\nexport function Textarea(props: Record) {\n return

;\n}\nexport function Select({ children, ...props }: { children: ReactNode } & Record<string, unknown>) {\n  return (\n    <select {...props} className={`${inputCls} ${(props.className as string) ?? \"\"}`}>\n      {children}\n    </select>\n  );\n}\n\n// Clean photo-upload control (hidden native input behind a styled label).\nexport function FileButton(\n  { onChange, label = \"Add photos\" }: {\n    onChange: (e: { target: { files: FileList | null } }) => void;\n    label?: string;\n  },\n) {\n  return (\n    <label className=\"inline-flex items-center gap-2 cursor-pointer rounded-xl border border-dashed border-neutral-300 bg-neutral-50 hover:bg-neutral-100 hover:border-neutral-400 text-neutral-600 font-semibold text-sm px-4 py-2.5 transition select-none\">\n      <Icon name=\"camera\" size={18} />\n      {label}\n      <input type=\"file\" accept=\"image/*\" multiple onChange={onChange as never} className=\"hidden\" />\n    </label>\n  );\n}\n\n// Custom dropdown — avoids the bulky native mobile picker; matches the input styling.\nexport function Dropdown(\n  { value, onChange, options, placeholder = \"Select…\" }: {\n    value: string;\n    onChange: (v: string) => void;\n    options: { value: string; label: string }[];\n    placeholder?: string;\n  },\n) {\n  const [open, setOpen] = useState(false);\n  const ref = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    if (!open) return;\n    const onDoc = (e: Event) => {\n      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);\n    };\n    document.addEventListener(\"pointerdown\", onDoc);\n    return () => document.removeEventListener(\"pointerdown\", onDoc);\n  }, [open]);\n  const selected = options.find((o) => o.value === value);\n  return (\n    <div className=\"relative\" ref={ref}>\n      <button\n        type=\"button\"\n        onClick={() => setOpen((o) => !o)}\n        className={`${inputCls} flex items-center justify-between text-left`}\n      >\n        <span className={`truncate ${selected ? \"text-neutral-800\" : \"text-neutral-400\"}`}>\n          {selected ? selected.label : placeholder}\n        </span>\n        <Icon name=\"chevron\" size={18} className={`shrink-0 ml-2 text-neutral-400 transition ${open ? \"rotate-180\" : \"\"}`} />\n      </button>\n      {open && (\n        <div className=\"absolute z-30 mt-1 w-full max-h-56 overflow-auto rounded-xl border border-neutral-200 bg-white shadow-xl py-1\">\n          {options.map((o) => (\n            <button\n              key={o.value}\n              type=\"button\"\n              onClick={() => {\n                onChange(o.value);\n                setOpen(false);\n              }}\n              className={`w-full text-left px-3.5 py-2.5 text-[15px] flex items-center justify-between hover:bg-neutral-50 ${\n                o.value === value ? \"font-semibold text-neutral-900\" : \"text-neutral-700\"\n              }`}\n            >\n              <span className=\"truncate\">{o.label}</span>\n              {o.value === value && <Icon name=\"check\" size={16} className=\"shrink-0 ml-2 text-[#E4002B]\" />}\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\n// Clean on/off toggle switch.\nexport function Toggle(\n  { checked, onChange, label, hint }: {\n    checked: boolean;\n    onChange: (v: boolean) => void;\n    label: string;\n    hint?: string;\n  },\n) {\n  return (\n    <button\n      type=\"button\"\n      onClick={() => onChange(!checked)}\n      className=\"w-full flex items-center justify-between gap-3 rounded-xl border border-neutral-300 px-3.5 py-3 text-left hover:bg-neutral-50 transition\"\n    >\n      <div>\n        <div className=\"text-[15px] font-medium text-neutral-800\">{label}</div>\n        {hint ? <div className=\"text-xs text-neutral-400 mt-0.5\">{hint}</div> : null}\n      </div>\n      <span\n        className={`shrink-0 w-11 h-6 rounded-full relative transition ${checked ? \"\" : \"bg-neutral-300\"}`}\n        style={checked ? { backgroundColor: RED } : undefined}\n      >\n        <span className={`absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white shadow transition ${checked ? \"translate-x-5\" : \"\"}`} />\n      </span>\n    </button>\n  );\n}\n\nexport function StatusPill({ status }: { status: DueStatus }) {\n  const map: Record<DueStatus, { label: string; cls: string }> = {\n    overdue: { label: \"Overdue\", cls: \"bg-red-100 text-red-700\" },\n    due_soon: { label: \"Due soon\", cls: \"bg-amber-100 text-amber-800\" },\n    ok: { label: \"OK\", cls: \"bg-emerald-100 text-emerald-700\" },\n    unknown: { label: \"No interval\", cls: \"bg-neutral-100 text-neutral-500\" },\n  };\n  const { label, cls } = map[status];\n  return <span className={`text-xs font-semibold px-2 py-0.5 rounded-full ${cls}`}>{label}</span>;\n}\n\nexport function Stat({ label, value, sub }: { label: string; value: ReactNode; sub?: ReactNode }) {\n  return (\n    <div className=\"flex-1 min-w-0\">\n      <div className=\"text-xs text-neutral-500 font-medium truncate\">{label}</div>\n      <div className=\"text-xl font-bold text-neutral-900 leading-tight\">{value}</div>\n      {sub ? <div className=\"text-xs text-neutral-400 truncate\">{sub}</div> : null}\n    </div>\n  );\n}\n\nexport function EmptyState({ icon, title, sub }: { icon: string; title: string; sub?: string }) {\n  return (\n    <div className=\"text-center py-10 px-4\">\n      <div className=\"mx-auto mb-3 w-14 h-14 rounded-full bg-neutral-100 text-neutral-400 flex items-center justify-center\">\n        <Icon name={icon} size={26} />\n      </div>\n      <div className=\"font-semibold text-neutral-700\">{title}</div>\n      {sub ? <div className=\"text-sm text-neutral-400 mt-1\">{sub}</div> : null}\n    </div>\n  );\n}\n\nexport function Modal(\n  { title, onClose, children }: { title: string; onClose: () => void; children: ReactNode },\n) {\n  useEffect(() => {\n    const onKey = (e: KeyboardEvent) => e.key === \"Escape\" && onClose();\n    document.addEventListener(\"keydown\", onKey);\n    document.body.style.overflow = \"hidden\";\n    return () => {\n      document.removeEventListener(\"keydown\", onKey);\n      document.body.style.overflow = \"\";\n    };\n  }, [onClose]);\n  return (\n    <div\n      className=\"modal-overlay fixed inset-0 z-50 bg-black/50 backdrop-blur-[2px] flex items-end sm:items-center justify-center sm:p-4\"\n      onClick={onClose}\n    >\n      <div\n        className=\"modal-panel bg-white w-full sm:max-w-md rounded-t-2xl sm:rounded-2xl max-h-[92vh] overflow-auto shadow-2xl\"\n        onClick={(e) => e.stopPropagation()}\n      >\n        <div className=\"sm:hidden pt-2.5 pb-1 flex justify-center\">\n          <div className=\"w-10 h-1 rounded-full bg-neutral-300\" />\n        </div>\n        <div className=\"sticky top-0 z-10 bg-white/90 backdrop-blur px-5 py-3.5 flex items-center justify-between border-b border-neutral-100\">\n          <h2 className=\"font-bold text-[17px] tracking-tight text-neutral-900\">{title}</h2>\n          <button\n            onClick={onClose}\n            aria-label=\"Close\"\n            className=\"shrink-0 -mr-1 w-8 h-8 rounded-full flex items-center justify-center text-neutral-400 hover:text-neutral-700 hover:bg-neutral-100 transition\"\n          >\n            <Icon name=\"close\" size={18} strokeWidth={2} />\n          </button>\n        </div>\n        <div className=\"px-5 py-4\">{children}</div>\n      </div>\n    </div>\n  );\n}\n\n// Compact confirmation dialog (for deletes) — much smaller than the form modals.\nexport function ConfirmDialog(\n  { open, title, message, confirmLabel = \"Delete\", onConfirm, onCancel }: {\n    open: boolean;\n    title: string;\n    message?: string;\n    confirmLabel?: string;\n    onConfirm: () => void;\n    onCancel: () => void;\n  },\n) {\n  useEffect(() => {\n    if (!open) return;\n    const onKey = (e: KeyboardEvent) => e.key === \"Escape\" && onCancel();\n    document.addEventListener(\"keydown\", onKey);\n    return () => document.removeEventListener(\"keydown\", onKey);\n  }, [open, onCancel]);\n  if (!open) return null;\n  return (\n    <div\n      className=\"modal-overlay fixed inset-0 z-[60] bg-black/50 backdrop-blur-[2px] flex items-center justify-center p-6\"\n      onClick={onCancel}\n    >\n      <div\n        className=\"modal-panel bg-white rounded-2xl shadow-2xl w-full max-w-[300px] p-5 text-center\"\n        onClick={(e) => e.stopPropagation()}\n      >\n        <h3 className=\"font-bold text-neutral-900\">{title}</h3>\n        {message ? <p className=\"text-sm text-neutral-500 mt-1.5\">{message}</p> : null}\n        <div className=\"flex gap-2 mt-5\">\n          <Button variant=\"secondary\" full onClick={onCancel}>Cancel</Button>\n          <Button variant=\"primary\" full onClick={onConfirm}>{confirmLabel}</Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n\n// Hook that provides a compact confirm() and the dialog element to render.\nexport function useConfirm() {\n  const [pending, setPending] = useState<\n    { title: string; message?: string; confirmLabel?: string; action: () => void } | null\n  >(null);\n  const confirm = (\n    title: string,\n    action: () => void,\n    opts?: { message?: string; confirmLabel?: string },\n  ) => setPending({ title, action, message: opts?.message, confirmLabel: opts?.confirmLabel });\n  const dialog = (\n    <ConfirmDialog\n      open={!!pending}\n      title={pending?.title ?? \"\"}\n      message={pending?.message}\n      confirmLabel={pending?.confirmLabel}\n      onCancel={() => setPending(null)}\n      onConfirm={() => {\n        pending?.action();\n        setPending(null);\n      }}\n    />\n  );\n  return { confirm, dialog };\n}\n",[],[246,330,321],"components","78e8dedd-146b-439f-9a65-03e53f733a33","Settings.tsx","db019784-7f0d-11f1-85ea-1607ee4eb77e",146,["D",1784042046463],7,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { api } from \"../lib/api.ts\";\nimport type { AppState } from \"../lib/api.ts\";\nimport type { ServiceType } from \"../../shared/types.ts\";\nimport { todayISO } from \"../lib/format.ts\";\nimport { downloadCSV } from \"../lib/export.ts\";\nimport { Button, Field, Input, Modal, Select, useConfirm } from \"./ui.tsx\";\nimport type { Mutate } from \"./App.tsx\";\n\nfunction Section({ title, children }: { title: string; children: unknown }) {\n  return (\n    <div className=\"mb-6\">\n      <h3 className=\"font-bold text-neutral-700 mb-2\">{title}</h3>\n      {children as never}\n    </div>\n  );\n}\n\nexport function SettingsView(\n  { state, mutate, onClose }: { state: AppState; mutate: Mutate; onClose: () => void },\n) {\n  return (\n    <Modal title=\"Settings\" onClose={onClose}>\n      <Section title=\"Motorcycle\">\n        <VehicleForm state={state} mutate={mutate} />\n      </Section>\n\n      <Section title=\"Reminders\">\n        <ReminderForm state={state} mutate={mutate} />\n      </Section>\n\n      <Section title=\"Service schedule\">\n        <p className=\"text-xs text-neutral-400 mb-2\">\n          Intervals seeded from the Honda ADV160 manual. Some are estimates — edit to match your\n          owner's manual. Turn a service off to stop tracking it.\n        </p>\n        <div className=\"space-y-2\">\n          {state.service_types.map((t) => (\n            <ServiceRow key={t.id} type={t} categories={state.categories} mutate={mutate} />\n          ))}\n        </div>\n        <AddService state={state} mutate={mutate} />\n      </Section>\n\n      <Section title=\"Data & backup\">\n        <DataBackup state={state} />\n      </Section>\n\n      <form method=\"POST\" action=\"/auth/logout\" className=\"pt-2 border-t border-neutral-100\">\n        <button type=\"submit\" className=\"text-sm text-neutral-500 hover:text-red-600 py-2\">\n          Log out\n        </button>\n      </form>\n    </Modal>\n  );\n}\n\nfunction VehicleForm({ state, mutate }: { state: AppState; mutate: Mutate }) {\n  const v = state.vehicle;\n  const [name, setName] = useState(v.name);\n  const [year, setYear] = useState(v.year != null ? String(v.year) : \"\");\n  const [plate, setPlate] = useState(v.plate);\n  const [color, setColor] = useState(v.color);\n  const [baseDate, setBaseDate] = useState(v.baseline_date);\n  const [baseKm, setBaseKm] = useState(String(v.baseline_odometer_km));\n  const [busy, setBusy] = useState(false);\n\n  async function save() {\n    setBusy(true);\n    await mutate(api.updateVehicle({\n      name, make: v.make, model: v.model,\n      year: year === \"\" ? null : Number(year),\n      plate, color,\n      baseline_date: baseDate,\n      baseline_odometer_km: baseKm === \"\" ? 0 : Number(baseKm),\n    }));\n    setBusy(false);\n  }\n\n  return (\n    <div>\n      <Field label=\"Name\"><Input value={name} onChange={(e: { target: { value: string } }) => setName(e.target.value)} /></Field>\n      <div className=\"grid grid-cols-2 gap-3\">\n        <Field label=\"Year\"><Input inputMode=\"numeric\" value={year} onChange={(e: { target: { value: string } }) => setYear(e.target.value)} /></Field>\n        <Field label=\"Color\"><Input value={color} onChange={(e: { target: { value: string } }) => setColor(e.target.value)} /></Field>\n      </div>\n      <Field label=\"Plate number\"><Input value={plate} onChange={(e: { target: { value: string } }) => setPlate(e.target.value)} /></Field>\n      <div className=\"grid grid-cols-2 gap-3\">\n        <Field label=\"Start date\" hint=\"When tracking began\"><Input type=\"date\" value={baseDate} onChange={(e: { target: { value: string } }) => setBaseDate(e.target.value)} /></Field>\n        <Field label=\"Start odometer\" hint=\"km at start date\"><Input inputMode=\"numeric\" value={baseKm} onChange={(e: { target: { value: string } }) => setBaseKm(e.target.value)} /></Field>\n      </div>\n      <Button onClick={save} disabled={busy}>{busy ? \"Saving…\" : \"Save motorcycle\"}</Button>\n    </div>\n  );\n}\n\nfunction ReminderForm({ state, mutate }: { state: AppState; mutate: Mutate }) {\n  const s = state.settings;\n  const [leadDays, setLeadDays] = useState(String(s.reminder_lead_days));\n  const [leadKm, setLeadKm] = useState(String(s.reminder_lead_km));\n  const [currency, setCurrency] = useState(s.currency);\n  const [busy, setBusy] = useState(false);\n  const [testing, setTesting] = useState(false);\n\n  async function save() {\n    setBusy(true);\n    await mutate(api.updateSettings({\n      reminder_lead_days: Number(leadDays) || 7,\n      reminder_lead_km: Number(leadKm) || 200,\n      currency: currency || \"PHP\",\n      timezone: s.timezone,\n      email: s.email,\n    }));\n    setBusy(false);\n  }\n\n  async function test() {\n    setTesting(true);\n    try {\n      const r = await api.sendReminder();\n      alert(r.sent ? `Sent! Included: ${r.included.join(\", \")}` : `No email sent: ${r.reason}`);\n    } catch (_) {\n      alert(\"Could not send the test reminder.\");\n    }\n    setTesting(false);\n  }\n\n  return (\n    <div>\n      <div className=\"grid grid-cols-2 gap-3\">\n        <Field label=\"Warn me within (days)\"><Input inputMode=\"numeric\" value={leadDays} onChange={(e: { target: { value: string } }) => setLeadDays(e.target.value)} /></Field>\n        <Field label=\"Warn me within (km)\"><Input inputMode=\"numeric\" value={leadKm} onChange={(e: { target: { value: string } }) => setLeadKm(e.target.value)} /></Field>\n      </div>\n      <Field label=\"Currency\" hint=\"e.g. PHP, USD\"><Input value={currency} onChange={(e: { target: { value: string } }) => setCurrency(e.target.value)} /></Field>\n      <p className=\"text-xs text-neutral-400 mb-3\">\n        A daily check emails you a digest of anything overdue or due soon (max once per 7 days per\n        item). Emails go to your Val Town account address.\n      </p>\n      <div className=\"flex gap-2\">\n        <Button onClick={save} disabled={busy}>{busy ? \"Saving…\" : \"Save reminders\"}</Button>\n        <Button variant=\"secondary\" onClick={test} disabled={testing}>{testing ? \"Sending…\" : \"Send test email\"}</Button>\n      </div>\n    </div>\n  );\n}\n\nfunction DataBackup({ state }: { state: AppState }) {\n  const catById = new Map(state.service_types.map((t) => [t.id, t.category]));\n\n  function exportServices() {\n    const rows = state.records.map((r) => [\n      r.performed_at,\n      r.name,\n      r.service_type_id != null ? (catById.get(r.service_type_id) ?? \"\") : \"\",\n      r.odometer_km ?? \"\",\n      r.cost ?? \"\",\n      r.notes,\n    ]);\n    downloadCSV(\n      `adv160-services-${todayISO()}.csv`,\n      [\"Date\", \"Service\", \"Category\", \"Odometer (km)\", \"Cost\", \"Notes\"],\n      rows,\n    );\n  }\n\n  function exportFuel() {\n    const rows = state.fuel.map((f) => [\n      f.filled_at,\n      f.odometer_km,\n      f.liters,\n      f.price_per_liter ?? \"\",\n      f.total_cost ?? \"\",\n      f.is_full_tank === 1 ? \"yes\" : \"no\",\n      f.notes,\n    ]);\n    downloadCSV(\n      `adv160-fuel-${todayISO()}.csv`,\n      [\"Date\", \"Odometer (km)\", \"Liters\", \"Price/L\", \"Total cost\", \"Full tank\", \"Notes\"],\n      rows,\n    );\n  }\n\n  return (\n    <div>\n      <p className=\"text-xs text-neutral-400 mb-3\">\n        Download your data anytime. The JSON backup contains everything; the CSVs open in Excel or\n        Google Sheets.\n      </p>\n      <a\n        href=\"/api/export\"\n        download={`adv160-backup-${todayISO()}.json`}\n        className=\"inline-flex w-full items-center justify-center rounded-xl font-semibold text-sm px-4 py-2.5 bg-white border border-neutral-300 text-neutral-800 hover:bg-neutral-50 mb-2\"\n      >\n        Download full backup (JSON)\n      </a>\n      <div className=\"grid grid-cols-2 gap-2\">\n        <Button variant=\"secondary\" onClick={exportServices} disabled={state.records.length === 0}>\n          Service log (CSV)\n        </Button>\n        <Button variant=\"secondary\" onClick={exportFuel} disabled={state.fuel.length === 0}>\n          Fuel log (CSV)\n        </Button>\n      </div>\n    </div>\n  );\n}\n\nfunction ServiceRow(\n  { type, categories, mutate }: { type: ServiceType; categories: string[]; mutate: Mutate },\n) {\n  const [open, setOpen] = useState(false);\n  const [name, setName] = useState(type.name);\n  const [category, setCategory] = useState(type.category);\n  const [ik, setIk] = useState(type.interval_km != null ? String(type.interval_km) : \"\");\n  const [im, setIm] = useState(type.interval_months != null ? String(type.interval_months) : \"\");\n  const [fk, setFk] = useState(type.first_km != null ? String(type.first_km) : \"\");\n  const [fm, setFm] = useState(type.first_months != null ? String(type.first_months) : \"\");\n  const [busy, setBusy] = useState(false);\n  const { confirm, dialog } = useConfirm();\n\n  const numOrNull = (x: string) => (x === \"\" ? null : Number(x));\n\n  async function toggle(enabled: boolean) {\n    await mutate(api.updateServiceType(type.id, {\n      name, category,\n      interval_km: numOrNull(ik), interval_months: numOrNull(im),\n      first_km: numOrNull(fk), first_months: numOrNull(fm),\n      enabled, note: type.note,\n    }));\n  }\n\n  async function save() {\n    setBusy(true);\n    await mutate(api.updateServiceType(type.id, {\n      name, category,\n      interval_km: numOrNull(ik), interval_months: numOrNull(im),\n      first_km: numOrNull(fk), first_months: numOrNull(fm),\n      enabled: type.enabled === 1, note: type.note,\n    }));\n    setBusy(false);\n    setOpen(false);\n  }\n\n  return (\n    <div className=\"border border-neutral-200 rounded-xl p-3\">\n      <div className=\"flex items-center justify-between gap-2\">\n        <label className=\"flex items-center gap-2 min-w-0\">\n          <input\n            type=\"checkbox\"\n            checked={type.enabled === 1}\n            onChange={(e: { target: { checked: boolean } }) => toggle(e.target.checked)}\n          />\n          <span className={`text-sm font-medium truncate ${type.enabled === 1 ? \"\" : \"text-neutral-400 line-through\"}`}>\n            {type.name}\n          </span>\n        </label>\n        <button onClick={() => setOpen((o) => !o)} className=\"text-xs text-neutral-500 shrink-0\">\n          {open ? \"Close\" : \"Edit\"}\n        </button>\n      </div>\n      <div className=\"text-xs text-neutral-400 mt-1\">\n        {type.interval_km != null ? `${type.interval_km.toLocaleString()} km` : \"\"}\n        {type.interval_km != null && type.interval_months != null ? \" · \" : \"\"}\n        {type.interval_months != null ? `${type.interval_months} mo` : \"\"}\n        {type.interval_km == null && type.interval_months == null ? \"no interval\" : \"\"}\n      </div>\n\n      {open && (\n        <div className=\"mt-3 pt-3 border-t border-neutral-100\">\n          <Field label=\"Name\"><Input value={name} onChange={(e: { target: { value: string } }) => setName(e.target.value)} /></Field>\n          <Field label=\"Category\">\n            <Select value={category} onChange={(e: { target: { value: string } }) => setCategory(e.target.value)}>\n              {categories.map((c) => <option key={c} value={c}>{c}</option>)}\n            </Select>\n          </Field>\n          <div className=\"grid grid-cols-2 gap-3\">\n            <Field label=\"Every (km)\"><Input inputMode=\"numeric\" value={ik} onChange={(e: { target: { value: string } }) => setIk(e.target.value)} /></Field>\n            <Field label=\"Every (months)\"><Input inputMode=\"numeric\" value={im} onChange={(e: { target: { value: string } }) => setIm(e.target.value)} /></Field>\n          </div>\n          <div className=\"grid grid-cols-2 gap-3\">\n            <Field label=\"First at (km)\" hint=\"Break-in, optional\"><Input inputMode=\"numeric\" value={fk} onChange={(e: { target: { value: string } }) => setFk(e.target.value)} /></Field>\n            <Field label=\"First at (months)\" hint=\"Optional\"><Input inputMode=\"numeric\" value={fm} onChange={(e: { target: { value: string } }) => setFm(e.target.value)} /></Field>\n          </div>\n          <div className=\"flex gap-2\">\n            <Button onClick={save} disabled={busy}>{busy ? \"Saving…\" : \"Save\"}</Button>\n            <Button variant=\"danger\" onClick={() => confirm(`Delete \"${type.name}\"?`, () => mutate(api.deleteServiceType(type.id)))}>Delete</Button>\n          </div>\n        </div>\n      )}\n      {dialog}\n    </div>\n  );\n}\n\nfunction AddService({ state, mutate }: { state: AppState; mutate: Mutate }) {\n  const [open, setOpen] = useState(false);\n  const [name, setName] = useState(\"\");\n  const [category, setCategory] = useState(state.categories[0] ?? \"Other\");\n  const [ik, setIk] = useState(\"\");\n  const [im, setIm] = useState(\"\");\n  const [busy, setBusy] = useState(false);\n  const numOrNull = (x: string) => (x === \"\" ? null : Number(x));\n\n  async function add() {\n    if (!name) return;\n    setBusy(true);\n    await mutate(api.addServiceType({\n      name, category,\n      interval_km: numOrNull(ik), interval_months: numOrNull(im),\n      first_km: null, first_months: null, note: \"\",\n    }));\n    setBusy(false);\n    setName(\"\"); setIk(\"\"); setIm(\"\"); setOpen(false);\n  }\n\n  if (!open) {\n    return (\n      <button onClick={() => setOpen(true)} className=\"mt-3 text-sm font-semibold text-neutral-600 hover:text-neutral-900\">\n        ＋ Add custom service\n      </button>\n    );\n  }\n\n  return (\n    <div className=\"mt-3 border border-dashed border-neutral-300 rounded-xl p-3\">\n      <Field label=\"Name\"><Input value={name} onChange={(e: { target: { value: string } }) => setName(e.target.value)} placeholder=\"e.g. Tires\" /></Field>\n      <Field label=\"Category\">\n        <Select value={category} onChange={(e: { target: { value: string } }) => setCategory(e.target.value)}>\n          {state.categories.map((c) => <option key={c} value={c}>{c}</option>)}\n        </Select>\n      </Field>\n      <div className=\"grid grid-cols-2 gap-3\">\n        <Field label=\"Every (km)\"><Input inputMode=\"numeric\" value={ik} onChange={(e: { target: { value: string } }) => setIk(e.target.value)} /></Field>\n        <Field label=\"Every (months)\"><Input inputMode=\"numeric\" value={im} onChange={(e: { target: { value: string } }) => setIm(e.target.value)} /></Field>\n      </div>\n      <div className=\"flex gap-2\">\n        <Button variant=\"secondary\" onClick={() => setOpen(false)}>Cancel</Button>\n        <Button onClick={add} disabled={busy}>{busy ? \"Adding…\" : \"Add\"}</Button>\n      </div>\n    </div>\n  );\n}\n",[],[246,330,332],"1421ea53-5649-4233-906c-5366c7fb61ad","LogService.tsx","74b72840-7f0d-11f1-8c1b-1607ee4eb77e",121,["D",1784039902574],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { api, photoUrl } from \"../lib/api.ts\";\nimport type { AppState } from \"../lib/api.ts\";\nimport type { ServiceRecord } from \"../../shared/types.ts\";\nimport { todayISO } from \"../lib/format.ts\";\nimport { fileToDataUrl } from \"../lib/image.ts\";\nimport { Button, Dropdown, Field, FileButton, Input, Modal, Textarea } from \"./ui.tsx\";\nimport type { Mutate } from \"./App.tsx\";\n\nexport function LogService(\n  { state, mutate, onClose, presetTypeId, record }: {\n    state: AppState;\n    mutate: Mutate;\n    onClose: () => void;\n    presetTypeId?: number | null;\n    record?: ServiceRecord | null;\n  },\n) {\n  const preset = presetTypeId != null ? state.service_types.find((t) => t.id === presetTypeId) : null;\n  const initialType = record\n    ? (record.service_type_id != null ? String(record.service_type_id) : \"custom\")\n    : (preset\n      ? String(preset.id)\n      : (state.service_types[0] ? String(state.service_types[0].id) : \"custom\"));\n\n  const [typeId, setTypeId] = useState<string>(initialType);\n  const [customName, setCustomName] = useState(\n    record && record.service_type_id == null ? record.name : \"\",\n  );\n  const [date, setDate] = useState(record ? record.performed_at : todayISO());\n  const [odo, setOdo] = useState<string>(\n    record\n      ? (record.odometer_km != null ? String(record.odometer_km) : \"\")\n      : String(state.vehicle.current_odometer_km || \"\"),\n  );\n  const [cost, setCost] = useState(record && record.cost != null ? String(record.cost) : \"\");\n  const [notes, setNotes] = useState(record?.notes ?? \"\");\n  const [keepKeys, setKeepKeys] = useState<string[]>(record?.photo_keys ?? []);\n  const [photos, setPhotos] = useState<string[]>([]);\n  const [busy, setBusy] = useState(false);\n\n  async function onPick(e: { target: { files: FileList | null } }) {\n    const files = Array.from(e.target.files ?? []);\n    const urls = await Promise.all(files.slice(0, 6).map((f) => fileToDataUrl(f)));\n    setPhotos((p) => [...p, ...urls].slice(0, 6));\n  }\n\n  async function submit() {\n    setBusy(true);\n    const chosen = typeId === \"custom\" ? null : Number(typeId);\n    const name = chosen != null\n      ? (state.service_types.find((t) => t.id === chosen)?.name ?? \"Service\")\n      : (customName || \"Other service\");\n    const payload = {\n      service_type_id: chosen,\n      name,\n      performed_at: date,\n      odometer_km: odo === \"\" ? null : Number(odo),\n      cost: cost === \"\" ? null : Number(cost),\n      notes,\n      photos,\n      file_keys: keepKeys,\n    };\n    await mutate(record ? api.updateRecord(record.id, payload) : api.addRecord(payload));\n    setBusy(false);\n    onClose();\n  }\n\n  return (\n    <Modal title={record ? \"Edit service\" : \"Log a service\"} onClose={onClose}>\n      <Field label=\"Service\">\n        <Dropdown\n          value={typeId}\n          onChange={setTypeId}\n          options={[\n            ...state.service_types.map((t) => ({ value: String(t.id), label: t.name })),\n            { value: \"custom\", label: \"Other / custom…\" },\n          ]}\n        />\n      </Field>\n\n      {typeId === \"custom\" && (\n        <Field label=\"Custom service name\">\n          <Input value={customName} onChange={(e: { target: { value: string } }) => setCustomName(e.target.value)} placeholder=\"e.g. New tires\" />\n        </Field>\n      )}\n\n      <div className=\"grid grid-cols-2 gap-3\">\n        <Field label=\"Date\">\n          <Input type=\"date\" value={date} onChange={(e: { target: { value: string } }) => setDate(e.target.value)} />\n        </Field>\n        <Field label=\"Odometer (km)\">\n          <Input inputMode=\"numeric\" value={odo} onChange={(e: { target: { value: string } }) => setOdo(e.target.value)} placeholder=\"e.g. 1200\" />\n        </Field>\n      </div>\n\n      <Field label={`Cost (${state.settings.currency})`} hint=\"Optional\">\n        <Input inputMode=\"decimal\" value={cost} onChange={(e: { target: { value: string } }) => setCost(e.target.value)} placeholder=\"0.00\" />\n      </Field>\n\n      <Field label=\"Notes\" hint=\"Optional — shop, parts, observations\">\n        <Textarea rows={2} value={notes} onChange={(e: { target: { value: string } }) => setNotes(e.target.value)} />\n      </Field>\n\n      <Field label=\"Photos\" hint=\"Receipts or parts — resized automatically\">\n        <FileButton onChange={onPick} />\n        {(keepKeys.length > 0 || photos.length > 0) && (\n          <div className=\"flex gap-2 flex-wrap mt-2\">\n            {keepKeys.map((k) => (\n              <div key={k} className=\"relative\">\n                <img src={photoUrl(k)} className=\"w-16 h-16 object-cover rounded-lg border border-neutral-200\" />\n                <button\n                  onClick={() => setKeepKeys((ks) => ks.filter((x) => x !== k))}\n                  className=\"absolute -top-1.5 -right-1.5 bg-neutral-800 text-white rounded-full w-5 h-5 text-xs leading-none\"\n                >×</button>\n              </div>\n            ))}\n            {photos.map((p, i) => (\n              <div key={i} className=\"relative\">\n                <img src={p} className=\"w-16 h-16 object-cover rounded-lg border border-neutral-200\" />\n                <button\n                  onClick={() => setPhotos((ps) => ps.filter((_, j) => j !== i))}\n                  className=\"absolute -top-1.5 -right-1.5 bg-neutral-800 text-white rounded-full w-5 h-5 text-xs leading-none\"\n                >×</button>\n              </div>\n            ))}\n          </div>\n        )}\n      </Field>\n\n      <div className=\"flex gap-2 mt-4\">\n        <Button variant=\"secondary\" full onClick={onClose}>Cancel</Button>\n        <Button full onClick={submit} disabled={busy}>\n          {busy ? \"Saving…\" : (record ? \"Save changes\" : \"Save service\")}\n        </Button>\n      </div>\n    </Modal>\n  );\n}\n",[],[246,330,341],"dedfea4e-867d-4e21-bf2b-f02f4d488ab7","History.tsx","b489e174-7f0d-11f1-ab46-1607ee4eb77e",134,["D",1784041904643],6,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { api, photoUrl } from \"../lib/api.ts\";\nimport type { ServiceRecord } from \"../../shared/types.ts\";\nimport { fdate, km, money } from \"../lib/format.ts\";\nimport { Button, Card, EmptyState, useConfirm } from \"./ui.tsx\";\nimport { LogService } from \"./LogService.tsx\";\nimport type { ViewProps } from \"./App.tsx\";\n\nexport function HistoryView({ state, mutate }: ViewProps) {\n  const cur = state.settings.currency;\n  const records = state.records;\n  const [editing, setEditing] = useState<ServiceRecord | null>(null);\n  const { confirm, dialog } = useConfirm();\n\n  if (records.length === 0) {\n    return (\n      <Card className=\"p-2\">\n        <EmptyState icon=\"history\" title=\"No service history yet\" sub=\"Logged services will appear here.\" />\n      </Card>\n    );\n  }\n\n  return (\n    <div className=\"space-y-2.5\">\n      {records.map((r) => (\n        <Card key={r.id} className=\"p-3.5\">\n          <div className=\"flex items-start justify-between gap-2\">\n            <div className=\"min-w-0\">\n              <div className=\"font-semibold text-neutral-800\">{r.name}</div>\n              <div className=\"text-xs text-neutral-500 mt-0.5\">\n                {fdate(r.performed_at)}{r.odometer_km != null ? ` · ${km(r.odometer_km)}` : \"\"}\n              </div>\n            </div>\n            {r.cost != null && <div className=\"font-semibold shrink-0\">{money(cur, r.cost)}</div>}\n          </div>\n          {r.notes && <div className=\"text-sm text-neutral-600 mt-2\">{r.notes}</div>}\n          {r.photo_keys.length > 0 && (\n            <div className=\"flex gap-2 flex-wrap mt-2\">\n              {r.photo_keys.map((k) => (\n                <a key={k} href={photoUrl(k)} target=\"_blank\" rel=\"noreferrer\">\n                  <img src={photoUrl(k)} className=\"w-16 h-16 object-cover rounded-lg border border-neutral-200\" />\n                </a>\n              ))}\n            </div>\n          )}\n          <div className=\"flex items-center gap-2 mt-3\">\n            <Button variant=\"secondary\" onClick={() => setEditing(r)} className=\"!py-2 text-xs\">Edit</Button>\n            <button\n              onClick={() => confirm(\"Delete this record?\", () => mutate(api.deleteRecord(r.id)))}\n              className=\"text-xs text-red-500 hover:underline ml-auto\"\n            >\n              Delete\n            </button>\n          </div>\n        </Card>\n      ))}\n\n      {editing && (\n        <LogService state={state} mutate={mutate} record={editing} onClose={() => setEditing(null)} />\n      )}\n      {dialog}\n    </div>\n  );\n}\n",[],[246,330,349],"10537445-1b7f-4aa5-befe-5a8a9ceeb1b7","Fuel.tsx","a4a6f7d8-7f0d-11f1-bf41-1607ee4eb77e",138,["D",1784041946122],10,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { api } from \"../lib/api.ts\";\nimport type { AppState } from \"../lib/api.ts\";\nimport type { FuelLog } from \"../../shared/types.ts\";\nimport { fdate, km, money, num, todayISO } from \"../lib/format.ts\";\nimport { Button, Card, EmptyState, Field, Icon, Input, Modal, Stat, Toggle, useConfirm } from \"./ui.tsx\";\nimport type { Mutate, ViewProps } from \"./App.tsx\";\n\nexport function FuelView({ state, mutate }: ViewProps) {\n  // undefined = closed, null = new fill-up, FuelLog = editing existing\n  const [editing, setEditing] = useState<FuelLog | null | undefined>(undefined);\n  const cur = state.settings.currency;\n  const eco = state.fuel_economy;\n  const segByToKm = new Map(eco.segments.map((s) => [s.to_km, s.km_per_l]));\n  const { confirm, dialog } = useConfirm();\n\n  return (\n    <div className=\"space-y-4\">\n      <Card className=\"p-4\">\n        <div className=\"flex gap-3\">\n          <Stat label=\"Avg economy\" value={eco.average_km_per_l != null ? `${num(eco.average_km_per_l, 1)}` : \"—\"} sub=\"km / L\" />\n          <Stat label=\"Fill-ups\" value={state.fuel.length} />\n          <Stat label=\"Fuel cost\" value={money(cur, state.costs.fuel_total)} />\n        </div>\n      </Card>\n\n      <Button full onClick={() => setEditing(null)}><Icon name=\"plus\" size={18} /> Add fuel fill-up</Button>\n\n      {state.fuel.length === 0\n        ? (\n          <Card className=\"p-2\">\n            <EmptyState icon=\"fuel\" title=\"No fuel logged yet\" sub=\"Add a fill-up to start tracking economy.\" />\n          </Card>\n        )\n        : (\n          <div className=\"space-y-2.5\">\n            {state.fuel.map((f) => {\n              const kmpl = f.is_full_tank === 1 ? segByToKm.get(f.odometer_km) : undefined;\n              return (\n                <Card key={f.id} className=\"p-3.5\">\n                  <div className=\"flex items-start justify-between\">\n                    <div>\n                      <div className=\"font-semibold text-neutral-800\">{km(f.odometer_km)}</div>\n                      <div className=\"text-xs text-neutral-500\">{fdate(f.filled_at)}</div>\n                    </div>\n                    <div className=\"text-right\">\n                      <div className=\"font-semibold\">{num(f.liters, 2)} L</div>\n                      <div className=\"text-xs text-neutral-500\">\n                        {f.total_cost != null ? money(cur, f.total_cost) : (f.price_per_liter != null ? `${money(cur, f.price_per_liter)}/L` : \"—\")}\n                      </div>\n                    </div>\n                  </div>\n                  <div className=\"flex items-center gap-2 text-xs mt-2\">\n                    {f.is_full_tank === 1\n                      ? <span className=\"bg-emerald-100 text-emerald-700 px-2 py-0.5 rounded-full font-semibold\">Full tank</span>\n                      : <span className=\"bg-neutral-100 text-neutral-500 px-2 py-0.5 rounded-full font-semibold\">Partial</span>}\n                    {kmpl != null && <span className=\"text-neutral-500\">{num(kmpl, 1)} km/L this tank</span>}\n                  </div>\n                  {f.notes && <div className=\"text-xs text-neutral-500 mt-1\">{f.notes}</div>}\n                  <div className=\"flex items-center gap-2 mt-3\">\n                    <Button variant=\"secondary\" onClick={() => setEditing(f)} className=\"!py-2 text-xs\">Edit</Button>\n                    <button\n                      onClick={() => confirm(\"Delete this fill-up?\", () => mutate(api.deleteFuel(f.id)))}\n                      className=\"text-xs text-red-500 hover:underline ml-auto\"\n                    >\n                      Delete\n                    </button>\n                  </div>\n                </Card>\n              );\n            })}\n          </div>\n        )}\n\n      {editing !== undefined && (\n        <FuelForm state={state} mutate={mutate} fuel={editing} onClose={() => setEditing(undefined)} />\n      )}\n      {dialog}\n    </div>\n  );\n}\n\nfunction FuelForm(\n  { state, mutate, fuel, onClose }: {\n    state: AppState;\n    mutate: Mutate;\n    fuel: FuelLog | null;\n    onClose: () => void;\n  },\n) {\n  const [date, setDate] = useState(fuel ? fuel.filled_at : todayISO());\n  const [odo, setOdo] = useState<string>(\n    fuel ? String(fuel.odometer_km) : String(state.vehicle.current_odometer_km || \"\"),\n  );\n  const [liters, setLiters] = useState(fuel ? String(fuel.liters) : \"\");\n  const [ppl, setPpl] = useState(fuel && fuel.price_per_liter != null ? String(fuel.price_per_liter) : \"\");\n  const [total, setTotal] = useState(fuel && fuel.total_cost != null ? String(fuel.total_cost) : \"\");\n  const [full, setFull] = useState(fuel ? fuel.is_full_tank === 1 : true);\n  const [notes, setNotes] = useState(fuel?.notes ?? \"\");\n  const [busy, setBusy] = useState(false);\n\n  async function submit() {\n    if (odo === \"\" || liters === \"\") return;\n    setBusy(true);\n    const payload = {\n      filled_at: date,\n      odometer_km: Number(odo),\n      liters: Number(liters),\n      price_per_liter: ppl === \"\" ? null : Number(ppl),\n      total_cost: total === \"\" ? null : Number(total),\n      is_full_tank: full,\n      notes,\n    };\n    await mutate(fuel ? api.updateFuel(fuel.id, payload) : api.addFuel(payload));\n    setBusy(false);\n    onClose();\n  }\n\n  return (\n    <Modal title={fuel ? \"Edit fill-up\" : \"Add fuel fill-up\"} onClose={onClose}>\n      <div className=\"grid grid-cols-2 gap-3\">\n        <Field label=\"Date\">\n          <Input type=\"date\" value={date} onChange={(e: { target: { value: string } }) => setDate(e.target.value)} />\n        </Field>\n        <Field label=\"Odometer (km)\">\n          <Input inputMode=\"numeric\" value={odo} onChange={(e: { target: { value: string } }) => setOdo(e.target.value)} />\n        </Field>\n      </div>\n      <div className=\"grid grid-cols-2 gap-3\">\n        <Field label=\"Liters\">\n          <Input inputMode=\"decimal\" value={liters} onChange={(e: { target: { value: string } }) => setLiters(e.target.value)} placeholder=\"e.g. 4.2\" />\n        </Field>\n        <Field label={`Total cost (${state.settings.currency})`} hint=\"or price/L below\">\n          <Input inputMode=\"decimal\" value={total} onChange={(e: { target: { value: string } }) => setTotal(e.target.value)} />\n        </Field>\n      </div>\n      <Field label={`Price per liter (${state.settings.currency})`} hint=\"Optional\">\n        <Input inputMode=\"decimal\" value={ppl} onChange={(e: { target: { value: string } }) => setPpl(e.target.value)} />\n      </Field>\n      <div className=\"mb-3\">\n        <Toggle\n          checked={full}\n          onChange={setFull}\n          label=\"Full tank\"\n          hint=\"Filled it all the way — needed to calculate fuel economy\"\n        />\n      </div>\n      <Field label=\"Notes\" hint=\"Optional\">\n        <Input value={notes} onChange={(e: { target: { value: string } }) => setNotes(e.target.value)} />\n      </Field>\n      <div className=\"flex gap-2 mt-2\">\n        <Button variant=\"secondary\" full onClick={onClose}>Cancel</Button>\n        <Button full onClick={submit} disabled={busy}>\n          {busy ? \"Saving…\" : (fuel ? \"Save changes\" : \"Save fill-up\")}\n        </Button>\n      </div>\n    </Modal>\n  );\n}\n",[],[246,330,358],"7d4da244-8baf-4cdb-903e-24369e7a0024","Documents.tsx","ca974dce-7f14-11f1-abf1-1607ee4eb77e",142,["D",1784041992247],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { api, photoUrl } from \"../lib/api.ts\";\nimport type { AppState } from \"../lib/api.ts\";\nimport type { DocInfo, DocStatus } from \"../../shared/types.ts\";\nimport { fdate } from \"../lib/format.ts\";\nimport { fileToDataUrl } from \"../lib/image.ts\";\nimport { Button, Card, Dropdown, EmptyState, Field, FileButton, Icon, Input, Modal, Textarea, useConfirm } from \"./ui.tsx\";\nimport type { Mutate, ViewProps } from \"./App.tsx\";\n\nconst STATUS_META: Record<DocStatus, { label: string; cls: string; accent: string }> = {\n  expired: { label: \"Expired\", cls: \"bg-red-100 text-red-700\", accent: \"border-l-red-500\" },\n  expiring_soon: { label: \"Renew soon\", cls: \"bg-amber-100 text-amber-800\", accent: \"border-l-amber-400\" },\n  ok: { label: \"Valid\", cls: \"bg-emerald-100 text-emerald-700\", accent: \"border-l-emerald-400\" },\n  none: { label: \"No expiry\", cls: \"bg-neutral-100 text-neutral-500\", accent: \"border-l-neutral-300\" },\n};\n\nexport function DocumentsView({ state, mutate }: ViewProps) {\n  // undefined = closed, null = new document, DocInfo = editing existing\n  const [editing, setEditing] = useState<DocInfo | null | undefined>(undefined);\n  const { confirm, dialog } = useConfirm();\n\n  return (\n    <div className=\"space-y-4\">\n      <Button full onClick={() => setEditing(null)}>\n        <Icon name=\"plus\" size={18} /> Add document\n      </Button>\n\n      {state.documents.length === 0\n        ? (\n          <Card className=\"p-2\">\n            <EmptyState\n              icon=\"doc\"\n              title=\"No documents yet\"\n              sub=\"Store your OR/CR, insurance and license — with renewal reminders.\"\n            />\n          </Card>\n        )\n        : (\n          <div className=\"space-y-2.5\">\n            {state.documents.map((d) => (\n              <DocCard\n                key={d.id}\n                d={d}\n                onEdit={() => setEditing(d)}\n                onDelete={() =>\n                  confirm(`Delete \"${d.name || d.doc_type}\"?`, () => mutate(api.deleteDocument(d.id)))}\n              />\n            ))}\n          </div>\n        )}\n\n      {editing !== undefined && (\n        <DocForm state={state} mutate={mutate} doc={editing} onClose={() => setEditing(undefined)} />\n      )}\n      {dialog}\n    </div>\n  );\n}\n\nfunction DocCard({ d, onEdit, onDelete }: { d: DocInfo; onEdit: () => void; onDelete: () => void }) {\n  const meta = STATUS_META[d.status];\n  return (\n    <Card className={`p-3.5 border-l-4 ${meta.accent}`}>\n      <div className=\"flex items-start justify-between gap-2\">\n        <div className=\"min-w-0\">\n          <div className=\"font-semibold text-neutral-800 truncate\">{d.name || d.doc_type}</div>\n          <div className=\"text-xs text-neutral-500 mt-0.5\">\n            {d.doc_type}{d.reference ? ` · ${d.reference}` : \"\"}\n          </div>\n        </div>\n        <span className={`text-xs font-semibold px-2 py-0.5 rounded-full shrink-0 ${meta.cls}`}>\n          {meta.label}\n        </span>\n      </div>\n\n      <div className=\"text-sm text-neutral-700 mt-2\">\n        {d.expiry_date\n          ? (\n            <span>\n              Expires {fdate(d.expiry_date)}\n              {d.days_remaining != null\n                ? (d.days_remaining < 0\n                  ? ` · ${-d.days_remaining} days ago`\n                  : ` · in ${d.days_remaining} days`)\n                : \"\"}\n            </span>\n          )\n          : <span className=\"text-neutral-400\">No expiry date</span>}\n      </div>\n      {d.notes && <div className=\"text-xs text-neutral-500 mt-1\">{d.notes}</div>}\n\n      {d.file_keys.length > 0 && (\n        <div className=\"flex gap-2 flex-wrap mt-2\">\n          {d.file_keys.map((k) => (\n            <a key={k} href={photoUrl(k)} target=\"_blank\" rel=\"noreferrer\">\n              <img src={photoUrl(k)} className=\"w-16 h-16 object-cover rounded-lg border border-neutral-200\" />\n            </a>\n          ))}\n        </div>\n      )}\n\n      <div className=\"flex items-center gap-2 mt-3\">\n        <Button variant=\"secondary\" onClick={onEdit} className=\"!py-2 text-xs\">Edit</Button>\n        <button onClick={onDelete} className=\"text-xs text-red-500 hover:underline ml-auto\">Delete</button>\n      </div>\n    </Card>\n  );\n}\n\nfunction DocForm(\n  { state, mutate, doc, onClose }: {\n    state: AppState;\n    mutate: Mutate;\n    doc: DocInfo | null;\n    onClose: () => void;\n  },\n) {\n  const [docType, setDocType] = useState(doc?.doc_type ?? state.doc_types[0] ?? \"Other\");\n  const [name, setName] = useState(doc?.name ?? \"\");\n  const [reference, setReference] = useState(doc?.reference ?? \"\");\n  const [issue, setIssue] = useState(doc?.issue_date ?? \"\");\n  const [expiry, setExpiry] = useState(doc?.expiry_date ?? \"\");\n  const [notes, setNotes] = useState(doc?.notes ?? \"\");\n  const [keepKeys, setKeepKeys] = useState<string[]>(doc?.file_keys ?? []);\n  const [newPhotos, setNewPhotos] = useState<string[]>([]);\n  const [busy, setBusy] = useState(false);\n\n  async function onPick(e: { target: { files: FileList | null } }) {\n    const files = Array.from(e.target.files ?? []);\n    const urls = await Promise.all(files.slice(0, 6).map((f) => fileToDataUrl(f)));\n    setNewPhotos((p) => [...p, ...urls].slice(0, 6));\n  }\n\n  async function submit() {\n    setBusy(true);\n    const payload = {\n      doc_type: docType,\n      name,\n      reference,\n      issue_date: issue,\n      expiry_date: expiry,\n      notes,\n      photos: newPhotos,\n      file_keys: keepKeys,\n    };\n    await mutate(doc ? api.updateDocument(doc.id, payload) : api.addDocument(payload));\n    setBusy(false);\n    onClose();\n  }\n\n  return (\n    <Modal title={doc ? \"Edit document\" : \"Add document\"} onClose={onClose}>\n      <Field label=\"Type\">\n        <Dropdown value={docType} onChange={setDocType} options={state.doc_types.map((t) => ({ value: t, label: t }))} />\n      </Field>\n      <Field label=\"Label\" hint=\"e.g. OR/CR 2026, Insurance – Malayan\">\n        <Input value={name} onChange={(e: { target: { value: string } }) => setName(e.target.value)} />\n      </Field>\n      <Field label=\"Reference #\" hint=\"Plate, policy #, MV file no. — optional\">\n        <Input value={reference} onChange={(e: { target: { value: string } }) => setReference(e.target.value)} />\n      </Field>\n      <div className=\"grid grid-cols-2 gap-3\">\n        <Field label=\"Issued\" hint=\"Optional\">\n          <Input type=\"date\" value={issue} onChange={(e: { target: { value: string } }) => setIssue(e.target.value)} />\n        </Field>\n        <Field label=\"Expires\" hint=\"Drives reminders\">\n          <Input type=\"date\" value={expiry} onChange={(e: { target: { value: string } }) => setExpiry(e.target.value)} />\n        </Field>\n      </div>\n      <Field label=\"Notes\" hint=\"Optional\">\n        <Textarea rows={2} value={notes} onChange={(e: { target: { value: string } }) => setNotes(e.target.value)} />\n      </Field>\n      <Field label=\"Photos\" hint=\"Photograph the document(s) — resized automatically\">\n        <FileButton onChange={onPick} />\n        {(keepKeys.length > 0 || newPhotos.length > 0) && (\n          <div className=\"flex gap-2 flex-wrap mt-2\">\n            {keepKeys.map((k) => (\n              <div key={k} className=\"relative\">\n                <img src={photoUrl(k)} className=\"w-16 h-16 object-cover rounded-lg border border-neutral-200\" />\n                <button\n                  onClick={() => setKeepKeys((ks) => ks.filter((x) => x !== k))}\n                  className=\"absolute -top-1.5 -right-1.5 bg-neutral-800 text-white rounded-full w-5 h-5 text-xs leading-none\"\n                >×</button>\n              </div>\n            ))}\n            {newPhotos.map((p, i) => (\n              <div key={i} className=\"relative\">\n                <img src={p} className=\"w-16 h-16 object-cover rounded-lg border border-neutral-200\" />\n                <button\n                  onClick={() => setNewPhotos((ps) => ps.filter((_, j) => j !== i))}\n                  className=\"absolute -top-1.5 -right-1.5 bg-neutral-800 text-white rounded-full w-5 h-5 text-xs leading-none\"\n                >×</button>\n              </div>\n            ))}\n          </div>\n        )}\n      </Field>\n      <div className=\"flex gap-2 mt-2\">\n        <Button variant=\"secondary\" full onClick={onClose}>Cancel</Button>\n        <Button full onClick={submit} disabled={busy}>{busy ? \"Saving…\" : \"Save document\"}</Button>\n      </div>\n    </Modal>\n  );\n}\n",[],[246,330,367],"e2665361-fed9-426f-a6c0-465c3049aa15","Dashboard.tsx","86405afa-7f0d-11f1-a307-1607ee4eb77e",107,["D",1784014821225],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { api } from \"../lib/api.ts\";\nimport type { DueInfo } from \"../../shared/types.ts\";\nimport { fdate, km, num } from \"../lib/format.ts\";\nimport { Button, Card, EmptyState, Icon, Input, StatusPill } from \"./ui.tsx\";\nimport { LogService } from \"./LogService.tsx\";\nimport type { ViewProps } from \"./App.tsx\";\n\nexport function Dashboard({ state, mutate }: ViewProps) {\n  const [logFor, setLogFor] = useState<number | null | undefined>(undefined); // undefined = closed\n  const [odo, setOdo] = useState(\"\");\n  const [savingOdo, setSavingOdo] = useState(false);\n\n  const dueItems = state.due.filter((d) => d.enabled);\n\n  async function saveOdo() {\n    if (odo === \"\") return;\n    setSavingOdo(true);\n    await mutate(api.addOdometer(Number(odo)));\n    setOdo(\"\");\n    setSavingOdo(false);\n  }\n\n  return (\n    <div className=\"space-y-4\">\n      {/* Odometer + log actions */}\n      <Card className=\"p-4\">\n        <div className=\"flex items-center gap-2\">\n          <Input\n            inputMode=\"numeric\"\n            value={odo}\n            onChange={(e: { target: { value: string } }) => setOdo(e.target.value)}\n            placeholder={`Update odometer (now ${km(state.vehicle.current_odometer_km)})`}\n          />\n          <Button onClick={saveOdo} disabled={savingOdo || odo === \"\"}>Save</Button>\n        </div>\n        <div className=\"mt-3\">\n          <Button full onClick={() => setLogFor(null)}><Icon name=\"plus\" size={18} /> Log a service</Button>\n        </div>\n        {state.km_per_day != null && (\n          <div className=\"text-xs text-neutral-400 mt-2 text-center\">\n            Average use ≈ {num(state.km_per_day, 1)} km/day\n          </div>\n        )}\n      </Card>\n\n      {/* Due list */}\n      <div className=\"flex items-center justify-between px-1\">\n        <h2 className=\"font-bold text-neutral-700\">Maintenance</h2>\n        <span className=\"text-xs text-neutral-400\">{dueItems.length} tracked</span>\n      </div>\n\n      {dueItems.length === 0\n        ? (\n          <Card className=\"p-2\">\n            <EmptyState icon=\"wrench\" title=\"No services enabled\" sub=\"Turn some on in Settings.\" />\n          </Card>\n        )\n        : (\n          <div className=\"space-y-2.5\">\n            {dueItems.map((d) => (\n              <DueCard\n                key={d.service_type_id}\n                d={d}\n                onLog={() => setLogFor(d.service_type_id)}\n                onSnooze={() => mutate(api.snooze(d.service_type_id))}\n              />\n            ))}\n          </div>\n        )}\n\n      {logFor !== undefined && (\n        <LogService\n          state={state}\n          mutate={mutate}\n          presetTypeId={logFor}\n          onClose={() => setLogFor(undefined)}\n        />\n      )}\n    </div>\n  );\n}\n\nfunction DueCard(\n  { d, onLog, onSnooze }: { d: DueInfo; onLog: () => void; onSnooze: () => void },\n) {\n  const accent = d.status === \"overdue\"\n    ? \"border-l-[#E4002B]\"\n    : d.status === \"due_soon\"\n    ? \"border-l-amber-400\"\n    : \"border-l-neutral-300\";\n\n  const dueBits: string[] = [];\n  if (d.next_due_km != null) dueBits.push(km(d.next_due_km));\n  if (d.next_due_date != null) dueBits.push(`by ${fdate(d.next_due_date)}`);\n\n  return (\n    <Card className={`p-3.5 border-l-4 ${accent}`}>\n      <div className=\"flex items-start justify-between gap-2\">\n        <div className=\"min-w-0\">\n          <div className=\"font-semibold text-neutral-800 truncate\">{d.name}</div>\n          <div className=\"text-xs text-neutral-500 mt-0.5\">{d.category}</div>\n        </div>\n        <StatusPill status={d.status} />\n      </div>\n\n      <div className=\"mt-2 text-sm text-neutral-700\">\n        {dueBits.length ? <span>Next due: {dueBits.join(\" · \")}</span> : <span className=\"text-neutral-400\">No interval set</span>}\n      </div>\n      {d.reason && (\n        <div\n          className={`text-xs mt-0.5 ${\n            d.status === \"overdue\" ? \"text-red-600\" : d.status === \"due_soon\" ? \"text-amber-700\" : \"text-neutral-400\"\n          }`}\n        >\n          {d.reason}\n        </div>\n      )}\n      <div className=\"text-xs text-neutral-400 mt-1\">\n        {d.last_done_date\n          ? `Last done: ${fdate(d.last_done_date)}${d.last_done_km != null ? ` · ${km(d.last_done_km)}` : \"\"}`\n          : \"Never logged\"}\n      </div>\n\n      <div className=\"flex gap-2 mt-3\">\n        <Button variant=\"secondary\" onClick={onLog} className=\"!py-2 text-xs\">Log this</Button>\n        {(d.status === \"overdue\" || d.status === \"due_soon\") && (\n          <Button variant=\"ghost\" onClick={onSnooze} className=\"!py-2 text-xs\">Snooze 7d</Button>\n        )}\n      </div>\n    </Card>\n  );\n}\n",[],[246,330,375],"b4984de5-06fb-4214-ad58-b4739811343e","Costs.tsx","b04c37ec-7f0d-11f1-9fbe-1607ee4eb77e",52,["D",1783984958443],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { money, monthLabel } from \"../lib/format.ts\";\nimport { Card, EmptyState, Stat } from \"./ui.tsx\";\nimport { RED } from \"./ui.tsx\";\nimport type { ViewProps } from \"./App.tsx\";\n\nexport function CostsView({ state }: ViewProps) {\n  const cur = state.settings.currency;\n  const c = state.costs;\n  const months = Object.entries(c.by_month).sort(([a], [b]) => (a < b ? 1 : -1)).slice(0, 12);\n  const maxMonth = Math.max(1, ...months.map(([, v]) => v.service + v.fuel));\n  const cats = Object.entries(c.by_category).sort(([, a], [, b]) => b - a);\n\n  return (\n    <div className=\"space-y-4\">\n      <Card className=\"p-4\">\n        <div className=\"flex gap-3\">\n          <Stat label=\"Total spent\" value={money(cur, c.total)} />\n          <Stat label=\"Service\" value={money(cur, c.service_total)} />\n          <Stat label=\"Fuel\" value={money(cur, c.fuel_total)} />\n        </div>\n      </Card>\n\n      {c.total === 0\n        ? (\n          <Card className=\"p-2\">\n            <EmptyState icon=\"costs\" title=\"No costs recorded yet\" sub=\"Add costs when logging services or fuel.\" />\n          </Card>\n        )\n        : (\n          <>\n            <Card className=\"p-4\">\n              <h3 className=\"font-bold text-neutral-700 mb-3\">Monthly spend</h3>\n              <div className=\"space-y-2\">\n                {months.map(([m, v]) => {\n                  const total = v.service + v.fuel;\n                  return (\n                    <div key={m}>\n                      <div className=\"flex justify-between text-xs mb-1\">\n                        <span className=\"text-neutral-500\">{monthLabel(m)}</span>\n                        <span className=\"font-semibold\">{money(cur, total)}</span>\n                      </div>\n                      <div className=\"h-2.5 rounded-full bg-neutral-100 overflow-hidden flex\">\n                        <div style={{ width: `${(v.service / maxMonth) * 100}%`, backgroundColor: RED }} />\n                        <div style={{ width: `${(v.fuel / maxMonth) * 100}%`, backgroundColor: \"#f59e0b\" }} />\n                      </div>\n                    </div>\n                  );\n                })}\n              </div>\n              <div className=\"flex gap-4 mt-3 text-xs text-neutral-500\">\n                <span className=\"flex items-center gap-1\"><span className=\"w-2.5 h-2.5 rounded-full inline-block\" style={{ backgroundColor: RED }} />Service</span>\n                <span className=\"flex items-center gap-1\"><span className=\"w-2.5 h-2.5 rounded-full inline-block bg-amber-500\" />Fuel</span>\n              </div>\n            </Card>\n\n            {cats.length > 0 && (\n              <Card className=\"p-4\">\n                <h3 className=\"font-bold text-neutral-700 mb-3\">Service by category</h3>\n                <div className=\"space-y-2\">\n                  {cats.map(([cat, amt]) => (\n                    <div key={cat} className=\"flex justify-between text-sm\">\n                      <span className=\"text-neutral-600\">{cat}</span>\n                      <span className=\"font-semibold\">{money(cur, amt)}</span>\n                    </div>\n                  ))}\n                </div>\n              </Card>\n            )}\n          </>\n        )}\n    </div>\n  );\n}\n",[],[246,330,383],"32faeb64-4896-4e9d-a7ef-04099205ba86","App.tsx","5de39cc0-7f0d-11f1-a52a-1607ee4eb77e",113,["D",1784015977929],18,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useCallback, useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { api, AuthError } from \"../lib/api.ts\";\nimport type { AppState } from \"../lib/api.ts\";\nimport { km } from \"../lib/format.ts\";\nimport { Button, Icon, RED } from \"./ui.tsx\";\nimport { Dashboard } from \"./Dashboard.tsx\";\nimport { FuelView } from \"./Fuel.tsx\";\nimport { CostsView } from \"./Costs.tsx\";\nimport { HistoryView } from \"./History.tsx\";\nimport { SettingsView } from \"./Settings.tsx\";\nimport { DocumentsView } from \"./Documents.tsx\";\n\nexport type Mutate = (p: Promise<AppState>) => Promise<void>;\nexport interface ViewProps {\n  state: AppState;\n  mutate: Mutate;\n}\n\ntype Tab = \"dashboard\" | \"fuel\" | \"costs\" | \"history\" | \"documents\";\n\nconst TABS: { id: Tab; label: string; icon: string }[] = [\n  { id: \"dashboard\", label: \"Home\", icon: \"home\" },\n  { id: \"fuel\", label: \"Fuel\", icon: \"fuel\" },\n  { id: \"costs\", label: \"Costs\", icon: \"costs\" },\n  { id: \"history\", label: \"History\", icon: \"history\" },\n  { id: \"documents\", label: \"Docs\", icon: \"doc\" },\n];\n\nexport function App() {\n  const [state, setState] = useState<AppState | null>(null);\n  const [needLogin, setNeedLogin] = useState(false);\n  const [err, setErr] = useState<string | null>(null);\n  const [tab, setTab] = useState<Tab>(\"dashboard\");\n  const [showSettings, setShowSettings] = useState(false);\n\n  const load = useCallback(async () => {\n    setErr(null);\n    try {\n      setState(await api.bootstrap());\n      setNeedLogin(false);\n    } catch (e) {\n      if (e instanceof AuthError) setNeedLogin(true);\n      else setErr(String(e));\n    }\n  }, []);\n\n  useEffect(() => {\n    load();\n  }, [load]);\n\n  const mutate: Mutate = useCallback(async (p) => {\n    try {\n      setState(await p);\n    } catch (e) {\n      if (e instanceof AuthError) setNeedLogin(true);\n      else alert(\"Something went wrong. Please try again.\\n\\n\" + String(e));\n    }\n  }, []);\n\n  if (needLogin) return <Login />;\n  if (err) return <ErrorScreen msg={err} onRetry={load} />;\n  if (!state) return <Splash />;\n\n  const v = state.vehicle;\n  const overdue = state.due.filter((d) => d.enabled && d.status === \"overdue\").length;\n  const soon = state.due.filter((d) => d.enabled && d.status === \"due_soon\").length;\n  const docAlerts = state.documents.filter((d) => d.status === \"expired\" || d.status === \"expiring_soon\").length;\n\n  return (\n    <div className=\"min-h-screen max-w-lg mx-auto pb-24\">\n      {/* Header */}\n      <header\n        className=\"px-4 pt-5 pb-5 text-white shadow-sm\"\n        style={{ background: \"linear-gradient(135deg, #232323, #0a0a0a)\", borderBottom: `3px solid ${RED}` }}\n      >\n        <div className=\"flex items-start justify-between\">\n          <div className=\"min-w-0\">\n            <div className=\"text-white/80 text-xs font-semibold uppercase tracking-wide\">\n              {v.year ? `${v.year} ` : \"\"}{v.make} {v.model}\n            </div>\n            <div className=\"text-2xl font-extrabold truncate\">{v.name || \"My ADV160\"}</div>\n            <div className=\"text-white/80 text-xs mt-0.5\">\n              {v.color}{v.plate ? ` · ${v.plate}` : \"\"}\n            </div>\n          </div>\n          <button\n            onClick={() => setShowSettings(true)}\n            className=\"shrink-0 bg-white/10 hover:bg-white/20 rounded-full w-10 h-10 flex items-center justify-center text-white\"\n            aria-label=\"Settings\"\n          >\n            <Icon name=\"gear\" size={20} />\n          </button>\n        </div>\n        <div className=\"mt-4 flex items-end gap-4\">\n          <div>\n            <div className=\"text-white/70 text-xs\">Odometer</div>\n            <div className=\"text-3xl font-extrabold leading-none\">{km(v.current_odometer_km)}</div>\n          </div>\n          <div className=\"ml-auto flex flex-col items-end gap-1\">\n            {overdue > 0 && (\n              <span className=\"text-xs font-bold px-2.5 py-1 rounded-full bg-white/15\" style={{ color: \"#ff6b6b\" }}>\n                {overdue} overdue\n              </span>\n            )}\n            {soon > 0 && (\n              <span className=\"text-xs font-semibold px-2.5 py-1 rounded-full bg-amber-400/20 text-amber-300\">\n                {soon} due soon\n              </span>\n            )}\n          </div>\n        </div>\n      </header>\n\n      <main className=\"px-4 pt-4 space-y-4\">\n        {tab === \"dashboard\" && <Dashboard state={state} mutate={mutate} />}\n        {tab === \"fuel\" && <FuelView state={state} mutate={mutate} />}\n        {tab === \"costs\" && <CostsView state={state} mutate={mutate} />}\n        {tab === \"history\" && <HistoryView state={state} mutate={mutate} />}\n        {tab === \"documents\" && <DocumentsView state={state} mutate={mutate} />}\n\n        <div className=\"text-center pt-2\">\n          <a href=\"/source\" className=\"text-xs text-neutral-400 underline\">view source</a>\n        </div>\n      </main>\n\n      {/* Bottom nav */}\n      <nav className=\"fixed bottom-0 inset-x-0 z-40 border-t border-neutral-200 bg-white/95 backdrop-blur\">\n        <div className=\"max-w-lg mx-auto grid grid-cols-5\">\n          {TABS.map((t) => {\n            const active = tab === t.id;\n            return (\n              <button\n                key={t.id}\n                onClick={() => setTab(t.id)}\n                className=\"relative py-2.5 flex flex-col items-center gap-1 text-[11px] font-semibold\"\n                style={{ color: active ? RED : \"#9ca3af\" }}\n              >\n                {active && (\n                  <span\n                    className=\"absolute top-0 h-[3px] w-8 rounded-full\"\n                    style={{ backgroundColor: RED }}\n                  />\n                )}\n                <span className=\"relative\">\n                  <Icon name={t.icon} size={22} strokeWidth={active ? 2 : 1.8} />\n                  {t.id === \"documents\" && docAlerts > 0 && (\n                    <span\n                      className=\"absolute -top-0.5 -right-2 w-2 h-2 rounded-full\"\n                      style={{ backgroundColor: RED }}\n                    />\n                  )}\n                </span>\n                {t.label}\n              </button>\n            );\n          })}\n        </div>\n      </nav>\n\n      {showSettings && (\n        <SettingsView state={state} mutate={mutate} onClose={() => setShowSettings(false)} />\n      )}\n    </div>\n  );\n}\n\nfunction Login() {\n  return (\n    <div className=\"min-h-screen flex items-center justify-center p-6\">\n      <div className=\"bg-white rounded-3xl shadow-sm border border-neutral-200 p-7 max-w-sm w-full text-center\">\n        <div\n          className=\"mx-auto mb-4 w-16 h-16 rounded-2xl flex items-center justify-center text-white\"\n          style={{ backgroundColor: RED }}\n        >\n          <Icon name=\"gauge\" size={32} strokeWidth={2} />\n        </div>\n        <h1 className=\"text-xl font-extrabold\">ADV160 Maintenance</h1>\n        <p className=\"text-sm text-neutral-500 mt-2 mb-6\">\n          Your private maintenance log. Sign in with your Val Town account to continue.\n        </p>\n        <a\n          href=\"/auth/login\"\n          className=\"inline-flex w-full items-center justify-center rounded-xl text-white font-semibold py-3\"\n          style={{ backgroundColor: RED }}\n        >\n          Log in with Val Town\n        </a>\n      </div>\n    </div>\n  );\n}\n\nfunction Splash() {\n  return (\n    <div className=\"min-h-screen flex flex-col items-center justify-center gap-3 text-neutral-400\">\n      <div\n        className=\"w-10 h-10 rounded-full border-[3px] border-neutral-200 animate-spin\"\n        style={{ borderTopColor: RED }}\n        role=\"status\"\n        aria-label=\"Loading\"\n      />\n      <span className=\"text-sm font-medium\">Loading…</span>\n    </div>\n  );\n}\n\nfunction ErrorScreen({ msg, onRetry }: { msg: string; onRetry: () => void }) {\n  return (\n    <div className=\"min-h-screen flex items-center justify-center p-6\">\n      <div className=\"text-center max-w-sm\">\n        <div className=\"text-4xl mb-2\">⚠️</div>\n        <div className=\"font-semibold mb-1\">Couldn't load your data</div>\n        <div className=\"text-xs text-neutral-400 mb-4 break-words\">{msg}</div>\n        <Button onClick={onRetry}>Try again</Button>\n      </div>\n    </div>\n  );\n}\n",[],[246,330,391],"c89cb1c7-d65d-4870-a93d-966767eb90fa",["D",1783983031616],[180,181,182,183,184,185,186,187,188],[246,330],"0387f0c2-b02a-4a5d-b98e-8eecf3f47c0c",["D",1783982946331],[179,189,194,195,196,197,198],[246],["D",1783982824101],[],[18,64],["D",1783982824101],[177],[18],"0bb15bd5-0ed6-4203-9041-eb385d89ff65","stats.ts","039c413a-7f0e-11f1-8601-1607ee4eb77e","977ebdc0-ab7e-4b24-8641-5c8d6c6d9182",26,["D",1783983359126],"// Pure fuel-economy and cost aggregation, split out from the HTTP layer so it can\n// be unit-tested independently.\nimport type { FuelLog, ServiceRecord, ServiceType } from \"../shared/types.ts\";\n\nexport interface FuelSegment {\n  from_km: number;\n  to_km: number;\n  distance: number;\n  liters: number;\n  km_per_l: number;\n  date: string;\n}\n\n// Fuel economy between consecutive full-tank fills (km per liter).\nexport function fuelEconomy(fuel: FuelLog[]): {\n  segments: FuelSegment[];\n  average_km_per_l: number | null;\n} {\n  const asc = [...fuel].sort((a, b) => a.odometer_km - b.odometer_km);\n  const segments: FuelSegment[] = [];\n  let lastFull: FuelLog | null = null;\n  let litersSinceFull = 0;\n  for (const f of asc) {\n    if (lastFull) litersSinceFull += f.liters;\n    if (f.is_full_tank === 1) {\n      if (lastFull) {\n        const distance = f.odometer_km - lastFull.odometer_km;\n        if (distance > 0 && litersSinceFull > 0) {\n          segments.push({\n            from_km: lastFull.odometer_km,\n            to_km: f.odometer_km,\n            distance,\n            liters: litersSinceFull,\n            km_per_l: distance / litersSinceFull,\n            date: f.filled_at,\n          });\n        }\n      }\n      lastFull = f;\n      litersSinceFull = 0;\n    }\n  }\n  const totalDist = segments.reduce((a, x) => a + x.distance, 0);\n  const totalLiters = segments.reduce((a, x) => a + x.liters, 0);\n  return { segments, average_km_per_l: totalLiters > 0 ? totalDist / totalLiters : null };\n}\n\nexport function costSummary(\n  records: ServiceRecord[],\n  fuel: FuelLog[],\n  types: ServiceType[],\n) {\n  const catById = new Map(types.map((t) => [t.id, t.category]));\n  const fuelCost = (f: FuelLog) =>\n    f.total_cost ?? (f.price_per_liter != null ? f.price_per_liter * f.liters : 0);\n  const serviceTotal = records.reduce((a, r) => a + (r.cost ?? 0), 0);\n  const fuelTotal = fuel.reduce((a, f) => a + fuelCost(f), 0);\n\n  const byMonth: Record<string, { service: number; fuel: number }> = {};\n  const add = (month: string, key: \"service\" | \"fuel\", amt: number) => {\n    if (!amt) return;\n    byMonth[month] ??= { service: 0, fuel: 0 };\n    byMonth[month][key] += amt;\n  };\n  for (const r of records) add((r.performed_at || \"\").slice(0, 7), \"service\", r.cost ?? 0);\n  for (const f of fuel) add((f.filled_at || \"\").slice(0, 7), \"fuel\", fuelCost(f));\n\n  const byCategory: Record<string, number> = {};\n  for (const r of records) {\n    if (!r.cost) continue;\n    const cat = r.service_type_id != null ? (catById.get(r.service_type_id) ?? \"Other\") : \"Other\";\n    byCategory[cat] = (byCategory[cat] ?? 0) + r.cost;\n  }\n  return {\n    service_total: serviceTotal,\n    fuel_total: fuelTotal,\n    total: serviceTotal + fuelTotal,\n    by_month: byMonth,\n    by_category: byCategory,\n  };\n}\n",[],[422,414],"backend","583cfc3c-8c7b-4c2e-96f9-e60894fc4e34","5272b174-7f0c-11f1-ab1f-1607ee4eb77e",61,["D",1783985878920],"// Pure due-date / reminder calculation. No DB access here so it can be unit-reasoned\n// and reused by both the HTTP API and the daily cron job.\n\nimport type {\n  DocInfo,\n  DocItem,\n  DocStatus,\n  DueInfo,\n  DueStatus,\n  ServiceRecord,\n  ServiceType,\n  Settings,\n  Vehicle,\n} from \"../shared/types.ts\";\n\nconst DAY_MS = 24 * 60 * 60 * 1000;\n\nexport function dateOnly(s: string): string {\n  return (s || \"\").slice(0, 10);\n}\n\nfunction parseUTC(s: string): Date {\n  return new Date(`${dateOnly(s)}T00:00:00Z`);\n}\n\nexport function todayISO(): string {\n  return new Date().toISOString().slice(0, 10);\n}\n\nexport function addMonths(dateStr: string, months: number): string {\n  const d = parseUTC(dateStr);\n  const day = d.getUTCDate();\n  d.setUTCMonth(d.getUTCMonth() + months);\n  // Clamp end-of-month overflow (e.g. Jan 31 + 1mo -> Feb 28).\n  if (d.getUTCDate() < day) d.setUTCDate(0);\n  return d.toISOString().slice(0, 10);\n}\n\nexport function daysBetween(fromISO: string, toISO: string): number {\n  return Math.round((parseUTC(toISO).getTime() - parseUTC(fromISO).getTime()) / DAY_MS);\n}\n\n// Estimate average km/day from odometer history, falling back to the baseline.\nexport function estimateKmPerDay(\n  vehicle: Vehicle,\n  readings: { km: number; recorded_at: string }[],\n): number | null {\n  const pts = [...readings]\n    .map((r) => ({ km: r.km, at: dateOnly(r.recorded_at) }))\n    .sort((a, b) => (a.at < b.at ? -1 : 1));\n  if (pts.length >= 2) {\n    const first = pts[0];\n    const last = pts[pts.length - 1];\n    const days = daysBetween(first.at, last.at);\n    const km = last.km - first.km;\n    if (days >= 1 && km > 0) return km / days;\n  }\n  // Fallback: distance covered since the vehicle baseline.\n  const days = daysBetween(vehicle.baseline_date, todayISO());\n  const km = vehicle.current_odometer_km - vehicle.baseline_odometer_km;\n  if (days >= 1 && km > 0) return km / days;\n  return null;\n}\n\nfunction fmtKm(n: number): string {\n  return `${Math.round(n).toLocaleString(\"en-US\")} km`;\n}\n\nexport function computeDue(\n  vehicle: Vehicle,\n  settings: Settings,\n  serviceTypes: ServiceType[],\n  records: ServiceRecord[],\n  kmPerDay: number | null,\n): DueInfo[] {\n  const currentKm = vehicle.current_odometer_km;\n  const today = todayISO();\n  const leadDays = settings.reminder_lead_days;\n  const leadKm = settings.reminder_lead_km;\n\n  const out: DueInfo[] = serviceTypes.map((st) => {\n    // Most recent record for this service type (records already sorted desc by date).\n    const last = records.find((r) => r.service_type_id === st.id) ?? null;\n\n    const baseKm = last?.odometer_km ?? vehicle.baseline_odometer_km;\n    const baseDate = last ? dateOnly(last.performed_at) : vehicle.baseline_date;\n\n    // Choose km interval: use \"first\" interval only when the service was never done.\n    const kmInterval = last ? st.interval_km : (st.first_km ?? st.interval_km);\n    const monthInterval = last ? st.interval_months : (st.first_months ?? st.interval_months);\n\n    const nextDueKm = kmInterval != null ? baseKm + kmInterval : null;\n    const nextDueDate = monthInterval != null ? addMonths(baseDate, monthInterval) : null;\n\n    const kmRemaining = nextDueKm != null ? nextDueKm - currentKm : null;\n    const daysRemaining = nextDueDate != null ? daysBetween(today, nextDueDate) : null;\n\n    // Project when the km-based service will be reached, given usage rate.\n    let projectedDueDate: string | null = null;\n    if (kmRemaining != null && kmPerDay && kmPerDay > 0) {\n      const daysToKm = Math.round(kmRemaining / kmPerDay);\n      const d = new Date(Date.now() + daysToKm * DAY_MS);\n      projectedDueDate = d.toISOString().slice(0, 10);\n    }\n\n    let status: DueStatus = \"ok\";\n    const reasons: string[] = [];\n\n    if (nextDueKm == null && nextDueDate == null) {\n      status = \"unknown\";\n      reasons.push(\"No interval set\");\n    } else {\n      const overdueKm = kmRemaining != null && kmRemaining <= 0;\n      const overdueTime = daysRemaining != null && daysRemaining < 0;\n      const soonKm = kmRemaining != null && kmRemaining > 0 && kmRemaining <= leadKm;\n      const soonTime = daysRemaining != null && daysRemaining >= 0 && daysRemaining <= leadDays;\n      const soonProjected = projectedDueDate != null &&\n        daysBetween(today, projectedDueDate) <= leadDays;\n\n      if (overdueKm) reasons.push(`Over by ${fmtKm(-(kmRemaining as number))}`);\n      if (overdueTime) reasons.push(`${-(daysRemaining as number)} days overdue`);\n      if (!overdueKm && soonKm) reasons.push(`${fmtKm(kmRemaining as number)} left`);\n      if (!overdueTime && soonTime) reasons.push(`due in ${daysRemaining} days`);\n      if (!overdueKm && !overdueTime && !soonKm && !soonTime && soonProjected) {\n        reasons.push(`~${daysBetween(today, projectedDueDate as string)} days at current usage`);\n      }\n\n      if (overdueKm || overdueTime) status = \"overdue\";\n      else if (soonKm || soonTime || soonProjected) status = \"due_soon\";\n      else status = \"ok\";\n    }\n\n    return {\n      service_type_id: st.id,\n      name: st.name,\n      category: st.category,\n      enabled: st.enabled === 1,\n      last_done_km: last?.odometer_km ?? null,\n      last_done_date: last ? dateOnly(last.performed_at) : null,\n      next_due_km: nextDueKm,\n      next_due_date: nextDueDate,\n      km_remaining: kmRemaining,\n      days_remaining: daysRemaining,\n      projected_due_date: projectedDueDate,\n      status,\n      reason: reasons.join(\" · \"),\n    };\n  });\n\n  // Sort: overdue first, then due_soon, then ok, then unknown; within a group by urgency.\n  const rank: Record<DueStatus, number> = { overdue: 0, due_soon: 1, ok: 2, unknown: 3 };\n  out.sort((a, b) => {\n    if (rank[a.status] !== rank[b.status]) return rank[a.status] - rank[b.status];\n    const av = urgencyValue(a);\n    const bv = urgencyValue(b);\n    return av - bv;\n  });\n  return out;\n}\n\nfunction urgencyValue(d: DueInfo): number {\n  // Lower = more urgent. Combine remaining days and a km->days proxy.\n  const candidates: number[] = [];\n  if (d.days_remaining != null) candidates.push(d.days_remaining);\n  if (d.projected_due_date != null) {\n    candidates.push(daysBetween(todayISO(), d.projected_due_date));\n  }\n  if (candidates.length === 0) return Number.MAX_SAFE_INTEGER;\n  return Math.min(...candidates);\n}\n\n// ---- Documents & renewals ----\n\nexport const DOC_LEAD_DAYS = 30;\n\nexport function computeDocs(docs: DocItem[], leadDays = DOC_LEAD_DAYS): DocInfo[] {\n  const today = todayISO();\n  const out: DocInfo[] = docs.map((d) => {\n    let status: DocStatus = \"none\";\n    let daysRemaining: number | null = null;\n    if (d.expiry_date) {\n      daysRemaining = daysBetween(today, d.expiry_date);\n      if (daysRemaining < 0) status = \"expired\";\n      else if (daysRemaining <= leadDays) status = \"expiring_soon\";\n      else status = \"ok\";\n    }\n    return { ...d, status, days_remaining: daysRemaining };\n  });\n  const rank: Record<DocStatus, number> = { expired: 0, expiring_soon: 1, ok: 2, none: 3 };\n  out.sort((a, b) => {\n    if (rank[a.status] !== rank[b.status]) return rank[a.status] - rank[b.status];\n    const av = a.days_remaining ?? Number.MAX_SAFE_INTEGER;\n    const bv = b.days_remaining ?? Number.MAX_SAFE_INTEGER;\n    return av - bv;\n  });\n  return out;\n}\n",[],[422,226],"f2338dbf-94f7-4ae3-b577-d2856ef37a5e","68f15d24-7f0c-11f1-8163-1607ee4eb77e",74,["D",1783986111698],"import { email } from \"https://esm.town/v/std/email\";\nimport {\n  getDocuments,\n  getRecords,\n  getServiceTypes,\n  getSettings,\n  getVehicle,\n  ready,\n  sqlite,\n} from \"./db.ts\";\nimport { computeDocs, computeDue, estimateKmPerDay } from \"./schedule.ts\";\nimport type { DueInfo } from \"../shared/types.ts\";\n\nconst THROTTLE_DAYS = 7;\nconst APP_URL = \"https://joshuaballesta--0fdb16767f0c11f18c451607ee4eb77e.web.val.run\";\n\nfunction fmtDate(s: string | null): string {\n  return s ? s : \"—\";\n}\n\nfunction lineFor(d: DueInfo): string {\n  const bits: string[] = [];\n  if (d.next_due_km != null) bits.push(`at ${Math.round(d.next_due_km).toLocaleString(\"en-US\")} km`);\n  if (d.next_due_date != null) bits.push(`by ${d.next_due_date}`);\n  const when = bits.length ? ` — due ${bits.join(\" / \")}` : \"\";\n  const reason = d.reason ? ` (${d.reason})` : \"\";\n  return `${d.name}${when}${reason}`;\n}\n\nexport interface ReminderResult {\n  sent: boolean;\n  reason: string;\n  included: string[];\n}\n\n// Compute due items, filter to actionable + un-throttled ones, email a digest,\n// and record last_reminder_sent_at. Safe to call from cron or a manual trigger.\nexport async function runReminders(force = false): Promise<ReminderResult> {\n  await ready();\n  const [vehicle, settings, serviceTypes, records] = await Promise.all([\n    getVehicle(),\n    getSettings(),\n    getServiceTypes(),\n    getRecords(),\n  ]);\n\n  const readingsRes = await sqlite.execute(\n    \"SELECT km, recorded_at FROM odometer_readings ORDER BY recorded_at\",\n  );\n  const readings = readingsRes.rows.map((r) => ({\n    km: Number(r.km),\n    recorded_at: String(r.recorded_at),\n  }));\n  const kmPerDay = estimateKmPerDay(vehicle, readings);\n\n  const due = computeDue(vehicle, settings, serviceTypes, records, kmPerDay);\n  const byId = new Map(serviceTypes.map((s) => [s.id, s]));\n\n  const now = Date.now();\n  const actionable = due.filter((d) => {\n    if (!d.enabled) return false;\n    if (d.status !== \"overdue\" && d.status !== \"due_soon\") return false;\n    if (force) return true;\n    const st = byId.get(d.service_type_id);\n    const last = st?.last_reminder_sent_at;\n    if (!last) return true;\n    const ageDays = (now - new Date(last).getTime()) / (24 * 60 * 60 * 1000);\n    return ageDays >= THROTTLE_DAYS;\n  });\n\n  const docs = computeDocs(await getDocuments());\n  const actionableDocs = docs.filter((d) => {\n    if (d.status !== \"expired\" && d.status !== \"expiring_soon\") return false;\n    if (force) return true;\n    if (!d.last_reminder_sent_at) return true;\n    const ageDays = (now - new Date(d.last_reminder_sent_at).getTime()) / (24 * 60 * 60 * 1000);\n    return ageDays >= THROTTLE_DAYS;\n  });\n\n  if (actionable.length === 0 && actionableDocs.length === 0) {\n    return { sent: false, reason: \"Nothing due (or all recently reminded)\", included: [] };\n  }\n\n  const overdue = actionable.filter((d) => d.status === \"overdue\");\n  const soon = actionable.filter((d) => d.status === \"due_soon\");\n\n  const currencyKm = `${Math.round(vehicle.current_odometer_km).toLocaleString(\"en-US\")} km`;\n  const section = (title: string, items: DueInfo[]) =>\n    items.length\n      ? `\\n${title}\\n` + items.map((d) => `  • ${lineFor(d)}`).join(\"\\n\")\n      : \"\";\n\n  const text =\n    `Maintenance due for your ${vehicle.year ?? \"\"} ${vehicle.make} ${vehicle.model} (${vehicle.name}).\\n` +\n    `Current odometer: ${currencyKm}.\\n` +\n    section(\"OVERDUE\", overdue) +\n    section(\"DUE SOON\", soon) +\n    (actionableDocs.length\n      ? \"\\nRENEWALS\\n\" +\n        actionableDocs\n          .map((d) => `  • ${d.name || d.doc_type} — ${d.status === \"expired\" ? \"EXPIRED\" : \"expires\"} ${d.expiry_date ?? \"\"}`)\n          .join(\"\\n\")\n      : \"\") +\n    `\\n\\nOpen your tracker to log or renew these.`;\n\n  const htmlItem = (d: DueInfo, color: string) =>\n    `<li style=\"margin:6px 0\"><strong style=\"color:${color}\">${d.name}</strong>` +\n    `<div style=\"color:#555;font-size:13px\">` +\n    (d.next_due_km != null ? `Due at ${Math.round(d.next_due_km).toLocaleString(\"en-US\")} km. ` : \"\") +\n    (d.next_due_date != null ? `Due by ${fmtDate(d.next_due_date)}. ` : \"\") +\n    (d.reason ? `${d.reason}.` : \"\") +\n    `</div></li>`;\n\n  const html =\n    `<div style=\"font-family:system-ui,-apple-system,sans-serif;max-width:520px\">` +\n    `<h2 style=\"margin:0 0 4px\">🏍️ Maintenance due</h2>` +\n    `<p style=\"color:#555;margin:0 0 12px\">${vehicle.year ?? \"\"} ${vehicle.make} ${vehicle.model} · odometer ${currencyKm}</p>` +\n    (overdue.length\n      ? `<h3 style=\"color:#c0392b;margin:12px 0 4px\">Overdue</h3><ul style=\"padding-left:18px;margin:0\">${overdue.map((d) => htmlItem(d, \"#c0392b\")).join(\"\")}</ul>`\n      : \"\") +\n    (soon.length\n      ? `<h3 style=\"color:#b7791f;margin:12px 0 4px\">Due soon</h3><ul style=\"padding-left:18px;margin:0\">${soon.map((d) => htmlItem(d, \"#b7791f\")).join(\"\")}</ul>`\n      : \"\") +\n    (actionableDocs.length\n      ? `<h3 style=\"color:#2563eb;margin:12px 0 4px\">Document renewals</h3><ul style=\"padding-left:18px;margin:0\">${\n        actionableDocs.map((d) =>\n          `<li style=\"margin:6px 0\"><strong style=\"color:${d.status === \"expired\" ? \"#c0392b\" : \"#b7791f\"}\">${d.name || d.doc_type}</strong><div style=\"color:#555;font-size:13px\">${d.doc_type}${d.expiry_date ? ` · ${d.status === \"expired\" ? \"expired\" : \"expires\"} ${d.expiry_date}` : \"\"}</div></li>`\n        ).join(\"\")\n      }</ul>`\n      : \"\") +\n    `<p style=\"margin-top:16px\"><a href=\"${APP_URL}\">Open your maintenance tracker →</a></p>` +\n    `</div>`;\n\n  const totalCount = actionable.length + actionableDocs.length;\n  await email({\n    subject: `🏍️ ADV160: ${totalCount} item${totalCount === 1 ? \"\" : \"s\"} need attention`,\n    text,\n    html,\n  });\n\n  // Record that we reminded about these service types.\n  const nowIso = new Date().toISOString();\n  const updates = [\n    ...actionable.map((d) => ({\n      sql: \"UPDATE service_types SET last_reminder_sent_at = ? WHERE id = ?\",\n      args: [nowIso, d.service_type_id],\n    })),\n    ...actionableDocs.map((d) => ({\n      sql: \"UPDATE documents SET last_reminder_sent_at = ? WHERE id = ?\",\n      args: [nowIso, d.id],\n    })),\n  ];\n  if (updates.length) await sqlite.batch(updates);\n\n  const included = [\n    ...actionable.map((d) => d.name),\n    ...actionableDocs.map((d) => d.name || d.doc_type),\n  ];\n  return { sent: true, reason: `Emailed ${included.length} item(s)`, included };\n}\n\n",[],[422,64],"4fbe2367-c276-426a-8023-ca726fcb0770","genicons.ts","c15a88bc-7f54-11f1-a763-1607ee4eb77e",157,["D",1784601391479],3,"// One-time generator: rasterizes the app icon to PNGs (192 & 512) and stores them\n// in val blob storage. Re-run with run_file if the icon design changes.\nimport { initWasm, Resvg } from \"npm:@resvg/resvg-wasm@2.6.2\";\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\";\n\n// Full-bleed version of frontend/icon.svg (no rounded corners — the OS masks the shape).\nconst SVG = `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n  <defs>\n    <linearGradient id=\"bg\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">\n      <stop offset=\"0\" stop-color=\"#ec0b2f\"/>\n      <stop offset=\"1\" stop-color=\"#a90020\"/>\n    </linearGradient>\n    <radialGradient id=\"glow\" cx=\"0.3\" cy=\"0.24\" r=\"0.9\">\n      <stop offset=\"0\" stop-color=\"#ffffff\" stop-opacity=\"0.2\"/>\n      <stop offset=\"0.55\" stop-color=\"#ffffff\" stop-opacity=\"0\"/>\n    </radialGradient>\n  </defs>\n  <rect width=\"512\" height=\"512\" fill=\"url(#bg)\"/>\n  <rect width=\"512\" height=\"512\" fill=\"url(#glow)\"/>\n  <g transform=\"translate(122 122) scale(11.17)\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <path d=\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76Z\"/>\n  </g>\n</svg>`;\n\nawait initWasm(fetch(\"https://unpkg.com/@resvg/resvg-wasm@2.6.2/index_bg.wasm\"));\n\nfor (const size of [192, 512]) {\n  const resvg = new Resvg(SVG, { fitTo: { mode: \"width\", value: size } });\n  const png = resvg.render().asPng();\n  await blob.set(`icon-${size}.png`, png);\n  console.log(`stored icon-${size}.png (${png.length} bytes)`);\n}\nconsole.log(\"done\");\n",[],[422,438],"67afc54c-fadb-4f58-831a-b6b6176c23d3","db.ts","38b648ae-7f0c-11f1-93a5-1607ee4eb77e",64,["D",1783985930346],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { DEFAULT_SERVICES } from \"../shared/schedule.ts\";\nimport type {\n  DocItem,\n  FuelLog,\n  ServiceRecord,\n  ServiceType,\n  Settings,\n  Vehicle,\n} from \"../shared/types.ts\";\n\n// ---- Schema + seed (idempotent, memoized so it runs once per warm instance) ----\n\nlet readyPromise: Promise<void> | null = null;\n\nexport function ready(): Promise<void> {\n  if (!readyPromise) readyPromise = init();\n  return readyPromise;\n}\n\nfunction today(): string {\n  return new Date().toISOString().slice(0, 10);\n}\n\nasync function init(): Promise<void> {\n  await sqlite.batch([\n    `CREATE TABLE IF NOT EXISTS vehicle (\n      id INTEGER PRIMARY KEY,\n      name TEXT NOT NULL DEFAULT '',\n      make TEXT NOT NULL DEFAULT '',\n      model TEXT NOT NULL DEFAULT '',\n      year INTEGER,\n      plate TEXT NOT NULL DEFAULT '',\n      color TEXT NOT NULL DEFAULT '',\n      baseline_odometer_km INTEGER NOT NULL DEFAULT 0,\n      baseline_date TEXT NOT NULL,\n      current_odometer_km INTEGER NOT NULL DEFAULT 0,\n      odometer_updated_at TEXT NOT NULL\n    )`,\n    `CREATE TABLE IF NOT EXISTS settings (\n      id INTEGER PRIMARY KEY,\n      reminder_lead_days INTEGER NOT NULL DEFAULT 7,\n      reminder_lead_km INTEGER NOT NULL DEFAULT 200,\n      currency TEXT NOT NULL DEFAULT 'PHP',\n      timezone TEXT NOT NULL DEFAULT 'Asia/Manila',\n      email TEXT NOT NULL DEFAULT ''\n    )`,\n    `CREATE TABLE IF NOT EXISTS odometer_readings (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      km INTEGER NOT NULL,\n      recorded_at TEXT NOT NULL\n    )`,\n    `CREATE TABLE IF NOT EXISTS service_types (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      service_key TEXT,\n      name TEXT NOT NULL,\n      category TEXT NOT NULL DEFAULT 'Other',\n      interval_km INTEGER,\n      interval_months INTEGER,\n      first_km INTEGER,\n      first_months INTEGER,\n      enabled INTEGER NOT NULL DEFAULT 1,\n      note TEXT NOT NULL DEFAULT '',\n      last_reminder_sent_at TEXT\n    )`,\n    `CREATE TABLE IF NOT EXISTS service_records (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      service_type_id INTEGER,\n      name TEXT NOT NULL,\n      performed_at TEXT NOT NULL,\n      odometer_km INTEGER,\n      cost REAL,\n      notes TEXT NOT NULL DEFAULT '',\n      photo_keys TEXT NOT NULL DEFAULT '[]',\n      created_at TEXT NOT NULL\n    )`,\n    `CREATE TABLE IF NOT EXISTS fuel_logs (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      filled_at TEXT NOT NULL,\n      odometer_km INTEGER NOT NULL,\n      liters REAL NOT NULL,\n      price_per_liter REAL,\n      total_cost REAL,\n      is_full_tank INTEGER NOT NULL DEFAULT 1,\n      notes TEXT NOT NULL DEFAULT '',\n      created_at TEXT NOT NULL\n    )`,\n    `CREATE TABLE IF NOT EXISTS documents (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      doc_type TEXT NOT NULL DEFAULT 'Other',\n      name TEXT NOT NULL DEFAULT '',\n      reference TEXT NOT NULL DEFAULT '',\n      issue_date TEXT,\n      expiry_date TEXT,\n      notes TEXT NOT NULL DEFAULT '',\n      file_keys TEXT NOT NULL DEFAULT '[]',\n      last_reminder_sent_at TEXT,\n      created_at TEXT NOT NULL\n    )`,\n  ]);\n\n  // Seed the single vehicle row.\n  const v = await sqlite.execute(\"SELECT COUNT(*) AS n FROM vehicle\");\n  if (Number(v.rows[0].n) === 0) {\n    await sqlite.execute({\n      sql: `INSERT INTO vehicle\n        (id, name, make, model, year, plate, color, baseline_odometer_km, baseline_date, current_odometer_km, odometer_updated_at)\n        VALUES (1, ?, 'Honda', 'ADV160', 2026, '', 'Pearl White', 0, ?, 0, ?)`,\n      args: [\"My ADV160\", today(), new Date().toISOString()],\n    });\n  }\n\n  // Seed settings.\n  const s = await sqlite.execute(\"SELECT COUNT(*) AS n FROM settings\");\n  if (Number(s.rows[0].n) === 0) {\n    await sqlite.execute(\n      \"INSERT INTO settings (id, reminder_lead_days, reminder_lead_km, currency, timezone, email) VALUES (1, 7, 200, 'PHP', 'Asia/Manila', '')\",\n    );\n  }\n\n  // Seed the ADV160 service schedule.\n  const st = await sqlite.execute(\"SELECT COUNT(*) AS n FROM service_types\");\n  if (Number(st.rows[0].n) === 0) {\n    await sqlite.batch(\n      DEFAULT_SERVICES.map((d) => ({\n        sql: `INSERT INTO service_types\n          (service_key, name, category, interval_km, interval_months, first_km, first_months, enabled, note)\n          VALUES (?, ?, ?, ?, ?, ?, ?, 1, ?)`,\n        args: [\n          d.key,\n          d.name,\n          d.category,\n          d.interval_km,\n          d.interval_months,\n          d.first_km,\n          d.first_months,\n          d.note,\n        ],\n      })),\n    );\n  }\n}\n\n// ---- Row mappers ----\n\nfunction num(x: unknown): number {\n  return x == null ? 0 : Number(x);\n}\nfunction maybeNum(x: unknown): number | null {\n  return x == null ? null : Number(x);\n}\nfunction str(x: unknown): string {\n  return x == null ? \"\" : String(x);\n}\n\nexport function mapVehicle(r: Record<string, unknown>): Vehicle {\n  return {\n    id: num(r.id),\n    name: str(r.name),\n    make: str(r.make),\n    model: str(r.model),\n    year: maybeNum(r.year),\n    plate: str(r.plate),\n    color: str(r.color),\n    baseline_odometer_km: num(r.baseline_odometer_km),\n    baseline_date: str(r.baseline_date),\n    current_odometer_km: num(r.current_odometer_km),\n    odometer_updated_at: str(r.odometer_updated_at),\n  };\n}\n\nexport function mapSettings(r: Record<string, unknown>): Settings {\n  return {\n    id: num(r.id),\n    reminder_lead_days: num(r.reminder_lead_days),\n    reminder_lead_km: num(r.reminder_lead_km),\n    currency: str(r.currency),\n    timezone: str(r.timezone),\n    email: str(r.email),\n  };\n}\n\nexport function mapServiceType(r: Record<string, unknown>): ServiceType {\n  return {\n    id: num(r.id),\n    service_key: r.service_key == null ? null : str(r.service_key),\n    name: str(r.name),\n    category: str(r.category),\n    interval_km: maybeNum(r.interval_km),\n    interval_months: maybeNum(r.interval_months),\n    first_km: maybeNum(r.first_km),\n    first_months: maybeNum(r.first_months),\n    enabled: num(r.enabled),\n    note: str(r.note),\n    last_reminder_sent_at: r.last_reminder_sent_at == null ? null : str(r.last_reminder_sent_at),\n  };\n}\n\nexport function mapRecord(r: Record<string, unknown>): ServiceRecord {\n  let photos: string[] = [];\n  try {\n    photos = JSON.parse(str(r.photo_keys) || \"[]\");\n  } catch (_) {\n    photos = [];\n  }\n  return {\n    id: num(r.id),\n    service_type_id: maybeNum(r.service_type_id),\n    name: str(r.name),\n    performed_at: str(r.performed_at),\n    odometer_km: maybeNum(r.odometer_km),\n    cost: maybeNum(r.cost),\n    notes: str(r.notes),\n    photo_keys: photos,\n    created_at: str(r.created_at),\n  };\n}\n\nexport function mapFuel(r: Record<string, unknown>): FuelLog {\n  return {\n    id: num(r.id),\n    filled_at: str(r.filled_at),\n    odometer_km: num(r.odometer_km),\n    liters: num(r.liters),\n    price_per_liter: maybeNum(r.price_per_liter),\n    total_cost: maybeNum(r.total_cost),\n    is_full_tank: num(r.is_full_tank),\n    notes: str(r.notes),\n    created_at: str(r.created_at),\n  };\n}\n\n// ---- High-level reads used by both the API and the cron job ----\n\nexport async function getVehicle(): Promise<Vehicle> {\n  await ready();\n  const r = await sqlite.execute(\"SELECT * FROM vehicle WHERE id = 1\");\n  return mapVehicle(r.rows[0]);\n}\n\nexport async function getSettings(): Promise<Settings> {\n  await ready();\n  const r = await sqlite.execute(\"SELECT * FROM settings WHERE id = 1\");\n  return mapSettings(r.rows[0]);\n}\n\nexport async function getServiceTypes(): Promise<ServiceType[]> {\n  await ready();\n  const r = await sqlite.execute(\n    \"SELECT * FROM service_types ORDER BY category, name\",\n  );\n  return r.rows.map(mapServiceType);\n}\n\nexport async function getRecords(): Promise<ServiceRecord[]> {\n  await ready();\n  const r = await sqlite.execute(\n    \"SELECT * FROM service_records ORDER BY performed_at DESC, id DESC\",\n  );\n  return r.rows.map(mapRecord);\n}\n\nexport async function getFuelLogs(): Promise<FuelLog[]> {\n  await ready();\n  const r = await sqlite.execute(\n    \"SELECT * FROM fuel_logs ORDER BY odometer_km DESC, id DESC\",\n  );\n  return r.rows.map(mapFuel);\n}\n\nexport function mapDocument(r: Record<string, unknown>): DocItem {\n  let files: string[] = [];\n  try {\n    files = JSON.parse(str(r.file_keys) || \"[]\");\n  } catch (_) {\n    files = [];\n  }\n  return {\n    id: num(r.id),\n    doc_type: str(r.doc_type),\n    name: str(r.name),\n    reference: str(r.reference),\n    issue_date: r.issue_date == null ? null : str(r.issue_date),\n    expiry_date: r.expiry_date == null ? null : str(r.expiry_date),\n    notes: str(r.notes),\n    file_keys: files,\n    last_reminder_sent_at: r.last_reminder_sent_at == null ? null : str(r.last_reminder_sent_at),\n    created_at: str(r.created_at),\n  };\n}\n\nexport async function getDocuments(): Promise<DocItem[]> {\n  await ready();\n  const r = await sqlite.execute(\n    \"SELECT * FROM documents ORDER BY expiry_date IS NULL, expiry_date\",\n  );\n  return r.rows.map(mapDocument);\n}\n\nexport { sqlite };\n",[],[422,447],"dc27a954-22e0-47fc-b8ad-3b4d86ada28d",["D",1783982589287],[171,172,173,174,175],[422],["D",1783982520711],["D",1789576313835],{"_11":12,"_125":70},{"_11":12,"_120":121,"_69":70,"_31":68,"_122":123,"_124":30},{"_39":111,"_13":16,"_33":36,"_112":74,"_113":-5,"_114":-5,"_115":-5,"_116":-5,"_117":-5,"_118":14,"_119":12},"ctx",{"_52":-5,"_144":496,"_497":498,"_499":500,"_501":30,"_502":30,"_503":30,"_504":24,"_505":-5,"_506":-7,"_507":-7,"_508":26,"_509":30,"_510":30,"_511":-5,"_512":30,"_513":30,"_514":30,"_515":-5},"ENV",{"_467":468,"_469":470,"_471":16,"_472":473,"_474":475,"_476":477,"_478":479,"_480":481,"_482":483,"_484":485,"_486":487,"_488":489,"_490":491,"_492":493,"_494":495},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","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>

History · cron