keannu125/Ivy-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Ivy-Frontend.git synced 2024-11-16 22:29:24 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #5 from lemeow125/Juren

Browse source 
Juren
This commit is contained in:
lemeow125 2023-03-02 22:04:41 +08:00 committed by GitHub
commit 2f1c2a7399
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
28 changed files with 587 additions and 260 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/App.tsx
View file

@ -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([
</Container>
),
},
{
path: "/Inventory",
element: (
<Container>
<Inventory />
</Container>
),
},
{
path: "/Logs",
element: (

1
src/Components/ColoredCube/ColoredCube.tsx
View file

@ -1,4 +1,3 @@
import { PropaneSharp } from "@mui/icons-material";
import React from "react";
export interface props {

40
src/Components/Icons/AppLogo/AppLogo.tsx
View file

@ -6,26 +6,24 @@ export interface props {
}
export default function AppLogo(props: props) {
return (
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-plant-2"
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
stroke-width="2"
stroke={props.color}
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M2 9a10 10 0 1 0 20 0"></path>
<path d="M12 19a10 10 0 0 1 10 -10"></path>
<path d="M2 9a10 10 0 0 1 10 10"></path>
<path d="M12 4a9.7 9.7 0 0 1 2.99 7.5"></path>
<path d="M9.01 11.5a9.7 9.7 0 0 1 2.99 -7.5"></path>
</svg>
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-plant-2"
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
stroke-width="2"
stroke={props.color}
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M2 9a10 10 0 1 0 20 0"></path>
<path d="M12 19a10 10 0 0 1 10 -10"></path>
<path d="M2 9a10 10 0 0 1 10 10"></path>
<path d="M12 4a9.7 9.7 0 0 1 2.99 7.5"></path>
<path d="M9.01 11.5a9.7 9.7 0 0 1 2.99 -7.5"></path>
</svg>
);
}

36
src/Components/Icons/HomeIcon/HomeIcon.tsx
View file

@ -6,24 +6,22 @@ export interface props {
}
export default function HomeIcon(props: props) {
return (
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-home-2"
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
stroke-width="2"
stroke={props.color}
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M5 12l-2 0l9 -9l9 9l-2 0"></path>
<path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></path>
<path d="M10 12h4v4h-4z"></path>
</svg>
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-home-2"
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
stroke-width="2"
stroke={props.color}
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M5 12l-2 0l9 -9l9 9l-2 0"></path>
<path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></path>
<path d="M10 12h4v4h-4z"></path>
</svg>
);
}

40
src/Components/Icons/InventoryIcon/InventoryIcon.tsx
View file

@ -6,26 +6,24 @@ export interface props {
}
export default function InventoryIcon(props: props) {
return (
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-box-seam"
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 3l8 4.5v9l-8 4.5l-8 -4.5v-9l8 -4.5"></path>
<path d="M12 12l8 -4.5"></path>
<path d="M8.2 9.8l7.6 -4.6"></path>
<path d="M12 12v9"></path>
<path d="M12 12l-8 -4.5"></path>
</svg>
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-box-seam"
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 3l8 4.5v9l-8 4.5l-8 -4.5v-9l8 -4.5"></path>
<path d="M12 12l8 -4.5"></path>
<path d="M8.2 9.8l7.6 -4.6"></path>
<path d="M12 12v9"></path>
<path d="M12 12l-8 -4.5"></path>
</svg>
);
}

34
src/Components/Icons/LogoutIcon/LogoutIcon.tsx
View file

@ -6,23 +6,21 @@ export interface props {
}
export default function LogoutIcon(props: props) {
return (
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-logout"
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2"></path>
<path d="M7 12h14l-3 -3m0 6l3 -3"></path>
</svg>
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-logout"
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2"></path>
<path d="M7 12h14l-3 -3m0 6l3 -3"></path>
</svg>
);
}

42
src/Components/Icons/LogsIcon/LogsIcon.tsx
View file

@ -6,27 +6,25 @@ export interface props {
}
export default function LogsIcon(props: props) {
return (
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-clipboard-data"
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2"></path>
<path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path>
<path d="M9 17v-4"></path>
<path d="M12 17v-1"></path>
<path d="M15 17v-2"></path>
<path d="M12 17v-1"></path>
</svg>
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-clipboard-data"
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2"></path>
<path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path>
<path d="M9 17v-4"></path>
<path d="M12 17v-1"></path>
<path d="M15 17v-2"></path>
<path d="M12 17v-1"></path>
</svg>
);
}

38
src/Components/Icons/LowStockIcon/LowStockIcon.tsx
View file

@ -6,25 +6,23 @@ export interface props {
}
export default function LowStockIcon(props: props) {
return (
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-zoom-exclamation"
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
stroke-width="2"
stroke={props.color}
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
<path d="M21 21l-6 -6"></path>
<path d="M10 13v.01"></path>
<path d="M10 7v3"></path>
</svg>
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-zoom-exclamation"
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
stroke-width="2"
stroke={props.color}
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
<path d="M21 21l-6 -6"></path>
<path d="M10 13v.01"></path>
<path d="M10 7v3"></path>
</svg>
);
}

40
src/Components/Icons/NotFoundIcon/NotFoundIcon.tsx
View file

@ -6,26 +6,24 @@ export interface props {
}
export default function NotFoundIcon(props: props) {
return (
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-error-404"
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M3 7v4a1 1 0 0 0 1 1h3"></path>
<path d="M7 7v10"></path>
<path d="M10 8v8a1 1 0 0 0 1 1h2a1 1 0 0 0 1 -1v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1z"></path>
<path d="M17 7v4a1 1 0 0 0 1 1h3"></path>
<path d="M21 7v10"></path>
</svg>
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-error-404"
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M3 7v4a1 1 0 0 0 1 1h3"></path>
<path d="M7 7v10"></path>
<path d="M10 8v8a1 1 0 0 0 1 1h2a1 1 0 0 0 1 -1v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1z"></path>
<path d="M17 7v4a1 1 0 0 0 1 1h3"></path>
<path d="M21 7v10"></path>
</svg>
);
}

40
src/Components/Icons/ProductsIcon/ProductsIcon.tsx
View file

@ -6,26 +6,24 @@ export interface props {
}
export default function ProductsIcon(props: props) {
return (
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-list-numbers"
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M11 6h9"></path>
<path d="M11 12h9"></path>
<path d="M12 18h8"></path>
<path d="M4 16a2 2 0 1 1 4 0c0 .591 -.5 1 -1 1.5l-3 2.5h4"></path>
<path d="M6 10v-6l-2 2"></path>
</svg>
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-list-numbers"
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M11 6h9"></path>
<path d="M11 12h9"></path>
<path d="M12 18h8"></path>
<path d="M4 16a2 2 0 1 1 4 0c0 .591 -.5 1 -1 1.5l-3 2.5h4"></path>
<path d="M6 10v-6l-2 2"></path>
</svg>
);
}

38
src/Components/Icons/RecentlyAddedIcon/RecentlyAddedIcon.tsx
View file

@ -6,25 +6,23 @@ export interface props {
}
export default function RecentlyAddedIcon(props: props) {
return (
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-book-upload"
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M14 20h-8a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12v5"></path>
<path d="M11 16h-5a2 2 0 0 0 -2 2"></path>
<path d="M15 16l3 -3l3 3"></path>
<path d="M18 13v9"></path>
</svg>
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-book-upload"
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M14 20h-8a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12v5"></path>
<path d="M11 16h-5a2 2 0 0 0 -2 2"></path>
<path d="M15 16l3 -3l3 3"></path>
<path d="M18 13v9"></path>
</svg>
);
}

38
src/Components/Icons/StatsIcon/StatsIcon.tsx
View file

@ -6,25 +6,23 @@ export interface props {
}
export default function StatsIcon(props: props) {
return (
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-align-box-bottom-center"
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"></path>
<path d="M9 15v2"></path>
<path d="M12 11v6"></path>
<path d="M15 13v4"></path>
</svg>
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-align-box-bottom-center"
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"></path>
<path d="M9 15v2"></path>
<path d="M12 11v6"></path>
<path d="M15 13v4"></path>
</svg>
);
}

48
src/Components/Icons/TotalProductsIcon/TotalProductsIcon.tsx
View file

@ -6,30 +6,28 @@ export interface props {
}
export default function TotalProductsIcon(props: props) {
return (
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-packages"
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M7 16.5l-5 -3l5 -3l5 3v5.5l-5 3z"></path>
<path d="M2 13.5v5.5l5 3"></path>
<path d="M7 16.545l5 -3.03"></path>
<path d="M17 16.5l-5 -3l5 -3l5 3v5.5l-5 3z"></path>
<path d="M12 19l5 3"></path>
<path d="M17 16.5l5 -3"></path>
<path d="M12 13.5v-5.5l-5 -3l5 -3l5 3v5.5"></path>
<path d="M7 5.03v5.455"></path>
<path d="M12 8l5 -3"></path>
</svg>
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-packages"
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
stroke-width="1"
stroke={props.color}
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M7 16.5l-5 -3l5 -3l5 3v5.5l-5 3z"></path>
<path d="M2 13.5v5.5l5 3"></path>
<path d="M7 16.545l5 -3.03"></path>
<path d="M17 16.5l-5 -3l5 -3l5 3v5.5l-5 3z"></path>
<path d="M12 19l5 3"></path>
<path d="M17 16.5l5 -3"></path>
<path d="M12 13.5v-5.5l-5 -3l5 -3l5 3v5.5"></path>
<path d="M7 5.03v5.455"></path>
<path d="M12 8l5 -3"></path>
</svg>
);
}

10
src/Components/Login/Login.tsx
View file

@ -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) {

3
src/Components/Logout/Logout.tsx
View file

@ -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();

61
src/Components/SampleData/SampleData.tsx Normal file
View file

@ -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,
},
];

1
src/Components/Sidebar/Sidebar.tsx
View file

@ -45,6 +45,7 @@ export default function Sidebar() {
>
<ProductsIcon size={4} color="white" />
</SidebarButton>
<SidebarButton
onClick={() => navigate("/Inventory")}
name="Inventory"

20
src/Routes/Logs/Logs.tsx
View file

@ -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() {
</TableRow>
</TableHead>
<TableBody>
{sample_data.map((row) => (
{SampleLogData.map((row) => (
<TableRow
key={row.id}
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}

65
src/Routes/Products/Products.tsx
View file

@ -1,13 +1,74 @@
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 {
Button,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
} from "@mui/material";
import { SampleProducts } from "../../Components/SampleData/SampleData";
export default function Products() {
const navigate = useNavigate();
return (
<div style={{ margin: 32, height: "100%" }}>
<div style={styles.content_row}>
<ProductsIcon size={8} color="white" />
<h1 style={styles.text_large}>Products</h1>
<div style={{ ...styles.content_row, ...{ flex: 1 } }}>
<div style={{ display: "flex", alignItems: "center", gap: 16 }}>
<ProductsIcon size={8} color="white" />
<h1 style={styles.text_large}>Products</h1>
</div>
<div
style={{
...styles.content_row,
...{ flex: 1, justifyContent: "flex-end" },
}}
>
<Button
onClick={() => navigate("/Products/AddProduct")}
style={styles.button_add_product}
>
<AddIcon size={8} color="white" />
<p style={styles.text_medium}>Add Product</p>
</Button>
</div>
</div>
</div>
<TableContainer
style={{
backgroundColor: "#1d3b33",
borderRadius: 8,
}}
>
<Table sx={{ minWidth: 650 }} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell style={styles.text}>Product ID</TableCell>
<TableCell style={styles.text}>Product</TableCell>
<TableCell style={styles.text}>Last Modified</TableCell>
</TableRow>
</TableHead>
<TableBody>
{SampleProducts.map((row) => (
<TableRow
key={row.id}
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
>
<TableCell style={styles.text}>{row.id}</TableCell>
<TableCell style={styles.text}>{row.name}</TableCell>
<TableCell style={styles.text}>{row.last_modified}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</div>
);
}

23
src/components/Icons/AddIcon/AddIcon.tsx Normal file
View file

@ -0,0 +1,23 @@
import React from "react";
export interface props {
size: number;
color: string;
}
export default function AddIcon(props: props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
fill="none"
stroke={props.color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M12 5v14M5 12h14" />
</svg>
);
}

25
src/components/Icons/CancelIcon/CancelIcon.tsx Normal file
View file

@ -0,0 +1,25 @@
import React from "react";
export interface props {
size: number;
color: string;
}
export default function CancelIcon(props: props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
fill="none"
stroke={props.color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<circle cx="12" cy="12" r="10" />
<path d="M7.5 7.5l9 9M16.5 7.5l-9 9" />
</svg>
);
}

25
src/components/Icons/DeleteIcon/DeleteIcon.tsx Normal file
View file

@ -0,0 +1,25 @@
import React from "react";
export interface props {
size: number;
color: string;
}
export default function DeleteIcon(props: props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
fill="none"
stroke={props.color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M4 7h16M5 10v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2V10" />
<path d="M10 10v-3a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v3" />
<path d="M9 7h6" />
</svg>
);
}

27
src/components/Icons/EditIcon/EditIcon.tsx Normal file
View file

@ -0,0 +1,27 @@
import React from "react";
export interface props {
size: number;
color: string;
}
export default function EditIcon(props: props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={props.size + "vh"}
height={props.size + "vh"}
viewBox="0 0 24 24"
fill="none"
stroke={props.color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M3 17l-1.557 -4.386a2 2 0 0 1 1.923 -2.614h12.268a2 2 0 0 1 1.923 2.614l-1.558 4.386" />
<path d="M15 6h6v6" />
<path d="M10 21h5" />
<path d="M12 17v-5" />
<path d="M9 6h-6v15a2 2 0 0 0 2 2h15v-6" />
</svg>
);
}

35
src/components/InventoryInfo/InventoryInfo.tsx Normal file
View file

@ -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 (
<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell style={{ color: 'white' }}>Product ID</TableCell>
<TableCell style={{ color: 'white' }}>Product Name</TableCell>
<TableCell style={{ color: 'white' }}>Stocks</TableCell>
<TableCell style={{ color: 'white' }}>Last Modified</TableCell>
</TableRow>
</TableHead>
<TableBody>
{products.map((product) => (
<TableRow key={product.id}>
<TableCell style={{ color: 'white' }}>{product.id.toString().padStart(3, '0')}</TableCell>
<TableCell style={{ color: 'white' }}>{product.name}</TableCell>
<TableCell style={{ color: 'white' }}>{product.stocks}</TableCell>
<TableCell style={{ color: 'white' }}>{product.lastModified}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
}

7
src/components/ProductType/ProductType.tsx Normal file
View file

@ -0,0 +1,7 @@
export type ProductType = {
id: number;
name: string;
stocks: number;
lastModified: string;
};

24
src/components/ProductsLists/ProductsLists.tsx Normal file
View file

@ -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;

61
src/routes/Inventory/Inventory.tsx Normal file
View file

@ -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 <TableCell style={styles.text_red}>{in_stock}</TableCell>;
} else if (in_stock > 3 && in_stock < 9) {
return <TableCell style={styles.text_orange}>{in_stock}</TableCell>;
} else {
return <TableCell style={styles.text_green}>{in_stock}</TableCell>;
}
}
return (
<div style={{ margin: 32, height: "100%" }}>
<div style={styles.content_row}>
<InventoryIcon size={8} color="white" />
<h1 style={styles.text_large}>Inventory</h1>
</div>
<TableContainer
style={{
backgroundColor: "#1d3b33",
borderRadius: 8,
}}
>
<Table sx={{ minWidth: 650 }} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell style={styles.text}>Product ID</TableCell>
<TableCell style={styles.text}>Product</TableCell>
<TableCell style={styles.text}>In Stock</TableCell>
</TableRow>
</TableHead>
<TableBody>
{SampleInventoryData.map((row) => (
<TableRow
key={row.id}
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
>
<TableCell style={styles.text}>{row.id}</TableCell>
<TableCell style={styles.text}>{row.name}</TableCell>
{change_color(row.in_stock)}
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</div>
);
}

16
src/styles.tsx
View file

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