From a1b224666686c39f6fbfc6fcbd0fdb4277a4dd57 Mon Sep 17 00:00:00 2001
From: JOSEPH LE <joseph.le@apactech.io>
Date: Tue, 6 Aug 2024 13:13:04 +0700
Subject: [PATCH] update UI for timekeeping page

---
 FRONTEND/src/components/Navbar/Navbar.tsx     |  1 -
 .../src/pages/Timekeeping/Timekeeping.tsx     | 21 +++++++++++++++----
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/FRONTEND/src/components/Navbar/Navbar.tsx b/FRONTEND/src/components/Navbar/Navbar.tsx
index f4f85a8..a69483c 100755
--- a/FRONTEND/src/components/Navbar/Navbar.tsx
+++ b/FRONTEND/src/components/Navbar/Navbar.tsx
@@ -26,7 +26,6 @@ import {
   IconPasswordUser,
   IconReport,
   IconScan,
-  IconSubtask,
   IconSun
 } from '@tabler/icons-react'
 import { useCallback, useEffect, useState } from 'react'
diff --git a/FRONTEND/src/pages/Timekeeping/Timekeeping.tsx b/FRONTEND/src/pages/Timekeeping/Timekeeping.tsx
index 5ad9b82..d738ff1 100644
--- a/FRONTEND/src/pages/Timekeeping/Timekeeping.tsx
+++ b/FRONTEND/src/pages/Timekeeping/Timekeeping.tsx
@@ -23,11 +23,14 @@ import {
 } from '@mantine/core'
 import { useDisclosure } from '@mantine/hooks'
 import { notifications } from '@mantine/notifications'
-import { IconCheck, IconExclamationMark, IconX } from '@tabler/icons-react'
+import {
+  IconCheck,
+  IconExclamationMark,
+  IconPointFilled,
+  IconX
+} from '@tabler/icons-react'
 import moment from 'moment'
-import React, { useEffect, useRef, useState } from 'react'
-import { Link } from 'react-router-dom'
-import { Popover, PopoverBody } from 'reactstrap'
+import { useEffect, useState } from 'react'
 
 import classes from './Timekeeping.module.css'
 
@@ -762,8 +765,10 @@ const Timekeeping = () => {
                   {daysInMonth.map((d) => {
                     var total =
                       user.history.find((h) => h.day === d)?.total ?? 0
+                    var notes = user.history.find((h) => h.day === d)?.notes
                     return (
                       <Table.Td
+                        pos={'relative'}
                         key={d}
                         ta={'center'}
                         bg={
@@ -774,6 +779,14 @@ const Timekeeping = () => {
                             : ''
                         }
                       >
+                        <Box
+                          pos={'absolute'}
+                          top={-3}
+                          right={-3}
+                          display={notes && notes.length > 0 ? 'block' : 'none'}
+                        >
+                          <IconPointFilled width={15} height={15} style={{color:"#2767e1"}} />
+                        </Box>
                         {total / 60 / 60 < 7 &&
                         user.history.find(
                           (h) => h.day === d && h.values && h.values.length > 0,