Changes Dashboard, Form, Added divs lang gyud. fix fix lang gamay

src/Components/API/API.tsx

@@ -23,7 +23,7 @@ import {
   TransactionCreateType,
 } from "../Types/Types";
 
-const debug = false;
+const debug = true;
 let backendURL;
 
 if (debug) {

src/Components/DashboardPage/Teacher/TeacherTransactionListView.tsx

@@ -48,7 +48,7 @@ export default function TeacherTransactionListView() {
         <div
           style={{
             ...styles.flex_column,
-            ...{ height: "50vh", overflowY: "scroll", width: "85%", marginInline: "6.5%" },
+            ...{ height: "50vh", overflowY: "scroll", width: "100%", },
           }}
         >
           {transactions.data ? (

src/Components/TransactionEntry/TransactionEntry.tsx

@@ -22,7 +22,8 @@ export default function TransactionEntry(props: props) {
         borderRadius: 16,
         marginTop: "10px",
         paddingTop: "15px",
-        width: "100%"
+        width: "100%",
+        maxWidth: "550px"
        
       }}
       onClick={props.onClick}

src/Pages/AddTransactionPage/AddTransactionPage.tsx

@@ -3,7 +3,6 @@ import styles from "../../styles";
 import { colors } from "../../styles";
 import TextField from "@mui/material/TextField";
 import AddToQueueIcon from "@mui/icons-material/AddToQueue";
-import Button from "../../Components/Button/Button";
 import { toast } from "react-toastify";
 import {
   AvailableEquipmentInstancesAPI,
@@ -21,6 +20,9 @@ import {
   MenuItem,
   OutlinedInput,
   Autocomplete,
+  Alert,
+  Stack
+
 } from "@mui/material";
 import React from "react";
 import Header from "../../Components/Header/Header";
@@ -125,11 +127,17 @@ export default function AddTransactionPage() {
         <p style={{ ...styles.text_dark, ...styles.text_L }}>Borrowing Form</p>
       </div>
 
-      <div style={{...styles.flex_column, marginLeft: "1rem", marginRight: "1rem"}}>
+      <div
+        style={{
+          ...styles.flex_column,
+          marginLeft: "1rem",
+          marginRight: "1rem",
+        }}
+      >
         <FormControl style={{ marginTop: "8px" }}>
           <FormLabel
             style={{
-              ...{...styles.text_dark, ...styles.bform_label2},
+              ...{ ...styles.text_dark, ...styles.bform_label2 },
               ...{ marginLeft: "4px", marginBottom: "8px", textAlign: "left" },
             }}
           >
@@ -207,26 +215,7 @@ export default function AddTransactionPage() {
             placeholder={"The subject requiring the equipments"}
           />
         </FormControl>
-        <FormControl style={{ marginTop: "8px" }}>
+
-          <FormLabel
-            style={{
-              ...styles.text_dark,
-              ...{ marginLeft: "4px", marginBottom: "4px", textAlign: "left" },
-            }}
-          >
-            Remarks
-          </FormLabel>
-          <TextField
-            multiline
-            style={styles.input_form}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-              SetTransaction({ ...transaction, remarks: e.target.value });
-              setError("");
-            }}
-            value={transaction.remarks}
-            placeholder={"Optionally add a brief description of the request"}
-          />
-        </FormControl>
         <FormControl style={{ marginTop: "8px" }}>
           <FormLabel
             style={{
@@ -244,7 +233,9 @@ export default function AddTransactionPage() {
               setError("");
             }}
             value={transaction.consumables}
-            placeholder={"Write down any consumables here"}
+            placeholder={
+              "ex. Filter Papers, Acids, Solvent, Cleaning Agents"
+            }
           />
         </FormControl>
         <FormControl style={{ marginTop: "8px" }}>
@@ -268,24 +259,63 @@ export default function AddTransactionPage() {
             }}
             value={transaction.additional_members}
             placeholder={
-              "Write down any additional members borrowing on behalf of this transaction"
+              "1. Full Name ex. (Daniel John Padilla)\n2. Kathryn Bernardo \n3. ..."
             }
           />
         </FormControl>
+        <FormControl style={{ marginTop: "8px" }}>
+          <FormLabel
+            style={{
+              ...styles.text_dark,
+              ...{ marginLeft: "4px", marginBottom: "4px", textAlign: "left" },
+            }}
+          >
+            Remarks (optional)
+          </FormLabel>
+          <TextField
+            multiline
+            style={styles.input_form}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              SetTransaction({ ...transaction, remarks: e.target.value });
+              setError("");
+            }}
+            value={transaction.remarks}
+            placeholder={"Add a brief description of the request or N/A."}
+          />
+        </FormControl>
       </div>
-      <p style={{ ...styles.text_dark, ...styles.text_M }}>{error}</p>
+      
+
       <div
         style={{
-          backgroundColor: colors.button_border,
+          display: "flex",
-          marginTop: "16px",
+          flex: 1,
+          alignContent: "center",
           width: "100%",
-          height: "2px",
+          marginTop: "1rem"
-          marginBottom: 8,
         }}
-      />
+      >
-      <Button
+        <Stack
-        type={"dark"}
+          sx={{
-        label={"Create Transaction"}
+            width: "100%",
+          }}
+          spacing={2}
+        >
+          <Alert
+            icon={false}
+            severity="warning"
+            sx={{ alignItems: "center", justifyContent: "center" }}
+          >
+            NOTE: please be reminded that borrowing of lab apparatus can only be
+            made once. Further requests of additional apparatus will not be
+            entertained.
+          </Alert>
+        </Stack>
+      </div>
+
+      <p style={{ ...styles.text_dark, ...styles.text_M }}>{error}</p>
+
+      <button
         onClick={async () => {
           console.log(JSON.stringify(transaction));
           const data = await TransactionCreateAPI(transaction);
@@ -309,9 +339,6 @@ export default function AddTransactionPage() {
             queryClient.invalidateQueries({
               queryKey: ["equipment_instances"],
             });
-            queryClient.invalidateQueries({
-              queryKey: ["equipment_instances_available"],
-            });
             queryClient.invalidateQueries({
               queryKey: ["transactions"],
             });
@@ -320,7 +347,22 @@ export default function AddTransactionPage() {
             setError(JSON.stringify(data[1]));
           }
         }}
-      />
+        style={{
+          display: "flex",
+          padding: "25px 38px",
+          justifyContent: "center",
+          alignItems: "center",
+          background: "#A7DA96",
+          height: "40px",
+          width: "100%",
+          marginTop: "1rem",
+          marginBottom: "1rem",
+        }}
+      >
+        <p style={{ ...styles.text_light, ...styles.text_M, ...{ flex: 1 } }}>Create Transaction</p>
+        
+      </button>
+
     </div>
   );
 }