@7365admin1/layer-common 3.0.10 → 3.0.12

package/components/IncidentReport/IncidentInformation.vue

@@ -288,7 +288,7 @@ watch(
 );
 
 function toLocalDate(utcString: string) {
-  return new Date(utcString).toLocaleString("en-US", {
+  return new Date(utcString).toLocaleString("en-GB", {
     year: "numeric",
     month: "2-digit",
     day: "2-digit",

package/components/IncidentReport/IncidentInformationDownload.vue

@@ -143,7 +143,7 @@
           }}
         </p>
       </v-col>
-      <v-col cols="6" class="pa-3">
+      <v-col cols="12" class="pa-3">
         <p class="font-weight-bold">Brief Description</p>
         <p>
           {{

package/components/Input/InputPhoneNumberV2.vue

@@ -5,17 +5,21 @@
         v-model="selectedCode"
         :variant="variant"
         :items="countries"
-        item-title="code"
+        item-title="dial_code"
         item-value="code"
         hide-details
         class="px-0"
         :density="density"
-        style="max-width: 95px"
+        style="max-width: 110px"
         :rules="[...props.rules]"
         :readonly="props.readOnly"
         :disabled="props.disabled"
         @update:model-value="handleUpdateCountry"
       >
+        <template v-slot:selection="{ item }">
+          <span>{{ item.raw.dial_code }}</span>
+        </template>
+
         <template v-slot:item="{ props: itemProps, item }">
           <v-list-item
             v-bind="itemProps"
@@ -38,7 +42,6 @@
         hide-details
         persistent-hint
         return-masked-value
-        :prefix="phonePrefix || ''"
         persistent-placeholder
         :density="density"
         :disabled="props.disabled"
@@ -52,7 +55,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, onMounted, type PropType } from 'vue'
+import { ref, computed, watch, type PropType } from 'vue'
 //@ts-ignore
 import phoneMasks from '~/utils/phoneMasks'
 import type { ValidationRule } from 'vuetify/lib/types.mjs'
@@ -101,6 +104,10 @@ const phonePrefix = computed(() => {
   return country?.dial_code || ''
 })
 
+const countriesByLongestDialCode = computed(() => {
+  return [...countries].sort((a: TPhoneMask, b: TPhoneMask) => b.dial_code.length - a.dial_code.length)
+})
+
 function generateMaskFromRegex(regex: string): string {
   let pattern = regex.replace(/^\^|\$$/g, '')
   pattern = pattern.replace(/\(\?:\+?\d+\)\?/g, '')
@@ -125,13 +132,19 @@ const validatePhone = (): boolean | string => {
   return isValid
 }
 
+function findCountryFromPhone(value: string): TPhoneMask | undefined {
+  return countriesByLongestDialCode.value.find((c: TPhoneMask) => value.startsWith(c.dial_code))
+}
+
+function syncInputFromPhone(value: string) {
+  const prefix = phonePrefix.value
+  if (!value) input.value = ''
+  else input.value = value.startsWith(prefix) ? value.slice(prefix.length) : value
+}
+
 function handleUpdateCountry() {
   const prefix = phonePrefix.value
-  if (phone.value?.startsWith(prefix)) {
-    input.value = phone.value.slice(prefix.length)
-  } else {
-    input.value = ''
-  }
+  phone.value = input.value ? prefix + input.value : ''
 }
 
 
@@ -150,28 +163,19 @@ watch(
 )
 
 
-watch(phone, (newVal) => {
-  const prefix = phonePrefix.value
-  if (!newVal) input.value = ''
-  else input.value = newVal.startsWith(prefix) ? newVal.slice(prefix.length) : newVal
-  emit('update:modelValue', newVal)
-})
+watch(
+  phone,
+  (newVal) => {
+    const country = newVal ? findCountryFromPhone(newVal) : undefined
+    if (country && country.code !== selectedCode.value) selectedCode.value = country.code
+    syncInputFromPhone(newVal)
+    emit('update:modelValue', newVal)
+  },
+  { immediate: true }
+)
 
 
 watch(selectedCode, () => {
-  const prefix = phonePrefix.value
-  if (phone.value?.startsWith(prefix)) input.value = phone.value.slice(prefix.length)
-  else input.value = phone.value || ''
-})
-
-
-onMounted(() => {
-  if (phone.value) {
-    const found = countries.find((c: TPhoneMask) => phone.value.startsWith(c.dial_code))
-    if (found) selectedCode.value = found.code
-    const prefix = phonePrefix.value
-    input.value = phone.value.startsWith(prefix) ? phone.value.slice(prefix.length) : phone.value
-    maskKey.value++
-  }
+  maskKey.value++
 })
 </script>

package/components/Input/Password.vue

@@ -2,6 +2,7 @@
   <v-text-field
     id="_password"
     v-model="password"
+    placeholder="Password"
     :type="showPassword ? 'text' : 'password'"
     :append-inner-icon="showPassword ? 'mdi-eye-off' : 'mdi-eye'"
     v-bind="$attrs"

package/components/Layout/NavigationDrawer.vue

@@ -62,15 +62,18 @@ const { menuItem: hidFaceReaderMenu } = useHidFaceReaderMenu({
   cacheKey: "layout-navigation-hid-site",
 });
 
+const { canManageEntryPass } = useSettingsPermission();
+
 const navigationItems = computed(() => {
   const items = [...(props.navigationItems as TNavigationItem[])];
 
   if (
+    canManageEntryPass.value &&
     hidFaceReaderMenu.value &&
     !items.some((item) => item.title === hidFaceReaderMenu.value?.title)
   ) {
     const insertAfterIndex = items.findIndex(
-      (item) => item.title === "Pass & Key Mgmt",
+      (item) => item.title === "Pass & Key Mgmt"
     );
 
     if (insertAfterIndex >= 0) {

package/components/OnlineFormFill.vue

@@ -258,13 +258,14 @@
             <span class="text-caption text-medium-emphasis d-block mb-1">{{ block.label }}</span>
             <div
               v-if="initialValues[block.key]"
-              style="
-                display: inline-block;
-                border-radius: 8px;
-                background: #111111;
-                padding: 8px;
-                max-width: 100%;
-              "
+              :style="{
+                display: 'inline-block',
+                borderRadius: '8px',
+                background: sigBgLight[block.key] === false ? '#1e1e1e' : '#ffffff',
+                border: sigBgLight[block.key] === false ? '1px solid #334155' : '1px solid #e0e0e0',
+                padding: '8px',
+                maxWidth: '100%',
+              }"
             >
               <img
                 :src="initialValues[block.key]"
@@ -443,6 +444,68 @@ const { currentUser } = useLocalAuth();
 const validForm = ref(false);
 const submitting = ref(false);
 const message = ref("");
+
+// Detect signature background: true = light (black ink), false = dark (white ink)
+const sigBgLight = ref<Record<string, boolean>>({});
+
+function detectSigBackground(key: string, dataUrl: string) {
+  if (!dataUrl?.startsWith("data:image")) return;
+  const img = new Image();
+  img.onload = () => {
+    const SIZE = 32;
+    const canvas = document.createElement("canvas");
+    canvas.width = SIZE;
+    canvas.height = SIZE;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.drawImage(img, 0, 0, SIZE, SIZE);
+    const d = ctx.getImageData(0, 0, SIZE, SIZE).data;
+
+    let opaqueTotal = 0, opaqueCount = 0;
+    let inkTotal = 0, inkCount = 0;
+    for (let i = 0; i < d.length; i += 4) {
+      const alpha = d[i + 3];
+      const lum = (d[i] + d[i + 1] + d[i + 2]) / 3;
+      if (alpha > 128) {
+        opaqueTotal += lum;
+        opaqueCount++;
+        // Ink pixels are the non-background strokes (not very transparent)
+        inkTotal += lum;
+        inkCount++;
+      }
+    }
+
+    if (opaqueCount === 0) {
+      // Fully transparent PNG — can't detect, default to white bg
+      sigBgLight.value[key] = true;
+      return;
+    }
+
+    const opaqueRatio = opaqueCount / (d.length / 4);
+    if (opaqueRatio > 0.5) {
+      // Mostly opaque PNG — has a solid background; use overall brightness
+      sigBgLight.value[key] = opaqueTotal / opaqueCount > 128;
+    } else {
+      // Mostly transparent — ink-only PNG; check ink color
+      // Dark ink (< 128) = black strokes = was light mode → show white bg
+      // Light ink (≥ 128) = white strokes = was dark mode → show dark bg
+      sigBgLight.value[key] = inkTotal / inkCount < 128;
+    }
+  };
+  img.src = dataUrl;
+}
+
+watch(
+  () => props.initialValues,
+  (vals) => {
+    for (const [key, val] of Object.entries(vals)) {
+      if (typeof val === "string" && val.startsWith("data:image")) {
+        detectSigBackground(key, val);
+      }
+    }
+  },
+  { immediate: true, deep: true }
+);
 const values = ref<Record<string, any>>({});
 
 const selectedAction = ref("");

package/components/VehicleForm.vue

@@ -56,8 +56,8 @@
           </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]"
+            <InputLabel class="text-capitalize" title="NRIC"/>
+            <InputNRICNumber v-model="vehicle.nric" density="comfortable" 
               :disabled="disablePrefilledInputs && type !== 'blocklist' && prop.mode !== 'edit'" />
           </v-col>
 
@@ -74,8 +74,8 @@
 
 
           <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]" />
+            <InputLabel class="text-capitalize" title="Phone Number"/>
+            <InputPhoneNumberV2 v-model="vehicle.phoneNumber" density="comfortable" />
           </v-col>
 
           <v-col v-if="shouldShowField('plateNumber')" cols="12">
@@ -770,6 +770,8 @@ watch(
   async (newUnit) => {
     if (prefillingRecords.value) return;
 
+    if(prop.mode === 'edit') return;
+
     resetVehicleDetails();
     matchingPeople.value = [];
     if (!newUnit) return;

package/components/VehicleManagement.vue

@@ -78,7 +78,7 @@
                         </v-chip>
                       </template>
                       <template #item.action="{ item: plateNumberItem, value }">
-                        <v-menu>
+                        <v-menu v-if="hasVehicleActions(plateNumberItem as TPlateNumber)">
                           <template #activator="{ props: menuProps }">
                             <v-btn icon="mdi-dots-vertical" v-bind="menuProps" flat size="x-small" />
                           </template>
@@ -382,6 +382,21 @@ function handleUpdateType(item: TPlateNumber) {
   dialog.updateVehicleType = true;
 }
 
+function hasVehicleActions(item: TPlateNumber) {
+  const isActive = item?.status === "active";
+  const isPending = item?.status === "pending";
+  const isDeleted = item?.status === "deleted";
+  const canUpdateType = item?.type === "whitelist" || item?.type === "blocklist";
+
+  return (
+    isActive ||
+    (props.app === "property_management_agency" && isPending) ||
+    isDeleted ||
+    (canUpdateType && isActive) ||
+    (props.canDeleteVehicle && isActive)
+  );
+}
+
 function handleSelectVehicleStatus(value: TVehicleType) {
   vehicleType.value = value;
   dialog.showSelection = false;

package/components/VisitorDataFromScannedQRCodeForm.vue

@@ -101,7 +101,7 @@
           <v-text-field v-model="location" density="comfortable" readonly />
         </v-col>
 
-        <v-col v-if="!visitorInfo.checkIn" cols="12">
+        <v-col cols="12">
           <InputLabel class="text-capitalize" title="Purpose" />
           <v-textarea
             v-model="visitorInfo.purpose"
@@ -253,7 +253,20 @@ const emit = defineEmits(["check-in-out", "close"]);
 
 const { standardFormatDateTime } = useUtils();
 
-const visitorInfo = ref(prop.visitorData);
+const visitorInfo = ref<Partial<TVisitor>>({});
+
+watch(
+  () => prop.visitorData,
+  (visitorData) => {
+    visitorInfo.value = {
+      ...visitorData,
+      visitorPass: Array.isArray(visitorData?.visitorPass)
+        ? [...visitorData.visitorPass]
+        : [],
+    };
+  },
+  { immediate: true }
+);
 
 const visitorNric = computed({
   get: () =>

package/components/VisitorManagement.vue

@@ -557,7 +557,7 @@
                   color="success"
                   text="Checkin"
                   :disabled="isVisitorDataFromScannedQRCodeCheckingInOut"
-                  @click="handleCheckin(selectedVisitorObject)"
+                  @click="handleCheckin(selectedVisitorDataObject)"
                   :loading="isVisitorDataFromScannedQRCodeCheckingInOut"
                 />
               </span>
@@ -1298,6 +1298,7 @@ const formattedFields = {
   block: "Block",
   level: "Level",
   unit: "Unit",
+  purpose: "Purpose",
   checkIn: "Check In",
   snapshotEntryImage: "Entry Image",
   checkOut: "Check Out",
@@ -1481,18 +1482,32 @@ async function handleVisitorDataFromScannedQRCodeCheckInOut(
   try {
     isVisitorDataFromScannedQRCodeCheckingInOut.value = true;
     if (type != "checkOut") {
+      const visitorId =
+        visitorData._id ??
+        visitorDataFromScannedQRCode.value._id ??
+        selectedVisitorId.value;
+
+      if (!visitorId) {
+        showMessage("Unable to check in visitor: missing visitor ID.", "error");
+        return;
+      }
+
+      const visitorPass = Array.isArray(visitorData.visitorPass)
+        ? visitorData.visitorPass
+        : [];
+
       await visitorDataFromScannedQRCodeCheckIn({
         type,
         filter: {
-          _id: visitorData._id,
+          _id: visitorId,
         },
         update: {
           updatedBy: currentUser.value._id,
-          visitorPass: visitorData.visitorPass.find(
+          visitorPass: visitorPass.find(
             (i: Record<string, any>) => i.keyId === null
           )
             ? undefined
-            : visitorData.visitorPass,
+            : visitorPass,
           nric: visitorData.nric ?? "",
           plateNumber: visitorData.plateNumber ?? "",
         },

package/composables/useAttendancePermission.ts

@@ -4,7 +4,7 @@ export function useAttendancePermission() {
   const { userAppRole } = useLocalSetup();
 
   const canViewAllAttendance = computed(() => {
-    if (!userAppRole.value) return true;
+    if (!userAppRole.value) return false;
     if (userAppRole.value.permissions.includes("*")) return true;
     return hasPermission(
       userAppRole.value,
@@ -15,7 +15,7 @@ export function useAttendancePermission() {
   });
 
   const canViewAttendanceDetails = computed(() => {
-    if (!userAppRole.value) return true;
+    if (!userAppRole.value) return false;
     if (userAppRole.value.permissions.includes("*")) return true;
     return hasPermission(
       userAppRole.value,
@@ -26,7 +26,7 @@ export function useAttendancePermission() {
   });
 
   const canManageAttendanceSettings = computed(() => {
-    if (!userAppRole.value) return true;
+    if (!userAppRole.value) return false;
     if (userAppRole.value.permissions.includes("*")) return true;
     return hasPermission(
       userAppRole.value,
@@ -37,7 +37,7 @@ export function useAttendancePermission() {
   });
 
   const canViewOwnAttendance = computed(() => {
-    if (!userAppRole.value) return true;
+    if (!userAppRole.value) return false;
     if (userAppRole.value.permissions.includes("*")) return true;
     return hasPermission(
       userAppRole.value,
@@ -48,7 +48,7 @@ export function useAttendancePermission() {
   });
 
   const canCheckInOut = computed(() => {
-    if (!userAppRole.value) return true;
+    if (!userAppRole.value) return false;
     if (userAppRole.value.permissions.includes("*")) return true;
     return hasPermission(
       userAppRole.value,

package/composables/useBulletinBoardPermission.ts

@@ -7,25 +7,25 @@ export function useBulletinBoardPermission() {
   const { userAppRole } = useLocalSetup();
 
   const canViewBulletinBoard = computed(() => {
-    if (!userAppRole.value) return true;
+    if (!userAppRole.value) return false;
     if (userAppRole.value.permissions.includes("*")) return true;
     return hasPermission(userAppRole.value, permissions, "bulletin-board", "see-all-bulletin-boards");
   });
 
   const canCreateBulletinBoard = computed(() => {
-    if (!userAppRole.value) return true;
+    if (!userAppRole.value) return false;
     if (userAppRole.value.permissions.includes("*")) return true;
     return hasPermission(userAppRole.value, permissions, "bulletin-board", "add-bulletin-board");
   });
 
   const canUpdateBulletinBoard = computed(() => {
-    if (!userAppRole.value) return true;
+    if (!userAppRole.value) return false;
     if (userAppRole.value.permissions.includes("*")) return true;
     return hasPermission(userAppRole.value, permissions, "bulletin-board", "update-bulletin-board");
   });
 
   const canViewBulletinBoardDetails = computed(() => {
-    if (!userAppRole.value) return true;
+    if (!userAppRole.value) return false;
     if (userAppRole.value.permissions.includes("*")) return true;
     return hasPermission(userAppRole.value, permissions, "bulletin-board", "see-bulletin-board-details");
   });
@@ -33,7 +33,7 @@ export function useBulletinBoardPermission() {
 
 
   const canDeleteBulletinBoard = computed(() => {
-    if (!userAppRole.value) return true;
+    if (!userAppRole.value) return false;
     if (userAppRole.value.permissions.includes("*")) return true;
     return hasPermission(userAppRole.value, permissions, "bulletin-board", "delete-bulletin-board");
   });

package/composables/useCommonPermission.ts

@@ -278,6 +278,45 @@ export function useCommonPermissions() {
       },
 
     }
+
+    const dashboardPermissions: Record<string, TPermission> = {
+      "view-activity": {
+        check: true,
+        description: "Allows the user to view the activity chart widget.",
+      },
+      "view-task-schedule": {
+        check: true,
+        description: "Allows the user to view the task schedule widget.",
+      },
+      "view-attendance-widget": {
+        check: true,
+        description: "Allows the user to view the attendance/staff status widget.",
+      },
+      "view-feedbacks-widget": {
+        check: true,
+        description: "Allows the user to view the feedbacks widget.",
+      },
+      "view-upcoming-events": {
+        check: true,
+        description: "Allows the user to view the upcoming events widget.",
+      },
+      "view-today-reminders": {
+        check: true,
+        description: "Allows the user to view the today's reminders widget.",
+      },
+      "view-today-attentions": {
+        check: true,
+        description: "Allows the user to view the today's attentions widget.",
+      },
+      "view-work-order-status": {
+        check: true,
+        description: "Allows the user to view the work order status widget.",
+      },
+      "view-active-patrol": {
+        check: true,
+        description: "Allows the user to view the active patrol widget.",
+      },
+    }
   
   return {
     invitationPermissions,
@@ -289,6 +328,7 @@ export function useCommonPermissions() {
     buildingManagementPermissions,
     buildingUnitManagementPermissions,
     bulletinBoardPermissions,
-    siteSettingsPermissions
+    siteSettingsPermissions,
+    dashboardPermissions
   };
 }

package/composables/useSettingsPermission.ts

@@ -6,7 +6,7 @@ export function useSettingsPermission() {
   const { userAppRole } = useLocalSetup();
 
   const canManageSiteInformation = computed(() => {
-    if (!userAppRole.value) return true;
+    if (!userAppRole.value) return false;
     if (userAppRole.value.permissions.includes("*")) return true;
     return hasPermission(
       userAppRole.value,
@@ -16,7 +16,7 @@ export function useSettingsPermission() {
     );
   });
   const canManageANPRCamera = computed(() => {
-    if (!userAppRole.value) return true;
+    if (!userAppRole.value) return false;
     if (userAppRole.value.permissions.includes("*")) return true;
     return hasPermission(
       userAppRole.value,
@@ -26,7 +26,7 @@ export function useSettingsPermission() {
     );
   });
   const canManageCCTVCamera = computed(() => {
-    if (!userAppRole.value) return true;
+    if (!userAppRole.value) return false;
     if (userAppRole.value.permissions.includes("*")) return true;
     return hasPermission(
       userAppRole.value,
@@ -36,7 +36,7 @@ export function useSettingsPermission() {
     );
   });
   const canManageDeliveryCompanies = computed(() => {
-    if (!userAppRole.value) return true;
+    if (!userAppRole.value) return false;
     if (userAppRole.value.permissions.includes("*")) return true;
     return hasPermission(
       userAppRole.value,
@@ -46,7 +46,7 @@ export function useSettingsPermission() {
     );
   });
   const canManageResidentVisitors = computed(() => {
-    if (!userAppRole.value) return true;
+    if (!userAppRole.value) return false;
     if (userAppRole.value.permissions.includes("*")) return true;
     return hasPermission(
       userAppRole.value,
@@ -56,7 +56,7 @@ export function useSettingsPermission() {
     );
   });
   const canManageWorkOrderSettings = computed(() => {
-    if (!userAppRole.value) return true;
+    if (!userAppRole.value) return false;
     if (userAppRole.value.permissions.includes("*")) return true;
     return hasPermission(
       userAppRole.value,
@@ -66,7 +66,7 @@ export function useSettingsPermission() {
     );
   });
   const canManageBillingAndSOAConfiguration = computed(() => {
-    if (!userAppRole.value) return true;
+    if (!userAppRole.value) return false;
     if (userAppRole.value.permissions.includes("*")) return true;
     return hasPermission(
       userAppRole.value,
@@ -76,7 +76,7 @@ export function useSettingsPermission() {
     );
   });
   const canManageNFCManagement = computed(() => {
-    if (!userAppRole.value) return true;
+    if (!userAppRole.value) return false;
     if (userAppRole.value.permissions.includes("*")) return true;
     return hasPermission(
       userAppRole.value,
@@ -86,7 +86,7 @@ export function useSettingsPermission() {
     );
   });
   const canManageNFCPatrolSettings = computed(() => {
-    if (!userAppRole.value) return true;
+    if (!userAppRole.value) return false;
     if (userAppRole.value.permissions.includes("*")) return true;
     return hasPermission(
       userAppRole.value,
@@ -96,7 +96,7 @@ export function useSettingsPermission() {
     );
   });
   const canManageEntryPass = computed(() => {
-    if (!userAppRole.value) return true;
+    if (!userAppRole.value) return false;
     if (userAppRole.value.permissions.includes("*")) return true;
     return hasPermission(
       userAppRole.value,
@@ -106,7 +106,7 @@ export function useSettingsPermission() {
     );
   });
   const canManageRedDotSettings = computed(() => {
-    if (!userAppRole.value) return true;
+    if (!userAppRole.value) return false;
     if (userAppRole.value.permissions.includes("*")) return true;
     return hasPermission(
       userAppRole.value,

package/composables/useVisitor.ts

@@ -26,6 +26,7 @@ export default function () {
       "level",
       "unit",
       "unitName",
+      "purpose",
       "remarks",
     ],
     contractor: [

package/package.json

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

package/types/visitor.d.ts

@@ -58,6 +58,7 @@ declare type TVisitorPayload = Pick<
   | "deliveryType"
   | "nric"
   | "contact"
+  | "purpose"
   | "remarks"
   | "attachments"
   | "org"