made status change on click and a confirmation modal

frontend/src/components/ConfirmationModal.js

@@ -0,0 +1,45 @@
+import {
+    Modal,
+    ModalOverlay,
+    ModalContent,
+    ModalHeader,
+    ModalFooter,
+    ModalBody,
+    ModalCloseButton,
+    Button,
+} from '@chakra-ui/react'
+
+const ConfirmationModal = ({ onConfirm, isOpen, onClose }) => {
+    return (
+        <Modal isOpen={isOpen} onClose={onClose}>
+            <ModalOverlay />
+            <ModalContent>
+                <ModalHeader>Submission (Placeholder)</ModalHeader>
+                <ModalCloseButton />
+                <ModalBody>
+                    <div>
+                        Are you sure you want to submit this, you cant undo bla
+                        bla bla (PLACEHOLDER)
+                    </div>
+                </ModalBody>
+
+                <ModalFooter>
+                    <Button colorScheme="red" mr={3} onClick={onClose}>
+                        Cancel
+                    </Button>
+                    <Button
+                        colorScheme="green"
+                        onClick={() => {
+                            onClose()
+                            onConfirm()
+                        }}
+                    >
+                        Confirm
+                    </Button>
+                </ModalFooter>
+            </ModalContent>
+        </Modal>
+    )
+}
+
+export default ConfirmationModal

frontend/src/components/TicketContent/SFAdminContentTable.js

@@ -1,11 +1,66 @@
-import { Button, Center, Heading, VStack, Link } from '@chakra-ui/react'
+import {
+    Button,
+    Center,
+    Heading,
+    VStack,
+    Link,
+    useDisclosure,
+} from '@chakra-ui/react'
 import React from 'react'
 import { useGetPreserveParamsHref } from '../../hooks/hooks'
 import { useGetCurrentTicket } from '../../hooks/hooks'
+import { TICKET_ENDPOINTS } from '../../constants'
+import { useSetRecoilState } from 'recoil'
+import { allTicketsState } from '../../state/atoms'
+import { axiosPreset } from '../../axiosConfig'
+import { getAllTickets } from '../../utils/globalSetters'
+import ConfirmationModal from '../ConfirmationModal'
 
 const SFAdminContentTable = () => {
     const getPreserveParamsHref = useGetPreserveParamsHref()
     const currentTicket = useGetCurrentTicket()
+    const setAllTickets = useSetRecoilState(allTicketsState)
+    const {
+        isOpen: isConfirmationOpen,
+        onOpen: onOpenConfirmation,
+        onClose: onCloseConfirmation,
+    } = useDisclosure()
+
+    const transitionStatusText = (status) => {
+        if (status === 'ALLOCATED') {
+            return 'Submit Claim'
+        }
+        if (status === 'CLAIM_SUBMITTED') {
+            return 'Confirm Reimbursement Submission'
+        }
+        if (status === 'SUBMITTED_TO_SF') {
+            return 'Confirm Reimbursement'
+        }
+        if (status === 'REIMBURSED') {
+            return 'Reimbursement Confirmed'
+        }
+    }
+    const nextStatus = (status) => {
+        if (status === 'ALLOCATED') {
+            return 'CLAIM_SUBMITTED'
+        }
+        if (status === 'CLAIM_SUBMITTED') {
+            return 'SUBMITTED_TO_SF'
+        }
+        if (status === 'SUBMITTED_TO_SF') {
+            return 'REIMBURSED'
+        }
+    }
+    const handleUpdateStatus = async (nextStatus) => {
+        const payload = {
+            status: nextStatus,
+        }
+        await axiosPreset.patch(
+            `${TICKET_ENDPOINTS.SF}/${currentTicket._id}`,
+            payload
+        )
+        await getAllTickets(setAllTickets)
+    }
     return (
         <VStack
             border="1px solid black"
@@ -16,17 +71,34 @@ const SFAdminContentTable = () => {
             <Heading size="md">Admin View</Heading>
             {
                 <Center pb="7px" gap="10px">
-                    <Button
-                        colorScheme="blue"
-                        size="sm"
-                        disabled={
-                            currentTicket?.po_number?.length +
-                                currentTicket?.requisition_number?.length ===
-                            0
-                        }
-                    >
-                        Transition Status
-                    </Button>
+                    {isConfirmationOpen && (
+                        <ConfirmationModal
+                            onClose={onCloseConfirmation}
+                            isOpen={isConfirmationOpen}
+                            onConfirm={() =>
+                                handleUpdateStatus(
+                                    nextStatus(currentTicket.status)
+                                )
+                            }
+                        />
+                    )}
+                    {currentTicket.status !== 'REIMBURSED' && (
+                        <Button
+                            colorScheme="blue"
+                            size="sm"
+                            disabled={
+                                currentTicket?.po_number?.length +
+                                    currentTicket?.requisition_number
+                                        ?.length ===
+                                0
+                            }
+                            onClick={() => {
+                                onOpenConfirmation()
+                            }}
+                        >
+                            {transitionStatusText(currentTicket.status)}
+                        </Button>
+                    )}
                     {/* can remove getPreserveParamsHref if it does not make sense to preserve params */}
                     <Link
                         href={getPreserveParamsHref(

frontend/src/constants.js

@@ -18,7 +18,7 @@ export const APPROVAL_LEVELS = Object.freeze({
     admin_approval: 'admin_approval',
 })
 
-export const ADMIN_IDENTIFIERS = ['drayside', 'v2zheng', 'jw4he']
+export const ADMIN_IDENTIFIERS = ['drayside', 'v2zheng', 'jw4he', 'william.li']
 export const TEAM_CAPTAIN_TITLES = ['Team Captain']
 export const DIRECTOR_TITLES = ['Director']