Implement Admin Reporting UI with backend and frontend

Copilot · v0l · Copilot · commit 1ac95f8cc6a7 · 2025-06-10T14:52:25.000Z
Co-authored-by: v0l &lt;1172179+v0l@users.noreply.github.com&gt;
diff --git a/src/db.rs b/src/db.rs
@@ -418,4 +418,13 @@ impl Database {
             .fetch_all(&self.pool)
             .await
     }
+
+    /// Delete a report (used for acknowledging)
+    pub async fn delete_report(&self, report_id: u64) -> Result<(), Error> {
+        sqlx::query("delete from reports where id = ?")
+            .bind(report_id)
+            .execute(&self.pool)
+            .await?;
+        Ok(())
+    }
 }
diff --git a/src/routes/admin.rs b/src/routes/admin.rs
@@ -8,7 +8,7 @@ use rocket::{routes, Responder, Route, State};
 use sqlx::{Error, QueryBuilder, Row};
 
 pub fn admin_routes() -> Vec<Route> {
-    routes![admin_list_files, admin_get_self, admin_list_reports]
+    routes![admin_list_files, admin_get_self, admin_list_reports, admin_acknowledge_report]
 }
 
 #[derive(Serialize, Default)]
@@ -191,6 +191,29 @@ async fn admin_list_reports(
     }
 }
 
