keannu125/Borrowing-TrackerFrontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Borrowing-TrackerFrontend.git synced 2024-11-17 06:19:27 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added descriptions to transactions filter for students

Browse source
This commit is contained in:
Keannu Bernasol 2023-12-22 15:30:10 +08:00
parent 86bb9d549b
commit fc9d92259e
2 changed files with 184 additions and 123 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

187
src/Components/DashboardPage/Student/StudentTransactionFilterMenu.tsx
View file

@ -10,7 +10,6 @@ import {
import HourglassBottomIcon from "@mui/icons-material/HourglassBottom"; import HourglassBottomIcon from "@mui/icons-material/HourglassBottom";
import CheckCircleIcon from "@mui/icons-material/CheckCircle"; import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import FlashOffIcon from "@mui/icons-material/FlashOff"; import FlashOffIcon from "@mui/icons-material/FlashOff";
import { colors } from "../../../styles";
import Popup from "reactjs-popup"; import Popup from "reactjs-popup";
import AddItemModal from "../../AddItemModal/AddItemModal"; import AddItemModal from "../../AddItemModal/AddItemModal";
import AddSKUModal from "../../AddSKUModal/AddSKUModal"; import AddSKUModal from "../../AddSKUModal/AddSKUModal";
@ -72,15 +71,7 @@ export default function StudentTransactionFilterMenu(props: props) {
}, },
}} }}
> >
<ClearAllIcon <ClearAllIcon style={styles.student_filter_item} />
style={{
height: 32,
width: 32,
fill: colors.font_dark,
marginLeft: "1rem",
marginRight: "1rem",
}}
/>
<p <p
style={{ style={{
...styles.text_dark, ...styles.text_dark,
@ -102,23 +93,31 @@ export default function StudentTransactionFilterMenu(props: props) {
}, },
}} }}
> >
<HourglassBottomIcon <HourglassBottomIcon style={styles.student_filter_item} />
<div
style={{ style={{
height: 32, ...styles.flex_column,
width: 32,
fill: colors.font_dark,
marginLeft: "1rem",
marginRight: "1rem",
}} }}
/> >
<p <p
style={{ style={{
...styles.text_dark, ...styles.text_dark,
...styles.text_M, ...styles.text_M,
...{ margin: 0, textAlign: "left" },
}} }}
> >
Pending Pending
</p> </p>
<p
style={{
...styles.text_dark,
...styles.text_XS,
...{ margin: 0, textAlign: "left" },
}}
>
Awaiting techncian approval
</p>
</div>
</Button> </Button>
</MenuItem> </MenuItem>
<MenuItem value={"Approved"}> <MenuItem value={"Approved"}>
@ -132,23 +131,31 @@ export default function StudentTransactionFilterMenu(props: props) {
}, },
}} }}
> >
<CheckCircleOutlineIcon <CheckCircleOutlineIcon style={styles.student_filter_item} />
<div
style={{ style={{
height: 32, ...styles.flex_column,
width: 32,
fill: colors.font_dark,
marginLeft: "1rem",
marginRight: "1rem",
}} }}
/> >
<p <p
style={{ style={{
...styles.text_dark, ...styles.text_dark,
...styles.text_M, ...styles.text_M,
...{ margin: 0, textAlign: "left" },
}} }}
> >
Approved Approved
</p> </p>
<p
style={{
...styles.text_dark,
...styles.text_XS,
...{ margin: 0, textAlign: "left" },
}}
>
To be delivered by technician
</p>
</div>
</Button> </Button>
</MenuItem> </MenuItem>
<MenuItem value={"Rejected"}> <MenuItem value={"Rejected"}>
@ -162,23 +169,31 @@ export default function StudentTransactionFilterMenu(props: props) {
}, },
}} }}
> >
<CancelOutlinedIcon <CancelOutlinedIcon style={styles.student_filter_item} />
<div
style={{ style={{
height: 32, ...styles.flex_column,
width: 32,
fill: colors.font_dark,
marginLeft: "1rem",
marginRight: "1rem",
}} }}
/> >
<p <p
style={{ style={{
...styles.text_dark, ...styles.text_dark,
...styles.text_M, ...styles.text_M,
...{ margin: 0, textAlign: "left" },
}} }}
> >
Rejected Rejected
</p> </p>
<p
style={{
...styles.text_dark,
...styles.text_XS,
...{ margin: 0, textAlign: "left" },
}}
>
Denied by technician
</p>
</div>
</Button> </Button>
</MenuItem> </MenuItem>
<MenuItem value={"Borrowed"}> <MenuItem value={"Borrowed"}>
@ -192,23 +207,31 @@ export default function StudentTransactionFilterMenu(props: props) {
}, },
}} }}
> >
<ShoppingCartCheckoutIcon <ShoppingCartCheckoutIcon style={styles.student_filter_item} />
<div
style={{ style={{
height: 32, ...styles.flex_column,
width: 32,
fill: colors.font_dark,
marginLeft: "1rem",
marginRight: "1rem",
}} }}
/> >
<p <p
style={{ style={{
...styles.text_dark, ...styles.text_dark,
...styles.text_M, ...styles.text_M,
...{ margin: 0, textAlign: "left" },
}} }}
> >
On-Borrow On-Borrow
</p> </p>
<p
style={{
...styles.text_dark,
...styles.text_XS,
...{ margin: 0, textAlign: "left" },
}}
>
Items currently with student
</p>
</div>
</Button> </Button>
</MenuItem> </MenuItem>
<MenuItem value={"Cancelled"}> <MenuItem value={"Cancelled"}>
@ -222,23 +245,31 @@ export default function StudentTransactionFilterMenu(props: props) {
}, },
}} }}
> >
<CancelIcon <CancelIcon style={styles.student_filter_item} />
<div
style={{ style={{
height: 32, ...styles.flex_column,
width: 32,
fill: colors.font_dark,
marginLeft: "1rem",
marginRight: "1rem",
}} }}
/> >
<p <p
style={{ style={{
...styles.text_dark, ...styles.text_dark,
...styles.text_M, ...styles.text_M,
...{ margin: 0, textAlign: "left" },
}} }}
> >
Cancelled Cancelled
</p> </p>
<p
style={{
...styles.text_dark,
...styles.text_XS,
...{ margin: 0, textAlign: "left" },
}}
>
Approved but was not delivered to student
</p>
</div>
</Button> </Button>
</MenuItem> </MenuItem>
<MenuItem value={"Returned: Pending Checking"}> <MenuItem value={"Returned: Pending Checking"}>
@ -252,23 +283,31 @@ export default function StudentTransactionFilterMenu(props: props) {
}, },
}} }}
> >
<AssignmentReturnedIcon <AssignmentReturnedIcon style={styles.student_filter_item} />
<div
style={{ style={{
height: 32, ...styles.flex_column,
width: 32,
fill: colors.font_dark,
marginLeft: "1rem",
marginRight: "1rem",
}} }}
/> >
<p <p
style={{ style={{
...styles.text_dark, ...styles.text_dark,
...styles.text_M, ...styles.text_M,
...{ margin: 0, textAlign: "left" },
}} }}
> >
Returned: Pending Returned: Pending
</p> </p>
<p
style={{
...styles.text_dark,
...styles.text_XS,
...{ margin: 0, textAlign: "left" },
}}
>
Being checked for any breakages
</p>
</div>
</Button> </Button>
</MenuItem> </MenuItem>
<MenuItem value={"Finalized"}> <MenuItem value={"Finalized"}>
@ -282,23 +321,31 @@ export default function StudentTransactionFilterMenu(props: props) {
}, },
}} }}
> >
<CheckCircleIcon <CheckCircleIcon style={styles.student_filter_item} />
<div
style={{ style={{
height: 32, ...styles.flex_column,
width: 32,
fill: colors.font_dark,
marginLeft: "1rem",
marginRight: "1rem",
}} }}
/> >
<p <p
style={{ style={{
...styles.text_dark, ...styles.text_dark,
...styles.text_M, ...styles.text_M,
...{ margin: 0, textAlign: "left" },
}} }}
> >
Finalized Finalized
</p> </p>
<p
style={{
...styles.text_dark,
...styles.text_XS,
...{ margin: 0, textAlign: "left" },
}}
>
Completed transaction without breakages
</p>
</div>
</Button> </Button>
</MenuItem> </MenuItem>
<MenuItem value={"With Breakages: Pending Resolution"}> <MenuItem value={"With Breakages: Pending Resolution"}>
@ -312,23 +359,31 @@ export default function StudentTransactionFilterMenu(props: props) {
}, },
}} }}
> >
<FlashOffIcon <FlashOffIcon style={styles.student_filter_item} />
<div
style={{ style={{
height: 32, ...styles.flex_column,
width: 32,
fill: colors.font_dark,
marginLeft: "1rem",
marginRight: "1rem",
}} }}
/> >
<p <p
style={{ style={{
...styles.text_dark, ...styles.text_dark,
...styles.text_M, ...styles.text_M,
...{ margin: 0, textAlign: "left" },
}} }}
> >
With Breakages With Breakages
</p> </p>
<p
style={{
...styles.text_dark,
...styles.text_XS,
...{ margin: 0, textAlign: "left" },
}}
>
With broken items awaiting reimbursement
</p>
</div>
</Button> </Button>
</MenuItem> </MenuItem>
</Select> </Select>

8
src/styles.tsx
View file

@ -25,7 +25,6 @@ const styles: { [key: string]: React.CSSProperties } = {
text_dark: { text_dark: {
color: colors.font_dark, color: colors.font_dark,
fontWeight: "bold", fontWeight: "bold",
}, },
text_light: { text_light: {
color: colors.font_light, color: colors.font_light,
@ -88,6 +87,13 @@ const styles: { [key: string]: React.CSSProperties } = {
textAlign: "center", textAlign: "center",
overflowY: "scroll", overflowY: "scroll",
}, },
student_filter_item: {
height: 32,
width: 32,
fill: colors.font_dark,
marginLeft: "1rem",
marginRight: "1rem",
},
}; };
export default styles; export default styles;