feat: unify real activity tracking, admin monitoring, and error UX

frontend/app/admin/logs/page.tsx

@@ -0,0 +1,467 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { useRouter } from "next/navigation"
+
+type AdminLog = {
+  id: string
+  timestamp: string
+  event_type: string
+  action: string
+  status_code: number
+  severity: string
+  method: string
+  ip: string
+  path: string
+  user_agent?: string
+  metadata?: Record<string, unknown>
+  request_body?: unknown
+  response_body?: unknown
+  usage?: Record<string, unknown>
+  query?: Record<string, unknown>
+  duration_ms?: number
+  origin?: string
+}
+
+const API_BASE = "http://127.0.0.1:5000"
+
+export default function AdminLogsPage() {
+  const router = useRouter()
+  const [ready, setReady] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [exporting, setExporting] = useState(false)
+  const [message, setMessage] = useState("")
+  const [logs, setLogs] = useState<AdminLog[]>([])
+  const [selectedLog, setSelectedLog] = useState<AdminLog | null>(null)
+
+  const safeJson = (value: unknown) => {
+    if (value === null || value === undefined || value === "") return "No data"
+    if (typeof value === "string") {
+      try {
+        return JSON.stringify(JSON.parse(value), null, 2)
+      } catch {
+        return value
+      }
+    }
+    try {
+      return JSON.stringify(value, null, 2)
+    } catch {
+      return String(value)
+    }
+  }
+
+  const copyText = async (value: string) => {
+    try {
+      await navigator.clipboard.writeText(value)
+      setMessage("Copied to clipboard")
+    } catch {
+      setMessage("Copy failed")
+    }
+  }
+
+  const selectedRequestData = selectedLog
+    ? selectedLog.request_body
+      ?? (selectedLog.metadata && (selectedLog.metadata as any).request_body)
+      ?? (selectedLog.metadata && (selectedLog.metadata as any).request_details)
+      ?? selectedLog.query
+      ?? null
+    : null
+
+  const selectedResponseData = selectedLog
+    ? selectedLog.response_body
+      ?? (selectedLog.metadata && (selectedLog.metadata as any).response_body)
+      ?? (selectedLog.metadata && (selectedLog.metadata as any).response_details)
+      ?? null
+    : null
+
+  const selectedUsageData = selectedLog
+    ? selectedLog.usage
+      ?? (selectedLog.metadata && (selectedLog.metadata as any).usage)
+      ?? {
+          duration_ms: selectedLog.duration_ms ?? 0,
+          note: "Usage metrics not captured for this log entry",
+        }
+    : null
+  const [filters, setFilters] = useState({
+    event_type: "",
+    severity: "",
+    status_code: "",
+    search: "",
+  })
+  const [pagination, setPagination] = useState({ page: 1, limit: 50, total: 0, pages: 1 })
+
+  const getToken = () => localStorage.getItem("admin_token")
+  const headers = () => {
+    const token = getToken()
+    return token
+      ? { "Content-Type": "application/json", Authorization: `Bearer ${token}` }
+      : { "Content-Type": "application/json" }
+  }
+
+  const ensureAuth = async () => {
+    const token = getToken()
+    if (!token) {
+      router.push("/admin/login")
+      return false
+    }
+    const resp = await fetch(`${API_BASE}/api/admin/test`, { headers: headers() })
+    if (!resp.ok) {
+      localStorage.removeItem("admin_token")
+      router.push("/admin/login")
+      return false
+    }
+    return true
+  }
+
+  const fetchLogs = async (page = 1, nextFilters = filters) => {
+    setLoading(true)
+    setMessage("")
+    const params = new URLSearchParams()
+    params.set("page", String(page))
+    params.set("limit", String(pagination.limit))
+    if (nextFilters.event_type) params.set("event_type", nextFilters.event_type)
+    if (nextFilters.severity) params.set("severity", nextFilters.severity)
+    if (nextFilters.status_code) params.set("status_code", nextFilters.status_code)
+    if (nextFilters.search) params.set("search", nextFilters.search)
+
+    try {
+      const resp = await fetch(`${API_BASE}/api/admin/logs?${params.toString()}`, { headers: headers() })
+      if (resp.ok) {
+        const data = await resp.json()
+        setLogs(Array.isArray(data.logs) ? data.logs : [])
+        if (data.pagination) {
+          setPagination(data.pagination)
+        }
+      } else {
+        setLogs([])
+      }
+    } catch {
+      setLogs([])
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const triggerDownload = (content: string, filename: string, mimeType: string) => {
+    const blob = new Blob([content], { type: mimeType })
+    const url = URL.createObjectURL(blob)
+    const anchor = document.createElement("a")
+    anchor.href = url
+    anchor.download = filename
+    document.body.appendChild(anchor)
+    anchor.click()
+    anchor.remove()
+    URL.revokeObjectURL(url)
+  }
+
+  const exportLogs = async (format: "json" | "csv") => {
+    setExporting(true)
+    setMessage("")
+
+    const params = new URLSearchParams()
+    params.set("type", "logs")
+    params.set("format", format)
+    params.set("limit", "5000")
+    if (filters.event_type) params.set("event_type", filters.event_type)
+    if (filters.severity) params.set("severity", filters.severity)
+    if (filters.status_code) params.set("status_code", filters.status_code)
+    if (filters.search) params.set("search", filters.search)
+
+    try {
+      const resp = await fetch(`${API_BASE}/api/admin/reports/export?${params.toString()}`, { headers: headers() })
+      const data = await resp.json().catch(() => ({}))
+
+      if (!resp.ok) {
+        setMessage(String(data.error || "Failed to export logs."))
+        return
+      }
+
+      const stamp = new Date().toISOString().replace(/[.:]/g, "-")
+      if (format === "json") {
+        triggerDownload(JSON.stringify(data, null, 2), `admin-logs-${stamp}.json`, "application/json")
+      } else {
+        triggerDownload(String(data.content || ""), `admin-logs-${stamp}.csv`, "text/csv")
+      }
+
+      setMessage(`Logs exported as ${format.toUpperCase()}.`)
+    } catch {
+      setMessage("Network error while exporting logs.")
+    } finally {
+      setExporting(false)
+    }
+  }
+
+  useEffect(() => {
+    const init = async () => {
+      const ok = await ensureAuth()
+      if (!ok) return
+      setReady(true)
+      await fetchLogs(1)
+    }
+    init()
+  }, [])
+
+  if (!ready) {
+    return (
+      <div className="rounded-xl border border-gray-200 bg-white p-8 text-center dark:border-gray-800 dark:bg-gray-900">
+        <p className="text-gray-600 dark:text-gray-300">Loading logs...</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="rounded-xl border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-900">
+        <h1 className="text-2xl font-semibold text-gray-900 dark:text-white">Security and Activity Logs</h1>
+        <p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
+          Filter authentication, access-control, suspicious payload, and admin activity events.
+        </p>
+        <div className="mt-4 flex flex-wrap gap-2">
+          <button
+            onClick={() => exportLogs("json")}
+            disabled={exporting}
+            className="rounded-md bg-emerald-600 px-3 py-2 text-sm font-medium text-white hover:bg-emerald-700 disabled:opacity-60"
+          >
+            Export Logs JSON
+          </button>
+          <button
+            onClick={() => exportLogs("csv")}
+            disabled={exporting}
+            className="rounded-md bg-emerald-700 px-3 py-2 text-sm font-medium text-white hover:bg-emerald-800 disabled:opacity-60"
+          >
+            Export Logs CSV
+          </button>
+        </div>
+        {message ? <p className="mt-2 text-sm text-gray-700 dark:text-gray-200">{message}</p> : null}
+      </div>
+
+      <div className="rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900">
+        <div className="grid grid-cols-1 gap-3 border-b border-gray-100 p-4 md:grid-cols-6 dark:border-gray-800">
+          <input
+            placeholder="Search action, path, IP"
+            value={filters.search}
+            onChange={(e) => setFilters({ ...filters, search: e.target.value })}
+            className="md:col-span-2 rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-800"
+          />
+          <select
+            value={filters.event_type}
+            onChange={(e) => setFilters({ ...filters, event_type: e.target.value })}
+            className="rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-800"
+          >
+            <option value="">All Event Types</option>
+            <option value="admin_panel">Admin Panel</option>
+            <option value="admin_panel_visit">Admin Visit</option>
+            <option value="signin">Sign In</option>
+            <option value="signup">Sign Up</option>
+            <option value="course_join">Course Join</option>
+            <option value="attendance">Attendance</option>
+            <option value="forbidden_access">403 Forbidden</option>
+            <option value="suspicious_payload">Suspicious Payload</option>
+          </select>
+          <select
+            value={filters.severity}
+            onChange={(e) => setFilters({ ...filters, severity: e.target.value })}
+            className="rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-800"
+          >
+            <option value="">All Severity</option>
+            <option value="info">Info</option>
+            <option value="warning">Warning</option>
+            <option value="error">Error</option>
+          </select>
+          <input
+            placeholder="Status code"
+            value={filters.status_code}
+            onChange={(e) => setFilters({ ...filters, status_code: e.target.value })}
+            className="rounded-md border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-800"
+          />
+          <div className="flex gap-2">
+            <button
+              onClick={() => fetchLogs(1)}
+              className="w-full rounded-md bg-blue-600 px-3 py-2 text-sm font-medium text-white hover:bg-blue-700"
+            >
+              Apply
+            </button>
+            <button
+              onClick={() => {
+                const reset = { event_type: "", severity: "", status_code: "", search: "" }
+                setFilters(reset)
+                fetchLogs(1, reset)
+              }}
+              className="w-full rounded-md bg-gray-200 px-3 py-2 text-sm font-medium text-gray-900 hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-100"
+            >
+              Clear
+            </button>
+          </div>
+        </div>
+
+        <div className="overflow-x-auto">
+          <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-800">
+            <thead className="bg-gray-50 dark:bg-gray-800/50">
+              <tr>
+                <th className="px-4 py-2 text-left text-xs font-medium uppercase text-gray-500">Time</th>
+                <th className="px-4 py-2 text-left text-xs font-medium uppercase text-gray-500">Event</th>
+                <th className="px-4 py-2 text-left text-xs font-medium uppercase text-gray-500">Action</th>
+                <th className="px-4 py-2 text-left text-xs font-medium uppercase text-gray-500">Status</th>
+                <th className="px-4 py-2 text-left text-xs font-medium uppercase text-gray-500">IP</th>
+                <th className="px-4 py-2 text-left text-xs font-medium uppercase text-gray-500">Path</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
+              {loading ? (
+                <tr>
+                  <td className="px-4 py-4 text-sm text-gray-600" colSpan={6}>Loading logs...</td>
+                </tr>
+              ) : logs.length === 0 ? (
+                <tr>
+                  <td className="px-4 py-4 text-sm text-gray-500" colSpan={6}>No logs found for selected filters.</td>
+                </tr>
+              ) : (
+                logs.map((log) => (
+                  <tr
+                    key={log.id}
+                    onClick={() => setSelectedLog(log)}
+                    className="cursor-pointer hover:bg-blue-50 dark:hover:bg-gray-800/60"
+                    title="Click to view request and response details"
+                  >
+                    <td className="px-4 py-3 text-xs text-gray-700 dark:text-gray-300">{new Date(log.timestamp).toLocaleString()}</td>
+                    <td className="px-4 py-3 text-xs font-medium text-gray-900 dark:text-white">{log.event_type}</td>
+                    <td className="px-4 py-3 text-xs text-gray-700 dark:text-gray-300">{log.action}</td>
+                    <td className="px-4 py-3 text-xs">
+                      <span className={`rounded px-2 py-1 ${log.status_code >= 400 ? "bg-red-100 text-red-700" : "bg-green-100 text-green-700"}`}>
+                        {log.status_code}
+                      </span>
+                    </td>
+                    <td className="px-4 py-3 text-xs text-gray-700 dark:text-gray-300">{log.ip}</td>
+                    <td className="px-4 py-3 text-xs text-gray-700 dark:text-gray-300">{log.path}</td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+
+        <div className="flex items-center justify-between border-t border-gray-100 px-4 py-3 text-sm text-gray-600 dark:border-gray-800 dark:text-gray-300">
+          <span>
+            Page {pagination.page} of {pagination.pages} • Total {pagination.total}
+          </span>
+          <div className="flex gap-2">
+            <button
+              onClick={() => fetchLogs(Math.max(1, pagination.page - 1))}
+              disabled={pagination.page <= 1}
+              className="rounded bg-gray-100 px-3 py-1.5 disabled:opacity-50 dark:bg-gray-800"
+            >
+              Previous
+            </button>
+            <button
+              onClick={() => fetchLogs(Math.min(pagination.pages, pagination.page + 1))}
+              disabled={pagination.page >= pagination.pages}
+              className="rounded bg-gray-100 px-3 py-1.5 disabled:opacity-50 dark:bg-gray-800"
+            >
+              Next
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {selectedLog ? (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
+          <div className="w-full max-w-4xl rounded-xl border border-gray-200 bg-white shadow-xl dark:border-gray-800 dark:bg-gray-900">
+            <div className="flex items-center justify-between border-b border-gray-100 p-4 dark:border-gray-800">
+              <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Log Request and Response Details</h2>
+              <button
+                onClick={() => setSelectedLog(null)}
+                className="rounded-md bg-gray-200 px-3 py-1.5 text-sm text-gray-900 hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-100"
+              >
+                Close
+              </button>
+            </div>
+
+            <div className="max-h-[75vh] space-y-4 overflow-auto p-4">
+              <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
+                <div className="rounded-lg border border-gray-200 p-3 dark:border-gray-700">
+                  <p className="text-xs font-semibold uppercase text-gray-500">Event</p>
+                  <p className="mt-1 text-sm text-gray-900 dark:text-white">{selectedLog.event_type}</p>
+                </div>
+                <div className="rounded-lg border border-gray-200 p-3 dark:border-gray-700">
+                  <p className="text-xs font-semibold uppercase text-gray-500">Action</p>
+                  <p className="mt-1 text-sm text-gray-900 dark:text-white">{selectedLog.action}</p>
+                </div>
+                <div className="rounded-lg border border-gray-200 p-3 dark:border-gray-700">
+                  <p className="text-xs font-semibold uppercase text-gray-500">Path</p>
+                  <p className="mt-1 text-sm break-all text-gray-900 dark:text-white">{selectedLog.path}</p>
+                </div>
+                <div className="rounded-lg border border-gray-200 p-3 dark:border-gray-700">
+                  <p className="text-xs font-semibold uppercase text-gray-500">Method and Status</p>
+                  <p className="mt-1 text-sm text-gray-900 dark:text-white">{selectedLog.method} {selectedLog.status_code}</p>
+                </div>
+                <div className="rounded-lg border border-gray-200 p-3 dark:border-gray-700">
+                  <p className="text-xs font-semibold uppercase text-gray-500">Duration</p>
+                  <p className="mt-1 text-sm text-gray-900 dark:text-white">
+                    {selectedLog.duration_ms ?? (selectedLog.metadata && (selectedLog.metadata as any).duration_ms) ?? 0} ms
+                  </p>
+                </div>
+                <div className="rounded-lg border border-gray-200 p-3 dark:border-gray-700">
+                  <p className="text-xs font-semibold uppercase text-gray-500">Client</p>
+                  <p className="mt-1 text-sm break-all text-gray-900 dark:text-white">{selectedLog.ip}</p>
+                  <p className="mt-1 text-xs break-all text-gray-600 dark:text-gray-300">{selectedLog.user_agent || "Unknown user agent"}</p>
+                </div>
+              </div>
+
+              <div className="rounded-lg border border-gray-200 p-3 dark:border-gray-700">
+                <div className="flex items-center justify-between">
+                  <p className="text-xs font-semibold uppercase text-gray-500">Request Body</p>
+                  <button
+                    onClick={() => copyText(safeJson(selectedRequestData))}
+                    className="rounded bg-blue-600 px-2 py-1 text-xs text-white hover:bg-blue-700"
+                  >
+                    Copy
+                  </button>
+                </div>
+                <pre className="mt-2 max-h-64 overflow-auto whitespace-pre-wrap break-words rounded bg-gray-50 p-3 text-sm leading-6 text-gray-800 dark:bg-gray-800 dark:text-gray-100">
+{safeJson(selectedRequestData)}
+                </pre>
+              </div>
+
+              <div className="rounded-lg border border-gray-200 p-3 dark:border-gray-700">
+                <div className="flex items-center justify-between">
+                  <p className="text-xs font-semibold uppercase text-gray-500">Response Body</p>
+                  <button
+                    onClick={() => copyText(safeJson(selectedResponseData))}
+                    className="rounded bg-emerald-600 px-2 py-1 text-xs text-white hover:bg-emerald-700"
+                  >
+                    Copy
+                  </button>
+                </div>
+                <pre className="mt-2 max-h-64 overflow-auto whitespace-pre-wrap break-words rounded bg-gray-50 p-3 text-sm leading-6 text-gray-800 dark:bg-gray-800 dark:text-gray-100">
+{safeJson(selectedResponseData)}
+                </pre>
+              </div>
+
+              <div className="rounded-lg border border-gray-200 p-3 dark:border-gray-700">
+                <p className="text-xs font-semibold uppercase text-gray-500">Usage Monitoring</p>
+                <pre className="mt-2 max-h-64 overflow-auto whitespace-pre-wrap break-words rounded bg-gray-50 p-3 text-sm leading-6 text-gray-800 dark:bg-gray-800 dark:text-gray-100">
+{safeJson(selectedUsageData)}
+                </pre>
+              </div>
+
+              <div className="rounded-lg border border-gray-200 p-3 dark:border-gray-700">
+                <div className="flex items-center justify-between">
+                  <p className="text-xs font-semibold uppercase text-gray-500">Full Metadata</p>
+                  <button
+                    onClick={() => copyText(safeJson(selectedLog.metadata ?? {}))}
+                    className="rounded bg-gray-700 px-2 py-1 text-xs text-white hover:bg-gray-800"
+                  >
+                    Copy
+                  </button>
+                </div>
+                <pre className="mt-2 max-h-64 overflow-auto whitespace-pre-wrap break-words rounded bg-gray-50 p-3 text-sm leading-6 text-gray-800 dark:bg-gray-800 dark:text-gray-100">
+{safeJson(selectedLog.metadata ?? {})}
+                </pre>
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  )
+}