feat: add EV model selection and deposit tracking to rental management workflow

src/app/admin/rentals/page.tsx

@@ -273,24 +273,24 @@ export default function RentalsPage() {
   const [lockPermission, setLockPermission] = useState(false);
   const [unlockPermission, setUnlockPermission] = useState(false);
   const [planConditions, setPlanConditions] = useState<{
-    single: { name: string; deposit: number; dailyRate: number; weeklyRate: number; monthlyRate: number; contractMonths: number[] }[];
+    single: { name: string; deposit: number; dailyRate: number; weeklyRate: number; monthlyRate: number; contractMonths: number[]; evModels: string[] }[];
-    shared: { name: string; deposit: number; dailyRate: number; weeklyRate: number; monthlyRate: number; contractMonths: number[] }[];
+    shared: { name: string; deposit: number; dailyRate: number; weeklyRate: number; monthlyRate: number; contractMonths: number[]; evModels: string[] }[];
-    'rent-to-own': { name: string; deposit: number; dailyRate: number; weeklyRate: number; monthlyRate: number; contractMonths: number[] }[];
+    'rent-to-own': { name: string; deposit: number; dailyRate: number; weeklyRate: number; monthlyRate: number; contractMonths: number[]; evModels: string[] }[];
   }>({
     single: [
-      { name: 'Single Rent - Premium', deposit: 25000, dailyRate: 400, weeklyRate: 2800, monthlyRate: 12000, contractMonths: [1, 3, 6, 12] },
+      { name: 'Single Rent - Premium', deposit: 25000, dailyRate: 400, weeklyRate: 2800, monthlyRate: 12000, contractMonths: [1, 3, 6, 12], evModels: ['Yadea G5', 'Yadea C1S', 'Himiwa 400', 'Himiwa 500', 'Himiwa 600', 'TVS iQube', 'Bexly 1S', 'Bexly 3S', 'Bexly 5E', 'Bolan E-Bike', 'Nova E-Bike', 'Super Eco', 'Other'] },
-      { name: 'Single Rent - Standard', deposit: 20000, dailyRate: 300, weeklyRate: 2100, monthlyRate: 9000, contractMonths: [1, 3, 6, 12] },
+      { name: 'Single Rent - Standard', deposit: 20000, dailyRate: 300, weeklyRate: 2100, monthlyRate: 9000, contractMonths: [1, 3, 6, 12], evModels: ['Yadea G5', 'Yadea C1S', 'Himiwa 400', 'Himiwa 500', 'Himiwa 600', 'TVS iQube', 'Bexly 1S', 'Bexly 3S', 'Bexly 5E', 'Bolan E-Bike', 'Nova E-Bike', 'Super Eco', 'Other'] },
-      { name: 'Single Rent - Economy', deposit: 15000, dailyRate: 250, weeklyRate: 1750, monthlyRate: 7500, contractMonths: [1, 3, 6, 12] },
+      { name: 'Single Rent - Economy', deposit: 15000, dailyRate: 250, weeklyRate: 1750, monthlyRate: 7500, contractMonths: [1, 3, 6, 12], evModels: ['Yadea G5', 'Yadea C1S', 'Himiwa 400', 'Himiwa 500', 'Himiwa 600', 'TVS iQube', 'Bexly 1S', 'Bexly 3S', 'Bexly 5E', 'Bolan E-Bike', 'Nova E-Bike', 'Super Eco', 'Other'] },
     ],
     shared: [
-      { name: 'Share an EV - Premium', deposit: 20000, dailyRate: 300, weeklyRate: 2100, monthlyRate: 8400, contractMonths: [1, 3, 6, 12] },
+      { name: 'Share an EV - Premium', deposit: 20000, dailyRate: 300, weeklyRate: 2100, monthlyRate: 8400, contractMonths: [1, 3, 6, 12], evModels: ['Yadea G5', 'Yadea C1S', 'Himiwa 400', 'Himiwa 500', 'Himiwa 600', 'TVS iQube', 'Bexly 1S', 'Bexly 3S', 'Bexly 5E', 'Bolan E-Bike', 'Nova E-Bike', 'Super Eco', 'Other'] },
-      { name: 'Share an EV - Standard', deposit: 15000, dailyRate: 200, weeklyRate: 1400, monthlyRate: 5600, contractMonths: [1, 3, 6, 12] },
+      { name: 'Share an EV - Standard', deposit: 15000, dailyRate: 200, weeklyRate: 1400, monthlyRate: 5600, contractMonths: [1, 3, 6, 12], evModels: ['Yadea G5', 'Yadea C1S', 'Himiwa 400', 'Himiwa 500', 'Himiwa 600', 'TVS iQube', 'Bexly 1S', 'Bexly 3S', 'Bexly 5E', 'Bolan E-Bike', 'Nova E-Bike', 'Super Eco', 'Other'] },
-      { name: 'Share an EV - Economy', deposit: 12000, dailyRate: 150, weeklyRate: 1050, monthlyRate: 4200, contractMonths: [1, 3, 6, 12] },
+      { name: 'Share an EV - Economy', deposit: 12000, dailyRate: 150, weeklyRate: 1050, monthlyRate: 4200, contractMonths: [1, 3, 6, 12], evModels: ['Yadea G5', 'Yadea C1S', 'Himiwa 400', 'Himiwa 500', 'Himiwa 600', 'TVS iQube', 'Bexly 1S', 'Bexly 3S', 'Bexly 5E', 'Bolan E-Bike', 'Nova E-Bike', 'Super Eco', 'Other'] },
     ],
     'rent-to-own': [
-      { name: 'Rent to Own - Premium', deposit: 25000, dailyRate: 350, weeklyRate: 2450, monthlyRate: 10500, contractMonths: [12, 18, 24, 36] },
+      { name: 'Rent to Own - Premium', deposit: 25000, dailyRate: 350, weeklyRate: 2450, monthlyRate: 10500, contractMonths: [12, 18, 24, 36], evModels: ['Yadea G5', 'Yadea C1S', 'Himiwa 400', 'Himiwa 500', 'Himiwa 600', 'TVS iQube', 'Bexly 1S', 'Bexly 3S', 'Bexly 5E', 'Bolan E-Bike', 'Nova E-Bike', 'Super Eco', 'Other'] },
-      { name: 'Rent to Own - Standard', deposit: 18000, dailyRate: 250, weeklyRate: 1750, monthlyRate: 7000, contractMonths: [12, 18, 24, 36] },
+      { name: 'Rent to Own - Standard', deposit: 18000, dailyRate: 250, weeklyRate: 1750, monthlyRate: 7000, contractMonths: [12, 18, 24, 36], evModels: ['Yadea G5', 'Yadea C1S', 'Himiwa 400', 'Himiwa 500', 'Himiwa 600', 'TVS iQube', 'Bexly 1S', 'Bexly 3S', 'Bexly 5E', 'Bolan E-Bike', 'Nova E-Bike', 'Super Eco', 'Other'] },
-      { name: 'Rent to Own - Economy', deposit: 15000, dailyRate: 200, weeklyRate: 1400, monthlyRate: 6000, contractMonths: [12, 18, 24, 36] },
+      { name: 'Rent to Own - Economy', deposit: 15000, dailyRate: 200, weeklyRate: 1400, monthlyRate: 6000, contractMonths: [12, 18, 24, 36], evModels: ['Yadea G5', 'Yadea C1S', 'Himiwa 400', 'Himiwa 500', 'Himiwa 600', 'TVS iQube', 'Bexly 1S', 'Bexly 3S', 'Bexly 5E', 'Bolan E-Bike', 'Nova E-Bike', 'Super Eco', 'Other'] },
     ],
   });
 
@@ -299,21 +299,25 @@ export default function RentalsPage() {
     userId: string;
     type: RentalType;
     planConditionName: string;
+    evModel: string;
     subscriptionType: 'daily' | 'weekly' | 'monthly';
     contractMonths: number;
     bikeId: string;
     startDate: string;
     hubId: string;
+    depositAmount: number;
     depositPaymentMethod: PaymentMethod;
   }>({
     userId: '',
     type: 'single',
     planConditionName: '',
+    evModel: '',
     subscriptionType: 'daily',
     contractMonths: 0,
     bikeId: '',
     startDate: new Date().toISOString().split('T')[0],
     hubId: '',
+    depositAmount: 0,
     depositPaymentMethod: 'cash',
   });
 
@@ -327,6 +331,8 @@ export default function RentalsPage() {
     setUnlockPermission(canRentalUnlock());
   }, []);
 
