[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_310":311,"_312":313},"routes/_app.x.$handle.$name",{"_105":104,"_37":50,"_114":95,"_32":109,"_13":14,"_115":-5,"_11":116,"_117":118,"_119":120,"_121":122,"_123":124,"_26":-5,"_125":-5,"_126":-5,"_127":30,"_128":129,"_130":64,"_131":-5,"_132":-5,"_133":134},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_48":49,"_37":50,"_43":51,"_52":-5,"_53":30,"_54":55,"_56":55,"_57":58,"_59":-5,"_19":60,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":72,"_73":74,"_75":76,"_77":-5,"_78":79,"_80":79,"_81":82,"_83":82,"_84":82,"_85":79,"_86":79,"_87":88,"_89":90,"_91":92,"_93":30},"version",48,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","f89d9c84-399a-42a4-9d29-5732c39708e4","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":-7,"_29":30,"_31":30,"_32":33,"_34":33},"file",{"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":14,"_46":47,"_29":30},"previous","deleted",false,"deletedHere","path","frontend/components/Profile.tsx","latestPath","fileId","001135ca-89b8-11f1-9992-1607ee4eb77e","name","Profile.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport {\n UserProfile, AppSettings,\n apiUpdateProfile, apiUpdateSettings,\n} from \"./lib.ts\";\n\nexport function Profile({\n profile, settings, onProfileChange, onSettingsChange,\n}: {\n profile: UserProfile;\n settings: AppSettings;\n onProfileChange: (p: UserProfile) => void;\n onSettingsChange: (s: AppSettings) => void;\n}) {\n const [repName, setRepName] = useState(profile.rep_name);\n const [employeeId, setEmployeeId] = useState(profile.employee_id);\n const [teamName, setTeamName] = useState(profile.team_name);\n const [department, setDepartment] = useState(profile.department);\n const [company, setCompany] = useState(profile.company);\n const [profileSaved, setProfileSaved] = useState(false);\n const [themeSaved, setThemeSaved] = useState(false);\n\n const handleSaveProfile = async () => {\n const updated: UserProfile = {\n rep_name: repName.trim(),\n employee_id: employeeId.trim(),\n team_name: teamName.trim(),\n department: department.trim(),\n company: company.trim(),\n };\n await apiUpdateProfile(updated);\n onProfileChange(updated);\n setProfileSaved(true);\n setTimeout(() => setProfileSaved(false), 2000);\n };\n\n const updateTheme = async (theme: string) => {\n const updated = { ...settings, theme };\n await apiUpdateSettings(updated);\n onSettingsChange(updated);\n setThemeSaved(true);\n setTimeout(() => setThemeSaved(false), 2000);\n };\n\n return (\n

\n {/* Profile Header */}\n

\n 👤\n

{repName || \"Agent\"}

\n {employeeId && {employeeId}}\n {employeeId && company && · }\n {company && {company}}\n

\n\n {/* Profile Fields */}\n

Representative Profile

Your Representative Name appears throughout the app — dashboard, timeline, reports, and exported files.

\n \n Representative Name *\n \n setRepName(e.target.value)}\n placeholder=\"e.g. Jane Smith\"\n className=\"w-full rounded-xl border border-slate-700 bg-slate-800 px-4 py-2.5 text-sm text-slate-100 placeholder-slate-500 outline-none focus:ring-2 focus:ring-indigo-500\"\n />\n

\n Employee ID (optional)\n setEmployeeId(e.target.value)}\n placeholder=\"e.g. EMP-12345\"\n className=\"w-full rounded-xl border border-slate-700 bg-slate-800 px-4 py-2.5 text-sm text-slate-100 placeholder-slate-500 outline-none focus:ring-2 focus:ring-indigo-500\"\n />\n

\n Company (optional)\n setCompany(e.target.value)}\n placeholder=\"e.g. Acme Corp\"\n className=\"w-full rounded-xl border border-slate-700 bg-slate-800 px-4 py-2.5 text-sm text-slate-100 placeholder-slate-500 outline-none focus:ring-2 focus:ring-indigo-500\"\n />\n

\n Team (optional)\n setTeamName(e.target.value)}\n placeholder=\"e.g. Tier 2 Support\"\n className=\"w-full rounded-xl border border-slate-700 bg-slate-800 px-4 py-2.5 text-sm text-slate-100 placeholder-slate-500 outline-none focus:ring-2 focus:ring-indigo-500\"\n />\n

\n Department (optional)\n setDepartment(e.target.value)}\n placeholder=\"e.g. Customer Service\"\n className=\"w-full rounded-xl border border-slate-700 bg-slate-800 px-4 py-2.5 text-sm text-slate-100 placeholder-slate-500 outline-none focus:ring-2 focus:ring-indigo-500\"\n />\n

\n \n Save Profile\n \n {profileSaved && (\n ✓ Saved\n )}\n

\n\n {/* Theme */}\n

Theme

Appearance

Switch between dark and light mode

