@7365admin1/layer-common 1.10.3 → 1.10.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 1.10.4
+
+### Patch Changes
+
+- a78dff9: Update Layer-common Changes for March 4, 2026
+
 ## 1.10.3
 
 ### Patch Changes

package/components/AccessCardPreviewDialog.vue

@@ -0,0 +1,297 @@
+<template>
+  <v-dialog :model-value="modelValue" 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>Building:</strong> {{ unit?.block?.name ?? "N/A" }}
+          </v-col>
+          <v-col cols="12">
+            <strong>Level:</strong> {{ unit?.level?.level ?? "N/A" }}
+          </v-col>
+          <v-col cols="12">
+            <strong>Unit:</strong> {{ unit?.name ?? "N/A" }}
+          </v-col>
+
+          <!-- Available Physical -->
+          <v-col cols="12" class="mt-3">
+            <strong>Available Physical</strong>
+            <div v-if="unit?.available?.physical?.length" class="mt-1">
+              <v-chip
+                v-for="card in unit.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="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>
+            <div v-if="unit?.available?.non_physical?.length" class="mt-1">
+              <v-chip
+                v-for="card in unit.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="toggleCard(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="unit?.assigned?.physical?.length" class="mt-1">
+              <v-chip
+                v-for="card in unit.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="toggleCard(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="unit?.assigned?.non_physical?.length" class="mt-1">
+              <v-chip
+                v-for="card in unit.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="toggleCard(card)"
+              >
+                {{ card.cardNo }}
+              </v-chip>
+            </div>
+            <span v-else class="text-caption text-grey ml-1">None</span>
+          </v-col>
+
+          <!-- Replaced Physical -->
+          <v-col cols="12" class="mt-2">
+            <strong>Replaced Physical</strong>
+            <div v-if="unit?.replaced?.physical?.length" class="mt-1">
+              <v-chip
+                v-for="card in unit.replaced.physical"
+                :key="card._id"
+                size="small"
+                class="mr-1 mb-1"
+                :color="selectedCardInUnit?._id === card._id ? 'orange' : '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>
+
+          <!-- Replaced Non-Physical -->
+          <v-col cols="12" class="mt-2">
+            <strong>Replaced Non-Physical</strong>
+            <div v-if="unit?.replaced?.non_physical?.length" class="mt-1">
+              <v-chip
+                v-for="card in unit.replaced.non_physical"
+                :key="card._id"
+                size="small"
+                class="mr-1 mb-1"
+                :color="selectedCardInUnit?._id === card._id ? 'orange' : '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>
+
+          <!-- Deleted Physical -->
+          <v-col cols="12" class="mt-2">
+            <strong>Deleted Physical</strong>
+            <div v-if="unit?.deleted?.physical?.length" class="mt-1">
+              <v-chip
+                v-for="card in unit.deleted.physical"
+                :key="card._id"
+                size="small"
+                class="mr-1 mb-1"
+                :color="selectedCardInUnit?._id === card._id ? 'red' : 'red'"
+                :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>
+
+          <!-- Deleted Non-Physical -->
+          <v-col cols="12" class="mt-2">
+            <strong>Deleted Non-Physical</strong>
+            <div v-if="unit?.deleted?.non_physical?.length" class="mt-1">
+              <v-chip
+                v-for="card in unit.deleted.non_physical"
+                :key="card._id"
+                size="small"
+                class="mr-1 mb-1"
+                :color="selectedCardInUnit?._id === card._id ? 'red' : 'red'"
+                :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>
+        </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"
+              height="48"
+              @click="emit('update:modelValue', false)"
+            >
+              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="!isSelectedCardAssignedPhysical"
+                  @click="emit('replace')"
+                  v-if="canReplaceAccessCard && isSelectedCardAssignedPhysical"
+                >
+                  <v-list-item-title class="text-subtitle-2">
+                    Replace Card
+                  </v-list-item-title>
+                </v-list-item>
+                <v-list-item :disabled="selectedCardInUnit === null">
+                  <v-list-item-title class="text-subtitle-2 cursor-pointer">
+                    Card History
+                  </v-list-item-title>
+                </v-list-item>
+                <v-list-item
+                  @click="emit('delete')"
+                  class="text-red"
+                  :disabled="!isSelectedCardDeletable"
+                  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>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  unit: {
+    type: Object as PropType<Record<string, any>>,
+    default: () => ({}),
+  },
+  selectedCardInUnit: {
+    type: Object as PropType<Record<string, any> | null>,
+    default: null,
+  },
+  canUpdate: {
+    type: Boolean,
+    default: true,
+  },
+  canReplaceAccessCard: {
+    type: Boolean,
+    default: true,
+  },
+  canDeleteAccessCard: {
+    type: Boolean,
+    default: true,
+  },
+  isSelectedCardAssignedPhysical: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean];
+  "update:selectedCardInUnit": [value: Record<string, any> | null];
+  replace: [];
+  delete: [];
+}>();
+
+const isSelectedCardDeletable = computed(() => {
+  if (!props.selectedCardInUnit?._id) return false;
+  const id = props.selectedCardInUnit._id;
+  return [
+    ...(props.unit?.available?.physical ?? []),
+    ...(props.unit?.available?.non_physical ?? []),
+    ...(props.unit?.assigned?.physical ?? []),
+    ...(props.unit?.assigned?.non_physical ?? []),
+  ].some((c) => c._id === id);
+});
+
+function toggleCard(card: Record<string, any>) {
+  emit(
+    "update:selectedCardInUnit",
+    props.selectedCardInUnit?._id === card._id ? null : card
+  );
+}
+</script>

