@agentpaid/paid-nextjs-client 0.2.1 → 0.3.0-test.1

package/dist/components/PaidInvoiceTable.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+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;
+}
+interface PaidInvoiceTableProps {
+    accountExternalId: string;
+    paidStyle?: PaidStyleProperties;
+}
+export declare const PaidInvoiceTable: React.FC<PaidInvoiceTableProps>;
+export {};
+//# sourceMappingURL=PaidInvoiceTable.d.ts.map

package/dist/components/PaidInvoiceTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaidInvoiceTable.d.ts","sourceRoot":"","sources":["../../src/components/PaidInvoiceTable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,OAAO,kCAAkC,CAAC;AAE1C,UAAU,mBAAmB;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B;AAqBD,UAAU,qBAAqB;IAC3B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,mBAAmB,CAAC;CACnC;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAsQ5D,CAAC"}

package/dist/components/PaidInvoiceTable.js

@@ -0,0 +1,138 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useIsInContainer } from './PaidContainer';
+import { getCacheKey, CACHE_TTL, dataCache } from '../utils/cache';
+import '../styles/paid-invoice-table.css';
+export const PaidInvoiceTable = ({ accountExternalId, paidStyle = {} }) => {
+    const [invoices, setInvoices] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [isPreviewOpen, setIsPreviewOpen] = useState(false);
+    const [pdfResponse, setPdfResponse] = useState(null);
+    const [selectedInvoice, setSelectedInvoice] = useState(null);
+    const [loadingPdf, setLoadingPdf] = useState(false);
+    const isInContainer = useIsInContainer();
+    // Convert paidStyle entries into CSS custom properties
+    const cssVariables = Object.entries(paidStyle).reduce((vars, [key, value]) => {
+        let varName;
+        if (key.startsWith('--')) {
+            varName = key;
+        }
+        else {
+            const raw = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+            varName = raw.startsWith('--') ? raw : `--${raw}`;
+        }
+        // @ts-ignore allow custom property
+        vars[varName] = value;
+        return vars;
+    }, {});
+    const formatCurrency = (amount) => {
+        return new Intl.NumberFormat("en-US", {
+            style: "currency",
+            currency: "USD",
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        }).format(amount / 100);
+    };
+    const formatDate = (dateString) => {
+        return new Date(dateString).toLocaleDateString('en-US', {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric'
+        });
+    };
+    const getStatusBadge = (status) => {
+        const statusClass = `paid-invoice-status paid-invoice-status-${status.toLowerCase()}`;
+        const displayStatus = status.charAt(0).toUpperCase() + status.slice(1).toLowerCase();
+        return _jsx("span", { className: statusClass, children: displayStatus });
+    };
+    const handlePreview = async (invoice) => {
+        try {
+            setLoadingPdf(true);
+            setSelectedInvoice(invoice);
+            // Check cache first for PDF
+            const pdfCacheKey = getCacheKey.invoicePdf(invoice.id);
+            const cachedPdf = dataCache.get(pdfCacheKey);
+            if (cachedPdf) {
+                setPdfResponse(cachedPdf);
+                setIsPreviewOpen(true);
+                setLoadingPdf(false);
+                return;
+            }
+            // Fetch PDF if not cached
+            const response = await fetch(`/api/invoice-pdf/${invoice.id}`);
+            if (!response.ok) {
+                throw new Error('Failed to fetch PDF');
+            }
+            const data = await response.json();
+            const pdfData = "data:application/pdf;base64," + data.data.pdfBytes;
+            // Cache the PDF data
+            dataCache.set(pdfCacheKey, pdfData, CACHE_TTL.PDF);
+            setPdfResponse(pdfData);
+            setIsPreviewOpen(true);
+        }
+        catch (error) {
+            console.error('Error fetching PDF:', error);
+            alert('Failed to load PDF preview');
+        }
+        finally {
+            setLoadingPdf(false);
+        }
+    };
+    const handleDownload = () => {
+        if (!pdfResponse || !selectedInvoice)
+            return;
+        const base64WithoutPrefix = pdfResponse.split(",")[1];
+        const byteCharacters = atob(base64WithoutPrefix);
+        const byteNumbers = new Array(byteCharacters.length)
+            .fill(0)
+            .map((_, i) => byteCharacters.charCodeAt(i));
+        const byteArray = new Uint8Array(byteNumbers);
+        const blob = new Blob([byteArray], { type: "application/pdf" });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = `invoice-${selectedInvoice.number}.pdf`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    };
+    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();
+                setInvoices(data.data || []);
+            }
+            catch (err) {
+                setError(err instanceof Error ? err.message : 'An error occurred');
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        fetchInvoiceData();
+    }, [accountExternalId]);
+    if (loading) {
+        return _jsx("div", { children: "Loading invoice data..." });
+    }
+    if (error) {
+        return _jsxs("div", { children: ["Error: ", error] });
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "paid-invoice-container", style: { ...cssVariables }, children: _jsxs("div", { className: "paid-invoice-table-wrapper", children: [!isInContainer && (_jsx("div", { className: "paid-invoice-header", children: _jsx("h3", { className: "paid-invoice-title", children: "Invoices" }) })), _jsx("div", { style: { background: '#fff', overflow: 'auto' }, children: _jsxs("table", { className: "paid-invoice-table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Invoice Number" }), _jsx("th", { children: "Status" }), _jsx("th", { children: "Invoice Date" }), _jsx("th", { children: "Due Date" }), _jsx("th", { style: { textAlign: 'right' }, children: "Total amount" }), _jsx("th", { style: { textAlign: 'center' }, children: "Actions" })] }) }), _jsx("tbody", { children: invoices.length === 0 ? (_jsx("tr", { children: _jsx("td", { colSpan: 6, className: "paid-invoice-empty", children: "No invoices found" }) })) : (invoices.map((invoice) => (_jsxs("tr", { children: [_jsxs("td", { style: { fontWeight: 500 }, children: ["INV-", invoice.number] }), _jsx("td", { children: getStatusBadge(invoice.status) }), _jsx("td", { children: formatDate(invoice.issueDate) }), _jsx("td", { children: formatDate(invoice.dueDate) }), _jsx("td", { style: { textAlign: 'right', fontWeight: 500 }, children: formatCurrency(invoice.invoiceTotal) }), _jsx("td", { style: { textAlign: 'center' }, children: _jsx("button", { className: "paid-invoice-action-btn", onClick: () => handlePreview(invoice), disabled: loadingPdf, title: "Preview Invoice", children: loadingPdf ? (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("circle", { cx: "8", cy: "8", r: "6", stroke: "currentColor", strokeWidth: "2", fill: "none", strokeDasharray: "37.7", strokeDashoffset: "37.7", children: _jsx("animateTransform", { attributeName: "transform", type: "rotate", values: "0 8 8;360 8 8", dur: "1s", repeatCount: "indefinite" }) }) })) : (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [_jsx("path", { d: "M2 2h8l4 4v8a1 1 0 01-1 1H2a1 1 0 01-1-1V3a1 1 0 011-1z", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }), _jsx("path", { d: "M10 2v4h4", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }), _jsx("path", { d: "M5 9h6M5 11h4", stroke: "currentColor", strokeWidth: "1.5" })] })) }) })] }, invoice.id)))) })] }) })] }) }), isPreviewOpen && (_jsx("div", { className: "paid-invoice-modal-overlay", onClick: () => setIsPreviewOpen(false), children: _jsxs("div", { className: "paid-invoice-modal-content", onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "paid-invoice-modal-header", children: [_jsxs("h3", { children: ["Invoice Preview - INV-", selectedInvoice === null || selectedInvoice === void 0 ? void 0 : selectedInvoice.number] }), _jsxs("div", { className: "paid-invoice-modal-actions", children: [_jsx("button", { className: "paid-invoice-modal-btn paid-invoice-modal-btn-download", onClick: handleDownload, title: "Download PDF", children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" }) }) }), _jsx("button", { className: "paid-invoice-modal-btn paid-invoice-modal-btn-close", onClick: () => setIsPreviewOpen(false), title: "Close", children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })] })] }), _jsx("div", { className: "paid-invoice-modal-body", children: pdfResponse ? (_jsx("iframe", { src: pdfResponse, width: "100%", height: "100%", style: { border: 'none' }, title: "Invoice PDF" })) : (_jsx("div", { className: "paid-invoice-modal-loading", children: "Loading PDF..." })) })] }) }))] }));
+};
+//# sourceMappingURL=PaidInvoiceTable.js.map

package/dist/components/PaidInvoiceTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaidInvoiceTable.js","sourceRoot":"","sources":["../../src/components/PaidInvoiceTable.tsx"],"names":[],"mappings":"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"}

package/dist/components/PaidPaymentsTable.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import '../styles/paid-payments-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;
+}
+interface PaidPaymentsTableProps {
+    accountExternalId: string;
+    paidStyle?: PaidStyleProperties;
+}
+export declare const PaidPaymentsTable: React.FC<PaidPaymentsTableProps>;
+export default PaidPaymentsTable;
+//# sourceMappingURL=PaidPaymentsTable.d.ts.map

package/dist/components/PaidPaymentsTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaidPaymentsTable.d.ts","sourceRoot":"","sources":["../../src/components/PaidPaymentsTable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,OAAO,mCAAmC,CAAC;AAE3C,UAAU,mBAAmB;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B;AAeD,UAAU,sBAAsB;IAC5B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,mBAAmB,CAAC;CACnC;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAiK9D,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/PaidPaymentsTable.js

@@ -0,0 +1,99 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useIsInContainer } from './PaidContainer';
+import '../styles/paid-payments-table.css';
+export const PaidPaymentsTable = ({ accountExternalId, paidStyle = {} }) => {
+    const [payments, setPayments] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const isInContainer = useIsInContainer();
+    // Convert paidStyle entries into CSS custom properties
+    const cssVariables = Object.entries(paidStyle).reduce((vars, [key, value]) => {
+        let varName;
+        if (key.startsWith('--')) {
+            varName = key;
+        }
+        else {
+            const raw = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+            varName = raw.startsWith('--') ? raw : `--${raw}`;
+        }
+        // @ts-ignore allow custom property
+        vars[varName] = value;
+        return vars;
+    }, {});
+    const formatCurrency = (amount) => {
+        return new Intl.NumberFormat("en-US", {
+            style: "currency",
+            currency: "USD",
+            minimumFractionDigits: 0,
+            maximumFractionDigits: 0,
+        }).format(amount / 100);
+    };
+    const formatDate = (dateString) => {
+        return new Date(dateString).toLocaleDateString('en-US', {
+            day: '2-digit',
+            month: 'short',
+            year: 'numeric'
+        });
+    };
+    const getStatusBadge = (status) => {
+        const statusClass = `paid-payment-status paid-payment-status-${status.toLowerCase()}`;
+        const displayStatus = status.charAt(0).toUpperCase() + status.slice(1).toLowerCase();
+        return _jsx("span", { className: statusClass, children: displayStatus });
+    };
+    useEffect(() => {
+        const fetchPaymentData = async () => {
+            try {
+                setLoading(true);
+                console.log('PaidPaymentsTable: Fetching payment data for', accountExternalId);
+                // 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
+                // );
+                // Direct fetch without caching
+                const response = await fetch(`/api/payments/${accountExternalId}`);
+                if (!response.ok) {
+                    throw new Error(`Failed to fetch: ${response.statusText}`);
+                }
+                const data = await response.json();
+                console.log('PaidPaymentsTable: Received data', data);
+                setPayments(data.data || []);
+            }
+            catch (err) {
+                console.error('PaidPaymentsTable: Error fetching data', err);
+                setError(err instanceof Error ? err.message : 'An error occurred');
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        fetchPaymentData();
+        // Listen for cache refresh events
+        const handleCacheRefresh = (event) => {
+            var _a, _b;
+            console.log('PaidPaymentsTable: Cache refresh event received', event.detail);
+            if (((_a = event.detail) === null || _a === void 0 ? void 0 : _a.accountId) === accountExternalId || ((_b = event.detail) === null || _b === void 0 ? void 0 : _b.type) === 'all') {
+                console.log('PaidPaymentsTable: Refetching data due to cache refresh');
+                fetchPaymentData();
+            }
+        };
+        window.addEventListener('cache-refresh', handleCacheRefresh);
+        return () => {
+            window.removeEventListener('cache-refresh', handleCacheRefresh);
+        };
+    }, [accountExternalId]);
+    if (loading) {
+        return _jsx("div", { children: "Loading payment data..." });
+    }
+    if (error) {
+        return _jsxs("div", { children: ["Error: ", error] });
+    }
+    return (_jsx("div", { className: "paid-payment-container", style: { position: 'relative', minWidth: 0, ...cssVariables }, children: _jsxs("div", { className: "paid-payment-table-wrapper", style: { position: 'static', width: '100%', height: 'auto', left: undefined, top: undefined, boxShadow: undefined, cursor: undefined }, children: [!isInContainer && (_jsx("div", { className: "paid-payment-header", children: _jsx("h3", { className: "paid-payment-title", children: "Payments" }) })), _jsx("div", { style: { background: '#fff', overflow: 'auto' }, children: _jsxs("table", { className: "paid-payment-table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Payment Number" }), _jsx("th", { children: "Payment type" }), _jsx("th", { children: "Due date" }), _jsx("th", { children: "Status" }), _jsx("th", { style: { textAlign: 'right' }, children: "Amount" }), _jsx("th", {})] }) }), _jsx("tbody", { children: payments.length === 0 ? (_jsx("tr", { children: _jsx("td", { colSpan: 6, className: "paid-payment-empty", children: "No payments found" }) })) : (payments.map((payment) => (_jsxs("tr", { children: [_jsx("td", { children: _jsxs("div", { className: "paid-payment-number", children: [_jsx("span", { className: "paid-payment-dollar", children: "$" }), _jsx("span", { children: "PAY-1" })] }) }), _jsx("td", { children: payment.paymentType }), _jsx("td", { children: formatDate(payment.paymentDate) }), _jsx("td", { children: getStatusBadge(payment.status) }), _jsx("td", { style: { textAlign: 'right' }, children: _jsxs("div", { className: "paid-payment-amount", children: [_jsx("span", { children: formatCurrency(payment.amount) }), _jsx("span", { className: "paid-payment-dollar-right", children: "$" })] }) }), _jsx("td", { style: { textAlign: 'center' }, children: _jsx("span", { className: "paid-payment-currency", children: payment.currency }) })] }, payment.id)))) })] }) })] }) }));
+};
+export default PaidPaymentsTable;
+//# sourceMappingURL=PaidPaymentsTable.js.map

package/dist/components/PaidPaymentsTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaidPaymentsTable.js","sourceRoot":"","sources":["../../src/components/PaidPaymentsTable.tsx"],"names":[],"mappings":"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"}

package/dist/components/components/PaidActivityLog.js

@@ -1,6 +1,8 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
+import { useIsInContainer } from './PaidContainer';
+import { cachedFetch, getCacheKey, CACHE_TTL } from '../utils/cache';
 import '../styles/activity-log-table.css';
 
 interface PaidStyleProperties {
@@ -47,16 +49,25 @@ interface UsageSummary {
     invoiceLineId: string | null;
 }
 
+interface UsageApiResponse {
+    data: {
+        usageSummary: UsageSummary[];
+    };
+}
+
 interface PaidActivityLogProps {
     accountExternalId: string;
-    host?: string;
-    paidStyle?: PaidStyleProperties; // make it a seperate interface
+    paidStyle?: PaidStyleProperties;
 }
 
-export const PaidActivityLog: React.FC<PaidActivityLogProps> = ({ accountExternalId, host, paidStyle = {} }) => {
+export const PaidActivityLog: React.FC<PaidActivityLogProps> = ({ 
+    accountExternalId, 
+    paidStyle = {}
+}) => {
     const [usageSummaries, setUsageSummaries] = useState<UsageSummary[]>([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
+    const isInContainer = useIsInContainer();
 
     // Convert paidStyle entries into CSS custom properties
     const cssVariables: React.CSSProperties = Object.entries(paidStyle).reduce((vars, [key, value]) => {
@@ -100,13 +111,22 @@ export const PaidActivityLog: React.FC<PaidActivityLogProps> = ({ accountExterna
         const fetchUsageData = async () => {
             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 usage data');
+                    throw new Error(`Failed to fetch: ${response.statusText}`);
                 }
-
                 const data = await response.json();
+                
                 const mappedUsageSummaries = (data.data.usageSummary || []).map((summary: any) => ({
                     ...summary,
                     accountId: summary.customerId,
@@ -135,9 +155,11 @@ export const PaidActivityLog: React.FC<PaidActivityLogProps> = ({ accountExterna
     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-header">
-                    <h3 className="paid-activity-log-title">Paid.ai Activity Log</h3>
-                </div>
+                {!isInContainer && (
+                    <div className="paid-activity-log-header">
+                        <h3 className="paid-activity-log-title">Paid.ai Activity Log</h3>
+                    </div>
+                )}
                 <div style={{ background: '#fff', overflow: 'auto' }}>
                     <table className="paid-activity-log-table">
                         <thead>

package/dist/components/components/PaidContainer.js

@@ -0,0 +1,113 @@
+'use client';
+
+import React, { useState, createContext, useContext } from 'react';
+import '../styles/paid-container.css';
+
+// Create context to detect if components are inside a container
+const PaidContainerContext = createContext<boolean>(false);
+
+// Export hook for components to use
+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;
+}
+
+interface PaidContainerTab {
+    id: string;
+    label: string;
+    component: React.ReactNode;
+}
+
+interface PaidContainerProps {
+    title: string;
+    description?: string;
+    tabs?: PaidContainerTab[];
+    defaultActiveTab?: string;
+    paidStyle?: PaidStyleProperties;
+    children?: React.ReactNode;
+}
+
+export const PaidContainer: React.FC<PaidContainerProps> = ({ 
+    title, 
+    description, 
+    tabs = [], 
+    defaultActiveTab,
+    paidStyle = {},
+    children
+}) => {
+    const [activeTab, setActiveTab] = useState(defaultActiveTab || tabs[0]?.id);
+
+    // 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}`;
+        }
+        // @ts-ignore allow custom property
+        vars[varName] = value;
+        return vars;
+    }, {} as React.CSSProperties);
+
+    const activeTabData = tabs.find(tab => tab.id === activeTab);
+
+    return (
+        <PaidContainerContext.Provider value={true}>
+            <div className="paid-container" style={{ ...cssVariables }}>
+                <div className="paid-container-wrapper">
+                    <div className="paid-container-header">
+                        <div className="paid-container-header-content">
+                            <h2 className="paid-container-title">{title}</h2>
+                            {description && (
+                                <p className="paid-container-description">{description}</p>
+                            )}
+                        </div>
+                        
+                        {tabs.length > 1 && (
+                            <div className="paid-container-tabs">
+                                {tabs.map((tab) => (
+                                    <button
+                                        key={tab.id}
+                                        className={`paid-container-tab ${activeTab === tab.id ? 'active' : ''}`}
+                                        onClick={() => setActiveTab(tab.id)}
+                                    >
+                                        {tab.label}
+                                    </button>
+                                ))}
+                            </div>
+                        )}
+                    </div>
+                    <div className="paid-container-content">
+                        {children || activeTabData?.component}
+                    </div>
+                </div>
+            </div>
+        </PaidContainerContext.Provider>
+    );
+};