feat: implement battery editing functionality with modal and state management

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

@@ -4,7 +4,7 @@ import { useState, use } from 'react';
 import Link from 'next/link';
 import {
   Battery, ArrowLeft, X, BatteryCharging, Activity, Gauge, MapPin, Bike, User, History,
-  Calendar, DollarSign, CheckCircle, Clock, ArrowRightLeft, Handshake, TrendingUp
+  Calendar, DollarSign, CheckCircle, Clock, ArrowRightLeft, Handshake, TrendingUp, Edit, RefreshCw
 } from 'lucide-react';
 
 interface BMSData {
@@ -124,8 +124,37 @@ const typeLabels: Record<string, string> = {
 
 export default function BatteryDetailPage({ params }: { params: Promise<{ id: string }> }) {
   const { id } = use(params);
-  const battery = mockBattery;
+  const [battery, setBattery] = useState<Battery>(mockBattery);
   const [activeTab, setActiveTab] = useState<'info' | 'bms' | 'history' | 'rent'>('info');
+  const [showEditModal, setShowEditModal] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
+
+  const handleSaveEdit = (updatedBattery: Battery) => {
+    setBattery(updatedBattery);
+    setShowEditModal(false);
+  };
+
+  const handleRefreshBMS = () => {
+    setRefreshing(true);
+    setTimeout(() => {
+      setBattery({
+        ...battery,
+        bmsData: {
+          ...battery.bmsData!,
+          voltage: Math.round((60 + Math.random() * 10) * 10) / 10,
+          current: Math.round((-3 + Math.random() * 4) * 10) / 10,
+          soc: Math.floor(Math.random() * 40) + 60,
+          temperature: 25 + Math.floor(Math.random() * 15),
+          cycles: battery.bmsData!.cycles + 1,
+          health: Math.max(70, Math.min(100, battery.bmsData!.health + (Math.random() > 0.7 ? 1 : 0))),
+          timestamp: new Date().toISOString().replace('T', ' ').substring(0, 19)
+        },
+        currentSoc: Math.floor(Math.random() * 40) + 60,
+        health: Math.max(70, Math.min(100, battery.health + (Math.random() > 0.7 ? 1 : 0)))
+      });
+      setRefreshing(false);
+    }, 1000);
+  };
 
   return (
     <div className="p-4 lg:p-6">
@@ -137,6 +166,12 @@ export default function BatteryDetailPage({ params }: { params: Promise<{ id: st
           <h1 className="text-2xl lg:text-3xl font-extrabold text-slate-800">Battery Details</h1>
           <p className="text-sm text-slate-500">ID: {battery.id}</p>
         </div>
+        <button
+          onClick={() => setShowEditModal(true)}
+          className="py-2 px-4 bg-accent text-white rounded-lg font-semibold text-sm hover:bg-accent-dark flex items-center gap-2"
+        >
+          <Edit className="w-4 h-4" /> Edit
+        </button>
       </div>
 
 
@@ -426,6 +461,174 @@ export default function BatteryDetailPage({ params }: { params: Promise<{ id: st
           </div>
         </div>
       )}
+
+      {showEditModal && (
+        <EditBatteryModal
+          battery={battery}
+          onSave={handleSaveEdit}
+          onClose={() => setShowEditModal(false)}
+        />
+      )}
+    </div>
+  );
+}
+
+function EditBatteryModal({
+  battery,
+  onSave,
+  onClose
+}: {
+  battery: Battery;
+  onSave: (battery: Battery) => void;
+  onClose: () => void;
+}) {
+  const [formData, setFormData] = useState<Battery>({ ...battery });
+
+  const handleChange = (field: keyof Battery, value: any) => {
+    setFormData({ ...formData, [field]: value });
+  };
+
+  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-y-auto">
+        <div className="p-5 border-b border-slate-100 flex items-center justify-between sticky top-0 bg-white">
+          <h2 className="text-lg font-bold text-slate-800">Edit Battery</h2>
+          <button onClick={onClose} className="p-2 hover:bg-slate-100 rounded-lg">
+            <X className="w-5 h-5 text-slate-400" />
+          </button>
+        </div>
+        <div className="p-5 space-y-4">
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1">Brand</label>
+              <input
+                type="text"
+                value={formData.brand}
+                onChange={(e) => handleChange('brand', e.target.value)}
+                className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1">Model</label>
+              <input
+                type="text"
+                value={formData.model}
+                onChange={(e) => handleChange('model', e.target.value)}
+                className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1">Serial Number</label>
+              <input
+                type="text"
+                value={formData.serialNumber}
+                onChange={(e) => handleChange('serialNumber', e.target.value)}
+                className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1">Type</label>
+              <select
+                value={formData.type}
+                onChange={(e) => handleChange('type', e.target.value)}
+                className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+              >
+                <option value="lithium-ion">Lithium-Ion</option>
+                <option value="lifepo4">LiFePO4</option>
+                <option value="lead-acid">Lead Acid</option>
+              </select>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1">Capacity (Ah)</label>
+              <input
+                type="number"
+                value={formData.capacity}
+                onChange={(e) => handleChange('capacity', parseInt(e.target.value))}
+                className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1">Voltage (V)</label>
+              <input
+                type="number"
+                value={formData.voltage}
+                onChange={(e) => handleChange('voltage', parseInt(e.target.value))}
+                className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1">Purchase Date</label>
+              <input
+                type="date"
+                value={formData.purchaseDate}
+                onChange={(e) => handleChange('purchaseDate', e.target.value)}
+                className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1">Purchase Price (৳)</label>
+              <input
+                type="number"
+                value={formData.purchasePrice}
+                onChange={(e) => handleChange('purchasePrice', parseInt(e.target.value))}
+                className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1">Warranty Expiry</label>
+              <input
+                type="date"
+                value={formData.warrantyExpiry}
+                onChange={(e) => handleChange('warrantyExpiry', e.target.value)}
+                className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1">Monthly Rent (৳)</label>
+              <input
+                type="number"
+                value={formData.monthlyRent || 0}
+                onChange={(e) => handleChange('monthlyRent', parseInt(e.target.value))}
+                className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1">Status</label>
+              <select
+                value={formData.status}
+                onChange={(e) => handleChange('status', e.target.value)}
+                className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+              >
+                <option value="available">Available</option>
+                <option value="in-use">In Use</option>
+                <option value="charging">Charging</option>
+                <option value="maintenance">Maintenance</option>
+                <option value="retired">Retired</option>
+              </select>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-slate-700 mb-1">Current SOC (%)</label>
+              <input
+                type="number"
+                value={formData.currentSoc}
+                onChange={(e) => handleChange('currentSoc', parseInt(e.target.value))}
+                className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm"
+              />
+            </div>
+          </div>
+        </div>
+        <div className="p-5 border-t border-slate-100 flex gap-3 sticky bottom-0 bg-white">
+          <button onClick={onClose} className="flex-1 py-2.5 px-4 border border-slate-200 rounded-lg font-semibold text-sm hover:bg-slate-50">
+            Cancel
+          </button>
+          <button
+            onClick={() => onSave(formData)}
+            className="flex-1 py-2.5 px-4 bg-accent text-white rounded-lg font-semibold text-sm hover:bg-accent-dark"
+          >
+            Save Changes
+          </button>
+        </div>
+      </div>
     </div>
   );
 }