mirror of
https://github.com/lemeow125/Borrowing-TrackerFrontend.git
synced 2025-05-17 11:58:14 +08:00
Added conditional rendering to dashboard page and restrict certain pages select user types
This commit is contained in:
parent
0e4c1b9f31
commit
3d20af24c9
9 changed files with 646 additions and 468 deletions
|
|
@ -1,24 +1,21 @@
|
|||
import Header from "../../Components/Header/Header";
|
||||
import styles from "../../styles";
|
||||
import { useQueries } from "@tanstack/react-query";
|
||||
import { EquipmentsAPI, EquipmentInstancesAPI } from "../../Components/API/API";
|
||||
import { Button, CircularProgress } from "@mui/material";
|
||||
import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
|
||||
import AddToQueueIcon from "@mui/icons-material/AddToQueue";
|
||||
import NoteAddIcon from "@mui/icons-material/NoteAdd";
|
||||
import NoteIcon from "@mui/icons-material/Note";
|
||||
import ManageSearchIcon from "@mui/icons-material/ManageSearch";
|
||||
import { colors } from "../../styles";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import {
|
||||
EquipmentsAPI,
|
||||
EquipmentInstancesAPI,
|
||||
UserAPI,
|
||||
} from "../../Components/API/API";
|
||||
import { useState } from "react";
|
||||
import AddSKUModal from "../../Components/AddSKUModal/AddSKUModal";
|
||||
import Popup from "reactjs-popup";
|
||||
import AddItemModal from "../../Components/AddItemModal/AddItemModal";
|
||||
import ScienceIcon from "@mui/icons-material/Science";
|
||||
import ColorizeIcon from "@mui/icons-material/Colorize";
|
||||
import RestrictedComponent from "../../Components/RestrictedComponent/RestrictedComponent";
|
||||
import TechnicianWidgets from "../../Components/DashboardPage/TechnicianWidgets";
|
||||
import TechnicianButtons from "../../Components/DashboardPage/TechnicianButtons";
|
||||
import TechnicianLogs from "../../Components/DashboardPage/TechnicianLogs";
|
||||
import CircularProgress from "@mui/material/CircularProgress/CircularProgress";
|
||||
export default function Dashboard() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const queries = useQueries({
|
||||
queries: [
|
||||
{
|
||||
|
|
@ -29,6 +26,10 @@ export default function Dashboard() {
|
|||
queryKey: ["equipment_instances"],
|
||||
queryFn: EquipmentInstancesAPI,
|
||||
},
|
||||
{
|
||||
queryKey: ["user"],
|
||||
queryFn: UserAPI,
|
||||
},
|
||||
],
|
||||
});
|
||||
const isLoading = queries.some((result) => result.isLoading);
|
||||
|
|
@ -66,460 +67,18 @@ export default function Dashboard() {
|
|||
return (
|
||||
<div style={styles.background}>
|
||||
<Header label={"Dashboard"} />
|
||||
<div style={styles.flex_column}>
|
||||
<div
|
||||
style={{
|
||||
...styles.flex_row,
|
||||
...{
|
||||
alignSelf: "center",
|
||||
justifyContent: "center",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
paddingLeft: "16px",
|
||||
paddingRight: "16px",
|
||||
margin: "16px",
|
||||
borderRadius: 16,
|
||||
backgroundColor: "#a6a6a6",
|
||||
alignSelf: "center",
|
||||
justifyContent: "center",
|
||||
width: "16rem",
|
||||
}}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
...{ float: "left", position: "absolute" },
|
||||
}}
|
||||
>
|
||||
SKUs in Database
|
||||
</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: "16rem",
|
||||
}}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
...{ float: "left", position: "absolute" },
|
||||
}}
|
||||
>
|
||||
Items in Database
|
||||
</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",
|
||||
justifyContent: "center",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
paddingLeft: "16px",
|
||||
paddingRight: "16px",
|
||||
margin: "16px",
|
||||
borderRadius: 16,
|
||||
backgroundColor: "#a6a6a6",
|
||||
alignSelf: "center",
|
||||
justifyContent: "center",
|
||||
width: "16rem",
|
||||
}}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
...{ float: "left", position: "absolute" },
|
||||
}}
|
||||
>
|
||||
Functional 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: "16rem",
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_L,
|
||||
}}
|
||||
>
|
||||
Equipments
|
||||
</p>
|
||||
<div
|
||||
style={{
|
||||
...styles.flex_row,
|
||||
...{
|
||||
alignSelf: "center",
|
||||
justifyContent: "center",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
style={{
|
||||
...styles.flex_column,
|
||||
...{
|
||||
alignSelf: "center",
|
||||
justifyContent: "center",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
}}
|
||||
onClick={() => {
|
||||
navigate("/view/equipment_instances");
|
||||
}}
|
||||
>
|
||||
<FormatListBulletedIcon
|
||||
style={{
|
||||
height: 64,
|
||||
width: 64,
|
||||
fill: colors.font_dark,
|
||||
marginLeft: "1rem",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
}}
|
||||
>
|
||||
View All
|
||||
</p>
|
||||
</Button>
|
||||
<Button
|
||||
style={{
|
||||
...styles.flex_column,
|
||||
...{
|
||||
alignSelf: "center",
|
||||
justifyContent: "center",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
}}
|
||||
onClick={() => {
|
||||
SetAddItemModalOpen(true);
|
||||
}}
|
||||
>
|
||||
<AddToQueueIcon
|
||||
style={{
|
||||
height: 64,
|
||||
width: 64,
|
||||
fill: colors.font_dark,
|
||||
marginLeft: "1rem",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
}}
|
||||
>
|
||||
Add Item
|
||||
</p>
|
||||
</Button>
|
||||
<Button
|
||||
style={{
|
||||
...styles.flex_column,
|
||||
...{
|
||||
alignSelf: "center",
|
||||
justifyContent: "center",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
}}
|
||||
onClick={() => {
|
||||
SetAddSKUModalOpen(true);
|
||||
}}
|
||||
>
|
||||
<NoteAddIcon
|
||||
style={{
|
||||
height: 64,
|
||||
width: 64,
|
||||
fill: colors.font_dark,
|
||||
marginLeft: "1rem",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
}}
|
||||
>
|
||||
Add SKU
|
||||
</p>
|
||||
</Button>
|
||||
<Button
|
||||
style={{
|
||||
...styles.flex_column,
|
||||
...{
|
||||
alignSelf: "center",
|
||||
justifyContent: "center",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
}}
|
||||
onClick={() => {
|
||||
navigate("/view/equipments");
|
||||
}}
|
||||
>
|
||||
<NoteIcon
|
||||
style={{
|
||||
height: 64,
|
||||
width: 64,
|
||||
fill: colors.font_dark,
|
||||
marginLeft: "1rem",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
}}
|
||||
>
|
||||
View SKUs
|
||||
</p>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
...styles.flex_row,
|
||||
...{
|
||||
alignSelf: "center",
|
||||
justifyContent: "center",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
style={{
|
||||
...styles.flex_column,
|
||||
...{
|
||||
alignSelf: "center",
|
||||
justifyContent: "center",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ScienceIcon
|
||||
style={{
|
||||
height: 64,
|
||||
width: 64,
|
||||
fill: colors.font_dark,
|
||||
marginLeft: "1rem",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
onClick={() => {
|
||||
navigate("/view/equipment_instances/filter/Glassware");
|
||||
}}
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
}}
|
||||
>
|
||||
Glassware
|
||||
</p>
|
||||
</Button>
|
||||
<Button
|
||||
style={{
|
||||
...styles.flex_column,
|
||||
...{
|
||||
alignSelf: "center",
|
||||
justifyContent: "center",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ColorizeIcon
|
||||
style={{
|
||||
height: 64,
|
||||
width: 64,
|
||||
fill: colors.font_dark,
|
||||
marginLeft: "1rem",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
onClick={() => {
|
||||
navigate("/view/equipment_instances/filter/Miscellaneous");
|
||||
}}
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
}}
|
||||
>
|
||||
Miscellaneous
|
||||
</p>
|
||||
</Button>
|
||||
</div>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_L,
|
||||
}}
|
||||
>
|
||||
Logs
|
||||
</p>
|
||||
<div
|
||||
style={{
|
||||
...styles.flex_row,
|
||||
...{
|
||||
alignSelf: "center",
|
||||
justifyContent: "center",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
style={{
|
||||
...styles.flex_column,
|
||||
...{
|
||||
alignSelf: "center",
|
||||
justifyContent: "center",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
}}
|
||||
onClick={() => {
|
||||
navigate("/view/equipments/logs");
|
||||
}}
|
||||
>
|
||||
<ManageSearchIcon
|
||||
style={{
|
||||
height: 64,
|
||||
width: 64,
|
||||
fill: colors.font_dark,
|
||||
marginLeft: "1rem",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
}}
|
||||
>
|
||||
SKU Logs
|
||||
</p>
|
||||
</Button>
|
||||
<Button
|
||||
style={{
|
||||
...styles.flex_column,
|
||||
...{
|
||||
alignSelf: "center",
|
||||
justifyContent: "center",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
}}
|
||||
onClick={() => {
|
||||
navigate("/view/equipment_instances/logs");
|
||||
}}
|
||||
>
|
||||
<ManageSearchIcon
|
||||
style={{
|
||||
height: 64,
|
||||
width: 64,
|
||||
fill: colors.font_dark,
|
||||
marginLeft: "1rem",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
}}
|
||||
>
|
||||
Item Logs
|
||||
</p>
|
||||
</Button>
|
||||
</div>
|
||||
<RestrictedComponent allow_only={"Technician"}>
|
||||
<TechnicianWidgets />
|
||||
</RestrictedComponent>
|
||||
<RestrictedComponent allow_only={"Technician"}>
|
||||
<TechnicianButtons
|
||||
SetAddItemModalOpen={SetAddItemModalOpen}
|
||||
SetAddSKUModalOpen={SetAddSKUModalOpen}
|
||||
/>
|
||||
</RestrictedComponent>
|
||||
<RestrictedComponent allow_only={"Technician"}>
|
||||
<TechnicianLogs />
|
||||
</RestrictedComponent>
|
||||
<Popup
|
||||
open={addSKUmodalOpen}
|
||||
onClose={() => SetAddSKUModalOpen(false)}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue