📊 Period End Closing Activities Tracker

\n\n

\n setNewActivity({ ...newActivity, name: e.target.value })}\n required\n />\n setNewActivity({ ...newActivity, department: e.target.value })}\n required\n />\n setNewActivity({ ...newActivity, deadline: e.target.value })}\n required\n />\n \n \n\n \n \n \n \n \n \n \n \n \n \n \n {activities.map(activity => {\n const isOverdue = new Date(activity.deadline) < new Date() && activity.status !== \"Completed\";\n return (\n \n \n \n \n \n \n \n );\n })}\n \n

Activity	Department	Deadline	Status	Actions
{activity.name}	{activity.department}	{activity.deadline}	{isOverdue ? \"Overdue\" : activity.status}	\n \n

\n \n View Source\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = \"determinedBrownOcelot\";\n const SCHEMA_VERSION = 3;\n const url = new URL(request.url);\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_closing_activities_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL,\n department TEXT NOT NULL,\n deadline TEXT NOT NULL,\n status TEXT NOT NULL,\n completedAt TEXT\n )\n `);\n\n // Handle root path and return HTML\n if (request.method === \"GET\" && (url.pathname === \"/\" || url.pathname === `/${KEY}`)) {\n return new Response(\n `\n \n \n Closing Activities Tracker\n \n \n \n \n

\n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n }\n\n // Existing routes for activities\n if (request.method === \"GET\" && url.pathname === \"/activities\") {\n const result = await sqlite.execute(`\n SELECT * FROM ${KEY}_closing_activities_${SCHEMA_VERSION}\n ORDER BY deadline ASC\n `);\n return new Response(JSON.stringify(result.rows), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n if (request.method === \"POST\" && url.pathname === \"/activities\") {\n const activity = await request.json();\n await sqlite.execute(\n `\n INSERT INTO ${KEY}_closing_activities_${SCHEMA_VERSION} \n (name, department, deadline, status) \n VALUES (?, ?, ?, ?)\n `,\n [activity.name, activity.department, activity.deadline, activity.status],\n );\n return new Response(\"Activity added\", { status: 200 });\n }\n\n if (request.method === \"PUT\" && /\\/activities\\/\\d+/.test(url.pathname)) {\n const activity = await request.json();\n await sqlite.execute(\n `\n UPDATE ${KEY}_closing_activities_${SCHEMA_VERSION}\n SET status = ?, completedAt = ?\n WHERE id = ?\n `,\n [activity.status, activity.completedAt, activity.id],\n );\n return new Response(\"Activity updated\", { status: 200 });\n }\n\n // Default 404 response\n return new Response(\"Not Found\", { status: 404 });\n}\n\nconst css = `\nbody {\n font-family: Arial, sans-serif;\n max-width: 1000px;\n margin: 0 auto;\n padding: 20px;\n background-color: #f4f4f4;\n}\n\n.container {\n background-color: white;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n}\n\n.activity-form {\n display: flex;\n gap: 10px;\n margin-bottom: 20px;\n}\n\n.activity-form input {\n flex-grow: 1;\n padding: 8px;\n border: 1px solid #ddd;\n border-radius: 4px;\n}\n\n.activities-table {\n width: 100%;\n border-collapse: collapse;\n}\n\n.activities-table th, .activities-table td {\n border: 1px solid #ddd;\n padding: 10px;\n text-align: left;\n}\n\n.activities-table .completed {\n background-color: #e6f3e6;\n}\n\n.activities-table .overdue {\n background-color: #fff0f0;\n color: #d9534f;\n}\n\n.source-link {\n display: block;\n margin-top: 20px;\n color: #666;\n text-decoration: none;\n}\n`;","deleted","label",[99],"permalink","https://www.val.town/x/Awash/determinedBrownOcelot/code/main.tsx","extension","actionData","errors"]