"use client"; import { useState, useMemo, useRef } from "react"; import Link from "next/link"; import { m } from "framer-motion"; import { CheckCircle2, Loader2, Send, ArrowUpDown, Clock, AlertCircle, TrendingUp, UserPlus, Users, ArrowRight, ScrollText, ChevronLeft, ChevronRight, Wallet, } from "lucide-react"; import Select from "react-select"; import { Button } from "@/components/common/Button"; import { Container } from "@/components/common/Container"; import { SEARCHABLE_SELECT_COMPONENTS } from "@/components/common/SearchableSelectParts"; import { AgentKycGate } from "@/components/agent/AgentKycGate"; import { AgentSendRemittanceSkeleton } from "@/components/skeletons/AgentSendRemittanceSkeleton"; import { notify } from "@/lib/notify"; import { cn } from "@/lib/utils"; import { useAgentSendRemittanceIndex, useAgentRemittanceRecipients, useAgentRemittanceConfirm, type AgentTransactionType, } from "@/hooks/queries/useAgentSendRemittance"; import { useAgentTransactions, type SendRemittanceTx, } from "@/hooks/queries/useAgentDashboard"; import { useCurrencyInfo } from "@/hooks/queries/useSettings"; import { useTranslation } from "@/hooks/useTranslation"; import { useAgentKycGate } from "@/hooks/useAgentKycGate"; import { useControlledSelectMenu } from "@/hooks/useControlledSelectMenu"; // ─── Animations ──────────────────────────────────────────────────────────────── const containerVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.08, delayChildren: 0.05 }, }, }; const itemVariants = { hidden: { opacity: 0, y: 15 }, visible: { opacity: 1, y: 0, transition: { type: "spring", stiffness: 300, damping: 24 } }, }; // ─── Select styles ───────────────────────────────────────────────────────────── // Menu attaches flush to the control (no gap, square-off shared corners) so // opening reads as the control expanding downward rather than a floating menu. const SELECT_CLS = { control: ({ menuIsOpen }: { menuIsOpen: boolean }) => cn( "h-12 w-full border border-slate-200/80 bg-white px-2 text-sm font-medium text-slate-900 transition-[border-radius] duration-150 hover:border-slate-300 dark:border-slate-700/60 dark:bg-slate-900/80 dark:text-white cursor-pointer !min-h-12 shadow-sm", menuIsOpen ? "rounded-t-xl rounded-b-none" : "rounded-xl", ), menu: () => "select-menu-portal overflow-hidden rounded-b-xl border border-t-0 border-slate-200 bg-white shadow-2xl dark:border-slate-700 dark:bg-slate-900 z-50", menuList: () => "max-h-52 overflow-y-auto", option: ({ isFocused }: { isFocused: boolean }) => cn( "px-3 py-2.5 text-sm cursor-pointer transition-colors", isFocused ? "bg-brand-50 text-brand-700 dark:bg-brand-500/15 dark:text-brand-300 font-semibold" : "text-slate-700 dark:text-slate-300 font-medium", ), placeholder: () => "text-slate-400 text-sm font-medium", singleValue: () => "text-sm font-semibold text-slate-800 dark:text-slate-100", valueContainer: () => "px-0", dropdownIndicator: () => "text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300", indicatorSeparator: () => "hidden", }; // Portal every menu to so it's never clipped/under-stacked by the // backdrop-blur/overflow-hidden card it lives in (or a sibling card in the // 2-col grid) — same fix as the shared gateway-select pattern. const MENU_PORTAL_PROPS = { menuPortalTarget: typeof document !== "undefined" ? document.body : undefined, menuPosition: "fixed" as const, styles: { menuPortal: (base: object) => ({ ...base, zIndex: 9999 }) }, }; // ─── Helpers ─────────────────────────────────────────────────────────────────── interface CurrencyOpt { value: number; label: string; name: string; flag: string; } function computeCharge(amount: number, txType: AgentTransactionType | undefined) { if (!txType || !amount) return { fixed: 0, percent: 0, total: 0 }; const interval = txType.intervals.find( (iv) => amount >= iv.min_limit && amount <= iv.max_limit, ); const fixed = interval ? interval.fixed : Number(txType.fixed_charge); const percent = interval ? (amount * interval.percent) / 100 : (amount * Number(txType.percent_charge)) / 100; return { fixed, percent, total: fixed + percent }; } // ─── Status Badge ────────────────────────────────────────────────────────────── function StatusBadge({ status }: { status: string }) { const { t } = useTranslation(); const s = status.toLowerCase(); let label = status; let cls = "bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-300"; if (s === "pending") { label = t("agent.sendRemittance.statusPending"); cls = "bg-amber-50 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400"; } else if (s === "complete" || s === "completed") { label = t("agent.sendRemittance.statusComplete"); cls = "bg-emerald-50 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400"; } else if (s === "success") { label = t("agent.sendRemittance.statusSuccess"); cls = "bg-emerald-50 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400"; } else if (s === "cancel" || s === "cancelled" || s === "canceled") { label = t("agent.sendRemittance.statusCancelled"); cls = "bg-rose-50 text-rose-700 dark:bg-rose-500/10 dark:text-rose-400"; } else if (s === "failed") { label = t("agent.sendRemittance.statusFailed"); cls = "bg-rose-50 text-rose-700 dark:bg-rose-500/10 dark:text-rose-400"; } else if (s === "hold" || s === "on_hold") { label = t("agent.sendRemittance.statusOnHold"); cls = "bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-300"; } return ( {label} ); } // ─── Summary Row ─────────────────────────────────────────────────────────────── function SummaryRow({ icon: Icon, label, value, highlight, }: { icon: React.ElementType; label: string; value: string; highlight?: boolean; }) { const { dir } = useTranslation(); return (
{label}
{value}
); } // ─── Transaction Log Row ─────────────────────────────────────────────────────── function LogRow({ tx, index }: { tx: SendRemittanceTx; index: number }) { return (

