shawon/JML
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: replace Master Data tab with standalone KYC Documents tab in company settings

Browse Source
This commit is contained in:
sazzadulalambd
2026-04-26 18:41:54 +06:00
parent eadcf9b79c
commit 0616faffe1
1 changed files with 30 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
src/app/admin/settings/page.tsx
View File

@@ -251,8 +251,8 @@ const initialSettings: CompanySettings = {
export default function CompanySettingsPage() { export default function CompanySettingsPage() {
const [settings, setSettings] = useState<CompanySettings>(initialSettings); const [settings, setSettings] = useState<CompanySettings>(initialSettings);
const [activeTab, setActiveTab] = useState<'general' | 'branding' | 'social' | 'integration' | 'landing' | 'master' | 'rental'>('general'); const [activeTab, setActiveTab] = useState<'general' | 'branding' | 'social' | 'integration' | 'landing' | 'kyc' | 'rental'>('general');
const [activeMasterTab, setActiveMasterTab] = useState<'kyc' | 'investor' | 'merchant' | 'swapstation' | 'rental' | 'plans' | 'parts' | 'service'>('kyc'); const [activeMasterTab, setActiveMasterTab] = useState<'investor' | 'merchant' | 'swapstation' | 'rental'>('investor');
const [saved, setSaved] = useState(false); const [saved, setSaved] = useState(false);
const handleSave = () => { const handleSave = () => {
@@ -266,7 +266,8 @@ export default function CompanySettingsPage() {
{ id: 'social', label: 'Social Media', icon: Link2 }, { id: 'social', label: 'Social Media', icon: Link2 },
{ id: 'integration', label: 'Integrations', icon: Mail }, { id: 'integration', label: 'Integrations', icon: Mail },
{ id: 'landing', label: 'Landing Page', icon: Monitor }, { id: 'landing', label: 'Landing Page', icon: Monitor },
{ id: 'master', label: 'Master Data', icon: Package },
{ id: 'kyc', label: 'KYC Documents', icon: Package },
{ id: 'rental', label: 'Rental Policy', icon: FileCheck }, { id: 'rental', label: 'Rental Policy', icon: FileCheck },
]; ];
@@ -277,7 +278,7 @@ export default function CompanySettingsPage() {
<h1 className="text-2xl lg:text-3xl font-extrabold text-slate-800">Company Settings</h1> <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> <p className="text-sm text-slate-500 mt-1">Manage your company information and configurations</p>
</div> </div>
<button <button
onClick={handleSave} 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" 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"
> >
@@ -298,11 +299,10 @@ export default function CompanySettingsPage() {
<button <button
key={tab.id} key={tab.id}
onClick={() => setActiveTab(tab.id as typeof activeTab)} 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 ${ className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors ${activeTab === tab.id
activeTab === tab.id ? 'bg-accent text-white'
? 'bg-accent text-white' : 'text-slate-600 hover:bg-slate-50'
: 'text-slate-600 hover:bg-slate-50' }`}
}`}
> >
<tab.icon className="w-4 h-4" /> <tab.icon className="w-4 h-4" />
{tab.label} {tab.label}
@@ -315,7 +315,7 @@ export default function CompanySettingsPage() {
{activeTab === 'general' && ( {activeTab === 'general' && (
<div className="p-6 space-y-6"> <div className="p-6 space-y-6">
<h3 className="text-lg font-semibold text-slate-800">General Information</h3> <h3 className="text-lg font-semibold text-slate-800">General Information</h3>
<div className="grid lg:grid-cols-2 gap-4"> <div className="grid lg:grid-cols-2 gap-4">
<div> <div>
<label className="text-sm text-slate-600">Company Name</label> <label className="text-sm text-slate-600">Company Name</label>
@@ -430,7 +430,7 @@ export default function CompanySettingsPage() {
</div> </div>
<h3 className="text-lg font-semibold text-slate-800 pt-4 border-t">Business Registration</h3> <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 className="grid lg:grid-cols-3 gap-4">
<div> <div>
<label className="text-sm text-slate-600">TIN Number</label> <label className="text-sm text-slate-600">TIN Number</label>
@@ -475,7 +475,7 @@ export default function CompanySettingsPage() {
{activeTab === 'branding' && ( {activeTab === 'branding' && (
<div className="p-6 space-y-6"> <div className="p-6 space-y-6">
<h3 className="text-lg font-semibold text-slate-800">Branding & Design</h3> <h3 className="text-lg font-semibold text-slate-800">Branding & Design</h3>
<div className="grid lg:grid-cols-2 gap-6"> <div className="grid lg:grid-cols-2 gap-6">
<div> <div>
<label className="text-sm text-slate-600">Company Logo</label> <label className="text-sm text-slate-600">Company Logo</label>
@@ -563,13 +563,13 @@ export default function CompanySettingsPage() {
<div> <div>
<label className="text-sm text-slate-600">Preview</label> <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="mt-2 p-6 bg-slate-100 rounded-lg flex items-center justify-center gap-4">
<div <div
className="px-4 py-2 text-white font-bold" className="px-4 py-2 text-white font-bold"
style={{ backgroundColor: settings.primaryColor, borderRadius: settings.borderRadius }} style={{ backgroundColor: settings.primaryColor, borderRadius: settings.borderRadius }}
> >
Primary Primary
</div> </div>
<div <div
className="px-4 py-2 text-white font-bold" className="px-4 py-2 text-white font-bold"
style={{ backgroundColor: settings.secondaryColor, borderRadius: settings.borderRadius }} style={{ backgroundColor: settings.secondaryColor, borderRadius: settings.borderRadius }}
> >
@@ -583,7 +583,7 @@ export default function CompanySettingsPage() {
{activeTab === 'social' && ( {activeTab === 'social' && (
<div className="p-6 space-y-6"> <div className="p-6 space-y-6">
<h3 className="text-lg font-semibold text-slate-800">Social Media Links</h3> <h3 className="text-lg font-semibold text-slate-800">Social Media Links</h3>
<div className="space-y-4"> <div className="space-y-4">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<span className="w-5 text-blue-600 font-bold text-sm">FB</span> <span className="w-5 text-blue-600 font-bold text-sm">FB</span>
@@ -647,7 +647,7 @@ export default function CompanySettingsPage() {
{activeTab === 'integration' && ( {activeTab === 'integration' && (
<div className="p-6 space-y-6"> <div className="p-6 space-y-6">
<h3 className="text-lg font-semibold text-slate-800">Email Integration (SMTP)</h3> <h3 className="text-lg font-semibold text-slate-800">Email Integration (SMTP)</h3>
<div className="grid lg:grid-cols-2 gap-4"> <div className="grid lg:grid-cols-2 gap-4">
<div> <div>
<label className="text-sm text-slate-600">SMTP Host</label> <label className="text-sm text-slate-600">SMTP Host</label>
@@ -712,11 +712,10 @@ export default function CompanySettingsPage() {
<button <button
key={enc} key={enc}
onClick={() => setSettings({ ...settings, smtp: { ...settings.smtp, encryption: enc } })} onClick={() => setSettings({ ...settings, smtp: { ...settings.smtp, encryption: enc } })}
className={`px-4 py-2 text-sm rounded-lg border ${ className={`px-4 py-2 text-sm rounded-lg border ${settings.smtp.encryption === enc
settings.smtp.encryption === enc ? 'bg-accent text-white border-accent'
? 'bg-accent text-white border-accent' : 'border-slate-200 text-slate-600'
: 'border-slate-200 text-slate-600' }`}
}`}
> >
{enc.toUpperCase()} {enc.toUpperCase()}
</button> </button>
@@ -725,7 +724,7 @@ export default function CompanySettingsPage() {
</div> </div>
<h3 className="text-lg font-semibold text-slate-800 pt-4 border-t">SMS Integration</h3> <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 className="grid lg:grid-cols-2 gap-4">
<div> <div>
<label className="text-sm text-slate-600">Provider</label> <label className="text-sm text-slate-600">Provider</label>
@@ -773,7 +772,7 @@ export default function CompanySettingsPage() {
{activeTab === 'landing' && ( {activeTab === 'landing' && (
<div className="p-6 space-y-6"> <div className="p-6 space-y-6">
<h3 className="text-lg font-semibold text-slate-800">Landing Page Hero Section</h3> <h3 className="text-lg font-semibold text-slate-800">Landing Page Hero Section</h3>
<div className="grid lg:grid-cols-2 gap-4"> <div className="grid lg:grid-cols-2 gap-4">
<div> <div>
<label className="text-sm text-slate-600">Hero Title</label> <label className="text-sm text-slate-600">Hero Title</label>
@@ -841,7 +840,7 @@ export default function CompanySettingsPage() {
<div className="mt-2 p-8 bg-gradient-to-br from-slate-800 to-slate-900 rounded-lg text-center"> <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> <h4 className="text-2xl font-bold text-white">{settings.heroData.title}</h4>
<p className="text-slate-300 mt-2">{settings.heroData.subtitle}</p> <p className="text-slate-300 mt-2">{settings.heroData.subtitle}</p>
<button <button
className="mt-4 px-6 py-2 bg-accent text-white rounded-lg" className="mt-4 px-6 py-2 bg-accent text-white rounded-lg"
style={{ borderRadius: settings.borderRadius }} style={{ borderRadius: settings.borderRadius }}
> >
@@ -852,59 +851,30 @@ export default function CompanySettingsPage() {
</div> </div>
)} )}
{activeTab === 'master' && ( {activeTab === 'kyc' && (
<div className="p-6 space-y-6"> <div className="p-6 space-y-6">
<h3 className="text-lg font-semibold text-slate-800">Master Data</h3> <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"> <div className="flex flex-wrap gap-2 border-b border-slate-200 pb-2">
{[ {[
{ id: 'kyc', label: 'KYC Documents' },
{ id: 'investor', label: 'Investor' }, { id: 'investor', label: 'Investor' },
{ id: 'merchant', label: 'Merchant' }, { id: 'merchant', label: 'Merchant' },
{ id: 'swapstation', label: 'Swap Station' }, { id: 'swapstation', label: 'Swap Station' },
{ id: 'rental', label: 'Rental Types' }, { id: 'rental', label: 'Rental Types' },
{ id: 'plans', label: 'Subscription Plans' },
].map(tab => ( ].map(tab => (
<button <button
key={tab.id} key={tab.id}
onClick={() => setActiveMasterTab(tab.id as typeof activeMasterTab)} onClick={() => setActiveMasterTab(tab.id as typeof activeMasterTab)}
className={`px-3 py-1.5 text-sm rounded-lg ${ className={`px-3 py-1.5 text-sm rounded-lg ${activeMasterTab === tab.id
activeMasterTab === tab.id
? 'bg-accent text-white' ? 'bg-accent text-white'
: 'text-slate-600 hover:bg-slate-50' : 'text-slate-600 hover:bg-slate-50'
}`} }`}
> >
{tab.label} {tab.label}
</button> </button>
))} ))}
</div> </div>
{activeMasterTab === 'kyc' && (
<div>
<h4 className="font-medium text-slate-700 mb-3">KYC Documents Required</h4>
<div className="space-y-2">
{settings.masterData.kycDocuments.map((doc, i) => (
<div key={i} className="flex items-center gap-3 p-2 border border-slate-200 rounded-lg">
<input
type="checkbox"
checked={doc.required}
onChange={(e) => {
const updated = [...settings.masterData.kycDocuments];
updated[i].required = e.target.checked;
setSettings({ ...settings, masterData: { ...settings.masterData, kycDocuments: updated } });
}}
className="w-4 h-4"
/>
<span className="flex-1 text-sm">{doc.name}</span>
<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>
</div>
)}
{activeMasterTab === 'investor' && ( {activeMasterTab === 'investor' && (
<div> <div>
<h4 className="font-medium text-slate-700 mb-3">Investor Documents</h4> <h4 className="font-medium text-slate-700 mb-3">Investor Documents</h4>
@@ -1026,39 +996,18 @@ export default function CompanySettingsPage() {
</div> </div>
))} ))}
</div> </div>
<button className="mt-3 text-sm text-accent hover:underline">+ Add Document</button>
</div> </div>
))} ))}
</div> </div>
)} )}
{activeMasterTab === 'plans' && (
<div>
<h4 className="font-medium text-slate-700 mb-3">Subscription Plans</h4>
<div className="grid lg:grid-cols-2 gap-4">
{settings.masterData.subscriptionPlans.map((plan, i) => (
<div key={i} className="p-4 border border-slate-200 rounded-lg">
<div className="flex justify-between items-center">
<span className="font-medium">{plan.name}</span>
<span className="text-lg font-bold text-accent">৳{plan.price}</span>
</div>
<p className="text-sm text-slate-500">{plan.duration} days</p>
<div className="mt-2 flex flex-wrap gap-1">
{plan.features.map((f, j) => (
<span key={j} className="text-xs px-2 py-0.5 bg-slate-100 rounded">{f}</span>
))}
</div>
</div>
))}
</div>
</div>
)}
</div> </div>
)} )}
{activeTab === 'rental' && ( {activeTab === 'rental' && (
<div className="p-6 space-y-6"> <div className="p-6 space-y-6">
<h3 className="text-lg font-semibold text-slate-800">Rental Policy</h3> <h3 className="text-lg font-semibold text-slate-800">Rental Policy</h3>
<div className="grid lg:grid-cols-2 gap-4"> <div className="grid lg:grid-cols-2 gap-4">
<div> <div>
<label className="text-sm text-slate-600">Minimum Age</label> <label className="text-sm text-slate-600">Minimum Age</label>