feat: add PaginationControls, DocumentSearchBar, DisputeListPage, and DisputeSubmissionForm

frontend/module/components/document-search/DocumentSearchBar.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+interface DocumentSearchResult {
+  id: string;
+  title: string;
+  status: string;
+  uploadedAt: string;
+}
+
+interface DocumentSearchBarProps {
+  onResults: (results: DocumentSearchResult[]) => void;
+}
+
+export default function DocumentSearchBar({ onResults }: DocumentSearchBarProps) {
+  const [query, setQuery] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [empty, setEmpty] = useState(false);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const abortRef = useRef<AbortController | null>(null);
+
+  const search = useCallback(
+    async (q: string) => {
+      if (!q.trim()) {
+        onResults([]);
+        setEmpty(false);
+        return;
+      }
+
+      abortRef.current?.abort();
+      abortRef.current = new AbortController();
+
+      setLoading(true);
+      setEmpty(false);
+
+      try {
+        const res = await fetch(
+          `${process.env.NEXT_PUBLIC_API_URL}/api/module/documents/search?q=${encodeURIComponent(q)}`,
+          {
+            headers: {
+              Authorization: `Bearer ${
+                typeof localStorage !== "undefined"
+                  ? (localStorage.getItem("access_token") ?? "")
+                  : ""
+              }`,
+            },
+            signal: abortRef.current.signal,
+          }
+        );
+        if (!res.ok) throw new Error("Search failed");
+        const data: DocumentSearchResult[] = await res.json();
+        onResults(data);
+        setEmpty(data.length === 0);
+      } catch (err: unknown) {
+        if (err instanceof Error && err.name === "AbortError") return;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [onResults]
+  );
+
+  useEffect(() => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => {
+      search(query);
+    }, 350);
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, [query, search]);
+
+  function handleClear() {
+    setQuery("");
+    setEmpty(false);
+    onResults([]);
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+    if (e.key === "Enter") {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      search(query);
+    }
+    if (e.key === "Escape") handleClear();
+  }
+
+  return (
+    <div className="relative w-full max-w-md">
+      <div className="pointer-events-none absolute inset-y-0 left-3 flex items-center">
+        <svg
+          className="h-4 w-4 text-gray-400"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2}
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z"
+          />
+        </svg>
+      </div>
+
+      <input
+        type="text"
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder="Search documents…"
+        aria-label="Search documents"
+        className="w-full rounded-lg border border-gray-300 py-2 pl-9 pr-10 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+      />
+
+      <div className="absolute inset-y-0 right-3 flex items-center gap-1">
+        {loading && (
+          <div className="h-4 w-4 animate-spin rounded-full border-2 border-blue-500 border-t-transparent" />
+        )}
+        {!loading && query && (
+          <button
+            onClick={handleClear}
+            aria-label="Clear search"
+            className="text-gray-400 hover:text-gray-600"
+          >
+            <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        )}
+      </div>
+
+      {empty && !loading && (
+        <p className="mt-2 text-sm text-gray-500">No results found.</p>
+      )}
+    </div>
+  );
+}

frontend/module/components/pagination/PaginationControls.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+interface PaginationControlsProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+}
+
+function buildPageRange(current: number, total: number): (number | "...")[] {
+  if (total <= 7) {
+    return Array.from({ length: total }, (_, i) => i + 1);
+  }
+
+  const pages: (number | "...")[] = [];
+
+  if (current <= 4) {
+    for (let i = 1; i <= 5; i++) pages.push(i);
+    pages.push("...");
+    pages.push(total);
+  } else if (current >= total - 3) {
+    pages.push(1);
+    pages.push("...");
+    for (let i = total - 4; i <= total; i++) pages.push(i);
+  } else {
+    pages.push(1);
+    pages.push("...");
+    pages.push(current - 1);
+    pages.push(current);
+    pages.push(current + 1);
+    pages.push("...");
+    pages.push(total);
+  }
+
+  return pages;
+}
+
+export default function PaginationControls({
+  currentPage,
+  totalPages,
+  onPageChange,
+}: PaginationControlsProps) {
+  if (totalPages <= 1) return null;
+
+  const pages = buildPageRange(currentPage, totalPages);
+
+  return (
+    <nav aria-label="Pagination" className="flex items-center gap-1">
+      <button
+        onClick={() => onPageChange(currentPage - 1)}
+        disabled={currentPage === 1}
+        aria-label="Previous page"
+        className="rounded-lg border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-40"
+      >
+        Previous
+      </button>
+
+      {pages.map((page, idx) =>
+        page === "..." ? (
+          <span key={`ellipsis-${idx}`} className="px-2 text-sm text-gray-500">
+            ...
+          </span>
+        ) : (
+          <button
+            key={page}
+            onClick={() => onPageChange(page as number)}
+            aria-label={`Page ${page}`}
+            aria-current={page === currentPage ? "page" : undefined}
+            className={`min-w-[2rem] rounded-lg border px-3 py-1.5 text-sm font-medium ${
+              page === currentPage
+                ? "border-blue-600 bg-blue-600 text-white"
+                : "border-gray-300 text-gray-700 hover:bg-gray-50"
+            }`}
+          >
+            {page}
+          </button>
+        )
+      )}
+
+      <button
+        onClick={() => onPageChange(currentPage + 1)}
+        disabled={currentPage === totalPages}
+        aria-label="Next page"
+        className="rounded-lg border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-40"
+      >
+        Next
+      </button>
+    </nav>
+  );
+}