add users list

2026-05-12 16:46:54 +07:00
parent baccf74a1c
commit fc013940f1
7 changed files with 659 additions and 503 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "no-copy-admin-panel-frontend",
-	"version": "0.1.0",
+	"version": "0.4.0",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "no-copy-admin-panel-frontend",
-			"version": "0.1.0",
+			"version": "0.4.0",
 			"dependencies": {
 				"@tanstack/react-query": "^5.90.11",
 				"@tanstack/react-table": "^8.21.3",
@@ -17,6 +17,7 @@
 				"react": "19.2.3",
 				"react-dom": "19.2.3",
 				"sonner": "^2.0.7",
+				"use-debounce": "^10.1.1",
 				"zod": "^4.1.13"
 			},
 			"devDependencies": {
@@ -2548,6 +2549,18 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/use-debounce": {
+			"version": "10.1.1",
+			"resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-10.1.1.tgz",
+			"integrity": "sha512-kvds8BHR2k28cFsxW8k3nc/tRga2rs1RHYCqmmGqb90MEeE++oALwzh2COiuBLO1/QXiOuShXoSN2ZpWnMmvuQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 16.0.0"
+			},
+			"peerDependencies": {
+				"react": "*"
+			}
+		},
 		"node_modules/use-intl": {
 			"version": "4.7.0",
 			"resolved": "https://registry.npmjs.org/use-intl/-/use-intl-4.7.0.tgz",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "no-copy-admin-panel-frontend",
-	"version": "0.4.0",
+	"version": "0.5.0",
 	"private": true,
 	"scripts": {
 		"dev": "next dev -p 2996",
@@ -17,6 +17,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"sonner": "^2.0.7",
+		"use-debounce": "^10.1.1",
 		"zod": "^4.1.13"
 	},
 	"devDependencies": {
@@ -29,4 +30,4 @@
 		"tailwindcss": "^4.1.18",
 		"typescript": "^5"
 	}
-}
+}
--- a/src/app/actions/usersActions.ts
+++ b/src/app/actions/usersActions.ts
@@ -1,12 +1,10 @@
 'use server'

-import { redirect } from 'next/navigation';
-import { createSession, deleteSession, getSessionData, updateSession } from '@/app/actions/session';
-import { loginFormSchema, API_BASE_URL } from '@/app/actions/definitions';
+import { getSessionData } from '@/app/actions/session';
+import { API_BASE_URL } from '@/app/actions/definitions';

