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","deleted","label",[123],"a6651826-5478-11f1-a147-ee650bb23af1","README.md","db098730-5476-11f1-8c43-ee650bb23af1",["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",[139],"8ea80f1e-5477-11f1-9426-ee650bb23af1","frontend","db2c79df-bf9c-4876-abb0-6b868c922d1e",5,["D",1779300789627],"directory",[146],"e9b7e894-5476-11f1-8c7b-ee650bb23af1","database","582166b8-a95d-4416-826e-7b81083aac44",2,["D",1779300512907],[153],"0501e974-5477-11f1-bf00-ee650bb23af1","api","6d8b275f-0e99-4398-9f97-6884fc7db2af",4,["D",1779300558691],[159],"pulls","forks","envVars",{"_170":54,"_172":54},"connections",{"_170":54,"_171":54},"count","unfilledCount","emptyCount",{"_20":158,"_13":159,"_124":160,"_125":-5,"_126":21,"_127":161,"_129":50,"_22":392,"_29":54,"_131":150,"_133":-5,"_135":38,"_136":-5,"_202":393,"_94":394},{"_20":385,"_13":386,"_124":387,"_125":160,"_126":21,"_127":161,"_129":50,"_22":388,"_29":54,"_131":213,"_133":389,"_135":38,"_136":-5,"_202":390,"_94":391},{"_20":152,"_13":153,"_124":154,"_125":-5,"_126":21,"_127":155,"_129":50,"_22":382,"_29":54,"_131":150,"_133":-5,"_135":38,"_136":-5,"_202":383,"_94":384},{"_20":374,"_13":375,"_124":376,"_125":154,"_126":21,"_127":377,"_129":50,"_22":378,"_29":54,"_131":213,"_133":379,"_135":38,"_136":-5,"_202":380,"_94":381},{"_20":367,"_13":368,"_124":369,"_125":154,"_126":21,"_127":155,"_129":50,"_22":370,"_29":54,"_131":213,"_133":371,"_135":38,"_136":-5,"_202":372,"_94":373},{"_20":145,"_13":146,"_124":147,"_125":-5,"_126":21,"_127":148,"_129":50,"_22":364,"_29":54,"_131":150,"_133":-5,"_135":38,"_136":-5,"_202":365,"_94":366},{"_20":360,"_13":343,"_124":337,"_125":147,"_126":21,"_127":338,"_129":50,"_22":361,"_29":54,"_131":150,"_133":-5,"_135":38,"_136":-5,"_202":362,"_94":363},{"_20":352,"_13":353,"_124":354,"_125":337,"_126":21,"_127":355,"_129":50,"_22":356,"_29":54,"_131":213,"_133":357,"_135":38,"_136":-5,"_202":358,"_94":359},{"_20":344,"_13":345,"_124":346,"_125":337,"_126":21,"_127":347,"_129":50,"_22":348,"_29":54,"_131":213,"_133":349,"_135":38,"_136":-5,"_202":350,"_94":351},{"_20":334,"_13":335,"_124":336,"_125":337,"_126":21,"_127":338,"_129":50,"_22":339,"_29":54,"_131":213,"_133":340,"_135":38,"_136":-5,"_202":341,"_94":342},{"_20":330,"_13":233,"_124":227,"_125":147,"_126":21,"_127":245,"_129":50,"_22":331,"_29":54,"_131":150,"_133":-5,"_135":38,"_136":-5,"_202":332,"_94":333},{"_20":322,"_13":323,"_124":324,"_125":227,"_126":21,"_127":325,"_129":50,"_22":326,"_29":54,"_131":213,"_133":327,"_135":38,"_136":-5,"_202":328,"_94":329},{"_20":314,"_13":315,"_124":316,"_125":227,"_126":21,"_127":317,"_129":50,"_22":318,"_29":54,"_131":213,"_133":319,"_135":38,"_136":-5,"_202":320,"_94":321},{"_20":306,"_13":307,"_124":308,"_125":227,"_126":21,"_127":309,"_129":50,"_22":310,"_29":54,"_131":213,"_133":311,"_135":38,"_136":-5,"_202":312,"_94":313},{"_20":298,"_13":299,"_124":300,"_125":227,"_126":21,"_127":301,"_129":50,"_22":302,"_29":54,"_131":213,"_133":303,"_135":38,"_136":-5,"_202":304,"_94":305},{"_20":290,"_13":291,"_124":292,"_125":227,"_126":21,"_127":293,"_129":50,"_22":294,"_29":54,"_131":213,"_133":295,"_135":38,"_136":-5,"_202":296,"_94":297},{"_20":282,"_13":283,"_124":284,"_125":227,"_126":21,"_127":285,"_129":50,"_22":286,"_29":54,"_131":213,"_133":287,"_135":38,"_136":-5,"_202":288,"_94":289},{"_20":274,"_13":275,"_124":276,"_125":227,"_126":21,"_127":277,"_129":50,"_22":278,"_29":54,"_131":213,"_133":279,"_135":38,"_136":-5,"_202":280,"_94":281},{"_20":266,"_13":267,"_124":268,"_125":227,"_126":21,"_127":269,"_129":50,"_22":270,"_29":54,"_131":213,"_133":271,"_135":38,"_136":-5,"_202":272,"_94":273},{"_20":258,"_13":259,"_124":260,"_125":227,"_126":21,"_127":261,"_129":50,"_22":262,"_29":54,"_131":213,"_133":263,"_135":38,"_136":-5,"_202":264,"_94":265},{"_20":250,"_13":251,"_124":252,"_125":227,"_126":21,"_127":253,"_129":50,"_22":254,"_29":54,"_131":213,"_133":255,"_135":38,"_136":-5,"_202":256,"_94":257},{"_20":242,"_13":243,"_124":244,"_125":227,"_126":21,"_127":245,"_129":50,"_22":246,"_29":54,"_131":213,"_133":247,"_135":38,"_136":-5,"_202":248,"_94":249},{"_20":234,"_13":235,"_124":236,"_125":227,"_126":21,"_127":237,"_129":50,"_22":238,"_29":54,"_131":213,"_133":239,"_135":38,"_136":-5,"_202":240,"_94":241},{"_20":224,"_13":225,"_124":226,"_125":227,"_126":21,"_127":228,"_129":50,"_22":229,"_29":54,"_131":213,"_133":230,"_135":38,"_136":-5,"_202":231,"_94":232},{"_20":217,"_13":218,"_124":219,"_125":147,"_126":21,"_127":148,"_129":50,"_22":220,"_29":54,"_131":213,"_133":221,"_135":38,"_136":-5,"_202":222,"_94":223},{"_20":208,"_13":209,"_124":210,"_125":147,"_126":21,"_127":211,"_129":50,"_22":212,"_29":54,"_131":213,"_133":214,"_135":38,"_136":-5,"_202":215,"_94":216},{"_20":138,"_13":139,"_124":140,"_125":-5,"_126":21,"_127":30,"_129":50,"_22":205,"_29":142,"_131":106,"_133":143,"_135":38,"_136":-5,"_202":206,"_94":207},{"_20":122,"_13":123,"_124":48,"_125":-5,"_126":21,"_127":128,"_129":50,"_22":201,"_29":54,"_131":132,"_133":134,"_135":38,"_136":-5,"_202":203,"_94":204},["D",1779301201492],"children",[],[123],["D",1779301258938],[],[139],"97b313ba-5477-11f1-8ca8-ee650bb23af1","styles.ts","97b314e6-5477-11f1-8ca8-ee650bb23af1",6,["D",1779300804802],"script","// 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",[],[146,209],"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

Branches1

Branches
1