@djangocfg/layouts 1.0.4 → 1.0.5

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

@@ -1,5 +1,5 @@
 /**
- * Payments List Component
+ * Payments List Component (v2.0 - Simplified)
  * Display paginated list of payments with filters
  */
 
@@ -29,8 +29,7 @@ import {
 } from '@djangocfg/ui';
 import { Plus, Search, Filter, ChevronLeft, ChevronRight, RefreshCw, ExternalLink } from 'lucide-react';
 import { usePaymentsContext } from '@djangocfg/api/cfg/contexts';
-import { openCreatePaymentDialog } from '../../../events';
-import { openPaymentDetails } from '../../../components/PaymentDetailsDialog';
+import { openCreatePaymentDialog, openPaymentDetailsDialog } from '../../../events';
 
 export const PaymentsList: React.FC = () => {
   const {
@@ -38,22 +37,23 @@ export const PaymentsList: React.FC = () => {
     isLoadingPayments,
     refreshPayments,
   } = usePaymentsContext();
-  
+
   const paymentsList = payments?.results || [];
-  const paymentsPage = payments?.page || 1;
-  const paymentsPageSize = payments?.page_size || 20;
-  const paymentsTotalCount = payments?.count || 0;
+  const currentPage = payments?.page || 1;
+  const pageSize = payments?.page_size || 20;
+  const totalCount = payments?.count || 0;
 
   const [searchTerm, setSearchTerm] = useState('');
   const [statusFilter, setStatusFilter] = useState<string>('all');
 
-  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 => {
@@ -77,9 +77,11 @@ export const PaymentsList: React.FC = () => {
       case 'success':
         return 'default';
       case 'pending':
+      case 'confirming':
         return 'secondary';
       case 'failed':
       case 'error':
+      case 'expired':
         return 'destructive';
       default:
         return 'outline';
@@ -88,13 +90,13 @@ export const PaymentsList: React.FC = () => {
 
   const handleSearch = async (value: string) => {
     setSearchTerm(value);
-    // TODO: Implement search/filter in PaymentsContext
+    // TODO: Implement search/filter in PaymentsContext when API supports it
     await refreshPayments();
   };
 
   const handleStatusFilter = async (status: string) => {
     setStatusFilter(status);
-    // TODO: Implement search/filter in PaymentsContext
+    // TODO: Implement status filter in PaymentsContext when API supports it
     await refreshPayments();
   };
 
@@ -103,9 +105,24 @@ export const PaymentsList: React.FC = () => {
     await refreshPayments();
   };
 
-  const totalPages = Math.ceil((paymentsTotalCount || 0) / (paymentsPageSize || 20));
-  const showingFrom = ((paymentsPage || 1) - 1) * (paymentsPageSize || 20) + 1;
-  const showingTo = Math.min((paymentsPage || 1) * (paymentsPageSize || 20), paymentsTotalCount || 0);
+  // Filter payments client-side for now (until API supports filtering)
+  const filteredPayments = paymentsList.filter((payment) => {
+    const matchesSearch = searchTerm
+      ? payment.id?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        payment.status?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        payment.currency_code?.toLowerCase().includes(searchTerm.toLowerCase())
+      : true;
+
+    const matchesStatus = statusFilter !== 'all'
+      ? payment.status?.toLowerCase() === statusFilter.toLowerCase()
+      : true;
+
+    return matchesSearch && matchesStatus;
+  });
+
+  const totalPages = Math.ceil((totalCount || 0) / (pageSize || 20));
+  const showingFrom = ((currentPage || 1) - 1) * (pageSize || 20) + 1;
+  const showingTo = Math.min((currentPage || 1) * (pageSize || 20), totalCount || 0);
 
   return (
     <Card>
@@ -131,7 +148,7 @@ export const PaymentsList: React.FC = () => {
           <div className="relative flex-1">
             <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
             <Input
-              placeholder="Search payments..."
+              placeholder="Search by ID, status, or currency..."
               value={searchTerm}
               onChange={(e) => handleSearch(e.target.value)}
               className="pl-10"
@@ -147,7 +164,9 @@ export const PaymentsList: React.FC = () => {
               <SelectItem value="all">All Statuses</SelectItem>
               <SelectItem value="completed">Completed</SelectItem>
               <SelectItem value="pending">Pending</SelectItem>
+              <SelectItem value="confirming">Confirming</SelectItem>
               <SelectItem value="failed">Failed</SelectItem>
+              <SelectItem value="expired">Expired</SelectItem>
             </SelectContent>
           </Select>
         </div>
@@ -165,7 +184,7 @@ export const PaymentsList: React.FC = () => {
               </div>
             ))}
           </div>
-        ) : !paymentsList || paymentsList.length === 0 ? (
+        ) : filteredPayments.length === 0 ? (
           <div className="text-center py-12">
             <div className="w-16 h-16 mx-auto mb-4 bg-muted rounded-full flex items-center justify-center">
               <Search className="w-8 h-8 text-muted-foreground" />
@@ -192,16 +211,16 @@ export const PaymentsList: React.FC = () => {
                     <TableHead>Currency</TableHead>
                     <TableHead>Status</TableHead>
                     <TableHead>Provider</TableHead>
-                    <TableHead>ID</TableHead>
+                    <TableHead>Payment ID</TableHead>
                     <TableHead className="text-right">Actions</TableHead>
                   </TableRow>
                 </TableHeader>
                 <TableBody>
-                  {paymentsList.map((payment) => (
+                  {filteredPayments.map((payment) => (
                     <TableRow
                       key={payment.id}
                       className="cursor-pointer hover:bg-accent"
-                      onClick={() => openPaymentDetails(payment.id)}
+                      onClick={() => openPaymentDetailsDialog(String(payment.id))}
                     >
                       <TableCell>
                         <div>
@@ -219,14 +238,16 @@ export const PaymentsList: React.FC = () => {
                         {formatCurrency(payment.amount_usd)}
                       </TableCell>
                       <TableCell>
-                        <Badge variant="outline">Currency #{payment.currency}</Badge>
+                        <Badge variant="outline">{payment.currency_code || 'USD'}</Badge>
                       </TableCell>
                       <TableCell>
                         <Badge variant={getStatusVariant(payment.status)}>{payment.status}</Badge>
                       </TableCell>
-                      <TableCell>{payment.provider || 'N/A'}</TableCell>
+                      <TableCell className="text-sm text-muted-foreground">
+                        NowPayments
+                      </TableCell>
                       <TableCell className="font-mono text-sm text-muted-foreground">
-                        {payment.id.slice(0, 8)}...
+                        {payment.id ? `${payment.id.toString().slice(0, 8)}...` : 'N/A'}
                       </TableCell>
                       <TableCell className="text-right">
                         <Button
@@ -234,7 +255,7 @@ export const PaymentsList: React.FC = () => {
                           size="sm"
                           onClick={(e) => {
                             e.stopPropagation();
-                            openPaymentDetails(payment.id);
+                            openPaymentDetailsDialog(String(payment.id));
                           }}
                         >
                           <ExternalLink className="h-4 w-4" />
@@ -250,28 +271,28 @@ export const PaymentsList: React.FC = () => {
             {totalPages > 1 && (
               <div className="flex items-center justify-between">
                 <div className="text-sm text-muted-foreground">
-                  Showing {showingFrom} to {showingTo} of {paymentsTotalCount} payments
+                  Showing {showingFrom} to {showingTo} of {totalCount} payments
                 </div>
 
                 <div className="flex items-center gap-2">
                   <Button
                     variant="outline"
                     size="sm"
-                    onClick={() => handlePageChange((paymentsPage || 1) - 1)}
-                    disabled={!paymentsPage || paymentsPage <= 1}
+                    onClick={() => handlePageChange((currentPage || 1) - 1)}
+                    disabled={!currentPage || currentPage <= 1}
                   >
                     <ChevronLeft className="h-4 w-4" />
                   </Button>
 
                   <span className="text-sm">
-                    Page {paymentsPage || 1} of {totalPages}
+                    Page {currentPage || 1} of {totalPages}
                   </span>
 
                   <Button
                     variant="outline"
                     size="sm"
-                    onClick={() => handlePageChange((paymentsPage || 1) + 1)}
-                    disabled={!paymentsPage || paymentsPage >= totalPages}
+                    onClick={() => handlePageChange((currentPage || 1) + 1)}
+                    disabled={!currentPage || currentPage >= totalPages}
                   >
                     <ChevronRight className="h-4 w-4" />
                   </Button>
@@ -284,4 +305,3 @@ export const PaymentsList: React.FC = () => {
     </Card>
   );
 };
-

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

@@ -1,2 +1 @@
 export { PaymentsList } from './PaymentsList';
-

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

@@ -1,5 +1,5 @@
 /**
- * Payments View
+ * Payments View (v2.0 - Simplified)
  * List and manage payment transactions
  */
 
@@ -15,4 +15,3 @@ export const PaymentsView: React.FC = () => {
     </div>
   );
 };
-

package/src/layouts/PaymentsLayout/views/transactions/components/TransactionsList.tsx

@@ -0,0 +1,273 @@
+/**
+ * Transactions List Component (v2.0 - Simplified)
+ * Display transaction history with balance changes
+ */
+
+'use client';
+
+import React, { useState } from 'react';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Button,
+  Badge,
+  Input,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Skeleton,
+} from '@djangocfg/ui';
+import { History, Search, Filter, RefreshCw, ArrowUpRight, ArrowDownLeft } from 'lucide-react';
+import { useOverviewContext } from '@djangocfg/api/cfg/contexts';
+
+export const TransactionsList: React.FC = () => {
+  const {
+    transactions,
+    isLoadingTransactions,
+    refreshTransactions,
+  } = useOverviewContext();
+
+  const [searchTerm, setSearchTerm] = useState('');
+  const [typeFilter, setTypeFilter] = useState<string>('all');
+
+  // Extract transactions array from response (handle different possible structures)
+  const transactionsList = transactions?.results || transactions?.transactions || [];
+
+  const formatCurrency = (amount?: number | null) => {
+    if (amount === null || amount === undefined) return '$0.00';
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD',
+      minimumFractionDigits: 2,
+    }).format(amount);
+  };
+
+  const formatDate = (date: string | null | undefined): string => {
+    if (!date) return 'N/A';
+    try {
+      return new Date(date).toLocaleString('en-US', {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+      });
+    } catch {
+      return 'Invalid date';
+    }
+  };
+
+  const getRelativeTime = (date: string | null | undefined): string => {
+    if (!date) return 'N/A';
+
+    const now = new Date();
+    const target = new Date(date);
+    const diffInSeconds = Math.floor((now.getTime() - target.getTime()) / 1000);
+
+    if (diffInSeconds < 60) return 'Just now';
+    if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}m ago`;
+    if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)}h ago`;
+    return `${Math.floor(diffInSeconds / 86400)}d ago`;
+  };
+
+  const getTypeVariant = (
+    type: string | null | undefined
+  ): 'default' | 'destructive' | 'outline' | 'secondary' => {
+    switch (type?.toLowerCase()) {
+      case 'deposit':
+      case 'credit':
+        return 'default';
+      case 'withdrawal':
+      case 'debit':
+        return 'destructive';
+      default:
+        return 'outline';
+    }
+  };
+
+  const getTypeIcon = (type: string | null | undefined) => {
+    const isDeposit = type?.toLowerCase() === 'deposit' || type?.toLowerCase() === 'credit';
+    return isDeposit ? (
+      <ArrowDownLeft className="h-4 w-4 text-green-600" />
+    ) : (
+      <ArrowUpRight className="h-4 w-4 text-red-600" />
+    );
+  };
+
+  const handleSearch = async (value: string) => {
+    setSearchTerm(value);
+    await refreshTransactions();
+  };
+
+  const handleTypeFilter = async (type: string) => {
+    setTypeFilter(type);
+    await refreshTransactions();
+  };
+
+  // Filter transactions client-side
+  const filteredTransactions = transactionsList.filter((transaction: any) => {
+    const matchesSearch = searchTerm
+      ? transaction.id?.toString().toLowerCase().includes(searchTerm.toLowerCase()) ||
+        transaction.description?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        transaction.type?.toLowerCase().includes(searchTerm.toLowerCase())
+      : true;
+
+    const matchesType = typeFilter !== 'all'
+      ? transaction.type?.toLowerCase() === typeFilter.toLowerCase()
+      : true;
+
+    return matchesSearch && matchesType;
+  });
+
+  if (isLoadingTransactions) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <History className="h-5 w-5" />
+            Transaction History
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          {Array.from({ length: 5 }).map((_, i) => (
+            <div key={i} className="flex items-center justify-between p-4 border rounded-sm">
+              <div className="space-y-2">
+                <Skeleton className="h-4 w-32" />
+                <Skeleton className="h-3 w-24" />
+              </div>
+              <Skeleton className="h-6 w-16" />
+            </div>
+          ))}
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <History className="h-5 w-5" />
+            Transaction History
+          </div>
+          <Button variant="outline" size="sm" onClick={refreshTransactions} disabled={isLoadingTransactions}>
+            <RefreshCw className={`h-4 w-4 mr-2 ${isLoadingTransactions ? 'animate-spin' : ''}`} />
+            Refresh
+          </Button>
+        </CardTitle>
+      </CardHeader>
+
+      <CardContent className="space-y-4">
+        {/* Filters */}
+        <div className="flex flex-col sm:flex-row gap-4">
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <Input
+              placeholder="Search by ID, description, or type..."
+              value={searchTerm}
+              onChange={(e) => handleSearch(e.target.value)}
+              className="pl-10"
+            />
+          </div>
+
+          <Select value={typeFilter} onValueChange={handleTypeFilter}>
+            <SelectTrigger className="w-full sm:w-48">
+              <Filter className="h-4 w-4 mr-2" />
+              <SelectValue placeholder="Filter by type" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All Types</SelectItem>
+              <SelectItem value="deposit">Deposits</SelectItem>
+              <SelectItem value="withdrawal">Withdrawals</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        {/* Transactions Table */}
+        {filteredTransactions.length === 0 ? (
+          <div className="text-center py-12">
+            <div className="w-16 h-16 mx-auto mb-4 bg-muted rounded-full flex items-center justify-center">
+              <History className="w-8 h-8 text-muted-foreground" />
+            </div>
+            <h3 className="text-lg font-semibold mb-2">No Transactions Found</h3>
+            <p className="text-muted-foreground">
+              {searchTerm || typeFilter !== 'all'
+                ? 'No transactions match your current filters'
+                : "You don't have any transactions yet"}
+            </p>
+          </div>
+        ) : (
+          <div className="rounded-md border">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Date & Time</TableHead>
+                  <TableHead>Type</TableHead>
+                  <TableHead>Amount</TableHead>
+                  <TableHead>Balance After</TableHead>
+                  <TableHead>Description</TableHead>
+                  <TableHead>Reference</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {filteredTransactions.map((transaction: any, index: number) => {
+                  const isDeposit = transaction.type?.toLowerCase() === 'deposit' || transaction.type?.toLowerCase() === 'credit';
+                  return (
+                    <TableRow key={transaction.id || index}>
+                      <TableCell>
+                        <div>
+                          <div className="font-medium">
+                            {formatDate(transaction.created_at || transaction.timestamp)}
+                          </div>
+                          <div className="text-sm text-muted-foreground">
+                            {getRelativeTime(transaction.created_at || transaction.timestamp)}
+                          </div>
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <div className="flex items-center gap-2">
+                          {getTypeIcon(transaction.type)}
+                          <Badge variant={getTypeVariant(transaction.type)}>
+                            {transaction.type || 'Unknown'}
+                          </Badge>
+                        </div>
+                      </TableCell>
+                      <TableCell className="font-mono font-semibold">
+                        <span className={isDeposit ? 'text-green-600' : 'text-red-600'}>
+                          {isDeposit ? '+' : '-'}
+                          {formatCurrency(Math.abs(transaction.amount || transaction.amount_usd || 0))}
+                        </span>
+                      </TableCell>
+                      <TableCell className="font-mono">
+                        {formatCurrency(transaction.balance_after || 0)}
+                      </TableCell>
+                      <TableCell className="text-sm">
+                        {transaction.description || transaction.note || 'No description'}
+                      </TableCell>
+                      <TableCell className="font-mono text-sm text-muted-foreground">
+                        {transaction.reference || transaction.payment_id
+                          ? `${(transaction.reference || transaction.payment_id).toString().slice(0, 8)}...`
+                          : 'N/A'}
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+};

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

@@ -0,0 +1 @@
+export { TransactionsList } from './TransactionsList';

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

@@ -1,29 +1,17 @@
 /**
- * Transactions View
+ * Transactions View (v2.0 - Simplified)
  * View transaction history and balance changes
  */
 
 'use client';
 
 import React from 'react';
-import { Card, CardContent } from '@djangocfg/ui';
-import { History } from 'lucide-react';
+import { TransactionsList } from './components';
 
 export const TransactionsView: React.FC = () => {
   return (
-    <Card>
-      <CardContent className="py-12">
-        <div className="text-center">
-          <div className="w-16 h-16 mx-auto mb-4 bg-muted rounded-full flex items-center justify-center">
-            <History className="w-8 h-8 text-muted-foreground" />
-          </div>
-          <h3 className="text-lg font-semibold mb-2">Transactions Coming Soon</h3>
-          <p className="text-muted-foreground">
-            Transaction history and balance changes will be available here
-          </p>
-        </div>
-      </CardContent>
-    </Card>
+    <div className="space-y-6">
+      <TransactionsList />
+    </div>
   );
 };
-

package/src/layouts/PaymentsLayout/README.md

@@ -1,133 +0,0 @@
-# Payments Layout
-
-Modern payments layout with tabbed interface for managing payments, balances, API keys, and subscriptions.
-
-## Structure
-
-```
-PaymentsLayout/
-├── PaymentsLayout.tsx       # Main layout with tabs and providers
-├── events.ts                # Event-based dialog communication
-├── types.ts                 # TypeScript types
-├── index.ts                 # Public exports
-└── views/                   # Tab views
-    ├── overview/            # Dashboard with metrics and balance
-    │   ├── components/
-    │   │   ├── MetricsCards.tsx
-    │   │   ├── BalanceCard.tsx
-    │   │   ├── RecentPayments.tsx
-    │   │   └── index.ts
-    │   └── index.tsx
-    ├── payments/            # Payment transactions list
-    │   ├── components/
-    │   │   ├── PaymentsList.tsx
-    │   │   └── index.ts
-    │   └── index.tsx
-    ├── transactions/        # Transaction history (placeholder)
-    │   └── index.tsx
-    ├── apikeys/            # API keys management
-    │   ├── components/
-    │   │   ├── ApiKeysList.tsx
-    │   │   ├── ApiKeyMetrics.tsx
-    │   │   └── index.ts
-    │   └── index.tsx
-    └── tariffs/            # Tariff plans (placeholder)
-        └── index.tsx
-```
-
-## Usage
-
-```tsx
-import { PaymentsLayout } from '@djangocfg/layouts';
-
-function PaymentsPage() {
-  return <PaymentsLayout />;
-}
-```
-
-## Features
-
-### Tabs
-- **Overview** - Dashboard with key metrics, balance card, and recent payments
-- **Payments** - Full payment history with search and filters
-- **Transactions** - Balance transaction history (coming soon)
-- **API Keys** - Create, manage, and monitor API keys
-- **Tariffs** - Subscription plans and pricing (coming soon)
-
-### Contexts
-The layout automatically provides all necessary contexts:
-- `OverviewProvider` - Dashboard metrics and overview data
-- `PaymentsProvider` - Payment CRUD operations
-- `BalancesProvider` - User balance management
-- `ApiKeysProvider` - API key management
-
-### Event System
-Uses event-based communication for dialogs:
-- `openCreateApiKeyDialog()` - Open create API key dialog
-- `openEditApiKeyDialog(id)` - Open edit API key dialog
-- `openDeleteApiKeyDialog(id)` - Open delete confirmation dialog
-- `openCreatePaymentDialog()` - Open create payment dialog
-- `openPaymentDetailsDialog(id)` - Open payment details dialog
-- `openCancelPaymentDialog(id)` - Open cancel payment dialog
-- `closePaymentsDialog()` - Close any active dialog
-
-## Components
-
-### Overview View
-- **MetricsCards** - Display key metrics (balance, payments, API keys)
-- **BalanceCard** - Show current balance with quick actions
-- **RecentPayments** - List of recent payment transactions
-
-### Payments View
-- **PaymentsList** - Paginated payment list with filters and search
-
-### API Keys View
-- **ApiKeyMetrics** - API key usage statistics
-- **ApiKeysList** - List of API keys with management actions
-
-## Responsive Design
-- Mobile-first responsive layout
-- Adaptive tabs (icons only on mobile, text on desktop)
-- Responsive grid layouts for cards and metrics
-
-## Architecture
-
-### Decomposed Contexts
-Uses specialized contexts from `@djangocfg/api/cfg/contexts`:
-- `PaymentsContext` - Payment operations
-- `BalancesContext` - Balance queries
-- `ApiKeysContext` - API key CRUD
-- `OverviewContext` - Dashboard data
-
-### View-based Structure
-Each tab is a separate view with:
-- Dedicated components folder
-- Dedicated hooks folder (for future custom hooks)
-- Clean separation of concerns
-
-### Event-driven Dialogs
-Dialogs are controlled via events, not props:
-- Loose coupling between components
-- Easy to trigger from anywhere
-- Centralized dialog management
-
-## Migration from Old Layout
-
-The old `PaymentsLayout_old` has been replaced with this new structure. Key improvements:
-
-1. **Better Organization** - Views are logically separated
-2. **Decomposed Contexts** - Each context has single responsibility
-3. **Event System** - Better dialog management
-4. **Scalability** - Easy to add new tabs and features
-5. **Type Safety** - Full TypeScript support
-
-## Future Enhancements
-
-- [ ] Complete Transactions view with filtering
-- [ ] Complete Tariffs view with plan comparison
-- [ ] Add payment creation dialogs
-- [ ] Add API key creation/edit dialogs
-- [ ] Add real-time payment status updates
-- [ ] Add charts and analytics
-- [ ] Add export functionality
-