mirror of
https://github.com/lemeow125/Ivy-Frontend.git
synced 2025-04-12 13:01:28 +08:00
Cleaned up codebase. Fixed icons not aligning vertically and standardized inventory, products, and logs look and feel
This commit is contained in:
parent
95501ed4ec
commit
3f8e91f44d
25 changed files with 436 additions and 685 deletions
18
src/App.tsx
18
src/App.tsx
|
|
@ -7,8 +7,6 @@ import Container from "./Components/Container/Container";
|
||||||
import { createBrowserRouter, RouterProvider } from "react-router-dom";
|
import { createBrowserRouter, RouterProvider } from "react-router-dom";
|
||||||
import Store from "./Plugins/Redux/Store/Store";
|
import Store from "./Plugins/Redux/Store/Store";
|
||||||
import { Provider } from "react-redux";
|
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";
|
import Inventory from "./Routes/Inventory/Inventory";
|
||||||
|
|
||||||
const router = createBrowserRouter([
|
const router = createBrowserRouter([
|
||||||
|
|
@ -49,22 +47,6 @@ const router = createBrowserRouter([
|
||||||
</Container>
|
</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() {
|
export default function App() {
|
||||||
|
|
|
||||||
|
|
@ -6,26 +6,24 @@ export interface props {
|
||||||
}
|
}
|
||||||
export default function AppLogo(props: props) {
|
export default function AppLogo(props: props) {
|
||||||
return (
|
return (
|
||||||
<div>
|
<svg
|
||||||
<svg
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
className="icon icon-tabler icon-tabler-plant-2"
|
||||||
className="icon icon-tabler icon-tabler-plant-2"
|
width={props.size + "vh"}
|
||||||
width={props.size + "vh"}
|
height={props.size + "vh"}
|
||||||
height={props.size + "vh"}
|
viewBox="0 0 24 24"
|
||||||
viewBox="0 0 24 24"
|
stroke-width="2"
|
||||||
stroke-width="2"
|
stroke={props.color}
|
||||||
stroke={props.color}
|
fill="none"
|
||||||
fill="none"
|
stroke-linecap="round"
|
||||||
stroke-linecap="round"
|
stroke-linejoin="round"
|
||||||
stroke-linejoin="round"
|
>
|
||||||
>
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
<path d="M2 9a10 10 0 1 0 20 0"></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="M12 19a10 10 0 0 1 10 -10"></path>
|
<path d="M2 9a10 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="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>
|
||||||
<path d="M9.01 11.5a9.7 9.7 0 0 1 2.99 -7.5"></path>
|
</svg>
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,24 +6,22 @@ export interface props {
|
||||||
}
|
}
|
||||||
export default function HomeIcon(props: props) {
|
export default function HomeIcon(props: props) {
|
||||||
return (
|
return (
|
||||||
<div>
|
<svg
|
||||||
<svg
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
className="icon icon-tabler icon-tabler-home-2"
|
||||||
className="icon icon-tabler icon-tabler-home-2"
|
width={props.size + "vh"}
|
||||||
width={props.size + "vh"}
|
height={props.size + "vh"}
|
||||||
height={props.size + "vh"}
|
viewBox="0 0 24 24"
|
||||||
viewBox="0 0 24 24"
|
stroke-width="2"
|
||||||
stroke-width="2"
|
stroke={props.color}
|
||||||
stroke={props.color}
|
fill="none"
|
||||||
fill="none"
|
stroke-linecap="round"
|
||||||
stroke-linecap="round"
|
stroke-linejoin="round"
|
||||||
stroke-linejoin="round"
|
>
|
||||||
>
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
<path d="M5 12l-2 0l9 -9l9 9l-2 0"></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="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></path>
|
<path d="M10 12h4v4h-4z"></path>
|
||||||
<path d="M10 12h4v4h-4z"></path>
|
</svg>
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,26 +6,24 @@ export interface props {
|
||||||
}
|
}
|
||||||
export default function InventoryIcon(props: props) {
|
export default function InventoryIcon(props: props) {
|
||||||
return (
|
return (
|
||||||
<div>
|
<svg
|
||||||
<svg
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
className="icon icon-tabler icon-tabler-box-seam"
|
||||||
className="icon icon-tabler icon-tabler-box-seam"
|
width={props.size + "vh"}
|
||||||
width={props.size + "vh"}
|
height={props.size + "vh"}
|
||||||
height={props.size + "vh"}
|
viewBox="0 0 24 24"
|
||||||
viewBox="0 0 24 24"
|
stroke-width="1"
|
||||||
stroke-width="1"
|
stroke={props.color}
|
||||||
stroke={props.color}
|
fill="none"
|
||||||
fill="none"
|
stroke-linecap="round"
|
||||||
stroke-linecap="round"
|
stroke-linejoin="round"
|
||||||
stroke-linejoin="round"
|
>
|
||||||
>
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||||
<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 3l8 4.5v9l-8 4.5l-8 -4.5v-9l8 -4.5"></path>
|
<path d="M12 12l8 -4.5"></path>
|
||||||
<path d="M12 12l8 -4.5"></path>
|
<path d="M8.2 9.8l7.6 -4.6"></path>
|
||||||
<path d="M8.2 9.8l7.6 -4.6"></path>
|
<path d="M12 12v9"></path>
|
||||||
<path d="M12 12v9"></path>
|
<path d="M12 12l-8 -4.5"></path>
|
||||||
<path d="M12 12l-8 -4.5"></path>
|
</svg>
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,23 +6,21 @@ export interface props {
|
||||||
}
|
}
|
||||||
export default function LogoutIcon(props: props) {
|
export default function LogoutIcon(props: props) {
|
||||||
return (
|
return (
|
||||||
<div>
|
<svg
|
||||||
<svg
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
className="icon icon-tabler icon-tabler-logout"
|
||||||
className="icon icon-tabler icon-tabler-logout"
|
width={props.size + "vh"}
|
||||||
width={props.size + "vh"}
|
height={props.size + "vh"}
|
||||||
height={props.size + "vh"}
|
viewBox="0 0 24 24"
|
||||||
viewBox="0 0 24 24"
|
stroke-width="1"
|
||||||
stroke-width="1"
|
stroke={props.color}
|
||||||
stroke={props.color}
|
fill="none"
|
||||||
fill="none"
|
stroke-linecap="round"
|
||||||
stroke-linecap="round"
|
stroke-linejoin="round"
|
||||||
stroke-linejoin="round"
|
>
|
||||||
>
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||||
<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="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>
|
||||||
<path d="M7 12h14l-3 -3m0 6l3 -3"></path>
|
</svg>
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,27 +6,25 @@ export interface props {
|
||||||
}
|
}
|
||||||
export default function LogsIcon(props: props) {
|
export default function LogsIcon(props: props) {
|
||||||
return (
|
return (
|
||||||
<div>
|
<svg
|
||||||
<svg
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
className="icon icon-tabler icon-tabler-clipboard-data"
|
||||||
className="icon icon-tabler icon-tabler-clipboard-data"
|
width={props.size + "vh"}
|
||||||
width={props.size + "vh"}
|
height={props.size + "vh"}
|
||||||
height={props.size + "vh"}
|
viewBox="0 0 24 24"
|
||||||
viewBox="0 0 24 24"
|
stroke-width="1"
|
||||||
stroke-width="1"
|
stroke={props.color}
|
||||||
stroke={props.color}
|
fill="none"
|
||||||
fill="none"
|
stroke-linecap="round"
|
||||||
stroke-linecap="round"
|
stroke-linejoin="round"
|
||||||
stroke-linejoin="round"
|
>
|
||||||
>
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||||
<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 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 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="M9 17v-4"></path>
|
<path d="M12 17v-1"></path>
|
||||||
<path d="M12 17v-1"></path>
|
<path d="M15 17v-2"></path>
|
||||||
<path d="M15 17v-2"></path>
|
<path d="M12 17v-1"></path>
|
||||||
<path d="M12 17v-1"></path>
|
</svg>
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,25 +6,23 @@ export interface props {
|
||||||
}
|
}
|
||||||
export default function LowStockIcon(props: props) {
|
export default function LowStockIcon(props: props) {
|
||||||
return (
|
return (
|
||||||
<div>
|
<svg
|
||||||
<svg
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
className="icon icon-tabler icon-tabler-zoom-exclamation"
|
||||||
className="icon icon-tabler icon-tabler-zoom-exclamation"
|
width={props.size + "vh"}
|
||||||
width={props.size + "vh"}
|
height={props.size + "vh"}
|
||||||
height={props.size + "vh"}
|
viewBox="0 0 24 24"
|
||||||
viewBox="0 0 24 24"
|
stroke-width="2"
|
||||||
stroke-width="2"
|
stroke={props.color}
|
||||||
stroke={props.color}
|
fill="none"
|
||||||
fill="none"
|
stroke-linecap="round"
|
||||||
stroke-linecap="round"
|
stroke-linejoin="round"
|
||||||
stroke-linejoin="round"
|
>
|
||||||
>
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||||
<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="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="M21 21l-6 -6"></path>
|
<path d="M10 13v.01"></path>
|
||||||
<path d="M10 13v.01"></path>
|
<path d="M10 7v3"></path>
|
||||||
<path d="M10 7v3"></path>
|
</svg>
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,26 +6,24 @@ export interface props {
|
||||||
}
|
}
|
||||||
export default function NotFoundIcon(props: props) {
|
export default function NotFoundIcon(props: props) {
|
||||||
return (
|
return (
|
||||||
<div>
|
<svg
|
||||||
<svg
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
className="icon icon-tabler icon-tabler-error-404"
|
||||||
className="icon icon-tabler icon-tabler-error-404"
|
width={props.size + "vh"}
|
||||||
width={props.size + "vh"}
|
height={props.size + "vh"}
|
||||||
height={props.size + "vh"}
|
viewBox="0 0 24 24"
|
||||||
viewBox="0 0 24 24"
|
stroke-width="1"
|
||||||
stroke-width="1"
|
stroke={props.color}
|
||||||
stroke={props.color}
|
fill="none"
|
||||||
fill="none"
|
stroke-linecap="round"
|
||||||
stroke-linecap="round"
|
stroke-linejoin="round"
|
||||||
stroke-linejoin="round"
|
>
|
||||||
>
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
<path d="M3 7v4a1 1 0 0 0 1 1h3"></path>
|
||||||
<path d="M3 7v4a1 1 0 0 0 1 1h3"></path>
|
<path d="M7 7v10"></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="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="M17 7v4a1 1 0 0 0 1 1h3"></path>
|
<path d="M21 7v10"></path>
|
||||||
<path d="M21 7v10"></path>
|
</svg>
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,26 +6,24 @@ export interface props {
|
||||||
}
|
}
|
||||||
export default function ProductsIcon(props: props) {
|
export default function ProductsIcon(props: props) {
|
||||||
return (
|
return (
|
||||||
<div>
|
<svg
|
||||||
<svg
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
className="icon icon-tabler icon-tabler-list-numbers"
|
||||||
className="icon icon-tabler icon-tabler-list-numbers"
|
width={props.size + "vh"}
|
||||||
width={props.size + "vh"}
|
height={props.size + "vh"}
|
||||||
height={props.size + "vh"}
|
viewBox="0 0 24 24"
|
||||||
viewBox="0 0 24 24"
|
stroke-width="1"
|
||||||
stroke-width="1"
|
stroke={props.color}
|
||||||
stroke={props.color}
|
fill="none"
|
||||||
fill="none"
|
stroke-linecap="round"
|
||||||
stroke-linecap="round"
|
stroke-linejoin="round"
|
||||||
stroke-linejoin="round"
|
>
|
||||||
>
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
<path d="M11 6h9"></path>
|
||||||
<path d="M11 6h9"></path>
|
<path d="M11 12h9"></path>
|
||||||
<path d="M11 12h9"></path>
|
<path d="M12 18h8"></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="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>
|
||||||
<path d="M6 10v-6l-2 2"></path>
|
</svg>
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,25 +6,23 @@ export interface props {
|
||||||
}
|
}
|
||||||
export default function RecentlyAddedIcon(props: props) {
|
export default function RecentlyAddedIcon(props: props) {
|
||||||
return (
|
return (
|
||||||
<div>
|
<svg
|
||||||
<svg
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
className="icon icon-tabler icon-tabler-book-upload"
|
||||||
className="icon icon-tabler icon-tabler-book-upload"
|
width={props.size + "vh"}
|
||||||
width={props.size + "vh"}
|
height={props.size + "vh"}
|
||||||
height={props.size + "vh"}
|
viewBox="0 0 24 24"
|
||||||
viewBox="0 0 24 24"
|
stroke-width="1"
|
||||||
stroke-width="1"
|
stroke={props.color}
|
||||||
stroke={props.color}
|
fill="none"
|
||||||
fill="none"
|
stroke-linecap="round"
|
||||||
stroke-linecap="round"
|
stroke-linejoin="round"
|
||||||
stroke-linejoin="round"
|
>
|
||||||
>
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||||
<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="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="M11 16h-5a2 2 0 0 0 -2 2"></path>
|
<path d="M15 16l3 -3l3 3"></path>
|
||||||
<path d="M15 16l3 -3l3 3"></path>
|
<path d="M18 13v9"></path>
|
||||||
<path d="M18 13v9"></path>
|
</svg>
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,25 +6,23 @@ export interface props {
|
||||||
}
|
}
|
||||||
export default function StatsIcon(props: props) {
|
export default function StatsIcon(props: props) {
|
||||||
return (
|
return (
|
||||||
<div>
|
<svg
|
||||||
<svg
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
className="icon icon-tabler icon-tabler-align-box-bottom-center"
|
||||||
className="icon icon-tabler icon-tabler-align-box-bottom-center"
|
width={props.size + "vh"}
|
||||||
width={props.size + "vh"}
|
height={props.size + "vh"}
|
||||||
height={props.size + "vh"}
|
viewBox="0 0 24 24"
|
||||||
viewBox="0 0 24 24"
|
stroke-width="1"
|
||||||
stroke-width="1"
|
stroke={props.color}
|
||||||
stroke={props.color}
|
fill="none"
|
||||||
fill="none"
|
stroke-linecap="round"
|
||||||
stroke-linecap="round"
|
stroke-linejoin="round"
|
||||||
stroke-linejoin="round"
|
>
|
||||||
>
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||||
<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="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="M9 15v2"></path>
|
<path d="M12 11v6"></path>
|
||||||
<path d="M12 11v6"></path>
|
<path d="M15 13v4"></path>
|
||||||
<path d="M15 13v4"></path>
|
</svg>
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,30 +6,28 @@ export interface props {
|
||||||
}
|
}
|
||||||
export default function TotalProductsIcon(props: props) {
|
export default function TotalProductsIcon(props: props) {
|
||||||
return (
|
return (
|
||||||
<div>
|
<svg
|
||||||
<svg
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
className="icon icon-tabler icon-tabler-packages"
|
||||||
className="icon icon-tabler icon-tabler-packages"
|
width={props.size + "vh"}
|
||||||
width={props.size + "vh"}
|
height={props.size + "vh"}
|
||||||
height={props.size + "vh"}
|
viewBox="0 0 24 24"
|
||||||
viewBox="0 0 24 24"
|
stroke-width="1"
|
||||||
stroke-width="1"
|
stroke={props.color}
|
||||||
stroke={props.color}
|
fill="none"
|
||||||
fill="none"
|
stroke-linecap="round"
|
||||||
stroke-linecap="round"
|
stroke-linejoin="round"
|
||||||
stroke-linejoin="round"
|
>
|
||||||
>
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
<path d="M7 16.5l-5 -3l5 -3l5 3v5.5l-5 3z"></path>
|
||||||
<path d="M7 16.5l-5 -3l5 -3l5 3v5.5l-5 3z"></path>
|
<path d="M2 13.5v5.5l5 3"></path>
|
||||||
<path d="M2 13.5v5.5l5 3"></path>
|
<path d="M7 16.545l5 -3.03"></path>
|
||||||
<path d="M7 16.545l5 -3.03"></path>
|
<path d="M17 16.5l-5 -3l5 -3l5 3v5.5l-5 3z"></path>
|
||||||
<path d="M17 16.5l-5 -3l5 -3l5 3v5.5l-5 3z"></path>
|
<path d="M12 19l5 3"></path>
|
||||||
<path d="M12 19l5 3"></path>
|
<path d="M17 16.5l5 -3"></path>
|
||||||
<path d="M17 16.5l5 -3"></path>
|
<path d="M12 13.5v-5.5l-5 -3l5 -3l5 3v5.5"></path>
|
||||||
<path d="M12 13.5v-5.5l-5 -3l5 -3l5 3v5.5"></path>
|
<path d="M7 5.03v5.455"></path>
|
||||||
<path d="M7 5.03v5.455"></path>
|
<path d="M12 8l5 -3"></path>
|
||||||
<path d="M12 8l5 -3"></path>
|
</svg>
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -11,10 +11,9 @@ export interface state {
|
||||||
export default function Login() {
|
export default function Login() {
|
||||||
const logged_in = useSelector((state: state) => state.logged_in.value);
|
const logged_in = useSelector((state: state) => state.logged_in.value);
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
|
|
||||||
async function login() {
|
async function login() {
|
||||||
await dispatch(toggle());
|
await dispatch(toggle());
|
||||||
await console.log("test " + logged_in);
|
await console.log("Login State Toggled " + logged_in);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (logged_in) {
|
if (logged_in) {
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
|
||||||
|
|
@ -9,23 +9,7 @@ import {
|
||||||
TableHead,
|
TableHead,
|
||||||
TableRow,
|
TableRow,
|
||||||
} from "@mui/material";
|
} from "@mui/material";
|
||||||
|
import { SampleLogData } from "../../Components/SampleData/SampleData";
|
||||||
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"),
|
|
||||||
];
|
|
||||||
|
|
||||||
export default function Logs() {
|
export default function Logs() {
|
||||||
function change_color(amount: number) {
|
function change_color(amount: number) {
|
||||||
|
|
@ -58,7 +42,7 @@ export default function Logs() {
|
||||||
</TableRow>
|
</TableRow>
|
||||||
</TableHead>
|
</TableHead>
|
||||||
<TableBody>
|
<TableBody>
|
||||||
{sample_data.map((row) => (
|
{SampleLogData.map((row) => (
|
||||||
<TableRow
|
<TableRow
|
||||||
key={row.id}
|
key={row.id}
|
||||||
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
|
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
|
||||||
|
|
|
||||||
|
|
@ -3,35 +3,72 @@ import styles from "../../styles";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
import ProductsIcon from "../../Components/Icons/ProductsIcon/ProductsIcon";
|
import ProductsIcon from "../../Components/Icons/ProductsIcon/ProductsIcon";
|
||||||
import AddIcon from "../../Components/Icons/AddIcon/AddIcon";
|
import AddIcon from "../../Components/Icons/AddIcon/AddIcon";
|
||||||
import ProductInfo from "../../Components/ProductInfo/ProductInfo";
|
import {
|
||||||
import ProductsLists from "../../Components/ProductsLists/ProductsLists";
|
Button,
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableContainer,
|
||||||
|
TableHead,
|
||||||
|
TableRow,
|
||||||
|
} from "@mui/material";
|
||||||
|
import { SampleProducts } from "../../Components/SampleData/SampleData";
|
||||||
|
|
||||||
export default function Products() {
|
export default function Products() {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ margin: 32, height: "100%" }}>
|
<div style={{ margin: 32, height: "100%" }}>
|
||||||
<div style={{ ...styles.content_row, justifyContent: "space-between" }}>
|
<div style={styles.content_row}>
|
||||||
<div style={{ display: "flex", alignItems: "center", gap: 16 }}>
|
<div style={{ ...styles.content_row, ...{ flex: 1 } }}>
|
||||||
<ProductsIcon size={8} color="white" />
|
<div style={{ display: "flex", alignItems: "center", gap: 16 }}>
|
||||||
<h1 style={styles.text_large}>Products</h1>
|
<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>
|
||||||
<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>
|
</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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,10 +6,18 @@ export interface props {
|
||||||
}
|
}
|
||||||
export default function AddIcon(props: props) {
|
export default function AddIcon(props: props) {
|
||||||
return (
|
return (
|
||||||
<div>
|
<svg
|
||||||
<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">
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
<path d="M12 5v14M5 12h14" />
|
width={props.size + "vh"}
|
||||||
</svg>
|
height={props.size + "vh"}
|
||||||
</div>
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke={props.color}
|
||||||
|
strokeWidth="2"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
>
|
||||||
|
<path d="M12 5v14M5 12h14" />
|
||||||
|
</svg>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,21 +7,19 @@ export interface props {
|
||||||
|
|
||||||
export default function CancelIcon(props: props) {
|
export default function CancelIcon(props: props) {
|
||||||
return (
|
return (
|
||||||
<div>
|
<svg
|
||||||
<svg
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
width={props.size + "vh"}
|
||||||
width={props.size + "vh"}
|
height={props.size + "vh"}
|
||||||
height={props.size + "vh"}
|
viewBox="0 0 24 24"
|
||||||
viewBox="0 0 24 24"
|
fill="none"
|
||||||
fill="none"
|
stroke={props.color}
|
||||||
stroke={props.color}
|
strokeWidth="2"
|
||||||
strokeWidth="2"
|
strokeLinecap="round"
|
||||||
strokeLinecap="round"
|
strokeLinejoin="round"
|
||||||
strokeLinejoin="round"
|
>
|
||||||
>
|
<circle cx="12" cy="12" r="10" />
|
||||||
<circle cx="12" cy="12" r="10" />
|
<path d="M7.5 7.5l9 9M16.5 7.5l-9 9" />
|
||||||
<path d="M7.5 7.5l9 9M16.5 7.5l-9 9" />
|
</svg>
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,12 +6,20 @@ export interface props {
|
||||||
}
|
}
|
||||||
export default function DeleteIcon(props: props) {
|
export default function DeleteIcon(props: props) {
|
||||||
return (
|
return (
|
||||||
<div>
|
<svg
|
||||||
<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">
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
<path d="M4 7h16M5 10v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2V10" />
|
width={props.size + "vh"}
|
||||||
<path d="M10 10v-3a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v3" />
|
height={props.size + "vh"}
|
||||||
<path d="M9 7h6" />
|
viewBox="0 0 24 24"
|
||||||
</svg>
|
fill="none"
|
||||||
</div>
|
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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,14 +6,22 @@ export interface props {
|
||||||
}
|
}
|
||||||
export default function EditIcon(props: props) {
|
export default function EditIcon(props: props) {
|
||||||
return (
|
return (
|
||||||
<div>
|
<svg
|
||||||
<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">
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
<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" />
|
width={props.size + "vh"}
|
||||||
<path d="M15 6h6v6" />
|
height={props.size + "vh"}
|
||||||
<path d="M10 21h5" />
|
viewBox="0 0 24 24"
|
||||||
<path d="M12 17v-5" />
|
fill="none"
|
||||||
<path d="M9 6h-6v15a2 2 0 0 0 2 2h15v-6" />
|
stroke={props.color}
|
||||||
</svg>
|
strokeWidth="2"
|
||||||
</div>
|
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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,8 +1,16 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import styles from "../../styles";
|
import styles from "../../styles";
|
||||||
import InventoryIcon from "../../Components/Icons/InventoryIcon/InventoryIcon";
|
import InventoryIcon from "../../Components/Icons/InventoryIcon/InventoryIcon";
|
||||||
import InventoryInfo from "../../Components/InventoryInfo/InventoryInfo";
|
import {
|
||||||
import ProductsLists from "../../Components/ProductsLists/ProductsLists";
|
Button,
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableContainer,
|
||||||
|
TableHead,
|
||||||
|
TableRow,
|
||||||
|
} from "@mui/material";
|
||||||
|
import { SampleInventoryData } from "../../Components/SampleData/SampleData";
|
||||||
|
|
||||||
export default function Inventory() {
|
export default function Inventory() {
|
||||||
return (
|
return (
|
||||||
|
|
@ -11,7 +19,34 @@ export default function Inventory() {
|
||||||
<InventoryIcon size={8} color="white" />
|
<InventoryIcon size={8} color="white" />
|
||||||
<h1 style={styles.text_large}>Inventory</h1>
|
<h1 style={styles.text_large}>Inventory</h1>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -84,6 +84,17 @@ const styles: { [key: string]: React.CSSProperties } = {
|
||||||
padding: 8,
|
padding: 8,
|
||||||
borderRadius: 16,
|
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: {
|
logout_button: {
|
||||||
backgroundColor: "#0b2322",
|
backgroundColor: "#0b2322",
|
||||||
width: "30vh",
|
width: "30vh",
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue