@agentpaid/paid-nextjs-client 0.3.0-test.2 → 0.3.1

package/dist/components/components/PaidInvoiceTable.js

@@ -2,34 +2,34 @@
 
 import React, { useEffect, useState } from 'react';
 import { useIsInContainer } from './PaidContainer';
-import { cachedFetch, getCacheKey, CACHE_TTL, dataCache } from '../utils/cache';
+import { getCacheKey, CACHE_TTL, dataCache } from '../utils/cache';
+import { Pagination } from './ui/Pagination';
+import { fetchPaidData } from '../utils/apiClient';
 import '../styles/paid-invoice-table.css';
 
 interface PaidStyleProperties {
-    paidTitleColor?: string;
-    paidTitleFontWeight?: string;
-    paidFontFamily?: string;
-    paidWrapperBorder?: string;
-    paidHeaderBorderBottom?: string;
-    paidThBorderBottom?: string;
-    paidTdBorderBottom?: string;
-    paidTdBg?: string;
-    paidTdFontWeight?: string;
-    paidTitleFontSize?: string;
-    paidToggleFontSize?: string;
-    paidToggleFontWeight?: string;
-    paidToggleColor?: string;
-    paidThFontSize?: string;
-    paidThFontWeight?: string;
-    paidThColor?: string;
-    paidTdFontSize?: string;
-    paidTdColor?: string;
-    paidEmptyColor?: string;
-    paidWrapperBg?: string;
-    paidHeaderBg?: string;
-    paidTableBg?: string;
-    paidThBg?: string;
-    paidRowHoverBg?: string;
+    // Global - Font
+    fontFamily?: string;
+    
+    // Global - Font Colors
+    primaryColor?: string;
+    secondaryColor?: string;
+    
+    // Background Colors
+    containerBackgroundColor?: string;
+    tableBackgroundColor?: string;
+    tableHeaderBackgroundColor?: string;
+    
+    // Tab Colors
+    tabBackgroundColor?: string;
+    tabActiveBackgroundColor?: string;
+    tabHoverBackgroundColor?: string;
+    
+    // Table Hover
+    tableHoverColor?: string;
+    
+    // Button Background (Status badges & Pagination)
+    buttonBgColor?: string;
 }
 
 interface Invoice {
@@ -37,7 +37,7 @@ interface Invoice {
     number: string;
     issueDate: string;
     dueDate: string;
-    status: string;
+    paymentStatus: string;
     invoiceTotal: number;
     currency: string;
     customer?: {
@@ -52,12 +52,12 @@ interface InvoiceApiResponse {
 }
 
 interface PaidInvoiceTableProps {
-    accountExternalId: string;
+    customerExternalId: string;
     paidStyle?: PaidStyleProperties;
 }
 
 export const PaidInvoiceTable: React.FC<PaidInvoiceTableProps> = ({ 
-    accountExternalId, 
+    customerExternalId, 
     paidStyle = {}
 }) => {
     const [invoices, setInvoices] = useState<Invoice[]>([]);
@@ -66,30 +66,68 @@ export const PaidInvoiceTable: React.FC<PaidInvoiceTableProps> = ({
     const [isPreviewOpen, setIsPreviewOpen] = useState(false);
     const [pdfResponse, setPdfResponse] = useState<string | null>(null);
     const [selectedInvoice, setSelectedInvoice] = useState<Invoice | null>(null);
-    const [loadingPdf, setLoadingPdf] = useState(false);
+    const [loadingInvoiceId, setLoadingInvoiceId] = useState<string | null>(null);
+    const [currentPage, setCurrentPage] = useState(1);
+    const itemsPerPage = 8;
     const isInContainer = useIsInContainer();
 
+    // Calculate pagination
+    const totalPages = Math.ceil(invoices.length / itemsPerPage);
+    const startIndex = (currentPage - 1) * itemsPerPage;
+    const endIndex = startIndex + itemsPerPage;
+    const currentInvoices = invoices.slice(startIndex, endIndex);
+
     // Convert paidStyle entries into CSS custom properties
     const cssVariables: React.CSSProperties = Object.entries(paidStyle).reduce((vars, [key, value]) => {
-        let varName: string;
-        if (key.startsWith('--')) {
-            varName = key;
-        } else {
-            const raw = key.replace(/([A-Z])/g, '-$1').toLowerCase();
-            varName = raw.startsWith('--') ? raw : `--${raw}`;
+        // Only set CSS variables if they are explicitly provided
+        // This allows inheritance from parent PaidContainer
+        if (value !== undefined && value !== null && value !== '') {
+            // Map simplified properties to CSS custom properties
+            const propertyMap: Record<string, string> = {
+                fontFamily: '--paid-font-family',
+                primaryColor: '--paid-primary-color',
+                secondaryColor: '--paid-secondary-color',
+                containerBackgroundColor: '--paid-container-background-color',
+                tableBackgroundColor: '--paid-table-background-color',
+                tableHeaderBackgroundColor: '--paid-table-header-background-color',
+                tabBackgroundColor: '--paid-tab-background-color',
+                tabActiveBackgroundColor: '--paid-tab-active-background-color',
+                tabHoverBackgroundColor: '--paid-tab-hover-background-color',
+                tableHoverColor: '--paid-table-hover-color',
+                buttonBgColor: '--paid-button-bg-color'
+            };
+
+            const cssProperty = propertyMap[key];
+            if (cssProperty) {
+                // @ts-ignore allow custom property
+                vars[cssProperty] = value;
+            }
         }
-        // @ts-ignore allow custom property
-        vars[varName] = value;
+        
         return vars;
     }, {} as React.CSSProperties);
 
-    const formatCurrency = (amount: number) => {
+    const formatCurrency = (amount: number, currency: string) => {
+        const symbol = getCurrencySymbol(currency);
         return new Intl.NumberFormat("en-US", {
             style: "currency",
             currency: "USD",
             minimumFractionDigits: 2,
             maximumFractionDigits: 2,
-        }).format(amount / 100);
+        }).format(amount / 100).replace('$', symbol);
+    };
+
+    const getCurrencySymbol = (currency: string) => {
+        switch (currency.toUpperCase()) {
+            case 'USD':
+                return '$';
+            case 'EUR':
+                return '€';
+            case 'GBP':
+                return '£';
+            default:
+                return '$'; // Default to USD symbol
+        }
     };
 
     const formatDate = (dateString: string) => {
@@ -108,7 +146,7 @@ export const PaidInvoiceTable: React.FC<PaidInvoiceTableProps> = ({
 
     const handlePreview = async (invoice: Invoice) => {
         try {
-            setLoadingPdf(true);
+            setLoadingInvoiceId(invoice.id);
             setSelectedInvoice(invoice);
             
             // Check cache first for PDF
@@ -118,12 +156,15 @@ export const PaidInvoiceTable: React.FC<PaidInvoiceTableProps> = ({
             if (cachedPdf) {
                 setPdfResponse(cachedPdf);
                 setIsPreviewOpen(true);
-                setLoadingPdf(false);
+                setLoadingInvoiceId(null);
                 return;
             }
             
-            // Fetch PDF if not cached
-            const response = await fetch(`/api/invoice-pdf/${invoice.id}`);
+            // Fetch PDF if not cached using new API client
+            const response = await fetchPaidData({
+                paidEndpoint: 'invoice-pdf',
+                invoiceId: invoice.id
+            });
             
             if (!response.ok) {
                 throw new Error('Failed to fetch PDF');
@@ -141,7 +182,7 @@ export const PaidInvoiceTable: React.FC<PaidInvoiceTableProps> = ({
             console.error('Error fetching PDF:', error);
             alert('Failed to load PDF preview');
         } finally {
-            setLoadingPdf(false);
+            setLoadingInvoiceId(null);
         }
     };
 
@@ -166,26 +207,26 @@ export const PaidInvoiceTable: React.FC<PaidInvoiceTableProps> = ({
         URL.revokeObjectURL(url);
     };
 
+    const handlePageChange = (page: number) => {
+        setCurrentPage(page);
+    };
+
     useEffect(() => {
         const fetchInvoiceData = async () => {
             try {
                 setLoading(true);
                 
-                // TEMPORARILY DISABLED: Use cached fetch for invoice data
-                // const cacheKey = getCacheKey.invoices(accountExternalId);
-                // const data = await cachedFetch<InvoiceApiResponse>(
-                //     `/api/invoices/${accountExternalId}`,
-                //     cacheKey,
-                //     CACHE_TTL.DATA
-                // );
+                // Use new API client for invoice data
+                const response = await fetchPaidData({
+                    paidEndpoint: 'invoices',
+                    customerExternalId
+                });
                 
-                // Direct fetch without caching
-                const response = await fetch(`/api/invoices/${accountExternalId}`);
                 if (!response.ok) {
-                    throw new Error(`Failed to fetch: ${response.statusText}`);
+                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                 }
-                const data = await response.json();
                 
+                const data = await response.json() as InvoiceApiResponse;
                 setInvoices(data.data || []);
             } catch (err) {
                 setError(err instanceof Error ? err.message : 'An error occurred');
@@ -195,7 +236,20 @@ export const PaidInvoiceTable: React.FC<PaidInvoiceTableProps> = ({
         };
 
         fetchInvoiceData();
-    }, [accountExternalId]);
+
+        // Listen for cache refresh events
+        const handleCacheRefresh = (event: CustomEvent) => {
+            if (event.detail?.customerId === customerExternalId || event.detail?.type === 'all') {
+                fetchInvoiceData();
+            }
+        };
+
+        window.addEventListener('cache-refresh', handleCacheRefresh as EventListener);
+
+        return () => {
+            window.removeEventListener('cache-refresh', handleCacheRefresh as EventListener);
+        };
+    }, [customerExternalId]);
 
     if (loading) {
         return <div>Loading invoice data...</div>;
@@ -214,8 +268,8 @@ export const PaidInvoiceTable: React.FC<PaidInvoiceTableProps> = ({
                             <h3 className="paid-invoice-title">Invoices</h3>
                         </div>
                     )}
-                    <div style={{ background: '#fff', overflow: 'auto' }}>
-                        <table className="paid-invoice-table">
+                    <div style={{ background: '#fff', overflow: 'auto', width: '100%', boxSizing: 'border-box' }}>
+                        <table className="paid-invoice-table" style={{ width: '100%', maxWidth: '100%', tableLayout: 'fixed' }}>
                             <thead>
                                 <tr>
                                     <th>Invoice Number</th>
@@ -223,32 +277,32 @@ export const PaidInvoiceTable: React.FC<PaidInvoiceTableProps> = ({
                                     <th>Invoice Date</th>
                                     <th>Due Date</th>
                                     <th style={{ textAlign: 'right' }}>Total amount</th>
-                                    <th style={{ textAlign: 'center' }}>Actions</th>
+                                    <th style={{ textAlign: 'center' }}>Preview</th>
                                 </tr>
                             </thead>
                             <tbody>
-                                {invoices.length === 0 ? (
+                                {currentInvoices.length === 0 ? (
                                     <tr>
                                         <td colSpan={6} className="paid-invoice-empty">
                                             No invoices found
                                         </td>
                                     </tr>
                                 ) : (
-                                    invoices.map((invoice) => (
+                                    currentInvoices.map((invoice) => (
                                         <tr key={invoice.id}>
                                             <td style={{ fontWeight: 500 }}>INV-{invoice.number}</td>
-                                            <td>{getStatusBadge(invoice.status)}</td>
+                                            <td>{getStatusBadge(invoice.paymentStatus)}</td>
                                             <td>{formatDate(invoice.issueDate)}</td>
                                             <td>{formatDate(invoice.dueDate)}</td>
-                                            <td style={{ textAlign: 'right', fontWeight: 500 }}>{formatCurrency(invoice.invoiceTotal)}</td>
+                                            <td style={{ textAlign: 'right', fontWeight: 500 }}>{formatCurrency(invoice.invoiceTotal, invoice.currency)}</td>
                                             <td style={{ textAlign: 'center' }}>
                                                 <button 
                                                     className="paid-invoice-action-btn"
                                                     onClick={() => handlePreview(invoice)}
-                                                    disabled={loadingPdf}
+                                                    disabled={loadingInvoiceId === invoice.id}
                                                     title="Preview Invoice"
                                                 >
-                                                    {loadingPdf ? (
+                                                    {loadingInvoiceId === invoice.id ? (
                                                         <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                                                             <circle cx="8" cy="8" r="6" stroke="currentColor" strokeWidth="2" fill="none" strokeDasharray="37.7" strokeDashoffset="37.7">
                                                                 <animateTransform attributeName="transform" type="rotate" values="0 8 8;360 8 8" dur="1s" repeatCount="indefinite"/>
@@ -269,6 +323,13 @@ export const PaidInvoiceTable: React.FC<PaidInvoiceTableProps> = ({
                             </tbody>
                         </table>
                     </div>
+                    
+                    {/* Pagination */}
+                    <Pagination
+                        currentPage={currentPage}
+                        totalPages={totalPages}
+                        onPageChange={handlePageChange}
+                    />
                 </div>
             </div>
 
@@ -276,30 +337,6 @@ export const PaidInvoiceTable: React.FC<PaidInvoiceTableProps> = ({
             {isPreviewOpen && (
                 <div className="paid-invoice-modal-overlay" onClick={() => setIsPreviewOpen(false)}>
                     <div className="paid-invoice-modal-content" onClick={(e) => e.stopPropagation()}>
-                        <div className="paid-invoice-modal-header">
-                            <h3>Invoice Preview - INV-{selectedInvoice?.number}</h3>
-                            <div className="paid-invoice-modal-actions">
-                                <button
-                                    className="paid-invoice-modal-btn paid-invoice-modal-btn-download"
-                                    onClick={handleDownload}
-                                    title="Download PDF"
-                                >
-                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                                        <path d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
-                                    </svg>
-                                </button>
-                                <button
-                                    className="paid-invoice-modal-btn paid-invoice-modal-btn-close"
-                                    onClick={() => setIsPreviewOpen(false)}
-                                    title="Close"
-                                >
-                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                                        <line x1="18" y1="6" x2="6" y2="18"></line>
-                                        <line x1="6" y1="6" x2="18" y2="18"></line>
-                                    </svg>
-                                </button>
-                            </div>
-                        </div>
                         <div className="paid-invoice-modal-body">
                             {pdfResponse ? (
                                 <iframe

package/dist/components/components/PaidPaymentsTable.js

@@ -2,41 +2,41 @@
 
 import React, { useEffect, useState } from 'react';
 import { useIsInContainer } from './PaidContainer';
-import { cachedFetch, getCacheKey, CACHE_TTL } from '../utils/cache';
+import { getCacheKey } from '../utils/cache';
+import { Pagination } from './ui/Pagination';
 import '../styles/paid-payments-table.css';
+import { fetchPaidData } from '../utils/apiClient';
 
 interface PaidStyleProperties {
-    paidTitleColor?: string;
-    paidTitleFontWeight?: string;
-    paidFontFamily?: string;
-    paidWrapperBorder?: string;
-    paidHeaderBorderBottom?: string;
-    paidThBorderBottom?: string;
-    paidTdBorderBottom?: string;
-    paidTdBg?: string;
-    paidTdFontWeight?: string;
-    paidTitleFontSize?: string;
-    paidToggleFontSize?: string;
-    paidToggleFontWeight?: string;
-    paidToggleColor?: string;
-    paidThFontSize?: string;
-    paidThFontWeight?: string;
-    paidThColor?: string;
-    paidTdFontSize?: string;
-    paidTdColor?: string;
-    paidEmptyColor?: string;
-    paidWrapperBg?: string;
-    paidHeaderBg?: string;
-    paidTableBg?: string;
-    paidThBg?: string;
-    paidRowHoverBg?: string;
+    // Global - Font
+    fontFamily?: string;
+    
+    // Global - Font Colors
+    primaryColor?: string;
+    secondaryColor?: string;
+    
+    // Background Colors
+    containerBackgroundColor?: string;
+    tableBackgroundColor?: string;
+    tableHeaderBackgroundColor?: string;
+    
+    // Tab Colors
+    tabBackgroundColor?: string;
+    tabActiveBackgroundColor?: string;
+    tabHoverBackgroundColor?: string;
+    
+    // Table Hover
+    tableHoverColor?: string;
+    
+    // Button Background (Status badges & Pagination)
+    buttonBgColor?: string;
 }
 
 interface Payment {
     id: string;
     paymentType: string;
     paymentDate: string;
-    status: string;
+    paymentStatus: string;
     amount: number;
     currency: string;
 }
@@ -46,40 +46,80 @@ interface PaymentApiResponse {
 }
 
 interface PaidPaymentsTableProps {
-    accountExternalId: string;
+    customerExternalId: string;
     paidStyle?: PaidStyleProperties;
 }
 
 export const PaidPaymentsTable: React.FC<PaidPaymentsTableProps> = ({ 
-    accountExternalId, 
+    customerExternalId, 
     paidStyle = {}
 }) => {
     const [payments, setPayments] = useState<Payment[]>([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
+    const [currentPage, setCurrentPage] = useState(1);
+    const itemsPerPage = 8;
     const isInContainer = useIsInContainer();
 
+    // Calculate pagination
+    const totalPages = Math.ceil(payments.length / itemsPerPage);
+    const startIndex = (currentPage - 1) * itemsPerPage;
+    const endIndex = startIndex + itemsPerPage;
+    const currentPayments = payments.slice(startIndex, endIndex);
+
+    const handlePageChange = (page: number) => {
+        setCurrentPage(page);
+    };
+
     // Convert paidStyle entries into CSS custom properties
     const cssVariables: React.CSSProperties = Object.entries(paidStyle).reduce((vars, [key, value]) => {
-        let varName: string;
-        if (key.startsWith('--')) {
-            varName = key;
-        } else {
-            const raw = key.replace(/([A-Z])/g, '-$1').toLowerCase();
-            varName = raw.startsWith('--') ? raw : `--${raw}`;
+        if (value !== undefined && value !== null && value !== '') {
+            // Map simplified properties to CSS custom properties
+            const propertyMap: Record<string, string> = {
+                fontFamily: '--paid-font-family',
+                primaryColor: '--paid-primary-color',
+                secondaryColor: '--paid-secondary-color',
+                containerBackgroundColor: '--paid-container-background-color',
+                tableBackgroundColor: '--paid-table-background-color',
+                tableHeaderBackgroundColor: '--paid-table-header-background-color',
+                tabBackgroundColor: '--paid-tab-background-color',
+                tabActiveBackgroundColor: '--paid-tab-active-background-color',
+                tabHoverBackgroundColor: '--paid-tab-hover-background-color',
+                tableHoverColor: '--paid-table-hover-color',
+                buttonBgColor: '--paid-button-bg-color'
+            };
+
+            const cssProperty = propertyMap[key];
+            if (cssProperty) {
+                // @ts-ignore allow custom property
+                vars[cssProperty] = value;
+            }
         }
-        // @ts-ignore allow custom property
-        vars[varName] = value;
+        
         return vars;
     }, {} as React.CSSProperties);
 
-    const formatCurrency = (amount: number) => {
+    const formatCurrency = (amount: number, currency: string) => {
+        const symbol = getCurrencySymbol(currency);
         return new Intl.NumberFormat("en-US", {
             style: "currency",
             currency: "USD",
-            minimumFractionDigits: 0,
-            maximumFractionDigits: 0,
-        }).format(amount / 100);
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        }).format(amount / 100).replace('$', symbol);
+    };
+
+    const getCurrencySymbol = (currency: string) => {
+        switch (currency.toUpperCase()) {
+            case 'USD':
+                return '$';
+            case 'EUR':
+                return '€';
+            case 'GBP':
+                return '£';
+            default:
+                return '$'; // Default to USD symbol
+        }
     };
 
     const formatDate = (dateString: string) => {
@@ -105,24 +145,22 @@ export const PaidPaymentsTable: React.FC<PaidPaymentsTableProps> = ({
         const fetchPaymentData = async () => {
             try {
                 setLoading(true);
-                console.log('PaidPaymentsTable: Fetching payment data for', accountExternalId);
+                console.log('PaidPaymentsTable: Fetching payment data for', customerExternalId);
                 
-                // TEMPORARILY DISABLED: Use cached fetch for payment data
-                // const cacheKey = getCacheKey.payments(accountExternalId);
-                // console.log('PaidPaymentsTable: Using cache key', cacheKey);
-                // const data = await cachedFetch<PaymentApiResponse>(
-                //     `/api/payments/${accountExternalId}`,
-                //     cacheKey,
-                //     CACHE_TTL.DATA
-                // );
+                // Use cached fetch for payment data
+                const cacheKey = getCacheKey.payments(customerExternalId);
+                console.log('PaidPaymentsTable: Using cache key', cacheKey);
+                
+                const response = await fetchPaidData({
+                    paidEndpoint: 'payments',
+                    customerExternalId
+                });
                 
-                // Direct fetch without caching
-                const response = await fetch(`/api/payments/${accountExternalId}`);
                 if (!response.ok) {
-                    throw new Error(`Failed to fetch: ${response.statusText}`);
+                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                 }
-                const data = await response.json();
                 
+                const data = await response.json() as PaymentApiResponse;
                 console.log('PaidPaymentsTable: Received data', data);
                 setPayments(data.data || []);
             } catch (err) {
@@ -138,7 +176,7 @@ export const PaidPaymentsTable: React.FC<PaidPaymentsTableProps> = ({
         // Listen for cache refresh events
         const handleCacheRefresh = (event: CustomEvent) => {
             console.log('PaidPaymentsTable: Cache refresh event received', event.detail);
-            if (event.detail?.accountId === accountExternalId || event.detail?.type === 'all') {
+            if (event.detail?.customerId === customerExternalId || event.detail?.type === 'all') {
                 console.log('PaidPaymentsTable: Refetching data due to cache refresh');
                 fetchPaymentData();
             }
@@ -149,7 +187,7 @@ export const PaidPaymentsTable: React.FC<PaidPaymentsTableProps> = ({
         return () => {
             window.removeEventListener('cache-refresh', handleCacheRefresh as EventListener);
         };
-    }, [accountExternalId]);
+    }, [customerExternalId]);
 
     if (loading) {
         return <div>Loading payment data...</div>;
@@ -161,58 +199,59 @@ export const PaidPaymentsTable: React.FC<PaidPaymentsTableProps> = ({
 
     return (
         <div className="paid-payment-container" style={{ position: 'relative', minWidth: 0, ...cssVariables }}>
-            <div className="paid-payment-table-wrapper" style={{ position: 'static', width: '100%', height: 'auto', left: undefined, top: undefined, boxShadow: undefined, cursor: undefined }}>
+            <div className="paid-payment-table-wrapper" style={{ position: 'relative', width: '100%', height: 'auto', left: undefined, top: undefined, boxShadow: undefined, cursor: undefined }}>
                 {!isInContainer && (
                     <div className="paid-payment-header">
                         <h3 className="paid-payment-title">Payments</h3>
                     </div>
                 )}
-                <div style={{ background: '#fff', overflow: 'auto' }}>
-                    <table className="paid-payment-table">
+                <div style={{ background: '#fff', overflow: 'auto', width: '100%', boxSizing: 'border-box' }}>
+                    <table className="paid-payment-table" style={{ width: '100%', maxWidth: '100%', tableLayout: 'fixed' }}>
                         <thead>
                             <tr>
                                 <th>Payment Number</th>
                                 <th>Payment type</th>
                                 <th>Due date</th>
                                 <th>Status</th>
-                                <th style={{ textAlign: 'right' }}>Amount</th>
-                                <th></th>
+                                <th style={{ textAlign: 'center' }}>Amount</th>
                             </tr>
                         </thead>
                         <tbody>
-                            {payments.length === 0 ? (
+                            {currentPayments.length === 0 ? (
                                 <tr>
-                                    <td colSpan={6} className="paid-payment-empty">
+                                    <td colSpan={5} className="paid-payment-empty">
                                         No payments found
                                     </td>
                                 </tr>
                             ) : (
-                                payments.map((payment) => (
+                                currentPayments.map((payment) => (
                                     <tr key={payment.id}>
-                                        <td>
+                                        <td style={{ fontWeight: 500 }}>
                                             <div className="paid-payment-number">
-                                                <span className="paid-payment-dollar">$</span>
                                                 <span>PAY-1</span>
                                             </div>
                                         </td>
                                         <td>{payment.paymentType}</td>
                                         <td>{formatDate(payment.paymentDate)}</td>
-                                        <td>{getStatusBadge(payment.status)}</td>
-                                        <td style={{ textAlign: 'right' }}>
+                                        <td>{getStatusBadge(payment.paymentStatus)}</td>
+                                        <td style={{ textAlign: 'center' }}>
                                             <div className="paid-payment-amount">
-                                                <span>{formatCurrency(payment.amount)}</span>
-                                                <span className="paid-payment-dollar-right">$</span>
+                                                <span className="amount-number">{formatCurrency(payment.amount, payment.currency)}</span>
                                             </div>
                                         </td>
-                                        <td style={{ textAlign: 'center' }}>
-                                            <span className="paid-payment-currency">{payment.currency}</span>
-                                        </td>
                                     </tr>
                                 ))
                             )}
                         </tbody>
                     </table>
                 </div>
+                
+                {/* Pagination */}
+                <Pagination
+                    currentPage={currentPage}
+                    totalPages={totalPages}
+                    onPageChange={handlePageChange}
+                />
             </div>
         </div>
     );