shawon/JML
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: replace ROI metric with total bike count and add item counts to investment detail tabs

Browse Source
This commit is contained in:
sazzadulalambd
2026-05-15 19:18:07 +06:00
parent 18b29d535b
commit 78a51ca60a
1 changed files with 21 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/app/investor/investments/[id]/page.tsx
View File

@@ -97,7 +97,7 @@ export default function InvestorInvestmentDetailPage({ params }: { params: Promi
return ( return (
<div className="min-h-screen lg:pt-6 pt-0 "> <div className="min-h-screen lg:pt-6 pt-0 ">
<InvestorNotification isMobile /> <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="mb-6">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4"> <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div className="flex items-center gap-3"> <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="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="flex items-center gap-2 mb-2">
<div className="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center"> <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> </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> </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> </div>
<div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden"> <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"> <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 <button
key={tab} key={tab.key}
onClick={() => setActiveTab(tab)} onClick={() => setActiveTab(tab.key)}
className={`px-4 lg:px-6 py-3 text-sm font-semibold capitalize whitespace-nowrap transition-colors ${activeTab === tab 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-investor bg-investor/5 border-b-2 border-investor'
: 'text-slate-500 hover:text-slate-700 hover:bg-slate-50' : '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> </button>
))} ))}
</div> </div>