mirror of
https://github.com/lemeow125/Borrowing-TrackerFrontend.git
synced 2024-11-17 06:19:27 +08:00
Added descriptions to transactions filter for students
This commit is contained in:
parent
86bb9d549b
commit
fc9d92259e
2 changed files with 184 additions and 123 deletions
|
|
@ -10,7 +10,6 @@ import {
|
|||
import HourglassBottomIcon from "@mui/icons-material/HourglassBottom";
|
||||
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
|
||||
import FlashOffIcon from "@mui/icons-material/FlashOff";
|
||||
import { colors } from "../../../styles";
|
||||
import Popup from "reactjs-popup";
|
||||
import AddItemModal from "../../AddItemModal/AddItemModal";
|
||||
import AddSKUModal from "../../AddSKUModal/AddSKUModal";
|
||||
|
|
@ -72,15 +71,7 @@ export default function StudentTransactionFilterMenu(props: props) {
|
|||
},
|
||||
}}
|
||||
>
|
||||
<ClearAllIcon
|
||||
style={{
|
||||
height: 32,
|
||||
width: 32,
|
||||
fill: colors.font_dark,
|
||||
marginLeft: "1rem",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
/>
|
||||
<ClearAllIcon style={styles.student_filter_item} />
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
|
|
@ -102,23 +93,31 @@ export default function StudentTransactionFilterMenu(props: props) {
|
|||
},
|
||||
}}
|
||||
>
|
||||
<HourglassBottomIcon
|
||||
<HourglassBottomIcon style={styles.student_filter_item} />
|
||||
<div
|
||||
style={{
|
||||
height: 32,
|
||||
width: 32,
|
||||
fill: colors.font_dark,
|
||||
marginLeft: "1rem",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
...styles.flex_column,
|
||||
}}
|
||||
>
|
||||
Pending
|
||||
</p>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
...{ margin: 0, textAlign: "left" },
|
||||
}}
|
||||
>
|
||||
Pending
|
||||
</p>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_XS,
|
||||
...{ margin: 0, textAlign: "left" },
|
||||
}}
|
||||
>
|
||||
Awaiting techncian approval
|
||||
</p>
|
||||
</div>
|
||||
</Button>
|
||||
</MenuItem>
|
||||
<MenuItem value={"Approved"}>
|
||||
|
|
@ -132,23 +131,31 @@ export default function StudentTransactionFilterMenu(props: props) {
|
|||
},
|
||||
}}
|
||||
>
|
||||
<CheckCircleOutlineIcon
|
||||
<CheckCircleOutlineIcon style={styles.student_filter_item} />
|
||||
<div
|
||||
style={{
|
||||
height: 32,
|
||||
width: 32,
|
||||
fill: colors.font_dark,
|
||||
marginLeft: "1rem",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
...styles.flex_column,
|
||||
}}
|
||||
>
|
||||
Approved
|
||||
</p>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
...{ margin: 0, textAlign: "left" },
|
||||
}}
|
||||
>
|
||||
Approved
|
||||
</p>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_XS,
|
||||
...{ margin: 0, textAlign: "left" },
|
||||
}}
|
||||
>
|
||||
To be delivered by technician
|
||||
</p>
|
||||
</div>
|
||||
</Button>
|
||||
</MenuItem>
|
||||
<MenuItem value={"Rejected"}>
|
||||
|
|
@ -162,23 +169,31 @@ export default function StudentTransactionFilterMenu(props: props) {
|
|||
},
|
||||
}}
|
||||
>
|
||||
<CancelOutlinedIcon
|
||||
<CancelOutlinedIcon style={styles.student_filter_item} />
|
||||
<div
|
||||
style={{
|
||||
height: 32,
|
||||
width: 32,
|
||||
fill: colors.font_dark,
|
||||
marginLeft: "1rem",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
...styles.flex_column,
|
||||
}}
|
||||
>
|
||||
Rejected
|
||||
</p>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
...{ margin: 0, textAlign: "left" },
|
||||
}}
|
||||
>
|
||||
Rejected
|
||||
</p>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_XS,
|
||||
...{ margin: 0, textAlign: "left" },
|
||||
}}
|
||||
>
|
||||
Denied by technician
|
||||
</p>
|
||||
</div>
|
||||
</Button>
|
||||
</MenuItem>
|
||||
<MenuItem value={"Borrowed"}>
|
||||
|
|
@ -192,23 +207,31 @@ export default function StudentTransactionFilterMenu(props: props) {
|
|||
},
|
||||
}}
|
||||
>
|
||||
<ShoppingCartCheckoutIcon
|
||||
<ShoppingCartCheckoutIcon style={styles.student_filter_item} />
|
||||
<div
|
||||
style={{
|
||||
height: 32,
|
||||
width: 32,
|
||||
fill: colors.font_dark,
|
||||
marginLeft: "1rem",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
...styles.flex_column,
|
||||
}}
|
||||
>
|
||||
On-Borrow
|
||||
</p>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
...{ margin: 0, textAlign: "left" },
|
||||
}}
|
||||
>
|
||||
On-Borrow
|
||||
</p>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_XS,
|
||||
...{ margin: 0, textAlign: "left" },
|
||||
}}
|
||||
>
|
||||
Items currently with student
|
||||
</p>
|
||||
</div>
|
||||
</Button>
|
||||
</MenuItem>
|
||||
<MenuItem value={"Cancelled"}>
|
||||
|
|
@ -222,23 +245,31 @@ export default function StudentTransactionFilterMenu(props: props) {
|
|||
},
|
||||
}}
|
||||
>
|
||||
<CancelIcon
|
||||
<CancelIcon style={styles.student_filter_item} />
|
||||
<div
|
||||
style={{
|
||||
height: 32,
|
||||
width: 32,
|
||||
fill: colors.font_dark,
|
||||
marginLeft: "1rem",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
...styles.flex_column,
|
||||
}}
|
||||
>
|
||||
Cancelled
|
||||
</p>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
...{ margin: 0, textAlign: "left" },
|
||||
}}
|
||||
>
|
||||
Cancelled
|
||||
</p>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_XS,
|
||||
...{ margin: 0, textAlign: "left" },
|
||||
}}
|
||||
>
|
||||
Approved but was not delivered to student
|
||||
</p>
|
||||
</div>
|
||||
</Button>
|
||||
</MenuItem>
|
||||
<MenuItem value={"Returned: Pending Checking"}>
|
||||
|
|
@ -252,23 +283,31 @@ export default function StudentTransactionFilterMenu(props: props) {
|
|||
},
|
||||
}}
|
||||
>
|
||||
<AssignmentReturnedIcon
|
||||
<AssignmentReturnedIcon style={styles.student_filter_item} />
|
||||
<div
|
||||
style={{
|
||||
height: 32,
|
||||
width: 32,
|
||||
fill: colors.font_dark,
|
||||
marginLeft: "1rem",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
...styles.flex_column,
|
||||
}}
|
||||
>
|
||||
Returned: Pending
|
||||
</p>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
...{ margin: 0, textAlign: "left" },
|
||||
}}
|
||||
>
|
||||
Returned: Pending
|
||||
</p>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_XS,
|
||||
...{ margin: 0, textAlign: "left" },
|
||||
}}
|
||||
>
|
||||
Being checked for any breakages
|
||||
</p>
|
||||
</div>
|
||||
</Button>
|
||||
</MenuItem>
|
||||
<MenuItem value={"Finalized"}>
|
||||
|
|
@ -282,23 +321,31 @@ export default function StudentTransactionFilterMenu(props: props) {
|
|||
},
|
||||
}}
|
||||
>
|
||||
<CheckCircleIcon
|
||||
<CheckCircleIcon style={styles.student_filter_item} />
|
||||
<div
|
||||
style={{
|
||||
height: 32,
|
||||
width: 32,
|
||||
fill: colors.font_dark,
|
||||
marginLeft: "1rem",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
...styles.flex_column,
|
||||
}}
|
||||
>
|
||||
Finalized
|
||||
</p>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
...{ margin: 0, textAlign: "left" },
|
||||
}}
|
||||
>
|
||||
Finalized
|
||||
</p>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_XS,
|
||||
...{ margin: 0, textAlign: "left" },
|
||||
}}
|
||||
>
|
||||
Completed transaction without breakages
|
||||
</p>
|
||||
</div>
|
||||
</Button>
|
||||
</MenuItem>
|
||||
<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={{
|
||||
height: 32,
|
||||
width: 32,
|
||||
fill: colors.font_dark,
|
||||
marginLeft: "1rem",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
...styles.flex_column,
|
||||
}}
|
||||
>
|
||||
With Breakages
|
||||
</p>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
...{ margin: 0, textAlign: "left" },
|
||||
}}
|
||||
>
|
||||
With Breakages
|
||||
</p>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_XS,
|
||||
...{ margin: 0, textAlign: "left" },
|
||||
}}
|
||||
>
|
||||
With broken items awaiting reimbursement
|
||||
</p>
|
||||
</div>
|
||||
</Button>
|
||||
</MenuItem>
|
||||
</Select>
|
||||
|
|
|
|||
|
|
@ -25,7 +25,6 @@ const styles: { [key: string]: React.CSSProperties } = {
|
|||
text_dark: {
|
||||
color: colors.font_dark,
|
||||
fontWeight: "bold",
|
||||
|
||||
},
|
||||
text_light: {
|
||||
color: colors.font_light,
|
||||
|
|
@ -88,6 +87,13 @@ const styles: { [key: string]: React.CSSProperties } = {
|
|||
textAlign: "center",
|
||||
overflowY: "scroll",
|
||||
},
|
||||
student_filter_item: {
|
||||
height: 32,
|
||||
width: 32,
|
||||
fill: colors.font_dark,
|
||||
marginLeft: "1rem",
|
||||
marginRight: "1rem",
|
||||
},
|
||||
};
|
||||
|
||||
export default styles;
|
||||
|
|
|
|||
Loading…
Reference in a new issue