@7365admin1/layer-common 1.10.5 → 1.10.6

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 1.10.6
+
+### Patch Changes
+
+- 49fefa8: Update layer-common package for March 9,2026
+
 ## 1.10.5
 
 ### Patch Changes

package/components/AccessCardDetailsDialog.vue

@@ -0,0 +1,144 @@
+<template>
+  <v-dialog :model-value="modelValue" width="480" persistent>
+    <v-card width="100%">
+      <v-toolbar density="compact" color="black">
+        <v-toolbar-title class="text-subtitle-1 font-weight-medium">
+          Card Details — {{ card?.cardNo ?? "N/A" }}
+        </v-toolbar-title>
+        <v-btn icon @click="emit('update:modelValue', false)">
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+      </v-toolbar>
+
+      <v-card-text style="max-height: 70vh; overflow-y: auto" class="pa-4">
+        <div v-if="pending" class="d-flex justify-center align-center py-8">
+          <v-progress-circular indeterminate color="black" />
+        </div>
+
+        <div v-else-if="!details" class="text-center text-grey py-8">
+          No details available.
+        </div>
+
+        <div v-else class="d-flex flex-column ga-3">
+          <div>
+            <div class="text-caption text-grey">Card No</div>
+            <div class="text-body-2 font-weight-medium">{{ details.cardNo ?? "N/A" }}</div>
+          </div>
+
+          <div>
+            <div class="text-caption text-grey">Type</div>
+            <div class="text-body-2 font-weight-medium">{{ details.type ?? "N/A" }}</div>
+          </div>
+
+          <div>
+            <div class="text-caption text-grey">Status</div>
+            <v-chip
+              :color="statusColor(details.status)"
+              variant="flat"
+              size="x-small"
+              class="text-capitalize font-weight-medium mt-1"
+            >
+              {{ details.status ?? "N/A" }}
+            </v-chip>
+          </div>
+
+          <div>
+            <div class="text-caption text-grey">Activated</div>
+            <div class="text-body-2 font-weight-medium">{{ details.isActivated ? "Yes" : "No" }}</div>
+          </div>
+
+          <div>
+            <div class="text-caption text-grey">Site</div>
+            <div class="text-body-2 font-weight-medium">{{ details.site?.name ?? "N/A" }}</div>
+          </div>
+
+          <div>
+            <div class="text-caption text-grey">User</div>
+            <div class="text-body-2 font-weight-medium">{{ details.user?.name ?? "N/A" }} ({{ details.user?.email ?? "N/A" }})</div>
+          </div>
+
+          <div>
+            <div class="text-caption text-grey">Created At</div>
+            <div class="text-body-2 font-weight-medium">{{ formatDate(details.createdAt) }}</div>
+          </div>
+
+          <div>
+            <div class="text-caption text-grey">Updated At</div>
+            <div class="text-body-2 font-weight-medium">{{ formatDate(details.updatedAt) }}</div>
+          </div>
+
+          <div v-if="details.remarks">
+            <div class="text-caption text-grey">Remarks</div>
+            <div class="text-body-2 font-weight-medium">{{ details.remarks }}</div>
+          </div>
+        </div>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  card: {
+    type: Object as PropType<Record<string, any> | null>,
+    default: null,
+  },
+  siteId: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean];
+}>();
+
+const { getCardDetails } = useAccessManagement();
+
+const details = ref<Record<string, any> | null>(null);
+const pending = ref(false);
+
+watch(
+  () => props.modelValue,
+  async (val) => {
+    if (val && props.card?._id && props.siteId) {
+      pending.value = true;
+      try {
+        const res = await getCardDetails({ siteId: props.siteId, cardId: props.card._id });
+        details.value = res?.data ?? null;
+      } finally {
+        pending.value = false;
+      }
+    } else {
+      details.value = null;
+    }
+  }
+);
+
+function statusColor(status: string) {
+  const map: Record<string, string> = {
+    active: "success",
+    assigned: "primary",
+    replaced: "orange",
+    deleted: "error",
+    available: "grey",
+  };
+  return map[status] ?? "grey";
+}
+
+function formatDate(date: string) {
+  if (!date) return "N/A";
+  return new Intl.DateTimeFormat("en-GB", {
+    day: "2-digit",
+    month: "short",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: true,
+  }).format(new Date(date));
+}
+</script>

package/components/AccessCardPreviewDialog.vue

@@ -1,7 +1,8 @@
 <template>
-  <AccessCardHistoryDialog
+  <AccessCardDetailsDialog
     v-model="historyDialog"
     :card="selectedCardInUnit"
+    :site-id="siteId"
   />
 
   <v-dialog :model-value="modelValue" width="450" persistent>
@@ -221,7 +222,7 @@
                 </v-list-item>
                 <v-list-item :disabled="!isSelectedCardPhysical" @click="historyDialog = true">
                   <v-list-item-title class="text-subtitle-2 cursor-pointer">
-                    Card History
+                    Card Details
                   </v-list-item-title>
                 </v-list-item>
                 <v-list-item
