@iservice365/layer-common 1.3.0 → 1.3.1

package/components/VisitorManagement.vue

@@ -1,95 +1,33 @@
 <template>
   <v-row no-gutters>
-    <TableMain
-      :headers="headers"
-      :items="items"
-      :loading="getVisitorPending"
-      :page="page"
-      :pages="pages"
-      :extension-height="110"
-      :pageRange="pageRange"
-      :canCreate="canAddVisitor"
-      @refresh="getVisitorRefresh"
-      @update:page="handleUpdatePage"
-      createLabel="Add Visitor"
-      show-header
-      @row-click="handleRowClick"
-      @create="dialog.showSelection = true"
-    >
+    <TableMain :headers="headers" :items="items" :loading="getVisitorPending" :page="page" :pages="pages"
+      :extension-height="110" :offset="300" :pageRange="pageRange" :canCreate="canAddVisitor"
+      @refresh="getVisitorRefresh" @update:page="handleUpdatePage" createLabel="Add Visitor" show-header
+      @row-click="handleRowClick" @create="dialog.showSelection = true">
       <template #extension>
         <v-row no-gutters class="w-100 d-flex flex-column">
-          <v-tabs
-            v-model="activeTab"
-            color="primary"
-            :height="40"
-            @update:model-value="toRoute"
-            class="w-100"
-          >
-            <v-tab
-              v-for="tab in tabOptions"
-              :value="tab.status"
-              :key="tab.status"
-              class="text-capitalize"
-            >
+          <v-tabs v-model="activeTab" color="primary" :height="40" @update:model-value="toRoute" class="w-100">
+            <v-tab v-for="tab in tabOptions" :value="tab.status" :key="tab.status" class="text-capitalize">
               {{ tab.name }}
             </v-tab>
           </v-tabs>
 
-          <v-card
-            class="w-100 px-3 d-flex align-center ga-5 py-2"
-            flat
-            :height="60"
-          >
-            <v-text-field
-              v-model="searchInput"
-              density="compact"
-              placeholder="Search"
-              clearable
-              max-width="300"
-              append-inner-icon="mdi-magnify"
-              hide-details
-            />
-            <v-checkbox
-              v-model="displayCheckedOutOnly"
-              class="text-subtitle-2"
-              hide-details
-            >
+          <v-card class="w-100 px-3 d-flex align-center ga-5 py-2" flat :height="60">
+            <v-text-field v-model="searchInput" density="compact" placeholder="Search" clearable max-width="300"
+              append-inner-icon="mdi-magnify" hide-details />
+            <v-checkbox v-model="displayCheckedOutOnly" class="text-subtitle-2" hide-details>
               <template #label>
                 <span class="text-caption">Not Checked Out</span>
               </template>
             </v-checkbox>
-            <InputDateTimePicker
-              v-model:utc="dateFrom"
-              density="compact"
-              hide-details
-            />
-            <InputDateTimePicker
-              v-model:utc="dateTo"
-              density="compact"
-              hide-details
-            />
-            <v-select
-              v-model="filterTypes"
-              label="Filter by types"
-              item-title="label"
-              item-value="value"
-              :items="visitorSelection"
-              density="compact"
-              clearable
-              multiple
-              max-width="200"
-              hide-details
-            >
+            <InputDateTimePicker v-model:utc="dateFrom" density="compact" hide-details />
+            <InputDateTimePicker v-model:utc="dateTo" density="compact" hide-details />
+            <v-select v-model="filterTypes" label="Filter by types" item-title="label" item-value="value"
+              :items="visitorSelection" density="compact" clearable multiple max-width="200" hide-details>
               <template v-slot:selection="{ item, index }">
                 <div class="d-flex align-center text-caption text-nowrap">
-                  <v-chip
-                    v-if="index === 0"
-                    color="error"
-                    :text="filterTypeSelectionLabel()"
-                    size="x-small"
-                    variant="tonal"
-                    class="ml-2"
-                  />
+                  <v-chip v-if="index === 0" color="error" :text="filterTypeSelectionLabel()" size="x-small"
+                    variant="tonal" class="ml-2" />
                 </div>
               </template>
             </v-select>
