@7365admin1/layer-common 3.0.31-staging.24 → 3.1.0

package/components/VisitorForm.vue

@@ -121,6 +121,77 @@
             </v-row>
           </v-col>
 
+          <v-col v-if="shouldShowField('nric')" cols="12">
+            <v-row>
+              <v-col cols="12">
+                <InputLabel class="text-capitalize" title="NRIC" :required="requireNRIC" />
+                <v-menu v-model="nricSearchMenu" location="bottom" offset-y :close-on-content-click="false">
+                  <template #activator="{ props }">
+                    <InputNRICNumber v-bind="props" v-model="visitor.nric" density="comfortable" @focus="isNricFieldFocused = true" @blur="isNricFieldFocused = false"
+                      :rules="[requireNRIC ? requiredRule : () => true]" :key="currentAutofillSource + 'nric-key'"
+                      @update:model-value="handleUpdateNRIC" :loading="fetchPersonByNRICPending" />
+                  </template>
+
+                  <v-list v-if="nricSearchResults.length" class="pa-1">
+                    <v-list-item v-for="(item, index) in nricSearchResults" :key="item._id || index"
+                      @click="selectNricSearchResult(item)" class="cursor-pointer">
+                      <v-list-item-title>{{ item.name || 'Unknown' }}</v-list-item-title>
+                      <v-list-item-subtitle>{{ item.contact }}</v-list-item-subtitle>
+                    </v-list-item>
+                  </v-list>
+                </v-menu>
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col v-if="shouldShowField('contact')" cols="12">
+            <InputLabel class="text-capitalize" title="Phone Number" required />
+            <v-menu v-model="phoneSearchMenu" location="bottom" offset-y :close-on-content-click="false">
+              <template #activator="{ props }">
+                <InputPhoneNumberV2 v-bind="props" v-model="visitor.contact" :rules="[requiredRule]" @focus="isPhoneFieldFocused = true" @blur="isPhoneFieldFocused = false"
+                  density="comfortable" :key="currentAutofillSource + 'phone-key'"
+                  @update:model-value="handleUpdatePhoneNumber" />
+              </template>
+
+              <v-list v-if="phoneSearchResults.length" class="pa-1">
+                <v-list-item v-for="(item, index) in phoneSearchResults" :key="item._id || index"
+                  @click="selectPhoneNumberSearchResult(item)" class="cursor-pointer nric-search-item">
+                  <div class="d-flex align-center justify-space-between ga-4 w-100">
+                    <span class="text-subtitle-1">{{ item.name || 'Unknown' }}</span>
+                    <span class="text-subtitle-1 text-no-wrap">NRIC: {{ item.nric || 'N/A' }}</span>
+                  </div>
+                </v-list-item>
+              </v-list>
+            </v-menu>
+          </v-col>
+
+
+          <v-col v-if="shouldShowField('plateNumber')" cols="12">
+            <v-row>
+              <v-col cols="12">
+                <InputLabel class="text-capitalize" title="Vehicle Number" :required="isVehicleRequired" />
+                <!-- <v-text-field v-model.trim.uppercase="visitor.plateNumber" density="comfortable" /> -->
+                <v-menu v-model="vehicleSearchMenu" location="bottom" offset-y :close-on-content-click="false">
+                  <template #activator="{ props }">
+                    <InputVehicleNumber v-bind="props" v-model="visitor.plateNumber" density="comfortable"
+                      @update:model-value="handleUpdateVehicleNumber" @focus="isPlateNumberFieldFocused = true" @blur="isPlateNumberFieldFocused = false" />
+                  </template>
+
+                  <v-list v-if="vehicleSearchResults.length" class="pa-1">
+                    <v-list-item v-for="(item, index) in vehicleSearchResults" :key="item._id || index"
+                      @click="selectPlateNumberSearchResult(item)"
+                      class="cursor-pointer nric-search-item">
+                      <div class="d-flex align-center justify-space-between ga-4 w-100">
+                        <span class="text-subtitle-1">{{ item.name || 'Unknown' }}</span>
+                        <span class="text-subtitle-1 text-no-wrap">NRIC: {{ item.nric || 'N/A' }}</span>
+                      </div>
+                    </v-list-item>
+                  </v-list>
+                </v-menu>
+              </v-col>
+            </v-row>
+          </v-col>
+
           <v-col v-if="shouldShowField('deliveryType')" cols="12">
             <v-row>
               <v-col cols="12">
