feat: enhance attendance management with employee-specific data and location tracking

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

@@ -22,12 +22,14 @@ public function index(Request $request): Response
     {
         $year = $request->integer('year', now()->year);
         $month = $request->integer('month', now()->month);
-
         $hrSettings = app(HRSettings::class);
+        $user = auth()->user();
+        $isAdmin = $user->hasAnyRole(['developer', 'owner', 'direktur']);
 
+        if ($isAdmin) {
             return Inertia::render('admin/hr/attendance/index', [
                 'attendances' => $this->service->getByMonth($year, $month),
-            'todayAttendance' => $this->service->getToday(),
+                'todayAttendance' => null,
                 'currentYear' => $year,
                 'currentMonth' => $month,
                 'monthStats' => $this->service->getMonthStats($year, $month),
@@ -35,6 +37,23 @@ public function index(Request $request): Response
                     'scheduled_check_in_time' => $hrSettings->scheduled_check_in_time,
                     'scheduled_check_out_time' => $hrSettings->scheduled_check_out_time,
                 ],
+                'isAdmin' => true,
+            ]);
+        }
+
+        $employeeId = $user->employee?->id;
+
+        return Inertia::render('admin/hr/attendance/index', [
+            'attendances' => $this->service->getByMonth($year, $month, $employeeId),
+            'todayAttendance' => $this->service->getToday(),
+            'currentYear' => $year,
+            'currentMonth' => $month,
+            'monthStats' => $this->service->getMonthStats($year, $month, $employeeId),
+            'hrSettings' => [
+                'scheduled_check_in_time' => $hrSettings->scheduled_check_in_time,
+                'scheduled_check_out_time' => $hrSettings->scheduled_check_out_time,
+            ],
+            'isAdmin' => false,
         ]);
     }
 

app/Services/Admin/HR/AttendanceService.php

@@ -3,6 +3,7 @@
 namespace App\Services\Admin\HR;
 
 use App\Models\Attendance;
+use App\Models\Employee;
 use App\Models\LeaveRequest;
 use App\Services\Concerns\RegistersMedia;
 use App\Services\NotificationService;
@@ -27,11 +28,12 @@ public function getAll(): Collection
             ->map(fn (Attendance $attendance) => $this->formatAttendance($attendance));
     }
 
-    public function getByMonth(int $year, int $month): Collection
+    public function getByMonth(int $year, int $month, ?int $employeeId = null): Collection
     {
         return Attendance::with(['employee.user.userProfile', 'media'])
             ->whereYear('attendance_date', $year)
             ->whereMonth('attendance_date', $month)
+            ->when($employeeId, fn ($q) => $q->where('employee_id', $employeeId))
             ->get()
             ->map(fn (Attendance $attendance) => $this->formatAttendance($attendance));
     }
@@ -51,7 +53,14 @@ public function getToday(): ?array
         return $this->getByDate(now()->toDateString());
     }
 
-    public function getMonthStats(int $year, int $month): array
+    public function getAllEmployees(): Collection
+    {
+        return Employee::with(['user.userProfile', 'user.roles'])
+            ->whereHas('user', fn ($q) => $q->where('is_active', true))
+            ->get();
+    }
+
+    public function getMonthStats(int $year, int $month, ?int $employeeId = null): array
     {
         $startOfMonth = Carbon::createFromDate($year, $month, 1)->startOfMonth();
         $endOfMonth = $startOfMonth->copy()->endOfMonth();
@@ -65,14 +74,20 @@ public function getMonthStats(int $year, int $month): array
             $current->addDay();
         }
 
-        $attendanceCount = Attendance::whereYear('attendance_date', $year)
+        $attendanceQuery = Attendance::whereYear('attendance_date', $year)
-            ->whereMonth('attendance_date', $month)
+            ->whereMonth('attendance_date', $month);
-            ->count();
+        if ($employeeId) {
+            $attendanceQuery->where('employee_id', $employeeId);
+        }
+        $attendanceCount = $attendanceQuery->count();
 
-        $leaveDays = LeaveRequest::approved()
+        $leaveQuery = LeaveRequest::approved()
             ->where('start_date', '<=', $endOfMonth)
