keannu125/Borrowing-TrackerFrontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Borrowing-TrackerFrontend.git synced 2025-09-16 20:49:36 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added consumables to transaction and improved transaction entry viewing and pdf generation. Also added transactions this day and this month in technician dashboard

Browse source
This commit is contained in:
Keannu Christian Bernasol 2024-01-05 19:06:04 +08:00
parent eea2b590d2
commit ad9981ae44
8 changed files with 197 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

98
src/Components/DashboardPage/Technician/TechnicianWidgets.tsx
View file

@ -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
</p>
<p
@ -140,7 +149,7 @@ export default function TechnicianWidgets() {
...{ float: "left", position: "absolute" },
}}
>
Functional Items
Available Equipments
</p>
<p
@ -175,7 +184,88 @@ export default function TechnicianWidgets() {
...{ float: "left", position: "absolute" },
}}
>
Broken Items
Broken Equipments
</p>
<p
style={{
...styles.text_dark,
...styles.text_L,
}}
>
{queries[1].data
? queries[1].data.filter(
(equipment) => equipment.status == "Broken"
).length
: 0}
</p>
</div>
</div>
<div
style={{
...styles.flex_row,
...{
alignSelf: "center",
justifyContent: "center",
flexWrap: "wrap",
},
}}
>
<div
style={{
paddingLeft: "16px",
paddingRight: "16px",
margin: "16px",
borderRadius: 16,
backgroundColor: "#a6a6a6",
alignSelf: "center",
justifyContent: "center",
width: "16rem",
}}
>
<p
style={{
...styles.text_dark,
...styles.text_M,
...{ float: "left", position: "absolute" },
}}
>
Transactions Today
</p>
<p
style={{
...styles.text_dark,
...styles.text_L,
}}
>
{queries[3].data
? queries[3].data.filter(
(transactions) => transactions.timestamp == "Available"
).length
: 0}
</p>
</div>
<div
style={{
paddingLeft: "16px",
paddingRight: "16px",
margin: "16px",
borderRadius: 16,
backgroundColor: "#a6a6a6",
alignSelf: "center",
justifyContent: "center",
width: "16rem",
}}
>
<p
style={{
...styles.text_dark,
...styles.text_M,
...{ float: "left", position: "absolute" },
}}
>
Broken Equipments
</p>
<p

29
src/Components/TransactionEntry/TransactionEntry.tsx
View file

@ -76,7 +76,12 @@ export default function TransactionEntry(props: props) {
style={{
...styles.text_dark,
...styles.text_S,
...{ textAlign: "left", margin: 0 },
...{
textAlign: "left",
margin: 0,
maxWidth: "128px",
wordWrap: "break-word",
},
}}
>
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}
</p>
<p
style={{
...styles.text_dark,
...styles.text_S,
...{
maxHeight: "64px",
textAlign: "left",
margin: 0,
marginTop: "8px",
flexWrap: "wrap",
overflowY: "scroll",
maxWidth: "192px",
wordWrap: "break-word",
},
}}
>
Consumables: {props.transaction.consumable}
</p>
</div>
<div style={{ flex: 1 }}>

14
src/Components/TransactionPDF/TransactionPDF.tsx
View file

@ -98,7 +98,19 @@ export default function TransactionPDF(props: props) {
flexWrap: "wrap",
}}
>
{props.transaction.remarks}
Remarks: {props.transaction.remarks}
</Text>
<Text
style={{
color: colors.font_dark,
fontSize: 16,
textAlign: "left",
margin: 0,
marginTop: 8,
flexWrap: "wrap",
}}
>
Consumables: {props.transaction.consumable}
</Text>
</View>
<View style={{ flex: 1 }}>

2
src/Components/Types/Types.tsx
View file

@ -129,6 +129,7 @@ export type TransactionType = {
timestamp: string;
remarks: string;
subject: string;
consumable: string;
};
export type TransactionListType = Array<TransactionType>;
@ -139,6 +140,7 @@ export type TransactionCreateType = {
teacher: number;
borrower: number;
subject: string;
consumables: string;
transaction_status: "Pending Approval";
};