feat: implement editable profile sections and update layout in investor details page

src/app/admin/settings/components/InvestmentSettings.tsx

@@ -30,10 +30,6 @@ interface InvestmentSettingsProps {
   setNewInvestLock: (n: number) => void;
   newInvestPenalty: number;
   setNewInvestPenalty: (n: number) => void;
-  newInvestMonthly: number;
-  setNewInvestMonthly: (n: number) => void;
-  newInvestTotal: number;
-  setNewInvestTotal: (n: number) => void;
   newInvestFicoSingleRent: number;
   setNewInvestFicoSingleRent: (n: number) => void;
   newInvestFicoRentToOwn: number;
@@ -42,6 +38,10 @@ interface InvestmentSettingsProps {
   setNewInvestFicoShareEv: (n: number) => void;
   newInvestDesc: string;
   setNewInvestDesc: (v: string) => void;
+  newInvestEvBasePrice: number;
+  setNewInvestEvBasePrice: (n: number) => void;
+  newInvestMinQuantity: number;
+  setNewInvestMinQuantity: (n: number) => void;
   createInvestPlan: () => void;
   handleSave: () => void;
 }
@@ -60,14 +60,15 @@ export default function InvestmentSettings({
   newInvestDuration, setNewInvestDuration,
   newInvestLock, setNewInvestLock,
   newInvestPenalty, setNewInvestPenalty,
-  newInvestMonthly, setNewInvestMonthly,
-  newInvestTotal, setNewInvestTotal,
   newInvestFicoSingleRent, setNewInvestFicoSingleRent,
   newInvestFicoRentToOwn, setNewInvestFicoRentToOwn,
   newInvestFicoShareEv, setNewInvestFicoShareEv,
   newInvestDesc, setNewInvestDesc,
+  newInvestEvBasePrice, setNewInvestEvBasePrice,
+  newInvestMinQuantity, setNewInvestMinQuantity,
   createInvestPlan, handleSave,
 }: InvestmentSettingsProps) {
+  const calculatedMinInvestment = newInvestMinQuantity * newInvestEvBasePrice;
   return (
     <div className="p-6 space-y-6">
       <div className="flex items-center justify-between">
@@ -121,9 +122,20 @@ export default function InvestmentSettings({
                 <label className="text-sm text-slate-600">End Date</label>
                 <input type="date" value={newInvestEnd} onChange={(e) => setNewInvestEnd(e.target.value)} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
               </div>
+              <div>
+                <label className="text-sm text-slate-600">EV Base Price (৳)</label>
+                <input type="number" value={newInvestEvBasePrice} onChange={(e) => setNewInvestEvBasePrice(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" placeholder="Single EV cost" />
+              </div>
+              <div>
+                <label className="text-sm text-slate-600">Minimum Quantity (Bikes)</label>
+                <input type="number" value={newInvestMinQuantity} onChange={(e) => setNewInvestMinQuantity(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" placeholder="Min bikes to invest" />
+              </div>
               <div>
                 <label className="text-sm text-slate-600">Min Investment (৳)</label>
-                <input type="number" value={newInvestMin} onChange={(e) => setNewInvestMin(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                <div className="flex items-center gap-2 mt-1">
+                  <input type="number" value={calculatedMinInvestment} disabled className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm bg-slate-100" />
+                  <span className="text-xs text-slate-500 whitespace-nowrap">= Qty × Base Price</span>
+                </div>
               </div>
               <div>
                 <label className="text-sm text-slate-600">Max Investment (৳)</label>
@@ -141,14 +153,6 @@ export default function InvestmentSettings({
                 <label className="text-sm text-slate-600">Early Exit Penalty (%)</label>
                 <input type="number" value={newInvestPenalty} onChange={(e) => setNewInvestPenalty(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
               </div>
-              <div>
-                <label className="text-sm text-slate-600">Monthly Return (%)</label>
-                <input type="number" step="0.1" value={newInvestMonthly} onChange={(e) => setNewInvestMonthly(parseFloat(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-              </div>
-              <div>
-                <label className="text-sm text-slate-600">Total Return (%)</label>
-                <input type="number" step="0.1" value={newInvestTotal} onChange={(e) => setNewInvestTotal(parseFloat(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-              </div>
             </div>
             <div className="grid grid-cols-3 gap-4 mt-4">
               <div>
@@ -183,7 +187,7 @@ export default function InvestmentSettings({
         <div key={idx} className="bg-white rounded-xl border border-slate-200 overflow-hidden">
           <div className="bg-amber-50 px-4 py-3 border-b border-amber-100 flex items-center justify-between">
             <div>
-              <h4 className="font-semibold text-amber-800">{plan.name} - {plan.monthlyReturnPercent}% per month</h4>
+              <h4 className="font-semibold text-amber-800">{plan.name}</h4>
               <p className="text-sm text-amber-600 mt-1">{plan.description}</p>
             </div>
             <span className={`px-2 py-1 rounded-full text-xs font-medium ${plan.status === 'active' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>{plan.status}</span>
@@ -214,9 +218,20 @@ export default function InvestmentSettings({
                 <label className="text-sm text-slate-600">End Date</label>
                 <input type="date" value={plan.endDate} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].endDate = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
               </div>
+              <div>
+                <label className="text-sm text-slate-600">EV Base Price (৳)</label>
+                <input type="number" value={plan.evBasePrice} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].evBasePrice = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+              </div>
+              <div>
+                <label className="text-sm text-slate-600">Minimum Quantity (Bikes)</label>
+                <input type="number" value={plan.minQuantity} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].minQuantity = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+              </div>
               <div>
                 <label className="text-sm text-slate-600">Min Investment (৳)</label>
-                <input type="number" value={plan.minInvestment} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].minInvestment = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                <div className="flex items-center gap-2 mt-1">
+                  <input type="number" value={plan.evBasePrice * plan.minQuantity} disabled className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm bg-slate-100" />
+                  <span className="text-xs text-slate-500 whitespace-nowrap">= Qty × Base Price</span>
+                </div>
               </div>
               <div>
                 <label className="text-sm text-slate-600">Max Investment (৳)</label>
@@ -234,14 +249,6 @@ export default function InvestmentSettings({
                 <label className="text-sm text-slate-600">Early Exit Penalty (%)</label>
                 <input type="number" value={plan.earlyExitPenalty} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].earlyExitPenalty = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
               </div>
-              <div>
-                <label className="text-sm text-slate-600">Monthly Return (%)</label>
-                <input type="number" step="0.1" value={plan.monthlyReturnPercent} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].monthlyReturnPercent = parseFloat(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-              </div>
-              <div>
-                <label className="text-sm text-slate-600">Total Return (%)</label>
-                <input type="number" step="0.1" value={plan.totalReturnPercent} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].totalReturnPercent = parseFloat(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, investment: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
-              </div>
             </div>
             <div className="grid grid-cols-3 gap-4 mt-4">
               <div>

src/app/admin/settings/page.tsx

@@ -184,13 +184,13 @@ export interface CompanySettings {
       id: string;
       tier: string;
       name: string;
+      minQuantity: number;
+      evBasePrice: number;
       minInvestment: number;
       maxInvestment: number;
-      monthlyReturnPercent: number;
       durationMonths: number;
       profitSharePercent: number;
       lockInMonths: number;
-      totalReturnPercent: number;
       earlyExitPenalty: number;
       startDate: string;
       endDate: string;
@@ -695,13 +695,13 @@ const initialSettings: CompanySettings = {
         id: 'inv_demo_1',
         name: '1 Bike Plan',
         tier: 'Economy',
-        minInvestment: 50000,
+        minQuantity: 1,
-        maxInvestment: 100000,
+        evBasePrice: 200000,
-        monthlyReturnPercent: 2,
+        minInvestment: 200000,
+        maxInvestment: 1000000,
         durationMonths: 12,
         profitSharePercent: 50,
         lockInMonths: 3,
-        totalReturnPercent: 24,
         earlyExitPenalty: 10,
         startDate: '2026-01-01',
         endDate: '2026-12-31',
@@ -716,13 +716,13 @@ const initialSettings: CompanySettings = {
         id: 'inv_demo_2',
         name: '5 Bike Plan',
         tier: 'Standard',
-        minInvestment: 150000,
+        minQuantity: 5,
-        maxInvestment: 500000,
+        evBasePrice: 180000,
-        monthlyReturnPercent: 2.5,
+        minInvestment: 900000,
+        maxInvestment: 5000000,
         durationMonths: 24,
         profitSharePercent: 50,
         lockInMonths: 6,
-        totalReturnPercent: 60,
         earlyExitPenalty: 10,
         startDate: '2026-01-01',
         endDate: '2026-12-31',
@@ -846,16 +846,16 @@ export default function CompanySettingsPage() {
   const [newInvestEnd, setNewInvestEnd] = useState('2026-12-31');
   const [newInvestMin, setNewInvestMin] = useState(10000);
   const [newInvestMax, setNewInvestMax] = useState(100000);
-  const [newInvestMonthly, setNewInvestMonthly] = useState(2);
   const [newInvestDuration, setNewInvestDuration] = useState(12);
   const [newInvestLock, setNewInvestLock] = useState(3);
-  const [newInvestTotal, setNewInvestTotal] = useState(24);
   const [newInvestPenalty, setNewInvestPenalty] = useState(10);
   const [newInvestProfitShare, setNewInvestProfitShare] = useState(50);
   const [newInvestFicoSingleRent, setNewInvestFicoSingleRent] = useState(45);
   const [newInvestFicoRentToOwn, setNewInvestFicoRentToOwn] = useState(55);
   const [newInvestFicoShareEv, setNewInvestFicoShareEv] = useState(60);
   const [newInvestDesc, setNewInvestDesc] = useState('');
+  const [newInvestEvBasePrice, setNewInvestEvBasePrice] = useState(200000);
+  const [newInvestMinQuantity, setNewInvestMinQuantity] = useState(1);
 
   const createInvestPlan = () => {
     if (newInvestName.trim() && typeof window !== 'undefined') {
@@ -863,13 +863,13 @@ export default function CompanySettingsPage() {
         id: 'inv_' + Date.now(),
         name: newInvestName,
         tier: newInvestTier,
-        minInvestment: newInvestMin,
+        evBasePrice: newInvestEvBasePrice,
+        minQuantity: newInvestMinQuantity,
+        minInvestment: newInvestEvBasePrice * newInvestMinQuantity,
         maxInvestment: newInvestMax,
-        monthlyReturnPercent: newInvestMonthly,
         durationMonths: newInvestDuration,
         profitSharePercent: newInvestProfitShare,
         lockInMonths: newInvestLock,
-        totalReturnPercent: newInvestTotal,
         earlyExitPenalty: newInvestPenalty,
         startDate: newInvestStart,
         endDate: newInvestEnd,
@@ -1306,12 +1306,12 @@ export default function CompanySettingsPage() {
                 newInvestDuration={newInvestDuration} setNewInvestDuration={setNewInvestDuration}
                 newInvestLock={newInvestLock} setNewInvestLock={setNewInvestLock}
                 newInvestPenalty={newInvestPenalty} setNewInvestPenalty={setNewInvestPenalty}
-                newInvestMonthly={newInvestMonthly} setNewInvestMonthly={setNewInvestMonthly}
-                newInvestTotal={newInvestTotal} setNewInvestTotal={setNewInvestTotal}
                 newInvestFicoSingleRent={newInvestFicoSingleRent} setNewInvestFicoSingleRent={setNewInvestFicoSingleRent}
                 newInvestFicoRentToOwn={newInvestFicoRentToOwn} setNewInvestFicoRentToOwn={setNewInvestFicoRentToOwn}
                 newInvestFicoShareEv={newInvestFicoShareEv} setNewInvestFicoShareEv={setNewInvestFicoShareEv}
                 newInvestDesc={newInvestDesc} setNewInvestDesc={setNewInvestDesc}
+                newInvestEvBasePrice={newInvestEvBasePrice} setNewInvestEvBasePrice={setNewInvestEvBasePrice}
+                newInvestMinQuantity={newInvestMinQuantity} setNewInvestMinQuantity={setNewInvestMinQuantity}
                 createInvestPlan={createInvestPlan} handleSave={handleSave}
               />
             )}