ui: major UX polish and bug fixes for dashboard

- Added global loading spinner and page transitions.
- Improved sidebar with tooltips and persistent collapsed state.
- Fixed chart memory leaks by properly destroying instances on page change.
- Unified WebSocket event handling and status indicators.
- Refined stat cards, tables, and modal interactions.
- Added real backend integration for logout and session management.

static/index.html

@@ -54,7 +54,7 @@
         <nav class="sidebar">
             <div class="sidebar-header">
                 <div class="logo">
-                    <i class="fas fa-robot"></i>
+                    <i class="fas fa-shield-alt"></i>
                     <span>LLM Proxy</span>
                 </div>
                 <button class="sidebar-toggle" id="sidebar-toggle">
@@ -65,15 +65,15 @@
             <div class="sidebar-menu">
                 <div class="menu-section">
                     <h3 class="menu-title">MAIN</h3>
-                    <a href="#overview" class="menu-item active" data-page="overview">
-                        <i class="fas fa-tachometer-alt"></i>
+                    <a href="#overview" class="menu-item active" data-page="overview" data-tooltip="Dashboard Overview">
+                        <i class="fas fa-th-large"></i>
                         <span>Overview</span>
                     </a>
-                    <a href="#analytics" class="menu-item" data-page="analytics">
+                    <a href="#analytics" class="menu-item" data-page="analytics" data-tooltip="Usage Analytics">
                         <i class="fas fa-chart-line"></i>
                         <span>Analytics</span>
                     </a>
-                    <a href="#costs" class="menu-item" data-page="costs">
+                    <a href="#costs" class="menu-item" data-page="costs" data-tooltip="Cost Tracking">
                         <i class="fas fa-dollar-sign"></i>
                         <span>Cost Management</span>
                     </a>
@@ -81,15 +81,15 @@
                 
                 <div class="menu-section">
                     <h3 class="menu-title">MANAGEMENT</h3>
-                    <a href="#clients" class="menu-item" data-page="clients">
+                    <a href="#clients" class="menu-item" data-page="clients" data-tooltip="API Clients">
                         <i class="fas fa-users"></i>
                         <span>Client Management</span>
                     </a>
-                    <a href="#providers" class="menu-item" data-page="providers">
+                    <a href="#providers" class="menu-item" data-page="providers" data-tooltip="Model Providers">
                         <i class="fas fa-server"></i>
                         <span>Providers</span>
                     </a>
-                    <a href="#monitoring" class="menu-item" data-page="monitoring">
+                    <a href="#monitoring" class="menu-item" data-page="monitoring" data-tooltip="Live Monitoring">
                         <i class="fas fa-heartbeat"></i>
                         <span>Real-time Monitoring</span>
                     </a>
@@ -97,12 +97,12 @@
                 
                 <div class="menu-section">
                     <h3 class="menu-title">SYSTEM</h3>
-                    <a href="#settings" class="menu-item" data-page="settings">
+                    <a href="#settings" class="menu-item" data-page="settings" data-tooltip="System Settings">
                         <i class="fas fa-cog"></i>
                         <span>Settings</span>
                     </a>
-                    <a href="#logs" class="menu-item" data-page="logs">
-                        <i class="fas fa-file-alt"></i>
+                    <a href="#logs" class="menu-item" data-page="logs" data-tooltip="System Logs">
+                        <i class="fas fa-list-alt"></i>
                         <span>System Logs</span>
                     </a>
                 </div>
@@ -118,7 +118,7 @@
                         <span class="user-role">Super Admin</span>
                     </div>
                 </div>
-                <button class="logout-btn" id="logout-btn">
+                <button class="logout-btn" id="logout-btn" title="Logout">
                     <i class="fas fa-sign-out-alt"></i>
                 </button>
             </div>
@@ -132,11 +132,11 @@
                     <h1 class="page-title" id="page-title">Dashboard Overview</h1>
                 </div>
                 <div class="nav-right">
-                    <div class="nav-item">
-                        <i class="fas fa-bell"></i>
-                        <span class="badge">3</span>
+                    <div class="nav-item" id="ws-status-nav" title="WebSocket Connection Status">
+                        <div class="ws-dot"></div>
+                        <span class="ws-text">Connecting...</span>
                     </div>
-                    <div class="nav-item">
+                    <div class="nav-item" title="Refresh Current Page">
                         <i class="fas fa-sync-alt" id="refresh-btn"></i>
                     </div>
                     <div class="nav-item">
@@ -147,17 +147,16 @@
 
             <!-- Page Content -->
             <div class="page-content" id="page-content">
-                <!-- Overview page will be loaded here -->
+                <!-- Dynamic content container -->
+            </div>
+            
+            <!-- Global Spinner -->
+            <div class="spinner-container">
+                <div class="spinner"></div>
             </div>
         </main>
     </div>
 
-    <!-- WebSocket Status Indicator -->
-    <div class="ws-status" id="ws-status">
-        <span class="ws-dot"></span>
-        <span class="ws-text">Connecting...</span>
-    </div>
-
     <!-- Scripts -->
     <script src="/js/api.js"></script>
     <script src="/js/auth.js"></script>