@djangocfg/layouts 2.1.10 → 2.1.15

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

@@ -1,128 +0,0 @@
-/**
- * Balance Card Component (v2.0 - Simplified)
- * Display user balance with quick actions
- */
-
-'use client';
-
-import React from 'react';
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  Button,
-  Badge,
-  Skeleton,
-} from '@djangocfg/ui-nextjs';
-import { Wallet, RefreshCw, Plus } from 'lucide-react';
-import { useOverviewContext } from '@djangocfg/layouts/contexts';
-import { openCreatePaymentDialog } from '../../../events';
-
-export const BalanceCard: React.FC = () => {
-  const {
-    balance,
-    isLoadingBalance,
-    refreshBalance
-  } = useOverviewContext();
-
-  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 = (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>
-          <CardTitle className="flex items-center justify-between">
-            <div className="flex items-center gap-2">
-              <Wallet className="h-5 w-5" />
-              Account Balance
-            </div>
-            <Skeleton className="h-8 w-20" />
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <Skeleton className="h-10 w-32" />
-          <Skeleton className="h-4 w-48" />
-        </CardContent>
-      </Card>
-    );
-  }
-
-  // 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>
-        <CardTitle className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <Wallet className="h-5 w-5" />
-            Account Balance
-          </div>
-          <div className="flex items-center gap-2">
-            <Button variant="ghost" size="sm" onClick={refreshBalance}>
-              <RefreshCw className="h-4 w-4" />
-            </Button>
-            <Button size="sm" onClick={() => openCreatePaymentDialog()}>
-              <Plus className="h-4 w-4 mr-2" />
-              Add Funds
-            </Button>
-          </div>
-        </CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        <div>
-          <div className="text-4xl font-bold">
-            {formatCurrency(amountUsd)}
-          </div>
-          <p className="text-sm text-muted-foreground mt-1">
-            Available balance • Last updated {formatDate(lastTransactionAt)}
-          </p>
-        </div>
-
-        <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,142 +0,0 @@
-/**
- * Recent Payments Component (v2.0 - Simplified)
- * Display recent payment transactions from payments list
- */
-
-'use client';
-
-import React from 'react';
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  Button,
-  Badge,
-  Skeleton,
-} from '@djangocfg/ui-nextjs';
-import { History, ExternalLink } from 'lucide-react';
-import { useOverviewContext } from '@djangocfg/layouts/contexts';
-import { openPaymentDetailsDialog } from '../../../events';
-
-export const RecentPayments: React.FC = () => {
-  const { payments, isLoadingPayments } = useOverviewContext();
-
-  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(numAmount);
-  };
-
-  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 getStatusVariant = (
-    status: string | null | undefined
-  ): 'default' | 'destructive' | 'outline' | 'secondary' => {
-    switch (status?.toLowerCase()) {
-      case 'completed':
-      case 'success':
-        return 'default';
-      case 'pending':
-      case 'confirming':
-        return 'secondary';
-      case 'failed':
-      case 'error':
-      case 'expired':
-        return 'destructive';
-      default:
-        return 'outline';
-    }
-  };
-
-  if (isLoadingPayments) {
-    return (
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <History className="h-5 w-5" />
-            Recent Payments
-          </CardTitle>
-        </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-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>
-    );
-  }
-
-  // Get first 5 payments for recent list
-  const recentPaymentsList = payments?.results?.slice(0, 5) || [];
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <History className="h-5 w-5" />
-            Recent Payments
-          </div>
-          <Button variant="ghost" size="sm">
-            View All
-            <ExternalLink className="h-4 w-4 ml-2" />
-          </Button>
-        </CardTitle>
-      </CardHeader>
-      <CardContent>
-        {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">
-            {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(String(payment.id))}
-              >
-                <div className="flex-1">
-                  <div className="flex items-center gap-2">
-                    <span className="font-medium">{formatCurrency(payment.amount_usd)}</span>
-                    <Badge variant={getStatusVariant(payment.status)} className="text-xs">
-                      {payment.status}
-                    </Badge>
-                  </div>
-                  <p className="text-sm text-muted-foreground">
-                    {getRelativeTime(payment.created_at)} • {payment.currency_code || 'USD'}
-                  </p>
-                </div>
-                <ExternalLink className="h-4 w-4 text-muted-foreground" />
-              </div>
-            ))}
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  );
-};

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

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

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

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

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

