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

package/README.md

@@ -1,15 +1,15 @@
-# Paid Next.js Client SDK
+# Paid.ai Blocks
  
-Easily embed the Paid.ai Activity Log component in your Next.js app to display agent usage for specific accounts.
+Easily embed Paid.ai blocks in your Next.js app to display payments, invoices, and activity logs for specific customers.
 
----
+## Quick Setup
 
-## Features
+1. **Install**: `npm install @agentpaid/paid-nextjs-client`
+2. **Add API key**: Set `PAID_API_KEY` in your `.env.local`
+3. **Create one API route**: `src/app/api/[paidEndpoint]/[...params]/route.ts`
+4. **Use components**: Import and use `PaidContainer` or individual blocks
 
-- Plug-and-play React component for displaying agent activity logs.
-- Designed for Next.js 13+ (App Router).
-- Fetches usage data for a given account using your API key.
-- Fully customizable and responsive.
+That's it! No complex configuration needed.
 
 ---
 
@@ -23,68 +23,160 @@ yarn add @agentpaid/paid-nextjs-client
 
 ---
 
-## Usage
+## Blocks
+
+### PaidContainer (Recommended)
 
-1. **Import the component:**
+The `PaidContainer` is an all-in-one tabbed interface that displays payments, invoices, and activity logs in a single block. This is the easiest way to integrate all Paid.ai data views.
 
 ```tsx
-import { PaidActivityLog } from '@agentpaid/paid-nextjs-client';
+import { 
+  PaidContainer, 
+  PaidActivityLog, 
+  PaidInvoiceTable, 
+  PaidPaymentsTable 
+} from '@agentpaid/paid-nextjs-client';
+
+<PaidContainer 
+  title="Customer Overview"
+  description="Here's a breakdown of recent activity for your customer."
+  defaultActiveTab="payments"
+  tabs={[
+    {
+      id: 'payments',
+      label: 'Payments',
+      component: <PaidPaymentsTable customerExternalId="customer_123" />
+    },
+    {
+      id: 'invoices', 
+      label: 'Invoices',
+      component: <PaidInvoiceTable customerExternalId="customer_123" />
+    },
+    {
+      id: 'activity-log',
+      label: 'Activity Log', 
+      component: <PaidActivityLog customerExternalId="customer_123" />
+    }
+  ]}
+  paidStyle={{
+    fontFamily: 'Inter',
+    primaryColor: '#1f2937',
+    containerBackgroundColor: '#f8fafc',
+    buttonBgColor: '#3b82f6'
+  }}
+/>
 ```
 
-2. **Add it to your page or component:**
+### Individual Blocks
+
+For more granular control, you can use individual blocks:
 
 ```tsx
-<PaidActivityLog accountExternalId="your_external_account_id" />
-```
+import { 
+  PaidPaymentsTable, 
+  PaidInvoiceTable, 
+  PaidActivityLog 
+} from '@agentpaid/paid-nextjs-client';
 
-- `accountExternalId` (string, required): The customer external ID of the account whose activity you want to display.
+// Payments only
+<PaidPaymentsTable customerExternalId="customer_123" />
 
----
+// Invoices only  
+<PaidInvoiceTable customerExternalId="customer_123" />
+
+// Activity log only
+<PaidActivityLog customerExternalId="customer_123" />
+```
 
-## API Route Setup
+---
 
-To enable the PaidActivityLog component, you must create an API route in your Next.js app that proxies requests to Paid.ai using your API key.
+## API Routes Setup
 
-**You must also create a `.env.local` file in your project root and add your Paid.ai API key:**
+You need to create a single API route to handle all Paid.ai endpoints. **First, add your Paid.ai API key to `.env.local`:**
 
 ```env
 PAID_API_KEY=your_paid_ai_api_key_here
 ```
 
-**Run this command to generate the required directory and file:**
+### Single Unified API Route
+
+Create one API route that handles all four endpoints:
 
 ```bash
