Merge pull request #19 from cissa-unimelb/feature-reimbursement-forms

Feature reimbursement forms
cissa-unimelb · Jul 22, 2024 · ffddb50 · ffddb50
2 parents 5c71254 + 9d75e11
commit ffddb50
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 33 deletions.
diff --git a/src/components/ReimbursementCard.tsx b/src/components/ReimbursementCard.tsx
@@ -17,12 +17,14 @@ import { ACCEPT_HEADER, ACCEPT_BODY, REJECT_HEADER, REJECT_BODY } from "../email
 
 
 type Props = {
-  reimbursement: Reimbursement
+  reimbursement: Reimbursement,
+  isTreasurer: boolean
 };
 
 export default function ReimbursementCard(
   {
-    reimbursement
+    reimbursement,
+    isTreasurer
   }: Props) {
 
 
@@ -59,32 +61,34 @@ export default function ReimbursementCard(
       </CardCover>
       <CardCover className="Component-expense-cover"/>
 
-      <div>
-        <Button variant="contained" 
-        size="small"
-        style={{
-          margin: "10px",
-          backgroundColor: "green"
-        }}
-        onClick={() => {
-          window.open(`mailto:${user?.email}?subject=${ACCEPT_HEADER}&body=${ACCEPT_BODY}`);
-        }}>
-          <b>Approve</b>
-        </Button>
+      {isTreasurer?
+        <div>
+          <Button variant="contained" 
+          size="small"
+          style={{
+            margin: "10px",
+            backgroundColor: "green"
+          }}
+          onClick={() => {
+            window.open(`mailto:${user?.email}?subject=${ACCEPT_HEADER}&body=${ACCEPT_BODY}`);
+          }}>
+            <b>Approve</b>
+          </Button>
 
-        <Button variant="contained"
-        size="small"
-        style={{
-          margin: "10px",
-          backgroundColor: "red"
-        }} 
-        onClick={() => {
-          window.open(`mailto:${user?.email}?subject=${REJECT_HEADER}&body=${REJECT_BODY}`);
-        }}>
-          <b>Reject</b>
-        </Button>
+          <Button variant="contained"
+          size="small"
+          style={{
+            margin: "10px",
+            backgroundColor: "red"
+          }} 
+          onClick={() => {
+            window.open(`mailto:${user?.email}?subject=${REJECT_HEADER}&body=${REJECT_BODY}`);
+          }}>
+            <b>Reject</b>
+          </Button>
 
-      </div>
+        </div>
+      : <></>}
 
       <CardContent sx={{justifyContent: "flex-end", cursor: 'pointer'}}
                    onClick={handleClick}>

diff --git a/src/components/ReimbursementForm.tsx b/src/components/ReimbursementForm.tsx
@@ -1,5 +1,6 @@
 import { useState} from "react";
 import { useUserStore } from "../stores/user";
+import { useNavigate } from "react-router-dom";
 
 // import { StyleSheet } from '@react-pdf/renderer';
 // import ReactPDF from '@react-pdf/renderer';
@@ -173,6 +174,7 @@ export const ReimbursementForm = () => {
   const [file, setFile] = useState(new File([], ""));
 
   const {value} = useUserStore();
+  const navigate = useNavigate();
 
   const formik = useFormik({
     initialValues: {
@@ -281,6 +283,25 @@ export const ReimbursementForm = () => {
                   Reimbursement Form
                 </Typography>
               </div>
+
+              {/* Back button */}
+              <div>
+                <Button
+                    color="info"
+                    variant="solid"
+                    style={{
+                      margin: "10px",
+                      position: "absolute",
+                      top: 0,
+                      right: 0
+                    }}
+                    onClick={() => {
+                      navigate("/dashboard");
+                    }}
+                  >
+                    Back
+                </Button>
+              </div>
 
               {/* All fields */}
               <InputFormControlBlock formik={formik} attribute="event" ></InputFormControlBlock>
@@ -299,7 +320,7 @@ export const ReimbursementForm = () => {
 
 
 
-              {/* Submit button */}
+              {/* Submit and back button */}
               <div
                 style={{
                   display: "block",

diff --git a/src/pages/Analytics/index.tsx b/src/pages/Analytics/index.tsx
@@ -16,7 +16,7 @@ export function Analytics() {
     (async () => {
       setStats(await activeReimbursementDepartmentStatistics());
     })();
-  });
+  }, []);
 
   return <div className={styles.page}>
     <div className={styles.header}>

diff --git a/src/pages/Dashboard/index.tsx b/src/pages/Dashboard/index.tsx
@@ -61,7 +61,7 @@ export default function Dashboard() {
             {
               reimbursement.map((reim, i) => (
                 <Grid xs={12} md={3} key={i}>
-                  <ReimbursementCard reimbursement={reim} />
+                  <ReimbursementCard reimbursement={reim} isTreasurer={value.isTreasurer}/>
                 </Grid>
               ))
             }

diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx
@@ -3,17 +3,17 @@ import {User} from "../../auth/types";
 import {useUserStore} from "../../stores/user";
 import {Navigate} from "react-router-dom";
 import {LoginForm} from "../../components/LoginForm";
-import {useEffect, useState} from "react";
+import {useCallback, useEffect, useState} from "react";
 import {retainSession} from "../../auth/session";
 
 export default function Login() {
   const [loading, setLoading] = useState(true);
 
   // TODO: refactor to react context please
   const {value, setUserStore} = useUserStore();
-  const handleSuccess = async (user: User) => {
+  const handleSuccess = useCallback(async (user: User) => {
     setUserStore(user);
-  };
+  }, [setUserStore]);
 
   const login = () => {
     googleSignIn()
@@ -36,7 +36,7 @@ export default function Login() {
       .finally(() => {
         setLoading(false);
       })
-  });
+  }, [handleSuccess]);
 
   return (
     <>