EVOLUTION-NINJA
Edit File: followUpReport.php
<?php echo view('includes/home_sidebar'); ?> <style> .th-dark{ color: white !important; background-image: linear-gradient(to top, #a3bded 0%, #0046a4 100%); } #leftDiv{ height: 1090px; } </style> <main id="rightdiv"> <div class="container-fluid"> <div class="row"> <div class="row fee-structure"> <!-- <div class="col-sm-1"></div> --> <div class="col-sm-8 fee-ri-rpt"> <h2 style="color: #005054;">Follow-Up Report</h2> </div> <div class="col-sm-1"> </div> <div class="col-sm-2"> <button class="btn back-butt" onclick="goBack()"><i class="fa fa-arrow-left" aria-hidden="true"></i> Back</button> </div> </div> <div class="col-sm-12"> <section class="spec-main last_body"> <div class="row"> <div class="col-sm-12 "> <!-- <div class="row mt-4" id="pdf-div"> <div class="col-sm-9 edit_case"> <h3>Follow-Up Report</h3> </div> <div class="col-sm-2 back"> <button class="btn back-butt" onclick="goBack()"><i class="fa fa-arrow-left" aria-hidden="true"></i> Back</button> </div> <div class="col-sm-1"></div> </div> --> <div id="jaytablist33" > <div class="grid_div"></div> <div id="list2"> <div class="mb-4 strtser"> <div class="row date_input"> <!-- <div class="col-sm-3"> <label for="case_id" class="case"><b>Follow-Up ID:</b></label> <input type="text" id="case_id" name="case_id"> </div> <div class="col-sm-8"> <button id="apply_case_id_filter" class="apply_filter ml-2">Search by Follow-Up ID</button> </div> </div> --> <div class="row mt-4 date_input"> <div class="col-sm-3 st_dat"> <label for="start_date" class="start "><b>Start Date:</b></label> <input type="text" id="start_date" class="form-control" name="start_date"> </div> <div class="col-sm-3"> <label for="end_date" class="end"><b>End Date:</b></label> <input type="text" id="end_date" class="form-control" name="end_date"> </div> <div class="col-sm-2 mt-4"> <button id="apply_date_filters" class="apply_filter ml-2 ">Search by Date</button> <span id="clear_filters" class="ml-2"><i class="fa fa-window-close clear" aria-hidden="true"></i></span><br /> </div> <div class="col-sm-3 mt-4"> <button class="apply_filter ml-2" onclick="exportToPdf()">Export to PDF</button> </div> </div> </div> <table id="followUpTable" class="table table-striped"> <thead class="thead-dark"> <tr> <th class="th-dark">SL</th> <th class="th-dark">Follow-up ID</th> <th class="th-dark">Lead ID</th> <th class="th-dark">Today's Date</th> <th class="th-dark">Today's Time</th> <th class="th-dark">Follow-Up Date</th> <th class="th-dark">Follow Up Remarks</th> <th class="th-dark">Followed Up By</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> <div id="pager3"></div> </div> </div> </section> </div> </div> </div> <div id="leadsPieChartContainer"> <div> <canvas id="leadsPieChart"></canvas> </div> </div> </main> </section> <link rel="stylesheet" type="text/css" media="screen" href="<?php echo base_url('public/assets/css/jquery-ui.css'); ?>" /> <link rel="stylesheet" type="text/css" media="screen" href="<?php echo base_url('public/jqgrid/css/ui.jqgrid.css'); ?>" /> <link rel="stylesheet" type="text/css" media="screen" href="<?php echo base_url('public/jqgrid/css/ui.jqgrid-bootstrap.css'); ?>" /> <script src="<?php echo base_url('public/assets/js/jquery-ui.js'); ?>" type="text/javascript"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.13/jspdf.plugin.autotable.min.js"></script> <script> $(document).ready(function() { $("#start_date, #end_date").datepicker({ dateFormat: 'dd-mm-yy', changeMonth: true, changeYear: true, }); function fetchFollowUpData() { $.ajax({ url: '<?php echo base_url("followup-date"); ?>', method: 'GET', data: { start_date: $("#start_date").val(), end_date: $("#end_date").val(), case_id: $("#case_id").val() }, success: function(data) { var tableBody = $("#followUpTable tbody"); tableBody.empty(); data.forEach(function(row, index) { var tableRow = `<tr> <td>${index + 1}</td> <td>${row.id}</td> <td>${row.leads_id}</td> <td>${row.today_date}</td> <td>${row.today_time}</td> <td>${row.next_date}</td> <td>${row.follow_up_remarks}</td> <td>${row.follow_by}</td> </tr>`; tableBody.append(tableRow); }); fetchFollowUpGraph(); }, error: function(error) { console.error('Error fetching data:', error); } }); } var leadsPieChart; function fetchFollowUpGraph() { $.ajax({ url: '<?php echo base_url("followup-graph"); ?>', method: 'GET', data: { start_date: $("#start_date").val(), end_date: $("#end_date").val(), case_id: $("#case_id").val() // Include case_id in the data }, success: function(data) { var labels = []; var counts = []; data.forEach(function(item) { labels.push('Lead ID: ' + item.leads_id); counts.push(item.count); }); var ctx = document.getElementById('leadsPieChart').getContext('2d'); if (leadsPieChart) { leadsPieChart.destroy(); } leadsPieChart = new Chart(ctx, { type: 'pie', data: { labels: labels, datasets: [{ label: 'Leads Count', data: counts, backgroundColor: [ 'rgba(31, 119, 180, 0.6)', 'rgba(255, 127, 14, 0.6)', 'rgba(44, 160, 44, 0.6)', 'rgba(214, 39, 40, 0.6)', 'rgba(148, 103, 189, 0.6)', 'rgba(140, 86, 75, 0.6)' ], borderColor: [ 'rgba(31, 119, 180, 1)', 'rgba(255, 127, 14, 1)', 'rgba(44, 160, 44, 1)', 'rgba(214, 39, 40, 1)', 'rgba(148, 103, 189, 1)', 'rgba(140, 86, 75, 1)' ], borderWidth: 1 }] }, options: { responsive: true, plugins: { legend: { position: 'top', }, title: { display: true, text: 'Leads Count Pie Chart' } } } }); }, error: function(error) { console.error('Error fetching data:', error); } }); } $("#apply_date_filters, #apply_case_id_filter").click(function () { fetchFollowUpData(); }); $("#clear_filters").click(function () { $("#start_date").val(''); $("#end_date").val(''); $("#case_id").val(''); fetchFollowUpData(); }); fetchFollowUpData(); }); // ========= export pdf ===========// async function exportToPdf() { const { jsPDF } = window.jspdf; const doc = new jsPDF('p', 'mm', 'a4'); var graphElement = document.getElementById('leadsPieChart'); const graphCanvas = await html2canvas(graphElement, { scale: 2, useCORS: true }); var imgData = graphCanvas.toDataURL('image/png'); var imgWidth = graphElement.offsetWidth * 0.264583; var imgHeight = graphElement.offsetHeight * 0.264583; doc.addImage(imgData, 'PNG', 10, 10, imgWidth, imgHeight); var tableYPosition = imgHeight + 20; doc.autoTable({ html: '#followUpTable', startY: tableYPosition, theme: 'striped', styles: { overflow: 'linebreak', } }); doc.save('Follow-Up Report.pdf'); } </script> <!--========== BACK BUTTON SCRIPT =============--> <script> function goBack() { window.location.href = "<?php echo base_url('report-page');?>"; } </script> <!-- ======== CSS style --> <style> table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f2f2f2; } .apply_filter { background-color: rgba(0, 72, 76, 1); cursor: pointer; color: #fff; border: 0; padding: 5px 12px; border-radius: 8px; } .apply_filter:hover { background-color: #45a049; } .clear { cursor: pointer; color: red; } #followUpTable { margin-top: 20px; } .back-butt { color: black; border: none; padding: 10px 20px; cursor: pointer; } #leadsPieChartContainer{ width:350px; height:350px; /* margin-left:500px; */ } </style>