update login endpoint

merge appeal and file moderation winodw
add status filter for content table
2026-06-06 10:12:42 +07:00 · 2026-06-04 13:55:04 +07:00 · 2026-06-02 17:45:07 +07:00 · 2026-06-01 12:14:27 +07:00 · 2026-05-29 18:46:15 +07:00 · 2026-05-29 18:43:37 +07:00
24 changed files with 2071 additions and 399 deletions
@@ -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",
@@ -1,18 +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">
-				<ContentModerationTable permission={3} />
-			</div>
-			<div className="content-body">
-				<ContentAppealsTable permission={3} />
-			</div>
+			{getPermissionLevel('content_moderation') > 0 && (
+				<>
+					<div className="content-body">
+						<ContentModerationTable permission={contentModerationPermissionLevel} />
+					</div>
+					<div className="content-body">
+						<ContentAppealsTable permission={contentModerationPermissionLevel} />
+					</div>
+				</>
+			)}
 		</div>
 	)
 }
@@ -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 />
 	)
 }
@@ -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,
@@ -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}`,
 		},
@@ -120,8 +131,48 @@ export async function fetchAppealsContentList(page?: number, size?: number, sort
 					action: 'all_appeals',
 					page: page,
 					page_size: size,
-/* 					sort_by: sortDirection || 'asc',
-					sort_order: sortBy || '', */
+					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: {
@@ -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;
+	}
+}
@@ -9,7 +9,8 @@ export interface AppealsFile {
 	createdAt: string;
 	fileId: string;
 	resolvedAt: string;
-	status: 'BLOCKED' | 'APPROVED' | string;
+	fileName: string;
+	status: 'REJECTED' | 'APPROVED' | string;
 }

 export interface ContentForAppeals {
@@ -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,16 +33,20 @@ 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) {
@@ -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
+	});
+};
@@ -125,6 +125,62 @@
 			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 {
@@ -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-hover: #bd3434;
+	--danger-color: #dc2626;
+	--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 {
-				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);
 					}
 				}
 			}
@@ -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;
@@ -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;
+		}
+	}
+}
@@ -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;
+	}
+}
@@ -4,17 +4,19 @@ import { useState } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
 import DropDownList from '@/app/components/dropDownList';
-/* import { changeAppealStatus } from '@/app/actions/contentActions'; */
 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: AppealsFile | null;
+	file: AppealInfo | AppealsFile | null;
 	onClose: () => void;
 }

 const getLabel = (status: string) => {
 	switch (status) {
-		case 'BLOCKED':
+		case 'REJECTED':
 			return 'Заблокировано';
 		case 'MODERATION':
 			return 'На модерации';
@@ -25,10 +27,23 @@ const getLabel = (status: string) => {
 	}
 };

+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 'BLOCKED':
+			case 'REJECTED':
 				return 'status-badge--blocked';
 			case 'MODERATION':
 				return 'status-badge--moderation';
@@ -46,16 +61,16 @@ const StatusBadge = ({ status }: { status: string }) => {
 };

 export default function AppealModerationModal({ file, onClose }: AppealModerationModalProps) {
-	const [selectedStatus, setSelectedStatus] = useState<string>(file?.status || 'MODERATION');
+	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, status, comment }: { appealId: string; status: string; comment: string }) => {
-			return await changeAppealStatus(appealId, status, comment);
+	const changeStatusMutation = useMutation({
+		mutationFn: async ({ appealId, approve, comment }: { appealId: string; approve: boolean; comment: string }) => {
+			return await changeAppealContentStatus(appealId, approve, comment);
 		},
 		onSuccess: (data) => {
-			if (data) {
+			if (data !== null && data !== undefined) {
 				toast.success('Статус апелляции успешно изменен');
 				queryClient.invalidateQueries({ queryKey: ['contentForAppeals'] });
 				onClose();
@@ -66,116 +81,113 @@ export default function AppealModerationModal({ file, onClose }: AppealModeratio
 		onError: () => {
 			toast.error('Произошла ошибка при изменении статуса');
 		},
-	}); */
+	});

 	const handleStatusChange = () => {
 		if (!file?.appealId) {
 			toast.error('ID апелляции не найден');
 			return;
 		}
+		const statusValue = getStatusValue(selectedStatus);
+		const approve = statusValue === 'APPROVED';

-/* 		changeStatusMutation.mutate({
+		changeStatusMutation.mutate({
 			appealId: file.appealId,
-			status: selectedStatus,
+			approve: approve,
 			comment: adminComment,
-		}); */
+		});
 	};

 	if (!file) return null;

 	return (
-		<div className="file-moderation-modal">
-			<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 ? file?.fileName : '---'}</p>
+			</div>

-			<div className="file-moderation-modal__content">
-				{/* Информация о файле */}
-				<div className="file-moderation-modal__info-section">
-					<label className="file-moderation-modal__label">Название файла</label>
-					{/* @ts-ignore */}
-					<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">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.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.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>
+					<label className="file-moderation-modal__label">Дата решения</label>
 					<p className="file-moderation-modal__value">
-						{new Date(file.createdAt).toLocaleString('ru-RU')}
+						{formatDate(file.resolvedAt)}, {formatDateTime(file.resolvedAt)}
 					</p>
 				</div>
+			)}

-				{file.resolvedAt && (
-					<div className="file-moderation-modal__info-section">
-						<label className="file-moderation-modal__label">Дата решения</label>
-						<p className="file-moderation-modal__value">
-							{new Date(file.resolvedAt).toLocaleString('ru-RU')}
-						</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="MODERATION">На модерации</li>
-						<li value="BLOCKED">Заблокировано</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 === file.status} */
-					>
-						{/* {changeStatusMutation.isPending ? 'Сохранение...' : 'Сохранить'} */}
-						Сохранить
-					</button>
-				</div>
+			<div className="file-moderation-modal__status-section">
+				<label className="file-moderation-modal__status-label">Текущий статус</label>
+				<StatusBadge status={file.status} />
 			</div>
-		</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>
+		</>
 	);
 }
@@ -82,56 +82,52 @@ export default function FileModerationModal({ file, onClose }: FileModerationMod
 	if (!file) return null;

 	return (
-		<div className="file-moderation-modal">
-			<h2 className="file-moderation-modal__title">Управление файлом</h2>
+		<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__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__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-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__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 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>
 	);
@@ -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>
+	);
+}
@@ -21,6 +21,8 @@ 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('.');
@@ -54,9 +56,10 @@ const cutFileName = (fileName: string) => {

 const StatusBadge = ({ status }: { status: string }) => {
 	const statusConfig: Record<string, { className: string; label: string }> = {
-		'BLOCKED': { className: 'bg-red-100 text-red-800', label: 'Заблокировано' },
+		'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 };
@@ -77,7 +80,7 @@ export default function ContentAppealsTable({ permission }: { permission: number
 		pageSize: 10,
 	});
 	const [openWindow, setOpenWindow] = useState<boolean>(false);
-	const [selectedFile, setSelectedFile] = useState<AppealsFile | null>(null);
+	const [selectedFile, setSelectedFile] = useState<AppealsFile | AppealInfo | null>(null);
 	const [isFileLoading, setIsFileLoading] = useState(false);

 	const t = useTranslations("Global");
@@ -89,8 +92,8 @@ export default function ContentAppealsTable({ permission }: { permission: number

 		const sort = sorting[0];
 		const sortByMap: Record<string, string> = {
-			'fileName': 'originalFileName',
-			'userId': 'userId',
+			'fileName': 'fileName',
+			'appealId': 'appealId',
 			'status': 'status',
 			'createdAt': 'createdAt',
 		};
@@ -114,10 +117,6 @@ export default function ContentAppealsTable({ permission }: { permission: number
 		getSortParams.sortDirection
 	);

-	useEffect(() => {
-		console.log('Appeals data:', appealsData);
-	}, [appealsData]);
-
 	const queryClient = useQueryClient();

 	const handleViewFile = useCallback((file: AppealsFile) => {
@@ -168,11 +167,11 @@ export default function ContentAppealsTable({ permission }: { permission: number
 	const columns = useMemo<ColumnDef<AppealsFile>[]>(() => {
 		const allColumns: ColumnDef<AppealsFile>[] = [
 			{
-				accessorKey: 'fileId',
+				accessorKey: 'fileName',
 				header: ({ column }) => (
 					<div className="column start">
 						<span>
-							fileId
+							fileName
 						</span>
 						<button
 							onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
@@ -189,11 +188,12 @@ export default function ContentAppealsTable({ permission }: { permission: number
 				),
 				cell: ({ row }) => (
 					<div className="flex items-center space-x-2 table-item table-item-file-name">
-						<FileTypeIcon type={row.original.fileId} />
+						<FileTypeIcon type={row.original.fileName} />
 						<div>
-							<div className="font-medium w-full truncate" title={row.original.fileId}>
+							<div className="font-medium w-full truncate" title={row.original.fileName}>
 								<span className="font-semibold">
-									{cutFileName(row.original.fileId)}
+									{/* {cutFileName(row.original.fileName)} */}
+									{row.original.fileName}
 								</span>
 							</div>
 						</div>
@@ -236,7 +236,7 @@ export default function ContentAppealsTable({ permission }: { permission: number
 						</span>
 						<button
 							onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-							className="sort-button hidden"
+							className="sort-button"
 						>
 							{column.getIsSorted() === 'asc' ?
 								<span><IconArrowUp /></span>
@@ -252,6 +252,34 @@ export default function ContentAppealsTable({ permission }: { permission: number
 						<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>
+				),
 			}
 		];

@@ -419,7 +447,7 @@ export default function ContentAppealsTable({ permission }: { permission: number
 					<span className="pagination-info-pages">
 						{t('page')}{' '}
 						<strong>
-							{(appealsData?.currentPage ?? 0)} {t('out-of')} {appealsData?.totalPages ?? 1}
+							{(appealsData?.currentPage ?? 0) + 1} {t('out-of')} {appealsData?.totalPages ?? 1}
 						</strong>
 					</span>
 					<span className="pagination-info-files">
@@ -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 FileModerationModal from './FileModerationModal';
+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('.');
@@ -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,11 +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
 	);

 	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);
@@ -265,41 +318,18 @@ export default function ContentModerationTable({ permission }: { permission: num
 					</div>
 				),
 				cell: ({ row }) => (
-					<div className="text-center">
-						<StatusBadge status={row.original.status} />
-					</div>
-				),
-			},
-			/* {
-				accessorKey: 'moderationInfo.hasActiveAppeal',
-				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">
-						{row.original.moderationInfo.hasActiveAppeal ? (
-							<span className="text-blue-600">Активна</span>
-						) : (
-							<span className="text-gray-400">Нет</span>
+					<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) {
@@ -391,14 +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">
-				<h3>
-					Таблица модерации контента
-				</h3>
+				{/* Блок фильтрации по статусам */}
+				<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>
@@ -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>
+	);
+}
@@ -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>
+	);
+}
@@ -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>
+	);
+}
@@ -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>
+	)
+}
@@ -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",
@@ -223,7 +223,10 @@
 		"save": "Сохранить",
 		"delete": "Удалить",
 		"create-stuff": "Создать сотрудника",
-		"download": "Скачать"
+		"download": "Скачать",
+		"all": "Все",
+		"has-appeal": "Есть апелляция",
+		"appeal": "Апелляция"
 	},
 	"Login-register-form": {
 		"and": "и",
Author	SHA1	Message	Date
smanylov	e2b6591246	update login endpoint	2026-06-06 10:12:42 +07:00
smanylov	d4d3e5d3b1	merge appeal and file moderation winodw	2026-06-04 13:55:04 +07:00
smanylov	03766057eb	add status filter for content table	2026-06-02 17:45:07 +07:00
smanylov	c74ef84d37	add remove and add tariff modal windows	2026-06-01 12:14:27 +07:00
smanylov	15115c5114	fix endpoint	2026-05-29 18:46:15 +07:00
smanylov	8928960c34	add tariff table, add edit tariff modal window	2026-05-29 18:43:37 +07:00
smanylov	96808c4a12	fix page size for appeals table	2026-05-29 13:35:53 +07:00
smanylov	e5a09cd676	increment version	2026-05-29 13:10:51 +07:00
smanylov	1dbb6f46c9	add pending bage for appeals tanstak-table	2026-05-29 13:06:37 +07:00
smanylov	52bcd63a30	refator appeal modal window	2026-05-28 19:09:41 +07:00
smanylov	c2978bb276	fix download url	2026-05-28 18:53:53 +07:00
smanylov	05e04886c3	add appeals change status	2026-05-27 18:59:37 +07:00
smanylov	c626b697e2	increment version	2026-05-27 14:24:21 +07:00