@7365admin1/layer-common 1.10.5 → 1.10.7

package/components/BuildingUnitFormEdit.vue

@@ -1,64 +1,194 @@
 <template>
-  <v-card width="100%">
+  <v-card width="100%" :loading="getUnitPeoplePending">
     <v-toolbar>
       <v-row no-gutters class="fill-height px-6" align="center">
-        <span class="font-weight-bold text-h5"> Edit Unit </span>
+        <span class="font-weight-bold text-h5"> Unit Info ( {{ buildingUnit.name }} ) </span>
       </v-row>
     </v-toolbar>
-    <v-card-text style="max-height: 100vh; overflow-y: auto">
-      <v-form v-model="validForm" :disabled="disable">
-        <v-row no-gutters>
-          <v-col cols="12">
-            <v-row>
-              <v-col cols="12" class="mt-2">
-                <v-row no-gutters>
-                  <InputLabel class="text-capitalize font-weight-bold" title="Building" />
-                  <v-col cols="12">
-                    {{ buildingUnit.buildingName }}
-                  </v-col>
-                </v-row>
-              </v-col>
-            </v-row>
-          </v-col>
-
-          <v-col cols="12">
-            <v-row>
-              <v-col cols="12" class="mt-2">
-                <v-row no-gutters>
-                  <InputLabel class="text-capitalize font-weight-bold" title="Block" />
-                  <v-col cols="12">
-                    {{ buildingUnit.block }}
-                  </v-col>
-                </v-row>
-              </v-col>
-            </v-row>
-          </v-col>
-
-          <v-col cols="12">
-            <v-row>
-              <v-col cols="12" md="6" class="mt-2">
-                <v-row no-gutters>
-                  <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-col>
-                </v-row>
-              </v-col>
-
-              <v-col cols="12" md="6" class="mt-2">
-                <v-row no-gutters>
-                  <InputLabel class="text-capitalize font-weight-bold" title="Owner" />
-                  <v-col cols="12">
-                    <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-toolbar density="compact">
+      <v-tabs v-model="tab" class="mt-0" active-class="bg-success">
+        <v-tab value="general">General</v-tab>
+        <v-tab value="residents">Residents/Tenants</v-tab>
+        <v-tab value="vehicles">Vehicles</v-tab>
+        <v-tab value="others">Others</v-tab>
+      </v-tabs>
+    </v-toolbar>
+    <v-card-text style="max-height: 100vh; min-height: 60svh; overflow-y: auto">
+      <template v-if="tab === 'general'">
+        <v-form v-model="validForm" :disabled="disable">
+          <v-row>
+            <v-col cols="12" md="6" lg="4" class="mt-2">
+              <v-row no-gutters>
+                <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-col>
+              </v-row>
+            </v-col>
+
+            <v-col cols="12" md="6" lg="4" class="mt-2">
+              <v-row no-gutters>
+                <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-col>
+              </v-row>
+            </v-col>
+
+            <v-col cols="12" md="6" lg="4">
+              <v-row>
+                <v-col cols="12" class="mt-2">
+                  <v-row no-gutters>
+                    <InputLabel class="text-capitalize font-weight-bold" title="Block Name" />
+                    <v-col cols="12">
+                      <v-text-field :model-value="`Block ${buildingUnit.block} (${buildingUnit.buildingName})`"
+                        density="comfortable" readonly class="no-pointer"></v-text-field>
+                    </v-col>
+                  </v-row>
+                </v-col>
+              </v-row>
+            </v-col>
+          </v-row>
+
+          <v-divider class="mb-10" />
+          <v-row>
+            <v-col cols="12" md="6" class="mt-2">
+              <v-row no-gutters>
+                <InputLabel class="text-capitalize font-weight-bold" title="Billing Address Line 1" />
+                <v-col cols="12">
+                  <v-text-field :model-value="siteData?.address?.line1" density="compact" readonly
+                    class="no-pointer"></v-text-field>
+                </v-col>
+              </v-row>
+            </v-col>
+            <v-col cols="12" md="6" class="mt-2">
+              <v-row no-gutters>
+                <InputLabel class="text-capitalize font-weight-bold" title="Billing Address Line 2" />
+                <v-col cols="12">
+                  <v-text-field :model-value="siteData?.address?.line2" density="compact" readonly
+                    class="no-pointer"></v-text-field>
+                </v-col>
+              </v-row>
+            </v-col>
+            <v-col cols="12" md="4" lg="4" class="mt-2">
+              <v-row no-gutters>
+                <InputLabel class="text-capitalize font-weight-bold" title="City" />
+                <v-col cols="12">
+                  <v-text-field :model-value="siteData?.address?.city" density="compact" readonly
+                    class="no-pointer"></v-text-field>
+                </v-col>
+              </v-row>
+            </v-col>
+            <v-col cols="12" md="4" lg="4" class="mt-2">
+              <v-row no-gutters>
+                <InputLabel class="text-capitalize font-weight-bold" title="State" />
+                <v-col cols="12">
+                  <v-text-field :model-value="siteData?.address?.state" density="compact" readonly
+                    class="no-pointer"></v-text-field>
+                </v-col>
+              </v-row>
+            </v-col>
+            <v-col cols="12" md="4" lg="4" class="mt-2">
+              <v-row no-gutters>
+                <InputLabel class="text-capitalize font-weight-bold" title="Country" />
+                <v-col cols="12">
+                  <v-text-field :model-value="siteData?.address?.country" density="compact" readonly
+                    class="no-pointer"></v-text-field>
+                </v-col>
+              </v-row>
+            </v-col>
+            <v-col cols="12" md="4" lg="4" class="mt-2">
+              <v-row no-gutters>
+                <InputLabel class="text-capitalize font-weight-bold" title="Postal Code" />
+                <v-col cols="12">
+                  <v-text-field :model-value="siteData?.address?.postalCode" density="compact" readonly
+                    class="no-pointer"></v-text-field>
+                </v-col>
+              </v-row>
+            </v-col>
+          </v-row>
+        </v-form>
+      </template>
+
+      <template v-else-if="tab === 'residents'">
+        <v-card width="100%">
+          <v-expansion-panels v-model="panels" variant="accordion" >
+
+            <!-- Residents -->
+            <v-expansion-panel value="residents">
+              <v-expansion-panel-title class="bg-primary">
+                Residents ({{ unitResidentsArray.length }})
+              </v-expansion-panel-title>
+
+              <v-expansion-panel-text>
+                <template v-if="unitResidentsArray.length" v-for="resident, residentIndex in unitResidentsArray" :key="residentIndex">
+                  <UnitPersonCard 
+                    :person="resident" :readOnly="true" />
+                  <v-divider v-if="(residentIndex + 1) !== unitResidentsArray.length" thickness="2" color="primary" class="my-4" />
+                </template>
+                <p v-else class="font-weight-semibold  text-caption ml-2 mt-5">
+                  **No residents to display**
+                </p>
+              </v-expansion-panel-text>
+            </v-expansion-panel>
+
+            <!-- Tenants -->
+            <v-expansion-panel value="tenants">
+              <v-expansion-panel-title class="bg-primary">
+                Tenants ({{ unitTenantsArray.length }})
+              </v-expansion-panel-title>
+
+              <v-expansion-panel-text>
+                <template v-if="unitTenantsArray.length" v-for="(tenant, tenantIndex) in unitTenantsArray" :key="tenant._id || tenantIndex">
+                  <UnitPersonCard  :person="tenant" :readOnly="true" />
+                  <v-divider v-if="(tenantIndex + 1) !== unitTenantsArray.length" thickness="2" color="primary" class="my-4" />
+                </template>
+                <p v-else class=" font-weight-semibold text-caption ml-2 mt-5">
+                  **No tenants to display**
+                </p>
+              </v-expansion-panel-text>
+            </v-expansion-panel>
+
+              <!-- Guests -->
+              <v-expansion-panel value="guests">
+                <v-expansion-panel-title class="bg-primary">
+                  Guests ({{ unitGuestsArray.length }})
+                </v-expansion-panel-title>
+  
+                <v-expansion-panel-text>
+                  <template v-if="unitGuestsArray.length" v-for="(guest, guestIndex) in unitGuestsArray" :key="guest._id || guestIndex">
+                    <UnitPersonCard  :person="guest" :readOnly="true" />
+                    <v-divider v-if="(guestIndex + 1) !== unitGuestsArray.length" thickness="2" color="primary" class="my-4" />
+                  </template>
+                  <p v-else class=" font-weight-semibold text-caption ml-2 mt-5">
+                    **No guests to display**
+                  </p>
+                </v-expansion-panel-text>
+              </v-expansion-panel>
+
+          </v-expansion-panels>
+        </v-card>
+      </template>
+      <template v-else-if="tab === 'vehicles'">
+        <p class="font-weight-semibold text-caption ml-2 mt-5">
+          **No vehicles to display**
+        </p>
+       </template>
+   
+      <template v-else-if="tab === 'others'">
+        <v-row>
+          <!-- <v-col cols="12" md="6" class="mt-2">
+            <v-row no-gutters>
+              <InputLabel class="text-capitalize font-weight-bold" title="Owner" />
+              <v-col cols="12">
+                <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-col> -->
 
           <v-col cols="12">
             <v-row>
