From 78a51ca60a77874637b244011c57f707c3c4fe5f Mon Sep 17 00:00:00 2001
From: sazzadulalambd <sazzad.sua@gmail.com>
Date: Fri, 15 May 2026 19:18:07 +0600
Subject: [PATCH] feat: replace ROI metric with total bike count and add item
 counts to investment detail tabs

---
 src/app/investor/investments/[id]/page.tsx | 30 +++++++++++++++-------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/app/investor/investments/[id]/page.tsx b/src/app/investor/investments/[id]/page.tsx
index 0ae2825..0f5c7d4 100644
--- a/src/app/investor/investments/[id]/page.tsx
+++ b/src/app/investor/investments/[id]/page.tsx
@@ -97,7 +97,7 @@ export default function InvestorInvestmentDetailPage({ params }: { params: Promi
   return (
     <div className="min-h-screen lg:pt-6 pt-0 ">
       <InvestorNotification isMobile />
-      <div className="pt-18 lg:pt-0 p-4 lg:p-6 max-w-8xl mx-auto mb-20 lg:mb-0">
+      <div className="pt-18 lg:pt-0 p-4 lg:p-6 max-w-8xl mx-auto mb-12 lg:mb-0">
         <div className="mb-6">
           <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
             <div className="flex items-center gap-3">
@@ -156,26 +156,38 @@ export default function InvestorInvestmentDetailPage({ params }: { params: Promi
           <div className="bg-white rounded-xl p-4 lg:p-5 border border-slate-200 shadow-sm">
             <div className="flex items-center gap-2 mb-2">
               <div className="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
-                <Percent className="w-4 h-4 text-blue-600" />
+                <Bike className="w-4 h-4 text-blue-600" />
               </div>
-              <p className="text-xs text-slate-500 font-medium">ROI</p>
+              <p className="text-xs text-slate-500 font-medium">Total Bikes</p>
             </div>
-            <p className="text-xl lg:text-2xl font-bold text-blue-600">{investment.expectedRoi}%</p>
+            <p className="text-xl lg:text-2xl font-bold text-blue-600">{demoBikes.length}</p>
           </div>
+
         </div>
 
         <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
           <div className="flex overflow-x-auto border-b border-slate-100">
-            {['overview', 'bikes', 'transactions', 'statement'].map((tab) => (
+            {[
+              { key: 'overview', label: 'Overview', count: null },
+              { key: 'bikes', label: 'Bikes', count: demoBikes.length },
+
+              { key: 'transactions', label: 'Transactions', count: demoTransactions.length },
+              { key: 'statement', label: 'Statement', count: null },
+            ].map((tab) => (
               <button
-                key={tab}
-                onClick={() => setActiveTab(tab)}
-                className={`px-4 lg:px-6 py-3 text-sm font-semibold capitalize whitespace-nowrap transition-colors ${activeTab === tab
+                key={tab.key}
+                onClick={() => setActiveTab(tab.key)}
+                className={`px-4 lg:px-6 py-3 text-sm font-semibold capitalize whitespace-nowrap transition-colors flex items-center gap-2 ${activeTab === tab.key
                   ? 'text-investor bg-investor/5 border-b-2 border-investor'
                   : 'text-slate-500 hover:text-slate-700 hover:bg-slate-50'
                   }`}
               >
-                {tab}
+                {tab.label}
+                {tab.count !== null && (
+                  <span className={`px-1.5 py-0.5 rounded text-[10px] font-bold ${activeTab === tab.key ? 'bg-investor text-white' : 'bg-slate-200 text-slate-600'}`}>
+                    {tab.count}
+                  </span>
+                )}
               </button>
             ))}
           </div>