mirror of
https://github.com/lemeow125/Borrowing-TrackerFrontend.git
synced 2024-11-17 06:19:27 +08:00
Merge branch 'feature/additional_styles' of https://git.keannu1.duckdns.org/keannu125/Borrowing-TrackerFrontend into feature/additional_styles
This commit is contained in:
Prince Kurt Laurence
commit
30ee5c54bc
11 changed files with 359 additions and 272 deletions
|
|
@ -76,7 +76,8 @@ export default function StudentTransactionListView() {
|
|||
padding: "7px",
|
||||
margin: "0px",
|
||||
backgroundColor: colors.header_color,
|
||||
width: 550,
|
||||
width: "100%",
|
||||
maxWidth: 550,
|
||||
alignSelf: "center",
|
||||
borderRadius: "0px 0px 7px 7px",
|
||||
|
||||
|
|
|
|||
|
|
@ -77,7 +77,8 @@ export default function TeacherTransactionListView() {
|
|||
padding: "7px",
|
||||
margin: "0px",
|
||||
backgroundColor: colors.header_color,
|
||||
width: 550,
|
||||
width: "100%",
|
||||
maxWidth: 550,
|
||||
alignSelf: "center",
|
||||
borderRadius: "0px 0px 7px 7px",
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ 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 ArticleIcon from '@mui/icons-material/Article';
|
||||
import Popup from "reactjs-popup";
|
||||
import AddItemModal from "../../AddItemModal/AddItemModal";
|
||||
import AddSKUModal from "../../AddSKUModal/AddSKUModal";
|
||||
|
|
@ -161,7 +160,6 @@ export default function TechnicianEquipmentButtons() {
|
|||
View SKUs
|
||||
</p>
|
||||
</Button>
|
||||
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
|
|
@ -173,38 +171,7 @@ export default function TechnicianEquipmentButtons() {
|
|||
},
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
style={{
|
||||
...styles.flex_column,
|
||||
...{
|
||||
alignSelf: "center",
|
||||
justifyContent: "center",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ArticleIcon
|
||||
style={{
|
||||
height: 64,
|
||||
width: 64,
|
||||
fill: colors.font_dark,
|
||||
marginLeft: "1rem",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
onClick={() => {
|
||||
navigate("/view/transactions");
|
||||
}}
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
}}
|
||||
>
|
||||
Transactions
|
||||
</p>
|
||||
</Button>
|
||||
<Button
|
||||
<Button
|
||||
style={{
|
||||
...styles.flex_column,
|
||||
...{
|
||||
|
|
@ -286,7 +253,7 @@ export default function TechnicianEquipmentButtons() {
|
|||
>
|
||||
<AddSKUModal />
|
||||
</Popup>
|
||||
<Popup
|
||||
<Popup
|
||||
open={additemmodalOpen}
|
||||
onClose={() => SetAddItemModalOpen(false)}
|
||||
modal
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import { Button } from "@mui/material";
|
|||
import { useNavigate } from "react-router-dom";
|
||||
import ManageSearchIcon from "@mui/icons-material/ManageSearch";
|
||||
import CountertopsIcon from "@mui/icons-material/Countertops";
|
||||
import AssessmentIcon from "@mui/icons-material/Assessment";
|
||||
import styles from "../../../styles";
|
||||
import { colors } from "../../../styles";
|
||||
|
||||
|
|
@ -56,7 +55,7 @@ export default function TechnicianLogButtons() {
|
|||
...styles.text_M,
|
||||
}}
|
||||
>
|
||||
SKU Logs
|
||||
SKU <br/> History
|
||||
</p>
|
||||
</Button>
|
||||
<Button
|
||||
|
|
@ -87,7 +86,7 @@ export default function TechnicianLogButtons() {
|
|||
...styles.text_M,
|
||||
}}
|
||||
>
|
||||
Equipment Logs
|
||||
Equipment <br/> History
|
||||
</p>
|
||||
</Button>
|
||||
<Button
|
||||
|
|
@ -118,40 +117,10 @@ export default function TechnicianLogButtons() {
|
|||
...styles.text_M,
|
||||
}}
|
||||
>
|
||||
Item Tally
|
||||
</p>
|
||||
</Button>
|
||||
<Button
|
||||
style={{
|
||||
...styles.flex_column,
|
||||
...{
|
||||
alignSelf: "center",
|
||||
justifyContent: "center",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
}}
|
||||
onClick={() => {
|
||||
navigate("/view/transactions/report");
|
||||
}}
|
||||
>
|
||||
<AssessmentIcon
|
||||
style={{
|
||||
height: 64,
|
||||
width: 64,
|
||||
fill: colors.font_dark,
|
||||
marginLeft: "1rem",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_M,
|
||||
}}
|
||||
>
|
||||
Transaction Report
|
||||
Equipment <br/>Stock Check
|
||||
</p>
|
||||
</Button>
|
||||
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -52,16 +52,7 @@ export default function TransactionPDF(props: props) {
|
|||
/>
|
||||
|
||||
<View style={{ alignItems: "center" }}>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.form_dark,
|
||||
fontSize: 11,
|
||||
textAlign: "center",
|
||||
margin: "2 5 2 5",
|
||||
}}
|
||||
>
|
||||
Department of Chemistry (Laboratory)
|
||||
</Text>
|
||||
|
||||
<Text
|
||||
style={{
|
||||
color: colors.form_dark,
|
||||
|
|
@ -72,8 +63,10 @@ export default function TransactionPDF(props: props) {
|
|||
>
|
||||
University of Science and Technology of Southern Philippines{" "}
|
||||
{"\n"}
|
||||
Lapasan Cagayan de Oro City {"\n"}
|
||||
Lapasan, Cagayan de Oro City {"\n"}
|
||||
College of Science and Mathematics
|
||||
</Text>
|
||||
|
||||
<Text
|
||||
style={{
|
||||
color: colors.form_dark,
|
||||
|
|
@ -81,7 +74,7 @@ export default function TransactionPDF(props: props) {
|
|||
padding: "5 0 5 0",
|
||||
}}
|
||||
>
|
||||
BORROWER'S SLIP
|
||||
<Text style={{ fontFamily: 'Helvetica-Bold' }}> BORROWER'S SLIP </Text>
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Document, Page, Text, View } from "@react-pdf/renderer";
|
||||
import { Document, Page, Text, View, Image } from "@react-pdf/renderer";
|
||||
import { TransactionListType } from "../Types/Types";
|
||||
import { colors } from "../../styles";
|
||||
import count_transaction_equipments from "../../CountTransactionEquipments/CountTransactionEquipments";
|
||||
|
|
@ -6,6 +6,7 @@ import {
|
|||
filter_today,
|
||||
filter_thismonth,
|
||||
} from "../FilterTransaction/FilterTransaction";
|
||||
import ustplogo from "../../assets/ustp-logo.png";
|
||||
|
||||
type props = {
|
||||
transactions: TransactionListType | [];
|
||||
|
|
@ -18,143 +19,245 @@ export default function TransactionReportPDF(props: props) {
|
|||
return (
|
||||
<Document>
|
||||
<Page size={"A4"}>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.font_dark,
|
||||
fontSize: 16,
|
||||
alignSelf: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
Daily Transaction Report
|
||||
</Text>
|
||||
{/* Header */}
|
||||
<View
|
||||
style={{
|
||||
alignSelf: "center",
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
width: "512px",
|
||||
backgroundColor: colors.header_color,
|
||||
borderRadius: 16,
|
||||
margin: "8px",
|
||||
padding: "8px",
|
||||
alignSelf: "stretch",
|
||||
padding: 60,
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
<Image
|
||||
src={ustplogo}
|
||||
style={{
|
||||
color: colors.font_dark,
|
||||
fontSize: 16,
|
||||
textAlign: "center",
|
||||
width: 70,
|
||||
height: 70,
|
||||
position: "absolute",
|
||||
left: "45",
|
||||
top: "",
|
||||
}}
|
||||
/>
|
||||
|
||||
<View
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "auto",
|
||||
position: "absolute",
|
||||
right: "30",
|
||||
top: "35",
|
||||
}}
|
||||
>
|
||||
Total Equipments Processed:{" "}
|
||||
{count_transaction_equipments(transactions_today)}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.font_dark,
|
||||
fontSize: 16,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
Total Transactions: {transactions_today.length}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.font_dark,
|
||||
fontSize: 16,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
Rejected Transactions:{" "}
|
||||
{
|
||||
transactions_today.filter(
|
||||
(transaction) => transaction.transaction_status == "Rejected"
|
||||
).length
|
||||
}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.font_dark,
|
||||
fontSize: 16,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
Finalized Transactions:{" "}
|
||||
{
|
||||
transactions_today.filter(
|
||||
(transaction) => transaction.transaction_status == "Finalized"
|
||||
).length
|
||||
}
|
||||
</Text>
|
||||
<View style={{ alignItems: "center" }}>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.form_dark,
|
||||
fontSize: 11,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
Republic of the Philippines{"\n"}
|
||||
<Text style={{ fontFamily: "Helvetica-Bold" }}>
|
||||
{" "}
|
||||
UNIVERSITY OF SCIENCE and TECHNOLOGY OF SCIENCE AND TECHNOLOGY{" "}
|
||||
</Text>
|
||||
{"\n"}
|
||||
College of Science and Mathematics
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.form_dark,
|
||||
fontSize: 11,
|
||||
textAlign: "center",
|
||||
margin: "2 5 2 5",
|
||||
}}
|
||||
>
|
||||
<Text style={{ fontFamily: "Helvetica-Bold" }}>
|
||||
{" "}
|
||||
Department of Chemistry (Laboratory)
|
||||
</Text>
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.font_dark,
|
||||
fontSize: 16,
|
||||
alignSelf: "center",
|
||||
justifyContent: "center",
|
||||
color: colors.form_dark,
|
||||
fontSize: 13,
|
||||
padding: "5 0 5 0",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
Monthly Transaction Report
|
||||
<Text style={{ fontFamily: "Helvetica-Bold" }}>
|
||||
LABORATORY REPORTS
|
||||
</Text>
|
||||
</Text>
|
||||
|
||||
<View
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
alignSelf: "center",
|
||||
justifyContent: "center",
|
||||
width: "512px",
|
||||
backgroundColor: colors.header_color,
|
||||
borderRadius: 16,
|
||||
margin: "8px",
|
||||
padding: "8px",
|
||||
width: "85%",
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
<View
|
||||
style={{
|
||||
color: colors.font_dark,
|
||||
fontSize: 16,
|
||||
textAlign: "center",
|
||||
display: "flex",
|
||||
padding: "0px 12px",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
gap: "10px",
|
||||
alignSelf: "stretch",
|
||||
border: "1px solid #000",
|
||||
}}
|
||||
>
|
||||
Total Equipments Processed:{" "}
|
||||
{count_transaction_equipments(transactions_thismonth)}
|
||||
</Text>
|
||||
<Text
|
||||
<Text
|
||||
style={{
|
||||
fontFamily: "Helvetica-Bold",
|
||||
color: colors.form_dark,
|
||||
fontSize: 13,
|
||||
padding: "5 0 5 0",
|
||||
}}
|
||||
>
|
||||
Transaction
|
||||
</Text>
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
color: colors.font_dark,
|
||||
fontSize: 16,
|
||||
textAlign: "center",
|
||||
display: "flex",
|
||||
padding: "5px 12px",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
gap: "10px",
|
||||
alignSelf: "stretch",
|
||||
borderRight: "1px solid #000",
|
||||
borderBottom: "1px solid #000",
|
||||
borderLeft: "1px solid #000",
|
||||
}}
|
||||
>
|
||||
Total Transactions: {transactions_thismonth.length}
|
||||
</Text>
|
||||
<Text
|
||||
<Text style={{ fontSize: 13 }}>Daily Transaction Report</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 13,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
{" "}
|
||||
• Total Equipments Processed:{" "}
|
||||
{count_transaction_equipments(transactions_today)}
|
||||
</Text>
|
||||
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 13,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
{" "}
|
||||
• Total Transactions: {transactions_today.length}
|
||||
</Text>
|
||||
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 13,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
{" "}
|
||||
• Rejected Transactions:{" "}
|
||||
{
|
||||
transactions_today.filter(
|
||||
(transaction) => transaction.transaction_status == "Rejected"
|
||||
).length
|
||||
}
|
||||
</Text>
|
||||
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 13,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
{" "}
|
||||
• Finalized Transactions:{" "}
|
||||
{
|
||||
transactions_today.filter(
|
||||
(transaction) => transaction.transaction_status == "Finalized"
|
||||
).length
|
||||
}
|
||||
</Text>
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
color: colors.font_dark,
|
||||
fontSize: 16,
|
||||
textAlign: "center",
|
||||
display: "flex",
|
||||
padding: "5px 12px",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "flex-start",
|
||||
gap: "10px",
|
||||
alignSelf: "stretch",
|
||||
borderRight: "1px solid #000",
|
||||
borderBottom: "1px solid #000",
|
||||
borderLeft: "1px solid #000",
|
||||
}}
|
||||
>
|
||||
Rejected Transactions:{" "}
|
||||
{
|
||||
transactions_thismonth.filter(
|
||||
(transaction) => transaction.transaction_status == "Rejected"
|
||||
).length
|
||||
}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.font_dark,
|
||||
fontSize: 16,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
Finalized Transactions:{" "}
|
||||
{
|
||||
transactions_thismonth.filter(
|
||||
(transaction) => transaction.transaction_status == "Finalized"
|
||||
).length
|
||||
}
|
||||
</Text>
|
||||
<Text style={{ fontSize: 13 }}>Monthly Transaction Report</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 13,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
{" "}
|
||||
• Total Equipments Processed:{" "}
|
||||
{count_transaction_equipments(transactions_thismonth)}
|
||||
</Text>
|
||||
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 13,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
{" "}
|
||||
• Total Transactions: {transactions_thismonth.length}
|
||||
</Text>
|
||||
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 13,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
{" "}
|
||||
• Rejected Transactions:{" "}
|
||||
{
|
||||
transactions_thismonth.filter(
|
||||
(transaction) => transaction.transaction_status == "Rejected"
|
||||
).length
|
||||
}
|
||||
</Text>
|
||||
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 13,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
{" "}
|
||||
• Finalized Transactions:{" "}
|
||||
{
|
||||
transactions_thismonth.filter(
|
||||
(transaction) => transaction.transaction_status == "Finalized"
|
||||
).length
|
||||
}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</Page>
|
||||
</Document>
|
||||
|
|
|
|||
|
|
@ -58,6 +58,7 @@ export default function EquipmentInstanceLogsPage() {
|
|||
minHeight: "100%",
|
||||
minWidth: "100%",
|
||||
flexWrap: "wrap",
|
||||
marginTop: "2rem",
|
||||
}}
|
||||
>
|
||||
<div style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}>
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@ export default function EquipmentInstancesListPage() {
|
|||
width: "100%",
|
||||
minHeight: "100%",
|
||||
minWidth: "100%",
|
||||
marginTop: "100px"
|
||||
marginTop: "7rem"
|
||||
}}
|
||||
>
|
||||
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ export default function EquipmentTallyPage() {
|
|||
}
|
||||
return (
|
||||
<div style={styles.background}>
|
||||
<Header label={"Items Tally"} />
|
||||
<Header label={"Equipment Stocks"} />
|
||||
<div
|
||||
style={{
|
||||
...styles.flex_column,
|
||||
|
|
@ -65,81 +65,95 @@ export default function EquipmentTallyPage() {
|
|||
width: "100%",
|
||||
minHeight: "100%",
|
||||
minWidth: "100%",
|
||||
marginTop: "6rem",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
...styles.flex_row,
|
||||
...{ alignItems: "center", justifySelf: "flex-start" },
|
||||
}}
|
||||
>
|
||||
<SearchIcon
|
||||
style={{
|
||||
height: 32,
|
||||
width: 32,
|
||||
fill: colors.font_dark,
|
||||
marginLeft: "1rem",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
/>
|
||||
<Autocomplete
|
||||
sx={{
|
||||
display: "inline-block",
|
||||
"& input": {
|
||||
width: "256x",
|
||||
bgcolor: "background.paper",
|
||||
color: (theme) =>
|
||||
theme.palette.getContrastText(theme.palette.background.paper),
|
||||
},
|
||||
}}
|
||||
value={filter}
|
||||
onChange={(_event, newValue) => {
|
||||
setFilter(newValue);
|
||||
}}
|
||||
freeSolo
|
||||
id="custom-input-demo"
|
||||
options={["Glassware", "Miscellaneous"]}
|
||||
renderInput={(params) => (
|
||||
<div ref={params.InputProps.ref}>
|
||||
<input type="text" {...params.inputProps} />
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_M,
|
||||
...styles.text_dark,
|
||||
...{ marginLeft: "4px" },
|
||||
}}
|
||||
>
|
||||
Results Found:{" "}
|
||||
{
|
||||
equipment_instances?.data?.filter((equipment) =>
|
||||
filter !== null
|
||||
? // If filter is not null, we filter if it matches any criteria
|
||||
equipment.equipment_name
|
||||
.toLowerCase()
|
||||
.includes(filter.toLowerCase()) ||
|
||||
equipment.category
|
||||
.toLowerCase()
|
||||
.includes(filter.toLowerCase()) ||
|
||||
equipment.last_updated
|
||||
.toLowerCase()
|
||||
.includes(filter?.toLowerCase()) ||
|
||||
equipment.status.toLowerCase() == filter.toLowerCase()
|
||||
: // If filter keyword is null then we just pass through everything as if we did not filter at all
|
||||
true
|
||||
).length
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div style={{ alignSelf: "flex-start", paddingLeft: "32px" }}></div>
|
||||
<TableContainer
|
||||
style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}
|
||||
component={Paper}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
...styles.flex_row,
|
||||
...{ alignItems: "center", justifySelf: "flex-start" },
|
||||
}}
|
||||
>
|
||||
<SearchIcon
|
||||
style={{
|
||||
height: 32,
|
||||
width: 32,
|
||||
fill: colors.font_dark,
|
||||
marginLeft: "1rem",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
/>
|
||||
<Autocomplete
|
||||
sx={{
|
||||
display: "inline-block",
|
||||
"& input": {
|
||||
width: "256x",
|
||||
bgcolor: "background.paper",
|
||||
color: (theme) =>
|
||||
theme.palette.getContrastText(
|
||||
theme.palette.background.paper
|
||||
),
|
||||
},
|
||||
}}
|
||||
value={filter}
|
||||
onChange={(_event, newValue) => {
|
||||
setFilter(newValue);
|
||||
}}
|
||||
freeSolo
|
||||
id="custom-input-demo"
|
||||
options={["Glassware", "Miscellaneous"]}
|
||||
renderInput={(params) => (
|
||||
<div ref={params.InputProps.ref}>
|
||||
<input type="text" {...params.inputProps} />
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_M,
|
||||
...styles.text_dark,
|
||||
...{ marginLeft: "4px" },
|
||||
}}
|
||||
>
|
||||
Results Found:{" "}
|
||||
{
|
||||
equipment_instances?.data?.filter((equipment) =>
|
||||
filter !== null
|
||||
? // If filter is not null, we filter if it matches any criteria
|
||||
equipment.equipment_name
|
||||
.toLowerCase()
|
||||
.includes(filter.toLowerCase()) ||
|
||||
equipment.category
|
||||
.toLowerCase()
|
||||
.includes(filter.toLowerCase()) ||
|
||||
equipment.last_updated
|
||||
.toLowerCase()
|
||||
.includes(filter?.toLowerCase()) ||
|
||||
equipment.status.toLowerCase() == filter.toLowerCase()
|
||||
: // If filter keyword is null then we just pass through everything as if we did not filter at all
|
||||
true
|
||||
).length
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Table sx={{ minWidth: "32rem" }} size="medium">
|
||||
<TableHead>
|
||||
<TableRow></TableRow>
|
||||
<TableRow style={{ backgroundColor: colors.header_color }}>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
ID
|
||||
|
|
@ -192,7 +206,7 @@ export default function EquipmentTallyPage() {
|
|||
<TableCell align="center" component="th" scope="row">
|
||||
<div style={styles.flex_column}>
|
||||
<p style={{ ...styles.text_dark, ...styles.text_S }}>
|
||||
Available:
|
||||
Available: {"\n"}
|
||||
{
|
||||
equipment_instances.data?.filter(
|
||||
(equipment_instance) =>
|
||||
|
|
@ -203,7 +217,7 @@ export default function EquipmentTallyPage() {
|
|||
}
|
||||
</p>
|
||||
<p style={{ ...styles.text_dark, ...styles.text_S }}>
|
||||
Pending:
|
||||
Pending: {"\n"}
|
||||
{
|
||||
equipment_instances.data?.filter(
|
||||
(equipment_instance) =>
|
||||
|
|
@ -214,7 +228,24 @@ export default function EquipmentTallyPage() {
|
|||
}
|
||||
</p>
|
||||
<p style={{ ...styles.text_dark, ...styles.text_S }}>
|
||||
Broken:
|
||||
Borrowed: {"\n"}
|
||||
{
|
||||
equipment_instances.data?.filter(
|
||||
(equipment_instance) =>
|
||||
equipment_instance.equipment_name ==
|
||||
equipment.name &&
|
||||
equipment_instance.status == "Borrowed"
|
||||
).length
|
||||
}
|
||||
</p>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_dark,
|
||||
...styles.text_S,
|
||||
color: colors.red,
|
||||
}}
|
||||
>
|
||||
Broken: {"\n"}
|
||||
{
|
||||
equipment_instances.data?.filter(
|
||||
(equipment_instance) =>
|
||||
|
|
@ -224,6 +255,26 @@ export default function EquipmentTallyPage() {
|
|||
).length
|
||||
}
|
||||
</p>
|
||||
<div
|
||||
style={{
|
||||
borderTop: "1px solid #000",
|
||||
minWidth: "40%",
|
||||
alignSelf: "center",
|
||||
}}
|
||||
>
|
||||
<p
|
||||
style={{ ...styles.text_dark, ...styles.text_s }}
|
||||
>
|
||||
Total: {"\n"}
|
||||
{
|
||||
equipment_instances.data?.filter(
|
||||
(equipment_instance) =>
|
||||
equipment_instance.equipment_name ===
|
||||
equipment.name
|
||||
).length
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ export default function ManageEquipmentPage() {
|
|||
return (
|
||||
<div style={styles.background}>
|
||||
<Header label={"Equipment Management"} />
|
||||
<div style={{ position: "relative", zIndex: 999, marginTop: 80 , alignContent: "center", height: "100%"}}>
|
||||
<div style={{ position: "relative", zIndex: 999, marginTop: "7rem" , alignContent: "center", height: "100%"}}>
|
||||
<RestrictedComponent allow_only={"Technician"}>
|
||||
<TechnicianEquipmentButtons />
|
||||
<TechnicianLogButtons />
|
||||
|
|
|
|||
|
|
@ -186,7 +186,7 @@ export default function TransactionsListPage() {
|
|||
Additional Members
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Additional Members
|
||||
Equipments
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Actions
|
||||
|
|
@ -461,6 +461,7 @@ export default function TransactionsListPage() {
|
|||
width: "auto",
|
||||
alignSelf: "center",
|
||||
borderRadius: "7px",
|
||||
minWidth: "65px"
|
||||
}}
|
||||
onClick={() => {
|
||||
navigate(`/view/transaction/${transaction.id}`, {
|
||||
|
|
@ -477,7 +478,7 @@ export default function TransactionsListPage() {
|
|||
|
||||
}}
|
||||
>
|
||||
Tap To View {"\n"} or Print
|
||||
Tap To View {"\n"} or Print this slip.
|
||||
</p>
|
||||
</button>
|
||||
</TableCell>
|
||||
|
|
|
|||
Loading…
Reference in a new issue