[FE-06] Build DocumentListPage

frontend/module/documents/list/DocumentListPage.tsx

@@ -0,0 +1,196 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import Link from "next/link";
+
+interface Document {
+  id: string;
+  title: string;
+  status: string;
+  riskScore: number | null;
+  uploadedAt: string;
+}
+
+interface PaginatedResponse {
+  data: Document[];
+  total: number;
+  page: number;
+  limit: number;
+}
+
+const STATUS_OPTIONS = ["", "PENDING", "PROCESSING", "VERIFIED", "REJECTED"];
+const PAGE_SIZE = 10;
+
+function StatusBadge({ status }: { status: string }) {
+  const colors: Record<string, string> = {
+    PENDING: "bg-yellow-100 text-yellow-700",
+    PROCESSING: "bg-blue-100 text-blue-700",
+    VERIFIED: "bg-green-100 text-green-700",
+    REJECTED: "bg-red-100 text-red-700",
+  };
+  return (
+    <span
+      className={`rounded-full px-2 py-0.5 text-xs font-medium ${colors[status] ?? "bg-gray-100 text-gray-600"}`}
+    >
+      {status}
+    </span>
+  );
+}
+
+function SkeletonRow() {
+  return (
+    <tr className="animate-pulse">
+      {Array.from({ length: 5 }).map((_, i) => (
+        <td key={i} className="px-4 py-3">
+          <div className="h-4 rounded bg-gray-200" />
+        </td>
+      ))}
+    </tr>
+  );
+}
+
+export default function DocumentListPage() {
+  const [docs, setDocs] = useState<Document[]>([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [statusFilter, setStatusFilter] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchDocs = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const params = new URLSearchParams({
+        page: String(page),
+        limit: String(PAGE_SIZE),
+        ...(statusFilter ? { status: statusFilter } : {}),
+      });
+      const res = await fetch(
+        `${process.env.NEXT_PUBLIC_API_URL}/api/module/documents?${params}`,
+        {
+          headers: {
+            Authorization: `Bearer ${localStorage.getItem("access_token")}`,
+          },
+        }
+      );
+      if (!res.ok) throw new Error("Failed to load documents.");
+      const data: PaginatedResponse = await res.json();
+      setDocs(data.data);
+      setTotal(data.total);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Unexpected error.");
+    } finally {
+      setLoading(false);
+    }
+  }, [page, statusFilter]);
+
+  useEffect(() => {
+    fetchDocs();
+  }, [fetchDocs]);
+
+  const totalPages = Math.ceil(total / PAGE_SIZE);
+
+  return (
+    <div className="space-y-6 p-6">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold text-gray-900">Documents</h1>
+        <select
+          value={statusFilter}
+          onChange={(e) => { setStatusFilter(e.target.value); setPage(1); }}
+          aria-label="Filter by status"
+          className="rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+        >
+          {STATUS_OPTIONS.map((s) => (
+            <option key={s} value={s}>{s || "All statuses"}</option>
+          ))}
+        </select>
+      </div>
+
+      {error && (
+        <div className="flex items-center gap-4 rounded-lg bg-red-50 px-4 py-3">
+          <p className="text-sm text-red-700">{error}</p>
+          <button
+            onClick={fetchDocs}
+            className="text-sm font-semibold text-red-700 underline"
+          >
+            Retry
+          </button>
+        </div>
+      )}
+
+      <div className="overflow-x-auto rounded-xl border border-gray-200 bg-white shadow-sm">
+        <table className="min-w-full text-sm">
+          <thead className="bg-gray-50 text-left text-xs font-semibold uppercase text-gray-500">
+            <tr>
+              <th className="px-4 py-3">Title</th>
+              <th className="px-4 py-3">Status</th>
+              <th className="px-4 py-3">Risk Score</th>
+              <th className="px-4 py-3">Upload Date</th>
+              <th className="px-4 py-3">Actions</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-100">
+            {loading
+              ? Array.from({ length: 5 }).map((_, i) => <SkeletonRow key={i} />)
+              : docs.length === 0
+              ? (
+                <tr>
+                  <td colSpan={5} className="px-4 py-12 text-center text-gray-500">
+                    No documents found.{" "}
+                    <Link href="/documents/upload" className="text-blue-600 underline">
+                      Upload one
+                    </Link>
+                  </td>
+                </tr>
+              )
+              : docs.map((doc) => (
+                <tr key={doc.id} className="hover:bg-gray-50">
+                  <td className="px-4 py-3 font-medium text-gray-900">{doc.title}</td>
+                  <td className="px-4 py-3"><StatusBadge status={doc.status} /></td>
+                  <td className="px-4 py-3 text-gray-600">
+                    {doc.riskScore != null ? doc.riskScore.toFixed(1) : "—"}
+                  </td>
+                  <td className="px-4 py-3 text-gray-500">
+                    {new Date(doc.uploadedAt).toLocaleDateString()}
+                  </td>
+                  <td className="px-4 py-3">
+                    <Link
+                      href={`/documents/${doc.id}`}
+                      className="text-blue-600 hover:underline"
+                    >
+                      View
+                    </Link>
+                  </td>
+                </tr>
+              ))}
+          </tbody>
+        </table>
+      </div>
+
+      {totalPages > 1 && (
+        <div className="flex items-center justify-between text-sm text-gray-600">
+          <span>
+            Page {page} of {totalPages}
+          </span>
+          <div className="flex gap-2">
+            <button
+              onClick={() => setPage((p) => Math.max(1, p - 1))}
+              disabled={page === 1}
+              className="rounded-lg border border-gray-300 px-3 py-1.5 hover:bg-gray-50 disabled:opacity-40"
+            >
+              Previous
+            </button>
+            <button
+              onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+              disabled={page === totalPages}
+              className="rounded-lg border border-gray-300 px-3 py-1.5 hover:bg-gray-50 disabled:opacity-40"
+            >
+              Next
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}