From ad1d9c34ea8d49454e5058f6266a9254d8f3a201 Mon Sep 17 00:00:00 2001
From: DCCONSTRUCTIONS <dcconstructions@MacBook-Pro-DCCONSTRUCTIONS-2.local>
Date: Fri, 24 Apr 2026 14:03:22 +0300
Subject: [PATCH] =?UTF-8?q?UI=20-=20=D0=9C=D0=95=D0=96=D0=9F=D0=A0=D0=9E?=
 =?UTF-8?q?=D0=95=D0=9A=D0=A2=D0=9D=D0=90=D0=AF=20=D0=9A=D0=9E=D0=9C=D0=9C?=
 =?UTF-8?q?=D0=A3=D0=9D=D0=98=D0=9A=D0=90=D0=A6=D0=98=D0=AF:=20=D0=B2?=
 =?UTF-8?q?=D0=BE=D1=81=D1=81=D1=82=D0=B0=D0=BD=D0=BE=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=B0=D0=BA=D1=82?=
 =?UTF-8?q?=D0=BD=D0=BE=D0=B9=20=D1=81=D0=B2=D0=BE=D0=B4=D0=BA=D0=B8=20?=
 =?UTF-8?q?=D0=B0=D0=BD=D0=B0=D0=BB=D0=B8=D1=82=D0=B8=D0=BA=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/analytics/total-insights.tsx   | 62 +++++++++++++++--
 plane-src/apps/web/styles/globals.css         | 67 +++++++++++++++++++
 2 files changed, 123 insertions(+), 6 deletions(-)

diff --git a/plane-src/apps/web/core/components/analytics/total-insights.tsx b/plane-src/apps/web/core/components/analytics/total-insights.tsx
index 98e5ed0..5b72d39 100644
--- a/plane-src/apps/web/core/components/analytics/total-insights.tsx
+++ b/plane-src/apps/web/core/components/analytics/total-insights.tsx
@@ -22,6 +22,29 @@ import InsightCard from "./insight-card";
 
 const analyticsService = new AnalyticsService();
 
