[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_157":158,"_159":160},"routes/_app.x.$handle.$name",{"_98":97,"_32":45,"_107":88,"_27":108,"_13":14,"_109":-5,"_11":110,"_111":112,"_113":114,"_115":116,"_117":118,"_20":-5,"_119":-5,"_120":-5,"_121":25,"_122":123,"_124":25,"_125":-5,"_126":-5,"_127":128},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":-5,"_57":25,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":65,"_66":67,"_68":69,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":81,"_82":83,"_84":85,"_86":25},"version",2,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","views.ts","latestPath","fileId","1cb325ee-68e3-11f1-909c-1607ee4eb77e","name","fileType","script","content","import { html, raw } from \"https://esm.town/v/std/utils@121-main/index.ts\";\n","import { html, raw } from \"npm:hono/html\";\n\n// ---- Types mirroring the route.published payload ----\nexport interface Order {\n uuid: string;\n status: string;\n uri: string;\n customerOrderNumber: string;\n routificOrderNumber: string;\n}\nexport interface TimelineEntry {\n sequence: number;\n type: \"start_location\" | \"delivering_stop\" | \"end_location\" | \"idling\";\n stopUuid: string;\n plannedArrivalTime?: string;\n plannedDepartureTime?: string;\n actualArrivalTime?: string;\n actualDepartureTime?: string;\n distanceFromPreviousStopInKilometers?: number;\n orders?: Order[];\n}\nexport interface RoutePayload {\n route: {\n uuid: string;\n name: string;\n date: string;\n status: string;\n workspaceId: number;\n workingTimeInSeconds: number;\n distanceInKilometers: number;\n ordersCount: number;\n driver: { uuid: string; name: string | null; email: string } | null;\n };\n timeline: TimelineEntry[];\n}\n\nexport interface RouteRow {\n uuid: string;\n payload: RoutePayload;\n received_at: string;\n}\n\n// ---- Helpers ----\nconst fmtTime = (iso?: string) =>\n iso ? new Date(iso).toLocaleTimeString([], { hour: \"numeric\", minute: \"2-digit\" }) : \"—\";\n\nconst fmtDuration = (secs: number) => {\n const h = Math.floor(secs / 3600);\n const m = Math.round((secs % 3600) / 60);\n return h ? `${h}h ${m}m` : `${m}m`;\n};\n\nconst statusBadge = (status: string) => {\n const colors: Record = {\n planned: \"bg-slate-100 text-slate-700\",\n published: \"bg-blue-100 text-blue-700\",\n executing: \"bg-amber-100 text-amber-700\",\n completed: \"bg-emerald-100 text-emerald-700\",\n };\n return html`${status}`;\n};\n\n// ---- Shared HTML shell ----\nfunction shell(title: string, body: unknown) {\n return html`\n \n \n \n \n ${title}\n \n \n \n \n \n

${body}

\n \n `;\n}\n\n// ---- Dashboard: all published routes ----\nexport function dashboardPage(rows: RouteRow[]) {\n const cards = rows.length\n ? rows.map((row) => {\n const r = row.payload.route;\n const stops = row.payload.timeline.filter((t) => t.type === \"delivering_stop\").length;\n return html`\n

${r.name}

${r.date}

\n ${statusBadge(r.status)}\n

