[{"_1":2,"_225":-5,"_226":-5},"loaderData",{"_3":4,"_91":92,"_190":191,"_224":-5},"root",{"_5":6,"_32":33,"_58":59,"_89":90},"ctx",{"_7":8,"_18":19,"_20":-5,"_21":22,"_23":24,"_25":26,"_27":26,"_28":29,"_30":31},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5},"sessionClaims","sessionId","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","environmentVariableKeys",[],"user","preferences_keybindings","default","preferences_theme","light","preferences_fixers",false,"preferences_copilot","preferences_model","claude-3-5-haiku-20241022","notification_count",0,"ENV",{"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","e0489e7a699ffd54eb05407c777726bbdb4b433c","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","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","API_URL","https://api.val.town","WORKER_FINGERPRINT","d0746fd0512e0614e3f717607f0da4cd","clerkState",{"_60":61},"__internal_clerk_state",{"_62":63,"_64":43,"_65":66,"_67":66,"_68":26,"_69":66,"_70":66,"_71":66,"_72":66,"_73":66,"_74":66,"_75":66,"_76":66,"_77":78,"_87":26,"_88":26},"__clerk_ssr_state",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__signInForceRedirectUrl","__signUpForceRedirectUrl","__signInFallbackRedirectUrl","__signUpFallbackRedirectUrl","__clerk_debug",{"_79":26,"_80":66,"_81":82,"_83":66,"_84":43,"_85":26,"_86":66},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","remixVersion",2,"routes/_app.v.$handle.$name",{"_93":94,"_95":96,"_94":97,"_185":-5,"_186":-5,"_187":188,"_129":130,"_137":138,"_100":101,"_98":99,"_117":-7,"_50":51,"_189":26},"type","val","author","4d655e75-2d1e-463d-a63f-18408e5008c4",{"_98":99,"_95":96,"_100":101,"_102":-5,"_103":-5,"_104":105,"_106":-5,"_107":108,"_109":110,"_111":26,"_112":110,"_113":114,"_115":116,"_117":118,"_119":26,"_120":31,"_121":31,"_122":31,"_123":124,"_125":31,"_126":31,"_127":-5,"_20":128,"_133":-5,"_134":-7,"_135":136,"_137":138,"_139":140},"name","task_manager","valNameId","c322fba4-ea16-11ef-a393-e6cdfca9ef9f","parentFolderId","isOwned","privacy","public","readme","valType","http","currentVersion","3b455778-ea1a-11ef-bad1-e6cdfca9ef9f","legacyPrivate","id","code","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { twMerge } from \"https://esm.sh/tailwind-merge@1.14.0\";\n\n// Action interface\ninterface Action {\n id?: number;\n dateTime: string;\n clientId: string;\n phone: string;\n meetingSummary: string;\n status: string;\n}\n\n// DatabaseContent component\nfunction DatabaseContent({ data }: { data: Action[] }) {\n return (\n

{JSON.stringify(data, null, 2)}

\n );\n}\n\n// Function to determine status badge style\nfunction getStatusBadgeStyle(status: string, isDarkMode: boolean) {\n const baseStyle = \"px-2 py-1 rounded-full text-xs font-medium\";\n switch (status) {\n case \"Scheduled\":\n return isDarkMode\n ? `${baseStyle} bg-blue-900 text-blue-200`\n : `${baseStyle} bg-blue-100 text-blue-800`;\n case \"Completed\":\n return isDarkMode\n ? `${baseStyle} bg-green-900 text-green-200`\n : `${baseStyle} bg-green-100 text-green-800`;\n case \"Cancelled\":\n return isDarkMode\n ? `${baseStyle} bg-red-900 text-red-200`\n : `${baseStyle} bg-red-100 text-red-800`;\n default:\n return isDarkMode\n ? `${baseStyle} bg-gray-700 text-gray-200`\n : `${baseStyle} bg-gray-200 text-gray-800`;\n }\n}\n\n// Main App component\nfunction App() {\n const [actions, setActions] = useState([]);\n const [editingAction, setEditingAction] = useState(null);\n const [simulatedDate, setSimulatedDate] = useState(new Date().toISOString().split('T')[0]);\n const [dbContent, setDbContent] = useState([]);\n const [showDbContent, setShowDbContent] = useState(false);\n const [darkMode, setDarkMode] = useState(() => {\n if (typeof window !== 'undefined') {\n return localStorage.getItem('darkMode') === 'true';\n }\n return false;\n });\n\n useEffect(() => {\n if (typeof window !== 'undefined') {\n if (darkMode) {\n document.documentElement.classList.add('dark');\n } else {\n document.documentElement.classList.remove('dark');\n }\n localStorage.setItem('darkMode', darkMode.toString());\n }\n }, [darkMode]);\n\n // Apply dark mode on initial render\n useEffect(() => {\n if (darkMode) {\n document.documentElement.classList.add('dark');\n } else {\n document.documentElement.classList.remove('dark');\n }\n }, []);\n\n useEffect(() => {\n fetchActions();\n }, [simulatedDate]);\n\n const fetchActions = async () => {\n const response = await fetch(`/api/actions?simulatedDate=${simulatedDate}`);\n const data = await response.json();\n setActions(data);\n };\n\n const fetchDbContent = async () => {\n const response = await fetch('/api/db-content');\n const data = await response.json();\n setDbContent(data);\n };\n\n const handleSubmit = async (event: React.FormEvent) => {\n event.preventDefault();\n const form = event.currentTarget;\n const formData = new FormData(form);\n const action: Action = {\n dateTime: formData.get('dateTime') as string,\n clientId: formData.get('clientId') as string,\n phone: formData.get('phone') as string,\n meetingSummary: formData.get('meetingSummary') as string,\n status: formData.get('status') as string,\n };\n\n if (editingAction && editingAction.id) {\n await fetch(`/api/actions/${editingAction.id}?simulatedDate=${simulatedDate}`, {\n method: 'PUT',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(action),\n });\n } else {\n await fetch(`/api/actions?simulatedDate=${simulatedDate}`, {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(action),\n });\n }\n\n fetchActions();\n setEditingAction(null);\n form.reset();\n };\n\n const handleDelete = async (id: number) => {\n await fetch(`/api/actions/${id}?simulatedDate=${simulatedDate}`, { method: 'DELETE' });\n fetchActions();\n };\n\n const handleEdit = (action: Action) => {\n setEditingAction(action);\n };\n\n const handleSimulatedDateChange = (event: React.ChangeEvent) => {\n setSimulatedDate(event.target.value);\n };\n\n const toggleDarkMode = () => {\n setDarkMode(prevMode => {\n const newMode = !prevMode;\n if (newMode) {\n document.documentElement.classList.add('dark');\n } else {\n document.documentElement.classList.remove('dark');\n }\n localStorage.setItem('darkMode', newMode.toString());\n return newMode;\n });\n };\n\n return (\n

