From 7f5c7f3f656c2cd887b006d9ea3ef5cf9e208fdb Mon Sep 17 00:00:00 2001
From: sazzadulalambd <sazzad.sua@gmail.com>
Date: Sun, 10 May 2026 17:52:21 +0600
Subject: [PATCH] feat: add inline editing and EV model selection to plan
 management components

---
 .../settings/components/PlanSelection.tsx     | 785 ++++++++----------
 src/app/admin/settings/page.tsx               |  92 +-
 2 files changed, 403 insertions(+), 474 deletions(-)

diff --git a/src/app/admin/settings/components/PlanSelection.tsx b/src/app/admin/settings/components/PlanSelection.tsx
index e4ffc7f..8e7273b 100644
--- a/src/app/admin/settings/components/PlanSelection.tsx
+++ b/src/app/admin/settings/components/PlanSelection.tsx
@@ -1,9 +1,11 @@
 'use client';
 
 import { useState } from 'react';
-import { Plus, Save, Trash2, X } from 'lucide-react';
+import { Plus, Save, Trash2, X, Pencil, Check } from 'lucide-react';
 import { CompanySettings } from '../page';
 
+const EV_MODELS = ['Etron ET50', 'Yadea DT3', 'AIMA Lightning', 'AIMA EM5', 'Yadea G5', 'TVS iQube', 'Bajaj Chetak', 'Hero Photon', 'Okinawa Praise', 'Ampere Magnus', 'Benling Aura', 'Lectrix LXS', 'Revolt RV400'];
+
 interface PlanSelectionProps {
   settings: CompanySettings;
   setSettings: React.Dispatch<React.SetStateAction<CompanySettings>>;
@@ -11,6 +13,7 @@ interface PlanSelectionProps {
   setActivePlanTab: (tab: 'singleRent' | 'rentToOwn' | 'shareEv') => void;
   handleSave: () => void;
   addNewPlan: (type: 'singleRent' | 'rentToOwn' | 'shareEv') => void;
+  isDirty: boolean;
 }
 
 export default function PlanSelection({
@@ -20,8 +23,19 @@ export default function PlanSelection({
   setActivePlanTab,
   handleSave,
   addNewPlan,
+  isDirty,
 }: PlanSelectionProps) {
   const [deleteModal, setDeleteModal] = useState<{ type: 'singleRent' | 'rentToOwn' | 'shareEv' | null; idx: number | null }>({ type: null, idx: null });
+  const [editingPlanId, setEditingPlanId] = useState<string | null>(null);
+  const [openDropdown, setOpenDropdown] = useState<string | null>(null);
+
+  const isAnyEditing = editingPlanId !== null;
+  const colorMap: Record<string, string> = {
+    singleRent: 'blue',
+    rentToOwn: 'purple',
+    shareEv: 'green',
+  };
+  const color = colorMap[activePlanTab] || 'blue';
 
   const handleDeletePlan = () => {
     if (deleteModal.type !== null && deleteModal.idx !== null) {
@@ -31,463 +45,338 @@ export default function PlanSelection({
     }
   };
 
+  const renderPlanCard = (plan: CompanySettings['plans']['singleRent'][number] | CompanySettings['plans']['rentToOwn'][number] | CompanySettings['plans']['shareEv'][number], idx: number, type: 'singleRent' | 'rentToOwn' | 'shareEv') => {
+    const isEditing = editingPlanId === plan.id;
+    const isColor = color;
+    const accent = {
+      blue: { bg: 'bg-blue-600', bgLight: 'bg-blue-50', border: 'border-blue-100', text: 'text-blue-600', textDark: 'text-blue-800', textLight: 'text-blue-100', placeholder: 'placeholder-blue-400' },
+      purple: { bg: 'bg-purple-600', bgLight: 'bg-purple-50', border: 'border-purple-100', text: 'text-purple-600', textDark: 'text-purple-800', textLight: 'text-purple-100', placeholder: 'placeholder-purple-400' },
+      green: { bg: 'bg-green-600', bgLight: 'bg-green-50', border: 'border-green-100', text: 'text-green-600', textDark: 'text-green-800', textLight: 'text-green-100', placeholder: 'placeholder-green-400' },
+    }[isColor]!;
+
+    const inputClass = `w-full px-3 py-2 border border-slate-200 rounded-lg text-sm transition-all ${isEditing ? 'bg-white focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 outline-none' : 'bg-slate-50 text-slate-500 cursor-not-allowed'}`;
+
+    const updatePlan = (field: string, value: unknown) => {
+      const arr = [...(settings.plans[type] as unknown as Record<string, unknown>[])];
+      arr[idx] = { ...arr[idx], [field]: value };
+      setSettings({ ...settings, plans: { ...settings.plans, [type]: arr } });
+    };
+
+    const toggleEvModel = (model: string) => {
+      const current = plan.evModels as string[];
+      const updated = current.includes(model) ? current.filter(m => m !== model) : [...current, model];
+      updatePlan('evModels', updated);
+    };
+
+    const isShareEv = type === 'shareEv';
+    const isRentToOwn = type === 'rentToOwn';
+    const depositLabel = isShareEv ? 'Deposit Each (৳)' : 'Deposit (৳)';
+    const planAny = plan as Record<string, unknown>;
+    const depositValue = isShareEv ? (planAny.depositEach as number) : (planAny.deposit as number);
+    const dailyRentLabel = isShareEv ? 'Daily Rent Each (৳)' : 'Daily Rent (৳)';
+    const dailyRentField = isShareEv ? (planAny.dailyRentEach as number) : (planAny.dailyRent as number);
+
+    const closeAllDropdowns = () => setOpenDropdown(null);
+
+    return (
+      <div key={plan.id} className={`bg-white rounded-xl border overflow-hidden transition-all ${isEditing ? `border-${isColor}-300 shadow-lg shadow-${isColor}-500/5 ring-1 ring-${isColor}-100` : 'border-slate-200 shadow-sm'}`}>
+        <div className={`${accent.bgLight} ${accent.border} px-4 py-3 border-b flex items-center justify-between`}>
+          <div className="flex-1 min-w-0">
+            <h4 className={`font-semibold ${accent.textDark} truncate`}>{plan.name || 'Untitled Plan'} — ৳{dailyRentField}/day</h4>
+            <textarea
+              disabled={!isEditing}
+              value={plan.description}
+              onChange={(e) => updatePlan('description', e.target.value)}
+              className={`w-full bg-transparent text-sm ${accent.text} mt-1 border-0 resize-none p-0 focus:ring-0 leading-snug`}
+              rows={1}
+              placeholder="Plan description..."
+            />
+          </div>
+          <div className="flex items-center gap-1.5 ml-3 flex-shrink-0">
+            {!isEditing ? (
+              <button
+                onClick={() => setEditingPlanId(plan.id)}
+                className={`p-2 ${accent.bgLight} ${accent.text} rounded-lg hover:${accent.bg}/10 transition-all`}
+                title="Edit"
+              >
+                <Pencil className="w-4 h-4" />
+              </button>
+            ) : (
+              <>
+                <button
+                  onClick={() => { handleSave(); setEditingPlanId(null); }}
+                  disabled={!isDirty}
+                  className={`px-3 py-1.5 ${accent.bg} text-white rounded-lg text-xs font-medium flex items-center gap-1 hover:${accent.bg}/90 transition-all ${!isDirty ? 'opacity-50 cursor-not-allowed' : ''}`}
+                  title={isDirty ? 'Save changes' : 'No changes to save'}
+                >
+                  <Save className="w-3.5 h-3.5" /> Save
+                </button>
+                <button
+                  onClick={() => setEditingPlanId(null)}
+                  className="px-3 py-1.5 bg-slate-100 text-slate-600 rounded-lg text-xs font-medium hover:bg-slate-200 transition-all"
+                >
+                  Done
+                </button>
+              </>
+            )}
+            <button
+              onClick={() => setDeleteModal({ type, idx })}
+              className={`p-2 ${accent.bgLight} text-red-500 rounded-lg hover:bg-red-50 transition-all`}
+              title="Delete"
+            >
+              <Trash2 className="w-4 h-4" />
+            </button>
+          </div>
+        </div>
+
+        <div className="p-5 space-y-5">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div>
+              <label className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2 block">Plan Condition</label>
+              <input
+                type="text"
+                disabled={!isEditing}
+                value={plan.name}
+                onChange={(e) => updatePlan('name', e.target.value)}
+                className={inputClass}
+                placeholder="Plan Condition"
+              />
+            </div>
+
+            <div>
+              <label className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2 block">EV Model Numbers</label>
+              <div className="relative">
+                <button
+                  type="button"
+                  disabled={!isEditing}
+                  onClick={() => {
+                    if (isEditing) {
+                      closeAllDropdowns();
+                      setOpenDropdown(openDropdown === `ev-${plan.id}` ? null : `ev-${plan.id}`);
+                    }
+                  }}
+                  className={`${inputClass} text-left flex items-center justify-between ${isEditing ? 'cursor-pointer' : 'cursor-default'}`}
+                >
+                  <span className={plan.evModels.length > 0 ? 'text-slate-800 truncate' : 'text-slate-400'}>
+                    {plan.evModels.length > 0 ? `${plan.evModels.length} selected` : 'Select EV Models...'}
+                  </span>
+                  <svg className={`w-4 h-4 text-slate-400 flex-shrink-0 ml-1 ${isEditing ? '' : 'hidden'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
+                </button>
+                {isEditing && openDropdown === `ev-${plan.id}` && (
+                  <div className="absolute z-50 w-full mt-1 bg-white border border-slate-200 rounded-lg shadow-lg max-h-60 overflow-y-auto">
+                    {EV_MODELS.map(model => (
+                      <label key={model} className="flex items-center gap-2 px-3 py-2 hover:bg-slate-50 cursor-pointer text-sm">
+                        <input
+                          type="checkbox"
+                          checked={plan.evModels.includes(model)}
+                          onChange={() => toggleEvModel(model)}
+                          className="rounded border-slate-300 text-blue-600"
+                        />
+                        <span className="text-slate-700">{model}</span>
+                      </label>
+                    ))}
+                  </div>
+                )}
+              </div>
+              {plan.evModels.length > 0 && (
+                <div className="flex flex-wrap gap-1.5 mt-2">
+                  {plan.evModels.map(model => (
+                    <span key={model} className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium ${accent.bgLight} ${accent.text} border ${accent.border}`}>
+                      {model}
+                      {isEditing && (
+                        <button onClick={() => toggleEvModel(model)} className="hover:opacity-70 ml-0.5">
+                          <X className="w-2.5 h-2.5" />
+                        </button>
+                      )}
+                    </span>
+                  ))}
+                </div>
+              )}
+            </div>
+
+            <div>
+              <label className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2 block">{depositLabel}</label>
+              <input
+                type="number"
+                disabled={!isEditing}
+                value={depositValue}
+                onChange={(e) => updatePlan(isShareEv ? 'depositEach' : 'deposit', parseInt(e.target.value) || 0)}
+                className={inputClass}
+              />
+            </div>
+          </div>
+
+          {['dailyRent', 'weeklySubscription', 'monthlySubscription'].map((section) => {
+            const labelMap: Record<string, string> = {
+              dailyRent: isShareEv ? 'Daily Rent (Each)' : 'Daily Rent',
+              weeklySubscription: isShareEv ? 'Weekly Subscription (Each)' : 'Weekly Subscription',
+              monthlySubscription: isShareEv ? 'Monthly Subscription (Each)' : 'Monthly Subscription',
+            };
+            const baseField = isShareEv && section === 'dailyRent' ? 'dailyRentEach' : section === 'weeklySubscription' && isShareEv ? 'weeklySubscriptionEach' : section === 'monthlySubscription' && isShareEv ? 'monthlySubscriptionEach' : section;
+            const baseVal = plan[baseField as keyof typeof plan] as number;
+
+            return (
+              <div key={section} className="bg-slate-50 rounded-xl p-4 space-y-3">
+                <label className="text-xs font-semibold text-slate-500 uppercase tracking-wide">{labelMap[section]}</label>
+                <div className="grid grid-cols-4 gap-3">
+                  <div>
+                    <label className="text-xs text-slate-500">Base (৳)</label>
+                    <input type="number" disabled={!isEditing} value={baseVal} onChange={(e) => updatePlan(baseField, parseInt(e.target.value) || 0)} className={inputClass} />
+                  </div>
+                  {[1, 2, 3].map(n => {
+                    const pField = `${section.replace('Subscription', '')}Penalty${n}` as keyof typeof plan;
+                    const penaltyVal = plan[pField] as number;
+                    const labelMap2: Record<string, string> = { daily: 'Day', weekly: 'Day', monthly: 'Day' };
+                    const prefix = section === 'dailyRent' ? 'daily' : section === 'weeklySubscription' ? 'weekly' : 'monthly';
+                    const pFieldMap: Record<string, string> = { daily: `dailyRentPenalty${n}`, weekly: `weeklyPenalty${n}`, monthly: `monthlyPenalty${n}` };
+                    return (
+                      <div key={n}>
+                        <label className="text-xs text-slate-500">{labelMap2[prefix]} {n} {n === 3 ? '+ Lock' : ''} (৳)</label>
+                        <input type="number" disabled={!isEditing} value={penaltyVal} onChange={(e) => updatePlan(pFieldMap[prefix], parseInt(e.target.value) || 0)} className={inputClass} />
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            );
+          })}
+
+          <div className="bg-slate-50 rounded-lg p-3">
+            <label className="text-xs font-semibold text-slate-500 uppercase tracking-wide block mb-2">Contract Duration (Months)</label>
+            <div className="flex flex-wrap gap-2">
+              {plan.contractMonths.map(month => (
+                <div key={month} className={`px-3 py-1.5 rounded-lg text-xs font-medium flex items-center gap-1.5 transition-all ${isEditing ? `${accent.bg} text-white` : 'bg-slate-200 text-slate-600'}`}>
+                  {month} {month === 1 ? 'Month' : 'Months'}
+                  {isEditing && (
+                    <button onClick={() => updatePlan('contractMonths', plan.contractMonths.filter(m => m !== month))} className="hover:opacity-70">
+                      <X className="w-3 h-3" />
+                    </button>
+                  )}
+                </div>
+              ))}
+              {isEditing && (
+                <div className="flex items-center gap-1">
+                  <input
+                    type="number"
+                    min="1"
+                    placeholder="+"
+                    className="w-14 px-2 py-1.5 border border-slate-200 rounded-lg text-xs text-center focus:ring-2 focus:ring-blue-100 outline-none"
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') {
+                        const val = parseInt((e.target as HTMLInputElement).value);
+                        if (val > 0 && !plan.contractMonths.includes(val)) {
+                          updatePlan('contractMonths', [...plan.contractMonths, val].sort((a, b) => a - b));
+                          (e.target as HTMLInputElement).value = '';
+                        }
+                      }
+                    }}
+                  />
+                  <button
+                    onClick={(e) => {
+                      const input = (e.currentTarget.previousElementSibling as HTMLInputElement);
+                      const val = parseInt(input.value);
+                      if (val > 0 && !plan.contractMonths.includes(val)) {
+                        updatePlan('contractMonths', [...plan.contractMonths, val].sort((a, b) => a - b));
+                        input.value = '';
+                      }
+                    }}
+                    className={`px-2 py-1.5 ${accent.bg} text-white rounded-lg text-xs`}
+                  >
+                    +
+                  </button>
+                </div>
+              )}
+            </div>
+            {plan.contractMonths.length === 0 && <p className="text-xs text-slate-400 mt-2">No contract months selected.</p>}
+          </div>
+
+          <div>
+            <label className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2 block">Description</label>
+            <textarea
+              disabled={!isEditing}
+              value={plan.description}
+              onChange={(e) => updatePlan('description', e.target.value)}
+              className={inputClass}
+              rows={2}
+              placeholder="Enter plan description..."
+            />
+          </div>
+        </div>
+      </div>
+    );
+  };
+
   return (
     <>
       <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>
+        <div className="flex items-center justify-between">
+          <h3 className="text-lg font-semibold text-slate-800">Plan Selection</h3>
+          {isDirty && (
+            <span className="text-xs text-amber-500 font-medium flex items-center gap-1">
+              <div className="w-1.5 h-1.5 bg-amber-500 rounded-full animate-pulse"></div>
+              Unsaved changes
+            </span>
+          )}
+        </div>
+
+        <div className="flex gap-2 border-b border-slate-200">
+          <button onClick={() => setActivePlanTab('singleRent')} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activePlanTab === 'singleRent' ? 'border-blue-500 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>Single Rent</button>
+          <button onClick={() => setActivePlanTab('rentToOwn')} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activePlanTab === 'rentToOwn' ? 'border-purple-500 text-purple-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>Rent to Own</button>
+          <button onClick={() => setActivePlanTab('shareEv')} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activePlanTab === 'shareEv' ? 'border-green-500 text-green-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>Share an EV</button>
+        </div>
+
+        {activePlanTab === 'singleRent' && (
+          <div className="space-y-6">
+            {settings.plans.singleRent.map((plan, idx) => renderPlanCard(plan, idx, 'singleRent'))}
+            <button onClick={() => addNewPlan('singleRent')} className="w-full py-3 border-2 border-dashed border-slate-300 rounded-xl text-slate-500 hover:border-blue-400 hover:text-blue-500 hover:bg-blue-50 transition-all flex items-center justify-center gap-2 text-sm font-medium">
+              <Plus className="w-4 h-4" /> Add New Plan
+            </button>
+          </div>
+        )}
+
+        {activePlanTab === 'rentToOwn' && (
+          <div className="space-y-6">
+            {settings.plans.rentToOwn.map((plan, idx) => renderPlanCard(plan, idx, 'rentToOwn'))}
+            <button onClick={() => addNewPlan('rentToOwn')} className="w-full py-3 border-2 border-dashed border-slate-300 rounded-xl text-slate-500 hover:border-purple-400 hover:text-purple-500 hover:bg-purple-50 transition-all flex items-center justify-center gap-2 text-sm font-medium">
+              <Plus className="w-4 h-4" /> Add New Plan
+            </button>
+          </div>
+        )}
+
+        {activePlanTab === 'shareEv' && (
+          <div className="space-y-6">
+            {settings.plans.shareEv.map((plan, idx) => renderPlanCard(plan, idx, 'shareEv'))}
+            <button onClick={() => addNewPlan('shareEv')} className="w-full py-3 border-2 border-dashed border-slate-300 rounded-xl text-slate-500 hover:border-green-400 hover:text-green-500 hover:bg-green-50 transition-all flex items-center justify-center gap-2 text-sm font-medium">
+              <Plus className="w-4 h-4" /> Add New Plan
+            </button>
+          </div>
+        )}
       </div>
 
-      <div className="flex gap-2 border-b border-slate-200">
-        <button onClick={() => setActivePlanTab('singleRent')} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activePlanTab === 'singleRent' ? 'border-blue-500 text-blue-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>Single Rent</button>
-        <button onClick={() => setActivePlanTab('rentToOwn')} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activePlanTab === 'rentToOwn' ? 'border-purple-500 text-purple-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>Rent to Own</button>
-        <button onClick={() => setActivePlanTab('shareEv')} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activePlanTab === 'shareEv' ? 'border-green-500 text-green-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>Share an EV</button>
-      </div>
-
-      {activePlanTab === 'singleRent' && (
-        <div className="space-y-6">
-          {settings.plans.singleRent.map((plan, idx) => (
-            <div key={plan.id} className="bg-white rounded-xl border border-slate-200 overflow-hidden">
-              <div className="bg-blue-50 px-4 py-3 border-b border-blue-100 flex items-center justify-between">
-                <div>
-                  <h4 className="font-semibold text-blue-800">{plan.name} - ৳{plan.dailyRent}/day</h4>
-                  <textarea value={plan.description} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].description = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full bg-transparent text-sm text-blue-600 mt-1 border-0 resize-none p-0 focus:ring-0" rows={1} placeholder="Plan description..." />
-                </div>
-                <div className="flex items-center gap-2 ml-3">
-                  <button onClick={handleSave} className="px-3 py-1.5 bg-blue-600 text-white rounded-lg text-xs font-medium flex items-center gap-1 hover:bg-blue-700">
-                    <Save className="w-3 h-3" /> Save
-                  </button>
-                  <button onClick={() => setDeleteModal({ type: 'singleRent', idx })} className="px-2 py-1.5 bg-red-50 text-red-600 rounded-lg text-xs font-medium flex items-center gap-1 hover:bg-red-100">
-                    <Trash2 className="w-3 h-3" />
-                  </button>
-                </div>
-              </div>
-              <div className="p-5 space-y-5">
-                <div className="grid grid-cols-3 gap-4">
-                  <div>
-                    <label className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2 block">Plan Condition</label>
-                    <input type="text" value={plan.name} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].name = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" placeholder="Plan Condition" />
-                  </div>
-                  <div>
-                    <label className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2 block">EV Model Numbers</label>
-                    <div className="relative">
-                      <button type="button" onClick={() => { const el = document.getElementById(`ev-models-${idx}`); if (el) el.classList.toggle('hidden'); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm bg-white text-left flex items-center justify-between cursor-pointer hover:border-slate-300">
-                        <span className={plan.evModels.length > 0 ? 'text-slate-800' : 'text-slate-400'}>
-                          {plan.evModels.length > 0 ? `${plan.evModels.length} selected` : 'Select EV Models...'}
-                        </span>
-                        <svg className="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
-                      </button>
-                      <div id={`ev-models-${idx}`} className="hidden absolute z-50 w-full mt-1 bg-white border border-slate-200 rounded-lg shadow-lg max-h-60 overflow-y-auto">
-                        {['Etron ET50', 'Yadea DT3', 'AIMA Lightning', 'AIMA EM5', 'Yadea G5', 'TVS iQube', 'Bajaj Chetak', 'Hero Photon', 'Okinawa Praise', 'Ampere Magnus', 'Benling Aura', 'Lectrix LXS', 'Revolt RV400'].map(model => (
-                          <label key={model} className="flex items-center gap-2 px-3 py-2 hover:bg-slate-50 cursor-pointer text-sm">
-                            <input type="checkbox" checked={plan.evModels.includes(model)} onChange={() => { const updated = [...settings.plans.singleRent]; updated[idx].evModels = updated[idx].evModels.includes(model) ? updated[idx].evModels.filter(m => m !== model) : [...updated[idx].evModels, model]; setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="rounded border-slate-300 text-emerald-600" />
-                            <span>{model}</span>
-                          </label>
-                        ))}
-                      </div>
-                    </div>
-                  </div>
-                  <div>
-                    <label className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2 block">Deposit (৳)</label>
-                    <input type="number" value={plan.deposit} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].deposit = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
-                  </div>
-                </div>
-                <div className="bg-slate-50 rounded-xl p-4 space-y-3">
-                  <label className="text-xs font-semibold text-slate-500 uppercase tracking-wide">Daily Rent</label>
-                  <div className="grid grid-cols-4 gap-3">
-                    <div>
-                      <label className="text-xs text-slate-500">Base (৳)</label>
-                      <input type="number" value={plan.dailyRent} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].dailyRent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
-                    </div>
-                    <div>
-                      <label className="text-xs text-slate-500">1st Day Penalty (৳)</label>
-                      <input type="number" value={plan.dailyRentPenalty1} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].dailyRentPenalty1 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
-                    </div>
-                    <div>
-                      <label className="text-xs text-slate-500">2nd Day Penalty (৳)</label>
-                      <input type="number" value={plan.dailyRentPenalty2} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].dailyRentPenalty2 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
-                    </div>
-                    <div>
-                      <label className="text-xs text-slate-500">3rd Day Penalty + Bike Lock (৳)</label>
-                      <input type="number" value={plan.dailyRentPenalty3} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].dailyRentPenalty3 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
-                    </div>
-                  </div>
-                </div>
-                <div className="bg-slate-50 rounded-xl p-4 space-y-3">
-                  <label className="text-xs font-semibold text-slate-500 uppercase tracking-wide">Weekly Subscription</label>
-                  <div className="grid grid-cols-4 gap-3">
-                    <div>
-                      <label className="text-xs text-slate-500">Base (৳)</label>
-                      <input type="number" value={plan.weeklySubscription} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].weeklySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
-                    </div>
-                    <div>
-                      <label className="text-xs text-slate-500">1st Day Penalty (৳)</label>
-                      <input type="number" value={plan.weeklyPenalty1} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].weeklyPenalty1 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
-                    </div>
-                    <div>
-                      <label className="text-xs text-slate-500">2nd Day Penalty (৳)</label>
-                      <input type="number" value={plan.weeklyPenalty2} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].weeklyPenalty2 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
-                    </div>
-                    <div>
-                      <label className="text-xs text-slate-500">3rd Day Penalty + Bike Lock (৳)</label>
-                      <input type="number" value={plan.weeklyPenalty3} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].weeklyPenalty3 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
-                    </div>
-                  </div>
-                </div>
-                <div className="bg-slate-50 rounded-xl p-4 space-y-3">
-                  <label className="text-xs font-semibold text-slate-500 uppercase tracking-wide">Monthly Subscription</label>
-                  <div className="grid grid-cols-4 gap-3">
-                    <div>
-                      <label className="text-xs text-slate-500">Base (৳)</label>
-                      <input type="number" value={plan.monthlySubscription} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].monthlySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
-                    </div>
-                    <div>
-                      <label className="text-xs text-slate-500">1st Day Penalty (৳)</label>
-                      <input type="number" value={plan.monthlyPenalty1} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].monthlyPenalty1 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
-                    </div>
-                    <div>
-                      <label className="text-xs text-slate-500">2nd Day Penalty (৳)</label>
-                      <input type="number" value={plan.monthlyPenalty2} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].monthlyPenalty2 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
-                    </div>
-                    <div>
-                      <label className="text-xs text-slate-500">3rd Day Penalty + Bike Lock (৳)</label>
-                      <input type="number" value={plan.monthlyPenalty3} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].monthlyPenalty3 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
-                    </div>
-                  </div>
-                </div>
-                <div className="bg-slate-50 rounded-lg p-3">
-                  <label className="text-xs font-semibold text-slate-500 uppercase tracking-wide block mb-2">Contract Duration (Months)</label>
-                  <div className="flex flex-wrap gap-2">
-                    {plan.contractMonths.map(month => (
-                      <button key={month} onClick={() => { const updated = [...settings.plans.singleRent]; updated[idx].contractMonths = updated[idx].contractMonths.filter(m => m !== month); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="px-3 py-1.5 rounded-lg text-xs font-medium bg-blue-600 text-white hover:bg-red-500 transition-all flex items-center gap-1">
-                        {month} {month === 1 ? 'Month' : 'Months'}
-                        <span className="ml-1 font-bold">×</span>
-                      </button>
-                    ))}
-                    <div className="flex items-center gap-1">
-                      <input type="number" min="1" placeholder="Add" className="w-20 px-2 py-1.5 border border-slate-200 rounded-lg text-xs" onKeyDown={(e) => { if (e.key === 'Enter') { const val = parseInt((e.target as HTMLInputElement).value); if (val > 0 && !plan.contractMonths.includes(val)) { const updated = [...settings.plans.singleRent]; updated[idx].contractMonths = [...updated[idx].contractMonths, val].sort((a, b) => a - b); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); (e.target as HTMLInputElement).value = ''; } } }} />
-                      <button onClick={(e) => { const input = (e.currentTarget.previousElementSibling as HTMLInputElement); const val = parseInt(input.value); if (val > 0 && !plan.contractMonths.includes(val)) { const updated = [...settings.plans.singleRent]; updated[idx].contractMonths = [...updated[idx].contractMonths, val].sort((a, b) => a - b); setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); input.value = ''; } }} className="px-2 py-1.5 bg-blue-600 text-white rounded-lg text-xs hover:bg-blue-700">+</button>
-                    </div>
-                  </div>
-                  {plan.contractMonths.length === 0 && <p className="text-xs text-slate-400 mt-2">No contract months selected.</p>}
-                </div>
-                <div>
-                  <label className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2 block">Description</label>
-                  <textarea value={plan.description} onChange={(e) => { const updated = [...settings.plans.singleRent]; updated[idx].description = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, singleRent: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" rows={2} placeholder="Enter plan description..." />
-                </div>
-              </div>
+      {deleteModal.type !== null && deleteModal.idx !== null && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-xl shadow-xl w-full max-w-sm">
+            <div className="p-4 border-b border-slate-100 flex justify-between items-center">
+              <h3 className="font-semibold text-slate-800 flex items-center gap-2">
+                <Trash2 className="w-5 h-5 text-red-500" /> Delete Plan
+              </h3>
+              <button onClick={() => setDeleteModal({ type: null, idx: null })} className="text-slate-400 hover:text-slate-600 text-2xl leading-none">&times;</button>
             </div>
-          ))}
-          <button onClick={() => addNewPlan('singleRent')} className="w-full py-3 border-2 border-dashed border-slate-300 rounded-xl text-slate-500 hover:border-blue-400 hover:text-blue-500 hover:bg-blue-50 transition-all flex items-center justify-center gap-2 text-sm font-medium">
-            <Plus className="w-4 h-4" /> Add New Plan
-          </button>
-        </div>
-      )}
-
-      {activePlanTab === 'rentToOwn' && (
-        <div className="space-y-6">
-          {settings.plans.rentToOwn.map((plan, idx) => (
-            <div key={plan.id} className="bg-white rounded-xl border border-slate-200 overflow-hidden">
-              <div className="bg-purple-50 px-4 py-3 border-b border-purple-100 flex items-center justify-between">
-                <div>
-                  <h4 className="font-semibold text-purple-800">{plan.name} - ৳{plan.dailyRent}/day</h4>
-                  <textarea value={plan.description} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].description = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full bg-transparent text-sm text-purple-600 mt-1 border-0 resize-none p-0 focus:ring-0" rows={1} placeholder="Plan description..." />
+            <div className="p-4">
+              <p className="text-sm text-slate-600">Are you sure you want to delete this plan? This action cannot be undone.</p>
+              {deleteModal.type && deleteModal.idx !== null && settings.plans[deleteModal.type][deleteModal.idx] && (
+                <div className="mt-3 p-3 bg-slate-50 rounded-lg">
+                  <p className="text-sm font-medium text-slate-700">{settings.plans[deleteModal.type][deleteModal.idx].name}</p>
                 </div>
-                <div className="flex items-center gap-2 ml-3">
-                  <button onClick={handleSave} className="px-3 py-1.5 bg-purple-600 text-white rounded-lg text-xs font-medium flex items-center gap-1 hover:bg-purple-700">
-                    <Save className="w-3 h-3" /> Save
-                  </button>
-                  <button onClick={() => setDeleteModal({ type: 'rentToOwn', idx })} className="px-2 py-1.5 bg-red-50 text-red-600 rounded-lg text-xs font-medium flex items-center gap-1 hover:bg-red-100">
-                    <Trash2 className="w-3 h-3" />
-                  </button>
-                </div>
-              </div>
-              <div className="p-5 space-y-5">
-                <div className="grid grid-cols-3 gap-4">
-                  <div>
-                    <label className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2 block">Plan Condition</label>
-                    <input type="text" value={plan.name} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].name = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" placeholder="Plan Condition" />
-                  </div>
-                  <div>
-                    <label className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2 block">EV Model Numbers</label>
-                    <div className="relative">
-                      <button type="button" onClick={() => { const el = document.getElementById(`ev-models-rto-${idx}`); if (el) el.classList.toggle('hidden'); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm bg-white text-left flex items-center justify-between cursor-pointer hover:border-slate-300">
-                        <span className={plan.evModels.length > 0 ? 'text-slate-800' : 'text-slate-400'}>
-                          {plan.evModels.length > 0 ? `${plan.evModels.length} selected` : 'Select EV Models...'}
-                        </span>
-                        <svg className="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
-                      </button>
-                      <div id={`ev-models-rto-${idx}`} className="hidden absolute z-50 w-full mt-1 bg-white border border-slate-200 rounded-lg shadow-lg max-h-60 overflow-y-auto">
-                        {['Etron ET50', 'Yadea DT3', 'AIMA Lightning', 'AIMA EM5', 'Yadea G5', 'TVS iQube', 'Bajaj Chetak', 'Hero Photon', 'Okinawa Praise', 'Ampere Magnus', 'Benling Aura', 'Lectrix LXS', 'Revolt RV400'].map(model => (
-                          <label key={model} className="flex items-center gap-2 px-3 py-2 hover:bg-slate-50 cursor-pointer text-sm">
-                            <input type="checkbox" checked={plan.evModels.includes(model)} onChange={() => { const updated = [...settings.plans.rentToOwn]; updated[idx].evModels = updated[idx].evModels.includes(model) ? updated[idx].evModels.filter(m => m !== model) : [...updated[idx].evModels, model]; setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="rounded border-slate-300 text-emerald-600" />
-                            <span>{model}</span>
-                          </label>
-                        ))}
-                      </div>
-                    </div>
-                  </div>
-                  <div>
-                    <label className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2 block">Deposit (৳)</label>
-                    <input type="number" value={plan.deposit} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].deposit = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
-                  </div>
-                </div>
-                <div className="bg-slate-50 rounded-xl p-4 space-y-3">
-                  <label className="text-xs font-semibold text-slate-500 uppercase tracking-wide">Daily Rent</label>
-                  <div className="grid grid-cols-4 gap-3">
-                    <div>
-                      <label className="text-xs text-slate-500">Base (৳)</label>
-                      <input type="number" value={plan.dailyRent} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].dailyRent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
-                    </div>
-                    <div>
-                      <label className="text-xs text-slate-500">1st Day Penalty (৳)</label>
-                      <input type="number" value={plan.dailyRentPenalty1} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].dailyRentPenalty1 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
-                    </div>
-                    <div>
-                      <label className="text-xs text-slate-500">2nd Day Penalty (৳)</label>
-                      <input type="number" value={plan.dailyRentPenalty2} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].dailyRentPenalty2 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
-                    </div>
-                    <div>
-                      <label className="text-xs text-slate-500">3rd Day Penalty + Bike Lock (৳)</label>
-                      <input type="number" value={plan.dailyRentPenalty3} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].dailyRentPenalty3 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
-                    </div>
-                  </div>
-                </div>
-                <div className="bg-slate-50 rounded-xl p-4 space-y-3">
-                  <label className="text-xs font-semibold text-slate-500 uppercase tracking-wide">Weekly Subscription</label>
-                  <div className="grid grid-cols-4 gap-3">
-                    <div>
-                      <label className="text-xs text-slate-500">Base (৳)</label>
-                      <input type="number" value={plan.weeklySubscription} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].weeklySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
-                    </div>
-                    <div>
-                      <label className="text-xs text-slate-500">1st Day Penalty (৳)</label>
-                      <input type="number" value={plan.weeklyPenalty1} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].weeklyPenalty1 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
-                    </div>
-                    <div>
-                      <label className="text-xs text-slate-500">2nd Day Penalty (৳)</label>
-                      <input type="number" value={plan.weeklyPenalty2} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].weeklyPenalty2 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
-                    </div>
-                    <div>
-                      <label className="text-xs text-slate-500">3rd Day Penalty + Bike Lock (৳)</label>
-                      <input type="number" value={plan.weeklyPenalty3} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].weeklyPenalty3 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
-                    </div>
-                  </div>
-                </div>
-                <div className="bg-slate-50 rounded-xl p-4 space-y-3">
-                  <label className="text-xs font-semibold text-slate-500 uppercase tracking-wide">Monthly Subscription</label>
-                  <div className="grid grid-cols-4 gap-3">
-                    <div>
-                      <label className="text-xs text-slate-500">Base (৳)</label>
-                      <input type="number" value={plan.monthlySubscription} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].monthlySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
-                    </div>
-                    <div>
-                      <label className="text-xs text-slate-500">1st Day Penalty (৳)</label>
-                      <input type="number" value={plan.monthlyPenalty1} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].monthlyPenalty1 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
-                    </div>
-                    <div>
-                      <label className="text-xs text-slate-500">2nd Day Penalty (৳)</label>
-                      <input type="number" value={plan.monthlyPenalty2} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].monthlyPenalty2 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
-                    </div>
-                    <div>
-                      <label className="text-xs text-slate-500">3rd Day Penalty + Bike Lock (৳)</label>
-                      <input type="number" value={plan.monthlyPenalty3} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].monthlyPenalty3 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
-                    </div>
-                  </div>
-                </div>
-                <div className="bg-slate-50 rounded-lg p-3">
-                  <label className="text-xs font-semibold text-slate-500 uppercase tracking-wide block mb-2">Contract Duration (Months)</label>
-                  <div className="flex flex-wrap gap-2">
-                    {plan.contractMonths.map(month => (
-                      <button key={month} onClick={() => { const updated = [...settings.plans.rentToOwn]; updated[idx].contractMonths = updated[idx].contractMonths.filter(m => m !== month); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="px-3 py-1.5 rounded-lg text-xs font-medium bg-purple-600 text-white hover:bg-red-500 transition-all flex items-center gap-1">
-                        {month} {month === 1 ? 'Month' : 'Months'}
-                        <span className="ml-1 font-bold">×</span>
-                      </button>
-                    ))}
-                    <div className="flex items-center gap-1">
-                      <input type="number" min="1" placeholder="Add" className="w-20 px-2 py-1.5 border border-slate-200 rounded-lg text-xs" onKeyDown={(e) => { if (e.key === 'Enter') { const val = parseInt((e.target as HTMLInputElement).value); if (val > 0 && !plan.contractMonths.includes(val)) { const updated = [...settings.plans.rentToOwn]; updated[idx].contractMonths = [...updated[idx].contractMonths, val].sort((a, b) => a - b); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); (e.target as HTMLInputElement).value = ''; } } }} />
-                      <button onClick={(e) => { const input = (e.currentTarget.previousElementSibling as HTMLInputElement); const val = parseInt(input.value); if (val > 0 && !plan.contractMonths.includes(val)) { const updated = [...settings.plans.rentToOwn]; updated[idx].contractMonths = [...updated[idx].contractMonths, val].sort((a, b) => a - b); setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); input.value = ''; } }} className="px-2 py-1.5 bg-purple-600 text-white rounded-lg text-xs hover:bg-purple-700">+</button>
-                    </div>
-                  </div>
-                  {plan.contractMonths.length === 0 && <p className="text-xs text-slate-400 mt-2">No contract months selected.</p>}
-                </div>
-                <div>
-                  <label className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2 block">Description</label>
-                  <textarea value={plan.description} onChange={(e) => { const updated = [...settings.plans.rentToOwn]; updated[idx].description = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" rows={2} placeholder="Enter plan description..." />
-                </div>
-              </div>
+              )}
             </div>
