@7365admin1/layer-common 3.0.25 → 3.0.27

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @iservice365/layer-common
 
+## 3.0.27
+
+### Patch Changes
+
+- c76ac10: Update Package Version
+- 3d5034d: Update Version Package
+
+## 3.0.26
+
+### Patch Changes
+
+- 4c4e01d: Update Package Version
+- 165fd5a: Update Layer Common Version
+
 ## 3.0.25
 
 ### 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,16 +47,46 @@
             <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>
 
           <div>
             <div class="text-caption text-grey">User</div>
-            <div class="text-body-2 font-weight-medium">{{ details.user?.name ?? "N/A" }} ({{ details.user?.email ?? "N/A" }})</div>
+            <div class="text-body-2 font-weight-medium">
+              {{ details.userCred?.name ?? details.user?.name ?? "N/A" }}
+              <template v-if="details.user?.email">({{ details.user.email }})</template>
+            </div>
           </div>
 
+          <!-- Visitor Credentials -->
+          <template v-if="details.userCred">
+            <v-divider />
+            <div class="text-caption font-weight-bold text-grey-darken-2 text-uppercase">Visitor Information</div>
+
+            <div>
+              <div class="text-caption text-grey">NRIC</div>
+              <div class="text-body-2 font-weight-medium">{{ details.userCred.nric ?? "N/A" }}</div>
+            </div>
+
+            <div>
+              <div class="text-caption text-grey">Contact</div>
+              <div class="text-body-2 font-weight-medium">{{ details.userCred.contact ?? "N/A" }}</div>
+            </div>
+
+            <div v-if="details.userCred.company">
+              <div class="text-caption text-grey">Company</div>
+              <div class="text-body-2 font-weight-medium">{{ details.userCred.company }}</div>
+            </div>
+
+            <div v-if="details.userCred.plateNumber">
+              <div class="text-caption text-grey">Plate Number</div>
+              <div class="text-body-2 font-weight-medium">{{ details.userCred.plateNumber }}</div>
+            </div>
+            <v-divider />
+          </template>
+
           <div>
             <div class="text-caption text-grey">Created At</div>
             <div class="text-body-2 font-weight-medium">{{ formatDate(details.createdAt) }}</div>
@@ -71,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>
@@ -101,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,
@@ -115,6 +227,7 @@ watch(
       }
     } else {
       details.value = null;
+      historyOpen.value = false;
     }
   }
 );
@@ -142,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

@@ -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);
 });

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;
   }