From 09f467bfb36e89e6922d3add3e255351a5e6cabc Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Thu, 19 Mar 2026 21:33:16 +0300
Subject: [PATCH] feat: show per-subscription mini-cards on Dashboard with
 tariff name, traffic, devices, date

---
 src/pages/Dashboard.tsx | 65 ++++++++++++++++++++++++++++++++---------
 1 file changed, 52 insertions(+), 13 deletions(-)

diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index 911d36b..653679c 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -275,21 +275,60 @@ export default function Dashboard() {
       {/* Pending Gift Activations */}
       {pendingGifts && pendingGifts.length > 0 && <PendingGiftCard gifts={pendingGifts} />}
 
-      {/* Multi-tariff: show link to subscriptions list */}
-      {isMultiTariff && (
-        <Link to="/subscriptions" className="bento-card flex items-center justify-between">
-          <div>
-            <div className="text-sm font-medium opacity-60">
+      {/* Multi-tariff: show mini-cards for each subscription */}
+      {isMultiTariff && multiSubData?.subscriptions && (
+        <div className="space-y-3">
+          <div className="flex items-center justify-between px-1">
+            <span className="text-sm font-medium opacity-60">
               {t('dashboard.subscriptions', 'Подписки')}
-            </div>
-            <div className="text-lg font-bold">
-              {multiSubCount > 1
-                ? `${multiSubCount} ${t('dashboard.activeTariffs', 'активных тарифов')}`
-                : t('dashboard.manageSubscriptions', 'Управление подписками')}
-            </div>
+            </span>
+            <Link to="/subscriptions" className="text-xs text-accent-400 hover:underline">
+              {t('dashboard.manageAll', 'Управление')} →
+            </Link>
           </div>
-          <ChevronRightIcon />
-        </Link>
+          {multiSubData.subscriptions.map((sub) => {
+            const isActive = sub.status === 'active' || sub.status === 'trial';
+            const trafficDisplay =
+              sub.traffic_limit_gb === 0
+                ? '∞'
+                : `${sub.traffic_used_gb.toFixed(1)} / ${sub.traffic_limit_gb} ГБ`;
+            const endDate = sub.end_date
+              ? new Date(sub.end_date).toLocaleDateString('ru-RU', {
+                  day: '2-digit',
+                  month: '2-digit',
+                  year: 'numeric',
+                })
+              : '—';
+            return (
+              <Link
+                key={sub.id}
+                to={`/subscription/${sub.id}`}
+                className="bento-card flex items-center justify-between p-4 transition-all hover:scale-[1.01]"
+              >
+                <div className="flex-1">
+                  <div className="flex items-center gap-2">
+                    <span
+                      className={`inline-block h-2 w-2 rounded-full ${isActive ? 'bg-emerald-400' : 'bg-red-400'}`}
+                    />
+                    <span className="font-semibold">{sub.tariff_name || 'Подписка'}</span>
+                  </div>
+                  <div className="mt-1.5 flex gap-4 text-xs opacity-50">
+                    <span>📊 {trafficDisplay}</span>
+                    <span>📱 {sub.device_limit}</span>
+                    <span>📅 {endDate}</span>
+                  </div>
+                </div>
+                <ChevronRightIcon />
+              </Link>
+            );
+          })}
+          <Link
+            to="/subscription/purchase"
+            className="flex w-full items-center justify-center gap-1.5 rounded-2xl border border-dashed border-white/15 p-3 text-xs opacity-50 transition-opacity hover:opacity-80"
+          >
+            <span>+</span> {t('subscriptions.buyAnother', 'Купить ещё тариф')}
+          </Link>
+        </div>
       )}
 
       {/* Subscription Status Card — hidden in multi-tariff (managed via /subscriptions) */}