\n {([\"dark\", \"light\"] as const).map((t) => (\n updateTheme(t)}\n className={`rounded-lg px-4 py-1.5 text-sm font-medium capitalize transition-colors ${\n settings.theme === t ? \"bg-indigo-500/20 text-indigo-300\" : \"text-slate-400 hover:text-slate-200\"\n }`}\n >\n {t === \"dark\" ? \"🌙 Dark\" : \"☀️ Light\"}\n \n ))}\n

\n {themeSaved && (\n

✓ Theme saved

\n )}\n

\n );\n}\n","createdAt",["D",1785155879318],"branchVersion","branchId","4572bacb-93bd-4a97-972a-5180b6680221","id","cbb368c5-70a9-4a9c-8539-2e8967f1b7ab","agent-status-logger",["D",1784843445795],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Agent call state logger","imageUrl","7669e88c-3c2f-4552-8588-704d00c4918b","pinnedFileId","8f2e5920-86e0-11f1-bed1-1607ee4eb77e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019f90f2-7cfc-72cc-b124-374ac53992e1","tursoName","cbb368c570a94a9c85392e8967f1b7ab","tursoHostname","cbb368c570a94a9c85392e8967f1b7ab-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789562426294],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_105":104,"_113":109},"org",{"_105":104,"_106":107,"_108":109,"_19":60,"_110":111,"_112":30},"branch",{"_13":94,"_37":95,"_48":47,"_96":49,"_97":-5,"_98":-5,"_99":-5,"_100":-5,"_101":-5,"_102":50,"_103":104},"isOwned",67,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","ericsanderson","handle","displayName","Eric Sanderson","avatar","","tier","free","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_48":49,"_37":50,"_43":305,"_52":-5,"_53":30,"_54":55,"_56":55,"_57":58,"_59":-5,"_19":60,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":72,"_73":74,"_75":306,"_77":-5,"_78":79,"_80":79,"_81":82,"_83":82,"_84":82,"_85":79,"_86":79,"_87":307,"_89":308,"_91":309,"_93":30},"tree",[173,188],"files",[173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188],"counts",{"_162":68,"_163":164,"_165":68,"_166":167,"_168":169},"contents",[142,143],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[135,136,137],"hasHttpFiles","grants","orgs","customDomains",{},{"_48":141,"_139":-5},{"_48":140,"_139":-5},{"_48":138,"_139":-5},"4998a26a-d6b3-4cc7-a2c5-2413f1c4cb31","reporterId","916f14ce-017e-47c6-8c54-803b586f212b","d792876f-12b7-49df-b688-20219f887be9",{"_48":155,"_37":156,"_35":157,"_146":-5,"_46":47,"_45":158,"_148":64,"_43":159,"_13":68,"_39":160,"_41":-5,"_29":30,"_153":-5,"_32":161},{"_48":144,"_37":145,"_35":62,"_146":-5,"_46":47,"_45":147,"_148":30,"_43":149,"_13":150,"_39":151,"_41":152,"_29":30,"_153":-5,"_32":154},"9a3b4cb0-187c-4f1f-b252-7845682b3cf5","main.tsx","parentId",45,"latest",["D",1785155842914],15,"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// ── Database Schema ──────────────────────────────────────────────\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS time_entries (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n entry_type TEXT NOT NULL,\n status TEXT NOT NULL,\n start_time TEXT NOT NULL,\n end_time TEXT,\n duration_ms INTEGER,\n note TEXT,\n created_at TEXT NOT NULL DEFAULT (datetime('now'))\n)`);\n\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS notes (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n timestamp TEXT NOT NULL,\n text TEXT NOT NULL,\n created_at TEXT NOT NULL DEFAULT (datetime('now'))\n)`);\n\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS profile (\n id INTEGER PRIMARY KEY DEFAULT 1,\n rep_name TEXT NOT NULL DEFAULT '',\n employee_id TEXT DEFAULT '',\n team_name TEXT DEFAULT '',\n department TEXT DEFAULT '',\n company TEXT DEFAULT '',\n updated_at TEXT NOT NULL DEFAULT (datetime('now'))\n)`);\n\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS app_settings (\n id INTEGER PRIMARY KEY DEFAULT 1,\n theme TEXT NOT NULL DEFAULT 'dark',\n shift_length INTEGER NOT NULL DEFAULT 480,\n time_format TEXT NOT NULL DEFAULT '12',\n default_page TEXT NOT NULL DEFAULT 'dashboard',\n auto_save INTEGER NOT NULL DEFAULT 1,\n updated_at TEXT NOT NULL DEFAULT (datetime('now'))\n)`);\n\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS favorite_states (\n id INTEGER PRIMARY KEY DEFAULT 1,\n states TEXT NOT NULL DEFAULT '[]',\n updated_at TEXT NOT NULL DEFAULT (datetime('now'))\n)`);\n\nawait sqlite.execute(\"INSERT OR IGNORE INTO profile (id) VALUES (1)\");\nawait sqlite.execute(\"INSERT OR IGNORE INTO app_settings (id) VALUES (1)\");\nawait sqlite.execute(\"INSERT OR IGNORE INTO favorite_states (id, states) VALUES (1, '[\\\"Ready\\\",\\\"After Call Work\\\",\\\"Not Ready - Lunch\\\",\\\"Not Ready - Break\\\"]')\");\n\n// ── Helpers ──────────────────────────────────────────────────────\nfunction serializeRows(rows: any[]): any[] {\n return rows.map((row: any) => {\n const out: any = {};\n for (const key in row) {\n out[key] = typeof row[key] === \"bigint\" ? Number(row[key]) : row[key];\n }\n return out;\n });\n}\n\nasync function closeOpenEntry(): Promise {\n const open = await sqlite.execute(\n \"SELECT * FROM time_entries WHERE end_time IS NULL ORDER BY id DESC LIMIT 1\",\n );\n if (open.rows.length > 0) {\n const row: any = open.rows[0];\n const endTime = new Date().toISOString();\n const duration = new Date(endTime).getTime() - new Date(row.start_time).getTime();\n await sqlite.execute({\n sql: \"UPDATE time_entries SET end_time = ?, duration_ms = ? WHERE id = ?\",\n args: [endTime, duration, row.id],\n });\n return { ...row, end_time: endTime, duration_ms: duration };\n }\n return null;\n}\n\n// ── API: Actions ─────────────────────────────────────────────────\napp.post(\"/api/action\", async (c) => {\n try {\n const body = await c.req.json();\n const { type, status } = body;\n if (!type || !status) return c.json({ error: \"type and status required\" }, 400);\n await closeOpenEntry();\n const startTime = new Date().toISOString();\n const result = await sqlite.execute({\n sql: \"INSERT INTO time_entries (entry_type, status, start_time) VALUES (?, ?, ?)\",\n args: [type, status, startTime],\n });\n return c.json({\n entry: {\n id: Number(result.lastInsertRowid),\n entry_type: type,\n status,\n start_time: startTime,\n end_time: null,\n duration_ms: null,\n note: null,\n },\n });\n } catch (e) {\n return c.json({ error: String(e) }, 500);\n }\n});\n\napp.get(\"/api/status\", async (c) => {\n const open = await sqlite.execute(\n \"SELECT * FROM time_entries WHERE end_time IS NULL ORDER BY id DESC LIMIT 1\",\n );\n const rows = serializeRows(open.rows);\n return c.json({ current: rows[0] || null });\n});\n\n// ── API: Entries ─────────────────────────────────────────────────\napp.get(\"/api/entries\", async (c) => {\n const date = c.req.query(\"date\") || new Date().toISOString().split(\"T\")[0];\n const startStr = new Date(date + \"T00:00:00.000Z\").toISOString();\n const endStr = new Date(date + \"T23:59:59.999Z\").toISOString();\n const result = await sqlite.execute({\n sql: \"SELECT * FROM time_entries WHERE start_time >= ? AND start_time <= ? ORDER BY start_time ASC\",\n args: [startStr, endStr],\n });\n return c.json({ entries: serializeRows(result.rows) });\n});\n\napp.get(\"/api/entries/range\", async (c) => {\n const start = c.req.query(\"start\");\n const end = c.req.query(\"end\");\n if (!start || !end) return c.json({ error: \"start and end required\" }, 400);\n const startStr = new Date(start + \"T00:00:00.000Z\").toISOString();\n const endStr = new Date(end + \"T23:59:59.999Z\").toISOString();\n const result = await sqlite.execute({\n sql: \"SELECT * FROM time_entries WHERE start_time >= ? AND start_time <= ? ORDER BY start_time ASC\",\n args: [startStr, endStr],\n });\n return c.json({ entries: serializeRows(result.rows) });\n});\n\napp.put(\"/api/entries/:id\", async (c) => {\n try {\n const id = parseInt(c.req.param(\"id\"));\n const body = await c.req.json();\n const { entry_type, status, start_time, end_time, note } = body;\n let duration_ms: number | null = null;\n if (start_time && end_time) {\n duration_ms = new Date(end_time).getTime() - new Date(start_time).getTime();\n }\n await sqlite.execute({\n sql: \"UPDATE time_entries SET entry_type = ?, status = ?, start_time = ?, end_time = ?, duration_ms = ?, note = ? WHERE id = ?\",\n args: [entry_type, status, start_time, end_time, duration_ms, note, id],\n });\n return c.json({ success: true });\n } catch (e) {\n return c.json({ error: String(e) }, 500);\n }\n});\n\napp.delete(\"/api/entries/:id\", async (c) => {\n const id = parseInt(c.req.param(\"id\"));\n await sqlite.execute({ sql: \"DELETE FROM time_entries WHERE id = ?\", args: [id] });\n return c.json({ success: true });\n});\n\n// ── API: Notes ───────────────────────────────────────────────────\napp.get(\"/api/notes\", async (c) => {\n const date = c.req.query(\"date\") || new Date().toISOString().split(\"T\")[0];\n const startStr = new Date(date + \"T00:00:00.000Z\").toISOString();\n const endStr = new Date(date + \"T23:59:59.999Z\").toISOString();\n const result = await sqlite.execute({\n sql: \"SELECT * FROM notes WHERE timestamp >= ? AND timestamp <= ? ORDER BY timestamp DESC\",\n args: [startStr, endStr],\n });\n return c.json({ notes: result.rows });\n});\n\napp.post(\"/api/notes\", async (c) => {\n try {\n const body = await c.req.json();\n const { text } = body;\n if (!text) return c.json({ error: \"text required\" }, 400);\n const timestamp = new Date().toISOString();\n const result = await sqlite.execute({\n sql: \"INSERT INTO notes (timestamp, text) VALUES (?, ?)\",\n args: [timestamp, text],\n });\n return c.json({ id: Number(result.lastInsertRowid), timestamp, text });\n } catch (e) {\n return c.json({ error: String(e) }, 500);\n }\n});\n\napp.delete(\"/api/notes/:id\", async (c) => {\n const id = parseInt(c.req.param(\"id\"));\n await sqlite.execute({ sql: \"DELETE FROM notes WHERE id = ?\", args: [id] });\n return c.json({ success: true });\n});\n\n// ── API: Profile ──────────────────────────────────────────────────\napp.get(\"/api/profile\", async (c) => {\n const result = await sqlite.execute(\"SELECT rep_name, employee_id, team_name, department, company FROM profile WHERE id = 1\");\n const rows = serializeRows(result.rows);\n return c.json(rows[0] || { rep_name: \"\", employee_id: \"\", team_name: \"\", department: \"\", company: \"\" });\n});\n\napp.put(\"/api/profile\", async (c) => {\n try {\n const body = await c.req.json();\n const { rep_name, employee_id, team_name, department, company } = body;\n await sqlite.execute({\n sql: \"UPDATE profile SET rep_name = ?, employee_id = ?, team_name = ?, department = ?, company = ?, updated_at = datetime('now') WHERE id = 1\",\n args: [rep_name || \"\", employee_id || \"\", team_name || \"\", department || \"\", company || \"\"],\n });\n return c.json({ success: true });\n } catch (e) {\n return c.json({ error: String(e) }, 500);\n }\n});\n\n// ── API: Settings ─────────────────────────────────────────────────\napp.get(\"/api/settings\", async (c) => {\n const result = await sqlite.execute(\"SELECT theme, shift_length, time_format, default_page, auto_save FROM app_settings WHERE id = 1\");\n const rows = serializeRows(result.rows);\n const s: any = rows[0] || { theme: \"dark\", shift_length: 480, time_format: \"12\", default_page: \"dashboard\", auto_save: 1 };\n return c.json({ ...s, auto_save: !!s.auto_save });\n});\n\napp.put(\"/api/settings\", async (c) => {\n try {\n const body = await c.req.json();\n const { theme, shift_length, time_format, default_page, auto_save } = body;\n await sqlite.execute({\n sql: \"UPDATE app_settings SET theme = ?, shift_length = ?, time_format = ?, default_page = ?, auto_save = ?, updated_at = datetime('now') WHERE id = 1\",\n args: [theme || \"dark\", shift_length || 480, time_format || \"12\", default_page || \"dashboard\", auto_save ? 1 : 0],\n });\n return c.json({ success: true });\n } catch (e) {\n return c.json({ error: String(e) }, 500);\n }\n});\n\n// ── API: Favorites ────────────────────────────────────────────────\napp.get(\"/api/favorites\", async (c) => {\n const result = await sqlite.execute(\"SELECT states FROM favorite_states WHERE id = 1\");\n const rows = serializeRows(result.rows);\n const states: string[] = rows[0]?.states ? JSON.parse(rows[0].states) : [];\n return c.json({ states });\n});\n\napp.put(\"/api/favorites\", async (c) => {\n try {\n const body = await c.req.json();\n const { states } = body;\n if (!Array.isArray(states)) return c.json({ error: \"states array required\" }, 400);\n await sqlite.execute({\n sql: \"UPDATE favorite_states SET states = ?, updated_at = datetime('now') WHERE id = 1\",\n args: [JSON.stringify(states)],\n });\n return c.json({ success: true, states });\n } catch (e) {\n return c.json({ error: String(e) }, 500);\n }\n});\n\n// ── API: Backup & Restore ─────────────────────────────────────────\napp.get(\"/api/backup\", async (c) => {\n const entries = serializeRows((await sqlite.execute(\"SELECT * FROM time_entries ORDER BY id ASC\")).rows);\n const notes = serializeRows((await sqlite.execute(\"SELECT * FROM notes ORDER BY id ASC\")).rows);\n const profile = serializeRows((await sqlite.execute(\"SELECT rep_name, employee_id, team_name, department, company FROM profile WHERE id = 1\")).rows);\n const settings = serializeRows((await sqlite.execute(\"SELECT theme, shift_length, time_format, default_page, auto_save FROM app_settings WHERE id = 1\")).rows);\n return c.json({\n version: 1,\n exported_at: new Date().toISOString(),\n time_entries: entries,\n notes,\n profile: profile[0] || {},\n settings: settings[0] || {},\n });\n});\n\napp.post(\"/api/backup\", async (c) => {\n try {\n const body = await c.req.json();\n const { time_entries, notes, profile, settings } = body;\n\n await sqlite.execute(\"DELETE FROM time_entries\");\n await sqlite.execute(\"DELETE FROM notes\");\n\n if (Array.isArray(time_entries)) {\n for (const e of time_entries) {\n await sqlite.execute({\n sql: \"INSERT INTO time_entries (id, entry_type, status, start_time, end_time, duration_ms, note, created_at) VALUES (?, ?, ?, ?, ?, ?, ?, ?)\",\n args: [e.id, e.entry_type, e.status, e.start_time, e.end_time, e.duration_ms, e.note, e.created_at],\n });\n }\n }\n\n if (Array.isArray(notes)) {\n for (const n of notes) {\n await sqlite.execute({\n sql: \"INSERT INTO notes (id, timestamp, text, created_at) VALUES (?, ?, ?, ?)\",\n args: [n.id, n.timestamp, n.text, n.created_at],\n });\n }\n }\n\n if (profile) {\n await sqlite.execute({\n sql: \"UPDATE profile SET rep_name = ?, employee_id = ?, team_name = ?, department = ?, company = ?, updated_at = datetime('now') WHERE id = 1\",\n args: [profile.rep_name || \"\", profile.employee_id || \"\", profile.team_name || \"\", profile.department || \"\", profile.company || \"\"],\n });\n }\n\n if (settings) {\n await sqlite.execute({\n sql: \"UPDATE app_settings SET theme = ?, shift_length = ?, time_format = ?, default_page = ?, auto_save = ?, updated_at = datetime('now') WHERE id = 1\",\n args: [settings.theme || \"dark\", settings.shift_length || 480, settings.time_format || \"12\", settings.default_page || \"dashboard\", settings.auto_save ? 1 : 0],\n });\n }\n\n return c.json({ success: true, entries: time_entries?.length || 0, notes: notes?.length || 0 });\n } catch (e) {\n return c.json({ error: String(e) }, 500);\n }\n});\n\n// ── Frontend ─────────────────────────────────────────────────────\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\napp.get(\"/mini\", () => serveFile(\"/frontend/mini.html\"));\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","label",[145],"547b91b6-6fd8-4c0f-8193-7a2aae212a93","frontend","e9f2fea6-8e94-4680-b5dd-42afba81de8c",3,["D",1784956649281],"directory",[156],"pulls","branches",1,"forks","envVars",{"_170":68,"_172":68},"connections",{"_170":68,"_171":68},"count","unfilledCount","emptyCount",{"_48":155,"_37":156,"_35":157,"_146":-5,"_46":47,"_45":158,"_148":64,"_43":302,"_13":68,"_39":160,"_41":-5,"_29":30,"_153":-5,"_190":303,"_32":304},{"_48":297,"_37":235,"_35":228,"_146":157,"_46":47,"_45":298,"_148":64,"_43":299,"_13":68,"_39":160,"_41":-5,"_29":30,"_153":-5,"_190":300,"_32":301},{"_48":289,"_37":290,"_35":291,"_146":228,"_46":47,"_45":292,"_148":30,"_43":293,"_13":221,"_39":40,"_41":294,"_29":30,"_153":-5,"_190":295,"_32":296},{"_48":280,"_37":281,"_35":282,"_146":228,"_46":47,"_45":283,"_148":30,"_43":284,"_13":285,"_39":40,"_41":286,"_29":30,"_153":-5,"_190":287,"_32":288},{"_48":272,"_37":273,"_35":274,"_146":228,"_46":47,"_45":275,"_148":64,"_43":276,"_13":68,"_39":40,"_41":277,"_29":30,"_153":-5,"_190":278,"_32":279},{"_48":264,"_37":265,"_35":266,"_146":228,"_46":47,"_45":267,"_148":64,"_43":268,"_13":164,"_39":40,"_41":269,"_29":30,"_153":-5,"_190":270,"_32":271},{"_48":260,"_37":38,"_35":36,"_146":228,"_46":47,"_45":14,"_148":64,"_43":261,"_13":68,"_39":40,"_41":42,"_29":30,"_153":-5,"_190":262,"_32":263},{"_48":252,"_37":253,"_35":254,"_146":228,"_46":47,"_45":255,"_148":30,"_43":256,"_13":164,"_39":40,"_41":257,"_29":30,"_153":-5,"_190":258,"_32":259},{"_48":244,"_37":245,"_35":246,"_146":228,"_46":47,"_45":247,"_148":30,"_43":248,"_13":68,"_39":40,"_41":249,"_29":30,"_153":-5,"_190":250,"_32":251},{"_48":236,"_37":237,"_35":238,"_146":228,"_46":47,"_45":239,"_148":30,"_43":240,"_13":164,"_39":40,"_41":241,"_29":30,"_153":-5,"_190":242,"_32":243},{"_48":225,"_37":226,"_35":227,"_146":228,"_46":47,"_45":229,"_148":30,"_43":230,"_13":231,"_39":40,"_41":232,"_29":30,"_153":-5,"_190":233,"_32":234},{"_48":216,"_37":217,"_35":218,"_146":157,"_46":47,"_45":219,"_148":64,"_43":220,"_13":221,"_39":26,"_41":222,"_29":30,"_153":-5,"_190":223,"_32":224},{"_48":209,"_37":210,"_35":211,"_146":157,"_46":47,"_45":158,"_148":64,"_43":212,"_13":68,"_39":40,"_41":213,"_29":30,"_153":-5,"_190":214,"_32":215},{"_48":201,"_37":202,"_35":203,"_146":157,"_46":47,"_45":204,"_148":64,"_43":205,"_13":68,"_39":26,"_41":206,"_29":30,"_153":-5,"_190":207,"_32":208},{"_48":193,"_37":194,"_35":195,"_146":157,"_46":47,"_45":196,"_148":64,"_43":197,"_13":68,"_39":40,"_41":198,"_29":30,"_153":-5,"_190":199,"_32":200},{"_48":144,"_37":145,"_35":62,"_146":-5,"_46":47,"_45":147,"_148":30,"_43":189,"_13":150,"_39":151,"_41":152,"_29":30,"_153":-5,"_190":191,"_32":192},["D",1785155842914],"children",[],[145],"848063fb-118e-4e53-adaa-edb199a40398","mini.tsx","36758f8a-88b4-11f1-ab3d-1607ee4eb77e",40,["D",1785044301405],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { MiniStatus } from \"./components/MiniStatus.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) throw new Error(\"No root element found\");\ncreateRoot(root).render();\n",[],[156,194],"4ed88747-efc5-4bf9-a854-1cc1e1a65080","mini.html","367be4e8-88b4-11f1-a201-1607ee4eb77e",41,["D",1785044301406],"\n\n \n \n \n \n Mini Status — Agent Time Clock\n \n \n \n \n

