From 16135992fa8d8d628aa6fc6673de43edefe03274 Mon Sep 17 00:00:00 2001
From: "venkatesh.r" <venkatesh.r@venbainfotech.com>
Date: Sat, 15 Nov 2025 10:49:27 +0530
Subject: [PATCH] FEAT_PAYOUT_VIEWS

---
 app/Views/payout_list.php         | 318 ++++++++++++++++++++++++++++++
 app/Views/payout_list_handler.php | 308 +++++++++++++++++++++++++++++
 2 files changed, 626 insertions(+)
 create mode 100644 app/Views/payout_list.php
 create mode 100644 app/Views/payout_list_handler.php

diff --git a/app/Views/payout_list.php b/app/Views/payout_list.php
new file mode 100644
index 00000000..4b4eb477
--- /dev/null
+++ b/app/Views/payout_list.php
@@ -0,0 +1,318 @@
+<style>
+
+    .table th,
+    .table td {
+        padding: 8px;
+    }
+
+    table.dataTable tbody td {
+        padding: 4px 4px !important;
+    }
+
+    .col-12 {
+
+        max-width: 98% !important;
+    }
+
+    .dataTables_filter {
+        position: absolute;
+    }
+
+    .right-align-input {
+        text-align: right;
+    }
+
+    .badge-container {
+    background: #F0F0F0;
+    padding: 6px 12px;
+    border-radius: 6px;
+    font-size: 14px;
+    display: inline-block;
+    }
+
+    .summary-box {
+        background: #e3f2fd;
+        padding: 15px;
+        border-radius: 6px;
+        margin-bottom: 20px;
+        border-left: 4px solid #2196F3;
+    }
+
+    .summary-row {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 8px;
+        font-size: 14px;
+    }
+
+    .summary-row:last-child {
+        margin-bottom: 0;
+        font-size: 16px;
+        font-weight: bold;
+        padding-top: 8px;
+        border-top: 1px solid #2196F3;
+    }
+
+</style>
+
+<div class="col-12">
+    <div class="card">
+        <div class="card-body">
+            <div class="row" style="padding-bottom: 10px;">
+                <div class="col-6" style="align-self: center;">
+                    <h4 style="position: relative;">Payout List <span id="payout_title"></span></h4>
+                </div>
+            </div>
+            <div class="table-responsive">
+                <table data-custom-table-css="table" id="scroll-horizontal-datatable" class="table w-100 nowrap">
+                    <thead class="bg-light">
+                    <tr>
+                        <th class="font-weight-medium">S.No.</th>
+                        <th class="font-weight-medium">Inovice No</th>
+                        <th class="font-weight-medium">Invoice Date</th>
+                        <th class="font-weight-medium">Invoice Amount</th>
+                        <th class="font-weight-medium">UTR Total Amount</th>
+                        <th class="font-weight-medium">Balance</th>
+                        <th class="font-weight-medium">Status</th>
+                        <th class="font-weight-medium">Agent</th>
+                        <th class="font-weight-medium">Action</th>
+                    </tr>
+                    </thead>
+                    <tbody> 
+                        <?php if (isset($payout_list_data) && !empty($payout_list_data)) { ?>
+                            <?php foreach($payout_list_data as $index => $row){ ?>
+                                <tr>
+                                    <td> <?= $index + 1 ?> </td>
+                                    <td> <?= $row['invoice_no'] ?> </td>
+                                    <td> <?= change_date_format($row['invoice_no'], null, 'd-M-Y') ?? "" ?> </td>
+                                    <td> <?= format_indian_number($row['invoice_amount']) ?> </td>
+                                    <td> <?= format_indian_number($row['total_utr_amount']) ?> </td>
+                                    <td> <?= format_indian_number($row['balance_amount']) ?> </td>
+                                    <td> <?= $row['status_text'] ?> </td>
+                                    <td> <?= $row['agent_name'] ?? " - " ?> </td>
+                                    <td>
+                                        <div class="btn-group dropdown">
+                                            <a href="javascript: void(0);" class="dropdown-toggle arrow-none btn btn-light btn-sm" data-toggle="dropdown"aria-expanded="false"><i class="mdi mdi-dots-horizontal"></i></a>
+                                            <div class="dropdown-menu dropdown-menu-right">
+                                                <a class="dropdown-item" onclick="showUtrModal(this)"><i class="mdi mdi-bank-transfer mr-2 text-muted font-18 vertical-middle"></i>UTR</a>
+                                                <a href="<?= base_url('payout/invoices/save?type="edit"') ?>" class="dropdown-item"><i class="mdi mdi-pencil mr-2 text-muted font-18 vertical-middle"></i>Edit</a>
+                                                <a href="<?= base_url('payout/invoices/save?type="adjustment"') ?>" class="dropdown-item"><i class="mdi mdi-tune mr-2 text-muted font-18 vertical-middle"></i>Adjustment</a>                                            
+                                            </div>
+                                        </div>
+                                    </td>
+                                </tr>
+                            <?php } ?>
+                        <?php } ?>
+                    </tbody>
+                </table>
+            </div>
+        </div><!-- end col -->
+    </div>
+</div>
+
+<div class="modal fade" id="payout_modal" tabindex="-1" role="dialog" aria-hidden="true" aria-modal="true" data-backdrop="static">
+    <div class="modal-dialog modal-lg" style="max-width: 1100px;">
+        <div class="modal-content">
+            <div class="modal-header" style="background-color: gainsboro;">
+                <h4 class="modal-title" id="myCenterModalLabel">UTR Management<span id="heading"></span></h4>
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+            </div>
+            <div class="modal-body" id="modal_body">
+
+                <div class="summary-box">
+                    <div class="summary-row">
+                        <span>Invoice Amount:</span>
+                        <span id="utrInvoiceAmount" style="font-weight: bold;">₹0.00</span>
+                    </div>
+                    <div class="summary-row">
+                        <span>Total UTR Paid:</span>
+                        <span id="utrTotalPaid" style="font-weight: bold;">₹0.00</span>
+                    </div>
+                    <div class="summary-row">
+                        <span>Remaining Balance:</span>
+                        <span id="utrRemaining" style="font-weight: bold;">₹0.00</span>
+                    </div>
+                </div>
+
+                <div id="utrContent">
+                    <div style="margin-top: 20px; padding-top: 20px; border-top: 2px solid #eee;">
+                        <h3 style="margin-bottom: 15px;">Add New UTR</h3>
+                        <form id="utrForm" method="POST" action="">
+                            <div class="row">
+                                <div class="col-md-3">
+                                    <div class="form-group">
+                                        <label>UTR Number *</label>
+                                        <input type="text" name="utrNumber" id="utrNumber" class="form-control" placeholder="Enter UTR number" required>
+                                    </div>
+                                </div>
+                                <div class="col-md-3">
+                                    <div class="form-group">
+                                        <label>Amount (₹) *</label>
+                                        <input type="number" name="utrAmount" id="utrAmount" class="form-control" step="0.01" placeholder="Enter amount" required>
+                                        <small style="color: #666; display: block; margin-top: 5px;">
+                                            Maximum: <span id="maxUtrAmount">₹0.00</span>
+                                        </small>
+                                    </div>
+                                </div>
+                                <div class="col-md-3">
+                                    <div class="form-group">
+                                        <label>Date *</label>
+                                        <input type="text" name="utrDate" id="utrDate" class="form-control" placeholder="DD/MM/YYYY" required>
+                                    </div>
+                                </div>
+                                <div class="col-md-3">
+                                    <div class="form-group" style="margin-top: 27px;">
+                                        <button type="submit" class="btn btn-primary" style="width: 100%;">Add UTR</button>
+                                    </div>
+                                </div>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+                <div class="utr-list" id="utrList"></div>
+
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-------------------------------------------------------------------------------------------------->
+
+<script>
+
+    // Datatable document ready
+    $(document).ready(function() {
+
+        var ticketsTable = $('#scroll-horizontal-datatable');
+        if (ticketsTable.length) {
+            ticketsTable.DataTable({
+                scrollX: true,
+                dom: "<'row'<'col-sm-6'f><'col-sm-6 text-right'B>>" + // Filter left, buttons right
+                    "<'row'<'col-sm-12'tr>>" +
+                    "<'row'<'col-sm-5'i><'col-sm-7'p>>", // Pagination at the bottom, without page length selector
+                buttons: [
+                    {
+                        extend: 'collection',
+                        text: '<span class=" btn-custom"> Export </span><i class="mdi mdi-menu-down"></i>',
+                        className: 'btn app-btn-secondary ',
+                        buttons: [
+                            {
+                                extend: 'csv',
+                                title: 'List',
+                                text: '<i class="mdi mdi-file-delimited " ></i><span class="  btn-custom">  CSV </span>',
+                            },
+                            {
+                                extend: 'excel',
+                                title: 'List',
+                                sheetName: 'Policy-Tranction-payout-List',
+                                text: '<i class="mdi mdi-file-excel " ></i><span class="  btn-custom">  EXCEL </span>',
+                                className: 'app-btn-primary ',
+                            }
+                        ]
+                    }
+                ],
+                language: {
+                        search: `
+                        <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
+                            _INPUT_
+                            <i class="mdi mdi-magnify datatable-search-icon" 
+                            style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                            <i class="mdi mdi-close-circle datatable-clear-icon" 
+                            style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
+                        </div>`,
+                        searchPlaceholder: "Search",
+                        emptyTable: '<div class="text-center text-muted">No Data found</div>'
+                },
+                paging: true, // Enable pagination
+                pageLength: 10, // Set default number of rows per page (optional)
+                ordering: false
+            });
+        } else {
+            console.error("Table atet found.");
+        }
+
+    });
+
+    function fetchUtrDetails(invoice_id)
+    {
+        let invoice_id = $('#agent_id').val();
+        if (!invoice_id) {
+            toastr.warning("Invoice Id not found!", "WARNING");
+            return false;
+        }
+
+        let url = '<?= base_url('payout/fetchUtrDetails') ?>';
+
+        // Data to send in the AJAX request
+        let requestData = {
+            invoice_id: invoice_id,
+        };
+
+        $('.loader').fadeIn();
+        $('.loader-mask').fadeIn();
+        // Send AJAX request
+        sendAjaxRequestForGlobal(url, 'POST', requestData, function(response) {
+
+            console.log('Data fetched successfully:', response);
+
+            $('#modal_body').empty();
+            $('#modal_body').append(response.data);
+
+            if (response.status == false) {
+                toastr.warning(response.message || 'Unable to fetch data', 'WARNING');
+            }
+
+            $('.loader').fadeOut();
+            $('.loader-mask').delay(350).fadeOut('slow');
+
+        }, function(xhr, status, error) {
+            $('.loader').fadeOut();
+            $('.loader-mask').delay(350).fadeOut('slow');
+            console.error('Error fetching data:', error);
+            console.error(xhr.responseText);
+            toastr.error('An error occurred while fetching the data.', 'ERROR');
+        });
+    }
+
+    function saveUtrDetails(invoice_id)
+    {
+        let invoice_id = $('#agent_id').val();
+        if (!invoice_id) {
+            toastr.warning("Invoice Id not found!", "WARNING");
+            return false;
+        }
+
+        let url = '<?= base_url('payout/fetchUtrDetails') ?>';
+
+        // Data to send in the AJAX request
+        let requestData = {
+            invoice_id: invoice_id,
+        };
+
+        $('.loader').fadeIn();
+        $('.loader-mask').fadeIn();
+        // Send AJAX request
+        sendAjaxRequestForGlobal(url, 'POST', requestData, function(response) {
+
+            console.log('Data fetched successfully:', response);
+
+            $('#payout_list').empty();
+            $('#payout_list').append(response.data);
+
+            if (response.status == false) {
+                toastr.warning(response.message || 'Unable to fetch data', 'WARNING');
+            }
+
+            $('.loader').fadeOut();
+            $('.loader-mask').delay(350).fadeOut('slow');
+
+        }, function(xhr, status, error) {
+            $('.loader').fadeOut();
+            $('.loader-mask').delay(350).fadeOut('slow');
+            console.error('Error fetching data:', error);
+            console.error(xhr.responseText);
+            toastr.error('An error occurred while fetching the data.', 'ERROR');
+        });
+    }
+
+</script>
\ No newline at end of file
diff --git a/app/Views/payout_list_handler.php b/app/Views/payout_list_handler.php
new file mode 100644
index 00000000..1857baea
--- /dev/null
+++ b/app/Views/payout_list_handler.php
@@ -0,0 +1,308 @@
+<div class="container-fluid-min">
+    <div class="col-12" id="bds_filter">
+        <div class="card-body">
+            <div id="accordion" class="mb-3">
+                <div class="card mb-1">
+                    <h4 class="m-1">
+                        <span>Filter</span>
+                        <a id="toggleIcon" class="text-dark float-right" data-toggle="collapse" href="#collapseOne"
+                            aria-expanded="true">
+                            <i id="icon" class="mdi mdi-chevron-down mr-1 text-primary" style="font-size: 28px;"></i>
+                        </a>
+                    </h4>
+                    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
+                        <div class="card-body">
+                            <div class="form-group">
+                                <div class="form-row">
+                                    <div class="form-group col-md-3">
+                                        <label for="client_branch">Agents<span class="text-danger"></span></label>
+                                        <select class="form-control" id="agent_id" name="agent_id">
+                                            <option value="">Select Agent</option>
+                                                <?php if (isset($agent_list) && !empty($agent_list)) : ?>
+                                                    <?php foreach ($agent_list as $agent) : ?>
+                                                        <option value="<?= $agent['id']; ?>"><?= $agent['name']; ?></option>
+                                                    <?php endforeach; ?>
+                                                <?php endif; ?>
+                                        </select>
+                                    </div>
+
+                                    <div class="form-group col-md-3">
+                                        <label for="client_branch_id">Status<span class="text-danger"></span></label>
+                                        <select class="form-control" id="status_id" name="status_id">
+                                            <option value="">Select status</option>
+                                            <?php if (isset($payout_status) && !empty($payout_status)) : ?>
+                                                <?php foreach ($payout_status as $id => $status) : ?>
+                                                    <option value="<?= $id; ?>"><?= $status; ?></option>
+                                                <?php endforeach; ?>
+                                            <?php endif; ?>
+                                        </select>
+                                    </div>
+
+                                    <div class="form-group col-md-3" style="display: true;" id="date_div">
+                                        <label>Date<span class="text-danger"></span></label>
+                                        <div class="input-icon">
+                                            <input type="text" id="reportrange" class="form-control" readonly style="caret-color: transparent;">
+                                            <i class="mdi mdi-calendar-blank-outline additional-icon"></i>
+                                        </div>
+                                        <input type="hidden" id="startDate">
+                                        <input type="hidden" id="endDate">
+                                    </div>
+
+                                    <div class="form-group col-md-12 text-right m-b-0" style="margin-top: 29px;">
+                                        <a class="btn btn-secondary" id="clear-filters">Clear</a>
+                                        <a class="btn btn-primary" id="get-emp-list" onclick="fetchPayoutList(this);">Submit</a>
+                                    </div>
+
+                                </div>
+
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- end page title -->
+    <div id="payout_list">
+        <?php if(isset($payout_list) && !empty($payout_list)) { echo $payout_list; }else{  } ?>
+    </div>
+</div>
+
+<script>
+
+    $(document).ready(function(){
+        $('#agent_id').select2();
+        $('#startDate').val('');
+        $('#endDate').val('');
+        $('#reportrange').val('');
+    })
+
+    $(function() {
+
+        const url = new URL(window.location.href);
+        const params = new URLSearchParams(url.search);
+
+        // Get start and end dates from URL parameters, or use default values
+        const startDateParam = params.get('start_date') || moment().subtract(60, 'days').format('DD-MM-YYYY');
+        const endDateParam = params.get('end_date') || moment().format('DD-MM-YYYY');
+
+        // Parse the dates to moment objects
+        var start = moment(startDateParam, 'DD-MM-YYYY');
+        var end = moment(endDateParam, 'DD-MM-YYYY');
+
+        function cb(start, end) {
+            $('#reportrange').val(start.format('D-MM-YYYY') + ' - ' + end.format('D-MM-YYYY'));
+            $('#startDate').val(start.format('DD-MM-YYYY'));
+            $('#endDate').val(end.format('DD-MM-YYYY'));
+        }
+
+        $('#reportrange').daterangepicker({
+            startDate: start,
+            endDate: end,
+            locale: {
+                format: 'DD-MM-YYYY'
+            },
+            ranges: {
+                'Today': [moment(), moment()],
+                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
+                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
+                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
+                'This Month': [moment().startOf('month'), moment().endOf('month')],
+                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
+            },
+            autoUpdateInput: false
+        }, cb);
+
+        // Only update inputs when user selects a date range
+        $('#reportrange').on('apply.daterangepicker', function(ev, picker) {
+            cb(picker.startDate, picker.endDate);
+        });
+
+        $('#clear-filters').on('click', function() {
+            // Reset all select dropdowns to the first option
+            $('#agent_id').val('').change();
+            $('#status_id').val('').change();
+
+            // Clear the date range inputs
+            $('#reportrange').val('');
+            $('#startDate').val('');
+            $('#endDate').val('');
+        });
+
+    });
+
+    function fetchPayoutList()
+    {
+        let agent_id = $('#agent_id').val();
+        let status_id = $('#status_id').val();
+        let start_date = $('#startDate').val();
+        let end_date = $('#endDate').val();
+
+        if (!agent_id && !status_id && !start_date && !end_date) {
+            toastr.warning("Please select any one filter!", "WARNING");
+            return false;
+        }
+
+        let url = '<?= base_url('payout/list') ?>';
+
+        // Data to send in the AJAX request
+        let requestData = {
+            agent_id: agent_id,
+            status_id: status_id,
+            start_date: start_date,
+            end_date: end_date,
+        };
+
+        $('.loader').fadeIn();
+        $('.loader-mask').fadeIn();
+        // Send AJAX request
+        sendAjaxRequestForGlobal(url, 'POST', requestData, function(response) {
+
+            console.log('Data fetched successfully:', response);
+
+            $('#payout_list').empty();
+            $('#payout_list').append(response.data);
+
+            if (response.status == false) {
+                toastr.warning(response.message || 'Unable to fetch data', 'WARNING');
+            }
+
+            $('.loader').fadeOut();
+            $('.loader-mask').delay(350).fadeOut('slow');
+
+        }, function(xhr, status, error) {
+            $('.loader').fadeOut();
+            $('.loader-mask').delay(350).fadeOut('slow');
+            $('#payout_list').empty();
+            $('#payout_list').append(response.data);
+            console.error('Error fetching data:', error);
+            console.error(xhr.responseText);
+            toastr.error('An error occurred while fetching the data.', 'ERROR');
+        });
+    }
+
+    function showUtrModal(){
+        var myModal = new bootstrap.Modal(document.getElementById('payout_modal'));
+        myModal.show();
+    }
+
+    function updateUTRSummary() {
+        
+        const totalUTR = currentInvoice.utrs.reduce((sum, utr) => sum + utr.amount, 0);
+        const remaining = currentInvoice.currentAmount - totalUTR;
+
+        document.getElementById('utrInvoiceAmount').textContent = '₹' + currentInvoice.currentAmount.toFixed(2);
+        document.getElementById('utrTotalPaid').textContent = '₹' + totalUTR.toFixed(2);
+        document.getElementById('utrRemaining').textContent = '₹' + remaining.toFixed(2);
+        document.getElementById('maxUtrAmount').textContent = '₹' + remaining.toFixed(2);
+
+        // Color code remaining amount
+        const remainingSpan = document.getElementById('utrRemaining');
+        if (remaining === 0) {
+            remainingSpan.style.color = '#4CAF50';
+        } else if (remaining < 0) {
+            remainingSpan.style.color = '#f44336';
+        } else {
+            remainingSpan.style.color = '#ff9800';
+        }
+    }
+
+    function renderUTRList() {
+        const list = document.getElementById('utrList');
+        
+        if (currentInvoice.utrs.length === 0) {
+            list.innerHTML = '<div class="no-data">No UTR records found</div>';
+            return;
+        }
+
+        let html = '<h3 style="margin-bottom: 15px;">Existing UTRs</h3>';
+        currentInvoice.utrs.forEach((utr, idx) => {
+            html += `
+                <div class="utr-item">
+                    <div class="utr-info">
+                        <div class="utr-number">${idx + 1}. ${utr.utrNo}</div>
+                        <div class="utr-date">${utr.date}</div>
+                    </div>
+                    <div class="utr-amount">₹${utr.amount.toFixed(2)}</div>
+                    <button class="delete-btn" onclick="deleteUTR(${idx})" title="Delete">×</button>
+                </div>
+            `;
+        });
+
+        list.innerHTML = html;
+    }
+
+    function addUTR() {
+        const utrNo = document.getElementById('utrNumber').value.trim();
+        const amount = parseFloat(document.getElementById('utrAmount').value);
+        const date = document.getElementById('utrDate').value;
+
+        if (!utrNo || !amount || !date) {
+            alert('Please fill in all fields');
+            return;
+        }
+
+        if (amount <= 0) {
+            alert('Amount must be greater than 0');
+            return;
+        }
+
+        const totalUTR = currentInvoice.utrs.reduce((sum, utr) => sum + utr.amount, 0);
+        const remaining = currentInvoice.currentAmount - totalUTR;
+
+        if (amount > remaining) {
+            alert(`Amount exceeds remaining balance. Maximum allowed: ₹${remaining.toFixed(2)}`);
+            return;
+        }
+
+        // Add to current invoice
+        currentInvoice.utrs.push({
+            utrNo: utrNo,
+            amount: amount,
+            date: date
+        });
+
+        // Check if invoice is fully paid
+        const newTotalUTR = currentInvoice.utrs.reduce((sum, utr) => sum + utr.amount, 0);
+        if (newTotalUTR >= currentInvoice.currentAmount) {
+            currentInvoice.status = 'completed';
+        }
+
+        // Clear form
+        document.getElementById('utrNumber').value = '';
+        document.getElementById('utrAmount').value = '';
+        
+        // Refresh displays
+        updateUTRSummary();
+        renderUTRList();
+        renderInvoices();
+        
+        alert('UTR added successfully!');
+    }
+
+    function deleteUTR(index) {
+        if (!confirm('Are you sure you want to delete this UTR?')) {
+            return;
+        }
+
+        currentInvoice.utrs.splice(index, 1);
+
+        // Update status
+        const totalUTR = currentInvoice.utrs.reduce((sum, utr) => sum + utr.amount, 0);
+        if (totalUTR >= currentInvoice.currentAmount) {
+            currentInvoice.status = 'completed';
+        } else {
+            currentInvoice.status = 'pending';
+        }
+
+        updateUTRSummary();
+        renderUTRList();
+        renderInvoices();
+    }
+
+    function closeModal(modalId) {
+        document.getElementById(modalId).classList.remove('active');
+        currentInvoice = null;
+    }
+
+</script>
\ No newline at end of file