From 0616faffe17c511a1787f34003d36cd89bb7444d Mon Sep 17 00:00:00 2001
From: sazzadulalambd <sazzad.sua@gmail.com>
Date: Sun, 26 Apr 2026 18:41:54 +0600
Subject: [PATCH] refactor: replace Master Data tab with standalone KYC
 Documents tab in company settings

---
 src/app/admin/settings/page.tsx | 111 +++++++++-----------------------
 1 file changed, 30 insertions(+), 81 deletions(-)

diff --git a/src/app/admin/settings/page.tsx b/src/app/admin/settings/page.tsx
index 641f181..1759bba 100644
--- a/src/app/admin/settings/page.tsx
+++ b/src/app/admin/settings/page.tsx
@@ -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>