feat: add server-side search and pagination to payments dashboard

backend/src/routes/payments.js

@@ -62,9 +62,12 @@ function applyPaymentFilters(query, req) {
   }
   if (typeof search === "string" && search.trim().length > 0) {
     const term = search.trim().replaceAll(",", "\\,");
-    query = query.or(
-      `id.ilike.%${term}%,description.ilike.%${term}%,recipient.ilike.%${term}%`
-    );
+    let orQuery = `id.ilike.%${term}%,description.ilike.%${term}%,recipient.ilike.%${term}%`;
+    const numTerm = Number(term);
+    if (!isNaN(numTerm)) {
+      orQuery += `,amount.eq.${numTerm}`;
+    }
+    query = query.or(orQuery);
   }
   return query;
 }

frontend/package.json

@@ -20,6 +20,7 @@
     "@walletconnect/types": "^2.23.8",
     "boring-avatars": "^2.0.4",
     "canvas-confetti": "^1.9.4",
+    "confetti": "^3.0.4",
     "event-source-polyfill": "^1.0.31",
     "framer-motion": "^12.38.0",
     "marked": "^17.0.5",

frontend/src/components/RecentPayments.tsx

@@ -37,12 +37,13 @@ interface FilterState {
   asset: string;
   dateFrom: string;
   dateTo: string;
+  page: number;
+  limit: number;
 }
 
 type SortColumn = "status" | "amount" | "recipient" | "created_at";
 type SortDirection = "asc" | "desc";
 
-const LIMIT = 100;
 const STATUS_OPTIONS = ["all", "pending", "confirmed", "failed", "refunded"] as const;
 const ASSET_OPTIONS = ["all", "XLM", "USDC"] as const;
 const DEFAULT_FILTERS: FilterState = {
@@ -51,6 +52,8 @@ const DEFAULT_FILTERS: FilterState = {
   asset: "all",
   dateFrom: "",
   dateTo: "",
+  page: 1,
+  limit: 10,
 };
 const DEFAULT_SORT_COLUMN: SortColumn = "created_at";
 const DEFAULT_SORT_DIRECTION: SortDirection = "desc";
@@ -63,12 +66,17 @@ function toStatusLabel(
 }
 
 function filtersFromSearchParams(searchParams: URLSearchParams): FilterState {
+  const pageStr = searchParams.get("page");
+  const limitStr = searchParams.get("limit");
+
   return {
     search: searchParams.get("search") ?? "",
     status: searchParams.get("status") ?? "all",
     asset: searchParams.get("asset") ?? "all",
     dateFrom: searchParams.get("date_from") ?? "",
     dateTo: searchParams.get("date_to") ?? "",
+    page: pageStr ? parseInt(pageStr, 10) : 1,
+    limit: limitStr ? parseInt(limitStr, 10) : 10,
   };
 }
 
@@ -109,6 +117,8 @@ function buildSearchParams(
   if (filters.asset !== "all") params.set("asset", filters.asset);
   if (filters.dateFrom) params.set("date_from", filters.dateFrom);
   if (filters.dateTo) params.set("date_to", filters.dateTo);
+  if (filters.page > 1) params.set("page", filters.page.toString());
+  if (filters.limit !== 10) params.set("limit", filters.limit.toString());
   if (sortColumn !== DEFAULT_SORT_COLUMN) params.set("sortColumn", sortColumn);
   if (sortDirection !== DEFAULT_SORT_DIRECTION) {
     params.set("sortDirection", sortDirection);
@@ -167,7 +177,6 @@ export default function RecentPayments({
   const [payments, setPayments] = useState<Payment[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const page = 1;
   const [totalCount, setTotalCount] = useState(0);
   const [selectedPayment, setSelectedPayment] = useState<string | null>(null);
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -191,8 +200,13 @@ export default function RecentPayments({
   );
 
   const handleFilterChange = useCallback(
-    (key: keyof FilterState, value: string) => {
-      updateFilters({ ...filters, [key]: value });
+    (key: keyof FilterState, value: string | number) => {
+      const isResetAction = key !== "page";
+      updateFilters({ 
+        ...filters, 
+        [key]: value,
+        ...(isResetAction ? { page: 1 } : {})
+      });
     },
     [filters, updateFilters],
   );
@@ -202,6 +216,7 @@ export default function RecentPayments({
       updateFilters({
         ...filters,
         [key]: key === "status" || key === "asset" ? "all" : "",
+        page: 1,
       });
     },
     [filters, updateFilters],
@@ -268,8 +283,6 @@ export default function RecentPayments({
 
         const apiUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:4000";
         const params = buildSearchParams(filters, sortColumn, sortDirection);
-        params.set("page", page.toString());
-        params.set("limit", LIMIT.toString());
 
         const response = await fetch(`${apiUrl}/api/payments?${params.toString()}`, {
           headers: {
@@ -1017,6 +1030,49 @@ export default function RecentPayments({
           </table>
         </div>
 
+      {/* Pagination Controls */}
+      {totalCount > 0 && (
+        <div className="flex flex-col sm:flex-row items-center justify-between gap-4 rounded-xl border border-white/10 bg-white/5 p-4">
+          <div className="flex items-center gap-2">
+            <label htmlFor="limit" className="text-sm text-slate-400">
+              Items per page
+            </label>
+            <select
+              id="limit"
+              value={filters.limit}
+              onChange={(e) => handleFilterChange("limit", parseInt(e.target.value, 10))}
+              className="rounded-lg border border-white/10 bg-black/40 px-2 py-1 text-sm text-white focus:border-mint/50 focus:outline-none focus:ring-1 focus:ring-mint/50"
+            >
+              {[10, 20, 50, 100].map((opt) => (
+                <option key={opt} value={opt}>
+                  {opt}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <button
+              disabled={filters.page <= 1}
+              onClick={() => handleFilterChange("page", filters.page - 1)}
+              className="rounded-lg border border-white/10 bg-white/5 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-white/10 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              Previous
+            </button>
+            <span className="text-sm text-slate-400">
+              Page {filters.page} of {Math.max(1, Math.ceil(totalCount / filters.limit))}
+            </span>
+            <button
+              disabled={filters.page >= Math.ceil(totalCount / filters.limit)}
+              onClick={() => handleFilterChange("page", filters.page + 1)}
+              className="rounded-lg border border-white/10 bg-white/5 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-white/10 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              Next
+            </button>
+          </div>
+        </div>
+      )}
+
       <PaymentDetailModal
         paymentId={selectedPayment}
         isOpen={isModalOpen}