@@ -83,7 +213,6 @@
             </v-row>
           </v-col>
 
-
           <v-col cols="12">
             <v-row>
               <v-col cols="12" md="6" class="mt-2">
@@ -106,65 +235,52 @@
 
             </v-row>
           </v-col>
-
-
-          <v-col cols="12" md="6" class="mt-2">
-            <v-row no-gutters>
-              <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-col>
-            </v-row>
-          </v-col>
-
-          <v-col cols="12">
-            <v-row>
-              <v-col cols="6" md="6" class="mt-2">
-                <v-row no-gutters>
-                  <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-col>
-                </v-row>
-              </v-col>
-            </v-row>
-          </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" />
-          </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">
-                  {{ message }}
-                </span>
-              </v-col>
-            </v-row>
-          </v-col>
         </v-row>
-      </v-form>
+      </template>
     </v-card-text>
 
-    <v-toolbar density="compact">
+    <v-col cols="12" class="my-2">
       <v-row no-gutters>
-        <v-col cols="6">
-          <v-btn tile block variant="text" class="text-none" size="48" @click="cancel">
-            Cancel
-          </v-btn>
+        <v-col cols="12" class="text-center">
+          <span class="text-none text-subtitle-2 font-weight-medium text-error">
+            {{ message }}
+          </span>
         </v-col>
