1558 lines
74 KiB
TypeScript
1558 lines
74 KiB
TypeScript
'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; // deprecated - use hubId/hubName
|
|
hubId?: string;
|
|
hubName?: 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', hubId: 'HUB-001', hubName: 'JAIBEN Head Office', 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', hubId: 'HUB-002', hubName: 'Banani Hub', 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, hubId: 'HUB-003', hubName: 'Uttara Hub', 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, hubId: 'HUB-002', hubName: 'Banani Hub', 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, hubId: 'HUB-001', hubName: 'JAIBEN Head Office', 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<string, string> = {
|
|
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<string, string> = {
|
|
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<Bike[]>(mockBikes);
|
|
const [showDamageModal, setShowDamageModal] = useState(false);
|
|
const [showMaintenanceModal, setShowMaintenanceModal] = useState(false);
|
|
const [editingDamage, setEditingDamage] = useState<DamageRecord | null>(null);
|
|
const [editingMaintenance, setEditingMaintenance] = useState<MaintenanceRecord | null>(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 (
|
|
<div className="p-4 lg:p-6">
|
|
<div className="bg-white rounded-xl p-8 text-center">
|
|
<Bike className="w-12 h-12 text-slate-300 mx-auto mb-4" />
|
|
<h2 className="text-lg font-bold text-slate-700">Bike Not Found</h2>
|
|
<p className="text-sm text-slate-500 mb-4">The bike ID "{resolvedParams.id}" was not found.</p>
|
|
<Link href="/admin/fleet" className="text-accent hover:underline">Back to Fleet</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
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 (
|
|
<div className="p-4 lg:p-6 min-h-screen">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<button onClick={() => router.back()} className="p-2 hover:bg-slate-100 rounded-lg lg:hidden">
|
|
<ArrowLeft className="w-5 h-5 text-slate-600" />
|
|
</button>
|
|
<Link href="/admin/fleet" className="p-2 hover:bg-slate-100 rounded-lg hidden lg:block">
|
|
<ArrowLeft className="w-5 h-5 text-slate-600" />
|
|
</Link>
|
|
<div className="flex-1">
|
|
<h1 className="text-xl lg:text-2xl font-extrabold text-slate-800">Bike Details</h1>
|
|
<p className="text-sm text-slate-500">ID: {bike.id}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap gap-2 mb-4 overflow-x-auto pb-2">
|
|
{tabs.map(tab => (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => setActiveTab(tab.id)}
|
|
className={`px-3 py-2 rounded-lg text-sm font-medium whitespace-nowrap flex items-center gap-2 ${activeTab === tab.id
|
|
? 'bg-accent text-white'
|
|
: 'bg-white text-slate-600 border border-slate-200'
|
|
}`}
|
|
>
|
|
<tab.icon className="w-4 h-4" />
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{activeTab === 'overview' && <OverviewTab bike={bike} />}
|
|
{activeTab === 'biker-assignment' && <BikerAssignmentTab bike={bike} />}
|
|
{activeTab === 'gps' && <GPSTab bike={bike} />}
|
|
{activeTab === 'documents' && <DocumentsTab bike={bike} />}
|
|
{activeTab === 'rental' && <RentalTab bike={bike} />}
|
|
{activeTab === 'activity' && <ActivityTab bike={bike} />}
|
|
{activeTab === 'investor' && <InvestorTab bike={bike} />}
|
|
|
|
{activeTab === 'damage' && (
|
|
<div className="space-y-4">
|
|
<div className="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-slate-100">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h3 className="font-semibold text-slate-700 flex items-center gap-2">
|
|
<AlertTriangle className="w-5 h-5 text-accent" /> Damage History
|
|
</h3>
|
|
<button
|
|
onClick={() => { setEditingDamage(null); setShowDamageModal(true); }}
|
|
className="px-4 py-2 bg-accent text-white text-sm rounded-lg hover:bg-accent-dark flex items-center gap-2"
|
|
>
|
|
<Plus className="w-4 h-4" /> Add Damage
|
|
</button>
|
|
</div>
|
|
|
|
{(bike.damageHistory || []).length > 0 ? (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead className="bg-slate-50">
|
|
<tr>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Date</th>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Type</th>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Description</th>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Reported By</th>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Est. Cost</th>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Actual Cost</th>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Status</th>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-100">
|
|
{bike.damageHistory?.map(damage => (
|
|
<tr key={damage.id} className="hover:bg-slate-50">
|
|
<td className="px-4 py-3 text-sm text-slate-600">{damage.date}</td>
|
|
<td className="px-4 py-3">
|
|
<span className="text-sm text-slate-700 capitalize">{damage.type.replace('_', ' ')}</span>
|
|
</td>
|
|
<td className="px-4 py-3 text-sm text-slate-600 max-w-xs truncate">{damage.description}</td>
|
|
<td className="px-4 py-3 text-sm text-slate-600">{damage.reportedBy}</td>
|
|
<td className="px-4 py-3 text-sm text-slate-600">৳{damage.estimatedCost || 0}</td>
|
|
<td className="px-4 py-3 text-sm font-medium text-slate-700">৳{damage.actualCost || '-'}</td>
|
|
<td className="px-4 py-3">
|
|
<span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${damage.status === 'repaired' ? 'bg-green-100 text-green-700' :
|
|
damage.status === 'under_repair' ? 'bg-amber-100 text-amber-700' :
|
|
damage.status === 'claim_rejected' ? 'bg-red-100 text-red-700' :
|
|
'bg-slate-100 text-slate-700'
|
|
}`}>
|
|
{damage.status.replace('_', ' ')}
|
|
</span>
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
<div className="flex items-center gap-1">
|
|
<button
|
|
onClick={() => { setEditingDamage(damage); setShowDamageModal(true); }}
|
|
className="p-2 hover:bg-slate-100 rounded-lg"
|
|
title="Edit"
|
|
>
|
|
<Edit className="w-4 h-4 text-slate-400" />
|
|
</button>
|
|
<button
|
|
onClick={() => handleDeleteDamage(damage.id)}
|
|
className="p-2 hover:bg-red-50 rounded-lg"
|
|
title="Delete"
|
|
>
|
|
<Trash2 className="w-4 h-4 text-red-400" />
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-12">
|
|
<AlertTriangle className="w-12 h-12 text-slate-300 mx-auto mb-4" />
|
|
<p className="text-slate-500">No damage records found</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{activeTab === 'maintenance' && (
|
|
<div className="space-y-4">
|
|
<div className="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-slate-100">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h3 className="font-semibold text-slate-700 flex items-center gap-2">
|
|
<Wrench className="w-5 h-5 text-accent" /> Maintenance History
|
|
</h3>
|
|
<button
|
|
onClick={() => { setEditingMaintenance(null); setShowMaintenanceModal(true); }}
|
|
className="px-4 py-2 bg-accent text-white text-sm rounded-lg hover:bg-accent-dark flex items-center gap-2"
|
|
>
|
|
<Plus className="w-4 h-4" /> Add Maintenance
|
|
</button>
|
|
</div>
|
|
|
|
{(bike.maintenanceHistory || []).length > 0 ? (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead className="bg-slate-50">
|
|
<tr>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Date</th>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Type</th>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Description</th>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Performed By</th>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Cost</th>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Next Due</th>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Status</th>
|
|
<th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-100">
|
|
{bike.maintenanceHistory?.map(maintenance => (
|
|
<tr key={maintenance.id} className="hover:bg-slate-50">
|
|
<td className="px-4 py-3 text-sm text-slate-600">{maintenance.date}</td>
|
|
<td className="px-4 py-3">
|
|
<span className="text-sm text-slate-700 capitalize">{maintenance.type}</span>
|
|
</td>
|
|
<td className="px-4 py-3 text-sm text-slate-600 max-w-xs truncate">{maintenance.description}</td>
|
|
<td className="px-4 py-3 text-sm text-slate-600">{maintenance.performedBy}</td>
|
|
<td className="px-4 py-3 text-sm font-medium text-slate-700">৳{maintenance.cost}</td>
|
|
<td className="px-4 py-3 text-sm text-slate-600">{maintenance.nextDueDate || '-'}</td>
|
|
<td className="px-4 py-3">
|
|
<span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${maintenance.status === 'completed' ? 'bg-green-100 text-green-700' :
|
|
maintenance.status === 'in_progress' ? 'bg-amber-100 text-amber-700' :
|
|
'bg-slate-100 text-slate-700'
|
|
}`}>
|
|
{maintenance.status.replace('_', ' ')}
|
|
</span>
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
<div className="flex items-center gap-1">
|
|
<button
|
|
onClick={() => { setEditingMaintenance(maintenance); setShowMaintenanceModal(true); }}
|
|
className="p-2 hover:bg-slate-100 rounded-lg"
|
|
title="Edit"
|
|
>
|
|
<Edit className="w-4 h-4 text-slate-400" />
|
|
</button>
|
|
<button
|
|
onClick={() => handleDeleteMaintenance(maintenance.id)}
|
|
className="p-2 hover:bg-red-50 rounded-lg"
|
|
title="Delete"
|
|
>
|
|
<Trash2 className="w-4 h-4 text-red-400" />
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-12">
|
|
<Wrench className="w-12 h-12 text-slate-300 mx-auto mb-4" />
|
|
<p className="text-slate-500">No maintenance records found</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{showDamageModal && (
|
|
<DamageModal
|
|
bike={bike}
|
|
damage={editingDamage}
|
|
onClose={() => { setShowDamageModal(false); setEditingDamage(null); }}
|
|
onSave={(damage) => {
|
|
if (editingDamage) {
|
|
handleUpdateDamage(damage);
|
|
} else {
|
|
handleAddDamage(damage);
|
|
}
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{showMaintenanceModal && (
|
|
<MaintenanceModal
|
|
bike={bike}
|
|
maintenance={editingMaintenance}
|
|
onClose={() => { setShowMaintenanceModal(false); setEditingMaintenance(null); }}
|
|
onSave={(maintenance) => {
|
|
if (editingMaintenance) {
|
|
handleUpdateMaintenance(maintenance);
|
|
} else {
|
|
handleAddMaintenance(maintenance);
|
|
}
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function OverviewTab({ bike }: { bike: Bike }) {
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-slate-100">
|
|
<div className="flex items-start gap-4 mb-4">
|
|
<div className="w-16 h-16 rounded-xl bg-blue-50 flex items-center justify-center">
|
|
<Bike className="w-8 h-8 text-blue-600" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<h2 className="text-xl font-bold text-slate-800">{bike.model}</h2>
|
|
<p className="text-sm text-slate-500">{bike.brand} • {bike.id}</p>
|
|
<div className="flex flex-wrap gap-2 mt-2">
|
|
<span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${statusColors[bike.status]}`}>
|
|
{bike.status}
|
|
</span>
|
|
<span className="inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full bg-slate-100 text-slate-600">
|
|
<MapPin className="w-3 h-3" /> {bike.hubName || 'Not Assigned'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
|
|
<div className="bg-slate-50 rounded-lg p-3">
|
|
<p className="text-xs text-slate-500">Plate Number</p>
|
|
<p className="font-semibold text-slate-700">{bike.plateNumber}</p>
|
|
</div>
|
|
<div className="bg-slate-50 rounded-lg p-3">
|
|
<p className="text-xs text-slate-500">Battery</p>
|
|
<p className={`font-semibold ${bike.batteryLevel > 50 ? 'text-green-600' : bike.batteryLevel > 20 ? 'text-amber-600' : 'text-red-600'}`}>{bike.batteryLevel}%</p>
|
|
</div>
|
|
<div className="bg-slate-50 rounded-lg p-3">
|
|
<p className="text-xs text-slate-500">Current Renter</p>
|
|
<p className="font-semibold text-slate-700">{bike.assignedTo || 'Available'}</p>
|
|
</div>
|
|
<div className="bg-slate-50 rounded-lg p-3">
|
|
<p className="text-xs text-slate-500">Daily Rate</p>
|
|
<p className="font-semibold text-green-600">৳{bike.currentRent || 0}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-slate-100">
|
|
<h3 className="font-semibold text-slate-700 mb-3">Performance Metrics</h3>
|
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
|
|
<div className="bg-slate-50 rounded-lg p-3">
|
|
<p className="text-xs text-slate-500">Total Rides</p>
|
|
<p className="text-xl font-bold text-slate-700">{bike.totalRides || 0}</p>
|
|
</div>
|
|
<div className="bg-slate-50 rounded-lg p-3">
|
|
<p className="text-xs text-slate-500">Distance</p>
|
|
<p className="text-xl font-bold text-slate-700">{(bike.totalDistance || 0).toLocaleString()} km</p>
|
|
</div>
|
|
<div className="bg-slate-50 rounded-lg p-3">
|
|
<p className="text-xs text-slate-500">Total Earnings</p>
|
|
<p className="text-xl font-bold text-green-600">৳{bike.totalEarnings?.toLocaleString() || 0}</p>
|
|
</div>
|
|
<div className="bg-slate-50 rounded-lg p-3">
|
|
<p className="text-xs text-slate-500">Purchase Price</p>
|
|
<p className="text-xl font-bold text-slate-700">৳{bike.purchasePrice?.toLocaleString() || 0}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-slate-100">
|
|
<h3 className="font-semibold text-slate-700 mb-3">Maintenance</h3>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div className="bg-slate-50 rounded-lg p-3">
|
|
<p className="text-xs text-slate-500">Last Service</p>
|
|
<p className="font-medium text-slate-700">{bike.lastService || 'N/A'}</p>
|
|
</div>
|
|
<div className="bg-slate-50 rounded-lg p-3">
|
|
<p className="text-xs text-slate-500">Next Service</p>
|
|
<p className="font-medium text-slate-700">{bike.nextService || 'N/A'}</p>
|
|
</div>
|
|
<div className="bg-slate-50 rounded-lg p-3">
|
|
<p className="text-xs text-slate-500">Insurance Expiry</p>
|
|
<p className="font-medium text-slate-700">{bike.insuranceExpiry || 'N/A'}</p>
|
|
</div>
|
|
<div className="bg-slate-50 rounded-lg p-3">
|
|
<p className="text-xs text-slate-500">Registration Expiry</p>
|
|
<p className="font-medium text-slate-700">{bike.registrationExpiry || 'N/A'}</p>
|
|
</div>
|
|
</div>
|
|
{bike.notes && (
|
|
<div className="mt-3 p-3 bg-amber-50 rounded-lg">
|
|
<p className="text-xs text-amber-600 font-medium">Note</p>
|
|
<p className="text-sm text-amber-800">{bike.notes}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function GPSTab({ bike }: { bike: Bike }) {
|
|
const gps = bike.gpsDevice;
|
|
|
|
if (!gps) {
|
|
return (
|
|
<div className="bg-white rounded-xl p-6 shadow-sm border border-slate-100 text-center">
|
|
<Satellite className="w-12 h-12 text-slate-300 mx-auto mb-4" />
|
|
<h3 className="font-semibold text-slate-700">No GPS Device</h3>
|
|
<p className="text-sm text-slate-500">This bike doesn't have a GPS device installed.</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-slate-100">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="w-12 h-12 rounded-xl bg-purple-50 flex items-center justify-center">
|
|
<Satellite className="w-6 h-6 text-purple-600" />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold text-slate-700">GPS Device</h3>
|
|
<p className="text-sm text-slate-500">ID: {gps.id}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div className="bg-slate-50 rounded-lg p-3">
|
|
<p className="text-xs text-slate-500">Phone Number</p>
|
|
<p className="font-semibold text-slate-700 flex items-center gap-2">
|
|
<Phone className="w-4 h-4 text-slate-400" /> {gps.phone}
|
|
</p>
|
|
</div>
|
|
<div className="bg-slate-50 rounded-lg p-3">
|
|
<p className="text-xs text-slate-500">IMEI</p>
|
|
<p className="font-semibold text-slate-700 font-mono text-sm">{gps.imei}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-slate-100">
|
|
<h3 className="font-semibold text-slate-700 mb-3">Status</h3>
|
|
<div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
|
|
<div className="bg-slate-50 rounded-lg p-3">
|
|
<p className="text-xs text-slate-500">Last Active</p>
|
|
<p className="font-medium text-slate-700">{gps.lastActive}</p>
|
|
</div>
|
|
<div className="bg-slate-50 rounded-lg p-3">
|
|
<p className="text-xs text-slate-500">Signal Strength</p>
|
|
<p className={`font-semibold ${gps.signal > 70 ? 'text-green-600' : gps.signal > 40 ? 'text-amber-600' : 'text-red-600'}`}>
|
|
{gps.signal}%
|
|
</p>
|
|
</div>
|
|
<div className="bg-slate-50 rounded-lg p-3">
|
|
<p className="text-xs text-slate-500">GPS Battery</p>
|
|
<p className={`font-semibold ${gps.battery > 50 ? 'text-green-600' : gps.battery > 20 ? 'text-amber-600' : 'text-red-600'}`}>
|
|
{gps.battery}%
|
|
</p>
|
|
</div>
|
|
<div className="bg-slate-50 rounded-lg p-3">
|
|
<p className="text-xs text-slate-500">Status</p>
|
|
<p className="font-semibold text-green-600 flex items-center gap-1">
|
|
<CheckCircle className="w-4 h-4" /> Active
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-slate-100">
|
|
<h3 className="font-semibold text-slate-700 mb-3">Live Location</h3>
|
|
<div className="bg-slate-100 rounded-lg h-48 flex items-center justify-center">
|
|
<div className="text-center">
|
|
<MapPinned className="w-8 h-8 text-slate-400 mx-auto mb-2" />
|
|
<p className="text-sm text-slate-500">{bike.location}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function DocumentsTab({ bike }: { bike: Bike }) {
|
|
const docs = bike.documents || [];
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-slate-100">
|
|
<h3 className="font-semibold text-slate-700 mb-4">Bike Documents</h3>
|
|
{docs.length === 0 ? (
|
|
<div className="text-center py-8">
|
|
<FileText className="w-12 h-12 text-slate-300 mx-auto mb-4" />
|
|
<p className="text-sm text-slate-500">No documents uploaded.</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{docs.map((doc, idx) => (
|
|
<div key={idx} className="flex items-center justify-between p-4 border border-slate-200 rounded-lg">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center">
|
|
<FileText className="w-5 h-5 text-blue-600" />
|
|
</div>
|
|
<div>
|
|
<p className="font-medium text-slate-700">{docTypeLabels[doc.type]}</p>
|
|
<p className="text-xs text-slate-500">Number: {doc.number}</p>
|
|
<p className="text-xs text-slate-400">Issued: {doc.issueDate} • Expires: {doc.expiryDate}</p>
|
|
</div>
|
|
</div>
|
|
<span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${doc.verified ? 'bg-green-100 text-green-700' : 'bg-amber-100 text-amber-700'
|
|
}`}>
|
|
{doc.verified ? <CheckCircle className="w-3 h-3" /> : <Clock3 className="w-3 h-3" />}
|
|
{doc.verified ? 'Verified' : 'Pending'}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-slate-100">
|
|
<h3 className="font-semibold text-slate-700 mb-3">Add New Document</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
|
<select className="px-3 py-2 border border-slate-200 rounded-lg text-sm">
|
|
<option value="">Select Document Type</option>
|
|
<option value="registration">Registration Certificate</option>
|
|
<option value="insurance">Insurance</option>
|
|
<option value="fitness">Fitness Certificate</option>
|
|
<option value="permit">Road Permit</option>
|
|
<option value="other">Other</option>
|
|
</select>
|
|
<input type="text" placeholder="Document Number" className="px-3 py-2 border border-slate-200 rounded-lg text-sm" />
|
|
<input type="date" placeholder="Issue Date" className="px-3 py-2 border border-slate-200 rounded-lg text-sm" />
|
|
<input type="date" placeholder="Expiry Date" className="px-3 py-2 border border-slate-200 rounded-lg text-sm" />
|
|
</div>
|
|
<button className="w-full mt-3 py-2 bg-accent text-white rounded-lg font-semibold text-sm hover:bg-accent-dark">
|
|
Upload Document
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
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 (
|
|
<div className="space-y-4">
|
|
<div className="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-slate-100">
|
|
<h3 className="font-semibold text-slate-700 mb-3">Rental History</h3>
|
|
{history.length === 0 ? (
|
|
<div className="text-center py-8">
|
|
<History className="w-12 h-12 text-slate-300 mx-auto mb-4" />
|
|
<p className="text-sm text-slate-500">No rental history yet.</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{history.map(rental => (
|
|
<div key={rental.id} className="p-4 border border-slate-200 rounded-lg">
|
|
<div className="flex items-start justify-between mb-2">
|
|
<div>
|
|
<p className="font-medium text-slate-700">{rental.bikerName}</p>
|
|
<p className="text-xs text-slate-500">ID: {rental.id}</p>
|
|
</div>
|
|
<span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${rental.status === 'active' ? 'bg-green-100 text-green-700' :
|
|
rental.status === 'completed' ? 'bg-blue-100 text-blue-700' :
|
|
'bg-red-100 text-red-700'
|
|
}`}>
|
|
{rental.status}
|
|
</span>
|
|
</div>
|
|
<div className="flex flex-wrap gap-3 text-xs">
|
|
<span className="bg-slate-100 px-2 py-1 rounded text-slate-600">
|
|
{rental.type === 'single' ? 'Single (৳350/day)' :
|
|
rental.type === 'shared' ? 'Shared (৳60/day)' :
|
|
'Rent-to-Own (৳450/day)'}
|
|
</span>
|
|
<span className="text-slate-500">
|
|
{rental.startDate} {rental.endDate && `to ${rental.endDate}`}
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between mt-2 pt-2 border-t border-slate-100">
|
|
<span className="text-xs text-slate-500">{rental.rideCount} rides</span>
|
|
<span className="text-sm font-semibold text-green-600">৳{rental.totalPaid.toLocaleString()}</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-slate-100">
|
|
<h3 className="font-semibold text-slate-700 mb-3">Rental Rates Info</h3>
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between p-3 bg-green-50 rounded-lg">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center">
|
|
<span className="text-xs font-bold text-green-600">1</span>
|
|
</div>
|
|
<span className="font-medium text-slate-700">Single</span>
|
|
</div>
|
|
<span className="font-semibold text-green-600">৳350/day</span>
|
|
</div>
|
|
<div className="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
|
|
<span className="text-xs font-bold text-blue-600">2</span>
|
|
</div>
|
|
<span className="font-medium text-slate-700">Shared (2 Person)</span>
|
|
</div>
|
|
<span className="font-semibold text-green-600">৳60/day (৳30+৳30)</span>
|
|
</div>
|
|
<div className="flex items-center justify-between p-3 bg-purple-50 rounded-lg">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center">
|
|
<span className="text-xs font-bold text-purple-600">3</span>
|
|
</div>
|
|
<span className="font-medium text-slate-700">Rent-to-Own</span>
|
|
</div>
|
|
<span className="font-semibold text-green-600">৳450/day</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ActivityTab({ bike }: { bike: Bike }) {
|
|
const logs = bike.activityLog || [];
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-slate-100">
|
|
<h3 className="font-semibold text-slate-700 mb-3">Activity Log</h3>
|
|
{logs.length === 0 ? (
|
|
<div className="text-center py-8">
|
|
<Clock3 className="w-12 h-12 text-slate-300 mx-auto mb-4" />
|
|
<p className="text-sm text-slate-500">No activity yet.</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{logs.map(log => (
|
|
<div key={log.id} className="flex items-start gap-3 p-3 bg-slate-50 rounded-lg">
|
|
<div className="w-8 h-8 rounded-full bg-white flex items-center justify-center">
|
|
<Activity className="w-4 h-4 text-slate-400" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<p className="text-sm font-medium text-slate-700">{log.action}</p>
|
|
<p className="text-xs text-slate-500">{log.details}</p>
|
|
<p className="text-xs text-slate-400">{log.date} by {log.by}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function BikerAssignmentTab({ bike }: { bike: Bike }) {
|
|
const [showAssignModal, setShowAssignModal] = useState(false);
|
|
const [rentalPlan, setRentalPlan] = useState<'single' | 'shared' | 'rent-to-own'>('single');
|
|
const [assignedBikers, setAssignedBikers] = useState<any[]>([]);
|
|
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 (
|
|
<div className="space-y-4">
|
|
<div className="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-slate-100">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h3 className="font-semibold text-slate-700">Current Biker Assignments</h3>
|
|
<button
|
|
onClick={() => setShowAssignModal(true)}
|
|
className="py-2 px-4 bg-accent text-white rounded-lg text-sm font-medium hover:bg-accent-dark flex items-center gap-2"
|
|
>
|
|
<User className="w-4 h-4" /> Assign Bikers
|
|
</button>
|
|
</div>
|
|
|
|
{activeAssignments.length > 0 ? (
|
|
<div className="space-y-3">
|
|
{activeAssignments.map((assignment, idx) => (
|
|
<div key={idx} className="p-4 bg-green-50 border border-green-200 rounded-lg">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center">
|
|
<User className="w-6 h-6 text-green-600" />
|
|
</div>
|
|
<div>
|
|
<p className="font-semibold text-slate-700">{assignment.bikerName}</p>
|
|
<p className="text-sm text-slate-500">ID: {assignment.bikerId}</p>
|
|
<p className="text-xs text-slate-400">Assigned: {new Date(assignment.assignedAt).toLocaleString()}</p>
|
|
</div>
|
|
</div>
|
|
<span className="px-3 py-1 bg-green-100 text-green-700 text-sm font-medium rounded-full">Active</span>
|
|
</div>
|
|
{assignment.notes && <p className="mt-2 text-sm text-slate-600">{assignment.notes}</p>}
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-8 border-2 border-dashed border-slate-200 rounded-lg">
|
|
<User className="w-12 h-12 text-slate-300 mx-auto mb-4" />
|
|
<p className="text-slate-500">No biker currently assigned</p>
|
|
<button onClick={() => setShowAssignModal(true)} className="mt-2 text-accent hover:underline">Assign bikers</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-slate-100">
|
|
<h3 className="font-semibold text-slate-700 mb-4">Assignment History</h3>
|
|
{assignmentHistory.length > 0 ? (
|
|
<div className="space-y-3">
|
|
{assignmentHistory.map((assignment, idx) => (
|
|
<div key={idx} className={`p-4 rounded-lg border ${assignment.status === 'active' ? 'bg-green-50 border-green-200' : 'bg-slate-50 border-slate-200'}`}>
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className={`w-10 h-10 rounded-full flex items-center justify-center ${assignment.status === 'active' ? 'bg-green-100' : 'bg-slate-200'}`}>
|
|
<User className={`w-5 h-5 ${assignment.status === 'active' ? 'text-green-600' : 'text-slate-500'}`} />
|
|
</div>
|
|
<div>
|
|
<p className="font-medium text-slate-700">{assignment.bikerName}</p>
|
|
<p className="text-sm text-slate-500">ID: {assignment.bikerId}</p>
|
|
</div>
|
|
</div>
|
|
<span className={`px-2 py-1 text-xs font-medium rounded-full ${assignment.status === 'active' ? 'bg-green-100 text-green-700' : 'bg-slate-200 text-slate-600'}`}>
|
|
{assignment.status === 'active' ? 'Active' : 'Completed'}
|
|
</span>
|
|
</div>
|
|
<div className="mt-2 text-sm text-slate-500 grid grid-cols-2 gap-2">
|
|
<p>Assigned: {new Date(assignment.assignedAt).toLocaleString()}</p>
|
|
{assignment.unassignedAt && <p>Unassigned: {new Date(assignment.unassignedAt).toLocaleString()}</p>}
|
|
</div>
|
|
{assignment.reason && <p className="mt-1 text-sm text-slate-400">Reason: {assignment.reason}</p>}
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-8 text-slate-400">
|
|
<History className="w-10 h-10 mx-auto mb-2 opacity-50" />
|
|
<p>No assignment history</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{showAssignModal && (
|
|
<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-3xl max-h-[90vh] overflow-hidden">
|
|
<div className="p-5 border-b border-slate-100 flex items-center justify-between">
|
|
<h2 className="text-lg font-bold text-slate-800">Assign Bikers to {bike.id}</h2>
|
|
<button onClick={() => setShowAssignModal(false)} className="p-2 hover:bg-slate-100 rounded-lg">
|
|
<X className="w-5 h-5 text-slate-400" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="p-5 overflow-y-auto max-h-[70vh]">
|
|
<div className="mb-6">
|
|
<label className="text-sm font-medium text-slate-600 mb-2 block">Choose Rental Plan</label>
|
|
<div className="grid grid-cols-3 gap-3">
|
|
{Object.entries(planDetails).map(([key, plan]) => (
|
|
<button
|
|
key={key}
|
|
onClick={() => { setRentalPlan(key as any); setAssignedBikers([]); }}
|
|
className={`p-4 rounded-lg border text-left transition-all ${rentalPlan === key
|
|
? 'border-accent bg-accent/5'
|
|
: 'border-slate-200 hover:border-accent/50'
|
|
}`}
|
|
>
|
|
<p className="font-semibold text-slate-700">{plan.name}</p>
|
|
<p className="text-sm text-green-600 font-medium">{plan.price}</p>
|
|
<p className="text-xs text-slate-500 mt-1">Max {plan.maxBikers} biker{plan.maxBikers > 1 ? 's' : ''}</p>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-4">
|
|
<label className="text-sm font-medium text-slate-600 mb-2 block">
|
|
Add Biker{rentalPlan === 'shared' ? 's (Shared Rental)' : ''} ({assignedBikers.length}/{planDetails[rentalPlan].maxBikers})
|
|
</label>
|
|
{assignedBikers.length < planDetails[rentalPlan].maxBikers ? (
|
|
<div className="flex gap-2">
|
|
<select
|
|
value={selectedBikerId}
|
|
onChange={(e) => setSelectedBikerId(e.target.value)}
|
|
className="flex-1 px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
|
>
|
|
<option value="">Select biker</option>
|
|
{availableBikers.filter(b => !assignedBikers.some(ab => ab.id === b.id)).map(b => (
|
|
<option key={b.id} value={b.id}>{b.name} - {b.phone}</option>
|
|
))}
|
|
</select>
|
|
<button
|
|
onClick={handleAddBiker}
|
|
disabled={!selectedBikerId}
|
|
className="px-4 py-2 bg-accent text-white rounded-lg text-sm font-medium hover:bg-accent-dark disabled:opacity-50"
|
|
>
|
|
Add
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<p className="text-sm text-green-600">Maximum bikers assigned for this plan</p>
|
|
)}
|
|
</div>
|
|
|
|
{assignedBikers.length > 0 && (
|
|
<div className="space-y-3 mb-4">
|
|
{assignedBikers.map((biker, idx) => (
|
|
<div key={idx} className="p-4 bg-slate-50 rounded-lg border border-slate-200">
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
|
|
<User className="w-6 h-6 text-blue-600" />
|
|
</div>
|
|
<div>
|
|
<p className="font-semibold text-slate-700">{biker.name}</p>
|
|
<p className="text-sm text-slate-500">{biker.phone}</p>
|
|
<p className="text-xs text-slate-400">{biker.email}</p>
|
|
</div>
|
|
</div>
|
|
<button onClick={() => handleRemoveBiker(biker.id)} className="p-1 hover:bg-red-50 rounded">
|
|
<X className="w-4 h-4 text-red-500" />
|
|
</button>
|
|
</div>
|
|
<div className="mt-3 grid grid-cols-2 gap-2 text-sm">
|
|
<div>
|
|
<label className="text-xs text-slate-400">Daily Rate</label>
|
|
<input
|
|
type="number"
|
|
value={biker.dailyRate}
|
|
onChange={(e) => {
|
|
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"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="text-xs text-slate-400">License</label>
|
|
<p className="text-slate-600">{biker.license}</p>
|
|
</div>
|
|
</div>
|
|
<div className="mt-2">
|
|
<label className="text-xs text-slate-400 block">Notes</label>
|
|
<input
|
|
type="text"
|
|
placeholder="Additional notes..."
|
|
className="w-full px-2 py-1 border border-slate-200 rounded text-sm"
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{assignedBikers.length > 0 && (
|
|
<div className="bg-green-50 border border-green-200 rounded-lg p-4">
|
|
<div className="flex justify-between items-center">
|
|
<span className="font-semibold text-slate-700">Total Daily Rate:</span>
|
|
<span className="text-xl font-bold text-green-600">
|
|
৳{assignedBikers.reduce((sum, b) => sum + b.dailyRate, 0)}/day
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="p-5 border-t border-slate-100 flex justify-end gap-3">
|
|
<button onClick={() => setShowAssignModal(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={handleSubmitAssignment}
|
|
disabled={assignedBikers.length === 0}
|
|
className="px-4 py-2 bg-accent text-white rounded-lg text-sm hover:bg-accent-dark disabled:opacity-50"
|
|
>
|
|
Assign {assignedBikers.length} Biker{assignedBikers.length !== 1 ? 's' : ''}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function InvestorTab({ bike }: { bike: Bike }) {
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-slate-100">
|
|
<h3 className="font-semibold text-slate-700 mb-3">Investor Information</h3>
|
|
{!bike.investorId ? (
|
|
<div className="text-center py-8">
|
|
<User2 className="w-12 h-12 text-slate-300 mx-auto mb-4" />
|
|
<p className="text-sm text-slate-500">No investor assigned.</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
<div className="flex items-center gap-4 p-4 bg-purple-50 rounded-lg">
|
|
<div className="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center">
|
|
<User2 className="w-6 h-6 text-purple-600" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<p className="font-semibold text-slate-700">{bike.investorName || 'Investor'}</p>
|
|
<p className="text-sm text-slate-500">ID: {bike.investorId}</p>
|
|
</div>
|
|
<Link
|
|
href={`/admin/investors/${bike.investorId}`}
|
|
className="px-4 py-2 bg-purple-600 text-white text-sm rounded-lg hover:bg-purple-700 flex items-center gap-2"
|
|
>
|
|
<ExternalLink className="w-4 h-4" /> View Investor
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div className="bg-slate-50 rounded-lg p-3">
|
|
<p className="text-xs text-slate-500">Purchase Date</p>
|
|
<p className="font-semibold text-slate-700">{bike.purchaseDate || 'N/A'}</p>
|
|
</div>
|
|
<div className="bg-slate-50 rounded-lg p-3">
|
|
<p className="text-xs text-slate-500">Purchase Price</p>
|
|
<p className="font-semibold text-green-600">৳{bike.purchasePrice?.toLocaleString() || 0}</p>
|
|
</div>
|
|
<div className="bg-slate-50 rounded-lg p-3">
|
|
<p className="text-xs text-slate-500">Total Earnings</p>
|
|
<p className="font-semibold text-green-600">৳{bike.totalEarnings?.toLocaleString() || 0}</p>
|
|
</div>
|
|
<div className="bg-slate-50 rounded-lg p-3">
|
|
<p className="text-xs text-slate-500">ROI</p>
|
|
<p className="font-semibold text-amber-600">
|
|
{bike.purchasePrice && bike.totalEarnings
|
|
? ((bike.totalEarnings / bike.purchasePrice) * 100).toFixed(1)
|
|
: 0}%
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl p-4 lg:p-6 shadow-sm border border-slate-100">
|
|
<h3 className="font-semibold text-slate-700 mb-3">Payment Summary</h3>
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between p-3 bg-slate-50 rounded-lg">
|
|
<span className="text-sm text-slate-600">Total Paid by Renters</span>
|
|
<span className="font-semibold text-green-600">৳{bike.totalEarnings?.toLocaleString() || 0}</span>
|
|
</div>
|
|
<div className="flex items-center justify-between p-3 bg-slate-50 rounded-lg">
|
|
<span className="text-sm text-slate-600">Investor Share (80%)</span>
|
|
<span className="font-semibold text-purple-600">৳{Math.round((bike.totalEarnings || 0) * 0.8).toLocaleString()}</span>
|
|
</div>
|
|
<div className="flex items-center justify-between p-3 bg-slate-50 rounded-lg">
|
|
<span className="text-sm text-slate-600">Company Share (20%)</span>
|
|
<span className="font-semibold text-blue-600">৳{Math.round((bike.totalEarnings || 0) * 0.2).toLocaleString()}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
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 (
|
|
<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">
|
|
<div className="p-5 border-b border-slate-100 flex items-center justify-between">
|
|
<h2 className="text-lg font-bold text-slate-800">{damage ? 'Edit Damage Record' : 'Add Damage Record'}</h2>
|
|
<button onClick={onClose} className="p-2 hover:bg-slate-100 rounded-lg">
|
|
<X className="w-5 h-5 text-slate-400" />
|
|
</button>
|
|
</div>
|
|
<form onSubmit={handleSubmit} className="p-5 overflow-y-auto max-h-[70vh] space-y-4">
|
|
<div>
|
|
<label className="text-sm font-medium text-slate-600 mb-1 block">Date</label>
|
|
<input
|
|
type="date"
|
|
value={formData.date}
|
|
onChange={(e) => setFormData({ ...formData, date: e.target.value })}
|
|
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-medium text-slate-600 mb-1 block">Type</label>
|
|
<select
|
|
value={formData.type}
|
|
onChange={(e) => setFormData({ ...formData, type: e.target.value as any })}
|
|
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
|
>
|
|
{damageTypes.map(t => (
|
|
<option key={t.value} value={t.value}>{t.label}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-medium text-slate-600 mb-1 block">Description</label>
|
|
<textarea
|
|
value={formData.description}
|
|
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
|
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
|
rows={3}
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-medium text-slate-600 mb-1 block">Reported By</label>
|
|
<input
|
|
type="text"
|
|
value={formData.reportedBy}
|
|
onChange={(e) => setFormData({ ...formData, reportedBy: e.target.value })}
|
|
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<label className="text-sm font-medium text-slate-600 mb-1 block">Estimated Cost (৳)</label>
|
|
<input
|
|
type="number"
|
|
value={formData.estimatedCost}
|
|
onChange={(e) => setFormData({ ...formData, estimatedCost: Number(e.target.value) })}
|
|
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-medium text-slate-600 mb-1 block">Actual Cost (৳)</label>
|
|
<input
|
|
type="number"
|
|
value={formData.actualCost}
|
|
onChange={(e) => setFormData({ ...formData, actualCost: Number(e.target.value) })}
|
|
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-medium text-slate-600 mb-1 block">Status</label>
|
|
<select
|
|
value={formData.status}
|
|
onChange={(e) => setFormData({ ...formData, status: e.target.value as any })}
|
|
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
|
>
|
|
{statusOptions.map(s => (
|
|
<option key={s.value} value={s.value}>{s.label}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div className="flex justify-end gap-3 pt-4">
|
|
<button type="button" onClick={onClose} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50">
|
|
Cancel
|
|
</button>
|
|
<button type="submit" className="px-4 py-2 bg-accent text-white rounded-lg text-sm hover:bg-accent-dark">
|
|
{damage ? 'Update' : 'Add'} Record
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function MaintenanceModal({ bike, maintenance, onClose, onSave }: { bike: Bike; maintenance: MaintenanceRecord | null; onClose: () => void; onSave: (maintenance: MaintenanceRecord) => void }) {
|
|
const [formData, setFormData] = useState({
|
|
id: maintenance?.id || `MNT${Date.now()}`,
|
|
date: maintenance?.date || new Date().toISOString().split('T')[0],
|
|
type: maintenance?.type || 'routine',
|
|
description: maintenance?.description || '',
|
|
performedBy: maintenance?.performedBy || '',
|
|
cost: maintenance?.cost || 0,
|
|
nextDueDate: maintenance?.nextDueDate || '',
|
|
status: maintenance?.status || 'completed',
|
|
});
|
|
|
|
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 statusOptions = [
|
|
{ value: 'scheduled', label: 'Scheduled' },
|
|
{ value: 'in_progress', label: 'In Progress' },
|
|
{ value: 'completed', label: 'Completed' },
|
|
];
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
onSave(formData as MaintenanceRecord);
|
|
};
|
|
|
|
return (
|
|
<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">
|
|
<div className="p-5 border-b border-slate-100 flex items-center justify-between">
|
|
<h2 className="text-lg font-bold text-slate-800">{maintenance ? 'Edit Maintenance Record' : 'Add Maintenance Record'}</h2>
|
|
<button onClick={onClose} className="p-2 hover:bg-slate-100 rounded-lg">
|
|
<X className="w-5 h-5 text-slate-400" />
|
|
</button>
|
|
</div>
|
|
<form onSubmit={handleSubmit} className="p-5 overflow-y-auto max-h-[70vh] space-y-4">
|
|
<div>
|
|
<label className="text-sm font-medium text-slate-600 mb-1 block">Date</label>
|
|
<input
|
|
type="date"
|
|
value={formData.date}
|
|
onChange={(e) => setFormData({ ...formData, date: e.target.value })}
|
|
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-medium text-slate-600 mb-1 block">Type</label>
|
|
<select
|
|
value={formData.type}
|
|
onChange={(e) => setFormData({ ...formData, type: e.target.value as any })}
|
|
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
|
>
|
|
{maintenanceTypes.map(t => (
|
|
<option key={t.value} value={t.value}>{t.label}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-medium text-slate-600 mb-1 block">Description</label>
|
|
<textarea
|
|
value={formData.description}
|
|
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
|
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
|
rows={3}
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-medium text-slate-600 mb-1 block">Performed By</label>
|
|
<input
|
|
type="text"
|
|
value={formData.performedBy}
|
|
onChange={(e) => setFormData({ ...formData, performedBy: e.target.value })}
|
|
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<label className="text-sm font-medium text-slate-600 mb-1 block">Cost (৳)</label>
|
|
<input
|
|
type="number"
|
|
value={formData.cost}
|
|
onChange={(e) => setFormData({ ...formData, cost: Number(e.target.value) })}
|
|
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-medium text-slate-600 mb-1 block">Next Due Date</label>
|
|
<input
|
|
type="date"
|
|
value={formData.nextDueDate}
|
|
onChange={(e) => setFormData({ ...formData, nextDueDate: e.target.value })}
|
|
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-medium text-slate-600 mb-1 block">Status</label>
|
|
<select
|
|
value={formData.status}
|
|
onChange={(e) => setFormData({ ...formData, status: e.target.value as any })}
|
|
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
|
>
|
|
{statusOptions.map(s => (
|
|
<option key={s.value} value={s.value}>{s.label}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div className="flex justify-end gap-3 pt-4">
|
|
<button type="button" onClick={onClose} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50">
|
|
Cancel
|
|
</button>
|
|
<button type="submit" className="px-4 py-2 bg-accent text-white rounded-lg text-sm hover:bg-accent-dark">
|
|
{maintenance ? 'Update' : 'Add'} Record
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |