diff --git a/hotel_booking/admin/ajax/dashboard.php b/hotel_booking/admin/ajax/dashboard.php
new file mode 100644
index 0000000..31b3145
--- /dev/null
+++ b/hotel_booking/admin/ajax/dashboard.php
@@ -0,0 +1,36 @@
+<?php
+    require('../components/utils.php');
+    require('../components/db_config.php');
+    adminLogin();
+
+    if(isset($_POST['dashboard_booking'])){
+        $frm_data = filteration($_POST);
+        $timeline = "";
+        if($frm_data['period'] == 1){
+            $timeline = "WHERE datentime BETWEEN NOW() - INTERVAL 7 DAY AND NOW()";
+        } else if($frm_data['period'] == 2){
+            $timeline = "WHERE datentime BETWEEN NOW() - INTERVAL 30 DAY AND NOW()";
+        } else if($frm_data['period'] == 3){
+            $timeline = "WHERE datentime BETWEEN NOW() - INTERVAL 1 YEAR AND NOW()";
+        } 
+
+        $result = mysqli_fetch_assoc(mysqli_query($con, "SELECT
+            COUNT(booking_id) AS `total_bookings`,
+            SUM(payment) AS `total_payment`,
+
+
+            COUNT(CASE WHEN booking_status = 'pending' AND arrival = 0 THEN 1 END) AS `pending_bookings`, 
+            SUM(CASE WHEN booking_status = 'pending' AND arrival = 0 THEN `payment` END) AS `pending_payment`, 
+
+            COUNT(CASE WHEN booking_status = 'pending' AND arrival = 1 THEN 1 END) AS `active_bookings`, 
+            SUM(CASE WHEN booking_status = 'pending' AND arrival = 1 THEN `payment` END) AS `active_payment`, 
+
+            COUNT(CASE WHEN booking_status = 'cancel' AND arrival = 0 THEN 0 END) AS `cancel_bookings`,
+            IFNULL(SUM(CASE WHEN booking_status = 'cancel' AND arrival = 0 THEN `payment` END), 0) AS `cancel_payment`
+            FROM `booking_order` $timeline"));
+
+        $output_booking = json_encode($result);
+
+        echo $output_booking;
+    }
+?>
\ No newline at end of file
diff --git a/hotel_booking/admin/dashboard.php b/hotel_booking/admin/dashboard.php
index d580b31..7024857 100644
--- a/hotel_booking/admin/dashboard.php
+++ b/hotel_booking/admin/dashboard.php
@@ -9,98 +9,346 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Admin Dashboard | Midtown Hotel</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <?php require('components/link.php') ?> 
 </head>
 <body>
-    <?php require('components/sidebar.php')?>
+    <?php 
+        require('components/sidebar.php');
+
+        $is_inactive = mysqli_fetch_assoc(mysqli_query($con ,"SELECT `shutdown` FROM `settings`"));
+        $current_booking = mysqli_fetch_assoc(mysqli_query($con, "SELECT COUNT(CASE WHEN booking_status = 'pending' AND arrival = 0 THEN 1 END) AS `new_bookings` FROM `booking_order`"));
+
+        $dashboard_query = mysqli_fetch_assoc(mysqli_query($con ,"SELECT COUNT(sr_no) AS `count_query` FROM `user_query` WHERE `seen` = 0"));
+        $dashboard_review = mysqli_fetch_assoc(mysqli_query($con ,"SELECT COUNT(sr_no) AS `count_review` FROM `review` WHERE `seen` = 0"));
+        $current_user = mysqli_fetch_assoc(mysqli_query($con, "SELECT COUNT(CASE WHEN `status` = 1 THEN 1 END) AS `active`, COUNT(CASE WHEN `status` = 0 THEN 1 END) AS `inactive`, 
+                        COUNT(id) AS `total` FROM `user_creds`"));
+    ?>
 
     <div class="container-fluid" id="dashboard-body">
         <div class="row">
             <div class="col-lg-10 ms-auto p-4 overflow-hidden">
                 <div class="d-flex align-items-center justify-content-between mb-4">
                     <h4 class="mb-4">Dashboard</h4>
-                    <p class="badge bg-danger py-2 px-2">Inactive Mode</p>
+                    <?php
+                        if($is_inactive['shutdown']){
+                            echo <<<data
+                                <p class="badge bg-danger py-2 px-2">Inactive Mode</p>
+                            data;
+                        }
+                    ?>
                 </div>
                 <div class="row mb-2">
-                    <div class="col-md-3 mb-4">
+                    <div class="col-md-4 mb-4">
                         <a href="new_booking.php" style="text-decoration: none;">
                             <div class="card border-light text-center p-3 shadow-sm">
                                 <i class='bx bxs-bell-ring mb-2' style="font-size: 46px; color: #3D30A2;"></i>
-                                <p class="mb-2 text-dark" style="font-size: 24px;">1</p>
+                                <p class="mb-2 text-dark" style="font-size: 24px;"><?php echo $current_booking['new_bookings']?></p>
                                 <p class="mb-2 text-secondary">New Bookings</p>
                             </div>
                         </a>
                     </div>
-                    <div class="col-md-3 mb-4">
-                        <a href="new_booking.php" style="text-decoration: none;">
-                            <div class="card border-light text-center p-3 shadow-sm">
-                                <i class='bx bxs-calendar-check mb-2' style="font-size: 46px; color: #3FA2F6;"></i>
-                                <p class="mb-2 text-dark" style="font-size: 24px;">1</p>
-                                <p class="mb-2 text-secondary">Total Bookings</p>
-                            </div>
-                        </a>
-                    </div>
-                    <div class="col-md-3 mb-4">
+                    <div class="col-md-4 mb-4">
                         <a href="user_query.php" style="text-decoration: none;">
                             <div class="card border-light text-center p-3 shadow-sm">
                                 <i class='bx bxs-file-find mb-2' style="font-size: 46px; color: #FC4100;"></i>
-                                <p class="mb-2 text-dark" style="font-size: 24px;">1</p>
+                                <p class="mb-2 text-dark" style="font-size: 24px;"><?php echo $dashboard_query['count_query']?></p>
                                 <p class="mb-2 text-secondary">Queries</p>
                             </div>
                         </a>
                     </div>
-                    <div class="col-md-3 mb-4">
+                    <div class="col-md-4 mb-4">
                         <a href="user_review.php" style="text-decoration: none;">
                             <div class="card border-light text-center p-3 shadow-sm">
                                 <i class='bx bxs-comment mb-2' style="font-size: 46px; color: #FFC55A;"></i>
-                                <p class="mb-2 text-dark" style="font-size: 24px;">1</p>
+                                <p class="mb-2 text-dark" style="font-size: 24px;"><?php echo $dashboard_review['count_review']?></p>
                                 <p class="mb-2 text-secondary">Reviews</p>
                             </div>
                         </a>
                     </div>
-                    <div class="col-md-3 mb-4">
-                        <a href="user_query.php" style="text-decoration: none;">
-                            <div class="card border-light text-center p-3 shadow-sm">
-                                <i class='bx bxs-user-account mb-2' style="font-size: 46px; color: #7D8ABC ;"></i>
-                                <p class="mb-2 text-dark" style="font-size: 24px;">1</p>
-                                <p class="mb-2 text-secondary">New Registeration</p>
-                            </div>
-                        </a>
+                </div>
+                <div class="row">
+                    <div class="col-md-4 mb-4">
+                        <div class="card text-center p-3">
+                            <i class='bx bxs-user-circle mb-2' style="font-size: 46px; color: #758694;"></i>
+                            <p class="mb-2 text-dark" style="font-size: 24px;"><?php echo $current_user['total']?></p>
+                            <p class="mb-2 text-secondary">User Total</p>
+                        </div>
                     </div>
-                    <div class="col-md-3 mb-4">
-                        <a href="user_query.php" style="text-decoration: none;">
-                            <div class="card border-light text-center p-3 shadow-sm">
-                                <i class='bx bxs-user-circle mb-2' style="font-size: 46px; color: #758694;"></i>
-                                <p class="mb-2 text-dark" style="font-size: 24px;">1</p>
-                                <p class="mb-2 text-secondary">User Total</p>
-                            </div>
-                        </a>
+                    <div class="col-md-4 mb-4">
+                        <div class="card text-center p-3">
+                            <i class='bx bxs-user-check mb-2' style="font-size: 46px; color: #50B498;"></i>
+                            <p class="mb-2 text-dark" style="font-size: 24px;"><?php echo $current_user['active']?></p>
+                            <p class="mb-2 text-secondary">User Active</p>
+                        </div>
                     </div>
-                    <div class="col-md-3 mb-4">
-                        <a href="user_query.php" style="text-decoration: none;">
-                            <div class="card border-light text-center p-3 shadow-sm">
-                                <i class='bx bxs-user-check mb-2' style="font-size: 46px; color: #50B498;"></i>
-                                <p class="mb-2 text-dark" style="font-size: 24px;">1</p>
-                                <p class="mb-2 text-secondary">User Active</p>
-                            </div>
-                        </a>
+                    <div class="col-md-4 mb-4">
+                        <div class="card text-center p-3 ">
+                            <i class='bx bxs-user-x mb-2' style="font-size: 46px; color: #E4003A;"></i>
+                            <p class="mb-2 text-dark" style="font-size: 24px;"><?php echo $current_user['inactive']?></p>
+                            <p class="mb-2 text-secondary">User Inactive</p>
+                        </div>
                     </div>
-                    <div class="col-md-3 mb-4">
-                        <a href="user_query.php" style="text-decoration: none;">
-                            <div class="card border-light text-center p-3 shadow-sm">
-                                <i class='bx bxs-user-x mb-2' style="font-size: 46px; color: #E4003A;"></i>
-                                <p class="mb-2 text-dark" style="font-size: 24px;">1</p>
-                                <p class="mb-2 text-secondary">User Inactive</p>
+                </div>
+                <div class="col-12 mb-4">
+                    <div class="card border-light p-3 shadow-sm">
+                        <div class="d-flex justify-content-between align-items-center mb-4">
+                           <p style="font-size: 20px;">Overview</p> 
+                           <select class="p-1" onchange = "dashboard_booking(this.value)" style="background-color: transparent; border: 1px solid gray; border-radius: 3px; font-size: 14px;">
+                                <option value="1">Past 7 days</option>
+                                <option value="2">Past 30 days</option>
+                                <option value="3">For the past year</option>
+                                <option value="4">All time</option>
+                           </select>
+                        </div>
+                        <div class="row">
+                            <div class="col-md-3">
+                                <div class="d-flex">
+                                    <i class='bx bxs-circle p-1' style="color: #3FA2F6;"></i>
+                                    <div>
+                                        <p class="text-secondary">Total Booking (<span id="total_bookings">0</span>)</p>
+                                        <p id="total_payment"style="font-size: 18px;"></p>
+                                    </div>
+                                </div>
+                                <div class="d-flex">
+                                    <i class='bx bxs-circle p-1' style="color: #FFC55A;"></i>
+                                    <div>
+                                        <p class="text-secondary">Pending (<span id="pending_bookings">0</span>)</p>
+                                        <p id="pending_payment" style="font-size: 18px;"></p>
+                                    </div>
+                                </div>
+                                <div class="d-flex">
+                                    <i class='bx bxs-circle p-1' style="color: #50B498;"></i>
+                                    <div>
+                                        <p class="text-secondary">Booked (<span id="active_bookings">0</span>)</p>
+                                        <p id="active_payment" style="font-size: 18px;"></p>
+                                    </div>
+                                </div>
+                                <div class="d-flex">
+                                    <i class='bx bxs-circle p-1' style="color: #E4003A;"></i>
+                                    <div>
+                                        <p class="text-secondary">Cancelled (<span id="cancel_bookings">0</span>)</p>
+                                        <p id="cancel_payment" style="font-size: 18px;"></p>
+                                    </div>
+                                </div>
                             </div>
-                        </a>
+                            <div class="col-md-9">
+                                <?php
+                                    $main_query = "
+                                    SELECT SUM(payment) as `total_payment_q`,
+                                    COUNT(CASE WHEN booking_status = 'pending' AND arrival = 0 THEN 0 END) AS `booking_pending`,
+                                    COUNT(CASE WHEN booking_status = 'pending' AND arrival = 1 THEN 1 END) AS `active_bookings`,
+                                    COUNT(CASE WHEN booking_status = 'cancel' AND arrival = 0 THEN 0 END) AS `cancel_bookings`
+                                    ";
+                                    
+                                    $query_str="$main_query FROM booking_order;";
+                                    $query_7_days="$main_query FROM booking_order WHERE datentime BETWEEN NOW() - INTERVAL 7 DAY AND NOW();";
+                                    $query_30_days="$main_query FROM booking_order WHERE datentime BETWEEN NOW() - INTERVAL 30 DAY AND NOW();";
+                                    $query_1_year="$main_query FROM booking_order WHERE datentime BETWEEN NOW() - INTERVAL 1 YEAR AND NOW();";
+
+                                    // all query
+                                    $query_booking = mysqli_fetch_all(mysqli_query($con, $query_str));
+                                    $payment = [];
+                                    $booking_pending = [];
+                                    $active_bookings = [];
+                                    $cancel_bookings = [];
+                                    foreach($query_booking as $data){
+                                        $payment[] =  $data[0];
+                                        $booking_pending[] = $data[1];
+                                        $active_bookings[] = $data[2];
+                                        $cancel_bookings[] = $data[3];
+                                    }
+
+                                    // 7 day query
+                                    $query_booking_7 = mysqli_fetch_all(mysqli_query($con, $query_7_days));
+                                    $payment_7 = [];
+                                    $booking_pending_7 = [];
+                                    $active_bookings_7 = [];
+                                    $cancel_bookings_7 = [];
+                                    foreach($query_booking_7 as $data){
+                                        $payment_7[] =  $data[0];
+                                        $booking_pending_7[] = $data[1];
+                                        $active_bookings_7[] = $data[2];
+                                        $cancel_bookings_7[] = $data[3];
+                                    }
+
+                                    // 30 day query
+                                    $query_booking_30 = mysqli_fetch_all(mysqli_query($con, $query_30_days));
+                                    $payment_30 = [];
+                                    $booking_pending_30 = [];
+                                    $active_bookings_30 = [];
+                                    $cancel_bookings_30 = [];
+                                    foreach($query_booking_30 as $data){
+                                        $payment_30[] =  $data[0];
+                                        $booking_pending_30[] = $data[1];
+                                        $active_bookings_30[] = $data[2];
+                                        $cancel_bookings_30[] = $data[3];
+                                    }
+
+                                    // 1 year query
+                                    $query_booking_1_year = mysqli_fetch_all(mysqli_query($con, $query_1_year));
+                                    $payment_1_year = [];
+                                    $booking_pending_1_year = [];
+                                    $active_bookings_1_year = [];
+                                    $cancel_bookings_1_year = [];
+                                    foreach($query_booking_1_year as $data){
+                                        $payment_1_year[] =  $data[0];
+                                        $booking_pending_1_year[] = $data[1];
+                                        $active_bookings_1_year[] = $data[2];
+                                        $cancel_bookings_1_year[] = $data[3];
+                                    }
+                                ?>
+                                <div>
+                                    <canvas id="myChart" style="position: relative; max-height: 600px;"></canvas>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div> 
         </div>
     </div>
 
-
-
     <?php require('components/script.php') ?>
+    <script>
+        const labels = [];
+        labels.push("Pending", "Booked", "Cancelled");
+
+        const data_all = {
+            labels: labels,
+            datasets: [{
+                label: 'Total Booking',
+                data: <?php echo json_encode(array($booking_pending, $active_bookings, $cancel_bookings)) ?>,
+                backgroundColor: [
+                    '#FFC55A',
+                    '#50B498',
+                    '#E4003A'
+                ],
+                tension: 0.1
+            }]
+        };
+
+        const data_7 = {
+            labels: labels,
+            datasets: [{
+                label: 'Total Booking: 7 Days',
+                data: <?php echo json_encode(array($booking_pending_7, $active_bookings_7, $cancel_bookings_7)) ?>,
+                fill: false,
+                backgroundColor: [
+                    '#FFC55A',
+                    '#50B498',
+                    '#E4003A'
+                ],
+                tension: 0.1
+            }]
+        };
+
+        const data_30 = {
+            labels: labels,
+            datasets: [{
+                label: 'Total Booking: 30 Days',
+                data: <?php echo json_encode(array($booking_pending_30, $active_bookings_30, $cancel_bookings_30)) ?>,
+                fill: false,
+                backgroundColor: [
+                    '#FFC55A',
+                    '#50B498',
+                    '#E4003A'
+                ],
+                tension: 0.1
+            }]
+        };
+
+        const data_year = {
+            labels: labels,
+            datasets: [{
+                label: 'Total Booking: 1 Year',
+                data: <?php echo json_encode(array($booking_pending_1_year, $active_bookings_1_year, $cancel_bookings_1_year)) ?>,
+                fill: false,
+                backgroundColor: [
+                    '#FFC55A',
+                    '#50B498',
+                    '#E4003A'
+                ],
+                tension: 0.1
+            }]
+        };
+
+        const config_all = {
+            type: 'pie',
+            data: data_all
+        };
+
+        const config_7 = {
+            type: 'pie',
+            data: data_7
+        };
+
+        const config_30 = {
+            type: 'pie',
+            data: data_30
+        };
+
+        const config_year = {
+            type: 'pie',
+            data: data_year
+        };
+
+        function draw_chart(config) {
+            var myChart = new Chart(
+                document.getElementById('myChart'),
+                config
+            );
+            return myChart;
+        }
+
+        function destroy_chart_if_exists() {
+            var myChart = Chart.getChart("myChart");
+            if (typeof myChart == 'undefined') {
+                console.log("myChart does not exist. Cannot destroy non-existing chart.");
+            } else {
+                myChart.destroy();
+                return true;
+            }
+        }
+
+        function dashboard_booking(period = 1){
+            let xhr = new XMLHttpRequest();
+            xhr.open("POST", "ajax/dashboard.php", true);
+            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
+
+            xhr.onload = function(){
+                let data = JSON.parse(this.responseText);
+                document.getElementById('total_bookings').textContent = data.total_bookings;
+                document.getElementById('total_payment').textContent = '$'+data.total_payment;
+                document.getElementById('pending_bookings').textContent = data.pending_bookings;
+                document.getElementById('pending_payment').textContent = '$'+data.pending_payment;
+                document.getElementById('active_bookings').textContent = data.active_bookings;
+                document.getElementById('active_payment').textContent = '$'+data.active_payment;
+                document.getElementById('cancel_bookings').textContent = data.cancel_bookings;
+                document.getElementById('cancel_payment').textContent = '$'+data.cancel_payment;
+            }
+            // code to draw and destroy our chart on same canvas
+            // note: we have to destroy the chart before redrawing on the same canvas or we will receive
+            // Uncaught Error: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas with ID 'myChart' can be reused.
+            if (period == 1) {
+                destroy_chart_if_exists();
+                draw_chart(config_7);
+            } else if (period == 2) {
+                destroy_chart_if_exists();
+                draw_chart(config_30);
+            } else if (period == 2) {
+                destroy_chart_if_exists();
+                draw_chart(config_year);
+            } else {
+                destroy_chart_if_exists();
+                draw_chart(config_all);
+            };
+
+            xhr.send('dashboard_booking&period='+period);
+        }
+        window.onload = function(){
+            dashboard_booking();
+        }
+    </script>
 </body>
 </html>
\ No newline at end of file