-export async function fetchUsesData(page: number, size: number) {
+export async function fetchUsesData(page: number, size: number, sortBy?: string, sortDirection?: 'asc' | 'desc' | string, nameQuery?: string) {
 	const token = await getSessionData('token');
-	console.log('fetchUsesData');

 	try {
 		const response = await fetch(`${API_BASE_URL}/api/admin/get-users`, {
@@ -18,21 +16,23 @@ export async function fetchUsesData(page: number, size: number) {
 					/* token: token, */
 					action: 'getAllWithPagination',
 					page: page,
-					size: size
+					size: size,
+					sort_by: sortBy || '',
+					sort_direction: sortDirection || 'asc',
+					full_name: nameQuery
 				}
 			}),
 			headers: {
-				'Content-Type': 'application/json'
+				'Content-Type': 'application/json',
+				'Accept': 'application/json'
 			}
 		});

-		console.log(response);
-
 		if (response.ok) {
 			const parsed = await response.json();

 			if (parsed.message_code === 0) {
-				return parsed.message_body;
+				return parsed.message_body.message_body;
 			} else {
 				return null;
 			}
--- a/src/app/hooks/react-query/useUsersData.ts
+++ b/src/app/hooks/react-query/useUsersData.ts
@@ -1,58 +1,107 @@
 import { useQuery } from '@tanstack/react-query';
 import { fetchUsesData } from '@/app/actions/usersActions';

-interface ApiResponse {
-	files: ApiUser[];
+export interface ApiResponse {
+	content: ApiUser[];
+	totalElements: number;
+	totalPages: number;
+	number: number;
+	size: number;
 }

-interface ApiUser {
-	id: string;
-	mimeType: string;
-	userEmail: number;
-	userCompany: number;
-	updatedAt: string;
-};
+export interface ApiUser {
+	id: number;
+	fullName: string;
+	email: string;
+	verificationStatus: string;
+	createdAt: string;
+	tariff: string;
+	tokens: number;
+}

-export const useUsersData = (page: number, size: number) => {
-	return useQuery<ApiResponse, Error, any>({
-		queryKey: ['usersData'],
+export interface TransformedUser {
+	id: number;
+	userName: string;
+	userEmail: string;
+	userCompany: string;
+	userSubscription: number;
+	userRole: string;
+	userContent: number;
+	tariff: string;
+	tokens: number;
+	verificationStatus: string;
+	_original: ApiUser;
+}
+export interface UsersDataWithPagination {
+	users: TransformedUser[];
+	pagination: {
+		totalElements: number;
+		totalPages: number;
+		currentPage: number;
+		pageSize: number;
+	};
+}
+
+export const useUsersData = (page: number, size: number, sortBy?: string, sortDirection?: 'asc' | 'desc' | string, nameQuery?: string) => {
+	return useQuery<ApiResponse, Error, UsersDataWithPagination>({
+		queryKey: ['usersData', page, size, sortBy, sortDirection, nameQuery],
 		queryFn: () => {
-			return fetchUsesData(page, size)
+			return fetchUsesData(page, size, sortBy, sortDirection, nameQuery);
 		},
+		select: (data: ApiResponse): UsersDataWithPagination => {
+			if (!data?.content || data.content.length === 0) {
+				return {
+					users: [{
+						id: 1,
+						userName: 'userName',
+						userEmail: 'userEmail',
+						userCompany: 'userCompany',
+						userSubscription: Date.now(),
+						userRole: 'role',
+						userContent: 0,
+						tariff: 'EXPIRED',
+						tokens: 0,
+						verificationStatus: 'UNVERIFIED',
+						_original: {} as ApiUser
+					}],
+					pagination: {
+						totalElements: data?.totalElements || 0,
+						totalPages: data?.totalPages || 0,
+						currentPage: data?.number || 0,
+						pageSize: data?.size || size
+					}
+				};
+			}

-		select: (data: ApiResponse): any => {
-			if (!data?.files) return [
-				{
-					id: 1,
-					userId: 1,
-					userName: 'userName',
-					userEmail: 'userEmail',
-					userCompany: 'userCompany',
-					userSubscription: 'userSubscription',
-					userRole: 'role',
-					userContent: 0,
-				}
-			];
-
-			return data.files.map((item: ApiUser) => {
-				const [datePart, timePart] = item.updatedAt.split(' ');
-				const [day, month, year] = datePart.split('-').map(Number);
-				const [hours, minutes, seconds] = timePart.split(':').map(Number);
-				const newDate = new Date(year, month - 1, day, hours, minutes, seconds).getTime();
+			const transformedUsers = data.content.map((item: ApiUser) => {
+				const createdAtTimestamp = new Date(item.createdAt).getTime();

 				return {
 					id: item.id,
-					userName: item.mimeType.toLocaleLowerCase(),
-					userEmail: item.userEmail,
-					userCompany: item.userCompany,
-					userSubscription: newDate,
-					userRole: 'role',
+					userName: item.fullName,
+					userEmail: item.email,
+					userCompany: '',
+					userSubscription: createdAtTimestamp,
+					userRole: 'user',
 					userContent: 0,
+					tariff: item.tariff,
+					tokens: item.tokens,
+					verificationStatus: item.verificationStatus,
 					_original: item
 				};
 			});
+
+			return {
+				users: transformedUsers,
+				pagination: {
+					totalElements: data.totalElements || 0,
+					totalPages: data.totalPages || 0,
+					currentPage: data.number || 0,
+					pageSize: data.size || size
+				}
+			};
 		},
 		retry: false,
-		placeholderData: (previousData) => previousData // для оптимистичных обновлений
+		placeholderData: (previousData) => previousData
 	});
 };
--- a/src/app/styles/global-styles.scss
+++ b/src/app/styles/global-styles.scss
@@ -673,9 +673,27 @@
 		border-bottom: 1px solid var(--color-gray-200);
 	}

+	.tanstak-table-title {
+		font-size: 18px;
+		font-weight: 600;
+		display: flex;
+		align-items: center;
+		color: #1f2937;
+		margin-bottom: 20px;
+
+		&::before {
+			content: '';
+			width: 6px;
+			height: 6px;
+			background: #6366f1;
+			border-radius: 50%;
+			margin-right: 10px;
+		}
+	}
+
 	.tanstak-table-filtres {
 		display: flex;
-		flex-direction: column;
+		flex-direction: row;
 		justify-content: space-between;
 		align-items: flex-start;
 		gap: 1rem;
@@ -684,19 +702,31 @@
 		padding-left: 0;
 		padding-right: 0;

-		@media (min-width: 768px) {
-			flex-direction: row;
-			align-items: center;
+		@media (max-width: 1280px) {
+			flex-direction: column;
+		}
+
+		@media (max-width: 975px) {
+			flex-direction: column;
+			align-items: start;
 		}

 		.table-filtres-wrapper {
 			display: flex;
-			flex-direction: column;
+			flex-direction: row;
 			gap: 1rem;
-			width: 100%;
+			width: auto;

-			@media (min-width: 768px) {
-				flex-direction: row;
+			&.text-filter-search {
+				flex-grow: 1;
+				justify-content: space-between;
+
+				&.end {
+					justify-content: end;
+				}
+			}
+
+			@media (max-width: 768px) {
 				width: auto;
 			}

@@ -711,6 +741,29 @@
 				font-weight: 500;
 				margin-bottom: 0.25rem;
 			}
+
+
+			.table-filtres-text-filter {
+				background-color: #fff;
+				border: 2px solid v.$border-color-1;
+				border-radius: 12px;
+				justify-content: space-between;
+				align-items: center;
+				width: 100%;
+				padding: 8px 16px;
+				font-size: 14px;
+				font-weight: 500;
+				line-height: 1.25;
+				transition: background-color .2s ease-in-out;
+				display: flex;
+				box-shadow: 0 1px 2px #0000000d;
+
+				&:focus {
+					outline-offset: 2px;
+					outline: 2px solid v.$black;
+					box-shadow: 0 0 0 2px #6365f187;
+				}
+			}
 		}
 	}

@@ -751,9 +804,15 @@
 				padding-right: 0.5rem;
 				padding-top: 0.25rem;
 				padding-bottom: 0.25rem;
-				border: 2px solid #e2e8f0;
+				border: 2px solid v.$border-color-1;
 				border-radius: 10px;
 				box-shadow: 0 1px 2px #0000000d;
+				color: v.$p-color;
+
+				.icon {
+					width: 18px;
+				}
+
 				/*  */

 				&:hover {
@@ -772,12 +831,15 @@
 				gap: 0.25rem;

 				button {
-					border: 2px solid v.$p-color;
-					padding-left: 0.75rem;
-					padding-right: 0.75rem;
-					padding-top: 0.25rem;
-					padding-bottom: 0.25rem;
+					border: 2px solid v.$border-color-1;
+					padding: 0.25rem 0.75rem;
 					border-radius: 10px;
+					color: v.$p-color;
+
+					&:disabled {
+						opacity: 0.5;
+						cursor: not-allowed;
+					}

 					&.current {
 						background-color: v.$p-color;
@@ -802,8 +864,7 @@

 	.tanstak-table {
 		width: 100%;
-		table-layout: fixed;
-		/* table-layout: auto; */
+		/* table-layout: fixed; */

 		@media (max-width: 1200px) {
 			width: 1200px;
@@ -833,6 +894,15 @@
 				text-transform: uppercase;
 				letter-spacing: 0.05em;
 				white-space: nowrap;
+
+				&:has(.table-item-checkbox) {
+					padding: 0;
+					cursor: pointer;
+
+					.column {
+						padding: 15px 16px;
+					}
+				}
 			}

 			.column {
@@ -859,6 +929,10 @@
 		&-body {
 			background-color: v.$white;

+			&.loading {
+				opacity: 0.5;
+			}
+
 			>*+* {
 				border-top: 1px solid v.$b-color-2;
 			}
@@ -873,11 +947,89 @@
 			}

 			td {
-				padding-left: 1rem;
-				padding-right: 1rem;
-				padding-top: 1rem;
-				padding-bottom: 1rem;
+				padding: 15px 16px;
 				white-space: nowrap;
+
+				&:first-child {
+					/* padding-left: 15px; */
+				}
+
+				&:last-child {
+					/* padding-right: 15px; */
+				}
+
+				&:has(.table-item-id) {
+					width: 20px;
+				}
+
+				&:has(.table-item-file-name) {
+					max-width: 300px;
+					overflow: hidden;
+				}
+
+				&:has(.table-item-checkbox) {
+					padding: 0;
+					cursor: pointer;
+
+					.table-item {
+						padding: 15px 16px;
+					}
+				}
+
+				.table-item-file-name-image-wrapper {
+					width: 40px;
+					height: 40px;
+					position: relative;
+					border-radius: 6px;
+					overflow: hidden;
+					background: #f5f5f5;
+					box-shadow: 1px 1px 2px #00000030;
+
+					img {
+						object-fit: contain;
+					}
+				}
+			}
+
+			.table-item {
+				color: v.$text-s;
+				font-size: 14px;
+
+				&-not-supported {
+					font-size: 12px;
+				}
+			}
+
+			.table-item-protected {
+				color: #10b981;
+				font-size: 12px;
+				position: relative;
+				margin-left: 5px;
+				padding-left: 5px;
+
+				&::before {
+					content: '•';
+					color: v.$text-s;
+					position: absolute;
+					left: -5px;
+					top: 50%;
+					transform: translateY(-50%);
+				}
+			}
+
+			.table-item-extension {
+				text-transform: uppercase;
+				font-size: 14px;
+			}
+
+			.table-item-status {
+				padding: 2px 10px;
+				border-radius: 15px;
+
+				&.succeeded {
+					background-color: #dcfce7;
+					color: #166534;
+				}
 			}

 			.actions {
@@ -891,25 +1043,145 @@
 					gap: 5px;
 				}

-				button {
+				button,
+				a {
 					padding: 4px 12px;
 					font-size: 14px;
 					line-height: 20px;
-					border-radius: 4px;
+					border-radius: 8px;
 					color: v.$white;
+					cursor: pointer;
+					transition: all 0.3s ease-in;

-					.icon {}
+					.icon {
+						width: 18px;
+					}

 					@media (max-width: 1200px) {
 						padding: 4px;
 					}
 				}
+
+				svg {
+					fill: v.$white;
+				}
+
+				span {
+					padding-left: 5px;
+				}
+			}
+
+			.table-action-download,
+			.table-action-delete,
+			.table-action-view {
+				display: flex;
+				align-items: center;
+			}
+
+			.table-action-download {
+				background-color: #3b72e0;
+
+				&:hover {
+					background-color: #2d56a8;
+				}
+			}
+
+			.table-action-delete {
+				background-color: #e80a14;
+
+				&:hover {
+					background-color: #9f0712;
+				}
+			}
+
+			.table-action-view {
+				background-color: #2b7fff;
+
+				&:hover {
+					background-color: #155dfc;
+				}
+			}
+
+			.toggle-switch {
+				position: relative;
+				display: inline-flex;
+				align-items: center;
+				justify-content: space-between;
+				width: 60px;
+				height: 28px;
+				padding: 0 6px;
+				border: none;
+				border-radius: 8px;
+				cursor: pointer;
+				transition: all 0.3s ease;
+				font-size: 12px;
+				font-weight: 500;
+				background-color: #615fff;
+				padding: 0;
+			}
+
+			.toggle-switch.active {
+				justify-content: flex-end;
+			}
+
+			.toggle-switch.inactive {
+				justify-content: flex-start;
+			}
+
+			.toggle-switch .toggle-slider {
+				position: absolute;
+				width: 30px;
+				height: 28px;
+				background-color: white;
+				border: 1px solid #615fff;
+				border-radius: 8px;
+				transition: transform 0.3s ease;
+				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+			}
+
+			.toggle-switch.active .toggle-slider {
+				transform: translateX(0);
+			}
+
+			.toggle-switch.inactive .toggle-slider {
+				transform: translateX(0);
+			}
+
+			.toggle-switch .toggle-label {
+				z-index: 1;
+				color: v.$text-p;
+				text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+				width: 30px;
+				height: 26px;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+
+			.toggle-switch:disabled {
+				opacity: 0.5;
+				cursor: not-allowed;
+			}
+		}
+
+		.table-item-checkbox {
+			width: 16px;
+			height: 16px;
+			border-radius: 4px;
+			border: 2px solid v.$border-color-1;
+			cursor: pointer;
+			transition: all 0.3s ease-in;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+
+			&:hover {
+				border: 2px solid v.$border-color-1-hover;
 			}
 		}
 	}
 }

-
 .empty-state {
 	text-align: center;
 	padding: 60px 20px;
@@ -943,4 +1215,65 @@
 		flex-direction: column;
 		gap: 12px;
 	}
+}
+
+.pagination-controls {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+
+	.arrow {
+		padding-left: 0.5rem;
+		padding-right: 0.5rem;
+		padding-top: 0.25rem;
+		padding-bottom: 0.25rem;
+		border: 2px solid v.$border-color-1;
+		border-radius: 10px;
+		box-shadow: 0 1px 2px #0000000d;
+		color: v.$p-color;
+		cursor: pointer;
+
+		.icon {
+			width: 18px;
+		}
+
+		&:hover {
+			background-color: v.$bg-light;
+		}
+
+		&:disabled {
+			opacity: 0.5;
+			cursor: not-allowed;
+		}
+	}
+
+	&-pages {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+
+		button {
+			border: 2px solid v.$border-color-1;
+			padding: 0.25rem 0.75rem;
+			border-radius: 10px;
+			color: v.$p-color;
+			cursor: pointer;
+
+			&:disabled {
+				opacity: 0.5;
+				cursor: not-allowed;
+			}
+
+			&.current {
+				background-color: v.$p-color;
+				color: v.$white;
+			}
+
+			&.other {
+				&:hover {
+					background-color: v.$bg-light;
+				}
+			}
+		}
+	}
 }
--- a/src/app/styles/variable.scss
+++ b/src/app/styles/variable.scss
@@ -1,4 +1,5 @@
 $p-color: #6366f1;
+$p-color-hover: #1e0ff0;
 $s-color: #8b5cf6;
 $text-p: #1f2937;
 $text-s: #4b5563;
@@ -10,18 +11,39 @@ $bg-hover: #e9ecef;
 $bg-light: #f8f9ff;
 $bg-darkening: #0000007a;
 $shadow-1: #0000001a;
+$shadow-2: #8686861a;
 $white: #fff;
+$black: #000;
 $red: #dc2626;
+$green: #00a63e;
+$green-2: #10b981;
+$grey: #5a6e8a;
+$p-color-disabled: #6365f18e;
+$s-color-disabled: #8a5cf663;
+$border-color-1: #e2e8f0;
+$border-color-1-hover: #b1b7be;
+$color-warning: #fab005;
+$color-warning-hover: #fa9805;
+$color-warning-2: #f08c00;

 $color-image: #f08c00;
 $color-video: #2f9e44;
 $color-audio: #1971c2;
 $color-document: #a561e6;

+$status-new: #fab005;
+$status-showed: #5a6e8a;
+$status-in-work: #3b82f6;
+$authorized-use: #2ecc71;
+
 :root {
 	--side-bar-width: 280px;

 	@media (max-width: 1200px) {
 		--side-bar-width: 180px;
 	}
+
+	@media (max-width: 767px) {
+		--side-bar-width: 0px;
+	}
 }
--- a/src/app/ui/users/tanstak-users-table.tsx
+++ b/src/app/ui/users/tanstak-users-table.tsx
@@ -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