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

refactor: restructure company policy schema to use arrays of objects and update rental type categorization logic

Browse Source
This commit is contained in:
sazzadulalambd
2026-05-06 01:56:22 +06:00
parent 3c0abd5606
commit 29ba783b53
1 changed files with 393 additions and 359 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -73,10 +73,14 @@ interface CompanySettings {
parts: { id: string; name: string; price?: number; minPrice?: number; maxPrice?: number; inStock: number }[]; parts: { id: string; name: string; price?: number; minPrice?: number; maxPrice?: number; inStock: number }[];
serviceCenters: { id: string; name: string; address: string; phone: string; rating: number }[]; serviceCenters: { id: string; name: string; address: string; phone: string; rating: number }[];
companyPolicy: { companyPolicy: {
investor: { title: string; description: string; rules: { name: string; description: string }[] }; investor: { title: string; description: string }[];
merchant: { title: string; description: string; rules: { name: string; description: string }[] }; merchant: { title: string; description: string }[];
swapStation: { title: string; description: string; rules: { name: string; description: string }[] }; swapStation: { title: string; description: string }[];
rentalTypes: { type: string; name: string; title: string; description: string; rules: { name: string; description: string }[]; enabled: boolean }[]; rentalTypes: {
single: { title: string; description: string }[];
shared: { title: string; description: string }[];
renttoown: { title: string; description: string }[];
};
}; };
rentalPolicy: { rentalPolicy: {
minAge: number; minAge: number;
@@ -645,7 +649,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' | 'kyc' | 'parts' | 'companyPolicy' | 'plans' | 'investment' | 'swapstation' | 'riderrequest'>('general'); const [activeTab, setActiveTab] = useState<'general' | 'branding' | 'social' | 'integration' | 'landing' | 'kyc' | 'parts' | 'companyPolicy' | 'plans' | 'investment' | 'swapstation' | 'riderrequest'>('general');
const [activeMasterTab, setActiveMasterTab] = useState<'investor' | 'merchant' | 'swapstation' | 'rental' | 'rentalType'>('investor'); const [activeMasterTab, setActiveMasterTab] = useState<'investor' | 'merchant' | 'swapstation' | 'rentalType'>('investor');
const [activeRentalTypeTab, setActiveRentalTypeTab] = useState<'single' | 'shared' | 'renttoown'>('single');
const [saved, setSaved] = useState(false); const [saved, setSaved] = useState(false);
const [activePlanTab, setActivePlanTab] = useState<'singleRent' | 'rentToOwn' | 'shareEv'>('singleRent'); const [activePlanTab, setActivePlanTab] = useState<'singleRent' | 'rentToOwn' | 'shareEv'>('singleRent');
const [addDocType, setAddDocType] = useState<'investor' | 'merchant' | 'swapstation' | 'rental' | null>(null); const [addDocType, setAddDocType] = useState<'investor' | 'merchant' | 'swapstation' | 'rental' | null>(null);
@@ -784,13 +789,13 @@ export default function CompanySettingsPage() {
const addPolicyRule = (tab: 'investor' | 'merchant' | 'swapstation') => { const addPolicyRule = (tab: 'investor' | 'merchant' | 'swapstation') => {
if (!newPolicyName.trim()) return; if (!newPolicyName.trim()) return;
const newRule = { name: newPolicyName, description: newPolicyDesc || '<p></p>' }; const newRule = { title: newPolicyName, description: newPolicyDesc || '<p></p>' };
if (tab === 'investor') { if (tab === 'investor') {
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, investor: { ...settings.companyPolicy.investor, rules: [...settings.companyPolicy.investor.rules, newRule] } } }); setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, investor: [...settings.companyPolicy.investor, newRule] } });
} else if (tab === 'merchant') { } else if (tab === 'merchant') {
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, merchant: { ...settings.companyPolicy.merchant, rules: [...settings.companyPolicy.merchant.rules, newRule] } } }); setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, merchant: [...settings.companyPolicy.merchant, newRule] } });
} else if (tab === 'swapstation') { } else if (tab === 'swapstation') {
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, swapStation: { ...settings.companyPolicy.swapStation, rules: [...settings.companyPolicy.swapStation.rules, newRule] } } }); setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, swapStation: [...settings.companyPolicy.swapStation, newRule] } });
} }
setNewPolicyName(''); setNewPolicyName('');
setNewPolicyDesc(''); setNewPolicyDesc('');
@@ -799,31 +804,31 @@ export default function CompanySettingsPage() {
const deletePolicyRule = (tab: 'investor' | 'merchant' | 'swapstation', index: number) => { const deletePolicyRule = (tab: 'investor' | 'merchant' | 'swapstation', index: number) => {
if (tab === 'investor') { if (tab === 'investor') {
const newRules = settings.companyPolicy.investor.rules.filter((_, i) => i !== index); const newRules = settings.companyPolicy.investor.filter((_, i) => i !== index);
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, investor: { ...settings.companyPolicy.investor, rules: newRules } } }); setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, investor: newRules } });
} else if (tab === 'merchant') { } else if (tab === 'merchant') {
const newRules = settings.companyPolicy.merchant.rules.filter((_, i) => i !== index); const newRules = settings.companyPolicy.merchant.filter((_, i) => i !== index);
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, merchant: { ...settings.companyPolicy.merchant, rules: newRules } } }); setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, merchant: newRules } });
} else if (tab === 'swapstation') { } else if (tab === 'swapstation') {
const newRules = settings.companyPolicy.swapStation.rules.filter((_, i) => i !== index); const newRules = settings.companyPolicy.swapStation.filter((_, i) => i !== index);
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, swapStation: { ...settings.companyPolicy.swapStation, rules: newRules } } }); setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, swapStation: newRules } });
} }
}; };
const updatePolicyRule = (tab: 'investor' | 'merchant' | 'swapstation', index: number) => { const updatePolicyRule = (tab: 'investor' | 'merchant' | 'swapstation', index: number) => {
const newDesc = editPolicyDescHtml || editPolicyDesc; const newDesc = editPolicyDescHtml || editPolicyDesc;
if (tab === 'investor') { if (tab === 'investor') {
const newRules = [...settings.companyPolicy.investor.rules]; const newRules = [...settings.companyPolicy.investor];
newRules[index] = { name: editPolicyName, description: newDesc }; newRules[index] = { title: editPolicyName, description: newDesc };
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, investor: { ...settings.companyPolicy.investor, rules: newRules } } }); setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, investor: newRules } });
} else if (tab === 'merchant') { } else if (tab === 'merchant') {
const newRules = [...settings.companyPolicy.merchant.rules]; const newRules = [...settings.companyPolicy.merchant];
newRules[index] = { name: editPolicyName, description: newDesc }; newRules[index] = { title: editPolicyName, description: newDesc };
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, merchant: { ...settings.companyPolicy.merchant, rules: newRules } } }); setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, merchant: newRules } });
} else if (tab === 'swapstation') { } else if (tab === 'swapstation') {
const newRules = [...settings.companyPolicy.swapStation.rules]; const newRules = [...settings.companyPolicy.swapStation];
newRules[index] = { name: editPolicyName, description: newDesc }; newRules[index] = { title: editPolicyName, description: newDesc };
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, swapStation: { ...settings.companyPolicy.swapStation, rules: newRules } } }); setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, swapStation: newRules } });
} }
setEditingPolicy(null); setEditingPolicy(null);
}; };
@@ -1699,7 +1704,7 @@ export default function CompanySettingsPage() {
</div> </div>
)} )}
{activeMasterTab === 'rental' && ( {activeMasterTab === 'rentalType' && (
<div className="space-y-6"> <div className="space-y-6">
{settings.masterData.rentalDocuments.map((rental, ri) => ( {settings.masterData.rentalDocuments.map((rental, ri) => (
<div key={rental.type} className="border border-slate-200 rounded-lg p-4"> <div key={rental.type} className="border border-slate-200 rounded-lg p-4">
@@ -1854,7 +1859,6 @@ export default function CompanySettingsPage() {
{activeMasterTab === 'investor' && ( {activeMasterTab === 'investor' && (
<div className="space-y-4"> <div className="space-y-4">
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<label className="text-sm text-slate-600 font-medium">Policy List</label> <label className="text-sm text-slate-600 font-medium">Policy List</label>
<button onClick={() => setShowAddPolicy(true)} className="text-xs text-blue-600 hover:text-blue-700 flex items-center gap-1"> <button onClick={() => setShowAddPolicy(true)} className="text-xs text-blue-600 hover:text-blue-700 flex items-center gap-1">
@@ -1862,14 +1866,20 @@ export default function CompanySettingsPage() {
</button> </button>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
{(settings.companyPolicy?.investor?.rules || []).map((policy, i) => ( {(settings.companyPolicy?.investor || []).map((policy, i) => (
<div key={i} className="p-3 bg-slate-50 rounded-lg border border-slate-200"> <div key={i} className="p-3 bg-slate-50 rounded-lg border border-slate-200">
{editingPolicy?.tab === 'investor' && editingPolicy?.index === i ? ( {editingPolicy?.tab === 'investor' && editingPolicy?.index === i ? (
<div className="space-y-2"> <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" /> <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 Title" />
<RichTextEditor value={editPolicyDescHtml} onChange={(val) => setEditPolicyDescHtml(val)} placeholder="Policy Description..." minHeight={100} /> <RichTextEditor value={editPolicyDescHtml} onChange={(val) => setEditPolicyDescHtml(val)} placeholder="Policy Description..." minHeight={100} />
<div className="flex gap-2"> <div className="flex gap-2">
<button onClick={() => { updatePolicyRule('investor', i); setEditPolicyDescHtml(''); }} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Save</button> <button onClick={() => {
const updated = [...settings.companyPolicy.investor];
updated[i] = { title: editPolicyName, description: editPolicyDescHtml };
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, investor: updated } });
setEditingPolicy(null);
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> <button onClick={() => { setEditingPolicy(null); setEditPolicyDescHtml(''); }} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</button>
</div> </div>
</div> </div>
@@ -1877,15 +1887,18 @@ export default function CompanySettingsPage() {
<div className="flex items-start justify-between"> <div className="flex items-start justify-between">
<div className="flex-1"> <div className="flex-1">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-sm font-medium text-slate-700">{policy.name}</span> <span className="text-sm font-medium text-slate-700">{policy.title}</span>
</div> </div>
<p className="text-xs text-slate-500 mt-1">{policy.description}</p> <div className="text-xs text-slate-500 mt-1 prose prose-sm max-w-none" dangerouslySetInnerHTML={{ __html: policy.description }} />
</div> </div>
<div className="flex items-center gap-1 ml-2"> <div className="flex items-center gap-1 ml-2">
<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"> <button onClick={() => { setEditingPolicy({ tab: 'investor', index: i }); setEditPolicyName(policy.title); setEditPolicyDescHtml(policy.description); }} className="p-1 text-slate-400 hover:text-blue-600">
<Pencil className="w-3.5 h-3.5" /> <Pencil className="w-3.5 h-3.5" />
</button> </button>
<button onClick={() => deletePolicyRule('investor', i)} className="p-1 text-slate-400 hover:text-red-600"> <button onClick={() => {
const updated = settings.companyPolicy.investor.filter((_, idx) => idx !== i);
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, investor: updated } });
}} className="p-1 text-slate-400 hover:text-red-600">
<Trash2 className="w-3.5 h-3.5" /> <Trash2 className="w-3.5 h-3.5" />
</button> </button>
</div> </div>
@@ -1896,21 +1909,25 @@ export default function CompanySettingsPage() {
</div> </div>
{showAddPolicy && ( {showAddPolicy && (
<div className="mt-2 p-3 bg-white rounded-lg border border-blue-200"> <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" /> <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} /> <RichTextEditor value={newPolicyDesc} onChange={(val) => setNewPolicyDesc(val)} placeholder="Policy Description..." minHeight={100} />
<div className="flex gap-2"> <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={() => {
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> <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>
)} )}
</div> </div>
)} )}
{activeMasterTab === 'merchant' && ( {activeMasterTab === 'merchant' && (
<div className="space-y-4"> <div className="space-y-4">
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<label className="text-sm text-slate-600 font-medium">Policy List</label> <label className="text-sm text-slate-600 font-medium">Policy List</label>
<button onClick={() => setShowAddPolicy(true)} className="text-xs text-blue-600 hover:text-blue-700 flex items-center gap-1"> <button onClick={() => setShowAddPolicy(true)} className="text-xs text-blue-600 hover:text-blue-700 flex items-center gap-1">
@@ -1918,14 +1935,20 @@ export default function CompanySettingsPage() {
</button> </button>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
{(settings.companyPolicy?.merchant?.rules || []).map((policy, i) => ( {(settings.companyPolicy?.merchant || []).map((policy, i) => (
<div key={i} className="p-3 bg-slate-50 rounded-lg border border-slate-200"> <div key={i} className="p-3 bg-slate-50 rounded-lg border border-slate-200">
{editingPolicy?.tab === 'merchant' && editingPolicy?.index === i ? ( {editingPolicy?.tab === 'merchant' && editingPolicy?.index === i ? (
<div className="space-y-2"> <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" /> <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 Title" />
<RichTextEditor value={editPolicyDescHtml} onChange={(val) => setEditPolicyDescHtml(val)} placeholder="Policy Description..." minHeight={100} /> <RichTextEditor value={editPolicyDescHtml} onChange={(val) => setEditPolicyDescHtml(val)} placeholder="Policy Description..." minHeight={100} />
<div className="flex gap-2"> <div className="flex gap-2">
<button onClick={() => { updatePolicyRule('merchant', i); setEditPolicyDescHtml(''); }} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Save</button> <button onClick={() => {
const updated = [...settings.companyPolicy.merchant];
updated[i] = { title: editPolicyName, description: editPolicyDescHtml };
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, merchant: updated } });
setEditingPolicy(null);
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> <button onClick={() => { setEditingPolicy(null); setEditPolicyDescHtml(''); }} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</button>
</div> </div>
</div> </div>
@@ -1933,15 +1956,18 @@ export default function CompanySettingsPage() {
<div className="flex items-start justify-between"> <div className="flex items-start justify-between">
<div className="flex-1"> <div className="flex-1">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-sm font-medium text-slate-700">{policy.name}</span> <span className="text-sm font-medium text-slate-700">{policy.title}</span>
</div> </div>
<p className="text-xs text-slate-500 mt-1">{policy.description}</p> <div className="text-xs text-slate-500 mt-1 prose prose-sm max-w-none" dangerouslySetInnerHTML={{ __html: policy.description }} />
</div> </div>
<div className="flex items-center gap-1 ml-2"> <div className="flex items-center gap-1 ml-2">
<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"> <button onClick={() => { setEditingPolicy({ tab: 'merchant', index: i }); setEditPolicyName(policy.title); setEditPolicyDescHtml(policy.description); }} className="p-1 text-slate-400 hover:text-blue-600">
<Pencil className="w-3.5 h-3.5" /> <Pencil className="w-3.5 h-3.5" />
</button> </button>
<button onClick={() => deletePolicyRule('merchant', i)} className="p-1 text-slate-400 hover:text-red-600"> <button onClick={() => {
const updated = settings.companyPolicy.merchant.filter((_, idx) => idx !== i);
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, merchant: updated } });
}} className="p-1 text-slate-400 hover:text-red-600">
<Trash2 className="w-3.5 h-3.5" /> <Trash2 className="w-3.5 h-3.5" />
</button> </button>
</div> </div>
@@ -1952,21 +1978,25 @@ export default function CompanySettingsPage() {
</div> </div>
{showAddPolicy && ( {showAddPolicy && (
<div className="mt-2 p-3 bg-white rounded-lg border border-blue-200"> <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" /> <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} /> <RichTextEditor value={newPolicyDesc} onChange={(val) => setNewPolicyDesc(val)} placeholder="Policy Description..." minHeight={100} />
<div className="flex gap-2"> <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={() => {
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> <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>
)} )}
</div> </div>
)} )}
{activeMasterTab === 'swapstation' && ( {activeMasterTab === 'swapstation' && (
<div className="space-y-4"> <div className="space-y-4">
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<label className="text-sm text-slate-600 font-medium">Policy List</label> <label className="text-sm text-slate-600 font-medium">Policy List</label>
<button onClick={() => setShowAddPolicy(true)} className="text-xs text-blue-600 hover:text-blue-700 flex items-center gap-1"> <button onClick={() => setShowAddPolicy(true)} className="text-xs text-blue-600 hover:text-blue-700 flex items-center gap-1">
@@ -1974,14 +2004,20 @@ export default function CompanySettingsPage() {
</button> </button>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
{(settings.companyPolicy?.swapStation?.rules || []).map((policy, i) => ( {(settings.companyPolicy?.swapStation || []).map((policy, i) => (
<div key={i} className="p-3 bg-slate-50 rounded-lg border border-slate-200"> <div key={i} className="p-3 bg-slate-50 rounded-lg border border-slate-200">
{editingPolicy?.tab === 'swapstation' && editingPolicy?.index === i ? ( {editingPolicy?.tab === 'swapstation' && editingPolicy?.index === i ? (
<div className="space-y-2"> <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" /> <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 Title" />
<RichTextEditor value={editPolicyDescHtml} onChange={(val) => setEditPolicyDescHtml(val)} placeholder="Policy Description..." minHeight={100} /> <RichTextEditor value={editPolicyDescHtml} onChange={(val) => setEditPolicyDescHtml(val)} placeholder="Policy Description..." minHeight={100} />
<div className="flex gap-2"> <div className="flex gap-2">
<button onClick={() => { updatePolicyRule('swapstation', i); setEditPolicyDescHtml(''); }} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Save</button> <button onClick={() => {
const updated = [...settings.companyPolicy.swapStation];
updated[i] = { title: editPolicyName, description: editPolicyDescHtml };
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, swapStation: updated } });
setEditingPolicy(null);
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> <button onClick={() => { setEditingPolicy(null); setEditPolicyDescHtml(''); }} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</button>
</div> </div>
</div> </div>
@@ -1989,15 +2025,18 @@ export default function CompanySettingsPage() {
<div className="flex items-start justify-between"> <div className="flex items-start justify-between">
<div className="flex-1"> <div className="flex-1">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-sm font-medium text-slate-700">{policy.name}</span> <span className="text-sm font-medium text-slate-700">{policy.title}</span>
</div> </div>
<p className="text-xs text-slate-500 mt-1">{policy.description}</p> <div className="text-xs text-slate-500 mt-1 prose prose-sm max-w-none" dangerouslySetInnerHTML={{ __html: policy.description }} />
</div> </div>
<div className="flex items-center gap-1 ml-2"> <div className="flex items-center gap-1 ml-2">
<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"> <button onClick={() => { setEditingPolicy({ tab: 'swapstation', index: i }); setEditPolicyName(policy.title); setEditPolicyDescHtml(policy.description); }} className="p-1 text-slate-400 hover:text-blue-600">
<Pencil className="w-3.5 h-3.5" /> <Pencil className="w-3.5 h-3.5" />
</button> </button>
<button onClick={() => deletePolicyRule('swapstation', i)} className="p-1 text-slate-400 hover:text-red-600"> <button onClick={() => {
const updated = settings.companyPolicy.swapStation.filter((_, idx) => idx !== i);
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, swapStation: updated } });
}} className="p-1 text-slate-400 hover:text-red-600">
<Trash2 className="w-3.5 h-3.5" /> <Trash2 className="w-3.5 h-3.5" />
</button> </button>
</div> </div>
@@ -2008,42 +2047,48 @@ export default function CompanySettingsPage() {
</div> </div>
{showAddPolicy && ( {showAddPolicy && (
<div className="mt-2 p-3 bg-white rounded-lg border border-blue-200"> <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" /> <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} /> <RichTextEditor value={newPolicyDesc} onChange={(val) => setNewPolicyDesc(val)} placeholder="Policy Description..." minHeight={100} />
<div className="flex gap-2"> <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={() => {
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> <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>
)} )}
</div> </div>
)} )}
{activeMasterTab === 'rentalType' && ( {activeMasterTab === 'rentalType' && (
<div className="space-y-6"> <div className="space-y-4">
{(settings.companyPolicy?.rentalTypes || []).map((rtype, idx) => ( <div className="flex gap-2 border-b border-slate-200">
<div key={idx} className="border border-slate-200 rounded-lg overflow-hidden"> <button onClick={() => setActiveRentalTypeTab('single')} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activeRentalTypeTab === 'single' ? 'border-blue-500 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>Rental (Single)</button>
<div className="bg-slate-50 px-4 py-3"> <button onClick={() => setActiveRentalTypeTab('shared')} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activeRentalTypeTab === 'shared' ? 'border-blue-500 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>Rental (2 Person Shared)</button>
<h4 className="font-medium text-slate-700">{rtype.name}</h4> <button onClick={() => setActiveRentalTypeTab('renttoown')} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activeRentalTypeTab === 'renttoown' ? 'border-blue-500 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>Rent-to-Own</button>
</div> </div>
<div className="p-4 space-y-4">
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<label className="text-sm text-slate-600 font-medium">Policy List</label> <label className="text-sm text-slate-600 font-medium">Policy List</label>
<button onClick={() => setShowAddPolicy(true)} className="text-xs text-blue-600 hover:text-blue-700 flex items-center gap-1">
<Plus className="w-3 h-3" /> Add Policy
</button>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
{(rtype.rules || []).map((policy, policyIdx) => ( {(settings.companyPolicy?.rentalTypes[activeRentalTypeTab] || []).map((policy, i) => (
<div key={policyIdx} className="p-3 bg-slate-50 rounded-lg border border-slate-200"> <div key={i} className="p-3 bg-slate-50 rounded-lg border border-slate-200">
{editingPolicy?.tab === 'rentalType' && editingPolicy?.index === policyIdx ? ( {editingPolicy?.tab === 'rentalType' && editingPolicy?.index === i ? (
<div className="space-y-2"> <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" /> <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 Title" />
<RichTextEditor value={editPolicyDescHtml} onChange={(val) => setEditPolicyDescHtml(val)} placeholder="Policy Description..." minHeight={100} /> <RichTextEditor value={editPolicyDescHtml} onChange={(val) => setEditPolicyDescHtml(val)} placeholder="Policy Description..." minHeight={100} />
<div className="flex gap-2"> <div className="flex gap-2">
<button onClick={() => { <button onClick={() => {
const updated = [...(settings.companyPolicy?.rentalTypes || [])]; const updated = { ...settings.companyPolicy.rentalTypes };
const newDesc = editPolicyDescHtml || editPolicyDesc; updated[activeRentalTypeTab][i] = { title: editPolicyName, description: editPolicyDescHtml };
updated[idx].rules[policyIdx] = { name: editPolicyName, description: newDesc };
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, rentalTypes: updated } }); setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, rentalTypes: updated } });
setEditingPolicy(null); setEditingPolicy(null);
setEditPolicyDescHtml(''); setEditPolicyDescHtml('');
@@ -2055,17 +2100,17 @@ export default function CompanySettingsPage() {
<div className="flex items-start justify-between"> <div className="flex items-start justify-between">
<div className="flex-1"> <div className="flex-1">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-sm font-medium text-slate-700">{policy.name}</span> <span className="text-sm font-medium text-slate-700">{policy.title}</span>
</div> </div>
<p className="text-xs text-slate-500 mt-1">{policy.description}</p> <div className="text-xs text-slate-500 mt-1 prose prose-sm max-w-none" dangerouslySetInnerHTML={{ __html: policy.description }} />
</div> </div>
<div className="flex items-center gap-1 ml-2"> <div className="flex items-center gap-1 ml-2">
<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"> <button onClick={() => { setEditingPolicy({ tab: 'rentalType', index: i }); setEditPolicyName(policy.title); setEditPolicyDescHtml(policy.description); }} className="p-1 text-slate-400 hover:text-blue-600">
<Pencil className="w-3.5 h-3.5" /> <Pencil className="w-3.5 h-3.5" />
</button> </button>
<button onClick={() => { <button onClick={() => {
const updated = [...(settings.companyPolicy?.rentalTypes || [])]; const updated = { ...settings.companyPolicy.rentalTypes };
updated[idx].rules = updated[idx].rules?.filter((_, i) => i !== policyIdx); updated[activeRentalTypeTab] = updated[activeRentalTypeTab].filter((_, idx) => idx !== i);
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, rentalTypes: updated } }); setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, rentalTypes: updated } });
}} className="p-1 text-slate-400 hover:text-red-600"> }} className="p-1 text-slate-400 hover:text-red-600">
<Trash2 className="w-3.5 h-3.5" /> <Trash2 className="w-3.5 h-3.5" />
@@ -2076,41 +2121,30 @@ export default function CompanySettingsPage() {
</div> </div>
))} ))}
</div> </div>
<button onClick={() => setEditingPolicy({ tab: 'rentalTypeAdd', index: idx })} className="mt-2 text-xs text-blue-600 hover:text-blue-700 flex items-center gap-1"> {showAddPolicy && (
<Plus className="w-3 h-3" /> Add Policy
</button>
{editingPolicy?.tab === 'rentalTypeAdd' && editingPolicy?.index === idx && (
<div className="mt-2 p-3 bg-white rounded-lg border border-blue-200"> <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" /> <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} /> <RichTextEditor value={newPolicyDesc} onChange={(val) => setNewPolicyDesc(val)} placeholder="Policy Description..." minHeight={100} />
<div className="flex gap-2"> <div className="flex gap-2">
<button onClick={() => { <button onClick={() => {
const updated = [...(settings.companyPolicy?.rentalTypes || [])]; if (!newPolicyName.trim()) return;
updated[idx].rules = [...(updated[idx].rules || []), { name: newPolicyName, description: newPolicyDesc }]; const updated = { ...settings.companyPolicy.rentalTypes };
updated[activeRentalTypeTab] = [...updated[activeRentalTypeTab], { title: newPolicyName, description: newPolicyDesc }];
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, rentalTypes: updated } }); setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, rentalTypes: updated } });
setNewPolicyName(''); setNewPolicyName('');
setNewPolicyDesc(''); setNewPolicyDesc('');
setEditingPolicy(null); setShowAddPolicy(false);
}} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Add</button> }} className="px-2 py-1 bg-blue-600 text-white rounded text-xs">Add</button>
<button onClick={() => { setEditingPolicy(null); setNewPolicyName(''); setNewPolicyDesc(''); }} className="px-2 py-1 bg-slate-200 text-slate-600 rounded text-xs">Cancel</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>
)} )}
</div> </div>
</div>
))}
<div className="flex justify-end">
<button onClick={handleSave} className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700">Save Changes</button>
</div>
</div>
)} )}
</div> </div>
) )}
}
{ {activeTab === 'plans' && (
activeTab === 'plans' && (
<div className="p-6 space-y-6"> <div className="p-6 space-y-6">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h3 className="text-lg font-semibold text-slate-800">Plan Selection</h3> <h3 className="text-lg font-semibold text-slate-800">Plan Selection</h3>