@7365admin1/layer-common 1.10.3 → 1.10.4

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/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

@@ -112,7 +112,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;
@@ -141,7 +141,7 @@ const getStatusColor = (status: unknown): string => {
   const normalized = String(status).toLowerCase();
 
   switch (normalized) {
-    case "ready":
+    case "open":
       return "grey";
     case "ongoing":
       return "primary";

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/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/ScheduleAreaMain.vue

@@ -181,7 +181,7 @@ const items = ref<Array<Record<string, any>>>([]);
 const statusFilter = 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" },
 ];
@@ -236,7 +236,7 @@ const getStatusColor = (status: unknown): string => {
   const normalized = String(status).toLowerCase();
 
   switch (normalized) {
-    case "ready":
+    case "open":
       return "grey";
     case "ongoing":
       return "primary";