feat: add Rider Request Plan management section to admin settings

src/app/admin/settings/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState } from 'react';
-import { Settings, Upload, Image, Globe, Mail, MessageSquare, Phone, MapPin, Link2, Clock, Save, FileText, Camera, Palette, Ruler, Sun, Moon, Monitor, Smartphone, Tablet, Package, Wrench, FileCheck, BadgeDollarSign, CreditCard, Plus, X, DollarSign, Zap } from 'lucide-react';
+import { Settings, Upload, Image, Globe, Mail, MessageSquare, Phone, MapPin, Link2, Clock, Save, FileText, Camera, Palette, Ruler, Sun, Moon, Monitor, Smartphone, Tablet, Package, Wrench, FileCheck, BadgeDollarSign, CreditCard, Plus, X, DollarSign, Zap, Users } from 'lucide-react';
 
 interface CompanySettings {
   name: string;
@@ -151,6 +151,21 @@ interface CompanySettings {
       status: string;
       description: string;
     }[];
+    riderRequest: {
+      id: string;
+      tier: string;
+      name: string;
+      minRiders: number;
+      maxRiders: number;
+      monthlySubscription: number;
+      dailySubscription: number;
+      deposit: number;
+      commissionPercent: number;
+      dailyRideTarget: number;
+      weeklyHoliday: number;
+      status: string;
+      description: string;
+    }[];
   };
 }
 
@@ -536,12 +551,59 @@ const initialSettings: CompanySettings = {
         description: 'Premium swap station for large operators',
       }
     ],
+    riderRequest: [
+      {
+        id: 'rider_1',
+        tier: 'Premium',
+        name: 'Premium Rider Plan',
+        minRiders: 10,
+        maxRiders: 50,
+        monthlySubscription: 3000,
+        dailySubscription: 150,
+        deposit: 5000,
+        commissionPercent: 70,
+        dailyRideTarget: 15,
+        weeklyHoliday: 1,
+        status: 'active',
+        description: 'Premium rider plan for high volume operators',
+      },
+      {
+        id: 'rider_2',
+        tier: 'Standard',
+        name: 'Standard Rider Plan',
+        minRiders: 5,
+        maxRiders: 20,
+        monthlySubscription: 1500,
+        dailySubscription: 80,
+        deposit: 3000,
+        commissionPercent: 60,
+        dailyRideTarget: 10,
+        weeklyHoliday: 1,
+        status: 'active',
+        description: 'Standard rider plan for medium operators',
+      },
+      {
+        id: 'rider_3',
+        tier: 'Economy',
+        name: 'Economy Rider Plan',
+        minRiders: 1,
+        maxRiders: 10,
+        monthlySubscription: 500,
+        dailySubscription: 30,
+        deposit: 1000,
+        commissionPercent: 50,
+        dailyRideTarget: 5,
+        weeklyHoliday: 0,
+        status: 'active',
+        description: 'Economy rider plan for small operators',
+      }
+    ],
   },
 };
 
 export default function CompanySettingsPage() {
   const [settings, setSettings] = useState<CompanySettings>(initialSettings);
-  const [activeTab, setActiveTab] = useState<'general' | 'branding' | 'social' | 'integration' | 'landing' | 'kyc' | 'parts' | 'rental' | 'plans' | 'investment' | 'swapstation'>('general');
+  const [activeTab, setActiveTab] = useState<'general' | 'branding' | 'social' | 'integration' | 'landing' | 'kyc' | 'parts' | 'rental' | 'plans' | 'investment' | 'swapstation' | 'riderrequest'>('general');
   const [activeMasterTab, setActiveMasterTab] = useState<'investor' | 'merchant' | 'swapstation' | 'rental'>('investor');
   const [saved, setSaved] = useState(false);
   const [activePlanTab, setActivePlanTab] = useState<'singleRent' | 'rentToOwn' | 'shareEv'>('singleRent');
@@ -626,10 +688,47 @@ export default function CompanySettingsPage() {
       setSettings({ ...settings, plans: { ...settings.plans, swapStation: updatedPlans } });
       setActiveSwapTab(updatedPlans.length - 1);
       setAddSwapStationPlan(false);
-      setNewSwapName('');
+setNewSwapName('');
+    }
+  };
+  const [activeRiderTab, setActiveRiderTab] = useState(0);
+  const [addRiderPlan, setAddRiderPlan] = useState(false);
+  const [newRiderName, setNewRiderName] = useState('');
+  const [newRiderTier, setNewRiderTier] = useState('Standard');
+  const [newRiderStatus, setNewRiderStatus] = useState('active');
+  const [newRiderMin, setNewRiderMin] = useState(1);
+  const [newRiderMax, setNewRiderMax] = useState(10);
+  const [newRiderMonthly, setNewRiderMonthly] = useState(500);
+  const [newRiderDaily, setNewRiderDaily] = useState(30);
+  const [newRiderDeposit, setNewRiderDeposit] = useState(1000);
+  const [newRiderCommission, setNewRiderCommission] = useState(50);
+  const [newRiderTarget, setNewRiderTarget] = useState(5);
+  const [newRiderHoliday, setNewRiderHoliday] = useState(0);
+  const [newRiderDesc, setNewRiderDesc] = useState('');
+  const createRiderPlan = () => {
+    if (newRiderName.trim() && typeof window !== 'undefined') {
+      const newPlan = {
+        id: 'rider_' + Date.now(),
+        name: newRiderName,
+        tier: newRiderTier,
+        minRiders: newRiderMin,
+        maxRiders: newRiderMax,
+        monthlySubscription: newRiderMonthly,
+        dailySubscription: newRiderDaily,
+        deposit: newRiderDeposit,
+        commissionPercent: newRiderCommission,
+        dailyRideTarget: newRiderTarget,
+        weeklyHoliday: newRiderHoliday,
+        status: newRiderStatus,
+        description: newRiderDesc
+      };
+      const updatedPlans = [...settings.plans.riderRequest, newPlan];
+      setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updatedPlans } });
+      setActiveRiderTab(updatedPlans.length - 1);
+      setAddRiderPlan(false);
+      setNewRiderName('');
     }
   };
