add tanstak table for invite history

src/app/ui/referral-page/invitations-table.tsx

@@ -1,77 +1,503 @@
-import { useTranslations } from 'next-intl';
+'use client'
+
+import { useState, useMemo, useEffect } from 'react';
+import {
+	useReactTable,
+	getCoreRowModel,
+	getSortedRowModel,
+	getPaginationRowModel,
+	getFilteredRowModel,
+	ColumnDef,
+	SortingState,
+	ColumnFiltersState,
+} from '@tanstack/react-table';
+import { IconEye, IconDoubleArrowRight, IconArrowRight, IconDoubleArrowLeft, IconArrowLeft, IconArrowUp, IconArrowDown, IconFilter, IconFileDownload, IconShieldExclamation } from '@/app/ui/icons/icons';
+import { useTranslations, useLocale } from 'next-intl';
+import DropDownList from '@/app/components/DropDownList';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import { pluralize } from '@/app/lib/pluralize';
+
+type FileItem = {
+	status?: string;
+	email?: string;
+	registrationData: number;
+};
+
+type ApiFile = {
+	status?: string;
+	email?: string;
+	registrationData: string;
+};
+
+type ApiResponse = {
+	files?: ApiFile[];
+};
+
+
 export default function InvitationsTable() {
-	const t = useTranslations('Global');
+	const {
+		data: testData,
+		isLoading,
+		isError,
+		error,
+	} = useQuery<ApiResponse, Error, FileItem[], ['testData']>({
+		queryKey: ['testData'],
+		queryFn: () => {
+			return {}
+		},
+
+		select: (data: ApiResponse): FileItem[] => {
+			if (!data?.files) return [
+				{
+					status: 'string1',
+					email: 'string1',
+					registrationData: 1
+				},
+				{
+					status: 'string2',
+					email: 'string2',
+					registrationData: 2
+				},
+				{
+					status: 'string3',
+					email: 'string3',
+					registrationData: 3
+				}
+			];
+
+			return data.files.map((item: ApiFile) => {
+				return {
+					status: 'string',
+					email: 'string',
+					registrationData: 40
+				};
+			});
+		},
+	});
+
+	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<FileItem>[]>(
+		() => [
+			{
+				accessorKey: 'email',
+				header: ({ column }) => (
+					<div className="column">
+						<span>
+							{t('email')}
+						</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: 'registrationData',
+				header: ({ column }) => (
+					<div className="column">
+						<span>
+							{t('registration-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}
+						</div>
+					)
+				},
+				enableColumnFilter: false,
+			}
+		],
+		[]
+	);
+
+	// Фильтрация по типу файла и дате
+	const filteredData = useMemo(() => {
+		let result = testData;
+		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;
+	}, [testData, 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 (
-		<div className="block-wrapper">
-			<h2 className="section-title">
-				История приглашений
-			</h2>
+		<div
+			className="block-wrapper"
+		>
+			<div className="tanstak-table-wrapper">
+				<h3
+					className="tanstak-table-title"
+				>
+					История приглашений
+				</h3>
+				{/* Фильтры */}
+				<div className="tanstak-table-filtres" style={{ display: "none" }}>
+					<div className="table-filtres-wrapper">
+						<div className="table-filtres-item">
+							<div className="table-filtres-label">{t('date-filter')}:</div>
+							<DropDownList
+								value={dateFilter}
+								translatedValue={(() => {
+									switch (dateFilter) {
+										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 className="stats-grid">
-				<div className="stats-item left-top-corner stats-header">
-					Email
-				</div>
-				<div className="stats-item stats-header">
-					Статус
-				</div>
-				<div className="stats-item stats-header">
-					Заработано
-				</div>
-				<div className="stats-item stats-header">
-					Дата приглашения
-				</div>
-				<div className="stats-item last-column right-top-corner stats-header">
-					Регистрация
+					<div className="table-filtres-item">
+						<div className="table-filtres-label">{t('items-per-page')}:</div>
+						<DropDownList
+							value={table.getState().pagination.pageSize}
+							//@ts-ignore сделал так потому что для table.setPageSize нужна цифра
+							callBack={table.setPageSize}
+						>
+							{[5, 10, 20, 50, 100].map(pageSize => (
+								<li key={pageSize} value={pageSize}>
+									{t('show')} {pageSize}
+								</li>
+							))}
+						</DropDownList>
+					</div>
 				</div>
 
-				<div className="stats-item first-column second-row">
-					email@mail.com
-				</div>
-				<div className="stats-item second-row">
-					{t('status')}
-				</div>
-				<div className="stats-item second-row">
-					0
-				</div>
-				<div className="stats-item second-row">
-					0
-				</div>
-				<div className="stats-item second-row last-column">
-					0
+				{/* Таблица */}
+				<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="stats-item first-column">
-					email@mail.com
-				</div>
-				<div className="stats-item">
-					{t('status')}
-				</div>
-				<div className="stats-item">
-					0
-				</div>
-				<div className="stats-item">
-					0
-				</div>
-				<div className="stats-item last-column">
-					0
-				</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="stats-item last-row left-bottom-corner first-column">
-					email@mail.com
+					<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 className="stats-item last-row">
-					{t('status')}
-				</div>
-				<div className="stats-item last-row">
-					0
-				</div>
-				<div className="stats-item last-row">
-					0
-				</div>
-				<div className="stats-item last-row last-column right-bottom-corner">
-					0
-				</div>
-			</div>
+			</div >
 		</div>
-	)
+	);
 }

src/i18n/messages/en.json

@@ -206,7 +206,8 @@
 		"view": "View",
 		"are-no-violations": "There are no violations",
 		"error-reading-image": "Error reading image",
-		"error-user-not-have-tokens-for-protect": "User not have tokens for protect"
+		"error-user-not-have-tokens-for-protect": "User not have tokens for protect",
+		"registration-date": "Registration date"
 	},
 	"Login-register-form": {
 		"and": "and",

src/i18n/messages/ru.json

@@ -206,7 +206,8 @@
 		"view": "Посмотреть",
 		"are-no-violations": "Нарушений нет",
 		"error-reading-image": "Ошибка чтения изображения",
-		"error-user-not-have-tokens-for-protect": "У пользователя нет токенов для защиты."
+		"error-user-not-have-tokens-for-protect": "У пользователя нет токенов для защиты.",
+		"registration-date": "Дата регистрации"
 	},
 	"Login-register-form": {
 		"and": "и",