mirror of
https://github.com/lemeow125/Ivy-Frontend.git
synced 2025-05-14 10:31:07 +08:00
Resolve merge conflict App.tsx
This commit is contained in:
commit
e508733c5f
24 changed files with 97 additions and 7 deletions
104
src/Routes/Dashboard/Dashboard.tsx
Normal file
104
src/Routes/Dashboard/Dashboard.tsx
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
import React from "react";
|
||||
import TotalProductsIcon from "../../Components/Icons/TotalProductsIcon/TotalProductsIcon";
|
||||
import LowStockIcon from "../../Components/Icons/LowStockIcon/LowStockIcon";
|
||||
import StatsIcon from "../../Components/Icons/StatsIcon/StatsIcon";
|
||||
import LogsIcon from "../../Components/Icons/LogsIcon/LogsIcon";
|
||||
import "../../index.css";
|
||||
import styles from "../../styles";
|
||||
import HomeIcon from "../../Components/Icons/HomeIcon/HomeIcon";
|
||||
import ColoredCube from "../../Components/ColoredCube/ColoredCube";
|
||||
import RecentlyAddedIcon from "../../Components/Icons/RecentlyAddedIcon/RecentlyAddedIcon";
|
||||
|
||||
export default function Dashboard() {
|
||||
return (
|
||||
<div style={{ margin: 32, height: "100%" }}>
|
||||
<div style={styles.flex_row}>
|
||||
<HomeIcon size={8} color="white" />
|
||||
<h1 style={styles.text_large}>Dashboard</h1>
|
||||
</div>
|
||||
<div style={{ display: "flex", flexDirection: "row" }}>
|
||||
<div style={{ flex: 7 }}>
|
||||
<div style={styles.flex_column}>
|
||||
<div style={{ ...styles.widget, ...{ flex: 5 } }}>
|
||||
<div style={styles.content_row}>
|
||||
<TotalProductsIcon size={8} color="white" />
|
||||
<h1 style={styles.text_extra_large}>Total Products</h1>
|
||||
</div>
|
||||
<h1 style={styles.text_large}>2546 Unique Items</h1>
|
||||
<h1 style={styles.text_large}>In inventory</h1>
|
||||
</div>
|
||||
<div style={styles.flex_row}>
|
||||
<div style={{ ...styles.widget, ...{ flex: 6 } }}>
|
||||
<div style={styles.content_row}>
|
||||
<StatsIcon size={8} color="white" />
|
||||
<h1 style={styles.text_large}>Current Session</h1>
|
||||
</div>
|
||||
<div style={styles.content_row}>
|
||||
<ColoredCube size={3} color="#a48e41" />
|
||||
<h1 style={styles.text_large}>Added</h1>
|
||||
</div>
|
||||
<h1 style={styles.text_large}>254</h1>
|
||||
<div style={styles.content_row}>
|
||||
<ColoredCube size={3} color="#a44141" />
|
||||
<h1 style={styles.text_large}>Removed</h1>{" "}
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ ...styles.flex_column, ...{ flex: 4 } }}>
|
||||
<div style={{ ...styles.widget, ...{ flex: 1 } }}>
|
||||
<div style={styles.content_row}>
|
||||
<LowStockIcon size={8} color="white" />
|
||||
<h1 style={styles.text_medium}>Low Stock</h1>
|
||||
</div>
|
||||
<h1 style={styles.text_medium}>Canned Pagmamahal</h1>
|
||||
<h1 style={styles.text_tiny}>In Stock: 3</h1>
|
||||
</div>
|
||||
<div style={{ ...styles.widget, ...{ flex: 1 } }}>
|
||||
<div style={styles.content_row}>
|
||||
<RecentlyAddedIcon size={8} color="white" />
|
||||
<h1 style={styles.text_medium}>Recently Added</h1>
|
||||
</div>
|
||||
<h1 style={styles.text_medium}>Zidane's Water</h1>
|
||||
<h1 style={styles.text_tiny}>Added 02/17/2023</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ flex: 3 }}>
|
||||
<div style={styles.widget}>
|
||||
<div style={styles.content_row}>
|
||||
<LogsIcon size={8} color="white" />
|
||||
<div style={styles.wrapper_column}>
|
||||
<h1 style={styles.text_medium}>Recent</h1>
|
||||
<h1 style={styles.text_medium}>Transactions</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginBottom: "2vh" }} />
|
||||
<h1 style={styles.text}>Kopiko Blanca</h1>
|
||||
<h1 style={styles.text_small}>Added: 96</h1>
|
||||
<h1 style={styles.text_small}>Removed: 105</h1>
|
||||
<h1 style={styles.text_tiny}>02/17/2023</h1>
|
||||
<div style={{ marginBottom: "2vh" }} />
|
||||
<h1 style={styles.text}>Zidane's Water</h1>
|
||||
<h1 style={styles.text_small}>Added: 49</h1>
|
||||
<h1 style={styles.text_small}>Removed: 24</h1>
|
||||
<h1 style={styles.text_tiny}>02/17/2023</h1>
|
||||
<div style={{ marginBottom: "2vh" }} />
|
||||
<h1 style={styles.text}>Dan's Beefed Corn</h1>
|
||||
<h1 style={styles.text_small}>Added: 32</h1>
|
||||
<h1 style={styles.text_small}>Removed: 64</h1>
|
||||
<h1 style={styles.text_tiny}>02/17/2023</h1>
|
||||
<div style={{ marginBottom: "2vh" }} />
|
||||
<div style={styles.content_column}>
|
||||
<h1 style={styles.text}>Canned</h1>
|
||||
<h1 style={styles.text}>Pagmamahal</h1>
|
||||
</div>
|
||||
<h1 style={styles.text_small}>Added: 0</h1>
|
||||
<h1 style={styles.text_small}>Removed: 60</h1>
|
||||
<h1 style={styles.text_tiny}>02/17/2023</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
14
src/Routes/Error/Error.tsx
Normal file
14
src/Routes/Error/Error.tsx
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import React from "react";
|
||||
import styles from "../../styles";
|
||||
import NotFoundIcon from "../../Components/Icons/NotFoundIcon/NotFoundIcon";
|
||||
|
||||
export default function Error() {
|
||||
return (
|
||||
<div style={styles.content_center}>
|
||||
<div style={styles.content_column}>
|
||||
<NotFoundIcon size={64} color="#a44141" />
|
||||
<p style={styles.text}>Could not find the requested page</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
78
src/Routes/Logs/Logs.tsx
Normal file
78
src/Routes/Logs/Logs.tsx
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
import * as React from "react";
|
||||
import LogsIcon from "../../Components/Icons/LogsIcon/LogsIcon";
|
||||
import styles from "../../styles";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
} from "@mui/material";
|
||||
|
||||
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() {
|
||||
function change_color(amount: number) {
|
||||
if (amount > 0) {
|
||||
return <TableCell style={styles.text_green}>{amount}</TableCell>;
|
||||
} else {
|
||||
return <TableCell style={styles.text_red}>{amount}</TableCell>;
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div style={{ margin: 32, height: "100%" }}>
|
||||
<div style={styles.flex_row}>
|
||||
<LogsIcon size={8} color="white" />
|
||||
<h1 style={styles.text_large}>Logs</h1>
|
||||
</div>
|
||||
<TableContainer
|
||||
style={{
|
||||
backgroundColor: "#1d3b33",
|
||||
borderRadius: 8,
|
||||
}}
|
||||
>
|
||||
<Table sx={{ minWidth: 650 }} aria-label="simple table">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell style={styles.text}>Log ID</TableCell>
|
||||
<TableCell style={styles.text}>Product ID</TableCell>
|
||||
<TableCell style={styles.text}>Product</TableCell>
|
||||
<TableCell style={styles.text}>Amount Change</TableCell>
|
||||
<TableCell style={styles.text}>Timestamp</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{sample_data.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.p_id}</TableCell>
|
||||
<TableCell style={styles.text}>{row.p_name}</TableCell>
|
||||
{change_color(row.amount_changed)}
|
||||
<TableCell style={styles.text}>{row.timestamp}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
37
src/Routes/Products/Products.tsx
Normal file
37
src/Routes/Products/Products.tsx
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
import React from "react";
|
||||
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";
|
||||
|
||||
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>
|
||||
<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} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue