\n \n \n \n",[18,88],"21edfe3c-547d-11f1-8572-ee650bb23af1",["D",1779303184101],"\n",[18,94],"21edfcc0-547d-11f1-8572-ee650bb23af1",["D",1779303184101],[18,99],"pulls","branches","forks","envVars",{"_95":26,"_224":26},"connections",{"_95":26,"_223":26},"unfilledCount","emptyCount",{"_33":190,"_13":18,"_74":101,"_43":-5,"_35":36,"_191":40,"_192":24,"_37":286,"_39":26,"_77":100,"_194":-5,"_79":30,"_195":-5,"_241":287,"_17":288},{"_33":213,"_13":99,"_74":98,"_43":101,"_35":36,"_191":40,"_192":24,"_37":283,"_39":26,"_77":100,"_194":-5,"_79":30,"_195":-5,"_241":284,"_17":285},{"_33":275,"_13":276,"_74":277,"_43":98,"_35":36,"_191":278,"_192":24,"_37":279,"_39":40,"_77":78,"_194":280,"_79":30,"_195":-5,"_241":281,"_17":282},{"_33":267,"_13":268,"_74":269,"_43":98,"_35":36,"_191":270,"_192":24,"_37":271,"_39":26,"_77":78,"_194":272,"_79":30,"_195":-5,"_241":273,"_17":274},{"_33":260,"_13":261,"_74":262,"_43":98,"_35":36,"_191":96,"_192":24,"_37":263,"_39":26,"_77":78,"_194":264,"_79":30,"_195":-5,"_241":265,"_17":266},{"_33":209,"_13":94,"_74":93,"_43":101,"_35":36,"_191":40,"_192":24,"_37":257,"_39":26,"_77":21,"_194":211,"_79":30,"_195":-5,"_241":258,"_17":259},{"_33":205,"_13":88,"_74":87,"_43":101,"_35":36,"_191":40,"_192":24,"_37":254,"_39":26,"_77":21,"_194":207,"_79":30,"_195":-5,"_241":255,"_17":256},{"_33":201,"_13":76,"_74":75,"_43":101,"_35":36,"_191":40,"_192":24,"_37":251,"_39":26,"_77":78,"_194":203,"_79":30,"_195":-5,"_241":252,"_17":253},{"_33":244,"_13":245,"_74":246,"_43":-5,"_35":36,"_191":140,"_192":24,"_37":247,"_39":40,"_77":21,"_194":248,"_79":30,"_195":-5,"_241":249,"_17":250},{"_33":235,"_13":236,"_74":113,"_43":-5,"_35":36,"_191":237,"_192":24,"_37":238,"_39":40,"_77":239,"_194":240,"_79":30,"_195":-5,"_241":242,"_17":243},"26e25514-547d-11f1-9a83-ee650bb23af1","index.ts",2,["D",1779303192500],"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Initialize database with demo data\nasync function initDatabase() {\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS deals (\n id INTEGER PRIMARY KEY,\n name TEXT NOT NULL,\n company TEXT NOT NULL,\n status TEXT NOT NULL,\n amount INTEGER NOT NULL,\n createdAt TEXT NOT NULL\n )\n `);\n\n // Check if demo data exists\n const result = await sqlite.execute(\"SELECT COUNT(*) as count FROM deals\");\n const count = (result.rows[0] as any)?.count || 0;\n\n if (count === 0) {\n // Insert demo data\n await sqlite.batch([\n {\n sql: \"INSERT INTO deals (name, company, status, amount, createdAt) VALUES (?, ?, ?, ?, ?)\",\n args: [\"Website Redesign\", \"Acme Corp\", \"lead\", 15000, new Date().toISOString()],\n },\n {\n sql: \"INSERT INTO deals (name, company, status, amount, createdAt) VALUES (?, ?, ?, ?, ?)\",\n args: [\"API Integration\", \"TechStart Inc\", \"lead\", 8000, new Date().toISOString()],\n },\n {\n sql: \"INSERT INTO deals (name, company, status, amount, createdAt) VALUES (?, ?, ?, ?, ?)\",\n args: [\"Analytics Dashboard\", \"DataFlow Ltd\", \"qualified\", 25000, new Date().toISOString()],\n },\n {\n sql: \"INSERT INTO deals (name, company, status, amount, createdAt) VALUES (?, ?, ?, ?, ?)\",\n args: [\"CRM Implementation\", \"Global Logistics\", \"qualified\", 45000, new Date().toISOString()],\n },\n {\n sql: \"INSERT INTO deals (name, company, status, amount, createdAt) VALUES (?, ?, ?, ?, ?)\",\n args: [\"Support Package\", \"FinServ Solutions\", \"proposal\", 12000, new Date().toISOString()],\n },\n {\n sql: \"INSERT INTO deals (name, company, status, amount, createdAt) VALUES (?, ?, ?, ?, ?)\",\n args: [\"Enterprise License\", \"BigBank Group\", \"proposal\", 75000, new Date().toISOString()],\n },\n {\n sql: \"INSERT INTO deals (name, company, status, amount, createdAt) VALUES (?, ?, ?, ?, ?)\",\n args: [\"Migration Services\", \"RetailCo\", \"negotiation\", 35000, new Date().toISOString()],\n },\n {\n sql: \"INSERT INTO deals (name, company, status, amount, createdAt) VALUES (?, ?, ?, ?, ?)\",\n args: [\"Annual Renewal\", \"TechStart Inc\", \"won\", 18000, new Date().toISOString()],\n },\n ]);\n }\n}\n\n// Initialize on startup\nawait initDatabase();\n\n// API Routes\napp.get(\"/api/deals\", async (c) => {\n const result = await sqlite.execute(\"SELECT * FROM deals ORDER BY createdAt DESC\");\n return c.json(result.rows);\n});\n\napp.post(\"/api/deals/:id/status\", async (c) => {\n const id = c.req.param(\"id\");\n const { status } = await c.req.json() as { status: string };\n await sqlite.execute(\"UPDATE deals SET status = ? WHERE id = ?\", [status, id]);\n return c.json({ ok: true });\n});\n\napp.post(\"/api/deals\", async (c) => {\n const { name, company, amount } = await c.req.json() as { name: string; company: string; amount: number };\n await sqlite.execute(\n \"INSERT INTO deals (name, company, status, amount, createdAt) VALUES (?, ?, ?, ?, ?)\",\n [name, company, \"lead\", amount, new Date().toISOString()]\n );\n return c.json({ ok: true });\n});\n\n// Serve index.html at the root /\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","children",[],[236],"34f596fc-547d-11f1-9751-ee650bb23af1","README.md","019e46bb-f73a-762f-bb0e-a19784aad05b",["D",1779303216121],"# CRM Kanban Board\n\nA minimal sales pipeline kanban board built with React, Hono, and SQLite on Val Town.\n\n**Features:**\n- 5-stage sales pipeline (Lead → Qualified → Proposal → Negotiation → Won)\n- Drag-and-drop deals to update status\n- Real-time deal tracking with amounts\n- Pre-loaded with 8 demo deals\n- Dark theme with gradient styling\n\n## How it works\n\n1. **Backend** (`index.ts`): Hono server that initializes SQLite with demo data and provides API routes\n2. **Frontend** (`frontend/components/`): React components for the kanban board\n - `App.tsx`: Loads deals from `/api/deals` and handles status updates\n - `Kanban.tsx`: 5-column kanban with drag-and-drop\n - `DealCard.tsx`: Individual deal cards\n\n## API\n\n- `GET /api/deals` — Get all deals\n- `POST /api/deals/:id/status` — Update deal status\n- `POST /api/deals` — Create new deal\n\n## Database\n\nSQLite table:\n```sql\nCREATE TABLE deals (\n id INTEGER PRIMARY KEY,\n name TEXT NOT NULL,\n company TEXT NOT NULL,\n status TEXT NOT NULL,\n amount INTEGER NOT NULL,\n createdAt TEXT NOT NULL\n)\n```\n\n## Next steps\n\n- Add edit/delete functionality\n- Persist drag-drop reordering\n- Add filtering and search\n- Connect to a real CRM API\n",[],[245],["D",1779303184101],[],[18,76],["D",1779303184101],[],[18,88],["D",1779303184101],[],[18,94],"2da747a6-547d-11f1-ac51-ee650bb23af1","Kanban.tsx","2da74a12-547d-11f1-ac51-ee650bb23af1",["D",1779303203863],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { DealCard } from \"./DealCard.tsx\";\n\ninterface Deal {\n id: number;\n name: string;\n company: string;\n status: string;\n amount: number;\n}\n\ninterface KanbanProps {\n deals: Deal[];\n onUpdateStatus: (dealId: number, newStatus: string) => void;\n}\n\nconst STAGES = [\n { id: \"lead\", label: \"Lead\", color: \"from-blue-500 to-blue-600\" },\n { id: \"qualified\", label: \"Qualified\", color: \"from-purple-500 to-purple-600\" },\n { id: \"proposal\", label: \"Proposal\", color: \"from-orange-500 to-orange-600\" },\n { id: \"negotiation\", label: \"Negotiation\", color: \"from-pink-500 to-pink-600\" },\n { id: \"won\", label: \"Won\", color: \"from-green-500 to-green-600\" },\n];\n\nexport function Kanban({ deals, onUpdateStatus }: KanbanProps) {\n const [draggedCard, setDraggedCard] = useState(null);\n\n const dealsByStatus = STAGES.reduce(\n (acc, stage) => ({\n ...acc,\n [stage.id]: deals.filter((d) => d.status === stage.id),\n }),\n {} as Record\n );\n\n const handleDragStart = (dealId: number) => {\n setDraggedCard(dealId);\n };\n\n const handleDrop = (status: string) => {\n if (draggedCard !== null) {\n onUpdateStatus(draggedCard, status);\n setDraggedCard(null);\n }\n };\n\n return (\n

\n {STAGES.map((stage) => (\n e.preventDefault()}\n onDrop={() => handleDrop(stage.id)}\n >\n

{stage.label}

\n \n {dealsByStatus[stage.id].length}\n \n

\n\n

\n {dealsByStatus[stage.id].length === 0 ? (\n

No deals

\n ) : (\n dealsByStatus[stage.id].map((deal) => (\n handleDragStart(deal.id)}\n class={`cursor-move transition-opacity ${\n draggedCard === deal.id ? \"opacity-50\" : \"\"\n }`}\n >\n \n

\n ))\n )}\n

