2026-04-22 01:02:45 +06:00
'use client' ;
2026-05-13 02:06:28 +06:00
import { useState } from 'react' ;
2026-04-22 01:02:45 +06:00
import Link from 'next/link' ;
import { useRouter } from 'next/navigation' ;
import {
User , Phone , Mail , MapPin , Calendar , Heart , Briefcase , Car , Navigation ,
FileText , Clock , TrendingUp , CreditCard , Shield , Award , Star , Activity ,
2026-05-13 02:06:28 +06:00
Eye , ArrowLeft , PhoneCall , MessageCircle , CheckCircle , XCircle ,
AlertTriangle , DollarSign , Wallet , Bike as BikeIcon , Wrench , Ban , Copy ,
ExternalLink , Download , Upload , Bell , MessageSquare , Send , RefreshCcw , Image ,
Plus , X , Check , AlertCircle , Map , Camera , FileCheck , FileX , Users ,
Bike , AlertOctagon , ShieldAlert , History , Banknote , Building2 ,
ChevronDown , ChevronRight , MapPinHouse , Home , Hash , Globe , PhoneIncoming ,
Tag , Save , Trash2 , EyeOff , LayoutList , Grid3X3 , MoreHorizontal ,
Package , Fuel , Gauge , Timer , Coins , Receipt , ArrowRightLeft ,
Truck , Battery , Zap , Settings2 , Siren , Printer , Clock3 , UserCheck ,
Globe2 , Building , HeartPulse , UsersRound , MessageSquareDashed , BellRing ,
2026-05-13 02:12:40 +06:00
ListTodo , ClipboardList , BugOff , Info , SendHorizontal , PhoneOutgoing , Edit , Pencil
2026-04-22 01:02:45 +06:00
} from 'lucide-react' ;
2026-05-13 02:06:28 +06:00
import toast from 'react-hot-toast' ;
2026-04-22 01:02:45 +06:00
2026-05-13 02:06:28 +06:00
interface KYCData {
fullName : string ;
phone : string ;
alternatePhone? : string ;
email : string ;
nid : string ;
dateOfBirth : string ;
gender : string ;
bloodGroup : string ;
maritalStatus : string ;
religion : string ;
nationality : string ;
presentAddress : {
houseFlat : string ;
floor : string ;
road : string ;
block : string ;
area : string ;
thana : string ;
district : string ;
division : string ;
postalCode : string ;
landmark? : string ;
} ;
permanentAddress : {
houseFlat : string ;
floor : string ;
road : string ;
block : string ;
area : string ;
thana : string ;
district : string ;
division : string ;
postalCode : string ;
} ;
isPermanentSame : boolean ;
drivingLicense : {
number : string ;
licenseType : string ;
expiryDate : string ;
issueDate : string ;
issuingAuthority : string ;
frontImage? : string ;
backImage? : string ;
} ;
employment : {
status : string ;
companyName : string ;
department : string ;
designation : string ;
monthlyIncome : string ;
yearsOfExperience : string ;
businessAddress : string ;
} ;
nominee : {
name : string ;
relationship : string ;
nid : string ;
phone : string ;
email : string ;
address : string ;
dateOfBirth : string ;
bloodGroup : string ;
sharePercentage : string ;
photo? : string ;
nidFront? : string ;
nidBack? : string ;
} ;
emergencyContact : {
name : string ;
relationship : string ;
phone : string ;
email : string ;
address : string ;
} ;
nidFrontImage? : string ;
nidBackImage? : string ;
kycTimeline : Array < {
stage : string ;
status : string ;
timestamp : string ;
adminName : string ;
notes? : string ;
} > ;
2026-04-22 01:02:45 +06:00
}
2026-05-13 02:06:28 +06:00
interface Rental {
id : string ;
planName : string ;
subscriptionType : string ;
startDate : string ;
endDate? : string ;
dailyRate : number ;
weeklyRate? : number ;
monthlyRate? : number ;
depositAmount : number ;
depositStatus : string ;
dueAmount : number ;
pendingDays : number ;
rentPaymentStatus : string ;
evModel : string ;
batteryPercent : number ;
currentLocation : string ;
odometerReading : number ;
contractEndDate : string ;
initialConditionImages : string [ ] ;
status : string ;
totalAmount : number ;
penalty : number ;
plate : string ;
2026-04-22 01:02:45 +06:00
}
2026-05-13 02:06:28 +06:00
interface Transaction {
2026-04-22 01:02:45 +06:00
id : string ;
2026-05-13 02:06:28 +06:00
date : string ;
type : string ;
amount : number ;
method : string ;
status : string ;
description : string ;
}
interface ActivityLog {
id : string ;
type : string ;
action : string ;
timestamp : string ;
adminName? : string ;
details? : string ;
icon : any ;
}
interface DamageReport {
id : string ;
date : string ;
rentalId : string ;
bike : string ;
damageType : string ;
severity : string ;
estimatedCost : number ;
actualCost? : number ;
status : string ;
resolution? : string ;
description : string ;
2026-04-22 01:02:45 +06:00
location : string ;
2026-05-13 02:06:28 +06:00
images : string [ ] ;
}
interface MessageHistory {
id : string ;
direction : 'sent' | 'received' ;
channel : 'sms' | 'push' | 'in_app' ;
message : string ;
timestamp : string ;
status : string ;
}
interface Note {
id : string ;
text : string ;
createdAt : string ;
createdBy : string ;
}
interface Biker {
id : string ;
kyc : KYCData ;
gpsDeviceId : string ;
gpsStatus : string ;
lastLocation : string ;
location? : string ;
currentRental : Rental ;
previousRentals : Rental [ ] ;
bikeSpecs : {
model : string ;
brand : string ;
year : string ;
color : string ;
vin : string ;
engineNumber : string ;
plateNumber : string ;
batteryCapacity : string ;
maxRange : string ;
chargingTime : string ;
lastServiceDate : string ;
nextServiceDue : string ;
totalKmRun : number ;
} ;
bikes : {
current : {
id : string ;
model : string ;
brand : string ;
plate : string ;
vin : string ;
color : string ;
year : string ;
batteryCapacity : string ;
maxRange : string ;
totalKmRun : number ;
lastService : string ;
nextService : string ;
} ;
batteries : Array < {
id : string ;
name : string ;
percent : number ;
status : 'active' | 'available' | 'charging' | 'swapped' ;
swappedAt : string ;
location : string ;
odometer : number ;
} > ;
} ;
transactions : Transaction [ ] ;
activityLog : ActivityLog [ ] ;
damageReports : DamageReport [ ] ;
messageHistory : MessageHistory [ ] ;
notes : Note [ ] ;
2026-04-22 01:02:45 +06:00
walletBalance : number ;
2026-05-13 02:06:28 +06:00
totalPaid : number ;
totalDue : number ;
pendingAmount : number ;
totalPenaltiesPaid : number ;
bankAccount : {
bankName : string ;
accountNumber : string ;
routingNumber : string ;
} ;
billingAddress : {
houseFlat : string ;
floor : string ;
road : string ;
block : string ;
area : string ;
thana : string ;
district : string ;
division : string ;
postalCode : string ;
} ;
status : string ;
kycStatus : string ;
membershipType : string ;
2026-04-22 01:02:45 +06:00
rating : number ;
totalRatings : number ;
2026-05-13 02:12:40 +06:00
depositAmount : number ;
2026-05-13 02:06:28 +06:00
role : string ;
totalRentals : number ;
activeRentals : number ;
completedRentals : number ;
cancelledRentals : number ;
2026-04-22 01:02:45 +06:00
}
2026-05-13 02:06:28 +06:00
const mockBiker : Biker = {
id : 'B001' ,
status : 'active' ,
role : 'rider' ,
totalRentals : 45 ,
activeRentals : 1 ,
completedRentals : 42 ,
cancelledRentals : 2 ,
location : 'Gulshan 1, Dhaka' ,
kycStatus : 'verified' ,
membershipType : 'Premium' ,
rating : 4.8 ,
totalRatings : 156 ,
2026-05-13 02:12:40 +06:00
depositAmount : 5000 ,
2026-05-13 02:06:28 +06:00
kyc : {
fullName : 'Mohammad Rafiqul Islam' ,
phone : '01712345678' ,
alternatePhone : '01987654321' ,
email : 'rafiqul.islam@gmail.com' ,
nid : '19951234567890123' ,
dateOfBirth : '1995-06-15' ,
gender : 'Male' ,
bloodGroup : 'O+' ,
maritalStatus : 'Married' ,
religion : 'Islam' ,
nationality : 'Bangladeshi' ,
presentAddress : {
houseFlat : 'House 42' ,
floor : '3rd Floor' ,
road : 'Road 11' ,
block : 'Block D' ,
area : 'Gulshan 1' ,
thana : 'Gulshan' ,
district : 'Dhaka' ,
division : 'Dhaka' ,
postalCode : '1212' ,
landmark : 'Near BIBM' ,
} ,
permanentAddress : {
houseFlat : 'House 42' ,
floor : '3rd Floor' ,
road : 'Road 11' ,
block : 'Block D' ,
area : 'Gulshan 1' ,
thana : 'Gulshan' ,
district : 'Dhaka' ,
division : 'Dhaka' ,
postalCode : '1212' ,
} ,
isPermanentSame : true ,
drivingLicense : {
number : 'DL-2020-DH-1234567' ,
licenseType : 'Motorcycle' ,
expiryDate : '2030-06-14' ,
issueDate : '2020-06-15' ,
issuingAuthority : 'Bangladesh Road Transport Authority (BRTA), Dhaka' ,
frontImage : 'https://picsum.photos/400/250?random=dl1' ,
backImage : 'https://picsum.photos/400/250?random=dl2' ,
} ,
employment : {
status : 'Self Employed' ,
companyName : 'FoodPanda Bangladesh' ,
department : 'Delivery Operations' ,
designation : 'Delivery Rider' ,
monthlyIncome : '৳35,000' ,
yearsOfExperience : '4 years' ,
businessAddress : 'House 12, Road 5, Gulshan 1, Dhaka' ,
} ,
nominee : {
name : 'Fatema Begum' ,
relationship : 'Wife' ,
nid : '19952345678901234' ,
phone : '01812345678' ,
email : 'fatema.begum@yahoo.com' ,
address : 'House 42, Road 11, Gulshan 1, Dhaka' ,
dateOfBirth : '1998-03-20' ,
bloodGroup : 'A+' ,
sharePercentage : '100' ,
photo : 'https://picsum.photos/200/200?random=nominee' ,
nidFront : 'https://picsum.photos/400/250?random=nf1' ,
nidBack : 'https://picsum.photos/400/250?random=nf2' ,
} ,
emergencyContact : {
name : 'Abdul Karim' ,
relationship : 'Brother' ,
phone : '01798765432' ,
email : 'abdul.karim@outlook.com' ,
address : 'House 15, Road 8, Banani, Dhaka' ,
} ,
nidFrontImage : 'https://picsum.photos/400/250?random=nid1' ,
nidBackImage : 'https://picsum.photos/400/250?random=nid2' ,
kycTimeline : [
{ stage : 'Application Submitted' , status : 'completed' , timestamp : '2024-01-10 09:30 AM' , adminName : 'System' } ,
{ stage : 'ID Verification' , status : 'completed' , timestamp : '2024-01-11 10:15 AM' , adminName : 'Asaduzzaman' , notes : 'NID verified successfully' } ,
{ stage : 'Address Verification' , status : 'completed' , timestamp : '2024-01-12 02:30 PM' , adminName : 'Rahima Begum' , notes : 'Address confirmed via phone call' } ,
{ stage : 'Interview Scheduled' , status : 'completed' , timestamp : '2024-01-13 09:00 AM' , adminName : 'System' } ,
{ stage : 'Interview Completed' , status : 'completed' , timestamp : '2024-01-15 11:30 AM' , adminName : 'Karim Ahmed' , notes : 'All documents verified, approved for onboarding' } ,
{ stage : 'KYC Approved' , status : 'completed' , timestamp : '2024-01-16 03:45 PM' , adminName : 'Supervisor Rahman' } ,
] ,
2026-04-22 01:02:45 +06:00
} ,
2026-05-13 02:06:28 +06:00
gpsDeviceId : 'GPS-DH-2024-001234' ,
gpsStatus : 'Online' ,
lastLocation : '23.8103, 90.4125' ,
currentRental : {
id : 'RNT-2024-0045' ,
planName : 'Monthly Rental' ,
subscriptionType : 'Premium' ,
startDate : '2024-03-01' ,
contractEndDate : '2024-04-30' ,
dailyRate : 0 ,
monthlyRate : 4500 ,
depositAmount : 5000 ,
depositStatus : 'Paid' ,
dueAmount : 0 ,
pendingDays : 0 ,
rentPaymentStatus : 'Paid' ,
evModel : 'AIMA Lightning EV' ,
batteryPercent : 78 ,
currentLocation : '23.7521, 90.3756' ,
odometerReading : 2456 ,
initialConditionImages : [
'https://picsum.photos/400/300?random=cond1' ,
'https://picsum.photos/400/300?random=cond2' ,
'https://picsum.photos/400/300?random=cond3' ,
'https://picsum.photos/400/300?random=cond4' ,
] ,
status : 'Active' ,
totalAmount : 4500 ,
penalty : 0 ,
plate : 'Dhaka Metro Cha-4521' ,
2026-04-22 01:02:45 +06:00
} ,
2026-05-13 02:06:28 +06:00
previousRentals : [
{
id : 'RNT-2024-0020' ,
planName : 'Weekly Rental' ,
subscriptionType : 'Basic' ,
startDate : '2024-02-01' ,
contractEndDate : '2024-02-07' ,
endDate : '2024-02-28' ,
dailyRate : 0 ,
weeklyRate : 1200 ,
depositAmount : 3000 ,
depositStatus : 'Returned' ,
dueAmount : 0 ,
pendingDays : 0 ,
rentPaymentStatus : 'Paid' ,
evModel : 'Yadea DT3' ,
batteryPercent : 0 ,
currentLocation : '' ,
odometerReading : 1850 ,
initialConditionImages : [ ] ,
status : 'Completed' ,
totalAmount : 4800 ,
penalty : 0 ,
plate : 'Dhaka Metro Cha-3890' ,
} ,
{
id : 'RNT-2024-0010' ,
planName : 'Monthly Rental' ,
subscriptionType : 'Standard' ,
startDate : '2024-01-01' ,
contractEndDate : '2024-01-31' ,
endDate : '2024-01-31' ,
dailyRate : 0 ,
monthlyRate : 3500 ,
depositAmount : 3000 ,
depositStatus : 'Returned' ,
dueAmount : 500 ,
pendingDays : 0 ,
rentPaymentStatus : 'Paid with Penalty' ,
evModel : 'Etron ET50' ,
batteryPercent : 0 ,
currentLocation : '' ,
odometerReading : 1200 ,
initialConditionImages : [ ] ,
status : 'Completed' ,
totalAmount : 4000 ,
penalty : 500 ,
plate : 'Dhaka Metro Cha-2156' ,
} ,
{
id : 'RNT-2023-0045' ,
planName : 'Weekly Rental' ,
subscriptionType : 'Basic' ,
startDate : '2023-12-15' ,
contractEndDate : '2023-12-21' ,
endDate : '2023-12-22' ,
dailyRate : 0 ,
weeklyRate : 1200 ,
depositAmount : 3000 ,
depositStatus : 'Returned' ,
dueAmount : 0 ,
pendingDays : 0 ,
rentPaymentStatus : 'Cancelled' ,
evModel : 'AIMA Lightning EV' ,
batteryPercent : 0 ,
currentLocation : '' ,
odometerReading : 180 ,
initialConditionImages : [ ] ,
status : 'Cancelled' ,
totalAmount : 1200 ,
penalty : 0 ,
plate : 'Dhaka Metro Cha-4521' ,
} ,
] ,
bikeSpecs : {
model : 'AIMA Lightning EV' ,
brand : 'AIMA' ,
year : '2024' ,
color : 'Matte Black' ,
vin : 'VIN1234567890ABCD' ,
engineNumber : 'ENG-2024-AIMA-5678' ,
plateNumber : 'Dhaka Metro Cha-4521' ,
batteryCapacity : '72V 40Ah' ,
maxRange : '120 km' ,
chargingTime : '4-6 hours' ,
lastServiceDate : '2024-03-15' ,
nextServiceDue : '2024-04-15' ,
totalKmRun : 2456 ,
2026-04-22 01:02:45 +06:00
} ,
2026-05-13 02:06:28 +06:00
bikes : {
current : {
id : 'BIKE-001' ,
model : 'AIMA Lightning EV' ,
brand : 'AIMA' ,
plate : 'Dhaka Metro Cha-4521' ,
vin : 'VIN123456789ABCDE' ,
color : 'Black' ,
year : '2023' ,
batteryCapacity : '72V 45Ah' ,
maxRange : '120 km' ,
totalKmRun : 2456 ,
lastService : '2024-03-15' ,
nextService : '2024-06-15' ,
} ,
batteries : [
{ id : 'BAT-DH-001' , name : 'Battery A' , percent : 78 , status : 'active' , swappedAt : '2024-04-15 10:30' , location : 'Swap Station - Gulshan' , odometer : 2456 } ,
{ id : 'BAT-DH-002' , name : 'Battery B' , percent : 92 , status : 'available' , swappedAt : '2024-04-10 08:00' , location : 'Swap Station - Banani' , odometer : 1890 } ,
{ id : 'BAT-DH-003' , name : 'Battery C' , percent : 15 , status : 'charging' , swappedAt : '2024-04-05 14:00' , location : 'Swap Station - Gulshan' , odometer : 1200 } ,
] ,
2026-04-22 01:02:45 +06:00
} ,
2026-05-13 02:06:28 +06:00
transactions : [
{ id : 'TXN-001' , date : '2024-03-28' , type : 'Rent Payment' , amount : 4500 , method : 'bKash' , status : 'Completed' , description : 'March 2024 monthly rent' } ,
{ id : 'TXN-002' , date : '2024-03-01' , type : 'Deposit' , amount : 5000 , method : 'bKash' , status : 'Completed' , description : 'Security deposit for new rental' } ,
{ id : 'TXN-003' , date : '2024-02-28' , type : 'Rent Payment' , amount : 1200 , method : 'Rocket' , status : 'Completed' , description : 'Final week rent - February' } ,
{ id : 'TXN-004' , date : '2024-02-21' , type : 'Rent Payment' , amount : 1200 , method : 'bKash' , status : 'Completed' , description : 'Week 4 rent - February' } ,
{ id : 'TXN-005' , date : '2024-02-14' , type : 'Rent Payment' , amount : 1200 , method : 'bKash' , status : 'Completed' , description : 'Week 3 rent - February' } ,
{ id : 'TXN-006' , date : '2024-02-07' , type : 'Rent Payment' , amount : 1200 , method : 'Rocket' , status : 'Completed' , description : 'Week 2 rent - February' } ,
{ id : 'TXN-007' , date : '2024-02-01' , type : 'Deposit Return' , amount : - 3000 , method : 'Bank Transfer' , status : 'Completed' , description : 'Deposit returned from previous rental' } ,
{ id : 'TXN-008' , date : '2024-01-31' , type : 'Penalty' , amount : 500 , method : 'Wallet' , status : 'Completed' , description : 'Late payment penalty - January' } ,
{ id : 'TXN-009' , date : '2024-01-28' , type : 'Rent Payment' , amount : 3500 , method : 'bKash' , status : 'Completed' , description : 'January 2024 monthly rent' } ,
{ id : 'TXN-010' , date : '2024-01-15' , type : 'Wallet Top-up' , amount : 5000 , method : 'bKash' , status : 'Completed' , description : 'Wallet recharge' } ,
{ id : 'TXN-011' , date : '2024-01-01' , type : 'Deposit' , amount : 3000 , method : 'Cash' , status : 'Completed' , description : 'Security deposit' } ,
{ id : 'TXN-012' , date : '2023-12-28' , type : 'Rent Payment' , amount : 800 , method : 'bKash' , status : 'Completed' , description : 'Partial rent - December' } ,
] ,
activityLog : [
{ id : 'ACT-001' , type : 'login' , action : 'App login from Android device' , timestamp : '2024-03-28 08:15 AM' , icon : User } ,
{ id : 'ACT-002' , type : 'rental' , action : 'Battery swap at Gulshan Swap Station' , timestamp : '2024-03-28 07:45 AM' , icon : Battery , details : 'Swapped from 35% to 92%' } ,
{ id : 'ACT-003' , type : 'payment' , action : 'Monthly rent payment completed' , timestamp : '2024-03-28 07:30 AM' , adminName : 'System' , icon : DollarSign } ,
{ id : 'ACT-004' , type : 'rental' , action : 'Rental started - AIMA Lightning EV' , timestamp : '2024-03-01 10:00 AM' , icon : BikeIcon } ,
{ id : 'ACT-005' , type : 'kyc' , action : 'KYC verification completed' , timestamp : '2024-01-16 03:45 PM' , adminName : 'Supervisor Rahman' , icon : Shield } ,
{ id : 'ACT-006' , type : 'document' , action : 'Driving license image uploaded' , timestamp : '2024-01-10 11:20 AM' , icon : FileText } ,
{ id : 'ACT-007' , type : 'penalty' , action : 'Late payment penalty applied' , timestamp : '2024-01-31 11:59 PM' , adminName : 'System' , icon : AlertTriangle , details : '৳500 for late rent payment' } ,
{ id : 'ACT-008' , type : 'bike' , action : 'Bike changed from Etron ET50 to AIMA Lightning' , timestamp : '2024-03-01 09:30 AM' , adminName : 'Staff: Kamal' , icon : ArrowRightLeft } ,
{ id : 'ACT-009' , type : 'message' , action : 'Received SMS: Rent reminder' , timestamp : '2024-02-28 09:00 AM' , icon : MessageSquare } ,
{ id : 'ACT-010' , type : 'login' , action : 'App login from iOS device' , timestamp : '2024-02-15 06:30 PM' , icon : User } ,
{ id : 'ACT-011' , type : 'rental' , action : 'Battery swap at Banani Swap Station' , timestamp : '2024-02-15 05:45 PM' , icon : Battery , details : 'Swapped from 28% to 95%' } ,
{ id : 'ACT-012' , type : 'document' , action : 'NID image uploaded' , timestamp : '2024-01-10 09:45 AM' , icon : FileText } ,
] ,
damageReports : [
{
id : 'DMG-001' ,
date : '2024-02-10' ,
rentalId : 'RNT-2024-0020' ,
bike : 'Yadea DT3' ,
damageType : 'Body Damage' ,
severity : 'Medium' ,
estimatedCost : 2000 ,
actualCost : 1800 ,
status : 'Resolved' ,
resolution : 'Panel repaired and repainted' ,
description : 'Minor scratch on left rear fender noticed during routine inspection' ,
location : 'Gulshan 1, Dhaka' ,
images : [ 'https://picsum.photos/400/300?random=dm1' , 'https://picsum.photos/400/300?random=dm2' ] ,
} ,
{
id : 'DMG-002' ,
date : '2024-01-20' ,
rentalId : 'RNT-2024-0010' ,
bike : 'Etron ET50' ,
damageType : 'Tire Damage' ,
severity : 'Low' ,
estimatedCost : 800 ,
actualCost : 750 ,
status : 'Resolved' ,
resolution : 'Rear tire replaced' ,
description : 'Puncture in rear tire caused by sharp object on road' ,
location : 'Dhanmondi 32, Dhaka' ,
images : [ 'https://picsum.photos/400/300?random=dm3' ] ,
} ,
{
id : 'DMG-003' ,
date : '2024-03-25' ,
rentalId : 'RNT-2024-0045' ,
bike : 'AIMA Lightning EV' ,
damageType : 'Battery Damage' ,
severity : 'High' ,
estimatedCost : 5000 ,
status : 'Pending' ,
description : 'Battery not holding charge properly, discharging faster than normal' ,
location : 'Uttara Sector 10, Dhaka' ,
images : [ 'https://picsum.photos/400/300?random=dm4' , 'https://picsum.photos/400/300?random=dm5' ] ,
} ,
] ,
messageHistory : [
{ id : 'MSG-001' , direction : 'sent' , channel : 'sms' , message : 'Your monthly rent of ৳4,500 is due on March 28. Please ensure sufficient balance in your wallet.' , timestamp : '2024-03-25 10:00 AM' , status : 'Delivered' } ,
{ id : 'MSG-002' , direction : 'received' , channel : 'sms' , message : 'Okay, I will pay today.' , timestamp : '2024-03-25 10:15 AM' , status : 'Received' } ,
{ id : 'MSG-003' , direction : 'sent' , channel : 'sms' , message : 'Thank you. You can make payment via bKash or Rocket to 01712345678.' , timestamp : '2024-03-25 10:20 AM' , status : 'Delivered' } ,
{ id : 'MSG-004' , direction : 'received' , channel : 'sms' , message : 'Payment done. Transaction ID: BKP123456789.' , timestamp : '2024-03-28 07:25 AM' , status : 'Received' } ,
{ id : 'MSG-005' , direction : 'sent' , channel : 'push' , message : 'Your rent payment has been received. Thank you!' , timestamp : '2024-03-28 07:30 AM' , status : 'Delivered' } ,
{ id : 'MSG-006' , direction : 'sent' , channel : 'sms' , message : 'Reminder: Your bike rental contract ends on April 30. Please renew or return the bike.' , timestamp : '2024-03-20 09:00 AM' , status : 'Delivered' } ,
{ id : 'MSG-007' , direction : 'received' , channel : 'sms' , message : 'I want to renew the contract. What are the new rates?' , timestamp : '2024-03-20 02:30 PM' , status : 'Received' } ,
{ id : 'MSG-008' , direction : 'sent' , channel : 'sms' , message : 'Great! Current rates are ৳4,500/month for the same plan. We will send renewal documents soon.' , timestamp : '2024-03-20 03:00 PM' , status : 'Delivered' } ,
] ,
notes : [
{ id : 'NOTE-001' , text : 'Very reliable biker, always pays rent on time. Low maintenance issues.' , createdAt : '2024-03-15 11:30 AM' , createdBy : 'Karim (Staff)' } ,
{ id : 'NOTE-002' , text : 'Battery performance issue reported on March 25. Needs inspection.' , createdAt : '2024-03-25 04:00 PM' , createdBy : 'Rahim (Manager)' } ,
{ id : 'NOTE-003' , text : 'VIP customer - priority support required.' , createdAt : '2024-02-01 09:00 AM' , createdBy : 'Supervisor Rahman' } ,
] ,
walletBalance : 1250 ,
totalPaid : 27800 ,
totalDue : 0 ,
pendingAmount : 0 ,
totalPenaltiesPaid : 500 ,
bankAccount : {
bankName : 'Dutch-Bangla Bank Limited' ,
accountNumber : '1511234567890' ,
routingNumber : '9032612' ,
2026-04-22 01:02:45 +06:00
} ,
2026-05-13 02:06:28 +06:00
billingAddress : {
houseFlat : 'House 42' ,
floor : '3rd Floor' ,
road : 'Road 11' ,
block : 'Block D' ,
area : 'Gulshan 1' ,
thana : 'Gulshan' ,
district : 'Dhaka' ,
division : 'Dhaka' ,
postalCode : '1212' ,
} ,
} ;
const tabs = [
{ id : 'personal' , label : 'Personal' , icon : User } ,
{ id : 'license' , label : 'License & GPS' , icon : Car } ,
{ id : 'documents' , label : 'Documents' , icon : FileCheck } ,
{ id : 'bikes' , label : 'Bikes' , icon : BikeIcon } ,
{ id : 'rent' , label : 'Rent & Account' , icon : CreditCard } ,
{ id : 'messages' , label : 'Messages' , icon : MessageSquare } ,
{ id : 'notes' , label : 'Notes' , icon : ClipboardList } ,
{ id : 'activity' , label : 'Activity' , icon : Activity } ,
{ id : 'damage' , label : 'Damage' , icon : AlertOctagon } ,
2026-04-22 01:02:45 +06:00
] ;
const statusColors : Record < string , string > = {
active : 'bg-green-100 text-green-700' ,
pending : 'bg-amber-100 text-amber-700' ,
inactive : 'bg-slate-100 text-slate-500' ,
blocked : 'bg-red-100 text-red-700' ,
2026-05-13 02:06:28 +06:00
completed : 'bg-green-100 text-green-700' ,
cancelled : 'bg-red-100 text-red-700' ,
resolved : 'bg-green-100 text-green-700' ,
2026-04-22 01:02:45 +06:00
} ;
2026-05-13 02:06:28 +06:00
const severityColors : Record < string , string > = {
Low : 'bg-blue-100 text-blue-700' ,
Medium : 'bg-amber-100 text-amber-700' ,
High : 'bg-orange-100 text-orange-700' ,
Critical : 'bg-red-100 text-red-700' ,
2026-04-26 18:32:52 +06:00
} ;
2026-05-13 02:06:28 +06:00
const activityTypeColors : Record < string , string > = {
login : 'bg-blue-100 text-blue-600' ,
rental : 'bg-green-100 text-green-600' ,
payment : 'bg-purple-100 text-purple-600' ,
kyc : 'bg-cyan-100 text-cyan-600' ,
document : 'bg-amber-100 text-amber-600' ,
penalty : 'bg-red-100 text-red-600' ,
bike : 'bg-indigo-100 text-indigo-600' ,
message : 'bg-pink-100 text-pink-600' ,
2026-04-22 01:02:45 +06:00
} ;
2026-05-13 02:06:28 +06:00
const damageTypes = [
'Battery Damage' ,
'Body Damage' ,
'Tire Damage' ,
'Engine Damage' ,
'Accident' ,
'Theft' ,
'Other' ,
] ;
2026-04-22 01:02:45 +06:00
2026-05-13 02:06:28 +06:00
const severityLevels = [ 'Low' , 'Medium' , 'High' , 'Critical' ] ;
const smsTemplates = [
{ id : 'rent_due' , label : 'Monthly rent due' , message : 'Monthly rent due. Please pay ৳{amount} within 3 days.' } ,
{ id : 'contract_end' , label : 'Contract ending' , message : 'Your bike rental contract ends on {date}. Please renew or return.' } ,
{ id : 'kyc_approved' , label : 'KYC approved' , message : 'Congratulations! Your KYC has been approved. You can now rent bikes.' } ,
{ id : 'penalty' , label : 'Penalty warning' , message : 'Warning: Your account has a penalty of ৳{amount}. Please clear it to avoid service suspension.' } ,
{ id : 'docs_upload' , label : 'Document request' , message : 'Please upload your documents for verification. Missing documents: {docs}' } ,
{ id : 'battery_reminder' , label : 'Battery swap reminder' , message : 'Your battery is running low. Please swap at nearest station.' } ,
] ;
function AddressCard ( { title , address , icon : Icon , bgColor } : { title : string ; address : any ; icon : any ; bgColor : string } ) {
return (
< div className = "bg-white rounded-xl border border-slate-200 overflow-hidden" >
< div className = { ` ${ bgColor } px-4 py-3 flex items-center gap-2 ` } >
< Icon className = "w-5 h-5" / >
< h3 className = "font-semibold text-slate-800" > { title } < / h3 >
< / div >
< div className = "p-4 space-y-2" >
{ address . houseFlat && < InfoRow label = "House/Flat" value = { address . houseFlat } / > }
{ address . floor && < InfoRow label = "Floor" value = { address . floor } / > }
{ address . road && < InfoRow label = "Road" value = { address . road } / > }
{ address . block && < InfoRow label = "Block" value = { address . block } / > }
{ address . area && < InfoRow label = "Area" value = { address . area } / > }
{ address . thana && < InfoRow label = "Thana" value = { address . thana } / > }
{ address . district && < InfoRow label = "District" value = { address . district } / > }
{ address . division && < InfoRow label = "Division" value = { address . division } / > }
{ address . postalCode && < InfoRow label = "Postal Code" value = { address . postalCode } / > }
{ address . landmark && < InfoRow label = "Landmark" value = { address . landmark } / > }
< / div >
< / div >
) ;
2026-04-22 01:02:45 +06:00
}
2026-05-13 02:06:28 +06:00
function InfoRow ( { label , value } : { label : string ; value : string } ) {
return value ? (
< div className = "flex justify-between" >
< span className = "text-xs text-slate-500" > { label } < / span >
< span className = "text-sm font-medium text-slate-700" > { value } < / span >
< / div >
) : null ;
}
2026-04-22 01:02:45 +06:00
2026-05-13 02:06:28 +06:00
function ProfileField ( { label , value , editing , onChange } : { label : string ; value : string ; editing? : boolean ; onChange ? : ( v : string ) = > void } ) {
if ( editing ) {
return (
< div className = "flex justify-between items-start gap-4" >
< span className = "text-xs text-slate-500 whitespace-nowrap pt-2" > { label } < / span >
< input
type = "text"
value = { value }
onChange = { ( e ) = > onChange ? . ( e . target . value ) }
className = "w-40 px-2 py-1.5 border border-slate-200 rounded text-xs text-slate-800 bg-white"
/ >
< / div >
) ;
}
return (
< div className = "flex justify-between items-start gap-4" >
< span className = "text-xs text-slate-500 whitespace-nowrap" > { label } < / span >
< span className = "text-xs font-medium text-slate-800 text-right" > { value } < / span >
< / div >
) ;
}
2026-04-26 14:56:12 +06:00
2026-05-13 02:06:28 +06:00
function SectionCard ( { title , icon : Icon , children , headerBg = 'bg-slate-50' , editKey , editingSection , setEditingSection , onEdit , editForm , setEditForm , biker } : { title : string ; icon : any ; children : React.ReactNode ; headerBg? : string ; editKey? : string ; editingSection? : string | null ; setEditingSection ? : ( s : string | null ) = > void ; onEdit ? : ( ) = > void ; editForm? : any ; setEditForm? : any ; biker? : any } ) {
2026-04-22 01:02:45 +06:00
return (
2026-05-13 02:06:28 +06:00
< div className = "bg-white rounded-xl border border-slate-200 overflow-hidden" >
< div className = { ` ${ headerBg } px-4 py-3 flex items-center justify-between ` } >
2026-04-22 01:02:45 +06:00
< div className = "flex items-center gap-2" >
2026-05-13 02:06:28 +06:00
< Icon className = "w-5 h-5 text-accent" / >
< h3 className = "font-semibold text-slate-800" > { title } < / h3 >
2026-04-22 01:02:45 +06:00
< / div >
2026-05-13 02:06:28 +06:00
{ editKey && setEditingSection ? (
editingSection !== editKey ? (
< button onClick = { ( ) = > { setEditingSection ( editKey ) ; onEdit ? . ( ) ; } } className = "p-1.5 hover:bg-white rounded-lg transition-colors" >
< Edit className = "w-4 h-4 text-slate-500" / >
< / button >
) : (
< div className = "flex gap-1" >
< button onClick = { ( ) = > { toast . success ( 'Updated' ) ; setEditingSection ( null ) ; } } className = "px-3 py-1.5 bg-green-600 text-white rounded-lg text-xs font-medium hover:bg-green-700" > Save < / button >
< button onClick = { ( ) = > setEditingSection ( null ) } className = "px-3 py-1.5 border border-slate-200 text-slate-600 rounded-lg text-xs font-medium hover:bg-slate-50" > Cancel < / button >
< / div >
)
) : null }
2026-04-22 01:02:45 +06:00
< / div >
2026-05-13 02:06:28 +06:00
< div className = "p-4" >
{ children }
< / div >
< / div >
) ;
}
function TimelineItem ( { stage , status , timestamp , adminName , notes , isLast } : { stage : string ; status : string ; timestamp : string ; adminName : string ; notes? : string ; isLast : boolean } ) {
return (
< div className = "flex gap-3" >
< div className = "flex flex-col items-center" >
< div className = { ` w-8 h-8 rounded-full flex items-center justify-center ${ status === 'completed' ? 'bg-green-100' : 'bg-amber-100' } ` } >
{ status === 'completed' ? < Check className = "w-4 h-4 text-green-600" / > : < Clock className = "w-4 h-4 text-amber-600" / > }
< / div >
{ ! isLast && < div className = "w-0.5 h-full bg-slate-200 mt-2" / > }
< / div >
< div className = "flex-1 pb-4" >
< p className = "font-medium text-slate-700" > { stage } < / p >
< p className = "text-xs text-slate-500 mt-0.5" > { timestamp } • { adminName } < / p >
{ notes && < p className = "text-xs text-slate-400 mt-1 italic" > { notes } < / p > }
< / div >
< / div >
) ;
}
export default function BikerDetailPage() {
const router = useRouter ( ) ;
const [ activeTab , setActiveTab ] = useState ( 'personal' ) ;
const [ showMessageModal , setShowMessageModal ] = useState ( false ) ;
const [ showDamageModal , setShowDamageModal ] = useState ( false ) ;
const [ showDocumentUpload , setShowDocumentUpload ] = useState ( false ) ;
const [ messageTab , setMessageTab ] = useState < 'sms' | 'push' | 'template' > ( 'sms' ) ;
const [ messageText , setMessageText ] = useState ( '' ) ;
const [ selectedTemplate , setSelectedTemplate ] = useState ( '' ) ;
const [ newNote , setNewNote ] = useState ( '' ) ;
const [ damageForm , setDamageForm ] = useState ( {
bike : '' ,
damageType : '' ,
description : '' ,
severity : '' ,
estimatedCost : '' ,
location : '' ,
images : [ ] as string [ ] ,
} ) ;
const [ rentPage , setRentPage ] = useState ( 1 ) ;
const [ transactionPage , setTransactionPage ] = useState ( 1 ) ;
const [ editingSection , setEditingSection ] = useState < string | null > ( null ) ;
const [ editForm , setEditForm ] = useState < any > ( { } ) ;
const biker = mockBiker ;
const perPage = 10 ;
const paginatedRentHistory = [ . . . biker . currentRental ? [ biker . currentRental ] : [ ] , . . . biker . previousRentals ] . slice ( ( rentPage - 1 ) * perPage , rentPage * perPage ) ;
const totalRentPages = Math . ceil ( ( 1 + biker . previousRentals . length ) / perPage ) ;
const paginatedTransactions = biker . transactions . slice ( ( transactionPage - 1 ) * perPage , transactionPage * perPage ) ;
const totalTransactionPages = Math . ceil ( biker . transactions . length / perPage ) ;
const handleSendMessage = ( ) = > {
if ( ! messageText . trim ( ) ) return ;
toast . success ( ` Message sent to ${ biker . kyc . phone } ` ) ;
setMessageText ( '' ) ;
setShowMessageModal ( false ) ;
} ;
const handleAddNote = ( ) = > {
if ( ! newNote . trim ( ) ) return ;
toast . success ( 'Note added successfully' ) ;
setNewNote ( '' ) ;
} ;
const handleSendTemplate = ( template : typeof smsTemplates [ 0 ] ) = > {
let message = template . message ;
message = message . replace ( '{amount}' , biker . currentRental ? . monthlyRate ? . toString ( ) || '4500' ) ;
message = message . replace ( '{date}' , biker . currentRental ? . contractEndDate || '2024-04-30' ) ;
message = message . replace ( '{docs}' , 'Driving License, NID' ) ;
setMessageText ( message ) ;
setMessageTab ( 'sms' ) ;
} ;
const handleSubmitDamage = ( ) = > {
if ( ! damageForm . damageType || ! damageForm . description ) {
toast . error ( 'Please fill all required fields' ) ;
return ;
}
toast . success ( 'Damage report submitted successfully' ) ;
setShowDamageModal ( false ) ;
setDamageForm ( { bike : '' , damageType : '' , description : '' , severity : '' , estimatedCost : '' , location : '' , images : [ ] } ) ;
} ;
const formatAddress = ( addr : any ) = > {
return [ addr . houseFlat , addr . floor , addr . road , addr . block , addr . area , addr . thana , addr . district , addr . division , addr . postalCode ] . filter ( Boolean ) . join ( ', ' ) ;
} ;
return (
< div className = "p-4 lg:p-6 max-w-8xl mx-auto" >
< button onClick = { ( ) = > router . push ( '/admin/bikers' ) } className = "flex items-center gap-2 text-slate-600 hover:text-slate-800 mb-4" >
< ArrowLeft className = "w-4 h-4" / > Back to Bikers
< / button >
2026-04-22 01:02:45 +06:00
< div className = "bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden mb-4" >
< div className = "p-4 lg:p-6 flex flex-col lg:flex-row lg:items-center gap-4" >
< div className = "w-20 h-20 rounded-full bg-blue-100 flex items-center justify-center" >
2026-05-13 02:06:28 +06:00
< span className = "text-3xl font-bold text-blue-600" > { biker . kyc . fullName . charAt ( 0 ) } < / span >
2026-04-22 01:02:45 +06:00
< / div >
< div className = "flex-1" >
< div className = "flex items-center gap-2" >
2026-05-13 02:06:28 +06:00
< h2 className = "text-xl lg:text-2xl font-bold text-slate-800" > { biker . kyc . fullName } < / h2 >
2026-04-22 01:02:45 +06:00
< span className = { ` inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${ statusColors [ biker . status ] } ` } >
{ biker . status === 'active' && < Activity className = "w-3 h-3" / > }
{ biker . status === 'pending' && < Clock className = "w-3 h-3" / > }
{ biker . status === 'blocked' && < Ban className = "w-3 h-3" / > }
2026-05-13 02:06:28 +06:00
{ biker . status . charAt ( 0 ) . toUpperCase ( ) + biker . status . slice ( 1 ) }
2026-04-22 01:02:45 +06:00
< / span >
< / div >
2026-05-13 02:06:28 +06:00
< p className = "text-sm text-slate-500" > ID : { biker . id } & bull ; { biker . location } < / p >
2026-04-22 01:02:45 +06:00
< div className = "flex flex-wrap items-center gap-2 mt-2" >
2026-05-13 02:06:28 +06:00
< span className = { ` inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${ biker . kycStatus === 'verified' ? 'bg-green-100 text-green-700' : biker . kycStatus === 'pending' ? 'bg-amber-100 text-amber-700' : 'bg-slate-100 text-slate-500' } ` } >
2026-04-22 01:02:45 +06:00
{ biker . kycStatus === 'verified' && < CheckCircle className = "w-3 h-3" / > }
{ biker . kycStatus === 'pending' && < Clock className = "w-3 h-3" / > }
KYC : { biker . kycStatus }
< / span >
2026-05-13 02:12:40 +06:00
< 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 }
< / >
) }
2026-04-22 01:02:45 +06:00
< / 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" >
< Star className = "w-3 h-3" / > { biker . rating } ( { biker . totalRatings } )
< / span >
) }
< / div >
< / div >
< div className = "flex gap-2" >
< button className = "flex-1 lg:flex-none px-4 py-2 bg-blue-600 text-white rounded-lg font-semibold text-sm hover:bg-blue-700 flex items-center justify-center gap-2" >
< PhoneCall className = "w-4 h-4" / >
2026-05-13 02:06:28 +06:00
< span className = "hidden sm:inline" > Call < / span >
2026-04-22 01:02:45 +06:00
< / button >
2026-05-13 02:06:28 +06:00
< a href = { ` sms: ${ biker . kyc . phone } ` } className = "px-3 lg:px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm font-medium hover:bg-slate-50 flex items-center gap-2" >
< PhoneOutgoing className = "w-4 h-4" / >
< span className = "hidden sm:inline" > SMS < / span >
< / a >
< button onClick = { ( ) = > setShowMessageModal ( true ) } className = "px-3 lg:px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 flex items-center gap-2" >
< MessageSquare className = "w-4 h-4" / >
< span className = "hidden sm:inline" > Message < / span >
< / button >
< button onClick = { ( ) = > setShowDamageModal ( true ) } className = "px-3 lg:px-4 py-2 bg-red-600 text-white rounded-lg text-sm font-medium hover:bg-red-700 flex items-center gap-2" >
< AlertOctagon className = "w-4 h-4" / >
< span className = "hidden sm:inline" > Damage < / span >
2026-04-22 01:02:45 +06:00
< / button >
< / div >
< / div >
2026-05-13 02:06:28 +06:00
< / div >
2026-04-22 01:02:45 +06:00
2026-05-13 02:06:28 +06:00
{ /* Stats Grid */ }
< div className = "grid grid-cols-2 lg:grid-cols-4 gap-3 lg:gap-4 mb-4" >
< div className = "bg-white rounded-xl p-4 shadow-sm border border-slate-100" >
< div className = "flex items-center gap-2 mb-1" >
< History className = "w-4 h-4 text-blue-600" / >
< span className = "text-xs text-slate-500" > Total Rentals < / span >
< / div >
< p className = "text-2xl font-extrabold text-slate-800" > { biker . totalRentals } < / p >
< / div >
< div className = "bg-white rounded-xl p-4 shadow-sm border border-slate-100" >
< div className = "flex items-center gap-2 mb-1" >
< BikeIcon className = "w-4 h-4 text-green-600" / >
< span className = "text-xs text-slate-500" > Active Rentals < / span >
< / div >
< p className = "text-2xl font-extrabold text-green-600" > { biker . activeRentals } < / p >
< / div >
< div className = "bg-white rounded-xl p-4 shadow-sm border border-slate-100" >
< div className = "flex items-center gap-2 mb-1" >
< CheckCircle className = "w-4 h-4 text-purple-600" / >
< span className = "text-xs text-slate-500" > Completed < / span >
< / div >
< p className = "text-2xl font-extrabold text-purple-600" > { biker . completedRentals } < / p >
< / div >
< div className = "bg-white rounded-xl p-4 shadow-sm border border-slate-100" >
< div className = "flex items-center gap-2 mb-1" >
< XCircle className = "w-4 h-4 text-red-600" / >
< span className = "text-xs text-slate-500" > Cancelled < / span >
< / div >
< p className = "text-2xl font-extrabold text-red-600" > { biker . cancelledRentals } < / p >
< / div >
< / div >
{ /* Tabs Container */ }
< div className = "bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden mb-4" >
< div className = "border-b border-slate-100 overflow-x-auto" >
2026-04-22 01:02:45 +06:00
< nav className = "flex whitespace-nowrap" >
{ tabs . map ( tab = > {
const Icon = tab . icon ;
return (
< button
key = { tab . id }
onClick = { ( ) = > setActiveTab ( tab . id ) }
2026-05-13 02:06:28 +06:00
className = { ` px-4 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-colors ${ activeTab === tab . id ? 'border-accent text-accent' : 'border-transparent text-slate-500 hover:text-slate-700'
2026-04-22 01:02:45 +06:00
} ` }
>
< Icon className = "w-4 h-4 inline mr-1" / >
{ tab . label }
< / button >
) ;
} ) }
< / nav >
< / div >
2026-05-13 02:06:28 +06:00
< div className = "p-4 lg:p-6" >
{ activeTab === 'personal' && (
< div className = "grid grid-cols-1 lg:grid-cols-2 gap-4" >
{ /* Application Details */ }
< div className = "bg-white rounded-xl border border-slate-200 overflow-hidden" >
< div className = "px-5 py-4 bg-blue-50 border-b border-blue-100 flex items-center justify-between" >
< h3 className = "text-sm font-semibold text-slate-800 flex items-center gap-2" >
< User className = "w-4 h-4 text-blue-600" / > Application Details
< / h3 >
{ editingSection !== 'application' ? (
< button onClick = { ( ) = > { setEditingSection ( 'application' ) ; setEditForm ( { fullName : biker.kyc.fullName , phone : biker.kyc.phone , alternatePhone : biker.kyc.alternatePhone || '' , email : biker.kyc.email , nid : biker.kyc.nid , dateOfBirth : biker.kyc.dateOfBirth , gender : biker.kyc.gender , bloodGroup : biker.kyc.bloodGroup , maritalStatus : biker.kyc.maritalStatus , religion : biker.kyc.religion , nationality : biker.kyc.nationality } ) ; } } className = "p-1.5 hover:bg-blue-100 rounded-lg transition-colors" >
< Edit className = "w-4 h-4 text-blue-600" / >
< / button >
) : (
< div className = "flex gap-1" >
< button onClick = { ( ) = > { toast . success ( 'Application details updated' ) ; setEditingSection ( null ) ; } } className = "px-3 py-1.5 bg-green-600 text-white rounded-lg text-xs font-medium hover:bg-green-700" > Save < / button >
< button onClick = { ( ) = > setEditingSection ( null ) } className = "px-3 py-1.5 border border-slate-200 text-slate-600 rounded-lg text-xs font-medium hover:bg-slate-50" > Cancel < / button >
< / div >
) }
2026-04-22 01:02:45 +06:00
< / div >
2026-05-13 02:06:28 +06:00
< div className = "p-4 space-y-3" >
{ editingSection === 'application' ? (
< >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Full Name < span className = "text-red-500" > * < / span > < / label >
< input type = "text" value = { editForm . fullName } onChange = { ( e ) = > setEditForm ( { . . . editForm , fullName : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< div className = "grid grid-cols-2 gap-3" >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Phone < span className = "text-red-500" > * < / span > < / label >
< input type = "text" value = { editForm . phone } onChange = { ( e ) = > setEditForm ( { . . . editForm , phone : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Alternate Phone < / label >
< input type = "text" value = { editForm . alternatePhone } onChange = { ( e ) = > setEditForm ( { . . . editForm , alternatePhone : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< / div >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Email < / label >
< input type = "email" value = { editForm . email } onChange = { ( e ) = > setEditForm ( { . . . editForm , email : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< div className = "grid grid-cols-2 gap-3" >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > NID < span className = "text-red-500" > * < / span > < / label >
< input type = "text" value = { editForm . nid } onChange = { ( e ) = > setEditForm ( { . . . editForm , nid : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Date of Birth < / label >
< input type = "date" value = { editForm . dateOfBirth } onChange = { ( e ) = > setEditForm ( { . . . editForm , dateOfBirth : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< / div >
< div className = "grid grid-cols-3 gap-3" >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Gender < / label >
< select value = { editForm . gender } onChange = { ( e ) = > setEditForm ( { . . . editForm , gender : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs bg-white" >
< option value = "Male" > Male < / option >
< option value = "Female" > Female < / option >
< option value = "Other" > Other < / option >
< / select >
< / div >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Blood Group < / label >
< select value = { editForm . bloodGroup } onChange = { ( e ) = > setEditForm ( { . . . editForm , bloodGroup : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs bg-white" >
< option value = "A+" > A + < / option >
< option value = "A-" > A - < / option >
< option value = "B+" > B + < / option >
< option value = "B-" > B - < / option >
< option value = "AB+" > AB + < / option >
< option value = "AB-" > AB - < / option >
< option value = "O+" > O + < / option >
< option value = "O-" > O - < / option >
< / select >
< / div >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Marital Status < / label >
< select value = { editForm . maritalStatus } onChange = { ( e ) = > setEditForm ( { . . . editForm , maritalStatus : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs bg-white" >
< option value = "Single" > Single < / option >
< option value = "Married" > Married < / option >
< option value = "Divorced" > Divorced < / option >
< option value = "Widowed" > Widowed < / option >
< / select >
< / div >
< / div >
< div className = "grid grid-cols-2 gap-3" >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Religion < / label >
< input type = "text" value = { editForm . religion } onChange = { ( e ) = > setEditForm ( { . . . editForm , religion : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Nationality < / label >
< input type = "text" value = { editForm . nationality } onChange = { ( e ) = > setEditForm ( { . . . editForm , nationality : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< / div >
< / >
) : (
< >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Full Name < / p >
< p className = "text-sm font-semibold text-slate-700" > { biker . kyc . fullName } < / p >
< / div >
< div className = "grid grid-cols-2 gap-3" >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Phone < / p >
< p className = "text-sm font-medium text-slate-700" > { biker . kyc . phone } < / p >
< / div >
{ biker . kyc . alternatePhone && (
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Alternate Phone < / p >
< p className = "text-sm font-medium text-slate-700" > { biker . kyc . alternatePhone } < / p >
< / div >
) }
< / div >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Email < / p >
< p className = "text-sm font-medium text-slate-700" > { biker . kyc . email } < / p >
< / div >
< div className = "grid grid-cols-2 gap-3" >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > NID < / p >
< p className = "text-sm font-medium text-slate-700" > { biker . kyc . nid } < / p >
< / div >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Date of Birth < / p >
< p className = "text-sm font-medium text-slate-700" > { biker . kyc . dateOfBirth } < / p >
< / div >
< / div >
< div className = "grid grid-cols-3 gap-3" >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Gender < / p >
< p className = "text-sm font-medium text-slate-700" > { biker . kyc . gender } < / p >
< / div >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Blood Group < / p >
< p className = "text-sm font-medium text-slate-700" > { biker . kyc . bloodGroup } < / p >
< / div >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Marital Status < / p >
< p className = "text-sm font-medium text-slate-700" > { biker . kyc . maritalStatus } < / p >
< / div >
< / div >
< div className = "grid grid-cols-2 gap-3" >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Religion < / p >
< p className = "text-sm font-medium text-slate-700" > { biker . kyc . religion } < / p >
< / div >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Nationality < / p >
< p className = "text-sm font-medium text-slate-700" > { biker . kyc . nationality } < / p >
< / div >
< / div >
< / >
) }
2026-04-22 01:02:45 +06:00
< / div >
< / div >
2026-05-13 02:06:28 +06:00
{ /* Nominee Details */ }
< div className = "bg-white rounded-xl border border-slate-200 overflow-hidden" >
< div className = "px-5 py-4 bg-orange-50 border-b border-orange-100 flex items-center justify-between" >
< h3 className = "text-sm font-semibold text-slate-800 flex items-center gap-2" >
< Users className = "w-4 h-4 text-orange-600" / > Nominee Details
< / h3 >
{ editingSection !== 'nominee' ? (
< button onClick = { ( ) = > { setEditingSection ( 'nominee' ) ; setEditForm ( { name : biker.kyc.nominee.name , relationship : biker.kyc.nominee.relationship , nid : biker.kyc.nominee.nid , phone : biker.kyc.nominee.phone , email : biker.kyc.nominee.email , sharePercentage : biker.kyc.nominee.sharePercentage , bloodGroup : biker.kyc.nominee.bloodGroup , address : biker.kyc.nominee.address } ) ; } } className = "p-1.5 hover:bg-orange-100 rounded-lg transition-colors" >
< Edit className = "w-4 h-4 text-orange-600" / >
< / button >
) : (
< div className = "flex gap-1" >
< button onClick = { ( ) = > { toast . success ( 'Nominee details updated' ) ; setEditingSection ( null ) ; } } className = "px-3 py-1.5 bg-green-600 text-white rounded-lg text-xs font-medium hover:bg-green-700" > Save < / button >
< button onClick = { ( ) = > setEditingSection ( null ) } className = "px-3 py-1.5 border border-slate-200 text-slate-600 rounded-lg text-xs font-medium hover:bg-slate-50" > Cancel < / button >
< / div >
) }
< / div >
< div className = "p-4 space-y-3" >
{ editingSection === 'nominee' ? (
< >
< div className = "grid grid-cols-2 gap-3" >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Nominee Name < span className = "text-red-500" > * < / span > < / label >
< input type = "text" value = { editForm . name } onChange = { ( e ) = > setEditForm ( { . . . editForm , name : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Relationship < span className = "text-red-500" > * < / span > < / label >
< input type = "text" value = { editForm . relationship } onChange = { ( e ) = > setEditForm ( { . . . editForm , relationship : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< / div >
< div className = "grid grid-cols-2 gap-3" >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > NID < span className = "text-red-500" > * < / span > < / label >
< input type = "text" value = { editForm . nid } onChange = { ( e ) = > setEditForm ( { . . . editForm , nid : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Phone < span className = "text-red-500" > * < / span > < / label >
< input type = "text" value = { editForm . phone } onChange = { ( e ) = > setEditForm ( { . . . editForm , phone : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< / div >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Email < / label >
< input type = "email" value = { editForm . email } onChange = { ( e ) = > setEditForm ( { . . . editForm , email : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< div className = "grid grid-cols-2 gap-3" >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Share % < span className = "text-red-500" > * < / span > < / label >
< input type = "text" value = { editForm . sharePercentage } onChange = { ( e ) = > setEditForm ( { . . . editForm , sharePercentage : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Blood Group < / label >
< select value = { editForm . bloodGroup } onChange = { ( e ) = > setEditForm ( { . . . editForm , bloodGroup : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs bg-white" >
< option value = "A+" > A + < / option > < option value = "A-" > A - < / option > < option value = "B+" > B + < / option > < option value = "B-" > B - < / option > < option value = "AB+" > AB + < / option > < option value = "AB-" > AB - < / option > < option value = "O+" > O + < / option > < option value = "O-" > O - < / option >
< / select >
< / div >
< / div >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Address < / label >
< input type = "text" value = { editForm . address } onChange = { ( e ) = > setEditForm ( { . . . editForm , address : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< / >
) : (
< >
< div className = "grid grid-cols-2 gap-3" >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Nominee Name < / p >
< p className = "text-sm font-semibold text-slate-700" > { biker . kyc . nominee . name } < / p >
< / div >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Relationship < / p >
< p className = "text-sm font-medium text-slate-700" > { biker . kyc . nominee . relationship } < / p >
< / div >
< / div >
< div className = "grid grid-cols-2 gap-3" >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > NID < / p >
< p className = "text-sm font-medium text-slate-700" > { biker . kyc . nominee . nid } < / p >
< / div >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Phone < / p >
< p className = "text-sm font-medium text-slate-700" > { biker . kyc . nominee . phone } < / p >
< / div >
< / div >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Email < / p >
< p className = "text-sm font-medium text-slate-700" > { biker . kyc . nominee . email } < / p >
< / div >
< div className = "grid grid-cols-2 gap-3" >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Share % < / p >
< p className = "text-sm font-medium text-slate-700" > { biker . kyc . nominee . sharePercentage } % < / p >
< / div >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Blood Group < / p >
< p className = "text-sm font-medium text-slate-700" > { biker . kyc . nominee . bloodGroup } < / p >
< / div >
< / div >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Address < / p >
< p className = "text-sm font-medium text-slate-700" > { biker . kyc . nominee . address } < / p >
< / div >
< / >
) }
2026-04-22 01:02:45 +06:00
< / div >
< / div >
2026-05-13 02:06:28 +06:00
{ /* Employment Information */ }
< div className = "bg-white rounded-xl border border-slate-200 overflow-hidden" >
< div className = "px-5 py-4 bg-purple-50 border-b border-purple-100 flex items-center justify-between" >
< h3 className = "text-sm font-semibold text-slate-800 flex items-center gap-2" >
< Briefcase className = "w-4 h-4 text-purple-600" / > Employment Information
< / h3 >
{ editingSection !== 'employment' ? (
< button onClick = { ( ) = > { setEditingSection ( 'employment' ) ; setEditForm ( { status : biker.kyc.employment.status , companyName : biker.kyc.employment.companyName , department : biker.kyc.employment.department , designation : biker.kyc.employment.designation , monthlyIncome : biker.kyc.employment.monthlyIncome , yearsOfExperience : biker.kyc.employment.yearsOfExperience , businessAddress : biker.kyc.employment.businessAddress } ) ; } } className = "p-1.5 hover:bg-purple-100 rounded-lg transition-colors" >
< Edit className = "w-4 h-4 text-purple-600" / >
< / button >
) : (
< div className = "flex gap-1" >
< button onClick = { ( ) = > { toast . success ( 'Employment info updated' ) ; setEditingSection ( null ) ; } } className = "px-3 py-1.5 bg-green-600 text-white rounded-lg text-xs font-medium hover:bg-green-700" > Save < / button >
< button onClick = { ( ) = > setEditingSection ( null ) } className = "px-3 py-1.5 border border-slate-200 text-slate-600 rounded-lg text-xs font-medium hover:bg-slate-50" > Cancel < / button >
2026-04-22 01:02:45 +06:00
< / div >
2026-05-13 02:06:28 +06:00
) }
2026-04-22 01:02:45 +06:00
< / div >
2026-05-13 02:06:28 +06:00
< div className = "p-4 space-y-3" >
{ editingSection === 'employment' ? (
< >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Status < span className = "text-red-500" > * < / span > < / label >
< select value = { editForm . status } onChange = { ( e ) = > setEditForm ( { . . . editForm , status : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs bg-white" >
< option value = "Employed" > Employed < / option >
< option value = "Self Employed" > Self Employed < / option >
< option value = "Student" > Student < / option >
< option value = "Unemployed" > Unemployed < / option >
< option value = "Retired" > Retired < / option >
< / select >
2026-04-22 01:02:45 +06:00
< / div >
< div >
2026-05-13 02:06:28 +06:00
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Company / Business Name < / label >
< input type = "text" value = { editForm . companyName } onChange = { ( e ) = > setEditForm ( { . . . editForm , companyName : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
2026-04-22 01:02:45 +06:00
< / div >
2026-05-13 02:06:28 +06:00
< div className = "grid grid-cols-2 gap-3" >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Department < / label >
< input type = "text" value = { editForm . department } onChange = { ( e ) = > setEditForm ( { . . . editForm , department : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Designation < / label >
< input type = "text" value = { editForm . designation } onChange = { ( e ) = > setEditForm ( { . . . editForm , designation : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< / div >
< div className = "grid grid-cols-2 gap-3" >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Monthly Income < / label >
< input type = "text" value = { editForm . monthlyIncome } onChange = { ( e ) = > setEditForm ( { . . . editForm , monthlyIncome : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Experience < / label >
< input type = "text" value = { editForm . yearsOfExperience } onChange = { ( e ) = > setEditForm ( { . . . editForm , yearsOfExperience : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< / div >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Business Address < / label >
< input type = "text" value = { editForm . businessAddress } onChange = { ( e ) = > setEditForm ( { . . . editForm , businessAddress : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< / >
) : (
< >
< div className = "grid grid-cols-2 gap-3" >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Status < / p >
< p className = "text-sm font-medium text-slate-700" > { biker . kyc . employment . status } < / p >
< / div >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Monthly Income < / p >
< p className = "text-sm font-semibold text-slate-700" > { biker . kyc . employment . monthlyIncome } < / p >
< / div >
< / div >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Company / Business < / p >
< p className = "text-sm font-medium text-slate-700" > { biker . kyc . employment . companyName } < / p >
< / div >
< div className = "grid grid-cols-2 gap-3" >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Department < / p >
< p className = "text-sm font-medium text-slate-700" > { biker . kyc . employment . department } < / p >
< / div >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Designation < / p >
< p className = "text-sm font-medium text-slate-700" > { biker . kyc . employment . designation } < / p >
< / div >
< / div >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Experience < / p >
< p className = "text-sm font-medium text-slate-700" > { biker . kyc . employment . yearsOfExperience } < / p >
< / div >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Business Address < / p >
< p className = "text-sm font-medium text-slate-700" > { biker . kyc . employment . businessAddress } < / p >
< / div >
< / >
) }
2026-04-22 01:02:45 +06:00
< / div >
2026-04-26 14:56:12 +06:00
< / div >
2026-05-13 02:06:28 +06:00
{ /* Emergency Contact */ }
< div className = "bg-white rounded-xl border border-slate-200 overflow-hidden" >
< div className = "px-5 py-4 bg-red-50 border-b border-red-100 flex items-center justify-between" >
< h3 className = "text-sm font-semibold text-slate-800 flex items-center gap-2" >
< PhoneIncoming className = "w-4 h-4 text-red-600" / > Emergency Contact
< / h3 >
{ editingSection !== 'emergency' ? (
< button onClick = { ( ) = > { setEditingSection ( 'emergency' ) ; setEditForm ( { name : biker.kyc.emergencyContact.name , relationship : biker.kyc.emergencyContact.relationship , phone : biker.kyc.emergencyContact.phone , email : biker.kyc.emergencyContact.email , address : biker.kyc.emergencyContact.address } ) ; } } className = "p-1.5 hover:bg-red-100 rounded-lg transition-colors" >
< Edit className = "w-4 h-4 text-red-600" / >
< / button >
) : (
< div className = "flex gap-1" >
< button onClick = { ( ) = > { toast . success ( 'Emergency contact updated' ) ; setEditingSection ( null ) ; } } className = "px-3 py-1.5 bg-green-600 text-white rounded-lg text-xs font-medium hover:bg-green-700" > Save < / button >
< button onClick = { ( ) = > setEditingSection ( null ) } className = "px-3 py-1.5 border border-slate-200 text-slate-600 rounded-lg text-xs font-medium hover:bg-slate-50" > Cancel < / button >
< / div >
) }
< / div >
< div className = "p-4 space-y-3" >
{ editingSection === 'emergency' ? (
< >
< div className = "grid grid-cols-2 gap-3" >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Contact Name < span className = "text-red-500" > * < / span > < / label >
< input type = "text" value = { editForm . name } onChange = { ( e ) = > setEditForm ( { . . . editForm , name : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Relationship < span className = "text-red-500" > * < / span > < / label >
< input type = "text" value = { editForm . relationship } onChange = { ( e ) = > setEditForm ( { . . . editForm , relationship : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< / div >
< div className = "grid grid-cols-2 gap-3" >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Phone < span className = "text-red-500" > * < / span > < / label >
< input type = "text" value = { editForm . phone } onChange = { ( e ) = > setEditForm ( { . . . editForm , phone : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Email < / label >
< input type = "email" value = { editForm . email } onChange = { ( e ) = > setEditForm ( { . . . editForm , email : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< / div >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Address < / label >
< input type = "text" value = { editForm . address } onChange = { ( e ) = > setEditForm ( { . . . editForm , address : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< / >
) : (
< >
< div className = "grid grid-cols-2 gap-3" >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Contact Name < / p >
< p className = "text-sm font-semibold text-slate-700" > { biker . kyc . emergencyContact . name } < / p >
< / div >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Relationship < / p >
< p className = "text-sm font-medium text-slate-700" > { biker . kyc . emergencyContact . relationship } < / p >
< / div >
< / div >
< div className = "grid grid-cols-2 gap-3" >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Phone < / p >
< p className = "text-sm font-medium text-slate-700" > { biker . kyc . emergencyContact . phone } < / p >
< / div >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Email < / p >
< p className = "text-sm font-medium text-slate-700" > { biker . kyc . emergencyContact . email } < / p >
< / div >
< / div >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Address < / p >
< p className = "text-sm font-medium text-slate-700" > { biker . kyc . emergencyContact . address } < / p >
< / div >
< / >
) }
< / div >
2026-04-26 14:56:12 +06:00
< / div >
2026-05-13 02:06:28 +06:00
{ /* Present Address */ }
< div className = "bg-white rounded-xl border border-slate-200 overflow-hidden" >
< div className = "px-5 py-4 bg-green-50 border-b border-green-100 flex items-center justify-between" >
< h3 className = "text-sm font-semibold text-slate-800 flex items-center gap-2" >
< MapPinHouse className = "w-4 h-4 text-green-600" / > Present Address
< / h3 >
{ editingSection !== 'presentAddress' ? (
< button onClick = { ( ) = > { setEditingSection ( 'presentAddress' ) ; setEditForm ( { addressLine1 : ` ${ biker . kyc . presentAddress . houseFlat } , ${ biker . kyc . presentAddress . road } ` , addressLine2 : biker.kyc.presentAddress.block ? ` ${ biker . kyc . presentAddress . block } , ${ biker . kyc . presentAddress . area } ` : biker . kyc . presentAddress . area , division : biker.kyc.presentAddress.division , district : biker.kyc.presentAddress.district , thana : biker.kyc.presentAddress.thana , zip : biker.kyc.presentAddress.postalCode , landmark : biker.kyc.presentAddress.landmark || '' } ) ; } } className = "p-1.5 hover:bg-green-100 rounded-lg transition-colors" >
< Edit className = "w-4 h-4 text-green-600" / >
< / button >
) : (
< div className = "flex gap-1" >
< button onClick = { ( ) = > { toast . success ( 'Address updated' ) ; setEditingSection ( null ) ; } } className = "px-3 py-1.5 bg-green-600 text-white rounded-lg text-xs font-medium hover:bg-green-700" > Save < / button >
< button onClick = { ( ) = > setEditingSection ( null ) } className = "px-3 py-1.5 border border-slate-200 text-slate-600 rounded-lg text-xs font-medium hover:bg-slate-50" > Cancel < / button >
< / div >
) }
< / div >
< div className = "p-4 space-y-3" >
{ editingSection === 'presentAddress' ? (
< >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Address Line 1 < span className = "text-red-500" > * < / span > < / label >
< input type = "text" value = { editForm . addressLine1 } onChange = { ( e ) = > setEditForm ( { . . . editForm , addressLine1 : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" placeholder = "House No, Road, Area" / >
< / div >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Address Line 2 < / label >
< input type = "text" value = { editForm . addressLine2 } onChange = { ( e ) = > setEditForm ( { . . . editForm , addressLine2 : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" placeholder = "Additional info" / >
< / div >
< div className = "grid grid-cols-2 gap-3" >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Division < span className = "text-red-500" > * < / span > < / label >
< select value = { editForm . division } onChange = { ( e ) = > setEditForm ( { . . . editForm , division : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs bg-white" >
< option value = "" > Select Division < / option >
< option value = "Dhaka" > Dhaka < / option >
< option value = "Chittagong" > Chittagong < / option >
< option value = "Rajshahi" > Rajshahi < / option >
< option value = "Sylhet" > Sylhet < / option >
< option value = "Khulna" > Khulna < / option >
< option value = "Barisal" > Barisal < / option >
< option value = "Rangpur" > Rangpur < / option >
< option value = "Mymensingh" > Mymensingh < / option >
< / select >
< / div >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > District < span className = "text-red-500" > * < / span > < / label >
< input type = "text" value = { editForm . district } onChange = { ( e ) = > setEditForm ( { . . . editForm , district : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< / div >
< div className = "grid grid-cols-2 gap-3" >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Thana / Upazila < / label >
< input type = "text" value = { editForm . thana } onChange = { ( e ) = > setEditForm ( { . . . editForm , thana : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Zip Code < span className = "text-red-500" > * < / span > < / label >
< input type = "text" value = { editForm . zip } onChange = { ( e ) = > setEditForm ( { . . . editForm , zip : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< / div >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Landmark < / label >
< input type = "text" value = { editForm . landmark } onChange = { ( e ) = > setEditForm ( { . . . editForm , landmark : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" placeholder = "Near landmark" / >
< / div >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Country < span className = "text-red-500" > * < / span > < / label >
< input type = "text" value = { editForm . country || 'Bangladesh' } onChange = { ( e ) = > setEditForm ( { . . . editForm , country : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< / >
) : (
< >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Address Line 1 < / p >
< p className = "text-xs font-medium text-slate-700" > { biker . kyc . presentAddress . houseFlat } , { biker . kyc . presentAddress . road } < / p >
< / div >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Address Line 2 < / p >
< p className = "text-xs font-medium text-slate-700" > { biker . kyc . presentAddress . block ? ` ${ biker . kyc . presentAddress . block } , ` : '' } { biker . kyc . presentAddress . area } < / p >
< / div >
< div className = "grid grid-cols-2 gap-3" >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Division < / p >
< p className = "text-xs font-medium text-slate-700" > { biker . kyc . presentAddress . division } < / p >
< / div >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > District < / p >
< p className = "text-xs font-medium text-slate-700" > { biker . kyc . presentAddress . district } < / p >
< / div >
< / div >
< div className = "grid grid-cols-2 gap-3" >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Thana / Upazila < / p >
< p className = "text-xs font-medium text-slate-700" > { biker . kyc . presentAddress . thana } < / p >
< / div >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Zip Code < / p >
< p className = "text-xs font-medium text-slate-700" > { biker . kyc . presentAddress . postalCode } < / p >
< / div >
< / div >
{ biker . kyc . presentAddress . landmark && (
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Landmark < / p >
< p className = "text-xs font-medium text-slate-700" > { biker . kyc . presentAddress . landmark } < / p >
< / div >
) }
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Country < / p >
< p className = "text-xs font-medium text-slate-700" > Bangladesh < / p >
< / div >
< / >
) }
< / div >
2026-04-26 14:56:12 +06:00
< / div >
2026-05-13 02:06:28 +06:00
{ /* Permanent Address */ }
< div className = "bg-white rounded-xl border border-slate-200 overflow-hidden" >
< div className = "px-5 py-4 bg-emerald-50 border-b border-emerald-100 flex items-center justify-between" >
< h3 className = "text-sm font-semibold text-slate-800 flex items-center gap-2" >
< Home className = "w-4 h-4 text-emerald-600" / > Permanent Address
< / h3 >
< div className = "flex items-center gap-3" >
< label className = "flex items-center gap-1.5 cursor-pointer" >
< input type = "checkbox" checked = { biker . kyc . isPermanentSame } onChange = { ( ) = > { } } className = "w-3.5 h-3.5 rounded border-slate-300" / >
< span className = "text-xs text-slate-600" > Same as Present < / span >
< / label >
{ editingSection !== 'permanentAddress' ? (
< button onClick = { ( ) = > { setEditingSection ( 'permanentAddress' ) ; setEditForm ( { addressLine1 : ` ${ biker . kyc . permanentAddress . houseFlat } , ${ biker . kyc . permanentAddress . road } ` , addressLine2 : biker.kyc.permanentAddress.block ? ` ${ biker . kyc . permanentAddress . block } , ${ biker . kyc . permanentAddress . area } ` : biker . kyc . permanentAddress . area , division : biker.kyc.permanentAddress.division , district : biker.kyc.permanentAddress.district , thana : biker.kyc.permanentAddress.thana || '' , zip : biker.kyc.permanentAddress.postalCode , landmark : '' , country : 'Bangladesh' } ) ; } } className = "p-1.5 hover:bg-emerald-100 rounded-lg transition-colors" >
< Edit className = "w-4 h-4 text-emerald-600" / >
< / button >
) : (
< div className = "flex gap-1" >
< button onClick = { ( ) = > { toast . success ( 'Address updated' ) ; setEditingSection ( null ) ; } } className = "px-3 py-1.5 bg-green-600 text-white rounded-lg text-xs font-medium hover:bg-green-700" > Save < / button >
< button onClick = { ( ) = > setEditingSection ( null ) } className = "px-3 py-1.5 border border-slate-200 text-slate-600 rounded-lg text-xs font-medium hover:bg-slate-50" > Cancel < / button >
< / div >
) }
< / div >
2026-04-26 14:56:12 +06:00
< / div >
2026-05-13 02:06:28 +06:00
< div className = "p-4 space-y-3" >
{ editingSection === 'permanentAddress' ? (
< >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Address Line 1 < span className = "text-red-500" > * < / span > < / label >
< input type = "text" value = { editForm . addressLine1 } onChange = { ( e ) = > setEditForm ( { . . . editForm , addressLine1 : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" placeholder = "House No, Road, Area" / >
< / div >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Address Line 2 < / label >
< input type = "text" value = { editForm . addressLine2 } onChange = { ( e ) = > setEditForm ( { . . . editForm , addressLine2 : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" placeholder = "Additional info" / >
< / div >
< div className = "grid grid-cols-2 gap-3" >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Division < span className = "text-red-500" > * < / span > < / label >
< select value = { editForm . division } onChange = { ( e ) = > setEditForm ( { . . . editForm , division : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs bg-white" >
< option value = "" > Select Division < / option >
< option value = "Dhaka" > Dhaka < / option >
< option value = "Chittagong" > Chittagong < / option >
< option value = "Rajshahi" > Rajshahi < / option >
< option value = "Sylhet" > Sylhet < / option >
< option value = "Khulna" > Khulna < / option >
< option value = "Barisal" > Barisal < / option >
< option value = "Rangpur" > Rangpur < / option >
< option value = "Mymensingh" > Mymensingh < / option >
< / select >
< / div >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > District < span className = "text-red-500" > * < / span > < / label >
< input type = "text" value = { editForm . district } onChange = { ( e ) = > setEditForm ( { . . . editForm , district : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< / div >
< div className = "grid grid-cols-2 gap-3" >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Thana / Upazila < / label >
< input type = "text" value = { editForm . thana } onChange = { ( e ) = > setEditForm ( { . . . editForm , thana : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Zip Code < span className = "text-red-500" > * < / span > < / label >
< input type = "text" value = { editForm . zip } onChange = { ( e ) = > setEditForm ( { . . . editForm , zip : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< / div >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Landmark < / label >
< input type = "text" value = { editForm . landmark } onChange = { ( e ) = > setEditForm ( { . . . editForm , landmark : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" placeholder = "Near landmark" / >
< / div >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Country < span className = "text-red-500" > * < / span > < / label >
< input type = "text" value = { editForm . country || 'Bangladesh' } onChange = { ( e ) = > setEditForm ( { . . . editForm , country : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< / >
) : (
< >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Address Line 1 < / p >
< p className = "text-xs font-medium text-slate-700" > { biker . kyc . permanentAddress . houseFlat } , { biker . kyc . permanentAddress . road } < / p >
< / div >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Address Line 2 < / p >
< p className = "text-xs font-medium text-slate-700" > { biker . kyc . permanentAddress . block ? ` ${ biker . kyc . permanentAddress . block } , ` : '' } { biker . kyc . permanentAddress . area } < / p >
< / div >
< div className = "grid grid-cols-2 gap-3" >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Division < / p >
< p className = "text-xs font-medium text-slate-700" > { biker . kyc . permanentAddress . division } < / p >
< / div >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > District < / p >
< p className = "text-xs font-medium text-slate-700" > { biker . kyc . permanentAddress . district } < / p >
< / div >
< / div >
< div className = "grid grid-cols-2 gap-3" >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Thana / Upazila < / p >
< p className = "text-xs font-medium text-slate-700" > { biker . kyc . permanentAddress . thana || '-' } < / p >
< / div >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Zip Code < / p >
< p className = "text-xs font-medium text-slate-700" > { biker . kyc . permanentAddress . postalCode } < / p >
< / div >
< / div >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Landmark < / p >
< p className = "text-xs font-medium text-slate-700" > { '-' } < / p >
< / div >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Country < / p >
< p className = "text-xs font-medium text-slate-700" > Bangladesh < / p >
< / div >
{ biker . kyc . isPermanentSame && (
< div className = "flex items-center gap-2 p-2 bg-green-50 rounded-lg border border-green-100" >
< Check className = "w-3 h-3 text-green-600" / >
< span className = "text-xs text-green-700 font-medium" > Same as Present Address < / span >
< / div >
) }
< / >
) }
2026-04-26 14:56:12 +06:00
< / div >
< / div >
< / div >
2026-05-13 02:06:28 +06:00
) }
{ activeTab === 'license' && (
< div className = "space-y-6" >
< SectionCard title = "Driving License Details" icon = { Car } editKey = "drivingLicense" editingSection = { editingSection } setEditingSection = { setEditingSection } onEdit = { ( ) = > { setEditForm ( { licenseNumber : biker.kyc.drivingLicense.number , licenseType : biker.kyc.drivingLicense.licenseType , licenseIssueDate : biker.kyc.drivingLicense.issueDate , licenseExpiryDate : biker.kyc.drivingLicense.expiryDate , issuingAuthority : biker.kyc.drivingLicense.issuingAuthority } ) ; } } editForm = { editForm } setEditForm = { setEditForm } biker = { biker } >
< div className = "space-y-3" >
{ editingSection === 'drivingLicense' ? (
< >
< div className = "grid grid-cols-2 gap-3" >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > License Number < span className = "text-red-500" > * < / span > < / label >
< input type = "text" value = { editForm . licenseNumber } onChange = { ( e ) = > setEditForm ( { . . . editForm , licenseNumber : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > License Type < span className = "text-red-500" > * < / span > < / label >
< select value = { editForm . licenseType } onChange = { ( e ) = > setEditForm ( { . . . editForm , licenseType : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs bg-white" >
< option value = "" > Select Type < / option >
< option value = "Non-Transport" > Non - Transport < / option >
< option value = "Transport" > Transport < / option >
< option value = "Motorcycle" > Motorcycle < / option >
< option value = "Heavy Vehicle" > Heavy Vehicle < / option >
< / select >
< / div >
< / div >
< div className = "grid grid-cols-2 gap-3" >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Issue Date < / label >
< input type = "date" value = { editForm . licenseIssueDate } onChange = { ( e ) = > setEditForm ( { . . . editForm , licenseIssueDate : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Expiry Date < / label >
< input type = "date" value = { editForm . licenseExpiryDate } onChange = { ( e ) = > setEditForm ( { . . . editForm , licenseExpiryDate : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< / div >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Issuing Authority < / label >
< input type = "text" value = { editForm . issuingAuthority } onChange = { ( e ) = > setEditForm ( { . . . editForm , issuingAuthority : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< / >
) : (
< >
< div className = "grid grid-cols-2 gap-3" >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > License Number < / p >
< p className = "text-sm font-medium text-slate-700" > { biker . kyc . drivingLicense . number } < / p >
< / div >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > License Type < / p >
< p className = "text-sm font-medium text-slate-700" > { biker . kyc . drivingLicense . licenseType } < / p >
< / div >
< / div >
< div className = "grid grid-cols-2 gap-3" >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Issue Date < / p >
< p className = "text-sm font-medium text-slate-700" > { biker . kyc . drivingLicense . issueDate } < / p >
< / div >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Expiry Date < / p >
< p className = "text-sm font-medium text-slate-700" > { biker . kyc . drivingLicense . expiryDate } < / p >
< / div >
< / div >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Issuing Authority < / p >
< p className = "text-sm font-medium text-slate-700" > { biker . kyc . drivingLicense . issuingAuthority } < / p >
< / div >
< div className = "grid grid-cols-2 gap-4 mt-2" >
< div className = "border border-slate-200 rounded-lg p-3" >
< p className = "text-xs text-slate-500 mb-2" > Front Image < / p >
{ biker . kyc . drivingLicense . frontImage ? (
< img src = { biker . kyc . drivingLicense . frontImage } alt = "License Front" className = "w-full h-40 object-cover rounded-lg" / >
) : (
< div className = "h-40 bg-slate-50 rounded-lg flex items-center justify-center" >
< Upload className = "w-8 h-8 text-slate-300" / >
< / div >
) }
< / div >
< div className = "border border-slate-200 rounded-lg p-3" >
< p className = "text-xs text-slate-500 mb-2" > Back Image < / p >
{ biker . kyc . drivingLicense . backImage ? (
< img src = { biker . kyc . drivingLicense . backImage } alt = "License Back" className = "w-full h-40 object-cover rounded-lg" / >
) : (
< div className = "h-40 bg-slate-50 rounded-lg flex items-center justify-center" >
< Upload className = "w-8 h-8 text-slate-300" / >
< / div >
) }
< / div >
< / div >
< / >
) }
< / div >
< / SectionCard >
2026-04-26 14:56:12 +06:00
2026-05-13 02:06:28 +06:00
< SectionCard title = "GPS Device Information" icon = { Navigation } editKey = "gps" editingSection = { editingSection } setEditingSection = { setEditingSection } onEdit = { ( ) = > { setEditForm ( { gpsDeviceId : biker.gpsDeviceId , gpsStatus : biker.gpsStatus , lastLocation : biker.lastLocation } ) ; } } editForm = { editForm } setEditForm = { setEditForm } biker = { biker } >
2026-04-26 14:56:12 +06:00
< div className = "space-y-3" >
2026-05-13 02:06:28 +06:00
{ editingSection === 'gps' ? (
< >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Device ID < / label >
< input type = "text" value = { editForm . gpsDeviceId } onChange = { ( e ) = > setEditForm ( { . . . editForm , gpsDeviceId : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Status < / label >
< select value = { editForm . gpsStatus } onChange = { ( e ) = > setEditForm ( { . . . editForm , gpsStatus : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs bg-white" >
< option value = "Online" > Online < / option >
< option value = "Offline" > Offline < / option >
< option value = "Inactive" > Inactive < / option >
< / select >
< / div >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Last Location < / label >
< input type = "text" value = { editForm . lastLocation } onChange = { ( e ) = > setEditForm ( { . . . editForm , lastLocation : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< / >
) : (
< >
< div className = "grid grid-cols-2 gap-3" >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Device ID < / p >
< p className = "text-sm font-medium text-slate-700" > { biker . gpsDeviceId } < / p >
< / div >
< div className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-xs text-slate-500 mb-1" > Status < / p >
< span className = { ` inline-flex items-center gap-1 text-sm font-medium ${ biker . gpsStatus === 'Online' ? 'text-green-600' : 'text-red-600' } ` } >
< span className = { ` w-2 h-2 rounded-full ${ biker . gpsStatus === 'Online' ? 'bg-green-500' : 'bg-red-500' } ` } / >
{ biker . gpsStatus }
< / span >
< / div >
< / div >
< div className = "p-3 bg-slate-50 rounded-lg" >
< div className = "flex items-center justify-between" >
< div >
< p className = "text-xs text-slate-500 mb-1" > Last Location < / p >
< p className = "text-sm font-medium text-slate-700" > { biker . lastLocation } < / p >
< / div >
< a href = { ` https://www.google.com/maps?q= ${ biker . lastLocation } ` } target = "_blank" rel = "noopener noreferrer" className = "p-1 hover:bg-slate-100 rounded-lg" >
< Map className = "w-4 h-4 text-blue-500" / >
< / a >
< / div >
< / div >
< / >
) }
< / div >
< / SectionCard >
< / div >
) }
{ activeTab === 'documents' && (
< div className = "space-y-6" >
< div className = "flex items-center justify-between mb-4" >
< h3 className = "text-lg font-semibold text-slate-800" > Documents < / h3 >
< button onClick = { ( ) = > setShowDocumentUpload ( true ) } className = "px-4 py-2 bg-emerald-600 text-white rounded-lg text-sm font-medium hover:bg-emerald-700 flex items-center gap-2" >
< Upload className = "w-4 h-4" / > Upload Documents
< / button >
< / div >
< SectionCard title = "KYC Documents" icon = { FileCheck } >
< div className = "space-y-4" >
2026-04-26 14:56:12 +06:00
< div >
2026-05-13 02:06:28 +06:00
< p className = "text-sm font-semibold text-slate-700 mb-3" > National ID < / p >
< div className = "grid grid-cols-2 gap-4" >
< div className = "border border-slate-200 rounded-lg p-3" >
< div className = "flex items-center justify-between mb-2" >
< p className = "text-sm font-medium text-slate-700" > NID Front < / p >
< span className = "inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full bg-green-100 text-green-700" >
< CheckCircle className = "w-3 h-3" / > Approved
< / span >
< / div >
{ biker . kyc . nidFrontImage && (
< img src = { biker . kyc . nidFrontImage } alt = "NID Front" className = "w-full h-40 object-cover rounded-lg" / >
) }
< / div >
< div className = "border border-slate-200 rounded-lg p-3" >
< div className = "flex items-center justify-between mb-2" >
< p className = "text-sm font-medium text-slate-700" > NID Back < / p >
< span className = "inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full bg-green-100 text-green-700" >
< CheckCircle className = "w-3 h-3" / > Approved
< / span >
< / div >
{ biker . kyc . nidBackImage && (
< img src = { biker . kyc . nidBackImage } alt = "NID Back" className = "w-full h-40 object-cover rounded-lg" / >
) }
< / div >
< / div >
2026-04-26 14:56:12 +06:00
< / div >
2026-05-13 02:06:28 +06:00
2026-04-26 14:56:12 +06:00
< div >
2026-05-13 02:06:28 +06:00
< p className = "text-sm font-semibold text-slate-700 mb-3" > Driving License < / p >
< div className = "grid grid-cols-2 gap-4" >
< div className = "border border-slate-200 rounded-lg p-3" >
< div className = "flex items-center justify-between mb-2" >
< p className = "text-sm font-medium text-slate-700" > License Front < / p >
{ biker . kyc . drivingLicense . frontImage ? (
< span className = "inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full bg-green-100 text-green-700" >
< CheckCircle className = "w-3 h-3" / > Uploaded
< / span >
) : (
< span className = "inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full bg-red-100 text-red-700" > Missing < / span >
) }
< / div >
{ biker . kyc . drivingLicense . frontImage && (
< img src = { biker . kyc . drivingLicense . frontImage } alt = "License Front" className = "w-full h-40 object-cover rounded-lg" / >
) }
< / div >
< div className = "border border-slate-200 rounded-lg p-3" >
< div className = "flex items-center justify-between mb-2" >
< p className = "text-sm font-medium text-slate-700" > License Back < / p >
{ biker . kyc . drivingLicense . backImage ? (
< span className = "inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full bg-green-100 text-green-700" >
< CheckCircle className = "w-3 h-3" / > Uploaded
< / span >
) : (
< span className = "inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full bg-red-100 text-red-700" > Missing < / span >
) }
< / div >
{ biker . kyc . drivingLicense . backImage && (
< img src = { biker . kyc . drivingLicense . backImage } alt = "License Back" className = "w-full h-40 object-cover rounded-lg" / >
) }
< / div >
< / div >
2026-04-26 14:56:12 +06:00
< / div >
2026-05-13 02:06:28 +06:00
2026-04-26 14:56:12 +06:00
< div >
2026-05-13 02:06:28 +06:00
< p className = "text-sm font-semibold text-slate-700 mb-3" > Nominee Documents < / p >
< div className = "grid grid-cols-3 gap-4" >
< div className = "border border-slate-200 rounded-lg p-3" >
< p className = "text-xs text-slate-500 mb-2" > Nominee Photo < / p >
{ biker . kyc . nominee . photo ? (
< img src = { biker . kyc . nominee . photo } alt = "Nominee" className = "w-full h-32 object-cover rounded-lg" / >
) : (
< div className = "h-32 bg-slate-50 rounded-lg flex items-center justify-center" >
< User className = "w-6 h-6 text-slate-300" / >
< / div >
) }
< / div >
< div className = "border border-slate-200 rounded-lg p-3" >
< p className = "text-xs text-slate-500 mb-2" > Nominee NID Front < / p >
{ biker . kyc . nominee . nidFront ? (
< img src = { biker . kyc . nominee . nidFront } alt = "NID Front" className = "w-full h-32 object-cover rounded-lg" / >
) : (
< div className = "h-32 bg-slate-50 rounded-lg flex items-center justify-center" >
< Image className = "w-6 h-6 text-slate-300" / >
< / div >
) }
< / div >
< div className = "border border-slate-200 rounded-lg p-3" >
< p className = "text-xs text-slate-500 mb-2" > Nominee NID Back < / p >
{ biker . kyc . nominee . nidBack ? (
< img src = { biker . kyc . nominee . nidBack } alt = "NID Back" className = "w-full h-32 object-cover rounded-lg" / >
) : (
< div className = "h-32 bg-slate-50 rounded-lg flex items-center justify-center" >
< Image className = "w-6 h-6 text-slate-300" / >
< / div >
) }
< / div >
< / div >
2026-04-26 14:56:12 +06:00
< / div >
< / div >
2026-05-13 02:06:28 +06:00
< / SectionCard >
2026-04-26 14:56:12 +06:00
2026-05-13 02:06:28 +06:00
< SectionCard title = "KYC Timeline" icon = { Clock3 } >
< div className = "space-y-0" >
{ biker . kyc . kycTimeline . map ( ( item , idx ) = > (
< TimelineItem
key = { idx }
stage = { item . stage }
status = { item . status }
timestamp = { item . timestamp }
adminName = { item . adminName }
notes = { item . notes }
isLast = { idx === biker . kyc . kycTimeline . length - 1 }
/ >
) ) }
< / div >
< / SectionCard >
< / div >
) }
{ activeTab === 'bikes' && (
< div className = "space-y-6" >
{ /* Current Bike */ }
< SectionCard title = "Current Bike" icon = { BikeIcon } >
< div className = "space-y-4" >
{ /* Bike info row */ }
< div className = "flex items-center gap-4 p-4 bg-slate-50 rounded-lg" >
< div className = "w-16 h-16 bg-blue-100 rounded-xl flex items-center justify-center" >
< BikeIcon className = "w-8 h-8 text-blue-600" / >
< / div >
< div className = "flex-1" >
< p className = "text-lg font-bold text-slate-800" > { biker . bikes . current . model } < / p >
< p className = "text-sm text-slate-500" > { biker . bikes . current . brand } • { biker . bikes . current . year } • { biker . bikes . current . color } < / p >
< p className = "text-sm text-slate-400" > { biker . bikes . current . plate } < / p >
< / div >
< div >
< span className = "inline-flex items-center gap-1 text-xs font-medium px-3 py-1.5 rounded-full bg-green-100 text-green-700" >
< Activity className = "w-3 h-3" / > Active
< / span >
2026-04-26 14:56:12 +06:00
< / div >
< / div >
2026-05-13 02:06:28 +06:00
{ /* Battery swap info */ }
< div className = "flex items-center gap-4 p-3 bg-slate-50 rounded-lg" >
< div className = { ` w-14 h-14 rounded-full flex items-center justify-center ${ biker . bikes . batteries [ 0 ] ? . percent > 50 ? 'bg-green-100' : biker . bikes . batteries [ 0 ] ? . percent > 20 ? 'bg-amber-100' : 'bg-red-100' } ` } >
< Battery className = { ` w-7 h-7 ${ biker . bikes . batteries [ 0 ] ? . percent > 50 ? 'text-green-600' : biker . bikes . batteries [ 0 ] ? . percent > 20 ? 'text-amber-600' : 'text-red-600' } ` } / >
< / div >
< div >
< p className = "text-xs text-slate-500" > Current Battery < / p >
< p className = { ` text-xl font-bold ${ biker . bikes . batteries [ 0 ] ? . percent > 50 ? 'text-green-600' : biker . bikes . batteries [ 0 ] ? . percent > 20 ? 'text-amber-600' : 'text-red-600' } ` } > { biker . bikes . batteries [ 0 ] ? . percent } % < / p >
< / div >
< div >
< p className = "text-xs text-slate-500" > Battery ID < / p >
< p className = "text-sm font-semibold text-slate-700 font-mono" > { biker . bikes . batteries [ 0 ] ? . id } < / p >
< / div >
< div >
< p className = "text-xs text-slate-500" > Location < / p >
< p className = "text-sm font-semibold text-slate-700" > { biker . bikes . batteries [ 0 ] ? . location } < / p >
< / div >
2026-04-26 14:56:12 +06:00
< / div >
2026-05-13 02:06:28 +06:00
{ /* Battery info grid */ }
< div className = "grid grid-cols-2 md:grid-cols-4 gap-3" >
< div className = "bg-slate-50 p-3 rounded-lg" >
< p className = "text-xs text-slate-500" > Battery Capacity < / p >
< p className = "text-sm font-semibold text-slate-700" > { biker . bikes . current . batteryCapacity } < / p >
< / div >
< div className = "bg-slate-50 p-3 rounded-lg" >
< p className = "text-xs text-slate-500" > Max Range < / p >
< p className = "text-sm font-semibold text-slate-700" > { biker . bikes . current . maxRange } < / p >
< / div >
< div className = "bg-slate-50 p-3 rounded-lg" >
< p className = "text-xs text-slate-500" > Odometer < / p >
< p className = "text-sm font-semibold text-slate-700" > { biker . bikes . current . totalKmRun . toLocaleString ( ) } km < / p >
< / div >
< div className = "bg-slate-50 p-3 rounded-lg" >
< p className = "text-xs text-slate-500" > VIN < / p >
< p className = "text-sm font-semibold text-slate-700 font-mono" > { biker . bikes . current . vin } < / p >
< / div >
2026-04-26 14:56:12 +06:00
< / div >
2026-05-13 02:06:28 +06:00
< div className = "grid grid-cols-2 gap-3" >
< div className = "bg-slate-50 p-3 rounded-lg" >
< p className = "text-xs text-slate-500" > Last Service < / p >
< p className = "text-sm font-semibold text-slate-700" > { biker . bikes . current . lastService } < / p >
< / div >
< div className = "bg-slate-50 p-3 rounded-lg" >
< p className = "text-xs text-slate-500" > Next Service < / p >
< p className = "text-sm font-semibold text-slate-700" > { biker . bikes . current . nextService } < / p >
< / div >
< / div >
{ /* Initial Condition Images */ }
{ biker . currentRental . initialConditionImages . length > 0 && (
< div >
< p className = "text-sm font-semibold text-slate-700 mb-2" > Initial Condition Photos < / p >
< div className = "grid grid-cols-4 gap-2" >
{ biker . currentRental . initialConditionImages . map ( ( img , idx ) = > (
< img key = { idx } src = { img } alt = { ` Condition ${ idx + 1 } ` } className = "w-full h-20 object-cover rounded-lg" / >
) ) }
< / div >
< / div >
) }
2026-04-26 14:56:12 +06:00
< / div >
2026-05-13 02:06:28 +06:00
< / SectionCard >
{ /* Battery History */ }
< SectionCard title = "Battery History" icon = { Battery } editKey = "batteryHistory" editingSection = { editingSection } setEditingSection = { setEditingSection } onEdit = { ( ) = > { setEditForm ( { } ) ; } } editForm = { editForm } setEditForm = { setEditForm } biker = { biker } >
< div className = "space-y-3" >
{ editingSection === 'batteryHistory' ? (
< >
{ editForm . editingIndex !== undefined ? (
< >
< div className = "flex items-center justify-between mb-2" >
< p className = "text-xs font-semibold text-slate-500" > Editing : { biker . bikes . batteries [ editForm . editingIndex ] ? . name } < / p >
< button onClick = { ( ) = > setEditForm ( { . . . editForm , editingIndex : undefined } ) } className = "text-xs text-blue-600 hover:underline" > + Add New < / button >
< / div >
< div className = "grid grid-cols-2 gap-3" >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Battery Name < / label >
< input type = "text" value = { editForm . batName || '' } onChange = { ( e ) = > setEditForm ( { . . . editForm , batName : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Battery ID < / label >
< input type = "text" value = { editForm . batId || '' } onChange = { ( e ) = > setEditForm ( { . . . editForm , batId : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< / div >
< div className = "grid grid-cols-2 gap-3" >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Charge % < / label >
< input type = "number" value = { editForm . batPercent || '' } onChange = { ( e ) = > setEditForm ( { . . . editForm , batPercent : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Status < / label >
< select value = { editForm . batStatus || '' } onChange = { ( e ) = > setEditForm ( { . . . editForm , batStatus : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs bg-white" >
< option value = "active" > Active < / option >
< option value = "available" > Available < / option >
< option value = "charging" > Charging < / option >
< / select >
< / div >
< / div >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Location < / label >
< input type = "text" value = { editForm . batLocation || '' } onChange = { ( e ) = > setEditForm ( { . . . editForm , batLocation : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< div className = "grid grid-cols-2 gap-3" >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Swapped At < / label >
< input type = "text" value = { editForm . batSwappedAt || '' } onChange = { ( e ) = > setEditForm ( { . . . editForm , batSwappedAt : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Odometer < / label >
< input type = "number" value = { editForm . batOdometer || '' } onChange = { ( e ) = > setEditForm ( { . . . editForm , batOdometer : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< / div >
< / >
) : (
< >
< div className = "flex items-center justify-between mb-2" >
< p className = "text-xs font-semibold text-slate-500" > Add New Battery < / p >
{ biker . bikes . batteries . length > 0 && (
< button onClick = { ( ) = > { const bat = biker . bikes . batteries [ 0 ] ; setEditForm ( { batId : bat.id , batName : bat.name , batPercent : bat.percent , batStatus : bat.status , batLocation : bat.location , batSwappedAt : bat.swappedAt , batOdometer : bat.odometer , editingIndex : 0 } ) ; } } className = "text-xs text-blue-600 hover:underline" > Edit existing < / button >
) }
< / div >
< div className = "grid grid-cols-2 gap-3" >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Battery ID < span className = "text-red-500" > * < / span > < / label >
< input type = "text" value = { editForm . batId || '' } onChange = { ( e ) = > setEditForm ( { . . . editForm , batId : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" placeholder = "BAT-DH-004" / >
< / div >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Battery Name < / label >
< input type = "text" value = { editForm . batName || '' } onChange = { ( e ) = > setEditForm ( { . . . editForm , batName : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" placeholder = "Battery D" / >
< / div >
< / div >
< div className = "grid grid-cols-2 gap-3" >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Charge % < / label >
< input type = "number" value = { editForm . batPercent || '' } onChange = { ( e ) = > setEditForm ( { . . . editForm , batPercent : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" placeholder = "0-100" / >
< / div >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Status < / label >
< select value = { editForm . batStatus || 'available' } onChange = { ( e ) = > setEditForm ( { . . . editForm , batStatus : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs bg-white" >
< option value = "active" > Active < / option >
< option value = "available" > Available < / option >
< option value = "charging" > Charging < / option >
< / select >
< / div >
< / div >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Location < / label >
< input type = "text" value = { editForm . batLocation || '' } onChange = { ( e ) = > setEditForm ( { . . . editForm , batLocation : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" placeholder = "Swap Station" / >
< / div >
< div className = "grid grid-cols-2 gap-3" >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Swapped At < / label >
< input type = "text" value = { editForm . batSwappedAt || '' } onChange = { ( e ) = > setEditForm ( { . . . editForm , batSwappedAt : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" placeholder = "YYYY-MM-DD HH:MM" / >
< / div >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Odometer ( KM ) < / label >
< input type = "number" value = { editForm . batOdometer || '' } onChange = { ( e ) = > setEditForm ( { . . . editForm , batOdometer : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< / div >
< / >
) }
< / >
) : (
< >
< div className = "flex justify-end mb-2" >
< button onClick = { ( ) = > { setEditingSection ( 'batteryHistory' ) ; setEditForm ( { editingIndex : undefined } ) ; } } className = "px-3 py-1.5 bg-blue-600 text-white rounded-lg text-xs font-medium hover:bg-blue-700 flex items-center gap-1" >
< Plus className = "w-3 h-3" / > Add Battery
< / button >
< / div >
{ biker . bikes . batteries . map ( ( bat , idx ) = > (
< div key = { bat . id } className = { ` p-4 rounded-lg border ${ bat . status === 'active' ? 'bg-green-50 border-green-200' : bat . status === 'charging' ? 'bg-amber-50 border-amber-200' : 'bg-slate-50 border-slate-200' } ` } >
< div className = "flex items-center justify-between" >
< div className = "flex items-center gap-3" >
< div className = { ` w-10 h-10 rounded-full flex items-center justify-center ${ bat . percent > 50 ? 'bg-green-100' : bat . percent > 20 ? 'bg-amber-100' : 'bg-red-100' } ` } >
< Battery className = { ` w-5 h-5 ${ bat . percent > 50 ? 'text-green-600' : bat . percent > 20 ? 'text-amber-600' : 'text-red-600' } ` } / >
< / div >
< div >
< p className = "font-medium text-slate-700" > { bat . name } < span className = "text-xs text-slate-400" > ( { bat . id } ) < / span > < / p >
< p className = "text-sm text-slate-500" > { bat . location } & bull ; Swapped : { bat . swappedAt } < / p >
< / div >
< / div >
< div className = "flex items-center gap-2" >
< span className = { ` text-lg font-bold ${ bat . percent > 50 ? 'text-green-600' : bat . percent > 20 ? 'text-amber-600' : 'text-red-600' } ` } > { bat . percent } % < / span >
< span className = { ` text-xs font-medium px-2.5 py-1 rounded-full ${ bat . status === 'active' ? 'bg-green-100 text-green-700' : bat . status === 'charging' ? 'bg-amber-100 text-amber-700' : 'bg-blue-100 text-blue-700' } ` } >
{ bat . status . charAt ( 0 ) . toUpperCase ( ) + bat . status . slice ( 1 ) }
< / span >
< button onClick = { ( ) = > { setEditForm ( { batId : bat.id , batName : bat.name , batPercent : bat.percent , batStatus : bat.status , batLocation : bat.location , batSwappedAt : bat.swappedAt , batOdometer : bat.odometer , editingIndex : idx } ) ; setEditingSection ( 'batteryHistory' ) ; } } className = "p-1.5 hover:bg-white rounded-lg" >
< Edit className = "w-4 h-4 text-slate-400 hover:text-blue-600" / >
< / button >
< / div >
< / div >
< / div >
) ) }
< / >
) }
< / div >
< / SectionCard >
{ /* Previous Rentals */ }
< SectionCard title = "Previous Rentals" icon = { History } >
< div className = "space-y-3" >
{ biker . previousRentals . length > 0 ? (
< >
< div className = "flex justify-end mb-2" >
< button onClick = { ( ) = > { setEditingSection ( 'previousRentals' ) ; setEditForm ( { } ) ; } } className = "px-3 py-1.5 bg-blue-600 text-white rounded-lg text-xs font-medium hover:bg-blue-700 flex items-center gap-1" >
< Plus className = "w-3 h-3" / > Add Rental
< / button >
< / div >
{ biker . previousRentals . map ( ( rental , idx ) = > (
< div key = { rental . id } className = "p-4 rounded-lg border border-slate-200 bg-slate-50" >
< div className = "flex items-center justify-between mb-3" >
< div >
< p className = "font-medium text-slate-700" > { rental . evModel } < / p >
< p className = "text-xs text-slate-400" > { rental . plate } & bull ; { rental . id } < / p >
< / div >
< div className = "flex items-center gap-2" >
< span className = { ` text-xs font-medium px-2.5 py-1 rounded-full ${ rental . status === 'Completed' ? 'bg-blue-100 text-blue-700' : rental . status === 'Cancelled' ? 'bg-red-100 text-red-700' : 'bg-slate-100 text-slate-500' } ` } >
{ rental . status }
< / span >
< button onClick = { ( ) = > { setEditForm ( { rentalEvModel : rental.evModel , rentalPlate : rental.plate , rentalPlanName : rental.planName , rentalStartDate : rental.startDate , rentalEndDate : rental.endDate || '' , rentalTotalAmount : rental.totalAmount , rentalStatus : rental.status , rentalPenalty : rental.penalty , editingIndex : idx } ) ; setEditingSection ( 'previousRentals' ) ; } } className = "p-1.5 hover:bg-white rounded-lg" >
< Edit className = "w-4 h-4 text-slate-400 hover:text-blue-600" / >
< / button >
< / div >
< / div >
{ editingSection === 'previousRentals' && editForm . editingIndex === idx ? (
< >
< div className = "grid grid-cols-2 gap-3" >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > EV Model < / label >
< input type = "text" value = { editForm . rentalEvModel || '' } onChange = { ( e ) = > setEditForm ( { . . . editForm , rentalEvModel : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Plate < / label >
< input type = "text" value = { editForm . rentalPlate || '' } onChange = { ( e ) = > setEditForm ( { . . . editForm , rentalPlate : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< / div >
< div className = "grid grid-cols-2 gap-3" >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Plan Name < / label >
< select value = { editForm . rentalPlanName || '' } onChange = { ( e ) = > setEditForm ( { . . . editForm , rentalPlanName : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs bg-white" >
< option value = "" > Select Plan < / option >
< option value = "Daily Rental" > Daily Rental < / option >
< option value = "Weekly Rental" > Weekly Rental < / option >
< option value = "Monthly Rental" > Monthly Rental < / option >
< / select >
< / div >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Status < / label >
< select value = { editForm . rentalStatus || '' } onChange = { ( e ) = > setEditForm ( { . . . editForm , rentalStatus : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs bg-white" >
< option value = "Completed" > Completed < / option >
< option value = "Active" > Active < / option >
< option value = "Cancelled" > Cancelled < / option >
< / select >
< / div >
< / div >
< div className = "grid grid-cols-2 gap-3" >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Start Date < / label >
< input type = "date" value = { editForm . rentalStartDate || '' } onChange = { ( e ) = > setEditForm ( { . . . editForm , rentalStartDate : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > End Date < / label >
< input type = "date" value = { editForm . rentalEndDate || '' } onChange = { ( e ) = > setEditForm ( { . . . editForm , rentalEndDate : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< / div >
< div className = "grid grid-cols-2 gap-3" >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Total Amount < / label >
< input type = "number" value = { editForm . rentalTotalAmount || '' } onChange = { ( e ) = > setEditForm ( { . . . editForm , rentalTotalAmount : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< div >
< label className = "text-xs font-medium text-slate-600 mb-1 block" > Penalty < / label >
< input type = "number" value = { editForm . rentalPenalty || 0 } onChange = { ( e ) = > setEditForm ( { . . . editForm , rentalPenalty : e.target.value } ) } className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-xs" / >
< / div >
< / div >
< / >
) : (
< div className = "grid grid-cols-2 md:grid-cols-4 gap-2" >
< div className = "p-2 bg-white rounded-lg" >
< p className = "text-xs text-slate-500" > Plan < / p >
< p className = "text-xs font-medium text-slate-700" > { rental . planName } < / p >
< / div >
< div className = "p-2 bg-white rounded-lg" >
< p className = "text-xs text-slate-500" > Start < / p >
< p className = "text-xs font-medium text-slate-700" > { rental . startDate } < / p >
< / div >
< div className = "p-2 bg-white rounded-lg" >
< p className = "text-xs text-slate-500" > End < / p >
< p className = "text-xs font-medium text-slate-700" > { rental . endDate || '-' } < / p >
< / div >
< div className = "p-2 bg-white rounded-lg" >
< p className = "text-xs text-slate-500" > Total < / p >
< p className = "text-xs font-semibold text-green-600" > ৳ { rental . totalAmount . toLocaleString ( ) } { rental . penalty > 0 ? < span className = "text-red-400 ml-1" > ( + ৳ { rental . penalty } ) < / span > : null } < / p >
< / div >
< / div >
) }
< / div >
) ) }
< / >
) : (
< p className = "text-sm text-slate-400" > No previous rentals < / p >
) }
< / div >
< / SectionCard >
2026-04-26 14:56:12 +06:00
< / div >
2026-05-13 02:06:28 +06:00
) }
2026-04-26 14:56:12 +06:00
2026-05-13 02:06:28 +06:00
{ activeTab === 'rent' && (
< div className = "space-y-6" >
{ /* Financial Summary */ }
2026-05-13 02:12:40 +06:00
< div className = "grid grid-cols-2 lg:grid-cols-5 gap-4" >
2026-05-13 02:06:28 +06:00
< 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 >
2026-04-26 14:56:12 +06:00
< / div >
2026-05-13 02:06:28 +06:00
< div className = "bg-red-50 p-4 rounded-xl border border-red-200" >
< p className = "text-xs text-red-600" > Total Due < / p >
< p className = "text-xl font-bold text-red-700" > ৳ { biker . totalDue . toLocaleString ( ) } < / p >
2026-04-26 14:56:12 +06:00
< / div >
2026-05-13 02:06:28 +06:00
< div className = "bg-amber-50 p-4 rounded-xl border border-amber-200" >
< p className = "text-xs text-amber-600" > Pending < / p >
< p className = "text-xl font-bold text-amber-700" > ৳ { biker . pendingAmount . toLocaleString ( ) } < / p >
2026-04-26 14:56:12 +06:00
< / div >
2026-05-13 02:12:40 +06:00
< 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 >
2026-05-13 02:06:28 +06:00
< 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 >
2026-04-26 14:56:12 +06:00
< / div >
< / div >
2026-05-13 02:06:28 +06:00
{ /* Wallet */ }
< SectionCard title = "Wallet" icon = { Wallet } >
< div className = "text-center py-4" >
< p className = "text-xs text-slate-500 mb-1" > Balance < / p >
< p className = "text-4xl font-extrabold text-green-600" > ৳ { biker . walletBalance . toLocaleString ( ) } < / p >
< p className = "text-xs text-slate-400 mt-2" > Last updated : March 28 , 2024 < / p >
< / div >
< / SectionCard >
{ /* Payment History */ }
< SectionCard title = "Payment History" icon = { Banknote } >
< div className = "overflow-x-auto" >
< table className = "w-full" >
< thead className = "bg-slate-50" >
< tr >
< th className = "px-4 py-2 text-left text-xs font-semibold text-slate-500" > Date < / th >
< th className = "px-4 py-2 text-left text-xs font-semibold text-slate-500" > Type < / th >
< th className = "px-4 py-2 text-left text-xs font-semibold text-slate-500" > Amount < / th >
< th className = "px-4 py-2 text-left text-xs font-semibold text-slate-500" > Method < / th >
< th className = "px-4 py-2 text-left text-xs font-semibold text-slate-500" > Status < / th >
< / tr >
< / thead >
< tbody className = "divide-y divide-slate-100" >
{ paginatedTransactions . map ( txn = > (
< tr key = { txn . id } className = "hover:bg-slate-50" >
< td className = "px-4 py-2 text-sm text-slate-600" > { txn . date } < / td >
< td className = "px-4 py-2 text-sm text-slate-700 capitalize" > { txn . type } < / td >
< td className = "px-4 py-2 text-sm font-semibold text-green-600" > ৳ { Math . abs ( txn . amount ) . toLocaleString ( ) } < / td >
< td className = "px-4 py-2 text-sm text-slate-600 capitalize" > { txn . method } < / td >
< td className = "px-4 py-2 text-xs" >
< span className = "inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-green-100 text-green-700" > { txn . status } < / span >
< / td >
< / tr >
) ) }
< / tbody >
< / table >
< / div >
< div className = "flex items-center justify-between mt-4 pt-4 border-t border-slate-100" >
< p className = "text-sm text-slate-500" > Showing { ( ( transactionPage - 1 ) * perPage ) + 1 } - { Math . min ( transactionPage * perPage , biker . transactions . length ) } of { biker . transactions . length } < / p >
< div className = "flex gap-2" >
< button onClick = { ( ) = > setTransactionPage ( p = > Math . max ( 1 , p - 1 ) ) } disabled = { transactionPage === 1 } className = "px-3 py-1.5 border border-slate-200 rounded-lg text-sm disabled:opacity-50 hover:bg-slate-50" > Previous < / button >
< button onClick = { ( ) = > setTransactionPage ( p = > Math . min ( totalTransactionPages , p + 1 ) ) } disabled = { transactionPage === totalTransactionPages } className = "px-3 py-1.5 border border-slate-200 rounded-lg text-sm disabled:opacity-50 hover:bg-slate-50" > Next < / button >
< / div >
< / div >
< / SectionCard >
{ /* Rent History Table */ }
< SectionCard title = "Rent History" icon = { History } >
< div className = "overflow-x-auto" >
< table className = "w-full" >
< thead className = "bg-slate-50" >
< tr >
< th className = "px-3 py-2 text-left text-xs font-semibold text-slate-500" > Date < / th >
< th className = "px-3 py-2 text-left text-xs font-semibold text-slate-500" > Bike < / th >
< th className = "px-3 py-2 text-left text-xs font-semibold text-slate-500" > Plan < / th >
< th className = "px-3 py-2 text-left text-xs font-semibold text-slate-500" > Duration < / th >
< th className = "px-3 py-2 text-left text-xs font-semibold text-slate-500" > Rent < / th >
< th className = "px-3 py-2 text-left text-xs font-semibold text-slate-500" > Penalty < / th >
< th className = "px-3 py-2 text-left text-xs font-semibold text-slate-500" > Total < / th >
< th className = "px-3 py-2 text-left text-xs font-semibold text-slate-500" > Status < / th >
< / tr >
< / thead >
< tbody className = "divide-y divide-slate-100" >
{ biker . currentRental && (
< tr className = "bg-green-50" >
< td className = "px-3 py-2.5 text-xs text-slate-600" > { biker . currentRental . startDate } < / td >
< td className = "px-3 py-2.5" >
< p className = "text-xs font-medium text-slate-700" > { biker . currentRental . evModel } < / p >
< p className = "text-xs text-slate-400" > { biker . currentRental . plate } < / p >
< / td >
< td className = "px-3 py-2.5 text-xs text-slate-600" > { biker . currentRental . planName } < / td >
< td className = "px-3 py-2.5 text-xs text-slate-600 capitalize" > { biker . currentRental . subscriptionType } < / td >
< td className = "px-3 py-2.5 text-xs font-medium text-slate-700" > ৳ { ( biker . currentRental . monthlyRate || biker . currentRental . weeklyRate || biker . currentRental . dailyRate ) . toLocaleString ( ) } < / td >
< td className = "px-3 py-2.5 text-xs text-slate-400" > - < / td >
< td className = "px-3 py-2.5 text-xs font-semibold text-green-600" > ৳ { biker . currentRental . totalAmount . toLocaleString ( ) } < / td >
< td className = "px-3 py-2.5" >
< span className = "inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full bg-green-100 text-green-700" > Active < / span >
< / td >
< / tr >
) }
{ biker . previousRentals . map ( rental = > (
< tr key = { rental . id } className = "hover:bg-slate-50" >
< td className = "px-3 py-2.5 text-xs text-slate-600" > { rental . startDate } < / td >
< td className = "px-3 py-2.5" >
< p className = "text-xs font-medium text-slate-700" > { rental . evModel } < / p >
< p className = "text-xs text-slate-400" > { rental . plate } < / p >
< / td >
< td className = "px-3 py-2.5 text-xs text-slate-600" > { rental . planName } < / td >
< td className = "px-3 py-2.5 text-xs text-slate-600" > { rental . endDate || '-' } < / td >
< td className = "px-3 py-2.5 text-xs font-medium text-slate-700" > ৳ { ( ( rental . monthlyRate || rental . weeklyRate ) || 0 ) . toLocaleString ( ) } < / td >
< td className = "px-3 py-2.5 text-xs text-red-500" > { rental . penalty > 0 ? ` ৳ ${ rental . penalty . toLocaleString ( ) } ` : '-' } < / td >
< td className = "px-3 py-2.5 text-xs font-semibold text-green-600" > ৳ { rental . totalAmount . toLocaleString ( ) } < / td >
< td className = "px-3 py-2.5" >
< span className = { ` inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full ${ rental . status === 'Completed' ? 'bg-blue-100 text-blue-700' : rental . status === 'Cancelled' ? 'bg-red-100 text-red-700' : 'bg-slate-100 text-slate-500' } ` } >
{ rental . status }
< / span >
< / td >
< / tr >
) ) }
< / tbody >
< / table >
< / div >
< div className = "flex items-center justify-between mt-4 pt-4 border-t border-slate-100" >
< p className = "text-sm text-slate-500" > Showing page { rentPage } of { totalRentPages } < / p >
< div className = "flex gap-2" >
< button onClick = { ( ) = > setRentPage ( p = > Math . max ( 1 , p - 1 ) ) } disabled = { rentPage === 1 } className = "px-3 py-1.5 border border-slate-200 rounded-lg text-sm disabled:opacity-50 hover:bg-slate-50" > Previous < / button >
< button onClick = { ( ) = > setRentPage ( p = > Math . min ( totalRentPages , p + 1 ) ) } disabled = { rentPage === totalRentPages } className = "px-3 py-1.5 border border-slate-200 rounded-lg text-sm disabled:opacity-50 hover:bg-slate-50" > Next < / button >
< / div >
< / div >
< / SectionCard >
2026-04-26 14:56:12 +06:00
< / div >
2026-05-13 02:06:28 +06:00
) }
2026-04-26 14:56:12 +06:00
2026-05-13 02:06:28 +06:00
{ activeTab === 'activity' && (
< div className = "space-y-6" >
< SectionCard title = "Activity Log" icon = { Activity } >
< div className = "space-y-3" >
{ biker . activityLog . map ( log = > {
const Icon = log . icon ;
return (
< div key = { log . id } className = "flex items-start gap-3 p-3 bg-slate-50 rounded-lg" >
< div className = { ` p-2 rounded-lg ${ activityTypeColors [ log . type ] || 'bg-slate-100 text-slate-600' } ` } >
< Icon className = "w-4 h-4" / >
< / div >
< div className = "flex-1" >
< p className = "text-sm font-medium text-slate-700" > { log . action } < / p >
< div className = "flex items-center gap-2 mt-1" >
< span className = "text-xs text-slate-400" > { log . timestamp } < / span >
{ log . adminName && < span className = "text-xs text-slate-400" > • { log . adminName } < / span > }
< / div >
{ log . details && < p className = "text-xs text-slate-500 mt-1" > { log . details } < / p > }
< / div >
< / div >
) ;
} ) }
< / div >
< / SectionCard >
2026-04-26 14:56:12 +06:00
< / div >
2026-05-13 02:06:28 +06:00
) }
{ activeTab === 'messages' && (
< div className = "space-y-6" >
< SectionCard title = "SMS / Message History" icon = { MessageSquareDashed } >
< div className = "space-y-3 max-h-96 overflow-y-auto mb-4" >
{ biker . messageHistory . filter ( m = > m . channel === 'sms' || m . channel === 'in_app' ) . map ( msg = > (
< div key = { msg . id } className = { ` p-3 rounded-lg ${ msg . direction === 'sent' ? 'bg-blue-50 border border-blue-100' : 'bg-green-50 border border-green-100' } ` } >
< div className = "flex items-center justify-between mb-1" >
< div className = "flex items-center gap-2" >
{ msg . direction === 'sent' ? < SendHorizontal className = "w-3 h-3 text-blue-500" / > : < PhoneIncoming className = "w-3 h-3 text-green-500" / > }
< span className = "text-xs font-medium text-slate-600" > { msg . direction === 'sent' ? 'Sent' : 'Received' } < / span >
< span className = "text-xs text-slate-400 capitalize" > ( { msg . channel } ) < / span >
< / div >
< span className = "text-xs text-slate-400" > { msg . timestamp } < / span >
< / div >
< p className = "text-sm text-slate-700" > { msg . message } < / p >
< span className = { ` inline-flex items-center gap-1 text-xs mt-2 ${ msg . status === 'Delivered' || msg . status === 'Received' ? 'text-green-600' : 'text-slate-500' } ` } >
{ msg . status === 'Delivered' && < Check className = "w-3 h-3" / > }
{ msg . status }
< / span >
< / div >
) ) }
< / div >
< button onClick = { ( ) = > setShowMessageModal ( true ) } className = "w-full py-2 border border-dashed border-slate-300 rounded-lg text-sm text-slate-500 hover:border-accent hover:text-accent flex items-center justify-center gap-2" >
< Send className = "w-4 h-4" / > Send New Message
< / button >
< / SectionCard >
< SectionCard title = "Push Notification History" icon = { BellRing } >
< div className = "space-y-3" >
{ biker . messageHistory . filter ( m = > m . channel === 'push' ) . length > 0 ? (
biker . messageHistory . filter ( m = > m . channel === 'push' ) . map ( msg = > (
< div key = { msg . id } className = "p-3 bg-slate-50 rounded-lg" >
< div className = "flex items-center justify-between mb-1" >
< span className = "text-xs font-medium text-blue-600" > Push Notification < / span >
< span className = "text-xs text-slate-400" > { msg . timestamp } < / span >
< / div >
< p className = "text-sm text-slate-700" > { msg . message } < / p >
< span className = { ` inline-flex items-center gap-1 text-xs mt-2 ${ msg . status === 'Delivered' ? 'text-green-600' : 'text-slate-500' } ` } >
{ msg . status === 'Delivered' && < Check className = "w-3 h-3" / > }
{ msg . status }
< / span >
< / div >
) )
) : (
< p className = "text-sm text-slate-400" > No push notifications sent < / p >
) }
< / div >
< / SectionCard >
< / div >
) }
{ activeTab === 'notes' && (
< div className = "space-y-6" >
< SectionCard title = "Notes" icon = { ClipboardList } >
< div className = "space-y-3 mb-4" >
{ biker . notes . length > 0 ? (
biker . notes . map ( note = > (
< div key = { note . id } className = "p-3 bg-slate-50 rounded-lg" >
< p className = "text-sm text-slate-700" > { note . text } < / p >
< div className = "flex items-center gap-2 mt-2" >
< span className = "text-xs text-slate-400" > { note . createdAt } < / span >
< span className = "text-xs text-slate-400" > • < / span >
< span className = "text-xs text-slate-500" > { note . createdBy } < / span >
< / div >
< / div >
) )
) : (
< p className = "text-sm text-slate-400" > No notes yet < / p >
) }
< / div >
< div className = "flex gap-2" >
< input
type = "text"
value = { newNote }
onChange = { ( e ) = > setNewNote ( e . target . value ) }
placeholder = "Add a note..."
className = "flex-1 px-3 py-2 border border-slate-200 rounded-lg text-sm"
/ >
< button onClick = { handleAddNote } className = "px-4 py-2 bg-accent text-white rounded-lg text-sm hover:bg-accent-dark" >
Add Note
< / button >
< / div >
< / SectionCard >
< / div >
) }
{ activeTab === 'damage' && (
< div className = "space-y-6" >
< SectionCard title = "Report Damage" icon = { AlertOctagon } >
< button onClick = { ( ) = > setShowDamageModal ( true ) } className = "w-full py-3 bg-red-600 text-white rounded-lg font-medium hover:bg-red-700 flex items-center justify-center gap-2" >
< Plus className = "w-4 h-4" / > Report New Damage
< / button >
< / SectionCard >
2026-04-26 14:56:12 +06:00
2026-05-13 02:06:28 +06:00
< SectionCard title = "Damage History" icon = { ClipboardList } >
{ biker . damageReports . length > 0 ? (
< div className = "space-y-4" >
{ biker . damageReports . map ( report = > (
< div key = { report . id } className = "border border-slate-200 rounded-lg p-4" >
< div className = "flex items-start justify-between mb-3" >
< div >
< p className = "font-medium text-slate-700" > { report . damageType } < / p >
< p className = "text-xs text-slate-400" > { report . date } • { report . rentalId } < / p >
< / div >
2026-04-26 14:56:12 +06:00
< div className = "flex items-center gap-2" >
2026-05-13 02:06:28 +06:00
< span className = { ` inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${ severityColors [ report . severity ] } ` } >
{ report . severity }
< / span >
< span className = { ` inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${ statusColors [ report . status ] } ` } >
{ report . status === 'Resolved' && < CheckCircle className = "w-3 h-3" / > }
{ report . status }
< / span >
2026-04-26 14:56:12 +06:00
< / div >
2026-05-13 02:06:28 +06:00
< / div >
< p className = "text-sm text-slate-600 mb-3" > { report . description } < / p >
< div className = "grid grid-cols-2 lg:grid-cols-4 gap-3 mb-3" >
< div className = "bg-slate-50 p-2 rounded-lg" >
< p className = "text-xs text-slate-500" > Bike < / p >
< p className = "text-sm font-medium text-slate-700" > { report . bike } < / p >
< / div >
< div className = "bg-slate-50 p-2 rounded-lg" >
< p className = "text-xs text-slate-500" > Location < / p >
< p className = "text-sm font-medium text-slate-700" > { report . location } < / p >
< / div >
< div className = "bg-slate-50 p-2 rounded-lg" >
< p className = "text-xs text-slate-500" > Estimated < / p >
< p className = "text-sm font-semibold text-amber-600" > ৳ { report . estimatedCost } < / p >
< / div >
< div className = "bg-slate-50 p-2 rounded-lg" >
< p className = "text-xs text-slate-500" > Actual < / p >
< p className = "text-sm font-semibold text-green-600" > ৳ { report . actualCost || '-' } < / p >
< / div >
< / div >
{ report . resolution && (
< div className = "bg-green-50 p-2 rounded-lg" >
< p className = "text-xs text-green-600" > Resolution < / p >
< p className = "text-sm text-green-700" > { report . resolution } < / p >
< / div >
) }
{ report . images . length > 0 && (
< div className = "flex gap-2 mt-3 overflow-x-auto" >
{ report . images . map ( ( img , idx ) = > (
< img key = { idx } src = { img } alt = { ` Damage ${ idx + 1 } ` } className = "w-20 h-20 object-cover rounded-lg flex-shrink-0" / >
) ) }
< / div >
) }
< / div >
2026-04-26 14:56:12 +06:00
) ) }
2026-05-13 02:06:28 +06:00
< / div >
) : (
< p className = "text-sm text-slate-400" > No damage reports < / p >
) }
< / SectionCard >
< SectionCard title = "Damage Photos" icon = { Camera } >
< div className = "space-y-4" >
{ biker . damageReports . filter ( r = > r . images . length > 0 ) . map ( report = > (
< div key = { report . id } >
< p className = "text-sm font-medium text-slate-600 mb-2" > { report . date } - { report . damageType } < / p >
< div className = "flex gap-2 overflow-x-auto pb-2" >
{ report . images . map ( ( img , idx ) = > (
< img key = { idx } src = { img } alt = { ` Damage ${ report . id } - ${ idx } ` } className = "w-32 h-32 object-cover rounded-lg flex-shrink-0" / >
) ) }
< / div >
< / div >
) ) }
{ biker . damageReports . filter ( r = > r . images . length > 0 ) . length === 0 && (
< p className = "text-sm text-slate-400" > No damage photos < / p >
) }
< / div >
< / SectionCard >
< / div >
) }
< / div >
< / div >
{ showMessageModal && (
< 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-lg max-h-[90vh] overflow-hidden flex flex-col" >
< div className = "p-4 border-b border-slate-100 flex justify-between items-center" >
< h3 className = "font-semibold text-slate-800" > Send Message to { biker . kyc . fullName } < / h3 >
< button onClick = { ( ) = > setShowMessageModal ( false ) } className = "text-slate-400 hover:text-slate-600" >
< X className = "w-5 h-5" / >
< / button >
< / div >
< div className = "border-b border-slate-100" >
< div className = "flex" >
< button onClick = { ( ) = > setMessageTab ( 'sms' ) } className = { ` flex-1 px-4 py-3 text-sm font-medium ${ messageTab === 'sms' ? 'border-b-2 border-accent text-accent' : 'text-slate-500' } ` } >
SMS
< / button >
< button onClick = { ( ) = > setMessageTab ( 'push' ) } className = { ` flex-1 px-4 py-3 text-sm font-medium ${ messageTab === 'push' ? 'border-b-2 border-accent text-accent' : 'text-slate-500' } ` } >
Push Notification
< / button >
< button onClick = { ( ) = > setMessageTab ( 'template' ) } className = { ` flex-1 px-4 py-3 text-sm font-medium ${ messageTab === 'template' ? 'border-b-2 border-accent text-accent' : 'text-slate-500' } ` } >
Template
< / button >
2026-04-26 14:56:12 +06:00
< / div >
< / div >
2026-05-13 02:06:28 +06:00
< div className = "p-4 flex-1 overflow-y-auto" >
{ messageTab === 'template' ? (
< div className = "space-y-3" >
< p className = "text-sm text-slate-500 mb-3" > Select a template to use : < / p >
{ smsTemplates . map ( tmpl = > (
< button
key = { tmpl . id }
onClick = { ( ) = > handleSendTemplate ( tmpl ) }
className = "w-full text-left p-3 border border-slate-200 rounded-lg hover:border-accent hover:bg-accent/5 transition-colors"
>
< p className = "text-sm font-medium text-slate-700" > { tmpl . label } < / p >
< p className = "text-xs text-slate-500 mt-1" > { tmpl . message . length > 60 ? tmpl . message . slice ( 0 , 60 ) + '...' : tmpl . message } < / p >
< / button >
) ) }
< / div >
) : (
< div className = "space-y-4" >
< div >
< label className = "text-sm font-medium text-slate-600 mb-2 block" > Message < / label >
< textarea
value = { messageText }
onChange = { ( e ) = > setMessageText ( e . target . value ) }
className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
rows = { 5 }
placeholder = "Type your message..."
/ >
< p className = "text-xs text-slate-400 mt-1" > { messageText . length } characters < / p >
< / div >
< div className = "bg-slate-50 p-3 rounded-lg" >
< p className = "text-xs text-slate-500" > Recipient : { biker . kyc . phone } < / p >
< p className = "text-xs text-slate-500" > Channel : { messageTab === 'sms' ? 'SMS' : 'Push Notification' } < / p >
< / div >
< / div >
) }
2026-04-22 01:02:45 +06:00
< / div >
2026-05-13 02:06:28 +06:00
< div className = "p-4 border-t border-slate-100 flex justify-between items-center" >
< div className = "text-xs text-slate-400" >
Recent : { biker . messageHistory . filter ( m = > m . direction === 'sent' ) . slice ( - 2 ) . map ( m = > m . message . slice ( 0 , 30 ) + '...' ) . join ( ', ' ) }
< / div >
< div className = "flex gap-2" >
< button onClick = { ( ) = > setShowMessageModal ( false ) } className = "px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm" > Cancel < / button >
< button onClick = { handleSendMessage } disabled = { ! messageText . trim ( ) } className = "px-4 py-2 bg-accent text-white rounded-lg text-sm disabled:opacity-50 flex items-center gap-2" >
< Send className = "w-4 h-4" / > Send
< / button >
< / div >
2026-04-22 01:02:45 +06:00
< / div >
< / div >
2026-05-13 02:06:28 +06:00
< / div >
) }
{ showDamageModal && (
< 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-lg max-h-[90vh] overflow-hidden flex flex-col" >
< div className = "p-4 border-b border-slate-100 flex justify-between items-center" >
< h3 className = "font-semibold text-slate-800" > Report Damage < / h3 >
< button onClick = { ( ) = > setShowDamageModal ( false ) } className = "text-slate-400 hover:text-slate-600" >
< X className = "w-5 h-5" / >
< / button >
< / div >
< div className = "p-4 flex-1 overflow-y-auto space-y-4" >
< div >
< label className = "text-sm font-medium text-slate-600 mb-1 block" > Bike * < / label >
< select
value = { damageForm . bike }
onChange = { ( e ) = > setDamageForm ( { . . . damageForm , bike : e.target.value } ) }
className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
>
< option value = "" > Select bike < / option >
< option value = "current" > { biker . currentRental . evModel } ( { biker . currentRental . plate } ) < / option >
{ biker . previousRentals . map ( r = > (
< option key = { r . id } value = { r . id } > { r . evModel } ( { r . plate } ) < / option >
) ) }
< / select >
< / div >
< div >
< label className = "text-sm font-medium text-slate-600 mb-1 block" > Damage Type * < / label >
< select
value = { damageForm . damageType }
onChange = { ( e ) = > setDamageForm ( { . . . damageForm , damageType : e.target.value } ) }
className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
>
< option value = "" > Select type < / option >
{ damageTypes . map ( t = > (
< option key = { t } value = { t } > { t } < / option >
) ) }
< / select >
< / div >
< div >
< label className = "text-sm font-medium text-slate-600 mb-1 block" > Description * < / label >
< textarea
value = { damageForm . description }
onChange = { ( e ) = > setDamageForm ( { . . . damageForm , description : e.target.value } ) }
className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
rows = { 3 }
placeholder = "Describe the damage..."
/ >
< / div >
< div className = "grid grid-cols-2 gap-4" >
< div >
< label className = "text-sm font-medium text-slate-600 mb-1 block" > Severity < / label >
< select
value = { damageForm . severity }
onChange = { ( e ) = > setDamageForm ( { . . . damageForm , severity : e.target.value } ) }
className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
>
< option value = "" > Select severity < / option >
{ severityLevels . map ( s = > (
< option key = { s } value = { s } > { s } < / option >
) ) }
< / select >
< / div >
< div >
< label className = "text-sm font-medium text-slate-600 mb-1 block" > Estimated Cost ( ৳ ) < / label >
< input
type = "number"
value = { damageForm . estimatedCost }
onChange = { ( e ) = > setDamageForm ( { . . . damageForm , estimatedCost : e.target.value } ) }
className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
placeholder = "0"
/ >
2026-04-22 01:02:45 +06:00
< / div >
< / div >
2026-05-13 02:06:28 +06:00
< div >
< label className = "text-sm font-medium text-slate-600 mb-1 block" > Location < / label >
< div className = "flex gap-2" >
< input
type = "text"
value = { damageForm . location }
onChange = { ( e ) = > setDamageForm ( { . . . damageForm , location : e.target.value } ) }
className = "flex-1 px-3 py-2 border border-slate-200 rounded-lg text-sm"
placeholder = "Enter location"
/ >
< button className = "px-3 py-2 border border-slate-200 rounded-lg text-sm hover:bg-slate-50 flex items-center gap-1" >
< MapPin className = "w-4 h-4" / > Current
< / button >
2026-04-22 01:02:45 +06:00
< / div >
< / div >
2026-05-13 02:06:28 +06:00
< div >
< label className = "text-sm font-medium text-slate-600 mb-1 block" > Damage Images < / label >
< div className = "border-2 border-dashed border-slate-200 rounded-lg p-6 text-center hover:border-accent transition-colors cursor-pointer" >
< Upload className = "w-8 h-8 text-slate-300 mx-auto mb-2" / >
< p className = "text-sm text-slate-500" > Click to upload or drag and drop < / p >
< p className = "text-xs text-slate-400 mt-1" > PNG , JPG up to 10 MB < / p >
< / div >
{ damageForm . images . length > 0 && (
< div className = "flex gap-2 mt-3" >
{ damageForm . images . map ( ( img , idx ) = > (
< img key = { idx } src = { img } alt = { ` Upload ${ idx } ` } className = "w-16 h-16 object-cover rounded-lg" / >
) ) }
2026-04-22 01:02:45 +06:00
< / div >
2026-05-13 02:06:28 +06:00
) }
< / div >
< / div >
< div className = "p-4 border-t border-slate-100 flex justify-end gap-2" >
< button onClick = { ( ) = > setShowDamageModal ( false ) } className = "px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm" > Cancel < / button >
< button onClick = { handleSubmitDamage } className = "px-4 py-2 bg-red-600 text-white rounded-lg text-sm hover:bg-red-700 flex items-center gap-2" >
< AlertOctagon className = "w-4 h-4" / > Submit Report
< / button >
2026-04-22 01:02:45 +06:00
< / div >
< / div >
< / div >
2026-05-13 02:06:28 +06:00
) }
2026-04-22 01:02:45 +06:00
2026-05-13 02:06:28 +06:00
{ showDocumentUpload && (
< 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-lg max-h-[90vh] overflow-hidden flex flex-col" >
< div className = "p-4 border-b border-slate-100 flex justify-between items-center" >
< h3 className = "font-semibold text-slate-800" > Upload Documents < / h3 >
< button onClick = { ( ) = > setShowDocumentUpload ( false ) } className = "text-slate-400 hover:text-slate-600" >
< X className = "w-5 h-5" / >
< / button >
< / div >
< div className = "p-4 flex-1 overflow-y-auto space-y-4" >
< div >
< label className = "text-sm font-medium text-slate-600 mb-1 block" > Document Type < / label >
< select className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" >
< option value = "" > Select type < / option >
< option value = "nid" > National ID < / option >
< option value = "license" > Driving License < / option >
< option value = "nominee_nid" > Nominee NID < / option >
< option value = "nominee_photo" > Nominee Photo < / option >
< option value = "other" > Other < / option >
< / select >
< / div >
< div >
< label className = "text-sm font-medium text-slate-600 mb-1 block" > Document Title < / label >
< input type = "text" className = "w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" placeholder = "Enter document title" / >
< / div >
< div >
< label className = "text-sm font-medium text-slate-600 mb-1 block" > Upload File < / label >
< div className = "border-2 border-dashed border-slate-200 rounded-lg p-6 text-center hover:border-emerald-400 transition-colors cursor-pointer" >
< Upload className = "w-8 h-8 text-slate-300 mx-auto mb-2" / >
< p className = "text-sm text-slate-500" > Click to upload or drag and drop < / p >
< p className = "text-xs text-slate-400 mt-1" > PNG , JPG , PDF up to 10 MB < / p >
< / div >
< / div >
< / div >
< div className = "p-4 border-t border-slate-100 flex justify-end gap-2" >
< button onClick = { ( ) = > setShowDocumentUpload ( false ) } className = "px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm" > Cancel < / button >
< button onClick = { ( ) = > { toast . success ( 'Document uploaded' ) ; setShowDocumentUpload ( false ) ; } } className = "px-4 py-2 bg-emerald-600 text-white rounded-lg text-sm hover:bg-emerald-700 flex items-center gap-2" >
< Upload className = "w-4 h-4" / > Upload
< / button >
< / div >
< / div >
< / div >
) }
2026-04-22 01:02:45 +06:00
< / div >
) ;
}
