diff --git a/src/App.tsx b/src/App.tsx index efe8b76..1faf3a6 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,6 +7,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([ { @@ -30,6 +31,14 @@ const router = createBrowserRouter([ ), }, + { + path: "/Inventory", + element: ( + + + + ), + }, { path: "/Logs", element: ( 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/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 213121e..5986d58 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,17 +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); + await console.log("Login State Toggled " + logged_in); } if (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(); diff --git a/src/Components/SampleData/SampleData.tsx b/src/Components/SampleData/SampleData.tsx new file mode 100644 index 0000000..4ceb9ef --- /dev/null +++ b/src/Components/SampleData/SampleData.tsx @@ -0,0 +1,61 @@ +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/Components/Sidebar/Sidebar.tsx b/src/Components/Sidebar/Sidebar.tsx index cfbc502..167dcec 100644 --- a/src/Components/Sidebar/Sidebar.tsx +++ b/src/Components/Sidebar/Sidebar.tsx @@ -45,6 +45,7 @@ export default function Sidebar() { > + navigate("/Inventory")} name="Inventory" 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 new file mode 100644 index 0000000..8054588 --- /dev/null +++ b/src/components/Icons/AddIcon/AddIcon.tsx @@ -0,0 +1,23 @@ +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..9d32509 --- /dev/null +++ b/src/components/Icons/CancelIcon/CancelIcon.tsx @@ -0,0 +1,25 @@ +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..4386252 --- /dev/null +++ b/src/components/Icons/DeleteIcon/DeleteIcon.tsx @@ -0,0 +1,25 @@ +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..e98d881 --- /dev/null +++ b/src/components/Icons/EditIcon/EditIcon.tsx @@ -0,0 +1,27 @@ +import React from "react"; + +export interface props { + size: number; + color: string; +} +export default function EditIcon(props: props) { + return ( + + + + + + + + ); +} diff --git a/src/components/InventoryInfo/InventoryInfo.tsx b/src/components/InventoryInfo/InventoryInfo.tsx new file mode 100644 index 0000000..43e3915 --- /dev/null +++ b/src/components/InventoryInfo/InventoryInfo.tsx @@ -0,0 +1,35 @@ +import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material'; +import { ProductType } from '../ProductType/ProductType'; + +type ProductInfoProps = { + products: ProductType[]; +}; + +export default function InventoryInfo(props: ProductInfoProps) { + const { products } = props; + + return ( + + + + + Product ID + Product Name + Stocks + Last Modified + + + + {products.map((product) => ( + + {product.id.toString().padStart(3, '0')} + {product.name} + {product.stocks} + {product.lastModified} + + ))} + +
+ + ); +} 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/components/ProductsLists/ProductsLists.tsx b/src/components/ProductsLists/ProductsLists.tsx new file mode 100644 index 0000000..b66bd18 --- /dev/null +++ b/src/components/ProductsLists/ProductsLists.tsx @@ -0,0 +1,24 @@ +const ProductsLists = [ + { + id: 1, + name: 'Product 1', + stocks: 10, + lastModified: '3/2/2023, 2:11:45 PM' + }, + { + id: 2, + name: 'Product 2', + stocks: 5, + lastModified: '3/2/2023, 2:21:23 PM' + }, + { + id: 3, + name: 'Product 3', + stocks: 15, + lastModified: '3/2/2023, 1:35:56 PM' + }, + // add more products here + ]; + + export default ProductsLists; + \ No newline at end of file diff --git a/src/routes/Inventory/Inventory.tsx b/src/routes/Inventory/Inventory.tsx new file mode 100644 index 0000000..205d551 --- /dev/null +++ b/src/routes/Inventory/Inventory.tsx @@ -0,0 +1,61 @@ +import React from "react"; +import styles from "../../styles"; +import InventoryIcon from "../../Components/Icons/InventoryIcon/InventoryIcon"; +import { + Button, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, +} from "@mui/material"; +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 ( +
+
+ +

Inventory

+
+ + + + + Product ID + Product + In Stock + + + + {SampleInventoryData.map((row) => ( + + {row.id} + {row.name} + {change_color(row.in_stock)} + + ))} + +
+ +
+ ); +} diff --git a/src/styles.tsx b/src/styles.tsx index 2702ab8..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", @@ -84,6 +89,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",