Loading Promise Luxury…

\n \n \n \n \n\n","label",[193,69],"frontend","pulls","branches","forks","envVars",{"_201":26,"_203":26},"connections",{"_201":26,"_202":26},"count","unfilledCount","emptyCount",{"_34":437,"_13":193,"_67":184,"_44":-5,"_36":37,"_185":41,"_186":107,"_38":438,"_40":26,"_70":425,"_189":-5,"_71":24,"_191":-5,"_238":439,"_17":440},{"_34":433,"_13":283,"_67":277,"_44":184,"_36":37,"_185":41,"_186":107,"_38":434,"_40":26,"_70":425,"_189":-5,"_71":24,"_191":-5,"_238":435,"_17":436},{"_34":428,"_13":317,"_67":311,"_44":277,"_36":37,"_185":429,"_186":107,"_38":430,"_40":26,"_70":425,"_189":-5,"_71":24,"_191":-5,"_238":431,"_17":432},{"_34":423,"_13":382,"_67":376,"_44":311,"_36":37,"_185":386,"_186":107,"_38":424,"_40":26,"_70":425,"_189":-5,"_71":24,"_191":-5,"_238":426,"_17":427},{"_34":415,"_13":416,"_67":417,"_44":376,"_36":37,"_185":418,"_186":107,"_38":419,"_40":26,"_70":245,"_189":420,"_71":24,"_191":-5,"_238":421,"_17":422},{"_34":407,"_13":408,"_67":409,"_44":376,"_36":37,"_185":410,"_186":107,"_38":411,"_40":26,"_70":245,"_189":412,"_71":24,"_191":-5,"_238":413,"_17":414},{"_34":399,"_13":400,"_67":401,"_44":376,"_36":37,"_185":402,"_186":107,"_38":403,"_40":41,"_70":245,"_189":404,"_71":24,"_191":-5,"_238":405,"_17":406},{"_34":391,"_13":392,"_67":393,"_44":376,"_36":37,"_185":394,"_186":107,"_38":395,"_40":41,"_70":245,"_189":396,"_71":24,"_191":-5,"_238":397,"_17":398},{"_34":383,"_13":384,"_67":385,"_44":376,"_36":37,"_185":386,"_186":107,"_38":387,"_40":26,"_70":245,"_189":388,"_71":24,"_191":-5,"_238":389,"_17":390},{"_34":373,"_13":374,"_67":375,"_44":376,"_36":37,"_185":377,"_186":107,"_38":378,"_40":26,"_70":245,"_189":379,"_71":24,"_191":-5,"_238":380,"_17":381},{"_34":365,"_13":366,"_67":367,"_44":311,"_36":37,"_185":368,"_186":107,"_38":369,"_40":26,"_70":245,"_189":370,"_71":24,"_191":-5,"_238":371,"_17":372},{"_34":357,"_13":358,"_67":359,"_44":311,"_36":37,"_185":360,"_186":107,"_38":361,"_40":26,"_70":245,"_189":362,"_71":24,"_191":-5,"_238":363,"_17":364},{"_34":349,"_13":350,"_67":351,"_44":311,"_36":37,"_185":352,"_186":107,"_38":353,"_40":41,"_70":245,"_189":354,"_71":24,"_191":-5,"_238":355,"_17":356},{"_34":342,"_13":343,"_67":344,"_44":311,"_36":37,"_185":133,"_186":107,"_38":345,"_40":234,"_70":245,"_189":346,"_71":24,"_191":-5,"_238":347,"_17":348},{"_34":334,"_13":335,"_67":336,"_44":311,"_36":37,"_185":337,"_186":107,"_38":338,"_40":41,"_70":245,"_189":339,"_71":24,"_191":-5,"_238":340,"_17":341},{"_34":326,"_13":327,"_67":328,"_44":311,"_36":37,"_185":329,"_186":107,"_38":330,"_40":41,"_70":245,"_189":331,"_71":24,"_191":-5,"_238":332,"_17":333},{"_34":318,"_13":319,"_67":320,"_44":311,"_36":37,"_185":321,"_186":107,"_38":322,"_40":26,"_70":245,"_189":323,"_71":24,"_191":-5,"_238":324,"_17":325},{"_34":308,"_13":309,"_67":310,"_44":311,"_36":37,"_185":312,"_186":107,"_38":313,"_40":26,"_70":245,"_189":314,"_71":24,"_191":-5,"_238":315,"_17":316},{"_34":300,"_13":301,"_67":302,"_44":277,"_36":37,"_185":303,"_186":107,"_38":304,"_40":26,"_70":245,"_189":305,"_71":24,"_191":-5,"_238":306,"_17":307},{"_34":292,"_13":293,"_67":294,"_44":277,"_36":37,"_185":295,"_186":107,"_38":296,"_40":188,"_70":245,"_189":297,"_71":24,"_191":-5,"_238":298,"_17":299},{"_34":284,"_13":285,"_67":286,"_44":277,"_36":37,"_185":287,"_186":107,"_38":288,"_40":26,"_70":245,"_189":289,"_71":24,"_191":-5,"_238":290,"_17":291},{"_34":274,"_13":275,"_67":276,"_44":277,"_36":37,"_185":278,"_186":107,"_38":279,"_40":26,"_70":245,"_189":280,"_71":24,"_191":-5,"_238":281,"_17":282},{"_34":266,"_13":267,"_67":268,"_44":184,"_36":37,"_185":269,"_186":107,"_38":270,"_40":41,"_70":21,"_189":271,"_71":24,"_191":-5,"_238":272,"_17":273},{"_34":183,"_13":69,"_67":68,"_44":184,"_36":37,"_185":86,"_186":107,"_38":263,"_40":188,"_70":21,"_189":190,"_71":24,"_191":-5,"_238":264,"_17":265},{"_34":256,"_13":257,"_67":258,"_44":184,"_36":37,"_185":41,"_186":107,"_38":259,"_40":26,"_70":245,"_189":260,"_71":24,"_191":-5,"_238":261,"_17":262},{"_34":249,"_13":250,"_67":251,"_44":-5,"_36":37,"_185":41,"_186":107,"_38":252,"_40":26,"_70":21,"_189":253,"_71":24,"_191":-5,"_238":254,"_17":255},{"_34":241,"_13":242,"_67":243,"_44":-5,"_36":37,"_185":188,"_186":107,"_38":244,"_40":26,"_70":245,"_189":246,"_71":24,"_191":-5,"_238":247,"_17":248},{"_34":232,"_13":233,"_67":105,"_44":-5,"_36":37,"_185":234,"_186":107,"_38":235,"_40":41,"_70":236,"_189":237,"_71":24,"_191":-5,"_238":239,"_17":240},"ae5f19a3-793e-4ca2-83f9-16cd146ee0e1","index.ts",3,["D",1784210080100],"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { createHash } from \"node:crypto\";\nimport { initDB, getSettings } from \"./db.ts\";\n\nconst app = new Hono();\n\n// Initialize DB on first load\nawait initDB();\n\n// ============ AUTH HELPERS ============\nfunction hashPassword(pw: string): string {\n return createHash(\"sha256\").update(pw).digest(\"hex\");\n}\n\nfunction makeToken(userId: number, role: string): string {\n return btoa(`${userId}:${role}:${Date.now()}`);\n}\n\nfunction parseToken(token: string): { userId: number; role: string } | null {\n try {\n const decoded = atob(token);\n const [userId, role] = decoded.split(\":\");\n return { userId: parseInt(userId), role };\n } catch {\n return null;\n }\n}\n\nfunction getAuth(c: any): { userId: number; role: string } | null {\n const token = c.req.header(\"Authorization\")?.replace(\"Bearer \", \"\");\n if (!token) return null;\n return parseToken(token);\n}\n\nfunction requireAdmin(c: any): { userId: number; role: string } | null {\n const auth = getAuth(c);\n if (!auth || auth.role !== \"admin\") return null;\n return auth;\n}\n\nfunction requireAuth(c: any): { userId: number; role: string } | null {\n return getAuth(c);\n}\n\n// ============ STATIC FILES ============\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// ============ PUBLIC API ============\napp.get(\"/api/settings\", async (c) => {\n const settings = await getSettings();\n return c.json(settings);\n});\n\napp.get(\"/api/listings\", async (c) => {\n const { sqlite } = await import(\"https://esm.town/v/std/sqlite/main.ts\");\n const category = c.req.query(\"category\");\n const search = c.req.query(\"search\");\n let sql = \"SELECT * FROM listings WHERE status = 'active'\";\n const args: any[] = [];\n if (category && category !== \"all\") {\n sql += \" AND category = ?\";\n args.push(category);\n }\n if (search) {\n sql += \" AND (title LIKE ? OR description LIKE ? OR location LIKE ?)\";\n args.push(`%${search}%`, `%${search}%`, `%${search}%`);\n }\n sql += \" ORDER BY created_at DESC\";\n const result = await sqlite.execute({ sql, args });\n return c.json({ listings: result.rows });\n});\n\napp.get(\"/api/listings/:id\", async (c) => {\n const { sqlite } = await import(\"https://esm.town/v/std/sqlite/main.ts\");\n const id = c.req.param(\"id\");\n const listing = await sqlite.execute({\n sql: \"SELECT * FROM listings WHERE id = ?\",\n args: [id],\n });\n if (!listing.rows.length) return c.json({ error: \"Not found\" }, 404);\n const reviews = await sqlite.execute({\n sql: \"SELECT r.*, u.name as user_name FROM reviews r JOIN users u ON r.user_id = u.id WHERE r.listing_id = ?\",\n args: [id],\n });\n return c.json({ listing: listing.rows[0], reviews: reviews.rows });\n});\n\napp.get(\"/api/categories\", async (c) => {\n const { sqlite } = await import(\"https://esm.town/v/std/sqlite/main.ts\");\n const result = await sqlite.execute(\n \"SELECT DISTINCT category FROM listings WHERE status = 'active'\",\n );\n return c.json({ categories: result.rows.map((r: any) => r.category) });\n});\n\n// ============ AUTH ROUTES ============\napp.post(\"/api/auth/register\", async (c) => {\n const { sqlite } = await import(\"https://esm.town/v/std/sqlite/main.ts\");\n const body = await c.req.json();\n const { name, email, phone, password } = body;\n if (!name || !email || !password) {\n return c.json({ error: \"Name, email and password are required\" }, 400);\n }\n const existing = await sqlite.execute({\n sql: \"SELECT id FROM users WHERE email = ?\",\n args: [email],\n });\n if (existing.rows.length) {\n return c.json({ error: \"Email already registered\" }, 400);\n }\n const result = await sqlite.execute({\n sql: \"INSERT INTO users (name, email, phone, password, role) VALUES (?, ?, ?, ?, 'customer')\",\n args: [name, email, phone || null, hashPassword(password)],\n });\n const userId = result.lastInsertRowid as number;\n const token = makeToken(userId, \"customer\");\n return c.json({\n token,\n user: { id: userId, name, email, phone, role: \"customer\" },\n });\n});\n\napp.post(\"/api/auth/login\", async (c) => {\n const { sqlite } = await import(\"https://esm.town/v/std/sqlite/main.ts\");\n const body = await c.req.json();\n const { email, password } = body;\n const result = await sqlite.execute({\n sql: \"SELECT * FROM users WHERE email = ?\",\n args: [email],\n });\n if (!result.rows.length) {\n return c.json({ error: \"Invalid email or password\" }, 401);\n }\n const user = result.rows[0] as any;\n if (user.password !== hashPassword(password)) {\n return c.json({ error: \"Invalid email or password\" }, 401);\n }\n const token = makeToken(user.id, user.role);\n return c.json({\n token,\n user: {\n id: user.id,\n name: user.name,\n email: user.email,\n phone: user.phone,\n role: user.role,\n },\n });\n});\n\napp.get(\"/api/auth/me\", async (c) => {\n const { sqlite } = await import(\"https://esm.town/v/std/sqlite/main.ts\");\n const auth = requireAuth(c);\n if (!auth) return c.json({ error: \"Unauthorized\" }, 401);\n const result = await sqlite.execute({\n sql: \"SELECT id, name, email, phone, role FROM users WHERE id = ?\",\n args: [auth.userId],\n });\n if (!result.rows.length) return c.json({ error: \"Not found\" }, 404);\n return c.json({ user: result.rows[0] });\n});\n\n// ============ CUSTOMER BOOKINGS ============\napp.post(\"/api/bookings\", async (c) => {\n const { sqlite } = await import(\"https://esm.town/v/std/sqlite/main.ts\");\n const auth = requireAuth(c);\n if (!auth) return c.json({ error: \"Please log in\" }, 401);\n const body = await c.req.json();\n const { listing_id, booking_date, guests, payment_method } = body;\n const listing = await sqlite.execute({\n sql: \"SELECT * FROM listings WHERE id = ? AND status = 'active'\",\n args: [listing_id],\n });\n if (!listing.rows.length) return c.json({ error: \"Listing not found\" }, 404);\n const l = listing.rows[0] as any;\n const total = l.price * (guests || 1);\n const result = await sqlite.execute({\n sql: \"INSERT INTO bookings (user_id, listing_id, booking_date, guests, total_amount, status, payment_method, payment_status) VALUES (?, ?, ?, ?, ?, 'pending', ?, 'unpaid')\",\n args: [auth.userId, listing_id, booking_date, guests || 1, total, payment_method || \"mpesa\"],\n });\n const bookingId = result.lastInsertRowid as number;\n // Simulate payment success for demo\n await sqlite.execute({\n sql: \"UPDATE bookings SET payment_status = 'paid', status = 'confirmed' WHERE id = ?\",\n args: [bookingId],\n });\n return c.json({\n booking_id: bookingId,\n status: \"confirmed\",\n total_amount: total,\n message: \"Booking confirmed! Payment received via \" + (payment_method || \"M-Pesa\"),\n });\n});\n\napp.get(\"/api/bookings\", async (c) => {\n const { sqlite } = await import(\"https://esm.town/v/std/sqlite/main.ts\");\n const auth = requireAuth(c);\n if (!auth) return c.json({ error: \"Please log in\" }, 401);\n const result = await sqlite.execute({\n sql: `SELECT b.*, l.title as listing_title, l.image_url as listing_image, l.location as listing_location\n FROM bookings b JOIN listings l ON b.listing_id = l.id\n WHERE b.user_id = ? ORDER BY b.created_at DESC`,\n args: [auth.userId],\n });\n return c.json({ bookings: result.rows });\n});\n\napp.post(\"/api/bookings/:id/cancel\", async (c) => {\n const { sqlite } = await import(\"https://esm.town/v/std/sqlite/main.ts\");\n const auth = requireAuth(c);\n if (!auth) return c.json({ error: \"Please log in\" }, 401);\n const id = c.req.param(\"id\");\n await sqlite.execute({\n sql: \"UPDATE bookings SET status = 'cancelled' WHERE id = ? AND user_id = ?\",\n args: [id, auth.userId],\n });\n return c.json({ success: true });\n});\n\n// ============ REVIEWS ============\napp.post(\"/api/reviews\", async (c) => {\n const { sqlite } = await import(\"https://esm.town/v/std/sqlite/main.ts\");\n const auth = requireAuth(c);\n if (!auth) return c.json({ error: \"Please log in\" }, 401);\n const body = await c.req.json();\n const { listing_id, rating, comment } = body;\n await sqlite.execute({\n sql: \"INSERT INTO reviews (listing_id, user_id, rating, comment) VALUES (?, ?, ?, ?)\",\n args: [listing_id, auth.userId, rating, comment],\n });\n return c.json({ success: true });\n});\n\n// ============ ADMIN API ============\n// Admin dashboard stats\napp.get(\"/api/admin/stats\", async (c) => {\n const { sqlite } = await import(\"https://esm.town/v/std/sqlite/main.ts\");\n if (!requireAdmin(c)) return c.json({ error: \"Admin access required\" }, 403);\n const today = new Date().toISOString().split(\"T\")[0];\n const [bookings, revenue, pending, customers, listings, todayBookings] = await Promise.all([\n sqlite.execute(\"SELECT COUNT(*) as count FROM bookings\"),\n sqlite.execute(\"SELECT COALESCE(SUM(total_amount),0) as total FROM bookings WHERE payment_status = 'paid'\"),\n sqlite.execute(\"SELECT COUNT(*) as count FROM bookings WHERE status = 'pending'\"),\n sqlite.execute(\"SELECT COUNT(*) as count FROM users WHERE role = 'customer'\"),\n sqlite.execute(\"SELECT COUNT(*) as count FROM listings\"),\n sqlite.execute({ sql: \"SELECT COUNT(*) as count FROM bookings WHERE booking_date = ?\", args: [today] }),\n ]);\n return c.json({\n totalBookings: (bookings.rows[0] as any).count,\n totalRevenue: (revenue.rows[0] as any).total,\n pendingPayments: (pending.rows[0] as any).count,\n totalCustomers: (customers.rows[0] as any).count,\n totalListings: (listings.rows[0] as any).count,\n todayBookings: (todayBookings.rows[0] as any).count,\n });\n});\n\n// Admin listings management\napp.get(\"/api/admin/listings\", async (c) => {\n const { sqlite } = await import(\"https://esm.town/v/std/sqlite/main.ts\");\n if (!requireAdmin(c)) return c.json({ error: \"Admin access required\" }, 403);\n const result = await sqlite.execute(\"SELECT * FROM listings ORDER BY created_at DESC\");\n return c.json({ listings: result.rows });\n});\n\napp.post(\"/api/admin/listings\", async (c) => {\n const { sqlite } = await import(\"https://esm.town/v/std/sqlite/main.ts\");\n const auth = requireAdmin(c);\n if (!auth) return c.json({ error: \"Admin access required\" }, 403);\n const body = await c.req.json();\n const result = await sqlite.execute({\n sql: \"INSERT INTO listings (title, description, price, category, image_url, capacity, location, status) VALUES (?, ?, ?, ?, ?, ?, ?, ?)\",\n args: [body.title, body.description, body.price, body.category || \"general\", body.image_url, body.capacity || 2, body.location || \"Nairobi, Kenya\", body.status || \"active\"],\n });\n await sqlite.execute({\n sql: \"INSERT INTO admin_logs (admin_id, action, detail) VALUES (?, 'create_listing', ?)\",\n args: [auth.userId, body.title],\n });\n return c.json({ success: true, id: result.lastInsertRowid });\n});\n\napp.put(\"/api/admin/listings/:id\", async (c) => {\n const { sqlite } = await import(\"https://esm.town/v/std/sqlite/main.ts\");\n const auth = requireAdmin(c);\n if (!auth) return c.json({ error: \"Admin access required\" }, 403);\n const id = c.req.param(\"id\");\n const body = await c.req.json();\n await sqlite.execute({\n sql: \"UPDATE listings SET title=?, description=?, price=?, category=?, image_url=?, capacity=?, location=?, status=? WHERE id=?\",\n args: [body.title, body.description, body.price, body.category, body.image_url, body.capacity, body.location, body.status, id],\n });\n return c.json({ success: true });\n});\n\napp.delete(\"/api/admin/listings/:id\", async (c) => {\n const { sqlite } = await import(\"https://esm.town/v/std/sqlite/main.ts\");\n const auth = requireAdmin(c);\n if (!auth) return c.json({ error: \"Admin access required\" }, 403);\n const id = c.req.param(\"id\");\n await sqlite.execute({ sql: \"DELETE FROM listings WHERE id = ?\", args: [id] });\n await sqlite.execute({\n sql: \"INSERT INTO admin_logs (admin_id, action, detail) VALUES (?, 'delete_listing', ?)\",\n args: [auth.userId, id],\n });\n return c.json({ success: true });\n});\n\n// Admin bookings management\napp.get(\"/api/admin/bookings\", async (c) => {\n const { sqlite } = await import(\"https://esm.town/v/std/sqlite/main.ts\");\n if (!requireAdmin(c)) return c.json({ error: \"Admin access required\" }, 403);\n const result = await sqlite.execute(\n `SELECT b.*, l.title as listing_title, u.name as customer_name, u.email as customer_email, u.phone as customer_phone\n FROM bookings b JOIN listings l ON b.listing_id = l.id JOIN users u ON b.user_id = u.id\n ORDER BY b.created_at DESC`,\n );\n return c.json({ bookings: result.rows });\n});\n\napp.put(\"/api/admin/bookings/:id/status\", async (c) => {\n const { sqlite } = await import(\"https://esm.town/v/std/sqlite/main.ts\");\n const auth = requireAdmin(c);\n if (!auth) return c.json({ error: \"Admin access required\" }, 403);\n const id = c.req.param(\"id\");\n const body = await c.req.json();\n await sqlite.execute({\n sql: \"UPDATE bookings SET status = ? WHERE id = ?\",\n args: [body.status, id],\n });\n await sqlite.execute({\n sql: \"INSERT INTO admin_logs (admin_id, action, detail) VALUES (?, 'update_booking_status', ?)\",\n args: [auth.userId, `Booking #${id} -> ${body.status}`],\n });\n return c.json({ success: true });\n});\n\n// Admin customers\napp.get(\"/api/admin/customers\", async (c) => {\n const { sqlite } = await import(\"https://esm.town/v/std/sqlite/main.ts\");\n if (!requireAdmin(c)) return c.json({ error: \"Admin access required\" }, 403);\n const result = await sqlite.execute(\n `SELECT u.id, u.name, u.email, u.phone, u.created_at,\n COUNT(b.id) as total_bookings, COALESCE(SUM(b.total_amount),0) as total_spent\n FROM users u LEFT JOIN bookings b ON u.id = b.user_id\n WHERE u.role = 'customer' GROUP BY u.id ORDER BY u.created_at DESC`,\n );\n return c.json({ customers: result.rows });\n});\n\n// Admin settings\napp.put(\"/api/admin/settings\", async (c) => {\n const { sqlite } = await import(\"https://esm.town/v/std/sqlite/main.ts\");\n const auth = requireAdmin(c);\n if (!auth) return c.json({ error: \"Admin access required\" }, 403);\n const body = await c.req.json();\n await sqlite.execute({\n sql: `UPDATE settings SET\n company_name=?, tagline=?, contact_email=?, contact_phone=?, whatsapp=?,\n address=?, hero_image=?, logo_url=?, primary_color=?, about_text=?,\n facebook=?, instagram=?, twitter=?, mpesa_enabled=?, card_enabled=?,\n updated_at=datetime('now') WHERE id=1`,\n args: [\n body.company_name, body.tagline, body.contact_email, body.contact_phone, body.whatsapp,\n body.address, body.hero_image, body.logo_url, body.primary_color, body.about_text,\n body.facebook, body.instagram, body.twitter, body.mpesa_enabled ? 1 : 0, body.card_enabled ? 1 : 0,\n ],\n });\n await sqlite.execute({\n sql: \"INSERT INTO admin_logs (admin_id, action, detail) VALUES (?, 'update_settings', 'Updated site settings')\",\n args: [auth.userId],\n });\n return c.json({ success: true });\n});\n\n// Admin logs\napp.get(\"/api/admin/logs\", async (c) => {\n const { sqlite } = await import(\"https://esm.town/v/std/sqlite/main.ts\");\n if (!requireAdmin(c)) return c.json({ error: \"Admin access required\" }, 403);\n const result = await sqlite.execute(\n \"SELECT l.*, u.name as admin_name FROM admin_logs l LEFT JOIN users u ON l.admin_id = u.id ORDER BY l.created_at DESC LIMIT 50\",\n );\n return c.json({ logs: result.rows });\n});\n\n// Admin revenue chart data\napp.get(\"/api/admin/revenue\", async (c) => {\n const { sqlite } = await import(\"https://esm.town/v/std/sqlite/main.ts\");\n if (!requireAdmin(c)) return c.json({ error: \"Admin access required\" }, 403);\n const result = await sqlite.execute(\n `SELECT DATE(created_at) as date, SUM(total_amount) as revenue, COUNT(*) as bookings\n FROM bookings WHERE payment_status = 'paid'\n GROUP BY DATE(created_at) ORDER BY date DESC LIMIT 30`,\n );\n return c.json({ data: result.rows });\n});\n\napp.onError((err) => Promise.reject(err));\nexport default app.fetch;\n","children",[],[233],"f2d7a860-029e-43fd-ac54-53eb03a8a18e","db.ts","c343a03a-811d-11f1-b481-1607ee4eb77e",["D",1784210025491],"script","import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nexport async function initDB() {\n await sqlite.batch([\n {\n sql: `CREATE TABLE IF NOT EXISTS users (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL,\n email TEXT UNIQUE NOT NULL,\n phone TEXT,\n password TEXT NOT NULL,\n role TEXT DEFAULT 'customer',\n created_at TEXT DEFAULT (datetime('now'))\n )`,\n },\n {\n sql: `CREATE TABLE IF NOT EXISTS settings (\n id INTEGER PRIMARY KEY DEFAULT 1,\n company_name TEXT DEFAULT 'Promise Luxury',\n tagline TEXT DEFAULT 'Experience Luxury in Kenya',\n contact_email TEXT DEFAULT 'info@promiseluxury.co.ke',\n contact_phone TEXT DEFAULT '+254700000000',\n whatsapp TEXT DEFAULT '+254700000000',\n address TEXT DEFAULT 'Nairobi, Kenya',\n hero_image TEXT DEFAULT 'https://images.unsplash.com/photo-1564501049412-61c2a3083791?w=1200',\n logo_url TEXT DEFAULT '',\n primary_color TEXT DEFAULT '#b8860b',\n about_text TEXT DEFAULT 'Promise Luxury is Kenya''s premier luxury booking platform, offering curated experiences across the country.',\n facebook TEXT DEFAULT '',\n instagram TEXT DEFAULT '',\n twitter TEXT DEFAULT '',\n mpesa_enabled INTEGER DEFAULT 1,\n card_enabled INTEGER DEFAULT 1,\n updated_at TEXT DEFAULT (datetime('now'))\n )`,\n },\n {\n sql: `CREATE TABLE IF NOT EXISTS listings (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n title TEXT NOT NULL,\n description TEXT NOT NULL,\n price REAL NOT NULL,\n category TEXT DEFAULT 'general',\n image_url TEXT DEFAULT 'https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?w=800',\n gallery TEXT DEFAULT '[]',\n status TEXT DEFAULT 'active',\n capacity INTEGER DEFAULT 2,\n location TEXT DEFAULT 'Nairobi, Kenya',\n created_at TEXT DEFAULT (datetime('now'))\n )`,\n },\n {\n sql: `CREATE TABLE IF NOT EXISTS bookings (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n user_id INTEGER NOT NULL,\n listing_id INTEGER NOT NULL,\n booking_date TEXT NOT NULL,\n guests INTEGER DEFAULT 1,\n total_amount REAL NOT NULL,\n status TEXT DEFAULT 'pending',\n payment_method TEXT DEFAULT '',\n payment_status TEXT DEFAULT 'unpaid',\n created_at TEXT DEFAULT (datetime('now')),\n FOREIGN KEY (user_id) REFERENCES users(id),\n FOREIGN KEY (listing_id) REFERENCES listings(id)\n )`,\n },\n {\n sql: `CREATE TABLE IF NOT EXISTS reviews (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n listing_id INTEGER NOT NULL,\n user_id INTEGER NOT NULL,\n rating INTEGER NOT NULL,\n comment TEXT,\n created_at TEXT DEFAULT (datetime('now')),\n FOREIGN KEY (listing_id) REFERENCES listings(id),\n FOREIGN KEY (user_id) REFERENCES users(id)\n )`,\n },\n {\n sql: `CREATE TABLE IF NOT EXISTS admin_logs (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n admin_id INTEGER,\n action TEXT NOT NULL,\n detail TEXT,\n created_at TEXT DEFAULT (datetime('now'))\n )`,\n },\n // Seed default admin\n {\n sql: `INSERT OR IGNORE INTO users (id, name, email, phone, password, role) VALUES (1, 'Admin', 'admin@promiseluxury.co.ke', '+254700000000', 'admin123', 'admin')`,\n },\n // Seed default settings row\n {\n sql: `INSERT OR IGNORE INTO settings (id) VALUES (1)`,\n },\n // Seed sample listings\n {\n sql: `INSERT OR IGNORE INTO listings (id, title, description, price, category, image_url, capacity, location) VALUES\n (1, 'Maasai Mara Luxury Safari', 'Experience the wild like never before. 3-day luxury safari with premium tented camps, gourmet dining, and expert guides.', 85000, 'Safari', 'https://images.unsplash.com/photo-1516426122078-c2317674d2b3?w=800', 6, 'Maasai Mara, Kenya'),\n (2, 'Diani Beach Villa Retreat', 'Private beachfront villa with infinity pool, personal chef, and daily housekeeping. Sleeps up to 8 guests.', 120000, 'Beach', 'https://images.unsplash.com/photo-1519046904884-53103b34b206?w=800', 8, 'Diani Beach, Kenya'),\n (3, 'Mount Kenya Helicopter Tour', 'Scenic helicopter flight over Mount Kenya with champagne picnic at the base. A once-in-a-lifetime experience.', 45000, 'Adventure', 'https://images.unsplash.com/photo-1464822759023-fed622ff2c3d?w=800', 4, 'Mount Kenya, Kenya'),\n (4, 'Nairobi Luxury Penthouse', '5-star penthouse suite in Westlands with city views, jacuzzi, and concierge service. Perfect for business or leisure.', 35000, 'Accommodation', 'https://images.unsplash.com/photo-1566073771259-6a8506099948?w=800', 4, 'Nairobi, Kenya'),\n (5, 'Lamu Island Yacht Charter', 'Private yacht charter around the Lamu archipelago. Snorkeling, fishing, and sunset dinners included.', 200000, 'Yacht', 'https://images.unsplash.com/photo-1546577962-5f0625c5a8b1?w=800', 10, 'Lamu, Kenya'),\n (6, 'Amboseli Elephant Safari', '2-day luxury safari in Amboseli with views of Kilimanjaro. Luxury lodge accommodation and game drives.', 65000, 'Safari', 'https://images.unsplash.com/photo-1549366057-5b7fb5d44c6e?w=800', 6, 'Amboseli, Kenya')`,\n },\n // Seed sample reviews\n {\n sql: `INSERT OR IGNORE INTO reviews (id, listing_id, user_id, rating, comment) VALUES\n (1, 1, 1, 5, 'Absolutely incredible experience! The guides were knowledgeable and the camps were luxurious.'),\n (2, 2, 1, 5, 'Best beach vacation ever. The private chef was a game changer.')`,\n },\n ]);\n}\n\nexport function rowToObj(row: Record): Record {\n return row;\n}\n\nexport async function getSettings() {\n const result = await sqlite.execute(\"SELECT * FROM settings WHERE id = 1\");\n return result.rows[0] ?? {};\n}\n",[],[242],"c2dc17b6-e51b-4b59-b778-c8be00998cf9","README.md","019f6b31-c02d-73ee-96f7-cf2010151530",["D",1784209850342],"# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| **[`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter)** *(you're here)* | Client-side React SPA with a Hono API backend. |\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"index.html\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend + API routes)\nfrontend/\n index.html ← HTML shell (loads Twind + React)\n index.tsx ← React entrypoint (mounts )\n favicon.svg ← App icon\n components/\n App.tsx ← Root component (layout + view source link)\n Counter.tsx ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n frontend and any API routes you add.\n2. **`frontend/index.html`** loads Twind and the React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n a full-stack example with database, queries, and shared types\n",[],[250],"34ebc707-f4a6-43ee-b4b8-60360f67bb14","index.tsx","019f6b31-c02d-73ee-96f7-c70f4902b8f0",["D",1784209850342],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[193,257],["D",1784211008385],[],[193,69],"12dc12eb-6902-48df-9b3a-ddca7d9797ae","favicon.svg","019f6b31-c02d-73ee-96f7-bfad34e7207a",4,["D",1784210089389],"\n\n",[],[193,267],"8e752db4-3138-44b3-9e91-6d7ec802cd6a","Navbar.tsx","02aa4e22-811e-11f1-8008-1607ee4eb77e","019f6b31-c02d-73ee-96f7-ba5c7f1b1e87",7,["D",1784210131879],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport type { User, Settings } from \"./App.tsx\";\n\nexport function Navbar({ user, settings, navigate, onLogout }: {\n user: User | null;\n settings: Settings | null;\n navigate: (path: string) => void;\n onLogout: () => void;\n}) {\n const linkClass = \"text-gray-700 hover:text-amber-600 cursor-pointer transition-colors font-medium\";\n\n return (\n