-            ->where('end_date', '>=', $startOfMonth)
+            ->where('end_date', '>=', $startOfMonth);
-            ->get()
+        if ($employeeId) {
+            $leaveQuery->where('employee_id', $employeeId);
+        }
+        $leaveDays = $leaveQuery->get()
             ->reduce(function ($carry, $leave) use ($startOfMonth, $endOfMonth) {
                 $leaveStart = max($leave->start_date->timestamp, $startOfMonth->timestamp);
                 $leaveEnd = min($leave->end_date->timestamp, $endOfMonth->timestamp);
@@ -154,6 +169,7 @@ public function checkOut(Attendance $attendance, array $data): Attendance
     private function formatAttendance(Attendance $attendance): array
     {
         $toArray = $attendance->toArray();
+        $toArray['employee_name'] = $attendance->employee?->user?->userProfile?->full_name ?? '-';
 
         if (is_null($toArray['work_duration_minutes']) && $attendance->check_in_at) {
             $checkIn = Carbon::parse($attendance->check_in_at);

resources/js/components/location-map.tsx

@@ -1,7 +1,3 @@
-import L from 'leaflet';
-import { useEffect, useRef } from 'react';
-import 'leaflet/dist/leaflet.css';
-
 interface LocationMapProps {
     latitude: number;
     longitude: number;
@@ -13,52 +9,18 @@ export function LocationMap({
     latitude,
     longitude,
     height = '250px',
-    zoom = 15,
+    zoom = 17,
 }: LocationMapProps) {
-    const mapRef = useRef<HTMLDivElement>(null);
+    const src = `https://maps.google.com/maps?q=${latitude},${longitude}&z=${zoom}&t=k&output=embed`;
-    const mapInstanceRef = useRef<L.Map | null>(null);
-
-    useEffect(() => {
-        if (!mapRef.current || mapInstanceRef.current) {
-return;
-}
-
-        const map = L.map(mapRef.current, {
-            center: [latitude, longitude],
-            zoom,
-            zoomControl: false,
-            attributionControl: true,
-        });
-
-        L.control.zoom({ position: 'topright' }).addTo(map);
-
-        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-            attribution:
-                '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-        }).addTo(map);
-
-        const icon = L.divIcon({
-            html: `<div style="background: #ef4444; width: 24px; height: 24px; border-radius: 50%; border: 3px solid white; box-shadow: 0 2px 6px rgba(0,0,0,0.3);"></div>`,
-            className: '',
-            iconSize: [24, 24],
-            iconAnchor: [12, 12],
-        });
-
-        L.marker([latitude, longitude], { icon }).addTo(map);
-
-        mapInstanceRef.current = map;
-
-        return () => {
-            map.remove();
-            mapInstanceRef.current = null;
-        };
-    }, [latitude, longitude, zoom]);
 
     return (
-        <div
+        <iframe
-            ref={mapRef}
+            src={src}
-            style={{ height, width: '100%' }}
+            style={{ height, width: '100%', border: 0 }}
             className="rounded-lg"
+            loading="lazy"
+            referrerPolicy="no-referrer-when-downgrade"
+            title="Lokasi Presensi"
         />
     );
 }

resources/js/pages/admin/hr/attendance/index.tsx

@@ -18,6 +18,7 @@ import { toast } from 'sonner';
 import { CameraCapture } from '@/components/camera-capture';
 import { LocationMap } from '@/components/location-map';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import {
@@ -44,6 +45,7 @@ type Attendance = {
     check_out_latitude: number | null;
     check_out_longitude: number | null;
     work_duration_minutes: number | null;
+    employee_name: string;
 };
 
 type MonthStats = {
@@ -58,11 +60,12 @@ type Props = {
     todayAttendance: Attendance | null;
     currentYear: number;
     currentMonth: number;
-    monthStats: MonthStats;
+    monthStats: MonthStats | null;
     hrSettings: {
         scheduled_check_in_time: string;
         scheduled_check_out_time: string;
     };
+    isAdmin: boolean;
 };
 
 const WEEKDAYS = ['Min', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab'];
@@ -83,16 +86,6 @@ function isSameDay(d1: Date, d2: Date): boolean {
     );
 }
 
-function checkIsToday(date: Date): boolean {
-    const t = new Date();
-
-    return (
-        date.getDate() === t.getDate() &&
-        date.getMonth() === t.getMonth() &&
-        date.getFullYear() === t.getFullYear()
-    );
-}
-
 function isWeekend(date: Date): boolean {
     const day = date.getDay();
 
@@ -105,8 +98,8 @@ function isLate(
     officeMinute: number,
 ): boolean {
     if (!checkInAt) {
-return false;
+        return false;
-}
+    }
 
     const d = new Date(checkInAt);
     const h = d.getHours();
@@ -121,8 +114,8 @@ function getLateMinutes(
     officeMinute: number,
 ): number {
     if (!checkInAt || !isLate(checkInAt, officeHour, officeMinute)) {
-return 0;
+        return 0;
-}
+    }
 
     const d = new Date(checkInAt);
     const officeStart = new Date(d);
@@ -133,15 +126,15 @@ return 0;
 
 function formatMinutes(minutes: number | null): string {
     if (!minutes) {
-return '-';
+        return '-';
-}
+    }
 
     const hours = Math.floor(minutes / 60);
     const mins = Math.floor(minutes % 60);
 
     if (mins === 0) {
-return `${hours} jam`;
+        return `${hours} jam`;
-}
+    }
 
     return `${hours} jam ${mins} menit`;
 }
@@ -153,6 +146,7 @@ export default function AttendanceIndex({
     currentMonth,
     monthStats,
     hrSettings,
+    isAdmin,
 }: Props) {
     const [officeHour, officeMinute] = hrSettings.scheduled_check_in_time
         .split(':')
@@ -173,21 +167,17 @@ export default function AttendanceIndex({
     const viewYear = viewDate.getFullYear();
     const viewMonth = viewDate.getMonth() + 1;
 
-    const attendanceDates = useMemo(() => {
+    const attendanceByDate = useMemo(() => {
-        const dates = new Map<string, Attendance>();
+        const map = new Map<string, Attendance[]>();
         attendances.forEach((att) => {
-            dates.set(att.attendance_date, att);
+            const existing = map.get(att.attendance_date) ?? [];
+            existing.push(att);
+            map.set(att.attendance_date, existing);
         });
 
-        return dates;
+        return map;
     }, [attendances]);
 
-    const selectedAttendance = useMemo(() => {
-        const dateStr = format(selectedDate, 'yyyy-MM-dd');
-
-        return attendanceDates.get(dateStr) ?? null;
-    }, [selectedDate, attendanceDates]);
-
     const calendarDays = useMemo(() => {
         const daysInMonth = getDaysInMonth(viewYear, viewMonth);
         const firstDay = getFirstDayOfMonth(viewYear, viewMonth);
@@ -232,8 +222,51 @@ export default function AttendanceIndex({
         return days;
     }, [viewYear, viewMonth]);
 
-    const handlePrevMonth = () => setViewDate((d) => subMonths(d, 1));
+    const handlePrevMonth = () => {
-    const handleNextMonth = () => setViewDate((d) => addMonths(d, 1));
+        const newDate = subMonths(viewDate, 1);
+        setViewDate(newDate);
+
+        if (!isAdmin) {
+            router.get(
+                attendanceIndex.url(),
+                {
+                    year: newDate.getFullYear(),
+                    month: newDate.getMonth() + 1,
+                },
+                { preserveState: true, preserveScroll: true },
+            );
+        }
+    };
+
+    const handleNextMonth = () => {
+        const newDate = addMonths(viewDate, 1);
+        setViewDate(newDate);
+
+        if (!isAdmin) {
+            router.get(
+                attendanceIndex.url(),
+                {
+                    year: newDate.getFullYear(),
+                    month: newDate.getMonth() + 1,
+                },
+                { preserveState: true, preserveScroll: true },
+            );
+        }
+    };
+
+    const handleGoToToday = () => {
+        const now = new Date();
+        setViewDate(now);
+        setSelectedDate(now);
+
+        if (!isAdmin) {
+            router.get(
+                attendanceIndex.url(),
+                { year: now.getFullYear(), month: now.getMonth() + 1 },
+                { preserveState: true, preserveScroll: true },
+            );
+        }
+    };
 
     const handleCameraCapture = (dataUrl: string) => {
         setShowCamera(false);
@@ -290,8 +323,8 @@ export default function AttendanceIndex({
 
     function formatTime(dateStr: string | null): string {
         if (!dateStr) {
-return '-';
+            return '-';
-}
+        }
 
         return format(new Date(dateStr), 'HH:mm');
     }
@@ -305,14 +338,14 @@ return '-';
         <>
             <Head title="Presensi" />
 
-            <div className="flex h-full flex-1 flex-col gap-6 overflow-x-auto p-4 md:p-6">
+            <div className="flex min-h-full flex-1 flex-col gap-6 overflow-auto p-4 md:p-6">
                 <div>
                     <h2 className="text-2xl font-semibold tracking-tight">
                         Presensi
                     </h2>
                 </div>
 
-                {/* Alert Status Presensi */}
+                {!isAdmin && (
                     <Alert>
                         <CalendarCheck className="h-4 w-4" />
                         <AlertTitle>Presensi Hari Ini</AlertTitle>
@@ -396,8 +429,9 @@ return '-';
                             </div>
                         </AlertDescription>
                     </Alert>
+                )}
 
-                {/* Summary Stats */}
+                {monthStats && (
                     <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
                         <Card>
                             <CardContent className="flex items-center gap-3 py-3">
@@ -460,12 +494,12 @@ return '-';
                             </CardContent>
                         </Card>
                     </div>
+                )}
 
                 <Card
                     className="overflow-hidden"
                     style={{ '--card-spacing': '0px' } as React.CSSProperties}
                 >
-                    {/* Calendar Header */}
                     <div className="flex items-center justify-between border-b px-6 py-4">
                         <div className="flex items-center gap-3">
                             <div className="flex flex-col items-center overflow-hidden rounded-lg ring-1 ring-border">
@@ -503,10 +537,7 @@ return '-';
                                 variant="ghost"
                                 size="sm"
                                 className="h-8 px-3 text-xs font-medium"
-                                onClick={() => {
+                                onClick={handleGoToToday}
-                                    setViewDate(new Date());
-                                    setSelectedDate(new Date());
-                                }}
                             >
                                 Hari ini
                             </Button>
@@ -521,7 +552,6 @@ return '-';
                         </div>
                     </div>
 
-                    {/* Weekday Headers */}
                     <div className="grid grid-cols-7 border-b">
                         {WEEKDAYS.map((day) => (
                             <div
@@ -533,11 +563,10 @@ return '-';
                         ))}
                     </div>
 
-                    {/* Calendar Grid */}
                     <div className="grid grid-cols-7">
                         {calendarDays.map((cell, idx) => {
                             const dateStr = format(cell.date, 'yyyy-MM-dd');
-                            const attendance = attendanceDates.get(dateStr);
+                            const dayAttendances = attendanceByDate.get(dateStr) ?? [];
                             const isSelected = isSameDay(
                                 cell.date,
                                 selectedDate,
@@ -547,47 +576,33 @@ return '-';
                                 new Date(),
                             );
 
-                            const today = new Date();
+                            const todayMidnight = new Date();
-                            today.setHours(0, 0, 0, 0);
+                            todayMidnight.setHours(0, 0, 0, 0);
                             const cellDate = new Date(cell.date);
                             cellDate.setHours(0, 0, 0, 0);
 
-                            const isPastDate = cellDate < today;
+                            const isPastDate = cellDate < todayMidnight;
                             const showAbsent =
                                 cell.isCurrentMonth &&
                                 isPastDate &&
                                 !isWeekend(cell.date) &&
-                                !attendance;
+                                dayAttendances.length === 0;
-
-                            const late = attendance
-                                ? isLate(
-                                      attendance.check_in_at,
-                                      officeHour,
-                                      officeMinute,
-                                  )
-                                : false;
-                            const lateMins = attendance
-                                ? getLateMinutes(
-                                      attendance.check_in_at,
-                                      officeHour,
-                                      officeMinute,
-                                  )
-                                : 0;
 
                             return (
-                                <button
+                                <div
                                     key={idx}
                                     onClick={() => {
                                         setSelectedDate(cell.date);
-
+                                        if (!isAdmin && dayAttendances.length > 0) {
-                                        if (attendance) {
+                                            setDetailAttendance(dayAttendances[0]);
-setDetailAttendance(attendance);
+                                        }
-}
                                     }}
                                     className={`group relative flex min-h-[100px] flex-col p-2 text-left transition-colors hover:bg-muted/50 ${
                                         !cell.isCurrentMonth
                                             ? 'bg-muted/30 text-muted-foreground/50'
                                             : ''
+                                    } ${isSelected ? 'bg-muted/50' : ''} ${
+                                        !isAdmin && dayAttendances.length > 0 ? 'cursor-pointer' : ''
                                     }`}
                                     style={{
                                         borderRight: '1px solid var(--border)',
@@ -607,8 +622,51 @@ setDetailAttendance(attendance);
                                             {cell.day}
                                         </span>
                                     </div>
-                                    <div className="mt-1 flex flex-col gap-0.5">
+                                    <div className="mt-1 flex flex-col gap-0.5 overflow-hidden">
-                                        {attendance && (
+                                        {isAdmin ? (
+                                            <>
+                                                {dayAttendances.map((att) => {
+                                                    const late = isLate(
+                                                        att.check_in_at,
+                                                        officeHour,
+                                                        officeMinute,
+                                                    );
+
+                                                    return (
+                                                        <button
+                                                            key={att.id}
+                                                            onClick={(e) => {
+                                                                e.stopPropagation();
+                                                                setDetailAttendance(att);
+                                                            }}
+                                                            className="w-full"
+                                                        >
+                                                            <Badge
+                                                                variant={late ? 'destructive' : 'default'}
+                                                                className="w-full justify-center cursor-pointer truncate"
+                                                            >
+                                                                {att.employee_name}
+                                                            </Badge>
+                                                        </button>
+                                                    );
+                                                })}
+                                            </>
+                                        ) : (
+                                            <>
+                                                {dayAttendances.length > 0 && (() => {
+                                                    const att = dayAttendances[0];
+                                                    const late = isLate(
+                                                        att.check_in_at,
+                                                        officeHour,
+                                                        officeMinute,
+                                                    );
+                                                    const lateMins = getLateMinutes(
+                                                        att.check_in_at,
+                                                        officeHour,
+                                                        officeMinute,
+                                                    );
+
+                                                    return (
                                                         <>
                                                             <span
                                                                 className={`inline-flex items-center justify-center rounded-full px-1.5 py-0.5 text-[10px] font-semibold ${late ? 'bg-yellow-100 text-yellow-700' : 'bg-green-100 text-green-700'}`}
@@ -620,13 +678,13 @@ setDetailAttendance(attendance);
                                                             <span className="text-[10px] text-muted-foreground">
                                                                 Masuk :{' '}
                                                                 {formatTime(
-                                                        attendance.check_in_at,
+                                                                    att.check_in_at,
                                                                 )}
                                                             </span>
                                                             <span className="text-[10px] text-muted-foreground">
                                                                 Pulang :{' '}
                                                                 {formatTime(
-                                                        attendance.check_out_at,
+                                                                    att.check_out_at,
                                                                 )}
                                                             </span>
                                                             {late && (
@@ -641,10 +699,13 @@ setDetailAttendance(attendance);
                                                             <span className="text-[10px] text-muted-foreground">
                                                                 Jam Kerja :{' '}
                                                                 {formatMinutes(
-                                                        attendance.work_duration_minutes,
+                                                                    att.work_duration_minutes,
                                                                 )}
                                                             </span>
                                                         </>
+                                                    );
+                                                })()}
+                                            </>
                                         )}
                                         {showAbsent && (
                                             <span className="inline-flex items-center justify-center rounded-full bg-red-100 px-1.5 py-0.5 text-[10px] font-semibold text-red-700">
@@ -652,7 +713,7 @@ setDetailAttendance(attendance);
                                             </span>
                                         )}
                                     </div>
-                                </button>
+                                </div>
                             );
                         })}
                     </div>
@@ -673,6 +734,9 @@ setDetailAttendance(attendance);
                 <DialogContent className="sm:max-w-2xl">
                     <DialogHeader>
                         <DialogTitle>
+                            {isAdmin && detailAttendance?.employee_name
+                                ? `${detailAttendance.employee_name} - `
+                                : ''}
                             Detail Presensi -{' '}
                             {detailAttendance &&
                                 format(
@@ -749,9 +813,10 @@ setDetailAttendance(attendance);
                                     </div>
                                 </div>
                             </div>
+                            <div className="flex flex-col gap-4">
                                 <div className="flex flex-col gap-2">
                                     <span className="text-sm font-medium text-muted-foreground">
-                                    Lokasi Presensi
+                                        Lokasi Masuk
                                     </span>
                                     <LocationMap
                                         latitude={
@@ -763,6 +828,23 @@ setDetailAttendance(attendance);
                                         height="200px"
                                     />
                                 </div>
+                                {detailAttendance.check_out_latitude && detailAttendance.check_out_longitude && (
+                                    <div className="flex flex-col gap-2">
+                                        <span className="text-sm font-medium text-muted-foreground">
+                                            Lokasi Pulang
+                                        </span>
+                                        <LocationMap
+                                            latitude={
+                                                detailAttendance.check_out_latitude
+                                            }
+                                            longitude={
+                                                detailAttendance.check_out_longitude
+                                            }
+                                            height="200px"
+                                        />
+                                    </div>
+                                )}
+                            </div>
                         </div>
                     )}
                 </DialogContent>