feat: replace textareas with RichTextEditor for policy description management

src/app/admin/settings/page.tsx

@@ -808,7 +808,7 @@ setNewSwapName('');
 
   const addPolicyRule = (tab: 'investor' | 'merchant' | 'swapstation') => {
     if (!newPolicyName.trim()) return;
-    const newRule = { name: newPolicyName, description: newPolicyDesc };
+    const newRule = { name: newPolicyName, description: newPolicyDesc || '<p></p>' };
     if (tab === 'investor') {
       setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, investor: { ...settings.companyPolicy.investor, rules: [...settings.companyPolicy.investor.rules, newRule] } } });
     } else if (tab === 'merchant') {
@@ -835,17 +835,18 @@ setNewSwapName('');
   };
 
   const updatePolicyRule = (tab: 'investor' | 'merchant' | 'swapstation', index: number) => {
+    const newDesc = editPolicyDescHtml || editPolicyDesc;
     if (tab === 'investor') {
       const newRules = [...settings.companyPolicy.investor.rules];
-      newRules[index] = { name: editPolicyName, description: editPolicyDesc };
+      newRules[index] = { name: editPolicyName, description: newDesc };
       setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, investor: { ...settings.companyPolicy.investor, rules: newRules } } });
     } else if (tab === 'merchant') {
       const newRules = [...settings.companyPolicy.merchant.rules];
-      newRules[index] = { name: editPolicyName, description: editPolicyDesc };
+      newRules[index] = { name: editPolicyName, description: newDesc };
       setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, merchant: { ...settings.companyPolicy.merchant, rules: newRules } } });
     } else if (tab === 'swapstation') {
       const newRules = [...settings.companyPolicy.swapStation.rules];
-      newRules[index] = { name: editPolicyName, description: editPolicyDesc };
+      newRules[index] = { name: editPolicyName, description: newDesc };
       setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, swapStation: { ...settings.companyPolicy.swapStation, rules: newRules } } });
     }
     setEditingPolicy(null);