-          ))}
-          <button onClick={() => addNewPlan('rentToOwn')} className="w-full py-3 border-2 border-dashed border-slate-300 rounded-xl text-slate-500 hover:border-purple-400 hover:text-purple-500 hover:bg-purple-50 transition-all flex items-center justify-center gap-2 text-sm font-medium">
-            <Plus className="w-4 h-4" /> Add New Plan
-          </button>
-        </div>
-      )}
-
-      {activePlanTab === 'shareEv' && (
-        <div className="space-y-6">
-          {settings.plans.shareEv.map((plan, idx) => (
-            <div key={plan.id} className="bg-white rounded-xl border border-slate-200 overflow-hidden">
-              <div className="bg-green-50 px-4 py-3 border-b border-green-100 flex items-center justify-between">
-                <div>
-                  <h4 className="font-semibold text-green-800">{plan.name} - ৳{plan.dailyRentEach}/day each</h4>
-                  <textarea value={plan.description} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].description = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full bg-transparent text-sm text-green-600 mt-1 border-0 resize-none p-0 focus:ring-0" rows={1} placeholder="Plan description..." />
-                </div>
-                <div className="flex items-center gap-2 ml-3">
-                  <button onClick={handleSave} className="px-3 py-1.5 bg-green-600 text-white rounded-lg text-xs font-medium flex items-center gap-1 hover:bg-green-700">
-                    <Save className="w-3 h-3" /> Save
-                  </button>
-                  <button onClick={() => setDeleteModal({ type: 'shareEv', idx })} className="px-2 py-1.5 bg-red-50 text-red-600 rounded-lg text-xs font-medium flex items-center gap-1 hover:bg-red-100">
-                    <Trash2 className="w-3 h-3" />
-                  </button>
-                </div>
-              </div>
-              <div className="p-5 space-y-5">
-                <div className="grid grid-cols-3 gap-4">
-                  <div>
-                    <label className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2 block">Plan Condition</label>
-                    <input type="text" value={plan.name} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].name = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" placeholder="Plan Condition" />
-                  </div>
-                  <div>
-                    <label className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2 block">EV Model Numbers</label>
-                    <div className="relative">
-                      <button type="button" onClick={() => { const el = document.getElementById(`ev-models-se-${idx}`); if (el) el.classList.toggle('hidden'); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm bg-white text-left flex items-center justify-between cursor-pointer hover:border-slate-300">
-                        <span className={plan.evModels.length > 0 ? 'text-slate-800' : 'text-slate-400'}>
-                          {plan.evModels.length > 0 ? `${plan.evModels.length} selected` : 'Select EV Models...'}
-                        </span>
-                        <svg className="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
-                      </button>
-                      <div id={`ev-models-se-${idx}`} className="hidden absolute z-50 w-full mt-1 bg-white border border-slate-200 rounded-lg shadow-lg max-h-60 overflow-y-auto">
-                        {['Etron ET50', 'Yadea DT3', 'AIMA Lightning', 'AIMA EM5', 'Yadea G5', 'TVS iQube', 'Bajaj Chetak', 'Hero Photon', 'Okinawa Praise', 'Ampere Magnus', 'Benling Aura', 'Lectrix LXS', 'Revolt RV400'].map(model => (
-                          <label key={model} className="flex items-center gap-2 px-3 py-2 hover:bg-slate-50 cursor-pointer text-sm">
-                            <input type="checkbox" checked={plan.evModels.includes(model)} onChange={() => { const updated = [...settings.plans.shareEv]; updated[idx].evModels = updated[idx].evModels.includes(model) ? updated[idx].evModels.filter(m => m !== model) : [...updated[idx].evModels, model]; setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="rounded border-slate-300 text-emerald-600" />
-                            <span>{model}</span>
-                          </label>
-                        ))}
-                      </div>
-                    </div>
-                  </div>
-                  <div>
-                    <label className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2 block">Deposit Each (৳)</label>
-                    <input type="number" value={plan.depositEach} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].depositEach = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
-                  </div>
-                </div>
-                <div className="bg-slate-50 rounded-xl p-4 space-y-3">
-                  <label className="text-xs font-semibold text-slate-500 uppercase tracking-wide">Daily Rent (Each)</label>
-                  <div className="grid grid-cols-4 gap-3">
-                    <div>
-                      <label className="text-xs text-slate-500">Base (৳)</label>
-                      <input type="number" value={plan.dailyRentEach} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].dailyRentEach = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
-                    </div>
-                    <div>
-                      <label className="text-xs text-slate-500">1st Day Penalty (৳)</label>
-                      <input type="number" value={plan.dailyRentPenalty1} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].dailyRentPenalty1 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
-                    </div>
-                    <div>
-                      <label className="text-xs text-slate-500">2nd Day Penalty (৳)</label>
-                      <input type="number" value={plan.dailyRentPenalty2} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].dailyRentPenalty2 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
-                    </div>
-                    <div>
-                      <label className="text-xs text-slate-500">3rd Day Penalty + Bike Lock (৳)</label>
-                      <input type="number" value={plan.dailyRentPenalty3} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].dailyRentPenalty3 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
-                    </div>
-                  </div>
-                </div>
-                <div className="bg-slate-50 rounded-xl p-4 space-y-3">
-                  <label className="text-xs font-semibold text-slate-500 uppercase tracking-wide">Weekly Subscription (Each)</label>
-                  <div className="grid grid-cols-4 gap-3">
-                    <div>
-                      <label className="text-xs text-slate-500">Base (৳)</label>
-                      <input type="number" value={plan.weeklySubscriptionEach} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].weeklySubscriptionEach = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
-                    </div>
-                    <div>
-                      <label className="text-xs text-slate-500">1st Day Penalty (৳)</label>
-                      <input type="number" value={plan.weeklyPenalty1} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].weeklyPenalty1 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
-                    </div>
-                    <div>
-                      <label className="text-xs text-slate-500">2nd Day Penalty (৳)</label>
-                      <input type="number" value={plan.weeklyPenalty2} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].weeklyPenalty2 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
-                    </div>
-                    <div>
-                      <label className="text-xs text-slate-500">3rd Day Penalty + Bike Lock (৳)</label>
-                      <input type="number" value={plan.weeklyPenalty3} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].weeklyPenalty3 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
-                    </div>
-                  </div>
-                </div>
-                <div className="bg-slate-50 rounded-xl p-4 space-y-3">
-                  <label className="text-xs font-semibold text-slate-500 uppercase tracking-wide">Monthly Subscription (Each)</label>
-                  <div className="grid grid-cols-4 gap-3">
-                    <div>
-                      <label className="text-xs text-slate-500">Base (৳)</label>
-                      <input type="number" value={plan.monthlySubscriptionEach} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].monthlySubscriptionEach = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
-                    </div>
-                    <div>
-                      <label className="text-xs text-slate-500">1st Day Penalty (৳)</label>
-                      <input type="number" value={plan.monthlyPenalty1} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].monthlyPenalty1 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
-                    </div>
-                    <div>
-                      <label className="text-xs text-slate-500">2nd Day Penalty (৳)</label>
-                      <input type="number" value={plan.monthlyPenalty2} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].monthlyPenalty2 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
-                    </div>
-                    <div>
-                      <label className="text-xs text-slate-500">3rd Day Penalty + Bike Lock (৳)</label>
-                      <input type="number" value={plan.monthlyPenalty3} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].monthlyPenalty3 = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-2 py-1.5 border border-slate-200 rounded-lg text-sm" />
-                    </div>
-                  </div>
-                </div>
-                <div className="bg-slate-50 rounded-lg p-3">
-                  <label className="text-xs font-semibold text-slate-500 uppercase tracking-wide block mb-2">Contract Duration (Months)</label>
-                  <div className="flex flex-wrap gap-2">
-                    {plan.contractMonths.map(month => (
-                      <button key={month} onClick={() => { const updated = [...settings.plans.shareEv]; updated[idx].contractMonths = updated[idx].contractMonths.filter(m => m !== month); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="px-3 py-1.5 rounded-lg text-xs font-medium bg-green-600 text-white hover:bg-red-500 transition-all flex items-center gap-1">
-                        {month} {month === 1 ? 'Month' : 'Months'}
-                        <span className="ml-1 font-bold">×</span>
-                      </button>
-                    ))}
-                    <div className="flex items-center gap-1">
-                      <input type="number" min="1" placeholder="Add" className="w-20 px-2 py-1.5 border border-slate-200 rounded-lg text-xs" onKeyDown={(e) => { if (e.key === 'Enter') { const val = parseInt((e.target as HTMLInputElement).value); if (val > 0 && !plan.contractMonths.includes(val)) { const updated = [...settings.plans.shareEv]; updated[idx].contractMonths = [...updated[idx].contractMonths, val].sort((a, b) => a - b); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); (e.target as HTMLInputElement).value = ''; } } }} />
-                      <button onClick={(e) => { const input = (e.currentTarget.previousElementSibling as HTMLInputElement); const val = parseInt(input.value); if (val > 0 && !plan.contractMonths.includes(val)) { const updated = [...settings.plans.shareEv]; updated[idx].contractMonths = [...updated[idx].contractMonths, val].sort((a, b) => a - b); setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); input.value = ''; } }} className="px-2 py-1.5 bg-green-600 text-white rounded-lg text-xs hover:bg-green-700">+</button>
-                    </div>
-                  </div>
-                  {plan.contractMonths.length === 0 && <p className="text-xs text-slate-400 mt-2">No contract months selected.</p>}
-                </div>
-                <div>
-                  <label className="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2 block">Description</label>
-                  <textarea value={plan.description} onChange={(e) => { const updated = [...settings.plans.shareEv]; updated[idx].description = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, shareEv: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" rows={2} placeholder="Enter plan description..." />
-                </div>
-              </div>
+            <div className="p-4 border-t border-slate-100 flex justify-end gap-2">
+              <button onClick={() => setDeleteModal({ type: null, idx: null })} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50">Cancel</button>
+              <button onClick={handleDeletePlan} className="px-4 py-2 bg-red-600 text-white rounded-lg text-sm hover:bg-red-700">Delete Plan</button>
             </div>
-          ))}
-          <button onClick={() => addNewPlan('shareEv')} className="w-full py-3 border-2 border-dashed border-slate-300 rounded-xl text-slate-500 hover:border-green-400 hover:text-green-500 hover:bg-green-50 transition-all flex items-center justify-center gap-2 text-sm font-medium">
-            <Plus className="w-4 h-4" /> Add New Plan
-          </button>
-        </div>
-      )}
-    </div>
-    {deleteModal.type !== null && deleteModal.idx !== null && (
-      <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
-        <div className="bg-white rounded-xl shadow-xl w-full max-w-sm">
-          <div className="p-4 border-b border-slate-100 flex justify-between items-center">
-            <h3 className="font-semibold text-slate-800 flex items-center gap-2">
-              <Trash2 className="w-5 h-5 text-red-500" /> Delete Plan
-            </h3>
-            <button onClick={() => setDeleteModal({ type: null, idx: null })} className="text-slate-400 hover:text-slate-600 text-2xl">&times;</button>
-          </div>
-          <div className="p-4">
-            <p className="text-sm text-slate-600">Are you sure you want to delete this plan? This action cannot be undone.</p>
-            {deleteModal.type && deleteModal.idx !== null && settings.plans[deleteModal.type][deleteModal.idx] && (
-              <div className="mt-3 p-3 bg-slate-50 rounded-lg">
-                <p className="text-sm font-medium text-slate-700">{settings.plans[deleteModal.type][deleteModal.idx].name}</p>
-              </div>
-            )}
-          </div>
-          <div className="p-4 border-t border-slate-100 flex justify-end gap-2">
-            <button onClick={() => setDeleteModal({ type: null, idx: null })} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm">Cancel</button>
-            <button onClick={handleDeletePlan} className="px-4 py-2 bg-red-600 text-white rounded-lg text-sm hover:bg-red-700">Delete Plan</button>
           </div>
         </div>
-      </div>
-    )}
+      )}
     </>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/admin/settings/page.tsx b/src/app/admin/settings/page.tsx
