refactor: improve responsive layout and add payment history section to investment details page
This commit is contained in:
sazzadulalambd
@@ -104,9 +104,9 @@ export default function InvestorInvestmentDetailPage({ params }: { params: Promi
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen pb-20 lg:pb-0">
|
||||
<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">
|
||||
@@ -114,17 +114,33 @@ export default function InvestorInvestmentDetailPage({ params }: { params: Promi
|
||||
<ArrowLeft className="w-5 h-5 text-slate-600" />
|
||||
</button>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between">
|
||||
<h1 className="text-xl lg:text-2xl font-bold text-slate-800 flex items-center gap-2">
|
||||
<Target className="w-5 h-5 lg:w-6 lg:h-6 text-investor" />{investment.planName}
|
||||
<Target className="w-5 h-5 lg:w-6 lg:h-6 text-investor" />
|
||||
{investment.planName}
|
||||
</h1>
|
||||
<span className={`px-2.5 py-1 rounded-full text-xs font-bold ${style.badge} capitalize`}>{investment.planType}</span>
|
||||
<span className={`px-2.5 py-1 rounded-full text-xs font-bold ${investment.status === 'active' ? 'bg-green-100 text-green-700' : 'bg-slate-100 text-slate-600'} capitalize`}>{investment.status}</span>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span
|
||||
className={`px-2.5 py-1 rounded-full text-xs font-bold ${style.badge} capitalize`}
|
||||
>
|
||||
{investment.planType}
|
||||
</span>
|
||||
|
||||
<span
|
||||
className={`px-2.5 py-1 rounded-full text-xs font-bold ${investment.status === 'active'
|
||||
? 'bg-green-100 text-green-700'
|
||||
: 'bg-slate-100 text-slate-600'
|
||||
} capitalize`}
|
||||
>
|
||||
{investment.status}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-slate-500 mt-1">ID: #{investment.id?.toUpperCase()} • Started: {investment.startDate}</p>
|
||||
</div>
|
||||
</div>
|
||||
<button onClick={() => toast.success('Download started')} className="px-4 py-2.5 bg-white border border-slate-200 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-50 flex items-center gap-2 shadow-sm">
|
||||
<button onClick={() => toast.success('Download started')} className="px-4 py-2.5 bg-white border border-slate-200 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-50 flex justify-center lg:justify-start items-center gap-2 shadow-sm">
|
||||
<Download className="w-4 h-4" /> Download
|
||||
</button>
|
||||
</div>
|
||||
@@ -147,7 +163,7 @@ export default function InvestorInvestmentDetailPage({ params }: { params: Promi
|
||||
</div>
|
||||
<p className="text-xs text-slate-500 font-medium">Total Return</p>
|
||||
</div>
|
||||
<p className="text-xl lg:text-2xl font-bold text-green-600">৳{(investment.actualEarnings / 1000).toFixed(0)}k</p>
|
||||
<p className="text-xl lg:text-2xl font-bold text-green-600">৳{investment.actualEarnings.toLocaleString()}</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-xl p-4 lg:p-5 border border-amber-200 shadow-sm bg-amber-50/50">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
@@ -173,20 +189,18 @@ export default function InvestorInvestmentDetailPage({ params }: { params: Promi
|
||||
</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">
|
||||
<div className="flex overflow-x-auto border-b border-slate-100 justify-between sm:justify-start px-4 lg:px-0">
|
||||
{[
|
||||
{ key: 'overview', label: 'Overview', icon: FileText, count: null },
|
||||
{ key: 'bikes', label: 'Bikes', icon: Bike, count: demoBikes.length },
|
||||
{ key: 'payments', label: 'Payments', icon: Wallet, count: null },
|
||||
{ key: 'transactions', label: 'Transactions', icon: CreditCard, count: demoTransactions.length },
|
||||
{ key: 'statement', label: 'Statement', icon: Receipt, count: null },
|
||||
|
||||
].map((tab) => {
|
||||
const Icon = tab.icon;
|
||||
return (
|
||||
<button key={tab.key} onClick={() => setActiveTab(tab.key)}
|
||||
className={`px-3 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'}`}>
|
||||
<Icon className="w-4 h-4" />
|
||||
className={`px-4 lg:px-6 py-3 w-full lg:w-auto text-sm font-semibold capitalize whitespace-nowrap transition-colors flex justify-center 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'}`}>
|
||||
<Icon className="w-4 h-4 " />
|
||||
<span className="hidden lg:inline">{tab.label}</span>
|
||||
{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>
|
||||
@@ -267,6 +281,41 @@ export default function InvestorInvestmentDetailPage({ params }: { params: Promi
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-green-50 border border-green-200 rounded-xl p-5">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h4 className="font-semibold text-green-800 flex items-center gap-2">
|
||||
<DollarSign className="w-4 h-4 text-green-600" /> Payment History
|
||||
</h4>
|
||||
<button onClick={() => setShowPaymentModal(true)} className="px-3 py-1.5 bg-green-600 text-white text-xs font-bold rounded-lg hover:bg-green-700 transition-colors">
|
||||
Make Payment
|
||||
</button>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-white/50">
|
||||
<tr>
|
||||
<th className="px-3 py-2 text-left text-xs font-semibold text-slate-500">Date</th>
|
||||
<th className="px-3 py-2 text-left text-xs font-semibold text-slate-500">Type</th>
|
||||
<th className="px-3 py-2 text-left text-xs font-semibold text-slate-500">Method</th>
|
||||
<th className="px-3 py-2 text-right text-xs font-semibold text-slate-500">Amount</th>
|
||||
<th className="px-3 py-2 text-center text-xs font-semibold text-slate-500">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-green-100">
|
||||
{paymentHistory.map((payment) => (
|
||||
<tr key={payment.id} className="bg-white/50">
|
||||
<td className="px-3 py-2 text-slate-600">{payment.date}</td>
|
||||
<td className="px-3 py-2"><span className="px-2 py-0.5 rounded text-[10px] font-bold uppercase bg-slate-100 text-slate-600">{payment.type}</span></td>
|
||||
<td className="px-3 py-2 text-slate-600">{payment.method}</td>
|
||||
<td className="px-3 py-2 text-right font-bold text-green-700">৳{payment.amount.toLocaleString()}</td>
|
||||
<td className="px-3 py-2 text-center"><span className="px-2 py-0.5 rounded text-[10px] font-bold uppercase bg-green-100 text-green-700">{payment.status}</span></td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user