Add request approval system and audiobook path template

Implements admin approval workflow for user requests with global and per-user auto-approve controls. Adds new request statuses ('awaiting_approval', 'denied'), related API endpoints, and UI for pending approvals. Introduces configurable audiobook organization path template with validation and preview in settings, updates database schema and migrations for new fields.
2026-06-03 12:50:09 +00:00 · 2026-01-16 13:47:36 -05:00
parent 428d9a12e0
commit 3a9ae4a439
59 changed files with 4043 additions and 256 deletions
@@ -175,7 +175,7 @@ function AdminJobsPageContent() {
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Header */}
-        <div className="mb-8 flex items-center justify-between">
+        <div className="sticky top-0 z-10 mb-8 flex items-center justify-between bg-gray-50 dark:bg-gray-900 py-4 -mx-4 px-4 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8 border-b border-gray-200 dark:border-gray-800">
          <div>
            <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100">
              Scheduled Jobs
@@ -142,7 +142,7 @@ export default function AdminLogsPage() {
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Header */}
-        <div className="mb-8 flex items-center justify-between">
+        <div className="sticky top-0 z-10 mb-8 flex items-center justify-between bg-gray-50 dark:bg-gray-900 py-4 -mx-4 px-4 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8 border-b border-gray-200 dark:border-gray-800">
          <div>
            <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100">
              System Logs
@@ -5,13 +5,285 @@

 'use client';

-import useSWR from 'swr';
+import useSWR, { mutate } from 'swr';
 import Link from 'next/link';
-import { authenticatedFetcher } from '@/lib/utils/api';
+import { authenticatedFetcher, fetchJSON } from '@/lib/utils/api';
 import { MetricCard } from './components/MetricCard';
 import { ActiveDownloadsTable } from './components/ActiveDownloadsTable';
 import { RecentRequestsTable } from './components/RecentRequestsTable';