index 232fc67..8205af5 100644
--- a/src/app/admin/settings/page.tsx
+++ b/src/app/admin/settings/page.tsx
@@ -818,6 +818,9 @@ export default function CompanySettingsPage() {
   const [activeRentalTypeTab, setActiveRentalTypeTab] = useState<'single' | 'shared' | 'renttoown'>('single');
   const [saved, setSaved] = useState(false);
   const [activePlanTab, setActivePlanTab] = useState<'singleRent' | 'rentToOwn' | 'shareEv'>('singleRent');
+  const [isDirty, setIsDirty] = useState(false);
+  const [pendingTab, setPendingTab] = useState<typeof activeTab | null>(null);
+  const [showUnsavedModal, setShowUnsavedModal] = useState(false);
   const [addDocType, setAddDocType] = useState<'investor' | 'merchant' | 'swapstation' | 'rental' | null>(null);
   const [newDocName, setNewDocName] = useState('');
   const [newDocDesc, setNewDocDesc] = useState('');
@@ -873,7 +876,7 @@ export default function CompanySettingsPage() {
         ficoShareEv: newInvestFicoShareEv,
       };
       const updatedPlans = [...settings.plans.investment, newPlan];
-      setSettings({ ...settings, plans: { ...settings.plans, investment: updatedPlans } });
+      updateSettings({ ...settings, plans: { ...settings.plans, investment: updatedPlans } });
       setActiveInvestTab(updatedPlans.length - 1);
       setAddInvestPlan(false);
       setNewInvestName('');
@@ -909,7 +912,7 @@ export default function CompanySettingsPage() {
         description: newSwapDesc
       };
       const updatedPlans = [...settings.plans.swapStation, newPlan];
-      setSettings({ ...settings, plans: { ...settings.plans, swapStation: updatedPlans } });
+      updateSettings({ ...settings, plans: { ...settings.plans, swapStation: updatedPlans } });
       setActiveSwapTab(updatedPlans.length - 1);
       setAddSwapStationPlan(false);
       setNewSwapName('');
@@ -947,7 +950,7 @@ export default function CompanySettingsPage() {
         description: newRiderDesc
       };
       const updatedPlans = [...settings.plans.riderRequest, newPlan];
-      setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updatedPlans } });
+      updateSettings({ ...settings, plans: { ...settings.plans, riderRequest: updatedPlans } });
       setActiveRiderTab(updatedPlans.length - 1);
       setAddRiderPlan(false);
       setNewRiderName('');
