Shift flow

Shift Todo

\n Turn a messy paper checklist into a pocket shift board with live progress,\n quick notes, and reusable templates.\n

\n\n

\n Loading account…\n

\n\n \n

\n\n

\n \n\n

\n\n

\n \n \n\n",[],[228,235],{"_106":244,"_97":245,"_163":246,"_165":229,"_166":148,"_167":247,"_169":170,"_108":248,"_102":33,"_172":185,"_174":249,"_175":22,"_176":-5,"_177":250,"_100":251},"edd64342-18ff-11f1-bce8-42dde27851f2","script.ts","edd643ec-18ff-11f1-bce8-42dde27851f2",5,["D",1772762291106],"import { APP_NAME, VERSION } from \"../Shared/config.ts\";\nimport type {\n ActiveShiftPayload,\n AppStatePayload,\n ShiftHistoryEntry,\n ShiftTask,\n TemplateItem,\n UserInfo,\n} from \"../Shared/types.ts\";\n\ntype ViewName = \"home\" | \"history\" | \"templates\";\n\nconst authSection = requireElement(\"auth-section\");\nconst loginView = requireElement(\"login-view\");\nconst homeView = requireElement(\"home-view\");\nconst historyView = requireElement(\"history-view\");\nconst templatesView = requireElement(\"templates-view\");\nconst viewNav = requireElement(\"view-nav\");\nconst toast = requireElement(\"toast\");\n\nlet currentUser: UserInfo | null = null;\nlet appState: AppStatePayload | null = null;\nlet currentView: ViewName = \"home\";\nlet toastTimeout: number | null = null;\n\nfunction requireElement(id: string): T {\n const element = document.getElementById(id);\n if (!element) {\n throw new Error(`Missing required element #${id}`);\n }\n return element as T;\n}\n\nfunction escapeHtml(text: string | null | undefined): string {\n if (!text) return \"\";\n const div = document.createElement(\"div\");\n div.textContent = text;\n return div.innerHTML;\n}\n\nfunction showToast(message: string): void {\n toast.textContent = message;\n toast.classList.add(\"visible\");\n if (toastTimeout) {\n window.clearTimeout(toastTimeout);\n }\n toastTimeout = window.setTimeout(() => {\n toast.classList.remove(\"visible\");\n }, 2200);\n}\n\nfunction formatDateTime(iso: string | null): string {\n if (!iso) return \"In progress\";\n return new Date(iso).toLocaleString(\"en-US\", {\n month: \"short\",\n day: \"numeric\",\n hour: \"numeric\",\n minute: \"2-digit\",\n });\n}\n\nfunction formatClock(iso: string | null): string {\n if (!iso) return \"Not done yet\";\n return new Date(iso).toLocaleTimeString(\"en-US\", {\n hour: \"numeric\",\n minute: \"2-digit\",\n });\n}\n\nfunction groupTasks(tasks: ShiftTask[]): Map {\n const grouped = new Map();\n for (const task of tasks) {\n const existing = grouped.get(task.section) ?? [];\n existing.push(task);\n grouped.set(task.section, existing);\n }\n return grouped;\n}\n\nasync function api(path: string, init?: RequestInit): Promise {\n const response = await fetch(path, init);\n if (response.status === 401) {\n currentUser = null;\n appState = null;\n render();\n throw new Error(\"Authentication required\");\n }\n\n if (!response.ok) {\n const data = await response.json().catch(() => ({}));\n throw new Error(String(data.error ?? \"Request failed\"));\n }\n\n return response.json() as Promise;\n}\n\nasync function fetchUser(): Promise {\n currentUser = await api(\"/auth/me\").catch(() => ({\n email: null,\n username: null,\n profileImageUrl: null,\n }));\n}\n\nasync function fetchState(): Promise {\n if (!currentUser?.email) {\n appState = null;\n return;\n }\n appState = await api(\"/api/state\");\n}\n\nasync function initialize(): Promise {\n await fetchUser();\n if (currentUser?.email) {\n await fetchState();\n }\n render();\n}\n\nfunction renderAuth(): void {\n if (currentUser?.email) {\n const displayName = currentUser.username || currentUser.email;\n authSection.innerHTML = `\n Signed in as ${escapeHtml(displayName)}\n v${VERSION}\n Logout\n `;\n viewNav.classList.remove(\"hidden\");\n loginView.classList.add(\"hidden\");\n return;\n }\n\n authSection.innerHTML = `${APP_NAME} keeps each shift private to your login.`;\n viewNav.classList.add(\"hidden\");\n loginView.classList.remove(\"hidden\");\n}\n\nfunction renderNav(): void {\n viewNav.querySelectorAll(\"button\").forEach((button) => {\n button.classList.toggle(\"active\", button.dataset.view === currentView);\n });\n}\n\nfunction renderHome(): void {\n homeView.classList.toggle(\"hidden\", currentView !== \"home\" || !currentUser?.email);\n\n if (!currentUser?.email || !appState) {\n homeView.innerHTML = \"\";\n return;\n }\n\n const activeShift = appState.activeShift;\n if (!activeShift) {\n homeView.innerHTML = `\n

