Initial commit: Refactor AgvAutoRunControls

components/BmsPanel.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { BatteryCharging, Zap, Thermometer, Sliders } from 'lucide-react';
+import { AgvState } from '../types';
+
+interface BmsPanelProps {
+  state: AgvState;
+  setBatteryLevel: (level: number) => void;
+}
+
+const BmsPanel: React.FC<BmsPanelProps> = ({ state, setBatteryLevel }) => {
+  const currentCapacity = (state.maxCapacity * (state.batteryLevel / 100)).toFixed(1);
+
+  return (
+    <div className="bg-gray-800 p-4 border-t border-gray-700 h-auto select-none">
+       <h3 className="text-sm font-semibold mb-3 text-gray-300 flex items-center justify-between">
+           <span className="flex items-center gap-2"><BatteryCharging size={16} /> BMS Monitor</span>
+           <span className="text-xs font-mono text-gray-500">ID: 01</span>
+       </h3>
+       
+       {/* Main Info Grid */}
+       <div className="grid grid-cols-2 gap-2 mb-3">
+           <div className="bg-gray-700/50 p-2 rounded border border-gray-600">
+               <div className="text-[10px] text-gray-400 uppercase tracking-wider">Total Voltage</div>
+               <div className="text-lg font-mono text-white font-bold flex items-baseline gap-1">
+                   {(state.cellVoltages.reduce((a,b)=>a+b, 0)).toFixed(1)} <span className="text-xs text-gray-400">V</span>
+               </div>
+           </div>
+           <div className="bg-gray-700/50 p-2 rounded border border-gray-600">
+               <div className="text-[10px] text-gray-400 flex items-center gap-1 uppercase tracking-wider">
+                   <Thermometer size={10} /> Temp
+               </div>
+               <div className="text-lg font-mono text-white font-bold flex items-baseline gap-1">
+                   {state.batteryTemp.toFixed(1)} <span className="text-xs text-gray-400">°C</span>
+               </div>
+           </div>
+           
+           <div className="bg-gray-700/50 p-2 rounded border border-gray-600">
+               <div className="text-[10px] text-gray-400 uppercase tracking-wider">Capacity (Ah)</div>
+               <div className="text-sm font-mono text-white">
+                   <span className="text-yellow-400 font-bold">{currentCapacity}</span>
+                   <span className="text-gray-500"> / </span>
+                   {state.maxCapacity}
+               </div>
+           </div>
+           <div className="bg-gray-700/50 p-2 rounded border border-gray-600">
+                <div className="text-[10px] text-gray-400 uppercase tracking-wider">Level (%)</div>
+                <div className={`text-sm font-mono font-bold ${state.batteryLevel < 20 ? 'text-red-400' : 'text-green-400'}`}>
+                    {state.batteryLevel.toFixed(1)}%
+                </div>
+           </div>
+       </div>
+
+       {/* Manual Slider */}
+       <div className="mb-4">
+           <div className="flex justify-between text-xs text-gray-400 mb-1">
+               <span className="flex items-center gap-1"><Sliders size={10}/> Manual Adjust</span>
+           </div>
+           <input 
+                type="range" 
+                min="0" 
+                max="100" 
+                step="1"
+                value={state.batteryLevel} 
+                onChange={(e) => setBatteryLevel(Number(e.target.value))}
+                className="w-full h-1.5 bg-gray-600 rounded-lg appearance-none cursor-pointer accent-green-500 hover:accent-green-400"
+            />
+       </div>
+
+       {/* Cells */}
+       <div className="space-y-1">
+           <div className="text-[10px] text-gray-500 uppercase tracking-wider mb-1">Cell Voltages (V)</div>
+           <div className="grid grid-cols-4 gap-1">
+               {state.cellVoltages.map((v, i) => (
+                   <div key={i} className={`py-1 px-0.5 text-center rounded text-[10px] font-mono border ${
+                       v < 2.9 ? 'bg-red-900/30 border-red-800 text-red-300' : 
+                       v > 3.5 ? 'bg-blue-900/30 border-blue-800 text-blue-300' :
+                       'bg-gray-700/30 border-gray-600 text-gray-300'
+                   }`}>
+                       {v.toFixed(3)}
+                   </div>
+               ))}
+           </div>
+       </div>
+    </div>
+  );
+};
+
+export default BmsPanel;