+
+
   const getStatusBadge = (status: RentalStatus) => {
     const styles: Record<RentalStatus, string> = {
       active: 'bg-green-100 text-green-700',
@@ -479,8 +485,10 @@ planConditionName: planConditions.single[1]?.name || '',
       subscriptionType: 'daily',
       contractMonths: 0,
       bikeId: '',
+      evModel: '',
       startDate: new Date().toISOString().split('T')[0],
       hubId: '',
+      depositAmount: 0,
       depositPaymentMethod: 'cash',
     });
   };
@@ -694,7 +702,7 @@ planConditionName: planConditions.single[1]?.name || '',
         <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-2xl max-h-[90vh] overflow-y-auto">
             <div className="p-4 border-b border-slate-100 flex justify-between items-center">
-              <h3 className="font-semibold text-slate-800">Create New Rental - Step {createStep} of 5</h3>
+              <h3 className="font-semibold text-slate-800">Create New Rental - Step {createStep} of 4</h3>
               <button onClick={() => { setShowCreateModal(false); setCreateStep(1); }} className="text-slate-400 hover:text-slate-600">
                 <X className="w-5 h-5" />
               </button>
@@ -750,7 +758,10 @@ planConditionName: planConditions.single[1]?.name || '',
                     <label className="text-sm text-slate-600">Plan Condition</label>
                     <select
                       value={newRental.planConditionName}
