dst/store
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: display work duration in attendance calendar events

Browse Source
This commit is contained in:
Yoga Pangestu 2026-06-14 15:07:36 +07:00
parent c140192453
commit bdeb8cc59f
1 changed files with 25 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
resources/js/components/admin/hr/attendances/AttendanceCalendar.vue
View File

@ -71,11 +71,15 @@ function buildEventTitle(attendance: AttendanceListItem): string {
? `${attendance.check_in_at_formatted} – ${attendance.check_out_at_formatted}` ? `${attendance.check_in_at_formatted} – ${attendance.check_out_at_formatted}`
: `${attendance.check_in_at_formatted} (belum pulang)`; : `${attendance.check_in_at_formatted} (belum pulang)`;
const duration = attendance.work_duration_formatted
? ` (${attendance.work_duration_formatted})`
: '';
if (props.canManageAll && attendance.employee_name) { if (props.canManageAll && attendance.employee_name) {
return `${attendance.employee_name}: ${timeRange}`; return `${attendance.employee_name}: ${timeRange}${duration}`;
} }
return timeRange; return `${timeRange}${duration}`;
} }
function renderEventContent(arg: EventContentArg) { function renderEventContent(arg: EventContentArg) {
@ -90,6 +94,10 @@ function renderEventContent(arg: EventContentArg) {
? `${attendance.check_in_at_formatted} – ${attendance.check_out_at_formatted}` ? `${attendance.check_in_at_formatted} – ${attendance.check_out_at_formatted}`
: `${attendance.check_in_at_formatted}`; : `${attendance.check_in_at_formatted}`;
const durationMarkup = attendance.work_duration_formatted
? `<span class="attendance-event__duration">${escapeHtml(attendance.work_duration_formatted)}</span>`
: '';
const nameMarkup = props.canManageAll && attendance.employee_name const nameMarkup = props.canManageAll && attendance.employee_name
? `<span class="attendance-event__name">${escapeHtml(attendance.employee_name)}</span>` ? `<span class="attendance-event__name">${escapeHtml(attendance.employee_name)}</span>`
: ''; : '';
@ -99,6 +107,7 @@ function renderEventContent(arg: EventContentArg) {
<div class="attendance-event__inner"> <div class="attendance-event__inner">
${nameMarkup} ${nameMarkup}
<span class="attendance-event__time">${escapeHtml(timeLabel)}</span> <span class="attendance-event__time">${escapeHtml(timeLabel)}</span>
${durationMarkup}
</div> </div>
`, `,
}; };
@ -413,6 +422,12 @@ watch(
opacity: 0.95; opacity: 0.95;
} }
.attendance-calendar .fc .attendance-event__duration {
font-size: 0.6875rem;
font-weight: 500;
opacity: 0.85;
}
.attendance-calendar .fc .attendance-event__status { .attendance-calendar .fc .attendance-event__status {
align-self: flex-start; align-self: flex-start;
background: color-mix(in oklch, currentColor 12%, transparent); background: color-mix(in oklch, currentColor 12%, transparent);
@ -425,14 +440,16 @@ watch(
} }
.attendance-calendar .fc .attendance-event--complete .attendance-event__time, .attendance-calendar .fc .attendance-event--complete .attendance-event__time,
.attendance-calendar .fc .attendance-event--complete .attendance-event__name { .attendance-calendar .fc .attendance-event--complete .attendance-event__name,
.attendance-calendar .fc .attendance-event--complete .attendance-event__duration {
color: oklch(0.99 0 0); color: oklch(0.99 0 0);
opacity: 0.95; opacity: 0.95;
} }
.attendance-calendar .fc .attendance-event--active .attendance-event__time, .attendance-calendar .fc .attendance-event--active .attendance-event__time,
.attendance-calendar .fc .attendance-event--active .attendance-event__name, .attendance-calendar .fc .attendance-event--active .attendance-event__name,
.attendance-calendar .fc .attendance-event--active .attendance-event__status { .attendance-calendar .fc .attendance-event--active .attendance-event__status,
.attendance-calendar .fc .attendance-event--active .attendance-event__duration {
color: var(--primary-foreground); color: var(--primary-foreground);
opacity: 0.95; opacity: 0.95;
} }
@ -452,7 +469,8 @@ watch(
.dark .attendance-calendar .fc .attendance-event--active .attendance-event__time, .dark .attendance-calendar .fc .attendance-event--active .attendance-event__time,
.dark .attendance-calendar .fc .attendance-event--active .attendance-event__name, .dark .attendance-calendar .fc .attendance-event--active .attendance-event__name,
.dark .attendance-calendar .fc .attendance-event--active .attendance-event__status { .dark .attendance-calendar .fc .attendance-event--active .attendance-event__status,
.dark .attendance-calendar .fc .attendance-event--active .attendance-event__duration {
color: var(--primary-foreground); color: var(--primary-foreground);
} }
@ -462,7 +480,8 @@ watch(
} }
.attendance-calendar .fc .attendance-event__name, .attendance-calendar .fc .attendance-event__name,
.attendance-calendar .fc .attendance-event__time { .attendance-calendar .fc .attendance-event__time,
.attendance-calendar .fc .attendance-event__duration {
font-size: 0.625rem; font-size: 0.625rem;
} }
} }