keannu125/Ivy-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Ivy-Frontend.git synced 2025-05-14 18:41:06 +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:
Keannu Christian Bernasol 2023-03-02 21:55:27 +08:00
parent 95501ed4ec
commit 3f8e91f44d
25 changed files with 436 additions and 685 deletions
Download patch file Download diff file Expand all files Collapse all files

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