diff --git a/system/plugin/ui/pppoe_monitor.tpl b/system/plugin/ui/pppoe_monitor.tpl
new file mode 100644
index 0000000..8ff8e73
--- /dev/null
+++ b/system/plugin/ui/pppoe_monitor.tpl
@@ -0,0 +1,943 @@
+{include file="sections/header.tpl"}
+
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
+<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
+<link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
+<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.dataTables.min.css">
+<script src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
+<script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
+
+<style>
+    .modal {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0, 0, 0, 0.4);
+    }
+    .modal-content {
+    background-color: #fefefe;
+    margin: 15% auto;
+    padding: 0px;
+    border: 1px solid #888;
+    width: 80%;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    max-width: 600px;
+    }
+    .close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+    cursor: pointer;
+    }
+    .close:hover,
+    .close:focus {
+    color: black;
+    text-decoration: none;
+    }
+    .card-body {
+    padding: 1rem;
+    }
+    .card-header {
+    padding: .75rem 1.25rem;
+    margin-bottom: 0;
+    background-color: none;
+    border-bottom: 1px solid rgba(0,0,0,.125);
+    }
+    .card-title {
+    margin-bottom: .75rem;
+    }
+    .form-group {
+    margin-bottom: 1rem;
+    }
+    .table-responsive {
+    display: block;
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+    }
+    .table {
+    width: 100%;
+    margin-bottom: 1rem;
+    color: #212529;
+    }
+    .container {
+        padding-top: 20px;
+    }
+    #ppp-table_wrapper {
+        padding: 15px;
+    }
+    #ppp-table th, #ppp-table td {
+        text-align: center;
+        padding: 6px;
+    }
+    .table-striped tbody tr:nth-of-type(odd) {
+        background-color: #f9f9f9;
+    }
+    .panel-default {
+        border-color: #ddd;
+    }
+    .panel-heading {
+        background-color: #f5f5f5;
+        border-color: #ddd;
+    }
+    .nav-tabs {
+        margin-bottom: 15px;
+    }
+    .nav-tabs > li > a {
+        border-radius: 0;
+        color: #555;
+        background-color: #f9f9f9;
+        border-color: #ddd;
+    }
+    .nav-tabs > li.active > a,
+    .nav-tabs > li.active > a:focus,
+    .nav-tabs > li.active > a:hover {
+        background-color: #fff;
+        color: #333;
+        border: 1px solid #ddd;
+        border-bottom-color: transparent;
+        cursor: default;
+    }
+    .table-striped tbody tr:nth-of-type(odd) {
+        background-color: #f9f9f9;
+    }
+    .table th {
+        background-color: #f5f5f5;
+        color: #333;
+        font-weight: bold;
+        padding: 8px;
+    }
+    .table-striped > tbody > tr > td {
+        background-color: #fff;
+    }
+    .status-connect {
+        color: #5cb85c;
+    }
+    .status-disconnect {
+        color: #d9534f;
+    }
+      .modalsupport {
+      display: none;
+      position: fixed;
+      z-index: 1;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+      background-color: rgb(0,0,0);
+      background-color: rgba(0,0,0,0.4);
+      justify-content: center;
+      align-items: center;
+    }
+    .modalsupport-content {
+      background-color: #fefefe;
+      margin: auto;
+      padding: 0px;
+      border: 1px solid #888;
+      width: 80%;
+      max-width: 500px;
+      box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+      text-align: center;
+    }
+    .modalsupport-close {
+      color: #aaa;
+      float: right;
+      font-size: 28px;
+      font-weight: bold;
+    }
+    .modalsupport-close:hover,
+    .modalsupport-close:focus {
+      color: black;
+      text-decoration: none;
+      cursor: pointer;
+    }
+    .card {
+      border: none;
+    }
+    .card-header {
+      background-color: none;
+      border-bottom: none;
+    }
+    .card-body {
+      padding: 20px;
+    }
+    .donate-button {
+      margin-top: 10px;
+    }
+    .modalsupport img {
+      width: 100px;
+      height: auto;
+      margin-top: 15px;
+    }
+    .dataSize {
+        white-space: nowrap;
+    }
+    .action-icons i {
+      cursor: pointer;
+      margin-right: 10px;
+      color: #007bff;
+    }
+    .action-icons i:hover {
+      color: #0056b3;
+    }
+    .modal-title {
+    text-align: center;
+    width: 100%;
+    display: block;
+    font-size: 20px;
+    font-weight: bold;
+    margin-top: 20px;
+  }
+  .table-bordered {
+      width: 100%;
+      max-width: 100%;
+      table-layout: fixed;
+  }
+  .table-bordered th, .table-bordered td {
+      width: auto;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      background: none;
+      border: none;
+      padding: 5px;
+      vertical-align: middle;
+      text-align: center;
+  }
+  .advanced-search-container {
+    margin-bottom: 20px;
+    padding: 15px;
+    background-color: #f9f9f9;
+    border: 1px solid #ddd;
+    }
+    .form-inline .form-group {
+        margin-right: 10px;
+    }
+    .dataTables_filter {
+        display: none;
+    }
+    @media (max-width: 768px) {
+        .panel-default {
+            padding: 10px;
+            margin: 0;
+        }
+        .panel-heading {
+            padding: 5px 15px;
+        }
+        .panel-body {
+            padding: 5px 10px;
+        }
+    .table th, .table td {
+        font-size: 15px; /* Mengurangi ukuran font pada tabel */
+        }
+    }
+    .traffic-icon {
+        display: inline-block;
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        margin-right: 5px;
+        vertical-align: middle;
+    }
+    .traffic-icon-green {
+        background-color: green;
+    }
+    .traffic-icon-yellow {
+        background-color: yellow;
+    }
+    .traffic-icon-red {
+        background-color: red;
+    }
+    .text-left {
+    text-align: left !important;
+    }
+</style>
+<div class="container">
+    <div class="row">
+        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
+            <!-- Form dan navigasi tabs -->
+            <form class="form-horizontal" method="post" role="form" action="{$_url}plugin/pppoe">
+                <div class="form-group">
+                    <label for="routerSelect" class="col-sm-2 control-label">Select Router</label>
+                    <div class="col-sm-10">
+                        <select id="routerSelect" name="router" class="form-control" onchange="window.location.href=this.value;">
+                            {foreach $routers as $r}
+                            <option value="{$_url}plugin/pppoe/{$r['id']}" {if $r['id'] == $router}selected{/if}>
+                                {$r['name']}
+                            </option>
+                            {/foreach}
+                        </select>
+                    </div>
+                </div>
+            </form>
+            <div class="advanced-search-container">
+                <form id="advancedSearchForm" class="form-inline">
+                    <div class="form-group">
+                        <label for="searchUsername">Username:</label>
+                        <input type="text" class="form-control" id="searchUsername" placeholder="Enter username">
+                    </div>
+                    <div class="form-group">
+                        <label for="searchStatus">Status:</label>
+                        <select class="form-control" id="searchStatus">
+                            <option value="">Any</option>
+                            <option value="Connected">Connected</option>
+                            <option value="Disconnected">Disconnected</option>
+                        </select>
+                    </div>
+                </form>
+            </div>
+            <div class="panel panel-default">
+                <div class="table-responsive">
+                    <div class="panel-body">
+                        <table class="table table-striped" id="ppp-table">
+                            <thead>
+                                <tr>
+                                    <th>ID</th>
+                                    <th>Username</th>
+                                    <th>IP Address</th>
+                                    <th>Uptime</th>
+                                    <th>Service</th>
+                                    <th>Caller ID</th>
+                                    <th>Device</th>
+                                    <th>Download</th>
+                                    <th>Upload</th>
+                                    <th>Total Usage</th>
+                                    <th>Status</th>
+                                    <th>Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <!-- Isi tabel akan dimasukkan melalui JavaScript -->
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div id="detailsModal" class="modal">
+  <div class="modal-content">
+    <span class="close">&times;</span>
+    <div class="container-fluid mt-5">
+      <div class="card">
+        <div class="card-header">
+          <h5 class="modal-title">Data Usage for <span id="modalUsername"></span></h5>
+        </div>
+        <div class="card-body">
+          <div class="table-responsive mt-4">
+            <table class="table table-bordered">
+              <thead>
+                <tr>
+                <input type="hidden" id="interface" value="">
+                  <th id="tabletx"><i class="fa fa-download"></i></th>
+                  <th id="tablerx"><i class="fa fa-upload"></i></th>
+                </tr>
+              </thead>
+            </table>
+          </div>
+          <div id="chart" class="mt-3"></div>
+          <div id="dailyChart" class="mt-3"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+var $j = jQuery.noConflict();
+
+$j(document).ready(function() {
+    var table = $j('#ppp-table').DataTable({
+        responsive: true,
+        columns: [
+            { data: 'id', visible: false },
+            {
+                data: 'username',
+                className: 'text-left',
+                render: function(data, type, row) {
+                    return '<div style="width: 150px;"><i class="traffic-icon traffic-icon-green"></i> ' + data + '</div>';
+                }
+            },
+            { data: 'address' },
+            { data: 'uptime' },
+            { data: 'service' },
+            { data: 'caller_id' },
+            { data: 'manufacturer' }, // New column for device/manufacturer
+            { data: 'tx', className: 'dataSize' },
+            { data: 'rx', className: 'dataSize' },
+            { data: 'total', className: 'dataSize' },
+            {
+                data: 'status',
+                render: function(data) {
+                    if (data === 'Connected') {
+                        return '<small class="label bg-green">Connected</small>';
+                    } else if (data === 'Disconnected') {
+                        return '<small class="label bg-red">Disconnected</small>';
+                    } else {
+                        return '';
+                    }
+                }
+            },
+            {
+                data: null,
+                render: function(data, type, row) {
+                    return '<div class="action-icons" style="display: flex; align-items: center;">' +
+                        '<i class="fa fa-area-chart view-details" style="color: blue; cursor: pointer;" title="View Traffic" data-username="' + row.username + '" data-id="' + row.id + '"></i> ' +
+                        '<i class="fa fa-retweet reconnect-button" style="color: red; cursor: pointer;" title="Reconnect" data-username="' + row.username + '" data-id="' + row.id + '"></i> ' +
+                        '<button class="btn btn-sm ' + (row.is_bound ? 'btn-danger' : 'btn-success') + ' bind-button" data-username="' + row.username + '" data-caller-id="' + row.caller_id + '" data-is-bound="' + row.is_bound + '">' +
+                        (row.is_bound ? 'Unbind' : 'Bind') + '</button>' +
+                        '</div>';
+                }
+            }
+        ],
+        order: [[0, 'asc']],
+        pageLength: 10,
+        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, 'All']],
+        dom: 'Bfrtip',
+        buttons: ['reset', 'pageLength'],
+        paging: true,
+        info: true,
+        searching: true,
+        ajax: {
+            url: '{$_url}plugin/pppoe_get_combined_users/{$router}',
+            dataSrc: ''
+        }
+    });
+
+    // Fungsi untuk mendapatkan batas maksimum
+    function getMaxLimit(data) {
+        if (data.hasOwnProperty('max_limit')) {
+            return data.max_limit.toString();
+        } else {
+            return 'N/A';
+        }
+    }
+    
+    // Handle view details icon clicks
+    $j('#ppp-table tbody').on('click', '.view-details', function(e) {
+        e.preventDefault();
+        var username = $j(this).data('username');
+        var id = $j(this).data('id');
+
+        viewDetails(id, username);
+    });
+
+    // Handle reconnect icon clicks
+    $j('#ppp-table tbody').on('click', '.reconnect-button', function(e) {
+        e.preventDefault();
+        var username = $j(this).data('username');
+        var id = $j(this).data('id');
+
+        reconnect(id, username);
+    });
+
+    // Function to handle view details
+    function viewDetails(id, username) {
+    console.log("Viewing details for:", username);
+    $j('#modalUsername').text(username);
+
+    $j.ajax({
+        url: '{$_url}plugin/pppoe_get_combined_users',
+        method: 'GET',
+        dataType: 'json',
+        success: function(response) {
+            var user = response.find(function(item) {
+                return (item.username && item.username.toString().toLowerCase() === username.toString().toLowerCase());
+            });
+
+            if (username !== null && user !== null && user.username !== null) {
+                var interfaceValue = '<pppoe-' + user.username + '>';
+                $j('#interface').val(interfaceValue);
+                $j('#selectedInterface').text(interfaceValue);
+                $j('#detailsModal').css('display', 'block');
+                createChart();
+                createDailyChart(username); // Pass the username to createDailyChart
+            } else {
+                alert('User not found.');
+            }
+        },
+        error: function(xhr, textStatus, errorThrown) {
+            alert('Failed to retrieve user data.');
+            console.error('AJAX error:', textStatus, errorThrown);
+        }
+    });
+    }
+
+
+
+// Function to handle reconnect
+function reconnect(id, username) {
+    if (confirm('Are you sure you want to disconnect user ' + username + '?')) {
+        $.ajax({
+            url: '{$_url}plugin/pppoe_monitor_router_delete_ppp_user/{$router}', // Perbaiki URL AJAX
+            method: 'POST',
+            data: { id: id, username: username },
+            success: function(response) {
+                if (response.success) {
+                    alert('User ' + username + ' has been disconnected.');
+                    setTimeout(function() {
+                        table.ajax.reload();
+                    }, 2000);
+                } else {
+                    alert('Failed to disconnect user ' + username + ': ' + (response.message || 'Unknown error'));
+                }
+            },
+            error: function(xhr, textStatus, errorThrown) {
+                alert('Failed to disconnect user ' + username + ': ' + (errorThrown || 'Unknown error'));
+                console.error('AJAX error:', textStatus, errorThrown);
+            }
+        });
+    }
+}
+
+
+    // Close modal on click of close button
+    $j('.close').click(function() {
+        $j('#detailsModal').css('display', 'none');
+    });
+
+    // Close modal on click outside the modal
+    $j(window).click(function(event) {
+        if (event.target == document.getElementById('detailsModal')) {
+            $j('#detailsModal').css('display', 'none');
+        }
+    });
+
+    // Handle advanced search form submission
+    $j(document).ready(function() {
+        $j('#advancedSearchForm').on('submit', function(e) {
+            e.preventDefault(); // Mencegah pengiriman form secara default
+
+            // Mendapatkan nilai dari input
+            var username = $j('#searchUsername').val();
+            var status = $j('#searchStatus').val();
+
+            // Melakukan pencarian dan menggambar ulang tabel
+            table.column(1).search(username).draw(); // Kolom 1 untuk username
+            table.column(9).search(status).draw(); // Kolom 9 untuk status
+        });
+
+        // Menambahkan ikon search ke dalam tombol
+        var searchButton = $j('<button type="submit" class="btn btn-primary"><i class="fas fa-search"></i></button>');
+        $j('#advancedSearchForm').append(searchButton);
+    });
+
+});
+
+var chart;
+var chartData = {
+    txData: [],
+    rxData: []
+};
+
+function createChart() {
+    var options = {
+        chart: {
+            height: 350,
+            type: 'area',
+            animations: {
+                enabled: true,
+                easing: 'linear',
+                speed: 200,
+                animateGradually: {
+                    enabled: true,
+                    delay: 150
+                },
+                dynamicAnimation: {
+                    enabled: true,
+                    speed: 200
+                }
+            },
+            events: {
+                mounted: function() {
+                    updateTrafficValues();
+                    setInterval(updateTrafficValues, 3000);
+                }
+            }
+        },
+        stroke: {
+            curve: 'smooth'
+        },
+        series: [
+            { name: 'Download', data: chartData.txData },
+            { name: 'Upload', data: chartData.rxData }
+        ],
+        xaxis: {
+            type: 'datetime',
+            labels: {
+                formatter: function(value) {
+                    return new Date(value).toLocaleTimeString();
+                }
+            }
+        },
+        yaxis: {
+            title: {
+                text: 'Real Time Data Usage'
+            },
+            labels: {
+                formatter: function(value) {
+                    return formatBytes(value);
+                }
+            }
+        },
+        tooltip: {
+            x: {
+                format: 'HH:mm:ss'
+            },
+            y: {
+                formatter: function(value) {
+                    return formatBytes(value) + 'ps';
+                }
+            }
+        },
+        dataLabels: {
+            enabled: false,
+            formatter: function(value) {
+                return formatBytes(value);
+            }
+        }
+    };
+
+    chart = new ApexCharts(document.querySelector("#chart"), options);
+    chart.render();
+}
+
+var dailyChart; // Declare dailyChart variable globally
+
+function createDailyChart(username) {
+    var currentDate = new Date();
+    var startOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1).getTime();
+    var endOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0).getTime();
+
+    generateDailyData(username)
+        .then(dailyData => {
+            var dailyTotals = dailyData.download.map((item, index) => ({
+                x: item.x,
+                y: item.y + dailyData.upload[index].y
+            }));
+
+            if (dailyChart) {
+                dailyChart.destroy();
+            }
+
+            var options = {
+                chart: {
+                    height: 350,
+                    type: 'bar',
+                    animations: {
+                        enabled: true,
+                        easing: 'linear',
+                        speed: 800,
+                        animateGradually: {
+                            enabled: true,
+                            delay: 150
+                        },
+                        dynamicAnimation: {
+                            enabled: true,
+                            speed: 200
+                        }
+                    },
+                    toolbar: {
+                        show: true,
+                    }
+                },
+                plotOptions: {
+                    bar: {
+                        horizontal: false,
+                        columnWidth: '15%',
+                        endingShape: 'rounded'
+                    },
+                },
+                dataLabels: {
+                    enabled: false
+                },
+                stroke: {
+                    show: true,
+                    width: 2,
+                    colors: ['transparent']
+                },
+                series: [{
+                    name: 'Download',
+                    data: dailyData.upload
+                }, {
+                    name: 'Upload',
+                    data: dailyData.download
+                }, {
+                    name: 'Daily Totals',
+                    data: dailyTotals
+                }],
+                xaxis: {
+                    type: 'datetime',
+                    min: startOfMonth,
+                    max: endOfMonth,
+                    labels: {
+                        formatter: function(value) {
+                            return new Date(value).toLocaleDateString();
+                        }
+                    }
+                },
+                yaxis: {
+                    title: {
+                        text: 'Total Usage'
+                    },
+                    labels: {
+                        formatter: function(value) {
+                            return formatBytesPerSecond(value);
+                        }
+                    }
+                },
+                fill: {
+                    opacity: 1
+                },
+                tooltip: {
+                    y: {
+                        formatter: function(val) {
+                            return formatBytes(val);
+                        }
+                    }
+                },
+                responsive: [
+                    {
+                        breakpoint: 480,
+                        options: {
+                            plotOptions: {
+                                bar: {
+                                    columnWidth: '100%'
+                                }
+                            }
+                        }
+                    }
+                ]
+            };
+
+            dailyChart = new ApexCharts(document.querySelector("#dailyChart"), options);
+            dailyChart.render();
+        })
+        .catch(error => {
+            console.error("Failed to fetch daily usage data:", error);
+        });
+}
+
+// ========================================== NEW FITUR ==========================================//
+function generateDailyData(username, startDate, endDate) {
+    return new Promise((resolve, reject) => {
+        $j.ajax({
+            url: '{$_url}plugin/pppoe_monitor_router_daily_data_usage/{$router}',
+            data: {
+                username: username,
+                start_date: startDate,
+                end_date: endDate
+            },
+            dataType: 'json',
+            success: function(data) {
+                console.log("Raw data from server for username", username, ":", data);
+
+                var dailyData = {
+                    download: [],
+                    upload: []
+                };
+                
+                // Iterate over dates in data and find the correct user data
+                for (var date in data) {
+                    var users = data[date].users;
+                    
+                    // Handle username as number case
+                    var userData = users.find(user => user.username === username || user.username == parseInt(username));
+                    
+                    if (userData) {
+                        var rxBytes = convertToBytes(userData.rx);
+                        var txBytes = convertToBytes(userData.tx);
+                        
+                        // Store data in dailyData based on date
+                        dailyData.download.push({ x: new Date(date).getTime(), y: rxBytes });
+                        dailyData.upload.push({ x: new Date(date).getTime(), y: txBytes });
+                    }
+                }
+
+                console.log("Filtered daily data for username", username, ":", dailyData);
+                resolve(dailyData);
+            },
+            error: function(xhr, textStatus, errorThrown) {
+                console.error("AJAX Error in generateDailyData:", textStatus, errorThrown);
+                console.log("Status:", xhr.status);
+                console.log("Response Text:", xhr.responseText);
+                reject(errorThrown);
+            }
+        });
+    });
+}
+
+function convertToBytes(value) {
+    let [number, unit] = value.split(' ');
+    number = parseFloat(number);
+    switch (unit) {
+        case 'GB':
+            return number * 1024 * 1024 * 1024;
+        case 'MB':
+            return number * 1024 * 1024;
+        case 'KB':
+            return number * 1024;
+        default:
+            return number;
+    }
+}
+// ========================================== NEW FITUR ==========================================//
+function formatBytesPerSecond(bytes) {
+    if (bytes === 0) {
+        return '0 Bps';
+    }
+    var k = 1024;
+    var sizes = ['Bps', 'KBps', 'MBps', 'GBps', 'TBps', 'PBps', 'EBps', 'ZBps', 'YBps'];
+    var i = Math.floor(Math.log(bytes) / Math.log(k));
+    var formattedValue = parseFloat((bytes / Math.pow(k, i)).toFixed(2));
+    return formattedValue + ' ' + sizes[i];
+}
+
+// Fungsi untuk mengubah ukuran dalam byte menjadi format yang lebih mudah dibaca
+function formatBytes(bytes, decimals = 2) {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const dm = decimals < 0 ? 0 : decimals;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+}
+
+// Function to update traffic values and icons
+function updateTrafficValues() {
+    var username = $j('#modalUsername').text().trim();
+    var interfaceValue = $j('#interface').val();
+
+    if (!username || !interfaceValue) {
+        console.error("Username or interface is undefined or empty.");
+        return;
+    }
+
+    $j.ajax({
+        url: '{$_url}plugin/pppoe_monitor_router_traffic/{$router}',
+        dataType: 'json',
+        data: { username: username, interface: interfaceValue },
+        success: function(data) {
+            var timestamp = new Date().getTime();
+            var txData = parseInt(data.rows.tx[0]) || 0;
+            var rxData = parseInt(data.rows.rx[0]) || 0;
+
+            // Log data tx dan rx untuk debugging
+            console.log('txData:', txData, 'rxData:', rxData);
+
+            // Update chart data
+            chartData.txData.push({ x: timestamp, y: txData });
+            chartData.rxData.push({ x: timestamp, y: rxData });
+
+            var maxDataPoints = 10;
+            if (chartData.txData.length > maxDataPoints) {
+                chartData.txData.shift();
+                chartData.rxData.shift();
+            }
+
+            // Update series on the chart
+            chart.updateSeries([
+                { name: 'Download', data: chartData.txData },
+                { name: 'Upload', data: chartData.rxData }
+            ]);
+
+            // Find the icon element for the specific user based on username
+            var userRow = $j('#ppp-table tbody tr').filter(function() {
+                return $j(this).find('td').eq(1).text().trim() === username;
+            });
+
+            var iconElement = userRow.find('.traffic-icon');
+
+            // Define thresholds for traffic levels
+            var thresholdHigh = 2000; // Adjust these values as needed
+            var thresholdMedium = 1500; // Adjust these values as needed
+
+            // Adjust icon color based on traffic levels
+            if (txData > thresholdHigh || rxData > thresholdHigh) {
+                iconElement.removeClass('traffic-icon-green traffic-icon-yellow').addClass('traffic-icon-red');
+            } else if (txData > thresholdMedium || rxData > thresholdMedium) {
+                iconElement.removeClass('traffic-icon-green traffic-icon-red').addClass('traffic-icon-yellow');
+            } else {
+                iconElement.removeClass('traffic-icon-yellow traffic-icon-red').addClass('traffic-icon-green');
+            }
+        },
+        error: function(xhr, textStatus, errorThrown) {
+            console.error("Status: " + textStatus);
+            console.error("Error: " + errorThrown);
+        }
+    });
+}
+
+
+
+// Function to update traffic icons based on table data
+function updateTrafficIcons(response) {
+    $j('#ppp-table tbody tr').each(function(index) {
+        var row = table.row(this).data();
+        if (row) {
+            var txValue = parseInt(row.tx, 10);
+            var rxValue = parseInt(row.rx, 10);
+            var iconElement = $j(this).find('.traffic-icon');
+
+            var maxLimit = row.max_limit;
+            if (maxLimit === '1M/2M') {
+                if (txValue >= 2 * 1024 * 1024 || rxValue >= 2 * 1024 * 1024) {
+                    iconElement.removeClass().addClass('traffic-icon traffic-icon-red');
+                } else if (txValue >= 1.5 * 1024 * 1024 || rxValue >= 1.5 * 1024 * 1024) {
+                    iconElement.removeClass().addClass('traffic-icon traffic-icon-yellow');
+                } else {
+                    iconElement.removeClass().addClass('traffic-icon traffic-icon-green');
+                }
+            } else {
+                // Default logic for other max limits
+                if (txValue >= 2 * 1024 * 1024 || rxValue >= 2 * 1024 * 1024) {
+                    iconElement.removeClass().addClass('traffic-icon traffic-icon-red');
+                } else if (txValue >= 1.5 * 1024 * 1024 || rxValue >= 1.5 * 1024 * 1024) {
+                    iconElement.removeClass().addClass('traffic-icon traffic-icon-yellow');
+                } else {
+                    iconElement.removeClass().addClass('traffic-icon traffic-icon-green');
+                }
+            }
+        }
+    });
+}
+
+
+// Donation Popup
+document.addEventListener('DOMContentLoaded', function() {
+    setTimeout(function() {
+        document.getElementById('donationPopup').style.display = 'flex';
+    }, 1000);
+});
+
+document.getElementById('donationPopup').querySelector('.modalsupport-close').addEventListener('click', function() {
+    document.getElementById('donationPopup').style.display = 'none';
+});
+
+window.addEventListener('click', function(event) {
+    if (event.target === document.getElementById('donationPopup')) {
+        document.getElementById('donationPopup').style.display = 'none';
+    }
+});
+
+document.getElementById('donationPopup').querySelector('.donate-button').addEventListener('click', function() {
+    window.open('https://buymeacoffee.com/kevindonisaputra', '_blank');
+});
+
+</script>
+
+
+
+{include file="sections/footer.tpl"}