@7365admin1/layer-common 1.11.19 → 1.11.21

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @iservice365/layer-common
 
+## 1.11.21
+
+### Patch Changes
+
+- 17a59f6: Update Layer-common
+
+## 1.11.20
+
+### Patch Changes
+
+- e9bd022: fix feedbacks page when refreshing or reloading the page
+
 ## 1.11.19
 
 ### Patch Changes

package/components/AddPassKeyToVisitor.vue

@@ -2,7 +2,8 @@
     <v-card width="100%" :loading="processing">
         <v-toolbar>
             <v-row no-gutters class="fill-height px-6 d-flex justify-space-between align-center" align="center">
-                <span class="font-weight-bold text-subtitle-1">Assign Pass & Keys</span>
+                <span class="font-weight-bold text-subtitle-1">{{ isEditMode ? 'Edit' : 'Assign' }} Pass &amp;
+                    Keys</span>
                 <ButtonClose @click="emit('close')" />
             </v-row>
         </v-toolbar>
@@ -11,25 +12,28 @@
             <v-row no-gutters class="ga-1">
                 <v-col cols="12">
                     <span class="text-subtitle-2 text-medium-emphasis">
-                       Name: {{ prop.visitor.name }}
+                        Name: {{ prop.visitor.name }}
                     </span>
                 </v-col>
 
+                <!-- Pass section -->
                 <v-col cols="12" class="mt-3">
                     <InputLabel title="Pass" />
-                    <v-autocomplete
-                        v-model="selectedPass"
-                        v-model:search="passInput"
-                        :hide-no-data="false"
-                        :items="passItems"
-                        item-title="prefixAndName"
-                        item-value="_id"
-                        variant="outlined"
-                        hide-details
-                        density="compact"
-                        small-chips
-                        :loading="fetchPassesPending"
-                    >
+
+                    <!-- Existing pass -->
+                    <div v-if="existingPass" class="d-flex align-center ga-2 mb-2">
+                        <v-chip prepend-icon="mdi-card-bulleted-outline" color="blue" variant="tonal" size="small"
+                            closable @click:close="existingPass = null">
+                            {{ existingPass.prefixAndName }}
+                        </v-chip>
+                        <span class="text-caption text-medium-emphasis">(current)</span>
+                    </div>
+
+                    <!-- New pass selector -->
+                    <v-autocomplete v-if="!existingPass" v-model="selectedPass" v-model:search="passInput"
+                        :hide-no-data="false" :items="passItems" item-title="prefixAndName" item-value="_id"
+                        variant="outlined" hide-details density="compact" small-chips :loading="fetchPassesPending"
+                        clearable>
                         <template v-slot:chip="{ props: chipProps, item }">
                             <v-chip v-if="selectedPass" v-bind="chipProps" prepend-icon="mdi-card-bulleted-outline"
                                 :text="item.raw?.prefixAndName" />
@@ -42,22 +46,24 @@
                     </v-autocomplete>
                 </v-col>
 
+                <!-- Keys section -->
                 <v-col v-if="showKeys" cols="12" class="mt-3">
                     <InputLabel title="Keys" />
-                    <v-autocomplete
-                        v-model="selectedKeys"
-                        v-model:search="keyInput"
-                        :hide-no-data="false"
-                        :items="keyItems"
-                        item-title="prefixAndName"
-                        item-value="_id"
-                        multiple
-                        variant="outlined"
-                        hide-details
-                        density="compact"
-                        small-chips
-                        :loading="fetchKeysPending"
-                    >
+
+                    <!-- Existing keys -->
+                    <div v-if="existingKeys.length > 0" class="d-flex flex-wrap ga-1 mb-2">
+                        <v-chip v-for="key in existingKeys" :key="key.keyId" prepend-icon="mdi-key" color="orange"
+                            variant="tonal" size="small" closable @click:close="removeExistingKey(key.keyId)">
+                            {{ key.prefixAndName }}
+                        </v-chip>
+                        <span class="text-caption text-medium-emphasis align-self-center">(current)</span>
+                    </div>
+
+                    <!-- New keys selector -->
+                    <v-autocomplete v-model="selectedKeys" v-model:search="keyInput" :hide-no-data="false"
+                        :items="keyItems" item-title="prefixAndName" item-value="_id"
+                        :label="existingKeys.length > 0 ? 'Add more keys' : undefined" multiple variant="outlined"
+                        hide-details density="compact" small-chips :loading="fetchKeysPending">
                         <template v-slot:chip="{ props: chipProps, item }">
                             <v-chip v-if="selectedKeys.length > 0" v-bind="chipProps" prepend-icon="mdi-key"
                                 :text="item.raw?.prefixAndName" />
