feat(admin): expand payments list filters to match admin API

Add currency and reference query params plus full status chips on the payments page so filtering aligns with GET /admin/payments.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/api/payments.api.ts

@@ -82,8 +82,14 @@ function buildQueryParams(params: GetPaymentsParams): Record<string, string | nu
     offset: Math.max(0, params.offset ?? 0),
   }
   if (params.status?.trim()) query.status = params.status.trim()
-  if (params.provider?.trim()) query.provider = params.provider.trim()
+  if (params.provider?.trim()) {
+    query.provider = params.provider.trim()
+  } else if (params.payment_method?.trim()) {
+    query.payment_method = params.payment_method.trim()
+  }
   if (params.plan_category?.trim()) query.plan_category = params.plan_category.trim()
+  if (params.currency?.trim()) query.currency = params.currency.trim()
+  if (params.reference?.trim()) query.reference = params.reference.trim()
   return query
 }
 

src/pages/payments/PaymentsPage.tsx

@@ -7,8 +7,10 @@ import {
   CreditCard,
   Eye,
   RefreshCw,
+  Search,
   TrendingUp,
   Wallet,
+  X,
 } from "lucide-react"
 import { Link } from "react-router-dom"
 import { toast } from "sonner"
@@ -23,6 +25,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "../../components/ui/dialog"
+import { Input } from "../../components/ui/input"
 import { SpinnerIcon } from "../../components/ui/spinner-icon"
 import { cn } from "../../lib/utils"
 import {
@@ -44,9 +47,12 @@ import type {
 import { DEFAULT_TABLE_PAGE_SIZE, TABLE_PAGE_SIZE_OPTIONS } from "../../lib/tablePagination"
 
 const STATUS_FILTERS: { value: PaymentStatus; label: string }[] = [
-  { value: "SUCCESS", label: "Success" },
   { value: "PENDING", label: "Pending" },
+  { value: "PROCESSING", label: "Processing" },
+  { value: "SUCCESS", label: "Success" },
   { value: "FAILED", label: "Failed" },
+  { value: "CANCELLED", label: "Cancelled" },
+  { value: "EXPIRED", label: "Expired" },
 ]
 
 const PROVIDER_FILTERS: { value: PaymentProvider; label: string }[] = [
@@ -64,8 +70,12 @@ type PaymentListFilters = {
   status: PaymentStatus | ""
   provider: PaymentProvider | ""
   planCategory: PaymentPlanCategory | ""
+  currency: string
+  reference: string
 }
 
+const TEXT_FILTER_DEBOUNCE_MS = 400
+
 function copyText(value: string, label: string) {
   if (!value) return
   void navigator.clipboard.writeText(value)
@@ -82,16 +92,44 @@ export function PaymentsPage() {
   const [statusFilter, setStatusFilter] = useState<PaymentStatus | "">("")
   const [providerFilter, setProviderFilter] = useState<PaymentProvider | "">("")
   const [planCategoryFilter, setPlanCategoryFilter] = useState<PaymentPlanCategory | "">("")
+  const [currencyInput, setCurrencyInput] = useState("")
+  const [referenceInput, setReferenceInput] = useState("")
+  const [currencyFilter, setCurrencyFilter] = useState("")
+  const [referenceFilter, setReferenceFilter] = useState("")
   const [selected, setSelected] = useState<Payment | null>(null)
 
+  useEffect(() => {
+    const timer = window.setTimeout(() => {
+      setCurrencyFilter(currencyInput.trim().toUpperCase())
+    }, TEXT_FILTER_DEBOUNCE_MS)
+    return () => window.clearTimeout(timer)
+  }, [currencyInput])
+
+  useEffect(() => {
+    const timer = window.setTimeout(() => {
+      setReferenceFilter(referenceInput.trim())
+    }, TEXT_FILTER_DEBOUNCE_MS)
+    return () => window.clearTimeout(timer)
+  }, [referenceInput])
+
+  useEffect(() => {
+    setOffset(0)
+  }, [currencyFilter, referenceFilter])
+
   const listFilters: PaymentListFilters = {
     status: statusFilter,
     provider: providerFilter,
     planCategory: planCategoryFilter,
+    currency: currencyFilter,
+    reference: referenceFilter,
   }
 
   const hasActiveFilters = Boolean(
-    listFilters.status || listFilters.provider || listFilters.planCategory,
+    listFilters.status ||
+      listFilters.provider ||
+      listFilters.planCategory ||
+      listFilters.currency ||
+      listFilters.reference,
   )
 
   const fetchPayments = useCallback(
@@ -105,6 +143,8 @@ export function PaymentsPage() {
           ...(filters.status ? { status: filters.status } : {}),
           ...(filters.provider ? { provider: filters.provider } : {}),
           ...(filters.planCategory ? { plan_category: filters.planCategory } : {}),
+          ...(filters.currency ? { currency: filters.currency } : {}),
+          ...(filters.reference ? { reference: filters.reference } : {}),
         })
         setPayments(res.data.payments)
         setTotalCount(res.data.total_count)
@@ -123,7 +163,16 @@ export function PaymentsPage() {
 
   useEffect(() => {
     void fetchPayments(offset, pageSize, listFilters)
-  }, [offset, pageSize, statusFilter, providerFilter, planCategoryFilter, fetchPayments])
+  }, [
+    offset,
+    pageSize,
+    statusFilter,
+    providerFilter,
+    planCategoryFilter,
+    currencyFilter,
+    referenceFilter,
+    fetchPayments,
+  ])
 
   const toggleStatus = (value: PaymentStatus) => {
     setStatusFilter((current) => (current === value ? "" : value))
@@ -144,6 +193,10 @@ export function PaymentsPage() {
     setStatusFilter("")
     setProviderFilter("")
     setPlanCategoryFilter("")
+    setCurrencyInput("")
+    setReferenceInput("")
+    setCurrencyFilter("")
+    setReferenceFilter("")
     setOffset(0)
   }
 
@@ -271,19 +324,85 @@ export function PaymentsPage() {
                   onClick={() => togglePlanCategory(value)}
                 />
               ))}
+            </div>
+            <div className="grid gap-3 sm:grid-cols-2">
+              <div className="space-y-1.5">
+                <label
+                  htmlFor="payments-currency-filter"
+                  className="text-[11px] font-bold uppercase tracking-wider text-grayScale-400"
+                >
+                  Currency
+                </label>
+                <div className="relative">
+                  <Input
+                    id="payments-currency-filter"
+                    value={currencyInput}
+                    onChange={(e) => setCurrencyInput(e.target.value)}
+                    placeholder="e.g. ETB"
+                    disabled={loading}
+                    className="h-9 rounded-[6px] border-grayScale-200 pr-8 text-sm uppercase"
+                  />
+                  {currencyInput ? (
+                    <button
+                      type="button"
+                      aria-label="Clear currency filter"
+                      disabled={loading}
+                      onClick={() => setCurrencyInput("")}
+                      className="absolute right-2 top-1/2 -translate-y-1/2 text-grayScale-400 hover:text-grayScale-600"
+                    >
+                      <X className="h-3.5 w-3.5" />
+                    </button>
+                  ) : null}
+                </div>
+              </div>
+              <div className="space-y-1.5">
+                <label
+                  htmlFor="payments-reference-filter"
+                  className="text-[11px] font-bold uppercase tracking-wider text-grayScale-400"
+                >
+                  Reference
+                </label>
+                <div className="relative">
+                  <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-grayScale-400" />
+                  <Input
+                    id="payments-reference-filter"
+                    value={referenceInput}
+                    onChange={(e) => setReferenceInput(e.target.value)}
+                    placeholder="Session, nonce, or transaction ID"
+                    disabled={loading}
+                    className="h-9 rounded-[6px] border-grayScale-200 pl-8 pr-8 text-sm"
+                  />
+                  {referenceInput ? (
+                    <button
+                      type="button"
+                      aria-label="Clear reference filter"
+                      disabled={loading}
+                      onClick={() => setReferenceInput("")}
+                      className="absolute right-2 top-1/2 -translate-y-1/2 text-grayScale-400 hover:text-grayScale-600"
+                    >
+                      <X className="h-3.5 w-3.5" />
+                    </button>
+                  ) : null}
+                </div>
+                <p className="text-[10px] text-grayScale-400">
+                  Partial match on session ID, nonce, or transaction ID
+                </p>
+              </div>
+            </div>
             {hasActiveFilters ? (
+              <div className="flex justify-end border-t border-grayScale-100 pt-2">
                 <Button
                   type="button"
                   variant="ghost"
                   size="sm"
-                  className="ml-auto h-7 rounded-[6px] px-2 text-xs text-grayScale-500"
+                  className="h-7 rounded-[6px] px-2 text-xs text-grayScale-500"
                   disabled={loading}
                   onClick={clearFilters}
                 >
-                  Clear filters
+                  Clear all filters
                 </Button>
-              ) : null}
               </div>
+            ) : null}
           </div>
 
           {loading ? (

src/types/payment.types.ts

@@ -54,8 +54,13 @@ export interface PaymentsListResponse {
 
 export interface GetPaymentsParams {
   status?: PaymentStatus
+  /** Takes precedence over `payment_method` when both are sent. */
   provider?: PaymentProvider
+  payment_method?: PaymentMethod
   plan_category?: PaymentPlanCategory
+  currency?: string
+  /** Partial match on session_id, nonce, or transaction_id. */
+  reference?: string
   limit?: number
   offset?: number
 }