@@ -111,7 +49,7 @@
           <v-icon icon="mdi-user" size="15" />
           <span v-if="item.type === 'contractor'" class="text-capitalize">{{
             formatCamelCaseToWords(item.contractorType)
-          }}</span>
+            }}</span>
           <span v-else class="text-capitalize">{{ formatType(item) }}</span>
         </span>
         <span class="d-flex align-center ga-2">
@@ -149,100 +87,57 @@
           <v-icon icon="mdi-clock-time-four-outline" color="green" size="20" />
           <span class="text-capitalize">{{
             UTCToLocalTIme(item.checkIn) || "-"
-          }}</span>
+            }}</span>
         </span>
         <span class="d-flex align-center ga-2">
           <v-icon icon="mdi-clock-time-eight-outline" color="red" size="20" v-if="item.checkOut" />
           <template v-if="item.checkOut">
             <span class="text-capitalize">{{
               UTCToLocalTIme(item.checkOut) || "_"
-            }}</span>
+              }}</span>
             <span v-if="item?.manualCheckout">
-              <TooltipInfo
-                text="Manual Checkout"
-                density="compact"
-                size="x-small"
-              />
+              <TooltipInfo text="Manual Checkout" density="compact" size="x-small" />
             </span>
           </template>
           <span v-else>
-            <v-btn
-              size="x-small"
-              class="text-capitalize"
-              color="red"
-              text="Checkout"
-              :loading="loading.checkingOut && item?._id === selectedVisitorId"
-              @click.stop="handleCheckout(item._id)"
-              v-if="canCheckoutVisitor"
-            />
+            <v-btn size="x-small" class="text-capitalize" color="red" text="Checkout"
+              :loading="loading.checkingOut && item?._id === selectedVisitorId" @click.stop="handleCheckout(item._id)"
+              v-if="canCheckoutVisitor" />
           </span>
         </span>
       </template>
     </TableMain>
 
     <v-dialog v-model="dialog.showSelection" width="450" persistent>
-      <VisitorFormSelection
-        @cancel="dialog.showSelection = false"
-        @select="handleSelectVisitorType"
-      />
+      <VisitorFormSelection @cancel="dialog.showSelection = false" @select="handleSelectVisitorType" />
     </v-dialog>
 
-    <v-dialog
-      v-model="dialog.addVisitor"
-      v-if="activeVisitorFormType"
-      width="450"
-      persistent
-    >
-      <VisitorForm
-        mode="add"
-        :org="orgId"
-        :site="siteId"
-        :type="activeVisitorFormType"
-        @back="handleClickBack"
-        @done="handleVisitorFormDone"
-        @done:more="handleVisitorFormCreateMore"
-      />
+    <v-dialog v-model="dialog.addVisitor" v-if="activeVisitorFormType" width="450" persistent>
+      <VisitorForm mode="add" :org="orgId" :site="siteId" :type="activeVisitorFormType" @back="handleClickBack"
+        @done="handleVisitorFormDone" @done:more="handleVisitorFormCreateMore" />
     </v-dialog>
 
     <v-dialog v-model="dialog.viewVisitor" width="450" persistent>
-      <VehicleUpdateMoreAction
-        title="Preview"
-        :can-update="canUpdateVisitor"
-        :can-delete="canDeleteVisitor"
-        @close="dialog.viewVisitor = false"
-        edit-button-label="Edit Visitor"
-        delete-button-label="Delete Visitor"
-        @delete="handleDeleteVisitor"
-      >
+      <VehicleUpdateMoreAction title="Preview" :can-update="canUpdateVisitor" :can-delete="canDeleteVisitor"
+        @close="dialog.viewVisitor = false" edit-button-label="Edit Visitor" delete-button-label="Delete Visitor"
+        @delete="handleDeleteVisitor">
         <template v-slot:content>
           <v-row no-gutters class="mb-4">
             <v-col v-for="(label, key) in formattedFields" :key="key" cols="12">
