Update index.html

index.html

@@ -6,7 +6,8 @@
     <title>Network Device Monitoring with Loan System</title>
     <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <!-- Chart.js is not used in this implementation to keep it simple, but the script tag is here if you wish to extend it -->
+    <!-- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> -->
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
         
@@ -40,33 +41,35 @@
             padding: 4px 12px;
             border-radius: 20px;
             font-size: 12px;
-            font-weight: 500;
+            font-weight: 600;
             display: inline-block;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
         }
         
         .active-badge {
-            background-color: #e6f4ea;
-            color: #0f9d58;
+            background-color: #ecfdf5;
+            color: #065f46;
         }
         
         .blocked-badge {
-            background-color: #fce8e6;
-            color: #d93025;
+            background-color: #fef2f2;
+            color: #991b1b;
         }
         
         .paid-badge {
-            background-color: #e6f4ea;
-            color: #0f9d58;
+            background-color: #ecfdf5;
+            color: #065f46;
         }
         
         .partial-badge {
-            background-color: #fef3c7;
-            color: #b45309;
+            background-color: #fffbeb;
+            color: #92400e;
         }
         
         .unpaid-badge {
-            background-color: #fce8e6;
-            color: #d93025;
+            background-color: #fef2f2;
+            color: #991b1b;
         }
         
         .form-input {
@@ -75,12 +78,14 @@
             padding: 12px 16px;
             transition: all 0.3s;
             width: 100%;
+            background-color: #f8fafc;
         }
         
         .form-input:focus {
             border-color: var(--primary);
             box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
             outline: none;
+            background-color: white;
         }
         
         .toast {
@@ -103,22 +108,15 @@
             opacity: 1;
         }
         
-        .toast.success {
-            background: var(--success);
-        }
-        
-        .toast.error {
-            background: var(--danger);
-        }
-        
-        .toast.info {
-            background: var(--info);
-        }
+        .toast.success { background: var(--success); }
+        .toast.error { background: var(--danger); }
+        .toast.info { background: var(--info); }
+        .toast.warning { background: var(--warning); }
         
         .btn {
             border-radius: 10px;
             padding: 12px 24px;
-            font-weight: 500;
+            font-weight: 600;
             transition: all 0.3s;
             border: none;
             cursor: pointer;
@@ -138,20 +136,9 @@
             box-shadow: 0 10px 20px rgba(79, 70, 229, 0.3);
         }
         
-        .btn-success {
-            background: var(--success);
-            color: white;
-        }
-        
-        .btn-warning {
-            background: var(--warning);
-            color: white;
-        }
-        
-        .btn-danger {
-            background: var(--danger);
-            color: white;
-        }
+        .btn-success { background: var(--success); color: white; }
+        .btn-warning { background: var(--warning); color: white; }
+        .btn-danger { background: var(--danger); color: white; }
         
         .action-btn {
             width: 36px;
@@ -162,40 +149,26 @@
             justify-content: center;
             cursor: pointer;
             transition: all 0.2s;
-            color: #4b5563;
+            color: #64748b;
             background: #f1f5f9;
         }
         
         .action-btn:hover {
             transform: scale(1.1);
-            color: var(--primary);
-        }
-        
-        .edit-btn:hover {
-            background-color: #eef2ff;
-        }
-        
-        .payment-btn:hover {
-            background-color: #ecfdf5;
-            color: var(--success);
-        }
-        
-        .block-btn:hover {
-            background-color: #fef2f2;
-            color: var(--danger);
         }
         