@@ -167,7 +238,7 @@
                 :loading="siteDataPending" variant="outlined" density="comfortable" persistent-hint small-chips>
                 <template v-slot:no-data>
                   <v-list-item>
-                    <v-list-item-title v-if="siteDataPending">
+                    <v-list-item-title v-if="fetchCompanyListPending">
                       <v-progress-circular indeterminate size="20" class="mr-3" />
                       Searching companies…
                     </v-list-item-title>
@@ -189,7 +260,45 @@
             </v-col>
           </template>
 
+          <template v-if="shouldShowField('delivery-company')">
+            <v-col cols="12">
+              <InputLabel class="text-capitalize" title="Delivery Company" />
+              <v-combobox v-model="deliveryCompany" v-model:search="deliveryCompanyInput" ref="companyCombo"
+                autocomplete="off" :hide-no-data="false" :items="deliveryCompanyList" item-value="value"
+                :loading="siteDataPending" variant="outlined" density="comfortable" persistent-hint small-chips>
+                <template v-slot:no-data>
+                  <v-list-item>
+                    <v-list-item-title v-if="fetchCompanyListPending">
+                      <v-progress-circular indeterminate size="20" class="mr-3" />
+                      Searching companies…
+                    </v-list-item-title>
+                    <v-list-item-title v-else-if="companyNameInput" @click.stop="handleAddNewCompany"
+                      class="d-flex align-center ga-1">
+                      <span><v-icon icon="mdi-plus" /></span>Add "<strong>{{
+                        companyNameInput
+                      }}</strong>" as new company.
+                    </v-list-item-title>
+                    <v-list-item-title v-else-if="!companyNameInput && companyNames.length === 0">
+                      Start typing to search for companies.
+                    </v-list-item-title>
+                    <v-list-item-title v-else>
+                      No companies available. Start typing to add a new one.
+                    </v-list-item-title>
+                  </v-list-item>
+                </template>
+              </v-combobox>
+            </v-col>
+          </template>
 
+          <v-col v-if="shouldShowField('plateNumber')" cols="12">
+            <v-row>
+              <v-col cols="12">
+                <InputLabel class="text-capitalize" title="Vehicle Number" required />
+                <!-- <v-text-field v-model.trim.uppercase="visitor.plateNumber" density="comfortable" /> -->
+                <InputVehicleNumber v-model="visitor.plateNumber" density="comfortable" />
+              </v-col>
+            </v-row>
+          </v-col>
 
           <v-col v-if="shouldShowField('block')" cols="12">
             <InputLabel class="text-capitalize" title="Block" required />
@@ -307,7 +416,7 @@
             <span class="text-no-wrap">NRIC: {{ selectedNricSearchResult.nric || "N/A" }}</span>
           </div>
 
-          <template v-if="selectedNricContactOptions.length >= 1">
+          <template v-if="!visitor.contact && selectedNricContactOptions.length >= 1">
             <h3 class="nric-options-section-title font-weight-bold mb-2">Contact</h3>
             <v-radio-group v-model="selectedNricContact" hide-details color="success" class="nric-option-group">
               <v-radio v-for="contact in selectedNricContactOptions" :key="contact" :label="contact" :value="contact"
@@ -315,7 +424,7 @@
             </v-radio-group>
           </template>
 
-          <template v-if="selectedNricPlateOptions.length >= 1">
+          <template v-if="!visitor.plateNumber && selectedNricPlateOptions.length >= 1">
             <h3 class="nric-options-section-title font-weight-bold mb-2 mt-5">Vehicle</h3>
             <v-radio-group v-model="selectedNricPlate" hide-details color="success" class="nric-option-group">
               <v-radio v-for="plate in selectedNricPlateOptions" :key="plate" :label="plate" :value="plate"
@@ -683,10 +792,6 @@ const requireNRIC = computed(() => {
   return prop.type !== "walk-in" && prop.type !== "guest";
 });
 
-const isVehicleRequired = computed(() => {
-  return ["guest", "drop-off", "pick-up"].includes(prop.type);
-});
-
 const hidQrCodePassConfig = computed(() => {
   return (siteData.value as any)?.metadata?.hidQrCodePass || {};
 });