-              <span
-                v-if="key === 'checkOut' && !selectedVisitorObject[key] && canCheckoutVisitor"
-                class="d-flex align-center"
-              >
+              <span v-if="
+                key === 'checkOut' &&
+                !selectedVisitorObject[key] &&
+                canCheckoutVisitor
+              " class="d-flex align-center">
                 <strong>{{ label }}:</strong>
-                <v-btn
-                  size="x-small"
-                  class="ml-3 text-capitalize"
-                  color="red"
-                  text="Checkout"
-                  :disabled="loading.checkingOut"
-                  @click="handleCheckout(selectedVisitorId as string)"
-                />
+                <v-btn size="x-small" class="ml-3 text-capitalize" color="red" text="Checkout"
+                  :disabled="loading.checkingOut" @click="handleCheckout(selectedVisitorId as string)" />
               </span>
 
-              <span
-                v-else-if="selectedVisitorObject[key]"
-                class="d-flex ga-3 align-center"
-                ><strong>{{ label }}:</strong>
+              <span v-else-if="selectedVisitorObject[key]" class="d-flex ga-3 align-center"><strong>{{ label
+                  }}:</strong>
                 {{ formatValues(key, selectedVisitorObject[key]) }}
-                <TooltipInfo
-                  v-if="key === 'checkOut'"
-                  text="Manual Checkout"
-                  density="compact"
-                  size="x-small"
-                />
+                <TooltipInfo v-if="key === 'checkOut'" text="Manual Checkout" density="compact" size="x-small" />
               </span>
             </v-col>
           </v-row>
@@ -251,12 +146,9 @@
     </v-dialog>
 
     <v-dialog v-model="dialog.deleteConfirmation" width="450" persistent>
-      <CardDeleteConfirmation
-        prompt-title="Are you sure want to delete this visitor?"
-        :loading="loading.deletingVisitor"
-        @close="dialog.deleteConfirmation = false"
-        @delete="handleProceedDeleteVisitor"
-      />
+      <CardDeleteConfirmation prompt-title="Are you sure want to delete this visitor?"
+        :loading="loading.deletingVisitor" @close="dialog.deleteConfirmation = false"
+        @delete="handleProceedDeleteVisitor" />
     </v-dialog>
 
     <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
