udpate UI

FRONTEND/src/pages/Timekeeping/Timekeeping.tsx

@@ -1,10 +1,11 @@
 import { getTheTimesheet } from '@/api/Admin'
 import { get } from '@/rtk/helpers/apiService'
 import { Box, Image, Select, Table, Text, Tooltip } from '@mantine/core'
-import { IconCheck, IconX } from '@tabler/icons-react'
+import { IconCheck, IconExclamationMark, IconX } from '@tabler/icons-react'
 import { useEffect, useState } from 'react'
 import classes from './Timekeeping.module.css'
 import { notifications } from '@mantine/notifications'
+import moment from 'moment'
 
 interface User {
   id: number
@@ -65,11 +66,11 @@ const Timekeeping = () => {
           Array.from({ length: getDaysInMonth() }, (_, index) => index + 1),
         )
       }
-    } catch (error:any) {
+    } catch (error: any) {
       console.log(error)
       notifications.show({
         title: 'Error',
-        message: error.message??error,
+        message: error.message ?? error,
         color: 'red',
       })
     }
@@ -109,6 +110,7 @@ const Timekeeping = () => {
           Timekeeping
         </h3>
       </div>
+      <Box display={'flex'}>
         <Box w="50%" display={'flex'}>
           <Select
             w="10%"
@@ -136,6 +138,61 @@ const Timekeeping = () => {
             }}
           ></Select>
         </Box>
+        <Box w="50%" style={{display:'flex', alignItems:'center', justifyContent:"space-evenly"}}>
+        <Box style={{display:'flex', alignItems:'center'}}>
+            <IconCheck
+              size={20}
+              style={{
+                backgroundColor: 'green',
+                color: 'white',
+                borderRadius: '5px',
+                padding: '2px',
+                fontWeight: 700,
+              }}
+            />
+            <Text ml={'sm'} fz='14px'>Work over 7 hours</Text>
+          </Box>
+          <Box style={{display:'flex', alignItems:'center'}}>
+            <IconCheck
+              size={20}
+              style={{
+                backgroundColor: 'orange',
+                color: 'white',
+                borderRadius: '5px',
+                padding: '2px',
+                fontWeight: 700,
+              }}
+            />
+            <Text ml={'sm'} fz='14px'>Work over 3.5 hours</Text>
+          </Box>
+          <Box style={{display:'flex', alignItems:'center'}}>
+            <IconExclamationMark
+              size={20}
+              style={{
+                backgroundColor: 'orange',
+                color: 'white',
+                borderRadius: '5px',
+                padding: '2px',
+                fontWeight: 700,
+              }}
+            />
+            <Text ml={'sm'} fz='14px'>Checked in</Text>
+          </Box>
+          <Box style={{display:'flex', alignItems:'center'}}>
+            <IconX
+              size={20}
+              style={{
+                backgroundColor: '#ff4646',
+                color: 'white',
+                borderRadius: '5px',
+                padding: '2px',
+                fontWeight: 700,
+              }}
+            />
+            <Text ml={'sm'} fz='14px'>Off</Text>
+          </Box>
+        </Box>
+      </Box>
       <Box>
         <Table
           striped
@@ -176,7 +233,8 @@ const Timekeeping = () => {
                       user.history.find((h) => h.day === d)?.total ?? 0
                     return (
                       <Table.Td key={d} ta={'center'}>
-                        {total / 60 / 60 < 7 && total !== 0 ? (
+                        {total / 60 / 60 < 7 && user.history.find((h) => h.day === d) ?
+                          total / 60 / 60 >= 3.5 ?
                             <Tooltip
                               multiline
                               label={
@@ -230,7 +288,60 @@ const Timekeeping = () => {
                                 }}
                               />
                             </Tooltip>
-                        ) : total >= 7 ? (
+                            : <Tooltip
+                              multiline
+                              label={
+                                <div key={d}>
+                                  {`Total: ${(total / 60 / 60).toFixed(1)}h`}
+                                  {user.history
+                                    .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.includes(
+                                                  'local',
+                                                )
+                                                  ? import.meta.env
+                                                    .VITE_BACKEND_URL +
+                                                  'storage/' +
+                                                  v.image
+                                                  : import.meta.env
+                                                    .VITE_BACKEND_URL +
+                                                  'image/storage/' +
+                                                  v.image
+                                              }
+                                            />
+                                          )}
+                                        </Box>
+                                      )
+                                    })}
+                                </div>
+                              }
+                            >
+                              <IconExclamationMark
+                                size={20}
+                                style={{
+                                  backgroundColor: 'orange',
+                                  color: 'white',
+                                  borderRadius: '5px',
+                                  padding: '2px',
+                                  fontWeight: 700,
+                                }}
+                              />
+                            </Tooltip>
+                          : total >= 7 ? (
                             <Tooltip
                               multiline
                               label={
@@ -284,6 +395,7 @@ const Timekeeping = () => {
                               />
                             </Tooltip>
                           ) : (
+                            parseInt(moment(Date.now()).format('DD')) >= d &&
                             <IconX
                               size={20}
                               style={{