@7365admin1/layer-common 1.10.9 → 1.11.0

package/components/SlideCardGroup.vue

@@ -0,0 +1,194 @@
+<template>
+  <v-sheet class="mx-auto">
+    <v-slide-group
+      class="pa-1"
+      show-arrows
+      :style="{ backgroundColor: '#FFFF' }"
+    >
+      <v-slide-group-item
+        v-for="(data, idx) in localDataFiles"
+        :key="idx"
+        v-slot="{ isSelected }"
+      >
+        <v-card
+          :class="['ma-1', isSelected && 'selected']"
+          width="150"
+          height="100"
+          @click="clickable && emit('onClickCarousel', data.path)"
+          class="rounded-lg border-thin"
+          border=" opacity-50 thin "
+        >
+          <v-btn
+            icon
+            variant="text"
+            size="x-small"
+            class="remove-btn pa-0 ma-0"
+            @click.stop="removeFile(data)"
+          >
+            <v-icon color="red" class="pa-0 ma-0" size="x-large"
+              >mdi-close-circle</v-icon
+            >
+          </v-btn>
+          <!-- File Icons -->
+
+          <v-img :src="data.url" cover height="200">
+            <template #placeholder>
+              <v-skeleton-loader height="100%" width="100%" />
+            </template>
+          </v-img>
+          <!-- <template v-if="url.type !== 'image'">
+            <div
+              class="d-flex fill-height align-center justify-center flex-column"
+            >
+              <v-icon
+                :icon="getFileIcon(url.type)"
+                size="64"
+                :color="getFileColor(url.type)"
+              ></v-icon>
+            </div>
+          </template>
+
+
+
+          <template v-else>
+            <v-img :src="url.path" cover height="200">
+              <template #placeholder>
+                <v-skeleton-loader height="100%" width="100%" />
+              </template>
+            </v-img>
+          </template> -->
+
+          <!-- Edit Button -->
+          <!-- <div v-if="imgEditable" class="edit-btn">
+            <v-btn
+              color="primary"
+              size="small"
+              @click.stop="onImageEdit(url.path, idx)"
+            >
+              <v-icon start>mdi-pencil</v-icon>
+              Edit
+            </v-btn>
+          </div>  -->
+        </v-card>
+      </v-slide-group-item>
+    </v-slide-group>
+  </v-sheet>
+
+  <DrawImage
+    v-if="isShowImageEdit"
+    :is-show-dialog="isShowImageEdit"
+    :image-url="imageUrl"
+    :image-idx="imageIdx"
+    @on-submit="onImageSubmitEdit"
+    @on-close-dialog="isShowImageEdit = false"
+  />
+</template>
+
+<script setup lang="ts">
+const { getImage } = useUtils();
+const { attachedFiles } = useUploadFiles();
+
+const emit = defineEmits<{
+  (event: "onClickCarousel", url: string): void;
+  (event: "onImageEdit", url: string, idx: number): void;
+  (event: "onFileRemove"): void;
+}>();
+
+const props = defineProps<{
+  clickable?: boolean;
+  imgEditable?: boolean;
+  dataFiles?: File[];
+}>();
+const localDataFiles = ref([...props.dataFiles]);
+const isShowImageEdit = ref(false);
+const imageUrl = ref("");
+const imageIdx = ref(0);
+
+const getFileType = (url: string) => {
+  const extension = url.split(".").pop()?.toLowerCase() || "";
+  if (["jpg", "jpeg", "png", "gif", "webp"].includes(extension)) return "image";
+  if (["pdf"].includes(extension)) return "pdf";
+  if (["doc", "docx"].includes(extension)) return "word";
+  return "other";
+};
+
+const getFileIcon = (type: string) => {
+  switch (type) {
+    case "pdf":
+      return "mdi-file-pdf-box";
+    case "word":
+      return "mdi-file-word-box";
+    default:
+      return "mdi-file-outline";
+  }
+};
+
+const getFileColor = (type: string) => {
+  switch (type) {
+    case "pdf":
+      return "red";
+    case "word":
+      return "blue";
+    default:
+      return "grey";
+  }
+};
+
+const onImageEdit = (url: string, idx: number) => {
+  isShowImageEdit.value = true;
+  imageUrl.value = url;
+  imageIdx.value = idx;
+};
+
+const onImageSubmitEdit = async (url: string, idx: number) => {
+  const response = await getImage(url);
+  if (!response) return;
+  attachedFiles.value[idx].data = new File(
+    [response],
+    attachedFiles.value[idx].data?.name
+  );
+  attachedFiles.value[idx].url = url;
+  isShowImageEdit.value = false;
+};
+
+const isImageFile = (type: string) => {
+  return type?.startsWith("image/");
+};
+
+watch(
+  () => props.dataFiles,
+  (newDataFiles) => {
+    localDataFiles.value = [...newDataFiles];
+  }
+);
+
+const removeFile = (file) => {
+  const index = localDataFiles.value.findIndex(
+    (dataFile) => dataFile.id === file.id
+  );
+
+  if (index !== -1) {
+    localDataFiles.value.splice(index, 1);
+    emit("onFileRemove", file);
+  }
+};
+</script>
+
+<style scoped>
+.edit-btn {
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+}
+
+.selected {
+  border: 2px solid var(--v-theme-primary);
+}
+
+.remove-btn {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  z-index: 2;
+}
+</style>

