Grand Palace Hotels & Resorts — Luxury Hotel Management

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_477":478,"_479":480},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_357":-5,"_20":358,"_22":359,"_360":361,"_362":363,"_26":364,"_24":365,"_366":-5,"_367":-5,"_368":55,"_369":370,"_371":46,"_372":-5,"_373":-5,"_374":375},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","shreyaspande","name","hotel-management-system","branchName","main","version","path","api","project",{"_34":299,"_13":14,"_47":300,"_301":-5,"_302":55,"_303":304,"_305":304,"_306":307,"_308":-5,"_309":310,"_311":69,"_312":46,"_313":-5,"_314":-5,"_315":49,"_316":317,"_318":319,"_320":321,"_322":323,"_324":-5,"_325":326,"_327":326,"_328":329,"_330":329,"_331":329,"_332":326,"_333":326,"_334":335,"_336":337,"_338":339,"_340":55},"tree",[62,63,64,65,66],"file",{"_34":58,"_13":19,"_37":40,"_39":-5,"_41":42,"_43":44,"_45":46,"_47":59,"_17":49,"_50":60,"_52":-5,"_54":55,"_56":-5,"_18":61},"contents",[33],"upstream","pull","ahead","behind","envVars",{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_18":57},"id","0501d060-5477-11f1-bf00-ee650bb23af1","routes.ts","fileId","0501d132-5477-11f1-bf00-ee650bb23af1","parentId","6d8b275f-0e99-4398-9f97-6884fc7db2af","branchId","d0b08cd4-5476-11f1-8c7b-ee650bb23af1","branchVersion",4,"latest",true,"createdAt",["D",1779300558691],0,"fileType","script","content","// 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","deleted",false,"label",[19,36],"0501e974-5477-11f1-bf00-ee650bb23af1",["D",1779300558691],"directory",[19],{"_34":58,"_13":19,"_37":40,"_39":-5,"_41":42,"_43":44,"_45":46,"_47":292,"_17":49,"_50":60,"_52":-5,"_54":55,"_56":-5,"_74":293,"_18":294},{"_34":268,"_13":269,"_37":270,"_39":-5,"_41":42,"_43":271,"_45":46,"_47":272,"_17":49,"_50":60,"_52":-5,"_54":55,"_56":-5,"_74":273,"_18":274},{"_34":86,"_13":87,"_37":88,"_39":-5,"_41":42,"_43":89,"_45":46,"_47":90,"_17":49,"_50":60,"_52":-5,"_54":55,"_56":-5,"_74":91,"_18":92},{"_34":77,"_13":78,"_37":79,"_39":-5,"_41":42,"_43":80,"_45":46,"_47":81,"_17":82,"_50":24,"_52":83,"_54":55,"_56":-5,"_74":84,"_18":85},{"_34":67,"_13":68,"_37":69,"_39":-5,"_41":42,"_43":70,"_45":46,"_47":71,"_17":49,"_50":72,"_52":73,"_54":55,"_56":-5,"_74":75,"_18":76},"84269cbc-5478-11f1-bcbe-ee650bb23af1","index.ts","84269d84-5478-11f1-bcbe-ee650bb23af1",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 = `\n\n\n \n \n Grand Palace Hotels & Resorts — Luxury Hotel Management\n \n \n \n\n\n

\n \n\n`;\n return new Response(html, { headers: { \"Content-Type\": \"text/html; charset=utf-8\" } });\n});\n\nexport default app.fetch;\n","children",[],[68],"a6651826-5478-11f1-a147-ee650bb23af1","README.md","db098730-5476-11f1-8c43-ee650bb23af1",26,["D",1779301258938],1,"# 🏨 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",[],[78],"8ea80f1e-5477-11f1-9426-ee650bb23af1","frontend","db2c79df-bf9c-4876-abb0-6b868c922d1e",5,["D",1779300789627],[93,94,95,96],[87],{"_34":235,"_13":236,"_37":237,"_39":88,"_41":42,"_43":238,"_45":46,"_47":239,"_17":49,"_50":60,"_52":-5,"_54":55,"_56":-5,"_74":240,"_18":241},{"_34":112,"_13":113,"_37":114,"_39":88,"_41":42,"_43":115,"_45":46,"_47":116,"_17":49,"_50":60,"_52":-5,"_54":55,"_56":-5,"_74":117,"_18":118},{"_34":105,"_13":106,"_37":107,"_39":88,"_41":42,"_43":89,"_45":46,"_47":108,"_17":49,"_50":51,"_52":109,"_54":55,"_56":-5,"_74":110,"_18":111},{"_34":97,"_13":98,"_37":99,"_39":88,"_41":42,"_43":100,"_45":46,"_47":101,"_17":49,"_50":51,"_52":102,"_54":55,"_56":-5,"_74":103,"_18":104},"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 = {\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",[],[87,98],"8ea7e976-5477-11f1-9426-ee650bb23af1","App.tsx","8ea7ea5c-5477-11f1-9426-ee650bb23af1",["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(\"home\");\n const [user, setUser] = useState(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

\n {notification && }\n \n

\n {page === \"admin-dashboard\" && }\n {page === \"admin-rooms\" && }\n {page === \"admin-customers\" && }\n {page === \"admin-bookings\" && }\n {page === \"admin-employees\" && }\n {page === \"admin-feedback\" && }\n {page === \"admin-payments\" && }\n

\n );\n }\n\n // Protect admin pages\n if (isAdmin && !user) {\n return (\n <>\n {notification && }\n \n \n

\n {room.room_type} Room\n

\n Experience Unparalleled Luxury\n

Exquisite Room Collection

{room.type}

Hotel Amenities

{a.title}

What Our Guests Say

We'd Love to Hear From You

Send a Message