From f15052c56582f7cda2963e9eab8da73ff15d797b Mon Sep 17 00:00:00 2001 From: "Pongot, Jophiel" Date: Tue, 9 Jan 2024 11:20:15 +0800 Subject: [PATCH] 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. --- .../Student/StudentTransactionListView.tsx | 33 +- .../Teacher/TeacherTransactionListView.tsx | 36 +- .../StatusTextColor/StatusTextColor.tsx | 21 +- .../TransactionEntry/TransactionEntry.tsx | 27 +- .../TransactionPDF/TransactionPDF.tsx | 428 +++++++++++++----- src/Components/Types/Types.tsx | 1 + .../AddTransactionPage/AddTransactionPage.tsx | 1 + .../TransactionsListPage.tsx | 78 +++- 8 files changed, 478 insertions(+), 147 deletions(-) diff --git a/src/Components/DashboardPage/Student/StudentTransactionListView.tsx b/src/Components/DashboardPage/Student/StudentTransactionListView.tsx index f41bf1f..07c1fd7 100644 --- a/src/Components/DashboardPage/Student/StudentTransactionListView.tsx +++ b/src/Components/DashboardPage/Student/StudentTransactionListView.tsx @@ -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} /> + )) ) : ( <> )} + + ); diff --git a/src/Components/DashboardPage/Teacher/TeacherTransactionListView.tsx b/src/Components/DashboardPage/Teacher/TeacherTransactionListView.tsx index 592df68..b7f5b08 100644 --- a/src/Components/DashboardPage/Teacher/TeacherTransactionListView.tsx +++ b/src/Components/DashboardPage/Teacher/TeacherTransactionListView.tsx @@ -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() {
{transactions.data ? ( @@ -69,6 +71,35 @@ export default function TeacherTransactionListView() { }} transaction={transaction} /> + )) ) : ( @@ -76,6 +107,7 @@ export default function TeacherTransactionListView() { )}
+ SetEditTransactionOpen(false)} diff --git a/src/Components/StatusTextColor/StatusTextColor.tsx b/src/Components/StatusTextColor/StatusTextColor.tsx index 4354cff..6541377 100644 --- a/src/Components/StatusTextColor/StatusTextColor.tsx +++ b/src/Components/StatusTextColor/StatusTextColor.tsx @@ -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; + } +} diff --git a/src/Components/TransactionEntry/TransactionEntry.tsx b/src/Components/TransactionEntry/TransactionEntry.tsx index 8f0ed31..8458658 100644 --- a/src/Components/TransactionEntry/TransactionEntry.tsx +++ b/src/Components/TransactionEntry/TransactionEntry.tsx @@ -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; - + } 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 */} - -
-

- TAP TO VIEW -

-
diff --git a/src/Components/TransactionPDF/TransactionPDF.tsx b/src/Components/TransactionPDF/TransactionPDF.tsx index 80c3e40..767b66a 100644 --- a/src/Components/TransactionPDF/TransactionPDF.tsx +++ b/src/Components/TransactionPDF/TransactionPDF.tsx @@ -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 ( - + + {/* Whole Page */} - - + - Transaction ID: {props.transaction?.id} - - - {props.transaction?.timestamp} - - - - - + /> + + - Borrower: {props.transaction?.borrower.name}{" "} - {`(ID:${props.transaction?.borrower.id})`} + Department of Chemistry (Laboratory) - {`(${props.transaction?.borrower.course})`} + University of Science and Technology of Southern Philippines{" "} + {"\n"} + Lapasan Cagayan de Oro City {"\n"} - Teacher: {props.transaction?.teacher.name}{" "} - {`(ID:${props.transaction?.teacher.id})`} - - - Subject: {props.transaction?.subject} - - - Remarks: {props.transaction?.remarks} - - - Consumables: {props.transaction?.consumables} + BORROWER'S SLIP - - - Equipments: - + + + {/* Status */} + + + Status: {`${props.transaction.transaction_status}`} + + + + {/* Transaction ID */} + + + Transaction ID: #{props.transaction.id} + + + + + + Borrower Details + + + {/* Top Details */} + + {/* Borrower Details */} + - {props.transaction?.equipments.map((equipment) => ( + + Name:{" "} + + {props.transaction.borrower.name} + {" "} + + + Course:{" "} - {` - ${equipment.name} (ID:${equipment.id})`} - - ))} + style={{ textDecoration: "underline" }} + >{`${props.transaction.borrower.course}`}{" "} + {"\n"} + {/* Section: {props.transaction.section} */} + + + + + Timestamp:{" "} + + {props.transaction.timestamp} + + {"\n"} + Lab instructor:{" "} + + {props.transaction.teacher.name} + {" "} + + + Subject:{" "} + + {props.transaction.subject} + + + - + + {/* Equipment Section */} + - {`${props.transaction?.transaction_status}`} + Selected Equipment + {props.transaction.equipments.map((equipment) => ( + + {` - ${equipment.name} (ID:${equipment.id})`} + + ))} + {/* total Equipment */} + + + Total Equipment: {props.transaction.equipments.length} + + + {/* Consumables Area */} + + + Consumables + + + {props.transaction?.consumables} + + + + {/* Members here */} + + + Members + + + {props.transaction?.additional_members} + + {/* Remarks */} + + + + + Remarks + + + + + {props.transaction.remarks} + + diff --git a/src/Components/Types/Types.tsx b/src/Components/Types/Types.tsx index 7e362b5..ec01f8b 100644 --- a/src/Components/Types/Types.tsx +++ b/src/Components/Types/Types.tsx @@ -110,6 +110,7 @@ export type UserType = { }; export type TransactionType = { + additional_members: string; id: number; borrower: { id: number; diff --git a/src/Pages/AddTransactionPage/AddTransactionPage.tsx b/src/Pages/AddTransactionPage/AddTransactionPage.tsx index 13ea135..cea0fe1 100644 --- a/src/Pages/AddTransactionPage/AddTransactionPage.tsx +++ b/src/Pages/AddTransactionPage/AddTransactionPage.tsx @@ -112,6 +112,7 @@ export default function AddTransactionPage() { alignItems: "center", justifyContent: "center", overflowY: "scroll", + marginTop: 64 }, }} > diff --git a/src/Pages/TransactionsListPage/TransactionsListPage.tsx b/src/Pages/TransactionsListPage/TransactionsListPage.tsx index 82fb7cc..db5da6e 100644 --- a/src/Pages/TransactionsListPage/TransactionsListPage.tsx +++ b/src/Pages/TransactionsListPage/TransactionsListPage.tsx @@ -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 - Equipments + Additional Members + + + Additional Members + + + Actions @@ -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} + { + if ( + transaction.transaction_status != "Finalized" && + transaction.transaction_status != "Rejected" + ) { + SetSelectedTransaction(transaction.id); + SetEditTransactionOpen(true); + } + }} + > + {transaction.additional_members} +

Involved Items: {transaction.equipments.length} @@ -405,6 +441,46 @@ export default function TransactionsListPage() { + + + )) ) : (