+      </v-row>
+    </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">
-            Submit
+    <v-toolbar class="pa-0" density="compact">
+      <v-row no-gutters>
+        <v-col :cols="canUpdateUnit || canDeleteUnit ? 6 : 12" class="pa-0">
+          <v-btn block variant="text" class="text-none" size="large" @click="emit('cancel')" height="48">
+            Close
           </v-btn>
         </v-col>
+
+        <v-col v-if="canUpdateUnit || canDeleteUnit" cols="6" class="pa-0">
+          <v-menu>
+            <template #activator="{ props }">
+              <v-btn block variant="flat" color="black" class="text-none" height="48" v-bind="props" tile
+                :disabled="!canUpdateUnit && !canDeleteUnit">
+                More actions
+              </v-btn>
+            </template>
+
+            <v-list class="pa-0">
+              <v-list-item v-if="canUpdateUnit" @click="submit">
+                <v-list-item-title class="text-subtitle-2">
+                  Save
+                </v-list-item-title>
+              </v-list-item>
+
+              <v-list-item v-if="canDeleteUnit" @click="emit('delete-unit')" class="text-red">
+                <v-list-item-title class="text-subtitle-2">
+                  Delete Unit
+                </v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+        </v-col>
       </v-row>
     </v-toolbar>
   </v-card>