@@ -1901,10 +1902,10 @@ setNewSwapName('');
                           {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 Name" />
-                              <textarea value={editPolicyDesc} onChange={(e) => setEditPolicyDesc(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm" rows={2} placeholder="Description" />
+                              <RichTextEditor value={editPolicyDescHtml} onChange={(val) => setEditPolicyDescHtml(val)} placeholder="Policy Description..." minHeight={100} />
                               <div className="flex gap-2">
-                                <button onClick={() => updatePolicyRule('investor', i)} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Save</button>
-                                <button onClick={() => setEditingPolicy(null)} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</button>
+                                <button onClick={() => { updatePolicyRule('investor', i); 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>
                           ) : (
@@ -1916,7 +1917,7 @@ setNewSwapName('');
                                 <p className="text-xs text-slate-500 mt-1">{policy.description}</p>
                               </div>
                               <div className="flex items-center gap-1 ml-2">
-                                <button onClick={() => { setEditingPolicy({ tab: 'investor', index: i }); setEditPolicyName(policy.name); setEditPolicyDesc(policy.description); }} className="p-1 text-slate-400 hover:text-blue-600">
+                                <button onClick={() => { setEditingPolicy({ tab: 'investor', index: i }); setEditPolicyName(policy.name); setEditPolicyDesc(policy.description); setEditPolicyDescHtml(policy.description); }} className="p-1 text-slate-400 hover:text-blue-600">
                                   <Pencil className="w-3.5 h-3.5" />
                                 </button>
                                 <button onClick={() => deletePolicyRule('investor', i)} className="p-1 text-slate-400 hover:text-red-600">
@@ -1931,7 +1932,7 @@ setNewSwapName('');
                     {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 Name" />
-                        <textarea value={newPolicyDesc} onChange={(e) => setNewPolicyDesc(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm mb-2" rows={2} placeholder="Description" />
+                        <RichTextEditor value={newPolicyDesc} onChange={(val) => setNewPolicyDesc(val)} placeholder="Policy Description..." minHeight={100} />
                         <div className="flex gap-2">
                           <button onClick={() => addPolicyRule('investor')} 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>
@@ -1968,10 +1969,10 @@ setNewSwapName('');
                           {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 Name" />
-                              <textarea value={editPolicyDesc} onChange={(e) => setEditPolicyDesc(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm" rows={2} placeholder="Description" />
+                              <RichTextEditor value={editPolicyDescHtml} onChange={(val) => setEditPolicyDescHtml(val)} placeholder="Policy Description..." minHeight={100} />
                               <div className="flex gap-2">
-                                <button onClick={() => updatePolicyRule('merchant', i)} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Save</button>
-                                <button onClick={() => setEditingPolicy(null)} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</button>
+                                <button onClick={() => { updatePolicyRule('merchant', i); 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>
                           ) : (
@@ -1983,7 +1984,7 @@ setNewSwapName('');
                                 <p className="text-xs text-slate-500 mt-1">{policy.description}</p>
                               </div>
                               <div className="flex items-center gap-1 ml-2">
-                                <button onClick={() => { setEditingPolicy({ tab: 'merchant', index: i }); setEditPolicyName(policy.name); setEditPolicyDesc(policy.description); }} className="p-1 text-slate-400 hover:text-blue-600">
+                                <button onClick={() => { setEditingPolicy({ tab: 'merchant', index: i }); setEditPolicyName(policy.name); setEditPolicyDesc(policy.description); setEditPolicyDescHtml(policy.description); }} className="p-1 text-slate-400 hover:text-blue-600">
                                   <Pencil className="w-3.5 h-3.5" />
                                 </button>
                                 <button onClick={() => deletePolicyRule('merchant', i)} className="p-1 text-slate-400 hover:text-red-600">
@@ -1998,7 +1999,7 @@ setNewSwapName('');
                     {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 Name" />
-                        <textarea value={newPolicyDesc} onChange={(e) => setNewPolicyDesc(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm mb-2" rows={2} placeholder="Description" />
+                        <RichTextEditor value={newPolicyDesc} onChange={(val) => setNewPolicyDesc(val)} placeholder="Policy Description..." minHeight={100} />
                         <div className="flex gap-2">
                           <button onClick={() => addPolicyRule('merchant')} 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>
@@ -2035,10 +2036,10 @@ setNewSwapName('');
                           {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 Name" />
-                              <textarea value={editPolicyDesc} onChange={(e) => setEditPolicyDesc(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm" rows={2} placeholder="Description" />
+                              <RichTextEditor value={editPolicyDescHtml} onChange={(val) => setEditPolicyDescHtml(val)} placeholder="Policy Description..." minHeight={100} />
                               <div className="flex gap-2">
-                                <button onClick={() => updatePolicyRule('swapstation', i)} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Save</button>
-                                <button onClick={() => setEditingPolicy(null)} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</button>
+                                <button onClick={() => { updatePolicyRule('swapstation', i); 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>
                           ) : (
@@ -2050,7 +2051,7 @@ setNewSwapName('');
                                 <p className="text-xs text-slate-500 mt-1">{policy.description}</p>
                               </div>
                               <div className="flex items-center gap-1 ml-2">
-                                <button onClick={() => { setEditingPolicy({ tab: 'swapstation', index: i }); setEditPolicyName(policy.name); setEditPolicyDesc(policy.description); }} className="p-1 text-slate-400 hover:text-blue-600">
+                                <button onClick={() => { setEditingPolicy({ tab: 'swapstation', index: i }); setEditPolicyName(policy.name); setEditPolicyDesc(policy.description); setEditPolicyDescHtml(policy.description); }} className="p-1 text-slate-400 hover:text-blue-600">
                                   <Pencil className="w-3.5 h-3.5" />
                                 </button>
                                 <button onClick={() => deletePolicyRule('swapstation', i)} className="p-1 text-slate-400 hover:text-red-600">
@@ -2065,7 +2066,7 @@ setNewSwapName('');
                     {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 Name" />
-                        <textarea value={newPolicyDesc} onChange={(e) => setNewPolicyDesc(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm mb-2" rows={2} placeholder="Description" />
+                        <RichTextEditor value={newPolicyDesc} onChange={(val) => setNewPolicyDesc(val)} placeholder="Policy Description..." minHeight={100} />
                         <div className="flex gap-2">
                           <button onClick={() => addPolicyRule('swapstation')} 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>
@@ -2104,15 +2105,17 @@ setNewSwapName('');
                                 {editingPolicy?.tab === 'rentalType' && editingPolicy?.index === policyIdx ? (
                                   <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 Name" />
-                                    <textarea value={editPolicyDesc} onChange={(e) => setEditPolicyDesc(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm" rows={2} placeholder="Description" />
+                                    <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[idx].rules[policyIdx] = { name: editPolicyName, description: editPolicyDesc };
+                                        const newDesc = editPolicyDescHtml || editPolicyDesc;
+                                        updated[idx].rules[policyIdx] = { name: editPolicyName, description: newDesc };
                                         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)} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</button>
+                                      <button onClick={() => { setEditingPolicy(null); setEditPolicyDescHtml(''); }} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</button>
                                     </div>
                                   </div>
                                 ) : (
@@ -2124,7 +2127,7 @@ setNewSwapName('');
                                       <p className="text-xs text-slate-500 mt-1">{policy.description}</p>
                                     </div>
                                     <div className="flex items-center gap-1 ml-2">
-                                      <button onClick={() => { setEditingPolicy({ tab: 'rentalType', index: policyIdx }); setEditPolicyName(policy.name); setEditPolicyDesc(policy.description); }} className="p-1 text-slate-400 hover:text-blue-600">
+                                      <button onClick={() => { setEditingPolicy({ tab: 'rentalType', index: policyIdx }); setEditPolicyName(policy.name); setEditPolicyDesc(policy.description); setEditPolicyDescHtml(policy.description); }} className="p-1 text-slate-400 hover:text-blue-600">
                                         <Pencil className="w-3.5 h-3.5" />
                                       </button>
                                       <button onClick={() => {
@@ -2146,7 +2149,7 @@ setNewSwapName('');
                           {editingPolicy?.tab === 'rentalTypeAdd' && editingPolicy?.index === idx && (
                             <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 Name" />
-                              <textarea value={newPolicyDesc} onChange={(e) => setNewPolicyDesc(e.target.value)} className="w-full px-2 py-1.5 border border-slate-200 rounded text-sm mb-2" rows={2} placeholder="Description" />
+                              <RichTextEditor value={newPolicyDesc} onChange={(val) => setNewPolicyDesc(val)} placeholder="Policy Description..." minHeight={100} />
                               <div className="flex gap-2">
                                 <button onClick={() => {
                                   const updated = [...(settings.companyPolicy?.rentalTypes || [])];