@ -1,53 +1,53 @@
<!DOCTYPE html>
< html lang = "en" xmlns:th = "http://www.w3.org/1999/xhtml" >
< head th:replace = "~{fragments/user-head :: head}" >
< title > Officer Dashboard< / title >
<!-- DataTables CSS -->
< link rel = "stylesheet"
href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap4.min.css">
<!-- AmCharts libraries -->
< script src = "https://cdn.amcharts.com/lib/5/index.js" > < / script >
< script src = "https://cdn.amcharts.com/lib/5/percent.js" > < / script >
< script src = "https://cdn.amcharts.com/lib/5/xy.js" > < / script >
< script src = "https://cdn.amcharts.com/lib/5/themes/Animated.js" > < / script >
< title > Officer Dashboard< / title >
<!-- DataTables CSS -->
< link rel = "stylesheet" href = "https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap4.min.css" >
<!-- AmCharts libraries -->
< script src = "https://cdn.amcharts.com/lib/5/index.js" > < / script >
< script src = "https://cdn.amcharts.com/lib/5/percent.js" > < / script >
< script src = "https://cdn.amcharts.com/lib/5/xy.js" > < / script >
< script src = "https://cdn.amcharts.com/lib/5/themes/Animated.js" > < / script >
< / head >
< style >
* {
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
}
.containers {
.containers {
background-color: #f4f4f9;
color: #333;
display: flex;
flex-direction: column;
align-items: center;
}
}
.table-responsive {
.table-responsive {
overflow-x: auto;
width: 100%;
}
}
/*.date-div{*/
/* !*max-width: 1300px;*!*/
/* !*display: flex;*!*/
/* align-items: start;*/
/* justify-content: start;*/
/*}*/
.container {
/*.date-div{*/
/* !*max-width: 1300px;*!*/
/* !*display: flex;*!*/
/* align-items: start;*/
/* justify-content: start;*/
/*}*/
.container {
display: flex;
gap: 30px;
max-width: 1125px;
margin-top: 20px;
}
}
.card-item {
.card-item {
width: 250px;
height: 150px;
background-color: #EBEBEB;
@ -60,43 +60,46 @@
border: 2px solid #D4D2E3;
font-weight: bold;
text-align: center;
}
/*.container1 {*/
/* display: flex;*/
/* flex-wrap: nowrap; !* Prevent wrapping *!*/
/* gap: 30px;*/
/* overflow-x: auto; !* Allow horizontal scroll on smaller screens *!*/
/* padding: 20px;*/
/* max-width: 1300px;*/
/* justify-content: flex-start;*/
/*}*/
.container1 {
}
/*.container1 {*/
/* display: flex;*/
/* flex-wrap: nowrap; !* Prevent wrapping *!*/
/* gap: 30px;*/
/* overflow-x: auto; !* Allow horizontal scroll on smaller screens *!*/
/* padding: 20px;*/
/* max-width: 1300px;*/
/* justify-content: flex-start;*/
/*}*/
.container1 {
display: flex;
flex-wrap: nowrap; /* force all cards in one row */
flex-wrap: nowrap;
/* force all cards in one row */
gap: 30px;
overflow-x: auto; /* scroll on smaller screens */
overflow-x: auto;
/* scroll on smaller screens */
padding: 20px;
max-width: 1300px;
justify-content: flex-start;
}
}
.bar-chart-container {
.bar-chart-container {
display: flex;
align-items: center;
flex-direction: column;
}
}
.card {
.card {
width: 250px;
flex: 0 0 auto; /* Prevent from shrinking or stretching */
}
flex: 0 0 auto;
/* Prevent from shrinking or stretching */
}
.card {
.card {
width: 250px;
height: 400px;
background-color: #EBEBEB;
@ -108,9 +111,9 @@
padding: 12px;
border: 2px solid #D4D2E3;
flex-direction: column;
}
}
.card .content {
.card .content {
width: 100%;
height: 100%;
background-color: white;
@ -121,114 +124,132 @@
align-items: center;
justify-content: center;
padding: 15px;
}
}
/*.card h1 {*/
/* font-size: 18px;*/
/* color: #152C5B;*/
/* margin-bottom: 15px;*/
/* text-align: center;*/
/*}*/
/*.card h1 {*/
/* font-size: 18px;*/
/* color: #152C5B;*/
/* margin-bottom: 15px;*/
/* text-align: center;*/
/*}*/
.card h1 {
.card h1 {
text-align: left;
width: 100%;
font-size: 18px;
color: #152C5B;
margin-bottom: 15px;
}
}
/*.chart-container {*/
/* width: 200px;*/
/* height: 400px;*/
/* margin: auto;*/
/*}*/
/*.chart-container {*/
/* width: 200px;*/
/* height: 400px;*/
/* margin: auto;*/
/*}*/
.chart-container {
/* .chart-container {
width: 100%;
min-height: 240px;
display: flex;
justify-content: flex-start; /* Align chart canvas to left */
}
justify-content: flex-start;
}*/
.chart-container {
width: 100%;
height: 240px;
display: flex;
justify-content: center;
align-items: center;
}
.date-layout {
.date-layout {
display: flex;
gap: 20px; /* Space between the date pickers */
justify-content: flex-start; /* Aligns date pickers to the left */
gap: 20px;
/* Space between the date pickers */
justify-content: flex-start;
/* Aligns date pickers to the left */
align-items: center;
margin-bottom: 20px; /* Adds space below the date pickers */
margin-bottom: 20px;
/* Adds space below the date pickers */
padding-top: 40px;
margin-top: 20px;
margin-left: 195px; /* Shifts the layout slightly to the right */
margin-left: 195px;
/* Shifts the layout slightly to the right */
/*width: 100%; !* Ensures the layout stretches across the container *!*/
width: calc(100% - 80px);
/* Adjusts width so it stays within the viewport */
}
.hidden-card {
}
.hidden-card {
display: none !important;
}
}
.custom-card {
.custom-card {
margin-top: 84px;
width: 93%;
height: 100%;
background-color: white;
}
}
.date-picker {
.date-picker {
display: flex;
align-items: center;
gap: 10px; /* Space between label and input */
}
gap: 10px;
/* Space between label and input */
}
.form-label {
.form-label {
font-size: 14px;
}
}
input[type="date"] {
input[type="date"] {
padding: 8px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 5px;
width: 150px; /* Adjust width as needed */
}
width: 150px;
/* Adjust width as needed */
}
.containers {
.containers {
background-color: #f4f4f9;
color: #333;
display: flex;
flex-direction: column;
align-items: center;
}
.wrap {
}
.wrap {
flex-wrap: wrap !important;
}
.hidden-card {
}
.hidden-card {
display: none !important;
}
}
/* button style*/
.legend-text {
/* button style*/
.legend-text {
font-weight: bold;
margin-right: 5px;
color: #333;
}
}
.legend-value {
.legend-value {
color: #666;
}
}
.dataTables_filter {
.dataTables_filter {
text-align: right;
}
}
.dataTables_filter {
.dataTables_filter {
text-align: right;
}
}
< / style >
< body >
@ -249,13 +270,12 @@ input[type="date"] {
<!-- Date Layout -->
< div class = "date-layout" >
< div class = "date-picker" >
< label for = "fromDate" class = "form-label" > From Date< / label > < input
type="date" placeholder="from date" id="fromDate"
name="fromDate">
< label for = "fromDate" class = "form-label" > From Date< / label > < input type = "date"
placeholder="from date" id="fromDate" name="fromDate">
< / div >
< div class = "date-picker" >
< label for = "toDate" class = "form-label" > To Date< / label > < input
type="date" placeholder="to date" id="toDate" name="toDate">
< label for = "toDate" class = "form-label" > To Date< / label > < input type = "date"
placeholder="to date" id="toDate" name="toDate">
< / div >
< / div >
@ -342,15 +362,13 @@ input[type="date"] {
< div class = "card filter-card"
style="width: 97%; height: 100%; background-color: white;">
< div class = "card filter-card" style = "width: 97%; height: 100%; background-color: white;" >
< div class = "row"
style="margin-left: auto; margin-right: 20px; display: flex; justify-content: flex-end;">
< div class = "col-sm-12" >
< label for = "status" class = "form-label"
style="margin-left: auto; margin-right: 0; display: flex; justify-content: flex-end;">Status< / label >
< select id = "status" name = "status"
class="form-control text-center">
< select id = "status" name = "status" class = "form-control text-center" >
< option value = "" class = "" > select< / option >
< option value = "" > All< / option >
< option value = "Upcoming" > Upcoming< / option >
@ -376,10 +394,10 @@ input[type="date"] {
<!-- Filter container with date and type dropdowns and status buttons -->
< div class = "col-md-12" >
< div class = "card-table table-container mt-2"
id="nameinclusiontable">
< div class = "card-table table-container mt-2" id = "nameinclusiontable" >
< div class = "table-responsive" >
< table id = "nameinclusion" class = "table table-bordered nowrap" style = "width:100%" >
< table id = "nameinclusion" class = "table table-bordered nowrap"
style="width:100%">
< thead >
< tr >
< th > S.No< / th >
@ -420,12 +438,9 @@ input[type="date"] {
< script th:replace = "~{fragments/user-script :: script}" > < / script >
< script src = "https://cdn.jsdelivr.net/npm/chart.js" > < / script >
<!-- DataTables JS -->
< script
src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js">< / script >
< script
src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap4.min.js">< / script >
< script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">< / script >
< script src = "https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js" > < / script >
< script src = "https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap4.min.js" > < / script >
< script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" > < / script >
< script >
@ -461,7 +476,7 @@ input[type="date"] {
chartsContainer.children[2].style.display = "none"; // Conference Total Bookings
chartsContainer.children[3].style.display = "flex"; // Learning Total Bookings
}
});*/
});*/
// Initialize DataTable
@ -481,7 +496,7 @@ input[type="date"] {
readingBarChart;
// AJAX function to fetch amount collected
function fetchAmountCollected(fromDate, toDate,bid, callback) {
function fetchAmountCollected(fromDate, toDate, bid, callback) {
console.log("fromdate", fromDate);
//let bid = document.getElementById("bid").value;
@ -489,7 +504,7 @@ input[type="date"] {
$.ajax({
url: "/muthalvarpadaippagam/book/api/amountCollected",
type: "GET",
data: {fromDate, toDate,bid},
data: { fromDate, toDate, bid },
dataType: "json",
success: function (response) {
console.log("Amount Collected Response:", response);
@ -507,14 +522,14 @@ input[type="date"] {
}
// AJAX function to fetch booking counts
function fetchBookingCounts(fromDate, toDate, bid,callback) {
function fetchBookingCounts(fromDate, toDate, bid, callback) {
//console.log("fromdate", fromDate)
//console.log("todate",toDate)
//console.log("bid for fetchbookingcounts",bid)
$.ajax({
url: "/muthalvarpadaippagam/book/api/bookingCountByCategory",
type: "GET",
data: {fromDate, toDate,bid},
data: { fromDate, toDate, bid },
dataType: "json",
success: function (response) {
if (response & & response.length > 0) {
@ -531,11 +546,11 @@ input[type="date"] {
}
// AJAX function to fetch Overallbooking counts
function fetchOverAllBookingCounts(fromDate, toDate,bid, callback) {
function fetchOverAllBookingCounts(fromDate, toDate, bid, callback) {
$.ajax({
url: "/muthalvarpadaippagam/book/api/totalBookingCounts",
type: "GET",
data: {fromDate, toDate,bid},
data: { fromDate, toDate, bid },
dataType: "json",
success: function (response) {
if (response & & response.length > 0) {
@ -554,6 +569,7 @@ input[type="date"] {
// Function to render amount collected
function renderAmountCollected(data) {
console.log("data", data)
if (data) {
document.getElementById("overallAmount").innerText =
"Rs. " + (data.overall_amount_collected || 0).toLocaleString();
@ -577,6 +593,7 @@ input[type="date"] {
//function to renderOverallBookingCounts
function renderOverallBookingCounts(data) {
console.log("data", data)
if (data) {
// Update charts with the fetched data
updateChart(overallDoughnutChart, [
@ -618,6 +635,7 @@ input[type="date"] {
}
}
// Update chart data
function updateChart(chart, data) {
if (chart) {
@ -639,26 +657,26 @@ input[type="date"] {
initializeCharts();
// Fetch initial data with today's date as default
fetchAmountCollected(today, today,bid, renderAmountCollected);
fetchBookingCounts(today, today,bid, renderBookingCounts);
fetchOverAllBookingCounts(today, today,bid, renderOverallBookingCounts);
fetchAmountCollected(today, today, bid, renderAmountCollected);
fetchBookingCounts(today, today, bid, renderBookingCounts);
fetchOverAllBookingCounts(today, today, bid, renderOverallBookingCounts);
// Add date change listeners
document.getElementById("fromDate").addEventListener("change", () => {
const fromDate = document.getElementById("fromDate").value;
const toDate = document.getElementById("toDate").value;
fetchAmountCollected(fromDate, toDate,bid, renderAmountCollected);
fetchBookingCounts(fromDate, toDate, bid,renderBookingCounts);
fetchOverAllBookingCounts(fromDate, toDate,bid, renderOverallBookingCounts);
fetchAmountCollected(fromDate, toDate, bid, renderAmountCollected);
fetchBookingCounts(fromDate, toDate, bid, renderBookingCounts);
fetchOverAllBookingCounts(fromDate, toDate, bid, renderOverallBookingCounts);
});
document.getElementById("toDate").addEventListener("change", () => {
const fromDate = document.getElementById("fromDate").value;
const toDate = document.getElementById("toDate").value;
fetchAmountCollected(fromDate, toDate,bid, renderAmountCollected);
fetchBookingCounts(fromDate, toDate,bid, renderBookingCounts);
fetchOverAllBookingCounts(fromDate, toDate, bid,renderOverallBookingCounts);
fetchAmountCollected(fromDate, toDate, bid, renderAmountCollected);
fetchBookingCounts(fromDate, toDate, bid, renderBookingCounts);
fetchOverAllBookingCounts(fromDate, toDate, bid, renderOverallBookingCounts);
});
});
@ -685,7 +703,7 @@ input[type="date"] {
position: "bottom",
align: "start",
labels: {
generateLabels: function(chart) {
generateLabels: function (chart) {
const dataset = chart.data.datasets[0];
return chart.data.labels.map((label, i) => ({
text: `${label}: ${dataset.data[i]}`,
@ -726,7 +744,7 @@ input[type="date"] {
position: "bottom",
align: "start",
labels: {
generateLabels: function(chart) {
generateLabels: function (chart) {
const dataset = chart.data.datasets[0];
return chart.data.labels.map((label, i) => ({
text: `${label}: ${dataset.data[i]}`,
@ -748,7 +766,7 @@ input[type="date"] {
labels: ['HD', 'FD', 'M'], // Define fixed labels
ticks: {
color: '#1E3A8A',
callback: function(value, index) {
callback: function (value, index) {
return this.getLabelForValue(index);
}
}
@ -764,7 +782,7 @@ input[type="date"] {
{
type: "doughnut",
data: {
labels: ["4 Seater - Hall 1", "4 Seater - Hall 2"," 6 Seater"],
labels: ["4 Seater - Hall 1", "4 Seater - Hall 2", " 6 Seater"],
datasets: [
{
data: [0, 0, 0],
@ -779,7 +797,7 @@ input[type="date"] {
position: "bottom",
align: "start",
labels: {
generateLabels: function(chart) {
generateLabels: function (chart) {
const dataset = chart.data.datasets[0];
return chart.data.labels.map((label, i) => ({
text: `${label}: ${dataset.data[i]}`,
@ -811,7 +829,7 @@ input[type="date"] {
datasets: [
{
data: [24, 85, 54, 36, 19],
backgroundColor: ["#1E3A8A","#4C1D95","#374151","#10B981","#9A3412"],
backgroundColor: ["#1E3A8A", "#4C1D95", "#374151", "#10B981", "#9A3412"],
},
],
},
@ -822,7 +840,7 @@ input[type="date"] {
position: "bottom",
align: "start",
labels: {
generateLabels: function(chart) {
generateLabels: function (chart) {
const dataset = chart.data.datasets[0];
return chart.data.labels.map((label, i) => ({
text: `${label}: ${dataset.data[i]}`,
@ -844,7 +862,7 @@ input[type="date"] {
labels: ['S1', 'S2', 'S3', 'S4', 'S5'], // Define fixed labels
ticks: {
color: '#1E3A8A',
callback: function(value, index) {
callback: function (value, index) {
return this.getLabelForValue(index);
}
}
@ -860,37 +878,37 @@ input[type="date"] {
//ajax function
$(document).ready(function () {
// Initialize DataTable on page load
// Initialize DataTable on page load
const dataTable = $('#nameinclusion').DataTable();
// Set default date values for fromDate and toDate inputs
// Set default date values for fromDate and toDate inputs
// const today = new Date().toISOString().split("T")[0];
//document.getElementById("fromDate").value = today;
// document.getElementById("toDate").value = today;
const fromDateInput = document.getElementById("fromDate");
const toDateInput = document.getElementById("toDate");
const toDateInput = document.getElementById("toDate");
// Calculate today's date
const today = new Date();
//ak done for loading date format
// Calculate today's date
const today = new Date();
//ak done for loading date format
const todayStr = today.toISOString().split("T")[0];
const todayStr = today.toISOString().split("T")[0];
// Calculate max date (today + 2 months)
const maxDate = new Date(today);
maxDate.setMonth(maxDate.getMonth() + 2);
const maxDateStr = maxDate.toISOString().split("T")[0];
// Calculate max date (today + 2 months)
const maxDate = new Date(today);
maxDate.setMonth(maxDate.getMonth() + 2);
const maxDateStr = maxDate.toISOString().split("T")[0];
// Set max date for both inputs (no min means past dates are allowed)
fromDateInput.max = maxDateStr;
toDateInput.max = maxDateStr;
// Set max date for both inputs (no min means past dates are allowed)
fromDateInput.max = maxDateStr;
toDateInput.max = maxDateStr;
// Set initial values to today
fromDateInput.value = todayStr;
toDateInput.value = todayStr;
// Set initial values to today
fromDateInput.value = todayStr;
toDateInput.value = todayStr;
// Function to update toDate range based on fromDate
function updateToDateRange() {
// Function to update toDate range based on fromDate
function updateToDateRange() {
const fromDate = new Date(fromDateInput.value);
if (!isNaN(fromDate.getTime())) {
@ -903,26 +921,26 @@ function updateToDateRange() {
toDateInput.value = fromDateInput.value;
}
}
}
}
// Initial setup
updateToDateRange();
// Initial setup
updateToDateRange();
// Listen for changes in fromDate
fromDateInput.addEventListener("change", updateToDateRange);
// Listen for changes in fromDate
fromDateInput.addEventListener("change", updateToDateRange);
// Trigger AJAX call when either fromDate or toDate changes
function fetchData(fromDate, toDate,bid, status) {
// Trigger AJAX call when either fromDate or toDate changes
function fetchData(fromDate, toDate, bid, status) {
// console.log("bid to fetch data",bid);
// console.log("frondate",fromDate)
// console.log("todate",toDate);
$.ajax({
url: '/muthalvarpadaippagam/book/api/getbookingdetailDashBoard',
type: 'GET',
data: { fromDate: fromDate, toDate: toDate,bid:bid , status:status },
success: function(response) {
data: { fromDate: fromDate, toDate: toDate, bid: bid, status: status },
success: function (response) {
// console.log(response);
const bookingTableBody = $('#nameinclusion tbody');
dataTable.clear(); // Clear existing table data
@ -961,7 +979,8 @@ fromDateInput.addEventListener("change", updateToDateRange);
< td colspan = "10" style = "text-align:center;" > No booking details available.< / td >
< / tr >
`;
bookingTableBody.empty().append(noDataRow);}
bookingTableBody.empty().append(noDataRow);
}
// dataTable.draw(); // Clear the DataTable
// // dataTable.rows.add([]); // Add empty rows
// // $('#nameinclusiontable').show();
@ -969,7 +988,7 @@ fromDateInput.addEventListener("change", updateToDateRange);
dataTable.draw(); // Redraw the DataTable
},
error: function(error) {
error: function (error) {
console.error('Error fetching booking details:', error);
alert('Failed to fetch booking details. Please try again later.');
}
@ -980,13 +999,13 @@ fromDateInput.addEventListener("change", updateToDateRange);
//console.log("withoutpassibg",bid);
// Fetch data for today's date on page load
const today1 = new Date().toISOString().split("T")[0];
// Fetch data for today's date on page load
const today1 = new Date().toISOString().split("T")[0];
//console.log("today1",today1)
fetchData(today1, today1,bid, '');
//console.log("today1",today1)
fetchData(today1, today1, bid, '');
// // Fetch data dynamically when dates are changed
// // Fetch data dynamically when dates are changed
function updateData() {
const fromDate = $('#fromDate').val();
const toDate = $('#toDate').val();
@ -996,7 +1015,7 @@ const today1 = new Date().toISOString().split("T")[0];
if (fromDate & & toDate) {
// console.log("fromdate",fromDate);
//console.log("todate",toDate);
fetchData(fromDate, toDate,bid, status);
fetchData(fromDate, toDate, bid, status);
}
}
@ -1008,13 +1027,14 @@ const today1 = new Date().toISOString().split("T")[0];
window.history.pushState(null, document.title, window.location.href);
// Handle back button event
window.onpopstate = function() {
window.onpopstate = function () {
// Redirect to home when back button is pressed
window.location.href = '/muthalvarpadaippagam';
};
< / script >
< / script >
< / body >
< / html >
