From 1fded3cedf73b445786744b4693a52d763ea7f86 Mon Sep 17 00:00:00 2001 From: jurenroy Date: Sat, 25 Feb 2023 02:04:14 +0800 Subject: [PATCH 01/12] Initial Products --- src/components/ProductInfo/ProductInfo.tsx | 41 +++++++++++++++++++ .../ProductsLists/ProductsLists.tsx | 18 ++++++++ src/routes/Products/Products.tsx | 4 ++ 3 files changed, 63 insertions(+) create mode 100644 src/components/ProductInfo/ProductInfo.tsx create mode 100644 src/components/ProductsLists/ProductsLists.tsx diff --git a/src/components/ProductInfo/ProductInfo.tsx b/src/components/ProductInfo/ProductInfo.tsx new file mode 100644 index 0000000..cd3895a --- /dev/null +++ b/src/components/ProductInfo/ProductInfo.tsx @@ -0,0 +1,41 @@ +import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material'; + +type Product = { + id: number; + name: string; + stocks: number; + lastModified: string; +}; + +type ProductInfoProps = { + products: Product[]; +}; + +export default function ProductInfo(props: ProductInfoProps) { + const { products } = props; + + return ( + + + + + Product ID + Product Name + Stocks + Last Modified + + + + {products.map((product) => ( + + {product.id} + {product.name} + {product.stocks} + {product.lastModified} + + ))} + +
+ + ); +} diff --git a/src/components/ProductsLists/ProductsLists.tsx b/src/components/ProductsLists/ProductsLists.tsx new file mode 100644 index 0000000..0ca5980 --- /dev/null +++ b/src/components/ProductsLists/ProductsLists.tsx @@ -0,0 +1,18 @@ +const ProductsLists = [ + { + id: 1, + name: 'Product 1', + stocks: 10, + lastModified: '2022-02-24' + }, + { + id: 2, + name: 'Product 2', + stocks: 5, + lastModified: '2022-02-23' + }, + // add more products here + ]; + + export default ProductsLists; + \ No newline at end of file diff --git a/src/routes/Products/Products.tsx b/src/routes/Products/Products.tsx index 2d0326e..2f456c6 100644 --- a/src/routes/Products/Products.tsx +++ b/src/routes/Products/Products.tsx @@ -1,6 +1,9 @@ import React from "react"; import styles from "../../styles"; import ProductsIcon from "../../Components/Icons/ProductsIcon/ProductsIcon"; +import ProductInfo from "../../Components/ProductInfo/ProductInfo"; +import ProductsLists from "../../Components/ProductsLists/ProductsLists"; + export default function Products() { return (
@@ -8,6 +11,7 @@ export default function Products() {

Products

+ ); } From 03e6ac60e989613039e5b55dd11bce77ca01e152 Mon Sep 17 00:00:00 2001 From: jurenroy Date: Sat, 25 Feb 2023 18:49:36 +0800 Subject: [PATCH 02/12] Inventory Route --- src/App.tsx | 9 ++++ .../InventoryInfo/InventoryInfo.tsx | 41 +++++++++++++++++++ src/components/ProductInfo/ProductInfo.tsx | 2 - src/routes/Inventory/Inventory.tsx | 17 ++++++++ 4 files changed, 67 insertions(+), 2 deletions(-) create mode 100644 src/components/InventoryInfo/InventoryInfo.tsx create mode 100644 src/routes/Inventory/Inventory.tsx diff --git a/src/App.tsx b/src/App.tsx index 1e70851..d37fc07 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,6 +6,7 @@ import Container from "./Components/Container/Container"; import { createBrowserRouter, RouterProvider } from "react-router-dom"; import Store from "./Plugins/Redux/Store/Store"; import { Provider } from "react-redux"; +import Inventory from "./Routes/Inventory/Inventory"; const router = createBrowserRouter([ { @@ -29,6 +30,14 @@ const router = createBrowserRouter([ ), }, + { + path: "/Inventory", + element: ( + + + + ), + }, ]); export default function App() { diff --git a/src/components/InventoryInfo/InventoryInfo.tsx b/src/components/InventoryInfo/InventoryInfo.tsx new file mode 100644 index 0000000..d301cc9 --- /dev/null +++ b/src/components/InventoryInfo/InventoryInfo.tsx @@ -0,0 +1,41 @@ +import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material'; + +type Product = { + id: number; + name: string; + stocks: number; + lastModified: string; +}; + +type ProductInfoProps = { + products: Product[]; +}; + +export default function InventoryInfo(props: ProductInfoProps) { + const { products } = props; + + return ( + + + + + Product ID + Product Name + Stocks + Last Modified + + + + {products.map((product) => ( + + {product.id} + {product.name} + {product.stocks} + {product.lastModified} + + ))} + +
+ + ); +} diff --git a/src/components/ProductInfo/ProductInfo.tsx b/src/components/ProductInfo/ProductInfo.tsx index cd3895a..6afacda 100644 --- a/src/components/ProductInfo/ProductInfo.tsx +++ b/src/components/ProductInfo/ProductInfo.tsx @@ -21,7 +21,6 @@ export default function ProductInfo(props: ProductInfoProps) { Product ID Product Name - Stocks Last Modified @@ -30,7 +29,6 @@ export default function ProductInfo(props: ProductInfoProps) { {product.id} {product.name} - {product.stocks} {product.lastModified} ))} diff --git a/src/routes/Inventory/Inventory.tsx b/src/routes/Inventory/Inventory.tsx new file mode 100644 index 0000000..a8c217a --- /dev/null +++ b/src/routes/Inventory/Inventory.tsx @@ -0,0 +1,17 @@ +import React from "react"; +import styles from "../../styles"; +import InventoryIcon from "../../Components/Icons/InventoryIcon/InventoryIcon"; +import InventoryInfo from "../../Components/InventoryInfo/InventoryInfo"; +import ProductsLists from "../../Components/ProductsLists/ProductsLists"; + +export default function Inventory() { + return ( +
+
+ +

Inventory

+
+ +
+ ); +} From 1edc69ab953db9c1ee23d3a38171332d1cd36be0 Mon Sep 17 00:00:00 2001 From: jurenroy Date: Mon, 27 Feb 2023 01:51:50 +0800 Subject: [PATCH 03/12] Add Product Partial --- src/App.tsx | 9 +++ .../InventoryInfo/InventoryInfo.tsx | 10 +-- src/components/ProductInfo/ProductInfo.tsx | 10 +-- src/components/ProductType/ProductType.tsx | 7 +++ src/routes/Products/AddProduct/AddProduct.tsx | 61 +++++++++++++++++++ src/routes/Products/Products.tsx | 5 ++ 6 files changed, 86 insertions(+), 16 deletions(-) create mode 100644 src/components/ProductType/ProductType.tsx create mode 100644 src/routes/Products/AddProduct/AddProduct.tsx diff --git a/src/App.tsx b/src/App.tsx index d37fc07..05c0033 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,6 +7,7 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom"; import Store from "./Plugins/Redux/Store/Store"; import { Provider } from "react-redux"; import Inventory from "./Routes/Inventory/Inventory"; +import AddProduct from "./Routes/Products/AddProduct/AddProduct"; const router = createBrowserRouter([ { @@ -38,6 +39,14 @@ const router = createBrowserRouter([ ), }, + { + path: "/Products/AddProduct", + element: ( + + + + ), + }, ]); export default function App() { diff --git a/src/components/InventoryInfo/InventoryInfo.tsx b/src/components/InventoryInfo/InventoryInfo.tsx index d301cc9..0e15968 100644 --- a/src/components/InventoryInfo/InventoryInfo.tsx +++ b/src/components/InventoryInfo/InventoryInfo.tsx @@ -1,14 +1,8 @@ import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material'; - -type Product = { - id: number; - name: string; - stocks: number; - lastModified: string; -}; +import { ProductType } from '../ProductType/ProductType'; type ProductInfoProps = { - products: Product[]; + products: ProductType[]; }; export default function InventoryInfo(props: ProductInfoProps) { diff --git a/src/components/ProductInfo/ProductInfo.tsx b/src/components/ProductInfo/ProductInfo.tsx index 6afacda..fa04efd 100644 --- a/src/components/ProductInfo/ProductInfo.tsx +++ b/src/components/ProductInfo/ProductInfo.tsx @@ -1,14 +1,8 @@ import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material'; - -type Product = { - id: number; - name: string; - stocks: number; - lastModified: string; -}; +import { ProductType } from '../ProductType/ProductType'; type ProductInfoProps = { - products: Product[]; + products: ProductType[]; }; export default function ProductInfo(props: ProductInfoProps) { diff --git a/src/components/ProductType/ProductType.tsx b/src/components/ProductType/ProductType.tsx new file mode 100644 index 0000000..2ceafc8 --- /dev/null +++ b/src/components/ProductType/ProductType.tsx @@ -0,0 +1,7 @@ +export type ProductType = { + id: number; + name: string; + stocks: number; + lastModified: string; + }; + diff --git a/src/routes/Products/AddProduct/AddProduct.tsx b/src/routes/Products/AddProduct/AddProduct.tsx new file mode 100644 index 0000000..15b5297 --- /dev/null +++ b/src/routes/Products/AddProduct/AddProduct.tsx @@ -0,0 +1,61 @@ +import React, { useState } from "react"; +import ProductsLists from "../../../Components/ProductsLists/ProductsLists"; +import { ProductType } from "../../../Components/ProductType/ProductType"; +import styles from "../../../styles"; +import ProductsIcon from "../../../Components/Icons/ProductsIcon/ProductsIcon"; +import ProductInfo from "../../../Components/ProductInfo/ProductInfo"; + + +export default function AddProduct() { + const [name, setName] = useState(""); + const [stocks, setStocks] = useState(""); + + const handleNameChange = (event: React.ChangeEvent) => { + setName(event.target.value); + }; + + const handleStocksChange = (event: React.ChangeEvent) => { + setStocks(event.target.value); + }; + + const handleAddProduct = () => { + if (name && stocks) { + const newProduct: ProductType = { + id: ProductsLists.length + 1, + name: name, + stocks: parseInt(stocks), + lastModified: new Date().toLocaleString(), + }; + ProductsLists.push(newProduct); + } + //window.location.href = "/Products"; + }; + + const handleCancel = () => { + window.location.href = "/Products"; + }; + + return ( +
+
+ +

