@agentpaid/paid-nextjs-client 0.3.0-test.1 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +246 -72
- package/dist/components/PaidActivityLog.d.ts +11 -24
- package/dist/components/PaidActivityLog.d.ts.map +1 -1
- package/dist/components/PaidActivityLog.js +53 -26
- package/dist/components/PaidActivityLog.js.map +1 -1
- package/dist/components/PaidContainer.d.ts +11 -24
- package/dist/components/PaidContainer.d.ts.map +1 -1
- package/dist/components/PaidContainer.js +18 -9
- package/dist/components/PaidContainer.js.map +1 -1
- package/dist/components/PaidInvoiceTable.d.ts +11 -24
- package/dist/components/PaidInvoiceTable.d.ts.map +1 -1
- package/dist/components/PaidInvoiceTable.js +57 -30
- package/dist/components/PaidInvoiceTable.js.map +1 -1
- package/dist/components/PaidPaymentsTable.d.ts +11 -24
- package/dist/components/PaidPaymentsTable.d.ts.map +1 -1
- package/dist/components/PaidPaymentsTable.js +58 -28
- package/dist/components/PaidPaymentsTable.js.map +1 -1
- package/dist/components/components/PaidActivityLog.js +98 -57
- package/dist/components/components/PaidContainer.js +42 -32
- package/dist/components/components/PaidInvoiceTable.js +103 -86
- package/dist/components/components/PaidPaymentsTable.js +107 -69
- package/dist/components/components/ui/Pagination.js +168 -0
- package/dist/components/ui/Pagination.d.ts +10 -0
- package/dist/components/ui/Pagination.d.ts.map +1 -0
- package/dist/components/ui/Pagination.js +111 -0
- package/dist/components/ui/Pagination.js.map +1 -0
- package/dist/index.d.ts +3 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +3 -1
- package/dist/index.js.map +1 -1
- package/dist/styles/activity-log-table.css +94 -78
- package/dist/styles/paid-container.css +25 -16
- package/dist/styles/paid-invoice-table.css +135 -120
- package/dist/styles/paid-payments-table.css +65 -109
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/utils/cache.js +1 -1
- package/dist/utils/cache.js.map +1 -1
- package/package.json +1 -1
@@ -3,40 +3,39 @@
|
|
3
3
|
import React, { useEffect, useState } from 'react';
|
4
4
|
import { useIsInContainer } from './PaidContainer';
|
5
5
|
import { cachedFetch, getCacheKey, CACHE_TTL } from '../utils/cache';
|
6
|
+
import { Pagination } from './ui/Pagination';
|
6
7
|
import '../styles/paid-payments-table.css';
|
7
8
|
|
8
9
|
interface PaidStyleProperties {
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
paidThBg?: string;
|
32
|
-
paidRowHoverBg?: string;
|
10
|
+
// Global - Font
|
11
|
+
fontFamily?: string;
|
12
|
+
|
13
|
+
// Global - Font Colors
|
14
|
+
primaryColor?: string;
|
15
|
+
secondaryColor?: string;
|
16
|
+
|
17
|
+
// Background Colors
|
18
|
+
containerBackgroundColor?: string;
|
19
|
+
tableBackgroundColor?: string;
|
20
|
+
tableHeaderBackgroundColor?: string;
|
21
|
+
|
22
|
+
// Tab Colors
|
23
|
+
tabBackgroundColor?: string;
|
24
|
+
tabActiveBackgroundColor?: string;
|
25
|
+
tabHoverBackgroundColor?: string;
|
26
|
+
|
27
|
+
// Table Hover
|
28
|
+
tableHoverColor?: string;
|
29
|
+
|
30
|
+
// Button Background (Status badges & Pagination)
|
31
|
+
buttonBgColor?: string;
|
33
32
|
}
|
34
33
|
|
35
34
|
interface Payment {
|
36
35
|
id: string;
|
37
36
|
paymentType: string;
|
38
37
|
paymentDate: string;
|
39
|
-
|
38
|
+
paymentStatus: string;
|
40
39
|
amount: number;
|
41
40
|
currency: string;
|
42
41
|
}
|
@@ -57,29 +56,69 @@ export const PaidPaymentsTable: React.FC<PaidPaymentsTableProps> = ({
|
|
57
56
|
const [payments, setPayments] = useState<Payment[]>([]);
|
58
57
|
const [loading, setLoading] = useState(true);
|
59
58
|
const [error, setError] = useState<string | null>(null);
|
59
|
+
const [currentPage, setCurrentPage] = useState(1);
|
60
|
+
const itemsPerPage = 8;
|
60
61
|
const isInContainer = useIsInContainer();
|
61
62
|
|
63
|
+
// Calculate pagination
|
64
|
+
const totalPages = Math.ceil(payments.length / itemsPerPage);
|
65
|
+
const startIndex = (currentPage - 1) * itemsPerPage;
|
66
|
+
const endIndex = startIndex + itemsPerPage;
|
67
|
+
const currentPayments = payments.slice(startIndex, endIndex);
|
68
|
+
|
69
|
+
const handlePageChange = (page: number) => {
|
70
|
+
setCurrentPage(page);
|
71
|
+
};
|
72
|
+
|
62
73
|
// Convert paidStyle entries into CSS custom properties
|
63
74
|
const cssVariables: React.CSSProperties = Object.entries(paidStyle).reduce((vars, [key, value]) => {
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
75
|
+
if (value !== undefined && value !== null && value !== '') {
|
76
|
+
// Map simplified properties to CSS custom properties
|
77
|
+
const propertyMap: Record<string, string> = {
|
78
|
+
fontFamily: '--paid-font-family',
|
79
|
+
primaryColor: '--paid-primary-color',
|
80
|
+
secondaryColor: '--paid-secondary-color',
|
81
|
+
containerBackgroundColor: '--paid-container-background-color',
|
82
|
+
tableBackgroundColor: '--paid-table-background-color',
|
83
|
+
tableHeaderBackgroundColor: '--paid-table-header-background-color',
|
84
|
+
tabBackgroundColor: '--paid-tab-background-color',
|
85
|
+
tabActiveBackgroundColor: '--paid-tab-active-background-color',
|
86
|
+
tabHoverBackgroundColor: '--paid-tab-hover-background-color',
|
87
|
+
tableHoverColor: '--paid-table-hover-color',
|
88
|
+
buttonBgColor: '--paid-button-bg-color'
|
89
|
+
};
|
90
|
+
|
91
|
+
const cssProperty = propertyMap[key];
|
92
|
+
if (cssProperty) {
|
93
|
+
// @ts-ignore allow custom property
|
94
|
+
vars[cssProperty] = value;
|
95
|
+
}
|
70
96
|
}
|
71
|
-
|
72
|
-
vars[varName] = value;
|
97
|
+
|
73
98
|
return vars;
|
74
99
|
}, {} as React.CSSProperties);
|
75
100
|
|
76
|
-
const formatCurrency = (amount: number) => {
|
101
|
+
const formatCurrency = (amount: number, currency: string) => {
|
102
|
+
const symbol = getCurrencySymbol(currency);
|
77
103
|
return new Intl.NumberFormat("en-US", {
|
78
104
|
style: "currency",
|
79
105
|
currency: "USD",
|
80
|
-
minimumFractionDigits:
|
81
|
-
maximumFractionDigits:
|
82
|
-
}).format(amount / 100);
|
106
|
+
minimumFractionDigits: 2,
|
107
|
+
maximumFractionDigits: 2,
|
108
|
+
}).format(amount / 100).replace('$', symbol);
|
109
|
+
};
|
110
|
+
|
111
|
+
const getCurrencySymbol = (currency: string) => {
|
112
|
+
switch (currency.toUpperCase()) {
|
113
|
+
case 'USD':
|
114
|
+
return '$';
|
115
|
+
case 'EUR':
|
116
|
+
return '€';
|
117
|
+
case 'GBP':
|
118
|
+
return '£';
|
119
|
+
default:
|
120
|
+
return '$'; // Default to USD symbol
|
121
|
+
}
|
83
122
|
};
|
84
123
|
|
85
124
|
const formatDate = (dateString: string) => {
|
@@ -91,6 +130,11 @@ export const PaidPaymentsTable: React.FC<PaidPaymentsTableProps> = ({
|
|
91
130
|
};
|
92
131
|
|
93
132
|
const getStatusBadge = (status: string) => {
|
133
|
+
// Handle undefined/null status
|
134
|
+
if (!status) {
|
135
|
+
return <span className="paid-payment-status">Unknown</span>;
|
136
|
+
}
|
137
|
+
|
94
138
|
const statusClass = `paid-payment-status paid-payment-status-${status.toLowerCase()}`;
|
95
139
|
const displayStatus = status.charAt(0).toUpperCase() + status.slice(1).toLowerCase();
|
96
140
|
return <span className={statusClass}>{displayStatus}</span>;
|
@@ -102,21 +146,14 @@ export const PaidPaymentsTable: React.FC<PaidPaymentsTableProps> = ({
|
|
102
146
|
setLoading(true);
|
103
147
|
console.log('PaidPaymentsTable: Fetching payment data for', accountExternalId);
|
104
148
|
|
105
|
-
//
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
// Direct fetch without caching
|
115
|
-
const response = await fetch(`/api/payments/${accountExternalId}`);
|
116
|
-
if (!response.ok) {
|
117
|
-
throw new Error(`Failed to fetch: ${response.statusText}`);
|
118
|
-
}
|
119
|
-
const data = await response.json();
|
149
|
+
// Use cached fetch for payment data
|
150
|
+
const cacheKey = getCacheKey.payments(accountExternalId);
|
151
|
+
console.log('PaidPaymentsTable: Using cache key', cacheKey);
|
152
|
+
const data = await cachedFetch<PaymentApiResponse>(
|
153
|
+
`/api/payments/${accountExternalId}`,
|
154
|
+
cacheKey,
|
155
|
+
CACHE_TTL.DATA
|
156
|
+
);
|
120
157
|
|
121
158
|
console.log('PaidPaymentsTable: Received data', data);
|
122
159
|
setPayments(data.data || []);
|
@@ -156,58 +193,59 @@ export const PaidPaymentsTable: React.FC<PaidPaymentsTableProps> = ({
|
|
156
193
|
|
157
194
|
return (
|
158
195
|
<div className="paid-payment-container" style={{ position: 'relative', minWidth: 0, ...cssVariables }}>
|
159
|
-
<div className="paid-payment-table-wrapper" style={{ position: '
|
196
|
+
<div className="paid-payment-table-wrapper" style={{ position: 'relative', width: '100%', height: 'auto', left: undefined, top: undefined, boxShadow: undefined, cursor: undefined }}>
|
160
197
|
{!isInContainer && (
|
161
198
|
<div className="paid-payment-header">
|
162
199
|
<h3 className="paid-payment-title">Payments</h3>
|
163
200
|
</div>
|
164
201
|
)}
|
165
|
-
<div style={{ background: '#fff', overflow: 'auto' }}>
|
166
|
-
<table className="paid-payment-table">
|
202
|
+
<div style={{ background: '#fff', overflow: 'auto', width: '100%', boxSizing: 'border-box' }}>
|
203
|
+
<table className="paid-payment-table" style={{ width: '100%', maxWidth: '100%', tableLayout: 'fixed' }}>
|
167
204
|
<thead>
|
168
205
|
<tr>
|
169
206
|
<th>Payment Number</th>
|
170
207
|
<th>Payment type</th>
|
171
208
|
<th>Due date</th>
|
172
209
|
<th>Status</th>
|
173
|
-
<th style={{ textAlign: '
|
174
|
-
<th></th>
|
210
|
+
<th style={{ textAlign: 'center' }}>Amount</th>
|
175
211
|
</tr>
|
176
212
|
</thead>
|
177
213
|
<tbody>
|
178
|
-
{
|
214
|
+
{currentPayments.length === 0 ? (
|
179
215
|
<tr>
|
180
|
-
<td colSpan={
|
216
|
+
<td colSpan={5} className="paid-payment-empty">
|
181
217
|
No payments found
|
182
218
|
</td>
|
183
219
|
</tr>
|
184
220
|
) : (
|
185
|
-
|
221
|
+
currentPayments.map((payment) => (
|
186
222
|
<tr key={payment.id}>
|
187
|
-
<td>
|
223
|
+
<td style={{ fontWeight: 500 }}>
|
188
224
|
<div className="paid-payment-number">
|
189
|
-
<span className="paid-payment-dollar">$</span>
|
190
225
|
<span>PAY-1</span>
|
191
226
|
</div>
|
192
227
|
</td>
|
193
228
|
<td>{payment.paymentType}</td>
|
194
229
|
<td>{formatDate(payment.paymentDate)}</td>
|
195
|
-
<td>{getStatusBadge(payment.
|
196
|
-
<td style={{ textAlign: '
|
230
|
+
<td>{getStatusBadge(payment.paymentStatus)}</td>
|
231
|
+
<td style={{ textAlign: 'center' }}>
|
197
232
|
<div className="paid-payment-amount">
|
198
|
-
<span>{formatCurrency(payment.amount)}</span>
|
199
|
-
<span className="paid-payment-dollar-right">$</span>
|
233
|
+
<span className="amount-number">{formatCurrency(payment.amount, payment.currency)}</span>
|
200
234
|
</div>
|
201
235
|
</td>
|
202
|
-
<td style={{ textAlign: 'center' }}>
|
203
|
-
<span className="paid-payment-currency">{payment.currency}</span>
|
204
|
-
</td>
|
205
236
|
</tr>
|
206
237
|
))
|
207
238
|
)}
|
208
239
|
</tbody>
|
209
240
|
</table>
|
210
241
|
</div>
|
242
|
+
|
243
|
+
{/* Pagination */}
|
244
|
+
<Pagination
|
245
|
+
currentPage={currentPage}
|
246
|
+
totalPages={totalPages}
|
247
|
+
onPageChange={handlePageChange}
|
248
|
+
/>
|
211
249
|
</div>
|
212
250
|
</div>
|
213
251
|
);
|
@@ -0,0 +1,168 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
|
3
|
+
interface PaginationProps {
|
4
|
+
currentPage: number;
|
5
|
+
totalPages: number;
|
6
|
+
onPageChange: (page: number) => void;
|
7
|
+
className?: string;
|
8
|
+
}
|
9
|
+
|
10
|
+
export const Pagination: React.FC<PaginationProps> = ({
|
11
|
+
currentPage,
|
12
|
+
totalPages,
|
13
|
+
onPageChange,
|
14
|
+
className = ''
|
15
|
+
}) => {
|
16
|
+
if (totalPages <= 1) return null;
|
17
|
+
|
18
|
+
const getVisiblePages = () => {
|
19
|
+
const pages: (number | string)[] = [];
|
20
|
+
const maxVisible = 5;
|
21
|
+
|
22
|
+
if (totalPages <= maxVisible) {
|
23
|
+
// Show all pages if total is small
|
24
|
+
for (let i = 1; i <= totalPages; i++) {
|
25
|
+
pages.push(i);
|
26
|
+
}
|
27
|
+
} else {
|
28
|
+
// Always show first page
|
29
|
+
pages.push(1);
|
30
|
+
|
31
|
+
if (currentPage > 3) {
|
32
|
+
pages.push('...');
|
33
|
+
}
|
34
|
+
|
35
|
+
// Show pages around current page
|
36
|
+
const start = Math.max(2, currentPage - 1);
|
37
|
+
const end = Math.min(totalPages - 1, currentPage + 1);
|
38
|
+
|
39
|
+
for (let i = start; i <= end; i++) {
|
40
|
+
if (i !== 1 && i !== totalPages) {
|
41
|
+
pages.push(i);
|
42
|
+
}
|
43
|
+
}
|
44
|
+
|
45
|
+
if (currentPage < totalPages - 2) {
|
46
|
+
pages.push('...');
|
47
|
+
}
|
48
|
+
|
49
|
+
// Always show last page
|
50
|
+
if (totalPages > 1) {
|
51
|
+
pages.push(totalPages);
|
52
|
+
}
|
53
|
+
}
|
54
|
+
|
55
|
+
return pages;
|
56
|
+
};
|
57
|
+
|
58
|
+
const visiblePages = getVisiblePages();
|
59
|
+
|
60
|
+
return (
|
61
|
+
<>
|
62
|
+
<style>{`
|
63
|
+
.paid-pagination-btn {
|
64
|
+
padding: 6px 12px;
|
65
|
+
border: 1px solid #E5E7EB;
|
66
|
+
background-color: var(--paid-button-bg-color, #FFFFFF) !important;
|
67
|
+
color: var(--paid-primary-color, #374151) !important;
|
68
|
+
border-radius: 6px;
|
69
|
+
cursor: pointer;
|
70
|
+
fontSize: 13px;
|
71
|
+
font-weight: 500;
|
72
|
+
transition: all 0.15s ease;
|
73
|
+
outline: none !important;
|
74
|
+
user-select: none;
|
75
|
+
-webkit-appearance: none !important;
|
76
|
+
-moz-appearance: none !important;
|
77
|
+
appearance: none !important;
|
78
|
+
box-shadow: none !important;
|
79
|
+
}
|
80
|
+
|
81
|
+
.paid-pagination-btn:hover:not(:disabled) {
|
82
|
+
filter: brightness(0.9) !important;
|
83
|
+
transform: translateY(-1px) !important;
|
84
|
+
background-color: var(--paid-button-bg-color, #FFFFFF) !important;
|
85
|
+
}
|
86
|
+
|
87
|
+
.paid-pagination-btn:active:not(:disabled) {
|
88
|
+
filter: brightness(0.8) !important;
|
89
|
+
transform: translateY(0px) !important;
|
90
|
+
background-color: var(--paid-button-bg-color, #FFFFFF) !important;
|
91
|
+
}
|
92
|
+
|
93
|
+
.paid-pagination-btn:focus:not(:disabled) {
|
94
|
+
filter: brightness(0.9) !important;
|
95
|
+
background-color: var(--paid-button-bg-color, #FFFFFF) !important;
|
96
|
+
box-shadow: none !important;
|
97
|
+
outline: none !important;
|
98
|
+
}
|
99
|
+
|
100
|
+
.paid-pagination-btn:disabled {
|
101
|
+
background-color: var(--paid-button-bg-color, #F9FAFB) !important;
|
102
|
+
color: #9CA3AF !important;
|
103
|
+
cursor: not-allowed;
|
104
|
+
opacity: 0.6;
|
105
|
+
}
|
106
|
+
|
107
|
+
.paid-pagination-btn.current-page {
|
108
|
+
background-color: #F3F4F6 !important;
|
109
|
+
color: var(--paid-primary-color, #111827) !important;
|
110
|
+
font-weight: 600;
|
111
|
+
}
|
112
|
+
|
113
|
+
.paid-pagination-btn.page-number {
|
114
|
+
padding: 6px 10px;
|
115
|
+
min-width: 32px;
|
116
|
+
}
|
117
|
+
`}</style>
|
118
|
+
<div className={`pagination-container ${className}`} style={{
|
119
|
+
display: 'flex',
|
120
|
+
alignItems: 'center',
|
121
|
+
justifyContent: 'flex-end',
|
122
|
+
gap: '6px',
|
123
|
+
padding: '16px 24px',
|
124
|
+
fontSize: '13px',
|
125
|
+
fontFamily: 'inherit',
|
126
|
+
width: '100%',
|
127
|
+
boxSizing: 'border-box'
|
128
|
+
}}>
|
129
|
+
<button
|
130
|
+
onClick={() => onPageChange(currentPage - 1)}
|
131
|
+
disabled={currentPage === 1}
|
132
|
+
className="paid-pagination-btn"
|
133
|
+
>
|
134
|
+
Previous
|
135
|
+
</button>
|
136
|
+
|
137
|
+
{visiblePages.map((page, index) => (
|
138
|
+
<React.Fragment key={index}>
|
139
|
+
{page === '...' ? (
|
140
|
+
<span style={{
|
141
|
+
padding: '6px 4px',
|
142
|
+
color: '#9CA3AF',
|
143
|
+
fontSize: '13px'
|
144
|
+
}}>
|
145
|
+
...
|
146
|
+
</span>
|
147
|
+
) : (
|
148
|
+
<button
|
149
|
+
onClick={() => onPageChange(page as number)}
|
150
|
+
className={`paid-pagination-btn page-number ${currentPage === page ? 'current-page' : ''}`}
|
151
|
+
>
|
152
|
+
{page}
|
153
|
+
</button>
|
154
|
+
)}
|
155
|
+
</React.Fragment>
|
156
|
+
))}
|
157
|
+
|
158
|
+
<button
|
159
|
+
onClick={() => onPageChange(currentPage + 1)}
|
160
|
+
disabled={currentPage === totalPages}
|
161
|
+
className="paid-pagination-btn"
|
162
|
+
>
|
163
|
+
Next
|
164
|
+
</button>
|
165
|
+
</div>
|
166
|
+
</>
|
167
|
+
);
|
168
|
+
};
|
@@ -0,0 +1,10 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
interface PaginationProps {
|
3
|
+
currentPage: number;
|
4
|
+
totalPages: number;
|
5
|
+
onPageChange: (page: number) => void;
|
6
|
+
className?: string;
|
7
|
+
}
|
8
|
+
export declare const Pagination: React.FC<PaginationProps>;
|
9
|
+
export {};
|
10
|
+
//# sourceMappingURL=Pagination.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/ui/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,eAAe;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA8JhD,CAAC"}
|
@@ -0,0 +1,111 @@
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
2
|
+
import React from 'react';
|
3
|
+
export const Pagination = ({ currentPage, totalPages, onPageChange, className = '' }) => {
|
4
|
+
if (totalPages <= 1)
|
5
|
+
return null;
|
6
|
+
const getVisiblePages = () => {
|
7
|
+
const pages = [];
|
8
|
+
const maxVisible = 5;
|
9
|
+
if (totalPages <= maxVisible) {
|
10
|
+
// Show all pages if total is small
|
11
|
+
for (let i = 1; i <= totalPages; i++) {
|
12
|
+
pages.push(i);
|
13
|
+
}
|
14
|
+
}
|
15
|
+
else {
|
16
|
+
// Always show first page
|
17
|
+
pages.push(1);
|
18
|
+
if (currentPage > 3) {
|
19
|
+
pages.push('...');
|
20
|
+
}
|
21
|
+
// Show pages around current page
|
22
|
+
const start = Math.max(2, currentPage - 1);
|
23
|
+
const end = Math.min(totalPages - 1, currentPage + 1);
|
24
|
+
for (let i = start; i <= end; i++) {
|
25
|
+
if (i !== 1 && i !== totalPages) {
|
26
|
+
pages.push(i);
|
27
|
+
}
|
28
|
+
}
|
29
|
+
if (currentPage < totalPages - 2) {
|
30
|
+
pages.push('...');
|
31
|
+
}
|
32
|
+
// Always show last page
|
33
|
+
if (totalPages > 1) {
|
34
|
+
pages.push(totalPages);
|
35
|
+
}
|
36
|
+
}
|
37
|
+
return pages;
|
38
|
+
};
|
39
|
+
const visiblePages = getVisiblePages();
|
40
|
+
return (_jsxs(_Fragment, { children: [_jsx("style", { children: `
|
41
|
+
.paid-pagination-btn {
|
42
|
+
padding: 6px 12px;
|
43
|
+
border: 1px solid #E5E7EB;
|
44
|
+
background-color: var(--paid-button-bg-color, #FFFFFF) !important;
|
45
|
+
color: var(--paid-primary-color, #374151) !important;
|
46
|
+
border-radius: 6px;
|
47
|
+
cursor: pointer;
|
48
|
+
fontSize: 13px;
|
49
|
+
font-weight: 500;
|
50
|
+
transition: all 0.15s ease;
|
51
|
+
outline: none !important;
|
52
|
+
user-select: none;
|
53
|
+
-webkit-appearance: none !important;
|
54
|
+
-moz-appearance: none !important;
|
55
|
+
appearance: none !important;
|
56
|
+
box-shadow: none !important;
|
57
|
+
}
|
58
|
+
|
59
|
+
.paid-pagination-btn:hover:not(:disabled) {
|
60
|
+
filter: brightness(0.9) !important;
|
61
|
+
transform: translateY(-1px) !important;
|
62
|
+
background-color: var(--paid-button-bg-color, #FFFFFF) !important;
|
63
|
+
}
|
64
|
+
|
65
|
+
.paid-pagination-btn:active:not(:disabled) {
|
66
|
+
filter: brightness(0.8) !important;
|
67
|
+
transform: translateY(0px) !important;
|
68
|
+
background-color: var(--paid-button-bg-color, #FFFFFF) !important;
|
69
|
+
}
|
70
|
+
|
71
|
+
.paid-pagination-btn:focus:not(:disabled) {
|
72
|
+
filter: brightness(0.9) !important;
|
73
|
+
background-color: var(--paid-button-bg-color, #FFFFFF) !important;
|
74
|
+
box-shadow: none !important;
|
75
|
+
outline: none !important;
|
76
|
+
}
|
77
|
+
|
78
|
+
.paid-pagination-btn:disabled {
|
79
|
+
background-color: var(--paid-button-bg-color, #F9FAFB) !important;
|
80
|
+
color: #9CA3AF !important;
|
81
|
+
cursor: not-allowed;
|
82
|
+
opacity: 0.6;
|
83
|
+
}
|
84
|
+
|
85
|
+
.paid-pagination-btn.current-page {
|
86
|
+
background-color: #F3F4F6 !important;
|
87
|
+
color: var(--paid-primary-color, #111827) !important;
|
88
|
+
font-weight: 600;
|
89
|
+
}
|
90
|
+
|
91
|
+
.paid-pagination-btn.page-number {
|
92
|
+
padding: 6px 10px;
|
93
|
+
min-width: 32px;
|
94
|
+
}
|
95
|
+
` }), _jsxs("div", { className: `pagination-container ${className}`, style: {
|
96
|
+
display: 'flex',
|
97
|
+
alignItems: 'center',
|
98
|
+
justifyContent: 'flex-end',
|
99
|
+
gap: '6px',
|
100
|
+
padding: '16px 24px',
|
101
|
+
fontSize: '13px',
|
102
|
+
fontFamily: 'inherit',
|
103
|
+
width: '100%',
|
104
|
+
boxSizing: 'border-box'
|
105
|
+
}, children: [_jsx("button", { onClick: () => onPageChange(currentPage - 1), disabled: currentPage === 1, className: "paid-pagination-btn", children: "Previous" }), visiblePages.map((page, index) => (_jsx(React.Fragment, { children: page === '...' ? (_jsx("span", { style: {
|
106
|
+
padding: '6px 4px',
|
107
|
+
color: '#9CA3AF',
|
108
|
+
fontSize: '13px'
|
109
|
+
}, children: "..." })) : (_jsx("button", { onClick: () => onPageChange(page), className: `paid-pagination-btn page-number ${currentPage === page ? 'current-page' : ''}`, children: page })) }, index))), _jsx("button", { onClick: () => onPageChange(currentPage + 1), disabled: currentPage === totalPages, className: "paid-pagination-btn", children: "Next" })] })] }));
|
110
|
+
};
|
111
|
+
//# sourceMappingURL=Pagination.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../../src/components/ui/Pagination.tsx"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
@@ -6,4 +6,6 @@ export { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '.
|
|
6
6
|
export { handlePaidUsage } from './api/handlePaidUsage';
|
7
7
|
export { handlePaidInvoices } from './api/handlePaidInvoices';
|
8
8
|
export { handlePaidInvoicePdf } from './api/handlePaidInvoicePdf';
|
9
|
-
export { handlePaidPayments } from './api/handlePaidPayments';
|
9
|
+
export { handlePaidPayments } from './api/handlePaidPayments';
|
10
|
+
export { Pagination } from './components/ui/Pagination';
|
11
|
+
export { useCache } from './hooks/useCache';
|
package/dist/index.d.ts.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACtG,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC"}
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACtG,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC"}
|
package/dist/index.js
CHANGED
@@ -6,4 +6,6 @@ export { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '.
|
|
6
6
|
export { handlePaidUsage } from './api/handlePaidUsage';
|
7
7
|
export { handlePaidInvoices } from './api/handlePaidInvoices';
|
8
8
|
export { handlePaidInvoicePdf } from './api/handlePaidInvoicePdf';
|
9
|
-
export { handlePaidPayments } from './api/handlePaidPayments';
|
9
|
+
export { handlePaidPayments } from './api/handlePaidPayments';
|
10
|
+
export { Pagination } from './components/ui/Pagination';
|
11
|
+
export { useCache } from './hooks/useCache';
|
package/dist/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACtG,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC"}
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACtG,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC"}
|