\n \n \n \n\n",[],[142,188],"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",[],[142,196],"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",[],[142,203],"91814966-e73b-450d-94ac-d4c031c8f2fd","lib.ts","29c2ba46-87e8-11f1-8d73-1607ee4eb77e","e524f53e-4df4-4bca-8ea3-c067f5c12448",57,["D",1785160628583],9,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\n// ── Call State Statuses ──────────────────────────────────────────\nexport const CALL_STATES: string[] = [\n \"On Call\",\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// ── Call Log API ──────────────────────────────────────────────────\nexport interface CallLog {\n id: number;\n call_id: string | null;\n direction: string;\n phone: string | null;\n start_time: string;\n end_time: string | null;\n duration_ms: number | null;\n entry_id: number | null;\n}\n\nexport async function apiCallEvent(event: {\n event: \"incoming\" | \"ended\";\n callId?: string;\n phone?: string;\n direction?: string;\n}): Promise {\n const res = await fetch(\"/api/call-event\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(event),\n });\n return await res.json();\n}\n\nexport async function apiGetCallLog(date?: string): Promise {\n const d = date || todayStr();\n const res = await fetch(`/api/call-log?date=${d}`);\n const data = await res.json();\n return data.calls || [];\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 === \"On Call\")\n return { bg: \"bg-green-500/10\", text: \"text-green-400\", border: \"border-green-500/30\", dot: \"bg-green-500\", ring: \"ring-green-500/20\" };\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 === \"On Call\") return \"#22c55e\";\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",[],[142,221,212],"components","8399f10b-7599-4177-b889-3877a74d8973","Timeline.tsx","43a307ea-87e8-11f1-ac9b-1607ee4eb77e",52,["D",1785156014392],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport {\n TimeEntry, Note, CALL_STATES,\n apiGetEntries, apiGetNotes, apiAddNote, apiDeleteNote,\n apiUpdateEntry, apiDeleteEntry,\n formatDuration, formatTime, getStatusColor, getEntryTypeIcon, todayStr,\n} from \"./lib.ts\";\n\ninterface TimelineEvent {\n kind: \"entry\" | \"note\";\n id: number;\n timestamp: string;\n data: TimeEntry | Note;\n}\n\nexport function Timeline({ repName, autoSave }: { repName: string; autoSave: boolean }) {\n const [date, setDate] = useState(todayStr());\n const [entries, setEntries] = useState([]);\n const [notes, setNotes] = useState([]);\n const [editing, setEditing] = useState(null);\n const [noteText, setNoteText] = useState(\"\");\n\n const load = useCallback(async () => {\n const [entryData, noteData] = await Promise.all([\n apiGetEntries(date),\n apiGetNotes(date),\n ]);\n setEntries(entryData);\n setNotes(noteData);\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 const handleAddNote = async () => {\n if (!noteText.trim()) return;\n await apiAddNote(noteText.trim());\n setNoteText(\"\");\n await load();\n };\n\n const handleDeleteNote = async (id: number) => {\n await apiDeleteNote(id);\n await load();\n };\n\n // Merge entries + notes into a single chronological timeline\n const events: TimelineEvent[] = [\n ...entries.map((e) => ({ kind: \"entry\" as const, id: e.id, timestamp: e.start_time, data: e })),\n ...notes.map((n) => ({ kind: \"note\" as const, id: n.id, timestamp: n.timestamp, data: n })),\n ].sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime());\n\n return (\n

\n {/* Rep Name + Date Picker */}\n

{repName}

Daily Timeline

\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 {/* Quick Note Input */}\n

