@7365admin1/layer-common 3.1.4-staging.53 → 3.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 3.2.0
+
+### Minor Changes
+
+- 5754751: 08072026 Version Release
+
 ## 3.1.3
 
 ### Patch Changes

package/components/CreateSubsciptionPlan.vue

@@ -0,0 +1,376 @@
+<template>
+  <v-card class="pa-2">
+    <!-- Header -->
+    <v-card-title class="d-flex align-center justify-space-between pb-2">
+      <span class="text-h6 font-weight-bold">
+        {{ isEditing ? "Edit Plan" : "Create New Plan" }}
+      </span>
+
+      <v-btn
+        icon="mdi-close"
+        variant="text"
+        density="comfortable"
+        aria-label="Close"
+        @click="$emit('cancel')"
+      />
+    </v-card-title>
+
+    <v-divider />
+
+    <!-- Form Content -->
+    <v-form ref="formRef" class="my-4" @submit.prevent="submit">
+      <v-card-text class="pa-2 max-h-70vh overflow-y-auto">
+        <!-- Plan Details Section -->
+        <div class="text-subtitle-2 font-weight-bold mb-3 text-grey-darken-3">
+          Plan Details
+        </div>
+
+        <!-- Plan Name -->
+        <v-text-field
+          v-model="form.name"
+          label="Plan Name"
+          placeholder="e.g., Business"
+          variant="outlined"
+          density="compact"
+          :error-messages="errors.name"
+          class="mb-3"
+          required
+        >
+          <template #label>
+            Plan Name <span class="text-error">*</span>
+          </template>
+        </v-text-field>
+
+        <!-- Description -->
+        <v-textarea
+          v-model="form.description"
+          label="Description (optional)"
+          placeholder="Enter description"
+          variant="outlined"
+          density="compact"
+          rows="2"
+          auto-grow
+          class="mb-3"
+        />
+
+        <!-- Max Seats -->
+        <v-text-field
+          v-model.number="form.maxSeats"
+          type="number"
+          min="0"
+          variant="outlined"
+          density="compact"
+          class="mb-4"
+          required
+        >
+          <template #label>
+            Max seats <span class="text-error">*</span>
+          </template>
+        </v-text-field>
+
+        <v-divider class="my-4" />
+
+        <!-- Pricing Section -->
+        <div class="text-subtitle-2 font-weight-bold mb-3 text-grey-darken-3">
+          Pricing
+        </div>
+
+        <!-- Plan Type -->
+        <v-select
+          v-model="form.planType"
+          :items="planTypeOptions"
+          variant="outlined"
+          density="compact"
+          class="mb-3"
+        >
+          <template #label>
+            Subscription plan type <span class="text-error">*</span>
+          </template>
+        </v-select>
+
+        <!-- Billing Cycle -->
+        <v-select
+          v-if="form.planType !== 'free_bundle'"
+          v-model="form.billingCycle"
+          :items="billingCycleOptions"
+          placeholder="Select billing cycle"
+          variant="outlined"
+          density="compact"
+          class="mb-3"
+        >
+          <template #label>
+            Billing cycle <span class="text-error">*</span>
+          </template>
+        </v-select>
+
+        <!-- Bundle Applications (Chip Toggle) -->
+        <div v-if="form.planType !== 'custom_apps'" class="mb-4">
+          <div class="text-caption font-weight-medium text-grey-darken-2 mb-2">
+            Included Applications
+          </div>
+
+          <v-chip-group
+            v-model="form.bundleApps"
+            column
+            multiple
+            selected-class="bg-grey-darken-3 text-white"
+          >
+            <v-chip
+              v-for="app in AVAILABLE_APPLICATIONS"
+              :key="app.id"
+              :value="app.id"
+              filter
+              variant="outlined"
+              size="small"
+            >
+              {{ app.name }}
+            </v-chip>
+          </v-chip-group>
+        </div>
+
+        <!-- Bundle Price -->
+        <v-text-field
+          v-if="form.planType === 'paid_bundle'"
+          v-model.number="form.bundlePrice"
+          type="number"
+          min="0"
+          placeholder="0"
+          prefix="$"
+          :suffix="form.billingCycle === 'annually' ? '/yr' : '/mo'"
+          variant="outlined"
+          density="compact"
+          class="mb-3"
+        >
+          <template #label>
+            Price <span class="text-error">*</span>
+          </template>
+        </v-text-field>
+
+        <!-- Custom Applications (List Checkbox) -->
+        <div v-if="form.planType === 'custom_apps'" class="mb-4">
+          <div class="text-caption font-weight-medium text-grey-darken-2 mb-1">
+            Included Applications <span class="text-error">*</span>
+          </div>
+
+          <v-card variant="outlined" class="pa-1 mb-3">
+            <v-list density="compact" class="py-0">
+              <v-list-item
+                v-for="app in AVAILABLE_APPLICATIONS"
+                :key="app.id"
+                class="px-2"
+              >
+                <template #prepend>
+                  <v-checkbox-btn
+                    :model-value="form.customApps.includes(app.id)"
+                    density="compact"
+                    @update:model-value="toggleApp(form.customApps, app.id)"
+                  />
+                </template>
+
+                <v-list-item-title class="text-body-2">
+                  {{ app.name }}
+                </v-list-item-title>
+
+                <template #append>
+                  <span class="text-caption text-grey">
+                    ${{ form.billingCycle === 'annually' ? app.yearlyPrice : app.monthlyPrice }}/{{ form.billingCycle === 'annually' ? 'yr' : 'mo' }}
+                  </span>
+                </template>
+              </v-list-item>
+            </v-list>
+          </v-card>
+
+          <!-- Custom Total Price Display -->
+          <v-sheet
+            color="grey-lighten-4"
+            rounded
+            class="pa-3 d-flex align-center justify-space-between mb-1"
+          >
+            <span class="text-caption text-grey-darken-2">
+              Total price {{ form.billingCycle === 'annually' ? '/ year' : '/ month' }}
+            </span>
+            <span class="text-subtitle-1 font-weight-bold">
+              ${{ customTotalPrice.toLocaleString() }}
+            </span>
+          </v-sheet>
+
+          <p class="text-caption text-grey">
+            Calculated automatically from the selected applications.
+          </p>
+        </div>
+
+        <!-- Global Pricing Error Message -->
+        <v-alert
+          v-if="errors.pricing"
+          type="error"
+          variant="tonal"
+          density="compact"
+          class="mt-2 text-caption"
+        >
+          {{ errors.pricing }}
+        </v-alert>
+      </v-card-text>
+
+      <v-divider />
+
+      <!-- Footer Buttons -->
+      <v-card-actions class="pt-3 px-2">
+        <v-btn
+          variant="outlined"
+          color="grey-darken-1"
+          class="flex-1 text-none"
+          @click="$emit('cancel')"
+        >
+          Cancel
+        </v-btn>
+
+        <v-btn
+          type="submit"
+          color="grey-darken-4"
+          variant="flat"
+          class="flex-1 text-none"
+        >
+          {{ isEditing ? "Save Changes" : "Create Plan" }}
+        </v-btn>
+      </v-card-actions>
+    </v-form>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import { reactive, computed, watch } from "vue";
+
+import {
+  AVAILABLE_APPLICATIONS,
+  type PlanFormState,
+  type SubscriptionPlan,
+} from "../types/subscription";
+
+const props = defineProps<{
+  initialPlan?: SubscriptionPlan | null;
+}>();
+
+const emit = defineEmits<{
+  (e: "cancel"): void;
+  (e: "submit", payload: PlanFormState): void;
+}>();
+
+// Select options
+const planTypeOptions = [
+  { title: "Free (Bundle)", value: "free_bundle" },
+  { title: "Paid (Bundle)", value: "paid_bundle" },
+  { title: "Paid (Custom Apps)", value: "custom_apps" },
+];
+
+const billingCycleOptions = [
+  { title: "Monthly", value: "monthly" },
+  { title: "Annually", value: "annually" },
+];
+
+const isEditing = computed(() => !!props.initialPlan);
+
+const form = reactive<PlanFormState>({
+  name: props.initialPlan?.name ?? "",
+  description: props.initialPlan?.description ?? "",
+  maxSeats: props.initialPlan?.maxSeats ?? 0,
+  planType: props.initialPlan?.planType ?? "free_bundle",
+  billingCycle: props.initialPlan?.billingCycle ?? null,
+  bundleApps:
+    props.initialPlan?.planType !== "custom_apps"
+      ? [...(props.initialPlan?.applicationIds ?? [])]
+      : [],
+  bundlePrice: props.initialPlan?.price ?? null,
+  customApps:
+    props.initialPlan?.planType === "custom_apps"
+      ? [...(props.initialPlan?.applicationIds ?? [])]
+      : [],
+});
+
+const errors = reactive({
+  name: "",
+  pricing: "",
+});
+
+/*
+ * Reset pricing fields when plan type changes
+ */
+watch(
+  () => form.planType,
+  (type) => {
+    if (type === "free_bundle") {
+      form.billingCycle = null;
+      form.bundlePrice = null;
+    }
+  }
+);
+
+/*
+ * Toggle application selection helper
+ */
+function toggleApp(list: string[], id: string) {
+  const index = list.indexOf(id);
+  if (index === -1) {
+    list.push(id);
+  } else {
+    list.splice(index, 1);
+  }
+}
+
+/*
+ * Custom app total price calculation
+ */
+const customTotalPrice = computed(() => {
+  return form.customApps.reduce((total, id) => {
+    const app = AVAILABLE_APPLICATIONS.find((item) => item.id === id);
+    if (!app) return total;
+
+    return (
+      total +
+      (form.billingCycle === "annually" ? app.yearlyPrice : app.monthlyPrice)
+    );
+  }, 0);
+});
+
+/*
+ * Validate Form
+ */
+function validate(): boolean {
+  errors.name = form.name.trim() ? "" : "Plan name is required.";
+  errors.pricing = "";
+
+  if (form.planType !== "free_bundle" && !form.billingCycle) {
+    errors.pricing = "Please select a billing cycle.";
+  } else if (
+    form.planType === "paid_bundle" &&
+    (!form.bundlePrice || form.bundlePrice <= 0)
+  ) {
+    errors.pricing = "Please enter a price.";
+  } else if (
+    form.planType === "custom_apps" &&
+    form.customApps.length === 0
+  ) {
+    errors.pricing = "Select at least one application.";
+  }
+
+  return !errors.name && !errors.pricing;
+}
+
+/*
+ * Submit Form
+ */
+function submit() {
+  if (!validate()) {
+    return;
+  }
+
+  emit("submit", {
+    ...form,
+  });
+}
+</script>
+
+<style scoped>
+.max-h-70vh {
+  max-height: 70vh;
+}
+</style>