package/components/Tooltip/Info.vue

@@ -0,0 +1,33 @@
+<template>
+    <v-tooltip v-bind="$attrs" :text="text" @click.stop>
+        <template v-slot:activator="{ props: activatorProps }">
+            <v-btn icon="mdi-information-symbol" v-bind="activatorProps" class="p-0 m-0 d-flex align-center"
+                :density="density" :size="size" color="primary-button" />
+        </template>
+    </v-tooltip>
+</template>
+
+<script setup lang="ts">
+
+import type { VTooltip} from "vuetify/components"
+
+type TTooltipDensity = VTooltip["$props"]["density"]
+
+const props = defineProps({
+    text: {
+        type: String,
+        default: ""
+    },
+     size: {
+        type: String,
+        default: ""
+    },
+    density: {
+        type: String as PropType<TTooltipDensity>,
+        default: "default"
+    }
+})
+
+</script>
+
+<style scoped></style>

package/components/VisitorForm.vue

@@ -110,6 +110,36 @@
             </v-col>
           </template>
 
+          <template v-if="shouldShowField('delivery-company')">
+            <v-col cols="12">
+              <InputLabel class="text-capitalize" title="Delivery Company" />
+              <v-combobox v-model="deliveryCompany" v-model:search="deliveryCompanyInput" ref="companyCombo"
+                autocomplete="off" :hide-no-data="false" :items="deliveryCompanyList" item-value="value"
+                :loading="siteDataPending" variant="outlined"
+                density="comfortable" persistent-hint small-chips>
+                <template v-slot:no-data>
+                  <v-list-item>
+                    <v-list-item-title v-if="fetchCompanyListPending">
+                      <v-progress-circular indeterminate size="20" class="mr-3" />
+                      Searching companies…
+                    </v-list-item-title>
+                    <v-list-item-title v-else-if="companyNameInput" @click.stop="handleAddNewCompany"
+                      class="d-flex align-center ga-1">
+                      <span><v-icon icon="mdi-plus" /></span>Add "<strong>{{ companyNameInput }}</strong>" as new
+                      company.
+                    </v-list-item-title>
+                    <v-list-item-title v-else-if="!companyNameInput && companyNames.length === 0">
+                      Start typing to search for companies.
+                    </v-list-item-title>
+                    <v-list-item-title v-else>
+                      No companies available. Start typing to add a new one.
+                    </v-list-item-title>
+                  </v-list-item>
+                </template>
+              </v-combobox>
+            </v-col>
+          </template>
+
 
           <v-col v-if="shouldShowField('plateNumber')" cols="12">
             <v-row>
@@ -292,6 +322,7 @@ const { requiredRule, debounce, UTCToLocalTIme } = useUtils();
 const { getSiteById, getSiteLevels, getSiteUnits } = useSiteSettings();
 const { createVisitor, typeFieldMap, contractorTypes, getVisitors, updateVisitor } = useVisitor();
 const { getBySiteId: getEntryPassSettingsBySiteId } = useSiteEntryPassSettings();
