feeat(attendance): menambahkan moment.js untuk menghitung realtime presensi

app/Http/Controllers/Admin/Manage/AttendanceController.php

@@ -26,23 +26,35 @@ public function index(Request $request): View|JsonResponse
 
             return DataTables::eloquent($attendances)
                 ->addIndexColumn()
+                ->editColumn('date', function ($item) {
+                    return formatDateIndo($item->created_at);
+                })
                 ->addColumn('working_time', function ($item) {
                     if ($item->check_in) {
                         $checkIn = Carbon::parse($item->check_in);
 
-                        $checkOut = $item->check_out ? Carbon::parse($item->check_out) : Carbon::today()->endOfDay(); // Akhir hari: 23:59
+                        if (! $item->check_out && $item->created_at->isToday()) {
+                            $checkOut = now();
+                        } elseif (! $item->check_out && ! $item->created_at->isToday()) {
+                            $checkOut = $checkIn->copy()->endOfDay();
+                        } else {
+                            $checkOut = Carbon::parse($item->check_out);
+                        }
 
                         $diff = $checkIn->diff($checkOut);
 
                         if ($diff->h > 0) {
-                            return $diff->format('%h jam %i menit');
+                            return $diff->format('%h jam %i menit %s detik');
                         } else {
-                            return $diff->format('%i menit');
+                            return $diff->format('%i menit %s detik');
                         }
                     }
 
                     return '-';
                 })
+                ->editColumn('check_out', function ($item) {
+                    return $item->check_out ?: '-';
+                })
                 ->addColumn('check_in_image', function ($item) {
                     if ($item->check_in) {
                         $imageUrl = Storage::url("attendances/{$item->attachments->first()->formatted_attachment}");

public/assets/admin/js/datatable/custom-table/attendance.js

@@ -4,9 +4,68 @@ window.columns = [
         orderable: false,
         searchable: false
     },
+    { data: 'date' },
     { data: 'check_in' },
     { data: 'check_in_image' },
     { data: 'check_out' },
     { data: 'check_out_image' },
     { data: 'working_time' },
-]
+];
+
+function updateWorkingTime() {
+    const today = moment().format('YYYY-MM-DD');
+
+    $('table tbody tr').each(function() {
+        const dateCell = $(this).find('td:nth-child(2)');
+        const checkOutCell = $(this).find('td:nth-child(5)');
+        const workingTimeCell = $(this).find('td:nth-child(7)');
+
+        const rowDate = moment(dateCell.text(), 'ddd, DD MMM YYYY').format('YYYY-MM-DD');
+        const checkOutText = checkOutCell.text().trim();
+
+        // Cek apakah baris adalah hari ini dan check_out masih '-'
+        if (rowDate === today && checkOutText === '-') {
+            const checkInCell = $(this).find('td:nth-child(3)');
+            const checkInTime = checkInCell.text().trim();
+
+            if (checkInTime && checkInTime !== '-') {
+                const checkIn = moment(checkInTime, 'HH:mm:ss');
+                const now = moment();
+
+                const duration = moment.duration(now.diff(checkIn));
+
+                const hours = duration.hours();
+                const minutes = duration.minutes();
+                const seconds = duration.seconds();
+
+                let formattedTime = '';
+                if (hours > 0) {
+                    formattedTime = `${hours} jam ${minutes} menit ${seconds} detik`;
+                } else if (minutes > 0) {
+                    formattedTime = `${minutes} menit ${seconds} detik`;
+                } else {
+                    formattedTime = `${seconds} detik`;
+                }
+
+                workingTimeCell.text(formattedTime);
+            }
+        }
+    });
+}
+
+// Panggil fungsi updateWorkingTime setiap detik
+$(document).ready(function() {
+    // Pastikan moment.js sudah diinclude
+    if (typeof moment !== 'undefined') {
+        // Set moment locale ke Indonesia
+        moment.locale('id');
+
+        // Update pertama kali saat halaman dimuat
+        updateWorkingTime();
+
+        // Set interval untuk update setiap detik
+        setInterval(updateWorkingTime, 1000);
+    } else {
+        console.error('moment.js library tidak ditemukan');
+    }
+});

resources/views/pages/admin/manage/attendances.blade.php

@@ -120,6 +120,7 @@
                                 <thead>
                                     <tr>
                                         <th>No</th>
+                                        <th>Tanggal</th>
                                         <th>Masuk</th>
                                         <th>Foto</th>
                                         <th>Pulang</th>
@@ -142,5 +143,7 @@
     <script src="{{ asset('assets/admin/js/datatable/custom-table/attendance.js?ver=1.0.0') }}"></script>
     <script src="{{ asset('assets/admin/js/datatable/server-side.js?ver=1.0.0') }}"></script>
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/locale/id.min.js"></script>
     <script src="{{ asset('assets/admin/js/custom/attendance.js?ver=1.0.0') }}"></script>
 @endsection