@djangocfg/ext-payments 1.0.8 → 1.0.10

package/dist/hooks.cjs

@@ -5,13 +5,14 @@ var pRetry = require('p-retry');
 var zod = require('zod');
 var api = require('@djangocfg/ext-base/api');
 var lucideReact = require('lucide-react');
-var uiNextjs = require('@djangocfg/ui-nextjs');
+var uiCore = require('@djangocfg/ui-core');
 var react = require('react');
 var useSWR = require('swr');
 var jsxRuntime = require('react/jsx-runtime');
 var reactHookForm = require('react-hook-form');
 var zod$1 = require('@hookform/resolvers/zod');
 var moment = require('moment');
+var components = require('@djangocfg/ui-nextjs/components');
 var extBase = require('@djangocfg/ext-base');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -128,7 +129,7 @@ var models_exports = {};
 // src/api/generated/ext_payments/http.ts
 var FetchAdapter = class {
   async request(request) {
-    const { method, url, headers, body, params, formData } = request;
+    const { method, url, headers, body, params, formData, binaryBody } = request;
     let finalUrl = url;
     if (params) {
       const searchParams = new URLSearchParams();
@@ -146,6 +147,9 @@ var FetchAdapter = class {
     let requestBody;
     if (formData) {
       requestBody = formData;
+    } else if (binaryBody) {
+      finalHeaders["Content-Type"] = "application/octet-stream";
+      requestBody = binaryBody;
     } else if (body) {
       finalHeaders["Content-Type"] = "application/json";
       requestBody = JSON.stringify(body);
@@ -470,11 +474,13 @@ var APIClient = class {
   httpClient;
   logger = null;
   retryConfig = null;
+  tokenGetter = null;
   // Sub-clients
   ext_payments_payments;
   constructor(baseUrl, options) {
     this.baseUrl = baseUrl.replace(/\/$/, "");
     this.httpClient = options?.httpClient || new FetchAdapter();
+    this.tokenGetter = options?.tokenGetter || null;
     if (options?.loggerConfig !== void 0) {
       this.logger = new APILogger(options.loggerConfig);
     }
@@ -497,6 +503,19 @@ var APIClient = class {
     }
     return null;
   }
+  /**
+   * Get the base URL for building streaming/download URLs.
+   */
+  getBaseUrl() {
+    return this.baseUrl;
+  }
+  /**
+   * Get JWT token for URL authentication (used in streaming endpoints).
+   * Returns null if no token getter is configured or no token is available.
+   */
+  getToken() {
+    return this.tokenGetter ? this.tokenGetter() : null;
+  }
   /**
    * Make HTTP request with Django CSRF and session handling.
    * Automatically retries on network errors and 5xx server errors.
@@ -527,7 +546,7 @@ var APIClient = class {
     const headers = {
       ...options?.headers || {}
     };
-    if (!options?.formData && !headers["Content-Type"]) {
+    if (!options?.formData && !options?.binaryBody && !headers["Content-Type"]) {
       headers["Content-Type"] = "application/json";
     }
     if (this.logger) {
@@ -546,7 +565,8 @@ var APIClient = class {
         headers,
         params: options?.params,
         body: options?.body,
-        formData: options?.formData
+        formData: options?.formData,
+        binaryBody: options?.binaryBody
       });
       const duration = Date.now() - startTime;
       if (response.status >= 400) {
@@ -882,7 +902,7 @@ var PaymentDetailSchema = zod.z.object({
   status_display: zod.z.string(),
   pay_address: zod.z.string().nullable(),
   qr_code_url: zod.z.string().nullable(),
-  payment_url: zod.z.url().nullable(),
+  payment_url: zod.z.union([zod.z.url(), zod.z.literal("")]).nullable(),
   transaction_hash: zod.z.string().nullable(),
   explorer_link: zod.z.string().nullable(),
   confirmations_count: zod.z.int(),
@@ -967,15 +987,28 @@ __export(fetchers_exports, {
 
 // src/api/generated/ext_payments/api-instance.ts
 var globalAPI = null;
+var autoConfigAttempted = false;
+function tryAutoConfigureFromEnv() {
+  if (autoConfigAttempted) return;
+  autoConfigAttempted = true;
+  if (globalAPI) return;
+  if (typeof process === "undefined" || !process.env) return;
+  const baseUrl = process.env.NEXT_PUBLIC_API_URL || process.env.VITE_API_URL || process.env.REACT_APP_API_URL || process.env.API_URL;
+  if (baseUrl) {
+    globalAPI = new API(baseUrl);
+  }
+}
 function getAPIInstance() {
+  tryAutoConfigureFromEnv();
   if (!globalAPI) {
     throw new Error(
-      'API not configured. Call configureAPI() with your base URL before using fetchers or hooks.\n\nExample:\n  import { configureAPI } from "./api-instance"\n  configureAPI({ baseUrl: "https://api.example.com" })'
+      'API not configured. Call configureAPI() with your base URL before using fetchers or hooks.\n\nExample:\n  import { configureAPI } from "./api-instance"\n  configureAPI({ baseUrl: "https://api.example.com" })\n\nOr set environment variable: NEXT_PUBLIC_API_URL, VITE_API_URL, or REACT_APP_API_URL'
     );
   }
   return globalAPI;
 }
 function isAPIConfigured() {
+  tryAutoConfigureFromEnv();
   return globalAPI !== null;
 }
 function configureAPI(config) {
@@ -1290,7 +1323,8 @@ var API = class {
     this._loadTokensFromStorage();
     this._client = new APIClient(this.baseUrl, {
       retryConfig: this.options?.retryConfig,
-      loggerConfig: this.options?.loggerConfig
+      loggerConfig: this.options?.loggerConfig,
+      tokenGetter: () => this.getToken()
     });
     this._injectAuthHeader();
     this.ext_payments_payments = this._client.ext_payments_payments;
@@ -1302,7 +1336,8 @@ var API = class {
   _reinitClients() {
     this._client = new APIClient(this.baseUrl, {
       retryConfig: this.options?.retryConfig,
-      loggerConfig: this.options?.loggerConfig
+      loggerConfig: this.options?.loggerConfig,
+      tokenGetter: () => this.getToken()
     });
     this._injectAuthHeader();
     this.ext_payments_payments = this._client.ext_payments_payments;
@@ -1393,6 +1428,7 @@ var API = class {
     return "./schema.json";
   }
 };
+api.initializeExtensionAPI(configureAPI);
 var apiPayments = api.createExtensionAPI(API);
 function usePaymentsBalanceRetrieve(client) {
   return useSWR__default.default(
@@ -1752,21 +1788,21 @@ var CreatePaymentDialog = () => {
       setIsSubmitting(false);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.Dialog, { open, onOpenChange: (isOpen) => !isOpen && handleClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.DialogContent, { className: "sm:max-w-md", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.DialogHeader, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.DialogTitle, { children: "Create Payment" }),
-      /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.DialogDescription, { children: "Create a new payment to add funds to your account." })
+  return /* @__PURE__ */ jsxRuntime.jsx(uiCore.Dialog, { open, onOpenChange: (isOpen) => !isOpen && handleClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(uiCore.DialogContent, { className: "sm:max-w-md", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(uiCore.DialogHeader, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(uiCore.DialogTitle, { children: "Create Payment" }),
+      /* @__PURE__ */ jsxRuntime.jsx(uiCore.DialogDescription, { children: "Create a new payment to add funds to your account." })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.Form, { ...form, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: form.handleSubmit(handleSubmit), className: "space-y-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(uiCore.Form, { ...form, children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: form.handleSubmit(handleSubmit), className: "space-y-4", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        uiNextjs.FormField,
+        uiCore.FormField,
         {
           control: form.control,
           name: "amount_usd",
-          render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.FormItem, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.FormLabel, { children: "Amount (USD)" }),
-            /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
-              uiNextjs.Input,
+          render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(uiCore.FormItem, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(uiCore.FormLabel, { children: "Amount (USD)" }),
+            /* @__PURE__ */ jsxRuntime.jsx(uiCore.FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              uiCore.Input,
               {
                 type: "number",
                 step: "0.01",
@@ -1776,28 +1812,28 @@ var CreatePaymentDialog = () => {
                 onChange: (e) => field.onChange(parseFloat(e.target.value) || 0)
               }
             ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.FormDescription, { children: "The amount you want to pay in USD." }),
-            /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.FormMessage, {})
+            /* @__PURE__ */ jsxRuntime.jsx(uiCore.FormDescription, { children: "The amount you want to pay in USD." }),
+            /* @__PURE__ */ jsxRuntime.jsx(uiCore.FormMessage, {})
           ] })
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        uiNextjs.FormField,
+        uiCore.FormField,
         {
           control: form.control,
           name: "currency_code",
-          render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.FormItem, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.FormLabel, { children: "Currency" }),
+          render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsxs(uiCore.FormItem, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(uiCore.FormLabel, { children: "Currency" }),
             /* @__PURE__ */ jsxRuntime.jsxs(
-              uiNextjs.Select,
+              uiCore.Select,
               {
                 onValueChange: field.onChange,
                 defaultValue: field.value,
                 disabled: isLoadingCurrencies,
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.SelectTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.SelectValue, { placeholder: "Select currency..." }) }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.SelectContent, { children: currencyOptions.map((curr) => /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.SelectItem, { value: curr.code, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.TokenIcon, { symbol: curr.code, size: 16 }),
+                  /* @__PURE__ */ jsxRuntime.jsx(uiCore.FormControl, { children: /* @__PURE__ */ jsxRuntime.jsx(uiCore.SelectTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(uiCore.SelectValue, { placeholder: "Select currency..." }) }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(uiCore.SelectContent, { children: currencyOptions.map((curr) => /* @__PURE__ */ jsxRuntime.jsx(uiCore.SelectItem, { value: curr.code, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(uiCore.TokenIcon, { symbol: curr.code, size: 16 }),
                     /* @__PURE__ */ jsxRuntime.jsx("span", { children: curr.code }),
                     curr.network && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: [
                       "(",
@@ -1808,8 +1844,8 @@ var CreatePaymentDialog = () => {
                 ]
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.FormDescription, { children: "The cryptocurrency to use for payment." }),
-            /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.FormMessage, {})
+            /* @__PURE__ */ jsxRuntime.jsx(uiCore.FormDescription, { children: "The cryptocurrency to use for payment." }),
+            /* @__PURE__ */ jsxRuntime.jsx(uiCore.FormMessage, {})
           ] })
         }
       ),
@@ -1817,7 +1853,7 @@ var CreatePaymentDialog = () => {
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "You will send" }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.TokenIcon, { symbol: calculateCryptoAmount.currency, size: 16 }),
+            /* @__PURE__ */ jsxRuntime.jsx(uiCore.TokenIcon, { symbol: calculateCryptoAmount.currency, size: 16 }),
             /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono font-semibold", children: [
               calculateCryptoAmount.amount.toFixed(8),
               " ",
@@ -1847,9 +1883,9 @@ var CreatePaymentDialog = () => {
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: calculateCryptoAmount.network })
         ] }) })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.DialogFooter, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.Button, { type: "button", variant: "outline", onClick: handleClose, disabled: isSubmitting, children: "Cancel" }),
-        /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.Button, { type: "submit", disabled: isSubmitting || currencyOptions.length === 0, children: isSubmitting ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(uiCore.DialogFooter, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(uiCore.Button, { type: "button", variant: "outline", onClick: handleClose, disabled: isSubmitting, children: "Cancel" }),
+        /* @__PURE__ */ jsxRuntime.jsx(uiCore.Button, { type: "submit", disabled: isSubmitting || currencyOptions.length === 0, children: isSubmitting ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "h-4 w-4 mr-2 animate-spin" }),
           "Creating..."
         ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -1930,34 +1966,34 @@ var PaymentDetailsDialog = () => {
   };
   if (!open) return null;
   if (isLoading) {
-    return /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.Dialog, { open, onOpenChange: (isOpen) => !isOpen && handleClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.DialogContent, { className: "sm:max-w-lg", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.DialogHeader, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.DialogTitle, { children: "Payment Details" }),
-        /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.DialogDescription, { children: "Loading payment information..." })
+    return /* @__PURE__ */ jsxRuntime.jsx(uiCore.Dialog, { open, onOpenChange: (isOpen) => !isOpen && handleClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(uiCore.DialogContent, { className: "sm:max-w-lg", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(uiCore.DialogHeader, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(uiCore.DialogTitle, { children: "Payment Details" }),
+        /* @__PURE__ */ jsxRuntime.jsx(uiCore.DialogDescription, { children: "Loading payment information..." })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "h-8 w-8 animate-spin text-muted-foreground" }) })
     ] }) });
   }
   if (shouldFetch && !isLoading && (error || !payment)) {
-    return /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.Dialog, { open, onOpenChange: (isOpen) => !isOpen && handleClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.DialogContent, { className: "sm:max-w-lg", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.DialogHeader, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.DialogTitle, { children: "Payment Details" }),
-        /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.DialogDescription, { children: "Failed to load payment information" })
+    return /* @__PURE__ */ jsxRuntime.jsx(uiCore.Dialog, { open, onOpenChange: (isOpen) => !isOpen && handleClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(uiCore.DialogContent, { className: "sm:max-w-lg", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(uiCore.DialogHeader, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(uiCore.DialogTitle, { children: "Payment Details" }),
+        /* @__PURE__ */ jsxRuntime.jsx(uiCore.DialogDescription, { children: "Failed to load payment information" })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center py-12 space-y-4", children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircle, { className: "h-12 w-12 text-destructive" }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: error ? `Error: ${error}` : "Payment not found" }),
-        /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.Button, { onClick: () => mutate(), children: "Try Again" })
+        /* @__PURE__ */ jsxRuntime.jsx(uiCore.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__ */ jsxRuntime.jsx(uiNextjs.Dialog, { open, onOpenChange: (isOpen) => !isOpen && handleClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.DialogContent, { className: "sm:max-w-lg", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.DialogHeader, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.DialogTitle, { children: "Payment Details" }),
-      /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.DialogDescription, { children: "Send cryptocurrency to complete your payment" })
+  return /* @__PURE__ */ jsxRuntime.jsx(uiCore.Dialog, { open, onOpenChange: (isOpen) => !isOpen && handleClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(uiCore.DialogContent, { className: "sm:max-w-lg", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(uiCore.DialogHeader, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(uiCore.DialogTitle, { children: "Payment Details" }),
+      /* @__PURE__ */ jsxRuntime.jsx(uiCore.DialogDescription, { children: "Send cryptocurrency to complete your payment" })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center gap-3 p-4 rounded-sm ${statusInfo.bg}`, children: [
@@ -1974,7 +2010,7 @@ var PaymentDetailsDialog = () => {
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-4 bg-muted rounded-sm", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "Amount to send" }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.TokenIcon, { symbol: String(payment.currency_code || "BTC"), size: 20 }),
+            /* @__PURE__ */ jsxRuntime.jsx(uiCore.TokenIcon, { symbol: String(payment.currency_code || "BTC"), size: 20 }),
             /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono font-bold text-lg", children: [
               payment.pay_amount || "0.00000000",
               " ",
@@ -2004,7 +2040,7 @@ var PaymentDetailsDialog = () => {
         /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium", children: "Payment Address" }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 p-3 bg-muted rounded-sm font-mono text-sm break-all", children: payment.pay_address }),
-          /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.CopyButton, { value: payment.pay_address, variant: "outline" })
+          /* @__PURE__ */ jsxRuntime.jsx(uiCore.CopyButton, { value: payment.pay_address, variant: "outline" })
         ] })
       ] }),
       payment.transaction_hash && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
@@ -2012,7 +2048,7 @@ var PaymentDetailsDialog = () => {
         /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
-        uiNextjs.Button,
+        uiCore.Button,
         {
           variant: "outline",
           className: "w-full",
@@ -2038,9 +2074,9 @@ var PaymentDetailsDialog = () => {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.DialogFooter, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.Button, { variant: "outline", onClick: handleClose, children: "Close" }),
-      /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.Button, { onClick: () => mutate(), variant: "ghost", size: "sm", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(uiCore.DialogFooter, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(uiCore.Button, { variant: "outline", onClick: handleClose, children: "Close" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(uiCore.Button, { onClick: () => mutate(), variant: "ghost", size: "sm", children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "h-4 w-4 mr-2" }),
         "Refresh"
       ] })
@@ -2070,17 +2106,17 @@ var BalanceCard = () => {
     }
   };
   if (isLoadingBalance) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.Card, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.CardTitle, { className: "flex items-center justify-between", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(uiCore.Card, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(uiCore.CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(uiCore.CardTitle, { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Wallet, { className: "h-5 w-5" }),
           "Account Balance"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.Skeleton, { className: "h-8 w-20" })
+        /* @__PURE__ */ jsxRuntime.jsx(uiCore.Skeleton, { className: "h-8 w-20" })
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.CardContent, { className: "space-y-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.Skeleton, { className: "h-10 w-32" }),
-        /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.Skeleton, { className: "h-4 w-48" })
+      /* @__PURE__ */ jsxRuntime.jsxs(uiCore.CardContent, { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(uiCore.Skeleton, { className: "h-10 w-32" }),
+        /* @__PURE__ */ jsxRuntime.jsx(uiCore.Skeleton, { className: "h-4 w-48" })
       ] })
     ] });
   }
@@ -2090,21 +2126,21 @@ var BalanceCard = () => {
   const totalWithdrawn = balanceData?.total_withdrawn ?? 0;
   const lastTransactionAt = balanceData?.last_transaction_at;
   const isEmpty = amountUsd === 0 && totalDeposited === 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.Card, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.CardTitle, { className: "flex items-center justify-between", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(uiCore.Card, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(uiCore.CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(uiCore.CardTitle, { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Wallet, { className: "h-5 w-5" }),
         "Account Balance"
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.Button, { variant: "ghost", size: "sm", onClick: refreshBalance, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "h-4 w-4" }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.Button, { size: "sm", onClick: () => openCreatePaymentDialog(), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(uiCore.Button, { variant: "ghost", size: "sm", onClick: refreshBalance, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(uiCore.Button, { size: "sm", onClick: () => openCreatePaymentDialog(), children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4 mr-2" }),
           "Add Funds"
         ] })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.CardContent, { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(uiCore.CardContent, { className: "space-y-4", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-4xl font-bold", children: formatCurrency(amountUsd) }),
         /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground mt-1", children: [
@@ -2123,8 +2159,8 @@ var BalanceCard = () => {
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.Badge, { variant: !isEmpty ? "default" : "secondary", children: !isEmpty ? "Active" : "New Account" }),
-        isEmpty && /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.Badge, { variant: "outline", children: "Empty Balance" })
+        /* @__PURE__ */ jsxRuntime.jsx(uiCore.Badge, { variant: !isEmpty ? "default" : "secondary", children: !isEmpty ? "Active" : "New Account" }),
+        isEmpty && /* @__PURE__ */ jsxRuntime.jsx(uiCore.Badge, { variant: "outline", children: "Empty Balance" })
       ] })
     ] })
   ] });
@@ -2167,33 +2203,33 @@ var RecentPayments = () => {
     }
   };
   if (isLoadingPayments) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.Card, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.CardTitle, { className: "flex items-center gap-2", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(uiCore.Card, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(uiCore.CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(uiCore.CardTitle, { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.History, { className: "h-5 w-5" }),
         "Recent Payments"
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.CardContent, { className: "space-y-3", children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-3 border rounded-sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(uiCore.CardContent, { className: "space-y-3", children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-3 border rounded-sm", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.Skeleton, { className: "h-4 w-32" }),
-          /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.Skeleton, { className: "h-3 w-24" })
+          /* @__PURE__ */ jsxRuntime.jsx(uiCore.Skeleton, { className: "h-4 w-32" }),
+          /* @__PURE__ */ jsxRuntime.jsx(uiCore.Skeleton, { className: "h-3 w-24" })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.Skeleton, { className: "h-6 w-16" })
+        /* @__PURE__ */ jsxRuntime.jsx(uiCore.Skeleton, { className: "h-6 w-16" })
       ] }, i)) })
     ] });
   }
   const recentPaymentsList = payments?.results?.slice(0, 5) || [];
-  return /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.Card, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.CardTitle, { className: "flex items-center justify-between", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(uiCore.Card, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(uiCore.CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(uiCore.CardTitle, { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.History, { className: "h-5 w-5" }),
         "Recent Payments"
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.Button, { variant: "ghost", size: "sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(uiCore.Button, { variant: "ghost", size: "sm", children: [
         "View All",
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: "h-4 w-4 ml-2" })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.CardContent, { children: recentPaymentsList.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-8 text-muted-foreground", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(uiCore.CardContent, { children: recentPaymentsList.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-8 text-muted-foreground", children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.History, { className: "h-12 w-12 mx-auto mb-4 opacity-50" }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No recent payments" }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm mt-2", children: "Create your first payment to get started" })
@@ -2206,7 +2242,7 @@ var RecentPayments = () => {
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: formatCurrency(payment.amount_usd) }),
-              /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.Badge, { variant: getStatusVariant(payment.status), className: "text-xs", children: payment.status })
+              /* @__PURE__ */ jsxRuntime.jsx(uiCore.Badge, { variant: getStatusVariant(payment.status), className: "text-xs", children: payment.status })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: [
               getRelativeTime(payment.created_at),
@@ -2228,7 +2264,7 @@ var OverviewView = () => {
   ] }) });
 };
 var PaymentsList = () => {
-  const pagination = uiNextjs.useDRFPagination(1, 20);
+  const pagination = components.useDRFPagination(1, 20);
   const {
     data: payments,
     error,
@@ -2299,26 +2335,26 @@ var PaymentsList = () => {
     relativeTime: getRelativeTime(payment.created_at),
     truncatedId: truncateId(payment.id)
   }));
-  return /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.Card, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.CardTitle, { className: "flex items-center justify-between", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(uiCore.Card, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(uiCore.CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(uiCore.CardTitle, { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Payment History" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.Button, { variant: "outline", size: "sm", onClick: () => refreshPayments(), disabled: isLoadingPayments, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(uiCore.Button, { variant: "outline", size: "sm", onClick: () => refreshPayments(), disabled: isLoadingPayments, children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: `h-4 w-4 mr-2 ${isLoadingPayments ? "animate-spin" : ""}` }),
           "Refresh"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.Button, { size: "sm", onClick: () => openCreatePaymentDialog(), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(uiCore.Button, { size: "sm", onClick: () => openCreatePaymentDialog(), children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4 mr-2" }),
           "New Payment"
         ] })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.CardContent, { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(uiCore.CardContent, { className: "space-y-4", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row gap-4", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1", children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            uiNextjs.Input,
+            uiCore.Input,
             {
               placeholder: "Search by ID, status, or currency...",
               value: searchTerm,
@@ -2327,63 +2363,63 @@ var PaymentsList = () => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.Select, { value: statusFilter, onValueChange: handleStatusFilter, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.SelectTrigger, { className: "w-full sm:w-48", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(uiCore.Select, { value: statusFilter, onValueChange: handleStatusFilter, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(uiCore.SelectTrigger, { className: "w-full sm:w-48", children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Filter, { className: "h-4 w-4 mr-2" }),
-            /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.SelectValue, { placeholder: "Filter by status" })
+            /* @__PURE__ */ jsxRuntime.jsx(uiCore.SelectValue, { placeholder: "Filter by status" })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.SelectContent, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.SelectItem, { value: "all", children: "All Statuses" }),
-            /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.SelectItem, { value: "completed", children: "Completed" }),
-            /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.SelectItem, { value: "pending", children: "Pending" }),
-            /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.SelectItem, { value: "confirming", children: "Confirming" }),
-            /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.SelectItem, { value: "failed", children: "Failed" }),
-            /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.SelectItem, { value: "expired", children: "Expired" })
+          /* @__PURE__ */ jsxRuntime.jsxs(uiCore.SelectContent, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(uiCore.SelectItem, { value: "all", children: "All Statuses" }),
+            /* @__PURE__ */ jsxRuntime.jsx(uiCore.SelectItem, { value: "completed", children: "Completed" }),
+            /* @__PURE__ */ jsxRuntime.jsx(uiCore.SelectItem, { value: "pending", children: "Pending" }),
+            /* @__PURE__ */ jsxRuntime.jsx(uiCore.SelectItem, { value: "confirming", children: "Confirming" }),
+            /* @__PURE__ */ jsxRuntime.jsx(uiCore.SelectItem, { value: "failed", children: "Failed" }),
+            /* @__PURE__ */ jsxRuntime.jsx(uiCore.SelectItem, { value: "expired", children: "Expired" })
           ] })
         ] })
       ] }),
       isLoadingPayments ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-4 border rounded-sm", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.Skeleton, { className: "h-4 w-32" }),
-          /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.Skeleton, { className: "h-3 w-24" })
+          /* @__PURE__ */ jsxRuntime.jsx(uiCore.Skeleton, { className: "h-4 w-32" }),
+          /* @__PURE__ */ jsxRuntime.jsx(uiCore.Skeleton, { className: "h-3 w-24" })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.Skeleton, { className: "h-6 w-16" })
+        /* @__PURE__ */ jsxRuntime.jsx(uiCore.Skeleton, { className: "h-6 w-16" })
       ] }, i)) }) : filteredPayments.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-12", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-16 h-16 mx-auto mb-4 bg-muted rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "w-8 h-8 text-muted-foreground" }) }),
         /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold mb-2", children: "No Payments Found" }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground mb-4", children: searchTerm || statusFilter !== "all" ? "No payments match your current filters" : "You haven't made any payments yet" }),
-        /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.Button, { onClick: () => openCreatePaymentDialog(), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(uiCore.Button, { onClick: () => openCreatePaymentDialog(), children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4 mr-2" }),
           "Create Payment"
         ] })
       ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.Table, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.TableRow, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.TableHead, { children: "Date" }),
-            /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.TableHead, { children: "Amount" }),
-            /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.TableHead, { children: "Currency" }),
-            /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.TableHead, { children: "Status" }),
-            /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.TableHead, { children: "Provider" }),
-            /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.TableHead, { children: "Payment ID" }),
-            /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.TableHead, { className: "text-right", children: "Actions" })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxRuntime.jsxs(uiCore.Table, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(uiCore.TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(uiCore.TableRow, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(uiCore.TableHead, { children: "Date" }),
+            /* @__PURE__ */ jsxRuntime.jsx(uiCore.TableHead, { children: "Amount" }),
+            /* @__PURE__ */ jsxRuntime.jsx(uiCore.TableHead, { children: "Currency" }),
+            /* @__PURE__ */ jsxRuntime.jsx(uiCore.TableHead, { children: "Status" }),
+            /* @__PURE__ */ jsxRuntime.jsx(uiCore.TableHead, { children: "Provider" }),
+            /* @__PURE__ */ jsxRuntime.jsx(uiCore.TableHead, { children: "Payment ID" }),
+            /* @__PURE__ */ jsxRuntime.jsx(uiCore.TableHead, { className: "text-right", children: "Actions" })
           ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.TableBody, { children: filteredPayments.map((payment) => /* @__PURE__ */ jsxRuntime.jsxs(
-            uiNextjs.TableRow,
+          /* @__PURE__ */ jsxRuntime.jsx(uiCore.TableBody, { children: filteredPayments.map((payment) => /* @__PURE__ */ jsxRuntime.jsxs(
+            uiCore.TableRow,
             {
               className: "cursor-pointer hover:bg-accent",
               onClick: () => openPaymentDetailsDialog(String(payment.id)),
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.TableCell, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(uiCore.TableCell, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
                   /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium", children: payment.formattedDate }),
                   /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: payment.relativeTime })
                 ] }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.TableCell, { className: "font-mono font-semibold", children: formatCurrency(payment.amount_usd) }),
-                /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.TableCell, { children: /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.Badge, { variant: "outline", children: payment.currency_code || "USD" }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.TableCell, { children: /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.Badge, { variant: getStatusVariant(payment.status), children: payment.status }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.TableCell, { className: "text-sm text-muted-foreground", children: "NowPayments" }),
-                /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.TableCell, { className: "font-mono text-sm text-muted-foreground", children: payment.truncatedId }),
-                /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.TableCell, { className: "text-right", children: /* @__PURE__ */ jsxRuntime.jsx(
-                  uiNextjs.Button,
+                /* @__PURE__ */ jsxRuntime.jsx(uiCore.TableCell, { className: "font-mono font-semibold", children: formatCurrency(payment.amount_usd) }),
+                /* @__PURE__ */ jsxRuntime.jsx(uiCore.TableCell, { children: /* @__PURE__ */ jsxRuntime.jsx(uiCore.Badge, { variant: "outline", children: payment.currency_code || "USD" }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(uiCore.TableCell, { children: /* @__PURE__ */ jsxRuntime.jsx(uiCore.Badge, { variant: getStatusVariant(payment.status), children: payment.status }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(uiCore.TableCell, { className: "text-sm text-muted-foreground", children: "NowPayments" }),
+                /* @__PURE__ */ jsxRuntime.jsx(uiCore.TableCell, { className: "font-mono text-sm text-muted-foreground", children: payment.truncatedId }),
+                /* @__PURE__ */ jsxRuntime.jsx(uiCore.TableCell, { className: "text-right", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  uiCore.Button,
                   {
                     variant: "ghost",
                     size: "sm",
@@ -2400,7 +2436,7 @@ var PaymentsList = () => {
           )) })
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          uiNextjs.StaticPagination,
+          components.StaticPagination,
           {
             data: payments,
             onPageChange: pagination.setPage,
@@ -2490,37 +2526,37 @@ var TransactionsList = () => {
     truncatedRef: truncateId(transaction.reference || transaction.payment_id)
   }));
   if (isLoadingTransactions) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.Card, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.CardTitle, { className: "flex items-center gap-2", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(uiCore.Card, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(uiCore.CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(uiCore.CardTitle, { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.History, { className: "h-5 w-5" }),
         "Transaction History"
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.CardContent, { className: "space-y-3", children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-4 border rounded-sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(uiCore.CardContent, { className: "space-y-3", children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-4 border rounded-sm", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.Skeleton, { className: "h-4 w-32" }),
-          /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.Skeleton, { className: "h-3 w-24" })
+          /* @__PURE__ */ jsxRuntime.jsx(uiCore.Skeleton, { className: "h-4 w-32" }),
+          /* @__PURE__ */ jsxRuntime.jsx(uiCore.Skeleton, { className: "h-3 w-24" })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.Skeleton, { className: "h-6 w-16" })
+        /* @__PURE__ */ jsxRuntime.jsx(uiCore.Skeleton, { className: "h-6 w-16" })
       ] }, i)) })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.Card, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.CardTitle, { className: "flex items-center justify-between", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(uiCore.Card, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(uiCore.CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(uiCore.CardTitle, { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.History, { className: "h-5 w-5" }),
         "Transaction History"
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.Button, { variant: "outline", size: "sm", onClick: refreshTransactions, disabled: isLoadingTransactions, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(uiCore.Button, { variant: "outline", size: "sm", onClick: refreshTransactions, disabled: isLoadingTransactions, children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: `h-4 w-4 mr-2 ${isLoadingTransactions ? "animate-spin" : ""}` }),
         "Refresh"
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.CardContent, { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(uiCore.CardContent, { className: "space-y-4", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row gap-4", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1", children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            uiNextjs.Input,
+            uiCore.Input,
             {
               placeholder: "Search by ID, description, or type...",
               value: searchTerm,
@@ -2529,15 +2565,15 @@ var TransactionsList = () => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.Select, { value: typeFilter, onValueChange: handleTypeFilter, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.SelectTrigger, { className: "w-full sm:w-48", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(uiCore.Select, { value: typeFilter, onValueChange: handleTypeFilter, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(uiCore.SelectTrigger, { className: "w-full sm:w-48", children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Filter, { className: "h-4 w-4 mr-2" }),
-            /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.SelectValue, { placeholder: "Filter by type" })
+            /* @__PURE__ */ jsxRuntime.jsx(uiCore.SelectValue, { placeholder: "Filter by type" })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.SelectContent, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.SelectItem, { value: "all", children: "All Types" }),
-            /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.SelectItem, { value: "deposit", children: "Deposits" }),
-            /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.SelectItem, { value: "withdrawal", children: "Withdrawals" })
+          /* @__PURE__ */ jsxRuntime.jsxs(uiCore.SelectContent, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(uiCore.SelectItem, { value: "all", children: "All Types" }),
+            /* @__PURE__ */ jsxRuntime.jsx(uiCore.SelectItem, { value: "deposit", children: "Deposits" }),
+            /* @__PURE__ */ jsxRuntime.jsx(uiCore.SelectItem, { value: "withdrawal", children: "Withdrawals" })
           ] })
         ] })
       ] }),
@@ -2545,31 +2581,31 @@ var TransactionsList = () => {
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-16 h-16 mx-auto mb-4 bg-muted rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.History, { className: "w-8 h-8 text-muted-foreground" }) }),
         /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold mb-2", children: "No Transactions Found" }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: searchTerm || typeFilter !== "all" ? "No transactions match your current filters" : "You don't have any transactions yet" })
-      ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.Table, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.TableRow, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.TableHead, { children: "Date & Time" }),
-          /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.TableHead, { children: "Type" }),
-          /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.TableHead, { children: "Amount" }),
-          /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.TableHead, { children: "Balance After" }),
-          /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.TableHead, { children: "Description" }),
-          /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.TableHead, { children: "Reference" })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxRuntime.jsxs(uiCore.Table, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(uiCore.TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(uiCore.TableRow, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(uiCore.TableHead, { children: "Date & Time" }),
+          /* @__PURE__ */ jsxRuntime.jsx(uiCore.TableHead, { children: "Type" }),
+          /* @__PURE__ */ jsxRuntime.jsx(uiCore.TableHead, { children: "Amount" }),
+          /* @__PURE__ */ jsxRuntime.jsx(uiCore.TableHead, { children: "Balance After" }),
+          /* @__PURE__ */ jsxRuntime.jsx(uiCore.TableHead, { children: "Description" }),
+          /* @__PURE__ */ jsxRuntime.jsx(uiCore.TableHead, { children: "Reference" })
         ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.TableBody, { children: filteredTransactions.map((transaction, index) => /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.TableRow, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.TableCell, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(uiCore.TableBody, { children: filteredTransactions.map((transaction, index) => /* @__PURE__ */ jsxRuntime.jsxs(uiCore.TableRow, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(uiCore.TableCell, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium", children: transaction.formattedDate }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: transaction.relativeTime })
           ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.TableCell, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(uiCore.TableCell, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
             getTypeIcon(transaction.type),
-            /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.Badge, { variant: getTypeVariant(transaction.type), children: transaction.type || "Unknown" })
+            /* @__PURE__ */ jsxRuntime.jsx(uiCore.Badge, { variant: getTypeVariant(transaction.type), children: transaction.type || "Unknown" })
           ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.TableCell, { className: "font-mono font-semibold", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: transaction.isDeposit ? "text-green-600" : "text-red-600", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(uiCore.TableCell, { className: "font-mono font-semibold", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: transaction.isDeposit ? "text-green-600" : "text-red-600", children: [
             transaction.isDeposit ? "+" : "-",
             formatCurrency(Math.abs(transaction.amount || transaction.amount_usd || 0))
           ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.TableCell, { className: "font-mono", children: formatCurrency(transaction.balance_after || 0) }),
-          /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.TableCell, { className: "text-sm", children: transaction.description || transaction.note || "No description" }),
-          /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.TableCell, { className: "font-mono text-sm text-muted-foreground", children: transaction.truncatedRef })
+          /* @__PURE__ */ jsxRuntime.jsx(uiCore.TableCell, { className: "font-mono", children: formatCurrency(transaction.balance_after || 0) }),
+          /* @__PURE__ */ jsxRuntime.jsx(uiCore.TableCell, { className: "text-sm", children: transaction.description || transaction.note || "No description" }),
+          /* @__PURE__ */ jsxRuntime.jsx(uiCore.TableCell, { className: "font-mono text-sm text-muted-foreground", children: transaction.truncatedRef })
         ] }, transaction.id || index)) })
       ] }) })
     ] })
@@ -2584,30 +2620,30 @@ var PaymentsLayout = () => {
       /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-bold tracking-tight", children: "Payments" }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "Manage your payments, balance, and transaction history" })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.Tabs, { defaultValue: "overview", className: "space-y-6", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.TabsList, { className: "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.TabsTrigger, { value: "overview", className: "inline-flex items-center gap-2 px-3 py-1.5", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(uiCore.Tabs, { defaultValue: "overview", className: "space-y-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(uiCore.TabsList, { className: "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(uiCore.TabsTrigger, { value: "overview", className: "inline-flex items-center gap-2 px-3 py-1.5", children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Wallet, { className: "h-4 w-4" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: "Overview" })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.TabsTrigger, { value: "payments", className: "inline-flex items-center gap-2 px-3 py-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(uiCore.TabsTrigger, { value: "payments", className: "inline-flex items-center gap-2 px-3 py-1.5", children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CreditCard, { className: "h-4 w-4" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: "Payments" })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(uiNextjs.TabsTrigger, { value: "transactions", className: "inline-flex items-center gap-2 px-3 py-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(uiCore.TabsTrigger, { value: "transactions", className: "inline-flex items-center gap-2 px-3 py-1.5", children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.History, { className: "h-4 w-4" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: "Transactions" })
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.TabsContent, { value: "overview", className: "space-y-6", children: /* @__PURE__ */ jsxRuntime.jsx(OverviewProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(PaymentsProvider, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(uiCore.TabsContent, { value: "overview", className: "space-y-6", children: /* @__PURE__ */ jsxRuntime.jsx(OverviewProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(PaymentsProvider, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(OverviewView, {}),
         /* @__PURE__ */ jsxRuntime.jsx(CreatePaymentDialog, {})
       ] }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.TabsContent, { value: "payments", className: "space-y-6", children: /* @__PURE__ */ jsxRuntime.jsxs(PaymentsProvider, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(uiCore.TabsContent, { value: "payments", className: "space-y-6", children: /* @__PURE__ */ jsxRuntime.jsxs(PaymentsProvider, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(PaymentsView, {}),
         /* @__PURE__ */ jsxRuntime.jsx(CreatePaymentDialog, {})
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(uiNextjs.TabsContent, { value: "transactions", className: "space-y-6", children: /* @__PURE__ */ jsxRuntime.jsx(OverviewProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(TransactionsView, {}) }) })
+      /* @__PURE__ */ jsxRuntime.jsx(uiCore.TabsContent, { value: "transactions", className: "space-y-6", children: /* @__PURE__ */ jsxRuntime.jsx(OverviewProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(TransactionsView, {}) }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(PaymentDetailsDialog, {})
   ] }) });
@@ -2616,7 +2652,7 @@ var PaymentsLayout = () => {
 // package.json
 var package_default = {
   name: "@djangocfg/ext-payments",
-  version: "1.0.8",
+  version: "1.0.10",
   description: "Payments system extension for DjangoCFG",
   keywords: [
     "django",
@@ -2677,6 +2713,7 @@ var package_default = {
   peerDependencies: {
     "@djangocfg/api": "workspace:*",
     "@djangocfg/ext-base": "workspace:*",
+    "@djangocfg/ui-core": "workspace:*",
     "@djangocfg/ui-nextjs": "workspace:*",
     consola: "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -2691,6 +2728,7 @@ var package_default = {
     "@djangocfg/api": "workspace:*",
     "@djangocfg/ext-base": "workspace:*",
     "@djangocfg/typescript-config": "workspace:*",
+    "@djangocfg/ui-nextjs": "workspace:*",
     "@types/node": "^24.7.2",
     "@types/react": "^19.0.0",
     consola: "^3.4.2",