@@ -186,7 +302,7 @@ const prop = defineProps({
       ownerName: "",
       building: "",
       buildingName: "",
-      category: "",
+      // category: "",
       block: null,
       level: 0,
       status: "active",
@@ -197,6 +313,14 @@ const prop = defineProps({
       leaseEnd: "",
     }),
   },
+  canUpdateUnit: {
+    type: Boolean,
+    default: true,
+  },
+  canDeleteUnit: {
+    type: Boolean,
+    default: true,
+  }
 });
 
 const buildingUnit = ref({
@@ -208,7 +332,7 @@ const buildingUnit = ref({
   building: "",
   buildingName: "",
   level: 0,
-  category: "",
+  // category: "",
   block: null,
   status: "active",
   buildingUnitFiles: [],
@@ -218,20 +342,27 @@ const buildingUnit = ref({
   leaseEnd: "",
 });
 
+
+const siteData = ref<TSite | null>(null);
+
 buildingUnit.value = JSON.parse(JSON.stringify(prop.roomFacility));
 
-const emit = defineEmits(["cancel", "success", "success:create-more"]);
+const emit = defineEmits(["cancel", "success", "success:create-more", "delete-unit"]);
+
 
 const ownerNameInput = ref("");
+const panels = ref<string[]>(['residents']);
+
+const tab = ref('general')
 
 const validForm = ref(false);
 
 const { getAll } = useBuilding();
-const { getAll: getAllPeople } = usePeople();
+const { getPeopleByUnit } = usePeople();
 const { debounce } = useUtils();
 
 const buildings = ref<Record<string, any>[]>([]);
-const peopleItems = ref<Array<Record<string, any>>>([]);
+const peopleItems = ref<TPeople[]>([]);
 
 const { data: getBuildingReq } = useLazyAsyncData(
   "get-all-buildings",
@@ -248,15 +379,27 @@ watchEffect(() => {
   }
 });
 
-const { data: getUnitPeople, refresh: getUnitPeopleRefresh } = useLazyAsyncData(
+const { data: getUnitPeople, refresh: getUnitPeopleRefresh, pending: getUnitPeoplePending } = useLazyAsyncData(
   "get-unit-people",
-  async () => getAllPeople({ limit: 10, site: prop.site, type: "tenant", search: ownerNameInput.value })
+  async () => await getPeopleByUnit(buildingUnit.value._id, { limit: 10, site: prop.site })
 );
 
-watch(getUnitPeople, (newData: any) => {
+watch(getUnitPeople, (newData: TPeople[]) => {
   peopleItems.value = newData ?? [];
 });
 
+const unitResidentsArray = computed(() => {
+  return peopleItems.value.filter((person) => person?.type === 'resident');
+});
+
+const unitTenantsArray = computed(() => {
+  return peopleItems.value.filter((person) => person?.type === 'tenant');
+});
+
+const unitGuestsArray = computed(() => {
+  return peopleItems.value.filter((person) => person?.type === 'guest');
+});
+
 buildingUnit.value.site = prop.site;
 
 const selectedBuilding = computed(() => {
@@ -285,7 +428,7 @@ function arraysAreEqual(a: any[], b: any[]): boolean {
 const hasChanges = computed(() => {
   return (
     prop.roomFacility.name !== buildingUnit.value.name ||
-    prop.roomFacility.category !== buildingUnit.value.category ||
+    // prop.roomFacility.category !== buildingUnit.value.category ||
     prop.roomFacility.level !== buildingUnit.value.level ||
     !arraysAreEqual(
       prop.roomFacility.buildingUnitFiles,
@@ -306,7 +449,7 @@ async function submit() {
     await updateById(buildingUnit.value._id ?? "", {
       name: buildingUnit.value.name,
       level: buildingUnit.value.level,
-      category: buildingUnit.value.category,
+      // category: buildingUnit.value.category,
       buildingUnitFiles: buildingUnit.value.buildingUnitFiles || [],
       companyName: buildingUnit.value.companyName,
       companyRegistrationNumber: buildingUnit.value.companyRegistrationNumber || "",
@@ -338,3 +481,9 @@ watch(ownerNameInput, (newVal) => {
   debounceSearchOwner();
 }, { immediate: false });
 </script>
+
+<style lang="scss" scoped>
+.no-pointer {
+  pointer-events: none;
+}
+</style>

package/components/CleaningScheduleMain.vue

@@ -57,8 +57,13 @@
           }}
         </template>
         <template #item.closeIn="{ item }">
-          <v-chip class="text-capitalize" variant="flat" color="primary" pill>
-            {{ remainingTime[item._id] || "No Status" }}
+          <v-chip
+            class="text-capitalize"
+            variant="flat"
+            :color="getCloseInColor(item._id)"
+            pill
+          >
+            {{ remainingTime[item._id] || "00h 00m" }}
           </v-chip>
         </template>
         <template #item.status="{ value }">
@@ -99,6 +104,7 @@
 <script lang="ts" setup>
 import { useCleaningSchedulePermission } from "../composables/useCleaningSchedulePermission";
 import useCleaningSchedules from "../composables/useCleaningSchedules";
+import useUtils from "../composables/useUtils";
 
 const props = defineProps({
   orgId: { type: String, required: true },
@@ -191,18 +197,13 @@ const {
 );
 
 function calculateRemainingTime(
-  item: Date | string | number | null | undefined
+  closeIn: Date | string | number | null | undefined
 ) {
-  if (!item) return -1;
-  const _date = new Date(item);
+  if (!closeIn) return -1;
+  const _date = new Date(closeIn);
   if (isNaN(_date.getTime())) return -1;
-  const creationTime = _date.getTime();
-  const currentTime = Date.now();
-  const differenceInMillis = currentTime - creationTime;
-  const differenceInSeconds = Math.floor(differenceInMillis / 1000);
-  const desiredDurationInSeconds = 24 * 60 * 60;
-  const remainingTimeInSeconds = desiredDurationInSeconds - differenceInSeconds;
-  return remainingTimeInSeconds;
+  const remainingMs = _date.getTime() - Date.now();
+  return Math.floor(remainingMs / 1000);
 }
 
 const formatTime = (seconds: number) => {
@@ -218,7 +219,7 @@ const formatTime = (seconds: number) => {
 const updateRemainingTime = () => {
   items.value.forEach((item) => {
     const itemId = item._id as string;
-    const _time = calculateRemainingTime(item.date as string);
+    const _time = calculateRemainingTime(item.closeIn as string);
     remainingSeconds.value[itemId] = _time;
     remainingTime.value[itemId] = _time <= 0 ? "00h 00m" : formatTime(_time);
   });
@@ -234,6 +235,41 @@ watchEffect(() => {
   updateRemainingTime();
 });
 
+let _countdownInterval: ReturnType<typeof setInterval> | null = null;
+
+onMounted(() => {
+  _countdownInterval = setInterval(updateRemainingTime, 60_000);
+
+  try {
+    const { $socket } = useNuxtApp() as any;
+    if ($socket) {
+      $socket.emit("join:cleaning-schedule", props.site);
+
+      $socket.on("cleaning-schedule:updated", (payload: { siteId: string }) => {
+        if (payload?.siteId !== props.site) return;
+        getCleanerChecklistRefresh();
+      });
+
+      $socket.on("cleaning-schedule:expired", () => {
+        getCleanerChecklistRefresh();
+      });
+    }
+  } catch (_) {}
+});
+
+onUnmounted(() => {
+  if (_countdownInterval) clearInterval(_countdownInterval);
+
+  try {
+    const { $socket } = useNuxtApp() as any;
+    if ($socket) {
+      $socket.emit("leave:cleaning-schedule", props.site);
+      $socket.off("cleaning-schedule:updated");
+      $socket.off("cleaning-schedule:expired");
+    }
+  } catch (_) {}
+});
+
 async function downloadItem(item: any) {
   const id = item?._id;
   if (!id) return;
@@ -248,6 +284,14 @@ async function downloadItem(item: any) {
   }
 }
 
+const selectedScheduleStatus = useState<string>(
+  "selectedScheduleStatus",
+  () => ""
+);
+
+const isItemClosed = (item: any): boolean =>
+  String(item?.status ?? "").toLowerCase() === "closed";
+
 function onRowClick(data: any) {
   const item = data?.item ?? data;
   const id = item?._id || item?.id || item?.areaId;
@@ -260,6 +304,9 @@ function onRowClick(data: any) {
       return;
     }
 
+    // Store status so nested pages know whether the schedule is closed
+    selectedScheduleStatus.value = String(item?.status ?? "");
+
     if (props.type === "toilet") {
       const path = `/${props.orgId}/${props.site}/toilet-checklist/${id}`;
       navigateTo(path);

package/components/Dialog/DeleteConfirmation.vue

@@ -3,9 +3,9 @@
         <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-5 px-7 text-center">
             <span> {{ promptTitle }}</span>
 
-            <span v-if="message" class="text-error mt-2">
+            <div v-if="message" class="text-error  mt-2">
                 {{ message }} Do you want to delete anyway?
-            </span>
+            </div>
         </v-card-text>
 
         <v-toolbar class="pa-0" density="compact">

package/components/Dialog/UpdateMoreAction.vue

@@ -19,7 +19,7 @@
 
     <v-toolbar class="pa-0" density="compact">
       <v-row no-gutters>
-        <v-col cols="6" class="pa-0">
+        <v-col :cols="(canUpdate || canDelete) ? 6 : 12" class="pa-0">
           <v-btn
             block
             variant="text"
@@ -32,7 +32,7 @@
           </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