@@ -1084,9 +1189,21 @@ function confirmNricAutofillOptions() {
   closeNricAutofillOptions();
 }
 
+const {
+  data: fetchCompanyListReq,
+  refresh: fetchCompanyListRefresh,
+  pending: fetchCompanyListPending,
+} = useLazyAsyncData(`fetch-company-list`, () => {
+  if (!companyNameInput.value) return Promise.resolve(null);
+  return searchCompanyList(companyNameInput.value);
+});
 
-
-
+watch(fetchCompanyListReq, (arr) => {
+  if (Array.isArray(arr)) {
+    companyAutofillDataArray.value = arr;
+    companyNames.value = arr?.flatMap((x) => x?.companyName);
+  }
+});
 function getVisitorSearchItems(res: any): TVisitor[] {
   const items =
     res?.items ||
@@ -1198,6 +1315,18 @@ async function handleCheckout(visitorId: string) {
   }
 }
 
+const debounceFetchCompany = debounce(
+  async () => fetchCompanyListRefresh(),
+  200
+);
+
+watch(companyNameInput, async (val) => {
+  if (!val) {
+    companyNames.value = [];
+    return;
+  }
+  await debounceFetchCompany();
+});
 
 function handleAutofillDataViaVehicleNumber(item: TPeople) {
   currentAutofillSource.value = "vehicleNumber";
@@ -1206,7 +1335,9 @@ function handleAutofillDataViaVehicleNumber(item: TPeople) {
   visitor.nric = item.nric;
   visitor.contact = item.contact;
   companyNames.value = item.companyName ?? [];
-
+  if (!visitor.company) {
+    visitor.company = companyNames.value?.[0];
+  }
   visitor.block = item.block ?? "";
   visitor.level = item.level ?? "";
   visitor.unit = item.unit ?? "";

package/components/VisitorManagement.vue

@@ -315,9 +315,7 @@
                 style="cursor: pointer"
               >
                 <v-chip
-                  v-for="pass in item.visitorPass.filter(
-                    (i) => i.status != 'Removed'
-                  )"
+                  v-for="pass in item.visitorPass"
                   :key="(pass as any)._id ?? (pass as any).keyId"
                   prepend-icon="mdi-card-bulleted-outline"
                   size="x-small"
@@ -327,9 +325,7 @@
                   {{ (pass as any)?.prefixAndName }}
                 </v-chip>
                 <v-chip
-                  v-for="key in item.passKeys.filter(
-                    (i) => i.status != 'Removed'
-                  )"
+                  v-for="key in item.passKeys"
                   :key="(key as any)._id ?? (key as any).keyId"
                   prepend-icon="mdi-key"
                   size="x-small"
@@ -408,16 +404,9 @@
           </v-menu>
 
           <!-- QRCODE identifier -->
-          <div
-            v-if="
-              item.accessCards?.type === 'QRCODE' && item.accessCards?.cardNo
-            "
-            class="d-flex align-center ga-1 mt-1"
-          >
+          <div v-if="item.accessCards?.type === 'QRCODE' && item.accessCards?.cardNo" class="d-flex align-center ga-1 mt-1">
             <v-icon size="15" icon="mdi-qrcode" color="teal" />
-            <v-chip size="x-small" variant="tonal" color="teal"
-              >QR · ({{ item.cards?.flat().length ?? 1 }})</v-chip
-            >
+            <v-chip size="x-small" variant="tonal" color="teal">QR · ({{ item.cards?.flat().length ?? 1 }})</v-chip>
           </div>
         </v-row>
       </template>
@@ -825,9 +814,7 @@
                 item-title="label"
                 item-value="value"
                 v-model="pass.status"
-                :disabled="
-                  selectedVisitorObject.checkOut || pass.status == 'Removed'
-                "
+                :disabled="selectedVisitorObject.checkOut"
               ></v-select>
               <v-textarea
                 v-if="pass.status === 'Lost' || pass.status === 'Damaged'"
@@ -864,9 +851,7 @@
                 item-title="label"
                 item-value="value"
                 v-model="key.status"
