Grand Palace Hotels & Resorts — Luxury Hotel Management

\n \n\n`;\n return new Response(html, { headers: { \"Content-Type\": \"text/html; charset=utf-8\" } });\n});\n\nexport default app.fetch;\n","children",[],[76],"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",[],[86],"8ea80f1e-5477-11f1-9426-ee650bb23af1","frontend","db2c79df-bf9c-4876-abb0-6b868c922d1e",5,["D",1779300789627],[101,102,103,104],[95],{"_35":243,"_13":244,"_38":245,"_40":96,"_42":43,"_44":246,"_46":47,"_48":247,"_17":50,"_51":67,"_53":-5,"_55":56,"_57":-5,"_82":248,"_18":249},{"_35":120,"_13":121,"_38":122,"_40":96,"_42":43,"_44":123,"_46":47,"_48":124,"_17":50,"_51":67,"_53":-5,"_55":56,"_57":-5,"_82":125,"_18":126},{"_35":113,"_13":114,"_38":115,"_40":96,"_42":43,"_44":97,"_46":47,"_48":116,"_17":50,"_51":52,"_53":117,"_55":56,"_57":-5,"_82":118,"_18":119},{"_35":105,"_13":106,"_38":107,"_40":96,"_42":43,"_44":108,"_46":47,"_48":109,"_17":50,"_51":52,"_53":110,"_55":56,"_57":-5,"_82":111,"_18":112},"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",[],[95,106],"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