Loading Promise Luxury…

\n \n \n \n \n\n",[],[98,132],"12dc12eb-6902-48df-9b3a-ddca7d9797ae","favicon.svg","019f6b31-c02d-73ee-96f7-bfad34e7207a",4,["D",1784210089389],"\n\n",[],[98,139],"e3b32691-0b32-4747-84d1-859e3e88a88d","components","019f6b31-c02d-73ee-96f7-ba5c7f1b1e87",["D",1784209850342],[152,153,154,155,156],[98,147],{"_35":189,"_13":190,"_65":191,"_67":148,"_68":69,"_70":192,"_72":73,"_37":193,"_17":87,"_76":101,"_78":-5,"_80":50,"_81":-5,"_108":194,"_18":195},{"_35":181,"_13":182,"_65":183,"_67":148,"_68":69,"_70":184,"_72":73,"_37":185,"_17":87,"_76":88,"_78":186,"_80":50,"_81":-5,"_108":187,"_18":188},{"_35":173,"_13":174,"_65":175,"_67":148,"_68":69,"_70":176,"_72":73,"_37":177,"_17":33,"_76":88,"_78":178,"_80":50,"_81":-5,"_108":179,"_18":180},{"_35":165,"_13":166,"_65":167,"_67":148,"_68":69,"_70":168,"_72":73,"_37":169,"_17":87,"_76":88,"_78":170,"_80":50,"_81":-5,"_108":171,"_18":172},{"_35":157,"_13":158,"_65":159,"_67":148,"_68":69,"_70":160,"_72":73,"_37":161,"_17":87,"_76":88,"_78":162,"_80":50,"_81":-5,"_108":163,"_18":164},"8e752db4-3138-44b3-9e91-6d7ec802cd6a","Navbar.tsx","02aa4e22-811e-11f1-8008-1607ee4eb77e",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",[],[98,147,158],"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",[],[98,147,166],"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",[],[98,147,174],"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",[],[98,147,182],"ee559e45-0416-4163-bec1-17b886293278","pages","6f6fbba3-2db9-4dcc-9a2d-9bd09cf556e9",9,["D",1784210160562],[196,197,198,199,200,201,202,203,204],[98,147,190],{"_35":269,"_13":270,"_65":271,"_67":191,"_68":69,"_70":272,"_72":73,"_37":273,"_17":87,"_76":101,"_78":-5,"_80":50,"_81":-5,"_108":274,"_18":275},{"_35":261,"_13":262,"_65":263,"_67":191,"_68":69,"_70":264,"_72":73,"_37":265,"_17":87,"_76":88,"_78":266,"_80":50,"_81":-5,"_108":267,"_18":268},{"_35":253,"_13":254,"_65":255,"_67":191,"_68":69,"_70":256,"_72":73,"_37":257,"_17":87,"_76":88,"_78":258,"_80":50,"_81":-5,"_108":259,"_18":260},{"_35":245,"_13":246,"_65":247,"_67":191,"_68":69,"_70":248,"_72":73,"_37":249,"_17":75,"_76":88,"_78":250,"_80":50,"_81":-5,"_108":251,"_18":252},{"_35":237,"_13":238,"_65":239,"_67":191,"_68":69,"_70":240,"_72":73,"_37":241,"_17":71,"_76":88,"_78":242,"_80":50,"_81":-5,"_108":243,"_18":244},{"_35":229,"_13":230,"_65":231,"_67":191,"_68":69,"_70":232,"_72":73,"_37":233,"_17":75,"_76":88,"_78":234,"_80":50,"_81":-5,"_108":235,"_18":236},{"_35":221,"_13":222,"_65":223,"_67":191,"_68":69,"_70":224,"_72":73,"_37":225,"_17":75,"_76":88,"_78":226,"_80":50,"_81":-5,"_108":227,"_18":228},{"_35":213,"_13":214,"_65":215,"_67":191,"_68":69,"_70":216,"_72":73,"_37":217,"_17":87,"_76":88,"_78":218,"_80":50,"_81":-5,"_108":219,"_18":220},{"_35":205,"_13":206,"_65":207,"_67":191,"_68":69,"_70":208,"_72":73,"_37":209,"_17":87,"_76":88,"_78":210,"_80":50,"_81":-5,"_108":211,"_18":212},"8eab313b-217f-4b7f-8364-ddc8093bc1ce","Register.tsx","3ba4117c-811e-11f1-8008-1607ee4eb77e",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",[],[98,147,190,206],"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",[],[98,147,190,214],"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",[],[98,147,190,222],"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",[],[98,147,190,230],"a28a80a9-e5dd-4e1b-91e7-722fef75a3bf","Home.tsx","13c2b42e-811e-11f1-9156-1607ee4eb77e",34,["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",[],[98,147,190,238],"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",[],[98,147,190,246],"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",[],[98,147,190,254],"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",[],[98,147,190,262],"259e136f-9e54-4ade-b6b8-055511f4ff58","admin","a3307ee5-fec5-4209-b6cd-6b897ba8b17a",18,["D",1784210276900],[276,277,278,279,280,281],[98,147,190,270],{"_35":321,"_13":322,"_65":323,"_67":271,"_68":69,"_70":324,"_72":73,"_37":325,"_17":87,"_76":88,"_78":326,"_80":50,"_81":-5,"_108":327,"_18":328},{"_35":313,"_13":314,"_65":315,"_67":271,"_68":69,"_70":316,"_72":73,"_37":317,"_17":87,"_76":88,"_78":318,"_80":50,"_81":-5,"_108":319,"_18":320},{"_35":305,"_13":306,"_65":307,"_67":271,"_68":69,"_70":308,"_72":73,"_37":309,"_17":75,"_76":88,"_78":310,"_80":50,"_81":-5,"_108":311,"_18":312},{"_35":297,"_13":298,"_65":299,"_67":271,"_68":69,"_70":300,"_72":73,"_37":301,"_17":75,"_76":88,"_78":302,"_80":50,"_81":-5,"_108":303,"_18":304},{"_35":290,"_13":291,"_65":292,"_67":271,"_68":69,"_70":272,"_72":73,"_37":293,"_17":87,"_76":88,"_78":294,"_80":50,"_81":-5,"_108":295,"_18":296},{"_35":282,"_13":283,"_65":284,"_67":271,"_68":69,"_70":285,"_72":73,"_37":286,"_17":87,"_76":88,"_78":287,"_80":50,"_81":-5,"_108":288,"_18":289},"05288bf2-44bc-4dd2-82a3-a2dd130ab99d","AdminSettings.tsx","10fc38ea-811f-11f1-9169-1607ee4eb77e",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",[],[98,147,190,270,283],"bdaeaf14-6d9b-42ce-b5fb-39fe5e4d6ed2","AdminLogin.tsx","591fff7c-811e-11f1-805f-1607ee4eb77e",["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",[],[98,147,190,270,291],"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",[],[98,147,190,270,298],"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",[],[98,147,190,270,306],"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",[],[98,147,190,270,314],"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",[],[98,147,190,270,322],"fabf4cca-35d8-4e47-9b54-1715c5277af7",["D",1784209850342],"legacyEnvVars","httpPrivacy","description","Kenya luxury booking platform with customer & admin dashboards","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789545599&sig=91cfcc631bd9f3dd8274549c04838d172adf2572755982193460d49bfd04bd62","userId","6b71ea3a-ecc6-4d2b-923b-f7a069e6f0e3","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","019f6ae1-cdd4-762c-a4db-de889f147efc","tursoName","fabf4cca35d84e479b541715c5277af7","tursoHostname","fabf4cca35d84e479b541715c5277af7-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789472446807],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_377":373},"org",{"_11":12,"_371":12,"_372":373,"_337":338,"_374":375,"_376":50},"branch",{"_17":240,"_13":16,"_35":69,"_41":329,"_44":36,"_45":367,"_368":52,"_369":42,"_370":56,"_57":14,"_53":12},89,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","avatar","https://avatars.githubusercontent.com/u/305836342?v=4","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":329,"_13":14,"_37":504,"_48":-5,"_331":50,"_51":52,"_332":52,"_333":334,"_335":336,"_337":338,"_339":66,"_340":73,"_341":-5,"_342":-5,"_343":87,"_55":344,"_345":346,"_347":348,"_349":505,"_351":-5,"_352":353,"_354":353,"_355":356,"_357":356,"_358":356,"_359":353,"_360":353,"_361":506,"_363":507,"_365":508,"_49":50},[420,445,446,447],"files",[420,421,422,423,424,425,426,427,428,429,430,431,432,433,434,435,436,437,438,439,440,441,442,443,444,445,446,447],"counts",{"_411":87,"_412":75,"_413":87,"_34":414,"_415":416},[403,404,405,406],"upstreamProject",{"_35":42,"_13":58,"_333":400,"_335":336,"_51":52,"_361":401},"upstreamBranch",{"_35":36,"_37":398,"_39":399,"_13":16,"_41":42,"_17":43,"_44":-5,"_45":-5,"_46":47,"_48":-5,"_49":50,"_51":52,"_53":54,"_55":56,"_57":58},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],["D",1785420707976],"Starter template with client-side React & Hono server",{"_11":54,"_377":402},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789545599&sig=2316df07e67031dd48e537f6ce0c4c14b92716fed790ec83ecf27974cc65aa31",{"_35":97,"_13":98,"_65":99,"_67":-5,"_68":69,"_70":75,"_72":73,"_37":100,"_17":87,"_76":101,"_78":-5,"_80":50,"_81":-5,"_18":410},{"_35":91,"_13":92,"_65":93,"_67":-5,"_68":69,"_70":75,"_72":73,"_37":94,"_17":87,"_76":24,"_78":95,"_80":50,"_81":-5,"_18":409},{"_35":83,"_13":84,"_65":85,"_67":-5,"_68":69,"_70":33,"_72":73,"_37":86,"_17":87,"_76":88,"_78":89,"_80":50,"_81":-5,"_18":408},{"_35":63,"_13":64,"_65":66,"_67":-5,"_68":69,"_70":71,"_72":73,"_37":74,"_17":75,"_76":77,"_78":79,"_80":50,"_81":-5,"_18":407},[64],[84],[92],[98],"pulls","branches","forks",{"_417":87,"_419":87},"connections",{"_417":87,"_418":87},"count","unfilledCount","emptyCount",{"_35":97,"_13":98,"_65":99,"_67":-5,"_68":69,"_70":75,"_72":73,"_37":117,"_17":87,"_76":101,"_78":-5,"_80":50,"_81":-5,"_108":502,"_18":503},{"_35":146,"_13":147,"_65":148,"_67":99,"_68":69,"_70":75,"_72":73,"_37":149,"_17":87,"_76":101,"_78":-5,"_80":50,"_81":-5,"_108":500,"_18":501},{"_35":189,"_13":190,"_65":191,"_67":148,"_68":69,"_70":192,"_72":73,"_37":193,"_17":87,"_76":101,"_78":-5,"_80":50,"_81":-5,"_108":498,"_18":499},{"_35":269,"_13":270,"_65":271,"_67":191,"_68":69,"_70":272,"_72":73,"_37":273,"_17":87,"_76":101,"_78":-5,"_80":50,"_81":-5,"_108":496,"_18":497},{"_35":321,"_13":322,"_65":323,"_67":271,"_68":69,"_70":324,"_72":73,"_37":325,"_17":87,"_76":88,"_78":326,"_80":50,"_81":-5,"_108":494,"_18":495},{"_35":313,"_13":314,"_65":315,"_67":271,"_68":69,"_70":316,"_72":73,"_37":317,"_17":87,"_76":88,"_78":318,"_80":50,"_81":-5,"_108":492,"_18":493},{"_35":305,"_13":306,"_65":307,"_67":271,"_68":69,"_70":308,"_72":73,"_37":309,"_17":75,"_76":88,"_78":310,"_80":50,"_81":-5,"_108":490,"_18":491},{"_35":297,"_13":298,"_65":299,"_67":271,"_68":69,"_70":300,"_72":73,"_37":301,"_17":75,"_76":88,"_78":302,"_80":50,"_81":-5,"_108":488,"_18":489},{"_35":290,"_13":291,"_65":292,"_67":271,"_68":69,"_70":272,"_72":73,"_37":293,"_17":87,"_76":88,"_78":294,"_80":50,"_81":-5,"_108":486,"_18":487},{"_35":282,"_13":283,"_65":284,"_67":271,"_68":69,"_70":285,"_72":73,"_37":286,"_17":87,"_76":88,"_78":287,"_80":50,"_81":-5,"_108":484,"_18":485},{"_35":261,"_13":262,"_65":263,"_67":191,"_68":69,"_70":264,"_72":73,"_37":265,"_17":87,"_76":88,"_78":266,"_80":50,"_81":-5,"_108":482,"_18":483},{"_35":253,"_13":254,"_65":255,"_67":191,"_68":69,"_70":256,"_72":73,"_37":257,"_17":87,"_76":88,"_78":258,"_80":50,"_81":-5,"_108":480,"_18":481},{"_35":245,"_13":246,"_65":247,"_67":191,"_68":69,"_70":248,"_72":73,"_37":249,"_17":75,"_76":88,"_78":250,"_80":50,"_81":-5,"_108":478,"_18":479},{"_35":237,"_13":238,"_65":239,"_67":191,"_68":69,"_70":240,"_72":73,"_37":241,"_17":71,"_76":88,"_78":242,"_80":50,"_81":-5,"_108":476,"_18":477},{"_35":229,"_13":230,"_65":231,"_67":191,"_68":69,"_70":232,"_72":73,"_37":233,"_17":75,"_76":88,"_78":234,"_80":50,"_81":-5,"_108":474,"_18":475},{"_35":221,"_13":222,"_65":223,"_67":191,"_68":69,"_70":224,"_72":73,"_37":225,"_17":75,"_76":88,"_78":226,"_80":50,"_81":-5,"_108":472,"_18":473},{"_35":213,"_13":214,"_65":215,"_67":191,"_68":69,"_70":216,"_72":73,"_37":217,"_17":87,"_76":88,"_78":218,"_80":50,"_81":-5,"_108":470,"_18":471},{"_35":205,"_13":206,"_65":207,"_67":191,"_68":69,"_70":208,"_72":73,"_37":209,"_17":87,"_76":88,"_78":210,"_80":50,"_81":-5,"_108":468,"_18":469},{"_35":181,"_13":182,"_65":183,"_67":148,"_68":69,"_70":184,"_72":73,"_37":185,"_17":87,"_76":88,"_78":186,"_80":50,"_81":-5,"_108":466,"_18":467},{"_35":173,"_13":174,"_65":175,"_67":148,"_68":69,"_70":176,"_72":73,"_37":177,"_17":33,"_76":88,"_78":178,"_80":50,"_81":-5,"_108":464,"_18":465},{"_35":165,"_13":166,"_65":167,"_67":148,"_68":69,"_70":168,"_72":73,"_37":169,"_17":87,"_76":88,"_78":170,"_80":50,"_81":-5,"_108":462,"_18":463},{"_35":157,"_13":158,"_65":159,"_67":148,"_68":69,"_70":160,"_72":73,"_37":161,"_17":87,"_76":88,"_78":162,"_80":50,"_81":-5,"_108":460,"_18":461},{"_35":138,"_13":139,"_65":140,"_67":99,"_68":69,"_70":141,"_72":73,"_37":142,"_17":75,"_76":24,"_78":143,"_80":50,"_81":-5,"_108":458,"_18":459},{"_35":131,"_13":132,"_65":133,"_67":99,"_68":69,"_70":31,"_72":73,"_37":134,"_17":33,"_76":24,"_78":135,"_80":50,"_81":-5,"_108":456,"_18":457},{"_35":124,"_13":125,"_65":126,"_67":99,"_68":69,"_70":75,"_72":73,"_37":127,"_17":87,"_76":88,"_78":128,"_80":50,"_81":-5,"_108":454,"_18":455},{"_35":91,"_13":92,"_65":93,"_67":-5,"_68":69,"_70":75,"_72":73,"_37":114,"_17":87,"_76":24,"_78":95,"_80":50,"_81":-5,"_108":452,"_18":453},{"_35":83,"_13":84,"_65":85,"_67":-5,"_68":69,"_70":33,"_72":73,"_37":111,"_17":87,"_76":88,"_78":89,"_80":50,"_81":-5,"_108":450,"_18":451},{"_35":63,"_13":64,"_65":66,"_67":-5,"_68":69,"_70":71,"_72":73,"_37":107,"_17":75,"_76":77,"_78":79,"_80":50,"_81":-5,"_108":448,"_18":449},[],[64],[],[84],[],[92],[],[98,125],[],[98,132],[],[98,139],[],[98,147,158],[],[98,147,166],[],[98,147,174],[],[98,147,182],[],[98,147,190,206],[],[98,147,190,214],[],[98,147,190,222],[],[98,147,190,230],[],[98,147,190,238],[],[98,147,190,246],[],[98,147,190,254],[],[98,147,190,262],[],[98,147,190,270,283],[],[98,147,190,270,291],[],[98,147,190,270,298],[],[98,147,190,270,306],[],[98,147,190,270,314],[],[98,147,190,270,322],[424,425,426,427,428,429],[98,147,190,270],[423,430,431,432,433,434,435,436,437],[98,147,190],[422,438,439,440,441],[98,147],[421,442,443,444],[98],["D",1784209850342],["D",1789472446807],{"_11":12,"_377":373},{"_11":12,"_371":12,"_372":373,"_337":338,"_374":375,"_376":50},{"_17":240,"_13":16,"_35":69,"_41":329,"_44":36,"_45":367,"_368":52,"_369":42,"_370":56,"_57":14,"_53":12},"ctx",{"_361":-5,"_395":542,"_543":544,"_545":546,"_547":50,"_548":50,"_549":50,"_550":73,"_551":-5,"_552":-7,"_553":-7,"_554":87,"_555":50,"_556":50,"_557":-5,"_558":50,"_559":50,"_560":50,"_561":-5},"ENV",{"_513":514,"_515":516,"_517":16,"_518":519,"_520":521,"_522":523,"_524":525,"_526":527,"_528":529,"_530":531,"_532":533,"_534":535,"_536":537,"_538":539,"_540":541},"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>

Code