Added pachuychuy, alert og item count. s field

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" }}>
+        <div
-          <FormLabel
+          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 },
+              display: "flex",
-              ...{ marginLeft: "4px", marginBottom: "8px", textAlign: "left" },
+              padding: "4px 15px",
+              alignItems: "center",
+              borderRadius: "14px",
+              background: "#D1FF97",
             }}
           >
-            Items Requested
+            <p
-          </FormLabel>
+              style={{
-          <Autocomplete
+                ...styles.text_dark,
-            multiple
+                ...styles.text_normal,
-            id="equipment-autocomplete"
+                textAlign: "left",
-            options={equipments.data?.sort((a, b) => a.id - b.id) || []}
+                margin: 0,
-            getOptionLabel={(option) =>
+              }}
-              `${option.equipment_name} (ID:${option.id})`
+            >
-            }
+              Total equipment to borrow: {calculateTotalEquipmentCount()}
-            value={
+            </p>
-              equipments.data?.filter((equipment) =>
+          </div>
-                transaction.equipments.includes(equipment.id)
+        </div>
-              ) || []
+
-            }
-            onChange={(_event, newValue) => {
-              SetTransaction({
-                ...transaction,
-                equipments: newValue.map((item) => item.id),
-              });
-            }}
-            renderInput={(params) => (
-              <TextField
-                {...params}
-                variant="outlined"
-                label="Items Requested"
-              />
-            )}
-          />
-        </FormControl>
         <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={
+            placeholder={"ex. Filter Papers, Acids, Solvent, Cleaning Agents"}
-              "ex. Filter Papers, Acids, Solvent, Cleaning Agents"
-            }
           />
         </FormControl>
         <FormControl style={{ marginTop: "8px" }}>
@@ -285,7 +424,6 @@ export default function AddTransactionPage() {
           />
         </FormControl>
       </div>
-      
 
       <div
         style={{
@@ -293,7 +431,7 @@ export default function AddTransactionPage() {
           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
+      <Button
-        onClick={async () => {
+        variant="contained"
-          console.log(JSON.stringify(transaction));
+        color="primary"
-          const data = await TransactionCreateAPI(transaction);
+        onClick={handleShowSelectedItems}
-          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]));
-          }
-        }}
         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>
+        <p style={{ ...styles.text_light, ...styles.text_M, ...{ flex: 1 } }}>
-        
+          Create Transaction
-      </button>
+        </p>
-
+      </Button>
     </div>
   );
 }