add tariff management page layout

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

@@ -0,0 +1,78 @@
+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>
+	)
+}

src/app/styles/global-styles.scss

@@ -87,7 +87,7 @@
 
 .admin-panel {
 	.admin-sidebar {
-		width: 280px;
+		width: var(--side-bar-width);
 		background: var(--surface);
 		border-right: 1px solid var(--border);
 		position: fixed;
@@ -321,6 +321,13 @@
 			overflow-x: auto;
 		}
 
+		.stats-grid {
+			display: grid;
+			grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+			gap: 20px;
+			margin-bottom: 24px;
+		}
+
 		.admin-table {
 			width: 100%;
 			border-collapse: collapse;
@@ -732,4 +739,79 @@
 			}
 		}
 	}
+}
+
+#plans-container {
+	.stats-grid {
+		.stat-card {
+			background: var(--surface);
+			padding: 20px;
+			border-radius: 12px;
+			box-shadow: var(--shadow);
+			transition: all 0.3s;
+			border: 1px solid var(--border);
+
+			&:hover {
+				box-shadow: var(--shadow-lg);
+				transform: translateY(-2px);
+			}
+
+			.stat-card-header {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				margin-bottom: 12px;
+			}
+
+			.stat-card-title {
+				font-size: 13px;
+				color: var(--text-secondary);
+				font-weight: 500;
+				text-transform: uppercase;
+				letter-spacing: 0.5px;
+			}
+
+			.stat-card-icon {
+				width: 40px;
+				height: 40px;
+				border-radius: 10px;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				font-size: 20px;
+
+				background: #eff6ff;
+			}
+
+			.stat-card-value {
+				font-size: 32px;
+				font-weight: 700;
+				color: var(--text-primary);
+				margin-bottom: 4px;
+			}
+
+			.stat-card-label {
+				font-size: 12px;
+				color: var(--text-secondary);
+			}
+
+			.stat-card-footer {
+				margin-top: 12px;
+				padding-top: 12px;
+				border-top: 1px solid var(--border);
+				font-size: 12px;
+				color: var(--text-secondary);
+			}
+
+			.btn-outline {
+				background: transparent;
+				border: 1px solid var(--border);
+				color: var(--text-primary);
+
+				&:hover {
+					background: var(--background);
+				}
+			}
+		}
+	}
 }

src/app/ui/admin-nav-links.tsx

@@ -24,6 +24,11 @@ export default function AdminNavLinks() {
 			name: 'subscriptions',
 			href: '/subscriptions',
 			img: 'M22 6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2zm-2 2H4V6h16zM4 11h16v7H4z'
+		},
+		{
+			name: 'tariff management',
+			href: '/tariff-management',
+			img: 'M4 14v-2h7v2zm0-4V8h11v2zm0-4V4h11v2zm9 14v-3.075l5.525-5.5q.225-.225.5-.325t.55-.1q.3 0 .575.113t.5.337l.925.925q.2.225.313.5t.112.55t-.1.563t-.325.512l-5.5 5.5zm6.575-5.6l.925-.975l-.925-.925l-.95.95z'
 		}
 	];
 

tailwind.config.ts

@@ -0,0 +1,10 @@
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+	content: [
+		'./pages/**/*.{js,ts,jsx,tsx,mdx}',
+		'./components/**/*.{js,ts,jsx,tsx,mdx}',
+		'./app/**/*.{js,ts,jsx,tsx,mdx}',
+	],
+};
+export default config;