feat: introduce rental condition tiers (Premium, Standard, Economy) with dynamic pricing and UI selection

src/app/admin/rentals/page.tsx

@@ -104,9 +104,21 @@ const mockHubs = [
 ];
 
 const rentalSettings = {
-  single: { deposit: 3000, contractMonths: [1, 3, 6, 12], dailyRate: 150, weeklyRate: 900, monthlyRate: 3500 },
+  single: {
-  shared: { deposit: 2000, contractMonths: [1, 3, 6], dailyRate: 100, weeklyRate: 600, monthlyRate: 2200 },
+    Premium: { deposit: 5000, contractMonths: [1, 3, 6, 12], dailyRate: 200, weeklyRate: 1200, monthlyRate: 5000 },
-  'rent-to-own': { deposit: 10000, contractMonths: [12, 18, 24, 36], dailyRate: 500, weeklyRate: 3000, monthlyRate: 12000 },
+    Standard: { deposit: 3000, contractMonths: [1, 3, 6, 12], dailyRate: 150, weeklyRate: 900, monthlyRate: 3500 },
+    Economy: { deposit: 2000, contractMonths: [1, 3, 6, 12], dailyRate: 100, weeklyRate: 600, monthlyRate: 2500 },
+  },
+  shared: {
+    Premium: { deposit: 4000, contractMonths: [1, 3, 6], dailyRate: 150, weeklyRate: 900, monthlyRate: 3500 },
+    Standard: { deposit: 2500, contractMonths: [1, 3, 6], dailyRate: 100, weeklyRate: 600, monthlyRate: 2200 },
+    Economy: { deposit: 2000, contractMonths: [1, 3, 6], dailyRate: 80, weeklyRate: 500, monthlyRate: 1800 },
+  },
+  'rent-to-own': {
+    Premium: { deposit: 15000, contractMonths: [12, 18, 24, 36], dailyRate: 350, weeklyRate: 2450, monthlyRate: 10500 },
+    Standard: { deposit: 12000, contractMonths: [12, 18, 24, 36], dailyRate: 250, weeklyRate: 1750, monthlyRate: 7000 },
+    Economy: { deposit: 10000, contractMonths: [12, 18, 24, 36], dailyRate: 200, weeklyRate: 1400, monthlyRate: 6000 },
+  },
 };
 
 const mockRentals: Rental[] = [
@@ -265,6 +277,7 @@ export default function RentalsPage() {
   const [newRental, setNewRental] = useState<{
     userId: string;
     type: RentalType;
+    condition: 'Premium' | 'Standard' | 'Economy';
     subscriptionType: 'daily' | 'weekly' | 'monthly';
     contractMonths: number;
     bikeId: string;
@@ -274,6 +287,7 @@ export default function RentalsPage() {
   }>({
     userId: '',
     type: 'single',
+    condition: 'Standard',
     subscriptionType: 'daily',
     contractMonths: 0,
     bikeId: '',
@@ -379,6 +393,8 @@ export default function RentalsPage() {
   const eligibleUsers = mockUsers.filter(u => u.kycStatus === 'approved' && !u.hasActiveRental);
   const availableBikes = mockBikes.filter(b => b.status === 'available');
 
+  const selectedSettings = rentalSettings[newRental.type]?.[newRental.condition] || rentalSettings.single.Standard;
+
   const stats = {
     active: rentals.filter(r => r.status === 'active').length,
     pending: rentals.filter(r => r.status === 'pending').length,
@@ -395,7 +411,7 @@ export default function RentalsPage() {
     const bike = mockBikes.find(b => b.id === newRental.bikeId);
     const user = mockUsers.find(u => u.id === newRental.userId);
     const hub = mockHubs.find(h => h.id === newRental.hubId);
-    const settings = rentalSettings[newRental.type];
+    const settings = rentalSettings[newRental.type]?.[newRental.condition];
 
     const rental: Rental = {
       id: `RNT-${String(rentals.length + 1).padStart(3, '0')}`,
@@ -438,6 +454,7 @@ export default function RentalsPage() {
     setNewRental({
       userId: '',
       type: 'single',
+      condition: 'Standard',
       subscriptionType: 'daily',
       contractMonths: 0,
       bikeId: '',
@@ -447,7 +464,6 @@ export default function RentalsPage() {
     });
   };
 
-  const selectedSettings = rentalSettings[newRental.type];
   const selectedBike = mockBikes.find(b => b.id === newRental.bikeId);
   const selectedUser = mockUsers.find(u => u.id === newRental.userId);
 
@@ -683,12 +699,11 @@ export default function RentalsPage() {
 
               {createStep === 2 && (
                 <div className="space-y-4">
-                  <h4 className="font-medium text-slate-700 mb-3">Step 2: Rental Details</h4>
                   <div>
                     <label className="text-sm text-slate-600">Rental Type</label>
                     <select
                       value={newRental.type}
-                      onChange={(e) => setNewRental({ ...newRental, type: e.target.value as RentalType, subscriptionType: 'daily' })}
+                      onChange={(e) => setNewRental({ ...newRental, type: e.target.value as RentalType, condition: 'Standard', subscriptionType: 'daily' })}
                       className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                     >
                       <option value="single">Single Rent</option>
@@ -696,6 +711,27 @@ export default function RentalsPage() {
                       <option value="rent-to-own">Rent to Own</option>
                     </select>
                   </div>
+                  <div>
+                    <label className="text-sm text-slate-600">Condition</label>
+                    <div className="grid grid-cols-3 gap-2 mt-1">
+                      {(['Premium', 'Standard', 'Economy'] as const).map(cond => (
+                        <button
+                          key={cond}
+                          type="button"
+                          onClick={() => setNewRental({ ...newRental, condition: cond })}
+                          className={`py-2 px-3 rounded-lg text-sm border ${
+                            newRental.condition === cond
+                              ? cond === 'Premium' ? 'bg-purple-100 border-purple-300 text-purple-700'
+                              : cond === 'Standard' ? 'bg-blue-100 border-blue-300 text-blue-700'
+                              : 'bg-amber-100 border-amber-300 text-amber-700'
+                              : 'border-slate-200 text-slate-600 hover:bg-slate-50'
+                          }`}
+                        >
+                          {cond}
+                        </button>
+                      ))}
+                    </div>
+                  </div>
                   <div>
                     <label className="text-sm text-slate-600">Contract Duration</label>
                     <select
@@ -703,10 +739,16 @@ export default function RentalsPage() {
                       onChange={(e) => setNewRental({ ...newRental, contractMonths: Number(e.target.value) })}
                       className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                     >
+                      <option value={0}>Daily Basis</option>
                       {selectedSettings.contractMonths.map(m => (
                         <option key={m} value={m}>{m} Months</option>
                       ))}
                     </select>
+                    {newRental.contractMonths > 0 && (
+                      <p className="text-xs text-emerald-600 mt-1">
+                        End Date: {new Date(new Date(newRental.startDate).setMonth(new Date(newRental.startDate).getMonth() + newRental.contractMonths)).toISOString().split('T')[0]}
+                      </p>
+                    )}
                   </div>
                   <div>
                     <label className="text-sm text-slate-600 mb-2 block">Subscription Type</label>
@@ -726,11 +768,14 @@ export default function RentalsPage() {
                       ))}
                     </div>
                   </div>
-                  <div className="bg-slate-50 p-3 rounded-lg">
+                  <div className="bg-emerald-50 p-3 rounded-lg border border-emerald-100">
-                    <p className="text-sm text-slate-600">Deposit: ৳{selectedSettings.deposit.toLocaleString()}</p>
+                    <div className="flex items-center justify-between mb-1">
+                      <span className="text-xs text-emerald-600 font-medium uppercase tracking-wide">{newRental.condition} - {newRental.type === 'single' ? 'Single Rent' : newRental.type === 'shared' ? 'Share EV' : 'Rent to Own'}</span>
+                    </div>
+                    <p className="text-sm text-slate-600">Deposit: <span className="font-semibold text-slate-800">৳{selectedSettings.deposit.toLocaleString()}</span></p>
                     <p className="text-sm text-slate-600">
-                      Rate: ৳{newRental.subscriptionType === 'daily' ? selectedSettings.dailyRate : newRental.subscriptionType === 'weekly' ? selectedSettings.weeklyRate : selectedSettings.monthlyRate}/
+                      Rate: <span className="font-semibold text-slate-800">৳{newRental.subscriptionType === 'daily' ? selectedSettings.dailyRate : newRental.subscriptionType === 'weekly' ? selectedSettings.weeklyRate : selectedSettings.monthlyRate}</span>
-                      {newRental.subscriptionType === 'daily' ? 'day' : newRental.subscriptionType === 'weekly' ? 'week' : 'month'}
+                      <span className="text-slate-500">/{newRental.subscriptionType === 'daily' ? 'day' : newRental.subscriptionType === 'weekly' ? 'week' : 'month'}</span>
                     </p>
                   </div>
                 </div>