@djangocfg/ext-payments 1.0.6 → 1.0.8

package/dist/hooks.js

@@ -2,13 +2,14 @@ import { createConsola, consola } from 'consola';
 import pRetry, { AbortError } from 'p-retry';
 import { z } from 'zod';
 import { createExtensionAPI } from '@djangocfg/ext-base/api';
+import { RefreshCw, Plus, XCircle, ExternalLink, Wallet, CreditCard, History, Clock, AlertCircle, CheckCircle2, Search, Filter, ArrowDownLeft, ArrowUpRight } from 'lucide-react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Form, FormField, FormItem, FormLabel, FormControl, Input, FormDescription, FormMessage, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, TokenIcon, DialogFooter, Button, CopyButton, Tabs, TabsList, TabsTrigger, TabsContent, Card, CardHeader, CardTitle, Skeleton, CardContent, Badge, useDRFPagination, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, StaticPagination } from '@djangocfg/ui-nextjs';
 import { createContext, useContext, useState, useMemo, useEffect } from 'react';
 import useSWR, { useSWRConfig, SWRConfig } from 'swr';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Form, FormField, FormItem, FormLabel, FormControl, Input, FormDescription, FormMessage, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, TokenIcon, DialogFooter, Button, CopyButton, Tabs, TabsList, TabsTrigger, TabsContent, Card, CardHeader, CardTitle, Skeleton, CardContent, Badge, useDRFPagination, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, StaticPagination } from '@djangocfg/ui-nextjs';
-import { RefreshCw, Plus, XCircle, ExternalLink, Wallet, CreditCard, History, Clock, AlertCircle, CheckCircle2, Search, Filter, ArrowDownLeft, ArrowUpRight } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
+import moment from 'moment';
 import { createExtensionConfig } from '@djangocfg/ext-base';
 
 var __defProp = Object.defineProperty;
@@ -1639,6 +1640,11 @@ function useRootPaymentsContext() {
   }
   return context;
 }
+var isDevelopment = process.env.NODE_ENV === "development";
+var logger = createConsola({
+  level: isDevelopment ? 4 : 1
+}).withTag("ext-payments");
+var paymentsLogger = logger;
 
 // src/layouts/PaymentsLayout/events.ts
 var PAYMENT_EVENTS = {
@@ -1659,156 +1665,526 @@ var openPaymentDetailsDialog = (id) => {
 var closePaymentsDialog = () => {
   window.dispatchEvent(new Event(PAYMENT_EVENTS.CLOSE_DIALOG));
 };
-var BalanceCard = () => {
-  const {
-    balance,
-    isLoadingBalance,
-    refreshBalance
-  } = useOverviewContext();
-  const formatCurrency = (amount) => {
-    if (amount === null || amount === void 0) return "$0.00";
-    return new Intl.NumberFormat("en-US", {
-      style: "currency",
-      currency: "USD",
-      minimumFractionDigits: 2
-    }).format(amount);
+var PaymentCreateSchema = z.object({
+  amount_usd: z.number().min(0.01, "Amount must be at least $0.01"),
+  currency_code: z.string().min(1, "Please select a currency")
+});
+var CreatePaymentDialog = () => {
+  const [open, setOpen] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const { createPayment } = usePaymentsContext();
+  const { currencies, isLoadingCurrencies } = useRootPaymentsContext();
+  const form = useForm({
+    resolver: zodResolver(PaymentCreateSchema),
+    defaultValues: {
+      amount_usd: 10,
+      currency_code: "USDT"
+    }
+  });
+  const currenciesList = useMemo(() => {
+    const data = currencies?.currencies || currencies?.results || currencies || [];
+    return Array.isArray(data) ? data : [];
+  }, [currencies]);
+  const currencyOptions = useMemo(() => {
+    return currenciesList.filter((curr) => curr.is_enabled !== false).map((curr) => ({
+      code: curr.code || curr.currency_code || curr.symbol,
+      name: curr.name || curr.code || curr.currency_code,
+      usd_rate: curr.usd_rate || curr.rate || 1,
+      network: curr.network || null
+    }));
+  }, [currenciesList]);
+  const calculateCryptoAmount = useMemo(() => {
+    const amountUsd = form.watch("amount_usd");
+    const currencyCode = form.watch("currency_code");
+    const currency = currencyOptions.find((c) => c.code === currencyCode);
+    if (!currency || !currency.usd_rate || !amountUsd) {
+      return null;
+    }
+    const cryptoAmount = amountUsd / currency.usd_rate;
+    return {
+      amount: cryptoAmount,
+      currency: currency.code,
+      rate: currency.usd_rate,
+      network: currency.network
+    };
+  }, [form.watch("amount_usd"), form.watch("currency_code"), currencyOptions]);
+  useEffect(() => {
+    const handleOpen = () => setOpen(true);
+    const handleClose2 = () => setOpen(false);
+    window.addEventListener(PAYMENT_EVENTS.OPEN_CREATE_PAYMENT_DIALOG, handleOpen);
+    window.addEventListener(PAYMENT_EVENTS.CLOSE_DIALOG, handleClose2);
+    return () => {
+      window.removeEventListener(PAYMENT_EVENTS.OPEN_CREATE_PAYMENT_DIALOG, handleOpen);
+      window.removeEventListener(PAYMENT_EVENTS.CLOSE_DIALOG, handleClose2);
+    };
+  }, []);
+  const handleClose = () => {
+    setOpen(false);
+    form.reset();
   };
-  const formatDate = (dateStr) => {
-    if (!dateStr) return "No transactions yet";
+  useEffect(() => {
+    if (currencyOptions.length > 0 && !form.getValues("currency_code")) {
+      form.setValue("currency_code", currencyOptions[0].code);
+    }
+  }, [currencyOptions, form]);
+  const handleSubmit = async (data) => {
     try {
-      return new Date(dateStr).toLocaleDateString("en-US", {
-        year: "numeric",
-        month: "short",
-        day: "numeric"
-      });
-    } catch {
-      return "Invalid date";
+      setIsSubmitting(true);
+      const result = await createPayment();
+      handleClose();
+      closePaymentsDialog();
+      const paymentData = result;
+      const paymentId = paymentData?.payment?.id || paymentData?.id;
+      if (paymentId) {
+        openPaymentDetailsDialog(String(paymentId));
+      }
+    } catch (error) {
+      paymentsLogger.error("Failed to create payment:", error);
+    } finally {
+      setIsSubmitting(false);
     }
   };
-  if (isLoadingBalance) {
-    return /* @__PURE__ */ jsxs(Card, { children: [
-      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx(Wallet, { className: "h-5 w-5" }),
-          "Account Balance"
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (isOpen) => !isOpen && handleClose(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-md", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: "Create Payment" }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: "Create a new payment to add funds to your account." })
+    ] }),
+    /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsxs("form", { onSubmit: form.handleSubmit(handleSubmit), className: "space-y-4", children: [
+      /* @__PURE__ */ jsx(
+        FormField,
+        {
+          control: form.control,
+          name: "amount_usd",
+          render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
+            /* @__PURE__ */ jsx(FormLabel, { children: "Amount (USD)" }),
+            /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                type: "number",
+                step: "0.01",
+                min: "0.01",
+                placeholder: "10.00",
+                ...field,
+                onChange: (e) => field.onChange(parseFloat(e.target.value) || 0)
+              }
+            ) }),
+            /* @__PURE__ */ jsx(FormDescription, { children: "The amount you want to pay in USD." }),
+            /* @__PURE__ */ jsx(FormMessage, {})
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FormField,
+        {
+          control: form.control,
+          name: "currency_code",
+          render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
+            /* @__PURE__ */ jsx(FormLabel, { children: "Currency" }),
+            /* @__PURE__ */ jsxs(
+              Select,
+              {
+                onValueChange: field.onChange,
+                defaultValue: field.value,
+                disabled: isLoadingCurrencies,
+                children: [
+                  /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select currency..." }) }) }),
+                  /* @__PURE__ */ jsx(SelectContent, { children: currencyOptions.map((curr) => /* @__PURE__ */ jsx(SelectItem, { value: curr.code, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx(TokenIcon, { symbol: curr.code, size: 16 }),
+                    /* @__PURE__ */ jsx("span", { children: curr.code }),
+                    curr.network && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+                      "(",
+                      curr.network,
+                      ")"
+                    ] })
+                  ] }) }, curr.code)) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(FormDescription, { children: "The cryptocurrency to use for payment." }),
+            /* @__PURE__ */ jsx(FormMessage, {})
+          ] })
+        }
+      ),
+      calculateCryptoAmount && /* @__PURE__ */ jsxs("div", { className: "rounded-sm bg-muted p-4 space-y-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "You will send" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(TokenIcon, { symbol: calculateCryptoAmount.currency, size: 16 }),
+            /* @__PURE__ */ jsxs("span", { className: "font-mono font-semibold", children: [
+              calculateCryptoAmount.amount.toFixed(8),
+              " ",
+              calculateCryptoAmount.currency
+            ] })
+          ] })
         ] }),