\n \n \n \n\n",[],[156,202],"5c7dcc89-c070-4510-989b-46fadfaec780","index.tsx","21bd802e-87e8-11f1-8547-1607ee4eb77e",["D",1784956649281],"/** @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 found\");\ncreateRoot(root).render();\n",[],[156,210],"f77e3ec5-3a42-42f5-980e-9f6c4ce839e2","index.html","2f103a78-87e8-11f1-8547-1607ee4eb77e",31,["D",1784994211920],2,"\n\n \n \n \n \n Agent Time Clock — Workforce Management\n \n \n \n \n

\n \n \n \n\n",[],[156,217],"67c776b8-d81b-416f-a293-52707f3f59bf","lib.ts","29c2ba46-87e8-11f1-8d73-1607ee4eb77e","e524f53e-4df4-4bca-8ea3-c067f5c12448",47,["D",1785155855796],5,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\n// ── Call State Statuses ──────────────────────────────────────────\nexport const CALL_STATES: string[] = [\n \"Ready\",\n \"After Call Work\",\n \"Not Ready - Lunch\",\n \"Not Ready - Break\",\n \"Not Ready - Mgr Coaching\",\n \"Not Ready - Tech Coaching\",\n \"Not Ready - Customer Resolution\",\n \"Not Ready - Outage\",\n \"Not Ready - Meeting\",\n \"Not Ready - Team Meeting\",\n \"Not Ready - Flex Capacity\",\n \"Not Ready - Flex Meeting\",\n \"Not Ready - Flex Training\",\n \"Not Ready - Non-Flex Meeting\",\n \"Not Ready - Non-Flex Training - Instructor Led\",\n \"Not Ready - AE Training\",\n \"Not Ready - Comp Reg Training\",\n \"Not Ready - Development Training\",\n \"Not Ready - Licensing Training\",\n \"Not Ready - Plan Client Training\",\n \"Not Ready - New Hire Training\",\n \"Not Ready - Upskill Training\",\n \"Not Ready - Ad Hoc Peer Guide Support\",\n \"Not Ready - Peer Guide Support\",\n \"Not Ready - Case Work\",\n \"Not Ready - Fraud\",\n \"Not Ready - Email\",\n \"Not Ready - Agility\",\n \"Not Ready - Loan\",\n \"Not Ready - XTRAC\",\n \"Not Ready - Refresh\",\n \"Not Ready - Performance Coaching\",\n \"Not Ready - Systems Testing\",\n \"Not Ready - Outbound\",\n];\n\n// ── Types ────────────────────────────────────────────────────────\nexport interface TimeEntry {\n id: number;\n entry_type: string;\n status: string;\n start_time: string;\n end_time: string | null;\n duration_ms: number | null;\n note: string | null;\n}\n\nexport interface Note {\n id: number;\n timestamp: string;\n text: string;\n}\n\nexport interface UserProfile {\n rep_name: string;\n employee_id: string;\n team_name: string;\n department: string;\n company: string;\n}\n\nexport interface AppSettings {\n theme: string;\n shift_length: number;\n time_format: string;\n default_page: string;\n auto_save: boolean;\n}\n\n// ── API Client ───────────────────────────────────────────────────\nexport async function apiAction(type: string, status: string): Promise {\n const res = await fetch(\"/api/action\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ type, status }),\n });\n const data = await res.json();\n return data.entry;\n}\n\nexport async function apiGetStatus(): Promise {\n const res = await fetch(\"/api/status\");\n const data = await res.json();\n return data.current;\n}\n\nexport async function apiGetEntries(date: string): Promise {\n const res = await fetch(`/api/entries?date=${date}`);\n const data = await res.json();\n return data.entries;\n}\n\nexport async function apiGetEntriesRange(\n start: string,\n end: string,\n): Promise {\n const res = await fetch(`/api/entries/range?start=${start}&end=${end}`);\n const data = await res.json();\n return data.entries;\n}\n\nexport async function apiUpdateEntry(\n id: number,\n entry: Partial,\n): Promise {\n await fetch(`/api/entries/${id}`, {\n method: \"PUT\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(entry),\n });\n}\n\nexport async function apiDeleteEntry(id: number): Promise {\n await fetch(`/api/entries/${id}`, { method: \"DELETE\" });\n}\n\nexport async function apiGetNotes(date: string): Promise {\n const res = await fetch(`/api/notes?date=${date}`);\n const data = await res.json();\n return data.notes;\n}\n\nexport async function apiAddNote(text: string): Promise {\n const res = await fetch(\"/api/notes\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ text }),\n });\n return await res.json();\n}\n\nexport async function apiDeleteNote(id: number): Promise {\n await fetch(`/api/notes/${id}`, { method: \"DELETE\" });\n}\n\n// ── Profile & Settings API ────────────────────────────────────────\nexport async function apiGetProfile(): Promise {\n const res = await fetch(\"/api/profile\");\n return await res.json();\n}\n\nexport async function apiUpdateProfile(profile: UserProfile): Promise {\n await fetch(\"/api/profile\", {\n method: \"PUT\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(profile),\n });\n}\n\nexport async function apiGetSettings(): Promise {\n const res = await fetch(\"/api/settings\");\n return await res.json();\n}\n\nexport async function apiUpdateSettings(settings: AppSettings): Promise {\n await fetch(\"/api/settings\", {\n method: \"PUT\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(settings),\n });\n}\n\n// ── Favorites API ─────────────────────────────────────────────────\nexport async function apiGetFavorites(): Promise {\n const res = await fetch(\"/api/favorites\");\n const data = await res.json();\n return data.states || [];\n}\n\nexport async function apiUpdateFavorites(states: string[]): Promise {\n await fetch(\"/api/favorites\", {\n method: \"PUT\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ states }),\n });\n}\n\nexport async function apiBackup(): Promise {\n const res = await fetch(\"/api/backup\");\n return await res.json();\n}\n\nexport async function apiRestore(data: any): Promise {\n await fetch(\"/api/backup\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(data),\n });\n}\n\n// ── Helpers ──────────────────────────────────────────────────────\nlet _timeFormat: string = \"12\";\nexport function setGlobalTimeFormat(fmt: string) { _timeFormat = fmt; }\n\nexport function formatDuration(ms: number | null | undefined): string {\n if (!ms || ms < 0) return \"00:00:00\";\n const totalSeconds = Math.floor(ms / 1000);\n const h = Math.floor(totalSeconds / 3600);\n const m = Math.floor((totalSeconds % 3600) / 60);\n const s = totalSeconds % 60;\n return `${String(h).padStart(2, \"0\")}:${String(m).padStart(2, \"0\")}:${String(s).padStart(2, \"0\")}`;\n}\n\nexport function formatTime(iso: string): string {\n return new Date(iso).toLocaleTimeString([], {\n hour: \"2-digit\",\n minute: \"2-digit\",\n second: \"2-digit\",\n hour12: _timeFormat === \"12\",\n });\n}\n\nexport function formatTimeShort(iso: string): string {\n return new Date(iso).toLocaleTimeString([], {\n hour: \"2-digit\",\n minute: \"2-digit\",\n hour12: _timeFormat === \"12\",\n });\n}\n\nexport function formatClock(d: Date): string {\n return d.toLocaleTimeString([], {\n hour: \"2-digit\",\n minute: \"2-digit\",\n second: \"2-digit\",\n hour12: _timeFormat === \"12\",\n });\n}\n\nexport function formatDate(iso: string): string {\n return new Date(iso).toLocaleDateString([], {\n weekday: \"short\",\n month: \"short\",\n day: \"numeric\",\n year: \"numeric\",\n });\n}\n\nexport function todayStr(): string {\n return new Date().toISOString().split(\"T\")[0];\n}\n\nexport interface StatusColor {\n bg: string;\n text: string;\n border: string;\n dot: string;\n ring: string;\n}\n\nexport function isInactiveStatus(status: string): boolean {\n return status === \"Clocked Out\" || status === \"Logged Off\";\n}\n\nexport function getStatusColor(status: string): StatusColor {\n if (status === \"Ready\" || status === \"Clocked In\")\n return { bg: \"bg-emerald-500/10\", text: \"text-emerald-400\", border: \"border-emerald-500/30\", dot: \"bg-emerald-500\", ring: \"ring-emerald-500/20\" };\n if (status === \"After Call Work\")\n return { bg: \"bg-blue-500/10\", text: \"text-blue-400\", border: \"border-blue-500/30\", dot: \"bg-blue-500\", ring: \"ring-blue-500/20\" };\n if (status.includes(\"Lunch\"))\n return { bg: \"bg-amber-500/10\", text: \"text-amber-400\", border: \"border-amber-500/30\", dot: \"bg-amber-500\", ring: \"ring-amber-500/20\" };\n if (status.includes(\"Break\"))\n return { bg: \"bg-purple-500/10\", text: \"text-purple-400\", border: \"border-purple-500/30\", dot: \"bg-purple-500\", ring: \"ring-purple-500/20\" };\n if (status.includes(\"Coaching\"))\n return { bg: \"bg-indigo-500/10\", text: \"text-indigo-400\", border: \"border-indigo-500/30\", dot: \"bg-indigo-500\", ring: \"ring-indigo-500/20\" };\n if (status.includes(\"Meeting\") || status.includes(\"Flex\"))\n return { bg: \"bg-cyan-500/10\", text: \"text-cyan-400\", border: \"border-cyan-500/30\", dot: \"bg-cyan-500\", ring: \"ring-cyan-500/20\" };\n if (status.includes(\"Training\") || status.includes(\"Peer Guide\"))\n return { bg: \"bg-violet-500/10\", text: \"text-violet-400\", border: \"border-violet-500/30\", dot: \"bg-violet-500\", ring: \"ring-violet-500/20\" };\n if (status.includes(\"Outage\"))\n return { bg: \"bg-red-500/10\", text: \"text-red-400\", border: \"border-red-500/30\", dot: \"bg-red-500\", ring: \"ring-red-500/20\" };\n if (status.includes(\"Fraud\") || status.includes(\"Outbound\"))\n return { bg: \"bg-rose-500/10\", text: \"text-rose-400\", border: \"border-rose-500/30\", dot: \"bg-rose-500\", ring: \"ring-rose-500/20\" };\n return { bg: \"bg-slate-500/10\", text: \"text-slate-400\", border: \"border-slate-500/30\", dot: \"bg-slate-500\", ring: \"ring-slate-500/20\" };\n}\n\nexport function getStatusHex(status: string): string {\n if (status === \"Ready\" || status === \"Clocked In\") return \"#10b981\";\n if (status === \"After Call Work\") return \"#3b82f6\";\n if (status.includes(\"Lunch\")) return \"#f59e0b\";\n if (status.includes(\"Break\")) return \"#a855f7\";\n if (status.includes(\"Coaching\")) return \"#6366f1\";\n if (status.includes(\"Meeting\") || status.includes(\"Flex\")) return \"#06b6d4\";\n if (status.includes(\"Training\") || status.includes(\"Peer Guide\")) return \"#8b5cf6\";\n if (status.includes(\"Outage\")) return \"#ef4444\";\n if (status.includes(\"Fraud\") || status.includes(\"Outbound\")) return \"#f43f5e\";\n return \"#64748b\";\n}\n\nexport function getEntryTypeIcon(type: string): string {\n switch (type) {\n case \"clock\": return \"⏰\";\n case \"lunch\": return \"🍽️\";\n case \"break\": return \"☕\";\n case \"call_state\": return \"🎧\";\n default: return \"📋\";\n }\n}\n\nexport function getEntryTypeLabel(type: string): string {\n switch (type) {\n case \"clock\": return \"Clock\";\n case \"lunch\": return \"Lunch\";\n case \"break\": return \"Break\";\n case \"call_state\": return \"Call State\";\n default: return type;\n }\n}\n",[],[156,235,226],"components","3714b182-1d36-4549-a862-be3d88d744ed","Timeline.tsx","43a307ea-87e8-11f1-ac9b-1607ee4eb77e",27,["D",1784993683277],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport {\n TimeEntry, apiGetEntries, apiUpdateEntry, apiDeleteEntry,\n formatDuration, formatTime, getStatusColor, getEntryTypeIcon, todayStr,\n} from \"./lib.ts\";\n\nexport function Timeline({ repName, autoSave }: { repName: string; autoSave: boolean }) {\n const [date, setDate] = useState(todayStr());\n const [entries, setEntries] = useState([]);\n const [editing, setEditing] = useState(null);\n\n const load = useCallback(async () => {\n const data = await apiGetEntries(date);\n setEntries(data);\n }, [date]);\n\n useEffect(() => { load(); }, [load]);\n\n const handleSave = async (entry: TimeEntry) => {\n await apiUpdateEntry(entry.id, entry);\n setEditing(null);\n await load();\n };\n\n const handleDelete = async (id: number) => {\n if (confirm(\"Delete this entry?\")) {\n await apiDeleteEntry(id);\n await load();\n }\n };\n\n return (\n

\n {/* Date Picker */}\n

