update login endpoint

package.json

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

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

@@ -1,14 +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>
-			<div className="content-body">
+			{getPermissionLevel('content_moderation') > 0 && (
-				<ContentModerationTable permission={3} />
+				<>
-			</div>
+					<div className="content-body">
+						<ContentModerationTable permission={contentModerationPermissionLevel} />
+					</div>
+					<div className="content-body">
+						<ContentAppealsTable permission={contentModerationPermissionLevel} />
+					</div>
+				</>
+			)}
 		</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">
+		<TariffManagment />
-			<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>
 	)
 }

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

@@ -1,9 +1,18 @@
 'use server'
 
 import { getSessionData } from '@/app/actions/session';
-import { API_BASE_URL, API_DASHBOARD_URL } from '@/app/actions/definitions';
+import { API_BASE_URL } from '@/app/actions/definitions';
 
-export async function fetchModerationContentList(page?: number, size?: number, sortBy?: string, sortDirection?: 'asc' | 'desc' | string) {
+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 {
@@ -18,6 +27,8 @@ export async function fetchModerationContentList(page?: number, size?: number, s
 					page_size: size,
 					sort_by: sortBy || '',
 					sort_order: sortDirection || 'asc',
+					statuses: statuses,
+					is_appeal: isAppeal,
 				}
 			}),
 			headers: {
@@ -87,7 +98,7 @@ export async function changeModerationContentStatus(fileId?: string, fileStatus?
 export async function downloadFile(fileId: string, fileName: string) {
 	const token = await getSessionData('token');
 
-	const response = await fetch(`${API_DASHBOARD_URL}/api/v1/files/download/${fileId}`, {
+	const response = await fetch(`${API_BASE_URL}/api/admin/download/${fileId}`, {
 		headers: {
 			'Authorization': `Bearer ${token}`,
 		},
@@ -105,4 +116,85 @@ export async function downloadFile(fileId: string, fileName: string) {
 		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/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/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

@@ -1,10 +1,21 @@
 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 | any;
+		appealInfo: null | AppealInfo;
 		hasActiveAppeal: boolean;
 	};
 	userId: number;
@@ -22,22 +33,26 @@ export interface ContentForModeration {
 	totalCount: number;
 }
 
+export type ModerationStatus = 'BLOCKED' | 'ACTIVE' | 'MODERATION';
+
 export const useContentForModeration = (
 	page?: number,
 	size?: number,
 	sortBy?: string,
-	sortDirection?: 'asc' | 'desc' | string
+	sortDirection?: 'asc' | 'desc' | string,
+	statuses?: ModerationStatus[],
+	isAppeal?: boolean
 ) => {
 	return useQuery({
-		queryKey: ['contentForModeration', page, size, sortBy, sortDirection],
+		queryKey: ['contentForModeration', page, size, sortBy, sortDirection, statuses, isAppeal],
 		queryFn: () => {
-			return fetchModerationContentList(page, size, sortBy, sortDirection);
+			return fetchModerationContentList(page, size, sortBy, sortDirection, statuses, isAppeal);
 		},
 		select: (data: ContentForModeration | null) => {
 			if (!data) {
 				return null;
 			}
-			return data; // теперь возвращаем весь объект с пагинацией
+			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/styles/file-moderation-modal.scss

@@ -18,7 +18,8 @@
 
 	&__info-section,
 	&__status-section,
-	&__status-change-section {
+	&__status-change-section,
+	&__comment-section {
 		border-bottom: 1px solid #e5e7eb;
 		padding-bottom: 0.75rem;
 	}
@@ -92,6 +93,94 @@
 			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 {

src/app/styles/global-styles.scss

@@ -2,6 +2,8 @@
 @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;
@@ -10,8 +12,8 @@
 	--secondary-hover: #4c5869;
 	--success-color: #10b981;
 	--success-hover: #0d8a60;
-	--danger-color: #ef4444;
+	--danger-color: #dc2626;
-	--danger-hover: #bd3434;
+	--danger-hover: #b91c1c;
 	--warning-color: #f59e0b;
 	--warning-hover: #b3750b;
 	--info-color: #3b82f6;
@@ -296,6 +298,11 @@
 		&:hover {
 			background: var(--danger-hover);
 		}
+
+		&:disabled {
+			opacity: 0.5;
+			cursor: not-allowed;
+		}
 	}
 
 	.btn {
@@ -528,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;
@@ -559,6 +580,8 @@
 			border-top: 1px solid var(--border);
 			font-size: 12px;
 			color: var(--text-secondary);
+			display: flex;
+			gap: 10px;
 		}
 
 		.btn-outline {
@@ -748,127 +771,120 @@
 			@media (max-width: 768px) {
 				width: auto;
 			}
+		}
 
-			.table-filtres-item {
+		.table-filtres-item {
-				display: flex;
+			display: flex;
-				flex-direction: column;
+			flex-direction: column;
-				width: 12.5rem;
+			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 {
+		.status-filters {
-				font-size: 0.875rem;
+			display: flex;
-				font-weight: 500;
+			gap: 10px;
-				margin-bottom: 0.25rem;
+			align-items: center;
-			}
+			flex-wrap: wrap;
 
-
+			.status-btn {
-			.table-filtres-text-filter {
+				padding: 4px 12px;
-				background-color: #fff;
+				border-radius: 16px;
-				border: 2px solid v.$border-color-1;
+				border: 1px solid;
-				border-radius: 12px;
+				transition: all 0.2s ease;
-				justify-content: space-between;
+				cursor: pointer;
-				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;
-				}
-			}
-		}
-	}
-
-	.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 {
+				&:active {
-					opacity: 0.5;
+					transform: translateY(0);
-					cursor: not-allowed;
 				}
-			}
 
-			&-pages {
+				// BLOCK статус
-				display: flex;
+				&--block {
-				align-items: center;
+					background-color: white;
-				gap: 0.25rem;
+					color: #dc2626;
+					border-color: #fca5a5;
 
-				button {
+					&:hover {
-					border: 2px solid v.$border-color-1;
+						background-color: #fef2f2;
-					padding: 0.25rem 0.75rem;
+						border-color: #f87171;
-					border-radius: 10px;
-					color: var(--primary-color);
-
-					&:disabled {
-						opacity: 0.5;
-						cursor: not-allowed;
 					}
 
-					&.current {
+					&.active {
-						background-color: var(--primary-color);
+						background-color: #dc2626;
-						color: v.$white;
+						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 {
+					&.active {
-						&:hover {
+						background-color: #16a34a;
-							background-color: v.$bg-light;
+						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);
 					}
 				}
 			}
@@ -1019,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;
@@ -1217,6 +1241,95 @@
 	}
 }
 
+.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 {
 	text-align: center;
 	padding: 60px 20px;

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

@@ -82,56 +82,52 @@ export default function FileModerationModal({ file, onClose }: FileModerationMod
 	if (!file) return null;
 
 	return (
-		<div className="file-moderation-modal">
+		<div className="file-moderation-modal__content">
-			<h2 className="file-moderation-modal__title">Управление файлом</h2>
+			{/* Информация о файле */}
+			<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__content">
+			<div className="file-moderation-modal__info-section">
-				{/* Информация о файле */}
+				<label className="file-moderation-modal__label">User ID</label>
-				<div className="file-moderation-modal__info-section">
+				<p className="file-moderation-modal__value">{file.userId}</p>
-					<label className="file-moderation-modal__label">Название файла</label>
+			</div>
-					<p className="file-moderation-modal__value">{file.fileName}</p>
-				</div>
 
-				<div className="file-moderation-modal__info-section">
+			<div className="file-moderation-modal__status-section">
-					<label className="file-moderation-modal__label">User ID</label>
+				<label className="file-moderation-modal__status-label">Текущий статус</label>
-					<p className="file-moderation-modal__value">{file.userId}</p>
+				<StatusBadge status={file.status} />
-				</div>
+			</div>
 
-				<div className="file-moderation-modal__status-section">
+			{/* Смена статуса */}
-					<label className="file-moderation-modal__status-label">Текущий статус</label>
+			<div className="file-moderation-modal__status-change-section">
-					<StatusBadge status={file.status} />
+				<label className="file-moderation-modal__status-change-label">Изменить статус</label>
-				</div>
+				<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__status-change-section">
+			<div className="file-moderation-modal__actions">
-					<label className="file-moderation-modal__status-change-label">Изменить статус</label>
+				<button
-					<DropDownList
+					onClick={onClose}
-						value={getLabel(selectedStatus)}
+					className="btn btn-secondary"
-						callBack={(value: string) => setSelectedStatus(value)}
+					disabled={changeStatusMutation.isPending}
-					>
+				>
-						<li value="MODERATION">На модерации</li>
+					Отмена
-						<li value="BLOCKED">Заблокировано</li>
+				</button>
-						<li value="ACTIVE">Одобрено</li>
+				<button
-					</DropDownList>
+					onClick={handleStatusChange}
-				</div>
+					className="btn btn-primary"
-
+					disabled={changeStatusMutation.isPending || selectedStatus === file.status}
-				{/* Кнопки действий */}
+				>
-				<div className="file-moderation-modal__actions">
+					{changeStatusMutation.isPending ? 'Сохранение...' : 'Сохранить'}
-					<button
+				</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>
 		</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

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useMemo, useEffect, ReactNode, useCallback } from 'react';
+import { useState, useMemo, useEffect, useCallback } from 'react';
 import {
 	useReactTable,
 	getCoreRowModel,
@@ -17,12 +17,12 @@ 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, ContentForModeration } from '@/app/hooks/react-query/useContentForModeration';
+import { useContentForModeration, ModerationFile, ModerationStatus } from '@/app/hooks/react-query/useContentForModeration';
-import FileModerationModal from './FileModerationModal';
 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('.');
@@ -59,6 +59,24 @@ const StatusBadge = ({ status }: { status: 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 };
@@ -82,6 +100,10 @@ export default function ContentModerationTable({ permission }: { permission: num
 	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
@@ -104,6 +126,7 @@ export default function ContentModerationTable({ permission }: { permission: num
 		};
 	}, [sorting]);
 
+	// Используем хук с фильтрами
 	const {
 		data: moderationData,
 		isLoading,
@@ -114,15 +137,41 @@ export default function ContentModerationTable({ permission }: { permission: num
 		pagination.pageIndex,
 		pagination.pageSize,
 		getSortParams.sortBy,
-		getSortParams.sortDirection
+		getSortParams.sortDirection,
+		selectedStatuses.length > 0 ? selectedStatuses : undefined,
+		isAppeal
 	);
 
-	useEffect(() => {
-		console.log('Moderation data:', moderationData);
-	}, [moderationData]);
-
 	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);
@@ -269,41 +318,18 @@ export default function ContentModerationTable({ permission }: { permission: num
 					</div>
 				),
 				cell: ({ row }) => (
-					<div className="text-center">
+					<div className="table-status">
-						<StatusBadge status={row.original.status} />
+						<div>
-					</div>
+							<StatusBadge status={row.original.status} />
-				),
+						</div>
-			},
+						{row.original.moderationInfo.appealInfo?.status && (
-			/* {
+							<div>
-				accessorKey: 'moderationInfo.hasActiveAppeal',
+								{t('appeal')}: <AppealStatusBadge status={row.original.moderationInfo.appealInfo?.status} />
-				header: ({ column }) => (
+							</div>
-					<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">
-						{row.original.moderationInfo.hasActiveAppeal ? (
-							<span className="text-blue-600">Активна</span>
-						) : (
-							<span className="text-gray-400">Нет</span>
 						)}
 					</div>
 				),
-			} */
+			},
 		];
 
 		if (permission === 3) {
@@ -395,11 +421,54 @@ export default function ContentModerationTable({ permission }: { permission: num
 	return (
 		<div className="tanstak-table-wrapper">
 			<ModalWindow state={openWindow} callBack={handleCloseModal}>
-				<FileModerationModal file={selectedFile} onClose={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>

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/i18n/messages/en.json

@@ -223,7 +223,10 @@
 		"save": "Save",
 		"delete": "Delete",
 		"create-stuff": "Create stuff",
-		"download": "Download"
+		"download": "Download",
+		"all": "All",
+		"has-appeal": "Has appeal",
+		"appeal": "Appeal"
 	},
 	"Login-register-form": {
 		"and": "and",

src/i18n/messages/ru.json

@@ -223,7 +223,10 @@
 		"save": "Сохранить",
 		"delete": "Удалить",
 		"create-stuff": "Создать сотрудника",
-		"download": "Скачать"
+		"download": "Скачать",
+		"all": "Все",
+		"has-appeal": "Есть апелляция",
+		"appeal": "Апелляция"
 	},
 	"Login-register-form": {
 		"and": "и",