@7365admin1/layer-common 3.0.26 → 3.0.28

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @iservice365/layer-common
 
+## 3.0.28
+
+### Patch Changes
+
+- 0c04bbf: Update Package Version
+
+## 3.0.27
+
+### Patch Changes
+
+- c76ac10: Update Package Version
+- 3d5034d: Update Version Package
+
 ## 3.0.26
 
 ### Patch Changes

package/components/AccessCardDetailsDialog.vue

@@ -30,7 +30,7 @@
             <div class="text-body-2 font-weight-medium">{{ details.type ?? "N/A" }}</div>
           </div>
 
-          <div>
+          <div v-if="details.status">
             <div class="text-caption text-grey">Status</div>
             <v-chip
               :color="statusColor(details.status)"
@@ -47,7 +47,7 @@
             <div class="text-body-2 font-weight-medium">{{ details.isActivated ? "Yes" : "No" }}</div>
           </div>
 
-          <div>
+          <div v-if="details.site?.name">
             <div class="text-caption text-grey">Site</div>
             <div class="text-body-2 font-weight-medium">{{ details.site?.name ?? "N/A" }}</div>
           </div>
@@ -101,6 +101,81 @@
             <div class="text-caption text-grey">Remarks</div>
             <div class="text-body-2 font-weight-medium">{{ details.remarks }}</div>
           </div>
+
+          <!-- History -->
+          <template v-if="details.history?.length > 0">
+            <v-divider />
+            <div
+              class="d-flex align-center justify-space-between cursor-pointer"
+              @click="historyOpen = !historyOpen"
+            >
+              <div class="text-caption font-weight-bold text-grey-darken-2 text-uppercase">
+                History ({{ details.history.length }})
+              </div>
+              <v-icon size="16" :icon="historyOpen ? 'mdi-chevron-up' : 'mdi-chevron-down'" />
+            </div>
+
+            <template v-if="historyOpen">
+              <div
+                v-for="(entry, idx) in sortedHistory"
+                :key="entry._id ?? idx"
+                class="d-flex ga-2"
+              >
+                <!-- Timeline spine -->
+                <div class="d-flex flex-column align-center" style="width: 20px; flex-shrink: 0;">
+                  <div
+                    class="timeline-dot rounded-circle mt-1"
+                    :class="entry.visitorId ? 'bg-blue' : 'bg-orange'"
+                  />
+                  <div
+                    v-if="idx < sortedHistory.length - 1"
+                    class="timeline-line bg-grey-lighten-2 mt-1"
+                  />
+                </div>
+
+                <!-- Entry content -->
+                <div class="d-flex flex-column ga-1 pb-4 flex-grow-1">
+                  <div class="d-flex align-center justify-space-between">
+                    <v-chip
+                      size="x-small"
+                      variant="tonal"
+                      :color="entry.visitorId ? 'blue' : 'orange'"
+                      :prepend-icon="entry.visitorId ? 'mdi-account-arrow-right' : 'mdi-arrow-u-left-top'"
+                    >
+                      {{ entry.visitorId ? "Assigned" : "Returned" }}
+                    </v-chip>
+                    <span class="text-caption text-grey">{{ formatDate(entry.createdAt) }}</span>
+                  </div>
+
+                  <!-- Assignment entry -->
+                  <template v-if="entry.visitorId">
+                    <div class="text-body-2 font-weight-medium">{{ entry.name ?? "N/A" }}</div>
+                    <div class="text-caption text-grey-darken-1">
+                      <span v-if="entry.nric">NRIC: {{ entry.nric }}</span>
+                      <span v-if="entry.contact" class="ml-2">· {{ entry.contact }}</span>
+                    </div>
+                    <div class="text-caption text-grey-darken-1">
+                      <span v-if="entry.company">{{ entry.company }}</span>
+                      <span v-if="entry.plateNumber" class="ml-2">· {{ entry.plateNumber }}</span>
+                    </div>
+                  </template>
+
+                  <!-- Return/checkout entry -->
+                  <template v-else>
+                    <div class="d-flex align-center ga-2">
+                      <v-chip size="x-small" variant="flat" :color="statusColor(entry.status?.toLowerCase())">
+                        {{ entry.status ?? "N/A" }}
+                      </v-chip>
+                      <span v-if="entry.damage" class="text-caption text-error">Damaged</span>
+                    </div>
+                    <div v-if="entry.remarks" class="text-caption text-grey-darken-1">
+                      Remarks: {{ entry.remarks }}
+                    </div>
+                  </template>
+                </div>
+              </div>
+            </template>
+          </template>
         </div>
       </v-card-text>
     </v-card>
