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

package/dist/components/components/PaidActivityLog.js

@@ -3,34 +3,34 @@
 import React, { useEffect, useState } from 'react';
 import { useIsInContainer } from './PaidContainer';
 import { cachedFetch, getCacheKey, CACHE_TTL } from '../utils/cache';
+import { Pagination } from './ui/Pagination';
 import '../styles/activity-log-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 UsageSummary {
     id: string;
     updatedAt: string;
@@ -47,6 +47,7 @@ interface UsageSummary {
     orderLineAttributeId: string;
     invoiceId: string | null;
     invoiceLineId: string | null;
+    currency?: string;
 }
 
 interface UsageApiResponse {
@@ -67,29 +68,71 @@ export const PaidActivityLog: React.FC<PaidActivityLogProps> = ({
     const [usageSummaries, setUsageSummaries] = useState<UsageSummary[]>([]);
     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(usageSummaries.length / itemsPerPage);
+    const startIndex = (currentPage - 1) * itemsPerPage;
+    const endIndex = startIndex + itemsPerPage;
+    const currentUsageSummaries = usageSummaries.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}`;
+        // 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 || 'USD');
         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 formatEventName = (eventName: string) => {
@@ -112,20 +155,13 @@ export const PaidActivityLog: React.FC<PaidActivityLogProps> = ({
             try {
                 setLoading(true);
                 
-                // TEMPORARILY DISABLED: Use cached fetch for usage data
-                // const cacheKey = getCacheKey.usage(accountExternalId);
-                // const data = await cachedFetch<UsageApiResponse>(
-                //     `/api/usage/${accountExternalId}`,
-                //     cacheKey,
-                //     CACHE_TTL.DATA
-                // );
-                
-                // Direct fetch without caching
-                const response = await fetch(`/api/usage/${accountExternalId}`);
-                if (!response.ok) {
-                    throw new Error(`Failed to fetch: ${response.statusText}`);
-                }
-                const data = await response.json();
+                // Use cached fetch for usage data
+                const cacheKey = getCacheKey.usage(accountExternalId);
+                const data = await cachedFetch<UsageApiResponse>(
+                    `/api/usage/${accountExternalId}`,
+                    cacheKey,
+                    CACHE_TTL.DATA
+                );
                 
                 const mappedUsageSummaries = (data.data.usageSummary || []).map((summary: any) => ({
                     ...summary,
@@ -142,8 +178,6 @@ export const PaidActivityLog: React.FC<PaidActivityLogProps> = ({
         fetchUsageData();
     }, [accountExternalId]);
 
-    const displayedSummaries = usageSummaries;
-
     if (loading) {
         return <div>Loading usage data...</div>;
     }
@@ -154,14 +188,14 @@ export const PaidActivityLog: React.FC<PaidActivityLogProps> = ({
 
     return (
         <div className="paid-activity-log-container" style={{ position: 'relative', minWidth: 0, ...cssVariables }}>
-            <div className="paid-activity-log-table-wrapper" style={{ position: 'static', width: '100%', height: 'auto', left: undefined, top: undefined, boxShadow: undefined, cursor: undefined }}>
+            <div className="paid-activity-log-table-wrapper" style={{ position: 'relative', width: '100%', height: 'auto', left: undefined, top: undefined, boxShadow: undefined, cursor: undefined }}>
                 {!isInContainer && (
                     <div className="paid-activity-log-header">
-                        <h3 className="paid-activity-log-title">Paid.ai Activity Log</h3>
+                        <h3 className="paid-activity-log-title">Activity Log</h3>
                     </div>
                 )}
-                <div style={{ background: '#fff', overflow: 'auto' }}>
-                    <table className="paid-activity-log-table">
+                <div style={{ background: '#fff', overflow: 'auto', width: '100%', boxSizing: 'border-box' }}>
+                    <table className="paid-activity-log-table" style={{ width: '100%', maxWidth: '100%', tableLayout: 'fixed' }}>
                         <thead>
                             <tr>
                                 <th>Event</th>
@@ -172,26 +206,33 @@ export const PaidActivityLog: React.FC<PaidActivityLogProps> = ({
                             </tr>
                         </thead>
                         <tbody>
-                            {displayedSummaries.length === 0 ? (
+                            {currentUsageSummaries.length === 0 ? (
                                 <tr>
                                     <td colSpan={5} className="paid-activity-log-empty">
                                         No usage data found
                                     </td>
                                 </tr>
                             ) : (
-                                displayedSummaries.map((summary) => (
+                                currentUsageSummaries.map((summary) => (
                                     <tr key={summary.id}>
                                         <td style={{ fontWeight: 500 }}>{formatEventName(summary.eventName)}</td>
                                         <td>{formatDate(summary.startDate)}</td>
                                         <td>{formatDate(summary.endDate)}</td>
                                         <td style={{ textAlign: 'center' }}>{summary.eventsQuantity}</td>
-                                        <td style={{ textAlign: 'center', fontWeight: 500 }}>{formatCurrency(summary.subtotal)}</td>
+                                        <td style={{ textAlign: 'center', fontWeight: 500 }}>{formatCurrency(summary.subtotal, summary.currency)}</td>
                                     </tr>
                                 ))
                             )}
                         </tbody>
                     </table>
                 </div>
+                
+                {/* Pagination */}
+                <Pagination
+                    currentPage={currentPage}
+                    totalPages={totalPages}
+                    onPageChange={handlePageChange}
+                />
             </div>
         </div>
     );

package/dist/components/components/PaidContainer.js

@@ -10,30 +10,28 @@ const PaidContainerContext = createContext<boolean>(false);
 export const useIsInContainer = () => useContext(PaidContainerContext);
 
 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 PaidContainerTab {
@@ -63,15 +61,27 @@ export const PaidContainer: React.FC<PaidContainerProps> = ({
 
     // 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}`;
+        // 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);
 

package/dist/components/components/PaidInvoiceTable.js

@@ -3,33 +3,32 @@
 import React, { useEffect, useState } from 'react';
 import { useIsInContainer } from './PaidContainer';
 import { cachedFetch, getCacheKey, CACHE_TTL, dataCache } from '../utils/cache';
+import { Pagination } from './ui/Pagination';
 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 +36,7 @@ interface Invoice {
     number: string;
     issueDate: string;
     dueDate: string;
-    status: string;
+    paymentStatus: string;
     invoiceTotal: number;
     currency: string;
     customer?: {
@@ -66,30 +65,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 +145,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,7 +155,7 @@ export const PaidInvoiceTable: React.FC<PaidInvoiceTableProps> = ({
             if (cachedPdf) {
                 setPdfResponse(cachedPdf);
                 setIsPreviewOpen(true);
-                setLoadingPdf(false);
+                setLoadingInvoiceId(null);
                 return;
             }
             
@@ -141,7 +178,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,25 +203,22 @@ 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
-                // );
-                
-                // Direct fetch without caching
-                const response = await fetch(`/api/invoices/${accountExternalId}`);
-                if (!response.ok) {
-                    throw new Error(`Failed to fetch: ${response.statusText}`);
-                }
-                const data = await response.json();
+                // Use cached fetch for invoice data
+                const cacheKey = getCacheKey.invoices(accountExternalId);
+                const data = await cachedFetch<InvoiceApiResponse>(
+                    `/api/invoices/${accountExternalId}`,
+                    cacheKey,
+                    CACHE_TTL.DATA
+                );
                 
                 setInvoices(data.data || []);
             } catch (err) {
@@ -214,8 +248,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 +257,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 +303,13 @@ export const PaidInvoiceTable: React.FC<PaidInvoiceTableProps> = ({
                             </tbody>
                         </table>
                     </div>
+                    
+                    {/* Pagination */}
+                    <Pagination
+                        currentPage={currentPage}
+                        totalPages={totalPages}
+                        onPageChange={handlePageChange}
+                    />
                 </div>
             </div>
 
@@ -276,30 +317,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