Add 1 files

index.html

@@ -532,7 +532,7 @@
         
         .calendar-day-header {
             text-align: center;
-            font-weight: 600;
+            font-weight: 6z00;
             padding: 10px;
             background-color: #f9f9f9;
             color: var(--primary);
@@ -817,308 +817,341 @@
             justify-content: center;
             gap: 15px;
             margin-bottom: 20px;
-    }
-    
-    .social-btn {
-        width: 40px;
-        height: 40px;
-        border-radius: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: white;
-        cursor: pointer;
-    }
-    
-    .social-btn.google {
-        background-color: #DB4437;
-    }
-    
-    .social-btn.facebook {
-        background-color: #4267B2;
-    }
-    
-    .divider {
-        display: flex;
-        align-items: center;
-        margin: 20px 0;
-    }
-    
-    .divider-line {
-        flex-grow: 1;
-        height: 1px;
-        background-color: #eee;
-    }
-    
-    .divider-text {
-        padding: 0 10px;
-        color: var(--gray);
-        font-size: 14px;
-    }
-    
-    .forgot-password {
-        text-align: right;
-        margin-bottom: 20px;
-    }
-    
-    .forgot-password a {
-        color: var(--secondary);
-        font-size: 13px;
-        text-decoration: none;
-    }
-    
-    .login-footer {
-        text-align: center;
-        margin-top: 20px;
-        font-size: 14px;
-        color: var(--gray);
-    }
-    
-    .login-footer a {
-        color: var(--primary);
-        text-decoration: none;
-        font-weight: 500;
-    }
-    
-    /* Modal */
-    .modal {
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background-color: rgba(0, 0, 0, 0.5);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        z-index: 200;
-        opacity: 0;
-        visibility: hidden;
-        transition: all 0.3s;
-    }
-    
-    .modal.active {
-        opacity: 1;
-        visibility: visible;
-    }
-    
-    .modal-content {
-        background-color: white;
-        border-radius: 10px;
-        width: 90%;
-        max-width: 500px;
-        max-height: 90vh;
-        overflow-y: auto;
-        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
-        transform: translateY(20px);
-        transition: transform 0.3s;
-    }
-    
-    .modal.active .modal-content {
-        transform: translateY(0);
-    }
-    
-    .modal-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 20px;
-        border-bottom: 1px solid #eee;
-    }
-    
-    .modal-title {
-        font-size: 18px;
-        font-weight: 600;
-        color: var(--primary);
-    }
-    
-    .modal-close {
-        background: none;
-        border: none;
-        font-size: 20px;
-        cursor: pointer;
-        color: var(--gray);
-    }
-    
-    .modal-body {
-        padding: 20px;
-    }
-    
-    .modal-footer {
-        padding: 20px;
-        border-top: 1px solid #eee;
-        display: flex;
-        justify-content: flex-end;
-        gap: 10px;
-    }
-    
-    /* Date Picker */
-    .date-range-picker {
-        display: flex;
-        gap: 10px;
-    }
-    
-    .date-input {
-        flex: 1;
-        position: relative;
-    }
-    
-    .date-input i {
-        position: absolute;
-        right: 10px;
-        top: 50%;
-        transform: translateY(-50%);
-        color: var(--gray);
-    }
-    
-    /* Guest Dashboard */
-    .guest-dashboard {
-        display: grid;
-        grid-template-columns: 1fr;
-        gap: 30px;
-    }
-    
-    .guest-greeting {
-        background: linear-gradient(135deg, var(--primary), var(--primary-light));
-        color: white;
-        padding: 30px;
-        border-radius: 10px;
-        margin-bottom: 30px;
-    }
-    
-    .guest-greeting h2 {
-        font-size: 24px;
-        margin-bottom: 10px;
-    }
-    
-    .guest-stats {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-        gap: 15px;
-    }
-    
-    .guest-stat {
-        background-color: rgba(255, 255, 255, 0.1);
-        padding: 15px;
-        border-radius: 5px;
-        text-align: center;
-    }
-    
-    .guest-stat-value {
-        font-size: 24px;
-        font-weight: 700;
-        margin-bottom: 5px;
-    }
-    
-    .guest-stat-label {
-        font-size: 12px;
-        opacity: 0.8;
-    }
-    
-    /* Room Availability */
-    .availability-container {
-        display: flex;
-        gap: 20px;
-    }
-    
-    .availability-filters {
-        width: 250px;
-    }
-    
-    .filter-card {
-        background-color: white;
-        border-radius: 10px;
-        padding: 20px;
-        margin-bottom: 20px;
-    }
-    
-    .filter-title {
-        font-weight: 600;
-        margin-bottom: 15px;
-        color: var(--primary);
-    }
-    
-    .checkbox-group {
-        margin-bottom: 15px;
-    }
-    
-    .checkbox-item {
-        margin-bottom: 10px;
-        display: flex;
-        align-items: center;
-    }
-    
-    .checkbox-item input {
-        margin-right: 10px;
-    }
-    
-    /* Responsive */
-    @media (max-width: 992px) {
-        .dashboard {
-            grid-template-columns: 1fr;
         }
-    }
     
