🏢 Business Tracker

\n {isOffline &&

⚠️ Offline Mode

}\n

Current Businesses

\n {businesses.length === 0 ? (\n

No businesses added yet

\n ) : (\n \n \n \n \n \n \n \n \n \n {businesses.map((business, index) => (\n \n \n \n \n \n ))}\n \n

Name	Revenue	Employees
{business.name}	${business.revenue}	{business.employees}

\n )}\n

\n\n

Add New Business

\n \n

\n );\n}\n\nfunction App() {\n return ;\n}\n\nfunction client() {\n // Register service worker for PWA support\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.register('/sw.js')\n .then(registration => {\n console.log('Service Worker registered with scope:', registration.scope);\n })\n .catch(error => {\n console.error('Service Worker registration failed:', error);\n });\n }\n\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 = \"inventiveIvoryFox\";\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_businesses (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL,\n revenue REAL NOT NULL,\n employees INTEGER NOT NULL\n )\n `);\n\n // Handle service worker request\n if (request.url.includes('/sw.js')) {\n return new Response(`\n const CACHE_NAME = 'business-tracker-v1';\n const urlsToCache = [\n '/',\n '/index.html',\n '${import.meta.url}'\n ];\n\n self.addEventListener('install', (event) => {\n event.waitUntil(\n caches.open(CACHE_NAME)\n .then((cache) => cache.addAll(urlsToCache))\n );\n });\n\n self.addEventListener('fetch', (event) => {\n event.respondWith(\n caches.match(event.request)\n .then((response) => {\n if (response) {\n return response;\n }\n return fetch(event.request);\n })\n );\n });\n `, {\n headers: { 'Content-Type': 'application/javascript' }\n });\n }\n\n if (request.method === \"GET\" && new URL(request.url).pathname === \"/businesses\") {\n const result = await sqlite.execute(`SELECT * FROM ${KEY}_businesses`);\n return new Response(JSON.stringify(result.rows), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/businesses\") {\n const business = await request.json();\n await sqlite.execute(\n `\n INSERT INTO ${KEY}_businesses (name, revenue, employees) \n VALUES (?, ?, ?)\n `,\n [business.name, business.revenue, business.employees],\n );\n\n return new Response(JSON.stringify({ success: true }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n return new Response(\n `\n \n \n \n \n \n Business Tracker\n \n \n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \n \"Content-Type\": \"text/html\",\n \"Cache-Control\": \"no-cache, no-store, must-revalidate\"\n },\n },\n );\n}\n\nconst css = `\nbody {\n font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;\n margin: 0;\n padding: 0;\n background-color: #f4f4f4;\n touch-action: manipulation;\n -webkit-tap-highlight-color: transparent;\n}\n\n.business-app {\n max-width: 100%;\n margin: 0;\n padding: 15px;\n background: white;\n}\n\nheader {\n background-color: #007bff;\n color: white;\n padding: 15px;\n text-align: center;\n position: sticky;\n top: 0;\n z-index: 1000;\n}\n\n.offline-indicator {\n background-color: #ffc107;\n color: black;\n padding: 10px;\n text-align: center;\n}\n\n.dashboard {\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n\n.business-list, .add-business-form {\n width: 100%;\n}\n\ntable {\n width: 100%;\n border-collapse: collapse;\n margin-top: 10px;\n}\n\ntable th, table td {\n border: 1px solid #ddd;\n padding: 12px;\n text-align: left;\n font-size: 14px;\n}\n\nform {\n display: flex;\n flex-direction: column;\n gap: 15px;\n}\n\ninput, button {\n padding: 12px;\n margin: 5px 0;\n border: 1px solid #ddd;\n border-radius: 4px;\n font-size: 16px;\n}\n\nbutton {\n background-color: #007bff;\n color: white;\n border: none;\n cursor: pointer;\n transition: background-color 0.3s;\n}\n\nbutton:disabled {\n background-color: #cccccc;\n cursor: not-allowed;\n}\n\nfooter {\n margin-top: 20px;\n text-align: center;\n font-size: 0.8em;\n padding: 10px;\n}\n\n@media (max-width: 600px) {\n .dashboard {\n flex-direction: column;\n }\n \n table {\n font-size: 12px;\n }\n \n input, button {\n font-size: 14px;\n }\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/Ankit285001/inventiveIvoryFox/code/main.tsx","extension","actionData","errors"]