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