···

       
565
       
 
       


     

       
566
       
 
       
**Admin UI features:**

     

       
567
       
 
       
- Statistics cards (total users, total/failed transcriptions)

     

       
568
       
-
       
- Tabbed interface (Transcriptions / Users)

     

       
569
       
 
       
- Status badges for transcription states

     

       
570
       
 
       
- Delete buttons for transcriptions with confirmation

     

       
571
       
 
       
- Role dropdown for changing user roles

     
···

       
573
       
 
       
- User avatars and info display

     

       
574
       
 
       
- Timestamp formatting

     

       
575
       
 
       
- Admin badge on user listings

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
576
       
 
       


     

       
577
       
 
       
**Implementation notes:**

     

       
578
       
 
       
- `role` column in users table ('user' or 'admin', default 'user')

     

···

       
565
       
 
       


     

       
566
       
 
       
**Admin UI features:**

     

       
567
       
 
       
- Statistics cards (total users, total/failed transcriptions)

     

       
568
       
+
       
- Tabbed interface (Pending Recordings / Transcriptions / Users / Classes)

     

       
569
       
 
       
- Status badges for transcription states

     

       
570
       
 
       
- Delete buttons for transcriptions with confirmation

     

       
571
       
 
       
- Role dropdown for changing user roles

     
···

       
573
       
 
       
- User avatars and info display

     

       
574
       
 
       
- Timestamp formatting

     

       
575
       
 
       
- Admin badge on user listings

     

       
576
       
+
       
- Query parameter support for direct tab navigation (`?tab=<tabname>`)

     

       
577
       
+
       


     

       
578
       
+
       
**Admin tab navigation:**

     

       
579
       
+
       
- `/admin` - Opens to default "pending" tab

     

       
580
       
+
       
- `/admin?tab=pending` - Pending recordings tab

     

       
581
       
+
       
- `/admin?tab=transcriptions` - All transcriptions tab

     

       
582
       
+
       
- `/admin?tab=users` - Users management tab

     

       
583
       
+
       
- `/admin?tab=classes` - Classes management tab

     

       
584
       
+
       
- URL updates when switching tabs (browser history support)

     

       
585
       
 
       


     

       
586
       
 
       
**Implementation notes:**

     

       
587
       
 
       
- `role` column in users table ('user' or 'admin', default 'user')

     

···

       
301
       
 
       
    }

     

       
302
       
 
       


     

       
303
       
 
       
    // Tab switching

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
304
       
 
       
    document.querySelectorAll('.tab').forEach(tab => {

     

       
305
       
 
       
      tab.addEventListener('click', () => {

     

       
306
       
-
       
        const tabName = tab.dataset.tab;

     

       
307
       
-
       


     

       
308
       
-
       
        document.querySelectorAll('.tab').forEach(t => {

     

       
309
       
-
       
          t.classList.remove('active');

     

       
310
       
-
       
        });

     

       
311
       
-
       
        document.querySelectorAll('.tab-content').forEach(c => {

     

       
312
       
-
       
          c.classList.remove('active');

     

       
313
       
-
       
        });

     

       
314
       
-
       


     

       
315
       
-
       
        tab.classList.add('active');

     

       
316
       
-
       
        document.getElementById(`${tabName}-tab`).classList.add('active');

     

       
317
       
 
       
      });

     

       
318
       
 
       
    });

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
319
       
 
       


     

       
320
       
 
       
    // Initialize

     

       
321
       
 
       
    loadStats();

     

···

       
301
       
 
       
    }

     

       
302
       
 
       


     

       
303
       
 
       
    // Tab switching

     

       
304
       
+
       
    function switchTab(tabName) {

     

       
305
       
+
       
      document.querySelectorAll('.tab').forEach(t => {

     

       
306
       
+
       
        t.classList.remove('active');

     

       
307
       
+
       
      });

     

       
308
       
+
       
      document.querySelectorAll('.tab-content').forEach(c => {

     

       
309
       
+
       
        c.classList.remove('active');

     

       
310
       
+
       
      });

     

       
311
       
+
       


     

       
312
       
+
       
      const tabButton = document.querySelector(`[data-tab="${tabName}"]`);

     

       
313
       
+
       
      const tabContent = document.getElementById(`${tabName}-tab`);

     

       
314
       
+
       
      

     

       
315
       
+
       
      if (tabButton && tabContent) {

     

       
316
       
+
       
        tabButton.classList.add('active');

     

       
317
       
+
       
        tabContent.classList.add('active');

     

       
318
       
+
       
        

     

       
319
       
+
       
        // Update URL without reloading

     

       
320
       
+
       
        const url = new URL(window.location.href);

     

       
321
       
+
       
        url.searchParams.set('tab', tabName);

     

       
322
       
+
       
        window.history.pushState({}, '', url);

     

       
323
       
+
       
      }

     

       
324
       
+
       
    }

     

       
325
       
+
       


     

       
326
       
 
       
    document.querySelectorAll('.tab').forEach(tab => {

     

       
327
       
 
       
      tab.addEventListener('click', () => {

     

       
328
       
+
       
        switchTab(tab.dataset.tab);

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
329
       
 
       
      });

     

       
330
       
 
       
    });

     

       
331
       
+
       


     

       
332
       
+
       
    // Check for tab query parameter on load

     

       
333
       
+
       
    const params = new URLSearchParams(window.location.search);

     

       
334
       
+
       
    const initialTab = params.get('tab');

     

       
335
       
+
       
    const validTabs = ['pending', 'transcriptions', 'users', 'classes'];

     

       
336
       
+
       
    

     

       
337
       
+
       
    if (initialTab && validTabs.includes(initialTab)) {

     

       
338
       
+
       
      switchTab(initialTab);

     

       
339
       
+
       
    }

     

       
340
       
 
       


     

       
341
       
 
       
    // Initialize

     

       
342
       
 
       
    loadStats();