update timekeeping, leave UI

Reviewed-on: #135

BACKEND/Modules/Admin/app/Http/Controllers/LeaveManagementController.php

@@ -83,6 +83,7 @@ class LeaveManagementController extends Controller
                 'users.name as user_name',
                 'users.email',
                 'users.avatar',
+                'users.is_separated',
                 'users.created_at as user_created_at',
                 'users.permission',
                 'users.updated_at as user_updated_at',
@@ -104,6 +105,7 @@ class LeaveManagementController extends Controller
                         'name' => $item->user_name,
                         'email' => $item->email,
                         'avatar' => $item->avatar,
+                        'is_separated' => $item->is_separated,
                         'created_at' => $item->user_created_at,
                         'permission' => $item->permission,
                         'updated_at' => $item->user_updated_at,

FRONTEND/src/pages/LeaveManagement/LeaveManagement.tsx

@@ -51,6 +51,7 @@ interface User {
   permission: string
   remember_token: string | null
   avatar: string
+  is_separated: boolean
   created_at: string | null
   updated_at: string | null
 }
@@ -111,6 +112,7 @@ const LeaveManagement = () => {
       permission: '',
       remember_token: '',
       avatar: '',
+      is_separated: false,
       created_at: '',
       updated_at: '',
     },
@@ -777,7 +779,7 @@ const LeaveManagement = () => {
               return (
                 <Table.Tr key={user.user.id} className={classes.tableTr}>
                   <Table.Td ta={'center'}>{index + 1}</Table.Td>
-                  <Table.Td>
+                  <Table.Td pos="relative">
                     <Tooltip multiline label={user.user.name}>
                       <div style={{ display: 'flex', alignItems: 'center' }}>
                         <Avatar
@@ -796,6 +798,23 @@ const LeaveManagement = () => {
                         {user.user.name}
                       </div>
                     </Tooltip>
+
+                    {user.user.is_separated ? (
+                      <Tooltip label="Nhân viên không còn làm việc, đang xử lý hồ sơ">
+                        <Badge
+                          color="red"
+                          pos="absolute"
+                          top={0}
+                          right={0}
+                          radius={0}
+                          size="xs"
+                        >
+                          Off
+                        </Badge>
+                      </Tooltip>
+                    ) : (
+                      ''
+                    )}
                   </Table.Td>
 
                   {/* On leave per month */}
@@ -1117,6 +1136,7 @@ const LeaveManagement = () => {
               permission: '',
               remember_token: '',
               avatar: '',
+              is_separated: false,
               created_at: '',
               updated_at: '',
             },

FRONTEND/src/pages/Timekeeping/Timekeeping.tsx

@@ -24,6 +24,7 @@ import {
   TextInput,
   Tooltip,
   Modal,
+  Badge,
 } from '@mantine/core'
 import { useDisclosure } from '@mantine/hooks'
 import { notifications } from '@mantine/notifications'
@@ -48,6 +49,7 @@ interface User {
   permission: string
   remember_token: string | null
   avatar: string
+  is_separated: boolean
   created_at: string | null
   updated_at: string | null
 }
@@ -947,14 +949,8 @@ const Timekeeping = () => {
                   2
               return (
                 <Table.Tr key={user.user.id} className={classes.tableTr}>
-                  <Table.Td>
+                  <Table.Td pos="relative">
-                    <Tooltip
+                    <Tooltip multiline label={showTooltipAllNote(user)}>
-                      // position={'auto'}
-                      multiline
-                      // opened
-                      // offset={{ mainAxis: 5, crossAxis: 0 }}
-                      label={showTooltipAllNote(user)}
-                    >
                       <div style={{ display: 'flex', alignItems: 'center' }}>
                         <Avatar
                           size={'md'}
@@ -972,6 +968,27 @@ const Timekeeping = () => {
                         {user.user.name}
                       </div>
                     </Tooltip>
+
+                    {user.user.is_separated ? (
+                      <Tooltip label="Nhân viên không còn làm việc, đang xử lý hồ sơ">
+                        <Badge
+                          color="red"
+                          pos="absolute"
+                          top={0}
+                          right={0}
+                          radius={0}
+                          size="xs"
+                          style={{
+                            fontSize: 10,
+                            textTransform: 'capitalize',
+                          }}
+                        >
+                          Off
+                        </Badge>
+                      </Tooltip>
+                    ) : (
+                      ''
+                    )}
                   </Table.Td>
                   <Table.Td ta={'center'}>{totalDays}</Table.Td>
                   <Table.Td ta={'center'}>{workingDays - totalDays}</Table.Td>