@7365admin1/layer-common 1.10.0 → 1.10.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 1.10.1
+
+### Patch Changes
+
+- 72d3443: Update Changes
+
 ## 1.10.0
 
 ### Minor Changes

package/components/AcceptDialog.vue

@@ -0,0 +1,44 @@
+<template>
+  <v-dialog
+    :model-value="modelValue"
+    @update:model-value="val => $emit('update:modelValue', val)"
+    max-width="420"
+    persistent
+  >
+    <v-card class="pa-4" style="border-radius:12px;">
+      <v-card-title class="headline" style="font-size:1.3rem; font-weight:500;">
+        {{ title }}
+      </v-card-title>
+      <v-card-text style="font-size:1.05rem; margin-bottom:24px;">
+        {{ message }}
+      </v-card-text>
+      <v-card-actions class="justify-end" style="gap:12px;">
+        <v-btn
+          color="primary"
+          variant="outlined"
+          style="min-width:70px; background:#e3f2fd; color:#1976d2; font-weight:500;"
+          @click="$emit('confirm')"
+        >
+          Yes
+        </v-btn>
+        <v-btn
+          color="error"
+          variant="outlined"
+          style="min-width:70px; background:#ffebee; color:#d32f2f; font-weight:500;"
+          @click="$emit('cancel')"
+        >
+          No
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  modelValue: boolean,
+  title?: string,
+  message?: string
+}>();
+defineEmits(['confirm', 'cancel', 'update:modelValue']);
+</script>

package/components/AccessCardAddForm.vue

@@ -91,7 +91,7 @@
             <v-col cols="12">
               <InputLabel
                 class="text-capitalize font-weight-bold"
-                title="Doors Location"
+                title="Door Location"
                 required
               />
               <v-select
@@ -115,6 +115,8 @@
                 v-model="card.accessGroup"
                 density="compact"
                 :items="accessGroupItems"
+                item-title="name"
+                item-value="no"
                 hide-details
                 :rules="[requiredRule]"
                 multiple
@@ -179,7 +181,7 @@
                 hide-details
                 :rules="card.useAsLiftCard ? [requiredRule] : []"
                 item-title="name"
-                item-value="value"
+                item-value="no"
               />
             </v-col>
             <v-col cols="12">
