Vitron-Front/app/routes/admin.ledger.payouts.tsx

import { useState } from "react";
import {
  useLedgerPayouts,
  type LedgerPayoutRow,
} from "~/requestHandler/use-admin-hooks";
import {
  AdminTable,
  AdminPagination,
  AdminToolbar,
  AdminSearch,
  AdminSelect,
  StatusBadge,
  faToman,
  faDate,
  useDebouncedValue,
  type Column,
} from "~/components/admin/DataTable";

const PAGE_SIZE = 25;
const STATUS: Record<string, { label: string; tone: "green" | "red" | "yellow" }> = {
  pending: { label: "در انتظار", tone: "yellow" },
  completed: { label: "پرداخت‌شده", tone: "green" },
  rejected: { label: "ردشده", tone: "red" },
};

export default function LedgerPayouts() {
  const [page, setPage] = useState(1);
  const [search, setSearch] = useState("");
  const [status, setStatus] = useState("");
  const debouncedSearch = useDebouncedValue(search);

  const { data, isLoading } = useLedgerPayouts({
    page,
    page_size: PAGE_SIZE,
    search: debouncedSearch,
    status,
  });

  const reset = (fn: () => void) => {
    fn();
    setPage(1);
  };

  const columns: Column<LedgerPayoutRow>[] = [
    {
      header: "فروشگاه",
      render: (p) => (
        <div className="min-w-[130px]">
          <p className="font-semibold">{p.sellerName || "—"}</p>
          <p className="text-GRAY text-[11px]" dir="ltr">@{p.sellerUsername}</p>
        </div>
      ),
    },
    {
      header: "مبلغ",
      render: (p) => <span className="tabular-nums whitespace-nowrap">{faToman(p.amount)}</span>,
    },
    {
      header: "وضعیت",
      render: (p) => {
        const s = STATUS[p.status] || { label: p.status, tone: "yellow" as const };
        return <StatusBadge label={s.label} tone={s.tone} />;
      },
    },
    {
      header: "بانک",
      render: (p) => (
        <div className="min-w-[140px] text-[11px] text-GRAY" dir="ltr">
          <p>{p.bankName || "—"}</p>
          <p className="tabular-nums">{p.iban || ""}</p>
        </div>
      ),
    },
    {
      header: "درخواست",
      render: (p) => <span className="text-GRAY whitespace-nowrap">{faDate(p.requestedAt)}</span>,
    },
    {
      header: "پرداخت",
      render: (p) => <span className="text-GRAY whitespace-nowrap">{faDate(p.processedAt)}</span>,
    },
  ];

  return (
    <div>
      <AdminToolbar>
        <AdminSearch
          value={search}
          onChange={(v) => reset(() => setSearch(v))}
          placeholder="جستجوی فروشگاه…"
        />
        <AdminSelect
          value={status}
          onChange={(v) => reset(() => setStatus(v))}
          options={[
            { value: "", label: "همه وضعیت‌ها" },
            { value: "pending", label: "در انتظار" },
            { value: "completed", label: "پرداخت‌شده" },
            { value: "rejected", label: "ردشده" },
          ]}
        />
      </AdminToolbar>
      <AdminTable
        columns={columns}
        rows={data?.results || []}
        isLoading={isLoading}
        getRowKey={(p) => p.id}
      />
      <AdminPagination page={page} pageSize={PAGE_SIZE} count={data?.count || 0} onPageChange={setPage} />
    </div>
  );
}