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

refactor: simplify payment workflow by removing amount input and update sidebar profile navigation

Browse Source
This commit is contained in:
sazzadulalambd
2026-05-19 16:00:27 +06:00
parent 3edcfbc654
commit 3297daf124
3 changed files with 80 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/app/investor/profile/page.tsx
View File

@@ -12,6 +12,8 @@ import {
import { investors } from '@/data/mockData';
import toast from 'react-hot-toast';
import InvestorNotification from '@/components/InvestorNotification';
import { logout } from '@/lib/auth';
function SectionCard({ title, icon: Icon, children, headerBg = 'bg-slate-50', headerBorder = 'border-slate-100', editKey, editingSection, setEditingSection, onEdit, editForm, setEditForm }: {
title: string; icon: any; children: React.ReactNode; headerBg?: string; headerBorder?: string; editKey?: string; editingSection?: string | null; setEditingSection?: (s: string | null) => void; onEdit?: () => void; editForm?: any; setEditForm?: any
@@ -116,6 +118,12 @@ export default function InvestorProfilePage() {
setShowDeleteMobileModal(false);
};
const handleLogout = () => {
logout();
window.location.href = '/login';
};
const tabs = [
{ id: 'personal', label: 'Personal Info', icon: User },
{ id: 'nominee', label: 'Nominee & Emergency', icon: Heart },
@@ -131,40 +139,43 @@ export default function InvestorProfilePage() {
<div className="max-w-8xl mx-auto mb-12 lg:mb-0">
{/* Profile Header */}
<div className="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden mb-4 sm:mb-6">
<div className="p-4 sm:p-5 flex flex-col sm:flex-row items-start gap-4 sm:gap-5">
<div className="relative group shrink-0">
<div className="w-16 h-16 sm:w-20 sm:h-20 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center shadow-lg">
<span className="text-xl sm:text-2xl font-bold text-white">{investor.name.charAt(0)}</span>
<div className="p-4 sm:p-5 flex flex-col md:flex-row items-start justify-between gap-4 md:gap-5">
<div className="flex flex-col sm:flex-row items-start gap-4 sm:gap-5 flex-1 w-full">
<div className="relative group shrink-0">
<div className="w-16 h-16 sm:w-20 sm:h-20 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center shadow-lg">
<span className="text-xl sm:text-2xl font-bold text-white">{investor.name.charAt(0)}</span>
</div>
<label className="absolute bottom-0 right-0 w-7 h-7 sm:w-8 sm:h-8 bg-blue-600 rounded-full flex items-center justify-center cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity shadow-lg border-2 border-white">
<Camera className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-white" />
<input type="file" accept="image/*" className="hidden" />
</label>
</div>
<label className="absolute bottom-0 right-0 w-7 h-7 sm:w-8 sm:h-8 bg-blue-600 rounded-full flex items-center justify-center cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity shadow-lg border-2 border-white">
<Camera className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-white" />
<input type="file" accept="image/*" className="hidden" />
</label>
</div>
<div className="flex-1 w-full">
<div className="flex flex-wrap items-center gap-2 mb-2">
<h1 className="text-xl sm:text-2xl font-bold text-slate-800">{investor.name}</h1>
<span className={`px-2 py-0.5 sm:px-2.5 sm:py-1 rounded-full text-xs font-medium ${investor.kycStatus === 'verified' ? 'bg-green-100 text-green-700' : 'bg-amber-100 text-amber-700'}`}>
<ShieldCheck className="w-3 h-3 inline mr-1" /> KYC {investor.kycStatus}
</span>
<span className={`px-2 py-0.5 sm:px-2.5 sm:py-1 rounded-full text-xs font-medium ${investor.status === 'active' ? 'bg-green-100 text-green-700' : 'bg-slate-100 text-slate-500'}`}>
{investor.status}
</span>
<span className={`px-2 py-0.5 sm:px-2.5 sm:py-1 rounded-full text-xs font-medium ${investor.riskLevel === 'low' ? 'bg-green-100 text-green-700' : investor.riskLevel === 'medium' ? 'bg-amber-100 text-amber-700' : 'bg-red-100 text-red-700'}`}>
Risk: {investor.riskLevel}
</span>
</div>
<p className="text-xs sm:text-sm text-slate-500 mb-2">{investor.id} &bull; {investor.email}</p>
<div className="flex flex-wrap items-center gap-x-3 gap-y-1">
<span className="text-xs font-medium px-2 py-0.5 rounded bg-purple-50 text-purple-700">Ref: {investor.referralCode}</span>
<span className="text-xs text-slate-400">{investor.totalReferrals} Referrals</span>
<span className="text-xs text-slate-400">&bull; {investor.investments?.length || 0} Investments</span>
<span className="text-xs text-slate-400">&bull; Referral Earnings: ৳{investor.referralEarnings?.toLocaleString() || 0}</span>
<div className="flex-1 w-full">
<div className="flex flex-wrap items-center gap-2 mb-2">
<h1 className="text-xl sm:text-2xl font-bold text-slate-800">{investor.name}</h1>
<span className={`px-2 py-0.5 sm:px-2.5 sm:py-1 rounded-full text-xs font-medium ${investor.kycStatus === 'verified' ? 'bg-green-100 text-green-700' : 'bg-amber-100 text-amber-700'}`}>
<ShieldCheck className="w-3 h-3 inline mr-1" /> KYC {investor.kycStatus}
</span>
<span className={`px-2 py-0.5 sm:px-2.5 sm:py-1 rounded-full text-xs font-medium ${investor.status === 'active' ? 'bg-green-100 text-green-700' : 'bg-slate-100 text-slate-500'}`}>
{investor.status}
</span>
<span className={`px-2 py-0.5 sm:px-2.5 sm:py-1 rounded-full text-xs font-medium ${investor.riskLevel === 'low' ? 'bg-green-100 text-green-700' : investor.riskLevel === 'medium' ? 'bg-amber-100 text-amber-700' : 'bg-red-100 text-red-700'}`}>
Risk: {investor.riskLevel}
</span>
</div>
<p className="text-xs sm:text-sm text-slate-500 mb-2">{investor.id} &bull; {investor.email}</p>
<div className="flex flex-wrap items-center gap-x-3 gap-y-1">
<span className="text-xs font-medium px-2 py-0.5 rounded bg-purple-50 text-purple-700">Ref: {investor.referralCode}</span>
<span className="text-xs text-slate-400">{investor.totalReferrals} Referrals</span>
<span className="text-xs text-slate-400">&bull; {investor.investments?.length || 0} Investments</span>
<span className="text-xs text-slate-400">&bull; Referral Earnings: ৳{investor.referralEarnings?.toLocaleString() || 0}</span>
</div>
</div>
</div>
</div>
<div className="border-t border-slate-100 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 divide-x divide-slate-100 bg-slate-50/50">
<div className="p-3 sm:p-4 text-center">
<p className="text-xs text-purple-600 font-medium">Invested</p>
@@ -922,10 +933,14 @@ export default function InvestorProfilePage() {
</div>
<p className="text-xs text-slate-400">{session.location} • {session.time}</p>
</div>
{!session.current && <button className="px-3 py-1.5 text-xs font-medium text-red-600 hover:bg-red-50 rounded-lg">Revoke</button>}
{!session.current ? (
<button className="px-3 py-1.5 text-xs font-medium text-red-600 hover:bg-red-50 rounded-lg">Revoke</button>
) : (
<button onClick={handleLogout} className="px-3 py-1.5 text-xs font-medium text-red-600 hover:bg-red-50 rounded-lg">Log Out</button>
)}
</div>
))}
<button className="w-full py-3 bg-red-50 text-red-600 rounded-lg text-sm font-medium hover:bg-red-100 flex items-center justify-center gap-2">
<button onClick={handleLogout} className="w-full py-3 bg-red-50 text-red-600 rounded-lg text-sm font-medium hover:bg-red-100 flex items-center justify-center gap-2">
<LogOut className="w-4 h-4" /> Sign Out All Devices
</button>
</div>