\n Date:\n setDate(e.target.value)}\n className=\"rounded-xl border border-slate-700 bg-slate-800 px-4 py-2 text-sm text-slate-100 outline-none focus:ring-2 focus:ring-indigo-500\"\n />\n

\n\n {/* Timeline */}\n

\n Daily Timeline — {new Date(date + \"T00:00:00\").toLocaleDateString([], { weekday: \"long\", month: \"long\", day: \"numeric\" })}\n

\n {entries.map((entry, i) => {\n const c = getStatusColor(entry.status);\n return (\n

\n {/* Timeline line */}\n

\n {getEntryTypeIcon(entry.entry_type)}\n

\n {i < entries.length - 1 &&

}\n

\n\n {/* Entry content */}\n

\n \n {entry.status}\n

\n Start: {formatTime(entry.start_time)}\n End: {entry.end_time ? formatTime(entry.end_time) : \"ongoing\"}\n Duration: {formatDuration(entry.duration_ms)}\n

\n {entry.note && (\n

📝 {entry.note}

\n )}\n

\n setEditing(entry)}\n className=\"rounded-lg border border-slate-700 px-2.5 py-1 text-xs text-slate-400 hover:bg-slate-800 hover:text-slate-200\"\n >\n ✏️ Edit\n \n handleDelete(entry.id)}\n className=\"rounded-lg border border-slate-700 px-2.5 py-1 text-xs text-slate-400 hover:border-red-500/30 hover:bg-red-500/10 hover:text-red-400\"\n >\n 🗑️\n \n

\n );\n })}\n {entries.length === 0 && (\n

No entries for this date.

\n )}\n

\n\n {/* Edit Modal */}\n {editing && (\n setEditing(null)} />\n )}\n

\n );\n}\n\nfunction EditModal({ entry, onSave, onCancel }: {\n entry: TimeEntry;\n onSave: (entry: TimeEntry) => void;\n onCancel: () => void;\n}) {\n const [status, setStatus] = useState(entry.status);\n const [entryType, setEntryType] = useState(entry.entry_type);\n const [startTime, setStartTime] = useState(toLocalInput(entry.start_time));\n const [endTime, setEndTime] = useState(entry.end_time ? toLocalInput(entry.end_time) : \"\");\n const [note, setNote] = useState(entry.note || \"\");\n\n return (\n

e.stopPropagation()}>\n

Edit Entry

\n Entry Type\n setEntryType(e.target.value)}\n className=\"w-full rounded-xl border border-slate-700 bg-slate-800 px-4 py-2 text-sm text-slate-100 outline-none focus:ring-2 focus:ring-indigo-500\"\n >\n \n \n \n \n \n