navigate(\"/\")}>\n 🏨\n \n {settings?.company_name || \"Promise Luxury\"}\n \n

\n navigate(\"/\")}>Home\n navigate(\"/listings\")}>Listings\n navigate(\"/about\")}>About\n navigate(\"/contact\")}>Contact\n {user ? (\n <>\n navigate(\"/dashboard\")}>My Dashboard\n Logout\n \n ) : (\n <>\n navigate(\"/login\")}>Login\n navigate(\"/register\")}>\n Sign Up\n \n \n )}\n

\n \n

navigate(\"/\")}>Home

navigate(\"/listings\")}>Listings

navigate(\"/about\")}>About

navigate(\"/contact\")}>Contact

\n {user ? (\n <>\n

navigate(\"/dashboard\")}>My Dashboard

Logout

\n \n ) : (\n <>\n

navigate(\"/login\")}>Login

navigate(\"/register\")}>Sign Up

\n \n )}\n

\n );\n}\n",[],[193,283,275],"components","af5deae7-3c57-4c11-b4d0-7f6f33773f1d","Footer.tsx","02b0b1cc-811e-11f1-9156-1607ee4eb77e",8,["D",1784210131881],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport type { Settings } from \"./App.tsx\";\n\nexport function Footer({ settings, navigate }: {\n settings: Settings | null;\n navigate: (path: string) => void;\n}) {\n return (\n \n );\n}\n",[],[193,283,285],"c87b5b8f-2890-4890-9b23-f6e0420e7ee5","App.tsx","019f6b31-c02c-7268-bf81-f7d3551f41f9",32,["D",1784210967385],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport { Navbar } from \"./Navbar.tsx\";\nimport { Footer } from \"./Footer.tsx\";\nimport { Home } from \"./pages/Home.tsx\";\nimport { Listings } from \"./pages/Listings.tsx\";\nimport { ListingDetail } from \"./pages/ListingDetail.tsx\";\nimport { Login } from \"./pages/Login.tsx\";\nimport { Register } from \"./pages/Register.tsx\";\nimport { CustomerDashboard } from \"./pages/CustomerDashboard.tsx\";\nimport { About } from \"./pages/About.tsx\";\nimport { Contact } from \"./pages/Contact.tsx\";\nimport { AdminLogin } from \"./pages/admin/AdminLogin.tsx\";\nimport { AdminDashboard } from \"./pages/admin/AdminDashboard.tsx\";\nimport { AdminListings } from \"./pages/admin/AdminListings.tsx\";\nimport { AdminBookings } from \"./pages/admin/AdminBookings.tsx\";\nimport { AdminCustomers } from \"./pages/admin/AdminCustomers.tsx\";\nimport { AdminSettings } from \"./pages/admin/AdminSettings.tsx\";\n\nexport interface User {\n id: number;\n name: string;\n email: string;\n phone: string;\n role: string;\n}\n\nexport interface Settings {\n company_name: string;\n tagline: string;\n contact_email: string;\n contact_phone: string;\n whatsapp: string;\n address: string;\n hero_image: string;\n logo_url: string;\n primary_color: string;\n about_text: string;\n facebook: string;\n instagram: string;\n twitter: string;\n mpesa_enabled: number;\n card_enabled: number;\n}\n\nfunction parseHash(): { route: string; params: Record } {\n const hash = window.location.hash.slice(1) || \"/\";\n const [path, queryStr] = hash.split(\"?\");\n const params: Record = {};\n if (queryStr) {\n queryStr.split(\"&\").forEach((p) => {\n const [k, v] = p.split(\"=\");\n params[k] = decodeURIComponent(v || \"\");\n });\n }\n return { route: path, params };\n}\n\nexport function App() {\n const [user, setUser] = useState(null);\n const [settings, setSettings] = useState(null);\n const [routeInfo, setRouteInfo] = useState(parseHash());\n const [loading, setLoading] = useState(true);\n\n const api = useCallback(async (path: string, opts: RequestInit = {}) => {\n const token = localStorage.getItem(\"pl_token\");\n const headers: Record = {\n \"Content-Type\": \"application/json\",\n ...(opts.headers as Record || {}),\n };\n if (token) headers[\"Authorization\"] = `Bearer ${token}`;\n try {\n const res = await fetch(path, { ...opts, headers });\n return await res.json();\n } catch (err) {\n console.error(\"API error:\", path, err);\n return { error: \"Network error\" };\n }\n }, []);\n\n useEffect(() => {\n // Load settings\n api(\"/api/settings\").then((s) => setSettings(s));\n // Check if logged in\n const token = localStorage.getItem(\"pl_token\");\n if (token) {\n api(\"/api/auth/me\").then((data) => {\n if (data.user) setUser(data.user);\n else localStorage.removeItem(\"pl_token\");\n setLoading(false);\n });\n } else {\n setLoading(false);\n }\n }, []);\n\n useEffect(() => {\n const handler = () => setRouteInfo(parseHash());\n window.addEventListener(\"hashchange\", handler);\n return () => window.removeEventListener(\"hashchange\", handler);\n }, []);\n\n const navigate = (path: string) => {\n window.location.hash = path;\n window.scrollTo(0, 0);\n };\n\n const login = (token: string, u: User) => {\n localStorage.setItem(\"pl_token\", token);\n setUser(u);\n };\n\n const logout = () => {\n localStorage.removeItem(\"pl_token\");\n setUser(null);\n navigate(\"/\");\n };\n\n if (loading) {\n return (\n

Loading Promise Luxury…

\n );\n }\n\n const { route, params } = routeInfo;\n\n // Admin routes\n if (route.startsWith(\"/admin\")) {\n if (route === \"/admin/login\") {\n return ;\n }\n if (!user || user.role !== \"admin\") {\n navigate(\"/admin/login\");\n return null;\n }\n return (\n

\n {route === \"/admin\" && }\n {route === \"/admin/listings\" && }\n {route === \"/admin/bookings\" && }\n {route === \"/admin/customers\" && }\n {route === \"/admin/settings\" && }\n

\n );\n }\n\n // Public/customer routes\n return (\n

\n \n

\n {route === \"/\" && }\n {route === \"/listings\" && }\n {route === \"/listing\" && }\n {route === \"/login\" && }\n {route === \"/register\" && }\n {route === \"/dashboard\" && }\n {route === \"/about\" && }\n {route === \"/contact\" && }\n

\n );\n}\n",[],[193,283,293],"4cf649e8-9614-4faf-8b58-9aa00f35f785","AdminSidebar.tsx","591a1d50-811e-11f1-bd7c-1607ee4eb77e",17,["D",1784210276899],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport type { User } from \"../App.tsx\";\n\nexport function AdminSidebar({ navigate, onLogout, user, active }: {\n navigate: (path: string) => void;\n onLogout: () => void;\n user: User;\n active: string;\n}) {\n const items = [\n { route: \"/admin\", label: \"Dashboard\", icon: \"📊\" },\n { route: \"/admin/listings\", label: \"Listings\", icon: \"🏨\" },\n { route: \"/admin/bookings\", label: \"Bookings\", icon: \"📅\" },\n { route: \"/admin/customers\", label: \"Customers\", icon: \"👥\" },\n { route: \"/admin/settings\", label: \"Settings\", icon: \"⚙️\" },\n ];\n\n return (\n

\n 🏨\n Promise Luxury\n

Admin Control Panel

\n {items.map((item) => (\n navigate(item.route)}\n >\n {item.icon}\n {item.label}\n

\n ))}\n

Logged in as {user.name}

\n \n

\n \n );\n}\n",[],[193,283,301],"8eab313b-217f-4b7f-8364-ddc8093bc1ce","Register.tsx","3ba4117c-811e-11f1-8008-1607ee4eb77e","6f6fbba3-2db9-4dcc-9a2d-9bd09cf556e9",13,["D",1784210227394],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { User } from \"../App.tsx\";\n\nexport function Register({ api, onLogin, navigate }: {\n api: (path: string, opts?: RequestInit) => Promise;\n onLogin: (token: string, user: User) => void;\n navigate: (path: string) => void;\n}) {\n const [form, setForm] = useState({ name: \"\", email: \"\", phone: \"\", password: \"\" });\n const [error, setError] = useState(\"\");\n const [loading, setLoading] = useState(false);\n\n const handleSubmit = async (e: any) => {\n e.preventDefault();\n setLoading(true);\n setError(\"\");\n const result = await api(\"/api/auth/register\", {\n method: \"POST\",\n body: JSON.stringify(form),\n });\n setLoading(false);\n if (result.error) {\n setError(result.error);\n } else {\n onLogin(result.token, result.user);\n navigate(\"/dashboard\");\n }\n };\n\n return (\n

