@7365admin1/layer-common 1.10.3 → 1.10.5

package/components/BuildingUnitFormEdit.vue

@@ -12,10 +12,7 @@
             <v-row>
               <v-col cols="12" class="mt-2">
                 <v-row no-gutters>
-                  <InputLabel
-                    class="text-capitalize font-weight-bold"
-                    title="Building"
-                  />
+                  <InputLabel class="text-capitalize font-weight-bold" title="Building" />
                   <v-col cols="12">
                     {{ buildingUnit.buildingName }}
                   </v-col>
@@ -28,10 +25,7 @@
             <v-row>
               <v-col cols="12" class="mt-2">
                 <v-row no-gutters>
-                  <InputLabel
-                    class="text-capitalize font-weight-bold"
-                    title="Block"
-                  />
+                  <InputLabel class="text-capitalize font-weight-bold" title="Block" />
                   <v-col cols="12">
                     {{ buildingUnit.block }}
                   </v-col>
@@ -42,162 +36,96 @@
 
           <v-col cols="12">
             <v-row>
-              <v-col cols="12" class="mt-2">
+              <v-col cols="12" md="6" class="mt-2">
                 <v-row no-gutters>
-                  <InputLabel
-                    class="text-capitalize font-weight-bold"
-                    title="Unit Name"
-                  />
+                  <InputLabel class="text-capitalize font-weight-bold" title="Unit Name" />
                   <v-col cols="12">
-                    <v-text-field
-                      v-model="buildingUnit.name"
-                      density="comfortable"
-                      :rules="[requiredRule]"
-                    ></v-text-field>
+                    <v-text-field v-model="buildingUnit.name" density="comfortable"
+                      :rules="[requiredRule]"></v-text-field>
                   </v-col>
                 </v-row>
               </v-col>
-            </v-row>
-          </v-col>
 
-          <v-col cols="12">
-            <v-row>
-              <v-col cols="12" class="mt-2">
+              <v-col cols="12" md="6" class="mt-2">
                 <v-row no-gutters>
-                  <InputLabel
-                    class="text-capitalize font-weight-bold"
-                    title="Owner"
-                  />
+                  <InputLabel class="text-capitalize font-weight-bold" title="Owner" />
                   <v-col cols="12">
-                  <v-autocomplete
-                    v-model="buildingUnit.ownerName"
-                    :items="peopleItems"
-                    item-title="name"
-                    return-object
-                    density="comfortable">
-                  </v-autocomplete>
+                    <v-autocomplete v-model="buildingUnit.ownerName" v-model:search="ownerNameInput"
+                      :items="peopleItems" item-title="name" return-object density="comfortable">
+                    </v-autocomplete>
                   </v-col>
                 </v-row>
               </v-col>
             </v-row>
           </v-col>
 
+
           <v-col cols="12">
             <v-row>
-              <v-col cols="12" class="mt-2">
+              <v-col cols="12" md="6" class="mt-2">
                 <v-row no-gutters>
-                  <InputLabel
-                    class="text-capitalize"
-                    title="Company Name"
-                    required
-                  />
+                  <InputLabel class="text-capitalize" title="Company Name" required />
                   <v-col cols="12">
-                    <v-text-field
-                      v-model="buildingUnit.companyName"
-                      density="comfortable"
-                      :rules="[requiredRule]"
-                    ></v-text-field>
+                    <v-text-field v-model="buildingUnit.companyName" density="comfortable"
+                      :rules="[requiredRule]"></v-text-field>
                   </v-col>
                 </v-row>
               </v-col>
-            </v-row>
-          </v-col>
 
-          <v-col cols="12">
-            <v-row>
-              <v-col cols="12" class="mt-2">
+              <v-col cols="12" md="6" class="mt-2">
                 <v-row no-gutters>
-                  <InputLabel
-                    class="text-capitalize"
-                    title="Company Registration Number"
-                  />
+                  <InputLabel class="text-capitalize" title="Company Registration Number" />
                   <v-col cols="12">
-                    <v-text-field
-                      v-model="buildingUnit.companyRegistrationNumber"
-                      density="comfortable"
-                    ></v-text-field>
+                    <v-text-field v-model="buildingUnit.companyRegistrationNumber" density="comfortable"></v-text-field>
                   </v-col>
                 </v-row>
               </v-col>
             </v-row>
           </v-col>
 
+
           <v-col cols="12">
             <v-row>
-              <v-col cols="12" class="mt-2">
+              <v-col cols="12" md="6" class="mt-2">
                 <v-row no-gutters>
