update login endpoint

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "no-copy-admin-panel-frontend",
-	"version": "0.12.0",
+	"version": "0.17.0",
 	"private": true,
 	"scripts": {
 		"dev": "next dev -p 2996",

src/app/[locale]/pages/content/page.tsx

@@ -1,29 +1,29 @@
+'use client'
+
+import ContentModerationTable from '@/app/ui/content/content-moderation-table';
+import ContentAppealsTable from '@/app/ui/content/content-appeals-table';
+import { useEmployeInfo } from '@/app/hooks/react-query/useEmployeInfo';
+
 export default function Page() {
+	const { getPermissionLevel } = useEmployeInfo();
+	const contentModerationPermissionLevel = getPermissionLevel('content_moderation');
+
+
 	return (
 		<div className="admin-content">
 			<div className="content-header">
 				<h3>Управление контентом</h3>
-				<div className="content-header-actions">
-					<div className="search-box">
-						<span>🔍</span>
-						<input type="text" id="content-search" placeholder="Поиск контента..." />
+			</div>
+			{getPermissionLevel('content_moderation') > 0 && (
+				<>
+					<div className="content-body">
+						<ContentModerationTable permission={contentModerationPermissionLevel} />
 					</div>
-					<select id="content-type-filter">
-						<option value="all">Все типы</option>
-						<option value="image">Изображения</option>
-						<option value="video">Видео</option>
-						<option value="audio">Аудио</option>
-						<option value="document">Документы</option>
-					</select>
-				</div>
-			</div>
-			<div className="content-body" id="content-container">
-				<div className="empty-state">
-					<div className="empty-state-icon">🗂️</div>
-					<h4>Контент не найден</h4>
-					<p>Попробуйте изменить параметры поиска</p>
-				</div>
-			</div>
+					<div className="content-body">
+						<ContentAppealsTable permission={contentModerationPermissionLevel} />
+					</div>
+				</>
+			)}
 		</div>
 	)
 }

src/app/[locale]/pages/staff-management/page.tsx

@@ -2,12 +2,20 @@
 
 import TanstakStuffTable from '@/app/ui/staff-management/tanstak-stuff-table';
 import { CreateStaffForm } from '@/app/ui/forms/create-staff-form';
+import { useEmployeInfo } from '@/app/hooks/react-query/useEmployeInfo';
 
 export default function Page() {
+	const { getPermissionLevel } = useEmployeInfo();
+	const staffPermissionLevel = getPermissionLevel('staff');
+
 	return (
 		<div>
-			<CreateStaffForm />
-			<TanstakStuffTable />
+			{staffPermissionLevel === 3 && (
+				<CreateStaffForm />
+			)}
+			{staffPermissionLevel > 0 && (
+				<TanstakStuffTable permission={staffPermissionLevel} />
+			)}
 		</div>
 	)
 }

src/app/[locale]/pages/tariff-management/page.tsx

@@ -1,78 +1,6 @@
+import TariffManagment from '@/app/ui/tariff-management/tariff-management';
 export default function Page() {
 	return (
-		<div className="admin-content">
-			<div className="content-header">
-				<h3>Управление тарифными планами</h3>
-				<div className="content-header-actions">
-					<button className="btn btn-primary">
-						<span>➕</span>
-						<span>Создать тариф</span>
-					</button>
-				</div>
-			</div>
-			<div className="content-body" id="plans-container">
-				<div className="stats-grid">
-					<div className="stat-card">
-						<div className="stat-card-header">
-							<span className="stat-card-title">FREE</span>
-							<div className="stat-card-icon blue">🆓</div>
-						</div>
-						<div className="stat-card-value">₽0</div>
-						<div className="stat-card-label">100 токенов</div>
-						<div className="stat-card-footer">
-							<button className="btn btn-outline btn-sm">Редактировать</button>
-						</div>
-					</div>
-
-					<div className="stat-card">
-						<div className="stat-card-header">
-							<span className="stat-card-title">MINI (TELEGRAM)</span>
-							<div className="stat-card-icon cyan">✈️</div>
-						</div>
-						<div className="stat-card-value">₽500</div>
-						<div className="stat-card-label">500 токенов</div>
-						<div className="stat-card-footer">
-							<button className="btn btn-outline btn-sm">Редактировать</button>
-						</div>
-					</div>
-
-					<div className="stat-card">
-						<div className="stat-card-header">
-							<span className="stat-card-title">BASIC</span>
-							<div className="stat-card-icon green">⭐</div>
-						</div>
-						<div className="stat-card-value">₽990</div>
-						<div className="stat-card-label">1,000 токенов</div>
-						<div className="stat-card-footer">
-							<button className="btn btn-outline btn-sm">Редактировать</button>
-						</div>
-					</div>
-
-					<div className="stat-card">
-						<div className="stat-card-header">
-							<span className="stat-card-title">PRO</span>
-							<div className="stat-card-icon purple">💎</div>
-						</div>
-						<div className="stat-card-value">₽2,990</div>
-						<div className="stat-card-label">5,000 токенов</div>
-						<div className="stat-card-footer">
-							<button className="btn btn-outline btn-sm">Редактировать</button>
-						</div>
-					</div>
-
-					<div className="stat-card">
-						<div className="stat-card-header">
-							<span className="stat-card-title">BUSINESS</span>
-							<div className="stat-card-icon orange">🏢</div>
-						</div>
-						<div className="stat-card-value">₽9,990</div>
-						<div className="stat-card-label">20,000 токенов</div>
-						<div className="stat-card-footer">
-							<button className="btn btn-outline btn-sm">Редактировать</button>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
+		<TariffManagment />
 	)
 }

src/app/actions/auth.ts

@@ -46,11 +46,11 @@ export async function authorization(
 
 	try {
 		const { email, password } = validatedFields.data;
-		const response = await fetch(`${API_BASE_URL}/api/admin`, {
+		const response = await fetch(`${API_BASE_URL}/api/admin/login`, {
 			method: 'POST',
 			body: JSON.stringify({
 				version: 1,
-				msg_id: 100,
+				msg_id: 101,
 				message_body: {
 					action: "login",
 					email: email,

src/app/actions/contentActions.ts

@@ -0,0 +1,200 @@
+'use server'
+
+import { getSessionData } from '@/app/actions/session';
+import { API_BASE_URL } from '@/app/actions/definitions';
+
+type ModerationStatus = 'BLOCKED' | 'ACTIVE' | 'MODERATION';
+
+export async function fetchModerationContentList(
+	page?: number,
+	size?: number,
+	sortBy?: string,
+	sortDirection?: 'asc' | 'desc' | string,
+	statuses?: ModerationStatus[],
+	isAppeal?: boolean
+) {
+	const token = await getSessionData('token');
+
+	try {
+		const response = await fetch(`${API_BASE_URL}/api/admin/info`, {
+			method: 'POST',
+			body: JSON.stringify({
+				version: 1,
+				msg_id: 40001,
+				message_body: {
+					action: 'files_for_moderation',
+					page: page,
+					page_size: size,
+					sort_by: sortBy || '',
+					sort_order: sortDirection || 'asc',
+					statuses: statuses,
+					is_appeal: isAppeal,
+				}
+			}),
+			headers: {
+				'Content-Type': 'application/json',
+				'Accept': 'application/json',
+				'Authorization': `Bearer ${token}`
+			}
+		});
+
+		if (response.ok) {
+			const parsed = await response.json();
+
+			if (parsed.message_code === 0) {
+				return parsed.message_body.message_body;
+			} else {
+				return null;
+			}
+
+		} else {
+			throw new Error(`${response.status}`);
+		}
+	} catch (error) {
+		return null;
+	}
+}
+
+export async function changeModerationContentStatus(fileId?: string, fileStatus?: string) {
+	const token = await getSessionData('token');
+
+	try {
+		const response = await fetch(`${API_BASE_URL}/api/admin/control`, {
+			method: 'POST',
+			body: JSON.stringify({
+				version: 1,
+				msg_id: 40002,
+				message_body: {
+					action: 'change_file_status',
+					file_id: fileId,
+					file_status: fileStatus
+				}
+			}),
+			headers: {
+				'Content-Type': 'application/json',
+				'Accept': 'application/json',
+				'Authorization': `Bearer ${token}`
+			}
+		});
+
+		if (response.ok) {
+			const parsed = await response.json();
+			console.log(parsed);
+
+			if (parsed.message_code === 0) {
+				return parsed.message_body.message_body;
+			} else {
+				return null;
+			}
+
+		} else {
+			throw new Error(`${response.status}`);
+		}
+	} catch (error) {
+		return null;
+	}
+}
+
+export async function downloadFile(fileId: string, fileName: string) {
+	const token = await getSessionData('token');
+
+	const response = await fetch(`${API_BASE_URL}/api/admin/download/${fileId}`, {
+		headers: {
+			'Authorization': `Bearer ${token}`,
+		},
+	})
+
+	if (!response.ok) {
+		throw 'failed-to-download-file';
+	}
+
+	const arrayBuffer = await response.arrayBuffer()
+	const base64 = Buffer.from(arrayBuffer).toString('base64')
+
+	return {
+		data: base64,
+		contentType: response.headers.get('content-type') || 'application/octet-stream',
+		fileName: fileName
+	}
+}
+
+export async function fetchAppealsContentList(page?: number, size?: number, sortBy?: string, sortDirection?: 'asc' | 'desc' | string) {
+	const token = await getSessionData('token');
+
+	try {
+		const response = await fetch(`${API_BASE_URL}/api/admin/info`, {
+			method: 'POST',
+			body: JSON.stringify({
+				version: 1,
+				msg_id: 40001,
+				message_body: {
+					action: 'all_appeals',
+					page: page,
+					page_size: size,
+					sort_by: sortBy || '',
+					sort_order: sortDirection || 'asc',
+				}
+			}),
+			headers: {
+				'Content-Type': 'application/json',
+				'Accept': 'application/json',
+				'Authorization': `Bearer ${token}`
+			}
+		});
+
+		if (response.ok) {
+			const parsed = await response.json();
+
+			if (parsed.message_code === 0) {
+				return parsed.message_body.message_body;
+			} else {
+				return null;
+			}
+
+		} else {
+			throw new Error(`${response.status}`);
+		}
+	} catch (error) {
+		return null;
+	}
+}
+
+export async function changeAppealContentStatus(appealId?: string, approve?: boolean, comment?: string) {
+	const token = await getSessionData('token');
+
+	try {
+		const response = await fetch(`${API_BASE_URL}/api/admin/control`, {
+			method: 'POST',
+			body: JSON.stringify({
+				version: 1,
+				msg_id: 40002,
+				message_body: {
+					action: 'review_appeal',
+					appeal_id: appealId,
+					approve: approve,
+					comment: comment
+				}
+			}),
+			headers: {
+				'Content-Type': 'application/json',
+				'Accept': 'application/json',
+				'Authorization': `Bearer ${token}`
+			}
+		});
+
+		if (response.ok) {
+			const parsed = await response.json();
+
+			if (parsed.message_code === 0) {
+				return parsed.message_body.message_body;
+			} else {
+				return null;
+			}
+
+		} else {
+			throw new Error(`${response.status}`);
+		}
+	} catch (error) {
+		return null;
+	}
+}

src/app/actions/definitions.ts

@@ -19,3 +19,9 @@ export const localDevelopmentUrl = process.env.DEV_URL
 export const API_BASE_URL = process.env.NODE_ENV === 'development'
 	? localDevelopmentUrl
 	: 'http://admin:8082';
+
+export const localDashBoardDevelopmentUrl = process.env.DEV_URL ? process.env.DEV_URL : 'http://localhost';
+
+export const API_DASHBOARD_URL = process.env.NODE_ENV === 'development'
+	? localDashBoardDevelopmentUrl
+	: 'http://app:8080';

src/app/actions/tariffActions.ts

@@ -0,0 +1,201 @@
+'use server'
+
+import { getSessionData } from '@/app/actions/session';
+import { API_BASE_URL } from '@/app/actions/definitions';
+
+export async function fetchTariffs(page: number) {
+	const token = await getSessionData('token');
+
+	try {
+		const response = await fetch(`${API_BASE_URL}/api/admin/info`, {
+			method: 'POST',
+			body: JSON.stringify({
+				version: 1,
+				msg_id: 40004,
+				message_body: {
+					action: 'get_all',
+					page: page,
+					page_size: 8
+				}
+			}),
+			headers: {
+				'Content-Type': 'application/json',
+				'Accept': 'application/json',
+				'Authorization': `Bearer ${token}`
+			}
+		});
+
+		if (response.ok) {
+			const parsed = await response.json();
+
+			if (parsed.message_code === 0) {
+				return parsed.message_body.message_body;
+			} else {
+				return null;
+			}
+
+		} else {
+			throw new Error(`${response.status}`);
+		}
+	} catch (error) {
+		return null;
+	}
+}
+
+export async function updateTariffs(
+	id: number,
+	tariffPrice: number,
+	tariffName: string,
+	type: string,
+	tariffTokens: number,
+	maxFiles: number,
+	diskSize: number,
+	maxUsers: number,
+	description: string,
+	tariffTerm: 'MONTHLY' | 'YEAR',
+	accountType: 'b2c' | 'b2b' | 'token'
+) {
+	const token = await getSessionData('token');
+
+	try {
+		const response = await fetch(`${API_BASE_URL}/api/admin/control`, {
+			method: 'POST',
+			body: JSON.stringify({
+				version: 1,
+				msg_id: 40003,
+				message_body: {
+					action: 'add',
+					id: id,
+					tariff_price: tariffPrice,
+					tariff_name: tariffName,
+					type: type,
+					tariff_tokens: tariffTokens,
+					max_files: maxFiles,
+					disk_size: diskSize,
+					max_users: maxUsers,
+					description: description,
+					tariff_term: tariffTerm,
+					account_type: accountType
+				}
+			}),
+			headers: {
+				'Content-Type': 'application/json',
+				'Accept': 'application/json',
+				'Authorization': `Bearer ${token}`
+			}
+		});
+
+		if (response.ok) {
+			const parsed = await response.json();
+
+			if (parsed.message_code === 0) {
+				return parsed.message_body.message_body;
+			} else {
+				return null;
+			}
+
+		} else {
+			throw new Error(`${response.status}`);
+		}
+	} catch (error) {
+		return null;
+	}
+}
+
+export async function addTariffs(
+	tariffPrice: number,
+	tariffName: string,
+	type: string,
+	tariffTokens: number,
+	maxFiles: number,
+	diskSize: number,
+	maxUsers: number,
+	description: string,
+	tariffTerm: 'MONTHLY' | 'YEAR',
+	accountType: 'b2c' | 'b2b' | 'token'
+) {
+	const token = await getSessionData('token');
+
+	try {
+		const response = await fetch(`${API_BASE_URL}/api/admin/control`, {
+			method: 'POST',
+			body: JSON.stringify({
+				version: 1,
+				msg_id: 40003,
+				message_body: {
+					action: 'add',
+					tariff_price: tariffPrice,
+					tariff_name: tariffName,
+					type: type,
+					tariff_tokens: tariffTokens,
+					max_files: maxFiles,
+					disk_size: diskSize,
+					max_users: maxUsers,
+					description: description,
+					tariff_term: tariffTerm,
+					account_type: accountType
+				}
+			}),
+			headers: {
+				'Content-Type': 'application/json',
+				'Accept': 'application/json',
+				'Authorization': `Bearer ${token}`
+			}
+		});
+
+		if (response.ok) {
+			const parsed = await response.json();
+
+			if (parsed.message_code === 0) {
+				return parsed.message_body.message_body;
+			} else {
+				return null;
+			}
+
+		} else {
+			throw new Error(`${response.status}`);
+		}
+	} catch (error) {
+		return null;
+	}
+}
+
+export async function removeTariffs(
+	id: number
+) {
+	const token = await getSessionData('token');
+
+	try {
+		const response = await fetch(`${API_BASE_URL}/api/admin/control`, {
+			method: 'POST',
+			body: JSON.stringify({
+				version: 1,
+				msg_id: 40003,
+				message_body: {
+					action: 'remove',
+					id: id
+				}
+			}),
+			headers: {
+				'Content-Type': 'application/json',
+				'Accept': 'application/json',
+				'Authorization': `Bearer ${token}`
+			}
+		});
+
+		if (response.ok) {
+			const parsed = await response.json();
+
+			if (parsed.message_code === 0) {
+				return parsed.message_body.message_body;
+			} else {
+				return null;
+			}
+
+		} else {
+			throw new Error(`${response.status}`);
+		}
+	} catch (error) {
+		return null;
+	}
+}

src/app/components/FileTypeIcon.tsx

@@ -0,0 +1,22 @@
+import { IconImageFile, IconVideoFile, IconAudioFile, IconDocument } from '@/app/ui/icons/icons';
+
+export 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 className="color-document">
+				<IconDocument />
+			</span>;
+	}
+};

src/app/hooks/react-query/useContentForAppeals.ts

@@ -0,0 +1,44 @@
+import { useQuery } from '@tanstack/react-query';
+import { fetchAppealsContentList } from '@/app/actions/contentActions';
+
+export interface AppealsFile {
+	additionalInfo: string;
+	adminComment: string;
+	appealId: string;
+	appealReason: string;
+	createdAt: string;
+	fileId: string;
+	resolvedAt: string;
+	fileName: string;
+	status: 'REJECTED' | 'APPROVED' | string;
+}
+
+export interface ContentForAppeals {
+	appeals: AppealsFile[];
+	totalPages: number;
+	currentPage: number;
+	pageSize: number;
+	totalCount: number;
+}
+
+export const useContentForAppeals = (
+	page?: number,
+	size?: number,
+	sortBy?: string,
+	sortDirection?: 'asc' | 'desc' | string
+) => {
+	return useQuery({
+		queryKey: ['contentForAppeals', page, size, sortBy, sortDirection],
+		queryFn: () => {
+			return fetchAppealsContentList(page, size, sortBy, sortDirection);
+		},
+		select: (data: ContentForAppeals | null) => {
+			if (!data) {
+				return null;
+			}
+			return data;
+		},
+		refetchInterval: 30000,
+		placeholderData: (previousData) => previousData // для оптимистичных обновлений
+	});
+};

src/app/hooks/react-query/useContentForModeration.ts

@@ -0,0 +1,60 @@
+import { useQuery } from '@tanstack/react-query';
+import { fetchModerationContentList } from '@/app/actions/contentActions';
+
+export interface AppealInfo {
+	additionalInfo: string | null;
+	adminComment: null;
+	appealId: string | null;
+	appealReason: string | null;
+	createdAt: string | null;
+	fileId: string | null;
+	fileName: string | null;
+	resolvedAt: string | null;
+	status: string;
+}
+export interface ModerationFile {
+	fileName: string;
+	moderationInfo: {
+		appealInfo: null | AppealInfo;
+		hasActiveAppeal: boolean;
+	};
+	userId: number;
+	fileId: string;
+	status: 'BLOCKED' | 'MODERATION' | string;
+	image: string;
+	downloadUrl: string;
+}
+
+export interface ContentForModeration {
+	files: ModerationFile[];
+	totalPages: number;
+	currentPage: number;
+	pageSize: number;
+	totalCount: number;
+}
+
+export type ModerationStatus = 'BLOCKED' | 'ACTIVE' | 'MODERATION';
+
+export const useContentForModeration = (
+	page?: number,
+	size?: number,
+	sortBy?: string,
+	sortDirection?: 'asc' | 'desc' | string,
+	statuses?: ModerationStatus[],
+	isAppeal?: boolean
+) => {
+	return useQuery({
+		queryKey: ['contentForModeration', page, size, sortBy, sortDirection, statuses, isAppeal],
+		queryFn: () => {
+			return fetchModerationContentList(page, size, sortBy, sortDirection, statuses, isAppeal);
+		},
+		select: (data: ContentForModeration | null) => {
+			if (!data) {
+				return null;
+			}
+			return data;
+		},
+		refetchInterval: 30000,
+		placeholderData: (previousData) => previousData // для оптимистичных обновлений
+	});
+};

src/app/hooks/react-query/useTariffsData.ts

@@ -0,0 +1,42 @@
+import { useQuery } from '@tanstack/react-query';
+import { fetchTariffs } from '@/app/actions/tariffActions';
+
+export interface Tariff {
+	id: number;
+	type: string;
+	name: string;
+	price: number;
+	tokens: number;
+	maxFilesCount: number;
+	diskSize: number;
+	maxUsers: number;
+	tariffTerm: string;
+	description: string;
+}
+
+export interface TariffsData {
+	page: number;
+	page_size: number;
+	sort_by: string;
+	sort_direction: 'asc' | 'desc';
+	total_pages: number;
+	total_elements: number;
+	tariffs: Tariff[];
+}
+
+export const useTariffsData = (page: number) => {
+	return useQuery({
+		queryKey: ['tariffsData', page],
+		queryFn: () => {
+			return fetchTariffs(page);
+		},
+		select: (data: TariffsData | null) => {
+			if (!data) {
+				return null;
+			}
+			return data;
+		},
+		refetchInterval: 30000,
+		placeholderData: (previousData) => previousData
+	});
+};

src/app/hooks/react-query/useUsersData.ts

@@ -51,19 +51,7 @@ export const useUsersData = (page: number, size: number, sortBy?: string, sortDi
 		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
-					}],
+					users: [],
 					pagination: {
 						totalElements: data?.totalElements || 0,
 						totalPages: data?.totalPages || 0,

src/app/lib/getFileType.ts

@@ -0,0 +1,34 @@
+export const getFileType = (fileName: string): 'image' | 'video' | 'audio' | 'document' | 'unknown' => {
+	const lastDotIndex = fileName.lastIndexOf('.');
+
+	if (lastDotIndex <= 0) {
+		return 'unknown';
+	}
+
+	const extension = fileName.substring(lastDotIndex + 1).toLowerCase();
+
+	const allowedExtensions = {
+		images: ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp', 'svg', 'ico'],
+		videos: ['mp4', 'webm', 'ogg', 'mov', 'avi', 'mkv', 'flv', 'wmv'],
+		audios: ['mp3', 'wav', 'ogg', 'flac', 'aac', 'm4a', 'wma'],
+		documents: ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'rtf', 'csv', 'md']
+	};
+
+	if (allowedExtensions.images.includes(extension)) {
+		return 'image';
+	}
+
+	if (allowedExtensions.videos.includes(extension)) {
+		return 'video';
+	}
+
+	if (allowedExtensions.audios.includes(extension)) {
+		return 'audio';
+	}
+
+	if (allowedExtensions.documents.includes(extension)) {
+		return 'document';
+	}
+
+	return 'unknown';
+}

src/app/styles/file-moderation-modal.scss

@@ -0,0 +1,216 @@
+@use './variable.scss' as v;
+
+.file-moderation-modal {
+	padding: 1.5rem;
+	min-width: 400px;
+
+	&__title {
+		font-size: 1.5rem;
+		font-weight: bold;
+		margin-bottom: 1rem;
+	}
+
+	&__content {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	&__info-section,
+	&__status-section,
+	&__status-change-section,
+	&__comment-section {
+		border-bottom: 1px solid #e5e7eb;
+		padding-bottom: 0.75rem;
+	}
+
+	&__label,
+	&__status-label,
+	&__status-change-label {
+		display: block;
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: #374151;
+	}
+
+	&__label {
+		margin-bottom: 0.25rem;
+	}
+
+	&__status-label {
+		margin-bottom: 0.25rem;
+	}
+
+	&__status-change-label {
+		margin-bottom: 0.5rem;
+	}
+
+	&__value {
+		color: #111827;
+		word-break: break-word;
+	}
+
+	&__actions {
+		display: flex;
+		justify-content: flex-end;
+		gap: 0.75rem;
+		padding-top: 1rem;
+	}
+
+	&__button {
+		padding: 0.5rem 1rem;
+		border-radius: 0.25rem;
+		transition: all 0.2s;
+		cursor: pointer;
+		border: none;
+		font-size: 0.875rem;
+
+		&:disabled {
+			cursor: not-allowed;
+		}
+	}
+
+	&__button-cancel {
+		@extend .file-moderation-modal__button;
+		color: #374151;
+		background-color: #f3f4f6;
+
+		&:hover:not(:disabled) {
+			background-color: #e5e7eb;
+		}
+	}
+
+	&__button-save {
+		@extend .file-moderation-modal__button;
+		color: white;
+		background-color: #3b82f6;
+
+		&:hover:not(:disabled) {
+			background-color: #2563eb;
+		}
+
+		&:disabled {
+			background-color: #93c5fd;
+		}
+	}
+
+	&__comment-label {
+		margin-bottom: 0.5rem;
+	}
+
+	&__comment-textarea {
+		width: 100%;
+		padding: 0.5rem;
+		border: 1px solid #e5e7eb;
+		border-radius: 0.25rem;
+		font-size: 0.875rem;
+		font-family: inherit;
+		color: #111827;
+		background-color: #ffffff;
+		resize: vertical;
+		transition: all 0.2s;
+
+		&:focus {
+			outline: none;
+			border-color: #3b82f6;
+			box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+		}
+
+		&::placeholder {
+			color: #9ca3af;
+		}
+
+		&:disabled {
+			background-color: #f3f4f6;
+			cursor: not-allowed;
+		}
+	}
+
+	.tabs-modal__header {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	.tabs-modal__tabs {
+		display: flex;
+		gap: 0.5rem;
+		border-bottom: 1px solid #e2e8f0;
+		padding-bottom: 0.5rem;
+		justify-content: space-between;
+	}
+
+	.tabs-modal__tab {
+		padding: 0.5rem 1rem;
+		background: transparent;
+		border: none;
+		border-radius: 0.375rem;
+		cursor: pointer;
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: #64748b;
+		transition: all 0.2s;
+		position: relative;
+	}
+
+	.tabs-modal__tab:hover:not(:disabled) {
+		color: #3b82f6;
+		background: #f1f5f9;
+	}
+
+	.tabs-modal__tab--active {
+		color: #3b82f6;
+		background: #eff6ff;
+	}
+
+	.tabs-modal__tab--disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.tabs-modal__tab-badge {
+		display: inline-block;
+		margin-left: 0.5rem;
+		padding: 0.125rem 0.375rem;
+		background: #e2e8f0;
+		border-radius: 9999px;
+		font-size: 0.75rem;
+		font-weight: normal;
+	}
+
+	.tabs-modal__content {
+		margin-top: 1rem;
+	}
+}
+
+.status-badge {
+	padding: 0.25rem 0.5rem;
+	border-radius: 9999px;
+	font-size: 0.75rem;
+	font-weight: 500;
+	display: inline-block;
+
+	&--blocked {
+		@extend .status-badge;
+		background-color: #fee2e2;
+		color: #991b1b;
+	}
+
+	&--moderation {
+		@extend .status-badge;
+		background-color: #fef3c7;
+		color: #92400e;
+	}
+
+	&--approved {
+		@extend .status-badge;
+		background-color: #dcfce7;
+		color: #166534;
+	}
+
+	&--default {
+		@extend .status-badge;
+		background-color: #f3f4f6;
+		color: #374151;
+	}
+}

src/app/styles/global-styles.scss

@@ -1,6 +1,9 @@
 @use './variable.scss' as v;
 @use './edit-permissions-modal.scss';
 @use './animation.scss';
+@use './file-moderation-modal.scss';
+@use './tariff-edit-modal.scss';
+@use './tariff-remove-modal.scss';
 
 :root {
 	--primary-color: #2563eb;
@@ -9,8 +12,8 @@
 	--secondary-hover: #4c5869;
 	--success-color: #10b981;
 	--success-hover: #0d8a60;
-	--danger-color: #ef4444;
-	--danger-hover: #bd3434;
+	--danger-color: #dc2626;
+	--danger-hover: #b91c1c;
 	--warning-color: #f59e0b;
 	--warning-hover: #b3750b;
 	--info-color: #3b82f6;
@@ -295,6 +298,11 @@
 		&:hover {
 			background: var(--danger-hover);
 		}
+
+		&:disabled {
+			opacity: 0.5;
+			cursor: not-allowed;
+		}
 	}
 
 	.btn {
@@ -355,12 +363,12 @@
 		flex-wrap: wrap;
 		gap: 12px;
 
-		&-actions {
+		/* 		&-actions {
 			display: flex;
 			gap: 12px;
 			flex-wrap: wrap;
 
-		}
+		} */
 
 		h3 {
 			font-size: 18px;
@@ -527,13 +535,27 @@
 		}
 
 		.stat-card-title {
-			font-size: 13px;
+			font-size: 14px;
 			color: var(--text-secondary);
 			font-weight: 500;
 			text-transform: uppercase;
 			letter-spacing: 0.5px;
 		}
 
+		.stat-card-header {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			margin-bottom: 5px;
+		}
+
+		.tariff-term-badge {
+			background: #eff6ff;
+			padding: 2px 12px;
+			border-radius: 8px;
+			font-size: 11px;
+		}
+
 		.stat-card-value {
 			/* width: 40px; */
 			width: auto;
@@ -558,6 +580,8 @@
 			border-top: 1px solid var(--border);
 			font-size: 12px;
 			color: var(--text-secondary);
+			display: flex;
+			gap: 10px;
 		}
 
 		.btn-outline {
@@ -747,127 +771,120 @@
 			@media (max-width: 768px) {
 				width: auto;
 			}
+		}
 
-			.table-filtres-item {
-				display: flex;
-				flex-direction: column;
-				width: 12.5rem;
+		.table-filtres-item {
+			display: flex;
+			flex-direction: column;
+			width: 12.5rem;
+		}
+
+		.table-filtres-label {
+			font-size: 0.875rem;
+			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;
 			}
+		}
 
-			.table-filtres-label {
-				font-size: 0.875rem;
-				font-weight: 500;
-				margin-bottom: 0.25rem;
-			}
+		.status-filters {
+			display: flex;
+			gap: 10px;
+			align-items: center;
+			flex-wrap: wrap;
 
-
-			.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;
+			.status-btn {
+				padding: 4px 12px;
+				border-radius: 16px;
+				border: 1px solid;
+				transition: all 0.2s ease;
+				cursor: pointer;
 				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;
-				}
-			}
-		}
-	}
-
-	.tanstak-table-pagination {
-		display: flex;
-		flex-direction: column;
-		align-items: flex-end;
-		justify-content: space-between;
-		margin-top: 1.5rem;
-		gap: 1rem;
-
-		@media (min-width: 768px) {
-			flex-direction: row;
-		}
-
-		.pagination-info {
-			display: flex;
-			align-items: center;
-			gap: 0.5rem;
-			font-size: 0.875rem;
-
-			&-pages {
-				color: v.$text-p;
-			}
-
-			&-files {
-				color: v.$text-s;
-			}
-		}
-
-		.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: var(--primary-color);
-
-				.icon {
-					width: 18px;
-				}
-
-				/*  */
 
 				&:hover {
-					background-color: v.$bg-light;
+					transform: translateY(-1px);
 				}
 
-				&:disabled {
-					opacity: 0.5;
-					cursor: not-allowed;
+				&:active {
+					transform: translateY(0);
 				}
-			}
 
-			&-pages {
-				display: flex;
-				align-items: center;
-				gap: 0.25rem;
+				// BLOCK статус
+				&--block {
+					background-color: white;
+					color: #dc2626;
+					border-color: #fca5a5;
 
-				button {
-					border: 2px solid v.$border-color-1;
-					padding: 0.25rem 0.75rem;
-					border-radius: 10px;
-					color: var(--primary-color);
-
-					&:disabled {
-						opacity: 0.5;
-						cursor: not-allowed;
+					&:hover {
+						background-color: #fef2f2;
+						border-color: #f87171;
 					}
 
-					&.current {
-						background-color: var(--primary-color);
-						color: v.$white;
+					&.active {
+						background-color: #dc2626;
+						color: white;
+						border-color: #b91c1c;
+						box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
+					}
+				}
+
+				// ACTIVE статус
+				&--active {
+					background-color: white;
+					color: #16a34a;
+					border-color: #86efac;
+
+					&:hover {
+						background-color: #f0fdf4;
+						border-color: #4ade80;
 					}
 
-					&.other {
-						&:hover {
-							background-color: v.$bg-light;
-						}
+					&.active {
+						background-color: #16a34a;
+						color: white;
+						border-color: #15803d;
+						box-shadow: 0 2px 4px rgba(22, 163, 74, 0.2);
+					}
+				}
+
+				// MODERATION статус
+				&--moderation {
+					background-color: white;
+					color: #ca8a04;
+					border-color: #fde047;
+
+					&:hover {
+						background-color: #fefce8;
+						border-color: #facc15;
+					}
+
+					&.active {
+						background-color: #ca8a04;
+						color: white;
+						border-color: #a16207;
+						box-shadow: 0 2px 4px rgba(202, 138, 4, 0.2);
 					}
 				}
 			}
@@ -1018,6 +1035,14 @@
 				}
 			}
 
+			.table-status {
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+				gap: 5px;
+			}
+
 			.table-item-protected {
 				color: #10b981;
 				font-size: 12px;
@@ -1198,6 +1223,111 @@
 			}
 		}
 	}
+
+	.color-image {
+		color: v.$color-image;
+	}
+
+	.color-video {
+		color: v.$color-video;
+	}
+
+	.color-audio {
+		color: v.$color-audio;
+	}
+
+	.color-document {
+		color: v.$color-document;
+	}
+}
+
+.tanstak-table-pagination {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+	justify-content: space-between;
+	margin-top: 1.5rem;
+	gap: 1rem;
+
+	@media (min-width: 768px) {
+		flex-direction: row;
+	}
+
+	.pagination-info {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		font-size: 0.875rem;
+
+		&-pages {
+			color: v.$text-p;
+		}
+
+		&-files {
+			color: v.$text-s;
+		}
+	}
+
+	.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: var(--primary-color);
+
+			.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: var(--primary-color);
+
+				&:disabled {
+					opacity: 0.5;
+					cursor: not-allowed;
+				}
+
+				&.current {
+					background-color: var(--primary-color);
+					color: v.$white;
+				}
+
+				&.other {
+					&:hover {
+						background-color: v.$bg-light;
+					}
+				}
+			}
+		}
+	}
 }
 
 .empty-state {

src/app/styles/module/login.module.scss

@@ -187,6 +187,14 @@
 	margin-bottom: 18px;
 	margin: 20px 0 0 0;
 
+/* 	&.save {
+		background: #0d50e0;
+
+		&:hover:not(:disabled) {
+			background: #355fd3;
+		}
+	} */
+
 	&:hover:not(:disabled) {
 		background: #1d4ed8;
 	}

src/app/styles/tariff-edit-modal.scss

@@ -0,0 +1,194 @@
+@use './variable.scss' as v;
+
+.tariff-edit-modal {
+	padding: 1.5rem;
+	min-width: 500px;
+	max-width: 600px;
+	max-height: 80vh;
+	overflow-y: auto;
+
+	&__title {
+		font-size: 1.5rem;
+		font-weight: bold;
+		margin-bottom: 1.5rem;
+		color: #111827;
+	}
+
+	&__content {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	&__info-section {
+		border-bottom: 1px solid #e5e7eb;
+		padding-bottom: 0.75rem;
+
+		&:last-of-type {
+			border-bottom: none;
+		}
+	}
+
+	&__label {
+		display: block;
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: #374151;
+		margin-bottom: 0.5rem;
+	}
+
+	&__value {
+		color: #111827;
+		word-break: break-word;
+		font-size: 0.875rem;
+	}
+
+	&__input {
+		width: 100%;
+		padding: 0.5rem;
+		border: 1px solid #e5e7eb;
+		border-radius: 0.25rem;
+		font-size: 0.875rem;
+		font-family: inherit;
+		color: #111827;
+		background-color: #ffffff;
+		transition: all 0.2s;
+
+		&:focus {
+			outline: none;
+			border-color: #3b82f6;
+			box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+		}
+
+		&::placeholder {
+			color: #9ca3af;
+		}
+
+		&:disabled {
+			background-color: #f3f4f6;
+			cursor: not-allowed;
+		}
+
+		&[type="number"] {
+			-moz-appearance: textfield;
+
+			&::-webkit-inner-spin-button,
+			&::-webkit-outer-spin-button {
+				display: none;
+			}
+		}
+	}
+
+	&__textarea {
+		width: 100%;
+		padding: 0.5rem;
+		border: 1px solid #e5e7eb;
+		border-radius: 0.25rem;
+		font-size: 0.875rem;
+		font-family: inherit;
+		color: #111827;
+		background-color: #ffffff;
+		resize: vertical;
+		transition: all 0.2s;
+
+		&:focus {
+			outline: none;
+			border-color: #3b82f6;
+			box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+		}
+
+		&::placeholder {
+			color: #9ca3af;
+		}
+
+		&:disabled {
+			background-color: #f3f4f6;
+			cursor: not-allowed;
+		}
+	}
+
+	&__actions {
+		display: flex;
+		justify-content: flex-end;
+		gap: 0.75rem;
+	}
+
+	// Стили для DropDownList внутри модального окна
+	.dropdown {
+		width: 100%;
+	}
+}
+
+// Адаптация для мобильных устройств
+@media (max-width: 768px) {
+	.tariff-edit-modal {
+		min-width: 90vw;
+		padding: 1rem;
+
+		&__title {
+			font-size: 1.25rem;
+			margin-bottom: 1rem;
+		}
+
+		&__info-section {
+			padding-bottom: 0.5rem;
+		}
+
+		&__actions {
+			flex-direction: column-reverse;
+
+			button {
+				width: 100%;
+			}
+		}
+	}
+}
+
+// Стили для скроллбара (опционально)
+.tariff-edit-modal {
+	scrollbar-width: thin;
+	scrollbar-color: #cbd5e1 #f1f5f9;
+
+	&::-webkit-scrollbar {
+		width: 6px;
+	}
+
+	&::-webkit-scrollbar-track {
+		background: #f1f5f9;
+		border-radius: 3px;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background: #cbd5e1;
+		border-radius: 3px;
+
+		&:hover {
+			background: #94a3b8;
+		}
+	}
+}
+
+.tariff-edit-modal__row {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 1rem;
+
+	@media (max-width: 768px) {
+		grid-template-columns: 1fr;
+		gap: 0.75rem;
+	}
+}
+
+.tariff-edit-modal__info-section--half {
+	@extend .tariff-edit-modal__info-section;
+
+	@media (min-width: 769px) {
+		&:first-child {
+			padding-right: 0.5rem;
+		}
+
+		&:last-child {
+			padding-left: 0.5rem;
+		}
+	}
+}

src/app/styles/tariff-remove-modal.scss

@@ -0,0 +1,68 @@
+.tariff-delete-modal {
+	min-width: 400px;
+	max-width: 500px;
+
+	.tariff-delete-modal__title {
+		margin-bottom: 20px;
+		color: #dc2626;
+	}
+
+	.tariff-delete-modal__warning {
+		display: flex;
+		align-items: center;
+		gap: 12px;
+		padding: 16px;
+		background: #fef2f2;
+		border-radius: 8px;
+		margin-bottom: 20px;
+	}
+
+	.warning-icon {
+		font-size: 24px;
+	}
+
+	.warning-text {
+		margin: 0;
+		color: #991b1b;
+	}
+
+	.tariff-delete-modal__info {
+		padding: 12px;
+		background: #f3f4f6;
+		border-radius: 6px;
+		margin-bottom: 20px;
+		font-size: 14px;
+		color: #4b5563;
+	}
+
+	.tariff-delete-modal__confirm {
+		margin-bottom: 24px;
+	}
+
+	.confirm-label {
+		display: block;
+		margin-bottom: 8px;
+		font-size: 14px;
+		color: #374151;
+	}
+
+	.confirm-input {
+		width: 100%;
+		padding: 10px;
+		border: 1px solid #d1d5db;
+		border-radius: 6px;
+		font-size: 14px;
+	}
+
+	.confirm-input:focus {
+		outline: none;
+		border-color: #dc2626;
+		ring: 2px solid #dc2626;
+	}
+
+	.tariff-delete-modal__actions {
+		display: flex;
+		justify-content: flex-end;
+		gap: 12px;
+	}
+}

src/app/ui/content/AppealModerationModal.tsx

@@ -0,0 +1,193 @@
+'use client';
+
+import { useState } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import DropDownList from '@/app/components/dropDownList';
+import { AppealsFile } from '@/app/hooks/react-query/useContentForAppeals';
+import { changeAppealContentStatus } from '@/app/actions/contentActions';
+import { formatDate, formatDateTime } from '@/app/lib/formatDate';
+import { AppealInfo } from '@/app/hooks/react-query/useContentForModeration';
+
+interface AppealModerationModalProps {
+	file: AppealInfo | AppealsFile | null;
+	onClose: () => void;
+}
+
+const getLabel = (status: string) => {
+	switch (status) {
+		case 'REJECTED':
+			return 'Заблокировано';
+		case 'MODERATION':
+			return 'На модерации';
+		case 'APPROVED':
+			return 'Одобрено';
+		default:
+			return status;
+	}
+};
+
+const getStatusValue = (label: string) => {
+	switch (label) {
+		case 'REJECTED':
+			return 'REJECTED';
+		case 'MODERATION':
+			return 'MODERATION';
+		case 'APPROVED':
+			return 'APPROVED';
+		default:
+			return 'MODERATION';
+	}
+};
+
+const StatusBadge = ({ status }: { status: string }) => {
+	const getBadgeClass = () => {
+		switch (status) {
+			case 'REJECTED':
+				return 'status-badge--blocked';
+			case 'MODERATION':
+				return 'status-badge--moderation';
+			case 'APPROVED':
+				return 'status-badge--approved';
+			default:
+				return 'status-badge--default';
+		}
+	};
+	return (
+		<span className={getBadgeClass()}>
+			{getLabel(status)}
+		</span>
+	);
+};
+
+export default function AppealModerationModal({ file, onClose }: AppealModerationModalProps) {
+	const [selectedStatus, setSelectedStatus] = useState<string>(getLabel(file?.status || 'MODERATION'));
+	const [adminComment, setAdminComment] = useState<string>(file?.adminComment || '');
+	const queryClient = useQueryClient();
+
+	const changeStatusMutation = useMutation({
+		mutationFn: async ({ appealId, approve, comment }: { appealId: string; approve: boolean; comment: string }) => {
+			return await changeAppealContentStatus(appealId, approve, comment);
+		},
+		onSuccess: (data) => {
+			if (data !== null && data !== undefined) {
+				toast.success('Статус апелляции успешно изменен');
+				queryClient.invalidateQueries({ queryKey: ['contentForAppeals'] });
+				onClose();
+			} else {
+				toast.error('Не удалось изменить статус апелляции');
+			}
+		},
+		onError: () => {
+			toast.error('Произошла ошибка при изменении статуса');
+		},
+	});
+
+	const handleStatusChange = () => {
+		if (!file?.appealId) {
+			toast.error('ID апелляции не найден');
+			return;
+		}
+		const statusValue = getStatusValue(selectedStatus);
+		const approve = statusValue === 'APPROVED';
+
+		changeStatusMutation.mutate({
+			appealId: file.appealId,
+			approve: approve,
+			comment: adminComment,
+		});
+	};
+
+	if (!file) return null;
+
+	return (
+		<>
+			{/* Информация о файле */}
+			<div className="file-moderation-modal__info-section">
+				<label className="file-moderation-modal__label">Название файла</label>
+				<p className="file-moderation-modal__value">{file?.fileName ? file?.fileName : '---'}</p>
+			</div>
+
+			<div className="file-moderation-modal__info-section">
+				<label className="file-moderation-modal__label">User ID</label>
+				{/* @ts-ignore сейчас нету айди юзера возможно нужно будет удалить или добавить*/}
+				<p className="file-moderation-modal__value">{file?.userId ? file?.userId : '---'}</p>
+			</div>
+
+			<div className="file-moderation-modal__info-section">
+				<label className="file-moderation-modal__label">Причина апелляции</label>
+				<p className="file-moderation-modal__value">{file.appealReason}</p>
+			</div>
+
+			<div className="file-moderation-modal__info-section">
+				<label className="file-moderation-modal__label">Дополнительная информация</label>
+				<p className="file-moderation-modal__value">{file.additionalInfo || '—'}</p>
+			</div>
+
+			<div className="file-moderation-modal__info-section">
+				<label className="file-moderation-modal__label">Дата создания</label>
+				<p className="file-moderation-modal__value">
+					{file.createdAt && (
+						`${formatDate(file.createdAt)}, ${formatDateTime(file.createdAt)}`
+					)}
+				</p>
+			</div>
+
+			{file.resolvedAt && (
+				<div className="file-moderation-modal__info-section">
+					<label className="file-moderation-modal__label">Дата решения</label>
+					<p className="file-moderation-modal__value">
+						{formatDate(file.resolvedAt)}, {formatDateTime(file.resolvedAt)}
+					</p>
+				</div>
+			)}
+
+			<div className="file-moderation-modal__status-section">
+				<label className="file-moderation-modal__status-label">Текущий статус</label>
+				<StatusBadge status={file.status} />
+			</div>
+
+			{/* Комментарий администратора */}
+			<div className="file-moderation-modal__comment-section">
+				<label className="file-moderation-modal__comment-label">Комментарий администратора</label>
+				<textarea
+					className="file-moderation-modal__comment-textarea"
+					value={adminComment}
+					onChange={(e) => setAdminComment(e.target.value)}
+					placeholder="Введите комментарий..."
+					rows={4}
+				/>
+			</div>
+
+			{/* Смена статуса */}
+			<div className="file-moderation-modal__status-change-section">
+				<label className="file-moderation-modal__status-change-label">Изменить статус</label>
+				<DropDownList
+					value={getLabel(selectedStatus)}
+					callBack={(value: string) => setSelectedStatus(value)}
+				>
+					<li value="REJECTED">Заблокировано</li>
+					<li value="APPROVED">Одобрено</li>
+				</DropDownList>
+			</div>
+
+			{/* Кнопки действий */}
+			<div className="file-moderation-modal__actions">
+				<button
+					onClick={onClose}
+					className="btn btn-secondary"
+					disabled={changeStatusMutation.isPending}
+				>
+					Отмена
+				</button>
+				<button
+					onClick={handleStatusChange}
+					className="btn btn-primary"
+					disabled={changeStatusMutation.isPending || selectedStatus === getLabel(file.status)}
+				>
+					{changeStatusMutation.isPending ? 'Сохранение...' : 'Сохранить'}
+				</button>
+			</div>
+		</>
+	);
+}

src/app/ui/content/FileModerationModal.tsx

@@ -0,0 +1,134 @@
+'use client';
+
+import { useState } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { toast } from 'sonner';
+import DropDownList from '@/app/components/dropDownList';
+import { changeModerationContentStatus } from '@/app/actions/contentActions';
+import { ModerationFile } from '@/app/hooks/react-query/useContentForModeration';
+
+interface FileModerationModalProps {
+	file: ModerationFile | null;
+	onClose: () => void;
+}
+
+const getLabel = (status: string) => {
+	switch (status) {
+		case 'BLOCKED':
+			return 'Заблокировано';
+		case 'MODERATION':
+			return 'На модерации';
+		case 'ACTIVE':
+			return 'Одобрено';
+		default:
+			return status;
+	}
+};
+
+const StatusBadge = ({ status }: { status: string }) => {
+	const getBadgeClass = () => {
+		switch (status) {
+			case 'BLOCKED':
+				return 'status-badge--blocked';
+			case 'MODERATION':
+				return 'status-badge--moderation';
+			case 'ACTIVE':
+				return 'status-badge--approved';
+			default:
+				return 'status-badge--default';
+		}
+	};
+	return (
+		<span className={getBadgeClass()}>
+			{getLabel(status)}
+		</span>
+	);
+};
+
+export default function FileModerationModal({ file, onClose }: FileModerationModalProps) {
+	const [selectedStatus, setSelectedStatus] = useState<string>(file?.status || 'MODERATION');
+	const queryClient = useQueryClient();
+
+	const changeStatusMutation = useMutation({
+		mutationFn: async ({ fileId, fileStatus }: { fileId: string; fileStatus: string }) => {
+			return await changeModerationContentStatus(fileId, fileStatus);
+		},
+		onSuccess: (data) => {
+			if (data) {
+				toast.success('Статус файла успешно изменен');
+				queryClient.invalidateQueries({ queryKey: ['contentForModeration'] });
+				onClose();
+			} else {
+				toast.error('Не удалось изменить статус файла');
+			}
+		},
+		onError: () => {
+			toast.error('Произошла ошибка при изменении статуса');
+		},
+	});
+
+	const handleStatusChange = () => {
+		if (!file?.fileId) {
+			toast.error('ID файла не найден');
+			return;
+		}
+
+		changeStatusMutation.mutate({
+			fileId: file.fileId,
+			fileStatus: selectedStatus,
+		});
+	};
+
+	if (!file) return null;
+
+	return (
+		<div className="file-moderation-modal__content">
+			{/* Информация о файле */}
+			<div className="file-moderation-modal__info-section">
+				<label className="file-moderation-modal__label">Название файла</label>
+				<p className="file-moderation-modal__value">{file.fileName}</p>
+			</div>
+
+			<div className="file-moderation-modal__info-section">
+				<label className="file-moderation-modal__label">User ID</label>
+				<p className="file-moderation-modal__value">{file.userId}</p>
+			</div>
+
+			<div className="file-moderation-modal__status-section">
+				<label className="file-moderation-modal__status-label">Текущий статус</label>
+				<StatusBadge status={file.status} />
+			</div>
+
+			{/* Смена статуса */}
+			<div className="file-moderation-modal__status-change-section">
+				<label className="file-moderation-modal__status-change-label">Изменить статус</label>
+				<DropDownList
+					value={getLabel(selectedStatus)}
+					callBack={(value: string) => setSelectedStatus(value)}
+				>
+					<li value="MODERATION">На модерации</li>
+					<li value="BLOCKED">Заблокировано</li>
+					<li value="ACTIVE">Одобрено</li>
+				</DropDownList>
+			</div>
+
+			{/* Кнопки действий */}
+			<div className="file-moderation-modal__actions">
+				<button
+					onClick={onClose}
+					className="btn btn-secondary"
+					disabled={changeStatusMutation.isPending}
+				>
+					Отмена
+				</button>
+				<button
+					onClick={handleStatusChange}
+					className="btn btn-primary"
+					disabled={changeStatusMutation.isPending || selectedStatus === file.status}
+				>
+					{changeStatusMutation.isPending ? 'Сохранение...' : 'Сохранить'}
+				</button>
+			</div>
+		</div>
+	);
+}

src/app/ui/content/FileWithAppealModerationModal.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { useState } from 'react';
+import { ModerationFile } from '@/app/hooks/react-query/useContentForModeration';
+import FileModerationModal from './FileModerationModal';
+import AppealModerationModal from './AppealModerationModal';
+
+interface FileWithAppealModerationModalProps {
+	file: ModerationFile | null;
+	onClose: () => void;
+}
+
+type TabType = 'file' | 'appeal';
+
+export default function FileWithAppealModerationModal({ file, onClose }: FileWithAppealModerationModalProps) {
+	const [activeTab, setActiveTab] = useState<TabType>('file');
+
+	if (!file) return null;
+
+	const hasAppeal = !!file.moderationInfo?.appealInfo;
+
+	return (
+		<div className="file-moderation-modal tabs-modal">
+			<div className="tabs-modal__header">
+				<h2 className="file-moderation-modal__title">
+					Модерация контента
+				</h2>
+
+				<div className="tabs-modal__tabs">
+					<button
+						className={`tabs-modal__tab ${activeTab === 'file' ? 'tabs-modal__tab--active' : ''}`}
+						onClick={() => setActiveTab('file')}
+					>
+						Модерация файла
+					</button>
+
+					<button
+						className={`tabs-modal__tab ${activeTab === 'appeal' ? 'tabs-modal__tab--active' : ''} ${!hasAppeal ? 'tabs-modal__tab--disabled' : ''}`}
+						onClick={() => hasAppeal && setActiveTab('appeal')}
+						disabled={!hasAppeal}
+						title={!hasAppeal ? 'Апелляция отсутствует' : ''}
+					>
+						Модерация апелляции
+					</button>
+				</div>
+			</div>
+
+			<div className="tabs-modal__content">
+				{activeTab === 'file' && (
+					<FileModerationModal file={file} onClose={onClose} />
+				)}
+
+				{activeTab === 'appeal' && hasAppeal && (
+					<AppealModerationModal
+						file={file.moderationInfo.appealInfo}
+						onClose={onClose}
+					/>
+				)}
+			</div>
+		</div>
+	);
+}

src/app/ui/content/content-appeals-table.tsx

@@ -0,0 +1,520 @@
+'use client';
+
+import { useState, useMemo, useEffect, ReactNode, useCallback } 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 } from '@/app/ui/icons/icons';
+import { useTranslations } 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 { FileTypeIcon } from '@/app/components/FileTypeIcon';
+import { downloadFile } from '@/app/actions/contentActions';
+import { useContentForAppeals, AppealsFile } from '@/app/hooks/react-query/useContentForAppeals';
+import AppealModerationModal from '@/app/ui/content/AppealModerationModal';
+import { formatDate, formatDateTime } from '@/app/lib/formatDate';
+import {AppealInfo} from '@/app/hooks/react-query/useContentForModeration';
+
+const cutFileExtension = (fileName: string) => {
+	const lastDotIndex = fileName.lastIndexOf('.');
+	const extension = fileName.substring(lastDotIndex + 1);
+	return extension;
+}
+
+const cutFileName = (fileName: string) => {
+	const MAX_FILE_NAME_LENGTH = 30;
+	const lastDotIndex = fileName.lastIndexOf('.');
+
+	if (lastDotIndex <= 0) {
+		return fileName.length > MAX_FILE_NAME_LENGTH ? fileName.substring(0, MAX_FILE_NAME_LENGTH - 3) + '...' : fileName;
+	}
+
+	const nameWithoutExtension = fileName.substring(0, lastDotIndex);
+	const extension = fileName.substring(lastDotIndex);
+
+	if (fileName.length <= MAX_FILE_NAME_LENGTH) {
+		return fileName;
+	}
+
+	const maxNameLength = MAX_FILE_NAME_LENGTH - extension.length - 3;
+
+	if (maxNameLength <= 0) {
+		return '...' + extension;
+	}
+
+	return nameWithoutExtension.substring(0, maxNameLength) + '...' + extension;
+}
+
+const StatusBadge = ({ status }: { status: string }) => {
+	const statusConfig: Record<string, { className: string; label: string }> = {
+		'REJECTED': { className: 'bg-red-100 text-red-800', label: 'Заблокировано' },
+		'MODERATION': { className: 'bg-yellow-100 text-yellow-800', label: 'На модерации' },
+		'APPROVED': { className: 'bg-green-100 text-green-800', label: 'Одобрено' },
+		'PENDING': { className: 'bg-gray-100 text-gray-800', label: 'На рассмотрении' }
+	};
+
+	const config = statusConfig[status] || { className: 'bg-gray-100 text-gray-800', label: status };
+
+	return (
+		<span className={`px-2 py-1 rounded-full text-xs font-medium ${config.className}`}>
+			{config.label}
+		</span>
+	);
+};
+
+export default function ContentAppealsTable({ permission }: { permission: number }) {
+	// Состояния
+	const [sorting, setSorting] = useState<SortingState>([]);
+	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+	const [pagination, setPagination] = useState({
+		pageIndex: 0,
+		pageSize: 10,
+	});
+	const [openWindow, setOpenWindow] = useState<boolean>(false);
+	const [selectedFile, setSelectedFile] = useState<AppealsFile | AppealInfo | null>(null);
+	const [isFileLoading, setIsFileLoading] = useState(false);
+
+	const t = useTranslations("Global");
+
+	const getSortParams = useMemo(() => {
+		if (sorting.length === 0) {
+			return { sortBy: '', sortDirection: undefined };
+		}
+
+		const sort = sorting[0];
+		const sortByMap: Record<string, string> = {
+			'fileName': 'fileName',
+			'appealId': 'appealId',
+			'status': 'status',
+			'createdAt': 'createdAt',
+		};
+
+		return {
+			sortBy: sortByMap[sort.id] || sort.id,
+			sortDirection: sort.desc ? 'desc' : 'asc'
+		};
+	}, [sorting]);
+
+	const {
+		data: appealsData,
+		isLoading,
+		isError,
+		isFetching,
+		error
+	} = useContentForAppeals(
+		pagination.pageIndex,
+		pagination.pageSize,
+		getSortParams.sortBy,
+		getSortParams.sortDirection
+	);
+
+	const queryClient = useQueryClient();
+
+	const handleViewFile = useCallback((file: AppealsFile) => {
+		console.log('View file:', file);
+		setSelectedFile(file);
+		setOpenWindow(true);
+	}, []);
+
+	const handleCloseModal = useCallback(() => {
+		setOpenWindow(false);
+		setSelectedFile(null);
+	}, []);
+
+	const handleDownload = async (file: AppealsFile) => {
+		setIsFileLoading(true);
+
+		try {
+			const result = await downloadFile(
+				file.fileId,
+				`file-${file.fileId}`
+			);
+
+			const byteCharacters = atob(result.data);
+			const byteNumbers = new Array(byteCharacters.length);
+			for (let i = 0; i < byteCharacters.length; i++) {
+				byteNumbers[i] = byteCharacters.charCodeAt(i);
+			}
+
+			const byteArray = new Uint8Array(byteNumbers);
+			const blob = new Blob([byteArray], { type: result.contentType });
+
+			const url = window.URL.createObjectURL(blob);
+			const a = document.createElement('a');
+			a.href = url;
+			a.download = result.fileName;
+			document.body.appendChild(a);
+			a.click();
+			window.URL.revokeObjectURL(url);
+			document.body.removeChild(a);
+			toast.success(`${t('file-is-downloading')}`);
+		} catch (error) {
+			toast.error(t('failed-to-download-file'));
+		} finally {
+			setIsFileLoading(false);
+		}
+	};
+
+	const columns = useMemo<ColumnDef<AppealsFile>[]>(() => {
+		const allColumns: ColumnDef<AppealsFile>[] = [
+			{
+				accessorKey: 'fileName',
+				header: ({ column }) => (
+					<div className="column start">
+						<span>
+							fileName
+						</span>
+						<button
+							onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+							className="sort-button hidden"
+						>
+							{column.getIsSorted() === 'asc' ?
+								<span><IconArrowUp /></span>
+								: column.getIsSorted() === 'desc' ?
+									<span><IconArrowDown /></span>
+									: <span><IconFilter /></span>
+							}
+						</button>
+					</div>
+				),
+				cell: ({ row }) => (
+					<div className="flex items-center space-x-2 table-item table-item-file-name">
+						<FileTypeIcon type={row.original.fileName} />
+						<div>
+							<div className="font-medium w-full truncate" title={row.original.fileName}>
+								<span className="font-semibold">
+									{/* {cutFileName(row.original.fileName)} */}
+									{row.original.fileName}
+								</span>
+							</div>
+						</div>
+					</div>
+				),
+				enableColumnFilter: true,
+			},
+			{
+				accessorKey: 'appealId',
+				header: ({ column }) => (
+					<div className="column">
+						<span>
+							Appeal ID
+						</span>
+						<button
+							onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+							className="sort-button hidden"
+						>
+							{column.getIsSorted() === 'asc' ?
+								<span><IconArrowUp /></span>
+								: column.getIsSorted() === 'desc' ?
+									<span><IconArrowDown /></span>
+									: <span><IconFilter /></span>
+							}
+						</button>
+					</div>
+				),
+				cell: ({ row }) => (
+					<div className="text-center">
+						{row.original.appealId}
+					</div>
+				),
+			},
+			{
+				accessorKey: 'status',
+				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 }) => (
+					<div className="text-center">
+						<StatusBadge status={row.original.status} />
+					</div>
+				),
+			},
+			{
+				accessorKey: 'createdAt',
+				header: ({ column }) => (
+					<div className="column">
+						<span>
+							createdAt
+						</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">
+						{row.original.createdAt ? formatDate(row.original.createdAt) : '---'}
+						<br />
+						{row.original.createdAt ? formatDateTime(row.original.createdAt) : '---'}
+					</div>
+				),
+			}
+		];
+
+		if (permission === 3) {
+			allColumns.push({
+				id: 'actions',
+				header: () => <div className="column">{t('actions')}</div>,
+				cell: ({ row }) => (
+					<div className="actions">
+						<div className="actions-group">
+							<button
+								onClick={() => handleViewFile(row.original)}
+								className="bg-blue-500 hover:bg-blue-600 text-white p-2 rounded"
+								title="Просмотреть файл"
+							>
+								<IconEye />
+							</button>
+
+							<button
+								onClick={() => handleDownload(row.original)}
+								disabled={isFileLoading}
+								className="table-action-download"
+								title={t('download')}
+							>
+								<IconFileDownload />
+							</button>
+						</div>
+					</div>
+				),
+				enableSorting: false,
+				enableColumnFilter: false,
+			});
+		}
+
+		return allColumns;
+	}, [permission, handleViewFile, handleDownload, isFileLoading, t]);
+
+	// Данные для таблицы
+	const tableData = useMemo(() => {
+		if (!appealsData?.appeals) {
+			return [];
+		}
+		return appealsData.appeals;
+	}, [appealsData]);
+
+	useEffect(() => {
+		const currentPageRows = table.getRowModel().rows;
+		const pageCount = table.getPageCount();
+
+		if (currentPageRows.length === 0 && pagination.pageIndex > 0 && pageCount > 0) {
+			table.setPageIndex(pagination.pageIndex - 1);
+		}
+	}, [tableData, pagination.pageIndex]);
+
+	// Создание таблицы
+	const table = useReactTable({
+		data: tableData,
+		columns,
+		state: {
+			sorting,
+			columnFilters,
+			pagination
+		},
+		manualPagination: true,
+		manualSorting: true,
+		manualFiltering: true,
+		pageCount: appealsData?.totalPages || 0,
+		onPaginationChange: setPagination,
+		onSortingChange: (updater) => {
+			const newSorting = typeof updater === 'function' ? updater(sorting) : updater;
+			setSorting(newSorting);
+			setPagination(prev => ({ ...prev, pageIndex: 0 }));
+		},
+		getCoreRowModel: getCoreRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+		getPaginationRowModel: getPaginationRowModel()
+	});
+
+	if (isError) {
+		return (
+			<div className="text-center text-red-600 p-4">
+				Ошибка загрузки данных: {error?.message || 'Неизвестная ошибка'}
+			</div>
+		);
+	}
+
+	return (
+		<div className="tanstak-table-wrapper">
+			<ModalWindow state={openWindow} callBack={handleCloseModal}>
+				<AppealModerationModal file={selectedFile} onClose={handleCloseModal} />
+			</ModalWindow>
+
+			{/* Фильтры */}
+			<div className="tanstak-table-filtres">
+				<h3>
+					Таблица апелляций
+				</h3>
+				<div className="table-filtres-item">
+					<div className="table-filtres-label">{t('items-per-page')}:</div>
+					<DropDownList
+						value={table.getState().pagination.pageSize}
+						//@ts-ignore
+						callBack={table.setPageSize}
+					>
+						{[5, 10, 20, 50, 100].map(pageSize => (
+							<li key={pageSize} value={pageSize}>
+								{t('show')} {pageSize}
+							</li>
+						))}
+					</DropDownList>
+				</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 ${isFetching ? 'loading' : ''}`}>
+						{isLoading ? (
+							<tr>
+								<td colSpan={columns.length} className="text-center py-8">
+									Загрузка...
+								</td>
+							</tr>
+						) : table.getRowModel().rows.length > 0 ? (
+							table.getRowModel().rows.map(row => (
+								<tr key={row.original.appealId}>
+									{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 py-8">
+									{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>
+							{(appealsData?.currentPage ?? 0) + 1} {t('out-of')} {appealsData?.totalPages ?? 1}
+						</strong>
+					</span>
+					<span className="pagination-info-files">
+						| {t('shown')} {table.getRowModel().rows.length} {t('out-of')} {appealsData?.totalCount ?? 0}
+					</span>
+				</div>
+
+				<div className="pagination-controls">
+					<button
+						className="arrow"
+						onClick={() => table.firstPage()}
+						disabled={!table.getCanPreviousPage()}
+					>
+						<IconDoubleArrowLeft />
+					</button>
+					<button
+						className="arrow"
+						onClick={() => table.previousPage()}
+						disabled={!table.getCanPreviousPage()}
+					>
+						<IconArrowLeft />
+					</button>
+
+					<div className="pagination-controls-pages">
+						{(() => {
+							const totalPages = appealsData?.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;
+
+								return (
+									<button
+										key={pageIndex}
+										className={currentPageIndex === pageIndex ? 'current' : 'other'}
+										onClick={() => table.setPageIndex(pageIndex)}
+									>
+										{pageIndex + 1}
+									</button>
+								);
+							});
+						})()}
+					</div>
+
+					<button
+						className="arrow"
+						onClick={() => table.nextPage()}
+						disabled={!table.getCanNextPage()}
+					>
+						<IconArrowRight />
+					</button>
+					<button
+						className="arrow"
+						onClick={() => table.lastPage()}
+						disabled={!table.getCanNextPage()}
+					>
+						<IconDoubleArrowRight />
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+}

src/app/ui/content/content-moderation-table.tsx

@@ -0,0 +1,613 @@
+'use client';
+
+import { useState, useMemo, useEffect, useCallback } 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 } from '@/app/ui/icons/icons';
+import { useTranslations } 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 { useContentForModeration, ModerationFile, ModerationStatus } from '@/app/hooks/react-query/useContentForModeration';
+import { FileTypeIcon } from '@/app/components/FileTypeIcon';
+import { getFileType } from '@/app/lib/getFileType';
+import Image from 'next/image';
+import { downloadFile } from '@/app/actions/contentActions';
+import FileWithAppealModerationModal from './FileWithAppealModerationModal';
+
+const cutFileExtension = (fileName: string) => {
+	const lastDotIndex = fileName.lastIndexOf('.');
+	const extension = fileName.substring(lastDotIndex + 1);
+	return extension;
+}
+
+const cutFileName = (fileName: string) => {
+	const MAX_FILE_NAME_LENGTH = 30;
+	const lastDotIndex = fileName.lastIndexOf('.');
+
+	if (lastDotIndex <= 0) {
+		return fileName.length > MAX_FILE_NAME_LENGTH ? fileName.substring(0, MAX_FILE_NAME_LENGTH - 3) + '...' : fileName;
+	}
+
+	const nameWithoutExtension = fileName.substring(0, lastDotIndex);
+	const extension = fileName.substring(lastDotIndex);
+
+	if (fileName.length <= MAX_FILE_NAME_LENGTH) {
+		return fileName;
+	}
+
+	const maxNameLength = MAX_FILE_NAME_LENGTH - extension.length - 3;
+
+	if (maxNameLength <= 0) {
+		return '...' + extension;
+	}
+
+	return nameWithoutExtension.substring(0, maxNameLength) + '...' + extension;
+}
+
+const StatusBadge = ({ status }: { status: string }) => {
+	const statusConfig: Record<string, { className: string; label: string }> = {
+		'BLOCKED': { className: 'bg-red-100 text-red-800', label: 'Заблокировано' },
+		'MODERATION': { className: 'bg-yellow-100 text-yellow-800', label: 'На модерации' },
+		'APPROVED': { className: 'bg-green-100 text-green-800', label: 'Одобрено' },
+		'ACTIVE': { className: 'bg-green-100 text-green-800', label: 'ACTIVE' },
+	};
+
+	const config = statusConfig[status] || { className: 'bg-gray-100 text-gray-800', label: status };
+
+	return (
+		<span className={`px-2 py-1 rounded-full text-xs font-medium ${config.className}`}>
+			{config.label}
+		</span>
+	);
+};
+
+const AppealStatusBadge = ({ status }: { status: string }) => {
+	const statusConfig: Record<string, { className: string; label: string }> = {
+		'REJECTED': { className: 'bg-red-100 text-red-800', label: 'Заблокировано' },
+		'MODERATION': { className: 'bg-yellow-100 text-yellow-800', label: 'На модерации' },
+		'APPROVED': { className: 'bg-green-100 text-green-800', label: 'Одобрено' },
+		'PENDING': { className: 'bg-gray-100 text-gray-800', label: 'На рассмотрении' }
+	};
+
+	const config = statusConfig[status] || { className: 'bg-gray-100 text-gray-800', label: status };
+
+	return (
+		<span className={`px-2 py-1 rounded-full text-xs font-medium ${config.className}`}>
+			{config.label}
+		</span>
+	);
+};
+
+export default function ContentModerationTable({ permission }: { permission: number }) {
+	// Состояния
+	const [sorting, setSorting] = useState<SortingState>([]);
+	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+	const [pagination, setPagination] = useState({
+		pageIndex: 0,
+		pageSize: 10,
+	});
+	const [openWindow, setOpenWindow] = useState<boolean>(false);
+	const [selectedFile, setSelectedFile] = useState<ModerationFile | null>(null);
+	const [isFileLoading, setIsFileLoading] = useState(false);
+
+	// НОВЫЕ СОСТОЯНИЯ ДЛЯ ФИЛЬТРОВ
+	const [selectedStatuses, setSelectedStatuses] = useState<ModerationStatus[]>([]);
+	const [isAppeal, setIsAppeal] = useState<boolean | undefined>(undefined);
+
+	const t = useTranslations("Global");
+
+	// Получаем параметры сортировки для API
+	const getSortParams = useMemo(() => {
+		if (sorting.length === 0) {
+			return { sortBy: '', sortDirection: undefined };
+		}
+
+		const sort = sorting[0];
+		const sortByMap: Record<string, string> = {
+			'fileName': 'originalFileName',
+			'userId': 'userId',
+			'status': 'status',
+			'createdAt': 'createdAt',
+		};
+
+		return {
+			sortBy: sortByMap[sort.id] || sort.id,
+			sortDirection: sort.desc ? 'desc' : 'asc'
+		};
+	}, [sorting]);
+
+	// Используем хук с фильтрами
+	const {
+		data: moderationData,
+		isLoading,
+		isError,
+		isFetching,
+		error
+	} = useContentForModeration(
+		pagination.pageIndex,
+		pagination.pageSize,
+		getSortParams.sortBy,
+		getSortParams.sortDirection,
+		selectedStatuses.length > 0 ? selectedStatuses : undefined,
+		isAppeal
+	);
+
+	const queryClient = useQueryClient();
+
+	const toggleStatus = (status: ModerationStatus) => {
+		setSelectedStatuses(prev => {
+			if (prev.includes(status)) {
+				return prev.filter(s => s !== status);
+			} else {
+				return [...prev, status];
+			}
+		});
+		setPagination(prev => ({ ...prev, pageIndex: 0 }));
+	};
+
+	const clearAllStatuses = () => {
+		setSelectedStatuses([]);
+		setPagination(prev => ({ ...prev, pageIndex: 0 }));
+	};
+
+	// Обработчик изменения isAppeal
+	const handleAppealChange = (value: string) => {
+		if (value === 'all') {
+			setIsAppeal(undefined);
+		} else if (value === 'hasAppeal') {
+			setIsAppeal(true);
+		} else if (value === 'noAppeal') {
+			setIsAppeal(false);
+		}
+		setPagination(prev => ({ ...prev, pageIndex: 0 }));
+	};
+
+	const handleViewFile = useCallback((file: ModerationFile) => {
+		console.log('View file:', file);
+		setSelectedFile(file);
+		setOpenWindow(true);
+	}, []);
+
+	const handleCloseModal = useCallback(() => {
+		setOpenWindow(false);
+		setSelectedFile(null);
+	}, []);
+
+	const handleDownload = async (file: any) => {
+		setIsFileLoading(true)
+
+		try {
+			const result = await downloadFile(
+				file.fileId,
+				file.fileName || `file-${file.fileId}`
+			);
+
+			const byteCharacters = atob(result.data);
+			const byteNumbers = new Array(byteCharacters.length);
+			for (let i = 0; i < byteCharacters.length; i++) {
+				byteNumbers[i] = byteCharacters.charCodeAt(i)
+			}
+
+			const byteArray = new Uint8Array(byteNumbers);
+			const blob = new Blob([byteArray], { type: result.contentType });
+
+			const url = window.URL.createObjectURL(blob);
+			const a = document.createElement('a');
+			a.href = url;
+			a.download = result.fileName;
+			document.body.appendChild(a);
+			a.click();
+			window.URL.revokeObjectURL(url);
+			document.body.removeChild(a);
+			toast.success(`${t('file-is-downloading')} - ${file.fileName}`);
+		} catch (error) {
+			toast.error(t('failed-to-download-file'));
+		} finally {
+			setIsFileLoading(false);
+		}
+	}
+
+	const columns = useMemo<ColumnDef<ModerationFile>[]>(() => {
+		const allColumns: ColumnDef<ModerationFile>[] = [
+			{
+				accessorKey: 'fileName',
+				header: ({ column }) => (
+					<div className="column start">
+						<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 }) => (
+					<div className="flex items-center space-x-2 table-item table-item-file-name">
+						{getFileType(row.original.fileName) === 'image' && row.original?.image.length !== 0 ? (
+							<span
+								className="table-item-file-name-image-wrapper"
+							>
+								<Image
+									sizes="40px"
+									src={row.original?.image}
+									alt={row.original?.fileName}
+									unoptimized
+									fill
+									onError={(e) => {
+										const target = e.target as HTMLImageElement;
+										target.src = '/images/no-image.png';
+									}}
+								/>
+							</span>
+						) : (
+							<FileTypeIcon type={row.original.fileName} />
+						)}
+						<div>
+							<div className="font-medium w-full truncate" title={row.original.fileName}>
+								<span className="font-semibold">
+									{cutFileName(row.original.fileName)}
+								</span>
+							</div>
+						</div>
+					</div>
+				),
+				enableColumnFilter: true,
+			},
+			{
+				accessorKey: 'userId',
+				header: ({ column }) => (
+					<div className="column">
+						<span>
+							User ID
+						</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">
+						{row.original.userId}
+					</div>
+				),
+			},
+			{
+				accessorKey: 'status',
+				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 }) => (
+					<div className="table-status">
+						<div>
+							<StatusBadge status={row.original.status} />
+						</div>
+						{row.original.moderationInfo.appealInfo?.status && (
+							<div>
+								{t('appeal')}: <AppealStatusBadge status={row.original.moderationInfo.appealInfo?.status} />
+							</div>
+						)}
+					</div>
+				),
+			},
+		];
+
+		if (permission === 3) {
+			allColumns.push({
+				id: 'actions',
+				header: () => <div className="column">{t('actions')}</div>,
+				cell: ({ row }) => (
+					<div className="actions">
+						<div className="actions-group">
+							<button
+								onClick={() => handleViewFile(row.original)}
+								className="bg-blue-500 hover:bg-blue-600 text-white p-2 rounded"
+								title="Просмотреть файл"
+							>
+								<IconEye />
+							</button>
+
+							<button
+								onClick={() => handleDownload(row.original)}
+								disabled={isFileLoading}
+								className="table-action-download"
+								title={t('download')}
+							>
+								<IconFileDownload />
+							</button>
+						</div>
+					</div>
+				),
+				enableSorting: false,
+				enableColumnFilter: false,
+			});
+		}
+
+		return allColumns;
+	}, [permission, handleViewFile, t]);
+
+	// Фильтрация данных (клиентская фильтрация, если нужно)
+	const filteredData = useMemo(() => {
+		if (!moderationData?.files) {
+			return [];
+		}
+
+		let result = [...moderationData.files];
+
+		return result;
+	}, [moderationData]);
+
+	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
+		},
+		manualPagination: true,
+		manualSorting: true,
+		manualFiltering: true,
+		pageCount: moderationData?.totalPages || 0,
+		onPaginationChange: setPagination,
+		onSortingChange: (updater) => {
+			const newSorting = typeof updater === 'function' ? updater(sorting) : updater;
+			setSorting(newSorting);
+			setPagination(prev => ({ ...prev, pageIndex: 0 }));
+		},
+		getCoreRowModel: getCoreRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+		getPaginationRowModel: getPaginationRowModel()
+	});
+
+	if (isError) {
+		return (
+			<div className="text-center text-red-600 p-4">
+				Ошибка загрузки данных: {error?.message || 'Неизвестная ошибка'}
+			</div>
+		);
+	}
+
+	return (
+		<div className="tanstak-table-wrapper">
+			<ModalWindow state={openWindow} callBack={handleCloseModal}>
+				<FileWithAppealModerationModal file={selectedFile} onClose={handleCloseModal} />
+			</ModalWindow>
+			<h3>
+				Таблица модерации контента
+			</h3>
+			{/* Фильтры */}
+			<div className="tanstak-table-filtres">
+				{/* Блок фильтрации по статусам */}
+				<div className="">
+					<div className="table-filtres-label">Статусы:</div>
+					<div className="status-filters">
+						<button
+							onClick={() => toggleStatus('BLOCKED')}
+							className={`status-btn status-btn--block ${selectedStatuses.includes('BLOCKED') ? 'active' : ''}`}
+						>
+							BLOCKED
+						</button>
+						<button
+							onClick={() => toggleStatus('ACTIVE')}
+							className={`status-btn status-btn--active ${selectedStatuses.includes('ACTIVE') ? 'active' : ''}`}
+						>
+							ACTIVE
+						</button>
+						<button
+							onClick={() => toggleStatus('MODERATION')}
+							className={`status-btn status-btn--moderation ${selectedStatuses.includes('MODERATION') ? 'active' : ''}`}
+						>
+							MODERATION
+						</button>
+					</div>
+				</div>
+
+				{/* Блок фильтрации по апелляции */}
+				<div className="table-filtres-item appeal">
+					<div className="table-filtres-label">Апелляция:</div>
+					<DropDownList
+						value={isAppeal === undefined ? t('all') : t('has-appeal')}
+						callBack={handleAppealChange}
+					>
+						<li value="all">
+							{t('all')}
+						</li>
+						<li value="hasAppeal">
+							{t('has-appeal')}
+						</li>
+						{/* <li value="noAppeal">Без апелляции</li> */}
+					</DropDownList>
+				</div>
+
+				<div className="table-filtres-item">
+					<div className="table-filtres-label">{t('items-per-page')}:</div>
+					<DropDownList
+						value={table.getState().pagination.pageSize}
+						//@ts-ignore
+						callBack={table.setPageSize}
+					>
+						{[5, 10, 20, 50, 100].map(pageSize => (
+							<li key={pageSize} value={pageSize}>
+								{t('show')} {pageSize}
+							</li>
+						))}
+					</DropDownList>
+				</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 ${isFetching ? 'loading' : ''}`}>
+						{isLoading ? (
+							<tr>
+								<td colSpan={columns.length} className="text-center py-8">
+									Загрузка...
+								</td>
+							</tr>
+						) : table.getRowModel().rows.length > 0 ? (
+							table.getRowModel().rows.map(row => (
+								<tr key={row.original.fileId}>
+									{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 py-8">
+									{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>
+							{(moderationData?.currentPage ?? 0) + 1} {t('out-of')} {moderationData?.totalPages ?? 1}
+						</strong>
+					</span>
+					<span className="pagination-info-files">
+						| {t('shown')} {table.getRowModel().rows.length} {t('out-of')} {moderationData?.totalCount ?? 0}
+					</span>
+				</div>
+
+				<div className="pagination-controls">
+					<button
+						className="arrow"
+						onClick={() => table.firstPage()}
+						disabled={!table.getCanPreviousPage()}
+					>
+						<IconDoubleArrowLeft />
+					</button>
+					<button
+						className="arrow"
+						onClick={() => table.previousPage()}
+						disabled={!table.getCanPreviousPage()}
+					>
+						<IconArrowLeft />
+					</button>
+
+					<div className="pagination-controls-pages">
+						{(() => {
+							const totalPages = moderationData?.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;
+
+								return (
+									<button
+										key={pageIndex}
+										className={currentPageIndex === pageIndex ? 'current' : 'other'}
+										onClick={() => table.setPageIndex(pageIndex)}
+									>
+										{pageIndex + 1}
+									</button>
+								);
+							});
+						})()}
+					</div>
+
+					<button
+						className="arrow"
+						onClick={() => table.nextPage()}
+						disabled={!table.getCanNextPage()}
+					>
+						<IconArrowRight />
+					</button>
+					<button
+						className="arrow"
+						onClick={() => table.lastPage()}
+						disabled={!table.getCanNextPage()}
+					>
+						<IconDoubleArrowRight />
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+}

src/app/ui/forms/create-staff-form.tsx

@@ -301,17 +301,6 @@ export function CreateStaffForm({ onSuccess }: { onSuccess?: () => void }) {
 					<div className="templates-section">
 						<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}>
 							<h3 style={{ margin: 0 }}>{tGeneral('template-management')}</h3>
-							<div style={{ display: 'flex', gap: '8px' }}>
-								<button
-									type="button"
-									onClick={() => setShowSaveDialog(true)}
-									className="btn-icon"
-									title={tGeneral('save-current-as-template')}
-									disabled={isPending}
-								>
-									<IconDiscet />
-								</button>
-							</div>
 						</div>
 
 						<div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
@@ -412,18 +401,30 @@ export function CreateStaffForm({ onSuccess }: { onSuccess?: () => void }) {
 					</p>
 				)}
 
-				<button
-					type="submit"
-					className={`${styles['btn']}`}
-					disabled={isPending}
-				>
-					{tGeneral('create')}
-					{isPending && (
-						<div className="loading-animation">
-							<div className="global-spinner"></div>
-						</div>
-					)}
-				</button>
+				<div style={{ display: 'flex', gap: '8px' }}>
+					<button
+						type="button"
+						onClick={() => setShowSaveDialog(true)}
+						className={`${styles['btn']} ${styles['save']}`}
+						title={tGeneral('save-current-as-template')}
+						disabled={isPending}
+					>
+						{tGeneral('save-template')}
+					</button>
+
+					<button
+						type="submit"
+						className={`${styles['btn']}`}
+						disabled={isPending}
+					>
+						{tGeneral('create-stuff')}
+						{isPending && (
+							<div className="loading-animation">
+								<div className="global-spinner"></div>
+							</div>
+						)}
+					</button>
+				</div>
 			</form>
 
 			<ModalWindow state={showSaveDialog} callBack={setShowSaveDialog}>

src/app/ui/staff-management/tanstak-stuff-table.tsx

@@ -49,7 +49,7 @@ export interface StaffMember {
 	};
 }
 
-export default function TanstakStuffTable() {
+export default function TanstakStuffTable({ permission }: { permission: 0 | 1 | 3 }) {
 	// Состояния
 	const [sorting, setSorting] = useState<SortingState>([]);
 	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
@@ -140,9 +140,9 @@ export default function TanstakStuffTable() {
 		}
 	});
 
-	// Определение колонок для сотрудников
-	const columns = useMemo<ColumnDef<StaffMember>[]>(
-		() => [
+	// Определение колонок
+	const columns = useMemo<ColumnDef<StaffMember>[]>(() => {
+		const allColumns: ColumnDef<StaffMember>[] = [
 			{
 				accessorKey: 'id',
 				header: ({ column }) => (
@@ -282,7 +282,10 @@ export default function TanstakStuffTable() {
 					)
 				},
 			},
-			{
+		]
+
+		if (permission === 3) {
+			allColumns.push({
 				id: 'actions',
 				header: () => {
 					return (
@@ -320,10 +323,11 @@ export default function TanstakStuffTable() {
 				),
 				enableSorting: false,
 				enableColumnFilter: false,
-			},
-		],
-		[t]
-	);
+			},);
+		}
+
+		return allColumns;
+	}, [permission]);
 
 	const handleView = (staff: StaffMember) => {
 		setSelectedStaff(staff);

src/app/ui/tariff-management/TariffCreateModal.tsx

@@ -0,0 +1,232 @@
+import { useState } from 'react';
+import { useMutation } from '@tanstack/react-query';
+import { addTariffs } from '@/app/actions/tariffActions';
+import { toast } from 'sonner';
+import DropDownList from '@/app/components/dropDownList';
+
+interface NewTariff {
+	name: string;
+	price: number;
+	tokens: number;
+	maxFilesCount: number;
+	diskSize: number;
+	maxUsers: number;
+	description: string;
+	tariffTerm: 'MONTHLY' | 'YEAR';
+	accountType: 'b2c' | 'b2b' | 'token';
+	type: string;
+}
+
+export function TariffCreateModal({ onClose, onSuccess }: {
+	onClose: () => void;
+	onSuccess: () => void;
+}) {
+	const [formData, setFormData] = useState<NewTariff>({
+		price: 0,
+		name: '',
+		tokens: 0,
+		maxFilesCount: 0,
+		diskSize: 0,
+		maxUsers: 0,
+		description: '',
+		tariffTerm: 'MONTHLY',
+		accountType: 'b2c',
+		type: ''
+	});
+
+	const [typeError, setTypeError] = useState('');
+
+	const createTariffMutation = useMutation({
+		mutationFn: async () => {
+			return await addTariffs(
+				formData.price,
+				formData.name,
+				formData.type,
+				formData.tokens,
+				formData.maxFilesCount,
+				formData.diskSize,
+				formData.maxUsers,
+				formData.description,
+				formData.tariffTerm,
+				formData.accountType
+			);
+		},
+		onSuccess: (data) => {
+			if (data !== null && data !== undefined) {
+				toast.success('Тариф успешно создан');
+				onSuccess();
+			} else {
+				toast.error('Не удалось создать тариф');
+			}
+		},
+		onError: () => {
+			toast.error('Произошла ошибка при создании тарифа');
+		},
+	});
+
+	const handleSubmit = () => {
+		if (!formData.type.trim()) {
+			setTypeError('Введите тип тарифа');
+			return;
+		}
+		setTypeError('');
+		createTariffMutation.mutate();
+	};
+
+	const handleChange = (field: string, value: any) => {
+		setFormData(prev => ({ ...prev, [field]: value }));
+		if (field === 'type') {
+			setTypeError('');
+		}
+	};
+
+	return (
+		<div className="tariff-edit-modal">
+			<h2 className="tariff-edit-modal__title">Создание нового тарифа</h2>
+
+			<div className="tariff-edit-modal__content">
+				<div className="tariff-edit-modal__info-section">
+					<label className="tariff-edit-modal__label">Тип тарифа *</label>
+					<input
+						type="text"
+						className={`tariff-edit-modal__input ${typeError ? 'error' : ''}`}
+						value={formData.type}
+						onChange={(e) => handleChange('type', e.target.value)}
+						placeholder="Например: BASE, PREMIUM, TOKEN_1000"
+					/>
+					{typeError && <div className="error-message">{typeError}</div>}
+				</div>
+
+				<div className="tariff-edit-modal__info-section">
+					<label className="tariff-edit-modal__label">Название</label>
+					<input
+						type="text"
+						className="tariff-edit-modal__input"
+						value={formData.name}
+						onChange={(e) => handleChange('name', e.target.value)}
+						placeholder="Введите название тарифа"
+					/>
+				</div>
+
+				<div className="tariff-edit-modal__info-section">
+					<label className="tariff-edit-modal__label">Цена (₽)</label>
+					<input
+						type="number"
+						className="tariff-edit-modal__input"
+						value={formData.price}
+						onChange={(e) => handleChange('price', Number(e.target.value))}
+						placeholder="Введите цену"
+						min="0"
+					/>
+				</div>
+
+				<div className="tariff-edit-modal__info-section">
+					<label className="tariff-edit-modal__label">Количество токенов</label>
+					<input
+						type="number"
+						className="tariff-edit-modal__input"
+						value={formData.tokens}
+						onChange={(e) => handleChange('tokens', Number(e.target.value))}
+						placeholder="Введите количество токенов"
+						min="0"
+					/>
+				</div>
+
+				<div className="tariff-edit-modal__info-section">
+					<label className="tariff-edit-modal__label">Максимальное количество файлов</label>
+					<input
+						type="number"
+						className="tariff-edit-modal__input"
+						value={formData.maxFilesCount}
+						onChange={(e) => handleChange('maxFilesCount', Number(e.target.value))}
+						placeholder="Введите максимальное количество файлов"
+						min="0"
+					/>
+				</div>
+
+				<div className="tariff-edit-modal__info-section">
+					<label className="tariff-edit-modal__label">Размер диска (байт)</label>
+					<input
+						type="number"
+						className="tariff-edit-modal__input"
+						value={formData.diskSize}
+						onChange={(e) => handleChange('diskSize', Number(e.target.value))}
+						placeholder="Введите размер диска в байтах"
+						min="0"
+						step="1"
+					/>
+				</div>
+
+				<div className="tariff-edit-modal__info-section">
+					<label className="tariff-edit-modal__label">Максимальное количество пользователей</label>
+					<input
+						type="number"
+						className="tariff-edit-modal__input"
+						value={formData.maxUsers}
+						onChange={(e) => handleChange('maxUsers', Number(e.target.value))}
+						placeholder="Введите максимальное количество пользователей"
+						min="0"
+					/>
+				</div>
+
+				<div className="tariff-edit-modal__info-section">
+					<label className="tariff-edit-modal__label">Срок тарифа</label>
+					<DropDownList
+						value={formData.tariffTerm === 'YEAR' ? 'Год' : 'Месяц'}
+						callBack={(value: string) => {
+							handleChange('tariffTerm', value);
+						}}
+					>
+						<li value="MONTHLY">Месяц</li>
+						<li value="YEAR">Год</li>
+					</DropDownList>
+				</div>
+
+				<div className="tariff-edit-modal__info-section">
+					<label className="tariff-edit-modal__label">Тип аккаунта</label>
+					<DropDownList
+						value={
+							formData.accountType === 'b2c' ? 'B2C' :
+								formData.accountType === 'b2b' ? 'B2B' : 'Token'
+						}
+						callBack={(value: string) => {
+							handleChange('accountType', value);
+						}}
+					>
+						<li value="b2c">B2C</li>
+						<li value="b2b">B2B</li>
+						<li value="token">Token</li>
+					</DropDownList>
+				</div>
+
+				<div className="tariff-edit-modal__info-section">
+					<label className="tariff-edit-modal__label">Описание</label>
+					<textarea
+						className="tariff-edit-modal__textarea"
+						value={formData.description}
+						onChange={(e) => handleChange('description', e.target.value)}
+						placeholder="Введите описание тарифа"
+						rows={4}
+					/>
+				</div>
+
+				<div className="tariff-edit-modal__actions">
+					<button
+						onClick={onClose}
+						className="btn btn-secondary"
+						disabled={createTariffMutation.isPending}
+					>
+						Отмена
+					</button>
+					<button
+						onClick={handleSubmit}
+						className="btn btn-primary"
+						disabled={createTariffMutation.isPending}
+					>
+						{createTariffMutation.isPending ? 'Создание...' : 'Создать'}
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+}

src/app/ui/tariff-management/TariffDeleteModal.tsx

@@ -0,0 +1,92 @@
+import { useState } from 'react';
+import { useMutation } from '@tanstack/react-query';
+import { removeTariffs } from '@/app/actions/tariffActions';
+import { toast } from 'sonner';
+
+interface TariffDeleteModalProps {
+	tariffId: number;
+	tariffName: string;
+	onClose: () => void;
+	onSuccess: () => void;
+}
+
+export function TariffDeleteModal({ tariffId, tariffName, onClose, onSuccess }: TariffDeleteModalProps) {
+	const [isConfirmText, setIsConfirmText] = useState('');
+	const confirmText = 'УДАЛИТЬ';
+
+	const deleteTariffMutation = useMutation({
+		mutationFn: async () => {
+			return await removeTariffs(tariffId);
+		},
+		onSuccess: (data) => {
+			if (data !== null && data !== undefined) {
+				toast.success('Тариф успешно удален');
+				onSuccess();
+			} else {
+				toast.error('Не удалось удалить тариф');
+			}
+		},
+		onError: () => {
+			toast.error('Произошла ошибка при удалении тарифа');
+		},
+	});
+
+	const handleDelete = () => {
+		deleteTariffMutation.mutate();
+	};
+
+	const getDisplayName = (name: string) => {
+		if (name) {
+			return name.toUpperCase().replace(/_/g, ' ');
+		}
+		return `ID: ${tariffId}`;
+	};
+
+	return (
+		<div className="tariff-delete-modal">
+			<h2 className="tariff-delete-modal__title">Удаление тарифа</h2>
+
+			<div className="tariff-delete-modal__content">
+				<div className="tariff-delete-modal__warning">
+					<p className="warning-text">
+						Вы действительно хотите удалить тариф <strong>"{getDisplayName(tariffName)}"</strong>?
+					</p>
+				</div>
+
+				<div className="tariff-delete-modal__info">
+					<p>Это действие невозможно отменить.</p>
+				</div>
+
+				<div className="tariff-delete-modal__confirm">
+					<label className="confirm-label">
+						Для подтверждения введите <strong>{confirmText}</strong>
+					</label>
+					<input
+						type="text"
+						className="confirm-input"
+						value={isConfirmText}
+						onChange={(e) => setIsConfirmText(e.target.value)}
+						placeholder={`Введите "${confirmText}"`}
+					/>
+				</div>
+
+				<div className="tariff-delete-modal__actions">
+					<button
+						onClick={onClose}
+						className="btn btn-secondary"
+						disabled={deleteTariffMutation.isPending}
+					>
+						Отмена
+					</button>
+					<button
+						onClick={handleDelete}
+						className="btn btn-danger"
+						disabled={isConfirmText !== confirmText || deleteTariffMutation.isPending}
+					>
+						{deleteTariffMutation.isPending ? 'Удаление...' : 'Удалить'}
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+}

src/app/ui/tariff-management/TariffEditModal.tsx

@@ -0,0 +1,223 @@
+import { useEffect, useState } from 'react';
+import { useMutation } from '@tanstack/react-query';
+import { updateTariffs } from '@/app/actions/tariffActions';
+import { toast } from 'sonner';
+import DropDownList from '@/app/components/dropDownList';
+import { convertBytes } from '@/app/lib/convertBytes';
+
+export interface EditingTariff {
+	id: number;
+	name: string;
+	type: string;
+	price: number;
+	tokens: number;
+	maxFilesCount: number;
+	diskSize: number;
+	maxUsers: number;
+	description: string;
+	tariffTerm: string;
+}
+
+export function TariffEditModal({ tariff, onClose, onSuccess }: {
+	tariff: EditingTariff;
+	onClose: () => void;
+	onSuccess: () => void;
+}) {
+	const [formData, setFormData] = useState({
+		price: tariff.price,
+		name: tariff.name,
+		tokens: tariff.tokens,
+		maxFilesCount: tariff.maxFilesCount,
+		diskSize: tariff.diskSize,
+		maxUsers: tariff.maxUsers,
+		description: tariff.description,
+		tariffTerm: tariff.tariffTerm === 'YEAR' ? 'YEAR' : 'MONTHLY' as 'MONTHLY' | 'YEAR',
+		accountType: tariff.type.includes('TOKEN') ? 'token' : tariff.type.includes('STUDIO') ? 'b2b' : 'b2c' as 'b2c' | 'b2b' | 'token'
+	});
+
+	const updateTariffMutation = useMutation({
+		mutationFn: async () => {
+			return await updateTariffs(
+				tariff.id,
+				formData.price,
+				formData.name,
+				tariff.type,
+				formData.tokens,
+				formData.maxFilesCount,
+				formData.diskSize,
+				formData.maxUsers,
+				formData.description,
+				formData.tariffTerm,
+				formData.accountType
+			);
+		},
+		onSuccess: (data) => {
+			if (data !== null && data !== undefined) {
+				toast.success('Тариф успешно обновлен');
+
+				onSuccess();
+			} else {
+				toast.error('Не удалось обновить тариф');
+			}
+		},
+		onError: () => {
+			toast.error('Произошла ошибка при обновлении тарифа');
+		},
+	});
+
+	const handleSubmit = () => {
+		updateTariffMutation.mutate();
+	};
+
+	const handleChange = (field: string, value: any) => {
+		setFormData(prev => ({ ...prev, [field]: value }));
+	};
+
+	return (
+		<div className="tariff-edit-modal">
+			<h2 className="tariff-edit-modal__title">Редактирование тарифа</h2>
+
+			<div className="tariff-edit-modal__content">
+				<div className="tariff-edit-modal__info-section">
+					<label className="tariff-edit-modal__label">ID тарифа</label>
+					<p className="tariff-edit-modal__value">{tariff.id}</p>
+				</div>
+
+				<div className="tariff-edit-modal__info-section">
+					<label className="tariff-edit-modal__label">Тип тарифа</label>
+					<p className="tariff-edit-modal__value">{tariff.type}</p>
+				</div>
+
+				<div className="tariff-edit-modal__info-section">
+					<label className="tariff-edit-modal__label">Название</label>
+					<input
+						type="text"
+						className="tariff-edit-modal__input"
+						value={formData.name}
+						onChange={(e) => handleChange('name', e.target.value)}
+						placeholder="Введите название тарифа"
+					/>
+				</div>
+
+				<div className="tariff-edit-modal__info-section">
+					<label className="tariff-edit-modal__label">Цена (₽)</label>
+					<input
+						type="number"
+						className="tariff-edit-modal__input"
+						value={formData.price}
+						onChange={(e) => handleChange('price', Number(e.target.value))}
+						placeholder="Введите цену"
+						min="0"
+					/>
+				</div>
+
+				<div className="tariff-edit-modal__info-section">
+					<label className="tariff-edit-modal__label">Количество токенов</label>
+					<input
+						type="number"
+						className="tariff-edit-modal__input"
+						value={formData.tokens}
+						onChange={(e) => handleChange('tokens', Number(e.target.value))}
+						placeholder="Введите количество токенов"
+						min="0"
+					/>
+				</div>
+
+				<div className="tariff-edit-modal__info-section">
+					<label className="tariff-edit-modal__label">Максимальное количество файлов</label>
+					<input
+						type="number"
+						className="tariff-edit-modal__input"
+						value={formData.maxFilesCount}
+						onChange={(e) => handleChange('maxFilesCount', Number(e.target.value))}
+						placeholder="Введите максимальное количество файлов"
+						min="0"
+					/>
+				</div>
+
+				<div className="tariff-edit-modal__info-section">
+					<label className="tariff-edit-modal__label">Размер диска</label>
+					<input
+						type="number"
+						className="tariff-edit-modal__input"
+						value={formData.diskSize}
+						onChange={(e) => handleChange('diskSize', Number(e.target.value))}
+						placeholder="Введите размер диска в ГБ"
+						min="0"
+						step="1"
+					/>
+				</div>
+
+				<div className="tariff-edit-modal__info-section">
+					<label className="tariff-edit-modal__label">Максимальное количество пользователей</label>
+					<input
+						type="number"
+						className="tariff-edit-modal__input"
+						value={formData.maxUsers}
+						onChange={(e) => handleChange('maxUsers', Number(e.target.value))}
+						placeholder="Введите максимальное количество пользователей"
+						min="0"
+					/>
+				</div>
+
+				<div className="tariff-edit-modal__info-section">
+					<label className="tariff-edit-modal__label">Срок тарифа</label>
+					<DropDownList
+						value={formData.tariffTerm === 'YEAR' ? 'Год' : 'Месяц'}
+						callBack={(value: string) => {
+							handleChange('tariffTerm', value);
+						}}
+					>
+						<li value="MONTHLY">Месяц</li>
+						<li value="YEAR">Год</li>
+					</DropDownList>
+				</div>
+
+				<div className="tariff-edit-modal__info-section">
+					<label className="tariff-edit-modal__label">Тип аккаунта</label>
+					<DropDownList
+						value={
+							formData.accountType === 'b2c' ? 'B2C' :
+								formData.accountType === 'b2b' ? 'B2B' : 'Token'
+						}
+						callBack={(value: string) => {
+							handleChange('accountType', value);
+						}}
+					>
+						<li value="b2c">B2C</li>
+						<li value="b2b">B2B</li>
+						<li value="token">Token</li>
+					</DropDownList>
+				</div>
+
+				<div className="tariff-edit-modal__info-section">
+					<label className="tariff-edit-modal__label">Описание</label>
+					<textarea
+						className="tariff-edit-modal__textarea"
+						value={formData.description}
+						onChange={(e) => handleChange('description', e.target.value)}
+						placeholder="Введите описание тарифа"
+						rows={4}
+					/>
+				</div>
+
+				<div className="tariff-edit-modal__actions">
+					<button
+						onClick={onClose}
+						className="btn btn-secondary"
+						disabled={updateTariffMutation.isPending}
+					>
+						Отмена
+					</button>
+					<button
+						onClick={handleSubmit}
+						className="btn btn-primary"
+						disabled={updateTariffMutation.isPending}
+					>
+						{updateTariffMutation.isPending ? 'Сохранение...' : 'Сохранить'}
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+}

src/app/ui/tariff-management/tariff-management.tsx

@@ -0,0 +1,271 @@
+'use client'
+
+import { useTariffsData } from '@/app/hooks/react-query/useTariffsData';
+import { useEffect, useState } from 'react';
+import { convertBytes } from '@/app/lib/convertBytes';
+import { IconDoubleArrowRight, IconArrowRight, IconDoubleArrowLeft, IconArrowLeft } from '@/app/ui/icons/icons';
+import ModalWindow from '@/app/components/modalWindow';
+import { useQueryClient } from '@tanstack/react-query';
+import { EditingTariff, TariffEditModal } from './TariffEditModal';
+import { TariffCreateModal } from './TariffCreateModal';
+import { TariffDeleteModal } from './TariffDeleteModal';
+
+export default function TariffManagment() {
+	const [currentPage, setCurrentPage] = useState(0);
+	const [isModalOpen, setIsModalOpen] = useState(false);
+	const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+	const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+	const [editingTariff, setEditingTariff] = useState<EditingTariff | null>(null);
+	const [deletingTariff, setDeletingTariff] = useState<{ id: number; name: string } | null>(null);
+
+	const { data: tariffData, isLoading, isError, isFetching, error } = useTariffsData(currentPage);
+	const queryClient = useQueryClient();
+
+	useEffect(() => {
+		console.log(tariffData);
+	}, [tariffData])
+
+	useEffect(() => {
+		if (tariffData && tariffData.page !== currentPage) {
+			setCurrentPage(tariffData.page);
+		}
+	}, [tariffData, currentPage]);
+
+	const handlePageChange = (newPage: number) => {
+		if (tariffData && newPage >= 0 && newPage < tariffData.total_pages) {
+			setCurrentPage(newPage);
+		}
+	};
+
+	const handleEditClick = (tariff: any) => {
+		setEditingTariff({
+			id: tariff.id,
+			name: tariff.name,
+			type: tariff.type,
+			price: tariff.price,
+			tokens: tariff.tokens,
+			maxFilesCount: tariff.maxFilesCount,
+			diskSize: tariff.diskSize,
+			maxUsers: tariff.maxUsers,
+			description: tariff.description,
+			tariffTerm: tariff.tariffTerm
+		});
+		setIsModalOpen(true);
+	};
+
+	const handleDeleteClick = (tariff: any) => {
+		setDeletingTariff({
+			id: tariff.id,
+			name: tariff.name || tariff.type
+		});
+		setIsDeleteModalOpen(true);
+	};
+
+	const formatPrice = (price: number) => {
+		return new Intl.NumberFormat('ru-RU').format(price);
+	};
+
+	const getDisplayName = (tariff: any) => {
+		if (tariff.name) {
+			return tariff.name.toUpperCase().replace(/_/g, ' ');
+		}
+		return tariff.type.replace(/_/g, ' ');
+	};
+
+	if (isLoading) {
+		return (
+			<div className="admin-content">
+				<div className="content-header">
+					<h3>Управление тарифными планами</h3>
+				</div>
+				<div className="content-body">
+					<div className="loading-spinner">Загрузка тарифов...</div>
+				</div>
+			</div>
+		);
+	}
+
+	if (isError) {
+		return (
+			<div className="admin-content">
+				<div className="content-header">
+					<h3>Управление тарифными планами</h3>
+				</div>
+				<div className="content-body">
+					<div className="error-message">
+						Ошибка загрузки тарифов: {error?.message || 'Неизвестная ошибка'}
+					</div>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="admin-content">
+			<div className="content-header">
+				<h3>Управление тарифными планами</h3>
+				<div className="content-header-actions">
+					<button
+						className="btn btn-primary"
+						onClick={() => setIsCreateModalOpen(true)}
+					>
+						<span>➕</span>
+						<span>Создать тариф</span>
+					</button>
+				</div>
+			</div>
+			<div className="content-body" id="plans-container">
+				<div className="stats-grid">
+					{tariffData?.tariffs?.map((tariff) => (
+						<div key={tariff.id} className="stat-card">
+							<div className="stat-card-header">
+								<span className="stat-card-title">{getDisplayName(tariff)}</span>
+								{tariff.tariffTerm && (
+									<span className="tariff-term-badge">{tariff.tariffTerm}</span>
+								)}
+							</div>
+							<div className="stat-card-value">₽{formatPrice(tariff.price)}</div>
+							<div className="stat-card-label">
+								{tariff.tokens > 0 && `${tariff.tokens.toLocaleString()} токенов`}
+								{tariff.diskSize > 0 && ` • ${convertBytes(tariff.diskSize)}`}
+								{tariff.maxFilesCount > 0 && ` • ${tariff.maxFilesCount} файлов`}
+							</div>
+							{tariff.description && (
+								<div className="stat-card-description">{tariff.description}</div>
+							)}
+							<div className="stat-card-footer">
+								<button
+									className="btn btn-outline btn-sm"
+									onClick={() => handleEditClick(tariff)}
+								>
+									Редактировать
+								</button>
+								<button
+									className="btn btn-outline btn-sm btn-danger"
+									onClick={() => handleDeleteClick(tariff)}
+								>
+									Удалить
+								</button>
+							</div>
+						</div>
+					))}
+				</div>
+
+				{/* Пагинация */}
+				{tariffData && tariffData.total_pages > 0 && (
+					<div className="tanstak-table-pagination">
+						<div className="pagination-info">
+							<span className="pagination-info-pages">
+								Страница{' '}
+								<strong>
+									{currentPage + 1} из {tariffData.total_pages}
+								</strong>
+							</span>
+							<span className="pagination-info-files">
+								| Показано {tariffData.tariffs?.length || 0} из {tariffData.total_elements}
+							</span>
+						</div>
+
+						<div className="pagination-controls">
+							<button
+								className="arrow"
+								onClick={() => handlePageChange(0)}
+								disabled={currentPage === 0 || isFetching}
+							>
+								<IconDoubleArrowLeft />
+							</button>
+							<button
+								className="arrow"
+								onClick={() => handlePageChange(currentPage - 1)}
+								disabled={currentPage === 0 || isFetching}
+							>
+								<IconArrowLeft />
+							</button>
+
+							<div className="pagination-controls-pages">
+								{(() => {
+									const totalPages = tariffData.total_pages;
+									if (!totalPages || totalPages === 0) return null;
+
+									const maxVisiblePages = 5;
+									const visiblePagesCount = Math.min(maxVisiblePages, totalPages);
+
+									let startPage = currentPage - Math.floor(maxVisiblePages / 2);
+									startPage = Math.max(0, Math.min(startPage, totalPages - visiblePagesCount));
+
+									return Array.from({ length: visiblePagesCount }, (_, i) => {
+										const pageIndex = startPage + i;
+
+										return (
+											<button
+												key={pageIndex}
+												className={currentPage === pageIndex ? 'current' : 'other'}
+												onClick={() => handlePageChange(pageIndex)}
+												disabled={isFetching}
+											>
+												{pageIndex + 1}
+											</button>
+										);
+									});
+								})()}
+							</div>
+
+							<button
+								className="arrow"
+								onClick={() => handlePageChange(currentPage + 1)}
+								disabled={currentPage === tariffData.total_pages - 1 || isFetching}
+							>
+								<IconArrowRight />
+							</button>
+							<button
+								className="arrow"
+								onClick={() => handlePageChange(tariffData.total_pages - 1)}
+								disabled={currentPage === tariffData.total_pages - 1 || isFetching}
+							>
+								<IconDoubleArrowRight />
+							</button>
+						</div>
+					</div>
+				)}
+			</div>
+			{/* Модальное окно редактирования тарифа */}
+			<ModalWindow state={isModalOpen} callBack={setIsModalOpen}>
+				{editingTariff && (
+					<TariffEditModal
+						tariff={editingTariff}
+						onClose={() => setIsModalOpen(false)}
+						onSuccess={() => {
+							queryClient.invalidateQueries({ queryKey: ['tariffsData'] });
+							setIsModalOpen(false);
+						}}
+					/>
+				)}
+			</ModalWindow>
+			{/* Модальное окно создания тарифа */}
+			<ModalWindow state={isCreateModalOpen} callBack={setIsCreateModalOpen}>
+				<TariffCreateModal
+					onClose={() => setIsCreateModalOpen(false)}
+					onSuccess={() => {
+						queryClient.invalidateQueries({ queryKey: ['tariffsData'] });
+						setIsCreateModalOpen(false);
+					}}
+				/>
+			</ModalWindow>
+			{/* Модальное окно удаления тарифа */}
+			<ModalWindow state={isDeleteModalOpen} callBack={setIsDeleteModalOpen}>
+				{deletingTariff && (
+					<TariffDeleteModal
+						tariffId={deletingTariff.id}
+						tariffName={deletingTariff.name}
+						onClose={() => setIsDeleteModalOpen(false)}
+						onSuccess={() => {
+							queryClient.invalidateQueries({ queryKey: ['tariffsData'] });
+							setIsDeleteModalOpen(false);
+							setDeletingTariff(null);
+						}}
+					/>
+				)}
+			</ModalWindow>
+		</div>
+	)
+}

src/app/ui/users/tanstak-users-table.tsx

@@ -65,7 +65,7 @@ const cutFileName = (userId: string) => {
 	return nameWithoutExtension.substring(0, maxNameLength) + '...' + extension;
 }
 
-export default function TanstakUsersTable() {
+export default function TanstakUsersTable({ permission }: { permission: number }) {
 	// Состояния
 	const [sorting, setSorting] = useState<SortingState>([]);
 	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
@@ -128,8 +128,8 @@ export default function TanstakUsersTable() {
 	const queryClient = useQueryClient();
 
 	// Определение колонок
-	const columns = useMemo<ColumnDef<TransformedUser>[]>(
-		() => [
+	const columns = useMemo<ColumnDef<TransformedUser>[]>(() => {
+		const allColumns: ColumnDef<TransformedUser>[] = [
 			{
 				accessorKey: 'id',
 				header: ({ column }) => (
@@ -383,16 +383,13 @@ export default function TanstakUsersTable() {
 						</div>
 					)
 				},
-			},
-			{
+			}
+		]
+
+		if (permission === 3) {
+			allColumns.push({
 				id: 'actions',
-				header: () => {
-					return (
-						<div className="column">
-							{t('actions')}
-						</div>
-					)
-				},
+				header: () => <div className="column">{t('actions')}</div>,
 				cell: ({ row }) => (
 					<div className="actions">
 						<div className="actions-group">
@@ -407,10 +404,11 @@ export default function TanstakUsersTable() {
 				),
 				enableSorting: false,
 				enableColumnFilter: false,
-			},
-		],
-		[]
-	);
+			});
+		}
+
+		return allColumns;
+	}, [permission]);
 
 	const handleView = async (useId: number) => {
 		let userInfo = await fetchUsesInfo(useId);

src/app/ui/users/users-table.tsx

@@ -2,14 +2,15 @@
 
 import TanstakFilesTable from '@/app/ui/users/tanstak-users-table';
 import { useEmployeInfo } from '@/app/hooks/react-query/useEmployeInfo';
+import { useEffect } from 'react';
 
 export function UsersTable() {
-	const { canRead } = useEmployeInfo();
+	const { getPermissionLevel } = useEmployeInfo();
 
 	return (
 		<div>
-			{canRead('users') && (
-				<TanstakFilesTable />
+			{getPermissionLevel('users') > 0 && (
+				<TanstakFilesTable permission={getPermissionLevel('users')}/>
 			)}
 		</div>
 	)

src/i18n/messages/en.json

@@ -221,7 +221,12 @@
 		"delete-template-confirm": "Delete template",
 		"delete-template-warning": "Are you sure you want to delete this template?",
 		"save": "Save",
-		"delete": "Delete"
+		"delete": "Delete",
+		"create-stuff": "Create stuff",
+		"download": "Download",
+		"all": "All",
+		"has-appeal": "Has appeal",
+		"appeal": "Appeal"
 	},
 	"Login-register-form": {
 		"and": "and",

src/i18n/messages/ru.json

@@ -221,7 +221,12 @@
 		"delete-template-confirm": "Удалить шаблон",
 		"delete-template-warning": "Вы уверены, что хотите удалить шаблон?",
 		"save": "Сохранить",
-		"delete": "Удалить"
+		"delete": "Удалить",
+		"create-stuff": "Создать сотрудника",
+		"download": "Скачать",
+		"all": "Все",
+		"has-appeal": "Есть апелляция",
+		"appeal": "Апелляция"
 	},
 	"Login-register-form": {
 		"and": "и",