+const { createVisitorPass } = useAccessManagement();
 const { findPersonByNRIC, findPersonByContact, searchCompanyList, findUsersByPlateNumber } = usePeople()
 const { getById: getUnitDataById } = useBuildingUnit()
 
@@ -324,7 +355,7 @@ const visitor = reactive<Partial<TVisitorPayload>>({
 
 const passType = ref("");
 const passQuantity = ref<number | null>(1);
-const passCards = ref<string[]>([]);
+const passCards = ref<{ _id: string; cardNo: string }[]>([]);
 
 const registeredUnitCompanyName = ref('N/A')
 
@@ -356,13 +387,17 @@ const blocksArray = ref<TDefaultOptionObj[]>([]);
 const levelsArray = ref<TDefaultOptionObj[]>([]);
 const unitsArray = ref<TDefaultOptionObj[]>([]);
 
+const deliveryCompany = ref("");
+const deliveryCompanyInput = ref("");
+const deliveryCompanyList = ref<string[]>([]);
+
 const matchingPlateNumberNonCheckedOutArr = ref<TVisitor[]>([])
 
 
 const vehicleNumberUserItems = ref<TPeople[]>([])
 
 
-const shouldShowField = (fieldKey: keyof TVisitorPayload) => {
+const shouldShowField = (fieldKey: keyof TVisitorPayload | 'delivery-company') => {
   if (prop.type !== "contractor" || contractorStep.value === 1) {
     const visibleFields = typeFieldMap[prop.type];
     return visibleFields?.includes(fieldKey);
@@ -634,6 +669,7 @@ const {
   data: siteData,
   refresh: refreshSiteData,
   status: blockStatus,
+  pending: siteDataPending,
 } = useLazyAsyncData(`fetch-site-data-${prop.site}`, () =>
   getSiteById(prop.site)
 );
@@ -665,7 +701,7 @@ const {
 watch(
   siteData,
   (newVal) => {
-    const siteDataValue = newVal as any;
+    const siteDataValue = newVal as TSite;
     if (siteDataValue) {
       const numberOfBlocks = siteDataValue.metadata?.block || 0;
       for (let i = 1; i <= numberOfBlocks; i++) {
@@ -674,6 +710,9 @@ watch(
           value: i,
         });
       }
+
+      deliveryCompanyList.value = Array.isArray(siteDataValue?.deliveryCompanyList) ? siteDataValue.deliveryCompanyList : [];
+
     } else {
       blocksArray.value = [];
     }
@@ -857,9 +896,32 @@ async function submit() {
       members: visitor.members,
     };
   }
+
+  if(prop.type === "delivery"){
+    payload = {
+      ...payload,
+      company: deliveryCompany.value
+    }
+  }
+
   try {
     const res = await createVisitor(payload);
     if (res) {
+      if (prop.type === "contractor" && passType.value) {
+        const visitorId = res?._id;
+        const acmUrl = entryPassSettings.value?.data?.settings?.acm_url;
+        if (visitorId && acmUrl) {
+          await createVisitorPass({
+            site: prop.site,
+            unitId: visitor.unit!,
+            quantity: passQuantity.value ?? 1,
+            type: passType.value === "QR" ? "QRCODE" : passType.value,
+            nfcCards: passCards.value,
+            acm_url: acmUrl,
+            visitorId,
+          });
+        }
+      }
       if (createMore.value) {
         emit("done:more");
       } else emit("done");

package/components/VisitorManagement.vue

@@ -89,13 +89,19 @@
           <span class="text-capitalize">{{
             UTCToLocalTIme(item.checkIn) || "-"
           }}</span>
+          <span>
+            <v-icon v-if="item?.snapshotEntryImage" size="17" icon="mdi-image" @click.stop="handleViewImage(item.snapshotEntryImage)" />
+          </span>
         </span>
         <span class="d-flex align-center ga-2">
           <v-icon icon="mdi-clock-time-eight-outline" color="red" size="20" />
           <template v-if="item.checkOut">
             <span class="text-capitalize">{{
-              UTCToLocalTIme(item.checkOut) || "_"
+              UTCToLocalTIme(item.checkOut) || "-"
             }}</span>
+            <span>
+              <v-icon v-if="item?.snapshotExitImage" size="17" icon="mdi-image" @click.stop="handleViewImage(item.snapshotExitImage)" />
+            </span>
             <span v-if="item?.manualCheckout">
               <TooltipInfo text="Manual Checkout" density="compact" size="x-small" />
             </span>
@@ -120,8 +126,9 @@
     </v-dialog>
 
     <v-dialog v-model="dialog.showForm" v-if="activeVisitorFormType" width="450" persistent>
-      <VisitorForm :mode="mode" :org="orgId" :site="siteId" :visitor-data="selectedVisitorDataObject" :type="activeVisitorFormType" @back="handleClickBack"
-        @done="handleVisitorFormDone" @done:more="handleVisitorFormCreateMore" @close:all="handleCloseAll" />
+      <VisitorForm :mode="mode" :org="orgId" :site="siteId" :visitor-data="selectedVisitorDataObject"
+        :type="activeVisitorFormType" @back="handleClickBack" @done="handleVisitorFormDone"
+        @done:more="handleVisitorFormCreateMore" @close:all="handleCloseAll" />
     </v-dialog>
 
     <v-dialog v-model="dialog.viewVisitor" width="450" persistent>
@@ -200,6 +207,7 @@ const {
 const { debounce, formatCamelCaseToWords, formatDate, UTCToLocalTIme } =
   useUtils();
 const { formatLocation } = useSecurityUtils();
+const {  getFileUrlAnpr } = useFile();
 // const { status: visitorStatus, search } = useRoute().query as { status: string, search: string};
 
 const route = useRoute()
@@ -276,8 +284,11 @@ const formattedFields = {
   level: "Level",
   unitName: "Unit",
   checkIn: "Check In",
+  snapshotEntryImage: "Entry Image",
   checkOut: "Check Out",
+  snapshotExitImage: "Exit Image",
   remarks: "Remarks",
+
 } as const;
 
 function filterTypeSelectionLabel() {
@@ -326,7 +337,7 @@ const {
       params.status = activeTab.value
     } else if (activeTab.value === "guests") {
       params.type = "guest"
-      params.status = undefined
+      params.status = "pending"
     }
 
     return await getVisitors(params)
@@ -348,11 +359,11 @@ watch(getVisitorReq, (newData: any) => {
 });
 
 const selectedVisitorObject = computed(() => {
+
   const obj = items.value.find((x: any) => x?._id === selectedVisitorId.value);
   if (!obj) return {};
   const type = obj?.type as TVisitorType | undefined;
-  if (!type) return {};
-  let includedKeys: string[] = ["checkIn", "checkOut"];
+  let includedKeys: string[] = ["checkIn", "checkOut", "plateNumber", "snapshotEntryImage", "snapshotExitImage"];
   includedKeys.unshift(...(typeFieldMap[type] ?? []));
   return Object.fromEntries(
     Object.entries(obj).filter(([key]) => includedKeys.includes(key))
@@ -434,6 +445,12 @@ function handleRegistrationUnregisteredVisitor(item: Partial<TVisitor>) {
   mode.value = "register";
 }
 
+function handleViewImage(imageId: string) {
+  const imageEndpoint = `${siteId}/${imageId}`;
+  const imageUrl = getFileUrlAnpr(imageEndpoint);
+  window.open(imageUrl, "_blank");
+}
+
 
 async function handleProceedDeleteVisitor() {
   try {

package/composables/useAccessManagement.ts

@@ -111,8 +111,8 @@ export default function useAccessManagement() {
     site: string;
     userType: string;
     type: string;
-    accessLevel: string;
-    liftAccessLevel: string;
+    accessLevel: string | null;
+    liftAccessLevel: string | null;
   }) {
     return useNuxtApp().$api<Record<string, any>>(
       `/api/access-management/access-and-lift-cards`,
@@ -122,8 +122,8 @@ export default function useAccessManagement() {
           site: params.site,
           userType: params.userType,
           type: params.type,
-          accessLevel: params.accessLevel,
-          liftAccessLevel: params.liftAccessLevel,
+          ...(params.accessLevel != null ? { accessLevel: params.accessLevel } : {}),
+          ...(params.liftAccessLevel != null ? { liftAccessLevel: params.liftAccessLevel } : {}),
         },
       }
     );
@@ -135,8 +135,8 @@ export default function useAccessManagement() {
     type: string;
     site: string;
     userType: string;
-    accessLevel: string;
-    liftAccessLevel: string;
+    accessLevel: string | null;
+    liftAccessLevel: string | null;
   }) {
     return useNuxtApp().$api<Record<string, any>>(
       `/api/access-management/assign-access-card`,
@@ -243,6 +243,42 @@ export default function useAccessManagement() {
     );
   }
 
+  function generateQrVms(params: {
+    site: string;
+    unitId: string;
+    quantity: number;
+  }) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/access-management/generate-qr-vms`,
+      {
+        method: "POST",
+        body: {
+          site: params.site,
+          unitId: params.unitId,
+          quantity: params.quantity,
+        },
+      }
+    );
+  }
+
+  function createVisitorPass(payload: {
+    site: string;
+    unitId: string;
+    quantity: number;
+    type: string;
+    nfcCards: { _id: string; cardNo: string }[];
+    acm_url: string;
+    visitorId: string;
+  }) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/access-management/visitor`,
+      {
+        method: "POST",
+        body: payload,
+      }
+    );
+  }
+
   return {
     getDoorAccessLevels,
     getLiftAccessLevels,
@@ -261,5 +297,7 @@ export default function useAccessManagement() {
     saveVisitorAccessCardQrTag,
     getAllVisitorAccessCardsQrTags,
     getAvailableContractorCards,
+    generateQrVms,
+    createVisitorPass,
   };
 }

package/composables/useBulletin.ts

@@ -1,12 +1,17 @@
+import type { APP_CONSTANTS } from "../constants/app";
+
 export default function(){
 
-  const recipientList: { title: string, value: TAnnouncementRecipients }[] = [
-    // resident | security_agency | cleaning_services | mechanical_electrical | property_management_agency
+  const recipientList: { title: string, value: typeof APP_CONSTANTS[keyof typeof APP_CONSTANTS] }[] = [
     { title: "Security Agency", value: "security_agency" },
     { title: "Cleaning Services", value: "cleaning_services" },
     { title: "Mechanical & Electrical", value: "mechanical_electrical" },
     { title: "Property Management Agency", value: "property_management_agency" },
-    { title: "Resident", value: "resident" }
+    { title: "Resident", value: "resident" },
+    { title: "Pest Control", value: "pest_control_services" },
+    { title: "Landscaping", value: "landscaping_services" },
+    { title: "Pool Maintenance", value: "pool_maintenance_services" },
+
 ]
 
   async function add(payload: Partial<TCreateAnnouncementPayload>) {

package/composables/useBulletinBoardPermission.ts

@@ -0,0 +1,48 @@
+import { useCommonPermissions } from "./useCommonPermission";
+
+export function useBulletinBoardPermission() {
+  const { hasPermission } = usePermission();
+  const { bulletinBoardPermissions: permissions } = useCommonPermissions();
+
+  const { userAppRole } = useLocalSetup();
+
+  const canViewBulletinBoard = computed(() => {
+    if (!userAppRole.value) return true;
+    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.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.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.permissions.includes("*")) return true;
+    return hasPermission(userAppRole.value, permissions, "bulletin-board", "see-bulletin-board-details");
+  });
+
+
+
+  const canDeleteBulletinBoard = computed(() => {
+    if (!userAppRole.value) return true;
+    if (userAppRole.value.permissions.includes("*")) return true;
+    return hasPermission(userAppRole.value, permissions, "bulletin-board", "delete-bulletin-board");
+  });
+
+  return {
+    canViewBulletinBoard,
+    canCreateBulletinBoard,
+    canUpdateBulletinBoard,
+    canViewBulletinBoardDetails,
+    canDeleteBulletinBoard,
+  };
+}

package/composables/useCleaningPermission.ts

@@ -5,6 +5,7 @@ export default function useCleaningPermission() {
     feedbackPermissions,
     workOrderPermissions,
     invitationPermissions,
+    bulletinBoardPermissions,
   } = useCommonPermissions();
   const permissions: TPermissions = {
     members: memberPermissions,
@@ -12,6 +13,7 @@ export default function useCleaningPermission() {
     work_order: workOrderPermissions,
     roles: rolePermissions,
     invitations: invitationPermissions,
+    "bulletin-board": bulletinBoardPermissions,
     inventory: {
       "view-inventory": {
         check: true,