mirror of
https://github.com/lemeow125/Borrowing-TrackerFrontend.git
synced 2024-11-16 22:09:29 +08:00
basta daghan kaayo ko gi change specially katung tap to view nga makita ang mga pdf's pdf's. dili ra si student na ang makakita ra, pati ang teacher and lab technician. aside ana, daghan paa. salamat ol. in god's will.
This commit is contained in:
Pongot, Jophiel
parent
209219afb4
commit
f15052c565
8 changed files with 478 additions and 147 deletions
|
|
@ -1,6 +1,6 @@
|
|||
import { useQuery } from "@tanstack/react-query";
|
||||
import { TransactionsByStudentAPI } from "../../API/API";
|
||||
import styles from "../../../styles";
|
||||
import styles, { colors } from "../../../styles";
|
||||
import CircularProgress from "@mui/material/CircularProgress/CircularProgress";
|
||||
import React, { useState } from "react";
|
||||
import TransactionEntry from "../../TransactionEntry/TransactionEntry";
|
||||
|
|
@ -70,12 +70,43 @@ export default function StudentTransactionListView() {
|
|||
}}
|
||||
transaction={transaction}
|
||||
/>
|
||||
<button
|
||||
style={{
|
||||
borderTop: "2px solid rgba(160, 160, 160, 0.20)",
|
||||
padding: "7px",
|
||||
margin: "0px",
|
||||
backgroundColor: colors.header_color,
|
||||
width: 550,
|
||||
alignSelf: "center",
|
||||
borderRadius: "0px 0px 7px 7px",
|
||||
|
||||
}}
|
||||
onClick={() => {
|
||||
navigate(`/view/transaction/${transaction.id}`, {
|
||||
replace: true,
|
||||
state: { id: transaction.id },
|
||||
});
|
||||
}}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_gray,
|
||||
...styles.text_S,
|
||||
padding: "0px",
|
||||
margin: "0px",
|
||||
}}
|
||||
>
|
||||
TAP TO VIEW
|
||||
</p>
|
||||
</button>
|
||||
</React.Fragment>
|
||||
))
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,14 +1,16 @@
|
|||
import { useQuery } from "@tanstack/react-query";
|
||||
import { TransactionsByTeacherAPI } from "../../API/API";
|
||||
import styles from "../../../styles";
|
||||
import styles, { colors } from "../../../styles";
|
||||
import CircularProgress from "@mui/material/CircularProgress/CircularProgress";
|
||||
import React, { useState } from "react";
|
||||
import TransactionEntry from "../../TransactionEntry/TransactionEntry";
|
||||
import TransactionFilterMenu from "../../TransactionFilterMenu/TransactionFilterMenu";
|
||||
import Popup from "reactjs-popup";
|
||||
import EditTransactionModal from "../../EditTransactionModal/EditTransactionModal";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
export default function TeacherTransactionListView() {
|
||||
const navigate = useNavigate();
|
||||
const [EditTransactionOpen, SetEditTransactionOpen] = useState(false);
|
||||
const [SelectedTransaction, SetSelectedTransaction] = useState(0);
|
||||
const transactions = useQuery({
|
||||
|
|
@ -48,7 +50,7 @@ export default function TeacherTransactionListView() {
|
|||
<div
|
||||
style={{
|
||||
...styles.flex_column,
|
||||
...{ height: "50vh", overflowY: "scroll", width: "100%", },
|
||||
...{ height: "50vh", overflowY: "scroll", width: "100%", gap: "-15px", },
|
||||
}}
|
||||
>
|
||||
{transactions.data ? (
|
||||
|
|
@ -69,6 +71,35 @@ export default function TeacherTransactionListView() {
|
|||
}}
|
||||
transaction={transaction}
|
||||
/>
|
||||
<button
|
||||
style={{
|
||||
borderTop: "2px solid rgba(160, 160, 160, 0.20)",
|
||||
padding: "7px",
|
||||
margin: "0px",
|
||||
backgroundColor: colors.header_color,
|
||||
width: 550,
|
||||
alignSelf: "center",
|
||||
borderRadius: "0px 0px 7px 7px",
|
||||
|
||||
}}
|
||||
onClick={() => {
|
||||
navigate(`/view/transaction/${transaction.id}`, {
|
||||
replace: true,
|
||||
state: { id: transaction.id },
|
||||
});
|
||||
}}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_gray,
|
||||
...styles.text_S,
|
||||
padding: "0px",
|
||||
margin: "0px",
|
||||
}}
|
||||
>
|
||||
TAP TO VIEW
|
||||
</p>
|
||||
</button>
|
||||
</React.Fragment>
|
||||
))
|
||||
) : (
|
||||
|
|
@ -76,6 +107,7 @@ export default function TeacherTransactionListView() {
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Popup
|
||||
open={EditTransactionOpen}
|
||||
onClose={() => SetEditTransactionOpen(false)}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { colors } from "../../styles";
|
||||
|
||||
export default function StatusTextColor(status: string) {
|
||||
export function StatusTextColor(status: string) {
|
||||
if (
|
||||
status === "Pending Approval" ||
|
||||
status === "Returned: Pending Checking"
|
||||
|
|
@ -11,8 +11,25 @@ export default function StatusTextColor(status: string) {
|
|||
status === "Finalized" ||
|
||||
status === "Borrowed"
|
||||
) {
|
||||
return colors.dark_green;
|
||||
return colors.darkgreen;
|
||||
} else {
|
||||
return colors.red;
|
||||
}
|
||||
}
|
||||
|
||||
export function StatusBGColor(status: string) {
|
||||
if (
|
||||
status === "Pending Approval" ||
|
||||
status === "Returned: Pending Checking"
|
||||
) {
|
||||
return colors.lightorange;
|
||||
} else if (
|
||||
status === "Approved" ||
|
||||
status === "Finalized" ||
|
||||
status === "Borrowed"
|
||||
) {
|
||||
return colors.lightgreen;
|
||||
} else {
|
||||
return colors.lightred;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
import styles from "../../styles";
|
||||
import { colors } from "../../styles";
|
||||
import { TransactionType } from "../Types/Types";
|
||||
import StatusTextColor from "../StatusTextColor/StatusTextColor";
|
||||
import { StatusTextColor } from "../StatusTextColor/StatusTextColor";
|
||||
import CircleSharpIcon from '@mui/icons-material/CircleSharp';
|
||||
export interface props {
|
||||
transaction: TransactionType;
|
||||
onClick?: React.MouseEventHandler<HTMLButtonElement>;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
export default function TransactionEntry(props: props) {
|
||||
|
|
@ -19,7 +19,7 @@ export default function TransactionEntry(props: props) {
|
|||
alignSelf: "center",
|
||||
justifySelf: "center",
|
||||
backgroundColor: colors.header_color,
|
||||
borderRadius: 16,
|
||||
borderRadius: "7px 7px 0px 0px",
|
||||
marginTop: "10px",
|
||||
paddingTop: "15px",
|
||||
width: "100%",
|
||||
|
|
@ -106,28 +106,7 @@ export default function TransactionEntry(props: props) {
|
|||
|
||||
|
||||
{/* //GIWALA */}
|
||||
|
||||
<div
|
||||
style={{
|
||||
borderTop: "2px solid rgba(160, 160, 160, 0.20)",
|
||||
padding: "7px",
|
||||
margin: "0px",
|
||||
|
||||
|
||||
}}>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_gray,
|
||||
...styles.text_S,
|
||||
padding: "0px",
|
||||
margin: "0px"
|
||||
|
||||
|
||||
}}
|
||||
>
|
||||
TAP TO VIEW
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,161 +1,355 @@
|
|||
import { Document, Page, Text, View } from "@react-pdf/renderer";
|
||||
import { Document, Page, Text, View, Image } from "@react-pdf/renderer";
|
||||
import { TransactionType } from "../Types/Types";
|
||||
import { colors } from "../../styles";
|
||||
import StatusTextColor from "../StatusTextColor/StatusTextColor";
|
||||
import {
|
||||
StatusTextColor,
|
||||
StatusBGColor,
|
||||
} from "../StatusTextColor/StatusTextColor";
|
||||
import ustplogo from "../../assets/ustp-logo.png";
|
||||
|
||||
type props = {
|
||||
transaction: TransactionType | null;
|
||||
transaction: TransactionType;
|
||||
};
|
||||
|
||||
export default function TransactionPDF(props: props) {
|
||||
return (
|
||||
<Document>
|
||||
<Page size={"A4"}>
|
||||
<Page size={{ width: 8.5 * 72, height: 10 * 90 }}>
|
||||
{/* Whole Page */}
|
||||
<View
|
||||
style={{
|
||||
alignSelf: "center",
|
||||
justifyContent: "center",
|
||||
width: "512px",
|
||||
backgroundColor: colors.header_color,
|
||||
borderRadius: 16,
|
||||
margin: "8px",
|
||||
padding: "8px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
width: "90%",
|
||||
height: "100%",
|
||||
alignItems: "flex-end",
|
||||
marginLeft: "auto", // Align to the right edge
|
||||
marginRight: "auto",
|
||||
padding: "20 0",
|
||||
|
||||
gap: 10,
|
||||
}}
|
||||
>
|
||||
<View style={{ display: "flex", flexDirection: "row" }}>
|
||||
<Text
|
||||
{/* Header */}
|
||||
<View
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
alignSelf: "stretch",
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src={ustplogo}
|
||||
style={{
|
||||
color: colors.font_dark,
|
||||
fontSize: 16,
|
||||
textAlign: "left",
|
||||
flex: 1,
|
||||
width: 60,
|
||||
height: 60,
|
||||
position: "absolute",
|
||||
left: 10,
|
||||
top: 0,
|
||||
}}
|
||||
>
|
||||
Transaction ID: {props.transaction?.id}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.font_dark,
|
||||
fontSize: 16,
|
||||
textAlign: "right",
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
{props.transaction?.timestamp}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={{ paddingVertical: 8 }}></View>
|
||||
<View style={{ display: "flex", flexDirection: "row" }}>
|
||||
<View style={{ flex: 1 }}>
|
||||
/>
|
||||
|
||||
<View style={{ alignItems: "center" }}>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.font_dark,
|
||||
fontSize: 16,
|
||||
textAlign: "left",
|
||||
margin: 0,
|
||||
color: colors.form_dark,
|
||||
fontSize: 11,
|
||||
textAlign: "center",
|
||||
margin: "2 5 2 5",
|
||||
}}
|
||||
>
|
||||
Borrower: {props.transaction?.borrower.name}{" "}
|
||||
{`(ID:${props.transaction?.borrower.id})`}
|
||||
Department of Chemistry (Laboratory)
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.font_dark,
|
||||
fontSize: 16,
|
||||
textAlign: "left",
|
||||
margin: 0,
|
||||
color: colors.form_dark,
|
||||
fontSize: 10,
|
||||
textAlign: "center",
|
||||
padding: "5 0 5 0",
|
||||
}}
|
||||
>
|
||||
{`(${props.transaction?.borrower.course})`}
|
||||
University of Science and Technology of Southern Philippines{" "}
|
||||
{"\n"}
|
||||
Lapasan Cagayan de Oro City {"\n"}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.font_dark,
|
||||
fontSize: 16,
|
||||
textAlign: "left",
|
||||
margin: 0,
|
||||
color: colors.form_dark,
|
||||
fontSize: 11,
|
||||
padding: "5 0 5 0",
|
||||
}}
|
||||
>
|
||||
Teacher: {props.transaction?.teacher.name}{" "}
|
||||
{`(ID:${props.transaction?.teacher.id})`}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.font_dark,
|
||||
fontSize: 16,
|
||||
textAlign: "left",
|
||||
margin: 0,
|
||||
}}
|
||||
>
|
||||
Subject: {props.transaction?.subject}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.font_dark,
|
||||
fontSize: 16,
|
||||
textAlign: "left",
|
||||
margin: 0,
|
||||
marginTop: 8,
|
||||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
Remarks: {props.transaction?.remarks}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.font_dark,
|
||||
fontSize: 16,
|
||||
textAlign: "left",
|
||||
margin: 0,
|
||||
marginTop: 8,
|
||||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
Consumables: {props.transaction?.consumables}
|
||||
BORROWER'S SLIP
|
||||
</Text>
|
||||
</View>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.font_dark,
|
||||
textAlign: "right",
|
||||
fontSize: 16,
|
||||
margin: 0,
|
||||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
Equipments:
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* Status */}
|
||||
<View
|
||||
style={{
|
||||
alignSelf: "stretch",
|
||||
alignContent: "center",
|
||||
justifyContent: "center",
|
||||
backgroundColor: StatusBGColor(
|
||||
props.transaction.transaction_status
|
||||
),
|
||||
borderRadius: 16,
|
||||
padding: "8px",
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
color: StatusTextColor(props.transaction.transaction_status),
|
||||
textAlign: "right",
|
||||
fontSize: 16,
|
||||
}}
|
||||
>
|
||||
Status: {`${props.transaction.transaction_status}`}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* Transaction ID */}
|
||||
<View
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
alignSelf: "stretch",
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.form_dark,
|
||||
fontSize: 20,
|
||||
textAlign: "right",
|
||||
}}
|
||||
>
|
||||
Transaction ID: #{props.transaction.id}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View
|
||||
style={{
|
||||
display: "flex",
|
||||
alignSelf: "stretch",
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.form_title,
|
||||
borderBottom: "1px solid #A2A2A2",
|
||||
}}
|
||||
>
|
||||
Borrower Details
|
||||
</Text>
|
||||
</View>
|
||||
{/* Top Details */}
|
||||
<View
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
gap: 5,
|
||||
alignSelf: "stretch",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
{/* Borrower Details */}
|
||||
<View
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
gap: 5,
|
||||
alignSelf: "stretch",
|
||||
padding: "0px 5px",
|
||||
}}
|
||||
>
|
||||
<View style={{ display: "flex", flexDirection: "column" }}>
|
||||
{props.transaction?.equipments.map((equipment) => (
|
||||
<Text
|
||||
style={{
|
||||
color: colors.form_dark,
|
||||
fontSize: 16,
|
||||
textAlign: "left",
|
||||
margin: 0,
|
||||
}}
|
||||
>
|
||||
Name:{" "}
|
||||
<Text style={{ textDecoration: "underline" }}>
|
||||
{props.transaction.borrower.name}
|
||||
</Text>{" "}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.form_dark,
|
||||
fontSize: 14,
|
||||
textAlign: "left",
|
||||
margin: 0,
|
||||
}}
|
||||
>
|
||||
Course:{" "}
|
||||
<Text
|
||||
style={{
|
||||
color: colors.font_dark,
|
||||
textAlign: "right",
|
||||
fontSize: 12,
|
||||
margin: 0,
|
||||
marginTop: 2,
|
||||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
{` - ${equipment.name} (ID:${equipment.id})`}
|
||||
</Text>
|
||||
))}
|
||||
style={{ textDecoration: "underline" }}
|
||||
>{`${props.transaction.borrower.course}`}</Text>{" "}
|
||||
{"\n"}
|
||||
{/* Section: <Text style={{ textDecoration: "underline" }}>{props.transaction.section}</Text> */}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={{ display: "flex", flexDirection: "column" }}>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.form_dark,
|
||||
fontSize: 14,
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
Timestamp:{" "}
|
||||
<Text style={{ textDecoration: "underline" }}>
|
||||
{props.transaction.timestamp}
|
||||
</Text>
|
||||
{"\n"}
|
||||
Lab instructor:{" "}
|
||||
<Text style={{ textDecoration: "underline" }}>
|
||||
{props.transaction.teacher.name}
|
||||
</Text>{" "}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.form_dark,
|
||||
fontSize: 14,
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
Subject:{" "}
|
||||
<Text style={{ textDecoration: "underline" }}>
|
||||
{props.transaction.subject}
|
||||
</Text>
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={{ alignContent: "center", justifyContent: "center" }}>
|
||||
|
||||
{/* Equipment Section */}
|
||||
<View
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: 5,
|
||||
alignSelf: "stretch",
|
||||
marginTop: "10"
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
color: StatusTextColor(
|
||||
props.transaction?.transaction_status || "Pending"
|
||||
),
|
||||
textAlign: "center",
|
||||
fontSize: 16,
|
||||
color: colors.form_title,
|
||||
borderBottom: "1px solid #A2A2A2",
|
||||
}}
|
||||
>
|
||||
{`${props.transaction?.transaction_status}`}
|
||||
Selected Equipment
|
||||
</Text>
|
||||
{props.transaction.equipments.map((equipment) => (
|
||||
<Text
|
||||
style={{
|
||||
color: colors.form_dark,
|
||||
textAlign: "left",
|
||||
fontSize: 14,
|
||||
margin: 0,
|
||||
marginTop: 2,
|
||||
flexWrap: "wrap",
|
||||
padding: 3,
|
||||
}}
|
||||
>
|
||||
{` - ${equipment.name} (ID:${equipment.id})`}
|
||||
</Text>
|
||||
))}
|
||||
{/* total Equipment */}
|
||||
<View style={{ borderTop: "1px", marginTop: 5, width: "150px" }}>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.form_dark,
|
||||
textAlign: "left",
|
||||
fontSize: 14,
|
||||
margin: 0,
|
||||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
Total Equipment: {props.transaction.equipments.length}
|
||||
</Text>
|
||||
</View>
|
||||
{/* Consumables Area */}
|
||||
<View style={{ marginTop: "5" , marginBottom: 10}}>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.form_title,
|
||||
borderBottom: "1px solid #A2A2A2",
|
||||
}}
|
||||
>
|
||||
Consumables
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.form_dark,
|
||||
textAlign: "left",
|
||||
fontSize: 14,
|
||||
flexWrap: "wrap",
|
||||
padding: 3,
|
||||
}}
|
||||
>
|
||||
{props.transaction?.consumables}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* Members here */}
|
||||
<View style={{
|
||||
display: "flex",
|
||||
gap: 5,
|
||||
alignSelf: "stretch",}}>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.form_title,
|
||||
borderBottom: "1px solid #A2A2A2",
|
||||
}}
|
||||
>
|
||||
Members
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 16,
|
||||
margin: 0,
|
||||
marginTop: 8,
|
||||
}}
|
||||
>
|
||||
{props.transaction?.additional_members}
|
||||
</Text>
|
||||
{/* Remarks */}
|
||||
</View>
|
||||
<View style={{ display: "flex", flexDirection: "column", alignSelf: "stretch" }}>
|
||||
<View style={{ padding: "10 0" }}>
|
||||
<Text
|
||||
style={{
|
||||
color: colors.form_title,
|
||||
marginTop: 10,
|
||||
borderBottom: "1px solid #A2A2A2",
|
||||
padding: "5 0",
|
||||
}}
|
||||
>
|
||||
Remarks
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<Text
|
||||
style={{
|
||||
color: colors.form_dark,
|
||||
fontSize: 14,
|
||||
margin: 0,
|
||||
marginTop: 8,
|
||||
}}
|
||||
>
|
||||
{props.transaction.remarks}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</Page>
|
||||
</Document>
|
||||
|
|
|
|||
|
|
@ -110,6 +110,7 @@ export type UserType = {
|
|||
};
|
||||
|
||||
export type TransactionType = {
|
||||
additional_members: string;
|
||||
id: number;
|
||||
borrower: {
|
||||
id: number;
|
||||
|
|
|
|||
|
|
@ -112,6 +112,7 @@ export default function AddTransactionPage() {
|
|||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
overflowY: "scroll",
|
||||
marginTop: 64
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -16,8 +16,10 @@ import { useState } from "react";
|
|||
import EditTransactionModal from "../../Components/EditTransactionModal/EditTransactionModal";
|
||||
import EditItemInstanceModal from "../../Components/EditItemInstanceModal/EditItemInstanceModal";
|
||||
import SearchIcon from "@mui/icons-material/Search";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
export default function TransactionsListPage() {
|
||||
const navigate = useNavigate();
|
||||
const [EditTransactionOpen, SetEditTransactionOpen] = useState(false);
|
||||
const [SelectedTransaction, SetSelectedTransaction] = useState(0);
|
||||
const [EditEquipmentsOpen, SetEditEquipmentsOpen] = useState(false);
|
||||
|
|
@ -145,6 +147,9 @@ export default function TransactionsListPage() {
|
|||
transaction.teacher.name
|
||||
.toLowerCase()
|
||||
.includes(filter.toLowerCase()) ||
|
||||
transaction.additional_members
|
||||
.toLowerCase()
|
||||
.includes(filter.toLowerCase()) ||
|
||||
transaction.remarks
|
||||
.toLowerCase()
|
||||
.includes(filter?.toLowerCase()) ||
|
||||
|
|
@ -178,7 +183,13 @@ export default function TransactionsListPage() {
|
|||
Consumables
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Equipments
|
||||
Additional Members
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Additional Members
|
||||
</TableCell>
|
||||
<TableCell align="center" style={styles.text_light}>
|
||||
Actions
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
|
|
@ -191,6 +202,9 @@ export default function TransactionsListPage() {
|
|||
transaction.borrower.name
|
||||
.toLowerCase()
|
||||
.includes(filter.toLowerCase()) ||
|
||||
transaction.additional_members
|
||||
.toLowerCase()
|
||||
.includes(filter.toLowerCase()) ||
|
||||
transaction.teacher.name
|
||||
.toLowerCase()
|
||||
.includes(filter.toLowerCase()) ||
|
||||
|
|
@ -315,6 +329,28 @@ export default function TransactionsListPage() {
|
|||
>
|
||||
{transaction.consumables}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="center"
|
||||
component="th"
|
||||
scope="row"
|
||||
style={{ ...styles.text_S }}
|
||||
sx={{
|
||||
maxWidth: "64px",
|
||||
flexWrap: "wrap",
|
||||
wordWrap: "break-word",
|
||||
}}
|
||||
onClick={() => {
|
||||
if (
|
||||
transaction.transaction_status != "Finalized" &&
|
||||
transaction.transaction_status != "Rejected"
|
||||
) {
|
||||
SetSelectedTransaction(transaction.id);
|
||||
SetEditTransactionOpen(true);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{transaction.additional_members}
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
<p style={{ ...styles.text_M, ...styles.text_dark }}>
|
||||
Involved Items: {transaction.equipments.length}
|
||||
|
|
@ -405,6 +441,46 @@ export default function TransactionsListPage() {
|
|||
</Table>
|
||||
</TableContainer>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="center"
|
||||
component="th"
|
||||
scope="row"
|
||||
style={{ ...styles.text_S }}
|
||||
sx={{
|
||||
maxWidth: "64px",
|
||||
flexWrap: "wrap",
|
||||
wordWrap: "break-word",
|
||||
}}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
borderTop: "2px solid rgba(160, 160, 160, 0.20)",
|
||||
padding: "7px",
|
||||
margin: "0px",
|
||||
backgroundColor: colors.dandelion,
|
||||
width: "auto",
|
||||
alignSelf: "center",
|
||||
borderRadius: "7px",
|
||||
}}
|
||||
onClick={() => {
|
||||
navigate(`/view/transaction/${transaction.id}`, {
|
||||
replace: true,
|
||||
state: { id: transaction.id },
|
||||
});
|
||||
}}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
...styles.text_S,
|
||||
padding: "0px",
|
||||
margin: "0px",
|
||||
|
||||
}}
|
||||
>
|
||||
Tap To View {"\n"} or Print
|
||||
</p>
|
||||
</button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
|
|
|
|||
Loading…
Reference in a new issue