shawon/JML
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add deposit field and enable inline editing for membership type in biker profile

Browse Source
This commit is contained in:
sazzadulalambd
2026-05-13 02:12:40 +06:00
parent cc8663a05c
commit 5aecfc061b
1 changed files with 32 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/app/admin/bikers/[id]/page.tsx
View File

@@ -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>