feat: implement editable profile sections and update layout in investor details page
This commit is contained in:
sazzadulalambd
1542
src/app/admin/investors/[id]/page copy.tsx
Normal file
1542
src/app/admin/investors/[id]/page copy.tsx
Normal file
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -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>
|
||||
|
||||
@@ -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,
|
||||
maxInvestment: 100000,
|
||||
monthlyReturnPercent: 2,
|
||||
minQuantity: 1,
|
||||
evBasePrice: 200000,
|
||||
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,
|
||||
maxInvestment: 500000,
|
||||
monthlyReturnPercent: 2.5,
|
||||
minQuantity: 5,
|
||||
evBasePrice: 180000,
|
||||
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}
|
||||
/>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user