+const WORK_ITEM_SUMMARY_FIELDS: IInsightField[] = [
+  {
+    key: "total_work_items",
+    i18nKey: "workspace_analytics.total",
+  },
+  {
+    key: "started_work_items",
+    i18nKey: "workspace_analytics.started_work_items",
+  },
+  {
+    key: "backlog_work_items",
+    i18nKey: "workspace_analytics.backlog_work_items",
+  },
+  {
+    key: "un_started_work_items",
+    i18nKey: "workspace_analytics.un_started_work_items",
+  },
+  {
+    key: "completed_work_items",
+    i18nKey: "workspace_analytics.completed_work_items",
+  },
+];
+
 const getInsightLabel = (
   analyticsType: TAnalyticsTabsBase,
   item: IInsightField,
@@ -61,6 +84,13 @@ const TotalInsights = observer(function TotalInsights({
   const workspaceSlug = params.workspaceSlug.toString();
   const { t } = useTranslation();
   const { selectedDuration, selectedProjects, selectedCycle, selectedModule, isPeekView, isEpic } = useAnalytics();
+  const insightFields =
+    analyticsType === "work-items"
+      ? ANALYTICS_INSIGHTS_FIELDS[analyticsType]?.length
+        ? ANALYTICS_INSIGHTS_FIELDS[analyticsType]
+        : WORK_ITEM_SUMMARY_FIELDS
+      : (ANALYTICS_INSIGHTS_FIELDS[analyticsType] ?? []);
+  const shouldUseSummaryCard = analyticsType === "work-items";
   const { data: totalInsightsData, isLoading } = useSWR(
     `total-insights-${analyticsType}-${selectedDuration}-${selectedProjects}-${selectedCycle}-${selectedModule}-${isEpic}`,
     () =>
@@ -77,18 +107,38 @@ const TotalInsights = observer(function TotalInsights({
         isPeekView
       )
   );
+
+  if (shouldUseSummaryCard) {
+    return (
+      <section
+        className={cn("nodedc-analytics-summary-card", peekView && "nodedc-analytics-summary-card-peek")}
+        aria-label="Сводка аналитики"
+      >
+        {insightFields.map((item) => (
+          <div
+            key={`${analyticsType}-${item.key}`}
+            className="nodedc-analytics-summary-item flex min-h-[5.75rem] min-w-0 flex-col justify-between gap-3 px-4 py-3.5"
+          >
+            <div className="nodedc-analytics-summary-label text-[0.72rem] font-medium text-secondary">
+              {getInsightLabel(analyticsType, item, isEpic, t)}
+            </div>
+            <div className="nodedc-analytics-summary-value text-[1.55rem] font-semibold text-primary">
+              {totalInsightsData?.[item.key]?.count ?? 0}
+            </div>
+          </div>
+        ))}
+      </section>
+    );
+  }
+
   return (
     <div
       className={cn(
         "grid grid-cols-1 gap-8 sm:grid-cols-2 md:gap-10",
-        !peekView
-          ? ANALYTICS_INSIGHTS_FIELDS[analyticsType]?.length % 5 === 0
-            ? "gap-10 lg:grid-cols-5"
-            : "gap-8 lg:grid-cols-4"
-          : "grid-cols-2"
+        !peekView ? (insightFields.length % 5 === 0 ? "gap-10 lg:grid-cols-5" : "gap-8 lg:grid-cols-4") : "grid-cols-2"
       )}
     >
-      {ANALYTICS_INSIGHTS_FIELDS[analyticsType]?.map((item) => (
+      {insightFields.map((item) => (
         <InsightCard
           key={`${analyticsType}-${item.key}`}
           isLoading={isLoading}
diff --git a/plane-src/apps/web/styles/globals.css b/plane-src/apps/web/styles/globals.css
index 608e28f..2cc3fae 100644
--- a/plane-src/apps/web/styles/globals.css
+++ b/plane-src/apps/web/styles/globals.css
@@ -2768,6 +2768,73 @@
     color: var(--text-color-primary) !important;
   }
 
+  .nodedc-analytics-summary-card {
+    position: relative;
+    z-index: 1;
+    display: grid;
+    grid-template-columns: repeat(5, minmax(8.75rem, 1fr));
+    width: 100%;
+    min-height: 5.75rem;
+    overflow-x: auto;
+    border: 0 !important;
+    border-radius: 1.45rem !important;
+    background:
+      linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%), rgba(255, 255, 255, 0.024) !important;
+    box-shadow:
+      0 16px 38px rgba(0, 0, 0, 0.16),
+      inset 0 1px 0 rgba(255, 255, 255, 0.018) !important;
+    -webkit-backdrop-filter: blur(18px);
+    backdrop-filter: blur(18px);
+    scrollbar-color: rgba(var(--nodedc-card-active-rgb), 0.62) rgba(255, 255, 255, 0.035);
+    scrollbar-width: thin;
+  }
+
+  .nodedc-analytics-summary-card::-webkit-scrollbar {
+    height: 0.45rem;
+  }
+
+  .nodedc-analytics-summary-card::-webkit-scrollbar-track {
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.035);
+  }
+
+  .nodedc-analytics-summary-card::-webkit-scrollbar-thumb {
+    border-radius: 999px;
+    background: rgba(var(--nodedc-card-active-rgb), 0.62);
+  }
+
+  .nodedc-analytics-summary-item {
+    position: relative;
+    min-width: 0;
+  }
+
+  .nodedc-analytics-summary-item + .nodedc-analytics-summary-item::before {
+    position: absolute;
+    top: 1rem;
+    bottom: 1rem;
+    left: 0;
+    width: 1px;
+    background: rgba(255, 255, 255, 0.06);
+    content: "";
+  }
+
+  .nodedc-analytics-summary-label {
+    display: -webkit-box;
+    overflow: hidden;
+    line-height: 1.28;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+
+  .nodedc-analytics-summary-value {
+    position: relative;
+    z-index: 1;
+    display: block;
+    min-height: 1.65rem;
+    color: var(--text-color-primary) !important;
+    line-height: 1;
+  }
+
   .nodedc-attachment-upload {
     min-height: 4.5rem;
     border: 0 !important;