@@ -1,276 +0,0 @@
-/**
- * Payments List Component (v2.0 - Simplified)
- * Display paginated list of payments with filters
- */
-
-'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,
-  useDRFPagination,
-  StaticPagination,
-} from '@djangocfg/ui-nextjs';
-import { Plus, Search, Filter, RefreshCw, ExternalLink } from 'lucide-react';
-import { api, Hooks } from '@djangocfg/api';
-import { openCreatePaymentDialog, openPaymentDetailsDialog } from '../../../events';
-
-export const PaymentsList: React.FC = () => {
-  // Local pagination state
-  const pagination = useDRFPagination(1, 20);
-
-  // Fetch payments with pagination
-  const {
-    data: payments,
-    error,
-    isLoading: isLoadingPayments,
-    mutate: refreshPayments,
-  } = Hooks.usePaymentsPaymentsList(pagination.params, api as any);
-
-  const paymentsList = payments?.results || [];
-  const totalCount = payments?.count || 0;
-
-  const [searchTerm, setSearchTerm] = useState('');
-  const [statusFilter, setStatusFilter] = useState<string>('all');
-
-  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(numAmount);
-  };
-
-  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 getStatusVariant = (
-    status: string | null | undefined
-  ): 'default' | 'destructive' | 'outline' | 'secondary' => {
-    switch (status?.toLowerCase()) {
-      case 'completed':
-      case 'success':
-        return 'default';
-      case 'pending':
-      case 'confirming':
-        return 'secondary';
-      case 'failed':
-      case 'error':
-      case 'expired':
-        return 'destructive';
-      default:
-        return 'outline';
-    }
-  };
-
-  const handleSearch = (value: string) => {
-    setSearchTerm(value);
-    // Client-side filtering only
-  };
-
-  const handleStatusFilter = (status: string) => {
-    setStatusFilter(status);
-    // Client-side filtering only
-  };
-
-
-  // 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;
-  });
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle className="flex items-center justify-between">
-          <span>Payment History</span>
-          <div className="flex items-center gap-2">
-            <Button variant="outline" size="sm" onClick={() => refreshPayments()} disabled={isLoadingPayments}>
-              <RefreshCw className={`h-4 w-4 mr-2 ${isLoadingPayments ? 'animate-spin' : ''}`} />
-              Refresh
-            </Button>
-            <Button size="sm" onClick={() => openCreatePaymentDialog()}>
-              <Plus className="h-4 w-4 mr-2" />
-              New Payment
-            </Button>
-          </div>
-        </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, status, or currency..."
-              value={searchTerm}
-              onChange={(e) => handleSearch(e.target.value)}
-              className="pl-10"
-            />
-          </div>
-
-          <Select value={statusFilter} onValueChange={handleStatusFilter}>
-            <SelectTrigger className="w-full sm:w-48">
-              <Filter className="h-4 w-4 mr-2" />
-              <SelectValue placeholder="Filter by status" />
-            </SelectTrigger>
-            <SelectContent>
-              <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>
-
-        {/* Payments Table */}
-        {isLoadingPayments ? (
-          <div 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>
-            ))}
-          </div>
-        ) : 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" />
-            </div>
-            <h3 className="text-lg font-semibold mb-2">No Payments Found</h3>
-            <p className="text-muted-foreground mb-4">
-              {searchTerm || statusFilter !== 'all'
-                ? 'No payments match your current filters'
-                : "You haven't made any payments yet"}
-            </p>
-            <Button onClick={() => openCreatePaymentDialog()}>
-              <Plus className="h-4 w-4 mr-2" />
-              Create Payment
-            </Button>
-          </div>
-        ) : (
-          <>
-            <div className="rounded-md border">
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>Date</TableHead>
-                    <TableHead>Amount</TableHead>
-                    <TableHead>Currency</TableHead>
-                    <TableHead>Status</TableHead>
-                    <TableHead>Provider</TableHead>
-                    <TableHead>Payment ID</TableHead>
-                    <TableHead className="text-right">Actions</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {filteredPayments.map((payment) => (
-                    <TableRow
-                      key={payment.id}
-                      className="cursor-pointer hover:bg-accent"
-                      onClick={() => openPaymentDetailsDialog(String(payment.id))}
-                    >
-                      <TableCell>
-                        <div>
-                          <div className="font-medium">
-                            {payment.created_at
-                              ? new Date(payment.created_at).toLocaleDateString()
-                              : 'N/A'}
-                          </div>
-                          <div className="text-sm text-muted-foreground">
-                            {getRelativeTime(payment.created_at)}
-                          </div>
-                        </div>
-                      </TableCell>
-                      <TableCell className="font-mono font-semibold">
-                        {formatCurrency(payment.amount_usd)}
-                      </TableCell>
-                      <TableCell>
-                        <Badge variant="outline">{payment.currency_code || 'USD'}</Badge>
-                      </TableCell>
-                      <TableCell>
-                        <Badge variant={getStatusVariant(payment.status)}>{payment.status}</Badge>
-                      </TableCell>
-                      <TableCell className="text-sm text-muted-foreground">
-                        NowPayments
-                      </TableCell>
-                      <TableCell className="font-mono text-sm text-muted-foreground">
-                        {payment.id ? `${payment.id.toString().slice(0, 8)}...` : 'N/A'}
-                      </TableCell>
-                      <TableCell className="text-right">
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            openPaymentDetailsDialog(String(payment.id));
-                          }}
-                        >
-                          <ExternalLink className="h-4 w-4" />
-                        </Button>
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </div>
-
-            {/* DRF Pagination */}
-            <StaticPagination
-              data={payments}
-              onPageChange={pagination.setPage}
-              className="mt-4"
-            />
-          </>
-        )}
-      </CardContent>
-    </Card>
-  );
-};

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

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

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

@@ -1,17 +0,0 @@
-/**
- * Payments View (v2.0 - Simplified)
- * List and manage payment transactions
- */
-
-'use client';
-
-import React from 'react';
-import { PaymentsList } from './components';
-
-export const PaymentsView: React.FC = () => {
-  return (
-    <div className="space-y-6">
-      <PaymentsList />
-    </div>
-  );
-};