EVOLUTION-NINJA
Edit File: Admin_Approved_RepaymentPins.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> <link rel="stylesheet" href="<?php echo base_url('public/assets/toastr/toastr.min.css');?>"> <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css"> <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> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"> <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">Repayment Pins Report</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">SCHEME</label> <select class="form-control" id="scheme" name="scheme"> <!-- Scheme options will be dynamically populated --> </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"> </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> <br><br> <table id="datatable" class="table table-striped table-bordered"> <thead> <tr> <th>SL No</th> <th>Scheme</th> <th>Promoter ID</th> <th>Promoter Name</th> <th>Repayment Pins</th> <th>Created At</th> </tr> </thead> <tbody></tbody> </table> <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({ "processing": false, "serverSide": true, "ajax": { "url": "<?php echo base_url('get-repayment-approvedPins') ?>", "type": "POST", "data": function (d) { d.fromDate = $('#fromDate').val(); d.toDate = $('#toDate').val(); d.scheme=$('#scheme').val(); }, "dataSrc": function (json) { console.log(json); return json.data; } }, "columns": [ { "data": null, "render": function (data, type, row, meta) { return meta.row + 1; } }, { "data": "scheme_name" }, { "data": "promoter" }, { "data": "name" }, { "data": "total_slots" }, { "data": "created_at" }, ], "language": { "emptyTable": "No data available" } }); $('#filterBtn').on('click', function (e) { e.preventDefault(); table.ajax.reload(); }); $('#exportBtn').on('click', function (e) { e.preventDefault(); var data = table.rows({ search: 'applied' }).data().toArray(); var headers = ['SL No', 'MONTH', 'Scheme Name', 'Repayment Pins']; var ws = XLSX.utils.aoa_to_sheet([headers].concat(data.map(function (row, index) { return [ index + 1, row.month_year, row.scheme_name, row.total_slots ]; }))); var wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, "Repayment Pins Report"); XLSX.writeFile(wb, "Repayment_pins_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>