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">
-              <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>

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

@@ -121,8 +121,8 @@ function DashboardPage() {
     )
   }, [isLoading, summary, statusChartData, groupChartData, domains, groups])
 
-  const kpiCards = useMemo<KpiStatCard[]>(
-    () => [
+  const ungroupedServiceCount = serviceData?.ungrouped.length ?? 0
+  const kpiCards: KpiStatCard[] = [
     {
       id: 'domains',
       label: 'Домены',
@@ -144,8 +144,8 @@ function DashboardPage() {
       id: 'services',
       label: 'Сервисы',
       value: serviceCount,
-        hint: serviceData?.ungrouped.length
-          ? `${serviceData.ungrouped.length} без группы`
+      hint: ungroupedServiceCount
+        ? `${ungroupedServiceCount} без группы`
         : undefined,
       to: '/services',
       search: { domainId: undefined },
@@ -160,19 +160,7 @@ function DashboardPage() {
           : `${certOk} в норме`,
       to: '/certificates',
     },
-    ],
-    [
-      domains?.length,
-      ungroupedCount,
-      groups?.length,
-      groupChartData,
-      serviceCount,
-      serviceData?.ungrouped.length,
-      certs?.length,
-      certWarnings,
-      certOk,
-    ],
-  )
+  ]
 
   return (
     <PageShell>