[{"_1":2,"_207":-5,"_208":-5},"loaderData",{"_3":4,"_91":92,"_115":116,"_206":-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.u.$handle",{"_20":93,"_103":104,"_108":26,"_109":110,"_111":31,"_112":31,"_113":31,"_114":31},{"_94":95,"_96":97,"_98":99,"_100":-5,"_101":102},"id","4d655e75-2d1e-463d-a63f-18408e5008c4","handle","jpbrasile","createdAt",["D",1731753376088],"bio","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yb3ZjRTNZZTNId3JWM1pINDZGdUhTVkhRemIifQ","links",[105],{"_106":107},"url","https://github.com/jpbrasile","isOwned","valCount",1,"likeCount","forkCount","folderCount","projectCount","routes/_app.u.$handle._index",{"_117":31,"_20":118,"_108":26,"_120":121,"_199":26,"_109":110,"_200":201},"page",{"_94":95,"_96":97,"_98":119,"_100":-5,"_101":102},["D",1731753376088],"vals",[122],{"_123":124,"_125":126},"valNameId","c322fba4-ea16-11ef-a393-e6cdfca9ef9f","initialData",{"_127":128,"_129":95,"_123":124,"_130":-5,"_108":-5,"_131":132,"_133":-5,"_134":135,"_136":137,"_138":26,"_94":137,"_139":140,"_98":141,"_142":143,"_144":26,"_111":31,"_145":31,"_146":110,"_147":31,"_112":31,"_148":31,"_149":-5,"_20":150,"_151":-5,"_152":-7,"_153":154,"_155":-5,"_156":157,"_158":159},"name","task_manager","author","parentFolderId","privacy","public","readme","valType","http","currentVersion","3b455778-ea1a-11ef-bad1-e6cdfca9ef9f","legacyPrivate","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}",["D",1739458385600],"version",11,"currentUserHasLiked","referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_96":97,"_101":102},"forkedVal","interval","description","@jsxImportSource https://esm.sh/react@18.2.0","latestEvaluation","slug","jpbrasile/task_manager","versions",[160,164,168,172,176,180,184,188,192,196],{"_98":161,"_142":143,"_162":163},["D",1739458385600],"n","1",{"_98":165,"_142":166,"_162":167},["D",1739458249217],10,"2",{"_98":169,"_142":170,"_162":171},["D",1739458111451],9,"3",{"_98":173,"_142":174,"_162":175},["D",1739458027301],8,"4",{"_98":177,"_142":178,"_162":179},["D",1739457945232],7,"5",{"_98":181,"_142":182,"_162":183},["D",1739457900752],6,"6",{"_98":185,"_142":186,"_162":187},["D",1739457688329],5,"7",{"_98":189,"_142":190,"_162":191},["D",1739457535240],4,"8",{"_98":193,"_142":194,"_162":195},["D",1739457237826],3,"9",{"_98":197,"_142":90,"_162":198},["D",1739457111394],"10","hasNext","filters",{"_202":203,"_204":205,"_131":132},"sort","newest","type","all","routes/_app","actionData","errors"]
</article></body></html>