@7365admin1/layer-common 1.10.1 → 1.10.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 1.10.2
+
+### Patch Changes
+
+- 451e46f: Move Bulletin Board Components
+
 ## 1.10.1
 
 ### Patch Changes

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
@@ -298,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"
           >
@@ -335,15 +443,38 @@ const {
   getAccessGroups: _getAccessGroups,
   addPhysicalCard: _addPhysicalCard,
   addNonPhysicalCard: _addNonPhysicalCard,
+  bulkPhysicalAccessCard: _bulkPhysicalAccessCard,
 } = useAccessManagement();
+const { getBySiteId: _getEntryPassSettings } = useSiteEntryPassSettings();
+const { getFileUrl } = useFile();
 
 const config = useRuntimeConfig();
-const emit = defineEmits(["cancel", "success"]);
+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 {
@@ -443,10 +574,30 @@ const buildingsData = ref<Record<string, any>[]>([]);
 const encryptedAcmUrl = ref("");
 
 const route = useRoute();
-const siteId = '66ab2f1381856008f1887971' as string;
-// const siteId = route.params.site as string; @TODO
+// 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 }>(
@@ -463,6 +614,7 @@ onMounted(async () => {
     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.");
   }
 });
 
@@ -635,9 +787,33 @@ function buildNonPhysicalCardPayload() {
   };
 }
 
+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") {
       if (isNonPhysicalCard.value) {
         await _addNonPhysicalCard(buildNonPhysicalCardPayload());
@@ -651,7 +827,8 @@ async function submit() {
     }
     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;
   }