From ad6215d6d0337e6b5f40623e64d25d5f4c2f8284 Mon Sep 17 00:00:00 2001 From: Prince Kurt Laurence Date: Thu, 21 Dec 2023 13:26:42 +0800 Subject: [PATCH 01/18] initial design in student --- .../StudentTransactionButtons.tsx | 279 ++++++++++++++++++ src/Pages/DashboardPage/DashboardPage.tsx | 2 + 2 files changed, 281 insertions(+) create mode 100644 src/Components/DashboardPage/StudentTransactionButtons.tsx diff --git a/src/Components/DashboardPage/StudentTransactionButtons.tsx b/src/Components/DashboardPage/StudentTransactionButtons.tsx new file mode 100644 index 0000000..2b26f04 --- /dev/null +++ b/src/Components/DashboardPage/StudentTransactionButtons.tsx @@ -0,0 +1,279 @@ +import styles from "../../styles"; +import { useNavigate } from "react-router-dom"; +import { Button } from "@mui/material"; +import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted"; +import AddToQueueIcon from "@mui/icons-material/AddToQueue"; +import NoteAddIcon from "@mui/icons-material/NoteAdd"; +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 Popup from "reactjs-popup"; +import AddItemModal from "../AddItemModal/AddItemModal"; +import AddSKUModal from "../AddSKUModal/AddSKUModal"; +import { useState } from "react"; + +export default function StudentTransactionButtons() { + const [addSKUmodalOpen, SetAddSKUModalOpen] = useState(false); + const [additemmodalOpen, SetAddItemModalOpen] = useState(false); + const navigate = useNavigate(); + return ( + <> + +

+ Equipments +