\n \n ${(r.driver?.name ?? \"—\").slice(0, 1).toUpperCase()}\n \n ${r.driver?.name ?? \"Unassigned\"}\n

${stops}

stops

${r.ordersCount}

orders

${r.distanceInKilometers}

\n `;\n })\n : html`

📦

No routes yet

Publish a route in Routific and it'll appear here.

`;\n\n return shell(\n \"Warehouse — Load & Pick Sheets\",\n html`\n

Warehouse Ops

Load & Pick Sheets

\n Auto-generated the moment a dispatcher publishes a route in Routific.\n

${cards}

\n Powered by the route.published webhook · view source\n

\n `,\n );\n}\n\n// ---- Load & Pick sheet for one route (reverse-loading order) ----\nexport function loadSheetPage(row: RouteRow) {\n const r = row.payload.route;\n const stops = row.payload.timeline\n .filter((t) => t.type === \"delivering_stop\")\n .sort((a, b) => a.sequence - b.sequence);\n\n // Loading order = reverse of delivery order: last drop loaded first (front/bottom of van),\n // first drop loaded last (at the doors).\n const loadingOrder = [...stops].reverse();\n\n const rowsHtml = loadingOrder.map((stop, i) => {\n const orders = stop.orders ?? [];\n return html`\n \n \n \n \n

\n ${i + 1}\n

\n \n \n

Delivery stop #${stop.sequence}

ETA ${fmtTime(stop.plannedArrivalTime)}

\n \n \n ${orders.map(\n (o) => html`

\n ${o.customerOrderNumber}\n ${o.routificOrderNumber}\n

`,\n )}\n \n \n ${orders.length} item${orders.length === 1 ? \"\" : \"s\"}\n \n `;\n });\n\n return shell(\n `Load Sheet — ${r.name}`,\n html`\n

\n ← All routes\n

\n\n

${r.name}

\n ${statusBadge(r.status)}\n

${r.date}

\n \n ${(r.driver?.name ?? \"—\").slice(0, 1).toUpperCase()}\n \n ${r.driver?.name ?? \"Unassigned\"}\n ${r.driver?.email ?? \"\"}\n

${stops.length}

stops

${r.ordersCount}

orders

${fmtDuration(r.workingTimeInSeconds)}

est. time

\n \n 🖨️ Print\n \n

\n\n

\n Reverse-loading order. Load item #1 first (deepest in the van) and\n finish with the last row — so the first delivery is right at the doors. No digging at every stop.\n

\n\n

\n \n \n \n \n \n \n \n \n \n \n ${rowsHtml}\n

✓	Load #	Drop sequence	Order #	Items

\n\n

\n Generated from the route.published webhook · received ${row.received_at} ·\n view source\n

\n `,\n );\n}\n\nexport { raw };\n","createdAt",["D",1781546059749],"branchVersion","branchId","416699fb-87bb-4947-837e-8684a1943bac","id","0bff063f-f596-462d-9c4d-f1e73dcec5f6","routific-load-sheet",["D",1781545960614],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Warehouse Load & Pick Sheet — route.published webhook demo","imageUrl","544882c0-c67e-4d71-bc1f-ed58e07f7c7e","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","019ecc2b-2b10-749b-8dc9-2ec5893d17c5","tursoName","0bff063ff596462d9c4df1e73dcec5f6","tursoHostname","0bff063ff596462d9c4df1e73dcec5f6-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789498239291],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_98":97,"_106":102},"org",{"_98":97,"_99":100,"_101":102,"_18":55,"_103":104,"_105":25},"branch",{"_13":87,"_32":88,"_43":42,"_89":44,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":45,"_96":97},"isOwned",26,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","jamilwahid","handle","displayName","Jamil Wahid","avatar","https://lh3.googleusercontent.com/a/ACg8ocKQ0SrZl5L7F-fqeqL30bOiCiV80k3F2YGlLzXS20GmhceNGk4d=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":152,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":-5,"_57":25,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":65,"_66":67,"_68":153,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":154,"_82":155,"_84":156,"_86":25},"tree",[147],"files",[147],"counts",{"_137":61,"_138":134,"_139":61,"_140":141,"_142":143},"contents",[129],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":130,"_32":28,"_30":31,"_131":-5,"_41":42,"_40":14,"_132":25,"_38":133,"_13":134,"_33":34,"_35":37,"_24":25,"_135":-5,"_27":136},"b0e6348b-f20a-4ab4-9801-1d42ec485600","parentId","latest",["D",1781546059749],1,"label",[28],"pulls","branches","forks","envVars",{"_144":134,"_146":61},"connections",{"_144":61,"_145":61},"count","unfilledCount","emptyCount",{"_43":130,"_32":28,"_30":31,"_131":-5,"_41":42,"_40":14,"_132":25,"_38":148,"_13":134,"_33":34,"_35":37,"_24":25,"_135":-5,"_149":150,"_27":151},["D",1781546059749],"children",[],[28],["D",1781545960614],["D",1789498239291],{"_98":97,"_106":102},{"_98":97,"_99":100,"_101":102,"_18":55,"_103":104,"_105":25},{"_13":87,"_32":88,"_43":42,"_89":44,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":45,"_96":97},"ctx",{"_80":-5,"_126":190,"_191":192,"_193":194,"_195":25,"_196":25,"_197":25,"_198":199,"_200":-5,"_201":-7,"_202":-7,"_203":61,"_204":25,"_205":25,"_206":-5,"_207":25,"_208":25,"_209":25,"_210":-5},"ENV",{"_161":162,"_163":164,"_165":88,"_166":167,"_168":169,"_170":171,"_172":173,"_174":175,"_176":177,"_178":179,"_180":181,"_182":183,"_184":185,"_186":187,"_188":189},"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",true,"preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v2