@@ -955,9 +958,24 @@ export default function CompanySettingsPage() {
   };
   const handleSave = () => {
     setSaved(true);
+    setIsDirty(false);
     setTimeout(() => setSaved(false), 2000);
   };
 
+  const handleTabChange = (tab: typeof activeTab) => {
+    if (isDirty) {
+      setPendingTab(tab);
+      setShowUnsavedModal(true);
+    } else {
+      setActiveTab(tab);
+    }
+  };
+
+  const updateSettings = (updater: React.SetStateAction<CompanySettings>) => {
+    setSettings(updater);
+    setIsDirty(true);
+  };
+
   const addNewPlan = (type: 'singleRent' | 'rentToOwn' | 'shareEv') => {
     const newId = `${type}-${Date.now()}`;
     const defaultPlan = type === 'singleRent' ? {
@@ -1034,23 +1052,24 @@ export default function CompanySettingsPage() {
       description: '',
     };
     if (type === 'singleRent') {
-      setSettings({ ...settings, plans: { ...settings.plans, singleRent: [...settings.plans.singleRent, defaultPlan as typeof settings.plans.singleRent[number]] } });
+      updateSettings({ ...settings, plans: { ...settings.plans, singleRent: [...settings.plans.singleRent, defaultPlan as typeof settings.plans.singleRent[number]] } });
     } else if (type === 'rentToOwn') {
-      setSettings({ ...settings, plans: { ...settings.plans, rentToOwn: [...settings.plans.rentToOwn, defaultPlan as typeof settings.plans.rentToOwn[number]] } });
+      updateSettings({ ...settings, plans: { ...settings.plans, rentToOwn: [...settings.plans.rentToOwn, defaultPlan as typeof settings.plans.rentToOwn[number]] } });
     } else {
-      setSettings({ ...settings, plans: { ...settings.plans, shareEv: [...settings.plans.shareEv, defaultPlan as typeof settings.plans.shareEv[number]] } });
+      updateSettings({ ...settings, plans: { ...settings.plans, shareEv: [...settings.plans.shareEv, defaultPlan as typeof settings.plans.shareEv[number]] } });
     }
+    return newId;
   };
 
   const addPolicyRule = (tab: 'investor' | 'merchant' | 'swapstation') => {
     if (!newPolicyName.trim()) return;
     const newRule = { title: newPolicyName, description: newPolicyDesc || '<p></p>' };
     if (tab === 'investor') {
-      setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, investor: [...settings.companyPolicy.investor, newRule] } });
+      updateSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, investor: [...settings.companyPolicy.investor, newRule] } });
     } else if (tab === 'merchant') {
-      setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, merchant: [...settings.companyPolicy.merchant, newRule] } });
+      updateSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, merchant: [...settings.companyPolicy.merchant, newRule] } });
     } else if (tab === 'swapstation') {
-      setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, swapStation: [...settings.companyPolicy.swapStation, newRule] } });
+      updateSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, swapStation: [...settings.companyPolicy.swapStation, newRule] } });
     }
     setNewPolicyName('');
     setNewPolicyDesc('');