@@ -309,18 +201,21 @@ const {
 const { debounce, formatCamelCaseToWords, formatDate, UTCToLocalTIme } =
   useUtils();
 const { formatLocation } = useSecurityUtils();
-const { status: visitorStatus } = useRoute().query;
-const { org: orgId, site: siteId } = useRoute().params as {
+// const { status: visitorStatus, search } = useRoute().query as { status: string, search: string};
+
+const route = useRoute()
+const router = useRouter()
+const { org: orgId, site: siteId } = route.params as {
   org: string;
   site: string;
 };
-const routeName = useRoute().name;
+const routeName = route.name;
 
 const items = ref<Array<Record<string, any>>>([]);
 const page = ref(1);
 const pages = ref(0);
 const pageRange = ref("-- - -- of --");
-const activeTab = ref(visitorStatus ?? "registered");
+const activeTab = ref("registered");
 const activeVisitorFormType = ref<TVisitorType | null>(null);
 const selectedVisitorId = ref<string | null>(""); // selected visitor for viewing/actions
 
@@ -328,7 +223,7 @@ const selectedVisitorId = ref<string | null>(""); // selected visitor for viewin
 const searchInput = ref("");
 const dateFrom = ref("");
 const dateTo = ref("");
-const filterTypes = ref([]);
+const filterTypes = ref<TVisitorType[]>([]);
 const displayCheckedOutOnly = ref<boolean>(false);
 
 const message = ref("");
@@ -393,21 +288,20 @@ const {
   refresh: getVisitorRefresh,
   pending: getVisitorPending,
 } = await useLazyAsyncData(
-  `get-all-visitors-${visitorStatus}`,
+  `get-all-visitors-${activeTab.value}-${page.value}`
+,
   () =>
     getVisitors({
       page: page.value,
-      org: orgId,
       site: siteId,
       search: searchInput.value,
       dateTo: dateTo.value,
       dateFrom: dateFrom.value,
       type: filterTypes.value.filter(Boolean).join(","),
-      displayNoCheckOut: displayCheckedOutOnly.value,
-      status: activeTab.value as string
+      status: activeTab.value as string,
     }),
   {
-    watch: [page, activeTab],
+    watch: [page, () => route.query],
   }
 );
 
@@ -420,9 +314,9 @@ watch(getVisitorReq, (newData: any) => {
 });
 
 const selectedVisitorObject = computed(() => {
-  const obj = items.value.find((x) => x?._id === selectedVisitorId.value);
+  const obj = items.value.find((x: any) => x?._id === selectedVisitorId.value);
   if (!obj) return {};
-  const type = obj?.type;
+  const type = obj?.type as TVisitorType | undefined;
   if (!type) return {};
   let includedKeys: string[] = ["checkIn", "checkOut"];
   includedKeys.unshift(...(typeFieldMap[type] ?? []));
@@ -554,16 +448,42 @@ function getUTCDates() {
   return { dateYesterday, dateToday };
 }
 
-// filter debounce search
-const debounceSearch = debounce(getVisitorRefresh, 500);
+
+const updateRouteQuery = debounce(
+  (search: string, from: string, to: string, types: string[], status) => {
+    router.replace({
+      query: {
+        ...route.query,
+        search: search || undefined,
+        dateFrom: from || undefined,
+        dateTo: to || undefined,
+        type: types.filter(Boolean).join(",") || undefined,
+        status: status || undefined,
+      },
+    });
+  },
+  500 // wait 500ms after last input
+);
 
 watch(
-  [searchInput, dateTo, dateFrom, displayCheckedOutOnly, filterTypes],
-  ([]) => {
-    debounceSearch();
+  [searchInput, dateFrom, dateTo, filterTypes, activeTab],
+  ([search, from, to, types, status]) => {
+    updateRouteQuery(search, from, to, types, status)
+
   },
-  { immediate: false, deep: true }
+  { deep: true }
 );
+
+
+
+onMounted(() => {
+  activeTab.value = (route.query.status as string) || "unregistered"
+  searchInput.value = (route.query.search as string) || "";
+  dateFrom.value = (route.query.dateFrom as string) || "";
+  dateTo.value = (route.query.dateTo as string) || "";
+  filterTypes.value = ((route.query.type as string)?.split(",") || []).filter(Boolean) as TVisitorType[];
+
+})
 </script>
 
 <style scoped></style>

package/components/WorkOrder/Create.vue

@@ -26,7 +26,11 @@
       variant="outlined"
       density="compact"
       class="mb-2"
-      clearable
+      :clearable="
+        props.createdFrom === 'feedback' && workOrder.subject !== ''
+          ? false
+          : true
+      "
       :readonly="
         props.createdFrom === 'feedback' && workOrder.subject !== ''
           ? true

package/composables/useBuilding.ts

@@ -222,7 +222,7 @@ export default function useBuilding() {
 
   function updateById(
     id: string,
-    data: Pick<TBuilding, "name" | "block" | "levels">
+    data: Pick<TBuilding, "name" | "block" | "levels" | "buildingFloorPlan">
   ) {
     return useNuxtApp().$api(`/api/buildings/id/${id}`, {
       method: "PATCH",

package/composables/usePeople.ts

@@ -13,36 +13,44 @@ export default function(){
       type="",
       displayNoCheckOut=false
       } = {}) {
-      return await $fetch<Record<string, any>>("/api/people", {
+      return await useNuxtApp().$api<Record<string, any>>("/api/people", {
         method: "GET",
         query: { page, limit, sort, search, org, site, dateTo, dateFrom, type }
       });
   }
 
+  async function findPersonByNRIC(nric: string): Promise<null | Partial<TPeople>> {
+      return await $fetch<Record<string, any>>(`/api/people/nric/${nric}`, {
+        method: "GET",
+      });
+  }
+
     async function create(payload: Partial<TPeoplePayload>){
-      return await $fetch<Record<string, any>>("/api/people", {
+      return await useNuxtApp().$api<Record<string, any>>("/api/people", {
         method: "POST",
         body: payload,
       });
     }
 
     async function updateById(_id: string, payload: Partial<TPeoplePayload>){
-      return await $fetch<Record<string, any>>(`/api/people/id/${_id}`, {
+      return await useNuxtApp().$api<Record<string, any>>(`/api/people/id/${_id}`, {
         method: "PUT",
         body: payload,
       }); 
     }
 
     async function deleteById(_id: string){
-      return await $fetch<Record<string, any>>(`/api/people/id/${_id}`, {
+      return await useNuxtApp().$api<Record<string, any>>(`/api/people/id/${_id}`, {
         method: "DELETE",
       }); 
     }
 
+
     return {
         create,
         getAll,
         updateById,
-        deleteById
+        deleteById,
+        findPersonByNRIC
     }
 }

package/composables/useVisitor.ts

@@ -1,19 +1,20 @@
-export default function(){
-
+export default function () {
   type TVisitorSelection = {
     label: string;
-    value: TVisitorType
-  }
+    value: TVisitorType;
+  };
 
   const visitorSelection: TVisitorSelection[] =[
+    { label: "Guest", value: "guest" },
     { label: "Contractor", value: "contractor" },
     { label: "Delivery", value: "delivery" },
-    { label: "Walk-In", value: "walk-in"},
-    { label: "Pick-Up", value: "pick-up"},
-    { label: "Drop-Off", value: "drop-off"}
+    { label: "Walk-In", value: "walk-in" },
+    { label: "Pick-Up", value: "pick-up" },
+    { label: "Drop-Off", value: "drop-off" },
   ];
 
     const typeFieldMap: Record<TVisitorType, (keyof TVisitorPayload)[]> = {
+      guest: ['name', 'nric', 'contact', 'block', 'level', 'unit' , 'unitName', 'remarks'],
       contractor: ['contractorType', 'name', 'nric', 'company', 'contact', 'plateNumber', 'block', 'level', 'unit', 'unitName', 'remarks'],
       delivery: ['attachments', 'name', 'deliveryType', 'company', 'nric', 'contact', 'plateNumber', 'block', 'level', 'unit' , 'unitName',  'remarks'],
       'walk-in': ['name', 'company', 'nric', 'contact', 'block', 'level', 'unit' , 'unitName', 'remarks'],
@@ -22,59 +23,81 @@ export default function(){
   }
 
   const contractorTypes = [
-  { title: "Estate Contractor", value: "estate-contractor" },
-  { title: "Home Contractor", value: "home-contractor" },
-  { title: "Property Agent", value: "property-agent" },
-  { title: "House Mover", value: "house-mover" },
-]
-
+    { title: "Estate Contractor", value: "estate-contractor" },
+    { title: "Home Contractor", value: "home-contractor" },
+    { title: "Property Agent", value: "property-agent" },
+    { title: "House Mover", value: "house-mover" },
+  ];
 
-    async function getVisitors({
-      page = 1,
-      limit = 10,
-      sort = "asc",
-      search = "",
-      org = "",
-      site = "",
-      dateTo = "",
-      dateFrom = "",
-      type="",
-      displayNoCheckOut=false,
-      // status = "registered"
-      } = {}) {
-      return await useNuxtApp().$api<Record<string, any>>("/api/visitor-transactions", {
+  async function getVisitors({
+    page = 1,
+    limit = 10,
+    sort = "asc",
+    search = "",
+    org = "",
+    site = "",
+    dateTo = "",
+    dateFrom = "",
+    type = "",
+    status = "registered",
+    // status = "registered"
+  } = {}) {
+    return await useNuxtApp().$api<Record<string, any>>(
+      "/api/visitor-transactions",
+      {
         method: "GET",
-        query: { page, limit, sort, search, org, site, dateTo, dateFrom, ...(type.length > 0 && {type}), ...(displayNoCheckOut === true && {checkedOut: false}) },
-      });
+        query: {
+          page,
+          limit,
+          sort,
+          search,
+          org,
+          site,
+          dateTo,
+          dateFrom,
+          type,
+          status,
+        },
+      }
+    );
   }
 
-    async function createVisitor(payload: Partial<TVisitorPayload>){
-      return await useNuxtApp().$api<Record<string, any>>("/api/visitor-transactions", {
+  async function createVisitor(payload: Partial<TVisitorPayload>) {
+    return await useNuxtApp().$api<Record<string, any>>(
+      "/api/visitor-transactions",
+      {
         method: "POST",
         body: payload,
-      });
-    }
+      }
+    );
+  }
 
-    async function updateVisitor(_id: string, payload: Partial<TVisitorPayload>){
-      return await useNuxtApp().$api<Record<string, any>>(`/api/visitor-transactions/id/${_id}`, {
+  async function updateVisitor(_id: string, payload: Partial<TVisitorPayload>) {
+    return await useNuxtApp().$api<Record<string, any>>(
+      `/api/visitor-transactions/id/${_id}`,
+      {
         method: "PUT",
         body: payload,
-      }); 
-    }
+      }
+    );
+  }
 
-    async function deleteVisitor(_id: string){
-      return await useNuxtApp().$api<Record<string, any>>(`/api/visitor-transactions/id/${_id}`, {
+  async function deleteVisitor(_id: string) {
+    return await useNuxtApp().$api<Record<string, any>>(
+      `/api/visitor-transactions/id/${_id}`,
+      {
         method: "DELETE",
-      }); 
-    }
+      }
+    );
+  }
 
-    return {
-        typeFieldMap,
-        visitorSelection,
-        contractorTypes,
-        createVisitor,
-        getVisitors,
-        updateVisitor,
-        deleteVisitor
-    }
-}
+  return {
+    typeFieldMap,
+    visitorSelection,
+    contractorTypes,
+    createVisitor,
+    getVisitors,
+    updateVisitor,
+    deleteVisitor,
+  };
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@iservice365/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",

package/types/building.d.ts

@@ -4,6 +4,7 @@ declare type TBuilding = {
   name: string;
   block: number | null;
   levels: string[];
+  buildingFloorPlan: string[]
 };
 
 declare type TBuildingUnit = {
@@ -16,4 +17,5 @@ declare type TBuildingUnit = {
   level: string | null;
   category: string;
   status: string;
+  buildingUnitFiles: string[]
 };

package/types/people.d.ts

@@ -2,7 +2,8 @@ declare type TPeople = {
   name?: string;
   block?: number | string;
   level?: string;
-  unit?: string | Partial<TBuildingUnit>;
+  unit?: string
+  companyName?: sring[];
   unitName?: string;
   contact?: string;
   plateNumber?: string;

package/types/visitor.d.ts

@@ -21,7 +21,7 @@ declare type TVisitor = {
   manualCheckout?: boolean;
 };
 
-declare type TVisitorType = "contractor" | "delivery" | "walk-in" | "pick-up" | "drop-off";
+declare type TVisitorType = "contractor" | "delivery" | "walk-in" | "pick-up" | "drop-off" | "guest";
 
 declare type TVisitorPayload = Pick<TVisitor, "name" | "type" | "company" | "block" | "level" | "unit" | "unitName" | "contact" | "plateNumber" | "checkOut" | "contractorType" | "deliveryType" | "nric" | "contact" | "remarks" | "attachments" | "org" | "site"> & {
   members?: TMemberInfo[]