add tanstak table for paymenrs history(mock-data)
This commit is contained in:
smanylov
@@ -3,7 +3,7 @@ import { Suspense } from 'react';
|
|||||||
import ReferralStats from '@/app/ui/referral-page/referral-stats';
|
import ReferralStats from '@/app/ui/referral-page/referral-stats';
|
||||||
import ReferralLinkSection from '@/app/ui/referral-page/referral-link-section';
|
import ReferralLinkSection from '@/app/ui/referral-page/referral-link-section';
|
||||||
import CommissionLevels from '@/app/ui/referral-page/commission-levels';
|
import CommissionLevels from '@/app/ui/referral-page/commission-levels';
|
||||||
import InvitationsTable from '@/app/ui/referral-page/invitations-table';
|
import InvitationsTable from '@/app/ui/referral-page/table/invitations-table';
|
||||||
import IncomeAndPayments from '@/app/ui/referral-page/Income-and-payments';
|
import IncomeAndPayments from '@/app/ui/referral-page/Income-and-payments';
|
||||||
import SettingReferralProgram from '@/app/ui/referral-page/setting-referral-program';
|
import SettingReferralProgram from '@/app/ui/referral-page/setting-referral-program';
|
||||||
import PageTitleColorFrame from '@/app/ui/page-title-color-frame';
|
import PageTitleColorFrame from '@/app/ui/page-title-color-frame';
|
||||||
|
|||||||
@@ -1,7 +1,26 @@
|
|||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
import { useGetReferralPayments } from '@/app/hooks/react-query/useGetReferralPayments';
|
import { useGetReferralPayments } from '@/app/hooks/react-query/useGetReferralPayments';
|
||||||
import { useEffect } from 'react';
|
import { useEffect, useState, useMemo } from 'react';
|
||||||
|
import { useReactTable, getCoreRowModel, getSortedRowModel, getPaginationRowModel, getFilteredRowModel, ColumnDef, SortingState, ColumnFiltersState } from '@tanstack/react-table';
|
||||||
|
import { IconDoubleArrowRight, IconArrowRight, IconDoubleArrowLeft, IconArrowLeft, IconArrowUp, IconArrowDown, IconFilter } from '@/app/ui/icons/icons';
|
||||||
|
import { useTranslations, useLocale } from 'next-intl';
|
||||||
|
import DropDownList from '@/app/components/DropDownList';
|
||||||
|
import { useQueryClient, useQuery } from '@tanstack/react-query';
|
||||||
|
import { pluralize } from '@/app/lib/pluralize';
|
||||||
|
import { fetchReferralInvitees } from '@/app/actions/referralsActions';
|
||||||
|
|
||||||
|
type InviteesType = {
|
||||||
|
status?: string;
|
||||||
|
email?: string;
|
||||||
|
registrationData: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
type InviteType = {
|
||||||
|
active?: string;
|
||||||
|
email?: string;
|
||||||
|
regDate: string;
|
||||||
|
};
|
||||||
|
|
||||||
export default function PaymentsHistory() {
|
export default function PaymentsHistory() {
|
||||||
|
|
||||||
@@ -9,44 +28,524 @@ export default function PaymentsHistory() {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
console.log(paymentsData);
|
console.log(paymentsData);
|
||||||
}, [paymentsData])
|
}, [paymentsData]);
|
||||||
|
|
||||||
|
const {
|
||||||
|
data: referralInvitees,
|
||||||
|
isLoading,
|
||||||
|
isError,
|
||||||
|
error,
|
||||||
|
} = useQuery<InviteType[], Error, InviteesType[], ['referralInvitees']>({
|
||||||
|
queryKey: ['referralInvitees'],
|
||||||
|
queryFn: () => {
|
||||||
|
return fetchReferralInvitees();
|
||||||
|
},
|
||||||
|
|
||||||
|
select: (data: InviteType[]): InviteesType[] => {
|
||||||
|
if (!data) return [
|
||||||
|
];
|
||||||
|
|
||||||
|
return data.map((item: InviteType) => {
|
||||||
|
|
||||||
|
return {
|
||||||
|
status: item?.active ? 'active' : 'not-active',
|
||||||
|
email: item?.email,
|
||||||
|
registrationData: item?.regDate
|
||||||
|
};
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
// Состояния
|
||||||
|
const [sorting, setSorting] = useState<SortingState>([]);
|
||||||
|
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
|
||||||
|
const [dateFilter, setDateFilter] = useState<string>('all');
|
||||||
|
const [statusFilter, setStatusFilter] = useState<string>('all');
|
||||||
|
const [pagination, setPagination] = useState({
|
||||||
|
pageIndex: 0,
|
||||||
|
pageSize: 10,
|
||||||
|
});
|
||||||
|
|
||||||
|
const t = useTranslations("Global");
|
||||||
|
const locale = useLocale();
|
||||||
|
|
||||||
|
// Определение колонок
|
||||||
|
const columns = useMemo<ColumnDef<InviteesType>[]>(
|
||||||
|
() => [
|
||||||
|
{
|
||||||
|
accessorKey: 'amount',
|
||||||
|
header: ({ column }) => (
|
||||||
|
<div className="column">
|
||||||
|
<span>
|
||||||
|
{t('amount')}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
||||||
|
className="sort-button"
|
||||||
|
>
|
||||||
|
{
|
||||||
|
column.getIsSorted() === 'asc' ?
|
||||||
|
<span>
|
||||||
|
<IconArrowUp />
|
||||||
|
</span>
|
||||||
|
: column.getIsSorted() === 'desc' ?
|
||||||
|
<span>
|
||||||
|
<IconArrowDown />
|
||||||
|
</span>
|
||||||
|
: <span>
|
||||||
|
<IconFilter />
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<div className="text-center table-item">
|
||||||
|
{/* {row.original.size !== undefined ? convertBytes(row.original.size) : '-'} */}
|
||||||
|
{/* {row.original.email} */}
|
||||||
|
---
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'method',
|
||||||
|
header: ({ column }) => (
|
||||||
|
<div className="column">
|
||||||
|
<span>
|
||||||
|
{t('method')}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
||||||
|
className="sort-button"
|
||||||
|
>
|
||||||
|
{
|
||||||
|
column.getIsSorted() === 'asc' ?
|
||||||
|
<span>
|
||||||
|
<IconArrowUp />
|
||||||
|
</span>
|
||||||
|
: column.getIsSorted() === 'desc' ?
|
||||||
|
<span>
|
||||||
|
<IconArrowDown />
|
||||||
|
</span>
|
||||||
|
: <span>
|
||||||
|
<IconFilter />
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<div className="text-center table-item">
|
||||||
|
{/* {row.original.size !== undefined ? convertBytes(row.original.size) : '-'} */}
|
||||||
|
{/* {row.original.email} */}
|
||||||
|
---
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'status',
|
||||||
|
header: ({ column }) => (
|
||||||
|
<div className="column">
|
||||||
|
<span>
|
||||||
|
{t('status')}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
||||||
|
className="sort-button"
|
||||||
|
>
|
||||||
|
{
|
||||||
|
column.getIsSorted() === 'asc' ?
|
||||||
|
<span>
|
||||||
|
<IconArrowUp />
|
||||||
|
</span>
|
||||||
|
: column.getIsSorted() === 'desc' ?
|
||||||
|
<span>
|
||||||
|
<IconArrowDown />
|
||||||
|
</span>
|
||||||
|
: <span>
|
||||||
|
<IconFilter />
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
cell: ({ row }) => {
|
||||||
|
return (
|
||||||
|
<div className="text-center font-semibold table-item">
|
||||||
|
<span className="table-item-status">
|
||||||
|
{row.original.status}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'request-date',
|
||||||
|
header: ({ column }) => (
|
||||||
|
<div className="column">
|
||||||
|
<span>
|
||||||
|
{t('request-date')}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
||||||
|
className="sort-button"
|
||||||
|
>
|
||||||
|
{
|
||||||
|
column.getIsSorted() === 'asc' ?
|
||||||
|
<span>
|
||||||
|
<IconArrowUp />
|
||||||
|
</span>
|
||||||
|
: column.getIsSorted() === 'desc' ?
|
||||||
|
<span>
|
||||||
|
<IconArrowDown />
|
||||||
|
</span>
|
||||||
|
: <span>
|
||||||
|
<IconFilter />
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
cell: ({ row }) => {
|
||||||
|
return (
|
||||||
|
<div className="text-center table-item">
|
||||||
|
{row.original.registrationData?.split('T')[0]}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
enableColumnFilter: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: 'processed',
|
||||||
|
header: ({ column }) => (
|
||||||
|
<div className="column">
|
||||||
|
<span>
|
||||||
|
{t('processed')}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
||||||
|
className="sort-button"
|
||||||
|
>
|
||||||
|
{
|
||||||
|
column.getIsSorted() === 'asc' ?
|
||||||
|
<span>
|
||||||
|
<IconArrowUp />
|
||||||
|
</span>
|
||||||
|
: column.getIsSorted() === 'desc' ?
|
||||||
|
<span>
|
||||||
|
<IconArrowDown />
|
||||||
|
</span>
|
||||||
|
: <span>
|
||||||
|
<IconFilter />
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
cell: ({ row }) => {
|
||||||
|
return (
|
||||||
|
<div className="text-center table-item">
|
||||||
|
{row.original.registrationData?.split('T')[0]}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
enableColumnFilter: false,
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
|
||||||
|
// Фильтрация по типу файла и дате
|
||||||
|
const filteredData = useMemo(() => {
|
||||||
|
let result = referralInvitees;
|
||||||
|
if (!result) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Фильтр по типу файла
|
||||||
|
if (statusFilter !== 'all') {
|
||||||
|
result = result.filter(item => item.status === statusFilter);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Фильтр по дате
|
||||||
|
/* if (dateFilter !== 'all') {
|
||||||
|
const now = Date.now();
|
||||||
|
const oneDay = 24 * 60 * 60 * 1000;
|
||||||
|
const sevenDays = 7 * oneDay;
|
||||||
|
const thirtyDays = 30 * oneDay;
|
||||||
|
|
||||||
|
switch (dateFilter) {
|
||||||
|
case 'today':
|
||||||
|
const todayStart = new Date().setHours(0, 0, 0, 0);
|
||||||
|
result = result.filter(item => {
|
||||||
|
if (item.registrationData) {
|
||||||
|
return item.registrationData >= todayStart
|
||||||
|
} else {
|
||||||
|
return 0
|
||||||
|
}
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'week':
|
||||||
|
const weekAgo = now - sevenDays;
|
||||||
|
result = result.filter(item => {
|
||||||
|
if (item.registrationData) {
|
||||||
|
return item.registrationData >= weekAgo;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'month':
|
||||||
|
const monthAgo = now - thirtyDays;
|
||||||
|
result = result.filter(item => {
|
||||||
|
if (item.registrationData) {
|
||||||
|
return item.registrationData >= monthAgo;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'older':
|
||||||
|
const monthAgo2 = now - thirtyDays;
|
||||||
|
result = result.filter(item => {
|
||||||
|
if (item.registrationData) {
|
||||||
|
return item.registrationData < monthAgo2;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
} */
|
||||||
|
|
||||||
|
return result;
|
||||||
|
}, [referralInvitees, statusFilter, dateFilter]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const currentPageRows = table.getRowModel().rows;
|
||||||
|
const pageCount = table.getPageCount();
|
||||||
|
|
||||||
|
if (currentPageRows.length === 0 && pagination.pageIndex > 0 && pageCount > 0) {
|
||||||
|
table.setPageIndex(pagination.pageIndex - 1);
|
||||||
|
}
|
||||||
|
}, [filteredData, pagination.pageIndex]);
|
||||||
|
|
||||||
|
// Создание таблицы
|
||||||
|
const table = useReactTable({
|
||||||
|
data: filteredData,
|
||||||
|
columns,
|
||||||
|
state: {
|
||||||
|
sorting,
|
||||||
|
columnFilters,
|
||||||
|
pagination
|
||||||
|
},
|
||||||
|
autoResetPageIndex: false,
|
||||||
|
onPaginationChange: setPagination,
|
||||||
|
onSortingChange: setSorting,
|
||||||
|
onColumnFiltersChange: setColumnFilters,
|
||||||
|
getCoreRowModel: getCoreRowModel(),
|
||||||
|
getSortedRowModel: getSortedRowModel(),
|
||||||
|
getPaginationRowModel: getPaginationRowModel(),
|
||||||
|
getFilteredRowModel: getFilteredRowModel(),
|
||||||
|
initialState: {
|
||||||
|
pagination: {
|
||||||
|
pageSize: 10,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const pluralizeFiles = (number: number) => {
|
||||||
|
const translate = [t('file'), t('files-few'), t('files')];
|
||||||
|
return pluralize(number, translate[0], translate[1], translate[2], locale);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div className="tanstak-table-wrapper">
|
||||||
<h4 className="mt-[30px]">📊 История выплат</h4>
|
<h3
|
||||||
<div className="stats-grid">
|
className="tanstak-table-title"
|
||||||
<div className="stats-item left-top-corner stats-header">
|
>
|
||||||
Сумма
|
История выплат
|
||||||
</div>
|
</h3>
|
||||||
<div className="stats-item stats-header">
|
{/* Фильтры */}
|
||||||
Способ
|
<div className="tanstak-table-filtres" style={{ display: "none" }}>
|
||||||
</div>
|
<div className="table-filtres-wrapper">
|
||||||
<div className="stats-item stats-header">
|
<div className="table-filtres-item">
|
||||||
Статус
|
<div className="table-filtres-label">{t('date-filter')}:</div>
|
||||||
</div>
|
<DropDownList
|
||||||
<div className="stats-item stats-header">
|
value={dateFilter}
|
||||||
Дата запроса
|
translatedValue={(() => {
|
||||||
</div>
|
switch (dateFilter) {
|
||||||
<div className="stats-item last-column right-top-corner stats-header">
|
case 'all':
|
||||||
Обработано
|
return t('all-dates')
|
||||||
|
case 'week':
|
||||||
|
return t('for-a-week')
|
||||||
|
case 'month':
|
||||||
|
return t('for-a-month')
|
||||||
|
case 'older':
|
||||||
|
return t('older-than-a-month')
|
||||||
|
default:
|
||||||
|
return t('today')
|
||||||
|
}
|
||||||
|
})()}
|
||||||
|
callBack={setDateFilter}
|
||||||
|
>
|
||||||
|
<li value="all">
|
||||||
|
{t('all-dates')}
|
||||||
|
</li>
|
||||||
|
<li value="today">
|
||||||
|
{t('today')}
|
||||||
|
</li>
|
||||||
|
<li value="week">
|
||||||
|
{t('for-a-week')}
|
||||||
|
</li>
|
||||||
|
<li value="month">
|
||||||
|
{t('for-a-month')}
|
||||||
|
</li>
|
||||||
|
<li value="older">
|
||||||
|
{t('older-than-a-month')}
|
||||||
|
</li>
|
||||||
|
</DropDownList>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="stats-item first-column left-bottom-corner">
|
<div className="table-filtres-item">
|
||||||
0
|
<div className="table-filtres-label">{t('items-per-page')}:</div>
|
||||||
</div>
|
<DropDownList
|
||||||
<div className="stats-item second-row">
|
value={table.getState().pagination.pageSize}
|
||||||
0
|
//@ts-ignore сделал так потому что для table.setPageSize нужна цифра
|
||||||
</div>
|
callBack={table.setPageSize}
|
||||||
<div className="stats-item second-row">
|
>
|
||||||
0
|
{[5, 10, 20, 50, 100].map(pageSize => (
|
||||||
</div>
|
<li key={pageSize} value={pageSize}>
|
||||||
<div className="stats-item second-row">
|
{t('show')} {pageSize}
|
||||||
0
|
</li>
|
||||||
</div>
|
))}
|
||||||
<div className="stats-item last-column right-bottom-corner">
|
</DropDownList>
|
||||||
0
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
|
||||||
)
|
{/* Таблица */}
|
||||||
|
<div className="tanstak-table-block">
|
||||||
|
<table className="tanstak-table">
|
||||||
|
<thead className="tanstak-table-head">
|
||||||
|
{table.getHeaderGroups().map(headerGroup => (
|
||||||
|
<tr key={headerGroup.id}>
|
||||||
|
{headerGroup.headers.map(header => (
|
||||||
|
<th
|
||||||
|
key={header.id}
|
||||||
|
>
|
||||||
|
{header.isPlaceholder
|
||||||
|
? null
|
||||||
|
: typeof header.column.columnDef.header === 'function'
|
||||||
|
? header.column.columnDef.header(header.getContext())
|
||||||
|
: header.column.columnDef.header as string}
|
||||||
|
</th>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</thead>
|
||||||
|
<tbody className="tanstak-table-body">
|
||||||
|
{table.getRowModel().rows.length > 0 ? (
|
||||||
|
table.getRowModel().rows.map(row => (
|
||||||
|
<tr key={row.id}>
|
||||||
|
{row.getVisibleCells().map(cell => (
|
||||||
|
<td key={cell.id}>
|
||||||
|
{typeof cell.column.columnDef.cell === 'function'
|
||||||
|
? cell.column.columnDef.cell(cell.getContext())
|
||||||
|
: cell.getValue() as string}
|
||||||
|
</td>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<tr>
|
||||||
|
<td colSpan={columns.length} className="text-center">
|
||||||
|
{t('no-data-for-selected-filters')}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Пагинация */}
|
||||||
|
<div className="tanstak-table-pagination">
|
||||||
|
<div className="pagination-info">
|
||||||
|
{/* <span className="pagination-info-pages">
|
||||||
|
{t('page')}{' '}
|
||||||
|
<strong>
|
||||||
|
{table.getState().pagination.pageIndex + 1} {t('out-of')} {table.getPageCount() ? table.getPageCount() : 1}
|
||||||
|
</strong>
|
||||||
|
</span>
|
||||||
|
<span className="pagination-info-files">
|
||||||
|
| {t('shown')} {table.getRowModel().rows.length} {t('out-of')} {filteredData.length} {pluralizeFiles(filteredData.length || 0)}
|
||||||
|
</span> */}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="pagination-controls">
|
||||||
|
{table.getCanPreviousPage() && (
|
||||||
|
<button
|
||||||
|
className="arrow"
|
||||||
|
onClick={() => table.firstPage()}
|
||||||
|
disabled={!table.getCanPreviousPage()}
|
||||||
|
>
|
||||||
|
<IconDoubleArrowLeft />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
{table.getCanPreviousPage() && (
|
||||||
|
<button
|
||||||
|
className="arrow"
|
||||||
|
onClick={() => table.previousPage()}
|
||||||
|
disabled={!table.getCanPreviousPage()}
|
||||||
|
>
|
||||||
|
<IconArrowLeft />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="pagination-controls-pages">
|
||||||
|
{Array.from({ length: Math.min(5, table.getPageCount()) }, (_, i) => {
|
||||||
|
const pageIndex = Math.max(
|
||||||
|
0,
|
||||||
|
Math.min(
|
||||||
|
table.getPageCount() - 5,
|
||||||
|
table.getState().pagination.pageIndex - 2
|
||||||
|
)
|
||||||
|
) + i;
|
||||||
|
|
||||||
|
if (pageIndex < table.getPageCount()) {
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={pageIndex}
|
||||||
|
className={`${table.getState().pagination.pageIndex === pageIndex
|
||||||
|
? 'current'
|
||||||
|
: 'other'
|
||||||
|
}`}
|
||||||
|
onClick={() => table.setPageIndex(pageIndex)}
|
||||||
|
>
|
||||||
|
{pageIndex + 1}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{table.getCanNextPage() && (
|
||||||
|
<button
|
||||||
|
className="arrow"
|
||||||
|
onClick={() => table.nextPage()}
|
||||||
|
disabled={!table.getCanNextPage()}
|
||||||
|
>
|
||||||
|
<IconArrowRight />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
{table.getCanNextPage() && (
|
||||||
|
<button
|
||||||
|
className="arrow"
|
||||||
|
onClick={() => table.lastPage()}
|
||||||
|
disabled={!table.getCanNextPage()}
|
||||||
|
>
|
||||||
|
<IconDoubleArrowRight />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div >
|
||||||
|
);
|
||||||
}
|
}
|
||||||
@@ -272,7 +272,10 @@
|
|||||||
"email-notifications-about-new-referrals": "Email notifications about new referrals",
|
"email-notifications-about-new-referrals": "Email notifications about new referrals",
|
||||||
"bank-card-number": "Bank card number",
|
"bank-card-number": "Bank card number",
|
||||||
"error-bank-card": "Enter your bank card number",
|
"error-bank-card": "Enter your bank card number",
|
||||||
"error-save": "Error saving"
|
"error-save": "Error saving",
|
||||||
|
"method": "Method",
|
||||||
|
"processed": "Processed",
|
||||||
|
"request-date": "Request date"
|
||||||
},
|
},
|
||||||
"Login-register-form": {
|
"Login-register-form": {
|
||||||
"and": "and",
|
"and": "and",
|
||||||
|
|||||||
@@ -272,7 +272,10 @@
|
|||||||
"email-notifications-about-new-referrals": "Email уведомления о новых рефералах",
|
"email-notifications-about-new-referrals": "Email уведомления о новых рефералах",
|
||||||
"bank-card-number": "Номер банковской карты",
|
"bank-card-number": "Номер банковской карты",
|
||||||
"error-bank-card": "Введите номер банковской карты",
|
"error-bank-card": "Введите номер банковской карты",
|
||||||
"error-save": "Ошибка при сохранении"
|
"error-save": "Ошибка при сохранении",
|
||||||
|
"method": "Способ",
|
||||||
|
"processed": "Обработано",
|
||||||
|
"request-date": "Дата запроса"
|
||||||
},
|
},
|
||||||
"Login-register-form": {
|
"Login-register-form": {
|
||||||
"and": "и",
|
"and": "и",
|
||||||
|
|||||||
Reference in New Issue
Block a user