+
+ + + + +
+
+ + +
+ SetAddSKUModalOpen(false)} + modal + position={"top center"} + contentStyle={{ + width: "32rem", + borderRadius: 16, + borderColor: "grey", + borderStyle: "solid", + borderWidth: 1, + padding: 16, + alignContent: "center", + justifyContent: "center", + textAlign: "center", + }} + > + + + SetAddItemModalOpen(false)} + modal + position={"top center"} + contentStyle={{ + width: "32rem", + borderRadius: 16, + borderColor: "grey", + borderStyle: "solid", + borderWidth: 1, + padding: 16, + alignContent: "center", + justifyContent: "center", + textAlign: "center", + }} + > + + + + ); +} diff --git a/src/Pages/DashboardPage/DashboardPage.tsx b/src/Pages/DashboardPage/DashboardPage.tsx index 3da5e1f..0ff3249 100644 --- a/src/Pages/DashboardPage/DashboardPage.tsx +++ b/src/Pages/DashboardPage/DashboardPage.tsx @@ -4,6 +4,7 @@ import RestrictedComponent from "../../Components/RestrictedComponent/Restricted import TechnicianWidgets from "../../Components/DashboardPage/TechnicianWidgets"; import TechnicianEquipmentButtons from "../../Components/DashboardPage/TechnicianEquipmentButtons"; import TechnicianLogButtons from "../../Components/DashboardPage/TechnicianLogButtons"; +import StudentTransactionButtons from "../../Components/DashboardPage/StudentTransactionButtons"; export default function Dashboard() { return (
@@ -14,6 +15,7 @@ export default function Dashboard() { +

Welcome student!

 From cd742b882250d3238633e6dcc3cb713460971453 Mon Sep 17 00:00:00 2001 From: Prince Kurt Laurence Date: Thu, 21 Dec 2023 13:55:16 +0800 Subject: [PATCH 02/18] added buttons in student page --- .../StudentTransactionButtons.tsx | 133 +++++++----------- 1 file changed, 54 insertions(+), 79 deletions(-) diff --git a/src/Components/DashboardPage/StudentTransactionButtons.tsx b/src/Components/DashboardPage/StudentTransactionButtons.tsx index 2b26f04..16151ba 100644 --- a/src/Components/DashboardPage/StudentTransactionButtons.tsx +++ b/src/Components/DashboardPage/StudentTransactionButtons.tsx @@ -1,13 +1,12 @@ import styles from "../../styles"; import { useNavigate } from "react-router-dom"; import { Button } from "@mui/material"; -import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted"; -import AddToQueueIcon from "@mui/icons-material/AddToQueue"; -import NoteAddIcon from "@mui/icons-material/NoteAdd"; -import NoteIcon from "@mui/icons-material/Note"; +import HourglassBottomIcon from '@mui/icons-material/HourglassBottom'; +import ThumbUpIcon from '@mui/icons-material/ThumbUp'; +import CheckCircleIcon from '@mui/icons-material/CheckCircle'; +import FlashOffIcon from '@mui/icons-material/FlashOff'; +import ThumbDownIcon from '@mui/icons-material/ThumbDown'; import { colors } from "../../styles"; -import ScienceIcon from "@mui/icons-material/Science"; -import ColorizeIcon from "@mui/icons-material/Colorize"; import Popup from "reactjs-popup"; import AddItemModal from "../AddItemModal/AddItemModal"; import AddSKUModal from "../AddSKUModal/AddSKUModal"; @@ -28,6 +27,7 @@ export default function StudentTransactionButtons() { > Equipments

+
+ + + + + +
- - +
Date: Thu, 21 Dec 2023 14:41:48 +0800 Subject: [PATCH 03/18] Change format of filter buttons to dropdown select menu for ease of use --- .../StudentTransactionButtons.tsx | 254 ------------- .../StudentTransactionFilterMenu.tsx | 352 ++++++++++++++++++ src/Pages/DashboardPage/DashboardPage.tsx | 5 +- 3 files changed, 354 insertions(+), 257 deletions(-) delete mode 100644 src/Components/DashboardPage/StudentTransactionButtons.tsx create mode 100644 src/Components/DashboardPage/StudentTransactionFilterMenu.tsx diff --git a/src/Components/DashboardPage/StudentTransactionButtons.tsx b/src/Components/DashboardPage/StudentTransactionButtons.tsx deleted file mode 100644 index 16151ba..0000000 --- a/src/Components/DashboardPage/StudentTransactionButtons.tsx +++ /dev/null @@ -1,254 +0,0 @@ -import styles from "../../styles"; -import { useNavigate } from "react-router-dom"; -import { Button } from "@mui/material"; -import HourglassBottomIcon from '@mui/icons-material/HourglassBottom'; -import ThumbUpIcon from '@mui/icons-material/ThumbUp'; -import CheckCircleIcon from '@mui/icons-material/CheckCircle'; -import FlashOffIcon from '@mui/icons-material/FlashOff'; -import ThumbDownIcon from '@mui/icons-material/ThumbDown'; -import { colors } from "../../styles"; -import Popup from "reactjs-popup"; -import AddItemModal from "../AddItemModal/AddItemModal"; -import AddSKUModal from "../AddSKUModal/AddSKUModal"; -import { useState } from "react"; - -export default function StudentTransactionButtons() { - const [addSKUmodalOpen, SetAddSKUModalOpen] = useState(false); - const [additemmodalOpen, SetAddItemModalOpen] = useState(false); - const navigate = useNavigate(); - return ( - <> - -

- Equipments -

- -
- - - - - - - - - - -
-
- -
- SetAddSKUModalOpen(false)} - modal - position={"top center"} - contentStyle={{ - width: "32rem", - borderRadius: 16, - borderColor: "grey", - borderStyle: "solid", - borderWidth: 1, - padding: 16, - alignContent: "center", - justifyContent: "center", - textAlign: "center", - }} - > - - - SetAddItemModalOpen(false)} - modal - position={"top center"} - contentStyle={{ - width: "32rem", - borderRadius: 16, - borderColor: "grey", - borderStyle: "solid", - borderWidth: 1, - padding: 16, - alignContent: "center", - justifyContent: "center", - textAlign: "center", - }} - > - - - - ); -} diff --git a/src/Components/DashboardPage/StudentTransactionFilterMenu.tsx b/src/Components/DashboardPage/StudentTransactionFilterMenu.tsx new file mode 100644 index 0000000..1a9b1c8 --- /dev/null +++ b/src/Components/DashboardPage/StudentTransactionFilterMenu.tsx @@ -0,0 +1,352 @@ +import styles from "../../styles"; +import { + Button, + FormControl, + InputLabel, + MenuItem, + Select, + SelectChangeEvent, +} from "@mui/material"; +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"; +import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline"; +import ShoppingCartCheckoutIcon from "@mui/icons-material/ShoppingCartCheckout"; +import AssignmentReturnedIcon from "@mui/icons-material/AssignmentReturned"; +import CancelOutlinedIcon from "@mui/icons-material/CancelOutlined"; +import CancelIcon from "@mui/icons-material/Cancel"; +import { useState } from "react"; + +export default function StudentTransactionFilterMenu() { + const [addSKUmodalOpen, SetAddSKUModalOpen] = useState(false); + const [additemmodalOpen, SetAddItemModalOpen] = useState(false); + const [filter, setFilter] = useState(""); + return ( + <> +

+ Personal Transactions +

+ +
+ + + Filter transactions by + + + +
+
+ SetAddSKUModalOpen(false)} + modal + position={"top center"} + contentStyle={{ + width: "32rem", + borderRadius: 16, + borderColor: "grey", + borderStyle: "solid", + borderWidth: 1, + padding: 16, + alignContent: "center", + justifyContent: "center", + textAlign: "center", + }} + > + + + SetAddItemModalOpen(false)} + modal + position={"top center"} + contentStyle={{ + width: "32rem", + borderRadius: 16, + borderColor: "grey", + borderStyle: "solid", + borderWidth: 1, + padding: 16, + alignContent: "center", + justifyContent: "center", + textAlign: "center", + }} + > + + + + ); +} diff --git a/src/Pages/DashboardPage/DashboardPage.tsx b/src/Pages/DashboardPage/DashboardPage.tsx index 0ff3249..ae36dac 100644 --- a/src/Pages/DashboardPage/DashboardPage.tsx +++ b/src/Pages/DashboardPage/DashboardPage.tsx @@ -4,7 +4,7 @@ import RestrictedComponent from "../../Components/RestrictedComponent/Restricted import TechnicianWidgets from "../../Components/DashboardPage/TechnicianWidgets"; import TechnicianEquipmentButtons from "../../Components/DashboardPage/TechnicianEquipmentButtons"; import TechnicianLogButtons from "../../Components/DashboardPage/TechnicianLogButtons"; -import StudentTransactionButtons from "../../Components/DashboardPage/StudentTransactionButtons"; +import StudentTransactionFilterMenu from "../../Components/DashboardPage/StudentTransactionFilterMenu"; export default function Dashboard() { return (
@@ -15,8 +15,7 @@ export default function Dashboard() { - -

Welcome student!

+

Welcome teacher!

From e26b87e22336b6cc30a63cefe7fff65e951f6698 Mon Sep 17 00:00:00 2001 From: Keannu Bernasol Date: Thu, 21 Dec 2023 14:44:57 +0800 Subject: [PATCH 04/18] Change width of filter menu to px instead of vw --- src/Components/DashboardPage/StudentTransactionFilterMenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Components/DashboardPage/StudentTransactionFilterMenu.tsx b/src/Components/DashboardPage/StudentTransactionFilterMenu.tsx index 1a9b1c8..30523a8 100644 --- a/src/Components/DashboardPage/StudentTransactionFilterMenu.tsx +++ b/src/Components/DashboardPage/StudentTransactionFilterMenu.tsx @@ -46,7 +46,7 @@ export default function StudentTransactionFilterMenu() { }, }} > - + Filter transactions by From d69945f789e0fff4909b87487e8a5cd3c675adff Mon Sep 17 00:00:00 2001 From: Keannu Bernasol Date: Thu, 21 Dec 2023 14:58:23 +0800 Subject: [PATCH 05/18] Restructure Dashboard page components folder hierarchy and add initial StudentTransactionListView component --- .../{ => Student}/StudentTransactionFilterMenu.tsx | 8 ++++---- .../DashboardPage/Student/StudentTransactionListView.tsx | 3 +++ .../{ => Technician}/TechnicianEquipmentButtons.tsx | 8 ++++---- .../{ => Technician}/TechnicianLogButtons.tsx | 4 ++-- .../DashboardPage/{ => Technician}/TechnicianWidgets.tsx | 4 ++-- src/Pages/DashboardPage/DashboardPage.tsx | 8 ++++---- 6 files changed, 19 insertions(+), 16 deletions(-) rename src/Components/DashboardPage/{ => Student}/StudentTransactionFilterMenu.tsx (98%) create mode 100644 src/Components/DashboardPage/Student/StudentTransactionListView.tsx rename src/Components/DashboardPage/{ => Technician}/TechnicianEquipmentButtons.tsx (97%) rename src/Components/DashboardPage/{ => Technician}/TechnicianLogButtons.tsx (96%) rename src/Components/DashboardPage/{ => Technician}/TechnicianWidgets.tsx (98%) diff --git a/src/Components/DashboardPage/StudentTransactionFilterMenu.tsx b/src/Components/DashboardPage/Student/StudentTransactionFilterMenu.tsx similarity index 98% rename from src/Components/DashboardPage/StudentTransactionFilterMenu.tsx rename to src/Components/DashboardPage/Student/StudentTransactionFilterMenu.tsx index 30523a8..c8cb43f 100644 --- a/src/Components/DashboardPage/StudentTransactionFilterMenu.tsx +++ b/src/Components/DashboardPage/Student/StudentTransactionFilterMenu.tsx @@ -1,4 +1,4 @@ -import styles from "../../styles"; +import styles from "../../../styles"; import { Button, FormControl, @@ -10,10 +10,10 @@ 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 { colors } from "../../../styles"; import Popup from "reactjs-popup"; -import AddItemModal from "../AddItemModal/AddItemModal"; -import AddSKUModal from "../AddSKUModal/AddSKUModal"; +import AddItemModal from "../../AddItemModal/AddItemModal"; +import AddSKUModal from "../../AddSKUModal/AddSKUModal"; import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline"; import ShoppingCartCheckoutIcon from "@mui/icons-material/ShoppingCartCheckout"; import AssignmentReturnedIcon from "@mui/icons-material/AssignmentReturned"; diff --git a/src/Components/DashboardPage/Student/StudentTransactionListView.tsx b/src/Components/DashboardPage/Student/StudentTransactionListView.tsx new file mode 100644 index 0000000..5fdefbb --- /dev/null +++ b/src/Components/DashboardPage/Student/StudentTransactionListView.tsx @@ -0,0 +1,3 @@ +export default function StudentTransactionListView() { + return
{"StudentTransactionListView"}
; +} diff --git a/src/Components/DashboardPage/TechnicianEquipmentButtons.tsx b/src/Components/DashboardPage/Technician/TechnicianEquipmentButtons.tsx similarity index 97% rename from src/Components/DashboardPage/TechnicianEquipmentButtons.tsx rename to src/Components/DashboardPage/Technician/TechnicianEquipmentButtons.tsx index da64391..ed33c37 100644 --- a/src/Components/DashboardPage/TechnicianEquipmentButtons.tsx +++ b/src/Components/DashboardPage/Technician/TechnicianEquipmentButtons.tsx @@ -1,16 +1,16 @@ -import styles from "../../styles"; +import styles from "../../../styles"; import { useNavigate } from "react-router-dom"; import { Button } from "@mui/material"; import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted"; import AddToQueueIcon from "@mui/icons-material/AddToQueue"; import NoteAddIcon from "@mui/icons-material/NoteAdd"; import NoteIcon from "@mui/icons-material/Note"; -import { colors } from "../../styles"; +import { colors } from "../../../styles"; import ScienceIcon from "@mui/icons-material/Science"; import ColorizeIcon from "@mui/icons-material/Colorize"; import Popup from "reactjs-popup"; -import AddItemModal from "../AddItemModal/AddItemModal"; -import AddSKUModal from "../AddSKUModal/AddSKUModal"; +import AddItemModal from "../../AddItemModal/AddItemModal"; +import AddSKUModal from "../../AddSKUModal/AddSKUModal"; import { useState } from "react"; export default function TechnicianEquipmentButtons() { const [addSKUmodalOpen, SetAddSKUModalOpen] = useState(false); diff --git a/src/Components/DashboardPage/TechnicianLogButtons.tsx b/src/Components/DashboardPage/Technician/TechnicianLogButtons.tsx similarity index 96% rename from src/Components/DashboardPage/TechnicianLogButtons.tsx rename to src/Components/DashboardPage/Technician/TechnicianLogButtons.tsx index 74fffe1..22a3b5e 100644 --- a/src/Components/DashboardPage/TechnicianLogButtons.tsx +++ b/src/Components/DashboardPage/Technician/TechnicianLogButtons.tsx @@ -1,8 +1,8 @@ import { Button } from "@mui/material"; import { useNavigate } from "react-router-dom"; import ManageSearchIcon from "@mui/icons-material/ManageSearch"; -import styles from "../../styles"; -import { colors } from "../../styles"; +import styles from "../../../styles"; +import { colors } from "../../../styles"; export default function TechnicianLogButtons() { const navigate = useNavigate(); diff --git a/src/Components/DashboardPage/TechnicianWidgets.tsx b/src/Components/DashboardPage/Technician/TechnicianWidgets.tsx similarity index 98% rename from src/Components/DashboardPage/TechnicianWidgets.tsx rename to src/Components/DashboardPage/Technician/TechnicianWidgets.tsx index 8c3c239..23bfe42 100644 --- a/src/Components/DashboardPage/TechnicianWidgets.tsx +++ b/src/Components/DashboardPage/Technician/TechnicianWidgets.tsx @@ -1,6 +1,6 @@ import { useQueries } from "@tanstack/react-query"; -import styles from "../../styles"; -import { EquipmentsAPI, EquipmentInstancesAPI, UserAPI } from "../API/API"; +import styles from "../../../styles"; +import { EquipmentsAPI, EquipmentInstancesAPI, UserAPI } from "../../API/API"; import CircularProgress from "@mui/material/CircularProgress"; export default function TechnicianWidgets() { diff --git a/src/Pages/DashboardPage/DashboardPage.tsx b/src/Pages/DashboardPage/DashboardPage.tsx index ae36dac..bac4dc5 100644 --- a/src/Pages/DashboardPage/DashboardPage.tsx +++ b/src/Pages/DashboardPage/DashboardPage.tsx @@ -1,10 +1,10 @@ import Header from "../../Components/Header/Header"; import styles from "../../styles"; import RestrictedComponent from "../../Components/RestrictedComponent/RestrictedComponent"; -import TechnicianWidgets from "../../Components/DashboardPage/TechnicianWidgets"; -import TechnicianEquipmentButtons from "../../Components/DashboardPage/TechnicianEquipmentButtons"; -import TechnicianLogButtons from "../../Components/DashboardPage/TechnicianLogButtons"; -import StudentTransactionFilterMenu from "../../Components/DashboardPage/StudentTransactionFilterMenu"; +import TechnicianWidgets from "../../Components/DashboardPage/Technician/TechnicianWidgets"; +import TechnicianEquipmentButtons from "../../Components/DashboardPage/Technician/TechnicianEquipmentButtons"; +import TechnicianLogButtons from "../../Components/DashboardPage/Technician/TechnicianLogButtons"; +import StudentTransactionFilterMenu from "../../Components/DashboardPage/Student/StudentTransactionFilterMenu"; export default function Dashboard() { return (
From eaa55f3ba76d82a6a448674c24b6f9b403f43b62 Mon Sep 17 00:00:00 2001 From: Keannu Bernasol Date: Thu, 21 Dec 2023 16:04:50 +0800 Subject: [PATCH 06/18] Add transaction view for student in dashboard page complete with filtering --- src/Components/API/API.tsx | 24 ++++ .../Student/StudentTransactionFilterMenu.tsx | 45 ++++++- .../Student/StudentTransactionListView.tsx | 66 +++++++++- .../TransactionEntry/TransactionEntry.tsx | 121 ++++++++++++++++++ src/Components/Types/Types.tsx | 1 + src/Pages/DashboardPage/DashboardPage.tsx | 4 +- 6 files changed, 253 insertions(+), 8 deletions(-) create mode 100644 src/Components/TransactionEntry/TransactionEntry.tsx diff --git a/src/Components/API/API.tsx b/src/Components/API/API.tsx index 59131c7..dadd623 100644 --- a/src/Components/API/API.tsx +++ b/src/Components/API/API.tsx @@ -386,3 +386,27 @@ export async function TransactionUpdateAPI( return [false, ParseError(error)]; }); } + +export async function TransactionsByStudentAPI() { + const config = await GetConfig(); + return instance + .get("api/v1/transactions/student/", config) + .then((response) => { + return response.data as TransactionListType; + }) + .catch(() => { + console.log("Error retrieving transactions for current student"); + }); +} + +export async function TransactionsByTeacherAPI() { + const config = await GetConfig(); + return instance + .get("api/v1/transactions/teacher/", config) + .then((response) => { + return response.data as TransactionListType; + }) + .catch(() => { + console.log("Error retrieving transactions for current teacher"); + }); +} diff --git a/src/Components/DashboardPage/Student/StudentTransactionFilterMenu.tsx b/src/Components/DashboardPage/Student/StudentTransactionFilterMenu.tsx index c8cb43f..1cbd438 100644 --- a/src/Components/DashboardPage/Student/StudentTransactionFilterMenu.tsx +++ b/src/Components/DashboardPage/Student/StudentTransactionFilterMenu.tsx @@ -19,12 +19,17 @@ import ShoppingCartCheckoutIcon from "@mui/icons-material/ShoppingCartCheckout"; import AssignmentReturnedIcon from "@mui/icons-material/AssignmentReturned"; import CancelOutlinedIcon from "@mui/icons-material/CancelOutlined"; import CancelIcon from "@mui/icons-material/Cancel"; +import ClearAllIcon from "@mui/icons-material/ClearAll"; import { useState } from "react"; -export default function StudentTransactionFilterMenu() { +type props = { + filter: string; + setFilter: React.Dispatch>; +}; + +export default function StudentTransactionFilterMenu(props: props) { const [addSKUmodalOpen, SetAddSKUModalOpen] = useState(false); const [additemmodalOpen, SetAddItemModalOpen] = useState(false); - const [filter, setFilter] = useState(""); return ( <>

- Filter transactions by + Filter Transactions diff --git a/src/styles.tsx b/src/styles.tsx index 2f5cfbf..2e4c3ba 100644 --- a/src/styles.tsx +++ b/src/styles.tsx @@ -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; From b76b1e17fb86f8124e8f2e8c1b2f7361c0fbd474 Mon Sep 17 00:00:00 2001 From: Keannu Bernasol Date: Fri, 22 Dec 2023 15:34:13 +0800 Subject: [PATCH 10/18] Remove unused components in student transaction filter --- .../Student/StudentTransactionFilterMenu.tsx | 56 +------------------ 1 file changed, 1 insertion(+), 55 deletions(-) diff --git a/src/Components/DashboardPage/Student/StudentTransactionFilterMenu.tsx b/src/Components/DashboardPage/Student/StudentTransactionFilterMenu.tsx index d066fad..be58c39 100644 --- a/src/Components/DashboardPage/Student/StudentTransactionFilterMenu.tsx +++ b/src/Components/DashboardPage/Student/StudentTransactionFilterMenu.tsx @@ -10,16 +10,12 @@ import { import HourglassBottomIcon from "@mui/icons-material/HourglassBottom"; import CheckCircleIcon from "@mui/icons-material/CheckCircle"; import FlashOffIcon from "@mui/icons-material/FlashOff"; -import Popup from "reactjs-popup"; -import AddItemModal from "../../AddItemModal/AddItemModal"; -import AddSKUModal from "../../AddSKUModal/AddSKUModal"; import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline"; import ShoppingCartCheckoutIcon from "@mui/icons-material/ShoppingCartCheckout"; import AssignmentReturnedIcon from "@mui/icons-material/AssignmentReturned"; import CancelOutlinedIcon from "@mui/icons-material/CancelOutlined"; import CancelIcon from "@mui/icons-material/Cancel"; import ClearAllIcon from "@mui/icons-material/ClearAll"; -import { useState } from "react"; type props = { filter: string; @@ -27,8 +23,6 @@ type props = { }; export default function StudentTransactionFilterMenu(props: props) { - const [addSKUmodalOpen, SetAddSKUModalOpen] = useState(false); - const [additemmodalOpen, SetAddItemModalOpen] = useState(false); return ( <>

- + Filter Transactions + SetSelectedItems(event.target.value as number[]) + } + input={} + > + {equipments.data + ?.filter((equipment) => equipment.status == "Available") + .map((equipment) => ( + + {`${equipment.equipment_name} (ID:${equipment.id})`} + + ))} + + + + Assigned Teacher + + + ) => { + SetRemarks(e.target.value); + setError(""); + }} + value={remarks} + placeholder={"Optionally add a brief description of the request"} + /> +

+

{error}

+
+
+ ); +} From b3b152ada526f0a419fcf299262f6c2b0765812e Mon Sep 17 00:00:00 2001 From: Prince Kurt Laurence Date: Wed, 27 Dec 2023 18:44:14 +0800 Subject: [PATCH 15/18] changes in students --- src/Pages/DashboardPage/DashboardPage.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Pages/DashboardPage/DashboardPage.tsx b/src/Pages/DashboardPage/DashboardPage.tsx index 0ff3249..6ef2fa7 100644 --- a/src/Pages/DashboardPage/DashboardPage.tsx +++ b/src/Pages/DashboardPage/DashboardPage.tsx @@ -16,7 +16,6 @@ export default function Dashboard() { -

Welcome student!

Welcome teacher!

From 9d605d0a703cc90ddf66ef9a6514714498302ab3 Mon Sep 17 00:00:00 2001 From: Keannu Bernasol Date: Wed, 27 Dec 2023 19:03:17 +0800 Subject: [PATCH 16/18] Fix line height in transaction entry --- src/Components/TransactionEntry/TransactionEntry.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Components/TransactionEntry/TransactionEntry.tsx b/src/Components/TransactionEntry/TransactionEntry.tsx index bed53cc..ab815e6 100644 --- a/src/Components/TransactionEntry/TransactionEntry.tsx +++ b/src/Components/TransactionEntry/TransactionEntry.tsx @@ -132,7 +132,6 @@ export default function TransactionEntry(props: props) { ...{ textAlign: "right", margin: 0, - lineHeight: 0, }, }} > From db8b93a7db2208ea65890c5c37e950544ba95706 Mon Sep 17 00:00:00 2001 From: Keannu Bernasol Date: Fri, 29 Dec 2023 16:06:29 +0800 Subject: [PATCH 17/18] Updated transaction entry and added transaction page and initial transactionpdf component --- package-lock.json | 478 +++++++++++++++++- package.json | 1 + src/App.tsx | 11 + .../TransactionEntry/TransactionEntry.tsx | 40 +- .../TransactionPDF/TransactionPDF.tsx | 79 +++ .../TransactionStatusText.tsx | 33 ++ src/Pages/TransactionPage/TransactionPage.tsx | 110 ++++ 7 files changed, 717 insertions(+), 35 deletions(-) create mode 100644 src/Components/TransactionPDF/TransactionPDF.tsx create mode 100644 src/Components/TransactionStatusText/TransactionStatusText.tsx create mode 100644 src/Pages/TransactionPage/TransactionPage.tsx diff --git a/package-lock.json b/package-lock.json index 733d993..95c7b8d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@mui/material": "^5.14.17", "@mui/styled-engine": "^5.14.17", "@mui/styled-engine-sc": "^6.0.0-alpha.5", + "@react-pdf/renderer": "^3.1.14", "@reduxjs/toolkit": "^1.9.7", "@tanstack/react-query": "^5.8.3", "axios": "^1.6.2", @@ -1431,6 +1432,167 @@ "url": "https://opencollective.com/popperjs" } }, + "node_modules/@react-pdf/fns": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@react-pdf/fns/-/fns-2.0.1.tgz", + "integrity": "sha512-/vgecczzFYBQFkgUupH+sxXhLWQtBwdwCgweyh25XOlR4NZuaMD/UVUDl4loFHhRQqDMQq37lkTcchh7zzW6ug==", + "dependencies": { + "@babel/runtime": "^7.20.13" + } + }, + "node_modules/@react-pdf/font": { + "version": "2.3.7", + "resolved": "https://registry.npmjs.org/@react-pdf/font/-/font-2.3.7.tgz", + "integrity": "sha512-NoCieWea6c1mCpDBoyjPbUEC1qXa+S/M7+8vYPZ71aTMgX7co3gQc2e6YKwrSQeQP+BsBq3LSVhjI2ETXfcytw==", + "dependencies": { + "@babel/runtime": "^7.20.13", + "@react-pdf/types": "^2.3.4", + "cross-fetch": "^3.1.5", + "fontkit": "^2.0.2", + "is-url": "^1.2.4" + } + }, + "node_modules/@react-pdf/image": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@react-pdf/image/-/image-2.2.2.tgz", + "integrity": "sha512-990JvRZuhsnHyAGd7gvmhfr+4/5PAHLH9IgDstaEDLEq2eFAIQFuNM7k3D6kjKgV1mM7Jqif3CWqrcHBF3jrJw==", + "dependencies": { + "@babel/runtime": "^7.20.13", + "@react-pdf/png-js": "^2.2.0", + "cross-fetch": "^3.1.5" + } + }, + "node_modules/@react-pdf/layout": { + "version": "3.6.3", + "resolved": "https://registry.npmjs.org/@react-pdf/layout/-/layout-3.6.3.tgz", + "integrity": "sha512-w6ACZ9o18Q5wbzsY9a4KW2Gqn6Drt3AN/kb/I6SBz/L7PAJ9rPQBIDq/s5qZJ+/WwWy33rcC8WC1givtDhjCHQ==", + "dependencies": { + "@babel/runtime": "^7.20.13", + "@react-pdf/fns": "2.0.1", + "@react-pdf/image": "^2.2.2", + "@react-pdf/pdfkit": "^3.0.2", + "@react-pdf/primitives": "^3.0.0", + "@react-pdf/stylesheet": "^4.1.8", + "@react-pdf/textkit": "^4.2.0", + "@react-pdf/types": "^2.3.4", + "@react-pdf/yoga": "^4.1.2", + "cross-fetch": "^3.1.5", + "emoji-regex": "^10.2.1", + "queue": "^6.0.1" + } + }, + "node_modules/@react-pdf/pdfkit": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@react-pdf/pdfkit/-/pdfkit-3.0.2.tgz", + "integrity": "sha512-+m5rwNCwyEH6lmnZWpsQJvdqb6YaCCR0nMWrc/KKDwznuPMrGmGWyNxqCja+bQPORcHZyl6Cd/iFL0glyB3QGw==", + "dependencies": { + "@babel/runtime": "^7.20.13", + "@react-pdf/png-js": "^2.2.0", + "browserify-zlib": "^0.2.0", + "crypto-js": "^4.0.0", + "fontkit": "^2.0.2", + "vite-compatible-readable-stream": "^3.6.1" + } + }, + "node_modules/@react-pdf/png-js": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@react-pdf/png-js/-/png-js-2.2.0.tgz", + "integrity": "sha512-csZU5lfNW73tq7s7zB/1rWXGro+Z9cQhxtsXwxS418TSszHUiM6PwddouiKJxdGhbVLjRIcuuFVa0aR5cDOC6w==", + "dependencies": { + "browserify-zlib": "^0.2.0" + } + }, + "node_modules/@react-pdf/primitives": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@react-pdf/primitives/-/primitives-3.0.1.tgz", + "integrity": "sha512-0HGcknrLNwyhxe+SZCBL29JY4M85mXKdvTZE9uhjNbADGgTc8wVnkc5+e4S/lDvugbVISXyuIhZnYwtK9eDnyQ==" + }, + "node_modules/@react-pdf/render": { + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/@react-pdf/render/-/render-3.2.7.tgz", + "integrity": "sha512-fAgbbAAkVL0hpcf1vUJLHxuPjPBqZuq8nors7fCwvoatBBwOWP9fza7IDPeFKN7+ZOnfmIZzes8Kc/DNHzJohw==", + "dependencies": { + "@babel/runtime": "^7.20.13", + "@react-pdf/fns": "2.0.1", + "@react-pdf/primitives": "^3.0.0", + "@react-pdf/textkit": "^4.2.0", + "@react-pdf/types": "^2.3.4", + "abs-svg-path": "^0.1.1", + "color-string": "^1.5.3", + "normalize-svg-path": "^1.1.0", + "parse-svg-path": "^0.1.2", + "svg-arc-to-cubic-bezier": "^3.2.0" + } + }, + "node_modules/@react-pdf/renderer": { + "version": "3.1.14", + "resolved": "https://registry.npmjs.org/@react-pdf/renderer/-/renderer-3.1.14.tgz", + "integrity": "sha512-Qk29uTamH6q+drK/YmiFbuQQ+yutesfIe+wyrsXFoUJUutIiDIaibO6zByMkhWb3M6CMt6NvG3NLHio1OF8U6Q==", + "dependencies": { + "@babel/runtime": "^7.20.13", + "@react-pdf/font": "^2.3.7", + "@react-pdf/layout": "^3.6.3", + "@react-pdf/pdfkit": "^3.0.2", + "@react-pdf/primitives": "^3.0.0", + "@react-pdf/render": "^3.2.7", + "@react-pdf/types": "^2.3.4", + "events": "^3.3.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.2", + "queue": "^6.0.1", + "scheduler": "^0.17.0" + }, + "peerDependencies": { + "react": "^16.8.6 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@react-pdf/renderer/node_modules/scheduler": { + "version": "0.17.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.17.0.tgz", + "integrity": "sha512-7rro8Io3tnCPuY4la/NuI5F2yfESpnfZyT6TtkXnSWVkcu0BCDJ+8gk5ozUaFaxpIyNuWAPXrH0yFcSi28fnDA==", + "dependencies": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + } + }, + "node_modules/@react-pdf/stylesheet": { + "version": "4.1.8", + "resolved": "https://registry.npmjs.org/@react-pdf/stylesheet/-/stylesheet-4.1.8.tgz", + "integrity": "sha512-/EuB9RBsH3YYRj8mwzImaul619MvX3rsHNF4h8LnlwDOuBehPA3L/fHrikfPqtJvHqK2ty3GXnkw0HG5SQpMzw==", + "dependencies": { + "@babel/runtime": "^7.20.13", + "@react-pdf/fns": "2.0.1", + "@react-pdf/types": "^2.3.4", + "color-string": "^1.5.3", + "hsl-to-hex": "^1.0.0", + "media-engine": "^1.0.3", + "postcss-value-parser": "^4.1.0" + } + }, + "node_modules/@react-pdf/textkit": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/@react-pdf/textkit/-/textkit-4.2.0.tgz", + "integrity": "sha512-R90pEOW6NdhUx4p99iROvKmwB06IRYdXMhh0QcmUeoPOLe64ZdMfs3LZliNUWgI5fCmq71J+nv868i/EakFPDg==", + "dependencies": { + "@babel/runtime": "^7.20.13", + "@react-pdf/fns": "2.0.1", + "hyphen": "^1.6.4", + "unicode-properties": "^1.4.1" + } + }, + "node_modules/@react-pdf/types": { + "version": "2.3.4", + "resolved": "https://registry.npmjs.org/@react-pdf/types/-/types-2.3.4.tgz", + "integrity": "sha512-vGGz21BTE05EktBbotbd7fjC0Yi8A/lOSIpzd7L7aF1XY+vyIHlQVb35DWCipM1p/6XN4cr9etGAmm1e4Mtmjw==" + }, + "node_modules/@react-pdf/yoga": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/@react-pdf/yoga/-/yoga-4.1.2.tgz", + "integrity": "sha512-OlMZkFrJDj4GyKZ70thiObwwPVZ52B7mlPyfzwa+sgwsioqHXg9nMWOO+7SQFNUbbOGagMUu0bCuTv+iXYZuaQ==", + "dependencies": { + "@babel/runtime": "^7.20.13" + } + }, "node_modules/@reduxjs/toolkit": { "version": "1.9.7", "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.7.tgz", @@ -1462,6 +1624,15 @@ "node": ">=14.0.0" } }, + "node_modules/@swc/helpers": { + "version": "0.4.36", + "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.36.tgz", + "integrity": "sha512-5lxnyLEYFskErRPenYItLRSge5DjrJngYKdVjRSrWfza9G6KkgHEXi0vUZiyUeMU5JfXH1YnvXZzSp8ul88o2Q==", + "dependencies": { + "legacy-swc-helpers": "npm:@swc/helpers@=0.4.14", + "tslib": "^2.4.0" + } + }, "node_modules/@tanstack/query-core": { "version": "5.8.3", "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.8.3.tgz", @@ -1824,6 +1995,11 @@ "vite": "^4.2.0" } }, + "node_modules/abs-svg-path": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/abs-svg-path/-/abs-svg-path-0.1.1.tgz", + "integrity": "sha512-d8XPSGjfyzlXC3Xx891DJRyZfqk5JU0BJrDQcsWomFIV1/BIzPW5HDH5iDdWpqWaav0YVIEzT1RHTwWr0FFshA==" + }, "node_modules/acorn": { "version": "8.10.0", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz", @@ -1931,6 +2107,25 @@ "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", "dev": true }, + "node_modules/base64-js": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz", + "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ] + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -1953,6 +2148,22 @@ "node": ">=8" } }, + "node_modules/brotli": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/brotli/-/brotli-1.3.3.tgz", + "integrity": "sha512-oTKjJdShmDuGW94SyyaoQvAjf30dZaHnjJ8uAF+u2/vGJkJbJPJAT1gDiOJP5v1Zb6f9KEyW/1HpuaWIXtGHPg==", + "dependencies": { + "base64-js": "^1.1.2" + } + }, + "node_modules/browserify-zlib": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.2.0.tgz", + "integrity": "sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==", + "dependencies": { + "pako": "~1.0.5" + } + }, "node_modules/browserslist": { "version": "4.22.1", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.1.tgz", @@ -2034,6 +2245,14 @@ "node": ">=4" } }, + "node_modules/clone": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz", + "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==", + "engines": { + "node": ">=0.8" + } + }, "node_modules/clsx": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", @@ -2055,6 +2274,15 @@ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" }, + "node_modules/color-string": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz", + "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==", + "dependencies": { + "color-name": "^1.0.0", + "simple-swizzle": "^0.2.2" + } + }, "node_modules/combined-stream": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", @@ -2093,6 +2321,14 @@ "node": ">=10" } }, + "node_modules/cross-fetch": { + "version": "3.1.8", + "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.8.tgz", + "integrity": "sha512-cvA+JwZoU0Xq+h6WkMvAUqPEYy92Obet6UdKLfW60qn99ftItKjB5T+BkyWOFWe2pUyfQ+IJHmpOTznqk1M6Kg==", + "dependencies": { + "node-fetch": "^2.6.12" + } + }, "node_modules/cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -2107,6 +2343,11 @@ "node": ">= 8" } }, + "node_modules/crypto-js": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz", + "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==" + }, "node_modules/css-color-keywords": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", @@ -2161,6 +2402,11 @@ "node": ">=0.4.0" } }, + "node_modules/dfa": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/dfa/-/dfa-1.2.0.tgz", + "integrity": "sha512-ED3jP8saaweFTjeGX8HQPjeC1YYyZs98jGNZx6IiBvxW7JG5v492kamAQB3m2wop07CvU/RQmzcKr6bgcC5D/Q==" + }, "node_modules/dir-glob": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", @@ -2200,6 +2446,11 @@ "integrity": "sha512-dg5gj5qOgfZNkPNeyKBZQAQitIQ/xwfIDmEQJHCbXaD9ebTZxwJXUsDYcBlAvZGZLi+/354l35J1wkmP6CqYaw==", "dev": true }, + "node_modules/emoji-regex": { + "version": "10.3.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.3.0.tgz", + "integrity": "sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==" + }, "node_modules/error-ex": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", @@ -2522,11 +2773,18 @@ "node": ">=0.10.0" } }, + "node_modules/events": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz", + "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==", + "engines": { + "node": ">=0.8.x" + } + }, "node_modules/fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", - "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", - "dev": true + "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" }, "node_modules/fast-glob": { "version": "3.3.1", @@ -2661,6 +2919,22 @@ } } }, + "node_modules/fontkit": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/fontkit/-/fontkit-2.0.2.tgz", + "integrity": "sha512-jc4k5Yr8iov8QfS6u8w2CnHWVmbOGtdBtOXMze5Y+QD966Rx6PEVWXSEGwXlsDlKtu1G12cJjcsybnqhSk/+LA==", + "dependencies": { + "@swc/helpers": "^0.4.2", + "brotli": "^1.3.2", + "clone": "^2.1.2", + "dfa": "^1.2.0", + "fast-deep-equal": "^3.1.3", + "restructure": "^3.0.0", + "tiny-inflate": "^1.0.3", + "unicode-properties": "^1.4.0", + "unicode-trie": "^2.0.0" + } + }, "node_modules/form-data": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", @@ -2810,6 +3084,24 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/hsl-to-hex": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/hsl-to-hex/-/hsl-to-hex-1.0.0.tgz", + "integrity": "sha512-K6GVpucS5wFf44X0h2bLVRDsycgJmf9FF2elg+CrqD8GcFU8c6vYhgXn8NjUkFCwj+xDFb70qgLbTUm6sxwPmA==", + "dependencies": { + "hsl-to-rgb-for-reals": "^1.1.0" + } + }, + "node_modules/hsl-to-rgb-for-reals": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/hsl-to-rgb-for-reals/-/hsl-to-rgb-for-reals-1.1.1.tgz", + "integrity": "sha512-LgOWAkrN0rFaQpfdWBQlv/VhkOxb5AsBjk6NQVx4yEzWS923T07X0M1Y0VNko2H52HeSpZrZNNMJ0aFqsdVzQg==" + }, + "node_modules/hyphen": { + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/hyphen/-/hyphen-1.10.0.tgz", + "integrity": "sha512-fXWGrQ2EMwMjf7rfy2MtLkr1HjcOcJLZMvQybMDBECPaX7qgERc1tC8M4Dj2fHJldTcFy3KDIWThUWVM/NBzwg==" + }, "node_modules/ignore": { "version": "5.2.4", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz", @@ -2865,8 +3157,7 @@ "node_modules/inherits": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", - "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", - "dev": true + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" }, "node_modules/is-arrayish": { "version": "0.2.1", @@ -2923,6 +3214,11 @@ "node": ">=8" } }, + "node_modules/is-url": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/is-url/-/is-url-1.2.4.tgz", + "integrity": "sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==" + }, "node_modules/isexe": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", @@ -3002,6 +3298,15 @@ "json-buffer": "3.0.1" } }, + "node_modules/legacy-swc-helpers": { + "name": "@swc/helpers", + "version": "0.4.14", + "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.14.tgz", + "integrity": "sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==", + "dependencies": { + "tslib": "^2.4.0" + } + }, "node_modules/levn": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", @@ -3061,6 +3366,11 @@ "yallist": "^3.0.2" } }, + "node_modules/media-engine": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/media-engine/-/media-engine-1.0.3.tgz", + "integrity": "sha512-aa5tG6sDoK+k70B9iEX1NeyfT8ObCKhNDs6lJVpwF6r8vhUfuKMslIcirq6HIUYuuUYLefcEQOn9bSBOvawtwg==" + }, "node_modules/merge2": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", @@ -3143,12 +3453,39 @@ "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==", "dev": true }, + "node_modules/node-fetch": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz", + "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==", + "dependencies": { + "whatwg-url": "^5.0.0" + }, + "engines": { + "node": "4.x || >=6.0.0" + }, + "peerDependencies": { + "encoding": "^0.1.0" + }, + "peerDependenciesMeta": { + "encoding": { + "optional": true + } + } + }, "node_modules/node-releases": { "version": "2.0.13", "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz", "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==", "dev": true }, + "node_modules/normalize-svg-path": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/normalize-svg-path/-/normalize-svg-path-1.1.0.tgz", + "integrity": "sha512-r9KHKG2UUeB5LoTouwDzBy2VxXlHsiM6fyLQvnJa0S5hrhzqElH/CH7TUGhT1fVvIYBIKf3OpY4YJ4CK+iaqHg==", + "dependencies": { + "svg-arc-to-cubic-bezier": "^3.0.0" + } + }, "node_modules/object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", @@ -3213,6 +3550,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/pako": { + "version": "1.0.11", + "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz", + "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==" + }, "node_modules/parent-module": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", @@ -3241,6 +3583,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/parse-svg-path": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/parse-svg-path/-/parse-svg-path-0.1.2.tgz", + "integrity": "sha512-JyPSBnkTJ0AI8GGJLfMXvKq42cj5c006fnLz6fXy6zfoVjJizi8BNTpu8on8ziI1cKy9d9DGNuY17Ce7wuejpQ==" + }, "node_modules/path-exists": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", @@ -3368,6 +3715,14 @@ "node": ">=6" } }, + "node_modules/queue": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz", + "integrity": "sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==", + "dependencies": { + "inherits": "~2.0.3" + } + }, "node_modules/queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", @@ -3582,6 +3937,11 @@ "node": ">=4" } }, + "node_modules/restructure": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/restructure/-/restructure-3.0.0.tgz", + "integrity": "sha512-Xj8/MEIhhfj9X2rmD9iJ4Gga9EFqVlpMj3vfLnV2r/Mh5jRMryNV+6lWh9GdJtDBcBSPIqzRdfBQ3wDtNFv/uw==" + }, "node_modules/reusify": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz", @@ -3646,6 +4006,25 @@ "queue-microtask": "^1.2.2" } }, + "node_modules/safe-buffer": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", + "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ] + }, "node_modules/scheduler": { "version": "0.23.0", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", @@ -3713,6 +4092,19 @@ "node": ">=8" } }, + "node_modules/simple-swizzle": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz", + "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==", + "dependencies": { + "is-arrayish": "^0.3.1" + } + }, + "node_modules/simple-swizzle/node_modules/is-arrayish": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz", + "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==" + }, "node_modules/slash": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", @@ -3738,6 +4130,14 @@ "node": ">=0.10.0" } }, + "node_modules/string_decoder": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz", + "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==", + "dependencies": { + "safe-buffer": "~5.2.0" + } + }, "node_modules/strip-ansi": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", @@ -3821,12 +4221,22 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/svg-arc-to-cubic-bezier": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/svg-arc-to-cubic-bezier/-/svg-arc-to-cubic-bezier-3.2.0.tgz", + "integrity": "sha512-djbJ/vZKZO+gPoSDThGNpKDO+o+bAeA4XQKovvkNCqnIS2t+S4qnLAGQhyyrulhCFRl1WWzAp0wUDV8PpTVU3g==" + }, "node_modules/text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==", "dev": true }, + "node_modules/tiny-inflate": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz", + "integrity": "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==" + }, "node_modules/to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", @@ -3847,6 +4257,11 @@ "node": ">=8.0" } }, + "node_modules/tr46": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", + "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==" + }, "node_modules/ts-api-utils": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.0.3.tgz", @@ -3901,6 +4316,29 @@ "node": ">=14.17" } }, + "node_modules/unicode-properties": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/unicode-properties/-/unicode-properties-1.4.1.tgz", + "integrity": "sha512-CLjCCLQ6UuMxWnbIylkisbRj31qxHPAurvena/0iwSVbQ2G1VY5/HjV0IRabOEbDHlzZlRdCrD4NhB0JtU40Pg==", + "dependencies": { + "base64-js": "^1.3.0", + "unicode-trie": "^2.0.0" + } + }, + "node_modules/unicode-trie": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/unicode-trie/-/unicode-trie-2.0.0.tgz", + "integrity": "sha512-x7bc76x0bm4prf1VLg79uhAzKw8DVboClSN5VxJuQ+LKDOVEW9CdH+VY7SP+vX7xCYQqzzgQpFqz15zeLvAtZQ==", + "dependencies": { + "pako": "^0.2.5", + "tiny-inflate": "^1.0.0" + } + }, + "node_modules/unicode-trie/node_modules/pako": { + "version": "0.2.9", + "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz", + "integrity": "sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==" + }, "node_modules/update-browserslist-db": { "version": "1.0.13", "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz", @@ -3948,6 +4386,11 @@ "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/util-deprecate": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", + "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==" + }, "node_modules/vite": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.0.tgz", @@ -4003,6 +4446,33 @@ } } }, + "node_modules/vite-compatible-readable-stream": { + "version": "3.6.1", + "resolved": "https://registry.npmjs.org/vite-compatible-readable-stream/-/vite-compatible-readable-stream-3.6.1.tgz", + "integrity": "sha512-t20zYkrSf868+j/p31cRIGN28Phrjm3nRSLR2fyc2tiWi4cZGVdv68yNlwnIINTkMTmPoMiSlc0OadaO7DXZaQ==", + "dependencies": { + "inherits": "^2.0.3", + "string_decoder": "^1.1.1", + "util-deprecate": "^1.0.1" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/webidl-conversions": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", + "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==" + }, + "node_modules/whatwg-url": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", + "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==", + "dependencies": { + "tr46": "~0.0.3", + "webidl-conversions": "^3.0.0" + } + }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", diff --git a/package.json b/package.json index 57b26fb..4380322 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "@mui/material": "^5.14.17", "@mui/styled-engine": "^5.14.17", "@mui/styled-engine-sc": "^6.0.0-alpha.5", + "@react-pdf/renderer": "^3.1.14", "@reduxjs/toolkit": "^1.9.7", "@tanstack/react-query": "^5.8.3", "axios": "^1.6.2", diff --git a/src/App.tsx b/src/App.tsx index 504e09d..bcb12a2 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -19,6 +19,7 @@ import EquipmentInstancesFilteredListPage from "./Pages/EquipmentInstancesListPa import RestrictedPage from "./Components/RestrictedPage/RestrictedPage"; import TransactionsListPage from "./Pages/TransactionsListPage/TransactionsListPage"; import AddTransactionPage from "./Pages/AddTransactionPage/AddTransactionPage"; +import TransactionPage from "./Pages/TransactionPage/TransactionPage"; const queryClient = new QueryClient(); const router = createHashRouter([ @@ -137,6 +138,16 @@ const router = createHashRouter([ ), errorElement: , }, + { + path: "/view/transaction/:id", + element: ( + <> + + + + ), + errorElement: , + }, ]); export default function App() { diff --git a/src/Components/TransactionEntry/TransactionEntry.tsx b/src/Components/TransactionEntry/TransactionEntry.tsx index ab815e6..e2b3940 100644 --- a/src/Components/TransactionEntry/TransactionEntry.tsx +++ b/src/Components/TransactionEntry/TransactionEntry.tsx @@ -1,42 +1,14 @@ import styles from "../../styles"; import { colors } from "../../styles"; import { TransactionType } from "../Types/Types"; +import StatusText from "../TransactionStatusText/TransactionStatusText"; +import { useNavigate } from "react-router-dom"; export interface props { transaction: TransactionType; } -function StatusText(props: { status: string }) { - let color; - if ( - props.status === "Pending Approval" || - props.status === "Returned: Pending Checking" - ) { - color = colors.orange; - } else if ( - props.status === "Approved" || - props.status === "Finalized" || - props.status === "Borrowed" - ) { - color = colors.green; - } else { - color = colors.red; - } - return ( -

