📋

Issues Console

Track, manage and resolve project issues, batch subtasks and enhancement requests

Total Items
27
📄
Issues
14
❗
Enhancements
13
💡
In Progress
0
🕒
Resolved
2
✔
🔍
🏢
📑
💻
🔄 Reset
# Title & Module Priority Assigned Dev Dev Status Final Status Actions
#33 Enhancement No show popup only for booking.com
No Show pop-up
Medium Subash
Pending
📝 Description

this feature is to help hotelier mark no show for booking.com booking who are not coming to hotel even after booking the room and not cancelling the room. The booking from booking .com will only get shown here with status booked. and on the checkout date day . No other status will come. only booking,com booking will come here.

💻 Attached Code Snippet
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hotel-X - Operations Management</title> <!-- Bootstrap 5 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- FontAwesome Icons --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <!-- Google Fonts (Inter) --> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"> <style> :root { --sidebar-width: 240px; --bg-main: #f4f6fa; --border-color: #eaedf2; --text-main: #2d3748; --text-muted: #718096; --primary-blue: #0084ff; --primary-blue-hover: #0066cc; --card-radius: 16px; } body { background-color: var(--bg-main); font-family: 'Inter', sans-serif; color: var(--text-main); overflow-x: hidden; } /* Sidebar Styling */ .sidebar { width: var(--sidebar-width); background: #ffffff; border-right: 1px solid var(--border-color); position: fixed; top: 0; bottom: 0; left: 0; z-index: 100; display: flex; flex-direction: column; } .sidebar-brand { padding: 16px 20px; border-bottom: 1px solid var(--border-color); } .brand-box { background: #ffffff; border: 2px solid #0084ff; border-radius: 8px; padding: 6px 12px; display: inline-flex; align-items: center; font-weight: 900; color: #0084ff; font-size: 1.1rem; letter-spacing: -0.02em; } .nav-menu { padding: 12px 0; list-style: none; margin: 0; overflow-y: auto; } .nav-item-link { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; color: #4a5568; font-size: 0.85rem; font-weight: 600; text-decoration: none; transition: all 0.2s; } .nav-item-link:hover, .nav-item-link.active { color: var(--primary-blue); background: #f0f7ff; } .nav-item-link .icon-wrap { width: 24px; display: inline-block; text-align: center; margin-right: 10px; } /* Main Content Layout */ .main-wrapper { margin-left: var(--sidebar-width); padding: 20px 28px; } /* Top Bar */ .top-navbar { display: flex; justify-content: flex-end; align-items: center; padding-bottom: 16px; } .user-profile-dropdown { display: flex; align-items: center; gap: 10px; cursor: pointer; } .avatar-circle { width: 36px; height: 36px; background: #e2e8f0; color: #4a5568; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; } /* Operations Management Header */ .ops-header-card { background: #ffffff; border-radius: var(--card-radius); padding: 16px 20px; border: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; } .hotel-icon-box { width: 44px; height: 44px; background: #6366f1; color: #ffffff; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; } /* KPI Cards */ .kpi-card { background: #ffffff; border-radius: var(--card-radius); padding: 20px; border: 1px solid var(--border-color); height: 100%; position: relative; } .kpi-label { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #a0aec0; } .kpi-value-lg { font-size: 2rem; font-weight: 800; margin-top: 8px; margin-bottom: 4px; color: #1a202c; } .kpi-icon-pill { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; position: absolute; top: 20px; right: 20px; font-size: 1.1rem; } /* Floating HIVA AI Button */ .hiva-ai-floating-btn { position: fixed; bottom: 24px; right: 24px; background: #0084ff; color: white; border-radius: 30px; padding: 12px 22px; font-weight: 800; border: none; box-shadow: 0 10px 25px rgba(0, 132, 255, 0.4); display: flex; align-items: center; gap: 10px; z-index: 1050; transition: all 0.2s; } /* MINIMIZED FLOATING NO-SHOW WIDGET */ .no-show-minimized-widget { position: fixed; bottom: 24px; right: 180px; background: #ffffff; border: 2px solid #0084ff; border-radius: 30px; padding: 8px 18px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12); display: flex; align-items: center; gap: 12px; z-index: 1040; cursor: pointer; animation: pulse-border 2s infinite; } @keyframes pulse-border { 0% { box-shadow: 0 0 0 0 rgba(0, 132, 255, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(0, 132, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 132, 255, 0); } } /* Modal Styles */ .no-show-item-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; margin-bottom: 12px; position: relative; } .booking-com-tag { background: #003580; color: #ffffff; font-weight: 800; font-size: 0.68rem; padding: 3px 8px; border-radius: 6px; } .badge-status-booked { background: #cff4fc; color: #055160; font-weight: 800; font-size: 0.68rem; padding: 3px 8px; border-radius: 6px; } </style> </head> <body> <!-- SIDEBAR NAVIGATION --> <aside class="sidebar"> <div class="sidebar-brand"> <div class="brand-box">HOTEL -X</div> <div class="text-muted extra-small mt-1" style="font-size: 0.65rem;">SAVING & EXPERIENCE MATTERS</div> </div> <ul class="nav-menu"> <li><a href="#" class="nav-item-link active"><span class="icon-wrap"><i class="fa-solid fa-house"></i></span> Dashboard</a></li> <li><a href="#" class="nav-item-link"><span class="icon-wrap"><i class="fa-solid fa-hotel"></i></span> Hotel Info <i class="fa-solid fa-chevron-down extra-small opacity-50"></i></a></li> <li><a href="#" class="nav-item-link"><span class="icon-wrap"><i class="fa-solid fa-list-check"></i></span> All Bookings <i class="fa-solid fa-chevron-down extra-small opacity-50"></i></a></li> <li><a href="#" class="nav-item-link"><span class="icon-wrap"><i class="fa-solid fa-cart-shopping"></i></span> Manage Hotel <i class="fa-solid fa-chevron-down extra-small opacity-50"></i></a></li> <li><a href="#" class="nav-item-link"><span class="icon-wrap"><i class="fa-solid fa-user-gear"></i></span> Manage Accounts <i class="fa-solid fa-chevron-down extra-small opacity-50"></i></a></li> <li><a href="#" class="nav-item-link"><span class="icon-wrap"><i class="fa-solid fa-headset"></i></span> Support <i class="fa-solid fa-chevron-down extra-small opacity-50"></i></a></li> <li><a href="#" class="nav-item-link"><span class="icon-wrap"><i class="fa-solid fa-chart-line"></i></span> CRM <i class="fa-solid fa-chevron-down extra-small opacity-50"></i></a></li> <li><a href="#" class="nav-item-link"><span class="icon-wrap"><i class="fa-solid fa-file-invoice"></i></span> Reports <i class="fa-solid fa-chevron-down extra-small opacity-50"></i></a></li> <li><a href="#" class="nav-item-link"><span class="icon-wrap"><i class="fa-solid fa-robot"></i></span> AI Sales Bot <i class="fa-solid fa-chevron-down extra-small opacity-50"></i></a></li> </ul> </aside> <!-- MAIN WRAPPER --> <main class="main-wrapper"> <!-- Top Profile Navbar --> <header class="top-navbar"> <div class="user-profile-dropdown"> <div class="avatar-circle"><i class="fa-solid fa-user"></i></div> <div class="lh-1"> <div class="fw-bold small text-dark">owner</div> <div class="text-muted extra-small" style="font-size: 0.7rem;">Hotel Admin <i class="fa-solid fa-caret-down ms-1"></i></div> </div> </div> </header> <!-- Operations Header Bar --> <div class="ops-header-card"> <div class="d-flex align-items-center gap-3"> <div class="hotel-icon-box"> <i class="fa-solid fa-building"></i> </div> <div> <h4 class="fw-bold mb-0 text-dark">Hotel-X</h4> <p class="text-muted extra-small mb-0 fw-semibold">OPERATIONS MANAGEMENT</p> </div> </div> <div class="d-flex align-items-center gap-2"> <div class="dropdown"> <button class="btn btn-sm btn-light border fw-semibold dropdown-toggle" type="button"> <i class="fa-solid fa-calendar me-1 text-muted"></i> PERIOD <strong>Today</strong> </button> </div> <button class="btn btn-sm btn-light border fw-semibold"> <i class="fa-solid fa-bell me-1 text-muted"></i> Guest Requests <span class="badge bg-danger rounded-pill">0</span> </button> <button class="btn btn-sm btn-light border fw-semibold"> <i class="fa-solid fa-rotate me-1 text-muted"></i> OTA Sync <span class="badge bg-primary rounded-pill">0+</span> </button> <button class="btn btn-sm btn-primary fw-bold px-3" style="background-color: #6366f1; border: none;"> <i class="fa-solid fa-qrcode me-1"></i> AGMS </button> </div> </div> <!-- KPI Cards Grid --> <div class="row g-3 mb-4"> <div class="col-12 col-sm-6 col-xl-3"> <div class="kpi-card"> <span class="kpi-label">VACANT ROOMS</span> <div class="kpi-value-lg">4</div> <span class="text-muted extra-small">Available on 08 Oct 2026</span> <div class="kpi-icon-pill bg-success bg-opacity-10 text-success"> <i class="fa-solid fa-door-open"></i> </div> </div> </div> <div class="col-12 col-sm-6 col-xl-3"> <div class="kpi-card"> <div class="kpi-label">CHECKIN / CHECKEDIN</div> <div class="kpi-value-lg">0 <span class="fs-6 text-muted fw-normal">(0 Occupied)</span></div> <div class="kpi-icon-pill bg-primary bg-opacity-10 text-primary"> <i class="fa-solid fa-right-to-bracket"></i> </div> </div> </div> <div class="col-12 col-sm-6 col-xl-3"> <div class="kpi-card"> <div class="kpi-label">REVENUE (PERIOD)</div> <div class="kpi-value-lg">₹ 0</div> <span class="text-muted extra-small">Payments received</span> <div class="kpi-icon-pill bg-warning bg-opacity-10 text-warning"> <i class="fa-solid fa-indian-rupee-sign"></i> </div> </div> </div> <div class="col-12 col-sm-6 col-xl-3"> <div class="kpi-card"> <div class="kpi-label">TOTAL BOOKINGS</div> <div class="kpi-value-lg">0</div> <span class="text-muted extra-small">Across all channels</span> <div class="kpi-icon-pill bg-purple bg-opacity-10 text-purple" style="background:#f3e8ff; color:#9333ea;"> <i class="fa-solid fa-calendar-check"></i> </div> </div> </div> </div> </main> <!-- FLOATING HIVA AI BUTTON --> <button class="hiva-ai-floating-btn"> <i class="fa-solid fa-robot"></i> HIVA AI </button> <!-- MINIMIZED NO-SHOW FLOATING WIDGET --> <div id="noShowMinimizedWidget" class="no-show-minimized-widget" onclick="maximizeNoShowModal()"> <div class="bg-danger text-white rounded-circle p-2 d-flex align-items-center justify-content-center" style="width:32px; height:32px;"> <i class="fa-solid fa-user-slash fs-6"></i> </div> <div> <div class="fw-extrabold text-danger extra-small" id="widgetPendingCount">2 Booking.com No-Shows</div> <div class="text-muted extra-small" id="widgetLostAmount" style="font-size: 0.68rem;">₹4,850.00 At Risk</div> </div> <span class="badge bg-primary rounded-pill ms-2 extra-small">Review & Mark</span> </div> <!-- POPUP MODAL: BOOKING.COM AUTO NO-SHOW AUDIT --> <div class="modal fade" id="noShowAutoModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered modal-lg"> <div class="modal-content rounded-4 border-0 shadow-lg"> <div class="modal-header bg-danger bg-opacity-10 border-bottom-0 pb-2"> <div class="d-flex align-items-center gap-2"> <div class="bg-danger text-white p-2 rounded-3"> <i class="fa-solid fa-triangle-exclamation"></i> </div> <div> <h5 class="modal-title fw-bold text-danger">Pending Booking.com No-Shows Detected</h5> <p class="text-muted extra-small mb-0">The check-in time for the following Booking.com reservations has passed while still in "Booked" status.</p> </div> </div> <button type="button" class="btn-close" onclick="minimizeNoShowModal()" aria-label="Minimize"></button> </div> <div class="modal-body py-3"> <div class="alert alert-warning py-2 px-3 small border-warning-subtle mb-3 d-flex justify-content-between align-items-center"> <span><i class="fa-solid fa-circle-info me-1"></i> Total Revenue At Risk: <strong class="text-danger fs-6" id="totalAtRiskText">₹4,850.00</strong></span> <span class="badge bg-warning text-dark">Requires Immediate Action</span> </div> <!-- NO SHOW LIST CONTAINER --> <div id="noShowListContainer"> <!-- Guest Item 1 --> <div class="no-show-item-card" id="card-bk-101"> <div class="d-flex justify-content-between align-items-start mb-2"> <div> <span class="booking-com-tag me-2">Booking.com</span> <span class="badge-status-booked">Status: Booked</span> <h6 class="fw-bold mb-0 mt-2 text-dark">Aakash Verma <span class="text-muted small fw-normal">(#BK-90812)</span></h6> </div> <div class="text-end"> <span class="text-muted extra-small d-block">Booking Amount</span> <strong class="text-danger fs-5">₹2,450.00</strong> </div> </div> <div class="row g-2 extra-small text-muted mb-3 bg-white p-2 rounded-2 border"> <div class="col-6 col-md-3"> <span class="d-block text-secondary fw-semibold">Booked Date:</span> <strong class="text-dark">06 Oct 2026</strong> </div> <div class="col-6 col-md-3"> <span class="d-block text-secondary fw-semibold">Check-In Date:</span> <strong class="text-dark">07 Oct, 12:00 PM</strong> </div> <div class="col-6 col-md-3"> <span class="d-block text-secondary fw-semibold">Check-Out Date:</span> <strong class="text-dark">08 Oct, 11:00 AM</strong> </div> <div class="col-6 col-md-3"> <span class="d-block text-secondary fw-semibold">Payment Method:</span> <strong class="text-dark">Hotel Collect</strong> </div> </div> <div class="d-flex justify-content-end gap-2"> <button class="btn btn-sm btn-outline-secondary fw-bold" onclick="deferBooking('bk-101')">Defer / Keep Booked</button> <button class="btn btn-sm btn-danger fw-bold" onclick="markNoShow('bk-101', 2450)"><i class="fa-solid fa-user-slash me-1"></i> Mark No-Show</button> </div> </div> <!-- Guest Item 2 --> <div class="no-show-item-card" id="card-bk-102"> <div class="d-flex justify-content-between align-items-start mb-2"> <div> <span class="booking-com-tag me-2">Booking.com</span> <span class="badge-status-booked">Status: Booked</span> <h6 class="fw-bold mb-0 mt-2 text-dark">Rohan Mukherjee <span class="text-muted small fw-normal">(#BK-90845)</span></h6> </div> <div class="text-end"> <span class="text-muted extra-small d-block">Booking Amount</span> <strong class="text-danger fs-5">₹2,400.00</strong> </div> </div> <div class="row g-2 extra-small text-muted mb-3 bg-white p-2 rounded-2 border"> <div class="col-6 col-md-3"> <span class="d-block text-secondary fw-semibold">Booked Date:</span> <strong class="text-dark">07 Oct 2026</strong> </div> <div class="col-6 col-md-3"> <span class="d-block text-secondary fw-semibold">Check-In Date:</span> <strong class="text-dark">08 Oct, 12:00 PM</strong> </div> <div class="col-6 col-md-3"> <span class="d-block text-secondary fw-semibold">Check-Out Date:</span> <strong class="text-dark">09 Oct, 11:00 AM</strong> </div> <div class="col-6 col-md-3"> <span class="d-block text-secondary fw-semibold">Payment Method:</span> <strong class="text-dark">Hotel Collect</strong> </div> </div> <div class="d-flex justify-content-end gap-2"> <button class="btn btn-sm btn-outline-secondary fw-bold" onclick="deferBooking('bk-102')">Defer / Keep Booked</button> <button class="btn btn-sm btn-danger fw-bold" onclick="markNoShow('bk-102', 2400)"><i class="fa-solid fa-user-slash me-1"></i> Mark No-Show</button> </div> </div> </div> </div> <div class="modal-footer border-top-0 pt-0 justify-content-between"> <button type="button" class="btn btn-light btn-sm text-muted" onclick="minimizeNoShowModal()">Minimize to Floating Widget</button> <button type="button" class="btn btn-primary btn-sm fw-bold" onclick="markAllNoShow()"><i class="fa-solid fa-check-double me-1"></i> Mark All as No-Show</button> </div> </div> </div> </div> <!-- Bootstrap 5 JavaScript Bundle --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> <script> let noShowModalInstance; let pendingCount = 2; let totalLostAmount = 4850; document.addEventListener('DOMContentLoaded', function () { noShowModalInstance = new bootstrap.Modal(document.getElementById('noShowAutoModal')); // Auto-trigger Modal on page load setTimeout(() => { noShowModalInstance.show(); }, 600); }); function minimizeNoShowModal() { noShowModalInstance.hide(); document.getElementById('noShowMinimizedWidget').style.display = 'flex'; } function maximizeNoShowModal() { if(pendingCount > 0) { noShowModalInstance.show(); } } function markNoShow(id, amount) { const card = document.getElementById('card-' + id); if(card) { card.remove(); pendingCount--; totalLostAmount -= amount; updateWidgetSummary(); alert('Booking marked as No-Show. Status updated on Booking.com!'); } } function deferBooking(id) { const card = document.getElementById('card-' + id); if(card) { card.style.opacity = '0.5'; alert('Booking deferred for manual review later.'); } } function markAllNoShow() { document.getElementById('noShowListContainer').innerHTML = ` <div class="text-center py-4 text-success fw-bold"> <i class="fa-solid fa-circle-check fs-1 d-block mb-2"></i> All pending Booking.com reservations processed as No-Show! </div> `; pendingCount = 0; totalLostAmount = 0; updateWidgetSummary(); setTimeout(() => { noShowModalInstance.hide(); }, 1200); } function updateWidgetSummary() { document.getElementById('widgetPendingCount').innerText = pendingCount + ' Booking.com No-Shows'; document.getElementById('widgetLostAmount').innerText = '₹' + totalLostAmount.toLocaleString('en-IN') + ' At Risk'; document.getElementById('totalAtRiskText').innerText = '₹' + totalLostAmount.toLocaleString('en-IN'); if (pendingCount <= 0) { document.getElementById('noShowMinimizedWidget').style.display = 'none'; } } </script> </body> </html>
🖼️ Quick Attached Media
Loading attached media...
#31 Issue Payment Reports, Revenue Reports , Business Report
reports
0 of 1 Subtasks Done (0%)
Medium
Pending
#32 Issue Payment report Filter is not working Check and fix it (Subtask) Medium Subash
Pending
📝 Subtask Description

No subtask description provided.

🖼️ Attached Media
Loading media...
📝 Description

Reports needs to be checked

🖼️ Quick Attached Media
Loading attached media...
#28 Enhancement Booking Engine
Booking Engine
0 of 1 Subtasks Done (0%)
Medium Subash
Pending
#29 Enhancement offers needs copy symbols (Subtask) Medium Subash
Pending
📝 Subtask Description

No subtask description provided.

🖼️ Attached Media
Loading media...
📝 Description

Need to make the header like this