\n Status\n setStatus(e.target.value)}\n className=\"w-full rounded-xl border border-slate-700 bg-slate-800 px-4 py-2 text-sm text-slate-100 outline-none focus:ring-2 focus:ring-indigo-500\"\n />\n

\n Start Time\n setStartTime(e.target.value)}\n className=\"w-full rounded-xl border border-slate-700 bg-slate-800 px-3 py-2 text-sm text-slate-100 outline-none focus:ring-2 focus:ring-indigo-500\"\n />\n

\n End Time\n setEndTime(e.target.value)}\n className=\"w-full rounded-xl border border-slate-700 bg-slate-800 px-3 py-2 text-sm text-slate-100 outline-none focus:ring-2 focus:ring-indigo-500\"\n />\n

\n Note\n setNote(e.target.value)}\n rows={2}\n className=\"w-full rounded-xl border border-slate-700 bg-slate-800 px-4 py-2 text-sm text-slate-100 outline-none focus:ring-2 focus:ring-indigo-500\"\n />\n

\n onSave({\n ...entry,\n entry_type: entryType,\n status,\n start_time: fromLocalInput(startTime),\n end_time: endTime ? fromLocalInput(endTime) : null,\n note: note || null,\n })}\n className=\"flex-1 rounded-xl bg-indigo-500 px-4 py-2.5 text-sm font-semibold text-white hover:bg-indigo-600\"\n >\n Save Changes\n \n \n Cancel\n \n

\n );\n}\n\nfunction toLocalInput(iso: string): string {\n const d = new Date(iso);\n const off = d.getTimezoneOffset();\n const local = new Date(d.getTime() - off * 60000);\n return local.toISOString().slice(0, 16);\n}\n\nfunction fromLocalInput(local: string): string {\n return new Date(local).toISOString();\n}\n",[],[156,235,237],"08d6ee95-5306-46ca-8972-9ee77da09127","Settings.tsx","3c0894a4-883e-11f1-b7cd-1607ee4eb77e",25,["D",1784993630138],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useRef } from \"https://esm.sh/react@18.2.0\";\nimport {\n UserProfile, AppSettings,\n apiUpdateProfile, apiUpdateSettings, apiBackup, apiRestore,\n} from \"./lib.ts\";\n\nexport function Settings({\n profile, settings, onProfileChange, onSettingsChange,\n}: {\n profile: UserProfile;\n settings: AppSettings;\n onProfileChange: (p: UserProfile) => void;\n onSettingsChange: (s: AppSettings) => void;\n}) {\n const [repName, setRepName] = useState(profile.rep_name);\n const [employeeId, setEmployeeId] = useState(profile.employee_id);\n const [teamName, setTeamName] = useState(profile.team_name);\n const [department, setDepartment] = useState(profile.department);\n const [company, setCompany] = useState(profile.company);\n const [profileSaved, setProfileSaved] = useState(false);\n const [settingsSaved, setSettingsSaved] = useState(false);\n const [backupMsg, setBackupMsg] = useState(\"\");\n const fileInputRef = useRef(null);\n\n const handleSaveProfile = async () => {\n const updated: UserProfile = {\n rep_name: repName.trim(),\n employee_id: employeeId.trim(),\n team_name: teamName.trim(),\n department: department.trim(),\n company: company.trim(),\n };\n await apiUpdateProfile(updated);\n onProfileChange(updated);\n setProfileSaved(true);\n setTimeout(() => setProfileSaved(false), 2000);\n };\n\n const updateSettings = async (changes: Partial) => {\n const updated = { ...settings, ...changes };\n await apiUpdateSettings(updated);\n onSettingsChange(updated);\n setSettingsSaved(true);\n setTimeout(() => setSettingsSaved(false), 2000);\n };\n\n const handleBackup = async () => {\n setBackupMsg(\"Preparing backup...\");\n const data = await apiBackup();\n const json = JSON.stringify(data, null, 2);\n const blob = new Blob([json], { type: \"application/json\" });\n const url = URL.createObjectURL(blob);\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = `agent-time-clock-backup-${new Date().toISOString().split(\"T\")[0]}.json`;\n a.click();\n URL.revokeObjectURL(url);\n setBackupMsg(`Backup downloaded — ${data.time_entries?.length || 0} entries, ${data.notes?.length || 0} notes`);\n setTimeout(() => setBackupMsg(\"\"), 4000);\n };\n\n const handleRestore = async (e: React.ChangeEvent) => {\n const file = e.target.files?.[0];\n if (!file) return;\n if (!confirm(\"Restore will replace ALL current data with the backup file contents. Continue?\")) {\n if (fileInputRef.current) fileInputRef.current.value = \"\";\n return;\n }\n setBackupMsg(\"Restoring...\");\n try {\n const text = await file.text();\n const data = JSON.parse(text);\n await apiRestore(data);\n setBackupMsg(`Restored ${data.time_entries?.length || 0} entries, ${data.notes?.length || 0} notes. Reload the page to see all changes.`);\n if (data.profile) {\n setRepName(data.profile.rep_name || \"\");\n setEmployeeId(data.profile.employee_id || \"\");\n setTeamName(data.profile.team_name || \"\");\n setDepartment(data.profile.department || \"\");\n setCompany(data.profile.company || \"\");\n onProfileChange(data.profile);\n }\n if (data.settings) {\n onSettingsChange({\n theme: data.settings.theme || \"dark\",\n shift_length: data.settings.shift_length || 480,\n time_format: data.settings.time_format || \"12\",\n default_page: data.settings.default_page || \"dashboard\",\n auto_save: !!data.settings.auto_save,\n });\n }\n } catch (err) {\n setBackupMsg(`Restore failed: ${String(err)}`);\n }\n if (fileInputRef.current) fileInputRef.current.value = \"\";\n setTimeout(() => setBackupMsg(\"\"), 5000);\n };\n\n return (\n

\n {/* User Profile */}\n

User Profile

Your Representative Name appears throughout the app — dashboard, reports, exports, timeline, and notes.

\n Team Name (optional)\n setTeamName(e.target.value)}\n placeholder=\"e.g. Tier 2 Support\"\n className=\"w-full rounded-xl border border-slate-700 bg-slate-800 px-4 py-2.5 text-sm text-slate-100 placeholder-slate-500 outline-none focus:ring-2 focus:ring-indigo-500\"\n />\n

\n \n Save Profile\n \n {profileSaved && (\n ✓ Saved\n )}\n

\n\n {/* Appearance */}\n

Appearance

\n {/* Theme */}\n

Theme

Switch between dark and light mode

\n {([\"dark\", \"light\"] as const).map((t) => (\n updateSettings({ theme: t })}\n className={`rounded-lg px-4 py-1.5 text-sm font-medium capitalize transition-colors ${\n settings.theme === t ? \"bg-indigo-500/20 text-indigo-300\" : \"text-slate-400 hover:text-slate-200\"\n }`}\n >\n {t === \"dark\" ? \"🌙 Dark\" : \"☀️ Light\"}\n \n ))}\n

\n\n {/* Time Format */}\n

Time Format

12-hour (AM/PM) or 24-hour

\n {([\"12\", \"24\"] as const).map((f) => (\n updateSettings({ time_format: f })}\n className={`rounded-lg px-4 py-1.5 text-sm font-medium transition-colors ${\n settings.time_format === f ? \"bg-indigo-500/20 text-indigo-300\" : \"text-slate-400 hover:text-slate-200\"\n }`}\n >\n {f}-hour\n \n ))}\n

\n\n {/* Preferences */}\n

Preferences

\n {/* Default Landing Page */}\n

Default Landing Page

Which tab to show when the app opens

\n updateSettings({ default_page: e.target.value })}\n className=\"rounded-xl border border-slate-700 bg-slate-800 px-4 py-2 text-sm text-slate-100 outline-none focus:ring-2 focus:ring-indigo-500\"\n >\n \n \n \n \n \n \n

\n\n {/* Default Shift Length */}\n

Default Shift Length

Used for shift progress calculations

\n {\n const val = parseInt(e.target.value) || 480;\n updateSettings({ shift_length: val });\n }}\n className=\"w-24 rounded-xl border border-slate-700 bg-slate-800 px-3 py-2 text-sm text-slate-100 outline-none focus:ring-2 focus:ring-indigo-500\"\n />\n minutes\n

\n\n {/* Auto-save */}\n

Auto-save

Automatically save entry edits without clicking Save

\n updateSettings({ auto_save: !settings.auto_save })}\n className={`relative h-7 w-12 rounded-full transition-colors ${settings.auto_save ? \"bg-indigo-500\" : \"bg-slate-600\"}`}\n >\n \n \n

\n {settingsSaved && (\n

✓ Settings saved

\n )}\n

\n\n {/* Backup & Restore */}\n

Backup & Restore

Export all data (entries, notes, profile, settings) to a JSON file, or restore from a previous backup.

\n \n 📥 Download Backup\n \n fileInputRef.current?.click()}\n className=\"flex items-center gap-2 rounded-xl border border-amber-500/30 bg-amber-500/10 px-5 py-3 text-sm font-semibold text-amber-400 transition-colors hover:bg-amber-500/20\"\n >\n 📤 Restore from File\n \n \n

\n {backupMsg && (\n

\n {backupMsg}\n

\n )}\n

\n );\n}\n",[],[156,235,245],"562e642c-3bd6-44a6-908d-579d70554381","Reports.tsx","548e4010-87e8-11f1-8295-1607ee4eb77e",30,["D",1784993683295],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport {\n TimeEntry, apiGetEntriesRange, formatDuration, getStatusColor, getStatusHex, todayStr,\n} from \"./lib.ts\";\n\ntype ReportType = \"daily\" | \"weekly\" | \"monthly\";\n\ninterface StatusBreakdown {\n status: string;\n type: string;\n count: number;\n totalMs: number;\n}\n\ninterface ReportStats {\n byStatus: { label: string; ms: number }[];\n breakdown: StatusBreakdown[];\n totalWork: number;\n totalLunch: number;\n totalBreak: number;\n grandTotal: number;\n distribution: { label: string; ms: number; color: string }[];\n}\n\nexport function Reports({ repName }: { repName: string }) {\n const [reportType, setReportType] = useState(\"daily\");\n const [date, setDate] = useState(todayStr());\n const [entries, setEntries] = useState([]);\n\n const { start, end } = getDateRange(reportType, date);\n\n const load = useCallback(async () => {\n const data = await apiGetEntriesRange(start, end);\n setEntries(data);\n }, [start, end]);\n\n useEffect(() => { load(); }, [load]);\n\n const stats = calculateStats(entries);\n\n return (\n

