/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function Button({ children, onClick, className = '' }) { return ( ); } function Input({ placeholder, value, onChange, type = 'text', className = '' }) { return ( ); } function Card({ children, className = '' }) { return (

{children}

); } function CardHeader({ children }) { return

{children}

; } function CardTitle({ children }) { return

{children}

; } function CardContent({ children }) { return

{children}

; } function Table({ children }) { return {children}

; } function TableHeader({ children }) { return {children}; } function TableBody({ children }) { return {children}; } function TableRow({ children, className = '' }) { return {children}; } function TableHead({ children }) { return {children}; } function TableCell({ children }) { return {children}; } function App() { const [leads, setLeads] = useState([]); const [newLead, setNewLead] = useState({ name: '', email: '', phone: '', status: 'New' }); const [error, setError] = useState(null); useEffect(() => { fetchLeads(); }, []); const fetchLeads = async () => { try { const controller = new AbortController(); const timeoutId = setTimeout(() => controller.abort(), 5000); const response = await fetch('/api/leads', { signal: controller.signal }); clearTimeout(timeoutId); if (!response.ok) { throw new Error('Failed to fetch leads'); } const data = await response.json(); setLeads(data); } catch (error) { console.error("Failed to fetch leads", error); setError(error.message); } }; const addLead = async () => { try { const controller = new AbortController(); const timeoutId = setTimeout(() => controller.abort(), 5000); const response = await fetch('/api/leads', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(newLead), signal: controller.signal }); clearTimeout(timeoutId); if (!response.ok) { throw new Error('Failed to add lead'); } await fetchLeads(); setNewLead({ name: '', email: '', phone: '', status: 'New' }); } catch (error) { console.error("Failed to add lead", error); setError(error.message); } }; return (

Sales CRM

{error && (

{error}

)} Add New Lead

setNewLead({...newLead, name: e.target.value})} /> setNewLead({...newLead, email: e.target.value})} /> setNewLead({...newLead, phone: e.target.value})} />

Leads {leads.length === 0 ? (

No leads found

) : ( Name Email Phone Status {leads.map((lead, index) => ( {lead.name} {lead.email} {lead.phone} {lead.status} ))}

)}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { try { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const KEY = new URL(import.meta.url).pathname.split("/").at(-1); // Implement a timeout mechanism const controller = new AbortController(); const timeoutId = setTimeout(() => { controller.abort(); throw new Error('Database operation timed out'); }, 5000); // Create leads table with a timeout-safe approach try { await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_leads ( id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, email TEXT, phone TEXT, status TEXT DEFAULT 'New', created_at DATETIME DEFAULT CURRENT_TIMESTAMP ) `); } catch (error) { console.error('Table creation error:', error); return new Response(JSON.stringify({ error: 'Failed to create table' }), { status: 500, headers: { 'Content-Type': 'application/json' } }); } // Handle API routes with timeout if (request.method === 'GET' && new URL(request.url).pathname === '/api/leads') { try { const leads = await sqlite.execute(`SELECT * FROM ${KEY}_leads ORDER BY created_at DESC LIMIT 100`); clearTimeout(timeoutId); return new Response(JSON.stringify(leads.rows || []), { headers: { 'Content-Type': 'application/json' } }); } catch (error) { console.error('Fetch leads error:', error); return new Response(JSON.stringify({ error: 'Failed to fetch leads' }), { status: 500, headers: { 'Content-Type': 'application/json' } }); } } if (request.method === 'POST' && new URL(request.url).pathname === '/api/leads') { try { const lead = await request.json(); // Validate input if (!lead.name) { return new Response(JSON.stringify({ error: 'Name is required' }), { status: 400, headers: { 'Content-Type': 'application/json' } }); } await sqlite.execute(` INSERT INTO ${KEY}_leads (name, email, phone, status) VALUES (?, ?, ?, ?) `, [lead.name, lead.email || '', lead.phone || '', lead.status || 'New']); clearTimeout(timeoutId); return new Response(JSON.stringify({ success: true }), { headers: { 'Content-Type': 'application/json' } }); } catch (error) { console.error('Add lead error:', error); return new Response(JSON.stringify({ error: 'Failed to add lead' }), { status: 500, headers: { 'Content-Type': 'application/json' } }); } } // Default response return new Response(` Sales CRM

`, { headers: { 'Content-Type': 'text/html' } }); } catch (error) { console.error('Unexpected server error:', error); return new Response(JSON.stringify({ error: 'Unexpected server error' }), { status: 500, headers: { 'Content-Type': 'application/json' } }); } }

shrirudragoud