- {props.status} -

- ); -} export default function TransactionEntry(props: props) { + const navigate = useNavigate(); return (
+ navigate(`/view/transaction/${props.transaction.id}`, { + replace: true, + state: { id: props.transaction.id }, + }) + } >

+ + + + + ID: {props.transaction.id} + + + {props.transaction.timestamp} + + + + + + ); +} diff --git a/src/Components/TransactionStatusText/TransactionStatusText.tsx b/src/Components/TransactionStatusText/TransactionStatusText.tsx new file mode 100644 index 0000000..4c50479 --- /dev/null +++ b/src/Components/TransactionStatusText/TransactionStatusText.tsx @@ -0,0 +1,33 @@ +import styles, { colors } from "../../styles"; + +export default function StatusText(props: { status: string }) { + let color; + if ( + props.status === "Pending Approval" || + props.status === "Returned: Pending Checking" + ) { + color = colors.orange; + } else if ( + props.status === "Approved" || + props.status === "Finalized" || + props.status === "Borrowed" + ) { + color = colors.green; + } else { + color = colors.red; + } + return ( +

+ {props.status} +

+ ); +} diff --git a/src/Pages/TransactionPage/TransactionPage.tsx b/src/Pages/TransactionPage/TransactionPage.tsx new file mode 100644 index 0000000..f0dd47b --- /dev/null +++ b/src/Pages/TransactionPage/TransactionPage.tsx @@ -0,0 +1,110 @@ +import styles from "../../styles"; +import { useQuery } from "@tanstack/react-query"; +import { TransactionAPI } from "../../Components/API/API"; +import Header from "../../Components/Header/Header"; +import { useNavigate, useParams } from "react-router-dom"; +import { PDFDownloadLink, PDFViewer } from "@react-pdf/renderer"; +import { toast } from "react-toastify"; +import TransactionPDF from "../../Components/TransactionPDF/TransactionPDF"; +import { CircularProgress } from "@mui/material"; + +export default function TransactionPage() { + const navigate = useNavigate(); + const { id } = useParams(); + const transaction = useQuery({ + queryKey: ["transaction", id], + queryFn: () => TransactionAPI(Number(id) || 0), + }); + if (transaction.isLoading) { + return ( + <> + +

+ Loading +

+ + ); + } + if (transaction.isError) { + toast(`Could not find transaction with ID:${id}`, { + position: "top-right", + autoClose: 2000, + hideProgressBar: false, + closeOnClick: true, + pauseOnHover: true, + draggable: true, + progress: undefined, + theme: "light", + }); + navigate("/dashboard"); + } + return ( +
+
+
+ + } + fileName="transaction.pdf" + > + {({ loading }) => + loading ? "Loading document..." : "Download Transaction" + } + + + + +
+
+ ); +} From b9bf1149046aac8384624b9cd4f1843e64c580f2 Mon Sep 17 00:00:00 2001 From: Keannu Bernasol Date: Fri, 29 Dec 2023 17:33:48 +0800 Subject: [PATCH 18/18] Refactor status text color function and finalized transactionpdf component --- .../StatusTextColor/StatusTextColor.tsx | 18 +++ .../TransactionEntry/TransactionEntry.tsx | 16 +- .../TransactionPDF/TransactionPDF.tsx | 140 ++++++++++++------ .../TransactionStatusText.tsx | 33 ----- 4 files changed, 127 insertions(+), 80 deletions(-) create mode 100644 src/Components/StatusTextColor/StatusTextColor.tsx delete mode 100644 src/Components/TransactionStatusText/TransactionStatusText.tsx diff --git a/src/Components/StatusTextColor/StatusTextColor.tsx b/src/Components/StatusTextColor/StatusTextColor.tsx new file mode 100644 index 0000000..17695fb --- /dev/null +++ b/src/Components/StatusTextColor/StatusTextColor.tsx @@ -0,0 +1,18 @@ +import { colors } from "../../styles"; + +export default function StatusTextColor(status: string) { + if ( + status === "Pending Approval" || + status === "Returned: Pending Checking" + ) { + return colors.orange; + } else if ( + status === "Approved" || + status === "Finalized" || + status === "Borrowed" + ) { + return colors.green; + } else { + return colors.red; + } +} diff --git a/src/Components/TransactionEntry/TransactionEntry.tsx b/src/Components/TransactionEntry/TransactionEntry.tsx index e2b3940..167cbca 100644 --- a/src/Components/TransactionEntry/TransactionEntry.tsx +++ b/src/Components/TransactionEntry/TransactionEntry.tsx @@ -1,8 +1,8 @@ import styles from "../../styles"; import { colors } from "../../styles"; import { TransactionType } from "../Types/Types"; -import StatusText from "../TransactionStatusText/TransactionStatusText"; import { useNavigate } from "react-router-dom"; +import StatusTextColor from "../StatusTextColor/StatusTextColor"; export interface props { transaction: TransactionType; } @@ -119,7 +119,19 @@ export default function TransactionEntry(props: props) {
- +

+ {`${props.transaction.transaction_status}`} +

); } diff --git a/src/Components/TransactionPDF/TransactionPDF.tsx b/src/Components/TransactionPDF/TransactionPDF.tsx index e43d7bf..285fdae 100644 --- a/src/Components/TransactionPDF/TransactionPDF.tsx +++ b/src/Components/TransactionPDF/TransactionPDF.tsx @@ -1,56 +1,27 @@ -import { StyleSheet, Document, Page, Text, View } from "@react-pdf/renderer"; +import { Document, Page, Text, View } from "@react-pdf/renderer"; import { TransactionType } from "../Types/Types"; -import styles, { colors } from "../../styles"; +import { colors } from "../../styles"; +import StatusTextColor from "../StatusTextColor/StatusTextColor"; type props = { transaction: TransactionType; }; -const pdf_styles = StyleSheet.create({ - container: { - alignSelf: "center", - justifySelf: "center", - width: "512px", - backgroundColor: colors.header_color, - borderRadius: 16, - margin: "8px", - padding: "8px", - }, - flex_row: { - display: "flex", - flexDirection: "row", - }, - flex_column: { - display: "flex", - flexDirection: "column", - }, - text_dark: { - color: colors.font_dark, - fontWeight: "bold", - }, - text_light: { - color: colors.font_light, - fontWeight: "bold", - }, - text_red: { - color: colors.red, - fontWeight: "bold", - }, - text_orange: { - color: colors.orange, - fontWeight: "bold", - }, - text_green: { - color: colors.green, - fontWeight: "bold", - }, -}); - export default function TransactionPDF(props: props) { return ( - - + + - ID: {props.transaction.id} + Transaction ID: {props.transaction.id} + + + + + Borrower: {props.transaction.borrower.name}{" "} + {`(ID:${props.transaction.borrower.id})`} + + + Teacher: {props.transaction.teacher.name}{" "} + {`(ID:${props.transaction.teacher.id})`} + + + {props.transaction.remarks} + + + + + Equipments: + + + {props.transaction.equipments.map((equipment) => ( + + {` - ${equipment.name} (ID:${equipment.id})`} + + ))} + + + + + + {`${props.transaction.transaction_status}`} + + diff --git a/src/Components/TransactionStatusText/TransactionStatusText.tsx b/src/Components/TransactionStatusText/TransactionStatusText.tsx deleted file mode 100644 index 4c50479..0000000 --- a/src/Components/TransactionStatusText/TransactionStatusText.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import styles, { colors } from "../../styles"; - -export default function StatusText(props: { status: string }) { - let color; - if ( - props.status === "Pending Approval" || - props.status === "Returned: Pending Checking" - ) { - color = colors.orange; - } else if ( - props.status === "Approved" || - props.status === "Finalized" || - props.status === "Borrowed" - ) { - color = colors.green; - } else { - color = colors.red; - } - return ( -

- {props.status} -

- ); -}