-mkdir -p "src/app/api/usage/[accountExternalId]" && touch "src/app/api/usage/[accountExternalId]/route.ts"
+mkdir -p "src/app/api/[paidEndpoint]/[...params]" && touch "src/app/api/[paidEndpoint]/[...params]/route.ts"
 ```
 
-**Then, add the following code to `src/app/api/usage/[accountExternalId]/route.ts`:**
-
+Add to `src/app/api/[paidEndpoint]/[...params]/route.ts`:
 ```ts
-import { handlePaidUsage } from '@agentpaid/paid-nextjs-client';
+import { handleBlocks } from '@agentpaid/paid-nextjs-client';
 
-export const GET = handlePaidUsage(process.env.PAID_API_KEY!);
+export const GET = handleBlocks();
 ```
 
-This will securely proxy usage requests to Paid.ai using your API key from environment variables.
-
 ---
 
-## Example
+## Complete Example
 
 ```tsx
-import { PaidActivityLog } from '@agentpaid/paid-nextjs-client';
-
-export default function AgentDashboard() {
+import { 
+  PaidContainer,
+  PaidActivityLog,
+  PaidInvoiceTable,
+  PaidPaymentsTable
+} from '@agentpaid/paid-nextjs-client';
+
+export default function CustomerDashboard() {
   return (
     <div style={{ padding: '2rem', fontFamily: 'sans-serif' }}>
-      <h1>Agent Dashboard</h1>
+      <h1>Customer Dashboard</h1>
 
       <section style={{ marginBottom: '2rem' }}>
         <p><strong>Welcome back!</strong></p>
-        <p>Here’s a breakdown of recent activity for account <code>customer_123</code>.</p>
+        <p>Here's a complete overview for customer <code>customer_123</code>.</p>
       </section>
 
-      <PaidActivityLog accountExternalId="customer_123" />
+      <PaidContainer 
+        title="Customer Overview"
+        description="Complete breakdown of payments, invoices, and activity."
+        defaultActiveTab="payments"
+        tabs={[
+          {
+            id: 'payments',
+            label: 'Payments',
+            component: <PaidPaymentsTable customerExternalId="customer_123" />
+          },
+          {
+            id: 'invoices',
+            label: 'Invoices', 
+            component: <PaidInvoiceTable customerExternalId="customer_123" />
+          },
+          {
+            id: 'activity-log',
+            label: 'Activity Log',
+            component: <PaidActivityLog customerExternalId="customer_123" />
+          }
+        ]}
+        paidStyle={{
+          // Global styling
+          fontFamily: 'Inter, sans-serif',
+          primaryColor: '#1f2937',
+          secondaryColor: '#6b7280',
+          
+          // Container & backgrounds
+          containerBackgroundColor: '#f8fafc',
+          tableBackgroundColor: '#ffffff',
+          tableHeaderBackgroundColor: '#f1f5f9',
+          
+          // Tabs
+          tabBackgroundColor: '#e2e8f0',
+          tabActiveBackgroundColor: '#3b82f6',
+          tabHoverBackgroundColor: '#cbd5e1',
+          
+          // Interactive elements
+          tableHoverColor: '#f1f5f9',
+          buttonBgColor: '#3b82f6'
+        }}
+      />
 
       <section style={{ marginTop: '2rem' }}>
         <p>Need help? Visit our <a href="/support">support center</a>.</p>
@@ -96,58 +188,71 @@ export default function AgentDashboard() {
 
 ---
 
-## Styling & Customization
+## Styling System
+
+The Paid.ai blocks use a simplified, universal styling system. All blocks accept a `paidStyle` prop with the following properties:
+
+### Universal Style Properties
+
+| Property | Description | Default |
+|----------|-------------|---------|
+| `fontFamily` | Global font family for all text | `'Roboto'` |
+| `primaryColor` | Primary text color | `'#374151'` |
+| `secondaryColor` | Secondary text color | `'#6b7280'` |
+| `containerBackgroundColor` | Main container background | `'#f8f9fa'` |
+| `tableBackgroundColor` | Table body background | `'#ffffff'` |
+| `tableHeaderBackgroundColor` | Table header background | `'#f9fafb'` |
+| `tabBackgroundColor` | Tab background (PaidContainer only) | `'#e2e8f0'` |
+| `tabActiveBackgroundColor` | Active tab background | `'#3b82f6'` |
+| `tabHoverBackgroundColor` | Tab hover background | `'#cbd5e1'` |
+| `tableHoverColor` | Table row hover background | `'#f3f4f6'` |
+| `buttonBgColor` | Background for buttons, status badges, and pagination | `'#ffffff'` |
 
-The `PaidActivityLog` component is fully customizable through the `paidStyle` prop. You can override the visual design of the component, such as fonts, colors, borders, and layout, by passing an object with our predefined styling variables.
+### Styling Inheritance
 
-These custom CSS properties map directly to visual elements inside the component and allow full control over typography, layout, and colors without modifying any stylesheets.
+- **PaidContainer**: Styles applied here automatically inherit to all child blocks
+- **Individual Blocks**: Can override inherited styles or define their own when used standalone
+- **Flexible**: Mix and match - style globally via PaidContainer or individually per block
 
-## Example
+### Example: Dark Theme
 
-```html
-<PaidActivityLog 
-  accountExternalId="customer_123" 
+```tsx
+<PaidContainer 
+  title="Customer Overview"
+  description="Dark theme example"
+  defaultActiveTab="payments"
+  tabs={[
+    {
+      id: 'payments',
+      label: 'Payments',
+      component: <PaidPaymentsTable customerExternalId="customer_123" />
+    }
+  ]}
   paidStyle={{
-    paidTitleColor: '#ff0000',
-    paidTitleFontWeight: 'bold',
-    paidFontFamily: 'Comic Sans MS, Comic Sans, sans-serif',
-    paidWrapperBorder: 'none',
-    paidHeaderBorderBottom: 'none',
-    paidThBorderBottom: 'none',
-    paidTdBorderBottom: 'none',
-    paidTdColor: '#00ff00',
-    paidTdBg: '#0000ff',
-    paidRowHoverBg: '#000000',
+    fontFamily: 'Inter',
+    primaryColor: '#f9fafb',
+    secondaryColor: '#d1d5db',
+    containerBackgroundColor: '#1f2937',
+    tableBackgroundColor: '#374151',
+    tableHeaderBackgroundColor: '#4b5563',
+    tabBackgroundColor: '#4b5563',
+    tabActiveBackgroundColor: '#3b82f6',
+    tabHoverBackgroundColor: '#6b7280',
+    tableHoverColor: '#4b5563',
+    buttonBgColor: '#6b7280'
   }}
 />
 ```
 
-## Available Style Variables
-
-| Variable Name | CSS Custom Property | Description |
-| --- | --- | --- |
-| `paidFontFamily` | `--paid-font-family` | Global font for all content |
-| `paidTitleFontSize` | `--paid-title-font-size` | Title font size |
-| `paidTitleFontWeight` | `--paid-title-font-weight` | Title font weight |
-| `paidTitleColor` | `--paid-title-color` | Title color |
-| `paidToggleFontSize` | `--paid-toggle-font-size` | Toggle font size |
-| `paidToggleFontWeight` | `--paid-toggle-font-weight` | Toggle font weight |
-| `paidToggleColor` | `--paid-toggle-color` | Toggle color |
-| `paidThFontSize` | `--paid-th-font-size` | Table header font size |
-| `paidThFontWeight` | `--paid-th-font-weight` | Table header font weight |
-| `paidThColor` | `--paid-th-color` | Table header text color |
-| `paidTdFontSize` | `--paid-td-font-size` | Table data font size |
-| `paidTdFontWeight` | `--paid-td-font-weight` | Table data font weight |
-| `paidTdColor` | `--paid-td-color` | Table data text color |
-| `paidEmptyColor` | `--paid-empty-color` | “No usage data” message color |
-| `paidWrapperBg` | `--paid-wrapper-bg` | Outer wrapper background |
-| `paidWrapperBorder` | `--paid-wrapper-border` | Outer wrapper border |
-| `paidHeaderBg` | `--paid-header-bg` | Header bar background |
-| `paidHeaderBorderBottom` | `--paid-header-border-bottom` | Header bottom border |
-| `paidTableBg` | `--paid-table-bg` | Table background |
-| `paidThBg` | `--paid-th-bg` | Header cell background |
-| `paidThBorderBottom` | `--paid-th-border-bottom` | Header cell bottom border |
-| `paidTdBg` | `--paid-td-bg` | Data cell background |
-| `paidTdBorderBottom` | `--paid-td-border-bottom` | Data cell bottom border |
-| `paidRowHoverBg` | `--paid-row-hover-bg` | Data row hover background |
+### Example: Individual Block Styling
 
+```tsx
+<PaidPaymentsTable 
+  customerExternalId="customer_123"
+  paidStyle={{
+    primaryColor: '#dc2626',
+    buttonBgColor: '#fef2f2',
+    tableHoverColor: '#fee2e2'
+  }}
+/>
+```

package/dist/api/api/handleBlocks.ts

@@ -0,0 +1,144 @@
+type PaidEndpoint = 'invoices' | 'payments' | 'invoice-pdf' | 'usage';
+
+interface Params {
+  paidEndpoint: string;
+  params: string[];
+}
+
+export function handleBlocks(apiBase?: string) {
+  return async function GET(
+    _request: Request,
+    { params }: { params: Params }
+  ) {
+    try {
+      const apiKey = process.env.PAID_API_KEY;
+      
+      if (!apiKey) {
+        console.log('handlePaidUnified - No API key found in environment variables');
+        return new Response(
+          JSON.stringify({ error: 'API key not configured. Please set PAID_API_KEY environment variable.' }),
+          { 
+            status: 500,
+            headers: { 'Content-Type': 'application/json' }
+          }
+        );
+      }
+
+      if (!apiBase) {
+        apiBase = 'https://api.agentpaid.io';
+      }
+
+      const paidEndpoint = params.paidEndpoint as PaidEndpoint;
+      const routeParams = params.params || [];
+      
+      let customerExternalId: string | undefined;
+      let invoiceId: string | undefined;
+      
+      if (paidEndpoint === 'invoice-pdf') {
+        invoiceId = routeParams[0];
+      } else {
+        customerExternalId = routeParams[0];
+      }
+
+      if ((paidEndpoint === 'invoices' || paidEndpoint === 'payments' || paidEndpoint === 'usage') && !customerExternalId) {
+        return new Response(
+          JSON.stringify({ error: 'customerExternalId is required for this endpoint' }),
+          { 
+            status: 400,
+            headers: { 'Content-Type': 'application/json' }
+          }
+        );
+      }
+
+      if (paidEndpoint === 'invoice-pdf' && !invoiceId) {
+        return new Response(
+          JSON.stringify({ error: 'invoiceId is required for invoice PDF endpoint' }),
+          { 
+            status: 400,
+            headers: { 'Content-Type': 'application/json' }
+          }
+        );
+      }
+
+      let url: string;
+      switch (paidEndpoint) {
+        case 'invoices':
+          url = `${apiBase}/api/organizations/org/customer/external/${customerExternalId}/invoices`;
+          break;
+        case 'payments':
+          url = `${apiBase}/api/organizations/org/customer/external/${customerExternalId}/payments`;
+          break;
+        case 'invoice-pdf':
+          url = `${apiBase}/api/organizations/org/invoices/${invoiceId}/pdf`;
+          break;
+        case 'usage':
+          url = `${apiBase}/api/organizations/org/customer/external/${customerExternalId}`;
+          break;
+        default:
+          return new Response(
+            JSON.stringify({ error: `Unknown endpoint: ${paidEndpoint}` }),
+            { 
+              status: 400,
+              headers: { 'Content-Type': 'application/json' }
+            }
+          );
+      }
+
+      const response = await fetch(url, {
+        headers: {
+          'Authorization': `Bearer ${apiKey}`,
+        },
+      });
+
+      if (!response.ok) {
+        let errorMessage = `HTTP ${response.status}: ${response.statusText}`;
+        try {
+          const errorData = await response.json();
+          errorMessage = errorData.error || errorData.message || errorMessage;
+        } catch (parseError) {
+          if (paidEndpoint === 'invoice-pdf') {
+            try {
+              const errorText = await response.text();
+              if (errorText) {
+                errorMessage = errorText;
+              }
+            } catch (textError) {
+              console.log(`handlePaidUnified - Could not parse error response for ${paidEndpoint}`);
+            }
+          } else {
+            console.log(`handlePaidUnified - Could not parse error response as JSON for ${paidEndpoint}`);
+          }
+        }
+        
+        return new Response(
+          JSON.stringify({ error: errorMessage }),
+          { 
+            status: response.status,
+            headers: { 'Content-Type': 'application/json' }
+          }
+        );
+      }
+
+      const data = await response.json();
+      return new Response(
+        JSON.stringify(data),
+        { 
+          status: 200,
+          headers: { 'Content-Type': 'application/json' }
+        }
+      );
+    } catch (error) {
+      console.error(`Error in handlePaidUnified for ${params.paidEndpoint}:`, error);
+      return new Response(
+        JSON.stringify({ 
+          error: `Failed to fetch ${params.paidEndpoint} data`, 
+          details: error instanceof Error ? error.message : String(error)
+        }),
+        { 
+          status: 500,
+          headers: { 'Content-Type': 'application/json' }
+        }
+      );
+    }
+  };
+} 

package/dist/api/handleBlocks.d.ts

@@ -0,0 +1,9 @@
+interface Params {
+    paidEndpoint: string;
+    params: string[];
+}
+export declare function handleBlocks(apiBase?: string): (_request: Request, { params }: {
+    params: Params;
+}) => Promise<Response>;
+export {};
+//# sourceMappingURL=handleBlocks.d.ts.map

package/dist/api/handleBlocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"handleBlocks.d.ts","sourceRoot":"","sources":["../../src/api/handleBlocks.ts"],"names":[],"mappings":"AAEA,UAAU,MAAM;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB;AAED,wBAAgB,YAAY,CAAC,OAAO,CAAC,EAAE,MAAM,cAE/B,OAAO;YACK,MAAM;wBAqI/B"}

package/dist/api/handleBlocks.js

@@ -0,0 +1,107 @@
+export function handleBlocks(apiBase) {
+    return async function GET(_request, { params }) {
+        try {
+            const apiKey = process.env.PAID_API_KEY;
+            if (!apiKey) {
+                console.log('handlePaidUnified - No API key found in environment variables');
+                return new Response(JSON.stringify({ error: 'API key not configured. Please set PAID_API_KEY environment variable.' }), {
+                    status: 500,
+                    headers: { 'Content-Type': 'application/json' }
+                });
+            }
+            if (!apiBase) {
+                apiBase = 'https://api.agentpaid.io';
+            }
+            const paidEndpoint = params.paidEndpoint;
+            const routeParams = params.params || [];
+            let customerExternalId;
+            let invoiceId;
+            if (paidEndpoint === 'invoice-pdf') {
+                invoiceId = routeParams[0];
+            }
+            else {
+                customerExternalId = routeParams[0];
+            }
+            if ((paidEndpoint === 'invoices' || paidEndpoint === 'payments' || paidEndpoint === 'usage') && !customerExternalId) {
+                return new Response(JSON.stringify({ error: 'customerExternalId is required for this endpoint' }), {
+                    status: 400,
+                    headers: { 'Content-Type': 'application/json' }
+                });
+            }
+            if (paidEndpoint === 'invoice-pdf' && !invoiceId) {
+                return new Response(JSON.stringify({ error: 'invoiceId is required for invoice PDF endpoint' }), {
+                    status: 400,
+                    headers: { 'Content-Type': 'application/json' }
+                });
+            }
+            let url;
+            switch (paidEndpoint) {
+                case 'invoices':
+                    url = `${apiBase}/api/organizations/org/customer/external/${customerExternalId}/invoices`;
+                    break;
+                case 'payments':
+                    url = `${apiBase}/api/organizations/org/customer/external/${customerExternalId}/payments`;
+                    break;
+                case 'invoice-pdf':
+                    url = `${apiBase}/api/organizations/org/invoices/${invoiceId}/pdf`;
+                    break;
+                case 'usage':
+                    url = `${apiBase}/api/organizations/org/customer/external/${customerExternalId}`;
+                    break;
+                default:
+                    return new Response(JSON.stringify({ error: `Unknown endpoint: ${paidEndpoint}` }), {
+                        status: 400,
+                        headers: { 'Content-Type': 'application/json' }
+                    });
+            }
+            const response = await fetch(url, {
+                headers: {
+                    'Authorization': `Bearer ${apiKey}`,
+                },
+            });
+            if (!response.ok) {
+                let errorMessage = `HTTP ${response.status}: ${response.statusText}`;
+                try {
+                    const errorData = await response.json();
+                    errorMessage = errorData.error || errorData.message || errorMessage;
+                }
+                catch (parseError) {
+                    if (paidEndpoint === 'invoice-pdf') {
+                        try {
+                            const errorText = await response.text();
+                            if (errorText) {
+                                errorMessage = errorText;
+                            }
+                        }
+                        catch (textError) {
+                            console.log(`handlePaidUnified - Could not parse error response for ${paidEndpoint}`);
+                        }
+                    }
+                    else {
+                        console.log(`handlePaidUnified - Could not parse error response as JSON for ${paidEndpoint}`);
+                    }
+                }
+                return new Response(JSON.stringify({ error: errorMessage }), {
+                    status: response.status,
+                    headers: { 'Content-Type': 'application/json' }
+                });
+            }
+            const data = await response.json();
+            return new Response(JSON.stringify(data), {
+                status: 200,
+                headers: { 'Content-Type': 'application/json' }
+            });
+        }
+        catch (error) {
+            console.error(`Error in handlePaidUnified for ${params.paidEndpoint}:`, error);
+            return new Response(JSON.stringify({
+                error: `Failed to fetch ${params.paidEndpoint} data`,
+                details: error instanceof Error ? error.message : String(error)
+            }), {
+                status: 500,
+                headers: { 'Content-Type': 'application/json' }
+            });
+        }
+    };
+}
+//# sourceMappingURL=handleBlocks.js.map

package/dist/api/handleBlocks.js.map

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

package/dist/components/PaidActivityLog.d.ts

@@ -1,33 +1,20 @@
 import React from 'react';
-import '../styles/activity-log-table.css';
+import '../styles/paid-activity-log.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;
+    fontFamily?: string;
+    primaryColor?: string;
+    secondaryColor?: string;
+    containerBackgroundColor?: string;
+    tableBackgroundColor?: string;
+    tableHeaderBackgroundColor?: string;
+    tabBackgroundColor?: string;
+    tabActiveBackgroundColor?: string;
+    tabHoverBackgroundColor?: string;
+    tableHoverColor?: string;
+    buttonBgColor?: string;
 }
 interface PaidActivityLogProps {
-    accountExternalId: string;
+    customerExternalId: string;
     paidStyle?: PaidStyleProperties;
 }
 export declare const PaidActivityLog: React.FC<PaidActivityLogProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"PaidActivityLog.d.ts","sourceRoot":"","sources":["../../src/components/PaidActivityLog.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;AAyBD,UAAU,oBAAoB;IAC1B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,mBAAmB,CAAC;CACnC;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAuI1D,CAAC"}
+{"version":3,"file":"PaidActivityLog.d.ts","sourceRoot":"","sources":["../../src/components/PaidActivityLog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAO,iCAAiC,CAAC;AAEzC,UAAU,mBAAmB;IAEzB,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IAGxB,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,0BAA0B,CAAC,EAAE,MAAM,CAAC;IAGpC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,uBAAuB,CAAC,EAAE,MAAM,CAAC;IAGjC,eAAe,CAAC,EAAE,MAAM,CAAC;IAGzB,aAAa,CAAC,EAAE,MAAM,CAAC;CAC1B;AA2BD,UAAU,oBAAoB;IAC1B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,mBAAmB,CAAC;CACnC;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA+L1D,CAAC"}