\n {/* Header */}\n

Accommodations

Our Rooms & Suites

\n Discover our handpicked collection of rooms designed for your utmost comfort.\n

\n\n {/* Filter */}\n

\n {[\"all\", \"Standard\", \"Deluxe\", \"Suite\"].map(f => (\n \n ))}\n

\n\n {/* Room Grid */}\n

\n {loading ? (\n

Loading rooms...

\n ) : (\n

\n {filtered.map((room, i) => (\n

\n {/* Room Image */}\n

\n {roomIcons[room.room_type] || \"🏠\"}\n

\n {room.status}\n

\n Room {room.room_number}\n

\n\n {/* Room Info */}\n

\n {room.room_type} Room\n

Floor {room.floor} • {room.ac_type} • Max {room.max_guests} guests

\n {room.description || \"A comfortable room with modern amenities.\"}\n

\n {[\"WiFi\", \"TV\", \"Minibar\", room.ac_type].map(f => (\n ✓ {f}\n ))}\n

\n \n ₹{room.price_per_night?.toLocaleString()}\n \n / night\n

\n room.status === \"available\" && setPage(\"booking\")}\n disabled={room.status !== \"available\"}\n style={{\n ...btnPrimary,\n padding: \"10px 24px\", borderRadius: 10, fontSize: 13,\n opacity: room.status !== \"available\" ? 0.5 : 1,\n cursor: room.status !== \"available\" ? \"not-allowed\" : \"pointer\",\n }}\n >\n {room.status === \"available\" ? \"Book Now\" : room.status === \"booked\" ? \"Occupied\" : \"Unavailable\"}\n \n

\n ))}\n

\n )}\n

\n );\n}\n",[277,193,92],"2582a548-5478-11f1-ae17-ee650bb23af1",["D",1779301042716],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { User } from \"../App.tsx\";\nimport { COLORS, FONTS, btnPrimary, inputStyle, labelStyle } from \"../styles.ts\";\n\ninterface Props {\n onLogin: (user: User) => void;\n notify: (msg: string, type?: \"success\" | \"error\") => void;\n}\n\nexport function LoginPage({ onLogin, notify }: Props) {\n const [username, setUsername] = useState(\"\");\n const [password, setPassword] = useState(\"\");\n const [loading, setLoading] = useState(false);\n const [showPassword, setShowPassword] = useState(false);\n\n const handleLogin = async () => {\n if (!username || !password) { notify(\"Please enter credentials\", \"error\"); return; }\n setLoading(true);\n try {\n const res = await fetch(\"/api/auth/login\", {\n method: \"POST\", headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ username, password }),\n });\n const data = await res.json();\n if (data.error) { notify(data.error, \"error\"); }\n else { onLogin(data.user); }\n } catch { notify(\"Login failed\", \"error\"); }\n setLoading(false);\n };\n\n return (\n

🔐

Staff Login

Access the Hotel Management Dashboard

\n\n

\n Username\n setUsername(e.target.value)}\n onKeyDown={e => e.key === \"Enter\" && handleLogin()} />\n

\n Password\n

\n setPassword(e.target.value)}\n onKeyDown={e => e.key === \"Enter\" && handleLogin()} />\n \n

\n\n \n

\n\n

🔑 Demo Credentials

\n Admin: admin / admin123
\n Receptionist: reception / reception123\n

\n );\n}\n",[277,193,128],"d6487b88-5477-11f1-8ca8-ee650bb23af1",["D",1779300909794],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport type { Page } from \"../App.tsx\";\nimport { COLORS, FONTS, btnPrimary, btnGold } from \"../styles.ts\";\n\nexport function HomePage({ setPage }: { setPage: (p: Page) => void }) {\n const [stats, setStats] = useState(null);\n\n useEffect(() => {\n fetch(\"/api/dashboard\").then(r => r.json()).then(setStats).catch(() => {});\n }, []);\n\n return (\n

\n {/* Hero Section */}\n

\n ★★★★★ Luxury Hotel & Resort\n

\n Experience Unparalleled Luxury\n

\n Immerse yourself in elegance at Grand Palace Hotels & Resorts. Where world-class hospitality meets timeless sophistication.\n

\n \n \n

\n\n {/* Search Bar */}\n

\n {[\n { label: \"Check In\", type: \"date\" },\n { label: \"Check Out\", type: \"date\" },\n { label: \"Guests\", type: \"select\", options: [\"1 Guest\", \"2 Guests\", \"3 Guests\", \"4 Guests\"] },\n { label: \"Room Type\", type: \"select\", options: [\"All Types\", \"Standard\", \"Deluxe\", \"Suite\"] },\n ].map((field, i) => (\n

\n \n {field.label}\n \n {field.type === \"select\" ? (\n \n ) : (\n \n )}\n

\n ))}\n \n

\n\n {/* Stats Bar */}\n

\n {[\n { num: stats?.totalRooms || \"50+\", label: \"Luxury Rooms\", icon: \"🛏️\" },\n { num: \"4.8\", label: \"Guest Rating\", icon: \"⭐\" },\n { num: \"10K+\", label: \"Happy Guests\", icon: \"😊\" },\n { num: \"15+\", label: \"Years of Excellence\", icon: \"🏆\" },\n ].map((s, i) => (\n

{s.icon}

{s.num}

{s.label}

\n ))}\n

\n\n {/* Room Types */}\n

Our Accommodations

Exquisite Room Collection

Choose from our carefully curated selection of rooms and suites, each designed to provide the ultimate comfort.

\n\n

\n {[\n { type: \"Standard Room\", price: \"₹2,500\", desc: \"Comfortable rooms with modern amenities, perfect for business travelers.\", features: [\"Queen Bed\", \"City View\", \"Free WiFi\", \"Room Service\"], gradient: \"linear-gradient(135deg, #667eea, #764ba2)\" },\n { type: \"Deluxe Room\", price: \"₹4,500\", desc: \"Spacious luxury rooms with panoramic views and premium furnishings.\", features: [\"King Bed\", \"Panoramic View\", \"Mini Bar\", \"Luxury Bath\"], gradient: \"linear-gradient(135deg, #f093fb, #f5576c)\" },\n { type: \"Royal Suite\", price: \"₹8,500\", desc: \"The pinnacle of luxury with private living areas and butler service.\", features: [\"Living Area\", \"Jacuzzi\", \"Butler Service\", \"Private Terrace\"], gradient: \"linear-gradient(135deg, #4facfe, #00f2fe)\" },\n ].map((room, i) => (\n

\n {i === 0 ? \"🛏️\" : i === 1 ? \"🌟\" : \"👑\"}\n

\n Popular\n

{room.type}

{room.desc}

\n {room.features.map(f => (\n ✓ {f}\n ))}\n

\n {room.price}\n / night\n

\n \n

\n ))}\n

\n\n {/* Amenities */}\n

World-Class Facilities

Hotel Amenities

\n {[\n { icon: \"🏊\", title: \"Swimming Pool\", desc: \"Infinity pool with stunning views\" },\n { icon: \"💆\", title: \"Spa & Wellness\", desc: \"Rejuvenating treatments & therapies\" },\n { icon: \"🍽️\", title: \"Fine Dining\", desc: \"Multi-cuisine gourmet restaurants\" },\n { icon: \"🏋️\", title: \"Fitness Center\", desc: \"State-of-the-art gym equipment\" },\n { icon: \"🅿️\", title: \"Free Parking\", desc: \"Complimentary valet parking\" },\n { icon: \"📶\", title: \"High-Speed WiFi\", desc: \"Seamless connectivity throughout\" },\n { icon: \"🧹\", title: \"Housekeeping\", desc: \"24/7 professional cleaning service\" },\n { icon: \"🚗\", title: \"Airport Transfer\", desc: \"Luxury car pickup & drop\" },\n ].map((a, i) => (\n

{a.icon}

{a.title}

{a.desc}

\n ))}\n

\n\n {/* Testimonials */}\n

Guest Reviews

What Our Guests Say

\n {[\n { name: \"Rajesh K.\", text: \"Absolutely stunning hotel! The rooms were immaculate and the staff made us feel like royalty.\", rating: 5 },\n { name: \"Sarah M.\", text: \"The best hotel experience I've ever had. The suite was breathtaking and the food was divine.\", rating: 5 },\n { name: \"Priya S.\", text: \"Perfect for our anniversary celebration. The spa treatments were out of this world!\", rating: 4 },\n ].map((t, i) => (\n

{\"⭐\".repeat(t.rating)}

\"{t.text}\"

\n {t.name.charAt(0)}\n

{t.name}

Verified Guest

\n ))}\n

\n\n {/* CTA */}\n

\n Ready for an Unforgettable Stay?\n

Book your room today and experience luxury like never before.

\n \n

\n );\n}\n",[277,193,77],"1d1a0d88-5478-11f1-9aa7-ee650bb23af1",["D",1779301028614],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport { COLORS, FONTS, btnPrimary, inputStyle, labelStyle, cardStyle } from \"../styles.ts\";\n\nexport function ContactPage({ notify }: { notify: (msg: string, type?: \"success\" | \"error\") => void }) {\n const [form, setForm] = useState({ name: \"\", email: \"\", subject: \"\", message: \"\" });\n\n return (\n

Get In Touch

Contact Us

\n\n

\n {/* Contact Info */}\n

We'd Love to Hear From You

\n Have questions or need assistance? Our team is available 24/7 to help make your stay perfect.\n

\n {[\n { icon: \"📍\", title: \"Address\", info: \"123 Luxury Lane, Bandra West, Mumbai, Maharashtra 400050\" },\n { icon: \"📞\", title: \"Phone\", info: \"+91 98765 43210 / +91 22 1234 5678\" },\n { icon: \"✉️\", title: \"Email\", info: \"info@grandpalace.com / reservations@grandpalace.com\" },\n { icon: \"🕐\", title: \"Hours\", info: \"24/7 — Front Desk Always Open\" },\n ].map((item, i) => (\n

{item.icon}

{item.title}

{item.info}

\n ))}\n

\n\n {/* Contact Form */}\n

Send a Message

\n Your Name *\n setForm({ ...form, name: e.target.value })} placeholder=\"John Doe\" />\n

\n Email Address *\n setForm({ ...form, email: e.target.value })} placeholder=\"john@example.com\" />\n

\n Subject\n setForm({ ...form, subject: e.target.value })} placeholder=\"Reservation inquiry\" />\n

\n Message *\n

setForm({ ...form, message: e.target.value })} placeholder=\"How can we help you?\" />\n              </div>\n              <button onClick={() => {\n                if (!form.name || !form.email || !form.message) { notify(\"Please fill required fields\", \"error\"); return; }\n                notify(\"Message sent! We'll get back to you shortly.\");\n                setForm({ name: \"\", email: \"\", subject: \"\", message: \"\" });\n              }} style={{ ...btnPrimary, borderRadius: 10, width: \"100%\" }}>\n                Send Message ✉️\n              </button>\n            </div>\n          </div>\n        </div>\n      </section>\n    </div>\n  );\n}\n",[277,193,119],"04cffd78-5478-11f1-b964-ee650bb23af1",["D",1779300987865],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { COLORS, FONTS, btnPrimary, inputStyle, labelStyle, cardStyle } from \"../styles.ts\";\n\nexport function BookingPage({ notify }: { notify: (msg: string, type?: \"success\" | \"error\") => void }) {\n  const [rooms, setRooms] = useState<any[]>([]);\n  const [step, setStep] = useState(1);\n  const [booking, setBooking] = useState({\n    full_name: \"\", email: \"\", phone: \"\", id_type: \"Aadhar\", id_number: \"\",\n    address: \"\", city: \"\", country: \"India\",\n    room_id: \"\", check_in: \"\", check_out: \"\", guests: 1, special_requests: \"\",\n  });\n  const [result, setResult] = useState<any>(null);\n  const [submitting, setSubmitting] = useState(false);\n\n  useEffect(() => {\n    fetch(\"/api/rooms/available\").then(r => r.json()).then(setRooms);\n  }, []);\n\n  const selectedRoom = rooms.find(r => r.id === Number(booking.room_id));\n  const nights = booking.check_in && booking.check_out\n    ? Math.ceil((new Date(booking.check_out).getTime() - new Date(booking.check_in).getTime()) / (1000 * 60 * 60 * 24))\n    : 0;\n  const total = selectedRoom ? selectedRoom.price_per_night * Math.max(nights, 0) : 0;\n  const tax = total * 0.18;\n\n  const handleSubmit = async () => {\n    if (!booking.full_name || !booking.phone || !booking.room_id || !booking.check_in || !booking.check_out) {\n      notify(\"Please fill all required fields\", \"error\");\n      return;\n    }\n    if (nights <= 0) { notify(\"Check-out must be after check-in\", \"error\"); return; }\n    setSubmitting(true);\n    try {\n      // Create customer first\n      const custRes = await fetch(\"/api/customers\", {\n        method: \"POST\", headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify({\n          full_name: booking.full_name, email: booking.email, phone: booking.phone,\n          id_type: booking.id_type, id_number: booking.id_number,\n          address: booking.address, city: booking.city, country: booking.country,\n        }),\n      });\n      // Get all customers and find the latest one\n      const customers = await fetch(\"/api/customers\").then(r => r.json());\n      const customerId = customers[0]?.id;\n\n      const bookRes = await fetch(\"/api/bookings\", {\n        method: \"POST\", headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify({\n          customer_id: customerId, room_id: Number(booking.room_id),\n          check_in: booking.check_in, check_out: booking.check_out,\n          guests: booking.guests, special_requests: booking.special_requests,\n        }),\n      });\n      const data = await bookRes.json();\n      setResult(data);\n      setStep(4);\n      notify(\"Booking confirmed successfully!\");\n    } catch (e) {\n      notify(\"Booking failed. Please try again.\", \"error\");\n    }\n    setSubmitting(false);\n  };\n\n  const Field = ({ label, name, type = \"text\", required = false, options, span = 1 }: any) => (\n    <div style={{ gridColumn: `span ${span}` }}>\n      <label style={labelStyle}>{label} {required && <span style={{ color: COLORS.accent }}>*</span>}</label>\n      {options ? (\n        <select value={(booking as any)[name]} onChange={e => setBooking({ ...booking, [name]: e.target.value })}\n          style={inputStyle}>\n          {options.map((o: any) => <option key={o.value ?? o} value={o.value ?? o}>{o.label ?? o}</option>)}\n        </select>\n      ) : (\n        <input type={type} value={(booking as any)[name]}\n          onChange={e => setBooking({ ...booking, [name]: type === \"number\" ? Number(e.target.value) : e.target.value })}\n          style={inputStyle} required={required} />\n      )}\n    </div>\n  );\n\n  return (\n    <div style={{ paddingTop: 72 }}>\n      {/* Header */}\n      <section style={{\n        padding: \"60px 48px\",\n        background: `linear-gradient(135deg, ${COLORS.primary}, ${COLORS.primaryLight})`,\n        textAlign: \"center\", color: \"#fff\",\n      }}>\n        <div style={{ fontSize: 12, letterSpacing: 4, color: COLORS.gold, textTransform: \"uppercase\", fontWeight: 600, marginBottom: 12 }}>Reservation</div>\n        <h1 style={{ fontFamily: FONTS.heading, fontSize: 48 }}>Book Your <span style={{ color: COLORS.gold }}>Stay</span></h1>\n      </section>\n\n      <section style={{ padding: \"48px\", background: COLORS.offWhite, minHeight: \"60vh\" }}>\n        <div style={{ maxWidth: 900, margin: \"0 auto\" }}>\n          {/* Progress */}\n          <div style={{ display: \"flex\", justifyContent: \"center\", gap: 8, marginBottom: 40 }}>\n            {[\"Select Room\", \"Guest Details\", \"Review & Pay\", \"Confirmation\"].map((s, i) => (\n              <div key={i} style={{ display: \"flex\", alignItems: \"center\", gap: 8 }}>\n                <div style={{\n                  width: 32, height: 32, borderRadius: \"50%\", display: \"flex\", alignItems: \"center\", justifyContent: \"center\",\n                  background: step > i + 1 ? COLORS.success : step === i + 1 ? COLORS.accent : \"#ddd\",\n                  color: \"#fff\", fontWeight: 700, fontSize: 13,\n                }}>{step > i + 1 ? \"✓\" : i + 1}</div>\n                <span style={{ fontSize: 13, fontWeight: step === i + 1 ? 700 : 400, color: step === i + 1 ? COLORS.accent : COLORS.gray }}>{s}</span>\n                {i < 3 && <div style={{ width: 40, height: 2, background: step > i + 1 ? COLORS.success : \"#ddd\" }} />}\n              </div>\n            ))}\n          </div>\n\n          {/* Step 1: Room Selection */}\n          {step === 1 && (\n            <div style={cardStyle}>\n              <h3 style={{ fontFamily: FONTS.heading, fontSize: 24, marginBottom: 24 }}>Select Your Room</h3>\n              <div style={{ display: \"grid\", gap: 20, marginBottom: 24 }}>\n                <div style={{ display: \"grid\", gridTemplateColumns: \"1fr 1fr\", gap: 16 }}>\n                  <Field label=\"Check-in Date\" name=\"check_in\" type=\"date\" required />\n                  <Field label=\"Check-out Date\" name=\"check_out\" type=\"date\" required />\n                </div>\n                <Field label=\"Number of Guests\" name=\"guests\" type=\"number\" />\n              </div>\n              <div style={{ display: \"grid\", gap: 12 }}>\n                {rooms.map(room => (\n                  <label key={room.id} style={{\n                    display: \"flex\", alignItems: \"center\", gap: 16, padding: 16, borderRadius: 12,\n                    border: booking.room_id === String(room.id) ? `2px solid ${COLORS.accent}` : \"1px solid #eee\",\n                    background: booking.room_id === String(room.id) ? \"rgba(233,69,96,0.04)\" : \"#fff\",\n                    cursor: \"pointer\", transition: \"all 0.2s\",\n                  }}>\n                    <input type=\"radio\" name=\"room\" value={room.id}\n                      checked={booking.room_id === String(room.id)}\n                      onChange={() => setBooking({ ...booking, room_id: String(room.id) })} />\n                    <span style={{ fontSize: 28 }}>{room.room_type === \"Suite\" ? \"👑\" : room.room_type === \"Deluxe\" ? \"🌟\" : \"🛏️\"}</span>\n                    <div style={{ flex: 1 }}>\n                      <div style={{ fontWeight: 600, fontSize: 16 }}>Room {room.room_number} — {room.room_type}</div>\n                      <div style={{ fontSize: 13, color: COLORS.gray }}>{room.ac_type} • Floor {room.floor} • Max {room.max_guests} guests</div>\n                    </div>\n                    <div style={{ fontFamily: FONTS.heading, fontSize: 22, fontWeight: 700, color: COLORS.accent }}>\n                      ₹{room.price_per_night.toLocaleString()}<span style={{ fontSize: 12, color: COLORS.gray }}>/night</span>\n                    </div>\n                  </label>\n                ))}\n              </div>\n              <div style={{ display: \"flex\", justifyContent: \"flex-end\", marginTop: 24 }}>\n                <button onClick={() => {\n                  if (!booking.room_id || !booking.check_in || !booking.check_out) { notify(\"Select a room and dates\", \"error\"); return; }\n                  if (nights <= 0) { notify(\"Invalid dates\", \"error\"); return; }\n                  setStep(2);\n                }} style={{ ...btnPrimary, borderRadius: 10 }}>Continue →</button>\n              </div>\n            </div>\n          )}\n\n          {/* Step 2: Guest Details */}\n          {step === 2 && (\n            <div style={cardStyle}>\n              <h3 style={{ fontFamily: FONTS.heading, fontSize: 24, marginBottom: 24 }}>Guest Information</h3>\n              <div style={{ display: \"grid\", gridTemplateColumns: \"1fr 1fr\", gap: 16 }}>\n                <Field label=\"Full Name\" name=\"full_name\" required />\n                <Field label=\"Phone Number\" name=\"phone\" required />\n                <Field label=\"Email\" name=\"email\" type=\"email\" />\n                <Field label=\"ID Type\" name=\"id_type\" options={[\"Aadhar\", \"Passport\", \"Driving License\", \"Voter ID\"]} />\n                <Field label=\"ID Number\" name=\"id_number\" />\n                <Field label=\"City\" name=\"city\" />\n                <Field label=\"Address\" name=\"address\" span={2} />\n                <Field label=\"Special Requests\" name=\"special_requests\" span={2} />\n              </div>\n              <div style={{ display: \"flex\", justifyContent: \"space-between\", marginTop: 24 }}>\n                <button onClick={() => setStep(1)} style={{ ...btnPrimary, background: COLORS.gray, borderRadius: 10 }}>← Back</button>\n                <button onClick={() => {\n                  if (!booking.full_name || !booking.phone) { notify(\"Name and phone are required\", \"error\"); return; }\n                  setStep(3);\n                }} style={{ ...btnPrimary, borderRadius: 10 }}>Review Booking →</button>\n              </div>\n            </div>\n          )}\n\n          {/* Step 3: Review */}\n          {step === 3 && (\n            <div style={cardStyle}>\n              <h3 style={{ fontFamily: FONTS.heading, fontSize: 24, marginBottom: 24 }}>Review Your Booking</h3>\n              <div style={{ display: \"grid\", gridTemplateColumns: \"1fr 1fr\", gap: 32 }}>\n                <div>\n                  <h4 style={{ fontSize: 14, color: COLORS.gray, textTransform: \"uppercase\", letterSpacing: 1, marginBottom: 16 }}>Guest Details</h4>\n                  <div style={{ lineHeight: 2, fontSize: 15 }}>\n                    <div><strong>Name:</strong> {booking.full_name}</div>\n                    <div><strong>Phone:</strong> {booking.phone}</div>\n                    <div><strong>Email:</strong> {booking.email || \"—\"}</div>\n                    <div><strong>ID:</strong> {booking.id_type} — {booking.id_number || \"—\"}</div>\n                  </div>\n                </div>\n                <div>\n                  <h4 style={{ fontSize: 14, color: COLORS.gray, textTransform: \"uppercase\", letterSpacing: 1, marginBottom: 16 }}>Booking Details</h4>\n                  <div style={{ lineHeight: 2, fontSize: 15 }}>\n                    <div><strong>Room:</strong> {selectedRoom?.room_number} — {selectedRoom?.room_type}</div>\n                    <div><strong>Check-in:</strong> {booking.check_in}</div>\n                    <div><strong>Check-out:</strong> {booking.check_out}</div>\n                    <div><strong>Nights:</strong> {nights}</div>\n                    <div><strong>Guests:</strong> {booking.guests}</div>\n                  </div>\n                </div>\n              </div>\n              {/* Bill */}\n              <div style={{ marginTop: 32, padding: 24, background: COLORS.offWhite, borderRadius: 12 }}>\n                <h4 style={{ fontFamily: FONTS.heading, fontSize: 20, marginBottom: 16 }}>💰 Bill Summary</h4>\n                <div style={{ display: \"flex\", justifyContent: \"space-between\", padding: \"8px 0\", borderBottom: \"1px solid #e0e0e0\" }}>\n                  <span>Room Charges ({nights} nights × ₹{selectedRoom?.price_per_night.toLocaleString()})</span>\n                  <span style={{ fontWeight: 600 }}>₹{total.toLocaleString()}</span>\n                </div>\n                <div style={{ display: \"flex\", justifyContent: \"space-between\", padding: \"8px 0\", borderBottom: \"1px solid #e0e0e0\" }}>\n                  <span>GST (18%)</span>\n                  <span style={{ fontWeight: 600 }}>₹{tax.toLocaleString()}</span>\n                </div>\n                <div style={{ display: \"flex\", justifyContent: \"space-between\", padding: \"12px 0\", fontSize: 20, fontWeight: 700, color: COLORS.accent }}>\n                  <span>Grand Total</span>\n                  <span>₹{(total + tax).toLocaleString()}</span>\n                </div>\n              </div>\n              <div style={{ display: \"flex\", justifyContent: \"space-between\", marginTop: 24 }}>\n                <button onClick={() => setStep(2)} style={{ ...btnPrimary, background: COLORS.gray, borderRadius: 10 }}>← Back</button>\n                <button onClick={handleSubmit} disabled={submitting} style={{ ...btnPrimary, borderRadius: 10, opacity: submitting ? 0.6 : 1 }}>\n                  {submitting ? \"Processing...\" : \"✓ Confirm Booking\"}\n                </button>\n              </div>\n            </div>\n          )}\n\n          {/* Step 4: Confirmation */}\n          {step === 4 && result && (\n            <div style={{ ...cardStyle, textAlign: \"center\", padding: 48 }}>\n              <div style={{ fontSize: 64, marginBottom: 16 }}>🎉</div>\n              <h2 style={{ fontFamily: FONTS.heading, fontSize: 32, color: COLORS.success, marginBottom: 12 }}>Booking Confirmed!</h2>\n              <p style={{ fontSize: 16, color: COLORS.gray, marginBottom: 32 }}>Your reservation has been successfully processed.</p>\n              <div style={{ background: COLORS.offWhite, borderRadius: 12, padding: 24, display: \"inline-block\", textAlign: \"left\" }}>\n                <div style={{ fontSize: 14, lineHeight: 2.2 }}>\n                  <div><strong>Booking Reference:</strong> <span style={{ color: COLORS.accent, fontSize: 18, fontWeight: 700 }}>{result.booking_ref}</span></div>\n                  <div><strong>Room Charges:</strong> ₹{result.total_amount?.toLocaleString()}</div>\n                  <div><strong>Tax (GST 18%):</strong> ₹{result.tax_amount?.toLocaleString()}</div>\n                  <div><strong>Grand Total:</strong> <span style={{ fontSize: 20, fontWeight: 700, color: COLORS.accent }}>₹{result.grand_total?.toLocaleString()}</span></div>\n                  <div><strong>Duration:</strong> {result.nights} night(s)</div>\n                </div>\n              </div>\n              <div style={{ marginTop: 32, display: \"flex\", justifyContent: \"center\", gap: 16 }}>\n                <button onClick={() => window.print()} style={{ ...btnPrimary, background: COLORS.success, borderRadius: 10 }}>🖨️ Print Confirmation</button>\n                <button onClick={() => { setStep(1); setBooking({ ...booking, full_name: \"\", phone: \"\", email: \"\", room_id: \"\" }); setResult(null); }}\n                  style={{ ...btnPrimary, borderRadius: 10 }}>📝 New Booking</button>\n              </div>\n            </div>\n          )}\n        </div>\n      </section>\n    </div>\n  );\n}\n",[277,193,101],"42675a78-5478-11f1-af3e-ee650bb23af1",["D",1779301091197],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { COLORS, FONTS, cardStyle, btnPrimary, inputStyle, labelStyle, tableStyle, thStyle, tdStyle, badgeStyle, statusColor } from \"../styles.ts\";\n\nconst emptyRoom = { room_number: \"\", room_type: \"Standard\", ac_type: \"AC\", price_per_night: 2500, status: \"available\", description: \"\", max_guests: 2, floor: 1 };\n\nexport function AdminRooms({ notify }: { notify: (msg: string, type?: \"success\" | \"error\") => void }) {\n  const [rooms, setRooms] = useState<any[]>([]);\n  const [showForm, setShowForm] = useState(false);\n  const [form, setForm] = useState({ ...emptyRoom });\n  const [editId, setEditId] = useState<number | null>(null);\n\n  const load = () => fetch(\"/api/rooms\").then(r => r.json()).then(setRooms);\n  useEffect(() => { load(); }, []);\n\n  const handleSave = async () => {\n    if (!form.room_number) { notify(\"Room number is required\", \"error\"); return; }\n    const url = editId ? `/api/rooms/${editId}` : \"/api/rooms\";\n    const method = editId ? \"PUT\" : \"POST\";\n    await fetch(url, { method, headers: { \"Content-Type\": \"application/json\" }, body: JSON.stringify(form) });\n    notify(editId ? \"Room updated!\" : \"Room added!\");\n    setShowForm(false); setForm({ ...emptyRoom }); setEditId(null); load();\n  };\n\n  const handleDelete = async (id: number) => {\n    if (!confirm(\"Delete this room?\")) return;\n    await fetch(`/api/rooms/${id}`, { method: \"DELETE\" });\n    notify(\"Room deleted\"); load();\n  };\n\n  const handleEdit = (room: any) => {\n    setForm(room); setEditId(room.id); setShowForm(true);\n  };\n\n  return (\n    <div style={{ padding: 32 }}>\n      <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"center\", marginBottom: 24 }}>\n        <div>\n          <h1 style={{ fontFamily: FONTS.heading, fontSize: 28, color: COLORS.primary }}>🛏️ Room Management</h1>\n          <p style={{ color: COLORS.gray, fontSize: 14 }}>Manage hotel rooms and availability</p>\n        </div>\n        <button onClick={() => { setShowForm(!showForm); setEditId(null); setForm({ ...emptyRoom }); }}\n          style={{ ...btnPrimary, borderRadius: 10 }}>{showForm ? \"✕ Cancel\" : \"＋ Add Room\"}</button>\n      </div>\n\n      {showForm && (\n        <div style={{ ...cardStyle, marginBottom: 24 }}>\n          <h3 style={{ fontFamily: FONTS.heading, fontSize: 20, marginBottom: 20 }}>{editId ? \"Edit Room\" : \"Add New Room\"}</h3>\n          <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(4, 1fr)\", gap: 16 }}>\n            <div><label style={labelStyle}>Room Number *</label><input style={inputStyle} value={form.room_number} onChange={e => setForm({ ...form, room_number: e.target.value })} /></div>\n            <div><label style={labelStyle}>Room Type</label><select style={inputStyle} value={form.room_type} onChange={e => setForm({ ...form, room_type: e.target.value })}><option>Standard</option><option>Deluxe</option><option>Suite</option></select></div>\n            <div><label style={labelStyle}>AC Type</label><select style={inputStyle} value={form.ac_type} onChange={e => setForm({ ...form, ac_type: e.target.value })}><option>AC</option><option>Non-AC</option></select></div>\n            <div><label style={labelStyle}>Price/Night (₹)</label><input style={inputStyle} type=\"number\" value={form.price_per_night} onChange={e => setForm({ ...form, price_per_night: Number(e.target.value) })} /></div>\n            <div><label style={labelStyle}>Status</label><select style={inputStyle} value={form.status} onChange={e => setForm({ ...form, status: e.target.value })}><option value=\"available\">Available</option><option value=\"booked\">Booked</option><option value=\"maintenance\">Maintenance</option></select></div>\n            <div><label style={labelStyle}>Max Guests</label><input style={inputStyle} type=\"number\" value={form.max_guests} onChange={e => setForm({ ...form, max_guests: Number(e.target.value) })} /></div>\n            <div><label style={labelStyle}>Floor</label><input style={inputStyle} type=\"number\" value={form.floor} onChange={e => setForm({ ...form, floor: Number(e.target.value) })} /></div>\n            <div><label style={labelStyle}>Description</label><input style={inputStyle} value={form.description} onChange={e => setForm({ ...form, description: e.target.value })} /></div>\n          </div>\n          <div style={{ marginTop: 20, display: \"flex\", gap: 12 }}>\n            <button onClick={handleSave} style={{ ...btnPrimary, borderRadius: 10, background: COLORS.success }}>💾 {editId ? \"Update\" : \"Save\"} Room</button>\n            <button onClick={() => { setShowForm(false); setEditId(null); }} style={{ ...btnPrimary, borderRadius: 10, background: COLORS.gray }}>Cancel</button>\n          </div>\n        </div>\n      )}\n\n      <div style={cardStyle}>\n        <table style={tableStyle}>\n          <thead>\n            <tr>{[\"Room #\", \"Type\", \"AC\", \"Floor\", \"Price\", \"Max Guests\", \"Status\", \"Actions\"].map(h => <th key={h} style={thStyle}>{h}</th>)}</tr>\n          </thead>\n          <tbody>\n            {rooms.map(room => (\n              <tr key={room.id}>\n                <td style={{ ...tdStyle, fontWeight: 700 }}>{room.room_number}</td>\n                <td style={tdStyle}>{room.room_type}</td>\n                <td style={tdStyle}>{room.ac_type}</td>\n                <td style={tdStyle}>{room.floor}</td>\n                <td style={{ ...tdStyle, fontWeight: 600, color: COLORS.accent }}>₹{room.price_per_night?.toLocaleString()}</td>\n                <td style={tdStyle}>{room.max_guests}</td>\n                <td style={tdStyle}><span style={badgeStyle(statusColor(room.status))}>{room.status}</span></td>\n                <td style={tdStyle}>\n                  <button onClick={() => handleEdit(room)} style={{ background: \"none\", border: \"none\", cursor: \"pointer\", fontSize: 16, marginRight: 8 }} title=\"Edit\">✏️</button>\n                  <button onClick={() => handleDelete(room.id)} style={{ background: \"none\", border: \"none\", cursor: \"pointer\", fontSize: 16 }} title=\"Delete\">🗑️</button>\n                </td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n    </div>\n  );\n}\n",[277,193,146],"7c1b619c-5478-11f1-9dba-ee650bb23af1",["D",1779301188002],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { COLORS, FONTS, cardStyle, tableStyle, thStyle, tdStyle, badgeStyle, statusColor } from \"../styles.ts\";\n\nexport function AdminPayments() {\n  const [payments, setPayments] = useState<any[]>([]);\n  useEffect(() => { fetch(\"/api/payments\").then(r => r.json()).then(setPayments); }, []);\n\n  const totalAmount = payments.reduce((a, p) => a + (p.amount || 0), 0);\n\n  return (\n    <div style={{ padding: 32 }}>\n      <h1 style={{ fontFamily: FONTS.heading, fontSize: 28, color: COLORS.primary, marginBottom: 4 }}>💳 Payment Records</h1>\n      <p style={{ color: COLORS.gray, fontSize: 14, marginBottom: 24 }}>Track all payment transactions</p>\n\n      {/* Summary Cards */}\n      <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(3, 1fr)\", gap: 20, marginBottom: 24 }}>\n        <div style={{ ...cardStyle, textAlign: \"center\" }}>\n          <div style={{ fontSize: 32, marginBottom: 8 }}>💰</div>\n          <div style={{ fontSize: 28, fontWeight: 700, color: COLORS.success, fontFamily: FONTS.heading }}>₹{totalAmount.toLocaleString()}</div>\n          <div style={{ fontSize: 13, color: COLORS.gray }}>Total Collections</div>\n        </div>\n        <div style={{ ...cardStyle, textAlign: \"center\" }}>\n          <div style={{ fontSize: 32, marginBottom: 8 }}>📊</div>\n          <div style={{ fontSize: 28, fontWeight: 700, color: COLORS.info, fontFamily: FONTS.heading }}>{payments.length}</div>\n          <div style={{ fontSize: 13, color: COLORS.gray }}>Total Transactions</div>\n        </div>\n        <div style={{ ...cardStyle, textAlign: \"center\" }}>\n          <div style={{ fontSize: 32, marginBottom: 8 }}>📈</div>\n          <div style={{ fontSize: 28, fontWeight: 700, color: COLORS.gold, fontFamily: FONTS.heading }}>\n            ₹{payments.length ? Math.round(totalAmount / payments.length).toLocaleString() : 0}\n          </div>\n          <div style={{ fontSize: 13, color: COLORS.gray }}>Average Transaction</div>\n        </div>\n      </div>\n\n      <div style={cardStyle}>\n        <table style={tableStyle}>\n          <thead>\n            <tr>{[\"#\", \"Booking Ref\", \"Guest\", \"Amount\", \"Method\", \"Date\", \"Status\", \"Transaction ID\"].map(h => <th key={h} style={thStyle}>{h}</th>)}</tr>\n          </thead>\n          <tbody>\n            {payments.map((p, i) => (\n              <tr key={p.id}>\n                <td style={tdStyle}>{i + 1}</td>\n                <td style={{ ...tdStyle, fontWeight: 700, color: COLORS.accent }}>{p.booking_ref}</td>\n                <td style={tdStyle}>{p.customer_name}</td>\n                <td style={{ ...tdStyle, fontWeight: 700, fontSize: 15 }}>₹{p.amount?.toLocaleString()}</td>\n                <td style={tdStyle}>\n                  <span style={badgeStyle(COLORS.info)}>{(p.payment_method || \"cash\").replace(\"_\", \" \")}</span>\n                </td>\n                <td style={tdStyle}>{p.payment_date}</td>\n                <td style={tdStyle}><span style={badgeStyle(statusColor(p.status))}>{p.status}</span></td>\n                <td style={{ ...tdStyle, fontSize: 12, fontFamily: \"monospace\", color: COLORS.gray }}>{p.transaction_id}</td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n    </div>\n  );\n}\n",[277,193,191],"73475922-5478-11f1-8ee5-ee650bb23af1",["D",1779301173199],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { COLORS, FONTS, cardStyle } from \"../styles.ts\";\n\nexport function AdminFeedback() {\n  const [feedback, setFeedback] = useState<any[]>([]);\n  useEffect(() => { fetch(\"/api/feedback\").then(r => r.json()).then(setFeedback); }, []);\n\n  const avgRating = feedback.length ? (feedback.reduce((a, f) => a + f.rating, 0) / feedback.length).toFixed(1) : \"0\";\n\n  return (\n    <div style={{ padding: 32 }}>\n      <h1 style={{ fontFamily: FONTS.heading, fontSize: 28, color: COLORS.primary, marginBottom: 4 }}>⭐ Guest Feedback</h1>\n      <p style={{ color: COLORS.gray, fontSize: 14, marginBottom: 24 }}>View guest reviews and ratings</p>\n\n      {/* Summary */}\n      <div style={{ ...cardStyle, marginBottom: 24, display: \"flex\", gap: 40, alignItems: \"center\" }}>\n        <div style={{ textAlign: \"center\" }}>\n          <div style={{ fontSize: 48, fontWeight: 700, color: COLORS.gold, fontFamily: FONTS.heading }}>{avgRating}</div>\n          <div style={{ fontSize: 20, color: COLORS.gold }}>{\"⭐\".repeat(Math.round(Number(avgRating)))}</div>\n          <div style={{ fontSize: 13, color: COLORS.gray }}>{feedback.length} reviews</div>\n        </div>\n        <div style={{ flex: 1 }}>\n          {[5, 4, 3, 2, 1].map(star => {\n            const count = feedback.filter(f => f.rating === star).length;\n            const pct = feedback.length ? (count / feedback.length) * 100 : 0;\n            return (\n              <div key={star} style={{ display: \"flex\", alignItems: \"center\", gap: 12, marginBottom: 6 }}>\n                <span style={{ fontSize: 13, width: 60, color: COLORS.gray }}>{star} stars</span>\n                <div style={{ flex: 1, height: 8, borderRadius: 4, background: \"#f0f0f0\" }}>\n                  <div style={{ height: \"100%\", borderRadius: 4, background: COLORS.gold, width: `${pct}%` }} />\n                </div>\n                <span style={{ fontSize: 13, color: COLORS.gray, width: 30 }}>{count}</span>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n\n      {/* Reviews */}\n      <div style={{ display: \"grid\", gap: 16 }}>\n        {feedback.map(f => (\n          <div key={f.id} style={{ ...cardStyle, display: \"flex\", gap: 20 }}>\n            <div style={{\n              width: 48, height: 48, borderRadius: \"50%\", flexShrink: 0,\n              background: `linear-gradient(135deg, ${COLORS.accent}, ${COLORS.gold})`,\n              display: \"flex\", alignItems: \"center\", justifyContent: \"center\",\n              color: \"#fff\", fontWeight: 700, fontSize: 20,\n            }}>{f.customer_name?.charAt(0)}</div>\n            <div style={{ flex: 1 }}>\n              <div style={{ display: \"flex\", justifyContent: \"space-between\", marginBottom: 4 }}>\n                <div style={{ fontWeight: 600, fontSize: 16 }}>{f.customer_name}</div>\n                <div style={{ fontSize: 12, color: COLORS.gray }}>{f.created_at}</div>\n              </div>\n              <div style={{ color: COLORS.gold, marginBottom: 8 }}>{\"⭐\".repeat(f.rating)}{\"☆\".repeat(5 - f.rating)}</div>\n              <p style={{ color: COLORS.grayDark, lineHeight: 1.6, fontSize: 14 }}>{f.comment}</p>\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n",[277,193,182],"6a3d774e-5478-11f1-8ee5-ee650bb23af1",["D",1779301158031],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { COLORS, FONTS, cardStyle, btnPrimary, inputStyle, labelStyle, tableStyle, thStyle, tdStyle, badgeStyle, statusColor } from \"../styles.ts\";\n\nconst emptyEmp = { full_name: \"\", email: \"\", phone: \"\", role: \"Staff\", department: \"Operations\", salary: 25000, join_date: \"\", status: \"active\" };\n\nexport function AdminEmployees({ notify }: { notify: (msg: string, type?: \"success\" | \"error\") => void }) {\n  const [employees, setEmployees] = useState<any[]>([]);\n  const [showForm, setShowForm] = useState(false);\n  const [form, setForm] = useState({ ...emptyEmp });\n  const [editId, setEditId] = useState<number | null>(null);\n\n  const load = () => fetch(\"/api/employees\").then(r => r.json()).then(setEmployees);\n  useEffect(() => { load(); }, []);\n\n  const handleSave = async () => {\n    if (!form.full_name || !form.role) { notify(\"Name and role are required\", \"error\"); return; }\n    const url = editId ? `/api/employees/${editId}` : \"/api/employees\";\n    await fetch(url, { method: editId ? \"PUT\" : \"POST\", headers: { \"Content-Type\": \"application/json\" }, body: JSON.stringify(form) });\n    notify(editId ? \"Employee updated!\" : \"Employee added!\");\n    setShowForm(false); setForm({ ...emptyEmp }); setEditId(null); load();\n  };\n\n  const handleDelete = async (id: number) => {\n    if (!confirm(\"Delete this employee?\")) return;\n    await fetch(`/api/employees/${id}`, { method: \"DELETE\" });\n    notify(\"Employee deleted\"); load();\n  };\n\n  return (\n    <div style={{ padding: 32 }}>\n      <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"center\", marginBottom: 24 }}>\n        <div>\n          <h1 style={{ fontFamily: FONTS.heading, fontSize: 28, color: COLORS.primary }}>👥 Employee Management</h1>\n          <p style={{ color: COLORS.gray, fontSize: 14 }}>Manage staff records and payroll</p>\n        </div>\n        <button onClick={() => { setShowForm(!showForm); setEditId(null); setForm({ ...emptyEmp }); }}\n          style={{ ...btnPrimary, borderRadius: 10 }}>{showForm ? \"✕ Cancel\" : \"＋ Add Employee\"}</button>\n      </div>\n\n      {showForm && (\n        <div style={{ ...cardStyle, marginBottom: 24 }}>\n          <h3 style={{ fontFamily: FONTS.heading, fontSize: 20, marginBottom: 20 }}>{editId ? \"Edit Employee\" : \"Add New Employee\"}</h3>\n          <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(3, 1fr)\", gap: 16 }}>\n            <div><label style={labelStyle}>Full Name *</label><input style={inputStyle} value={form.full_name} onChange={e => setForm({ ...form, full_name: e.target.value })} /></div>\n            <div><label style={labelStyle}>Email</label><input style={inputStyle} type=\"email\" value={form.email} onChange={e => setForm({ ...form, email: e.target.value })} /></div>\n            <div><label style={labelStyle}>Phone</label><input style={inputStyle} value={form.phone} onChange={e => setForm({ ...form, phone: e.target.value })} /></div>\n            <div><label style={labelStyle}>Role *</label><select style={inputStyle} value={form.role} onChange={e => setForm({ ...form, role: e.target.value })}><option>Manager</option><option>Receptionist</option><option>Housekeeping</option><option>Chef</option><option>Security</option><option>Staff</option></select></div>\n            <div><label style={labelStyle}>Department</label><select style={inputStyle} value={form.department} onChange={e => setForm({ ...form, department: e.target.value })}><option>Management</option><option>Front Desk</option><option>Operations</option><option>Restaurant</option><option>Security</option><option>Housekeeping</option></select></div>\n            <div><label style={labelStyle}>Salary (₹)</label><input style={inputStyle} type=\"number\" value={form.salary} onChange={e => setForm({ ...form, salary: Number(e.target.value) })} /></div>\n            <div><label style={labelStyle}>Join Date</label><input style={inputStyle} type=\"date\" value={form.join_date} onChange={e => setForm({ ...form, join_date: e.target.value })} /></div>\n            <div><label style={labelStyle}>Status</label><select style={inputStyle} value={form.status} onChange={e => setForm({ ...form, status: e.target.value })}><option value=\"active\">Active</option><option value=\"inactive\">Inactive</option></select></div>\n          </div>\n          <div style={{ marginTop: 20, display: \"flex\", gap: 12 }}>\n            <button onClick={handleSave} style={{ ...btnPrimary, borderRadius: 10, background: COLORS.success }}>💾 {editId ? \"Update\" : \"Save\"}</button>\n            <button onClick={() => setShowForm(false)} style={{ ...btnPrimary, borderRadius: 10, background: COLORS.gray }}>Cancel</button>\n          </div>\n        </div>\n      )}\n\n      <div style={cardStyle}>\n        <table style={tableStyle}>\n          <thead>\n            <tr>{[\"Name\", \"Contact\", \"Role\", \"Department\", \"Salary\", \"Join Date\", \"Status\", \"Actions\"].map(h => <th key={h} style={thStyle}>{h}</th>)}</tr>\n          </thead>\n          <tbody>\n            {employees.map(e => (\n              <tr key={e.id}>\n                <td style={{ ...tdStyle, fontWeight: 600 }}>{e.full_name}</td>\n                <td style={tdStyle}><div>{e.phone || \"—\"}</div><div style={{ fontSize: 12, color: COLORS.gray }}>{e.email || \"—\"}</div></td>\n                <td style={tdStyle}>{e.role}</td>\n                <td style={tdStyle}>{e.department || \"—\"}</td>\n                <td style={{ ...tdStyle, fontWeight: 600 }}>₹{e.salary?.toLocaleString()}</td>\n                <td style={tdStyle}>{e.join_date || \"—\"}</td>\n                <td style={tdStyle}><span style={badgeStyle(statusColor(e.status))}>{e.status}</span></td>\n                <td style={tdStyle}>\n                  <button onClick={() => { setForm(e); setEditId(e.id); setShowForm(true); }} style={{ background: \"none\", border: \"none\", cursor: \"pointer\", fontSize: 16, marginRight: 8 }}>✏️</button>\n                  <button onClick={() => handleDelete(e.id)} style={{ background: \"none\", border: \"none\", cursor: \"pointer\", fontSize: 16 }}>🗑️</button>\n                </td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n    </div>\n  );\n}\n",[277,193,173],"34ea79d4-5478-11f1-ae17-ee650bb23af1",["D",1779301068564],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { COLORS, FONTS, cardStyle, badgeStyle, statusColor } from \"../styles.ts\";\n\nexport function AdminDashboard() {\n  const [stats, setStats] = useState<any>(null);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    fetch(\"/api/dashboard\").then(r => r.json()).then(d => { setStats(d); setLoading(false); });\n  }, []);\n\n  if (loading) return <div style={{ padding: 60, textAlign: \"center\", color: COLORS.gray }}>Loading dashboard...</div>;\n\n  return (\n    <div style={{ padding: 32 }}>\n      <div style={{ marginBottom: 32 }}>\n        <h1 style={{ fontFamily: FONTS.heading, fontSize: 28, color: COLORS.primary, marginBottom: 4 }}>Dashboard</h1>\n        <p style={{ color: COLORS.gray, fontSize: 14 }}>Welcome back! Here's your hotel overview.</p>\n      </div>\n\n      {/* Stat Cards */}\n      <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(4, 1fr)\", gap: 20, marginBottom: 28 }}>\n        {[\n          { icon: \"🏠\", label: \"Total Rooms\", value: stats.totalRooms, color: COLORS.info, sub: `${stats.availableRooms} available` },\n          { icon: \"📋\", label: \"Bookings\", value: stats.totalBookings, color: COLORS.accent, sub: \"Total reservations\" },\n          { icon: \"👤\", label: \"Customers\", value: stats.totalCustomers, color: COLORS.success, sub: \"Registered guests\" },\n          { icon: \"💰\", label: \"Revenue\", value: `₹${Number(stats.totalRevenue).toLocaleString()}`, color: COLORS.gold, sub: \"Total collected\" },\n        ].map((s, i) => (\n          <div key={i} style={{ ...cardStyle, display: \"flex\", alignItems: \"center\", gap: 16, position: \"relative\", overflow: \"hidden\" }}>\n            <div style={{ width: 56, height: 56, borderRadius: 14, background: s.color + \"15\", display: \"flex\", alignItems: \"center\", justifyContent: \"center\", fontSize: 28, flexShrink: 0 }}>\n              {s.icon}\n            </div>\n            <div>\n              <div style={{ fontSize: 13, color: COLORS.gray, fontWeight: 500 }}>{s.label}</div>\n              <div style={{ fontSize: 26, fontWeight: 700, color: COLORS.primary, fontFamily: FONTS.heading }}>{s.value}</div>\n              <div style={{ fontSize: 12, color: s.color, fontWeight: 500 }}>{s.sub}</div>\n            </div>\n            <div style={{ position: \"absolute\", right: -10, bottom: -10, fontSize: 80, opacity: 0.04 }}>{s.icon}</div>\n          </div>\n        ))}\n      </div>\n\n      {/* Secondary Stats */}\n      <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(4, 1fr)\", gap: 20, marginBottom: 28 }}>\n        {[\n          { icon: \"✅\", label: \"Available\", value: stats.availableRooms, color: COLORS.success },\n          { icon: \"🔒\", label: \"Occupied\", value: stats.bookedRooms, color: COLORS.accent },\n          { icon: \"🔧\", label: \"Maintenance\", value: stats.maintenanceRooms, color: COLORS.warning },\n          { icon: \"⭐\", label: \"Avg Rating\", value: `${stats.avgRating}/5 (${stats.feedbackCount})`, color: COLORS.gold },\n        ].map((s, i) => (\n          <div key={i} style={{ ...cardStyle, textAlign: \"center\", padding: 20 }}>\n            <div style={{ fontSize: 28, marginBottom: 8 }}>{s.icon}</div>\n            <div style={{ fontSize: 22, fontWeight: 700, color: s.color }}>{s.value}</div>\n            <div style={{ fontSize: 12, color: COLORS.gray }}>{s.label}</div>\n          </div>\n        ))}\n      </div>\n\n      {/* Room Distribution & Recent Bookings */}\n      <div style={{ display: \"grid\", gridTemplateColumns: \"1fr 2fr\", gap: 24 }}>\n        {/* Room Distribution */}\n        <div style={cardStyle}>\n          <h3 style={{ fontFamily: FONTS.heading, fontSize: 18, marginBottom: 20 }}>🏠 Room Status</h3>\n          {[\n            { label: \"Available\", count: stats.availableRooms, total: stats.totalRooms, color: COLORS.success },\n            { label: \"Occupied\", count: stats.bookedRooms, total: stats.totalRooms, color: COLORS.accent },\n            { label: \"Maintenance\", count: stats.maintenanceRooms, total: stats.totalRooms, color: COLORS.warning },\n          ].map((item, i) => (\n            <div key={i} style={{ marginBottom: 16 }}>\n              <div style={{ display: \"flex\", justifyContent: \"space-between\", fontSize: 13, marginBottom: 6 }}>\n                <span style={{ color: COLORS.grayDark, fontWeight: 500 }}>{item.label}</span>\n                <span style={{ fontWeight: 700, color: item.color }}>{item.count} / {item.total}</span>\n              </div>\n              <div style={{ height: 8, borderRadius: 4, background: \"#f0f0f0\", overflow: \"hidden\" }}>\n                <div style={{ height: \"100%\", borderRadius: 4, background: item.color, width: `${(item.count / Math.max(item.total, 1)) * 100}%`, transition: \"width 0.5s\" }} />\n              </div>\n            </div>\n          ))}\n        </div>\n\n        {/* Recent Bookings */}\n        <div style={cardStyle}>\n          <h3 style={{ fontFamily: FONTS.heading, fontSize: 18, marginBottom: 20 }}>📋 Recent Bookings</h3>\n          <table style={{ width: \"100%\", borderCollapse: \"collapse\", fontSize: 13 }}>\n            <thead>\n              <tr style={{ borderBottom: \"2px solid #f0f0f0\" }}>\n                {[\"Ref\", \"Guest\", \"Room\", \"Status\", \"Total\"].map(h => (\n                  <th key={h} style={{ textAlign: \"left\", padding: \"8px 12px\", fontWeight: 600, color: COLORS.gray, fontSize: 11, textTransform: \"uppercase\", letterSpacing: 0.5 }}>{h}</th>\n                ))}\n              </tr>\n            </thead>\n            <tbody>\n              {stats.recentBookings?.map((b: any) => (\n                <tr key={b.id} style={{ borderBottom: \"1px solid #f8f8f8\" }}>\n                  <td style={{ padding: \"10px 12px\", fontWeight: 600, color: COLORS.accent }}>{b.booking_ref}</td>\n                  <td style={{ padding: \"10px 12px\" }}>{b.customer_name}</td>\n                  <td style={{ padding: \"10px 12px\" }}>{b.room_number} ({b.room_type})</td>\n                  <td style={{ padding: \"10px 12px\" }}><span style={badgeStyle(statusColor(b.status))}>{b.status}</span></td>\n                  <td style={{ padding: \"10px 12px\", fontWeight: 600 }}>₹{b.grand_total?.toLocaleString()}</td>\n                </tr>\n              ))}\n            </tbody>\n          </table>\n        </div>\n      </div>\n    </div>\n  );\n}\n",[277,193,137],"4f99bcb8-5478-11f1-85c0-ee650bb23af1",["D",1779301113339],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { COLORS, FONTS, cardStyle, btnPrimary, inputStyle, labelStyle, tableStyle, thStyle, tdStyle } from \"../styles.ts\";\n\nconst emptyCustomer = { full_name: \"\", email: \"\", phone: \"\", id_type: \"Aadhar\", id_number: \"\", address: \"\", city: \"\", country: \"India\" };\n\nexport function AdminCustomers({ notify }: { notify: (msg: string, type?: \"success\" | \"error\") => void }) {\n  const [customers, setCustomers] = useState<any[]>([]);\n  const [search, setSearch] = useState(\"\");\n  const [showForm, setShowForm] = useState(false);\n  const [form, setForm] = useState({ ...emptyCustomer });\n  const [editId, setEditId] = useState<number | null>(null);\n\n  const load = (q?: string) => fetch(`/api/customers${q ? `?search=${q}` : \"\"}`).then(r => r.json()).then(setCustomers);\n  useEffect(() => { load(); }, []);\n\n  const handleSave = async () => {\n    if (!form.full_name || !form.phone) { notify(\"Name and phone are required\", \"error\"); return; }\n    const url = editId ? `/api/customers/${editId}` : \"/api/customers\";\n    await fetch(url, { method: editId ? \"PUT\" : \"POST\", headers: { \"Content-Type\": \"application/json\" }, body: JSON.stringify(form) });\n    notify(editId ? \"Customer updated!\" : \"Customer added!\");\n    setShowForm(false); setForm({ ...emptyCustomer }); setEditId(null); load();\n  };\n\n  const handleDelete = async (id: number) => {\n    if (!confirm(\"Delete this customer?\")) return;\n    await fetch(`/api/customers/${id}`, { method: \"DELETE\" });\n    notify(\"Customer deleted\"); load();\n  };\n\n  return (\n    <div style={{ padding: 32 }}>\n      <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"center\", marginBottom: 24 }}>\n        <div>\n          <h1 style={{ fontFamily: FONTS.heading, fontSize: 28, color: COLORS.primary }}>👤 Customer Management</h1>\n          <p style={{ color: COLORS.gray, fontSize: 14 }}>Manage guest information and records</p>\n        </div>\n        <button onClick={() => { setShowForm(!showForm); setEditId(null); setForm({ ...emptyCustomer }); }}\n          style={{ ...btnPrimary, borderRadius: 10 }}>{showForm ? \"✕ Cancel\" : \"＋ Add Customer\"}</button>\n      </div>\n\n      {/* Search */}\n      <div style={{ ...cardStyle, marginBottom: 20, display: \"flex\", gap: 12 }}>\n        <input style={{ ...inputStyle, flex: 1 }} placeholder=\"🔍 Search by name, email, or phone...\"\n          value={search} onChange={e => setSearch(e.target.value)} onKeyDown={e => e.key === \"Enter\" && load(search)} />\n        <button onClick={() => load(search)} style={{ ...btnPrimary, borderRadius: 10 }}>Search</button>\n        {search && <button onClick={() => { setSearch(\"\"); load(); }} style={{ ...btnPrimary, borderRadius: 10, background: COLORS.gray }}>Clear</button>}\n      </div>\n\n      {showForm && (\n        <div style={{ ...cardStyle, marginBottom: 24 }}>\n          <h3 style={{ fontFamily: FONTS.heading, fontSize: 20, marginBottom: 20 }}>{editId ? \"Edit Customer\" : \"Add New Customer\"}</h3>\n          <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(3, 1fr)\", gap: 16 }}>\n            <div><label style={labelStyle}>Full Name *</label><input style={inputStyle} value={form.full_name} onChange={e => setForm({ ...form, full_name: e.target.value })} /></div>\n            <div><label style={labelStyle}>Phone *</label><input style={inputStyle} value={form.phone} onChange={e => setForm({ ...form, phone: e.target.value })} /></div>\n            <div><label style={labelStyle}>Email</label><input style={inputStyle} type=\"email\" value={form.email} onChange={e => setForm({ ...form, email: e.target.value })} /></div>\n            <div><label style={labelStyle}>ID Type</label><select style={inputStyle} value={form.id_type} onChange={e => setForm({ ...form, id_type: e.target.value })}><option>Aadhar</option><option>Passport</option><option>Driving License</option><option>Voter ID</option></select></div>\n            <div><label style={labelStyle}>ID Number</label><input style={inputStyle} value={form.id_number} onChange={e => setForm({ ...form, id_number: e.target.value })} /></div>\n            <div><label style={labelStyle}>City</label><input style={inputStyle} value={form.city} onChange={e => setForm({ ...form, city: e.target.value })} /></div>\n            <div style={{ gridColumn: \"span 2\" }}><label style={labelStyle}>Address</label><input style={inputStyle} value={form.address} onChange={e => setForm({ ...form, address: e.target.value })} /></div>\n            <div><label style={labelStyle}>Country</label><input style={inputStyle} value={form.country} onChange={e => setForm({ ...form, country: e.target.value })} /></div>\n          </div>\n          <div style={{ marginTop: 20, display: \"flex\", gap: 12 }}>\n            <button onClick={handleSave} style={{ ...btnPrimary, borderRadius: 10, background: COLORS.success }}>💾 {editId ? \"Update\" : \"Save\"}</button>\n            <button onClick={() => setShowForm(false)} style={{ ...btnPrimary, borderRadius: 10, background: COLORS.gray }}>Cancel</button>\n          </div>\n        </div>\n      )}\n\n      <div style={cardStyle}>\n        <table style={tableStyle}>\n          <thead>\n            <tr>{[\"Name\", \"Phone\", \"Email\", \"ID\", \"City\", \"Country\", \"Actions\"].map(h => <th key={h} style={thStyle}>{h}</th>)}</tr>\n          </thead>\n          <tbody>\n            {customers.map(c => (\n              <tr key={c.id}>\n                <td style={{ ...tdStyle, fontWeight: 600 }}>{c.full_name}</td>\n                <td style={tdStyle}>{c.phone}</td>\n                <td style={tdStyle}>{c.email || \"—\"}</td>\n                <td style={tdStyle}>{c.id_type}: {c.id_number || \"—\"}</td>\n                <td style={tdStyle}>{c.city || \"—\"}</td>\n                <td style={tdStyle}>{c.country}</td>\n                <td style={tdStyle}>\n                  <button onClick={() => { setForm(c); setEditId(c.id); setShowForm(true); }} style={{ background: \"none\", border: \"none\", cursor: \"pointer\", fontSize: 16, marginRight: 8 }}>✏️</button>\n                  <button onClick={() => handleDelete(c.id)} style={{ background: \"none\", border: \"none\", cursor: \"pointer\", fontSize: 16 }}>🗑️</button>\n                </td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n    </div>\n  );\n}\n",[277,193,155],"5c67f3ec-5478-11f1-a7a7-ee650bb23af1",["D",1779301134808],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { COLORS, FONTS, cardStyle, btnPrimary, tableStyle, thStyle, tdStyle, badgeStyle, statusColor } from \"../styles.ts\";\n\nexport function AdminBookings({ notify }: { notify: (msg: string, type?: \"success\" | \"error\") => void }) {\n  const [bookings, setBookings] = useState<any[]>([]);\n  const [filter, setFilter] = useState(\"all\");\n\n  const load = () => fetch(\"/api/bookings\").then(r => r.json()).then(setBookings);\n  useEffect(() => { load(); }, []);\n\n  const updateStatus = async (id: number, status: string) => {\n    await fetch(`/api/bookings/${id}/status`, { method: \"PUT\", headers: { \"Content-Type\": \"application/json\" }, body: JSON.stringify({ status }) });\n    notify(`Booking ${status.replace(\"_\", \" \")}!`); load();\n  };\n\n  const updatePayment = async (id: number, status: string) => {\n    await fetch(`/api/bookings/${id}/payment`, { method: \"PUT\", headers: { \"Content-Type\": \"application/json\" }, body: JSON.stringify({ status, method: \"cash\" }) });\n    notify(`Payment marked as ${status}!`); load();\n  };\n\n  const filtered = filter === \"all\" ? bookings : bookings.filter(b => b.status === filter);\n\n  return (\n    <div style={{ padding: 32 }}>\n      <div style={{ marginBottom: 24 }}>\n        <h1 style={{ fontFamily: FONTS.heading, fontSize: 28, color: COLORS.primary }}>📋 Booking Management</h1>\n        <p style={{ color: COLORS.gray, fontSize: 14 }}>View and manage all reservations</p>\n      </div>\n\n      {/* Filters */}\n      <div style={{ ...cardStyle, marginBottom: 20, display: \"flex\", gap: 8, flexWrap: \"wrap\" }}>\n        {[\"all\", \"confirmed\", \"checked_in\", \"checked_out\", \"cancelled\"].map(f => (\n          <button key={f} onClick={() => setFilter(f)} style={{\n            padding: \"8px 20px\", borderRadius: 20,\n            background: filter === f ? COLORS.accent : \"transparent\",\n            color: filter === f ? \"#fff\" : COLORS.grayDark,\n            border: filter === f ? \"none\" : \"1px solid #ddd\",\n            fontWeight: 600, fontSize: 13, cursor: \"pointer\", fontFamily: FONTS.body, textTransform: \"capitalize\",\n          }}>{f === \"all\" ? \"All Bookings\" : f.replace(\"_\", \" \")}</button>\n        ))}\n        <div style={{ marginLeft: \"auto\", fontSize: 14, color: COLORS.gray, alignSelf: \"center\" }}>\n          {filtered.length} booking(s)\n        </div>\n      </div>\n\n      <div style={{ ...cardStyle, overflowX: \"auto\" }}>\n        <table style={tableStyle}>\n          <thead>\n            <tr>{[\"Ref\", \"Guest\", \"Room\", \"Check-in\", \"Check-out\", \"Total\", \"Status\", \"Payment\", \"Actions\"].map(h => <th key={h} style={thStyle}>{h}</th>)}</tr>\n          </thead>\n          <tbody>\n            {filtered.map(b => (\n              <tr key={b.id}>\n                <td style={{ ...tdStyle, fontWeight: 700, color: COLORS.accent }}>{b.booking_ref}</td>\n                <td style={tdStyle}>\n                  <div style={{ fontWeight: 600 }}>{b.customer_name}</div>\n                  <div style={{ fontSize: 12, color: COLORS.gray }}>{b.customer_phone}</div>\n                </td>\n                <td style={tdStyle}>\n                  <div style={{ fontWeight: 600 }}>{b.room_number}</div>\n                  <div style={{ fontSize: 12, color: COLORS.gray }}>{b.room_type}</div>\n                </td>\n                <td style={tdStyle}>{b.check_in}</td>\n                <td style={tdStyle}>{b.check_out}</td>\n                <td style={{ ...tdStyle, fontWeight: 700 }}>₹{b.grand_total?.toLocaleString()}</td>\n                <td style={tdStyle}><span style={badgeStyle(statusColor(b.status))}>{b.status.replace(\"_\", \" \")}</span></td>\n                <td style={tdStyle}><span style={badgeStyle(statusColor(b.payment_status))}>{b.payment_status}</span></td>\n                <td style={tdStyle}>\n                  <div style={{ display: \"flex\", gap: 4, flexWrap: \"wrap\" }}>\n                    {b.status === \"confirmed\" && (\n                      <button onClick={() => updateStatus(b.id, \"checked_in\")} style={{ fontSize: 11, padding: \"4px 8px\", borderRadius: 6, background: COLORS.success + \"18\", color: COLORS.success, border: \"none\", cursor: \"pointer\", fontWeight: 600 }}>Check In</button>\n                    )}\n                    {b.status === \"checked_in\" && (\n                      <button onClick={() => updateStatus(b.id, \"checked_out\")} style={{ fontSize: 11, padding: \"4px 8px\", borderRadius: 6, background: COLORS.info + \"18\", color: COLORS.info, border: \"none\", cursor: \"pointer\", fontWeight: 600 }}>Check Out</button>\n                    )}\n                    {b.status !== \"cancelled\" && b.status !== \"checked_out\" && (\n                      <button onClick={() => updateStatus(b.id, \"cancelled\")} style={{ fontSize: 11, padding: \"4px 8px\", borderRadius: 6, background: COLORS.danger + \"18\", color: COLORS.danger, border: \"none\", cursor: \"pointer\", fontWeight: 600 }}>Cancel</button>\n                    )}\n                    {b.payment_status === \"pending\" && (\n                      <button onClick={() => updatePayment(b.id, \"paid\")} style={{ fontSize: 11, padding: \"4px 8px\", borderRadius: 6, background: COLORS.gold + \"18\", color: COLORS.gold, border: \"none\", cursor: \"pointer\", fontWeight: 600 }}>Mark Paid</button>\n                    )}\n                  </div>\n                </td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n    </div>\n  );\n}\n",[277,193,164],"128815fe-5478-11f1-af3e-ee650bb23af1",["D",1779301010882],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { COLORS, FONTS } from \"../styles.ts\";\n\nexport function AboutPage() {\n  return (\n    <div style={{ paddingTop: 72 }}>\n      {/* Hero */}\n      <section style={{\n        padding: \"80px 48px\",\n        background: `linear-gradient(135deg, ${COLORS.primary}, ${COLORS.primaryLight})`,\n        textAlign: \"center\", color: \"#fff\",\n      }}>\n        <div style={{ fontSize: 12, letterSpacing: 4, color: COLORS.gold, textTransform: \"uppercase\", fontWeight: 600, marginBottom: 12 }}>Our Story</div>\n        <h1 style={{ fontFamily: FONTS.heading, fontSize: 48 }}>About <span style={{ color: COLORS.gold }}>Grand Palace</span></h1>\n        <p style={{ color: \"rgba(255,255,255,0.6)\", fontSize: 17, maxWidth: 600, margin: \"16px auto 0\" }}>\n          A legacy of luxury hospitality spanning over 15 years of excellence.\n        </p>\n      </section>\n\n      {/* Story */}\n      <section style={{ padding: \"80px 48px\", background: \"#fff\" }}>\n        <div style={{ maxWidth: 1000, margin: \"0 auto\", display: \"grid\", gridTemplateColumns: \"1fr 1fr\", gap: 60, alignItems: \"center\" }}>\n          <div>\n            <div style={{ fontSize: 12, letterSpacing: 4, color: COLORS.gold, textTransform: \"uppercase\", fontWeight: 600, marginBottom: 12 }}>Established 2009</div>\n            <h2 style={{ fontFamily: FONTS.heading, fontSize: 36, color: COLORS.primary, marginBottom: 20 }}>Where Tradition Meets Modern Luxury</h2>\n            <p style={{ color: COLORS.gray, lineHeight: 1.8, fontSize: 15, marginBottom: 16 }}>\n              Grand Palace Hotels & Resorts was founded with a vision to redefine hospitality in India. \n              What started as a boutique property has grown into one of the country's most respected luxury hotel chains.\n            </p>\n            <p style={{ color: COLORS.gray, lineHeight: 1.8, fontSize: 15 }}>\n              Our commitment to excellence, personalized service, and attention to every detail has earned us \n              numerous accolades and the loyalty of guests from around the world.\n            </p>\n          </div>\n          <div style={{\n            height: 400, borderRadius: 20,\n            background: `linear-gradient(135deg, ${COLORS.gold}33, ${COLORS.accent}22)`,\n            display: \"flex\", alignItems: \"center\", justifyContent: \"center\",\n            boxShadow: \"0 20px 60px rgba(0,0,0,0.1)\",\n          }}>\n            <span style={{ fontSize: 120 }}>🏨</span>\n          </div>\n        </div>\n      </section>\n\n      {/* Values */}\n      <section style={{ padding: \"80px 48px\", background: COLORS.offWhite }}>\n        <div style={{ maxWidth: 1000, margin: \"0 auto\", textAlign: \"center\" }}>\n          <h2 style={{ fontFamily: FONTS.heading, fontSize: 36, color: COLORS.primary, marginBottom: 48 }}>Our Core Values</h2>\n          <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(3, 1fr)\", gap: 32 }}>\n            {[\n              { icon: \"🌟\", title: \"Excellence\", desc: \"We pursue perfection in every detail, from room décor to guest interactions.\" },\n              { icon: \"🤝\", title: \"Hospitality\", desc: \"Warmth, care, and genuine connection define every guest experience.\" },\n              { icon: \"🌱\", title: \"Sustainability\", desc: \"We are committed to eco-friendly practices and responsible tourism.\" },\n            ].map((v, i) => (\n              <div key={i} style={{ background: \"#fff\", borderRadius: 16, padding: 36, boxShadow: \"0 2px 12px rgba(0,0,0,0.04)\" }}>\n                <div style={{ fontSize: 48, marginBottom: 20 }}>{v.icon}</div>\n                <h3 style={{ fontFamily: FONTS.heading, fontSize: 22, marginBottom: 12, color: COLORS.primary }}>{v.title}</h3>\n                <p style={{ fontSize: 14, color: COLORS.gray, lineHeight: 1.7 }}>{v.desc}</p>\n              </div>\n            ))}\n          </div>\n        </div>\n      </section>\n\n      {/* Team */}\n      <section style={{ padding: \"80px 48px\", background: \"#fff\" }}>\n        <div style={{ maxWidth: 1000, margin: \"0 auto\", textAlign: \"center\" }}>\n          <h2 style={{ fontFamily: FONTS.heading, fontSize: 36, color: COLORS.primary, marginBottom: 48 }}>Leadership Team</h2>\n          <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(4, 1fr)\", gap: 28 }}>\n            {[\n              { name: \"Arjun Mehta\", role: \"CEO & Founder\", icon: \"👨‍💼\" },\n              { name: \"Kavita Sharma\", role: \"General Manager\", icon: \"👩‍💼\" },\n              { name: \"Chef Rajan\", role: \"Executive Chef\", icon: \"👨‍🍳\" },\n              { name: \"Dr. Anita Rao\", role: \"Spa Director\", icon: \"👩‍⚕️\" },\n            ].map((m, i) => (\n              <div key={i}>\n                <div style={{\n                  width: 100, height: 100, borderRadius: \"50%\", margin: \"0 auto 16px\",\n                  background: `linear-gradient(135deg, ${COLORS.accent}, ${COLORS.gold})`,\n                  display: \"flex\", alignItems: \"center\", justifyContent: \"center\", fontSize: 40,\n                }}>{m.icon}</div>\n                <div style={{ fontWeight: 700, fontSize: 16, marginBottom: 4 }}>{m.name}</div>\n                <div style={{ fontSize: 13, color: COLORS.gold, fontWeight: 600 }}>{m.role}</div>\n              </div>\n            ))}\n          </div>\n        </div>\n      </section>\n    </div>\n  );\n}\n",[277,193,110],"pulls","branches",1,"forks","envVars",{"_352":26,"_354":26},"connections",{"_352":26,"_353":26},"count","unfilledCount","emptyCount",{"_45":523,"_13":522,"_75":516,"_55":-5,"_47":48,"_274":517,"_292":24,"_49":524,"_51":26,"_78":194,"_271":-5,"_80":30,"_275":-5,"_389":525,"_17":526},{"_45":513,"_13":514,"_75":515,"_55":516,"_47":48,"_274":517,"_292":24,"_49":518,"_51":26,"_78":79,"_271":519,"_80":30,"_275":-5,"_389":520,"_17":521},{"_45":509,"_13":500,"_75":494,"_55":-5,"_47":48,"_274":495,"_292":24,"_49":510,"_51":26,"_78":194,"_271":-5,"_80":30,"_275":-5,"_389":511,"_17":512},{"_45":501,"_13":502,"_75":503,"_55":494,"_47":48,"_274":504,"_292":24,"_49":505,"_51":26,"_78":79,"_271":506,"_80":30,"_275":-5,"_389":507,"_17":508},{"_45":491,"_13":492,"_75":493,"_55":494,"_47":48,"_274":495,"_292":24,"_49":496,"_51":26,"_78":79,"_271":497,"_80":30,"_275":-5,"_389":498,"_17":499},{"_45":487,"_13":277,"_75":272,"_55":-5,"_47":48,"_274":410,"_292":24,"_49":488,"_51":26,"_78":194,"_271":-5,"_80":30,"_275":-5,"_389":489,"_17":490},{"_45":483,"_13":466,"_75":460,"_55":272,"_47":48,"_274":461,"_292":24,"_49":484,"_51":26,"_78":194,"_271":-5,"_80":30,"_275":-5,"_389":485,"_17":486},{"_45":475,"_13":476,"_75":477,"_55":460,"_47":48,"_274":478,"_292":24,"_49":479,"_51":26,"_78":79,"_271":480,"_80":30,"_275":-5,"_389":481,"_17":482},{"_45":467,"_13":468,"_75":469,"_55":460,"_47":48,"_274":470,"_292":24,"_49":471,"_51":26,"_78":79,"_271":472,"_80":30,"_275":-5,"_389":473,"_17":474},{"_45":457,"_13":458,"_75":459,"_55":460,"_47":48,"_274":461,"_292":24,"_49":462,"_51":26,"_78":79,"_271":463,"_80":30,"_275":-5,"_389":464,"_17":465},{"_45":270,"_13":193,"_75":192,"_55":272,"_47":48,"_274":52,"_292":24,"_49":454,"_51":26,"_78":194,"_271":-5,"_80":30,"_275":-5,"_389":455,"_17":456},{"_45":340,"_13":110,"_75":109,"_55":192,"_47":48,"_274":104,"_292":24,"_49":451,"_51":26,"_78":79,"_271":342,"_80":30,"_275":-5,"_389":452,"_17":453},{"_45":336,"_13":164,"_75":163,"_55":192,"_47":48,"_274":158,"_292":24,"_49":448,"_51":26,"_78":79,"_271":338,"_80":30,"_275":-5,"_389":449,"_17":450},{"_45":332,"_13":155,"_75":154,"_55":192,"_47":48,"_274":149,"_292":24,"_49":445,"_51":26,"_78":79,"_271":334,"_80":30,"_275":-5,"_389":446,"_17":447},{"_45":328,"_13":137,"_75":136,"_55":192,"_47":48,"_274":131,"_292":24,"_49":442,"_51":26,"_78":79,"_271":330,"_80":30,"_275":-5,"_389":443,"_17":444},{"_45":324,"_13":173,"_75":172,"_55":192,"_47":48,"_274":167,"_292":24,"_49":439,"_51":26,"_78":79,"_271":326,"_80":30,"_275":-5,"_389":440,"_17":441},{"_45":320,"_13":182,"_75":181,"_55":192,"_47":48,"_274":176,"_292":24,"_49":436,"_51":26,"_78":79,"_271":322,"_80":30,"_275":-5,"_389":437,"_17":438},{"_45":316,"_13":191,"_75":190,"_55":192,"_47":48,"_274":185,"_292":24,"_49":433,"_51":26,"_78":79,"_271":318,"_80":30,"_275":-5,"_389":434,"_17":435},{"_45":312,"_13":146,"_75":145,"_55":192,"_47":48,"_274":140,"_292":24,"_49":430,"_51":26,"_78":79,"_271":314,"_80":30,"_275":-5,"_389":431,"_17":432},{"_45":308,"_13":101,"_75":100,"_55":192,"_47":48,"_274":95,"_292":24,"_49":427,"_51":26,"_78":79,"_271":310,"_80":30,"_275":-5,"_389":428,"_17":429},{"_45":304,"_13":119,"_75":118,"_55":192,"_47":48,"_274":113,"_292":24,"_49":424,"_51":26,"_78":79,"_271":306,"_80":30,"_275":-5,"_389":425,"_17":426},{"_45":300,"_13":77,"_75":76,"_55":192,"_47":48,"_274":52,"_292":24,"_49":421,"_51":26,"_78":79,"_271":302,"_80":30,"_275":-5,"_389":422,"_17":423},{"_45":296,"_13":128,"_75":127,"_55":192,"_47":48,"_274":122,"_292":24,"_49":418,"_51":26,"_78":79,"_271":298,"_80":30,"_275":-5,"_389":419,"_17":420},{"_45":291,"_13":92,"_75":91,"_55":192,"_47":48,"_274":86,"_292":24,"_49":415,"_51":26,"_78":79,"_271":294,"_80":30,"_275":-5,"_389":416,"_17":417},{"_45":407,"_13":408,"_75":409,"_55":272,"_47":48,"_274":410,"_292":24,"_49":411,"_51":26,"_78":79,"_271":412,"_80":30,"_275":-5,"_389":413,"_17":414},{"_45":399,"_13":400,"_75":401,"_55":272,"_47":48,"_274":402,"_292":24,"_49":403,"_51":26,"_78":79,"_271":404,"_80":30,"_275":-5,"_389":405,"_17":406},{"_45":392,"_13":393,"_75":394,"_55":-5,"_47":48,"_274":234,"_292":24,"_49":395,"_51":346,"_78":21,"_271":396,"_80":30,"_275":-5,"_389":397,"_17":398},{"_45":383,"_13":384,"_75":207,"_55":-5,"_47":48,"_274":385,"_292":24,"_49":386,"_51":26,"_78":387,"_271":388,"_80":30,"_275":-5,"_389":390,"_17":391},"84269cbc-5478-11f1-bcbe-ee650bb23af1","index.ts",23,["D",1779301201492],"http","import { Hono } from \"npm:hono@4\";\nimport { readFile, serveFile, parseVal } from \"https://esm.town/v/std/utils/index.ts\";\nimport api from \"./api/routes.ts\";\n\nconst app = new Hono();\n\n// Error handler for full stack traces\napp.onError((err) => Promise.reject(err));\n\n// Mount API\napp.route(\"/api\", api);\n\n// View source\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Serve the SPA\napp.get(\"*\", async (c) => {\n  const html = `<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Grand Palace Hotels & Resorts — Luxury Hotel Management</title>\n  <link href=\"https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\" />\n  <script src=\"https://esm.town/v/std/catch\"></script>\n  <style>\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n    body { font-family: 'Inter', sans-serif; background: #f0f2f5; color: #1a1a2e; -webkit-font-smoothing: antialiased; }\n    a { text-decoration: none; color: inherit; }\n    button { font-family: 'Inter', sans-serif; }\n    input, select, textarea { font-family: 'Inter', sans-serif; }\n    ::-webkit-scrollbar { width: 6px; }\n    ::-webkit-scrollbar-track { background: #f0f0f0; }\n    ::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }\n    @keyframes slideIn { from { transform: translateX(100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }\n    @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }\n  </style>\n</head>\n<body>\n  <div id=\"root\"></div>\n  <script type=\"module\">\n    import React from \"https://esm.sh/react@18.2.0\";\n    import { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n    import { App } from \"./frontend/App.tsx\";\n    const root = createRoot(document.getElementById(\"root\"));\n    root.render(React.createElement(App));\n  </script>\n</body>\n</html>`;\n  return new Response(html, { headers: { \"Content-Type\": \"text/html; charset=utf-8\" } });\n});\n\nexport default app.fetch;\n","children",[],[384],"a6651826-5478-11f1-a147-ee650bb23af1","README.md","db098730-5476-11f1-8c43-ee650bb23af1",["D",1779301258938],"# 🏨 Grand Palace Hotel Management System\n\nA professional, full-featured Hotel Management System built as a modern web application with a premium hotel website design.\n\n## 🌐 Live Demo\n\n**[Open the Live App →](https://shreyaspande--84269d84547811f1bcbeee650bb23af1.web.val.run)**\n\n### Demo Credentials\n| Role | Username | Password |\n|------|----------|----------|\n| Admin | `admin` | `admin123` |\n| Receptionist | `reception` | `reception123` |\n\n---\n\n## ✨ Features\n\n### 🌐 Public Website\n- **Homepage** — Hero banner, room showcase, amenities, testimonials, CTA sections\n- **Rooms Page** — Browse all rooms with filtering by type (Standard/Deluxe/Suite)\n- **Booking Page** — 4-step booking flow with auto bill calculation & GST\n- **About Page** — Hotel story, values, leadership team\n- **Contact Page** — Contact form and hotel info\n\n### 🔐 Admin Dashboard\n- **Dashboard** — Revenue, room stats, booking overview, rating summary\n- **Room Management** — Add/edit/delete rooms, set pricing, manage availability\n- **Customer Management** — Full CRUD with search functionality\n- **Booking Management** — Check-in/check-out flow, payment tracking, cancellations\n- **Employee Management** — Staff records, salary, department, role management\n- **Payment Records** — Transaction history with summaries\n- **Feedback & Ratings** — Guest review management with rating distribution\n\n### 💡 Key Capabilities\n- 🔒 Authentication system (Admin + Receptionist roles)\n- 💰 Auto bill calculation with 18% GST\n- 📊 Real-time dashboard statistics\n- 🔍 Customer search\n- 🏷️ Status badges (available/booked/maintenance, paid/pending, etc.)\n- 🖨️ Print booking confirmation\n- 📱 Professional UI with Playfair Display + Inter fonts\n\n---\n\n## 🗄️ Database Schema\n\n```mermaid\nerDiagram\n    users {\n        int id PK\n        text username\n        text password\n        text full_name\n        text email\n        text role\n    }\n    rooms {\n        int id PK\n        text room_number\n        text room_type\n        text ac_type\n        real price_per_night\n        text status\n        text description\n        int max_guests\n        int floor\n    }\n    customers {\n        int id PK\n        text full_name\n        text email\n        text phone\n        text id_type\n        text id_number\n        text address\n        text city\n        text country\n    }\n    bookings {\n        int id PK\n        text booking_ref\n        int customer_id FK\n        int room_id FK\n        text check_in\n        text check_out\n        int guests\n        text status\n        real total_amount\n        real tax_amount\n        real grand_total\n        text payment_status\n    }\n    employees {\n        int id PK\n        text full_name\n        text role\n        text department\n        real salary\n        text status\n    }\n    payments {\n        int id PK\n        int booking_id FK\n        real amount\n        text payment_method\n        text status\n        text transaction_id\n    }\n    feedback {\n        int id PK\n        int booking_id FK\n        text customer_name\n        int rating\n        text comment\n    }\n\n    customers ||--o{ bookings : makes\n    rooms ||--o{ bookings : assigned\n    bookings ||--o{ payments : has\n    bookings ||--o{ feedback : receives\n```\n\n## 🛠️ Tech Stack\n\n| Layer | Technology |\n|-------|-----------|\n| Backend | Hono (TypeScript) |\n| Frontend | React 18 (JSX) |\n| Database | SQLite (Val Town) |\n| Runtime | Deno (Val Town) |\n| Styling | Inline styles + Google Fonts |\n| Architecture | MVC pattern with REST API |\n\n## 📁 Project Structure\n\n```\n├── index.ts                 # Main HTTP entry point (Hono server)\n├── api/\n│   └── routes.ts            # REST API routes\n├── database/\n│   ├── schema.ts            # Database table creation + seed data\n│   └── queries.ts           # All database query functions\n├── frontend/\n│   ├── App.tsx              # Main React app with routing\n│   ├── styles.ts            # Shared theme, colors, and style constants\n│   ├── components/\n│   │   ├── Navbar.tsx       # Navigation bar\n│   │   ├── Footer.tsx       # Site footer\n│   │   └── AdminSidebar.tsx # Admin panel sidebar\n│   └── pages/\n│       ├── HomePage.tsx     # Landing page\n│       ├── RoomsPage.tsx    # Room listing\n│       ├── BookingPage.tsx  # Multi-step booking flow\n│       ├── AboutPage.tsx    # About the hotel\n│       ├── ContactPage.tsx  # Contact form\n│       ├── LoginPage.tsx    # Staff authentication\n│       ├── AdminDashboard.tsx\n│       ├── AdminRooms.tsx\n│       ├── AdminCustomers.tsx\n│       ├── AdminBookings.tsx\n│       ├── AdminEmployees.tsx\n│       ├── AdminFeedback.tsx\n│       └── AdminPayments.tsx\n└── README.md\n```\n\n## 🎨 Design Inspiration\n- Booking.com — Search & filter UX\n- Marriott Hotels — Premium color theme\n- Taj Hotels — Luxury typography & layout\n",[],[393],"97b313ba-5477-11f1-8ca8-ee650bb23af1","styles.ts","97b314e6-5477-11f1-8ca8-ee650bb23af1",6,["D",1779300804802],"// Shared styles and theme constants\nexport const COLORS = {\n  primary: \"#1a1a2e\",\n  primaryLight: \"#16213e\",\n  accent: \"#e94560\",\n  accentHover: \"#c81e45\",\n  gold: \"#d4a853\",\n  goldLight: \"#f0d78c\",\n  white: \"#ffffff\",\n  offWhite: \"#f8f9fa\",\n  gray: \"#6c757d\",\n  grayLight: \"#e9ecef\",\n  grayDark: \"#343a40\",\n  success: \"#10b981\",\n  warning: \"#f59e0b\",\n  danger: \"#ef4444\",\n  info: \"#3b82f6\",\n  bg: \"#f0f2f5\",\n};\n\nexport const FONTS = {\n  heading: \"'Playfair Display', serif\",\n  body: \"'Inter', sans-serif\",\n};\n\nexport const cardStyle: React.CSSProperties = {\n  background: \"#fff\",\n  borderRadius: 16,\n  boxShadow: \"0 2px 12px rgba(0,0,0,0.06)\",\n  padding: 24,\n};\n\nexport const btnPrimary: React.CSSProperties = {\n  background: COLORS.accent,\n  color: \"#fff\",\n  border: \"none\",\n  padding: \"12px 28px\",\n  borderRadius: 8,\n  fontWeight: 600,\n  fontSize: 15,\n  cursor: \"pointer\",\n  transition: \"all 0.2s\",\n  fontFamily: FONTS.body,\n};\n\nexport const btnOutline: React.CSSProperties = {\n  background: \"transparent\",\n  color: COLORS.accent,\n  border: `2px solid ${COLORS.accent}`,\n  padding: \"10px 24px\",\n  borderRadius: 8,\n  fontWeight: 600,\n  fontSize: 15,\n  cursor: \"pointer\",\n  transition: \"all 0.2s\",\n  fontFamily: FONTS.body,\n};\n\nexport const btnGold: React.CSSProperties = {\n  background: `linear-gradient(135deg, ${COLORS.gold}, ${COLORS.goldLight})`,\n  color: COLORS.primary,\n  border: \"none\",\n  padding: \"12px 28px\",\n  borderRadius: 8,\n  fontWeight: 700,\n  fontSize: 15,\n  cursor: \"pointer\",\n  transition: \"all 0.2s\",\n  fontFamily: FONTS.body,\n};\n\nexport const inputStyle: React.CSSProperties = {\n  width: \"100%\",\n  padding: \"12px 16px\",\n  borderRadius: 8,\n  border: \"1px solid #ddd\",\n  fontSize: 15,\n  fontFamily: FONTS.body,\n  outline: \"none\",\n  transition: \"border-color 0.2s\",\n  boxSizing: \"border-box\",\n};\n\nexport const labelStyle: React.CSSProperties = {\n  fontSize: 13,\n  fontWeight: 600,\n  color: COLORS.grayDark,\n  marginBottom: 4,\n  display: \"block\",\n  fontFamily: FONTS.body,\n};\n\nexport const tableStyle: React.CSSProperties = {\n  width: \"100%\",\n  borderCollapse: \"collapse\" as const,\n  fontSize: 14,\n  fontFamily: FONTS.body,\n};\n\nexport const thStyle: React.CSSProperties = {\n  padding: \"12px 16px\",\n  textAlign: \"left\" as const,\n  background: COLORS.primary,\n  color: \"#fff\",\n  fontWeight: 600,\n  fontSize: 13,\n  textTransform: \"uppercase\" as const,\n  letterSpacing: \"0.5px\",\n};\n\nexport const tdStyle: React.CSSProperties = {\n  padding: \"12px 16px\",\n  borderBottom: \"1px solid #eee\",\n};\n\nexport const badgeStyle = (color: string): React.CSSProperties => ({\n  display: \"inline-block\",\n  padding: \"4px 12px\",\n  borderRadius: 20,\n  fontSize: 12,\n  fontWeight: 600,\n  background: color + \"18\",\n  color: color,\n});\n\nexport const statusColor = (status: string): string => {\n  const map: Record<string, string> = {\n    available: COLORS.success,\n    booked: COLORS.info,\n    maintenance: COLORS.warning,\n    confirmed: COLORS.info,\n    checked_in: COLORS.success,\n    checked_out: COLORS.gray,\n    cancelled: COLORS.danger,\n    paid: COLORS.success,\n    pending: COLORS.warning,\n    active: COLORS.success,\n    inactive: COLORS.gray,\n    completed: COLORS.success,\n  };\n  return map[status] || COLORS.gray;\n};\n",[],[277,400],"8ea7e976-5477-11f1-9426-ee650bb23af1","App.tsx","8ea7ea5c-5477-11f1-9426-ee650bb23af1",5,["D",1779300789627],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport { HomePage } from \"./pages/HomePage.tsx\";\nimport { RoomsPage } from \"./pages/RoomsPage.tsx\";\nimport { BookingPage } from \"./pages/BookingPage.tsx\";\nimport { AboutPage } from \"./pages/AboutPage.tsx\";\nimport { ContactPage } from \"./pages/ContactPage.tsx\";\nimport { LoginPage } from \"./pages/LoginPage.tsx\";\nimport { AdminDashboard } from \"./pages/AdminDashboard.tsx\";\nimport { AdminRooms } from \"./pages/AdminRooms.tsx\";\nimport { AdminCustomers } from \"./pages/AdminCustomers.tsx\";\nimport { AdminBookings } from \"./pages/AdminBookings.tsx\";\nimport { AdminEmployees } from \"./pages/AdminEmployees.tsx\";\nimport { AdminFeedback } from \"./pages/AdminFeedback.tsx\";\nimport { AdminPayments } from \"./pages/AdminPayments.tsx\";\nimport { Navbar } from \"./components/Navbar.tsx\";\nimport { Footer } from \"./components/Footer.tsx\";\nimport { AdminSidebar } from \"./components/AdminSidebar.tsx\";\n\nexport type Page = \"home\" | \"rooms\" | \"booking\" | \"about\" | \"contact\" | \"login\"\n  | \"admin-dashboard\" | \"admin-rooms\" | \"admin-customers\" | \"admin-bookings\"\n  | \"admin-employees\" | \"admin-feedback\" | \"admin-payments\";\n\nexport interface User {\n  id: number;\n  username: string;\n  full_name: string;\n  email: string;\n  role: string;\n}\n\nexport function App() {\n  const [page, setPage] = useState<Page>(\"home\");\n  const [user, setUser] = useState<User | null>(null);\n  const [notification, setNotification] = useState<{ message: string; type: \"success\" | \"error\" } | null>(null);\n\n  const isAdmin = page.startsWith(\"admin-\");\n\n  const showNotification = useCallback((message: string, type: \"success\" | \"error\" = \"success\") => {\n    setNotification({ message, type });\n    setTimeout(() => setNotification(null), 3500);\n  }, []);\n\n  const handleLogout = () => {\n    setUser(null);\n    setPage(\"home\");\n    showNotification(\"Logged out successfully\");\n  };\n\n  const handleLogin = (u: User) => {\n    setUser(u);\n    setPage(\"admin-dashboard\");\n    showNotification(`Welcome back, ${u.full_name}!`);\n  };\n\n  // Render admin layout\n  if (isAdmin && user) {\n    return (\n      <div style={{ display: \"flex\", minHeight: \"100vh\", background: \"#f0f2f5\" }}>\n        {notification && <Toast message={notification.message} type={notification.type} />}\n        <AdminSidebar page={page} setPage={setPage} user={user} onLogout={handleLogout} />\n        <div style={{ flex: 1, overflow: \"auto\" }}>\n          {page === \"admin-dashboard\" && <AdminDashboard />}\n          {page === \"admin-rooms\" && <AdminRooms notify={showNotification} />}\n          {page === \"admin-customers\" && <AdminCustomers notify={showNotification} />}\n          {page === \"admin-bookings\" && <AdminBookings notify={showNotification} />}\n          {page === \"admin-employees\" && <AdminEmployees notify={showNotification} />}\n          {page === \"admin-feedback\" && <AdminFeedback />}\n          {page === \"admin-payments\" && <AdminPayments />}\n        </div>\n      </div>\n    );\n  }\n\n  // Protect admin pages\n  if (isAdmin && !user) {\n    return (\n      <>\n        {notification && <Toast message={notification.message} type={notification.type} />}\n        <Navbar page=\"login\" setPage={setPage} user={user} onLogout={handleLogout} />\n        <LoginPage onLogin={handleLogin} notify={showNotification} />\n        <Footer setPage={setPage} />\n      </>\n    );\n  }\n\n  return (\n    <>\n      {notification && <Toast message={notification.message} type={notification.type} />}\n      <Navbar page={page} setPage={setPage} user={user} onLogout={handleLogout} />\n      {page === \"home\" && <HomePage setPage={setPage} />}\n      {page === \"rooms\" && <RoomsPage setPage={setPage} />}\n      {page === \"booking\" && <BookingPage notify={showNotification} />}\n      {page === \"about\" && <AboutPage />}\n      {page === \"contact\" && <ContactPage notify={showNotification} />}\n      {page === \"login\" && <LoginPage onLogin={handleLogin} notify={showNotification} />}\n      <Footer setPage={setPage} />\n    </>\n  );\n}\n\nfunction Toast({ message, type }: { message: string; type: \"success\" | \"error\" }) {\n  return (\n    <div style={{\n      position: \"fixed\", top: 24, right: 24, zIndex: 10000,\n      background: type === \"success\" ? \"#10b981\" : \"#ef4444\",\n      color: \"#fff\", padding: \"14px 28px\", borderRadius: 12,\n      boxShadow: \"0 8px 32px rgba(0,0,0,0.18)\", fontSize: 15, fontWeight: 600,\n      display: \"flex\", alignItems: \"center\", gap: 10,\n      animation: \"slideIn 0.3s ease-out\",\n    }}>\n      <span>{type === \"success\" ? \"✓\" : \"✕\"}</span>\n      {message}\n    </div>\n  );\n}\n",[],[277,408],["D",1779300936369],[],[277,193,92],["D",1779301042716],[],[277,193,128],["D",1779300909794],[],[277,193,77],["D",1779301028614],[],[277,193,119],["D",1779300987865],[],[277,193,101],["D",1779301091197],[],[277,193,146],["D",1779301188002],[],[277,193,191],["D",1779301173199],[],[277,193,182],["D",1779301158031],[],[277,193,173],["D",1779301068564],[],[277,193,137],["D",1779301113339],[],[277,193,155],["D",1779301134808],[],[277,193,164],["D",1779301010882],[],[277,193,110],["D",1779300909794],[366,367,368,369,370,371,372,373,374,375,376,377,378],[277,193],"a215a692-5477-11f1-9426-ee650bb23af1","Navbar.tsx","a215a782-5477-11f1-9426-ee650bb23af1","a85d1dd8-17bd-4c46-8168-7391df1299df",7,["D",1779300822213],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { Page, User } from \"../App.tsx\";\nimport { COLORS, FONTS } from \"../styles.ts\";\n\ninterface Props {\n  page: Page;\n  setPage: (p: Page) => void;\n  user: User | null;\n  onLogout: () => void;\n}\n\nexport function Navbar({ page, setPage, user, onLogout }: Props) {\n  const [scrolled, setScrolled] = useState(false);\n\n  if (typeof window !== \"undefined\") {\n    window.addEventListener(\"scroll\", () => setScrolled(window.scrollY > 50));\n  }\n\n  const isHome = page === \"home\";\n  const navBg = isHome && !scrolled ? \"transparent\" : COLORS.primary;\n  const links: { label: string; p: Page }[] = [\n    { label: \"Home\", p: \"home\" },\n    { label: \"Rooms\", p: \"rooms\" },\n    { label: \"Book Now\", p: \"booking\" },\n    { label: \"About\", p: \"about\" },\n    { label: \"Contact\", p: \"contact\" },\n  ];\n\n  return (\n    <nav style={{\n      position: isHome ? \"fixed\" : \"sticky\",\n      top: 0, left: 0, right: 0, zIndex: 1000,\n      background: navBg,\n      padding: \"0 48px\",\n      display: \"flex\", alignItems: \"center\", justifyContent: \"space-between\",\n      height: 72,\n      transition: \"all 0.3s\",\n      boxShadow: scrolled ? \"0 2px 20px rgba(0,0,0,0.15)\" : \"none\",\n      backdropFilter: isHome && !scrolled ? \"blur(10px)\" : \"none\",\n    }}>\n      {/* Logo */}\n      <div onClick={() => setPage(\"home\")} style={{ cursor: \"pointer\", display: \"flex\", alignItems: \"center\", gap: 12 }}>\n        <span style={{ fontSize: 28, color: COLORS.gold }}>🏨</span>\n        <div>\n          <div style={{ fontFamily: FONTS.heading, fontSize: 22, fontWeight: 700, color: COLORS.gold, lineHeight: 1.1 }}>\n            Grand Palace\n          </div>\n          <div style={{ fontSize: 10, color: \"rgba(255,255,255,0.7)\", letterSpacing: 3, textTransform: \"uppercase\" }}>\n            Hotels & Resorts\n          </div>\n        </div>\n      </div>\n\n      {/* Links */}\n      <div style={{ display: \"flex\", gap: 8, alignItems: \"center\" }}>\n        {links.map((l) => (\n          <button\n            key={l.p}\n            onClick={() => setPage(l.p)}\n            style={{\n              background: page === l.p ? \"rgba(228,169,96,0.15)\" : \"transparent\",\n              color: page === l.p ? COLORS.gold : \"#fff\",\n              border: \"none\",\n              padding: \"8px 18px\",\n              borderRadius: 8,\n              fontSize: 14,\n              fontWeight: page === l.p ? 700 : 500,\n              cursor: \"pointer\",\n              fontFamily: FONTS.body,\n              transition: \"all 0.2s\",\n            }}\n          >\n            {l.label}\n          </button>\n        ))}\n        <div style={{ width: 1, height: 24, background: \"rgba(255,255,255,0.2)\", margin: \"0 8px\" }} />\n        {user ? (\n          <div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}>\n            <button onClick={() => setPage(\"admin-dashboard\")} style={{\n              background: `linear-gradient(135deg, ${COLORS.gold}, ${COLORS.goldLight})`,\n              color: COLORS.primary, border: \"none\", padding: \"8px 20px\", borderRadius: 8,\n              fontWeight: 700, fontSize: 13, cursor: \"pointer\", fontFamily: FONTS.body,\n            }}>\n              ⚙ Dashboard\n            </button>\n            <button onClick={onLogout} style={{\n              background: \"rgba(255,255,255,0.1)\", color: \"#fff\", border: \"1px solid rgba(255,255,255,0.2)\",\n              padding: \"8px 16px\", borderRadius: 8, fontSize: 13, cursor: \"pointer\", fontFamily: FONTS.body,\n            }}>\n              Logout\n            </button>\n          </div>\n        ) : (\n          <button onClick={() => setPage(\"login\")} style={{\n            background: COLORS.accent, color: \"#fff\", border: \"none\",\n            padding: \"8px 22px\", borderRadius: 8, fontWeight: 600, fontSize: 14,\n            cursor: \"pointer\", fontFamily: FONTS.body, transition: \"all 0.2s\",\n          }}>\n            Staff Login\n          </button>\n        )}\n      </div>\n    </nav>\n  );\n}\n",[],[277,466,458],"components","ab8f8f58-5477-11f1-8ca8-ee650bb23af1","Footer.tsx","ab8f8ff8-5477-11f1-8ca8-ee650bb23af1",8,["D",1779300838126],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport type { Page } from \"../App.tsx\";\nimport { COLORS, FONTS } from \"../styles.ts\";\n\nexport function Footer({ setPage }: { setPage: (p: Page) => void }) {\n  return (\n    <footer style={{ background: COLORS.primary, color: \"#fff\", padding: \"60px 48px 30px\" }}>\n      <div style={{ maxWidth: 1200, margin: \"0 auto\", display: \"grid\", gridTemplateColumns: \"2fr 1fr 1fr 1fr\", gap: 48 }}>\n        {/* Brand */}\n        <div>\n          <div style={{ display: \"flex\", alignItems: \"center\", gap: 10, marginBottom: 16 }}>\n            <span style={{ fontSize: 32 }}>🏨</span>\n            <div>\n              <div style={{ fontFamily: FONTS.heading, fontSize: 24, fontWeight: 700, color: COLORS.gold }}>Grand Palace</div>\n              <div style={{ fontSize: 10, color: \"rgba(255,255,255,0.5)\", letterSpacing: 3, textTransform: \"uppercase\" }}>Hotels & Resorts</div>\n            </div>\n          </div>\n          <p style={{ color: \"rgba(255,255,255,0.6)\", lineHeight: 1.7, fontSize: 14 }}>\n            Experience luxury and comfort at Grand Palace Hotels & Resorts. Where every stay becomes a cherished memory.\n          </p>\n          <div style={{ display: \"flex\", gap: 12, marginTop: 20 }}>\n            {[\"📘\", \"🐦\", \"📸\", \"🔗\"].map((icon, i) => (\n              <span key={i} style={{\n                width: 36, height: 36, borderRadius: \"50%\", background: \"rgba(255,255,255,0.1)\",\n                display: \"flex\", alignItems: \"center\", justifyContent: \"center\", fontSize: 16, cursor: \"pointer\",\n              }}>{icon}</span>\n            ))}\n          </div>\n        </div>\n\n        {/* Quick Links */}\n        <div>\n          <h4 style={{ fontFamily: FONTS.heading, fontSize: 18, marginBottom: 20, color: COLORS.gold }}>Quick Links</h4>\n          {([\"home\", \"rooms\", \"booking\", \"about\", \"contact\"] as Page[]).map((p) => (\n            <div key={p} onClick={() => setPage(p)} style={{\n              color: \"rgba(255,255,255,0.6)\", cursor: \"pointer\", padding: \"6px 0\", fontSize: 14,\n              transition: \"color 0.2s\", textTransform: \"capitalize\",\n            }}>{p}</div>\n          ))}\n        </div>\n\n        {/* Services */}\n        <div>\n          <h4 style={{ fontFamily: FONTS.heading, fontSize: 18, marginBottom: 20, color: COLORS.gold }}>Services</h4>\n          {[\"Room Service\", \"Spa & Wellness\", \"Fine Dining\", \"Conference Hall\", \"Airport Transfer\"].map((s) => (\n            <div key={s} style={{ color: \"rgba(255,255,255,0.6)\", padding: \"6px 0\", fontSize: 14 }}>{s}</div>\n          ))}\n        </div>\n\n        {/* Contact */}\n        <div>\n          <h4 style={{ fontFamily: FONTS.heading, fontSize: 18, marginBottom: 20, color: COLORS.gold }}>Contact Us</h4>\n          <div style={{ color: \"rgba(255,255,255,0.6)\", fontSize: 14, lineHeight: 2 }}>\n            📍 123 Luxury Lane, Mumbai, India<br />\n            📞 +91 98765 43210<br />\n            ✉️ info@grandpalace.com<br />\n            🕐 24/7 Front Desk\n          </div>\n        </div>\n      </div>\n\n      <div style={{ maxWidth: 1200, margin: \"40px auto 0\", borderTop: \"1px solid rgba(255,255,255,0.1)\", paddingTop: 24, display: \"flex\", justifyContent: \"space-between\", alignItems: \"center\" }}>\n        <div style={{ color: \"rgba(255,255,255,0.4)\", fontSize: 13 }}>© 2024 Grand Palace Hotels & Resorts. All rights reserved.</div>\n        <div style={{ display: \"flex\", gap: 20, fontSize: 13, color: \"rgba(255,255,255,0.4)\" }}>\n          <span style={{ cursor: \"pointer\" }}>Privacy Policy</span>\n          <span style={{ cursor: \"pointer\" }}>Terms of Service</span>\n        </div>\n      </div>\n    </footer>\n  );\n}\n",[],[277,466,468],"b6f4f892-5477-11f1-b3b0-ee650bb23af1","AdminSidebar.tsx","b6f4f93c-5477-11f1-b3b0-ee650bb23af1",9,["D",1779300857243],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport type { Page, User } from \"../App.tsx\";\nimport { COLORS, FONTS } from \"../styles.ts\";\n\ninterface Props {\n  page: Page;\n  setPage: (p: Page) => void;\n  user: User;\n  onLogout: () => void;\n}\n\nconst menuItems: { icon: string; label: string; page: Page }[] = [\n  { icon: \"📊\", label: \"Dashboard\", page: \"admin-dashboard\" },\n  { icon: \"🛏️\", label: \"Rooms\", page: \"admin-rooms\" },\n  { icon: \"👤\", label: \"Customers\", page: \"admin-customers\" },\n  { icon: \"📋\", label: \"Bookings\", page: \"admin-bookings\" },\n  { icon: \"👥\", label: \"Employees\", page: \"admin-employees\" },\n  { icon: \"💳\", label: \"Payments\", page: \"admin-payments\" },\n  { icon: \"⭐\", label: \"Feedback\", page: \"admin-feedback\" },\n];\n\nexport function AdminSidebar({ page, setPage, user, onLogout }: Props) {\n  return (\n    <div style={{\n      width: 260, background: COLORS.primary, color: \"#fff\",\n      display: \"flex\", flexDirection: \"column\", minHeight: \"100vh\",\n    }}>\n      {/* Logo */}\n      <div style={{ padding: \"24px 20px\", borderBottom: \"1px solid rgba(255,255,255,0.08)\" }}>\n        <div onClick={() => setPage(\"home\")} style={{ cursor: \"pointer\", display: \"flex\", alignItems: \"center\", gap: 10 }}>\n          <span style={{ fontSize: 24 }}>🏨</span>\n          <div>\n            <div style={{ fontFamily: FONTS.heading, fontSize: 18, fontWeight: 700, color: COLORS.gold }}>Grand Palace</div>\n            <div style={{ fontSize: 9, color: \"rgba(255,255,255,0.4)\", letterSpacing: 2, textTransform: \"uppercase\" }}>Admin Panel</div>\n          </div>\n        </div>\n      </div>\n\n      {/* User Info */}\n      <div style={{ padding: \"20px\", borderBottom: \"1px solid rgba(255,255,255,0.08)\" }}>\n        <div style={{ display: \"flex\", alignItems: \"center\", gap: 12 }}>\n          <div style={{\n            width: 40, height: 40, borderRadius: \"50%\",\n            background: `linear-gradient(135deg, ${COLORS.accent}, ${COLORS.gold})`,\n            display: \"flex\", alignItems: \"center\", justifyContent: \"center\",\n            fontSize: 18, fontWeight: 700,\n          }}>\n            {user.full_name.charAt(0)}\n          </div>\n          <div>\n            <div style={{ fontSize: 14, fontWeight: 600 }}>{user.full_name}</div>\n            <div style={{\n              fontSize: 11, color: COLORS.gold, textTransform: \"capitalize\",\n              background: \"rgba(212,168,83,0.15)\", padding: \"2px 8px\", borderRadius: 4, display: \"inline-block\",\n            }}>{user.role}</div>\n          </div>\n        </div>\n      </div>\n\n      {/* Menu */}\n      <div style={{ flex: 1, padding: \"16px 12px\" }}>\n        <div style={{ fontSize: 10, color: \"rgba(255,255,255,0.3)\", fontWeight: 700, padding: \"8px 12px\", letterSpacing: 2, textTransform: \"uppercase\" }}>\n          Main Menu\n        </div>\n        {menuItems.map((item) => (\n          <button\n            key={item.page}\n            onClick={() => setPage(item.page)}\n            style={{\n              display: \"flex\", alignItems: \"center\", gap: 12, width: \"100%\",\n              padding: \"12px 16px\", borderRadius: 10,\n              background: page === item.page ? \"rgba(233,69,96,0.15)\" : \"transparent\",\n              color: page === item.page ? COLORS.accent : \"rgba(255,255,255,0.7)\",\n              border: page === item.page ? `1px solid rgba(233,69,96,0.3)` : \"1px solid transparent\",\n              fontSize: 14, fontWeight: page === item.page ? 600 : 400,\n              cursor: \"pointer\", transition: \"all 0.2s\", fontFamily: FONTS.body,\n              marginBottom: 4,\n            }}\n          >\n            <span style={{ fontSize: 18 }}>{item.icon}</span>\n            {item.label}\n          </button>\n        ))}\n      </div>\n\n      {/* Back to Website + Logout */}\n      <div style={{ padding: \"16px 12px\", borderTop: \"1px solid rgba(255,255,255,0.08)\" }}>\n        <button onClick={() => setPage(\"home\")} style={{\n          display: \"flex\", alignItems: \"center\", gap: 10, width: \"100%\",\n          padding: \"10px 16px\", borderRadius: 8, background: \"rgba(255,255,255,0.05)\",\n          color: \"rgba(255,255,255,0.6)\", border: \"none\", fontSize: 13, cursor: \"pointer\",\n          fontFamily: FONTS.body, marginBottom: 8,\n        }}>\n          🌐 Back to Website\n        </button>\n        <button onClick={onLogout} style={{\n          display: \"flex\", alignItems: \"center\", gap: 10, width: \"100%\",\n          padding: \"10px 16px\", borderRadius: 8, background: \"rgba(239,68,68,0.1)\",\n          color: COLORS.danger, border: \"none\", fontSize: 13, cursor: \"pointer\",\n          fontFamily: FONTS.body, fontWeight: 600,\n        }}>\n          🚪 Logout\n        </button>\n      </div>\n    </div>\n  );\n}\n",[],[277,466,476],"a215d1da-5477-11f1-9426-ee650bb23af1",["D",1779300822213],[362,363,364],[277,466],"8ea80f1e-5477-11f1-9426-ee650bb23af1",["D",1779300789627],[361,365,379,380],[277],"e9b7b0e0-5476-11f1-8c7b-ee650bb23af1","schema.ts","e9b7b1a8-5476-11f1-8c7b-ee650bb23af1","582166b8-a95d-4416-826e-7b81083aac44",2,["D",1779300512907],"// Database schema initialization for the Hotel Management System\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nexport async function initDatabase() {\n  await sqlite.batch([\n    // Users table (admin, receptionist)\n    {\n      sql: `CREATE TABLE IF NOT EXISTS users (\n        id INTEGER PRIMARY KEY AUTOINCREMENT,\n        username TEXT UNIQUE NOT NULL,\n        password TEXT NOT NULL,\n        full_name TEXT NOT NULL,\n        email TEXT,\n        role TEXT NOT NULL DEFAULT 'receptionist',\n        created_at TEXT DEFAULT (datetime('now'))\n      )`,\n      args: [],\n    },\n    // Rooms table\n    {\n      sql: `CREATE TABLE IF NOT EXISTS rooms (\n        id INTEGER PRIMARY KEY AUTOINCREMENT,\n        room_number TEXT UNIQUE NOT NULL,\n        room_type TEXT NOT NULL DEFAULT 'Standard',\n        ac_type TEXT NOT NULL DEFAULT 'AC',\n        price_per_night REAL NOT NULL,\n        status TEXT NOT NULL DEFAULT 'available',\n        description TEXT,\n        image_url TEXT,\n        max_guests INTEGER DEFAULT 2,\n        floor INTEGER DEFAULT 1,\n        created_at TEXT DEFAULT (datetime('now'))\n      )`,\n      args: [],\n    },\n    // Customers table\n    {\n      sql: `CREATE TABLE IF NOT EXISTS customers (\n        id INTEGER PRIMARY KEY AUTOINCREMENT,\n        full_name TEXT NOT NULL,\n        email TEXT,\n        phone TEXT NOT NULL,\n        id_type TEXT DEFAULT 'Aadhar',\n        id_number TEXT,\n        address TEXT,\n        city TEXT,\n        country TEXT DEFAULT 'India',\n        created_at TEXT DEFAULT (datetime('now'))\n      )`,\n      args: [],\n    },\n    // Bookings table\n    {\n      sql: `CREATE TABLE IF NOT EXISTS bookings (\n        id INTEGER PRIMARY KEY AUTOINCREMENT,\n        booking_ref TEXT UNIQUE NOT NULL,\n        customer_id INTEGER NOT NULL,\n        room_id INTEGER NOT NULL,\n        check_in TEXT NOT NULL,\n        check_out TEXT NOT NULL,\n        guests INTEGER DEFAULT 1,\n        status TEXT NOT NULL DEFAULT 'confirmed',\n        total_amount REAL NOT NULL,\n        tax_amount REAL DEFAULT 0,\n        grand_total REAL NOT NULL,\n        payment_status TEXT DEFAULT 'pending',\n        special_requests TEXT,\n        created_at TEXT DEFAULT (datetime('now')),\n        FOREIGN KEY (customer_id) REFERENCES customers(id),\n        FOREIGN KEY (room_id) REFERENCES rooms(id)\n      )`,\n      args: [],\n    },\n    // Employees table\n    {\n      sql: `CREATE TABLE IF NOT EXISTS employees (\n        id INTEGER PRIMARY KEY AUTOINCREMENT,\n        full_name TEXT NOT NULL,\n        email TEXT,\n        phone TEXT,\n        role TEXT NOT NULL,\n        department TEXT,\n        salary REAL,\n        join_date TEXT,\n        status TEXT DEFAULT 'active',\n        created_at TEXT DEFAULT (datetime('now'))\n      )`,\n      args: [],\n    },\n    // Payments table\n    {\n      sql: `CREATE TABLE IF NOT EXISTS payments (\n        id INTEGER PRIMARY KEY AUTOINCREMENT,\n        booking_id INTEGER NOT NULL,\n        amount REAL NOT NULL,\n        payment_method TEXT DEFAULT 'cash',\n        payment_date TEXT DEFAULT (datetime('now')),\n        status TEXT DEFAULT 'completed',\n        transaction_id TEXT,\n        FOREIGN KEY (booking_id) REFERENCES bookings(id)\n      )`,\n      args: [],\n    },\n    // Feedback table\n    {\n      sql: `CREATE TABLE IF NOT EXISTS feedback (\n        id INTEGER PRIMARY KEY AUTOINCREMENT,\n        booking_id INTEGER,\n        customer_name TEXT NOT NULL,\n        email TEXT,\n        rating INTEGER NOT NULL,\n        comment TEXT,\n        created_at TEXT DEFAULT (datetime('now')),\n        FOREIGN KEY (booking_id) REFERENCES bookings(id)\n      )`,\n      args: [],\n    },\n  ]);\n}\n\nexport async function seedData() {\n  // Check if data exists\n  const userCount = await sqlite.execute(\"SELECT COUNT(*) as count FROM users\");\n  if ((userCount.rows[0] as any).count > 0) return;\n\n  await sqlite.batch([\n    // Default admin user (password: admin123)\n    {\n      sql: `INSERT INTO users (username, password, full_name, email, role) VALUES (?, ?, ?, ?, ?)`,\n      args: [\"admin\", \"admin123\", \"System Administrator\", \"admin@grandpalace.com\", \"admin\"],\n    },\n    {\n      sql: `INSERT INTO users (username, password, full_name, email, role) VALUES (?, ?, ?, ?, ?)`,\n      args: [\"reception\", \"reception123\", \"Front Desk\", \"reception@grandpalace.com\", \"receptionist\"],\n    },\n    // Sample rooms\n    {\n      sql: `INSERT INTO rooms (room_number, room_type, ac_type, price_per_night, status, description, max_guests, floor) VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,\n      args: [\"101\", \"Standard\", \"AC\", 2500, \"available\", \"Comfortable standard room with city view, queen bed, and modern amenities.\", 2, 1],\n    },\n    {\n      sql: `INSERT INTO rooms (room_number, room_type, ac_type, price_per_night, status, description, max_guests, floor) VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,\n      args: [\"102\", \"Standard\", \"Non-AC\", 1800, \"available\", \"Budget-friendly room with garden view and essential amenities.\", 2, 1],\n    },\n    {\n      sql: `INSERT INTO rooms (room_number, room_type, ac_type, price_per_night, status, description, max_guests, floor) VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,\n      args: [\"201\", \"Deluxe\", \"AC\", 4500, \"available\", \"Spacious deluxe room with panoramic view, king bed, mini bar, and luxury bath.\", 3, 2],\n    },\n    {\n      sql: `INSERT INTO rooms (room_number, room_type, ac_type, price_per_night, status, description, max_guests, floor) VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,\n      args: [\"202\", \"Deluxe\", \"AC\", 4500, \"booked\", \"Premium deluxe room with balcony, king bed, and complimentary breakfast.\", 3, 2],\n    },\n    {\n      sql: `INSERT INTO rooms (room_number, room_type, ac_type, price_per_night, status, description, max_guests, floor) VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,\n      args: [\"301\", \"Suite\", \"AC\", 8500, \"available\", \"Luxurious suite with living area, jacuzzi, and butler service.\", 4, 3],\n    },\n    {\n      sql: `INSERT INTO rooms (room_number, room_type, ac_type, price_per_night, status, description, max_guests, floor) VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,\n      args: [\"302\", \"Suite\", \"AC\", 12000, \"available\", \"Presidential suite with private terrace, dining room, and premium amenities.\", 4, 3],\n    },\n    {\n      sql: `INSERT INTO rooms (room_number, room_type, ac_type, price_per_night, status, description, max_guests, floor) VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,\n      args: [\"103\", \"Standard\", \"AC\", 2800, \"maintenance\", \"Standard room currently under renovation.\", 2, 1],\n    },\n    {\n      sql: `INSERT INTO rooms (room_number, room_type, ac_type, price_per_night, status, description, max_guests, floor) VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,\n      args: [\"203\", \"Deluxe\", \"AC\", 5000, \"available\", \"Corner deluxe room with dual views and premium furnishing.\", 3, 2],\n    },\n    // Sample customers\n    {\n      sql: `INSERT INTO customers (full_name, email, phone, id_type, id_number, address, city, country) VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,\n      args: [\"Rajesh Kumar\", \"rajesh@email.com\", \"9876543210\", \"Aadhar\", \"1234-5678-9012\", \"123 MG Road\", \"Mumbai\", \"India\"],\n    },\n    {\n      sql: `INSERT INTO customers (full_name, email, phone, id_type, id_number, address, city, country) VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,\n      args: [\"Priya Sharma\", \"priya@email.com\", \"9876543211\", \"Passport\", \"K1234567\", \"456 Park Street\", \"Delhi\", \"India\"],\n    },\n    {\n      sql: `INSERT INTO customers (full_name, email, phone, id_type, id_number, address, city, country) VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,\n      args: [\"John Smith\", \"john@email.com\", \"9876543212\", \"Passport\", \"US123456\", \"789 Broadway\", \"New York\", \"USA\"],\n    },\n    // Sample bookings\n    {\n      sql: `INSERT INTO bookings (booking_ref, customer_id, room_id, check_in, check_out, guests, status, total_amount, tax_amount, grand_total, payment_status) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,\n      args: [\"BK-2024-001\", 1, 4, \"2024-12-20\", \"2024-12-23\", 2, \"checked_in\", 13500, 2430, 15930, \"paid\"],\n    },\n    {\n      sql: `INSERT INTO bookings (booking_ref, customer_id, room_id, check_in, check_out, guests, status, total_amount, tax_amount, grand_total, payment_status) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,\n      args: [\"BK-2024-002\", 2, 5, \"2024-12-25\", \"2024-12-28\", 2, \"confirmed\", 25500, 4590, 30090, \"pending\"],\n    },\n    {\n      sql: `INSERT INTO bookings (booking_ref, customer_id, room_id, check_in, check_out, guests, status, total_amount, tax_amount, grand_total, payment_status) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,\n      args: [\"BK-2024-003\", 3, 1, \"2024-12-22\", \"2024-12-24\", 1, \"confirmed\", 5000, 900, 5900, \"paid\"],\n    },\n    // Sample employees\n    {\n      sql: `INSERT INTO employees (full_name, email, phone, role, department, salary, join_date, status) VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,\n      args: [\"Amit Patel\", \"amit@grandpalace.com\", \"9876500001\", \"Manager\", \"Management\", 75000, \"2022-01-15\", \"active\"],\n    },\n    {\n      sql: `INSERT INTO employees (full_name, email, phone, role, department, salary, join_date, status) VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,\n      args: [\"Sneha Reddy\", \"sneha@grandpalace.com\", \"9876500002\", \"Receptionist\", \"Front Desk\", 35000, \"2023-03-01\", \"active\"],\n    },\n    {\n      sql: `INSERT INTO employees (full_name, email, phone, role, department, salary, join_date, status) VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,\n      args: [\"Vikram Singh\", \"vikram@grandpalace.com\", \"9876500003\", \"Housekeeping\", \"Operations\", 25000, \"2023-06-15\", \"active\"],\n    },\n    {\n      sql: `INSERT INTO employees (full_name, email, phone, role, department, salary, join_date, status) VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,\n      args: [\"Chef Rajan\", \"rajan@grandpalace.com\", \"9876500004\", \"Chef\", \"Restaurant\", 55000, \"2022-08-01\", \"active\"],\n    },\n    // Sample feedback\n    {\n      sql: `INSERT INTO feedback (booking_id, customer_name, email, rating, comment) VALUES (?, ?, ?, ?, ?)`,\n      args: [1, \"Rajesh Kumar\", \"rajesh@email.com\", 5, \"Excellent service and beautiful rooms! Will definitely come back.\"],\n    },\n    {\n      sql: `INSERT INTO feedback (booking_id, customer_name, email, rating, comment) VALUES (?, ?, ?, ?, ?)`,\n      args: [null, \"Anonymous Guest\", \"guest@email.com\", 4, \"Great location and friendly staff. Food could be better.\"],\n    },\n    // Sample payments\n    {\n      sql: `INSERT INTO payments (booking_id, amount, payment_method, status, transaction_id) VALUES (?, ?, ?, ?, ?)`,\n      args: [1, 15930, \"credit_card\", \"completed\", \"TXN-2024-001\"],\n    },\n    {\n      sql: `INSERT INTO payments (booking_id, amount, payment_method, status, transaction_id) VALUES (?, ?, ?, ?, ?)`,\n      args: [3, 5900, \"upi\", \"completed\", \"TXN-2024-003\"],\n    },\n  ]);\n}\n",[],[500,492],"database","fc2efd96-5476-11f1-bf00-ee650bb23af1","queries.ts","fc2efe36-5476-11f1-bf00-ee650bb23af1",3,["D",1779300543890],"// Database query helpers for the Hotel Management System\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\n// ===== AUTH =====\nexport async function authenticateUser(username: string, password: string) {\n  const result = await sqlite.execute({\n    sql: \"SELECT id, username, full_name, email, role FROM users WHERE username = ? AND password = ?\",\n    args: [username, password],\n  });\n  return result.rows[0] || null;\n}\n\n// ===== DASHBOARD =====\nexport async function getDashboardStats() {\n  const [totalRooms, available, booked, maintenance, totalCustomers, totalBookings, revenue, recentBookings, feedbackStats] = await Promise.all([\n    sqlite.execute(\"SELECT COUNT(*) as count FROM rooms\"),\n    sqlite.execute(\"SELECT COUNT(*) as count FROM rooms WHERE status = 'available'\"),\n    sqlite.execute(\"SELECT COUNT(*) as count FROM rooms WHERE status = 'booked'\"),\n    sqlite.execute(\"SELECT COUNT(*) as count FROM rooms WHERE status = 'maintenance'\"),\n    sqlite.execute(\"SELECT COUNT(*) as count FROM customers\"),\n    sqlite.execute(\"SELECT COUNT(*) as count FROM bookings\"),\n    sqlite.execute(\"SELECT COALESCE(SUM(grand_total), 0) as total FROM bookings WHERE payment_status = 'paid'\"),\n    sqlite.execute(\"SELECT b.*, c.full_name as customer_name, r.room_number, r.room_type FROM bookings b JOIN customers c ON b.customer_id = c.id JOIN rooms r ON b.room_id = r.id ORDER BY b.created_at DESC LIMIT 5\"),\n    sqlite.execute(\"SELECT COALESCE(AVG(rating), 0) as avg_rating, COUNT(*) as count FROM feedback\"),\n  ]);\n  return {\n    totalRooms: (totalRooms.rows[0] as any).count,\n    availableRooms: (available.rows[0] as any).count,\n    bookedRooms: (booked.rows[0] as any).count,\n    maintenanceRooms: (maintenance.rows[0] as any).count,\n    totalCustomers: (totalCustomers.rows[0] as any).count,\n    totalBookings: (totalBookings.rows[0] as any).count,\n    totalRevenue: (revenue.rows[0] as any).total,\n    recentBookings: recentBookings.rows,\n    avgRating: Number((feedbackStats.rows[0] as any).avg_rating).toFixed(1),\n    feedbackCount: (feedbackStats.rows[0] as any).count,\n  };\n}\n\n// ===== ROOMS =====\nexport async function getAllRooms() {\n  const result = await sqlite.execute(\"SELECT * FROM rooms ORDER BY room_number\");\n  return result.rows;\n}\n\nexport async function getAvailableRooms(checkIn?: string, checkOut?: string, roomType?: string) {\n  let sql = \"SELECT * FROM rooms WHERE status = 'available'\";\n  const args: any[] = [];\n  if (roomType && roomType !== \"all\") {\n    sql += \" AND room_type = ?\";\n    args.push(roomType);\n  }\n  sql += \" ORDER BY price_per_night\";\n  const result = await sqlite.execute({ sql, args });\n  return result.rows;\n}\n\nexport async function addRoom(room: any) {\n  await sqlite.execute({\n    sql: `INSERT INTO rooms (room_number, room_type, ac_type, price_per_night, status, description, max_guests, floor) \n          VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,\n    args: [room.room_number, room.room_type, room.ac_type, room.price_per_night, room.status || \"available\", room.description, room.max_guests, room.floor],\n  });\n}\n\nexport async function updateRoom(id: number, room: any) {\n  await sqlite.execute({\n    sql: `UPDATE rooms SET room_number=?, room_type=?, ac_type=?, price_per_night=?, status=?, description=?, max_guests=?, floor=? WHERE id=?`,\n    args: [room.room_number, room.room_type, room.ac_type, room.price_per_night, room.status, room.description, room.max_guests, room.floor, id],\n  });\n}\n\nexport async function deleteRoom(id: number) {\n  await sqlite.execute({ sql: \"DELETE FROM rooms WHERE id = ?\", args: [id] });\n}\n\n// ===== CUSTOMERS =====\nexport async function getAllCustomers() {\n  const result = await sqlite.execute(\"SELECT * FROM customers ORDER BY created_at DESC\");\n  return result.rows;\n}\n\nexport async function searchCustomers(query: string) {\n  const result = await sqlite.execute({\n    sql: \"SELECT * FROM customers WHERE full_name LIKE ? OR email LIKE ? OR phone LIKE ?\",\n    args: [`%${query}%`, `%${query}%`, `%${query}%`],\n  });\n  return result.rows;\n}\n\nexport async function addCustomer(c: any) {\n  const result = await sqlite.execute({\n    sql: `INSERT INTO customers (full_name, email, phone, id_type, id_number, address, city, country) VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,\n    args: [c.full_name, c.email, c.phone, c.id_type, c.id_number, c.address, c.city, c.country],\n  });\n  return result;\n}\n\nexport async function updateCustomer(id: number, c: any) {\n  await sqlite.execute({\n    sql: `UPDATE customers SET full_name=?, email=?, phone=?, id_type=?, id_number=?, address=?, city=?, country=? WHERE id=?`,\n    args: [c.full_name, c.email, c.phone, c.id_type, c.id_number, c.address, c.city, c.country, id],\n  });\n}\n\nexport async function deleteCustomer(id: number) {\n  await sqlite.execute({ sql: \"DELETE FROM customers WHERE id = ?\", args: [id] });\n}\n\n// ===== BOOKINGS =====\nexport async function getAllBookings() {\n  const result = await sqlite.execute(\n    `SELECT b.*, c.full_name as customer_name, c.phone as customer_phone, r.room_number, r.room_type \n     FROM bookings b JOIN customers c ON b.customer_id = c.id JOIN rooms r ON b.room_id = r.id \n     ORDER BY b.created_at DESC`\n  );\n  return result.rows;\n}\n\nexport async function createBooking(b: any) {\n  const ref = `BK-${Date.now().toString(36).toUpperCase()}`;\n  const nights = Math.ceil((new Date(b.check_out).getTime() - new Date(b.check_in).getTime()) / (1000 * 60 * 60 * 24));\n  \n  // Get room price\n  const roomResult = await sqlite.execute({ sql: \"SELECT price_per_night FROM rooms WHERE id = ?\", args: [b.room_id] });\n  const price = (roomResult.rows[0] as any).price_per_night;\n  const totalAmount = price * nights;\n  const taxAmount = totalAmount * 0.18; // 18% GST\n  const grandTotal = totalAmount + taxAmount;\n\n  await sqlite.batch([\n    {\n      sql: `INSERT INTO bookings (booking_ref, customer_id, room_id, check_in, check_out, guests, status, total_amount, tax_amount, grand_total, payment_status, special_requests) \n            VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,\n      args: [ref, b.customer_id, b.room_id, b.check_in, b.check_out, b.guests, \"confirmed\", totalAmount, taxAmount, grandTotal, \"pending\", b.special_requests || \"\"],\n    },\n    {\n      sql: \"UPDATE rooms SET status = 'booked' WHERE id = ?\",\n      args: [b.room_id],\n    },\n  ]);\n  return { booking_ref: ref, total_amount: totalAmount, tax_amount: taxAmount, grand_total: grandTotal, nights };\n}\n\nexport async function updateBookingStatus(id: number, status: string) {\n  const booking = await sqlite.execute({ sql: \"SELECT room_id FROM bookings WHERE id = ?\", args: [id] });\n  if (!booking.rows[0]) return;\n  \n  await sqlite.execute({ sql: \"UPDATE bookings SET status = ? WHERE id = ?\", args: [status, id] });\n  \n  if (status === \"checked_out\" || status === \"cancelled\") {\n    await sqlite.execute({ sql: \"UPDATE rooms SET status = 'available' WHERE id = ?\", args: [(booking.rows[0] as any).room_id] });\n  }\n}\n\nexport async function updatePaymentStatus(id: number, status: string, method?: string) {\n  let sql = \"UPDATE bookings SET payment_status = ?\";\n  const args: any[] = [status];\n  sql += \" WHERE id = ?\";\n  args.push(id);\n  await sqlite.execute({ sql, args });\n  \n  if (status === \"paid\") {\n    const booking = await sqlite.execute({ sql: \"SELECT id, grand_total FROM bookings WHERE id = ?\", args: [id] });\n    if (booking.rows[0]) {\n      await sqlite.execute({\n        sql: \"INSERT INTO payments (booking_id, amount, payment_method, status, transaction_id) VALUES (?, ?, ?, ?, ?)\",\n        args: [id, (booking.rows[0] as any).grand_total, method || \"cash\", \"completed\", `TXN-${Date.now().toString(36).toUpperCase()}`],\n      });\n    }\n  }\n}\n\n// ===== EMPLOYEES =====\nexport async function getAllEmployees() {\n  const result = await sqlite.execute(\"SELECT * FROM employees ORDER BY full_name\");\n  return result.rows;\n}\n\nexport async function addEmployee(e: any) {\n  await sqlite.execute({\n    sql: `INSERT INTO employees (full_name, email, phone, role, department, salary, join_date, status) VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,\n    args: [e.full_name, e.email, e.phone, e.role, e.department, e.salary, e.join_date, e.status || \"active\"],\n  });\n}\n\nexport async function updateEmployee(id: number, e: any) {\n  await sqlite.execute({\n    sql: `UPDATE employees SET full_name=?, email=?, phone=?, role=?, department=?, salary=?, join_date=?, status=? WHERE id=?`,\n    args: [e.full_name, e.email, e.phone, e.role, e.department, e.salary, e.join_date, e.status, id],\n  });\n}\n\nexport async function deleteEmployee(id: number) {\n  await sqlite.execute({ sql: \"DELETE FROM employees WHERE id = ?\", args: [id] });\n}\n\n// ===== FEEDBACK =====\nexport async function getAllFeedback() {\n  const result = await sqlite.execute(\"SELECT * FROM feedback ORDER BY created_at DESC\");\n  return result.rows;\n}\n\nexport async function addFeedback(f: any) {\n  await sqlite.execute({\n    sql: \"INSERT INTO feedback (booking_id, customer_name, email, rating, comment) VALUES (?, ?, ?, ?, ?)\",\n    args: [f.booking_id || null, f.customer_name, f.email, f.rating, f.comment],\n  });\n}\n\n// ===== PAYMENTS =====\nexport async function getAllPayments() {\n  const result = await sqlite.execute(\n    `SELECT p.*, b.booking_ref, c.full_name as customer_name \n     FROM payments p JOIN bookings b ON p.booking_id = b.id JOIN customers c ON b.customer_id = c.id \n     ORDER BY p.payment_date DESC`\n  );\n  return result.rows;\n}\n",[],[500,502],"e9b7e894-5476-11f1-8c7b-ee650bb23af1",["D",1779300512907],[358,359],[500],"0501d060-5477-11f1-bf00-ee650bb23af1","routes.ts","0501d132-5477-11f1-bf00-ee650bb23af1","6d8b275f-0e99-4398-9f97-6884fc7db2af",4,["D",1779300558691],"// API routes for the Hotel Management System\nimport { Hono } from \"npm:hono@4\";\nimport * as db from \"../database/queries.ts\";\nimport { initDatabase, seedData } from \"../database/schema.ts\";\n\nconst api = new Hono();\n\n// Initialize DB on first request\nlet dbInitialized = false;\napi.use(\"*\", async (c, next) => {\n  if (!dbInitialized) {\n    await initDatabase();\n    await seedData();\n    dbInitialized = true;\n  }\n  await next();\n});\n\n// ===== AUTH =====\napi.post(\"/auth/login\", async (c) => {\n  const { username, password } = await c.req.json();\n  const user = await db.authenticateUser(username, password);\n  if (!user) return c.json({ error: \"Invalid credentials\" }, 401);\n  return c.json({ user });\n});\n\n// ===== DASHBOARD =====\napi.get(\"/dashboard\", async (c) => {\n  const stats = await db.getDashboardStats();\n  return c.json(stats);\n});\n\n// ===== ROOMS =====\napi.get(\"/rooms\", async (c) => {\n  const rooms = await db.getAllRooms();\n  return c.json(rooms);\n});\n\napi.get(\"/rooms/available\", async (c) => {\n  const { checkIn, checkOut, type } = c.req.query();\n  const rooms = await db.getAvailableRooms(checkIn, checkOut, type);\n  return c.json(rooms);\n});\n\napi.post(\"/rooms\", async (c) => {\n  const room = await c.req.json();\n  await db.addRoom(room);\n  return c.json({ success: true });\n});\n\napi.put(\"/rooms/:id\", async (c) => {\n  const id = parseInt(c.req.param(\"id\"));\n  const room = await c.req.json();\n  await db.updateRoom(id, room);\n  return c.json({ success: true });\n});\n\napi.delete(\"/rooms/:id\", async (c) => {\n  const id = parseInt(c.req.param(\"id\"));\n  await db.deleteRoom(id);\n  return c.json({ success: true });\n});\n\n// ===== CUSTOMERS =====\napi.get(\"/customers\", async (c) => {\n  const { search } = c.req.query();\n  const customers = search ? await db.searchCustomers(search) : await db.getAllCustomers();\n  return c.json(customers);\n});\n\napi.post(\"/customers\", async (c) => {\n  const customer = await c.req.json();\n  await db.addCustomer(customer);\n  return c.json({ success: true });\n});\n\napi.put(\"/customers/:id\", async (c) => {\n  const id = parseInt(c.req.param(\"id\"));\n  const customer = await c.req.json();\n  await db.updateCustomer(id, customer);\n  return c.json({ success: true });\n});\n\napi.delete(\"/customers/:id\", async (c) => {\n  const id = parseInt(c.req.param(\"id\"));\n  await db.deleteCustomer(id);\n  return c.json({ success: true });\n});\n\n// ===== BOOKINGS =====\napi.get(\"/bookings\", async (c) => {\n  const bookings = await db.getAllBookings();\n  return c.json(bookings);\n});\n\napi.post(\"/bookings\", async (c) => {\n  const booking = await c.req.json();\n  const result = await db.createBooking(booking);\n  return c.json(result);\n});\n\napi.put(\"/bookings/:id/status\", async (c) => {\n  const id = parseInt(c.req.param(\"id\"));\n  const { status } = await c.req.json();\n  await db.updateBookingStatus(id, status);\n  return c.json({ success: true });\n});\n\napi.put(\"/bookings/:id/payment\", async (c) => {\n  const id = parseInt(c.req.param(\"id\"));\n  const { status, method } = await c.req.json();\n  await db.updatePaymentStatus(id, status, method);\n  return c.json({ success: true });\n});\n\n// ===== EMPLOYEES =====\napi.get(\"/employees\", async (c) => {\n  const employees = await db.getAllEmployees();\n  return c.json(employees);\n});\n\napi.post(\"/employees\", async (c) => {\n  const employee = await c.req.json();\n  await db.addEmployee(employee);\n  return c.json({ success: true });\n});\n\napi.put(\"/employees/:id\", async (c) => {\n  const id = parseInt(c.req.param(\"id\"));\n  const employee = await c.req.json();\n  await db.updateEmployee(id, employee);\n  return c.json({ success: true });\n});\n\napi.delete(\"/employees/:id\", async (c) => {\n  const id = parseInt(c.req.param(\"id\"));\n  await db.deleteEmployee(id);\n  return c.json({ success: true });\n});\n\n// ===== FEEDBACK =====\napi.get(\"/feedback\", async (c) => {\n  const feedback = await db.getAllFeedback();\n  return c.json(feedback);\n});\n\napi.post(\"/feedback\", async (c) => {\n  const fb = await c.req.json();\n  await db.addFeedback(fb);\n  return c.json({ success: true });\n});\n\n// ===== PAYMENTS =====\napi.get(\"/payments\", async (c) => {\n  const payments = await db.getAllPayments();\n  return c.json(payments);\n});\n\nexport default api;\n",[],[522,514],"api","0501e974-5477-11f1-bf00-ee650bb23af1",["D",1779300558691],[356],[522],["D",1779300470926],["D",1789501878689],{"_11":12,"_248":83},{"_11":12,"_243":244,"_82":83,"_31":81,"_245":246,"_247":30},{"_51":234,"_13":16,"_45":48,"_235":196,"_236":-5,"_237":-5,"_238":-5,"_239":-5,"_240":-5,"_241":14,"_242":12},"ctx",{"_65":-5,"_267":565,"_566":567,"_568":569,"_570":30,"_571":30,"_572":30,"_573":24,"_574":-5,"_575":-7,"_576":-7,"_577":26,"_578":30,"_579":30,"_580":-5,"_581":30,"_582":30,"_583":30,"_584":-5},"ENV",{"_536":537,"_538":539,"_540":16,"_541":542,"_543":544,"_545":546,"_547":548,"_549":550,"_551":552,"_553":554,"_555":556,"_557":558,"_559":560,"_561":562,"_563":564},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","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 · pages