keannu125/Ivy-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Ivy-Frontend.git synced 2024-11-17 06:39:25 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Inventory Route

Browse source
This commit is contained in:
jurenroy 2023-02-25 18:49:36 +08:00
parent 1fded3cedf
commit 03e6ac60e9
4 changed files with 67 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/App.tsx
View file

@ -6,6 +6,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([
{
@ -29,6 +30,14 @@ const router = createBrowserRouter([
</Container>
),
},
{
path: "/Inventory",
element: (
<Container>
<Inventory />
</Container>
),
},
]);
export default function App() {

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

@ -0,0 +1,41 @@
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
type Product = {
id: number;
name: string;
stocks: number;
lastModified: string;
};
type ProductInfoProps = {
products: Product[];
};
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}</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>
);
}

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

@ -21,7 +21,6 @@ export default function ProductInfo(props: ProductInfoProps) {
<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>
@ -30,7 +29,6 @@ export default function ProductInfo(props: ProductInfoProps) {
<TableRow key={product.id}>
<TableCell style={{ color: 'white' }}>{product.id}</TableCell>
<TableCell style={{ color: 'white' }}>{product.name}</TableCell>
<TableCell style={{ color: 'white' }}>{product.stocks}</TableCell>
<TableCell style={{ color: 'white' }}>{product.lastModified}</TableCell>
</TableRow>
))}

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

@ -0,0 +1,17 @@
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";
export default function Inventory() {
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>
<InventoryInfo products={ProductsLists} />
</div>
);
}