💻 Attached Code Snippet
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Shrestha Getaway - Dual Row Header & Amenities</title> <!-- Bootstrap 5 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- FontAwesome 6 Icons --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"> <!-- Google Fonts --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap" rel="stylesheet"> <style> :root { --brand-navy: #0F172A; --brand-primary: #1E3A8A; --brand-blue: #2563EB; --brand-gold: #D97706; --brand-crimson: #E11D48; --brand-emerald: #059669; --neutral-dark: #1E293B; --neutral-muted: #64748B; --neutral-light: #F8FAFC; --border-color: #E2E8F0; } body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #F1F5F9; color: var(--neutral-dark); overflow-x: hidden; } /* Sticky Header Shell */ .sticky-header-container { position: sticky; top: 0; z-index: 1040; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(12px); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); border-bottom: 1px solid var(--border-color); } /* Navbar Brand */ .navbar-brand-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; } .brand-icon-box { width: 38px; height: 38px; background: linear-gradient(135deg, var(--brand-primary), var(--brand-navy)); color: #F59E0B; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; box-shadow: 0 2px 8px rgba(30, 58, 138, 0.25); } .brand-title { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.15rem; color: var(--brand-navy); line-height: 1.1; margin: 0; } .brand-subtitle { font-size: 0.7rem; letter-spacing: 0.5px; color: var(--brand-gold); font-weight: 700; margin: 0; } /* Navigation Links */ .nav-link-custom { font-weight: 600; font-size: 0.88rem; color: #334155 !important; padding: 6px 14px !important; border-radius: 6px; transition: all 0.2s ease; } .nav-link-custom:hover, .nav-link-custom.active { color: var(--brand-primary) !important; background-color: rgba(30, 58, 138, 0.06); } .btn-profile-circle { width: 36px; height: 36px; border-radius: 50%; background-color: #F8FAFC; color: var(--brand-primary); border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; text-decoration: none; } .btn-profile-circle:hover { background-color: var(--brand-primary); color: #FFFFFF; border-color: var(--brand-primary); } /* Dual Row Perks Bar */ .dual-row-perks-bar { background-color: #FFFFFF; border-top: 1px solid #F1F5F9; padding: 6px 0; } .perks-row { display: flex; align-items: center; gap: 10px; } .row-label { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; width: 105px; flex-shrink: 0; padding: 3px 8px; border-radius: 6px; } .row-label-offers { background-color: #FFF1F2; color: var(--brand-crimson); border: 1px solid #FFE4E6; } .row-label-amenities { background-color: #F0FDF4; color: var(--brand-emerald); border: 1px solid #DCFCE7; } /* Scroll track area */ .scroll-track { display: flex; align-items: center; gap: 8px; overflow-x: auto; scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none; padding: 2px 0; } .scroll-track::-webkit-scrollbar { display: none; } /* Row 1: Offer Card Pill */ .offer-card-pill { display: inline-flex; align-items: center; gap: 8px; background: #FFFFFF; border: 1px solid #FECDD3; border-radius: 30px; padding: 3px 6px 3px 10px; font-size: 0.78rem; white-space: nowrap; transition: all 0.2s ease; box-shadow: 0 1px 3px rgba(225, 29, 72, 0.05); } .offer-card-pill:hover { border-color: var(--brand-crimson); transform: translateY(-1px); box-shadow: 0 3px 8px rgba(225, 29, 72, 0.12); } .offer-discount-tag { background: #FFE4E6; color: var(--brand-crimson); font-weight: 800; font-size: 0.68rem; padding: 2px 7px; border-radius: 12px; } .offer-title-text { font-weight: 600; color: var(--neutral-dark); } .btn-copy-code { background: var(--brand-crimson); color: #FFFFFF; border: none; padding: 3px 9px; border-radius: 20px; font-size: 0.68rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 4px; transition: all 0.15 ease; } .btn-copy-code:hover { background: #BE123C; } /* Row 2: Compact Amenity Chips (Icon Heavy, No Extra Badges) */ .amenity-icon-chip { display: inline-flex; align-items: center; gap: 6px; background: #F8FAFC; border: 1px solid var(--border-color); border-radius: 20px; padding: 4px 11px; font-size: 0.76rem; font-weight: 600; color: #334155; white-space: nowrap; cursor: pointer; transition: all 0.2s ease; } .amenity-icon-chip:hover { background: #FFFFFF; border-color: var(--brand-primary); color: var(--brand-primary); transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.06); } .amenity-icon-chip i { font-size: 0.82rem; color: var(--brand-primary); transition: transform 0.2s ease; } .amenity-icon-chip:hover i { transform: scale(1.15); } /* Scroll Arrow Buttons */ .scroll-arrow-btn { width: 22px; height: 22px; border-radius: 50%; background: #FFFFFF; border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; font-size: 0.62rem; color: var(--neutral-muted); cursor: pointer; flex-shrink: 0; transition: all 0.2s ease; } .scroll-arrow-btn:hover { background: var(--brand-navy); color: #FFFFFF; border-color: var(--brand-navy); } /* Toast Popup for Copying */ .custom-toast { position: fixed; bottom: 24px; right: 24px; z-index: 1080; background: var(--brand-navy); color: #FFFFFF; padding: 10px 18px; border-radius: 10px; font-size: 0.85rem; font-weight: 600; box-shadow: 0 10px 25px rgba(0,0,0,0.2); display: flex; align-items: center; gap: 10px; opacity: 0; transform: translateY(20px); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; } .custom-toast.show { opacity: 1; transform: translateY(0); } /* Background Hero Showcase */ .hero-backdrop { background: linear-gradient(rgba(15, 23, 42, 0.65), rgba(15, 23, 42, 0.8)), url('https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&w=1920&q=80'); background-size: cover; background-position: center; min-height: 520px; display: flex; align-items: center; color: #FFFFFF; } .quick-book-card { background: rgba(255, 255, 255, 0.98); border-radius: 14px; padding: 22px; color: var(--neutral-dark); box-shadow: 0 15px 35px rgba(0,0,0,0.25); } </style> </head> <body> <header class="sticky-header-container"> <!-- Main Navbar --> <nav class="navbar navbar-expand-lg py-2"> <div class="container-fluid px-lg-4"> <!-- Branding --> <a class="navbar-brand-logo" href="#"> <div class="brand-icon-box"> <i class="fa-solid fa-hotel"></i> </div> <div> <h1 class="brand-title">Radha Nivas Residency</h1> <p class="brand-subtitle"><i class="fa-solid fa-crown me-1"></i> (Unit of Shrestha Getaway)</p> </div> </a> <!-- Mobile Menu Toggler --> <button class="navbar-toggler border-0 shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar"> <span class="navbar-toggler-icon"></span> </button> <!-- Nav Items --> <div class="collapse navbar-collapse" id="mainNavbar"> <ul class="navbar-nav ms-auto mb-2 mb-lg-0 align-items-lg-center gap-1"> <li class="nav-item"> <a class="nav-link nav-link-custom active" href="#"><i class="fa-solid fa-house me-1 opacity-75"></i> Home</a> </li> <li class="nav-item dropdown"> <a class="nav-link nav-link-custom dropdown-toggle" href="#" id="roomsDrop" role="button" data-bs-toggle="dropdown"> Rooms </a> <ul class="dropdown-menu dropdown-menu-end border-0 shadow-sm rounded-3"> <li><a class="dropdown-item py-2" href="#"><i class="fa-solid fa-bed me-2 text-muted"></i> Executive Suite</a></li> <li><a class="dropdown-item py-2" href="#"><i class="fa-solid fa-crown me-2 text-muted"></i> Presidential Suite</a></li> <li><a class="dropdown-item py-2" href="#"><i class="fa-solid fa-people-roof me-2 text-muted"></i> Family Villa</a></li> </ul> </li> <li class="nav-item dropdown"> <a class="nav-link nav-link-custom dropdown-toggle" href="#" id="hotelDrop" role="button" data-bs-toggle="dropdown"> Hotel </a> <ul class="dropdown-menu dropdown-menu-end border-0 shadow-sm rounded-3"> <li><a class="dropdown-item py-2" href="#">About Us</a></li> <li><a class="dropdown-item py-2" href="#">Dining & Restaurant</a></li> <li><a class="dropdown-item py-2" href="#">Convention Hall</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link nav-link-custom" href="#">Packages</a> </li> <li class="nav-item"> <a class="nav-link nav-link-custom" href="#" data-bs-toggle="modal" data-bs-target="#allPerksModal"> Offers <span class="badge bg-danger ms-1" style="font-size: 0.65rem;">NEW</span> </a> </li> <li class="nav-item ms-lg-2 mt-2 mt-lg-0 dropdown"> <a href="#" class="btn-profile-circle" id="userAccountDrop" data-bs-toggle="dropdown" title="Account Settings"> <i class="fa-regular fa-user"></i> </a> <ul class="dropdown-menu dropdown-menu-end border-0 shadow-sm rounded-3"> <li><a class="dropdown-item py-2" href="#"><i class="fa-solid fa-bookmark me-2 text-muted"></i> My Bookings</a></li> <li><a class="dropdown-item py-2" href="#"><i class="fa-solid fa-sliders me-2 text-muted"></i> Profile Settings</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item py-2 text-danger" href="#"><i class="fa-solid fa-arrow-right-from-bracket me-2"></i> Sign Out</a></li> </ul> </li> </ul> </div> </div> </nav> <!-- Dual Row Perks Ribbon --> <div class="dual-row-perks-bar"> <div class="container-fluid px-lg-4"> <div class="d-flex flex-column gap-1"> <!-- ROW 1: OFFERS WITH COPY CODE BUTTON --> <div class="perks-row"> <div class="row-label row-label-offers"> <i class="fa-solid fa-tags"></i> Offers </div> <button class="scroll-arrow-btn d-none d-sm-flex" onclick="scrollTrack('offersTrack', -200)"> <i class="fa-solid fa-chevron-left"></i> </button> <div class="scroll-track flex-grow-1" id="offersTrack"> <!-- Offer Item 1 --> <div class="offer-card-pill"> <span class="offer-discount-tag">20% OFF</span> <span class="offer-title-text">Dussehra Festive Offer</span> <button class="btn-copy-code" onclick="copyCouponCode('OFFER20', 'Dussehra Festive Offer')"> <i class="fa-regular fa-copy"></i> OFFER20 </button> </div> <!-- Offer Item 2 --> <div class="offer-card-pill"> <span class="offer-discount-tag">15% OFF</span> <span class="offer-title-text">Early Bird Advance Booking</span> <button class="btn-copy-code" onclick="copyCouponCode('EARLYBIRD15', 'Early Bird Offer')"> <i class="fa-regular fa-copy"></i> EARLY15 </button> </div> <!-- Offer Item 3 --> <div class="offer-card-pill"> <span class="offer-discount-tag">30% OFF</span> <span class="offer-title-text">Weekend Extended Stay</span> <button class="btn-copy-code" onclick="copyCouponCode('WEEKEND30', 'Weekend Deal')"> <i class="fa-regular fa-copy"></i> WEEKEND30 </button> </div> <!-- Offer Item 4 --> <div class="offer-card-pill"> <span class="offer-discount-tag">FLAT ₹1000</span> <span class="offer-title-text">Suite Delight Package</span> <button class="btn-copy-code" onclick="copyCouponCode('SUITE1000', 'Suite Discount')"> <i class="fa-regular fa-copy"></i> SUITE1000 </button> </div> <!-- Offer Item 5 --> <div class="offer-card-pill"> <span class="offer-discount-tag">10% OFF</span> <span class="offer-title-text">Honeymoon Romantic Package</span> <button class="btn-copy-code" onclick="copyCouponCode('ROMANCE10', 'Honeymoon Package')"> <i class="fa-regular fa-copy"></i> ROMANCE10 </button> </div> </div> <button class="scroll-arrow-btn d-none d-sm-flex" onclick="scrollTrack('offersTrack', 200)"> <i class="fa-solid fa-chevron-right"></i> </button> </div> <!-- ROW 2: AMENITIES (ULTRA-COMPACT ICONS, NO 'INCLUDED/FREE' TAGS) --> <div class="perks-row"> <div class="row-label row-label-amenities"> <i class="fa-solid fa-sparkles"></i> Amenities </div> <button class="scroll-arrow-btn d-none d-sm-flex" onclick="scrollTrack('amenitiesTrack', -200)"> <i class="fa-solid fa-chevron-left"></i> </button> <div class="scroll-track flex-grow-1" id="amenitiesTrack"> <div class="amenity-icon-chip" data-bs-toggle="tooltip" title="Therapeutic Spa & Full Body Massage Services"> <i class="fa-solid fa-spa"></i> Massage & Spa </div> <div class="amenity-icon-chip" data-bs-toggle="tooltip" title="Private Temperature Controlled Jacuzzi"> <i class="fa-solid fa-hot-tub-person"></i> Hot Tub / Jacuzzi </div> <div class="amenity-icon-chip" data-bs-toggle="tooltip" title="Rooftop Infinity Swimming Pool with City Views"> <i class="fa-solid fa-person-swimming"></i> Infinity Pool </div> <div class="amenity-icon-chip" data-bs-toggle="tooltip" title="Ultra High Speed 500Mbps Wi-Fi Coverage"> <i class="fa-solid fa-wifi"></i> High-Speed Wi-Fi </div> <div class="amenity-icon-chip" data-bs-toggle="tooltip" title="Gourmet Breakfast Buffet Spread"> <i class="fa-solid fa-utensils"></i> Multi-Cuisine Dining </div> <div class="amenity-icon-chip" data-bs-toggle="tooltip" title="24/7 Fully Equipped Fitness Center & Gym"> <i class="fa-solid fa-dumbbell"></i> Fitness Gym </div> <div class="amenity-icon-chip" data-bs-toggle="tooltip" title="Airport & Railway Station Pickup / Drop Shuttle"> <i class="fa-solid fa-van-shuttle"></i> Airport Transit </div> <div class="amenity-icon-chip" data-bs-toggle="tooltip" title="Secure Valet Parking with EV Charging Station"> <i class="fa-solid fa-square-parking"></i> Valet Parking </div> <div class="amenity-icon-chip" data-bs-toggle="tooltip" title="Fast Electric Vehicle Charging Station"> <i class="fa-solid fa-charging-station"></i> EV Charger </div> <div class="amenity-icon-chip" data-bs-toggle="tooltip" title="Grand Convention Center & Banquet Hall"> <i class="fa-solid fa-champagne-glasses"></i> Convention Hall </div> <div class="amenity-icon-chip" data-bs-toggle="tooltip" title="Centralized Air Conditioning & Climate Control"> <i class="fa-solid fa-snowflake"></i> Central AC </div> <div class="amenity-icon-chip" data-bs-toggle="tooltip" title="Pet Friendly Rooms & Play Area"> <i class="fa-solid fa-dog"></i> Pet Friendly </div> <div class="amenity-icon-chip" data-bs-toggle="tooltip" title="Cocktail Lounge & Rooftop Bar"> <i class="fa-solid fa-glass-water"></i> Lounge & Bar </div> </div> <button class="scroll-arrow-btn d-none d-sm-flex" onclick="scrollTrack('amenitiesTrack', 200)"> <i class="fa-solid fa-chevron-right"></i> </button> </div> </div> </div> </div> </header> <main> <section class="hero-backdrop"> <div class="container py-5"> <div class="row align-items-center gy-4"> <div class="col-lg-7 text-white"> <span class="badge bg-warning text-dark fw-bold mb-3 px-3 py-2 rounded-pill"> <i class="fa-solid fa-star me-1"></i> Luxury Getaway Destination </span> <h2 class="display-4 fw-bold mb-3">Where Hospitality Meets Elegance</h2> <p class="lead mb-4 text-light opacity-90">Enjoy premium suites, spa treatments, convention halls, and exclusive discounts crafted for your comfort.</p> <div class="d-flex gap-3 flex-wrap"> <a href="#" class="btn btn-warning btn-lg fw-bold rounded-3 px-4 text-dark shadow-sm">Explore Rooms</a> <a href="#" class="btn btn-outline-light btn-lg fw-bold rounded-3 px-4">Virtual Tour</a> </div> </div> <!-- Quick Search Box --> <div class="col-lg-5"> <div class="quick-book-card"> <h5 class="fw-bold mb-3"><i class="fa-solid fa-calendar-check text-primary me-2"></i>Book Your Stay</h5> <form onsubmit="event.preventDefault();"> <div class="mb-3"> <label class="form-label text-muted small fw-bold mb-1">CHECK-IN & CHECK-OUT</label> <input type="text" class="form-control" value="Oct 12, 2026 - Oct 15, 2026"> </div> <div class="row g-2 mb-3"> <div class="col-6"> <label class="form-label text-muted small fw-bold mb-1">GUESTS</label> <select class="form-select"> <option>2 Adults, 1 Room</option> <option>1 Adult, 1 Room</option> </select> </div> <div class="col-6"> <label class="form-label text-muted small fw-bold mb-1">APPLIED COUPON</label> <input type="text" id="appliedCouponInput" class="form-control fw-bold text-success" placeholder="OFFER20" value="OFFER20"> </div> </div> <button type="submit" class="btn btn-primary w-100 py-2.5 fw-bold rounded-3"> Check Availability </button> </form> </div> </div> </div> </div> </section> </main> <!-- Copy Coupon Toast Notification --> <div class="custom-toast" id="copyToast"> <i class="fa-solid fa-circle-check text-success fa-lg"></i> <div> <div id="toastMessage">Coupon code copied!</div> <small class="text-white-50" style="font-size: 0.7rem;">Code automatically populated in booking box</small> </div> </div> <!-- Bootstrap 5 JS Bundle --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> <script> // Initialize Bootstrap Tooltips for Amenities document.addEventListener('DOMContentLoaded', function () { var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')); var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl); }); }); // 1. Horizontal Scroll Control function scrollTrack(trackId, amount) { const track = document.getElementById(trackId); if (track) { track.scrollBy({ left: amount, behavior: 'smooth' }); } } // 2. Interactive 1-Click Offer Code Copying function copyCouponCode(code, offerName) { // Copy code using document.execCommand fallback const tempInput = document.createElement('input'); tempInput.value = code; document.body.appendChild(tempInput); tempInput.select(); document.execCommand('copy'); document.body.removeChild(tempInput); // Populate booking coupon input const couponInput = document.getElementById('appliedCouponInput'); if (couponInput) { couponInput.value = code; } // Trigger Toast Feedback const toast = document.getElementById('copyToast'); const toastMsg = document.getElementById('toastMessage'); toastMsg.innerHTML = `Copied <strong>${code}</strong> for ${offerName}!`; toast.classList.add('show'); setTimeout(() => { toast.classList.remove('show'); }, 3000); } </script> </body> </html>
🖼️ Quick Attached Media
Loading attached media...
#27 Enhancement All New Enhancement
Enhancement
High Subash
Pending
📝 Description

Dynamic Pricing OTAS Hiva AI AGMS Daily Reports Admin Panel Aiosell Advance Integrations

🖼️ Quick Attached Media
Loading attached media...
#26 Enhancement Advance Security Deposit
Advance Security Deposit
Medium Subash
Pending
📝 Description

Advance Security Derposit Funcationality : Hotelier can able to receive advance security amount from the customer which can be used for payment of extra services and food. if not used that can be refunded. or the balance amount can be refunded.

💻 Attached Code Snippet
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AGMS - Multi-Room Booking Tracker</title> <!-- Bootstrap 5 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- FontAwesome Icons --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <!-- Google Font (Inter) --> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"> <style> :root { --agms-bg: #f5f7fa; --agms-card-bg: #ffffff; --agms-border: #e2e8f0; --agms-text: #0f172a; --agms-muted: #64748b; --agms-primary: #0084ff; --agms-danger-bg: #fee2e2; --agms-danger-text: #ef4444; --agms-success: #22c55e; --agms-warning-bg: #fffbebf2; --agms-warning-border: #fef08a; --agms-warning-text: #b45309; } body { background-color: var(--agms-bg); font-family: 'Inter', sans-serif; color: var(--agms-text); padding-bottom: 80px; } /* Top Header Navigation Styling */ .top-agms-header { background: #ffffff; border-radius: 16px; border: 1px solid var(--agms-border); padding: 16px 24px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03); margin-bottom: 24px; } .bell-icon-box { width: 42px; height: 42px; background: #fef3c7; color: #d97706; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; } .agms-pill-btn { background: #e0f2fe; color: #0284c7; font-weight: 700; border-radius: 30px; padding: 6px 16px; font-size: 0.85rem; border: none; display: flex; align-items: center; gap: 8px; } .live-badge { background: #dcfce7; color: #16a34a; font-weight: 700; font-size: 0.8rem; padding: 6px 14px; border-radius: 30px; display: flex; align-items: center; gap: 6px; } .live-dot { width: 8px; height: 8px; background-color: #22c55e; border-radius: 50%; display: inline-block; } /* Booking Cards Grid */ .booking-card { background: #ffffff; border-radius: 18px; border: 1px solid var(--agms-border); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04); overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; height: 100%; display: flex; flex-direction: column; } .booking-card:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.07); } .card-top-bar { height: 4px; width: 100%; } .bar-red { background-color: #ef4444; } .bar-green { background-color: #22c55e; } .card-header-info { padding: 16px 18px 8px 18px; display: flex; justify-content: space-between; align-items: center; } .booking-id { font-size: 1.05rem; font-weight: 800; color: #0284c7; } .room-count-badge { background: #f1f5f9; color: #475569; font-size: 0.75rem; font-weight: 700; padding: 3px 10px; border-radius: 12px; margin-left: 6px; } .source-badge-direct { color: #0284c7; font-weight: 800; font-size: 0.85rem; } /* Guest Information Area */ .guest-avatar { width: 44px; height: 44px; background: #2563eb; color: white; font-weight: 800; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; } .btn-view-eye { border: 1px solid #0084ff; color: #0084ff; background: #ffffff; border-radius: 8px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .btn-view-eye:hover { background: #0084ff; color: #ffffff; } .date-box { background: #f8fafc; border-radius: 12px; padding: 10px 14px; margin: 12px 18px; } .date-label { font-size: 0.68rem; font-weight: 800; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; } .date-val { font-size: 0.82rem; font-weight: 700; color: #1e293b; } /* Assigned Rooms Section */ .section-sub-title { font-size: 0.68rem; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; } .assigned-rooms-box { background: #f8fafc; border-radius: 12px; padding: 12px 14px; margin: 0 18px 12px 18px; } .room-tag { background: #e2e8f0; color: #334155; font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 6px; } /* Booking Total Due Badge */ .due-box { background: #f8fafc; border-radius: 12px; padding: 12px 14px; margin: 0 18px 12px 18px; display: flex; justify-content: space-between; align-items: center; } .due-amount-pill { background: var(--agms-danger-bg); color: var(--agms-danger-text); font-size: 1.1rem; font-weight: 800; padding: 4px 14px; border-radius: 10px; } /* ADVANCE SECURITY DEPOSIT MODULE (CARD INTEGRATION) */ .security-deposit-box { background: var(--agms-warning-bg); border: 1px solid var(--agms-warning-border); border-radius: 14px; padding: 12px 14px; margin: 0 18px 12px 18px; } .sec-title { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; color: var(--agms-warning-text); letter-spacing: 0.04em; } .sec-flag-not-taken { background: #fee2e2; color: #dc2626; font-weight: 800; font-size: 0.68rem; padding: 2px 8px; border-radius: 6px; } .sec-flag-collected { background: #dcfce7; color: #15803d; font-weight: 800; font-size: 0.68rem; padding: 2px 8px; border-radius: 6px; } .sec-value-zero { font-size: 1.25rem; font-weight: 800; color: #64748b; } .sec-value-net { font-size: 1.25rem; font-weight: 800; color: #15803d; } .btn-collect-sec { background: #0084ff; color: #ffffff; border: none; font-weight: 700; font-size: 0.75rem; padding: 6px 12px; border-radius: 8px; transition: background 0.2s; } .btn-collect-sec:hover { background: #0066cc; color: white; } .btn-charge-item { background: #ffffff; color: #d97706; border: 1px solid #fde68a; font-weight: 700; font-size: 0.72rem; padding: 5px 10px; border-radius: 8px; } .btn-charge-item:hover { background: #fef3c7; } .btn-settle-refund { background: #16a34a; color: #ffffff; border: none; font-weight: 700; font-size: 0.72rem; padding: 5px 10px; border-radius: 8px; } .btn-settle-refund:hover { background: #15803d; } /* Floating AI Button */ .hiva-ai-floating-btn { position: fixed; bottom: 24px; right: 24px; background: #0084ff; color: white; border-radius: 30px; padding: 12px 24px; font-weight: 800; border: none; box-shadow: 0 10px 25px rgba(0, 132, 255, 0.4); display: flex; align-items: center; gap: 10px; z-index: 1000; } </style> </head> <body class="p-3 p-md-4"> <div class="container-fluid max-w-7xl"> <!-- Top Navigation Bar --> <div class="top-agms-header d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3"> <div class="d-flex align-items-center gap-3"> <div class="bell-icon-box"> <i class="fa-solid fa-bell"></i> </div> <div> <h4 class="fw-bold mb-0">AGMS - Multi-Room Booking Tracker</h4> <p class="text-muted small mb-0">Unified Folio, Housekeeping & Security Deposit Management</p> </div> </div> <!-- Filter Badges --> <div class="d-flex align-items-center gap-2 flex-wrap"> <button class="agms-pill-btn"> <i class="fa-solid fa-bed"></i> Occupied Rooms: <span class="badge bg-white text-primary rounded-pill">5</span> </button> <select class="form-select form-select-sm rounded-3 fw-semibold border-secondary-subtle" style="width: 160px;"> <option>All Categories</option> <option>Deluxe Room</option> <option>Executive Suite</option> </select> <select class="form-select form-select-sm rounded-3 fw-semibold border-secondary-subtle" style="width: 190px;"> <option>All Housekeeping Statuses</option> <option>Clean & Inspected</option> <option>Dirty / Needs Cleaning</option> </select> <button class="btn btn-sm btn-outline-secondary rounded-3" title="Refresh Data"> <i class="fa-solid fa-rotate-right"></i> </button> <div class="live-badge"> <span class="live-dot"></span> Live </div> </div> </div> <!-- Section Title --> <div class="d-flex justify-content-between align-items-center mb-3"> <h6 class="fw-bold text-dark mb-0 d-flex align-items-center gap-2"> <i class="fa-solid fa-bookmark text-secondary"></i> Active Bookings & Group Stays </h6> <span class="text-muted extra-small fw-semibold">Showing 3 Active Folios</span> </div> <!-- Cards Grid Area --> <div class="row g-4" id="cardsGrid"> <!-- Booking Card 1: Harshit Rajpoot (Deposit NOT Taken) --> <div class="col-12 col-md-6 col-xl-4"> <div class="booking-card"> <div class="card-top-bar bar-red"></div> <!-- Header Info --> <div class="card-header-info"> <div> <span class="booking-id">#vista10bhopal -206</span> <span class="room-count-badge">2 Rooms</span> </div> <span class="source-badge-direct">Direct</span> </div> <!-- Guest Details --> <div class="px-3 d-flex justify-content-between align-items-center mb-2"> <div class="d-flex align-items-center gap-3"> <div class="guest-avatar">HA</div> <div> <h6 class="fw-bold mb-0 text-dark">Harshit rajpoot</h6> <span class="text-muted extra-small">6264993771</span> </div> </div> <button class="btn-view-eye" title="View Folio Details"> <i class="fa-solid fa-eye"></i> </button> </div> <!-- Dates --> <div class="date-box d-flex justify-content-between align-items-center"> <div> <div class="date-label"><i class="fa-solid fa-right-to-bracket me-1"></i> CHECK-IN</div> <div class="date-val">01 Oct, 12:00 AM</div> </div> <div class="border-start ps-3"> <div class="date-label"><i class="fa-solid fa-right-from-bracket me-1"></i> CHECK-OUT</div> <div class="date-val">03 Oct, 12:00 AM</div> </div> </div> <!-- Assigned Rooms --> <div class="assigned-rooms-box"> <div class="section-sub-title">ASSIGNED ROOMS & DND STATUS</div> <div class="d-flex justify-content-between align-items-center mb-1"> <span class="fw-bold text-dark small">Room 104</span> <span class="room-tag">Deluxe Room</span> </div> <div class="d-flex justify-content-between align-items-center"> <span class="fw-bold text-dark small">Room 103</span> <span class="room-tag">Deluxe Room</span> </div> </div> <!-- Booking Total Due --> <div class="due-box"> <div> <div class="date-label">BOOKING TOTAL DUE</div> <div class="text-muted extra-small fw-semibold">Paid: ₹3,100.00</div> </div> <span class="due-amount-pill">₹39.95</span> </div> <!-- ADVANCE SECURITY DEPOSIT (NOT TAKEN STATE) --> <div class="security-deposit-box"> <div class="d-flex justify-content-between align-items-center mb-1"> <span class="sec-title"><i class="fa-solid fa-shield-halved me-1"></i> Security Refundable</span> <span class="sec-flag-not-taken">NOT COLLECTED</span> </div> <div class="d-flex justify-content-between align-items-center"> <div> <span class="sec-value-zero">₹0.00</span> </div> <button class="btn-collect-sec" onclick="openCollectModal('vista10bhopal -206', 'Harshit rajpoot')"> <i class="fa-solid fa-plus me-1"></i> Collect Deposit </button> </div> </div> <!-- Guest Requests Accordion Footer --> <div class="px-3 pb-3 mt-auto"> <button class="btn btn-sm btn-light border w-100 text-start d-flex justify-content-between align-items-center fw-semibold text-muted" style="font-size: 0.78rem;"> <span><i class="fa-solid fa-list-check me-2"></i> Guest Requests & Notes (0)</span> <i class="fa-solid fa-chevron-down"></i> </button> </div> </div> </div> <!-- Booking Card 2: ISHAN GARG (Deposit COLLECTED State) --> <div class="col-12 col-md-6 col-xl-4"> <div class="booking-card"> <div class="card-top-bar bar-red"></div> <!-- Header Info --> <div class="card-header-info"> <div> <span class="booking-id">#vista10bhopal -204</span> <span class="room-count-badge">1 Room</span> </div> <span class="source-badge-direct">Direct</span> </div> <!-- Guest Details --> <div class="px-3 d-flex justify-content-between align-items-center mb-2"> <div class="d-flex align-items-center gap-3"> <div class="guest-avatar" style="background-color: #0284c7;">IS</div> <div> <h6 class="fw-bold mb-0 text-dark">ISHAN GARG</h6> <span class="text-muted extra-small">6280741002</span> </div> </div> <button class="btn-view-eye" title="View Folio Details"> <i class="fa-solid fa-eye"></i> </button> </div> <!-- Dates --> <div class="date-box d-flex justify-content-between align-items-center"> <div> <div class="date-label"><i class="fa-solid fa-right-to-bracket me-1"></i> CHECK-IN</div> <div class="date-val">01 Oct, 12:00 AM</div> </div> <div class="border-start ps-3"> <div class="date-label"><i class="fa-solid fa-right-from-bracket me-1"></i> CHECK-OUT</div> <div class="date-val">06 Oct, 12:00 AM</div> </div> </div> <!-- Assigned Rooms --> <div class="assigned-rooms-box"> <div class="section-sub-title">ASSIGNED ROOMS & DND STATUS</div> <div class="d-flex justify-content-between align-items-center"> <span class="fw-bold text-dark small">Room 102</span> <span class="room-tag">Deluxe Room</span> </div> </div> <!-- Booking Total Due --> <div class="due-box"> <div> <div class="date-label">BOOKING TOTAL DUE</div> <div class="text-muted extra-small fw-semibold">Paid: ₹2,600.00</div> </div> <span class="due-amount-pill">₹3,900.00</span> </div> <!-- ADVANCE SECURITY DEPOSIT (COLLECTED & ACTIVE DEDUCTIONS STATE) --> <div class="security-deposit-box"> <div class="d-flex justify-content-between align-items-center mb-1"> <span class="sec-title"><i class="fa-solid fa-shield-halved me-1"></i> Security Refundable</span> <span class="sec-flag-collected">ACTIVE DEPOSIT</span> </div> <div class="d-flex justify-content-between align-items-center mb-2"> <div> <span class="sec-value-net">₹1,800.00</span> <div class="text-muted extra-small">Initial: ₹2,000 | Used: -₹200</div> </div> <div class="d-flex gap-1"> <button class="btn-charge-item" onclick="openChargeModal('vista10bhopal -204', 'ISHAN GARG', '1,800.00')"> + Charge </button> <button class="btn-settle-refund" onclick="openSettleModal('vista10bhopal -204', 'ISHAN GARG', '2,000.00', '200.00', '1,800.00')"> Settle </button> </div> </div> <div class="bg-white rounded-2 p-1 px-2 border extra-small text-muted d-flex justify-content-between"> <span>2x Water Bottle (Minibar)</span> <span class="fw-bold text-danger">-₹200.00</span> </div> </div> <!-- Guest Requests Accordion Footer --> <div class="px-3 pb-3 mt-auto"> <button class="btn btn-sm btn-light border w-100 text-start d-flex justify-content-between align-items-center fw-semibold text-muted" style="font-size: 0.78rem;"> <span><i class="fa-solid fa-list-check me-2"></i> Guest Requests & Notes (0)</span> <i class="fa-solid fa-chevron-down"></i> </button> </div> </div> </div> <!-- Booking Card 3: Gaurav (Deposit NOT Taken) --> <div class="col-12 col-md-6 col-xl-4"> <div class="booking-card"> <div class="card-top-bar bar-green"></div> <!-- Header Info --> <div class="card-header-info"> <div> <span class="booking-id">#vista10bhopal -203</span> <span class="room-count-badge">1 Room</span> </div> <span class="source-badge-direct">Direct</span> </div> <!-- Guest Details --> <div class="px-3 d-flex justify-content-between align-items-center mb-2"> <div class="d-flex align-items-center gap-3"> <div class="guest-avatar" style="background-color: #16a34a;">GA</div> <div> <h6 class="fw-bold mb-0 text-dark">Gaurav</h6> <span class="text-muted extra-small">9453718969</span> </div> </div> <button class="btn-view-eye" title="View Folio Details"> <i class="fa-solid fa-eye"></i> </button> </div> <!-- Dates --> <div class="date-box d-flex justify-content-between align-items-center"> <div> <div class="date-label"><i class="fa-solid fa-right-to-bracket me-1"></i> CHECK-IN</div> <div class="date-val">02 Oct, 12:00 AM</div> </div> <div class="border-start ps-3"> <div class="date-label"><i class="fa-solid fa-right-from-bracket me-1"></i> CHECK-OUT</div> <div class="date-val">04 Oct, 12:00 AM</div> </div> </div> <!-- Assigned Rooms --> <div class="assigned-rooms-box"> <div class="section-sub-title">ASSIGNED ROOMS & DND STATUS</div> <div class="d-flex justify-content-between align-items-center"> <span class="fw-bold text-dark small">Room 104</span> <span class="room-tag">Deluxe Room</span> </div> </div> <!-- Booking Total Due --> <div class="due-box"> <div> <div class="date-label">BOOKING TOTAL DUE</div> <div class="text-muted extra-small fw-semibold">Paid: ₹3,100.00</div> </div> <span class="badge bg-success bg-opacity-10 text-success fw-bold px-3 py-2 rounded-3">PAID FULL</span> </div> <!-- ADVANCE SECURITY DEPOSIT (NOT TAKEN STATE) --> <div class="security-deposit-box"> <div class="d-flex justify-content-between align-items-center mb-1"> <span class="sec-title"><i class="fa-solid fa-shield-halved me-1"></i> Security Refundable</span> <span class="sec-flag-not-taken">NOT COLLECTED</span> </div> <div class="d-flex justify-content-between align-items-center"> <div> <span class="sec-value-zero">₹0.00</span> </div> <button class="btn-collect-sec" onclick="openCollectModal('vista10bhopal -203', 'Gaurav')"> <i class="fa-solid fa-plus me-1"></i> Collect Deposit </button> </div> </div> <!-- Guest Requests Accordion Footer --> <div class="px-3 pb-3 mt-auto"> <button class="btn btn-sm btn-light border w-100 text-start d-flex justify-content-between align-items-center fw-semibold text-muted" style="font-size: 0.78rem;"> <span><i class="fa-solid fa-list-check me-2"></i> Guest Requests & Notes (0)</span> <i class="fa-solid fa-chevron-down"></i> </button> </div> </div> </div> </div> </div> <!-- MODAL 1: COLLECT SECURITY DEPOSIT --> <div class="modal fade" id="collectModal" tabindex="-1" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content rounded-4 border-0 shadow"> <div class="modal-header border-bottom-0 pb-0"> <h5 class="modal-title fw-bold text-dark"><i class="fa-solid fa-shield-halved text-warning me-2"></i> Collect Security Deposit</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body py-3"> <div class="p-3 bg-light rounded-3 mb-3"> <div class="d-flex justify-content-between small"> <span class="text-muted">Booking Reference:</span> <strong id="colBookingId" class="text-dark">#ID</strong> </div> <div class="d-flex justify-content-between small"> <span class="text-muted">Guest Name:</span> <strong id="colGuestName" class="text-dark">Guest</strong> </div> </div> <div class="mb-3"> <label class="form-label fw-semibold small">Security Deposit Amount (₹) <span class="text-danger">*</span></label> <input type="number" class="form-control" id="colAmountInput" placeholder="e.g. 1000 or 2000" value="1000"> </div> <div class="mb-3"> <label class="form-label fw-semibold small">Payment Collection Mode <span class="text-danger">*</span></label> <select class="form-select" id="colPaymentMode"> <option value="Cash at Front Desk">Cash at Front Desk</option> <option value="UPI / PhonePe / QR Code">UPI / PhonePe / QR Code</option> <option value="Credit / Debit Card POS">Credit / Debit Card POS</option> </select> </div> <div> <label class="form-label fw-semibold small">Staff Note / Remark (Optional)</label> <input type="text" class="form-control" placeholder="e.g. Caution money collected for 2 days stay"> </div> </div> <div class="modal-footer border-top-0 pt-0"> <button type="button" class="btn btn-light rounded-3" data-bs-dismiss="modal">Cancel</button> <button type="button" class="btn btn-primary rounded-3 fw-bold" onclick="submitCollectDeposit()">Save Collection</button> </div> </div> </div> </div> <!-- MODAL 2: CHARGE AMENITY / DAMAGE AGAINST DEPOSIT --> <div class="modal fade" id="chargeModal" tabindex="-1" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content rounded-4 border-0 shadow"> <div class="modal-header border-bottom-0 pb-0"> <h5 class="modal-title fw-bold text-dark"><i class="fa-solid fa-file-invoice-dollar text-danger me-2"></i> Charge Service / Damage</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body py-3"> <div class="p-3 bg-light rounded-3 mb-3"> <div class="d-flex justify-content-between small mb-1"> <span class="text-muted">Folio & Guest:</span> <strong id="chgBookingGuest" class="text-dark">#ID - Guest</strong> </div> <div class="d-flex justify-content-between small"> <span class="text-muted">Available Deposit Balance:</span> <strong id="chgAvailableBal" class="text-success">₹0.00</strong> </div> </div> <div class="mb-3"> <label class="form-label fw-semibold small">Service / Damage Item <span class="text-danger">*</span></label> <select class="form-select" id="chgItemSelect"> <option value="Water Bottle (2x 1L)">Water Bottle (2x 1L) - ₹100</option> <option value="Minibar Snacks">Minibar Snacks - ₹250</option> <option value="Laundry Services">Laundry Services - ₹300</option> <option value="Room Linen Damage">Room Linen Damage - ₹500</option> <option value="Custom Item / Other">Custom Charge</option> </select> </div> <div class="mb-3"> <label class="form-label fw-semibold small">Charge Amount (₹) <span class="text-danger">*</span></label> <input type="number" class="form-control" id="chgAmountInput" value="100"> </div> </div> <div class="modal-footer border-top-0 pt-0"> <button type="button" class="btn btn-light rounded-3" data-bs-dismiss="modal">Cancel</button> <button type="button" class="btn btn-danger rounded-3 fw-bold" onclick="submitChargeItem()">Apply Deduction</button> </div> </div> </div> </div> <!-- MODAL 3: SETTLE & REFUND DEPOSIT --> <div class="modal fade" id="settleModal" tabindex="-1" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content rounded-4 border-0 shadow"> <div class="modal-header border-bottom-0 pb-0"> <h5 class="modal-title fw-bold text-dark"><i class="fa-solid fa-hand-holding-dollar text-success me-2"></i> Settle & Refund Deposit</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body py-3"> <div class="p-3 bg-light rounded-3 mb-3"> <div class="d-flex justify-content-between small mb-1"> <span class="text-muted">Initial Deposit Collected:</span> <strong id="stlInitial" class="text-dark">₹0.00</strong> </div> <div class="d-flex justify-content-between small mb-1"> <span class="text-muted">Total Deductions (Amenities/Damage):</span> <strong id="stlDeductions" class="text-danger">-₹0.00</strong> </div> <hr class="my-2"> <div class="d-flex justify-content-between"> <span class="fw-bold">Net Refundable Amount:</span> <strong id="stlNetRefund" class="text-success fs-5">₹0.00</strong> </div> </div> <div class="mb-3"> <label class="form-label fw-semibold small">Refund Method <span class="text-danger">*</span></label> <select class="form-select" id="stlRefundMethod"> <option value="Cash Refund at Checkout">Cash Refund at Checkout</option> <option value="UPI / Online Transfer">UPI / Online Transfer</option> <option value="Adjust Against Room Due Bill">Adjust Against Room Due Bill</option> </select> </div> </div> <div class="modal-footer border-top-0 pt-0"> <button type="button" class="btn btn-light rounded-3" data-bs-dismiss="modal">Cancel</button> <button type="button" class="btn btn-success rounded-3 fw-bold" onclick="submitSettleRefund()">Confirm & Mark Settled</button> </div> </div> </div> </div> <!-- Floating Assistant Button --> <button class="hiva-ai-floating-btn"> <i class="fa-solid fa-robot"></i> HIVA AI </button> <!-- Bootstrap 5 JavaScript Bundle --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> <script> let collectModalInstance, chargeModalInstance, settleModalInstance; document.addEventListener('DOMContentLoaded', function () { collectModalInstance = new bootstrap.Modal(document.getElementById('collectModal')); chargeModalInstance = new bootstrap.Modal(document.getElementById('chargeModal')); settleModalInstance = new bootstrap.Modal(document.getElementById('settleModal')); }); // 1. Open Collect Security Deposit Modal function openCollectModal(bookingId, guestName) { document.getElementById('colBookingId').innerText = '#' + bookingId; document.getElementById('colGuestName').innerText = guestName; document.getElementById('colAmountInput').value = 1000; collectModalInstance.show(); } function submitCollectDeposit() { const amount = document.getElementById('colAmountInput').value; const mode = document.getElementById('colPaymentMode').value; const bookingRef = document.getElementById('colBookingId').innerText; if(!amount || amount <= 0) { alert('Please enter a valid deposit amount.'); return; } alert(`Security deposit of ₹${amount} successfully collected for ${bookingRef} via ${mode}.`); collectModalInstance.hide(); } // 2. Open Charge Item Modal function openChargeModal(bookingId, guestName, availableBal) { document.getElementById('chgBookingGuest').innerText = `#${bookingId} - ${guestName}`; document.getElementById('chgAvailableBal').innerText = '₹' + availableBal; chargeModalInstance.show(); } function submitChargeItem() { const item = document.getElementById('chgItemSelect').value; const amount = document.getElementById('chgAmountInput').value; if(!amount || amount <= 0) { alert('Please enter a valid charge amount.'); return; } alert(`Successfully deducted ₹${amount} for (${item}) against guest security balance.`); chargeModalInstance.hide(); } // 3. Open Settle & Refund Modal function openSettleModal(bookingId, guestName, initial, deductions, netRefund) { document.getElementById('stlInitial').innerText = '₹' + initial; document.getElementById('stlDeductions').innerText = '-₹' + deductions; document.getElementById('stlNetRefund').innerText = '₹' + netRefund; settleModalInstance.show(); } function submitSettleRefund() { const method = document.getElementById('stlRefundMethod').value; const netAmount = document.getElementById('stlNetRefund').innerText; alert(`Settlement complete! Refund of ${netAmount} processed via ${method}.`); settleModalInstance.hide(); } </script> </body> </html>
🖼️ Quick Attached Media
Loading attached media...
#25 Enhancement F&B Menu
F&B Menu
Medium Subash
Pending
📝 Description

Need this menu and features in Hotel-x

💻 Attached Code Snippet
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hotel Staff Operations Hub - Housekeeping & F&B Delivery</title> <!-- Bootstrap 5 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Google Fonts (Inter) --> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"> <!-- FontAwesome 6 Icons --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> :root { --bg-color: #f1f5f9; --card-bg: #ffffff; --text-main: #0f172a; --text-muted: #64748b; --border-color: #e2e8f0; --primary-blue: #2563eb; --primary-light: #eff6ff; --success-green: #10b981; --success-light: #ecfdf5; --warning-amber: #f59e0b; --warning-light: #fffbeb; --danger-red: #ef4444; --purple-indigo: #6366f1; --purple-light: #eef2ff; } body { background-color: var(--bg-color); font-family: 'Inter', sans-serif; color: var(--text-main); font-size: 0.88rem; padding-bottom: 80px; } /* Top Header Navigation */ .ops-header-card { background: #ffffff; border-radius: 16px; padding: 16px 20px; border: 1px solid var(--border-color); box-shadow: 0 2px 8px rgba(0,0,0,0.03); } .ops-bell-icon { width: 44px; height: 44px; background-color: var(--primary-light); color: var(--primary-blue); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; } /* Nav Pills / Filters */ .nav-pills-custom .nav-link { border-radius: 20px; font-weight: 700; font-size: 0.8rem; padding: 8px 18px; color: #475569; background-color: #ffffff; border: 1px solid var(--border-color); transition: all 0.2s; } .nav-pills-custom .nav-link.active { background-color: var(--primary-blue); color: #ffffff; border-color: var(--primary-blue); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25); } /* Task Cards */ .task-card { background: #ffffff; border-radius: 16px; border: 1px solid var(--border-color); box-shadow: 0 4px 16px rgba(0,0,0,0.02); transition: transform 0.2s, box-shadow 0.2s; overflow: hidden; height: 100%; display: flex; flex-direction: column; } .task-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.06); } .task-card-header { padding: 12px 16px; border-bottom: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; } .room-number-title { font-size: 1.05rem; font-weight: 800; color: #0f172a; } /* Badge Types */ .badge-schedule { font-size: 0.68rem; font-weight: 800; padding: 4px 10px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.03em; } .badge-schedule.checkout { background-color: #ffe4e6; color: #e11d48; border: 1px solid #fecdd3; } .badge-schedule.daily { background-color: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; } .badge-task-type { font-size: 0.72rem; font-weight: 800; padding: 3px 10px; border-radius: 20px; } .badge-task-type.housekeeping { background-color: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; } .badge-task-type.fb { background-color: #fffbeb; color: #b45309; border: 1px solid #fde68a; } .badge-task-type.request { background-color: #f5f3ff; color: #6d28d9; border: 1px solid #ddd6fe; } .item-list-box { background-color: #f8fafc; border-radius: 12px; padding: 10px 14px; } /* Floating AI Assistance Widget */ .staff-ai-btn { position: fixed; bottom: 20px; right: 20px; background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #ffffff; border-radius: 30px; padding: 10px 20px; font-weight: 800; border: none; box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35); display: flex; align-items: center; gap: 8px; z-index: 1000; } .extra-small { font-size: 0.73rem; } .checklist-item-row { padding: 8px 12px; border-radius: 8px; background-color: #f8fafc; margin-bottom: 6px; border: 1px solid #e2e8f0; transition: background 0.2s; } .checklist-item-row:hover { background-color: #f1f5f9; } </style> </head> <body class="p-2 p-md-4"> <div class="container-fluid"> <!-- Top Operations Bar --> <div class="ops-header-card mb-4"> <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3"> <div class="d-flex align-items-center gap-3"> <div class="ops-bell-icon"> <i class="fa-solid fa-broom-ball"></i> </div> <div> <h4 class="fw-bold mb-0 text-dark">Staff Operations Hub</h4> <p class="text-muted small mb-0">Housekeeping Cleaning, Guest Requests & F&B Room Deliveries</p> </div> </div> <!-- Live Metrics Summary --> <div class="d-flex flex-wrap align-items-center gap-2"> <div class="bg-light px-3 py-1 rounded-3 border extra-small fw-semibold text-secondary"> <i class="fa-solid fa-soap text-success me-1"></i> Cleaning Pending: <strong id="metricCleaningCount" class="text-dark">3</strong> </div> <div class="bg-light px-3 py-1 rounded-3 border extra-small fw-semibold text-secondary"> <i class="fa-solid fa-utensils text-warning me-1"></i> F&B Deliveries: <strong id="metricFbCount" class="text-dark">2</strong> </div> <div class="bg-light px-3 py-1 rounded-3 border extra-small fw-semibold text-secondary"> <i class="fa-solid fa-bell-concierge text-purple me-1" style="color: #6366f1;"></i> Guest Requests: <strong id="metricRequestCount" class="text-dark">2</strong> </div> </div> </div> </div> <!-- Tab Navigation & Search Bar --> <div class="row align-items-center mb-3 g-2"> <div class="col-12 col-md-8"> <ul class="nav nav-pills nav-pills-custom gap-2" id="taskTabFilter"> <li class="nav-item"> <button class="nav-link active" onclick="filterTasks('ALL', this)"> <i class="fa-solid fa-list-check me-1"></i> All Operations (<span id="countAll">7</span>) </button> </li> <li class="nav-item"> <button class="nav-link" onclick="filterTasks('CLEANING', this)"> <i class="fa-solid fa-broom me-1"></i> Room Cleaning (<span id="countCleaning">3</span>) </button> </li> <li class="nav-item"> <button class="nav-link" onclick="filterTasks('FB', this)"> <i class="fa-solid fa-tray me-1"></i> F&B Delivery (<span id="countFb">2</span>) </button> </li> <li class="nav-item"> <button class="nav-link" onclick="filterTasks('REQUEST', this)"> <i class="fa-solid fa-bell me-1"></i> Guest Requests (<span id="countRequest">2</span>) </button> </li> </ul> </div> <div class="col-12 col-md-4"> <div class="input-group input-group-sm"> <span class="input-group-text bg-white border-end-0"><i class="fa-solid fa-magnifying-glass text-muted"></i></span> <input type="text" id="taskSearchInput" class="form-control border-start-0" placeholder="Search Room, Item, or Guest..." onkeyup="handleSearch()"> </div> </div> </div> <!-- Notification Banner --> <div id="opsNotification" class="alert alert-success alert-dismissible fade show rounded-3 py-2 px-3 extra-small border-0 mb-3 d-none" role="alert"> <i class="fa-solid fa-circle-check me-2"></i> <span id="opsNotificationText">Action completed successfully.</span> <button type="button" class="btn-close py-2" data-bs-dismiss="alert" aria-label="Close"></button> </div> <!-- Task Grid Container --> <div class="row g-3" id="taskCardsContainer"> <!-- Dynamic task cards generated via JavaScript --> </div> </div> <!-- MODAL 1: Housekeeping Predefined Checklist Modal --> <div class="modal fade" id="checklistModal" tabindex="-1" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content rounded-4 border-0 shadow"> <div class="modal-header border-bottom-0 pb-0"> <h5 class="modal-title fw-bold text-dark d-flex align-items-center gap-2"> <i class="fa-solid fa-broom text-success"></i> <span>Cleaning Checklist - <span id="modalCleaningRoom">Room 101</span></span> </h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body py-3"> <div class="p-2 bg-light rounded-3 mb-3 extra-small d-flex justify-content-between align-items-center"> <div> <span class="text-muted">Schedule Type:</span> <strong id="modalCleaningSchedule" class="text-danger">Checkout Cleaning</strong> </div> <span class="badge bg-warning text-dark fw-bold">Inspection Required</span> </div> <p class="fw-bold extra-small text-muted text-uppercase mb-2">Tick items as you complete them:</p> <form id="checklistForm" onsubmit="handleSaveCleaning(event)"> <input type="hidden" id="modalCleaningTaskId"> <div class="checklist-item-row d-flex align-items-center justify-content-between"> <label class="form-check-label extra-small fw-semibold text-dark" for="chk1"> <i class="fa-solid fa-bed text-secondary me-2"></i> Linen & Bed Sheets Changed </label> <input class="form-check-input" type="checkbox" id="chk1" checked> </div> <div class="checklist-item-row d-flex align-items-center justify-content-between"> <label class="form-check-label extra-small fw-semibold text-dark" for="chk2"> <i class="fa-solid fa-pump-soap text-secondary me-2"></i> Bathroom Disinfected & Towels Replaced </label> <input class="form-check-input" type="checkbox" id="chk2" checked> </div> <div class="checklist-item-row d-flex align-items-center justify-content-between"> <label class="form-check-label extra-small fw-semibold text-dark" for="chk3"> <i class="fa-solid fa-trash text-secondary me-2"></i> Trash Disposed & Surface Dusting </label> <input class="form-check-input" type="checkbox" id="chk3" checked> </div> <div class="checklist-item-row d-flex align-items-center justify-content-between"> <label class="form-check-label extra-small fw-semibold text-dark" for="chk4"> <i class="fa-solid fa-wind text-secondary me-2"></i> Floor Mopped & Vacuumed </label> <input class="form-check-input" type="checkbox" id="chk4"> </div> <div class="checklist-item-row d-flex align-items-center justify-content-between"> <label class="form-check-label extra-small fw-semibold text-dark" for="chk5"> <i class="fa-solid fa-bottle-water text-secondary me-2"></i> Amenities & Complimentary Water Replenished </label> <input class="form-check-input" type="checkbox" id="chk5"> </div> <div class="mt-3"> <label class="form-label fw-semibold extra-small">Staff Inspection Notes / Damage Observation</label> <textarea class="form-control form-control-sm" id="cleaningNotes" rows="2" placeholder="e.g. Cleaned thoroughly. Minibar restocked. No damages observed."></textarea> </div> <div class="modal-footer border-top-0 px-0 pb-0 mt-3"> <button type="button" class="btn btn-light btn-sm rounded-3" data-bs-dismiss="modal">Close</button> <button type="submit" class="btn btn-success btn-sm rounded-3 fw-bold">Mark Room Clean & Ready</button> </div> </form> </div> </div> </div> </div> <!-- MODAL 2: F&B Payment Collection Modal --> <div class="modal fade" id="collectPaymentModal" tabindex="-1" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content rounded-4 border-0 shadow"> <div class="modal-header border-bottom-0 pb-0"> <h5 class="modal-title fw-bold text-amber-600" style="color: #b45309;"> <i class="fa-solid fa-hand-holding-dollar me-2"></i>Collect Specific Order Payment </h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body py-3"> <div class="p-3 bg-light rounded-3 mb-3"> <div class="d-flex justify-content-between align-items-center mb-1"> <span class="text-muted extra-small">Target Room:</span> <strong id="modalPayRoom" class="text-dark fs-6">Room 104</strong> </div> <div class="d-flex justify-content-between align-items-center mb-1"> <span class="text-muted extra-small">Order Details:</span> <span id="modalPayOrderItems" class="fw-semibold text-dark extra-small">2x Water Bottles, 1x Club Sandwich</span> </div> <hr class="my-2"> <div class="d-flex justify-content-between align-items-center"> <span class="fw-bold extra-small text-dark">Total Order Amount to Collect:</span> <strong id="modalPayAmount" class="text-success fs-5">₹250.00</strong> </div> </div> <form id="paymentCollectForm" onsubmit="handleConfirmPaymentDelivery(event)"> <input type="hidden" id="modalPayTaskId"> <div class="mb-3"> <label class="form-label fw-semibold extra-small">Payment Method Received <span class="text-danger">*</span></label> <select class="form-select form-select-sm" id="payModeSelect" required> <option value="Cash Collected">Cash Collected at Room</option> <option value="UPI / PhonePe QR Scanned">UPI / PhonePe QR Scanned at Door</option> <option value="Card Swipe Machine">POS Card Swiped</option> </select> </div> <div class="mb-3"> <label class="form-label fw-semibold extra-small">Delivery Staff Remarks / Receipt UTR</label> <input type="text" class="form-control form-control-sm" id="payRemarks" placeholder="Handed over to guest. Payment verified."> </div> <div class="modal-footer border-top-0 px-0 pb-0"> <button type="button" class="btn btn-light btn-sm rounded-3" data-bs-dismiss="modal">Cancel</button> <button type="submit" class="btn btn-warning btn-sm rounded-3 fw-bold text-dark">Confirm Payment & Deliver</button> </div> </form> </div> </div> </div> </div> <!-- MODAL 3: Fulfill Guest Request Modal --> <div class="modal fade" id="fulfillRequestModal" tabindex="-1" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content rounded-4 border-0 shadow"> <div class="modal-header border-bottom-0 pb-0"> <h5 class="modal-title fw-bold text-purple-600" style="color: #6366f1;"> <i class="fa-solid fa-bell-concierge me-2"></i>Fulfill Guest Request </h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body py-3"> <div class="p-2 bg-light rounded-3 mb-3 extra-small"> <span class="text-muted">Room:</span> <strong id="modalReqRoom" class="text-dark">Room 102</strong><br> <span class="text-muted">Request Detail:</span> <strong id="modalReqText" class="text-dark">Extra Blanket & Bath Towel needed</strong> </div> <form id="fulfillReqForm" onsubmit="handleSaveRequestFulfill(event)"> <input type="hidden" id="modalReqTaskId"> <div class="mb-3"> <label class="form-label fw-semibold extra-small">Action Taken / Resolution Note</label> <input type="text" class="form-control form-control-sm" id="reqResolutionNote" placeholder="e.g. Delivered 1 extra blanket & 2 towels to guest." required> </div> <div class="modal-footer border-top-0 px-0 pb-0"> <button type="button" class="btn btn-light btn-sm rounded-3" data-bs-dismiss="modal">Cancel</button> <button type="submit" class="btn btn-primary btn-sm rounded-3 fw-bold">Mark Request Fulfilled</button> </div> </form> </div> </div> </div> </div> <!-- Floating Assistant Widget --> <button class="staff-ai-btn"> <i class="fa-solid fa-robot"></i> HIVA Staff AI </button> <!-- Bootstrap 5 JavaScript Bundle --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> <script> // Staff operational dataset let operationsData = [ // Housekeeping Cleaning Scheduled Tasks { id: 'task_101', type: 'CLEANING', roomNumber: 'Room 101', guestName: 'Departure Guest (Vacated)', scheduleType: 'CHECKOUT', // 'CHECKOUT' or 'DAILY' status: 'PENDING', // 'PENDING' or 'COMPLETED' timeSlot: 'Scheduled After Checkout', notes: 'Deep cleaning required. Sanitization mandated.', checklist: { linen: false, bathroom: false, trash: false, floor: false, amenities: false } }, { id: 'task_103', type: 'CLEANING', roomNumber: 'Room 103', guestName: 'Ankit Sharma (In-House)', scheduleType: 'DAILY', status: 'PENDING', timeSlot: 'Everyday Maintenance (11:00 AM)', notes: 'Guest requested fresh towels and dusting.', checklist: { linen: true, bathroom: false, trash: true, floor: false, amenities: false } }, { id: 'task_202', type: 'CLEANING', roomNumber: 'Room 202', guestName: 'Departure Guest (Checkout)', scheduleType: 'CHECKOUT', status: 'PENDING', timeSlot: 'Scheduled After Checkout', notes: 'Change all beddings and replenish minibar.', checklist: { linen: false, bathroom: false, trash: false, floor: false, amenities: false } }, // F&B Room Delivery Tasks { id: 'task_fb_104', type: 'FB', roomNumber: 'Room 104', guestName: 'Harshit Rajpoot', orderItems: '2x Mineral Water Bottles (₹40), 1x Club Sandwich (₹150)', orderAmount: 190.00, paymentStatus: 'COLLECT_ON_DELIVERY', // 'PREPAID' or 'COLLECT_ON_DELIVERY' status: 'PENDING', orderTime: '12:10 PM (10 mins ago)' }, { id: 'task_fb_102', type: 'FB', roomNumber: 'Room 102', guestName: 'ISHAN GARG', orderItems: '1x Masala Tea, 1x Paneer Tikka', orderAmount: 260.00, paymentStatus: 'PREPAID', // Charged to Security Deposit / Folio status: 'PENDING', orderTime: '12:18 PM (2 mins ago)' }, // Guest Requests Tasks { id: 'task_req_105', type: 'REQUEST', roomNumber: 'Room 105', guestName: 'Gaurav', requestDetails: 'Guest requested 1 Extra Bucket & Mug in bathroom.', status: 'PENDING', reqTime: '11:45 AM' }, { id: 'task_req_201', type: 'REQUEST', roomNumber: 'Room 201', guestName: 'Pooja Verma', requestDetails: 'Iron & Ironing Board requested for 1 hour.', status: 'PENDING', reqTime: '12:05 PM' } ]; let currentFilter = 'ALL'; let checklistModal, collectPaymentModal, fulfillRequestModal; document.addEventListener('DOMContentLoaded', function () { checklistModal = new bootstrap.Modal(document.getElementById('checklistModal')); collectPaymentModal = new bootstrap.Modal(document.getElementById('collectPaymentModal')); fulfillRequestModal = new bootstrap.Modal(document.getElementById('fulfillRequestModal')); renderTaskCards(); }); function renderTaskCards() { const container = document.getElementById('taskCardsContainer'); container.innerHTML = ''; const searchTerm = document.getElementById('taskSearchInput').value.toLowerCase(); // Filter logic let filtered = operationsData.filter(item => { if (currentFilter !== 'ALL' && item.type !== currentFilter) return false; if (searchTerm) { const matchRoom = item.roomNumber.toLowerCase().includes(searchTerm); const matchGuest = item.guestName.toLowerCase().includes(searchTerm); const matchDetails = (item.orderItems || item.requestDetails || item.notes || '').toLowerCase().includes(searchTerm); return matchRoom || matchGuest || matchDetails; } return true; }); // Update Counts document.getElementById('countAll').innerText = operationsData.length; document.getElementById('countCleaning').innerText = operationsData.filter(i => i.type === 'CLEANING' && i.status === 'PENDING').length; document.getElementById('countFb').innerText = operationsData.filter(i => i.type === 'FB' && i.status === 'PENDING').length; document.getElementById('countRequest').innerText = operationsData.filter(i => i.type === 'REQUEST' && i.status === 'PENDING').length; if (filtered.length === 0) { container.innerHTML = ` <div class="col-12 text-center py-5"> <i class="fa-solid fa-clipboard-check text-muted fs-1 mb-2"></i> <h6 class="fw-bold text-secondary">No pending operations found</h6> <p class="extra-small text-muted">All scheduled room cleanings, F&B orders, and guest requests are fulfilled.</p> </div> `; return; } filtered.forEach(item => { const col = document.createElement('div'); col.className = 'col-12 col-md-6 col-xl-4'; if (item.type === 'CLEANING') { const scheduleBadge = item.scheduleType === 'CHECKOUT' ? '<span class="badge-schedule checkout"><i class="fa-solid fa-door-open me-1"></i> Checkout Cleaning</span>' : '<span class="badge-schedule daily"><i class="fa-solid fa-calendar-day me-1"></i> Daily Maintenance</span>'; col.innerHTML = ` <div class="task-card"> <div class="task-card-header"> <span class="room-number-title">${item.roomNumber}</span> <span class="badge-task-type housekeeping"><i class="fa-solid fa-broom me-1"></i> Housekeeping</span> </div> <div class="p-3 d-flex flex-column gap-2 flex-grow-1"> <div class="d-flex justify-content-between align-items-center"> <span class="fw-bold text-dark extra-small">${item.guestName}</span> ${scheduleBadge} </div> <div class="item-list-box extra-small"> <div class="text-muted mb-1"><i class="fa-solid fa-clock me-1"></i> ${item.timeSlot}</div> <div class="text-dark fw-semibold"><i class="fa-solid fa-note-sticky me-1 text-warning"></i> ${item.notes}</div> </div> <div class="mt-auto pt-2 border-top"> <button class="btn btn-outline-success btn-sm w-100 fw-bold rounded-3" onclick="openCleaningChecklist('${item.id}')"> <i class="fa-solid fa-list-check me-1"></i> Checklist & Complete Cleaning </button> </div> </div> </div> `; } else if (item.type === 'FB') { let actionButtonsHtml = ''; if (item.paymentStatus === 'PREPAID') { actionButtonsHtml = ` <button class="btn btn-success btn-sm w-100 fw-bold rounded-3" onclick="handleDirectDeliverFB('${item.id}')"> <i class="fa-solid fa-circle-check me-1"></i> Mark Delivered </button> `; } else { actionButtonsHtml = ` <div class="row g-2"> <div class="col-6"> <button class="btn btn-outline-success btn-sm w-100 fw-bold rounded-3 extra-small" onclick="handleDirectDeliverFB('${item.id}')"> Mark Delivered </button> </div> <div class="col-6"> <button class="btn btn-warning btn-sm w-100 fw-bold rounded-3 extra-small text-dark" onclick="openCollectPaymentModal('${item.id}')"> <i class="fa-solid fa-indian-rupee-sign me-1"></i> Collect & Deliver </button> </div> </div> `; } col.innerHTML = ` <div class="task-card"> <div class="task-card-header"> <span class="room-number-title">${item.roomNumber}</span> <span class="badge-task-type fb"><i class="fa-solid fa-utensils me-1"></i> Room Service</span> </div> <div class="p-3 d-flex flex-column gap-2 flex-grow-1"> <div class="d-flex justify-content-between align-items-center"> <span class="fw-bold text-dark extra-small">${item.guestName}</span> <span class="badge bg-light text-muted border extra-small"><i class="fa-solid fa-clock me-1"></i> ${item.orderTime}</span> </div> <div class="item-list-box extra-small"> <div class="fw-bold text-dark mb-1"><i class="fa-solid fa-burger me-1 text-primary"></i> ${item.orderItems}</div> <div class="d-flex justify-content-between align-items-center mt-2 border-top pt-1"> <span class="text-muted">Order Amount:</span> <span class="fw-bold text-success fs-6">₹${item.orderAmount.toFixed(2)}</span> </div> </div> <div class="mt-auto pt-2 border-top"> ${actionButtonsHtml} </div> </div> </div> `; } else if (item.type === 'REQUEST') { col.innerHTML = ` <div class="task-card"> <div class="task-card-header"> <span class="room-number-title">${item.roomNumber}</span> <span class="badge-task-type request"><i class="fa-solid fa-bell me-1"></i> Guest Request</span> </div> <div class="p-3 d-flex flex-column gap-2 flex-grow-1"> <div class="d-flex justify-content-between align-items-center"> <span class="fw-bold text-dark extra-small">${item.guestName}</span> <span class="badge bg-light text-muted border extra-small"><i class="fa-solid fa-clock me-1"></i> ${item.reqTime}</span> </div> <div class="item-list-box extra-small"> <div class="fw-semibold text-purple-700" style="color: #5b21b6;"><i class="fa-solid fa-circle-exclamation me-1"></i> ${item.requestDetails}</div> </div> <div class="mt-auto pt-2 border-top"> <button class="btn btn-indigo btn-sm w-100 fw-bold rounded-3 text-white" style="background-color: #6366f1;" onclick="openFulfillRequestModal('${item.id}')"> <i class="fa-solid fa-check-double me-1"></i> Fulfill Request </button> </div> </div> </div> `; } container.appendChild(col); }); } function filterTasks(type, element) { currentFilter = type; document.querySelectorAll('#taskTabFilter .nav-link').forEach(btn => btn.classList.remove('active')); element.classList.add('active'); renderTaskCards(); } function handleSearch() { renderTaskCards(); } function openCleaningChecklist(taskId) { const item = operationsData.find(t => t.id === taskId); if (!item) return; document.getElementById('modalCleaningTaskId').value = item.id; document.getElementById('modalCleaningRoom').innerText = item.roomNumber; document.getElementById('modalCleaningSchedule').innerText = item.scheduleType === 'CHECKOUT' ? 'Checkout Deep Cleaning' : 'Daily Routine Cleaning'; checklistModal.show(); } function handleSaveCleaning(e) { e.preventDefault(); const taskId = document.getElementById('modalCleaningTaskId').value; const notes = document.getElementById('cleaningNotes').value; operationsData = operationsData.filter(t => t.id !== taskId); checklistModal.hide(); renderTaskCards(); showNotification(`Room cleaning checklist recorded & completed for task. Note: ${notes || 'Cleaned thoroughly'}`); } function handleDirectDeliverFB(taskId) { const item = operationsData.find(t => t.id === taskId); if (item) { operationsData = operationsData.filter(t => t.id !== taskId); renderTaskCards(); showNotification(`Order delivered successfully to ${item.roomNumber}.`); } } function openCollectPaymentModal(taskId) { const item = operationsData.find(t => t.id === taskId); if (!item) return; document.getElementById('modalPayTaskId').value = item.id; document.getElementById('modalPayRoom').innerText = item.roomNumber; document.getElementById('modalPayOrderItems').innerText = item.orderItems; document.getElementById('modalPayAmount').innerText = `₹${item.orderAmount.toFixed(2)}`; collectPaymentModal.show(); } function handleConfirmPaymentDelivery(e) { e.preventDefault(); const taskId = document.getElementById('modalPayTaskId').value; const payMode = document.getElementById('payModeSelect').value; const item = operationsData.find(t => t.id === taskId); if (item) { operationsData = operationsData.filter(t => t.id !== taskId); collectPaymentModal.hide(); renderTaskCards(); showNotification(`Collected ₹${item.orderAmount.toFixed(2)} via ${payMode} & delivered order to ${item.roomNumber}.`); } } function openFulfillRequestModal(taskId) { const item = operationsData.find(t => t.id === taskId); if (!item) return; document.getElementById('modalReqTaskId').value = item.id; document.getElementById('modalReqRoom').innerText = item.roomNumber; document.getElementById('modalReqText').innerText = item.requestDetails; fulfillRequestModal.show(); } function handleSaveRequestFulfill(e) { e.preventDefault(); const taskId = document.getElementById('modalReqTaskId').value; const note = document.getElementById('reqResolutionNote').value; const item = operationsData.find(t => t.id === taskId); if (item) { operationsData = operationsData.filter(t => t.id !== taskId); fulfillRequestModal.hide(); renderTaskCards(); showNotification(`Fulfilled guest request for ${item.roomNumber}: ${note}`); } } function showNotification(msg) { const banner = document.getElementById('opsNotification'); const text = document.getElementById('opsNotificationText'); text.innerText = msg; banner.classList.remove('d-none'); setTimeout(() => { banner.classList.add('d-none'); }, 5000); } </script> </body> </html>
🖼️ Quick Attached Media
Loading attached media...
#23 Issue Test
Test
1 of 1 Subtasks Done (100%)
Medium Subas
Pending
#24 Issue Test 1 (Subtask) Medium Subas
Approved
✔ Done
📝 Subtask Description

No subtask description provided.

🖼️ Attached Media
Loading media...
📝 Description

Test

🖼️ Quick Attached Media
Loading attached media...
#22 Enhancement All Booking Page filter
All booking Page
High Subash
Pending
📝 Description

Need a tab for occupied rooms. Filter should show booked or check-in room in particular duration not with status only

🖼️ Quick Attached Media
Loading attached media...
#21 Issue Revenue Report
Revenue Report
Medium Subash
Pending
📝 Description

Direct Booking should not have tcs, TDs, Commission, etc Only OTAs Settlement amount needs to come here which needs to be connected from OTAs report Only extra services needs to be shown which is recieved from OTAs booking if any .

🖼️ Quick Attached Media
Loading attached media...
#20 Enhancement OTAs Report
OTAs Report
High Subash
Pending
📝 Description

Add tag for cancellation in the particular booking ,remove settlement options in cancelled booking Add filter in the page to filter booking on the base of completed booking and booked for the particular duration. Add settle should have options like which account they got payment which will be fetched from payment modes.

🖼️ Quick Attached Media
Loading attached media...
#19 Enhancement Business Report
Business Report
High Subash
Pending
📝 Description

Here is the new design for business Report, Kindly update it.

💻 Attached Code Snippet
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hotel Property Performance &amp; Financial Audit Dashboard</title> <!-- Google Fonts: Inter & JetBrains Mono --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500;700;800&display=swap" rel="stylesheet"> <!-- Bootstrap 5 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- FontAwesome Icons --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <!-- Chart.js CDN --> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <style> :root { --bg-slate: #f4f7fe; --card-radius: 18px; --font-main: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; --primary-blue: #2563eb; --primary-dark: #1e3a8a; } body { background-color: var(--bg-slate); font-family: var(--font-main); color: #1e293b; font-size: 0.85rem; -webkit-font-smoothing: antialiased; } .font-mono { font-family: var(--font-mono); } /* Highlighted Hero Banner Styling */ .hero-banner { background: linear-gradient(135deg, #1e40af 0%, #2563eb 50%, #1d4ed8 100%); border-radius: 20px; color: #ffffff; padding: 1.75rem 2rem; box-shadow: 0 10px 30px -5px rgba(37, 99, 235, 0.35); position: relative; overflow: hidden; } .hero-banner::before { content: ''; position: absolute; top: -50px; right: -50px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); pointer-events: none; } .sub-pill { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 12px; padding: 0.6rem 1.1rem; transition: all 0.2s ease; } .sub-pill:hover { background: rgba(255, 255, 255, 0.25); transform: translateY(-2px); } /* Dashboard Cards Base */ .dashboard-card { background: #ffffff; border-radius: var(--card-radius); border: 1px solid #e2e8f0; padding: 1.25rem; box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.03); transition: all 0.2s ease-in-out; position: relative; } .dashboard-card:hover { box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08); transform: translateY(-2px); } /* Pastel KPI Card Variations */ .kpi-room { background: #f0f9ff; border-color: #bae6fd; } .kpi-restaurant { background: #f0fdf4; border-color: #bbf7d0; } .kpi-extra { background: #faf5ff; border-color: #e9d5ff; } .kpi-bookings { background: #f0fdfa; border-color: #ccfbf1; } .kpi-completed { background: #f0fdf4; border-color: #bbf7d0; } .kpi-cancelled { background: #fff1f2; border-color: #fecdd3; } .kpi-tax { background: #fffbeb; border-color: #fef08a; } .kpi-commission { background: #f5f3ff; border-color: #ddd6fe; } .kpi-settlement { background: #ecfdf5; border-color: #a7f3d0; } /* Icon Box Badges */ .icon-box { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; } .icon-room { background: #e0f2fe; color: #0284c7; } .icon-restaurant { background: #dcfce7; color: #15803d; } .icon-extra { background: #f3e8ff; color: #7e22ce; } .icon-bookings { background: #e0f2fe; color: #0369a1; } .icon-completed { background: #dcfce7; color: #166534; } .icon-cancelled { background: #ffe4e6; color: #be123c; } .icon-tax { background: #fef3c7; color: #b45309; } .icon-commission { background: #f3e8ff; color: #6b21a8; } .icon-settlement { background: #d1fae5; color: #047857; } /* Info (i) Button */ .info-btn { width: 18px; height: 18px; border-radius: 50%; background-color: #e0e7ff; color: #4338ca; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; cursor: pointer; border: none; margin-left: 4px; transition: all 0.15s ease; vertical-align: middle; } .info-btn:hover { background-color: #3730a3; color: #ffffff; transform: scale(1.15); } /* Trend Badges */ .trend-badge { font-size: 0.72rem; font-weight: 700; padding: 3px 8px; border-radius: 20px; display: inline-flex; align-items: center; gap: 3px; } .trend-up { background: #dcfce7; color: #15803d; } .trend-purple { background: #f3e8ff; color: #7e22ce; } .settled-badge { background: #d1fae5; color: #047857; font-weight: 700; border-radius: 20px; padding: 4px 10px; font-size: 0.72rem; } /* Micro Sparklines */ .sparkbar-container { display: flex; align-items: flex-end; gap: 3px; height: 32px; } .sparkbar-col { width: 5px; border-radius: 3px; } /* Performance Metric Pills Bar */ .metric-pill-box { background: #ffffff; border-radius: 16px; border: 1px solid #e2e8f0; padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02); } /* Segment Breakdown Cards */ .segment-card { background: #ffffff; border-radius: 20px; border: 2px solid transparent; padding: 1.5rem; height: 100%; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 4px 18px -2px rgba(15, 23, 42, 0.04); } .segment-desk { border-color: #a7f3d0; } .segment-web { border-color: #93c5fd; } .segment-ota { border-color: #c084fc; } .tag-badge { font-size: 0.68rem; font-weight: 800; padding: 3px 8px; border-radius: 6px; letter-spacing: 0.5px; } /* Preset Filter Pill Buttons */ .preset-btn { padding: 5px 14px; border-radius: 8px; font-weight: 600; font-size: 0.78rem; color: #64748b; background: transparent; border: none; transition: all 0.15s ease; } .preset-btn.active-preset { background-color: #2563eb; color: #ffffff; font-weight: 700; box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25); } /* GOP Margin Banner */ .gop-banner { background: linear-gradient(135deg, #065f46 0%, #059669 100%); color: #ffffff; border-radius: 18px; padding: 1.25rem 1.75rem; box-shadow: 0 8px 24px -4px rgba(5, 150, 105, 0.3); } /* Live Pulsing Dot */ @keyframes pulse-dot { 0% { transform: scale(0.95); opacity: 0.9; } 50% { transform: scale(1.25); opacity: 0.4; } 100% { transform: scale(0.95); opacity: 0.9; } } .live-dot { animation: pulse-dot 2s infinite ease-in-out; } </style> </head> <body class="p-3 p-md-4 p-xl-5"> <div class="container-fluid max-w-7xl mx-auto space-y-4"> <!-- HEADER BAR WITH CONTROLS --> <header class="bg-white p-3 p-md-4 rounded-4 border shadow-sm mb-4 d-flex flex-column flex-xl-row align-items-xl-center justify-content-between gap-3"> <div class="d-flex align-items-center gap-3"> <div class="icon-box icon-room rounded-3" style="width: 52px; height: 52px; background: #2563eb; color: #ffffff;"> <i class="fa-solid fa-hotel fs-4"></i> </div> <div> <div class="d-flex align-items-center gap-2"> <h1 class="h5 fw-black text-dark mb-0 tracking-tight">Property Performance &amp; Financial Audit</h1> <span class="badge bg-primary-subtle text-primary border border-primary-subtle fw-bold" style="font-size: 0.65rem;">SEPTEMBER AUDITED</span> </div> <p class="text-muted small mb-0 font-medium">Grand Horizon Resort &amp; Spa &bull; AGMS Property ID: #AGMS-9082</p> </div> </div> <!-- Date Presets & Custom Filter Selector --> <div class="d-flex flex-wrap align-items-center gap-2 bg-light p-2 rounded-3 border"> <div class="d-inline-flex bg-white p-1 rounded-2 border shadow-sm"> <button onclick="setPreset('Today')" id="btn-Today" class="preset-btn">Today</button> <button onclick="setPreset('Yesterday')" id="btn-Yesterday" class="preset-btn">Yesterday</button> <button onclick="setPreset('7D')" id="btn-7D" class="preset-btn">7D</button> <button onclick="setPreset('1M')" id="btn-1M" class="preset-btn active-preset">1M</button> </div> <div class="vr mx-1 d-none d-sm-block" style="height: 20px;"></div> <div class="d-flex align-items-center gap-1.5 small"> <div class="position-relative d-flex align-items-center"> <i class="fa-regular fa-calendar text-muted position-absolute start-0 ms-2 pointer-events-none"></i> <input type="text" id="startDateInput" value="09/01/2026" class="form-control form-control-sm ps-4 pe-2 bg-white text-dark font-medium border" style="width: 105px;"> </div> <span class="text-muted fw-semibold">to</span> <div class="position-relative d-flex align-items-center"> <i class="fa-regular fa-calendar text-muted position-absolute start-0 ms-2 pointer-events-none"></i> <input type="text" id="endDateInput" value="09/30/2026" class="form-control form-control-sm ps-4 pe-2 bg-white text-dark font-medium border" style="width: 105px;"> </div> </div> <button onclick="applyFilter()" class="btn btn-primary btn-sm fw-bold px-3 d-flex align-items-center gap-1.5 shadow-sm"> <i class="fa-solid fa-rotate" style="font-size: 0.7rem;"></i> <span>Apply</span> </button> </div> </header> <!-- 1. HIGHLIGHTED HERO REVENUE BANNER --> <section class="hero-banner mb-4"> <div class="row align-items-center g-3"> <div class="col-12 col-lg-5"> <div class="d-flex align-items-center gap-2 mb-1"> <span class="text-white-50 text-uppercase fw-bold tracking-wider" style="font-size: 0.7rem;">TOTAL REVENUE COLLECTED (INCL. TAXES &amp; ALL SERVICES)</span> <button onclick="showModal('Total Revenue Collected', 'Grand consolidated collections across Rooms, F&B Dining, and Extra Services including all applicable output taxes.')" class="info-btn" style="background: rgba(255,255,255,0.3); color: #fff;">i</button> </div> <div class="d-flex align-items-baseline gap-3"> <h2 id="hero-total-revenue" class="display-5 font-black font-mono tracking-tight mb-0">₹2,84,500.00</h2> <span class="badge bg-success text-white font-bold rounded-pill px-2.5 py-1" style="font-size: 0.75rem;"> <i class="fa-solid fa-arrow-trend-up me-1"></i> +14.2% MoM </span> </div> <small class="text-white-50">Audited Financial Realized Inflow &bull; 01 Sep 2026 – 30 Sep 2026</small> </div> <div class="col-12 col-lg-7"> <div class="row g-2"> <div class="col-12 col-sm-4"> <div class="sub-pill"> <div class="d-flex justify-content-between align-items-center text-white-50 small mb-1"> <span>Room Revenue</span> <i class="fa-solid fa-bed"></i> </div> <div id="hero-room-rev" class="fs-6 font-bold font-mono">₹1,85,200.00</div> <small class="text-white-50" style="font-size: 0.65rem;">65.1% Share</small> </div> </div> <div class="col-12 col-sm-4"> <div class="sub-pill"> <div class="d-flex justify-content-between align-items-center text-white-50 small mb-1"> <span>Restaurant (F&amp;B)</span> <i class="fa-solid fa-utensils"></i> </div> <div id="hero-rest-rev" class="fs-6 font-bold font-mono">₹68,300.00</div> <small class="text-white-50" style="font-size: 0.65rem;">24.0% Share</small> </div> </div> <div class="col-12 col-sm-4"> <div class="sub-pill"> <div class="d-flex justify-content-between align-items-center text-white-50 small mb-1"> <span>Extra Services</span> <i class="fa-solid fa-bell-concierge"></i> </div> <div id="hero-extra-rev" class="fs-6 font-bold font-mono">₹31,000.00</div> <small class="text-white-50" style="font-size: 0.65rem;">10.9% Share</small> </div> </div> </div> </div> </div> </section> <!-- 2. PASTEL KPI METRIC CARDS (3x3 Grid) --> <section class="mb-4"> <div class="row g-3"> <!-- CARD 1: Room Revenue Received --> <div class="col-12 col-md-6 col-lg-4"> <div class="dashboard-card kpi-room"> <div class="d-flex align-items-center justify-content-between mb-3"> <div class="d-flex align-items-center gap-2.5"> <div class="icon-box icon-room"><i class="fa-solid fa-bed"></i></div> <div> <span class="fw-bold text-dark d-inline-block">Room Revenue Received</span> <button onclick="showModal('Room Revenue Received', 'Total room tariff collections received in the selected duration including output GST.')" class="info-btn">i</button> </div> </div> <span class="trend-badge trend-up"><i class="fa-solid fa-arrow-up"></i> +12% <span class="text-muted fw-normal ms-0.5">vs last period</span></span> </div> <div class="d-flex align-items-end justify-content-between"> <div> <div id="kpi-room-revenue" class="fs-3 font-black font-mono text-dark tracking-tight">₹1,85,200.00</div> <small class="text-muted">Pure Accommodation Collections (Incl. Taxes)</small> </div> <div class="sparkbar-container"> <div class="sparkbar-col" style="height: 40%; background: #93c5fd;"></div> <div class="sparkbar-col" style="height: 60%; background: #93c5fd;"></div> <div class="sparkbar-col" style="height: 50%; background: #60a5fa;"></div> <div class="sparkbar-col" style="height: 80%; background: #3b82f6;"></div> <div class="sparkbar-col" style="height: 100%; background: #2563eb;"></div> </div> </div> </div> </div> <!-- CARD 2: Restaurant Revenue (F&B) --> <div class="col-12 col-md-6 col-lg-4"> <div class="dashboard-card kpi-restaurant"> <div class="d-flex align-items-center justify-content-between mb-3"> <div class="d-flex align-items-center gap-2.5"> <div class="icon-box icon-restaurant"><i class="fa-solid fa-utensils"></i></div> <div> <span class="fw-bold text-dark d-inline-block">Restaurant Revenue (F&amp;B)</span> <button onclick="showModal('Restaurant Revenue', 'Total Food & Beverage sales including dining room service, minibar, and dining GST.')" class="info-btn">i</button> </div> </div> <span class="trend-badge trend-up"><i class="fa-solid fa-arrow-up"></i> +8% <span class="text-muted fw-normal ms-0.5">vs last period</span></span> </div> <div class="d-flex align-items-end justify-content-between"> <div> <div id="kpi-rest-revenue" class="fs-3 font-black font-mono text-dark tracking-tight">₹68,300.00</div> <small class="text-muted">All-Inclusive Dining &amp; Room Service</small> </div> <div class="sparkbar-container"> <div class="sparkbar-col" style="height: 30%; background: #86efac;"></div> <div class="sparkbar-col" style="height: 45%; background: #86efac;"></div> <div class="sparkbar-col" style="height: 60%; background: #4ade80;"></div> <div class="sparkbar-col" style="height: 75%; background: #22c55e;"></div> <div class="sparkbar-col" style="height: 100%; background: #16a34a;"></div> </div> </div> </div> </div> <!-- CARD 3: Extra Services Revenue --> <div class="col-12 col-md-6 col-lg-4"> <div class="dashboard-card kpi-extra"> <div class="d-flex align-items-center justify-content-between mb-3"> <div class="d-flex align-items-center gap-2.5"> <div class="icon-box icon-extra"><i class="fa-solid fa-bell-concierge"></i></div> <div> <span class="fw-bold text-dark d-inline-block">Extra Services Revenue</span> <button onclick="showModal('Extra Services Revenue', 'Collections from Laundry, Spa, Airport Transfers, Banquet Rentals, and add-on services.')" class="info-btn">i</button> </div> </div> <span class="trend-badge trend-up"><i class="fa-solid fa-arrow-up"></i> +15% <span class="text-muted fw-normal ms-0.5">vs last period</span></span> </div> <div class="d-flex align-items-end justify-content-between"> <div> <div id="kpi-extra-revenue" class="fs-3 font-black font-mono text-dark tracking-tight">₹31,000.00</div> <small class="text-muted">Laundry, Transfers, Minibar, Spa &amp; Extras</small> </div> <div class="sparkbar-container"> <div class="sparkbar-col" style="height: 50%; background: #d8b4fe;"></div> <div class="sparkbar-col" style="height: 65%; background: #c084fc;"></div> <div class="sparkbar-col" style="height: 40%; background: #a855f7;"></div> <div class="sparkbar-col" style="height: 85%; background: #9333ea;"></div> <div class="sparkbar-col" style="height: 100%; background: #7e22ce;"></div> </div> </div> </div> </div> <!-- CARD 4: Total Bookings --> <div class="col-12 col-md-6 col-lg-4"> <div class="dashboard-card kpi-bookings"> <div class="d-flex align-items-center justify-content-between mb-3"> <div class="d-flex align-items-center gap-2.5"> <div class="icon-box icon-bookings"><i class="fa-solid fa-calendar-days"></i></div> <div> <span class="fw-bold text-dark d-inline-block">Total Bookings</span> <button onclick="showModal('Total Bookings', 'Total registered bookings in duration: Completed, Occupied, Cancelled, and Future Reservations.')" class="info-btn">i</button> </div> </div> <a href="#" onclick="showModal('Bookings List', 'Redirecting to granular booking logs...')" class="text-primary fw-bold text-decoration-none small d-flex align-items-center gap-1"> View Details <i class="fa-solid fa-arrow-right" style="font-size: 0.7rem;"></i> </a> </div> <div id="kpi-total-bookings" class="fs-3 font-black font-mono text-dark tracking-tight">100 Bookings</div> <small class="text-muted">60 Checked-Out &bull; 35 Upcoming &bull; 5 Cancelled</small> </div> </div> <!-- CARD 5: Completed Stays (Circular Gauge) --> <div class="col-12 col-md-6 col-lg-4"> <div class="dashboard-card kpi-completed"> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="d-flex align-items-center gap-2.5"> <div class="icon-box icon-completed"><i class="fa-solid fa-user-check"></i></div> <div> <span class="fw-bold text-dark d-inline-block">Completed Stays</span> <button onclick="showModal('Completed Stays', '60 checked-out stays finalized within the selected duration across all channels.')" class="info-btn">i</button> </div> </div> <!-- SVG Circular Progress Ring (60%) --> <div class="position-relative d-inline-flex align-items-center justify-content-center" style="width: 52px; height: 52px;"> <svg width="52" height="52" viewBox="0 0 36 36" class="transform -rotate-90"> <path stroke="#d1fae5" stroke-width="3.5" fill="none" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <path stroke="#16a34a" stroke-dasharray="60, 100" stroke-width="3.5" stroke-linecap="round" fill="none" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> </svg> <span class="position-absolute fw-extrabold text-success" style="font-size: 0.7rem;">60%</span> </div> </div> <div id="kpi-completed-stays" class="fs-3 font-black font-mono text-dark tracking-tight">60 Stays</div> <small class="text-muted">OTAs: 22 Stays | Direct: 38 Stays</small> </div> </div> <!-- CARD 6: Cancelled Bookings --> <div class="col-12 col-md-6 col-lg-4"> <div class="dashboard-card kpi-cancelled"> <div class="d-flex align-items-center justify-content-between mb-3"> <div class="d-flex align-items-center gap-2.5"> <div class="icon-box icon-cancelled"><i class="fa-solid fa-xmark"></i></div> <div> <span class="fw-bold text-dark d-inline-block">Cancelled Bookings</span> <button onclick="showModal('Cancelled Bookings', 'Total 5 cancelled bookings resulting in lost revenue across OTAs and Front Office Desk.')" class="info-btn">i</button> </div> </div> <div class="sparkbar-container"> <div class="sparkbar-col" style="height: 40%; background: #fca5a5;"></div> <div class="sparkbar-col" style="height: 80%; background: #f87171;"></div> <div class="sparkbar-col" style="height: 100%; background: #ef4444;"></div> <div class="sparkbar-col" style="height: 60%; background: #dc2626;"></div> </div> </div> <div id="kpi-cancelled-count" class="fs-3 font-black font-mono text-danger tracking-tight">-5 Bookings</div> <small class="text-danger fw-bold">OTAs: 3 (₹4,500) | Desk: 2 (₹2,100)</small> </div> </div> <!-- CARD 7: Total Tax (GSTR-1) --> <div class="col-12 col-md-6 col-lg-4"> <div class="dashboard-card kpi-tax"> <div class="d-flex align-items-center justify-content-between mb-3"> <div class="d-flex align-items-center gap-2.5"> <div class="icon-box icon-tax"><i class="fa-solid fa-receipt"></i></div> <div> <span class="fw-bold text-dark d-inline-block">Total Tax (GSTR-1)</span> <button onclick="showModal('Total Tax (GSTR-1)', 'Output GST liability generated across Rooms, Restaurant, and Extra Services.')" class="info-btn">i</button> </div> </div> <i class="fa-solid fa-file-invoice text-warning fs-4"></i> </div> <div class="d-flex align-items-end justify-content-between"> <div> <div id="kpi-total-tax" class="fs-3 font-black font-mono text-amber-800 tracking-tight" style="color: #b45309;">₹14,586.20</div> <small class="text-muted">Calculated across All Hotel Services</small> </div> <div class="sparkbar-container"> <div class="sparkbar-col" style="height: 50%; background: #fde047;"></div> <div class="sparkbar-col" style="height: 70%; background: #eab308;"></div> <div class="sparkbar-col" style="height: 90%; background: #ca8a04;"></div> </div> </div> </div> </div> <!-- CARD 8: OTA Commission --> <div class="col-12 col-md-6 col-lg-4"> <div class="dashboard-card kpi-commission"> <div class="d-flex align-items-center justify-content-between mb-3"> <div class="d-flex align-items-center gap-2.5"> <div class="icon-box icon-commission"><i class="fa-solid fa-percent"></i></div> <div> <span class="fw-bold text-dark d-inline-block">OTA Commission</span> <button onclick="showModal('OTA Commission', 'Total commission fee charged by OTA platforms plus 18% GST on commission.')" class="info-btn">i</button> </div> </div> <span class="trend-badge trend-purple"><i class="fa-solid fa-arrow-trend-up"></i> +5% <span class="text-muted fw-normal ms-0.5">vs last period</span></span> </div> <div class="d-flex align-items-end justify-content-between"> <div> <div id="kpi-ota-commission" class="fs-3 font-black font-mono text-purple tracking-tight" style="color: #6b21a8;">₹5,657.52</div> <small class="text-muted">Includes 18% GST on Commission Fee</small> </div> <div class="sparkbar-container"> <div class="sparkbar-col" style="height: 40%; background: #ddd6fe;"></div> <div class="sparkbar-col" style="height: 70%; background: #c084fc;"></div> <div class="sparkbar-col" style="height: 100%; background: #9333ea;"></div> </div> </div> </div> </div> <!-- CARD 9: Net Bank Settlement --> <div class="col-12 col-md-6 col-lg-4"> <div class="dashboard-card kpi-settlement"> <div class="d-flex align-items-center justify-content-between mb-3"> <div class="d-flex align-items-center gap-2.5"> <div class="icon-box icon-settlement"><i class="fa-solid fa-building-columns"></i></div> <div> <span class="fw-bold text-dark d-inline-block">Net Bank Settlement</span> <button onclick="showModal('Net Bank Settlement', 'Final net receivable money deposited into hotel bank account after commission and PG deductions.')" class="info-btn">i</button> </div> </div> <span class="settled-badge d-flex align-items-center gap-1"><i class="fa-solid fa-circle-check"></i> Settled</span> </div> <div class="d-flex align-items-end justify-content-between"> <div> <div id="kpi-net-settlement" class="fs-3 font-black font-mono text-emerald-700 tracking-tight" style="color: #047857;">₹1,18,245.13</div> <small class="text-muted">Net Cash Realized in Bank</small> </div> <svg width="70" height="28" viewBox="0 0 70 28" fill="none"> <path d="M2 22 Q 18 2, 35 15 T 68 8" stroke="#10b981" stroke-width="3" fill="none" stroke-linecap="round"/> </svg> </div> </div> </div> </div> </section> <!-- 3. ADVANCED HOTEL PERFORMANCE METRICS BAR --> <section class="mb-4"> <div class="row g-2"> <div class="col-12 col-sm-6 col-xl-2.4 col-md-4"> <div class="metric-pill-box"> <div> <span class="text-muted fw-bold d-block" style="font-size: 0.68rem;">RevPAR</span> <span id="metric-revpar" class="fs-5 font-black font-mono text-primary">₹1,852.00</span> </div> <button onclick="showModal('RevPAR (Revenue Per Available Room)', 'Formula: Total Room Revenue / Total Available Rooms (₹1,85,200 / 100 room-nights = ₹1,852.00)')" class="info-btn">i</button> </div> </div> <div class="col-12 col-sm-6 col-xl-2.4 col-md-4"> <div class="metric-pill-box"> <div> <span class="text-muted fw-bold d-block" style="font-size: 0.68rem;">ADR (Avg Daily Rate)</span> <span id="metric-adr" class="fs-5 font-black font-mono text-dark">₹3,086.67</span> </div> <button onclick="showModal('ADR (Average Daily Rate)', 'Formula: Total Room Revenue / Total Sold Rooms (₹1,85,200 / 60 rooms sold = ₹3,086.67)')" class="info-btn">i</button> </div> </div> <div class="col-12 col-sm-6 col-xl-2.4 col-md-4"> <div class="metric-pill-box"> <div> <span class="text-muted fw-bold d-block" style="font-size: 0.68rem;">Occupancy Rate</span> <span id="metric-occ" class="fs-5 font-black font-mono text-success">85.7%</span> </div> <button onclick="showModal('Occupancy Rate', '60 rooms occupied out of 70 total available room-nights in selected operational window.')" class="info-btn">i</button> </div> </div> <div class="col-12 col-sm-6 col-xl-2.4 col-md-4"> <div class="metric-pill-box"> <div> <span class="text-muted fw-bold d-block" style="font-size: 0.68rem;">ALOS (Avg Stay)</span> <span id="metric-alos" class="fs-5 font-black font-mono text-purple" style="color: #7e22ce;">2.4 Nights</span> </div> <button onclick="showModal('ALOS (Average Length of Stay)', 'Formula: Total Occupied Room Nights / Total Completed Bookings (144 room nights / 60 stays = 2.4 nights)')" class="info-btn">i</button> </div> </div> <div class="col-12 col-sm-6 col-xl-2.4 col-md-4"> <div class="metric-pill-box"> <div> <span class="text-muted fw-bold d-block" style="font-size: 0.68rem;">TrevPAR</span> <span id="metric-trevpar" class="fs-5 font-black font-mono text-amber-800" style="color: #b45309;">₹2,845.00</span> </div> <button onclick="showModal('TrevPAR (Total Rev Per Available Room)', 'Formula: Total Gross Hotel Revenue (All Wings) / Total Available Rooms (₹2,84,500 / 100 room nights)')" class="info-btn">i</button> </div> </div> </div> </section> <!-- 4. DETAILED CATEGORY & TOP SELLING ITEMS BREAKDOWN --> <section class="mb-4"> <div class="row g-4"> <!-- Room Categories Performance Table --> <div class="col-12 col-lg-6"> <div class="dashboard-card h-100"> <div class="d-flex align-items-center justify-content-between pb-2 border-bottom mb-3"> <div class="d-flex align-items-center gap-2"> <div class="icon-box icon-room" style="width: 36px; height: 36px; font-size: 0.9rem;"><i class="fa-solid fa-layer-group"></i></div> <h3 class="h6 fw-bold text-dark mb-0">Room Categories Performance</h3> <button onclick="showModal('Room Categories', 'Performance audit per room category (Available, Sold, Occupancy %, Average Rate, and Total Earnings).')" class="info-btn">i</button> </div> <span class="badge bg-light text-muted fw-semibold">4 Categories</span> </div> <div class="table-responsive"> <table class="table table-hover align-middle mb-0 small"> <thead> <tr class="table-light text-muted uppercase" style="font-size: 0.68rem;"> <th>Room Type</th> <th class="text-center">Avail / Sold</th> <th class="text-center">Occupancy</th> <th class="text-end">ADR (Avg)</th> <th class="text-end">Revenue (₹)</th> </tr> </thead> <tbody class="font-medium"> <tr> <td class="fw-bold text-dark"><i class="fa-solid fa-crown text-warning me-1.5"></i>Deluxe King</td> <td class="text-center font-mono">30 / 26</td> <td class="text-center"><span class="badge bg-success-subtle text-success fw-bold">86.6%</span></td> <td class="text-end font-mono">₹3,500</td> <td class="text-end font-mono fw-bold text-dark">₹91,000.00</td> </tr> <tr> <td class="fw-bold text-dark"><i class="fa-solid fa-bed text-primary me-1.5"></i>Deluxe Twin</td> <td class="text-center font-mono">20 / 18</td> <td class="text-center"><span class="badge bg-success-subtle text-success fw-bold">90.0%</span></td> <td class="text-end font-mono">₹2,800</td> <td class="text-end font-mono fw-bold text-dark">₹50,400.00</td> </tr> <tr> <td class="fw-bold text-dark"><i class="fa-solid fa-gem text-purple me-1.5" style="color: #9333ea;"></i>Executive Suite</td> <td class="text-center font-mono">10 / 8</td> <td class="text-center"><span class="badge bg-primary-subtle text-primary fw-bold">80.0%</span></td> <td class="text-end font-mono">₹4,200</td> <td class="text-end font-mono fw-bold text-dark">₹33,600.00</td> </tr> <tr> <td class="fw-bold text-dark"><i class="fa-solid fa-door-closed text-muted me-1.5"></i>Standard Single</td> <td class="text-center font-mono">10 / 8</td> <td class="text-center"><span class="badge bg-primary-subtle text-primary fw-bold">80.0%</span></td> <td class="text-end font-mono">₹1,275</td> <td class="text-end font-mono fw-bold text-dark">₹10,200.00</td> </tr> </tbody> </table> </div> </div> </div> <!-- Restaurant Sales & Top Selling Dishes --> <div class="col-12 col-lg-6"> <div class="dashboard-card h-100"> <div class="d-flex align-items-center justify-content-between pb-2 border-bottom mb-3"> <div class="d-flex align-items-center gap-2"> <div class="icon-box icon-restaurant" style="width: 36px; height: 36px; font-size: 0.9rem;"><i class="fa-solid fa-bowl-food"></i></div> <h3 class="h6 fw-bold text-dark mb-0">Restaurant &amp; Top Selling Dishes</h3> <button onclick="showModal('Top Selling F&B Dishes', 'Ranking of highest performing menu items by total orders and revenue contribution.')" class="info-btn">i</button> </div> <span class="badge bg-success-subtle text-success fw-bold">₹68,300.00 Total</span> </div> <div class="table-responsive"> <table class="table table-hover align-middle mb-0 small"> <thead> <tr class="table-light text-muted uppercase" style="font-size: 0.68rem;"> <th>Top Selling Dish</th> <th class="text-center">Category</th> <th class="text-center">Orders</th> <th class="text-end">Revenue (₹)</th> </tr> </thead> <tbody class="font-medium"> <tr> <td class="fw-bold text-dark">Butter Chicken (Boneless)</td> <td class="text-center"><span class="badge bg-light text-dark">À la carte</span></td> <td class="text-center font-mono fw-bold text-primary">142</td> <td class="text-end font-mono fw-bold text-dark">₹28,400.00</td> </tr> <tr> <td class="fw-bold text-dark">Paneer Butter Masala</td> <td class="text-center"><span class="badge bg-light text-dark">À la carte</span></td> <td class="text-center font-mono fw-bold text-primary">118</td> <td class="text-end font-mono fw-bold text-dark">₹18,880.00</td> </tr> <tr> <td class="fw-bold text-dark">Masala Dosa Combo</td> <td class="text-center"><span class="badge bg-light text-dark">Buffet / Breakfast</span></td> <td class="text-center font-mono fw-bold text-primary">95</td> <td class="text-end font-mono fw-bold text-dark">₹9,500.00</td> </tr> <tr> <td class="fw-bold text-dark">Cold Coffee with Ice Cream</td> <td class="text-center"><span class="badge bg-light text-dark">In-Room Dining</span></td> <td class="text-center font-mono fw-bold text-primary">82</td> <td class="text-end font-mono fw-bold text-dark">₹6,560.00</td> </tr> <tr> <td class="fw-bold text-dark">Fresh Lime Soda (Sweet/Salt)</td> <td class="text-center"><span class="badge bg-light text-dark">Beverages</span></td> <td class="text-center font-mono fw-bold text-primary">124</td> <td class="text-end font-mono fw-bold text-dark">₹4,960.00</td> </tr> </tbody> </table> </div> </div> </div> <!-- Extra Services & Top Services Sold --> <div class="col-12"> <div class="dashboard-card"> <div class="d-flex align-items-center justify-content-between pb-2 border-bottom mb-3"> <div class="d-flex align-items-center gap-2"> <div class="icon-box icon-extra" style="width: 36px; height: 36px; font-size: 0.9rem;"><i class="fa-solid fa-concierge-bell"></i></div> <h3 class="h6 fw-bold text-dark mb-0">Extra Services Breakdown &amp; Top Add-ons</h3> <button onclick="showModal('Extra Services', 'Revenue breakdown from auxiliary guest services (Transfers, Laundry, Spa, Banquets).')" class="info-btn">i</button> </div> <span class="badge bg-purple-subtle text-purple fw-bold" style="color: #7e22ce;">₹31,000.00 Total</span> </div> <div class="row g-3 align-items-center"> <div class="col-12 col-md-4"> <div class="p-3 rounded-3 bg-light border space-y-2"> <div class="d-flex justify-content-between text-muted small"> <span>Airport Pick &amp; Drop:</span> <span class="font-mono fw-bold text-dark">₹12,500 (10 Trips)</span> </div> <div class="d-flex justify-content-between text-muted small"> <span>Laundry &amp; Dry Cleaning:</span> <span class="font-mono fw-bold text-dark">₹6,200 (48 Items)</span> </div> <div class="d-flex justify-content-between text-muted small"> <span>Minibar Consumables:</span> <span class="font-mono fw-bold text-dark">₹4,800 (32 Units)</span> </div> <div class="d-flex justify-content-between text-muted small border-top pt-1"> <span>Ayurvedic Spa &amp; Wellness:</span> <span class="font-mono fw-bold text-purple" style="color: #7e22ce;">₹7,500 (5 Sessions)</span> </div> </div> </div> <div class="col-12 col-md-8"> <div class="table-responsive"> <table class="table table-sm table-hover align-middle mb-0 small"> <thead> <tr class="table-light text-muted uppercase" style="font-size: 0.65rem;"> <th>Top Service Item</th> <th class="text-center">Category</th> <th class="text-center">Usage Count</th> <th class="text-end">Revenue Generated (₹)</th> </tr> </thead> <tbody class="font-medium"> <tr> <td class="fw-bold text-dark">Sedan Airport Transfer</td> <td class="text-center"><span class="badge bg-info-subtle text-info fw-bold">Transport</span></td> <td class="text-center font-mono">10 Transfers</td> <td class="text-end font-mono fw-bold text-dark">₹12,500.00</td> </tr> <tr> <td class="fw-bold text-dark">Full Body Aroma Spa Session</td> <td class="text-center"><span class="badge bg-purple-subtle text-purple fw-bold" style="color: #7e22ce;">Wellness</span></td> <td class="text-center font-mono">5 Sessions</td> <td class="text-end font-mono fw-bold text-dark">₹7,500.00</td> </tr> <tr> <td class="fw-bold text-dark">Express Suit &amp; Dress Laundry</td> <td class="text-center"><span class="badge bg-secondary-subtle text-secondary fw-bold">Housekeeping</span></td> <td class="text-center font-mono">48 Items</td> <td class="text-end font-mono fw-bold text-dark">₹6,200.00</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div> </section> <!-- 5. OPERATING EXPENSES & NET PROFITABILITY SECTION --> <section class="mb-4"> <div class="dashboard-card"> <div class="d-flex align-items-center justify-content-between pb-2 border-bottom mb-3"> <div class="d-flex align-items-center gap-2"> <div class="icon-box icon-cancelled" style="width: 36px; height: 36px; font-size: 0.9rem;"><i class="fa-solid fa-file-circle-minus"></i></div> <h3 class="h6 fw-bold text-dark mb-0">Operating Expenses (OpEx) &amp; Profitability Audit</h3> <button onclick="showModal('Operating Expenses (OpEx)', 'Total monthly hotel operational costs subtracted from gross revenue to determine GOP.')" class="info-btn">i</button> </div> <span class="badge bg-danger-subtle text-danger fw-bold fs-6 font-mono">Total OpEx: ₹1,12,400.00</span> </div> <div class="row g-3 mb-3"> <div class="col-12 col-sm-6 col-md-2.4"> <div class="p-3 rounded-3 bg-light border"> <span class="text-muted fw-bold d-block small mb-1">Housekeeping Supplies</span> <span class="fs-6 font-black font-mono text-dark">₹18,500.00</span> <small class="text-muted d-block" style="font-size: 0.65rem;">Linen, Toiletries, Cleaners</small> </div> </div> <div class="col-12 col-sm-6 col-md-2.4"> <div class="p-3 rounded-3 bg-light border"> <span class="text-muted fw-bold d-block small mb-1">Kitchen Cost (F&amp;B COGS)</span> <span class="fs-6 font-black font-mono text-dark">₹24,200.00</span> <small class="text-muted d-block" style="font-size: 0.65rem;">Groceries, Milk, Meat, Vegetables</small> </div> </div> <div class="col-12 col-sm-6 col-md-2.4"> <div class="p-3 rounded-3 bg-light border"> <span class="text-muted fw-bold d-block small mb-1">Utilities &amp; Wi-Fi</span> <span class="fs-6 font-black font-mono text-dark">₹32,000.00</span> <small class="text-muted d-block" style="font-size: 0.65rem;">Electricity, Water, Internet, Gas</small> </div> </div> <div class="col-12 col-sm-6 col-md-2.4"> <div class="p-3 rounded-3 bg-light border"> <span class="text-muted fw-bold d-block small mb-1">Staff Payroll &amp; Salaries</span> <span class="fs-6 font-black font-mono text-dark">₹28,500.00</span> <small class="text-muted d-block" style="font-size: 0.65rem;">Front Office, Kitchen &amp; Guards</small> </div> </div> <div class="col-12 col-sm-6 col-md-2.4"> <div class="p-3 rounded-3 bg-light border"> <span class="text-muted fw-bold d-block small mb-1">Commissions &amp; PG Fees</span> <span class="fs-6 font-black font-mono text-danger">₹9,200.00</span> <small class="text-muted d-block" style="font-size: 0.65rem;">OTA Comm + PG Gateway Fee</small> </div> </div> </div> <!-- GOP Margin Highlight Banner --> <div class="gop-banner d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3"> <div> <div class="d-flex align-items-center gap-2"> <span class="fw-extrabold text-uppercase tracking-wider" style="font-size: 0.72rem; color: #a7f3d0;">GROSS OPERATING PROFIT (GOP)</span> <button onclick="showModal('Gross Operating Profit', 'Formula: Total Revenue Collected (₹2,84,500) - Total Operating Expenses (₹1,12,400) = GOP (₹1,72,100)')" class="info-btn" style="background: rgba(255,255,255,0.3); color: #fff;">i</button> </div> <div id="gop-amount" class="display-6 font-black font-mono tracking-tight mt-1">₹1,72,100.00</div> </div> <div class="text-md-end"> <span class="badge bg-white text-success fw-black fs-6 rounded-pill px-3 py-1.5 shadow-sm mb-1"> 60.5% GOP MARGIN </span> <small class="text-white-50 d-block">Net Operating Profit Realized Before Tax Deductions</small> </div> </div> </div> </section> <!-- 6. 3-COLUMN CHANNEL SEGMENT BREAKDOWN --> <section class="mb-4"> <div class="row g-4"> <!-- COLUMN 1: Front Office Desk --> <div class="col-12 col-lg-4"> <div class="segment-card segment-desk"> <div class="space-y-3"> <div class="d-flex align-items-center justify-content-between pb-3 border-bottom"> <div class="d-flex align-items-center gap-3"> <div class="icon-box icon-restaurant"><i class="fa-solid fa-hotel"></i></div> <div> <div class="d-flex align-items-center gap-1"> <h3 class="h6 fw-black text-dark mb-0">Front Office Desk</h3> <button onclick="showModal('Front Office Desk', 'Walk-ins, desk reservations, and direct phone bookings.')" class="info-btn">i</button> </div> <small class="text-muted">Walk-ins &amp; Phone Registrations</small> </div> </div> <span class="tag-badge bg-emerald-100 text-emerald-800" style="background: #dcfce7; color: #166534;">DESK</span> </div> <div class="space-y-2.5 small"> <div class="d-flex justify-content-between align-items-center"> <span class="text-muted">Total Front Office Bookings:</span> <div class="d-flex align-items-center gap-2"> <span id="fo-total-bookings" class="fw-extrabold font-mono text-dark fs-6">42 Bookings</span> <span class="trend-badge trend-up">+12%</span> </div> </div> <div class="p-2.5 rounded-3 bg-danger-subtle border border-danger-subtle d-flex justify-content-between align-items-center"> <span class="text-danger fw-bold d-flex align-items-center gap-1.5"> <i class="fa-solid fa-circle-xmark"></i> Desk Cancellations &amp; Lost Value: </span> <span id="fo-cancellation-val" class="fw-bold font-mono text-danger">2 (₹2,100.00)</span> </div> <div class="d-flex justify-content-between align-items-center py-1"> <span class="text-muted">Completed Stays &amp; Realized Cash:</span> <span id="fo-completed-gross" class="fw-extrabold font-mono text-dark">22 Stays (₹58,602.86)</span> </div> <div class="d-flex justify-content-between align-items-center py-1"> <span class="text-muted">Upcoming Desk Arrivals &amp; Projected:</span> <span id="fo-upcoming-val" class="fw-bold font-mono text-primary">18 Stays (₹17,800.00)</span> </div> <div class="p-3 rounded-3 bg-light border space-y-2 mt-2"> <div class="d-flex align-items-center gap-1.5 text-uppercase fw-bold text-success" style="font-size: 0.65rem;"> <i class="fa-solid fa-coins"></i> <span>DESK COLLECTIONS BREAKDOWN</span> </div> <div class="d-flex justify-content-between text-muted"> <span>Cash Collections:</span> <span id="fo-cash-val" class="font-mono text-dark fw-bold">₹18,200.00</span> </div> <div class="d-flex justify-content-between text-muted"> <span>UPI / QR Code Transfer:</span> <span id="fo-upi-val" class="font-mono text-primary fw-bold">₹24,582.86</span> </div> <div class="d-flex justify-content-between text-muted"> <span>POS Card Swipe Machine:</span> <span id="fo-pos-val" class="font-mono text-dark fw-bold">₹15,900.00</span> </div> </div> </div> </div> <div class="d-flex justify-content-between align-items-center pt-3 border-top mt-3"> <span class="fw-extrabold text-dark d-flex align-items-center gap-1"> <i class="fa-solid fa-chart-line text-success"></i> Net Desk Revenue Realized: </span> <span id="fo-net-settlement" class="fw-black font-mono text-success fs-5">₹58,602.86</span> </div> </div> </div> <!-- COLUMN 2: Direct Booking Engine --> <div class="col-12 col-lg-4"> <div class="segment-card segment-web"> <div class="space-y-3"> <div class="d-flex align-items-center justify-content-between pb-3 border-bottom"> <div class="d-flex align-items-center gap-3"> <div class="icon-box icon-room"><i class="fa-solid fa-laptop-code"></i></div> <div> <div class="d-flex align-items-center gap-1"> <h3 class="h6 fw-black text-dark mb-0">Direct Booking Engine</h3> <button onclick="showModal('Direct Booking Engine', 'Official resort website engine reservations.')" class="info-btn">i</button> </div> <small class="text-muted">Official Web Engine (2% PG Fee)</small> </div> </div> <span class="tag-badge bg-blue-100 text-blue-800" style="background: #dbeafe; color: #1e40af;">WEB</span> </div> <div class="space-y-2.5 small"> <div class="d-flex justify-content-between align-items-center"> <span class="text-muted">Total Website Engine Bookings:</span> <div class="d-flex align-items-center gap-2"> <span id="be-total-bookings" class="fw-extrabold font-mono text-dark fs-6">26 Bookings</span> <span class="trend-badge trend-up">+8%</span> </div> </div> <div class="p-2.5 rounded-3 bg-danger-subtle border border-danger-subtle d-flex justify-content-between align-items-center"> <span class="text-danger fw-bold d-flex align-items-center gap-1.5"> <i class="fa-solid fa-circle-xmark"></i> Engine Cancellations &amp; Lost Value: </span> <span id="be-cancellation-val" class="fw-bold font-mono text-danger">0 (₹0.00)</span> </div> <div class="d-flex justify-content-between align-items-center py-1"> <span class="text-muted">Completed Stays &amp; Gross Sales:</span> <span id="be-completed-gross" class="fw-extrabold font-mono text-dark">16 Stays (₹42,169.17)</span> </div> <div class="d-flex justify-content-between align-items-center py-1"> <span class="text-muted">Upcoming Web Arrivals &amp; Projected:</span> <span id="be-upcoming-val" class="fw-bold font-mono text-primary">10 Stays (₹8,500.00)</span> </div> <div class="p-3 rounded-3 bg-light border space-y-2 mt-2"> <div class="d-flex align-items-center gap-1.5 text-uppercase fw-bold text-primary" style="font-size: 0.65rem;"> <i class="fa-solid fa-credit-card"></i> <span>PAYMENT GATEWAY (PG) FEE AUDIT</span> </div> <div class="d-flex justify-content-between text-muted"> <span>Gross Web Engine Collections:</span> <span id="be-gross-collections" class="font-mono text-dark fw-bold">₹42,169.17</span> </div> <div class="d-flex justify-content-between text-muted"> <span>PG Gateway Charges (2%):</span> <span id="be-pg-charge" class="font-mono text-danger fw-bold">-₹843.38</span> </div> <div class="d-flex justify-content-between text-muted border-top pt-1"> <span class="fw-bold text-dark">Net PG Realized Payout:</span> <span id="be-pg-net" class="font-mono text-success fw-bold">₹41,325.79</span> </div> </div> </div> </div> <div class="d-flex justify-content-between align-items-center pt-3 border-top mt-3"> <span class="fw-extrabold text-dark d-flex align-items-center gap-1"> <i class="fa-solid fa-chart-line text-primary"></i> Net Engine Revenue Realized: </span> <span id="be-net-settlement" class="fw-black font-mono text-primary fs-5">₹41,325.79</span> </div> </div> </div> <!-- COLUMN 3: OTA Settlement Hub --> <div class="col-12 col-lg-4"> <div class="segment-card segment-ota"> <div class="space-y-3"> <div class="d-flex align-items-center justify-content-between pb-3 border-bottom"> <div class="d-flex align-items-center gap-3"> <div class="icon-box icon-extra"><i class="fa-solid fa-globe"></i></div> <div> <div class="d-flex align-items-center gap-1"> <h3 class="h6 fw-black text-dark mb-0">OTA Settlement Hub</h3> <button onclick="showModal('OTA Settlement Hub', 'Booking.com, Agoda, MakeMyTrip, Expedia settlement tracking.')" class="info-btn">i</button> </div> <small class="text-muted">Booking.com, Agoda, MakeMyTrip</small> </div> </div> <span class="tag-badge bg-purple-100 text-purple-800" style="background: #f3e8ff; color: #7e22ce;">OTAs</span> </div> <div class="space-y-2.5 small"> <div class="d-flex justify-content-between align-items-center"> <span class="text-muted">Total OTA Bookings Registered:</span> <div class="d-flex align-items-center gap-2"> <span id="ota-total-bookings" class="fw-extrabold font-mono text-dark fs-6">32 Bookings</span> <span class="trend-badge trend-up">+18%</span> </div> </div> <div class="p-2.5 rounded-3 bg-danger-subtle border border-danger-subtle d-flex justify-content-between align-items-center"> <span class="text-danger fw-bold d-flex align-items-center gap-1.5"> <i class="fa-solid fa-circle-xmark"></i> OTA Cancellations &amp; Lost Value: </span> <span id="ota-cancellation-val" class="fw-bold font-mono text-danger">3 (₹4,500.00)</span> </div> <div class="p-3 rounded-3 border space-y-1.5 my-1" style="background: #faf5ff; border-color: #e9d5ff !important;"> <div class="d-flex align-items-center gap-1.5 text-uppercase fw-bold text-purple mb-1" style="font-size: 0.65rem; color: #7e22ce;"> <i class="fa-solid fa-circle-check"></i> <span>A. COMPLETED OTA STAYS (REALIZED)</span> </div> <div class="d-flex justify-content-between text-muted"> <span>Gross OTA Revenue (22 Stays):</span> <span id="ota-completed-gross" class="font-mono text-dark fw-bold">₹37,716.82</span> </div> <div class="d-flex justify-content-between text-muted"> <span>OTA Commission Paid (15% Avg):</span> <span id="ota-comm-fee" class="font-mono text-danger fw-bold">-₹5,657.52</span> </div> <div class="d-flex justify-content-between text-muted border-top pt-1"> <span class="fw-bold text-purple" style="color: #7e22ce;">Realized OTA Net Receivable:</span> <span id="ota-net-settlement" class="font-mono text-success fw-extrabold">₹30,286.61</span> </div> </div> <div class="p-3 rounded-3 border space-y-1.5 my-1" style="background: #fffbeb; border-color: #fef08a !important;"> <div class="d-flex align-items-center gap-1.5 text-uppercase fw-bold text-amber-800 mb-1" style="font-size: 0.65rem; color: #b45309;"> <i class="fa-solid fa-clock"></i> <span>B. UPCOMING OTA STAYS (PROJECTED)</span> </div> <div class="d-flex justify-content-between text-muted"> <span>Projected Gross OTA Value (7 Stays):</span> <span id="ota-proj-gross" class="font-mono text-dark fw-bold">₹9,647.00</span> </div> <div class="d-flex justify-content-between text-muted"> <span>Est. Commission Payable (15%):</span> <span id="ota-proj-comm" class="font-mono text-danger fw-bold">-₹1,447.00</span> </div> <div class="d-flex justify-content-between text-muted border-top pt-1"> <span class="fw-bold text-dark">Projected OTA Net Receivable:</span> <span id="ota-proj-net" class="font-mono text-primary fw-extrabold">₹8,200.00</span> </div> </div> </div> </div> <div class="d-flex justify-content-between align-items-center pt-3 border-top mt-3"> <span class="fw-extrabold text-dark d-flex align-items-center gap-1"> <i class="fa-solid fa-chart-line text-purple" style="color: #9333ea;"></i> Realized OTA Net Received: </span> <span id="ota-realized-footer" class="fw-black font-mono text-purple fs-5" style="color: #7e22ce;">₹30,286.61</span> </div> </div> </div> </div> </section> <!-- 7. PAYMENT MODE COLLECTIONS & MULTI-CHART ANALYTICS --> <section class="mb-4"> <div class="row g-4"> <!-- Chart 1: Donut Chart --> <div class="col-12 col-lg-5"> <div class="dashboard-card h-100 d-flex flex-column justify-content-between"> <div class="d-flex align-items-center justify-content-between pb-2 border-bottom"> <div class="d-flex align-items-center gap-2"> <div class="icon-box icon-room" style="width: 36px; height: 36px; font-size: 0.9rem;"><i class="fa-solid fa-chart-pie"></i></div> <h3 class="h6 fw-bold text-dark mb-0">Payment Mode Collection Breakdown</h3> <button onclick="showModal('Payment Mode Breakdown', 'Share of total payments processed across Cash, UPI, POS, OTA Virtual Cards, and Credit.')" class="info-btn">i</button> </div> </div> <div class="position-relative my-3 d-flex align-items-center justify-content-center" style="height: 200px;"> <canvas id="paymentDonutChart"></canvas> </div> <div class="space-y-1.5 pt-2 border-top small"> <div class="d-flex align-items-center justify-content-between"> <div class="d-flex align-items-center gap-2"> <span class="rounded-circle" style="width: 10px; height: 10px; background: #10b981;"></span> <span>Cash Collections</span> </div> <span class="text-muted font-mono">15.4%</span> <span class="fw-bold font-mono">₹18,200.00</span> </div> <div class="d-flex align-items-center justify-content-between"> <div class="d-flex align-items-center gap-2"> <span class="rounded-circle" style="width: 10px; height: 10px; background: #2563eb;"></span> <span>UPI / QR Code Transfer</span> </div> <span class="text-muted font-mono">20.7%</span> <span class="fw-bold font-mono">₹24,582.86</span> </div> <div class="d-flex align-items-center justify-content-between"> <div class="d-flex align-items-center gap-2"> <span class="rounded-circle" style="width: 10px; height: 10px; background: #9333ea;"></span> <span>OTA Virtual Cards</span> </div> <span class="text-muted font-mono">25.6%</span> <span class="fw-bold font-mono">₹30,286.61</span> </div> <div class="d-flex align-items-center justify-content-between"> <div class="d-flex align-items-center gap-2"> <span class="rounded-circle" style="width: 10px; height: 10px; background: #6366f1;"></span> <span>POS Card Swipe Machine</span> </div> <span class="text-muted font-mono">35.3%</span> <span class="fw-bold font-mono">₹41,755.66</span> </div> </div> </div> </div> <!-- Chart 2 & 3: Revenue vs Expense Bar Chart + Channel Share --> <div class="col-12 col-lg-7"> <div class="space-y-4"> <!-- Chart 2: Revenue vs Expenses Monthly Trend Bar Chart --> <div class="dashboard-card"> <div class="d-flex align-items-center justify-content-between pb-2 border-bottom mb-3"> <div class="d-flex align-items-center gap-2"> <div class="icon-box icon-settlement" style="width: 36px; height: 36px; font-size: 0.9rem;"><i class="fa-solid fa-chart-column"></i></div> <h3 class="h6 fw-bold text-dark mb-0">Monthly Revenue vs. Operating Expenses Trend</h3> <button onclick="showModal('Revenue vs OpEx Chart', 'Comparing Rooms, Restaurant, and Extra Services against total monthly OpEx.')" class="info-btn">i</button> </div> <span class="badge bg-success-subtle text-success fw-bold">+14.2% Net Margin</span> </div> <div style="height: 220px;"> <canvas id="revVsExpenseChart"></canvas> </div> </div> <!-- Chart 3: Channel Share Doughnut --> <div class="dashboard-card"> <div class="d-flex align-items-center justify-content-between pb-2 border-bottom mb-2"> <div class="d-flex
🖼️ Quick Attached Media
Loading attached media...
#18 Issue Revenue Report
Revenue
Critical Subash
Pending
📝 Description

Revenue Report needs to be fixed for inclusive booking it is showing exclusive gst Multiple room entry shows double amount in the row which is creating a confusion. Need to have a single entry for all the rooms in one booking id.

🖼️ Quick Attached Media
Loading attached media...
#17 Enhancement Revenue Report Page
Report
Medium Subash
Pending
📝 Description

New Design

💻 Attached Code Snippet
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hotel Revenue, Wing-wise GST &amp; Claimables Audit Report</title> <!-- Bootstrap 5 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- FontAwesome Icons --> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> <!-- SheetJS (for Excel Export) --> <script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script> <!-- html2pdf.js (for PDF Export) --> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script> <style> :root { --primary-dark: #0f172a; --accent-blue: #2563eb; } body { background-color: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 0.85rem; color: #334155; } .filter-card { border: 1px solid #e2e8f0; border-radius: 12px; background: #ffffff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); } .kpi-card { border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 16px; background: #ffffff; transition: transform 0.15s ease; } .kpi-card:hover { transform: translateY(-2px); } .report-table-wrapper { overflow-x: auto; max-height: calc(100vh - 320px); border: 1px solid #cbd5e1; border-radius: 8px; background: #ffffff; } .report-table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; } /* Sticky Table Headers */ .report-table thead th { position: sticky; top: 0; z-index: 20; background-color: #0f172a; color: #ffffff; font-weight: 700; font-size: 0.725rem; text-transform: uppercase; letter-spacing: 0.5px; padding: 10px 8px; text-align: center; border-right: 1px solid #334155; border-bottom: 2px solid #0284c7; } .report-table thead tr.sub-header th { top: 38px; z-index: 19; background-color: #1e293b; font-size: 0.68rem; } /* Group Category Header Colors */ .bg-group-bill { background-color: #0f172a !important; } .bg-group-rooms { background-color: #1e3a8a !important; } .bg-group-rest { background-color: #854d0e !important; } .bg-group-banquet { background-color: #831843 !important; } .bg-group-gst { background-color: #b91c1c !important; } .bg-group-totals { background-color: #047857 !important; } .bg-group-claimables { background-color: #581c87 !important; } .report-table td { padding: 8px 8px; vertical-align: middle; border-right: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; white-space: nowrap; font-size: 0.78rem; } .report-table tbody tr:nth-child(even) { background-color: #f8fafc; } .report-table tbody tr:hover { background-color: #f1f5f9; } .report-table tfoot td { position: sticky; bottom: 0; z-index: 18; background-color: #e2e8f0; font-weight: 800; color: #0f172a; border-top: 2px solid #0f172a; } /* Info (i) Icon Button Styling */ .info-icon-btn { background: rgba(255, 255, 255, 0.2); color: #ffffff; border: none; border-radius: 50%; width: 18px; height: 18px; font-size: 0.65rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; margin-left: 5px; transition: background 0.15s ease, transform 0.15s ease; } .info-icon-btn:hover { background: #ffffff; color: #0f172a; transform: scale(1.1); } /* Badges */ .source-badge { font-size: 0.65rem; font-weight: 800; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; } .badge-ota { background-color: #f3e8ff; color: #6b21a8; border: 1px solid #d8b4fe; } .badge-walkin { background-color: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; } .badge-direct { background-color: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; } .text-claimable { color: #7e22ce; font-weight: 700; } .gstin-text { font-family: monospace; font-size: 0.72rem; color: #0369a1; font-weight: 700; } </style> </head> <body class="p-2 p-md-4"> <div class="container-fluid"> <!-- Title Bar & Action Controls --> <div class="d-flex flex-wrap justify-content-between align-items-center mb-3 bg-white p-3 rounded-3 border shadow-sm gap-2"> <div> <h5 class="mb-0 fw-bold text-dark"><i class="fa-solid fa-file-invoice-dollar text-primary me-2"></i>Hotel Financial Audit &amp; Tax Report</h5> <small class="text-muted">Structured breakdown across Wings, Output GST, Grand Total, and final Claimables/OTA Settlement.</small> </div> <div class="d-flex align-items-center gap-2 flex-wrap"> <button class="btn btn-outline-secondary btn-sm fw-bold" data-bs-toggle="offcanvas" data-bs-target="#columnCustomizerCanvas"> <i class="fa-solid fa-sliders me-1"></i> Customize Columns </button> <div class="dropdown"> <button class="btn btn-success btn-sm dropdown-toggle fw-bold" type="button" data-bs-toggle="dropdown"> <i class="fa-solid fa-file-export me-1"></i> Export Report </button> <ul class="dropdown-menu dropdown-menu-end shadow-sm"> <li><a class="dropdown-item" href="#" onclick="exportToExcel()"><i class="fa-solid fa-file-excel text-success me-2"></i>Export to Excel (.xlsx)</a></li> <li><a class="dropdown-item" href="#" onclick="exportToPDF()"><i class="fa-solid fa-file-pdf text-danger me-2"></i>Export to PDF (.pdf)</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#" onclick="window.print()"><i class="fa-solid fa-print text-primary me-2"></i>Print Report</a></li> </ul> </div> </div> </div> <!-- Filters Bar Card --> <div class="filter-card p-3 mb-3"> <div class="row g-2 align-items-end"> <!-- Date Duration Picker --> <div class="col-12 col-md-3"> <label class="form-label fw-bold text-muted mb-1">Start Date</label> <input type="date" id="startDateFilter" class="form-control form-control-sm" value="2026-09-01"> </div> <div class="col-12 col-md-3"> <label class="form-label fw-bold text-muted mb-1">End Date</label> <input type="date" id="endDateFilter" class="form-control form-control-sm" value="2026-09-20"> </div> <!-- Service / Wing Filter --> <div class="col-12 col-md-3"> <label class="form-label fw-bold text-muted mb-1">Wing / Service Category</label> <select id="wingViewFilter" class="form-select form-select-sm" onchange="applyWingFilter()"> <option value="ALL">All Wings (Consolidated View)</option> <option value="ROOMS">Rooms Only</option> <option value="RESTAURANT">Restaurant Only</option> <option value="BANQUET">Banquet Only</option> </select> </div> <div class="col-12 col-md-3"> <button class="btn btn-primary btn-sm w-100 fw-bold" onclick="applyFilters()"> <i class="fa-solid fa-filter me-1"></i> Apply Duration Filter </button> </div> </div> </div> <!-- KPI Summary Row --> <div class="row g-2 mb-3"> <div class="col-6 col-md-2"> <div class="kpi-card border-start border-primary border-4"> <small class="text-muted fw-bold d-block">TOTAL BILLS</small> <span class="fs-6 fw-extrabold text-dark" id="kpiTotalBills">0</span> </div> </div> <div class="col-6 col-md-2"> <div class="kpi-card border-start border-info border-4"> <small class="text-muted fw-bold d-block">TAXABLE VALUE</small> <span class="fs-6 fw-extrabold text-primary" id="kpiTaxableVal">₹0</span> </div> </div> <div class="col-6 col-md-2"> <div class="kpi-card border-start border-danger border-4"> <small class="text-muted fw-bold d-block">TOTAL OUTPUT GST</small> <span class="fs-6 fw-extrabold text-danger" id="kpiOutputGst">₹0</span> </div> </div> <div class="col-6 col-md-2"> <div class="kpi-card border-start border-dark border-4"> <small class="text-muted fw-bold d-block">GRAND BILL TOTAL</small> <span class="fs-6 fw-extrabold text-dark" id="kpiGrandTotal">₹0</span> </div> </div> <div class="col-6 col-md-2"> <div class="kpi-card border-start border-purple border-4" style="border-color: #7e22ce !important;"> <small class="text-muted fw-bold d-block">CLAIMABLES (ITC/TCS/TDS)</small> <span class="fs-6 fw-extrabold text-purple" style="color: #7e22ce;" id="kpiClaimables">₹0</span> </div> </div> <div class="col-6 col-md-2"> <div class="kpi-card border-start border-success border-4 bg-success-subtle"> <small class="text-success fw-bold d-block">NET RECEIVABLE</small> <span class="fs-6 fw-extrabold text-success" id="kpiNetReceivable">₹0</span> </div> </div> </div> <!-- Main Report Table Wrapper --> <div class="report-table-wrapper" id="pdfReportContainer"> <table class="report-table text-end" id="mainReportTable"> <thead> <!-- Top Group Row with Info Buttons --> <tr> <th colspan="4" class="bg-group-bill text-center"> Bill Details <button class="info-icon-btn" onclick="showInfoModal('Bill Details', 'Basic invoice identifier, customer information, Guest GSTIN (for B2B), and invoice date.')"><i class="fa-solid fa-info"></i></button> </th> <th colspan="4" class="bg-group-rooms col-group-rooms text-center"> Room Section <button class="info-icon-btn" onclick="showInfoModal('Room Section', 'Consolidates room numbers, occupancy pax count, booking source, and room tariff before tax.')"><i class="fa-solid fa-info"></i></button> </th> <th colspan="2" class="bg-group-rest col-group-rest text-center"> Restaurant Section <button class="info-icon-btn" onclick="showInfoModal('Restaurant Section', 'Tracks food and beverage taxable sales associated with KOT numbers.')"><i class="fa-solid fa-info"></i></button> </th> <th colspan="2" class="bg-group-banquet col-group-banquet text-center"> Banquet Section <button class="info-icon-btn" onclick="showInfoModal('Banquet Section', 'Covers event hall rentals and banquet taxable amount.')"><i class="fa-solid fa-info"></i></button> </th> <th colspan="1" class="bg-group-totals text-center"> Subtotal <button class="info-icon-btn" onclick="showInfoModal('Subtotal', 'Combined taxable value before applying GST across all wings.')"><i class="fa-solid fa-info"></i></button> </th> <th colspan="4" class="bg-group-gst text-center"> Output GST Section <button class="info-icon-btn" onclick="showInfoModal('Output GST Section', 'Separate GST amounts for Rooms (12%), Restaurant (5%), and Banquet (18%).')"><i class="fa-solid fa-info"></i></button> </th> <th colspan="1" class="bg-group-totals text-center"> Grand Total <button class="info-icon-btn" onclick="showInfoModal('Grand Total', 'Final bill amount including taxable subtotal and total output GST.')"><i class="fa-solid fa-info"></i></button> </th> <th colspan="6" class="bg-group-claimables text-center"> Claimables &amp; OTA Breakup (At Last) <button class="info-icon-btn" onclick="showClaimablesInfoModal()"><i class="fa-solid fa-info"></i></button> </th> </tr> <!-- Column Header Slabs --> <tr class="sub-header"> <!-- Bill Details --> <th class="col-billno text-center">Bill No.</th> <th class="col-customer text-start">Customer / Person</th> <th class="col-gstin text-center">Guest GSTIN</th> <th class="col-date text-center">Date</th> <!-- Room Section --> <th class="col-group-rooms col-roomno text-center">Room(s)</th> <th class="col-group-rooms col-pax text-center">Pax</th> <th class="col-group-rooms col-source text-center">Source</th> <th class="col-group-rooms col-roomtaxable">Room Taxable</th> <!-- Restaurant Section --> <th class="col-group-rest col-restbillno text-center">KOT No.</th> <th class="col-group-rest col-resttaxable">Rest. Taxable</th> <!-- Banquet Section --> <th class="col-group-banquet col-banquetdates text-center">Event Dates</th> <th class="col-group-banquet col-banquettaxable">Banquet Taxable</th> <!-- Subtotal Before Tax --> <th class="col-totalbeforetax fw-bold">Total Before Tax</th> <!-- GST Output Section --> <th class="col-roomgst text-danger">Room GST (12%)</th> <th class="col-restgst text-danger">Rest GST (5%)</th> <th class="col-banquetgst text-danger">Banquet GST (18%)</th> <th class="col-totalgst fw-bold text-danger">Total Output GST</th> <!-- Grand Total --> <th class="col-grandtotal fw-bold text-success">Grand Bill Total</th> <!-- Claimables & OTA Breakup --> <th class="col-otacomm">OTA Comm. Amt</th> <th class="col-itcgst text-claimable">Claimable ITC GST (18%)</th> <th class="col-tcs text-claimable">Claimable TCS (1%)</th> <th class="col-tds text-claimable">Claimable TDS (1%)</th> <th class="col-totalclaimable fw-bold text-purple" style="color: #7e22ce;">Total Claimable</th> <th class="col-netreceivable fw-bold text-success">Final Receivable</th> </tr> </thead> <tbody id="reportTableBody"> <!-- Rows dynamically rendered via JS --> </tbody> <tfoot id="reportTableFooter"> <!-- Dynamic summary totals --> </tfoot> </table> </div> </div> <!-- SECTION INFO MODAL --> <div class="modal fade" id="infoModal" tabindex="-1" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content border-0 shadow"> <div class="modal-header bg-dark text-white"> <h6 class="modal-title fw-bold" id="infoModalTitle"><i class="fa-solid fa-circle-info me-2 text-primary"></i>Section Information</h6> <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body p-4" id="infoModalBody"> <!-- Rendered dynamically --> </div> <div class="modal-footer bg-light"> <button type="button" class="btn btn-secondary btn-sm fw-bold" data-bs-dismiss="modal">Got It</button> </div> </div> </div> </div> <!-- OFFCANVAS COLUMN CUSTOMIZER --> <div class="offcanvas offcanvas-end" tabindex="-1" id="columnCustomizerCanvas"> <div class="offcanvas-header bg-dark text-white"> <h6 class="offcanvas-title fw-bold"><i class="fa-solid fa-sliders me-2"></i>Customize Report Columns</h6> <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button> </div> <div class="offcanvas-body"> <p class="text-muted small">Toggle checkmarks to show or hide specific columns from your financial report.</p> <div class="d-flex justify-content-between mb-2"> <button class="btn btn-sm btn-outline-primary fw-bold" onclick="toggleAllColumns(true)">Select All</button> <button class="btn btn-sm btn-outline-secondary fw-bold" onclick="toggleAllColumns(false)">Deselect All</button> </div> <hr> <div class="d-flex flex-column gap-2" id="columnToggleList"> <!-- Generated Dynamically --> </div> </div> </div> <!-- Bootstrap 5 JS Bundle --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> <script> // Sample Dataset const reportData = [ { billNo: "INV-2026-001", customer: "Satish Kumar", guestGstin: "21ABCDE1234F1Z5", // Guest GSTIN date: "2026-09-02", roomNo: "1004 (King)", pax: "2 A, 1 C", source: "Booking.com", sourceType: "OTA", roomTaxable: 12000, roomGst: 1440, // 12% GST restBillNo: "KOT-9021", restTaxable: 2500, restGst: 125, // 5% GST banquetDates: "-", banquetTaxable: 0, banquetGst: 0, otaCommAmount: 1800, // 15% Comm itcGst: 324, // 18% ITC on Comm tcs: 120, // 1% TCS tds: 120 // 1% TDS }, { billNo: "INV-2026-002", customer: "Apk Testing Ratnesh", guestGstin: "-", date: "2026-09-05", roomNo: "1007 (Twin)", pax: "2 Adults", source: "Walk-In", sourceType: "Walk-In", roomTaxable: 4500, roomGst: 540, restBillNo: "KOT-9088", restTaxable: 1200, restGst: 60, banquetDates: "-", banquetTaxable: 0, banquetGst: 0, otaCommAmount: 0, itcGst: 0, tcs: 0, tds: 0 }, { billNo: "INV-2026-003", customer: "Apex Tech Corp", guestGstin: "27AAACA9876E1Z1", // Guest GSTIN date: "2026-09-12", roomNo: "-", pax: "120 Persons", source: "Direct Corp", sourceType: "Direct", roomTaxable: 0, roomGst: 0, restBillNo: "-", restTaxable: 0, restGst: 0, banquetDates: "12-13 Sep", banquetTaxable: 85000, banquetGst: 15300, // 18% GST otaCommAmount: 0, itcGst: 0, tcs: 0, tds: 0 }, { billNo: "INV-2026-004", customer: "Vikram Sharma", guestGstin: "-", date: "2026-09-18", roomNo: "1000 (Single)", pax: "1 Adult", source: "Agoda", sourceType: "OTA", roomTaxable: 3200, roomGst: 384, restBillNo: "KOT-9140", restTaxable: 850, restGst: 42.5, banquetDates: "-", banquetTaxable: 0, banquetGst: 0, otaCommAmount: 384, itcGst: 69.12, tcs: 32, tds: 32 } ]; // Column Definitions for Dynamic Toggle Customizer const columnDefinitions = [ { id: "col-billno", label: "Bill Number", group: "General", default: true }, { id: "col-customer", label: "Customer Name", group: "General", default: true }, { id: "col-gstin", label: "Guest GSTIN", group: "General", default: true }, { id: "col-date", label: "Date", group: "General", default: true }, { id: "col-roomno", label: "Room No(s)", group: "Rooms", default: true }, { id: "col-pax", label: "Pax (Persons)", group: "Rooms", default: true }, { id: "col-source", label: "Booking Source", group: "Rooms", default: true }, { id: "col-roomtaxable", label: "Room Taxable Amount", group: "Rooms", default: true }, { id: "col-restbillno", label: "KOT/Rest Bill No", group: "Restaurant", default: true }, { id: "col-resttaxable", label: "Rest. Taxable Amount", group: "Restaurant", default: true }, { id: "col-banquetdates", label: "Banquet Event Dates", group: "Banquet", default: true }, { id: "col-banquettaxable", label: "Banquet Taxable Amount", group: "Banquet", default: true }, { id: "col-totalbeforetax", label: "Subtotal Taxable Amount", group: "Totals", default: true }, { id: "col-roomgst", label: "Room GST (12%)", group: "Output GST", default: true }, { id: "col-restgst", label: "Rest GST (5%)", group: "Output GST", default: true }, { id: "col-banquetgst", label: "Banquet GST (18%)", group: "Output GST", default: true }, { id: "col-totalgst", label: "Total Output GST", group: "Output GST", default: true }, { id: "col-grandtotal", label: "Grand Bill Total", group: "Totals", default: true }, { id: "col-otacomm", label: "OTA Commission Amount", group: "Claimables", default: true }, { id: "col-itcgst", label: "Claimable ITC GST (18%)", group: "Claimables", default: true }, { id: "col-tcs", label: "Claimable TCS (1%)", group: "Claimables", default: true }, { id: "col-tds", label: "Claimable TDS (1%)", group: "Claimables", default: true }, { id: "col-totalclaimable", label: "Total Claimable Sum", group: "Claimables", default: true }, { id: "col-netreceivable", label: "Final Net Receivable", group: "Claimables", default: true } ]; const fmt = (num) => "₹" + Number(num || 0).toLocaleString("en-IN", { minimumFractionDigits: 2, maximumFractionDigits: 2 }); const infoModal = new bootstrap.Modal(document.getElementById('infoModal')); function showInfoModal(title, text) { document.getElementById('infoModalTitle').innerText = title + ' Information'; document.getElementById('infoModalBody').innerHTML = `<p class="text-secondary">${text}</p>`; infoModal.show(); } function showClaimablesInfoModal() { document.getElementById('infoModalTitle').innerText = 'Claimables & Tax Compliance Rules'; document.getElementById('infoModalBody').innerHTML = ` <div class="alert alert-purple bg-purple-subtle border-purple text-purple p-3 rounded mb-3" style="color: #7e22ce; background-color: #f3e8ff;"> <strong class="d-block mb-1"><i class="fa-solid fa-shield-halved me-2"></i>Tax &amp; Claim Compliance Rule</strong> <p class="small mb-0">Properties with active <strong>GST registration</strong> can claim <strong>GSTR-3B (ITC on OTA Commission)</strong> and <strong>TCS credits</strong> in monthly GST returns. TDS is claimable in Income Tax filing.</p> </div> <div class="p-3 bg-light border rounded"> <ul class="mb-0 small text-secondary ps-3"> <li class="mb-2"><strong>GSTR-3B (ITC 18%):</strong> Input Tax Credit claimable on commission invoiced by OTAs (Booking.com, Agoda, MakeMyTrip).</li> <li class="mb-2"><strong>TCS (1%):</strong> Tax Collected at Source by OTAs under GST, claimable against monthly GST liabilities.</li> <li><strong>TDS (1%):</strong> Tax Deducted at Source under Income Tax Section 194O. Claimable during annual Income Tax Return (ITR) filing.</li> </ul> </div> `; infoModal.show(); } // Render Table Body Data function renderReportTable(data) { const tbody = document.getElementById("reportTableBody"); tbody.innerHTML = ""; let totRoomTaxable = 0, totRestTaxable = 0, totBanquetTaxable = 0; let totSubtotalTaxable = 0, totRoomGst = 0, totRestGst = 0, totBanquetGst = 0, totOutputGst = 0; let totGrandBill = 0; let totOtaComm = 0, totItcGst = 0, totTcs = 0, totTds = 0, totClaimableSum = 0, totNetReceivable = 0; data.forEach(row => { const rowTaxableSubtotal = row.roomTaxable + row.restTaxable + row.banquetTaxable; const rowOutputGstTotal = row.roomGst + row.restGst + row.banquetGst; const rowGrandBillTotal = rowTaxableSubtotal + rowOutputGstTotal; const rowTotalClaimable = row.itcGst + row.tcs + row.tds; const rowNetReceivable = rowGrandBillTotal - row.otaCommAmount - row.itcGst - row.tcs - row.tds; // Accumulate totRoomTaxable += row.roomTaxable; totRestTaxable += row.restTaxable; totBanquetTaxable += row.banquetTaxable; totSubtotalTaxable += rowTaxableSubtotal; totRoomGst += row.roomGst; totRestGst += row.restGst; totBanquetGst += row.banquetGst; totOutputGst += rowOutputGstTotal; totGrandBill += rowGrandBillTotal; totOtaComm += row.otaCommAmount; totItcGst += row.itcGst; totTcs += row.tcs; totTds += row.tds; totClaimableSum += rowTotalClaimable; totNetReceivable += rowNetReceivable; let badgeClass = "badge-walkin"; if (row.sourceType === "OTA") badgeClass = "badge-ota"; else if (row.sourceType === "Direct") badgeClass = "badge-direct"; const tr = document.createElement("tr"); tr.innerHTML = ` <td class="col-billno text-center fw-bold text-primary">${row.billNo}</td> <td class="col-customer text-start fw-bold">${row.customer}</td> <td class="col-gstin text-center gstin-text">${row.guestGstin}</td> <td class="col-date text-center">${row.date}</td> <td class="col-group-rooms col-roomno text-center">${row.roomNo}</td> <td class="col-group-rooms col-pax text-center">${row.pax}</td> <td class="col-group-rooms col-source text-center"><span class="source-badge ${badgeClass}">${row.source}</span></td> <td class="col-group-rooms col-roomtaxable">${fmt(row.roomTaxable)}</td> <td class="col-group-rest col-restbillno text-center">${row.restBillNo}</td> <td class="col-group-rest col-resttaxable">${fmt(row.restTaxable)}</td> <td class="col-group-banquet col-banquetdates text-center">${row.banquetDates}</td> <td class="col-group-banquet col-banquettaxable">${fmt(row.banquetTaxable)}</td> <td class="col-totalbeforetax fw-bold text-dark">${fmt(rowTaxableSubtotal)}</td> <td class="col-roomgst text-danger">${fmt(row.roomGst)}</td> <td class="col-restgst text-danger">${fmt(row.restGst)}</td> <td class="col-banquetgst text-danger">${fmt(row.banquetGst)}</td> <td class="col-totalgst fw-bold text-danger">${fmt(rowOutputGstTotal)}</td> <td class="col-grandtotal fw-bold text-success fs-6">${fmt(rowGrandBillTotal)}</td> <td class="col-otacomm text-warning fw-bold">${fmt(row.otaCommAmount)}</td> <td class="col-itcgst text-claimable">${fmt(row.itcGst)}</td> <td class="col-tcs text-claimable">${fmt(row.tcs)}</td> <td class="col-tds text-claimable">${fmt(row.tds)}</td> <td class="col-totalclaimable fw-bold text-purple" style="color: #7e22ce;">${fmt(rowTotalClaimable)}</td> <td class="col-netreceivable fw-bold text-success fs-6">${fmt(rowNetReceivable)}</td> `; tbody.appendChild(tr); }); // Render Footer const tfoot = document.getElementById("reportTableFooter"); tfoot.innerHTML = ` <tr> <td class="col-billno text-center">TOTALS</td> <td class="col-customer text-start">${data.length} Records</td> <td class="col-gstin text-center">-</td> <td class="col-date">-</td> <td class="col-group-rooms col-roomno">-</td> <td class="col-group-rooms col-pax">-</td> <td class="col-group-rooms col-source">-</td> <td class="col-group-rooms col-roomtaxable">${fmt(totRoomTaxable)}</td> <td class="col-group-rest col-restbillno">-</td> <td class="col-group-rest col-resttaxable">${fmt(totRestTaxable)}</td> <td class="col-group-banquet col-banquetdates">-</td> <td class="col-group-banquet col-banquettaxable">${fmt(totBanquetTaxable)}</td> <td class="col-totalbeforetax fs-6">${fmt(totSubtotalTaxable)}</td> <td class="col-roomgst text-danger">${fmt(totRoomGst)}</td> <td class="col-restgst text-danger">${fmt(totRestGst)}</td> <td class="col-banquetgst text-danger">${fmt(totBanquetGst)}</td> <td class="col-totalgst text-danger fs-6">${fmt(totOutputGst)}</td> <td class="col-grandtotal text-success fs-5">${fmt(totGrandBill)}</td> <td class="col-otacomm text-warning fs-6">${fmt(totOtaComm)}</td> <td class="col-itcgst text-claimable">${fmt(totItcGst)}</td> <td class="col-tcs text-claimable">${fmt(totTcs)}</td> <td class="col-tds text-claimable">${fmt(totTds)}</td> <td class="col-totalclaimable text-purple fs-6" style="color: #7e22ce;">${fmt(totClaimableSum)}</td> <td class="col-netreceivable text-success fs-5">${fmt(totNetReceivable)}</td> </tr> `; // Update Top KPIs document.getElementById('kpiTotalBills').innerText = data.length; document.getElementById('kpiTaxableVal').innerText = fmt(totSubtotalTaxable); document.getElementById('kpiOutputGst').innerText = fmt(totOutputGst); document.getElementById('kpiGrandTotal').innerText = fmt(totGrandBill); document.getElementById('kpiClaimables').innerText = fmt(totClaimableSum); document.getElementById('kpiNetReceivable').innerText = fmt(totNetReceivable); } // Wing Filter Handler function applyWingFilter() { const wing = document.getElementById("wingViewFilter").value; const roomCols = document.querySelectorAll(".col-group-rooms"); const restCols = document.querySelectorAll(".col-group-rest"); const banquetCols = document.querySelectorAll(".col-group-banquet"); roomCols.forEach(c => c.style.display = ""); restCols.forEach(c => c.style.display = ""); banquetCols.forEach(c => c.style.display = ""); if (wing === "ROOMS") { restCols.forEach(c => c.style.display = "none"); banquetCols.forEach(c => c.style.display = "none"); } else if (wing === "RESTAURANT") { roomCols.forEach(c => c.style.display = "none"); banquetCols.forEach(c => c.style.display = "none"); } else if (wing === "BANQUET") { roomCols.forEach(c => c.style.display = "none"); restCols.forEach(c => c.style.display = "none"); } } // Dynamic Column Customizer Population function renderColumnCustomizer() { const container = document.getElementById("columnToggleList"); container.innerHTML = ""; columnDefinitions.forEach(col => { const div = document.createElement("div"); div.className = "form-check form-switch"; div.innerHTML = ` <input class="form-check-input col-checkbox" type="checkbox" id="check_${col.id}" value="${col.id}" checked onchange="toggleColumnVisibility('${col.id}', this.checked)"> <label class="form-check-label" for="check_${col.id}">${col.label} <small class="text-muted">(${col.group})</small></label> `; container.appendChild(div); }); } function toggleColumnVisibility(colId, isVisible) { const targetCols = document.querySelectorAll(`.${colId}`); targetCols.forEach(el => { el.style.display = isVisible ? "" : "none"; }); } function toggleAllColumns(status) { document.querySelectorAll(".col-checkbox").forEach(chk => { chk.checked = status; toggleColumnVisibility(chk.value, status); }); } // Duration Filter Execution function applyFilters() { const start = document.getElementById("startDateFilter").value; const end = document.getElementById("endDateFilter").value; const filtered = reportData.filter(d => d.date >= start && d.date <= end); renderReportTable(filtered); applyWingFilter(); } // Export to Excel using SheetJS function exportToExcel() { const table = document.getElementById("mainReportTable"); const wb = XLSX.utils.table_to_book(table, { sheet: "Hotel_Audit_Report" }); XLSX.writeFile(wb, `Hotel_Audit_Report_${new Date().toISOString().split('T')[0]}.xlsx`); } // Export to PDF using html2pdf function exportToPDF() { const element = document.getElementById("pdfReportContainer"); const opt = { margin: 0.2, filename: `Hotel_Audit_Report_${new Date().toISOString().split('T')[0]}.pdf`, image: { type: 'jpeg', quality: 0.98 }, html2canvas: { scale: 2 }, jsPDF: { unit: 'in', format: 'a3', orientation: 'landscape' } }; html2pdf().set(opt).from(element).save(); } // Page Load Init renderReportTable(reportData); renderColumnCustomizer(); </script> </body> </html>
🖼️ Quick Attached Media
Loading attached media...
#16 Enhancement Quick Booking Calendar
Quick Booking Calendar
Medium Subash
Pending
📝 Description

New Design for calendar

💻 Attached Code Snippet
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AGMS - 30-Day Room Occupancy & Quick Booking Matrix</title> <!-- Bootstrap 5 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Bootstrap Icons --> <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet"> <style> :root { --room-col-width: 125px; --day-col-width: 105px; --row-height: 68px; } body { background-color: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; user-select: none; } /* Container & Outer Card */ .matrix-card { border: 1px solid #cbd5e1; border-radius: 12px; background: #ffffff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); overflow: hidden; } /* Scrollable Container with Sticky Positioning Support */ .matrix-viewport { overflow: auto; max-height: calc(100vh - 180px); position: relative; background: #ffffff; -webkit-overflow-scrolling: touch; } .matrix-table { border-collapse: separate; border-spacing: 0; width: max-content; } /* 1. STICKY TOP LEFT CORNER HEADER */ .matrix-table th.corner-header { position: sticky; top: 0; left: 0; z-index: 40; background-color: #0f172a; color: #ffffff; width: var(--room-col-width); min-width: var(--room-col-width); padding: 10px 8px; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; border-bottom: 2px solid #334155; border-right: 2px solid #cbd5e1; } /* 2. STICKY TOP DATE HEADERS */ .matrix-table thead th.date-header { position: sticky; top: 0; z-index: 30; background-color: #f1f5f9; color: #334155; font-weight: 700; font-size: 0.75rem; padding: 8px 4px; text-align: center; min-width: var(--day-col-width); width: var(--day-col-width); border-bottom: 2px solid #cbd5e1; border-right: 1px solid #e2e8f0; } /* Highlight Today Column */ .date-header.is-today { background-color: #dbeafe !important; color: #1d4ed8 !important; } /* 3. STICKY FREEZE CATEGORY HEADER ROWS */ .matrix-table tr.category-row td { position: sticky; left: 0; z-index: 25; background-color: #eff6ff; color: #1e40af; font-weight: 800; font-size: 0.8rem; padding: 6px 12px; border-top: 1px solid #cbd5e1; border-bottom: 1px solid #cbd5e1; text-transform: uppercase; letter-spacing: 0.5px; } /* 4. STICKY LEFT ROOM COLUMN CELLS */ .matrix-table td.room-cell { position: sticky; left: 0; z-index: 20; background-color: #ffffff; width: var(--room-col-width); min-width: var(--room-col-width); padding: 6px 8px; border-right: 2px solid #cbd5e1; border-bottom: 1px solid #e2e8f0; vertical-align: middle; } .room-number { font-weight: 800; font-size: 0.9rem; color: #0f172a; } .room-type-sub { font-size: 0.65rem; color: #64748b; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Housekeeping Badge Tags (Read-Only) */ .tag-cleaning-clean { background-color: #d1fae5; color: #047857; border: 1px solid #a7f3d0; } .tag-cleaning-progress { background-color: #fef3c7; color: #b45309; border: 1px solid #fde68a; } .tag-cleaning-needs { background-color: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; } /* Daily Grid Cells */ .matrix-table td.day-cell { min-width: var(--day-col-width); width: var(--day-col-width); height: var(--row-height); padding: 2px; vertical-align: middle; border-right: 1px solid #f1f5f9; border-bottom: 1px solid #e2e8f0; position: relative; } /* Vacant Slot Styling */ .day-cell.vacant-slot { background-color: #f0fdf4; cursor: pointer; text-align: center; transition: background-color 0.15s ease; } .day-cell.vacant-slot:hover, .day-cell.vacant-slot:active { background-color: #bbf7d0 !important; } .vacant-text { font-size: 0.65rem; font-weight: 800; color: #16a34a; letter-spacing: 0.4px; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; } .vacant-text .plus-icon { font-size: 0.75rem; display: none; } .day-cell.vacant-slot:hover .plus-icon { display: block; } /* Booking Span Cards */ .booking-block { border-radius: 6px; padding: 4px 6px; font-size: 0.725rem; font-weight: 700; height: 100%; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); transition: transform 0.1s ease; } .booking-block:active { transform: scale(0.98); } .booking-block.status-booked { background-color: #fef3c7; border: 1px solid #fde68a; color: #b45309; } .booking-block.status-checkedin { background-color: #dbeafe; border: 1px solid #bfdbfe; color: #1d4ed8; } .guest-name-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.725rem; font-weight: 700; color: #0f172a; } /* Booking Source Badges */ .source-badge { font-size: 0.58rem; font-weight: 800; padding: 1px 4px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.3px; } .source-ota { background-color: #7c3aed; color: #ffffff; } .source-walkin { background-color: #2563eb; color: #ffffff; } .source-direct { background-color: #059669; color: #ffffff; } .source-agoda { background-color: #d97706; color: #ffffff; } .booking-amount { font-size: 0.68rem; font-weight: 800; color: #047857; } /* Legend Pills */ .legend-pill { font-size: 0.7rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; display: inline-flex; align-items: center; gap: 4px; } .legend-vacant { background-color: #dcfce7; color: #15803d; } .legend-booked { background-color: #fef3c7; color: #b45309; } .legend-checkedin { background-color: #dbeafe; color: #1e40af; } /* Mobile Responsive Optimizations */ @media (max-width: 768px) { :root { --room-col-width: 110px; --day-col-width: 95px; --row-height: 60px; } .room-number { font-size: 0.8rem; } .room-type-sub { display: none; } .legend-pill { font-size: 0.65rem; padding: 3px 8px; } } </style> </head> <body class="p-2 p-md-4"> <div class="container-fluid p-0 p-md-2"> <!-- Top Header Bar with Legend --> <div class="d-flex flex-wrap justify-content-between align-items-center mb-2 bg-white p-3 rounded-3 border shadow-sm gap-2"> <div> <h6 class="mb-0 fw-bold text-dark"><i class="bi bi-calendar3 me-1 text-primary"></i> 30-Day Occupancy &amp; Quick Reservation Matrix</h6> <small class="text-muted d-block" style="font-size: 0.725rem;">Cleaning status is displayed for reference. Tap any vacant slot to book.</small> </div> <div class="d-flex align-items-center gap-1 flex-wrap"> <span class="legend-pill legend-vacant"><i class="bi bi-plus-circle-fill"></i> Vacant (Bookable)</span> <span class="legend-pill legend-booked"><i class="bi bi-clock-history"></i> Booked</span> <span class="legend-pill legend-checkedin"><i class="bi bi-person-check-fill"></i> Checked-In</span> </div> </div> <!-- 2D Frozen Matrix Viewport --> <div class="matrix-card"> <div class="matrix-viewport"> <table class="matrix-table" id="occupancyMatrixTable"> <thead> <tr id="matrixHeaderRow"> <th class="corner-header">Room / Date</th> <!-- 30 Days Headers generated dynamically --> </tr> </thead> <tbody id="matrixTableBody"> <!-- Fixed Room Categories & Rows generated dynamically --> </tbody> </table> </div> </div> </div> <!-- MODAL 1: BOOKING DETAILS MODAL (VIEW) --> <div class="modal fade" id="viewBookingModal" tabindex="-1" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content border-0 shadow"> <div class="modal-header bg-primary text-white"> <div> <h6 class="modal-title fw-bold mb-0" id="viewModalTitle">Reservation Details</h6> <small id="viewModalSubtitle" style="font-size: 0.75rem; opacity: 0.9;">Booking Ref: #BK-10023</small> </div> <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body p-3 p-md-4"> <div class="d-flex justify-content-between align-items-center p-2 rounded mb-3 border bg-light"> <div class="d-flex align-items-center gap-2"> <i class="bi bi-door-open-fill text-primary fs-5"></i> <div> <span class="fw-bold text-dark d-block" id="viewModalRoom">Room 1004 (Deluxe King)</span> <span class="badge bg-purple text-white" id="viewModalSourceBadge" style="font-size: 0.65rem;">Booking.com</span> </div> </div> <span class="badge bg-warning text-dark px-2 py-1 fs-6" id="viewModalStatusBadge">Booked</span> </div> <div class="p-3 bg-light rounded border mb-3"> <div class="d-flex align-items-center gap-2 mb-2"> <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center fw-bold" style="width: 32px; height: 32px; font-size: 0.85rem;" id="viewModalAvatar"> S </div> <div> <strong class="d-block text-dark" id="viewModalGuestName">Satish Kumar</strong> <small class="text-muted"><i class="bi bi-telephone me-1"></i><span id="viewModalPhone">+91 98765-43210</span></small> </div> </div> <div class="pt-2 border-top d-flex justify-content-between align-items-center"> <span class="text-muted small fw-bold"><i class="bi bi-people-fill me-1 text-secondary"></i>Number of Guests:</span> <span class="fw-bold text-dark" id="viewModalGuests">2 Adults, 1 Child</span> </div> </div> <div class="row g-2 mb-3"> <div class="col-6"> <div class="p-2 border rounded bg-white"> <small class="text-muted d-block text-uppercase fw-bold" style="font-size: 0.65rem;"><i class="bi bi-box-arrow-in-right text-success me-1"></i>Check-In Date</small> <strong class="text-dark" id="viewModalCheckIn">20 Sep 2026</strong> <small class="text-muted d-block" style="font-size: 0.7rem;">12:00 PM</small> </div> </div> <div class="col-6"> <div class="p-2 border rounded bg-white"> <small class="text-muted d-block text-uppercase fw-bold" style="font-size: 0.65rem;"><i class="bi bi-box-arrow-right text-danger me-1"></i>Check-Out Date</small> <strong class="text-dark" id="viewModalCheckOut">29 Sep 2026</strong> <small class="text-muted d-block" style="font-size: 0.7rem;">11:00 AM</small> </div> </div> </div> <div class="p-2 bg-success-subtle text-success border border-success-subtle rounded d-flex justify-content-between align-items-center"> <div> <small class="d-block fw-bold" style="font-size: 0.7rem;">TOTAL BOOKING AMOUNT</small> <span class="fw-bold fs-5" id="viewModalAmount">₹18,000.00</span> </div> <span class="badge bg-success">Paid in Full</span> </div> </div> <div class="modal-footer bg-light"> <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary btn-sm" onclick="alert('Printing guest reservation slip...')"> <i class="bi bi-printer me-1"></i> Print Slip </button> </div> </div> </div> </div> <!-- MODAL 2: INSTANT QUICK RESERVATION MODAL --> <div class="modal fade" id="quickReservationModal" tabindex="-1" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content border-0 shadow"> <div class="modal-header bg-success text-white"> <h6 class="modal-title fw-bold" id="quickBookModalTitle"> <i class="bi bi-lightning-charge-fill me-1"></i> Quick Instant Booking </h6> <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body p-3 p-md-4"> <form id="quickReservationForm"> <div class="alert alert-success-subtle border-success-subtle text-success p-2 rounded mb-3 d-flex align-items-center justify-content-between" style="font-size: 0.8rem;"> <div> <strong class="d-block" id="modalTargetRoomLabel">Room 1004</strong> <small id="modalTargetDateLabel">Check-in: 20 Sep 2026</small> </div> <span class="badge bg-success">Vacant Ready</span> </div> <div class="mb-2"> <label class="form-label text-muted small fw-bold mb-1">Guest Full Name *</label> <input type="text" id="guestNameInput" class="form-control form-control-sm" placeholder="e.g., Satish Kumar" required> </div> <div class="mb-2"> <label class="form-label text-muted small fw-bold mb-1">Mobile Phone Number *</label> <input type="tel" id="guestPhoneInput" class="form-control form-control-sm" placeholder="+91 9876543210" required> </div> <div class="row g-2 mb-2"> <div class="col-6"> <label class="form-label text-muted small fw-bold mb-1">Adults</label> <input type="number" id="adultsInput" value="2" min="1" class="form-control form-control-sm"> </div> <div class="col-6"> <label class="form-label text-muted small fw-bold mb-1">Children</label> <input type="number" id="childrenInput" value="0" min="0" class="form-control form-control-sm"> </div> </div> <div class="mb-2"> <label class="form-label text-muted small fw-bold mb-1">Booking Source *</label> <select id="bookingSourceInput" class="form-select form-select-sm" required> <option value="Walk-In">Walk-In / Front Desk</option> <option value="Booking.com">Booking.com (OTA)</option> <option value="Agoda">Agoda</option> <option value="Direct Web">Direct Website</option> </select> </div> <div class="row g-2 mb-3"> <div class="col-6"> <label class="form-label text-muted small fw-bold mb-1">Nights Stay</label> <input type="number" id="stayNightsInput" value="1" min="1" max="30" class="form-control form-control-sm" required> </div> <div class="col-6"> <label class="form-label text-muted small fw-bold mb-1">Total Amount (₹)</label> <input type="number" id="bookingAmountInput" placeholder="2500.00" class="form-control form-control-sm" required> </div> </div> <div class="d-grid gap-2"> <button type="submit" class="btn btn-success fw-bold"> <i class="bi bi-check-circle me-1"></i> Confirm &amp; Reserve Room </button> </div> </form> </div> </div> </div> </div> <!-- Bootstrap 5 JS Bundle --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> <script> const todayStr = "2026-09-20"; // Generate 30 Calendar Days Starting from Today (20 Sep 2026) const startDate = new Date(); const calendarDays = []; for (let i = 0; i < 30; i++) { const d = new Date(startDate); d.setDate(startDate.getDate() + i); calendarDays.push({ dateStr: d.toISOString().split('T')[0], dayName: d.toLocaleDateString('en-US', { weekday: 'short' }), dayNum: d.getDate(), monthName: d.toLocaleDateString('en-US', { month: 'short' }), isToday: i === 0 }); } // Room Categories Dataset with Read-Only Cleaning Tags const roomCategories = [ { categoryName: "Mountain View Room", rooms: [ { number: "1004", subType: "Deluxe King", cleaningStatus: "Cleaned", lastCleanedDate: "20 Sep" }, { number: "1007", subType: "Deluxe Twin", cleaningStatus: "Needs Cleaning", lastCleanedDate: "18 Sep" }, { number: "1008", subType: "Suite", cleaningStatus: "Under Cleaning", lastCleanedDate: "19 Sep" } ] }, { categoryName: "Non AC Rooms", rooms: [ { number: "1000", subType: "Standard Single", cleaningStatus: "Cleaned", lastCleanedDate: "20 Sep" }, { number: "1001", subType: "Standard Double", cleaningStatus: "Needs Cleaning", lastCleanedDate: "17 Sep" } ] } ]; // Pre-existing Detailed Reservations const activeReservations = [ { id: "BK-9011", roomNumber: "1004", roomType: "Deluxe King", startIndex: 0, nights: 9, guestName: "Satish / Test", phone: "+91 98765-43210", guests: "2 Adults, 1 Child", checkIn: "20 Sep 2026", checkOut: "29 Sep 2026", status: "booked", source: "Booking.com", sourceClass: "source-ota", amount: "₹18,000" }, { id: "BK-8823", roomNumber: "1007", roomType: "Deluxe Twin", startIndex: 0, nights: 4, guestName: "Apk Testing", phone: "+91 91234-56789", guests: "1 Adult", checkIn: "20 Sep 2026", checkOut: "24 Sep 2026", status: "checkedin", source: "Walk-In", sourceClass: "source-walkin", amount: "₹6,500" }, { id: "BK-7712", roomNumber: "1008", roomType: "Suite", startIndex: 0, nights: 3, guestName: "Test Ratnesh", phone: "+91 99887-76655", guests: "2 Adults", checkIn: "20 Sep 2026", checkOut: "23 Sep 2026", status: "booked", source: "Agoda", sourceClass: "source-agoda", amount: "₹5,200" }, { id: "BK-6604", roomNumber: "1000", roomType: "Standard Single", startIndex: 2, nights: 7, guestName: "Satish", phone: "+91 98112-23344", guests: "1 Adult", checkIn: "22 Sep 2026", checkOut: "29 Sep 2026", status: "booked", source: "Direct Web", sourceClass: "source-direct", amount: "₹8,400" } ]; const quickReservationModal = new bootstrap.Modal(document.getElementById('quickReservationModal')); const viewBookingModal = new bootstrap.Modal(document.getElementById('viewBookingModal')); function getCleaningTagInfo(status, dateStr) { switch (status) { case "Cleaned": return { class: "tag-cleaning-clean", icon: "bi-check-circle-fill", label: `Cleaned [${dateStr}]` }; case "Under Cleaning": return { class: "tag-cleaning-progress", icon: "bi-arrow-repeat", label: "Under Cleaning" }; case "Needs Cleaning": default: return { class: "tag-cleaning-needs", icon: "bi-exclamation-triangle-fill", label: "Needs Clean" }; } } // Render Header function renderHeaderDates() { const headerRow = document.getElementById("matrixHeaderRow"); calendarDays.forEach((day) => { const th = document.createElement("th"); th.className = `date-header ${day.isToday ? 'is-today' : ''}`; th.innerHTML = `${day.dayName}<br><span class="fw-extrabold">${day.dayNum} ${day.monthName}</span>`; headerRow.appendChild(th); }); } // Render Matrix Body function renderMatrixBody() { const tbody = document.getElementById("matrixTableBody"); tbody.innerHTML = ""; roomCategories.forEach((cat) => { // Freeze Category Header const catTr = document.createElement("tr"); catTr.className = "category-row"; catTr.innerHTML = `<td colspan="${calendarDays.length + 1}"><i class="bi bi-folder2-open me-1"></i> ${cat.categoryName}</td>`; tbody.appendChild(catTr); cat.rooms.forEach((room) => { const tr = document.createElement("tr"); const tagInfo = getCleaningTagInfo(room.cleaningStatus, room.lastCleanedDate); // Left Room Column with Static Read-Only Housekeeping Badge Tag const roomTd = document.createElement("td"); roomTd.className = "room-cell"; roomTd.innerHTML = ` <div class="d-flex align-items-center justify-content-between"> <span class="room-number">${room.number}</span> <span class="room-type-sub">${room.subType}</span> </div> <div class="mt-1"> <span class="badge ${tagInfo.class} py-1 px-1 fw-bold w-100 d-inline-block text-truncate" style="font-size: 0.58rem;" title="${tagInfo.label}"> <i class="bi ${tagInfo.icon} me-1"></i>${tagInfo.label} </span> </div> `; tr.appendChild(roomTd); let dayIndex = 0; while (dayIndex < calendarDays.length) { const reservation = activeReservations.find( r => r.roomNumber === room.number && r.startIndex === dayIndex ); if (reservation) { const spanTd = document.createElement("td"); spanTd.className = "day-cell p-1"; spanTd.colSpan = reservation.nights; let statusClass = "status-booked"; if (reservation.status === "checkedin") statusClass = "status-checkedin"; spanTd.innerHTML = ` <div class="booking-block ${statusClass}" onclick="openBookingDetails('${reservation.id}')"> <div class="d-flex justify-content-between align-items-center"> <span class="source-badge ${reservation.sourceClass}">${reservation.source}</span> <span class="booking-amount">${reservation.amount}</span> </div> <div class="guest-name-text"><i class="bi bi-person me-1"></i>${reservation.guestName}</div> </div> `; tr.appendChild(spanTd); dayIndex += reservation.nights; } else { // Vacant Cell Slot const vacantTd = document.createElement("td"); vacantTd.className = "day-cell vacant-slot"; const targetDay = calendarDays[dayIndex]; vacantTd.onclick = () => handleVacantClick(room.number, targetDay.dayNum + ' ' + targetDay.monthName); vacantTd.innerHTML = ` <div class="vacant-text"> <span>VACANT</span> <span class="plus-icon"><i class="bi bi-plus-circle-fill"></i></span> </div> `; tr.appendChild(vacantTd); dayIndex++; } } tbody.appendChild(tr); }); }); } function openBookingDetails(bookingId) { const res = activeReservations.find(r => r.id === bookingId); if (!res) return; document.getElementById('viewModalSubtitle').innerText = `Booking Ref ID: #${res.id}`; document.getElementById('viewModalRoom').innerText = `Room ${res.roomNumber} (${res.roomType})`; document.getElementById('viewModalSourceBadge').innerText = res.source; document.getElementById('viewModalStatusBadge').innerText = res.status === 'checkedin' ? 'Checked-In' : 'Booked'; document.getElementById('viewModalStatusBadge').className = `badge ${res.status === 'checkedin' ? 'bg-primary' : 'bg-warning text-dark'} px-2 py-1 fs-6`; document.getElementById('viewModalAvatar').innerText = res.guestName.charAt(0).toUpperCase(); document.getElementById('viewModalGuestName').innerText = res.guestName; document.getElementById('viewModalPhone').innerText = res.phone; document.getElementById('viewModalGuests').innerText = res.guests; document.getElementById('viewModalCheckIn').innerText = res.checkIn; document.getElementById('viewModalCheckOut').innerText = res.checkOut; document.getElementById('viewModalAmount').innerText = res.amount; viewBookingModal.show(); } function handleVacantClick(roomNumber, dateStr) { document.getElementById('modalTargetRoomLabel').innerText = `Room ${roomNumber}`; document.getElementById('modalTargetDateLabel').innerText = `Check-in Date: ${dateStr} 2026`; document.getElementById('guestNameInput').value = ''; document.getElementById('guestPhoneInput').value = ''; document.getElementById('bookingAmountInput').value = ''; quickReservationModal.show(); } document.getElementById('quickReservationForm').addEventListener('submit', function(e) { e.preventDefault(); const guestName = document.getElementById('guestNameInput').value; alert(`Reservation confirmed successfully for ${guestName}!`); quickReservationModal.hide(); }); // Page Load Execution renderHeaderDates(); renderMatrixBody(); </script> </body> </html>
🖼️ Quick Attached Media
Loading attached media...
#15 Issue Restuarant
Restaurant Dashboard
Medium Subash
Pending
📝 Description

Need a report page here for revenue Payment, to be filter wise on month date or duration basis Need a filter in this in pending invoice and settlement for Preparing, Ready to serve ( prerpared ), tabs needs to be there for the same. customer name and number should needs to be also come in the entry so that it will be easier for people to find it.

🖼️ Quick Attached Media
Loading attached media...
#14 Issue Resturant
KOT
Medium Subash
Pending
📝 Description

In Kot Page I want Filter, Preparing, Prepared

🖼️ Quick Attached Media
Loading attached media...
#13 Issue Restaurant
Restaurant Billing
Medium Subas
Pending
📝 Description

No Occupied rooms is getting shown in Restuarant Billing page

🖼️ Quick Attached Media
Loading attached media...
#12 Issue AGMS
AGMS Dashboard
Medium Subas
Pending
📝 Description

AGMS Service Request Not getting Shown in dashboard, Not services are also getting Displayed We need sound and notification to be sent in app for the same also Restuarnt Bill are getting added but I want to display the item and invoice properly in the Details Page ( No item is getting shown ) Order from AGMS are not in KOT and Restaurant Bill Page in the dashboard The Calls and message button needs to connect to hoteliers so that they can chat and HIVA AI needs to be there

🖼️ Quick Attached Media
Loading attached media...
#11 Issue Add a filer for check-in and checkout, Booked filter Only one filter can apply in the particular durations,. Make sure cancel booking from OTAS should not be coming here
OTAs Report
High
Pending
📝 Description

No description provided.

🖼️ Quick Attached Media
Loading attached media...
#10 Issue Booking Engine Data issue and bookings testing
Booking Engine
Critical Subas
Pending
📝 Description

No description provided.

🖼️ Quick Attached Media
Loading attached media...
#8 Issue Dashboard AGMS, Add Service, Minimise Tabs
Dashboard
Critical
Pending
📝 Description

No description provided.

🖼️ Quick Attached Media
Loading attached media...
#7 Enhancement Website Creation features in Hotel-X
New Module Website Creation Template
Medium Subash
Pending
📝 Description

We would like to have a features for hotel so that they can have their own website from hotel-x itself. We will be having template in Hotel-X which they can select or buy and unlock then they can customised directly from hotel-info page. Some features needs direct Google and Api review access like auto collecting a new review directly. I am adding one template which we you can use.

💻 Attached Code Snippet
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Grand Horizon Resort & Spa | Luxury Stay & Beachfront Villas</title> <!-- Google Fonts --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <!-- Bootstrap 5 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- FontAwesome Icons --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"> <!-- Swiper JS CSS for Carousels --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/> <!-- Tailwind CSS for modern utility styling --> <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { theme: { extend: { colors: { gold: { 400: '#D4AF37', 500: '#C5A028', 600: '#B28E1B', }, navy: { 800: '#0B1325', 900: '#050B17', } }, fontFamily: { cinzel: ['Cinzel', 'serif'], sans: ['Plus Jakarta Sans', 'sans-serif'], } } } } </script> <style> :root { --primary-gold: #D4AF37; --dark-navy: #0B1325; --accent-gold: #F3E5AB; --body-text: #4A5568; } body { font-family: 'Plus Jakarta Sans', sans-serif; color: var(--body-text); overflow-x: hidden; background-color: #FAFAFC; } h1, h2, h3, h4, .font-heading { font-family: 'Cinzel', serif; } /* Smooth scroll */ html { scroll-behavior: smooth; } /* Glassmorphism Navigation */ .navbar-custom { transition: all 0.4s ease; background: rgba(11, 19, 37, 0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .navbar-custom.scrolled { background: rgba(11, 19, 37, 0.95); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); padding-top: 0.75rem; padding-bottom: 0.75rem; } /* Custom Floating Badges */ .pulse-glow { animation: pulse-animation 2s infinite; } @keyframes pulse-animation { 0% { box-shadow: 0 0 0 0px rgba(212, 175, 55, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(212, 175, 55, 0); } 100% { box-shadow: 0 0 0 0px rgba(212, 175, 55, 0); } } /* Room Card Hover Effects */ .room-card { transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); } .room-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.12); } .room-card .img-zoom { transition: transform 0.6s ease; } .room-card:hover .img-zoom { transform: scale(1.08); } /* Swiper Hero Styles */ .hero-swiper .swiper-slide { height: 90vh; min-height: 600px; } /* Custom Nav Tabs for Reviews & Places */ .custom-nav-tabs .nav-link { border: none; color: #718096; font-weight: 600; padding: 0.75rem 1.5rem; border-radius: 9999px; transition: all 0.3s; } .custom-nav-tabs .nav-link.active { background-color: var(--dark-navy); color: var(--primary-gold); box-shadow: 0 4px 15px rgba(11, 19, 37, 0.2); } /* Floating Actions Bar */ .floating-action-btn { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: white; box-shadow: 0 6px 20px rgba(0,0,0,0.25); transition: all 0.3s ease; } .floating-action-btn:hover { transform: scale(1.1); color: white; } /* Gallery Item Hover Overlay */ .gallery-item { position: relative; overflow: hidden; border-radius: 12px; cursor: pointer; } .gallery-item .overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(11, 19, 37, 0.85), transparent); opacity: 0; transition: opacity 0.3s ease; } .gallery-item:hover .overlay { opacity: 1; } /* Hide scrollbar for clean horizontal tab lists on mobile */ .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } </style> </head> <body class="antialiased text-slate-700"> <!-- Navigation Bar --> <nav id="mainNavbar" class="navbar navbar-expand-lg fixed-top navbar-dark navbar-custom py-3"> <div class="container mx-auto px-4"> <a class="navbar-brand d-flex align-items-center gap-3" href="#"> <div class="w-10 h-10 rounded-full border-2 border-gold-400 flex items-center justify-content-center bg-navy-800 text-gold-400 font-cinzel font-bold text-xl"> GH </div> <div class="flex flex-col"> <span class="font-cinzel text-lg md:text-xl font-bold tracking-wider text-white">GRAND HORIZON</span> <span class="text-[9px] tracking-[0.25em] text-gold-400 font-sans uppercase font-semibold">Resort & Spa</span> </div> </a> <button class="navbar-toggler border-0 text-white focus:outline-none focus:shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> <i class="fa-solid fa-bars text-2xl"></i> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-menu navbar-nav mx-auto items-center gap-1 lg:gap-3 py-3 lg:py-0 font-medium text-sm"> <li class="nav-item"><a class="nav-link text-white hover:text-gold-400 px-3 transition" href="#home">Home</a></li> <li class="nav-item"><a class="nav-link text-white hover:text-gold-400 px-3 transition" href="#rooms">Rooms & Suites</a></li> <li class="nav-item"><a class="nav-link text-white hover:text-gold-400 px-3 transition" href="#amenities">Amenities</a></li> <li class="nav-item"><a class="nav-link text-white hover:text-gold-400 px-3 transition" href="#nearby">Nearby</a></li> <li class="nav-item"><a class="nav-link text-white hover:text-gold-400 px-3 transition" href="#reach">How to Reach</a></li> <li class="nav-item"><a class="nav-link text-white hover:text-gold-400 px-3 transition" href="#gallery">Gallery</a></li> <li class="nav-item"><a class="nav-link text-white hover:text-gold-400 px-3 transition" href="#reviews">Reviews</a></li> <li class="nav-item"><a class="nav-link text-white hover:text-gold-400 px-3 transition" href="#about">About Us</a></li> </ul> <div class="d-flex align-items-center gap-3"> <a href="#contact" class="hidden sm:inline-flex items-center gap-2 bg-gradient-to-r from-gold-400 to-gold-600 hover:from-gold-500 hover:to-gold-600 text-navy-900 font-bold px-5 py-2.5 rounded-full text-xs uppercase tracking-wider transition shadow-lg transform hover:-translate-y-0.5"> <i class="fa-regular fa-calendar-check text-sm"></i> Book Now </a> </div> </div> </div> </nav> <!-- Hero Slider Section --> <section id="home" class="relative"> <div class="swiper hero-swiper"> <div class="swiper-wrapper"> <!-- Slide 1 --> <div class="swiper-slide relative bg-black"> <img src="https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&w=1920&q=80" class="absolute inset-0 w-full h-full object-cover opacity-60" alt="Resort Pool View" onerror="this.src='https://placehold.co/1920x1080/0b1325/ffffff?text=Grand+Horizon+Resort'"> <div class="absolute inset-0 bg-gradient-to-t from-navy-900 via-transparent to-black/40"></div> <div class="relative z-10 container mx-auto h-full flex items-center justify-center text-center px-4"> <div class="max-w-3xl"> <span class="inline-block border border-gold-400/50 bg-gold-400/10 text-gold-400 text-xs font-semibold uppercase tracking-[0.3em] px-4 py-1.5 rounded-full mb-4"> Welcome To Sanctuary </span> <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold text-white mb-6 leading-tight"> Luxury Beyond <span class="text-transparent bg-clip-text bg-gradient-to-r from-gold-400 to-gold-500">Expectations</span> </h1> <p class="text-gray-200 text-base md:text-lg mb-8 max-w-xl mx-auto font-light"> Experience world-class hospitality, tranquil oceanfront vistas, and timeless elegance at Grand Horizon Resort & Spa. </p> <div class="flex flex-wrap justify-center gap-4"> <a href="#rooms" class="bg-gold-400 hover:bg-gold-500 text-navy-900 font-bold px-8 py-3.5 rounded-full text-sm uppercase tracking-wider transition shadow-lg"> Explore Rooms </a> <a href="#contact" class="border-2 border-white/80 hover:bg-white hover:text-navy-900 text-white font-bold px-8 py-3.5 rounded-full text-sm uppercase tracking-wider transition"> Check Availability </a> </div> </div> </div> </div> <!-- Slide 2 --> <div class="swiper-slide relative bg-black"> <img src="https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?auto=format&fit=crop&w=1920&q=80" class="absolute inset-0 w-full h-full object-cover opacity-60" alt="Luxury Suite" onerror="this.src='https://placehold.co/1920x1080/0b1325/ffffff?text=Luxury+Suites'"> <div class="absolute inset-0 bg-gradient-to-t from-navy-900 via-transparent to-black/40"></div> <div class="relative z-10 container mx-auto h-full flex items-center justify-center text-center px-4"> <div class="max-w-3xl"> <span class="inline-block border border-gold-400/50 bg-gold-400/10 text-gold-400 text-xs font-semibold uppercase tracking-[0.3em] px-4 py-1.5 rounded-full mb-4"> Unmatched Comfort </span> <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold text-white mb-6 leading-tight"> Bespoke Suites & Private Havens </h1> <p class="text-gray-200 text-base md:text-lg mb-8 max-w-xl mx-auto font-light"> Indulge in refined architecture, private infinity pools, and round-the-clock butler services tailored just for you. </p> <div class="flex flex-wrap justify-center gap-4"> <a href="#rooms" class="bg-gold-400 hover:bg-gold-500 text-navy-900 font-bold px-8 py-3.5 rounded-full text-sm uppercase tracking-wider transition shadow-lg"> View Ocean Villas </a> </div> </div> </div> </div> </div> <!-- Pagination / Nav --> <div class="swiper-pagination"></div> <div class="swiper-button-next text-white/70 hover:text-gold-400 hidden md:block"></div> <div class="swiper-button-prev text-white/70 hover:text-gold-400 hidden md:block"></div> </div> <!-- Quick Search Bar Overlay --> <div class="container mx-auto px-4 -mt-14 relative z-20"> <div class="bg-white rounded-2xl shadow-2xl p-4 md:p-6 border border-gray-100 max-w-5xl mx-auto"> <form id="heroSearchForm" class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end"> <div> <label class="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Check-in</label> <div class="relative"> <i class="fa-regular fa-calendar absolute left-3 top-3.5 text-slate-400"></i> <input type="date" class="w-full pl-10 pr-3 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm font-semibold focus:outline-none focus:border-gold-400" required> </div> </div> <div> <label class="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Check-out</label> <div class="relative"> <i class="fa-regular fa-calendar absolute left-3 top-3.5 text-slate-400"></i> <input type="date" class="w-full pl-10 pr-3 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm font-semibold focus:outline-none focus:border-gold-400" required> </div> </div> <div> <label class="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Guests & Rooms</label> <div class="relative"> <i class="fa-solid fa-user-group absolute left-3 top-3.5 text-slate-400"></i> <select class="w-full pl-10 pr-3 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm font-semibold focus:outline-none focus:border-gold-400 appearance-none"> <option>2 Adults, 0 Children</option> <option>2 Adults, 1 Child</option> <option>4 Adults (Family Suite)</option> <option>Group Booking (5+)</option> </select> </div> </div> <div> <button type="submit" class="w-full bg-navy-800 hover:bg-navy-900 text-gold-400 font-bold py-3 rounded-xl transition flex items-center justify-center gap-2"> <i class="fa-solid fa-magnifying-glass"></i> Check Rates </button> </div> </form> </div> </div> </section> <!-- Featured Rooms Section --> <section id="rooms" class="py-20 bg-slate-50"> <div class="container mx-auto px-4"> <div class="text-center max-w-2xl mx-auto mb-16"> <span class="text-xs font-bold uppercase tracking-[0.25em] text-gold-500">Accommodations</span> <h2 class="text-3xl md:text-4xl font-bold text-navy-800 mt-2 mb-4">Handcrafted Rooms & Suites</h2> <div class="w-16 h-1 bg-gold-400 mx-auto rounded-full"></div> <p class="mt-4 text-slate-600 text-sm md:text-base">Immerse yourself in coastal luxury with tailored amenities, private balconies, and breath-taking views.</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> <!-- Room Card 1 --> <div class="room-card bg-white rounded-2xl overflow-hidden shadow-sm border border-slate-100 flex flex-col"> <div class="relative overflow-hidden h-56"> <img src="https://images.unsplash.com/photo-1618773928121-c32242e63f39?auto=format&fit=crop&w=800&q=80" class="img-zoom w-full h-full object-cover" alt="Deluxe Ocean King" onerror="this.src='https://placehold.co/800x600/0b1325/ffffff?text=Deluxe+King'"> <span class="absolute top-4 left-4 bg-navy-900/80 backdrop-blur-md text-gold-400 text-xs font-semibold px-3 py-1 rounded-full">Best Seller</span> <div class="absolute bottom-3 right-3 bg-white/90 backdrop-blur-md text-navy-900 font-bold px-3 py-1 rounded-lg text-xs shadow"> $249 <span class="text-[10px] font-normal text-slate-500">/ night</span> </div> </div> <div class="p-6 flex-1 flex flex-col justify-between"> <div> <div class="flex items-center gap-3 text-xs text-slate-500 mb-2"> <span><i class="fa-solid fa-maximize text-gold-500 mr-1"></i> 45 m²</span> <span><i class="fa-solid fa-user text-gold-500 mr-1"></i> 2 Adults</span> </div> <h3 class="text-xl font-bold text-navy-800 mb-2">Deluxe Ocean King</h3> <p class="text-slate-500 text-xs line-clamp-2 mb-4">Elegant beachfront bedroom with signature king bed, private marble bath, and balcony views.</p> <div class="flex flex-wrap gap-2 mb-6"> <span class="bg-slate-100 text-slate-600 text-[11px] px-2.5 py-1 rounded-md"><i class="fa-solid fa-wifi mr-1 text-slate-400"></i> Free WiFi</span> <span class="bg-slate-100 text-slate-600 text-[11px] px-2.5 py-1 rounded-md"><i class="fa-solid fa-snowflake mr-1 text-slate-400"></i> AC</span> <span class="bg-slate-100 text-slate-600 text-[11px] px-2.5 py-1 rounded-md"><i class="fa-solid fa-water mr-1 text-slate-400"></i> Sea View</span> </div> </div> <div class="flex gap-2"> <button onclick="openBookingModal('Deluxe Ocean King')" class="w-full bg-navy-800 hover:bg-navy-900 text-white font-semibold py-2.5 rounded-xl text-xs transition">Book Now</button> <button onclick="openRoomDetailModal('Deluxe Ocean King', '$249/night', 'https://images.unsplash.com/photo-1618773928121-c32242e63f39?auto=format&fit=crop&w=800&q=80')" class="px-3 py-2.5 border border-slate-200 text-slate-600 rounded-xl hover:bg-slate-50 text-xs transition"><i class="fa-solid fa-eye"></i></button> </div> </div> </div> <!-- Room Card 2 --> <div class="room-card bg-white rounded-2xl overflow-hidden shadow-sm border border-slate-100 flex flex-col"> <div class="relative overflow-hidden h-56"> <img src="https://images.unsplash.com/photo-1590490360182-c33d57733427?auto=format&fit=crop&w=800&q=80" class="img-zoom w-full h-full object-cover" alt="Premier Sunset Suite" onerror="this.src='https://placehold.co/800x600/0b1325/ffffff?text=Sunset+Suite'"> <span class="absolute top-4 left-4 bg-gold-500 text-navy-900 text-xs font-bold px-3 py-1 rounded-full">Popular</span> <div class="absolute bottom-3 right-3 bg-white/90 backdrop-blur-md text-navy-900 font-bold px-3 py-1 rounded-lg text-xs shadow"> $380 <span class="text-[10px] font-normal text-slate-500">/ night</span> </div> </div> <div class="p-6 flex-1 flex flex-col justify-between"> <div> <div class="flex items-center gap-3 text-xs text-slate-500 mb-2"> <span><i class="fa-solid fa-maximize text-gold-500 mr-1"></i> 68 m²</span> <span><i class="fa-solid fa-user text-gold-500 mr-1"></i> 3 Guests</span> </div> <h3 class="text-xl font-bold text-navy-800 mb-2">Premier Sunset Suite</h3> <p class="text-slate-500 text-xs line-clamp-2 mb-4">Spacious living suite featuring panoramic glass walls, jacuzzi, and complimentary champagne.</p> <div class="flex flex-wrap gap-2 mb-6"> <span class="bg-slate-100 text-slate-600 text-[11px] px-2.5 py-1 rounded-md"><i class="fa-solid fa-hot-tub-person mr-1 text-slate-400"></i> Jacuzzi</span> <span class="bg-slate-100 text-slate-600 text-[11px] px-2.5 py-1 rounded-md"><i class="fa-solid fa-wine-glass mr-1 text-slate-400"></i> Mini Bar</span> <span class="bg-slate-100 text-slate-600 text-[11px] px-2.5 py-1 rounded-md"><i class="fa-solid fa-tv mr-1 text-slate-400"></i> 65" TV</span> </div> </div> <div class="flex gap-2"> <button onclick="openBookingModal('Premier Sunset Suite')" class="w-full bg-navy-800 hover:bg-navy-900 text-white font-semibold py-2.5 rounded-xl text-xs transition">Book Now</button> <button onclick="openRoomDetailModal('Premier Sunset Suite', '$380/night', 'https://images.unsplash.com/photo-1590490360182-c33d57733427?auto=format&fit=crop&w=800&q=80')" class="px-3 py-2.5 border border-slate-200 text-slate-600 rounded-xl hover:bg-slate-50 text-xs transition"><i class="fa-solid fa-eye"></i></button> </div> </div> </div> <!-- Room Card 3 --> <div class="room-card bg-white rounded-2xl overflow-hidden shadow-sm border border-slate-100 flex flex-col"> <div class="relative overflow-hidden h-56"> <img src="https://images.unsplash.com/photo-1602002418082-a4443e081dd1?auto=format&fit=crop&w=800&q=80" class="img-zoom w-full h-full object-cover" alt="Executive Beach Villa" onerror="this.src='https://placehold.co/800x600/0b1325/ffffff?text=Executive+Villa'"> <span class="absolute top-4 left-4 bg-navy-900/80 backdrop-blur-md text-gold-400 text-xs font-semibold px-3 py-1 rounded-full">Private Pool</span> <div class="absolute bottom-3 right-3 bg-white/90 backdrop-blur-md text-navy-900 font-bold px-3 py-1 rounded-lg text-xs shadow"> $590 <span class="text-[10px] font-normal text-slate-500">/ night</span> </div> </div> <div class="p-6 flex-1 flex flex-col justify-between"> <div> <div class="flex items-center gap-3 text-xs text-slate-500 mb-2"> <span><i class="fa-solid fa-maximize text-gold-500 mr-1"></i> 110 m²</span> <span><i class="fa-solid fa-user text-gold-500 mr-1"></i> 4 Guests</span> </div> <h3 class="text-xl font-bold text-navy-800 mb-2">Executive Beach Villa</h3> <p class="text-slate-500 text-xs line-clamp-2 mb-4">Standalone beachfront sanctuary with private plunge pool, garden terrace, and personal butler.</p> <div class="flex flex-wrap gap-2 mb-6"> <span class="bg-slate-100 text-slate-600 text-[11px] px-2.5 py-1 rounded-md"><i class="fa-solid fa-person-swimming mr-1 text-slate-400"></i> Private Pool</span> <span class="bg-slate-100 text-slate-600 text-[11px] px-2.5 py-1 rounded-md"><i class="fa-solid fa-concierge-bell mr-1 text-slate-400"></i> Butler</span> </div> </div> <div class="flex gap-2"> <button onclick="openBookingModal('Executive Beach Villa')" class="w-full bg-navy-800 hover:bg-navy-900 text-white font-semibold py-2.5 rounded-xl text-xs transition">Book Now</button> <button onclick="openRoomDetailModal('Executive Beach Villa', '$590/night', 'https://images.unsplash.com/photo-1602002418082-a4443e081dd1?auto=format&fit=crop&w=800&q=80')" class="px-3 py-2.5 border border-slate-200 text-slate-600 rounded-xl hover:bg-slate-50 text-xs transition"><i class="fa-solid fa-eye"></i></button> </div> </div> </div> <!-- Room Card 4 --> <div class="room-card bg-white rounded-2xl overflow-hidden shadow-sm border border-slate-100 flex flex-col"> <div class="relative overflow-hidden h-56"> <img src="https://images.unsplash.com/photo-1578683010236-d716f9a3f461?auto=format&fit=crop&w=800&q=80" class="img-zoom w-full h-full object-cover" alt="Presidential Penthouse" onerror="this.src='https://placehold.co/800x600/0b1325/ffffff?text=Presidential+Penthouse'"> <span class="absolute top-4 left-4 bg-purple-900 text-gold-400 text-xs font-semibold px-3 py-1 rounded-full">Ultra Luxury</span> <div class="absolute bottom-3 right-3 bg-white/90 backdrop-blur-md text-navy-900 font-bold px-3 py-1 rounded-lg text-xs shadow"> $990 <span class="text-[10px] font-normal text-slate-500">/ night</span> </div> </div> <div class="p-6 flex-1 flex flex-col justify-between"> <div> <div class="flex items-center gap-3 text-xs text-slate-500 mb-2"> <span><i class="fa-solid fa-maximize text-gold-500 mr-1"></i> 220 m²</span> <span><i class="fa-solid fa-user text-gold-500 mr-1"></i> 6 Guests</span> </div> <h3 class="text-xl font-bold text-navy-800 mb-2">Presidential Penthouse</h3> <p class="text-slate-500 text-xs line-clamp-2 mb-4">Top-floor residence boasting 360-degree ocean views, formal dining room, private helipad access.</p> <div class="flex flex-wrap gap-2 mb-6"> <span class="bg-slate-100 text-slate-600 text-[11px] px-2.5 py-1 rounded-md"><i class="fa-solid fa-utensils mr-1 text-slate-400"></i> Chef Service</span> <span class="bg-slate-100 text-slate-600 text-[11px] px-2.5 py-1 rounded-md"><i class="fa-solid fa-car mr-1 text-slate-400"></i> Valet Included</span> </div> </div> <div class="flex gap-2"> <button onclick="openBookingModal('Presidential Penthouse')" class="w-full bg-navy-800 hover:bg-navy-900 text-white font-semibold py-2.5 rounded-xl text-xs transition">Book Now</button> <button onclick="openRoomDetailModal('Presidential Penthouse', '$990/night', 'https://images.unsplash.com/photo-1578683010236-d716f9a3f461?auto=format&fit=crop&w=800&q=80')" class="px-3 py-2.5 border border-slate-200 text-slate-600 rounded-xl hover:bg-slate-50 text-xs transition"><i class="fa-solid fa-eye"></i></button> </div> </div> </div> </div> </div> </section> <!-- Hotel Amenities Section --> <section id="amenities" class="py-20 bg-white"> <div class="container mx-auto px-4"> <div class="text-center max-w-2xl mx-auto mb-16"> <span class="text-xs font-bold uppercase tracking-[0.25em] text-gold-500">World Class Facilities</span> <h2 class="text-3xl md:text-4xl font-bold text-navy-800 mt-2 mb-4">Resort Amenities & Services</h2> <div class="w-16 h-1 bg-gold-400 mx-auto rounded-full"></div> </div> <div class="grid grid-cols-2 md:grid-cols-4 gap-6"> <!-- Amenity 1 --> <div class="p-6 rounded-2xl bg-slate-50 border border-slate-100 hover:bg-navy-800 group transition duration-300 text-center"> <div class="w-14 h-14 rounded-2xl bg-gold-400/10 text-gold-500 group-hover:bg-gold-400 group-hover:text-navy-900 flex items-center justify-center text-2xl mx-auto mb-4 transition"> <i class="fa-solid fa-water-ladder"></i> </div> <h4 class="font-bold text-navy-800 group-hover:text-white mb-2 transition text-base">Infinity Pool</h4> <p class="text-xs text-slate-500 group-hover:text-slate-300 transition">Temperature-controlled oceanfront infinity pool with lounge bar.</p> </div> <!-- Amenity 2 --> <div class="p-6 rounded-2xl bg-slate-50 border border-slate-100 hover:bg-navy-800 group transition duration-300 text-center"> <div class="w-14 h-14 rounded-2xl bg-gold-400/10 text-gold-500 group-hover:bg-gold-400 group-hover:text-navy-900 flex items-center justify-center text-2xl mx-auto mb-4 transition"> <i class="fa-solid fa-spa"></i> </div> <h4 class="font-bold text-navy-800 group-hover:text-white mb-2 transition text-base">Holistic Spa & Wellness</h4> <p class="text-xs text-slate-500 group-hover:text-slate-300 transition">Ayurvedic treatments, deep-tissue massages & sauna rooms.</p> </div> <!-- Amenity 3 --> <div class="p-6 rounded-2xl bg-slate-50 border border-slate-100 hover:bg-navy-800 group transition duration-300 text-center"> <div class="w-14 h-14 rounded-2xl bg-gold-400/10 text-gold-500 group-hover:bg-gold-400 group-hover:text-navy-900 flex items-center justify-center text-2xl mx-auto mb-4 transition"> <i class="fa-solid fa-utensils"></i> </div> <h4 class="font-bold text-navy-800 group-hover:text-white mb-2 transition text-base">Fine Dining Michelin Standard</h4> <p class="text-xs text-slate-500 group-hover:text-slate-300 transition">3 world-class restaurants featuring seafood, Asian & Italian cuisine.</p> </div> <!-- Amenity 4 --> <div class="p-6 rounded-2xl bg-slate-50 border border-slate-100 hover:bg-navy-800 group transition duration-300 text-center"> <div class="w-14 h-14 rounded-2xl bg-gold-400/10 text-gold-500 group-hover:bg-gold-400 group-hover:text-navy-900 flex items-center justify-center text-2xl mx-auto mb-4 transition"> <i class="fa-solid fa-bell"></i> </div> <h4 class="font-bold text-navy-800 group-hover:text-white mb-2 transition text-base">24/7 Butler & Room Service</h4> <p class="text-xs text-slate-500 group-hover:text-slate-300 transition">Personal concierge and gourmet in-room dining around the clock.</p> </div> <!-- Amenity 5 --> <div class="p-6 rounded-2xl bg-slate-50 border border-slate-100 hover:bg-navy-800 group transition duration-300 text-center"> <div class="w-14 h-14 rounded-2xl bg-gold-400/10 text-gold-500 group-hover:bg-gold-400 group-hover:text-navy-900 flex items-center justify-center text-2xl mx-auto mb-4 transition"> <i class="fa-solid fa-wifi"></i> </div> <h4 class="font-bold text-navy-800 group-hover:text-white mb-2 transition text-base">Ultra-Fast Wi-Fi</h4> <p class="text-xs text-slate-500 group-hover:text-slate-300 transition">Seamless high-speed optical fiber wireless throughout resort premises.</p> </div> <!-- Amenity 6 --> <div class="p-6 rounded-2xl bg-slate-50 border border-slate-100 hover:bg-navy-800 group transition duration-300 text-center"> <div class="w-14 h-14 rounded-2xl bg-gold-400/10 text-gold-500 group-hover:bg-gold-400 group-hover:text-navy-900 flex items-center justify-center text-2xl mx-auto mb-4 transition"> <i class="fa-solid fa-dumbbell"></i> </div> <h4 class="font-bold text-navy-800 group-hover:text-white mb-2 transition text-base">Modern Fitness Hub</h4> <p class="text-xs text-slate-500 group-hover:text-slate-300 transition">State-of-the-art gym with personal trainers & yoga sunrise sessions.</p> </div> <!-- Amenity 7 --> <div class="p-6 rounded-2xl bg-slate-50 border border-slate-100 hover:bg-navy-800 group transition duration-300 text-center"> <div class="w-14 h-14 rounded-2xl bg-gold-400/10 text-gold-500 group-hover:bg-gold-400 group-hover:text-navy-900 flex items-center justify-center text-2xl mx-auto mb-4 transition"> <i class="fa-solid fa-plane-arrival"></i> </div> <h4 class="font-bold text-navy-800 group-hover:text-white mb-2 transition text-base">Airport Luxury Shuttle</h4> <p class="text-xs text-slate-500 group-hover:text-slate-300 transition">Chauffeur-driven Mercedes Benz pick-up & drop-off available upon request.</p> </div> <!-- Amenity 8 --> <div class="p-6 rounded-2xl bg-slate-50 border border-slate-100 hover:bg-navy-800 group transition duration-300 text-center"> <div class="w-14 h-14 rounded-2xl bg-gold-400/10 text-gold-500 group-hover:bg-gold-400 group-hover:text-navy-900 flex items-center justify-center text-2xl mx-auto mb-4 transition"> <i class="fa-solid fa-square-parking"></i> </div> <h4 class="font-bold text-navy-800 group-hover:text-white mb-2 transition text-base">Complimentary Valet</h4> <p class="text-xs text-slate-500 group-hover:text-slate-300 transition">24-hour secure underground valet parking for guests.</p> </div> </div> </div> </section> <!-- Places Nearby (Tab-wise Section) --> <section id="nearby" class="py-20 bg-slate-50"> <div class="container mx-auto px-4"> <div class="text-center max-w-2xl mx-auto mb-12"> <span class="text-xs font-bold uppercase tracking-[0.25em] text-gold-500">Explore Surroundings</span> <h2 class="text-3xl md:text-4xl font-bold text-navy-800 mt-2 mb-4">Attractions Near Grand Horizon</h2> <div class="w-16 h-1 bg-gold-400 mx-auto rounded-full"></div> </div> <!-- Custom Tabs --> <ul class="nav custom-nav-tabs justify-center gap-2 mb-10 overflow-x-auto no-scrollbar pb-2" id="nearbyTabs" role="tablist"> <li class="nav-item" role="presentation"> <button class="nav-link active" id="attractions-tab" data-bs-toggle="tab" data-bs-target="#attractions" type="button" role="tab"><i class="fa-solid fa-landmark mr-2"></i> Attractions</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="beaches-tab" data-bs-toggle="tab" data-bs-target="#beaches" type="button" role="tab"><i class="fa-solid fa-umbrella-beach mr-2"></i> Beaches & Nature</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="shopping-tab" data-bs-toggle="tab" data-bs-target="#shopping" type="button" role="tab"><i class="fa-solid fa-bag-shopping mr-2"></i> Shopping & Dining</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="transit-tab" data-bs-toggle="tab" data-bs-target="#transit" type="button" role="tab"><i class="fa-solid fa-plane-departure mr-2"></i> Transit Hubs</button> </li> </ul> <!-- Tab Content --> <div class="tab-content" id="nearbyTabsContent"> <!-- Attractions Tab --> <div class="tab-pane fade show active" id="attractions" role="tabpanel"> <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="bg-white rounded-2xl overflow-hidden shadow-sm border border-slate-100 flex flex-col"> <img src="https://images.unsplash.com/photo-1544551763-46a013bb70d5?auto=format&fit=crop&w=600&q=80" class="h-48 w-full object-cover" alt="Heritage Lighthouse" onerror="this.src='https://placehold.co/600x400/0b1325/ffffff?text=Lighthouse'"> <div class="p-5 flex-1 flex flex-col justify-between"> <div> <div class="flex items-center justify-between mb-2"> <h3 class="font-bold text-navy-800 text-lg">Historic Ocean Lighthouse</h3> <span class="bg-gold-400/10 text-gold-600 text-xs font-bold px-2.5 py-1 rounded-full"><i class="fa-solid fa-location-dot"></i> 2.5 km</span> </div> <p class="text-xs text-slate-500 mb-4">A 19th-century coastal landmark offering panoramic views of the entire bay during sunset.</p> </div> <span class="text-xs font-semibold text-slate-400"><i class="fa-regular fa-clock mr-1"></i> 8 mins drive</span> </div> </div> <div class="bg-white rounded-2xl overflow-hidden shadow-sm border border-slate-100 flex flex-col"> <img src="https://images.unsplash.com/photo-1518709268805-4e9042af9f23?auto=format&fit=crop&w=600&q=80" class="h-48 w-full object-cover" alt="Ancient Coastal Fort" onerror="this.src='https://placehold.co/600x400/0b1325/ffffff?text=Coastal+Fort'"> <div class="p-5 flex-1 flex flex-col justify-between"> <div> <div class="flex items-center justify-between mb-2"> <h3 class="font-bold text-navy-800 text-lg">Royal Fort Citadel</h3> <span class="bg-gold-400/10 text-gold-600 text-xs font-bold px-2.5 py-1 rounded-full"><i class="fa-solid fa-location-dot"></i> 5.0 km</span> </div> <p class="text-xs text-slate-500 mb-4">Explore ancient architecture, cannon ramparts, and guided historical walking tours.</p> </div> <span class="text-xs font-semibold text-slate-400"><i class="fa-regular fa-clock mr-1"></i> 15 mins drive</span> </div> </div> <div class="bg-white rounded-2xl overflow-hidden shadow-sm border border-slate-100 flex flex-col"> <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=600&q=80" class="h-48 w-full object-cover" alt="Marine National Park" onerror="this.src='https://placehold.co/600x400/0b1325/ffffff?text=Marine+Park'"> <div class="p-5 flex-1 flex flex-col justify-between"> <div> <div class="flex items-center justify-between mb-2"> <h3 class="font-bold text-navy-800 text-lg">Marine Life Reserve</h3> <span class="bg-gold-400/10 text-gold-600 text-xs font-bold px-2.5 py-1 rounded-full"><i class="fa-solid fa-location-dot"></i> 8.2 km</span> </div> <p class="text-xs text-slate-500 mb-4">Snorkeling, scuba diving sanctuary and sea turtle conservation center.</p> </div> <span class="text-xs font-semibold text-slate-400"><i class="fa-regular fa-clock mr-1"></i> 20 mins drive</span> </div> </div> </div> </div> <!-- Beaches Tab --> <div class="tab-pane fade" id="beaches" role="tabpanel"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="bg-white rounded-2xl overflow-hidden shadow-sm border border-slate-100 flex flex-col md:flex-row"> <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=600&q=80" class="h-48 md:h-auto md:w-48 object-cover" alt="White Sand Beach" onerror="this.src='https://placehold.co/600x400/0b1325/ffffff?text=Golden+Cove'"> <div class="p-5 flex-1 flex flex-col justify-between"> <div> <div class="flex items-center justify-between mb-2"> <h3 class="font-bold text-navy-800 text-lg">Golden Cove Beach</h3> <span class="bg-gold-400/10 text-gold-600 text-xs font-bold px-2.5 py-1 rounded-full">Direct Access</span> </div> <p class="text-xs text-slate-500 mb-4">Pristine white-sand private beach located directly in front of the resort with private cabanas.</p> </div> <span class="text-xs font-semibold text-slate-400"><i class="fa-solid fa-person-walking mr-1"></i> 1 min walk</span> </div> </div> <div class="bg-white rounded-2xl overflow-hidden shadow-sm border border-slate-100 flex flex-col md:flex-row"> <img src="https://images.unsplash.com/photo-1519046904884-53103b34b206?auto=format&fit=crop&w=600&q=80" class="h-48 md:h-auto md:w-48 object-cover" alt="Sunset Bay" onerror="this.src='https://placehold.co/600x400/0b1325/ffffff?text=Sunset+Bay'"> <div class="p-5 flex-1 flex flex-col justify-between"> <div> <div class="flex items-center justify-between mb-2"> <h3 class="font-bold text-navy-800 text-lg">Coral Lagoon Bay</h3> <span class="bg-gold-400/10 text-gold-600 text-xs font-bold px-2.5 py-1 rounded-full">3.1 km</span> </div> <p class="text-xs text-slate-500 mb-4">Calm waters ideal for kayaking, stand-up paddleboarding, and family picnics.</p> </div> <span class="text-xs font-semibold text-slate-400"><i class="fa-regular fa-clock mr-1"></i> 7 mins drive</span> </div> </div> </div> </div> <!-- Shopping Tab --> <div class="tab-pane fade" id="shopping" role="tabpanel"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="bg-white rounded-2xl overflow-hidden shadow-sm border border-slate-100 flex flex-col md:flex-row"> <img src="https://images.unsplash.com/photo-1441986300917-64674bd600d8?auto=format&fit=crop&w=600&q=80" class="h-48 md:h-auto md:w-48 object-cover" alt="Luxury Mall" onerror="this.src='https://placehold.co/600x400/0b1325/ffffff?text=Luxury+Boulevard'"> <div class="p-5 flex-1 flex flex-col justify-between"> <div> <div class="flex items-center justify-between mb-2"> <h3 class="font-bold text-navy-800 text-lg">Grand Avenue Designer Mall</h3> <span class="bg-gold-400/10 text-gold-600 text-xs font-bold px-2.5 py-1 rounded-full">4.5 km</span> </div> <p class="text-xs text-slate-500 mb-4">High-end fashion brands, boutique shops, luxury cinemas, and artisan cafes.</p> </div> <span class="text-xs font-semibold text-slate-400"><i class="fa-regular fa-clock mr-1"></i> 12 mins drive</span> </div> </div> </div> </div> <!-- Transit Tab --> <div class="tab-pane fade" id="transit" role="tabpanel"> <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="p-5 bg-white rounded-2xl border border-slate-100 shadow-sm flex items-center gap-4"> <div class="w-12 h-12 rounded-xl bg-slate-100 text-navy-800 flex items-center justify-center text-xl shrink-0"><i class="fa-solid fa-plane"></i></div> <div> <h4 class="font-bold text-navy-800 text-sm">International Airport (INT)</h4> <p class="text-xs text-slate-500">22 km away (30 min drive)</p> </div> </div> <div class="p-5 bg-white rounded-2xl border border-slate-100 shadow-sm flex items-center gap-4"> <div class="w-12 h-12 rounded-xl bg-slate-100 text-navy-800 flex items-center justify-center text-xl shrink-0"><i class="fa-solid fa-train"></i></div> <div> <h4 class="font-bold text-navy-800 text-sm">Central Railway Station</h4> <p class="text-xs text-slate-500">12 km away (18 min drive)</p> </div> </div> <div class="p-5 bg-white rounded-2xl border border-slate-100 shadow-sm flex items-center gap-4"> <div class="w-12 h-12 rounded-xl bg-slate-100 text-navy-800 flex items-center justify-center text-xl shrink-0"><i class="fa-solid fa-anchor"></i></div> <div> <h4 class="font-bold text-navy-800 text-sm">Marina Cruise Terminal</h4> <p class="text-xs text-slate-500">4 km away (8 min drive)</p> </div> </div> </div> </div> </div> </div> </section> <!-- How to Reach & Explore --> <section id="reach" class="py-20 bg-white"> <div class="container mx-auto px-4"> <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center"> <div class="lg:col-span-5"> <span class="text-xs font-bold uppercase tracking-[0.25em] text-gold-500">Seamless Travel</span> <h2 class="text-3xl md:text-4xl font-bold text-navy-800 mt-2 mb-6">How To Reach Us</h2> <p class="text-slate-600 text-sm leading-relaxed mb-8"> Grand Horizon Resort is conveniently located along the southern coastal highway, easily accessible via luxury shuttles, private taxis, and public transit connections. </p> <div class="space-y-6"> <!-- Air --> <div class="flex gap-4"> <div class="w-10 h-10 rounded-full bg-gold-400/20 text-gold-600 flex items-center justify-center shrink-0 font-bold text-lg"> <i class="fa-solid fa-plane"></i> </div> <div> <h4 class="font-bold text-navy-800 text-base">By Air</h4> <p class="text-xs text-slate-500">Fly into International Airport (INT). We provide complimentary luxury sedan pickup for VIP suite bookings.</p> </div> </div> <!-- Train --> <div class="flex gap-4"> <div class="w-10 h-10 rounded-full bg-gold-400/20 text-gold-600 flex items-center justify-center shrink-0 font-bold text-lg"> <i class="fa-solid fa-train"></i> </div> <div> <h4 class="font-bold text-navy-800 text-base">By Train</h4> <p class="text-xs text-slate-500">Central Express Station is 12 km away. Express cabs are available 24/7 right outside the station terminal.</p> </div> </div> <!-- Road --> <div class="flex gap-4"> <div class="w-10 h-10 rounded-full bg-gold-400/20 text-gold-600 flex items-center justify-center shrink-0 font-bold text-lg"> <i class="fa-solid fa-car"></i> </div> <div> <h4 class="font-bold text-navy-800 text-base">By Road / Private Car</h4> <p class="text-xs text-slate-500">Take Highway Exit 42B towards Ocean Boulevard. Valet parking service will be waiting at our main portico.</p> </div> </div> </div> </div> <!-- Map Box Placeholder --> <div class="lg:col-span-7"> <div class="bg-slate-100 rounded-3xl overflow-hidden shadow-xl border border-slate-200 relative min-h-[380px] flex items-center justify-center"> <div class="absolute inset-0 bg-cover bg-center opacity-75" style="background-image: url('https://images.unsplash.com/photo-1526778548025-fa2f459cd5c1?auto=format&fit=crop&w=1000&q=80');"></div> <div class="relative z-10 text-center p-8 bg-navy-900/85 backdrop-blur-md rounded-2xl max-w-md mx-4 text-white"> <div class="w-12 h-12 bg-gold-400 text-navy-900 rounded-full flex items-center justify-center text-xl mx-auto mb-3"> <i class="fa-solid fa-location-dot"></i> </div> <h3 class="font-bold text-xl mb-1">Grand Horizon Resort & Spa</h3> <p class="text-xs text-slate-300 mb-4">100 Ocean Boulevard, Paradise Bay, CA 90210</p> <a href="https://maps.google.com" target="_blank" class="inline-flex items-center gap-2 bg-gold-400 text-navy-900 font-bold px-5 py-2.5 rounded-full text-xs hover:bg-gold-500 transition"> Open in Google Maps <i class="fa-solid fa-arrow-up-right-from-square"></i> </a> </div> </div> </div> </div> </div> </section> <!-- Gallery Section --> <section id="gallery" class="py-20 bg-slate-50"> <div class="container mx-auto px-4"> <div class="text-center max-w-2xl mx-auto mb-12"> <span class="text-xs font-bold uppercase tracking-[0.25em] text-gold-500">Visual Experience</span> <h2 class="text-3xl md:text-4xl font-bold text-navy-800 mt-2 mb-4">Hotel Photo Gallery</h2> <div class="w-16 h-1 bg-gold-400 mx-auto rounded-full"></div> </div> <!-- Gallery Filter Buttons --> <div class="flex justify-center flex-wrap gap-2 mb-10"> <button onclick="filterGallery('all')" class="gallery-filter-btn px-5 py-2 rounded-full text-xs font-bold bg-navy-800 text-gold-400 shadow">All Showcase</button> <button onclick="filterGallery('rooms')" class="gallery-filter-btn px-5 py-2 rounded-full text-xs font-bold bg-white text-slate-600 hover:bg-slate-200 border">Rooms & Suites</button> <button onclick="filterGallery('dining')" class="gallery-filter-btn px-5 py-2 rounded-full text-xs font-bold bg-white text-slate-600 hover:bg-slate-200 border">Dining & Bars</button> <button onclick="filterGallery('spa')" class="gallery-filter-btn px-5 py-2 rounded-full text-xs font-bold bg-white text-slate-600 hover:bg-slate-200 border">Pool & Spa</button> </div> <!-- Gallery Grid --> <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"> <div class="gallery-item rooms h-64" onclick="openLightbox('https://images.unsplash.com/photo-1618773928121-c32242e63f39?auto=format&fit=crop&w=1200&q=80')"> <img src="https://images.unsplash.com/photo-1618773928121-c32242e63f39?auto=format&fit=crop&w=600&q=80" class="w-full h-full object-cover" alt="Luxury Suite" onerror="this.src='https://placehold.co/600x600/0b1325/ffffff?text=Gallery+1'"> <div class="overlay flex items-end p-4 text-white"> <div> <p class="text-xs text-gold-400 font-semibold">Rooms</p> <h4 class="font-bold text-sm">Ocean View Penthouse</h4> </div> </div> </div> <div class="gallery-item spa h-64" onclick="openLightbox('https://images.unsplash.com/photo-1571896349842-33c89424de2d?auto=format&fit=crop&w=1200&q=80')"> <img src="https://images.unsplash.com/photo-1571896349842-33c89424de2d?auto=format&fit=crop&w=600&q=80" class="w-full h-full object-cover" alt="Infinity Pool" onerror="this.src='https://placehold.co/600x600/0b1325/ffffff?text=Gallery+2'"> <div class="overlay flex items-end p-4 text-white"> <div> <p class="text-xs text-gold-400 font-semibold">Pool & Spa</p> <h4 class="font-bold text-sm">Sunset Infinity Pool</h4> </div> </div> </div> <div class="gallery-item dining h-64" onclick="openLightbox('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=1200&q=80')"> <img src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=600&q=80" class="w-full h-full object-cover" alt="Restaurant" onerror="this.src='https://placehold.co/600x600/0b1325/ffffff?text=Gallery+3'"> <div class="overlay flex items-end p-4 text-white"> <div> <p class="text-xs text-gold-400 font-semibold">Dining</p> <h4 class="font-bold text-sm">Aura Fine Dining Restaurant</h4> </div> </div> </div> <div class="gallery-item spa h-64" onclick="openLightbox('https://images.unsplash.com/photo-1540555700478-4be289fbecef?auto=format&fit=crop&w=1200&q=80')"> <img src="https://images.unsplash.com/photo-1540555700478-4be289fbecef?auto=format&fit=crop&w=600&q=80" class="w-full h-full object-cover" alt="Spa Room" onerror="this.src='https://placehold.co/600x600/0b1325/ffffff?text=Gallery+4'"> <div class="overlay flex items-end p-4 text-white"> <div> <p class="text-xs text-gold-400 font-semibold">Pool & Spa</p> <h4 class="font-bold text-sm">Ayurvedic Spa Room</h4> </div> </div> </div> </div> </div> </section> <!-- Reviews Section (Multi-source Feed + Overall Stats) --> <section id="reviews" class="py-20 bg-white"> <div class="container mx-auto px-4"> <div class="text-center max-w-2xl mx-auto mb-16"> <span class="text-xs font-bold uppercase tracking-[0.25em] text-gold-500">Guest Experiences</span> <h2 class="text-3xl md:text-4xl font-bold text-navy-800 mt-2 mb-4">Ratings & Reviews</h2> <div class="w-16 h-1 bg-gold-400 mx-auto rounded-full"></div> </div> <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start"> <!-- Left Side: Overall Score & Highlight Static Review --> <div class="lg:col-span-5 bg-navy-800 text-white rounded-3xl p-8 shadow-xl"> <div class="flex items-center gap-4 mb-6"> <div class="text-5xl font-extrabold text-gold-400 font-cinzel">4.9</div> <div> <div class="flex text-gold-400 text-sm mb-1"> <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i> </div> <p class="text-xs text-slate-300">Based on <span class="font-bold text-white">1,480+ verified reviews</span></p> </div> </div> <div class="border-t border-slate-700/80 pt-6"> <span class="inline-block bg-gold-400/20 text-gold-400 text-[10px] font-bold uppercase tracking-wider px-3 py-1 rounded-full mb-3">Featured Review Of Month</span> <blockquote class="text-slate-200 text-sm italic leading-relaxed mb-6"> "Staying at Grand Horizon was an unforgettable dream. From private beach access to the incredible butler service by Mr. James, every detail surpassed expectations!" </blockquote> <div class="flex items-center gap-3"> <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=150&q=80" class="w-10 h-10 rounded-full object-cover border-2 border-gold-400" alt="Reviewer Avatar"> <div> <h4 class="font-bold text-sm text-white">Sophia Reynolds</h4> <p class="text-[11px] text-slate-400">Stayed Executive Villa • Aug 2026</p> </div> </div> </div> </div> <!-- Right Side: OTA & Google Review Tabs --> <div class="lg:col-span-7"> <!-- Tab Switcher --> <ul class="nav custom-nav-tabs gap-2 mb-6 border-b border-slate-100 pb-3" id="reviewSourceTabs" role="tablist"> <li class="nav-item"> <button class="nav-link active text-xs" id="google-tab" data-bs-toggle="tab" data-bs-target="#google-reviews" type="button"><i class="fa-brands fa-google text-red-500 mr-1.5"></i> Google (4.9)</button> </li> <li class="nav-item"> <button class="nav-link text-xs" id="trip-tab" data-bs-toggle="tab" data-bs-target="#trip-reviews" type="button"><i class="fa-solid fa-hotel text-emerald-500 mr-1.5"></i> TripAdvisor</button> </li> <li class="nav-item"> <button class="nav-link text-xs" id="mmt-tab" data-bs-toggle="tab" data-bs-target="#mmt-reviews" type="button"><i class="fa-solid fa-plane text-blue-500 mr-1.5"></i> MakeMyTrip</button> </li> <li class="nav-item"> <button class="nav-link text-xs" id="booking-tab" data-bs-toggle="tab" data-bs-target="#booking-reviews" type="button"><i class="fa-solid fa-b text-blue-700 mr-1.5"></i> Booking.com</button> </li> </ul> <!-- Tab Contents --> <div class="tab-content" id="reviewTabsContent"> <!-- Google Reviews Tab --> <div class="tab-pane fade show active" id="google-reviews" role="tabpanel"> <div class="space-y-4"> <div class="p-5 bg-slate-50 rounded-2xl border border-slate-100"> <div class="flex justify-between items-start mb-2"> <div class="flex items-center gap-3"> <div class="w-9 h-9 bg-navy-800 text-gold-400 rounded-full font-bold flex items-center justify-center text-sm">DB</div> <div> <h4 class="font-bold text-navy-800 text-sm">David Miller</h4> <span class="text-[10px] text-slate-400">2 weeks ago on Google</span> </div> </div> <div class="flex text-gold-500 text-xs"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></div> </div> <p class="text-slate-600 text-xs leading-relaxed">Top notch hospitality! Clean infinity pool and exceptional breakfast spread. We will definitely be back next summer.</p> </div> <div class="p-5 bg-slate-50 rounded-2xl border border-slate-100"> <div class="flex justify-between items-start mb-2"> <div class="flex items-center gap-3"> <div class="w-9 h-9 bg-slate-300 text-slate-700 rounded-full font-bold flex items-center justify-center text-sm">AK</div> <div> <h4 class="font-bold text-navy-800 text-sm">Ananya Kapoor</h4> <span class="text-[10px] text-slate-400">1 month ago on Google</span> </div> </div> <div class="flex text-gold-500 text-xs"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></div> </div> <p class="text-slate-600 text-xs leading-relaxed">The Presidential Penthouse is pure luxury! The view of the ocean during sunrise is unmatched.</p> </div> </div> </div> <!-- TripAdvisor Tab --> <div class="tab-pane fade" id="trip-reviews" role="tabpanel"> <div class="p-5 bg-slate-50 rounded-2xl border border-slate-100"> <div class="flex justify-between items-star
🖼️ Quick Attached Media
Loading attached media...
#6 Issue Data Showing Issue
Dashboard
Critical Subash
Pending
📝 Description

Checkin and Occupied Data is not showing Correctly ( Occupied Should Show the occupied irrespective of date duration) From Booking Channel Sections I want the booked number, Dont remove it even if it gets checked in or checked out I want the number Today Checkout Sections, Once Checkout is done it should removed and get blank. Lets Remove the hovering system from the quick Booking and put all the details in pop-up box AGMS should Also show all the occupied rooms not date wise, It should show occupied rooms

🖼️ Quick Attached Media
Loading attached media...
#2 Enhancement Detail Page Changes and Enhancement
High Subash
Approved
📝 Description

Remove this mark as paid button when he is using the togle in the modal it is coming not needed here Here back button needs to be removed and one more link need to be added near to dashboard is all Booking Remove this mark all paid button

🖼️ Quick Attached Media
Loading attached media...