{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}","deleted","label",[99],"permalink","https://www.val.town/x/jpbrasile/task_manager/code/main.tsx","extension","actionData","errors"]
</article></body></html>