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
; -// }; - -// 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
Loading transactions...
; -// } - -// if (error) { -// return
Error: {error}
; -// } - -// return ( -//
-//

All Transactions

-// {transactions.length === 0 ? ( -//

No transactions found.

-// ) : ( -// -// -// -// -// -// -// -// -// -// -// -// {transactions.map((tx) => ( -// -// -// -// -// -// -// -// ))} -// -//
Transaction IDUser IDProduct IDDatePayment Status
{tx.TransactionID}{tx.UserID}{tx.ProductID} -// {new Date(tx.Date).toLocaleString()} -// {tx.PaymentStatus}
-// )} -//
-// ); -// }; - -// 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 (
-

My Transactions

+

All Transactions

{transactions.length === 0 ? (

- No transactions yet + No transactions found

- Once you make a purchase, your transactions will appear here. + Once transactions are created, they’ll appear here.

{
) : ( -
- {transactions.map((tx) => ( -
- -
- {tx.image ? ( - {tx.name} - ) : ( -
No image
- )} -
-
-

- {tx.name} -

- {tx.price !== null && ( -

- ${tx.price.toFixed(2)} -

- )} -
- {" "} - {formatDate(tx.date)} + <> +
+ {transactions.map((tx) => ( +
+ +
+ {tx.image ? ( + {tx.name} + ) : ( +
No image
+ )}
-

- Status: {tx.status} -

-
- -
- ))} -
- )} +
+

+ {tx.name} +

+ {tx.price !== null && ( +

+ ${tx.price.toFixed(2)} +

+ )} +
+ + {formatDate(tx.date)} +
+

+ Status: {tx.status} +

+
+ +
+ ))} +
- {transactions.length > 0 && ( -
- Showing {transactions.length}{" "} - {transactions.length === 1 ? "transaction" : "transactions"} -
+
+ Showing {transactions.length}{" "} + {transactions.length === 1 ? "transaction" : "transactions"} +
+ )}