Upload folder using huggingface_hub

index.html

@@ -179,6 +179,7 @@
     table {
       width: 100%;
       border-collapse: collapse;
+      min-width: 800px;
     }
 
     th,
@@ -207,6 +208,7 @@
       border-radius: 20px;
       font-size: 12px;
       font-weight: 600;
+      text-transform: capitalize;
     }
 
     .badge-success {
@@ -229,6 +231,11 @@
       color: #0ea5e9;
     }
 
+    .badge-secondary {
+      background: rgba(148, 163, 184, 0.2);
+      color: #94a3b8;
+    }
+
     /* Custom checkbox */
     .custom-checkbox {
       appearance: none;
@@ -265,7 +272,7 @@
 
   <!-- Delete Confirmation Modal -->
   <div id="deleteModal" class="modal">
-    <div class="modal-content p-6">
+    <div class="modal-content p-6 max-w-sm">
       <div class="text-center">
         <div class="w-16 h-16 bg-danger/20 rounded-full flex items-center justify-center mx-auto mb-4">
           <i class="fas fa-trash-alt text-danger text-2xl"></i>
@@ -312,12 +319,12 @@
             </select>
           </div>
           <div>
-            <label class="block text-sm font-medium mb-2">Level</label>
-            <select id="courseLevel"
+            <label class="block text-sm font-medium mb-2">Status</label>
+            <select id="courseStatus"
               class="w-full py-3 px-4 bg-background border border-surface-light rounded-xl focus:outline-none focus:border-primary transition-all">
-              <option value="beginner">Beginner</option>
-              <option value="intermediate">Intermediate</option>
-              <option value="advanced">Advanced</option>
+              <option value="published">Published</option>
+              <option value="draft">Draft</option>
+              <option value="archived">Archived</option>
             </select>
           </div>
         </div>
@@ -329,28 +336,12 @@
               placeholder="49.99">
           </div>
           <div>
-            <label class="block text-sm font-medium mb-2">Duration (hours)</label>
-            <input type="number" id="courseDuration" required min="1"
+            <label class="block text-sm font-medium mb-2">Instructor</label>
+            <input type="text" id="courseInstructor" required
               class="w-full py-3 px-4 bg-background border border-surface-light rounded-xl focus:outline-none focus:border-primary transition-all"
-              placeholder="10">
+              placeholder="Instructor name">
           </div>
         </div>
-        <div>
-          <label class="block text-sm font-medium mb-2">Description</label>
-          <textarea id="courseDescription" rows="3"
-            class="w-full py-3 px-4 bg-background border border-surface-light rounded-xl focus:outline-none focus:border-primary transition-all resize-none"
-            placeholder="Course description..."></textarea>
-        </div>
-        <div>
-          <label class="block text-sm font-medium mb-2">Instructor</label>
-          <input type="text" id="courseInstructor" required
-            class="w-full py-3 px-4 bg-background border border-surface-light rounded-xl focus:outline-none focus:border-primary transition-all"
-            placeholder="Instructor name">
-        </div>
-        <div class="flex items-center gap-3">
-          <input type="checkbox" id="coursePublished" class="custom-checkbox">
-          <label for="coursePublished" class="text-sm">Publish immediately</label>
-        </div>
         <div class="flex gap-4 pt-4">
           <button type="button" onclick="closeCourseModal()"
             class="flex-1 py-3 bg-surface-light rounded-xl hover:bg-surface transition-all">Cancel</button>
@@ -375,31 +366,25 @@
         <input type="hidden" id="userId">
         <div class="grid grid-cols-2 gap-4">
           <div>
-            <label class="block text-sm font-medium mb-2">First Name</label>
-            <input type="text" id="userFirstName" required
+            <label class="block text-sm font-medium mb-2">Name</label>
+            <input type="text" id="userName" required
               class="w-full py-3 px-4 bg-background border border-surface-light rounded-xl focus:outline-none focus:border-primary transition-all"
-              placeholder="John">
+              placeholder="John Doe">
           </div>
           <div>
-            <label class="block text-sm font-medium mb-2">Last Name</label>
-            <input type="text" id="userLastName" required
+            <label class="block text-sm font-medium mb-2">Email</label>
+            <input type="email" id="userEmail" required
               class="w-full py-3 px-4 bg-background border border-surface-light rounded-xl focus:outline-none focus:border-primary transition-all"
-              placeholder="Doe">
+              placeholder="john@example.com">
           </div>
         </div>
-        <div>
-          <label class="block text-sm font-medium mb-2">Email</label>
-          <input type="email" id="userEmail" required
-            class="w-full py-3 px-4 bg-background border border-surface-light rounded-xl focus:outline-none focus:border-primary transition-all"
-            placeholder="john@example.com">
-        </div>
         <div>
           <label class="block text-sm font-medium mb-2">Role</label>
           <select id="userRole"
             class="w-full py-3 px-4 bg-background border border-surface-light rounded-xl focus:outline-none focus:border-primary transition-all">
-            <option value="student">Student</option>
-            <option value="instructor">Instructor</option>
-            <option value="admin">Admin</option>
+            <option value="Student">Student</option>
+            <option value="Instructor">Instructor</option>
+            <option value="Admin">Admin</option>
           </select>
         </div>
         <div>
@@ -408,7 +393,7 @@
             class="w-full py-3 px-4 bg-background border border-surface-light rounded-xl focus:outline-none focus:border-primary transition-all">
             <option value="active">Active</option>
             <option value="inactive">Inactive</option>
-            <option value="suspended">Suspended</option>
+            <option value="banned">Banned</option>
           </select>
         </div>
         <div class="flex gap-4 pt-4">
@@ -435,45 +420,23 @@
       </div>
 
       <nav class="flex-1 p-4 space-y-2">
-        <a href="#" onclick="showSection('dashboard'); return false;"
-          class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl text-text-primary bg-primary/20 transition-all"
-          data-section="dashboard">
+        <a href="#" onclick="showSection('dashboard'); return false;" id="nav-dashboard"
+          class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl text-text-primary bg-primary/20 transition-all">
           <i class="fas fa-chart-line w-5"></i>
           <span class="sidebar-text">Dashboard</span>
         </a>
-        <a href="#" onclick="showSection('courses'); return false;"
-          class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl text-text-muted hover:text-text-primary hover:bg-surface-light transition-all"
-          data-section="courses">
+        <a href="#" onclick="showSection('courses'); return false;" id="nav-courses"
+          class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl text-text-muted hover:text-text-primary hover:bg-surface-light transition-all">
           <i class="fas fa-book w-5"></i>
           <span class="sidebar-text">Courses</span>
         </a>
-        <a href="#" onclick="showSection('users'); return false;"
-          class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl text-text-muted hover:text-text-primary hover:bg-surface-light transition-all"
-          data-section="users">
+        <a href="#" onclick="showSection('users'); return false;" id="nav-users"
+          class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl text-text-muted hover:text-text-primary hover:bg-surface-light transition-all">
           <i class="fas fa-users w-5"></i>
           <span class="sidebar-text">Users</span>
         </a>
-        <a href="#" onclick="showSection('analytics'); return false;"
-          class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl text-text-muted hover:text-text-primary hover:bg-surface-light transition-all"
-          data-section="analytics">
-          <i class="fas fa-chart-bar w-5"></i>
-          <span class="sidebar-text">Analytics</span>
-        </a>
-        <a href="#" onclick="showSection('content'); return false;"
-          class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl text-text-muted hover:text-text-primary hover:bg-surface-light transition-all"
-          data-section="content">
-          <i class="fas fa-video w-5"></i>
-          <span class="sidebar-text">Content</span>
-        </a>
-        <a href="#" onclick="showSection('payments'); return false;"
-          class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl text-text-muted hover:text-text-primary hover:bg-surface-light transition-all"
-          data-section="payments">
-          <i class="fas fa-credit-card w-5"></i>
-          <span class="sidebar-text">Payments</span>
-        </a>
-        <a href="#" onclick="showSection('settings'); return false;"
-          class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl text-text-muted hover:text-text-primary hover:bg-surface-light transition-all"
-          data-section="settings">
+        <a href="#" onclick="showSection('settings'); return false;" id="nav-settings"
+          class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl text-text-muted hover:text-text-primary hover:bg-surface-light transition-all">
           <i class="fas fa-cog w-5"></i>
           <span class="sidebar-text">Settings</span>
         </a>
@@ -488,7 +451,7 @@
     </aside>
 
     <!-- Main Content -->
-    <main class="flex-1 lg:ml-0">
+    <main class="flex-1 lg:ml-0 overflow-x-hidden">
       <!-- Top Header -->
       <header class="bg-surface/95 backdrop-blur-xl border-b border-surface-light px-4 md:px-8 py-4 sticky top-0 z-30">
         <div class="flex justify-between items-center">
@@ -510,10 +473,6 @@
               <i class="fas fa-bell text-xl"></i>
               <span class="absolute top-0 right-0 w-5 h-5 bg-danger text-white text-xs rounded-full flex items-center justify-center">3</span>
             </button>
-            <button class="relative p-2 text-text-muted hover:text-text-primary transition-colors">
-              <i class="fas fa-envelope text-xl"></i>
-              <span class="absolute top-0 right-0 w-5 h-5 bg-primary text-white text-xs rounded-full flex items-center justify-center">5</span>
-            </button>
             <div class="flex items-center gap-3 pl-4 border-l border-surface-light">
               <div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center text-white font-bold">
                 A
@@ -528,7 +487,7 @@
       </header>
 
       <!-- Dashboard Section -->
-      <section id="dashboardSection" class="p-4 md:p-8">
+      <section id="dashboard" class="p-4 md:p-8 animate-fade-in">
         <div class="mb-8">
           <h1 class="text-2xl md:text-3xl font-bold mb-2">Dashboard</h1>
           <p class="text-text-muted">Welcome back! Here's what's happening with your platform.</p>
@@ -536,7 +495,7 @@
 
         <!-- Stats Cards -->
         <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-          <div class="bg-surface rounded-2xl p-6 border border-surface-light animate-fade-in">
+          <div class="bg-surface rounded-2xl p-6 border border-surface-light">
             <div class="flex justify-between items-start mb-4">
               <div class="w-12 h-12 rounded-xl bg-primary/20 flex items-center justify-center">
                 <i class="fas fa-users text-primary text-xl"></i>
@@ -548,7 +507,7 @@
             <h3 class="text-3xl font-bold mb-1">12,847</h3>
             <p class="text-text-muted text-sm">Total Students</p>
           </div>
-          <div class="bg-surface rounded-2xl p-6 border border-surface-light animate-fade-in" style="animation-delay: 0.1s">
+          <div class="bg-surface rounded-2xl p-6 border border-surface-light">
             <div class="flex justify-between items-start mb-4">
               <div class="w-12 h-12 rounded-xl bg-secondary/20 flex items-center justify-center">
                 <i class="fas fa-book text-secondary text-xl"></i>
@@ -560,7 +519,7 @@
             <h3 class="text-3xl font-bold mb-1">156</h3>
             <p class="text-text-muted text-sm">Active Courses</p>
           </div>
-          <div class="bg-surface rounded-2xl p-6 border border-surface-light animate-fade-in" style="animation-delay: 0.2s">
+          <div class="bg-surface rounded-2xl p-6 border border-surface-light">
             <div class="flex justify-between items-start mb-4">
               <div class="w-12 h-12 rounded-xl bg-success/20 flex items-center justify-center">
                 <i class="fas fa-dollar-sign text-success text-xl"></i>
@@ -572,7 +531,7 @@
             <h3 class="text-3xl font-bold mb-1">$48,295</h3>
             <p class="text-text-muted text-sm">Revenue (Monthly)</p>
           </div>
-          <div class="bg-surface rounded-2xl p-6 border border-surface-light animate-fade-in" style="animation-delay: 0.3s">
+          <div class="bg-surface rounded-2xl p-6 border border-surface-light">
             <div class="flex justify-between items-start mb-4">
               <div class="w-12 h-12 rounded-xl bg-accent/20 flex items-center justify-center">
                 <i class="fas fa-star text-accent text-xl"></i>
@@ -597,113 +556,10 @@
             <canvas id="enrollmentChart" height="200"></canvas>
           </div>
         </div>
-
-        <!-- Recent Activity & Top Courses -->
-        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-          <div class="bg-surface rounded-2xl p-6 border border-surface-light">
-            <h3 class="font-bold mb-4">Recent Activity</h3>
-            <div class="space-y-4">
-              <div class="flex items-center gap-4 p-3 bg-background rounded-xl">
-                <div class="w-10 h-10 rounded-full bg-success/20 flex items-center justify-center">
-                  <i class="fas fa-user-plus text-success"></i>
-                </div>
-                <div class="flex-1">
-                  <p class="font-medium text-sm">New student registered</p>
-                  <p class="text-text-muted text-xs">Sarah Johnson joined Python Basics</p>
-                </div>
-                <span class="text-text-muted text-xs">2 min ago</span>
-              </div>
-              <div class="flex items-center gap-4 p-3 bg-background rounded-xl">
-                <div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center">
-                  <i class="fas fa-credit-card text-primary"></i>
-                </div>
-                <div class="flex-1">
-                  <p class="font-medium text-sm">Payment received</p>
-                  <p class="text-text-muted text-xs">$49.99 for Web Development course</p>
-                </div>
-                <span class="text-text-muted text-xs">15 min ago</span>
-              </div>
-              <div class="flex items-center gap-4 p-3 bg-background rounded-xl">
-                <div class="w-10 h-10 rounded-full bg-accent/20 flex items-center justify-center">
-                  <i class="fas fa-star text-accent"></i>
-                </div>
-                <div class="flex-1">
-                  <p class="font-medium text-sm">New review posted</p>
-                  <p class="text-text-muted text-xs">5-star review on JavaScript course</p>
-                </div>
-                <span class="text-text-muted text-xs">1 hour ago</span>
-              </div>
-              <div class="flex items-center gap-4 p-3 bg-background rounded-xl">
-                <div class="w-10 h-10 rounded-full bg-secondary/20 flex items-center justify-center">
-                  <i class="fas fa-book text-secondary"></i>
-                </div>
-                <div class="flex-1">
-                  <p class="font-medium text-sm">Course published</p>
-                  <p class="text-text-muted text-xs">React Advanced Patterns is now live</p>
-                </div>
-                <span class="text-text-muted text-xs">3 hours ago</span>
-              </div>
-            </div>
-          </div>
-
-          <div class="bg-surface rounded-2xl p-6 border border-surface-light">
-            <h3 class="font-bold mb-4">Top Performing Courses</h3>
-            <div class="space-y-4">
-              <div class="flex items-center gap-4">
-                <span class="w-8 h-8 rounded-lg gradient-bg flex items-center justify-center text-white font-bold">1</span>
-                <div class="flex-1">
-                  <p class="font-medium">Python for Beginners</p>
-                  <div class="flex items-center gap-2 text-sm text-text-muted">
-                    <span>2,456 students</span>
-                    <span>•</span>
-                    <span class="text-accent"><i class="fas fa-star"></i> 4.9</span>
-                  </div>
-                </div>
-                <span class="text-success font-bold">$12,280</span>
-              </div>
-              <div class="flex items-center gap-4">
-                <span class="w-8 h-8 rounded-lg bg-surface-light flex items-center justify-center font-bold">2</span>
-                <div class="flex-1">
-                  <p class="font-medium">Web Development Bootcamp</p>
-                  <div class="flex items-center gap-2 text-sm text-text-muted">
-                    <span>1,892 students</span>
-                    <span>•</span>
-                    <span class="text-accent"><i class="fas fa-star"></i> 4.8</span>
-                  </div>
-                </div>
-                <span class="text-success font-bold">$9,460</span>
-              </div>
-              <div class="flex items-center gap-4">
-                <span class="w-8 h-8 rounded-lg bg-surface-light flex items-center justify-center font-bold">3</span>
-                <div class="flex-1">
-                  <p class="font-medium">JavaScript Mastery</p>
-                  <div class="flex items-center gap-2 text-sm text-text-muted">
-                    <span>1,654 students</span>
-                    <span>•</span>
-                    <span class="text-accent"><i class="fas fa-star"></i> 4.7</span>
-                  </div>
-                </div>
-                <span class="text-success font-bold">$8,270</span>
-              </div>
-              <div class="flex items-center gap-4">
-                <span class="w-8 h-8 rounded-lg bg-surface-light flex items-center justify-center font-bold">4</span>
-                <div class="flex-1">
-                  <p class="font-medium">Data Science Fundamentals</p>
-                  <div class="flex items-center gap-2 text-sm text-text-muted">
-                    <span>1,234 students</span>
-                    <span>•</span>
-                    <span class="text-accent"><i class="fas fa-star"></i> 4.6</span>
-                  </div>
-                </div>
-                <span class="text-success font-bold">$6,170</span>
-              </div>
-            </div>
-          </div>
-        </div>
       </section>
 
       <!-- Courses Section -->
-      <section id="coursesSection" class="hidden p-4 md:p-8">
+      <section id="courses" class="hidden p-4 md:p-8 animate-fade-in">
         <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8">
           <div>
             <h1 class="text-2xl md:text-3xl font-bold mb-2">Courses</h1>
@@ -723,14 +579,6 @@
             <option value="programming">Programming</option>
             <option value="electronics">Electronics</option>
             <option value="business">Business</option>
-            <option value="science">Science</option>
-          </select>
-          <select
-            class="py-2 px-4 bg-surface border border-surface-light rounded-lg focus:outline-none focus:border-primary">
-            <option value="">All Status</option>
-            <option value="published">Published</option>
-            <option value="draft">Draft</option>
-            <option value="archived">Archived</option>
           </select>
           <div class="relative flex-1 min-w-[200px]">
             <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-text-muted"></i>
@@ -760,21 +608,178 @@
               </tbody>
             </table>
           </div>
-          <div class="p-4 border-t border-surface-light flex justify-between items-center">
-            <p class="text-text-muted text-sm">Showing 1-10 of 156 courses</p>
-            <div class="flex gap-2">
-              <button class="px-4 py-2 bg-surface-light rounded-lg hover:bg-primary/20 transition-all">Previous</button>
-              <button class="px-4 py-2 gradient-bg text-white rounded-lg">1</button>
-              <button class="px-4 py-2 bg-surface-light rounded-lg hover:bg-primary/20 transition-all">2</button>
-              <button class="px-4 py-2 bg-surface-light rounded-lg hover:bg-primary/20 transition-all">3</button>
-              <button class="px-4 py-2 bg-surface-light rounded-lg hover:bg-primary/20 transition-all">Next</button>
-            </div>
-          </div>
         </div>
       </section>
 
       <!-- Users Section -->
-      <section id="usersSection" class="hidden p-4 md:p-8">
+      <section id="users" class="hidden p-4 md:p-8 animate-fade-in">
         <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8">
           <div>
-            <h1 class="text-2xl md:text-3xl font-bold mb-
+            <h1 class="text-2xl md:text-3xl font-bold mb-2">Users</h1>
+            <p class="text-text-muted">Manage students and instructors</p>
+          </div>
+          <button onclick="openUserModal()"
+            class="px-6 py-3 gradient-bg text-white rounded-xl hover:opacity-90 transition-all flex items-center gap-2">
+            <i class="fas fa-plus"></i> Add New User
+          </button>
+        </div>
+
+        <!-- Users Table -->
+        <div class="bg-surface rounded-2xl border border-surface-light overflow-hidden">
+          <div class="table-container">
+            <table>
+              <thead>
+                <tr>
+                  <th><input type="checkbox" class="custom-checkbox"></th>
+                  <th>User</th>
+                  <th>Role</th>
+                  <th>Status</th>
+                  <th>Joined Date</th>
+                  <th>Actions</th>
+                </tr>
+              </thead>
+              <tbody id="usersTableBody">
+                <!-- Dynamic content -->
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </section>
+
+      <!-- Settings Section -->
+      <section id="settings" class="hidden p-4 md:p-8 animate-fade-in">
+        <div class="mb-8">
+          <h1 class="text-2xl md:text-3xl font-bold mb-2">Settings</h1>
+          <p class="text-text-muted">Configure platform preferences</p>
+        </div>
+
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          <!-- Profile Card -->
+          <div class="bg-surface rounded-2xl border border-surface-light p-6">
+            <div class="flex flex-col items-center">
+              <div class="w-24 h-24 rounded-full gradient-bg flex items-center justify-center text-white text-3xl font-bold mb-4">
+                A
+              </div>
+              <h3 class="text-xl font-bold">Admin User</h3>
+              <p class="text-text-muted text-sm mb-6">Super Administrator</p>
+              <button class="w-full py-2 border border-primary text-primary rounded-lg hover:bg-primary/10 transition-all">Edit Profile</button>
+            </div>
+          </div>
+
+          <!-- General Settings -->
+          <div class="lg:col-span-2 bg-surface rounded-2xl border border-surface-light p-6">
+            <h3 class="text-xl font-bold mb-6">General Settings</h3>
+            <form class="space-y-6">
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div>
+                  <label class="block text-sm font-medium mb-2">Site Name</label>
+                  <input type="text" value="EduLearn" class="w-full py-3 px-4 bg-background border border-surface-light rounded-xl focus:outline-none focus:border-primary">
+                </div>
+                <div>
+                  <label class="block text-sm font-medium mb-2">Support Email</label>
+                  <input type="email" value="support@edulearn.com" class="w-full py-3 px-4 bg-background border border-surface-light rounded-xl focus:outline-none focus:border-primary">
+                </div>
+              </div>
+              
+              <div>
+                <label class="block text-sm font-medium mb-2">Platform Currency</label>
+                <select class="w-full py-3 px-4 bg-background border border-surface-light rounded-xl focus:outline-none focus:border-primary">
+                  <option value="USD">USD ($)</option>
+                  <option value="EUR">EUR (€)</option>
+                  <option value="GBP">GBP (£)</option>
+                </select>
+              </div>
+
+              <div class="flex items-center justify-between p-4 bg-background rounded-xl">
+                <div>
+                  <h4 class="font-medium">Maintenance Mode</h4>
+                  <p class="text-text-muted text-sm">Disable access for standard users</p>
+                </div>
+                <label class="relative inline-flex items-center cursor-pointer">
+                  <input type="checkbox" value="" class="sr-only peer">
+                  <div class="w-11 h-6 bg-surface-light peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
+                </label>
+              </div>
+
+              <div class="pt-4">
+                 <button type="button" onclick="showToast('Settings saved successfully!')" class="px-6 py-3 gradient-bg text-white rounded-xl hover:opacity-90 transition-all">Save Changes</button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </section>
+
+    </main>
+  </div>
+
+  <script>
+    // Mock Data
+    let courses = [
+      { id: 1, title: 'Python for Beginners', category: 'Programming', instructor: 'Sarah Johnson', students: 2456, price: 49.99, status: 'published' },
+      { id: 2, title: 'Web Development Bootcamp', category: 'Programming', instructor: 'Mike Chen', students: 1892, price: 89.99, status: 'published' },
+      { id: 3, title: 'Digital Marketing 101', category: 'Business', instructor: 'Emma Wilson', students: 854, price: 39.99, status: 'draft' },
+      { id: 4, title: 'Advanced Electronics', category: 'Electronics', instructor: 'David Brown', students: 432, price: 59.99, status: 'archived' },
+      { id: 5, title: 'UI/UX Design Masterclass', category: 'Design', instructor: 'Lisa Taylor', students: 1205, price: 69.99, status: 'published' },
+    ];
+
+    let users = [
+      { id: 1, name: 'Alice Freeman', email: 'alice@example.com', role: 'Student', status: 'active', joined: '2023-01-15' },
+      { id: 2, name: 'Bob Smith', email: 'bob@example.com', role: 'Instructor', status: 'active', joined: '2022-11-20' },
+      { id: 3, name: 'Charlie Davis', email: 'charlie@example.com', role: 'Student', status: 'inactive', joined: '2023-03-10' },
+      { id: 4, name: 'Diana Prince', email: 'diana@example.com', role: 'Admin', status: 'active', joined: '2022-08-05' },
+      { id: 5, name: 'Evan Wright', email: 'evan@example.com', role: 'Student', status: 'banned', joined: '2023-02-28' },
+    ];
+
+    let deleteTarget = null; // { type: 'course'|'user', id: number }
+
+    // Navigation Logic
+    function showSection(sectionId) {
+      // Hide all sections
+      document.querySelectorAll('section').forEach(el => el.classList.add('hidden'));
+      // Show target section
+      document.getElementById(sectionId).classList.remove('hidden');
+      
+      // Update sidebar active state
+      document.querySelectorAll('.sidebar-item').forEach(el => {
+        el.classList.remove('bg-primary/20', 'text-text-primary');
+        el.classList.add('text-text-muted');
+      });
+      
+      const activeLink = document.getElementById(`nav-${sectionId}`);
+      if(activeLink) {
+        activeLink.classList.remove('text-text-muted');
+        activeLink.classList.add('bg-primary/20', 'text-text-primary');
+      }
+    }
+
+    // Sidebar Toggle
+    function toggleSidebar() {
+      const sidebar = document.getElementById('sidebar');
+      sidebar.classList.toggle('collapsed');
+      
+      // Mobile logic
+      if (window.innerWidth < 1024) {
+        if (!sidebar.classList.contains('collapsed')) {
+          sidebar.style.transform = 'translateX(0)';
+        } else {
+          sidebar.style.transform = 'translateX(-100%)';
+        }
+      }
+    }
+
+    // Render Tables
+    function renderCourses() {
+      const tbody = document.getElementById('coursesTableBody');
+      tbody.innerHTML = courses.map(course => `
+        <tr>
+          <td><input type="checkbox" class="custom-checkbox"></td>
+          <td>
+            <div class="font-medium text-text-primary">${course.title}</div>
+          </td>
+          <td><span class="text-sm text-text-muted">${course.category}</span></td>
+          <td>
+            <div class="flex items-center gap-2">
+              <div class="w-6 h-6 rounded-full bg-surface-light flex items-center justify-center text-xs text-white">
+                ${course.instructor.charAt(0)}
+              </div>
+              <span class="text-sm">${