From ac373240e77f40316c88f69b63b26d88f3f360b6 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Sun, 14 Jun 2026 13:55:56 +0700
Subject: [PATCH] refactor: remove sm: gap

---
 .../hr/attendances/AttendanceWebcamModal.vue  | 104 ++++++++++++------
 1 file changed, 73 insertions(+), 31 deletions(-)

diff --git a/resources/js/components/admin/hr/attendances/AttendanceWebcamModal.vue b/resources/js/components/admin/hr/attendances/AttendanceWebcamModal.vue
index 29dd82b..3e53b84 100644
--- a/resources/js/components/admin/hr/attendances/AttendanceWebcamModal.vue
+++ b/resources/js/components/admin/hr/attendances/AttendanceWebcamModal.vue
@@ -1,8 +1,4 @@
 <script setup lang="ts">
-import { useForm } from '@inertiajs/vue3';
-import { Camera, Loader2 } from '@lucide/vue';
-import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
-import { toast } from 'vue-sonner';
 import { Button } from '@/components/ui/button';
 import {
     Dialog,
@@ -14,6 +10,10 @@ import {
 import { useGeolocation } from '@/composables/useGeolocation';
 import { useWebcamCapture } from '@/composables/useWebcamCapture';
 import type { AttendanceCaptureFormData } from '@/types/attendance';
+import { useForm } from '@inertiajs/vue3';
+import { Camera, Loader2 } from '@lucide/vue';
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
+import { toast } from 'vue-sonner';
 
 const open = defineModel<boolean>('open', { default: false });
 
@@ -37,13 +37,17 @@ const form = useForm<AttendanceCaptureFormData>({
     location_tag: '',
 });
 
-const title = computed(() => (props.mode === 'check-in' ? 'Presensi Masuk' : 'Presensi Pulang'));
-const submitLabel = computed(() => (props.mode === 'check-in' ? 'Konfirmasi Masuk' : 'Konfirmasi Pulang'));
-const submitUrl = computed(() => (
+const title = computed(() =>
+    props.mode === 'check-in' ? 'Presensi Masuk' : 'Presensi Pulang',
+);
+const submitLabel = computed(() =>
+    props.mode === 'check-in' ? 'Konfirmasi Masuk' : 'Konfirmasi Pulang',
+);
+const submitUrl = computed(() =>
     props.mode === 'check-in'
         ? '/admin/hr/attendances/check-in'
-        : '/admin/hr/attendances/check-out'
-));
+        : '/admin/hr/attendances/check-out',
+);
 
 async function initializeCamera() {
     if (!videoRef.value) {
@@ -83,7 +87,10 @@ async function capturePhoto() {
 
     try {
         const position = await getCurrentPosition();
-        const locationTag = buildLocationTag(position.latitude, position.longitude);
+        const locationTag = buildLocationTag(
+            position.latitude,
+            position.longitude,
+        );
         const photo = captureWithLocationTag(videoRef.value, locationTag);
 
         stopCamera();
@@ -95,7 +102,11 @@ async function capturePhoto() {
         form.longitude = position.longitude;
         form.location_tag = locationTag;
     } catch (error) {
-        toast.error(error instanceof Error ? error.message : 'Gagal mengambil foto presensi.');
+        toast.error(
+            error instanceof Error
+                ? error.message
+                : 'Gagal mengambil foto presensi.',
+        );
     } finally {
         capturing.value = false;
     }
@@ -150,51 +161,82 @@ onBeforeUnmount(() => {
             </DialogHeader>
 
             <div class="space-y-4">
-                <p v-if="!previewPhoto" class="text-muted-foreground text-sm">
-                    Ambil foto langsung dari kamera. Upload dari galeri tidak diizinkan.
+                <p v-if="!previewPhoto" class="text-sm text-muted-foreground">
+                    Ambil foto langsung dari kamera. Upload dari galeri tidak
+                    diizinkan.
                 </p>
 
                 <div v-if="!previewPhoto" class="space-y-2">
-                    <p class="text-sm font-medium">
-                        Kamera
-                    </p>
-                    <div class="relative aspect-4/3 overflow-hidden rounded-lg border bg-muted">
-                        <video ref="videoRef" class="size-full scale-x-[-1] object-cover" autoplay muted playsinline />
+                    <p class="text-sm font-medium">Kamera</p>
+                    <div
+                        class="relative aspect-4/3 overflow-hidden rounded-lg border bg-muted"
+                    >
+                        <video
+                            ref="videoRef"
+                            class="size-full scale-x-[-1] object-cover"
+                            autoplay
+                            muted
+                            playsinline
+                        />
 
-                        <div v-if="cameraLoading"
-                            class="absolute inset-0 flex items-center justify-center bg-background/80">
-                            <Loader2 class="text-muted-foreground size-8 animate-spin" />
+                        <div
+                            v-if="cameraLoading"
+                            class="absolute inset-0 flex items-center justify-center bg-background/80"
+                        >
+                            <Loader2
+                                class="size-8 animate-spin text-muted-foreground"
+                            />
                         </div>
                     </div>
                 </div>
 
                 <div v-else class="space-y-2">
-                    <p class="text-sm font-medium">
-                        Hasil Foto
-                    </p>
-                    <div class="relative aspect-4/3 overflow-hidden rounded-lg border bg-muted">
+                    <p class="text-sm font-medium">Hasil Foto</p>
+                    <div
+                        class="relative aspect-4/3 overflow-hidden rounded-lg border bg-muted"
+                    >
                         <img :src="previewPhoto" alt="Hasil foto presensi" class="size-full object-cover" />
                     </div>
 
-                    <p class="text-muted-foreground text-xs whitespace-pre-line">
+                    <p
+                        class="text-xs whitespace-pre-line text-muted-foreground"
+                    >
                         {{ form.location_tag }}
                     </p>
                 </div>
             </div>
 
-            <DialogFooter class="gap-2 sm:gap-0">
-                <Button v-if="previewPhoto" type="button" variant="outline" @click="retakePhoto">
+            <DialogFooter>
+                <Button
+                    v-if="previewPhoto"
+                    type="button"
+                    variant="outline"
+                    @click="retakePhoto"
+                >
                     Ambil Ulang
                 </Button>
 
-                <Button v-if="!previewPhoto" type="button" :disabled="!cameraReady || capturing" @click="capturePhoto">
+                <Button
+                    v-if="!previewPhoto"
+                    type="button"
+                    :disabled="!cameraReady || capturing"
+                    @click="capturePhoto"
+                >
                     <Loader2 v-if="capturing" class="size-4 animate-spin" />
                     <Camera v-else class="size-4" />
                     Ambil Foto
                 </Button>
 
-                <Button v-else type="button" :disabled="form.processing" @click="submitAttendance">
-                    <Loader2 v-if="form.processing" class="size-4 animate-spin" />
+                <Button
+                    v-else
+                    type="button"
+                    :disabled="form.processing"
+                    @click="submitAttendance"
+                >
+                    <Loader2
+                        v-if="form.processing"
+                        class="size-4 animate-spin"
+                    />
                     {{ submitLabel }}
                 </Button>
             </DialogFooter>