-import { ToastProvider } from '@/components/ui/Toast';
+import { ToastProvider, useToast } from '@/components/ui/Toast';
+import { formatDistanceToNow } from 'date-fns';
+import { useState } from 'react';
+
+interface PendingApprovalRequest {
+  id: string;
+  createdAt: string;
+  audiobook: {
+    title: string;
+    author: string;
+    coverArtUrl: string | null;
+  };
+  user: {
+    id: string;
+    plexUsername: string;
+    avatarUrl: string | null;
+  };
+}
+
+function PendingApprovalSection({ requests }: { requests: PendingApprovalRequest[] }) {
+  const toast = useToast();
+  const [loadingStates, setLoadingStates] = useState<Record<string, boolean>>({});
+
+  const handleApproveRequest = async (requestId: string) => {
+    setLoadingStates((prev) => ({ ...prev, [requestId]: true }));
+
+    try {
+      await fetchJSON(`/api/admin/requests/${requestId}/approve`, {
+        method: 'POST',
+        body: JSON.stringify({ action: 'approve' }),
+      });
+
+      toast.success('Request approved');
+
+      // Mutate both pending requests and recent requests caches
+      await mutate('/api/admin/requests/pending-approval');
+      await mutate('/api/admin/requests/recent');
+      await mutate('/api/admin/metrics');
+    } catch (error) {
+      console.error('[Admin] Failed to approve request:', error);
+      toast.error(
+        `Failed to approve request: ${error instanceof Error ? error.message : 'Unknown error'}`
+      );
+    } finally {
+      setLoadingStates((prev) => ({ ...prev, [requestId]: false }));
+    }
+  };
+
+  const handleDenyRequest = async (requestId: string) => {
+    setLoadingStates((prev) => ({ ...prev, [requestId]: true }));
+
+    try {
+      await fetchJSON(`/api/admin/requests/${requestId}/approve`, {
+        method: 'POST',
+        body: JSON.stringify({ action: 'deny' }),
+      });
+
+      toast.success('Request denied');
+
+      // Mutate pending requests cache
+      await mutate('/api/admin/requests/pending-approval');
+      await mutate('/api/admin/metrics');
+    } catch (error) {
+      console.error('[Admin] Failed to deny request:', error);
+      toast.error(
+        `Failed to deny request: ${error instanceof Error ? error.message : 'Unknown error'}`
+      );
+    } finally {
+      setLoadingStates((prev) => ({ ...prev, [requestId]: false }));
+    }
+  };
+
+  return (
+    <div className="mb-8">
+      {/* Section Header */}
+      <div className="flex items-center gap-3 mb-4">
+        <div className="flex items-center gap-2">
+          <svg
+            className="w-6 h-6 text-amber-600 dark:text-amber-400"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+            />
+          </svg>
+          <h2 className="text-xl font-bold text-gray-900 dark:text-gray-100">
+            Requests Awaiting Approval
+          </h2>
+        </div>
+        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200">
+          {requests.length}
+        </span>
+      </div>
+
+      {/* Requests Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {requests.map((request) => {
+          const isLoading = loadingStates[request.id] || false;
+
+          return (
+            <div
+              key={request.id}
+              className="bg-white dark:bg-gray-800 border-2 border-amber-200 dark:border-amber-800 rounded-lg shadow-sm hover:shadow-md transition-shadow overflow-hidden"
+            >
+              {/* Card Content */}
+              <div className="p-4">
+                <div className="flex gap-3">
+                  {/* Cover Image */}
+                  <div className="flex-shrink-0">
+                    {request.audiobook.coverArtUrl ? (
+                      <img
+                        src={request.audiobook.coverArtUrl}
+                        alt={request.audiobook.title}
+                        className="w-16 h-16 rounded object-cover"
+                      />
+                    ) : (
+                      <div className="w-16 h-16 rounded bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
+                        <svg
+                          className="w-8 h-8 text-gray-400 dark:text-gray-600"
+                          fill="currentColor"
+                          viewBox="0 0 20 20"
+                        >
+                          <path d="M9 4.804A7.968 7.968 0 005.5 4c-1.255 0-2.443.29-3.5.804v10A7.969 7.969 0 015.5 14c1.669 0 3.218.51 4.5 1.385A7.962 7.962 0 0114.5 14c1.255 0 2.443.29 3.5.804v-10A7.968 7.968 0 0014.5 4c-1.255 0-2.443.29-3.5.804V12a1 1 0 11-2 0V4.804z" />
+                        </svg>
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Book Info */}
+                  <div className="flex-1 min-w-0">
+                    <h3 className="text-sm font-bold text-gray-900 dark:text-gray-100 truncate">
+                      {request.audiobook.title}
+                    </h3>
+                    <p className="text-sm text-gray-600 dark:text-gray-400 truncate">
+                      {request.audiobook.author}
+                    </p>
+
+                    {/* User Info */}
+                    <div className="flex items-center gap-2 mt-2">
+                      {request.user.avatarUrl ? (
+                        <img
+                          src={request.user.avatarUrl}
+                          alt={request.user.plexUsername}
+                          className="w-5 h-5 rounded-full"
+                        />
+                      ) : (
+                        <div className="w-5 h-5 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center">
+                          <svg
+                            className="w-3 h-3 text-gray-600 dark:text-gray-400"
+                            fill="currentColor"
+                            viewBox="0 0 20 20"
+                          >
+                            <path
+                              fillRule="evenodd"
+                              d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
+                              clipRule="evenodd"
+                            />
+                          </svg>
+                        </div>
+                      )}
+                      <span className="text-xs text-gray-600 dark:text-gray-400">
+                        {request.user.plexUsername}
+                      </span>
+                    </div>
+
+                    {/* Timestamp */}
+                    <p className="text-xs text-gray-500 dark:text-gray-500 mt-1">
+                      {formatDistanceToNow(new Date(request.createdAt), { addSuffix: true })}
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              {/* Action Buttons */}
+              <div className="border-t border-amber-200 dark:border-amber-800 bg-gray-50 dark:bg-gray-900/50 px-4 py-3 flex gap-2">
+                <button
+                  onClick={() => handleApproveRequest(request.id)}
+                  disabled={isLoading}
+                  className="flex-1 inline-flex items-center justify-center gap-2 px-3 py-2 bg-green-600 hover:bg-green-700 disabled:bg-green-400 disabled:cursor-not-allowed text-white text-sm font-medium rounded-lg transition-colors"
+                >
+                  {isLoading ? (
+                    <svg
+                      className="animate-spin h-4 w-4"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                    >
+                      <circle
+                        className="opacity-25"
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke="currentColor"
+                        strokeWidth="4"
+                      />
+                      <path
+                        className="opacity-75"
+                        fill="currentColor"
+                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                      />
+                    </svg>
+                  ) : (
+                    <svg
+                      className="w-4 h-4"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M5 13l4 4L19 7"
+                      />
+                    </svg>
+                  )}
+                  <span>Approve</span>
+                </button>
+
+                <button
+                  onClick={() => handleDenyRequest(request.id)}
+                  disabled={isLoading}
+                  className="flex-1 inline-flex items-center justify-center gap-2 px-3 py-2 bg-red-600 hover:bg-red-700 disabled:bg-red-400 disabled:cursor-not-allowed text-white text-sm font-medium rounded-lg transition-colors"
+                >
+                  {isLoading ? (
+                    <svg
+                      className="animate-spin h-4 w-4"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                    >
+                      <circle
+                        className="opacity-25"
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke="currentColor"
+                        strokeWidth="4"
+                      />
+                      <path
+                        className="opacity-75"
+                        fill="currentColor"
+                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                      />
+                    </svg>
+                  ) : (
+                    <svg
+                      className="w-4 h-4"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M6 18L18 6M6 6l12 12"
+                      />
+                    </svg>
+                  )}
+                  <span>Deny</span>
+                </button>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

 function AdminDashboardContent() {
  // Fetch data with auto-refresh every 10 seconds
@@ -39,6 +311,14 @@ function AdminDashboardContent() {
    }
  );

+  const { data: pendingApprovalData } = useSWR(
+    '/api/admin/requests/pending-approval',
+    authenticatedFetcher,
+    {
+      refreshInterval: 10000,
+    }
+  );
+
  const { data: settingsData } = useSWR(
    '/api/admin/settings',
    authenticatedFetcher,
@@ -74,7 +354,7 @@ function AdminDashboardContent() {
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Header */}
-        <div className="mb-8 flex items-center justify-between">
+        <div className="sticky top-0 z-10 mb-8 flex items-center justify-between bg-gray-50 dark:bg-gray-900 py-4 -mx-4 px-4 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8 border-b border-gray-200 dark:border-gray-800">
          <div>
            <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100">
              Admin Dashboard
@@ -197,6 +477,11 @@ function AdminDashboardContent() {
              />
            </div>

+            {/* Requests Awaiting Approval */}
+            {pendingApprovalData?.requests && pendingApprovalData.requests.length > 0 && (
+              <PendingApprovalSection requests={pendingApprovalData.requests} />
+            )}
+
            {/* Active Downloads */}
            <div className="mb-8">
              <h2 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">
@@ -95,6 +95,7 @@ export interface DownloadClientSettings {
 export interface PathsSettings {
  downloadDir: string;
  mediaDir: string;
+  audiobookPathTemplate?: string;
  metadataTaggingEnabled: boolean;
  chapterMergingEnabled: boolean;
 }
@@ -187,6 +188,11 @@ export interface TestResult {
  success: boolean;
  message: string;
  responseTime?: number;
+  templateValidation?: {
+    isValid: boolean;
+    error?: string;
+    previewPaths?: string[];
+  };
 }

 /**
@@ -168,22 +168,24 @@ export default function AdminSettings() {
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Header */}
-        <div className="mb-8">
-          <div className="flex items-center gap-4 mb-4">
-            <Link
-              href="/admin"
-              className="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100"
-            >
-              <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
-                <path
-                  fillRule="evenodd"
-                  d="M9.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L7.414 9H15a1 1 0 110 2H7.414l2.293 2.293a1 1 0 010 1.414z"
-                  clipRule="evenodd"
-                />
-              </svg>
-            </Link>
-            <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100">Settings</h1>
+        <div className="sticky top-0 z-10 mb-8 flex items-center justify-between bg-gray-50 dark:bg-gray-900 py-4 -mx-4 px-4 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8 border-b border-gray-200 dark:border-gray-800">
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100">
+              Settings
+            </h1>
+            <p className="text-gray-600 dark:text-gray-400 mt-2">
+              Configure system integrations and preferences
+            </p>
          </div>
+          <Link
+            href="/admin"
+            className="inline-flex items-center gap-2 px-4 py-2 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 rounded-lg transition-colors"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+            </svg>
+            <span>Back to Dashboard</span>
+          </Link>
        </div>

        {/* Tab Navigation */}
@@ -5,11 +5,12 @@

 'use client';

-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 import { usePathsSettings } from './usePathsSettings';
 import type { PathsSettings } from '../../lib/types';
+import { validateTemplate, generateMockPreviews } from '@/lib/utils/path-template.util';

 interface PathsTabProps {
  paths: PathsSettings;
@@ -24,6 +25,31 @@ export function PathsTab({ paths, onChange, onValidationChange }: PathsTabProps)
    onValidationChange,
  });

+  // Live preview state (client-side validation)
+  const [livePreview, setLivePreview] = useState<{
+    isValid: boolean;
+    error?: string;
+    previewPaths?: string[];
+  } | null>(null);
+
+  // Update live preview whenever template changes
+  useEffect(() => {
+    const template = paths.audiobookPathTemplate || '{author}/{title} {asin}';
+    const validation = validateTemplate(template);
+
+    if (validation.valid) {
+      setLivePreview({
+        isValid: true,
+        previewPaths: generateMockPreviews(template),
+      });
+    } else {
+      setLivePreview({
+        isValid: false,
+        error: validation.error,
+      });
+    }
+  }, [paths.audiobookPathTemplate]);
+
  return (
    <div className="space-y-6 max-w-2xl">
      <div>
@@ -69,6 +95,78 @@ export function PathsTab({ paths, onChange, onValidationChange }: PathsTabProps)
        </p>
      </div>

+      {/* Audiobook Organization Template */}
+      <div>
+        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+          Audiobook Organization Template
+        </label>
+        <Input
+          type="text"
+          value={paths.audiobookPathTemplate || '{author}/{title} {asin}'}
+          onChange={(e) => updatePath('audiobookPathTemplate', e.target.value)}
+          placeholder="{author}/{title} {asin}"
+          className="font-mono"
+        />
+        <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+          Customize how audiobooks are organized within the media directory
+        </p>
+
+        {/* Variable Reference Panel */}
+        <div className="mt-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
+          <h3 className="text-sm font-semibold text-blue-900 dark:text-blue-100 mb-3">
+            Available Variables
+          </h3>
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm">
+            <div>
+              <code className="text-blue-700 dark:text-blue-300 font-mono">{'{author}'}</code>
+              <span className="text-gray-600 dark:text-gray-400 ml-2">- Book author</span>
+            </div>
+            <div>
+              <code className="text-blue-700 dark:text-blue-300 font-mono">{'{title}'}</code>
+              <span className="text-gray-600 dark:text-gray-400 ml-2">- Book title</span>
+            </div>
+            <div>
+              <code className="text-blue-700 dark:text-blue-300 font-mono">{'{narrator}'}</code>
+              <span className="text-gray-600 dark:text-gray-400 ml-2">- Narrator name</span>
+            </div>
+            <div>
+              <code className="text-blue-700 dark:text-blue-300 font-mono">{'{year}'}</code>
+              <span className="text-gray-600 dark:text-gray-400 ml-2">- Release year</span>
+            </div>
+            <div>
+              <code className="text-blue-700 dark:text-blue-300 font-mono">{'{asin}'}</code>
+              <span className="text-gray-600 dark:text-gray-400 ml-2">- Audible ASIN</span>
+            </div>
+          </div>
+        </div>
+
+        {/* Live Preview - Client-side validation */}
+        {livePreview && !livePreview.isValid && (
+          <div className="mt-3 p-3 rounded-lg text-sm flex items-start gap-2 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-800 dark:text-red-200">
+            <span className="flex-shrink-0 mt-0.5">✗</span>
+            <div className="flex-1">
+              <span>{livePreview.error || 'Invalid template format'}</span>
+            </div>
+          </div>
+        )}
+
+        {/* Live Preview Examples - Show while editing */}
+        {livePreview && livePreview.isValid && livePreview.previewPaths && (
+          <div className="mt-3 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+            <h4 className="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
+              Preview Examples
+            </h4>
+            <div className="space-y-1.5 text-sm font-mono text-gray-700 dark:text-gray-300">
+              {livePreview.previewPaths.map((preview, index) => (
+                <div key={index} className="text-xs">
+                  {paths.mediaDir || '/media/audiobooks'}/{preview}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+
      {/* Metadata Tagging Toggle */}
      <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
        <div className="flex items-start gap-4">
@@ -27,7 +27,7 @@ export function usePathsSettings({ paths, onChange, onValidationChange }: UsePat
  };

  /**
-   * Test if paths are valid and writable
+   * Test if paths are valid and writable, including template validation
   */
  const testPaths = async () => {
    setTesting(true);
@@ -40,6 +40,7 @@ export function usePathsSettings({ paths, onChange, onValidationChange }: UsePat
        body: JSON.stringify({
          downloadDir: paths.downloadDir,
          mediaDir: paths.mediaDir,
+          audiobookPathTemplate: paths.audiobookPathTemplate,
        }),
      });

@@ -48,7 +49,8 @@ export function usePathsSettings({ paths, onChange, onValidationChange }: UsePat
      if (data.success) {
        const result: TestResult = {
          success: true,
-          message: 'All paths are valid and writable'
+          message: 'All paths are valid and writable',
+          templateValidation: data.template
        };
        setTestResult(result);
        onValidationChange(true);
@@ -56,10 +58,13 @@ export function usePathsSettings({ paths, onChange, onValidationChange }: UsePat
      } else {
        const result: TestResult = {
          success: false,
-          message: data.error || 'Path validation failed'
+          message: data.error || 'Path validation failed',
+          templateValidation: data.template
        };
        setTestResult(result);
-        onValidationChange(false);
+        // Only mark as valid if paths are valid AND template is valid (if provided)
+        const isValid = false;
+        onValidationChange(isValid);
        return result;
      }
    } catch (error) {
@@ -5,7 +5,7 @@

 'use client';

-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import useSWR from 'swr';
 import Link from 'next/link';
 import { authenticatedFetcher, fetchJSON } from '@/lib/utils/api';
@@ -24,6 +24,7 @@ interface User {
  createdAt: string;
  updatedAt: string;
  lastLoginAt: string | null;
+  autoApproveRequests: boolean | null;
  _count: {
    requests: number;
  };
@@ -43,6 +44,10 @@ function AdminUsersPageContent() {
    '/api/admin/users/pending',
    authenticatedFetcher
  );
+  const { data: globalAutoApproveData, error: globalAutoApproveError, mutate: mutateGlobalAutoApprove } = useSWR(
+    '/api/admin/settings/auto-approve',
+    authenticatedFetcher
+  );
  const [editDialog, setEditDialog] = useState<{
    isOpen: boolean;
    user: User | null;
@@ -60,11 +65,77 @@ function AdminUsersPageContent() {
    user: User | null;
  }>({ isOpen: false, user: null });
  const [deleting, setDeleting] = useState(false);
+  const [globalAutoApprove, setGlobalAutoApprove] = useState<boolean>(false);
  const toast = useToast();

  const isLoading = !data && !error;
  const pendingUsers: PendingUser[] = pendingData?.users || [];

+  // Sync global auto-approve state (default to true if not set)
+  useEffect(() => {
+    if (globalAutoApproveData?.autoApproveRequests !== undefined) {
+      setGlobalAutoApprove(globalAutoApproveData.autoApproveRequests);
+    } else if (globalAutoApproveData !== undefined && globalAutoApproveData.autoApproveRequests === undefined) {
+      // API returned but no value - default to true
+      setGlobalAutoApprove(true);
+    }
+  }, [globalAutoApproveData]);
+
+  const handleGlobalAutoApproveToggle = async (newValue: boolean) => {
+    // Optimistic update
+    setGlobalAutoApprove(newValue);
+
+    try {
+      await fetchJSON('/api/admin/settings/auto-approve', {
+        method: 'PATCH',
+        body: JSON.stringify({ autoApproveRequests: newValue }),
+      });
+      toast.success(`Global auto-approve ${newValue ? 'enabled' : 'disabled'}`);
+      mutateGlobalAutoApprove();
+      mutate(); // Refresh users list to show updated state
+    } catch (err) {
+      // Revert on error
+      setGlobalAutoApprove(!newValue);
+      const errorMsg = err instanceof Error ? err.message : 'Failed to update auto-approve setting';
+      toast.error(errorMsg);
+      console.error(err);
+    }
+  };
+
+  const handleUserAutoApproveToggle = async (user: User, newValue: boolean) => {
+    console.log('[AutoApprove] Toggle clicked:', { userId: user.id, username: user.plexUsername, newValue });
+
+    // Optimistic update
+    const previousUsers = data?.users || [];
+    const optimisticUsers = previousUsers.map((u: User) =>
+      u.id === user.id ? { ...u, autoApproveRequests: newValue } : u
+    );
+    console.log('[AutoApprove] Applying optimistic update');
+    mutate({ users: optimisticUsers }, false);
+
+    try {
+      console.log('[AutoApprove] Sending API request...');
+      const response = await fetchJSON(`/api/admin/users/${user.id}`, {
+        method: 'PUT',
+        body: JSON.stringify({
+          role: user.role,
+          autoApproveRequests: newValue
+        }),
+      });
+      console.log('[AutoApprove] API response received:', response);
+      toast.success(`Auto-approve ${newValue ? 'enabled' : 'disabled'} for ${user.plexUsername}`);
+      console.log('[AutoApprove] Triggering cache revalidation...');
+      mutate(); // Refresh users list
+    } catch (err) {
+      // Revert on error
+      console.error('[AutoApprove] Error occurred, reverting:', err);
+      mutate({ users: previousUsers }, false);
+      const errorMsg = err instanceof Error ? err.message : 'Failed to update user auto-approve setting';
+      toast.error(errorMsg);
+      console.error(err);
+    }
+  };
+
  const showEditDialog = (user: User) => {
    setEditRole(user.role);
    setEditDialog({ isOpen: true, user });
@@ -207,7 +278,7 @@ function AdminUsersPageContent() {
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Header */}
-        <div className="mb-8 flex items-center justify-between">
+        <div className="sticky top-0 z-10 mb-8 flex items-center justify-between bg-gray-50 dark:bg-gray-900 py-4 -mx-4 px-4 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8 border-b border-gray-200 dark:border-gray-800">
          <div>
            <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100">
              User Management
@@ -227,6 +298,32 @@ function AdminUsersPageContent() {
          </Link>
        </div>

+        {/* Global Auto-Approve Toggle */}
+        <div className="mb-8 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-6">
+          <div className="flex items-start gap-4">
+            <button
+              onClick={() => handleGlobalAutoApproveToggle(!globalAutoApprove)}
+              className="relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 mt-0.5"
+              style={{ backgroundColor: globalAutoApprove ? '#3b82f6' : '#d1d5db' }}
+            >
+              <span
+                className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${globalAutoApprove ? 'translate-x-6' : 'translate-x-1'}`}
+              />
+            </button>
+            <div className="flex-1">
+              <label
+                onClick={() => handleGlobalAutoApproveToggle(!globalAutoApprove)}
+                className="block text-base font-semibold text-gray-900 dark:text-gray-100 cursor-pointer"
+              >
+                Auto-Approve All Requests
+              </label>
+              <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                When enabled, all user requests are automatically processed. When disabled, you can set per-user approval settings below.
+              </p>
+            </div>
+          </div>
+        </div>
+
        {/* Pending Users Section */}
        {pendingUsers.length > 0 && (
          <div className="mb-8">
@@ -305,6 +402,9 @@ function AdminUsersPageContent() {
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                  Role
                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  Auto-Approve
+                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                  Requests
                </th>
@@ -370,6 +470,33 @@ function AdminUsersPageContent() {
                      )}
                    </div>
                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap">
+                    <div className="flex items-center">
+                      {user.role === 'admin' ? (
+                        <span className="inline-flex items-center gap-1 px-2 py-1 text-xs font-semibold rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400">
+                          <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+                          </svg>
+                          Always On
+                        </span>
+                      ) : globalAutoApprove ? (
+                        <span className="text-xs text-gray-500 dark:text-gray-400">
+                          Global Setting
+                        </span>
+                      ) : (
+                        <button
+                          onClick={() => handleUserAutoApproveToggle(user, !(user.autoApproveRequests ?? false))}
+                          className="relative inline-flex h-5 w-10 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800"
+                          style={{ backgroundColor: (user.autoApproveRequests ?? false) ? '#3b82f6' : '#d1d5db' }}
+                          title={`Toggle auto-approve for ${user.plexUsername}`}
+                        >
+                          <span
+                            className={`inline-block h-3 w-3 transform rounded-full bg-white transition-transform ${(user.autoApproveRequests ?? false) ? 'translate-x-6' : 'translate-x-1'}`}
+                          />
+                        </button>
+                      )}
+                    </div>
+                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                    {user._count.requests}
                  </td>
@@ -460,6 +587,7 @@ function AdminUsersPageContent() {
            <li>• <strong>User:</strong> Can request audiobooks, view own requests, and search the catalog</li>
            <li>• <strong>Admin:</strong> Full system access including settings, user management, and all requests</li>
            <li>• <strong>Setup Admin:</strong> The initial admin account created during setup - this account is protected and cannot be changed or deleted</li>
+            <li>• <strong>Auto-Approve:</strong> When the global setting is enabled, all requests are automatically processed. When disabled, you can control auto-approval per user. Admin requests are always auto-approved.</li>
            <li>• <strong>OIDC Users:</strong> Role management is handled by the identity provider - use admin role mapping in OIDC settings. Cannot be deleted as access is managed externally.</li>
            <li>• <strong>Plex Users:</strong> Can have their roles changed, but cannot be deleted as access is managed by Plex.</li>
            <li>• <strong>Local Users:</strong> Can be freely assigned user or admin roles (except setup admin). Can be deleted (their requests are preserved for historical records).</li>