\n {/* Controls */}\n

\n {([\"daily\", \"weekly\", \"monthly\"] as ReportType[]).map((t) => (\n setReportType(t)}\n className={`rounded-lg px-4 py-2 text-sm font-medium capitalize transition-colors ${\n reportType === t ? \"bg-indigo-500/20 text-indigo-300\" : \"text-slate-400 hover:text-slate-200\"\n }`}\n >\n {t}\n \n ))}\n

\n setDate(e.target.value)}\n className=\"rounded-xl border border-slate-700 bg-slate-800 px-4 py-2 text-sm text-slate-100 outline-none focus:ring-2 focus:ring-indigo-500\"\n />\n

\n\n {/* Period Label */}\n

\n Period: {start} to {end}\n

\n\n {/* Summary Cards */}\n

\n \n \n \n \n

\n\n {/* Charts */}\n

\n {/* Bar Chart */}\n

Time by Status

\n \n

\n\n {/* Donut Chart */}\n

Time Distribution

\n \n

\n\n {/* Breakdown Table */}\n

Detailed Breakdown

\n \n \n \n \n \n \n \n \n \n \n \n {stats.breakdown.map((row) => {\n const c = getStatusColor(row.status);\n return (\n \n \n \n \n \n \n \n );\n })}\n {stats.breakdown.length === 0 && (\n \n )}\n \n

Status	Type	Count	Total Duration	% of Total
\n \n \n {row.status}\n \n	{row.type}	{row.count}	{formatDuration(row.totalMs)}	\n {stats.grandTotal > 0 ? ((row.totalMs / stats.grandTotal) * 100).toFixed(1) : \"0.0\"}%\n
No data for this period.

\n\n {/* Export */}\n

Export Data

\n Export {entries.length} entries from {start} to {end}\n

\n exportCSV(entries, start, end)}\n className=\"flex items-center gap-2 rounded-xl border border-emerald-500/30 bg-emerald-500/10 px-5 py-3 text-sm font-semibold text-emerald-400 transition-colors hover:bg-emerald-500/20\"\n >\n 📄 Export CSV\n \n exportExcel(entries, start, end)}\n className=\"flex items-center gap-2 rounded-xl border border-blue-500/30 bg-blue-500/10 px-5 py-3 text-sm font-semibold text-blue-400 transition-colors hover:bg-blue-500/20\"\n >\n 📊 Export Excel\n \n exportPDF(entries, stats, start, end, reportType)}\n className=\"flex items-center gap-2 rounded-xl border border-rose-500/30 bg-rose-500/10 px-5 py-3 text-sm font-semibold text-rose-400 transition-colors hover:bg-rose-500/20\"\n >\n 📕 Export PDF\n \n

\n );\n}\n\n// ── Stat Card ────────────────────────────────────────────────────\nfunction StatCard({ label, value, icon }: { label: string; value: string; icon: string }) {\n return (\n

\n {icon}\n

{label}

{value}

\n );\n}\n\n// ── Bar Chart ────────────────────────────────────────────────────\nfunction BarChart({ data }: { data: { label: string; ms: number }[] }) {\n const max = Math.max(...data.map((d) => d.ms), 1);\n if (data.length === 0) return

No data

;\n\n return (\n

\n {data.map((d, i) => {\n const c = getStatusColor(d.label);\n const pct = (d.ms / max) * 100;\n return (\n

\n {d.label}\n

\n \n

\n {formatDuration(d.ms)}\n

\n );\n })}\n

\n );\n}\n\n// ── Donut Chart ──────────────────────────────────────────────────\nfunction DonutChart({ data }: { data: { label: string; ms: number; color: string }[] }) {\n const total = data.reduce((s, d) => s + d.ms, 0);\n if (total === 0) return

No data

;\n\n const radius = 70;\n const circumference = 2 * Math.PI * radius;\n let offset = 0;\n\n return (\n

\n \n

\n {data.map((d, i) => (\n

\n \n {d.label}\n {formatDuration(d.ms)}\n {((d.ms / total) * 100).toFixed(0)}%\n

\n ))}\n

\n );\n}\n\n// ── Stats Calculation ────────────────────────────────────────────\nfunction calculateStats(entries: TimeEntry[]): ReportStats {\n const byStatusMap = new Map();\n\n for (const e of entries) {\n const existing = byStatusMap.get(e.status) || { ms: 0, count: 0, type: e.entry_type };\n existing.ms += e.duration_ms || 0;\n existing.count += 1;\n byStatusMap.set(e.status, existing);\n }\n\n const byStatus = Array.from(byStatusMap.entries())\n .map(([label, v]) => ({ label, ms: v.ms }))\n .sort((a, b) => b.ms - a.ms);\n\n const breakdown = Array.from(byStatusMap.entries())\n .map(([status, v]) => ({ status, type: v.type, count: v.count, totalMs: v.ms }))\n .sort((a, b) => b.totalMs - a.totalMs);\n\n const totalWork = entries\n .filter((e) => e.duration_ms && (e.entry_type === \"call_state\" || (e.entry_type === \"clock\" && e.status === \"Clocked In\")))\n .reduce((s, e) => s + (e.duration_ms || 0), 0);\n const totalLunch = entries\n .filter((e) => e.duration_ms && e.entry_type === \"lunch\")\n .reduce((s, e) => s + (e.duration_ms || 0), 0);\n const totalBreak = entries\n .filter((e) => e.duration_ms && e.entry_type === \"break\")\n .reduce((s, e) => s + (e.duration_ms || 0), 0);\n\n const grandTotal = totalWork + totalLunch + totalBreak;\n\n const distribution = [\n { label: \"Work\", ms: totalWork, color: \"#10b981\" },\n { label: \"Lunch\", ms: totalLunch, color: \"#f59e0b\" },\n { label: \"Break\", ms: totalBreak, color: \"#a855f7\" },\n ].filter((d) => d.ms > 0);\n\n return { byStatus, breakdown, totalWork, totalLunch, totalBreak, grandTotal, distribution };\n}\n\n// ── Date Range ───────────────────────────────────────────────────\nfunction getDateRange(type: ReportType, date: string): { start: string; end: string } {\n const d = new Date(date + \"T00:00:00\");\n if (type === \"daily\") {\n return { start: date, end: date };\n }\n if (type === \"weekly\") {\n const day = d.getDay();\n const startD = new Date(d);\n startD.setDate(d.getDate() - day);\n const endD = new Date(startD);\n endD.setDate(startD.getDate() + 6);\n return { start: toISODate(startD), end: toISODate(endD) };\n }\n // monthly\n const startD = new Date(d.getFullYear(), d.getMonth(), 1);\n const endD = new Date(d.getFullYear(), d.getMonth() + 1, 0);\n return { start: toISODate(startD), end: toISODate(endD) };\n}\n\nfunction toISODate(d: Date): string {\n return d.toISOString().split(\"T\")[0];\n}\n\n// ── Export Functions ─────────────────────────────────────────────\nfunction download(content: string, filename: string, type: string) {\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 a.click();\n URL.revokeObjectURL(url);\n}\n\nfunction exportCSV(entries: TimeEntry[], start: string, end: string) {\n const headers = [\"ID\", \"Type\", \"Status\", \"Start Time\", \"End Time\", \"Duration (ms)\", \"Duration\", \"Note\"];\n const rows = entries.map((e) => [\n e.id, e.entry_type, e.status, e.start_time, e.end_time || \"\",\n e.duration_ms || \"\", formatDuration(e.duration_ms), e.note || \"\",\n ]);\n const csv = [headers, ...rows]\n .map((row) => row.map((cell) => `\"${String(cell).replace(/\"/g, '\"\"')}\"`).join(\",\"))\n .join(\"\\n\");\n download(csv, `time_entries_${start}_to_${end}.csv`, \"text/csv\");\n}\n\nfunction exportExcel(entries: TimeEntry[], start: string, end: string) {\n const rows = entries.map((e) =>\n `${e.id}${e.entry_type}${e.status}${e.start_time}${e.end_time || \"\"}${e.duration_ms || \"\"}${formatDuration(e.duration_ms)}${e.note || \"\"}`\n ).join(\"\");\n const html = `${rows}

ID	Type	Status	Start Time	End Time	Duration (ms)	Duration	Note

