add users list

2026-05-12 16:46:54 +07:00
parent baccf74a1c
commit fc013940f1
7 changed files with 659 additions and 503 deletions
@@ -1,6 +1,6 @@
 'use client';

-import { useState, useMemo, useEffect, ReactNode } from 'react';
+import { useState, useMemo, useEffect, ReactNode, useCallback } from 'react';
 import {
 	useReactTable,
 	getCoreRowModel,
@@ -11,55 +11,15 @@ import {
 	SortingState,
 	ColumnFiltersState,
 } from '@tanstack/react-table';
-import { IconImageFile, IconVideoFile, IconAudioFile, IconEye, IconDoubleArrowRight, IconArrowRight, IconDoubleArrowLeft, IconArrowLeft, IconArrowUp, IconArrowDown, IconFilter, IconFileDownload, IconShieldExclamation, IconDelete } from '@/app/ui/icons/icons';
+import { IconEye, IconDoubleArrowRight, IconArrowRight, IconDoubleArrowLeft, IconArrowLeft, IconArrowUp, IconArrowDown, IconFilter, IconFileDownload, IconShieldExclamation, IconDelete } from '@/app/ui/icons/icons';
 import { useTranslations, useLocale } from 'next-intl';
 import DropDownList from '@/app/components/dropDownList';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import ModalWindow from '@/app/components/modalWindow';
 import { toast } from 'sonner';
-import { pluralize } from '@/app/lib/pluralize';
 import { useUsersData } from '@/app/hooks/react-query/useUsersData';
-
-type FileItem = {
-	id: string;
-	userId: string;
-	userName: string;
-	userEmail?: number | undefined;
-	userCompany?: number | undefined;
-	userSubscription?: number;
-	_original?: ApiFile;
-};
-
-type ApiFile = {
-	id: string;
-	originalFileName: string;
-	mimeType: string;
-	userEmail: number;
-	userCompany: number;
-	updatedAt: string;
-};
-
-type ApiResponse = any;
-
-// Иконки для типов файлов
-const FileTypeIcon = ({ type }: { type: string }) => {
-	switch (type) {
-		case 'image':
-			return <span className="color-image">
-				<IconImageFile />
-			</span>;
-		case 'video':
-			return <span className="color-video">
-				<IconVideoFile />
-			</span>;
-		case 'audio':
-			return <span className="color-audio">
-				<IconAudioFile />
-			</span>;
-		default:
-			return <span>📄</span>;
-	}
-};
+import { TransformedUser } from '@/app/hooks/react-query/useUsersData';
+import { useDebouncedCallback } from 'use-debounce';

 // Форматирование даты из timestamp
 const formatDate = (timestamp: number) => {
@@ -104,38 +64,72 @@ const cutFileName = (userId: string) => {
 }

 export default function TanstakUsersTable() {
-
-	const { data: tableData,
-		isLoading,
-		isError,
-		error
-	} = useUsersData(10, 10);
-
-	const queryClient = useQueryClient();
-
 	// Состояния
 	const [sorting, setSorting] = useState<SortingState>([]);
 	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-	const [dateFilter, setDateFilter] = useState<string>('all');
-	const [typeFilter, setTypeFilter] = useState<string>('all');
 	const [searchQuery, setSearchQuery] = useState('');
 	const [pagination, setPagination] = useState({
 		pageIndex: 0,
 		pageSize: 10,
 	});
+	const [searchInputValue, setSearchInputValue] = useState<string>('');
 	const [openWindow, setOpenWindow] = useState<boolean>(false);
 	const [openWindowChildren, setOpenWindowChildren] = useState<ReactNode>(null);
+	const debouncedSetSearchQuery = useDebouncedCallback(
+		(value: string) => {
+			setSearchQuery(value);
+			setPagination(prev => ({ ...prev, pageIndex: 0 }));
+		},
+		500
+	);

-	const [isFileLoading, setIsFileLoading] = useState(false);
+	const handleSearchInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+		const value = e.target.value;
+		setSearchInputValue(value);
+		debouncedSetSearchQuery(value);
+	}, [debouncedSetSearchQuery]);

 	const t = useTranslations("Global");
 	const locale = useLocale();

+	const getSortParams = useMemo(() => {
+		if (sorting.length === 0) {
+			return { sortBy: '', sortOrder: undefined };
+		}
+
+		const sort = sorting[0];
+		const sortByMap: Record<string, string> = {
+			'id': 'supportId',
+			'userName': 'fullName',
+			'email': 'email',
+			'verificationStatus': 'verificationStatus',
+			'createdAt': 'createdAt',
+			'tariff': 'tariff',
+			'tokens': 'tokens',
+			'userCompany': 'userCompany',
+		};
+		console.log(sortByMap[sort.id]);
+
+		return {
+			sortBy: sortByMap[sort.id] || sort.id,
+			sortDirection: sort.desc ? 'desc' : 'asc'
+		};
+	}, [sorting]);
+
+	const { data: tableData,
+		isLoading,
+		isError,
+		isFetching,
+		error
+	} = useUsersData(pagination.pageIndex, pagination.pageSize, getSortParams?.sortBy, getSortParams?.sortDirection);
+
+	const queryClient = useQueryClient();
+
 	// Определение колонок
-	const columns = useMemo<ColumnDef<FileItem>[]>(
+	const columns = useMemo<ColumnDef<TransformedUser>[]>(
 		() => [
 			{
-				accessorKey: 'userId',
+				accessorKey: 'id',
 				header: ({ column }) => (
 					<div className="column start">
 						<span>
@@ -162,11 +156,10 @@ export default function TanstakUsersTable() {
 					</div>
 				),
 				cell: ({ row }) => (
-					<div className="flex items-center space-x-2">
+					<div className="flex items-center table-item table-item-id">
 						<div>
-							<div className="font-medium w-full truncate" title={row.original.userId}>
-								{/* {row.original.userId} */}
-								{row.original.userId}
+							<div className="font-medium w-full truncate" title={row.original.id.toString()}>
+								{row.original.id}
 							</div>
 						</div>
 					</div>
@@ -203,7 +196,7 @@ export default function TanstakUsersTable() {
 				cell: ({ row }) => {
 					return (
 						<div className={`text-center font-semibold`}>
-							User name
+							{row.original.userName}
 						</div>
 					)
 				},
@@ -236,26 +229,19 @@ export default function TanstakUsersTable() {
 					</div>
 				),
 				cell: ({ row }) => {
-					let classCollor = () => {
-						let result = ''
-						if (row.original.userEmail !== undefined) {
-							result = row.original.userEmail > 0 ? 'text-red-600' : 'text-green-600'
-						}
-						return result;
-					}
 					return (
-						<div className={`text-center font-semibold ${classCollor()}`}>
+						<div className={`text-center font-semibold text-green-600`}>
 							{row.original.userEmail !== undefined ? row.original.userEmail : '-'}
 						</div>
 					)
 				},
 			},
 			{
-				accessorKey: 'userCompany',
+				accessorKey: 'verificationStatus',
 				header: ({ column }) => (
 					<div className="column">
 						<span>
-							Компания
+							статус KYC
 						</span>
 						<button
 							onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
@@ -279,12 +265,12 @@ export default function TanstakUsersTable() {
 				),
 				cell: ({ row }) => (
 					<div className="text-center">
-						{row.original.userCompany !== undefined ? row.original.userCompany : '-'}
+						{row.original.verificationStatus}
 					</div>
 				),
 			},
 			{
-				accessorKey: 'userSubscription',
+				accessorKey: 'tariff',
 				header: ({ column }) => (
 					<div className="column">
 						<span>
@@ -313,6 +299,76 @@ export default function TanstakUsersTable() {
 				cell: ({ row }) => {
 					return (
 						<div className="text-center">
+							{row.original.tariff}
+						</div>
+					)
+				},
+				enableColumnFilter: false,
+			},
+			{
+				accessorKey: 'tokens',
+				header: ({ column }) => (
+					<div className="column">
+						<span>
+							Токены
+						</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`}>
+							{row.original.tokens}
+						</div>
+					)
+				},
+			}, {
+				accessorKey: 'userSubscription',
+				header: ({ column }) => (
+					<div className="column">
+						<span>
+							Дата регистрации
+						</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`}>
 							{row.original.userSubscription ? (
 								<>
 									{formatDate(row.original.userSubscription)}
@@ -325,76 +381,6 @@ export default function TanstakUsersTable() {
 						</div>
 					)
 				},
-				enableColumnFilter: false,
-			},
-			{
-				accessorKey: 'userRole',
-				header: ({ column }) => (
-					<div className="column">
-						<span>
-							Роль
-						</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`}>
-							User Роль
-						</div>
-					)
-				},
-			}, {
-				accessorKey: 'userContent',
-				header: ({ column }) => (
-					<div className="column">
-						<span>
-							Контент
-						</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`}>
-							User Роль
-						</div>
-					)
-				},
 			},
 			{
 				id: 'actions',
@@ -414,29 +400,7 @@ export default function TanstakUsersTable() {
 							>
 								<IconEye />
 							</button>
-							<button
-								onClick={() => handleDownload(row.original)}
-								disabled={isFileLoading}
-								className="bg-green-500 hover:bg-green-600"
-							>
-								<IconFileDownload />
-							</button>
 						</div>
-						<div className="actions-group">
-							<button
-								onClick={() => handleProtect(row.original)}
-								className="bg-violet-500 hover:bg-violet-600"
-							>
-								<IconShieldExclamation />
-							</button>
-							<button
-								onClick={() => handleOpenWindowForRemove(row.original)}
-								className="bg-red-700 hover:bg-red-800"
-							>
-								<IconDelete />
-							</button>
-						</div>
-
 					</div>
 				),
 				enableSorting: false,
@@ -447,172 +411,17 @@ export default function TanstakUsersTable() {
 	);

 	// Обработчики действий
-	const handleView = (file: FileItem) => {
-		console.log(`Просмотр файла: ${file.userId}`);
+	const handleView = (file: TransformedUser) => {
+		console.log(`Просмотр файла: ${file.id}`);
 	};

-	const handleDownload = async (file: FileItem) => {
-		setIsFileLoading(true);
-
-		try {
-			const response = await fetch(`/api/download/${file.id}`);
-
-			if (!response.ok) {
-				throw new Error(`error: ${response.status}`);
-			}
-
-			const blob = await response.blob();
-			const url = window.URL.createObjectURL(blob);
-			const a = document.createElement('a');
-			a.href = url;
-			a.download = file.userId || `file-${file.id}`;
-			document.body.appendChild(a);
-			a.click();
-			window.URL.revokeObjectURL(url);
-			document.body.removeChild(a);
-			toast.success(`${t('file-is-downloading')} - ${file.userId}`);
-		} catch (error) {
-			toast.error(t('failed-to-download-file'))
-		} finally {
-			setIsFileLoading(false);
-		}
-	};
-
-	const handleProtect = (file: FileItem) => {
-		console.log(`Щиток: ${file.userId}`);
-	};
-
-	const handleOpenWindowForRemove = async (file: FileItem) => {
-
-		setOpenWindowChildren(() => {
-			return (
-				<div>
-					<h3 className="text-2xl">
-						{t('you-sure-you-want-to-delete')}
-					</h3>
-					<div className="mt-2 mb-8 text-center">{file.userId}</div>
-					<div className="flex justify-center gap-4">
-						<button className="btn-primary btn-modal"
-							onClick={() => {
-								/* deleteMutation.mutate(file.id) */
-							}}
-						/* disabled={deleteMutation.isPending} */
-						>
-							{/* {deleteMutation.isPending ? '...' : t('yes')} */}
-							{t('yes')}
-						</button>
-						<button className="btn-primary btn-modal"
-							onClick={() => {
-								setOpenWindow(false);
-								setOpenWindowChildren(null);
-							}}
-						>
-							{t('no')}
-						</button>
-					</div>
-				</div>
-			)
-		})
-		setOpenWindow(true);
-	};
-
-	/* 	const deleteMutation = useMutation({
-			mutationFn: removeUserFile,
-	
-			onMutate: async (fileId: string) => {
-				await queryClient.cancelQueries({ queryKey: ['userFilesData'] });
-	
-				queryClient.setQueryData<ApiResponse>(['userFilesData'], (old) => {
-					if (!old?.files) return old;
-					return {
-						...old,
-						files: old.files.filter(file => file.id !== fileId)
-					};
-				});
-			},
-	
-			onError: () => {
-				queryClient.invalidateQueries({ queryKey: ['userFilesData'] });
-				toast.error(t('error'));
-			},
-	
-			onSuccess: (response, fileId) => {
-				if (response === fileId) {
-					queryClient.invalidateQueries({
-						queryKey: ['userFilesData'],
-						refetchType: 'active'
-					});
-	
-					queryClient.invalidateQueries({
-						queryKey: ['userFilesInfo']
-					});
-	
-					setOpenWindow(false);
-					setOpenWindowChildren(null);
-					toast.success(t('file-has-been-deleted'));
-				}
-			},
-		}); */
-
 	// Фильтрация по типу файла и дате
 	const filteredData = useMemo(() => {
-		let result = tableData;
+		let result = tableData?.users;
 		if (!result) {
 			return [];
 		}

-		// Фильтр по типу файла
-		if (typeFilter !== 'all') {
-			result = result.filter((item: any) => {
-				return item.userName === typeFilter
-			});
-		}
-
-		// Фильтр по дате
-		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: any) => {
-						if (item.userSubscription) {
-							return item.userSubscription >= todayStart
-						} else {
-							return 0
-						}
-					});
-					break;
-				case 'week':
-					const weekAgo = now - sevenDays;
-					result = result.filter((item: any) => {
-						if (item.userSubscription) {
-							return item.userSubscription >= weekAgo;
-						}
-					});
-					break;
-				case 'month':
-					const monthAgo = now - thirtyDays;
-					result = result.filter((item: any) => {
-						if (item.userSubscription) {
-							return item.userSubscription >= monthAgo;
-						}
-					});
-					break;
-				case 'older':
-					const monthAgo2 = now - thirtyDays;
-					result = result.filter((item: any) => {
-						if (item.userSubscription) {
-							return item.userSubscription < monthAgo2;
-						}
-					});
-					break;
-			}
-		}
-
 		if (searchQuery.trim()) {
 			const query = searchQuery.toLowerCase().trim();
 			result = result.filter((item: any) => {
@@ -632,7 +441,7 @@ export default function TanstakUsersTable() {
 		}

 		return result;
-	}, [tableData, typeFilter, dateFilter, searchQuery]);
+	}, [tableData, searchQuery]);

 	useEffect(() => {
 		const currentPageRows = table.getRowModel().rows;
@@ -652,9 +461,16 @@ export default function TanstakUsersTable() {
 			columnFilters,
 			pagination
 		},
-		autoResetPageIndex: false,
+		manualPagination: true,
+		manualSorting: true,
+		manualFiltering: true,
+		pageCount: tableData?.pagination.totalPages,
 		onPaginationChange: setPagination,
-		onSortingChange: setSorting,
+		onSortingChange: (updater) => {
+			const newSorting = typeof updater === 'function' ? updater(sorting) : updater;
+			setSorting(newSorting);
+			setPagination(prev => ({ ...prev, pageIndex: 0 }));
+		},
 		onColumnFiltersChange: setColumnFilters,
 		getCoreRowModel: getCoreRowModel(),
 		getSortedRowModel: getSortedRowModel(),
@@ -667,96 +483,18 @@ export default function TanstakUsersTable() {
 		},
 	});

-	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="tanstak-table-wrapper">
 			<ModalWindow children={openWindowChildren} state={openWindow} callBack={setOpenWindow}></ModalWindow>
 			{/* Фильтры */}
 			<div className="tanstak-table-filtres">
 				<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 className="table-filtres-item">
-						<div className="table-filtres-label">{t('type-filter')}:</div>
-						<DropDownList
-							value={typeFilter}
-							translatedValue={
-								(() => {
-									switch (typeFilter) {
-										case 'image':
-											return t('images')
-										case 'video':
-											return t('videos')
-										case 'audio':
-											return t('audios')
-										default:
-											return t('all-types')
-									}
-								})()
-							}
-							callBack={setTypeFilter}
-						>
-							<li value="all">
-								{t('all-types')}
-							</li>
-							<li value="image">
-								{t('images-few')}
-							</li>
-							<li value="video">
-								{t('videos')}
-							</li>
-							<li value="audio">
-								{t('audios')}
-							</li>
-						</DropDownList>
-					</div>
-
 					<div className="table-filtres-item">
 						<div className="table-filtres-label">{t('search')}:</div>
 						<input
 							type="text"
-							value={searchQuery}
-							onChange={e => setSearchQuery(e.target.value)}
+							value={searchInputValue}
+							onChange={handleSearchInputChange}
 							placeholder="Поиск пользователей"
 							className="table-filtres-input"
 						/>
@@ -799,7 +537,7 @@ export default function TanstakUsersTable() {
 							</tr>
 						))}
 					</thead>
-					<tbody className="tanstak-table-body">
+					<tbody className={`tanstak-table-body ${isFetching ? 'loading' : ''}`}>
 						{table.getRowModel().rows.length > 0 ? (
 							table.getRowModel().rows.map(row => (
 								<tr key={row.id}>
@@ -829,11 +567,11 @@ export default function TanstakUsersTable() {
 					<span className="pagination-info-pages">
 						{t('page')}{' '}
 						<strong>
-							{table.getState().pagination.pageIndex + 1} {t('out-of')} {table.getPageCount() ? table.getPageCount() : 1}
+							{(tableData?.pagination?.currentPage ?? 0) + 1} {t('out-of')} {tableData?.pagination?.totalPages ?? 1}
 						</strong>
 					</span>
 					<span className="pagination-info-files">
-						| {t('shown')} {table.getRowModel().rows.length} {t('out-of')} {filteredData.length} {pluralizeFiles(filteredData.length || 0)}
+						| {t('shown')} {table.getRowModel().rows.length} {t('out-of')} {tableData?.pagination?.totalElements ?? 0}
 					</span>
 				</div>

@@ -854,31 +592,31 @@ export default function TanstakUsersTable() {
 					</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;
+						{(() => {
+							const totalPages = tableData?.pagination?.totalPages;
+							if (!totalPages || totalPages === 0) return null;
+
+							const currentPageIndex = table.getState().pagination.pageIndex;
+							const maxVisiblePages = 5;
+							const visiblePagesCount = Math.min(maxVisiblePages, totalPages);
+
+							let startPage = currentPageIndex - Math.floor(maxVisiblePages / 2);
+							startPage = Math.max(0, Math.min(startPage, totalPages - visiblePagesCount));
+
+							return Array.from({ length: visiblePagesCount }, (_, i) => {
+								const pageIndex = startPage + i;

-							if (pageIndex < table.getPageCount()) {
 								return (
 									<button
 										key={pageIndex}
-										className={`${table.getState().pagination.pageIndex === pageIndex
-											? 'current'
-											: 'other'
-											}`}
+										className={currentPageIndex === pageIndex ? 'current' : 'other'}
 										onClick={() => table.setPageIndex(pageIndex)}
 									>
 										{pageIndex + 1}
 									</button>
 								);
-							}
-							return null;
-						})}
+							});
+						})()}
 					</div>

 					<button