ecWSga4Z

1import { useState, useEffect } from "react";
2import { API, graphqlOperation } from "aws-amplify";
3import {useRouter} from "next/router";
4import { getEmployee} from "@/src/graphql/queries";
5import {
6    Table,
7    Thead,
8    Tbody,
9    Tr,
10    Th,
11    Td,
12    Button,
13    Text,
14    Flex,
15  } from "@chakra-ui/react";
16
17const Profile = () => {
18  const router = useRouter();
19  const [currentEmployee, setCurrentEmployee] = useState()
20  const [currentID, setCurrentID]= useState(router.query.employee)
21
22  useEffect(() => {
23    fetchEmployee();
24  }, []);
25
26
27  async function fetchEmployee() {
28    try {   
29      const employee = await API.graphql(graphqlOperation(getEmployee, {id: currentID}));
30      const query = employee.data.getEmployee
31      setCurrentEmployee({...currentEmployee, query});
32    } catch (err) {
33      console.log(err);
34    }
35  }
36  // console.log(currentEmployee)
37return (
38        <>
39        {!currentEmployee ? <h1>Loading....</h1> : 
40        <Flex flexDirection='column' >
41          <Flex mt={30} justifyContent='space-between' alignItems='center'>
42            <Text fontWeight='bold' fontSize='3xl' mt={8} mb={6}>
43            {currentEmployee.query.first_name} {currentEmployee.query.last_name}
44            </Text>
45          </Flex>
46          <Table 
47          mt={30}
48          variant='striped' 
49          colorScheme='blue'
50           border='1px' 
51           borderColor='#BEE3F8'
52           >
53            <Thead>
54              <Tr>
55                <Th fontSize='md'>Documents</Th>
56                <Th fontSize='md'>Status</Th>
57              </Tr>
58            </Thead>
59            <Tbody>
60                {currentEmployee.query.DocumentsForEmployee.items.map((e, i) => {
61                    return (
62                        <>
63                            <Tr key={i}>
64
65                            <Td fontWeight='medium' >
66                            <Text  
67                            textTransform= 'capitalize'                  
68                            color='#0072B9'
69                            fontSize='md'
70                            _hover={{ cursor: "pointer", color: "#F18E26" }}
71                        >
72                            {e.Type}
73                            </Text>
74                            </Td>
75                            
76                            <Td fontWeight='medium' >
77                            <Text  
78                            textTransform= 'capitalize'                  
79                            color= {!e.isSigned ? '    #DC143C' : '#0072B9'}
80                            fontSize='md'
81                            _hover={{ cursor: "pointer", color: "#F18E26" }}
82                        >
83                            {!e.isSigned ? "Not Signed" : "Signed"}
84                            </Text>
85                            </Td>
86
87                            </Tr>
88                            </>
89                    )  
90                })}
91            </Tbody>
92            </Table>
93            <Button
94              margin= 'auto'
95              variant='solid'
96              size='md'
97              backgroundColor='#F18E26'
98              color='white'
99              fontWeight='bold'
100              width='20%'
101              p={5}
102              mt={6}
103            >
104              Update Profile
105            </Button>
106         </Flex>
107        }
108      </>
109    )
110};
111
112export default Profile;