941 lines
40 KiB
TypeScript
941 lines
40 KiB
TypeScript
'use client';
|
||
|
||
import { useState, useEffect } from 'react';
|
||
import { useParams, useRouter } from 'next/navigation';
|
||
import {
|
||
AlertTriangle, Search, Plus, X, Check, Clock, Bike, User, Phone,
|
||
MapPin, FileText, Image, DollarSign, Wrench, Battery, Key,
|
||
CheckCircle, XCircle, ChevronLeft, Save, Printer, Send, QrCode,
|
||
Wallet, Building, Edit, MessageSquare, Calendar, ArrowLeft
|
||
} from 'lucide-react';
|
||
|
||
type TransactionType = 'deposit' | 'rent_income' | 'investor_funding' | 'investor_withdraw' | 'salary' | 'rent_expense' | 'utility' | 'maintenance' | 'bike_purchase' | 'bike_sale' | 'other_income' | 'other_expense';
|
||
|
||
type MaintenanceType = 'damage' | 'repair' | 'service' | 'battery_swap' | 'inspection' | 'other';
|
||
type DamageSeverity = 'critical' | 'major' | 'minor' | 'cosmetic';
|
||
type MaintenanceStatus = 'reported' | 'in_progress' | 'parts_ordered' | 'completed' | 'cancelled';
|
||
type PaymentStatus = 'pending' | 'approved' | 'paid' | 'rejected';
|
||
|
||
interface MaintenanceRecord {
|
||
id: string;
|
||
date: string;
|
||
type: MaintenanceType;
|
||
severity: DamageSeverity;
|
||
status: MaintenanceStatus;
|
||
paymentStatus: PaymentStatus;
|
||
bikeId: string;
|
||
bikeModel: string;
|
||
bikePlate: string;
|
||
batteryId?: string;
|
||
reporterId: string;
|
||
reporterName: string;
|
||
reporterPhone: string;
|
||
reporterRole: 'biker' | 'staff' | 'hub';
|
||
description: string;
|
||
location: string;
|
||
estimatedCost: number;
|
||
actualCost?: number;
|
||
partsUsed?: string[];
|
||
images: { id: string; name: string; url: string; uploadedAt: string }[];
|
||
assignedTo?: string;
|
||
notes: string[];
|
||
resolvedAt?: string;
|
||
createdAt: string;
|
||
createdBy: string;
|
||
}
|
||
|
||
const mockMaintenance: MaintenanceRecord[] = [
|
||
{
|
||
id: 'MNT-001',
|
||
date: '2024-03-21',
|
||
type: 'damage',
|
||
severity: 'major',
|
||
status: 'in_progress',
|
||
paymentStatus: 'approved',
|
||
bikeId: 'EV-004',
|
||
bikeModel: 'AIMA Lightning',
|
||
bikePlate: 'Dhaka Metro Cha-5679',
|
||
batteryId: 'BAT-044',
|
||
reporterId: 'BIKER-004',
|
||
reporterName: 'Sofiq Rahman',
|
||
reporterPhone: '01712345681',
|
||
reporterRole: 'biker',
|
||
description: 'Front fender damaged in accident at Gulshan signal',
|
||
location: 'Gulshan, Dhaka',
|
||
estimatedCost: 3500,
|
||
actualCost: 3200,
|
||
partsUsed: ['Front fender', 'Mounting brackets'],
|
||
images: [
|
||
{ id: 'img1', name: 'Damage Front', url: '', uploadedAt: '2024-03-21' },
|
||
{ id: 'img2', name: 'Damage Side', url: '', uploadedAt: '2024-03-21' },
|
||
],
|
||
assignedTo: 'Service Center A',
|
||
notes: ['Parts ordered from supplier'],
|
||
createdAt: '2024-03-21T10:00:00',
|
||
createdBy: 'Admin',
|
||
},
|
||
{
|
||
id: 'MNT-002',
|
||
date: '2024-03-20',
|
||
type: 'service',
|
||
severity: 'minor',
|
||
status: 'completed',
|
||
paymentStatus: 'paid',
|
||
bikeId: 'EV-002',
|
||
bikeModel: 'Yadea DT3',
|
||
bikePlate: 'Dhaka Metro Ba-1234',
|
||
batteryId: 'BAT-021',
|
||
reporterId: 'BIKER-002',
|
||
reporterName: 'Karim Hasan',
|
||
reporterPhone: '01712345679',
|
||
reporterRole: 'biker',
|
||
description: 'Routine service - brake adjustment and chain lubrication',
|
||
location: 'Banani Hub',
|
||
estimatedCost: 500,
|
||
actualCost: 450,
|
||
images: [],
|
||
notes: ['Service completed'],
|
||
resolvedAt: '2024-03-20T14:00:00',
|
||
createdAt: '2024-03-20T08:00:00',
|
||
createdBy: 'Hub Staff',
|
||
},
|
||
{
|
||
id: 'MNT-003',
|
||
date: '2024-03-19',
|
||
type: 'battery_swap',
|
||
severity: 'minor',
|
||
status: 'completed',
|
||
paymentStatus: 'pending',
|
||
bikeId: 'EV-007',
|
||
bikeModel: 'Etron ET50',
|
||
bikePlate: 'Dhaka Metro Ca-8901',
|
||
reporterId: 'BIKER-007',
|
||
reporterName: 'Jamal',
|
||
reporterPhone: '01712345687',
|
||
reporterRole: 'biker',
|
||
description: 'Battery not holding charge properly - need replacement',
|
||
location: 'Dhanmondi, Dhaka',
|
||
estimatedCost: 0,
|
||
images: [],
|
||
notes: ['Battery replaced under warranty'],
|
||
resolvedAt: '2024-03-19T16:00:00',
|
||
createdAt: '2024-03-19T12:00:00',
|
||
createdBy: 'Admin',
|
||
},
|
||
{
|
||
id: 'MNT-004',
|
||
date: '2024-03-18',
|
||
type: 'repair',
|
||
severity: 'critical',
|
||
status: 'in_progress',
|
||
paymentStatus: 'pending',
|
||
bikeId: 'EV-010',
|
||
bikeModel: 'TVS iQube',
|
||
bikePlate: 'Dhaka Metro Da-4567',
|
||
reporterId: 'BIKER-010',
|
||
reporterName: 'Ripon',
|
||
reporterPhone: '01712345690',
|
||
reporterRole: 'biker',
|
||
description: 'Motor issue - bike not moving properly',
|
||
location: 'Mirpur, Dhaka',
|
||
estimatedCost: 8000,
|
||
images: [
|
||
{ id: 'img3', name: 'Motor Damage', url: '', uploadedAt: '2024-03-18' },
|
||
],
|
||
assignedTo: 'Authorized Service Center',
|
||
notes: ['Motor needs replacement - ordered', 'Waiting for parts'],
|
||
createdAt: '2024-03-18T09:00:00',
|
||
createdBy: 'Admin',
|
||
},
|
||
{
|
||
id: 'MNT-005',
|
||
date: '2024-03-17',
|
||
type: 'inspection',
|
||
severity: 'minor',
|
||
status: 'completed',
|
||
paymentStatus: 'paid',
|
||
bikeId: 'EV-001',
|
||
bikeModel: 'AIMA Lightning',
|
||
bikePlate: 'Dhaka Metro Aa-1111',
|
||
reporterId: 'Hub-01',
|
||
reporterName: 'Gulshan Hub',
|
||
reporterPhone: '02-1234567',
|
||
reporterRole: 'hub',
|
||
description: 'Monthly inspection completed',
|
||
location: 'Gulshan Hub',
|
||
estimatedCost: 300,
|
||
actualCost: 250,
|
||
images: [],
|
||
notes: ['All checks passed'],
|
||
resolvedAt: '2024-03-17T15:00:00',
|
||
createdAt: '2024-03-17T10:00:00',
|
||
createdBy: 'Hub Staff',
|
||
},
|
||
{
|
||
id: 'MNT-006',
|
||
date: '2024-03-15',
|
||
type: 'damage',
|
||
severity: 'cosmetic',
|
||
status: 'completed',
|
||
paymentStatus: 'rejected',
|
||
bikeId: 'EV-005',
|
||
bikeModel: 'Yadea DT3',
|
||
bikePlate: 'Dhaka Metro Ba-5678',
|
||
reporterId: 'BIKER-005',
|
||
reporterName: 'Rahim',
|
||
reporterPhone: '01712345685',
|
||
reporterRole: 'biker',
|
||
description: 'Minor scratch on mirror - customer dropped bike slowly',
|
||
location: 'Uttara, Dhaka',
|
||
estimatedCost: 500,
|
||
images: [],
|
||
notes: ['Denied - user responsibility'],
|
||
createdAt: '2024-03-15T14:00:00',
|
||
createdBy: 'Admin',
|
||
},
|
||
];
|
||
|
||
const statusColors: Record<string, string> = {
|
||
reported: 'bg-amber-100 text-amber-700',
|
||
in_progress: 'bg-blue-100 text-blue-700',
|
||
parts_ordered: 'bg-purple-100 text-purple-700',
|
||
completed: 'bg-green-100 text-green-700',
|
||
cancelled: 'bg-red-100 text-red-700',
|
||
};
|
||
|
||
const severityColors: Record<string, string> = {
|
||
critical: 'bg-red-100 text-red-700',
|
||
major: 'bg-orange-100 text-orange-700',
|
||
minor: 'bg-amber-100 text-amber-700',
|
||
cosmetic: 'bg-slate-100 text-slate-700',
|
||
};
|
||
|
||
const paymentColors: Record<string, string> = {
|
||
pending: 'bg-amber-100 text-amber-700',
|
||
approved: 'bg-blue-100 text-blue-700',
|
||
paid: 'bg-green-100 text-green-700',
|
||
rejected: 'bg-red-100 text-red-700',
|
||
};
|
||
|
||
const typeLabels: Record<string, string> = {
|
||
damage: 'Damage',
|
||
repair: 'Repair',
|
||
service: 'Service',
|
||
battery_swap: 'Battery Swap',
|
||
inspection: 'Inspection',
|
||
other: 'Other',
|
||
};
|
||
|
||
export default function MaintenanceDetailPage() {
|
||
const params = useParams();
|
||
const router = useRouter();
|
||
const id = params.id as string;
|
||
|
||
const [record, setRecord] = useState<MaintenanceRecord | null>(null);
|
||
const [editMode, setEditMode] = useState(false);
|
||
const [showCompleteModal, setShowCompleteModal] = useState(false);
|
||
const [showPaymentModal, setShowPaymentModal] = useState(false);
|
||
const [showInvoiceModal, setShowInvoiceModal] = useState(false);
|
||
const [showAddNoteModal, setShowAddNoteModal] = useState(false);
|
||
const [editForm, setEditForm] = useState<Partial<MaintenanceRecord>>({});
|
||
const [newNoteText, setNewNoteText] = useState('');
|
||
const [actualCost, setActualCost] = useState('');
|
||
|
||
useEffect(() => {
|
||
const found = mockMaintenance.find(r => r.id === id);
|
||
if (found) {
|
||
setRecord(found);
|
||
setEditForm(found);
|
||
setActualCost(found.actualCost?.toString() || found.estimatedCost.toString());
|
||
}
|
||
}, [id]);
|
||
|
||
if (!record) {
|
||
return (
|
||
<div className="p-6 flex items-center justify-center min-h-[50vh]">
|
||
<div className="text-center">
|
||
<Wrench className="w-16 h-16 text-slate-300 mx-auto mb-4" />
|
||
<p className="text-slate-500">Record not found</p>
|
||
<button
|
||
onClick={() => router.push('/admin/maintenance')}
|
||
className="mt-4 px-4 py-2 bg-accent text-white rounded-lg text-sm"
|
||
>
|
||
Back to Maintenance
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const handleSaveEdit = () => {
|
||
setRecord(prev => prev ? { ...prev, ...editForm } : null);
|
||
setEditMode(false);
|
||
};
|
||
|
||
const handleComplete = () => {
|
||
if (!record) return;
|
||
const cost = parseInt(actualCost) || record.estimatedCost;
|
||
setRecord(prev => prev ? {
|
||
...prev,
|
||
status: 'completed',
|
||
resolvedAt: new Date().toISOString().split('T')[0],
|
||
actualCost: cost
|
||
} : null);
|
||
setShowCompleteModal(false);
|
||
};
|
||
|
||
const handlePayment = (source: 'bank' | 'cash' | 'biker') => {
|
||
if (!record) return;
|
||
const cost = record.actualCost || record.estimatedCost;
|
||
|
||
setRecord(prev => prev ? { ...prev, paymentStatus: 'paid' } : null);
|
||
setShowPaymentModal(false);
|
||
setShowInvoiceModal(true);
|
||
};
|
||
|
||
const handleGenerateInvoice = () => {
|
||
if (!record) return;
|
||
import('jspdf').then(jsPDF => {
|
||
const doc = new jsPDF.default();
|
||
const cost = record.actualCost || record.estimatedCost;
|
||
const qrData = `INV-${record.id}|${record.bikePlate}|${record.type}|${cost}|${new Date().toISOString().split('T')[0]}`;
|
||
|
||
doc.setFontSize(20);
|
||
doc.setTextColor(6, 95, 70);
|
||
doc.text('JAIBEN Mobility Ltd', 20, 20);
|
||
|
||
doc.setFontSize(14);
|
||
doc.setTextColor(0);
|
||
doc.text('Maintenance Invoice', 20, 32);
|
||
|
||
doc.setFontSize(10);
|
||
doc.setTextColor(100);
|
||
doc.text(`Invoice No: INV-${record.id}`, 20, 42);
|
||
doc.text(`Date: ${record.date}`, 20, 48);
|
||
doc.text(`Issue Type: ${typeLabels[record.type]}`, 20, 54);
|
||
doc.text(`Severity: ${record.severity}`, 20, 60);
|
||
doc.text(`Status: ${record.status}`, 20, 66);
|
||
|
||
doc.setFontSize(11);
|
||
doc.setTextColor(0);
|
||
doc.text('Bike Details', 20, 80);
|
||
doc.setFontSize(10);
|
||
doc.text(`Bike ID: ${record.bikeId}`, 20, 86);
|
||
doc.text(`Model: ${record.bikeModel}`, 20, 92);
|
||
doc.text(`License Plate: ${record.bikePlate}`, 20, 98);
|
||
if (record.batteryId) doc.text(`Battery ID: ${record.batteryId}`, 20, 104);
|
||
|
||
doc.setFontSize(11);
|
||
doc.text('Reporter', 20, 118);
|
||
doc.setFontSize(10);
|
||
doc.text(`Name: ${record.reporterName}`, 20, 124);
|
||
doc.text(`Phone: ${record.reporterPhone}`, 20, 130);
|
||
doc.text(`Role: ${record.reporterRole}`, 20, 136);
|
||
|
||
doc.setFontSize(11);
|
||
doc.text('Description', 20, 150);
|
||
doc.setFontSize(10);
|
||
const descLines = doc.splitTextToSize(record.description, 170);
|
||
doc.text(descLines, 20, 156);
|
||
|
||
doc.setFontSize(11);
|
||
doc.text('Service Details', 120, 80);
|
||
doc.setFontSize(10);
|
||
doc.text(`Location: ${record.location}`, 120, 86);
|
||
if (record.assignedTo) doc.text(`Assigned: ${record.assignedTo}`, 120, 92);
|
||
if (record.resolvedAt) doc.text(`Resolved: ${record.resolvedAt}`, 120, 98);
|
||
|
||
doc.setFontSize(11);
|
||
doc.text('Cost Breakdown', 20, 175);
|
||
doc.setFontSize(10);
|
||
doc.text(`Estimated Cost: ৳${record.estimatedCost}`, 20, 181);
|
||
if (record.actualCost) doc.text(`Actual Cost: ৳${record.actualCost}`, 20, 187);
|
||
if (record.partsUsed && record.partsUsed.length > 0) {
|
||
doc.text(`Parts: ${record.partsUsed.join(', ')}`, 20, 193);
|
||
}
|
||
|
||
doc.setFontSize(14);
|
||
doc.setTextColor(6, 95, 70);
|
||
doc.text(`Total: ৳${cost}`, 20, 205);
|
||
|
||
doc.setFontSize(9);
|
||
doc.setTextColor(150);
|
||
doc.text('Generated from JAIBEN Maintenance System', 20, 280);
|
||
doc.text(`QR: ${qrData}`, 20, 286);
|
||
|
||
doc.save(`maintenance-invoice-${record.id}.pdf`);
|
||
});
|
||
setShowInvoiceModal(false);
|
||
};
|
||
|
||
const handleAddNote = () => {
|
||
if (!record || !newNoteText.trim()) return;
|
||
setRecord(prev => prev ? { ...prev, notes: [...prev.notes, newNoteText] } : null);
|
||
setNewNoteText('');
|
||
setShowAddNoteModal(false);
|
||
};
|
||
|
||
return (
|
||
<div className="p-4 lg:p-6 max-w-8xl mx-auto">
|
||
<button
|
||
onClick={() => router.push('/admin/maintenance')}
|
||
className="flex items-center gap-2 text-slate-600 hover:text-slate-800 mb-4"
|
||
>
|
||
<ArrowLeft className="w-4 h-4" /> Back to Maintenance
|
||
</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">{record.id}</h1>
|
||
<span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${severityColors[record.severity]}`}>
|
||
{record.severity}
|
||
</span>
|
||
<span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${statusColors[record.status]}`}>
|
||
{record.status.replace('_', ' ')}
|
||
</span>
|
||
<span className={`inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full ${paymentColors[record.paymentStatus]}`}>
|
||
{record.paymentStatus}
|
||
</span>
|
||
</div>
|
||
<p className="text-slate-500 mt-1">{typeLabels[record.type]} • {record.date}</p>
|
||
</div>
|
||
<div className="flex gap-2">
|
||
{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={() => 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>
|
||
<button onClick={() => setShowAddNoteModal(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">
|
||
<MessageSquare className="w-4 h-4" /> Note
|
||
</button>
|
||
{record.status !== 'completed' && (
|
||
<button
|
||
onClick={() => setShowCompleteModal(true)}
|
||
className="px-4 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700 flex items-center gap-2"
|
||
>
|
||
<Check className="w-4 h-4" /> Complete
|
||
</button>
|
||
)}
|
||
{record.status === 'completed' && record.paymentStatus !== 'paid' && (
|
||
<button
|
||
onClick={() => setShowPaymentModal(true)}
|
||
className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700 flex items-center gap-2"
|
||
>
|
||
<DollarSign className="w-4 h-4" /> Payment
|
||
</button>
|
||
)}
|
||
{record.paymentStatus === 'paid' && (
|
||
<button
|
||
onClick={() => setShowInvoiceModal(true)}
|
||
className="px-4 py-2 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700 flex items-center gap-2"
|
||
>
|
||
<Printer className="w-4 h-4" /> Invoice
|
||
</button>
|
||
)}
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="p-6 grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||
<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">
|
||
<Bike className="w-5 h-5" /> Bike Information
|
||
</h3>
|
||
{editMode ? (
|
||
<div className="grid grid-cols-2 gap-3">
|
||
<div>
|
||
<label className="text-xs text-blue-700 block mb-1">Bike ID</label>
|
||
<input
|
||
type="text"
|
||
value={editForm.bikeId || ''}
|
||
onChange={(e) => setEditForm({ ...editForm, bikeId: e.target.value })}
|
||
className="w-full px-3 py-2 border border-blue-200 rounded-lg text-sm"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="text-xs text-blue-700 block mb-1">License Plate</label>
|
||
<input
|
||
type="text"
|
||
value={editForm.bikePlate || ''}
|
||
onChange={(e) => setEditForm({ ...editForm, bikePlate: e.target.value })}
|
||
className="w-full px-3 py-2 border border-blue-200 rounded-lg text-sm"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="text-xs text-blue-700 block mb-1">Model</label>
|
||
<input
|
||
type="text"
|
||
value={editForm.bikeModel || ''}
|
||
onChange={(e) => setEditForm({ ...editForm, bikeModel: e.target.value })}
|
||
className="w-full px-3 py-2 border border-blue-200 rounded-lg text-sm"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="text-xs text-blue-700 block mb-1">Battery ID</label>
|
||
<input
|
||
type="text"
|
||
value={editForm.batteryId || ''}
|
||
onChange={(e) => setEditForm({ ...editForm, batteryId: e.target.value })}
|
||
className="w-full px-3 py-2 border border-blue-200 rounded-lg text-sm"
|
||
/>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="space-y-2">
|
||
<div className="flex justify-between">
|
||
<span className="text-sm text-blue-600">Bike ID</span>
|
||
<span className="text-sm font-medium text-blue-800">{record.bikeId}</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span className="text-sm text-blue-600">Model</span>
|
||
<span className="text-sm font-medium text-blue-800">{record.bikeModel}</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span className="text-sm text-blue-600">License Plate</span>
|
||
<span className="text-sm font-medium text-blue-800">{record.bikePlate}</span>
|
||
</div>
|
||
{record.batteryId && (
|
||
<div className="flex justify-between">
|
||
<span className="text-sm text-blue-600">Battery ID</span>
|
||
<span className="text-sm font-medium text-blue-800">{record.batteryId}</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">
|
||
<User className="w-5 h-5" /> Reporter
|
||
</h3>
|
||
<div className="space-y-2">
|
||
<div className="flex justify-between">
|
||
<span className="text-sm text-green-600">Name</span>
|
||
<span className="text-sm font-medium text-green-800">{record.reporterName}</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span className="text-sm text-green-600">Phone</span>
|
||
<span className="text-sm font-medium text-green-800">{record.reporterPhone}</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span className="text-sm text-green-600">Role</span>
|
||
<span className="text-sm font-medium text-green-800 capitalize">{record.reporterRole}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
<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">
|
||
<FileText className="w-5 h-5" /> Description
|
||
</h3>
|
||
{editMode ? (
|
||
<textarea
|
||
value={editForm.description || ''}
|
||
onChange={(e) => setEditForm({ ...editForm, description: e.target.value })}
|
||
className="w-full px-3 py-2 border border-amber-200 rounded-lg text-sm"
|
||
rows={3}
|
||
/>
|
||
) : (
|
||
<>
|
||
<p className="text-sm text-amber-700 mb-3">{record.description}</p>
|
||
<div className="flex items-center gap-2 text-xs text-amber-600">
|
||
<MapPin className="w-3 h-3" /> {record.location}
|
||
</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">
|
||
<DollarSign className="w-5 h-5" /> Cost Details
|
||
</h3>
|
||
<div className="grid grid-cols-2 gap-3">
|
||
<div className="bg-white p-3 rounded-lg">
|
||
<p className="text-xs text-purple-600">Estimated</p>
|
||
{editMode ? (
|
||
<input
|
||
type="number"
|
||
value={editForm.estimatedCost || 0}
|
||
onChange={(e) => setEditForm({ ...editForm, estimatedCost: parseInt(e.target.value) })}
|
||
className="w-full px-2 py-1 border border-purple-200 rounded text-sm"
|
||
/>
|
||
) : (
|
||
<p className="text-lg font-bold text-purple-800">৳{record.estimatedCost}</p>
|
||
)}
|
||
</div>
|
||
<div className="bg-white p-3 rounded-lg">
|
||
<p className="text-xs text-purple-600">Actual</p>
|
||
<p className="text-lg font-bold text-purple-800">৳{record.actualCost || record.estimatedCost}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-cyan-50 p-4 rounded-xl border border-cyan-100">
|
||
<h3 className="font-semibold text-cyan-800 mb-3 flex items-center gap-2">
|
||
<User className="w-5 h-5" /> Assigned To
|
||
</h3>
|
||
{editMode ? (
|
||
<select
|
||
value={editForm.assignedTo || ''}
|
||
onChange={(e) => setEditForm({ ...editForm, assignedTo: e.target.value })}
|
||
className="w-full px-3 py-2 border border-cyan-200 rounded-lg text-sm"
|
||
>
|
||
<option value="">Select Service Center</option>
|
||
<option value="Service Center A">Service Center A</option>
|
||
<option value="Service Center B">Service Center B</option>
|
||
<option value="Authorized Service Center">Authorized Service Center</option>
|
||
<option value="Gulshan Hub">Gulshan Hub</option>
|
||
<option value="Banani Hub">Banani Hub</option>
|
||
<option value="Dhanmondi Hub">Dhanmondi Hub</option>
|
||
</select>
|
||
) : (
|
||
<p className="text-sm text-cyan-700">{record.assignedTo || 'Not assigned'}</p>
|
||
)}
|
||
</div>
|
||
|
||
<div className="bg-orange-50 p-4 rounded-xl border border-orange-100">
|
||
<div className="flex items-center justify-between mb-3">
|
||
<h3 className="font-semibold text-orange-800 flex items-center gap-2">
|
||
<Wrench className="w-5 h-5" /> Parts Used
|
||
</h3>
|
||
{editMode && (
|
||
<select
|
||
onChange={(e) => {
|
||
if (e.target.value) {
|
||
const currentParts = editForm.partsUsed || [];
|
||
if (!currentParts.includes(e.target.value)) {
|
||
setEditForm({ ...editForm, partsUsed: [...currentParts, e.target.value] });
|
||
}
|
||
e.target.value = '';
|
||
}
|
||
}}
|
||
className="px-2 py-1 text-xs border border-orange-200 rounded"
|
||
>
|
||
<option value="">+ Add Part</option>
|
||
<option value="Front fender">Front fender</option>
|
||
<option value="Rear fender">Rear fender</option>
|
||
<option value="Mirror">Mirror</option>
|
||
<option value="Headlight">Headlight</option>
|
||
<option value="Tail light">Tail light</option>
|
||
<option value="Brake pad">Brake pad</option>
|
||
<option value="Brake shoe">Brake shoe</option>
|
||
<option value="Chain">Chain</option>
|
||
<option value="Battery">Battery</option>
|
||
<option value="Motor">Motor</option>
|
||
<option value="Controller">Controller</option>
|
||
<option value="Throttle">Throttle</option>
|
||
<option value="Lever">Lever</option>
|
||
<option value="Stand">Stand</option>
|
||
<option value="Seat">Seat</option>
|
||
<option value="Tyre">Tyre</option>
|
||
<option value="Tube">Tube</option>
|
||
<option value="Mounting brackets">Mounting brackets</option>
|
||
<option value="Bolt set">Bolt set</option>
|
||
</select>
|
||
)}
|
||
</div>
|
||
<div className="flex flex-wrap gap-2">
|
||
{(editMode ? editForm.partsUsed : record.partsUsed)?.map((part, idx) => (
|
||
<span key={idx} className="px-3 py-1 bg-white rounded-full text-sm text-orange-700 border border-orange-200 flex items-center gap-1">
|
||
{part}
|
||
{editMode && (
|
||
<button
|
||
onClick={() => {
|
||
const updated = [...(editForm.partsUsed || [])];
|
||
updated.splice(idx, 1);
|
||
setEditForm({ ...editForm, partsUsed: updated });
|
||
}}
|
||
className="ml-1 text-orange-400 hover:text-red-500"
|
||
>
|
||
×
|
||
</button>
|
||
)}
|
||
</span>
|
||
))}
|
||
{(editMode ? editForm.partsUsed : record.partsUsed)?.length === 0 && (
|
||
<p className="text-sm text-orange-400">No parts added</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-indigo-50 p-4 rounded-xl border border-indigo-100">
|
||
<h3 className="font-semibold text-indigo-800 mb-3 flex items-center gap-2">
|
||
<Image className="w-5 h-5" /> Images ({(editMode ? editForm.images : record.images)?.length})
|
||
</h3>
|
||
<div className="grid grid-cols-4 gap-2">
|
||
{(editMode ? editForm.images : record.images)?.map((img) => (
|
||
<div key={img.id} className="relative aspect-square bg-white rounded-lg flex flex-col items-center justify-center border border-indigo-100">
|
||
<Image className="w-8 h-8 text-indigo-400" />
|
||
<span className="text-xs text-indigo-500 mt-1 text-center">{img.name}</span>
|
||
{editMode && (
|
||
<button
|
||
onClick={() => {
|
||
const updated = (editForm.images || []).filter((i: any) => i.id !== img.id);
|
||
setEditForm({ ...editForm, images: updated });
|
||
}}
|
||
className="absolute top-1 right-1 w-5 h-5 bg-red-100 rounded-full text-red-500 text-xs flex items-center justify-center"
|
||
>
|
||
×
|
||
</button>
|
||
)}
|
||
</div>
|
||
))}
|
||
{editMode && (
|
||
<label className="aspect-square bg-white rounded-lg flex flex-col items-center justify-center border border-dashed border-indigo-200 cursor-pointer hover:bg-indigo-50">
|
||
<Image className="w-8 h-8 text-indigo-400" />
|
||
<span className="text-xs text-indigo-500 mt-1">+ Add</span>
|
||
<input type="file" className="hidden" accept="image/*" />
|
||
</label>
|
||
)}
|
||
{(editMode ? editForm.images : record.images)?.length === 0 && !editMode && (
|
||
<p className="text-sm text-indigo-400 col-span-4 text-center py-4">No images</p>
|
||
)}
|
||
</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 ({(editMode ? editForm.notes : record.notes)?.length})
|
||
</h3>
|
||
{editMode && (
|
||
<div className="flex gap-2 mb-3">
|
||
<input
|
||
type="text"
|
||
id="newNoteInput"
|
||
placeholder="Add a note..."
|
||
className="flex-1 px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
||
onKeyPress={(e) => {
|
||
if (e.key === 'Enter') {
|
||
const input = e.currentTarget as HTMLInputElement;
|
||
if (input.value.trim()) {
|
||
setEditForm({ ...editForm, notes: [...(editForm.notes || []), input.value.trim()] });
|
||
input.value = '';
|
||
}
|
||
}
|
||
}}
|
||
/>
|
||
<button
|
||
onClick={() => {
|
||
const input = document.getElementById('newNoteInput') as HTMLInputElement;
|
||
if (input?.value.trim()) {
|
||
setEditForm({ ...editForm, notes: [...(editForm.notes || []), input.value.trim()] });
|
||
input.value = '';
|
||
}
|
||
}}
|
||
className="px-4 py-2 bg-accent text-white rounded-lg text-sm"
|
||
>
|
||
Add
|
||
</button>
|
||
</div>
|
||
)}
|
||
<div className="space-y-2">
|
||
{(editMode ? editForm.notes : record.notes)?.map((note, idx) => (
|
||
<div key={idx} className="text-sm text-slate-600 p-2 bg-white rounded-lg">
|
||
• {note}
|
||
</div>
|
||
))}
|
||
{(editMode ? editForm.notes : record.notes)?.length === 0 && (
|
||
<p className="text-sm text-slate-400">No notes yet</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{showCompleteModal && (
|
||
<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">
|
||
<h3 className="font-semibold text-slate-800">Complete Maintenance</h3>
|
||
</div>
|
||
<div className="p-4 space-y-4">
|
||
<div className="bg-green-50 p-4 rounded-lg">
|
||
<p className="text-sm text-green-700">Enter actual cost to complete this record</p>
|
||
</div>
|
||
<div>
|
||
<label className="text-sm font-medium text-slate-600 mb-2 block">Actual Cost (৳)</label>
|
||
<input
|
||
type="number"
|
||
value={actualCost}
|
||
onChange={(e) => setActualCost(e.target.value)}
|
||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-lg font-bold"
|
||
/>
|
||
</div>
|
||
<div className="text-sm text-slate-500">
|
||
Estimated: ৳{record.estimatedCost}
|
||
</div>
|
||
</div>
|
||
<div className="p-4 border-t border-slate-100 flex justify-end gap-2">
|
||
<button onClick={() => setShowCompleteModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg">Cancel</button>
|
||
<button
|
||
onClick={handleComplete}
|
||
className="px-4 py-2 bg-green-600 text-white rounded-lg flex items-center gap-2"
|
||
>
|
||
<Check className="w-4 h-4" /> Mark Complete
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{showPaymentModal && record && (
|
||
<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">
|
||
<div className="p-4 border-b border-slate-100">
|
||
<h3 className="font-semibold text-slate-800">Process Payment - {record.id}</h3>
|
||
<p className="text-sm text-slate-500">Amount: ৳{record.actualCost || record.estimatedCost}</p>
|
||
</div>
|
||
<div className="p-4 space-y-4">
|
||
<p className="text-sm text-slate-600 mb-2">Select payment method:</p>
|
||
<button
|
||
onClick={() => handlePayment('bank')}
|
||
className="w-full p-4 border-2 border-slate-200 rounded-lg hover:border-blue-500 hover:bg-blue-50 transition-colors"
|
||
>
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center">
|
||
<Building className="w-5 h-5 text-blue-600" />
|
||
</div>
|
||
<div className="text-left">
|
||
<p className="font-medium text-slate-800">Bank Transfer</p>
|
||
<p className="text-xs text-slate-500">Debit Bank (1200) → Credit Maintenance (5400)</p>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
<button
|
||
onClick={() => handlePayment('cash')}
|
||
className="w-full p-4 border-2 border-slate-200 rounded-lg hover:border-green-500 hover:bg-green-50 transition-colors"
|
||
>
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center">
|
||
<Wallet className="w-5 h-5 text-green-600" />
|
||
</div>
|
||
<div className="text-left">
|
||
<p className="font-medium text-slate-800">Cash</p>
|
||
<p className="text-xs text-slate-500">Debit Cash (1100) → Credit Maintenance (5400)</p>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
<button
|
||
onClick={() => handlePayment('biker')}
|
||
className="w-full p-4 border-2 border-slate-200 rounded-lg hover:border-purple-500 hover:bg-purple-50 transition-colors"
|
||
>
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-10 h-10 rounded-lg bg-purple-100 flex items-center justify-center">
|
||
<User className="w-5 h-5 text-purple-600" />
|
||
</div>
|
||
<div className="text-left">
|
||
<p className="font-medium text-slate-800">Biker Wallet</p>
|
||
<p className="text-xs text-slate-500">Deduct from rider wallet</p>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
</div>
|
||
<div className="p-4 border-t border-slate-100 flex justify-end">
|
||
<button onClick={() => setShowPaymentModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg">Cancel</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{showInvoiceModal && record && (
|
||
<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">
|
||
<div className="p-4 border-b border-slate-100 flex items-center justify-between">
|
||
<h3 className="font-semibold text-slate-800">Invoice Generated!</h3>
|
||
</div>
|
||
<div className="p-6 text-center">
|
||
<div className="w-20 h-20 mx-auto mb-4 rounded-full bg-green-100 flex items-center justify-center">
|
||
<CheckCircle className="w-10 h-10 text-green-600" />
|
||
</div>
|
||
<p className="text-lg font-semibold text-slate-800 mb-2">Payment Complete</p>
|
||
<p className="text-slate-600 mb-4">Invoice INV-{record.id} is ready</p>
|
||
|
||
<div className="bg-slate-50 p-4 rounded-lg text-left mb-4">
|
||
<div className="flex justify-between mb-2">
|
||
<span className="text-sm text-slate-500">Maintenance ID</span>
|
||
<span className="text-sm font-medium">{record.id}</span>
|
||
</div>
|
||
<div className="flex justify-between mb-2">
|
||
<span className="text-sm text-slate-500">Bike</span>
|
||
<span className="text-sm font-medium">{record.bikePlate}</span>
|
||
</div>
|
||
<div className="flex justify-between mb-2">
|
||
<span className="text-sm text-slate-500">Amount Paid</span>
|
||
<span className="text-sm font-bold text-green-600">৳{record.actualCost || record.estimatedCost}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-center mb-4">
|
||
<div className="w-24 h-24 bg-white border-2 border-slate-200 rounded-lg flex items-center justify-center">
|
||
<QrCode className="w-16 h-16 text-slate-400" />
|
||
</div>
|
||
</div>
|
||
<p className="text-xs text-slate-400">Scan QR for verification</p>
|
||
</div>
|
||
<div className="p-4 border-t border-slate-100 flex justify-between">
|
||
<button
|
||
onClick={() => setShowInvoiceModal(false)}
|
||
className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg"
|
||
>
|
||
Close
|
||
</button>
|
||
<button
|
||
onClick={handleGenerateInvoice}
|
||
className="px-4 py-2 bg-purple-600 text-white rounded-lg flex items-center gap-2"
|
||
>
|
||
<Printer className="w-4 h-4" /> Download PDF
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{showAddNoteModal && (
|
||
<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">
|
||
<h3 className="font-semibold text-slate-800">Add Note</h3>
|
||
</div>
|
||
<div className="p-4">
|
||
<textarea
|
||
value={newNoteText}
|
||
onChange={(e) => setNewNoteText(e.target.value)}
|
||
className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
|
||
rows={4}
|
||
placeholder="Enter note..."
|
||
/>
|
||
</div>
|
||
<div className="p-4 border-t border-slate-100 flex justify-end gap-2">
|
||
<button onClick={() => setShowAddNoteModal(false)} className="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg">Cancel</button>
|
||
<button
|
||
onClick={handleAddNote}
|
||
disabled={!newNoteText.trim()}
|
||
className="px-4 py-2 bg-accent text-white rounded-lg disabled:opacity-50"
|
||
>
|
||
Save Note
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
} |