\n\n

\n ${dealsByStatus[stage.id].reduce((sum, d) => sum + d.amount, 0).toLocaleString()}\n

\n ))}\n \n \n );\n}\n",[],[18,99,261],"2f2b42c6-547d-11f1-ac51-ee650bb23af1","DealCard.tsx","2f2b43b6-547d-11f1-ac51-ee650bb23af1",5,["D",1779303206409],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface Deal {\n id: number;\n name: string;\n company: string;\n status: string;\n amount: number;\n}\n\nexport function DealCard({ deal }: { deal: Deal }) {\n return (\n

{deal.name}

{deal.company}

${deal.amount.toLocaleString()}

\n );\n}\n",[],[18,99,268],"29c1303e-547d-11f1-9a83-ee650bb23af1","App.tsx","019e46bb-f73a-762f-bb0e-8457ebbac640",3,["D",1779303197310],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { Kanban } from \"./Kanban.tsx\";\n\ninterface Deal {\n id: number;\n name: string;\n company: string;\n status: string;\n amount: number;\n}\n\nexport function App() {\n const [deals, setDeals] = useState([]);\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n const fetchDeals = async () => {\n try {\n const res = await fetch(\"/api/deals\");\n const data = await res.json();\n setDeals(data);\n } catch (err) {\n console.error(\"Failed to fetch deals\", err);\n } finally {\n setLoading(false);\n }\n };\n\n fetchDeals();\n }, []);\n\n const updateDealStatus = async (dealId: number, newStatus: string) => {\n try {\n await fetch(`/api/deals/${dealId}/status`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ status: newStatus }),\n });\n setDeals(deals.map((d) => (d.id === dealId ? { ...d, status: newStatus } : d)));\n } catch (err) {\n console.error(\"Failed to update deal\", err);\n }\n };\n\n return (\n

Sales Pipeline

Drag deals across stages to update their status

\n\n {loading ? (\n

Loading deals...

\n ) : (\n \n )}\n\n

\n View source\n

\n );\n}\n",[],[18,99,276],["D",1779303184101],[227,228,229],[18,99],["D",1779303184101],[226,230,231,232],[18],["D",1779303184101],["D",1789676511826],{"_11":12,"_156":82},{"_11":12,"_152":-5,"_81":82,"_31":80,"_153":154,"_155":30},{"_39":140,"_13":16,"_33":36,"_141":103,"_142":71,"_143":144,"_145":107,"_146":147,"_148":149,"_150":14,"_151":12},"ctx",{"_52":-5,"_177":327,"_328":329,"_330":331,"_332":30,"_333":30,"_334":30,"_335":24,"_336":-5,"_337":-7,"_338":-7,"_339":26,"_340":30,"_341":30,"_342":-5,"_343":30,"_344":30,"_345":30,"_346":-5},"ENV",{"_298":299,"_300":301,"_302":16,"_303":304,"_305":306,"_307":308,"_309":310,"_311":312,"_313":314,"_315":316,"_317":318,"_319":320,"_321":322,"_323":324,"_325":326},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · frontend