From 600044d6b22c3164b7d5e42b3a53241eeba37741 Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Fri, 17 Jul 2026 00:59:57 +0700
Subject: [PATCH] refactor(web): update layout and styling in c-tabs-2 and
 DashboardPage

- Changed CardContent and inner divs in c-tabs-2 to use flexbox for improved spacing and layout consistency.
- Refactored KPI card creation in DashboardPage to eliminate useMemo, simplifying the code structure and enhancing readability.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 apps/web/src/components/examples/c-tabs-2.tsx | 18 ++--
 apps/web/src/routes/_auth/index.tsx           | 92 ++++++++-----------
 2 files changed, 49 insertions(+), 61 deletions(-)

diff --git a/apps/web/src/components/examples/c-tabs-2.tsx b/apps/web/src/components/examples/c-tabs-2.tsx
index e8b564a..08dfbff 100644
--- a/apps/web/src/components/examples/c-tabs-2.tsx
+++ b/apps/web/src/components/examples/c-tabs-2.tsx
@@ -33,8 +33,8 @@ export function Pattern() {
                 Update your account information.
               </CardDescription>
             </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="space-y-2">
+            <CardContent className="flex flex-col gap-4">
+              <div className="flex flex-col gap-2">
                 <Label htmlFor="underline-name" className="text-sm">
                   Name
                 </Label>
@@ -44,7 +44,7 @@ export function Pattern() {
                   className="h-9"
                 />
               </div>
-              <div className="space-y-2">
+              <div className="flex flex-col gap-2">
                 <Label htmlFor="underline-email" className="text-sm">
                   Email
                 </Label>
@@ -69,14 +69,14 @@ export function Pattern() {
                 Change your password here.
               </CardDescription>
             </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="space-y-2">
+            <CardContent className="flex flex-col gap-4">
+              <div className="flex flex-col gap-2">
                 <Label htmlFor="underline-current" className="text-sm">
                   Current password
                 </Label>
                 <Input id="underline-current" type="password" className="h-9" />
               </div>
-              <div className="space-y-2">
+              <div className="flex flex-col gap-2">
                 <Label htmlFor="underline-new" className="text-sm">
                   New password
                 </Label>
@@ -96,8 +96,8 @@ export function Pattern() {
                 Manage your preferences.
               </CardDescription>
             </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="space-y-2">
+            <CardContent className="flex flex-col gap-4">
+              <div className="flex flex-col gap-2">
                 <Label htmlFor="underline-theme" className="text-sm">
                   Theme
                 </Label>
@@ -107,7 +107,7 @@ export function Pattern() {
                   className="h-9"
                 />
               </div>
-              <div className="space-y-2">
+              <div className="flex flex-col gap-2">
                 <Label htmlFor="underline-language" className="text-sm">
                   Language
                 </Label>
diff --git a/apps/web/src/routes/_auth/index.tsx b/apps/web/src/routes/_auth/index.tsx
index 486c980..54dae89 100644
--- a/apps/web/src/routes/_auth/index.tsx
+++ b/apps/web/src/routes/_auth/index.tsx
@@ -121,58 +121,46 @@ function DashboardPage() {
     )
   }, [isLoading, summary, statusChartData, groupChartData, domains, groups])
 
-  const kpiCards = useMemo<KpiStatCard[]>(
-    () => [
-      {
-        id: 'domains',
-        label: 'Домены',
-        value: domains?.length ?? 0,
-        hint:
-          ungroupedCount > 0
-            ? `${ungroupedCount} без группы`
-            : 'Все в группах',
-        to: '/domains',
-      },
-      {
-        id: 'groups',
-        label: 'Группы',
-        value: groups?.length ?? 0,
-        hint: `${groupChartData.filter((g) => g.count > 0).length} с зонами`,
-        to: '/groups',
-      },
-      {
-        id: 'services',
-        label: 'Сервисы',
-        value: serviceCount,
-        hint: serviceData?.ungrouped.length
-          ? `${serviceData.ungrouped.length} без группы`
-          : undefined,
-        to: '/services',
-        search: { domainId: undefined },
-      },
-      {
-        id: 'certs',
-        label: 'Сертификаты',
-        value: certs?.length ?? 0,
-        hint:
-          certWarnings > 0
-            ? `${certOk} в норме · ${certWarnings} внимания`
-            : `${certOk} в норме`,
-        to: '/certificates',
-      },
-    ],
-    [
-      domains?.length,
-      ungroupedCount,
-      groups?.length,
-      groupChartData,
-      serviceCount,
-      serviceData?.ungrouped.length,
-      certs?.length,
-      certWarnings,
-      certOk,
-    ],
-  )
+  const ungroupedServiceCount = serviceData?.ungrouped.length ?? 0
+  const kpiCards: KpiStatCard[] = [
+    {
+      id: 'domains',
+      label: 'Домены',
+      value: domains?.length ?? 0,
+      hint:
+        ungroupedCount > 0
+          ? `${ungroupedCount} без группы`
+          : 'Все в группах',
+      to: '/domains',
+    },
+    {
+      id: 'groups',
+      label: 'Группы',
+      value: groups?.length ?? 0,
+      hint: `${groupChartData.filter((g) => g.count > 0).length} с зонами`,
+      to: '/groups',
+    },
+    {
+      id: 'services',
+      label: 'Сервисы',
+      value: serviceCount,
+      hint: ungroupedServiceCount
+        ? `${ungroupedServiceCount} без группы`
+        : undefined,
+      to: '/services',
+      search: { domainId: undefined },
+    },
+    {
+      id: 'certs',
+      label: 'Сертификаты',
+      value: certs?.length ?? 0,
+      hint:
+        certWarnings > 0
+          ? `${certOk} в норме · ${certWarnings} внимания`
+          : `${certOk} в норме`,
+      to: '/certificates',
+    },
+  ]
 
   return (
     <PageShell>