Scheduling Dashboard

\n Simulated Date:\n \n

\n \n

\n \n \n \n

\n        <select name=\"status\" defaultValue={editingAction?.status || 'Scheduled'} className=\"w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white dark:border-gray-600\">\n          <option value=\"Scheduled\">Scheduled</option>\n          <option value=\"Completed\">Completed</option>\n          <option value=\"Cancelled\">Cancelled</option>\n        </select>\n        <button type=\"submit\" className=\"bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-md transition duration-200\">{editingAction ? 'Update' : 'Add'} Action</button>\n      </form>\n      <div className=\"bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden mb-8\">\n        <table className=\"w-full\">\n          <thead className=\"bg-gray-50 dark:bg-gray-700\">\n            <tr>\n              <th className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider\">Date/Time</th>\n              <th className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider\">Client ID</th>\n              <th className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider\">Phone</th>\n              <th className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider\">Meeting Summary</th>\n              <th className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider\">Status</th>\n              <th className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider\">Actions</th>\n            </tr>\n          </thead>\n          <tbody className=\"bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700\">\n            {actions.map((action) => (\n              <tr key={action.id}>\n                <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300\">{new Date(action.dateTime).toLocaleString()}</td>\n                <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300\">{action.clientId}</td>\n                <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300\">{action.phone}</td>\n                <td className=\"px-6 py-4 text-sm text-gray-700 dark:text-gray-300\">{action.meetingSummary}</td>\n                <td className=\"px-6 py-4 whitespace-nowrap\">\n                  <span className={getStatusBadgeStyle(action.status, darkMode)}>{action.status}</span>\n                </td>\n                <td className=\"px-6 py-4 whitespace-nowrap text-sm font-medium\">\n                  <button onClick={() => handleEdit(action)} className=\"text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-200 mr-2\">Edit</button>\n                  <button onClick={() => handleDelete(action.id!)} className=\"text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-200\">Delete</button>\n                </td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n      <button \n        onClick={() => { fetchDbContent(); setShowDbContent(!showDbContent); }} \n        className=\"bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4 rounded-md mb-4 transition duration-200 dark:bg-green-600 dark:hover:bg-green-700\"\n      >\n        {showDbContent ? 'Hide' : 'Show'} Database Content\n      </button>\n      {showDbContent && (\n        <div className=\"mt-4\">\n          <DatabaseContent data={dbContent} />\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")!).render(<App />);\n}\n\nif (typeof document !== \"undefined\") {\n  client();\n}\n\nexport default async function server(request: Request): Promise<Response> {\n  const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n  const SCHEMA_VERSION = 1;\n\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS actions_${SCHEMA_VERSION} (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      dateTime TEXT NOT NULL,\n      clientId TEXT NOT NULL,\n      phone TEXT NOT NULL,\n      meetingSummary TEXT NOT NULL,\n      status TEXT NOT NULL\n    )\n  `);\n\n  const url = new URL(request.url);\n  const path = url.pathname;\n  const simulatedDate = url.searchParams.get('simulatedDate') || new Date().toISOString().split('T')[0];\n\n  if (path === '/api/actions' && request.method === 'GET') {\n    const result = await sqlite.execute(`\n      SELECT * FROM actions_${SCHEMA_VERSION}\n      WHERE date(dateTime) <= date(?)\n      ORDER BY dateTime\n    `, [simulatedDate]);\n    return new Response(JSON.stringify(result.rows), { headers: { 'Content-Type': 'application/json' } });\n  } else if (path === '/api/actions' && request.method === 'POST') {\n    const action = await request.json();\n    console.log('Received action:', action);\n    await sqlite.execute(\n      `INSERT INTO actions_${SCHEMA_VERSION} (dateTime, clientId, phone, meetingSummary, status) VALUES (?, ?, ?, ?, ?)`,\n      [action.dateTime, action.clientId, action.phone, action.meetingSummary, action.status]\n    );\n    const result = await sqlite.execute(`SELECT last_insert_rowid() as id`);\n    console.log('Inserted action with ID:', result.rows[0].id);\n    return new Response(JSON.stringify({ success: true, id: result.rows[0].id }), { headers: { 'Content-Type': 'application/json' } });\n  } else if (path.startsWith('/api/actions/') && request.method === 'PUT') {\n    const id = path.split('/').pop();\n    const action = await request.json();\n    await sqlite.execute(\n      `UPDATE actions_${SCHEMA_VERSION} SET dateTime = ?, clientId = ?, phone = ?, meetingSummary = ?, status = ? WHERE id = ?`,\n      [action.dateTime, action.clientId, action.phone, action.meetingSummary, action.status, id]\n    );\n    return new Response(JSON.stringify({ success: true }), { headers: { 'Content-Type': 'application/json' } });\n  } else if (path.startsWith('/api/actions/') && request.method === 'DELETE') {\n    const id = path.split('/').pop();\n    await sqlite.execute(`DELETE FROM actions_${SCHEMA_VERSION} WHERE id = ?`, [id]);\n    return new Response(JSON.stringify({ success: true }), { headers: { 'Content-Type': 'application/json' } });\n  } else if (path === '/api/db-content' && request.method === 'GET') {\n    const result = await sqlite.execute(`SELECT * FROM actions_${SCHEMA_VERSION}`);\n    return new Response(JSON.stringify(result.rows), {\n      headers: { 'Content-Type': 'application/json' }\n    });\n  }\n\n  return new Response(`\n    <html>\n      <head>\n        <meta charset=\"UTF-8\">\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n        <title>Scheduling Dashboard</title>\n        <script src=\"https://cdn.tailwindcss.com\"></script>\n        <script>\n          if (localStorage.getItem('darkMode') === 'true') document.documentElement.classList.add('dark');\n        </script>\n      </head>\n      <body class=\"min-h-screen bg-gray-50 dark:bg-gray-900\">\n        <div id=\"root\"></div>\n        <script src=\"https://esm.town/v/std/catch\"></script>\n        <script type=\"module\" src=\"${import.meta.url}\"></script>\n        <footer class=\"mt-8 text-center text-gray-500 dark:text-gray-400\">\n          <a href=\"${import.meta.url.replace(\"esm.town\", \"val.town\")}\" target=\"_top\" class=\"hover:text-gray-700 dark:hover:text-gray-200\">View Source</a>\n        </footer>\n      </body>\n    </html>\n  `,\n  {\n    headers: {\n      \"content-type\": \"text/html\",\n    },\n  });\n}","createdAt",["D",1739458385600],"version",11,"currentUserHasLiked","likeCount","forkCount","referenceCount","dependencyCount",1,"commentCount","prCount","mergedPr",{"_129":130,"_131":132},"handle","jpbrasile","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yb3ZjRTNZZTNId3JWM1pINDZGdUhTVkhRemIifQ","forkedVal","interval","slug","jpbrasile/task_manager","description","@jsxImportSource https://esm.sh/react@18.2.0","versions",[141,144,148,152,156,160,164,168,172,176,179,182],{"_117":118,"_142":-5,"_115":143,"_112":110},"prId",["D",1739458385600],{"_117":145,"_142":-5,"_115":146,"_112":147},10,["D",1739458249217],"e9fc3f4e-ea19-11ef-91ab-e6cdfca9ef9f",{"_117":149,"_142":-5,"_115":150,"_112":151},9,["D",1739458111451],"97e3e5c2-ea19-11ef-b497-e6cdfca9ef9f",{"_117":153,"_142":-5,"_115":154,"_112":155},8,["D",1739458027301],"65b4efa6-ea19-11ef-85d4-e6cdfca9ef9f",{"_117":157,"_142":-5,"_115":158,"_112":159},7,["D",1739457945232],"34c91296-ea19-11ef-a941-e6cdfca9ef9f",{"_117":161,"_142":-5,"_115":162,"_112":163},6,["D",1739457900752],"1a489c8e-ea19-11ef-b33a-e6cdfca9ef9f",{"_117":165,"_142":-5,"_115":166,"_112":167},5,["D",1739457688329],"9baad036-ea18-11ef-9fd4-e6cdfca9ef9f",{"_117":169,"_142":-5,"_115":170,"_112":171},4,["D",1739457535240],"406af3f4-ea18-11ef-bdb4-e6cdfca9ef9f",{"_117":173,"_142":-5,"_115":174,"_112":175},3,["D",1739457237826],"8f2afc56-ea17-11ef-a976-e6cdfca9ef9f",{"_117":90,"_142":-5,"_115":177,"_112":178},["D",1739457111394],"43c91432-ea17-11ef-b098-e6cdfca9ef9f",{"_117":124,"_142":-5,"_115":180,"_112":181},["D",1739457013109],"093403d6-ea17-11ef-ad1a-e6cdfca9ef9f",{"_117":31,"_142":-5,"_115":183,"_112":184},["D",1739456895573],"c3263db4-ea16-11ef-a393-e6cdfca9ef9f","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.pulls._index",{"_95":96,"_94":192,"_129":130,"_137":138,"_98":99,"_220":31,"_221":31,"_50":51,"_222":223},{"_98":99,"_95":96,"_100":101,"_102":-5,"_103":-5,"_104":105,"_106":-5,"_107":108,"_109":110,"_111":26,"_112":110,"_113":114,"_115":193,"_117":118,"_119":26,"_120":31,"_121":31,"_122":31,"_123":124,"_125":31,"_126":31,"_127":-5,"_20":194,"_133":-5,"_134":-7,"_135":136,"_137":138,"_139":195},["D",1739458385600],{"_129":130,"_131":132},[196,198,200,202,204,206,208,210,212,214,216,218],{"_117":118,"_142":-5,"_115":197,"_112":110},["D",1739458385600],{"_117":145,"_142":-5,"_115":199,"_112":147},["D",1739458249217],{"_117":149,"_142":-5,"_115":201,"_112":151},["D",1739458111451],{"_117":153,"_142":-5,"_115":203,"_112":155},["D",1739458027301],{"_117":157,"_142":-5,"_115":205,"_112":159},["D",1739457945232],{"_117":161,"_142":-5,"_115":207,"_112":163},["D",1739457900752],{"_117":165,"_142":-5,"_115":209,"_112":167},["D",1739457688329],{"_117":169,"_142":-5,"_115":211,"_112":171},["D",1739457535240],{"_117":173,"_142":-5,"_115":213,"_112":175},["D",1739457237826],{"_117":90,"_142":-5,"_115":215,"_112":178},["D",1739457111394],{"_117":124,"_142":-5,"_115":217,"_112":181},["D",1739457013109],{"_117":31,"_142":-5,"_115":219,"_112":184},["D",1739456895573],"page","count","prs",[],"routes/_app","actionData","errors"]
</article></body></html>