Create Your Account

\n {error &&

{error}

}\n \n

\n Already have an account? navigate(\"/login\")}>Login\n

\n );\n}\n",[],[193,283,317,309],"pages","07cfb7c3-68c2-45ab-a789-1f6b8f5c4a9b","Login.tsx","3b97b9cc-811e-11f1-afca-1607ee4eb77e",11,["D",1784210227388],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { User } from \"../App.tsx\";\n\nexport function Login({ api, onLogin, navigate }: {\n api: (path: string, opts?: RequestInit) => Promise;\n onLogin: (token: string, user: User) => void;\n navigate: (path: string) => void;\n}) {\n const [email, setEmail] = useState(\"\");\n const [password, setPassword] = useState(\"\");\n const [error, setError] = useState(\"\");\n const [loading, setLoading] = useState(false);\n\n const handleSubmit = async (e: any) => {\n e.preventDefault();\n setLoading(true);\n setError(\"\");\n const result = await api(\"/api/auth/login\", {\n method: \"POST\",\n body: JSON.stringify({ email, password }),\n });\n setLoading(false);\n if (result.error) {\n setError(result.error);\n } else {\n onLogin(result.token, result.user);\n navigate(\"/dashboard\");\n }\n };\n\n return (\n

Welcome Back

\n {error &&

{error}

}\n \n

