From a819f309c8105561618690e1408a826b3bce294a Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Wed, 25 Feb 2026 10:30:37 +0300
Subject: [PATCH] fix: show actual connected devices count instead of device
 limit

---
 src/components/dashboard/SubscriptionCardActive.tsx | 9 +++++----
 src/pages/Dashboard.tsx                             | 8 ++++++++
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/dashboard/SubscriptionCardActive.tsx b/src/components/dashboard/SubscriptionCardActive.tsx
index c2d1db0..dfd00d3 100644
--- a/src/components/dashboard/SubscriptionCardActive.tsx
+++ b/src/components/dashboard/SubscriptionCardActive.tsx
@@ -19,6 +19,7 @@ interface SubscriptionCardActiveProps {
   } | null;
   refreshTrafficMutation: UseMutationResult<unknown, unknown, void, unknown>;
   trafficRefreshCooldown: number;
+  connectedDevices: number;
 }
 
 const RefreshIcon = ({ className = 'w-4 h-4' }: { className?: string }) => (
@@ -43,6 +44,7 @@ export default function SubscriptionCardActive({
   trafficData,
   refreshTrafficMutation,
   trafficRefreshCooldown,
+  connectedDevices,
 }: SubscriptionCardActiveProps) {
   const { t } = useTranslation();
   const navigate = useNavigate();
@@ -225,7 +227,7 @@ export default function SubscriptionCardActive({
             </div>
             <div className="mt-0.5 text-[11px] text-white/30">
               {t('dashboard.devicesOfMax', {
-                used: subscription.device_limit,
+                used: connectedDevices,
                 max: subscription.device_limit,
               })}
             </div>
@@ -238,9 +240,8 @@ export default function SubscriptionCardActive({
                 key={i}
                 className="h-[7px] w-[7px] rounded-full transition-all duration-300"
                 style={{
-                  background:
-                    i < subscription.device_limit ? zone.mainHex : 'rgba(255,255,255,0.08)',
-                  boxShadow: i < subscription.device_limit ? `0 0 6px ${zone.mainHex}50` : 'none',
+                  background: i < connectedDevices ? zone.mainHex : 'rgba(255,255,255,0.08)',
+                  boxShadow: i < connectedDevices ? `0 0 6px ${zone.mainHex}50` : 'none',
                 }}
               />
             ))}
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index ce74be9..8806ba0 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -61,6 +61,13 @@ export default function Dashboard() {
     enabled: !subscription && !subLoading,
   });
 
+  const { data: devicesData } = useQuery({
+    queryKey: ['devices'],
+    queryFn: subscriptionApi.getDevices,
+    enabled: !!subscription,
+    staleTime: API.BALANCE_STALE_TIME_MS,
+  });
+
   const { data: referralInfo, isLoading: refLoading } = useQuery({
     queryKey: ['referral-info'],
     queryFn: referralApi.getReferralInfo,
@@ -241,6 +248,7 @@ export default function Dashboard() {
           trafficData={trafficData}
           refreshTrafficMutation={refreshTrafficMutation}
           trafficRefreshCooldown={trafficRefreshCooldown}
+          connectedDevices={devicesData?.total ?? 0}
         />
       ) : null}