mirror of
https://github.com/lemeow125/Ivy-Frontend.git
synced 2025-05-14 18:41:06 +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
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue