/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useEffect, useState } from "https://esm.sh/react@18.2.0"; function BusinessDashboard() { const [businesses, setBusinesses] = useState([]); const [newBusiness, setNewBusiness] = useState({ name: "", revenue: "", employees: "", }); const [isOffline, setIsOffline] = useState(!navigator.onLine); useEffect(() => { // Check online/offline status window.addEventListener('online', handleOnline); window.addEventListener('offline', handleOffline); fetchBusinesses(); return () => { window.removeEventListener('online', handleOnline); window.removeEventListener('offline', handleOffline); }; }, []); const handleOnline = () => setIsOffline(false); const handleOffline = () => setIsOffline(true); const fetchBusinesses = async () => { try { const response = await fetch("/businesses"); const data = await response.json(); setBusinesses(data); } catch (error) { console.error("Error fetching businesses:", error); } }; const handleSubmit = async (e) => { e.preventDefault(); if (isOffline) { alert("You are offline. Please check your internet connection."); return; } try { const response = await fetch("/businesses", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(newBusiness), }); if (response.ok) { fetchBusinesses(); setNewBusiness({ name: "", revenue: "", employees: "" }); } } catch (error) { console.error("Error adding business:", error); } }; return (

🏢 Business Tracker

{isOffline &&

⚠️ Offline Mode

}

Current Businesses

{businesses.length === 0 ? (

No businesses added yet

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

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

)}

Add New Business

); } function App() { return ; } function client() { // Register service worker for PWA support if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js') .then(registration => { console.log('Service Worker registered with scope:', registration.scope); }) .catch(error => { console.error('Service Worker registration failed:', error); }); } createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const KEY = new URL(import.meta.url).pathname.split("/").at(-1); await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_businesses ( id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, revenue REAL NOT NULL, employees INTEGER NOT NULL ) `); // Handle service worker request if (request.url.includes('/sw.js')) { return new Response(` const CACHE_NAME = 'business-tracker-v1'; const urlsToCache = [ '/', '/index.html', '${import.meta.url}' ]; self.addEventListener('install', (event) => { event.waitUntil( caches.open(CACHE_NAME) .then((cache) => cache.addAll(urlsToCache)) ); }); self.addEventListener('fetch', (event) => { event.respondWith( caches.match(event.request) .then((response) => { if (response) { return response; } return fetch(event.request); }) ); }); `, { headers: { 'Content-Type': 'application/javascript' } }); } if (request.method === "GET" && new URL(request.url).pathname === "/businesses") { const result = await sqlite.execute(`SELECT * FROM ${KEY}_businesses`); return new Response(JSON.stringify(result.rows), { headers: { "Content-Type": "application/json" }, }); } if (request.method === "POST" && new URL(request.url).pathname === "/businesses") { const business = await request.json(); await sqlite.execute( ` INSERT INTO ${KEY}_businesses (name, revenue, employees) VALUES (?, ?, ?) `, [business.name, business.revenue, business.employees], ); return new Response(JSON.stringify({ success: true }), { headers: { "Content-Type": "application/json" }, }); } return new Response( ` Business Tracker

`, { headers: { "Content-Type": "text/html", "Cache-Control": "no-cache, no-store, must-revalidate" }, }, ); } const css = ` body { font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .business-app { max-width: 100%; margin: 0; padding: 15px; background: white; } header { background-color: #007bff; color: white; padding: 15px; text-align: center; position: sticky; top: 0; z-index: 1000; } .offline-indicator { background-color: #ffc107; color: black; padding: 10px; text-align: center; } .dashboard { display: flex; flex-direction: column; gap: 20px; } .business-list, .add-business-form { width: 100%; } table { width: 100%; border-collapse: collapse; margin-top: 10px; } table th, table td { border: 1px solid #ddd; padding: 12px; text-align: left; font-size: 14px; } form { display: flex; flex-direction: column; gap: 15px; } input, button { padding: 12px; margin: 5px 0; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; } button { background-color: #007bff; color: white; border: none; cursor: pointer; transition: background-color 0.3s; } button:disabled { background-color: #cccccc; cursor: not-allowed; } footer { margin-top: 20px; text-align: center; font-size: 0.8em; padding: 10px; } @media (max-width: 600px) { .dashboard { flex-direction: column; } table { font-size: 12px; } input, button { font-size: 14px; } } `;

inventiveIvoryFox