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 <[email protected]>

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">
+            <CardContent className="flex flex-col gap-4">
-              <div className="space-y-2">
+              <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">
+            <CardContent className="flex flex-col gap-4">
-              <div className="space-y-2">
+              <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">
+            <CardContent className="flex flex-col gap-4">
-              <div className="space-y-2">
+              <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>

apps/web/src/routes/_auth/index.tsx

@@ -121,58 +121,46 @@ function DashboardPage() {
     )
   }, [isLoading, summary, statusChartData, groupChartData, domains, groups])
 
-  const kpiCards = useMemo<KpiStatCard[]>(
+  const ungroupedServiceCount = serviceData?.ungrouped.length ?? 0
-    () => [
+  const kpiCards: KpiStatCard[] = [
-      {
+    {
-        id: 'domains',
+      id: 'domains',
-        label: 'Домены',
+      label: 'Домены',
-        value: domains?.length ?? 0,
+      value: domains?.length ?? 0,
-        hint:
+      hint:
-          ungroupedCount > 0
+        ungroupedCount > 0
-            ? `${ungroupedCount} без группы`
+          ? `${ungroupedCount} без группы`
-            : 'Все в группах',
+          : 'Все в группах',
-        to: '/domains',
+      to: '/domains',
-      },
+    },
-      {
+    {
-        id: 'groups',
+      id: 'groups',
-        label: 'Группы',
+      label: 'Группы',
-        value: groups?.length ?? 0,
+      value: groups?.length ?? 0,
-        hint: `${groupChartData.filter((g) => g.count > 0).length} с зонами`,
+      hint: `${groupChartData.filter((g) => g.count > 0).length} с зонами`,
-        to: '/groups',
+      to: '/groups',
-      },
+    },
-      {
+    {
-        id: 'services',
+      id: 'services',
-        label: 'Сервисы',
+      label: 'Сервисы',
-        value: serviceCount,
+      value: serviceCount,
-        hint: serviceData?.ungrouped.length
+      hint: ungroupedServiceCount
-          ? `${serviceData.ungrouped.length} без группы`
+        ? `${ungroupedServiceCount} без группы`
-          : undefined,
+        : undefined,
-        to: '/services',
+      to: '/services',
-        search: { domainId: undefined },
+      search: { domainId: undefined },
-      },
+    },
-      {
+    {
-        id: 'certs',
+      id: 'certs',
-        label: 'Сертификаты',
+      label: 'Сертификаты',
-        value: certs?.length ?? 0,
+      value: certs?.length ?? 0,
-        hint:
+      hint:
-          certWarnings > 0
+        certWarnings > 0
-            ? `${certOk} в норме · ${certWarnings} внимания`
+          ? `${certOk} в норме · ${certWarnings} внимания`
-            : `${certOk} в норме`,
+          : `${certOk} в норме`,
-        to: '/certificates',
+      to: '/certificates',
-      },
+    },
-    ],
+  ]
-    [
-      domains?.length,
-      ungroupedCount,
-      groups?.length,
-      groupChartData,
-      serviceCount,
-      serviceData?.ungrouped.length,
-      certs?.length,
-      certWarnings,
-      certOk,
-    ],
-  )
 
   return (
     <PageShell>