@djangocfg/ext-payments 1.0.6 → 1.0.7

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

@@ -6,6 +6,7 @@
 'use client';
 
 import React from 'react';
+
 import { BalanceCard, RecentPayments } from './components';
 
 export const OverviewView: React.FC = () => {

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

@@ -5,31 +5,16 @@
 
 'use client';
 
+import { ExternalLink, Filter, Plus, RefreshCw, Search } from 'lucide-react';
+import moment from 'moment';
 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,
+    Badge, Button, Card, CardContent, CardHeader, CardTitle, Input, Select, SelectContent,
+    SelectItem, SelectTrigger, SelectValue, Skeleton, StaticPagination, Table, TableBody, TableCell,
+    TableHead, TableHeader, TableRow, useDRFPagination
 } from '@djangocfg/ui-nextjs';
-import { Plus, Search, Filter, RefreshCw, ExternalLink } from 'lucide-react';
+
 import { apiPayments } from '../../../../../api';
 import { usePaymentsPaymentsList } from '../../../../../api/generated/ext_payments/_utils/hooks';
 import { openCreatePaymentDialog, openPaymentDetailsDialog } from '../../../events';
@@ -65,9 +50,9 @@ export const PaymentsList: React.FC = () => {
   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);
+    const m = moment.utc(date).local();
+    const now = moment();
+    const diffInSeconds = now.diff(m, 'seconds');
 
     if (diffInSeconds < 60) return 'Just now';
     if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}m ago`;
@@ -75,6 +60,11 @@ export const PaymentsList: React.FC = () => {
     return `${Math.floor(diffInSeconds / 86400)}d ago`;
   };
 
+  const formatDate = (date: string | null | undefined): string => {
+    if (!date) return 'N/A';
+    return moment.utc(date).local().format('MMM D, YYYY');
+  };
+
   const getStatusVariant = (
     status: string | null | undefined
   ): 'default' | 'destructive' | 'outline' | 'secondary' => {
@@ -104,21 +94,34 @@ export const PaymentsList: React.FC = () => {
     // Client-side filtering only
   };
 
+  // Helper to truncate ID
+  const truncateId = (id: string | number | null | undefined): string => {
+    if (!id) return 'N/A';
+    const str = id.toString();
+    return str.length > 8 ? `${str.slice(0, 8)}...` : str;
+  };
 
-  // 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;
+  // Filter and prepare payments with pre-computed fields
+  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;
+      const matchesStatus = statusFilter !== 'all'
+        ? payment.status?.toLowerCase() === statusFilter.toLowerCase()
+        : true;
 
-    return matchesSearch && matchesStatus;
-  });
+      return matchesSearch && matchesStatus;
+    })
+    .map((payment) => ({
+      ...payment,
+      formattedDate: formatDate(payment.created_at),
+      relativeTime: getRelativeTime(payment.created_at),
+      truncatedId: truncateId(payment.id),
+    }));
 
   return (
     <Card>
@@ -221,12 +224,10 @@ export const PaymentsList: React.FC = () => {
                       <TableCell>
                         <div>
                           <div className="font-medium">
-                            {payment.created_at
-                              ? new Date(payment.created_at).toLocaleDateString()
-                              : 'N/A'}
+                            {payment.formattedDate}
                           </div>
                           <div className="text-sm text-muted-foreground">
-                            {getRelativeTime(payment.created_at)}
+                            {payment.relativeTime}
                           </div>
                         </div>
                       </TableCell>
@@ -243,7 +244,7 @@ export const PaymentsList: React.FC = () => {
                         NowPayments
                       </TableCell>
                       <TableCell className="font-mono text-sm text-muted-foreground">
-                        {payment.id ? `${payment.id.toString().slice(0, 8)}...` : 'N/A'}
+                        {payment.truncatedId}
                       </TableCell>
                       <TableCell className="text-right">
                         <Button

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

@@ -6,6 +6,7 @@
 'use client';
 
 import React from 'react';
+
 import { PaymentsList } from './components';
 
 export const PaymentsView: React.FC = () => {

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

@@ -5,29 +5,16 @@
 
 'use client';
 
+import { ArrowDownLeft, ArrowUpRight, Filter, History, RefreshCw, Search } from 'lucide-react';
+import moment from 'moment';
 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,
+    Badge, Button, Card, CardContent, CardHeader, CardTitle, Input, Select, SelectContent,
+    SelectItem, SelectTrigger, SelectValue, Skeleton, Table, TableBody, TableCell, TableHead,
+    TableHeader, TableRow
 } from '@djangocfg/ui-nextjs';
-import { History, Search, Filter, RefreshCw, ArrowUpRight, ArrowDownLeft } from 'lucide-react';
+
 import { useOverviewContext } from '../../../../../contexts';
 
 export const TransactionsList: React.FC = () => {
@@ -55,13 +42,7 @@ export const TransactionsList: React.FC = () => {
   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',
-      });
+      return moment.utc(date).local().format('MMM D, YYYY hh:mm A');
     } catch {
       return 'Invalid date';
     }
@@ -70,9 +51,9 @@ export const TransactionsList: React.FC = () => {
   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);
+    const m = moment.utc(date).local();
+    const now = moment();
+    const diffInSeconds = now.diff(m, 'seconds');
 
     if (diffInSeconds < 60) return 'Just now';
     if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}m ago`;
@@ -114,20 +95,35 @@ export const TransactionsList: React.FC = () => {
     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;
+  // Helper to truncate ID
+  const truncateId = (id: string | number | null | undefined): string => {
+    if (!id) return 'N/A';
+    const str = id.toString();
+    return str.length > 8 ? `${str.slice(0, 8)}...` : str;
+  };
+
+  // Filter and prepare transactions
+  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;
+      const matchesType = typeFilter !== 'all'
+        ? transaction.type?.toLowerCase() === typeFilter.toLowerCase()
+        : true;
 
-    return matchesSearch && matchesType;
-  });
+      return matchesSearch && matchesType;
+    })
+    .map((transaction: any) => ({
+      ...transaction,
+      isDeposit: transaction.type?.toLowerCase() === 'deposit' || transaction.type?.toLowerCase() === 'credit',
+      formattedDate: formatDate(transaction.created_at || transaction.timestamp),
+      relativeTime: getRelativeTime(transaction.created_at || transaction.timestamp),
+      truncatedRef: truncateId(transaction.reference || transaction.payment_id),
+    }));
 
   if (isLoadingTransactions) {
     return (
@@ -221,48 +217,39 @@ export const TransactionsList: React.FC = () => {
                 </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>
-                  );
-                })}
+                {filteredTransactions.map((transaction: any, index: number) => (
+                  <TableRow key={transaction.id || index}>
+                    <TableCell>
+                      <div>
+                        <div className="font-medium">{transaction.formattedDate}</div>
+                        <div className="text-sm text-muted-foreground">{transaction.relativeTime}</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={transaction.isDeposit ? 'text-green-600' : 'text-red-600'}>
+                        {transaction.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.truncatedRef}
+                    </TableCell>
+                  </TableRow>
+                ))}
               </TableBody>
             </Table>
           </div>

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

@@ -6,6 +6,7 @@
 'use client';
 
 import React from 'react';
+
 import { TransactionsList } from './components';
 
 export const TransactionsView: React.FC = () => {