udpate UI
This commit is contained in:
parent
811c57c171
commit
2123a1e9fb
|
|
@ -1,10 +1,11 @@
|
||||||
import { getTheTimesheet } from '@/api/Admin'
|
import { getTheTimesheet } from '@/api/Admin'
|
||||||
import { get } from '@/rtk/helpers/apiService'
|
import { get } from '@/rtk/helpers/apiService'
|
||||||
import { Box, Image, Select, Table, Text, Tooltip } from '@mantine/core'
|
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 { useEffect, useState } from 'react'
|
||||||
import classes from './Timekeeping.module.css'
|
import classes from './Timekeeping.module.css'
|
||||||
import { notifications } from '@mantine/notifications'
|
import { notifications } from '@mantine/notifications'
|
||||||
|
import moment from 'moment'
|
||||||
|
|
||||||
interface User {
|
interface User {
|
||||||
id: number
|
id: number
|
||||||
|
|
@ -65,11 +66,11 @@ const Timekeeping = () => {
|
||||||
Array.from({ length: getDaysInMonth() }, (_, index) => index + 1),
|
Array.from({ length: getDaysInMonth() }, (_, index) => index + 1),
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
} catch (error:any) {
|
} catch (error: any) {
|
||||||
console.log(error)
|
console.log(error)
|
||||||
notifications.show({
|
notifications.show({
|
||||||
title: 'Error',
|
title: 'Error',
|
||||||
message: error.message??error,
|
message: error.message ?? error,
|
||||||
color: 'red',
|
color: 'red',
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
@ -109,32 +110,88 @@ const Timekeeping = () => {
|
||||||
Timekeeping
|
Timekeeping
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<Box w="50%" display={'flex'}>
|
<Box display={'flex'}>
|
||||||
<Select
|
<Box w="50%" display={'flex'}>
|
||||||
w="10%"
|
<Select
|
||||||
value={date.month}
|
w="10%"
|
||||||
size="xs"
|
value={date.month}
|
||||||
label="Month"
|
size="xs"
|
||||||
data={Array.from({ length: 12 }, (_, index) =>
|
label="Month"
|
||||||
(1 + index).toString(),
|
data={Array.from({ length: 12 }, (_, index) =>
|
||||||
)}
|
(1 + index).toString(),
|
||||||
onChange={(e) => {
|
)}
|
||||||
setDate({ ...date, month: e! })
|
onChange={(e) => {
|
||||||
}}
|
setDate({ ...date, month: e! })
|
||||||
></Select>
|
}}
|
||||||
<Select
|
></Select>
|
||||||
w="10%"
|
<Select
|
||||||
value={date.year}
|
w="10%"
|
||||||
size="xs"
|
value={date.year}
|
||||||
ml={'sm'}
|
size="xs"
|
||||||
label="Year"
|
ml={'sm'}
|
||||||
data={Array.from({ length: 20 }, (_, index) =>
|
label="Year"
|
||||||
(2023 + 1 + index).toString(),
|
data={Array.from({ length: 20 }, (_, index) =>
|
||||||
)}
|
(2023 + 1 + index).toString(),
|
||||||
onChange={(e) => {
|
)}
|
||||||
setDate({ ...date, year: e! })
|
onChange={(e) => {
|
||||||
}}
|
setDate({ ...date, year: e! })
|
||||||
></Select>
|
}}
|
||||||
|
></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>
|
||||||
<Box>
|
<Box>
|
||||||
<Table
|
<Table
|
||||||
|
|
@ -176,124 +233,179 @@ const Timekeeping = () => {
|
||||||
user.history.find((h) => h.day === d)?.total ?? 0
|
user.history.find((h) => h.day === d)?.total ?? 0
|
||||||
return (
|
return (
|
||||||
<Table.Td key={d} ta={'center'}>
|
<Table.Td key={d} ta={'center'}>
|
||||||
{total / 60 / 60 < 7 && total !== 0 ? (
|
{total / 60 / 60 < 7 && user.history.find((h) => h.day === d) ?
|
||||||
<Tooltip
|
total / 60 / 60 >= 3.5 ?
|
||||||
multiline
|
<Tooltip
|
||||||
label={
|
multiline
|
||||||
<div key={d}>
|
label={
|
||||||
{`Total: ${(total / 60 / 60).toFixed(1)}h`}
|
<div key={d}>
|
||||||
{user.history
|
{`Total: ${(total / 60 / 60).toFixed(1)}h`}
|
||||||
.find((h) => h.day === d)
|
{user.history
|
||||||
?.values.map((v) => {
|
.find((h) => h.day === d)
|
||||||
return (
|
?.values.map((v) => {
|
||||||
<Box
|
return (
|
||||||
style={{
|
<Box
|
||||||
display: 'flex',
|
style={{
|
||||||
alignItems: 'center',
|
display: 'flex',
|
||||||
justifyContent: 'space-between',
|
alignItems: 'center',
|
||||||
}}
|
justifyContent: 'space-between',
|
||||||
>
|
}}
|
||||||
<p>{v.status + ': ' + v.time_string}</p>{' '}
|
>
|
||||||
{v.image && (
|
<p>{v.status + ': ' + v.time_string}</p>{' '}
|
||||||
<Image
|
{v.image && (
|
||||||
w={100}
|
<Image
|
||||||
h={100}
|
w={100}
|
||||||
src={
|
h={100}
|
||||||
import.meta.env.VITE_BACKEND_URL.includes(
|
src={
|
||||||
'local',
|
import.meta.env.VITE_BACKEND_URL.includes(
|
||||||
)
|
'local',
|
||||||
? import.meta.env
|
)
|
||||||
|
? import.meta.env
|
||||||
.VITE_BACKEND_URL +
|
.VITE_BACKEND_URL +
|
||||||
'storage/' +
|
'storage/' +
|
||||||
v.image
|
v.image
|
||||||
: import.meta.env
|
: import.meta.env
|
||||||
.VITE_BACKEND_URL +
|
.VITE_BACKEND_URL +
|
||||||
'image/storage/' +
|
'image/storage/' +
|
||||||
v.image
|
v.image
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</Box>
|
</Box>
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<IconCheck
|
<IconCheck
|
||||||
size={20}
|
size={20}
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: 'orange',
|
backgroundColor: 'orange',
|
||||||
color: 'white',
|
color: 'white',
|
||||||
borderRadius: '5px',
|
borderRadius: '5px',
|
||||||
padding: '2px',
|
padding: '2px',
|
||||||
fontWeight: 700,
|
fontWeight: 700,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
) : total >= 7 ? (
|
: <Tooltip
|
||||||
<Tooltip
|
multiline
|
||||||
multiline
|
label={
|
||||||
label={
|
<div key={d}>
|
||||||
<div>
|
{`Total: ${(total / 60 / 60).toFixed(1)}h`}
|
||||||
{`Total: ${(total / 60 / 60).toFixed(1)}h`}
|
{user.history
|
||||||
{user.history
|
.find((h) => h.day === d)
|
||||||
.find((h) => h.day === d)
|
?.values.map((v) => {
|
||||||
?.values.map((v) => {
|
return (
|
||||||
return (
|
<Box
|
||||||
<Box
|
style={{
|
||||||
style={{
|
display: 'flex',
|
||||||
display: 'flex',
|
alignItems: 'center',
|
||||||
alignItems: 'center',
|
justifyContent: 'space-between',
|
||||||
justifyContent: 'space-between',
|
}}
|
||||||
}}
|
>
|
||||||
>
|
<p>{v.status + ': ' + v.time_string}</p>{' '}
|
||||||
<p>{v.status + ': ' + v.time_string}</p>{' '}
|
{v.image && (
|
||||||
{v.image && (
|
<Image
|
||||||
<Image
|
w={100}
|
||||||
w={100}
|
h={100}
|
||||||
h={100}
|
src={
|
||||||
src={
|
import.meta.env.VITE_BACKEND_URL.includes(
|
||||||
import.meta.env.VITE_BACKEND_URL.includes(
|
'local',
|
||||||
'local',
|
)
|
||||||
)
|
? import.meta.env
|
||||||
? import.meta.env
|
|
||||||
.VITE_BACKEND_URL +
|
.VITE_BACKEND_URL +
|
||||||
'storage/' +
|
'storage/' +
|
||||||
v.image
|
v.image
|
||||||
: import.meta.env
|
: import.meta.env
|
||||||
.VITE_BACKEND_URL +
|
.VITE_BACKEND_URL +
|
||||||
'image/storage/' +
|
'image/storage/' +
|
||||||
v.image
|
v.image
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</Box>
|
</Box>
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<IconCheck
|
<IconExclamationMark
|
||||||
|
size={20}
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'orange',
|
||||||
|
color: 'white',
|
||||||
|
borderRadius: '5px',
|
||||||
|
padding: '2px',
|
||||||
|
fontWeight: 700,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
|
: total >= 7 ? (
|
||||||
|
<Tooltip
|
||||||
|
multiline
|
||||||
|
label={
|
||||||
|
<div>
|
||||||
|
{`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>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<IconCheck
|
||||||
|
size={20}
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'green',
|
||||||
|
color: 'white',
|
||||||
|
borderRadius: '5px',
|
||||||
|
padding: '2px',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
|
) : (
|
||||||
|
parseInt(moment(Date.now()).format('DD')) >= d &&
|
||||||
|
<IconX
|
||||||
size={20}
|
size={20}
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: 'green',
|
backgroundColor: '#ff4646',
|
||||||
color: 'white',
|
color: 'white',
|
||||||
borderRadius: '5px',
|
borderRadius: '5px',
|
||||||
padding: '2px',
|
padding: '2px',
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</Tooltip>
|
)}
|
||||||
) : (
|
|
||||||
<IconX
|
|
||||||
size={20}
|
|
||||||
style={{
|
|
||||||
backgroundColor: '#ff4646',
|
|
||||||
color: 'white',
|
|
||||||
borderRadius: '5px',
|
|
||||||
padding: '2px',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</Table.Td>
|
</Table.Td>
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
|
|
|
||||||
1748
composer-setup.php
1748
composer-setup.php
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue