{"_id":"@agentpaid/paid-nextjs-client","_rev":"22-bb78a6509a02bdeee564851cfd8f664e","name":"@agentpaid/paid-nextjs-client","dist-tags":{"test":"0.3.0-test.2","latest":"0.3.1"},"versions":{"0.1.1":{"name":"@agentpaid/paid-nextjs-client","version":"0.1.1","author":"","license":"ISC","_id":"@agentpaid/paid-nextjs-client@0.1.1","maintainers":[{"name":"rdosanjh","email":"rdosanjh73@gmail.com"},{"name":"georgi-paid","email":"georgi@paid.ai"},{"name":"zhalyn","email":"zhalyn@paid.ai"}],"homepage":"https://github.com/AgentPaid/paid-nextjs-client#readme","bugs":{"url":"https://github.com/AgentPaid/paid-nextjs-client/issues"},"dist":{"shasum":"028e7492a64f3808167e4ec9a2903a0000e1cdb6","tarball":"https://registry.npmjs.org/@agentpaid/paid-nextjs-client/-/paid-nextjs-client-0.1.1.tgz","fileCount":23,"integrity":"sha512-fo/bpaAjmFuV+ZGXoPatIejW6Lp4rRZnEtSznIqbF6wn1wYCH+otZyagB3LHjW8d39YorIlEc+hr80vlHhImDA==","signatures":[{"sig":"MEUCIQCOryOI+GKZmQGVNtR/+xfMOMwWnjz42DwchE4k0iHbXQIgaKyu0d39rliOSQIOO4UQwy2YtteuaPdMK4lLUoDjGWI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":61952},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","gitHead":"bc7ac37156e25969c0848ec2c4f0d9b938d8ed6b","scripts":{"dev":"next dev","lint":"next lint","build":"rm -rf dist && tsc && cp -r src/styles dist/styles && cp -r src/components dist/components && cp -r src/api dist/api && cp src/index.ts dist/index.js && cp src/index.ts dist/index.d.ts && find dist -name '*.tsx' -exec sh -c 'mv \"$1\" \"${1%.tsx}.js\"' _ {} \\;","start":"next start","prepublishOnly":"npm run build"},"_npmUser":{"name":"zhalyn","email":"zhalyn@paid.ai"},"repository":{"url":"git+https://github.com/AgentPaid/paid-nextjs-client.git","type":"git"},"_npmVersion":"11.3.0","description":"Official NextJS Component SDK for the Paid.ai APIs.","directories":{},"_nodeVersion":"22.14.0","dependencies":{"next":"14.1.0","react":"^18.2.0","react-dom":"^18.2.0"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^8.56.0","@eslint/js":"^8.56.0","typescript":"~5.3.3","@types/node":"^20","@types/react":"^18.2.55","@types/react-dom":"^18.2.19","eslint-config-next":"14.1.0","eslint-plugin-react-hooks":"^4.6.0"},"peerDependencies":{"next":"^14.1.0","react":"^18.2.0","react-dom":"^18.2.0"},"_npmOperationalInternal":{"tmp":"tmp/paid-nextjs-client_0.1.1_1747639508098_0.8016065086908761","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@agentpaid/paid-nextjs-client","version":"0.2.1","author":"","license":"ISC","_id":"@agentpaid/paid-nextjs-client@0.2.1","maintainers":[{"name":"rdosanjh","email":"rdosanjh73@gmail.com"},{"name":"georgi-paid","email":"georgi@paid.ai"},{"name":"zhalyn","email":"zhalyn@paid.ai"}],"homepage":"https://github.com/AgentPaid/paid-nextjs-client#readme","bugs":{"url":"https://github.com/AgentPaid/paid-nextjs-client/issues"},"dist":{"shasum":"7d737b2664e53ddca2d8d4d410ceab517495fa4b","tarball":"https://registry.npmjs.org/@agentpaid/paid-nextjs-client/-/paid-nextjs-client-0.2.1.tgz","fileCount":23,"integrity":"sha512-GVkA/5dvf9oPl05Mc4IT3RPoWw2Z+oc+/MPx/lzzLAe8bpuNkazsQy9ERk2oTPDflcGMpYsSew5wllnisPmTTw==","signatures":[{"sig":"MEUCIH27XCBezO6ucBzzY8mMZinLLnJxWSgSMGYcQO0zbwA3AiEA8cVThfUwB1SWc3NdN0HtIu6Z457J0E9MK8rgqjSWNQ0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":68177},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","gitHead":"55005929896815451482ce48e4c4067a306ad8c9","scripts":{"dev":"next dev","lint":"next lint","build":"rm -rf dist && tsc && cp -r src/styles dist/styles && cp -r src/components dist/components && cp -r src/api dist/api && cp src/index.ts dist/index.js && cp src/index.ts dist/index.d.ts && find dist -name '*.tsx' -exec sh -c 'mv \"$1\" \"${1%.tsx}.js\"' _ {} \\;","start":"next start","prepublishOnly":"npm run build"},"_npmUser":{"name":"zhalyn","email":"zhalyn@paid.ai"},"repository":{"url":"git+https://github.com/AgentPaid/paid-nextjs-client.git","type":"git"},"_npmVersion":"11.3.0","description":"Official NextJS Component SDK for the Paid.ai APIs.","directories":{},"_nodeVersion":"22.14.0","dependencies":{"next":"14.1.0","react":"^18.2.0","react-dom":"^18.2.0"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^8.56.0","@eslint/js":"^8.56.0","typescript":"~5.3.3","@types/node":"^20","@types/react":"^18.2.55","@types/react-dom":"^18.2.19","eslint-config-next":"14.1.0","eslint-plugin-react-hooks":"^4.6.0"},"peerDependencies":{"next":"^14.1.0","react":"^18.2.0","react-dom":"^18.2.0"},"_npmOperationalInternal":{"tmp":"tmp/paid-nextjs-client_0.2.1_1747910174002_0.09427577582466573","host":"s3://npm-registry-packages-npm-production"}},"0.3.0-test.1":{"name":"@agentpaid/paid-nextjs-client","version":"0.3.0-test.1","author":"","license":"ISC","_id":"@agentpaid/paid-nextjs-client@0.3.0-test.1","maintainers":[{"name":"rdosanjh","email":"rdosanjh73@gmail.com"},{"name":"georgi-paid","email":"georgi@paid.ai"},{"name":"zhalyn","email":"zhalyn@paid.ai"}],"homepage":"https://github.com/AgentPaid/paid-nextjs-client#readme","bugs":{"url":"https://github.com/AgentPaid/paid-nextjs-client/issues"},"dist":{"shasum":"0b39641bccda4da681498548505e6dd916026d4a","tarball":"https://registry.npmjs.org/@agentpaid/paid-nextjs-client/-/paid-nextjs-client-0.3.0-test.1.tgz","fileCount":64,"integrity":"sha512-tlaFW1Rde+zbRWTf4M5ckIxSz//wNhRG1bsFMasugNytUGy07CyEiMcC8JhHBgYV+1bjliQXkoe8m7W/SHvaPw==","signatures":[{"sig":"MEQCIDVmfK64nIrXK/W4xz5WjfUxhQi0cHRUDzYPcxhSYLFeAiA49OvoUZqXdnXsZVDsbENWZzZaqCBHlvWxC6C65EiLpg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":188131},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","gitHead":"55005929896815451482ce48e4c4067a306ad8c9","scripts":{"dev":"next dev","lint":"next lint","build":"rm -rf dist && tsc && cp -r src/styles dist/styles && cp -r src/components dist/components && cp -r src/api dist/api && cp src/index.ts dist/index.js && cp src/index.ts dist/index.d.ts && find dist -name '*.tsx' -exec sh -c 'mv \"$1\" \"${1%.tsx}.js\"' _ {} \\;","start":"next start","prepublishOnly":"npm run build"},"_npmUser":{"name":"zhalyn","email":"zhalyn@paid.ai"},"repository":{"url":"git+https://github.com/AgentPaid/paid-nextjs-client.git","type":"git"},"_npmVersion":"11.3.0","description":"Official NextJS Component SDK for the Paid.ai APIs.","directories":{},"_nodeVersion":"22.14.0","dependencies":{"next":"^14.1.0","react":"^18.2.0","react-dom":"^18.2.0","react-pdf":"^9.2.1","lucide-react":"^0.513.0","tailwind-merge":"^3.3.0","@radix-ui/react-dialog":"^1.1.14","@react-pdf-viewer/core":"^3.12.0","@react-pdf-viewer/default-layout":"^3.12.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^8.56.0","@eslint/js":"^8.56.0","typescript":"~5.3.3","@types/node":"^20","@types/react":"^18.2.55","@types/react-dom":"^18.2.19","eslint-config-next":"14.1.0","eslint-plugin-react-hooks":"^4.6.0"},"peerDependencies":{"next":"^14.1.0","react":"^18.2.0","react-dom":"^18.2.0"},"_npmOperationalInternal":{"tmp":"tmp/paid-nextjs-client_0.3.0-test.1_1749215657941_0.8173449759984848","host":"s3://npm-registry-packages-npm-production"}},"0.3.0-test.2":{"name":"@agentpaid/paid-nextjs-client","version":"0.3.0-test.2","author":"","license":"ISC","_id":"@agentpaid/paid-nextjs-client@0.3.0-test.2","maintainers":[{"name":"rdosanjh","email":"rdosanjh73@gmail.com"},{"name":"georgi-paid","email":"georgi@paid.ai"},{"name":"zhalyn","email":"zhalyn@paid.ai"}],"homepage":"https://github.com/AgentPaid/paid-nextjs-client#readme","bugs":{"url":"https://github.com/AgentPaid/paid-nextjs-client/issues"},"dist":{"shasum":"0d7b6f78428765522103ce7695f686bc45d577eb","tarball":"https://registry.npmjs.org/@agentpaid/paid-nextjs-client/-/paid-nextjs-client-0.3.0-test.2.tgz","fileCount":64,"integrity":"sha512-WZH+qoFFipLrHpnQIqS5sdeyO1I/Gly4914RnIMze29PV6zxYsnRMpB1lbpzay324gE1XDPpOYB2JxN7RMHRSA==","signatures":[{"sig":"MEYCIQDI8JqqcdOMv3N5VuzDxgtOjNkqwZDMjE+JXIRobLp0OAIhAPjGPETN9IYTeeXPkoDP3Sob+9W+4+/4zmf+nZol4QFt","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":188548},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","gitHead":"55005929896815451482ce48e4c4067a306ad8c9","scripts":{"dev":"next dev","lint":"next lint","build":"rm -rf dist && tsc && cp -r src/styles dist/styles && cp -r src/components dist/components && cp -r src/api dist/api && cp src/index.ts dist/index.js && cp src/index.ts dist/index.d.ts && find dist -name '*.tsx' -exec sh -c 'mv \"$1\" \"${1%.tsx}.js\"' _ {} \\;","start":"next start","prepublishOnly":"npm run build"},"_npmUser":{"name":"zhalyn","email":"zhalyn@paid.ai"},"repository":{"url":"git+https://github.com/AgentPaid/paid-nextjs-client.git","type":"git"},"_npmVersion":"11.3.0","description":"Official NextJS Component SDK for the Paid.ai APIs.","directories":{},"_nodeVersion":"22.14.0","dependencies":{"next":"^14.1.0","react":"^18.2.0","react-dom":"^18.2.0","react-pdf":"^9.2.1","lucide-react":"^0.513.0","tailwind-merge":"^3.3.0","@radix-ui/react-dialog":"^1.1.14","@react-pdf-viewer/core":"^3.12.0","@react-pdf-viewer/default-layout":"^3.12.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"eslint":"^8.56.0","@eslint/js":"^8.56.0","typescript":"~5.3.3","@types/node":"^20","@types/react":"^18.2.55","@types/react-dom":"^18.2.19","eslint-config-next":"14.1.0","eslint-plugin-react-hooks":"^4.6.0"},"peerDependencies":{"next":"^14.1.0","react":"^18.2.0","react-dom":"^18.2.0"},"_npmOperationalInternal":{"tmp":"tmp/paid-nextjs-client_0.3.0-test.2_1749216684425_0.9893618797484496","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"@agentpaid/paid-nextjs-client","version":"0.3.0","author":"","license":"ISC","_id":"@agentpaid/paid-nextjs-client@0.3.0","maintainers":[{"name":"rdosanjh","email":"rdosanjh73@gmail.com"},{"name":"georgi-paid","email":"georgi@paid.ai"},{"name":"zhalyn","email":"zhalyn@paid.ai"}],"homepage":"https://github.com/AgentPaid/paid-nextjs-client#readme","bugs":{"url":"https://github.com/AgentPaid/paid-nextjs-client/issues"},"dist":{"shasum":"541074fdad37b4f051cb4472b457cb44335a3df2","tarball":"https://registry.npmjs.org/@agentpaid/paid-nextjs-client/-/paid-nextjs-client-0.3.0.tgz","fileCount":69,"integrity":"sha512-WtfzVcFhn+F1e8yPPWcmgtyY5f9UXlW7RNBImUM9b5bamW2dKVUMcFJ55LeD1lusxws9ZNIdkKkFPb6sbeZZ1A==","signatures":[{"sig":"MEYCIQCdM7OsBmuKlVeDip0ydNAuINQO925FJOI2hdEjqy0JiwIhAJk1C2G/9OkKPQ3tWkR9Xitf1dFM3tjHFVeasqW47G0a","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":217087},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","gitHead":"1c81a162b272cc3ccd9a50c1c13b282874fba63b","scripts":{"dev":"next dev","lint":"next lint","build":"rm -rf dist && tsc && cp -r src/styles dist/styles && cp -r src/components dist/components && cp -r src/api dist/api && cp src/index.ts dist/index.js && cp src/index.ts dist/index.d.ts && find dist -name '*.tsx' -exec sh -c 'mv \"$1\" \"${1%.tsx}.js\"' _ {} \\;","start":"next start","prepublishOnly":"npm run build"},"_npmUser":{"name":"zhalyn","email":"zhalyn@paid.ai"},"repository":{"url":"git+https://github.com/AgentPaid/paid-nextjs-client.git","type":"git"},"_npmVersion":"11.3.0","description":"Official NextJS Component SDK for the Paid.ai APIs.","directories":{},"_nodeVersion":"22.14.0","dependencies":{"next":"^14.1.0","react":"^18.2.0","react-dom":"^18.2.0","react-pdf":"^9.2.1","lucide-react":"^0.513.0","tailwind-merge":"^3.3.0","@radix-ui/react-dialog":"^1.1.14","@react-pdf-viewer/core":"^3.12.0","@react-pdf-viewer/default-layout":"^3.12.0"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^8.56.0","@eslint/js":"^8.56.0","typescript":"~5.3.3","@types/node":"^20","@types/react":"^18.2.55","@types/react-dom":"^18.2.19","eslint-config-next":"14.1.0","eslint-plugin-react-hooks":"^4.6.0"},"peerDependencies":{"next":"^14.1.0","react":"^18.2.0","react-dom":"^18.2.0"},"_npmOperationalInternal":{"tmp":"tmp/paid-nextjs-client_0.3.0_1749549477002_0.0698509163149934","host":"s3://npm-registry-packages-npm-production"}},"0.3.1":{"name":"@agentpaid/paid-nextjs-client","version":"0.3.1","description":"Official NextJS Component SDK for the Paid.ai APIs.","homepage":"https://github.com/AgentPaid/paid-nextjs-client#readme","bugs":{"url":"https://github.com/AgentPaid/paid-nextjs-client/issues"},"repository":{"type":"git","url":"git+https://github.com/AgentPaid/paid-nextjs-client.git"},"license":"ISC","author":"","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","scripts":{"dev":"next dev","build":"rm -rf dist && tsc && cp -r src/styles dist/styles && cp -r src/components dist/components && cp -r src/api dist/api && cp src/index.ts dist/index.js && cp src/index.ts dist/index.d.ts && find dist -name '*.tsx' -exec sh -c 'mv \"$1\" \"${1%.tsx}.js\"' _ {} \\;","prepublishOnly":"npm run build","start":"next start","lint":"next lint"},"dependencies":{"@radix-ui/react-dialog":"^1.1.14","@react-pdf-viewer/core":"^3.12.0","@react-pdf-viewer/default-layout":"^3.12.0","lucide-react":"^0.513.0","next":"^14.1.0","react":"^18.2.0","react-dom":"^18.2.0","react-pdf":"^9.2.1","tailwind-merge":"^3.3.0"},"devDependencies":{"@eslint/js":"^8.56.0","@types/node":"^20","@types/react":"^18.2.55","@types/react-dom":"^18.2.19","eslint":"^8.56.0","eslint-config-next":"14.1.0","eslint-plugin-react-hooks":"^4.6.0","typescript":"~5.3.3"},"peerDependencies":{"next":"^14.1.0","react":"^18.2.0","react-dom":"^18.2.0"},"_id":"@agentpaid/paid-nextjs-client@0.3.1","gitHead":"b48b5ffa1375b398fd1605084ae4bcc9757c1cc3","_nodeVersion":"22.14.0","_npmVersion":"11.3.0","dist":{"integrity":"sha512-YTj9wtAYjfrIYKIto29JfkF/p2vvlRnMvNO3fRqK5Jxoa2joCf1BIEAjCIBY8REQ3EunAEqn5MVrbER4yq9+xA==","shasum":"fd1091797f1af83d143bf7e3db42676dd9ef06cf","tarball":"https://registry.npmjs.org/@agentpaid/paid-nextjs-client/-/paid-nextjs-client-0.3.1.tgz","fileCount":58,"unpackedSize":209901,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCICQ4BWcJrEeZoOl4sVqVSsTdB2QVC7Ik4Vg2+YE3mjMGAiBOiorYVJzDAuPDmA/xKv30eRHGSOaH5vt12QUt3gtoaQ=="}]},"_npmUser":{"name":"zhalyn","email":"zhalyn@paid.ai","actor":{"name":"zhalyn","email":"zhalyn@paid.ai","type":"user"}},"directories":{},"maintainers":[{"name":"rdosanjh","email":"rdosanjh73@gmail.com"},{"name":"georgi-paid","email":"georgi@paid.ai"},{"name":"zhalyn","email":"zhalyn@paid.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/paid-nextjs-client_0.3.1_1750398078868_0.9721659329811247"},"_hasShrinkwrap":false}},"time":{"created":"2025-05-16T06:59:58.185Z","modified":"2025-06-20T05:41:19.250Z","0.1.0-test.1":"2025-05-16T06:59:58.420Z","0.1.0-test.2":"2025-05-16T07:13:23.902Z","0.1.0-test.3":"2025-05-16T07:17:27.435Z","0.1.0-test.4":"2025-05-16T07:28:23.175Z","0.1.0-test.5":"2025-05-16T07:33:17.972Z","0.1.0-test.6":"2025-05-16T08:55:29.279Z","0.1.0":"2025-05-16T09:11:17.887Z","0.1.1":"2025-05-19T07:25:08.251Z","0.2.0":"2025-05-22T05:55:25.909Z","0.2.1":"2025-05-22T10:36:14.195Z","0.3.0-test.1":"2025-06-06T13:14:18.115Z","0.3.0-test.2":"2025-06-06T13:31:24.620Z","0.3.0":"2025-06-10T09:57:57.202Z","0.3.1":"2025-06-20T05:41:19.048Z"},"bugs":{"url":"https://github.com/AgentPaid/paid-nextjs-client/issues"},"license":"ISC","homepage":"https://github.com/AgentPaid/paid-nextjs-client#readme","repository":{"type":"git","url":"git+https://github.com/AgentPaid/paid-nextjs-client.git"},"description":"Official NextJS Component SDK for the Paid.ai APIs.","maintainers":[{"name":"rdosanjh","email":"rdosanjh73@gmail.com"},{"name":"georgi-paid","email":"georgi@paid.ai"},{"name":"zhalyn","email":"zhalyn@paid.ai"}],"readme":"# Paid.ai Blocks\n \nEasily embed Paid.ai blocks in your Next.js app to display payments, invoices, and activity logs for specific customers.\n\n## Quick Setup\n\n1. **Install**: `npm install @agentpaid/paid-nextjs-client`\n2. **Add API key**: Set `PAID_API_KEY` in your `.env.local`\n3. **Create one API route**: `src/app/api/[paidEndpoint]/[...params]/route.ts`\n4. **Use components**: Import and use `PaidContainer` or individual blocks\n\nThat's it! No complex configuration needed.\n\n---\n\n## Installation\n\n```bash\nnpm install @agentpaid/paid-nextjs-client\n# or\nyarn add @agentpaid/paid-nextjs-client\n```\n\n---\n\n## Blocks\n\n### PaidContainer (Recommended)\n\nThe `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.\n\n```tsx\nimport { \n PaidContainer, \n PaidActivityLog, \n PaidInvoiceTable, \n PaidPaymentsTable \n} from '@agentpaid/paid-nextjs-client';\n\n\n },\n {\n id: 'invoices', \n label: 'Invoices',\n component: \n },\n {\n id: 'activity-log',\n label: 'Activity Log', \n component: \n }\n ]}\n paidStyle={{\n fontFamily: 'Inter',\n primaryColor: '#1f2937',\n containerBackgroundColor: '#f8fafc',\n buttonBgColor: '#3b82f6'\n }}\n/>\n```\n\n### Individual Blocks\n\nFor more granular control, you can use individual blocks:\n\n```tsx\nimport { \n PaidPaymentsTable, \n PaidInvoiceTable, \n PaidActivityLog \n} from '@agentpaid/paid-nextjs-client';\n\n// Payments only\n\n\n// Invoices only \n\n\n// Activity log only\n\n```\n\n---\n\n## API Routes Setup\n\nYou need to create a single API route to handle all Paid.ai endpoints. **First, add your Paid.ai API key to `.env.local`:**\n\n```env\nPAID_API_KEY=your_paid_ai_api_key_here\n```\n\n### Single Unified API Route\n\nCreate one API route that handles all four endpoints:\n\n```bash\nmkdir -p \"src/app/api/[paidEndpoint]/[...params]\" && touch \"src/app/api/[paidEndpoint]/[...params]/route.ts\"\n```\n\nAdd to `src/app/api/[paidEndpoint]/[...params]/route.ts`:\n```ts\nimport { handleBlocks } from '@agentpaid/paid-nextjs-client';\n\nexport const GET = handleBlocks();\n```\n\n---\n\n## Complete Example\n\n```tsx\nimport { \n PaidContainer,\n PaidActivityLog,\n PaidInvoiceTable,\n PaidPaymentsTable\n} from '@agentpaid/paid-nextjs-client';\n\nexport default function CustomerDashboard() {\n return (\n
\n

Customer Dashboard

\n\n
\n

Welcome back!

\n

Here's a complete overview for customer customer_123.

\n
\n\n \n },\n {\n id: 'invoices',\n label: 'Invoices', \n component: \n },\n {\n id: 'activity-log',\n label: 'Activity Log',\n component: \n }\n ]}\n paidStyle={{\n // Global styling\n fontFamily: 'Inter, sans-serif',\n primaryColor: '#1f2937',\n secondaryColor: '#6b7280',\n \n // Container & backgrounds\n containerBackgroundColor: '#f8fafc',\n tableBackgroundColor: '#ffffff',\n tableHeaderBackgroundColor: '#f1f5f9',\n \n // Tabs\n tabBackgroundColor: '#e2e8f0',\n tabActiveBackgroundColor: '#3b82f6',\n tabHoverBackgroundColor: '#cbd5e1',\n \n // Interactive elements\n tableHoverColor: '#f1f5f9',\n buttonBgColor: '#3b82f6'\n }}\n />\n\n
\n

Need help? Visit our support center.

\n
\n
\n );\n}\n```\n\n---\n\n## Styling System\n\nThe Paid.ai blocks use a simplified, universal styling system. All blocks accept a `paidStyle` prop with the following properties:\n\n### Universal Style Properties\n\n| Property | Description | Default |\n|----------|-------------|---------|\n| `fontFamily` | Global font family for all text | `'Roboto'` |\n| `primaryColor` | Primary text color | `'#374151'` |\n| `secondaryColor` | Secondary text color | `'#6b7280'` |\n| `containerBackgroundColor` | Main container background | `'#f8f9fa'` |\n| `tableBackgroundColor` | Table body background | `'#ffffff'` |\n| `tableHeaderBackgroundColor` | Table header background | `'#f9fafb'` |\n| `tabBackgroundColor` | Tab background (PaidContainer only) | `'#e2e8f0'` |\n| `tabActiveBackgroundColor` | Active tab background | `'#3b82f6'` |\n| `tabHoverBackgroundColor` | Tab hover background | `'#cbd5e1'` |\n| `tableHoverColor` | Table row hover background | `'#f3f4f6'` |\n| `buttonBgColor` | Background for buttons, status badges, and pagination | `'#ffffff'` |\n\n### Styling Inheritance\n\n- **PaidContainer**: Styles applied here automatically inherit to all child blocks\n- **Individual Blocks**: Can override inherited styles or define their own when used standalone\n- **Flexible**: Mix and match - style globally via PaidContainer or individually per block\n\n### Example: Dark Theme\n\n```tsx\n\n }\n ]}\n paidStyle={{\n fontFamily: 'Inter',\n primaryColor: '#f9fafb',\n secondaryColor: '#d1d5db',\n containerBackgroundColor: '#1f2937',\n tableBackgroundColor: '#374151',\n tableHeaderBackgroundColor: '#4b5563',\n tabBackgroundColor: '#4b5563',\n tabActiveBackgroundColor: '#3b82f6',\n tabHoverBackgroundColor: '#6b7280',\n tableHoverColor: '#4b5563',\n buttonBgColor: '#6b7280'\n }}\n/>\n```\n\n### Example: Individual Block Styling\n\n```tsx\n\n```","readmeFilename":"README.md"}