From bb8dd68f15ec4340b68da5d4aef0ce45fe982e67 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Fri, 19 Jun 2026 16:53:11 +0700
Subject: [PATCH] feat: add AttendanceMap component and integrate it into
 AttendanceDetailDialog for displaying attendance locations on a map

---
 .../hr/attendances/AttendanceDetailDialog.vue | 16 +++-
 .../admin/hr/attendances/AttendanceMap.vue    | 95 +++++++++++++++++++
 resources/js/types/attendance.ts              |  4 +
 3 files changed, 114 insertions(+), 1 deletion(-)
 create mode 100644 resources/js/components/admin/hr/attendances/AttendanceMap.vue

diff --git a/resources/js/components/admin/hr/attendances/AttendanceDetailDialog.vue b/resources/js/components/admin/hr/attendances/AttendanceDetailDialog.vue
index e0b6b4b..e7779be 100644
--- a/resources/js/components/admin/hr/attendances/AttendanceDetailDialog.vue
+++ b/resources/js/components/admin/hr/attendances/AttendanceDetailDialog.vue
@@ -3,6 +3,7 @@ import { router } from '@inertiajs/vue3';
 import { Trash2 } from '@lucide/vue';
 import { ref } from 'vue';
 import { toast } from 'vue-sonner';
+import AttendanceMap from '@/components/admin/hr/attendances/AttendanceMap.vue';
 import AttendancePhotoCell from '@/components/admin/hr/attendances/attendance-photo-cell.vue';
 import ConfirmDialog from '@/components/ConfirmDialog.vue';
 import { Button } from '@/components/ui/button';
@@ -52,7 +53,7 @@ function destroyAttendance() {
 
 <template>
     <Dialog v-model:open="open">
-        <DialogContent class="sm:max-w-lg">
+        <DialogContent class="sm:max-w-xl">
             <DialogHeader>
                 <DialogTitle>Detail Presensi</DialogTitle>
                 <DialogDescription v-if="attendance">
@@ -93,6 +94,19 @@ function destroyAttendance() {
                     </div>
                 </dl>
 
+                <AttendanceMap
+                    :check-in-lat="attendance.check_in_latitude"
+                    :check-in-lng="attendance.check_in_longitude"
+                    :check-out-lat="attendance.check_out_latitude"
+                    :check-out-lng="attendance.check_out_longitude"
+                    :check-in-location-tag="attendance.check_in_location_tag"
+                    :check-out-location-tag="attendance.check_out_location_tag"
+                    :check-in-at-formatted="attendance.check_in_at_formatted"
+                    :check-out-at-formatted="attendance.check_out_at_formatted"
+                    :attendance-date-formatted="attendance.attendance_date_formatted"
+                    :employee-name="attendance.employee_name"
+                />
+
                 <div>
                     <p class="text-muted-foreground mb-2 text-sm">
                         Foto
diff --git a/resources/js/components/admin/hr/attendances/AttendanceMap.vue b/resources/js/components/admin/hr/attendances/AttendanceMap.vue
new file mode 100644
index 0000000..61e1325
--- /dev/null
+++ b/resources/js/components/admin/hr/attendances/AttendanceMap.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+    checkInLat: number | null;
+    checkInLng: number | null;
+    checkOutLat: number | null;
+    checkOutLng: number | null;
+    checkInLocationTag: string | null;
+    checkOutLocationTag: string | null;
+    checkInAtFormatted: string;
+    checkOutAtFormatted: string | null;
+    attendanceDateFormatted: string;
+    employeeName: string | null;
+}>();
+
+const hasCoordinates = computed(() => props.checkInLat != null && props.checkInLng != null);
+
+const checkInSrc = computed(() => {
+    if (props.checkInLat == null || props.checkInLng == null) return '';
+    return `https://www.google.com/maps?q=${props.checkInLat},${props.checkInLng}&z=18&t=k&output=embed`;
+});
+
+const checkOutSrc = computed(() => {
+    if (props.checkOutLat == null || props.checkOutLng == null) return '';
+    return `https://www.google.com/maps?q=${props.checkOutLat},${props.checkOutLng}&z=18&t=k&output=embed`;
+});
+
+function escapeHtml(value: string): string {
+    return value
+        .replaceAll('&', '&amp;')
+        .replaceAll('<', '&lt;')
+        .replaceAll('>', '&gt;')
+        .replaceAll('"', '&quot;')
+        .replaceAll("'", '&#39;');
+}
+
+function buildLabel(
+    title: string,
+    color: string,
+    time: string,
+    locationTag: string | null,
+    lat: number | null,
+    lng: number | null,
+): string {
+    const lines: string[] = [];
+    lines.push(`<strong style="color:${color}">${title}</strong>`);
+    if (props.employeeName) lines.push(`<span>Karyawan: <b>${escapeHtml(props.employeeName)}</b></span>`);
+    lines.push(`<span>Tanggal: ${escapeHtml(props.attendanceDateFormatted)}</span>`);
+    lines.push(`<span>Jam: <b>${escapeHtml(time)}</b></span>`);
+    lines.push(`<span>Lokasi: ${escapeHtml(locationTag ?? '-')}</span>`);
+    lines.push(`<span style="font-family:monospace;font-size:11px">Koordinat: ${lat}, ${lng}</span>`);
+    return lines.join('<br>');
+}
+</script>
+
+<template>
+    <div v-if="hasCoordinates" class="space-y-3">
+        <p class="text-muted-foreground text-sm">
+            Lokasi Presensi
+        </p>
+
+        <!-- Check-in map -->
+        <div class="space-y-1.5">
+            <div
+                class="text-xs font-medium"
+                v-html="buildLabel('Masuk', '#16a34a', checkInAtFormatted, checkInLocationTag, checkInLat, checkInLng)"
+            />
+            <iframe
+                :src="checkInSrc"
+                class="h-56 w-full overflow-hidden rounded-lg"
+                style="border: 0"
+                allowfullscreen
+                loading="lazy"
+                referrerpolicy="no-referrer-when-downgrade"
+            />
+        </div>
+
+        <!-- Check-out map -->
+        <div v-if="checkOutLat != null && checkOutLng != null" class="space-y-1.5">
+            <div
+                class="text-xs font-medium"
+                v-html="buildLabel('Pulang', '#dc2626', checkOutAtFormatted ?? '-', checkOutLocationTag, checkOutLat, checkOutLng)"
+            />
+            <iframe
+                :src="checkOutSrc"
+                class="h-56 w-full overflow-hidden rounded-lg"
+                style="border: 0"
+                allowfullscreen
+                loading="lazy"
+                referrerpolicy="no-referrer-when-downgrade"
+            />
+        </div>
+    </div>
+</template>
diff --git a/resources/js/types/attendance.ts b/resources/js/types/attendance.ts
index ddccfe8..129e0c0 100644
--- a/resources/js/types/attendance.ts
+++ b/resources/js/types/attendance.ts
@@ -12,6 +12,10 @@ export type AttendanceListItem = {
     check_out_photo_url: string | null;
     check_in_location_tag: string | null;
     check_out_location_tag: string | null;
+    check_in_latitude: number | null;
+    check_in_longitude: number | null;
+    check_out_latitude: number | null;
+    check_out_longitude: number | null;
     work_duration_minutes: number | null;
     work_duration_formatted: string | null;
 };