[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_322":323,"_324":325},"routes/_app.x.$handle.$name",{"_109":108,"_38":50,"_118":95,"_33":119,"_13":14,"_120":-5,"_11":121,"_122":123,"_124":125,"_126":127,"_128":129,"_26":-5,"_130":131,"_132":133,"_134":31,"_135":136,"_137":65,"_138":-5,"_139":-5,"_140":141},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_48":49,"_38":50,"_43":51,"_52":-5,"_53":31,"_54":55,"_56":55,"_57":58,"_59":60,"_19":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":73,"_74":75,"_76":77,"_78":-5,"_79":80,"_81":80,"_82":83,"_84":83,"_85":83,"_86":80,"_87":80,"_88":89,"_90":91,"_92":93,"_94":31},"version",15,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","5309cf6c-8fa9-4b3d-931b-a60143ec0fcb","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":34,"_39":26,"_40":42,"_43":44,"_45":14,"_46":47,"_30":31},"previous",{"_36":37,"_38":34,"_39":26,"_40":41},"deleted",false,"deletedHere","path","README.md","latestPath","fileId","019f52f4-2036-751f-8749-2951064acbc7","name","fileType","content","# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| **[`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter)** *(you're here)* | Client-side React SPA with a Hono API backend. |\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"index.html\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend + API routes)\nfrontend/\n index.html ← HTML shell (loads Twind + React)\n index.tsx ← React entrypoint (mounts )\n favicon.svg ← App icon\n components/\n App.tsx ← Root component (layout + view source link)\n Counter.tsx ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n frontend and any API routes you add.\n2. **`frontend/index.html`** loads Twind and the React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n a full-stack example with database, queries, and shared types\n","# 📦 Order Tracker\n\nTrack online shopping orders, shipping updates, and arrival dates in a calendar — with automatic package confirmation emails.\n\n## Features\n\n- **📊 Calendar view** — Orders plotted on a monthly calendar by estimated arrival date\n- **📋 Order list** — Filterable list with status badges, tracking numbers, and order totals\n- **🔍 Gmail scanning** — Automatically scans your Gmail for order confirmations, shipping updates, and delivery notifications every 15 minutes\n- **✅ Package confirmation** — Sends \"Did you receive this?\" emails when packages are due, with a one-click confirm link\n- **📈 Stats dashboard** — Track ordered, shipped, delivered, and confirmed counts\n\n## Architecture\n\n```mermaid\ngraph LR\n Gmail[\"Gmail (IMAP)\"] -->|scan every 15min| Scan[\"scan-gmail.ts
(interval)\"]\n Scan -->|parse & store| DB[\"SQLite
(orders table)\"]\n Scan -->|if due| Email[\"send-confirmation-email.ts
(Gmail SMTP)\"]\n Email -->|confirm link| Browser\n Browser -->|dashboard| Hono[\"index.ts
(HTTP + API)\"]\n Hono -->|serves| React[\"React Dashboard
(calendar + orders)\"]\n Hono -->|queries| DB\n```\n\n## Setup\n\n### 1. Gmail App Password\n\n1. Go to [Google Account Security](https://myaccount.google.com/security)\n2. Enable **2-Step Verification** (required)\n3. Go to [App Passwords](https://myaccount.google.com/apppasswords)\n4. Create a new app password for \"Mail\" → \"Other\" (name it \"Val Town\")\n5. Copy the 16-character password\n\n### 2. Set Environment Variables\n\n👉 Add GMAIL_USER here: https://www.val.town/x/adoran/order-tracker/environment-variables?key=GMAIL_USER\n\n👉 Add GMAIL_PASS here: https://www.val.town/x/adoran/order-tracker/environment-variables?key=GMAIL_PASS\n\n- `GMAIL_USER` — Your full Gmail address (e.g. `you@gmail.com`)\n- `GMAIL_PASS` — The app password from step 1\n\n### 3. Start Tracking\n\nVisit the dashboard and click **🔍 Scan Now** to do an initial scan of your last 7 days of email. The automatic interval will then scan every 15 minutes going forward.\n\n## How It Works\n\n1. **Gmail IMAP scan** (`gmail.ts`) — Connects via IMAP, searches for emails with order/shipping/tracking-related subjects\n2. **Email parsing** — Extracts tracking numbers (UPS, FedEx, USPS, DHL, Amazon), carrier, retailer, estimated arrival dates, and order totals using regex patterns\n3. **SQLite storage** (`db.ts`) — Deduplicates by message ID, updates status progression (ordered → shipped → delivered → confirmed)\n4. **Confirmation emails** (`send-confirmation-email.ts`) — When a package's estimated arrival date has passed, sends an email via Gmail SMTP with a one-click confirm link\n5. **Dashboard** — React SPA with calendar grid and filterable order list\n\n## File Structure\n\n```\nindex.ts ← Hono server (API + serves frontend)\ndb.ts ← SQLite schema & query helpers\ngmail.ts ← Gmail IMAP scanning & email parsing\nscan-gmail.ts ← Interval job (every 15 min)\nsend-confirmation-email.ts ← Confirmation email sender (Gmail SMTP)\nfrontend/\n index.html ← HTML shell (Twind + React)\n index.tsx ← React entrypoint\n components/\n App.tsx ← Root component (state, data fetching)\n Header.tsx ← Stats bar + Gmail status + view toggle\n Calendar.tsx ← Monthly calendar grid with order details\n OrderList.tsx ← Filterable order cards with confirm buttons\n```\n\n## API Routes\n\n| Method | Path | Description |\n|--------|------|-------------|\n| GET | `/` | Dashboard (React SPA) |\n| GET | `/api/orders` | All orders |\n| GET | `/api/orders/:id` | Single order |\n| POST | `/api/orders/:id/confirm` | Confirm package received |\n| GET | `/api/orders/:id/confirm` | Confirm via email link (redirects to dashboard) |\n| GET | `/api/stats` | Order counts by status |\n| GET | `/api/calendar` | Orders grouped by date |\n| GET | `/api/gmail/status` | Gmail connection status & last scan |\n| POST | `/api/scan` | Manually trigger Gmail scan |\n","createdAt",["D",1783803389109],"branchVersion","branchId","31d32e2d-7e5f-4d55-b267-dc6b8c48ab98","id","b59279da-d98a-4e6c-8850-d4254db64611","order-tracker",["D",1783803158516],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Track orders, shipping, arrival dates in a calendar","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789567199&sig=be2da3e537d6269cefeedcb88843ac66f83d7a4623f50e71633938e44918ec3c","bf338674-fda8-4a0e-8fad-7b37cb5cc983","pinnedFileId","019f52f4-2036-751f-8749-2fa9c3c7813a","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019f52e9-adf8-77fb-83e8-d6c15967a23c","tursoName","b59279dad98a4e6c8850d4254db64611","tursoHostname","b59279dad98a4e6c8850d4254db64611-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789526460011],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_109":108,"_117":113},"org",{"_109":108,"_110":111,"_112":113,"_19":61,"_114":115,"_116":31},"branch",{"_13":14,"_38":95,"_48":47,"_96":49,"_97":98,"_99":100,"_101":55,"_102":103,"_104":105,"_106":50,"_107":108},"isOwned","main","projectId","forkedBranchId","961078ea-f528-11ef-aa68-569c3dd06744","forkedBranchVersion",89,"forkedProjectPrivacy","forkedProjectId","96102714-f528-11ef-aa68-569c3dd06744","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","adoran","handle","displayName","Adora N","avatar","https://lh3.googleusercontent.com/a/ACg8ocLX491kPKV6up_39D9RfH3dFN86Q-HlPoXrfwv86VqwOhgDlQ=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_48":49,"_38":50,"_43":317,"_52":-5,"_53":31,"_54":55,"_56":55,"_57":58,"_59":60,"_19":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":73,"_74":75,"_76":318,"_78":-5,"_79":80,"_81":80,"_82":83,"_84":83,"_85":83,"_86":80,"_87":80,"_88":319,"_90":320,"_92":321,"_94":31},"tree",[220,229,230,231,232,233,234],"files",[220,221,222,223,224,225,226,227,228,229,230,231,232,233,234],"counts",{"_210":69,"_211":167,"_212":69,"_213":214,"_215":216},"contents",[153,154,155,156,157,158,159],"upstreamProject",{"_48":103,"_38":149,"_57":150,"_59":60,"_54":55,"_88":151},"upstreamBranch",{"_48":98,"_43":142,"_143":144,"_38":95,"_96":103,"_13":145,"_97":-5,"_99":-5,"_146":147,"_52":-5,"_94":31,"_54":55,"_107":148,"_70":105,"_106":149},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],"updatedAt",["D",1785420707976],91,"lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","templates","react-hono-starter","Starter template with client-side React & Hono server",{"_109":148,"_117":152},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789567199&sig=d8af4f1d5d6ef07a152f6225f86a0227f22fe92650a7f9572d94a5f64256bba9",{"_48":204,"_38":205,"_36":206,"_163":-5,"_46":47,"_45":167,"_165":65,"_43":207,"_13":69,"_39":208,"_40":-5,"_30":31,"_170":-5,"_33":209},{"_48":201,"_38":34,"_36":37,"_163":-5,"_46":47,"_45":14,"_165":65,"_43":202,"_13":167,"_39":26,"_40":42,"_30":31,"_170":-5,"_33":203},{"_48":194,"_38":195,"_36":196,"_163":-5,"_46":47,"_45":197,"_165":65,"_43":198,"_13":69,"_39":168,"_40":199,"_30":31,"_170":-5,"_33":200},{"_48":187,"_38":188,"_36":189,"_163":-5,"_46":47,"_45":190,"_165":65,"_43":191,"_13":69,"_39":168,"_40":192,"_30":31,"_170":-5,"_33":193},{"_48":180,"_38":181,"_36":63,"_163":-5,"_46":47,"_45":182,"_165":65,"_43":183,"_13":167,"_39":184,"_40":185,"_30":31,"_170":-5,"_33":186},{"_48":172,"_38":173,"_36":174,"_163":-5,"_46":47,"_45":175,"_165":65,"_43":176,"_13":167,"_39":177,"_40":178,"_30":31,"_170":-5,"_33":179},{"_48":160,"_38":161,"_36":162,"_163":-5,"_46":47,"_45":164,"_165":65,"_43":166,"_13":167,"_39":168,"_40":169,"_30":31,"_170":-5,"_33":171},"d7b13da3-e59a-4621-9476-5777c8132213","send-confirmation-email.ts","a504a22e-7d6a-11f1-946e-1607ee4eb77e","parentId",7,"latest",["D",1783803269182],1,"script","import nodemailer from \"npm:nodemailer\";\n\nfunction getTransporter() {\n const gmailUser = Deno.env.get(\"GMAIL_USER\");\n const gmailPass = Deno.env.get(\"GMAIL_PASS\");\n\n if (!gmailUser || !gmailPass) {\n throw new Error(\"GMAIL_USER and GMAIL_PASS environment variables are required\");\n }\n\n return nodemailer.createTransport({\n service: \"gmail\",\n auth: { user: gmailUser, pass: gmailPass },\n });\n}\n\nexport async function sendConfirmationEmails(orders: any[], baseUrl: string) {\n const gmailUser = Deno.env.get(\"GMAIL_USER\");\n if (!gmailUser) return;\n\n const transporter = getTransporter();\n\n for (const order of orders) {\n try {\n const confirmUrl = `${baseUrl}/api/orders/${order.id}/confirm`;\n\n await transporter.sendMail({\n from: gmailUser,\n to: gmailUser,\n subject: `📦 Did you receive your ${order.retailer} package?`,\n text: `Hi there!\n\nWe noticed your package from ${order.retailer} should have arrived.\n\nOrder: ${order.subject}\n${order.tracking_number ? `Tracking: ${order.carrier} ${order.tracking_number}` : \"\"}\n${order.estimated_arrival ? `Estimated arrival: ${order.estimated_arrival}` : \"\"}\n\nDid you receive this package?\n✅ Yes, I got it: ${confirmUrl}\n\nIf you haven't received it yet, you can ignore this email — we'll check again later.\n\n— Order Tracker`,\n html: `

