feat: add investor onboarding flow with dynamic business and investment plan fields

src/app/admin/kyc/page.tsx

@@ -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">