From 644db7707ce1d76debf852d010c18bbec3cc8589 Mon Sep 17 00:00:00 2001
From: aruhani <163067503+aruhani@users.noreply.github.com>
Date: Sun, 20 Apr 2025 22:33:12 -0600
Subject: [PATCH] Update Frontend Transaction

---
 frontend/src/pages/Transactions.jsx | 204 ++++++++--------------------
 1 file changed, 56 insertions(+), 148 deletions(-)

diff --git a/frontend/src/pages/Transactions.jsx b/frontend/src/pages/Transactions.jsx
index 0f85b6e..8f43ac2 100644
--- a/frontend/src/pages/Transactions.jsx
+++ b/frontend/src/pages/Transactions.jsx
@@ -1,113 +1,18 @@
-// import { useState } from "react";
-// import { Link } from "react-router-dom";
-
-// const Transactions = () => {
-//   return <div></div>;
-// };
-
-// export default Transactions;
-
-
-// import { useState, useEffect } from "react";
-
-// const Transactions = () => {
-//   const [transactions, setTransactions] = useState([]);
-//   const [isLoading, setIsLoading] = useState(true);
-//   const [error, setError] = useState(null);
-
-//   useEffect(() => {
-//     const fetchTransactions = async () => {
-//       try {
-//         setIsLoading(true);
-//         setError(null);
-
-//         const response = await fetch(
-//           "http://localhost:3030/api/transaction/getAllTransactions"
-//         );
-//         const result = await response.json();
-
-//         if (!response.ok) {
-//           throw new Error(result.error || "Failed to fetch transactions");
-//         }
-
-//         setTransactions(result.transactions);
-//       } catch (err) {
-//         setError(err.message);
-//       } finally {
-//         setIsLoading(false);
-//       }
-//     };
-
-//     fetchTransactions();
-//   }, []);
-
-//   if (isLoading) {
-//     return <div>Loading transactions...</div>;
-//   }
-
-//   if (error) {
-//     return <div className="text-red-600">Error: {error}</div>;
-//   }
-
-//   return (
-//     <div className="p-4">
-//       <h1 className="text-2xl font-semibold mb-4">All Transactions</h1>
-//       {transactions.length === 0 ? (
-//         <p>No transactions found.</p>
-//       ) : (
-//         <table className="min-w-full border-collapse">
-//           <thead>
-//             <tr>
-//               <th className="border px-2 py-1">Transaction ID</th>
-//               <th className="border px-2 py-1">User ID</th>
-//               <th className="border px-2 py-1">Product ID</th>
-//               <th className="border px-2 py-1">Date</th>
-//               <th className="border px-2 py-1">Payment Status</th>
-//             </tr>
-//           </thead>
-//           <tbody>
-//             {transactions.map((tx) => (
-//               <tr key={tx.TransactionID}>
-//                 <td className="border px-2 py-1">{tx.TransactionID}</td>
-//                 <td className="border px-2 py-1">{tx.UserID}</td>
-//                 <td className="border px-2 py-1">{tx.ProductID}</td>
-//                 <td className="border px-2 py-1">
-//                   {new Date(tx.Date).toLocaleString()}
-//                 </td>
-//                 <td className="border px-2 py-1">{tx.PaymentStatus}</td>
-//               </tr>
-//             ))}
-//           </tbody>
-//         </table>
-//       )}
-//     </div>
-//   );
-// };
-
-// export default Transactions;
-// src/pages/Transactions.jsx
-
 import { useState, useEffect } from "react";
 import { Link } from "react-router-dom";
 import { Calendar, CreditCard } from "lucide-react";
 
 const Transactions = () => {
   const [transactions, setTransactions] = useState([]);
-  const storedUser = JSON.parse(sessionStorage.getItem("user"));
 
   useEffect(() => {
     const fetchTransactions = async () => {
       try {
         const response = await fetch(
-          "http://localhost:3030/api/product/getTransactions",
-          {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ userID: storedUser.ID }),
-          }
+          "http://localhost:3030/api/transaction/getAllTransactions"
         );
-        const data = await response.json();
-        const txData = data.transactions;
+        if (!response.ok) throw new Error(`HTTP ${response.status}`);
+        const { transactions: txData } = await response.json();
 
         if (!Array.isArray(txData)) {
           console.error("Expected an array but got:", txData);
@@ -118,7 +23,7 @@ const Transactions = () => {
           id: tx.TransactionID,
           productId: tx.ProductID,
           name: tx.ProductName,
-          price: tx.Price ? parseFloat(tx.Price) : null,
+          price: tx.Price != null ? parseFloat(tx.Price) : null,
           image: tx.image_url || "/default-image.jpg",
           date: tx.Date,
           status: tx.PaymentStatus,
@@ -145,17 +50,17 @@ const Transactions = () => {
   return (
     <div className="max-w-6xl mx-auto">
       <div className="flex justify-between items-center mb-6">
-        <h1 className="text-2xl font-bold text-gray-800">My Transactions</h1>
+        <h1 className="text-2xl font-bold text-gray-800">All Transactions</h1>
       </div>
 
       {transactions.length === 0 ? (
         <div className="bg-white border border-gray-200 p-8 text-center">
           <CreditCard className="h-12 w-12 text-gray-300 mx-auto mb-4" />
           <h3 className="text-xl font-medium text-gray-700 mb-2">
-            No transactions yet
+            No transactions found
           </h3>
           <p className="text-gray-500 mb-4">
-            Once you make a purchase, your transactions will appear here.
+            Once transactions are created, they’ll appear here.
           </p>
           <Link
             to="/"
@@ -165,52 +70,52 @@ const Transactions = () => {
           </Link>
         </div>
       ) : (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          {transactions.map((tx) => (
-            <div
-              key={tx.id}
-              className="border-2 border-gray-200 overflow-hidden hover:shadow-md transition-shadow"
-            >
-              <Link to={`/product/${tx.productId}`}>
-                <div className="h-48 bg-gray-200 flex items-center justify-center">
-                  {tx.image ? (
-                    <img
-                      src={tx.image}
-                      alt={tx.name}
-                      className="w-full h-full object-cover"
-                    />
-                  ) : (
-                    <div className="text-gray-400">No image</div>
-                  )}
-                </div>
-                <div className="p-4">
-                  <h3 className="text-lg font-semibold text-gray-800">
-                    {tx.name}
-                  </h3>
-                  {tx.price !== null && (
-                    <p className="text-emerald-600 font-bold mt-1">
-                      ${tx.price.toFixed(2)}
-                    </p>
-                  )}
-                  <div className="flex items-center text-gray-500 text-sm mt-2">
-                    <Calendar className="mr-1" size={16} />{" "}
-                    {formatDate(tx.date)}
+        <>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {transactions.map((tx) => (
+              <div
+                key={tx.id}
+                className="border-2 border-gray-200 overflow-hidden hover:shadow-md transition-shadow"
+              >
+                <Link to={`/product/${tx.productId}`}>
+                  <div className="h-48 bg-gray-200 flex items-center justify-center">
+                    {tx.image ? (
+                      <img
+                        src={tx.image}
+                        alt={tx.name}
+                        className="w-full h-full object-cover"
+                      />
+                    ) : (
+                      <div className="text-gray-400">No image</div>
+                    )}
                   </div>
-                  <p className="text-gray-600 text-sm mt-1">
-                    Status: <span className="font-medium">{tx.status}</span>
-                  </p>
-                </div>
-              </Link>
-            </div>
-          ))}
-        </div>
-      )}
+                  <div className="p-4">
+                    <h3 className="text-lg font-semibold text-gray-800">
+                      {tx.name}
+                    </h3>
+                    {tx.price !== null && (
+                      <p className="text-emerald-600 font-bold mt-1">
+                        ${tx.price.toFixed(2)}
+                      </p>
+                    )}
+                    <div className="flex items-center text-gray-500 text-sm mt-2">
+                      <Calendar className="mr-1" size={16} />
+                      {formatDate(tx.date)}
+                    </div>
+                    <p className="text-gray-600 text-sm mt-1">
+                      Status: <span className="font-medium">{tx.status}</span>
+                    </p>
+                  </div>
+                </Link>
+              </div>
+            ))}
+          </div>
 
-      {transactions.length > 0 && (
-        <div className="mt-6 text-sm text-gray-500">
-          Showing {transactions.length}{" "}
-          {transactions.length === 1 ? "transaction" : "transactions"}
-        </div>
+          <div className="mt-6 text-sm text-gray-500">
+            Showing {transactions.length}{" "}
+            {transactions.length === 1 ? "transaction" : "transactions"}
+          </div>
+        </>
       )}
 
       <footer className="bg-gray-800 text-white py-6 mt-12">
@@ -239,7 +144,10 @@ const Transactions = () => {
                     </Link>
                   </li>
                   <li className="mb-1">
-                    <Link to="/favorites" className="hover:text-white transition">
+                    <Link
+                      to="/favorites"
+                      className="hover:text-white transition"
+                    >
                       My Favorites
                     </Link>
                   </li>
@@ -263,4 +171,4 @@ const Transactions = () => {
   );
 };
 
-export default Transactions;
+export default Transactions;
\ No newline at end of file