-                      onChange={(e) => setNewRental({ ...newRental, planConditionName: e.target.value, contractMonths: 0, subscriptionType: 'daily' })}
+                      onChange={(e) => setNewRental(prev => {
+                        const selectedPlan = planConditions[prev.type]?.find(p => p.name === e.target.value);
+                        return { ...prev, planConditionName: e.target.value, depositAmount: selectedPlan?.deposit || prev.depositAmount, contractMonths: 0, subscriptionType: 'daily' };
+                      })}
                       className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
                     >
                       <option value="">Select Plan...</option>
@@ -759,6 +770,19 @@ planConditionName: planConditions.single[1]?.name || '',
                       ))}
                     </select>
                   </div>
+                  <div>
+                    <label className="text-sm text-slate-600">EV Model</label>
+                    <select
+                      value={newRental.evModel}
+                      onChange={(e) => setNewRental({ ...newRental, evModel: e.target.value })}
+                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
+                    >
+                      <option value="">Select EV Model...</option>
+                      {selectedPlan?.evModels.map(model => (
+                        <option key={model} value={model}>{model}</option>
+                      ))}
+                    </select>
+                  </div>
                   <div>
                     <label className="text-sm text-slate-600">Contract Duration</label>
                     <select
@@ -832,44 +856,26 @@ planConditionName: planConditions.single[1]?.name || '',
                 </div>
               )}
 