package/components/DashboardMain.vue

@@ -1483,6 +1483,7 @@ const props = defineProps({
   },
   title: { type: String, default: "" },
   extraWidgetKeys: { type: Array as () => string[], default: () => [] },
+  hiddenWidgetKeys: { type: Array as () => string[], default: () => [] },
   showHeaderActions: { type: Boolean, default: true },
   appKey: {
     type: String as () =>
@@ -1530,57 +1531,33 @@ const { downloadPDF } = usePDFDownload();
 const route = useRoute();
 
 const propertyWidgetPermissions: Record<string, string[]> = {
-  workOrders: [
-    "work_orders:see-all-work-orders",
-    "work-order:see-all-work-orders",
-  ],
+  workOrders: ["work_orders:see-all-work-orders"],
   incidents: ["incident-reports:see-incident-reports"],
-  visitors: ["visitorManagement:see-all-visitor"],
+  visitors: ["visitor-mgmt:see-all-visitor"],
   facilityBookings: ["facility-booking-mgmt:see-all-facility-booking"],
-  activity: [
-    "work_orders:see-all-work-orders",
-    "work-order:see-all-work-orders",
-  ],
+  activity: ["work_orders:see-all-work-orders"],
   upcomingEvents: ["event-mgmt:see-all-event"],
   todayReminders: ["event-mgmt:see-all-event"],
   todayAttentions: [
     "incident-reports:see-incident-reports",
     "facility-booking-mgmt:see-all-facility-booking",
   ],
-  workOrderStatus: [
-    "work_orders:see-all-work-orders",
-    "work-order:see-all-work-orders",
-  ],
+  workOrderStatus: ["work_orders:see-all-work-orders"],
   feedbacks: ["feedbacks:see-all-feedback"],
   activePatrol: ["virtual-patrol:see-all-virtual-patrol-logs"],
 };
 
 const moduleWidgetPermissions: Record<string, string[]> = {
-  openWorkOrder: [
-    "work_orders:see-all-work-orders",
-    "work_order:see-all-work-orders",
-    "work-order:see-all-work-orders",
-    "work-orders:see-all-work-orders",
-  ],
-  workOrders: [
-    "work_orders:see-all-work-orders",
-    "work_order:see-all-work-orders",
-    "work-order:see-all-work-orders",
-    "work-orders:see-all-work-orders",
-  ],
-  activity: [
-    "work_orders:see-all-work-orders",
-    "work_order:see-all-work-orders",
-    "work-order:see-all-work-orders",
-    "work-orders:see-all-work-orders",
-    "work_orders:see-all-work-orders",
+  openWorkOrder: ["work_orders:see-all-work-orders"],
+  workOrders: ["work_orders:see-all-work-orders"],
+  activity: ["work_orders:see-all-work-orders"],
+  taskSchedule: [
+    "cleaning-schedule-mgmt:see-all-schedules",
+    "schedule-task-mgmt:see-all-schedule-tasks",
   ],
-  recentActivity: [
-    "work_orders:see-all-work-orders",
-    "work_order:see-all-work-orders",
-    "work-order:see-all-work-orders",
-    "work-orders:see-all-work-orders",
-    "work_orders:see-all-work-orders",
+  taskCompleted: [
+    "cleaning-schedule-mgmt:see-all-schedules",
+    "schedule-task-mgmt:see-all-schedule-tasks",
   ],
   staffStatus: ["attendance-mgmt:see-all-attendance"],
   attendance: ["attendance-mgmt:see-all-attendance"],
@@ -1594,7 +1571,7 @@ const moduleWidgetPermissions: Record<string, string[]> = {
     "incident-reports:see-incident-reports",
     "incident-reports:see-all-incident-reports",
   ],
-  visitors: ["visitor:see-all-visitor"],
+  visitors: ["visitor-mgmt:see-all-visitor"],
   facilityBookings: ["facility-booking:see-all-facility-booking"],
   patrolCompliance: [
     "virtual-patrol:see-all-virtual-patrol-logs",
@@ -1610,6 +1587,7 @@ function hasSchedulePermission(permissions: string[], action: string) {
 }
 
 function canViewWidget(key: string) {
+  if (props.hiddenWidgetKeys.includes(key)) return false;
   const permissions = userAppRole.value?.permissions;
   const modulePermissions = isPropertyMode.value
     ? propertyWidgetPermissions[key]

package/components/EntryPassInformation.vue

@@ -168,13 +168,13 @@
       <template v-if="passType === 'HID_QR'">
         <v-alert
           v-if="!hidQrPrinterConfigured"
-          type="info"
+          type="warning"
           variant="tonal"
           density="compact"
           class="mt-3"
-          icon="mdi-qrcode"
+          icon="mdi-printer-alert"
         >
-          HID QR Code will be generated and shown on screen. You can download it after continuing.
+          No printer is configured on HID settings. QR Pass may not print.
         </v-alert>
         <v-alert
           v-else
@@ -184,7 +184,7 @@
           class="mt-3"
           icon="mdi-qrcode-scan"
         >
-          HID QR Code will be generated and shown on screen. Printing is also available.
+          HID QR Code will be generated and printed when you continue.
         </v-alert>
       </template>
     </template>

package/components/HidAccessLogDashboard.vue

@@ -418,17 +418,8 @@ const selectedHistoryRows = computed<AccessRow[]>(() => {
   if (!selectedHistoryRow.value) return [];
 
   const selectedKey = selectedHistoryRow.value.identityKey;
-  const selectedIdentity = findIdentityByKey(selectedKey);
-  const matchedLogs = logs.value.filter((log) =>
-    selectedIdentity
-      ? accessLogMatchesIdentity(log, selectedIdentity)
-      : getLogIdentityKey(log) === selectedKey,
-  );
-  const matchedLiveLogs = liveAccessLogs.value.filter((log) =>
-    selectedIdentity
-      ? accessLogMatchesIdentity(log, selectedIdentity)
-      : getAccessLogIdentityKey(log) === selectedKey,
-  );
+  const matchedLogs = logs.value.filter((log) => getLogIdentityKey(log) === selectedKey);
+  const matchedLiveLogs = liveAccessLogs.value.filter((log) => getAccessLogIdentityKey(log) === selectedKey);
 
   if (!matchedLogs.length && !matchedLiveLogs.length) {
     return rows.value.filter((row) => row.identityKey === selectedKey);
@@ -844,7 +835,7 @@ function getIdentityKey(identity: Record<string, any>) {
   return [
     identity.hidUserId,
     identity.registration,
-    identity.cardNo || identity.metadata?.qrCodeValue,
+    identity.cardNo,
   ].filter(Boolean).join("|");
 }
 
@@ -860,7 +851,7 @@ function getLogIdentityKey(log: Record<string, any>) {
   return [
     identity.hidUserId || lookup.hidUserId || rawLog.user_id || rawLog.userId || rawLog.hidUserId,
     identity.registration || lookup.registration,
-    identity.cardNo || lookup.cardNo || rawLog.card_value || rawLog.cardNo || rawLog.qrcode_value,
+    identity.cardNo || lookup.cardNo || rawLog.card_value || rawLog.cardNo,
   ].filter(Boolean).join("|");
 }
 
@@ -1182,26 +1173,25 @@ function findIdentityForAccessLog(rawLog: Record<string, any>, event: Record<str
   const hidUserId = rawLog.user_id ?? rawLog.userId ?? rawLog.hidUserId ?? event.payload?.identity?.hidUserId ?? event.payload?.identityLookup?.hidUserId;
   const registration = rawLog.registration ?? event.payload?.identity?.registration ?? event.payload?.identityLookup?.registration;
   const cardNo = rawLog.card_value || rawLog.cardNo || event.payload?.identity?.cardNo || event.payload?.identityLookup?.cardNo;
-  const qrCodeValue = rawLog.qrcode_value || rawLog.qrCode || rawLog.qrcode;
 
   return identities.value.find((identity) => {
     return (
       (hidUserId !== undefined && hidUserId !== null && String(identity.hidUserId) === String(hidUserId)) ||
       (registration && identity.registration === registration) ||
-      (cardNo && String(identity.cardNo) === String(cardNo)) ||
-      (qrCodeValue && String(identity.metadata?.qrCodeValue || "") === String(qrCodeValue))
+      (cardNo && String(identity.cardNo) === String(cardNo))
     );
   });
 }
 
 function getLatestAccessLogForIdentity(identity: Record<string, any>) {
+  const identityKey = getIdentityKey(identity);
   const accessLogs = [
     ...liveAccessLogs.value,
     ...logs.value.flatMap((event) => getRawAccessLogs(event)),
   ];
 
   return accessLogs
-    .filter((log) => accessLogMatchesIdentity(log, identity))
+    .filter((log) => getAccessLogIdentityKey(log) === identityKey)
     .sort((a, b) => {
       const aTime = parseDate(getAccessLogTime(a, {}))?.getTime() || 0;
       const bTime = parseDate(getAccessLogTime(b, {}))?.getTime() || 0;
@@ -1209,46 +1199,11 @@ function getLatestAccessLogForIdentity(identity: Record<string, any>) {
     })[0];
 }
 
-function toUnknownRecord(value: unknown): Record<string, unknown> {
-  return typeof value === "object" && value !== null && !Array.isArray(value)
-    ? value as Record<string, unknown>
-    : {};
-}
-
-function accessLogMatchesIdentity(log: unknown, identity: unknown) {
-  const logRecord = toUnknownRecord(log);
-  const identityRecord = toUnknownRecord(identity);
-  const payload = toUnknownRecord(logRecord.payload);
-  const rawLog = Object.keys(toUnknownRecord(payload.rawAccessLog)).length
-    ? toUnknownRecord(payload.rawAccessLog)
-    : logRecord;
-  const eventIdentity = Object.keys(toUnknownRecord(payload.identity)).length
-    ? toUnknownRecord(payload.identity)
-    : toUnknownRecord(payload.identityLookup);
-  const metadata = toUnknownRecord(identityRecord.metadata);
-  const hidUserId = rawLog.user_id ?? rawLog.userId ?? rawLog.hidUserId ?? eventIdentity.hidUserId;
-  const registration = rawLog.registration || eventIdentity.registration;
-  const credential =
-    rawLog.card_value ||
-    rawLog.cardNo ||
-    rawLog.qrcode_value ||
-    rawLog.qrCode ||
-    rawLog.qrcode ||
-    eventIdentity.cardNo;
-  const identityCredential = identityRecord.cardNo || metadata.qrCodeValue;
-
-  return Boolean(
-    (hidUserId !== undefined && hidUserId !== null && String(identityRecord.hidUserId) === String(hidUserId)) ||
-    (registration && identityRecord.registration === registration) ||
-    (credential && identityCredential && String(identityCredential) === String(credential)),
-  );
-}
-
 function getAccessLogIdentityKey(rawLog: Record<string, any>) {
   return [
     rawLog.user_id ?? rawLog.userId ?? rawLog.hidUserId,
     rawLog.registration,
-    rawLog.card_value || rawLog.cardNo || rawLog.qrcode_value,
+    rawLog.card_value || rawLog.cardNo,
   ].filter(Boolean).join("|");
 }