From f9b4729ee738054c5074bbd999e59a88812cbfd9 Mon Sep 17 00:00:00 2001
From: Keannu Bernasol <noehbernasol0@gmail.com>
Date: Fri, 29 Dec 2023 18:44:18 +0800
Subject: [PATCH] Update transaction entry to reflect borrower's course

---
 .../RegisterModal/RegisterModal.tsx           | 56 +++++++++++++++++++
 .../TransactionEntry/TransactionEntry.tsx     | 18 ++++++
 .../TransactionPDF/TransactionPDF.tsx         | 20 +++++++
 src/Components/Types/Types.tsx                |  4 ++
 .../AddTransactionPage/AddTransactionPage.tsx | 42 ++++++++++----
 5 files changed, 129 insertions(+), 11 deletions(-)

diff --git a/src/Components/RegisterModal/RegisterModal.tsx b/src/Components/RegisterModal/RegisterModal.tsx
index e9ea675..ca49625 100644
--- a/src/Components/RegisterModal/RegisterModal.tsx
+++ b/src/Components/RegisterModal/RegisterModal.tsx
@@ -11,6 +11,13 @@ import Button from "../Button/Button";
 import { useNavigate } from "react-router-dom";
 import { RegisterAPI } from "../API/API";
 import { toast } from "react-toastify";
+import {
+  Radio,
+  RadioGroup,
+  FormControlLabel,
+  FormControl,
+  FormLabel,
+} from "@mui/material";
 export default function RegisterModal() {
   const navigate = useNavigate();
   const [showPassword, setShowPassword] = useState(false);
@@ -20,6 +27,7 @@ export default function RegisterModal() {
     last_name: "",
     username: "",
     email: "",
+    course: "",
     password: "",
     confirm_password: "",
   });
@@ -78,6 +86,53 @@ export default function RegisterModal() {
           value={user.email}
           placeholder={"Enter your email"}
         />
+        <FormControl style={{ marginTop: "8px" }}>
+          <FormLabel style={styles.text_dark} id="status-selection">
+            Course
+          </FormLabel>
+          <RadioGroup
+            aria-labelledby="demo-radio-buttons-group-label"
+            value={user.course}
+            defaultValue="BS Chemistry"
+            name="radio-buttons-group"
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              setUser({ ...user, course: e.target.value });
+              setError("");
+            }}
+          >
+            <div
+              style={{
+                ...styles.flex_column,
+                ...{ overflowY: "scroll", maxHeight: "72px" },
+              }}
+            >
+              <FormControlLabel
+                value="BS Chemistry"
+                control={<Radio />}
+                label="BS Chemistry"
+                style={styles.text_dark}
+              />
+              <FormControlLabel
+                value="BS Food Technology"
+                control={<Radio />}
+                label="BS Food Technology"
+                style={styles.text_dark}
+              />
+              <FormControlLabel
+                value="BS Applied Physics"
+                control={<Radio />}
+                label="BS Applied Physics"
+                style={styles.text_dark}
+              />
+              <FormControlLabel
+                value="BS Environmental Science"
+                control={<Radio />}
+                label="BS Environmental Science"
+                style={styles.text_dark}
+              />
+            </div>
+          </RadioGroup>
+        </FormControl>
         <TextField
           id="outlined-helperText"
           label="Username"
