EVOLUTION-NINJA
Edit File: view_customer_payment_details.php
<?php echo view('includes/headerSidebar'); ?> <script type="text/javascript" src="<?php echo base_url('public/assets/js/jquery-3.6.0.min.js'); ?>"></script> <script src="<?php echo base_url('public/assets/toastr/toastr.min.js');?>"></script> <style> /* Reduce table margin and padding */ .dataTables_wrapper { margin: 10px auto; /* Smaller margin */ width: 95%; /* Adjust width for a compact layout */ } /* Style table */ #datatable { border: 1px solid #ddd; border-radius: 5px; font-size: 14px; /* Adjust font size */ background-color: #fff; } /* Header styling */ #datatable thead { background-color: #f4f4f4; color: #333; font-weight: bold; border-bottom: 2px solid #ccc; } /* Row styling */ #datatable tbody tr { border-bottom: 1px solid #ddd; } #datatable tbody tr:hover { background-color: #f9f9f9; /* Highlight on hover */ } /* Action buttons */ .crud--buttons .btn { margin: 0 5px; /* Small spacing between buttons */ font-size: 12px; /* Smaller font for buttons */ padding: 5px 10px; /* Compact button size */ border-radius: 3px; } /* Eye icon button */ .view--butt { color: #fff; background-color: #17a2b8; /* Bootstrap 'info' color */ border: none; } /* Menu icon button */ .menu--butt { color: #fff; background-color: #6c757d; /* Bootstrap 'secondary' color */ border: none; } /* Icon sizes */ .fas { font-size: 14px; vertical-align: middle; } /* Serial number column */ #datatable td:first-child { text-align: center; font-weight: bold; } .mainheading { padding: 8px 17px; box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; color: #15283C; font-size: 18px; font-weight: 500; } </style> <div id="main" class="p-4"> <section class="home-section fullpage"> <div class="home-content"> <i class='bx bx-menu'></i> <!-- <span class="text">Drop Down Sidebar</span> --> </div> <br> <!-- heading row --> <div class="row m-0"> <div class="col-sm-12"> <div class="mainheading mb-3">Payment Reports</div> </div> </div> <br> <!-- form row --> <!-- forms --> <!-- Date Range Filter --> <form id="dateFilterForm" class="ml-3"> <div class="row"> <div class="col-sm-3"> <label for="">SCHEME</label> <select class="form-control" id="scheme" name="scheme"> </select> </div> <div class="col-sm-3"> <label for="fromDate">From Date:</label> <input type="date" class="form-control" id="fromDate" name="fromDate"> </div> <div class="col-sm-3"> <label for="toDate">To Date:</label> <input type="date" class="form-control" id="toDate" name="toDate"> <br><br> </div> <div class="col-sm-3" style="margin-top:35px" > <button type="submit" id="filterBtn" class="btn btn-success">Filter</button> <button id="exportBtn" class="btn btn-success ">Export to Excel</button> </div> </div> </form> <br><br> <table id="datatable" class="table table-striped table-bordered"> <thead> <tr> <th>SL No</th> <th>ID</th> <th>Name</th> <th>User Id</th> <th>Scheme</th> <th>Amount</th> <!--<th>Promoter Name</th>--> <th>Created At</th> </tr> </thead> <tbody></tbody> </table> </section> </div> </body> <script src="https://cdn.jsdelivr.net/npm/datatables.net/js/jquery.dataTables.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.10.8/dist/sweetalert2.all.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script> <script> $(document).ready(function () { var table = $('#datatable').DataTable({ pageLength: 20, ajax: { url: '<?php echo base_url("get-payment-report"); ?>', // Ensure the correct URL is used data: function(d) { var fromDate = $('#fromDate').val(); var toDate = $('#toDate').val(); var scheme = $('#scheme').val(); // Add filters to the request data if (fromDate) d.fromDate = fromDate; if (toDate) d.toDate = toDate; if (scheme) d.scheme = scheme; }, dataSrc: function(json) { if (json.success === false) { // alert(json.message); return []; } return json; // Ensure correct data format }, error: function(xhr, status, error) { console.error("AJAX error:", error); console.log("Status:", status); console.log("Response Text:", xhr.responseText); // alert('Error fetching data. Please check the console for more details.'); } }, columns: [ { data: null }, { data: 'id', visible: false }, { data: 'name' }, { data: 'user_id' }, { data: 'scheme_name' }, { data: 'amount' }, // { data: 'promoter_name' }, { data: 'created_at', render: function(data) { var date = new Date(data); var day = ("0" + date.getDate()).slice(-2); var month = ("0" + (date.getMonth() + 1)).slice(-2); var year = date.getFullYear().toString(); var hours = ("0" + date.getHours()).slice(-2); var minutes = ("0" + date.getMinutes()).slice(-2); return day + '-' + month + '-' + year + ' ' + hours + ':' + minutes; } }, ], rowCallback: function(row, data, index) { $('td:eq(0)', row).html(index + 1); // Serial number column }, language: { emptyTable: "No data available" } }); // Trigger filtering on form submission $('#dateFilterForm').on('submit', function(e) { e.preventDefault(); // Prevent form submission (page reload) table.ajax.reload(); // Reload the DataTable with new filters }); $('#exportBtn').on('click', function() { // Get the data from the DataTable var data = table.rows({ search: 'applied' }).data().toArray(); // Initialize the headers and exclude the 'ID' column from the header var headers = ['SL No', 'Name', 'User Id', 'Scheme Name', 'Amount', 'Created At']; // Create a worksheet from the table data, excluding the 'ID' column var ws = XLSX.utils.aoa_to_sheet([headers].concat(data.map(function(row, index) { return [ index + 1, // Serial number column row.name, row.user_id, row.scheme_name, row.amount, row.created_at ]; }))); // Create a new workbook and append the worksheet var wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, "Payment Report"); // Export the workbook to an Excel file XLSX.writeFile(wb, "payment_report.xlsx"); }); }); </script> <script> $(document).ready(function () { $.ajax({ url: '<?php echo base_url("fetch-scheme"); ?>', method: 'GET', success: function (response) { if (response.length > 0) { var options = '<option value="">Select Scheme</option>'; $.each(response, function (key, value) { options += `<option value="${value.id}">${value.scheme}</option>`; }); $('#scheme').html(options); } else { // alert('No funds found'); } }, error: function (xhr, status, error) { console.error("Error fetching scheme:", error); } }); }); </script> <!--<script>--> <!-- let arrow = document.querySelectorAll(".arrow");--> <!-- for (var i = 0; i < arrow.length; i++) {--> <!-- arrow[i].addEventListener("click", (e) => {--> <!-- let arrowParent = e.target.parentElement.parentElement;--> <!-- arrowParent.classList.toggle("showMenu");--> <!-- });--> <!-- }--> <!-- let sidebar = document.querySelector(".sidebar");--> <!-- let sidebarBtn = document.querySelector(".bx-menu");--> <!-- sidebarBtn.addEventListener("click", () => {--> <!-- sidebar.classList.toggle("close");--> <!-- });--> <!--</script>--> </html>