@7365admin1/layer-common 3.0.9 → 3.0.11

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @iservice365/layer-common
 
+## 3.0.11
+
+### Patch Changes
+
+- fd1ebe1: Update Layer Version to 3.0.11
+
+## 3.0.10
+
+### Patch Changes
+
+- 1919267: Update Layer Common Version to 3.0.10
+
 ## 3.0.9
 
 ### Patch Changes

package/components/DashboardMain.vue

@@ -1079,7 +1079,7 @@ const isHygieneMode = computed(
 const {
   getDashboard,
   getDashboardHygiene,
-  getDashboardHygieneWeeklyActivity,
+  getDashboardWeeklyActivity,
   getDashboardHygieneTaskSchedule,
   getDashboardHygieneAttendance,
   getDashboardHygieneFeedbacks,
@@ -1169,13 +1169,13 @@ const { data: getDashboardAltReq, pending: loadingAltMetrics } =
     }
   );
 
-// Weekly activity (hygiene mode only)
+// Weekly activity (all modes)
 const { data: weeklyActivityReq, pending: loadingWeeklyActivity } =
   await useLazyAsyncData(
     `get-dashboard-weekly-activity-${props.site}-${props.serviceType}`,
     () =>
-      props.serviceType && isHygieneMode.value
-        ? getDashboardHygieneWeeklyActivity(
+      props.serviceType
+        ? getDashboardWeeklyActivity(
             props.site,
             props.serviceType as TServiceType,
             currentPeriod.value
@@ -1251,10 +1251,10 @@ const finalLoading = computed(() => {
     );
   }
   if (isPropertyMode.value) {
-    return loadingAltMetrics.value || loadingFeedbacks.value;
+    return loadingAltMetrics.value || loadingWeeklyActivity.value || loadingFeedbacks.value;
   }
   // security
-  return loadingAltMetrics.value || loadingAttendance.value || loadingFeedbacks.value;
+  return loadingAltMetrics.value || loadingWeeklyActivity.value || loadingAttendance.value || loadingFeedbacks.value;
 });
 
 // ─── Merged Dashboard Data ────────────────────────────────────────────────────
@@ -1262,45 +1262,49 @@ const finalLoading = computed(() => {
 const finalDashboardData = computed<Record<string, any>>(() => {
   if (!props.serviceType) return props.dashboardData || {};
 
+  let weeklyActivity = weeklyActivityReq.value ?? [];
+  const hasNoActivity =
+    !weeklyActivity.length ||
+    weeklyActivity.every(
+      (item: any) =>
+        !item.workOrder &&
+        !item.taskCompleted &&
+        !item.openWorkOrder &&
+        !item.closedWorkOrder &&
+        !item.incidents &&
+        !item.visitors
+    );
+
+  if (hasNoActivity && currentPeriod.value === "thisWeek") {
+    weeklyActivity = [
+      { day: "Mon", workOrder: 800, taskCompleted: 1400 },
+      { day: "Tue", workOrder: 450, taskCompleted: 900 },
+      { day: "Wed", workOrder: 950, taskCompleted: 1640 },
+      { day: "Thu", workOrder: 2000, taskCompleted: 2100 },
+      { day: "Fri", workOrder: 2000, taskCompleted: 2700 },
+      { day: "Sat", workOrder: 2200, taskCompleted: 3100 },
+      { day: "Sun", workOrder: 2800, taskCompleted: 3200 },
+    ];
+  }
+
+  const activityChart = {
+    labels: weeklyActivity.map((item: any) => item.day || item.label),
+    workOrders: weeklyActivity.map(
+      (item: any) => item.workOrder ?? item.openWorkOrder
+    ),
+    taskCompleted: weeklyActivity.map(
+      (item: any) => item.taskCompleted ?? item.closedWorkOrder
+    ),
+  };
+
   if (isHygieneMode.value) {
     const data = getDashboardReq.value ?? {};
-    let weeklyActivity = weeklyActivityReq.value ?? [];
-    const hasNoActivity =
-      !weeklyActivity.length ||
-      weeklyActivity.every(
-        (item: any) =>
-          !item.workOrder &&
-          !item.taskCompleted &&
-          !item.openWorkOrder &&
-          !item.closedWorkOrder
-      );
-
-    if (hasNoActivity && currentPeriod.value === "thisWeek") {
-      weeklyActivity = [
-        { day: "Mon", workOrder: 800, taskCompleted: 1400 },
-        { day: "Tue", workOrder: 450, taskCompleted: 900 },
-        { day: "Wed", workOrder: 950, taskCompleted: 1640 },
-        { day: "Thu", workOrder: 2000, taskCompleted: 2100 },
-        { day: "Fri", workOrder: 2000, taskCompleted: 2700 },
-        { day: "Sat", workOrder: 2200, taskCompleted: 3100 },
-        { day: "Sun", workOrder: 2800, taskCompleted: 3200 },
-      ];
-    }
-
     return {
       ...data,
       openWorkOrder: data.openWorkOrder ?? { count: 0, percentage: 0 },
       supplyAlert: data.supplyAlert ?? { count: 0, percentage: 0 },
       taskCompleted: data.taskCompleted ?? { count: 0, percentage: 0 },
-      activityChart: {
-        labels: weeklyActivity.map((item: any) => item.day || item.label),
-        workOrders: weeklyActivity.map(
-          (item: any) => item.workOrder ?? item.openWorkOrder
-        ),
-        taskCompleted: weeklyActivity.map(
-          (item: any) => item.taskCompleted ?? item.closedWorkOrder
-        ),
-      },
+      activityChart,
       taskScheduleItems: taskScheduleReq.value?.items ?? [],
       attendanceItems: attendanceReq.value?.items ?? [],
       feedbackItems: feedbacksReq.value?.items ?? [],
@@ -1311,6 +1315,7 @@ const finalDashboardData = computed<Record<string, any>>(() => {
     const data = getDashboardAltReq.value ?? {};
     return {
       ...data,
+      activityChart,
       feedbackItems: feedbacksReq.value?.items ?? [],
       openWorkOrder: data.openWorkOrder ?? { count: 0, inProgress: 0, percentage: 0 },
       openIncidents: data.openIncidents ?? { count: 0, highSeverity: 0, percentage: 0 },
@@ -1328,6 +1333,7 @@ const finalDashboardData = computed<Record<string, any>>(() => {
   const data = getDashboardAltReq.value ?? {};
   return {
     ...data,
+    activityChart,
     feedbackItems: feedbacksReq.value?.items ?? [],
     attendanceItems: attendanceReq.value?.items ?? [],
     openWorkOrder: data.openWorkOrder ?? {
@@ -1397,14 +1403,14 @@ const propertyCardValues: TDashboardCardValue[] = [
     key: "visitors",
     periodKey: "period",
     title: "Visitors",
-    icon: "mdi-account-group",
+    icon: "mdi-account-multiple",
     color: "#d28722",
   },
   {
     key: "facilityBookings",
     periodKey: "period",
     title: "Facility Booking",
-    icon: "mdi-domain",
+    icon: "mdi-office-building",
     color: "#23824f",
   },
 ];
@@ -1428,14 +1434,14 @@ const securityCardValues: TDashboardCardValue[] = [
     key: "visitors",
     periodKey: "period",
     title: "Visitors",
-    icon: "mdi-account-group",
+    icon: "mdi-account-multiple",
     color: "#d28722",
   },
   {
     key: "patrolCompliance",
     periodKey: "period",
     title: "Patrol Compliance",
-    icon: "mdi-calculator-variant",
+    icon: "mdi-office-building",
     color: "#23824f",
   },
 ];
@@ -1603,7 +1609,7 @@ const facilityOptions = computed(() =>
 function getPropertyKpiCards() {
   const workOrderMetric = getMetric(["openWorkOrder", "workOrders", "openWorkOrders", "workOrder"]);
   const incidentMetric = getMetric(["openIncidents", "incidents", "incidentReports"]);
-  const visitorMetric = getMetric(["visitors", "visitorTransactions"]);
+  const visitorMetric = getFilteredVisitorMetric();
   const facilityMetric = computeFacilityMetric();
 
   return [
@@ -1615,7 +1621,7 @@ function getPropertyKpiCards() {
       tint: "#d7ecff",
       value: formatNumber(toNumber(workOrderMetric?.count)),
       percentage: toNumber(workOrderMetric?.percentage),
-      meta: `${toNumber(workOrderMetric?.inProgress)} in progress`,
+      meta: getMetricMeta(workOrderMetric),
       raw: workOrderMetric,
       filter: undefined,
     },
@@ -1627,19 +1633,19 @@ function getPropertyKpiCards() {
       tint: "#ffdede",
       value: formatNumber(toNumber(incidentMetric?.count)),
       percentage: toNumber(incidentMetric?.percentage),
-      meta: `${toNumber(incidentMetric?.highSeverity)} high severity`,
+      meta: getMetricMeta(incidentMetric),
       raw: incidentMetric,
       filter: undefined,
     },
     {
       key: "visitors",
       title: "Visitors",
-      icon: "mdi-account-group",
+      icon: "mdi-account-multiple",
       color: "#d28722",
       tint: "#ffe4bd",
       value: formatNumber(toNumber(visitorMetric?.count)),
       percentage: toNumber(visitorMetric?.percentage),
-      meta: `${toNumber(visitorMetric?.currentlyOnSite)} currently on site`,
+      meta: getMetricMeta(visitorMetric),
       raw: visitorMetric,
       filter: {
         model: visitorType.value,
@@ -1653,12 +1659,12 @@ function getPropertyKpiCards() {
     {
       key: "facilityBookings",
       title: "Facility Booking",
-      icon: "mdi-domain",
+      icon: "mdi-office-building",
       color: "#23824f",
       tint: "#c8f3da",
       value: formatNumber(toNumber(facilityMetric?.count)),
       percentage: toNumber(facilityMetric?.percentage),
-      meta: `${toNumber(facilityMetric?.ongoing)} ongoing - ${toNumber(facilityMetric?.waitingApproval)} waiting approval`,
+      meta: getMetricMeta(facilityMetric),
       raw: facilityMetric,
       filter: {
         model: facilityType.value,
@@ -1700,6 +1706,7 @@ function getSecurityKpiCards() {
   const workOrderMetric = getMetric(["openWorkOrder", "workOrders", "openWorkOrders", "workOrder"]);
   const incidentMetric = getMetric(["openIncidents", "incidents", "incidentReports"]);
   const patrolMetric = getMetric(["patrolCompliance", "patrol"]);
+  const visitorMetric = getFilteredVisitorMetric();
 
   return [
     {
@@ -1710,7 +1717,7 @@ function getSecurityKpiCards() {
       tint: "#d7ecff",
       value: formatNumber(toNumber(workOrderMetric?.count)),
       percentage: toNumber(workOrderMetric?.percentage),
-      meta: `${toNumber(workOrderMetric?.overdue)} overdue · ${toNumber(workOrderMetric?.inProgress)} in progress`,
+      meta: getMetricMeta(workOrderMetric),
       raw: workOrderMetric,
       filter: undefined,
     },
@@ -1722,20 +1729,20 @@ function getSecurityKpiCards() {
       tint: "#ffdede",
       value: formatNumber(toNumber(incidentMetric?.count)),
       percentage: toNumber(incidentMetric?.percentage),
-      meta: `${toNumber(incidentMetric?.highSeverity)} high severity`,
+      meta: getMetricMeta(incidentMetric),
       raw: incidentMetric,
       filter: undefined,
     },
     {
       key: "visitors",
       title: "Visitors",
-      icon: "mdi-account-group",
+      icon: "mdi-account-multiple",
       color: "#d28722",
       tint: "#ffe4bd",
-      value: formatNumber(toNumber(getFilteredVisitorMetric()?.count)),
-      percentage: toNumber(getFilteredVisitorMetric()?.percentage),
-      meta: `${toNumber(getFilteredVisitorMetric()?.currentlyOnSite)} currently on site`,
-      raw: getFilteredVisitorMetric(),
+      value: formatNumber(toNumber(visitorMetric?.count)),
+      percentage: toNumber(visitorMetric?.percentage),
+      meta: getMetricMeta(visitorMetric),
+      raw: visitorMetric,
       filter: {
         model: visitorType.value,
         options: visitorOptions.value,
@@ -1748,12 +1755,12 @@ function getSecurityKpiCards() {
     {
       key: "patrolCompliance",
       title: "Patrol Compliance",
-      icon: "mdi-calculator-variant",
+      icon: "mdi-office-building",
       color: "#23824f",
       tint: "#c8f3da",
       value: `${toNumber(patrolMetric?.count)}%`,
       percentage: toNumber(patrolMetric?.percentage),
-      meta: `${toNumber(patrolMetric?.missed ?? patrolMetric?.missedCheckpoints)} checkpoint missed · ${toNumber(patrolMetric?.ongoing)} ongoing`,
+      meta: getMetricMeta(patrolMetric),
       raw: patrolMetric,
       filter: undefined,
     },
@@ -2022,6 +2029,10 @@ function getMetricMeta(metric: DashboardMetric) {
       `${formatNumber(toNumber((metric as any).missedCheckpoints ?? (metric as any).missed))} checkpoint missed`
     );
   }
+  if (typeof metric.ongoing !== "undefined")
+    parts.push(`${formatNumber(toNumber(metric.ongoing))} ongoing`);
+  if (typeof metric.waitingApproval !== "undefined")
+    parts.push(`${formatNumber(toNumber(metric.waitingApproval))} waiting approval`);
   if (typeof metric.lowStock !== "undefined")
     parts.push(`${formatNumber(toNumber(metric.lowStock))} low stock`);
   if (typeof metric.outOfStock !== "undefined")
@@ -2032,7 +2043,7 @@ function getMetricMeta(metric: DashboardMetric) {
   ) {
     parts.push(`${formatNumber(toNumber(metric.completed))} completed`);
   }
-  return parts.join(" - ");
+  return parts.join(" • ");
 }
 
 function getFilteredVisitorMetric(): DashboardMetric {

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/MemberInformation.vue

@@ -204,7 +204,7 @@ function handleScanQRPass() {
 }
 
 watch(selectedPass, (newVal) => {
-    memberForm.visitorPass = [{ keyId: newVal }]
+    memberForm.visitorPass = [...(newVal ? [{ keyId: newVal }] : [])]
 })
 
 watch(scannedPassValue, (newVal) => {

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/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/useDashboard.ts

@@ -33,7 +33,7 @@ export default function () {
     );
   }
 
-  function getDashboardHygieneWeeklyActivity(
+  function getDashboardWeeklyActivity(
     site = "",
     serviceType: TServiceType = "cleaning_services",
     period?: TDashboardValues
@@ -149,7 +149,7 @@ export default function () {
   return {
     getDashboard,
     getDashboardHygiene,
-    getDashboardHygieneWeeklyActivity,
+    getDashboardWeeklyActivity,
     getDashboardHygieneTaskSchedule,
     getDashboardHygieneAttendance,
     getDashboardHygieneFeedbacks,

package/composables/useMember.ts

@@ -58,7 +58,7 @@ export default function useMember() {
     if (search) query.search = search;
     if (user) query.user = user;
     if (org) query.org = org;
-
+    if (siteId) query.siteId = siteId;
     return useNuxtApp().$api<Record<string, any>>("/api/members", {
       method: "GET",
       query,
@@ -120,10 +120,9 @@ export default function useMember() {
     return useNuxtApp().$api<TMember>("/api/members/direct", {
       method: "POST",
       body: payload,
-    })
+    });
   }
 
-
   function updateMemberSite(id: string, siteId: string, siteName: string) {
     return useNuxtApp().$api(`/api/members/site`, {
       method: "PUT",

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.9",
+  "version": "3.0.11",
   "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"