@@ -82,13 +88,9 @@
                     <v-btn tile block variant="text" class="text-none" size="48" text="Cancel" @click="emit('close')" />
                 </v-col>
                 <v-col cols="6">
-                    <v-btn
-                        tile block variant="flat" color="black" class="text-none" size="48"
-                        text="Assign"
-                        :disabled="!selectedPass && selectedKeys.length === 0"
-                        :loading="processing"
-                        @click="handleSubmit"
-                    />
+                    <v-btn tile block variant="flat" color="black" class="text-none" size="48"
+                        :text="isEditMode ? 'Save' : 'Assign'" :disabled="!canSubmit" :loading="processing"
+                        @click="handleSubmit" />
                 </v-col>
             </v-row>
         </v-toolbar>
@@ -109,13 +111,9 @@ const prop = defineProps({
         type: String,
         required: true,
     },
-    type: {
-        type: String as PropType<TVisitorType>,
-        required: true,
-    },
-    contractorType: {
-        type: String,
-        default: '',
+    mode: {
+        type: String as PropType<'add' | 'edit'>,
+        default: 'add',
     },
 })
 
@@ -130,6 +128,7 @@ const { updateVisitor } = useVisitor()
 const processing = ref(false)
 const errorMessage = ref('')
 
+// New selections
 const selectedPass = ref<string>('')
 const selectedKeys = ref<string[]>([])
 const passInput = ref('')
@@ -137,16 +136,46 @@ const keyInput = ref('')
 const passItems = ref<TPassKey[]>([])
 const keyItems = ref<TPassKey[]>([])
 
