joseph
/
ManagementSystem
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update timekeeping

This commit is contained in:
JOSEPH LE 2024-06-07 14:33:23 +07:00
parent bab6052e82
commit 6a9a9f4cee
1 changed files with 56 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
FRONTEND/src/pages/Timekeeping/Timekeeping.tsx
View File

@ -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,10 +164,7 @@ const Timekeeping = () => {
<Table.Tbody>
{data.map((user) => {
return (
<Table.Tr
key={user.user.id}
className={classes.tableTr}
>
<Table.Tr key={user.user.id} className={classes.tableTr}>
<Table.Td>{user.user.name}</Table.Td>
{daysInMonth.map((d) => {
var total =
@ -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',
}}
/>
)}