\n Don't have an account? navigate(\"/register\")}>Sign up\n

\n );\n}\n",[],[193,283,317,319],"a2d78c8c-8dda-4a9b-9925-19cb30c133fe","Listings.tsx","1e74b5e8-811e-11f1-901c-1607ee4eb77e",31,["D",1784210947960],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\n\nexport function Listings({ api, navigate }: {\n api: (path: string, opts?: RequestInit) => Promise;\n navigate: (path: string) => void;\n}) {\n const [listings, setListings] = useState([]);\n const [categories, setCategories] = useState([]);\n const [loading, setLoading] = useState(true);\n const [search, setSearch] = useState(\"\");\n const [category, setCategory] = useState(\"all\");\n\n useEffect(() => {\n api(\"/api/categories\").then((d) => setCategories(d.categories || []));\n }, []);\n\n useEffect(() => {\n setLoading(true);\n let q = \"/api/listings?\";\n if (category !== \"all\") q += `category=${encodeURIComponent(category)}&`;\n if (search) q += `search=${encodeURIComponent(search)}&`;\n api(q).then((d) => {\n setListings(d.listings || []);\n setLoading(false);\n });\n }, [category, search]);\n\n const fmtKES = (n: number) => `KES ${Number(n).toLocaleString()}`;\n\n return (\n

All Listings

\n setSearch(e.target.value)} />\n \n

\n {loading ? (\n

Loading listings…

\n ) : listings.length === 0 ? (\n

No listings found.

\n ) : (\n

\n {listings.map((l) => (\n

navigate(`/listing?id=${l.id}`)}>\n

\n {l.category}\n

{l.title}

📍 {l.location}

{l.description?.slice(0, 80)}…

\n {fmtKES(l.price)}\n

\n ))}\n

\n )}\n

\n );\n}\n",[],[193,283,317,327],"0b11e8d9-e9bd-4b21-95ad-8452ac1b987e","ListingDetail.tsx","3b9dd8ac-811e-11f1-9f0e-1607ee4eb77e",29,["D",1784210947952],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport type { User } from \"../App.tsx\";\n\nexport function ListingDetail({ api, id, navigate, user }: {\n api: (path: string, opts?: RequestInit) => Promise;\n id: string;\n navigate: (path: string) => void;\n user: User | null;\n}) {\n const [data, setData] = useState(null);\n const [loading, setLoading] = useState(true);\n const [bookingDate, setBookingDate] = useState(\"\");\n const [guests, setGuests] = useState(1);\n const [paymentMethod, setPaymentMethod] = useState(\"mpesa\");\n const [bookingResult, setBookingResult] = useState(null);\n const [submitting, setSubmitting] = useState(false);\n const [reviewForm, setReviewForm] = useState({ rating: 5, comment: \"\" });\n\n useEffect(() => {\n if (id) {\n api(`/api/listings/${id}`).then((d) => {\n setData(d);\n setLoading(false);\n });\n }\n }, [id]);\n\n const fmtKES = (n: number) => `KES ${Number(n).toLocaleString()}`;\n\n const handleBooking = async () => {\n if (!user) { navigate(\"/login\"); return; }\n if (!bookingDate) { alert(\"Please select a date\"); return; }\n setSubmitting(true);\n const result = await api(\"/api/bookings\", {\n method: \"POST\",\n body: JSON.stringify({ listing_id: parseInt(id), booking_date: bookingDate, guests, payment_method }),\n });\n setBookingResult(result);\n setSubmitting(false);\n };\n\n const handleReview = async () => {\n if (!user) { navigate(\"/login\"); return; }\n await api(\"/api/reviews\", {\n method: \"POST\",\n body: JSON.stringify({ listing_id: parseInt(id), rating: reviewForm.rating, comment: reviewForm.comment }),\n });\n setReviewForm({ rating: 5, comment: \"\" });\n api(`/api/listings/${id}`).then((d) => setData(d));\n };\n\n if (loading) return

Loading…

;\n if (!data || data.error) return

Listing not found

;\n\n const listing = data.listing;\n const reviews = data.reviews || [];\n const total = listing.price * guests;\n\n return (\n

\n navigate(\"/listings\")}>← Back to Listings\n

\n\n

\n {listing.category}\n

{listing.title}

📍 {listing.location} · 👥 Up to {listing.capacity} guests

{listing.description}

\n\n {/* Reviews */}\n

Reviews ({reviews.length})

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

No reviews yet. Be the first to review!

\n ) : (\n

\n {reviews.map((r: any) => (\n

\n {r.user_name}\n {\"⭐\".repeat(r.rating)}\n

{r.comment}

\n ))}\n

\n )}\n\n {user && (\n

Write a Review

\n \n

setReviewForm({ ...reviewForm, comment: e.target.value })} />\n              <button class=\"bg-amber-600 text-white px-4 py-2 rounded-lg hover:bg-amber-700 cursor-pointer\" onClick={handleReview}>Submit Review</button>\n            </div>\n          )}\n        </div>\n\n        {/* Booking Card */}\n        <div class=\"lg:col-span-1\">\n          <div class=\"bg-white p-6 rounded-xl shadow-lg sticky top-20\">\n            {bookingResult ? (\n              <div class=\"text-center\">\n                <div class=\"text-4xl mb-3\">✅</div>\n                <h3 class=\"text-xl font-bold text-green-600 mb-2\">Booking Confirmed!</h3>\n                <p class=\"text-gray-600 mb-2\">{bookingResult.message}</p>\n                <p class=\"text-2xl font-bold text-amber-600 mb-4\">{fmtKES(bookingResult.total_amount)}</p>\n                <button class=\"w-full bg-amber-600 text-white py-2 rounded-lg hover:bg-amber-700 cursor-pointer mb-2\" onClick={() => navigate(\"/dashboard\")}>View My Bookings</button>\n                <button class=\"w-full border border-gray-300 py-2 rounded-lg hover:bg-gray-50 cursor-pointer\" onClick={() => setBookingResult(null)}>Book Another</button>\n              </div>\n            ) : (\n              <>\n                <h3 class=\"text-xl font-bold mb-1\">{fmtKES(listing.price)}</h3>\n                <p class=\"text-sm text-gray-400 mb-4\">per person</p>\n\n                <label class=\"block text-sm font-medium mb-1\">Booking Date</label>\n                <input type=\"date\" class=\"w-full mb-3 px-3 py-2 border rounded-lg\" value={bookingDate} min={new Date().toISOString().split(\"T\")[0]} onChange={(e) => setBookingDate(e.target.value)} />\n\n                <label class=\"block text-sm font-medium mb-1\">Guests</label>\n                <input type=\"number\" min=\"1\" max={listing.capacity} class=\"w-full mb-3 px-3 py-2 border rounded-lg\" value={guests} onChange={(e) => setGuests(parseInt(e.target.value) || 1)} />\n\n                <label class=\"block text-sm font-medium mb-1\">Payment Method</label>\n                <select class=\"w-full mb-4 px-3 py-2 border rounded-lg\" value={paymentMethod} onChange={(e) => setPaymentMethod(e.target.value)}>\n                  <option value=\"mpesa\">📱 M-Pesa</option>\n                  <option value=\"airtel\">📱 Airtel Money</option>\n                  <option value=\"card\">💳 Card (Visa/Mastercard)</option>\n                  <option value=\"googlepay\">.google Pay</option>\n                </select>\n\n                <div class=\"border-t pt-3 mb-4\">\n                  <div class=\"flex justify-between text-sm mb-1\"><span>Subtotal</span><span>{fmtKES(listing.price * guests)}</span></div>\n                  <div class=\"flex justify-between text-sm mb-1\"><span>Service fee</span><span>{fmtKES(0)}</span></div>\n                  <div class=\"flex justify-between font-bold text-lg\"><span>Total</span><span class=\"text-amber-600\">{fmtKES(total)}</span></div>\n                </div>\n\n                <button class=\"w-full bg-amber-600 text-white py-3 rounded-lg font-medium hover:bg-amber-700 cursor-pointer disabled:opacity-50\" disabled={submitting} onClick={handleBooking}>\n                  {submitting ? \"Processing…\" : \"Book & Pay Now\"}\n                </button>\n                {!user && <p class=\"text-center text-sm text-gray-400 mt-2\">Please login to book</p>}\n              </>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n",[],[193,283,317,335],"a28a80a9-e5dd-4e1b-91e7-722fef75a3bf","Home.tsx","13c2b42e-811e-11f1-9156-1607ee4eb77e",["D",1784211108314],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport type { Settings } from \"../App.tsx\";\n\nexport function Home({ api, settings, navigate }: {\n  api: (path: string, opts?: RequestInit) => Promise<any>;\n  settings: Settings | null;\n  navigate: (path: string) => void;\n}) {\n  const [listings, setListings] = useState<any[]>([]);\n  const [categories, setCategories] = useState<string[]>([]);\n\n  useEffect(() => {\n    api(\"/api/listings\").then((d) => setListings(d.listings || []));\n    api(\"/api/categories\").then((d) => setCategories(d.categories || []));\n  }, []);\n\n  const fmtKES = (n: number) => `KES ${Number(n).toLocaleString()}`;\n\n  return (\n    <div>\n      {/* Hero Section */}\n      <section\n        class=\"relative h-[500px] flex items-center justify-center bg-cover bg-center\"\n        style={{ backgroundImage: `linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.5)), url('${settings?.hero_image || \"https://images.unsplash.com/photo-1564501049412-61c2a3083791?w=1200\"}')` }}\n      >\n        <div class=\"text-center text-white px-4\">\n          <h1 class=\"text-4xl md:text-6xl font-serif font-bold mb-4\">\n            {settings?.company_name || \"Promise Luxury\"}\n          </h1>\n          <p class=\"text-xl md:text-2xl mb-8 font-light\">\n            {settings?.tagline || \"Experience Luxury in Kenya\"}\n          </p>\n          <button\n            class=\"bg-amber-600 hover:bg-amber-700 text-white px-8 py-3 rounded-lg text-lg font-medium transition-colors cursor-pointer\"\n            onClick={() => navigate(\"/listings\")}\n          >\n            Explore Listings\n          </button>\n        </div>\n      </section>\n\n      {/* Categories */}\n      {categories.length > 0 && (\n        <section class=\"max-w-7xl mx-auto px-4 py-12\">\n          <h2 class=\"text-2xl font-serif font-bold text-center mb-8\">Browse by Category</h2>\n          <div class=\"flex flex-wrap justify-center gap-3\">\n            {categories.map((cat) => (\n              <span\n                key={cat}\n                class=\"px-6 py-2 bg-white border border-amber-200 rounded-full text-amber-700 font-medium cursor-pointer hover:bg-amber-50 transition-colors\"\n                onClick={() => navigate(`/listings?category=${encodeURIComponent(cat)}`)}\n              >\n                {cat}\n              </span>\n            ))}\n          </div>\n        </section>\n      )}\n\n      {/* Featured Listings */}\n      <section class=\"max-w-7xl mx-auto px-4 py-8\">\n        <h2 class=\"text-2xl font-serif font-bold mb-8\">Featured Experiences</h2>\n        <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6\">\n          {listings.slice(0, 6).map((l) => (\n            <div\n              key={l.id}\n              class=\"bg-white rounded-xl shadow-md overflow-hidden cursor-pointer hover:shadow-xl transition-shadow\"\n              onClick={() => navigate(`/listing?id=${l.id}`)}\n            >\n              <div class=\"h-48 bg-cover bg-center\" style={{ backgroundImage: `url('${l.image_url}')` }} />\n              <div class=\"p-5\">\n                <span class=\"inline-block px-2 py-1 bg-amber-100 text-amber-700 text-xs font-medium rounded-full mb-2\">{l.category}</span>\n                <h3 class=\"text-lg font-bold mb-1\">{l.title}</h3>\n                <p class=\"text-sm text-gray-500 mb-3\">📍 {l.location}</p>\n                <div class=\"flex justify-between items-center\">\n                  <span class=\"text-xl font-bold text-amber-600\">{fmtKES(l.price)}</span>\n                  <span class=\"text-sm text-gray-400\">per person</span>\n                </div>\n              </div>\n            </div>\n          ))}\n        </div>\n      </section>\n\n      {/* Why Choose Us */}\n      <section class=\"bg-amber-50 py-16\">\n        <div class=\"max-w-7xl mx-auto px-4\">\n          <h2 class=\"text-2xl font-serif font-bold text-center mb-12\">Why Choose Promise Luxury?</h2>\n          <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n            <div class=\"text-center\">\n              <div class=\"text-4xl mb-4\">🏆</div>\n              <h3 class=\"text-lg font-bold mb-2\">Curated Luxury</h3>\n              <p class=\"text-gray-600\">Hand-picked experiences from Kenya's finest providers</p>\n            </div>\n            <div class=\"text-center\">\n              <div class=\"text-4xl mb-4\">📱</div>\n              <h3 class=\"text-lg font-bold mb-2\">M-Pesa Ready</h3>\n              <p class=\"text-gray-600\">Pay seamlessly with M-Pesa, cards, and more</p>\n            </div>\n            <div class=\"text-center\">\n              <div class=\"text-4xl mb-4\">🛡️</div>\n              <h3 class=\"text-lg font-bold mb-2\">Secure Booking</h3>\n              <p class=\"text-gray-600\">Your bookings and payments are always protected</p>\n            </div>\n          </div>\n        </div>\n      </section>\n    </div>\n  );\n}\n",[],[193,283,317,343],"9f9e4347-359f-4eb2-b205-ee9907b59f3e","CustomerDashboard.tsx","4e985fd6-811e-11f1-8cfe-1607ee4eb77e",30,["D",1784210947959],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport type { User } from \"../App.tsx\";\n\nexport function CustomerDashboard({ api, user, navigate }: {\n  api: (path: string, opts?: RequestInit) => Promise<any>;\n  user: User | null;\n  navigate: (path: string) => void;\n}) {\n  const [bookings, setBookings] = useState<any[]>([]);\n  const [loading, setLoading] = useState(true);\n  const [tab, setTab] = useState<\"bookings\" | \"profile\">(\"bookings\");\n\n  useEffect(() => {\n    if (!user) { navigate(\"/login\"); return; }\n    api(\"/api/bookings\").then((d) => {\n      setBookings(d.bookings || []);\n      setLoading(false);\n    });\n  }, [user]);\n\n  const fmtKES = (n: number) => `KES ${Number(n).toLocaleString()}`;\n\n  const cancelBooking = async (id: number) => {\n    if (!confirm(\"Cancel this booking?\")) return;\n    await api(`/api/bookings/${id}/cancel`, { method: \"POST\" });\n    api(\"/api/bookings\").then((d) => setBookings(d.bookings || []));\n  };\n\n  const statusColors: Record<string, string> = {\n    confirmed: \"bg-green-100 text-green-700\",\n    pending: \"bg-yellow-100 text-yellow-700\",\n    cancelled: \"bg-red-100 text-red-700\",\n    completed: \"bg-blue-100 text-blue-700\",\n  };\n\n  return (\n    <div class=\"max-w-5xl mx-auto px-4 py-8\">\n      <div class=\"flex items-center justify-between mb-6\">\n        <div>\n          <h1 class=\"text-2xl font-serif font-bold\">Welcome, {user?.name}!</h1>\n          <p class=\"text-gray-500\">Manage your bookings and account</p>\n        </div>\n        <button class=\"bg-amber-600 text-white px-4 py-2 rounded-lg hover:bg-amber-700 cursor-pointer\" onClick={() => navigate(\"/listings\")}>Book New Experience</button>\n      </div>\n\n      <div class=\"flex gap-2 mb-6 border-b\">\n        <button class={`px-4 py-2 font-medium cursor-pointer ${tab === \"bookings\" ? \"text-amber-600 border-b-2 border-amber-600\" : \"text-gray-500\"}`} onClick={() => setTab(\"bookings\")}>My Bookings</button>\n        <button class={`px-4 py-2 font-medium cursor-pointer ${tab === \"profile\" ? \"text-amber-600 border-b-2 border-amber-600\" : \"text-gray-500\"}`} onClick={() => setTab(\"profile\")}>Profile</button>\n      </div>\n\n      {tab === \"bookings\" && (\n        loading ? <div class=\"text-center py-12 text-gray-400\">Loading your bookings…</div> :\n        bookings.length === 0 ? (\n          <div class=\"text-center py-16\">\n            <div class=\"text-5xl mb-4\">📭</div>\n            <p class=\"text-gray-500 mb-4\">You have no bookings yet.</p>\n            <button class=\"bg-amber-600 text-white px-6 py-2 rounded-lg hover:bg-amber-700 cursor-pointer\" onClick={() => navigate(\"/listings\")}>Browse Listings</button>\n          </div>\n        ) : (\n          <div class=\"space-y-4\">\n            {bookings.map((b) => (\n              <div key={b.id} class=\"bg-white rounded-xl shadow-sm border p-4 flex flex-col sm:flex-row gap-4\">\n                <div class=\"w-full sm:w-32 h-32 bg-cover bg-center rounded-lg flex-shrink-0\" style={{ backgroundImage: `url('${b.listing_image}')` }} />\n                <div class=\"flex-1\">\n                  <div class=\"flex items-start justify-between\">\n                    <div>\n                      <h3 class=\"text-lg font-bold\">{b.listing_title}</h3>\n                      <p class=\"text-sm text-gray-500\">📍 {b.listing_location}</p>\n                      <p class=\"text-sm text-gray-500 mt-1\">📅 {b.booking_date} · 👥 {b.guests} guests</p>\n                      <p class=\"text-sm text-gray-500\">💳 {b.payment_method || \"M-Pesa\"} · {b.payment_status}</p>\n                    </div>\n                    <span class={`px-3 py-1 rounded-full text-xs font-medium ${statusColors[b.status] || \"bg-gray-100 text-gray-700\"}`}>{b.status}</span>\n                  </div>\n                  <div class=\"flex items-center justify-between mt-3\">\n                    <span class=\"text-lg font-bold text-amber-600\">{fmtKES(b.total_amount)}</span>\n                    {b.status !== \"cancelled\" && b.status !== \"completed\" && (\n                      <button class=\"text-sm text-red-500 hover:text-red-700 cursor-pointer\" onClick={() => cancelBooking(b.id)}>Cancel Booking</button>\n                    )}\n                  </div>\n                </div>\n              </div>\n            ))}\n          </div>\n        )\n      )}\n\n      {tab === \"profile\" && user && (\n        <div class=\"bg-white rounded-xl shadow-sm border p-6 max-w-lg\">\n          <h3 class=\"text-lg font-bold mb-4\">Account Information</h3>\n          <div class=\"space-y-3\">\n            <div><span class=\"text-gray-500 text-sm\">Name</span><p class=\"font-medium\">{user.name}</p></div>\n            <div><span class=\"text-gray-500 text-sm\">Email</span><p class=\"font-medium\">{user.email}</p></div>\n            <div><span class=\"text-gray-500 text-sm\">Phone</span><p class=\"font-medium\">{user.phone || \"Not set\"}</p></div>\n            <div><span class=\"text-gray-500 text-sm\">Account Type</span><p class=\"font-medium capitalize\">{user.role}</p></div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n",[],[193,283,317,350],"18e49ea9-5cc4-4f14-a34d-eea8c87f8555","Contact.tsx","4e918eea-811e-11f1-b481-1607ee4eb77e",15,["D",1784210259185],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport type { Settings } from \"../App.tsx\";\n\nexport function Contact({ settings }: { settings: Settings | null }) {\n  return (\n    <div class=\"max-w-4xl mx-auto px-4 py-12\">\n      <h1 class=\"text-3xl font-serif font-bold text-center mb-8\">Get in Touch</h1>\n      <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\n        <div class=\"bg-white rounded-xl shadow-sm p-6\">\n          <h2 class=\"text-lg font-bold mb-4\">Contact Information</h2>\n          <div class=\"space-y-4\">\n            <div class=\"flex items-center gap-3\">\n              <span class=\"text-2xl\">📧</span>\n              <div><p class=\"text-sm text-gray-500\">Email</p><p class=\"font-medium\">{settings?.contact_email || \"info@promiseluxury.co.ke\"}</p></div>\n            </div>\n            <div class=\"flex items-center gap-3\">\n              <span class=\"text-2xl\">📞</span>\n              <div><p class=\"text-sm text-gray-500\">Phone</p><p class=\"font-medium\">{settings?.contact_phone || \"+254700000000\"}</p></div>\n            </div>\n            <div class=\"flex items-center gap-3\">\n              <span class=\"text-2xl\">💬</span>\n              <div><p class=\"text-sm text-gray-500\">WhatsApp</p><p class=\"font-medium\">{settings?.whatsapp || \"+254700000000\"}</p></div>\n            </div>\n            <div class=\"flex items-center gap-3\">\n              <span class=\"text-2xl\">📍</span>\n              <div><p class=\"text-sm text-gray-500\">Address</p><p class=\"font-medium\">{settings?.address || \"Nairobi, Kenya\"}</p></div>\n            </div>\n          </div>\n          <div class=\"flex gap-3 mt-6\">\n            {settings?.facebook && <a href={settings.facebook} class=\"text-2xl hover:text-amber-600\">📘</a>}\n            {settings?.instagram && <a href={settings.instagram} class=\"text-2xl hover:text-amber-600\">📷</a>}\n            {settings?.twitter && <a href={settings.twitter} class=\"text-2xl hover:text-amber-600\">🐦</a>}\n          </div>\n        </div>\n        <div class=\"bg-white rounded-xl shadow-sm p-6\">\n          <h2 class=\"text-lg font-bold mb-4\">Send a Message</h2>\n          <form class=\"space-y-3\" onSubmit={(e) => { e.preventDefault(); alert(\"Thank you! We'll get back to you soon.\"); }}>\n            <input type=\"text\" placeholder=\"Your Name\" required class=\"w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500\" />\n            <input type=\"email\" placeholder=\"Your Email\" required class=\"w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500\" />\n            <textarea placeholder=\"Your Message\" rows={4} required class=\"w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500\" />\n            <button type=\"submit\" class=\"w-full bg-amber-600 text-white py-3 rounded-lg font-medium hover:bg-amber-700 cursor-pointer\">Send Message</button>\n          </form>\n        </div>\n      </div>\n    </div>\n  );\n}\n",[],[193,283,317,358],"800ec120-29ea-41d3-acc9-11f862ef1b05","About.tsx","4e8b6d12-811e-11f1-9f0e-1607ee4eb77e",14,["D",1784210259178],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport type { Settings } from \"../App.tsx\";\n\nexport function About({ settings }: { settings: Settings | null }) {\n  return (\n    <div class=\"max-w-4xl mx-auto px-4 py-12\">\n      <h1 class=\"text-3xl font-serif font-bold text-center mb-8\">About {settings?.company_name || \"Promise Luxury\"}</h1>\n      <div class=\"bg-white rounded-xl shadow-sm p-8 mb-8\">\n        <p class=\"text-gray-700 leading-relaxed text-lg mb-4\">{settings?.about_text || \"Promise Luxury is Kenya's premier luxury booking platform.\"}</p>\n        <p class=\"text-gray-700 leading-relaxed mb-4\">\n          Based in {settings?.address || \"Nairobi, Kenya\"}, we curate the finest luxury experiences across the country — from thrilling safaris in the Maasai Mara to serene beachfront villas in Diani. Our mission is to make luxury accessible and booking effortless.\n        </p>\n        <p class=\"text-gray-700 leading-relaxed mb-4\">\n          With seamless M-Pesa integration and multiple payment options, booking your dream experience has never been easier. Every experience is hand-picked and verified to ensure the highest quality.\n        </p>\n      </div>\n      <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\n        <div class=\"bg-amber-50 rounded-xl p-6 text-center\">\n          <div class=\"text-3xl mb-2\">🌍</div>\n          <h3 class=\"font-bold mb-1\">Pan-Kenya Coverage</h3>\n          <p class=\"text-sm text-gray-600\">Experiences from Nairobi to the coast</p>\n        </div>\n        <div class=\"bg-amber-50 rounded-xl p-6 text-center\">\n          <div class=\"text-3xl mb-2\">⭐</div>\n          <h3 class=\"font-bold mb-1\">5-Star Quality</h3>\n          <p class=\"text-sm text-gray-600\">Every experience is verified & rated</p>\n        </div>\n        <div class=\"bg-amber-50 rounded-xl p-6 text-center\">\n          <div class=\"text-3xl mb-2\">🔒</div>\n          <h3 class=\"font-bold mb-1\">Secure Payments</h3>\n          <p class=\"text-sm text-gray-600\">M-Pesa, cards & more — all encrypted</p>\n        </div>\n      </div>\n    </div>\n  );\n}\n",[],[193,283,317,366],"05288bf2-44bc-4dd2-82a3-a2dd130ab99d","AdminSettings.tsx","10fc38ea-811f-11f1-9169-1607ee4eb77e","a3307ee5-fec5-4209-b6cd-6b897ba8b17a",22,["D",1784210585384],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport type { User, Settings } from \"../../App.tsx\";\nimport { AdminSidebar } from \"../../AdminSidebar.tsx\";\n\nexport function AdminSettings({ api, navigate, onLogout, user, settings }: {\n  api: (path: string, opts?: RequestInit) => Promise<any>;\n  navigate: (path: string) => void;\n  onLogout: () => void;\n  user: User;\n  settings: Settings | null;\n}) {\n  const [form, setForm] = useState<any>({});\n  const [saving, setSaving] = useState(false);\n  const [saved, setSaved] = useState(false);\n  const [tab, setTab] = useState<\"branding\" | \"contact\" | \"payment\" | \"content\">(\"branding\");\n\n  useEffect(() => {\n    if (settings) setForm(settings);\n  }, [settings]);\n\n  const save = async () => {\n    setSaving(true);\n    await api(\"/api/admin/settings\", { method: \"PUT\", body: JSON.stringify(form) });\n    setSaving(false);\n    setSaved(true);\n    setTimeout(() => setSaved(false), 3000);\n  };\n\n  const set = (key: string, val: any) => setForm({ ...form, [key]: val });\n\n  const tabs = [\n    { key: \"branding\", label: \"Branding\", icon: \"🎨\" },\n    { key: \"contact\", label: \"Contact\", icon: \"📞\" },\n    { key: \"payment\", label: \"Payments\", icon: \"💳\" },\n    { key: \"content\", label: \"Content\", icon: \"📝\" },\n  ];\n\n  return (\n    <div class=\"flex\">\n      <AdminSidebar navigate={navigate} onLogout={onLogout} user={user} active=\"/admin/settings\" />\n      <div class=\"ml-64 flex-1 p-8\">\n        <div class=\"flex justify-between items-center mb-6\">\n          <h1 class=\"text-2xl font-bold\">Website Settings</h1>\n          {saved && <span class=\"text-green-600 text-sm font-medium\">✓ Settings saved! Changes are live.</span>}\n          <button class=\"bg-amber-600 text-white px-6 py-2 rounded-lg hover:bg-amber-700 cursor-pointer disabled:opacity-50\" disabled={saving} onClick={save}>\n            {saving ? \"Saving…\" : \"Save All Changes\"}\n          </button>\n        </div>\n\n        <div class=\"flex gap-2 mb-6 border-b\">\n          {tabs.map((t) => (\n            <button key={t.key} class={`px-4 py-2 font-medium cursor-pointer ${tab === t.key ? \"text-amber-600 border-b-2 border-amber-600\" : \"text-gray-500\"}`} onClick={() => setTab(t.key as any)}>\n              {t.icon} {t.label}\n            </button>\n          ))}\n        </div>\n\n        {tab === \"branding\" && (\n          <div class=\"bg-white rounded-xl shadow-sm p-6 space-y-4 max-w-2xl\">\n            <div><label class=\"block text-sm font-medium mb-1\">Company Name</label>\n              <input type=\"text\" class=\"w-full px-4 py-2 border rounded-lg\" value={form.company_name || \"\"} onChange={(e) => set(\"company_name\", e.target.value)} /></div>\n            <div><label class=\"block text-sm font-medium mb-1\">Tagline</label>\n              <input type=\"text\" class=\"w-full px-4 py-2 border rounded-lg\" value={form.tagline || \"\"} onChange={(e) => set(\"tagline\", e.target.value)} /></div>\n            <div><label class=\"block text-sm font-medium mb-1\">Hero Banner Image URL</label>\n              <input type=\"text\" class=\"w-full px-4 py-2 border rounded-lg\" value={form.hero_image || \"\"} onChange={(e) => set(\"hero_image\", e.target.value)} />\n              {form.hero_image && <img src={form.hero_image} class=\"mt-2 w-full h-32 object-cover rounded-lg\" alt=\"Hero preview\" />}</div>\n            <div><label class=\"block text-sm font-medium mb-1\">Logo URL (optional)</label>\n              <input type=\"text\" class=\"w-full px-4 py-2 border rounded-lg\" value={form.logo_url || \"\"} onChange={(e) => set(\"logo_url\", e.target.value)} /></div>\n            <div><label class=\"block text-sm font-medium mb-1\">Primary Color</label>\n              <div class=\"flex gap-2 items-center\">\n                <input type=\"color\" class=\"w-12 h-10 rounded cursor-pointer\" value={form.primary_color || \"#b8860b\"} onChange={(e) => set(\"primary_color\", e.target.value)} />\n                <input type=\"text\" class=\"flex-1 px-4 py-2 border rounded-lg\" value={form.primary_color || \"\"} onChange={(e) => set(\"primary_color\", e.target.value)} />\n              </div></div>\n          </div>\n        )}\n\n        {tab === \"contact\" && (\n          <div class=\"bg-white rounded-xl shadow-sm p-6 space-y-4 max-w-2xl\">\n            <div><label class=\"block text-sm font-medium mb-1\">Contact Email</label>\n              <input type=\"email\" class=\"w-full px-4 py-2 border rounded-lg\" value={form.contact_email || \"\"} onChange={(e) => set(\"contact_email\", e.target.value)} /></div>\n            <div><label class=\"block text-sm font-medium mb-1\">Contact Phone</label>\n              <input type=\"tel\" class=\"w-full px-4 py-2 border rounded-lg\" value={form.contact_phone || \"\"} onChange={(e) => set(\"contact_phone\", e.target.value)} /></div>\n            <div><label class=\"block text-sm font-medium mb-1\">WhatsApp Number</label>\n              <input type=\"tel\" class=\"w-full px-4 py-2 border rounded-lg\" value={form.whatsapp || \"\"} onChange={(e) => set(\"whatsapp\", e.target.value)} /></div>\n            <div><label class=\"block text-sm font-medium mb-1\">Physical Address</label>\n              <input type=\"text\" class=\"w-full px-4 py-2 border rounded-lg\" value={form.address || \"\"} onChange={(e) => set(\"address\", e.target.value)} /></div>\n            <div class=\"grid grid-cols-3 gap-4\">\n              <div><label class=\"block text-sm font-medium mb-1\">Facebook</label>\n                <input type=\"text\" class=\"w-full px-4 py-2 border rounded-lg\" value={form.facebook || \"\"} onChange={(e) => set(\"facebook\", e.target.value)} /></div>\n              <div><label class=\"block text-sm font-medium mb-1\">Instagram</label>\n                <input type=\"text\" class=\"w-full px-4 py-2 border rounded-lg\" value={form.instagram || \"\"} onChange={(e) => set(\"instagram\", e.target.value)} /></div>\n              <div><label class=\"block text-sm font-medium mb-1\">Twitter</label>\n                <input type=\"text\" class=\"w-full px-4 py-2 border rounded-lg\" value={form.twitter || \"\"} onChange={(e) => set(\"twitter\", e.target.value)} /></div>\n            </div>\n          </div>\n        )}\n\n        {tab === \"payment\" && (\n          <div class=\"bg-white rounded-xl shadow-sm p-6 space-y-4 max-w-2xl\">\n            <h3 class=\"font-bold\">Payment Methods</h3>\n            <p class=\"text-sm text-gray-500\">Toggle which payment options appear at checkout.</p>\n            <label class=\"flex items-center justify-between p-4 border rounded-lg cursor-pointer hover:bg-gray-50\">\n              <div><span class=\"text-lg mr-2\">📱</span><span class=\"font-medium\">M-Pesa</span><p class=\"text-xs text-gray-500 mt-1\">Safaricom Daraja API STK Push</p></div>\n              <input type=\"checkbox\" class=\"w-6 h-6\" checked={!!form.mpesa_enabled} onChange={(e) => set(\"mpesa_enabled\", e.target.checked)} />\n            </label>\n            <label class=\"flex items-center justify-between p-4 border rounded-lg cursor-pointer hover:bg-gray-50\">\n              <div><span class=\"text-lg mr-2\">💳</span><span class=\"font-medium\">Card Payments</span><p class=\"text-xs text-gray-500 mt-1\">Visa & Mastercard via Pesapal/Flutterwave</p></div>\n              <input type=\"checkbox\" class=\"w-6 h-6\" checked={!!form.card_enabled} onChange={(e) => set(\"card_enabled\", e.target.checked)} />\n            </label>\n            <div class=\"mt-6 p-4 bg-amber-50 rounded-lg\">\n              <h4 class=\"font-bold text-amber-700 mb-2\">Payment Gateway Keys</h4>\n              <p class=\"text-sm text-gray-600 mb-3\">Configure your payment gateway API keys as environment variables in Val Town.</p>\n              <p class=\"text-xs text-gray-500\">Required env vars: PESAPAL_KEY, PESAPAL_SECRET (or FLUTTERWAVE_KEY), MPESA_SHORTCODE, MPESA_PASSKEY</p>\n            </div>\n          </div>\n        )}\n\n        {tab === \"content\" && (\n          <div class=\"bg-white rounded-xl shadow-sm p-6 space-y-4 max-w-2xl\">\n            <div><label class=\"block text-sm font-medium mb-1\">About Us Text</label>\n              <textarea class=\"w-full px-4 py-2 border rounded-lg\" rows={5} value={form.about_text || \"\"} onChange={(e) => set(\"about_text\", e.target.value)} /></div>\n            <div class=\"text-sm text-gray-500\">\n              <p class=\"font-medium text-gray-700 mb-1\">Note:</p>\n              Changes to this text will appear immediately on the About page after saving.\n              The company name and tagline (in Branding tab) control the navbar, hero, and footer text across the entire site.\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n",[],[193,283,317,382,374],"admin","bdaeaf14-6d9b-42ce-b5fb-39fe5e4d6ed2","AdminLogin.tsx","591fff7c-811e-11f1-805f-1607ee4eb77e",18,["D",1784210276900],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { User } from \"../../App.tsx\";\n\nexport function AdminLogin({ api, onLogin, navigate }: {\n  api: (path: string, opts?: RequestInit) => Promise<any>;\n  onLogin: (token: string, user: User) => void;\n  navigate: (path: string) => void;\n}) {\n  const [email, setEmail] = useState(\"\");\n  const [password, setPassword] = useState(\"\");\n  const [error, setError] = useState(\"\");\n  const [loading, setLoading] = useState(false);\n\n  const handleSubmit = async (e: any) => {\n    e.preventDefault();\n    setLoading(true);\n    setError(\"\");\n    const result = await api(\"/api/auth/login\", {\n      method: \"POST\",\n      body: JSON.stringify({ email, password }),\n    });\n    setLoading(false);\n    if (result.error) {\n      setError(result.error);\n    } else if (result.user.role !== \"admin\") {\n      setError(\"This account does not have admin access.\");\n    } else {\n      onLogin(result.token, result.user);\n      navigate(\"/admin\");\n    }\n  };\n\n  return (\n    <div class=\"min-h-screen flex items-center justify-center bg-gray-900\">\n      <div class=\"w-full max-w-md px-4\">\n        <div class=\"text-center mb-8\">\n          <span class=\"text-4xl\">🏨</span>\n          <h1 class=\"text-2xl font-serif font-bold text-amber-500 mt-2\">Promise Luxury Admin</h1>\n          <p class=\"text-gray-500 text-sm\">Control Panel Login</p>\n        </div>\n        {error && <div class=\"bg-red-900 text-red-200 p-3 rounded-lg mb-4 text-center\">{error}</div>}\n        <form onSubmit={handleSubmit} class=\"bg-gray-800 p-6 rounded-xl space-y-4\">\n          <div>\n            <label class=\"block text-sm font-medium mb-1 text-gray-300\">Admin Email</label>\n            <input type=\"email\" required class=\"w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-amber-500\" value={email} onChange={(e) => setEmail(e.target.value)} placeholder=\"admin@promiseluxury.co.ke\" />\n          </div>\n          <div>\n            <label class=\"block text-sm font-medium mb-1 text-gray-300\">Password</label>\n            <input type=\"password\" required class=\"w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-amber-500\" value={password} onChange={(e) => setPassword(e.target.value)} placeholder=\"••••••••\" />\n          </div>\n          <button type=\"submit\" disabled={loading} class=\"w-full bg-amber-600 text-white py-3 rounded-lg font-medium hover:bg-amber-700 cursor-pointer disabled:opacity-50\">\n            {loading ? \"Logging in…\" : \"Access Admin Panel\"}\n          </button>\n        </form>\n        <p class=\"text-center mt-4 text-gray-500 text-sm\">\n          Default: admin@promiseluxury.co.ke / admin123\n        </p>\n        <p class=\"text-center mt-2 text-gray-600 text-sm cursor-pointer hover:text-gray-400\" onClick={() => navigate(\"/\")}>← Back to website</p>\n      </div>\n    </div>\n  );\n}\n",[],[193,283,317,382,384],"248e9cc4-2e33-4541-abba-e2ec2c7856e7","AdminListings.tsx","83392d2e-811e-11f1-8cfe-1607ee4eb77e",27,["D",1784210947940],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport type { User } from \"../../App.tsx\";\nimport { AdminSidebar } from \"../../AdminSidebar.tsx\";\n\nexport function AdminListings({ api, navigate, onLogout, user }: {\n  api: (path: string, opts?: RequestInit) => Promise<any>;\n  navigate: (path: string) => void;\n  onLogout: () => void;\n  user: User;\n}) {\n  const [listings, setListings] = useState<any[]>([]);\n  const [loading, setLoading] = useState(true);\n  const [editing, setEditing] = useState<any>(null);\n  const [showForm, setShowForm] = useState(false);\n  const [form, setForm] = useState({ title: \"\", description: \"\", price: 0, category: \"\", image_url: \"\", capacity: 2, location: \"\", status: \"active\" });\n\n  const load = () => {\n    api(\"/api/admin/listings\").then((d) => { setListings(d.listings || []); setLoading(false); });\n  };\n  useEffect(load, []);\n\n  const fmtKES = (n: number) => `KES ${Number(n).toLocaleString()}`;\n  const startEdit = (l: any) => {\n    setEditing(l);\n    setForm({ title: l.title, description: l.description, price: l.price, category: l.category, image_url: l.image_url, capacity: l.capacity, location: l.location, status: l.status });\n    setShowForm(true);\n  };\n  const startCreate = () => {\n    setEditing(null);\n    setForm({ title: \"\", description: \"\", price: 0, category: \"\", image_url: \"\", capacity: 2, location: \"\", status: \"active\" });\n    setShowForm(true);\n  };\n  const save = async () => {\n    if (editing) await api(`/api/admin/listings/${editing.id}`, { method: \"PUT\", body: JSON.stringify(form) });\n    else await api(\"/api/admin/listings\", { method: \"POST\", body: JSON.stringify(form) });\n    setShowForm(false); load();\n  };\n  const del = async (id: number) => {\n    if (!confirm(\"Delete this listing?\")) return;\n    await api(`/api/admin/listings/${id}`, { method: \"DELETE\" }); load();\n  };\n\n  return (\n    <div class=\"flex\">\n      <AdminSidebar navigate={navigate} onLogout={onLogout} user={user} active=\"/admin/listings\" />\n      <div class=\"ml-64 flex-1 p-8\">\n        <div class=\"flex justify-between items-center mb-6\">\n          <h1 class=\"text-2xl font-bold\">Manage Listings</h1>\n          <button class=\"bg-amber-600 text-white px-4 py-2 rounded-lg hover:bg-amber-700 cursor-pointer\" onClick={startCreate}>+ Add Listing</button>\n        </div>\n        {showForm && (\n          <div class=\"bg-white rounded-xl shadow-sm p-6 mb-6\">\n            <h2 class=\"text-lg font-bold mb-4\">{editing ? \"Edit Listing\" : \"New Listing\"}</h2>\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n              <input type=\"text\" placeholder=\"Title\" class=\"px-4 py-2 border rounded-lg\" value={form.title} onChange={(e) => setForm({ ...form, title: e.target.value })} />\n              <input type=\"text\" placeholder=\"Category\" class=\"px-4 py-2 border rounded-lg\" value={form.category} onChange={(e) => setForm({ ...form, category: e.target.value })} />\n              <input type=\"number\" placeholder=\"Price (KES)\" class=\"px-4 py-2 border rounded-lg\" value={form.price} onChange={(e) => setForm({ ...form, price: parseFloat(e.target.value) || 0 })} />\n              <input type=\"number\" placeholder=\"Capacity\" class=\"px-4 py-2 border rounded-lg\" value={form.capacity} onChange={(e) => setForm({ ...form, capacity: parseInt(e.target.value) || 1 })} />\n              <input type=\"text\" placeholder=\"Location\" class=\"px-4 py-2 border rounded-lg\" value={form.location} onChange={(e) => setForm({ ...form, location: e.target.value })} />\n              <input type=\"text\" placeholder=\"Image URL\" class=\"px-4 py-2 border rounded-lg\" value={form.image_url} onChange={(e) => setForm({ ...form, image_url: e.target.value })} />\n              <textarea placeholder=\"Description\" class=\"md:col-span-2 px-4 py-2 border rounded-lg\" rows={3} value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} />\n              <select class=\"px-4 py-2 border rounded-lg\" value={form.status} onChange={(e) => setForm({ ...form, status: e.target.value })}>\n                <option value=\"active\">Active</option><option value=\"inactive\">Inactive</option>\n              </select>\n            </div>\n            <div class=\"flex gap-2 mt-4\">\n              <button class=\"bg-amber-600 text-white px-6 py-2 rounded-lg hover:bg-amber-700 cursor-pointer\" onClick={save}>Save</button>\n              <button class=\"border px-6 py-2 rounded-lg hover:bg-gray-50 cursor-pointer\" onClick={() => setShowForm(false)}>Cancel</button>\n            </div>\n          </div>\n        )}\n        {loading ? <div class=\"text-gray-400\">Loading listings…</div> : (\n          <div class=\"bg-white rounded-xl shadow-sm overflow-x-auto\">\n            <table class=\"w-full\"><thead class=\"bg-gray-50 border-b\"><tr>\n              <th class=\"text-left px-4 py-3 text-sm font-medium text-gray-600\">Listing</th>\n              <th class=\"text-left px-4 py-3 text-sm font-medium text-gray-600\">Category</th>\n              <th class=\"text-left px-4 py-3 text-sm font-medium text-gray-600\">Price</th>\n              <th class=\"text-left px-4 py-3 text-sm font-medium text-gray-600\">Status</th>\n              <th class=\"text-left px-4 py-3 text-sm font-medium text-gray-600\">Actions</th>\n            </tr></thead><tbody>\n              {listings.map((l) => (\n                <tr key={l.id} class=\"border-b hover:bg-gray-50\">\n                  <td class=\"px-4 py-3\"><div class=\"flex items-center gap-3\">\n                    <div class=\"w-10 h-10 bg-cover bg-center rounded\" style={{ backgroundImage: `url('${l.image_url}')` }} />\n                    <div><p class=\"font-medium text-sm\">{l.title}</p><p class=\"text-xs text-gray-400\">{l.location}</p></div>\n                  </div></td>\n                  <td class=\"px-4 py-3 text-sm\">{l.category}</td>\n                  <td class=\"px-4 py-3 text-sm font-medium text-amber-600\">{fmtKES(l.price)}</td>\n                  <td class=\"px-4 py-3\"><span class={`px-2 py-1 rounded-full text-xs ${l.status === \"active\" ? \"bg-green-100 text-green-700\" : \"bg-gray-100 text-gray-500\"}`}>{l.status}</span></td>\n                  <td class=\"px-4 py-3\">\n                    <button class=\"text-sm text-blue-500 hover:text-blue-700 cursor-pointer mr-3\" onClick={() => startEdit(l)}>Edit</button>\n                    <button class=\"text-sm text-red-500 hover:text-red-700 cursor-pointer\" onClick={() => del(l.id)}>Delete</button>\n                  </td>\n                </tr>\n              ))}\n            </tbody></table>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n",[],[193,283,317,382,392],"50017c3d-afe0-4cff-95e5-ed36fe88d5a7","AdminDashboard.tsx","8332fb52-811e-11f1-bfcd-1607ee4eb77e",28,["D",1784210947952],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport type { User } from \"../../App.tsx\";\nimport { AdminSidebar } from \"../../AdminSidebar.tsx\";\n\nexport function AdminDashboard({ api, user, navigate, onLogout }: {\n  api: (path: string, opts?: RequestInit) => Promise<any>;\n  user: User;\n  navigate: (path: string) => void;\n  onLogout: () => void;\n}) {\n  const [stats, setStats] = useState<any>(null);\n  const [revenue, setRevenue] = useState<any[]>([]);\n  const [logs, setLogs] = useState<any[]>([]);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    Promise.all([\n      api(\"/api/admin/stats\"),\n      api(\"/api/admin/revenue\"),\n      api(\"/api/admin/logs\"),\n    ]).then(([s, r, l]) => {\n      setStats(s);\n      setRevenue(r.data || []);\n      setLogs(l.logs || []);\n      setLoading(false);\n    });\n  }, []);\n\n  const fmtKES = (n: number) => `KES ${Number(n).toLocaleString()}`;\n  const cards = [\n    { label: \"Total Revenue\", value: fmtKES(stats?.totalRevenue || 0), icon: \"💰\", color: \"bg-green-500\" },\n    { label: \"Total Bookings\", value: stats?.totalBookings || 0, icon: \"📅\", color: \"bg-blue-500\" },\n    { label: \"Today's Bookings\", value: stats?.todayBookings || 0, icon: \"📆\", color: \"bg-purple-500\" },\n    { label: \"Pending Payments\", value: stats?.pendingPayments || 0, icon: \"⏳\", color: \"bg-yellow-500\" },\n    { label: \"Total Customers\", value: stats?.totalCustomers || 0, icon: \"👥\", color: \"bg-indigo-500\" },\n    { label: \"Active Listings\", value: stats?.totalListings || 0, icon: \"🏨\", color: \"bg-amber-500\" },\n  ];\n\n  return (\n    <div class=\"flex\">\n      <AdminSidebar navigate={navigate} onLogout={onLogout} user={user} active=\"/admin\" />\n      <div class=\"ml-64 flex-1 p-8\">\n        <h1 class=\"text-2xl font-bold mb-6\">Dashboard Overview</h1>\n        {loading ? (\n          <div class=\"text-gray-400\">Loading stats…</div>\n        ) : (\n          <>\n            <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8\">\n              {cards.map((card) => (\n                <div key={card.label} class=\"bg-white rounded-xl shadow-sm p-6 flex items-center gap-4\">\n                  <div class={`w-12 h-12 rounded-lg flex items-center justify-center text-2xl ${card.color} text-white`}>{card.icon}</div>\n                  <div><p class=\"text-gray-500 text-sm\">{card.label}</p><p class=\"text-2xl font-bold\">{card.value}</p></div>\n                </div>\n              ))}\n            </div>\n            <div class=\"bg-white rounded-xl shadow-sm p-6 mb-8\">\n              <h2 class=\"text-lg font-bold mb-4\">Revenue (Last 30 Days)</h2>\n              {revenue.length === 0 ? (\n                <p class=\"text-gray-400\">No revenue data yet. Create some bookings to see revenue here.</p>\n              ) : (\n                <div class=\"flex items-end gap-1 h-40 overflow-x-auto\">\n                  {revenue.slice(0, 30).map((r) => {\n                    const max = Math.max(...revenue.map((x) => x.revenue), 1);\n                    const h = (r.revenue / max) * 100;\n                    return (\n                      <div key={r.date} class=\"flex flex-col items-center flex-1 min-w-[20px]\">\n                        <div class=\"bg-amber-500 rounded-t w-full\" style={{ height: `${Math.max(h, 2)}%` }} title={`${r.date}: ${fmtKES(r.revenue)}`} />\n                        <span class=\"text-[8px] text-gray-400 mt-1\">{r.date.slice(5)}</span>\n                      </div>\n                    );\n                  })}\n                </div>\n              )}\n            </div>\n            <div class=\"bg-white rounded-xl shadow-sm p-6\">\n              <h2 class=\"text-lg font-bold mb-4\">Recent Admin Activity</h2>\n              {logs.length === 0 ? (\n                <p class=\"text-gray-400\">No activity yet.</p>\n              ) : (\n                <div class=\"space-y-2\">\n                  {logs.slice(0, 10).map((log) => (\n                    <div key={log.id} class=\"flex items-center justify-between py-2 border-b last:border-0\">\n                      <div>\n                        <span class=\"text-sm font-medium\">{log.admin_name || \"Admin\"}</span>\n                        <span class=\"text-sm text-gray-500\"> · {log.action.replace(/_/g, \" \")}</span>\n                        {log.detail && <span class=\"text-sm text-gray-400\"> · {log.detail}</span>}\n                      </div>\n                      <span class=\"text-xs text-gray-400\">{new Date(log.created_at).toLocaleString()}</span>\n                    </div>\n                  ))}\n                </div>\n              )}\n            </div>\n          </>\n        )}\n      </div>\n    </div>\n  );\n}\n",[],[193,283,317,382,400],"d5290762-974e-4d57-a5b1-7d819dc81087","AdminCustomers.tsx","11035602-811f-11f1-99d4-1607ee4eb77e",23,["D",1784210585368],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport type { User } from \"../../App.tsx\";\nimport { AdminSidebar } from \"../../AdminSidebar.tsx\";\n\nexport function AdminCustomers({ api, navigate, onLogout, user }: {\n  api: (path: string, opts?: RequestInit) => Promise<any>;\n  navigate: (path: string) => void;\n  onLogout: () => void;\n  user: User;\n}) {\n  const [customers, setCustomers] = useState<any[]>([]);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    api(\"/api/admin/customers\").then((d) => { setCustomers(d.customers || []); setLoading(false); });\n  }, []);\n\n  const fmtKES = (n: number) => `KES ${Number(n).toLocaleString()}`;\n\n  return (\n    <div class=\"flex\">\n      <AdminSidebar navigate={navigate} onLogout={onLogout} user={user} active=\"/admin/customers\" />\n      <div class=\"ml-64 flex-1 p-8\">\n        <h1 class=\"text-2xl font-bold mb-6\">Customer Management</h1>\n        {loading ? <div class=\"text-gray-400\">Loading customers…</div> : customers.length === 0 ? (\n          <div class=\"bg-white rounded-xl shadow-sm p-12 text-center text-gray-400\">No customers yet.</div>\n        ) : (\n          <div class=\"bg-white rounded-xl shadow-sm overflow-x-auto\">\n            <table class=\"w-full\"><thead class=\"bg-gray-50 border-b\"><tr>\n              <th class=\"text-left px-4 py-3 text-sm font-medium text-gray-600\">Name</th>\n              <th class=\"text-left px-4 py-3 text-sm font-medium text-gray-600\">Email</th>\n              <th class=\"text-left px-4 py-3 text-sm font-medium text-gray-600\">Phone</th>\n              <th class=\"text-left px-4 py-3 text-sm font-medium text-gray-600\">Bookings</th>\n              <th class=\"text-left px-4 py-3 text-sm font-medium text-gray-600\">Total Spent</th>\n              <th class=\"text-left px-4 py-3 text-sm font-medium text-gray-600\">Joined</th>\n            </tr></thead><tbody>\n              {customers.map((c) => (\n                <tr key={c.id} class=\"border-b hover:bg-gray-50\">\n                  <td class=\"px-4 py-3 font-medium text-sm\">{c.name}</td>\n                  <td class=\"px-4 py-3 text-sm text-gray-600\">{c.email}</td>\n                  <td class=\"px-4 py-3 text-sm text-gray-600\">{c.phone || \"—\"}</td>\n                  <td class=\"px-4 py-3 text-sm\"><span class=\"px-2 py-1 bg-blue-100 text-blue-700 rounded-full text-xs\">{c.total_bookings}</span></td>\n                  <td class=\"px-4 py-3 text-sm font-medium text-amber-600\">{fmtKES(c.total_spent)}</td>\n                  <td class=\"px-4 py-3 text-sm text-gray-400\">{new Date(c.created_at).toLocaleDateString()}</td>\n                </tr>\n              ))}\n            </tbody></table>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n",[],[193,283,317,382,408],"6833e420-dbe0-491c-b48e-ce54c6ed1e1f","AdminBookings.tsx","10f756f4-811f-11f1-95be-1607ee4eb77e",21,["D",1784210585367],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport type { User } from \"../../App.tsx\";\nimport { AdminSidebar } from \"../../AdminSidebar.tsx\";\n\nexport function AdminBookings({ api, navigate, onLogout, user }: {\n  api: (path: string, opts?: RequestInit) => Promise<any>;\n  navigate: (path: string) => void;\n  onLogout: () => void;\n  user: User;\n}) {\n  const [bookings, setBookings] = useState<any[]>([]);\n  const [loading, setLoading] = useState(true);\n  const [filter, setFilter] = useState(\"all\");\n\n  const load = () => {\n    api(\"/api/admin/bookings\").then((d) => { setBookings(d.bookings || []); setLoading(false); });\n  };\n  useEffect(load, []);\n\n  const fmtKES = (n: number) => `KES ${Number(n).toLocaleString()}`;\n  const statusColors: Record<string, string> = {\n    confirmed: \"bg-green-100 text-green-700\", pending: \"bg-yellow-100 text-yellow-700\",\n    cancelled: \"bg-red-100 text-red-700\", completed: \"bg-blue-100 text-blue-700\",\n  };\n\n  const updateStatus = async (id: number, status: string) => {\n    await api(`/api/admin/bookings/${id}/status`, { method: \"PUT\", body: JSON.stringify({ status }) });\n    load();\n  };\n\n  const filtered = filter === \"all\" ? bookings : bookings.filter((b) => b.status === filter);\n\n  return (\n    <div class=\"flex\">\n      <AdminSidebar navigate={navigate} onLogout={onLogout} user={user} active=\"/admin/bookings\" />\n      <div class=\"ml-64 flex-1 p-8\">\n        <h1 class=\"text-2xl font-bold mb-6\">Manage Bookings</h1>\n        <div class=\"flex gap-2 mb-6\">\n          {[\"all\", \"confirmed\", \"pending\", \"cancelled\", \"completed\"].map((s) => (\n            <button key={s} class={`px-4 py-2 rounded-lg text-sm font-medium cursor-pointer capitalize ${filter === s ? \"bg-amber-600 text-white\" : \"bg-white border\"}`} onClick={() => setFilter(s)}>{s}</button>\n          ))}\n        </div>\n        {loading ? <div class=\"text-gray-400\">Loading bookings…</div> : filtered.length === 0 ? (\n          <div class=\"bg-white rounded-xl shadow-sm p-12 text-center text-gray-400\">No bookings found.</div>\n        ) : (\n          <div class=\"bg-white rounded-xl shadow-sm overflow-x-auto\">\n            <table class=\"w-full\"><thead class=\"bg-gray-50 border-b\"><tr>\n              <th class=\"text-left px-4 py-3 text-sm font-medium text-gray-600\">Booking</th>\n              <th class=\"text-left px-4 py-3 text-sm font-medium text-gray-600\">Customer</th>\n              <th class=\"text-left px-4 py-3 text-sm font-medium text-gray-600\">Date</th>\n              <th class=\"text-left px-4 py-3 text-sm font-medium text-gray-600\">Amount</th>\n              <th class=\"text-left px-4 py-3 text-sm font-medium text-gray-600\">Payment</th>\n              <th class=\"text-left px-4 py-3 text-sm font-medium text-gray-600\">Status</th>\n              <th class=\"text-left px-4 py-3 text-sm font-medium text-gray-600\">Actions</th>\n            </tr></thead><tbody>\n              {filtered.map((b) => (\n                <tr key={b.id} class=\"border-b hover:bg-gray-50\">\n                  <td class=\"px-4 py-3\"><p class=\"font-medium text-sm\">#{b.id}</p><p class=\"text-xs text-gray-500\">{b.listing_title}</p><p class=\"text-xs text-gray-400\">👥 {b.guests} guests</p></td>\n                  <td class=\"px-4 py-3\"><p class=\"text-sm font-medium\">{b.customer_name}</p><p class=\"text-xs text-gray-400\">{b.customer_email}</p>{b.customer_phone && <p class=\"text-xs text-gray-400\">{b.customer_phone}</p>}</td>\n                  <td class=\"px-4 py-3 text-sm\">{b.booking_date}</td>\n                  <td class=\"px-4 py-3 text-sm font-medium text-amber-600\">{fmtKES(b.total_amount)}</td>\n                  <td class=\"px-4 py-3\"><span class={`text-xs px-2 py-1 rounded-full ${b.payment_status === \"paid\" ? \"bg-green-100 text-green-700\" : \"bg-gray-100 text-gray-500\"}`}>{b.payment_method} · {b.payment_status}</span></td>\n                  <td class=\"px-4 py-3\"><span class={`px-2 py-1 rounded-full text-xs ${statusColors[b.status] || \"bg-gray-100\"}`}>{b.status}</span></td>\n                  <td class=\"px-4 py-3\">\n                    <select class=\"text-xs border rounded px-2 py-1\" value={b.status} onChange={(e) => updateStatus(b.id, e.target.value)}>\n                      <option value=\"pending\">Pending</option><option value=\"confirmed\">Confirm</option>\n                      <option value=\"completed\">Complete</option><option value=\"cancelled\">Cancel</option>\n                    </select>\n                  </td>\n                </tr>\n              ))}\n            </tbody></table>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n",[],[193,283,317,382,416],"259e136f-9e54-4ade-b6b8-055511f4ff58",["D",1784210276900],"directory",[208,209,210,211,212,213],[193,283,317,382],"ee559e45-0416-4163-bec1-17b886293278",9,["D",1784210160562],[207,214,215,216,217,218,219,220,221],[193,283,317],"e3b32691-0b32-4747-84d1-859e3e88a88d",["D",1784209850342],[206,222,223,224,225],[193,283],"9daa81ff-2465-4374-8775-8b4627f84cfd",["D",1784209850342],[205,226,227,228],[193],["D",1784209850342],["D",1789472446807],{"_11":12,"_149":74},{"_11":12,"_145":12,"_73":74,"_30":72,"_146":147,"_148":24},{"_40":133,"_13":16,"_34":37,"_134":94,"_135":64,"_136":137,"_138":98,"_139":140,"_141":142,"_143":14,"_144":12},"ctx",{"_53":-5,"_170":479,"_480":481,"_482":483,"_484":24,"_485":24,"_486":24,"_487":107,"_488":-5,"_489":-7,"_490":-7,"_491":26,"_492":24,"_493":24,"_494":-5,"_495":24,"_496":24,"_497":24,"_498":-5},"ENV",{"_450":451,"_452":453,"_454":16,"_455":456,"_457":458,"_459":460,"_461":462,"_463":464,"_465":466,"_467":468,"_469":470,"_471":472,"_473":474,"_475":476,"_477":478},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","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"]
</article></body></html>

History · index.html