-                :disabled="
-                  selectedVisitorObject.checkOut || key.status == 'Removed'
-                "
+                :disabled="selectedVisitorObject.checkOut"
               ></v-select>
               <v-textarea
                 v-if="key.status === 'Lost' || key.status === 'Damaged'"
@@ -926,87 +911,37 @@
     <v-dialog v-model="dialog.returnNfcCard" max-width="450" persistent>
       <v-card>
         <v-toolbar density="compact" color="">
-          <v-row
-            no-gutters
-            class="d-flex fill-height justify-space-between align-center px-4"
-          >
+          <v-row no-gutters class="d-flex fill-height justify-space-between align-center px-4">
             <span class="font-weight-bold">Return NFC Card</span>
-            <v-btn
-              icon="mdi-close"
-              variant="text"
-              @click="dialog.returnNfcCard = false"
-            />
+            <v-btn icon="mdi-close" variant="text" @click="dialog.returnNfcCard = false" />
           </v-row>
         </v-toolbar>
         <v-card-text class="px-4 pb-2">
-          <p class="text-body-2 mb-3">
-            Please indicate the status of the NFC card before checking out.
-          </p>
+          <p class="text-body-2 mb-3">Please indicate the status of the NFC card before checking out.</p>
           <div>
             <InputLabel class="text-capitalize" title="Full Name" />
-            <v-text-field
-              v-model="selectedVisitorObject.name"
-              density="comfortable"
-              readonly
-            />
+            <v-text-field v-model="selectedVisitorObject.name" density="comfortable" readonly />
           </div>
           <div>
             <InputLabel class="text-capitalize" title="Location" />
-            <v-text-field
-              v-model="selectedVisitorObject.location"
-              density="comfortable"
-              readonly
-            />
+            <v-text-field v-model="selectedVisitorObject.location" density="comfortable" readonly />
           </div>
-          <div
-            v-for="(card, idx) in nfcCardReturnStatuses"
-            :key="card.cardId"
-            class="mb-4"
-          >
+          <div v-for="(card, idx) in nfcCardReturnStatuses" :key="card.cardId" class="mb-4">
             <div class="d-flex align-center ga-2 mb-2">
               <v-icon size="18" icon="mdi-credit-card-outline" color="purple" />
-              <v-chip size="small" variant="tonal" color="purple">{{
-                card.cardNo
-              }}</v-chip>
+              <v-chip size="small" variant="tonal" color="purple">{{ card.cardNo }}</v-chip>
             </div>
-            <v-select
-              v-model="nfcCardReturnStatuses[idx].status"
-              :items="nfcPassStatusOptions"
-              item-title="label"
-              item-value="value"
-              density="comfortable"
-              hide-details
-            />
-            <v-textarea
-              v-if="card.status === 'Lost' || card.status === 'Damage'"
-              v-model="nfcCardReturnStatuses[idx].remarks"
-              label="Remarks (required)"
-              no-resize
-              rows="3"
-              class="mt-2"
-              density="compact"
-            />
+            <v-select v-model="nfcCardReturnStatuses[idx].status" :items="nfcPassStatusOptions" item-title="label" item-value="value" density="comfortable" hide-details />
+            <v-textarea v-if="card.status === 'Lost' || card.status === 'Damage'" v-model="nfcCardReturnStatuses[idx].remarks" label="Remarks (required)" no-resize rows="3" class="mt-2" density="compact" />
           </div>
         </v-card-text>
         <v-toolbar class="pa-0" density="compact">
           <v-row no-gutters>
             <v-col cols="6">
-              <v-btn variant="text" block @click="dialog.returnNfcCard = false"
-                >Close</v-btn
-              >
+              <v-btn variant="text" block @click="dialog.returnNfcCard = false">Close</v-btn>
             </v-col>
             <v-col cols="6">
-              <v-btn
-                color="red"
-                variant="flat"
-                height="48"
-                rounded="0"
-                block
-                :loading="loading.checkingOut"
-                :disabled="!canConfirmNfcCheckout"
-                @click="handleNfcCheckout"
-                >Confirm Checkout</v-btn
-              >
+              <v-btn color="red" variant="flat" height="48" rounded="0" block :loading="loading.checkingOut" :disabled="!canConfirmNfcCheckout" @click="handleNfcCheckout">Confirm Checkout</v-btn>
             </v-col>
           </v-row>
         </v-toolbar>