📦 Package Confirmation

We noticed your package from ${order.retailer} should have arrived.

\n \n \n ${order.tracking_number ? `` : \"\"}\n ${order.estimated_arrival ? `` : \"\"}\n

Order:	${order.subject}
Tracking:	${order.carrier} ${order.tracking_number}
Est. arrival:	${order.estimated_arrival}

Did you receive this package?

\n ✅ Yes, I got it!\n

If you haven't received it yet, you can ignore this email.

— Order Tracker

`,\n });\n\n console.log(` 📧 Sent confirmation email for order #${order.id} (${order.retailer})`);\n } catch (error) {\n console.error(` ❌ Failed to send email for order #${order.id}:`, error);\n }\n }\n}\n","label",[161],"79d3b1c2-04c6-49fb-aa02-0d52323cb4bc","scan-gmail.ts","a4ff0bde-7d6a-11f1-8d57-1607ee4eb77e",6,["D",1783803269182],"interval","import { scanGmail } from \"./gmail.ts\";\nimport { getOrdersForConfirmation } from \"./db.ts\";\nimport { sendConfirmationEmails } from \"./send-confirmation-email.ts\";\nimport { httpEndpoint } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport default async function (interval: Interval) {\n console.log(`🔄 Gmail scan started at ${new Date().toISOString()}`);\n console.log(` Last run: ${interval.lastRunAt ?? \"first run\"}`);\n\n // Step 1: Scan Gmail for new order/shipping emails\n const scanResult = await scanGmail();\n console.log(` Scan result:`, scanResult);\n\n // Step 2: Send confirmation emails for packages that should have arrived\n if (scanResult.error === null) {\n const pendingOrders = await getOrdersForConfirmation();\n if (pendingOrders.length > 0) {\n console.log(`📬 Sending confirmation emails for ${pendingOrders.length} packages`);\n const baseUrl = httpEndpoint(\"./index.ts\");\n await sendConfirmationEmails(pendingOrders, baseUrl);\n } else {\n console.log(\"✅ No packages pending confirmation\");\n }\n }\n\n console.log(`✅ Done at ${new Date().toISOString()}`);\n}\n",[173],"966ad398-d516-43fb-b5d6-bf0c138be87e","index.ts",8,["D",1783803282701],"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport {\n initDB,\n getAllOrders,\n getOrderById,\n confirmOrder,\n getStats,\n getScanState,\n} from \"./db.ts\";\nimport { scanGmail } from \"./gmail.ts\";\nimport { sendConfirmationEmails } from \"./send-confirmation-email.ts\";\n\nconst app = new Hono();\n\n// Initialize database on first request\nlet dbReady = false;\nasync function ensureDB() {\n if (!dbReady) {\n await initDB();\n dbReady = true;\n }\n}\n\n// ─── Frontend ──────────────────────────────────────────────\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// ─── API: Orders ──────────────────────────────────────────\napp.get(\"/api/orders\", async (c) => {\n await ensureDB();\n const orders = await getAllOrders();\n return c.json({ orders });\n});\n\napp.get(\"/api/orders/:id\", async (c) => {\n await ensureDB();\n const id = Number(c.req.param(\"id\"));\n const order = await getOrderById(id);\n if (!order) return c.json({ error: \"Order not found\" }, 404);\n return c.json({ order });\n});\n\napp.post(\"/api/orders/:id/confirm\", async (c) => {\n await ensureDB();\n const id = Number(c.req.param(\"id\"));\n const success = await confirmOrder(id);\n if (!success) return c.json({ error: \"Order not found\" }, 404);\n return c.json({ success: true, message: \"Package confirmed!\" });\n});\n\n// GET version for email link clicks (simple redirect to dashboard)\napp.get(\"/api/orders/:id/confirm\", async (c) => {\n await ensureDB();\n const id = Number(c.req.param(\"id\"));\n await confirmOrder(id);\n // Redirect to dashboard with success indicator\n return new Response(null, {\n status: 302,\n headers: { Location: \"/?confirmed=\" + id },\n });\n});\n\n// ─── API: Stats ───────────────────────────────────────────\napp.get(\"/api/stats\", async (c) => {\n await ensureDB();\n const stats = await getStats();\n return c.json(stats);\n});\n\n// ─── API: Calendar ────────────────────────────────────────\napp.get(\"/api/calendar\", async (c) => {\n await ensureDB();\n const orders = await getAllOrders();\n // Group orders by estimated_arrival date\n const calendar: Record = {};\n for (const order of orders) {\n const dateKey = order.estimated_arrival ?? order.email_date?.split(\"T\")[0] ?? \"unknown\";\n if (!calendar[dateKey]) calendar[dateKey] = [];\n calendar[dateKey].push({\n id: order.id,\n retailer: order.retailer,\n subject: order.subject,\n status: order.status,\n tracking_number: order.tracking_number,\n carrier: order.carrier,\n order_total: order.order_total,\n });\n }\n return c.json({ calendar });\n});\n\n// ─── API: Gmail Status ────────────────────────────────────\napp.get(\"/api/gmail/status\", async (c) => {\n await ensureDB();\n const hasCreds = !!Deno.env.get(\"GMAIL_USER\") && !!Deno.env.get(\"GMAIL_PASS\");\n const scanState = await getScanState();\n return c.json({\n connected: hasCreds,\n email: Deno.env.get(\"GMAIL_USER\") ?? null,\n lastScan: scanState?.last_scan_date ?? null,\n });\n});\n\n// ─── API: Manual Scan ─────────────────────────────────────\napp.post(\"/api/scan\", async (c) => {\n await ensureDB();\n const result = await scanGmail();\n\n // Also send confirmation emails if any pending\n if (result.error === null) {\n const { getOrdersForConfirmation } = await import(\"./db.ts\");\n const pending = await getOrdersForConfirmation();\n if (pending.length > 0) {\n const baseUrl = new URL(c.req.url).origin;\n await sendConfirmationEmails(pending, baseUrl);\n }\n }\n\n return c.json(result);\n});\n\n// ─── Error handling ───────────────────────────────────────\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n",[181],"be66b4da-33c3-472d-9ddc-18286bec8bb3","gmail.ts","99af356a-7d6a-11f1-9710-1607ee4eb77e",3,["D",1783803222305],"import { ImapFlow } from \"npm:imapflow\";\nimport { upsertOrder, getScanState, updateScanState } from \"./db.ts\";\n\n// Search keywords for different email types\nconst ORDER_KEYWORDS = [\"order confirmation\", \"your order\", \"order receipt\", \"purchase confirmation\", \"thank you for your order\", \"order placed\", \"invoice\"];\nconst SHIPPING_KEYWORDS = [\"shipped\", \"shipping update\", \"tracking\", \"dispatched\", \"on the way\", \"out for delivery\", \"in transit\"];\nconst DELIVERY_KEYWORDS = [\"delivered\", \"package arrived\", \"delivery confirmation\", \"has been delivered\"];\n\nconst CARRIER_PATTERNS: { carrier: string; pattern: RegExp }[] = [\n { carrier: \"UPS\", pattern: /\\b(1Z\\s?[A-Z0-9]{3}\\s?[A-Z0-9]{3}\\s?\\d{2}\\s?\\d{4}\\s?\\d{4})\\b/i },\n { carrier: \"FedEx\", pattern: /\\b(\\d{12}|\\d{15}|\\d{20})\\b/ },\n { carrier: \"USPS\", pattern: /\\b(\\d{20,22})\\b/ },\n { carrier: \"DHL\", pattern: /\\b(\\d{10})\\b/i },\n { carrier: \"Amazon\", pattern: /\\b(TBA\\d{12})\\b/i },\n];\n\nconst RETAILER_DOMAINS: Record = {\n \"amazon.com\": \"Amazon\",\n \"amazon.ca\": \"Amazon\",\n \"amazon.co.uk\": \"Amazon\",\n \"ebay.com\": \"eBay\",\n \"etsy.com\": \"Etsy\",\n \"walmart.com\": \"Walmart\",\n \"target.com\": \"Target\",\n \"bestbuy.com\": \"Best Buy\",\n \"homedepot.com\": \"Home Depot\",\n \"lowes.com\": \"Lowe's\",\n \"wayfair.com\": \"Wayfair\",\n \"costco.com\": \"Costco\",\n \"apple.com\": \"Apple\",\n \"shopify.com\": \"Shopify Store\",\n \"paypal.com\": \"PayPal\",\n \"stripe.com\": \"Stripe\",\n \"ups.com\": \"UPS\",\n \"fedex.com\": \"FedEx\",\n \"usps.com\": \"USPS\",\n \"dhl.com\": \"DHL\",\n};\n\nfunction detectEmailType(subject: string, body: string): string {\n const text = (subject + \" \" + body).toLowerCase();\n if (DELIVERY_KEYWORDS.some(k => text.includes(k))) return \"delivery\";\n if (SHIPPING_KEYWORDS.some(k => text.includes(k))) return \"shipping\";\n if (ORDER_KEYWORDS.some(k => text.includes(k))) return \"order\";\n return \"order\"; // default to order\n}\n\nfunction extractTrackingNumber(text: string): { tracking_number: string; carrier: string } | null {\n for (const { carrier, pattern } of CARRIER_PATTERNS) {\n const match = text.match(pattern);\n if (match) {\n return { tracking_number: match[1].replace(/\\s/g, \"\"), carrier };\n }\n }\n return null;\n}\n\nfunction extractRetailer(from: string): string {\n const emailMatch = from.match(/<([^>]+)>/);\n const email = emailMatch ? emailMatch[1] : from;\n const domain = email.split(\"@\")[1]?.toLowerCase() ?? \"\";\n for (const [domainKey, name] of Object.entries(RETAILER_DOMAINS)) {\n if (domain.includes(domainKey)) return name;\n }\n // Try to extract company name from domain\n const parts = domain.split(\".\");\n if (parts.length >= 2) {\n return parts[parts.length - 2].charAt(0).toUpperCase() + parts[parts.length - 2].slice(1);\n }\n return \"Unknown Retailer\";\n}\n\nfunction extractEstimatedArrival(text: string): string | null {\n // Look for delivery date patterns\n const datePatterns = [\n /(?:arriv(?:e|ing|al)|deliver(?:y|ed|s)|expect(?:ed)?)(?:\\s+(?:on|by|between))?\\s+([A-Z][a-z]+ \\d{1,2}(?:,? \\d{4})?)/i,\n /(?:arriv(?:e|ing|al)|deliver(?:y|ed|s)|expect(?:ed)?)(?:\\s+(?:on|by|between))?\\s+(\\d{1,2}\\/\\d{1,2}\\/?\\d{0,4})/i,\n /estimated\\s+(?:delivery|arrival)[:\\s]+([A-Z][a-z]+ \\d{1,2}(?:,? \\d{4})?)/i,\n /estimated\\s+(?:delivery|arrival)[:\\s]+(\\d{1,2}\\/\\d{1,2}\\/?\\d{0,4})/i,\n ];\n\n for (const pattern of datePatterns) {\n const match = text.match(pattern);\n if (match) {\n const dateStr = match[1];\n const parsed = new Date(dateStr);\n if (!isNaN(parsed.getTime())) {\n return parsed.toISOString().split(\"T\")[0];\n }\n // Try adding current year if missing\n const withYear = `${dateStr}, ${new Date().getFullYear()}`;\n const parsedWithYear = new Date(withYear);\n if (!isNaN(parsedWithYear.getTime())) {\n return parsedWithYear.toISOString().split(\"T\")[0];\n }\n }\n }\n return null;\n}\n\nfunction extractOrderTotal(text: string): string | null {\n const patterns = [\n /(?:total|amount|order total)[:\\s]+\\$?(\\d+\\.?\\d{0,2})/i,\n /\\$(\\d{1,4}\\.\\d{2})/,\n ];\n for (const pattern of patterns) {\n const match = text.match(pattern);\n if (match) return `$${match[1]}`;\n }\n return null;\n}\n\nexport async function scanGmail() {\n const gmailUser = Deno.env.get(\"GMAIL_USER\");\n const gmailPass = Deno.env.get(\"GMAIL_PASS\");\n\n if (!gmailUser || !gmailPass) {\n console.log(\"⚠️ Gmail credentials not set. Skipping scan.\");\n console.log(\"Set GMAIL_USER and GMAIL_PASS environment variables.\");\n return { scanned: 0, newOrders: 0, updated: 0, error: \"Missing credentials\" };\n }\n\n const client = new ImapFlow({\n host: \"imap.gmail.com\",\n port: 993,\n secure: true,\n auth: { user: gmailUser, pass: gmailPass },\n logger: false,\n });\n\n try {\n await client.connect();\n await client.mailboxOpen(\"INBOX\");\n\n const state = await getScanState();\n const since = state.last_scan_date\n ? new Date(state.last_scan_date)\n : new Date(Date.now() - 7 * 24 * 60 * 60 * 1000); // Default: last 7 days\n\n const sinceStr = since.toISOString().split(\"T\")[0];\n\n // Search for emails since last scan with order/shipping related subjects\n const searchCriteria = {\n since: since,\n subject: [\"order\", \"shipped\", \"shipping\", \"tracking\", \"delivery\", \"delivered\", \"package\", \"purchase\", \"receipt\", \"invoice\", \"dispatched\", \"confirmation\"],\n };\n\n const messages = await client.search(searchCriteria, { uid: true });\n console.log(`📧 Found ${messages.length} potential order emails since ${sinceStr}`);\n\n let newOrders = 0;\n let updated = 0;\n let maxUid = state.last_message_uid;\n\n for (const uid of messages) {\n if (uid <= state.last_message_uid) continue;\n\n const msg = await client.fetchOne(uid, { envelope: true, source: true, uid: true }, { uid: true });\n if (!msg) continue;\n\n const envelope = msg.envelope;\n const subject = envelope?.subject ?? \"(no subject)\";\n const from = envelope?.from?.[0] ? `${envelope.from[0].name ?? \"\"} <${envelope.from[0].address ?? \"\"}>` : \"unknown\";\n const date = envelope?.date ? new Date(envelope.date).toISOString() : new Date().toISOString();\n const messageId = envelope?.messageId ?? `${uid}-${date}`;\n\n // Parse email body\n const source = msg.source instanceof Uint8Array\n ? new TextDecoder().decode(msg.source)\n : String(msg.source ?? \"\");\n\n // Extract text content (simple: strip HTML tags)\n const bodyText = source\n .replace(/<[^>]*>/g, \" \")\n .replace(/ /g, \" \")\n .replace(/\\s+/g, \" \")\n .trim();\n\n const emailType = detectEmailType(subject, bodyText);\n const tracking = extractTrackingNumber(subject + \" \" + bodyText);\n const retailer = extractRetailer(from);\n const estimatedArrival = extractEstimatedArrival(subject + \" \" + bodyText);\n const orderTotal = extractOrderTotal(bodyText);\n\n const result = await upsertOrder({\n message_id: messageId,\n retailer,\n subject,\n email_date: date,\n email_type: emailType,\n tracking_number: tracking?.tracking_number,\n carrier: tracking?.carrier,\n estimated_arrival: estimatedArrival,\n order_total: orderTotal,\n });\n\n if (result.updated) {\n updated++;\n } else {\n newOrders++;\n }\n\n if (uid > maxUid) maxUid = uid;\n console.log(` ✓ [${emailType}] ${retailer}: ${subject.substring(0, 60)}`);\n }\n\n await updateScanState(new Date().toISOString(), maxUid);\n await client.logout();\n\n console.log(`✅ Scan complete: ${newOrders} new, ${updated} updated`);\n return { scanned: messages.length, newOrders, updated, error: null };\n } catch (error) {\n console.error(\"❌ Gmail scan error:\", error);\n try { await client.logout(); } catch {}\n return { scanned: 0, newOrders: 0, updated: 0, error: String(error) };\n }\n}\n",[188],"99438914-13a8-41d2-a7ca-df3dad4f5f72","db.ts","99a81abe-7d6a-11f1-993d-1607ee4eb77e",2,["D",1783803222304],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nexport interface Order {\n id: number;\n message_id: string;\n retailer: string;\n subject: string;\n email_date: string;\n email_type: string;\n tracking_number: string | null;\n carrier: string | null;\n estimated_arrival: string | null;\n status: string;\n order_total: string | null;\n items: string | null;\n created_at: string;\n updated_at: string;\n}\n\nexport async function initDB() {\n await sqlite.batch([\n {\n sql: `CREATE TABLE IF NOT EXISTS orders (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n message_id TEXT UNIQUE NOT NULL,\n retailer TEXT,\n subject TEXT,\n email_date TEXT,\n email_type TEXT,\n tracking_number TEXT,\n carrier TEXT,\n estimated_arrival TEXT,\n status TEXT DEFAULT 'ordered',\n order_total TEXT,\n items TEXT,\n created_at TEXT DEFAULT CURRENT_TIMESTAMP,\n updated_at TEXT DEFAULT CURRENT_TIMESTAMP\n )`,\n },\n {\n sql: `CREATE TABLE IF NOT EXISTS scan_state (\n id INTEGER PRIMARY KEY CHECK (id = 1),\n last_scan_date TEXT,\n last_message_uid INTEGER DEFAULT 0\n )`,\n },\n {\n sql: `INSERT OR IGNORE INTO scan_state (id, last_scan_date, last_message_uid) VALUES (1, NULL, 0)`,\n },\n {\n sql: `CREATE INDEX IF NOT EXISTS idx_orders_status ON orders(status)`,\n },\n {\n sql: `CREATE INDEX IF NOT EXISTS idx_orders_estimated_arrival ON orders(estimated_arrival)`,\n },\n ]);\n}\n\nexport async function upsertOrder(order: {\n message_id: string;\n retailer: string;\n subject: string;\n email_date: string;\n email_type: string;\n tracking_number?: string;\n carrier?: string;\n estimated_arrival?: string;\n order_total?: string;\n items?: string;\n}) {\n // Check if order exists by message_id\n const existing = await sqlite.execute({\n sql: \"SELECT id, status FROM orders WHERE message_id = ?\",\n args: [order.message_id],\n });\n\n if (existing.rows.length > 0) {\n // Update existing order with new info (but don't downgrade status)\n const row = existing.rows[0] as any;\n const statusMap: Record = {\n ordered: 0,\n shipped: 1,\n out_for_delivery: 2,\n delivered: 3,\n confirmed: 4,\n };\n const currentStatusRank = statusMap[row.status] ?? 0;\n const newStatusRank = statusMap[order.email_type === \"delivery\" ? \"delivered\" : order.email_type === \"shipping\" ? \"shipped\" : \"ordered\"] ?? 0;\n const finalStatus = newStatusRank > currentStatusRank\n ? (order.email_type === \"delivery\" ? \"delivered\" : order.email_type === \"shipping\" ? \"shipped\" : row.status)\n : row.status;\n\n await sqlite.execute({\n sql: `UPDATE orders SET\n retailer = COALESCE(?, retailer),\n subject = ?,\n email_date = ?,\n email_type = ?,\n tracking_number = COALESCE(?, tracking_number),\n carrier = COALESCE(?, carrier),\n estimated_arrival = COALESCE(?, estimated_arrival),\n order_total = COALESCE(?, order_total),\n items = COALESCE(?, items),\n status = ?,\n updated_at = CURRENT_TIMESTAMP\n WHERE id = ?`,\n args: [\n order.retailer, order.subject, order.email_date, order.email_type,\n order.tracking_number ?? null, order.carrier ?? null,\n order.estimated_arrival ?? null, order.order_total ?? null,\n order.items ?? null, finalStatus, row.id,\n ],\n });\n return { updated: true, id: row.id };\n }\n\n const status = order.email_type === \"delivery\" ? \"delivered\" : order.email_type === \"shipping\" ? \"shipped\" : \"ordered\";\n const result = await sqlite.execute({\n sql: `INSERT INTO orders (message_id, retailer, subject, email_date, email_type, tracking_number, carrier, estimated_arrival, status, order_total, items)\n VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,\n args: [\n order.message_id, order.retailer, order.subject, order.email_date,\n order.email_type, order.tracking_number ?? null, order.carrier ?? null,\n order.estimated_arrival ?? null, status,\n order.order_total ?? null, order.items ?? null,\n ],\n });\n return { updated: false, id: Number(result.lastInsertRowid) };\n}\n\nexport async function getAllOrders(): Promise {\n await initDB();\n const result = await sqlite.execute(\n \"SELECT * FROM orders ORDER BY email_date DESC\"\n );\n return result.rows as unknown as Order[];\n}\n\nexport async function getOrderById(id: number): Promise {\n const result = await sqlite.execute({\n sql: \"SELECT * FROM orders WHERE id = ?\",\n args: [id],\n });\n return (result.rows[0] as unknown as Order) ?? null;\n}\n\nexport async function confirmOrder(id: number): Promise {\n const result = await sqlite.execute({\n sql: \"UPDATE orders SET status = 'confirmed', updated_at = CURRENT_TIMESTAMP WHERE id = ?\",\n args: [id],\n });\n return result.rowsAffected > 0;\n}\n\nexport async function getOrdersForConfirmation(): Promise {\n // Get orders that are delivered or have an estimated arrival that's today/past\n const today = new Date().toISOString().split(\"T\")[0];\n const result = await sqlite.execute({\n sql: `SELECT * FROM orders\n WHERE status IN ('delivered', 'shipped')\n AND (estimated_arrival IS NOT NULL AND estimated_arrival <= ?)\n AND status != 'confirmed'\n ORDER BY estimated_arrival ASC`,\n args: [today],\n });\n return result.rows as unknown as Order[];\n}\n\nexport async function getScanState() {\n const result = await sqlite.execute(\"SELECT * FROM scan_state WHERE id = 1\");\n return result.rows[0] as { last_scan_date: string | null; last_message_uid: number };\n}\n\nexport async function updateScanState(lastScanDate: string, lastMessageUid: number) {\n await sqlite.execute({\n sql: \"UPDATE scan_state SET last_scan_date = ?, last_message_uid = ? WHERE id = 1\",\n args: [lastScanDate, lastMessageUid],\n });\n}\n\nexport async function getStats() {\n await initDB();\n const total = await sqlite.execute(\"SELECT COUNT(*) as count FROM orders\");\n const byStatus = await sqlite.execute({\n sql: `SELECT status, COUNT(*) as count FROM orders GROUP BY status`,\n });\n const pendingConfirms = await sqlite.execute({\n sql: `SELECT COUNT(*) as count FROM orders WHERE status IN ('delivered', 'shipped') AND status != 'confirmed'`,\n });\n\n return {\n total: (total.rows[0] as any).count,\n byStatus: byStatus.rows.reduce((acc: Record, row: any) => {\n acc[row.status] = row.count;\n return acc;\n }, {}),\n pendingConfirmations: (pendingConfirms.rows[0] as any).count,\n };\n}\n",[195],"ff861358-a854-4d51-8131-2f05dda88185",["D",1783803389109],[34],"f22c9242-5c2c-44d1-9f97-ac07e49a8df8","frontend","019f52f4-2036-751f-8749-2692611b1b18",["D",1783803158516],"directory",[205],"pulls","branches","forks","envVars",{"_217":69,"_219":69},"connections",{"_217":69,"_218":69},"count","unfilledCount","emptyCount",{"_48":204,"_38":205,"_36":206,"_163":-5,"_46":47,"_45":167,"_165":65,"_43":314,"_13":69,"_39":208,"_40":-5,"_30":31,"_170":-5,"_236":315,"_33":316},{"_48":310,"_38":285,"_36":279,"_163":206,"_46":47,"_45":167,"_165":65,"_43":311,"_13":69,"_39":208,"_40":-5,"_30":31,"_170":-5,"_236":312,"_33":313},{"_48":302,"_38":303,"_36":304,"_163":279,"_46":47,"_45":305,"_165":65,"_43":306,"_13":167,"_39":168,"_40":307,"_30":31,"_170":-5,"_236":308,"_33":309},{"_48":294,"_38":295,"_36":296,"_163":279,"_46":47,"_45":297,"_165":65,"_43":298,"_13":69,"_39":168,"_40":299,"_30":31,"_170":-5,"_236":300,"_33":301},{"_48":286,"_38":287,"_36":288,"_163":279,"_46":47,"_45":289,"_165":65,"_43":290,"_13":69,"_39":168,"_40":291,"_30":31,"_170":-5,"_236":292,"_33":293},{"_48":276,"_38":277,"_36":278,"_163":279,"_46":47,"_45":280,"_165":65,"_43":281,"_13":69,"_39":168,"_40":282,"_30":31,"_170":-5,"_236":283,"_33":284},{"_48":269,"_38":270,"_36":271,"_163":206,"_46":47,"_45":167,"_165":65,"_43":272,"_13":69,"_39":26,"_40":273,"_30":31,"_170":-5,"_236":274,"_33":275},{"_48":261,"_38":262,"_36":263,"_163":206,"_46":47,"_45":264,"_165":65,"_43":265,"_13":167,"_39":26,"_40":266,"_30":31,"_170":-5,"_236":267,"_33":268},{"_48":254,"_38":255,"_36":256,"_163":206,"_46":47,"_45":167,"_165":65,"_43":257,"_13":69,"_39":168,"_40":258,"_30":31,"_170":-5,"_236":259,"_33":260},{"_48":201,"_38":34,"_36":37,"_163":-5,"_46":47,"_45":14,"_165":65,"_43":251,"_13":167,"_39":26,"_40":42,"_30":31,"_170":-5,"_236":252,"_33":253},{"_48":194,"_38":195,"_36":196,"_163":-5,"_46":47,"_45":197,"_165":65,"_43":248,"_13":69,"_39":168,"_40":199,"_30":31,"_170":-5,"_236":249,"_33":250},{"_48":187,"_38":188,"_36":189,"_163":-5,"_46":47,"_45":190,"_165":65,"_43":245,"_13":69,"_39":168,"_40":192,"_30":31,"_170":-5,"_236":246,"_33":247},{"_48":180,"_38":181,"_36":63,"_163":-5,"_46":47,"_45":182,"_165":65,"_43":242,"_13":167,"_39":184,"_40":185,"_30":31,"_170":-5,"_236":243,"_33":244},{"_48":172,"_38":173,"_36":174,"_163":-5,"_46":47,"_45":175,"_165":65,"_43":239,"_13":167,"_39":177,"_40":178,"_30":31,"_170":-5,"_236":240,"_33":241},{"_48":160,"_38":161,"_36":162,"_163":-5,"_46":47,"_45":164,"_165":65,"_43":235,"_13":167,"_39":168,"_40":169,"_30":31,"_170":-5,"_236":237,"_33":238},["D",1783803269182],"children",[],[161],["D",1783803269182],[],[173],["D",1783803282701],[],[181],["D",1783803222305],[],[188],["D",1783803222304],[],[195],["D",1783803389109],[],[34],"68fa35ab-f210-4e87-900d-e8b305b7bb4b","index.tsx","019f52f4-2036-751f-8749-2377c32a3766",["D",1783803158516],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[205,255],"a602b446-83d0-4dab-8130-c09091f3137b","index.html","019f52f4-2036-751f-8749-1d603d4637d4",9,["D",1783803308890],"\n\n \n \n \n 📦 Order Tracker\n \n \n \n \n

\n \n \n \n\n",[],[205,262],"37e43383-6683-406c-9c25-7b1bb3916a38","favicon.svg","019f52f4-2036-751f-8749-1b3fd97bdbce",["D",1783803158516],"\n",[],[205,270],"a29719c1-a1d5-4bf9-bfca-658fa9804267","OrderList.tsx","e42cca30-7d6a-11f1-81e0-1607ee4eb77e","019f52f4-2036-751f-8749-15c69b12f487",12,["D",1783803347173],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface Order {\n id: number;\n retailer: string;\n subject: string;\n email_date: string;\n email_type: string;\n tracking_number: string | null;\n carrier: string | null;\n estimated_arrival: string | null;\n status: string;\n order_total: string | null;\n}\n\ninterface OrderListProps {\n orders: Order[];\n onConfirm: (id: number) => void;\n confirmedId: number | null;\n}\n\nconst STATUS_COLORS: Record = {\n ordered: \"bg-blue-500\",\n shipped: \"bg-purple-500\",\n out_for_delivery: \"bg-orange-500\",\n delivered: \"bg-green-500\",\n confirmed: \"bg-gray-400\",\n};\n\nconst STATUS_ICONS: Record = {\n ordered: \"📋\",\n shipped: \"🚚\",\n out_for_delivery: \"📦\",\n delivered: \"📬\",\n confirmed: \"✅\",\n};\n\ntype FilterType = \"all\" | \"pending\" | \"ordered\" | \"shipped\" | \"delivered\" | \"confirmed\";\n\nconst FILTERS: { label: string; value: FilterType }[] = [\n { label: \"All\", value: \"all\" },\n { label: \"⏳ Pending\", value: \"pending\" },\n { label: \"📋 Ordered\", value: \"ordered\" },\n { label: \"🚚 Shipped\", value: \"shipped\" },\n { label: \"📬 Delivered\", value: \"delivered\" },\n { label: \"✅ Confirmed\", value: \"confirmed\" },\n];\n\nexport function OrderList({ orders, onConfirm, confirmedId }: OrderListProps) {\n const [filter, setFilter] = useState(\"all\");\n\n const filtered = orders.filter(o => {\n if (filter === \"all\") return true;\n if (filter === \"pending\") return o.status === \"delivered\" || o.status === \"shipped\";\n return o.status === filter;\n });\n\n return (\n

\n {/* Filter buttons */}\n

\n {FILTERS.map(f => (\n setFilter(f.value)}\n class={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors cursor-pointer ${\n filter === f.value ? \"bg-indigo-600 text-white\" : \"bg-white text-gray-600 border border-gray-200 hover:bg-gray-50\"\n }`}\n >\n {f.label}\n \n ))}\n

\n\n {/* Order cards */}\n {filtered.length === 0 ? (\n

📭

No orders found. Try scanning your Gmail!

\n ) : (\n

\n {filtered.map(order => (\n \n ))}\n

\n )}\n

\n );\n}\n\nfunction OrderCard({ order, onConfirm, confirmed }: { order: Order; onConfirm: (id: number) => void; confirmed: boolean }) {\n const needsConfirm = (order.status === \"delivered\" || order.status === \"shipped\") && order.status !== \"confirmed\";\n const emailDate = new Date(order.email_date).toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\", year: \"numeric\" });\n const arrivalDate = order.estimated_arrival\n ? new Date(order.estimated_arrival + \"T00:00:00\").toLocaleDateString(\"en-US\", { weekday: \"short\", month: \"short\", day: \"numeric\" })\n : null;\n const today = new Date().toISOString().split(\"T\")[0];\n const isOverdue = order.estimated_arrival && order.estimated_arrival < today && order.status !== \"confirmed\";\n\n return (\n

\n {/* Left: info */}\n

\n \n {STATUS_ICONS[order.status]} {order.status.replace(/_/g, \" \")}\n \n {isOverdue && (\n \n ⚠️ Overdue\n \n )}\n

{order.retailer}

{order.subject}

\n\n

\n 📅 {emailDate}\n {arrivalDate && (\n \n 📬 Est. arrival: {arrivalDate}\n \n )}\n {order.tracking_number && (\n 🚚 {order.carrier}: {order.tracking_number}\n )}\n {order.order_total && (\n 💰 {order.order_total}\n )}\n

\n\n {/* Right: confirm button */}\n {needsConfirm && (\n onConfirm(order.id)}\n class={`px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-colors cursor-pointer ${\n confirmed ? \"bg-green-100 text-green-700\" : \"bg-green-600 text-white hover:bg-green-700\"\n }`}\n >\n {confirmed ? \"✅ Confirmed!\" : \"✅ Confirm Received\"}\n \n )}\n {order.status === \"confirmed\" && (\n

✅ Received

\n )}\n

\n );\n}\n",[],[205,285,277],"components","6df3a3c5-9259-4f1e-abda-b0498746ec4c","Header.tsx","e4151048-7d6a-11f1-bc3f-1607ee4eb77e",11,["D",1783803347165],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface Stats {\n total: number;\n byStatus: Record;\n pendingConfirmations: number;\n}\n\ninterface GmailStatus {\n connected: boolean;\n email: string | null;\n lastScan: string | null;\n}\n\ninterface HeaderProps {\n stats: Stats | null;\n gmailStatus: GmailStatus | null;\n onScan: () => void;\n scanning: boolean;\n scanResult: string | null;\n view: \"calendar\" | \"orders\";\n onViewChange: (v: \"calendar\" | \"orders\") => void;\n}\n\nconst STATUS_COLORS: Record = {\n ordered: \"bg-blue-100 text-blue-700\",\n shipped: \"bg-purple-100 text-purple-700\",\n out_for_delivery: \"bg-orange-100 text-orange-700\",\n delivered: \"bg-green-100 text-green-700\",\n confirmed: \"bg-gray-200 text-gray-600\",\n};\n\nconst STATUS_ICONS: Record = {\n ordered: \"📋\",\n shipped: \"🚚\",\n out_for_delivery: \"📦\",\n delivered: \"📬\",\n confirmed: \"✅\",\n};\n\nexport function Header({ stats, gmailStatus, onScan, scanning, scanResult, view, onViewChange }: HeaderProps) {\n return (\n

\n {/* Title row */}\n

\n 📦 Order Tracker\n

\n \n {scanning ? \"🔄 Scanning...\" : \"🔍 Scan Now\"}\n \n

\n\n {/* Scan result */}\n {scanResult && (\n

\n {scanResult}\n

\n )}\n\n {/* Stats bar */}\n {stats && (\n

\n \n \n \n \n \n {stats.pendingConfirmations > 0 && (\n \n )}\n

\n )}\n\n {/* Gmail status + view toggle */}\n

\n {gmailStatus?.connected ? (\n \n \n Gmail: {gmailStatus.email}\n \n ) : (\n \n \n Gmail: Not connected\n \n )}\n {gmailStatus?.lastScan && (\n \n Last scan: {new Date(gmailStatus.lastScan).toLocaleDateString()}\n \n )}\n

\n\n

\n onViewChange(\"calendar\")}\n class={`px-4 py-1.5 rounded-md text-sm font-medium transition-colors cursor-pointer ${\n view === \"calendar\" ? \"bg-white text-indigo-600 shadow-sm\" : \"text-gray-500 hover:text-gray-700\"\n }`}\n >\n 📅 Calendar\n \n onViewChange(\"orders\")}\n class={`px-4 py-1.5 rounded-md text-sm font-medium transition-colors cursor-pointer ${\n view === \"orders\" ? \"bg-white text-indigo-600 shadow-sm\" : \"text-gray-500 hover:text-gray-700\"\n }`}\n >\n 📋 Orders\n \n

\n );\n}\n\nfunction StatCard({ label, value, icon, color = \"indigo\" }: { label: string; value: number; icon: string; color?: string }) {\n const colors: Record = {\n indigo: \"bg-indigo-50 text-indigo-700 border-indigo-200\",\n blue: \"bg-blue-50 text-blue-700 border-blue-200\",\n purple: \"bg-purple-50 text-purple-700 border-purple-200\",\n green: \"bg-green-50 text-green-700 border-green-200\",\n gray: \"bg-gray-50 text-gray-700 border-gray-200\",\n amber: \"bg-amber-50 text-amber-700 border-amber-200\",\n };\n return (\n

{icon} {label}

{value}

\n );\n}\n",[],[205,285,287],"6ceb10a1-2a32-4b8d-a352-31cf7bbae9cb","Calendar.tsx","e4323d8a-7d6a-11f1-9710-1607ee4eb77e",13,["D",1783803347166],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface Order {\n id: number;\n retailer: string;\n subject: string;\n email_date: string;\n email_type: string;\n tracking_number: string | null;\n carrier: string | null;\n estimated_arrival: string | null;\n status: string;\n order_total: string | null;\n}\n\ninterface CalendarProps {\n orders: Order[];\n onConfirm: (id: number) => void;\n confirmedId: number | null;\n}\n\nconst STATUS_COLORS: Record = {\n ordered: \"bg-blue-500\",\n shipped: \"bg-purple-500\",\n out_for_delivery: \"bg-orange-500\",\n delivered: \"bg-green-500\",\n confirmed: \"bg-gray-400\",\n};\n\nconst STATUS_DOT: Record = {\n ordered: \"bg-blue-500\",\n shipped: \"bg-purple-500\",\n out_for_delivery: \"bg-orange-500\",\n delivered: \"bg-green-500\",\n confirmed: \"bg-gray-400\",\n};\n\nconst MONTHS = [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"];\nconst DAYS = [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"];\n\nexport function Calendar({ orders, onConfirm, confirmedId }: CalendarProps) {\n const [currentMonth, setCurrentMonth] = useState(new Date());\n const [selectedDate, setSelectedDate] = useState(null);\n\n // Group orders by date\n const ordersByDate: Record = {};\n for (const order of orders) {\n const dateKey = order.estimated_arrival ?? order.email_date?.split(\"T\")[0];\n if (dateKey) {\n if (!ordersByDate[dateKey]) ordersByDate[dateKey] = [];\n ordersByDate[dateKey].push(order);\n }\n }\n\n const year = currentMonth.getFullYear();\n const month = currentMonth.getMonth();\n const firstDay = new Date(year, month, 1).getDay();\n const daysInMonth = new Date(year, month + 1, 0).getDate();\n const today = new Date().toISOString().split(\"T\")[0];\n\n const cells: (number | null)[] = [];\n for (let i = 0; i < firstDay; i++) cells.push(null);\n for (let d = 1; d <= daysInMonth; d++) cells.push(d);\n while (cells.length % 7 !== 0) cells.push(null);\n\n const prevMonth = () => setCurrentMonth(new Date(year, month - 1, 1));\n const nextMonth = () => setCurrentMonth(new Date(year, month + 1, 1));\n const goToday = () => {\n setCurrentMonth(new Date());\n setSelectedDate(today);\n };\n\n const selectedOrders = selectedDate ? ordersByDate[selectedDate] || [] : [];\n\n return (\n

\n {/* Calendar grid */}\n

{MONTHS[month]} {year}

\n \n \n \n

\n\n

\n {DAYS.map(d => (\n

{d}

\n ))}\n {cells.map((day, i) => {\n if (day === null) return

;\n const dateStr = `${year}-${String(month + 1).padStart(2, \"0\")}-${String(day).padStart(2, \"0\")}`;\n const dayOrders = ordersByDate[dateStr] || [];\n const isToday = dateStr === today;\n const isSelected = dateStr === selectedDate;\n const hasPending = dayOrders.some(o => o.status === \"delivered\" || o.status === \"shipped\");\n\n return (\n setSelectedDate(dateStr)}\n class={`min-h-20 p-1.5 rounded-lg border cursor-pointer transition-all ${\n isSelected ? \"border-indigo-400 bg-indigo-50\" : \"border-gray-100 hover:border-gray-300 hover:bg-gray-50\"\n } ${isToday ? \"ring-2 ring-indigo-300\" : \"\"}`}\n >\n

\n {day}\n

\n {dayOrders.slice(0, 3).map(o => (\n

\n {o.retailer}\n

\n ))}\n {dayOrders.length > 3 && (\n

+{dayOrders.length - 3} more

\n )}\n

\n {hasPending && dayOrders.length > 0 && (\n

⏳ Confirm

\n )}\n

\n );\n })}\n

\n\n {/* Side panel: selected date details */}\n

\n {selectedDate ? (\n <>\n

\n {new Date(selectedDate + \"T00:00:00\").toLocaleDateString(\"en-US\", { weekday: \"long\", month: \"long\", day: \"numeric\" })}\n

\n {selectedOrders.length === 0 ? (\n

No orders for this date.

\n ) : (\n

\n {selectedOrders.map(order => (\n \n ))}\n

\n )}\n \n ) : (\n

📅

Click a date to see order details

\n )}\n

\n );\n}\n\nfunction OrderDetail({ order, onConfirm, confirmed }: { order: Order; onConfirm: (id: number) => void; confirmed: boolean }) {\n const needsConfirm = order.status === \"delivered\" || (order.status === \"shipped\" && order.estimated_arrival);\n const canConfirm = order.status !== \"confirmed\";\n\n return (\n

{order.retailer}

{order.subject}

\n \n {order.status.replace(/_/g, \" \")}\n \n

\n {order.tracking_number && (\n

\n 🚚 {order.carrier}: {order.tracking_number}\n

\n )}\n {order.order_total && (\n

💰 {order.order_total}

\n )}\n {needsConfirm && canConfirm && (\n onConfirm(order.id)}\n class=\"mt-2 w-full px-3 py-1.5 rounded-lg bg-green-600 text-white text-sm font-medium hover:bg-green-700 transition-colors cursor-pointer\"\n >\n {confirmed ? \"✅ Confirmed!\" : \"✅ Confirm Received\"}\n \n )}\n {order.status === \"confirmed\" && (\n

✅ You confirmed receipt

\n )}\n

\n );\n}\n",[],[205,285,295],"61999adc-f781-4ad5-b11d-f52573d946af","App.tsx","019f52f4-2036-751f-8749-0c3647c2c90b",10,["D",1783803308895],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport { Header } from \"./Header.tsx\";\nimport { Calendar } from \"./Calendar.tsx\";\nimport { OrderList } from \"./OrderList.tsx\";\n\ninterface Order {\n id: number;\n message_id: string;\n retailer: string;\n subject: string;\n email_date: string;\n email_type: string;\n tracking_number: string | null;\n carrier: string | null;\n estimated_arrival: string | null;\n status: string;\n order_total: string | null;\n items: string | null;\n created_at: string;\n updated_at: string;\n}\n\ninterface Stats {\n total: number;\n byStatus: Record;\n pendingConfirmations: number;\n}\n\ninterface GmailStatus {\n connected: boolean;\n email: string | null;\n lastScan: string | null;\n}\n\ntype View = \"calendar\" | \"orders\";\n\nexport function App() {\n const [orders, setOrders] = useState([]);\n const [stats, setStats] = useState(null);\n const [gmailStatus, setGmailStatus] = useState(null);\n const [view, setView] = useState(\"calendar\");\n const [loading, setLoading] = useState(true);\n const [scanning, setScanning] = useState(false);\n const [scanResult, setScanResult] = useState(null);\n const [confirmedId, setConfirmedId] = useState(null);\n\n const fetchData = useCallback(async () => {\n try {\n const [ordersRes, statsRes, gmailRes] = await Promise.all([\n fetch(\"/api/orders\"),\n fetch(\"/api/stats\"),\n fetch(\"/api/gmail/status\"),\n ]);\n const ordersData = await ordersRes.json();\n const statsData = await statsRes.json();\n const gmailData = await gmailRes.json();\n setOrders(ordersData.orders || []);\n setStats(statsData);\n setGmailStatus(gmailData);\n } catch (err) {\n console.error(\"Failed to fetch data:\", err);\n } finally {\n setLoading(false);\n }\n }, []);\n\n useEffect(() => {\n // Check for confirmation redirect\n const params = new URLSearchParams(window.location.search);\n const confirmed = params.get(\"confirmed\");\n if (confirmed) {\n setConfirmedId(Number(confirmed));\n setTimeout(() => setConfirmedId(null), 5000);\n window.history.replaceState({}, \"\", \"/\");\n }\n fetchData();\n }, [fetchData]);\n\n const handleScan = async () => {\n setScanning(true);\n setScanResult(null);\n try {\n const res = await fetch(\"/api/scan\", { method: \"POST\" });\n const data = await res.json();\n if (data.error) {\n setScanResult(`❌ Error: ${data.error}`);\n } else {\n setScanResult(`✅ Scanned ${data.scanned} emails — ${data.newOrders} new, ${data.updated} updated`);\n await fetchData();\n }\n } catch (err) {\n setScanResult(`❌ Scan failed: ${String(err)}`);\n } finally {\n setScanning(false);\n }\n };\n\n const handleConfirm = async (id: number) => {\n try {\n await fetch(`/api/orders/${id}/confirm`, { method: \"POST\" });\n await fetchData();\n setConfirmedId(id);\n setTimeout(() => setConfirmedId(null), 3000);\n } catch (err) {\n console.error(\"Failed to confirm:\", err);\n }\n };\n\n if (loading) {\n return (\n

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

\n \n\n {confirmedId !== null && (\n

\n ✅ Package confirmed! Marked as received.\n

\n )}\n\n {!gmailStatus?.connected && (\n

⚠️ Gmail Not Connected

\n Set GMAIL_USER and{\" \"}\n GMAIL_PASS environment variables to start tracking orders.\n See the setup instructions below.\n

\n )}\n\n {view === \"calendar\" ? (\n \n ) : (\n \n )}\n\n \n

\n );\n}\n",[],[205,285,303],"0f8df77e-fb68-4181-a220-8242a8cf2ba6",["D",1783803158516],[222,223,224,225],[205,285],["D",1783803158516],[221,226,227,228],[205],["D",1783803158516],["D",1789526460011],{"_109":108,"_117":113},{"_109":108,"_110":111,"_112":113,"_19":61,"_114":115,"_116":31},{"_13":14,"_38":95,"_48":47,"_96":49,"_97":98,"_99":100,"_101":55,"_102":103,"_104":105,"_106":50,"_107":108},"ctx",{"_88":-5,"_139":355,"_356":357,"_358":359,"_360":31,"_361":31,"_362":31,"_363":65,"_364":-5,"_365":-7,"_366":-7,"_367":69,"_368":31,"_369":31,"_370":-5,"_371":31,"_372":31,"_373":31,"_374":-5},"ENV",{"_326":327,"_328":329,"_330":95,"_331":332,"_333":334,"_335":336,"_337":338,"_339":340,"_341":342,"_343":344,"_345":346,"_347":348,"_349":350,"_351":352,"_353":354},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v15