+// Existing pass/keys (editable)
+const existingPass = ref<{ keyId: string; prefixAndName: string } | null>(null)
+const existingKeys = ref<{ keyId: string; prefixAndName: string }[]>([])
+
+const isEditMode = computed(() => prop.mode === 'edit')
 const showKeys = computed(() => prop.visitor.type === 'contractor')
 
 const passTypesComputed = computed(() => {
-    if (prop.type === 'contractor') {
-        return prop.contractorType === 'property-agent' ? ['agent-pass'] : ['contractor-pass']
+    const type = prop.visitor.type
+    const contractorType = (prop.visitor as any).contractorType
+    if (type === 'contractor') {
+        return contractorType === 'property-agent' ? ['agent-pass'] : ['contractor-pass']
     }
     return ['visitor-pass']
 })
 
-const { data: passesData, pending: fetchPassesPending } = await useLazyAsyncData(
+// Initialise existing values in edit mode
+onMounted(() => {
+    if (isEditMode.value) {
+        const vPass = prop.visitor.visitorPass
+        if (Array.isArray(vPass) && vPass.length > 0) {
+            const p = vPass[0] as any
+            existingPass.value = { keyId: p.keyId, prefixAndName: p.prefixAndName }
+        }
+        const vKeys = prop.visitor.passKeys
+        if (Array.isArray(vKeys) && vKeys.length > 0) {
+            existingKeys.value = (vKeys as any[]).map(k => ({ keyId: k.keyId, prefixAndName: k.prefixAndName }))
+        }
+    }
+})
+
+function removeExistingKey(keyId: string) {
+    existingKeys.value = existingKeys.value.filter(k => k.keyId !== keyId)
+}
+
+// Exclude already-held pass/keys from selectable lists
+const existingPassId = computed(() => existingPass.value?.keyId)
+const existingKeyIds = computed(() => existingKeys.value.map(k => k.keyId))
+
+const { data: passesData, refresh: refreshPasses, pending: fetchPassesPending } = await useLazyAsyncData(
     `add-pass-key-visitor-passes-${prop.visitor._id}`,
     () => getPassKeysByPageSearch({
         search: passInput.value,
@@ -158,7 +187,7 @@ const { data: passesData, pending: fetchPassesPending } = await useLazyAsyncData
     })
 )
 
-const { data: keysData, pending: fetchKeysPending } = await useLazyAsyncData(
+const { data: keysData, refresh: refreshKeys, pending: fetchKeysPending } = await useLazyAsyncData(
     `add-pass-key-visitor-keys-${prop.visitor._id}`,
     () => getPassKeysByPageSearch({
         search: keyInput.value,
@@ -171,11 +200,30 @@ const { data: keysData, pending: fetchKeysPending } = await useLazyAsyncData(
 )
 
 watch(passesData, (data: any) => {
-    passItems.value = Array.isArray(data?.items) ? data.items : []
+    const all: TPassKey[] = Array.isArray(data?.items) ? data.items : []
+    passItems.value = all.filter(p => p._id !== existingPassId.value)
 })
 
 watch(keysData, (data: any) => {
-    keyItems.value = Array.isArray(data?.items) ? data.items : []
+    const all: TPassKey[] = Array.isArray(data?.items) ? data.items : []
+    keyItems.value = all.filter(k => !existingKeyIds.value.includes(k._id!))
+})
+
+// Re-filter when existing items change
+watch([existingPassId, existingKeyIds], () => {
+    const rawPasses = (passesData.value as any)?.items ?? []
+    passItems.value = rawPasses.filter((p: TPassKey) => p._id !== existingPassId.value)
+    const rawKeys = (keysData.value as any)?.items ?? []
+    keyItems.value = rawKeys.filter((k: TPassKey) => !existingKeyIds.value.includes(k._id!))
+}, { deep: true })
+
+const canSubmit = computed(() => {
+    if (isEditMode.value) {
+        // allow save if anything changed: existing items modified OR new items selected
+        return existingPass.value !== null || selectedPass.value ||
+            existingKeys.value.length > 0 || selectedKeys.value.length > 0
+    }
+    return !!selectedPass.value || selectedKeys.value.length > 0
 })
 
 async function handleSubmit() {
@@ -186,18 +234,30 @@ async function handleSubmit() {
     try {
         const payload: Partial<TVisitorPayload> = {}
 
+        // Build final pass list: kept existing + newly selected
+        const finalPasses: { keyId: string; status: string }[] = []
+        if (existingPass.value) {
+            finalPasses.push({ keyId: existingPass.value.keyId, status: 'In Use' })
+        }
         if (selectedPass.value) {
-            payload.visitorPass = [{ keyId: selectedPass.value, status: "In Use" }]
+            finalPasses.push({ keyId: selectedPass.value, status: 'In Use' })
         }
+        payload.visitorPass = finalPasses
 
-        if (selectedKeys.value.length > 0) {
-            payload.passKeys = selectedKeys.value.map(keyId => ({ keyId, status: "In Use" }))
+        // Build final keys list: kept existing + newly selected
+        if (showKeys.value) {
+            const finalKeys: { keyId: string; status: string }[] = [
+                ...existingKeys.value.map(k => ({ keyId: k.keyId, status: 'In Use' })),
+                ...selectedKeys.value.map(keyId => ({ keyId, status: 'In Use' })),
+            ]
+            payload.passKeys = finalKeys
         }
 
         await updateVisitor(prop.visitor._id, payload)
         emit('done')
+        emit('close')
     } catch (error: any) {
-        errorMessage.value = error?.data?.message || 'Failed to assign pass & keys. Please try again.'
+        errorMessage.value = error?.data?.message || 'Failed to save pass & keys. Please try again.'
     } finally {
         processing.value = false
     }
@@ -205,3 +265,4 @@ async function handleSubmit() {
 </script>
 
 <style scoped></style>
+

package/components/AreaChecklistHistoryMain.vue

@@ -14,6 +14,22 @@
         @refresh="getAreaChecklistHistoryRefresh"
         @row-click="handleRowClick"
       >
+        <template #actions>
+          <v-row class="w-100" align="center" no-gutters>
+            <v-col cols="auto">
+              <v-btn
+                variant="text"
+                color="primary"
+                class="text-none"
+                @click="back"
+              >
+                <v-icon left>mdi-arrow-left</v-icon>
+                Back
+              </v-btn>
+            </v-col>
+          </v-row>
+        </template>
+
         <template #extension>
           <v-row no-gutters class="w-100 d-flex flex-column">
             <v-card
@@ -84,7 +100,7 @@ const props = defineProps({
   scheduleRoute: { type: String, default: "cleaning-schedule" },
 });
 
-const { formatDate } = useUtils();
+const { formatDate, back, debounce } = useUtils();
 
 const loading = ref(false);
 const message = ref("");
@@ -160,6 +176,18 @@ watchEffect(() => {
   }
 });
 
+const debouncedSearchRefresh = debounce(() => {
+  const wasPage = page.value;
+  page.value = 1;
+  if (wasPage === 1) {
+    getAreaChecklistHistoryRefresh();
+  }
+}, 450);
+
+watch(searchInput, () => {
+  debouncedSearchRefresh();
+});
+
 function handleRowClick(data: any) {
   const item = data?.item ?? data;
   const id = item?._id || item?.id || item?.areaId;

package/components/BulletinBoardView.vue

@@ -31,24 +31,119 @@
                 </template>
 
                 <v-col cols="12" v-if="prop.activeAnnouncement?.file?.length > 0" class="mb-5">
-                    <v-row no-gutters class="font-weight-bold text-subtitle-1">Attachments:</v-row>
-                    <v-row no-gutters class="">
-                        <template v-if="videosArray.length > 0">
-                            <v-col cols="12">Videos ({{ videosArray.length }})</v-col>
-                            <AttachmentList :list="videosArray" show-checkbox read-only />
-                        </template>
-
-                        <template v-if="photosArray.length > 0">
-                            <v-col cols="12" class="mt-1">Photos ({{ photosArray.length }})</v-col>
-                            <AttachmentList :list="photosArray" show-checkbox read-only />
-                        </template>
-
-                        <template v-if="filesArray.length > 0">
-                            <v-col cols="12" class="mt-1">Files ({{ filesArray.length }})</v-col>
-                            <AttachmentList :list="filesArray" show-checkbox read-only />
-                        </template>
+                    <v-row no-gutters>
+                        <v-col class="font-weight-bold">Attachments:</v-col>
+                        <v-col cols="9" class="px-10">
+
+                            <template v-if="videosArray.length > 0">
+                                <div class="text-caption text-medium-emphasis mb-1">Videos ({{ videosArray.length }})</div>
+                                <v-list density="compact" class="pa-0 rounded-lg border mb-3">
+                                    <template v-for="(item, i) in videosArray" :key="item._id">
+                                        <v-divider v-if="i > 0" />
+                                        <v-list-item
+                                            :prepend-icon="getFileIcon(item.file.type)"
+                                            :title="item.file.name"
+                                            :subtitle="item.file.type"
+                                            class="cursor-pointer"
+                                            @click="openMediaViewer(item._id, 'media')"
+                                        >
+                                            <template #prepend>
+                                                <v-icon :color="getFileIconColor(item.file.type)" class="mr-3">{{ getFileIcon(item.file.type) }}</v-icon>
+                                            </template>
+                                            <template #append>
+                                                <v-icon size="16" color="grey-lighten-1">mdi-play-circle-outline</v-icon>
+                                            </template>
+                                        </v-list-item>
+                                    </template>
+                                </v-list>
+                            </template>
+
+                            <template v-if="photosArray.length > 0">
+                                <div class="text-caption text-medium-emphasis mb-1" :class="{ 'mt-3': videosArray.length > 0 }">Photos ({{ photosArray.length }})</div>
+                                <v-list density="compact" class="pa-0 rounded-lg border mb-3">
+                                    <template v-for="(item, i) in photosArray" :key="item._id">
+                                        <v-divider v-if="i > 0" />
+                                        <v-list-item
+                                            class="cursor-pointer"
+                                            @click="openMediaViewer(item._id, 'media')"
+                                        >
+                                            <template #prepend>
+                                                <v-avatar size="36" rounded="sm" class="mr-3">
+                                                    <v-img :src="getFileUrl(item._id)" cover>
+                                                        <template #error>
+                                                            <v-icon color="green" size="20">mdi-image</v-icon>
+                                                        </template>
+                                                    </v-img>
+                                                </v-avatar>
+                                            </template>
+                                            <v-list-item-title class="text-body-2">{{ item.file.name }}</v-list-item-title>
+                                            <v-list-item-subtitle class="text-caption">{{ item.file.type }}</v-list-item-subtitle>
+                                            <template #append>
+                                                <v-icon size="16" color="grey-lighten-1">mdi-eye-outline</v-icon>
+                                            </template>
+                                        </v-list-item>
+                                    </template>
+                                </v-list>
+                            </template>
+
+                            <template v-if="filesArray.length > 0">
+                                <div class="text-caption text-medium-emphasis mb-1" :class="{ 'mt-3': videosArray.length > 0 || photosArray.length > 0 }">Files ({{ filesArray.length }})</div>
+                                <v-list density="compact" class="pa-0 rounded-lg border">
+                                    <template v-for="(item, i) in filesArray" :key="item._id">
+                                        <v-divider v-if="i > 0" />
+                                        <v-list-item
+                                            class="cursor-pointer"
+                                            @click="openFileViewer(item._id, item.file.name)"
+                                        >
+                                            <template #prepend>
+                                                <v-icon :color="getFileIconColor(item.file.type)" class="mr-3">{{ getFileIcon(item.file.type) }}</v-icon>
+                                            </template>
+                                            <v-list-item-title class="text-body-2">{{ item.file.name }}</v-list-item-title>
+                                            <v-list-item-subtitle class="text-caption">{{ item.file.type }}</v-list-item-subtitle>
+                                            <template #append>
+                                                <v-icon size="16" color="grey-lighten-1">mdi-open-in-new</v-icon>
+                                            </template>
+                                        </v-list-item>
+                                    </template>
+                                </v-list>
+                            </template>
+
+                        </v-col>
                     </v-row>
                 </v-col>
+
+                <!-- Media Carousel (images + videos) -->
+                <ImageCarousel v-model="showCarousel" :active-file-id="activeFileId" :files="carouselFiles" />
+
+                <!-- File Viewer Dialog (PDF, docs, etc.) -->
+                <v-dialog v-model="showFileDialog" max-width="900" scrollable>
+                    <v-card>
+                        <v-toolbar density="compact">
+                            <v-toolbar-title class="text-subtitle-2 text-truncate">{{ activeFileName }}</v-toolbar-title>
+                            <v-spacer />
+                            <v-btn icon="mdi-open-in-new" variant="text" size="small"
+                                @click="openInNewTab(activeFileId)" />
+                            <v-btn icon="mdi-close" variant="text" size="small"
+                                @click="showFileDialog = false" />
+                        </v-toolbar>
+                        <v-card-text class="pa-0" style="height: 75vh;">
+                            <iframe
+                                :src="getFileUrl(activeFileId)"
+                                width="100%"
+                                height="100%"
+                                style="border: none;"
+                                :title="activeFileName"
+                            />
+                        </v-card-text>
+                        <v-card-actions>
+                            <v-spacer />
+                            <v-btn variant="text" class="text-none" @click="openInNewTab(activeFileId)">
+                                <v-icon start>mdi-download</v-icon>
+                                Open / Download
+                            </v-btn>
+                        </v-card-actions>
+                    </v-card>
+                </v-dialog>
             </v-row>
         </v-card-text>
 
@@ -147,6 +242,53 @@ const photosArray = getByType('image/')
 const videosArray = getByType('video/')
 const filesArray = getByType('other')
 
+/* Viewer state */
+const showCarousel = ref(false)
+const showFileDialog = ref(false)
+const activeFileId = ref('')
+const activeFileName = ref('')
+const carouselFiles = ref<string[]>([])
+
+function openMediaViewer(id: string, _type: 'media') {
+    activeFileId.value = id
+    carouselFiles.value = [
+        ...photosArray.value.map(x => x._id),
+        ...videosArray.value.map(x => x._id),
+    ]
+    showCarousel.value = true
+}
+
+function openFileViewer(id: string, name: string) {
+    activeFileId.value = id
+    activeFileName.value = name
+    showFileDialog.value = true
+}
+
+function openInNewTab(id: string) {
+    window.open(getFileUrl(id), '_blank', 'noopener,noreferrer')
+}
+
+function getFileIcon(mimeType: string): string {
+    if (mimeType.startsWith('image/')) return 'mdi-image'
+    if (mimeType.startsWith('video/')) return 'mdi-video'
+    if (mimeType === 'application/pdf') return 'mdi-file-pdf-box'
+    if (mimeType.includes('word') || mimeType.includes('document')) return 'mdi-file-word-box'
+    if (mimeType.includes('excel') || mimeType.includes('spreadsheet')) return 'mdi-file-excel-box'
+    if (mimeType.includes('powerpoint') || mimeType.includes('presentation')) return 'mdi-file-powerpoint-box'
+    if (mimeType === 'text/plain') return 'mdi-file-document-outline'
+    if (mimeType.includes('zip') || mimeType.includes('compressed') || mimeType.includes('archive')) return 'mdi-folder-zip-outline'
+    return 'mdi-file-outline'
+}
+
+function getFileIconColor(mimeType: string): string {
+    if (mimeType === 'application/pdf') return 'red'
+    if (mimeType.includes('word') || mimeType.includes('document')) return 'blue'
+    if (mimeType.includes('excel') || mimeType.includes('spreadsheet')) return 'green'
+    if (mimeType.includes('powerpoint') || mimeType.includes('presentation')) return 'orange'
+    if (mimeType.startsWith('video/')) return 'purple'
+    return 'grey'
+}
+
 function getByType(prefix: 'image/' | 'video/' | 'other') {
     return computed(() => {
         return rawFileArray.value.filter(x => {

package/components/CleaningScheduleMain.vue

@@ -116,7 +116,7 @@ const props = defineProps({
 
 const startDate = ref("");
 const endDate = ref("");
-const status = ref<TScheduleAreaStatus>("All");
+const status = ref<TScheduleAreaStatus>("all");
 const statusOptions = [
   { title: "All", value: "all" },
   { title: "Open", value: "open" },
@@ -191,7 +191,7 @@ const {
       site: props.site,
       startDate: startDate.value,
       endDate: endDate.value,
-      status: status.value === "All" ? undefined : status.value,
+      status: status.value === "all" ? undefined : status.value,
       serviceType: props.serviceType,
     }),
   {

package/components/Input/DateTimePicker.vue

@@ -1,13 +1,13 @@
 <template>
     <div class="d-flex flex-column">
         <v-text-field v-bind="$attrs" ref="dateTimePickerRef" :model-value="dateTimeFormattedReadOnly" autocomplete="off"
-            :placeholder="placeholder" :rules="rules" style="z-index: 10" @click="openDatePicker">
+            :placeholder="inputPlaceholder" :rules="rules" style="z-index: 10" @click="openDatePicker">
             <template #append-inner>
                 <v-icon icon="mdi-calendar" @click.stop="openDatePicker" />
             </template>
         </v-text-field>
         <div class="w-100 d-flex align-end ga-3 hidden-input">
-            <input ref="dateInput" type="datetime-local" v-model="dateTime" />
+            <input ref="dateInput" :type="inputType" v-model="dateTime" />
         </div>
     </div>
 </template>
@@ -23,6 +23,10 @@ const prop = defineProps({
     placeholder: {
         type: String,
         default: 'DD/MM/YYYY, HH:MM AM/PM'
+    },
+    dateOnly: {
+        type: Boolean,
+        default: false
     }
 })
 
@@ -31,6 +35,10 @@ const dateTime = defineModel<string | null>({ default: null }) //2025-10-10T13:0
 const dateTimeUTC = defineModel<string | null>('utc', { default: null }) // UTC format
 
 const dateTimeFormattedReadOnly = ref<string | null>(null)
+const inputType = computed(() => (prop.dateOnly ? 'date' : 'datetime-local'))
+const inputPlaceholder = computed(() => (
+    prop.placeholder || (prop.dateOnly ? 'MM/DD/YYYY' : 'DD/MM/YYYY, HH:MM AM/PM')
+))
 
 
 
@@ -55,11 +63,16 @@ function convertToReadableFormat(dateStr: string): string {
     if (!dateStr) return "";
 
     const date = new Date(dateStr)
+    if (Number.isNaN(date.getTime())) return "";
 
-    const day = String(date.getDate()).padStart(2, '0')
     const month = String(date.getMonth() + 1).padStart(2, '0')
+    const day = String(date.getDate()).padStart(2, '0')
     const year = date.getFullYear()
 
+    if (prop.dateOnly) {
+        return `${month}/${day}/${year}`
+    }
+
     let hours = date.getHours()
     const minutes = String(date.getMinutes()).padStart(2, '0')
 
@@ -72,17 +85,36 @@ function convertToReadableFormat(dateStr: string): string {
     return `${day}/${month}/${year}, ${formattedTime}`
 }
 
+function toDateOnlyInputValue(dateStr: string): string {
+    if (!dateStr) return ''
+    if (/^\d{4}-\d{2}-\d{2}$/.test(dateStr)) return dateStr
+    const date = new Date(dateStr)
+    if (Number.isNaN(date.getTime())) return ''
+    const year = date.getFullYear()
+    const month = String(date.getMonth() + 1).padStart(2, '0')
+    const day = String(date.getDate()).padStart(2, '0')
+    return `${year}-${month}-${day}`
+}
+
 function handleInitialDate(){
     const dateDefault = dateTime.value
     const dateUTC = dateTimeUTC.value
     if(dateDefault){
         dateTimeFormattedReadOnly.value = convertToReadableFormat(dateDefault)
-        const localDate = new Date(dateDefault)
-        dateTimeUTC.value = localDate.toISOString()
+        if (prop.dateOnly) {
+            dateTimeUTC.value = toDateOnlyInputValue(dateDefault)
+        } else {
+            const localDate = new Date(dateDefault)
+            dateTimeUTC.value = localDate.toISOString()
+        }
     } else if (dateUTC){
         dateTimeFormattedReadOnly.value = convertToReadableFormat(dateUTC)
-        const localDate = new Date(dateUTC)
-        dateTime.value = formatDateISO8601(localDate)
+        if (prop.dateOnly) {
+            dateTime.value = toDateOnlyInputValue(dateUTC)
+        } else {
+            const localDate = new Date(dateUTC)
+            dateTime.value = formatDateISO8601(localDate)
+        }
     } else {
         dateTimeFormattedReadOnly.value = null
     }
@@ -98,8 +130,12 @@ watch(dateTime, (dateVal) => {
     }
 
     dateTimeFormattedReadOnly.value = convertToReadableFormat(dateVal)
-    const localDate = new Date(dateVal)
-    dateTimeUTC.value = localDate.toISOString()
+    if (prop.dateOnly) {
+        dateTimeUTC.value = toDateOnlyInputValue(dateVal)
+    } else {
+        const localDate = new Date(dateVal)
+        dateTimeUTC.value = localDate.toISOString()
+    }
 
 }, { immediate: false })