@djangocfg/layouts 1.0.2 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Layout system and components for Unrealon applications",
   "author": {
     "name": "DjangoCFG",
@@ -53,10 +53,10 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
+    "@djangocfg/api": "^1.0.3",
+    "@djangocfg/og-image": "^1.0.3",
+    "@djangocfg/ui": "^1.0.3",
     "@hookform/resolvers": "^5.2.0",
-    "@djangocfg/api": "^1.0.2",
-    "@djangocfg/og-image": "^1.0.2",
-    "@djangocfg/ui": "^1.0.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.468.0",
     "next": "^15.4.4",
@@ -76,10 +76,10 @@
     "vidstack": "0.6.15"
   },
   "devDependencies": {
+    "@djangocfg/typescript-config": "^1.0.3",
     "@types/node": "^24.7.2",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.1",
-    "@djangocfg/typescript-config": "^1.0.2",
     "eslint": "^9.37.0",
     "typescript": "^5.9.3"
   }

package/src/layouts/AppLayout/layouts/AuthLayout/AuthHelp.tsx

@@ -1,4 +1,4 @@
-import { Mail, MessageCircle } from 'lucide-react';
+import { Mail, MessageCircle, HelpCircle } from 'lucide-react';
 import React from 'react';
 
 import { Button } from '@djangocfg/ui/components';
