Added clearance status to drawer for students

src/Components/API/API.tsx

@@ -19,6 +19,7 @@ import {
   TransactionListType,
   TransactionUpdateType,
   TransactionType,
+  ClearanceType,
 } from "../Types/Types";
 
 const debug = true;
@@ -184,6 +185,18 @@ export function ResetPasswordConfirmAPI(info: ResetPasswordConfirmType) {
     });
 }
 
+export async function ClearanceAPI() {
+  const config = await GetConfig();
+  return instance
+    .get("api/v1/accounts/clearance/", config)
+    .then((response) => {
+      return response.data as ClearanceType;
+    })
+    .catch(() => {
+      console.log("Error retrieving clearance status for user");
+    });
+}
+
 // Equipment APIs
 
 export async function EquipmentAPI(id: number) {

src/Components/Drawer/Drawer.tsx

@@ -3,7 +3,12 @@ import AccountCircleIcon from "@mui/icons-material/AccountCircle";
 import HomeIcon from "@mui/icons-material/Home";
 import LogoutIcon from "@mui/icons-material/Logout";
 import { useQuery } from "@tanstack/react-query";
-import { UserAPI, setAccessToken, setRefreshToken } from "../API/API";
+import {
+  ClearanceAPI,
+  UserAPI,
+  setAccessToken,
+  setRefreshToken,
+} from "../API/API";
 import DrawerButton from "../DrawerButton/DrawerButton";
 import { useDispatch } from "react-redux";
 import { auth_toggle } from "../Plugins/Redux/Slices/AuthSlice/AuthSlice";
@@ -11,6 +16,12 @@ import { toast } from "react-toastify";
 import { useNavigate } from "react-router-dom";
 export default function Drawer() {
   const user = useQuery({ queryKey: ["user"], queryFn: UserAPI });
+  const clearance = useQuery({
+    enabled:
+      user.isFetched && !user?.data?.is_teacher && !user?.data?.is_technician,
+    queryKey: ["clearance"],
+    queryFn: ClearanceAPI,
+  });
   const dispatch = useDispatch();
   const navigate = useNavigate();
   return (
@@ -62,6 +73,72 @@ export default function Drawer() {
           </p>
         </div>
       </div>
+      {user.isFetched &&
+      user.data &&
+      !user.data.is_teacher &&
+      !user?.data?.is_technician ? (
+        <>
+          <div
+            style={{
+              backgroundColor: "white",
+              marginTop: "16px",
+              width: "100%",
+              height: "2px",
+              marginBottom: 8,
+            }}
+          />
+          <div style={styles.flex_row}>
+            <p
+              style={{
+                ...styles.text_light,
+                ...styles.text_M,
+                ...{
+                  textAlign: "left",
+                  paddingLeft: "8px",
+                },
+                margin: 0,
+                alignSelf: "center",
+              }}
+            >
+              Status:
+            </p>
+            <p
+              style={{
+                ...styles.text_light,
+                ...styles.text_M,
+                ...{
+                  textAlign: "left",
+                  paddingLeft: "8px",
+                  color:
+                    clearance.data?.cleared === "Cleared"
+                      ? colors.green
+                      : colors.red,
+                  margin: 0,
+                  alignSelf: "center",
+                },
+              }}
+            >
+              {clearance.data?.cleared}
+            </p>
+            <p
+              style={{
+                ...styles.text_light,
+                ...styles.text_S,
+                ...{
+                  textAlign: "left",
+                  paddingLeft: "8px",
+                },
+                margin: 0,
+                alignSelf: "center",
+              }}
+            >
+              {`(${clearance.data?.uncleared_transactions} pending)`}
+            </p>
+          </div>
+        </>
+      ) : (
+        <></>
+      )}
 
       <div
         style={{

src/Components/Types/Types.tsx

@@ -130,3 +130,8 @@ export type TransactionListType = Array<TransactionType>;
 export type TransactionUpdateType = {
   transaction_status: string;
 };
+
+export type ClearanceType = {
+  cleared: string;
+  uncleared_transactions: number;
+};