From 6a9a9f4ceeca460714d06484514153d25580724b Mon Sep 17 00:00:00 2001
From: JOSEPH LE <joseph.le@apactech.io>
Date: Fri, 7 Jun 2024 14:33:23 +0700
Subject: [PATCH] update timekeeping

---
 .../src/pages/Timekeeping/Timekeeping.tsx     | 75 ++++++++++++++-----
 1 file changed, 56 insertions(+), 19 deletions(-)

diff --git a/FRONTEND/src/pages/Timekeeping/Timekeeping.tsx b/FRONTEND/src/pages/Timekeeping/Timekeeping.tsx
index 882d050..fca71c9 100644
--- a/FRONTEND/src/pages/Timekeeping/Timekeeping.tsx
+++ b/FRONTEND/src/pages/Timekeeping/Timekeeping.tsx
@@ -56,7 +56,11 @@ const Timekeeping = () => {
         year: date.year,
       })
       if (res.status) {
-        setData(res.data.filter((u:UserData)=>permission.includes(u.user.permission)))
+        setData(
+          res.data.filter((u: UserData) =>
+            permission.includes(u.user.permission),
+          ),
+        )
         setDaysInMonth(
           Array.from({ length: getDaysInMonth() }, (_, index) => index + 1),
         )
@@ -104,7 +108,7 @@ const Timekeeping = () => {
         <Select
           w="10%"
           value={date.month}
-          size='xs'
+          size="xs"
           label="Month"
           data={Array.from({ length: 12 }, (_, index) =>
             (1 + index).toString(),
@@ -116,7 +120,7 @@ const Timekeeping = () => {
         <Select
           w="10%"
           value={date.year}
-          size='xs'
+          size="xs"
           ml={'sm'}
           label="Year"
           data={Array.from({ length: 20 }, (_, index) =>
@@ -128,12 +132,22 @@ const Timekeeping = () => {
         ></Select>
       </Box>
       <Box>
-        <Table striped highlightOnHover withTableBorder withColumnBorders mt={'md'}>
+        <Table
+          striped
+          highlightOnHover
+          withTableBorder
+          withColumnBorders
+          mt={'md'}
+        >
           <Table.Thead>
             <Table.Tr bg={'#228be66b'}>
               <Table.Th>Day</Table.Th>
               {daysInMonth.map((d) => {
-                return <Table.Th key={d} ta={'center'}>{d}</Table.Th>
+                return (
+                  <Table.Th key={d} ta={'center'}>
+                    {d}
+                  </Table.Th>
+                )
               })}
             </Table.Tr>
             <Table.Tr bg={'#228be66b'}>
@@ -150,11 +164,8 @@ const Timekeeping = () => {
           <Table.Tbody>
             {data.map((user) => {
               return (
-                <Table.Tr
-                  key={user.user.id}
-                  className={classes.tableTr}
-                >
-                  <Table.Td >{user.user.name}</Table.Td>
+                <Table.Tr key={user.user.id} className={classes.tableTr}>
+                  <Table.Td>{user.user.name}</Table.Td>
                   {daysInMonth.map((d) => {
                     var total =
                       user.history.find((h) => h.day === d)?.total ?? 0
@@ -163,7 +174,6 @@ const Timekeeping = () => {
                         {total / 60 / 60 < 8 && total !== 0 ? (
                           <Tooltip
                             multiline
-                            
                             label={
                               <div>
                                 {`Total: ${(total / 60 / 60).toFixed(1)}h`}
@@ -171,7 +181,34 @@ const Timekeeping = () => {
                                   .find((h) => h.day === d)
                                   ?.values.map((v) => {
                                     return (
-                                      <Box style={{display:'flex', alignItems:'center', justifyContent:"space-between"}}><p>{v.status + ': ' + v.time_string}</p> {v.image&&<Image w={100} h={100} src={import.meta.env.VITE_BACKEND_URL+"storage/"+v.image}/>}</Box>
+                                      <Box
+                                        style={{
+                                          display: 'flex',
+                                          alignItems: 'center',
+                                          justifyContent: 'space-between',
+                                        }}
+                                      >
+                                        <p>{v.status + ': ' + v.time_string}</p>{' '}
+                                        {v.image && (
+                                          <Image
+                                            w={100}
+                                            h={100}
+                                            src={
+                                              import.meta.env.VITE_BACKEND_URL.includes(
+                                                'local',
+                                              )
+                                                ? import.meta.env
+                                                    .VITE_BACKEND_URL +
+                                                  'storage/' +
+                                                  v.image
+                                                : import.meta.env
+                                                    .VITE_BACKEND_URL +
+                                                  'api/storage/' +
+                                                  v.image
+                                            }
+                                          />
+                                        )}
+                                      </Box>
                                     )
                                   })}
                               </div>
@@ -182,9 +219,9 @@ const Timekeeping = () => {
                               style={{
                                 backgroundColor: 'orange',
                                 color: 'white',
-                                borderRadius:"5px",
-                                padding: "2px",
-                                fontWeight: 700
+                                borderRadius: '5px',
+                                padding: '2px',
+                                fontWeight: 700,
                               }}
                             />
                           </Tooltip>
@@ -209,8 +246,8 @@ const Timekeeping = () => {
                               style={{
                                 backgroundColor: 'green',
                                 color: 'white',
-                                borderRadius:"5px",
-                                padding: "2px"
+                                borderRadius: '5px',
+                                padding: '2px',
                               }}
                             />
                           </Tooltip>
@@ -220,8 +257,8 @@ const Timekeeping = () => {
                             style={{
                               backgroundColor: '#ff4646',
                               color: 'white',
-                              borderRadius:"5px",
-                              padding: "2px"
+                              borderRadius: '5px',
+                              padding: '2px',
                             }}
                           />
                         )}