@7365admin1/layer-common 3.0.7 → 3.0.9

package/components/Layout/NavigationDrawer.vue

@@ -12,7 +12,7 @@
 
       <!-- NAVIGATION ITEMS -->
       <v-tooltip
-        v-for="(item, index) in props.navigationItems"
+        v-for="(item, index) in navigationItems"
         :key="`${item.title}-${index}`"
         location="right"
         :disabled="!item.disabled"
@@ -52,6 +52,36 @@ const emit = defineEmits(["navigate"]);
 
 const { drawer } = useLocal();
 const { APP_NAME } = useRuntimeConfig().public;
+const route = useRoute();
+const orgId = computed(() => String(route.params.org ?? ""));
+const siteId = computed(() => String(route.params.site ?? ""));
+const { useHidFaceReaderMenu } = useHidNavigation();
+const { menuItem: hidFaceReaderMenu } = useHidFaceReaderMenu({
+  org: orgId,
+  site: siteId,
+  cacheKey: "layout-navigation-hid-site",
+});
+
+const navigationItems = computed(() => {
+  const items = [...(props.navigationItems as TNavigationItem[])];
+
+  if (
+    hidFaceReaderMenu.value &&
+    !items.some((item) => item.title === hidFaceReaderMenu.value?.title)
+  ) {
+    const insertAfterIndex = items.findIndex(
+      (item) => item.title === "Pass & Key Mgmt",
+    );
+
+    if (insertAfterIndex >= 0) {
+      items.splice(insertAfterIndex + 1, 0, hidFaceReaderMenu.value);
+    } else {
+      items.push(hidFaceReaderMenu.value);
+    }
+  }
+
+  return items;
+});
 
 const handleClick = (item: any) => {
   if (item.disabled) return;

package/components/MemberInformation.vue

@@ -22,7 +22,7 @@
                             <v-autocomplete v-model="selectedPass" v-model:search="passInput" :hide-no-data="false"
                                 class="mt-3" :items="passItemsFilteredFinal" item-title="prefixAndName" item-value="_id"
                                 label="Pass (optional)" variant="outlined"  density="compact" :error-messages="errorScanPassMessage"
-                                persistent-hint small-chips>
+                                persistent-hint small-chips @click="fetchPasses">
                                 <template v-slot:no-data>
                                     <v-list-item density="compact">
                                         <v-list-item-title v-if="passInput">
@@ -160,20 +160,28 @@ const passTypesComputed = computed(() => {
     }
 })
 
