muayjtp/web_php
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

updated admin dashboard: overview booking status/query/user review and a pie chart

Browse source
This commit is contained in:
Juthatip McDevitt 2024-07-10 17:38:30 -05:00
parent 3c941714ae
commit fefb1dabeb
2 changed files with 334 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
hotel_booking/admin/ajax/dashboard.php Normal file
View file

@ -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;
}
?>

348
hotel_booking/admin/dashboard.php
View file

@ -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>