+
               {createStep === 4 && (
                 <div className="space-y-4">
-                  <h4 className="font-medium text-slate-700 mb-3">Step 4: Start Date & Hub</h4>
+                  <h4 className="font-medium text-slate-700 mb-3">Step 4: Deposit Payment</h4>
-                  <div>
-                    <label className="text-sm text-slate-600">Start Date</label>
-                    <input
-                      type="date"
-                      value={newRental.startDate}
-                      onChange={(e) => setNewRental({ ...newRental, startDate: 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">Hub</label>
-                    <select
-                      value={newRental.hubId}
-                      onChange={(e) => setNewRental({ ...newRental, hubId: e.target.value })}
-                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
-                    >
-                      <option value="">Select Hub...</option>
-                      {mockHubs.map(hub => (
-                        <option key={hub.id} value={hub.id}>{hub.name}</option>
-                      ))}
-                    </select>
-                  </div>
-                </div>
-              )}
-
-              {createStep === 5 && (
-                <div className="space-y-4">
-                  <h4 className="font-medium text-slate-700 mb-3">Step 5: Deposit Payment</h4>
                   <div className="bg-slate-50 p-3 rounded-lg">
                     <p className="text-sm text-slate-600">Deposit Amount: ৳{selectedPlan?.deposit.toLocaleString()}</p>
                     <p className="text-sm text-slate-600">User: {selectedUser?.name}</p>
                     <p className="text-sm text-slate-600">Bike: {selectedBike?.model} ({selectedBike?.plate})</p>
                     <p className="text-sm text-slate-600">Hub: {mockHubs.find(h => h.id === newRental.hubId)?.name}</p>
                   </div>
-                  {selectedPlan.deposit > 0 && (
+                  <div className="grid grid-cols-2 gap-4">
+                    {/* <div>
+                      <label className="text-sm text-slate-600 mb-1 block">Deposit Amount (৳)</label>
+                      <input
+                        type="number"
+                        value={newRental.depositAmount}
+                        onChange={(e) => setNewRental({ ...newRental, depositAmount: Number(e.target.value) })}
+                        className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+                      />
+                    </div> */}
                     <div>
                       <label className="text-sm text-slate-600 mb-2 block">Payment Method</label>
                       <div className="flex gap-2">
@@ -891,34 +897,49 @@ planConditionName: planConditions.single[1]?.name || '',
                         ))}
                       </div>
                     </div>
-                  )}
+                  </div>
-                  {selectedPlan.deposit > 0 && (
+                  {newRental.depositAmount > 0 && (
-                    <div className="bg-blue-50 p-3 rounded-lg">
+                    <div className="bg-white border border-slate-200 rounded-lg overflow-hidden">
-                      <p className="text-sm font-medium text-blue-700 mb-2">Journal Preview</p>
+                      <div className="bg-slate-100 px-4 py-2 border-b border-slate-200">
+                        <p className="text-sm font-semibold text-slate-700">Proforma Invoice</p>
+                      </div>
+                      <div className="p-3 space-y-1 text-xs">
+                        <div className="flex justify-between"><span className="text-slate-500">Invoice No:</span><span className="text-slate-700">PI-{Date.now().toString().slice(-8)}</span></div>
+                        <div className="flex justify-between"><span className="text-slate-500">Date:</span><span className="text-slate-700">{new Date().toLocaleDateString()}</span></div>
+                        <div className="flex justify-between"><span className="text-slate-500">Customer:</span><span className="text-slate-700">{selectedUser?.name}</span></div>
+                        <div className="flex justify-between"><span className="text-slate-500">Bike:</span><span className="text-slate-700">{selectedBike?.model} ({selectedBike?.plate})</span></div>
+                      </div>
                       <table className="w-full text-xs">
-                        <thead className="bg-blue-100">
+                        <thead className="bg-slate-50 border-t border-slate-200">
                           <tr>
-                            <th className="px-2 py-1 text-left">Account</th>
+                            <th className="px-3 py-2 text-left text-slate-500 font-medium">Description</th>
-                            <th className="px-2 py-1 text-right">Debit</th>
+                            <th className="px-3 py-2 text-right text-slate-500 font-medium">Debit (৳)</th>
-                            <th className="px-2 py-1 text-right">Credit</th>
+                            <th className="px-3 py-2 text-right text-slate-500 font-medium">Credit (৳)</th>
                           </tr>
                         </thead>
                         <tbody>
-                          <tr>
+                          <tr className="border-t border-slate-100">
-                            <td className="px-2 py-1">
+                            <td className="px-3 py-2">
                               {newRental.depositPaymentMethod === 'cash' && '1000 - Cash'}
                               {newRental.depositPaymentMethod === 'bank' && '1100 - Bank'}
                               {newRental.depositPaymentMethod === 'wallet' && '1200 - Biker Wallet'}
                             </td>
-                            <td className="px-2 py-1 text-right">৳{selectedPlan.deposit}</td>
+                            <td className="px-3 py-2 text-right">{newRental.depositAmount.toLocaleString()}</td>
-                            <td className="px-2 py-1 text-right">-</td>
+                            <td className="px-3 py-2 text-right">-</td>
                           </tr>
-                          <tr>
+                          <tr className="border-t border-slate-100">
-                            <td className="px-2 py-1">2100 - Deposit Received</td>
+                            <td className="px-3 py-2">2100 - Deposit Received</td>
-                            <td className="px-2 py-1 text-right">-</td>
+                            <td className="px-3 py-2 text-right">-</td>
-                            <td className="px-2 py-1 text-right">৳{selectedPlan.deposit}</td>
+                            <td className="px-3 py-2 text-right">{newRental.depositAmount.toLocaleString()}</td>
                           </tr>
                         </tbody>
+                        <tfoot className="bg-slate-50 border-t border-slate-200">
+                          <tr>
+                            <td className="px-3 py-2 font-semibold text-slate-700">Total</td>
+                            <td className="px-3 py-2 text-right font-semibold">{newRental.depositAmount.toLocaleString()}</td>
+                            <td className="px-3 py-2 text-right font-semibold">{newRental.depositAmount.toLocaleString()}</td>
+                          </tr>
+                        </tfoot>
                       </table>
                     </div>
                   )}
@@ -938,13 +959,12 @@ planConditionName: planConditions.single[1]?.name || '',
                 )}
               </div>
               <div className="flex gap-2">
-                {createStep < 5 ? (
+                {createStep < 4 ? (
                   <button
                     onClick={() => setCreateStep(createStep + 1)}
                     disabled={
                       (createStep === 1 && !newRental.userId) ||
-                      (createStep === 3 && !newRental.bikeId) ||
+                      (createStep === 3 && !newRental.bikeId)
-                      (createStep === 4 && !newRental.hubId)
                     }
                     className="px-4 py-2 bg-emerald-600 text-white rounded-lg text-sm disabled:opacity-50 flex items-center gap-2"
                   >
@@ -952,7 +972,7 @@ planConditionName: planConditions.single[1]?.name || '',
                   </button>
                 ) : (
                   <>
-                    {selectedPlan.deposit > 0 && (
+                    {newRental.depositAmount > 0 && (
                       <button className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm flex items-center gap-2">
                         <Printer className="w-4 h-4" /> Print Invoice
                       </button>