diff --git a/packages/react-frontend/src/Components/Navbar.jsx b/packages/react-frontend/src/Components/Navbar.jsx
index 8066afc..62bfe6c 100644
--- a/packages/react-frontend/src/Components/Navbar.jsx
+++ b/packages/react-frontend/src/Components/Navbar.jsx
@@ -7,6 +7,7 @@ import ManageOrders from "../Views/ManageOrders";
import AddOrders from "../Views/AddOrders";
import OrderStatistics from "../Views/OrderStatistics";
import ProfilePage from "../Views/Profile";
+import ProductPage from "../Views/ProductPage"; // Import ProductPage component
import "../Styles/Navbar.css";
function App() {
@@ -25,6 +26,7 @@ function App() {
} />
} />
} />
+ } />
diff --git a/packages/react-frontend/src/Components/Table.jsx b/packages/react-frontend/src/Components/Table.jsx
index c738b62..cff2540 100644
--- a/packages/react-frontend/src/Components/Table.jsx
+++ b/packages/react-frontend/src/Components/Table.jsx
@@ -9,6 +9,7 @@ function TableHeader() {
Quantity |
Price |
Remove |
+ Edit |
);
@@ -29,6 +30,11 @@ function TableBody(props) {
|
+
+
+
+
+ |
);
}
diff --git a/packages/react-frontend/src/Styles/Navbar.css b/packages/react-frontend/src/Styles/Navbar.css
index 50d6480..d97db2d 100644
--- a/packages/react-frontend/src/Styles/Navbar.css
+++ b/packages/react-frontend/src/Styles/Navbar.css
@@ -143,3 +143,46 @@
.logo {
height: 82px;
}
+
+.ProductPageLogo {
+ height: 150px;
+ display: block;
+ margin: 0 auto;
+}
+
+.subtitle-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100px;
+ margin-top: 20px;
+}
+
+.subtitle {
+ font-size: 24px;
+ font-weight: 600;
+ color: #050107;
+}
+
+.edit-product-title {
+ font-size: 24px;
+ font-weight: bold;
+ color: #4a90e2;
+ margin-top: 20px;
+ position: absolute;
+ left: 50px; /* Adjust the left offset as needed */
+ top: 450px; /* Adjust the top offset as needed */
+}
+
+.input-container {
+ margin-left: 50px; /* Adjust the left margin as needed */
+}
+
+.input-container label {
+ display: block;
+ margin-bottom: 15px;
+}
+
+.input-container input {
+ width: 1300px; /* Adjust the width as needed */
+}
diff --git a/packages/react-frontend/src/Views/ProductPage.jsx b/packages/react-frontend/src/Views/ProductPage.jsx
new file mode 100644
index 0000000..4a54d69
--- /dev/null
+++ b/packages/react-frontend/src/Views/ProductPage.jsx
@@ -0,0 +1,80 @@
+// ProductPage.js
+import React, { useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { addAuthHeader } from "../Components/helpers";
+
+function ProductPage() {
+ const { id } = useParams();
+ const [product, setProduct] = useState(null);
+
+ useEffect(() => {
+ fetchProduct(id)
+ .then((res) => {
+ if (res) {
+ setProduct(res);
+ } else {
+ setProduct(null);
+ }
+ })
+ .catch((error) => {
+ console.log(error);
+ });
+ }, [id]);
+
+ function fetchProduct(id) {
+ console.log(`Fetching product with id: ${id}`);
+ return fetch(`http://localhost:8000/products/${id}`, {
+ headers: addAuthHeader()
+ })
+ .then((res) => {
+ console.log("Response status:", res.status);
+ if (res.status === 200) {
+ return res.json();
+ } else {
+ throw new Error("Failed to fetch product");
+ }
+ })
+ .catch((error) => {
+ console.error("Error fetching product:", error);
+ });
+ }
+
+ if (!product) {
+ return (
+
+
+
+
+ Loading...
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
Your Product: {product.product}
+
+
Edit Product
+
+
+ );
+}
+
+export default ProductPage;