@@ -327,6 +329,15 @@ const prop = defineProps({
 const { add: _addCard, updateById: _updateCardById } = useCard();
 const { getAll: _getBuildings } = useBuilding();
 const { getAllUnits: _getUnits } = useBuildingUnit();
+const {
+  getDoorAccessLevels: _getDoorAccessLevels,
+  getLiftAccessLevels: _getLiftAccessLevels,
+  getAccessGroups: _getAccessGroups,
+  addPhysicalCard: _addPhysicalCard,
+  addNonPhysicalCard: _addNonPhysicalCard,
+} = useAccessManagement();
+
+const config = useRuntimeConfig();
 const emit = defineEmits(["cancel", "success"]);
 
 const validForm = ref(false);
@@ -429,11 +440,32 @@ const buildingItems = ref<{ name: string; value: string }[]>([]);
 const levelItems = ref<{ name: string; value: string }[]>([]);
 const unitItems = ref<{ name: string; value: string }[]>([]);
 const buildingsData = ref<Record<string, any>[]>([]);
+const encryptedAcmUrl = ref("");
 
 const route = useRoute();
-const siteId = route.params.site as string;
+const siteId = '66ab2f1381856008f1887971' as string;
+// const siteId = route.params.site as string; @TODO
 const orgId = route.params.org as string;
 
+onMounted(async () => {
+  try {
+    const { encrypted: acmUrl } = await $fetch<{ encrypted: string }>(
+      "/api/encrypt-acm-url"
+    );
+    encryptedAcmUrl.value = acmUrl;
+    const [doorLevels, liftLevels, groups] = await Promise.all([
+      _getDoorAccessLevels(acmUrl),
+      _getLiftAccessLevels(acmUrl),
+      _getAccessGroups(acmUrl),
+    ]);
+    accessLevelItems.value = doorLevels.data ?? [];
+    liftAccessLevelItems.value = liftLevels.data ?? [];
+    accessGroupItems.value = groups.data ?? [];
+  } catch (error) {
+    console.error("Failed to fetch access management data:", error);
+  }
+});
+
 function limitCardNumber() {
   if (card.value.cardNumber && card.value.cardNumber.toString().length > cardNoMaxLength.value) {
     card.value.cardNumber = card.value.cardNumber.toString().slice(0, cardNoMaxLength.value);
@@ -543,23 +575,79 @@ function cancel() {
   emit("cancel");
 }
 
+function buildPhysicalCardPayload() {
+  const now = new Date().toISOString();
+  const doorItem = accessLevelItems.value.find((i: any) => i.no === card.value.door);
+  const liftItem = liftAccessLevelItems.value.find((i: any) => i.no === card.value.liftAccessLevel);
+
+  return {
+    site: siteId,
+    cardNo: card.value.cardNumber,
+    isActivated: card.value.isActivate,
+    isAntiPassBack: card.value.isAntiPassBack,
+    isLiftCard: card.value.useAsLiftCard,
+    userType: "Visitor/Resident",
+    accessLevel: card.value.door,
+    accessGroup: card.value.accessGroup,
+    accessType: card.value.cardType,
+    startDate: card.value.startDate,
+    endDate: card.value.endDate,
+    doorName: doorItem?.name ?? "",
+    createdAt: now,
+    updatedAt: now,
+    ...(card.value.pinNo ? { pin: card.value.pinNo } : {}),
+    ...(card.value.useAsLiftCard
+      ? {
+          liftAccessLevel: card.value.liftAccessLevel,
+          liftName: liftItem?.name ?? "",
+        }
+      : {}),
+    ...(card.value.assignUnit ? { unit: [card.value.assignUnit] } : {}),
+    ...(card.value.isWinsland !== undefined ? { isWinsland: card.value.isWinsland } : {}),
+  };
+}
+
+function buildNonPhysicalCardPayload() {
+  const now = new Date().toISOString();
+  const doorItem = accessLevelItems.value.find((i: any) => i.no === card.value.door);
+  const liftItem = liftAccessLevelItems.value.find((i: any) => i.no === card.value.liftAccessLevel);
+
+  return {
+    site: siteId,
+    quantity: card.value.quantity,
+    accessLevel: card.value.door,
+    isLiftCard: card.value.useAsLiftCard,
+    accessGroup: card.value.accessGroup,
+    userType: "Visitor/Resident",
+    doorName: doorItem?.name ?? "",
+    startDate: card.value.startDate,
+    endDate: card.value.endDate,
+    createdAt: now,
+    updatedAt: now,
+    ...(card.value.useAsLiftCard
+      ? {
+          liftAccessLevel: card.value.liftAccessLevel,
+          liftName: liftItem?.name ?? "",
+        }
+      : {}),
+    ...(card.value.assignUnit ? { unit: [card.value.assignUnit] } : {}),
+    ...(card.value.isWinsland !== undefined ? { isWinsland: card.value.isWinsland } : {}),
+  };
+}
+
 async function submit() {
   disable.value = true;
   try {
     if (prop.mode === "add") {
-      const payload = {
-        ...card.value,
-        site: siteId,
-        org: orgId,
-      };
-      await _addCard(payload);
+      if (isNonPhysicalCard.value) {
+        await _addNonPhysicalCard(buildNonPhysicalCardPayload());
+      } else {
+        await _addPhysicalCard(buildPhysicalCardPayload());
+      }
     }
 
     if (prop.mode === "edit") {
-      const payload = {
-        ...card.value,
-      };
-      await _updateCardById(prop.card._id ?? "", payload);
+      await _updateCardById(prop.card._id ?? "", { ...card.value });
     }
     emit("success");
   } catch (error: any) {

package/components/AccessManagement.vue

@@ -80,7 +80,7 @@
         mode="edit"
         @cancel="editDialog = false"
         @success="successUpdate()"
-        :card="selectedCard"
+        :card="selectedCard as TCard"
       />
     </v-dialog>
 
@@ -90,21 +90,93 @@
         <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>Card:</strong> {{ selectedCard?.cardNumber ?? "N/A" }}
+              <strong>Unit:</strong> {{ selectedCard?.name ?? "N/A" }}
             </v-col>
             <v-col cols="12">
-              <strong>Access Type:</strong>
-              {{ selectedCard?.accessCardType ?? "N/A" }}
+              <strong>Block:</strong> {{ selectedCard?.block?.name ?? "N/A" }}
             </v-col>
             <v-col cols="12">
-              <strong>Unit:</strong>
-              {{ selectedCard?.unit || "N/A" }}
+              <strong>Level:</strong> {{ selectedCard?.level?.level ?? "N/A" }}
             </v-col>
-            <v-col cols="12">
-              <strong>Assign:</strong> {{ selectedCard?.assign || "N/A" }}
+
+            <!-- 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>
-            <v-col cols="12">
-              <strong>Status:</strong> {{ selectedCard?.status ?? "N/A" }}
+
+            <!-- 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
         >
@@ -238,18 +310,38 @@ const props = defineProps({
     type: Array as PropType<Array<Record<string, any>>>,
     default: () => [
       {
-        title: "Card",
-        value: "cardNumber",
+        title: "Unit",
+        value: "name",
+      },
+      {
+        title: "Block",
+        value: "block.name",
       },
       {
-        title: "Unit",
-        value: "unit",
+        title: "Level",
+        value: "level.level",
       },
       {
-        title: "Assign",
-        value: "assign",
+        title: "Avail. (P)",
+        value: "cardCounts.available.physical",
       },
-      { title: "Action", value: "action-table" },
+      {
+        title: "Avail. (NP)",
+        value: "cardCounts.available.non_physical",
+      },
+      {
+        title: "Asgn. (P)",
+        value: "cardCounts.assigned.physical",
+      },
+      {
+        title: "Asgn. (NP)",
+        value: "cardCounts.assigned.non_physical",
+      },
+      {
+        title: "Total",
+        value: "totalCardCount",
+      },
+      // { title: "Action", value: "action-table" },
     ],
   },
   canCreate: {
@@ -300,32 +392,21 @@ const confirmDialog = ref(false);
 const searchText = ref("");
 const replaceDialog = ref(false);
 
-const selectedCard = ref<TCard>({
-  _id: "",
-  name: "",
-  accessCardType: "",
-  // visitorType: "",
-  type: "",
-  cardNumber: "",
-  startDate: "",
-  endDate: "",
-  door: "",
-  accessGroup: [],
-  cardType: "",
-  pinNo: "",
-  useAsLiftCard: false,
-  liftAccessLevel: "",
-  isActivate: true,
-  isAntiPassBack: false,
-  status: "",
-  org: "",
-  site: "",
-  unit: "",
-  assign: "",
-});
+const route = useRoute();
+// const siteId = computed(() => route.params.site as string); @TODO
+const siteId = computed(() => '66ab2f1381856008f1887971' as string);
+const orgId = computed(() => route.params.org as string);
+
+const selectedCard = ref<Record<string, any>>({});
+const selectedCardInUnit = ref<Record<string, any> | null>(null);
 const selectedCardId = ref<string | null>(null);
 
-const { getAll: _getAllCards, deleteById: _deleteCard } = useCard();
+watch(previewDialog, (val) => {
+  if (!val) selectedCardInUnit.value = null;
+});
+
+const { deleteById: _deleteCard } = useCard();
+const { getUserTypeAccessCards } = useAccessManagement();
 
 const {
   data: getCardReq,
@@ -334,10 +415,12 @@ const {
 } = useLazyAsyncData(
   "get-all-cards",
   () =>
-    _getAllCards({
+    getUserTypeAccessCards({
       page: page.value,
       search: searchText.value,
-      // search: headerSearch.value,
+      organization: orgId.value,
+      site: siteId.value,
+      userType: "Visitor/Resident",
     }),
   {
     watch: [page, searchText],
@@ -347,10 +430,10 @@ const {
 const loading = computed(() => getAllReqStatus.value === "pending");
 
 watchEffect(() => {
-  if (getCardReq.value) {
-    items.value = getCardReq.value.items;
-    pages.value = getCardReq.value.pages;
-    pageRange.value = getCardReq.value.pageRange;
+  if (getCardReq.value?.data) {
+    items.value = getCardReq.value.data.items;
+    pages.value = getCardReq.value.data.pages;
+    pageRange.value = getCardReq.value.data.pageRange;
   }
 });
 

package/components/AddSupplyForm.vue

@@ -0,0 +1,165 @@
+<template>
+  <v-dialog v-model="showDialog" max-width="450">
+    <v-card>
+      <v-toolbar>
+        <v-row no-gutters class="fill-height px-6" align="center">
+          <span class="font-weight-bold text-h6 text-capitalize">
+            {{ prop.mode === "edit" ? "Edit Supply" : "Add New Supply" }}
+          </span>
+        </v-row>
+      </v-toolbar>
+
+      <v-card-text class="pa-4">
+        <v-form ref="formRef" v-model="valid">
+          <v-row no-gutters class="pa-0">
+            <v-col cols="12" class="pa-0 mb-2">
+              <InputLabel for="name" title="Name" required class="mb-1" />
+              <v-text-field
+                v-model="nameModel"
+                :rules="[requiredRule]"
+                density="comfortable"
+                variant="outlined"
+                placeholder="Enter supply name"
+                hide-details="auto"
+                class="mb-0"
+              />
+            </v-col>
+
+            <v-col cols="12" class="pa-0 mb-0">
+              <InputLabel
+                for="unitOfMeasurement"
+                title="Unit of Measurement"
+                required
+                class="mb-1"
+              />
+              <v-select
+                v-model="unitOfMeasurementModel"
+                :items="unitOfMeasurementOptions"
+                :rules="[requiredRule]"
+                density="comfortable"
+                variant="outlined"
+                placeholder="Select unitOfMeasurement"
+                hide-details="auto"
+                class="mb-0"
+              />
+            </v-col>
+          </v-row>
+        </v-form>
+      </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="close"
+              height="48"
+            >
+              Cancel
+            </v-btn>
+          </v-col>
+
+          <v-col cols="6" class="pa-0">
+            <v-btn
+              block
+              variant="flat"
+              color="black"
+              class="text-none font-weight-bold rounded-0"
+              height="48"
+              :loading="submitting"
+              @click="submit"
+            >
+              {{ prop.mode === "edit" ? "Save" : "Create" }}
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-toolbar>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+const nameModel = defineModel("name", { type: String, default: "" });
+const unitOfMeasurementModel = defineModel("unitOfMeasurement", {
+  type: String,
+  default: "",
+});
+const showDialog = defineModel({ type: Boolean, default: false });
+
+const prop = defineProps({
+  mode: {
+    type: String,
+    default: "add",
+  },
+  supplyData: {
+    type: Object,
+    default: null,
+  },
+});
+
+const emit = defineEmits(["saved", "close"]);
+
+const formRef = ref<any>(null);
+const valid = ref(false);
+const submitting = ref(false);
+
+const { requiredRule } = useUtils();
+
+const unitOfMeasurementOptions = [
+  "Pieces",
+  "Boxes",
+  "Bottles",
+  "Liters",
+  "Kilograms",
+  "Grams",
+  "Rolls",
+  "Packs",
+  "Sets",
+  "Units",
+];
+
+watchEffect(() => {
+  nameModel.value = prop.supplyData?.name || "";
+  unitOfMeasurementModel.value = prop.supplyData?.unitOfMeasurement || "";
+});
+
+function close() {
+  showDialog.value = false;
+  emit("close");
+}
+
+async function submit() {
+  const form = formRef.value as any;
+  let ok = valid.value;
+  if (form && typeof form.validate === "function") {
+    const result = await form.validate();
+    ok = result.valid;
+  }
+
+  if (!ok) return;
+
+  submitting.value = true;
+  try {
+    await new Promise((r) => setTimeout(r, 500));
+
+    emit("saved", {
+      name: nameModel.value,
+
+      unitOfMeasurement: unitOfMeasurementModel.value,
+    });
+
+    nameModel.value = "";
+    unitOfMeasurementModel.value = "";
+
+    showDialog.value = false;
+    emit("close");
+  } catch (e) {
+    console.error("Error submitting form:", e);
+  } finally {
+    submitting.value = false;
+  }
+}
+</script>