@7365admin1/layer-common 1.10.0 → 1.10.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @iservice365/layer-common
 
+## 1.10.2
+
+### Patch Changes
+
+- 451e46f: Move Bulletin Board Components
+
+## 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/AccessCard/AvailableStats.vue

@@ -0,0 +1,55 @@
+<template>
+  <v-row no-gutters align="center" style="gap: 8px">
+    <span class="text-caption text-medium-emphasis mr-1">Available:</span>
+    <v-chip
+      size="small"
+      variant="tonal"
+      color="primary"
+      prepend-icon="mdi-card-account-details"
+      :loading="loading"
+    >
+      NFC: <strong class="ml-1">{{ availablePhysical }}</strong>
+    </v-chip>
+    <v-chip
+      size="small"
+      variant="tonal"
+      color="secondary"
+      prepend-icon="mdi-qrcode"
+      :loading="loading"
+    >
+      QR Code: <strong class="ml-1">{{ availableNonPhysical }}</strong>
+    </v-chip>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  siteId: {
+    type: String,
+    required: true,
+  },
+});
+
+const { getAllAccessCardsCounts } = useAccessManagement();
+
+const availablePhysical = ref(0);
+const availableNonPhysical = ref(0);
+const loading = ref(false);
+
+async function refresh() {
+  loading.value = true;
+  try {
+    const res = await getAllAccessCardsCounts({ site: props.siteId, userType: "Visitor/Resident" });
+    availablePhysical.value = res?.data?.available_physical ?? 0;
+    availableNonPhysical.value = res?.data?.available_non_physical ?? 0;
+  } catch (error) {
+    console.error("Failed to fetch available card counts:", error);
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(() => refresh());
+
+defineExpose({ refresh });
+</script>

package/components/AccessCardAddForm.vue

@@ -1,19 +1,127 @@
 <template>
   <v-card width="100%">
     <v-toolbar>
-      <v-row no-gutters class="fill-height px-6" align="center">
+      <v-row no-gutters class="fill-height px-6" align="center" justify="space-between">
         <span class="font-weight-bold text-h5 text-capitalize">
           {{ prop.mode }} Access Card
         </span>
+        <v-btn-toggle
+          v-if="prop.mode === 'add'"
+          v-model="uploadMode"
+          mandatory
+          color="primary"
+          density="compact"
+          rounded="pill"
+          variant="outlined"
+        >
+          <v-btn value="single" size="small" class="text-none px-4">Single</v-btn>
+          <v-btn value="bulk" size="small" class="text-none px-4">Bulk Upload</v-btn>
+        </v-btn-toggle>
       </v-row>
     </v-toolbar>
     <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-0">
-      <v-form v-model="validForm" :disabled="disable">
+      <!-- Bulk Upload Mode -->
+      <template v-if="uploadMode === 'bulk'">
+        <v-row no-gutters class="px-6 pt-4 pb-2">
+          <v-col cols="12" class="px-1 mb-2">
+            <v-progress-linear v-if="templateLoading" indeterminate color="primary" class="mb-2" />
+            <v-alert
+              v-else-if="!entryPassTemplate.id"
+              type="warning"
+              variant="tonal"
+              density="compact"
+              icon="mdi-alert-outline"
+            >
+              No upload template has been configured. Please upload a template in
+              <strong>Entry Pass Settings</strong> before using bulk upload.
+            </v-alert>
+            <template v-else-if="entryPassTemplate.id">
+              <InputLabel
+                class="text-capitalize font-weight-bold"
+                title="Download Template"
+              />
+              <div class="d-flex align-center mt-1">
+                <v-icon size="20" class="mr-2 text-primary">mdi-paperclip</v-icon>
+                <a
+                  href="#"
+                  class="text-primary text-decoration-none text-body-2"
+                  @click.prevent="downloadBulkTemplate"
+                >
+                  {{ entryPassTemplate.name }}
+                </a>
+                <v-btn
+                  icon
+                  density="compact"
+                  variant="text"
+                  size="small"
+                  class="ml-1"
+                  @click.prevent="downloadBulkTemplate"
+                >
+                  <v-icon size="18">mdi-download</v-icon>
+                </v-btn>
+              </div>
+
+              <!-- Column Guide -->
+              <div class="mt-3">
+                <p class="text-caption font-weight-bold text-grey-darken-2 mb-1 text-uppercase">
+                  Template Column Guide
+                </p>
+                <v-table density="compact" class="text-caption rounded border">
+                  <thead>
+                    <tr class="bg-grey-lighten-4">
+                      <th class="text-left text-caption font-weight-bold py-1 px-2">Column</th>
+                      <th class="text-left text-caption font-weight-bold py-1 px-2">Format / Accepted Values</th>
+                      <th class="text-left text-caption font-weight-bold py-1 px-2">Example</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr v-for="col in templateColumnGuide" :key="col.name">
+                      <td class="py-1 px-2 font-weight-medium" style="white-space: nowrap">{{ col.name }}</td>
+                      <td class="py-1 px-2 text-grey-darken-1">{{ col.format }}</td>
+                      <td class="py-1 px-2 text-grey-darken-2">{{ col.example }}</td>
+                    </tr>
+                  </tbody>
+                </v-table>
+              </div>
+            </template>
+          </v-col>
+          <v-col cols="12" class="px-1 mt-2">
+            <InputLabel
+              class="text-capitalize font-weight-bold"
+              title="Upload File"
+              required
+            />
+            <v-file-input
+              v-model="bulkFile"
+              density="compact"
+              hide-details="auto"
+              accept=".xlsx,.xls,.csv"
+              placeholder="Select file to upload..."
+              prepend-icon=""
+              prepend-inner-icon="mdi-tray-arrow-up"
+              :rules="[requiredRule]"
+              :disabled="!entryPassTemplate.id || templateLoading"
+            />
+            <v-alert
+              v-if="!templateLoading && !entryPassTemplate.id"
+              type="info"
+              variant="text"
+              density="compact"
+              class="mt-1 px-0"
+            >
+              Upload is disabled until a template is configured.
+            </v-alert>
+          </v-col>
+        </v-row>
+      </template>
+
+      <!-- Single Add Mode -->
+      <v-form v-if="uploadMode === 'single'" v-model="validForm" :disabled="disable">
         <v-row no-gutters class="px-6 pt-4">
           <v-col cols="12" class="px-1">
             <InputLabel
               class="text-capitalize font-weight-bold"
-              title="Types of Access Card"
+              title="Type of Access Card"
               required
             />
             <v-select
@@ -91,7 +199,7 @@
             <v-col cols="12">
               <InputLabel
                 class="text-capitalize font-weight-bold"
-                title="Doors Location"
+                title="Door Location"
                 required
               />
               <v-select
@@ -115,6 +223,8 @@
                 v-model="card.accessGroup"
                 density="compact"
                 :items="accessGroupItems"
+                item-title="name"
+                item-value="no"
                 hide-details
                 :rules="[requiredRule]"
                 multiple
@@ -179,7 +289,7 @@
                 hide-details
                 :rules="card.useAsLiftCard ? [requiredRule] : []"
                 item-title="name"
-                item-value="value"
+                item-value="no"
               />
             </v-col>
             <v-col cols="12">
@@ -296,7 +406,7 @@
             color="black"
             class="text-none"
             size="48"
-            :disabled="!validForm || disable"
+            :disabled="(uploadMode === 'single' ? !validForm : !bulkFile || !entryPassTemplate.id || templateLoading) || disable"
             @click="submit"
             :loading="disable"
           >
@@ -327,12 +437,44 @@ const prop = defineProps({
 const { add: _addCard, updateById: _updateCardById } = useCard();
 const { getAll: _getBuildings } = useBuilding();
 const { getAllUnits: _getUnits } = useBuildingUnit();
-const emit = defineEmits(["cancel", "success"]);
+const {
+  getDoorAccessLevels: _getDoorAccessLevels,
+  getLiftAccessLevels: _getLiftAccessLevels,
+  getAccessGroups: _getAccessGroups,
+  addPhysicalCard: _addPhysicalCard,
+  addNonPhysicalCard: _addNonPhysicalCard,
+  bulkPhysicalAccessCard: _bulkPhysicalAccessCard,
+} = useAccessManagement();
+const { getBySiteId: _getEntryPassSettings } = useSiteEntryPassSettings();
+const { getFileUrl } = useFile();
+
+const config = useRuntimeConfig();
+const emit = defineEmits(["cancel", "success", "error"]);
 
 const validForm = ref(false);
 const disable = ref(false);
 const message = ref("");
 
+// Bulk upload mode state
+const uploadMode = ref<"single" | "bulk">("single");
+const bulkFile = ref<File | null>(null);
+const entryPassTemplate = ref<{ id: string; name: string }>({ id: "", name: "" });
+
+const templateColumnGuide = [
+  { name: "startDate",       format: "MM/DD/YYYY",                                              example: "02/26/2026" },
+  { name: "endDate",         format: "MM/DD/YYYY",                                              example: "02/26/2036" },
+  { name: "cardNo",          format: "Number 0 – 65535",                                        example: "301" },
+  { name: "facilityCode",   format: "Number 0 – 255",                                          example: "11" },
+  { name: "pin",             format: "6-digit number",                                          example: "123456" },
+  { name: "accessLevel",     format: "Number (access level ID)",                               example: "1" },
+  { name: "userType",        format: "Contractor | Visitor | Resident/Tenant | Visitor/Resident", example: "Visitor/Resident" },
+  { name: "accessGroup",     format: "Group name (e.g. Full Access, No Access)",               example: "Full Access" },
+  { name: "isLiftCard",      format: "TRUE or FALSE",                                          example: "FALSE" },
+  { name: "liftAccessLevel", format: "Number (lift level ID) — required if isLiftCard is TRUE", example: "1" },
+  { name: "Door Name",       format: "Name of the door",                                       example: "Main Door" },
+  { name: "Lift Name",       format: "Name of the lift — required if isLiftCard is TRUE",      example: "Main Lift" },
+];
+
 const { requiredRule } = useUtils();
 
 function formatDate(date: Date): string {
@@ -429,11 +571,53 @@ 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;
+//@TODO
+const siteId = route.params.site as string; 
 const orgId = route.params.org as string;
 
+const templateLoading = ref(false);
+
+async function fetchEntryPassTemplate() {
+  templateLoading.value = true;
+  try {
+    const settingsData: any = await _getEntryPassSettings(siteId);
+    const template = settingsData?.data?.settings?.template;
+    entryPassTemplate.value = template?.id ? template : { id: "", name: "" };
+  } catch {
+    entryPassTemplate.value = { id: "", name: "" };
+  } finally {
+    templateLoading.value = false;
+  }
+}
+
+watch(uploadMode, (mode) => {
+  if (mode === "bulk") fetchEntryPassTemplate();
+});
+
+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);
+    emit("error", "EntryPass server is unavailable. Please contact your administrator.");
+  }
+});
+
 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,27 +727,108 @@ 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 downloadBulkTemplate() {
+  const { id, name } = entryPassTemplate.value;
+  try {
+    const response = await fetch(getFileUrl(id));
+    const blob = await response.blob();
+    const blobUrl = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = blobUrl;
+    link.download = name || "access-card-template";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(blobUrl);
+  } catch {
+    console.error("Failed to download template");
+  }
+}
+
 async function submit() {
   disable.value = true;
   try {
+    if (uploadMode.value === "bulk") {
+      await _bulkPhysicalAccessCard({ site: siteId, file: bulkFile.value! });
+      emit("success");
+      return;
+    }
+
     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) {
-    message.value = error.response?._data?.message || "Failed to create card";
+    const msg = error.response?._data?.message || error?.data?.message || "An error occurred. Please try again.";
+    emit("error", msg);
   } finally {
     disable.value = false;
   }