From 8d849dfb636e11eac520fbd5698f41786d8d0776 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Wed, 4 Mar 2026 08:40:46 +0100
Subject: [PATCH] feat: show category names next to BSR chart headers when
 single ASIN selected

---
 components/VendorDataView.tsx | 31 ++++++++++++++++++++++++++++---
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/components/VendorDataView.tsx b/components/VendorDataView.tsx
index 11b58a4..81af64b 100644
--- a/components/VendorDataView.tsx
+++ b/components/VendorDataView.tsx
@@ -36,13 +36,24 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
     const asin = uniqueAsins[0];
     const metadata = asinMetadata?.get(asin);
     if (!metadata) return null;
+
+    let topCategory = '';
+    let detailCategory = '';
+    for (const r of bsrData) {
+      if (!topCategory && r.topLevelName) topCategory = r.topLevelName;
+      if (!detailCategory && r.detailLevelName) detailCategory = r.detailLevelName;
+      if (topCategory && detailCategory) break;
+    }
+
     return {
       asin,
       sku: metadata.sku,
       title: metadata.title,
       line: metadata.line,
+      topCategory,
+      detailCategory
     };
-  }, [uniqueAsins, asinMetadata]);
+  }, [uniqueAsins, asinMetadata, bsrData]);
 
   const { topBsrChartData, detailBsrChartData, ratingChartData } = useMemo(() => {
     const byBucket = new Map<string, BSRRecord[]>();
@@ -162,7 +173,14 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
       {/* Top Level BSR Trend Chart */}
       <div className="bg-[#161b24] border border-[#2a3040] rounded-2xl p-6 shadow-md flex flex-col">
         <div className="mb-4">
-          <h3 className="text-[17px] font-semibold text-white tracking-wide mb-1">Top Level BSR Trend</h3>
+          <div className="flex flex-wrap items-center gap-3 mb-1">
+            <h3 className="text-[17px] font-semibold text-white tracking-wide">Top Level BSR Trend</h3>
+            {productInfo?.topCategory && (
+              <span className="text-[11px] font-medium text-[#e2e8f0] bg-[#334155]/60 px-2.5 py-0.5 rounded border border-[#475569]/50 tracking-wider">
+                {productInfo.topCategory}
+              </span>
+            )}
+          </div>
           <p className="text-[13px] text-[#64748b]">Weekly Average Rank • Lower is better</p>
         </div>
 
@@ -229,7 +247,14 @@ const VendorDataView: React.FC<VendorDataViewProps> = ({ bsrData = [], asinMetad
       {/* Detail Level BSR Trend Chart */}
       <div className="bg-[#161b24] border border-[#2a3040] rounded-2xl p-6 shadow-md flex flex-col">
         <div className="mb-4">
-          <h3 className="text-[17px] font-semibold text-white tracking-wide mb-1">Detail Level BSR Trend</h3>
+          <div className="flex flex-wrap items-center gap-3 mb-1">
+            <h3 className="text-[17px] font-semibold text-white tracking-wide">Detail Level BSR Trend</h3>
+            {productInfo?.detailCategory && (
+              <span className="text-[11px] font-medium text-[#e2e8f0] bg-[#334155]/60 px-2.5 py-0.5 rounded border border-[#475569]/50 tracking-wider">
+                {productInfo.detailCategory}
+              </span>
+            )}
+          </div>
           <p className="text-[13px] text-[#64748b]">Sub-category Performance • Filtered ASINs</p>
         </div>