@@ -1036,7 +971,7 @@
         @close="dialog.editPassKey = false"
         @done="
           () => {
-            // dialog.editPassKey = false;
+            dialog.editPassKey = false;
             getVisitorRefresh();
           }
         "
@@ -1891,8 +1826,7 @@ const nfcCardReturnStatuses = ref<
 const canConfirmCheckout = computed(() => {
   const allEntries = [...passReturnStatuses.value, ...keyReturnStatuses.value];
   return allEntries.every((entry) => {
-    if (!entry.status || ["In Use", "Not Returned"].includes(entry.status))
-      return false;
+    if (!entry.status || ["In Use","Not Returned"].includes(entry.status)) return false;
     if (
       (entry.status === "Lost" || entry.status === "Damaged") &&
       !entry.remarks.trim()
@@ -1906,8 +1840,7 @@ const canConfirmNfcCheckout = computed(() => {
   if (nfcCardReturnStatuses.value.length === 0) return false;
   return nfcCardReturnStatuses.value.every(({ status, remarks }) => {
     if (!status || status === "In Use") return false;
-    if ((status === "Lost" || status === "Damage") && !remarks.trim())
-      return false;
+    if ((status === "Lost" || status === "Damage") && !remarks.trim()) return false;
     return true;
   });
 });
@@ -1950,28 +1883,17 @@ function handleCheckout(userId: string) {
     return;
   }
 
-  const hasNfc =
-    visitor?.accessCards?.type === "NFC" && !!visitor?.accessCards?.cardNo;
+  const hasNfc = visitor?.accessCards?.type === "NFC" && !!visitor?.accessCards?.cardNo;
   if (hasNfc) {
     const allCards: any[] = visitor.cards?.flat() ?? [];
     nfcCardReturnStatuses.value = allCards.map((card: any) => ({
       cardId: card._id,
-      cardNo:
-        card._id === visitor.accessCards._id
-          ? visitor.accessCards.cardNo
-          : card._id,
+      cardNo: card._id === visitor.accessCards._id ? visitor.accessCards.cardNo : card._id,
       status: "In Use",
       remarks: "",
     }));
     if (nfcCardReturnStatuses.value.length === 0) {
-      nfcCardReturnStatuses.value = [
-        {
-          cardId: visitor.accessCards._id,
-          cardNo: visitor.accessCards.cardNo,
-          status: "In Use",
-          remarks: "",
-        },
-      ];
+      nfcCardReturnStatuses.value = [{ cardId: visitor.accessCards._id, cardNo: visitor.accessCards.cardNo, status: "In Use", remarks: "" }];
     }
     dialog.returnNfcCard = true;
     return;
@@ -2039,9 +1961,7 @@ async function handleNfcCheckout() {
       })),
     });
     if (res) {
-      await updateVisitor(userId as string, {
-        checkOut: new Date().toISOString(),
-      });
+      await updateVisitor(userId as string, { checkOut: new Date().toISOString() });
       showMessage("Visitor successfully checked-out!", "info");
       await getVisitorRefresh();
       dialog.returnNfcCard = false;
@@ -2049,10 +1969,7 @@ async function handleNfcCheckout() {
     }
   } catch (error: any) {
     const errorMessage = error?.response?._data?.message;
-    showMessage(
-      errorMessage || "Something went wrong. Please try again later.",
-      "error"
-    );
+    showMessage(errorMessage || "Something went wrong. Please try again later.", "error");
   } finally {
     loading.checkingOut = false;
   }
@@ -2324,7 +2241,11 @@ const syncVisitorFiltersFromRoute = () => {
 
 onMounted(syncVisitorFiltersFromRoute);
 
-watch(() => route.query, syncVisitorFiltersFromRoute, { deep: true });
+watch(
+  () => route.query,
+  syncVisitorFiltersFromRoute,
+  { deep: true }
+);
 
 const { socketUnregisteredVisitorTrigger, visitorSocketData } =
   useVisitorSocket();

package/composables/useCleaningSchedulePermission.ts

@@ -1,23 +1,58 @@
 export function useCleaningSchedulePermission() {
+  const { hasPermission } = usePermission();
+  const { permissions } = useCleaningPermission();
+
   const { userAppRole } = useLocalSetup();
 
-  const can = (action: string) =>
-    computed(() => {
-      const permissions = userAppRole.value?.permissions;
-      if (!permissions) return false;
-      if (permissions.includes("*")) return true;
-      return permissions.some((permission) =>
-        permission.endsWith(`-schedule-mgmt:${action}`),
-      );
-    });
+  const canViewSchedules = computed(() => {
+    if (!userAppRole.value) return false;
+    if (userAppRole.value.permissions.includes("*")) return true;
+    return hasPermission(userAppRole.value, permissions, "cleaning-schedule-mgmt", "see-all-schedules");
+  });
+
+  const canViewScheduleDetails = computed(() => {
+    if (!userAppRole.value) return false;
+    if (userAppRole.value.permissions.includes("*")) return true;
+    return hasPermission(userAppRole.value, permissions, "cleaning-schedule-mgmt", "see-schedule-details");
+  });
+
+  const canDownloadSchedule = computed(() => {
+    if (!userAppRole.value) return false;
+    if (userAppRole.value.permissions.includes("*")) return true;
+    return hasPermission(userAppRole.value, permissions, "cleaning-schedule-mgmt", "download-schedule");
+  });
+
+  const canManageScheduleTasks = computed(() => {
+    if (!userAppRole.value) return false;
+    if (userAppRole.value.permissions.includes("*")) return true;
+    return hasPermission(userAppRole.value, permissions, "cleaning-schedule-mgmt", "manage-schedule-tasks");
+  });
+
+  const canGenerateChecklist = computed(() => {
+    if (!userAppRole.value) return false;
+    if (userAppRole.value.permissions.includes("*")) return true;
+    return hasPermission(userAppRole.value, permissions, "cleaning-schedule-mgmt", "generate-checklist");
+  });
+
+  const canViewHistory = computed(() => {
+    if (!userAppRole.value) return false;
+    if (userAppRole.value.permissions.includes("*")) return true;
+    return hasPermission(userAppRole.value, permissions, "cleaning-schedule-mgmt", "view-history");
+  });
+
+  const canAddRemarks = computed(() => {
+    if (!userAppRole.value) return false;
+    if (userAppRole.value.permissions.includes("*")) return true;
+    return hasPermission(userAppRole.value, permissions, "cleaning-schedule-mgmt", "add-remarks");
+  });
 
   return {
-    canViewSchedules: can("see-all-schedules"),
-    canViewScheduleDetails: can("see-schedule-details"),
-    canDownloadSchedule: can("download-schedule"),
-    canManageScheduleTasks: can("manage-schedule-tasks"),
-    canGenerateChecklist: can("generate-checklist"),
-    canViewHistory: can("view-history"),
-    canAddRemarks: can("add-remarks"),
+    canViewSchedules,
+    canViewScheduleDetails,
+    canDownloadSchedule,
+    canManageScheduleTasks,
+    canGenerateChecklist,
+    canViewHistory,
+    canAddRemarks,
   };
 }

package/composables/useEquipment.ts

@@ -27,7 +27,6 @@ export default function useEquipment() {
           name: payload.name,
           unitOfMeasurement: payload.unitOfMeasurement,
           serviceType,
-          ...(payload.attachment ? { attachment: payload.attachment } : {}),
         },
       }
     );
@@ -41,7 +40,6 @@ export default function useEquipment() {
         body: {
           name: payload.name,
           unitOfMeasurement: payload.unitOfMeasurement,
-          ...(payload.attachment ? { attachment: payload.attachment } : {}),
         },
       }
     );

package/composables/useLocalAuth.ts

@@ -183,4 +183,4 @@ export default function useLocalAuth() {
     updateVerificationStatus,
     signUp,
   };
-}
+}

package/composables/useNFCPatrolDailyReport.ts

@@ -63,12 +63,15 @@ export function useNFCPatrolDailyReport(
 
     try {
       const [logsRes, siteInfo] = await Promise.all([
-        getPatrolLogs({
+        getPatrolLogs<NFCPatrolLogListResponse>({
           page: 1,
           limit: 100,
           site,
           date: filters.date,
           routeId: filters.route,
+          routeStartTime: filters.timeRange
+            ? filters.timeRange.split(" - ")[0]
+            : undefined,
         }),
         getSiteById(site),
       ]);