@@ -181,6 +236,7 @@ export default function RegisterModal() {
                 email: "",
                 password: "",
                 confirm_password: "",
+                course: "",
               });
             } else {
               setError(JSON.stringify(status[1]));
diff --git a/src/Components/TransactionEntry/TransactionEntry.tsx b/src/Components/TransactionEntry/TransactionEntry.tsx
index 167cbca..c7191cf 100644
--- a/src/Components/TransactionEntry/TransactionEntry.tsx
+++ b/src/Components/TransactionEntry/TransactionEntry.tsx
@@ -59,6 +59,15 @@ export default function TransactionEntry(props: props) {
             Borrower: {props.transaction.borrower.name}{" "}
             {`(ID:${props.transaction.borrower.id})`}
           </p>
+          <p
+            style={{
+              ...styles.text_dark,
+              ...styles.text_S,
+              ...{ textAlign: "left", margin: 0 },
+            }}
+          >
+            {`(${props.transaction.borrower.course})`}
+          </p>
           <p
             style={{
               ...styles.text_dark,
@@ -69,6 +78,15 @@ export default function TransactionEntry(props: props) {
             Teacher: {props.transaction.teacher.name}{" "}
             {`(ID:${props.transaction.teacher.id})`}
           </p>
+          <p
+            style={{
+              ...styles.text_dark,
+              ...styles.text_S,
+              ...{ textAlign: "left", margin: 0 },
+            }}
+          >
+            Subject: {props.transaction.subject}
+          </p>
           <p
             style={{
               ...styles.text_dark,
diff --git a/src/Components/TransactionPDF/TransactionPDF.tsx b/src/Components/TransactionPDF/TransactionPDF.tsx
index 285fdae..7db9f3e 100644
--- a/src/Components/TransactionPDF/TransactionPDF.tsx
+++ b/src/Components/TransactionPDF/TransactionPDF.tsx
@@ -57,6 +57,16 @@ export default function TransactionPDF(props: props) {
                 Borrower: {props.transaction.borrower.name}{" "}
                 {`(ID:${props.transaction.borrower.id})`}
               </Text>
+              <Text
+                style={{
+                  color: colors.font_dark,
+                  fontSize: 16,
+                  textAlign: "left",
+                  margin: 0,
+                }}
+              >
+                {`(${props.transaction.borrower.course})`}
+              </Text>
               <Text
                 style={{
                   color: colors.font_dark,
@@ -68,6 +78,16 @@ export default function TransactionPDF(props: props) {
                 Teacher: {props.transaction.teacher.name}{" "}
                 {`(ID:${props.transaction.teacher.id})`}
               </Text>
+              <Text
+                style={{
+                  color: colors.font_dark,
+                  fontSize: 16,
+                  textAlign: "left",
+                  margin: 0,
+                }}
+              >
+                Subject: {props.transaction.subject}
+              </Text>
               <Text
                 style={{
                   color: colors.font_dark,
diff --git a/src/Components/Types/Types.tsx b/src/Components/Types/Types.tsx
index 8d2abcd..ea60f65 100644
--- a/src/Components/Types/Types.tsx
+++ b/src/Components/Types/Types.tsx
@@ -4,6 +4,7 @@ export type RegisterType = {
   password: string;
   first_name: string;
   last_name: string;
+  course: string;
 };
 
 export type LoginType = {
@@ -113,6 +114,7 @@ export type TransactionType = {
   borrower: {
     id: number;
     name: string;
+    course: string;
   };
   teacher: {
     id: number;
@@ -125,6 +127,7 @@ export type TransactionType = {
   transaction_status: string;
   timestamp: string;
   remarks: string;
+  subject: string;
 };
 
 export type TransactionListType = Array<TransactionType>;
@@ -134,6 +137,7 @@ export type TransactionCreateType = {
   remarks: string;
   teacher: number;
   borrower: number;
+  subject: string;
   transaction_status: "Pending Approval";
 };
 
diff --git a/src/Pages/AddTransactionPage/AddTransactionPage.tsx b/src/Pages/AddTransactionPage/AddTransactionPage.tsx
index 741e9fa..1b864a6 100644
--- a/src/Pages/AddTransactionPage/AddTransactionPage.tsx
+++ b/src/Pages/AddTransactionPage/AddTransactionPage.tsx
@@ -30,6 +30,7 @@ export default function AddTransactionPage() {
   const queryClient = useQueryClient();
   const [selecteditems, SetSelectedItems] = useState<number[]>([]);
   const [selectedteacher, SetSelectedTeacher] = useState<number>(0);
+  const [subject, SetSubject] = useState("");
   const [remarks, SetRemarks] = useState("");
   const [error, setError] = useState("");
 
@@ -129,7 +130,8 @@ export default function AddTransactionPage() {
             onChange={(event) =>
               SetSelectedTeacher(event.target.value as number)
             }
-            input={<OutlinedInput label="Name" />}
+            label={"Assigned Teacher"}
+            input={<OutlinedInput label="Assigned Teacher" />}
           >
             {teachers.data?.map((teacher) => (
               <MenuItem key={teacher.id} value={teacher.id}>
@@ -138,16 +140,33 @@ export default function AddTransactionPage() {
             ))}
           </Select>
         </FormControl>
-        <TextField
-          multiline
-          style={styles.input_form}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-            SetRemarks(e.target.value);
-            setError("");
-          }}
-          value={remarks}
-          placeholder={"Optionally add a brief description of the request"}
-        />
+        <FormControl style={{ marginTop: "8px" }}>
+          <FormLabel style={styles.text_dark}>Subject</FormLabel>
+          <TextField
+            style={styles.input_form}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              SetSubject(e.target.value);
+              setError("");
+            }}
+            label={"Subject"}
+            value={subject}
+            placeholder={"The subject requiring the equipments"}
+          />
+        </FormControl>
+        <FormControl style={{ marginTop: "8px" }}>
+          <FormLabel style={styles.text_dark}>Remarks</FormLabel>
+          <TextField
+            multiline
+            style={styles.input_form}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              SetRemarks(e.target.value);
+              setError("");
+            }}
+            label={"Remarks"}
+            value={remarks}
+            placeholder={"Optionally add a brief description of the request"}
+          />
+        </FormControl>
       </div>
       <p style={{ ...styles.text_dark, ...styles.text_M }}>{error}</p>
       <div
@@ -167,6 +186,7 @@ export default function AddTransactionPage() {
           const data = await TransactionCreateAPI({
             equipments: selecteditems,
             teacher: selectedteacher,
+            subject: subject,
             remarks: remarks || " ",
             transaction_status: "Pending Approval",
             borrower: user.data?.id || 0,