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

Cleaned up codebase. Fixed icons not aligning vertically and standardized inventory, products, and logs look and feel

Browse source
This commit is contained in:
keannu125 2023-03-02 21:55:27 +08:00
parent 95501ed4ec
commit 3f8e91f44d
25 changed files with 436 additions and 685 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/App.tsx
View file

@ -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([
</Container>
),
},
{
path: "/Products/AddProduct",
element: (
<Container>
<AddProduct />
</Container>
),
},
{
path: "/Products/EditProduct/:id", // Updated route with dynamic id parameter
element: (
<Container>
<EditProduct />
</Container>
),
},
]);
export default function App() {

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>
);
}

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

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

62
src/Components/SampleData/SampleData.tsx
View file

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

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 } }}

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

@ -3,35 +3,72 @@ 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";
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, justifyContent: "space-between" }}>
<div style={{ display: "flex", alignItems: "center", gap: 16 }}>
<ProductsIcon size={8} color="white" />
<h1 style={styles.text_large}>Products</h1>
<div style={styles.content_row}>
<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>
<button
onClick={() => navigate("/Products/AddProduct")}
style={{
...styles.button_primary,
display: "flex",
alignItems: "center",
gap: 8,
backgroundColor: "#1d3b33",
borderRadius: 50,
}}
>
<AddIcon size={7} color="white" />
<span style={styles.text_medium}>Add Product</span>
</button>
</div>
<ProductInfo products={ProductsLists} />
<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>
);
}

18
src/components/Icons/AddIcon/AddIcon.tsx
View file

@ -6,10 +6,18 @@ export interface props {
}
export default function AddIcon(props: props) {
return (
<div>
<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>
</div>
<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>
);
}

30
src/components/Icons/CancelIcon/CancelIcon.tsx
View file

