fix the transaction UI

backend/controllers/transaction.js

@@ -32,14 +32,17 @@ exports.getTransactionsByProduct = async (req, res) => {
   try {
     const [transactions] = await db.execute(
       `SELECT
-         TransactionID,
-         UserID,
-         ProductID,
-         Date,
-         PaymentStatus
-       FROM Transaction
-       WHERE ProductID = ?`,
-      [productID]
+         T.TransactionID,
+         T.UserID,
+         T.ProductID,
+         T.Date,
+         T.PaymentStatus,
+         P.Name AS ProductName,
+         MIN(I.URL) AS Image_URL
+       FROM Transaction T
+       JOIN Product P ON T.ProductID = P.ProductID
+       LEFT JOIN Image_URL I ON P.ProductID = I.ProductID
+       GROUP BY T.TransactionID, T.UserID, T.ProductID, T.Date, T.PaymentStatus, P.Name`
     );
 
     res.json({
@@ -59,13 +62,18 @@ exports.getTransactionsByUser = async (req, res) => {
   try {
     const [transactions] = await db.execute(
       `SELECT
-         TransactionID,
-         UserID,
-         ProductID,
-         Date,
-         PaymentStatus
-       FROM Transaction
-       WHERE UserID = ?`,
+         T.TransactionID,
+         T.UserID,
+         T.ProductID,
+         T.Date,
+         T.PaymentStatus,
+         P.Name AS ProductName,
+         MIN(I.URL) AS Image_URL
+       FROM Transaction T
+       JOIN Product P ON T.ProductID = P.ProductID
+       LEFT JOIN Image_URL I ON P.ProductID = I.ProductID
+       WHERE T.UserID = ?
+       GROUP BY T.TransactionID, T.UserID, T.ProductID, T.Date, T.PaymentStatus, P.Name`,
       [userID]
     );
 

frontend/src/pages/Transactions.jsx

@@ -9,32 +9,46 @@ const Transactions = () => {
     const fetchTransactions = async () => {
       try {
         const response = await fetch(
-          "http://localhost:3030/api/transaction/getAllTransactions"
+          "http://localhost:3030/api/transaction/getTransactionsByUser",
+          {
+            method: "POST", // Use POST to send the userID
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              userID: 1, // Replace with the actual userID (e.g., from context or state)
+            }),
+          }
         );
+  
         if (!response.ok) throw new Error(`HTTP ${response.status}`);
         const { transactions: txData } = await response.json();
-
+  
+        console.log("API Response:", txData); // Log the API response for debugging
+  
         if (!Array.isArray(txData)) {
           console.error("Expected an array but got:", txData);
           return;
         }
-
+  
         const transformed = txData.map((tx) => ({
           id: tx.TransactionID,
           productId: tx.ProductID,
-          name: tx.ProductName,
+          name: tx.ProductName || "Unnamed Product", // Ensure ProductName is used
           price: tx.Price != null ? parseFloat(tx.Price) : null,
-          image: tx.image_url || "/default-image.jpg",
+          image: tx.Image_URL || "/default-image.jpg", // Ensure Image_URL is used
           date: tx.Date,
           status: tx.PaymentStatus,
         }));
-
+  
+        console.log("Transformed Data:", transformed); // Log the transformed data
+  
         setTransactions(transformed);
       } catch (error) {
         console.error("Failed to fetch transactions:", error);
       }
     };
-
+  
     fetchTransactions();
   }, []);