keannu125/Borrowing-TrackerFrontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Borrowing-TrackerFrontend.git synced 2025-05-17 11:58:14 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added initial widgets in dashboard

Browse source
This commit is contained in:
Keannu Christian Bernasol 2023-11-20 01:56:05 +08:00
parent 45c9fd588a
commit 2c0ae6770c
5 changed files with 235 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

182
src/Pages/DashboardPage/DashboardPage.tsx
View file

@ -1,11 +1,191 @@
import Header from "../../Components/Header/Header";
import styles from "../../styles";
import { useQueries } from "@tanstack/react-query";
import { EquipmentsAPI, EquipmentInstancesAPI } from "../../Components/API/API";
import { CircularProgress } from "@mui/material";
export default function Dashboard() {
const queries = useQueries({
queries: [
{
queryKey: ["equipments"],
queryFn: EquipmentsAPI,
},
{
queryKey: ["equipment_instances"],
queryFn: EquipmentInstancesAPI,
},
],
});
const isLoading = queries.some((result) => result.isLoading);
if (isLoading) {
return (
<div style={styles.background}>
<Header label={"Dashboard"} />
<div
style={{
...styles.flex_column,
...{
alignItems: "center",
justifyContent: "center",
paddingTop: "64px",
},
}}
>
<CircularProgress style={{ height: "128px", width: "128px" }} />
<p
style={{
...styles.text_dark,
...styles.text_L,
}}
>
Loading
</p>
</div>
</div>
);
}
return (
<div style={styles.background}>
<Header label={"Dashboard"} />
<p style={{ ...styles.text_dark, ...styles.text_M }}>Dashboard Page</p>
<div style={styles.flex_column}>
<div style={{ ...styles.flex_row, ...{ alignSelf: "center" } }}>
<div
style={{
paddingLeft: "16px",
paddingRight: "16px",
margin: "16px",
borderRadius: 16,
backgroundColor: "#a6a6a6",
alignSelf: "center",
justifyContent: "center",
width: "512px",
}}
>
<p
style={{
...styles.text_dark,
...styles.text_M,
...{ float: "left", position: "absolute" },
}}
>
Item Types in System
</p>
<p
style={{
...styles.text_dark,
...styles.text_L,
}}
>
{queries[0].data ? queries[0].data.length : 0}
</p>
</div>
<div
style={{
paddingLeft: "16px",
paddingRight: "16px",
margin: "16px",
borderRadius: 16,
backgroundColor: "#a6a6a6",
alignSelf: "center",
justifyContent: "center",
width: "512px",
}}
>
<p
style={{
...styles.text_dark,
...styles.text_M,
...{ float: "left", position: "absolute" },
}}
>
Unique Items in System
</p>
<p
style={{
...styles.text_dark,
...styles.text_L,
}}
>
{queries[1].data ? queries[1].data.length : 0}
</p>
</div>
</div>
<div style={{ ...styles.flex_row, ...{ alignSelf: "center" } }}>
<div
style={{
paddingLeft: "16px",
paddingRight: "16px",
margin: "16px",
borderRadius: 16,
backgroundColor: "#a6a6a6",
alignSelf: "center",
justifyContent: "center",
width: "512px",
}}
>
<p
style={{
...styles.text_dark,
...styles.text_M,
...{ float: "left", position: "absolute" },
}}
>
Working Items
</p>
<p
style={{
...styles.text_dark,
...styles.text_L,
}}
>
{queries[1].data
? queries[1].data.filter(
(equipment) => equipment.status == "Working"
).length
: 0}
</p>
</div>
<div
style={{
paddingLeft: "16px",
paddingRight: "16px",
margin: "16px",
borderRadius: 16,
backgroundColor: "#a6a6a6",
alignSelf: "center",
justifyContent: "center",
width: "512px",
}}
>
<p
style={{
...styles.text_dark,
...styles.text_M,
...{ float: "left", position: "absolute" },
}}
>
Broken Items
</p>
<p
style={{
...styles.text_dark,
...styles.text_L,
}}
>
{queries[1].data
? queries[1].data.filter(
(equipment) => equipment.status == "Broken"
).length
: 0}
</p>
</div>
</div>
</div>
</div>
);
}