'use client'; import { useState, use } from 'react'; import Link from 'next/link'; import { useRouter } from 'next/navigation'; import { Bike, MapPin, Battery, User, Wrench, Eye, Edit, Trash2, X, ArrowLeft, PhoneCall, MessageCircle, Calendar, DollarSign, Clock, Navigation, Car, FileText, Shield, Zap, GaugeCircle, CheckCircle, AlertTriangle, Activity, Award, TrendingUp, Wallet, MoreHorizontal, Map, Navigation2, Satellite, FileCheck, FileX, Clock3, History, CreditCard, User2, Phone, Mail, MapPinned, ExternalLink, Plus, AlertCircle, Image as ImageIcon } from 'lucide-react'; interface GPSDevice { id: string; phone: string; imei: string; lastActive: string; signal: number; battery: number; } interface BikeDocument { type: 'registration' | 'insurance' | 'fitness' | 'permit' | 'other'; number: string; issueDate: string; expiryDate: string; verified: boolean; } interface RentalHistory { id: string; bikerId: string; bikerName: string; type: 'single' | 'shared' | 'rent-to-own'; status: 'active' | 'completed' | 'disputed'; startDate: string; endDate?: string; dailyRate: number; totalPaid: number; rideCount: number; } interface ActivityLog { id: string; action: string; details: string; date: string; by: string; } interface BikeAssignment { id: string; bikeId: string; bikerId: string; bikerName: string; assignedAt: string; assignedBy: string; unassignedAt?: string; unassignedBy?: string; reason?: string; status: 'active' | 'completed'; notes?: string; } interface DamageRecord { id: string; date: string; type: 'accident' | 'theft' | 'natural' | 'wear_tear' | 'other'; description: string; reportedBy: string; reportedAt: string; estimatedCost?: number; actualCost?: number; status: 'reported' | 'under_repair' | 'repaired' | 'claim_rejected'; images?: string[]; billImage?: string; resolvedAt?: string; notes?: string; } interface MaintenanceRecord { id: string; date: string; type: 'routine' | 'battery' | 'tire' | 'brake' | 'engine' | 'electrical' | 'other'; description: string; performedBy: string; cost: number; nextDueDate?: string; status: 'scheduled' | 'in_progress' | 'completed'; notes?: string; } interface Bike { id: string; model: string; brand: string; image: string; plateNumber: string; status: 'available' | 'rented' | 'maintenance' | 'retired'; batteryLevel: number; location: string; assignedTo?: string; investorId?: string; investorName?: string; purchaseDate?: string; purchasePrice?: number; currentRent?: number; totalRides?: number; totalDistance?: number; totalEarnings?: number; lastService?: string; nextService?: string; insuranceExpiry?: string; registrationExpiry?: string; notes?: string; gpsDevice?: GPSDevice; documents?: BikeDocument[]; rentalHistory?: RentalHistory[]; activityLog?: ActivityLog[]; assignmentHistory?: BikeAssignment[]; damageHistory?: DamageRecord[]; maintenanceHistory?: MaintenanceRecord[]; } const mockBikes: Bike[] = [ { id: 'EV001', model: 'Etron ET50', brand: 'Etron', image: '', plateNumber: 'Dhaka Metro Cha-A-1234', status: 'rented', batteryLevel: 78, location: 'Gulshan 1', assignedTo: 'Rahim Ahmed', investorId: 'inv1', investorName: 'Mr. Hasan (Investor)', purchaseDate: '2024-01-15', purchasePrice: 125000, currentRent: 350, totalRides: 156, totalDistance: 2340, totalEarnings: 54600, lastService: '2024-03-01', nextService: '2024-04-01', insuranceExpiry: '2025-01-15', registrationExpiry: '2026-01-15', gpsDevice: { id: 'GPS001', phone: '01712345601', imei: '861234567890123', lastActive: '2024-03-21 14:30', signal: 85, battery: 72 }, documents: [ { type: 'registration', number: 'REG-EV001-2024', issueDate: '2024-01-15', expiryDate: '2026-01-15', verified: true }, { type: 'insurance', number: 'INS-EV001-2024', issueDate: '2024-01-15', expiryDate: '2025-01-15', verified: true }, { type: 'fitness', number: 'FIT-EV001-2024', issueDate: '2024-01-15', expiryDate: '2025-01-15', verified: true }, { type: 'permit', number: 'PMT-EV001-2024', issueDate: '2024-01-15', expiryDate: '2026-01-15', verified: true }, ], rentalHistory: [ { id: 'R001', bikerId: 'B001', bikerName: 'Rahim Ahmed', type: 'single', status: 'active', startDate: '2024-03-01', dailyRate: 350, totalPaid: 7350, rideCount: 21 }, { id: 'R002', bikerId: 'B003', bikerName: 'Jamal Khan', type: 'rent-to-own', status: 'completed', startDate: '2024-02-01', endDate: '2024-02-28', dailyRate: 400, totalPaid: 11200, rideCount: 28 }, { id: 'R003', bikerId: 'B005', bikerName: 'Mahir Islam', type: 'shared', status: 'completed', startDate: '2024-01-15', endDate: '2024-01-31', dailyRate: 60, totalPaid: 2700, rideCount: 45 }, ], activityLog: [ { id: 'A001', action: 'Rental Started', details: 'Single rental by Rahim Ahmed', date: '2024-03-01 08:00', by: 'System' }, { id: 'A002', action: 'Service', details: 'Regular maintenance completed', date: '2024-03-01', by: 'Admin' }, { id: 'A003', action: 'GPS Update', details: 'New GPS device installed', date: '2024-02-15', by: 'Admin' }, { id: 'A004', action: 'Rental Completed', details: 'Rent-to-own by Jamal Khan', date: '2024-02-28 23:59', by: 'System' }, { id: 'A005', action: 'Insurance Renewed', details: 'Insurance renewed for 1 year', date: '2024-01-15', by: 'Admin' }, ], damageHistory: [ { id: 'DMG001', date: '2024-02-10', type: 'accident', description: 'Minor collision at Mirpur intersection', reportedBy: 'Jamal Khan', reportedAt: '2024-02-10 14:30', estimatedCost: 5000, actualCost: 4500, status: 'repaired', resolvedAt: '2024-02-15' }, { id: 'DMG002', date: '2024-03-15', type: 'wear_tear', description: 'Front tire wear - replaced', reportedBy: 'Rahim Ahmed', reportedAt: '2024-03-15 09:00', estimatedCost: 2500, actualCost: 2200, status: 'repaired', resolvedAt: '2024-03-16' }, ], maintenanceHistory: [ { id: 'MNT001', date: '2024-03-01', type: 'routine', description: 'Full service - oil change, brake check, tire rotation', performedBy: 'Service Center', cost: 1500, nextDueDate: '2024-04-01', status: 'completed' }, { id: 'MNT002', date: '2024-02-15', type: 'battery', description: 'Battery health check and terminal cleaning', performedBy: 'Service Center', cost: 500, nextDueDate: '2024-05-15', status: 'completed' }, { id: 'MNT003', date: '2024-01-20', type: 'tire', description: 'Tire pressure check and inflation', performedBy: 'Service Center', cost: 300, nextDueDate: '2024-04-20', status: 'completed' }, ] }, { id: 'EV002', model: 'Yadea DT3', brand: 'Yadea', image: '', plateNumber: 'Dhaka Metro Cha-A-5678', status: 'available', batteryLevel: 95, location: 'Banani', investorId: 'inv1', investorName: 'Mr. Hasan (Investor)', purchaseDate: '2024-02-01', purchasePrice: 118000, totalRides: 89, totalDistance: 1567, totalEarnings: 31150, lastService: '2024-03-15', nextService: '2024-04-15', insuranceExpiry: '2025-02-01', registrationExpiry: '2026-02-01', gpsDevice: { id: 'GPS002', phone: '01712345602', imei: '861234567890124', lastActive: '2024-03-21 15:00', signal: 92, battery: 88 }, documents: [ { type: 'registration', number: 'REG-EV002-2024', issueDate: '2024-02-01', expiryDate: '2026-02-01', verified: true }, { type: 'insurance', number: 'INS-EV002-2024', issueDate: '2024-02-01', expiryDate: '2025-02-01', verified: true }, { type: 'fitness', number: 'FIT-EV002-2024', issueDate: '2024-02-01', expiryDate: '2025-02-01', verified: true }, ], rentalHistory: [ { id: 'R004', bikerId: 'B002', bikerName: 'Karim Singh', type: 'single', status: 'completed', startDate: '2024-02-15', endDate: '2024-02-28', dailyRate: 350, totalPaid: 4900, rideCount: 14 }, ], activityLog: [ { id: 'A006', action: 'Service', details: 'Regular maintenance', date: '2024-03-15', by: 'Admin' }, { id: 'A007', action: 'Added to Fleet', details: 'Bike registered in system', date: '2024-02-01', by: 'Admin' }, ] }, { id: 'EV003', model: 'AIMA Lightning', brand: 'AIMA', image: '', plateNumber: 'Dhaka Metro Cha-A-9012', status: 'rented', batteryLevel: 62, location: 'Uttara', assignedTo: 'Karim Singh', investorId: 'inv1', investorName: 'Mr. Hasan (Investor)', purchaseDate: '2024-01-20', purchasePrice: 132000, currentRent: 400, totalRides: 203, totalDistance: 3890, totalEarnings: 71100, lastService: '2024-03-10', nextService: '2024-04-10', insuranceExpiry: '2025-01-20', registrationExpiry: '2026-01-20', gpsDevice: { id: 'GPS003', phone: '01712345603', imei: '861234567890125', lastActive: '2024-03-21 14:45', signal: 78, battery: 55 }, documents: [ { type: 'registration', number: 'REG-EV003-2024', issueDate: '2024-01-20', expiryDate: '2026-01-20', verified: true }, { type: 'insurance', number: 'INS-EV003-2024', issueDate: '2024-01-20', expiryDate: '2025-01-20', verified: true }, { type: 'fitness', number: 'FIT-EV003-2024', issueDate: '2024-01-20', expiryDate: '2025-01-20', verified: true }, ], rentalHistory: [], activityLog: [] }, { id: 'EV004', model: 'TVS iQube', brand: 'TVS', image: '', plateNumber: 'Dhaka Metro Cha-A-3456', status: 'maintenance', batteryLevel: 45, location: 'Workshop - Banani', investorId: 'inv2', investorName: 'Mrs. Rita (Investor)', purchaseDate: '2023-12-10', purchasePrice: 145000, totalRides: 312, totalDistance: 5670, totalEarnings: 98000, lastService: '2024-03-20', nextService: '2024-03-25', insuranceExpiry: '2024-12-10', registrationExpiry: '2025-12-10', notes: 'Motor issue - awaiting parts', gpsDevice: { id: 'GPS004', phone: '01712345604', imei: '861234567890126', lastActive: '2024-03-20 10:00', signal: 0, battery: 12 }, documents: [ { type: 'registration', number: 'REG-EV004-2023', issueDate: '2023-12-10', expiryDate: '2025-12-10', verified: true }, { type: 'insurance', number: 'INS-EV004-2023', issueDate: '2023-12-10', expiryDate: '2024-12-10', verified: true }, ], rentalHistory: [], activityLog: [] }, { id: 'EV005', model: 'Bajaj Chetak', brand: 'Bajaj', image: '', plateNumber: 'Dhaka Metro Cha-A-7890', status: 'available', batteryLevel: 100, location: 'Dhanmondi', investorId: 'inv2', investorName: 'Mrs. Rita (Investor)', purchaseDate: '2024-02-15', purchasePrice: 138000, totalRides: 67, totalDistance: 890, totalEarnings: 23450, lastService: '2024-03-18', nextService: '2024-04-18', insuranceExpiry: '2025-02-15', registrationExpiry: '2026-02-15', gpsDevice: { id: 'GPS005', phone: '01712345605', imei: '861234567890127', lastActive: '2024-03-21 15:30', signal: 95, battery: 92 }, documents: [ { type: 'registration', number: 'REG-EV005-2024', issueDate: '2024-02-15', expiryDate: '2026-02-15', verified: true }, { type: 'insurance', number: 'INS-EV005-2024', issueDate: '2024-02-15', expiryDate: '2025-02-15', verified: true }, ], rentalHistory: [], activityLog: [] }, ]; function getBikeById(id: string): Bike | undefined { return mockBikes.find(b => b.id === id); } const statusColors: Record = { available: 'bg-green-100 text-green-700', rented: 'bg-blue-100 text-blue-700', maintenance: 'bg-amber-100 text-amber-700', retired: 'bg-slate-100 text-slate-500', }; const docTypeLabels: Record = { registration: 'Registration Certificate', insurance: 'Insurance', fitness: 'Fitness Certificate', permit: 'Road Permit', other: 'Other', }; export default function FleetDetailPage({ params }: { params: Promise<{ id: string }> }) { const resolvedParams = use(params); const router = useRouter(); const bikeData = getBikeById(resolvedParams.id); const [activeTab, setActiveTab] = useState('overview'); const [bikes, setBikes] = useState(mockBikes); const [showDamageModal, setShowDamageModal] = useState(false); const [showMaintenanceModal, setShowMaintenanceModal] = useState(false); const [editingDamage, setEditingDamage] = useState(null); const [editingMaintenance, setEditingMaintenance] = useState(null); const bike = bikes.find(b => b.id === resolvedParams.id) || bikes[0]; const damageTypes = [ { value: 'accident', label: 'Accident' }, { value: 'theft', label: 'Theft' }, { value: 'natural', label: 'Natural Disaster' }, { value: 'wear_tear', label: 'Wear & Tear' }, { value: 'other', label: 'Other' }, ]; const maintenanceTypes = [ { value: 'routine', label: 'Routine Service' }, { value: 'battery', label: 'Battery' }, { value: 'tire', label: 'Tire' }, { value: 'brake', label: 'Brake' }, { value: 'engine', label: 'Engine' }, { value: 'electrical', label: 'Electrical' }, { value: 'other', label: 'Other' }, ]; const handleAddDamage = (damage: DamageRecord) => { setBikes(bikes.map(b => { if (b.id === bike.id) { return { ...b, damageHistory: [...(b.damageHistory || []), damage] }; } return b; })); setShowDamageModal(false); }; const handleUpdateDamage = (damage: DamageRecord) => { setBikes(bikes.map(b => { if (b.id === bike.id) { return { ...b, damageHistory: (b.damageHistory || []).map(d => d.id === damage.id ? damage : d) }; } return b; })); setShowDamageModal(false); setEditingDamage(null); }; const handleDeleteDamage = (damageId: string) => { if (confirm('Are you sure you want to delete this damage record?')) { setBikes(bikes.map(b => { if (b.id === bike.id) { return { ...b, damageHistory: (b.damageHistory || []).filter(d => d.id !== damageId) }; } return b; })); } }; const handleAddMaintenance = (maintenance: MaintenanceRecord) => { setBikes(bikes.map(b => { if (b.id === bike.id) { return { ...b, maintenanceHistory: [...(b.maintenanceHistory || []), maintenance] }; } return b; })); setShowMaintenanceModal(false); }; const handleUpdateMaintenance = (maintenance: MaintenanceRecord) => { setBikes(bikes.map(b => { if (b.id === bike.id) { return { ...b, maintenanceHistory: (b.maintenanceHistory || []).map(m => m.id === maintenance.id ? maintenance : m) }; } return b; })); setShowMaintenanceModal(false); setEditingMaintenance(null); }; const handleDeleteMaintenance = (maintenanceId: string) => { if (confirm('Are you sure you want to delete this maintenance record?')) { setBikes(bikes.map(b => { if (b.id === bike.id) { return { ...b, maintenanceHistory: (b.maintenanceHistory || []).filter(m => m.id !== maintenanceId) }; } return b; })); } }; if (!bike) { return (

Bike Not Found

The bike ID "{resolvedParams.id}" was not found.

Back to Fleet
); } const tabs = [ { id: 'overview', label: 'Overview', icon: Bike }, { id: 'biker-assignment', label: 'Assign Bikers', icon: User }, { id: 'gps', label: 'GPS & Tracking', icon: Navigation2 }, { id: 'documents', label: 'Documents', icon: FileText }, { id: 'rental', label: 'Rental History', icon: History }, { id: 'damage', label: 'Damage History', icon: AlertTriangle }, { id: 'maintenance', label: 'Maintenance', icon: Wrench }, { id: 'activity', label: 'Activity Log', icon: Clock3 }, { id: 'investor', label: 'Investor Info', icon: User2 }, ]; return (

Bike Details

ID: {bike.id}

{tabs.map(tab => ( ))}
{activeTab === 'overview' && } {activeTab === 'biker-assignment' && } {activeTab === 'gps' && } {activeTab === 'documents' && } {activeTab === 'rental' && } {activeTab === 'activity' && } {activeTab === 'investor' && } {activeTab === 'damage' && (

Damage History

{(bike.damageHistory || []).length > 0 ? (
{bike.damageHistory?.map(damage => ( ))}
Date Type Description Reported By Est. Cost Actual Cost Status Actions
{damage.date} {damage.type.replace('_', ' ')} {damage.description} {damage.reportedBy} ৳{damage.estimatedCost || 0} ৳{damage.actualCost || '-'} {damage.status.replace('_', ' ')}
) : (

No damage records found

)}
)} {activeTab === 'maintenance' && (

Maintenance History

{(bike.maintenanceHistory || []).length > 0 ? (
{bike.maintenanceHistory?.map(maintenance => ( ))}
Date Type Description Performed By Cost Next Due Status Actions
{maintenance.date} {maintenance.type} {maintenance.description} {maintenance.performedBy} ৳{maintenance.cost} {maintenance.nextDueDate || '-'} {maintenance.status.replace('_', ' ')}
) : (

No maintenance records found

)}
)} {showDamageModal && ( { setShowDamageModal(false); setEditingDamage(null); }} onSave={(damage) => { if (editingDamage) { handleUpdateDamage(damage); } else { handleAddDamage(damage); } }} /> )} {showMaintenanceModal && ( { setShowMaintenanceModal(false); setEditingMaintenance(null); }} onSave={(maintenance) => { if (editingMaintenance) { handleUpdateMaintenance(maintenance); } else { handleAddMaintenance(maintenance); } }} /> )}
); } function OverviewTab({ bike }: { bike: Bike }) { return (

{bike.model}

{bike.brand} • {bike.id}

{bike.status} {bike.location}

Plate Number

{bike.plateNumber}

Battery

50 ? 'text-green-600' : bike.batteryLevel > 20 ? 'text-amber-600' : 'text-red-600'}`}>{bike.batteryLevel}%

Current Renter

{bike.assignedTo || 'Available'}

Daily Rate

৳{bike.currentRent || 0}

Performance Metrics

Total Rides

{bike.totalRides || 0}

Distance

{(bike.totalDistance || 0).toLocaleString()} km

Total Earnings

৳{bike.totalEarnings?.toLocaleString() || 0}

Purchase Price

৳{bike.purchasePrice?.toLocaleString() || 0}

Maintenance

Last Service

{bike.lastService || 'N/A'}

Next Service

{bike.nextService || 'N/A'}

Insurance Expiry

{bike.insuranceExpiry || 'N/A'}

Registration Expiry

{bike.registrationExpiry || 'N/A'}

{bike.notes && (

Note

{bike.notes}

)}
); } function GPSTab({ bike }: { bike: Bike }) { const gps = bike.gpsDevice; if (!gps) { return (

No GPS Device

This bike doesn't have a GPS device installed.

); } return (

GPS Device

ID: {gps.id}

Phone Number

{gps.phone}

IMEI

{gps.imei}

Status

Last Active

{gps.lastActive}

Signal Strength

70 ? 'text-green-600' : gps.signal > 40 ? 'text-amber-600' : 'text-red-600'}`}> {gps.signal}%