-const { data: passesData, refresh: refreshPassesData, pending: fetchPassesPending } = await useLazyAsyncData('get-pass-keys', () => {
-    return getPassKeysByPageSearch({
-        search: passInput.value,
-        page: 1,
-        limit: 500,
-        passTypes: passTypesComputed.value,
-        sites: [props.site],
-        statuses: ["Available"]
-    })
-})
-
-watch(passesData, (data: any) => {
-    passItems.value = Array.isArray(data?.items) ? data.items : []
-})
+const isPassListLoading = ref(false);
+
+async function fetchPasses() {
+  // load pass list
+  passItems.value = [];
+  isPassListLoading.value = true;
+  try {
+    const result = await getPassKeysByPageSearch({
+      page: 1,
+      sites: [props.site],
+      limit: 10000,
+      passTypes: passTypesComputed.value,
+      statuses: ["Available"],
+      sortBy: { column: "prefixAndName", order: "1" },
+    });
+    passItems.value = result?.items;
+  } catch (error) {
+    showMessage(errorConverter(error as string), "error");
+  } finally {
+    isPassListLoading.value = false;
+  }
+}
 
 const passItemsFilteredFinal = computed(() => {
     return passItems.value.filter((item: TPassKey) => {

package/components/NavigationItem.vue

@@ -22,9 +22,9 @@
   </v-list-group>
 
   <v-list-item
-    v-else-if="props.route && props.route.name"
+    v-else-if="routeTo"
     :prepend-icon="icon"
-    :to="props.route"
+    :to="routeTo"
     class="text-subtitle-2"
   >
     {{ title }}
@@ -76,8 +76,15 @@ const props = defineProps({
 });
 
 function onParentClick() {
-  if (props.route && props.route.name) {
-    navigateTo(props.route);
+  if (routeTo.value) {
+    navigateTo(routeTo.value);
   }
 }
+
+const routeTo = computed(() => {
+  if (!props.route) return null;
+  if (props.route.name) return props.route;
+  if (props.route.path) return props.route;
+  return null;
+});
 </script>

package/components/OnlineFormFill.vue

@@ -27,6 +27,24 @@
         size="x-small"
         class="text-capitalize"
       >{{ submissionStatus }}</v-chip>
+      <template v-if="requiresPayment">
+        <v-chip
+          v-if="initialManagementValues?.paymentStatus"
+          color="green"
+          variant="flat"
+          size="x-small"
+        >Payment {{ initialManagementValues.paymentStatus }}</v-chip>
+        <v-chip
+          v-else
+          color="orange"
+          variant="flat"
+          size="x-small"
+        >Payment Not Paid</v-chip>
+        <span
+          v-if="initialManagementValues?.paymentOrderId"
+          class="text-caption text-medium-emphasis"
+        >Order: {{ initialManagementValues.paymentOrderId }}</span>
+      </template>
     </div>
 
     <!-- Scrollable body -->
@@ -404,6 +422,7 @@ const props = defineProps({
   submissionUnit: { type: String, default: "" },
   approvalMode: { type: Boolean, default: false },
   initialManagementValues: { type: Object as PropType<Record<string, string>>, default: () => ({}) },
+  formType: { type: String, default: "" },
   /** Optional custom submit handler. Receives the collected form values.
    *  If omitted the component submits to /api/online-forms automatically. */
   submitFn: {
@@ -505,6 +524,21 @@ const submissionStatusColor = computed(() => {
   }
 });
 
+const PAYMENT_REQUIRED_FORM_TYPES = new Set([
+  "Application for Electronic Access Card",
+  "Application for Booking of BBQ Pit",
+  "Application for Moving In/Out & Delivery",
+  "Application for Main Entrance RFID Transponder",
+]);
+
+const requiresPayment = computed(() => {
+  if (!PAYMENT_REQUIRED_FORM_TYPES.has(props.formType)) return false;
+  if (props.formType === "Application for Main Entrance RFID Transponder") {
+    return !!(props.initialValues.reasonLost || props.initialValues.reasonDamaged);
+  }
+  return true;
+});
+
 // Today's date formatted DD MMM YYYY
 const todayDate = computed(() => {
   const d = new Date();

package/components/PassInformation.vue

@@ -27,6 +27,8 @@
           persistent-hint
           small-chips
           :clearable="props.clearable"
+          @click="fetchPasses"
+          :loading="isPassListLoading"
         >
           <template v-slot:chip="{ props, item }">
             <v-chip
@@ -56,6 +58,8 @@
             persistent-hint
             small-chips
             :clearable="props.clearable"
+            @click="fetchKeys"
+            :loading="isKeyListLoading"
           >
             <template v-slot:chip="{ props, item }">
               <v-chip
@@ -83,6 +87,7 @@
       </v-card-text>
     </v-card>
   </v-row>
+  <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
 </template>
 
 <script setup lang="ts">
@@ -90,6 +95,7 @@ import type { PropType } from "vue";
 import type { ValidationRule } from "vuetify/lib/types.mjs";
 import usePassKey from "../composables/usePassKey";
 import useKey from "../composables/useKey";
+import { string } from "zod/v4";
 
 const props = defineProps({
   passRules: {
@@ -112,6 +118,10 @@ const props = defineProps({
     type: String,
     default: "",
   },
+  passKeys: {
+    type: Array,
+    default: [],
+  },
   hideKeys: {
     type: Boolean,
     default: false,
@@ -158,43 +168,72 @@ const passTypesComputed = computed(() => {
   }
 });
 
-const {
-  data: passesData,
-  refresh: refreshPassesData,
-  pending: fetchPassesPending,
-} = await useLazyAsyncData("get-pass-keys", () => {
-  return getPassKeysByPageSearch({
-    search: passInput.value,
-    page: 1,
-    limit: 500,
-    passTypes: passTypesComputed.value,
-    sites: [props.site],
-    statuses: ["Available"],
-  });
-});
+const message = ref("");
+const messageColor = ref("");
+const messageSnackbar = ref(false);
 
-watch(passesData, (data: any) => {
-  passItems.value = data?.items || [];
-});
+function showMessage(msg: string, color: string) {
+  message.value = msg;
+  messageColor.value = color;
+  messageSnackbar.value = true;
+}
 
-const {
-  data: keysData,
-  refresh: refreshKeysData,
-  pending: fetchKeysPending,
-} = await useLazyAsyncData("get-keys", () => {
-  return getPassKeysByPageSearch({
-    search: keyInput.value,
-    statuses: ["Available"],
-    passTypes: ["pass-key"],
-    page: 1,
-    limit: 500,
-    sites: [props.site],
-  });
-});
+const isPassListLoading = ref(false);
 
-watch(keysData, (data: any) => {
-  keyItems.value = data?.items || [];
-});
+async function fetchPasses() {
+  // load pass list
+  passItems.value = [];
+  isPassListLoading.value = true;
+  try {
+    const result = await getPassKeysByPageSearch({
+      page: 1,
+      sites: [props.site],
+      limit: 10000,
+      passTypes: passTypesComputed.value,
+      statuses: ["Available"],
+      sortBy: { column: "prefixAndName", order: "1" },
+    });
+    passItems.value = result?.items;
+  } catch (error) {
+    showMessage(errorConverter(error as string), "error");
+  } finally {
+    isPassListLoading.value = false;
+  }
+}
+
+const isKeyListLoading = ref(false);
+
+async function fetchKeys() {
+  keyItems.value = [];
+  isKeyListLoading.value = true;
+  try {
+    const keys: any = await getPassKeysByPageSearch({
+      page: 1,
+      sites: [props.site],
+      limit: 10000,
+      passTypes: ["pass-key"],
+      statuses: ["Available"],
+      sortBy: { column: "prefixAndName", order: "1" },
+    });
+    const selectedKeys = keyItems.value.filter((item: any) => {
+      if (Array.isArray(props?.passKeys) && props.passKeys.length) {
+        return props.passKeys.includes(item._id);
+      }
+      return false;
+    });
+    const filteredArray = keys.items.filter((item: any) => {
+      if (Array.isArray(props?.passKeys) && props.passKeys.length) {
+        return !props.passKeys.includes(item._id);
+      }
+      return true;
+    });
+    keyItems.value = [...selectedKeys, ...filteredArray];
+  } catch (error) {
+    showMessage(errorConverter(error as string), "error");
+  } finally {
+    isKeyListLoading.value = false;
+  }
+}
 
 watch(selectedPass, (newVal) => {
   pass.value = [{ keyId: newVal }];

package/components/SiteSettings.vue

@@ -2,7 +2,7 @@
   <v-row no-gutters>
     <v-expansion-panels multiple v-model="openPanels">
       <!-- SITE SETTINGS -->
-      <v-expansion-panel color="primary">
+      <v-expansion-panel v-if="canManageSiteInformation" color="primary">
         <v-expansion-panel-title>
           <v-icon class="mr-2">mdi-cog</v-icon>
           Site Information
@@ -14,73 +14,36 @@
               <v-row>
                 <!-- Cover Photo + Preview -->
                 <v-col cols="12" lg="5" class="pt-0">
-                  <InputLabel
-                    title="Cover Photo (displayed in resident app)"
-                    class="d-block mb-2"
-                  />
-                  <InputFileV2
-                    v-model="coverPhoto"
-                    accept="image/*"
-                    title="Upload cover photo"
-                    :height="120"
-                  />
+                  <InputLabel title="Cover Photo (displayed in resident app)" class="d-block mb-2" />
+                  <InputFileV2 v-model="coverPhoto" accept="image/*" title="Upload cover photo" :height="120" />
                 </v-col>
                 <v-col cols="12" lg="7" class="pl-lg-4 pt-4 pt-lg-0">
                   <InputLabel title="Preview" class="d-block mb-2" />
-                  <v-img
-                    v-if="coverPhotoUrl"
-                    :src="coverPhotoUrl"
-                    aspect-ratio="16/9"
-                    cover
-                    rounded="lg"
-                    class="w-100 border"
-                  />
-                  <div
-                    v-else
+                  <v-img v-if="coverPhotoUrl" :src="coverPhotoUrl" aspect-ratio="16/9" cover rounded="lg"
+                    class="w-100 border" />
+                  <div v-else
                     class="w-100 d-flex align-center justify-center rounded-lg bg-grey-lighten-4 border border-dashed"
-                    style="aspect-ratio: 16/9"
-                  >
-                    <span class="text-caption text-medium-emphasis"
-                      >No cover photo uploaded</span
-                    >
+                    style="aspect-ratio: 16/9">
+                    <span class="text-caption text-medium-emphasis">No cover photo uploaded</span>
                   </div>
                 </v-col>
 
                 <!-- Description + Site Documents -->
                 <v-col cols="12" lg="6" class="mt-2">
                   <InputLabel title="Description" class="d-block mb-1" />
-                  <v-textarea
-                    v-model="description"
-                    variant="outlined"
-                    density="compact"
-                    rows="4"
-                    hide-details
-                    no-resize
-                    style="height: 119px"
-                  />
+                  <v-textarea v-model="description" variant="outlined" density="compact" rows="4" hide-details no-resize
+                    style="height: 119px" />
                 </v-col>
                 <v-col cols="12" lg="6" class="mt-2 pl-lg-2">
                   <InputLabel title="Site Documents" class="d-block mb-1" />
-                  <InputFileV2
-                    v-model="siteDocuments"
-                    :multiple="true"
-                    accept="*/*"
-                    title="Upload documents"
-                    :height="104"
-                  />
+                  <InputFileV2 v-model="siteDocuments" :multiple="true" accept="*/*" title="Upload documents"
+                    :height="104" />
                 </v-col>
 
                 <!-- Submit -->
                 <v-col cols="12" class="pt-0 d-flex justify-end">
-                  <v-btn
-                    color="primary-button"
-                    class="text-none"
-                    size="large"
-                    variant="flat"
-                    text="Save"
-                    :loading="savingSiteInfo"
-                    @click="saveSiteInfo"
-                  />
+                  <v-btn color="primary-button" class="text-none" size="large" variant="flat" text="Save"
+                    :loading="savingSiteInfo" @click="saveSiteInfo" />
                 </v-col>
 
                 <!-- Divider -->
@@ -91,14 +54,8 @@
                 <v-col cols="12">
                   <v-row no-gutters>
                     <v-col cols="12" lg="4" class="mt-2">
-                      <NumberSettingField
-                        v-model="blocks"
-                        title="No. of blocks"
-                        type="blocks"
-                        :site-id="siteId"
-                        :disabled="existingBlockNumber === blocks"
-                        @success="refreshSiteData"
-                      />
+                      <NumberSettingField v-model="blocks" title="No. of blocks" type="blocks" :site-id="siteId"
+                        :disabled="existingBlockNumber === blocks" @success="refreshSiteData" />
                     </v-col>
                   </v-row>
                 </v-col>
@@ -106,14 +63,9 @@
                 <v-col cols="12">
                   <v-row no-gutters>
                     <v-col cols="12" lg="4" class="mt-2">
-                      <NumberSettingField
-                        v-model="guardPosts"
-                        title="No. of guard posts"
-                        type="guard_posts"
-                        :site-id="siteId"
-                        :disabled="existingGuardPostNumber === guardPosts"
-                        @success="refreshSiteData"
-                      />
+                      <NumberSettingField v-model="guardPosts" title="No. of guard posts" type="guard_posts"
+                        :site-id="siteId" :disabled="existingGuardPostNumber === guardPosts"
+                        @success="refreshSiteData" />
                     </v-col>
                   </v-row>
                 </v-col>
@@ -124,7 +76,7 @@
       </v-expansion-panel>
 
       <!-- ANPR CAMERA -->
-      <v-expansion-panel v-if="showAnprCamera" color="primary">
+      <v-expansion-panel v-if="showAnprCamera && canManageANPRCamera" color="primary">
         <v-expansion-panel-title>
           <v-icon class="mr-2">mdi-camera</v-icon>
           ANPR Camera
@@ -134,45 +86,24 @@
           <v-container fluid class="px-0">
             <v-row dense>
               <v-col cols="6">
-                <v-switch
-                  v-model="ANPRSwitches.enableUnregistered"
-                  :disabled="!canManageSiteSettings"
-                  label="Enable Unregistered Vehicles"
-                  color="primary"
-                  hide-details
-                ></v-switch>
+                <v-switch v-model="ANPRSwitches.enableUnregistered" :disabled="!canManageSiteSettings"
+                  label="Enable Unregistered Vehicles" color="primary" hide-details></v-switch>
               </v-col>
 
               <v-col cols="6">
-                <v-switch
-                  v-model="ANPRSwitches.openBarrierPickUpDropOff"
-                  :disabled="!canManageSiteSettings"
-                  label="Open Barrier for Pick-up and Drop-off"
-                  color="primary"
-                  hide-details
-                ></v-switch>
+                <v-switch v-model="ANPRSwitches.openBarrierPickUpDropOff" :disabled="!canManageSiteSettings"
+                  label="Open Barrier for Pick-up and Drop-off" color="primary" hide-details></v-switch>
               </v-col>
 
               <v-col cols="6">
-                <v-switch
-                  v-model="ANPRSwitches.vehicleSnapshot"
-                  :disabled="!canManageSiteSettings"
-                  label="Capture Vehicle Snapshot"
-                  color="primary"
-                  hide-details
-                ></v-switch>
+                <v-switch v-model="ANPRSwitches.vehicleSnapshot" :disabled="!canManageSiteSettings"
+                  label="Capture Vehicle Snapshot" color="primary" hide-details></v-switch>
               </v-col>
             </v-row>
 
             <v-row v-if="canManageSiteSettings">
               <v-col cols="auto">
-                <v-btn
-                  variant="flat"
-                  color="primary"
-                  class="text-none"
-                  :loading="isSaving"
-                  @click="saveANPRSettings"
-                >
+                <v-btn variant="flat" color="primary" class="text-none" :loading="isSaving" @click="saveANPRSettings">
                   Save
                 </v-btn>
               </v-col>
@@ -181,47 +112,35 @@
 
           <v-divider class="my-4"></v-divider>
 
-          <CameraMain
-            :site="siteId"
-            :read-only="!canManageSiteSettings"
-            :guard-posts="siteData?.metadata?.guardPosts"
-          />
+          <CameraMain :site="siteId" :read-only="!canManageSiteSettings"
+            :guard-posts="siteData?.metadata?.guardPosts" />
         </v-expansion-panel-text>
       </v-expansion-panel>
 
       <!-- CCTV CAMERA -->
-      <v-expansion-panel v-if="showCctvCamera" color="primary">
+      <v-expansion-panel v-if="showCctvCamera && canManageCCTVCamera" color="primary">
         <v-expansion-panel-title>
           <v-icon class="mr-2">mdi-cctv</v-icon>
           CCTV Camera
         </v-expansion-panel-title>
 
         <v-expansion-panel-text>
-          <CameraMain
-            :site="siteId"
-            type="ip"
-            :read-only="!canManageSiteSettings"
-          />
+          <CameraMain :site="siteId" type="ip" :read-only="!canManageSiteSettings" />
         </v-expansion-panel-text>
       </v-expansion-panel>
 
-      <v-expansion-panel v-if="showDeliveryCompanies" color="primary">
+      <v-expansion-panel v-if="showDeliveryCompanies && canManageDeliveryCompanies" color="primary">
         <v-expansion-panel-title>
           <v-icon class="mr-2">mdi-truck</v-icon>
           Delivery Companies
         </v-expansion-panel-title>
         <v-expansion-panel-text class="">
-          <DeliveryCompany
-            :site="siteId"
-            v-model:initial="deliveryCompanies"
-            @refresh-site="refreshSiteData"
-            @update:companiesValue="handleUpdateCompanies"
-            :read-only="!canManageSiteSettings"
-          />
+          <DeliveryCompany :site="siteId" v-model:initial="deliveryCompanies" @refresh-site="refreshSiteData"
+            @update:companiesValue="handleUpdateCompanies" :read-only="!canManageSiteSettings" />
         </v-expansion-panel-text>
       </v-expansion-panel>
 
-      <v-expansion-panel v-if="showResidentVisitors" color="primary">
+      <v-expansion-panel v-if="showResidentVisitors && canManageResidentVisitors" color="primary">
         <v-expansion-panel-title>
           <v-icon class="mr-2">mdi-car</v-icon>
           Resident Visitors
@@ -231,6 +150,23 @@
         </v-expansion-panel-text>
       </v-expansion-panel>
 
+      <v-expansion-panel color="primary">
+        <v-expansion-panel-title>
+          <v-icon class="mr-2">mdi-face-recognition</v-icon>
+          HID Face Reader
+        </v-expansion-panel-title>
+        <v-expansion-panel-text>
+          <HidServiceSettingsPanel
+            :site="siteId"
+            :org="orgId"
+            :site-data="siteData"
+            @refresh="refreshSiteData"
+          />
+          <v-divider class="my-4" />
+          <HidQrCodeConfiguration :site="siteId" />
+        </v-expansion-panel-text>
+      </v-expansion-panel>
+
       <slot
         name="panels"
         :can-manage="canManageSiteSettings"
@@ -250,6 +186,7 @@ import useANPRSettings from "../composables/useANPRSettings";
 
 const props = defineProps({
   siteId: { type: String, required: true },
+  orgId: { type: String, default: "" },
   createdBy: { type: String },
   canManageSiteSettings: { type: Boolean, default: false },
   showAnprCamera: { type: Boolean, default: false },
@@ -259,6 +196,12 @@ const props = defineProps({
 });
 
 const openPanels = ref([]); // default open first
+const { canManageSiteInformation,
+  canManageANPRCamera,
+  canManageCCTVCamera,
+  canManageDeliveryCompanies,
+  canManageResidentVisitors,
+} = useSettingsPermission();
 
 const { getSiteById, updateSitebyId, updateSiteInformation } =
   useSiteSettings();
@@ -306,6 +249,7 @@ const { data: siteData, refresh: refreshSiteData } = await useLazyAsyncData(
   `site-${props.siteId}`,
   () => getSiteById(props.siteId)
 );
+const orgId = computed(() => props.orgId || String((siteData.value as any)?.orgId ?? ""));
 
 watch(
   siteData,