\n \n \n \n\n",[],[156,202],"fcc37f1d-4108-47fb-ae30-c5335bb446e5","lib.ts","29c2ba46-87e8-11f1-8d73-1607ee4eb77e","e524f53e-4df4-4bca-8ea3-c067f5c12448",23,["D",1784993603945],"/** @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\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 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,219,211],"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,219,221],"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 \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 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 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 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 \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,219,229],"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,219,237],"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,219,245],"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 {/* 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,219,253],"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,219,262],"0cdfe029-3252-44fe-b955-118b4954a690",4,["D",1784956662790],[175,176,177,178,179,180,181],[156,219],["D",1784956649281],[174,182,183,184],[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":315,"_316":317,"_318":319,"_320":30,"_321":30,"_322":30,"_323":64,"_324":-5,"_325":-7,"_326":-7,"_327":68,"_328":30,"_329":30,"_330":-5,"_331":30,"_332":30,"_333":30,"_334":-5},"ENV",{"_286":287,"_288":289,"_290":95,"_291":292,"_293":294,"_295":296,"_297":298,"_299":300,"_301":302,"_303":304,"_305":306,"_307":308,"_309":310,"_311":312,"_313":314},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v40