Fix Tailwind CSS styling configuration

- Add tailwind.config.ts with proper content paths and theme config
- Add postcss.config.js for Tailwind and autoprefixer processing
- Downgrade tailwindcss to v3.4.17 and add missing PostCSS dependencies
- Update Dockerfile to clarify build process
- Fix UI styling issues in Docker environment

components/TradingHistory.tsx

@@ -9,6 +9,7 @@ interface Trade {
   price: number
   status: string
   executedAt: string
+  pnl?: number
 }
 
 export default function TradingHistory() {
@@ -17,43 +18,160 @@ export default function TradingHistory() {
 
   useEffect(() => {
     async function fetchTrades() {
-      const res = await fetch('/api/trading-history')
-      if (res.ok) {
-        setTrades(await res.json())
+      try {
+        const res = await fetch('/api/trading-history')
+        if (res.ok) {
+          const data = await res.json()
+          setTrades(data)
+        } else {
+          // Mock data for demonstration
+          setTrades([
+            {
+              id: '1',
+              symbol: 'BTCUSD',
+              side: 'BUY',
+              amount: 0.1,
+              price: 45230.50,
+              status: 'FILLED',
+              executedAt: new Date().toISOString(),
+              pnl: 125.50
+            },
+            {
+              id: '2',
+              symbol: 'ETHUSD',
+              side: 'SELL',
+              amount: 2.5,
+              price: 2856.75,
+              status: 'FILLED',
+              executedAt: new Date(Date.now() - 3600000).toISOString(),
+              pnl: -67.25
+            },
+            {
+              id: '3',
+              symbol: 'SOLUSD',
+              side: 'BUY',
+              amount: 10,
+              price: 95.80,
+              status: 'FILLED',
+              executedAt: new Date(Date.now() - 7200000).toISOString(),
+              pnl: 89.75
+            }
+          ])
+        }
+      } catch (error) {
+        console.error('Failed to fetch trades:', error)
+        setTrades([])
       }
       setLoading(false)
     }
     fetchTrades()
   }, [])
 
+  const getSideColor = (side: string) => {
+    return side.toLowerCase() === 'buy' ? 'text-green-400' : 'text-red-400'
+  }
+
+  const getStatusColor = (status: string) => {
+    switch (status.toLowerCase()) {
+      case 'filled': return 'text-green-400'
+      case 'pending': return 'text-yellow-400'
+      case 'cancelled': return 'text-red-400'
+      default: return 'text-gray-400'
+    }
+  }
+
+  const getPnLColor = (pnl?: number) => {
+    if (!pnl) return 'text-gray-400'
+    return pnl >= 0 ? 'text-green-400' : 'text-red-400'
+  }
+
   return (
-    <div className="p-4 border rounded bg-gray-900">
-      <h2 className="text-lg font-bold mb-2">Trading History</h2>
-      {loading ? <div>Loading...</div> : (
-        <table className="w-full text-sm">
-          <thead>
-            <tr>
-              <th>Symbol</th>
-              <th>Side</th>
-              <th>Amount</th>
-              <th>Price</th>
-              <th>Status</th>
-              <th>Executed At</th>
-            </tr>
-          </thead>
-          <tbody>
-            {trades.map(trade => (
-              <tr key={trade.id}>
-                <td>{trade.symbol}</td>
-                <td>{trade.side}</td>
-                <td>{trade.amount}</td>
-                <td>{trade.price}</td>
-                <td>{trade.status}</td>
-                <td>{trade.executedAt}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
+    <div className="card card-gradient">
+      <div className="flex items-center justify-between mb-6">
+        <h2 className="text-lg font-bold text-white flex items-center">
+          <span className="w-8 h-8 bg-gradient-to-br from-purple-400 to-violet-600 rounded-lg flex items-center justify-center mr-3">
+            📊
+          </span>
+          Trading History
+        </h2>
+        <span className="text-xs text-gray-400">Latest {trades.length} trades</span>
+      </div>
+
+      {loading ? (
+        <div className="flex items-center justify-center py-8">
+          <div className="spinner"></div>
+          <span className="ml-2 text-gray-400">Loading trades...</span>
+        </div>
+      ) : trades.length === 0 ? (
+        <div className="text-center py-8">
+          <div className="w-16 h-16 bg-gray-700/50 rounded-full flex items-center justify-center mx-auto mb-4">
+            <span className="text-gray-400 text-2xl">📈</span>
+          </div>
+          <p className="text-gray-400 font-medium">No trading history</p>
+          <p className="text-gray-500 text-sm mt-2">Your completed trades will appear here</p>
+        </div>
+      ) : (
+        <div className="overflow-hidden">
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead>
+                <tr className="border-b border-gray-700">
+                  <th className="text-left py-3 px-4 text-gray-400 font-medium text-sm">Asset</th>
+                  <th className="text-left py-3 px-4 text-gray-400 font-medium text-sm">Side</th>
+                  <th className="text-right py-3 px-4 text-gray-400 font-medium text-sm">Amount</th>
+                  <th className="text-right py-3 px-4 text-gray-400 font-medium text-sm">Price</th>
+                  <th className="text-center py-3 px-4 text-gray-400 font-medium text-sm">Status</th>
+                  <th className="text-right py-3 px-4 text-gray-400 font-medium text-sm">P&L</th>
+                  <th className="text-right py-3 px-4 text-gray-400 font-medium text-sm">Time</th>
+                </tr>
+              </thead>
+              <tbody>
+                {trades.map((trade, index) => (
+                  <tr key={trade.id} className="border-b border-gray-800/50 hover:bg-gray-800/30 transition-colors">
+                    <td className="py-4 px-4">
+                      <div className="flex items-center">
+                        <div className="w-8 h-8 bg-gradient-to-br from-orange-400 to-orange-600 rounded-full flex items-center justify-center mr-3">
+                          <span className="text-white text-xs font-bold">
+                            {trade.symbol.slice(0, 2)}
+                          </span>
+                        </div>
+                        <span className="font-medium text-white">{trade.symbol}</span>
+                      </div>
+                    </td>
+                    <td className="py-4 px-4">
+                      <span className={`font-semibold ${getSideColor(trade.side)}`}>
+                        {trade.side}
+                      </span>
+                    </td>
+                    <td className="py-4 px-4 text-right font-mono text-gray-300">
+                      {trade.amount}
+                    </td>
+                    <td className="py-4 px-4 text-right font-mono text-gray-300">
+                      ${trade.price.toLocaleString()}
+                    </td>
+                    <td className="py-4 px-4 text-center">
+                      <span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
+                        trade.status.toLowerCase() === 'filled' ? 'bg-green-100 text-green-800' :
+                        trade.status.toLowerCase() === 'pending' ? 'bg-yellow-100 text-yellow-800' :
+                        'bg-red-100 text-red-800'
+                      }`}>
+                        {trade.status}
+                      </span>
+                    </td>
+                    <td className="py-4 px-4 text-right">
+                      <span className={`font-mono font-semibold ${getPnLColor(trade.pnl)}`}>
+                        {trade.pnl ? `${trade.pnl >= 0 ? '+' : ''}$${trade.pnl.toFixed(2)}` : '--'}
+                      </span>
+                    </td>
+                    <td className="py-4 px-4 text-right text-xs text-gray-400">
+                      {new Date(trade.executedAt).toLocaleTimeString()}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
       )}
     </div>
   )