@@ -1060,13 +1079,13 @@ export default function CompanySettingsPage() {
   const deletePolicyRule = (tab: 'investor' | 'merchant' | 'swapstation', index: number) => {
     if (tab === 'investor') {
       const newRules = settings.companyPolicy.investor.filter((_, i) => i !== index);
-      setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, investor: newRules } });
+      updateSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, investor: newRules } });
     } else if (tab === 'merchant') {
       const newRules = settings.companyPolicy.merchant.filter((_, i) => i !== index);
-      setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, merchant: newRules } });
+      updateSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, merchant: newRules } });
     } else if (tab === 'swapstation') {
       const newRules = settings.companyPolicy.swapStation.filter((_, i) => i !== index);
-      setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, swapStation: newRules } });
+      updateSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, swapStation: newRules } });
     }
   };
 
@@ -1075,15 +1094,15 @@ export default function CompanySettingsPage() {
     if (tab === 'investor') {
       const newRules = [...settings.companyPolicy.investor];
       newRules[index] = { title: editPolicyName, description: newDesc };
-      setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, investor: newRules } });
+      updateSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, investor: newRules } });
     } else if (tab === 'merchant') {
       const newRules = [...settings.companyPolicy.merchant];
       newRules[index] = { title: editPolicyName, description: newDesc };
-      setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, merchant: newRules } });
+      updateSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, merchant: newRules } });
     } else if (tab === 'swapstation') {
       const newRules = [...settings.companyPolicy.swapStation];
       newRules[index] = { title: editPolicyName, description: newDesc };
-      setSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, swapStation: newRules } });
+      updateSettings({ ...settings, companyPolicy: { ...settings.companyPolicy, swapStation: newRules } });
     }
     setEditingPolicy(null);
   };
@@ -1106,7 +1125,26 @@ export default function CompanySettingsPage() {
   ];
 
   return (
-    <div className="p-4 lg:p-6">
+    <>
+      {showUnsavedModal && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-xl shadow-2xl w-full max-w-sm overflow-hidden">
+            <div className="p-6 text-center">
+              <div className="w-14 h-14 bg-amber-50 rounded-full flex items-center justify-center mx-auto mb-4">
+                <Save className="w-7 h-7 text-amber-500" />
+              </div>
+              <h3 className="text-lg font-bold text-slate-800 mb-1">Unsaved Changes</h3>
+              <p className="text-sm text-slate-500">You have unsaved changes. What would you like to do?</p>
+            </div>
+            <div className="p-4 bg-slate-50 flex gap-3">
+              <button onClick={() => { setShowUnsavedModal(false); setPendingTab(null); }} className="flex-1 py-2.5 bg-white border border-slate-200 text-slate-600 rounded-lg text-sm font-medium hover:bg-slate-100 transition-colors">Keep Editing</button>
+              <button onClick={() => { setIsDirty(false); setShowUnsavedModal(false); setActiveTab(pendingTab!); setPendingTab(null); }} className="flex-1 py-2.5 bg-slate-600 text-white rounded-lg text-sm font-medium hover:bg-slate-700 transition-colors">Discard</button>
+              <button onClick={() => { handleSave(); setShowUnsavedModal(false); setActiveTab(pendingTab!); setPendingTab(null); }} className="flex-1 py-2.5 bg-accent text-white rounded-lg text-sm font-medium hover:bg-accent-dark transition-colors">Save & Switch</button>
+            </div>
+          </div>
+        </div>
+      )}
+      <div className="p-4 lg:p-6">
       <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-6">
         <div>
           <h1 className="text-2xl lg:text-3xl font-extrabold text-slate-800">Company Settings</h1>