\n setNoteText(e.target.value)}\n onKeyDown={(e) => e.key === \"Enter\" && handleAddNote()}\n placeholder=\"Add a timestamped note to the timeline...\"\n className=\"flex-1 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 + Note\n \n

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

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

\n {events.map((event, i) => {\n if (event.kind === \"note\") {\n const note = event.data as Note;\n return (\n

\n 📝\n

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

}\n

\n Note\n

{note.text}

{formatTime(note.timestamp)}

\n handleDeleteNote(note.id)}\n className=\"shrink-0 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\n const entry = event.data as TimeEntry;\n const c = getStatusColor(entry.status);\n return (\n

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

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

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

}\n

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

\n \n {entry.status}\n \n {entry.entry_type.replace(\"_\", \" \")}\n \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 {events.length === 0 && (\n

No entries or notes 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 {entryType === \"call_state\" ? (\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 {CALL_STATES.map((s) => (\n \n ))}\n \n ) : (\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

\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",[],[142,221,223],"9414c3a4-7cb3-4afe-9792-8fd2ea0ba0eb","Settings.tsx","3c0894a4-883e-11f1-b7cd-1607ee4eb77e",51,["D",1785155974687],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useRef } from \"https://esm.sh/react@18.2.0\";\nimport {\n UserProfile, AppSettings,\n 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 [settingsSaved, setSettingsSaved] = useState(false);\n const [backupMsg, setBackupMsg] = useState(\"\");\n const fileInputRef = useRef(null);\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-status-logger-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 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 {/* Appearance */}\n

Appearance

\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\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",[],[142,221,231],"2d123e91-7290-4458-8c53-27b9d45d604c","Reports.tsx","548e4010-87e8-11f1-8295-1607ee4eb77e",53,["D",1785156021206],"/** @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, repName)}\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",[],[142,221,239],"bb35e549-41d8-487c-8a8f-842fe9f12ea4","Profile.tsx","001135ca-89b8-11f1-9992-1607ee4eb77e",48,["D",1785155879318],"/** @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",[],[142,221,247],"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",[],[142,221,255],"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",[],[142,221,263],"aa5f4ace-4cb8-4311-aef8-c4b5b7e171bc","Dashboard.tsx","389bec22-87e8-11f1-95d1-1607ee4eb77e",64,["D",1785160726039],13,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport {\n TimeEntry, CallLog, CALL_STATES,\n apiAction, apiGetEntries, apiUpdateFavorites,\n apiCallEvent, apiGetCallLog,\n formatDuration, formatTime,\n getStatusColor, getEntryTypeIcon, isInactiveStatus, todayStr,\n} from \"./lib.ts\";\n\nexport function Dashboard({ currentEntry, onStatusChange, repName, shiftLength, favorites, onFavoritesChange }: {\n currentEntry: TimeEntry | null;\n onStatusChange: () => void;\n repName: string;\n shiftLength: number;\n favorites: string[];\n onFavoritesChange: (f: string[]) => void;\n}) {\n const [entries, setEntries] = useState([]);\n const [elapsed, setElapsed] = useState(0);\n const [callLog, setCallLog] = useState([]);\n const [callPhone, setCallPhone] = useState(\"\");\n\n const loadEntries = useCallback(async () => {\n const data = await apiGetEntries(todayStr());\n setEntries(data);\n }, []);\n\n const loadCallLog = useCallback(async () => {\n const calls = await apiGetCallLog();\n setCallLog(calls);\n }, []);\n\n useEffect(() => {\n loadEntries();\n loadCallLog();\n }, [loadEntries, loadCallLog]);\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 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 if (!status) return;\n await apiAction(\"call_state\", status);\n await onStatusChange();\n await loadEntries();\n };\n\n const toggleFavorite = async (state: string) => {\n let updated: string[];\n if (favorites.includes(state)) {\n updated = favorites.filter((s) => s !== state);\n } else {\n updated = [...favorites, state];\n }\n onFavoritesChange(updated);\n await apiUpdateFavorites(updated);\n };\n\n const handleIncomingCall = async () => {\n await apiCallEvent({ event: \"incoming\", direction: \"inbound\", phone: callPhone || undefined });\n setCallPhone(\"\");\n await onStatusChange();\n await loadEntries();\n await loadCallLog();\n };\n\n const handleEndCall = async () => {\n await apiCallEvent({ event: \"ended\" });\n await onStatusChange();\n await loadEntries();\n await loadCallLog();\n };\n\n const isOnCall = currentEntry?.status === \"On Call\";\n const totalCalls = callLog.length;\n const completedCalls = callLog.filter((c) => c.end_time !== null).length;\n\n const status = currentEntry?.status || \"Clocked Out\";\n const statusColor = getStatusColor(status);\n const isActive = currentEntry && !isInactiveStatus(currentEntry.status);\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.status.includes(\"Lunch\"))\n .reduce((sum, e) => sum + (e.duration_ms || 0), 0);\n const totalBreakMs = allEntries\n .filter((e) => e.duration_ms && e.status.includes(\"Break\"))\n .reduce((sum, e) => sum + (e.duration_ms || 0), 0);\n\n // Valid favorites = only those that exist in CALL_STATES\n const validFavorites = favorites.filter((f) => CALL_STATES.includes(f));\n\n return (\n

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

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

{repName}

{status}

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

Elapsed Time

\n {formatDuration(elapsed)}\n

\n\n {/* Favorite Call State Buttons */}\n {validFavorites.length > 0 && (\n

Favorites

\n {validFavorites.map((s) => {\n const c = getStatusColor(s);\n const isCurrent = currentEntry?.status === s;\n return (\n handleCallState(s)}\n className={`flex items-center gap-2 rounded-lg border px-3 py-2 text-sm font-medium transition-all hover:scale-105 active:scale-95 ${c.border} ${c.bg} ${c.text} ${isCurrent ? \"ring-2 ring-slate-500\" : \"\"}`}\n >\n \n {s}\n \n );\n })}\n

\n )}\n\n {/* Call State Dropdown + Favorite Toggle */}\n

Call State

\n {currentEntry?.status && CALL_STATES.includes(currentEntry.status) && (\n toggleFavorite(currentEntry.status)}\n className={`flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors ${\n favorites.includes(currentEntry.status)\n ? \"border-amber-500/30 bg-amber-500/10 text-amber-400\"\n : \"border-slate-700 text-slate-400 hover:bg-slate-800 hover:text-slate-200\"\n }`}\n >\n {favorites.includes(currentEntry.status) ? \"★\" : \"☆\"}\n {favorites.includes(currentEntry.status) ? \"Favorited\" : \"Add to Favorites\"}\n \n )}\n

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

\n\n {/* Call Logging — Auto-log incoming calls */}\n

📞 Call Logging

\n {isOnCall ? (\n \n 🔴\n End Call — Logged at {formatTime(currentEntry?.start_time || new Date().toISOString())}\n \n ) : (\n

\n setCallPhone(e.target.value)}\n placeholder=\"Caller phone (optional)\"\n className=\"flex-1 rounded-xl border border-slate-700 bg-slate-800 px-4 py-3 text-sm text-slate-100 outline-none focus:ring-2 focus:ring-green-500\"\n />\n \n 📞\n Log Incoming Call\n \n

\n )}\n {/* Call stats */}\n

Total Calls

{totalCalls}

Completed

{completedCalls}

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

\n doAction(\"clock\", \"Clocked In\")} />\n doAction(\"clock\", \"Clocked Out\")} />\n doAction(\"clock\", \"Logged Off\")} />\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. Press Time In to get started.

\n )}\n

\n\n {/* Recent Calls */}\n

Recent Calls

\n {callLog.slice(0, 10).map((call) => (\n

\n \n \n {call.phone || \"Unknown\"}\n \n {call.direction}\n \n {formatTime(call.start_time)} → {call.end_time ? formatTime(call.end_time) : \"now\"}\n \n \n {formatDuration(call.duration_ms)}\n \n

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

No calls logged today. Use the Call Logging button above.

\n )}\n

\n );\n}\n\nfunction ActionButton({ label, icon, color, disabled, onClick }: {\n label: string;\n icon: string;\n color: \"emerald\" | \"slate\" | \"rose\";\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 rose: \"bg-rose-500/10 border-rose-500/30 text-rose-400 hover:bg-rose-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",[],[142,221,271],"36bb9c5c-0ef2-441c-8a62-b2f3704a259d","App.tsx","2f171aa0-87e8-11f1-8d73-1607ee4eb77e",49,["D",1785155899789],"/** @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 { Profile } from \"./Profile.tsx\";\nimport {\n TimeEntry, UserProfile, AppSettings,\n apiGetStatus, apiGetProfile, apiGetSettings, apiGetFavorites,\n getStatusColor, setGlobalTimeFormat, formatClock, isInactiveStatus,\n} from \"./lib.ts\";\n\ntype Tab = \"dashboard\" | \"timeline\" | \"notes\" | \"reports\" | \"profile\" | \"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\", \"profile\", \"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 [favorites, setFavorites] = useState([]);\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 + favorites on mount\n useEffect(() => {\n apiGetProfile().then(setProfile).catch(() => {});\n apiGetSettings().then(setSettings).catch(() => {});\n apiGetFavorites().then(setFavorites).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 && !isInactiveStatus(currentEntry.status);\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: \"profile\", label: \"Profile\", icon: \"👤\" },\n { id: \"settings\", label: \"Settings\", icon: \"⚙️\" },\n ];\n\n return (\n

\n {/* Header */}\n

\n {/* Logo */}\n

\n 🕐\n

Agent Status Logger

{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 === \"profile\" && (\n \n )}\n {tab === \"settings\" && (\n \n )}\n

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

\n );\n}\n",[],[142,221,280],"0cdfe029-3252-44fe-b955-118b4954a690",4,["D",1784956662790],[160,161,162,163,164,165,166,167,168],[142,221],["D",1784956649281],[159,169,170,171,172],[142],["D",1784843445795],["D",1789475460618],{"_11":12,"_92":88},{"_11":12,"_85":86,"_87":88,"_45":46,"_89":90,"_91":38},{"_29":30,"_13":26,"_20":21,"_27":28,"_31":-5,"_32":-5,"_80":-5,"_81":-5,"_82":-5,"_83":14,"_84":12},"ctx",{"_73":-5,"_113":333,"_334":335,"_336":337,"_338":38,"_339":38,"_340":38,"_341":50,"_342":-5,"_343":-7,"_344":-7,"_345":54,"_346":38,"_347":38,"_348":-5,"_349":38,"_350":38,"_351":38,"_352":-5},"ENV",{"_304":305,"_306":307,"_308":26,"_309":310,"_311":312,"_313":314,"_315":316,"_317":318,"_319":320,"_321":322,"_323":324,"_325":326,"_327":328,"_329":330,"_331":332},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Branches1

Branches
1