refactor: move policy addition forms to follow the header in settings tabs

src/app/admin/settings/page.tsx

@@ -1904,6 +1904,22 @@ export default function CompanySettingsPage() {
                       <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">
@@ -1946,22 +1962,6 @@ export default function CompanySettingsPage() {
                       </div>
                     ))}
                   </div>
-                  {showAddPolicy && (
-                    <div className="mt-2 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">
-                        <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>
               )}
 
@@ -1973,6 +1973,22 @@ export default function CompanySettingsPage() {
                       <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">
@@ -2015,22 +2031,6 @@ export default function CompanySettingsPage() {
                       </div>
                     ))}
                   </div>
-                  {showAddPolicy && (
-                    <div className="mt-2 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">
-                        <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>
               )}
 
@@ -2042,6 +2042,22 @@ export default function CompanySettingsPage() {
                       <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">
@@ -2084,22 +2100,6 @@ export default function CompanySettingsPage() {
                       </div>
                     ))}
                   </div>
-                  {showAddPolicy && (
-                    <div className="mt-2 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">
-                        <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>
               )}
 
@@ -2117,6 +2117,24 @@ export default function CompanySettingsPage() {
                       <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">
@@ -2160,24 +2178,6 @@ export default function CompanySettingsPage() {
                       </div>
                     ))}
                   </div>
-                  {showAddPolicy && (
-                    <div className="mt-2 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">
-                        <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>
               )}
             </div>