@7365admin1/layer-common 1.10.3 → 1.10.5

package/components/AccessManagement.vue

@@ -103,251 +103,39 @@
     </v-dialog>
 
     <!-- Preview Dialog -->
-    <v-dialog v-model="previewDialog" width="450" persistent>
-      <v-card width="100%">
-        <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-0">
-          <v-row no-gutters class="mb-4">
-            <v-col cols="12">
-              <strong>Unit:</strong> {{ selectedCard?.name ?? "N/A" }}
-            </v-col>
-            <v-col cols="12">
-              <strong>Block:</strong> {{ selectedCard?.block?.name ?? "N/A" }}
-            </v-col>
-            <v-col cols="12">
-              <strong>Level:</strong> {{ selectedCard?.level?.level ?? "N/A" }}
-            </v-col>
-
-            <!-- Available Physical -->
-            <v-col cols="12" class="mt-3">
-              <strong>Available Physical</strong>
-              <div
-                v-if="selectedCard?.available?.physical?.length"
-                class="mt-1"
-              >
-                <v-chip
-                  v-for="card in selectedCard.available.physical"
-                  :key="card._id"
-                  size="small"
-                  class="mr-1 mb-1"
-                  :color="
-                    selectedCardInUnit?._id === card._id ? 'primary' : undefined
-                  "
-                  :variant="
-                    selectedCardInUnit?._id === card._id ? 'flat' : 'tonal'
-                  "
-                  style="cursor: pointer"
-                  @click="
-                    selectedCardInUnit =
-                      selectedCardInUnit?._id === card._id ? null : card
-                  "
-                >
-                  {{ card.cardNo }}
-                </v-chip>
-              </div>
-              <span v-else class="text-caption text-grey ml-1">None</span>
-            </v-col>
-
-            <!-- Available Non-Physical -->
-            <v-col cols="12" class="mt-2">
-              <strong>Available Non-Physical</strong>
-              <div
-                v-if="selectedCard?.available?.non_physical?.length"
-                class="mt-1"
-              >
-                <v-chip
-                  v-for="card in selectedCard.available.non_physical"
-                  :key="card._id"
-                  size="small"
-                  class="mr-1 mb-1"
-                  :color="
-                    selectedCardInUnit?._id === card._id ? 'primary' : undefined
-                  "
-                  :variant="
-                    selectedCardInUnit?._id === card._id ? 'flat' : 'tonal'
-                  "
-                  style="cursor: pointer"
-                  @click="
-                    selectedCardInUnit =
-                      selectedCardInUnit?._id === card._id ? null : card
-                  "
-                >
-                  {{ card.cardNo }}
-                </v-chip>
-              </div>
-              <span v-else class="text-caption text-grey ml-1">None</span>
-            </v-col>
-
-            <!-- Assigned Physical -->
-            <v-col cols="12" class="mt-2">
-              <strong>Assigned Physical</strong>
-              <div v-if="selectedCard?.assigned?.physical?.length" class="mt-1">
-                <v-chip
-                  v-for="card in selectedCard.assigned.physical"
-                  :key="card._id"
-                  size="small"
-                  class="mr-1 mb-1"
-                  :color="
-                    selectedCardInUnit?._id === card._id ? 'primary' : undefined
-                  "
-                  :variant="
-                    selectedCardInUnit?._id === card._id ? 'flat' : 'tonal'
-                  "
-                  style="cursor: pointer"
-                  @click="
-                    selectedCardInUnit =
-                      selectedCardInUnit?._id === card._id ? null : card
-                  "
-                >
-                  {{ card.cardNo }}
-                </v-chip>
-              </div>
-              <span v-else class="text-caption text-grey ml-1">None</span>
-            </v-col>
-
-            <!-- Assigned Non-Physical -->
-            <v-col cols="12" class="mt-2">
-              <strong>Assigned Non-Physical</strong>
-              <div
-                v-if="selectedCard?.assigned?.non_physical?.length"
-                class="mt-1"
-              >
-                <v-chip
-                  v-for="card in selectedCard.assigned.non_physical"
-                  :key="card._id"
-                  size="small"
-                  class="mr-1 mb-1"
-                  :color="
-                    selectedCardInUnit?._id === card._id ? 'primary' : undefined
-                  "
-                  :variant="
-                    selectedCardInUnit?._id === card._id ? 'flat' : 'tonal'
-                  "
-                  style="cursor: pointer"
-                  @click="
-                    selectedCardInUnit =
-                      selectedCardInUnit?._id === card._id ? null : card
-                  "
-                >
-                  {{ card.cardNo }}
-                </v-chip>
-              </div>
-              <span v-else class="text-caption text-grey ml-1">None</span>
-            </v-col>
-          </v-row></v-card-text
-        >
-        <v-toolbar class="pa-0" density="compact">
-          <v-row no-gutters>
-            <v-col cols="6" class="pa-0">
-              <v-btn
-                block
-                variant="text"
-                class="text-none"
-                size="large"
-                @click="previewDialog = false"
-                height="48"
-              >
-                Close
-              </v-btn>
-            </v-col>
-            <v-col cols="6" class="pa-0" v-if="canUpdate">
-              <v-menu>
-                <template #activator="{ props }">
-                  <v-btn
-                    block
-                    variant="flat"
-                    color="black"
-                    class="text-none"
-                    height="48"
-                    v-bind="props"
-                    tile
-                  >
-                    More actions
-                  </v-btn>
-                </template>
-                <v-list class="pa-0">
-                  <v-list-item
-                    :disabled="selectedCardInUnit === null"
-                    @click="openReplaceDialog()"
-                    v-if="canReplaceAccessCard"
-                  >
-                    <v-list-item-title class="text-subtitle-2">
-                      Replace Card
-                    </v-list-item-title>
-                  </v-list-item>
-                  <v-list-item
-                    @click="openDeleteDialog()"
-                    class="text-red"
-                    :disabled="selectedCardInUnit === null"
-                    v-if="canDeleteAccessCard"
-                  >
-                    <v-list-item-title class="text-subtitle-2">
-                      Delete Card
-                    </v-list-item-title>
-                  </v-list-item>
-                </v-list>
-              </v-menu>
-            </v-col>
-          </v-row>
-        </v-toolbar></v-card
-      >
+    <AccessCardPreviewDialog
+      v-model="previewDialog"
+      :unit="selectedCard"
+      v-model:selected-card-in-unit="selectedCardInUnit"
+      :can-update="canUpdate"
+      :can-replace-access-card="canReplaceAccessCard"
+      :can-delete-access-card="canDeleteAccessCard"
+      :is-selected-card-assigned-physical="isSelectedCardAssignedPhysical"
+      :is-selected-card-physical="isSelectedCardPhysical"
+      @replace="openReplaceDialog()"
+      @delete="openDeleteDialog()"
+    />
+
+    <!-- Replace Card Dialog -->
+    <v-dialog v-model="replaceDialog" width="500" persistent>
+      <AccessCardReplaceForm
+        v-if="selectedCardInUnit"
+        :card="selectedCardInUnit"
+        :unit="selectedCard"
+        :site-id="siteId"
+        @cancel="replaceDialog = false"
+        @success="successReplace()"
+        @error="(msg: any) => showMessage(msg, 'error')"
+      />
     </v-dialog>
 
     <!-- Delete Dialog -->