-    @media (max-width: 768px) {
-        .navbar {
-            flex-direction: column;
-            gap: 15px;
+        .social-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            cursor: pointer;
         }
         
-        .nav-links {
-            justify-content: center;
+        .social-btn.google {
+            background-color: #DB4437;
         }
         
-        .user-menu {
+        .social-btn.facebook {
+            background-color: #4267B2;
+        }
+        
+        .divider {
+            display: flex;
+            align-items: center;
+            margin: 20px 0;
+        }
+        
+        .divider-line {
+            flex-grow: 1;
+            height: 1px;
+            background-color: #eee;
+        }
+        
+        .divider-text {
+            padding: 0 10px;
+            color: var(--gray);
+            font-size: 14px;
+        }
+        
+        .forgot-password {
+            text-align: right;
+            margin-bottom: 20px;
+        }
+        
+        .forgot-password a {
+            color: var(--secondary);
+            font-size: 13px;
+            text-decoration: none;
+        }
+        
+        .login-footer {
+            text-align: center;
+            margin-top: 20px;
+            font-size: 14px;
+            color: var(--gray);
+        }
+        
+        .login-footer a {
+            color: var(--primary);
+            text-decoration: none;
+            font-weight: 500;
+        }
+        
+        /* Modal */
+        .modal {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: rgba(0, 0, 0, 0.5);
+            display: flex;
             justify-content: center;
+            align-items: center;
+            z-index: 200;
+            opacity: 0;
+            visibility: hidden;
+            transition: all 0.3s;
         }
         
-        .stats-cards {
-            grid-template-columns: 1fr 1fr;
+        .modal.active {
+            opacity: 1;
+            visibility: visible;
         }
         
-        .form-row {
+        .modal-content {
+            background-color: white;
+            border-radius: 10px;
+            width: 90%;
+            max-width: 500px;
+            max-height: 90vh;
+            overflow-y: auto;
+            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
+            transform: translateY(20px);
+            transition: transform 0.3s;
+        }
+        
+        .modal.active .modal-content {
+            transform: translateY(0);
+        }
+        
+        .modal-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 20px;
+            border-bottom: 1px solid #eee;
+            position: sticky;
+            top: 0;
+            background-color: white;
+        }
+        
+        .modal-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--primary);
+        }
+        
+        .modal-close {
+            background: none;
+            border: none;
+            font-size: 20px;
+            cursor: pointer;
+            color: var(--gray);
+        }
+        
+        .modal-body {
+            padding: 20px;
+        }
+        
+        .modal-footer {
+            padding: 20px;
+            border-top: 1px solid #eee;
+            display: flex;
+            justify-content: flex-end;
+            gap: 10px;
+            position: sticky;
+            bottom: 0;
+            background-color: white;
+        }
+        
+        /* Date Picker */
+        .date-range-picker {
+            display: flex;
+            gap: 10px;
+        }
+        
+        .date-input {
+            flex: 1;
+            position: relative;
+        }
+        
+        .date-input i {
+            position: absolute;
+            right: 10px;
+            top: 50%;
+            transform: translateY(-50%);
+            color: var(--gray);
+        }
+        
+        /* Guest Dashboard */
+        .guest-dashboard {
+            display: grid;
             grid-template-columns: 1fr;
+            gap: 30px;
+        }
+        
+        .guest-greeting {
+            background: linear-gradient(135deg, var(--primary), var(--primary-light));
+            color: white;
+            padding: 30px;
+            border-radius: 10px;
+            margin-bottom: 30px;
+        }
+        
+        .guest-greeting h2 {
+            font-size: 24px;
+            margin-bottom: 10px;
         }
         
+        .guest-stats {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+            gap: 15px;
+        }
+        
+        .guest-stat {
+            background-color: rgba(255, 255, 255, 0.1);
+            padding: 15px;
+            border-radius: 5px;
+            text-align: center;
+        }
+        
+        .guest-stat-value {
+            font-size: 24px;
+            font-weight: 700;
+            margin-bottom: 5px;
+        }
+        
+        .guest-stat-label {
+            font-size: 12px;
+            opacity: 0.8;
+        }
+        
+        /* Room Availability */
         .availability-container {
-            flex-direction: column;
+            display: flex;
+            gap: 20px;
         }
         
         .availability-filters {
-            width: 100%;
+            width: 250px;
         }
-    }
-    
-    @media (max-width: 576px) {
-        .stats-cards {
-            grid-template-columns: 1fr;
+        
+        .filter-card {
+            background-color: white;
+            border-radius: 10px;
+            padding: 20px;
+            margin-bottom: 20px;
         }
         
-        .date-range-picker {
-            flex-direction: column;
+        .filter-title {
+            font-weight: 600;
+            margin-bottom: 15px;
+            color: var(--primary);
         }
-    }
-    
-    /* Animation */
-    @keyframes fadeIn {
-        from {
-            opacity: 0;
+        
+        .checkbox-group {
+            margin-bottom: 15px;
         }
-        to {
-            opacity: 1;
+        
+        .checkbox-item {
+            margin-bottom: 10px;
+            display: flex;
+            align-items: center;
         }
-    }
-    
-    .fade-in {
-        animation: fadeIn 0.5s ease-in-out;
-    }
-</style>
+        
+        .checkbox-item input {
+            margin-right: 10px;
+        }
+        
+        /* Responsive */
+        @media (max-width: 992px) {
+            .dashboard {
+                grid-template-columns: 1fr;
+            }
+        }
+        
+        @media (max-width: 768px) {
+            .navbar {
+                flex-direction: column;
+                gap: 15px;
+            }
+            
+            .nav-links {
+                justify-content: center;
+                flex-wrap: wrap;
+            }
+            
+            .user-menu {
+                justify-content: center;
+            }
+            
+            .stats-cards {
+                grid-template-columns: 1fr 1fr;
+            }
+            
+            .form-row {
+                grid-template-columns: 1fr;
+            }
+            
+            .availability-container {
+                flex-direction: column;
+            }
+            
+            .availability-filters {
+                width: 100%;
+            }
+            
+            .payment-methods {
+                flex-direction: column;
+            }
+            
+            .rooms-grid {
+                grid-template-columns: 1fr;
+            }
+        }
+        
+        @media (max-width: 576px) {
+            .stats-cards {
+                grid-template-columns: 1fr;
+            }
+            
+            .date-range-picker {
+                flex-direction: column;
+            }
+            
+            .invoice-header {
+                flex-direction: column;
+                gap: 20px;
+            }
+            
+            .invoice-row {
+                grid-template-columns: 1fr;
+            }
+            
+            .modal-content {
+                width: 95%;
+            }
+        }
+        
+        /* Animation */
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+            }
+            to {
+                opacity: 1;
+            }
+        }
+        
+        .fade-in {
+            animation: fadeIn 0.5s ease-in-out;
+        }
+        
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+    </style>
 </head>
 <body>
-    <!-- Loading Screen (Would be shown while checking authentication) -->
+    <!-- Loading Screen -->
     <div id="loading-screen" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: white; display: flex; justify-content: center; align-items: center; z-index: 1000;">
-        <div class="loading-spinner" style="width: 50px; height: 50px; border: 5px solid #f3f3f3; border-top: 5px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite;"></div>
+        <div class="loading-spinner" style="width: 50px; height: 50px; border: 5px solid #f3f3f3; border-top: 5px solid var(--primary); border-radius: 50%; animation: spin 1s linear infinite;"></div>
     </div>
 
     <!-- Global Notification Container -->
@@ -1132,6 +1165,8 @@
                 <p class="login-subtitle">Hotel Management System</p>
             </div>
             
+            <div id="login-error" style="color: var(--danger); margin-bottom: 15px; display: none;"></div>
+            
             <form id="login-form">
                 <div class="form-group">
                     <label for="login-email" class="form-label">Email Address</label>
@@ -1147,7 +1182,7 @@
                     <a href="#" id="forgot-password-link">Forgot password?</a>
                 </div>
                 
-                <button type="submit" class="btn btn-primary" style="width: 100%;">Login</button>
+                <button type="submit" class="btn btn-primary" style="width: 100%; margin-bottom: 15px;">Login</button>
             </form>
             
             <div class="divider">
@@ -1165,13 +1200,99 @@
                 </div>
             </div>
             
-            <div class="login-footer">
+            <div id="switch-to-register" class="login-footer">
                 Don't have an account? <a href="#" id="register-link">Register here</a>
             </div>
+            
+            <div id="switch-to-login" class="login-footer" style="display: none;">
+                Already have an account? <a href="#" id="login-link">Sign in</a>
+            </div>
         </div>
     </div>
 
-    <!-- Main Application (Shown after login) -->
+    <!-- Registration Form (Hidden Initially) -->
+    <div id="register-page" class="login-container" style="display: none;">
+        <div class="login-card">
+            <div class="login-header">
+                <h1 class="login-title">Create Account</h1>
+                <p class="login-subtitle">Join our hotel management system</p>
+            </div>
+            
+            <div id="register-error" style="color: var(--danger); margin-bottom: 15px; display: none;"></div>
+            
+            <form id="register-form">
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="register-firstname" class="form-label">First Name</label>
+                        <input type="text" id="register-firstname" class="form-control" placeholder="First name" required>
+                    </div>
+                    
+                    <div class="form-group">
+                        <label for="register-lastname" class="form-label">Last Name</label>
+                        <input type="text" id="register-lastname" class="form-control" placeholder="Last name" required>
+                    </div>
+                </div>
+                
+                <div class="form-group">
+                    <label for="register-email" class="form-label">Email Address</label>
+                    <input type="email" id="register-email" class="form-control" placeholder="Email address" required>
+                </div>
+                
+                <div class="form-group">
+                    <label for="register-password" class="form-label">Password</label>
+                    <input type="password" id="register-password" class="form-control" placeholder="Create password" required>
+                </div>
+                
+                <div class="form-group">
+                    <label for="register-confirm" class="form-label">Confirm Password</label>
+                    <input type="password" id="register-confirm" class="form-control" placeholder="Confirm password" required>
+                </div>
+                
+                <div class="form-group">
+                    <label for="register-role" class="form-label">I am a</label>
+                    <select id="register-role" class="form-control" required>
+                        <option value="">Select role</option>
+                        <option value="guest">Guest</option>
+                        <option value="staff">Staff Member</option>
+                    </select>
+                </div>
+                
+                <button type="submit" class="btn btn-primary" style="width: 100%; margin-bottom: 15px;">Register</button>
+            </form>
+            
+            <div class="login-footer">
+                Already have an account? <a href="#" id="back-to-login">Sign in</a>
+            </div>
+        </div>
+    </div>
+
+    <!-- Password Reset Form (Hidden Initially) -->
+    <div id="reset-password-page" class="login-container" style="display: none;">
+        <div class="login-card">
+            <div class="login-header">
+                <h1 class="login-title">Reset Password</h1>
+                <p class="login-subtitle">We'll send you a reset link</p>
+            </div>
+            
+            <div id="reset-error" style="color: var(--danger); margin-bottom: 15px; display: none;"></div>
+            <div id="reset-success" style="color: var(--success); margin-bottom: 15px; display: none;"></div>
+            
+            <form id="reset-password-form">
+                <div class="form-group">
+                    <label for="reset-email" class="form-label">Email Address</label>
+                    <input type="email" id="reset-email" class="form-control" placeholder="Enter your email" required>
+                </div>
+                
+                <button type="submit" class="btn btn-primary" style="width: 100%; margin-bottom: 15px;">Send Reset Link</button>
+            </form>
+            
+            <div class="login-footer">
+                Remember your password? <a href="#" id="back-to-login-from-reset">Sign in</a>
+            </div>
+        </div>
+    </div>
+
+    <!-- Main Application (Hidden Initially) -->
     <div id="app-container" style="display: none;">
         <!-- Header -->
         <header>
@@ -1183,8 +1304,9 @@
                         <a href="#" class="active" data-section="dashboard">Dashboard</a>
                         <a href="#" data-section="bookings">Bookings</a>
                         <a href="#" data-section="rooms">Rooms</a>
-                        <a href="#" data-section="guests">Guests</a>
-                        <a href="#" data-section="reports">Reports</a>
+                        <a href="#" data-section="guests" class="staff-only admin-only">Guests</a>
+                        <a href="#" data-section="reports" class="admin-only">Reports</a>
+                        <a href="#" data-section="staff" class="admin-only">Staff</a>
                     </div>
                     
                     <div class="user-menu">
@@ -1192,31 +1314,346 @@
                             <i class="fas fa-bell"></i>
                             <div class="badge">3</div>
                         </div>
-                        <div class="avatar">AD</div>
+                        <div class="avatar" id="user-avatar">AD</div>
                     </div>
                 </nav>
             </div>
         </header>
 
+        <!-- User Dropdown (Hidden Initially) -->
+        <div id="user-dropdown" style="display: none; position: absolute; right: 20px; top: 70px; background-color: white; border-radius: 5px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); z-index: 100; width: 200px; padding: 10px 0;">
+            <div style="padding: 10px 15px; border-bottom: 1px solid #eee; font-weight: 500;" id="dropdown-user-name">Admin User</div>
+            <div style="padding: 10px 15px; border-bottom: 1px solid #eee; font-size: 13px; color: var(--gray);" id="dropdown-user-email">admin@skardu.com</div>
+            <a href="#" style="display: block; padding: 10px 15px; color: var(--dark); text-decoration: none; transition: background-color 0.3s;" id="profile-link">My Profile</a>
+            <a href="#" style="display: block; padding: 10px 15px; color: var(--dark); text-decoration: none; transition: background-color 0.3s;" id="settings-link">Settings</a>
+            <a href="#" style="display: block; padding: 10px 15px; color: var(--danger); text-decoration: none; transition: background-color 0.3s;" id="logout-link">Logout</a>
+        </div>
+
+        <!-- Notification Center (Hidden Initially) -->
+        <div id="notification-center" style="display: none; position: absolute; right: 20px; top: 70px; background-color: white; border-radius: 5px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); z-index: 100; width: 350px; max-height: 400px; overflow-y: auto;">
+            <div style="padding: 15px; border-bottom: 1px solid #eee; font-weight: 500; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; background-color: white;">
+                <span>Notifications</span>
+                <span style="font-size: 12px; color: var(--gray); cursor: pointer;" id="mark-all-read">Mark all as read</span>
+            </div>
+            <div id="notification-list">
+                <!-- Notifications will be added here dynamically -->
+            </div>
+        </div>
+
         <!-- Main Content -->
         <main class="main">
             <div class="container">
-                <!-- Dashboard Content -->
-                <div id="dashboard-section" class="dashboard-section" style="display: none;">
+                <!-- Dashboard Section (Default View) -->
+                <div id="dashboard-section" class="dashboard-section">
                     <div class="dashboard">
                         <div class="sidebar">
-                            <h3 class="sidebar-title">Management</h3>
-                            <ul class="sidebar-menu">
-                                <li><a href="#" class="active" data-subsection="overview"><i class="fas fa-chart-line"></i> Overview</a></li>
-                                <li><a href="#" data-subsection="bookings"><i class="fas fa-calendar-alt"></i> Bookings</a></li>
-                                <li><a href="#" data-subsection="rooms"><i class="fas fa-bed"></i> Rooms</a></li>
-                                <li><a href="#" data-subsection="staff"><i class="fas fa-users"></i> Staff</a></li>
-                                <li><a href="#" data-subsection="inventory"><i class="fas fa-boxes"></i> Inventory</a></li>
-                                <li><a href="#" data-subsection="reports"><i class="fas fa-chart-pie"></i> Reports</a></li>
+                            <h3 class="sidebar-title" id="sidebar-title">Dashboard</h3>
+                            <ul class="sidebar-menu" id="dashboard-menu">
+                                <!-- Menu items will be loaded dynamically based on user role -->
                             </ul>
+                        </div>
+                        
+                        <div class="dashboard-content">
+                            <div id="dashboard-overview">
+                                <div class="dashboard-header">
+                                    <h2 class="dashboard-title" id="greeting-text">Welcome back, Admin</h2>
+                                    <button class="btn btn-secondary" id="quick-booking-btn">
+                                        <i class="fas fa-plus"></i> Quick Booking
+                                    </button>
+                                </div>
+                                
+                                <!-- Stats Cards for Dashboard Overview -->
+                                <div class="stats-cards">
+                                    <div class="stat-card">
+                                        <div class="stat-card-title">Current Occupancy</div>
+                                        <div class="stat-card-value" id="occupancy-rate">75%</div>
+                                        <div class="stat-card-change up">
+                                            <i class="fas fa-arrow-up"></i> 5% from last week
+                                        </div>
+                                    </div>
+                                    
+                                    <div class="stat-card success">
+                                        <div class="stat-card-title">Available Rooms</div>
+                                        <div class="stat-card-value" id="available-rooms">42</div>
+                                        <div class="stat-card-change down">
+                                            <i class="fas fa-arrow-down"></i> 8 from yesterday
+                                        </div>
+                                    </div>
+                                    
+                                    <div class="stat-card warning" id="today-checkins-card">
+                                        <div class="stat-card-title">Today's Check-ins</div>
+                                        <div class="stat-card-value" id="today-checkins">12</div>
+                                        <div class="stat-card-change up">
+                                            <i class="fas fa-arrow-up"></i> 3 from estimated
+                                        </div>
+                                    </div>
+                                    
+                                    <div class="stat-card danger" id="pending-payments-card">
+                                        <div class="stat-card-title">Pending Payments</div>
+                                        <div class="stat-card-value" id="pending-payments">5</div>
+                                        <div class="stat-card-change down">
+                                            <i class="fas fa-arrow-down"></i> 2 resolved today
+                                        </div>
+                                    </div>
+                                </div>
+                                
+                                <!-- Recent Bookings Table -->
+                                <div class="dashboard-header" style="margin-top: 30px;">
+                                    <h3 class="dashboard-title">Recent Bookings</h3>
+                                    <a href="#" class="btn btn-outline" data-section="bookings">View All</a>
+                                </div>
+                                
+                                <table class="data-table">
+                                    <thead>
+                                        <tr>
+                                            <th>Booking ID</th>
+                                            <th>Guest Name</th>
+                                            <th>Room</th>
+                                            <th>Dates</th>
+                                            <th>Status</th>
+                                            <th>Actions</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody id="recent-bookings-table">
+                                        <!-- Recent bookings will be loaded here -->
+                                    </tbody>
+                                </table>
+                                
+                                <!-- Calendar for Current Month -->
+                                <div class="calendar">
+                                    <div class="calendar-header">
+                                        <h3 class="calendar-title" id="month-year-display">March 2023</h3>
+                                        <div>
+                                            <button class="btn btn-outline" id="prev-month">
+                                                <i class="fas fa-chevron-left"></i>
+                                            </button>
+                                            <button class="btn btn-outline" id="next-month">
+                                                <i class="fas fa-chevron-right"></i>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    
+                                    <div class="calendar-grid" id="calendar-grid">
+                                        <!-- Calendar days will be generated here -->
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <!-- Bookings Section (Hidden Initially) -->
+                            <div id="dashboard-bookings" style="display: none;">
+                                <div class="dashboard-header">
+                                    <h2 class="dashboard-title">Manage Bookings</h2>
+                                    <button class="btn btn-primary" id="new-booking-btn">
+                                        <i class="fas fa-plus"></i> New Booking
+                                    </button>
+                                </div>
+                                
+                                <div class="booking-search">
+                                    <div class="form-row">
+                                        <div class="form-group">
+                                            <label for="booking-search" class="form-label">Search Bookings</label>
+                                            <input type="text" id="booking-search" class="form-control" placeholder="Search by guest name, room, ID...">
+                                        </div>
+                                        <div class="form-group">
+                                            <label for="booking-status" class="form-label">Filter by Status</label>
+                                            <select id="booking-status" class="form-control">
+                                                <option value="">All Statuses</option>
+                                                <option value="confirmed">Confirmed</option>
+                                                <option value="pending">Pending Payment</option>
+                                                <option value="cancelled">Cancelled</option>
+                                                <option value="completed">Completed</option>
+                                            </select>
+                                        </div>
+                                    </div>
+                                </div>
+                                
+                                <table class="data-table">
+                                    <thead>
+                                        <tr>
+                                            <th>Booking ID</th>
+                                            <th>Guest</th>
+                                            <th>Room</th>
+                                            <th>Check-in</th>
+                                            <th>Check-out</th>
+                                            <th>Amount</th>
+                                            <th>Status</th>
+                                            <th>Actions</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody id="all-bookings-table">
+                                        <!-- All bookings will be loaded here -->
+                                    </tbody>
+                                </table>
+                            </div>
+                            
+                            <!-- Rooms Section (Hidden Initially) -->
+                            <div id="dashboard-rooms" style="display: none;">
+                                <div class="dashboard-header">
+                                    <h2 class="dashboard-title">Manage Rooms</h2>
+                                    <button class="btn btn-primary" id="add-room-btn">
+                                        <i class="fas fa-plus"></i> Add Room
+                                    </button>
+                                </div>
+                                
+                                <!-- Tabs for Room Types -->
+                                <div class="tabs">
+                                    <div class="tab active" data-room-type="all">All Rooms</div>
+                                    <div class="tab" data-room-type="standard">Standard</div>
+                                    <div class="tab" data-room-type="deluxe">Deluxe</div>
+                                    <div class="tab" data-room-type="suite">Suite</div>
+                                </div>
+                                
+                                <!-- Rooms Grid View -->
+                                <div class="rooms-grid" id="rooms-grid-view" style="display: none;">
+                                    <!-- Room cards will be loaded here -->
+                                </div>
+                                
+                                <!-- Rooms Table View -->
+                                <div class="rooms-table-view" id="rooms-table-view">
+                                    <table class="data-table">
+                                        <thead>
+                                            <tr>
+                                                <th>Room #</th>
+                                                <th>Type</th>
+                                                <th>Capacity</th>
+                                                <th>Price (Night)</th>
+                                                <th>Status</th>
+                                                <th>Actions</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody id="rooms-table">
+                                            <!-- Rooms will be loaded here -->
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+                            
+                            <!-- Guests Section (Hidden Initially) -->
+                            <div id="dashboard-guests" style="display: none;">
+                                <div class="dashboard-header">
+                                    <h2 class="dashboard-title">Guest Management</h2>
+                                    <button class="btn btn-outline" id="export-guests-btn">
+                                        <i class="fas fa-download"></i> Export Data
+                                    </button>
+                                </div>
+                                
+                                <div class="form-row">
+                                    <div class="form-group">
+                                        <label for="guest-search" class="form-label">Search Guests</label>
+                                        <input type="text" id="guest-search" class="form-control" placeholder="Search by name, email...">
+                                    </div>
+                                    <div class="form-group">
+                                        <label for="guest-filter" class="form-label">Filter by</label>
+                                        <select id="guest-filter" class="form-control">
+                                            <option value="">All Guests</option>
+                                            <option value="current">Current Guests</option>
+                                            <option value="loyal">Loyalty Members</option>
+                                        </select>
+                                    </div>
+                                </div>
+                                
+                                <table class="data-table">
+                                    <thead>
+                                        <tr>
+                                            <th>Name</th>
+                                            <th>Email</th>
+                                            <th>Phone</th>
+                                            <th>Bookings</th>
+                                            <th>Last Stay</th>
+                                            <th>Actions</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody id="guests-table">
+                                        <!-- Guests will be loaded here -->
+                                    </tbody>
+                                </table>
+                            </div>
+                            
+                            <!-- Reports Section (Hidden Initially) -->
+                            <div id="dashboard-reports" style="display: none;">
+                                <div class="dashboard-header">
+                                    <h2 class="dashboard-title">Reports & Analytics</h2>
+                                    <div>
+                                        <select id="report-period" class="form-control" style="display: inline-block; width: auto;">
+                                            <option value="week">This Week</option>
+                                            <option value="month" selected>This Month</option>
+                                            <option value="quarter">This Quarter</option>
+                                            <option value="year">This Year</option>
+                                        </select>
+                                    </div>
+                                </div>
+                                
+                                <div class="stats-cards">
+                                    <div class="stat-card">
+                                        <div class="stat-card-title">Total Revenue</div>
+                                        <div class="stat-card-value" id="total-revenue">$42,850</div>
+                                        <div class="stat-card-change up">
+                                            <i class="fas fa-arrow-up"></i> 12% from last period
+                                        </div>
+                                    </div>
+                                    
+                                    <div class="stat-card success">
+                                        <div class="stat-card-title">Occupancy Rate</div>
+                                        <div class="stat-card-value" id="period-occupancy">78%</div>
+                                        <div class="stat-card-change up">
+                                            <i class="fas fa-arrow-up"></i> 4% from last period
+                                        </div>
+                                    </div>
+                                    
+                                    <div class="stat-card warning">
+                                        <div class="stat-card-title">Average Daily Rate</div>
+                                        <div class="stat-card-value" id="average-rate">$120</div>
+                                        <div class="stat-card-change down">
+                                            <i class="fas fa-arrow-down"></i> 2.5% from last period
+                                        </div>
+                                    </div>
+                                </div>
+                                
+                                <div class="form-row" style="margin-top: 30px;">
+                                    <div class="form-group">
+                                        <label for="report-type" class="form-label">Report Type</label>
+                                        <select id="report-type" class="form-control">
+                                            <option value="revenue">Revenue</option>
+                                            <option value="occupancy">Occupancy</option>
+                                            <option value="guests">Guest Demographics</option>
+                                            <option value="rooms">Room Performance</option>
+                                        </select>
+                                    </div>
+                                    <div class="form-group">
+                                        <label for="export-format" class="form-label">Export As</label>
+                                        <select id="export-format" class="form-control">
+                                            <option value="">Select format</option>
+                                            <option value="pdf">PDF</option>
+                                            <option value="csv">CSV</option>
+                                            <option value="excel">Excel</option>
+                                        </select>
+                                    </div>
+                                </div>
+                                
+                                <div id="report-content" style="margin-top: 30px;">
+                                    <!-- Report visualization will be displayed here -->
+                                    <div style="background-color: #f9f9f9; border-radius: 8px; padding: 30px; text-align: center; color: var(--gray);">
+                                        <i class="fas fa-chart-bar" style="font-size: 50px; margin-bottom: 15px; color: var(--primary-light);"></i>
+                                        <h3 style="margin-bottom: 10px;">Revenue Report - March 2023</h3>
+                                        <p>Select filters above to generate detailed reports</p>
+                                    </div>
+                                </div>
+                            </div>
                             
-                            <h3 class="sidebar-title" style="margin-top: 30px;">Settings</h3>
-                            <ul class="sidebar-menu">
-                                <li><a href="#" data-subsection="settings"><i class="fas fa-cog"></i> System Settings</a></li>
-                               
+                            <!-- Staff Section (Hidden Initially) -->
+                            <div id="dashboard-staff" style="display: none;">
+                                <div class="dashboard-header">
+                                    <h2 class="dashboard-title">Staff Management</h2>
+                                    <button class="btn btn-primary" id="add-staff-btn">
+                                        <i class="fas fa-plus"></i> Add Staff
+                                    </button>
+                                </div>
+                                
+                                <div class="form-row">
+                                    <div class="form-group">
+                                        <label for="staff-search" class="form-label">Search Staff</label>
+                                        <input type="text" id="staff-search" class="form-control" placeholder="Search by name, role...">
+                                    </div>
+                                    <div class="form-group">
+                                        <label for="staff-department"
 </html>