`;\n download(html, `time_entries_${start}_to_${end}.xls`, \"application/vnd.ms-excel\");\n}\n\nfunction exportPDF(entries: TimeEntry[], stats: ReportStats, start: string, end: string, reportType: string) {\n const win = window.open(\"\", \"_blank\");\n if (!win) return;\n const rows = entries.map((e) =>\n `${e.status}${e.entry_type}${new Date(e.start_time).toLocaleString()}${e.end_time ? new Date(e.end_time).toLocaleString() : \"ongoing\"}${formatDuration(e.duration_ms)}`\n ).join(\"\");\n win.document.write(`Time Report ${start} to ${end}\n

Agent Time Report

${reportType.charAt(0).toUpperCase() + reportType.slice(1)} report — ${start} to ${end}

Total Work

${formatDuration(stats.totalWork)}

Total Lunch

${formatDuration(stats.totalLunch)}

Total Break

${formatDuration(stats.totalBreak)}

Entries

${entries.length}

\n ${rows}

Status	Type	Start	End	Duration

Use your browser's Print dialog to save as PDF (Ctrl+P or Cmd+P)

\n \n `);\n win.document.close();\n}\n",[],[156,235,253],"bb35e549-41d8-487c-8a8f-842fe9f12ea4",["D",1785155879318],[],[156,235,38],"45f2b8ab-dbd8-4710-b738-399c5efa8d65","Notes.tsx","43a8d6f2-87e8-11f1-8547-1607ee4eb77e",29,["D",1784993683287],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport { Note, apiGetNotes, apiAddNote, apiDeleteNote, formatTime, todayStr } from \"./lib.ts\";\n\nexport function Notes({ repName }: { repName: string }) {\n const [date, setDate] = useState(todayStr());\n const [notes, setNotes] = useState([]);\n const [text, setText] = useState(\"\");\n\n const load = useCallback(async () => {\n const data = await apiGetNotes(date);\n setNotes(data);\n }, [date]);\n\n useEffect(() => { load(); }, [load]);\n\n const handleAdd = async () => {\n if (!text.trim()) return;\n await apiAddNote(text.trim());\n setText(\"\");\n await load();\n };\n\n const handleDelete = async (id: number) => {\n await apiDeleteNote(id);\n await load();\n };\n\n return (\n

\n {/* Date Picker + Add Note */}\n

\n Date:\n setDate(e.target.value)}\n className=\"rounded-xl border border-slate-700 bg-slate-800 px-4 py-2 text-sm text-slate-100 outline-none focus:ring-2 focus:ring-indigo-500\"\n />\n

\n setText(e.target.value)}\n onKeyDown={(e) => e.key === \"Enter\" && handleAdd()}\n placeholder=\"Add a timestamped note...\"\n className=\"flex-1 rounded-xl border border-slate-700 bg-slate-800 px-4 py-3 text-sm text-slate-100 placeholder-slate-500 outline-none focus:ring-2 focus:ring-indigo-500\"\n />\n \n Add Note\n \n

\n\n {/* Notes List */}\n

\n Notes — {new Date(date + \"T00:00:00\").toLocaleDateString([], { weekday: \"long\", month: \"long\", day: \"numeric\" })}\n

\n {notes.map((note) => (\n

📝

{note.text}

{formatTime(note.timestamp)}

\n handleDelete(note.id)}\n className=\"shrink-0 rounded-lg p-1.5 text-slate-500 hover:bg-red-500/10 hover:text-red-400\"\n >\n 🗑️\n \n

\n ))}\n {notes.length === 0 && (\n

No notes for this date.

\n )}\n

\n );\n}\n",[],[156,235,265],"44d0474e-9188-4f3c-bb15-945c3fdc5bc8","MiniStatus.tsx","3682e1ee-88b4-11f1-8b70-1607ee4eb77e",42,["D",1785044301428],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport {\n TimeEntry, CALL_STATES,\n apiAction, apiGetStatus, apiGetSettings,\n formatDuration, formatTime, formatClock,\n getStatusColor, getStatusHex,\n} from \"./lib.ts\";\n\nexport function MiniStatus() {\n const [currentEntry, setCurrentEntry] = useState(null);\n const [elapsed, setElapsed] = useState(0);\n const [clock, setClock] = useState(new Date());\n const [settings, setSettings] = useState({ theme: \"dark\", time_format: \"12\" } as any);\n const [saving, setSaving] = useState(false);\n\n const refreshStatus = useCallback(async () => {\n const entry = await apiGetStatus();\n setCurrentEntry(entry);\n }, []);\n\n useEffect(() => {\n apiGetSettings().then((s) => setSettings(s)).catch(() => {});\n refreshStatus();\n // Auto-refresh status every 10s\n const poll = setInterval(refreshStatus, 10_000);\n return () => clearInterval(poll);\n }, [refreshStatus]);\n\n // Apply theme\n useEffect(() => {\n document.documentElement.classList.toggle(\"light\", settings.theme === \"light\");\n }, [settings.theme]);\n\n // Live clock + elapsed timer\n useEffect(() => {\n const interval = setInterval(() => {\n setClock(new Date());\n if (currentEntry?.start_time) {\n setElapsed(Date.now() - new Date(currentEntry.start_time).getTime());\n }\n }, 1000);\n return () => clearInterval(interval);\n }, [currentEntry]);\n\n const doAction = async (type: string, status: string) => {\n setSaving(true);\n try {\n await apiAction(type, status);\n await refreshStatus();\n } finally {\n setSaving(false);\n }\n };\n\n const handleSelect = (e: React.ChangeEvent) => {\n const status = e.target.value;\n if (status) doAction(\"call_state\", status);\n };\n\n const status = currentEntry?.status || \"Clocked Out\";\n const statusColor = getStatusColor(status);\n const statusHex = getStatusHex(status);\n const isClockedIn = currentEntry && currentEntry.status !== \"Clocked Out\";\n const isOnLunch = currentEntry?.entry_type === \"lunch\";\n const isOnBreak = currentEntry?.entry_type === \"break\";\n\n return (\n

\n {/* Clock */}\n

\n \n {clock.toLocaleDateString([], { weekday: \"short\", month: \"short\", day: \"numeric\" })}\n \n

\n {formatClock(clock)}\n

\n\n {/* Current Status */}\n \n

\n \n {status}\n

\n {currentEntry && (\n

\n Since {formatTime(currentEntry.start_time)}\n

\n )}\n

\n {formatDuration(elapsed)}\n

\n\n {/* Call State Dropdown */}\n

\n \n Switch State\n \n \n \n {CALL_STATES.map((s) => (\n \n ))}\n \n

\n\n {/* Quick Action Buttons */}\n

\n doAction(\"clock\", \"Clocked In\")}\n color=\"emerald\"\n />\n doAction(\"clock\", \"Clocked Out\")}\n color=\"slate\"\n />\n doAction(\"lunch\", \"Lunch\")}\n color=\"amber\"\n />\n doAction(\"break\", \"Break\")}\n color=\"purple\"\n />\n

\n\n {/* Link to full dashboard */}\n

\n \n ← Full Dashboard\n \n

\n );\n}\n\nfunction MiniBtn({ label, disabled, onClick, color }: {\n label: string;\n disabled?: boolean;\n onClick: () => void;\n color: \"emerald\" | \"slate\" | \"amber\" | \"purple\";\n}) {\n const colors: Record = {\n emerald: \"bg-emerald-500/10 border-emerald-500/30 text-emerald-400 hover:bg-emerald-500/20\",\n slate: \"bg-slate-500/10 border-slate-500/30 text-slate-300 hover:bg-slate-500/20\",\n amber: \"bg-amber-500/10 border-amber-500/30 text-amber-400 hover:bg-amber-500/20\",\n purple: \"bg-purple-500/10 border-purple-500/30 text-purple-400 hover:bg-purple-500/20\",\n };\n return (\n \n {label}\n \n );\n}\n",[],[156,235,273],"9c30fc05-443a-4277-bb7a-9a99f8dccd8b","Dashboard.tsx","389bec22-87e8-11f1-95d1-1607ee4eb77e",38,["D",1785044048087],7,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport {\n TimeEntry, CALL_STATES, apiAction, apiGetEntries, formatDuration, formatTime,\n getStatusColor, getEntryTypeIcon, todayStr,\n} from \"./lib.ts\";\n\nexport function Dashboard({ currentEntry, onStatusChange, repName, shiftLength }: {\n currentEntry: TimeEntry | null;\n onStatusChange: () => void;\n repName: string;\n shiftLength: number;\n}) {\n const [entries, setEntries] = useState([]);\n const [elapsed, setElapsed] = useState(0);\n const [dropdownOpen, setDropdownOpen] = useState(false);\n const [search, setSearch] = useState(\"\");\n\n const loadEntries = useCallback(async () => {\n const data = await apiGetEntries(todayStr());\n setEntries(data);\n }, []);\n\n useEffect(() => {\n loadEntries();\n }, [loadEntries]);\n\n // Live timer\n useEffect(() => {\n if (!currentEntry?.start_time) {\n setElapsed(0);\n return;\n }\n const update = () => {\n setElapsed(Date.now() - new Date(currentEntry.start_time).getTime());\n };\n update();\n const interval = setInterval(update, 1000);\n return () => clearInterval(interval);\n }, [currentEntry]);\n\n // Close modal on Escape\n useEffect(() => {\n if (!dropdownOpen) return;\n function handleKey(e: KeyboardEvent) {\n if (e.key === \"Escape\") {\n setDropdownOpen(false);\n setSearch(\"\");\n }\n }\n document.addEventListener(\"keydown\", handleKey);\n return () => document.removeEventListener(\"keydown\", handleKey);\n }, [dropdownOpen]);\n\n const doAction = async (type: string, status: string) => {\n await apiAction(type, status);\n await onStatusChange();\n await loadEntries();\n };\n\n const handleCallState = async (status: string) => {\n await apiAction(\"call_state\", status);\n setDropdownOpen(false);\n setSearch(\"\");\n await onStatusChange();\n await loadEntries();\n };\n\n const status = currentEntry?.status || \"Clocked Out\";\n const statusColor = getStatusColor(status);\n const isClockedIn = currentEntry && currentEntry.status !== \"Clocked Out\";\n const isOnLunch = currentEntry?.entry_type === \"lunch\";\n const isOnBreak = currentEntry?.entry_type === \"break\";\n\n // Build full entry list including live duration for open entry\n const allEntries = [...entries];\n if (currentEntry && !entries.find((e) => e.id === currentEntry.id)) {\n allEntries.push({\n ...currentEntry,\n duration_ms: Date.now() - new Date(currentEntry.start_time).getTime(),\n });\n }\n\n const totalWorkMs = allEntries\n .filter((e) => e.duration_ms && (e.entry_type === \"call_state\" || (e.entry_type === \"clock\" && e.status === \"Clocked In\")))\n .reduce((sum, e) => sum + (e.duration_ms || 0), 0);\n const totalLunchMs = allEntries\n .filter((e) => e.duration_ms && e.entry_type === \"lunch\")\n .reduce((sum, e) => sum + (e.duration_ms || 0), 0);\n const totalBreakMs = allEntries\n .filter((e) => e.duration_ms && e.entry_type === \"break\")\n .reduce((sum, e) => sum + (e.duration_ms || 0), 0);\n\n const filteredStates = CALL_STATES.filter((s) =>\n s.toLowerCase().includes(search.toLowerCase()),\n );\n\n return (\n

\n {/* Status + Live Timer Card */}\n

\n {getEntryTypeIcon(currentEntry?.entry_type || \"clock\")}\n

Current Status

{status}

\n Since {currentEntry ? formatTime(currentEntry.start_time) : \"—\"}\n

Elapsed Time

\n {formatDuration(elapsed)}\n

\n\n {/* Call State Selector */}\n

Call State Selector

\n setDropdownOpen(true)}\n className={`flex w-full items-center justify-between rounded-xl border px-4 py-3 text-left transition-colors ${statusColor.border} ${statusColor.bg}`}\n >\n

\n \n {currentEntry?.status || \"Select a state\"}\n

\n Click to open\n \n

\n\n {/* Call State Modal */}\n {dropdownOpen && (\n { setDropdownOpen(false); setSearch(\"\"); }}\n >\n e.stopPropagation()}\n >\n {/* Modal Header */}\n

Select Call State

\n { setDropdownOpen(false); setSearch(\"\"); }}\n className=\"rounded-lg p-1.5 text-slate-400 hover:bg-slate-800 hover:text-slate-200 transition-colors\"\n >\n \n \n

\n\n {/* Search */}\n

\n setSearch(e.target.value)}\n className=\"w-full rounded-lg bg-slate-800 px-4 py-2.5 text-sm text-slate-100 placeholder-slate-500 outline-none focus:ring-2 focus:ring-indigo-500\"\n autoFocus\n />\n

\n\n {/* State Grid */}\n

\n {filteredStates.map((s) => {\n const c = getStatusColor(s);\n const isActive = currentEntry?.status === s;\n return (\n handleCallState(s)}\n className={`flex items-center gap-2.5 rounded-xl border px-3 py-3 text-left text-sm transition-all hover:scale-105 active:scale-95 ${isActive ? \"border-slate-600 bg-slate-800\" : \"border-slate-700 bg-slate-800/50 hover:bg-slate-800\"}`}\n >\n \n {s}\n {isActive && ●}\n \n );\n })}\n

\n {filteredStates.length === 0 && (\n

No matching states

\n )}\n

\n \n )}\n\n {/* Action Buttons */}\n