-    <v-dialog
+    <AccessCardDeleteDialog
       v-model="confirmDialog"
       :loading="deleteLoading"
-      width="450"
-      persistent
-    >
-      <v-card width="100%">
-        <v-toolbar density="compact" class="pl-4">
-          <span class="font-weight-medium text-h5">Delete Card</span>
-        </v-toolbar>
-        <v-card-text>
-          <p class="text-subtitle-2 text-center">
-            Are you sure you want to delete this card? This action cannot be
-            undone.
-          </p>
-
-          <v-row v-if="message" no-gutters justify="center" class="mt-4">
-            <span class="text-caption text-error text-center">
-              {{ message }}
-            </span>
-          </v-row></v-card-text
-        >
-        <v-toolbar density="compact">
-          <v-row no-gutters>
-            <v-col cols="6">
-              <v-btn
-                tile
-                block
-                size="48"
-                variant="text"
-                class="text-none"
-                @click="confirmDialog = false"
-                :disabled="deleteLoading"
-              >
-                Close
-              </v-btn>
-            </v-col>
-            <v-col cols="6">
-              <v-btn
-                tile
-                block
-                size="48"
-                color="black"
-                variant="flat"
-                class="text-none"
-                @click="handleDeleteCard"
-                :loading="deleteLoading"
-              >
-                Delete Card
-              </v-btn>
-            </v-col>
-          </v-row></v-toolbar
-        >
-      </v-card>
-    </v-dialog>
+      :error="deleteError"
+      @confirm="handleDeleteCard"
+    />
 
     <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
   </v-row>