@@ -64,7 +64,8 @@ export const AuthHelp: React.FC<AuthHelpProps> = ({
             size="sm"
             className="text-xs"
           >
-            <a href={supportUrl} target="_blank" rel="noopener noreferrer">
+            <a href={supportUrl} target="_blank" rel="noopener noreferrer" className="flex items-center gap-1">
+              <HelpCircle className="w-3 h-3" />
               Need help?
             </a>
           </Button>
@@ -100,7 +101,8 @@ export const AuthHelp: React.FC<AuthHelpProps> = ({
             size="sm"
             className="text-xs h-7 px-2"
           >
-            <a href={supportUrl} target="_blank" rel="noopener noreferrer">
+            <a href={supportUrl} target="_blank" rel="noopener noreferrer" className="flex items-center gap-1">
+              <HelpCircle className="w-3 h-3" />
               Get Help
             </a>
           </Button>

package/src/layouts/AppLayout/layouts/AuthLayout/IdentifierForm.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Mail, Phone, User } from 'lucide-react';
+import { Mail, Phone, User, Send } from 'lucide-react';
 
 import {
   Button,
@@ -231,7 +231,7 @@ export const IdentifierForm: React.FC = () => {
                   </div>
                 ) : (
                   <div className="flex items-center gap-2">
-                    {getChannelIcon()}
+                    <Send className="w-4 h-4" />
                     Send verification code
                   </div>
                 )}
@@ -314,7 +314,7 @@ export const IdentifierForm: React.FC = () => {
                 </div>
               ) : (
                 <div className="flex items-center gap-2">
-                  {getChannelIcon()}
+                  <Send className="w-4 h-4" />
                   Send verification code
                 </div>
               )}

package/src/layouts/AppLayout/layouts/AuthLayout/OTPForm.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Mail, MessageCircle } from 'lucide-react';
+import { Mail, MessageCircle, ArrowLeft, RotateCw, ShieldCheck } from 'lucide-react';
 
 import {
   Button,
@@ -113,7 +113,17 @@ export const OTPForm: React.FC = () => {
               className="w-full h-11 text-base font-medium"
               disabled={isLoading || otp.length < 6}
             >
-              {isLoading ? 'Verifying...' : 'Verify Code'}
+              {isLoading ? (
+                <div className="flex items-center gap-2">
+                  <div className="w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin" />
+                  Verifying...
+                </div>
+              ) : (
+                <div className="flex items-center gap-2">
+                  <ShieldCheck className="w-5 h-5" />
+                  Verify Code
+                </div>
+              )}
             </Button>
 
             <div className="flex gap-3">
@@ -124,7 +134,10 @@ export const OTPForm: React.FC = () => {
                 disabled={isLoading}
                 className="flex-1 h-10"
               >
-                ← Back
+                <div className="flex items-center gap-2">
+                  <ArrowLeft className="w-4 h-4" />
+                  Back
+                </div>
               </Button>
 
               <Button
@@ -134,7 +147,10 @@ export const OTPForm: React.FC = () => {
                 disabled={isLoading}
                 className="flex-1 h-10"
               >
-                ↻ Resend
+                <div className="flex items-center gap-2">
+                  <RotateCw className="w-4 h-4" />
+                  Resend
+                </div>
               </Button>
             </div>
           </div>

package/src/layouts/PaymentsLayout/PaymentsLayout.tsx

@@ -5,46 +5,44 @@
 
 'use client';
 
-import React, { useState } from 'react';
+import React from 'react';
 import {
   PaymentsProvider,
-  BalancesProvider,
   ApiKeysProvider,
   OverviewProvider,
+  RootPaymentsProvider,
 } from '@djangocfg/api/cfg/contexts';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@djangocfg/ui';
 import { Wallet, CreditCard, History, Key, Crown } from 'lucide-react';
-import type { PaymentTab } from './types';
 import { OverviewView } from './views/overview';
 import { PaymentsView } from './views/payments';
 import { TransactionsView } from './views/transactions';
 import { ApiKeysView } from './views/apikeys';
 import { TariffsView } from './views/tariffs';
-import { CreateApiKeyDialog, DeleteApiKeyDialog } from './components';
+import { CreateApiKeyDialog, DeleteApiKeyDialog, CreatePaymentDialog, PaymentDetailsDialog } from './components';
 
 // ─────────────────────────────────────────────────────────────────────────
-// Payments Layout Content
+// Payments Layout
 // ─────────────────────────────────────────────────────────────────────────
 
-const PaymentsLayoutContent: React.FC = () => {
-  const [activeTab, setActiveTab] = useState<PaymentTab>('overview');
+export interface PaymentsLayoutProps {
+  children?: React.ReactNode;
+}
 
+export const PaymentsLayout: React.FC<PaymentsLayoutProps> = () => {
   return (
-    <div className="h-full p-6 space-y-6">
-      {/* Page Header */}
-      <div>
-        <h1 className="text-3xl font-bold tracking-tight">Payments & Billing</h1>
-        <p className="text-muted-foreground">
-          Manage your payments, subscriptions, API keys, and account balance
-        </p>
-      </div>
+    <RootPaymentsProvider>
+      <div className="h-full p-6 space-y-6">
+        {/* Page Header */}
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">Payments & Billing</h1>
+          <p className="text-muted-foreground">
+            Manage your payments, subscriptions, API keys, and account balance
+          </p>
+        </div>
 
       {/* Main Content with Tabs */}
-      <Tabs
-        value={activeTab}
-        onValueChange={(value) => setActiveTab(value as PaymentTab)}
-        className="space-y-6"
-      >
+      <Tabs defaultValue="overview" className="space-y-6">
         <TabsList className="inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground">
           <TabsTrigger value="overview" className="inline-flex items-center gap-2 px-3 py-1.5">
             <Wallet className="h-4 w-4" />
@@ -68,58 +66,44 @@ const PaymentsLayoutContent: React.FC = () => {
           </TabsTrigger>
         </TabsList>
 
-        {/* Overview Tab */}
+        {/* Each tab wrapped in its own provider - loads only when tab is active */}
         <TabsContent value="overview" className="space-y-6">
-          <OverviewView />
+          <OverviewProvider>
+            <PaymentsProvider>
+              <OverviewView />
+              <CreatePaymentDialog />
+            </PaymentsProvider>
+          </OverviewProvider>
         </TabsContent>
 
-        {/* Payments Tab */}
         <TabsContent value="payments" className="space-y-6">
-          <PaymentsView />
+          <PaymentsProvider>
+            <PaymentsView />
+            <CreatePaymentDialog />
+          </PaymentsProvider>
         </TabsContent>
 
-        {/* Transactions Tab */}
         <TabsContent value="transactions" className="space-y-6">
           <TransactionsView />
         </TabsContent>
 
-        {/* API Keys Tab */}
         <TabsContent value="apikeys" className="space-y-6">
-          <ApiKeysView />
+          <ApiKeysProvider>
+            <ApiKeysView />
+            <CreateApiKeyDialog />
+            <DeleteApiKeyDialog />
+          </ApiKeysProvider>
         </TabsContent>
 
-        {/* Tariffs Tab */}
-          <TabsContent value="tariffs" className="space-y-6">
-            <TariffsView />
-          </TabsContent>
-        </Tabs>
+        <TabsContent value="tariffs" className="space-y-6">
+          <TariffsView />
+        </TabsContent>
+      </Tabs>
 
-        {/* Global Dialogs */}
-        <CreateApiKeyDialog />
-        <DeleteApiKeyDialog />
+      {/* Global Payment Details Dialog */}
+      <PaymentDetailsDialog />
       </div>
-    );
-  };
-  
-  // ─────────────────────────────────────────────────────────────────────────
-  // Payments Layout (with providers)
-  // ─────────────────────────────────────────────────────────────────────────
-
-export interface PaymentsLayoutProps {
-  children?: React.ReactNode;
-}
-
-export const PaymentsLayout: React.FC<PaymentsLayoutProps> = () => {
-  return (
-    <OverviewProvider>
-      <PaymentsProvider>
-        <BalancesProvider>
-          <ApiKeysProvider>
-            <PaymentsLayoutContent />
-          </ApiKeysProvider>
-        </BalancesProvider>
-      </PaymentsProvider>
-    </OverviewProvider>
+    </RootPaymentsProvider>
   );
 };
 

package/src/layouts/PaymentsLayout/components/CreatePaymentDialog.tsx

@@ -5,7 +5,7 @@
 
 'use client';
 
-import React, { useState } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import {
   Dialog,
   DialogContent,
@@ -21,21 +21,21 @@ import {
   FormLabel,
   FormMessage,
   Input,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
+  Combobox,
   Button,
+  TokenIcon,
   useEventListener,
 } from '@djangocfg/ui';
 import { Plus, RefreshCw } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { usePaymentsContext } from '@djangocfg/api/cfg/contexts';
+import { usePaymentsContext, useRootPaymentsContext } from '@djangocfg/api/cfg/contexts';
 import { Schemas, Enums } from '@djangocfg/api/cfg/generated';
 import { paymentsLogger } from '../../../utils/logger';
 import { PAYMENTS_DIALOG_EVENTS, closePaymentsDialog } from '../events';
+import { openPaymentDetails } from './PaymentDetailsDialog';
+import type { ProviderCurrency } from '@djangocfg/api/cfg/contexts';
+import type { ComboboxOption } from '@djangocfg/ui';
 
 const { PaymentCreateRequestSchema } = Schemas;
 type PaymentCreateRequest = Schemas.PaymentCreateRequest;
@@ -44,17 +44,65 @@ const { PaymentCreateRequestCurrencyCode, PaymentCreateRequestProvider } = Enums
 export const CreatePaymentDialog: React.FC = () => {
   const [open, setOpen] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
+
   const { createPayment } = usePaymentsContext();
+  const {
+    providerCurrencies,
+    isLoadingProviderCurrencies,
+  } = useRootPaymentsContext();
 
   const form = useForm<PaymentCreateRequest>({
     resolver: zodResolver(PaymentCreateRequestSchema),
     defaultValues: {
       amount_usd: 10,
       currency_code: PaymentCreateRequestCurrencyCode.USDT,
-      provider: PaymentCreateRequestProvider.NOWPAYMENTS,
     },
   });
 
+  // Group currencies by token and create combobox options
+  const currencyOptions = useMemo((): ComboboxOption[] => {
+    if (!providerCurrencies?.results) return [];
+
+    const enabledCurrencies = providerCurrencies.results.filter(pc => pc.is_enabled);
+
+    return enabledCurrencies.map((pc) => {
+      const networkInfo = pc.network ? ` (${pc.network.name})` : '';
+      const label = `${pc.currency.code} - ${pc.currency.name}${networkInfo}`;
+      const description = pc.network ? pc.network.code : 'No network';
+
+      return {
+        value: pc.provider_currency_code,
+        label,
+        description,
+      };
+    });
+  }, [providerCurrencies]);
+
+  // Get ProviderCurrency by currency_code
+  const getProviderCurrency = (currencyCode: string) => {
+    return providerCurrencies?.results?.find(
+      pc => pc.provider_currency_code === currencyCode
+    );
+  };
+
+  // Calculate crypto amount from USD
+  const calculateCryptoAmount = useMemo(() => {
+    const amountUsd = form.watch('amount_usd');
+    const currencyCode = form.watch('currency_code');
+    const pc = getProviderCurrency(currencyCode);
+
+    if (!pc || !pc.currency.usd_rate || !amountUsd) {
+      return null;
+    }
+
+    const cryptoAmount = amountUsd / pc.currency.usd_rate;
+    return {
+      amount: cryptoAmount,
+      currency: pc.currency.code,
+      symbol: pc.currency.symbol || pc.currency.code,
+    };
+  }, [form.watch('amount_usd'), form.watch('currency_code'), providerCurrencies]);
+
   useEventListener(PAYMENTS_DIALOG_EVENTS.OPEN_CREATE_PAYMENT_DIALOG, () => {
     setOpen(true);
   });
@@ -68,12 +116,25 @@ export const CreatePaymentDialog: React.FC = () => {
     form.reset();
   };
 
+  // Initialize default currency if not set
+  useEffect(() => {
+    if (currencyOptions.length > 0 && !form.getValues('currency_code')) {
+      form.setValue('currency_code', currencyOptions[0].value as any);
+    }
+  }, [currencyOptions, form]);
+
   const handleSubmit = async (data: PaymentCreateRequest) => {
     try {
       setIsSubmitting(true);
-      await createPayment(data);
+
+      const payment = await createPayment(data);
       handleClose();
       closePaymentsDialog();
+
+      // Open payment details dialog with created payment
+      if (payment) {
+        openPaymentDetails(payment);
+      }
     } catch (error) {
       paymentsLogger.error('Failed to create payment:', error);
     } finally {
@@ -81,11 +142,6 @@ export const CreatePaymentDialog: React.FC = () => {
     }
   };
 
-  const currencyOptions = Object.entries(PaymentCreateRequestCurrencyCode).map(([key, value]) => ({
-    value,
-    label: key,
-  }));
-
   return (
     <Dialog open={open} onOpenChange={(isOpen) => !isOpen && handleClose()}>
       <DialogContent className="sm:max-w-md">
@@ -128,20 +184,51 @@ export const CreatePaymentDialog: React.FC = () => {
               render={({ field }) => (
                 <FormItem>
                   <FormLabel>Currency</FormLabel>
-                  <Select value={field.value} onValueChange={field.onChange}>
-                    <FormControl>
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select currency" />
-                      </SelectTrigger>
-                    </FormControl>
-                    <SelectContent>
-                      {currencyOptions.map((option) => (
-                        <SelectItem key={option.value} value={option.value}>
-                          {option.label}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
+                  <FormControl>
+                    <Combobox
+                      options={currencyOptions}
+                      value={field.value}
+                      onValueChange={field.onChange}
+                      placeholder="Select currency..."
+                      searchPlaceholder="Search currencies..."
+                      emptyText="No currencies found."
+                      disabled={isLoadingProviderCurrencies}
+                      className="w-full"
+                      renderValue={(option) => {
+                        if (!option) return null;
+                        const pc = getProviderCurrency(option.value);
+                        if (!pc) return option.label;
+                        return (
+                          <div className="flex items-center gap-2">
+                            <TokenIcon symbol={pc.currency.code} size={20} />
+                            <span>{pc.currency.code}</span>
+                            {pc.network && (
+                              <span className="text-xs text-muted-foreground">
+                                ({pc.network.name})
+                              </span>
+                            )}
+                          </div>
+                        );
+                      }}
+                      renderOption={(option) => {
+                        const pc = getProviderCurrency(option.value);
+                        if (!pc) return option.label;
+                        return (
+                          <div className="flex items-center gap-2 flex-1">
+                            <TokenIcon symbol={pc.currency.code} size={24} />
+                            <div className="flex flex-col flex-1">
+                              <span className="font-medium">{pc.currency.code} - {pc.currency.name}</span>
+                              {pc.network && (
+                                <span className="text-xs text-muted-foreground">
+                                  Network: {pc.network.name} ({pc.network.code})
+                                </span>
+                              )}
+                            </div>
+                          </div>
+                        );
+                      }}
+                    />
+                  </FormControl>
                   <FormDescription>
                     The cryptocurrency to use for payment.
                   </FormDescription>
@@ -150,37 +237,59 @@ export const CreatePaymentDialog: React.FC = () => {
               )}
             />
 
-            <FormField
-              control={form.control}
-              name="provider"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Payment Provider</FormLabel>
-                  <Select value={field.value} onValueChange={field.onChange}>
-                    <FormControl>
-                      <SelectTrigger>
-                        <SelectValue placeholder="Select provider" />
-                      </SelectTrigger>
-                    </FormControl>
-                    <SelectContent>
-                      <SelectItem value={PaymentCreateRequestProvider.NOWPAYMENTS}>
-                        NOWPayments
-                      </SelectItem>
-                    </SelectContent>
-                  </Select>
-                  <FormDescription>
-                    The payment gateway to process your payment.
-                  </FormDescription>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
+            {/* Conversion and Fee Information */}
+            {calculateCryptoAmount && (() => {
+              const pc = getProviderCurrency(form.watch('currency_code'));
+              const amountUsd = form.watch('amount_usd');
+              if (!pc) return null;
+
+              return (
+                <div className="rounded-lg bg-muted p-4 space-y-3">
+                  {/* Amount to Send in Crypto */}
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm text-muted-foreground">You will send</span>
+                    <div className="flex items-center gap-2">
+                      <TokenIcon symbol={calculateCryptoAmount.currency} size={16} />
+                      <span className="font-mono font-semibold">
+                        {calculateCryptoAmount.amount.toFixed(8)} {calculateCryptoAmount.currency}
+                      </span>
+                    </div>
+                  </div>
+
+                  {/* USD Amount Received */}
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm text-muted-foreground">You will receive</span>
+                    <span className="text-lg font-bold">
+                      ${amountUsd?.toFixed(2)} USD
+                    </span>
+                  </div>
+
+                  {/* Exchange Rate */}
+                  <div className="flex items-center justify-between text-xs">
+                    <span className="text-muted-foreground">Rate</span>
+                    <span className="font-medium">
+                      1 {calculateCryptoAmount.currency} = ${pc.currency.usd_rate?.toFixed(2)}
+                    </span>
+                  </div>
+
+                  {/* Network Info */}
+                  {pc.network && (
+                    <div className="border-t pt-3">
+                      <div className="flex items-center justify-between">
+                        <span className="text-sm text-muted-foreground">Network</span>
+                        <span className="text-sm font-medium">{pc.network.name}</span>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              );
+            })()}
 
             <DialogFooter>
               <Button type="button" variant="outline" onClick={handleClose} disabled={isSubmitting}>
                 Cancel
               </Button>
-              <Button type="submit" disabled={isSubmitting || !form.formState.isValid}>
+              <Button type="submit" disabled={isSubmitting}>
                 {isSubmitting ? (
                   <>
                     <RefreshCw className="h-4 w-4 mr-2 animate-spin" />

package/src/layouts/PaymentsLayout/components/PaymentDetailsDialog.tsx

@@ -0,0 +1,254 @@
+/**
+ * Payment Details Dialog
+ * Shows payment details with QR code, address, and status
+ */
+
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Button,
+  TokenIcon,
+  useEventListener,
+} from '@djangocfg/ui';
+import { Copy, ExternalLink, CheckCircle2, Clock, XCircle, AlertCircle } from 'lucide-react';
+import type { Payment } from '@djangocfg/api/cfg/contexts';
+
+export const PAYMENT_DETAILS_EVENTS = {
+  OPEN_PAYMENT_DETAILS: 'open-payment-details',
+  CLOSE_PAYMENT_DETAILS: 'close-payment-details',
+} as const;
+
+export interface PaymentDetailsDialogProps {
+  payment?: Payment | null;
+}
+
+export const PaymentDetailsDialog: React.FC<PaymentDetailsDialogProps> = ({ payment: initialPayment }) => {
+  const [open, setOpen] = useState(false);
+  const [payment, setPayment] = useState<Payment | null>(initialPayment || null);
+  const [copied, setCopied] = useState(false);
+  const [timeLeft, setTimeLeft] = useState<string>('');
+
+  useEventListener(PAYMENT_DETAILS_EVENTS.OPEN_PAYMENT_DETAILS, (event: CustomEvent<{ payment: Payment }>) => {
+    setPayment(event.detail.payment);
+    setOpen(true);
+  });
+
+  useEventListener(PAYMENT_DETAILS_EVENTS.CLOSE_PAYMENT_DETAILS, () => {
+    setOpen(false);
+  });
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const handleCopyAddress = async () => {
+    if (payment?.pay_address) {
+      await navigator.clipboard.writeText(payment.pay_address);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  // Calculate time left until expiration
+  useEffect(() => {
+    if (!payment?.expires_at) return;
+
+    const updateTimeLeft = () => {
+      const now = 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 / (1000 * 60 * 60));
+      const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+      const seconds = Math.floor((diff % (1000 * 60)) / 1000);
+
+      setTimeLeft(`${hours}h ${minutes}m ${seconds}s`);
+    };
+
+    updateTimeLeft();
+    const interval = setInterval(updateTimeLeft, 1000);
+
+    return () => clearInterval(interval);
+  }, [payment?.expires_at]);
+
+  // Get status icon and color
+  const getStatusInfo = () => {
+    switch (payment?.status) {
+      case 'pending':
+        return { icon: Clock, color: 'text-yellow-500', bg: 'bg-yellow-500/10' };
+      case 'completed':
+        return { icon: CheckCircle2, color: 'text-green-500', bg: 'bg-green-500/10' };
+      case 'failed':
+        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' };
+      default:
+        return { icon: Clock, color: 'text-gray-500', bg: 'bg-gray-500/10' };
+    }
+  };
+
+  if (!payment) return null;
+
+  const statusInfo = getStatusInfo();
+  const StatusIcon = statusInfo.icon;
+
+  // Generate QR code URL (using simple data URL)
+  const qrCodeUrl = payment.pay_address
+    ? `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(payment.pay_address)}`
+    : null;
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && handleClose()}>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Payment Details</DialogTitle>
+          <DialogDescription>
+            Send cryptocurrency to complete your payment
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-6">
+          {/* Status Badge */}
+          <div className={`flex items-center gap-3 p-4 rounded-lg ${statusInfo.bg}`}>
+            <StatusIcon className={`h-5 w-5 ${statusInfo.color}`} />
+            <div className="flex-1">
+              <div className="font-semibold capitalize">{payment.status}</div>
+              {payment.status === 'pending' && timeLeft && (
+                <div className="text-sm text-muted-foreground">
+                  Expires in {timeLeft}
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Amount Information */}
+          <div className="space-y-3">
+            <div className="flex items-center justify-between p-4 bg-muted rounded-lg">
+              <span className="text-sm text-muted-foreground">Amount to send</span>
+              <div className="flex items-center gap-2">
+                <TokenIcon symbol={payment.currency || 'BTC'} size={20} />
+                <span className="font-mono font-bold text-lg">
+                  {payment.amount_crypto?.toFixed(8)} {payment.currency}
+                </span>
+              </div>
+            </div>
+
+            <div className="flex items-center justify-between px-4">
+              <span className="text-sm text-muted-foreground">Equivalent to</span>
+              <span className="font-semibold text-lg">${payment.amount_usd?.toFixed(2)} USD</span>
+            </div>
+
+            {payment.network && (
+              <div className="flex items-center justify-between px-4">
+                <span className="text-sm text-muted-foreground">Network</span>
+                <span className="font-medium">{payment.network}</span>
+              </div>
+            )}
+          </div>
+
+          {/* QR Code */}
+          {qrCodeUrl && payment.status === 'pending' && (
+            <div className="flex justify-center p-6 bg-white rounded-lg">
+              <img src={qrCodeUrl} alt="Payment QR Code" className="w-48 h-48" />
+            </div>
+          )}
+
+          {/* Payment Address */}
+          {payment.pay_address && payment.status === 'pending' && (
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Payment Address</label>
+              <div className="flex items-center gap-2">
+                <div className="flex-1 p-3 bg-muted rounded-lg font-mono text-sm break-all">
+                  {payment.pay_address}
+                </div>
+                <Button
+                  variant="outline"
+                  size="icon"
+                  onClick={handleCopyAddress}
+                  className="shrink-0"
+                >
+                  {copied ? (
+                    <CheckCircle2 className="h-4 w-4 text-green-500" />
+                  ) : (
+                    <Copy className="h-4 w-4" />
+                  )}
+                </Button>
+              </div>
+            </div>
+          )}
+
+          {/* Transaction Hash */}
+          {payment.transaction_hash && (
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Transaction Hash</label>
+              <div className="p-3 bg-muted rounded-lg font-mono text-sm break-all">
+                {payment.transaction_hash}
+              </div>
+            </div>
+          )}
+
+          {/* Payment URL */}
+          {payment.payment_url && payment.status === 'pending' && (
+            <Button
+              variant="outline"
+              className="w-full"
+              onClick={() => window.open(payment.payment_url!, '_blank')}
+            >
+              <ExternalLink className="h-4 w-4 mr-2" />
+              Open in Payment Provider
+            </Button>
+          )}
+
+          {/* Additional Info */}
+          <div className="pt-4 border-t space-y-2 text-xs text-muted-foreground">
+            <div className="flex justify-between">
+              <span>Payment ID</span>
+              <span className="font-mono">{payment.id}</span>
+            </div>
+            <div className="flex justify-between">
+              <span>Created</span>
+              <span>{new Date(payment.created_at!).toLocaleString()}</span>
+            </div>
+            {payment.confirmations_count !== undefined && (
+              <div className="flex justify-between">
+                <span>Confirmations</span>
+                <span>{payment.confirmations_count}</span>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={handleClose}>
+            Close
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+// Helper function to open payment details dialog
+export const openPaymentDetails = (payment: Payment) => {
+  window.dispatchEvent(
+    new CustomEvent(PAYMENT_DETAILS_EVENTS.OPEN_PAYMENT_DETAILS, {
+      detail: { payment },
+    })
+  );
+};
+
+export const closePaymentDetails = () => {
+  window.dispatchEvent(new Event(PAYMENT_DETAILS_EVENTS.CLOSE_PAYMENT_DETAILS));
+};

package/src/layouts/PaymentsLayout/components/index.ts

@@ -1,4 +1,5 @@
 export { CreateApiKeyDialog } from './CreateApiKeyDialog';
 export { DeleteApiKeyDialog } from './DeleteApiKeyDialog';
 export { CreatePaymentDialog } from './CreatePaymentDialog';
+export { PaymentDetailsDialog, openPaymentDetails, closePaymentDetails } from './PaymentDetailsDialog';
 

package/src/layouts/PaymentsLayout/context/RootPaymentsContext.tsx

@@ -0,0 +1,134 @@
+'use client';
+
+import React, { createContext, useContext, useEffect, type ReactNode } from 'react';
+import {
+  api,
+  usePaymentsCurrenciesList,
+  usePaymentsProviderCurrenciesList,
+  usePaymentsNetworksList,
+} from '@djangocfg/api/cfg';
+import type { API } from '@djangocfg/api/cfg';
+import type {
+  Currency,
+  PaginatedCurrencyListList,
+  ProviderCurrency,
+  PaginatedProviderCurrencyList,
+  Network,
+  PaginatedNetworkList,
+} from '@djangocfg/api/cfg';
+
+// ─────────────────────────────────────────────────────────────────────────
+// Context Type
+// ─────────────────────────────────────────────────────────────────────────
+
+export interface RootPaymentsContextValue {
+  // Currencies
+  currencies: PaginatedCurrencyListList | undefined;
+  isLoadingCurrencies: boolean;
+  currenciesError: Error | undefined;
+  refreshCurrencies: () => Promise<void>;
+
+  // Provider Currencies
+  providerCurrencies: PaginatedProviderCurrencyList | undefined;
+  isLoadingProviderCurrencies: boolean;
+  providerCurrenciesError: Error | undefined;
+  refreshProviderCurrencies: () => Promise<void>;
+
+  // Networks
+  networks: PaginatedNetworkList | undefined;
+  isLoadingNetworks: boolean;
+  networksError: Error | undefined;
+  refreshNetworks: () => Promise<void>;
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Context
+// ─────────────────────────────────────────────────────────────────────────
+
+const RootPaymentsContext = createContext<RootPaymentsContextValue | undefined>(undefined);
+
+// ─────────────────────────────────────────────────────────────────────────
+// Provider
+// ─────────────────────────────────────────────────────────────────────────
+
+export function RootPaymentsProvider({ children }: { children: ReactNode }) {
+  // List all currencies
+  const {
+    data: currencies,
+    error: currenciesError,
+    isLoading: isLoadingCurrencies,
+    mutate: mutateCurrencies,
+  } = usePaymentsCurrenciesList({}, api as unknown as API);
+
+  // List all provider currencies
+  const {
+    data: providerCurrencies,
+    error: providerCurrenciesError,
+    isLoading: isLoadingProviderCurrencies,
+    mutate: mutateProviderCurrencies,
+  } = usePaymentsProviderCurrenciesList({}, api as unknown as API);
+
+  // List all networks
+  const {
+    data: networks,
+    error: networksError,
+    isLoading: isLoadingNetworks,
+    mutate: mutateNetworks,
+  } = usePaymentsNetworksList({}, api as unknown as API);
+
+  const refreshCurrencies = async () => {
+    await mutateCurrencies();
+  };
+
+  const refreshProviderCurrencies = async () => {
+    await mutateProviderCurrencies();
+  };
+
+  const refreshNetworks = async () => {
+    await mutateNetworks();
+  };
+
+  const value: RootPaymentsContextValue = {
+    currencies,
+    isLoadingCurrencies,
+    currenciesError,
+    refreshCurrencies,
+    providerCurrencies,
+    isLoadingProviderCurrencies,
+    providerCurrenciesError,
+    refreshProviderCurrencies,
+    networks,
+    isLoadingNetworks,
+    networksError,
+    refreshNetworks,
+  };
+
+  return (
+    <RootPaymentsContext.Provider value={value}>{children}</RootPaymentsContext.Provider>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Hook
+// ─────────────────────────────────────────────────────────────────────────
+
+export function useRootPaymentsContext(): RootPaymentsContextValue {
+  const context = useContext(RootPaymentsContext);
+  if (!context) {
+    throw new Error('useRootPaymentsContext must be used within RootPaymentsProvider');
+  }
+  return context;
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// Re-export types
+// ─────────────────────────────────────────────────────────────────────────
+
+export type {
+  Currency,
+  PaginatedCurrencyListList,
+  ProviderCurrency,
+  PaginatedProviderCurrencyList,
+  Network,
+  PaginatedNetworkList,
+};

package/src/layouts/PaymentsLayout/views/overview/components/BalanceCard.tsx

@@ -16,15 +16,15 @@ import {
   Skeleton,
 } from '@djangocfg/ui';
 import { Wallet, RefreshCw, Plus } from 'lucide-react';
-import { useBalancesContext } from '@djangocfg/api/cfg/contexts';
+import { useOverviewContext } from '@djangocfg/api/cfg/contexts';
 import { openCreatePaymentDialog } from '../../../events';
 
 export const BalanceCard: React.FC = () => {
-  const { 
-    balanceSummary, 
-    isLoadingSummary, 
-    refreshSummary 
-  } = useBalancesContext();
+  const {
+    balanceSummary,
+    isLoadingSummary,
+    refreshSummary
+  } = useOverviewContext();
 
   const formatCurrency = (amount?: number | null) => {
     if (amount === null || amount === undefined) return '$0.00';

package/src/layouts/PaymentsLayout/views/payments/components/PaymentsList.tsx

@@ -29,7 +29,8 @@ import {
 } from '@djangocfg/ui';
 import { Plus, Search, Filter, ChevronLeft, ChevronRight, RefreshCw, ExternalLink } from 'lucide-react';
 import { usePaymentsContext } from '@djangocfg/api/cfg/contexts';
-import { openCreatePaymentDialog, openPaymentDetailsDialog } from '../../../events';
+import { openCreatePaymentDialog } from '../../../events';
+import { openPaymentDetails } from '../../../components/PaymentDetailsDialog';
 
 export const PaymentsList: React.FC = () => {
   const {
@@ -197,7 +198,11 @@ export const PaymentsList: React.FC = () => {
                 </TableHeader>
                 <TableBody>
                   {paymentsList.map((payment) => (
-                    <TableRow key={payment.id} className="cursor-pointer hover:bg-accent">
+                    <TableRow
+                      key={payment.id}
+                      className="cursor-pointer hover:bg-accent"
+                      onClick={() => openPaymentDetails(payment)}
+                    >
                       <TableCell>
                         <div>
                           <div className="font-medium">
@@ -229,7 +234,7 @@ export const PaymentsList: React.FC = () => {
                           size="sm"
                           onClick={(e) => {
                             e.stopPropagation();
-                            openPaymentDetailsDialog(payment.id);
+                            openPaymentDetails(payment);
                           }}
                         >
                           <ExternalLink className="h-4 w-4" />