-        /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-20" })
-      ] }) }),
-      /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
-        /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-32" }),
-        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-48" })
-      ] })
-    ] });
-  }
-  const balanceData = balance?.balance || balance;
-  const amountUsd = balanceData?.amount_usd ?? 0;
-  const totalDeposited = balanceData?.total_deposited ?? 0;
-  const totalWithdrawn = balanceData?.total_withdrawn ?? 0;
-  const lastTransactionAt = balanceData?.last_transaction_at;
-  const isEmpty = amountUsd === 0 && totalDeposited === 0;
-  return /* @__PURE__ */ jsxs(Card, { children: [
-    /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(Wallet, { className: "h-5 w-5" }),
-        "Account Balance"
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: refreshBalance, children: /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" }) }),
-        /* @__PURE__ */ jsxs(Button, { size: "sm", onClick: () => openCreatePaymentDialog(), children: [
-          /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4 mr-2" }),
-          "Add Funds"
-        ] })
-      ] })
-    ] }) }),
-    /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("div", { className: "text-4xl font-bold", children: formatCurrency(amountUsd) }),
-        /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground mt-1", children: [
-          "Available balance \u2022 Last updated ",
-          formatDate(lastTransactionAt)
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4 pt-4 border-t", children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Total Deposited" }),
-          /* @__PURE__ */ jsx("p", { className: "text-lg font-semibold text-green-600", children: formatCurrency(totalDeposited) })
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "You will receive" }),
+          /* @__PURE__ */ jsxs("span", { className: "text-lg font-bold", children: [
+            "$",
+            form.watch("amount_usd")?.toFixed(2),
+            " USD"
+          ] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Total Withdrawn" }),
-          /* @__PURE__ */ jsx("p", { className: "text-lg font-semibold text-red-600", children: formatCurrency(totalWithdrawn) })
-        ] })
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Rate" }),
+          /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
+            "1 ",
+            calculateCryptoAmount.currency,
+            " = $",
+            calculateCryptoAmount.rate?.toFixed(2)
+          ] })
+        ] }),
+        calculateCryptoAmount.network && /* @__PURE__ */ jsx("div", { className: "border-t pt-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Network" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: calculateCryptoAmount.network })
+        ] }) })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(Badge, { variant: !isEmpty ? "default" : "secondary", children: !isEmpty ? "Active" : "New Account" }),
-        isEmpty && /* @__PURE__ */ jsx(Badge, { variant: "outline", children: "Empty Balance" })
+      /* @__PURE__ */ jsxs(DialogFooter, { children: [
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: handleClose, disabled: isSubmitting, children: "Cancel" }),
+        /* @__PURE__ */ jsx(Button, { type: "submit", disabled: isSubmitting || currencyOptions.length === 0, children: isSubmitting ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4 mr-2 animate-spin" }),
+          "Creating..."
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4 mr-2" }),
+          "Create Payment"
+        ] }) })
+      ] })
+    ] }) })
+  ] }) });
+};
+var PaymentDetailsDialog = () => {
+  const [open, setOpen] = useState(false);
+  const [paymentId, setPaymentId] = useState(null);
+  const [timeLeft, setTimeLeft] = useState("");
+  const shouldFetch = open && !!paymentId;
+  const { data: payment, isLoading, error, mutate } = usePaymentsPaymentsRetrieve(
+    shouldFetch ? paymentId : "",
+    apiPayments
+  );
+  useEffect(() => {
+    const handleOpen = (event) => {
+      const customEvent = event;
+      setPaymentId(customEvent.detail.id);
+      setOpen(true);
+    };
+    const handleClose2 = () => {
+      setOpen(false);
+      setPaymentId(null);
+    };
+    window.addEventListener(PAYMENT_EVENTS.OPEN_PAYMENT_DETAILS_DIALOG, handleOpen);
+    window.addEventListener(PAYMENT_EVENTS.CLOSE_DIALOG, handleClose2);
+    return () => {
+      window.removeEventListener(PAYMENT_EVENTS.OPEN_PAYMENT_DETAILS_DIALOG, handleOpen);
+      window.removeEventListener(PAYMENT_EVENTS.CLOSE_DIALOG, handleClose2);
+    };
+  }, []);
+  const handleClose = () => {
+    setOpen(false);
+    setPaymentId(null);
+  };
+  useEffect(() => {
+    if (!payment?.expires_at) return;
+    const updateTimeLeft = () => {
+      const now = moment();
+      const expires = moment.utc(payment.expires_at);
+      const diff = expires.diff(now);
+      if (diff <= 0) {
+        setTimeLeft("Expired");
+        return;
+      }
+      const duration = moment.duration(diff);
+      const hours = Math.floor(duration.asHours());
+      const minutes = duration.minutes();
+      const seconds = duration.seconds();
+      setTimeLeft(`${hours}h ${minutes}m ${seconds}s`);
+    };
+    updateTimeLeft();
+    const interval = setInterval(updateTimeLeft, 1e3);
+    return () => clearInterval(interval);
+  }, [payment?.expires_at]);
+  const getStatusInfo = () => {
+    switch (payment?.status?.toLowerCase()) {
+      case "pending":
+        return { icon: Clock, color: "text-yellow-500", bg: "bg-yellow-500/10" };
+      case "completed":
+      case "success":
+        return { icon: CheckCircle2, color: "text-green-500", bg: "bg-green-500/10" };
+      case "failed":
+      case "error":
+        return { icon: XCircle, color: "text-red-500", bg: "bg-red-500/10" };
+      case "expired":
+        return { icon: AlertCircle, color: "text-gray-500", bg: "bg-gray-500/10" };
+      case "confirming":
+        return { icon: RefreshCw, color: "text-blue-500", bg: "bg-blue-500/10" };
+      default:
+        return { icon: Clock, color: "text-gray-500", bg: "bg-gray-500/10" };
+    }
+  };
+  if (!open) return null;
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (isOpen) => !isOpen && handleClose(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-lg", children: [
+      /* @__PURE__ */ jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: "Payment Details" }),
+        /* @__PURE__ */ jsx(DialogDescription, { children: "Loading payment information..." })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx(RefreshCw, { className: "h-8 w-8 animate-spin text-muted-foreground" }) })
+    ] }) });
+  }
+  if (shouldFetch && !isLoading && (error || !payment)) {
+    return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (isOpen) => !isOpen && handleClose(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-lg", children: [
+      /* @__PURE__ */ jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: "Payment Details" }),
+        /* @__PURE__ */ jsx(DialogDescription, { children: "Failed to load payment information" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-12 space-y-4", children: [
+        /* @__PURE__ */ jsx(XCircle, { className: "h-12 w-12 text-destructive" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: error ? `Error: ${error}` : "Payment not found" }),
+        /* @__PURE__ */ jsx(Button, { onClick: () => mutate(), children: "Try Again" })
+      ] })
+    ] }) });
+  }
+  const statusInfo = getStatusInfo();
+  const StatusIcon = statusInfo.icon;
+  const qrCodeUrl = payment.pay_address ? `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(payment.pay_address)}` : null;
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (isOpen) => !isOpen && handleClose(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-lg", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: "Payment Details" }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: "Send cryptocurrency to complete your payment" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-3 p-4 rounded-sm ${statusInfo.bg}`, children: [
+        /* @__PURE__ */ jsx(StatusIcon, { className: `h-5 w-5 ${statusInfo.color}` }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+          /* @__PURE__ */ jsx("div", { className: "font-semibold capitalize", children: payment.status }),
+          payment.status === "pending" && timeLeft && /* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground", children: [
+            "Expires in ",
+            timeLeft
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4 bg-muted rounded-sm", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Amount to send" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(TokenIcon, { symbol: String(payment.currency_code || "BTC"), size: 20 }),
+            /* @__PURE__ */ jsxs("span", { className: "font-mono font-bold text-lg", children: [
+              payment.pay_amount || "0.00000000",
+              " ",
+              payment.currency_code
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Equivalent to" }),
+          /* @__PURE__ */ jsxs("span", { className: "font-semibold text-lg", children: [
+            "$",
+            parseFloat(payment.amount_usd || "0").toFixed(2),
+            " USD"
+          ] })
+        ] }),
+        payment.internal_payment_id && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Payment Order #" }),
+          /* @__PURE__ */ jsx("span", { className: "font-mono font-medium", children: payment.internal_payment_id })
+        ] }),
+        payment.currency_network && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Network" }),
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: payment.currency_network })
+        ] })
+      ] }),
+      qrCodeUrl && payment.status === "pending" && /* @__PURE__ */ jsx("div", { className: "flex justify-center p-6 bg-white rounded-sm", children: /* @__PURE__ */ jsx("img", { src: qrCodeUrl, alt: "Payment QR Code", className: "w-48 h-48" }) }),
+      payment.pay_address && payment.status === "pending" && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: "Payment Address" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex-1 p-3 bg-muted rounded-sm font-mono text-sm break-all", children: payment.pay_address }),
+          /* @__PURE__ */ jsx(CopyButton, { value: payment.pay_address, variant: "outline" })
+        ] })
+      ] }),
+      payment.transaction_hash && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: "Transaction Hash" }),
+        /* @__PURE__ */ jsx("div", { className: "p-3 bg-muted rounded-sm font-mono text-sm break-all", children: payment.transaction_hash })
+      ] }),
+      payment.payment_url && payment.status === "pending" && /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "outline",
+          className: "w-full",
+          onClick: () => window.open(payment.payment_url, "_blank"),
+          children: [
+            /* @__PURE__ */ jsx(ExternalLink, { className: "h-4 w-4 mr-2" }),
+            "Open in Payment Provider"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "pt-4 border-t space-y-2 text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+          /* @__PURE__ */ jsx("span", { children: "Payment ID" }),
+          /* @__PURE__ */ jsx("span", { className: "font-mono", children: payment.id })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+          /* @__PURE__ */ jsx("span", { children: "Created" }),
+          /* @__PURE__ */ jsx("span", { children: moment.utc(payment.created_at).local().format("MMM D, YYYY HH:mm") })
+        ] }),
+        payment.confirmations_count !== void 0 && /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+          /* @__PURE__ */ jsx("span", { children: "Confirmations" }),
+          /* @__PURE__ */ jsx("span", { children: payment.confirmations_count })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: handleClose, children: "Close" }),
+      /* @__PURE__ */ jsxs(Button, { onClick: () => mutate(), variant: "ghost", size: "sm", children: [
+        /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4 mr-2" }),
+        "Refresh"
       ] })
     ] })
