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",