-
   const handleSave = () => {
     setSaved(true);
     setTimeout(() => setSaved(false), 2000);
@@ -647,6 +746,7 @@ export default function CompanySettingsPage() {
     { id: 'plans', label: 'Plan Selection', icon: Package },
     { id: 'investment', label: 'Investment Plan', icon: DollarSign },
     { id: 'swapstation', label: 'Swap Station Plan', icon: Zap },
+    { id: 'riderrequest', label: 'Rider Request Plan', icon: Users },
   ];
 
   return (
@@ -2292,6 +2392,182 @@ export default function CompanySettingsPage() {
               ))}
             </div>
           )}
+
+          {(activeTab as string) === 'riderrequest' && (
+            <div className="p-6 space-y-6">
+              <div className="flex items-center justify-between">
+                <h3 className="text-lg font-semibold text-slate-800">Rider Request Plans</h3>
+              </div>
+
+              <div className="flex items-center justify-between bg-rose-50 border border-rose-200 rounded-xl p-4">
+                <div>
+                  <h4 className="font-semibold text-rose-800">Rider Request Plans ({settings.plans.riderRequest.length})</h4>
+                  <p className="text-sm text-rose-600">Manage rider request plans for operators</p>
+                </div>
+                <button onClick={() => { setAddRiderPlan(true); setNewRiderName(''); }} className="px-4 py-2 bg-rose-600 text-white rounded-lg text-sm font-medium flex items-center gap-2">
+                  <Plus className="w-4 h-4" /> New Plan
+                </button>
+              </div>
+
+              {addRiderPlan && (
+                <div className="bg-white rounded-xl border border-rose-300 overflow-hidden">
+                  <div className="bg-rose-100 px-4 py-3 border-b border-rose-200 flex items-center justify-between">
+                    <div>
+                      <h4 className="font-semibold text-rose-800">New Rider Request Plan</h4>
+                      <p className="text-sm text-rose-600 mt-1">Fill in the details below</p>
+                    </div>
+                    <button onClick={() => setAddRiderPlan(false)} className="text-rose-600 hover:text-rose-800">
+                      <X className="w-5 h-5" />
+                    </button>
+                  </div>
+                  <div className="p-4">
+                    <div className="grid lg:grid-cols-3 gap-4">
+                      <div>
+                        <label className="text-sm text-slate-600">Plan Name</label>
+                        <input type="text" value={newRiderName} onChange={(e) => setNewRiderName(e.target.value)} placeholder="e.g., Premium Rider Plan" className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                      </div>
+                      <div>
+                        <label className="text-sm text-slate-600">Tier</label>
+                        <select value={newRiderTier} onChange={(e) => setNewRiderTier(e.target.value)} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1">
+                          <option value="Premium">Premium</option>
+                          <option value="Standard">Standard</option>
+                          <option value="Economy">Economy</option>
+                        </select>
+                      </div>
+                      <div>
+                        <label className="text-sm text-slate-600">Status</label>
+                        <select value={newRiderStatus} onChange={(e) => setNewRiderStatus(e.target.value)} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1">
+                          <option value="active">Active</option>
+                          <option value="paused">Paused</option>
+                          <option value="closed">Closed</option>
+                        </select>
+                      </div>
+                      <div>
+                        <label className="text-sm text-slate-600">Min Riders</label>
+                        <input type="number" value={newRiderMin} onChange={(e) => setNewRiderMin(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                      </div>
+                      <div>
+                        <label className="text-sm text-slate-600">Max Riders</label>
+                        <input type="number" value={newRiderMax} onChange={(e) => setNewRiderMax(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                      </div>
+                      <div>
+                        <label className="text-sm text-slate-600">Monthly Subscription (৳)</label>
+                        <input type="number" value={newRiderMonthly} onChange={(e) => setNewRiderMonthly(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                      </div>
+                      <div>
+                        <label className="text-sm text-slate-600">Daily Subscription (৳)</label>
+                        <input type="number" value={newRiderDaily} onChange={(e) => setNewRiderDaily(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                      </div>
+                      <div>
+                        <label className="text-sm text-slate-600">Deposit (৳)</label>
+                        <input type="number" value={newRiderDeposit} onChange={(e) => setNewRiderDeposit(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                      </div>
+                      <div>
+                        <label className="text-sm text-slate-600">Commission (%)</label>
+                        <input type="number" value={newRiderCommission} onChange={(e) => setNewRiderCommission(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                      </div>
+                      <div>
+                        <label className="text-sm text-slate-600">Daily Ride Target</label>
+                        <input type="number" value={newRiderTarget} onChange={(e) => setNewRiderTarget(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                      </div>
+                      <div>
+                        <label className="text-sm text-slate-600">Weekly Holiday</label>
+                        <input type="number" value={newRiderHoliday} onChange={(e) => setNewRiderHoliday(parseInt(e.target.value))} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                      </div>
+                    </div>
+                    <div className="mt-4">
+                      <label className="text-sm text-slate-600">Description</label>
+                      <textarea value={newRiderDesc} onChange={(e) => setNewRiderDesc(e.target.value)} placeholder="Enter plan description" className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" rows={2} />
+                    </div>
+                    <button onClick={createRiderPlan} className="mt-4 px-4 py-2 bg-rose-600 text-white rounded-lg text-sm font-medium">Create Plan</button>
+                  </div>
+                </div>
+              )}
+
+              <div className="flex gap-2 border-b border-slate-200">
+                {settings.plans.riderRequest.map((plan, idx) => (
+                  <button key={idx} onClick={() => setActiveRiderTab(idx)} className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px ${activeRiderTab === idx ? 'border-rose-500 text-rose-600' : 'border-transparent text-slate-500 hover:text-slate-700'}`}>{idx + 1}. {plan.name}</button>
+                ))}
+              </div>
+
+              {settings.plans.riderRequest.length > 0 && settings.plans.riderRequest.map((plan, idx) => idx === activeRiderTab && (
+                <div key={idx} className="bg-white rounded-xl border border-slate-200 overflow-hidden">
+                  <div className="bg-rose-50 px-4 py-3 border-b border-rose-100 flex items-center justify-between">
+                    <div>
+                      <h4 className="font-semibold text-rose-800">{plan.name} - {plan.tier}</h4>
+                      <p className="text-sm text-rose-600 mt-1">{plan.description}</p>
+                    </div>
+                    <span className={`px-2 py-1 rounded-full text-xs font-medium ${plan.status === 'active' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>{plan.status}</span>
+                  </div>
+                  <div className="p-4">
+                    <div className="grid lg:grid-cols-3 gap-4">
+                      <div>
+                        <label className="text-sm text-slate-600">Plan Name</label>
+                        <input type="text" value={plan.name} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].name = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                      </div>
+                      <div>
+                        <label className="text-sm text-slate-600">Tier</label>
+                        <select value={plan.tier} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].tier = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1">
+                          <option value="Premium">Premium</option>
+                          <option value="Standard">Standard</option>
+                          <option value="Economy">Economy</option>
+                        </select>
+                      </div>
+                      <div>
+                        <label className="text-sm text-slate-600">Status</label>
+                        <select value={plan.status} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].status = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1">
+                          <option value="active">Active</option>
+                          <option value="paused">Paused</option>
+                          <option value="closed">Closed</option>
+                        </select>
+                      </div>
+                      <div>
+                        <label className="text-sm text-slate-600">Min Riders</label>
+                        <input type="number" value={plan.minRiders} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].minRiders = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                      </div>
+                      <div>
+                        <label className="text-sm text-slate-600">Max Riders</label>
+                        <input type="number" value={plan.maxRiders} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].maxRiders = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                      </div>
+                      <div>
+                        <label className="text-sm text-slate-600">Monthly Subscription (৳)</label>
+                        <input type="number" value={plan.monthlySubscription} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].monthlySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                      </div>
+                      <div>
+                        <label className="text-sm text-slate-600">Daily Subscription (৳)</label>
+                        <input type="number" value={plan.dailySubscription} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].dailySubscription = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                      </div>
+                      <div>
+                        <label className="text-sm text-slate-600">Deposit (৳)</label>
+                        <input type="number" value={plan.deposit} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].deposit = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                      </div>
+                      <div>
+                        <label className="text-sm text-slate-600">Commission (%)</label>
+                        <input type="number" value={plan.commissionPercent} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].commissionPercent = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                      </div>
+                      <div>
+                        <label className="text-sm text-slate-600">Daily Ride Target</label>
+                        <input type="number" value={plan.dailyRideTarget} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].dailyRideTarget = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                      </div>
+                      <div>
+                        <label className="text-sm text-slate-600">Weekly Holiday</label>
+                        <input type="number" value={plan.weeklyHoliday} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].weeklyHoliday = parseInt(e.target.value); setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" />
+                      </div>
+                    </div>
+                    <div className="mt-4">
+                      <label className="text-sm text-slate-600">Description</label>
+                      <textarea value={plan.description} onChange={(e) => { const updated = [...settings.plans.riderRequest]; updated[idx].description = e.target.value; setSettings({ ...settings, plans: { ...settings.plans, riderRequest: updated } }); }} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1" rows={2} />
+                    </div>
+                    <div className="mt-4 flex justify-end">
+                      <button onClick={handleSave} className="px-4 py-2 bg-rose-600 text-white rounded-lg text-sm font-medium flex items-center gap-2">
+                        <Save className="w-4 h-4" /> Save Changes
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
         </div>
       </div>