feat: add damage and maintenance history tracking with CRUD functionality to battery detail page

src/app/admin/batteries/[id]/page.tsx

@@ -5,7 +5,7 @@ import Link from 'next/link';
 import {
   Battery, ArrowLeft, X, BatteryCharging, Activity, Gauge, MapPin, Bike, User, History,
   Calendar, DollarSign, CheckCircle, Clock, ArrowRightLeft, Handshake, TrendingUp, Edit,
-  RefreshCw
+  RefreshCw, AlertTriangle, Wrench, Plus, Trash2
 } from 'lucide-react';
 
 interface BMSData {
@@ -43,6 +43,28 @@ interface OwnershipLog {
   timestamp: string;
 }
 
+interface DamageRecord {
+  id: string;
+  date: string;
+  type: string;
+  description: string;
+  reportedBy: string;
+  estimatedCost: number;
+  actualCost?: number;
+  status: 'reported' | 'in-progress' | 'resolved';
+}
+
+interface MaintenanceRecord {
+  id: string;
+  date: string;
+  type: 'routine' | 'repair' | 'replacement' | 'inspection';
+  description: string;
+  cost: number;
+  performedBy: string;
+  nextDueDate?: string;
+  status: 'completed' | 'pending' | 'overdue';
+}
+
 interface Battery {
   id: string;
   serialNumber: string;
@@ -73,6 +95,8 @@ interface Battery {
   bmsData?: BMSData;
   monthlyRent?: number;
   ownershipLogs: OwnershipLog[];
+  damageHistory?: DamageRecord[];
+  maintenanceHistory?: MaintenanceRecord[];
 }
 
 const mockBattery: Battery = {
@@ -106,7 +130,16 @@ const mockBattery: Battery = {
     { id: 'OL-001', batteryId: 'BAT-001', fromOwner: 'JAIBEN Hub', fromOwnerType: 'hub', toOwner: 'Rahim Ahmed', toOwnerType: 'biker', toBikeId: 'EV001', toBikeModel: 'Etron ET50', toHubId: 'HUB-001', toHubName: 'JAIBEN Head Office', action: 'rented', rentAmount: 1500, timestamp: '2024-03-15 08:30:00' },
     { id: 'OL-002', batteryId: 'BAT-001', fromOwner: 'Rahim Ahmed', fromOwnerType: 'biker', toOwner: 'JAIBEN Hub', toOwnerType: 'hub', fromBikeId: 'EV001', fromBikeModel: 'Etron ET50', fromHubId: 'HUB-001', fromHubName: 'JAIBEN Head Office', action: 'returned', timestamp: '2024-03-28 18:00:00', notes: 'Returned for charging' },
     { id: 'OL-003', batteryId: 'BAT-001', fromOwner: 'JAIBEN Hub', fromOwnerType: 'hub', toOwner: 'Rahim Ahmed', toOwnerType: 'biker', toBikeId: 'EV001', toBikeModel: 'Etron ET50', toHubId: 'HUB-001', toHubName: 'JAIBEN Head Office', action: 'rented', rentAmount: 1500, timestamp: '2024-03-28 18:30:00' },
-  ]
+  ],
+  damageHistory: [
+    { id: 'DMG-001', date: '2024-02-15', type: 'Physical Damage', description: 'Battery casing cracked due to drop', reportedBy: 'Rahim Ahmed', estimatedCost: 5000, actualCost: 4500, status: 'resolved' },
+    { id: 'DMG-002', date: '2024-03-20', type: 'Connector Damage', description: 'Charging connector bent', reportedBy: 'Tech Staff', estimatedCost: 1500, status: 'in-progress' },
+  ],
+  maintenanceHistory: [
+    { id: 'MNT-001', date: '2024-01-20', type: 'routine', description: 'General inspection and cleaning', cost: 500, performedBy: 'Tech Team', nextDueDate: '2024-04-20', status: 'completed' },
+    { id: 'MNT-002', date: '2024-03-01', type: 'inspection', description: 'BMS calibration and cell balancing', cost: 800, performedBy: 'Engineer Team', nextDueDate: '2024-06-01', status: 'completed' },
+    { id: 'MNT-003', date: '2024-04-15', type: 'repair', description: 'Replaced faulty connector', cost: 1500, performedBy: 'Tech Team', status: 'pending' },
+  ],
 };
 
 const statusColors: Record<string, string> = {
@@ -126,10 +159,50 @@ const typeLabels: Record<string, string> = {
 export default function BatteryDetailPage({ params }: { params: Promise<{ id: string }> }) {
   const { id } = use(params);
   const [battery, setBattery] = useState<Battery>(mockBattery);
-  const [activeTab, setActiveTab] = useState<'info' | 'bms' | 'history' | 'rent'>('info');
+  const [activeTab, setActiveTab] = useState<'info' | 'bms' | 'history' | 'rent' | 'damage' | 'maintenance'>('info');
   const [showEditModal, setShowEditModal] = useState(false);
   const [refreshing, setRefreshing] = useState(false);
 
+  // Damage History State
+  const [showDamageModal, setShowDamageModal] = useState(false);
+  const [editingDamage, setEditingDamage] = useState<DamageRecord | null>(null);
+  const [damageForm, setDamageForm] = useState({
+    date: '',
+    type: '',
+    description: '',
+    reportedBy: '',
+    estimatedCost: 0,
+    actualCost: 0,
+    status: 'reported' as 'reported' | 'in-progress' | 'resolved',
+    hubId: '',
+    hubName: '',
+  });
+
+  // Maintenance State
+  const [showMaintenanceModal, setShowMaintenanceModal] = useState(false);
+  const [editingMaintenance, setEditingMaintenance] = useState<MaintenanceRecord | null>(null);
+  const [maintenanceForm, setMaintenanceForm] = useState({
+    date: '',
+    type: 'routine' as 'routine' | 'repair' | 'replacement' | 'inspection',
+    description: '',
+    cost: 0,
+    performedBy: '',
+    nextDueDate: '',
+    status: 'pending' as 'completed' | 'pending' | 'overdue',
+    hubId: '',
+    hubName: '',
+  });
+
+  const mockHubs = [
+    { id: 'HUB-001', name: 'Gulshan Hub' },
+    { id: 'HUB-002', name: 'Banani Hub' },
+    { id: 'HUB-003', name: 'Uttara Hub' },
+    { id: 'HUB-004', name: 'Mirpur Hub' },
+  ];
+
+  const damageTypes = ['Physical Damage', 'Connector Damage', 'Battery Cell Damage', 'Charging Port Damage', 'Water Damage', 'Software Issue', 'Other'];
+  const maintenanceTypes = ['routine', 'repair', 'replacement', 'inspection'] as const;
+
   const handleSaveEdit = (updatedBattery: Battery) => {
     setBattery(updatedBattery);
     setShowEditModal(false);
@@ -159,6 +232,160 @@ export default function BatteryDetailPage({ params }: { params: Promise<{ id: st
     }, 1000);
   };
 
+  // Damage CRUD Handlers
+  const handleAddDamage = () => {
+    const newDamage: DamageRecord = {
+      id: `DMG-${Date.now()}`,
+      ...damageForm,
+      estimatedCost: Number(damageForm.estimatedCost),
+      actualCost: damageForm.actualCost ? Number(damageForm.actualCost) : undefined,
+    };
+    setBattery(prev => ({
+      ...prev,
+      damageHistory: [...(prev.damageHistory || []), newDamage]
+    }));
+    setShowDamageModal(false);
+    resetDamageForm();
+  };
+
+  const handleUpdateDamage = () => {
+    if (!editingDamage) return;
+    const updatedDamage: DamageRecord = {
+      ...editingDamage,
+      ...damageForm,
+      estimatedCost: Number(damageForm.estimatedCost),
+      actualCost: damageForm.actualCost ? Number(damageForm.actualCost) : undefined,
+    };
+    setBattery(prev => ({
+      ...prev,
+      damageHistory: prev.damageHistory?.map(d => d.id === editingDamage.id ? updatedDamage : d) || []
+    }));
+    setShowDamageModal(false);
+    setEditingDamage(null);
+    resetDamageForm();
+  };
+
+  const handleDeleteDamage = (damageId: string) => {
+    setBattery(prev => ({
+      ...prev,
+      damageHistory: prev.damageHistory?.filter(d => d.id !== damageId) || []
+    }));
+  };
+
+  const resetDamageForm = () => {
+    setDamageForm({
+      date: '',
+      type: '',
+      description: '',
+      reportedBy: '',
+      estimatedCost: 0,
+      actualCost: 0,
+      status: 'reported',
+      hubId: '',
+      hubName: '',
+    });
+  };
+
+  const openAddDamageModal = () => {
+    resetDamageForm();
+    setDamageForm(prev => ({ ...prev, date: new Date().toISOString().split('T')[0] }));
+    setEditingDamage(null);
+    setShowDamageModal(true);
+  };
+
+  const openEditDamageModal = (damage: DamageRecord) => {
+    setDamageForm({
+      date: damage.date,
+      type: damage.type,
+      description: damage.description,
+      reportedBy: damage.reportedBy,
+      estimatedCost: damage.estimatedCost,
+      actualCost: damage.actualCost || 0,
+      status: damage.status,
+      hubId: '',
+      hubName: '',
+    });
+    setEditingDamage(damage);
+    setShowDamageModal(true);
+  };
+
+  // Maintenance CRUD Handlers
+  const handleAddMaintenance = () => {
+    const newMaintenance: MaintenanceRecord = {
+      id: `MNT-${Date.now()}`,
+      ...maintenanceForm,
+      cost: Number(maintenanceForm.cost),
+      nextDueDate: maintenanceForm.nextDueDate || undefined,
+    };
+    setBattery(prev => ({
+      ...prev,
+      maintenanceHistory: [...(prev.maintenanceHistory || []), newMaintenance]
+    }));
+    setShowMaintenanceModal(false);
+    resetMaintenanceForm();
+  };
+
+  const handleUpdateMaintenance = () => {
+    if (!editingMaintenance) return;
+    const updatedMaintenance: MaintenanceRecord = {
+      ...editingMaintenance,
+      ...maintenanceForm,
+      cost: Number(maintenanceForm.cost),
+      nextDueDate: maintenanceForm.nextDueDate || undefined,
+    };
+    setBattery(prev => ({
+      ...prev,
+      maintenanceHistory: prev.maintenanceHistory?.map(m => m.id === editingMaintenance.id ? updatedMaintenance : m) || []
+    }));
+    setShowMaintenanceModal(false);
+    setEditingMaintenance(null);
+    resetMaintenanceForm();
+  };
+
+  const handleDeleteMaintenance = (maintenanceId: string) => {
+    setBattery(prev => ({
+      ...prev,
+      maintenanceHistory: prev.maintenanceHistory?.filter(m => m.id !== maintenanceId) || []
+    }));
+  };
+
+  const resetMaintenanceForm = () => {
+    setMaintenanceForm({
+      date: '',
+      type: 'routine',
+      description: '',
+      cost: 0,
+      performedBy: '',
+      nextDueDate: '',
+      status: 'pending',
+      hubId: '',
+      hubName: '',
+    });
+  };
+
+  const openAddMaintenanceModal = () => {
+    resetMaintenanceForm();
+    setMaintenanceForm(prev => ({ ...prev, date: new Date().toISOString().split('T')[0] }));
+    setEditingMaintenance(null);
+    setShowMaintenanceModal(true);
+  };
+
+  const openEditMaintenanceModal = (maintenance: MaintenanceRecord) => {
+    setMaintenanceForm({
+      date: maintenance.date,
+      type: maintenance.type,
+      description: maintenance.description,
+      cost: maintenance.cost,
+      performedBy: maintenance.performedBy,
+      nextDueDate: maintenance.nextDueDate || '',
+      status: maintenance.status,
+      hubId: '',
+      hubName: '',
+    });
+    setEditingMaintenance(maintenance);
+    setShowMaintenanceModal(true);
+  };
+
   return (
     <div className="p-4 lg:p-6">
       <div className="flex items-center gap-4 mb-6">
@@ -261,11 +488,13 @@ export default function BatteryDetailPage({ params }: { params: Promise<{ id: st
         )}
 
         <div className="border-b border-slate-100">
-          <div className="flex gap-1 p-1">
+          <div className="flex gap-1 p-1 overflow-x-auto">
-            <button onClick={() => setActiveTab('info')} className={`px-4 py-2 rounded-lg text-sm font-medium ${activeTab === 'info' ? 'bg-accent text-white' : 'text-slate-600 hover:bg-slate-50'}`}>Info</button>
+            <button onClick={() => setActiveTab('info')} className={`px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap ${activeTab === 'info' ? 'bg-accent text-white' : 'text-slate-600 hover:bg-slate-50'}`}>Info</button>
-            <button onClick={() => setActiveTab('bms')} className={`px-4 py-2 rounded-lg text-sm font-medium ${activeTab === 'bms' ? 'bg-accent text-white' : 'text-slate-600 hover:bg-slate-50'}`}>BMS</button>
+            <button onClick={() => setActiveTab('bms')} className={`px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap ${activeTab === 'bms' ? 'bg-accent text-white' : 'text-slate-600 hover:bg-slate-50'}`}>BMS</button>
-            <button onClick={() => setActiveTab('history')} className={`px-4 py-2 rounded-lg text-sm font-medium ${activeTab === 'history' ? 'bg-accent text-white' : 'text-slate-600 hover:bg-slate-50'}`}>History</button>
+            <button onClick={() => setActiveTab('history')} className={`px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap ${activeTab === 'history' ? 'bg-accent text-white' : 'text-slate-600 hover:bg-slate-50'}`}>History</button>
-            <button onClick={() => setActiveTab('rent')} className={`px-4 py-2 rounded-lg text-sm font-medium ${activeTab === 'rent' ? 'bg-accent text-white' : 'text-slate-600 hover:bg-slate-50'}`}>Rent</button>
+            <button onClick={() => setActiveTab('rent')} className={`px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap ${activeTab === 'rent' ? 'bg-accent text-white' : 'text-slate-600 hover:bg-slate-50'}`}>Rent</button>
+            <button onClick={() => setActiveTab('damage')} className={`px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap ${activeTab === 'damage' ? 'bg-accent text-white' : 'text-slate-600 hover:bg-slate-50'}`}>Damage History</button>
+            <button onClick={() => setActiveTab('maintenance')} className={`px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap ${activeTab === 'maintenance' ? 'bg-accent text-white' : 'text-slate-600 hover:bg-slate-50'}`}>Maintenance</button>
           </div>
         </div>
 
@@ -435,9 +664,280 @@ export default function BatteryDetailPage({ params }: { params: Promise<{ id: st
               )}
             </div>
           )}
+
+          {activeTab === 'damage' && (
+            <div className="space-y-4">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <AlertTriangle className="w-5 h-5 text-red-500" />
+                  <h4 className="font-medium text-slate-700">Damage History</h4>
+                </div>
+                <button onClick={openAddDamageModal} 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>
+              {(battery.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">Hub</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">
+                      {battery.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 text-sm text-slate-700">{damage.type}</td>
+                          <td className="px-4 py-3 text-sm text-slate-600">{damage.description}</td>
+                          <td className="px-4 py-3 text-sm text-slate-600">{damageForm.hubName || '-'}</td>
+                          <td className="px-4 py-3 text-sm font-medium text-amber-600">৳{damage.estimatedCost.toLocaleString()}</td>
+                          <td className="px-4 py-3 text-sm font-medium text-green-600">{damage.actualCost ? `৳${damage.actualCost.toLocaleString()}` : '-'}</td>
+                          <td className="px-4 py-3">
+                            <span className={`text-xs font-medium px-2 py-1 rounded-full ${damage.status === 'resolved' ? 'bg-green-100 text-green-700' : damage.status === 'in-progress' ? 'bg-amber-100 text-amber-700' : 'bg-red-100 text-red-700'}`}>
+                              {damage.status === 'resolved' ? 'Resolved' : damage.status === 'in-progress' ? 'In Progress' : 'Reported'}
+                            </span>
+                          </td>
+                          <td className="px-4 py-3">
+                            <div className="flex items-center gap-1">
+                              <button onClick={() => openEditDamageModal(damage)} className="p-1.5 hover:bg-blue-100 rounded-lg">
+                                <Edit className="w-4 h-4 text-blue-500" />
+                              </button>
+                              <button onClick={() => handleDeleteDamage(damage.id)} className="p-1.5 hover:bg-red-100 rounded-lg">
+                                <Trash2 className="w-4 h-4 text-red-500" />
+                              </button>
+                            </div>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              ) : (
+                <div className="bg-slate-50 rounded-lg p-5 text-center text-slate-500">
+                  No damage history found.
+                </div>
+              )}
+            </div>
+          )}
+
+          {activeTab === 'maintenance' && (
+            <div className="space-y-4">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <Wrench className="w-5 h-5 text-blue-500" />
+                  <h4 className="font-medium text-slate-700">Maintenance History</h4>
+                </div>
+                <button onClick={openAddMaintenanceModal} 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>
+              {(battery.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">Hub</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">Performed By</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">
+                      {battery.maintenanceHistory?.map(maint => (
+                        <tr key={maint.id} className="hover:bg-slate-50">
+                          <td className="px-4 py-3 text-sm text-slate-600">{maint.date}</td>
+                          <td className="px-4 py-3 text-sm text-slate-700 capitalize">{maint.type}</td>
+                          <td className="px-4 py-3 text-sm text-slate-600">{maint.description}</td>
+                          <td className="px-4 py-3 text-sm text-slate-600">{maintenanceForm.hubName || '-'}</td>
+                          <td className="px-4 py-3 text-sm font-medium text-green-600">৳{maint.cost.toLocaleString()}</td>
+                          <td className="px-4 py-3 text-sm text-slate-600">{maint.performedBy}</td>
+                          <td className="px-4 py-3 text-sm text-slate-600">{maint.nextDueDate || '-'}</td>
+                          <td className="px-4 py-3">
+                            <span className={`text-xs font-medium px-2 py-1 rounded-full ${maint.status === 'completed' ? 'bg-green-100 text-green-700' : maint.status === 'pending' ? 'bg-amber-100 text-amber-700' : 'bg-red-100 text-red-700'}`}>
+                              {maint.status === 'completed' ? 'Completed' : maint.status === 'pending' ? 'Pending' : 'Overdue'}
+                            </span>
+                          </td>
+                          <td className="px-4 py-3">
+                            <div className="flex items-center gap-1">
+                              <button onClick={() => openEditMaintenanceModal(maint)} className="p-1.5 hover:bg-blue-100 rounded-lg">
+                                <Edit className="w-4 h-4 text-blue-500" />
+                              </button>
+                              <button onClick={() => handleDeleteMaintenance(maint.id)} className="p-1.5 hover:bg-red-100 rounded-lg">
+                                <Trash2 className="w-4 h-4 text-red-500" />
+                              </button>
+                            </div>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              ) : (
+                <div className="bg-slate-50 rounded-lg p-5 text-center text-slate-500">
+                  No maintenance history found.
+                </div>
+              )}
+            </div>
+          )}
         </div>
       </div>
 
+      {/* Damage Modal */}
+      {showDamageModal && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-xl shadow-xl w-full max-w-lg max-h-[90vh] overflow-y-auto">
+            <div className="p-4 border-b border-slate-100 flex justify-between items-center">
+              <h3 className="font-semibold text-slate-800">{editingDamage ? 'Edit Damage' : 'Add Damage'}</h3>
+              <button onClick={() => { setShowDamageModal(false); setEditingDamage(null); }} className="text-slate-400 hover:text-slate-600">
+                <X className="w-5 h-5" />
+              </button>
+            </div>
+            <div className="p-4 space-y-4">
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="text-sm font-medium text-slate-600 mb-1 block">Date</label>
+                  <input type="date" value={damageForm.date} onChange={(e) => setDamageForm({ ...damageForm, date: 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">Type</label>
+                  <select value={damageForm.type} onChange={(e) => setDamageForm({ ...damageForm, type: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm">
+                    <option value="">Select Type</option>
+                    {damageTypes.map(type => (
+                      <option key={type} value={type}>{type}</option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+              <div>
+                <label className="text-sm font-medium text-slate-600 mb-1 block">Description</label>
+                <textarea value={damageForm.description} onChange={(e) => setDamageForm({ ...damageForm, description: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" rows={2} />
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="text-sm font-medium text-slate-600 mb-1 block">Reported By</label>
+                  <input type="text" value={damageForm.reportedBy} onChange={(e) => setDamageForm({ ...damageForm, reportedBy: 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">Hub</label>
+                  <select value={damageForm.hubId} onChange={(e) => setDamageForm({ ...damageForm, hubId: e.target.value, hubName: mockHubs.find(h => h.id === e.target.value)?.name || '' })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm">
+                    <option value="">Select Hub</option>
+                    {mockHubs.map(hub => (
+                      <option key={hub.id} value={hub.id}>{hub.name}</option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="text-sm font-medium text-slate-600 mb-1 block">Estimated Cost (৳)</label>
+                  <input type="number" value={damageForm.estimatedCost} onChange={(e) => setDamageForm({ ...damageForm, estimatedCost: 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={damageForm.actualCost} onChange={(e) => setDamageForm({ ...damageForm, 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={damageForm.status} onChange={(e) => setDamageForm({ ...damageForm, status: e.target.value as any })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm">
+                  <option value="reported">Reported</option>
+                  <option value="in-progress">In Progress</option>
+                  <option value="resolved">Resolved</option>
+                </select>
+              </div>
+              <div className="flex gap-2 pt-4">
+                <button onClick={() => { setShowDamageModal(false); setEditingDamage(null); }} className="flex-1 py-2 px-4 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50">Cancel</button>
+                <button onClick={editingDamage ? handleUpdateDamage : handleAddDamage} className="flex-1 py-2 px-4 bg-accent text-white rounded-lg text-sm hover:bg-accent-dark">{editingDamage ? 'Update' : 'Add'}</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Maintenance Modal */}
+      {showMaintenanceModal && (
+        <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-y-auto">
+            <div className="p-4 border-b border-slate-100 flex justify-between items-center">
+              <h3 className="font-semibold text-slate-800">{editingMaintenance ? 'Edit Maintenance' : 'Add Maintenance'}</h3>
+              <button onClick={() => { setShowMaintenanceModal(false); setEditingMaintenance(null); }} className="text-slate-400 hover:text-slate-600">
+                <X className="w-5 h-5" />
+              </button>
+            </div>
+            <div className="p-4 space-y-4">
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="text-sm font-medium text-slate-600 mb-1 block">Date</label>
+                  <input type="date" value={maintenanceForm.date} onChange={(e) => setMaintenanceForm({ ...maintenanceForm, date: 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">Type</label>
+                  <select value={maintenanceForm.type} onChange={(e) => setMaintenanceForm({ ...maintenanceForm, type: e.target.value as any })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm">
+                    {maintenanceTypes.map(type => (
+                      <option key={type} value={type}>{type.charAt(0).toUpperCase() + type.slice(1)}</option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+              <div>
+                <label className="text-sm font-medium text-slate-600 mb-1 block">Description</label>
+                <textarea value={maintenanceForm.description} onChange={(e) => setMaintenanceForm({ ...maintenanceForm, description: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" rows={2} />
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="text-sm font-medium text-slate-600 mb-1 block">Hub</label>
+                  <select value={maintenanceForm.hubId} onChange={(e) => setMaintenanceForm({ ...maintenanceForm, hubId: e.target.value, hubName: mockHubs.find(h => h.id === e.target.value)?.name || '' })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm">
+                    <option value="">Select Hub</option>
+                    {mockHubs.map(hub => (
+                      <option key={hub.id} value={hub.id}>{hub.name}</option>
+                    ))}
+                  </select>
+                </div>
+                <div>
+                  <label className="text-sm font-medium text-slate-600 mb-1 block">Cost (৳)</label>
+                  <input type="number" value={maintenanceForm.cost} onChange={(e) => setMaintenanceForm({ ...maintenanceForm, cost: 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">Performed By</label>
+                <input type="text" value={maintenanceForm.performedBy} onChange={(e) => setMaintenanceForm({ ...maintenanceForm, performedBy: e.target.value })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm" />
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="text-sm font-medium text-slate-600 mb-1 block">Next Due Date</label>
+                  <input type="date" value={maintenanceForm.nextDueDate} onChange={(e) => setMaintenanceForm({ ...maintenanceForm, nextDueDate: 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">Status</label>
+                  <select value={maintenanceForm.status} onChange={(e) => setMaintenanceForm({ ...maintenanceForm, status: e.target.value as any })} className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm">
+                    <option value="completed">Completed</option>
+                    <option value="pending">Pending</option>
+                    <option value="overdue">Overdue</option>
+                  </select>
+                </div>
+              </div>
+              <div className="flex gap-2 pt-4">
+                <button onClick={() => { setShowMaintenanceModal(false); setEditingMaintenance(null); }} className="flex-1 py-2 px-4 border border-slate-200 text-slate-600 rounded-lg text-sm hover:bg-slate-50">Cancel</button>
+                <button onClick={editingMaintenance ? handleUpdateMaintenance : handleAddMaintenance} className="flex-1 py-2 px-4 bg-accent text-white rounded-lg text-sm hover:bg-accent-dark">{editingMaintenance ? 'Update' : 'Add'}</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
       {battery.status === 'in-use' && (
         <div className="bg-blue-50 rounded-xl border border-blue-200 p-5 mb-6">
           <div className="flex items-center gap-3 mb-4">