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",[117],"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",[133],"8ea80f1e-5477-11f1-9426-ee650bb23af1","frontend","db2c79df-bf9c-4876-abb0-6b868c922d1e",5,["D",1779300789627],"directory",[140],"e9b7e894-5476-11f1-8c7b-ee650bb23af1","database","582166b8-a95d-4416-826e-7b81083aac44",2,["D",1779300512907],[147],"0501e974-5477-11f1-bf00-ee650bb23af1","api","6d8b275f-0e99-4398-9f97-6884fc7db2af",4,["D",1779300558691],[153],"pulls","branches","forks","envVars",{"_165":42,"_167":42},"connections",{"_165":42,"_166":42},"count","unfilledCount","emptyCount",{"_18":152,"_20":153,"_118":154,"_119":-5,"_120":71,"_121":155,"_123":38,"_22":387,"_68":42,"_125":144,"_127":-5,"_129":26,"_130":-5,"_197":388,"_89":389},{"_18":380,"_20":381,"_118":382,"_119":154,"_120":71,"_121":155,"_123":38,"_22":383,"_68":42,"_125":208,"_127":384,"_129":26,"_130":-5,"_197":385,"_89":386},{"_18":146,"_20":147,"_118":148,"_119":-5,"_120":71,"_121":149,"_123":38,"_22":377,"_68":42,"_125":144,"_127":-5,"_129":26,"_130":-5,"_197":378,"_89":379},{"_18":369,"_20":370,"_118":371,"_119":148,"_120":71,"_121":372,"_123":38,"_22":373,"_68":42,"_125":208,"_127":374,"_129":26,"_130":-5,"_197":375,"_89":376},{"_18":362,"_20":363,"_118":364,"_119":148,"_120":71,"_121":149,"_123":38,"_22":365,"_68":42,"_125":208,"_127":366,"_129":26,"_130":-5,"_197":367,"_89":368},{"_18":139,"_20":140,"_118":141,"_119":-5,"_120":71,"_121":142,"_123":38,"_22":359,"_68":42,"_125":144,"_127":-5,"_129":26,"_130":-5,"_197":360,"_89":361},{"_18":355,"_20":338,"_118":332,"_119":141,"_120":71,"_121":333,"_123":38,"_22":356,"_68":42,"_125":144,"_127":-5,"_129":26,"_130":-5,"_197":357,"_89":358},{"_18":347,"_20":348,"_118":349,"_119":332,"_120":71,"_121":350,"_123":38,"_22":351,"_68":42,"_125":208,"_127":352,"_129":26,"_130":-5,"_197":353,"_89":354},{"_18":339,"_20":340,"_118":341,"_119":332,"_120":71,"_121":342,"_123":38,"_22":343,"_68":42,"_125":208,"_127":344,"_129":26,"_130":-5,"_197":345,"_89":346},{"_18":329,"_20":330,"_118":331,"_119":332,"_120":71,"_121":333,"_123":38,"_22":334,"_68":42,"_125":208,"_127":335,"_129":26,"_130":-5,"_197":336,"_89":337},{"_18":325,"_20":228,"_118":222,"_119":141,"_120":71,"_121":240,"_123":38,"_22":326,"_68":42,"_125":144,"_127":-5,"_129":26,"_130":-5,"_197":327,"_89":328},{"_18":317,"_20":318,"_118":319,"_119":222,"_120":71,"_121":320,"_123":38,"_22":321,"_68":42,"_125":208,"_127":322,"_129":26,"_130":-5,"_197":323,"_89":324},{"_18":309,"_20":310,"_118":311,"_119":222,"_120":71,"_121":312,"_123":38,"_22":313,"_68":42,"_125":208,"_127":314,"_129":26,"_130":-5,"_197":315,"_89":316},{"_18":301,"_20":302,"_118":303,"_119":222,"_120":71,"_121":304,"_123":38,"_22":305,"_68":42,"_125":208,"_127":306,"_129":26,"_130":-5,"_197":307,"_89":308},{"_18":293,"_20":294,"_118":295,"_119":222,"_120":71,"_121":296,"_123":38,"_22":297,"_68":42,"_125":208,"_127":298,"_129":26,"_130":-5,"_197":299,"_89":300},{"_18":285,"_20":286,"_118":287,"_119":222,"_120":71,"_121":288,"_123":38,"_22":289,"_68":42,"_125":208,"_127":290,"_129":26,"_130":-5,"_197":291,"_89":292},{"_18":277,"_20":278,"_118":279,"_119":222,"_120":71,"_121":280,"_123":38,"_22":281,"_68":42,"_125":208,"_127":282,"_129":26,"_130":-5,"_197":283,"_89":284},{"_18":269,"_20":270,"_118":271,"_119":222,"_120":71,"_121":272,"_123":38,"_22":273,"_68":42,"_125":208,"_127":274,"_129":26,"_130":-5,"_197":275,"_89":276},{"_18":261,"_20":262,"_118":263,"_119":222,"_120":71,"_121":264,"_123":38,"_22":265,"_68":42,"_125":208,"_127":266,"_129":26,"_130":-5,"_197":267,"_89":268},{"_18":253,"_20":254,"_118":255,"_119":222,"_120":71,"_121":256,"_123":38,"_22":257,"_68":42,"_125":208,"_127":258,"_129":26,"_130":-5,"_197":259,"_89":260},{"_18":245,"_20":246,"_118":247,"_119":222,"_120":71,"_121":248,"_123":38,"_22":249,"_68":42,"_125":208,"_127":250,"_129":26,"_130":-5,"_197":251,"_89":252},{"_18":237,"_20":238,"_118":239,"_119":222,"_120":71,"_121":240,"_123":38,"_22":241,"_68":42,"_125":208,"_127":242,"_129":26,"_130":-5,"_197":243,"_89":244},{"_18":229,"_20":230,"_118":231,"_119":222,"_120":71,"_121":232,"_123":38,"_22":233,"_68":42,"_125":208,"_127":234,"_129":26,"_130":-5,"_197":235,"_89":236},{"_18":219,"_20":220,"_118":221,"_119":222,"_120":71,"_121":223,"_123":38,"_22":224,"_68":42,"_125":208,"_127":225,"_129":26,"_130":-5,"_197":226,"_89":227},{"_18":212,"_20":213,"_118":214,"_119":141,"_120":71,"_121":142,"_123":38,"_22":215,"_68":42,"_125":208,"_127":216,"_129":26,"_130":-5,"_197":217,"_89":218},{"_18":203,"_20":204,"_118":205,"_119":141,"_120":71,"_121":206,"_123":38,"_22":207,"_68":42,"_125":208,"_127":209,"_129":26,"_130":-5,"_197":210,"_89":211},{"_18":132,"_20":133,"_118":134,"_119":-5,"_120":71,"_121":69,"_123":38,"_22":200,"_68":136,"_125":100,"_127":137,"_129":26,"_130":-5,"_197":201,"_89":202},{"_18":116,"_20":117,"_118":36,"_119":-5,"_120":71,"_121":122,"_123":38,"_22":196,"_68":42,"_125":126,"_127":128,"_129":26,"_130":-5,"_197":198,"_89":199},["D",1779301201492],"children",[],[117],["D",1779301258938],[],[133],"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",[],[140,204],"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