From e94956a0a590e691c1f0a7d558b9e71c8ad7e288 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Acharn=C3=A9?= <maiquocanh2608@gmail.com>
Date: Fri, 21 Aug 2026 18:00:36 +0700
Subject: [PATCH] fix(web): trim empty registration months

---
 .../platform-admin/platform-admin-page.tsx    | 10 ++++----
 .../test/platform-admin-feedbacks.test.tsx    | 23 +++++++++++++++++++
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/features/platform-admin/platform-admin-page.tsx b/apps/web/src/features/platform-admin/platform-admin-page.tsx
index 31fd0522..1c9afdd4 100644
--- a/apps/web/src/features/platform-admin/platform-admin-page.tsx
+++ b/apps/web/src/features/platform-admin/platform-admin-page.tsx
@@ -762,14 +762,16 @@ function RegistrationChart({
   readonly number: Intl.NumberFormat;
   readonly label: string;
 }) {
+  const firstRegistrationIndex = series.findIndex((point) => point.count > 0);
+  const displaySeries = firstRegistrationIndex > 0 ? series.slice(firstRegistrationIndex) : series;
   const width = 460;
   const height = 292;
   const left = 44;
   const right = 448;
   const top = 20;
   const bottom = 250;
-  const maximum = Math.max(1, ...series.map((point) => point.count));
-  const slot = (right - left) / Math.max(1, series.length);
+  const maximum = Math.max(1, ...displaySeries.map((point) => point.count));
+  const slot = (right - left) / Math.max(1, displaySeries.length);
   const barWidth = Math.max(10, slot * 0.58);
   const ticks = [0, 0.5, 1];
   return (
@@ -786,7 +788,7 @@ function RegistrationChart({
             </g>
           );
         })}
-        {series.map((point, index) => {
+        {displaySeries.map((point, index) => {
           const barHeight = (point.count / maximum) * (bottom - top);
           const barX = left + index * slot + (slot - barWidth) / 2;
           return (
@@ -807,7 +809,7 @@ function RegistrationChart({
                 x={barX + barWidth / 2}
                 y={bottom + 25}
               >
-                {index % 2 === 0 || series.length <= 7 ? point.month : ''}
+                {index % 2 === 0 || displaySeries.length <= 7 ? point.month : ''}
               </text>
             </g>
           );
diff --git a/apps/web/test/platform-admin-feedbacks.test.tsx b/apps/web/test/platform-admin-feedbacks.test.tsx
index 4b93b710..1ec474fb 100644
--- a/apps/web/test/platform-admin-feedbacks.test.tsx
+++ b/apps/web/test/platform-admin-feedbacks.test.tsx
@@ -251,6 +251,29 @@ describe('platform admin feedbacks & reviews [WEB-025, WEB-027, IAM-026]', () =>
     expect(await screen.findAllByText('3.129.000 ₫')).toHaveLength(2);
   });
 
+  it('starts the registration chart at the first month with users', async () => {
+    const overview = {
+      ...validOverview,
+      registrationSeries: [
+        { month: '2026-02', count: 0 },
+        { month: '2026-03', count: 0 },
+        { month: '2026-04', count: 0 },
+        { month: '2026-05', count: 0 },
+        { month: '2026-06', count: 8 },
+        { month: '2026-07', count: 39 },
+        { month: '2026-08', count: 26 },
+      ],
+    };
+    stubPlatformAdminServer(serverFeedbacks, overview);
+    renderPlatformAdmin('/vi-VN/platform-admin');
+
+    const chart = await screen.findByRole('img', { name: 'Người dùng mới' });
+    expect(chart.textContent).not.toContain('2026-03');
+    expect(chart.textContent).toContain('2026-06');
+    expect(chart.textContent).toContain('2026-07');
+    expect(chart.textContent).toContain('2026-08');
+  });
+
   it('renders navigation links with the server-authoritative feedback count badge', async () => {
     stubPlatformAdminServer();
     renderPlatformAdmin('/vi-VN/platform-admin');