@7365admin1/layer-common 3.0.7 → 3.0.8

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @iservice365/layer-common
 
+## 3.0.8
+
+### Patch Changes
+
+- d2ab57b: Mask Site Settings Host url
+- 3dc892a: Update Layer-common version
+
 ## 3.0.7
 
 ### Patch Changes

package/components/CameraMain.vue

@@ -32,6 +32,9 @@
             @click:row="handleRowClick"
             style="max-height: 300px"
           >
+            <template #item.host="{ value }">
+              {{ maskHostUrl(value) }}
+            </template>
           </v-data-table>
         </v-card-text>
 
@@ -103,7 +106,7 @@
             <v-col cols="12" class="mb-2">
               Host:
               <span class="font-weight-bold">
-                {{ camera.host }}
+                {{ maskHostUrl(camera.host) }}
               </span>
             </v-col>
 
@@ -367,6 +370,19 @@ function handleSuccess() {
   getCameraRefresh();
 }
 
+function maskHostUrl(value?: string | null) {
+  if (!value) return "";
+
+  const text = String(value);
+  const protocolMatch = text.match(/^([a-z][a-z\d+\-.]*:\/\/)(.*)$/i);
+  const prefix = protocolMatch?.[1] ?? "";
+  const rest = protocolMatch?.[2] ?? text;
+
+  if (rest.length <= 8) return `${prefix}${"*".repeat(rest.length)}`;
+
+  return `${prefix}${rest.slice(0, 3)}****${rest.slice(-3)}`;
+}
+
 const camera = ref<TSiteCamera>({
   site: "",
   host: "",

package/components/DashboardMain.vue

@@ -53,6 +53,7 @@
           divided
           variant="outlined"
           class="bg-white"
+          style="border-radius: 8px; border-color: #d9e1e8;"
         >
           <v-btn
             v-for="range in rangeOptions"
@@ -62,8 +63,8 @@
             size="small"
             :style="
               selectedRange === range.value
-                ? { backgroundColor: '#0b2f47', color: '#ffffff' }
-                : {}
+                ? { backgroundColor: '#e2e8f0', color: '#0b2f47', fontWeight: '600' }
+                : { backgroundColor: 'transparent', color: '#64748b' }
             "
           >
             {{ range.label }}
@@ -350,13 +351,7 @@
                 <div
                   class="d-flex align-center ga-2 text-caption text-blue-grey"
                 >
-                  <v-avatar
-                    size="30"
-                    color="blue-grey-lighten-4"
-                    class="text-caption font-weight-bold text-blue-grey-darken-2"
-                  >
-                    {{ getInitials(item.person) }}
-                  </v-avatar>
+                  <AvatarMain :name="item.person" :size="30" />
                   <span class="text-truncate" style="max-width: 100px">{{
                     item.person
                   }}</span>
@@ -405,14 +400,8 @@
               rounded="lg"
               class="pa-3"
             >
-              <div class="d-flex align-center ga-3">
-                <v-avatar
-                  size="34"
-                  color="blue-grey-lighten-4"
-                  class="text-caption font-weight-bold text-blue-grey-darken-2 flex-shrink-0"
-                >
-                  {{ getInitials(item.name) }}
-                </v-avatar>
+              <div class="d-flex align-start ga-3">
+                <AvatarMain :name="item.name" :size="32" />
                 <div class="flex-grow-1" style="min-width: 0">
                   <div
                     class="text-body-2 font-weight-bold text-blue-grey-darken-4 text-truncate"
@@ -445,59 +434,37 @@
           action-label="View All"
           @action="goToDashboardRoute('feedbacks')"
         >
-          <div v-if="feedbackItems.length" class="d-flex flex-column ga-3">
-            <v-card
-              v-for="item in feedbackItems"
-              :key="item.id"
-              flat
-              border
-              rounded="lg"
-              class="pa-3"
-            >
-              <div class="d-flex align-center flex-wrap ga-3">
-                <div class="flex-grow-1" style="min-width: 0">
-                  <div
-                    class="text-body-2 font-weight-bold text-blue-grey-darken-4 text-truncate"
-                  >
-                    {{ item.title }}
-                  </div>
-                  <div class="text-caption text-blue-grey mt-1 text-truncate">
-                    {{ item.subtitle }}
-                  </div>
+          <div v-if="feedbackItems.length" class="figma-list mt-2">
+            <div v-for="item in feedbackItems" :key="item.id" class="d-flex align-center justify-space-between" style="padding: 16px 20px; border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 12px; background-color: #ffffff; box-shadow: 0 1px 2px rgba(0,0,0,0.02);">
+              <div style="flex: 1; min-width: 140px;">
+                <strong style="display: block; font-size: 15px; font-weight: 700; color: #0b2f47; margin-bottom: 4px;">{{ item.title }}</strong>
+                <span style="font-size: 13px; color: #94a3b8;">{{ item.subtitle }}</span>
+              </div>
+
+              <div style="flex: 1; display: flex; align-items: center; gap: 12px;">
+                <AvatarMain :name="item.person" :size="36" />
+                <span style="font-size: 14px; color: #64748b;">{{ item.person }}</span>
+              </div>
+
+              <div style="flex: 1; display: flex; justify-content: center;">
+                <div v-if="getStatusTone(item.status) === 'success'" style="background-color: #72e3a1; color: #0f5132; padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 500; text-transform: capitalize;">
+                  {{ item.status }}
                 </div>
-                <div
-                  class="d-flex align-center ga-2 text-caption text-blue-grey"
-                >
-                  <v-avatar
-                    size="30"
-                    color="blue-grey-lighten-4"
-                    class="text-caption font-weight-bold text-blue-grey-darken-2"
-                  >
-                    {{ getInitials(item.person) }}
-                  </v-avatar>
-                  <span class="text-truncate" style="max-width: 100px">{{
-                    item.person
-                  }}</span>
+                <div v-else-if="getStatusTone(item.status) === 'warning'" style="background-color: #fde68a; color: #92400e; padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 500; text-transform: capitalize;">
+                  {{ item.status }}
                 </div>
-                <v-chip
-                  size="small"
-                  :color="getStatusTone(item.status)"
-                  variant="tonal"
-                  label
-                >
+                <div v-else-if="getStatusTone(item.status) === 'error'" style="background-color: #fecaca; color: #b91c1c; padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 500; text-transform: capitalize;">
                   {{ item.status }}
-                </v-chip>
-                <v-btn
-                  variant="outlined"
-                  color="primary"
-                  size="small"
-                  class="text-none font-weight-bold"
-                  @click="goToListItem(item, 'feedbacks')"
-                >
-                  View
-                </v-btn>
+                </div>
+                <div v-else style="background-color: #e2e8f0; color: #64748b; padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 500; text-transform: capitalize;">
+                  {{ item.status || 'To-Do' }}
+                </div>
               </div>
-            </v-card>
+
+              <div style="flex: 0 0 auto; text-align: right;">
+                <v-btn variant="outlined" class="text-none font-weight-medium" size="small" color="#3b82f6" style="border-color: #e2e8f0; border-radius: 8px; padding: 0 16px; height: 32px;" @click="goToListItem(item, 'feedbacks')">View</v-btn>
+              </div>
+            </div>
           </div>
           <DashboardEmptyState v-else />
         </DashboardPanel>
@@ -995,8 +962,8 @@ onUnmounted(() => {
 
 const rangeOptions = [
   { label: "Today", value: "Today" },
-  { label: "Week", value: "This Week" },
-  { label: "Month", value: "This Month" },
+  { label: "7d", value: "This Week" },
+  { label: "30d", value: "This Month" },
 ];
 const defaultVisitorOptions = [
   "All",
@@ -1200,10 +1167,10 @@ const secondarySeries = computed(() =>
   normalizeSeries(activityChart.value.secondary, chartLabels.value.length)
 );
 const primaryLegendLabel = computed(
-  () => activityChart.value.primaryLabel || "Work Order"
+  () => "Closed Work Order"
 );
 const secondaryLegendLabel = computed(
-  () => activityChart.value.secondaryLabel || "Feedback"
+  () => "Open Work Order"
 );
 const chartMax = computed(() =>
   Math.max(1, ...primarySeries.value, ...secondarySeries.value)
@@ -1882,18 +1849,7 @@ function goToListItem(item: TaskItem | FeedbackItem, routeKey: string) {
   router.push(`/${props.orgId}/${props.site}/${path}/${id}`);
 }
 
-function getInitials(name: string) {
-  const parts = String(name || "")
-    .trim()
-    .split(/\s+/)
-    .filter(Boolean);
-  if (!parts.length) return "?";
-  return parts
-    .slice(0, 2)
-    .map((part) => part[0])
-    .join("")
-    .toUpperCase();
-}
+
 
 function formatNumber(value: number) {
   return new Intl.NumberFormat("en-US").format(toNumber(value));

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/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 }];