Ready to roll

No active shift

\n Start a shift to pull in the default checklist, add custom tasks, and keep notes as you go.\n

\n \n

\n `;\n\n const startShiftBtn = document.getElementById(\"start-shift-btn\");\n startShiftBtn?.addEventListener(\"click\", async () => {\n const payload = await api(\"/api/shifts/start\", { method: \"POST\" });\n appState = {\n ...(appState as AppStatePayload),\n activeShift: payload,\n };\n await fetchState();\n showToast(\"Shift started\");\n render();\n });\n return;\n }\n\n const progress = activeShift.shift.totalCount\n ? Math.round((activeShift.shift.completedCount / activeShift.shift.totalCount) * 100)\n : 0;\n\n const groupedTasks = groupTasks(activeShift.tasks);\n const sectionsMarkup = [...groupedTasks.entries()].map(([section, tasks]) => `\n

${escapeHtml(section)}

\n ${tasks.filter((task) => task.completed).length}/${tasks.length}\n

\n ${tasks.map((task) => `\n \n \n

${escapeHtml(task.label)}

${task.source === \"custom\" ? \"Custom task\" : \"Template task\"} · ${escapeHtml(formatClock(task.completedAt))}

\n ${task.completed ? \"Done\" : \"Open\"}\n \n `).join(\"\")}\n

\n `).join(\"\");\n\n homeView.innerHTML = `\n

Active shift

${escapeHtml(formatDateTime(activeShift.shift.startedAt))}

\n \n

\n\n

\n ${activeShift.shift.completedCount}/${activeShift.shift.totalCount}\n tasks done\n

\n ${progress}%\n completed\n

\n ${[...groupedTasks.keys()].length}\n sections\n

\n\n

Custom add

Add a task mid-shift

\n \n

\n\n

Shift notes

What happened?

\n \n

\n\n

Checklist

Work the board

\n ${sectionsMarkup}\n

\n `;\n\n homeView.querySelectorAll('input[type=\"checkbox\"][data-task-id]').forEach((checkbox) => {\n checkbox.addEventListener(\"change\", async () => {\n const taskId = Number(checkbox.dataset.taskId);\n await api(\"/api/tasks/\" + taskId, {\n method: \"PATCH\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ completed: checkbox.checked }),\n });\n await fetchState();\n showToast(checkbox.checked ? \"Task completed\" : \"Task reopened\");\n render();\n });\n });\n\n const customTaskForm = document.getElementById(\"custom-task-form\") as HTMLFormElement | null;\n customTaskForm?.addEventListener(\"submit\", async (event) => {\n event.preventDefault();\n const formData = new FormData(customTaskForm);\n await api(\"/api/shifts/\" + activeShift.shift.id + \"/tasks\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n section: String(formData.get(\"section\") ?? \"\"),\n label: String(formData.get(\"label\") ?? \"\"),\n }),\n });\n customTaskForm.reset();\n await fetchState();\n showToast(\"Custom task added\");\n render();\n });\n\n const notesForm = document.getElementById(\"notes-form\") as HTMLFormElement | null;\n notesForm?.addEventListener(\"submit\", async (event) => {\n event.preventDefault();\n const formData = new FormData(notesForm);\n await api(\"/api/shifts/\" + activeShift.shift.id + \"/notes\", {\n method: \"PATCH\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ notes: String(formData.get(\"notes\") ?? \"\") }),\n });\n await fetchState();\n showToast(\"Notes saved\");\n render();\n });\n\n const endShiftBtn = document.getElementById(\"end-shift-btn\");\n endShiftBtn?.addEventListener(\"click\", async () => {\n await api(\"/api/shifts/\" + activeShift.shift.id + \"/end\", { method: \"POST\" });\n await fetchState();\n showToast(\"Shift ended\");\n render();\n });\n}\n\nfunction renderHistoryCard(shift: ShiftHistoryEntry): string {\n const doneTasks = shift.tasks.filter((task) => task.completed);\n return `\n

Completed shift

${escapeHtml(formatDateTime(shift.startedAt))}

\n ${shift.completedCount}/${shift.totalCount}\n

\n Ended ${escapeHtml(formatDateTime(shift.endedAt))}\n

\n ${shift.notes\n ? `

${escapeHtml(shift.notes)}

`\n : \"\"}\n

\n ${doneTasks.length\n ? doneTasks.slice(0, 4).map((task) => escapeHtml(task.label)).join(\" · \")\n : \"No tasks were completed in this shift.\"}\n

\n `;\n}\n\nfunction renderHistory(): void {\n historyView.classList.toggle(\"hidden\", currentView !== \"history\" || !currentUser?.email);\n\n if (!currentUser?.email || !appState) {\n historyView.innerHTML = \"\";\n return;\n }\n\n historyView.innerHTML = `\n

Shift archive

History

\n ${\n appState.history.length\n ? appState.history.map(renderHistoryCard).join(\"\")\n : '

No completed shifts yet. Finish your first one to build history.

'\n }\n

\n `;\n}\n\nfunction renderTemplates(): void {\n templatesView.classList.toggle(\"hidden\", currentView !== \"templates\" || !currentUser?.email);\n\n if (!currentUser?.email || !appState) {\n templatesView.innerHTML = \"\";\n return;\n }\n\n const groupedTemplates = new Map();\n for (const item of appState.templates) {\n const existing = groupedTemplates.get(item.section) ?? [];\n existing.push(item);\n groupedTemplates.set(item.section, existing);\n }\n\n templatesView.innerHTML = `\n

Reusable list

Templates

\n Default checklist items are baked in. Add your own recurring tasks here so new shifts start closer to reality.\n

\n \n

\n\n

Current template library

What a shift starts with

\n ${[...groupedTemplates.entries()].map(([section, items]) => `\n

${escapeHtml(section)}

\n ${items.length} items\n

\n ${items.map((item) => `\n

\n \n

${escapeHtml(item.label)}

${item.source === \"default\" ? \"Default\" : \"Your template\"}

\n ${item.source}\n

\n `).join(\"\")}\n

\n `;\n\n const templateForm = document.getElementById(\"template-form\") as HTMLFormElement | null;\n templateForm?.addEventListener(\"submit\", async (event) => {\n event.preventDefault();\n const formData = new FormData(templateForm);\n await api(\"/api/templates\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n section: String(formData.get(\"section\") ?? \"\"),\n label: String(formData.get(\"label\") ?? \"\"),\n }),\n });\n templateForm.reset();\n await fetchState();\n showToast(\"Template item added\");\n render();\n });\n}\n\nfunction render(): void {\n document.title = `${APP_NAME} v${VERSION}`;\n renderAuth();\n renderNav();\n renderHome();\n renderHistory();\n renderTemplates();\n}\n\nviewNav.querySelectorAll(\"button\").forEach((button) => {\n button.addEventListener(\"click\", () => {\n currentView = (button.dataset.view as ViewName) || \"home\";\n render();\n });\n});\n\ninitialize().catch((error) => {\n console.error(error);\n showToast(\"Could not load app\");\n});\n",[],[228,245],[228],{"_106":254,"_97":255,"_163":256,"_165":-5,"_166":148,"_167":257,"_169":170,"_108":258,"_102":33,"_172":173,"_174":-5,"_175":22,"_176":-5,"_177":259,"_100":278},"edb1c06c-18ff-11f1-a1f2-42dde27851f2","Shared","edb1c102-18ff-11f1-a1f2-42dde27851f2",3,["D",1772762290846],[260,269],{"_106":261,"_97":262,"_163":263,"_165":256,"_166":148,"_167":264,"_169":170,"_108":265,"_102":33,"_172":185,"_174":266,"_175":22,"_176":-5,"_177":267,"_100":268},"ee085648-18ff-11f1-8318-42dde27851f2","config.ts","ee0856f2-18ff-11f1-8318-42dde27851f2",12,["D",1772762291399],"export const APP_NAME = \"Shift Todo\";\nexport const VERSION = \"0.1.0\";\n\nexport const USERS_TABLE = \"shift_todo_users_v1\";\nexport const USER_TEMPLATES_TABLE = \"shift_todo_user_templates_v1\";\nexport const SHIFTS_TABLE = \"shift_todo_shifts_v1\";\nexport const SHIFT_TASKS_TABLE = \"shift_todo_shift_tasks_v1\";\n\nexport const DEFAULT_TEMPLATE_ITEMS = [\n { section: \"Restrooms\", label: \"Men's restroom\", position: 10 },\n { section: \"Restrooms\", label: \"Women's restroom\", position: 20 },\n { section: \"Outside\", label: \"Outside trash\", position: 30 },\n { section: \"Store\", label: \"Front door trash\", position: 40 },\n { section: \"Store\", label: \"Bag ice\", position: 50 },\n { section: \"Store\", label: \"Sweep store\", position: 60 },\n { section: \"Store\", label: \"Mop store\", position: 70 },\n { section: \"Dining\", label: \"Sweep dining\", position: 80 },\n { section: \"Dining\", label: \"Mop dining\", position: 90 },\n { section: \"Coffee\", label: \"Clean coffee station\", position: 100 },\n { section: \"Kitchen\", label: \"Inside trash\", position: 110 },\n { section: \"Kitchen\", label: \"Sweep kitchen\", position: 120 },\n { section: \"Kitchen\", label: \"Mop kitchen\", position: 130 },\n { section: \"Stock\", label: \"Stock coolers\", position: 140 },\n] as const;\n",[],[255,262],{"_106":270,"_97":271,"_163":272,"_165":256,"_166":148,"_167":273,"_169":170,"_108":274,"_102":33,"_172":185,"_174":275,"_175":22,"_176":-5,"_177":276,"_100":277},"ee02a27a-18ff-11f1-a486-42dde27851f2","types.ts","ee02a338-18ff-11f1-a486-42dde27851f2",11,["D",1772762291396],"export interface UserInfo {\n email: string | null;\n username: string | null;\n profileImageUrl: string | null;\n}\n\nexport interface TemplateItem {\n id: number | string;\n section: string;\n label: string;\n source: \"default\" | \"custom\";\n position: number;\n}\n\nexport interface ShiftTask {\n id: number;\n shiftId: number;\n section: string;\n label: string;\n source: \"default\" | \"custom\";\n completed: boolean;\n completedAt: string | null;\n position: number;\n}\n\nexport interface Shift {\n id: number;\n startedAt: string;\n endedAt: string | null;\n status: \"active\" | \"completed\";\n notes: string;\n completedCount: number;\n totalCount: number;\n}\n\nexport interface ActiveShiftPayload {\n shift: Shift;\n tasks: ShiftTask[];\n}\n\nexport interface ShiftHistoryEntry extends Shift {\n tasks: ShiftTask[];\n}\n\nexport interface AppStatePayload {\n activeShift: ActiveShiftPayload | null;\n history: ShiftHistoryEntry[];\n templates: TemplateItem[];\n}\n",[],[255,271],[255],{"_106":280,"_97":101,"_163":281,"_165":-5,"_166":148,"_167":103,"_169":170,"_108":282,"_102":33,"_172":283,"_174":284,"_175":22,"_176":285,"_177":286,"_100":287},"ee0e3d06-18ff-11f1-a486-42dde27851f2","ee0e3dce-18ff-11f1-a486-42dde27851f2",["D",1772762291473],"http","import { Hono } from \"npm:hono@4.11.5\";\nimport { oauthMiddleware } from \"https://esm.town/v/std/oauth/middleware.ts\";\nimport { serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport authRoutes from \"./BACKEND/routes.auth.ts\";\nimport shiftsApi from \"./BACKEND/routes.shifts_api.ts\";\nimport { initializeShiftsTables } from \"./BACKEND/db.shifts.ts\";\nimport { initializeTemplatesTable } from \"./BACKEND/db.templates.ts\";\nimport { initializeUsersTable } from \"./BACKEND/db.users.ts\";\n\nawait initializeUsersTable();\nawait initializeTemplatesTable();\nawait initializeShiftsTables();\n\nconst app = new Hono();\n\napp.get(\"/\", async (c) => {\n const url = new URL(\"./FRONTEND/index.html\", import.meta.url);\n const response = await fetch(url);\n const html = await response.text();\n return c.html(html);\n});\n\napp.get(\"/FRONTEND/*\", (c) => serveFile(c.req.path, import.meta.url));\napp.get(\"/Shared/*\", (c) => serveFile(c.req.path, import.meta.url));\n\napp.route(\"/api\", shiftsApi);\napp.route(\"/auth\", authRoutes);\n\napp.onError((err: Error) => {\n throw err;\n});\n\nexport default oauthMiddleware(app.fetch);\n","arfan-shift-todos",[],[101],"files",[160,179,189,198,207,216,226,233,243,253,260,269,279],"counts",{"_292":33,"_293":230,"_294":33,"_295":296,"_299":300},"pulls","branches","forks","envVars",{"_297":33,"_298":33},"count","emptyCount","connections",{"_297":33,"_301":33},"unfilledCount","contents",[],{"_106":280,"_97":101,"_163":281,"_165":-5,"_166":148,"_167":103,"_169":170,"_108":305,"_102":33,"_172":283,"_174":284,"_175":22,"_176":285,"_100":306},["D",1772762291473],[101],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_95":96,"_97":98,"_99":45,"_102":103,"_100":101,"_104":315,"_158":320,"_288":360,"_239":361,"_302":363,"_364":-5,"_365":-5,"_366":-5,"_367":-5,"_368":369,"_295":-5},{"_106":107,"_97":98,"_108":316,"_110":-5,"_111":22,"_112":113,"_114":74,"_115":-5,"_14":116,"_117":-5,"_118":22,"_119":-5,"_120":-5,"_121":33,"_16":122,"_123":124,"_125":126,"_127":-5,"_128":129,"_130":129,"_131":132,"_133":132,"_134":132,"_135":129,"_136":129,"_23":317,"_140":318,"_145":319,"_157":22},["D",1772761962222],{"_95":96,"_138":139},{"_95":96,"_142":139,"_14":116,"_143":144},{"_102":147,"_97":45,"_106":148,"_149":107,"_150":-5,"_151":-5,"_152":-5,"_153":-5,"_154":-5,"_155":98,"_156":96},[321,339,348,357],{"_106":161,"_97":162,"_163":164,"_165":-5,"_166":148,"_167":168,"_169":170,"_108":171,"_102":33,"_172":173,"_174":-5,"_175":22,"_176":-5,"_177":322,"_100":338},[323,326,329,332,335],{"_106":180,"_97":181,"_163":182,"_165":164,"_166":148,"_167":183,"_169":170,"_108":184,"_102":33,"_172":185,"_174":186,"_175":22,"_176":-5,"_177":324,"_100":325},[],[162,181],{"_106":190,"_97":191,"_163":192,"_165":164,"_166":148,"_167":193,"_169":170,"_108":194,"_102":33,"_172":185,"_174":195,"_175":22,"_176":-5,"_177":327,"_100":328},[],[162,191],{"_106":199,"_97":200,"_163":201,"_165":164,"_166":148,"_167":202,"_169":170,"_108":203,"_102":33,"_172":185,"_174":204,"_175":22,"_176":-5,"_177":330,"_100":331},[],[162,200],{"_106":208,"_97":209,"_163":210,"_165":164,"_166":148,"_167":211,"_169":170,"_108":212,"_102":33,"_172":185,"_174":213,"_175":22,"_176":-5,"_177":333,"_100":334},[],[162,209],{"_106":217,"_97":218,"_163":219,"_165":164,"_166":148,"_167":220,"_169":170,"_108":221,"_102":33,"_172":185,"_174":222,"_175":22,"_176":-5,"_177":336,"_100":337},[],[162,218],[162],{"_106":227,"_97":228,"_163":229,"_165":-5,"_166":148,"_167":230,"_169":170,"_108":231,"_102":33,"_172":173,"_174":-5,"_175":22,"_176":-5,"_177":340,"_100":347},[341,344],{"_106":234,"_97":235,"_163":236,"_165":229,"_166":148,"_167":237,"_169":170,"_108":238,"_102":33,"_172":239,"_174":240,"_175":22,"_176":-5,"_177":342,"_100":343},[],[228,235],{"_106":244,"_97":245,"_163":246,"_165":229,"_166":148,"_167":247,"_169":170,"_108":248,"_102":33,"_172":185,"_174":249,"_175":22,"_176":-5,"_177":345,"_100":346},[],[228,245],[228],{"_106":254,"_97":255,"_163":256,"_165":-5,"_166":148,"_167":257,"_169":170,"_108":258,"_102":33,"_172":173,"_174":-5,"_175":22,"_176":-5,"_177":349,"_100":356},[350,353],{"_106":261,"_97":262,"_163":263,"_165":256,"_166":148,"_167":264,"_169":170,"_108":265,"_102":33,"_172":185,"_174":266,"_175":22,"_176":-5,"_177":351,"_100":352},[],[255,262],{"_106":270,"_97":271,"_163":272,"_165":256,"_166":148,"_167":273,"_169":170,"_108":274,"_102":33,"_172":185,"_174":275,"_175":22,"_176":-5,"_177":354,"_100":355},[],[255,271],[255],{"_106":280,"_97":101,"_163":281,"_165":-5,"_166":148,"_167":103,"_169":170,"_108":282,"_102":33,"_172":283,"_174":284,"_175":22,"_176":285,"_177":358,"_100":359},[],[101],[321,323,326,329,332,335,339,341,344,348,350,353,357],{"_106":280,"_97":101,"_163":281,"_165":-5,"_166":148,"_167":103,"_169":170,"_108":305,"_102":33,"_172":283,"_174":284,"_175":22,"_176":285,"_100":362},[101],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]

Login required

No active shift

${escapeHtml(section)}

${escapeHtml(formatDateTime(activeShift.shift.startedAt))}

Add a task mid-shift

What happened?

Work the board

${escapeHtml(formatDateTime(shift.startedAt))}

History

Templates

What a shift starts with

${escapeHtml(section)}