-  ] });
+  ] }) });
 };
-var RecentPayments = () => {
-  const { payments, isLoadingPayments } = useOverviewContext();
+var BalanceCard = () => {
+  const {
+    balance,
+    isLoadingBalance,
+    refreshBalance
+  } = useOverviewContext();
   const formatCurrency = (amount) => {
     if (amount === null || amount === void 0) return "$0.00";
-    const numAmount = typeof amount === "string" ? parseFloat(amount) : amount;
     return new Intl.NumberFormat("en-US", {
       style: "currency",
       currency: "USD",
       minimumFractionDigits: 2
-    }).format(numAmount);
-  };
-  const getRelativeTime = (date) => {
-    if (!date) return "N/A";
-    const now = /* @__PURE__ */ new Date();
-    const target = new Date(date);
-    const diffInSeconds = Math.floor((now.getTime() - target.getTime()) / 1e3);
-    if (diffInSeconds < 60) return "Just now";
-    if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}m ago`;
-    if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)}h ago`;
-    return `${Math.floor(diffInSeconds / 86400)}d ago`;
+    }).format(amount);
   };
-  const getStatusVariant = (status) => {
-    switch (status?.toLowerCase()) {
-      case "completed":
-      case "success":
-        return "default";
-      case "pending":
-      case "confirming":
-        return "secondary";
-      case "failed":
-      case "error":
-      case "expired":
-        return "destructive";
-      default:
-        return "outline";
+  const formatDate = (dateStr) => {
+    if (!dateStr) return "No transactions yet";
+    try {
+      return moment.utc(dateStr).local().format("MMM D, YYYY");
+    } catch {
+      return "Invalid date";
     }
   };
-  if (isLoadingPayments) {
+  if (isLoadingBalance) {
     return /* @__PURE__ */ jsxs(Card, { children: [
-      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(History, { className: "h-5 w-5" }),
-        "Recent Payments"
-      ] }) }),
-      /* @__PURE__ */ jsx(CardContent, { className: "space-y-3", children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-3 border rounded-sm", children: [
-        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32" }),
-          /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-24" })
+      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Wallet, { className: "h-5 w-5" }),
+          "Account Balance"
         ] }),
