686 lines
30 KiB
TypeScript
686 lines
30 KiB
TypeScript
|
'use client';
|
|||
|
|
|
|||
|
|
import { useState, useEffect } from 'react';
|
|||
|
|
import { useParams, useRouter } from 'next/navigation';
|
|||
|
|
import {
|
|||
|
|
ArrowLeft, Bike, User, Calendar, DollarSign, Wallet, Shield, CheckCircle, XCircle,
|
|||
|
|
Clock, Edit, Save, Plus, Trash2, Image, Upload, Lock, Unlock, AlertTriangle, MessageSquare, MapPin,
|
|||
|
|
Phone, MessageCircle
|
|||
|
|
} from 'lucide-react';
|
|||
|
|
|
|||
|
|
type RentalStatus = 'active' | 'pending' | 'completed' | 'disputed' | 'cancelled' | 'locked';
|
|||
|
|
type RentalType = 'single' | 'shared' | 'rent-to-own';
|
|||
|
|
|
|||
|
|
interface BikeImage {
|
|||
|
|
id: string;
|
|||
|
|
type: 'front' | 'back' | 'left' | 'right';
|
|||
|
|
url?: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface Note {
|
|||
|
|
id: string;
|
|||
|
|
text: string;
|
|||
|
|
createdAt: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface Rental {
|
|||
|
|
id: string;
|
|||
|
|
bikeId: string;
|
|||
|
|
userId: string;
|
|||
|
|
type: RentalType;
|
|||
|
|
status: RentalStatus;
|
|||
|
|
startDate: string;
|
|||
|
|
endDate?: string;
|
|||
|
|
deposit: number;
|
|||
|
|
dailyRate: number;
|
|||
|
|
totalPaid: number;
|
|||
|
|
dueRental?: number;
|
|||
|
|
lockedAt?: string;
|
|||
|
|
lockedReason?: string;
|
|||
|
|
hubId?: string;
|
|||
|
|
hubName?: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const mockRentals: Rental[] = [
|
|||
|
|
{
|
|||
|
|
id: 'RNT-001',
|
|||
|
|
bikeId: 'BIKE-001',
|
|||
|
|
userId: 'USR-001',
|
|||
|
|
type: 'single',
|
|||
|
|
status: 'active',
|
|||
|
|
startDate: '2024-01-15',
|
|||
|
|
deposit: 5000,
|
|||
|
|
dailyRate: 300,
|
|||
|
|
totalPaid: 81900,
|
|||
|
|
dueRental: 0,
|
|||
|
|
hubId: 'HUB-001',
|
|||
|
|
hubName: 'Gulshan Hub'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'RNT-002',
|
|||
|
|
bikeId: 'BIKE-002',
|
|||
|
|
userId: 'USR-002',
|
|||
|
|
type: 'shared',
|
|||
|
|
status: 'pending',
|
|||
|
|
startDate: '2024-02-01',
|
|||
|
|
deposit: 3000,
|
|||
|
|
dailyRate: 200,
|
|||
|
|
totalPaid: 2000,
|
|||
|
|
dueRental: 0,
|
|||
|
|
hubId: 'HUB-002',
|
|||
|
|
hubName: 'Banani Hub'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'RNT-003',
|
|||
|
|
bikeId: 'BIKE-003',
|
|||
|
|
userId: 'USR-003',
|
|||
|
|
type: 'rent-to-own',
|
|||
|
|
status: 'completed',
|
|||
|
|
startDate: '2023-06-01',
|
|||
|
|
endDate: '2023-12-01',
|
|||
|
|
deposit: 10000,
|
|||
|
|
dailyRate: 500,
|
|||
|
|
totalPaid: 150000,
|
|||
|
|
hubId: 'HUB-001',
|
|||
|
|
hubName: 'Gulshan Hub'
|
|||
|
|
}
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
const mockBikes: Record<string, {
|
|||
|
|
id: string;
|
|||
|
|
model: string;
|
|||
|
|
plate: string;
|
|||
|
|
status: string;
|
|||
|
|
odometer: number;
|
|||
|
|
batteryHealth: number;
|
|||
|
|
images: BikeImage[];
|
|||
|
|
}> = {
|
|||
|
|
'BIKE-001': {
|
|||
|
|
id: 'BIKE-001',
|
|||
|
|
model: 'AIMA Lightning',
|
|||
|
|
plate: 'Dhaka Metro Cha-9012',
|
|||
|
|
status: 'active',
|
|||
|
|
odometer: 3510,
|
|||
|
|
batteryHealth: 85,
|
|||
|
|
images: [
|
|||
|
|
{ id: 'img1', type: 'front', url: '' },
|
|||
|
|
{ id: 'img2', type: 'back', url: '' },
|
|||
|
|
{ id: 'img3', type: 'left', url: '' },
|
|||
|
|
{ id: 'img4', type: 'right', url: '' }
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
'BIKE-002': {
|
|||
|
|
id: 'BIKE-002',
|
|||
|
|
model: 'Yadea DT3',
|
|||
|
|
plate: 'Dhaka Metro Ba-5521',
|
|||
|
|
status: 'active',
|
|||
|
|
odometer: 2100,
|
|||
|
|
batteryHealth: 92,
|
|||
|
|
images: []
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const mockUsers: Record<string, {
|
|||
|
|
id: string;
|
|||
|
|
name: string;
|
|||
|
|
phone: string;
|
|||
|
|
email: string;
|
|||
|
|
walletBalance: number;
|
|||
|
|
membership: string;
|
|||
|
|
joinedFrom: string;
|
|||
|
|
kycStatus: 'verified' | 'pending' | 'rejected';
|
|||
|
|
insurance: 'active' | 'expired' | 'none';
|
|||
|
|
insuranceExpiry?: string;
|
|||
|
|
}> = {
|
|||
|
|
'USR-001': {
|
|||
|
|
id: 'USR-001',
|
|||
|
|
name: 'Rahim Ahmed',
|
|||
|
|
phone: '+8801712345678',
|
|||
|
|
email: 'rahim@example.com',
|
|||
|
|
walletBalance: 2100,
|
|||
|
|
membership: 'vip',
|
|||
|
|
joinedFrom: 'Facebook',
|
|||
|
|
kycStatus: 'verified',
|
|||
|
|
insurance: 'active',
|
|||
|
|
insuranceExpiry: '2024-12-01'
|
|||
|
|
},
|
|||
|
|
'USR-002': {
|
|||
|
|
id: 'USR-002',
|
|||
|
|
name: 'Karim Hasan',
|
|||
|
|
phone: '+8801812345678',
|
|||
|
|
email: 'karim@example.com',
|
|||
|
|
walletBalance: 500,
|
|||
|
|
membership: 'standard',
|
|||
|
|
joinedFrom: 'Referral',
|
|||
|
|
kycStatus: 'pending',
|
|||
|
|
insurance: 'none'
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const mockHubs = [
|
|||
|
|
{ id: 'HUB-001', name: 'Gulshan Hub', address: 'Gulshan 1, Dhaka' },
|
|||
|
|
{ id: 'HUB-002', name: 'Banani Hub', address: 'Banani, Dhaka' },
|
|||
|
|
{ id: 'HUB-003', name: 'Uttara Hub', address: 'Uttara, Dhaka' }
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
export default function RentalDetailPage() {
|
|||
|
|
const params = useParams();
|
|||
|
|
const router = useRouter();
|
|||
|
|
const id = params.id as string;
|
|||
|
|
|
|||
|
|
const [rental, setRental] = useState<Rental | null>(null);
|
|||
|
|
const [user, setUser] = useState<typeof mockUsers['USR-001'] | null>(null);
|
|||
|
|
const [bike, setBike] = useState<typeof mockBikes['BIKE-001'] | null>(null);
|
|||
|
|
const [editMode, setEditMode] = useState(false);
|
|||
|
|
const [notes, setNotes] = useState<Note[]>([
|
|||
|
|
{ id: 'n1', text: 'Initial rental started. Bike in good condition.', createdAt: '2024-01-15' },
|
|||
|
|
{ id: 'n2', text: 'Battery replaced on 2024-01-20.', createdAt: '2024-01-20' }
|
|||
|
|
]);
|
|||
|
|
const [newNote, setNewNote] = useState('');
|
|||
|
|
const [editForm, setEditForm] = useState<Partial<Rental>>({});
|
|||
|
|
const [showLockModal, setShowLockModal] = useState(false);
|
|||
|
|
const [lockReason, setLockReason] = useState('');
|
|||
|
|
const [dueAmount, setDueAmount] = useState(0);
|
|||
|
|
const [showDueModal, setShowDueModal] = useState(false);
|
|||
|
|
const [showImageModal, setShowImageModal] = useState(false);
|
|||
|
|
const [uploadImageType, setUploadImageType] = useState<string>('');
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
const found = mockRentals.find(r => r.id === id);
|
|||
|
|
if (found) {
|
|||
|
|
setRental(found);
|
|||
|
|
setEditForm(found);
|
|||
|
|
setUser(mockUsers[found.userId as keyof typeof mockUsers] || null);
|
|||
|
|
setBike(mockBikes[found.bikeId as keyof typeof mockBikes] || mockBikes['BIKE-001']);
|
|||
|
|
}
|
|||
|
|
}, [id]);
|
|||
|
|
|
|||
|
|
if (!rental) {
|
|||
|
|
return (
|
|||
|
|
<div className="p-6 flex items-center justify-center min-h-[50vh]">
|
|||
|
|
<div className="text-center">
|
|||
|
|
<Bike className="w-16 h-16 text-slate-300 mx-auto mb-4" />
|
|||
|
|
<p className="text-slate-500">Rental not found</p>
|
|||
|
|
<button
|
|||
|
|
onClick={() => router.push('/admin/rentals')}
|
|||
|
|
className="mt-4 px-4 py-2 bg-accent text-white rounded-lg text-sm"
|
|||
|
|
>
|
|||
|
|
Back to Rentals
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleSaveEdit = () => {
|
|||
|
|
setRental(prev => prev ? { ...prev, ...editForm } : null);
|
|||
|
|
setEditMode(false);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleLockRental = () => {
|
|||
|
|
if (!lockReason.trim()) return;
|
|||
|
|
setRental(prev => prev ? { ...prev, status: 'locked', lockedAt: new Date().toISOString(), lockedReason: lockReason } : null);
|
|||
|
|
setShowLockModal(false);
|
|||
|
|
setLockReason('');
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleUnlockRental = () => {
|
|||
|
|
setRental(prev => prev ? { ...prev, status: 'active', lockedAt: undefined, lockedReason: undefined } : null);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleCancelRental = () => {
|
|||
|
|
if (confirm('Are you sure you want to cancel this rental? This action cannot be undone.')) {
|
|||
|
|
setRental(prev => prev ? { ...prev, status: 'cancelled', endDate: new Date().toISOString() } : null);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleAddDue = () => {
|
|||
|
|
setRental(prev => prev ? { ...prev, dueRental: (prev.dueRental || 0) + dueAmount } : null);
|
|||
|
|
setShowDueModal(false);
|
|||
|
|
setDueAmount(0);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleAddNote = () => {
|
|||
|
|
if (!newNote.trim()) return;
|
|||
|
|
setNotes(prev => [...prev, { id: `n${Date.now()}`, text: newNote, createdAt: new Date().toISOString().split('T')[0] }]);
|
|||
|
|
setNewNote('');
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleUpdateOdometer = (value: number) => {
|
|||
|
|
if (bike) setBike(prev => prev ? { ...prev, odometer: value } : null);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleUpdateBattery = (value: number) => {
|
|||
|
|
if (bike) setBike(prev => prev ? { ...prev, batteryHealth: value } : null);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleUploadImage = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|||
|
|
const file = e.target.files?.[0];
|
|||
|
|
if (!file || !bike) return;
|
|||
|
|
const url = URL.createObjectURL(file);
|
|||
|
|
setBike(prev => prev ? {
|
|||
|
|
...prev,
|
|||
|
|
images: prev.images.map(img => img.type === uploadImageType ? { ...img, url } : img)
|
|||
|
|
} : null);
|
|||
|
|
setShowImageModal(false);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const statusColors = {
|
|||
|
|
active: 'bg-green-100 text-green-700',
|
|||
|
|
pending: 'bg-amber-100 text-amber-700',
|
|||
|
|
completed: 'bg-blue-100 text-blue-700',
|
|||
|
|
disputed: 'bg-red-100 text-red-700',
|
|||
|
|
cancelled: 'bg-slate-100 text-slate-700',
|
|||
|
|
locked: 'bg-red-100 text-red-700'
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="p-4 lg:p-6 max-w-8xl mx-auto">
|
|||
|
|
<button
|
|||
|
|
onClick={() => router.push('/admin/rentals')}
|
|||
|
|
className="flex items-center gap-2 text-slate-600 hover:text-slate-800 mb-4"
|
|||
|
|
>
|
|||
|
|
<ArrowLeft className="w-4 h-4" /> Back to Rentals
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<div className="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden">
|
|||
|
|
<div className="p-6 border-b border-slate-100">
|
|||
|
|
<div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4">
|
|||
|
|
<div>
|
|||
|
|
<div className="flex items-center gap-3">
|
|||
|
|
<h1 className="text-2xl font-extrabold text-slate-800">{rental.id}</h1>
|
|||
|
|
<span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${statusColors[rental.status]}`}>
|
|||
|
|
{rental.status}
|
|||
|
|
</span>
|
|||
|
|
{rental.status === 'locked' && (
|
|||
|
|
<span className="inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full bg-red-100 text-red-700">
|
|||
|
|
<Lock className="w-3 h-3" /> Locked
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
<p className="text-slate-500 mt-1">Started {rental.startDate} • From {rental.hubName || 'N/A'}</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex gap-2 flex-wrap">
|
|||
|
|
{editMode ? (
|
|||
|
|
<>
|
|||
|
|
<button onClick={handleSaveEdit} className="px-4 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700 flex items-center gap-2">
|
|||
|
|
<Save className="w-4 h-4" /> Save
|
|||
|
|
</button>
|
|||
|
|
<button onClick={() => { setEditForm(rental); setEditMode(false); }} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50">
|
|||
|
|
Cancel
|
|||
|
|
</button>
|
|||
|
|
</>
|
|||
|
|
) : (
|
|||
|
|
<>
|
|||
|
|
<button onClick={() => setEditMode(true)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50 flex items-center gap-2">
|
|||
|
|
<Edit className="w-4 h-4" /> Edit
|
|||
|
|
</button>
|
|||
|
|
{rental.status === 'active' && (
|
|||
|
|
<>
|
|||
|
|
<button onClick={() => setShowDueModal(true)} className="px-4 py-2 bg-amber-600 text-white rounded-lg text-sm hover:bg-amber-700 flex items-center gap-2">
|
|||
|
|
<DollarSign className="w-4 h-4" /> Add Due
|
|||
|
|
</button>
|
|||
|
|
{rental.status === 'active' ? (
|
|||
|
|
<button onClick={() => setShowLockModal(true)} className="px-4 py-2 bg-red-600 text-white rounded-lg text-sm hover:bg-red-700 flex items-center gap-2">
|
|||
|
|
<Lock className="w-4 h-4" /> Lock Rental
|
|||
|
|
</button>
|
|||
|
|
) : rental.status === 'locked' ? (
|
|||
|
|
<button onClick={handleUnlockRental} className="px-4 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700 flex items-center gap-2">
|
|||
|
|
<Unlock className="w-4 h-4" /> Unlock Rental
|
|||
|
|
</button>
|
|||
|
|
) : null}
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
{rental.status !== 'cancelled' && rental.status !== 'completed' && (
|
|||
|
|
<button onClick={handleCancelRental} className="px-4 py-2 bg-slate-600 text-white rounded-lg text-sm hover:bg-slate-700 flex items-center gap-2">
|
|||
|
|
<XCircle className="w-4 h-4" /> Cancel Rental
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="p-6 grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|||
|
|
<div className="lg:col-span-2 space-y-6">
|
|||
|
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
|||
|
|
<div className="bg-blue-50 p-4 rounded-xl border border-blue-100">
|
|||
|
|
<p className="text-sm text-blue-600">Total Spent</p>
|
|||
|
|
<p className="text-xl font-bold text-blue-800">৳{rental.totalPaid.toLocaleString()}</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="bg-green-50 p-4 rounded-xl border border-green-100">
|
|||
|
|
<p className="text-sm text-green-600">Wallet Balance</p>
|
|||
|
|
<p className="text-xl font-bold text-green-800">৳{user?.walletBalance.toLocaleString() || 0}</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="bg-purple-50 p-4 rounded-xl border border-purple-100">
|
|||
|
|
<p className="text-sm text-purple-600">Deposit Paid</p>
|
|||
|
|
<p className="text-xl font-bold text-purple-800">৳{rental.deposit.toLocaleString()}</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="bg-amber-50 p-4 rounded-xl border border-amber-100">
|
|||
|
|
<p className="text-sm text-amber-600">Due Rental</p>
|
|||
|
|
<p className="text-xl font-bold text-amber-800">৳{(rental.dueRental || 0).toLocaleString()}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="bg-blue-50 p-4 rounded-xl border border-blue-100">
|
|||
|
|
<h3 className="font-semibold text-blue-800 mb-3 flex items-center gap-2">
|
|||
|
|
<Bike className="w-5 h-5" /> Rented Bike Details
|
|||
|
|
</h3>
|
|||
|
|
{bike && (
|
|||
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<div className="flex justify-between"><span className="text-sm text-blue-600">Model</span><span className="text-sm font-medium text-blue-800">{bike.model}</span></div>
|
|||
|
|
<div className="flex justify-between"><span className="text-sm text-blue-600">Plate</span><span className="text-sm font-medium text-blue-800">{bike.plate}</span></div>
|
|||
|
|
<div className="flex justify-between"><span className="text-sm text-blue-600">Type</span><span className="text-sm font-medium text-blue-800 capitalize">{rental.type}</span></div>
|
|||
|
|
<div className="flex justify-between"><span className="text-sm text-blue-600">Daily Rate</span><span className="text-sm font-medium text-blue-800">৳{rental.dailyRate}/day</span></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="bg-amber-50 p-4 rounded-xl border border-amber-100">
|
|||
|
|
<h3 className="font-semibold text-amber-800 mb-3 flex items-center gap-2">
|
|||
|
|
<Gauge className="w-5 h-5" /> Mileage Tracking
|
|||
|
|
</h3>
|
|||
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
|||
|
|
<div>
|
|||
|
|
<label className="text-sm text-amber-600">Current Odometer (km)</label>
|
|||
|
|
<input
|
|||
|
|
type="number"
|
|||
|
|
value={bike?.odometer || 0}
|
|||
|
|
onChange={(e) => handleUpdateOdometer(Number(e.target.value))}
|
|||
|
|
className="w-full px-3 py-2 border border-amber-200 rounded-lg text-sm mt-1"
|
|||
|
|
disabled={rental.status !== 'active'}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="text-sm text-amber-600">Total Distance</label>
|
|||
|
|
<p className="text-lg font-semibold text-amber-800">{(bike?.odometer || 0).toLocaleString()} km</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="bg-green-50 p-4 rounded-xl border border-green-100">
|
|||
|
|
<h3 className="font-semibold text-green-800 mb-3 flex items-center gap-2">
|
|||
|
|
<Battery className="w-5 h-5" /> Battery Health
|
|||
|
|
</h3>
|
|||
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
|||
|
|
<div>
|
|||
|
|
<label className="text-sm text-green-600">Battery Percentage (0-100%)</label>
|
|||
|
|
<input
|
|||
|
|
type="number"
|
|||
|
|
max={100}
|
|||
|
|
min={0}
|
|||
|
|
value={bike?.batteryHealth || 0}
|
|||
|
|
onChange={(e) => handleUpdateBattery(Number(e.target.value))}
|
|||
|
|
className="w-full px-3 py-2 border border-green-200 rounded-lg text-sm mt-1"
|
|||
|
|
disabled={rental.status !== 'active'}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="text-sm text-green-600">Health Status</label>
|
|||
|
|
<p className={`text-lg font-semibold ${(bike?.batteryHealth || 0) > 70 ? 'text-green-700' : (bike?.batteryHealth || 0) > 40 ? 'text-amber-700' : 'text-red-700'}`}>
|
|||
|
|
{(bike?.batteryHealth || 0) > 70 ? 'Good' : (bike?.batteryHealth || 0) > 40 ? 'Fair' : 'Poor'}
|
|||
|
|
</p>
|
|||
|
|
<p className="text-xs text-green-600">Estimated Range: {Math.round((bike?.batteryHealth || 0) * 1)} km</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="bg-purple-50 p-4 rounded-xl border border-purple-100">
|
|||
|
|
<div className="flex items-center justify-between mb-3">
|
|||
|
|
<h3 className="font-semibold text-purple-800 flex items-center gap-2">
|
|||
|
|
<Image className="w-5 h-5" /> Bike Images
|
|||
|
|
</h3>
|
|||
|
|
{rental.status === 'active' && (
|
|||
|
|
<button
|
|||
|
|
onClick={() => setShowImageModal(true)}
|
|||
|
|
className="text-xs px-2 py-1 bg-white rounded border border-purple-200 text-purple-700 hover:bg-purple-100 flex items-center gap-1"
|
|||
|
|
>
|
|||
|
|
<Upload className="w-3 h-3" /> Upload
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
<div className="grid grid-cols-4 gap-2">
|
|||
|
|
{['front', 'back', 'left', 'right'].map(type => {
|
|||
|
|
const img = bike?.images.find(i => i.type === type);
|
|||
|
|
return (
|
|||
|
|
<div key={type} className="aspect-video bg-white rounded-lg border border-purple-200 flex items-center justify-center overflow-hidden">
|
|||
|
|
{img?.url ? (
|
|||
|
|
<img src={img.url} alt={type} className="w-full h-full object-cover" />
|
|||
|
|
) : (
|
|||
|
|
<div className="text-center p-2">
|
|||
|
|
<Image className="w-8 h-8 text-purple-300 mx-auto" />
|
|||
|
|
<p className="text-xs text-purple-500 capitalize mt-1">{type}</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="bg-slate-50 p-4 rounded-xl border border-slate-100">
|
|||
|
|
<h3 className="font-semibold text-slate-800 mb-3 flex items-center gap-2">
|
|||
|
|
<MessageSquare className="w-5 h-5" /> Notes ({notes.length})
|
|||
|
|
</h3>
|
|||
|
|
{notes.length > 0 ? (
|
|||
|
|
<div className="space-y-2 mb-3">
|
|||
|
|
{notes.map(note => (
|
|||
|
|
<div key={note.id} className="bg-white p-3 rounded-lg">
|
|||
|
|
<p className="text-sm text-slate-700">{note.text}</p>
|
|||
|
|
<p className="text-xs text-slate-400 mt-1">{note.createdAt}</p>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<p className="text-sm text-slate-500 mb-3">No notes yet.</p>
|
|||
|
|
)}
|
|||
|
|
{rental.status === 'active' && (
|
|||
|
|
<div className="flex gap-2">
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={newNote}
|
|||
|
|
onChange={(e) => setNewNote(e.target.value)}
|
|||
|
|
placeholder="Add notes about the bike condition, issues, etc..."
|
|||
|
|
className="flex-1 px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
|||
|
|
/>
|
|||
|
|
<button onClick={handleAddNote} disabled={!newNote.trim()} className="px-4 py-2 bg-accent text-white rounded-lg text-sm disabled:opacity-50">
|
|||
|
|
<Plus className="w-4 h-4" />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
<div className="bg-blue-50 p-4 rounded-xl border border-blue-100">
|
|||
|
|
<h3 className="font-semibold text-blue-800 mb-3 flex items-center gap-2">
|
|||
|
|
<User className="w-5 h-5" /> User Info
|
|||
|
|
</h3>
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<div className="flex justify-between"><span className="text-sm text-blue-600">Name</span><span className="text-sm font-medium text-blue-800">{user?.name}</span></div>
|
|||
|
|
<div className="flex justify-between"><span className="text-sm text-blue-600">Phone</span><span className="text-sm font-medium text-blue-800">{user?.phone}</span></div>
|
|||
|
|
<div className="flex justify-between"><span className="text-sm text-blue-600">Email</span><span className="text-sm font-medium text-blue-800">{user?.email || '-'}</span></div>
|
|||
|
|
{user && (
|
|||
|
|
<div className="flex gap-2 mt-2 pt-2 border-t border-blue-100">
|
|||
|
|
<a href={`tel:${user.phone}`} className="flex-1 py-2 bg-green-500 text-white rounded-lg text-sm text-center hover:bg-green-600 flex items-center justify-center gap-2">
|
|||
|
|
<Phone className="w-4 h-4" /> Call
|
|||
|
|
</a>
|
|||
|
|
<a href={`sms:${user.phone}`} className="flex-1 py-2 bg-blue-500 text-white rounded-lg text-sm text-center hover:bg-blue-600 flex items-center justify-center gap-2">
|
|||
|
|
<MessageCircle className="w-4 h-4" /> Message
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="bg-purple-50 p-4 rounded-xl border border-purple-100">
|
|||
|
|
<h3 className="font-semibold text-purple-800 mb-3 flex items-center gap-2">
|
|||
|
|
<Shield className="w-5 h-5" /> Membership & Insurance
|
|||
|
|
</h3>
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<div className="flex justify-between"><span className="text-sm text-purple-600">Membership</span><span className="text-sm font-medium text-purple-800 uppercase">{user?.membership}</span></div>
|
|||
|
|
<div className="flex justify-between"><span className="text-sm text-purple-600">KYC Status</span><span className="text-sm font-medium text-purple-800 capitalize">{user?.kycStatus}</span></div>
|
|||
|
|
<div className="flex justify-between"><span className="text-sm text-purple-600">Insurance</span><span className="text-sm font-medium text-purple-800 capitalize">{user?.insurance}</span></div>
|
|||
|
|
{user?.insuranceExpiry && <div className="flex justify-between"><span className="text-sm text-purple-600">Insurance Expiry</span><span className="text-sm font-medium text-purple-800">{user.insuranceExpiry}</span></div>}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="bg-green-50 p-4 rounded-xl border border-green-100">
|
|||
|
|
<h3 className="font-semibold text-green-800 mb-3 flex items-center gap-2">
|
|||
|
|
<MapPin className="w-5 h-5" /> Hub Info
|
|||
|
|
</h3>
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<div className="flex justify-between"><span className="text-sm text-green-600">Hub</span><span className="text-sm font-medium text-green-800">{rental.hubName || '-'}</span></div>
|
|||
|
|
{editMode ? (
|
|||
|
|
<select
|
|||
|
|
value={editForm.hubId || ''}
|
|||
|
|
onChange={(e) => {
|
|||
|
|
const hub = mockHubs.find(h => h.id === e.target.value);
|
|||
|
|
setEditForm({ ...editForm, hubId: e.target.value, hubName: hub?.name });
|
|||
|
|
}}
|
|||
|
|
className="w-full px-3 py-2 border border-green-200 rounded-lg text-sm"
|
|||
|
|
>
|
|||
|
|
<option value="">Select Hub</option>
|
|||
|
|
{mockHubs.map(hub => (
|
|||
|
|
<option key={hub.id} value={hub.id}>{hub.name}</option>
|
|||
|
|
))}
|
|||
|
|
</select>
|
|||
|
|
) : (
|
|||
|
|
<div className="flex justify-between"><span className="text-sm text-green-600">Joined From</span><span className="text-sm font-medium text-green-800">{user?.joinedFrom || '-'}</span></div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{rental.status === 'locked' && (
|
|||
|
|
<div className="bg-red-50 p-4 rounded-xl border border-red-100">
|
|||
|
|
<h3 className="font-semibold text-red-800 mb-3 flex items-center gap-2">
|
|||
|
|
<Lock className="w-5 h-5" /> Locked Info
|
|||
|
|
</h3>
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<div className="flex justify-between"><span className="text-sm text-red-600">Locked At</span><span className="text-sm font-medium text-red-800">{rental.lockedAt?.split('T')[0]}</span></div>
|
|||
|
|
<div className="flex justify-between"><span className="text-sm text-red-600">Reason</span><span className="text-sm font-medium text-red-800">{rental.lockedReason}</span></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{showLockModal && (
|
|||
|
|
<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-md">
|
|||
|
|
<div className="p-4 border-b border-slate-100 flex justify-between items-center">
|
|||
|
|
<h3 className="font-semibold text-slate-800 flex items-center gap-2">
|
|||
|
|
<Lock className="w-5 h-5" /> Lock Rental
|
|||
|
|
</h3>
|
|||
|
|
<button onClick={() => setShowLockModal(false)} className="text-slate-400 hover:text-slate-600">×</button>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-4">
|
|||
|
|
<label className="text-sm text-slate-600">Reason for locking</label>
|
|||
|
|
<textarea
|
|||
|
|
value={lockReason}
|
|||
|
|
onChange={(e) => setLockReason(e.target.value)}
|
|||
|
|
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
|
|||
|
|
rows={3}
|
|||
|
|
placeholder="Enter reason..."
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-4 border-t border-slate-100 flex justify-end gap-2">
|
|||
|
|
<button onClick={() => setShowLockModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg">Cancel</button>
|
|||
|
|
<button onClick={handleLockRental} disabled={!lockReason.trim()} className="px-4 py-2 bg-red-600 text-white rounded-lg disabled:opacity-50">Lock Rental</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{showDueModal && (
|
|||
|
|
<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-md">
|
|||
|
|
<div className="p-4 border-b border-slate-100 flex justify-between items-center">
|
|||
|
|
<h3 className="font-semibold text-slate-800 flex items-center gap-2">
|
|||
|
|
<DollarSign className="w-5 h-5" /> Add Due Rental
|
|||
|
|
</h3>
|
|||
|
|
<button onClick={() => setShowDueModal(false)} className="text-slate-400 hover:text-slate-600">×</button>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-4">
|
|||
|
|
<label className="text-sm text-slate-600">Due Amount (৳)</label>
|
|||
|
|
<input
|
|||
|
|
type="number"
|
|||
|
|
value={dueAmount}
|
|||
|
|
onChange={(e) => setDueAmount(Number(e.target.value))}
|
|||
|
|
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
|
|||
|
|
placeholder="Enter amount..."
|
|||
|
|
/>
|
|||
|
|
<p className="text-xs text-slate-500 mt-2">Current Due: ৳{rental.dueRental || 0}</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-4 border-t border-slate-100 flex justify-end gap-2">
|
|||
|
|
<button onClick={() => setShowDueModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg">Cancel</button>
|
|||
|
|
<button onClick={handleAddDue} disabled={dueAmount <= 0} className="px-4 py-2 bg-amber-600 text-white rounded-lg disabled:opacity-50">Add Due</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{showImageModal && (
|
|||
|
|
<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-md">
|
|||
|
|
<div className="p-4 border-b border-slate-100 flex justify-between items-center">
|
|||
|
|
<h3 className="font-semibold text-slate-800">Upload Bike Image</h3>
|
|||
|
|
<button onClick={() => setShowImageModal(false)} className="text-slate-400 hover:text-slate-600">×</button>
|
|||
|
|
</div>
|
|||
|
|
<div className="p-4">
|
|||
|
|
<label className="text-sm text-slate-600">Select Image Type</label>
|
|||
|
|
<select
|
|||
|
|
value={uploadImageType}
|
|||
|
|
onChange={(e) => setUploadImageType(e.target.value)}
|
|||
|
|
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
|
|||
|
|
>
|
|||
|
|
<option value="">Select type...</option>
|
|||
|
|
<option value="front">Front</option>
|
|||
|
|
<option value="back">Back</option>
|
|||
|
|
<option value="left">Left Side</option>
|
|||
|
|
<option value="right">Right Side</option>
|
|||
|
|
</select>
|
|||
|
|
{uploadImageType && (
|
|||
|
|
<div className="mt-4">
|
|||
|
|
<input
|
|||
|
|
type="file"
|
|||
|
|
accept="image/*"
|
|||
|
|
onChange={handleUploadImage}
|
|||
|
|
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm file:mr-4 file:px-4 file:py-2 file:bg-accent file:text-white file:rounded-lg file:border-0 cursor-pointer"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
<div className="p-4 border-t border-slate-100 flex justify-end gap-2">
|
|||
|
|
<button onClick={() => setShowImageModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg">Cancel</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function Gauge({ className }: { className?: string }) {
|
|||
|
|
return (
|
|||
|
|
<svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|||
|
|
<path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" />
|
|||
|
|
<circle cx="12" cy="12" r="4" />
|
|||
|
|
</svg>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function Battery({ className }: { className?: string }) {
|
|||
|
|
return (
|
|||
|
|
<svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|||
|
|
<rect x="1" y="6" width="18" height="12" rx="2" />
|
|||
|
|
<line x1="23" y1="10" x2="23" y2="14" />
|
|||
|
|
<line x1="7" y1="10" x2="7" y2="14" />
|
|||
|
|
<line x1="11" y1="10" x2="11" y2="14" />
|
|||
|
|
</svg>
|
|||
|
|
);
|
|||
|
|
}
|