feat: Add admin dashboard with authentication - Admin login/logout with Bearer token authentication - Secure admin dashboard page in frontend - Real-time system monitoring (memory, disk, translations) - Rate limits and cleanup service monitoring - Protected admin endpoints - Updated README with full SaaS documentation

frontend/src/app/admin/page.tsx

@@ -0,0 +1,454 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Shield, LogOut, RefreshCw, Trash2, Activity, HardDrive, Cpu, Clock, Users, FileText, AlertTriangle, CheckCircle } from "lucide-react";
+
+interface DashboardData {
+  timestamp: string;
+  uptime: string;
+  status: string;
+  issues: string[];
+  system: {
+    memory: {
+      process_rss_mb: number;
+      system_total_gb: number;
+      system_available_gb: number;
+      system_percent: number;
+    };
+    disk: {
+      total_files: number;
+      total_size_mb: number;
+      usage_percent: number;
+    };
+  };
+  translations: {
+    total: number;
+    errors: number;
+    success_rate: number;
+  };
+  cleanup: {
+    files_cleaned_total: number;
+    bytes_freed_total_mb: number;
+    cleanup_runs: number;
+    tracked_files_count: number;
+    is_running: boolean;
+  };
+  rate_limits: {
+    total_requests: number;
+    total_translations: number;
+    active_clients: number;
+    config: {
+      requests_per_minute: number;
+      translations_per_minute: number;
+    };
+  };
+  config: {
+    max_file_size_mb: number;
+    supported_extensions: string[];
+    translation_service: string;
+  };
+}
+
+export default function AdminPage() {
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [loginError, setLoginError] = useState("");
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [dashboard, setDashboard] = useState<DashboardData | null>(null);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000";
+
+  // Check if already authenticated
+  useEffect(() => {
+    const token = localStorage.getItem("admin_token");
+    if (token) {
+      verifyToken(token);
+    } else {
+      setIsLoading(false);
+    }
+  }, []);
+
+  const verifyToken = async (token: string) => {
+    try {
+      const response = await fetch(`${API_URL}/admin/verify`, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+      if (response.ok) {
+        setIsAuthenticated(true);
+        fetchDashboard(token);
+      } else {
+        localStorage.removeItem("admin_token");
+      }
+    } catch (error) {
+      console.error("Token verification failed:", error);
+      localStorage.removeItem("admin_token");
+    }
+    setIsLoading(false);
+  };
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoginError("");
+    setIsLoading(true);
+
+    try {
+      const formData = new FormData();
+      formData.append("username", username);
+      formData.append("password", password);
+
+      const response = await fetch(`${API_URL}/admin/login`, {
+        method: "POST",
+        body: formData,
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        localStorage.setItem("admin_token", data.token);
+        setIsAuthenticated(true);
+        fetchDashboard(data.token);
+      } else {
+        setLoginError(data.detail || "Login failed");
+      }
+    } catch (error) {
+      setLoginError("Connection error. Is the backend running?");
+    }
+    setIsLoading(false);
+  };
+
+  const handleLogout = async () => {
+    const token = localStorage.getItem("admin_token");
+    if (token) {
+      try {
+        await fetch(`${API_URL}/admin/logout`, {
+          method: "POST",
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        });
+      } catch (error) {
+        console.error("Logout error:", error);
+      }
+    }
+    localStorage.removeItem("admin_token");
+    setIsAuthenticated(false);
+    setDashboard(null);
+  };
+
+  const fetchDashboard = async (token?: string) => {
+    const authToken = token || localStorage.getItem("admin_token");
+    if (!authToken) return;
+
+    setIsRefreshing(true);
+    try {
+      const response = await fetch(`${API_URL}/admin/dashboard`, {
+        headers: {
+          Authorization: `Bearer ${authToken}`,
+        },
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        setDashboard(data);
+      } else if (response.status === 401) {
+        handleLogout();
+      }
+    } catch (error) {
+      console.error("Failed to fetch dashboard:", error);
+    }
+    setIsRefreshing(false);
+  };
+
+  const triggerCleanup = async () => {
+    const token = localStorage.getItem("admin_token");
+    if (!token) return;
+
+    try {
+      const response = await fetch(`${API_URL}/admin/cleanup/trigger`, {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        alert(`Cleanup completed: ${data.files_cleaned} files removed`);
+        fetchDashboard();
+      }
+    } catch (error) {
+      console.error("Cleanup failed:", error);
+      alert("Cleanup failed");
+    }
+  };
+
+  // Auto-refresh every 30 seconds
+  useEffect(() => {
+    if (isAuthenticated) {
+      const interval = setInterval(() => fetchDashboard(), 30000);
+      return () => clearInterval(interval);
+    }
+  }, [isAuthenticated]);
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-[60vh]">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
+      </div>
+    );
+  }
+
+  if (!isAuthenticated) {
+    return (
+      <div className="flex items-center justify-center min-h-[60vh]">
+        <div className="bg-zinc-800/50 backdrop-blur rounded-2xl p-8 w-full max-w-md border border-zinc-700/50">
+          <div className="flex items-center gap-3 mb-6">
+            <div className="p-3 bg-blue-500/20 rounded-xl">
+              <Shield className="w-8 h-8 text-blue-400" />
+            </div>
+            <div>
+              <h1 className="text-2xl font-bold">Admin Access</h1>
+              <p className="text-zinc-400 text-sm">Login to access the dashboard</p>
+            </div>
+          </div>
+
+          <form onSubmit={handleLogin} className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium text-zinc-300 mb-2">Username</label>
+              <input
+                type="text"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                className="w-full px-4 py-3 bg-zinc-900/50 border border-zinc-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                placeholder="admin"
+                required
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-zinc-300 mb-2">Password</label>
+              <input
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="w-full px-4 py-3 bg-zinc-900/50 border border-zinc-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                placeholder="••••••••"
+                required
+              />
+            </div>
+
+            {loginError && (
+              <div className="p-3 bg-red-500/20 border border-red-500/50 rounded-xl text-red-400 text-sm">
+                {loginError}
+              </div>
+            )}
+
+            <button
+              type="submit"
+              disabled={isLoading}
+              className="w-full py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-xl transition-colors disabled:opacity-50"
+            >
+              {isLoading ? "Logging in..." : "Login"}
+            </button>
+          </form>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <div className="p-3 bg-blue-500/20 rounded-xl">
+            <Shield className="w-8 h-8 text-blue-400" />
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold">Admin Dashboard</h1>
+            <p className="text-zinc-400">System monitoring and management</p>
+          </div>
+        </div>
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => fetchDashboard()}
+            disabled={isRefreshing}
+            className="p-3 bg-zinc-800 hover:bg-zinc-700 rounded-xl transition-colors disabled:opacity-50"
+            title="Refresh"
+          >
+            <RefreshCw className={`w-5 h-5 ${isRefreshing ? "animate-spin" : ""}`} />
+          </button>
+          <button
+            onClick={handleLogout}
+            className="flex items-center gap-2 px-4 py-3 bg-red-600/20 hover:bg-red-600/30 text-red-400 rounded-xl transition-colors"
+          >
+            <LogOut className="w-5 h-5" />
+            Logout
+          </button>
+        </div>
+      </div>
+
+      {dashboard && (
+        <>
+          {/* Status Banner */}
+          <div className={`p-4 rounded-xl flex items-center gap-3 ${
+            dashboard.status === "healthy" 
+              ? "bg-green-500/20 border border-green-500/30" 
+              : "bg-yellow-500/20 border border-yellow-500/30"
+          }`}>
+            {dashboard.status === "healthy" ? (
+              <CheckCircle className="w-6 h-6 text-green-400" />
+            ) : (
+              <AlertTriangle className="w-6 h-6 text-yellow-400" />
+            )}
+            <div>
+              <span className={`font-medium ${dashboard.status === "healthy" ? "text-green-400" : "text-yellow-400"}`}>
+                System {dashboard.status.charAt(0).toUpperCase() + dashboard.status.slice(1)}
+              </span>
+              {dashboard.issues.length > 0 && (
+                <p className="text-sm text-zinc-400">{dashboard.issues.join(", ")}</p>
+              )}
+            </div>
+            <div className="ml-auto flex items-center gap-2 text-sm text-zinc-400">
+              <Clock className="w-4 h-4" />
+              Uptime: {dashboard.uptime}
+            </div>
+          </div>
+
+          {/* Stats Grid */}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+            {/* Total Requests */}
+            <div className="bg-zinc-800/50 backdrop-blur rounded-xl p-5 border border-zinc-700/50">
+              <div className="flex items-center gap-3 mb-3">
+                <div className="p-2 bg-blue-500/20 rounded-lg">
+                  <Activity className="w-5 h-5 text-blue-400" />
+                </div>
+                <span className="text-zinc-400 text-sm">Total Requests</span>
+              </div>
+              <div className="text-3xl font-bold">{dashboard.rate_limits.total_requests.toLocaleString()}</div>
+              <div className="text-sm text-zinc-500 mt-1">
+                {dashboard.rate_limits.active_clients} active clients
+              </div>
+            </div>
+
+            {/* Translations */}
+            <div className="bg-zinc-800/50 backdrop-blur rounded-xl p-5 border border-zinc-700/50">
+              <div className="flex items-center gap-3 mb-3">
+                <div className="p-2 bg-green-500/20 rounded-lg">
+                  <FileText className="w-5 h-5 text-green-400" />
+                </div>
+                <span className="text-zinc-400 text-sm">Translations</span>
+              </div>
+              <div className="text-3xl font-bold">{dashboard.translations.total.toLocaleString()}</div>
+              <div className="text-sm text-zinc-500 mt-1">
+                {dashboard.translations.success_rate}% success rate
+              </div>
+            </div>
+
+            {/* Memory Usage */}
+            <div className="bg-zinc-800/50 backdrop-blur rounded-xl p-5 border border-zinc-700/50">
+              <div className="flex items-center gap-3 mb-3">
+                <div className="p-2 bg-purple-500/20 rounded-lg">
+                  <Cpu className="w-5 h-5 text-purple-400" />
+                </div>
+                <span className="text-zinc-400 text-sm">Memory Usage</span>
+              </div>
+              <div className="text-3xl font-bold">{dashboard.system.memory.system_percent}%</div>
+              <div className="text-sm text-zinc-500 mt-1">
+                {dashboard.system.memory.system_available_gb.toFixed(1)} GB available
+              </div>
+            </div>
+
+            {/* Disk Usage */}
+            <div className="bg-zinc-800/50 backdrop-blur rounded-xl p-5 border border-zinc-700/50">
+              <div className="flex items-center gap-3 mb-3">
+                <div className="p-2 bg-orange-500/20 rounded-lg">
+                  <HardDrive className="w-5 h-5 text-orange-400" />
+                </div>
+                <span className="text-zinc-400 text-sm">Tracked Files</span>
+              </div>
+              <div className="text-3xl font-bold">{dashboard.cleanup.tracked_files_count}</div>
+              <div className="text-sm text-zinc-500 mt-1">
+                {dashboard.system.disk.total_size_mb.toFixed(1)} MB total
+              </div>
+            </div>
+          </div>
+
+          {/* Detailed Panels */}
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            {/* Rate Limits */}
+            <div className="bg-zinc-800/50 backdrop-blur rounded-xl p-6 border border-zinc-700/50">
+              <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
+                <Users className="w-5 h-5 text-blue-400" />
+                Rate Limits Configuration
+              </h3>
+              <div className="space-y-3">
+                <div className="flex justify-between items-center py-2 border-b border-zinc-700/50">
+                  <span className="text-zinc-400">Requests per minute</span>
+                  <span className="font-medium">{dashboard.rate_limits.config.requests_per_minute}</span>
+                </div>
+                <div className="flex justify-between items-center py-2 border-b border-zinc-700/50">
+                  <span className="text-zinc-400">Translations per minute</span>
+                  <span className="font-medium">{dashboard.rate_limits.config.translations_per_minute}</span>
+                </div>
+                <div className="flex justify-between items-center py-2 border-b border-zinc-700/50">
+                  <span className="text-zinc-400">Max file size</span>
+                  <span className="font-medium">{dashboard.config.max_file_size_mb} MB</span>
+                </div>
+                <div className="flex justify-between items-center py-2">
+                  <span className="text-zinc-400">Translation service</span>
+                  <span className="font-medium capitalize">{dashboard.config.translation_service}</span>
+                </div>
+              </div>
+            </div>
+
+            {/* Cleanup Service */}
+            <div className="bg-zinc-800/50 backdrop-blur rounded-xl p-6 border border-zinc-700/50">
+              <div className="flex items-center justify-between mb-4">
+                <h3 className="text-lg font-semibold flex items-center gap-2">
+                  <Trash2 className="w-5 h-5 text-orange-400" />
+                  Cleanup Service
+                </h3>
+                <button
+                  onClick={triggerCleanup}
+                  className="px-3 py-1.5 bg-orange-600/20 hover:bg-orange-600/30 text-orange-400 text-sm rounded-lg transition-colors"
+                >
+                  Trigger Cleanup
+                </button>
+              </div>
+              <div className="space-y-3">
+                <div className="flex justify-between items-center py-2 border-b border-zinc-700/50">
+                  <span className="text-zinc-400">Service status</span>
+                  <span className={`font-medium ${dashboard.cleanup.is_running ? "text-green-400" : "text-red-400"}`}>
+                    {dashboard.cleanup.is_running ? "Running" : "Stopped"}
+                  </span>
+                </div>
+                <div className="flex justify-between items-center py-2 border-b border-zinc-700/50">
+                  <span className="text-zinc-400">Files cleaned</span>
+                  <span className="font-medium">{dashboard.cleanup.files_cleaned_total}</span>
+                </div>
+                <div className="flex justify-between items-center py-2 border-b border-zinc-700/50">
+                  <span className="text-zinc-400">Space freed</span>
+                  <span className="font-medium">{dashboard.cleanup.bytes_freed_total_mb.toFixed(2)} MB</span>
+                </div>
+                <div className="flex justify-between items-center py-2">
+                  <span className="text-zinc-400">Cleanup runs</span>
+                  <span className="font-medium">{dashboard.cleanup.cleanup_runs}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Footer Info */}
+          <div className="text-center text-sm text-zinc-500 pt-4">
+            Last updated: {new Date(dashboard.timestamp).toLocaleString()} • Auto-refresh every 30 seconds
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

frontend/src/components/sidebar.tsx

@@ -8,6 +8,7 @@ import {
   Cloud,
   BookText,
   Upload,
+  Shield,
 } from "lucide-react";
 import {
   Tooltip,
@@ -43,6 +44,15 @@ const navigation = [
   },
 ];
 
+const adminNavigation = [
+  {
+    name: "Admin Dashboard",
+    href: "/admin",
+    icon: Shield,
+    description: "System monitoring (login required)",
+  },
+];
+
 export function Sidebar() {
   const pathname = usePathname();
 
@@ -85,6 +95,37 @@ export function Sidebar() {
               </Tooltip>
             );
           })}
+          
+          {/* Admin Section */}
+          <div className="mt-4 pt-4 border-t border-zinc-800">
+            <p className="px-3 mb-2 text-xs font-medium text-zinc-600 uppercase tracking-wider">Admin</p>
+            {adminNavigation.map((item) => {
+              const isActive = pathname === item.href;
+              const Icon = item.icon;
+
+              return (
+                <Tooltip key={item.name}>
+                  <TooltipTrigger asChild>
+                    <Link
+                      href={item.href}
+                      className={cn(
+                        "flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors",
+                        isActive
+                          ? "bg-blue-500/10 text-blue-400"
+                          : "text-zinc-500 hover:bg-zinc-800 hover:text-zinc-300"
+                      )}
+                    >
+                      <Icon className="h-5 w-5" />
+                      <span>{item.name}</span>
+                    </Link>
+                  </TooltipTrigger>
+                  <TooltipContent side="right">
+                    <p>{item.description}</p>
+                  </TooltipContent>
+                </Tooltip>
+              );
+            })}
+          </div>
         </nav>
 
         {/* User section at bottom */}