Fix hydration error by handling time display on client-side and add stop-loss/take-profit to trading system

components/AutoTradingPanel.tsx

@@ -1,9 +1,22 @@
 "use client"
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 
 export default function AutoTradingPanel() {
   const [status, setStatus] = useState<'idle'|'running'|'stopped'>('idle')
   const [message, setMessage] = useState<string>('')
+  const [currentTime, setCurrentTime] = useState<string>('')
+
+  // Set current time only on client to avoid hydration mismatch
+  useEffect(() => {
+    const updateTime = () => {
+      setCurrentTime(new Date().toLocaleTimeString())
+    }
+    
+    updateTime() // Set initial time
+    const interval = setInterval(updateTime, 1000) // Update every second
+    
+    return () => clearInterval(interval)
+  }, [])
 
   async function handleAction(action: 'start'|'stop') {
     setMessage('')
@@ -63,7 +76,7 @@ export default function AutoTradingPanel() {
           </div>
           <div className="text-right">
             <div className="text-xs text-gray-400">Last Updated</div>
-            <div className="text-sm text-gray-300">{new Date().toLocaleTimeString()}</div>
+            <div className="text-sm text-gray-300">{currentTime || '--:--:--'}</div>
           </div>
         </div>