2943 lines
180 KiB
TypeScript
2943 lines
180 KiB
TypeScript
'use client';
|
||
|
||
import { useState } from 'react';
|
||
import { Settings, Upload, Image, Globe, Mail, MessageSquare, Phone, MapPin, Link2, Clock, Save, FileText, Camera, Palette, Ruler, Sun, Moon, Monitor, Smartphone, Tablet, Package, Wrench, FileCheck, BadgeDollarSign, CreditCard, Plus, X, DollarSign, Zap, Users, Check, Pencil, Trash2 } from 'lucide-react';
|
||
import RichTextEditor from '@/components/RichTextEditor';
|
||
|
||
interface CompanySettings {
|
||
name: string;
|
||
shortName: string;
|
||
tagLine: string;
|
||
description: string;
|
||
email: string;
|
||
phone: string;
|
||
website: string;
|
||
address: string;
|
||
city: string;
|
||
country: string;
|
||
tin: string;
|
||
bin: string;
|
||
tradeLicense: string;
|
||
timezone: string;
|
||
currency: string;
|
||
language: string;
|
||
logo: string;
|
||
favicon: string;
|
||
primaryColor: string;
|
||
secondaryColor: string;
|
||
borderRadius: number;
|
||
socialLinks: {
|
||
facebook: string;
|
||
twitter: string;
|
||
instagram: string;
|
||
linkedin: string;
|
||
youtube: string;
|
||
};
|
||
smtp: {
|
||
host: string;
|
||
port: number;
|
||
user: string;
|
||
password: string;
|
||
fromEmail: string;
|
||
fromName: string;
|
||
encryption: 'ssl' | 'tls' | 'none';
|
||
};
|
||
sms: {
|
||
provider: string;
|
||
apiKey: string;
|
||
senderId: string;
|
||
url: string;
|
||
};
|
||
heroData: {
|
||
title: string;
|
||
subtitle: string;
|
||
ctaText: string;
|
||
ctaLink: string;
|
||
videoUrl: string;
|
||
backgroundImage: string;
|
||
};
|
||
masterData: {
|
||
kycDocuments: { name: string; required: boolean }[];
|
||
riderDocuments: { id: string; name: string; required: boolean; description: string }[];
|
||
subscriptionPlans: { name: string; price: number; duration: number; features: string[] }[];
|
||
rentalPlans: { id: string; name: string; type: string; description: string; price: number; duration: number }[];
|
||
investorDocuments: { id: string; name: string; required: boolean; description: string }[];
|
||
merchantDocuments: { id: string; name: string; required: boolean; description: string }[];
|
||
swapStationDocuments: { id: string; name: string; required: boolean; description: string }[];
|
||
rentalDocuments: {
|
||
type: 'single' | 'shared' | 'rent-to-own';
|
||
name: string;
|
||
documents: { id: string; name: string; required: boolean; description: string }[];
|
||
}[];
|
||
};
|
||
parts: { id: string; name: string; buyingPrice: number; sellingPrice: number }[];
|
||
serviceCenters: { id: string; name: string; address: string; phone: string; rating: number }[];
|
||
companyPolicy: {
|
||
investor: { title: string; description: string }[];
|
||
merchant: { title: string; description: string }[];
|
||
swapStation: { title: string; description: string }[];
|
||
rentalTypes: {
|
||
single: { title: string; description: string }[];
|
||
shared: { title: string; description: string }[];
|
||
renttoown: { title: string; description: string }[];
|
||
};
|
||
};
|
||
rentalPolicy: {
|
||
minAge: number;
|
||
requireLicense: boolean;
|
||
deposit: number;
|
||
lateFeePerHour: number;
|
||
cancellationFee: number;
|
||
damagePenalty: { level: string; amount: number }[];
|
||
rules: string[];
|
||
};
|
||
plans: {
|
||
singleRent: {
|
||
tier: 'Economy' | 'Standard' | 'Premium';
|
||
name: string;
|
||
dailyRent: number;
|
||
deposit: number;
|
||
weeklySubscription: number;
|
||
monthlySubscription: number;
|
||
ficoSharePercent: number;
|
||
description: string;
|
||
}[];
|
||
rentToOwn: {
|
||
tier: 'Economy' | 'Standard' | 'Premium';
|
||
name: string;
|
||
dailyRent: number;
|
||
deposit: number;
|
||
weeklySubscription: number;
|
||
monthlySubscription: number;
|
||
durationMonths: number;
|
||
evPrice: number;
|
||
totalPayment: number;
|
||
profit: number;
|
||
ficoRentSharePercent: number;
|
||
ficoProfitSharePercent: number;
|
||
description: string;
|
||
}[];
|
||
shareEv: {
|
||
tier: 'Economy' | 'Standard' | 'Premium';
|
||
name: string;
|
||
dailyRentEach: number;
|
||
totalDailyRent: number;
|
||
depositEach: number;
|
||
totalDeposit: number;
|
||
weeklySubscriptionEach: number;
|
||
totalWeeklySubscription: number;
|
||
monthlySubscriptionEach: number;
|
||
totalMonthlySubscription: number;
|
||
ficoSharePercent: number;
|
||
description: string;
|
||
}[];
|
||
investment: {
|
||
id: string;
|
||
tier: string;
|
||
name: string;
|
||
minInvestment: number;
|
||
maxInvestment: number;
|
||
monthlyReturnPercent: number;
|
||
durationMonths: number;
|
||
profitSharePercent: number;
|
||
lockInMonths: number;
|
||
totalReturnPercent: number;
|
||
earlyExitPenalty: number;
|
||
startDate: string;
|
||
endDate: string;
|
||
targetAmount: number;
|
||
status: string;
|
||
description: string;
|
||
}[];
|
||
swapStation: {
|
||
id: string;
|
||
name: string;
|
||
batteryCount: number;
|
||
swapPrice: number;
|
||
monthlySubscription: number;
|
||
dailySubscription: number;
|
||
minBatteries: number;
|
||
maxBatteries: number;
|
||
profitSharePercent: number;
|
||
status: string;
|
||
description: string;
|
||
}[];
|
||
riderRequest: {
|
||
id: string;
|
||
tier: string;
|
||
name: string;
|
||
minRiders: number;
|
||
maxRiders: number;
|
||
monthlySubscription: number;
|
||
dailySubscription: number;
|
||
deposit: number;
|
||
commissionPercent: number;
|
||
dailyRideTarget: number;
|
||
weeklyHoliday: number;
|
||
status: string;
|
||
description: string;
|
||
}[];
|
||
};
|
||
}
|
||
|
||
const initialSettings: CompanySettings = {
|
||
name: 'JAIBEN Mobility Ltd',
|
||
shortName: 'JAIBEN',
|
||
tagLine: 'Your Trusted EV Mobility Partner',
|
||
description: 'Leading electric vehicle rental and swap station network in Bangladesh',
|
||
email: 'info@jaiben.com',
|
||
phone: '+880 9611-222-333',
|
||
website: 'https://jaiben.com',
|
||
address: 'House 45, Road 13, Gulshan 1',
|
||
city: 'Dhaka',
|
||
country: 'Bangladesh',
|
||
tin: '123456789012',
|
||
bin: '987654321098',
|
||
tradeLicense: 'TRAD/2023/001234',
|
||
timezone: 'Asia/Dhaka',
|
||
currency: 'BDT',
|
||
language: 'en',
|
||
logo: '/logo.png',
|
||
favicon: '/favicon.ico',
|
||
primaryColor: '#10B981',
|
||
secondaryColor: '#3B82F6',
|
||
borderRadius: 8,
|
||
socialLinks: {
|
||
facebook: 'https://facebook.com/jaiben',
|
||
twitter: 'https://twitter.com/jaiben',
|
||
instagram: 'https://instagram.com/jaiben',
|
||
linkedin: 'https://linkedin.com/company/jaiben',
|
||
youtube: 'https://youtube.com/@jaiben'
|
||
},
|
||
smtp: {
|
||
host: 'smtp.mailserver.com',
|
||
port: 587,
|
||
user: 'noreply@jaiben.com',
|
||
password: '••••••••••••',
|
||
fromEmail: 'noreply@jaiben.com',
|
||
fromName: 'JAIBEN Mobility',
|
||
encryption: 'tls'
|
||
},
|
||
sms: {
|
||
provider: 'BulkSMS',
|
||
apiKey: '••••••••••••••••',
|
||
senderId: 'JAIBEN',
|
||
url: 'https://api.bulksmsbd.com'
|
||
},
|
||
heroData: {
|
||
title: 'Welcome to JAIBEN',
|
||
subtitle: 'Your trusted partner for electric vehicle mobility solutions across Bangladesh',
|
||
ctaText: 'Get Started',
|
||
ctaLink: '/rent',
|
||
videoUrl: '',
|
||
backgroundImage: '/hero-bg.jpg'
|
||
},
|
||
masterData: {
|
||
kycDocuments: [
|
||
{ name: 'NID Card', required: true },
|
||
{ name: 'Driving License', required: true },
|
||
{ name: 'Passport Photo', required: true },
|
||
{ name: 'Address Proof', required: false },
|
||
{ name: 'Business Trade License', required: false },
|
||
],
|
||
riderDocuments: [
|
||
{ id: 'rider_nid_front', name: 'NID (Front)', required: true, description: 'National ID card front side' },
|
||
{ id: 'rider_nid_back', name: 'NID (Back)', required: true, description: 'National ID card back side' },
|
||
{ id: 'rider_license', name: 'Driving License', required: true, description: 'Valid driving license' },
|
||
{ id: 'rider_photo', name: 'Profile Photo', required: true, description: 'Recent passport size photo' },
|
||
{ id: 'rider_bank_card', name: 'Bank Account Card', required: false, description: 'Bank account card/cheque' },
|
||
{ id: 'rider_wallet', name: 'Mobile Wallet Info', required: false, description: 'bKash/Rocket account details' },
|
||
],
|
||
subscriptionPlans: [
|
||
{ name: 'Daily', price: 500, duration: 1, features: ['24 hours access', 'Basic support'] },
|
||
{ name: 'Weekly', price: 3000, duration: 7, features: ['7 days access', 'Priority support', 'Free swap'] },
|
||
{ name: 'Monthly', price: 10000, duration: 30, features: ['30 days access', 'VIP support', 'Unlimited swap', 'Damage coverage'] },
|
||
{ name: 'Yearly', price: 80000, duration: 365, features: ['1 year access', 'Dedicated manager', 'Unlimited swap', 'Full coverage', 'Discounted rates'] },
|
||
],
|
||
rentalPlans: [
|
||
{ id: 'single_rent', name: 'Single Rent', type: 'single', description: 'Single person rental plan', price: 500, duration: 1 },
|
||
{ id: 'weekly_rent', name: 'Weekly Rent', type: 'weekly', description: '7 days rental plan', price: 3000, duration: 7 },
|
||
{ id: 'monthly_rent', name: 'Monthly Rent', type: 'monthly', description: '30 days rental plan', price: 10000, duration: 30 },
|
||
{ id: 'rent_to_own', name: 'Rent to Own', type: 'rent-to-own', description: 'Own after X months', price: 15000, duration: 365 },
|
||
{ id: 'share_ev', name: 'Share EV', type: 'shared', description: 'Shared bike', price: 2500, duration: 30 },
|
||
],
|
||
investorDocuments: [
|
||
{ id: 'inv_nid', name: 'NID Card (Front & Back)', required: true, description: 'National ID card copy' },
|
||
{ id: 'inv_photo', name: 'Passport Size Photo', required: true, description: 'Recent passport size photograph' },
|
||
{ id: 'inv_bank', name: 'Bank Account Info', required: true, description: 'Bank account details for earnings' },
|
||
{ id: 'inv_mobile', name: 'Mobile Banking', required: true, description: 'bKash/Rocket account details' },
|
||
{ id: 'inv_tin', name: 'TIN Certificate', required: false, description: 'Tax Identification Number' },
|
||
{ id: 'inv_tax', name: 'Tax Return', required: false, description: 'Recent tax return copy' },
|
||
{ id: 'inv_ec', name: 'Emergency Contact ID', required: false, description: 'Emergency contact NID copy' },
|
||
],
|
||
merchantDocuments: [
|
||
{ id: 'mer_trade', name: 'Trade License', required: true, description: 'Business trade license' },
|
||
{ id: 'mer_nid', name: 'Owner NID Card', required: true, description: 'Owner/proprietor NID card' },
|
||
{ id: 'mer_photo', name: 'Shop Photo', required: true, description: 'Photo of shop premises' },
|
||
{ id: 'mer_tin', name: 'TIN Certificate', required: true, description: 'Tax Identification Number' },
|
||
{ id: 'mer_bank', name: 'Bank Account Info', required: true, description: 'Business bank account' },
|
||
{ id: 'mer_agreement', name: 'Shop Agreement', required: false, description: 'Rent agreement or ownership' },
|
||
{ id: 'mer_fire', name: 'Fire License', required: false, description: 'Fire safety license' },
|
||
],
|
||
swapStationDocuments: [
|
||
{ id: 'ss_trade', name: 'Trade License', required: true, description: 'Business trade license' },
|
||
{ id: 'ss_owner_nid', name: 'Owner NID Card', required: true, description: 'Proprietor NID card' },
|
||
{ id: 'ss_photo', name: 'Station Photo', required: true, description: 'Photo of swap station' },
|
||
{ id: 'ss_tin', name: 'TIN Certificate', required: true, description: 'Tax Identification Number' },
|
||
{ id: 'ss_electric', name: 'Electricity Bill', required: true, description: 'Recent electricity bill' },
|
||
{ id: 'ss_agreement', name: 'Space Agreement', required: false, description: 'Rent/space agreement' },
|
||
{ id: 'ss_safety', name: 'Safety Certificate', required: false, description: 'Electrical safety certificate' },
|
||
],
|
||
rentalDocuments: [
|
||
{
|
||
type: 'single',
|
||
name: 'Rental (Single)',
|
||
documents: [
|
||
{ id: 'rent_nid', name: 'NID Card', required: true, description: 'Valid National ID' },
|
||
{ id: 'rent_license', name: 'Driving License', required: true, description: 'Valid driving license' },
|
||
{ id: 'rent_photo', name: 'Passport Photo', required: true, description: 'Recent photo' },
|
||
{ id: 'rent_deposit', name: 'Deposit Receipt', required: true, description: 'Security deposit proof' },
|
||
{ id: 'rent_ec', name: 'Emergency Contact', required: true, description: 'Emergency contact info' },
|
||
]
|
||
},
|
||
{
|
||
type: 'shared',
|
||
name: 'Rental (2 Person Shared)',
|
||
documents: [
|
||
{ id: 'rent_nid_1', name: 'Rider 1 - NID Card', required: true, description: 'Primary rider NID' },
|
||
{ id: 'rent_license_1', name: 'Rider 1 - Driving License', required: true, description: 'Primary rider license' },
|
||
{ id: 'rent_nid_2', name: 'Rider 2 - NID Card', required: true, description: 'Secondary rider NID' },
|
||
{ id: 'rent_license_2', name: 'Rider 2 - Driving License', required: true, description: 'Secondary rider license' },
|
||
{ id: 'rent_photo', name: 'Passport Photos (Both)', required: true, description: 'Photos of both riders' },
|
||
{ id: 'rent_deposit', name: 'Deposit Receipt', required: true, description: 'Security deposit proof' },
|
||
{ id: 'rent_agreement', name: 'Shared Agreement', required: true, description: 'Agreement between riders' },
|
||
{ id: 'rent_ec', name: 'Emergency Contacts', required: true, description: 'Emergency contacts for both' },
|
||
]
|
||
},
|
||
{
|
||
type: 'rent-to-own',
|
||
name: 'Rent-to-Own',
|
||
documents: [
|
||
{ id: 'rto_nid', name: 'NID Card', required: true, description: 'Valid National ID' },
|
||
{ id: 'rto_license', name: 'Driving License', required: true, description: 'Valid driving license' },
|
||
{ id: 'rto_photo', name: 'Passport Photo', required: true, description: 'Recent photo' },
|
||
{ id: 'rto_income', name: 'Income Proof', required: true, description: 'Salary/income certificate' },
|
||
{ id: 'rto_bank', name: 'Bank Statement', required: true, description: '6 months bank statement' },
|
||
{ id: 'rto_tin', name: 'TIN Certificate', required: false, description: 'Tax Identification Number' },
|
||
{ id: 'rto_guarantor', name: 'Guarantor Info', required: true, description: 'Guarantor details' },
|
||
{ id: 'rto_guarantor_nid', name: 'Guarantor NID', required: true, description: 'Guarantor NID copy' },
|
||
{ id: 'rto_agreement', name: 'RTO Agreement', required: true, description: 'Rent-to-own contract' },
|
||
{ id: 'rto_insurance', name: 'Insurance', required: false, description: 'Vehicle insurance' },
|
||
]
|
||
},
|
||
]
|
||
},
|
||
parts: [
|
||
{ id: 'PRT-001', name: 'Battery 60V', buyingPrice: 12000, sellingPrice: 15000 },
|
||
{ id: 'PRT-002', name: 'Battery 48V', buyingPrice: 9000, sellingPrice: 12000 },
|
||
{ id: 'PRT-003', name: 'Front Tire', buyingPrice: 1800, sellingPrice: 2500 },
|
||
{ id: 'PRT-004', name: 'Rear Tire', buyingPrice: 1800, sellingPrice: 2500 },
|
||
{ id: 'PRT-005', name: 'Brake Pad', buyingPrice: 500, sellingPrice: 800 },
|
||
{ id: 'PRT-006', name: 'Mirror', buyingPrice: 200, sellingPrice: 350 },
|
||
{ id: 'PRT-007', name: 'Controller', buyingPrice: 3000, sellingPrice: 4500 },
|
||
{ id: 'PRT-008', name: 'Motor', buyingPrice: 7000, sellingPrice: 10000 },
|
||
{ id: 'PRT-009', name: 'Charger', buyingPrice: 1200, sellingPrice: 2000 },
|
||
{ id: 'PRT-010', name: 'Display Meter', buyingPrice: 800, sellingPrice: 1200 },
|
||
{ id: 'PRT-011', name: 'Throttle', buyingPrice: 500, sellingPrice: 800 },
|
||
{ id: 'PRT-012', name: 'Brake Cable', buyingPrice: 150, sellingPrice: 250 },
|
||
{ id: 'PRT-013', name: 'Chain', buyingPrice: 400, sellingPrice: 600 },
|
||
{ id: 'PRT-014', name: 'Sprocket', buyingPrice: 300, sellingPrice: 450 },
|
||
{ id: 'PRT-015', name: 'Foot Peg', buyingPrice: 180, sellingPrice: 300 },
|
||
],
|
||
serviceCenters: [
|
||
{ id: 'SC-001', name: 'JAIBEN Service Center - Gulshan', address: 'House 45, Road 13, Gulshan 1, Dhaka', phone: '+8801712345670', rating: 4.8 },
|
||
{ id: 'SC-002', name: 'JAIBEN Service Center - Banani', address: 'Road 11, Banani, Dhaka', phone: '+8801712345671', rating: 4.5 },
|
||
],
|
||
companyPolicy: {
|
||
investor: [
|
||
{ title: 'Investor Policy', description: '<h2>Investor Guidelines</h2><p>Welcome to our investor program. This document outlines the terms and conditions for all investors participating in our EV fleet sharing initiative.</p><h3>Key Requirements</h3><ul><li>All investors must complete KYC verification</li><li>Minimum investment amount: ৳100,000</li><li>Monthly returns are calculated based on fleet utilization</li></ul><p><strong>Note:</strong> Past performance does not guarantee future results. Please read all terms carefully before investing.</p>' },
|
||
{ title: 'Investor Risk Policy', description: '<h2>Risk Disclosure</h2><p>All investments carry risk. Past performance does not guarantee future results.</p><h3>Risk Factors</h3><ul><li>Market fluctuations</li><li>Operational risks</li><li>Regulatory changes</li></ul>' },
|
||
{ title: 'Investor Returns Policy', description: '<h2>Returns</h2><p>Returns depend on fleet performance and utilization.</p><h3>Return Calculation</h3><ul><li>Monthly returns: 2-5%</li><li>Quarterly settlements</li><li>Annual statements</li></ul>' }
|
||
],
|
||
merchant: [
|
||
{ title: 'Merchant Policy', description: '<h2>Merchant Terms</h2><p>Thank you for joining our merchant network. These guidelines ensure smooth operations.</p><h3>Operational Requirements</h3><ul><li>Maintain minimum inventory levels</li><li>Provide excellent customer service</li><li>Accept all payment methods</li></ul>' },
|
||
{ title: 'Merchant SLA Policy', description: '<h2>Service Level Agreement</h2><p>Orders must be processed within 24 hours.</p><h3>Response Time</h3><ul><li>Order confirmation: Within 2 hours</li><li>Delivery: Within 24 hours</li><li>Support: Within 4 hours</li></ul>' },
|
||
{ title: 'Merchant Commission Policy', description: '<h2>Commission</h2><p>Merchants earn 15% commission per order.</p><h3>Commission Structure</h3><ul><li>Standard orders: 15%</li><li>Bulk orders: 18%</li><li>Premium merchants: 20%</li></ul>' }
|
||
],
|
||
swapStation: [
|
||
{ title: 'Swap Station Policy', description: '<h2>Swap Guidelines</h2><p>Follow safety protocols when handling batteries.</p><h3>General Guidelines</h3><ul><li>Wear protective gloves</li><li>Inspect batteries before swapping</li><li>Keep area clean</li></ul>' },
|
||
{ title: 'Battery Safety Policy', description: '<h2>Battery Handling</h2><p>Use gloves and inspect batteries before and after swapping.</p><h3>Safety Measures</h3><ul><li>Check for physical damage</li><li>Verify charge level</li><li>Report malfunctions</li></ul>' },
|
||
{ title: 'Maintenance Policy', description: '<h2>Maintenance</h2><p>Keep stations clean and operational at all times.</p><h3>Daily Tasks</h3><ul><li>Clean charging pads</li><li>Check cable conditions</li><li>Update system software</li></ul>' }
|
||
],
|
||
rentalTypes: {
|
||
single: [
|
||
{ title: 'Rental (Single)', description: '<h2>Single Rental</h2><p>Perfect for individual riders who need a reliable vehicle for daily commute or delivery work.</p><h3>Plan Features</h3><ul><li>Daily, weekly, and monthly options</li><li>Comprehensive insurance included</li><li>24/7 roadside assistance</li></ul>' },
|
||
{ title: 'Single Rental Pricing', description: '<h2>Pricing</h2><p>Starts from ৳400/day with ৳5,000 deposit.</p><h3>Rates</h3><ul><li>Daily: ৳400</li><li>Weekly: ৳2,800</li><li>Monthly: ৳12,000</li></ul>' },
|
||
{ title: 'Single Rental Benefits', description: '<h2>Benefits</h2><p>Includes maintenance, insurance, and support.</p><h3>Included</h3><ul><li>Free maintenance</li><li>Full insurance coverage</li><li>24/7 customer support</li></ul>' }
|
||
],
|
||
shared: [
|
||
{ title: 'Rental (2 Person Shared)', description: '<h2>Shared Plan</h2><p>Two riders share cost and responsibilities.</p><h3>Plan Features</h3><ul><li>Split costs between two riders</li><li>Both users must be verified</li><li>Shared liability coverage</li></ul>' },
|
||
{ title: 'Shared Plan Benefits', description: '<h2>Benefits</h2><p>Split payment and flexible usage.</p><h3>Advantages</h3><ul><li>50% cost savings</li><li>Flexible driver switching</li><li>Shared deposit</li></ul>' },
|
||
{ title: 'Shared Pricing', description: '<h2>Pricing</h2><p>৳600/day total (৳300 each).</p><h3>Rates</h3><ul><li>Daily: ৳600 (৳300 each)</li><li>Weekly: ৳4,200 (৳2,100 each)</li><li>Monthly: ৳16,800 (৳8,400 each)</li></ul>' }
|
||
],
|
||
renttoown: [
|
||
{ title: 'Rent-to-Own', description: '<h2>Ownership Plan</h2><p>Own vehicle after completing payment tenure.</p><h3>Program Benefits</h3><ul><li>50% payments go toward purchase</li><li>Option to buyout anytime</li><li>Full ownership after 36 months</li></ul>' },
|
||
{ title: 'Eligibility', description: '<h2>Eligibility</h2><p>Requires good payment history.</p><h3>Requirements</h3><ul><li>Credit check applies</li><li>Stable income proof</li><li>Minimum 6 months tenure</li></ul>' },
|
||
{ title: 'Ownership Benefits', description: '<h2>Benefits</h2><p>50% of payments go toward vehicle purchase.</p><h3>Advantages</h3><ul><li>Transferable to family</li><li>No hidden costs</li><li>Full warranty included</li></ul>' }
|
||
]
|
||
},
|
||
},
|
||
rentalPolicy: {
|
||
minAge: 18,
|
||
requireLicense: true,
|
||
deposit: 5000,
|
||
lateFeePerHour: 200,
|
||
cancellationFee: 1000,
|
||
damagePenalty: [
|
||
{ level: 'Minor Scratch', amount: 500 },
|
||
{ level: 'Major Damage', amount: 5000 },
|
||
{ level: 'Total Loss', amount: 25000 },
|
||
],
|
||
rules: [
|
||
'No smoking in vehicles',
|
||
'Return with same fuel/charge level',
|
||
'No unauthorized drivers',
|
||
'Follow traffic rules',
|
||
'Report accidents within 24 hours',
|
||
]
|
||
},
|
||
plans: {
|
||
singleRent: [
|
||
{
|
||
tier: 'Premium',
|
||
name: 'Single Rent - Premium',
|
||
dailyRent: 400,
|
||
deposit: 25000,
|
||
weeklySubscription: 2800,
|
||
monthlySubscription: 12000,
|
||
ficoSharePercent: 50,
|
||
description: 'Premium single person rental plan with extra benefits',
|
||
},
|
||
{
|
||
tier: 'Standard',
|
||
name: 'Single Rent - Standard',
|
||
dailyRent: 300,
|
||
deposit: 20000,
|
||
weeklySubscription: 2100,
|
||
monthlySubscription: 9000,
|
||
ficoSharePercent: 45,
|
||
description: 'Standard single person rental plan',
|
||
},
|
||
{
|
||
tier: 'Economy',
|
||
name: 'Single Rent - Economy',
|
||
dailyRent: 250,
|
||
deposit: 15000,
|
||
weeklySubscription: 1750,
|
||
monthlySubscription: 7500,
|
||
ficoSharePercent: 40,
|
||
description: 'Economy single person rental plan',
|
||
}
|
||
],
|
||
rentToOwn: [
|
||
{
|
||
tier: 'Premium',
|
||
name: 'Rent to Own - Premium',
|
||
dailyRent: 350,
|
||
deposit: 25000,
|
||
weeklySubscription: 2450,
|
||
monthlySubscription: 10500,
|
||
durationMonths: 18,
|
||
evPrice: 150000,
|
||
totalPayment: 170000,
|
||
profit: 20000,
|
||
ficoRentSharePercent: 50,
|
||
ficoProfitSharePercent: 45,
|
||
description: 'Premium rent to own plan with high-end EV',
|
||
},
|
||
{
|
||
tier: 'Standard',
|
||
name: 'Rent to Own - Standard',
|
||
dailyRent: 250,
|
||
deposit: 18000,
|
||
weeklySubscription: 1750,
|
||
monthlySubscription: 7000,
|
||
durationMonths: 18,
|
||
evPrice: 120000,
|
||
totalPayment: 135000,
|
||
profit: 15000,
|
||
ficoRentSharePercent: 45,
|
||
ficoProfitSharePercent: 45,
|
||
description: 'Standard rent to own plan',
|
||
},
|
||
{
|
||
tier: 'Economy',
|
||
name: 'Rent to Own - Economy',
|
||
dailyRent: 200,
|
||
deposit: 15000,
|
||
weeklySubscription: 1400,
|
||
monthlySubscription: 6000,
|
||
durationMonths: 18,
|
||
evPrice: 100000,
|
||
totalPayment: 115000,
|
||
profit: 15000,
|
||
ficoRentSharePercent: 40,
|
||
ficoProfitSharePercent: 40,
|
||
description: 'Economy rent to own plan',
|
||
}
|
||
],
|
||
shareEv: [
|
||
{
|
||
tier: 'Premium',
|
||
name: 'Share an EV - Premium',
|
||
dailyRentEach: 300,
|
||
totalDailyRent: 600,
|
||
depositEach: 20000,
|
||
totalDeposit: 40000,
|
||
weeklySubscriptionEach: 2100,
|
||
totalWeeklySubscription: 4200,
|
||
monthlySubscriptionEach: 8400,
|
||
totalMonthlySubscription: 16800,
|
||
ficoSharePercent: 50,
|
||
description: 'Premium shared EV with premium bikes',
|
||
},
|
||
{
|
||
tier: 'Standard',
|
||
name: 'Share an EV - Standard',
|
||
dailyRentEach: 200,
|
||
totalDailyRent: 400,
|
||
depositEach: 15000,
|
||
totalDeposit: 30000,
|
||
weeklySubscriptionEach: 1400,
|
||
totalWeeklySubscription: 2800,
|
||
monthlySubscriptionEach: 5600,
|
||
totalMonthlySubscription: 11200,
|
||
ficoSharePercent: 45,
|
||
description: 'Standard shared EV plan',
|
||
},
|
||
{
|
||
tier: 'Economy',
|
||
name: 'Share an EV - Economy',
|
||
dailyRentEach: 150,
|
||
totalDailyRent: 300,
|
||
depositEach: 12000,
|
||
totalDeposit: 24000,
|
||
weeklySubscriptionEach: 1050,
|
||
totalWeeklySubscription: 2100,
|
||
monthlySubscriptionEach: 4200,
|
||
totalMonthlySubscription: 8400,
|
||
ficoSharePercent: 40,
|
||
description: 'Economy shared EV plan',
|
||
}
|
||
],
|
||
investment: [
|
||
{
|
||
id: 'inv_demo_1',
|
||
name: '1 Bike Plan',
|
||
tier: 'Economy',
|
||
minInvestment: 50000,
|
||
maxInvestment: 100000,
|
||
monthlyReturnPercent: 2,
|
||
durationMonths: 12,
|
||
profitSharePercent: 50,
|
||
lockInMonths: 3,
|
||
totalReturnPercent: 24,
|
||
earlyExitPenalty: 10,
|
||
startDate: '2026-01-01',
|
||
endDate: '2026-12-31',
|
||
targetAmount: 1000000,
|
||
status: 'active',
|
||
description: 'Investment plan for 1 bike - perfect for small investors',
|
||
},
|
||
{
|
||
id: 'inv_demo_2',
|
||
name: '5 Bike Plan',
|
||
tier: 'Standard',
|
||
minInvestment: 150000,
|
||
maxInvestment: 500000,
|
||
monthlyReturnPercent: 2.5,
|
||
durationMonths: 24,
|
||
profitSharePercent: 50,
|
||
lockInMonths: 6,
|
||
totalReturnPercent: 60,
|
||
earlyExitPenalty: 10,
|
||
startDate: '2026-01-01',
|
||
endDate: '2026-12-31',
|
||
targetAmount: 5000000,
|
||
status: 'active',
|
||
description: 'Investment plan for 5 bikes - medium scale investment',
|
||
}
|
||
],
|
||
swapStation: [
|
||
{
|
||
id: 'ss_1',
|
||
name: 'Basic Swap Station',
|
||
batteryCount: 10,
|
||
swapPrice: 50,
|
||
monthlySubscription: 500,
|
||
dailySubscription: 20,
|
||
minBatteries: 1,
|
||
maxBatteries: 5,
|
||
profitSharePercent: 50,
|
||
status: 'active',
|
||
description: 'Basic swap station for small operators',
|
||
},
|
||
{
|
||
id: 'ss_2',
|
||
name: 'Premium Swap Station',
|
||
batteryCount: 50,
|
||
swapPrice: 45,
|
||
monthlySubscription: 2000,
|
||
dailySubscription: 80,
|
||
minBatteries: 10,
|
||
maxBatteries: 30,
|
||
profitSharePercent: 55,
|
||
status: 'active',
|
||
description: 'Premium swap station for large operators',
|
||
}
|
||
],
|
||
riderRequest: [
|
||
{
|
||
id: 'rider_1',
|
||
tier: 'Premium',
|
||
name: 'Premium Rider Plan',
|
||
minRiders: 10,
|
||
maxRiders: 50,
|
||
monthlySubscription: 3000,
|
||
dailySubscription: 150,
|
||
deposit: 5000,
|
||
commissionPercent: 70,
|
||
dailyRideTarget: 15,
|
||
weeklyHoliday: 1,
|
||
status: 'active',
|
||
description: 'Premium rider plan for high volume operators',
|
||
},
|
||
{
|
||
id: 'rider_2',
|
||
tier: 'Standard',
|
||
name: 'Standard Rider Plan',
|
||
minRiders: 5,
|
||
maxRiders: 20,
|
||
monthlySubscription: 1500,
|
||
dailySubscription: 80,
|
||
deposit: 3000,
|
||
commissionPercent: 60,
|
||
dailyRideTarget: 10,
|
||
weeklyHoliday: 1,
|
||
status: 'active',
|
||
description: 'Standard rider plan for medium operators',
|
||
},
|
||
{
|
||
id: 'rider_3',
|
||
tier: 'Economy',
|
||
name: 'Economy Rider Plan',
|
||
minRiders: 1,
|
||
maxRiders: 10,
|
||
monthlySubscription: 500,
|
||
dailySubscription: 30,
|
||
deposit: 1000,
|
||
commissionPercent: 50,
|
||
dailyRideTarget: 5,
|
||
weeklyHoliday: 0,
|
||
status: 'active',
|
||
description: 'Economy rider plan for small operators',
|
||
}
|
||
],
|
||
},
|
||
};
|
||
|
||
export default function CompanySettingsPage() {
|
||
const [settings, setSettings] = useState<CompanySettings>(initialSettings);
|
||
const [activeTab, setActiveTab] = useState<'general' | 'branding' | 'social' | 'integration' | 'landing' | 'kyc' | 'parts' | 'companyPolicy' | 'plans' | 'investment' | 'swapstation' | 'riderrequest'>('general');
|
||
const [activeMasterTab, setActiveMasterTab] = useState<'investor' | 'merchant' | 'swapstation' | 'rentalType'>('investor');
|
||
const [activeRentalTypeTab, setActiveRentalTypeTab] = useState<'single' | 'shared' | 'renttoown'>('single');
|
||
const [saved, setSaved] = useState(false);
|
||
const [activePlanTab, setActivePlanTab] = useState<'singleRent' | 'rentToOwn' | 'shareEv'>('singleRent');
|
||
const [addDocType, setAddDocType] = useState<'investor' | 'merchant' | 'swapstation' | 'rental' | null>(null);
|
||
const [newDocName, setNewDocName] = useState('');
|
||
const [newDocDesc, setNewDocDesc] = useState('');
|
||
const [activeInvestTab, setActiveInvestTab] = useState(0);
|
||
const [editingPolicy, setEditingPolicy] = useState<{ tab: string; index: number } | null>(null);
|
||
const [editPolicyName, setEditPolicyName] = useState('');
|
||
const [editPolicyDesc, setEditPolicyDesc] = useState('');
|
||
const [editPolicyDescHtml, setEditPolicyDescHtml] = useState('');
|
||
const [showAddPolicy, setShowAddPolicy] = useState(false);
|
||
const [newPolicyName, setNewPolicyName] = useState('');
|
||
const [newPolicyDesc, setNewPolicyDesc] = useState('');
|
||
const [addInvestPlan, setAddInvestPlan] = useState(false);
|
||
const [newInvestName, setNewInvestName] = useState('');
|
||
const [newInvestTier, setNewInvestTier] = useState('Standard');
|
||
const [newInvestStatus, setNewInvestStatus] = useState('active');
|
||
const [newInvestTarget, setNewInvestTarget] = useState(1000000);
|
||
const [newInvestStart, setNewInvestStart] = useState('2026-01-01');
|
||
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 [newInvestDesc, setNewInvestDesc] = useState('');
|
||
|
||
const createInvestPlan = () => {
|
||
if (newInvestName.trim() && typeof window !== 'undefined') {
|
||
const ficoShare = settings.plans.singleRent[0]?.ficoSharePercent || 50;
|
||
const newPlan = {
|
||
id: 'inv_' + Date.now(),
|
||
name: newInvestName,
|
||
tier: newInvestTier,
|
||
minInvestment: newInvestMin,
|
||
maxInvestment: newInvestMax,
|
||
monthlyReturnPercent: newInvestMonthly,
|
||
durationMonths: newInvestDuration,
|
||
profitSharePercent: ficoShare,
|
||
lockInMonths: newInvestLock,
|
||
totalReturnPercent: newInvestTotal,
|
||
earlyExitPenalty: newInvestPenalty,
|
||
startDate: newInvestStart,
|
||
endDate: newInvestEnd,
|
||
targetAmount: newInvestTarget,
|
||
status: newInvestStatus,
|
||
description: newInvestDesc
|
||
};
|
||
const updatedPlans = [...settings.plans.investment, newPlan];
|
||
setSettings({ ...settings, plans: { ...settings.plans, investment: updatedPlans } });
|
||
setActiveInvestTab(updatedPlans.length - 1);
|
||
setAddInvestPlan(false);
|
||
setNewInvestName('');
|
||
}
|
||
};
|
||
|
||
const [activeSwapTab, setActiveSwapTab] = useState(0);
|
||
const [addSwapStationPlan, setAddSwapStationPlan] = useState(false);
|
||
const [newSwapName, setNewSwapName] = useState('');
|
||
const [newSwapStatus, setNewSwapStatus] = useState('active');
|
||
const [newSwapBatteryCount, setNewSwapBatteryCount] = useState(10);
|
||
const [newSwapPrice, setNewSwapPrice] = useState(50);
|
||
const [newSwapMonthly, setNewSwapMonthly] = useState(500);
|
||
const [newSwapDaily, setNewSwapDaily] = useState(20);
|
||
const [newSwapMin, setNewSwapMin] = useState(1);
|
||
const [newSwapMax, setNewSwapMax] = useState(5);
|
||
const [newSwapProfit, setNewSwapProfit] = useState(50);
|
||
const [newSwapDesc, setNewSwapDesc] = useState('');
|
||
|
||
const createSwapStationPlan = () => {
|
||
if (newSwapName.trim() && typeof window !== 'undefined') {
|
||
const newPlan = {
|
||
id: 'ss_' + Date.now(),
|
||
name: newSwapName,
|
||
batteryCount: newSwapBatteryCount,
|
||
swapPrice: newSwapPrice,
|
||
monthlySubscription: newSwapMonthly,
|
||
dailySubscription: newSwapDaily,
|
||
minBatteries: newSwapMin,
|
||
maxBatteries: newSwapMax,
|
||
profitSharePercent: newSwapProfit,
|
||
status: newSwapStatus,
|
||
description: newSwapDesc
|
||
};
|
||
const updatedPlans = [...settings.plans.swapStation, newPlan];
|
||
setSettings({ ...settings, plans: { ...settings.plans, swapStation: updatedPlans } });
|
||
setActiveSwapTab(updatedPlans.length - 1);
|
||
setAddSwapStationPlan(false);
|
||
setNewSwapName('');
|
||
}
|
||
};
|
||
const [activeRiderTab, setActiveRiderTab] = useState(0);
|
||
const [addRiderPlan, setAddRiderPlan] = useState(false);
|
||
const [newRiderName, setNewRiderName] = useState('');
|
||
const [newRiderTier, setNewRiderTier] = useState('Standard');
|
||
const [newRiderStatus, setNewRiderStatus] = useState('active');
|
||
const [newRiderMin, setNewRiderMin] = useState(1);
|
||
const [newRiderMax, setNewRiderMax] = useState(10);
|
||
const [newRiderMonthly, setNewRiderMonthly] = useState(500);
|
||
const [newRiderDaily, setNewRiderDaily] = useState(30);
|
||
const [newRiderDeposit, setNewRiderDeposit] = useState(1000);
|
||
const [newRiderCommission, setNewRiderCommission] = useState(50);
|
||
const [newRiderTarget, setNewRiderTarget] = useState(5);
|
||
const [newRiderHoliday, setNewRiderHoliday] = useState(0);
|
||
const [newRiderDesc, setNewRiderDesc] = useState('');
|
||
const createRiderPlan = () => {
|
||
if (newRiderName.trim() && typeof window !== 'undefined') {
|
||
const newPlan = {
|
||
id: 'rider_' + Date.now(),
|
||
name: newRiderName,
|
||
tier: newRiderTier,
|
||
minRiders: newRiderMin,
|
||
maxRiders: newRiderMax,
|
||
monthlySubscription: newRiderMonthly,
|
||
dailySubscription: newRiderDaily,
|
||
deposit: newRiderDeposit,
|
||
commissionPercent: newRiderCommission,
|
||
dailyRideTarget: newRiderTarget,
|
||
weeklyHoliday: newRiderHoliday,
|
||
status: newRiderStatus,
|
||
description: newRiderDesc
|
||
};
|
||
const updatedPlans = [...settings.plans.riderRequest, newPlan];
|
||
setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updatedPlans } });
|
||
setActiveRiderTab(updatedPlans.length - 1);
|
||
setAddRiderPlan(false);
|
||
setNewRiderName('');
|
||
}
|
||
};
|
||
const handleSave = () => {
|
||
setSaved(true);
|
||
setTimeout(() => setSaved(false), 2000);
|
||
};
|
||
|
||
const addPolicyRule = (tab: 'investor' | 'merchant' | 'swapstation') => {
|
||
if (!newPolicyName.trim()) return;
|
||
const newRule = { title: newPolicyName, description: newPolicyDesc || '<p></p>' };
|
||
if (tab === 'investor') {
|
||
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, investor: [...settings.companyPolicy.investor, newRule] } });
|
||
} else if (tab === 'merchant') {
|
||
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, merchant: [...settings.companyPolicy.merchant, newRule] } });
|
||
} else if (tab === 'swapstation') {
|
||
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, swapStation: [...settings.companyPolicy.swapStation, newRule] } });
|
||
}
|
||
setNewPolicyName('');
|
||
setNewPolicyDesc('');
|
||
setShowAddPolicy(false);
|
||
};
|
||
|
||
const deletePolicyRule = (tab: 'investor' | 'merchant' | 'swapstation', index: number) => {
|
||
if (tab === 'investor') {
|
||
const newRules = settings.companyPolicy.investor.filter((_, i) => i !== index);
|
||
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, investor: newRules } });
|
||
} else if (tab === 'merchant') {
|
||
const newRules = settings.companyPolicy.merchant.filter((_, i) => i !== index);
|
||
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, merchant: newRules } });
|
||
} else if (tab === 'swapstation') {
|
||
const newRules = settings.companyPolicy.swapStation.filter((_, i) => i !== index);
|
||
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, swapStation: newRules } });
|
||
}
|
||
};
|
||
|
||
const updatePolicyRule = (tab: 'investor' | 'merchant' | 'swapstation', index: number) => {
|
||
const newDesc = editPolicyDescHtml || editPolicyDesc;
|
||
if (tab === 'investor') {
|
||
const newRules = [...settings.companyPolicy.investor];
|
||
newRules[index] = { title: editPolicyName, description: newDesc };
|
||
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, investor: newRules } });
|
||
} else if (tab === 'merchant') {
|
||
const newRules = [...settings.companyPolicy.merchant];
|
||
newRules[index] = { title: editPolicyName, description: newDesc };
|
||
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, merchant: newRules } });
|
||
} else if (tab === 'swapstation') {
|
||
const newRules = [...settings.companyPolicy.swapStation];
|
||
newRules[index] = { title: editPolicyName, description: newDesc };
|
||
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, swapStation: newRules } });
|
||
}
|
||
setEditingPolicy(null);
|
||
};
|
||
|
||
const tabs = [
|
||
{ id: 'general', label: 'General', icon: Settings },
|
||
{ id: 'branding', label: 'Branding', icon: Palette },
|
||
{ id: 'social', label: 'Social Media', icon: Link2 },
|
||
{ id: 'integration', label: 'Integrations', icon: Mail },
|
||
{ id: 'landing', label: 'Landing Page', icon: Monitor },
|
||
{ id: 'companyPolicy', label: "Company's Policy", icon: FileCheck },
|
||
{ id: 'kyc', label: 'KYC Documents', icon: Package },
|
||
|
||
{ id: 'plans', label: 'Plan Selection', icon: Package },
|
||
{ id: 'investment', label: 'Investment Plan', icon: DollarSign },
|
||
{ id: 'swapstation', label: 'Swap Station Plan (P3)', icon: Zap },
|
||
{ id: 'riderrequest', label: 'Rider Request Plan (P2)', icon: Users },
|
||
{ id: 'parts', label: 'EV Parts', icon: Package },
|
||
|
||
];
|
||
|
||
return (
|
||
<div className="p-4 lg:p-6">
|
||
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-6">
|
||
<div>
|
||
<h1 className="text-2xl lg:text-3xl font-extrabold text-slate-800">Company Settings</h1>
|
||
<p className="text-sm text-slate-500 mt-1">Manage your company information and configurations</p>
|
||
</div>
|
||
{/* <button
|
||
onClick={handleSave}
|
||
className="py-2.5 px-4 bg-accent text-white rounded-lg font-semibold text-sm hover:bg-accent-dark transition-colors flex items-center gap-2"
|
||
>
|
||
<Save className="w-4 h-4" /> Save Changes
|
||
</button> */}
|
||
</div>
|
||
|
||
{saved && (
|
||
<div className="mb-4 p-3 bg-green-100 text-green-700 rounded-lg text-sm">
|
||
Settings saved successfully!
|
||
</div>
|
||
)}
|
||
|
||
<div className="grid lg:grid-cols-4 gap-6">
|
||
<div className="lg:col-span-1 bg-white rounded-xl shadow-sm border border-slate-100 p-2">
|
||
<nav className="space-y-1">
|
||
{tabs.map(tab => (
|
||
<button
|
||
key={tab.id}
|
||
onClick={() => setActiveTab(tab.id as typeof activeTab)}
|
||
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors ${activeTab === tab.id
|
||
? 'bg-accent text-white'
|
||
: 'text-slate-600 hover:bg-slate-50'
|
||
}`}
|
||
>
|
||
<tab.icon className="w-4 h-4" />
|
||
{tab.label}
|
||
</button>
|
||
))}
|
||
</nav>
|
||
</div>
|
||
|
||
<div className="lg:col-span-3 bg-white rounded-xl shadow-sm border border-slate-100">
|
||
{activeTab === 'general' && (
|
||
<div className="p-6 space-y-6">
|
||
<h3 className="text-lg font-semibold text-slate-800">General Information</h3>
|
||
|
||
<div className="grid lg:grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="text-sm text-slate-600">Company Name</label>
|
||
<input
|
||
type="text"
|
||
value={settings.name}
|
||
onChange={(e) => setSettings({ ...settings, name: 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">Short Name</label>
|
||
<input
|
||
type="text"
|
||
value={settings.shortName}
|
||
onChange={(e) => setSettings({ ...settings, shortName: 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">Tagline</label>
|
||
<input
|
||
type="text"
|
||
value={settings.tagLine}
|
||
onChange={(e) => setSettings({ ...settings, tagLine: 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">Website</label>
|
||
<input
|
||
type="text"
|
||
value={settings.website}
|
||
onChange={(e) => setSettings({ ...settings, website: e.target.value })}
|
||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="text-sm text-slate-600">Description</label>
|
||
<textarea
|
||
value={settings.description}
|
||
onChange={(e) => setSettings({ ...settings, description: e.target.value })}
|
||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
|
||
rows={3}
|
||
/>
|
||
</div>
|
||
|
||
<div className="grid lg:grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="text-sm text-slate-600">Email</label>
|
||
<input
|
||
type="email"
|
||
value={settings.email}
|
||
onChange={(e) => setSettings({ ...settings, email: 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">Phone</label>
|
||
<input
|
||
type="text"
|
||
value={settings.phone}
|
||
onChange={(e) => setSettings({ ...settings, phone: e.target.value })}
|
||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="text-sm text-slate-600">Address</label>
|
||
<textarea
|
||
value={settings.address}
|
||
onChange={(e) => setSettings({ ...settings, address: e.target.value })}
|
||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
|
||
rows={2}
|
||
/>
|
||
</div>
|
||
|
||
<div className="grid lg:grid-cols-3 gap-4">
|
||
<div>
|
||
<label className="text-sm text-slate-600">City</label>
|
||
<input
|
||
type="text"
|
||
value={settings.city}
|
||
onChange={(e) => setSettings({ ...settings, city: 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">Country</label>
|
||
<input
|
||
type="text"
|
||
value={settings.country}
|
||
onChange={(e) => setSettings({ ...settings, country: 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">Timezone</label>
|
||
<select
|
||
value={settings.timezone}
|
||
onChange={(e) => setSettings({ ...settings, timezone: e.target.value })}
|
||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
|
||
>
|
||
<option value="Asia/Dhaka">Asia/Dhaka (GMT+6)</option>
|
||
<option value="Asia/Kolkata">Asia/Kolkata (GMT+5:30)</option>
|
||
<option value="UTC">UTC (GMT+0)</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 className="text-lg font-semibold text-slate-800 pt-4 border-t">Business Registration</h3>
|
||
|
||
<div className="grid lg:grid-cols-3 gap-4">
|
||
<div>
|
||
<label className="text-sm text-slate-600">TIN Number</label>
|
||
<input
|
||
type="text"
|
||
value={settings.tin}
|
||
onChange={(e) => setSettings({ ...settings, tin: 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">BIN Number</label>
|
||
<input
|
||
type="text"
|
||
value={settings.bin}
|
||
onChange={(e) => setSettings({ ...settings, bin: 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">Trade License</label>
|
||
<input
|
||
type="text"
|
||
value={settings.tradeLicense}
|
||
onChange={(e) => setSettings({ ...settings, tradeLicense: e.target.value })}
|
||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="text-sm text-slate-600">Documents</label>
|
||
<div className="mt-2 p-4 border-2 border-dashed border-slate-200 rounded-lg text-center hover:border-accent cursor-pointer">
|
||
<Upload className="w-8 h-8 mx-auto text-slate-400" />
|
||
<p className="text-sm text-slate-500 mt-1">Drop files here or click to upload</p>
|
||
<p className="text-xs text-slate-400">PDF, JPG, PNG up to 10MB</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{activeTab === 'branding' && (
|
||
<div className="p-6 space-y-6">
|
||
<h3 className="text-lg font-semibold text-slate-800">Branding & Design</h3>
|
||
|
||
<div className="grid lg:grid-cols-2 gap-6">
|
||
<div>
|
||
<label className="text-sm text-slate-600">Company Logo</label>
|
||
<div className="mt-2 border-2 border-dashed border-slate-200 rounded-lg p-6 text-center hover:border-accent cursor-pointer">
|
||
<Image className="w-12 h-12 mx-auto text-slate-400" />
|
||
<p className="text-sm text-slate-500 mt-2">Upload Logo (PNG, SVG)</p>
|
||
<p className="text-xs text-slate-400">Recommended: 200x50px</p>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label className="text-sm text-slate-600">Favicon</label>
|
||
<div className="mt-2 border-2 border-dashed border-slate-200 rounded-lg p-6 text-center hover:border-accent cursor-pointer">
|
||
<Camera className="w-12 h-12 mx-auto text-slate-400" />
|
||
<p className="text-sm text-slate-500 mt-2">Upload Favicon</p>
|
||
<p className="text-xs text-slate-400">Recommended: 32x32px</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid lg:grid-cols-2 gap-6 pt-4">
|
||
<div>
|
||
<label className="text-sm text-slate-600">Primary Color</label>
|
||
<div className="flex items-center gap-3 mt-2">
|
||
<input
|
||
type="color"
|
||
value={settings.primaryColor}
|
||
onChange={(e) => setSettings({ ...settings, primaryColor: e.target.value })}
|
||
className="w-12 h-12 rounded-lg cursor-pointer border-0"
|
||
/>
|
||
<input
|
||
type="text"
|
||
value={settings.primaryColor}
|
||
onChange={(e) => setSettings({ ...settings, primaryColor: e.target.value })}
|
||
className="flex-1 px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<label className="text-sm text-slate-600">Secondary Color</label>
|
||
<div className="flex items-center gap-3 mt-2">
|
||
<input
|
||
type="color"
|
||
value={settings.secondaryColor}
|
||
onChange={(e) => setSettings({ ...settings, secondaryColor: e.target.value })}
|
||
className="w-12 h-12 rounded-lg cursor-pointer border-0"
|
||
/>
|
||
<input
|
||
type="text"
|
||
value={settings.secondaryColor}
|
||
onChange={(e) => setSettings({ ...settings, secondaryColor: e.target.value })}
|
||
className="flex-1 px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="text-sm text-slate-600">Border Radius</label>
|
||
<div className="flex items-center gap-4 mt-2">
|
||
<Ruler className="w-5 h-5 text-slate-400" />
|
||
<input
|
||
type="range"
|
||
min={0}
|
||
max={20}
|
||
value={settings.borderRadius}
|
||
onChange={(e) => setSettings({ ...settings, borderRadius: parseInt(e.target.value) })}
|
||
className="flex-1"
|
||
/>
|
||
<span className="text-sm text-slate-600">{settings.borderRadius}px</span>
|
||
</div>
|
||
<div className="flex gap-2 mt-4">
|
||
{[4, 8, 12, 16].map(radius => (
|
||
<button
|
||
key={radius}
|
||
onClick={() => setSettings({ ...settings, borderRadius: radius })}
|
||
className={`px-3 py-2 text-sm border ${settings.borderRadius === radius ? 'bg-accent text-white' : 'border-slate-200'}`}
|
||
style={{ borderRadius: radius }}
|
||
>
|
||
{radius}px
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="text-sm text-slate-600">Preview</label>
|
||
<div className="mt-2 p-6 bg-slate-100 rounded-lg flex items-center justify-center gap-4">
|
||
<div
|
||
className="px-4 py-2 text-white font-bold"
|
||
style={{ backgroundColor: settings.primaryColor, borderRadius: settings.borderRadius }}
|
||
>
|
||
Primary
|
||
</div>
|
||
<div
|
||
className="px-4 py-2 text-white font-bold"
|
||
style={{ backgroundColor: settings.secondaryColor, borderRadius: settings.borderRadius }}
|
||
>
|
||
Secondary
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{activeTab === 'social' && (
|
||
<div className="p-6 space-y-6">
|
||
<h3 className="text-lg font-semibold text-slate-800">Social Media Links</h3>
|
||
|
||
<div className="space-y-4">
|
||
<div className="flex items-center gap-3">
|
||
<span className="w-5 text-blue-600 font-bold text-sm">FB</span>
|
||
<label className="w-24 text-sm text-slate-600">Facebook</label>
|
||
<input
|
||
type="text"
|
||
value={settings.socialLinks.facebook}
|
||
onChange={(e) => setSettings({ ...settings, socialLinks: { ...settings.socialLinks, facebook: e.target.value } })}
|
||
className="flex-1 px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
||
placeholder="https://facebook.com/yourpage"
|
||
/>
|
||
</div>
|
||
<div className="flex items-center gap-3">
|
||
<span className="w-5 text-sky-500 font-bold text-sm">X</span>
|
||
<label className="w-24 text-sm text-slate-600">Twitter</label>
|
||
<input
|
||
type="text"
|
||
value={settings.socialLinks.twitter}
|
||
onChange={(e) => setSettings({ ...settings, socialLinks: { ...settings.socialLinks, twitter: e.target.value } })}
|
||
className="flex-1 px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
||
placeholder="https://twitter.com/yourpage"
|
||
/>
|
||
</div>
|
||
<div className="flex items-center gap-3">
|
||
<span className="w-5 text-pink-600 font-bold text-sm">IG</span>
|
||
<label className="w-24 text-sm text-slate-600">Instagram</label>
|
||
<input
|
||
type="text"
|
||
value={settings.socialLinks.instagram}
|
||
onChange={(e) => setSettings({ ...settings, socialLinks: { ...settings.socialLinks, instagram: e.target.value } })}
|
||
className="flex-1 px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
||
placeholder="https://instagram.com/yourpage"
|
||
/>
|
||
</div>
|
||
<div className="flex items-center gap-3">
|
||
<span className="w-5 text-blue-700 font-bold text-sm">IN</span>
|
||
<label className="w-24 text-sm text-slate-600">LinkedIn</label>
|
||
<input
|
||
type="text"
|
||
value={settings.socialLinks.linkedin}
|
||
onChange={(e) => setSettings({ ...settings, socialLinks: { ...settings.socialLinks, linkedin: e.target.value } })}
|
||
className="flex-1 px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
||
placeholder="https://linkedin.com/company/yourpage"
|
||
/>
|
||
</div>
|
||
<div className="flex items-center gap-3">
|
||
<span className="w-5 text-red-600 font-bold text-sm">YT</span>
|
||
<label className="w-24 text-sm text-slate-600">YouTube</label>
|
||
<input
|
||
type="text"
|
||
value={settings.socialLinks.youtube}
|
||
onChange={(e) => setSettings({ ...settings, socialLinks: { ...settings.socialLinks, youtube: e.target.value } })}
|
||
className="flex-1 px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
||
placeholder="https://youtube.com/@yourchannel"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{activeTab === 'integration' && (
|
||
<div className="p-6 space-y-6">
|
||
<h3 className="text-lg font-semibold text-slate-800">Email Integration (SMTP)</h3>
|
||
|
||
<div className="grid lg:grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="text-sm text-slate-600">SMTP Host</label>
|
||
<input
|
||
type="text"
|
||
value={settings.smtp.host}
|
||
onChange={(e) => setSettings({ ...settings, smtp: { ...settings.smtp, host: 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">SMTP Port</label>
|
||
<input
|
||
type="number"
|
||
value={settings.smtp.port}
|
||
onChange={(e) => setSettings({ ...settings, smtp: { ...settings.smtp, port: 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">Username</label>
|
||
<input
|
||
type="text"
|
||
value={settings.smtp.user}
|
||
onChange={(e) => setSettings({ ...settings, smtp: { ...settings.smtp, user: 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">Password</label>
|
||
<input
|
||
type="password"
|
||
value={settings.smtp.password}
|
||
onChange={(e) => setSettings({ ...settings, smtp: { ...settings.smtp, password: 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">From Email</label>
|
||
<input
|
||
type="email"
|
||
value={settings.smtp.fromEmail}
|
||
onChange={(e) => setSettings({ ...settings, smtp: { ...settings.smtp, fromEmail: 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">From Name</label>
|
||
<input
|
||
type="text"
|
||
value={settings.smtp.fromName}
|
||
onChange={(e) => setSettings({ ...settings, smtp: { ...settings.smtp, fromName: e.target.value } })}
|
||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="text-sm text-slate-600">Encryption</label>
|
||
<div className="flex gap-3 mt-2">
|
||
{(['ssl', 'tls', 'none'] as const).map(enc => (
|
||
<button
|
||
key={enc}
|
||
onClick={() => setSettings({ ...settings, smtp: { ...settings.smtp, encryption: enc } })}
|
||
className={`px-4 py-2 text-sm rounded-lg border ${settings.smtp.encryption === enc
|
||
? 'bg-accent text-white border-accent'
|
||
: 'border-slate-200 text-slate-600'
|
||
}`}
|
||
>
|
||
{enc.toUpperCase()}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<h3 className="text-lg font-semibold text-slate-800 pt-4 border-t">SMS Integration</h3>
|
||
|
||
<div className="grid lg:grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="text-sm text-slate-600">Provider</label>
|
||
<select
|
||
value={settings.sms.provider}
|
||
onChange={(e) => setSettings({ ...settings, sms: { ...settings.sms, provider: e.target.value } })}
|
||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
|
||
>
|
||
<option value="BulkSMS">BulkSMS BD</option>
|
||
<option value="Twilio">Twilio</option>
|
||
<option value="Msg91">Msg91</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label className="text-sm text-slate-600">Sender ID</label>
|
||
<input
|
||
type="text"
|
||
value={settings.sms.senderId}
|
||
onChange={(e) => setSettings({ ...settings, sms: { ...settings.sms, senderId: e.target.value } })}
|
||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
|
||
/>
|
||
</div>
|
||
<div className="lg:col-span-2">
|
||
<label className="text-sm text-slate-600">API Key</label>
|
||
<input
|
||
type="password"
|
||
value={settings.sms.apiKey}
|
||
onChange={(e) => setSettings({ ...settings, sms: { ...settings.sms, apiKey: e.target.value } })}
|
||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
|
||
/>
|
||
</div>
|
||
<div className="lg:col-span-2">
|
||
<label className="text-sm text-slate-600">API URL</label>
|
||
<input
|
||
type="text"
|
||
value={settings.sms.url}
|
||
onChange={(e) => setSettings({ ...settings, sms: { ...settings.sms, url: e.target.value } })}
|
||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{activeTab === 'landing' && (
|
||
<div className="p-6 space-y-6">
|
||
<h3 className="text-lg font-semibold text-slate-800">Landing Page Hero Section</h3>
|
||
|
||
<div className="grid lg:grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="text-sm text-slate-600">Hero Title</label>
|
||
<input
|
||
type="text"
|
||
value={settings.heroData.title}
|
||
onChange={(e) => setSettings({ ...settings, heroData: { ...settings.heroData, title: 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">Subtitle</label>
|
||
<input
|
||
type="text"
|
||
value={settings.heroData.subtitle}
|
||
onChange={(e) => setSettings({ ...settings, heroData: { ...settings.heroData, subtitle: 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 lg:grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="text-sm text-slate-600">CTA Button Text</label>
|
||
<input
|
||
type="text"
|
||
value={settings.heroData.ctaText}
|
||
onChange={(e) => setSettings({ ...settings, heroData: { ...settings.heroData, ctaText: 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">CTA Link</label>
|
||
<input
|
||
type="text"
|
||
value={settings.heroData.ctaLink}
|
||
onChange={(e) => setSettings({ ...settings, heroData: { ...settings.heroData, ctaLink: e.target.value } })}
|
||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="text-sm text-slate-600">Background Image</label>
|
||
<div className="mt-2 border-2 border-dashed border-slate-200 rounded-lg p-6 text-center hover:border-accent cursor-pointer">
|
||
<Image className="w-12 h-12 mx-auto text-slate-400" />
|
||
<p className="text-sm text-slate-500 mt-2">Upload Background Image</p>
|
||
<p className="text-xs text-slate-400">Recommended: 1920x1080px</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="text-sm text-slate-600">Video URL (Optional)</label>
|
||
<input
|
||
type="text"
|
||
value={settings.heroData.videoUrl}
|
||
onChange={(e) => setSettings({ ...settings, heroData: { ...settings.heroData, videoUrl: e.target.value } })}
|
||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
|
||
placeholder="https://youtube.com/watch?v=..."
|
||
/>
|
||
</div>
|
||
|
||
<div className="pt-4 border-t">
|
||
<label className="text-sm text-slate-600">Preview</label>
|
||
<div className="mt-2 p-8 bg-gradient-to-br from-slate-800 to-slate-900 rounded-lg text-center">
|
||
<h4 className="text-2xl font-bold text-white">{settings.heroData.title}</h4>
|
||
<p className="text-slate-300 mt-2">{settings.heroData.subtitle}</p>
|
||
<button
|
||
className="mt-4 px-6 py-2 bg-accent text-white rounded-lg"
|
||
style={{ borderRadius: settings.borderRadius }}
|
||
>
|
||
{settings.heroData.ctaText}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{activeTab === 'kyc' && (
|
||
<div className="p-6 space-y-6">
|
||
<h3 className="text-lg font-semibold text-slate-800">KYC Documents</h3>
|
||
|
||
<div className="flex flex-wrap gap-2 border-b border-slate-200 pb-2">
|
||
{[
|
||
{ id: 'investor', label: 'Investor' },
|
||
{ id: 'merchant', label: 'Merchant' },
|
||
{ id: 'swapstation', label: 'Swap Station' },
|
||
{ id: 'rental', label: 'Rental Types' },
|
||
].map(tab => (
|
||
<button
|
||
key={tab.id}
|
||
onClick={() => setActiveMasterTab(tab.id as typeof activeMasterTab)}
|
||
className={`px-3 py-1.5 text-sm rounded-lg ${activeMasterTab === tab.id
|
||
? 'bg-accent text-white'
|
||
: 'text-slate-600 hover:bg-slate-50'
|
||
}`}
|
||
>
|
||
{tab.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
{activeMasterTab === 'investor' && (
|
||
<div>
|
||
<h4 className="font-medium text-slate-700 mb-3">Investor Documents</h4>
|
||
<div className="space-y-2">
|
||
{settings.masterData.investorDocuments.map((doc, i) => (
|
||
<div key={doc.id} className="flex items-center gap-3 p-3 border border-slate-200 rounded-lg">
|
||
<input
|
||
type="checkbox"
|
||
checked={doc.required}
|
||
onChange={(e) => {
|
||
const updated = [...settings.masterData.investorDocuments];
|
||
updated[i].required = e.target.checked;
|
||
setSettings({ ...settings, masterData: { ...settings.masterData, investorDocuments: updated } });
|
||
}}
|
||
className="w-4 h-4"
|
||
/>
|
||
<div className="flex-1">
|
||
<p className="text-sm font-medium">{doc.name}</p>
|
||
<p className="text-xs text-slate-500">{doc.description}</p>
|
||
</div>
|
||
<span className={`text-xs px-2 py-0.5 rounded ${doc.required ? 'bg-red-100 text-red-700' : 'bg-slate-100 text-slate-500'}`}>
|
||
{doc.required ? 'Required' : 'Optional'}
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<button
|
||
onClick={() => setAddDocType('investor')}
|
||
className="mt-4 text-sm text-accent hover:underline"
|
||
>
|
||
+ Add Document
|
||
</button>
|
||
{addDocType === 'investor' && (
|
||
<div className="mt-3 p-3 bg-slate-50 rounded-lg border border-slate-200">
|
||
<input
|
||
type="text"
|
||
placeholder="Document name"
|
||
value={newDocName}
|
||
onChange={(e) => setNewDocName(e.target.value)}
|
||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mb-2"
|
||
/>
|
||
<input
|
||
type="text"
|
||
placeholder="Description"
|
||
value={newDocDesc}
|
||
onChange={(e) => setNewDocDesc(e.target.value)}
|
||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mb-2"
|
||
/>
|
||
<div className="flex gap-2">
|
||
<button
|
||
onClick={() => {
|
||
if (newDocName.trim()) {
|
||
const updated = [...settings.masterData.investorDocuments, {
|
||
id: `inv_${Date.now()}`,
|
||
name: newDocName,
|
||
required: false,
|
||
description: newDocDesc || ''
|
||
}];
|
||
setSettings({ ...settings, masterData: { ...settings.masterData, investorDocuments: updated } });
|
||
setNewDocName('');
|
||
setNewDocDesc('');
|
||
setAddDocType(null);
|
||
}
|
||
}}
|
||
className="px-3 py-1.5 bg-accent text-white text-sm rounded-lg"
|
||
>
|
||
Add
|
||
</button>
|
||
<button
|
||
onClick={() => {
|
||
setAddDocType(null);
|
||
setNewDocName('');
|
||
setNewDocDesc('');
|
||
}}
|
||
className="px-3 py-1.5 border border-slate-200 text-slate-600 text-sm rounded-lg"
|
||
>
|
||
Cancel
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{activeMasterTab === 'merchant' && (
|
||
<div>
|
||
<h4 className="font-medium text-slate-700 mb-3">Merchant Documents</h4>
|
||
<div className="space-y-2">
|
||
{settings.masterData.merchantDocuments.map((doc, i) => (
|
||
<div key={doc.id} className="flex items-center gap-3 p-3 border border-slate-200 rounded-lg">
|
||
<input
|
||
type="checkbox"
|
||
checked={doc.required}
|
||
onChange={(e) => {
|
||
const updated = [...settings.masterData.merchantDocuments];
|
||
updated[i].required = e.target.checked;
|
||
setSettings({ ...settings, masterData: { ...settings.masterData, merchantDocuments: updated } });
|
||
}}
|
||
className="w-4 h-4"
|
||
/>
|
||
<div className="flex-1">
|
||
<p className="text-sm font-medium">{doc.name}</p>
|
||
<p className="text-xs text-slate-500">{doc.description}</p>
|
||
</div>
|
||
<span className={`text-xs px-2 py-0.5 rounded ${doc.required ? 'bg-red-100 text-red-700' : 'bg-slate-100 text-slate-500'}`}>
|
||
{doc.required ? 'Required' : 'Optional'}
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<button
|
||
onClick={() => setAddDocType('merchant')}
|
||
className="mt-4 text-sm text-accent hover:underline"
|
||
>
|
||
+ Add Document
|
||
</button>
|
||
{addDocType === 'merchant' && (
|
||
<div className="mt-3 p-3 bg-slate-50 rounded-lg border border-slate-200">
|
||
<input
|
||
type="text"
|
||
placeholder="Document name"
|
||
value={newDocName}
|
||
onChange={(e) => setNewDocName(e.target.value)}
|
||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mb-2"
|
||
/>
|
||
<input
|
||
type="text"
|
||
placeholder="Description"
|
||
value={newDocDesc}
|
||
onChange={(e) => setNewDocDesc(e.target.value)}
|
||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mb-2"
|
||
/>
|
||
<div className="flex gap-2">
|
||
<button
|
||
onClick={() => {
|
||
if (newDocName.trim()) {
|
||
const updated = [...settings.masterData.merchantDocuments, {
|
||
id: `mer_${Date.now()}`,
|
||
name: newDocName,
|
||
required: false,
|
||
description: newDocDesc || ''
|
||
}];
|
||
setSettings({ ...settings, masterData: { ...settings.masterData, merchantDocuments: updated } });
|
||
setNewDocName('');
|
||
setNewDocDesc('');
|
||
setAddDocType(null);
|
||
}
|
||
}}
|
||
className="px-3 py-1.5 bg-accent text-white text-sm rounded-lg"
|
||
>
|
||
Add
|
||
</button>
|
||
<button
|
||
onClick={() => {
|
||
setAddDocType(null);
|
||
setNewDocName('');
|
||
setNewDocDesc('');
|
||
}}
|
||
className="px-3 py-1.5 border border-slate-200 text-slate-600 text-sm rounded-lg"
|
||
>
|
||
Cancel
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{activeMasterTab === 'swapstation' && (
|
||
<div>
|
||
<h4 className="font-medium text-slate-700 mb-3">Swap Station Documents</h4>
|
||
<div className="space-y-2">
|
||
{settings.masterData.swapStationDocuments.map((doc, i) => (
|
||
<div key={doc.id} className="flex items-center gap-3 p-3 border border-slate-200 rounded-lg">
|
||
<input
|
||
type="checkbox"
|
||
checked={doc.required}
|
||
onChange={(e) => {
|
||
const updated = [...settings.masterData.swapStationDocuments];
|
||
updated[i].required = e.target.checked;
|
||
setSettings({ ...settings, masterData: { ...settings.masterData, swapStationDocuments: updated } });
|
||
}}
|
||
className="w-4 h-4"
|
||
/>
|
||
<div className="flex-1">
|
||
<p className="text-sm font-medium">{doc.name}</p>
|
||
<p className="text-xs text-slate-500">{doc.description}</p>
|
||
</div>
|
||
<span className={`text-xs px-2 py-0.5 rounded ${doc.required ? 'bg-red-100 text-red-700' : 'bg-slate-100 text-slate-500'}`}>
|
||
{doc.required ? 'Required' : 'Optional'}
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<button
|
||
onClick={() => setAddDocType('swapstation')}
|
||
className="mt-4 text-sm text-accent hover:underline"
|
||
>
|
||
+ Add Document
|
||
</button>
|
||
{addDocType === 'swapstation' && (
|
||
<div className="mt-3 p-3 bg-slate-50 rounded-lg border border-slate-200">
|
||
<input
|
||
type="text"
|
||
placeholder="Document name"
|
||
value={newDocName}
|
||
onChange={(e) => setNewDocName(e.target.value)}
|
||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mb-2"
|
||
/>
|
||
<input
|
||
type="text"
|
||
placeholder="Description"
|
||
value={newDocDesc}
|
||
onChange={(e) => setNewDocDesc(e.target.value)}
|
||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mb-2"
|
||
/>
|
||
<div className="flex gap-2">
|
||
<button
|
||
onClick={() => {
|
||
if (newDocName.trim()) {
|
||
const updated = [...settings.masterData.swapStationDocuments, {
|
||
id: `ss_${Date.now()}`,
|
||
name: newDocName,
|
||
required: false,
|
||
description: newDocDesc || ''
|
||
}];
|
||
setSettings({ ...settings, masterData: { ...settings.masterData, swapStationDocuments: updated } });
|
||
setNewDocName('');
|
||
setNewDocDesc('');
|
||
setAddDocType(null);
|
||
}
|
||
}}
|
||
className="px-3 py-1.5 bg-accent text-white text-sm rounded-lg"
|
||
>
|
||
Add
|
||
</button>
|
||
<button
|
||
onClick={() => {
|
||
setAddDocType(null);
|
||
setNewDocName('');
|
||
setNewDocDesc('');
|
||
}}
|
||
className="px-3 py-1.5 border border-slate-200 text-slate-600 text-sm rounded-lg"
|
||
>
|
||
Cancel
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{activeMasterTab === 'rentalType' && (
|
||
<div className="space-y-6">
|
||
{settings.masterData.rentalDocuments.map((rental, ri) => (
|
||
<div key={rental.type} className="border border-slate-200 rounded-lg p-4">
|
||
<div className="flex items-center justify-between mb-3">
|
||
<h4 className="font-medium text-slate-700">{rental.name}</h4>
|
||
<span className="text-xs px-2 py-1 bg-blue-100 text-blue-700 rounded">{rental.documents.length} docs</span>
|
||
</div>
|
||
<div className="space-y-2">
|
||
{rental.documents.map((doc, di) => (
|
||
<div key={doc.id} className="flex items-center gap-3 p-2 bg-slate-50 rounded-lg">
|
||
<input
|
||
type="checkbox"
|
||
checked={doc.required}
|
||
onChange={(e) => {
|
||
const updated = [...settings.masterData.rentalDocuments];
|
||
updated[ri].documents[di].required = e.target.checked;
|
||
setSettings({ ...settings, masterData: { ...settings.masterData, rentalDocuments: updated } });
|
||
}}
|
||
className="w-4 h-4"
|
||
/>
|
||
<div className="flex-1">
|
||
<p className="text-sm">{doc.name}</p>
|
||
<p className="text-xs text-slate-500">{doc.description}</p>
|
||
</div>
|
||
<span className={`text-xs px-2 py-0.5 rounded ${doc.required ? 'bg-red-100 text-red-700' : 'bg-slate-200 text-slate-600'}`}>
|
||
{doc.required ? 'Required' : 'Optional'}
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<button
|
||
onClick={() => setAddDocType('rental')}
|
||
className="mt-3 text-sm text-accent hover:underline"
|
||
>
|
||
+ Add Document
|
||
</button>
|
||
{addDocType === 'rental' && (
|
||
<div className="mt-3 p-3 bg-slate-50 rounded-lg border border-slate-200">
|
||
<input
|
||
type="text"
|
||
placeholder="Document name"
|
||
value={newDocName}
|
||
onChange={(e) => setNewDocName(e.target.value)}
|
||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mb-2"
|
||
/>
|
||
<input
|
||
type="text"
|
||
placeholder="Description"
|
||
value={newDocDesc}
|
||
onChange={(e) => setNewDocDesc(e.target.value)}
|
||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mb-2"
|
||
/>
|
||
<div className="flex gap-2">
|
||
<button
|
||
onClick={() => {
|
||
if (newDocName.trim()) {
|
||
const updated = [...settings.masterData.rentalDocuments];
|
||
updated.forEach((rental) => {
|
||
rental.documents.push({
|
||
id: `rent_${Date.now()}`,
|
||
name: newDocName,
|
||
required: false,
|
||
description: newDocDesc || ''
|
||
});
|
||
});
|
||
setSettings({ ...settings, masterData: { ...settings.masterData, rentalDocuments: updated } });
|
||
setNewDocName('');
|
||
setNewDocDesc('');
|
||
setAddDocType(null);
|
||
}
|
||
}}
|
||
className="px-3 py-1.5 bg-accent text-white text-sm rounded-lg"
|
||
>
|
||
Add to All
|
||
</button>
|
||
<button
|
||
onClick={() => {
|
||
setAddDocType(null);
|
||
setNewDocName('');
|
||
setNewDocDesc('');
|
||
}}
|
||
className="px-3 py-1.5 border border-slate-200 text-slate-600 text-sm rounded-lg"
|
||
>
|
||
Cancel
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{activeTab === 'parts' && (
|
||
<div className="p-6 space-y-6">
|
||
<div className="flex items-center justify-between">
|
||
<h3 className="text-lg font-semibold text-slate-800">EV Parts</h3>
|
||
<button onClick={() => setShowAddPolicy(true)} className="text-xs text-blue-600 hover:text-blue-700 flex items-center gap-1">
|
||
<Plus className="w-3 h-3" /> Add Part
|
||
</button>
|
||
</div>
|
||
|
||
{showAddPolicy && activeTab === 'parts' && (
|
||
<div className="p-3 bg-white rounded-lg border border-blue-200">
|
||
<input type="text" value={newPolicyName} onChange={(e) => setNewPolicyName(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm mb-2" placeholder="Part Name" />
|
||
<div className="grid grid-cols-2 gap-2 mb-2">
|
||
<input type="number" value={newPolicyDesc} onChange={(e) => setNewPolicyDesc(e.target.value)} className="px-2 py-1.5 border border-slate-200 rounded text-sm" placeholder="Buying Price" />
|
||
<input type="number" value={editPolicyDescHtml} onChange={(e) => setEditPolicyDescHtml(e.target.value)} className="px-2 py-1.5 border border-slate-200 rounded text-sm" placeholder="Selling Price" />
|
||
</div>
|
||
<div className="flex gap-2">
|
||
<button onClick={() => {
|
||
if (!newPolicyName.trim()) return;
|
||
const newId = 'PRT-' + String(settings.parts.length + 1).padStart(3, '0');
|
||
setSettings({ ...settings, parts: [...settings.parts, { id: newId, name: newPolicyName, buyingPrice: Number(newPolicyDesc), sellingPrice: Number(editPolicyDescHtml) }] });
|
||
setNewPolicyName('');
|
||
setNewPolicyDesc('');
|
||
setEditPolicyDescHtml('');
|
||
setShowAddPolicy(false);
|
||
}} className="px-3 py-1.5 bg-blue-600 text-white rounded text-sm">Add</button>
|
||
<button onClick={() => { setNewPolicyName(''); setNewPolicyDesc(''); setEditPolicyDescHtml(''); setShowAddPolicy(false); }} className="px-3 py-1.5 bg-slate-200 text-slate-600 rounded text-sm">Cancel</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div className="space-y-2">
|
||
{settings.parts.map((part, i) => (
|
||
<div key={part.id} className="p-3 bg-slate-50 rounded-lg border border-slate-200">
|
||
{editingPolicy?.tab === 'parts' && editingPolicy?.index === i ? (
|
||
<div className="space-y-2">
|
||
<input type="text" value={editPolicyName} onChange={(e) => setEditPolicyName(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm" placeholder="Part Name" />
|
||
<div className="grid grid-cols-2 gap-2">
|
||
<input type="number" value={editPolicyDesc} onChange={(e) => setEditPolicyDesc(e.target.value)} className="px-2 py-1.5 border border-slate-200 rounded text-sm" placeholder="Buying Price" />
|
||
<input type="number" value={newPolicyName} onChange={(e) => setNewPolicyName(e.target.value)} className="px-2 py-1.5 border border-slate-200 rounded text-sm" placeholder="Selling Price" />
|
||
</div>
|
||
<div className="flex gap-2">
|
||
<button onClick={() => {
|
||
const updated = [...settings.parts];
|
||
updated[i] = { ...part, name: editPolicyName, buyingPrice: Number(editPolicyDesc), sellingPrice: Number(newPolicyName) };
|
||
setSettings({ ...settings, parts: updated });
|
||
setEditingPolicy(null);
|
||
setEditPolicyName('');
|
||
setEditPolicyDesc('');
|
||
setNewPolicyName('');
|
||
}} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Save</button>
|
||
<button onClick={() => { setEditingPolicy(null); setEditPolicyName(''); setEditPolicyDesc(''); setNewPolicyName(''); }} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</button>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex-1">
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-sm font-medium text-slate-700">{part.name}</span>
|
||
<span className="text-xs text-slate-400">({part.id})</span>
|
||
</div>
|
||
<div className="flex items-center gap-4 mt-1">
|
||
<span className="text-xs text-slate-500">Buying: <span className="text-green-600">৳{part.buyingPrice}</span></span>
|
||
<span className="text-xs text-slate-500">Selling: <span className="text-amber-600">৳{part.sellingPrice}</span></span>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center gap-1 ml-2">
|
||
<button onClick={() => { setEditingPolicy({ tab: 'parts', index: i }); setEditPolicyName(part.name); setEditPolicyDesc(String(part.buyingPrice)); setNewPolicyName(String(part.sellingPrice)); }} className="p-1 text-slate-400 hover:text-blue-600">
|
||
<Pencil className="w-3.5 h-3.5" />
|
||
</button>
|
||
<button onClick={() => {
|
||
const updated = settings.parts.filter((_, idx) => idx !== i);
|
||
setSettings({ ...settings, parts: updated });
|
||
}} className="p-1 text-slate-400 hover:text-red-600">
|
||
<Trash2 className="w-3.5 h-3.5" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{activeTab === 'companyPolicy' && (
|
||
<div className="p-6 space-y-6">
|
||
<h3 className="text-lg font-semibold text-slate-800">Company's Policy</h3>
|
||
|
||
<div className="flex gap-2 border-b border-slate-200">
|
||
<button onClick={() => setActiveMasterTab('investor')} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activeMasterTab === 'investor' ? 'border-blue-500 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>Investor</button>
|
||
<button onClick={() => setActiveMasterTab('merchant')} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activeMasterTab === 'merchant' ? 'border-blue-500 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>Merchant</button>
|
||
<button onClick={() => setActiveMasterTab('swapstation')} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activeMasterTab === 'swapstation' ? 'border-blue-500 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>Swap Station</button>
|
||
<button onClick={() => setActiveMasterTab('rentalType')} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activeMasterTab === 'rentalType' ? 'border-blue-500 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>Rental Types</button>
|
||
</div>
|
||
|
||
{activeMasterTab === 'investor' && (
|
||
<div className="space-y-4">
|
||
<div className="flex items-center justify-between mb-2">
|
||
<label className="text-sm text-slate-600 font-medium">Policy List</label>
|
||
<button onClick={() => setShowAddPolicy(true)} className="text-xs text-blue-600 hover:text-blue-700 flex items-center gap-1">
|
||
<Plus className="w-3 h-3" /> Add Policy
|
||
</button>
|
||
</div>
|
||
{showAddPolicy && (
|
||
<div className="p-3 bg-white rounded-lg border border-blue-200">
|
||
<input type="text" value={newPolicyName} onChange={(e) => setNewPolicyName(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm mb-2" placeholder="Policy Title" />
|
||
<RichTextEditor value={newPolicyDesc} onChange={(val) => setNewPolicyDesc(val)} placeholder="Policy Description..." minHeight={100} />
|
||
<div className="flex gap-2 mt-2">
|
||
<button onClick={() => {
|
||
if (!newPolicyName.trim()) return;
|
||
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, investor: [...settings.companyPolicy.investor, { title: newPolicyName, description: newPolicyDesc }] } });
|
||
setNewPolicyName('');
|
||
setNewPolicyDesc('');
|
||
setShowAddPolicy(false);
|
||
}} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Add</button>
|
||
<button onClick={() => { setShowAddPolicy(false); setNewPolicyName(''); setNewPolicyDesc(''); }} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
<div className="space-y-2">
|
||
{(settings.companyPolicy?.investor || []).map((policy, i) => (
|
||
<div key={i} className="p-3 bg-slate-50 rounded-lg border border-slate-200">
|
||
{editingPolicy?.tab === 'investor' && editingPolicy?.index === i ? (
|
||
<div className="space-y-2">
|
||
<input type="text" value={editPolicyName} onChange={(e) => setEditPolicyName(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm" placeholder="Policy Title" />
|
||
<RichTextEditor value={editPolicyDescHtml} onChange={(val) => setEditPolicyDescHtml(val)} placeholder="Policy Description..." minHeight={100} />
|
||
<div className="flex gap-2">
|
||
<button onClick={() => {
|
||
const updated = [...settings.companyPolicy.investor];
|
||
updated[i] = { title: editPolicyName, description: editPolicyDescHtml };
|
||
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, investor: updated } });
|
||
setEditingPolicy(null);
|
||
setEditPolicyDescHtml('');
|
||
}} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Save</button>
|
||
<button onClick={() => { setEditingPolicy(null); setEditPolicyDescHtml(''); }} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</button>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="flex items-start justify-between">
|
||
<div className="flex-1">
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-sm font-medium text-slate-700">{policy.title}</span>
|
||
</div>
|
||
<div className="text-xs text-slate-500 mt-1 prose prose-sm max-w-none" dangerouslySetInnerHTML={{ __html: policy.description }} />
|
||
</div>
|
||
<div className="flex items-center gap-1 ml-2">
|
||
<button onClick={() => { setEditingPolicy({ tab: 'investor', index: i }); setEditPolicyName(policy.title); setEditPolicyDescHtml(policy.description); }} className="p-1 text-slate-400 hover:text-blue-600">
|
||
<Pencil className="w-3.5 h-3.5" />
|
||
</button>
|
||
<button onClick={() => {
|
||
const updated = settings.companyPolicy.investor.filter((_, idx) => idx !== i);
|
||
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, investor: updated } });
|
||
}} className="p-1 text-slate-400 hover:text-red-600">
|
||
<Trash2 className="w-3.5 h-3.5" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{activeMasterTab === 'merchant' && (
|
||
<div className="space-y-4">
|
||
<div className="flex items-center justify-between mb-2">
|
||
<label className="text-sm text-slate-600 font-medium">Policy List</label>
|
||
<button onClick={() => setShowAddPolicy(true)} className="text-xs text-blue-600 hover:text-blue-700 flex items-center gap-1">
|
||
<Plus className="w-3 h-3" /> Add Policy
|
||
</button>
|
||
</div>
|
||
{showAddPolicy && (
|
||
<div className="p-3 bg-white rounded-lg border border-blue-200">
|
||
<input type="text" value={newPolicyName} onChange={(e) => setNewPolicyName(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm mb-2" placeholder="Policy Title" />
|
||
<RichTextEditor value={newPolicyDesc} onChange={(val) => setNewPolicyDesc(val)} placeholder="Policy Description..." minHeight={100} />
|
||
<div className="flex gap-2 mt-2">
|
||
<button onClick={() => {
|
||
if (!newPolicyName.trim()) return;
|
||
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, merchant: [...settings.companyPolicy.merchant, { title: newPolicyName, description: newPolicyDesc }] } });
|
||
setNewPolicyName('');
|
||
setNewPolicyDesc('');
|
||
setShowAddPolicy(false);
|
||
}} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Add</button>
|
||
<button onClick={() => { setShowAddPolicy(false); setNewPolicyName(''); setNewPolicyDesc(''); }} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
<div className="space-y-2">
|
||
{(settings.companyPolicy?.merchant || []).map((policy, i) => (
|
||
<div key={i} className="p-3 bg-slate-50 rounded-lg border border-slate-200">
|
||
{editingPolicy?.tab === 'merchant' && editingPolicy?.index === i ? (
|
||
<div className="space-y-2">
|
||
<input type="text" value={editPolicyName} onChange={(e) => setEditPolicyName(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm" placeholder="Policy Title" />
|
||
<RichTextEditor value={editPolicyDescHtml} onChange={(val) => setEditPolicyDescHtml(val)} placeholder="Policy Description..." minHeight={100} />
|
||
<div className="flex gap-2">
|
||
<button onClick={() => {
|
||
const updated = [...settings.companyPolicy.merchant];
|
||
updated[i] = { title: editPolicyName, description: editPolicyDescHtml };
|
||
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, merchant: updated } });
|
||
setEditingPolicy(null);
|
||
setEditPolicyDescHtml('');
|
||
}} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Save</button>
|
||
<button onClick={() => { setEditingPolicy(null); setEditPolicyDescHtml(''); }} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</button>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="flex items-start justify-between">
|
||
<div className="flex-1">
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-sm font-medium text-slate-700">{policy.title}</span>
|
||
</div>
|
||
<div className="text-xs text-slate-500 mt-1 prose prose-sm max-w-none" dangerouslySetInnerHTML={{ __html: policy.description }} />
|
||
</div>
|
||
<div className="flex items-center gap-1 ml-2">
|
||
<button onClick={() => { setEditingPolicy({ tab: 'merchant', index: i }); setEditPolicyName(policy.title); setEditPolicyDescHtml(policy.description); }} className="p-1 text-slate-400 hover:text-blue-600">
|
||
<Pencil className="w-3.5 h-3.5" />
|
||
</button>
|
||
<button onClick={() => {
|
||
const updated = settings.companyPolicy.merchant.filter((_, idx) => idx !== i);
|
||
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, merchant: updated } });
|
||
}} className="p-1 text-slate-400 hover:text-red-600">
|
||
<Trash2 className="w-3.5 h-3.5" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{activeMasterTab === 'swapstation' && (
|
||
<div className="space-y-4">
|
||
<div className="flex items-center justify-between mb-2">
|
||
<label className="text-sm text-slate-600 font-medium">Policy List</label>
|
||
<button onClick={() => setShowAddPolicy(true)} className="text-xs text-blue-600 hover:text-blue-700 flex items-center gap-1">
|
||
<Plus className="w-3 h-3" /> Add Policy
|
||
</button>
|
||
</div>
|
||
{showAddPolicy && (
|
||
<div className="p-3 bg-white rounded-lg border border-blue-200">
|
||
<input type="text" value={newPolicyName} onChange={(e) => setNewPolicyName(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm mb-2" placeholder="Policy Title" />
|
||
<RichTextEditor value={newPolicyDesc} onChange={(val) => setNewPolicyDesc(val)} placeholder="Policy Description..." minHeight={100} />
|
||
<div className="flex gap-2 mt-2">
|
||
<button onClick={() => {
|
||
if (!newPolicyName.trim()) return;
|
||
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, swapStation: [...settings.companyPolicy.swapStation, { title: newPolicyName, description: newPolicyDesc }] } });
|
||
setNewPolicyName('');
|
||
setNewPolicyDesc('');
|
||
setShowAddPolicy(false);
|
||
}} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Add</button>
|
||
<button onClick={() => { setShowAddPolicy(false); setNewPolicyName(''); setNewPolicyDesc(''); }} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
<div className="space-y-2">
|
||
{(settings.companyPolicy?.swapStation || []).map((policy, i) => (
|
||
<div key={i} className="p-3 bg-slate-50 rounded-lg border border-slate-200">
|
||
{editingPolicy?.tab === 'swapstation' && editingPolicy?.index === i ? (
|
||
<div className="space-y-2">
|
||
<input type="text" value={editPolicyName} onChange={(e) => setEditPolicyName(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm" placeholder="Policy Title" />
|
||
<RichTextEditor value={editPolicyDescHtml} onChange={(val) => setEditPolicyDescHtml(val)} placeholder="Policy Description..." minHeight={100} />
|
||
<div className="flex gap-2">
|
||
<button onClick={() => {
|
||
const updated = [...settings.companyPolicy.swapStation];
|
||
updated[i] = { title: editPolicyName, description: editPolicyDescHtml };
|
||
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, swapStation: updated } });
|
||
setEditingPolicy(null);
|
||
setEditPolicyDescHtml('');
|
||
}} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Save</button>
|
||
<button onClick={() => { setEditingPolicy(null); setEditPolicyDescHtml(''); }} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</button>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="flex items-start justify-between">
|
||
<div className="flex-1">
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-sm font-medium text-slate-700">{policy.title}</span>
|
||
</div>
|
||
<div className="text-xs text-slate-500 mt-1 prose prose-sm max-w-none" dangerouslySetInnerHTML={{ __html: policy.description }} />
|
||
</div>
|
||
<div className="flex items-center gap-1 ml-2">
|
||
<button onClick={() => { setEditingPolicy({ tab: 'swapstation', index: i }); setEditPolicyName(policy.title); setEditPolicyDescHtml(policy.description); }} className="p-1 text-slate-400 hover:text-blue-600">
|
||
<Pencil className="w-3.5 h-3.5" />
|
||
</button>
|
||
<button onClick={() => {
|
||
const updated = settings.companyPolicy.swapStation.filter((_, idx) => idx !== i);
|
||
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, swapStation: updated } });
|
||
}} className="p-1 text-slate-400 hover:text-red-600">
|
||
<Trash2 className="w-3.5 h-3.5" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{activeMasterTab === 'rentalType' && (
|
||
<div className="space-y-4">
|
||
<div className="flex gap-2 border-b border-slate-200">
|
||
<button onClick={() => setActiveRentalTypeTab('single')} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activeRentalTypeTab === 'single' ? 'border-blue-500 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>Rental (Single)</button>
|
||
<button onClick={() => setActiveRentalTypeTab('shared')} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activeRentalTypeTab === 'shared' ? 'border-blue-500 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>Rental (2 Person Shared)</button>
|
||
<button onClick={() => setActiveRentalTypeTab('renttoown')} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activeRentalTypeTab === 'renttoown' ? 'border-blue-500 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>Rent-to-Own</button>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between mb-2">
|
||
<label className="text-sm text-slate-600 font-medium">Policy List</label>
|
||
<button onClick={() => setShowAddPolicy(true)} className="text-xs text-blue-600 hover:text-blue-700 flex items-center gap-1">
|
||
<Plus className="w-3 h-3" /> Add Policy
|
||
</button>
|
||
</div>
|
||
{showAddPolicy && (
|
||
<div className="p-3 bg-white rounded-lg border border-blue-200">
|
||
<input type="text" value={newPolicyName} onChange={(e) => setNewPolicyName(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm mb-2" placeholder="Policy Title" />
|
||
<RichTextEditor value={newPolicyDesc} onChange={(val) => setNewPolicyDesc(val)} placeholder="Policy Description..." minHeight={100} />
|
||
<div className="flex gap-2 mt-2">
|
||
<button onClick={() => {
|
||
if (!newPolicyName.trim()) return;
|
||
const updated = { ...settings.companyPolicy.rentalTypes };
|
||
updated[activeRentalTypeTab] = [...updated[activeRentalTypeTab], { title: newPolicyName, description: newPolicyDesc }];
|
||
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, rentalTypes: updated } });
|
||
setNewPolicyName('');
|
||
setNewPolicyDesc('');
|
||
setShowAddPolicy(false);
|
||
}} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Add</button>
|
||
<button onClick={() => { setShowAddPolicy(false); setNewPolicyName(''); setNewPolicyDesc(''); }} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
<div className="space-y-2">
|
||
{(settings.companyPolicy?.rentalTypes[activeRentalTypeTab] || []).map((policy, i) => (
|
||
<div key={i} className="p-3 bg-slate-50 rounded-lg border border-slate-200">
|
||
{editingPolicy?.tab === 'rentalType' && editingPolicy?.index === i ? (
|
||
<div className="space-y-2">
|
||
<input type="text" value={editPolicyName} onChange={(e) => setEditPolicyName(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm" placeholder="Policy Title" />
|
||
<RichTextEditor value={editPolicyDescHtml} onChange={(val) => setEditPolicyDescHtml(val)} placeholder="Policy Description..." minHeight={100} />
|
||
<div className="flex gap-2">
|
||
<button onClick={() => {
|
||
const updated = { ...settings.companyPolicy.rentalTypes };
|
||
updated[activeRentalTypeTab][i] = { title: editPolicyName, description: editPolicyDescHtml };
|
||
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, rentalTypes: updated } });
|
||
setEditingPolicy(null);
|
||
setEditPolicyDescHtml('');
|
||
}} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Save</button>
|
||
<button onClick={() => { setEditingPolicy(null); setEditPolicyDescHtml(''); }} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</button>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="flex items-start justify-between">
|
||
<div className="flex-1">
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-sm font-medium text-slate-700">{policy.title}</span>
|
||
</div>
|
||
<div className="text-xs text-slate-500 mt-1 prose prose-sm max-w-none" dangerouslySetInnerHTML={{ __html: policy.description }} />
|
||
</div>
|
||
<div className="flex items-center gap-1 ml-2">
|
||
<button onClick={() => { setEditingPolicy({ tab: 'rentalType', index: i }); setEditPolicyName(policy.title); setEditPolicyDescHtml(policy.description); }} className="p-1 text-slate-400 hover:text-blue-600">
|
||
<Pencil className="w-3.5 h-3.5" />
|
||
</button>
|
||
<button onClick={() => {
|
||
const updated = { ...settings.companyPolicy.rentalTypes };
|
||
updated[activeRentalTypeTab] = updated[activeRentalTypeTab].filter((_, idx) => idx !== i);
|
||
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, rentalTypes: updated } });
|
||
}} className="p-1 text-slate-400 hover:text-red-600">
|
||
<Trash2 className="w-3.5 h-3.5" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{activeTab === 'plans' && (
|
||
<div className="p-6 space-y-6">
|
||
<div className="flex items-center justify-between">
|
||
<h3 className="text-lg font-semibold text-slate-800">Plan Selection</h3>
|
||
</div>
|
||
|
||
<div className="flex gap-2 border-b border-slate-200">
|
||
<button onClick={() => setActivePlanTab('singleRent')} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activePlanTab === 'singleRent' ? 'border-blue-500 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>1. Single Rent</button>
|
||
<button onClick={() => setActivePlanTab('rentToOwn')} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activePlanTab === 'rentToOwn' ? 'border-purple-500 text-purple-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>2. Rent to Own</button>
|
||
<button onClick={() => setActivePlanTab('shareEv')} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activePlanTab === 'shareEv' ? 'border-green-500 text-green-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>3. Share an EV</button>
|
||
</div>
|
||
|
||
{activePlanTab === 'singleRent' && (
|
||
<div className="space-y-6">
|
||
{settings.plans.singleRent.map((plan, idx) => (
|
||
<div key={idx} className="bg-white rounded-xl border border-slate-200 overflow-hidden">
|
||
<div className="bg-blue-50 px-4 py-3 border-b border-blue-100 flex items-center justify-between">
|
||
<div className="flex items-center gap-3">
|
||
{/* <span className="text-2xl">{plan.tier === 'Premium' ? '👑' : plan.tier === 'Standard' ? '⚖️' : '💰'}</span> */}
|
||
<div>
|
||
<h4 className="font-semibold text-blue-800">SINGLE RENT - {plan.tier} - ৳{plan.dailyRent}/day</h4>
|
||
<p className="text-sm text-blue-600 mt-1">{plan.description}</p>
|
||
</div>
|
||
</div>
|
||
<button onClick={handleSave} className="px-3 py-1.5 bg-blue-600 text-white rounded-lg text-xs font-medium flex items-center gap-1">
|
||
<Save className="w-3 h-3" /> Save
|
||
</button>
|
||
</div>
|
||
<div className="p-4">
|
||
<div className="grid lg:grid-cols-3 gap-4">
|
||
<div>
|
||
<label className="text-sm text-slate-600">Daily Rent (৳)</label>
|
||
<input type="number" value={plan.dailyRent} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].dailyRent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: 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">Weekly Subscription (৳)</label>
|
||
<input type="number" value={plan.weeklySubscription} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].weeklySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: 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 Subscription (৳)</label>
|
||
<input type="number" value={plan.monthlySubscription} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].monthlySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: 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">Deposit (৳)</label>
|
||
<input type="number" value={plan.deposit} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].deposit = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: 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">FICO Share (%)</label>
|
||
<input type="number" value={plan.ficoSharePercent} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].ficoSharePercent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: 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">JAIBEN Keep (%)</label>
|
||
<input type="number" value={100 - plan.ficoSharePercent} disabled className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1 bg-slate-100" />
|
||
</div>
|
||
</div>
|
||
<div className="mt-4 p-3 bg-slate-50 rounded-lg">
|
||
<div className="flex items-center justify-between text-sm">
|
||
<span className="text-slate-600">FICO + JAIBEN =</span>
|
||
<span className={`font-semibold ${plan.ficoSharePercent + (100 - plan.ficoSharePercent) === 100 ? 'text-green-600' : 'text-red-600'}`}>{plan.ficoSharePercent + (100 - plan.ficoSharePercent)}% (FICO: {plan.ficoSharePercent}% + JAIBEN: {100 - plan.ficoSharePercent}%)</span>
|
||
</div>
|
||
</div>
|
||
<div className="mt-4">
|
||
<label className="text-sm text-slate-600">Description</label>
|
||
<textarea value={plan.description} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].description = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" rows={2} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{activePlanTab === 'rentToOwn' && (
|
||
<div className="space-y-6">
|
||
{settings.plans.rentToOwn.map((plan, idx) => (
|
||
<div key={idx} className="bg-white rounded-xl border border-slate-200 overflow-hidden">
|
||
<div className="bg-purple-50 px-4 py-3 border-b border-purple-100 flex items-center justify-between">
|
||
<div className="flex items-center gap-3">
|
||
{/* <span className="text-2xl">{plan.tier === 'Premium' ? '👑' : plan.tier === 'Standard' ? '⚖️' : '💰'}</span> */}
|
||
<div>
|
||
<h4 className="font-semibold text-purple-800">RENT TO OWN - {plan.tier} - ৳{plan.dailyRent}/day</h4>
|
||
<p className="text-sm text-purple-600 mt-1">{plan.description}</p>
|
||
</div>
|
||
</div>
|
||
<button onClick={handleSave} className="px-3 py-1.5 bg-purple-600 text-white rounded-lg text-xs font-medium flex items-center gap-1">
|
||
<Save className="w-3 h-3" /> Save
|
||
</button>
|
||
</div>
|
||
<div className="p-4">
|
||
<div className="grid lg:grid-cols-3 gap-4">
|
||
<div>
|
||
<label className="text-sm text-slate-600">Daily Rent (৳)</label>
|
||
<input type="number" value={plan.dailyRent} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].dailyRent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: 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">Weekly Subscription (৳)</label>
|
||
<input type="number" value={plan.weeklySubscription} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].weeklySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: 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 Subscription (৳)</label>
|
||
<input type="number" value={plan.monthlySubscription} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].monthlySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: 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">Deposit (৳)</label>
|
||
<input type="number" value={plan.deposit} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].deposit = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: 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">Duration (Months)</label>
|
||
<input type="number" value={plan.durationMonths} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].durationMonths = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: 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 Price (৳)</label>
|
||
<input type="number" value={plan.evPrice} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].evPrice = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: 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 Payment (৳)</label>
|
||
<input type="number" value={plan.totalPayment} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].totalPayment = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: 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">Profit (৳)</label>
|
||
<input type="number" value={plan.profit} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].profit = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: 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">FICO Rent Share (%)</label>
|
||
<input type="number" value={plan.ficoRentSharePercent} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].ficoRentSharePercent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: 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">FICO Profit Share (%)</label>
|
||
<input type="number" value={plan.ficoProfitSharePercent} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].ficoProfitSharePercent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: 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">JAIBEN Keep (%)</label>
|
||
<input type="number" value={100 - plan.ficoRentSharePercent - plan.ficoProfitSharePercent} disabled className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1 bg-slate-100" />
|
||
</div>
|
||
</div>
|
||
<div className="mt-4 p-3 bg-slate-50 rounded-lg">
|
||
<div className="flex items-center justify-between text-sm">
|
||
<span className="text-slate-600">FICO + JAIBEN =</span>
|
||
<span className={`font-semibold ${plan.ficoRentSharePercent + plan.ficoProfitSharePercent + (100 - plan.ficoRentSharePercent - plan.ficoProfitSharePercent) === 100 ? 'text-green-600' : 'text-red-600'}`}>{plan.ficoRentSharePercent + plan.ficoProfitSharePercent + (100 - plan.ficoRentSharePercent - plan.ficoProfitSharePercent)}% (FICO Rent: {plan.ficoRentSharePercent}% + FICO Profit: {plan.ficoProfitSharePercent}% + JAIBEN: {100 - plan.ficoRentSharePercent - plan.ficoProfitSharePercent}%)</span>
|
||
</div>
|
||
</div>
|
||
<div className="mt-4">
|
||
<label className="text-sm text-slate-600">Description</label>
|
||
<textarea value={plan.description} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].description = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" rows={2} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{activePlanTab === 'shareEv' && (
|
||
<div className="space-y-6">
|
||
{settings.plans.shareEv.map((plan, idx) => (
|
||
<div key={idx} className="bg-white rounded-xl border border-slate-200 overflow-hidden">
|
||
<div className="bg-green-50 px-4 py-3 border-b border-green-100 flex items-center justify-between">
|
||
<div className="flex items-center gap-3">
|
||
{/* <span className="text-2xl">{plan.tier === 'Premium' ? '👑' : plan.tier === 'Standard' ? '⚖️' : '💰'}</span> */}
|
||
<div>
|
||
<h4 className="font-semibold text-green-800">SHARE AN EV - {plan.tier} - ৳{plan.dailyRentEach}/day each (Total: ৳{plan.totalDailyRent})</h4>
|
||
<p className="text-sm text-green-600 mt-1">{plan.description}</p>
|
||
</div>
|
||
</div>
|
||
<button onClick={handleSave} className="px-3 py-1.5 bg-green-600 text-white rounded-lg text-xs font-medium flex items-center gap-1">
|
||
<Save className="w-3 h-3" /> Save
|
||
</button>
|
||
</div>
|
||
<div className="p-4">
|
||
<div className="grid lg:grid-cols-3 gap-4">
|
||
<div>
|
||
<label className="text-sm text-slate-600">Daily Rent Each (৳)</label>
|
||
<input type="number" value={plan.dailyRentEach} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].dailyRentEach = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: 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 Daily Rent (৳)</label>
|
||
<input type="number" value={plan.totalDailyRent} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].totalDailyRent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: 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">Weekly Subscription Each (৳)</label>
|
||
<input type="number" value={plan.weeklySubscriptionEach} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].weeklySubscriptionEach = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: 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 Weekly Subscription (৳)</label>
|
||
<input type="number" value={plan.totalWeeklySubscription} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].totalWeeklySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: 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 Subscription Each (৳)</label>
|
||
<input type="number" value={plan.monthlySubscriptionEach} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].monthlySubscriptionEach = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: 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 Monthly Subscription (৳)</label>
|
||
<input type="number" value={plan.totalMonthlySubscription} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].totalMonthlySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: 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">Deposit Each (৳)</label>
|
||
<input type="number" value={plan.depositEach} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].depositEach = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: 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 Deposit (৳)</label>
|
||
<input type="number" value={plan.totalDeposit} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].totalDeposit = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: 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">FICO Share (%)</label>
|
||
<input type="number" value={plan.ficoSharePercent} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].ficoSharePercent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: 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">JAIBEN Keep (%)</label>
|
||
<input type="number" value={100 - plan.ficoSharePercent} disabled className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1 bg-slate-100" />
|
||
</div>
|
||
</div>
|
||
<div className="mt-4 p-3 bg-slate-50 rounded-lg">
|
||
<div className="flex items-center justify-between text-sm">
|
||
<span className="text-slate-600">FICO + JAIBEN =</span>
|
||
<span className={`font-semibold ${plan.ficoSharePercent + (100 - plan.ficoSharePercent) === 100 ? 'text-green-600' : 'text-red-600'}`}>{plan.ficoSharePercent + (100 - plan.ficoSharePercent)}% (FICO: {plan.ficoSharePercent}% + JAIBEN: {100 - plan.ficoSharePercent}%)</span>
|
||
</div>
|
||
</div>
|
||
<div className="mt-4">
|
||
<label className="text-sm text-slate-600">Description</label>
|
||
<textarea value={plan.description} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].description = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" rows={2} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
{
|
||
(activeTab as string) === 'investment' && (
|
||
<div className="p-6 space-y-6">
|
||
<div className="flex items-center justify-between">
|
||
<h3 className="text-lg font-semibold text-slate-800">Investment Plans</h3>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between bg-amber-50 border border-amber-200 rounded-xl p-4">
|
||
<div>
|
||
<h4 className="font-semibold text-amber-800">Investment Plans ({settings.plans.investment.length})</h4>
|
||
<p className="text-sm text-amber-600">Manage investment plans for investors</p>
|
||
</div>
|
||
<button onClick={() => { setAddInvestPlan(true); setNewInvestName(''); }} className="px-4 py-2 bg-amber-600 text-white rounded-lg text-sm font-medium flex items-center gap-2">
|
||
<Plus className="w-4 h-4" /> New Plan
|
||
</button>
|
||
</div>
|
||
|
||
{addInvestPlan && (
|
||
<div className="bg-white rounded-xl border border-amber-300 overflow-hidden">
|
||
<div className="bg-amber-100 px-4 py-3 border-b border-amber-200 flex items-center justify-between">
|
||
<div>
|
||
<h4 className="font-semibold text-amber-800">New Investment Plan</h4>
|
||
<p className="text-sm text-amber-600 mt-1">Fill in the details below</p>
|
||
</div>
|
||
<button onClick={() => setAddInvestPlan(false)} className="text-amber-600 hover:text-amber-800">
|
||
<X className="w-5 h-5" />
|
||
</button>
|
||
</div>
|
||
<div className="p-4">
|
||
<div className="grid lg:grid-cols-3 gap-4">
|
||
<div>
|
||
<label className="text-sm text-slate-600">Plan Name</label>
|
||
<input type="text" value={newInvestName} onChange={(e) => setNewInvestName(e.target.value)} placeholder="e.g., 1 Bike Plan" 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">Status</label>
|
||
<select value={newInvestStatus} onChange={(e) => setNewInvestStatus(e.target.value)} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1">
|
||
<option value="active">Active</option>
|
||
<option value="paused">Paused</option>
|
||
<option value="closed">Closed</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label className="text-sm text-slate-600">Target Amount (৳)</label>
|
||
<input type="number" value={newInvestTarget} onChange={(e) => setNewInvestTarget(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">Start Date</label>
|
||
<input type="date" value={newInvestStart} onChange={(e) => setNewInvestStart(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">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">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>
|
||
<div>
|
||
<label className="text-sm text-slate-600">Max Investment (৳)</label>
|
||
<input type="number" value={newInvestMax} onChange={(e) => setNewInvestMax(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">Duration (Months)</label>
|
||
<input type="number" value={newInvestDuration} onChange={(e) => setNewInvestDuration(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">Lock-in Period (Months)</label>
|
||
<input type="number" value={newInvestLock} onChange={(e) => setNewInvestLock(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">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>
|
||
<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>
|
||
<div className="mt-4 p-3 bg-slate-50 rounded-lg">
|
||
<div className="flex items-center justify-between text-sm">
|
||
<span className="text-slate-600">Profit from Plan Selection (FICO Share):</span>
|
||
<span className="font-semibold text-green-600">{settings.plans.singleRent[0]?.ficoSharePercent || 50}%</span>
|
||
</div>
|
||
</div>
|
||
<div className="mt-4">
|
||
<label className="text-sm text-slate-600">Description</label>
|
||
<textarea value={newInvestDesc} onChange={(e) => setNewInvestDesc(e.target.value)} placeholder="Enter plan description" className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" rows={2} />
|
||
</div>
|
||
<button onClick={createInvestPlan} className="mt-4 px-4 py-2 bg-amber-600 text-white rounded-lg text-sm font-medium">Create Plan</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div className="flex gap-2 border-b border-slate-200">
|
||
{settings.plans.investment.map((plan, idx) => (
|
||
<button key={idx} onClick={() => setActiveInvestTab(idx)} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activeInvestTab === idx ? 'border-amber-500 text-amber-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}> {plan.name}</button>
|
||
))}
|
||
</div>
|
||
|
||
{settings.plans.investment.length > 0 && settings.plans.investment.map((plan, idx) => idx === activeInvestTab && (
|
||
<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>
|
||
<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>
|
||
</div>
|
||
<div className="p-4">
|
||
<div className="grid lg:grid-cols-3 gap-4">
|
||
<div>
|
||
<label className="text-sm text-slate-600">Plan Name</label>
|
||
<input type="text" value={plan.name} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].name = 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">Status</label>
|
||
<select value={plan.status} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].status = 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">
|
||
<option value="active">Active</option>
|
||
<option value="paused">Paused</option>
|
||
<option value="closed">Closed</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label className="text-sm text-slate-600">Target Amount (৳)</label>
|
||
<input type="number" value={plan.targetAmount} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].targetAmount = 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">Start Date</label>
|
||
<input type="date" value={plan.startDate} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].startDate = 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">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">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>
|
||
<div>
|
||
<label className="text-sm text-slate-600">Max Investment (৳)</label>
|
||
<input type="number" value={plan.maxInvestment} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].maxInvestment = 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">Duration (Months)</label>
|
||
<input type="number" value={plan.durationMonths} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].durationMonths = 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">Lock-in Period (Months)</label>
|
||
<input type="number" value={plan.lockInMonths} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].lockInMonths = 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">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>
|
||
<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>
|
||
<div className="mt-4 p-3 bg-slate-50 rounded-lg">
|
||
<div className="flex items-center justify-between text-sm">
|
||
<span className="text-slate-600">Profit from Plan Selection (FICO Share):</span>
|
||
<span className="font-semibold text-green-600">{settings.plans.singleRent[0]?.ficoSharePercent || 50}%</span>
|
||
</div>
|
||
</div>
|
||
<div className="mt-4">
|
||
<label className="text-sm text-slate-600">Description</label>
|
||
<textarea value={plan.description} onChange={(e) => { const updated = [...settings.plans.investment]; updated[idx].description = 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" rows={2} />
|
||
</div>
|
||
<div className="mt-4 flex justify-end">
|
||
<button onClick={handleSave} className="px-4 py-2 bg-amber-600 text-white rounded-lg text-sm font-medium flex items-center gap-2">
|
||
<Save className="w-4 h-4" /> Save Changes
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
{
|
||
(activeTab as string) === 'swapstation' && (
|
||
<div className="p-6 space-y-6">
|
||
<div className="flex items-center justify-between">
|
||
<h3 className="text-lg font-semibold text-slate-800">Swap Station Plans</h3>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between bg-blue-50 border border-blue-200 rounded-xl p-4">
|
||
<div>
|
||
<h4 className="font-semibold text-blue-800">Swap Station Plans ({settings.plans.swapStation.length})</h4>
|
||
<p className="text-sm text-blue-600">Manage swap station plans for operators</p>
|
||
</div>
|
||
<button onClick={() => { setAddSwapStationPlan(true); setNewSwapName(''); }} className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium flex items-center gap-2">
|
||
<Plus className="w-4 h-4" /> New Plan
|
||
</button>
|
||
</div>
|
||
|
||
{addSwapStationPlan && (
|
||
<div className="bg-white rounded-xl border border-blue-300 overflow-hidden">
|
||
<div className="bg-blue-100 px-4 py-3 border-b border-blue-200 flex items-center justify-between">
|
||
<div>
|
||
<h4 className="font-semibold text-blue-800">New Swap Station Plan</h4>
|
||
<p className="text-sm text-blue-600 mt-1">Fill in the details below</p>
|
||
</div>
|
||
<button onClick={() => setAddSwapStationPlan(false)} className="text-blue-600 hover:text-blue-800">
|
||
<X className="w-5 h-5" />
|
||
</button>
|
||
</div>
|
||
<div className="p-4">
|
||
<div className="grid lg:grid-cols-3 gap-4">
|
||
<div>
|
||
<label className="text-sm text-slate-600">Plan Name</label>
|
||
<input type="text" value={newSwapName} onChange={(e) => setNewSwapName(e.target.value)} placeholder="e.g., Standard Station" 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">Status</label>
|
||
<select value={newSwapStatus} onChange={(e) => setNewSwapStatus(e.target.value)} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1">
|
||
<option value="active">Active</option>
|
||
<option value="paused">Paused</option>
|
||
<option value="closed">Closed</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label className="text-sm text-slate-600">Battery Count</label>
|
||
<input type="number" value={newSwapBatteryCount} onChange={(e) => setNewSwapBatteryCount(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">Swap Price (৳)</label>
|
||
<input type="number" value={newSwapPrice} onChange={(e) => setNewSwapPrice(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 Subscription (৳)</label>
|
||
<input type="number" value={newSwapMonthly} onChange={(e) => setNewSwapMonthly(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">Daily Subscription (৳)</label>
|
||
<input type="number" value={newSwapDaily} onChange={(e) => setNewSwapDaily(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">Min Batteries</label>
|
||
<input type="number" value={newSwapMin} onChange={(e) => setNewSwapMin(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">Max Batteries</label>
|
||
<input type="number" value={newSwapMax} onChange={(e) => setNewSwapMax(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">Profit Share (%)</label>
|
||
<input type="number" value={newSwapProfit} onChange={(e) => setNewSwapProfit(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
|
||
</div>
|
||
</div>
|
||
<div className="mt-4">
|
||
<label className="text-sm text-slate-600">Description</label>
|
||
<textarea value={newSwapDesc} onChange={(e) => setNewSwapDesc(e.target.value)} placeholder="Enter plan description" className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" rows={2} />
|
||
</div>
|
||
<button onClick={createSwapStationPlan} className="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium">Create Plan</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div className="flex gap-2 border-b border-slate-200">
|
||
{settings.plans.swapStation.map((plan, idx) => (
|
||
<button key={idx} onClick={() => setActiveSwapTab(idx)} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activeSwapTab === idx ? 'border-blue-500 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}> {plan.name}</button>
|
||
))}
|
||
</div>
|
||
|
||
{settings.plans.swapStation.length > 0 && settings.plans.swapStation.map((plan, idx) => idx === activeSwapTab && (
|
||
<div key={idx} className="bg-white rounded-xl border border-slate-200 overflow-hidden">
|
||
<div className="bg-blue-50 px-4 py-3 border-b border-blue-100 flex items-center justify-between">
|
||
<div>
|
||
<h4 className="font-semibold text-blue-800">{plan.name}</h4>
|
||
<p className="text-sm text-blue-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>
|
||
</div>
|
||
<div className="p-4">
|
||
<div className="grid lg:grid-cols-3 gap-4">
|
||
<div>
|
||
<label className="text-sm text-slate-600">Plan Name</label>
|
||
<input type="text" value={plan.name} onChange={(e) => { const updated = [...settings.plans.swapStation]; updated[idx].name = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, swapStation: 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">Status</label>
|
||
<select value={plan.status} onChange={(e) => { const updated = [...settings.plans.swapStation]; updated[idx].status = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, swapStation: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1">
|
||
<option value="active">Active</option>
|
||
<option value="paused">Paused</option>
|
||
<option value="closed">Closed</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label className="text-sm text-slate-600">Battery Count</label>
|
||
<input type="number" value={plan.batteryCount} onChange={(e) => { const updated = [...settings.plans.swapStation]; updated[idx].batteryCount = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, swapStation: 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">Swap Price (৳)</label>
|
||
<input type="number" value={plan.swapPrice} onChange={(e) => { const updated = [...settings.plans.swapStation]; updated[idx].swapPrice = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, swapStation: 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 Subscription (৳)</label>
|
||
<input type="number" value={plan.monthlySubscription} onChange={(e) => { const updated = [...settings.plans.swapStation]; updated[idx].monthlySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, swapStation: 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">Daily Subscription (৳)</label>
|
||
<input type="number" value={plan.dailySubscription} onChange={(e) => { const updated = [...settings.plans.swapStation]; updated[idx].dailySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, swapStation: 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 Batteries</label>
|
||
<input type="number" value={plan.minBatteries} onChange={(e) => { const updated = [...settings.plans.swapStation]; updated[idx].minBatteries = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, swapStation: 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">Max Batteries</label>
|
||
<input type="number" value={plan.maxBatteries} onChange={(e) => { const updated = [...settings.plans.swapStation]; updated[idx].maxBatteries = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, swapStation: 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">Profit Share (%)</label>
|
||
<input type="number" value={plan.profitSharePercent} onChange={(e) => { const updated = [...settings.plans.swapStation]; updated[idx].profitSharePercent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, swapStation: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
|
||
</div>
|
||
</div>
|
||
<div className="mt-4">
|
||
<label className="text-sm text-slate-600">Description</label>
|
||
<textarea value={plan.description} onChange={(e) => { const updated = [...settings.plans.swapStation]; updated[idx].description = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, swapStation: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" rows={2} />
|
||
</div>
|
||
<div className="mt-4 flex justify-end">
|
||
<button onClick={handleSave} className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium flex items-center gap-2">
|
||
<Save className="w-4 h-4" /> Save Changes
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
{
|
||
(activeTab as string) === 'riderrequest' && (
|
||
<div className="p-6 space-y-6">
|
||
<div className="flex items-center justify-between">
|
||
<h3 className="text-lg font-semibold text-slate-800">Rider Request Plans</h3>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between bg-rose-50 border border-rose-200 rounded-xl p-4">
|
||
<div>
|
||
<h4 className="font-semibold text-rose-800">Rider Request Plans ({settings.plans.riderRequest.length})</h4>
|
||
<p className="text-sm text-rose-600">Manage rider request plans for operators</p>
|
||
</div>
|
||
<button onClick={() => { setAddRiderPlan(true); setNewRiderName(''); }} className="px-4 py-2 bg-rose-600 text-white rounded-lg text-sm font-medium flex items-center gap-2">
|
||
<Plus className="w-4 h-4" /> New Plan
|
||
</button>
|
||
</div>
|
||
|
||
{addRiderPlan && (
|
||
<div className="bg-white rounded-xl border border-rose-300 overflow-hidden">
|
||
<div className="bg-rose-100 px-4 py-3 border-b border-rose-200 flex items-center justify-between">
|
||
<div>
|
||
<h4 className="font-semibold text-rose-800">New Rider Request Plan</h4>
|
||
<p className="text-sm text-rose-600 mt-1">Fill in the details below</p>
|
||
</div>
|
||
<button onClick={() => setAddRiderPlan(false)} className="text-rose-600 hover:text-rose-800">
|
||
<X className="w-5 h-5" />
|
||
</button>
|
||
</div>
|
||
<div className="p-4">
|
||
<div className="grid lg:grid-cols-3 gap-4">
|
||
<div>
|
||
<label className="text-sm text-slate-600">Plan Name</label>
|
||
<input type="text" value={newRiderName} onChange={(e) => setNewRiderName(e.target.value)} placeholder="e.g., Premium Rider Plan" 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">Tier</label>
|
||
<select value={newRiderTier} onChange={(e) => setNewRiderTier(e.target.value)} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1">
|
||
<option value="Premium">Premium</option>
|
||
<option value="Standard">Standard</option>
|
||
<option value="Economy">Economy</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label className="text-sm text-slate-600">Status</label>
|
||
<select value={newRiderStatus} onChange={(e) => setNewRiderStatus(e.target.value)} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1">
|
||
<option value="active">Active</option>
|
||
<option value="paused">Paused</option>
|
||
<option value="closed">Closed</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label className="text-sm text-slate-600">Min Riders</label>
|
||
<input type="number" value={newRiderMin} onChange={(e) => setNewRiderMin(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">Max Riders</label>
|
||
<input type="number" value={newRiderMax} onChange={(e) => setNewRiderMax(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 Subscription (৳)</label>
|
||
<input type="number" value={newRiderMonthly} onChange={(e) => setNewRiderMonthly(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">Daily Subscription (৳)</label>
|
||
<input type="number" value={newRiderDaily} onChange={(e) => setNewRiderDaily(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">Deposit (৳)</label>
|
||
<input type="number" value={newRiderDeposit} onChange={(e) => setNewRiderDeposit(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">Commission (%)</label>
|
||
<input type="number" value={newRiderCommission} onChange={(e) => setNewRiderCommission(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">Daily Ride Target</label>
|
||
<input type="number" value={newRiderTarget} onChange={(e) => setNewRiderTarget(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">Weekly Holiday</label>
|
||
<input type="number" value={newRiderHoliday} onChange={(e) => setNewRiderHoliday(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
|
||
</div>
|
||
</div>
|
||
<div className="mt-4">
|
||
<label className="text-sm text-slate-600">Description</label>
|
||
<textarea value={newRiderDesc} onChange={(e) => setNewRiderDesc(e.target.value)} placeholder="Enter plan description" className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" rows={2} />
|
||
</div>
|
||
<button onClick={createRiderPlan} className="mt-4 px-4 py-2 bg-rose-600 text-white rounded-lg text-sm font-medium">Create Plan</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div className="flex gap-2 border-b border-slate-200">
|
||
{settings.plans.riderRequest.map((plan, idx) => (
|
||
<button key={idx} onClick={() => setActiveRiderTab(idx)} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activeRiderTab === idx ? 'border-rose-500 text-rose-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>{idx + 1}. {plan.name}</button>
|
||
))}
|
||
</div>
|
||
|
||
{settings.plans.riderRequest.length > 0 && settings.plans.riderRequest.map((plan, idx) => idx === activeRiderTab && (
|
||
<div key={idx} className="bg-white rounded-xl border border-slate-200 overflow-hidden">
|
||
<div className="bg-rose-50 px-4 py-3 border-b border-rose-100 flex items-center justify-between">
|
||
<div>
|
||
<h4 className="font-semibold text-rose-800">{plan.name} - {plan.tier}</h4>
|
||
<p className="text-sm text-rose-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>
|
||
</div>
|
||
<div className="p-4">
|
||
<div className="grid lg:grid-cols-3 gap-4">
|
||
<div>
|
||
<label className="text-sm text-slate-600">Plan Name</label>
|
||
<input type="text" value={plan.name} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].name = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, riderRequest: 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">Tier</label>
|
||
<select value={plan.tier} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].tier = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1">
|
||
<option value="Premium">Premium</option>
|
||
<option value="Standard">Standard</option>
|
||
<option value="Economy">Economy</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label className="text-sm text-slate-600">Status</label>
|
||
<select value={plan.status} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].status = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1">
|
||
<option value="active">Active</option>
|
||
<option value="paused">Paused</option>
|
||
<option value="closed">Closed</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label className="text-sm text-slate-600">Min Riders</label>
|
||
<input type="number" value={plan.minRiders} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].minRiders = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: 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">Max Riders</label>
|
||
<input type="number" value={plan.maxRiders} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].maxRiders = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: 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 Subscription (৳)</label>
|
||
<input type="number" value={plan.monthlySubscription} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].monthlySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: 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">Daily Subscription (৳)</label>
|
||
<input type="number" value={plan.dailySubscription} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].dailySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: 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">Deposit (৳)</label>
|
||
<input type="number" value={plan.deposit} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].deposit = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: 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">Commission (%)</label>
|
||
<input type="number" value={plan.commissionPercent} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].commissionPercent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: 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">Daily Ride Target</label>
|
||
<input type="number" value={plan.dailyRideTarget} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].dailyRideTarget = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: 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">Weekly Holiday</label>
|
||
<input type="number" value={plan.weeklyHoliday} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].weeklyHoliday = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
|
||
</div>
|
||
</div>
|
||
<div className="mt-4">
|
||
<label className="text-sm text-slate-600">Description</label>
|
||
<textarea value={plan.description} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].description = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" rows={2} />
|
||
</div>
|
||
<div className="mt-4 flex justify-end">
|
||
<button onClick={handleSave} className="px-4 py-2 bg-rose-600 text-white rounded-lg text-sm font-medium flex items-center gap-2">
|
||
<Save className="w-4 h-4" /> Save Changes
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)
|
||
}
|
||
</div >
|
||
</div >
|
||
|
||
|
||
</div >
|
||
);
|
||
}
|