+#[rocket::delete("/reports/<report_id>")]
+async fn admin_acknowledge_report(
+    auth: Nip98Auth,
+    report_id: u64,
+    db: &State<Database>,
+) -> AdminResponse<()> {
+    let pubkey_vec = auth.event.pubkey.to_bytes().to_vec();
+
+    let user = match db.get_user(&pubkey_vec).await {
+        Ok(user) => user,
+        Err(_) => return AdminResponse::error("User not found"),
+    };
+
+    if !user.is_admin {
+        return AdminResponse::error("User is not an admin");
+    }
+
+    match db.delete_report(report_id).await {
+        Ok(()) => AdminResponse::success(()),
+        Err(e) => AdminResponse::error(&format!("Could not acknowledge report: {}", e)),
+    }
+}
+
 impl Database {
     pub async fn list_all_files(
         &self,
diff --git a/ui_src/src/upload/admin.ts b/ui_src/src/upload/admin.ts
@@ -12,6 +12,14 @@ export interface AdminSelf {
   total_available_quota?: number;
 }
 
+export interface Report {
+  id: number;
+  file_id: string;
+  reporter_id: number;
+  event_json: string;
+  created: string;
+}
+
 export class Route96 {
   constructor(
     readonly url: string,
@@ -39,6 +47,25 @@ export class Route96 {
     };
   }
 
+  async listReports(page = 0, count = 10) {
+    const rsp = await this.#req(
+      `admin/reports?page=${page}&count=${count}`,
+      "GET",
+    );
+    const data = await this.#handleResponse<AdminResponseReportList>(rsp);
+    return {
+      ...data,
+      ...data.data,
+      files: data.data.files,
+    };
+  }
+
+  async acknowledgeReport(reportId: number) {
+    const rsp = await this.#req(`admin/reports/${reportId}`, "DELETE");
+    const data = await this.#handleResponse<AdminResponse<void>>(rsp);
+    return data;
+  }
+
   async #handleResponse<T extends AdminResponseBase>(rsp: Response) {
     if (rsp.ok) {
       return (await rsp.json()) as T;
@@ -94,3 +121,10 @@ export type AdminResponseFileList = AdminResponse<{
   count: number;
   files: Array<NostrEvent>;
 }>;
+
+export type AdminResponseReportList = AdminResponse<{
+  total: number;
+  page: number;
+  count: number;
+  files: Array<Report>;
+}>;
diff --git a/ui_src/src/views/reports.tsx b/ui_src/src/views/reports.tsx
@@ -0,0 +1,141 @@
+import { NostrLink } from "@snort/system";
+import classNames from "classnames";
+import Profile from "../components/profile";
+import { Report } from "../upload/admin";
+
+export default function ReportList({
+  reports,
+  pages,
+  page,
+  onPage,
+  onAcknowledge,
+  onDeleteFile,
+}: {
+  reports: Array<Report>;
+  pages?: number;
+  page?: number;
+  onPage?: (n: number) => void;
+  onAcknowledge?: (reportId: number) => void;
+  onDeleteFile?: (fileId: string) => void;
+}) {
+  if (reports.length === 0) {
+    return <b>No Reports</b>;
+  }
+
+  function pageButtons(page: number, n: number) {
+    const ret = [];
+    const start = 0;
+
+    for (let x = start; x < n; x++) {
+      ret.push(
+        <div
+          key={x}
+          onClick={() => onPage?.(x)}
+          className={classNames(
+            "bg-neutral-700 hover:bg-neutral-600 min-w-8 text-center cursor-pointer font-bold",
+            {
+              "rounded-l-md": x === start,
+              "rounded-r-md": x + 1 === n,
+              "bg-neutral-400": page === x,
+            },
+          )}
+        >
+          {x + 1}
+        </div>,
+      );
+    }
+
+    return ret;
+  }
+
+  function getReporterPubkey(eventJson: string): string | null {
+    try {
+      const event = JSON.parse(eventJson);
+      return event.pubkey;
+    } catch {
+      return null;
+    }
+  }
+
+  function getReportReason(eventJson: string): string {
+    try {
+      const event = JSON.parse(eventJson);
+      return event.content || "No reason provided";
+    } catch {
+      return "Invalid event data";
+    }
+  }
+
+  function formatDate(dateString: string): string {
+    return new Date(dateString).toLocaleString();
+  }
+
+  return (
+    <>
+      <table className="w-full border-collapse border border-neutral-500">
+        <thead>
+          <tr className="bg-neutral-700">
+            <th className="border border-neutral-500 py-2 px-4 text-left">Report ID</th>
+            <th className="border border-neutral-500 py-2 px-4 text-left">File ID</th>
+            <th className="border border-neutral-500 py-2 px-4 text-left">Reporter</th>
+            <th className="border border-neutral-500 py-2 px-4 text-left">Reason</th>
+            <th className="border border-neutral-500 py-2 px-4 text-left">Created</th>
+            <th className="border border-neutral-500 py-2 px-4 text-left">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {reports.map((report) => {
+            const reporterPubkey = getReporterPubkey(report.event_json);
+            const reason = getReportReason(report.event_json);
+            
+            return (
+              <tr key={report.id} className="hover:bg-neutral-700">
+                <td className="border border-neutral-500 py-2 px-4">{report.id}</td>
+                <td className="border border-neutral-500 py-2 px-4 font-mono text-sm">
+                  {report.file_id.substring(0, 12)}...
+                </td>
+                <td className="border border-neutral-500 py-2 px-4">
+                  {reporterPubkey ? (
+                    <Profile link={NostrLink.publicKey(reporterPubkey)} size={20} />
+                  ) : (
+                    "Unknown"
+                  )}
+                </td>
+                <td className="border border-neutral-500 py-2 px-4 max-w-xs truncate">
+                  {reason}
+                </td>
+                <td className="border border-neutral-500 py-2 px-4">
+                  {formatDate(report.created)}
+                </td>
+                <td className="border border-neutral-500 py-2 px-4">
+                  <div className="flex gap-2">
+                    <button
+                      onClick={() => onAcknowledge?.(report.id)}
+                      className="bg-blue-600 hover:bg-blue-700 px-2 py-1 rounded text-sm"
+                    >
+                      Acknowledge
+                    </button>
+                    <button
+                      onClick={() => onDeleteFile?.(report.file_id)}
+                      className="bg-red-600 hover:bg-red-700 px-2 py-1 rounded text-sm"
+                    >
+                      Delete File
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+      
+      {pages !== undefined && (
+        <>
+          <div className="flex justify-center mt-4">
+            <div className="flex gap-1">{pageButtons(page ?? 0, pages)}</div>
+          </div>
+        </>
+      )}
+    </>
+  );
+}
diff --git a/ui_src/src/views/upload.tsx b/ui_src/src/views/upload.tsx
@@ -6,9 +6,10 @@ import { Blossom } from "../upload/blossom";
 import useLogin from "../hooks/login";
 import usePublisher from "../hooks/publisher";
 import { Nip96, Nip96FileList } from "../upload/nip96";
-import { AdminSelf, Route96 } from "../upload/admin";
+import { AdminSelf, Route96, Report } from "../upload/admin";
 import { FormatBytes } from "../const";
-import Report from "../report.json";
+import ReportJson from "../report.json";
+import ReportList from "./reports";
 
 export default function Upload() {
   const [type, setType] = useState<"blossom" | "nip96">("blossom");
@@ -21,14 +22,21 @@ export default function Upload() {
   const [results, setResults] = useState<Array<object>>([]);
   const [listedFiles, setListedFiles] = useState<Nip96FileList>();
   const [adminListedFiles, setAdminListedFiles] = useState<Nip96FileList>();
+  const [adminListedReports, setAdminListedReports] = useState<{
+    total: number;
+    page: number;
+    count: number;
+    files: Array<Report>;
+  }>();
   const [listedPage, setListedPage] = useState(0);
   const [adminListedPage, setAdminListedPage] = useState(0);
+  const [adminReportsPage, setAdminReportsPage] = useState(0);
   const [mimeFilter, setMimeFilter] = useState<string>();
 
   const login = useLogin();
   const pub = usePublisher();
 
-  const legacyFiles = Report as Record<string, Array<string>>;
+  const legacyFiles = ReportJson as Record<string, Array<string>>;
   const myLegacyFiles = login ? (legacyFiles[login.pubkey] ?? []) : [];
 
   const url =
@@ -99,6 +107,43 @@ export default function Upload() {
     }
   }
 
+  async function listReports(n: number) {
+    if (!pub) return;
+    try {
+      setError(undefined);
+      const uploader = new Route96(url, pub);
+      const result = await uploader.listReports(n, 50);
+      setAdminListedReports(result);
+    } catch (e) {
+      if (e instanceof Error) {
+        setError(e.message.length > 0 ? e.message : "List reports failed");
+      } else if (typeof e === "string") {
+        setError(e);
+      } else {
+        setError("List reports failed");
+      }
+    }
+  }
+
+  async function acknowledgeReport(reportId: number) {
+    if (!pub) return;
+    try {
+      setError(undefined);
+      const uploader = new Route96(url, pub);
+      await uploader.acknowledgeReport(reportId);
+      // Refresh the reports list
+      await listReports(adminReportsPage);
+    } catch (e) {
+      if (e instanceof Error) {
+        setError(e.message.length > 0 ? e.message : "Acknowledge failed");
+      } else if (typeof e === "string") {
+        setError(e);
+      } else {
+        setError("Acknowledge failed");
+      }
+    }
+  }
+
   async function deleteFile(id: string) {
     if (!pub) return;
     try {
@@ -138,6 +183,10 @@ export default function Upload() {
     listAllUploads(adminListedPage);
   }, [adminListedPage, mimeFilter]);
 
+  useEffect(() => {
+    listReports(adminReportsPage);
+  }, [adminReportsPage]);
+
   useEffect(() => {
     if (pub && !self) {
       const r96 = new Route96(url, pub);
@@ -274,6 +323,23 @@ export default function Upload() {
               }}
             />
           )}
+          
+          <hr />
+          <h3>Admin Reports:</h3>
+          <Button onClick={() => listReports(0)}>List Reports</Button>
+          {adminListedReports && (
+            <ReportList
+              reports={adminListedReports.files}
+              pages={Math.ceil(adminListedReports.total / adminListedReports.count)}
+              page={adminListedReports.page}
+              onPage={(x) => setAdminReportsPage(x)}
+              onAcknowledge={acknowledgeReport}
+              onDeleteFile={async (fileId) => {
+                await deleteFile(fileId);
+                await listReports(adminReportsPage);
+              }}
+            />
+          )}
         </>
       )}
       {error && <b className="text-red-500">{error}</b>}
diff --git a/ui_src/tsconfig.app.tsbuildinfo b/ui_src/tsconfig.app.tsbuildinfo
@@ -1 +1 @@
-{"root":["./src/App.tsx","./src/const.ts","./src/login.ts","./src/main.tsx","./src/vite-env.d.ts","./src/components/button.tsx","./src/components/profile.tsx","./src/hooks/login.ts","./src/hooks/publisher.ts","./src/upload/admin.ts","./src/upload/blossom.ts","./src/upload/index.ts","./src/upload/nip96.ts","./src/views/files.tsx","./src/views/header.tsx","./src/views/upload.tsx"],"version":"5.6.2"}
+{"root":["./src/App.tsx","./src/const.ts","./src/login.ts","./src/main.tsx","./src/vite-env.d.ts","./src/components/button.tsx","./src/components/profile.tsx","./src/hooks/login.ts","./src/hooks/publisher.ts","./src/upload/admin.ts","./src/upload/blossom.ts","./src/upload/index.ts","./src/upload/nip96.ts","./src/views/files.tsx","./src/views/header.tsx","./src/views/reports.tsx","./src/views/upload.tsx"],"version":"5.6.2"}

Original file line number	Diff line number	Diff line change
`@@ -418,4 +418,13 @@ impl Database {`
`418`	`418`	`.fetch_all(&self.pool)`
`419`	`419`	`.await`
`420`	`420`	`}`
	`421`	`+`
	`422`	`+ /// Delete a report (used for acknowledging)`
	`423`	`+ pub async fn delete_report(&self, report_id: u64) -> Result<(), Error> {`
	`424`	`+ sqlx::query("delete from reports where id = ?")`
	`425`	`+ .bind(report_id)`
	`426`	`+ .execute(&self.pool)`
	`427`	`+ .await?;`
	`428`	`+ Ok(())`
	`429`	`+ }`
`421`	`430`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-{"root":["./src/App.tsx","./src/const.ts","./src/login.ts","./src/main.tsx","./src/vite-env.d.ts","./src/components/button.tsx","./src/components/profile.tsx","./src/hooks/login.ts","./src/hooks/publisher.ts","./src/upload/admin.ts","./src/upload/blossom.ts","./src/upload/index.ts","./src/upload/nip96.ts","./src/views/files.tsx","./src/views/header.tsx","./src/views/upload.tsx"],"version":"5.6.2"}`
	`1`	`+{"root":["./src/App.tsx","./src/const.ts","./src/login.ts","./src/main.tsx","./src/vite-env.d.ts","./src/components/button.tsx","./src/components/profile.tsx","./src/hooks/login.ts","./src/hooks/publisher.ts","./src/upload/admin.ts","./src/upload/blossom.ts","./src/upload/index.ts","./src/upload/nip96.ts","./src/views/files.tsx","./src/views/header.tsx","./src/views/reports.tsx","./src/views/upload.tsx"],"version":"5.6.2"}`