mannpatel/Campus-Plug
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update Frontend Transaction

Browse Source
This commit is contained in:
aruhani
2025-04-20 22:33:12 -06:00
parent d381ef7973
commit 644db7707c
1 changed files with 56 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
frontend/src/pages/Transactions.jsx
View File

@@ -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 { useState, useEffect } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { Calendar, CreditCard } from "lucide-react"; import { Calendar, CreditCard } from "lucide-react";
const Transactions = () => { const Transactions = () => {
const [transactions, setTransactions] = useState([]); const [transactions, setTransactions] = useState([]);
const storedUser = JSON.parse(sessionStorage.getItem("user"));
useEffect(() => { useEffect(() => {
const fetchTransactions = async () => { const fetchTransactions = async () => {
try { try {
const response = await fetch( const response = await fetch(
"http://localhost:3030/api/product/getTransactions", "http://localhost:3030/api/transaction/getAllTransactions"
{
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ userID: storedUser.ID }),
}
); );
const data = await response.json(); if (!response.ok) throw new Error(`HTTP ${response.status}`);
const txData = data.transactions; const { transactions: txData } = await response.json();
if (!Array.isArray(txData)) { if (!Array.isArray(txData)) {
console.error("Expected an array but got:", txData); console.error("Expected an array but got:", txData);
@@ -118,7 +23,7 @@ const Transactions = () => {
id: tx.TransactionID, id: tx.TransactionID,
productId: tx.ProductID, productId: tx.ProductID,
name: tx.ProductName, 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", image: tx.image_url || "/default-image.jpg",
date: tx.Date, date: tx.Date,
status: tx.PaymentStatus, status: tx.PaymentStatus,
@@ -145,17 +50,17 @@ const Transactions = () => {
return ( return (
<div className="max-w-6xl mx-auto"> <div className="max-w-6xl mx-auto">
<div className="flex justify-between items-center mb-6"> <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> </div>
{transactions.length === 0 ? ( {transactions.length === 0 ? (
<div className="bg-white border border-gray-200 p-8 text-center"> <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" /> <CreditCard className="h-12 w-12 text-gray-300 mx-auto mb-4" />
<h3 className="text-xl font-medium text-gray-700 mb-2"> <h3 className="text-xl font-medium text-gray-700 mb-2">
No transactions yet No transactions found
</h3> </h3>
<p className="text-gray-500 mb-4"> <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> </p>
<Link <Link
to="/" to="/"
@@ -165,52 +70,52 @@ const Transactions = () => {
</Link> </Link>
</div> </div>
) : ( ) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <>
{transactions.map((tx) => ( <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div {transactions.map((tx) => (
key={tx.id} <div
className="border-2 border-gray-200 overflow-hidden hover:shadow-md transition-shadow" 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"> <Link to={`/product/${tx.productId}`}>
{tx.image ? ( <div className="h-48 bg-gray-200 flex items-center justify-center">
<img {tx.image ? (
src={tx.image} <img
alt={tx.name} src={tx.image}
className="w-full h-full object-cover" alt={tx.name}
/> className="w-full h-full object-cover"
) : ( />
<div className="text-gray-400">No image</div> ) : (
)} <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> </div>
<p className="text-gray-600 text-sm mt-1"> <div className="p-4">
Status: <span className="font-medium">{tx.status}</span> <h3 className="text-lg font-semibold text-gray-800">
</p> {tx.name}
</div> </h3>
</Link> {tx.price !== null && (
</div> <p className="text-emerald-600 font-bold mt-1">
))} ${tx.price.toFixed(2)}
</div> </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">
<div className="mt-6 text-sm text-gray-500"> Showing {transactions.length}{" "}
Showing {transactions.length}{" "} {transactions.length === 1 ? "transaction" : "transactions"}
{transactions.length === 1 ? "transaction" : "transactions"} </div>
</div> </>
)} )}
<footer className="bg-gray-800 text-white py-6 mt-12"> <footer className="bg-gray-800 text-white py-6 mt-12">
@@ -239,7 +144,10 @@ const Transactions = () => {
</Link> </Link>
</li> </li>
<li className="mb-1"> <li className="mb-1">
<Link to="/favorites" className="hover:text-white transition"> <Link
to="/favorites"
className="hover:text-white transition"
>
My Favorites My Favorites
</Link> </Link>
</li> </li>