diff --git a/package-lock.json b/package-lock.json index 95c7b8d..5d37b69 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "axios": "^1.6.2", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-moment": "^1.1.3", "react-redux": "^8.1.3", "react-router-dom": "^6.18.0", "react-toastify": "^9.1.3", @@ -3424,6 +3425,15 @@ "node": "*" } }, + "node_modules/moment": { + "version": "2.30.1", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz", + "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==", + "peer": true, + "engines": { + "node": "*" + } + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -3771,6 +3781,16 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" }, + "node_modules/react-moment": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/react-moment/-/react-moment-1.1.3.tgz", + "integrity": "sha512-8EPvlUL8u6EknPp1ISF5MQ3wx2OHJVXIP/iZc4wRh3iV3XozftZERDv9ANZeAtMlhNNQHdFoqcZHFUkBSTONfA==", + "peerDependencies": { + "moment": "^2.29.0", + "prop-types": "^15.7.0", + "react": "^16.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-redux": { "version": "8.1.3", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.1.3.tgz", diff --git a/package.json b/package.json index 4380322..389aa1a 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "axios": "^1.6.2", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-moment": "^1.1.3", "react-redux": "^8.1.3", "react-router-dom": "^6.18.0", "react-toastify": "^9.1.3", diff --git a/src/Components/DashboardPage/Technician/TechnicianWidgets.tsx b/src/Components/DashboardPage/Technician/TechnicianWidgets.tsx index 23bfe42..b3631cf 100644 --- a/src/Components/DashboardPage/Technician/TechnicianWidgets.tsx +++ b/src/Components/DashboardPage/Technician/TechnicianWidgets.tsx @@ -1,6 +1,11 @@ import { useQueries } from "@tanstack/react-query"; import styles from "../../../styles"; -import { EquipmentsAPI, EquipmentInstancesAPI, UserAPI } from "../../API/API"; +import { + EquipmentsAPI, + EquipmentInstancesAPI, + UserAPI, + TransactionsAPI, +} from "../../API/API"; import CircularProgress from "@mui/material/CircularProgress"; export default function TechnicianWidgets() { @@ -18,6 +23,10 @@ export default function TechnicianWidgets() { queryKey: ["user"], queryFn: UserAPI, }, + { + queryKey: ["transactions"], + queryFn: TransactionsAPI, + }, ], }); const isLoading = queries.some((result) => result.isLoading); @@ -98,7 +107,7 @@ export default function TechnicianWidgets() { ...{ float: "left", position: "absolute" }, }} > - Items in Database + Equipments in Inventory

- Functional Items + Available Equipments

- Broken Items + Broken Equipments +

+ +

+ {queries[1].data + ? queries[1].data.filter( + (equipment) => equipment.status == "Broken" + ).length + : 0} +

+ + +
+
+

+ Transactions Today +

+ +

+ {queries[3].data + ? queries[3].data.filter( + (transactions) => transactions.timestamp == "Available" + ).length + : 0} +

+
+
+

+ Broken Equipments

Subject: {props.transaction.subject} @@ -86,7 +91,7 @@ export default function TransactionEntry(props: props) { ...styles.text_dark, ...styles.text_S, ...{ - height: "64px", + maxHeight: "64px", textAlign: "left", margin: 0, marginTop: "8px", @@ -97,7 +102,25 @@ export default function TransactionEntry(props: props) { }, }} > - {props.transaction.remarks} + Remarks: {props.transaction.remarks} +

+

+ Consumables: {props.transaction.consumable}

diff --git a/src/Components/TransactionPDF/TransactionPDF.tsx b/src/Components/TransactionPDF/TransactionPDF.tsx index 7db9f3e..9f38fc7 100644 --- a/src/Components/TransactionPDF/TransactionPDF.tsx +++ b/src/Components/TransactionPDF/TransactionPDF.tsx @@ -98,7 +98,19 @@ export default function TransactionPDF(props: props) { flexWrap: "wrap", }} > - {props.transaction.remarks} + Remarks: {props.transaction.remarks} + + + Consumables: {props.transaction.consumable} diff --git a/src/Components/Types/Types.tsx b/src/Components/Types/Types.tsx index c1d69f7..00b6b4d 100644 --- a/src/Components/Types/Types.tsx +++ b/src/Components/Types/Types.tsx @@ -129,6 +129,7 @@ export type TransactionType = { timestamp: string; remarks: string; subject: string; + consumable: string; }; export type TransactionListType = Array; @@ -139,6 +140,7 @@ export type TransactionCreateType = { teacher: number; borrower: number; subject: string; + consumables: string; transaction_status: "Pending Approval"; }; diff --git a/src/Pages/AddTransactionPage/AddTransactionPage.tsx b/src/Pages/AddTransactionPage/AddTransactionPage.tsx index 1b864a6..5574378 100644 --- a/src/Pages/AddTransactionPage/AddTransactionPage.tsx +++ b/src/Pages/AddTransactionPage/AddTransactionPage.tsx @@ -32,6 +32,7 @@ export default function AddTransactionPage() { const [selectedteacher, SetSelectedTeacher] = useState(0); const [subject, SetSubject] = useState(""); const [remarks, SetRemarks] = useState(""); + const [consumables, SetConsumables] = useState(""); const [error, setError] = useState(""); const equipments = useQuery({ @@ -167,6 +168,20 @@ export default function AddTransactionPage() { placeholder={"Optionally add a brief description of the request"} /> + + Consumables + ) => { + SetConsumables(e.target.value); + setError(""); + }} + label={"Consumables"} + value={consumables} + placeholder={"Write down any consumables here"} + /> +

{error}

Remarks + + Consumables + Equipments @@ -288,6 +291,28 @@ export default function TransactionsListPage() { > {transaction.remarks} + { + if ( + transaction.transaction_status != "Finalized" && + transaction.transaction_status != "Rejected" + ) { + SetSelectedTransaction(transaction.id); + SetEditTransactionOpen(true); + } + }} + > + {transaction.consumable} +

Involved Items: {transaction.equipments.length}