Merge branch 'master' of https://git.keannu1.duckdns.org/keannu125/Borrowing-TrackerFrontend into feature/additional_styles

src/Components/TransactionPDF/TransactionPDF.tsx

@@ -8,10 +8,30 @@ import {
 import ustplogo from "../../assets/ustp-logo.png";
 
 type props = {
-  transaction: TransactionType;
+  transaction: TransactionType | null;
 };
 
 export default function TransactionPDF(props: props) {
+  if (!props.transaction) {
+    return (
+      <Document>
+        <Page size={{ width: 8.5 * 72, height: 10 * 90 }}>
+          <View>
+            <Text
+              style={{
+                color: colors.form_dark,
+                fontSize: 10,
+                textAlign: "center",
+                padding: "5 0 5 0",
+              }}
+            >
+              Invalid transaction PDF specified
+            </Text>
+          </View>
+        </Page>
+      </Document>
+    );
+  }
   return (
     <Document>
       <Page size={{ width: 8.5 * 72, height: 10 * 90 }}>
@@ -52,7 +72,6 @@ export default function TransactionPDF(props: props) {
             />
 
             <View style={{ alignItems: "center" }}>
-              
               <Text
                 style={{
                   color: colors.form_dark,
@@ -74,7 +93,10 @@ export default function TransactionPDF(props: props) {
                   padding: "5 0 5 0",
                 }}
               >
-                <Text style={{ fontFamily: 'Helvetica-Bold' }}> BORROWER'S SLIP </Text>
+                <Text style={{ fontFamily: "Helvetica-Bold" }}>
+                  {" "}
+                  BORROWER'S SLIP{" "}
+                </Text>
               </Text>
             </View>
           </View>
@@ -186,7 +208,10 @@ export default function TransactionPDF(props: props) {
                     style={{ textDecoration: "underline" }}
                   >{`${props.transaction.borrower.course}`}</Text>{" "}
                   {"\n"}
-                  {/* Section: <Text style={{ textDecoration: "underline" }}>{props.transaction.section}</Text> */}
+                  Section:{" "}
+                  <Text style={{ textDecoration: "underline" }}>
+                    {props.transaction.section}
+                  </Text>
                 </Text>
               </View>
             </View>
@@ -230,7 +255,7 @@ export default function TransactionPDF(props: props) {
               display: "flex",
               gap: 5,
               alignSelf: "stretch",
-              marginTop: "10"
+              marginTop: "10",
             }}
           >
             <Text
@@ -271,7 +296,7 @@ export default function TransactionPDF(props: props) {
               </Text>
             </View>
             {/* Consumables Area */}
-            <View style={{ marginTop: "5" , marginBottom: 10}}>
+            <View style={{ marginTop: "5", marginBottom: 10 }}>
               <Text
                 style={{
                   color: colors.form_title,
@@ -295,10 +320,13 @@ export default function TransactionPDF(props: props) {
           </View>
 
           {/* Members here */}
-          <View style={{
-                display: "flex",
-                gap: 5,
-                alignSelf: "stretch",}}>
+          <View
+            style={{
+              display: "flex",
+              gap: 5,
+              alignSelf: "stretch",
+            }}
+          >
             <Text
               style={{
                 color: colors.form_title,
@@ -318,31 +346,37 @@ export default function TransactionPDF(props: props) {
             </Text>
             {/* Remarks */}
           </View>
-          <View style={{ display: "flex", flexDirection: "column", alignSelf: "stretch" }}>
-              <View style={{ padding: "10 0" }}>
-                <Text
-                  style={{
-                    color: colors.form_title,
-                    marginTop: 10,
-                    borderBottom: "1px solid #A2A2A2",
-                    padding: "5 0",
-                  }}
-                >
-                  Remarks
-                </Text>
-              </View>
-
+          <View
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              alignSelf: "stretch",
+            }}
+          >
+            <View style={{ padding: "10 0" }}>
               <Text
                 style={{
-                  color: colors.form_dark,
-                  fontSize: 14,
-                  margin: 0,
-                  marginTop: 8,
+                  color: colors.form_title,
+                  marginTop: 10,
+                  borderBottom: "1px solid #A2A2A2",
+                  padding: "5 0",
                 }}
               >
-                {props.transaction.remarks}
+                Remarks
               </Text>
             </View>
+
+            <Text
+              style={{
+                color: colors.form_dark,
+                fontSize: 14,
+                margin: 0,
+                marginTop: 8,
+              }}
+            >
+              {props.transaction.remarks}
+            </Text>
+          </View>
         </View>
       </Page>
     </Document>

src/Components/TransactionReportPDF/TransactionReportPDF.tsx

@@ -1,7 +1,6 @@
 import { Document, Page, Text, View, Image } from "@react-pdf/renderer";
 import { TransactionListType } from "../Types/Types";
 import { colors } from "../../styles";
-import count_transaction_equipments from "../../CountTransactionEquipments/CountTransactionEquipments";
 import {
   filter_today,
   filter_thismonth,
@@ -148,8 +147,7 @@ export default function TransactionReportPDF(props: props) {
               }}
             >
               {" "}
-              • Total Equipments Processed:{" "}
-              {count_transaction_equipments(transactions_today)}
+              • Total Equipments Processed: {transactions_today.length}
             </Text>
 
             <Text
@@ -214,8 +212,7 @@ export default function TransactionReportPDF(props: props) {
               }}
             >
               {" "}
-              • Total Equipments Processed:{" "}
-              {count_transaction_equipments(transactions_thismonth)}
+              • Total Equipments Processed: {transactions_thismonth.length}
             </Text>
 
             <Text

src/Components/Types/Types.tsx

@@ -110,6 +110,7 @@ export type UserType = {
 };
 
 export type TransactionType = {
+  section: string;
   additional_members: string;
   id: number;
   borrower: {
@@ -144,6 +145,7 @@ export type TransactionCreateType = {
   consumables: string;
   transaction_status: string;
   additional_members: string;
+  section: string;
 };
 
 export type TransactionUpdateType = {

src/CountTransactionEquipments/CountTransactionEquipments.tsx

@@ -1,9 +0,0 @@
-import { TransactionListType } from "../Components/Types/Types";
-
-export default function count_transaction_equipments(
-  transactions: TransactionListType
-) {
-  let n = 0;
-  transactions.forEach((transaction) => (n += transaction.equipments.length));
-  return n;
-}

src/Pages/AddTransactionPage/AddTransactionPage.tsx

@@ -21,8 +21,8 @@ import {
   OutlinedInput,
   Autocomplete,
   Alert,
-  Stack
-
+  Stack,
+  Button,
 } from "@mui/material";
 import React from "react";
 import Header from "../../Components/Header/Header";
@@ -40,7 +40,89 @@ export default function AddTransactionPage() {
     consumables: "",
     additional_members: "",
     borrower: 0,
+    section: "",
   });
+
+  // Function to calculate total equipment count
+  const calculateTotalEquipmentCount = () => {
+    const selectedItems =
+      equipments.data?.filter((equipment) =>
+        transaction.equipments.includes(equipment.id)
+      ) || [];
+
+    // Calculate total count
+    const totalCount = selectedItems.reduce((count) => count + 1, 0);
+
+    return totalCount;
+  };
+
+  const handleShowSelectedItems = () => {
+    const selectedItems =
+      equipments.data?.filter((equipment) =>
+        transaction.equipments.includes(equipment.id)
+      ) || [];
+
+    // Explicitly define the type for equipmentCounts
+    const equipmentCounts: Record<string, number> = {};
+    const totalEquipmentCount = calculateTotalEquipmentCount();
+
+    // Calculate counts based on equipment name
+    selectedItems.forEach((item) => {
+      equipmentCounts[item.equipment_name] =
+        (equipmentCounts[item.equipment_name] || 0) + 1;
+    });
+
+    // Show alert
+    const formattedCounts = Object.entries(equipmentCounts).map(
+      ([name, count]) => `${count} pcs. of ${name}`
+    );
+
+    const confirmationMessage = `So, you're trying to borrow ${totalEquipmentCount} equipment(s):\n${formattedCounts.join(
+      "\n"
+    )}\nIs it correct?\n\nPlease click OK to continue request\nCancel if you still want to edit`;
+
+    if (window.confirm(confirmationMessage)) {
+      // OK Button Logic
+      console.log(JSON.stringify(transaction));
+      TransactionCreateAPI(transaction)
+        .then(async (data) => {
+          if (data[0]) {
+            setError("Created successfully");
+            toast(
+              `New transaction created successfully,  ${
+                typeof data[1] == "object" ? "ID:" + data[1].id : ""
+              }`,
+              {
+                position: "top-right",
+                autoClose: 2000,
+                hideProgressBar: false,
+                closeOnClick: true,
+                pauseOnHover: true,
+                draggable: true,
+                progress: undefined,
+                theme: "light",
+              }
+            );
+            queryClient.invalidateQueries({
+              queryKey: ["equipment_instances"],
+            });
+            queryClient.invalidateQueries({
+              queryKey: ["transactions"],
+            });
+            navigate("/dashboard");
+          } else {
+            setError(JSON.stringify(data[1]));
+          }
+        })
+        .catch((error) => {
+          setError(JSON.stringify(error));
+        });
+    } else {
+      // Cancel Button Logic
+      console.log("Cancel button clicked");
+    }
+  };
+
   /*
   const [selecteditems, SetSelectedItems] = useState<number[]>([]);
   const [selectedteacher, SetSelectedTeacher] = useState<number>(0);
@@ -112,7 +194,7 @@ export default function AddTransactionPage() {
             alignItems: "center",
             justifyContent: "center",
             overflowY: "scroll",
-            marginTop: 64
+            marginTop: 64,
           },
         }}
       >
@@ -135,42 +217,79 @@ export default function AddTransactionPage() {
           marginRight: "1rem",
         }}
       >
-        <FormControl style={{ marginTop: "8px" }}>
-          <FormLabel
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "flex-start",
+            gap: "8px",
+            alignSelf: "stretch",
+          }}
+        >
+          <FormControl style={{ marginTop: "8px", width: "100%" }}>
+            <FormLabel
+              style={{
+                ...{ ...styles.text_dark, ...styles.bform_label2 },
+                ...{
+                  marginLeft: "4px",
+                  marginBottom: "8px",
+                  textAlign: "left",
+                },
+              }}
+            >
+              Items Requested
+            </FormLabel>
+            <Autocomplete
+              multiple
+              id="equipment-autocomplete"
+              options={equipments.data?.sort((a, b) => a.id - b.id) || []}
+              getOptionLabel={(option) =>
+                `${option.equipment_name} (ID:${option.id})`
+              }
+              value={
+                equipments.data?.filter((equipment) =>
+                  transaction.equipments.includes(equipment.id)
+                ) || []
+              }
+              onChange={(_event, newValue) => {
+                SetTransaction({
+                  ...transaction,
+                  equipments: newValue.map((item) => item.id),
+                });
+              }}
+              renderInput={(params) => (
+                <TextField
+                  {...params}
+                  variant="outlined"
+                  label="Items Requested"
+                />
+              )}
+            />
+          </FormControl>
+
+          <div
             style={{
-              ...{ ...styles.text_dark, ...styles.bform_label2 },
-              ...{ marginLeft: "4px", marginBottom: "8px", textAlign: "left" },
+              display: "flex",
+              padding: "4px 15px",
+              alignItems: "center",
+              borderRadius: "14px",
+              background: "#D1FF97",
             }}
           >
-            Items Requested
-          </FormLabel>
-          <Autocomplete
-            multiple
-            id="equipment-autocomplete"
-            options={equipments.data?.sort((a, b) => a.id - b.id) || []}
-            getOptionLabel={(option) =>
-              `${option.equipment_name} (ID:${option.id})`
-            }
-            value={
-              equipments.data?.filter((equipment) =>
-                transaction.equipments.includes(equipment.id)
-              ) || []
-            }
-            onChange={(_event, newValue) => {
-              SetTransaction({
-                ...transaction,
-                equipments: newValue.map((item) => item.id),
-              });
-            }}
-            renderInput={(params) => (
-              <TextField
-                {...params}
-                variant="outlined"
-                label="Items Requested"
-              />
-            )}
-          />
-        </FormControl>
+            <p
+              style={{
+                ...styles.text_dark,
+                ...styles.text_normal,
+                textAlign: "left",
+                margin: 0,
+              }}
+            >
+              Total equipment to borrow: {calculateTotalEquipmentCount()}
+            </p>
+          </div>
+        </div>
+
         <FormControl style={{ marginTop: "8px" }}>
           <FormLabel
             style={{
@@ -197,6 +316,28 @@ export default function AddTransactionPage() {
             ))}
           </Select>
         </FormControl>
+
+        <FormControl style={{ marginTop: "8px" }}>
+          <FormLabel
+            style={{
+              ...styles.text_dark,
+              ...{ marginLeft: "4px", marginBottom: "4px", textAlign: "left" },
+            }}
+          >
+            Section
+          </FormLabel>
+          <TextField
+            style={styles.input_form}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              SetTransaction({ ...transaction, section: e.target.value });
+              setError("");
+            }}
+            label={"Section"}
+            value={transaction.section}
+            placeholder={"Type Section Here"}
+          />
+        </FormControl>
+
         <FormControl style={{ marginTop: "8px" }}>
           <FormLabel
             style={{
@@ -234,9 +375,7 @@ export default function AddTransactionPage() {
               setError("");
             }}
             value={transaction.consumables}
-            placeholder={
-              "ex. Filter Papers, Acids, Solvent, Cleaning Agents"
-            }
+            placeholder={"ex. Filter Papers, Acids, Solvent, Cleaning Agents"}
           />
         </FormControl>
         <FormControl style={{ marginTop: "8px" }}>
@@ -286,14 +425,13 @@ export default function AddTransactionPage() {
         </FormControl>
       </div>
 
-
       <div
         style={{
           display: "flex",
           flex: 1,
           alignContent: "center",
           width: "100%",
-          marginTop: "1rem"
+          marginTop: "1rem",
         }}
       >
         <Stack
@@ -316,38 +454,10 @@ export default function AddTransactionPage() {
 
       <p style={{ ...styles.text_dark, ...styles.text_M }}>{error}</p>
 
-      <button
-        onClick={async () => {
-          console.log(JSON.stringify(transaction));
-          const data = await TransactionCreateAPI(transaction);
-          if (data[0]) {
-            setError("Created successfully");
-            toast(
-              `New transaction created successfuly,  ${
-                typeof data[1] == "object" ? "ID:" + data[1].id : ""
-              }`,
-              {
-                position: "top-right",
-                autoClose: 2000,
-                hideProgressBar: false,
-                closeOnClick: true,
-                pauseOnHover: true,
-                draggable: true,
-                progress: undefined,
-                theme: "light",
-              }
-            );
-            queryClient.invalidateQueries({
-              queryKey: ["equipment_instances"],
-            });
-            queryClient.invalidateQueries({
-              queryKey: ["transactions"],
-            });
-            navigate("/dashboard");
-          } else {
-            setError(JSON.stringify(data[1]));
-          }
-        }}
+      <Button
+        variant="contained"
+        color="primary"
+        onClick={handleShowSelectedItems}
         style={{
           display: "flex",
           padding: "25px 38px",
@@ -360,10 +470,10 @@ export default function AddTransactionPage() {
           marginBottom: "1rem",
         }}
       >
-        <p style={{ ...styles.text_light, ...styles.text_M, ...{ flex: 1 } }}>Create Transaction</p>
-        
-      </button>
-
+        <p style={{ ...styles.text_light, ...styles.text_M, ...{ flex: 1 } }}>
+          Create Transaction
+        </p>
+      </Button>
     </div>
   );
 }

src/Pages/EquipmentInstancesListPage/EquipmentInstancesFilteredListPage.tsx

@@ -65,6 +65,7 @@ export default function EquipmentInstancesFilteredListPage() {
           minHeight: "100%",
           minWidth: "100%",
           flexWrap: "wrap",
+          marginTop: "7rem"
         }}
       >
         <TableContainer

src/Pages/EquipmentListPage/EquipmentListPage.tsx

@@ -78,6 +78,7 @@ export default function EquipmentListPage() {
                   alignSelf: "flex-start",
                   justifyContent: "center",
                   flexWrap: "wrap",
+                  marginTop: "7rem"
 
                 },
               }}

src/Pages/EquipmentLogsPage/EquipmentLogsPage.tsx

@@ -28,6 +28,7 @@ export default function EquipmentLogsPage() {
               alignItems: "center",
               justifyContent: "center",
               paddingTop: "64px",
+              marginTop: "7rem"
             },
           }}
         >
@@ -58,6 +59,7 @@ export default function EquipmentLogsPage() {
           minHeight: "100%",
           minWidth: "100%",
           flexWrap: "wrap",
+          marginTop: "6rem"
         }}
       >
         <TableContainer