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>
         

components/TradingHistory.tsx

@@ -15,6 +15,16 @@ interface Trade {
 export default function TradingHistory() {
   const [trades, setTrades] = useState<Trade[]>([])
   const [loading, setLoading] = useState(true)
+  const [isClient, setIsClient] = useState(false)
+
+  useEffect(() => {
+    setIsClient(true)
+  }, [])
+
+  const formatTime = (dateString: string) => {
+    if (!isClient) return '--:--:--'
+    return new Date(dateString).toLocaleTimeString()
+  }
 
   useEffect(() => {
     async function fetchTrades() {
@@ -146,7 +156,7 @@ export default function TradingHistory() {
                       </span>
                     </td>
                     <td className="py-4 px-4 text-right text-xs text-gray-400">
-                      {new Date(trade.executedAt).toLocaleTimeString()}
+                      {formatTime(trade.executedAt)}
                     </td>
                   </tr>
                 ))}