@ -7,21 +7,19 @@ export interface props {
export default function CancelIcon(props: props) {
return (
<div>
<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>
</div>
<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>
);
}

22
src/components/Icons/DeleteIcon/DeleteIcon.tsx
View file

@ -6,12 +6,20 @@ export interface props {
}
export default function DeleteIcon(props: props) {
return (
<div>
<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>
</div>
<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>
);
}

26
src/components/Icons/EditIcon/EditIcon.tsx
View file

@ -6,14 +6,22 @@ export interface props {
}
export default function EditIcon(props: props) {
return (
<div>
<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>
</div>
<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>
);
}

92
src/components/ProductInfo/ProductInfo.tsx
View file

@ -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 (
<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell style={{ color: 'white' }}>Product ID</TableCell>
<TableCell style={{ color: 'white' }}>Product Name</TableCell>
<TableCell style={{ color: 'white' }}>Last Modified</TableCell>
<TableCell style={{ color: 'white' }}>Actions</TableCell>
</TableRow>
</TableHead>
<TableBody>
{products.map((product) => (
<TableRow
key={product.id}
style={{
backgroundColor: getStocksColor(product.stocks),
}}
>
<TableCell style={{ color: 'white' }}>{product.id.toString().padStart(3, '0')}</TableCell>
<TableCell style={{ color: 'white' }}>{product.name}</TableCell>
<TableCell style={{ color: 'white' }}>{product.lastModified}</TableCell>
<TableCell style={{ color: 'white' }}>
<div style={{ display: "flex", gap: 8 }}>
<button onClick={() => handleEdit(product.id)}
style={{
...styles.button_primary,
display: "flex",
alignItems: "center",
backgroundColor: "transparent",
borderRadius: 50,
}}>
<EditIcon size={3} color="white" />
<span style={styles.text_medium}>Edit</span>
</button>
<button onClick={() => handleDelete(product.id)}
style={{
...styles.button_primary,
display: "flex",
alignItems: "center",
backgroundColor: "transparent",
borderRadius: 50,
}}>
<DeleteIcon size={3} color="white" />
<span style={styles.text_medium}>Delete</span>
</button>
</div>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
}

41
src/routes/Inventory/Inventory.tsx
View file

@ -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() {
<InventoryIcon size={8} color="white" />
<h1 style={styles.text_large}>Inventory</h1>
</div>
<InventoryInfo products={ProductsLists} />
<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>
<TableCell style={styles.text}>{row.in_stock}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</div>
);
}

128
src/routes/Products/AddProduct/AddProduct.tsx
View file

@ -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<HTMLInputElement>
) => {
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 (
<div style={{ margin: 32, height: "100%" }}>
<div style={styles.content_row}>
<ProductsIcon size={8} color="white" />
<h1 style={styles.text_large}>Add Product</h1>
</div>
<TableContainer>
<Table style={{ color: "white" }}>
<TableHead>
<TableRow>
<TableCell style={{ color: "white"}}>Product Name</TableCell>
<TableCell style={{ color: "white"}}>Stocks</TableCell>
<TableCell style={{ color: 'white' }}>Actions</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell style={{ color: "white"}}>
<TextField
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
InputProps={{ style: { color: "white" } }}
style={{ border: "1px solid white" }}
/>
</TableCell>
<TableCell style={{ color: "white" }}>
<TextField
type="number"
value={stocks}
onChange={handleStocksChange}
InputProps={{
inputProps: { min: 0 },
style: { color: "white" },
}}
style={{ color: "white", border: "1px solid white" }}
/>
</TableCell>
<TableCell style={{ color: 'white' }}>
<div style={{ display: "flex", gap: 8 }}>
<button onClick={handleAddProduct}
style={{
...styles.button_primary,
display: "flex",
alignItems: "center",
gap: 8,
backgroundColor: "#1d3b33",
borderRadius: 50,
}}>
<AddIcon size={3} color="white" />
<span style={styles.text_medium}>Add</span>
</button>
<button onClick={handleCancel}
style={{
...styles.button_primary,
display: "flex",
alignItems: "center",
gap: 8,
backgroundColor: "#1d3b33",
borderRadius: 50,
}}>
<CancelIcon size={3} color="white" />
<span style={styles.text_medium}>Cancel</span>
</button>
</div>
</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
<br />
<div style={{ display: 'flex', gap: 16,marginLeft: 395 }}>
</div>
</div>
);
}

137
src/routes/Products/EditProduct/EditProduct.tsx
View file

@ -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<EditProductParams>();
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<HTMLInputElement>
) => {
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 (
<div style={{ margin: 32, height: "100%" }}>
<div style={styles.content_row}>
<ProductsIcon size={8} color="white" />
<h1 style={styles.text_large}>Edit Product</h1>
</div>
<TableContainer>
<Table style={{ color: "white", textAlign: "center" }}>
<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' }}>Actions</TableCell>
</TableRow>
</TableHead>
<TableBody style={{ textAlign: "center" }}>
<TableRow>
<TableCell style={{ color: "white" }}>{id}</TableCell>
<TableCell style={{ color: "white" }}>{name}</TableCell>
<TableCell style={{ color: "white" }}>
<TextField
type="number"
value={stocks}
onChange={handleStocksChange}
InputProps={{
inputProps: { min: 0 },
style: { color: "white" },
}}
style={{ color: "white", border: "1px solid white" }}
/>
</TableCell>
<TableCell style={{ color: 'white' }}>
<div style={{ display: "flex", gap: 8 }}>
<button onClick={handleUpdateProduct}
style={{
...styles.button_primary,
display: "flex",
alignItems: "center",
gap: 8,
backgroundColor: "#1d3b33",
borderRadius: 50,
}}>
<EditIcon size={3} color="white" />
<span style={styles.text_medium}>Update</span>
</button>
<button onClick={handleCancel}
style={{
...styles.button_primary,
display: "flex",
alignItems: "center",
gap: 8,
backgroundColor: "#1d3b33",
borderRadius: 50,
}}>
<CancelIcon size={3} color="white" />
<span style={styles.text_medium}>Cancel</span>
</button>
</div>
</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
<br />
</div>
);
}

11
src/styles.tsx
View file

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