@@ -131,6 +206,13 @@ const { getCardDetails } = useAccessManagement();
 
 const details = ref<Record<string, any> | null>(null);
 const pending = ref(false);
+const historyOpen = ref(false);
+
+const sortedHistory = computed(() =>
+  [...(details.value?.history ?? [])].sort(
+    (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+  )
+);
 
 watch(
   () => props.modelValue,
@@ -145,6 +227,7 @@ watch(
       }
     } else {
       details.value = null;
+      historyOpen.value = false;
     }
   }
 );
@@ -172,3 +255,16 @@ function formatDate(date: string) {
   }).format(new Date(date));
 }
 </script>
+
+<style scoped>
+.timeline-dot {
+  width: 10px;
+  height: 10px;
+  flex-shrink: 0;
+}
+.timeline-line {
+  width: 2px;
+  flex-grow: 1;
+  min-height: 16px;
+}
+</style>

package/components/AccessCardPreviewDialog.vue

@@ -41,7 +41,7 @@
         <div class="text-caption font-weight-bold mb-1 text-uppercase text-grey-darken-1">
           Person <span class="text-error">*</span>
         </div>
-        <v-autocomplete
+        <v-select
           v-model="assignPerson"
           :items="filteredPeopleItems"
           density="compact"
@@ -63,7 +63,7 @@
               {{ personTypeLabel(item.raw) }}
             </v-chip>
           </template>
-        </v-autocomplete>
+        </v-select>
         <p v-if="assignError" class="text-error text-caption mt-2">{{ assignError }}</p>
       </v-card-text>
 
@@ -116,9 +116,9 @@
           <!-- Available Physical -->
           <v-col cols="12" class="mt-3">
             <strong>Available Physical</strong>
-            <div v-if="unit?.available?.physical?.length" class="mt-1">
+            <div v-if="availablePhysical.length" class="mt-1">
               <v-chip
-                v-for="card in unit.available.physical"
+                v-for="card in availablePhysical"
                 :key="card._id"
                 size="small"
                 class="mr-1 mb-1"
@@ -133,6 +133,26 @@
             <span v-else class="text-caption text-grey ml-1">None</span>
           </v-col>
 
+          <!-- Damage Physical -->
+          <v-col cols="12" class="mt-2">
+            <strong>Damage</strong>
+            <div v-if="damagedPhysical.length" class="mt-1">
+              <v-chip
+                v-for="card in damagedPhysical"
+                :key="card._id"
+                size="small"
+                class="mr-1 mb-1"
+                color="deep-orange"
+                :variant="selectedCardInUnit?._id === card._id ? 'flat' : 'tonal'"
+                style="cursor: pointer"
+                @click="toggleCard(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>
@@ -424,11 +444,19 @@ function showToast(message: string, color: "success" | "error") {
   snackbar.value = true;
 }
 
+const availablePhysical = computed(() =>
+  (props.unit?.available?.physical ?? []).filter((c: any) => !c.damage)
+);
+
+const damagedPhysical = computed(() =>
+  (props.unit?.available?.physical ?? []).filter((c: any) => c.damage === true)
+);
+
 const isSelectedCardAvailable = computed(() => {
   if (!props.selectedCardInUnit?._id) return false;
   const id = props.selectedCardInUnit._id;
   return [
-    ...(props.unit?.available?.physical ?? []),
+    ...availablePhysical.value,
     ...(props.unit?.available?.non_physical ?? []),
   ].some((c) => c._id === id);
 });
@@ -517,7 +545,10 @@ async function confirmAssign() {
     cancelAssign();
     emit("refresh");
   } catch (e: any) {
-    const msg = e?.data?.message ?? "Failed to assign. Please try again.";
+    const rawMsg = e?.data?.message ?? "";
+    const msg = rawMsg.includes("500")
+      ? "EntryPass server is unavailable. Please contact your administrator."
+      : rawMsg || "Failed to assign. Please try again.";
     assignError.value = msg;
     showToast(msg, "error");
   } finally {

package/components/AccessManagement.vue

@@ -301,7 +301,16 @@ const loading = computed(() => getAllReqStatus.value === "pending");
 
 watchEffect(() => {
   if (getCardReq.value?.data) {
-    items.value = getCardReq.value.data.items;
+    items.value = getCardReq.value.data.items.map((item: any) => ({
+      ...item,
+      cardCounts: {
+        ...item.cardCounts,
+        available: {
+          ...item.cardCounts?.available,
+          physical: (item.available?.physical ?? []).filter((c: any) => !c.damage).length,
+        },
+      },
+    }));
     pages.value = getCardReq.value.data.pages;
     pageRange.value = getCardReq.value.data.pageRange;
   }