-                  <InputLabel
-                    class="text-capitalize"
-                    title="Lease Start"
-                    required
-                  />
+                  <InputLabel class="text-capitalize" title="Lease Start" required />
                   <v-col cols="12">
-                    <InputDateTimePicker
-                      ref="startDateRef"
-                      v-model="buildingUnit.leaseStart"
-                      :rules="[requiredRule]"
-                    />
+                    <InputDateTimePicker ref="startDateRef" v-model="buildingUnit.leaseStart" :rules="[requiredRule]" />
                   </v-col>
                 </v-row>
               </v-col>
-            </v-row>
-          </v-col>
 
-          <v-col cols="12">
-            <v-row>
-              <v-col cols="12" class="mt-2">
+              <v-col cols="12" md="6" class="mt-2">
                 <v-row no-gutters>
-                  <InputLabel
-                    class="text-capitalize"
-                    title="Lease End"
-                    required
-                  />
+                  <InputLabel class="text-capitalize" title="Lease End" required />
                   <v-col cols="12">
-                    <InputDateTimePicker
-                      ref="endDateRef"
-                      v-model="buildingUnit.leaseEnd"
-                      :rules="[requiredRule]"
-                    />
+                    <InputDateTimePicker ref="endDateRef" v-model="buildingUnit.leaseEnd" :rules="[requiredRule]" />
                   </v-col>
                 </v-row>
               </v-col>
+
             </v-row>
           </v-col>
 
-          <v-col cols="12" class="mt-2">
+
+          <v-col cols="12" md="6" class="mt-2">
             <v-row no-gutters>
-              <InputLabel
-                class="text-capitalize font-weight-bold"
-                title="Category"
-                required
-              />
+              <InputLabel class="text-capitalize font-weight-bold" title="Category" required />
               <v-col cols="12">
-                <v-autocomplete
-                  v-model="buildingUnit.category"
-                  :items="unitCategories"
-                  density="comfortable"
-                  :rules="[requiredRule]"
-                ></v-autocomplete>
+                <v-autocomplete v-model="buildingUnit.category" :items="unitCategories" density="comfortable"
+                  :rules="[requiredRule]"></v-autocomplete>
               </v-col>
             </v-row>
           </v-col>
 
           <v-col cols="12">
             <v-row>
-              <v-col cols="6" class="mt-2">
+              <v-col cols="6" md="6" class="mt-2">
                 <v-row no-gutters>
-                  <InputLabel
-                    class="text-capitalize font-weight-bold"
-                    title="Level"
-                    required
-                  />
+                  <InputLabel class="text-capitalize font-weight-bold" title="Level" required />
                   <v-col cols="12">
-                    <v-select
-                      v-model="buildingUnit.level"
-                      :items="buildingLevels"
-                      density="comfortable"
-                      :rules="[requiredRule]"
-                    ></v-select>
+                    <v-select v-model="buildingUnit.level" :items="buildingLevels" density="comfortable"
+                      :rules="[requiredRule]"></v-select>
                   </v-col>
                 </v-row>
               </v-col>
@@ -205,25 +133,15 @@
           </v-col>
 
           <v-col cols="12" class="mt-5">
-            <InputLabel
-              class="text-capitalize"
-              title="Upload Files (Lease of Contract, Cert. of Occupancy)"
-            />
-            <InputFileV2
-              v-model="buildingUnit.buildingUnitFiles"
-              :multiple="false"
-              :max-length="10"
-              title="Upload PDF Files"
-              accept="application/pdf"
-            />
+            <InputLabel class="text-capitalize" title="Upload Files (Lease of Contract, Cert. of Occupancy)" />
+            <InputFileV2 v-model="buildingUnit.buildingUnitFiles" :multiple="false" :max-length="10"
+              title="Upload PDF Files" accept="application/pdf" />
           </v-col>
 
           <v-col cols="12" class="my-2">
             <v-row no-gutters>
               <v-col cols="12" class="text-center">
-                <span
-                  class="text-none text-subtitle-2 font-weight-medium text-error"
-                >
+                <span class="text-none text-subtitle-2 font-weight-medium text-error">
                   {{ message }}
                 </span>
               </v-col>
@@ -236,30 +154,14 @@
     <v-toolbar density="compact">
       <v-row no-gutters>
         <v-col cols="6">
-          <v-btn
-            tile
-            block
-            variant="text"
-            class="text-none"
-            size="48"
-            @click="cancel"
-          >
+          <v-btn tile block variant="text" class="text-none" size="48" @click="cancel">
             Cancel
           </v-btn>
         </v-col>
 
         <v-col cols="6">