@@ -1132,7 +1170,7 @@ export default function CompanySettingsPage() {
             {tabs.map(tab => (
               <button
                 key={tab.id}
-                onClick={() => setActiveTab(tab.id as typeof activeTab)}
+                onClick={() => handleTabChange(tab.id as typeof activeTab)}
                 className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors ${activeTab === tab.id
                   ? 'bg-accent text-white'
                   : 'text-slate-600 hover:bg-slate-50'
@@ -1147,29 +1185,29 @@ export default function CompanySettingsPage() {
 
         <div className="lg:col-span-3 bg-white rounded-xl shadow-sm border border-slate-100">
           {activeTab === 'general' && (
-            <GeneralSettings settings={settings} setSettings={setSettings} />
+            <GeneralSettings settings={settings} setSettings={updateSettings} />
           )}
 
           {activeTab === 'branding' && (
-            <BrandingSettings settings={settings} setSettings={setSettings} />
+            <BrandingSettings settings={settings} setSettings={updateSettings} />
           )}
 
           {activeTab === 'social' && (
-            <SocialSettings settings={settings} setSettings={setSettings} />
+            <SocialSettings settings={settings} setSettings={updateSettings} />
           )}
 
           {activeTab === 'integration' && (
-            <IntegrationSettings settings={settings} setSettings={setSettings} />
+            <IntegrationSettings settings={settings} setSettings={updateSettings} />
           )}
 
           {activeTab === 'landing' && (
-            <LandingSettings settings={settings} setSettings={setSettings} />
+            <LandingSettings settings={settings} setSettings={updateSettings} />
           )}
 
           {activeTab === 'kyc' && (
             <KycSettings
               settings={settings}
-              setSettings={setSettings}
+              setSettings={updateSettings}
               activeMasterTab={activeMasterTab}
               setActiveMasterTab={setActiveMasterTab}
               addDocType={addDocType}
@@ -1184,7 +1222,7 @@ export default function CompanySettingsPage() {
           {activeTab === 'parts' && (
             <PartsSettings
               settings={settings}
-              setSettings={setSettings}
+              setSettings={updateSettings}
               showAddPolicy={showAddPolicy}
               setShowAddPolicy={setShowAddPolicy}
               newPolicyName={newPolicyName}
@@ -1205,7 +1243,7 @@ export default function CompanySettingsPage() {
           {activeTab === 'companyPolicy' && (
             <CompanyPolicySettings
               settings={settings}
-              setSettings={setSettings}
+              setSettings={updateSettings}
               activeMasterTab={activeMasterTab}
               setActiveMasterTab={setActiveMasterTab}
               activeRentalTypeTab={activeRentalTypeTab}
@@ -1230,11 +1268,12 @@ export default function CompanySettingsPage() {
           {activeTab === 'plans' && (
             <PlanSelection
               settings={settings}
-              setSettings={setSettings}
+              setSettings={updateSettings}
               activePlanTab={activePlanTab}
               setActivePlanTab={setActivePlanTab}
               handleSave={handleSave}
               addNewPlan={addNewPlan}
+              isDirty={isDirty}
             />
           )}
 
@@ -1310,5 +1349,6 @@ export default function CompanySettingsPage() {
 
 
     </div >
+    </>
   );
 }
\ No newline at end of file