#{tx.transaction_id}

{tx.transactin_type} · {tx.sender_name}

{Number(tx.request_amount).toFixed(2)}{" "} {tx.sender_currency}

{Number(tx.will_get_amount).toFixed(2)}{" "} {tx.receiver_currency}

{new Date(tx.created_at).toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric", })}

{new Date(tx.created_at).toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit", })}

); } // ─── Transaction Log Section ─────────────────────────────────────────────────── const PAGE_SIZE = 10; function RemittanceLog() { const { data, isLoading, isError, refetch } = useAgentTransactions(); const logs: SendRemittanceTx[] = data?.send_remittance ?? []; const [page, setPage] = useState(1); const { t, dir } = useTranslation(); const totalPages = Math.max(1, Math.ceil(logs.length / PAGE_SIZE)); const safePage = Math.min(page, totalPages); const pageItems = logs.slice((safePage - 1) * PAGE_SIZE, safePage * PAGE_SIZE); return (
{/* Header */}

{t("agent.sendRemittance.logTitle")}

{isLoading ? t("agent.sendRemittance.loading") : t("agent.sendRemittance.transfersCount").replace("{count}", String(logs.length))}

{/* Content */} {isLoading ? (
{Array.from({ length: 5 }).map((_, i) => (
))}
) : isError ? (

{t("agent.sendRemittance.failedToLoadLogs")}

) : logs.length === 0 ? (

{t("agent.sendRemittance.noTransfers")}

{t("agent.sendRemittance.noTransfersDesc")}

) : ( <>
{[t("agent.sendRemittance.colTransaction"), t("agent.sendRemittance.colAmount"), t("agent.sendRemittance.colRecipientGets"), t("agent.sendRemittance.colDate"), t("agent.sendRemittance.colTime"), t("agent.sendRemittance.colStatus")].map((h) => ( {h} ))}
{pageItems.map((tx, i) => ( ))}
{/* Pagination */} {totalPages > 1 && (

{t("agent.sendRemittance.pageSummary") .replace("{page}", String(safePage)) .replace("{total}", String(totalPages)) .replace("{count}", String(logs.length))}

{Array.from({ length: totalPages }, (_, i) => i + 1) .filter((p) => p === 1 || p === totalPages || Math.abs(p - safePage) <= 1) .reduce<(number | "…")[]>((acc, p, idx, arr) => { if (idx > 0 && p - (arr[idx - 1] as number) > 1) acc.push("…"); acc.push(p); return acc; }, []) .map((item, idx) => item === "…" ? ( … ) : ( ) )}
)} )}
); } // ─── Main Page ───────────────────────────────────────────────────────────────── export default function AgentSendRemittancePage() { const { t, dir } = useTranslation(); const kycGateStatus = useAgentKycGate(); const [senderSlug, setSenderSlug] = useState(""); const [recipientSlug, setRecipientSlug] = useState(""); const [txTypeId, setTxTypeId] = useState(null); const [txTypeName, setTxTypeName] = useState(""); const [receiverCurrencyId, setReceiverCurrencyId] = useState(null); const [amount, setAmount] = useState(""); const [submitted, setSubmitted] = useState(false); const [currencySearch, setCurrencySearch] = useState(""); const [senderSearch, setSenderSearch] = useState(""); const [recipientSearch, setRecipientSearch] = useState(""); const currencyRef = useRef(null); const currencyMenu = useControlledSelectMenu(currencyRef, "select-menu-portal"); const senderRef = useRef(null); const senderMenu = useControlledSelectMenu(senderRef, "select-menu-portal"); const recipientRef = useRef(null); const recipientMenu = useControlledSelectMenu(recipientRef, "select-menu-portal"); const { data: indexData, isLoading: indexLoading } = useAgentSendRemittanceIndex(); const { data: currencyInfoData } = useCurrencyInfo(); const { data: recipientsData, isLoading: recipientsLoading } = useAgentRemittanceRecipients(txTypeName); const { mutate: confirm, isPending } = useAgentRemittanceConfirm(); const base = indexData?.base_currency ?? "USD"; const senders = indexData?.sender ?? []; const txTypes = indexData?.transaction_types ?? []; const receiverCurrencies = currencyInfoData?.receiver_currency ?? []; const currencyImagePaths = currencyInfoData?.image_paths; const buildFlagUrl = (flag: string) => currencyImagePaths ? `${currencyImagePaths.base_url}${currencyImagePaths.path_location}/${flag}` : ""; const receiverCurrencyOptions: CurrencyOpt[] = receiverCurrencies.map((c) => ({ value: c.id, label: c.code, name: c.name, flag: buildFlagUrl(c.flag), })); const recipients = recipientsData?.recipients ?? []; const selectedTxType = txTypes.find((t) => t.id === txTypeId); const selectedCurrency = receiverCurrencies.find((c) => c.id === receiverCurrencyId); const selectedSender = senders.find((s) => s.slug === senderSlug); const selectedRecipient = recipients.find((r) => r.slug === recipientSlug); const numAmount = parseFloat(amount) || 0; const charges = useMemo( () => computeCharge(numAmount, selectedTxType), [numAmount, selectedTxType], ); const netAmount = Math.max(0, numAmount - charges.total); const willGet = selectedCurrency ? (netAmount * Number(selectedCurrency.rate)).toFixed(2) : "0.00"; const totalPayable = numAmount + charges.total; const canSubmit = senderSlug && recipientSlug && txTypeId && receiverCurrencyId && numAmount > 0; function handleSend() { if (!canSubmit || !txTypeId || !receiverCurrencyId) return; confirm( { amount, receiver_currency: receiverCurrencyId, sender: senderSlug, recipient: recipientSlug, transaction_type: txTypeId, }, { onSuccess: () => { notify(t("agent.sendRemittance.submittedSuccessfully"), "success"); setSubmitted(true); }, onError: (err: Error) => notify(err.message || t("agent.sendRemittance.submissionFailed"), "error"), }, ); } function reset() { setSenderSlug(""); setRecipientSlug(""); setTxTypeId(null); setTxTypeName(""); setReceiverCurrencyId(null); setAmount(""); setSubmitted(false); } if (indexLoading) { return ; } if (kycGateStatus) { return ; } return ( {/* Page header */}