\n doAction(\"clock\", \"Clocked In\")} />\n doAction(\"clock\", \"Clocked Out\")} />\n doAction(\"lunch\", \"Lunch\")} />\n handleCallState(\"Ready\")} />\n doAction(\"break\", \"Break\")} />\n handleCallState(\"Ready\")} />\n

\n\n {/* Today's Summary */}\n

\n \n \n \n

\n\n {/* Recent Activity */}\n

Recent Activity

\n {allEntries.slice(-10).reverse().map((entry) => {\n const c = getStatusColor(entry.status);\n return (\n

\n \n {entry.status}\n \n {formatTime(entry.start_time)} → {entry.end_time ? formatTime(entry.end_time) : \"now\"}\n \n \n {formatDuration(entry.duration_ms)}\n \n

\n );\n })}\n {allEntries.length === 0 && (\n

No activity yet today. Clock in to get started.

\n )}\n

\n \n );\n}\n\nfunction ActionButton({ label, icon, color, disabled, onClick }: {\n label: string;\n icon: string;\n color: \"emerald\" | \"slate\" | \"amber\" | \"purple\";\n disabled?: boolean;\n onClick: () => void;\n}) {\n const colors: Record = {\n emerald: \"bg-emerald-500/10 border-emerald-500/30 text-emerald-400 hover:bg-emerald-500/20\",\n slate: \"bg-slate-500/10 border-slate-500/30 text-slate-300 hover:bg-slate-500/20\",\n amber: \"bg-amber-500/10 border-amber-500/30 text-amber-400 hover:bg-amber-500/20\",\n purple: \"bg-purple-500/10 border-purple-500/30 text-purple-400 hover:bg-purple-500/20\",\n };\n return (\n \n {icon}\n {label}\n \n );\n}\n\nfunction SummaryCard({ label, value, icon, color }: {\n label: string;\n value: string;\n icon: string;\n color: \"emerald\" | \"amber\" | \"purple\";\n}) {\n const colors: Record = {\n emerald: \"text-emerald-400\",\n amber: \"text-amber-400\",\n purple: \"text-purple-400\",\n };\n return (\n

\n {icon}\n

{label}

{value}

\n );\n}\n",[],[156,235,281],"02c7aa34-f407-4030-a5af-ac1359bd7081","App.tsx","2f171aa0-87e8-11f1-8d73-1607ee4eb77e",33,["D",1784994240455],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useCallback, useRef } from \"https://esm.sh/react@18.2.0\";\nimport { Dashboard } from \"./Dashboard.tsx\";\nimport { Timeline } from \"./Timeline.tsx\";\nimport { Notes } from \"./Notes.tsx\";\nimport { Reports } from \"./Reports.tsx\";\nimport { Settings } from \"./Settings.tsx\";\nimport {\n TimeEntry, UserProfile, AppSettings,\n apiGetStatus, apiGetProfile, apiGetSettings,\n getStatusColor, setGlobalTimeFormat, formatClock,\n} from \"./lib.ts\";\n\ntype Tab = \"dashboard\" | \"timeline\" | \"notes\" | \"reports\" | \"settings\";\n\nconst defaultProfile: UserProfile = {\n rep_name: \"\", employee_id: \"\", team_name: \"\", department: \"\", company: \"\",\n};\n\nconst defaultSettings: AppSettings = {\n theme: \"dark\", shift_length: 480, time_format: \"12\", default_page: \"dashboard\", auto_save: true,\n};\n\nconst validTabs: Tab[] = [\"dashboard\", \"timeline\", \"notes\", \"reports\", \"settings\"];\n\nexport function App() {\n const [tab, setTab] = useState(\"dashboard\");\n const [currentEntry, setCurrentEntry] = useState(null);\n const [clock, setClock] = useState(new Date());\n const [refreshKey, setRefreshKey] = useState(0);\n const [profile, setProfile] = useState(defaultProfile);\n const [settings, setSettings] = useState(defaultSettings);\n const initialTabApplied = useRef(false);\n\n const refreshStatus = useCallback(async () => {\n const entry = await apiGetStatus();\n setCurrentEntry(entry);\n setRefreshKey((k) => k + 1);\n }, []);\n\n // Load profile + settings on mount\n useEffect(() => {\n apiGetProfile().then(setProfile).catch(() => {});\n apiGetSettings().then(setSettings).catch(() => {});\n refreshStatus();\n }, [refreshStatus]);\n\n // Apply theme to \n useEffect(() => {\n document.documentElement.classList.toggle(\"light\", settings.theme === \"light\");\n }, [settings.theme]);\n\n // Apply time format globally\n useEffect(() => {\n setGlobalTimeFormat(settings.time_format);\n }, [settings.time_format]);\n\n // Set default landing page once settings load\n useEffect(() => {\n if (!initialTabApplied.current && settings.default_page && validTabs.includes(settings.default_page as Tab)) {\n setTab(settings.default_page as Tab);\n initialTabApplied.current = true;\n }\n }, [settings.default_page]);\n\n // Live clock\n useEffect(() => {\n const interval = setInterval(() => setClock(new Date()), 1000);\n return () => clearInterval(interval);\n }, []);\n\n const status = currentEntry?.status || \"Clocked Out\";\n const statusColor = getStatusColor(status);\n const isClockedIn = currentEntry && currentEntry.status !== \"Clocked Out\";\n const repName = profile.rep_name || \"Agent\";\n\n const tabs: { id: Tab; label: string; icon: string }[] = [\n { id: \"dashboard\", label: \"Dashboard\", icon: \"📊\" },\n { id: \"timeline\", label: \"Timeline\", icon: \"📅\" },\n { id: \"notes\", label: \"Notes\", icon: \"📝\" },\n { id: \"reports\", label: \"Reports\", icon: \"📈\" },\n { id: \"settings\", label: \"Settings\", icon: \"⚙️\" },\n ];\n\n return (\n

\n {/* Header */}\n

\n {/* Logo */}\n

\n 🕐\n

Agent Time Clock

{repName}

\n\n {/* Status + Clock */}\n

\n \n {status}\n

\n {formatClock(clock)}\n

\n {clock.toLocaleDateString([], { weekday: \"short\", month: \"short\", day: \"numeric\" })}\n

\n\n {/* Tab Navigation */}\n

\n {tabs.map((t) => (\n setTab(t.id)}\n className={`flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors whitespace-nowrap ${\n tab === t.id\n ? \"bg-indigo-500/20 text-indigo-300\"\n : \"text-slate-400 hover:bg-slate-800 hover:text-slate-200\"\n }`}\n >\n {t.icon}\n {t.label}\n \n ))}\n

\n\n {/* Content */}\n

\n {tab === \"dashboard\" && }\n {tab === \"timeline\" && }\n {tab === \"notes\" && }\n {tab === \"reports\" && }\n {tab === \"settings\" && (\n \n )}\n

\n\n {/* Footer */}\n \n

\n );\n}\n",[],[156,235,290],"0cdfe029-3252-44fe-b955-118b4954a690",4,["D",1784956662790],[175,176,177,178,179,180,181,182,183],[156,235],["D",1784956649281],[174,184,185,186,187],[156],["D",1784843445795],["D",1789562426294],{"_105":104,"_113":109},{"_105":104,"_106":107,"_108":109,"_19":60,"_110":111,"_112":30},{"_13":94,"_37":95,"_48":47,"_96":49,"_97":-5,"_98":-5,"_99":-5,"_100":-5,"_101":-5,"_102":50,"_103":104},"ctx",{"_87":-5,"_132":343,"_344":345,"_346":347,"_348":30,"_349":30,"_350":30,"_351":64,"_352":-5,"_353":-7,"_354":-7,"_355":68,"_356":30,"_357":30,"_358":-5,"_359":30,"_360":30,"_361":30,"_362":-5},"ENV",{"_314":315,"_316":317,"_318":95,"_319":320,"_321":322,"_323":324,"_325":326,"_327":328,"_329":330,"_331":332,"_333":334,"_335":336,"_337":338,"_339":340,"_341":342},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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 · v48