@djangocfg/layouts 1.0.4 → 1.0.6

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
  */
 
@@ -19,11 +19,7 @@ import {
 import { Copy, ExternalLink, CheckCircle2, Clock, XCircle, AlertCircle, RefreshCw } from 'lucide-react';
 import { Hooks, api } from '@djangocfg/api';
 import type { API } from '@djangocfg/api';
-
-export const PAYMENT_DETAILS_EVENTS = {
-  OPEN_PAYMENT_DETAILS: 'open-payment-details',
-  CLOSE_PAYMENT_DETAILS: 'close-payment-details',
-} as const;
+import { PAYMENT_EVENTS } from '../events';
 
 export const PaymentDetailsDialog: React.FC = () => {
   const [open, setOpen] = useState(false);
@@ -32,25 +28,17 @@ export const PaymentDetailsDialog: React.FC = () => {
   const [timeLeft, setTimeLeft] = useState<string>('');
 
   // Load payment data by ID using hook
-  // Only fetch when dialog is open and paymentId is set
   const shouldFetch = open && !!paymentId;
-  const { data: payment, isLoading, error, mutate } = Hooks.usePaymentsPaymentRetrieve(
+  const { data: payment, isLoading, error, mutate } = Hooks.usePaymentsPaymentsRetrieve(
     shouldFetch ? paymentId : '',
     api as unknown as API
   );
 
-  // Debug logging
-  useEffect(() => {
-    if (error) {
-      console.error('Payment loading error:', error);
-    }
-  }, [error]);
-
+  // Listen for open/close events
   useEffect(() => {
     const handleOpen = (event: Event) => {
-      const customEvent = event as CustomEvent<{ paymentId: string }>;
-      console.log('Opening payment details for ID:', customEvent.detail.paymentId);
-      setPaymentId(customEvent.detail.paymentId);
+      const customEvent = event as CustomEvent<{ id: string }>;
+      setPaymentId(customEvent.detail.id);
       setOpen(true);
     };
 
@@ -59,17 +47,18 @@ export const PaymentDetailsDialog: React.FC = () => {
       setPaymentId(null);
     };
 
-    window.addEventListener(PAYMENT_DETAILS_EVENTS.OPEN_PAYMENT_DETAILS, handleOpen);
-    window.addEventListener(PAYMENT_DETAILS_EVENTS.CLOSE_PAYMENT_DETAILS, handleClose);
+    window.addEventListener(PAYMENT_EVENTS.OPEN_PAYMENT_DETAILS_DIALOG, handleOpen);
+    window.addEventListener(PAYMENT_EVENTS.CLOSE_DIALOG, handleClose);
 
     return () => {
-      window.removeEventListener(PAYMENT_DETAILS_EVENTS.OPEN_PAYMENT_DETAILS, handleOpen);
-      window.removeEventListener(PAYMENT_DETAILS_EVENTS.CLOSE_PAYMENT_DETAILS, handleClose);
+      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 () => {
@@ -109,15 +98,19 @@ export const PaymentDetailsDialog: React.FC = () => {
 
   // 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' };
     }
@@ -142,7 +135,7 @@ export const PaymentDetailsDialog: React.FC = () => {
     );
   }
 
-  // Error state - only show error if we actually tried to fetch and failed
+  // Error state
   if (shouldFetch && !isLoading && (error || !payment)) {
     return (
       <Dialog open={open} onOpenChange={(isOpen) => !isOpen && handleClose()}>
@@ -166,7 +159,7 @@ export const PaymentDetailsDialog: React.FC = () => {
   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;
@@ -200,29 +193,31 @@ export const PaymentDetailsDialog: React.FC = () => {
             <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={String(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.provider_payment_id && (
+            {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.provider_payment_id}</span>
+                <span className="font-mono font-medium">{payment.internal_payment_id}</span>
               </div>
             )}
 
-            {payment.network && (
+            {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>
@@ -303,21 +298,12 @@ export const PaymentDetailsDialog: React.FC = () => {
           <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 = (paymentId: string) => {
-  window.dispatchEvent(
-    new CustomEvent(PAYMENT_DETAILS_EVENTS.OPEN_PAYMENT_DETAILS, {
-      detail: { paymentId },
-    })
-  );
-};
-
-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>
@@ -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-sm hover:bg-accent cursor-pointer transition-colors"
-                onClick={() => openPaymentDetailsDialog(payment.id)}
+                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';
-

package/src/layouts/PaymentsLayout/views/overview/index.tsx

@@ -1,18 +1,16 @@
 /**
- * Overview View
- * Dashboard with metrics, balance, and recent activity
+ * Overview View (v2.0 - Simplified)
+ * Dashboard with balance and recent payments
  */
 
 'use client';
 
 import React from 'react';
-import { MetricsCards, BalanceCard, RecentPayments } from './components';
+import { BalanceCard, RecentPayments } from './components';
 
 export const OverviewView: React.FC = () => {
   return (
     <div className="space-y-6">
-      <MetricsCards />
-      
       <div className="grid gap-6 lg:grid-cols-2">
         <BalanceCard />
         <RecentPayments />
@@ -20,4 +18,3 @@ export const OverviewView: React.FC = () => {
     </div>
   );
 };
-