From 27f85a1db115ca386c5658786147800e33f484bc Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Fri, 27 Feb 2026 04:53:37 +0300
Subject: [PATCH] fix: add subscription tab to desktop nav, fix device dots
 overflow, show available referral balance

- Add Subscription tab to desktop header navigation (was only in mobile)
- Fix device dots overflow for large limits (>10) by using progress bar
- Show available referral balance on dashboard instead of total earnings
- Add available_balance and withdrawn fields to ReferralInfo type
---
 src/components/dashboard/StatsGrid.tsx        |  4 +-
 .../dashboard/SubscriptionCardActive.tsx      | 43 +++++++++++++------
 src/components/layout/AppShell/AppShell.tsx   |  2 +
 src/pages/Dashboard.tsx                       |  2 +-
 src/types/index.ts                            |  3 ++
 5 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/src/components/dashboard/StatsGrid.tsx b/src/components/dashboard/StatsGrid.tsx
index 64d6bb5..8c3ebbb 100644
--- a/src/components/dashboard/StatsGrid.tsx
+++ b/src/components/dashboard/StatsGrid.tsx
@@ -42,7 +42,7 @@ export default function StatsGrid({
   refLoading,
 }: StatsGridProps) {
   const { t } = useTranslation();
-  const { formatAmount, currencySymbol, formatPositive } = useCurrency();
+  const { formatAmount, currencySymbol } = useCurrency();
   const { isDark } = useTheme();
   const g = getGlassColors(isDark);
 
@@ -83,7 +83,7 @@ export default function StatsGrid({
       label: t('dashboard.stats.referrals'),
       value: `${referralCount}`,
       valueColor: g.text,
-      subtitle: `${formatPositive(earningsRubles)} ${currencySymbol}`,
+      subtitle: `${formatAmount(earningsRubles)} ${currencySymbol}`,
       subtitleColor: zone.mainHex,
       to: '/referral',
       icon: (color: string) => (
diff --git a/src/components/dashboard/SubscriptionCardActive.tsx b/src/components/dashboard/SubscriptionCardActive.tsx
index 099faaf..df934d7 100644
--- a/src/components/dashboard/SubscriptionCardActive.tsx
+++ b/src/components/dashboard/SubscriptionCardActive.tsx
@@ -240,19 +240,38 @@ export default function SubscriptionCardActive({
             </div>
           </div>
 
-          {/* Device dots */}
-          <div className="flex flex-shrink-0 gap-1.5" aria-hidden="true">
-            {Array.from({ length: subscription.device_limit }, (_, i) => (
+          {/* Device indicator */}
+          {subscription.device_limit <= 10 ? (
+            <div className="flex flex-shrink-0 gap-1.5" aria-hidden="true">
+              {Array.from({ length: subscription.device_limit }, (_, i) => (
+                <div
+                  key={i}
+                  className="h-[7px] w-[7px] rounded-full transition-all duration-300"
+                  style={{
+                    background: i < connectedDevices ? zone.mainHex : g.textGhost,
+                    boxShadow: i < connectedDevices ? `0 0 6px ${zone.mainHex}50` : 'none',
+                  }}
+                />
+              ))}
+            </div>
+          ) : (
+            <div className="flex w-16 flex-shrink-0 items-center" aria-hidden="true">
               <div
-                key={i}
-                className="h-[7px] w-[7px] rounded-full transition-all duration-300"
-                style={{
-                  background: i < connectedDevices ? zone.mainHex : g.textGhost,
-                  boxShadow: i < connectedDevices ? `0 0 6px ${zone.mainHex}50` : 'none',
-                }}
-              />
-            ))}
-          </div>
+                className="h-[6px] w-full overflow-hidden rounded-full"
+                style={{ background: g.textGhost }}
+              >
+                <div
+                  className="h-full rounded-full transition-all duration-500"
+                  style={{
+                    width: `${Math.round((connectedDevices / subscription.device_limit) * 100)}%`,
+                    background: zone.mainHex,
+                    boxShadow: `0 0 8px ${zone.mainHex}40`,
+                    minWidth: connectedDevices > 0 ? '4px' : '0px',
+                  }}
+                />
+              </div>
+            </div>
+          )}
         </HoverBorderGradient>
       )}
 
diff --git a/src/components/layout/AppShell/AppShell.tsx b/src/components/layout/AppShell/AppShell.tsx
index 127d177..4a6d521 100644
--- a/src/components/layout/AppShell/AppShell.tsx
+++ b/src/components/layout/AppShell/AppShell.tsx
@@ -20,6 +20,7 @@ import CampaignBonusNotifier from '@/components/CampaignBonusNotifier';
 import SuccessNotificationModal from '@/components/SuccessNotificationModal';
 import LanguageSwitcher from '@/components/LanguageSwitcher';
 import TicketNotificationBell from '@/components/TicketNotificationBell';
+import { SubscriptionIcon } from '@/components/icons';
 
 import { MobileBottomNav } from './MobileBottomNav';
 import { AppHeader } from './AppHeader';
@@ -252,6 +253,7 @@ export function AppShell({ children }: AppShellProps) {
   // Desktop navigation items
   const desktopNavItems = [
     { path: '/', label: t('nav.dashboard'), icon: HomeIcon },
+    { path: '/subscription', label: t('nav.subscription'), icon: SubscriptionIcon },
     { path: '/balance', label: t('nav.balance'), icon: CreditCardIcon },
     { path: '/support', label: t('nav.support'), icon: ChatIcon },
     { path: '/info', label: t('nav.info'), icon: InfoIcon },
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index 64dd386..8da5359 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -265,7 +265,7 @@ export default function Dashboard() {
         balanceRubles={balanceData?.balance_rubles || 0}
         subscription={subscription}
         referralCount={referralInfo?.total_referrals || 0}
-        earningsRubles={referralInfo?.total_earnings_rubles || 0}
+        earningsRubles={referralInfo?.available_balance_rubles || 0}
         refLoading={refLoading}
       />
 
diff --git a/src/types/index.ts b/src/types/index.ts
index bed9904..85882e7 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -423,6 +423,9 @@ export interface ReferralInfo {
   total_earnings_kopeks: number;
   total_earnings_rubles: number;
   commission_percent: number;
+  available_balance_kopeks: number;
+  available_balance_rubles: number;
+  withdrawn_kopeks: number;
 }
 
 export interface ReferralTerms {