-        /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-16" })
-      ] }, i)) })
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-20" })
+      ] }) }),
+      /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-32" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-48" })
+      ] })
     ] });
   }
-  const recentPaymentsList = payments?.results?.slice(0, 5) || [];
+  const balanceData = balance?.balance || balance;
+  const amountUsd = balanceData?.amount_usd ?? 0;
+  const totalDeposited = balanceData?.total_deposited ?? 0;
+  const totalWithdrawn = balanceData?.total_withdrawn ?? 0;
+  const lastTransactionAt = balanceData?.last_transaction_at;
+  const isEmpty = amountUsd === 0 && totalDeposited === 0;
   return /* @__PURE__ */ jsxs(Card, { children: [
     /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(History, { className: "h-5 w-5" }),
-        "Recent Payments"
+        /* @__PURE__ */ jsx(Wallet, { className: "h-5 w-5" }),
+        "Account Balance"
       ] }),
-      /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", children: [
-        "View All",
-        /* @__PURE__ */ jsx(ExternalLink, { className: "h-4 w-4 ml-2" })
-      ] })
-    ] }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: refreshBalance, children: /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsxs(Button, { size: "sm", onClick: () => openCreatePaymentDialog(), children: [
+          /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4 mr-2" }),
+          "Add Funds"
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: "text-4xl font-bold", children: formatCurrency(amountUsd) }),
+        /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground mt-1", children: [
+          "Available balance \u2022 Last updated ",
+          formatDate(lastTransactionAt)
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4 pt-4 border-t", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Total Deposited" }),
+          /* @__PURE__ */ jsx("p", { className: "text-lg font-semibold text-green-600", children: formatCurrency(totalDeposited) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Total Withdrawn" }),
+          /* @__PURE__ */ jsx("p", { className: "text-lg font-semibold text-red-600", children: formatCurrency(totalWithdrawn) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Badge, { variant: !isEmpty ? "default" : "secondary", children: !isEmpty ? "Active" : "New Account" }),
+        isEmpty && /* @__PURE__ */ jsx(Badge, { variant: "outline", children: "Empty Balance" })
+      ] })
+    ] })
+  ] });
+};
+var RecentPayments = () => {
+  const { payments, isLoadingPayments } = useOverviewContext();
+  const formatCurrency = (amount) => {
+    if (amount === null || amount === void 0) return "$0.00";
+    const numAmount = typeof amount === "string" ? parseFloat(amount) : amount;
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: "USD",
+      minimumFractionDigits: 2
+    }).format(numAmount);
+  };
+  const getRelativeTime = (date) => {
+    if (!date) return "N/A";
+    const m = moment.utc(date).local();
+    const now = moment();
+    const diffInSeconds = now.diff(m, "seconds");
+    if (diffInSeconds < 60) return "Just now";
+    if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}m ago`;
+    if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)}h ago`;
+    return `${Math.floor(diffInSeconds / 86400)}d ago`;
+  };
+  const getStatusVariant = (status) => {
+    switch (status?.toLowerCase()) {
+      case "completed":
+      case "success":
+        return "default";
+      case "pending":
+      case "confirming":
+        return "secondary";
+      case "failed":
+      case "error":
+      case "expired":
+        return "destructive";
+      default:
+        return "outline";
+    }
+  };
+  if (isLoadingPayments) {
+    return /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(History, { className: "h-5 w-5" }),
+        "Recent Payments"
+      ] }) }),
+      /* @__PURE__ */ jsx(CardContent, { className: "space-y-3", children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-3 border rounded-sm", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-24" })
+        ] }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-16" })
+      ] }, i)) })
+    ] });
+  }
+  const recentPaymentsList = payments?.results?.slice(0, 5) || [];
+  return /* @__PURE__ */ jsxs(Card, { children: [
+    /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(History, { className: "h-5 w-5" }),
+        "Recent Payments"
+      ] }),
+      /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", children: [
+        "View All",
+        /* @__PURE__ */ jsx(ExternalLink, { className: "h-4 w-4 ml-2" })
+      ] })
+    ] }) }),
     /* @__PURE__ */ jsx(CardContent, { children: recentPaymentsList.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "text-center py-8 text-muted-foreground", children: [
       /* @__PURE__ */ jsx(History, { className: "h-12 w-12 mx-auto mb-4 opacity-50" }),
       /* @__PURE__ */ jsx("p", { children: "No recent payments" }),
@@ -1866,14 +2242,18 @@ var PaymentsList = () => {
   };
   const getRelativeTime = (date) => {
     if (!date) return "N/A";
-    const now = /* @__PURE__ */ new Date();
-    const target = new Date(date);
-    const diffInSeconds = Math.floor((now.getTime() - target.getTime()) / 1e3);
+    const m = moment.utc(date).local();
+    const now = moment();
+    const diffInSeconds = now.diff(m, "seconds");
     if (diffInSeconds < 60) return "Just now";
     if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}m ago`;
     if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)}h ago`;
     return `${Math.floor(diffInSeconds / 86400)}d ago`;
   };
+  const formatDate = (date) => {
+    if (!date) return "N/A";
+    return moment.utc(date).local().format("MMM D, YYYY");
+  };
   const getStatusVariant = (status) => {
     switch (status?.toLowerCase()) {
       case "completed":
@@ -1896,11 +2276,21 @@ var PaymentsList = () => {
   const handleStatusFilter = (status) => {
     setStatusFilter(status);
   };
+  const truncateId = (id) => {
+    if (!id) return "N/A";
+    const str = id.toString();
+    return str.length > 8 ? `${str.slice(0, 8)}...` : str;
+  };
   const filteredPayments = paymentsList.filter((payment) => {
     const matchesSearch = searchTerm ? payment.id?.toLowerCase().includes(searchTerm.toLowerCase()) || payment.status?.toLowerCase().includes(searchTerm.toLowerCase()) || payment.currency_code?.toLowerCase().includes(searchTerm.toLowerCase()) : true;
     const matchesStatus = statusFilter !== "all" ? payment.status?.toLowerCase() === statusFilter.toLowerCase() : true;
     return matchesSearch && matchesStatus;
-  });
+  }).map((payment) => ({
+    ...payment,
+    formattedDate: formatDate(payment.created_at),
+    relativeTime: getRelativeTime(payment.created_at),
+    truncatedId: truncateId(payment.id)
+  }));
   return /* @__PURE__ */ jsxs(Card, { children: [
     /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsx("span", { children: "Payment History" }),
@@ -1976,14 +2366,14 @@ var PaymentsList = () => {
               onClick: () => openPaymentDetailsDialog(String(payment.id)),
               children: [
                 /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx("div", { className: "font-medium", children: payment.created_at ? new Date(payment.created_at).toLocaleDateString() : "N/A" }),
-                  /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: getRelativeTime(payment.created_at) })
+                  /* @__PURE__ */ jsx("div", { className: "font-medium", children: payment.formattedDate }),
+                  /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: payment.relativeTime })
                 ] }) }),
                 /* @__PURE__ */ jsx(TableCell, { className: "font-mono font-semibold", children: formatCurrency(payment.amount_usd) }),
                 /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Badge, { variant: "outline", children: payment.currency_code || "USD" }) }),
                 /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Badge, { variant: getStatusVariant(payment.status), children: payment.status }) }),
                 /* @__PURE__ */ jsx(TableCell, { className: "text-sm text-muted-foreground", children: "NowPayments" }),
