From 5aecfc061b3f009768ebac83c0d0ff596a371e9b Mon Sep 17 00:00:00 2001
From: sazzadulalambd <sazzad.sua@gmail.com>
Date: Wed, 13 May 2026 02:12:40 +0600
Subject: [PATCH] feat: add deposit field and enable inline editing for
 membership type in biker profile

---
 src/app/admin/bikers/[id]/page.tsx | 36 ++++++++++++++++++++++++++----
 1 file changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/app/admin/bikers/[id]/page.tsx b/src/app/admin/bikers/[id]/page.tsx
index e37154b..95accc6 100644
--- a/src/app/admin/bikers/[id]/page.tsx
+++ b/src/app/admin/bikers/[id]/page.tsx
@@ -16,7 +16,7 @@ import {
   Package, Fuel, Gauge, Timer, Coins, Receipt, ArrowRightLeft,
   Truck, Battery, Zap, Settings2, Siren, Printer, Clock3, UserCheck,
   Globe2, Building, HeartPulse, UsersRound, MessageSquareDashed, BellRing,
-  ListTodo, ClipboardList, BugOff, Info, SendHorizontal, PhoneOutgoing, Edit
+  ListTodo, ClipboardList, BugOff, Info, SendHorizontal, PhoneOutgoing, Edit, Pencil
 } from 'lucide-react';
 import toast from 'react-hot-toast';
 
@@ -264,6 +264,7 @@ interface Biker {
   membershipType: string;
   rating: number;
   totalRatings: number;
+  depositAmount: number;
   role: string;
   totalRentals: number;
   activeRentals: number;
@@ -284,6 +285,7 @@ const mockBiker: Biker = {
   membershipType: 'Premium',
   rating: 4.8,
   totalRatings: 156,
+  depositAmount: 5000,
   kyc: {
     fullName: 'Mohammad Rafiqul Islam',
     phone: '01712345678',
@@ -880,8 +882,30 @@ export default function BikerDetailPage() {
                 {biker.kycStatus === 'pending' && <Clock className="w-3 h-3" />}
                 KYC: {biker.kycStatus}
               </span>
-              <span className="inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full bg-purple-100 text-purple-700">
-                <Award className="w-3 h-3" /> {biker.membershipType}
+              <span className="inline-flex items-center gap-1 text-xs font-medium px-2 py-1 rounded-full bg-purple-100 text-purple-700 border border-purple-200">
+                {editingSection === 'membership' ? (
+                  <>
+                    <select autoFocus value={editForm.membershipType || ''} onChange={(e) => setEditForm({ ...editForm, membershipType: e.target.value })} className="bg-transparent border-none text-xs font-medium p-0 focus:outline-none text-purple-700">
+                      <option value="Basic">Basic</option>
+                      <option value="Standard">Standard</option>
+                      <option value="Premium">Premium</option>
+                      <option value="Platinum">Platinum</option>
+                    </select>
+                    <button onClick={() => { toast.success('Membership updated'); setEditingSection(null); }} className="hover:bg-purple-200 p-0.5 rounded">
+                      <Check className="w-3 h-3 text-green-700" />
+                    </button>
+                    <button onClick={() => setEditingSection(null)} className="hover:bg-purple-200 p-0.5 rounded">
+                      <X className="w-3 h-3 text-red-700" />
+                    </button>
+                  </>
+                ) : (
+                  <>
+                    <button onClick={() => { setEditingSection('membership'); setEditForm({ membershipType: biker.membershipType }); }} className="hover:bg-purple-200 p-0.5 rounded">
+                      <Pencil className="w-3 h-3" />
+                    </button>
+                    <Award className="w-3 h-3" /> {biker.membershipType}
+                  </>
+                )}
               </span>
               {biker.rating > 0 && (
                 <span className="inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full bg-amber-100 text-amber-700">
@@ -2242,7 +2266,7 @@ export default function BikerDetailPage() {
           {activeTab === 'rent' && (
             <div className="space-y-6">
               {/* Financial Summary */}
-              <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+              <div className="grid grid-cols-2 lg:grid-cols-5 gap-4">
                 <div className="bg-green-50 p-4 rounded-xl border border-green-200">
                   <p className="text-xs text-green-600">Total Paid</p>
                   <p className="text-xl font-bold text-green-700">৳{biker.totalPaid.toLocaleString()}</p>
@@ -2255,6 +2279,10 @@ export default function BikerDetailPage() {
                   <p className="text-xs text-amber-600">Pending</p>
                   <p className="text-xl font-bold text-amber-700">৳{biker.pendingAmount.toLocaleString()}</p>
                 </div>
+                <div className="bg-blue-50 p-4 rounded-xl border border-blue-200">
+                  <p className="text-xs text-blue-600">Deposit</p>
+                  <p className="text-xl font-bold text-blue-700">৳{biker.depositAmount.toLocaleString()}</p>
+                </div>
                 <div className="bg-slate-50 p-4 rounded-xl border border-slate-200">
                   <p className="text-xs text-slate-600">Penalties Paid</p>
                   <p className="text-xl font-bold text-slate-700">৳{biker.totalPenaltiesPaid.toLocaleString()}</p>