package/components/AccessCardReplaceForm.vue

@@ -0,0 +1,179 @@
+<template>
+  <v-card width="100%">
+    <v-toolbar>
+      <v-row no-gutters class="fill-height px-6" align="center">
+        <span class="font-weight-bold text-h5">Replace Access Card</span>
+      </v-row>
+    </v-toolbar>
+    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-0">
+      <v-form v-model="validForm" :disabled="loading">
+        <v-row no-gutters class="px-6 pt-4 pb-6">
+          <!-- Card being replaced -->
+          <v-col cols="12" class="px-1 mb-4">
+            <div class="text-caption text-grey mb-1 font-weight-bold">
+              Card being replaced
+            </div>
+            <v-chip size="small" variant="tonal" color="warning">
+              {{ card.cardNo }}
+            </v-chip>
+          </v-col>
+
+          <!-- Replacement card -->
+          <v-col cols="12" class="px-1">
+            <InputLabel
+              class="text-capitalize font-weight-bold"
+              title="Replacement Card"
+              required
+            />
+            <v-autocomplete
+              v-model="form.replacementCardId"
+              density="compact"
+              :items="replacementOptions"
+              hide-details="auto"
+              item-title="cardNo"
+              item-value="_id"
+              placeholder="Select replacement card..."
+              persistent-placeholder
+              :rules="[requiredRule]"
+              :no-data-text="noDataText"
+            />
+          </v-col>
+
+          <!-- Remarks -->
+          <v-col cols="12" class="px-1 mt-2">
+            <InputLabel
+              class="text-capitalize font-weight-bold"
+              title="Remarks"
+              required
+            />
+            <v-textarea
+              v-model="form.remarks"
+              density="compact"
+              hide-details="auto"
+              placeholder="Enter remarks..."
+              persistent-placeholder
+              rows="3"
+              auto-grow
+              :rules="[requiredRule]"
+            />
+          </v-col>
+        </v-row>
+      </v-form>
+    </v-card-text>
+
+    <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="loading"
+          >
+            Cancel
+          </v-btn>
+        </v-col>
+        <v-col cols="6">
+          <v-btn
+            tile
+            block
+            variant="flat"
+            color="black"
+            class="text-none"
+            size="48"
+            :disabled="!validForm || loading"
+            :loading="loading"
+            @click="submit"
+          >
+            Replace
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-toolbar>
+  </v-card>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+  card: {
+    type: Object as PropType<Record<string, any>>,
+    required: true,
+  },
+  unit: {
+    type: Object as PropType<Record<string, any>>,
+    required: true,
+  },
+  siteId: {
+    type: String,
+    default: "",
+  },
+});
+const emit = defineEmits(["cancel", "success", "error"]);
+
+const { requiredRule } = useUtils();
+
+const validForm = ref(false);
+const loading = ref(false);
+
+const form = ref({
+  replacementCardId: null as string | null,
+  remarks: "",
+});
+
+const cardType = computed(() => {
+  const id = props.card._id;
+  if (props.unit.available?.physical?.some((c: any) => c._id === id)) return "physical";
+  if (props.unit.assigned?.physical?.some((c: any) => c._id === id)) return "physical";
+  if (props.unit.available?.non_physical?.some((c: any) => c._id === id)) return "non_physical";
+  if (props.unit.assigned?.non_physical?.some((c: any) => c._id === id)) return "non_physical";
+  return null;
+});
+
+const replacementOptions = computed(() => {
+  const id = props.card._id;
+  if (cardType.value === "physical") {
+    return (props.unit.available?.physical ?? []).filter((c: any) => c._id !== id);
+  }
+  if (cardType.value === "non_physical") {
+    return (props.unit.available?.non_physical ?? []).filter((c: any) => c._id !== id);
+  }
+  return [];
+});
+
+const noDataText = computed(() => {
+  if (!cardType.value) return "Unable to determine card type";
+  const label = cardType.value === "physical" ? "physical" : "non-physical";
+  return `No available ${label} cards for replacement`;
+});
+
+function cancel() {
+  emit("cancel");
+}
+
+async function submit() {
+  loading.value = true;
+  try {
+    const { replaceCard } = useCard();
+    const { currentUser } = useLocalAuth();
+    // @TODO: userId should be the ID of the unit owner, not the current user
+    await replaceCard({
+      cardId: props.card._id,
+      issuedCardId: form.value.replacementCardId!,
+      unitId: props.unit._id,
+      remarks: form.value.remarks,
+      userId: currentUser.value?._id ?? "",
+    });
+    emit("success");
+  } catch (error: any) {
+    const msg =
+      error?.response?._data?.message ||
+      error?.data?.message ||
+      "Failed to replace access card.";
+    emit("error", msg);
+  } finally {
+    loading.value = false;
+  }
+}
+</script>