-                /* @__PURE__ */ jsx(TableCell, { className: "font-mono text-sm text-muted-foreground", children: payment.id ? `${payment.id.toString().slice(0, 8)}...` : "N/A" }),
+                /* @__PURE__ */ jsx(TableCell, { className: "font-mono text-sm text-muted-foreground", children: payment.truncatedId }),
                 /* @__PURE__ */ jsx(TableCell, { className: "text-right", children: /* @__PURE__ */ jsx(
                   Button,
                   {
@@ -2036,22 +2426,16 @@ var TransactionsList = () => {
   const formatDate = (date) => {
     if (!date) return "N/A";
     try {
-      return new Date(date).toLocaleString("en-US", {
-        year: "numeric",
-        month: "short",
-        day: "numeric",
-        hour: "2-digit",
-        minute: "2-digit"
-      });
+      return moment.utc(date).local().format("MMM D, YYYY hh:mm A");
     } catch {
       return "Invalid date";
     }
   };
   const getRelativeTime = (date) => {
     if (!date) return "N/A";
-    const now = /* @__PURE__ */ new Date();
-    const target = new Date(date);
-    const diffInSeconds = Math.floor((now.getTime() - target.getTime()) / 1e3);
+    const m = moment.utc(date).local();
+    const now = moment();
+    const diffInSeconds = now.diff(m, "seconds");
     if (diffInSeconds < 60) return "Just now";
     if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}m ago`;
     if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)}h ago`;
@@ -2081,11 +2465,22 @@ var TransactionsList = () => {
     setTypeFilter(type);
     await refreshTransactions();
   };
+  const truncateId = (id) => {
+    if (!id) return "N/A";
+    const str = id.toString();
+    return str.length > 8 ? `${str.slice(0, 8)}...` : str;
+  };
   const filteredTransactions = transactionsList.filter((transaction) => {
     const matchesSearch = searchTerm ? transaction.id?.toString().toLowerCase().includes(searchTerm.toLowerCase()) || transaction.description?.toLowerCase().includes(searchTerm.toLowerCase()) || transaction.type?.toLowerCase().includes(searchTerm.toLowerCase()) : true;
     const matchesType = typeFilter !== "all" ? transaction.type?.toLowerCase() === typeFilter.toLowerCase() : true;
     return matchesSearch && matchesType;
-  });
+  }).map((transaction) => ({
+    ...transaction,
+    isDeposit: transaction.type?.toLowerCase() === "deposit" || transaction.type?.toLowerCase() === "credit",
+    formattedDate: formatDate(transaction.created_at || transaction.timestamp),
+    relativeTime: getRelativeTime(transaction.created_at || transaction.timestamp),
+    truncatedRef: truncateId(transaction.reference || transaction.payment_id)
+  }));
   if (isLoadingTransactions) {
     return /* @__PURE__ */ jsxs(Card, { children: [
       /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2", children: [
@@ -2151,26 +2546,23 @@ var TransactionsList = () => {
           /* @__PURE__ */ jsx(TableHead, { children: "Description" }),
           /* @__PURE__ */ jsx(TableHead, { children: "Reference" })
         ] }) }),
-        /* @__PURE__ */ jsx(TableBody, { children: filteredTransactions.map((transaction, index) => {
-          const isDeposit = transaction.type?.toLowerCase() === "deposit" || transaction.type?.toLowerCase() === "credit";
-          return /* @__PURE__ */ jsxs(TableRow, { children: [
-            /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("div", { className: "font-medium", children: formatDate(transaction.created_at || transaction.timestamp) }),
-              /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: getRelativeTime(transaction.created_at || transaction.timestamp) })
-            ] }) }),
-            /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              getTypeIcon(transaction.type),
-              /* @__PURE__ */ jsx(Badge, { variant: getTypeVariant(transaction.type), children: transaction.type || "Unknown" })
-            ] }) }),
-            /* @__PURE__ */ jsx(TableCell, { className: "font-mono font-semibold", children: /* @__PURE__ */ jsxs("span", { className: isDeposit ? "text-green-600" : "text-red-600", children: [
-              isDeposit ? "+" : "-",
-              formatCurrency(Math.abs(transaction.amount || transaction.amount_usd || 0))
-            ] }) }),
-            /* @__PURE__ */ jsx(TableCell, { className: "font-mono", children: formatCurrency(transaction.balance_after || 0) }),
-            /* @__PURE__ */ jsx(TableCell, { className: "text-sm", children: transaction.description || transaction.note || "No description" }),
-            /* @__PURE__ */ jsx(TableCell, { className: "font-mono text-sm text-muted-foreground", children: transaction.reference || transaction.payment_id ? `${(transaction.reference || transaction.payment_id).toString().slice(0, 8)}...` : "N/A" })
-          ] }, transaction.id || index);
-        }) })
+        /* @__PURE__ */ jsx(TableBody, { children: filteredTransactions.map((transaction, index) => /* @__PURE__ */ jsxs(TableRow, { children: [
+          /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { className: "font-medium", children: transaction.formattedDate }),
+            /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: transaction.relativeTime })
+          ] }) }),
+          /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            getTypeIcon(transaction.type),
+            /* @__PURE__ */ jsx(Badge, { variant: getTypeVariant(transaction.type), children: transaction.type || "Unknown" })
+          ] }) }),
+          /* @__PURE__ */ jsx(TableCell, { className: "font-mono font-semibold", children: /* @__PURE__ */ jsxs("span", { className: transaction.isDeposit ? "text-green-600" : "text-red-600", children: [
+            transaction.isDeposit ? "+" : "-",
+            formatCurrency(Math.abs(transaction.amount || transaction.amount_usd || 0))
+          ] }) }),
+          /* @__PURE__ */ jsx(TableCell, { className: "font-mono", children: formatCurrency(transaction.balance_after || 0) }),
+          /* @__PURE__ */ jsx(TableCell, { className: "text-sm", children: transaction.description || transaction.note || "No description" }),
+          /* @__PURE__ */ jsx(TableCell, { className: "font-mono text-sm text-muted-foreground", children: transaction.truncatedRef })
+        ] }, transaction.id || index)) })
       ] }) })
     ] })
   ] });
