From 9b7b9e65db65c4c2413d6e24a68d7fadb28a95b8 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Mon, 26 Jan 2026 16:35:16 +0100
Subject: [PATCH] style: refine Product Info layout in Forecast View to match
 reference image

---
 components/ForecastView.tsx | 38 ++++++++++++++++++++-----------------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/components/ForecastView.tsx b/components/ForecastView.tsx
index ae54a0b..b2eefab 100644
--- a/components/ForecastView.tsx
+++ b/components/ForecastView.tsx
@@ -18,17 +18,12 @@ interface ForecastViewProps {
 const MONTH_ORDER = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 
 // Top 50 Badge Component (reused logic)
-const Top50Badge: React.FC<{ rank: number; label: string; theme?: 'amber' | 'indigo' | 'blue' }> = ({ rank, label, theme = 'amber' }) => {
-    const themeClasses = {
-        amber: 'bg-amber-500/10 text-amber-500 border-amber-500/20',
-        indigo: 'bg-indigo-500/10 text-indigo-400 border-indigo-500/20',
-        blue: 'bg-blue-500/10 text-blue-400 border-blue-500/20'
-    };
-
+// Top 50 Badge Component (matched to image)
+const Top50Badge: React.FC<{ rank: number; label: string; theme?: 'amber' | 'indigo' | 'blue' }> = ({ rank, label }) => {
     return (
-        <div className={`flex items-center gap-1 px-1.5 py-0.5 rounded border text-[9px] font-black uppercase tracking-tighter shadow-sm ${themeClasses[theme]}`}>
-            <span className="opacity-70">{label}</span>
-            <span className="text-sm">#{rank}</span>
+        <div className="flex items-center gap-1.5 px-2 py-1 rounded bg-[#8b5cf6] text-white border border-white/10 shadow-lg">
+            <span className="text-xs">🏆</span>
+            <span className="text-[10px] font-black uppercase tracking-tighter">{label} {rank}</span>
         </div>
     );
 };
@@ -227,16 +222,25 @@ const ForecastView: React.FC<ForecastViewProps> = ({ data, filters, top50Ranking
                                 return (
                                     <tr key={p.asin} className="hover:bg-indigo-500/5 transition-colors group">
                                         <td className="px-6 py-4">
-                                            <div className="flex flex-col gap-1">
-                                                <div className="flex items-center gap-2">
+                                            <div className="flex flex-col gap-1.5">
+                                                {/* ID Row */}
+                                                <div className="flex items-center gap-3">
                                                     {ranks.map((r, i) => (
-                                                        <Top50Badge key={i} rank={r.rank} label={r.label} theme={r.theme} />
+                                                        <Top50Badge key={i} rank={r.rank} label={r.label} />
                                                     ))}
-                                                    <span className="font-black text-xs text-indigo-400 uppercase tracking-tighter">{p.sku}</span>
-                                                    <span className="text-[10px] font-bold text-slate-500 bg-slate-800 px-1.5 py-0.5 rounded border border-white/5">{p.asin}</span>
+                                                    <span className="font-black text-sm text-[#818cf8] uppercase tracking-tight">{p.sku}</span>
+                                                    <div className="px-2 py-0.5 rounded bg-slate-800/80 border border-white/5 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
+                                                        {p.asin}
+                                                    </div>
+                                                </div>
+                                                {/* Title Row */}
+                                                <div className="text-[13px] font-medium text-slate-100 leading-snug group-hover:text-white transition-colors">
+                                                    {p.title}
+                                                </div>
+                                                {/* Line Row */}
+                                                <div className="text-[10px] font-black text-[#ec4899] uppercase tracking-[0.15em]">
+                                                    {p.line}
                                                 </div>
-                                                <span className="text-[11px] text-white/70 truncate w-[240px] leading-tight" title={p.title}>{p.title}</span>
-                                                <span className="text-[9px] text-fuchsia-400/80 font-bold uppercase tracking-widest">{p.line}</span>
                                             </div>
                                         </td>
                                         <td className="px-6 py-4 text-right font-mono font-bold text-slate-400">