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

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",

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",

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
           </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

src/Components/TransactionEntry/TransactionEntry.tsx

@@ -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 }}>

src/Components/TransactionPDF/TransactionPDF.tsx

@@ -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 }}>

src/Components/Types/Types.tsx

@@ -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";
 };
 

src/Pages/AddTransactionPage/AddTransactionPage.tsx

@@ -32,6 +32,7 @@ export default function AddTransactionPage() {
   const [selectedteacher, SetSelectedTeacher] = useState<number>(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"}
           />
         </FormControl>
+        <FormControl style={{ marginTop: "8px" }}>
+          <FormLabel style={styles.text_dark}>Consumables</FormLabel>
+          <TextField
+            multiline
+            style={styles.input_form}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              SetConsumables(e.target.value);
+              setError("");
+            }}
+            label={"Consumables"}
+            value={consumables}
+            placeholder={"Write down any consumables here"}
+          />
+        </FormControl>
       </div>
       <p style={{ ...styles.text_dark, ...styles.text_M }}>{error}</p>
       <div
@@ -189,6 +204,7 @@ export default function AddTransactionPage() {
             subject: subject,
             remarks: remarks || " ",
             transaction_status: "Pending Approval",
+            consumables: consumables || "",
             borrower: user.data?.id || 0,
           });
           if (data[0]) {

src/Pages/TransactionsListPage/TransactionsListPage.tsx

@@ -172,6 +172,9 @@ export default function TransactionsListPage() {
                 <TableCell align="center" style={styles.text_light}>
                   Remarks
                 </TableCell>
+                <TableCell align="center" style={styles.text_light}>
+                  Consumables
+                </TableCell>
                 <TableCell align="center" style={styles.text_light}>
                   Equipments
                 </TableCell>
@@ -288,6 +291,28 @@ export default function TransactionsListPage() {
                       >
                         {transaction.remarks}
                       </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.consumable}
+                      </TableCell>
                       <TableCell align="center">
                         <p style={{ ...styles.text_M, ...styles.text_dark }}>
                           Involved Items: {transaction.equipments.length}