@djangocfg/layouts 1.0.3 → 1.0.5

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

@@ -1,5 +1,5 @@
 /**
- * Payment Details Dialog
+ * Payment Details Dialog (v2.0 - Simplified)
  * Shows payment details with QR code, address, and status
  */
 
@@ -15,37 +15,50 @@ import {
   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';
+import { Copy, ExternalLink, CheckCircle2, Clock, XCircle, AlertCircle, RefreshCw } from 'lucide-react';
+import { Hooks, api } from '@djangocfg/api';
+import type { API } from '@djangocfg/api';
+import { PAYMENT_EVENTS } from '../events';
 
-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 }) => {
+export const PaymentDetailsDialog: React.FC = () => {
   const [open, setOpen] = useState(false);
-  const [payment, setPayment] = useState<Payment | null>(initialPayment || null);
+  const [paymentId, setPaymentId] = useState<string | null>(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);
-  });
+  // Load payment data by ID using hook
+  const shouldFetch = open && !!paymentId;
+  const { data: payment, isLoading, error, mutate } = Hooks.usePaymentsPaymentsRetrieve(
+    shouldFetch ? paymentId : '',
+    api as unknown as API
+  );
 
-  useEventListener(PAYMENT_DETAILS_EVENTS.CLOSE_PAYMENT_DETAILS, () => {
-    setOpen(false);
-  });
+  // Listen for open/close events
+  useEffect(() => {
+    const handleOpen = (event: Event) => {
+      const customEvent = event as CustomEvent<{ id: string }>;
+      setPaymentId(customEvent.detail.id);
+      setOpen(true);
+    };
+
+    const handleClose = () => {
+      setOpen(false);
+      setPaymentId(null);
+    };
+
+    window.addEventListener(PAYMENT_EVENTS.OPEN_PAYMENT_DETAILS_DIALOG, handleOpen);
+    window.addEventListener(PAYMENT_EVENTS.CLOSE_DIALOG, handleClose);
+
+    return () => {
+      window.removeEventListener(PAYMENT_EVENTS.OPEN_PAYMENT_DETAILS_DIALOG, handleOpen);
+      window.removeEventListener(PAYMENT_EVENTS.CLOSE_DIALOG, handleClose);
+    };
+  }, []);
 
   const handleClose = () => {
     setOpen(false);
+    setPaymentId(null);
   };
 
   const handleCopyAddress = async () => {
@@ -85,26 +98,68 @@ export const PaymentDetailsDialog: React.FC<PaymentDetailsDialogProps> = ({ paym
 
   // Get status icon and color
   const getStatusInfo = () => {
-    switch (payment?.status) {
+    switch (payment?.status?.toLowerCase()) {
       case 'pending':
         return { icon: Clock, color: 'text-yellow-500', bg: 'bg-yellow-500/10' };
       case 'completed':
+      case 'success':
         return { icon: CheckCircle2, color: 'text-green-500', bg: 'bg-green-500/10' };
       case 'failed':
+      case 'error':
         return { icon: XCircle, color: 'text-red-500', bg: 'bg-red-500/10' };
       case 'expired':
         return { icon: AlertCircle, color: 'text-gray-500', bg: 'bg-gray-500/10' };
+      case 'confirming':
+        return { icon: RefreshCw, color: 'text-blue-500', bg: 'bg-blue-500/10' };
       default:
         return { icon: Clock, color: 'text-gray-500', bg: 'bg-gray-500/10' };
     }
   };
 
-  if (!payment) return null;
+  if (!open) return null;
+
+  // Loading state
+  if (isLoading) {
+    return (
+      <Dialog open={open} onOpenChange={(isOpen) => !isOpen && handleClose()}>
+        <DialogContent className="sm:max-w-lg">
+          <DialogHeader>
+            <DialogTitle>Payment Details</DialogTitle>
+            <DialogDescription>Loading payment information...</DialogDescription>
+          </DialogHeader>
+          <div className="flex items-center justify-center py-12">
+            <RefreshCw className="h-8 w-8 animate-spin text-muted-foreground" />
+          </div>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  // Error state
+  if (shouldFetch && !isLoading && (error || !payment)) {
+    return (
+      <Dialog open={open} onOpenChange={(isOpen) => !isOpen && handleClose()}>
+        <DialogContent className="sm:max-w-lg">
+          <DialogHeader>
+            <DialogTitle>Payment Details</DialogTitle>
+            <DialogDescription>Failed to load payment information</DialogDescription>
+          </DialogHeader>
+          <div className="flex flex-col items-center justify-center py-12 space-y-4">
+            <XCircle className="h-12 w-12 text-destructive" />
+            <p className="text-sm text-muted-foreground">
+              {error ? `Error: ${error}` : 'Payment not found'}
+            </p>
+            <Button onClick={() => mutate()}>Try Again</Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    );
+  }
 
   const statusInfo = getStatusInfo();
   const StatusIcon = statusInfo.icon;
 
-  // Generate QR code URL (using simple data URL)
+  // Generate QR code URL
   const qrCodeUrl = payment.pay_address
     ? `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(payment.pay_address)}`
     : null;
@@ -121,7 +176,7 @@ export const PaymentDetailsDialog: React.FC<PaymentDetailsDialogProps> = ({ paym
 
         <div className="space-y-6">
           {/* Status Badge */}
-          <div className={`flex items-center gap-3 p-4 rounded-lg ${statusInfo.bg}`}>
+          <div className={`flex items-center gap-3 p-4 rounded-sm ${statusInfo.bg}`}>
             <StatusIcon className={`h-5 w-5 ${statusInfo.color}`} />
             <div className="flex-1">
               <div className="font-semibold capitalize">{payment.status}</div>
@@ -135,32 +190,41 @@ export const PaymentDetailsDialog: React.FC<PaymentDetailsDialogProps> = ({ paym
 
           {/* Amount Information */}
           <div className="space-y-3">
-            <div className="flex items-center justify-between p-4 bg-muted rounded-lg">
+            <div className="flex items-center justify-between p-4 bg-muted rounded-sm">
               <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} />
+                <TokenIcon symbol={String(payment.currency_code || 'BTC')} size={20} />
                 <span className="font-mono font-bold text-lg">
-                  {payment.amount_crypto?.toFixed(8)} {payment.currency}
+                  {payment.pay_amount || '0.00000000'} {payment.currency_code}
                 </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>
+              <span className="font-semibold text-lg">
+                ${parseFloat(payment.amount_usd || '0').toFixed(2)} USD
+              </span>
             </div>
 
-            {payment.network && (
+            {payment.internal_payment_id && (
+              <div className="flex items-center justify-between px-4">
+                <span className="text-sm text-muted-foreground">Payment Order #</span>
+                <span className="font-mono font-medium">{payment.internal_payment_id}</span>
+              </div>
+            )}
+
+            {payment.currency_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>
+                <span className="font-medium">{payment.currency_network}</span>
               </div>
             )}
           </div>
 
           {/* QR Code */}
           {qrCodeUrl && payment.status === 'pending' && (
-            <div className="flex justify-center p-6 bg-white rounded-lg">
+            <div className="flex justify-center p-6 bg-white rounded-sm">
               <img src={qrCodeUrl} alt="Payment QR Code" className="w-48 h-48" />
             </div>
           )}
@@ -170,7 +234,7 @@ export const PaymentDetailsDialog: React.FC<PaymentDetailsDialogProps> = ({ paym
             <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">
+                <div className="flex-1 p-3 bg-muted rounded-sm font-mono text-sm break-all">
                   {payment.pay_address}
                 </div>
                 <Button
@@ -193,7 +257,7 @@ export const PaymentDetailsDialog: React.FC<PaymentDetailsDialogProps> = ({ paym
           {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">
+              <div className="p-3 bg-muted rounded-sm font-mono text-sm break-all">
                 {payment.transaction_hash}
               </div>
             </div>
@@ -234,21 +298,12 @@ export const PaymentDetailsDialog: React.FC<PaymentDetailsDialogProps> = ({ paym
           <Button variant="outline" onClick={handleClose}>
             Close
           </Button>
+          <Button onClick={() => mutate()} variant="ghost" size="sm">
+            <RefreshCw className="h-4 w-4 mr-2" />
+            Refresh
+          </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,5 +1,2 @@
-export { CreateApiKeyDialog } from './CreateApiKeyDialog';
-export { DeleteApiKeyDialog } from './DeleteApiKeyDialog';
 export { CreatePaymentDialog } from './CreatePaymentDialog';
-export { PaymentDetailsDialog, openPaymentDetails, closePaymentDetails } from './PaymentDetailsDialog';
-
+export { PaymentDetailsDialog } from './PaymentDetailsDialog';

package/src/layouts/PaymentsLayout/events.ts

@@ -1,106 +1,45 @@
 /**
- * Payments Layout Events
- * Event-based communication for dialogs and actions
+ * Payment Events System (v2.0 - Simplified)
+ *
+ * Event-based communication for dialogs using DOM events
+ * Removed: API Keys events (deprecated)
  */
 
-import { events } from '@djangocfg/ui';
-import type { APIKeyDetail, Payment } from './types';
-
 // ─────────────────────────────────────────────────────────────────────────
-// Dialog Events
+// Event Names
 // ─────────────────────────────────────────────────────────────────────────
 
-export const PAYMENTS_DIALOG_EVENTS = {
-  // API Keys
-  OPEN_CREATE_APIKEY_DIALOG: 'OPEN_CREATE_APIKEY_DIALOG',
-  OPEN_EDIT_APIKEY_DIALOG: 'OPEN_EDIT_APIKEY_DIALOG',
-  OPEN_DELETE_APIKEY_DIALOG: 'OPEN_DELETE_APIKEY_DIALOG',
-  
-  // Payments
-  OPEN_CREATE_PAYMENT_DIALOG: 'OPEN_CREATE_PAYMENT_DIALOG',
-  OPEN_PAYMENT_DETAILS_DIALOG: 'OPEN_PAYMENT_DETAILS_DIALOG',
-  OPEN_CANCEL_PAYMENT_DIALOG: 'OPEN_CANCEL_PAYMENT_DIALOG',
-  
-  // Close
-  CLOSE_PAYMENTS_DIALOG: 'CLOSE_PAYMENTS_DIALOG',
+export const PAYMENT_EVENTS = {
+  OPEN_CREATE_PAYMENT_DIALOG: 'payments:open-create-payment',
+  OPEN_PAYMENT_DETAILS_DIALOG: 'payments:open-payment-details',
+  CLOSE_DIALOG: 'payments:close-dialog',
 } as const;
 
 // ─────────────────────────────────────────────────────────────────────────
 // Event Types
 // ─────────────────────────────────────────────────────────────────────────
 
-export interface PaymentsDialogEvent {
-  type: typeof PAYMENTS_DIALOG_EVENTS[keyof typeof PAYMENTS_DIALOG_EVENTS];
-  payload?: {
-    // API Keys
-    keyId?: string;
-    keyData?: APIKeyDetail;
-    initialKeyData?: Partial<APIKeyDetail>;
-    
-    // Payments
-    paymentId?: string;
-    paymentData?: Payment;
-    initialPaymentData?: Partial<Payment>;
-  };
-}
-
-// ─────────────────────────────────────────────────────────────────────────
-// API Keys Events
-// ─────────────────────────────────────────────────────────────────────────
-
-export const openCreateApiKeyDialog = (initialData?: Partial<APIKeyDetail>) => {
-  events.publish({
-    type: PAYMENTS_DIALOG_EVENTS.OPEN_CREATE_APIKEY_DIALOG,
-    payload: { initialKeyData: initialData },
-  });
-};
-
-export const openEditApiKeyDialog = (keyId: string, keyData?: APIKeyDetail) => {
-  events.publish({
-    type: PAYMENTS_DIALOG_EVENTS.OPEN_EDIT_APIKEY_DIALOG,
-    payload: { keyId, keyData },
-  });
-};
-
-export const openDeleteApiKeyDialog = (keyId: string, keyData?: APIKeyDetail) => {
-  events.publish({
-    type: PAYMENTS_DIALOG_EVENTS.OPEN_DELETE_APIKEY_DIALOG,
-    payload: { keyId, keyData },
-  });
-};
+export type PaymentEvent =
+  | { type: 'OPEN_CREATE_PAYMENT' }
+  | { type: 'OPEN_PAYMENT_DETAILS'; id: string }
+  | { type: 'CLOSE_DIALOG' };
 
 // ─────────────────────────────────────────────────────────────────────────
-// Payments Events
+// Helper Functions
 // ─────────────────────────────────────────────────────────────────────────
 
-export const openCreatePaymentDialog = (initialData?: Partial<Payment>) => {
-  events.publish({
-    type: PAYMENTS_DIALOG_EVENTS.OPEN_CREATE_PAYMENT_DIALOG,
-    payload: { initialPaymentData: initialData },
-  });
-};
-
-export const openPaymentDetailsDialog = (paymentId: string, paymentData?: Payment) => {
-  events.publish({
-    type: PAYMENTS_DIALOG_EVENTS.OPEN_PAYMENT_DETAILS_DIALOG,
-    payload: { paymentId, paymentData },
-  });
+export const openCreatePaymentDialog = () => {
+  window.dispatchEvent(new Event(PAYMENT_EVENTS.OPEN_CREATE_PAYMENT_DIALOG));
 };
 
-export const openCancelPaymentDialog = (paymentId: string, paymentData?: Payment) => {
-  events.publish({
-    type: PAYMENTS_DIALOG_EVENTS.OPEN_CANCEL_PAYMENT_DIALOG,
-    payload: { paymentId, paymentData },
-  });
+export const openPaymentDetailsDialog = (id: string) => {
+  window.dispatchEvent(
+    new CustomEvent(PAYMENT_EVENTS.OPEN_PAYMENT_DETAILS_DIALOG, {
+      detail: { id },
+    })
+  );
 };
 
-// ─────────────────────────────────────────────────────────────────────────
-// Close Events
-// ─────────────────────────────────────────────────────────────────────────
-
 export const closePaymentsDialog = () => {
-  events.publish({
-    type: PAYMENTS_DIALOG_EVENTS.CLOSE_PAYMENTS_DIALOG,
-  });
+  window.dispatchEvent(new Event(PAYMENT_EVENTS.CLOSE_DIALOG));
 };
-

package/src/layouts/PaymentsLayout/index.ts

@@ -1,20 +1,16 @@
 /**
- * Payments Layout
- * Export main layout and types
+ * Payments Layout (v2.0 - Simplified)
+ *
+ * Exports:
+ * - PaymentsLayout: Main layout component
+ * - PaymentTab: Tab type definition
+ * - Payment events: openCreatePaymentDialog, openPaymentDetailsDialog, closePaymentsDialog
  */
 
 export { PaymentsLayout } from './PaymentsLayout';
-export type { PaymentsLayoutProps } from './PaymentsLayout';
 export type { PaymentTab } from './types';
-
-// Re-export events for convenience
 export {
-  openCreateApiKeyDialog,
-  openEditApiKeyDialog,
-  openDeleteApiKeyDialog,
   openCreatePaymentDialog,
   openPaymentDetailsDialog,
-  openCancelPaymentDialog,
-  closePaymentsDialog,
+  closePaymentsDialog
 } from './events';
-

package/src/layouts/PaymentsLayout/types.ts

@@ -1,19 +1,6 @@
 /**
- * Payments Layout Types
+ * Payments Layout Types (v2.0 - Simplified)
  */
 
-// Tab types for navigation
-export type PaymentTab = 'overview' | 'payments' | 'transactions' | 'apikeys' | 'tariffs';
-
-// Re-export API types for convenience
-export type {
-  Payment,
-  UserBalance,
-  Currency,
-  APIKeyDetail,
-  PaginatedPaymentListList,
-  PaginatedUserBalanceList,
-  PaginatedCurrencyListList,
-  PaginatedAPIKeyListList,
-} from '@djangocfg/api/cfg/contexts';
-
+// Tab types for navigation (removed apikeys and tariffs)
+export type PaymentTab = 'overview' | 'payments' | 'transactions';

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

@@ -1,5 +1,5 @@
 /**
- * Balance Card Component
+ * Balance Card Component (v2.0 - Simplified)
  * Display user balance with quick actions
  */
 
@@ -21,9 +21,9 @@ import { openCreatePaymentDialog } from '../../../events';
 
 export const BalanceCard: React.FC = () => {
   const {
-    balanceSummary,
-    isLoadingSummary,
-    refreshSummary
+    balance,
+    isLoadingBalance,
+    refreshBalance
   } = useOverviewContext();
 
   const formatCurrency = (amount?: number | null) => {
@@ -35,7 +35,20 @@ export const BalanceCard: React.FC = () => {
     }).format(amount);
   };
 
-  if (isLoadingSummary) {
+  const formatDate = (dateStr?: string) => {
+    if (!dateStr) return 'No transactions yet';
+    try {
+      return new Date(dateStr).toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+      });
+    } catch {
+      return 'Invalid date';
+    }
+  };
+
+  if (isLoadingBalance) {
     return (
       <Card>
         <CardHeader>
@@ -55,6 +68,14 @@ export const BalanceCard: React.FC = () => {
     );
   }
 
+  // Extract balance data from response: { success, balance: { amount_usd, total_deposited, total_withdrawn, last_transaction_at } }
+  const balanceData = balance?.balance || balance;
+  const amountUsd = balanceData?.amount_usd ?? 0;
+  const totalDeposited = balanceData?.total_deposited ?? 0;
+  const totalWithdrawn = balanceData?.total_withdrawn ?? 0;
+  const lastTransactionAt = balanceData?.last_transaction_at;
+  const isEmpty = amountUsd === 0 && totalDeposited === 0;
+
   return (
     <Card>
       <CardHeader>
@@ -64,7 +85,7 @@ export const BalanceCard: React.FC = () => {
             Account Balance
           </div>
           <div className="flex items-center gap-2">
-            <Button variant="ghost" size="sm" onClick={refreshSummary}>
+            <Button variant="ghost" size="sm" onClick={refreshBalance}>
               <RefreshCw className="h-4 w-4" />
             </Button>
             <Button size="sm" onClick={() => openCreatePaymentDialog()}>
@@ -77,23 +98,31 @@ export const BalanceCard: React.FC = () => {
       <CardContent className="space-y-4">
         <div>
           <div className="text-4xl font-bold">
-            {balanceSummary ? formatCurrency(balanceSummary.balance_usd) : '$0.00'}
+            {formatCurrency(amountUsd)}
           </div>
           <p className="text-sm text-muted-foreground mt-1">
-            {balanceSummary?.balance_display || 'No balance available'}
+            Available balance • Last updated {formatDate(lastTransactionAt)}
           </p>
         </div>
 
-        {balanceSummary && (
-          <div className="flex items-center gap-2">
-            <Badge variant={balanceSummary.has_transactions ? 'default' : 'secondary'}>
-              {balanceSummary.has_transactions ? 'Active' : 'New Account'}
-            </Badge>
-            {balanceSummary.is_empty && <Badge variant="outline">Empty Balance</Badge>}
+        <div className="grid grid-cols-2 gap-4 pt-4 border-t">
+          <div>
+            <p className="text-xs text-muted-foreground">Total Deposited</p>
+            <p className="text-lg font-semibold text-green-600">{formatCurrency(totalDeposited)}</p>
+          </div>
+          <div>
+            <p className="text-xs text-muted-foreground">Total Withdrawn</p>
+            <p className="text-lg font-semibold text-red-600">{formatCurrency(totalWithdrawn)}</p>
           </div>
-        )}
+        </div>
+
+        <div className="flex items-center gap-2">
+          <Badge variant={!isEmpty ? 'default' : 'secondary'}>
+            {!isEmpty ? 'Active' : 'New Account'}
+          </Badge>
+          {isEmpty && <Badge variant="outline">Empty Balance</Badge>}
+        </div>
       </CardContent>
     </Card>
   );
 };
-

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

@@ -1,6 +1,6 @@
 /**
- * Recent Payments Component
- * Display recent payment transactions
+ * Recent Payments Component (v2.0 - Simplified)
+ * Display recent payment transactions from payments list
  */
 
 'use client';
@@ -20,15 +20,16 @@ import { useOverviewContext } from '@djangocfg/api/cfg/contexts';
 import { openPaymentDetailsDialog } from '../../../events';
 
 export const RecentPayments: React.FC = () => {
-  const { recentPayments, isLoadingOverview } = useOverviewContext();
+  const { payments, isLoadingPayments } = useOverviewContext();
 
-  const formatCurrency = (amount?: number | null) => {
+  const formatCurrency = (amount?: number | string | null) => {
     if (amount === null || amount === undefined) return '$0.00';
+    const numAmount = typeof amount === 'string' ? parseFloat(amount) : amount;
     return new Intl.NumberFormat('en-US', {
       style: 'currency',
       currency: 'USD',
       minimumFractionDigits: 2,
-    }).format(amount);
+    }).format(numAmount);
   };
 
   const getRelativeTime = (date: string | null | undefined): string => {
@@ -52,16 +53,18 @@ export const RecentPayments: React.FC = () => {
       case 'success':
         return 'default';
       case 'pending':
+      case 'confirming':
         return 'secondary';
       case 'failed':
       case 'error':
+      case 'expired':
         return 'destructive';
       default:
         return 'outline';
     }
   };
 
-  if (isLoadingOverview) {
+  if (isLoadingPayments) {
     return (
       <Card>
         <CardHeader>
@@ -72,7 +75,7 @@ export const RecentPayments: React.FC = () => {
         </CardHeader>
         <CardContent className="space-y-3">
           {Array.from({ length: 5 }).map((_, i) => (
-            <div key={i} className="flex items-center justify-between p-3 border rounded-lg">
+            <div key={i} className="flex items-center justify-between p-3 border rounded-sm">
               <div className="space-y-2">
                 <Skeleton className="h-4 w-32" />
                 <Skeleton className="h-3 w-24" />
@@ -85,7 +88,8 @@ export const RecentPayments: React.FC = () => {
     );
   }
 
-  const payments = recentPayments?.results || [];
+  // Get first 5 payments for recent list
+  const recentPaymentsList = payments?.results?.slice(0, 5) || [];
 
   return (
     <Card>
@@ -102,18 +106,19 @@ export const RecentPayments: React.FC = () => {
         </CardTitle>
       </CardHeader>
       <CardContent>
-        {payments.length === 0 ? (
+        {recentPaymentsList.length === 0 ? (
           <div className="text-center py-8 text-muted-foreground">
             <History className="h-12 w-12 mx-auto mb-4 opacity-50" />
             <p>No recent payments</p>
+            <p className="text-sm mt-2">Create your first payment to get started</p>
           </div>
         ) : (
           <div className="space-y-3">
-            {payments.map((payment) => (
+            {recentPaymentsList.map((payment) => (
               <div
                 key={payment.id}
-                className="flex items-center justify-between p-3 border rounded-lg hover:bg-accent cursor-pointer transition-colors"
-                onClick={() => openPaymentDetailsDialog(payment.id)}
+                className="flex items-center justify-between p-3 border rounded-sm hover:bg-accent cursor-pointer transition-colors"
+                onClick={() => openPaymentDetailsDialog(String(payment.id))}
               >
                 <div className="flex-1">
                   <div className="flex items-center gap-2">
@@ -123,7 +128,7 @@ export const RecentPayments: React.FC = () => {
                     </Badge>
                   </div>
                   <p className="text-sm text-muted-foreground">
-                    {getRelativeTime(payment.created_at)} • {payment.provider || 'Unknown provider'}
+                    {getRelativeTime(payment.created_at)} • {payment.currency_code || 'USD'}
                   </p>
                 </div>
                 <ExternalLink className="h-4 w-4 text-muted-foreground" />
@@ -135,4 +140,3 @@ export const RecentPayments: React.FC = () => {
     </Card>
   );
 };
-

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

@@ -1,4 +1,2 @@
-export { MetricsCards } from './MetricsCards';
 export { BalanceCard } from './BalanceCard';
 export { RecentPayments } from './RecentPayments';
-