feat: add investor onboarding flow with dynamic business and investment plan fields
This commit is contained in:
sazzadulalambd
@@ -1134,6 +1134,7 @@ function NewApplicationModal({ isOpen, onClose, onSave }: { isOpen: boolean; onC
|
||||
evModel: string;
|
||||
evCondition: string;
|
||||
scheduleDate: string;
|
||||
investmentPlan: { planName: string; planType: string; bikes: number; amount: number; monthlyReturn: number; expectedROI: number };
|
||||
requiredDocuments: Document[];
|
||||
}>({
|
||||
applicationSource: 'walkin',
|
||||
@@ -1164,6 +1165,7 @@ function NewApplicationModal({ isOpen, onClose, onSave }: { isOpen: boolean; onC
|
||||
evModel: '',
|
||||
evCondition: 'new',
|
||||
scheduleDate: '',
|
||||
investmentPlan: { planName: '', planType: '', bikes: 1, amount: 0, monthlyReturn: 0, expectedROI: 0 },
|
||||
requiredDocuments: [],
|
||||
});
|
||||
|
||||
@@ -1664,6 +1666,7 @@ function NewApplicationModal({ isOpen, onClose, onSave }: { isOpen: boolean; onC
|
||||
)}
|
||||
</div>
|
||||
|
||||
{formData.type === 'biker' && (
|
||||
<div className="bg-amber-50/80 p-4 rounded-xl border border-amber-100">
|
||||
<h4 className="font-semibold text-amber-900 mb-3 flex items-center gap-2 text-sm">
|
||||
<Key className="w-4 h-4" /> Driving License
|
||||
@@ -1726,6 +1729,7 @@ function NewApplicationModal({ isOpen, onClose, onSave }: { isOpen: boolean; onC
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -1791,7 +1795,101 @@ function NewApplicationModal({ isOpen, onClose, onSave }: { isOpen: boolean; onC
|
||||
</div>
|
||||
)}
|
||||
|
||||
{step === 3 && formData.type === 'biker' && (
|
||||
{step === 2 && formData.type === 'investor' && (
|
||||
<div className="space-y-5">
|
||||
<div className="bg-purple-50/80 p-4 rounded-xl border border-purple-100">
|
||||
<h4 className="font-semibold text-purple-900 mb-3 flex items-center gap-2 text-sm">
|
||||
<Briefcase className="w-4 h-4" /> Investment Information
|
||||
</h4>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="text-xs font-medium text-slate-600 mb-1 block">Company/Business Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.employmentInfo.company}
|
||||
onChange={(e) => updateField('employmentInfo.company', e.target.value)}
|
||||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
||||
placeholder="Your business name"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-medium text-slate-600 mb-1 block">Monthly Income (Tk)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.employmentInfo.monthlyEarning}
|
||||
onChange={(e) => updateField('employmentInfo.monthlyEarning', Number(e.target.value))}
|
||||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
||||
placeholder="0"
|
||||
/>
|
||||
</div>
|
||||
<div className="sm:col-span-2">
|
||||
<label className="text-xs font-medium text-slate-600 mb-1 block">Investment Source</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.employmentInfo.whyEV}
|
||||
onChange={(e) => updateField('employmentInfo.whyEV', e.target.value)}
|
||||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
||||
placeholder="e.g., Savings, Business profit, Inheritance"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-medium text-slate-600 mb-1 block">Profession/Occupation</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.occupation}
|
||||
onChange={(e) => updateField('occupation', e.target.value)}
|
||||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
||||
placeholder="Your profession"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(step === 2 && (formData.type === 'shop' || formData.type === 'merchant')) && (
|
||||
<div className="space-y-5">
|
||||
<div className="bg-purple-50/80 p-4 rounded-xl border border-purple-100">
|
||||
<h4 className="font-semibold text-purple-900 mb-3 flex items-center gap-2 text-sm">
|
||||
<Briefcase className="w-4 h-4" /> Business Information
|
||||
</h4>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="text-xs font-medium text-slate-600 mb-1 block">Business Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.employmentInfo.company}
|
||||
onChange={(e) => updateField('employmentInfo.company', e.target.value)}
|
||||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
||||
placeholder="Your business name"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-medium text-slate-600 mb-1 block">Monthly Income (Tk)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.employmentInfo.monthlyEarning}
|
||||
onChange={(e) => updateField('employmentInfo.monthlyEarning', Number(e.target.value))}
|
||||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
||||
placeholder="0"
|
||||
/>
|
||||
</div>
|
||||
<div className="sm:col-span-2">
|
||||
<label className="text-xs font-medium text-slate-600 mb-1 block">Nature of Business</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.employmentInfo.whyEV}
|
||||
onChange={(e) => updateField('employmentInfo.whyEV', e.target.value)}
|
||||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
||||
placeholder="e.g., retail, wholesale, e-commerce"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(step === 3 && (formData.type === 'biker' || formData.type === 'investor')) && (
|
||||
<div className="space-y-5">
|
||||
<div className="bg-pink-50/80 p-4 rounded-xl border border-pink-100">
|
||||
<h4 className="font-semibold text-pink-900 mb-3 flex items-center gap-2 text-sm">
|
||||
@@ -2015,6 +2113,92 @@ function NewApplicationModal({ isOpen, onClose, onSave }: { isOpen: boolean; onC
|
||||
</div>
|
||||
)}
|
||||
|
||||
{step === 4 && formData.type === 'investor' && (
|
||||
<div className="space-y-5">
|
||||
<div className="bg-amber-50/80 p-4 rounded-xl border border-amber-100">
|
||||
<h4 className="font-semibold text-amber-900 mb-3 flex items-center gap-2 text-sm">
|
||||
<Wallet className="w-4 h-4" /> Investment Plan
|
||||
</h4>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3 mb-4">
|
||||
{[
|
||||
{ v: '1', l: '1 Bike', d: 'Invest in 1 bike', icon: Bike },
|
||||
{ v: '5', l: '5 Bikes', d: 'Invest in 5 bikes', icon: Bike },
|
||||
{ v: '10', l: '10 Bikes', d: 'Invest in 10 bikes', icon: Bike },
|
||||
].map(plan => (
|
||||
<button
|
||||
key={plan.v}
|
||||
onClick={() => updateField('investmentPlan.bikes', Number(plan.v))}
|
||||
className={`p-4 rounded-lg border text-left transition-all ${formData.investmentPlan.bikes === Number(plan.v)
|
||||
? 'border-accent bg-accent/10 ring-1 ring-accent'
|
||||
: 'border-slate-200 bg-white hover:border-accent'
|
||||
}`}
|
||||
>
|
||||
<plan.icon className={`w-5 h-5 mb-2 ${formData.investmentPlan.bikes === Number(plan.v) ? 'text-accent' : 'text-slate-400'}`} />
|
||||
<p className="text-sm font-semibold text-slate-800">{plan.l}</p>
|
||||
<p className="text-xs text-slate-500">{plan.d}</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="text-xs font-medium text-slate-600 mb-1 block">Plan Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.investmentPlan.planName}
|
||||
onChange={(e) => updateField('investmentPlan.planName', e.target.value)}
|
||||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
||||
placeholder="Plan name"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-medium text-slate-600 mb-1 block">Plan Type</label>
|
||||
<select
|
||||
value={formData.investmentPlan.planType}
|
||||
onChange={(e) => updateField('investmentPlan.planType', e.target.value)}
|
||||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm bg-white"
|
||||
>
|
||||
<option value="">Select Type</option>
|
||||
<option value="Bronze">Bronze</option>
|
||||
<option value="Silver">Silver</option>
|
||||
<option value="Gold">Gold</option>
|
||||
<option value="Platinum">Platinum</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-medium text-slate-600 mb-1 block">Investment Amount (Tk)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.investmentPlan.amount}
|
||||
onChange={(e) => updateField('investmentPlan.amount', Number(e.target.value))}
|
||||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
||||
placeholder="0"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-medium text-slate-600 mb-1 block">Expected Monthly Return (%)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.investmentPlan.monthlyReturn}
|
||||
onChange={(e) => updateField('investmentPlan.monthlyReturn', Number(e.target.value))}
|
||||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
||||
placeholder="0"
|
||||
/>
|
||||
</div>
|
||||
<div className="sm:col-span-2">
|
||||
<label className="text-xs font-medium text-slate-600 mb-1 block">Expected ROI (%)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={formData.investmentPlan.expectedROI}
|
||||
onChange={(e) => updateField('investmentPlan.expectedROI', Number(e.target.value))}
|
||||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
||||
placeholder="0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{step === 5 && (
|
||||
<div className="space-y-5">
|
||||
<div className="bg-green-50/80 p-4 rounded-xl border border-green-100">
|
||||
|
||||
Reference in New Issue
Block a user