Update index.html

index.html

@@ -7,249 +7,494 @@
     <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>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        
+        body {
+            font-family: 'Inter', sans-serif;
+            background: linear-gradient(135deg, #f5f7fa 0%, #e4e7f1 100%);
+            min-height: 100vh;
+        }
+        
+        .card {
+            background: rgba(255, 255, 255, 0.85);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
+            transition: all 0.3s ease;
+        }
+        
+        .card:hover {
+            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
+            transform: translateY(-5px);
+        }
+        
+        .device-table tr {
+            transition: background 0.2s;
+        }
+        
+        .device-table tr:hover {
+            background-color: #f8f9fc;
+        }
+        
+        .status-badge {
+            padding: 4px 10px;
+            border-radius: 20px;
+            font-size: 12px;
+            font-weight: 500;
+        }
+        
+        .active-badge {
+            background-color: #e6f4ea;
+            color: #0f9d58;
+        }
+        
+        .blocked-badge {
+            background-color: #fce8e6;
+            color: #d93025;
+        }
+        
+        .form-input {
+            border: 1px solid #e2e8f0;
+            border-radius: 10px;
+            padding: 12px 16px;
+            transition: all 0.3s;
+        }
+        
+        .form-input:focus {
+            border-color: #6366f1;
+            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
+            outline: none;
+        }
+        
+        .toast {
+            position: fixed;
+            bottom: 30px;
+            right: 30px;
+            padding: 16px 24px;
+            border-radius: 12px;
+            color: white;
+            font-weight: 500;
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+            z-index: 1000;
+            transform: translateY(100px);
+            opacity: 0;
+            transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
+        }
+        
+        .toast.show {
+            transform: translateY(0);
+            opacity: 1;
+        }
+        
+        .toast.success {
+            background: linear-gradient(135deg, #0f9d58 0%, #1db954 100%);
+        }
+        
+        .toast.error {
+            background: linear-gradient(135deg, #d93025 0%, #ea4335 100%);
+        }
+        
+        .toast.info {
+            background: linear-gradient(135deg, #1a73e8 0%, #4285f4 100%);
+        }
+        
+        .btn-primary {
+            background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
+            color: white;
+            border-radius: 10px;
+            padding: 12px 24px;
+            font-weight: 500;
+            transition: all 0.3s;
+            border: none;
+            cursor: pointer;
+        }
+        
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3);
+        }
+        
+        .btn-primary:active {
+            transform: translateY(0);
+        }
+        
+        .btn-blocked {
+            background: linear-gradient(135deg, #d93025 0%, #ea4335 100%);
+        }
+        
+        .btn-success {
+            background: linear-gradient(135deg, #0f9d58 0%, #1db954 100%);
+        }
+        
+        .action-btn {
+            width: 36px;
+            height: 36px;
+            border-radius: 10px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: all 0.2s;
+            color: #4b5563;
+        }
+        
+        .action-btn:hover {
+            transform: scale(1.1);
+            color: #6366f1;
+        }
+        
+        .edit-btn:hover {
+            background-color: #eef2ff;
+        }
+        
+        .block-btn:hover {
+            background-color: #fef2f2;
+            color: #ef4444;
+        }
+        
+        .delete-btn:hover {
+            background-color: #fef2f2;
+            color: #ef4444;
+        }
+        
+        .mac-address {
+            font-family: 'Courier New', monospace;
+            background: #f8fafc;
+            padding: 4px 8px;
+            border-radius: 6px;
+            font-weight: 500;
+        }
+        
+        .chart-container {
+            background: white;
+            border-radius: 16px;
+            padding: 20px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+        }
+        
+        .modal-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.6);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 1000;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.3s;
+        }
+        
+        .modal-overlay.active {
+            opacity: 1;
+            pointer-events: all;
+        }
+        
+        .modal-content {
+            background: white;
+            border-radius: 16px;
+            width: 90%;
+            max-width: 500px;
+            transform: translateY(20px);
+            opacity: 0;
+            transition: all 0.3s;
+        }
+        
+        .modal-overlay.active .modal-content {
+            transform: translateY(0);
+            opacity: 1;
+        }
+        
+        .pagination-btn {
+            width: 36px;
+            height: 36px;
+            border-radius: 10px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            background: #f1f5f9;
+            color: #4b5563;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+        
+        .pagination-btn.active {
+            background: #6366f1;
+            color: white;
+        }
+        
+        .pagination-btn:hover:not(.active) {
+            background: #e2e8f0;
+        }
+    </style>
 </head>
-<body class="bg-gray-50">
-    <!-- Header Section -->
-    <header class="bg-indigo-700 text-white shadow-lg">
-        <div class="container mx-auto px-4 py-6 flex justify-between items-center">
-            <div class="flex items-center space-x-3">
-                <i class="fas fa-network-wired text-3xl"></i>
-                <h1 class="text-2xl font-bold">Network Device Monitor</h1>
+<body class="min-h-screen py-8 px-4">
+    <!-- Toast Container -->
+    <div id="toast-container"></div>
+    
+    <!-- Modal -->
+    <div class="modal-overlay" id="block-modal">
+        <div class="modal-content">
+            <div class="p-6">
+                <div class="flex justify-between items-center mb-4">
+                    <h3 class="text-xl font-bold text-gray-800">Confirm Block Action</h3>
+                    <button class="action-btn close-modal">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+                <p class="text-gray-600 mb-6">Are you sure you want to block this device? The device will lose network access until unblocked.</p>
+                <div class="flex justify-between">
+                    <button class="btn-primary close-modal">Cancel</button>
+                    <button class="btn-primary btn-blocked" id="confirm-block">Block Device</button>
+                </div>
             </div>
-            <div class="flex items-center space-x-4">
+        </div>
+    </div>
+    
+    <div class="max-w-7xl mx-auto">
+        <!-- Header -->
+        <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>
+            </div>
+            <div class="flex items-center space-x-4 mt-4 md:mt-0">
                 <div class="relative">
-                    <i class="fas fa-bell text-xl"></i>
-                    <span class="absolute top-0 right-0 bg-red-500 text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span>
+                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                        <i class="fas fa-search text-gray-400"></i>
+                    </div>
+                    <input type="text" id="global-search" placeholder="Search devices..." class="pl-10 pr-4 py-2 form-input w-full md:w-64">
                 </div>
-                <div class="flex items-center space-x-2 bg-indigo-600 px-3 py-1 rounded-lg">
-                    <i class="fas fa-user-circle"></i>
-                    <span>Admin</span>
+                <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>
+                    </div>
+                    <div>
+                        <p class="text-sm font-medium text-gray-800">Admin User</p>
+                        <p class="text-xs text-gray-500">Network Admin</p>
+                    </div>
                 </div>
             </div>
         </div>
-    </header>
-
-    <div class="container mx-auto px-4 py-8">
-        <!-- Dashboard Summary -->
-        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
-            <div class="bg-white rounded-xl shadow p-6 flex items-center">
-                <div class="bg-blue-100 p-4 rounded-xl mr-4">
-                    <i class="fas fa-desktop text-blue-600 text-2xl"></i>
+        
+        <!-- Stats Cards -->
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+            <div class="card p-6">
+                <div class="flex justify-between">
+                    <div>
+                        <p class="text-gray-500">Total Devices</p>
+                        <p class="text-2xl font-bold text-gray-800" id="total-devices">0</p>
+                    </div>
+                    <div class="bg-blue-100 p-3 rounded-lg">
+                        <i class="fas fa-network-wired text-blue-600 text-xl"></i>
+                    </div>
                 </div>
-                <div>
-                    <p class="text-gray-500">Total Devices</p>
-                    <p class="text-2xl font-bold" id="total-devices">0</p>
+                <div class="mt-4">
+                    <div class="flex items-center text-sm text-green-600">
+                        <i class="fas fa-arrow-up mr-1"></i>
+                        <span>12% from last month</span>
+                    </div>
                 </div>
             </div>
-            <div class="bg-white rounded-xl shadow p-6 flex items-center">
-                <div class="bg-green-100 p-4 rounded-xl mr-4">
-                    <i class="fas fa-check-circle text-green-600 text-2xl"></i>
+            
+            <div class="card p-6">
+                <div class="flex justify-between">
+                    <div>
+                        <p class="text-gray-500">Active Devices</p>
+                        <p class="text-2xl font-bold text-gray-800" id="active-devices">0</p>
+                    </div>
+                    <div class="bg-green-100 p-3 rounded-lg">
+                        <i class="fas fa-check-circle text-green-600 text-xl"></i>
+                    </div>
                 </div>
-                <div>
-                    <p class="text-gray-500">Active Devices</p>
-                    <p class="text-2xl font-bold" id="active-devices">0</p>
+                <div class="mt-4">
+                    <div class="flex items-center text-sm text-green-600">
+                        <i class="fas fa-arrow-up mr-1"></i>
+                        <span>8% from last month</span>
+                    </div>
                 </div>
             </div>
-            <div class="bg-white rounded-xl shadow p-6 flex items-center">
-                <div class="bg-red-100 p-4 rounded-xl mr-4">
-                    <i class="fas fa-ban text-red-600 text-2xl"></i>
+            
+            <div class="card p-6">
+                <div class="flex justify-between">
+                    <div>
+                        <p class="text-gray-500">Blocked Devices</p>
+                        <p class="text-2xl font-bold text-gray-800" id="blocked-devices">0</p>
+                    </div>
+                    <div class="bg-red-100 p-3 rounded-lg">
+                        <i class="fas fa-ban text-red-600 text-xl"></i>
+                    </div>
                 </div>
-                <div>
-                    <p class="text-gray-500">Blocked Devices</p>
-                    <p class="text-2xl font-bold" id="blocked-devices">0</p>
+                <div class="mt-4">
+                    <div class="flex items-center text-sm text-red-600">
+                        <i class="fas fa-arrow-down mr-1"></i>
+                        <span>3% from last month</span>
+                    </div>
                 </div>
             </div>
-            <div class="bg-white rounded-xl shadow p-6 flex items-center">
-                <div class="bg-purple-100 p-4 rounded-xl mr-4">
-                    <i class="fas fa-rupee-sign text-purple-600 text-2xl"></i>
+            
+            <div class="card p-6">
+                <div class="flex justify-between">
+                    <div>
+                        <p class="text-gray-500">Total Revenue</p>
+                        <p class="text-2xl font-bold text-gray-800" id="total-revenue">₹0</p>
+                    </div>
+                    <div class="bg-purple-100 p-3 rounded-lg">
+                        <i class="fas fa-rupee-sign text-purple-600 text-xl"></i>
+                    </div>
                 </div>
-                <div>
-                    <p class="text-gray-500">Total Revenue</p>
-                    <p class="text-2xl font-bold" id="total-revenue">₹0</p>
+                <div class="mt-4">
+                    <div class="flex items-center text-sm text-green-600">
+                        <i class="fas fa-arrow-up mr-1"></i>
+                        <span>15% from last month</span>
+                    </div>
                 </div>
             </div>
         </div>
-
+        
         <div class="flex flex-col lg:flex-row gap-8">
-            <!-- Left Column - Form and Stats -->
-            <div class="lg:w-1/3">
+            <!-- Left Column - Form and Charts -->
+            <div class="lg:w-2/5">
                 <!-- Add Device Form -->
-                <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
-                    <h2 class="text-xl font-bold mb-4 text-gray-800">Add New Device</h2>
+                <div class="card p-6 mb-8">
+                    <h2 class="text-xl font-bold text-gray-800 mb-4">Register New Device</h2>
                     <form id="device-form" class="space-y-4">
                         <div>
-                            <label class="block text-gray-700 mb-2">MAC Address</label>
-                            <input type="text" id="mac-address" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="AA:BB:CC:DD:EE:FF">
+                            <label class="block text-gray-700 mb-2 font-medium">MAC Address</label>
+                            <input type="text" id="mac-address" class="w-full form-input" placeholder="AA:BB:CC:DD:EE:FF">
                             <p class="text-red-500 text-sm mt-1 hidden" id="mac-error">MAC address is required and must be unique</p>
                         </div>
+                        
                         <div>
-                            <label class="block text-gray-700 mb-2">Device Name</label>
-                            <input type="text" id="device-name" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="e.g. John's iPhone">
+                            <label class="block text-gray-700 mb-2 font-medium">Device Name</label>
+                            <input type="text" id="device-name" class="w-full form-input" placeholder="e.g. John's iPhone">
                         </div>
+                        
                         <div>
-                            <label class="block text-gray-700 mb-2">User Name</label>
-                            <input type="text" id="user-name" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="e.g. John Doe">
+                            <label class="block text-gray-700 mb-2 font-medium">User Name</label>
+                            <input type="text" id="user-name" class="w-full form-input" placeholder="e.g. John Doe">
                         </div>
+                        
                         <div>
-                            <label class="block text-gray-700 mb-2">Paid Amount (₹)</label>
-                            <input type="number" id="paid-amount" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="e.g. 500">
+                            <label class="block text-gray-700 mb-2 font-medium">Paid Amount (₹)</label>
+                            <input type="number" id="paid-amount" class="w-full form-input" placeholder="e.g. 500">
                             <p class="text-red-500 text-sm mt-1 hidden" id="amount-error">Please enter a valid amount</p>
                         </div>
-                        <button type="submit" class="w-full bg-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-700 transition duration-300 flex items-center justify-center">
+                        
+                        <button type="submit" class="btn-primary w-full flex items-center justify-center">
                             <i class="fas fa-plus-circle mr-2"></i> Add New Device
                         </button>
                     </form>
                 </div>
-
-                <!-- Payment Statistics -->
-                <div class="bg-white rounded-xl shadow-lg p-6">
-                    <h2 class="text-xl font-bold mb-4 text-gray-800">Payment Statistics</h2>
-                    <div class="mb-6">
-                        <div class="flex justify-between mb-1">
-                            <span>Total Revenue</span>
-                            <span id="revenue-stat">₹0</span>
-                        </div>
-                        <div class="h-2 bg-gray-200 rounded-full">
-                            <div class="h-2 bg-green-500 rounded-full" style="width: 0%" id="revenue-bar"></div>
-                        </div>
-                    </div>
-                    <div class="mb-6">
-                        <div class="flex justify-between mb-1">
-                            <span>Avg. Payment</span>
-                            <span id="avg-payment">₹0</span>
-                        </div>
-                        <div class="h-2 bg-gray-200 rounded-full">
-                            <div class="h-2 bg-blue-500 rounded-full" style="width: 0%" id="avg-payment-bar"></div>
-                        </div>
-                    </div>
-                    <div>
-                        <div class="flex justify-between mb-1">
-                            <span>Unpaid Devices</span>
-                            <span id="unpaid-count">0</span>
-                        </div>
-                        <div class="h-2 bg-gray-200 rounded-full">
-                            <div class="h-2 bg-red-500 rounded-full" style="width: 0%" id="unpaid-bar"></div>
-                        </div>
+                
+                <!-- Payment Chart -->
+                <div class="card p-6">
+                    <h2 class="text-xl font-bold text-gray-800 mb-4">Payment Statistics</h2>
+                    <div class="chart-container">
+                        <canvas id="payment-chart"></canvas>
                     </div>
                 </div>
             </div>
-
+            
             <!-- Right Column - Device Table -->
-            <div class="lg:w-2/3">
-                <div class="bg-white rounded-xl shadow-lg p-6">
+            <div class="lg:w-3/5">
+                <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 mb-4 md:mb-0">Registered Devices</h2>
-                        <div class="flex space-x-3 w-full md:w-auto">
-                            <div class="relative w-full md:w-64">
-                                <input type="text" id="search-input" class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Search devices...">
-                                <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
-                            </div>
-                            <button id="export-btn" class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition duration-300 flex items-center">
-                                <i class="fas fa-file-export mr-2"></i> CSV
+                        <h2 class="text-xl font-bold text-gray-800">Registered Devices</h2>
+                        <div class="flex space-x-3 mt-4 md:mt-0 w-full md:w-auto">
+                            <button id="export-btn" class="btn-primary flex items-center">
+                                <i class="fas fa-file-export mr-2"></i> Export CSV
                             </button>
                         </div>
                     </div>
                     
                     <div class="overflow-x-auto">
-                        <table class="min-w-full divide-y divide-gray-200">
+                        <table class="w-full">
                             <thead>
-                                <tr>
-                                    <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">#</th>
-                                    <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">MAC Address</th>
-                                    <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Device Name</th>
-                                    <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">User Name</th>
-                                    <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Paid (₹)</th>
-                                    <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Added Time</th>
-                                    <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
-                                    <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+                                <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 Name</th>
+                                    <th class="pb-3">User Name</th>
+                                    <th class="pb-3">Paid (₹)</th>
+                                    <th class="pb-3">Added Time</th>
+                                    <th class="pb-3">Status</th>
+                                    <th class="pb-3 text-right">Actions</th>
                                 </tr>
                             </thead>
-                            <tbody id="device-table" class="bg-white divide-y divide-gray-200">
+                            <tbody id="device-table" class="device-table">
                                 <!-- Device rows will be populated here -->
                             </tbody>
                         </table>
+                        
+                        <div id="empty-state" class="py-12 text-center">
+                            <div class="mb-4">
+                                <i class="fas fa-inbox text-4xl 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>
+                        </div>
                     </div>
                     
                     <div class="mt-6 flex flex-col sm:flex-row justify-between items-center border-t pt-4">
                         <div class="mb-4 sm:mb-0">
-                            <p class="text-gray-600">Total Paid Amount: <span class="font-bold" id="total-paid">₹0</span></p>
+                            <p class="text-gray-700 font-medium">Total Paid Amount: <span class="text-indigo-600" id="total-paid">₹0</span></p>
                         </div>
                         <div class="flex space-x-2">
-                            <button class="px-4 py-2 border rounded-lg hover:bg-gray-100">Previous</button>
-                            <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">1</button>
-                            <button class="px-4 py-2 border rounded-lg hover:bg-gray-100">Next</button>
+                            <div class="pagination-btn">
+                                <i class="fas fa-chevron-left"></i>
+                            </div>
+                            <div class="pagination-btn active">1</div>
+                            <div class="pagination-btn">2</div>
+                            <div class="pagination-btn">
+                                <i class="fas fa-chevron-right"></i>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
-
-    <!-- Edit Device Modal -->
-    <div id="edit-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
-        <div class="bg-white rounded-xl shadow-lg p-6 w-full max-w-md">
-            <div class="flex justify-between items-center mb-4">
-                <h3 class="text-xl font-bold text-gray-800">Edit Device</h3>
-                <button id="close-modal" class="text-gray-500 hover:text-gray-700">
-                    <i class="fas fa-times"></i>
-                </button>
-            </div>
-            <form id="edit-form" class="space-y-4">
-                <input type="hidden" id="edit-id">
-                <div>
-                    <label class="block text-gray-700 mb-2">MAC Address</label>
-                    <input type="text" id="edit-mac" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" readonly>
-                </div>
-                <div>
-                    <label class="block text-gray-700 mb-2">Device Name</label>
-                    <input type="text" id="edit-device-name" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
-                </div>
-                <div>
-                    <label class="block text-gray-700 mb-2">User Name</label>
-                    <input type="text" id="edit-user-name" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
-                </div>
-                <div>
-                    <label class="block text-gray-700 mb-2">Paid Amount (₹)</label>
-                    <input type="number" id="edit-paid-amount" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
-                </div>
-                <div class="flex space-x-4 pt-2">
-                    <button type="submit" class="flex-1 bg-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-700 transition duration-300">Update</button>
-                    <button type="button" id="cancel-edit" class="flex-1 bg-gray-300 text-gray-700 py-2 rounded-lg hover:bg-gray-400 transition duration-300">Cancel</button>
-                </div>
-            </form>
-        </div>
-    </div>
-
+    
     <script>
         // Initialize device data from localStorage or empty array
         let devices = JSON.parse(localStorage.getItem('networkDevices')) || [];
-        let editDeviceId = null;
-
+        let currentBlockDevice = null;
+        
         // DOM elements
         const deviceForm = document.getElementById('device-form');
         const deviceTable = document.getElementById('device-table');
-        const editModal = document.getElementById('edit-modal');
-        const editForm = document.getElementById('edit-form');
-        const searchInput = document.getElementById('search-input');
+        const emptyState = document.getElementById('empty-state');
+        const blockModal = document.getElementById('block-modal');
+        const searchInput = document.getElementById('global-search');
         const exportBtn = document.getElementById('export-btn');
-
+        
         // Initialize the app
         document.addEventListener('DOMContentLoaded', () => {
             renderDeviceTable();
             updateSummary();
-            attachEventListeners();
+            setupEventListeners();
+            setupCharts();
         });
-
-        // Event listeners
-        function attachEventListeners() {
+        
+        // Setup event listeners
+        function setupEventListeners() {
             deviceForm.addEventListener('submit', addNewDevice);
-            editForm.addEventListener('submit', updateDevice);
-            document.getElementById('close-modal').addEventListener('click', closeEditModal);
-            document.getElementById('cancel-edit').addEventListener('click', closeEditModal);
+            document.querySelectorAll('.close-modal').forEach(btn => {
+                btn.addEventListener('click', () => {
+                    blockModal.classList.remove('active');
+                });
+            });
+            document.getElementById('confirm-block').addEventListener('click', blockDevice);
             searchInput.addEventListener('input', filterDevices);
             exportBtn.addEventListener('click', exportToCSV);
         }
-
+        
         // Add new device
         function addNewDevice(e) {
             e.preventDefault();
@@ -281,12 +526,15 @@
                 isValid = false;
             }
             
-            if (isNaN(paidAmount) {
+            if (isNaN(paidAmount)) {
                 document.getElementById('amount-error').classList.remove('hidden');
                 isValid = false;
             }
             
-            if (!isValid) return;
+            if (!isValid) {
+                showToast('Please fill all fields correctly', 'error');
+                return;
+            }
             
             // Create new device object
             const newDevice = {
@@ -307,52 +555,52 @@
             deviceForm.reset();
             renderDeviceTable();
             updateSummary();
+            setupCharts();
             
             // Show success message
-            showNotification('Device added successfully!', 'success');
+            showToast('Device added successfully!', 'success');
         }
-
+        
         // Render device table
-        function renderDeviceTable(filteredDevices = null) {
-            const devicesToRender = filteredDevices || devices;
+        function renderDeviceTable() {
             deviceTable.innerHTML = '';
             
-            if (devicesToRender.length === 0) {
-                deviceTable.innerHTML = `
-                    <tr>
-                        <td colspan="8" class="px-4 py-8 text-center text-gray-500">
-                            <i class="fas fa-inbox text-4xl mb-2"></i>
-                            <p>No devices found. Add a new device to get started.</p>
-                        </td>
-                    </tr>
-                `;
+            if (devices.length === 0) {
+                emptyState.classList.remove('hidden');
                 return;
             }
             
-            devicesToRender.forEach((device, index) => {
+            emptyState.classList.add('hidden');
+            
+            devices.forEach((device, index) => {
                 const row = document.createElement('tr');
+                row.className = 'py-3 border-b';
                 row.innerHTML = `
-                    <td class="px-4 py-3 whitespace-nowrap">${index + 1}</td>
-                    <td class="px-4 py-3 whitespace-nowrap font-mono">${device.mac}</td>
-                    <td class="px-4 py-3">${device.deviceName}</td>
-                    <td class="px-4 py-3">${device.userName}</td>
-                    <td class="px-4 py-3 font-medium ${device.paidAmount > 0 ? 'text-green-600' : 'text-red-600'}">₹${device.paidAmount}</td>
-                    <td class="px-4 py-3 whitespace-nowrap">${device.addedTime}</td>
-                    <td class="px-4 py-3">
-                        <span class="px-2 py-1 rounded-full text-xs font-medium ${device.status === 'Active' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}">
+                    <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-medium ${device.paidAmount > 0 ? 'text-green-600' : 'text-red-600'}">₹${device.paidAmount}</td>
+                    <td class="py-4 text-sm text-gray-500">${device.addedTime}</td>
+                    <td class="py-4">
+                        <span class="status-badge ${device.status === 'Active' ? 'active-badge' : 'blocked-badge'}">
                             ${device.status}
                         </span>
                     </td>
-                    <td class="px-4 py-3 whitespace-nowrap">
-                        <button class="text-blue-600 hover:text-blue-800 mr-2 edit-btn" data-id="${device.id}">
-                            <i class="fas fa-edit"></i>
-                        </button>
-                        <button class="text-red-600 hover:text-red-800 mr-2 block-btn" data-id="${device.id}">
-                            <i class="fas fa-ban"></i>
-                        </button>
-                        <button class="text-gray-600 hover:text-gray-800 delete-btn" data-id="${device.id}">
-                            <i class="fas fa-trash"></i>
-                        </button>
+                    <td class="py-4 text-right">
+                        <div class="inline-flex space-x-2">
+                            <button class="action-btn edit-btn" data-id="${device.id}">
+                                <i class="fas fa-edit"></i>
+                            </button>
+                            <button class="action-btn block-btn" data-id="${device.id}">
+                                <i class="fas fa-ban"></i>
+                            </button>
+                            <button class="action-btn delete-btn" data-id="${device.id}">
+                                <i class="fas fa-trash"></i>
+                            </button>
+                        </div>
                     </td>
                 `;
                 deviceTable.appendChild(row);
@@ -360,90 +608,118 @@
             
             // Attach event listeners to action buttons
             document.querySelectorAll('.edit-btn').forEach(btn => {
-                btn.addEventListener('click', () => openEditModal(btn.dataset.id));
+                btn.addEventListener('click', () => editDevice(btn.dataset.id));
             });
             
             document.querySelectorAll('.block-btn').forEach(btn => {
-                btn.addEventListener('click', () => blockDevice(btn.dataset.id));
+                btn.addEventListener('click', () => openBlockModal(btn.dataset.id));
             });
             
             document.querySelectorAll('.delete-btn').forEach(btn => {
                 btn.addEventListener('click', () => deleteDevice(btn.dataset.id));
             });
         }
-
+        
         // Update summary stats
         function updateSummary() {
             const totalDevices = devices.length;
             const activeDevices = devices.filter(d => d.status === 'Active').length;
             const blockedDevices = devices.filter(d => d.status === 'Blocked').length;
             const totalRevenue = devices.reduce((sum, device) => sum + device.paidAmount, 0);
-            const unpaidDevices = devices.filter(d => d.paidAmount <= 0).length;
-            const avgPayment = totalDevices > 0 ? totalRevenue / totalDevices : 0;
             
-            // Update dashboard cards
             document.getElementById('total-devices').textContent = totalDevices;
             document.getElementById('active-devices').textContent = activeDevices;
             document.getElementById('blocked-devices').textContent = blockedDevices;
             document.getElementById('total-revenue').textContent = `₹${totalRevenue.toFixed(2)}`;
-            
-            // Update payment stats
-            document.getElementById('revenue-stat').textContent = `₹${totalRevenue.toFixed(2)}`;
-            document.getElementById('avg-payment').textContent = `₹${avgPayment.toFixed(2)}`;
-            document.getElementById('unpaid-count').textContent = unpaidDevices;
             document.getElementById('total-paid').textContent = `₹${totalRevenue.toFixed(2)}`;
+        }
+        
+        // Setup charts
+        function setupCharts() {
+            const ctx = document.getElementById('payment-chart').getContext('2d');
+            
+            // Payment status data
+            const paidDevices = devices.filter(d => d.paidAmount > 0).length;
+            const unpaidDevices = devices.length - paidDevices;
+            
+            // Device status data
+            const activeDevices = devices.filter(d => d.status === 'Active').length;
+            const blockedDevices = devices.filter(d => d.status === 'Blocked').length;
+            
+            // Destroy existing chart if it exists
+            if (window.paymentChart) {
+                window.paymentChart.destroy();
+            }
             
-            // Update progress bars
-            const maxRevenue = Math.max(1000, totalRevenue);
-            document.getElementById('revenue-bar').style.width = `${(totalRevenue / maxRevenue) * 100}%`;
-            document.getElementById('avg-payment-bar').style.width = `${(avgPayment / 500) * 100}%`;
-            document.getElementById('unpaid-bar').style.width = `${(unpaidDevices / totalDevices) * 100 || 0}%`;
+            window.paymentChart = new Chart(ctx, {
+                type: 'doughnut',
+                data: {
+                    labels: ['Paid Devices', 'Unpaid Devices'],
+                    datasets: [{
+                        data: [paidDevices, unpaidDevices],
+                        backgroundColor: ['#10B981', '#EF4444'],
+                        borderWidth: 0,
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            position: 'bottom',
+                            labels: {
+                                usePointStyle: true,
+                                padding: 20
+                            }
+                        }
+                    },
+                    cutout: '65%'
+                }
+            });
         }
-
-        // Open edit modal
-        function openEditModal(deviceId) {
+        
+        // Edit device
+        function editDevice(deviceId) {
             const device = devices.find(d => d.id == deviceId);
             if (!device) return;
             
-            document.getElementById('edit-id').value = device.id;
-            document.getElementById('edit-mac').value = device.mac;
-            document.getElementById('edit-device-name').value = device.deviceName;
-            document.getElementById('edit-user-name').value = device.userName;
-            document.getElementById('edit-paid-amount').value = device.paidAmount;
+            // For simplicity, we'll use prompts
+            const newDeviceName = prompt('Enter new device name:', device.deviceName);
+            if (!newDeviceName) return;
             
-            editModal.classList.remove('hidden');
-        }
-
-        // Close edit modal
-        function closeEditModal() {
-            editModal.classList.add('hidden');
-        }
-
-        // Update device
-        function updateDevice(e) {
-            e.preventDefault();
+            const newUserName = prompt('Enter new user name:', device.userName);
+            if (!newUserName) return;
             
-            const deviceId = document.getElementById('edit-id').value;
-            const device = devices.find(d => d.id == deviceId);
-            if (!device) return;
+            const newPaidAmount = parseFloat(prompt('Enter new paid amount:', device.paidAmount));
+            if (isNaN(newPaidAmount)) {
+                showToast('Invalid amount entered', 'error');
+                return;
+            }
             
-            device.deviceName = document.getElementById('edit-device-name').value.trim();
-            device.userName = document.getElementById('edit-user-name').value.trim();
-            device.paidAmount = parseFloat(document.getElementById('edit-paid-amount').value);
+            device.deviceName = newDeviceName;
+            device.userName = newUserName;
+            device.paidAmount = newPaidAmount;
             
             // Update storage and UI
             localStorage.setItem('networkDevices', JSON.stringify(devices));
             renderDeviceTable();
             updateSummary();
-            closeEditModal();
+            setupCharts();
             
-            // Show success message
-            showNotification('Device updated successfully!', 'success');
+            showToast('Device updated successfully!', 'success');
         }
-
+        
+        // Open block modal
+        function openBlockModal(deviceId) {
+            currentBlockDevice = deviceId;
+            blockModal.classList.add('active');
+        }
+        
         // Block device
-        function blockDevice(deviceId) {
-            const device = devices.find(d => d.id == deviceId);
+        function blockDevice() {
+            if (!currentBlockDevice) return;
+            
+            const device = devices.find(d => d.id == currentBlockDevice);
             if (!device) return;
             
             device.status = device.status === 'Active' ? 'Blocked' : 'Active';
@@ -453,14 +729,14 @@
             renderDeviceTable();
             updateSummary();
             
+            // Close modal
+            blockModal.classList.remove('active');
+            
             // Show notification
             const action = device.status === 'Blocked' ? 'blocked' : 'unblocked';
-            showNotification(`Device has been ${action}`, 'info');
-            
-            // Show alert as requested
-            alert(`Device with MAC ${device.mac} has been ${action}`);
+            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;
@@ -471,11 +747,11 @@
             localStorage.setItem('networkDevices', JSON.stringify(devices));
             renderDeviceTable();
             updateSummary();
+            setupCharts();
             
-            // Show success message
-            showNotification('Device deleted successfully!', 'success');
+            showToast('Device deleted successfully!', 'success');
         }
-
+        
         // Filter devices
         function filterDevices() {
             const searchTerm = searchInput.value.toLowerCase();
@@ -491,13 +767,72 @@
                 device.userName.toLowerCase().includes(searchTerm)
             );
             
-            renderDeviceTable(filtered);
+            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) => {
+                const row = document.createElement('tr');
+                row.className = 'py-3 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-medium ${device.paidAmount > 0 ? 'text-green-600' : 'text-red-600'}">₹${device.paidAmount}</td>
+                    <td class="py-4 text-sm text-gray-500">${device.addedTime}</td>
+                    <td class="py-4">
+                        <span class="status-badge ${device.status === 'Active' ? 'active-badge' : 'blocked-badge'}">
+                            ${device.status}
+                        </span>
+                    </td>
+                    <td class="py-4 text-right">
+                        <div class="inline-flex space-x-2">
+                            <button class="action-btn edit-btn" data-id="${device.id}">
+                                <i class="fas fa-edit"></i>
+                            </button>
+                            <button class="action-btn block-btn" data-id="${device.id}">
+                                <i class="fas fa-ban"></i>
+                            </button>
+                            <button class="action-btn delete-btn" data-id="${device.id}">
+                                <i class="fas fa-trash"></i>
+                            </button>
+                        </div>
+                    </td>
+                `;
+                deviceTable.appendChild(row);
+            });
+            
+            // Reattach event listeners
+            document.querySelectorAll('.edit-btn').forEach(btn => {
+                btn.addEventListener('click', () => editDevice(btn.dataset.id));
+            });
+            
+            document.querySelectorAll('.block-btn').forEach(btn => {
+                btn.addEventListener('click', () => openBlockModal(btn.dataset.id));
+            });
+            
+            document.querySelectorAll('.delete-btn').forEach(btn => {
+                btn.addEventListener('click', () => deleteDevice(btn.dataset.id));
+            });
+        }
+        
         // Export to CSV
         function exportToCSV() {
             if (devices.length === 0) {
-                showNotification('No devices to export', 'warning');
+                showToast('No devices to export', 'warning');
                 return;
             }
             
@@ -520,9 +855,9 @@
             link.click();
             document.body.removeChild(link);
             
-            showNotification('CSV exported successfully!', 'success');
+            showToast('CSV exported successfully!', 'success');
         }
-
+        
         // Helper functions
         function isValidMAC(mac) {
             // Simple MAC validation
@@ -539,9 +874,59 @@
             return devices.some(d => d.mac === formattedMAC);
         }
         
-        function showNotification(message, type) {
-            // In a real app, this would show a toast notification
-            alert(`${type.toUpperCase()}: ${message}`);
+        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 if empty
+        if (devices.length === 0) {
+            devices = [
+                {
+                    id: 1,
+                    mac: 'AA:BB:CC:DD:EE:FF',
+                    deviceName: 'John\'s iPhone',
+                    userName: 'John Smith',
+                    paidAmount: 500,
+                    addedTime: new Date().toLocaleString(),
+                    status: 'Active'
+                },
+                {
+                    id: 2,
+                    mac: '11:22:33:44:55:66',
+                    deviceName: 'Office Printer',
+                    userName: 'Office Admin',
+                    paidAmount: 0,
+                    addedTime: new Date().toLocaleString(),
+                    status: 'Active'
+                },
+                {
+                    id: 3,
+                    mac: 'FF:EE:DD:CC:BB:AA',
+                    deviceName: 'Sarah\'s Laptop',
+                    userName: 'Sarah Johnson',
+                    paidAmount: 750,
+                    addedTime: new Date().toLocaleString(),
+                    status: 'Blocked'
+                }
+            ];
+            localStorage.setItem('networkDevices', JSON.stringify(devices));
         }
     </script>
 </body>