@@ -2178,384 +2570,6 @@ var TransactionsList = () => {
 var TransactionsView = () => {
   return /* @__PURE__ */ jsx("div", { className: "space-y-6", children: /* @__PURE__ */ jsx(TransactionsList, {}) });
 };
-var isDevelopment = process.env.NODE_ENV === "development";
-var logger = createConsola({
-  level: isDevelopment ? 4 : 1
-}).withTag("ext-payments");
-var paymentsLogger = logger;
-var PaymentCreateSchema = z.object({
-  amount_usd: z.number().min(0.01, "Amount must be at least $0.01"),
-  currency_code: z.string().min(1, "Please select a currency")
-});
-var CreatePaymentDialog = () => {
-  const [open, setOpen] = useState(false);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const { createPayment } = usePaymentsContext();
-  const { currencies, isLoadingCurrencies } = useRootPaymentsContext();
-  const form = useForm({
-    resolver: zodResolver(PaymentCreateSchema),
-    defaultValues: {
-      amount_usd: 10,
-      currency_code: "USDT"
-    }
-  });
-  const currenciesList = useMemo(() => {
-    const data = currencies?.currencies || currencies?.results || currencies || [];
-    return Array.isArray(data) ? data : [];
-  }, [currencies]);
-  const currencyOptions = useMemo(() => {
-    return currenciesList.filter((curr) => curr.is_enabled !== false).map((curr) => ({
-      code: curr.code || curr.currency_code || curr.symbol,
-      name: curr.name || curr.code || curr.currency_code,
-      usd_rate: curr.usd_rate || curr.rate || 1,
-      network: curr.network || null
-    }));
-  }, [currenciesList]);
-  const calculateCryptoAmount = useMemo(() => {
-    const amountUsd = form.watch("amount_usd");
-    const currencyCode = form.watch("currency_code");
-    const currency = currencyOptions.find((c) => c.code === currencyCode);
-    if (!currency || !currency.usd_rate || !amountUsd) {
-      return null;
-    }
-    const cryptoAmount = amountUsd / currency.usd_rate;
-    return {
-      amount: cryptoAmount,
-      currency: currency.code,
-      rate: currency.usd_rate,
-      network: currency.network
-    };
-  }, [form.watch("amount_usd"), form.watch("currency_code"), currencyOptions]);
-  useEffect(() => {
-    const handleOpen = () => setOpen(true);
-    const handleClose2 = () => setOpen(false);
-    window.addEventListener(PAYMENT_EVENTS.OPEN_CREATE_PAYMENT_DIALOG, handleOpen);
-    window.addEventListener(PAYMENT_EVENTS.CLOSE_DIALOG, handleClose2);
-    return () => {
-      window.removeEventListener(PAYMENT_EVENTS.OPEN_CREATE_PAYMENT_DIALOG, handleOpen);
-      window.removeEventListener(PAYMENT_EVENTS.CLOSE_DIALOG, handleClose2);
-    };
-  }, []);
-  const handleClose = () => {
-    setOpen(false);
-    form.reset();
-  };
-  useEffect(() => {
-    if (currencyOptions.length > 0 && !form.getValues("currency_code")) {
-      form.setValue("currency_code", currencyOptions[0].code);
-    }
-  }, [currencyOptions, form]);
-  const handleSubmit = async (data) => {
-    try {
-      setIsSubmitting(true);
-      const result = await createPayment();
-      handleClose();
-      closePaymentsDialog();
-      const paymentData = result;
-      const paymentId = paymentData?.payment?.id || paymentData?.id;
-      if (paymentId) {
-        openPaymentDetailsDialog(String(paymentId));
-      }
-    } catch (error) {
-      paymentsLogger.error("Failed to create payment:", error);
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (isOpen) => !isOpen && handleClose(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-md", children: [
-    /* @__PURE__ */ jsxs(DialogHeader, { children: [
-      /* @__PURE__ */ jsx(DialogTitle, { children: "Create Payment" }),
-      /* @__PURE__ */ jsx(DialogDescription, { children: "Create a new payment to add funds to your account." })
-    ] }),
-    /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsxs("form", { onSubmit: form.handleSubmit(handleSubmit), className: "space-y-4", children: [
-      /* @__PURE__ */ jsx(
-        FormField,
-        {
-          control: form.control,
-          name: "amount_usd",
-          render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
-            /* @__PURE__ */ jsx(FormLabel, { children: "Amount (USD)" }),
-            /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
-              Input,
-              {
-                type: "number",
-                step: "0.01",
-                min: "0.01",
-                placeholder: "10.00",
-                ...field,
-                onChange: (e) => field.onChange(parseFloat(e.target.value) || 0)
-              }
-            ) }),
-            /* @__PURE__ */ jsx(FormDescription, { children: "The amount you want to pay in USD." }),
-            /* @__PURE__ */ jsx(FormMessage, {})
-          ] })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        FormField,
-        {
-          control: form.control,
-          name: "currency_code",
-          render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
-            /* @__PURE__ */ jsx(FormLabel, { children: "Currency" }),
-            /* @__PURE__ */ jsxs(
-              Select,
-              {
-                onValueChange: field.onChange,
-                defaultValue: field.value,
-                disabled: isLoadingCurrencies,
-                children: [
-                  /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select currency..." }) }) }),
-                  /* @__PURE__ */ jsx(SelectContent, { children: currencyOptions.map((curr) => /* @__PURE__ */ jsx(SelectItem, { value: curr.code, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsx(TokenIcon, { symbol: curr.code, size: 16 }),
-                    /* @__PURE__ */ jsx("span", { children: curr.code }),
-                    curr.network && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
-                      "(",
-                      curr.network,
-                      ")"
-                    ] })
-                  ] }) }, curr.code)) })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(FormDescription, { children: "The cryptocurrency to use for payment." }),
-            /* @__PURE__ */ jsx(FormMessage, {})
-          ] })
-        }
-      ),
-      calculateCryptoAmount && /* @__PURE__ */ jsxs("div", { className: "rounded-sm bg-muted p-4 space-y-3", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "You will send" }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(TokenIcon, { symbol: calculateCryptoAmount.currency, size: 16 }),
-            /* @__PURE__ */ jsxs("span", { className: "font-mono font-semibold", children: [
-              calculateCryptoAmount.amount.toFixed(8),
-              " ",
-              calculateCryptoAmount.currency
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "You will receive" }),
-          /* @__PURE__ */ jsxs("span", { className: "text-lg font-bold", children: [
-            "$",
-            form.watch("amount_usd")?.toFixed(2),
-            " USD"
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Rate" }),
-          /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
-            "1 ",
-            calculateCryptoAmount.currency,
-            " = $",
-            calculateCryptoAmount.rate?.toFixed(2)
-          ] })
-        ] }),
-        calculateCryptoAmount.network && /* @__PURE__ */ jsx("div", { className: "border-t pt-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Network" }),
-          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: calculateCryptoAmount.network })
-        ] }) })
-      ] }),
-      /* @__PURE__ */ jsxs(DialogFooter, { children: [
-        /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: handleClose, disabled: isSubmitting, children: "Cancel" }),
-        /* @__PURE__ */ jsx(Button, { type: "submit", disabled: isSubmitting || currencyOptions.length === 0, children: isSubmitting ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4 mr-2 animate-spin" }),
-          "Creating..."
-        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4 mr-2" }),
-          "Create Payment"
-        ] }) })
-      ] })
-    ] }) })
-  ] }) });
-};
-var PaymentDetailsDialog = () => {
-  const [open, setOpen] = useState(false);
-  const [paymentId, setPaymentId] = useState(null);
-  const [timeLeft, setTimeLeft] = useState("");
-  const shouldFetch = open && !!paymentId;
-  const { data: payment, isLoading, error, mutate } = usePaymentsPaymentsRetrieve(
-    shouldFetch ? paymentId : "",
-    apiPayments
-  );
-  useEffect(() => {
-    const handleOpen = (event) => {
-      const customEvent = event;
-      setPaymentId(customEvent.detail.id);
-      setOpen(true);
-    };
-    const handleClose2 = () => {
-      setOpen(false);
-      setPaymentId(null);
-    };
-    window.addEventListener(PAYMENT_EVENTS.OPEN_PAYMENT_DETAILS_DIALOG, handleOpen);
-    window.addEventListener(PAYMENT_EVENTS.CLOSE_DIALOG, handleClose2);
-    return () => {
-      window.removeEventListener(PAYMENT_EVENTS.OPEN_PAYMENT_DETAILS_DIALOG, handleOpen);
-      window.removeEventListener(PAYMENT_EVENTS.CLOSE_DIALOG, handleClose2);
-    };
-  }, []);
-  const handleClose = () => {
-    setOpen(false);
-    setPaymentId(null);
-  };
-  useEffect(() => {
-    if (!payment?.expires_at) return;
-    const updateTimeLeft = () => {
-      const now = (/* @__PURE__ */ new Date()).getTime();
-      const expires = new Date(payment.expires_at).getTime();
-      const diff = expires - now;
-      if (diff <= 0) {
-        setTimeLeft("Expired");
-        return;
-      }
-      const hours = Math.floor(diff / (1e3 * 60 * 60));
-      const minutes = Math.floor(diff % (1e3 * 60 * 60) / (1e3 * 60));
-      const seconds = Math.floor(diff % (1e3 * 60) / 1e3);
-      setTimeLeft(`${hours}h ${minutes}m ${seconds}s`);
-    };
-    updateTimeLeft();
-    const interval = setInterval(updateTimeLeft, 1e3);
-    return () => clearInterval(interval);
-  }, [payment?.expires_at]);
-  const getStatusInfo = () => {
-    switch (payment?.status?.toLowerCase()) {
-      case "pending":
-        return { icon: Clock, color: "text-yellow-500", bg: "bg-yellow-500/10" };
-      case "completed":
-      case "success":
-        return { icon: CheckCircle2, color: "text-green-500", bg: "bg-green-500/10" };
-      case "failed":
-      case "error":
-        return { icon: XCircle, color: "text-red-500", bg: "bg-red-500/10" };
-      case "expired":
-        return { icon: AlertCircle, color: "text-gray-500", bg: "bg-gray-500/10" };
-      case "confirming":
-        return { icon: RefreshCw, color: "text-blue-500", bg: "bg-blue-500/10" };
-      default:
-        return { icon: Clock, color: "text-gray-500", bg: "bg-gray-500/10" };
-    }
-  };
-  if (!open) return null;
-  if (isLoading) {
-    return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (isOpen) => !isOpen && handleClose(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-lg", children: [
-      /* @__PURE__ */ jsxs(DialogHeader, { children: [
-        /* @__PURE__ */ jsx(DialogTitle, { children: "Payment Details" }),
-        /* @__PURE__ */ jsx(DialogDescription, { children: "Loading payment information..." })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx(RefreshCw, { className: "h-8 w-8 animate-spin text-muted-foreground" }) })
-    ] }) });
-  }
-  if (shouldFetch && !isLoading && (error || !payment)) {
-    return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (isOpen) => !isOpen && handleClose(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-lg", children: [
-      /* @__PURE__ */ jsxs(DialogHeader, { children: [
-        /* @__PURE__ */ jsx(DialogTitle, { children: "Payment Details" }),
-        /* @__PURE__ */ jsx(DialogDescription, { children: "Failed to load payment information" })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-12 space-y-4", children: [
-        /* @__PURE__ */ jsx(XCircle, { className: "h-12 w-12 text-destructive" }),
-        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: error ? `Error: ${error}` : "Payment not found" }),
-        /* @__PURE__ */ jsx(Button, { onClick: () => mutate(), children: "Try Again" })
-      ] })
-    ] }) });
-  }
-  const statusInfo = getStatusInfo();
-  const StatusIcon = statusInfo.icon;
-  const qrCodeUrl = payment.pay_address ? `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(payment.pay_address)}` : null;
-  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (isOpen) => !isOpen && handleClose(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-lg", children: [
-    /* @__PURE__ */ jsxs(DialogHeader, { children: [
-      /* @__PURE__ */ jsx(DialogTitle, { children: "Payment Details" }),
-      /* @__PURE__ */ jsx(DialogDescription, { children: "Send cryptocurrency to complete your payment" })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
-      /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-3 p-4 rounded-sm ${statusInfo.bg}`, children: [
-        /* @__PURE__ */ jsx(StatusIcon, { className: `h-5 w-5 ${statusInfo.color}` }),
-        /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-          /* @__PURE__ */ jsx("div", { className: "font-semibold capitalize", children: payment.status }),
-          payment.status === "pending" && timeLeft && /* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground", children: [
-            "Expires in ",
-            timeLeft
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4 bg-muted rounded-sm", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Amount to send" }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(TokenIcon, { symbol: String(payment.currency_code || "BTC"), size: 20 }),
-            /* @__PURE__ */ jsxs("span", { className: "font-mono font-bold text-lg", children: [
-              payment.pay_amount || "0.00000000",
-              " ",
-              payment.currency_code
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Equivalent to" }),
-          /* @__PURE__ */ jsxs("span", { className: "font-semibold text-lg", children: [
-            "$",
-            parseFloat(payment.amount_usd || "0").toFixed(2),
-            " USD"
-          ] })
-        ] }),
-        payment.internal_payment_id && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Payment Order #" }),
-          /* @__PURE__ */ jsx("span", { className: "font-mono font-medium", children: payment.internal_payment_id })
-        ] }),
-        payment.currency_network && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Network" }),
-          /* @__PURE__ */ jsx("span", { className: "font-medium", children: payment.currency_network })
-        ] })
-      ] }),
-      qrCodeUrl && payment.status === "pending" && /* @__PURE__ */ jsx("div", { className: "flex justify-center p-6 bg-white rounded-sm", children: /* @__PURE__ */ jsx("img", { src: qrCodeUrl, alt: "Payment QR Code", className: "w-48 h-48" }) }),
-      payment.pay_address && payment.status === "pending" && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: "Payment Address" }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx("div", { className: "flex-1 p-3 bg-muted rounded-sm font-mono text-sm break-all", children: payment.pay_address }),
-          /* @__PURE__ */ jsx(CopyButton, { value: payment.pay_address, variant: "outline" })
-        ] })
-      ] }),
-      payment.transaction_hash && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: "Transaction Hash" }),
-        /* @__PURE__ */ jsx("div", { className: "p-3 bg-muted rounded-sm font-mono text-sm break-all", children: payment.transaction_hash })
-      ] }),
-      payment.payment_url && payment.status === "pending" && /* @__PURE__ */ jsxs(
-        Button,
-        {
-          variant: "outline",
-          className: "w-full",
-          onClick: () => window.open(payment.payment_url, "_blank"),
-          children: [
-            /* @__PURE__ */ jsx(ExternalLink, { className: "h-4 w-4 mr-2" }),
-            "Open in Payment Provider"
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: "pt-4 border-t space-y-2 text-xs text-muted-foreground", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
-          /* @__PURE__ */ jsx("span", { children: "Payment ID" }),
-          /* @__PURE__ */ jsx("span", { className: "font-mono", children: payment.id })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
-          /* @__PURE__ */ jsx("span", { children: "Created" }),
-          /* @__PURE__ */ jsx("span", { children: new Date(payment.created_at).toLocaleString() })
-        ] }),
-        payment.confirmations_count !== void 0 && /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
-          /* @__PURE__ */ jsx("span", { children: "Confirmations" }),
-          /* @__PURE__ */ jsx("span", { children: payment.confirmations_count })
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs(DialogFooter, { children: [
-      /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: handleClose, children: "Close" }),
-      /* @__PURE__ */ jsxs(Button, { onClick: () => mutate(), variant: "ghost", size: "sm", children: [
-        /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4 mr-2" }),
-        "Refresh"
-      ] })
-    ] })
-  ] }) });
-};
 var PaymentsLayout = () => {
   return /* @__PURE__ */ jsx(RootPaymentsProvider, { children: /* @__PURE__ */ jsxs("div", { className: "h-full p-6 space-y-6", children: [
     /* @__PURE__ */ jsxs("div", { children: [
@@ -2594,7 +2608,7 @@ var PaymentsLayout = () => {
 // package.json
 var package_default = {
   name: "@djangocfg/ext-payments",
-  version: "1.0.6",
+  version: "1.0.8",
   description: "Payments system extension for DjangoCFG",
   keywords: [
     "django",
@@ -2662,7 +2676,8 @@ var package_default = {
     "p-retry": "^7.0.0",
     react: "^18 || ^19",
     swr: "^2.3.7",
-    zod: "^4.1.13"
+    zod: "^4.1.13",
+    moment: "^2.30.1"
   },
   devDependencies: {
     "@djangocfg/api": "workspace:*",