add refferal page layout

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

@@ -2,6 +2,11 @@ import { useTranslations } from 'next-intl';
 import { Suspense } from 'react';
 import PageTitle from '@/app/ui/page-title';
 import ReferralStats from '@/app/ui/referral-page/referral-stats';
+import ReferralLinkSection from '@/app/ui/referral-page/referral-link-section';
+import CommissionLevels from '@/app/ui/referral-page/commission-levels';
+import InvitationsTable from '@/app/ui/referral-page/invitations-table';
+import IncomeAndPayments from '@/app/ui/referral-page/Income-and-payments';
+import SettingReferralProgram from '@/app/ui/referral-page/setting-referral-program';
 
 export default function Page() {
 	const t = useTranslations('Global');
@@ -11,9 +16,11 @@ export default function Page() {
 			<PageTitle title="refferal-program">
 			</PageTitle>
 			<ReferralStats />
-			<div>
+			<ReferralLinkSection />
-				refferals
+			<CommissionLevels />
-			</div>
+			<InvitationsTable />
+			<IncomeAndPayments />
+			<SettingReferralProgram />
 		</Suspense>
 	)
 }

src/app/lib/prefetch-queries.ts

@@ -11,7 +11,6 @@ export async function prefetchLayoutQueries(queryClient: QueryClient) {
 		queryClient.prefetchQuery({
 			queryKey: ['userFilesData'],
 			queryFn: () => {
-				console.log('make prefetch userFilesData');
 				return getUserFilesData(1, 10000);
 			},
 			staleTime: 30 * 1000

src/app/styles/pages-styles.scss

@@ -626,7 +626,7 @@
 					border-radius: 0.25rem;
 
 					&:hover {
-						background-color: #e5e7eb;
+						background-color: v.$b-color-1;
 					}
 				}
 			}
@@ -822,4 +822,288 @@
 	.file-stat-size {
 		text-align: left;
 	}
+}
+
+.referral-stats-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+	gap: 25px;
+	margin-bottom: 40px;
+
+	.stat-card {
+		background: white;
+		padding: 30px;
+		border-radius: 20px;
+		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+		border: 1px solid v.$b-color-1;
+		position: relative;
+		overflow: hidden;
+		transition: all 0.3s ease;
+
+		.icon {
+			font-size: 48px;
+			margin-bottom: 15px;
+			display: inline-block;
+		}
+
+		.value {
+			font-size: 32px;
+			font-weight: 700;
+			margin-bottom: 8px;
+			background: linear-gradient(135deg, #6366f1, #8b5cf6);
+			-webkit-text-fill-color: transparent;
+			background-clip: text;
+		}
+
+		.label {
+			font-size: 16px;
+			color: v.$text-s;
+			font-weight: 500;
+		}
+	}
+}
+
+.referral-link-section {
+	background: white;
+	padding: 30px;
+	border-radius: 20px;
+	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+	margin-bottom: 30px;
+	text-align: center;
+
+	.referral-link-input {
+		display: flex;
+		gap: 15px;
+		max-width: 600px;
+		margin: 20px auto;
+
+		#referral-link {
+			flex: 1;
+			padding: 10px 20px;
+			border: 2px solid v.$b-color-1;
+			border-radius: 12px;
+			font-size: 14px;
+			background: #f9fafb;
+			white-space: nowrap;
+			display: flex;
+			align-items: center;
+		}
+
+		.copy-btn {
+			padding: 10px 30px;
+			background: linear-gradient(135deg, #10b981, #059669);
+			color: white;
+			border: none;
+			border-radius: 12px;
+			font-weight: 600;
+			cursor: pointer;
+			transition: all 0.3s;
+		}
+	}
+
+	.referral-link-footer {
+		margin-top: 15px;
+		color: v.$text-s;
+	}
+}
+
+.section-title {
+	font-size: 24px;
+	font-weight: 700;
+	margin-bottom: 25px;
+	color: v.$text-p;
+	display: flex;
+	align-items: center;
+	gap: 15px;
+}
+
+.commission-levels {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+	gap: 20px;
+	margin-top: 20px;
+
+	.level-card {
+		padding: 20px;
+		border-radius: 15px;
+		text-align: center;
+		border: 2px solid;
+		position: relative;
+	}
+
+	.level-bronze {
+		background: linear-gradient(135deg, #fef3c7, #fde68a);
+		border-color: #f59e0b;
+		color: #92400e;
+	}
+
+	.level-silver {
+		background: linear-gradient(135deg, #f3f4f6, #d1d5db);
+		border-color: v.$text-s;
+		color: v.$text-s;
+	}
+
+	.level-gold {
+		background: linear-gradient(135deg, #fef3c7, #fcd34d);
+		border-color: #f59e0b;
+		color: #92400e;
+	}
+
+	.level-platinum {
+		background: linear-gradient(135deg, #ede9fe, #ddd6fe);
+		border-color: #8b5cf6;
+		color: #5b21b6;
+	}
+
+	&-footer {
+		margin-top: 25px;
+		text-align: center;
+
+		.progress-bar {
+			background: #f3f4f6;
+			height: 8px;
+			border-radius: 4px;
+			overflow: hidden;
+			margin: 15px 0;
+
+			.progress-fill {
+				height: 100%;
+				background: linear-gradient(90deg, #10b981, #059669);
+				transition: width 0.3s ease;
+			}
+		}
+	}
+}
+
+.income-and-payments {
+	.earnings-cards {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+		gap: 20px;
+		margin-bottom: 30px;
+
+		.earning-card {
+			background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
+			padding: 25px;
+			border-radius: 15px;
+			border: 1px solid #bae6fd;
+			text-align: center;
+
+			&.success {
+				background: linear-gradient(135deg, #f0fdf4, #dcfce7);
+				border-color: #bbf7d0;
+			}
+
+			&.warning {
+				background: linear-gradient(135deg, #fffbeb, #fef3c7);
+				border-color: #fed7aa;
+			}
+
+			p {
+				font-size: 24px;
+				font-weight: 700;
+				margin: 10px 0;
+			}
+		}
+	}
+
+	.payout-form {
+		background: #f8f9ff;
+		padding: 25px;
+		border-radius: 15px;
+		border: 2px solid v.$b-color-1;
+
+		.payout-wrapper {
+			display: flex;
+			gap: 15px;
+			align-items: end;
+			margin-top: 15px;
+
+			.form-group {
+				flex: 1;
+				margin-bottom: 0;
+
+				label {
+					display: block;
+					margin-bottom: 8px;
+					font-weight: 600;
+					color: v.$text-s;
+				}
+
+				select,
+				input {
+					width: 100%;
+					padding: 12px 16px;
+					border: 2px solid v.$b-color-1;
+					border-radius: 10px;
+					font-size: 14px;
+					transition: border-color 0.3s;
+				}
+			}
+
+			.btn-success {
+				background: linear-gradient(135deg, #10b981, #059669);
+				color: white;
+				padding: 12px 25px;
+				border: none;
+				border-radius: 10px;
+				font-weight: 600;
+				cursor: pointer;
+				transition: all 0.3s;
+			}
+		}
+	}
+}
+
+.setting-referral-program {
+	.settings-form {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+		gap: 25px;
+		background: white;
+		border-radius: 20px;
+		padding: 30px;
+		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+		margin-bottom: 30px;
+		border: none;
+
+		.form-group {
+			margin-bottom: 20px;
+
+			label {
+				display: block;
+				margin-bottom: 8px;
+				font-weight: 600;
+				color: v.$text-s;
+			}
+
+			input,
+			select {
+				width: 100%;
+				padding: 12px 16px;
+				border: 2px solid v.$b-color-1;
+				border-radius: 10px;
+				font-size: 14px;
+				transition: border-color 0.3s;
+			}
+		}
+
+		.checkbox-group {
+			display: flex;
+			align-items: center;
+			gap: 10px;
+			margin-bottom: 15px;
+		}
+
+		.btn-primary {
+			color: white;
+			padding: 12px 25px;
+			border: none;
+			border-radius: 10px;
+			font-weight: 600;
+			cursor: pointer;
+			transition: all 0.3s;
+			margin-top: 20px;
+		}
+	}
 }

src/app/ui/referral-page/Income-and-payments.tsx

@@ -0,0 +1,123 @@
+export default function IncomeAndPayments() {
+	return (
+		<div className="block-wrapper income-and-payments">
+			<div className="section-title">
+				<span className="icon">💳</span>
+				Доходы и выплаты
+			</div>
+
+			<div className="earnings-cards">
+				<div className="earning-card success">
+					<h4>💰 Доступно к выводу</h4>
+					<p>
+						135.00 Б
+					</p>
+					<small>Минимальная сумма вывода: 100 Б</small>
+				</div>
+
+				<div className="earning-card">
+					<h4>📈 Всего заработано</h4>
+					<p>
+						135.00 Б
+					</p>
+					<small>За все время участия в программе</small>
+				</div>
+
+				<div className="earning-card warning">
+					<h4>✅ Выплачено</h4>
+					<p>
+						0.00 Б
+					</p>
+					<small>Успешно выплачено на ваши счета</small>
+				</div>
+			</div>
+
+			<div className="payout-form">
+				<h4>💸 Запросить выплату</h4>
+				<div className="payout-wrapper">
+					<div className="form-group">
+						<label>Сумма к выводу (Б)</label>
+						<input type="number" id="payout-amount" min="100.00" max="135.00" step="0.01" placeholder="Введите сумму"></input>
+					</div>
+					<div className="form-group" >
+						<label>Способ выплаты</label>
+						<select id="payout-method">
+							<option value="BALANCE">💳 На баланс аккаунта</option>
+							<option value="BANK_TRANSFER">🏦 Банковский перевод</option>
+							<option value="PAYPAL">💰 PayPal</option>
+							<option value="CARD">💳 Банковская карта</option>
+						</select>
+					</div>
+					<button className="btn-success">💸 Заказать выплату</button>
+				</div>
+			</div>
+
+			<h4 className="mt-[30px]">📊 История выплат</h4>
+			<div className="stats-grid">
+				<div className="stats-item left-top-corner stats-header">
+					Сумма
+				</div>
+				<div className="stats-item stats-header">
+					Способ
+				</div>
+				<div className="stats-item stats-header">
+					Статус
+				</div>
+				<div className="stats-item stats-header">
+					Дата запроса
+				</div>
+				<div className="stats-item last-column right-top-corner stats-header">
+					Обработано
+				</div>
+
+				<div className="stats-item first-column second-row">
+					100.00
+				</div>
+				<div className="stats-item second-row">
+					0
+				</div>
+				<div className="stats-item second-row">
+					0
+				</div>
+				<div className="stats-item second-row">
+					0
+				</div>
+				<div className="stats-item second-row last-column">
+					0
+				</div>
+
+				<div className="stats-item first-column">
+					100.00
+				</div>
+				<div className="stats-item">
+					0
+				</div>
+				<div className="stats-item">
+					0
+				</div>
+				<div className="stats-item">
+					0
+				</div>
+				<div className="stats-item last-column">
+					0
+				</div>
+
+				<div className="stats-item last-row left-bottom-corner first-column">
+					100.00
+				</div>
+				<div className="stats-item last-row">
+					0
+				</div>
+				<div className="stats-item last-row">
+					0
+				</div>
+				<div className="stats-item last-row">
+					0
+				</div>
+				<div className="stats-item last-row last-column right-bottom-corner">
+					0
+				</div>
+			</div>
+		</div>
+	)
+}

src/app/ui/referral-page/commission-levels.tsx

@@ -0,0 +1,40 @@
+export default function CommissionLevels() {
+	return (
+		<div className="block-wrapper">
+			<h3 className="section-title">
+				<span className="icon">🏆</span>
+				Уровни комиссии
+			</h3>
+			<div className="commission-levels">
+				<div className="level-card level-bronze active">
+					<h4>🥉 BRONZE</h4>
+					<p><strong>15%</strong> комиссия</p>
+					<small>0-5 рефералов</small>
+				</div>
+				<div className="level-card level-silver ">
+					<h4>🥈 SILVER</h4>
+					<p><strong>18%</strong> комиссия</p>
+					<small>6-15 рефералов</small>
+				</div>
+				<div className="level-card level-gold ">
+					<h4>🥇 GOLD</h4>
+					<p><strong>22%</strong> комиссия</p>
+					<small>16-50 рефералов</small>
+				</div>
+				<div className="level-card level-platinum ">
+					<h4>💎 PLATINUM</h4>
+					<p><strong>25%</strong> комиссия</p>
+					<small>50+ рефералов</small>
+				</div>
+			</div>
+
+			<div className="commission-levels-footer">
+				<p><strong>До уровня SILVER:</strong> 5 рефералов</p>
+				<div className="progress-bar">
+					<div className="progress-fill" style={{width: "16.7%"}}></div>
+				</div>
+				<small>1 из 6 рефералов (16.7%)</small>
+			</div>
+		</div>
+	)
+}

src/app/ui/referral-page/invitations-table.tsx

@@ -0,0 +1,78 @@
+import { useTranslations } from 'next-intl';
+export default function InvitationsTable() {
+	const t = useTranslations('Global');
+	return (
+		<div className="block-wrapper">
+			<div className="section-title">
+				<span className="icon">📋</span>
+				История приглашений
+			</div>
+
+			<div className="stats-grid">
+				<div className="stats-item left-top-corner stats-header">
+					Email
+				</div>
+				<div className="stats-item stats-header">
+					Статус
+				</div>
+				<div className="stats-item stats-header">
+					Заработано
+				</div>
+				<div className="stats-item stats-header">
+					Дата приглашения
+				</div>
+				<div className="stats-item last-column right-top-corner stats-header">
+					Регистрация
+				</div>
+
+				<div className="stats-item first-column second-row">
+					email@mail.com
+				</div>
+				<div className="stats-item second-row">
+					{t('status')}
+				</div>
+				<div className="stats-item second-row">
+					0
+				</div>
+				<div className="stats-item second-row">
+					0
+				</div>
+				<div className="stats-item second-row last-column">
+					0
+				</div>
+
+				<div className="stats-item first-column">
+					email@mail.com
+				</div>
+				<div className="stats-item">
+					{t('status')}
+				</div>
+				<div className="stats-item">
+					0
+				</div>
+				<div className="stats-item">
+					0
+				</div>
+				<div className="stats-item last-column">
+					0
+				</div>
+
+				<div className="stats-item last-row left-bottom-corner first-column">
+					email@mail.com
+				</div>
+				<div className="stats-item last-row">
+					{t('status')}
+				</div>
+				<div className="stats-item last-row">
+					0
+				</div>
+				<div className="stats-item last-row">
+					0
+				</div>
+				<div className="stats-item last-row last-column right-bottom-corner">
+					0
+				</div>
+			</div>
+		</div>
+	)
+}

src/app/ui/referral-page/referral-link-section.tsx

@@ -0,0 +1,19 @@
+export default function ReferralLinkSection() {
+	return (
+		<div className="referral-link-section">
+			<h3>🔗 Ваша реферальная ссылка</h3>
+			<p>Поделитесь этой ссылкой с друзьями и получайте комиссию с каждой их покупки</p>
+			<div className="referral-link-input">
+				<span id="referral-link" >
+					https://dashboard.no-copy.ru/register.php?ref=REFA0406AC8
+				</span >
+				<button className="copy-btn">📋 Копировать</button>
+			</div>
+			<p className="referral-link-footer">
+				Код: <strong>REFA0406AC8</strong> •
+				Кликов: <strong>21</strong> •
+				Комиссия: <strong>15%</strong>
+			</p>
+		</div>
+	)
+}

src/app/ui/referral-page/referral-stats.tsx

@@ -1,7 +1,41 @@
 export default function ReferralStats() {
 	return (
-		<div>
+		<div className="referral-stats-grid">
-			test
+			<div className="stat-card">
+				<div className="icon">👥</div>
+				<div className="value">2</div>
+				<div className="label">Всего приглашений</div>
+			</div>
+
+			<div className="stat-card">
+				<div className="icon">✅</div>
+				<div className="value">1</div>
+				<div className="label">Активных рефералов</div>
+			</div>
+
+			<div className="stat-card">
+				<div className="icon">💰</div>
+				<div className="value">135.00 Б</div>
+				<div className="label">Общий доход</div>
+			</div>
+
+			<div className="stat-card">
+				<div className="icon">⏳</div>
+				<div className="value">135.00 Б</div>
+				<div className="label">К выплате</div>
+			</div>
+
+			<div className="stat-card">
+				<div className="icon">📊</div>
+				<div className="value">14.3%</div>
+				<div className="label">Конверсия</div>
+			</div>
+
+			<div className="stat-card">
+				<div className="icon">🏆</div>
+				<div className="value">BRONZE</div>
+				<div className="label">Уровень программы</div>
+			</div>
 		</div>
 	)
 }

src/app/ui/referral-page/setting-referral-program.tsx

@@ -0,0 +1,61 @@
+export default function SettingReferralProgram() {
+	return (
+		<div className="block-wrapper setting-referral-program">
+
+			<div className="section-title">
+				<span className="icon">⚙️</span>
+				Настройки реферальной программы
+			</div>
+
+			<form className="settings-form">
+				<div>
+					<h4>💳 Настройки выплат</h4>
+
+					<div className="form-group">
+						<label>Минимальная сумма для вывода (Б)</label>
+						<input type="number" name="min_withdraw_amount" value="100.00" min="50" step="10" />
+					</div>
+
+					<div className="form-group">
+						<label>Предпочитаемый способ выплаты</label>
+						<select name="preferred_payout_method">
+							<option value="BALANCE">💳 На баланс аккаунта</option>
+							<option value="BANK_TRANSFER">🏦 Банковский перевод</option>
+							<option value="PAYPAL">💰 PayPal</option>
+							<option value="CARD">💳 Банковская карта</option>
+						</select>
+					</div>
+
+					<div className="checkbox-group">
+						<input type="checkbox" name="auto_withdraw" value="1" />
+							<label>Автоматический вывод при достижении минимума</label>
+					</div>
+				</div>
+
+				<div>
+					<h4>🔔 Уведомления</h4>
+
+					<div className="checkbox-group">
+						<input type="checkbox" name="email_notifications" value="1"/>
+							<label>Email уведомления о новых рефералах</label>
+					</div>
+
+					<div className="checkbox-group">
+						<input type="checkbox" name="sms_notifications" value="1" />
+							<label>SMS уведомления о выплатах</label>
+					</div>
+
+					<div className="checkbox-group">
+						<input type="checkbox" name="marketing_emails" value="1" />
+							<label>Маркетинговые рассылки о программе</label>
+					</div>
+
+					<button type="submit" className="btn-primary">
+						💾 Сохранить настройки
+					</button>
+				</div>
+			</form>
+
+		</div>
+	)
+}