-          <v-btn
-            tile
-            block
-            variant="flat"
-            color="black"
-            class="text-none"
-            size="48"
-            :disabled="!validForm || disable"
-            @click="submit"
-            :loading="disable"
-          >
+          <v-btn tile block variant="flat" color="black" class="text-none" size="48" :disabled="!validForm || disable"
+            @click="submit" :loading="disable">
             Submit
           </v-btn>
         </v-col>
@@ -320,10 +222,13 @@ buildingUnit.value = JSON.parse(JSON.stringify(prop.roomFacility));
 
 const emit = defineEmits(["cancel", "success", "success:create-more"]);
 
+const ownerNameInput = ref("");
+
 const validForm = ref(false);
 
 const { getAll } = useBuilding();
-const { getPeopleByUnit } = usePeople();
+const { getAll: getAllPeople } = usePeople();
+const { debounce } = useUtils();
 
 const buildings = ref<Record<string, any>[]>([]);
 const peopleItems = ref<Array<Record<string, any>>>([]);
@@ -343,15 +248,13 @@ watchEffect(() => {
   }
 });
 
-const { data: getUnitPeople } = useLazyAsyncData(
+const { data: getUnitPeople, refresh: getUnitPeopleRefresh } = useLazyAsyncData(
   "get-unit-people",
-  async () => getPeopleByUnit(prop.roomFacility._id as string)
+  async () => getAllPeople({ limit: 10, site: prop.site, type: "tenant", search: ownerNameInput.value })
 );
 
 watch(getUnitPeople, (newData: any) => {
-  if (newData) {
-      peopleItems.value = newData ?? [];
-  }
+  peopleItems.value = newData ?? [];
 });
 
 buildingUnit.value.site = prop.site;
@@ -394,7 +297,7 @@ const hasChanges = computed(() => {
 async function submit() {
   disable.value = true;
   try {
-    
+
     if (buildingUnit.value.ownerName) {
       buildingUnit.value.owner = (buildingUnit.value.ownerName as any)._id
       buildingUnit.value.ownerName = (buildingUnit.value.ownerName as any).name
@@ -426,4 +329,12 @@ function cancel() {
   message.value = "";
   emit("cancel");
 }
+
+const debounceSearchOwner = debounce(() => {
+  getUnitPeopleRefresh();
+}, 500);
+
+watch(ownerNameInput, (newVal) => {
+  debounceSearchOwner();
+}, { immediate: false });
 </script>

package/components/BulletinBoardManagement.vue

@@ -83,6 +83,11 @@ const props = defineProps({
     }, canDeleteBulletinBoard: {
         type: Boolean,
         default: true
+    },
+    recipients: {
+        type: String,
+        default: "",
+        required: false
     }
 })
 
@@ -158,7 +163,7 @@ const {
     pending: getAnnouncementPending,
 } = await useLazyAsyncData(
     `get-all-announcements-${page.value}`,
-    () => getAll({ page: page.value, site: siteId, status: status.value }),
+    () => getAll({ page: page.value, site: siteId, status: status.value, recipients: props.recipients }),
     {
         watch: [page, () => route.query],
     }

package/components/BulletinBoardView.vue

@@ -54,13 +54,13 @@
 
         <v-toolbar class="pa-0" density="compact">
             <v-row no-gutters>
-                <v-col cols="6" class="pa-0">
+                <v-col :col="(!canUpdate && !canDelete) ? 12 : 6" class="pa-0">
                     <v-btn block variant="text" height="48" class="text-none" @click="emit('close')">
                         Close
                     </v-btn>
                 </v-col>
 
-                <v-col cols="6" class="pa-0">
+                <v-col v-if="canUpdate || canDelete" cols="6" class="pa-0">
                     <v-menu contained>
                         <template #activator="{ props }">
                             <v-btn block variant="flat" color="black" height="48" class="text-none" tile v-bind="props">

package/components/Button/Close.vue

@@ -1,10 +1,12 @@
 <template>
-    <v-btn text="Close" class="bg-grey-lighten-2 text-capitalize" :height="prop.height" @click="emit('click')" />
+    <v-btn v-if="!prop.iconOnly" text="Close" class="bg-grey-lighten-2 text-capitalize" :height="prop.height" @click="emit('click')" />
+    <v-btn v-else icon="mdi-close" size="small" class="bg-grey-lighten-2 text-capitalize" :height="prop.height" @click="emit('click')" />
 </template>
 
 <script setup lang="ts">
     const prop = defineProps<{ 
         height?: string | number;
+        iconOnly?: boolean;
     }>();
 
     const emit = defineEmits<{

package/components/CleaningScheduleMain.vue

@@ -57,10 +57,9 @@
           }}
         </template>
         <template #item.closeIn="{ item }">
-          <!-- <v-chip class="text-capitalize">{{ value || "No Status" }}</v-chip> -->
-          <v-chip class="text-capitalize" variant="flat" color="primary">{{
-            remainingTime[item._id] || "No Status"
-          }}</v-chip>
+          <v-chip class="text-capitalize" variant="flat" color="primary" pill>
+            {{ remainingTime[item._id] || "No Status" }}
+          </v-chip>
         </template>
         <template #item.status="{ value }">
           <v-chip
@@ -112,7 +111,7 @@ const endDate = ref("");
 const status = ref<TScheduleAreaStatus>("All");
 const statusOptions = [
   { title: "All", value: "all" },
-  { title: "Ready", value: "ready" },
+  { title: "Open", value: "open" },
   { title: "Ongoing", value: "ongoing" },
   { title: "Completed", value: "completed" },
 ] as const;
@@ -129,7 +128,8 @@ const headers = [
   { title: "Completion Date", value: "completionDate" },
   { title: "", value: "download" },
 ];
-const remainingTime = ref({} as any);
+const remainingTime = ref({} as Record<string, string>);
+const remainingSeconds = ref({} as Record<string, number>);
 const downloadingId = ref<string | null>(null);
 
 const { getCleaningSchedules, downloadChecklistPdf } = useCleaningSchedules();
@@ -141,18 +141,29 @@ const getStatusColor = (status: unknown): string => {
   const normalized = String(status).toLowerCase();
 
   switch (normalized) {
-    case "ready":
+    case "open":
       return "grey";
     case "ongoing":
       return "primary";
     case "completed":
     case "accepted":
       return "success";
+    case "closed":
+    case "rejected":
+      return "error";
     default:
       return "secondary";
   }
 };
 
+const getCloseInColor = (id: string): string => {
+  const secs = remainingSeconds.value[id];
+  if (secs === undefined) return "primary";
+  if (secs <= 0) return "error";
+  if (secs < 3 * 3600) return "warning";
+  return "primary";
+};
+
 const {
   canDownloadSchedule,
   canViewSchedules,
@@ -205,11 +216,11 @@ const formatTime = (seconds: number) => {
 };
 
 const updateRemainingTime = () => {
-  console.log(items.value);
   items.value.forEach((item) => {
     const itemId = item._id as string;
     const _time = calculateRemainingTime(item.date as string);
-    remainingTime.value[itemId] = _time < 0 ? "00h 00m" : formatTime(_time);
+    remainingSeconds.value[itemId] = _time;
+    remainingTime.value[itemId] = _time <= 0 ? "00h 00m" : formatTime(_time);
   });
 };
 

package/components/IncidentReport/IncidentInformation.vue

@@ -63,7 +63,7 @@
           <p class="my-1 text-h6">
             {{
               toLocalDate(
-                incidentInformation?.incidentTypeAndTime?.dateOfIncident,
+                incidentInformation?.incidentTypeAndTime?.dateOfIncident
               ) || "NA"
             }}
           </p>
@@ -137,9 +137,24 @@
           </p>
         </v-col>
         <v-col cols="12" sm="4" md="3">
-          <InputLabel class="text-capitalize" title="NRIC/WP Number" />
+          <div>
+            <InputLabel class="text-capitalize mr-1" title="NRIC/WP Number" />
+            <v-icon
+            v-if="incidentInformation?.complaintInfo?.nric"
+              size="small"
+              color="blue"
+              class="cursor-pointer"
+              @click="showNRICComplainant = !showNRICComplainant"
+            >
+              {{ showNRICComplainant ? "mdi-eye-off" : "mdi-eye" }}
+            </v-icon>
+          </div>
           <p class="my-1 text-h6 text-capitalize">
-            {{ incidentInformation?.complaintInfo?.nric || "NA" }}
+            {{
+              showNRICComplainant
+                ? incidentInformation?.complaintInfo?.nric || "NA"
+                : maskNRIC(incidentInformation?.complaintInfo?.nric)
+            }}
           </p>
         </v-col>
         <v-col cols="12" sm="4" md="3">
@@ -164,9 +179,24 @@
           </p>
         </v-col>
         <v-col cols="12" sm="4" md="3">
-          <InputLabel class="text-capitalize" title="NRIC/WP Number" />
+          <div>
+            <InputLabel class="text-capitalize" title="NRIC/WP Number" />
+            <v-icon
+              v-if="incidentInformation?.recipientOfComplaint?.nric"
+              size="small"
+              color="blue"
+              class="cursor-pointer"
+              @click="showNRICRecipient = !showNRICRecipient"
+            >
+              {{ showNRICRecipient ? "mdi-eye-off" : "mdi-eye" }}
+            </v-icon>
+          </div>
           <p class="my-1 text-h6 text-capitalize">
-            {{ incidentInformation?.recipientOfComplaint?.nric || "NA" }}
+            {{
+              showNRICRecipient
+                ? incidentInformation?.recipientOfComplaint?.nric || "NA"
+                : maskNRIC(incidentInformation?.recipientOfComplaint?.nric)
+            }}
           </p>
         </v-col>
         <v-col cols="12" sm="4" md="3">
@@ -234,7 +264,10 @@ const { getSiteById } = useSiteSettings();
 // state
 const siteName = ref("");
 
-const siteId = computed(() => props.incidentInformation?.siteInfo?.site );
+const siteId = computed(() => props.incidentInformation?.siteInfo?.site);
+
+const showNRICComplainant = ref(false);
+const showNRICRecipient = ref(false);
 
 watch(
   siteId,
@@ -255,4 +288,10 @@ function toLocalDate(utcString: string) {
     day: "2-digit",
   });
 }
+
+const maskNRIC = (value: any) => {
+  if (!value) return "NA";
+
+  return value.replace(/.(?=.{3})/g, "*");
+};
 </script>

package/components/IncidentReport/affectedEntities.vue

@@ -76,6 +76,26 @@
         style="max-height: calc(100vh - (200px))"
         class="border mt-5"
       >
+        <template #header.nric>
+          <div class="d-flex align-center">
+            NRIC
+            <v-icon
+              class="cursor-pointer ml-1"
+              size="18"
+              color="blue"
+              @click="isShowNRIC = !isShowNRIC"
+            >
+              {{ isShowNRIC ? "mdi-eye-off-outline" : "mdi-eye-outline" }}
+            </v-icon>
+          </div>
+        </template>
+        <template #item.nric="{ value }">
+          <tr>
+            {{
+              maskedNric(value)
+            }}
+          </tr>
+        </template>
       </v-data-table>
     </v-col>
 
@@ -142,6 +162,7 @@ const injuredTableHeader = [
     value: "contact",
   },
 ];
+
 const damagePropertyTableHeader = [
   {
     title: "Description",
@@ -164,4 +185,12 @@ const damagePropertyTableHeader = [
     value: "action",
   },
 ];
+
+const isShowNRIC = ref(false);
+
+const maskedNric = (nric: string) => {
+  if (!nric) return "";
+  if (isShowNRIC.value) return nric;
+  return nric[0] + "*".repeat(nric.length - 5) + nric.slice(-4);
+};
 </script>

package/components/PeopleForm.vue

@@ -33,7 +33,7 @@
             <v-col cols="12">
               <v-row>
                 <v-col cols="12">
-                  <InputLabel class="text-capitalize" title="NRIC/Passport/ID No." />
+                  <InputLabel class="text-capitalize" title="NRIC" />
                   <InputNRICNumber v-model.trim="form.nric"  density="comfortable" />
                 </v-col>
               </v-row>

package/components/PlateNumberDisplay.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="d-flex align-center ga-2 flex-wrap">
+    <span v-if="formatted">
+      {{ formatted }}
+    </span>
+
+    <v-chip
+      v-if="extraCount > 0"
+      density="comfortable"
+      size="small"
+    >
+      + {{ extraCount }}
+    </v-chip>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  plateNumbers: {
+    type: Array as PropType<string[]>,
+    default: () => []
+  },
+  defaultValue: {
+    type: String,
+    default: ""
+  }
+})
+
+const formatted = computed(() => {
+  if (!props.plateNumbers?.length) return props.defaultValue || ""
+
+  const firstTwo = props.plateNumbers
+    .slice(0, 2)
+    .map((v: any) => v?.plateNumber || "")
+
+  return firstTwo.join(", ")
+})
+
+const extraCount = computed(() => {
+  if (!props.plateNumbers) return 0
+  return props.plateNumbers.length > 2
+    ? props.plateNumbers.length - 2
+    : 0
+})
+</script>