@@ -362,17 +150,17 @@ const props = defineProps({
     type: Array as PropType<Array<Record<string, any>>>,
     default: () => [
       {
-        title: "Unit",
-        value: "name",
-      },
-      {
-        title: "Block",
+        title: "Building",
         value: "block.name",
       },
       {
         title: "Level",
         value: "level.level",
       },
+      {
+        title: "Unit",
+        value: "name",
+      },
       {
         title: "Avail. (P)",
         value: "cardCounts.available.physical",
@@ -440,6 +228,7 @@ const createDialog = ref(false);
 const assignDialog = ref(false);
 const previewDialog = ref(false);
 const deleteLoading = ref(false);
+const deleteError = ref("");
 const confirmDialog = ref(false);
 const searchText = ref("");
 const replaceDialog = ref(false);
@@ -458,8 +247,21 @@ watch(previewDialog, (val) => {
   if (!val) selectedCardInUnit.value = null;
 });
 
-const { deleteById: _deleteCard } = useCard();
-const { getUserTypeAccessCards } = useAccessManagement();
+const isSelectedCardAssignedPhysical = computed(() =>
+  selectedCard.value?.assigned?.physical?.some(
+    (c: any) => c._id === selectedCardInUnit.value?._id
+  ) ?? false
+);
+
+const isSelectedCardPhysical = computed(() =>
+  ["available", "assigned", "replaced", "deleted"].some((state) =>
+    selectedCard.value?.[state]?.physical?.some(
+      (c: any) => c._id === selectedCardInUnit.value?._id
+    )
+  )
+);
+
+const { getUserTypeAccessCards, deleteCard: _deleteCard } = useAccessManagement();
 
 const statsRef = ref<{ refresh: () => void } | null>(null);
 
@@ -528,24 +330,32 @@ function tableRowClickHandler(_: any, data: any) {
 
 function openDeleteDialog() {
   confirmDialog.value = true;
-  message.value = "";
+  deleteError.value = "";
 }
 
 function openReplaceDialog() {
   replaceDialog.value = true;
 }
 
-async function handleDeleteCard() {
+function successReplace() {
+  replaceDialog.value = false;
+  previewDialog.value = false;
+  getCards();
+  statsRef.value?.refresh();
+  showMessage("Access card replaced successfully!", "success");
+}
+
+async function handleDeleteCard(remarks: string) {
   deleteLoading.value = true;
   try {
-    await _deleteCard(selectedCard.value._id ?? "");
+    await _deleteCard({ cardId: selectedCardInUnit.value?._id ?? "", remarks });
     await getCards();
     statsRef.value?.refresh();
     selectedCardId.value = null;
     confirmDialog.value = false;
     previewDialog.value = false;
   } catch (error: any) {
-    message.value = error?.response?._data?.message || "Failed to delete card";
+    deleteError.value = error?.response?._data?.message || "Failed to delete card";
   } finally {
     deleteLoading.value = false;
   }

package/components/AreaChecklistHistoryLogs.vue

@@ -166,7 +166,7 @@
                               size="small"
                               class="text-capitalize"
                             >
-                              {{ unit.status || "Ready" }}
+                              {{ unit.status || "Open" }}
                             </v-chip>
                           </v-col>
                         </v-row>

package/components/BuildingManagement/units.vue

@@ -38,18 +38,20 @@
     </v-col>
 
     <!-- Create Dialog -->
-    <v-dialog v-model="createDialog" width="450" persistent>
+    <v-dialog v-model="createDialog" :width="smAndUp ? '70svw' : '100%'" persistent>
       <BuildingUnitFormAdd :site="site" @cancel="createDialog = false" @success="successCreate()"
         @success:create-more="getBuildingUnit()" />
     </v-dialog>
 
     <!-- Edit Dialog -->
-    <v-dialog v-model="dialogEdit" width="450" persistent>
+    <v-dialog v-model="dialogEdit" :width="smAndUp ? '70svw' : '100%'" persistent>
       <BuildingUnitFormEdit v-if="selectedBuildingUnit" @cancel="dialogEdit = false" @success="successUpdate()"
         :roomFacility="selectedBuildingUnit" />
     </v-dialog>
 
     <!-- Preview Dialog -->
+
+    
     <v-dialog v-if="canViewUnitDetails" v-model="dialogPreview" width="450" persistent>
       <v-card width="100%">
         <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-0">
@@ -73,6 +75,30 @@
               {{ selectedBuildingUnit.category }}
             </v-col>
 
+            <v-col cols="12">
+              <strong>Company Name:</strong>
+              {{ selectedBuildingUnit.companyName || "" }}
+            </v-col>
+
+            <v-col cols="12">
+              <strong>Company Registration Number:</strong>
+              {{ selectedBuildingUnit.companyRegistrationNumber || "" }}
+            </v-col>
+
+            <v-col cols="12">
+              <strong>Lease Start:</strong>
+              {{ formatDateDDMMYYYYLocal(selectedBuildingUnit.leaseStart) || "" }}
+            </v-col>
+            <v-col cols="12">
+              <strong>Lease End:</strong>
+              {{ formatDateDDMMYYYYLocal(selectedBuildingUnit.leaseEnd) || "" }}
+            </v-col>
+
+            <v-col cols="12">
+              <strong>Owner Name:</strong>
+              {{ selectedBuildingUnit.ownerName || "" }}
+            </v-col>
+
             <template v-if="selectedBuildingUnit?.buildingUnitFiles.length > 0">
               <v-col cols="12">
                 <strong>Uploaded Files:</strong>
@@ -164,6 +190,8 @@
 </template>
 
 <script setup lang="ts">
+import { useDisplay } from 'vuetify/lib/composables/display.mjs';
+
 const props = defineProps({
   headers: {
     type: Array as PropType<Array<Record<string, any>>>,
@@ -228,10 +256,13 @@ const props = defineProps({
 const site = (useRoute().params.site as string) ?? "";
 const status = (useRoute().params.status as string) ?? "active";
 
+const { smAndUp } = useDisplay();
+
 const { toOrdinal } = useUtils();
 
 const { headerSearch } = useLocal();
 const { getAll, deleteById } = useBuildingUnit();
+const { formatDateDDMMYYYYLocal } = useUtils();
 
 const page = ref(1);
 const pages = ref(0);

package/components/BuildingUnitFormAdd.vue

@@ -23,25 +23,23 @@
 
           <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="Building"
-                    required
-                  />
+                  <InputLabel class="text-capitalize" title="Building" required />
                   <v-col cols="12">
-                    <v-autocomplete
-                      v-model="buildingUnit.building"
-                      :items="buildings"
-                      item-title="name"
-                      item-value="_id"
-                      v-model:search="searchBuilding"
-                      :hide-no-data="false"
-                      density="comfortable"
-                      :rules="[requiredRule]"
-                      variant="outlined"
-                    ></v-autocomplete>
+                    <v-autocomplete v-model="buildingUnit.building" :items="buildings" item-title="name"
+                      item-value="_id" v-model:search="searchBuilding" :hide-no-data="false" density="comfortable"
+                      :rules="[requiredRule]" variant="outlined"></v-autocomplete>
+                  </v-col>
+                </v-row>
+              </v-col>
+
+              <v-col cols="12" md="6" class="mt-2">
+                <v-row no-gutters>
+                  <InputLabel class="text-capitalize" 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>
@@ -131,19 +129,7 @@
             </v-row>
           </v-col> -->
 
-          <v-col cols="12" class="mt-2">
-            <v-row no-gutters>
-              <InputLabel class="text-capitalize" 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>
@@ -151,31 +137,18 @@
                 <v-row no-gutters>
                   <InputLabel class="text-capitalize" 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>
 
               <v-col cols="6" class="mt-2">
                 <v-row no-gutters>
-                  <InputLabel
-                    class="text-capitalize"
-                    title="No. of Units"
-                    required
-                  />
+                  <InputLabel class="text-capitalize" title="No. of Units" required />
                   <v-col cols="12">
-                    <v-text-field
-                      v-model.number="buildingUnitQty"
-                      density="comfortable"
-                      :rules="[requiredRule]"
-                      type="number"
-                      @update:model-value="setBuildingLevels()"
-                    ></v-text-field>
+                    <v-text-field v-model.number="buildingUnitQty" density="comfortable" :rules="[requiredRule]"
+                      type="number" @update:model-value="setBuildingLevels()"></v-text-field>
                   </v-col>
                 </v-row>
               </v-col>
@@ -185,39 +158,31 @@
           <v-col v-if="buildingLevels" cols="12">
             <v-row justify="center">
               <v-col cols="6">
-                <v-btn
-                  block
-                  color="primary"
-                  variant="text"
-                  class="text-none font-weight-bold"
-                  text="Set unit labels"
-                  @click="show = !show"
-                ></v-btn>
+                <v-btn block color="primary" variant="text" class="text-none font-weight-bold" text="Set unit labels"
+                  @click="show = !show"></v-btn>
               </v-col>
             </v-row>
           </v-col>
 
           <v-expand-transition>
             <v-row v-show="show" no-gutters>
-              <template
-                v-for="(unitLabel, unitLabelIndex) in unitLabels"
-                :key="levelIndex"
-              >
-                <v-col cols="12">
-                  <v-row no-gutters>
-                    <InputLabel
-                      class="text-capitalize font-weight-bold"
-                      :title="`Unit ${unitLabelIndex + 1}`"
-                    />
-                    <v-col cols="12">
-                      <v-text-field
-                        v-model.trim="unitLabels[unitLabelIndex]"
-                        density="comfortable"
-                      ></v-text-field>
-                    </v-col>
-                  </v-row>
-                </v-col>
-              </template>
+              <v-row>
+                <template v-for="(unitLabel, unitLabelIndex) in unitLabels" :key="levelIndex">
+                  <v-col cols="12" md="4">
+                    <v-row>
+                      <v-col cols="12">
+                        <v-row no-gutters>
+                          <InputLabel class="text-capitalize font-weight-bold" :title="`Unit ${unitLabelIndex + 1}`" />
+                          <v-col cols="12">
+                            <v-text-field v-model.trim="unitLabels[unitLabelIndex]"
+                              density="comfortable"></v-text-field>
+                          </v-col>
+                        </v-row>
+                      </v-col>
+                    </v-row>
+                  </v-col>
+                </template>
+              </v-row>
             </v-row>
           </v-expand-transition>
 
@@ -248,9 +213,7 @@
           <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>
@@ -263,31 +226,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"
-            :disabled="disable"
-          >
+          <v-btn tile block variant="text" class="text-none" size="48" @click="cancel" :disabled="disable">
             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>
@@ -409,7 +355,7 @@ function setBuildingUnit() {
 
 async function submit() {
   disable.value = true;
-  const {buildingUnitFiles, companyName, companyRegistrationNumber, leaseStart, leaseEnd, ...rest} = buildingUnit.value;
+  const { buildingUnitFiles, companyName, companyRegistrationNumber, leaseStart, leaseEnd, ...rest } = buildingUnit.value;
   try {
     await add({
       labels: unitLabels.value,