Update public/dashboard.html

public/dashboard.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>DashX - Modern API Dashboard</title>
-    <meta name="description" content="DashX is a modern REST API dashboard platform that allows you to manage, monitor, and utilize various API tools with ease. Fully featured for developers with an intuitive interface and powerful analytics.">
+    <meta name="description" content="DashX is a modern REST API dashboard platform that allows you to manage, monitor, and utilize various API tools with ease.">
     <meta name="keywords" content="API Dashboard, REST API, DashX, API Management, Developer Tools, API Analytics">
     <meta name="author" content="DashX Team">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
@@ -12,850 +12,87 @@
     <link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.10.8/sweetalert2.min.css" rel="stylesheet">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
     <link href="styles.css" rel="stylesheet">
+    <link href="mobile-styles.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
-    <style>
-        i.fas, i.fa, i.far, i.fab, i.fal, 
-        .fas, .fa, .far, .fab, .fal,
-        i[class*="fa-"] {
-            font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "FontAwesome" !important;
-            font-weight: 900 !important;
-            font-style: normal !important;
-            font-variant: normal !important;
-            text-rendering: auto !important;
-            line-height: 1 !important;
-            -webkit-font-smoothing: antialiased !important;
-            -moz-osx-font-smoothing: grayscale !important;
-            display: inline-block !important;
-        }
-
-            .stat-item {
-    text-align: center;
-    padding: 1.5rem;
-    background: rgba(255, 255, 255, 0.05);
-    border-radius: 12px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.stat-item .stat-value {
-    display: block;
-    font-size: 1.8rem;
-    font-weight: 700;
-    color: rgba(133, 48, 48, 0.9);
-    margin-bottom: 0.5rem;
-}
-
-.stat-item .stat-label {
-    display: block;
-    font-size: 0.9rem;
-    color: rgba(255, 255, 255, 0.7);
-}
-
-        .stat-icon {
-            font-size: 3rem !important;
-            color: rgba(255, 168, 168, 0.9) !important;
-            min-width: 80px !important;
-            text-align: center !important;
-            display: flex !important;
-            align-items: center !important;
-            justify-content: center !important;
-        }
-
-        .stat-icon i {
-            font-size: 3rem !important;
-            display: block !important;
-        }
-
-        .stat-info {
-            flex: 1;
-        }
-
-        .stat-number {
-            font-size: 2rem;
-            font-weight: 700;
-            color: rgba(255, 255, 255, 0.9);
-            margin-bottom: 0.25rem;
-            word-break: break-all;
-        }
-
-        .stat-label {
-            font-size: 0.9rem;
-            color: rgba(255, 255, 255, 0.7);
-        }
-
-        .section h2 i {
-            color: #e74c3c !important;
-        }
-
-        .navbar {
-            background: rgba(44, 62, 80, 0.95) !important;
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
-        }
-
-        .navbar-brand {
-            font-size: 1.5rem;
-            font-weight: 700;
-            color: #fff !important;
-        }
-
-        .navbar-brand i {
-            color: #e74c3c;
-            font-size: 1.8rem;
-            margin-right: 0.5rem;
-        }
-
-        .nav-link {
-            color: #ecf0f1 !important;
-            font-weight: 500;
-            transition: all 0.3s ease;
-            padding: 0.5rem 1rem !important;
-            border-radius: 8px;
-            margin: 0 0.25rem;
-        }
-
-        .nav-link:hover {
-            background: rgba(255, 255, 255, 0.1);
-            transform: translateY(-1px);
-        }
-
-        .nav-link.text-danger {
-            color: #e74c3c !important;
-        }
-
-        .nav-link.text-danger:hover {
-            background: rgba(231, 76, 60, 0.1);
-            color: #ff6b6b !important;
-        }
-
-        .glassmorphism {
-            background: rgba(255, 255, 255, 0.1);
-            backdrop-filter: blur(10px);
-            -webkit-backdrop-filter: blur(10px);
-            border: 1px solid rgba(255, 255, 255, 0.2);
-            border-radius: 16px;
-            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-        }
-
-        .reset-timer-card {
-            margin-top: 2rem;
-            padding: 1.5rem;
-            border-radius: 12px;
-            background: rgba(255, 255, 255, 0.05);
-            backdrop-filter: blur(10px);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-        }
-
-        .timer-header {
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-            margin-bottom: 1rem;
-        }
-
-        .timer-header i {
-            font-size: 1.5rem;
-            color: #853030;
-        }
-
-        .timer-header h3 {
-            margin: 0;
-            font-size: 1.2rem;
-            color: rgba(255, 255, 255, 0.9);
-        }
-
-        .timer-header p {
-            margin: 0;
-            opacity: 0.7;
-            font-size: 0.9rem;
-        }
-
-        .countdown-display {
-            text-align: center;
-            padding: 2rem 1rem;
-        }
-
-        .countdown-time {
-            font-size: 3rem;
-            font-weight: bold;
-            color: #853030;
-            font-family: 'Courier New', monospace;
-            letter-spacing: 0.1em;
-            text-shadow: 0 0 20px rgba(133, 48, 48, 0.3);
-        }
-
-        .countdown-label {
-            margin-top: 0.5rem;
-            opacity: 0.6;
-            font-size: 0.9rem;
-            color: rgba(255, 255, 255, 0.8);
-        }
-
-        .reset-progress-container {
-            width: 100%;
-            height: 8px;
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 4px;
-            overflow: hidden;
-            margin-top: 1rem;
-        }
-
-        .reset-progress {
-            height: 100%;
-            background: linear-gradient(90deg, #853030, #ff6b6b);
-            transition: width 1s linear;
-            width: 0%;
-            box-shadow: 0 0 10px rgba(133, 48, 48, 0.5);
-        }
-
-        .reset-info {
-            margin-top: 1rem;
-            padding: 1rem;
-            background: rgba(255, 255, 255, 0.05);
-            border-radius: 8px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-
-        .reset-info i {
-            color: #853030;
-            margin-right: 0.5rem;
-        }
-
-        .reset-info span {
-            font-size: 0.9rem;
-            color: rgba(255, 255, 255, 0.8);
-        }
-
-        .reset-info div:last-child {
-            font-weight: bold;
-            color: #853030;
-        }
-
-        @keyframes pulse {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.7; }
-        }
-
-        .reset-countdown {
-            animation: pulse 2s ease-in-out infinite;
-        }
-
-        .usage-overview {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-            gap: 1.5rem;
-            margin-top: 1rem;
-        }
-
-        .usage-section {
-            background: rgba(255, 255, 255, 0.05);
-            backdrop-filter: blur(10px);
-            -webkit-backdrop-filter: blur(10px);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            padding: 1.5rem;
-            border-radius: 16px;
-            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
-            transition: all 0.3s ease;
-        }
-
-        .usage-section:hover {
-            background: rgba(255, 255, 255, 0.08);
-            transform: translateY(-2px);
-            box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.3);
-        }
-
-        .usage-section h4 {
-            margin-bottom: 1rem;
-            color: rgba(255, 255, 255, 0.9);
-            font-size: 1.1rem;
-            font-weight: 600;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
-
-        .usage-section h4 i {
-            color: rgba(133, 48, 48, 0.8);
-        }
-
-        .endpoint-list, .ip-list {
-            display: flex;
-            flex-direction: column;
-            gap: 0.5rem;
-        }
-
-        .endpoint-item, .ip-item {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 0.75rem;
-            background: rgba(255, 255, 255, 0.08);
-            backdrop-filter: blur(5px);
-            border-radius: 8px;
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            transition: all 0.3s ease;
-        }
-
-        .endpoint-item:hover, .ip-item:hover {
-            background: rgba(255, 255, 255, 0.12);
-            transform: translateX(4px);
-        }
-
-        .endpoint-name, .ip-address {
-            font-family: 'Courier New', monospace;
-            font-weight: 500;
-            color: rgba(255, 255, 255, 0.8);
-            font-size: 0.9rem;
-        }
-
-        .endpoint-count, .ip-count {
-            color: rgba(133, 48, 48, 0.9);
-            font-weight: 600;
-            background: rgba(133, 48, 48, 0.1);
-            padding: 0.25rem 0.5rem;
-            border-radius: 12px;
-            font-size: 0.8rem;
-        }
-
-        .ip-time {
-            font-size: 0.75rem;
-            color: rgba(255, 255, 255, 0.6);
-            font-style: italic;
-        }
-
-        .daily-usage {
-            display: flex;
-            flex-direction: column;
-            gap: 0.75rem;
-        }
-
-        .usage-day {
-            display: grid;
-            grid-template-columns: 70px 1fr 50px;
-            align-items: center;
-            gap: 1rem;
-            padding: 0.5rem;
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-
-        .usage-day:hover {
-            background: rgba(255, 255, 255, 0.05);
-        }
-
-        .usage-date {
-            font-size: 0.85rem;
-            font-weight: 500;
-            color: rgba(255, 255, 255, 0.8);
-        }
-
-        .usage-bar-container {
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 10px;
-            height: 8px;
-            overflow: hidden;
-            position: relative;
-        }
-
-        .usage-bar {
-            height: 100%;
-            background: linear-gradient(90deg, rgba(133, 48, 48, 0.8), rgba(166, 69, 69, 0.9));
-            border-radius: 10px;
-            transition: width 0.6s ease;
-            position: relative;
-        }
-
-        .usage-bar::after {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
-            animation: shimmer 2s infinite;
-        }
-
-        @keyframes shimmer {
-            0% { transform: translateX(-100%); }
-            100% { transform: translateX(100%); }
-        }
-
-        .usage-count {
-            font-size: 0.85rem;
-            font-weight: 600;
-            color: rgba(133, 48, 48, 0.9);
-            text-align: center;
-        }
-
-        .no-data {
-            text-align: center;
-            padding: 2rem;
-            color: rgba(255, 255, 255, 0.5);
-            font-style: italic;
-        }
-
-        .no-data-state, .error-state {
-            text-align: center;
-            padding: 3rem 2rem;
-            color: rgba(255, 255, 255, 0.6);
-        }
-
-        .error-state i {
-            color: #ff6b6b;
-            font-size: 2.5rem;
-            margin-bottom: 1rem;
-        }
-
-        .search-container {
-            margin-bottom: 2rem;
-            position: relative;
-        }
-
-        .search-input {
-            width: 100%;
-            padding: 1rem 1rem 1rem 3rem;
-            border: 1px solid rgba(255, 255, 255, 0.2);
-            border-radius: 16px;
-            background: rgba(255, 255, 255, 0.05);
-            backdrop-filter: blur(10px);
-            font-size: 1rem;
-            transition: all 0.3s ease;
-            color: rgba(255, 255, 255, 0.9);
-        }
-
-        .search-input::placeholder {
-            color: rgba(255, 255, 255, 0.5);
-        }
-
-        .search-input:focus {
-            outline: none;
-            border-color: rgba(133, 48, 48, 0.8);
-            background: rgba(255, 255, 255, 0.08);
-            box-shadow: 0 0 0 3px rgba(133, 48, 48, 0.1);
-        }
-
-        .search-icon {
-            position: absolute;
-            left: 1rem;
-            top: 50%;
-            transform: translateY(-50%);
-            color: rgba(133, 48, 48, 0.8);
-            font-size: 1.2rem;
-        }
-
-        .plugin-card {
-            background: rgba(255, 255, 255, 0.05);
-            backdrop-filter: blur(10px);
-            -webkit-backdrop-filter: blur(10px);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            border-radius: 16px;
-            overflow: hidden;
-            transition: all 0.3s ease;
-            margin-bottom: 1rem;
-        }
-
-        .plugin-card:hover {
-            background: rgba(255, 255, 255, 0.08);
-            transform: translateY(-2px);
-            box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.3);
-        }
-
-        .plugin-info {
-            margin-top: 0.5rem;
-            font-size: 0.85rem;
-        }
-
-        .limit-info {
-            background: rgba(133, 48, 48, 0.1);
-            color: #853030;
-            padding: 0.25rem 0.5rem;
-            border-radius: 4px;
-            font-weight: 500;
-        }
-
-        .user-item {
-            background: rgba(255, 255, 255, 0.05);
-            backdrop-filter: blur(10px);
-            -webkit-backdrop-filter: blur(10px);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            padding: 1.5rem;
-            border-radius: 16px;
-            margin-bottom: 1rem;
-            display: flex;
-            justify-content: space-between;
-            align-items: flex-start;
-            transition: all 0.3s ease;
-        }
-
-        .user-item:hover {
-            background: rgba(255, 255, 255, 0.08);
-            transform: translateY(-2px);
-            box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.3);
-        }
-
-        .user-item.temp-banned {
-            border-left: 4px solid rgba(255, 193, 7, 0.8);
-            background: rgba(255, 193, 7, 0.05);
-        }
-
-        .user-item.banned {
-            border-left: 4px solid rgba(220, 53, 69, 0.8);
-            background: rgba(220, 53, 69, 0.05);
-        }
-
-        .user-info {
-            flex: 1;
-        }
-
-        .user-name {
-            font-size: 1.2rem;
-            font-weight: 600;
-            color: rgba(255, 255, 255, 0.9);
-            margin-bottom: 0.5rem;
-        }
-
-        .user-details {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 0.75rem;
-            margin-bottom: 0.75rem;
-        }
-
-        .user-email {
-            color: rgba(255, 255, 255, 0.7);
-            font-size: 0.9rem;
-        }
-
-        .user-role {
-            background: rgba(255, 255, 255, 0.1);
-            backdrop-filter: blur(5px);
-            color: rgba(255, 255, 255, 0.8);
-            padding: 0.25rem 0.75rem;
-            border-radius: 12px;
-            font-size: 0.8rem;
-            font-weight: 500;
-            border: 1px solid rgba(255, 255, 255, 0.1);
-        }
-
-        .premium-badge {
-            background: linear-gradient(45deg, rgba(255, 215, 0, 0.3), rgba(255, 237, 78, 0.3));
-            backdrop-filter: blur(5px);
-            color: rgba(255, 215, 0, 1);
-            padding: 0.25rem 0.75rem;
-            border-radius: 12px;
-            font-size: 0.8rem;
-            font-weight: 600;
-            border: 1px solid rgba(255, 215, 0, 0.3);
-            box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
-        }
-
-        .user-stats {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 1rem;
-            font-size: 0.85rem;
-            color: rgba(255, 255, 255, 0.7);
-            margin-bottom: 0.75rem;
-        }
-
-        .ban-info {
-            background: rgba(255, 193, 7, 0.1);
-            backdrop-filter: blur(5px);
-            border: 1px solid rgba(255, 193, 7, 0.3);
-            padding: 0.75rem;
-            border-radius: 8px;
-            font-size: 0.85rem;
-            color: rgba(255, 193, 7, 0.9);
-            margin-top: 0.5rem;
-        }
-
-        .user-actions {
-            display: flex;
-            gap: 0.5rem;
-            flex-wrap: wrap;
-        }
-
-        .pagination-controls {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 1rem;
-            margin-top: 1rem;
-            background: rgba(255, 255, 255, 0.05);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid rgba(255, 255, 255, 0.1);
-        }
-
-        .page-info {
-            color: rgba(255, 255, 255, 0.8);
-            font-weight: 500;
-        }
-
-        .users-pagination-info {
-            color: rgba(255, 255, 255, 0.6);
-            font-size: 0.9rem;
-            margin-bottom: 1rem;
-            text-align: center;
-            padding: 0.5rem;
-            background: rgba(255, 255, 255, 0.05);
-            border-radius: 8px;
-            backdrop-filter: blur(5px);
-        }
-
-        .btn {
-            padding: 0.5rem 1rem;
-            border: none;
-            border-radius: 8px;
-            font-weight: 500;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            text-decoration: none;
-            display: inline-flex;
-            align-items: center;
-            gap: 0.5rem;
-            font-size: 0.9rem;
-            backdrop-filter: blur(10px);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-        }
-
-        .btn:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-            transform: none !important;
-        }
-
-        .btn-primary {
-            background: rgba(133, 48, 48, 0.8);
-            color: white;
-            border: 1px solid rgba(133, 48, 48, 0.3);
-        }
-
-        .btn-primary:hover:not(:disabled) {
-            background: rgba(133, 48, 48, 1);
-            transform: translateY(-1px);
-            box-shadow: 0 4px 12px rgba(133, 48, 48, 0.3);
-        }
-
-        .btn-secondary {
-            background: rgba(108, 117, 125, 0.8);
-            color: white;
-            border: 1px solid rgba(108, 117, 125, 0.3);
-        }
-
-        .btn-secondary:hover:not(:disabled) {
-            background: rgba(108, 117, 125, 1);
-            transform: translateY(-1px);
-        }
-
-        .btn-warning {
-            background: rgba(255, 193, 7, 0.8);
-            color: rgba(133, 100, 4, 1);
-            border: 1px solid rgba(255, 193, 7, 0.3);
-        }
-
-        .btn-warning:hover:not(:disabled) {
-            background: rgba(255, 193, 7, 1);
-            transform: translateY(-1px);
-            box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
-        }
-
-        .btn-success {
-            background: rgba(40, 167, 69, 0.8);
-            color: white;
-            border: 1px solid rgba(40, 167, 69, 0.3);
-        }
-
-        .btn-success:hover:not(:disabled) {
-            background: rgba(40, 167, 69, 1);
-            transform: translateY(-1px);
-            box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
-        }
-
-        .btn-danger {
-            background: rgba(220, 53, 69, 0.8);
-            color: white;
-            border: 1px solid rgba(220, 53, 69, 0.3);
-        }
-
-        .btn-danger:hover:not(:disabled) {
-            background: rgba(220, 53, 69, 1);
-            transform: translateY(-1px);
-            box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
-        }
-
-        .no-users-state {
-            text-align: center;
-            padding: 3rem;
-            color: rgba(255, 255, 255, 0.6);
-        }
-
-        .admin-card {
-            background: rgba(255, 255, 255, 0.05);
-            backdrop-filter: blur(10px);
-            -webkit-backdrop-filter: blur(10px);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            border-radius: 16px;
-            padding: 2rem;
-            margin-bottom: 2rem;
-            transition: all 0.3s ease;
-        }
-
-        .admin-card:hover {
-            background: rgba(255, 255, 255, 0.08);
-            transform: translateY(-2px);
-            box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.3);
-        }
-
-        .admin-card h3 {
-            color: rgba(255, 255, 255, 0.9);
-            margin-bottom: 1.5rem;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
-
-        .admin-card h3 i {
-            color: rgba(133, 48, 48, 0.8);
-        }
-
-        .stats-cards {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-            gap: 1.5rem;
-            margin-bottom: 2rem;
-        }
-
-        .stat-card {
-            background: rgba(255, 255, 255, 0.05);
-            backdrop-filter: blur(10px);
-            -webkit-backdrop-filter: blur(10px);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            padding: 2rem;
-            border-radius: 16px;
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-            transition: all 0.3s ease;
-        }
-
-        .stat-card:hover {
-            background: rgba(255, 255, 255, 0.08);
-            transform: translateY(-3px);
-            box-shadow: 0 15px 50px 0 rgba(31, 38, 135, 0.4);
-        }
-
-        .form-row {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            gap: 1rem;
-            margin-bottom: 1.5rem;
-        }
-
-        .form-group {
-            display: flex;
-            flex-direction: column;
-        }
-
-        .form-group label {
-            color: rgba(255, 255, 255, 0.9);
-            margin-bottom: 0.5rem;
-            font-weight: 500;
-            font-size: 0.9rem;
-        }
-
-        .form-group .required {
-            color: #ff6b6b;
-            margin-left: 0.25rem;
-        }
-
-        .form-group input,
-        .form-group select {
-            padding: 0.75rem;
-            border: 1px solid rgba(255, 255, 255, 0.2);
-            border-radius: 8px;
-            background: rgba(255, 255, 255, 0.05);
-            color: rgba(255, 255, 255, 0.9);
-            font-size: 0.95rem;
-            transition: all 0.3s ease;
-        }
-
-        .form-group input:focus,
-        .form-group select:focus {
-            outline: none;
-            border-color: rgba(133, 48, 48, 0.8);
-            background: rgba(255, 255, 255, 0.08);
-            box-shadow: 0 0 0 3px rgba(133, 48, 48, 0.1);
-        }
-
-        .form-group input::placeholder {
-            color: rgba(255, 255, 255, 0.4);
-        }
-
-        .form-group small {
-            color: rgba(255, 255, 255, 0.5);
-            font-size: 0.8rem;
-            margin-top: 0.25rem;
-        }
-
-        @media (max-width: 768px) {
-            .countdown-time {
-                font-size: 2rem;
-            }
-
-            .reset-timer-card {
-                padding: 1rem;
-            }
-
-            .usage-overview {
-                grid-template-columns: 1fr;
-            }
-
-            .usage-day {
-                grid-template-columns: 60px 1fr 40px;
-                gap: 0.5rem;
-            }
-
-            .user-item {
-                flex-direction: column;
-                gap: 1rem;
-            }
-
-            .user-actions {
-                width: 100%;
-                justify-content: flex-end;
-            }
-
-            .pagination-controls {
-                flex-direction: column;
-                gap: 1rem;
-            }
-
-            .dashboard-container {
-                flex-direction: column;
-            }
-
-            .sidebar {
-                width: 100%;
-                position: static;
-                height: auto;
-            }
-
-            .form-row {
-                grid-template-columns: 1fr;
-            }
-
-            .stats-cards {
-                grid-template-columns: 1fr;
-            }
-        }
-    </style>
 </head>
 <body>
+    <div class="mobile-header">
+        <div class="mobile-header-content">
+            <div class="mobile-header-left">
+                <button class="hamburger-btn" onclick="toggleDrawer()">
+                    <i class="fas fa-bars"></i>
+                </button>
+                <div class="mobile-logo">
+                    <i class="fas fa-bolt"></i> DashX
+                </div>
+            </div>
+            <div class="mobile-avatar">
+                <i class="fas fa-user"></i>
+            </div>
+        </div>
+    </div>
+    
+    <div class="drawer-overlay" onclick="toggleDrawer()"></div>
+    
+    <div class="sidebar-drawer">
+        <div class="drawer-header">
+            <h3>Menu</h3>
+            <button class="drawer-close" onclick="toggleDrawer()">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+        <div class="drawer-menu">
+            <div class="drawer-section-title">Dashboard</div>
+            <a href="#overview" class="drawer-menu-item active" onclick="navigateTo('overview')">
+                <i class="fas fa-chart-line"></i>
+                <span>Overview</span>
+            </a>
+            <a href="#api-stats" class="drawer-menu-item" onclick="navigateTo('api-stats')">
+                <i class="fas fa-chart-area"></i>
+                <span>API Stats</span>
+            </a>
+            <a href="#server-stats" class="drawer-menu-item" onclick="navigateTo('server-stats')">
+                <i class="fas fa-server"></i>
+                <span>Server Stats</span>
+            </a>
+            
+            <div class="drawer-section-title">API Features</div>
+            <a href="#plugins" class="drawer-menu-item" onclick="navigateTo('plugins')">
+                <i class="fas fa-plug"></i>
+                <span>API Plugins</span>
+            </a>
+            
+            <div class="drawer-section-title">Account</div>
+            <a href="#events" class="drawer-menu-item" onclick="navigateTo('events')">
+                <i class="fas fa-calendar"></i>
+                <span>Events</span>
+            </a>
+            <a href="#settings" class="drawer-menu-item" onclick="navigateTo('settings')">
+                <i class="fas fa-cog"></i>
+                <span>Settings</span>
+            </a>
+            
+            <div id="adminDrawerMenu" style="display: none;">
+                <div class="drawer-section-title">Admin</div>
+                <a href="#management" class="drawer-menu-item" onclick="navigateTo('management')">
+                    <i class="fas fa-users-cog"></i>
+                    <span>Management</span>
+                </a>
+            </div>
+            
+            <div class="drawer-footer">
+                <a href="/profile" class="drawer-menu-item">
+                    <i class="fas fa-user"></i>
+                    <span>Profile</span>
+                </a>
+                <a href="#" class="drawer-menu-item" onclick="logout()" style="color: #e74c3c;">
+                    <i class="fas fa-sign-out-alt"></i>
+                    <span>Logout</span>
+                </a>
+            </div>
+        </div>
+    </div>
+
     <nav class="navbar navbar-expand-lg navbar-dark">
         <div class="container">
             <a class="navbar-brand" href="/">
@@ -867,7 +104,7 @@
             <div class="collapse navbar-collapse" id="navbarNav">
                 <ul class="navbar-nav ms-auto">
                     <li class="nav-item">
-                        <a class="nav-link" href="/profile" onclick="goToProfile()">
+                        <a class="nav-link" href="/profile">
                             <i class="fas fa-user"></i> Profile
                         </a>
                     </li>
@@ -894,7 +131,7 @@
                     <i class="fas fa-plug"></i> API Plugins
                 </a>
                 <a href="#server-stats" class="menu-item" onclick="showSection('server-stats')">
-    <i class="fas fa-server"></i> Server Stats
+                    <i class="fas fa-server"></i> Server Stats
                 </a>
                 <a href="#events" class="menu-item" onclick="showSection('events')">
                     <i class="fas fa-calendar"></i> Events
@@ -916,308 +153,88 @@
                 <div class="stats-cards">
                     <div class="stat-card">
                         <div class="stat-icon">
-                            <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/svgs/solid/key.svg" alt="key" style="width: 3rem; height: 3rem; filter: invert(78%) sepia(45%) saturate(548%) hue-rotate(314deg) brightness(101%) contrast(101%);">
-                        </div>
-                        <div class="stat-info">
-                            <div class="stat-number" id="userApiKey">Loading...</div>
-                            <div class="stat-label">API Key</div>
+                            <i class="fas fa-key"></i>
                         </div>
+                        <div class="stat-number" id="userApiKey">Loading...</div>
+                        <div class="stat-label">API Key</div>
                     </div>
                     <div class="stat-card">
                         <div class="stat-icon">
-                            <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/svgs/solid/chart-pie.svg" alt="chart" style="width: 3rem; height: 3rem; filter: invert(78%) sepia(45%) saturate(548%) hue-rotate(314deg) brightness(101%) contrast(101%);">
-                        </div>
-                        <div class="stat-info">
-                            <div class="stat-number" id="userRequests">0</div>
-                            <div class="stat-label">Total Requests</div>
+                            <i class="fas fa-chart-pie"></i>
                         </div>
+                        <div class="stat-number" id="userRequests">0</div>
+                        <div class="stat-label">Total Requests</div>
                     </div>
                     <div class="stat-card">
                         <div class="stat-icon">
-                            <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/svgs/solid/cloud.svg" alt="cloud" style="width: 3rem; height: 3rem; filter: invert(78%) sepia(45%) saturate(548%) hue-rotate(314deg) brightness(101%) contrast(101%);">
-                        </div>
-                        <div class="stat-info">
-                            <div class="stat-number" id="userRequestsToday">0</div>
-                            <div class="stat-label">Today's Requests</div>
+                            <i class="fas fa-cloud"></i>
                         </div>
+                        <div class="stat-number" id="userRequestsToday">0</div>
+                        <div class="stat-label">Today's Requests</div>
                     </div>
                     <div class="stat-card">
                         <div class="stat-icon">
-                            <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/svgs/solid/gauge-high.svg" alt="gauge" style="width: 3rem; height: 3rem; filter: invert(78%) sepia(45%) saturate(548%) hue-rotate(314deg) brightness(101%) contrast(101%);">
-                        </div>
-                        <div class="stat-info">
-                            <div class="stat-number" id="userLimit">30</div>
-                            <div class="stat-label">Daily Limit</div>
+                            <i class="fas fa-gauge-high"></i>
                         </div>
+                        <div class="stat-number" id="userLimit">30</div>
+                        <div class="stat-label">Daily Limit</div>
                     </div>
                     <div class="stat-card">
                         <div class="stat-icon">
-                            <img src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/svgs/solid/battery-three-quarters.svg" alt="battery" style="width: 3rem; height: 3rem; filter: invert(78%) sepia(45%) saturate(548%) hue-rotate(314deg) brightness(101%) contrast(101%);">
-                        </div>
-                        <div class="stat-info">
-                            <div class="stat-number" id="userLimitToday">30</div>
-                            <div class="stat-label">Remaining Limit (Personal)</div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="reset-timer-card glassmorphism">
-                    <div class="timer-header">
-                        <i class="fas fa-clock"></i>
-                        <div>
-                            <h3>Next Reset</h3>
-                            <p>Daily limit resets at 00:00</p>
-                        </div>
-                    </div>
-
-                    <div class="countdown-display">
-                        <div class="countdown-time">
-                            <span class="reset-countdown">00:00:00</span>
-                        </div>
-                        <div class="countdown-label">
-                            Hours : Minutes : Seconds
-                        </div>
-                    </div>
-
-                    <div class="reset-progress-container">
-                        <div class="reset-progress"></div>
-                    </div>
-
-                    <div class="reset-info">
-                        <div>
-                            <i class="fas fa-info-circle"></i>
-                            <span>Your limit will be restored to maximum</span>
-                        </div>
-                        <div>
-                            <i class="fas fa-sync-alt"></i>
+                            <i class="fas fa-battery-three-quarters"></i>
                         </div>
+                        <div class="stat-number" id="userLimitToday">30</div>
+                        <div class="stat-label">Remaining Limit</div>
                     </div>
                 </div>
+            </div>
 
-                <div class="usage-overview">
-                    <div class="usage-section">
-                        <h4><i class="fas fa-chart-bar"></i> API Usage Overview</h4>
-                        <div class="endpoint-list">
-                            <div class="endpoint-item">
-                                <span class="endpoint-name">Loading...</span>
-                                <span class="endpoint-count">0 requests</span>
-                            </div>
-                        </div>
-                    </div>
-
-                    
-
-                    <div class="usage-section">
-                        <h4><i class="fas fa-calendar-alt"></i> Daily Usage (Last 7 Days)</h4>
-                        <div class="daily-usage">
-                            <div class="usage-day">
-                                <span class="usage-date">Loading...</span>
-                                <div class="usage-bar-container">
-                                    <div class="usage-bar" style="width: 0%;"></div>
-                                </div>
-                                <span class="usage-count">0</span>
-                            </div>
+            <div id="api-stats" class="section">
+                <h2><i class="fas fa-chart-area"></i> API Statistics</h2>
+                <p style="margin-bottom: 2rem; opacity: 0.8;">Global API usage statistics and analytics</p>
+                <div class="stats-cards">
+                    <div class="stat-card">
+                        <div class="stat-icon">
+                            <i class="fas fa-globe"></i>
                         </div>
+                        <div class="stat-number" id="globalTotalRequests">0</div>
+                        <div class="stat-label">Total Requests</div>
                     </div>
-
-                    <div class="usage-section">
-                        <h4><i class="fas fa-network-wired"></i> Recent IP Addresses</h4>
-                        <div class="ip-list">
-                            <div class="ip-item">
-                                <div>
-                                    <span class="ip-address">Loading...</span>
-                                    <div class="ip-time">Just now</div>
-                                </div>
-                                <span class="ip-count">0 requests</span>
-                            </div>
+                    <div class="stat-card">
+                        <div class="stat-icon">
+                            <i class="fas fa-calendar-day"></i>
                         </div>
+                        <div class="stat-number" id="globalTodayRequests">0</div>
+                        <div class="stat-label">Today's Requests</div>
                     </div>
                 </div>
             </div>
 
             <div id="plugins" class="section">
                 <h2><i class="fas fa-plug"></i> Available API Plugins</h2>
-                <p style="margin-bottom: 2rem; opacity: 0.8;">Discover and test our API endpoints with interactive documentation</p>
-
+                <p style="margin-bottom: 2rem; opacity: 0.8;">Discover and test our API endpoints</p>
+                
                 <div class="search-container">
                     <i class="fas fa-search search-icon"></i>
-                    <input type="text" 
-                           class="search-input" 
-                           placeholder="Search plugins by name, description, or tags..."
-                           oninput="searchPlugins(this.value)"
-                           id="pluginSearch">
+                    <input type="text" class="search-input" placeholder="Search plugins..." id="pluginSearch">
                 </div>
 
                 <div class="plugins-grid" id="pluginsGrid">
                     <div class="loading">
-                        <i class="fas fa-spinner fa-spin" style="margin-right: 0.5rem;"></i>
-                        Loading plugins...
+                        <i class="fas fa-spinner fa-spin"></i> Loading plugins...
                     </div>
                 </div>
             </div>
 
-            <!----- KENTOD --->
-
             <div id="server-stats" class="section">
                 <h2><i class="fas fa-server"></i> Server Statistics</h2>
-
-                <!--- APA LIAT LIAT --->
-
-                <div class="stats-cards">
-                    <div class="stat-card">
-                        <div class="stat-icon">
-                            <img src="https://api.iconify.design/mdi/account-group.svg?color=%23ba68c8&width=48&height=48" alt="users">
-                        </div>
-                        <div class="stat-info">
-                            <div class="stat-number" id="totalUsersCount">0</div>
-                            <div class="stat-label">Total Users</div>
-                        </div>
-                    </div>
-                    <div class="stat-card">
-                        <div class="stat-icon">
-                            <img src="https://api.iconify.design/mdi/account.svg?color=%23ce93d8&width=48&height=48" alt="user">
-                        </div>
-                        <div class="stat-info">
-                            <div class="stat-number" id="regularUsersCount">0</div>
-                            <div class="stat-label">Regular Users</div>
-                        </div>
-                    </div>
-                    <div class="stat-card">
-                        <div class="stat-icon">
-                            <img src="https://api.iconify.design/mdi/crown.svg?color=%23ba68c8&width=48&height=48" alt="crown">
-                        </div>
-                        <div class="stat-info">
-                            <div class="stat-number" id="premiumUsersCount">0</div>
-                            <div class="stat-label">Premium Users</div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="admin-card">
-                    <h3><i class="fas fa-chart-pie"></i> User Role Distribution</h3>
-                    <canvas id="roleChart" style="max-height: 300px;"></canvas>
-                </div>
-
-                <div class="admin-card">
-                    <h3><i class="fas fa-database"></i> Database Statistics</h3>
-                    <div class="stats-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem;">
-                        <div class="stat-item">
-                            <i class="fas fa-hdd" style="font-size: 2rem; color: rgba(133, 48, 48, 0.8); margin-bottom: 0.5rem;"></i>
-                            <span class="stat-value" id="dbSize">0 MB</span>
-                            <span class="stat-label">Database Size</span>
-                        </div>
-                        <div class="stat-item">
-                            <i class="fas fa-memory" style="font-size: 2rem; color: rgba(133, 48, 48, 0.8); margin-bottom: 0.5rem;"></i>
-                            <span class="stat-value" id="ramUsage">0 MB</span>
-                            <span class="stat-label">RAM Usage</span>
-                        </div>
-                        <div class="stat-item">
-                            <i class="fas fa-microchip" style="font-size: 2rem; color: rgba(133, 48, 48, 0.8); margin-bottom: 0.5rem;"></i>
-                            <span class="stat-value" id="cpuUsage">0%</span>
-                            <span class="stat-label">CPU Usage</span>
-                        </div>
-                        <div class="stat-item">
-                            <i class="fas fa-server" style="font-size: 2rem; color: rgba(133, 48, 48, 0.8); margin-bottom: 0.5rem;"></i>
-                            <span class="stat-value" id="storageUsed">0 GB</span>
-                            <span class="stat-label">Storage Used</span>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="admin-card">
-                    <h3><i class="fas fa-chart-bar"></i> Role Distribution Details</h3>
-                    <div class="stats-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem;">
-                        <div class="stat-item">
-                            <span class="stat-value" id="cheapCount">0</span>
-                            <span class="stat-label">Cheap Role</span>
-                        </div>
-                        <div class="stat-item">
-                            <span class="stat-value" id="premiumCount">0</span>
-                            <span class="stat-label">Premium Role</span>
-                        </div>
-                        <div class="stat-item">
-                            <span class="stat-value" id="vipCount">0</span>
-                            <span class="stat-label">VIP Role</span>
-                        </div>
-                        <div class="stat-item">
-                            <span class="stat-value" id="supremeCount">0</span>
-                            <span class="stat-label">Supreme Role</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div id="api-stats" class="section">
-                <h2><i class="fas fa-chart-area"></i> API Statistics</h2>
-                <p style="margin-bottom: 2rem; opacity: 0.8;">Global API usage statistics and analytics</p>
-
                 <div class="stats-cards">
                     <div class="stat-card">
                         <div class="stat-icon">
-                            <i class="fas fa-globe"></i>
-                        </div>
-                        <div class="stat-info">
-                            <div class="stat-number" id="globalTotalRequests">0</div>
-                            <div class="stat-label">Total Requests (All Users)</div>
-                        </div>
-                    </div>
-                    <div class="stat-card">
-                        <div class="stat-icon">
-                            <i class="fas fa-calendar-day"></i>
-                        </div>
-                        <div class="stat-info">
-                            <div class="stat-number" id="globalTodayRequests">0</div>
-                            <div class="stat-label">Today's Requests (All Users)</div>
-                        </div>
-                    </div>
-                    <div class="stat-card">
-                        <div class="stat-icon">
-                            <i class="fas fa-check-circle"></i>
-                        </div>
-                        <div class="stat-info">
-                            <div class="stat-number" id="successRate">0%</div>
-                            <div class="stat-label">Success Rate</div>
-                        </div>
-                    </div>
-                    <div class="stat-card">
-                        <div class="stat-icon">
-                            <i class="fas fa-times-circle"></i>
-                        </div>
-                        <div class="stat-info">
-                            <div class="stat-number" id="failRate">0%</div>
-                            <div class="stat-label">Fail Rate</div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="charts-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 2rem; margin-top: 2rem;">
-                    <div class="admin-card">
-                        <h3><i class="fas fa-chart-pie"></i> Top Endpoints Distribution</h3>
-                        <canvas id="topEndpointsChart" style="max-height: 350px;"></canvas>
-                    </div>
-
-                    <div class="admin-card">
-                        <h3><i class="fas fa-percentage"></i> Success vs Fail Rate</h3>
-                        <canvas id="successFailChart" style="max-height: 350px;"></canvas>
-                    </div>
-                </div>
-
-                <div class="admin-card" style="margin-top: 2rem;">
-                    <h3><i class="fas fa-chart-bar"></i> Daily Request Statistics (Last 7 Days)</h3>
-                    <canvas id="dailyRequestsChart" style="max-height: 400px;"></canvas>
-                </div>
-
-                <div class="admin-card" style="margin-top: 2rem;">
-                    <h3><i class="fas fa-chart-line"></i> Hourly Trends (Last 24 Hours)</h3>
-                    <canvas id="hourlyTrendsChart" style="max-height: 400px;"></canvas>
-                </div>
-
-                <div class="admin-card" style="margin-top: 2rem;">
-                    <h3><i class="fas fa-list-ol"></i> Top 10 Most Used Endpoints</h3>
-                    <div id="topEndpointsList">
-                        <div class="loading">
-                            <i class="fas fa-spinner fa-spin"></i> Loading...
+                            <i class="fas fa-users"></i>
                         </div>
+                        <div class="stat-number" id="totalUsersCount">0</div>
+                        <div class="stat-label">Total Users</div>
                     </div>
                 </div>
             </div>
@@ -1227,9 +244,9 @@
                 <div class="events-container">
                     <div class="redeem-section">
                         <h3><i class="fas fa-gift"></i> Redeem Code</h3>
-                        <p style="margin-bottom: 1.5rem; opacity: 0.8;">Enter a redeem code to unlock premium features or additional limits</p>
+                        <p style="margin-bottom: 1.5rem; opacity: 0.8;">Enter a redeem code to unlock premium features</p>
                         <div class="form-group">
-                            <input type="text" id="redeemCode" placeholder="Enter your redeem code" style="text-transform: uppercase;">
+                            <input type="text" id="redeemCode" placeholder="Enter your redeem code">
                             <button onclick="redeemCode()" class="btn btn-primary">
                                 <i class="fas fa-magic"></i> Redeem
                             </button>
@@ -1251,22 +268,6 @@
                             <i class="fas fa-save"></i> Update Profile
                         </button>
                     </div>
-
-                    <div class="setting-card" id="premiumSettings" style="display: none;">
-                        <h3><i class="fas fa-crown"></i> Premium Features</h3>
-                        <button onclick="regenerateApiKey()" class="btn btn-warning">
-                            <i class="fas fa-sync"></i> Regenerate API Key
-                        </button>
-                        <p class="text-muted">Generate a new API key (Premium only)</p>
-                    </div>
-
-                    <div class="setting-card danger-zone">
-                        <h3><i class="fas fa-exclamation-triangle"></i> Danger Zone</h3>
-                        <button onclick="deleteAccount()" class="btn btn-danger">
-                            <i class="fas fa-trash"></i> Delete Account
-                        </button>
-                        <p class="text-muted">This action cannot be undone</p>
-                    </div>
                 </div>
             </div>
 
@@ -1281,95 +282,37 @@
                             </div>
                         </div>
                     </div>
-
-                    <div class="admin-card">
-                        <h3><i class="fas fa-user-tag"></i> Set User Role</h3>
-                        <div class="form-row">
-                            <div class="form-group" style="grid-column: 1 / -1;">
-                                <label>Search User <span class="required">*</span></label>
-                                <input type="text" id="searchUserInput" placeholder="Search by username or email" oninput="searchUsersForRole(this.value)">
-                                <div id="userSearchResults" style="display: none; margin-top: 0.5rem; background: rgba(255,255,255,0.05); border-radius: 8px; max-height: 200px; overflow-y: auto;"></div>
-                            </div>
-                            <div class="form-group">
-                                <label>Selected User</label>
-                                <input type="text" id="selectedUserDisplay" placeholder="No user selected" readonly>
-                                <input type="hidden" id="selectedUserId">
-                            </div>
-                            <div class="form-group">
-                                <label>Role <span class="required">*</span></label>
-                                <select id="assignRoleType">
-                                    <option value="cheap">Cheap (Limit 500)</option>
-                                    <option value="premium">Premium (Limit 1500)</option>
-                                    <option value="vip">VIP (Limit 2500)</option>
-                                    <option value="supreme">Supreme (Limit 3000)</option>
-                                </select>
-                            </div>
-                            <div class="form-group">
-                                <label>Custom API Key <span style="color: #666; font-size: 0.85em;">(Optional)</span></label>
-                                <input type="text" id="customApiKey" placeholder="Leave empty for current key">
-                                <small>All roles support custom API keys</small>
-                            </div>
-                        </div>
-                        <button onclick="assignUserRole()" class="btn btn-primary">
-                            <i class="fas fa-user-check"></i> Assign Role
-                        </button>
-                    </div>
-
-                    <div class="admin-card">
-                        <h3><i class="fas fa-ticket-alt"></i> Create Redeem Code</h3>
-                        <div class="form-row">
-                            <div class="form-group">
-                                <label>Type <span class="required">*</span></label>
-                                <select id="redeemType">
-                                    <option value="limit">Limit Only</option>
-                                    <option value="premium">Premium Only</option>
-                                    <option value="both">Both</option>
-                                </select>
-                            </div>
-                            <div class="form-group" id="limitContainer" style="display: none;">
-                                <label>Limit Value</label>
-                                <input type="number" id="limitValue" min="0" placeholder="Additional limit">
-                                <small>Optional for Premium Only</small>
-                            </div>
-                            <div class="form-group" id="codeExpiredContainer" style="display: none;">
-                                <label>Code Expired <span class="required">*</span></label>
-                                <input type="datetime-local" id="codeExpired" required>
-                                <small>When the code expires</small>
-                            </div>
-                            <div class="form-group" id="premiumExpiredContainer" style="display: none;">
-                                <label>Premium Expired <span class="required">*</span></label>
-                                <input type="datetime-local" id="premiumExpired">
-                                <small>When premium access expires</small>
-                            </div>
-                        </div>
-                        <button onclick="createRedeemCode()" class="btn btn-primary">
-                            <i class="fas fa-plus"></i> Create Code
-                        </button>
-                    </div>
-
-                    <div class="admin-card">
-                        <h3><i class="fas fa-chart-pie"></i> System Statistics</h3>
-                        <div class="stats-grid">
-                            <div class="stat-item">
-                                <span class="stat-value" id="adminTotalUsers">0</span>
-                                <span class="stat-label">Total Users</span>
-                            </div>
-                            <div class="stat-item">
-                                <span class="stat-value" id="adminTotalRequests">0</span>
-                                <span class="stat-label">Total Requests</span>
-                            </div>
-                            <div class="stat-item">
-                                <span class="stat-value" id="adminTodayRequests">0</span>
-                                <span class="stat-label">Today's Requests</span>
-                            </div>
-                        </div>
-                    </div>
                 </div>
             </div>
         </div>
     </div>
 
     <script>
+        function toggleDrawer() {
+            const drawer = document.querySelector('.sidebar-drawer');
+            const overlay = document.querySelector('.drawer-overlay');
+            drawer.classList.toggle('active');
+            overlay.classList.toggle('active');
+            document.body.style.overflow = drawer.classList.contains('active') ? 'hidden' : '';
+        }
+        
+        function navigateTo(sectionId) {
+            showSection(sectionId);
+            toggleDrawer();
+        }
+        
+        function showSection(sectionId) {
+            document.querySelectorAll('.section').forEach(s => s.classList.remove('active'));
+            document.getElementById(sectionId).classList.add('active');
+            
+            document.querySelectorAll('.menu-item, .drawer-menu-item').forEach(item => {
+                item.classList.remove('active');
+                if(item.getAttribute('href') === '#' + sectionId) {
+                    item.classList.add('active');
+                }
+            });
+        }
+        
         (function(){
           function detectDevTools(){
             const threshold = 160;
@@ -1389,13 +332,6 @@
           setInterval(() => {
             if(window.eruda) window.location.href = "/denied";
             detectDevTools();
-            try{
-              console.profile();
-              console.profileEnd();
-            }catch(e){}
-            try{
-              if(console.clear.toString().length > 100) window.location.href = "/denied";
-            }catch(e){}
           }, 1000);
         })();
     </script>