added steambot, trades and trasctions.

frontend/src/views/TransactionsPage.vue

@@ -9,11 +9,67 @@
         </p>
       </div>
 
+      <!-- Pending Trades Section -->
+      <div v-if="pendingTrades.length > 0" class="mb-6">
+        <h2 class="text-xl font-bold text-white mb-4 flex items-center gap-2">
+          <Clock class="w-5 h-5 text-yellow-400" />
+          Pending Trades
+        </h2>
+        <div class="space-y-3">
+          <div
+            v-for="trade in pendingTrades"
+            :key="trade._id"
+            class="bg-surface-light rounded-lg border border-yellow-400/30 p-4"
+          >
+            <div class="flex items-center justify-between flex-wrap gap-4">
+              <div class="flex items-center gap-4">
+                <div class="flex items-center gap-2">
+                  <div
+                    class="w-2 h-2 bg-yellow-400 rounded-full animate-pulse"
+                  ></div>
+                  <span class="text-white font-medium">
+                    Selling {{ trade.items?.length || 0 }} item(s)
+                  </span>
+                </div>
+                <div class="h-6 w-px bg-surface-lighter"></div>
+                <div class="text-text-secondary text-sm">
+                  Code:
+                  <span class="text-primary font-mono font-bold">{{
+                    trade.verificationCode
+                  }}</span>
+                </div>
+              </div>
+              <div class="flex items-center gap-3">
+                <div class="text-white font-semibold">
+                  {{ formatCurrency(trade.totalValue || 0) }}
+                </div>
+                <a
+                  v-if="trade.tradeOfferUrl"
+                  :href="trade.tradeOfferUrl"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="px-4 py-2 bg-primary hover:bg-primary-dark text-surface-dark font-medium rounded-lg transition-colors text-sm flex items-center gap-1"
+                >
+                  <ExternalLink class="w-4 h-4" />
+                  Open
+                </a>
+                <button
+                  @click="viewTradeDetails(trade)"
+                  class="px-4 py-2 bg-primary/20 hover:bg-primary/30 text-primary rounded-lg transition-colors text-sm"
+                >
+                  Details
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <!-- Filters -->
       <div
         class="bg-surface-light rounded-lg border border-surface-lighter p-6 mb-6"
       >
-        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
           <div>
             <label class="block text-sm font-medium text-text-secondary mb-2">
               Type
@@ -65,12 +121,6 @@
               <option value="year">Last Year</option>
             </select>
           </div>
-
-          <div class="flex items-end">
-            <button @click="resetFilters" class="btn-secondary w-full">
-              Reset Filters
-            </button>
-          </div>
         </div>
       </div>
 
@@ -417,11 +467,112 @@
         </div>
       </div>
     </div>
+
+    <!-- Trade Details Modal -->
+    <div
+      v-if="showTradeModal && selectedTrade"
+      class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4"
+      @click.self="closeTradeModal"
+    >
+      <div
+        class="bg-surface-light rounded-lg max-w-md w-full p-6 border border-surface-lighter"
+      >
+        <!-- Modal Header -->
+        <div class="flex items-center justify-between mb-4">
+          <h3 class="text-xl font-bold text-white">Trade Details</h3>
+          <button
+            @click="closeTradeModal"
+            class="text-text-secondary hover:text-white transition-colors"
+          >
+            <X class="w-6 h-6" />
+          </button>
+        </div>
+
+        <!-- Trade Status -->
+        <div class="text-center py-4 mb-4">
+          <div
+            class="w-16 h-16 bg-yellow-400/20 rounded-full flex items-center justify-center mx-auto mb-3"
+          >
+            <Clock class="w-8 h-8 text-yellow-400" />
+          </div>
+          <p class="text-white font-semibold mb-1">Waiting for Acceptance</p>
+          <p class="text-text-secondary text-sm">
+            Check your Steam trade offers
+          </p>
+        </div>
+
+        <!-- Verification Code -->
+        <div
+          class="bg-gradient-to-br from-primary/20 to-primary-dark/20 border-2 border-primary rounded-lg p-6 text-center mb-4"
+        >
+          <p class="text-text-secondary text-sm mb-2">Verification Code</p>
+          <p class="text-4xl font-bold text-white tracking-widest font-mono">
+            {{ selectedTrade.verificationCode }}
+          </p>
+          <p class="text-text-secondary text-xs mt-2">
+            Match this code with your Steam trade offer
+          </p>
+        </div>
+
+        <!-- Open Trade Link Button -->
+        <a
+          v-if="selectedTrade.tradeOfferUrl"
+          :href="selectedTrade.tradeOfferUrl"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="w-full px-6 py-3 bg-gradient-to-r from-primary to-primary-dark text-surface-dark font-semibold rounded-lg hover:opacity-90 transition-opacity flex items-center justify-center gap-2 text-center mb-4"
+        >
+          <ExternalLink class="w-5 h-5" />
+          Open Trade in Steam
+        </a>
+
+        <!-- Trade Info -->
+        <div class="bg-surface rounded-lg p-4 space-y-2 mb-4">
+          <div class="flex items-center justify-between">
+            <span class="text-text-secondary">Items:</span>
+            <span class="text-white font-semibold">{{
+              selectedTrade.items?.length || 0
+            }}</span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span class="text-text-secondary">Value:</span>
+            <span class="text-white font-semibold">{{
+              formatCurrency(selectedTrade.totalValue || 0)
+            }}</span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span class="text-text-secondary">Created:</span>
+            <span class="text-white font-semibold">{{
+              formatDate(selectedTrade.sentAt || selectedTrade.createdAt)
+            }}</span>
+          </div>
+        </div>
+
+        <!-- Instructions -->
+        <div class="bg-primary/10 border border-primary/30 rounded-lg p-3 mb-4">
+          <p class="text-white font-semibold text-sm mb-2">Instructions:</p>
+          <ol
+            class="text-text-secondary text-sm space-y-1 list-decimal list-inside"
+          >
+            <li>Click "Open Trade in Steam" button above</li>
+            <li>Verify the code matches</li>
+            <li>Accept the trade</li>
+          </ol>
+        </div>
+
+        <button
+          @click="closeTradeModal"
+          class="w-full px-4 py-2.5 bg-surface hover:bg-surface-lighter text-white rounded-lg transition-colors"
+        >
+          Close
+        </button>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted, watch } from "vue";
+import { ref, computed, onMounted, onUnmounted, watch } from "vue";
 import { useAuthStore } from "@/stores/auth";
 import axios from "@/utils/axios";
 import { useToast } from "vue-toastification";