Products

+
+

Add Product

+ + +
+ + +
+ + + +
+ ); +} diff --git a/src/routes/Products/Products.tsx b/src/routes/Products/Products.tsx index 2f456c6..8db92ee 100644 --- a/src/routes/Products/Products.tsx +++ b/src/routes/Products/Products.tsx @@ -5,6 +5,10 @@ import ProductInfo from "../../Components/ProductInfo/ProductInfo"; import ProductsLists from "../../Components/ProductsLists/ProductsLists"; export default function Products() { + const handleAddProduct = () => { + window.location.href = "/Products/AddProduct"; + }; + return (
@@ -12,6 +16,7 @@ export default function Products() {

Products

+
); } From 151231ae1ad97c72e2c04a3ff361e6859602f951 Mon Sep 17 00:00:00 2001 From: jurenroy Date: Mon, 27 Feb 2023 02:56:46 +0800 Subject: [PATCH 04/12] Akong gisidebar ky ang array di gasave diko kabalo --- src/components/ProductsLists/ProductsLists.tsx | 6 ++++++ src/components/Sidebar/Sidebar.tsx | 8 ++++++++ src/routes/Products/AddProduct/AddProduct.tsx | 8 ++++---- 3 files changed, 18 insertions(+), 4 deletions(-) diff --git a/src/components/ProductsLists/ProductsLists.tsx b/src/components/ProductsLists/ProductsLists.tsx index 0ca5980..515a2d8 100644 --- a/src/components/ProductsLists/ProductsLists.tsx +++ b/src/components/ProductsLists/ProductsLists.tsx @@ -11,6 +11,12 @@ const ProductsLists = [ stocks: 5, lastModified: '2022-02-23' }, + { + id: 3, + name: 'Product 3', + stocks: 15, + lastModified: '2022-02-25' + }, // add more products here ]; diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx index cfbc502..c38c8bc 100644 --- a/src/components/Sidebar/Sidebar.tsx +++ b/src/components/Sidebar/Sidebar.tsx @@ -45,6 +45,14 @@ export default function Sidebar() { > + + navigate("/Products/AddProduct")} + name="Add Product" + > + + + navigate("/Inventory")} name="Inventory" diff --git a/src/routes/Products/AddProduct/AddProduct.tsx b/src/routes/Products/AddProduct/AddProduct.tsx index 15b5297..525083b 100644 --- a/src/routes/Products/AddProduct/AddProduct.tsx +++ b/src/routes/Products/AddProduct/AddProduct.tsx @@ -1,14 +1,15 @@ import React, { useState } from "react"; +import { useNavigate } from "react-router-dom"; import ProductsLists from "../../../Components/ProductsLists/ProductsLists"; import { ProductType } from "../../../Components/ProductType/ProductType"; import styles from "../../../styles"; import ProductsIcon from "../../../Components/Icons/ProductsIcon/ProductsIcon"; import ProductInfo from "../../../Components/ProductInfo/ProductInfo"; - export default function AddProduct() { const [name, setName] = useState(""); const [stocks, setStocks] = useState(""); + const navigate = useNavigate(); const handleNameChange = (event: React.ChangeEvent) => { setName(event.target.value); @@ -28,11 +29,11 @@ export default function AddProduct() { }; ProductsLists.push(newProduct); } - //window.location.href = "/Products"; + navigate("/Products"); }; const handleCancel = () => { - window.location.href = "/Products"; + navigate("/Products"); }; return ( @@ -55,7 +56,6 @@ export default function AddProduct() {
- ); } From a21adacab17e72539f6d08a20e32b30887c95b59 Mon Sep 17 00:00:00 2001 From: jurenroy Date: Mon, 27 Feb 2023 12:44:15 +0800 Subject: [PATCH 05/12] naa ra diay HAHAHAHA --- src/components/Sidebar/Sidebar.tsx | 7 ------- src/routes/Products/Products.tsx | 7 +++---- 2 files changed, 3 insertions(+), 11 deletions(-) diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx index c38c8bc..167dcec 100644 --- a/src/components/Sidebar/Sidebar.tsx +++ b/src/components/Sidebar/Sidebar.tsx @@ -46,13 +46,6 @@ export default function Sidebar() { - navigate("/Products/AddProduct")} - name="Add Product" - > - - - navigate("/Inventory")} name="Inventory" diff --git a/src/routes/Products/Products.tsx b/src/routes/Products/Products.tsx index 8db92ee..a3c1d07 100644 --- a/src/routes/Products/Products.tsx +++ b/src/routes/Products/Products.tsx @@ -1,13 +1,12 @@ import React from "react"; import styles from "../../styles"; +import { useNavigate } from "react-router-dom"; import ProductsIcon from "../../Components/Icons/ProductsIcon/ProductsIcon"; import ProductInfo from "../../Components/ProductInfo/ProductInfo"; import ProductsLists from "../../Components/ProductsLists/ProductsLists"; export default function Products() { - const handleAddProduct = () => { - window.location.href = "/Products/AddProduct"; - }; + const navigate = useNavigate(); return (
@@ -16,7 +15,7 @@ export default function Products() {

Products

- + ); } From 88049d0367b58165b5258d8c4cab9b9537a31e13 Mon Sep 17 00:00:00 2001 From: jurenroy Date: Mon, 27 Feb 2023 14:12:25 +0800 Subject: [PATCH 06/12] edit product route --- src/App.tsx | 9 ++ .../InventoryInfo/InventoryInfo.tsx | 2 +- src/components/ProductInfo/ProductInfo.tsx | 17 +++- src/routes/Products/AddProduct/AddProduct.tsx | 39 +++++--- .../Products/EditProduct/EditProduct.tsx | 99 +++++++++++++++++++ 5 files changed, 152 insertions(+), 14 deletions(-) create mode 100644 src/routes/Products/EditProduct/EditProduct.tsx diff --git a/src/App.tsx b/src/App.tsx index 05c0033..591c26a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -8,6 +8,7 @@ import Store from "./Plugins/Redux/Store/Store"; import { Provider } from "react-redux"; import Inventory from "./Routes/Inventory/Inventory"; import AddProduct from "./Routes/Products/AddProduct/AddProduct"; +import EditProduct from "./Routes/Products/EditProduct/EditProduct"; const router = createBrowserRouter([ { @@ -47,6 +48,14 @@ const router = createBrowserRouter([ ), }, + { + path: "/Products/EditProduct/:id", // Updated route with dynamic id parameter + element: ( + + + + ), + }, ]); export default function App() { diff --git a/src/components/InventoryInfo/InventoryInfo.tsx b/src/components/InventoryInfo/InventoryInfo.tsx index 0e15968..43e3915 100644 --- a/src/components/InventoryInfo/InventoryInfo.tsx +++ b/src/components/InventoryInfo/InventoryInfo.tsx @@ -22,7 +22,7 @@ export default function InventoryInfo(props: ProductInfoProps) { {products.map((product) => ( - {product.id} + {product.id.toString().padStart(3, '0')} {product.name} {product.stocks} {product.lastModified} diff --git a/src/components/ProductInfo/ProductInfo.tsx b/src/components/ProductInfo/ProductInfo.tsx index fa04efd..348f5db 100644 --- a/src/components/ProductInfo/ProductInfo.tsx +++ b/src/components/ProductInfo/ProductInfo.tsx @@ -1,5 +1,6 @@ import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material'; import { ProductType } from '../ProductType/ProductType'; +import { useNavigate } from 'react-router-dom'; type ProductInfoProps = { products: ProductType[]; @@ -7,6 +8,15 @@ type ProductInfoProps = { export default function ProductInfo(props: ProductInfoProps) { const { products } = props; + const navigate = useNavigate(); + + const handleEdit = (id: number) => { + navigate(`/Products/EditProduct/${id.toString().padStart(3, '0')}`); + }; + + const handleDelete = (id: number) => { + console.log(`Deleting product with ID ${id}`); + }; return ( @@ -16,14 +26,19 @@ export default function ProductInfo(props: ProductInfoProps) { Product ID Product Name Last Modified + Actions {products.map((product) => ( - {product.id} + {product.id.toString().padStart(3, '0')} {product.name} {product.lastModified} + + + + ))} diff --git a/src/routes/Products/AddProduct/AddProduct.tsx b/src/routes/Products/AddProduct/AddProduct.tsx index 525083b..8f67675 100644 --- a/src/routes/Products/AddProduct/AddProduct.tsx +++ b/src/routes/Products/AddProduct/AddProduct.tsx @@ -1,10 +1,17 @@ import React, { useState } from "react"; import { useNavigate } from "react-router-dom"; -import ProductsLists from "../../../Components/ProductsLists/ProductsLists"; import { ProductType } from "../../../Components/ProductType/ProductType"; +import ProductsLists from "../../../Components/ProductsLists/ProductsLists"; import styles from "../../../styles"; import ProductsIcon from "../../../Components/Icons/ProductsIcon/ProductsIcon"; -import ProductInfo from "../../../Components/ProductInfo/ProductInfo"; + +import { + Table, + TableBody, + TableCell, + TableContainer, + TableRow, +} from "@mui/material"; export default function AddProduct() { const [name, setName] = useState(""); @@ -43,16 +50,24 @@ export default function AddProduct() {

Products

Add Product

- - -
- - + + + + + Name: + + + + + + Stocks: + + + + + +
+
diff --git a/src/routes/Products/EditProduct/EditProduct.tsx b/src/routes/Products/EditProduct/EditProduct.tsx new file mode 100644 index 0000000..614c2dd --- /dev/null +++ b/src/routes/Products/EditProduct/EditProduct.tsx @@ -0,0 +1,99 @@ +import React, { useState, useEffect } from "react"; +import { useParams, useNavigate } from "react-router-dom"; +import { + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, + TextField, + IconButton, +} from "@mui/material"; +import { ProductType } from "../../../Components/ProductType/ProductType"; +import ProductsLists from "../../../Components/ProductsLists/ProductsLists"; +import styles from "../../../styles"; + +type EditProductParams = { + id?: string; +}; + +export default function EditProduct() { + const { id } = useParams(); + const navigate = useNavigate(); + + const [name, setName] = useState(""); + const [stocks, setStocks] = useState(""); + + useEffect(() => { + const product = ProductsLists.find((product) => product.id.toString() === id); + if (product) { + setName(product.name); + setStocks(product.stocks.toString()); + } + }, [id]); + + const handleNameChange = (event: React.ChangeEvent) => { + setName(event.target.value); + }; + + const handleStocksChange = (event: React.ChangeEvent) => { + setStocks(event.target.value); + }; + + const handleUpdateProduct = () => { + const updatedProduct: ProductType = { + id: parseInt(id || "0"), // add a default value of "0" for id if it's undefined + name: name, + stocks: parseInt(stocks), + lastModified: new Date().toLocaleString(), + }; + + const index = ProductsLists.findIndex((product) => product.id.toString() === id); + ProductsLists.splice(index, 1, updatedProduct); + + navigate("/Products"); + }; + + const handleCancel = () => { + navigate("/Products"); + }; + + return ( +
+
+

Edit Product

+
+ + + + + Product ID + Product Name + Stocks + + + + + {id} + {name} + + + + + +
+ +
+ + +
+ ); +} From f45170d215951222ac0ba7cbf55ff587a01c8e5e Mon Sep 17 00:00:00 2001 From: jurenroy Date: Mon, 27 Feb 2023 15:11:24 +0800 Subject: [PATCH 07/12] Edit Product final --- src/routes/Products/AddProduct/AddProduct.tsx | 3 +-- src/routes/Products/EditProduct/EditProduct.tsx | 15 ++++++--------- 2 files changed, 7 insertions(+), 11 deletions(-) diff --git a/src/routes/Products/AddProduct/AddProduct.tsx b/src/routes/Products/AddProduct/AddProduct.tsx index 8f67675..d36e1b8 100644 --- a/src/routes/Products/AddProduct/AddProduct.tsx +++ b/src/routes/Products/AddProduct/AddProduct.tsx @@ -47,9 +47,8 @@ export default function AddProduct() {
-

Products

+

Add Product

-

Add Product

diff --git a/src/routes/Products/EditProduct/EditProduct.tsx b/src/routes/Products/EditProduct/EditProduct.tsx index 614c2dd..5ffc8ed 100644 --- a/src/routes/Products/EditProduct/EditProduct.tsx +++ b/src/routes/Products/EditProduct/EditProduct.tsx @@ -8,10 +8,10 @@ import { TableHead, TableRow, TextField, - IconButton, } from "@mui/material"; import { ProductType } from "../../../Components/ProductType/ProductType"; import ProductsLists from "../../../Components/ProductsLists/ProductsLists"; +import ProductsIcon from "../../../Components/Icons/ProductsIcon/ProductsIcon"; import styles from "../../../styles"; type EditProductParams = { @@ -26,30 +26,26 @@ export default function EditProduct() { const [stocks, setStocks] = useState(""); useEffect(() => { - const product = ProductsLists.find((product) => product.id.toString() === id); + const product = ProductsLists.find((product) => product.id.toString().padStart(3, '0') === id); if (product) { setName(product.name); setStocks(product.stocks.toString()); } }, [id]); - const handleNameChange = (event: React.ChangeEvent) => { - setName(event.target.value); - }; - const handleStocksChange = (event: React.ChangeEvent) => { setStocks(event.target.value); }; const handleUpdateProduct = () => { const updatedProduct: ProductType = { - id: parseInt(id || "0"), // add a default value of "0" for id if it's undefined + id: parseInt(id || "0"), // add a default value of "0" for id if it's undefined and pad with leading zeros name: name, stocks: parseInt(stocks), lastModified: new Date().toLocaleString(), }; - const index = ProductsLists.findIndex((product) => product.id.toString() === id); + const index = ProductsLists.findIndex((product) => product.id.toString().padStart(3, '0') === id); ProductsLists.splice(index, 1, updatedProduct); navigate("/Products"); @@ -60,8 +56,9 @@ export default function EditProduct() { }; return ( -
+
+

Edit Product

From 62558a47f2fb5764e1abd6d584625cf0af9f98f1 Mon Sep 17 00:00:00 2001 From: jurenroy Date: Thu, 2 Mar 2023 18:31:21 +0800 Subject: [PATCH 08/12] Icons,Add&Delete Product, Buttons,Color Indicator --- src/components/Icons/AddIcon/AddIcon.tsx | 15 +++ .../Icons/CancelIcon/CancelIcon.tsx | 27 ++++ .../Icons/DeleteIcon/DeleteIcon.tsx | 17 +++ src/components/Icons/EditIcon/EditIcon.tsx | 19 +++ src/components/ProductInfo/ProductInfo.tsx | 50 +++++++- .../ProductsLists/ProductsLists.tsx | 6 +- src/routes/Products/AddProduct/AddProduct.tsx | 119 +++++++++++++----- .../Products/EditProduct/EditProduct.tsx | 69 +++++++--- src/routes/Products/Products.tsx | 24 +++- 9 files changed, 289 insertions(+), 57 deletions(-) create mode 100644 src/components/Icons/AddIcon/AddIcon.tsx create mode 100644 src/components/Icons/CancelIcon/CancelIcon.tsx create mode 100644 src/components/Icons/DeleteIcon/DeleteIcon.tsx create mode 100644 src/components/Icons/EditIcon/EditIcon.tsx diff --git a/src/components/Icons/AddIcon/AddIcon.tsx b/src/components/Icons/AddIcon/AddIcon.tsx new file mode 100644 index 0000000..c0bf219 --- /dev/null +++ b/src/components/Icons/AddIcon/AddIcon.tsx @@ -0,0 +1,15 @@ +import React from "react"; + +export interface props { + size: number; + color: string; +} +export default function AddIcon(props: props) { + return ( +
+ + + +
+ ); +} diff --git a/src/components/Icons/CancelIcon/CancelIcon.tsx b/src/components/Icons/CancelIcon/CancelIcon.tsx new file mode 100644 index 0000000..cefe1a8 --- /dev/null +++ b/src/components/Icons/CancelIcon/CancelIcon.tsx @@ -0,0 +1,27 @@ +import React from "react"; + +export interface props { + size: number; + color: string; +} + +export default function CancelIcon(props: props) { + return ( +
+ + + + +
+ ); +} diff --git a/src/components/Icons/DeleteIcon/DeleteIcon.tsx b/src/components/Icons/DeleteIcon/DeleteIcon.tsx new file mode 100644 index 0000000..c67f0d7 --- /dev/null +++ b/src/components/Icons/DeleteIcon/DeleteIcon.tsx @@ -0,0 +1,17 @@ +import React from "react"; + +export interface props { + size: number; + color: string; +} +export default function DeleteIcon(props: props) { + return ( +
+ + + + + +
+ ); +} diff --git a/src/components/Icons/EditIcon/EditIcon.tsx b/src/components/Icons/EditIcon/EditIcon.tsx new file mode 100644 index 0000000..3c497de --- /dev/null +++ b/src/components/Icons/EditIcon/EditIcon.tsx @@ -0,0 +1,19 @@ +import React from "react"; + +export interface props { + size: number; + color: string; +} +export default function EditIcon(props: props) { + return ( +
+ + + + + + + +
+ ); +} diff --git a/src/components/ProductInfo/ProductInfo.tsx b/src/components/ProductInfo/ProductInfo.tsx index 348f5db..1e2aca1 100644 --- a/src/components/ProductInfo/ProductInfo.tsx +++ b/src/components/ProductInfo/ProductInfo.tsx @@ -1,6 +1,10 @@ import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material'; import { ProductType } from '../ProductType/ProductType'; import { useNavigate } from 'react-router-dom'; +import styles from '../../styles'; +import EditIcon from "../../Components/Icons/EditIcon/EditIcon"; +import DeleteIcon from "../../Components/Icons/DeleteIcon/DeleteIcon"; +import ProductsLists from "../../Components/ProductsLists/ProductsLists"; type ProductInfoProps = { products: ProductType[]; @@ -15,7 +19,20 @@ export default function ProductInfo(props: ProductInfoProps) { }; const handleDelete = (id: number) => { + const newProductsList = products.filter(product => product.id !== id); console.log(`Deleting product with ID ${id}`); + console.log(newProductsList); // optional, to check that the product was removed from the array + ProductsLists.splice(id-1, 1,); + }; + + const getStocksColor = (stocks: number) => { + if (stocks >= 10) { + return 'green'; + } else if (stocks >= 4) { + return 'orange'; + } else { + return 'red'; + } }; return ( @@ -31,13 +48,40 @@ export default function ProductInfo(props: ProductInfoProps) { {products.map((product) => ( - + {product.id.toString().padStart(3, '0')} {product.name} {product.lastModified} - - +
+ + +
))} diff --git a/src/components/ProductsLists/ProductsLists.tsx b/src/components/ProductsLists/ProductsLists.tsx index 515a2d8..b66bd18 100644 --- a/src/components/ProductsLists/ProductsLists.tsx +++ b/src/components/ProductsLists/ProductsLists.tsx @@ -3,19 +3,19 @@ const ProductsLists = [ id: 1, name: 'Product 1', stocks: 10, - lastModified: '2022-02-24' + lastModified: '3/2/2023, 2:11:45 PM' }, { id: 2, name: 'Product 2', stocks: 5, - lastModified: '2022-02-23' + lastModified: '3/2/2023, 2:21:23 PM' }, { id: 3, name: 'Product 3', stocks: 15, - lastModified: '2022-02-25' + lastModified: '3/2/2023, 1:35:56 PM' }, // add more products here ]; diff --git a/src/routes/Products/AddProduct/AddProduct.tsx b/src/routes/Products/AddProduct/AddProduct.tsx index d36e1b8..687d6f8 100644 --- a/src/routes/Products/AddProduct/AddProduct.tsx +++ b/src/routes/Products/AddProduct/AddProduct.tsx @@ -1,41 +1,47 @@ import React, { useState } from "react"; import { useNavigate } from "react-router-dom"; -import { ProductType } from "../../../Components/ProductType/ProductType"; -import ProductsLists from "../../../Components/ProductsLists/ProductsLists"; -import styles from "../../../styles"; -import ProductsIcon from "../../../Components/Icons/ProductsIcon/ProductsIcon"; - import { Table, TableBody, TableCell, TableContainer, + TableHead, TableRow, + TextField, } from "@mui/material"; +import { ProductType } from "../../../Components/ProductType/ProductType"; +import ProductsLists from "../../../Components/ProductsLists/ProductsLists"; +import ProductsIcon from "../../../Components/Icons/ProductsIcon/ProductsIcon"; +import AddIcon from "../../../Components/Icons/AddIcon/AddIcon"; +import CancelIcon from "../../../Components/Icons/CancelIcon/CancelIcon"; +import styles from "../../../styles"; export default function AddProduct() { - const [name, setName] = useState(""); - const [stocks, setStocks] = useState(""); const navigate = useNavigate(); - const handleNameChange = (event: React.ChangeEvent) => { - setName(event.target.value); - }; + const [name, setName] = useState(""); + const [stocks, setStocks] = useState(""); - const handleStocksChange = (event: React.ChangeEvent) => { - setStocks(event.target.value); + const handleStocksChange = ( + event: React.ChangeEvent + ) => { + const value = parseInt(event.target.value); + if (!isNaN(value) && value >= 0) { + setStocks(value.toString()); + } }; const handleAddProduct = () => { - if (name && stocks) { - const newProduct: ProductType = { - id: ProductsLists.length + 1, - name: name, - stocks: parseInt(stocks), - lastModified: new Date().toLocaleString(), - }; - ProductsLists.push(newProduct); - } + const maxId = Math.max(...ProductsLists.map((product) => product.id)); + const newProduct: ProductType = { + id: maxId + 1, + name: name, + stocks: parseInt(stocks), + lastModified: new Date().toLocaleString(), + }; + + ProductsLists.push(newProduct); + navigate("/Products"); }; @@ -50,26 +56,73 @@ export default function AddProduct() {

Add Product

-
+
+ + + Product Name + Stocks + Actions + + - Name: - - - - - - Stocks: - - + + setName(e.target.value)} + InputProps={{ style: { color: "white" } }} + style={{ border: "1px solid white" }} + /> + + + + +
+ + +
+

- - +
+ +
); } diff --git a/src/routes/Products/EditProduct/EditProduct.tsx b/src/routes/Products/EditProduct/EditProduct.tsx index 5ffc8ed..09993f6 100644 --- a/src/routes/Products/EditProduct/EditProduct.tsx +++ b/src/routes/Products/EditProduct/EditProduct.tsx @@ -12,8 +12,11 @@ import { import { ProductType } from "../../../Components/ProductType/ProductType"; import ProductsLists from "../../../Components/ProductsLists/ProductsLists"; import ProductsIcon from "../../../Components/Icons/ProductsIcon/ProductsIcon"; +import CancelIcon from "../../../Components/Icons/CancelIcon/CancelIcon"; +import EditIcon from "../../../Components/Icons/EditIcon/EditIcon"; import styles from "../../../styles"; + type EditProductParams = { id?: string; }; @@ -26,15 +29,22 @@ export default function EditProduct() { const [stocks, setStocks] = useState(""); useEffect(() => { - const product = ProductsLists.find((product) => product.id.toString().padStart(3, '0') === id); + const product = ProductsLists.find( + (product) => product.id.toString().padStart(3, "0") === id + ); if (product) { setName(product.name); setStocks(product.stocks.toString()); } }, [id]); - const handleStocksChange = (event: React.ChangeEvent) => { - setStocks(event.target.value); + const handleStocksChange = ( + event: React.ChangeEvent + ) => { + const value = parseInt(event.target.value); + if (!isNaN(value) && value >= 0) { + setStocks(value.toString()); + } }; const handleUpdateProduct = () => { @@ -45,7 +55,9 @@ export default function EditProduct() { lastModified: new Date().toLocaleString(), }; - const index = ProductsLists.findIndex((product) => product.id.toString().padStart(3, '0') === id); + const index = ProductsLists.findIndex( + (product) => product.id.toString().padStart(3, "0") === id + ); ProductsLists.splice(index, 1, updatedProduct); navigate("/Products"); @@ -62,35 +74,64 @@ export default function EditProduct() {

Edit Product

- +
- Product ID - Product Name - Stocks + Product ID + Product Name + Stocks + Actions - + - {id} - {name} - + {id} + {name} + + +
+ + +
+

- - ); } diff --git a/src/routes/Products/Products.tsx b/src/routes/Products/Products.tsx index a3c1d07..11558f3 100644 --- a/src/routes/Products/Products.tsx +++ b/src/routes/Products/Products.tsx @@ -2,6 +2,7 @@ import React from "react"; import styles from "../../styles"; import { useNavigate } from "react-router-dom"; import ProductsIcon from "../../Components/Icons/ProductsIcon/ProductsIcon"; +import AddIcon from "../../Components/Icons/AddIcon/AddIcon"; import ProductInfo from "../../Components/ProductInfo/ProductInfo"; import ProductsLists from "../../Components/ProductsLists/ProductsLists"; @@ -10,12 +11,27 @@ export default function Products() { return (
-
- -

Products

+
+
+ +

Products

+
+
-
); } From b0b5b5cf0f30777a7912e652683f8cfe759ad7a2 Mon Sep 17 00:00:00 2001 From: keannu125 Date: Thu, 2 Mar 2023 20:42:11 +0800 Subject: [PATCH 09/12] Removed unused imports --- src/Components/ColoredCube/ColoredCube.tsx | 1 - src/Components/Login/Login.tsx | 7 ------- src/Components/Logout/Logout.tsx | 3 +-- 3 files changed, 1 insertion(+), 10 deletions(-) diff --git a/src/Components/ColoredCube/ColoredCube.tsx b/src/Components/ColoredCube/ColoredCube.tsx index 6e34a1f..9db5e10 100644 --- a/src/Components/ColoredCube/ColoredCube.tsx +++ b/src/Components/ColoredCube/ColoredCube.tsx @@ -1,4 +1,3 @@ -import { PropaneSharp } from "@mui/icons-material"; import React from "react"; export interface props { diff --git a/src/Components/Login/Login.tsx b/src/Components/Login/Login.tsx index 213121e..e8d2344 100644 --- a/src/Components/Login/Login.tsx +++ b/src/Components/Login/Login.tsx @@ -1,4 +1,3 @@ -import React, { useState } from "react"; import { useSelector, useDispatch } from "react-redux"; import { toggle } from "../../Features/Login/LoginSlice"; import { Button } from "@mui/material"; @@ -11,16 +10,10 @@ export interface state { } export default function Login() { const logged_in = useSelector((state: state) => state.logged_in.value); - const [status, setStatus] = useState("Not logged in"); const dispatch = useDispatch(); async function login() { await dispatch(toggle()); - if (logged_in) { - setStatus("Logged in"); - } else { - setStatus("Not logged in"); - } await console.log("test " + logged_in); } diff --git a/src/Components/Logout/Logout.tsx b/src/Components/Logout/Logout.tsx index 4b99181..d7c90ff 100644 --- a/src/Components/Logout/Logout.tsx +++ b/src/Components/Logout/Logout.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { useSelector, useDispatch } from "react-redux"; +import { useDispatch } from "react-redux"; import { toggle } from "../../Features/Login/LoginSlice"; import { Button } from "@mui/material"; import styles from "../../styles"; @@ -15,7 +15,6 @@ export interface props { } export default function Logout(props: props) { - const logged_in = useSelector((state: state) => state.logged_in.value); const dispatch = useDispatch(); const navigate = useNavigate(); From 95501ed4ecadd3d4cb4fb106ea70a7599f30ca70 Mon Sep 17 00:00:00 2001 From: keannu125 Date: Thu, 2 Mar 2023 20:47:12 +0800 Subject: [PATCH 10/12] Readded Inventory to routes. Created initial sampledata component --- src/App.tsx | 9 +++++++++ src/Components/SampleData/SampleData.tsx | 1 + 2 files changed, 10 insertions(+) create mode 100644 src/Components/SampleData/SampleData.tsx diff --git a/src/App.tsx b/src/App.tsx index acbbb53..c9acc6b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,6 +9,7 @@ import Store from "./Plugins/Redux/Store/Store"; import { Provider } from "react-redux"; import AddProduct from "./Routes/Products/AddProduct/AddProduct"; import EditProduct from "./Routes/Products/EditProduct/EditProduct"; +import Inventory from "./Routes/Inventory/Inventory"; const router = createBrowserRouter([ { @@ -32,6 +33,14 @@ const router = createBrowserRouter([ ), }, + { + path: "/Inventory", + element: ( + + + + ), + }, { path: "/Logs", element: ( diff --git a/src/Components/SampleData/SampleData.tsx b/src/Components/SampleData/SampleData.tsx new file mode 100644 index 0000000..0d7f5b2 --- /dev/null +++ b/src/Components/SampleData/SampleData.tsx @@ -0,0 +1 @@ +export const SampleData = {}; From 3f8e91f44d5d7d510a8e8e240c38bf633b83f4b3 Mon Sep 17 00:00:00 2001 From: keannu125 Date: Thu, 2 Mar 2023 21:55:27 +0800 Subject: [PATCH 11/12] Cleaned up codebase. Fixed icons not aligning vertically and standardized inventory, products, and logs look and feel --- src/App.tsx | 18 --- src/Components/Icons/AppLogo/AppLogo.tsx | 40 +++-- src/Components/Icons/HomeIcon/HomeIcon.tsx | 36 +++-- .../Icons/InventoryIcon/InventoryIcon.tsx | 40 +++-- .../Icons/LogoutIcon/LogoutIcon.tsx | 34 ++--- src/Components/Icons/LogsIcon/LogsIcon.tsx | 42 +++--- .../Icons/LowStockIcon/LowStockIcon.tsx | 38 +++-- .../Icons/NotFoundIcon/NotFoundIcon.tsx | 40 +++-- .../Icons/ProductsIcon/ProductsIcon.tsx | 40 +++-- .../RecentlyAddedIcon/RecentlyAddedIcon.tsx | 38 +++-- src/Components/Icons/StatsIcon/StatsIcon.tsx | 38 +++-- .../TotalProductsIcon/TotalProductsIcon.tsx | 48 +++--- src/Components/Login/Login.tsx | 3 +- src/Components/SampleData/SampleData.tsx | 62 +++++++- src/Routes/Logs/Logs.tsx | 20 +-- src/Routes/Products/Products.tsx | 79 +++++++--- src/components/Icons/AddIcon/AddIcon.tsx | 18 ++- .../Icons/CancelIcon/CancelIcon.tsx | 30 ++-- .../Icons/DeleteIcon/DeleteIcon.tsx | 22 ++- src/components/Icons/EditIcon/EditIcon.tsx | 26 ++-- src/components/ProductInfo/ProductInfo.tsx | 92 ------------ src/routes/Inventory/Inventory.tsx | 41 +++++- src/routes/Products/AddProduct/AddProduct.tsx | 128 ---------------- .../Products/EditProduct/EditProduct.tsx | 137 ------------------ src/styles.tsx | 11 ++ 25 files changed, 436 insertions(+), 685 deletions(-) delete mode 100644 src/components/ProductInfo/ProductInfo.tsx delete mode 100644 src/routes/Products/AddProduct/AddProduct.tsx delete mode 100644 src/routes/Products/EditProduct/EditProduct.tsx diff --git a/src/App.tsx b/src/App.tsx index c9acc6b..1faf3a6 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,8 +7,6 @@ import Container from "./Components/Container/Container"; import { createBrowserRouter, RouterProvider } from "react-router-dom"; import Store from "./Plugins/Redux/Store/Store"; import { Provider } from "react-redux"; -import AddProduct from "./Routes/Products/AddProduct/AddProduct"; -import EditProduct from "./Routes/Products/EditProduct/EditProduct"; import Inventory from "./Routes/Inventory/Inventory"; const router = createBrowserRouter([ @@ -49,22 +47,6 @@ const router = createBrowserRouter([ ), }, - { - path: "/Products/AddProduct", - element: ( - - - - ), - }, - { - path: "/Products/EditProduct/:id", // Updated route with dynamic id parameter - element: ( - - - - ), - }, ]); export default function App() { diff --git a/src/Components/Icons/AppLogo/AppLogo.tsx b/src/Components/Icons/AppLogo/AppLogo.tsx index 4926766..ff57b7b 100644 --- a/src/Components/Icons/AppLogo/AppLogo.tsx +++ b/src/Components/Icons/AppLogo/AppLogo.tsx @@ -6,26 +6,24 @@ export interface props { } export default function AppLogo(props: props) { return ( -
- - - - - - - - -
+ + + + + + + + ); } diff --git a/src/Components/Icons/HomeIcon/HomeIcon.tsx b/src/Components/Icons/HomeIcon/HomeIcon.tsx index 2f9bf42..8c790b9 100644 --- a/src/Components/Icons/HomeIcon/HomeIcon.tsx +++ b/src/Components/Icons/HomeIcon/HomeIcon.tsx @@ -6,24 +6,22 @@ export interface props { } export default function HomeIcon(props: props) { return ( -
- - - - - - -
+ + + + + + ); } diff --git a/src/Components/Icons/InventoryIcon/InventoryIcon.tsx b/src/Components/Icons/InventoryIcon/InventoryIcon.tsx index 669ca09..d75b5ab 100644 --- a/src/Components/Icons/InventoryIcon/InventoryIcon.tsx +++ b/src/Components/Icons/InventoryIcon/InventoryIcon.tsx @@ -6,26 +6,24 @@ export interface props { } export default function InventoryIcon(props: props) { return ( -
- - - - - - - - -
+ + + + + + + + ); } diff --git a/src/Components/Icons/LogoutIcon/LogoutIcon.tsx b/src/Components/Icons/LogoutIcon/LogoutIcon.tsx index e986e10..e892add 100644 --- a/src/Components/Icons/LogoutIcon/LogoutIcon.tsx +++ b/src/Components/Icons/LogoutIcon/LogoutIcon.tsx @@ -6,23 +6,21 @@ export interface props { } export default function LogoutIcon(props: props) { return ( -
- - - - - -
+ + + + + ); } diff --git a/src/Components/Icons/LogsIcon/LogsIcon.tsx b/src/Components/Icons/LogsIcon/LogsIcon.tsx index d125858..0368e9f 100644 --- a/src/Components/Icons/LogsIcon/LogsIcon.tsx +++ b/src/Components/Icons/LogsIcon/LogsIcon.tsx @@ -6,27 +6,25 @@ export interface props { } export default function LogsIcon(props: props) { return ( -
- - - - - - - - - -
+ + + + + + + + + ); } diff --git a/src/Components/Icons/LowStockIcon/LowStockIcon.tsx b/src/Components/Icons/LowStockIcon/LowStockIcon.tsx index f60ff6f..79588c2 100644 --- a/src/Components/Icons/LowStockIcon/LowStockIcon.tsx +++ b/src/Components/Icons/LowStockIcon/LowStockIcon.tsx @@ -6,25 +6,23 @@ export interface props { } export default function LowStockIcon(props: props) { return ( -
- - - - - - - -
+ + + + + + + ); } diff --git a/src/Components/Icons/NotFoundIcon/NotFoundIcon.tsx b/src/Components/Icons/NotFoundIcon/NotFoundIcon.tsx index 6a395b6..7b987a8 100644 --- a/src/Components/Icons/NotFoundIcon/NotFoundIcon.tsx +++ b/src/Components/Icons/NotFoundIcon/NotFoundIcon.tsx @@ -6,26 +6,24 @@ export interface props { } export default function NotFoundIcon(props: props) { return ( -
- - - - - - - - -
+ + + + + + + + ); } diff --git a/src/Components/Icons/ProductsIcon/ProductsIcon.tsx b/src/Components/Icons/ProductsIcon/ProductsIcon.tsx index 74d8832..4aa43f6 100644 --- a/src/Components/Icons/ProductsIcon/ProductsIcon.tsx +++ b/src/Components/Icons/ProductsIcon/ProductsIcon.tsx @@ -6,26 +6,24 @@ export interface props { } export default function ProductsIcon(props: props) { return ( -
- - - - - - - - -
+ + + + + + + + ); } diff --git a/src/Components/Icons/RecentlyAddedIcon/RecentlyAddedIcon.tsx b/src/Components/Icons/RecentlyAddedIcon/RecentlyAddedIcon.tsx index a5f4493..fbf7593 100644 --- a/src/Components/Icons/RecentlyAddedIcon/RecentlyAddedIcon.tsx +++ b/src/Components/Icons/RecentlyAddedIcon/RecentlyAddedIcon.tsx @@ -6,25 +6,23 @@ export interface props { } export default function RecentlyAddedIcon(props: props) { return ( -
- - - - - - - -
+ + + + + + + ); } diff --git a/src/Components/Icons/StatsIcon/StatsIcon.tsx b/src/Components/Icons/StatsIcon/StatsIcon.tsx index 02f600d..e06050c 100644 --- a/src/Components/Icons/StatsIcon/StatsIcon.tsx +++ b/src/Components/Icons/StatsIcon/StatsIcon.tsx @@ -6,25 +6,23 @@ export interface props { } export default function StatsIcon(props: props) { return ( -
- - - - - - - -
+ + + + + + + ); } diff --git a/src/Components/Icons/TotalProductsIcon/TotalProductsIcon.tsx b/src/Components/Icons/TotalProductsIcon/TotalProductsIcon.tsx index f799772..1282199 100644 --- a/src/Components/Icons/TotalProductsIcon/TotalProductsIcon.tsx +++ b/src/Components/Icons/TotalProductsIcon/TotalProductsIcon.tsx @@ -6,30 +6,28 @@ export interface props { } export default function TotalProductsIcon(props: props) { return ( -
- - - - - - - - - - - - -
+ + + + + + + + + + + + ); } diff --git a/src/Components/Login/Login.tsx b/src/Components/Login/Login.tsx index e8d2344..5986d58 100644 --- a/src/Components/Login/Login.tsx +++ b/src/Components/Login/Login.tsx @@ -11,10 +11,9 @@ export interface state { export default function Login() { const logged_in = useSelector((state: state) => state.logged_in.value); const dispatch = useDispatch(); - async function login() { await dispatch(toggle()); - await console.log("test " + logged_in); + await console.log("Login State Toggled " + logged_in); } if (logged_in) { diff --git a/src/Components/SampleData/SampleData.tsx b/src/Components/SampleData/SampleData.tsx index 0d7f5b2..4ceb9ef 100644 --- a/src/Components/SampleData/SampleData.tsx +++ b/src/Components/SampleData/SampleData.tsx @@ -1 +1,61 @@ -export const SampleData = {}; +export const SampleProducts = [ + { + id: 1, + name: "Zidane's Water", + last_modified: "2/24/2023 10:05AM", + }, + { + id: 2, + name: "Dan's Beefed Corn", + last_modified: "2/25/2023 4:05PM", + }, +]; + +export const SampleLogData = [ + { + id: 1, + p_id: 1, + p_name: "Zidane's Water", + amount_changed: -5, + timestamp: "2/24/2023 10:05AM", + }, + { + id: 2, + p_id: 1, + p_name: "Zidane's Water", + amount_changed: +10, + timestamp: "2/24/2023 1:05PM", + }, + { + id: 3, + p_id: 2, + p_name: "Dan's Beefed Corn", + amount_changed: +25, + timestamp: "2/25/2023 4:05PM", + }, + { + id: 4, + p_id: 2, + p_name: "Dan's Beefed Corn", + amount_changed: -25, + timestamp: "2/26/2023 3:35PM", + }, +]; + +export const SampleInventoryData = [ + { + id: 1, + name: "Product 1", + in_stock: 10, + }, + { + id: 2, + name: "Product 2", + in_stock: 5, + }, + { + id: 3, + name: "Product 3", + in_stock: 15, + }, +]; diff --git a/src/Routes/Logs/Logs.tsx b/src/Routes/Logs/Logs.tsx index 72df12a..559eb18 100644 --- a/src/Routes/Logs/Logs.tsx +++ b/src/Routes/Logs/Logs.tsx @@ -9,23 +9,7 @@ import { TableHead, TableRow, } from "@mui/material"; - -function createData( - id: number, - p_id: number, - p_name: string, - amount_changed: number, - timestamp: string -) { - return { id, p_id, p_name, amount_changed, timestamp }; -} - -const sample_data = [ - createData(1, 1, "Zidanes Water", -5, "2/24/2023 10:05AM"), - createData(2, 1, "Zidanes Water", +10, "2/24/2023 1:05PM"), - createData(3, 2, "Dans Beefed Corn", +25, "2/25/2023 4:05PM"), - createData(4, 2, "Dans Beefed Corn", -15, "2/26/2023 3:35PM"), -]; +import { SampleLogData } from "../../Components/SampleData/SampleData"; export default function Logs() { function change_color(amount: number) { @@ -58,7 +42,7 @@ export default function Logs() { - {sample_data.map((row) => ( + {SampleLogData.map((row) => ( -
-
- -

Products

+
+
+
+ +

Products

+
+
+ +
-
- + + + + + Product ID + Product + Last Modified + + + + {SampleProducts.map((row) => ( + + {row.id} + {row.name} + {row.last_modified} + + ))} + +
+
); } diff --git a/src/components/Icons/AddIcon/AddIcon.tsx b/src/components/Icons/AddIcon/AddIcon.tsx index c0bf219..8054588 100644 --- a/src/components/Icons/AddIcon/AddIcon.tsx +++ b/src/components/Icons/AddIcon/AddIcon.tsx @@ -6,10 +6,18 @@ export interface props { } export default function AddIcon(props: props) { return ( -
- - - -
+ + + ); } diff --git a/src/components/Icons/CancelIcon/CancelIcon.tsx b/src/components/Icons/CancelIcon/CancelIcon.tsx index cefe1a8..9d32509 100644 --- a/src/components/Icons/CancelIcon/CancelIcon.tsx +++ b/src/components/Icons/CancelIcon/CancelIcon.tsx @@ -7,21 +7,19 @@ export interface props { export default function CancelIcon(props: props) { return ( -
- - - - -
+ + + + ); } diff --git a/src/components/Icons/DeleteIcon/DeleteIcon.tsx b/src/components/Icons/DeleteIcon/DeleteIcon.tsx index c67f0d7..4386252 100644 --- a/src/components/Icons/DeleteIcon/DeleteIcon.tsx +++ b/src/components/Icons/DeleteIcon/DeleteIcon.tsx @@ -6,12 +6,20 @@ export interface props { } export default function DeleteIcon(props: props) { return ( -
- - - - - -
+ + + + + ); } diff --git a/src/components/Icons/EditIcon/EditIcon.tsx b/src/components/Icons/EditIcon/EditIcon.tsx index 3c497de..e98d881 100644 --- a/src/components/Icons/EditIcon/EditIcon.tsx +++ b/src/components/Icons/EditIcon/EditIcon.tsx @@ -6,14 +6,22 @@ export interface props { } export default function EditIcon(props: props) { return ( -
- - - - - - - -
+ + + + + + + ); } diff --git a/src/components/ProductInfo/ProductInfo.tsx b/src/components/ProductInfo/ProductInfo.tsx deleted file mode 100644 index 1e2aca1..0000000 --- a/src/components/ProductInfo/ProductInfo.tsx +++ /dev/null @@ -1,92 +0,0 @@ -import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material'; -import { ProductType } from '../ProductType/ProductType'; -import { useNavigate } from 'react-router-dom'; -import styles from '../../styles'; -import EditIcon from "../../Components/Icons/EditIcon/EditIcon"; -import DeleteIcon from "../../Components/Icons/DeleteIcon/DeleteIcon"; -import ProductsLists from "../../Components/ProductsLists/ProductsLists"; - -type ProductInfoProps = { - products: ProductType[]; -}; - -export default function ProductInfo(props: ProductInfoProps) { - const { products } = props; - const navigate = useNavigate(); - - const handleEdit = (id: number) => { - navigate(`/Products/EditProduct/${id.toString().padStart(3, '0')}`); - }; - - const handleDelete = (id: number) => { - const newProductsList = products.filter(product => product.id !== id); - console.log(`Deleting product with ID ${id}`); - console.log(newProductsList); // optional, to check that the product was removed from the array - ProductsLists.splice(id-1, 1,); - }; - - const getStocksColor = (stocks: number) => { - if (stocks >= 10) { - return 'green'; - } else if (stocks >= 4) { - return 'orange'; - } else { - return 'red'; - } - }; - - return ( - - - - - Product ID - Product Name - Last Modified - Actions - - - - {products.map((product) => ( - - {product.id.toString().padStart(3, '0')} - {product.name} - {product.lastModified} - -
- - -
- - - ))} - -
- - ); -} diff --git a/src/routes/Inventory/Inventory.tsx b/src/routes/Inventory/Inventory.tsx index a8c217a..961ee54 100644 --- a/src/routes/Inventory/Inventory.tsx +++ b/src/routes/Inventory/Inventory.tsx @@ -1,8 +1,16 @@ import React from "react"; import styles from "../../styles"; import InventoryIcon from "../../Components/Icons/InventoryIcon/InventoryIcon"; -import InventoryInfo from "../../Components/InventoryInfo/InventoryInfo"; -import ProductsLists from "../../Components/ProductsLists/ProductsLists"; +import { + Button, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, +} from "@mui/material"; +import { SampleInventoryData } from "../../Components/SampleData/SampleData"; export default function Inventory() { return ( @@ -11,7 +19,34 @@ export default function Inventory() {

Inventory

- + + + + + Product ID + Product + In Stock + + + + {SampleInventoryData.map((row) => ( + + {row.id} + {row.name} + {row.in_stock} + + ))} + +
+
); } diff --git a/src/routes/Products/AddProduct/AddProduct.tsx b/src/routes/Products/AddProduct/AddProduct.tsx deleted file mode 100644 index 687d6f8..0000000 --- a/src/routes/Products/AddProduct/AddProduct.tsx +++ /dev/null @@ -1,128 +0,0 @@ -import React, { useState } from "react"; -import { useNavigate } from "react-router-dom"; -import { - Table, - TableBody, - TableCell, - TableContainer, - TableHead, - TableRow, - TextField, -} from "@mui/material"; -import { ProductType } from "../../../Components/ProductType/ProductType"; -import ProductsLists from "../../../Components/ProductsLists/ProductsLists"; -import ProductsIcon from "../../../Components/Icons/ProductsIcon/ProductsIcon"; -import AddIcon from "../../../Components/Icons/AddIcon/AddIcon"; -import CancelIcon from "../../../Components/Icons/CancelIcon/CancelIcon"; -import styles from "../../../styles"; - -export default function AddProduct() { - const navigate = useNavigate(); - - const [name, setName] = useState(""); - const [stocks, setStocks] = useState(""); - - const handleStocksChange = ( - event: React.ChangeEvent - ) => { - const value = parseInt(event.target.value); - if (!isNaN(value) && value >= 0) { - setStocks(value.toString()); - } - }; - - const handleAddProduct = () => { - const maxId = Math.max(...ProductsLists.map((product) => product.id)); - const newProduct: ProductType = { - id: maxId + 1, - name: name, - stocks: parseInt(stocks), - lastModified: new Date().toLocaleString(), - }; - - ProductsLists.push(newProduct); - - navigate("/Products"); - }; - - const handleCancel = () => { - navigate("/Products"); - }; - - return ( -
-
- -

Add Product

-
- - - - - Product Name - Stocks - Actions - - - - - - setName(e.target.value)} - InputProps={{ style: { color: "white" } }} - style={{ border: "1px solid white" }} - /> - - - - - -
- - -
- - - -
- -
-
- -
-
- ); -} diff --git a/src/routes/Products/EditProduct/EditProduct.tsx b/src/routes/Products/EditProduct/EditProduct.tsx deleted file mode 100644 index 09993f6..0000000 --- a/src/routes/Products/EditProduct/EditProduct.tsx +++ /dev/null @@ -1,137 +0,0 @@ -import React, { useState, useEffect } from "react"; -import { useParams, useNavigate } from "react-router-dom"; -import { - Table, - TableBody, - TableCell, - TableContainer, - TableHead, - TableRow, - TextField, -} from "@mui/material"; -import { ProductType } from "../../../Components/ProductType/ProductType"; -import ProductsLists from "../../../Components/ProductsLists/ProductsLists"; -import ProductsIcon from "../../../Components/Icons/ProductsIcon/ProductsIcon"; -import CancelIcon from "../../../Components/Icons/CancelIcon/CancelIcon"; -import EditIcon from "../../../Components/Icons/EditIcon/EditIcon"; -import styles from "../../../styles"; - - -type EditProductParams = { - id?: string; -}; - -export default function EditProduct() { - const { id } = useParams(); - const navigate = useNavigate(); - - const [name, setName] = useState(""); - const [stocks, setStocks] = useState(""); - - useEffect(() => { - const product = ProductsLists.find( - (product) => product.id.toString().padStart(3, "0") === id - ); - if (product) { - setName(product.name); - setStocks(product.stocks.toString()); - } - }, [id]); - - const handleStocksChange = ( - event: React.ChangeEvent - ) => { - const value = parseInt(event.target.value); - if (!isNaN(value) && value >= 0) { - setStocks(value.toString()); - } - }; - - const handleUpdateProduct = () => { - const updatedProduct: ProductType = { - id: parseInt(id || "0"), // add a default value of "0" for id if it's undefined and pad with leading zeros - name: name, - stocks: parseInt(stocks), - lastModified: new Date().toLocaleString(), - }; - - const index = ProductsLists.findIndex( - (product) => product.id.toString().padStart(3, "0") === id - ); - ProductsLists.splice(index, 1, updatedProduct); - - navigate("/Products"); - }; - - const handleCancel = () => { - navigate("/Products"); - }; - - return ( -
-
- -

Edit Product

-
- - - - - Product ID - Product Name - Stocks - Actions - - - - - {id} - {name} - - - - -
- - -
- - - -
- -
-
- ); -} diff --git a/src/styles.tsx b/src/styles.tsx index 2702ab8..08d71e9 100644 --- a/src/styles.tsx +++ b/src/styles.tsx @@ -84,6 +84,17 @@ const styles: { [key: string]: React.CSSProperties } = { padding: 8, borderRadius: 16, }, + button_add_product: { + backgroundColor: "#80b38b", + display: "flex", + flexDirection: "row", + width: "256px", + height: "48px", + border: "none", + padding: 8, + borderRadius: 16, + gap: 4, + }, logout_button: { backgroundColor: "#0b2322", width: "30vh", From 1c8e7c9b5a85e427f505aab637e51e5c49b71ba9 Mon Sep 17 00:00:00 2001 From: keannu125 Date: Thu, 2 Mar 2023 22:03:44 +0800 Subject: [PATCH 12/12] Reimplemented color values for stocks in Inventory page --- src/routes/Inventory/Inventory.tsx | 11 ++++++++++- src/styles.tsx | 5 +++++ 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/src/routes/Inventory/Inventory.tsx b/src/routes/Inventory/Inventory.tsx index 961ee54..205d551 100644 --- a/src/routes/Inventory/Inventory.tsx +++ b/src/routes/Inventory/Inventory.tsx @@ -13,6 +13,15 @@ import { import { SampleInventoryData } from "../../Components/SampleData/SampleData"; export default function Inventory() { + function change_color(in_stock: number) { + if (in_stock > 0 && in_stock < 3) { + return {in_stock}; + } else if (in_stock > 3 && in_stock < 9) { + return {in_stock}; + } else { + return {in_stock}; + } + } return (
@@ -41,7 +50,7 @@ export default function Inventory() { > {row.id} {row.name} - {row.in_stock} + {change_color(row.in_stock)} ))} diff --git a/src/styles.tsx b/src/styles.tsx index 08d71e9..4d6af73 100644 --- a/src/styles.tsx +++ b/src/styles.tsx @@ -42,6 +42,11 @@ const styles: { [key: string]: React.CSSProperties } = { color: "#a44141", fontWeight: "bold", }, + text_orange: { + fontSize: "1.3vw", + color: "#c57331", + fontWeight: "bold", + }, text_green: { fontSize: "1.3vw", color: "#80b28a",