@@ -277,6 +278,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  siteId: {
+    type: String,
+    default: "",
+  },
 });
 
 const emit = defineEmits<{

package/components/AccessManagement.vue

@@ -112,6 +112,7 @@
       :can-delete-access-card="canDeleteAccessCard"
       :is-selected-card-assigned-physical="isSelectedCardAssignedPhysical"
       :is-selected-card-physical="isSelectedCardPhysical"
+      :site-id="siteId"
       @replace="openReplaceDialog()"
       @delete="openDeleteDialog()"
     />
@@ -354,8 +355,11 @@ async function handleDeleteCard(remarks: string) {
     selectedCardId.value = null;
     confirmDialog.value = false;
     previewDialog.value = false;
+    showMessage("Access card deleted successfully!", "success");
   } catch (error: any) {
-    deleteError.value = error?.response?._data?.message || "Failed to delete card";
+    const msg = error?.response?._data?.message || "Failed to delete card";
+    deleteError.value = msg;
+    showMessage(msg, "error");
   } finally {
     deleteLoading.value = false;
   }

package/components/Input/InputPhoneNumberV2.vue

@@ -13,6 +13,7 @@
         style="max-width: 95px"
         :rules="[...props.rules]"
         :readonly="props.readOnly"
+        :disabled="props.disabled"
         @update:model-value="handleUpdateCountry"
       >
         <template v-slot:item="{ props: itemProps, item }">
@@ -40,6 +41,7 @@
         :prefix="phonePrefix || ''"
         persistent-placeholder
         :density="density"
+        :disabled="props.disabled"
         :placeholder="placeholder || currentMask"
       />
     </v-col>
@@ -64,6 +66,7 @@ const props = defineProps({
   hideDetails: { type: Boolean, default: false },
   loading: { type: Boolean, default: false },
   readOnly: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
 })
 
 const emit = defineEmits(['update:modelValue'])

package/components/PlateNumberDisplay.vue

@@ -5,7 +5,7 @@
     </span>
 
     <v-chip
-      v-if="extraCount > 0"
+      v-if="extraCount > 0 && !showAll"
       density="comfortable"
       size="small"
     >
@@ -23,12 +23,20 @@ const props = defineProps({
   defaultValue: {
     type: String,
     default: ""
+  },
+  showAll: {
+    type: Boolean,
+    default: false
   }
 })
 
 const formatted = computed(() => {
   if (!props.plateNumbers?.length) return props.defaultValue || ""
 
+  if (props.showAll) {
+    return props.plateNumbers.map((v: any) => v?.plateNumber || "").join(", ")
+  }
+
   const firstTwo = props.plateNumbers
     .slice(0, 2)
     .map((v: any) => v?.plateNumber || "")

package/components/TableHygiene.vue

@@ -1,6 +1,5 @@
 <template>
   <v-row no-gutters>
-    <!-- Top Actions -->
     <v-col cols="12" class="mb-2" v-if="canCreate || $slots.actions">
       <v-row no-gutters>
         <slot name="actions">
@@ -18,7 +17,6 @@
       </v-row>
     </v-col>
 
-    <!-- List Card -->
     <v-col cols="12">
       <v-card
         width="100%"
@@ -27,7 +25,6 @@
         rounded="lg"
         :loading="loading"
       >
-        <!-- Toolbar -->
         <v-toolbar
           density="compact"
           color="grey-lighten-4"
@@ -40,7 +37,10 @@
             <slot name="prepend-additional" />
           </template>
 
-          <v-toolbar-title v-if="title" class="text-subtitle-1 font-weight-medium">
+          <v-toolbar-title
+            v-if="title"
+            class="text-subtitle-1 font-weight-medium"
+          >
             {{ title }}
           </v-toolbar-title>
 
@@ -64,126 +64,224 @@
 
         <v-divider />
 
-        <!-- List Items -->
-        <v-list
-          :style="`max-height: calc(100vh - (${offset}px)); overflow-y: auto;`"
+        <v-sheet
+          :max-height="`calc(100vh - (${offset}px))`"
+          class="overflow-y-auto"
         >
-          <v-list-item
+          <v-row
             v-if="groupedItems.length === 0"
-            class="py-6 text-center text-medium-emphasis"
+            no-gutters
+            justify="center"
+            class="py-10"
           >
-            {{ noDataText }}
-          </v-list-item>
+            <v-col
+              cols="auto"
+              class="text-center text-medium-emphasis text-body-2"
+            >
+              {{ noDataText }}
+            </v-col>
+          </v-row>
 
           <template
             v-for="(group, groupIndex) in groupedItems"
             :key="`group-${groupIndex}`"
           >
-            <div
-              v-if="group.set !== undefined"
-              class="d-flex align-center justify-space-between px-4 py-1 text-caption text-medium-emphasis"
-              style="min-height: 32px"
-            >
-              <span>Set {{ group.set }}</span>
-              <div class="d-flex align-center ga-2">
-                <span v-if="group.completedByName">
-                  Completed by: {{ group.completedByName }}
-                </span>
-                <v-btn
-                  v-if="group.attachments && group.attachments.length > 0"
-                  size="x-small"
-                  variant="tonal"
-                  color="primary"
-                  class="text-none"
-                  prepend-icon="mdi-paperclip"
-                  @click.stop="
-                    openAttachmentDialog(group.set, group.attachments)
-                  "
-                >
-                  View Attachment ({{ group.attachments.length }})
-                </v-btn>
-              </div>
-            </div>
-
-            <v-list-item
+            <v-sheet color="grey-lighten-4" border="b t">
+              <v-row no-gutters align="center" class="px-4 py-2">
+                <v-col cols="auto" class="d-flex align-center ga-2">
+                  <span
+                    class="text-caption font-weight-bold text-medium-emphasis text-uppercase"
+                  >
+                    Set {{ group.set }}
+                  </span>
+                  <v-chip
+                    v-if="group.completedByName && isGroupComplete(group)"
+                    size="x-small"
+                    color="success"
+                    variant="tonal"
+                    prepend-icon="mdi-check-circle-outline"
+                    class="text-none"
+                  >
+                    Completed · {{ group.completedByName }}
+                  </v-chip>
+                  <v-chip
+                    v-else-if="
+                      group.completedByName && isGroupInProgress(group)
+                    "
+                    size="x-small"
+                    color="warning"
+                    variant="tonal"
+                    prepend-icon="mdi-progress-clock"
+                    class="text-none"
+                  >
+                    Ongoing · {{ group.completedByName }}
+                  </v-chip>
+                </v-col>
+                <v-spacer />
+                <v-col cols="auto">
+                  <v-btn
+                    v-if="group.attachments && group.attachments.length > 0"
+                    size="x-small"
+                    variant="tonal"
+                    color="primary"
+                    class="text-none"
+                    prepend-icon="mdi-paperclip"
+                    @click.stop="
+                      openAttachmentDialog(group.set, group.attachments)
+                    "
+                  >
+                    {{ group.attachments.length }} attachment{{
+                      group.attachments.length > 1 ? "s" : ""
+                    }}
+                  </v-btn>
+                </v-col>
+              </v-row>
+            </v-sheet>
+
+            <v-sheet
               v-for="item in group.items"
               :key="item[itemValue]"
-              class="py-3"
-              :class="
-                isItemSelected(item, group.set)
-                  ? ['bg-grey-lighten-4', 'rounded']
-                  : []
+              :color="
+                isItemSelected(item, group.set) ? 'grey-lighten-4' : 'white'
               "
+              border="b"
             >
-              <slot name="list-item" :item="item">
-                <v-list-item-title v-if="headers[0]">
-                  {{ getItemValue(item, headers[0].value) }}
-                </v-list-item-title>
-
-                <v-list-item-subtitle
-                  v-if="headers[1]"
-                  class="mb-1 text-high-emphasis opacity-100"
-                >
-                  {{ getItemValue(item, headers[1].value) || "N/A" }}
-                </v-list-item-subtitle>
-
-                <v-list-item-subtitle
-                  v-if="headers[2]"
-                  class="text-high-emphasis"
-                >
-                  {{ getItemValue(item, headers[2].value) || "N/A" }}
-                </v-list-item-subtitle>
-              </slot>
-
-              <template v-slot:append>
-                <slot
-                  name="list-item-append"
-                  :item="item"
-                  :isSelected="isItemSelected(item, group.set)"
-                >
-                  <v-list-item-action class="d-flex flex-row ga-2">
-                    <template v-if="canManageScheduleTasks">
-                      <v-btn
-                        icon="mdi-close"
-                        size="small"
-                        :variant="
-                          activeActions[getKey(item, group.set)] === 'reject'
-                            ? 'flat'
-                            : 'text'
-                        "
-                        color="error"
-                        @click.stop="
-                          handleActionClick(item, group.set, 'reject')
-                        "
-                      />
-
-                      <v-btn
-                        icon="mdi-check"
-                        size="small"
-                        :variant="
-                          activeActions[getKey(item, group.set)] === 'approve'
-                            ? 'flat'
-                            : 'text'
-                        "
-                        color="success"
-                        @click.stop="
-                          handleActionClick(item, group.set, 'approve')
+              <v-row no-gutters align="center" class="px-4 py-2">
+                <v-col cols="auto" class="mr-3">
+                  <v-icon
+                    size="20"
+                    :color="
+                      activeActions[getKey(item, group.set)] === 'approve'
+                        ? 'success'
+                        : activeActions[getKey(item, group.set)] === 'reject'
+                        ? 'error'
+                        : 'grey-lighten-2'
+                    "
+                  >
+                    {{
+                      activeActions[getKey(item, group.set)] === "approve"
+                        ? "mdi-check-circle"
+                        : activeActions[getKey(item, group.set)] === "reject"
+                        ? "mdi-close-circle"
+                        : "mdi-circle-outline"
+                    }}
+                  </v-icon>
+                </v-col>
+                <v-col>
+                  <slot name="list-item" :item="item">
+                    <v-row no-gutters align-center>
+                      <v-col cols="12">
+                        <span
+                          class="text-body-2 font-weight-medium"
+                          :class="
+                            activeActions[getKey(item, group.set)] === 'approve'
+                              ? 'text-decoration-line-through text-medium-emphasis'
+                              : ''
+                          "
+                        >
+                          {{ getItemValue(item, headers[0].value) }}
+                        </span>
+                      </v-col>
+                      <v-col
+                        v-if="
+                          item.timestamp ||
+                          (headers[1] &&
+                            getItemValue(item, headers[1].value)) ||
+                          (headers[2] && getItemValue(item, headers[2].value))
                         "
-                      />
-                    </template>
-                  </v-list-item-action>
-                </slot>
-              </template>
-            </v-list-item>
+                        cols="12"
+                      >
+                        <v-row
+                          no-gutters
+                          align="center"
+                          class="ga-3 flex-wrap mt-1"
+                        >
+                          <v-col
+                            v-if="item.timestamp"
+                            cols="auto"
+                            class="d-flex align-center ga-1 text-caption text-medium-emphasis pa-0"
+                          >
+                            <v-icon size="11">mdi-clock-outline</v-icon>
+                            {{ formatTimestamp(item.timestamp) }}
+                          </v-col>
+                          <v-col
+                            v-if="
+                              headers[1] && getItemValue(item, headers[1].value)
+                            "
+                            cols="auto"
+                            class="text-caption text-medium-emphasis pa-0"
+                          >
+                            {{ getItemValue(item, headers[1].value) }}
+                          </v-col>
+                          <v-col
+                            v-if="
+                              headers[2] && getItemValue(item, headers[2].value)
+                            "
+                            cols="auto"
+                            class="text-caption text-medium-emphasis pa-0"
+                          >
+                            {{ getItemValue(item, headers[2].value) }}
+                          </v-col>
+                        </v-row>
+                      </v-col>
+                    </v-row>
+                  </slot>
+                </v-col>
+
+                <v-col cols="auto">
+                  <slot
+                    name="list-item-append"
+                    :item="item"
+                    :isSelected="isItemSelected(item, group.set)"
+                  >
+                    <v-row
+                      v-if="canManageScheduleTasks"
+                      no-gutters
+                      align="center"
+                    >
+                      <v-col cols="auto">
+                        <v-btn
+                          icon="mdi-close"
+                          size="small"
+                          :variant="
+                            activeActions[getKey(item, group.set)] === 'reject'
+                              ? 'flat'
+                              : 'text'
+                          "
+                          color="error"
+                          @click.stop="
+                            handleActionClick(item, group.set, 'reject')
+                          "
+                        />
+                      </v-col>
+                      <v-col cols="auto">
+                        <v-btn
+                          icon="mdi-check"
+                          size="small"
+                          :variant="
+                            activeActions[getKey(item, group.set)] === 'approve'
+                              ? 'flat'
+                              : 'text'
+                          "
+                          color="success"
+                          @click.stop="
+                            handleActionClick(item, group.set, 'approve')
+                          "
+                        />
+                      </v-col>
+                    </v-row>
+                  </slot>
+                </v-col>
+              </v-row>
+            </v-sheet>
           </template>
-        </v-list>
+        </v-sheet>
 
         <slot name="footer" />
       </v-card>
     </v-col>
   </v-row>
 
-  <!-- Attachment Preview Dialog -->
   <v-dialog v-model="showAttachmentDialog" max-width="700" scrollable>
     <v-card>
       <v-card-title class="d-flex align-center pa-4">
@@ -248,7 +346,6 @@
     </v-card>
   </v-dialog>
 
-  <!-- Full Image Lightbox -->
   <v-dialog v-model="showLightbox" max-width="900">
     <v-card>
       <v-card-actions class="pa-2 justify-end">
@@ -431,6 +528,34 @@ const allItemsApproved = computed(() => {
   );
 });
 
+function formatTimestamp(ts: string): string {
+  if (!ts) return "";
+  const date = new Date(ts);
+  return date.toLocaleString("en-SG", {
+    day: "2-digit",
+    month: "short",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: true,
+  });
+}
+
+function isGroupComplete(group: { items: any[] }): boolean {
+  return (
+    group.items.length > 0 &&
+    group.items.every((item: any) => item.approve === true)
+  );
+}
+
+function isGroupInProgress(group: { items: any[] }): boolean {
+  return (
+    group.items.some(
+      (item: any) => item.approve === true || item.reject === true
+    ) && !isGroupComplete(group)
+  );
+}
+
 function isSetFullyApproved(setNumber: number): boolean {
   const group = groupedItems.value.find((g) => g.set === setNumber);
   if (!group) return false;
@@ -442,7 +567,7 @@ function isSetFullyApproved(setNumber: number): boolean {
 }
 
 function getNewApprovedItemsForSet(
-  setNumber: number,
+  setNumber: number
 ): Array<{ key: string; item: any; action: "approve" }> {
   const group = groupedItems.value.find((g) => g.set === setNumber);
   if (!group) return [];
@@ -472,14 +597,14 @@ watch(
     internalPage.value = val;
 
     itemOrderMap.clear();
-  },
+  }
 );
 
 watch(
   () => props.selected,
   (val) => {
     selected.value = val;
-  },
+  }
 );
 
 watch(selected, (val) => {
@@ -492,7 +617,7 @@ watch(
     if (!items || !Array.isArray(items)) return;
 
     Object.keys(persistedActions).forEach(
-      (key) => delete persistedActions[key],
+      (key) => delete persistedActions[key]
     );
 
     items.forEach((group: any) => {
@@ -511,7 +636,7 @@ watch(
       });
     });
   },
-  { immediate: true },
+  { immediate: true }
 );
 
 function getKey(item: any, set?: number): string {
@@ -530,7 +655,7 @@ function isItemSelected(item: any, set?: number): boolean {
 
   if (typeof selected.value[0] === "object" && "unit" in selected.value[0]) {
     return selected.value.some(
-      (s: any) => s.unit === item[props.itemValue] && s.set === set,
+      (s: any) => s.unit === item[props.itemValue] && s.set === set
     );
   }
 
@@ -540,7 +665,7 @@ function isItemSelected(item: any, set?: number): boolean {
 function handleActionClick(
   item: any,
   set: number | undefined,
-  action: "approve" | "reject",
+  action: "approve" | "reject"
 ): void {
   const key = getKey(item, set);
 
@@ -612,6 +737,6 @@ watch(
   () => {
     completedSets.value.clear();
   },
-  { deep: true },
+  { deep: true }
 );
 </script>

package/components/VehicleForm.vue

@@ -32,47 +32,53 @@
             </v-combobox>
           </v-col>
 
+          <v-col v-if="shouldShowField('nric')" cols="12">
+            <InputLabel class="text-capitalize" title="NRIC" required />
+            <InputNRICNumber v-model="vehicle.nric" density="comfortable" :rules="[requiredRule]" />
+          </v-col>
+
           <v-col v-if="shouldShowField('name')" cols="12">
             <v-row>
               <v-col cols="12">
                 <InputLabel class="text-capitalize" title="Full Name" required />
-                <v-text-field v-model.trim="vehicle.name" density="comfortable" :rules="[requiredRule]" />
+                <v-text-field v-model.trim="vehicle.name" density="comfortable" :rules="[requiredRule]" :disabled="disablePrefilledInputs" />
               </v-col>
             </v-row>
           </v-col>
 
-          <v-col v-if="shouldShowField('nric')" cols="12">
-            <InputLabel class="text-capitalize" title="NRIC" required />
-             <InputNRICNumber v-model="vehicle.nric" density="comfortable" :rules="[requiredRule]" />
-          </v-col>
+
 
           <v-col v-if="shouldShowField('phone')" cols="12">
             <InputLabel class="text-capitalize" title="Phone Number" required />
-            <InputPhoneNumberV2 v-model="vehicle.phoneNumber" density="comfortable" :rules="[requiredRule]" />
+            <InputPhoneNumberV2 v-model="vehicle.phoneNumber" density="comfortable" :rules="[requiredRule]" :disabled="disablePrefilledInputs" />
           </v-col>
 
           <v-col v-if="shouldShowField('block')" cols="12">
             <InputLabel class="text-capitalize" title="Block" required />
             <v-select v-model="vehicle.block" :items="blocksArray" item-value="value" item-title="title"
-              @update:model-value="handleChangeBlock" density="comfortable" :rules="[requiredRule]" />
+              @update:model-value="handleChangeBlock" density="comfortable" :rules="[requiredRule]" :disabled="disablePrefilledInputs" />
           </v-col>
 
           <v-col v-if="shouldShowField('level')" cols="12">
             <InputLabel class="text-capitalize" title="Level" required />
-            <v-select v-model="vehicle.level" :items="levelsArray" density="comfortable" :disabled="!vehicle.block"
+            <v-select v-model="vehicle.level" :items="levelsArray" density="comfortable" :disabled="!vehicle.block || disablePrefilledInputs"
               @update:model-value="handleChangeLevel" :rules="[requiredRule]" />
           </v-col>
 
           <v-col v-if="shouldShowField('unit')" cols="12">
             <InputLabel class="text-capitalize" title="Unit" required />
-            <v-select v-model="vehicle.unit" :items="unitsArray" density="comfortable" :disabled="!vehicle.level"
+            <v-select v-model="vehicle.unit" :items="unitsArray" density="comfortable" :disabled="!vehicle.level || disablePrefilledInputs"
               :rules="[requiredRule]" />
           </v-col>
 
           <v-col v-if="shouldShowField('plateNumber')" cols="12">
-            <InputLabel class="text-capitalize" title="Vehicle Number" required />
+            <InputLabel class="text-capitalize" title="Vehicle Numbers" required />
             <!-- <v-text-field v-model="vehicle.plateNumber" density="comfortable" :rules="[requiredRule]" /> -->
-             <InputVehicleNumber v-model="vehicle.plateNumber" density="comfortable" :rules="[requiredRule]" />
+            <template v-for="plate in vehicle.plates" :key="plate.plateNumber">
+              <v-text-field v-model="plate.plateNumber" density="comfortable" :rules="[requiredRule]" class="mb-2" read-only />
+            </template>
+
+            <InputVehicleNumber v-model="newPlateNumber" density="comfortable" :rules="[requiredRule]" />
           </v-col>
 
           <v-col v-if="shouldShowField('remarks')" cols="12">
@@ -149,6 +155,44 @@
         </v-col>
       </v-row>
     </v-toolbar>
+
+    <v-dialog v-model="showMatchingPeopleDialog" max-width="700">
+      <v-card>
+        <v-toolbar>
+          <v-toolbar-title>
+            Existing Records Found
+          </v-toolbar-title>
+        </v-toolbar>
+
+        <v-card-text>
+
+          <v-list lines="three">
+            <v-list-item v-for="v in matchingPeople" :key="v._id" class="cursor-pointer">
+              <v-list-item-title>
+                {{ v.name }}
+              </v-list-item-title>
+
+              <v-list-item-subtitle>
+                Block {{ v.block }} - {{ v.level }} - {{ v.unitName }}
+              </v-list-item-subtitle>
+
+              <div class="mt-1">
+                <v-chip v-for="p in v.plates" :key="p?.plateNumber" size="small" class="mr-1">
+                  {{ p?.plateNumber }}
+                </v-chip>
+              </div>
+
+              <template #append>
+                <v-btn variant="flat" color="primary"  @click="selectNRICRecord(v)">Select</v-btn>
+              </template>
+
+            </v-list-item>
+          </v-list>
+
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+
   </v-card>
 </template>
 
@@ -182,12 +226,13 @@ const prop = defineProps({
 const { requiredRule, formatDateISO8601, debounce } = useUtils();
 const { addVehicle, getCustomSeasonPassTypes, updateVehicle, getVehicleByNRIC } = useVehicle();
 const { getSiteById, getSiteLevels, getSiteUnits } = useSiteSettings();
+const { findPersonByNRICMultipleResult } = usePeople();
 
 const emit = defineEmits(['back', 'select', 'done', 'error', 'close', 'close:all']);
 
 
 const vehicle = reactive<Partial<TVehicle>>({
-  plateNumber: '',
+  plates: [],
   type: prop.type,
   category: "resident",
   name: '',
@@ -205,15 +250,16 @@ const vehicle = reactive<Partial<TVehicle>>({
   _id: '',
 });
 
-
+const newPlateNumber = ref('');
+const disablePrefilledInputs = ref(true);
 
 const blocksArray = ref<TDefaultOptionObj[]>([]);
 const levelsArray = ref<TDefaultOptionObj[]>([]);
 const unitsArray = ref<TDefaultOptionObj[]>([]);
 const seasonPassTypeArray = ref<{ title: string, value: string }[]>([]);
 
-const matchingVehicles = ref<TVehicle[]>([]);
-const showVehicleMatchDialog = ref(false);
+const matchingPeople = ref<Partial<TPeople>[]>([]);
+const showMatchingPeopleDialog = ref(false);
 const checkingNRIC = ref(false);
 
 const defaultSeasonPassTypeArray = computed(() => {
@@ -541,23 +587,42 @@ watch([() => vehicle.end, () => vehicle.start], () => {
 });
 
 
+function selectNRICRecord(record: TPeople) {
+
+  vehicle.name = record.name;
+  vehicle.phoneNumber = record.contact;
+  vehicle.block = Number(record.block);
+  vehicle.level = record.level;
+  vehicle.unit = record.unit;
+
+  vehicle.plates = record.plates || [];
+
+  disablePrefilledInputs.value = true;
+  showMatchingPeopleDialog.value = false;
+
+  refreshLevelsData();
+  refreshUnitsData();
+}
+
+
 async function checkNRIC() {
   if (!vehicle.nric || vehicle.nric.length < 5) return;
 
   checkingNRIC.value = true;
+
   try {
-    const res = await getVehicleByNRIC(vehicle.nric, prop.site);
-    if (res && res.vehicles && res.vehicles.length > 0) {
-      matchingVehicles.value = res.vehicles;
-      showVehicleMatchDialog.value = true;
+    const res = await findPersonByNRICMultipleResult(vehicle.nric, prop.site) as { items: TPeople[] } | null;
+
+    if (res?.items && res.items.length > 0) {
+      matchingPeople.value = res.items || []
+      showMatchingPeopleDialog.value = true;
     } else {
-      showVehicleMatchDialog.value = false;
-      matchingVehicles.value = [];
+      matchingPeople.value = [];
+      showMatchingPeopleDialog.value = false;
     }
+
   } catch (error) {
-    console.error('Error checking NRIC:', error);
-    showVehicleMatchDialog.value = false;
-    matchingVehicles.value = [];
+    console.error("NRIC search failed:", error);
   } finally {
     checkingNRIC.value = false;
   }
@@ -568,26 +633,24 @@ const debounceedCheckNRIC = debounce(checkNRIC, 500);
 watch(
   () => vehicle.nric,
   async (newNRIC) => {
-    if (!newNRIC || newNRIC.length < 5) return;
+    resetVehicleDetails();
+    if (!newNRIC || newNRIC.length < 3) return;
 
     debounceedCheckNRIC();
   }
 );
 
-watch(
-  () => vehicle.plateNumber,
-  (newData) => {
-   
-    const plateNumberExistsInNRICMatches = matchingVehicles.value.some(v => v.plateNumber === newData);
-    if (plateNumberExistsInNRICMatches) {
-      errorMessage.value = 'The vehicle number you entered is already associated with the NRIC provided. Please double check.';
-      showVehicleMatchDialog.value = true;
-    } else {
-      errorMessage.value = '';  
-      showVehicleMatchDialog.value = false;
-    }
+
+const resetVehicleDetails = () => {
+  vehicle.name = '';
+  vehicle.phoneNumber = '';
+  vehicle.block = '';
+  vehicle.level = '';
+  vehicle.unit = '';
+  vehicle.plates = [];
+  disablePrefilledInputs.value = false;
 }
-);
+
 
 
 

package/components/VehicleManagement.vue

@@ -9,13 +9,13 @@
         <v-row no-gutters class="px-5 py-1 d-flex align-center justify-end ga-3">
           <v-text-field v-model="searchInput" density="compact" placeholder="Search" clearable max-width="300"
             append-inner-icon="mdi-magnify" hide-details />
-          <v-select v-model="vehicleType" density="compact" item-title="label" item-value="value"
+          <v-select v-model="vehicleTypeFilter" density="compact" item-title="label" item-value="value"
             placeholder="Filter by Type" clearable max-width="200" hide-details :items="typeOptions" />
         </v-row>
       </template>
 
       <template #item.block="{ value }">
-        {{ value ? `blk ${value}` : "" }}
+        {{ value ? `Blk ${value}` : "" }}
       </template>
       <template #item.status="{ value }">
         <v-chip :color="formatVehicleStatus(value).color" size="x-small" dark>
@@ -25,7 +25,7 @@
 
       </template>
 
-      <template #item.plateNumbers="{ value, item }">
+      <template #item.plates="{ value, item }">
        <PlateNumberDisplay :plate-numbers="value" :default-value="item.plateNumber" />
       </template>
     </TableMain>
@@ -55,9 +55,9 @@
           <v-row no-gutters class="ga-1 mb-5">
             
             <template v-for="(label, key) in formattedFields" :key="key">
-              <v-col v-if="key === 'plateNumbers'" class="d-flex ga-2">
+              <v-col v-if="key === 'plates'" class="d-flex ga-2">
                 <span class="d-flex ga-3 align-center"><strong>{{ label }}:</strong></span>
-                <PlateNumberDisplay :plate-numbers="selectedVehicleObject[key]" :default-value="selectedVehicleObject.plateNumber" />  
+                <PlateNumberDisplay :plate-numbers="selectedVehicleObject[key]" show-all :default-value="selectedVehicleObject.plateNumber" />  
               </v-col>
 
               <v-col v-else-if="selectedVehicleObject[key]" cols="12">
@@ -99,10 +99,11 @@ const props = defineProps({
 const headers = [
       { title: "Name", value: "name" },
       // { title: "Building", value: "buildingName" },
-      { title: "Vehicle Numbers", value: "plateNumbers" },
+      { title: "Vehicle Numbers", value: "plates" },
       { title: "NRIC", value: "nric" },
       { title: "Block", value: "block" },
       { title: "Floor", value: "level" },
+      { title: "Unit", value: "unit" },
       { title: "Category", value: "category" },
       { title: "Type", value: "type" },
       { title: "Status", value: "status" },
@@ -123,6 +124,7 @@ const searchInput = ref("")
 const loading = ref(false);
 const selectedVehicleId = ref<string | null>(null)
 const vehicleType = ref<TVehicleType | null>(null);
+const  vehicleTypeFilter = ref<TVehicleType | null>(null);
 
 const message = ref("");
 const messageColor = ref("");
@@ -151,7 +153,7 @@ const typeOptions = [
 
 const formattedFields: Partial<Record<keyof TVehicle, string>> = {
   name: "Name",
-  plateNumbers: "Vehicle Numbers",
+  plates: "Vehicle Numbers",
   phoneNumber: "Phone Number",
   nric: "NRIC",
   block: "Block",
@@ -201,7 +203,7 @@ const { data: getVehiclesReq, refresh: getVehiclesRefresh, pending: getVehiclesP
       getVehicles({
         page: page.value,
         search: searchInput.value,
-        type: vehicleType.value ?? "",
+        type: vehicleTypeFilter.value ?? "",
       }),
     {
       watch: [page],
@@ -289,7 +291,7 @@ async function submitDelete() {
 }
 
 const debouncedSearch = debounce(getVehiclesRefresh, 500);
-watch([searchInput, vehicleType], () => {
+watch([searchInput, vehicleTypeFilter], () => {
   page.value = 1;
   debouncedSearch()
 })

package/components/VisitorManagement.vue

@@ -108,7 +108,7 @@
       </template>
     </TableMain>
 
-    <v-dialog v-model="dialog.showSelection" width="450" persistent>
+  <v-dialog v-model="dialog.showSelection" width="450" persistent>
       <VisitorFormSelection @cancel="dialog.showSelection = false" @select="handleSelectVisitorType" />
     </v-dialog>
 

package/components/WorkOrder/Main.vue

@@ -437,7 +437,8 @@ async function handleFileAdded(file: File) {
     const res = await addFile(file);
     const uploadedId = res?.id;
     if (uploadedId) {
-      const url = `${API_DO_STORAGE_ENDPOINT}/${uploadedId}`;
+      // const url = `${API_DO_STORAGE_ENDPOINT}/${uploadedId}`;
+      const url = `${uploadedId}`;
       _workOrder.value.attachments = _workOrder.value.attachments ?? [];
       _workOrder.value.attachments.push(url);
     }

package/composables/useAccessManagement.ts

@@ -162,6 +162,16 @@ export default function useAccessManagement() {
     );
   }
 
+  function getCardDetails(params: { siteId: string; cardId: string }) {
+    return useNuxtApp().$api<{ message: string; data: Record<string, any> }>(
+      `/api/access-management/card-details`,
+      {
+        method: "GET",
+        query: { siteId: params.siteId, cardId: params.cardId },
+      }
+    );
+  }
+
   return {
     getDoorAccessLevels,
     getLiftAccessLevels,
@@ -175,5 +185,6 @@ export default function useAccessManagement() {
     getAvailableAccessCards,
     deleteCard,
     getCardHistory,
+    getCardDetails,
   };
 }

package/composables/useFeedback.ts

@@ -75,9 +75,9 @@ export default function useFeedback() {
   }
 
   function deleteFeedback(id: string) {
-    return useNuxtApp().$api<Record<string, any>>(`/api/feedbacks/deleted/feedback`, {
+    return useNuxtApp().$api<Record<string, any>>(`/api/feedbacks/deleted/feedback/${id}`, {
       method: "PUT",
-      query: { id },
+      // query: { id },
     });
   }
 

package/composables/usePeople.ts

@@ -25,6 +25,15 @@ export default function () {
     });
   }
 
+    async function findPersonByNRICMultipleResult(
+    nric: string, site: string
+  ){
+    return await $fetch<Record<any, any>>(`/api/people/all-nric`, {
+      method: "GET",
+      query: { nric, site }
+    });
+  }
+
   async function findPersonByContact(
     contact: string
   ): Promise<null | Partial<TPeople>> {
@@ -95,6 +104,7 @@ export default function () {
     updateById,
     deleteById,
     findPersonByNRIC,
+    findPersonByNRICMultipleResult,
     findPersonByContact,
     getPeopleByUnit,
     searchCompanyList,

package/composables/useWorkOrder.ts

@@ -72,9 +72,9 @@ export default function useWorkOrder() {
   }
 
   function deleteWorkOrder(id: string) {
-    return useNuxtApp().$api<Record<string, any>>(`/api/work-orders/deleted/work-order`, {
+    return useNuxtApp().$api<Record<string, any>>(`/api/work-orders/deleted/work-order/${id}`, {
       method: "PUT",
-      query: { id },
+      // query: { id },
     });
   }
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "1.10.5",
+  "version": "1.10.6",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {

package/types/people.d.ts

@@ -16,8 +16,11 @@ declare type TPeople = {
   org?: string;
   site?: string,
   type?: TPeopleType;
+  plates?: TPlateNumber[]
 };
 
+declare type TPlateNumber = { plateNumber: string, recNo: string }
+
 
 declare type TPeoplePayload = Pick<TGuest, "name" | "block" | "level" | "unit" | "unitName" | "contact" | "plateNumber" | "nric" | "contact" | "remarks" | "org" | "site" | "start" | "end" | "type"> 
 

package/types/vehicle.d.ts

@@ -1,6 +1,6 @@
 declare type TVehicle = {
   plateNumber: string;
-  plateNumbers?: string[]; // For display purposes, the API will return an array of plate numbers if there are multiple associated with the same vehicle record
+  plates?: TPlateNumber[]; // For display purposes, the API will return an array of plate numbers if there are multiple associated with the same vehicle record
   type: TVehicleType;
   category: "resident" | "visitor";
   direction: "entry" | "exit" | "both" | "none";

package/components/AccessCardHistoryDialog.vue

@@ -1,133 +0,0 @@
-<template>
-  <v-dialog :model-value="modelValue" width="480" persistent>
-    <v-card width="100%">
-      <v-toolbar density="compact" color="black">
-        <v-toolbar-title class="text-subtitle-1 font-weight-medium">
-          Card History — {{ card?.cardNo ?? "N/A" }}
-        </v-toolbar-title>
-        <v-btn icon @click="emit('update:modelValue', false)">
-          <v-icon>mdi-close</v-icon>
-        </v-btn>
-      </v-toolbar>
-
-      <v-card-text style="max-height: 70vh; overflow-y: auto" class="pa-4">
-        <div v-if="pending" class="d-flex justify-center align-center py-8">
-          <v-progress-circular indeterminate color="black" />
-        </div>
-
-        <div v-else-if="!history.length" class="text-center text-grey py-8">
-          No history available.
-        </div>
-
-        <v-timeline v-else side="end" density="compact" truncate-line="both">
-          <v-timeline-item
-            v-for="(item, index) in history"
-            :key="index"
-            :dot-color="actionColor(item.action)"
-            size="small"
-          >
-            <template #icon>
-              <v-icon size="14" color="white">{{ actionIcon(item.action) }}</v-icon>
-            </template>
-
-            <div class="mb-4">
-              <div class="d-flex align-center ga-2 mb-1">
-                <v-chip
-                  :color="actionColor(item.action)"
-                  variant="flat"
-                  size="x-small"
-                  class="text-capitalize font-weight-medium"
-                >
-                  {{ actionLabel(item.action) }}
-                </v-chip>
-              </div>
-              <div class="text-body-2">{{ item.performedBy?.name ?? "N/A" }}</div>
-              <div class="text-caption text-grey">{{ formatDate(item.date) }}</div>
-            </div>
-          </v-timeline-item>
-        </v-timeline>
-      </v-card-text>
-    </v-card>
-  </v-dialog>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-  modelValue: {
-    type: Boolean,
-    default: false,
-  },
-  card: {
-    type: Object as PropType<Record<string, any> | null>,
-    default: null,
-  },
-});
-
-const emit = defineEmits<{
-  "update:modelValue": [value: boolean];
-}>();
-
-const { getCardHistory } = useAccessManagement();
-
-const history = ref<Record<string, any>[]>([]);
-const pending = ref(false);
-
-watch(
-  () => props.modelValue,
-  async (val) => {
-    if (val && props.card?._id) {
-      pending.value = true;
-      try {
-        const data = await getCardHistory(props.card._id);
-        history.value = Array.isArray(data) ? data : [];
-      } finally {
-        pending.value = false;
-      }
-    } else {
-      history.value = [];
-    }
-  }
-);
-
-function actionLabel(action: string) {
-  const map: Record<string, string> = {
-    available: "Created",
-    assign: "Assigned",
-    replace: "Replaced",
-    deleted: "Deleted",
-  };
-  return map[action] ?? action;
-}
-
-function actionColor(action: string) {
-  const map: Record<string, string> = {
-    available: "success",
-    assign: "primary",
-    replace: "orange",
-    deleted: "error",
-  };
-  return map[action] ?? "grey";
-}
-
-function actionIcon(action: string) {
-  const map: Record<string, string> = {
-    available: "mdi-plus",
-    assign: "mdi-account-check",
-    replace: "mdi-swap-horizontal",
-    deleted: "mdi-delete",
-  };
-  return map[action] ?? "mdi-circle-small";
-}
-
-function formatDate(date: string) {
-  if (!date) return "N/A";
-  return new Intl.DateTimeFormat("en-GB", {
-    day: "2-digit",
-    month: "short",
-    year: "numeric",
-    hour: "2-digit",
-    minute: "2-digit",
-    hour12: true,
-  }).format(new Date(date));
-}
-</script>