mirror of
https://github.com/lemeow125/Borrowing-TrackerFrontend.git
synced 2024-11-17 06:19:27 +08:00
Add student actions in student dashboard
This commit is contained in:
parent
a6e91830c4
commit
6970810256
3 changed files with 99 additions and 280 deletions
|
|
@ -1,277 +0,0 @@
|
||||||
import styles from "../../../styles";
|
|
||||||
import { useNavigate } from "react-router-dom";
|
|
||||||
import { Button } 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 { colors } from "../../../styles";
|
|
||||||
import ScienceIcon from "@mui/icons-material/Science";
|
|
||||||
import ColorizeIcon from "@mui/icons-material/Colorize";
|
|
||||||
import Popup from "reactjs-popup";
|
|
||||||
import AddItemModal from "../../AddItemModal/AddItemModal";
|
|
||||||
import AddSKUModal from "../../AddSKUModal/AddSKUModal";
|
|
||||||
import { useState } from "react";
|
|
||||||
export default function StudentButtons() {
|
|
||||||
const [addSKUmodalOpen, SetAddSKUModalOpen] = useState(false);
|
|
||||||
const [additemmodalOpen, SetAddItemModalOpen] = useState(false);
|
|
||||||
const navigate = useNavigate();
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<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>
|
|
||||||
<Popup
|
|
||||||
open={addSKUmodalOpen}
|
|
||||||
onClose={() => SetAddSKUModalOpen(false)}
|
|
||||||
modal
|
|
||||||
position={"top center"}
|
|
||||||
contentStyle={{
|
|
||||||
width: "32rem",
|
|
||||||
borderRadius: 16,
|
|
||||||
borderColor: "grey",
|
|
||||||
borderStyle: "solid",
|
|
||||||
borderWidth: 1,
|
|
||||||
padding: 16,
|
|
||||||
alignContent: "center",
|
|
||||||
justifyContent: "center",
|
|
||||||
textAlign: "center",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<AddSKUModal />
|
|
||||||
</Popup>
|
|
||||||
<Popup
|
|
||||||
open={additemmodalOpen}
|
|
||||||
onClose={() => SetAddItemModalOpen(false)}
|
|
||||||
modal
|
|
||||||
position={"top center"}
|
|
||||||
contentStyle={{
|
|
||||||
width: "32rem",
|
|
||||||
borderRadius: 16,
|
|
||||||
borderColor: "grey",
|
|
||||||
borderStyle: "solid",
|
|
||||||
borderWidth: 1,
|
|
||||||
padding: 16,
|
|
||||||
alignContent: "center",
|
|
||||||
justifyContent: "center",
|
|
||||||
textAlign: "center",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<AddItemModal />
|
|
||||||
</Popup>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
84
src/Components/DashboardPage/Student/StudentDashboard.tsx
Normal file
84
src/Components/DashboardPage/Student/StudentDashboard.tsx
Normal file
|
|
@ -0,0 +1,84 @@
|
||||||
|
import styles from "../../../styles";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import { Button } from "@mui/material";
|
||||||
|
import AddBoxIcon from "@mui/icons-material/AddBox";
|
||||||
|
import { colors } from "../../../styles";
|
||||||
|
import Popup from "reactjs-popup";
|
||||||
|
import { useState } from "react";
|
||||||
|
export default function StudentDashboard() {
|
||||||
|
const [addTransactionModalOpen, SetAddTransactionModalOpen] = useState(false);
|
||||||
|
const navigate = useNavigate();
|
||||||
|
return (
|
||||||
|
<div style={styles.flex_column}>
|
||||||
|
<p
|
||||||
|
style={{
|
||||||
|
...styles.text_dark,
|
||||||
|
...styles.text_L,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Student Actions
|
||||||
|
</p>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
...styles.flex_row,
|
||||||
|
...{
|
||||||
|
alignSelf: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
flexWrap: "wrap",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
style={{
|
||||||
|
...styles.flex_column,
|
||||||
|
...{
|
||||||
|
alignSelf: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
flexWrap: "wrap",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
onClick={() => {
|
||||||
|
SetAddTransactionModalOpen(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<AddBoxIcon
|
||||||
|
style={{
|
||||||
|
height: 64,
|
||||||
|
width: 64,
|
||||||
|
fill: colors.font_dark,
|
||||||
|
marginLeft: "1rem",
|
||||||
|
marginRight: "1rem",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<p
|
||||||
|
style={{
|
||||||
|
...styles.text_dark,
|
||||||
|
...styles.text_M,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
New Transaction
|
||||||
|
</p>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<Popup
|
||||||
|
open={addTransactionModalOpen}
|
||||||
|
onClose={() => SetAddTransactionModalOpen(false)}
|
||||||
|
modal
|
||||||
|
position={"top center"}
|
||||||
|
contentStyle={{
|
||||||
|
width: "32rem",
|
||||||
|
borderRadius: 16,
|
||||||
|
borderColor: "grey",
|
||||||
|
borderStyle: "solid",
|
||||||
|
borderWidth: 1,
|
||||||
|
padding: 16,
|
||||||
|
alignContent: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
textAlign: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div />
|
||||||
|
</Popup>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -5,7 +5,7 @@ import TechnicianWidgets from "../../Components/DashboardPage/Technician/Technic
|
||||||
import TechnicianEquipmentButtons from "../../Components/DashboardPage/Technician/TechnicianEquipmentButtons";
|
import TechnicianEquipmentButtons from "../../Components/DashboardPage/Technician/TechnicianEquipmentButtons";
|
||||||
import TechnicianLogButtons from "../../Components/DashboardPage/Technician/TechnicianLogButtons";
|
import TechnicianLogButtons from "../../Components/DashboardPage/Technician/TechnicianLogButtons";
|
||||||
import StudentTransactionListView from "../../Components/DashboardPage/Student/StudentTransactionListView";
|
import StudentTransactionListView from "../../Components/DashboardPage/Student/StudentTransactionListView";
|
||||||
import StudentButtons from "../../Components/DashboardPage/Student/StudentButtons";
|
import StudentDashboard from "../../Components/DashboardPage/Student/StudentDashboard";
|
||||||
export default function Dashboard() {
|
export default function Dashboard() {
|
||||||
return (
|
return (
|
||||||
<div style={styles.background}>
|
<div style={styles.background}>
|
||||||
|
|
@ -16,8 +16,20 @@ export default function Dashboard() {
|
||||||
<TechnicianLogButtons />
|
<TechnicianLogButtons />
|
||||||
</RestrictedComponent>
|
</RestrictedComponent>
|
||||||
<RestrictedComponent allow_only={"Student"}>
|
<RestrictedComponent allow_only={"Student"}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
...styles.flex_row,
|
||||||
|
...{
|
||||||
|
flexWrap: "wrap",
|
||||||
|
justifyContent: "center",
|
||||||
|
marginLeft: "16px",
|
||||||
|
marginRight: "16px",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
<StudentTransactionListView />
|
<StudentTransactionListView />
|
||||||
<StudentButtons />
|
<StudentDashboard />
|
||||||
|
</div>
|
||||||
</RestrictedComponent>
|
</RestrictedComponent>
|
||||||
<RestrictedComponent allow_only={"Teacher"}>
|
<RestrictedComponent allow_only={"Teacher"}>
|
||||||
<p style={styles.text_dark}>Welcome teacher!</p>
|
<p style={styles.text_dark}>Welcome teacher!</p>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue