refactor: replace Master Data tab with standalone KYC Documents tab in company settings
This commit is contained in:
sazzadulalambd
@@ -251,8 +251,8 @@ const initialSettings: CompanySettings = {
|
||||
|
||||
export default function CompanySettingsPage() {
|
||||
const [settings, setSettings] = useState<CompanySettings>(initialSettings);
|
||||
const [activeTab, setActiveTab] = useState<'general' | 'branding' | 'social' | 'integration' | 'landing' | 'master' | 'rental'>('general');
|
||||
const [activeMasterTab, setActiveMasterTab] = useState<'kyc' | 'investor' | 'merchant' | 'swapstation' | 'rental' | 'plans' | 'parts' | 'service'>('kyc');
|
||||
const [activeTab, setActiveTab] = useState<'general' | 'branding' | 'social' | 'integration' | 'landing' | 'kyc' | 'rental'>('general');
|
||||
const [activeMasterTab, setActiveMasterTab] = useState<'investor' | 'merchant' | 'swapstation' | 'rental'>('investor');
|
||||
const [saved, setSaved] = useState(false);
|
||||
|
||||
const handleSave = () => {
|
||||
@@ -266,7 +266,8 @@ export default function CompanySettingsPage() {
|
||||
{ id: 'social', label: 'Social Media', icon: Link2 },
|
||||
{ id: 'integration', label: 'Integrations', icon: Mail },
|
||||
{ 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 },
|
||||
];
|
||||
|
||||
@@ -277,7 +278,7 @@ export default function CompanySettingsPage() {
|
||||
<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
|
||||
<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"
|
||||
>
|
||||
@@ -298,11 +299,10 @@ export default function CompanySettingsPage() {
|
||||
<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'
|
||||
}`}
|
||||
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}
|
||||
@@ -315,7 +315,7 @@ export default function CompanySettingsPage() {
|
||||
{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>
|
||||
@@ -430,7 +430,7 @@ export default function CompanySettingsPage() {
|
||||
</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>
|
||||
@@ -475,7 +475,7 @@ export default function CompanySettingsPage() {
|
||||
{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>
|
||||
@@ -563,13 +563,13 @@ export default function CompanySettingsPage() {
|
||||
<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
|
||||
<div
|
||||
className="px-4 py-2 text-white font-bold"
|
||||
style={{ backgroundColor: settings.primaryColor, borderRadius: settings.borderRadius }}
|
||||
>
|
||||
Primary
|
||||
</div>
|
||||
<div
|
||||
<div
|
||||
className="px-4 py-2 text-white font-bold"
|
||||
style={{ backgroundColor: settings.secondaryColor, borderRadius: settings.borderRadius }}
|
||||
>
|
||||
@@ -583,7 +583,7 @@ export default function CompanySettingsPage() {
|
||||
{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>
|
||||
@@ -647,7 +647,7 @@ export default function CompanySettingsPage() {
|
||||
{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>
|
||||
@@ -712,11 +712,10 @@ export default function CompanySettingsPage() {
|
||||
<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'
|
||||
}`}
|
||||
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>
|
||||
@@ -725,7 +724,7 @@ export default function CompanySettingsPage() {
|
||||
</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>
|
||||
@@ -773,7 +772,7 @@ export default function CompanySettingsPage() {
|
||||
{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>
|
||||
@@ -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">
|
||||
<h4 className="text-2xl font-bold text-white">{settings.heroData.title}</h4>
|
||||
<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"
|
||||
style={{ borderRadius: settings.borderRadius }}
|
||||
>
|
||||
@@ -852,59 +851,30 @@ export default function CompanySettingsPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'master' && (
|
||||
{activeTab === 'kyc' && (
|
||||
<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">
|
||||
{[
|
||||
{ id: 'kyc', label: 'KYC Documents' },
|
||||
{ id: 'investor', label: 'Investor' },
|
||||
{ id: 'merchant', label: 'Merchant' },
|
||||
{ id: 'swapstation', label: 'Swap Station' },
|
||||
{ id: 'rental', label: 'Rental Types' },
|
||||
{ id: 'plans', label: 'Subscription Plans' },
|
||||
].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
|
||||
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 === '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' && (
|
||||
<div>
|
||||
<h4 className="font-medium text-slate-700 mb-3">Investor Documents</h4>
|
||||
@@ -1026,39 +996,18 @@ export default function CompanySettingsPage() {
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button className="mt-3 text-sm text-accent hover:underline">+ Add Document</button>
|
||||
</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>
|
||||
)}
|
||||
|
||||
{activeTab === 'rental' && (
|
||||
<div className="p-6 space-y-6">
|
||||
<h3 className="text-lg font-semibold text-slate-800">Rental Policy</h3>
|
||||
|
||||
|
||||
<div className="grid lg:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="text-sm text-slate-600">Minimum Age</label>
|
||||
|
||||
Reference in New Issue
Block a user