GPS Battery

50 ? 'text-green-600' : gps.battery > 20 ? 'text-amber-600' : 'text-red-600'}`}> {gps.battery}%

Status

Active

Live Location

{bike.location}

); } function DocumentsTab({ bike }: { bike: Bike }) { const docs = bike.documents || []; return (

Bike Documents

{docs.length === 0 ? (

No documents uploaded.

) : (
{docs.map((doc, idx) => (

{docTypeLabels[doc.type]}

Number: {doc.number}

Issued: {doc.issueDate} • Expires: {doc.expiryDate}

{doc.verified ? : } {doc.verified ? 'Verified' : 'Pending'}
))}
)}

Add New Document

); } function RentalTab({ bike }: { bike: Bike }) { const history = bike.rentalHistory || []; const getRateDisplay = (type: string, rate: number) => { switch (type) { case 'single': return `৳${rate}/day`; case 'shared': return `৳${rate / 2}+${rate / 2} (2 person)`; case 'rent-to-own': return `৳${rate}/day`; default: return `৳${rate}`; } }; return (

Rental History

{history.length === 0 ? (

No rental history yet.

) : (
{history.map(rental => (

{rental.bikerName}

ID: {rental.id}

{rental.status}
{rental.type === 'single' ? 'Single (৳350/day)' : rental.type === 'shared' ? 'Shared (৳60/day)' : 'Rent-to-Own (৳450/day)'} {rental.startDate} {rental.endDate && `to ${rental.endDate}`}
{rental.rideCount} rides ৳{rental.totalPaid.toLocaleString()}
))}
)}

Rental Rates Info

1
Single
৳350/day
2
Shared (2 Person)
৳60/day (৳30+৳30)
3
Rent-to-Own
৳450/day
); } function ActivityTab({ bike }: { bike: Bike }) { const logs = bike.activityLog || []; return (

Activity Log

{logs.length === 0 ? (

No activity yet.

) : (
{logs.map(log => (

{log.action}

{log.details}

{log.date} by {log.by}

))}
)}
); } function BikerAssignmentTab({ bike }: { bike: Bike }) { const [showAssignModal, setShowAssignModal] = useState(false); const [rentalPlan, setRentalPlan] = useState<'single' | 'shared' | 'rent-to-own'>('single'); const [assignedBikers, setAssignedBikers] = useState([]); const [selectedBikerId, setSelectedBikerId] = useState(''); const [showAddBikerModal, setShowAddBikerModal] = useState(false); const [newBikerDetails, setNewBikerDetails] = useState({ name: '', phone: '', email: '', licenseNumber: '', nidNumber: '', address: '', dailyRate: 0, notes: '' }); const assignmentHistory = bike.assignmentHistory || []; const activeAssignments = assignmentHistory.filter(a => a.status === 'active'); const availableBikers = [ { id: 'u1', name: 'Karim Ahmed', phone: '01712345678', email: 'karim@email.com', license: 'DL123456', nid: '1234567890' }, { id: 'u2', name: 'Sofiq Rahman', phone: '01722345678', email: 'sofiq@email.com', license: 'DL234567', nid: '2345678901' }, { id: 'u3', name: 'Rahim Khan', phone: '01732345678', email: 'rahim@email.com', license: 'DL345678', nid: '3456789012' }, { id: 'u4', name: 'Jamal Hossain', phone: '01742345678', email: 'jamal@email.com', license: 'DL456789', nid: '4567890123' }, { id: 'u5', name: 'Ripon Mia', phone: '01752345678', email: 'ripon@email.com', license: 'DL567890', nid: '5678901234' }, { id: 'u6', name: 'Mizanur Rahman', phone: '01762345678', email: 'mizan@email.com', license: 'DL678901', nid: '6789012345' }, ]; const planDetails = { single: { name: 'Rental (Single)', price: '৳50/day', maxBikers: 1 }, shared: { name: 'Rental (2 Person Shared)', price: '৳30+30=৳60/day', maxBikers: 2 }, 'rent-to-own': { name: 'Rent-to-Own', price: '৳45/day', maxBikers: 1 }, }; const handleAddBiker = () => { if (!selectedBikerId) return; const biker = availableBikers.find(b => b.id === selectedBikerId); if (biker && assignedBikers.length < planDetails[rentalPlan].maxBikers) { setAssignedBikers([...assignedBikers, { ...biker, dailyRate: rentalPlan === 'single' ? 50 : rentalPlan === 'shared' ? 30 : 45 }]); setSelectedBikerId(''); } }; const handleRemoveBiker = (id: string) => { setAssignedBikers(assignedBikers.filter(b => b.id !== id)); }; const handleSubmitAssignment = () => { alert(`Assigned ${assignedBikers.length} biker(s) under ${planDetails[rentalPlan].name}!\nTotal Daily Rate: ৳${assignedBikers.reduce((sum, b) => sum + b.dailyRate, 0)}`); setShowAssignModal(false); setAssignedBikers([]); setRentalPlan('single'); }; return (

Current Biker Assignments

{activeAssignments.length > 0 ? (
{activeAssignments.map((assignment, idx) => (

{assignment.bikerName}

ID: {assignment.bikerId}

Assigned: {new Date(assignment.assignedAt).toLocaleString()}

Active
{assignment.notes &&

{assignment.notes}

}
))}
) : (

No biker currently assigned

)}

Assignment History

{assignmentHistory.length > 0 ? (
{assignmentHistory.map((assignment, idx) => (

{assignment.bikerName}

ID: {assignment.bikerId}

{assignment.status === 'active' ? 'Active' : 'Completed'}

Assigned: {new Date(assignment.assignedAt).toLocaleString()}

{assignment.unassignedAt &&

Unassigned: {new Date(assignment.unassignedAt).toLocaleString()}

}
{assignment.reason &&

Reason: {assignment.reason}

}
))}
) : (

No assignment history

)}
{showAssignModal && (

Assign Bikers to {bike.id}

{Object.entries(planDetails).map(([key, plan]) => ( ))}
{assignedBikers.length < planDetails[rentalPlan].maxBikers ? (
) : (

Maximum bikers assigned for this plan

)}
{assignedBikers.length > 0 && (
{assignedBikers.map((biker, idx) => (

{biker.name}

{biker.phone}

{biker.email}

{ const updated = [...assignedBikers]; updated[idx].dailyRate = Number(e.target.value); setAssignedBikers(updated); }} className="w-full px-2 py-1 border border-slate-200 rounded text-sm" />

{biker.license}

))}
)} {assignedBikers.length > 0 && (
Total Daily Rate: ৳{assignedBikers.reduce((sum, b) => sum + b.dailyRate, 0)}/day
)}
)}
); } function InvestorTab({ bike }: { bike: Bike }) { return (

Investor Information

{!bike.investorId ? (

No investor assigned.

) : (

{bike.investorName || 'Investor'}

ID: {bike.investorId}

View Investor

Purchase Date

{bike.purchaseDate || 'N/A'}

Purchase Price

৳{bike.purchasePrice?.toLocaleString() || 0}

Total Earnings

৳{bike.totalEarnings?.toLocaleString() || 0}

ROI

{bike.purchasePrice && bike.totalEarnings ? ((bike.totalEarnings / bike.purchasePrice) * 100).toFixed(1) : 0}%

)}

Payment Summary

Total Paid by Renters ৳{bike.totalEarnings?.toLocaleString() || 0}
Investor Share (80%) ৳{Math.round((bike.totalEarnings || 0) * 0.8).toLocaleString()}
Company Share (20%) ৳{Math.round((bike.totalEarnings || 0) * 0.2).toLocaleString()}
); } function DamageModal({ bike, damage, onClose, onSave }: { bike: Bike; damage: DamageRecord | null; onClose: () => void; onSave: (damage: DamageRecord) => void }) { const [formData, setFormData] = useState({ id: damage?.id || `DMG${Date.now()}`, date: damage?.date || new Date().toISOString().split('T')[0], type: damage?.type || 'accident', description: damage?.description || '', reportedBy: damage?.reportedBy || '', reportedAt: damage?.reportedAt || new Date().toISOString().replace('T', ' ').slice(0, 16), estimatedCost: damage?.estimatedCost || 0, actualCost: damage?.actualCost || 0, status: damage?.status || 'reported', }); const damageTypes = [ { value: 'accident', label: 'Accident' }, { value: 'theft', label: 'Theft' }, { value: 'natural', label: 'Natural Disaster' }, { value: 'wear_tear', label: 'Wear & Tear' }, { value: 'other', label: 'Other' }, ]; const statusOptions = [ { value: 'reported', label: 'Reported' }, { value: 'under_repair', label: 'Under Repair' }, { value: 'repaired', label: 'Repaired' }, { value: 'claim_rejected', label: 'Claim Rejected' }, ]; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); onSave(formData as DamageRecord); }; return (

{damage ? 'Edit Damage Record' : 'Add Damage Record'}

setFormData({ ...formData, date: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" required />