You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
411 lines
14 KiB
411 lines
14 KiB
<!DOCTYPE html>
|
|
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
|
<head th:replace="~{fragments/modules/base/head :: head}">
|
|
|
|
</head>
|
|
<style>
|
|
|
|
</style>
|
|
<body>
|
|
<div class="wrapper">
|
|
|
|
<!-- header top menu Start -->
|
|
<header th:replace="~{fragments/modules/base/header :: header}"></header>
|
|
<!-- header top menu end -->
|
|
<div class="page-wrap">
|
|
<!--=============== Left Menu side Start ================-->
|
|
<div th:replace="~{fragments/modules/base/menu :: menu}"></div>
|
|
<!--=============== Left side End ================-->
|
|
|
|
|
|
<div class="main-content">
|
|
<div class="container-fluid">
|
|
<div class="page-header mb-2">
|
|
<div class="row align-items-end">
|
|
<div class="col-lg-8">
|
|
<div class="page-header-title">
|
|
<i class="fa fa-list-alt bg-blue"></i>
|
|
<div class="d-inline">
|
|
<h5>Reports</h5>
|
|
<span>C&D Waste Collections Reports</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
<nav class="breadcrumb-container" aria-label="breadcrumb">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="/gcc/index"><i
|
|
class="ik ik-home"></i></a></li>
|
|
<li class="breadcrumb-item" aria-current="page">C&D Waste Collections Reports</li>
|
|
<li class="breadcrumb-item active" aria-current="page"> Reports</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="row mt-4">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<span style="font-size: medium;font-weight: bold;">Reports Filters</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
|
|
<div class="col-sm-2 mb-2">
|
|
<label for="startDate" class="form-label">From Date:<span class="text-danger">*</span></label>
|
|
<input type="date" id="startDate" class="form-control">
|
|
</div>
|
|
|
|
<div class="col-sm-2 mb-2">
|
|
<label for="endDate" class="form-label" >To Date:<span class="text-danger">*</span></label>
|
|
<input type="date" id="endDate" class="form-control">
|
|
</div>
|
|
|
|
<div class="col-sm-2 mb-2 ">
|
|
<label for="wastequantity" class="form-label">Select weight quantity<span class="text-danger">*</span>
|
|
</label> <select id="wastequantity" class="form-control">
|
|
|
|
<!-- dynamically get the quantities -->
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-sm-2 mb-2">
|
|
|
|
<label for="zoneDropdown" class="form-label"> Select
|
|
Zone <span class="text-danger">*</span>
|
|
</label> <select id="zoneDropdown" class="form-control">
|
|
<option value="">Select Zone</option>
|
|
<!-- Zones will be loaded dynamically -->
|
|
</select>
|
|
|
|
</div>
|
|
|
|
<div class="row mt-4">
|
|
<div class="col-md-12 mb-2 d-flex justify-content-center">
|
|
<button type="submit" id="searchBtn"
|
|
class="btn btn-primary mx-2">Search</button>
|
|
|
|
<button class="btn btn-danger mx-2" id="resetBtn" name="reset" type="button">Reset</button>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<span style="font-size: medium;font-weight: bold;">Reports List</span>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive" >
|
|
|
|
<table id="ReportDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid">
|
|
<thead class="thead-dark">
|
|
<tr role="row">
|
|
|
|
<th class="text-center no-sort">S.No</th>
|
|
<th class="text-center">Request ID</th>
|
|
<th class="text-center">Request Date</th>
|
|
<th class="text-center">Name</th>
|
|
<th class="text-center">Mobile Number</th>
|
|
<th class="text-center">Area</th>
|
|
<th class="text-center">Zone</th>
|
|
<th class="text-center">Weight Quantity</th>
|
|
<th class="text-center">Waste Type</th>
|
|
<th class="text-center">Dumping Location</th>
|
|
<th class="text-center">Actual Weight</th>
|
|
<th class="text-center">Payment Status</th>
|
|
<th class="text-center">Total Amount</th>
|
|
|
|
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="pageLoader" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center;">
|
|
<div style="position: relative; top: 50%; transform: translateY(-50%);">
|
|
<div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
|
|
<span class="sr-only">Loading...</span>
|
|
</div>
|
|
<!-- Add the 'Please wait' text below the spinner -->
|
|
<p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please wait...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- in the code use to show the download different type microsoft -->
|
|
|
|
<!-- Include jQuery and Bootstrap JavaScript -->
|
|
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
|
|
|
<script th:replace="~{fragments/modules/base/script :: script}"></script>
|
|
<!-- sweet alert -->
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
<script type="text/javascript">
|
|
|
|
|
|
|
|
$(document).ready(function() {
|
|
|
|
var table = $('#ReportDatatable').DataTable({
|
|
dom: 'Bftip',
|
|
columnDefs: [
|
|
{ targets: 'no-sort', orderable: false }
|
|
],
|
|
lengthMenu: [
|
|
[50, 100, 200, 500, -1],
|
|
['50 rows', '100 rows', '200 rows', 'Show all']
|
|
],
|
|
scrollY: '80vh',
|
|
scrollX: true,
|
|
|
|
buttons: [
|
|
{
|
|
extend: 'pageLength',
|
|
className: 'btn btn-warning'
|
|
},
|
|
{
|
|
title: 'Data export',
|
|
extend: 'copyHtml5',
|
|
text: 'Copy',
|
|
className: 'btn btn-secondary',
|
|
id: 'copyBtn'
|
|
},
|
|
{
|
|
extend: 'excelHtml5',
|
|
text: 'Excel',
|
|
className: 'btn btn-secondary',
|
|
id: 'excelBtn'
|
|
},
|
|
{
|
|
extend: 'csvHtml5',
|
|
text: 'CSV',
|
|
className: 'btn btn-secondary',
|
|
id: 'csvBtn'
|
|
},
|
|
{
|
|
extend: 'pdfHtml5',
|
|
text: 'PDF',
|
|
className: 'btn btn-secondary',
|
|
id: 'pdfBtn'
|
|
}
|
|
],
|
|
fixedHeader: true,
|
|
autoWidth: false,
|
|
scrollX: true,
|
|
responsive: false,
|
|
paging:true,
|
|
searching: true,
|
|
select: false,
|
|
processing: false
|
|
});
|
|
|
|
// Event listener for From Date selection
|
|
|
|
$(document).ready(function () {
|
|
const today = new Date();
|
|
const formattedToday = today.toISOString().split('T')[0];
|
|
|
|
// Get date 30 days ago
|
|
const pastDate = new Date();
|
|
pastDate.setDate(today.getDate() - 30);
|
|
const formattedPast = pastDate.toISOString().split('T')[0];
|
|
|
|
// Set default values and limits
|
|
$("#startDate").val(formattedPast);
|
|
$("#startDate").attr("max", formattedToday);
|
|
$("#endDate").val(formattedToday);
|
|
$("#endDate").attr("min", formattedPast);
|
|
$("#endDate").attr("max", formattedToday);
|
|
|
|
// Load quantities
|
|
$.ajax({
|
|
url: "/gcc/api/dumpregistration/getquantity",
|
|
type: "GET",
|
|
success: function (data) {
|
|
let quantityDropdown = $("#wastequantity");
|
|
quantityDropdown.empty().append("<option value=''>Select Quantity</option>");
|
|
$.each(data, function (index, item) {
|
|
quantityDropdown.append(`<option value="${item.quantity}">${item.quantity}</option>`);
|
|
});
|
|
},
|
|
error: function (xhr, status, error) {
|
|
console.error("Error fetching quantities:", error);
|
|
}
|
|
});
|
|
|
|
// Function to fetch and load data
|
|
function loadReportData() {
|
|
let startDate = $('#startDate').val();
|
|
let endDate = $('#endDate').val();
|
|
let zone = $('#zoneDropdown').val();
|
|
let wasteQuantity = $('#wastequantity').val();
|
|
|
|
const params = new URLSearchParams({
|
|
fromDate: startDate,
|
|
toDate: endDate
|
|
});
|
|
|
|
if (zone) {
|
|
params.append("zone", zone);
|
|
}
|
|
|
|
if (wasteQuantity) {
|
|
params.append("wastequantity", wasteQuantity);
|
|
}
|
|
|
|
$('#pageLoader').show();
|
|
|
|
$.ajax({
|
|
type: "GET",
|
|
url: `/gcc/api/dumpregistration/getAllDetails?${params.toString()}`,
|
|
contentType: "application/json",
|
|
success: function (response) {
|
|
$('#pageLoader').hide();
|
|
|
|
if (Array.isArray(response) && response.length > 0) {
|
|
$('#ReportDatatable').DataTable({
|
|
destroy: true,
|
|
searching: true,
|
|
paging: true,
|
|
info: true,
|
|
autoWidth: true, // IMPORTANT: let you control column width
|
|
scrollX: true, // Enables horizontal scroll
|
|
responsive: true, // Disable built-in responsive which hides columns
|
|
data: response,
|
|
columns: [
|
|
{ data: null, render: (data, type, row, meta) => meta.row + 1, className: 'text-center' },
|
|
{ data: 'refid', defaultContent: '-', className: 'text-center' },
|
|
{ data: 'request_date', defaultContent: '-', className: 'text-center' },
|
|
{ data: 'name', defaultContent: '-', className: 'text-center' },
|
|
{ data: 'mobile_no', defaultContent: '-', className: 'text-center' },
|
|
{ data: 'area', defaultContent: '-', className: 'text-center' },
|
|
{ data: 'zone', defaultContent: '-', className: 'text-center' },
|
|
{ data: 'quantity', defaultContent: '-', className: 'text-center' },
|
|
{ data: 'waste_type', defaultContent: '-', className: 'text-center' },
|
|
{ data: 'location', defaultContent: '-', className: 'text-center' },
|
|
{ data: 'actual_weight', defaultContent: '-', className: 'text-center' },
|
|
{ data: 'payment_status', defaultContent: '-', className: 'text-center' },
|
|
{ data: 'total_charge', defaultContent: '-', className: 'text-center' }
|
|
|
|
],
|
|
dom: 'Bfrtip',
|
|
buttons: [
|
|
{ extend: 'pageLength', className: 'btn btn-warning' },
|
|
{ extend: 'copyHtml5', text: 'Copy', className: 'btn btn-secondary' },
|
|
{ extend: 'excelHtml5', text: 'Excel', className: 'btn btn-secondary' },
|
|
{ extend: 'csvHtml5', text: 'CSV', className: 'btn btn-secondary' },
|
|
{ extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-secondary' }
|
|
],
|
|
columnDefs: [{ targets: 'no-sort', orderable: false }],
|
|
lengthMenu: [
|
|
[50, 100, 200, 500, -1],
|
|
['50 rows', '100 rows', '200 rows', 'Show all']
|
|
],
|
|
scrollY: '80vh',
|
|
scrollX: true,
|
|
responsive: true
|
|
});
|
|
} else {
|
|
Swal.fire({
|
|
icon: 'warning',
|
|
title: 'No Data',
|
|
text: 'No data available for the selected criteria.'
|
|
});
|
|
}
|
|
},
|
|
error: function () {
|
|
$('#pageLoader').hide();
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'Error',
|
|
text: 'Something went wrong while fetching the data.'
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// Bind search button to loadReportData
|
|
$('#searchBtn').on('click', function (e) {
|
|
e.preventDefault();
|
|
|
|
let startDate = $('#startDate').val();
|
|
let endDate = $('#endDate').val();
|
|
|
|
if (!startDate || !endDate) {
|
|
Swal.fire({
|
|
icon: 'warning',
|
|
title: 'Error',
|
|
text: 'Please Select Both From Date and To Date',
|
|
showConfirmButton: true,
|
|
timer: 3000
|
|
});
|
|
return;
|
|
}
|
|
|
|
loadReportData();
|
|
});
|
|
|
|
// Load data for the last 30 days on page load
|
|
loadReportData();
|
|
});
|
|
|
|
});
|
|
|
|
$('#resetBtn').click(function () {
|
|
location.reload();
|
|
});
|
|
|
|
|
|
|
|
// Load all zones
|
|
$(document).ready(function () {
|
|
$.ajax({
|
|
url: '/gcc/api/dumpregistration/getzones',
|
|
type: 'GET',
|
|
success: function (zones) {
|
|
|
|
$.each(zones, function (index, zone) {
|
|
$('#zoneDropdown').append('<option value="' + zone.id + '">' + zone.zone_name + '</option>');
|
|
});
|
|
},
|
|
error: function () {
|
|
alert('Failed to load zones.');
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|