{t("agent.sendRemittance.title")}

{t("agent.sendRemittance.subtitle")}

{selectedCurrency && (

{t("agent.sendRemittance.exchangeRateLabel")}

{t("agent.sendRemittance.rateFormat").replace("{base}", base).replace("{rate}", Number(selectedCurrency!.rate).toFixed(2)).replace("{code}", selectedCurrency!.code)}

)}
{/* Success State */} {submitted ? (

{t("agent.sendRemittance.transferSubmittedTitle")}

{t("agent.sendRemittance.transferSubmittedDesc")}

) : ( /* Main 2-column layout */ {/* ── Left: Form ── */}

{t("agent.sendRemittance.formTitle")}

{/* Amount */}
setAmount(e.target.value)} placeholder="0.00" className="h-12 flex-1 bg-transparent px-4 text-lg font-semibold text-slate-900 outline-none placeholder:text-slate-300/50 placeholder:font-normal placeholder:text-base dark:text-white dark:placeholder:text-slate-600" />
{base}
{/* Fee breakdown under amount */} {numAmount > 0 && selectedTxType && (
{t("agent.sendRemittance.feesCharges")} -{charges.total.toFixed(2)} {base}
{t("agent.sendRemittance.amountWillConvert")} {netAmount.toFixed(2)} {base}
)}
{/* Recipient Gets */}
instanceId="currency-select" placeholder={t("agent.sendRemittance.currencyPlaceholder")} isSearchable inputValue={currencySearch} onInputChange={(val, { action }) => { if (action === "input-change") setCurrencySearch(val); }} menuIsOpen={currencyMenu.menuIsOpen} onMenuOpen={currencyMenu.onMenuOpen} onMenuClose={() => { currencyMenu.onMenuClose(); setCurrencySearch(""); }} unstyled components={SEARCHABLE_SELECT_COMPONENTS} classNames={SELECT_CLS} {...MENU_PORTAL_PROPS} options={receiverCurrencyOptions} value={receiverCurrencyOptions.find((o) => o.value === receiverCurrencyId) ?? null} onChange={(opt) => setReceiverCurrencyId(opt?.value ?? null)} filterOption={(option, input) => { if (!input) return true; const lower = input.toLowerCase(); return option.data.label.toLowerCase().includes(lower) || option.data.name.toLowerCase().includes(lower); }} formatOptionLabel={(opt, { context }) => context === "menu" ? (
{opt.flag ? ( ) : ( )} {opt.name} {opt.label}
) : (
{opt.flag && ( )} {opt.label}
) } />
{selectedCurrency && numAmount > 0 && (
{willGet} {selectedCurrency.code}
)}
{/* Transfer Method */}
{ if (action === "input-change") setSenderSearch(val); }} menuIsOpen={senderMenu.menuIsOpen} onMenuOpen={senderMenu.onMenuOpen} onMenuClose={() => { senderMenu.onMenuClose(); setSenderSearch(""); }} unstyled components={SEARCHABLE_SELECT_COMPONENTS} classNames={SELECT_CLS} {...MENU_PORTAL_PROPS} options={senders.map((s) => ({ value: s.slug, label: s.name }))} value={senderSlug ? { value: senderSlug, label: selectedSender?.name ?? "" } : null} onChange={(opt) => setSenderSlug(opt?.value ?? "")} />
{/* Recipient */}
{t("agent.sendRemittance.addRecipient")}
{txTypeName ? ( recipientsLoading ? (
) : (