-        .delete-btn:hover {
-            background-color: #fef2f2;
-            color: var(--danger);
-        }
+        .payment-btn:hover { background-color: #ecfdf5; color: var(--success); }
+        .block-btn.active-device:hover { background-color: #fef2f2; color: var(--danger); }
+        .block-btn.blocked-device:hover { background-color: #ecfdf5; color: var(--success); }
+        .delete-btn:hover { background-color: #fee2e2; color: var(--danger); }
         
         .mac-address {
             font-family: 'Courier New', monospace;
-            background: #f8fafc;
+            background: #f1f5f9;
             padding: 4px 8px;
             border-radius: 6px;
-            font-weight: 500;
+            font-weight: 600;
+            color: #475569;
         }
         
         .progress-bar {
@@ -217,7 +190,8 @@
             left: 0;
             right: 0;
             bottom: 0;
-            background: rgba(0, 0, 0, 0.6);
+            background: rgba(15, 23, 42, 0.6);
+            backdrop-filter: blur(4px);
             display: flex;
             align-items: center;
             justify-content: center;
@@ -239,19 +213,20 @@
             max-width: 500px;
             max-height: 90vh;
             overflow-y: auto;
-            transform: translateY(20px);
+            transform: translateY(20px) scale(0.95);
             opacity: 0;
-            transition: all 0.3s;
+            transition: all 0.3s ease-out;
         }
         
         .modal-overlay.active .modal-content {
-            transform: translateY(0);
+            transform: translateY(0) scale(1);
             opacity: 1;
         }
         
         .payment-item {
             display: flex;
             justify-content: space-between;
+            align-items: center;
             padding: 12px 0;
             border-bottom: 1px solid #e2e8f0;
         }
@@ -259,36 +234,11 @@
         .payment-item:last-child {
             border-bottom: none;
         }
-        
-        .tab-button {
-            padding: 10px 20px;
-            border-radius: 8px;
-            cursor: pointer;
-            transition: all 0.3s;
-            font-weight: 500;
-        }
-        
-        .tab-button.active {
-            background: var(--primary);
-            color: white;
-        }
-        
-        .amount-display {
-            font-size: 1.25rem;
-            font-weight: 700;
-        }
-        
-        .payment-status {
-            padding: 4px 10px;
-            border-radius: 20px;
-            font-size: 12px;
-            font-weight: 500;
-        }
     </style>
 </head>
 <body class="min-h-screen py-8 px-4">
     <!-- Toast Container -->
-    <div id="toast-container"></div>
+    <div id="toast-container" class="fixed bottom-0 right-0 p-8 space-y-3 z-50"></div>
     
     <!-- Payment Modal -->
     <div class="modal-overlay" id="payment-modal">
@@ -296,45 +246,45 @@
             <div class="p-6">
                 <div class="flex justify-between items-center mb-4">
                     <h3 class="text-xl font-bold text-gray-800">Payment Management</h3>
-                    <button class="action-btn close-payment-modal">
+                    <button class="action-btn close-payment-modal" title="Close">
                         <i class="fas fa-times"></i>
                     </button>
                 </div>
                 
-                <div class="mb-6">
+                <div class="bg-gray-50 rounded-lg p-4 mb-6">
                     <h4 class="font-medium text-gray-700 mb-2">Device Information</h4>
-                    <div class="grid grid-cols-2 gap-4 mb-4">
+                    <div class="grid grid-cols-2 gap-x-4 gap-y-2">
                         <div>
                             <p class="text-gray-500 text-sm">MAC Address</p>
-                            <p id="payment-mac" class="font-medium">-</p>
+                            <p id="payment-mac" class="font-medium text-gray-800">-</p>
                         </div>
                         <div>
                             <p class="text-gray-500 text-sm">Device Name</p>
-                            <p id="payment-device" class="font-medium">-</p>
+                            <p id="payment-device" class="font-medium text-gray-800">-</p>
                         </div>
                         <div>
                             <p class="text-gray-500 text-sm">User Name</p>
-                            <p id="payment-user" class="font-medium">-</p>
+                            <p id="payment-user" class="font-medium text-gray-800">-</p>
                         </div>
                         <div>
                             <p class="text-gray-500 text-sm">Status</p>
-                            <p id="payment-status" class="font-medium">-</p>
+                            <div id="payment-status-badge"></div>
                         </div>
                     </div>
                 </div>
                 
-                <div class="grid grid-cols-3 gap-4 mb-6">
-                    <div class="bg-gray-50 p-4 rounded-lg">
-                        <p class="text-gray-500 text-sm">Total Amount</p>
-                        <p id="payment-total" class="amount-display">₹0</p>
+                <div class="grid grid-cols-3 gap-4 mb-6 text-center">
+                    <div class="bg-indigo-50 p-4 rounded-lg">
+                        <p class="text-indigo-500 text-sm">Total Loan</p>
+                        <p id="payment-total" class="text-xl font-bold text-indigo-700">₹0</p>
                     </div>
                     <div class="bg-green-50 p-4 rounded-lg">
-                        <p class="text-green-500 text-sm">Paid Amount</p>
-                        <p id="payment-paid" class="amount-display text-green-600">₹0</p>
+                        <p class="text-green-500 text-sm">Amount Paid</p>
+                        <p id="payment-paid" class="text-xl font-bold text-green-700">₹0</p>
                     </div>
-                    <div class="bg-blue-50 p-4 rounded-lg">
-                        <p class="text-blue-500 text-sm">Remaining</p>
-                        <p id="payment-remaining" class="amount-display text-blue-600">₹0</p>
+                    <div class="bg-red-50 p-4 rounded-lg">
+                        <p class="text-red-500 text-sm">Remaining</p>
+                        <p id="payment-remaining" class="text-xl font-bold text-red-700">₹0</p>
                     </div>
                 </div>
                 
@@ -343,24 +293,26 @@
                 </div>
                 
                 <div class="mb-6">
-                    <h4 class="font-medium text-gray-700 mb-4">Payment History</h4>
-                    <div id="payment-history" class="space-y-2">
-                        <!-- Payment history will be populated here -->
-                    </div>
-                    <div id="no-payments" class="py-4 text-center text-gray-500">
-                        <i class="fas fa-inbox text-3xl mb-2"></i>
-                        <p>No payment history found</p>
+                    <h4 class="font-medium text-gray-700 mb-2">Payment History</h4>
+                    <div id="payment-history-container" class="max-h-48 overflow-y-auto pr-2 bg-gray-50 rounded-lg p-3">
+                        <div id="payment-history" class="space-y-2">
+                            <!-- Payment history will be populated here -->
+                        </div>
+                        <div id="no-payments" class="py-4 text-center text-gray-500">
+                            <i class="fas fa-receipt text-3xl mb-2 text-gray-400"></i>
+                            <p>No payment history found</p>
+                        </div>
                     </div>
                 </div>
                 
                 <div>
-                    <h4 class="font-medium text-gray-700 mb-4">Add New Payment</h4>
-                    <div class="flex space-x-3">
-                        <input type="number" id="new-payment-amount" class="form-input flex-1" placeholder="Amount" min="1">
-                        <button id="add-payment-btn" class="btn btn-success">
+                    <h4 class="font-medium text-gray-700 mb-2">Add New Payment</h4>
+                    <form id="add-payment-form" class="flex space-x-3">
+                        <input type="number" id="new-payment-amount" class="form-input flex-1" placeholder="Amount" min="1" required>
+                        <button id="add-payment-btn" type="submit" class="btn btn-success">
                             <i class="fas fa-plus-circle mr-2"></i> Add
                         </button>
-                    </div>
+                    </form>
                 </div>
             </div>
         </div>
@@ -371,151 +323,141 @@
         <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
             <div>
                 <h1 class="text-3xl md:text-4xl font-bold text-gray-800">Network Device Monitor</h1>
-                <p class="text-gray-600 mt-2">Track, manage, and monitor all network devices</p>
+                <p class="text-gray-600 mt-2">Track, manage, and monitor all network devices with loan tracking.</p>
             </div>
             <div class="flex items-center space-x-4 mt-4 md:mt-0">
                 <div class="flex items-center bg-white rounded-xl shadow py-2 px-4">
                     <div class="bg-indigo-100 p-2 rounded-lg mr-3">
-                        <i class="fas fa-user text-indigo-600"></i>
+                        <i class="fas fa-user-shield text-indigo-600"></i>
                     </div>
                     <div>
                         <p class="text-sm font-medium text-gray-800">Admin User</p>
-                        <p class="text-xs text-gray-500">Network Admin</p>
+                        <p class="text-xs text-gray-500">Network Administrator</p>
                     </div>
                 </div>
             </div>
         </div>
         
-        <div class="flex flex-col lg:flex-row gap-8">
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
             <!-- Left Column - Form and Stats -->
-            <div class="lg:w-1/3">
+            <div class="lg:col-span-1 space-y-8">
                 <!-- Add Device Form -->
-                <div class="card p-6 mb-8">
-                    <h2 class="text-xl font-bold text-gray-800 mb-4">Register New Device</h2>
+                <div class="card p-6">
+                    <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center"><i class="fas fa-plus-circle mr-3 text-indigo-500"></i>Register New Device</h2>
                     <form id="device-form" class="space-y-4">
                         <div>
-                            <label class="block text-gray-700 mb-2 font-medium">MAC Address</label>
-                            <input type="text" id="mac-address" class="form-input" placeholder="Any format accepted">
-                            <p class="text-gray-500 text-sm mt-1">We'll automatically format your MAC address</p>
+                            <label for="mac-address" class="block text-gray-700 mb-1 font-medium text-sm">MAC Address</label>
+                            <input type="text" id="mac-address" class="form-input" placeholder="e.g. 00:1A:2B:3C:4D:5E" required>
+                            <p class="text-gray-500 text-xs mt-1">Any format is accepted, we'll standardize it for you.</p>
                         </div>
                         
                         <div>
-                            <label class="block text-gray-700 mb-2 font-medium">Device Name</label>
-                            <input type="text" id="device-name" class="form-input" placeholder="e.g. John's iPhone">
+                            <label for="device-name" class="block text-gray-700 mb-1 font-medium text-sm">Device Name</label>
+                            <input type="text" id="device-name" class="form-input" placeholder="e.g. John's iPhone" required>
                         </div>
                         
                         <div>
-                            <label class="block text-gray-700 mb-2 font-medium">User Name</label>
-                            <input type="text" id="user-name" class="form-input" placeholder="e.g. John Doe">
+                            <label for="user-name" class="block text-gray-700 mb-1 font-medium text-sm">User Name</label>
+                            <input type="text" id="user-name" class="form-input" placeholder="e.g. John Doe" required>
                         </div>
                         
                         <div class="grid grid-cols-2 gap-4">
                             <div>
-                                <label class="block text-gray-700 mb-2 font-medium">Total Amount (₹)</label>
-                                <input type="number" id="total-amount" class="form-input" placeholder="e.g. 3000" min="1">
+                                <label for="total-amount" class="block text-gray-700 mb-1 font-medium text-sm">Total Loan (₹)</label>
+                                <input type="number" id="total-amount" class="form-input" placeholder="e.g. 3000" min="1" required>
                             </div>
                             <div>
-                                <label class="block text-gray-700 mb-2 font-medium">Initial Payment (₹)</label>
+                                <label for="initial-payment" class="block text-gray-700 mb-1 font-medium text-sm">Initial Payment (₹)</label>
                                 <input type="number" id="initial-payment" class="form-input" placeholder="e.g. 1000" min="0">
                             </div>
                         </div>
                         
-                        <button type="submit" class="btn btn-primary w-full">
-                            <i class="fas fa-plus-circle mr-2"></i> Add New Device
+                        <button type="submit" class="btn btn-primary w-full !mt-6">
+                            <i class="fas fa-save mr-2"></i> Add & Save Device
                         </button>
                     </form>
                 </div>
                 
                 <!-- Financial Summary -->
                 <div class="card p-6">
-                    <h2 class="text-xl font-bold text-gray-800 mb-4">Financial Summary</h2>
+                    <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center"><i class="fas fa-chart-pie mr-3 text-indigo-500"></i>Financial Summary</h2>
                     <div class="space-y-4">
                         <div>
                             <div class="flex justify-between mb-1">
-                                <span class="text-gray-600">Total Revenue</span>
-                                <span class="font-medium" id="total-revenue">₹0</span>
-                            </div>
-                            <div class="progress-bar">
-                                <div class="progress-fill bg-green-500" id="revenue-bar" style="width: 0%"></div>
+                                <span class="text-gray-600 font-medium">Total Collected</span>
+                                <span class="font-bold text-green-600" id="total-revenue">₹0</span>
                             </div>
                         </div>
                         
                         <div>
                             <div class="flex justify-between mb-1">
-                                <span class="text-gray-600">Outstanding Balance</span>
-                                <span class="font-medium" id="outstanding-balance">₹0</span>
-                            </div>
-                            <div class="progress-bar">
-                                <div class="progress-fill bg-yellow-500" id="outstanding-bar" style="width: 0%"></div>
+                                <span class="text-gray-600 font-medium">Total Outstanding</span>
+                                <span class="font-bold text-red-600" id="outstanding-balance">₹0</span>
                             </div>
                         </div>
-                        
-                        <div>
+                        <div class="border-t pt-4">
                             <div class="flex justify-between mb-1">
-                                <span class="text-gray-600">Average Payment</span>
-                                <span class="font-medium" id="avg-payment">₹0</span>
-                            </div>
-                            <div class="progress-bar">
-                                <div class="progress-fill bg-blue-500" id="avg-payment-bar" style="width: 0%"></div>
+                                <span class="text-gray-600 font-medium">Total Loan Value</span>
+                                <span class="font-bold text-gray-800" id="total-loan-value">₹0</span>
                             </div>
                         </div>
                     </div>
                     
-                    <div class="mt-6 grid grid-cols-2 gap-4">
-                        <div class="bg-green-50 p-4 rounded-lg">
-                            <p class="text-green-500 text-sm">Fully Paid</p>
-                            <p class="text-xl font-bold" id="fully-paid-count">0</p>
+                    <div class="mt-6 grid grid-cols-3 gap-4 text-center">
+                        <div class="bg-green-50 p-3 rounded-lg">
+                            <p class="text-green-600 text-sm font-semibold">Fully Paid</p>
+                            <p class="text-2xl font-bold text-green-700" id="fully-paid-count">0</p>
+                        </div>
+                        <div class="bg-yellow-50 p-3 rounded-lg">
+                            <p class="text-yellow-600 text-sm font-semibold">Partial Paid</p>
+                            <p class="text-2xl font-bold text-yellow-700" id="partial-paid-count">0</p>
                         </div>
-                        <div class="bg-yellow-50 p-4 rounded-lg">
-                            <p class="text-yellow-500 text-sm">Partial Paid</p>
-                            <p class="text-xl font-bold" id="partial-paid-count">0</p>
+                        <div class="bg-red-50 p-3 rounded-lg">
+                            <p class="text-red-600 text-sm font-semibold">Unpaid</p>
+                            <p class="text-2xl font-bold text-red-700" id="unpaid-count">0</p>
                         </div>
                     </div>
                 </div>
             </div>
             
             <!-- Right Column - Device Table -->
-            <div class="lg:w-2/3">
+            <div class="lg:col-span-2">
                 <div class="card p-6">
                     <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
-                        <h2 class="text-xl font-bold text-gray-800">Registered Devices</h2>
+                        <h2 class="text-xl font-bold text-gray-800 flex items-center"><i class="fas fa-list-ul mr-3 text-indigo-500"></i>Registered Devices (<span id="device-count">0</span>)</h2>
                         <div class="flex space-x-3 mt-4 md:mt-0 w-full md:w-auto">
                             <div class="relative w-full md:w-64">
-                                <input type="text" id="search-input" class="form-input pl-10" placeholder="Search devices...">
-                                <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
+                                <input type="text" id="search-input" class="form-input pl-10" placeholder="Search...">
+                                <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
                             </div>
-                            <button id="export-btn" class="btn btn-primary">
-                                <i class="fas fa-file-export mr-2"></i> Export
+                            <button id="export-btn" class="btn btn-primary bg-gray-700 hover:bg-gray-900" title="Export as CSV">
+                                <i class="fas fa-file-csv mr-2"></i> Export
                             </button>
                         </div>
                     </div>
                     
                     <div class="overflow-x-auto">
-                        <table class="w-full">
+                        <table class="w-full text-sm">
                             <thead>
-                                <tr class="text-left text-gray-500 text-sm font-medium border-b">
-                                    <th class="pb-3">#</th>
-                                    <th class="pb-3">MAC Address</th>
-                                    <th class="pb-3">Device</th>
-                                    <th class="pb-3">User</th>
-                                    <th class="pb-3">Total</th>
-                                    <th class="pb-3">Paid</th>
-                                    <th class="pb-3">Remaining</th>
-                                    <th class="pb-3">Status</th>
-                                    <th class="pb-3 text-right">Actions</th>
+                                <tr class="text-left text-gray-500 font-medium border-b-2 border-gray-200">
+                                    <th class="p-3">MAC Address</th>
+                                    <th class="p-3">User / Device</th>
+                                    <th class="p-3">Payment Progress</th>
+                                    <th class="p-3">Status</th>
+                                    <th class="p-3 text-right">Actions</th>
                                 </tr>
                             </thead>
-                            <tbody id="device-table" class="device-table">
+                            <tbody id="device-table" class="divide-y divide-gray-100">
                                 <!-- Device rows will be populated here -->
                             </tbody>
                         </table>
                         
-                        <div id="empty-state" class="py-12 text-center">
+                        <div id="empty-state" class="py-16 text-center hidden">
                             <div class="mb-4">
-                                <i class="fas fa-inbox text-4xl text-gray-300"></i>
+                                <i class="fas fa-inbox text-5xl text-gray-300"></i>
                             </div>
-                            <h3 class="text-lg font-medium text-gray-700">No devices registered</h3>
-                            <p class="text-gray-500 mt-1">Add a new device to start monitoring</p>
+                            <h3 class="text-lg font-medium text-gray-700">No Devices Registered Yet</h3>
+                            <p class="text-gray-500 mt-1">Use the form on the left to add a new device.</p>
                         </div>
                     </div>
                 </div>
@@ -524,550 +466,365 @@
     </div>
 
     <script>
-        // Initialize device data from localStorage or empty array
-        let devices = JSON.parse(localStorage.getItem('networkDevices')) || [];
+    document.addEventListener('DOMContentLoaded', () => {
+        // --- STATE MANAGEMENT ---
+        let devices = JSON.parse(localStorage.getItem('networkDevices_v2')) || [];
         let currentPaymentDevice = null;
-        
-        // DOM elements
+        const APP_VERSION = 'v2'; // To avoid conflicts with old data structures
+
+        // --- DOM ELEMENTS ---
         const deviceForm = document.getElementById('device-form');
         const deviceTable = document.getElementById('device-table');
         const emptyState = document.getElementById('empty-state');
         const paymentModal = document.getElementById('payment-modal');
         const searchInput = document.getElementById('search-input');
         const exportBtn = document.getElementById('export-btn');
-        
-        // Initialize the app
-        document.addEventListener('DOMContentLoaded', () => {
-            renderDeviceTable();
-            updateSummary();
-            attachEventListeners();
-        });
-        
-        // Event listeners
-        function attachEventListeners() {
-            deviceForm.addEventListener('submit', addNewDevice);
-            document.querySelector('.close-payment-modal').addEventListener('click', closePaymentModal);
-            document.getElementById('add-payment-btn').addEventListener('click', addNewPayment);
-            searchInput.addEventListener('input', filterDevices);
-            exportBtn.addEventListener('click', exportToCSV);
-        }
-        
-        // Add new device
-        function addNewDevice(e) {
-            e.preventDefault();
-            
-            const macAddress = document.getElementById('mac-address').value.trim();
-            const deviceName = document.getElementById('device-name').value.trim();
-            const userName = document.getElementById('user-name').value.trim();
-            const totalAmount = parseFloat(document.getElementById('total-amount').value);
-            const initialPayment = parseFloat(document.getElementById('initial-payment').value) || 0;
-            
-            // Validation
-            if (!macAddress || !deviceName || !userName || isNaN(totalAmount)) {
-                showToast('Please fill all required fields', 'error');
-                return;
-            }
-            
-            if (totalAmount <= 0) {
-                showToast('Total amount must be greater than 0', 'error');
-                return;
-            }
-            
-            if (initialPayment < 0) {
-                showToast('Initial payment cannot be negative', 'error');
-                return;
-            }
-            
-            // Create new device object
-            const newDevice = {
-                id: Date.now(),
-                mac: formatMAC(macAddress),
-                deviceName,
-                userName,
-                totalAmount,
-                payments: [],
-                addedTime: new Date().toLocaleString(),
-                status: 'Active'
-            };
-            
-            // Add initial payment if provided
-            if (initialPayment > 0) {
-                newDevice.payments.push({
-                    id: Date.now(),
-                    date: new Date().toLocaleString(),
-                    amount: initialPayment
-                });
-            }
-            
-            // Add to devices array and update storage
-            devices.push(newDevice);
-            localStorage.setItem('networkDevices', JSON.stringify(devices));
-            
-            // Reset form and update UI
-            deviceForm.reset();
-            renderDeviceTable();
-            updateSummary();
-            
-            // Show success message
-            showToast('Device added successfully!', 'success');
-        }
-        
-        // Format MAC address (flexible)
-        function formatMAC(mac) {
-            // Remove any non-alphanumeric characters
-            let cleanMac = mac.replace(/[^0-9A-Fa-f]/g, '');
-            
-            // If we have exactly 12 characters, format with colons
-            if (cleanMac.length === 12) {
-                return cleanMac.match(/.{1,2}/g).join(':').toUpperCase();
-            }
+        const addPaymentForm = document.getElementById('add-payment-form');
+
+        // --- HELPER FUNCTIONS ---
+        const saveData = () => {
+            localStorage.setItem(`networkDevices_${APP_VERSION}`, JSON.stringify(devices));
+        };
+
+        const formatCurrency = (amount) => `₹${amount.toFixed(2)}`;
+
+        const showToast = (message, type = 'info') => {
+            const container = document.getElementById('toast-container');
+            const toast = document.createElement('div');
+            const icons = { success: 'fa-check-circle', error: 'fa-times-circle', info: 'fa-info-circle', warning: 'fa-exclamation-triangle' };
+            toast.className = `toast ${type} flex items-center space-x-3`;
+            toast.innerHTML = `<i class="fas ${icons[type]}"></i><span>${message}</span>`;
+            container.prepend(toast);
             
-            // Otherwise, return the cleaned version in uppercase
-            return cleanMac.toUpperCase();
-        }
-        
-        // Render device table
-        function renderDeviceTable() {
+            setTimeout(() => toast.classList.add('show'), 10);
+            setTimeout(() => {
+                toast.classList.remove('show');
+                toast.addEventListener('transitionend', () => toast.remove());
+            }, 3000);
+        };
+
+        const formatMAC = (mac) => {
+            let cleanMac = mac.replace(/[^0-9A-Fa-f]/g, '').toUpperCase();
+            if (cleanMac.length !== 12) return mac.toUpperCase(); // Return original if not 12 hex chars
+            return cleanMac.match(/.{1,2}/g).join(':');
+        };
+
+        // --- CORE LOGIC ---
+        const updateSummary = () => {
+            let totalRevenue = 0;
+            let totalLoanValue = 0;
+            let fullyPaid = 0, partialPaid = 0, unpaid = 0;
+
+            devices.forEach(d => {
+                const paidAmount = d.payments.reduce((sum, p) => sum + p.amount, 0);
+                totalRevenue += paidAmount;
+                totalLoanValue += d.totalAmount;
+                
+                if (paidAmount >= d.totalAmount) fullyPaid++;
+                else if (paidAmount > 0) partialPaid++;
+                else unpaid++;
+            });
+
+            const totalOutstanding = totalLoanValue - totalRevenue;
+
+            document.getElementById('total-revenue').textContent = formatCurrency(totalRevenue);
+            document.getElementById('outstanding-balance').textContent = formatCurrency(Math.max(0, totalOutstanding));
+            document.getElementById('total-loan-value').textContent = formatCurrency(totalLoanValue);
+            document.getElementById('fully-paid-count').textContent = fullyPaid;
+            document.getElementById('partial-paid-count').textContent = partialPaid;
+            document.getElementById('unpaid-count').textContent = unpaid;
+            document.getElementById('device-count').textContent = devices.length;
+        };
+
+        const renderDeviceTable = (data = devices) => {
             deviceTable.innerHTML = '';
-            
-            if (devices.length === 0) {
-                emptyState.classList.remove('hidden');
-                return;
-            }
-            
-            emptyState.classList.add('hidden');
-            
-            devices.forEach((device, index) => {
-                // Calculate payment totals
-                const paidAmount = device.payments.reduce((sum, payment) => sum + payment.amount, 0);
+            emptyState.classList.toggle('hidden', data.length > 0);
+
+            data.forEach(device => {
+                const paidAmount = device.payments.reduce((sum, p) => sum + p.amount, 0);
                 const remainingAmount = device.totalAmount - paidAmount;
-                
-                // Determine payment status
-                let paymentStatus = 'Unpaid';
-                let statusClass = 'unpaid-badge';
-                
+                const progress = Math.min(100, (paidAmount / device.totalAmount) * 100);
+
+                let paymentStatus, paymentStatusClass;
                 if (paidAmount >= device.totalAmount) {
                     paymentStatus = 'Fully Paid';
-                    statusClass = 'paid-badge';
+                    paymentStatusClass = 'paid-badge';
                 } else if (paidAmount > 0) {
-                    paymentStatus = 'Partial Paid';
-                    statusClass = 'partial-badge';
+                    paymentStatus = 'Partial';
+                    paymentStatusClass = 'partial-badge';
+                } else {
+                    paymentStatus = 'Unpaid';
+                    paymentStatusClass = 'unpaid-badge';
                 }
                 
+                const deviceStatusClass = device.status === 'Active' ? 'active-badge' : 'blocked-badge';
+
                 const row = document.createElement('tr');
-                row.className = 'border-b';
+                row.className = 'hover:bg-gray-50';
                 row.innerHTML = `
-                    <td class="py-4">${index + 1}</td>
-                    <td class="py-4">
-                        <span class="mac-address">${device.mac}</span>
+                    <td class="p-3"><span class="mac-address">${device.mac}</span></td>
+                    <td class="p-3">
+                        <div class="font-bold text-gray-800">${device.userName}</div>
+                        <div class="text-gray-500">${device.deviceName}</div>
                     </td>
-                    <td class="py-4 font-medium">${device.deviceName}</td>
-                    <td class="py-4">${device.userName}</td>
-                    <td class="py-4 font-bold">₹${device.totalAmount.toFixed(2)}</td>
-                    <td class="py-4 font-medium text-green-600">₹${paidAmount.toFixed(2)}</td>
-                    <td class="py-4 font-medium ${remainingAmount > 0 ? 'text-red-600' : 'text-green-600'}">
-                        ₹${Math.abs(remainingAmount).toFixed(2)}
+                    <td class="p-3">
+                        <div class="flex items-center">
+                            <div class="w-full bg-gray-200 rounded-full h-2 mr-2">
+                                <div class="bg-green-500 h-2 rounded-full" style="width: ${progress}%"></div>
+                            </div>
+                            <span class="font-medium text-gray-600">${progress.toFixed(0)}%</span>
+                        </div>
+                        <div class="text-xs text-gray-500 mt-1">${formatCurrency(paidAmount)} / ${formatCurrency(device.totalAmount)}</div>
                     </td>
-                    <td class="py-4">
-                        <span class="payment-status ${statusClass}">
-                            ${paymentStatus}
-                        </span>
+                    <td class="p-3">
+                        <div class="flex flex-col space-y-1">
+                            <span class="status-badge ${deviceStatusClass}">${device.status}</span>
+                            <span class="status-badge ${paymentStatusClass}">${paymentStatus}</span>
+                        </div>
                     </td>
-                    <td class="py-4 text-right">
-                        <div class="inline-flex space-x-1">
-                            <button class="action-btn payment-btn" data-id="${device.id}" title="Manage Payments">
-                                <i class="fas fa-rupee-sign"></i>
-                            </button>
-                            <button class="action-btn block-btn" data-id="${device.id}" title="Block Device">
-                                <i class="fas fa-ban"></i>
-                            </button>
-                            <button class="action-btn delete-btn" data-id="${device.id}" title="Delete Device">
-                                <i class="fas fa-trash"></i>
+                    <td class="p-3 text-right">
+                        <div class="inline-flex space-x-2">
+                            <button class="action-btn payment-btn" data-id="${device.id}" title="Manage Payments"><i class="fas fa-money-check-alt"></i></button>
+                            <button class="action-btn block-btn ${device.status === 'Active' ? 'active-device' : 'blocked-device'}" data-id="${device.id}" title="${device.status === 'Active' ? 'Block' : 'Unblock'} Device">
+                                <i class="fas ${device.status === 'Active' ? 'fa-ban' : 'fa-check-circle'}"></i>
                             </button>
+                            <button class="action-btn delete-btn" data-id="${device.id}" title="Delete Device"><i class="fas fa-trash"></i></button>
                         </div>
                     </td>
                 `;
                 deviceTable.appendChild(row);
             });
-            
-            // Attach event listeners to action buttons
-            document.querySelectorAll('.payment-btn').forEach(btn => {
-                btn.addEventListener('click', () => openPaymentModal(btn.dataset.id));
-            });
-            
-            document.querySelectorAll('.block-btn').forEach(btn => {
-                btn.addEventListener('click', () => blockDevice(btn.dataset.id));
-            });
-            
-            document.querySelectorAll('.delete-btn').forEach(btn => {
-                btn.addEventListener('click', () => deleteDevice(btn.dataset.id));
-            });
-        }
-        
-        // Update summary stats
-        function updateSummary() {
-            // Payment calculations
-            const totalRevenue = devices.reduce((sum, device) => {
-                return sum + device.payments.reduce((deviceSum, payment) => deviceSum + payment.amount, 0);
-            }, 0);
-            
-            const totalOutstanding = devices.reduce((sum, device) => {
-                const paidAmount = device.payments.reduce((deviceSum, payment) => deviceSum + payment.amount, 0);
-                return sum + (device.totalAmount - paidAmount);
-            }, 0);
-            
-            // Payment status counts
-            let fullyPaid = 0;
-            let partialPaid = 0;
-            
-            devices.forEach(device => {
-                const paidAmount = device.payments.reduce((sum, payment) => sum + payment.amount, 0);
-                if (paidAmount >= device.totalAmount) {
-                    fullyPaid++;
-                } else if (paidAmount > 0) {
-                    partialPaid++;
-                }
-            });
-            
-            // Average payment
-            const paymentCount = devices.reduce((count, device) => count + device.payments.length, 0);
-            const avgPayment = paymentCount > 0 ? totalRevenue / paymentCount : 0;
-            
-            // Update UI
-            document.getElementById('total-revenue').textContent = `₹${totalRevenue.toFixed(2)}`;
-            document.getElementById('outstanding-balance').textContent = `₹${Math.max(0, totalOutstanding).toFixed(2)}`;
-            document.getElementById('avg-payment').textContent = `₹${avgPayment.toFixed(2)}`;
-            document.getElementById('fully-paid-count').textContent = fullyPaid;
-            document.getElementById('partial-paid-count').textContent = partialPaid;
-            
-            // Update progress bars
-            const maxRevenue = Math.max(10000, totalRevenue);
-            document.getElementById('revenue-bar').style.width = `${(totalRevenue / maxRevenue) * 100}%`;
-            
-            const maxOutstanding = Math.max(10000, totalOutstanding);
-            document.getElementById('outstanding-bar').style.width = `${(totalOutstanding / maxOutstanding) * 100}%`;
-            
-            const maxAvg = Math.max(1000, avgPayment);
-            document.getElementById('avg-payment-bar').style.width = `${(avgPayment / maxAvg) * 100}%`;
-        }
-        
-        // Open payment modal
-        function openPaymentModal(deviceId) {
-            const device = devices.find(d => d.id == deviceId);
-            if (!device) return;
-            
-            currentPaymentDevice = device;
-            
-            // Calculate payment totals
-            const paidAmount = device.payments.reduce((sum, payment) => sum + payment.amount, 0);
-            const remainingAmount = device.totalAmount - paidAmount;
-            const paymentPercentage = (paidAmount / device.totalAmount) * 100;
-            
-            // Update modal content
-            document.getElementById('payment-mac').textContent = device.mac;
-            document.getElementById('payment-device').textContent = device.deviceName;
-            document.getElementById('payment-user').textContent = device.userName;
-            document.getElementById('payment-status').textContent = device.status;
-            document.getElementById('payment-total').textContent = `₹${device.totalAmount.toFixed(2)}`;
-            document.getElementById('payment-paid').textContent = `₹${paidAmount.toFixed(2)}`;
-            document.getElementById('payment-remaining').textContent = `₹${Math.abs(remainingAmount).toFixed(2)}`;
-            document.getElementById('payment-progress').style.width = `${paymentPercentage}%`;
-            
-            // Update payment history
-            const paymentHistory = document.getElementById('payment-history');
-            const noPayments = document.getElementById('no-payments');
-            
-            paymentHistory.innerHTML = '';
-            
-            if (device.payments.length === 0) {
-                noPayments.classList.remove('hidden');
-            } else {
-                noPayments.classList.add('hidden');
-                device.payments.forEach(payment => {
-                    const paymentItem = document.createElement('div');
-                    paymentItem.className = 'payment-item';
-                    paymentItem.innerHTML = `
-                        <div>
-                            <div class="font-medium">₹${payment.amount.toFixed(2)}</div>
-                            <div class="text-gray-500 text-sm">${payment.date}</div>
-                        </div>
-                        <div class="text-right">
-                            <div class="text-green-600 font-medium">Payment</div>
-                            <div class="text-gray-500 text-sm">ID: ${payment.id.toString().slice(-6)}</div>
-                        </div>
-                    `;
-                    paymentHistory.appendChild(paymentItem);
-                });
+            updateSummary();
+        };
+
+        const addNewDevice = (e) => {
+            e.preventDefault();
+            const mac = document.getElementById('mac-address').value.trim();
+            const initialPayment = parseFloat(document.getElementById('initial-payment').value) || 0;
+            const totalAmount = parseFloat(document.getElementById('total-amount').value);
+
+            if (devices.some(d => d.mac === formatMAC(mac))) {
+                showToast('A device with this MAC address already exists.', 'error');
+                return;
             }
-            
-            // Show modal
+
+            if (initialPayment > totalAmount) {
+                showToast('Initial payment cannot be greater than the total amount.', 'error');
+                return;
+            }
+
+            const newDevice = {
+                id: Date.now(),
+                mac: formatMAC(mac),
+                deviceName: document.getElementById('device-name').value.trim(),
+                userName: document.getElementById('user-name').value.trim(),
+                totalAmount,
+                payments: [],
+                addedTime: new Date().toISOString(),
+                status: 'Active'
+            };
+
+            if (initialPayment > 0) {
+                newDevice.payments.push({ id: Date.now(), date: new Date().toISOString(), amount: initialPayment });
+            }
+
+            devices.unshift(newDevice);
+            saveData();
+            renderDeviceTable();
+            deviceForm.reset();
+            showToast('Device registered successfully!', 'success');
+        };
+
+        const openPaymentModal = (deviceId) => {
+            currentPaymentDevice = devices.find(d => d.id == deviceId);
+            if (!currentPaymentDevice) return;
+
+            const paidAmount = currentPaymentDevice.payments.reduce((sum, p) => sum + p.amount, 0);
+            const remainingAmount = currentPaymentDevice.totalAmount - paidAmount;
+            const progress = Math.min(100, (paidAmount / currentPaymentDevice.totalAmount) * 100);
+
+            document.getElementById('payment-mac').textContent = currentPaymentDevice.mac;
+            document.getElementById('payment-device').textContent = currentPaymentDevice.deviceName;
+            document.getElementById('payment-user').textContent = currentPaymentDevice.userName;
+            const statusBadge = document.getElementById('payment-status-badge');
+            statusBadge.innerHTML = `<span class="status-badge ${currentPaymentDevice.status === 'Active' ? 'active-badge' : 'blocked-badge'}">${currentPaymentDevice.status}</span>`;
+
+            document.getElementById('payment-total').textContent = formatCurrency(currentPaymentDevice.totalAmount);
+            document.getElementById('payment-paid').textContent = formatCurrency(paidAmount);
+            document.getElementById('payment-remaining').textContent = formatCurrency(Math.max(0, remainingAmount));
+            document.getElementById('payment-progress').style.width = `${progress}%`;
+            
+            const historyContainer = document.getElementById('payment-history');
+            const noPaymentsEl = document.getElementById('no-payments');
+            historyContainer.innerHTML = '';
+            noPaymentsEl.classList.toggle('hidden', currentPaymentDevice.payments.length > 0);
+
+            [...currentPaymentDevice.payments].reverse().forEach(p => {
+                const item = document.createElement('div');
+                item.className = 'payment-item';
+                item.innerHTML = `
+                    <div>
+                        <div class="font-bold text-green-700">${formatCurrency(p.amount)}</div>
+                        <div class="text-gray-500 text-xs">${new Date(p.date).toLocaleString()}</div>
+                    </div>
+                    <div class="text-right">
+                        <button class="text-red-500 hover:text-red-700 text-xs delete-payment-btn" data-id="${p.id}" title="Delete Payment"><i class="fas fa-trash-alt"></i></button>
+                    </div>
+                `;
+                historyContainer.appendChild(item);
+            });
+
             paymentModal.classList.add('active');
-        }
-        
-        // Close payment modal
-        function closePaymentModal() {
+        };
+
+        const closePaymentModal = () => {
             paymentModal.classList.remove('active');
             currentPaymentDevice = null;
-        }
-        
-        // Add new payment
-        function addNewPayment() {
+            document.getElementById('new-payment-amount').value = '';
+        };
+
+        const addNewPayment = (e) => {
+            e.preventDefault();
             if (!currentPaymentDevice) return;
-            
             const amountInput = document.getElementById('new-payment-amount');
             const amount = parseFloat(amountInput.value);
-            
+
+            const paidAmount = currentPaymentDevice.payments.reduce((sum, p) => sum + p.amount, 0);
+            const remaining = currentPaymentDevice.totalAmount - paidAmount;
+
             if (isNaN(amount) || amount <= 0) {
-                showToast('Please enter a valid payment amount', 'error');
+                showToast('Please enter a valid positive amount.', 'error');
                 return;
             }
-            
-            // Add payment to device
-            currentPaymentDevice.payments.push({
-                id: Date.now(),
-                date: new Date().toLocaleString(),
-                amount: amount
-            });
-            
-            // Update storage and UI
-            localStorage.setItem('networkDevices', JSON.stringify(devices));
-            openPaymentModal(currentPaymentDevice.id);
-            renderDeviceTable();
-            updateSummary();
-            
-            // Reset input
+            if (amount > remaining) {
+                showToast(`Payment cannot exceed remaining amount of ${formatCurrency(remaining)}.`, 'warning');
+                return;
+            }
+
+            currentPaymentDevice.payments.push({ id: Date.now(), date: new Date().toISOString(), amount: amount });
+            saveData();
+            openPaymentModal(currentPaymentDevice.id); // Refresh modal
+            renderDeviceTable(devices.filter(d => filterMatch(d, searchInput.value))); // Refresh table
             amountInput.value = '';
-            
-            // Show success message
             showToast('Payment added successfully!', 'success');
-        }
+        };
         
-        // Block device
-        function blockDevice(deviceId) {
-            const device = devices.find(d => d.id == deviceId);
+        const deletePayment = (paymentId) => {
+             if (!currentPaymentDevice) return;
+             currentPaymentDevice.payments = currentPaymentDevice.payments.filter(p => p.id != paymentId);
+             saveData();
+             openPaymentModal(currentPaymentDevice.id); // Refresh modal
+             renderDeviceTable(devices.filter(d => filterMatch(d, searchInput.value))); // Refresh table
+             showToast('Payment deleted.', 'info');
+        }
+
+        const handleTableClick = (e) => {
+            const target = e.target.closest('button');
+            if (!target) return;
+            const id = target.dataset.id;
+            
+            if (target.classList.contains('payment-btn')) openPaymentModal(id);
+            if (target.classList.contains('block-btn')) toggleBlockDevice(id);
+            if (target.classList.contains('delete-btn')) deleteDevice(id);
+        };
+        
+        const handleModalClick = (e) => {
+            if (e.target.classList.contains('modal-overlay') || e.target.closest('.close-payment-modal')) {
+                closePaymentModal();
+            }
+            const deleteBtn = e.target.closest('.delete-payment-btn');
+            if (deleteBtn) {
+                if (confirm('Are you sure you want to delete this payment record? This action cannot be undone.')) {
+                    deletePayment(deleteBtn.dataset.id);
+                }
+            }
+        };
+
+        const toggleBlockDevice = (id) => {
+            const device = devices.find(d => d.id == id);
             if (!device) return;
-            
             device.status = device.status === 'Active' ? 'Blocked' : 'Active';
-            
-            // Update storage and UI
-            localStorage.setItem('networkDevices', JSON.stringify(devices));
-            renderDeviceTable();
-            
-            // Show notification
-            const action = device.status === 'Blocked' ? 'blocked' : 'unblocked';
-            showToast(`Device ${device.mac} has been ${action}`, 'info');
-        }
-        
-        // Delete device
-        function deleteDevice(deviceId) {
-            if (!confirm('Are you sure you want to delete this device?')) return;
-            
-            devices = devices.filter(d => d.id != deviceId);
-            
-            // Update storage and UI
-            localStorage.setItem('networkDevices', JSON.stringify(devices));
-            renderDeviceTable();
-            updateSummary();
-            
-            showToast('Device deleted successfully!', 'success');
-        }
-        
-        // Filter devices
-        function filterDevices() {
-            const searchTerm = searchInput.value.toLowerCase();
-            
-            if (!searchTerm) {
-                renderDeviceTable();
-                return;
+            saveData();
+            renderDeviceTable(devices.filter(d => filterMatch(d, searchInput.value)));
+            showToast(`Device ${device.mac} has been ${device.status.toLowerCase()}.`, 'info');
+        };
+
+        const deleteDevice = (id) => {
+            if (confirm('Are you sure you want to delete this device and all its payment history? This is irreversible.')) {
+                devices = devices.filter(d => d.id != id);
+                saveData();
+                renderDeviceTable(devices.filter(d => filterMatch(d, searchInput.value)));
+                showToast('Device deleted successfully.', 'success');
             }
-            
-            const filtered = devices.filter(device => 
-                device.mac.toLowerCase().includes(searchTerm) ||
-                device.deviceName.toLowerCase().includes(searchTerm) ||
-                device.userName.toLowerCase().includes(searchTerm)
+        };
+
+        const filterMatch = (device, term) => {
+            const lowerTerm = term.toLowerCase();
+            return (
+                device.mac.toLowerCase().includes(lowerTerm) ||
+                device.deviceName.toLowerCase().includes(lowerTerm) ||
+                device.userName.toLowerCase().includes(lowerTerm)
             );
-            
-            renderFilteredDevices(filtered);
-        }
-        
-        // Render filtered devices
-        function renderFilteredDevices(filteredDevices) {
-            deviceTable.innerHTML = '';
-            
-            if (filteredDevices.length === 0) {
-                emptyState.classList.remove('hidden');
-                return;
-            }
-            
-            emptyState.classList.add('hidden');
-            
-            filteredDevices.forEach((device, index) => {
-                // Calculate payment totals
-                const paidAmount = device.payments.reduce((sum, payment) => sum + payment.amount, 0);
-                const remainingAmount = device.totalAmount - paidAmount;
-                
-                // Determine payment status
-                let paymentStatus = 'Unpaid';
-                let statusClass = 'unpaid-badge';
-                
-                if (paidAmount >= device.totalAmount) {
-                    paymentStatus = 'Fully Paid';
-                    statusClass = 'paid-badge';
-                } else if (paidAmount > 0) {
-                    paymentStatus = 'Partial Paid';
-                    statusClass = 'partial-badge';
-                }
-                
-                const row = document.createElement('tr');
-                row.className = 'border-b';
-                row.innerHTML = `
-                    <td class="py-4">${index + 1}</td>
-                    <td class="py-4">
-                        <span class="mac-address">${device.mac}</span>
-                    </td>
-                    <td class="py-4 font-medium">${device.deviceName}</td>
-                    <td class="py-4">${device.userName}</td>
-                    <td class="py-4 font-bold">₹${device.totalAmount.toFixed(2)}</td>
-                    <td class="py-4 font-medium text-green-600">₹${paidAmount.toFixed(2)}</td>
-                    <td class="py-4 font-medium ${remainingAmount > 0 ? 'text-red-600' : 'text-green-600'}">
-                        ₹${Math.abs(remainingAmount).toFixed(2)}
-                    </td>
-                    <td class="py-4">
-                        <span class="payment-status ${statusClass}">
-                            ${paymentStatus}
-                        </span>
-                    </td>
-                    <td class="py-4 text-right">
-                        <div class="inline-flex space-x-1">
-                            <button class="action-btn payment-btn" data-id="${device.id}" title="Manage Payments">
-                                <i class="fas fa-rupee-sign"></i>
-                            </button>
-                            <button class="action-btn block-btn" data-id="${device.id}" title="Block Device">
-                                <i class="fas fa-ban"></i>
-                            </button>
-                            <button class="action-btn delete-btn" data-id="${device.id}" title="Delete Device">
-                                <i class="fas fa-trash"></i>
-                            </button>
-                        </div>
-                    </td>
-                `;
-                deviceTable.appendChild(row);
-            });
-            
-            // Reattach event listeners
-            document.querySelectorAll('.payment-btn').forEach(btn => {
-                btn.addEventListener('click', () => openPaymentModal(btn.dataset.id));
-            });
-            
-            document.querySelectorAll('.block-btn').forEach(btn => {
-                btn.addEventListener('click', () => blockDevice(btn.dataset.id));
-            });
-            
-            document.querySelectorAll('.delete-btn').forEach(btn => {
-                btn.addEventListener('click', () => deleteDevice(btn.dataset.id));
-            });
-        }
-        
-        // Export to CSV
-        function exportToCSV() {
+        };
+
+        const handleSearch = () => {
+            const searchTerm = searchInput.value;
+            const filtered = devices.filter(d => filterMatch(d, searchTerm));
+            renderDeviceTable(filtered);
+        };
+
+        const exportToCSV = () => {
             if (devices.length === 0) {
-                showToast('No devices to export', 'warning');
+                showToast('No devices to export.', 'warning');
                 return;
             }
-            
-            // Create CSV header
-            let csvContent = "MAC Address,Device Name,User Name,Total Amount,Paid Amount,Remaining Amount,Status,Added Time\n";
-            
-            // Add each device as a row
-            devices.forEach(device => {
-                const paidAmount = device.payments.reduce((sum, payment) => sum + payment.amount, 0);
-                const remainingAmount = device.totalAmount - paidAmount;
+            let csvContent = "data:text/csv;charset=utf-8,MAC Address,Device Name,User Name,Total Amount,Paid Amount,Remaining Amount,Device Status,Payment Status,Date Added\n";
+            
+            devices.forEach(d => {
+                const paidAmount = d.payments.reduce((sum, p) => sum + p.amount, 0);
+                const remaining = d.totalAmount - paidAmount;
+                let paymentStatus;
+                if (paidAmount >= d.totalAmount) paymentStatus = 'Fully Paid';
+                else if (paidAmount > 0) paymentStatus = 'Partial Paid';
+                else paymentStatus = 'Unpaid';
                 
-                csvContent += `"${device.mac}","${device.deviceName}","${device.userName}",${device.totalAmount},${paidAmount},${remainingAmount},"${device.status}","${device.addedTime}"\n`;
+                const row = [d.mac, d.deviceName, d.userName, d.totalAmount, paidAmount, remaining, d.status, paymentStatus, new Date(d.addedTime).toLocaleDateString()].join(',');
+                csvContent += row + "\n";
             });
-            
-            // Create download link
-            const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
-            const url = URL.createObjectURL(blob);
-            const link = document.createElement('a');
-            link.setAttribute('href', url);
-            link.setAttribute('download', 'network-devices.csv');
-            link.style.visibility = 'hidden';
+
+            const encodedUri = encodeURI(csvContent);
+            const link = document.createElement("a");
+            link.setAttribute("href", encodedUri);
+            link.setAttribute("download", "network_devices_export.csv");
             document.body.appendChild(link);
             link.click();
             document.body.removeChild(link);
-            
-            showToast('CSV exported successfully!', 'success');
-        }
-        
-        // Show toast notification
-        function showToast(message, type = 'info') {
-            const container = document.getElementById('toast-container');
-            const toast = document.createElement('div');
-            toast.className = `toast ${type}`;
-            toast.textContent = message;
-            container.appendChild(toast);
-            
-            // Show toast
-            setTimeout(() => {
-                toast.classList.add('show');
-            }, 10);
-            
-            // Remove toast after delay
-            setTimeout(() => {
-                toast.classList.remove('show');
-                setTimeout(() => {
-                    toast.remove();
-                }, 400);
-            }, 3000);
-        }
-        
-        // Initialize sample data
-        function initializeSampleData() {
-            if (devices.length === 0) {
-                devices = [
-                    {
-                        id: 1,
-                        mac: 'AA:BB:CC:DD:EE:FF',
-                        deviceName: 'John\'s iPhone',
-                        userName: 'John Smith',
-                        totalAmount: 3000,
-                        payments: [
-                            { id: 101, date: new Date().toLocaleString(), amount: 1000 },
-                            { id: 102, date: new Date().toLocaleString(), amount: 500 }
-                        ],
-                        addedTime: new Date().toLocaleString(),
-                        status: 'Active'
-                    },
-                    {
-                        id: 2,
-                        mac: '112233445566',
-                        deviceName: 'Office Printer',
-                        userName: 'Office Admin',
-                        totalAmount: 5000,
-                        payments: [
-                            { id: 201, date: new Date().toLocaleString(), amount: 5000 }
-                        ],
-                        addedTime: new Date().toLocaleString(),
-                        status: 'Active'
-                    },
-                    {
-                        id: 3,
-                        mac: 'FF-EE-DD-CC-BB-AA',
-                        deviceName: 'Sarah\'s Laptop',
-                        userName: 'Sarah Johnson',
-                        totalAmount: 2500,
-                        payments: [],
-                        addedTime: new Date().toLocaleString(),
-                        status: 'Blocked'
-                    }
-                ];
-                localStorage.setItem('networkDevices', JSON.stringify(devices));
-            }
-        }
-        
-        // Initialize app
+            showToast('CSV export started.', 'success');
+        };
+        
+        const initializeSampleData = () => {
+             if (devices.length > 0) return;
+             devices = [
+                { id: 1678886400000, mac: 'AA:BB:CC:11:22:33', deviceName: 'John\'s iPhone 14', userName: 'John Smith', totalAmount: 3000, payments: [ { id: 1, date: '2023-03-15T12:00:00Z', amount: 1500 } ], addedTime: '2023-03-15T12:00:00Z', status: 'Active' },
+                { id: 1678972800000, mac: 'DD:EE:FF:44:55:66', deviceName: 'Office Printer', userName: 'Admin', totalAmount: 5000, payments: [ { id: 2, date: '2023-03-16T14:00:00Z', amount: 5000 } ], addedTime: '2023-03-16T14:00:00Z', status: 'Active' },
+                { id: 1679059200000, mac: '11:22:33:AA:BB:CC', deviceName: 'Sarah\'s Laptop', userName: 'Sarah Johnson', totalAmount: 2500, payments: [], addedTime: '2023-03-17T16:00:00Z', status: 'Blocked' }
+             ];
+             saveData();
+             showToast('Welcome! Sample data has been loaded.', 'info');
+        };
+        
+        // --- EVENT LISTENERS ---
+        deviceForm.addEventListener('submit', addNewDevice);
+        addPaymentForm.addEventListener('submit', addNewPayment);
+        deviceTable.addEventListener('click', handleTableClick);
+        paymentModal.addEventListener('click', handleModalClick);
+        searchInput.addEventListener('input', handleSearch);
+        exportBtn.addEventListener('click', exportToCSV);
+
+        // --- INITIALIZATION ---
         initializeSampleData();
+        renderDeviceTable();
+    });
     </script>
 </body>
 </html>