diff --git a/src/app/[locale]/pages/refferals/page.tsx b/src/app/[locale]/pages/refferals/page.tsx index 144e332..1159679 100644 --- a/src/app/[locale]/pages/refferals/page.tsx +++ b/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() { -
- refferals -
+ + + + + ) } \ No newline at end of file diff --git a/src/app/lib/prefetch-queries.ts b/src/app/lib/prefetch-queries.ts index 034fdcd..791c71c 100644 --- a/src/app/lib/prefetch-queries.ts +++ b/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 diff --git a/src/app/styles/pages-styles.scss b/src/app/styles/pages-styles.scss index d1f8674..03eb9e5 100644 --- a/src/app/styles/pages-styles.scss +++ b/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; + } + } } \ No newline at end of file diff --git a/src/app/ui/referral-page/Income-and-payments.tsx b/src/app/ui/referral-page/Income-and-payments.tsx new file mode 100644 index 0000000..2545fae --- /dev/null +++ b/src/app/ui/referral-page/Income-and-payments.tsx @@ -0,0 +1,123 @@ +export default function IncomeAndPayments() { + return ( +
+
+ 💳 + Доходы и выплаты +
+ +
+
+

💰 Доступно к выводу

+

+ 135.00 Б +

+ Минимальная сумма вывода: 100 Б +
+ +
+

📈 Всего заработано

+

+ 135.00 Б +

+ За все время участия в программе +
+ +
+

✅ Выплачено

+

+ 0.00 Б +

+ Успешно выплачено на ваши счета +
+
+ +
+

💸 Запросить выплату

+
+
+ + +
+
+ + +
+ +
+
+ +

📊 История выплат

+
+
+ Сумма +
+
+ Способ +
+
+ Статус +
+
+ Дата запроса +
+
+ Обработано +
+ +
+ 100.00 +
+
+ 0 +
+
+ 0 +
+
+ 0 +
+
+ 0 +
+ +
+ 100.00 +
+
+ 0 +
+
+ 0 +
+
+ 0 +
+
+ 0 +
+ +
+ 100.00 +
+
+ 0 +
+
+ 0 +
+
+ 0 +
+
+ 0 +
+
+
+ ) +} \ No newline at end of file diff --git a/src/app/ui/referral-page/commission-levels.tsx b/src/app/ui/referral-page/commission-levels.tsx new file mode 100644 index 0000000..6f9f840 --- /dev/null +++ b/src/app/ui/referral-page/commission-levels.tsx @@ -0,0 +1,40 @@ +export default function CommissionLevels() { + return ( +
+

+ 🏆 + Уровни комиссии +

+
+
+

🥉 BRONZE

+

15% комиссия

+ 0-5 рефералов +
+
+

🥈 SILVER

+

18% комиссия

+ 6-15 рефералов +
+
+

🥇 GOLD

+

22% комиссия

+ 16-50 рефералов +
+
+

💎 PLATINUM

+

25% комиссия

+ 50+ рефералов +
+
+ +
+

До уровня SILVER: 5 рефералов

+
+
+
+ 1 из 6 рефералов (16.7%) +
+
+ ) +} \ No newline at end of file diff --git a/src/app/ui/referral-page/invitations-table.tsx b/src/app/ui/referral-page/invitations-table.tsx new file mode 100644 index 0000000..83a6d1d --- /dev/null +++ b/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 ( +
+
+ 📋 + История приглашений +
+ +
+
+ Email +
+
+ Статус +
+
+ Заработано +
+
+ Дата приглашения +
+
+ Регистрация +
+ +
+ email@mail.com +
+
+ {t('status')} +
+
+ 0 +
+
+ 0 +
+
+ 0 +
+ +
+ email@mail.com +
+
+ {t('status')} +
+
+ 0 +
+
+ 0 +
+
+ 0 +
+ +
+ email@mail.com +
+
+ {t('status')} +
+
+ 0 +
+
+ 0 +
+
+ 0 +
+
+
+ ) +} \ No newline at end of file diff --git a/src/app/ui/referral-page/referral-link-section.tsx b/src/app/ui/referral-page/referral-link-section.tsx new file mode 100644 index 0000000..e406f43 --- /dev/null +++ b/src/app/ui/referral-page/referral-link-section.tsx @@ -0,0 +1,19 @@ +export default function ReferralLinkSection() { + return ( +
+

🔗 Ваша реферальная ссылка

+

Поделитесь этой ссылкой с друзьями и получайте комиссию с каждой их покупки

+
+ + https://dashboard.no-copy.ru/register.php?ref=REFA0406AC8 + + +
+

+ Код: REFA0406AC8 • + Кликов: 21 • + Комиссия: 15% +

+
+ ) +} \ No newline at end of file diff --git a/src/app/ui/referral-page/referral-stats.tsx b/src/app/ui/referral-page/referral-stats.tsx index c8e5370..1a57554 100644 --- a/src/app/ui/referral-page/referral-stats.tsx +++ b/src/app/ui/referral-page/referral-stats.tsx @@ -1,7 +1,41 @@ export default function ReferralStats() { return ( -
- test +
+
+
👥
+
2
+
Всего приглашений
+
+ +
+
✅
+
1
+
Активных рефералов
+
+ +
+
💰
+
135.00 Б
+
Общий доход
+
+ +
+
⏳
+
135.00 Б
+
К выплате
+
+ +
+
📊
+
14.3%
+
Конверсия
+
+ +
+
🏆
+
BRONZE
+
Уровень программы
+
) } \ No newline at end of file diff --git a/src/app/ui/referral-page/setting-referral-program.tsx b/src/app/ui/referral-page/setting-referral-program.tsx new file mode 100644 index 0000000..90578f1 --- /dev/null +++ b/src/app/ui/referral-page/setting-referral-program.tsx @@ -0,0 +1,61 @@ +export default function SettingReferralProgram() { + return ( +
+ +
+ ⚙️ + Настройки реферальной программы +
+ +
+
+

💳 Настройки выплат

+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ +
+

🔔 Уведомления

+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+
+ +
+ ) +} \ No newline at end of file