@@ -443,6 +594,9 @@ import {
   RefreshCw,
   Gift,
   DollarSign,
+  Clock,
+  X,
+  ExternalLink,
 } from "lucide-vue-next";
 
 const authStore = useAuthStore();
@@ -455,6 +609,9 @@ const currentPage = ref(1);
 const perPage = ref(10);
 const totalTransactions = ref(0);
 const expandedTransaction = ref(null);
+const pendingTrades = ref([]);
+const showTradeModal = ref(false);
+const selectedTrade = ref(null);
 
 const filters = ref({
   type: "",
@@ -462,6 +619,8 @@ const filters = ref({
   dateRange: "all",
 });
 
+let wsMessageHandler = null;
+
 const stats = ref({
   totalDeposits: 0,
   totalWithdrawals: 0,
@@ -557,13 +716,83 @@ const fetchTransactions = async () => {
     console.error("Response:", error.response?.data);
     console.error("Status:", error.response?.status);
     if (error.response?.status !== 404) {
-      toast.error("Failed to load transactions");
+      toast.error("Failed to load transaction history");
     }
   } finally {
     loading.value = false;
   }
 };
 
+const fetchPendingTrades = async () => {
+  try {
+    const response = await axios.get("/api/inventory/trades");
+    if (response.data.success) {
+      pendingTrades.value = response.data.trades.filter(
+        (t) => t.state === "pending"
+      );
+    }
+  } catch (err) {
+    console.error("Failed to load pending trades:", err);
+  }
+};
+
+const viewTradeDetails = (trade) => {
+  selectedTrade.value = trade;
+  showTradeModal.value = true;
+};
+
+const closeTradeModal = () => {
+  showTradeModal.value = false;
+  selectedTrade.value = null;
+};
+
+const setupWebSocketListeners = () => {
+  if (authStore.ws) {
+    wsMessageHandler = (event) => {
+      try {
+        const message = JSON.parse(event.data);
+
+        if (message.type === "trade_completed") {
+          // Remove from pending
+          pendingTrades.value = pendingTrades.value.filter(
+            (t) => t._id !== message.data.tradeId
+          );
+          // Refresh transactions
+          fetchTransactions();
+          toast.success("Trade completed! Balance updated.");
+        } else if (
+          message.type === "trade_declined" ||
+          message.type === "trade_expired" ||
+          message.type === "trade_canceled"
+        ) {
+          // Remove from pending
+          pendingTrades.value = pendingTrades.value.filter(
+            (t) => t._id !== message.data.tradeId
+          );
+          if (message.type === "trade_declined") {
+            toast.warning("Trade was declined");
+          } else if (message.type === "trade_expired") {
+            toast.warning("Trade offer expired");
+          }
+        } else if (message.type === "trade_created") {
+          // Add to pending trades
+          fetchPendingTrades();
+        }
+      } catch (err) {
+        console.error("Error handling WebSocket message:", err);
+      }
+    };
+
+    authStore.ws.addEventListener("message", wsMessageHandler);
+  }
+};
+
+const cleanupWebSocketListeners = () => {
+  if (authStore.ws && wsMessageHandler) {
+    authStore.ws.removeEventListener("message", wsMessageHandler);
+  }
+};
+
 const nextPage = () => {
   if (hasNextPage.value) {
     currentPage.value++;
@@ -731,5 +960,11 @@ const getSessionColor = (sessionIdShort) => {
 // Lifecycle
 onMounted(() => {
   fetchTransactions();
+  fetchPendingTrades();
+  setupWebSocketListeners();
+});
+
+onUnmounted(() => {
+  cleanupWebSocketListeners();
 });
 </script>