refactor: restructure company policy schema to use arrays of objects and update rental type categorization logic
This commit is contained in:
sazzadulalambd
@@ -73,10 +73,14 @@ interface CompanySettings {
|
||||
parts: { id: string; name: string; price?: number; minPrice?: number; maxPrice?: number; inStock: number }[];
|
||||
serviceCenters: { id: string; name: string; address: string; phone: string; rating: number }[];
|
||||
companyPolicy: {
|
||||
investor: { title: string; description: string; rules: { name: string; description: string }[] };
|
||||
merchant: { title: string; description: string; rules: { name: string; description: string }[] };
|
||||
swapStation: { title: string; description: string; rules: { name: string; description: string }[] };
|
||||
rentalTypes: { type: string; name: string; title: string; description: string; rules: { name: string; description: string }[]; enabled: boolean }[];
|
||||
investor: { title: string; description: string }[];
|
||||
merchant: { title: string; description: string }[];
|
||||
swapStation: { title: string; description: string }[];
|
||||
rentalTypes: {
|
||||
single: { title: string; description: string }[];
|
||||
shared: { title: string; description: string }[];
|
||||
renttoown: { title: string; description: string }[];
|
||||
};
|
||||
};
|
||||
rentalPolicy: {
|
||||
minAge: number;
|
||||
@@ -645,7 +649,8 @@ const initialSettings: CompanySettings = {
|
||||
export default function CompanySettingsPage() {
|
||||
const [settings, setSettings] = useState<CompanySettings>(initialSettings);
|
||||
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 [activePlanTab, setActivePlanTab] = useState<'singleRent' | 'rentToOwn' | 'shareEv'>('singleRent');
|
||||
const [addDocType, setAddDocType] = useState<'investor' | 'merchant' | 'swapstation' | 'rental' | null>(null);
|
||||
@@ -784,13 +789,13 @@ export default function CompanySettingsPage() {
|
||||
|
||||
const addPolicyRule = (tab: 'investor' | 'merchant' | 'swapstation') => {
|
||||
if (!newPolicyName.trim()) return;
|
||||
const newRule = { name: newPolicyName, description: newPolicyDesc || '<p></p>' };
|
||||
const newRule = { title: newPolicyName, description: newPolicyDesc || '<p></p>' };
|
||||
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') {
|
||||
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') {
|
||||
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('');
|
||||
setNewPolicyDesc('');
|
||||
@@ -799,31 +804,31 @@ export default function CompanySettingsPage() {
|
||||
|
||||
const deletePolicyRule = (tab: 'investor' | 'merchant' | 'swapstation', index: number) => {
|
||||
if (tab === 'investor') {
|
||||
const newRules = settings.companyPolicy.investor.rules.filter((_, i) => i !== index);
|
||||
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, investor: { ...settings.companyPolicy.investor, rules: newRules } } });
|
||||
const newRules = settings.companyPolicy.investor.filter((_, i) => i !== index);
|
||||
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, investor: newRules } });
|
||||
} else if (tab === 'merchant') {
|
||||
const newRules = settings.companyPolicy.merchant.rules.filter((_, i) => i !== index);
|
||||
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, merchant: { ...settings.companyPolicy.merchant, rules: newRules } } });
|
||||
const newRules = settings.companyPolicy.merchant.filter((_, i) => i !== index);
|
||||
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, merchant: newRules } });
|
||||
} else if (tab === 'swapstation') {
|
||||
const newRules = settings.companyPolicy.swapStation.rules.filter((_, i) => i !== index);
|
||||
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, swapStation: { ...settings.companyPolicy.swapStation, rules: newRules } } });
|
||||
const newRules = settings.companyPolicy.swapStation.filter((_, i) => i !== index);
|
||||
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, swapStation: newRules } });
|
||||
}
|
||||
};
|
||||
|
||||
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: newDesc };
|
||||
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, investor: { ...settings.companyPolicy.investor, rules: newRules } } });
|
||||
const newRules = [...settings.companyPolicy.investor];
|
||||
newRules[index] = { title: editPolicyName, description: newDesc };
|
||||
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, investor: newRules } });
|
||||
} else if (tab === 'merchant') {
|
||||
const newRules = [...settings.companyPolicy.merchant.rules];
|
||||
newRules[index] = { name: editPolicyName, description: newDesc };
|
||||
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, merchant: { ...settings.companyPolicy.merchant, rules: newRules } } });
|
||||
const newRules = [...settings.companyPolicy.merchant];
|
||||
newRules[index] = { title: editPolicyName, description: newDesc };
|
||||
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, merchant: newRules } });
|
||||
} else if (tab === 'swapstation') {
|
||||
const newRules = [...settings.companyPolicy.swapStation.rules];
|
||||
newRules[index] = { name: editPolicyName, description: newDesc };
|
||||
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, swapStation: { ...settings.companyPolicy.swapStation, rules: newRules } } });
|
||||
const newRules = [...settings.companyPolicy.swapStation];
|
||||
newRules[index] = { title: editPolicyName, description: newDesc };
|
||||
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, swapStation: newRules } });
|
||||
}
|
||||
setEditingPolicy(null);
|
||||
};
|
||||
@@ -1699,7 +1704,7 @@ export default function CompanySettingsPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeMasterTab === 'rental' && (
|
||||
{activeMasterTab === 'rentalType' && (
|
||||
<div className="space-y-6">
|
||||
{settings.masterData.rentalDocuments.map((rental, ri) => (
|
||||
<div key={rental.type} className="border border-slate-200 rounded-lg p-4">
|
||||
@@ -1854,7 +1859,6 @@ export default function CompanySettingsPage() {
|
||||
|
||||
{activeMasterTab === 'investor' && (
|
||||
<div className="space-y-4">
|
||||
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<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">
|
||||
@@ -1862,14 +1866,20 @@ export default function CompanySettingsPage() {
|
||||
</button>
|
||||
</div>
|
||||
<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">
|
||||
{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" />
|
||||
<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} />
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1877,15 +1887,18 @@ export default function CompanySettingsPage() {
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<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>
|
||||
<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 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" />
|
||||
</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" />
|
||||
</button>
|
||||
</div>
|
||||
@@ -1896,21 +1909,25 @@ export default function CompanySettingsPage() {
|
||||
</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 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} />
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeMasterTab === 'merchant' && (
|
||||
<div className="space-y-4">
|
||||
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<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">
|
||||
@@ -1918,14 +1935,20 @@ export default function CompanySettingsPage() {
|
||||
</button>
|
||||
</div>
|
||||
<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">
|
||||
{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" />
|
||||
<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} />
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1933,15 +1956,18 @@ export default function CompanySettingsPage() {
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<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>
|
||||
<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 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" />
|
||||
</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" />
|
||||
</button>
|
||||
</div>
|
||||
@@ -1952,21 +1978,25 @@ export default function CompanySettingsPage() {
|
||||
</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 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} />
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
)}
|
||||
|
||||
{activeMasterTab === 'swapstation' && (
|
||||
<div className="space-y-4">
|
||||
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<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">
|
||||
@@ -1974,14 +2004,20 @@ export default function CompanySettingsPage() {
|
||||
</button>
|
||||
</div>
|
||||
<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">
|
||||
{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" />
|
||||
<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} />
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1989,15 +2025,18 @@ export default function CompanySettingsPage() {
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<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>
|
||||
<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 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" />
|
||||
</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" />
|
||||
</button>
|
||||
</div>
|
||||
@@ -2008,42 +2047,48 @@ export default function CompanySettingsPage() {
|
||||
</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 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} />
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
)}
|
||||
|
||||
{activeMasterTab === 'rentalType' && (
|
||||
<div className="space-y-6">
|
||||
{(settings.companyPolicy?.rentalTypes || []).map((rtype, idx) => (
|
||||
<div key={idx} className="border border-slate-200 rounded-lg overflow-hidden">
|
||||
<div className="bg-slate-50 px-4 py-3">
|
||||
<h4 className="font-medium text-slate-700">{rtype.name}</h4>
|
||||
<div className="space-y-4">
|
||||
<div className="flex gap-2 border-b border-slate-200">
|
||||
<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>
|
||||
<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>
|
||||
<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 className="p-4 space-y-4">
|
||||
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<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 className="space-y-2">
|
||||
{(rtype.rules || []).map((policy, policyIdx) => (
|
||||
<div key={policyIdx} className="p-3 bg-slate-50 rounded-lg border border-slate-200">
|
||||
{editingPolicy?.tab === 'rentalType' && editingPolicy?.index === policyIdx ? (
|
||||
{(settings.companyPolicy?.rentalTypes[activeRentalTypeTab] || []).map((policy, i) => (
|
||||
<div key={i} className="p-3 bg-slate-50 rounded-lg border border-slate-200">
|
||||
{editingPolicy?.tab === 'rentalType' && 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" />
|
||||
<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} />
|
||||
<div className="flex gap-2">
|
||||
<button onClick={() => {
|
||||
const updated = [...(settings.companyPolicy?.rentalTypes || [])];
|
||||
const newDesc = editPolicyDescHtml || editPolicyDesc;
|
||||
updated[idx].rules[policyIdx] = { name: editPolicyName, description: newDesc };
|
||||
const updated = { ...settings.companyPolicy.rentalTypes };
|
||||
updated[activeRentalTypeTab][i] = { title: editPolicyName, description: editPolicyDescHtml };
|
||||
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, rentalTypes: updated } });
|
||||
setEditingPolicy(null);
|
||||
setEditPolicyDescHtml('');
|
||||
@@ -2055,17 +2100,17 @@ export default function CompanySettingsPage() {
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<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>
|
||||
<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 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" />
|
||||
</button>
|
||||
<button onClick={() => {
|
||||
const updated = [...(settings.companyPolicy?.rentalTypes || [])];
|
||||
updated[idx].rules = updated[idx].rules?.filter((_, i) => i !== policyIdx);
|
||||
const updated = { ...settings.companyPolicy.rentalTypes };
|
||||
updated[activeRentalTypeTab] = updated[activeRentalTypeTab].filter((_, idx) => idx !== i);
|
||||
setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, rentalTypes: updated } });
|
||||
}} className="p-1 text-slate-400 hover:text-red-600">
|
||||
<Trash2 className="w-3.5 h-3.5" />
|
||||
@@ -2076,41 +2121,30 @@ export default function CompanySettingsPage() {
|
||||
</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">
|
||||
<Plus className="w-3 h-3" /> Add Policy
|
||||
</button>
|
||||
{editingPolicy?.tab === 'rentalTypeAdd' && editingPolicy?.index === idx && (
|
||||
{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" />
|
||||
<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={() => {
|
||||
const updated = [...(settings.companyPolicy?.rentalTypes || [])];
|
||||
updated[idx].rules = [...(updated[idx].rules || []), { name: newPolicyName, description: newPolicyDesc }];
|
||||
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('');
|
||||
setEditingPolicy(null);
|
||||
setShowAddPolicy(false);
|
||||
}} 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 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>
|
||||
)
|
||||
}
|
||||
)}
|
||||
|
||||
{
|
||||
activeTab === 'plans' && (
|
||||
{activeTab === 'plans' && (
|
||||
<div className="p-6 space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-lg font-semibold text-slate-800">Plan Selection</h3>
|
||||
|
||||
Reference in New Issue
Block a user