@7365admin1/layer-common 1.10.1 → 1.10.2

package/components/AccessManagement.vue

@@ -2,16 +2,28 @@
   <v-row no-gutters>
     <v-col cols="12" class="mb-2">
       <v-row no-gutters align="center" justify="space-between">
-        <v-btn
-          class="text-none"
-          rounded="pill"
-          variant="tonal"
-          size="large"
-          @click="setCard()"
-          v-if="canCreate && canCreateAccessCard"
-        >
-          Add Access Card
-        </v-btn>
+        <v-row no-gutters class="ga-2">
+          <v-btn
+            class="text-none"
+            rounded="pill"
+            variant="tonal"
+            size="large"
+            @click="setCard()"
+            v-if="canCreate && canCreateAccessCard"
+          >
+            Add Access Card
+          </v-btn>
+          <v-btn
+            class="text-none"
+            rounded="pill"
+            variant="tonal"
+            size="large"
+            @click="assignDialog = true"
+            v-if="canCreate && canAssignAccessCard"
+          >
+            Assign to Unit
+          </v-btn>
+        </v-row>
 
         <v-text-field
           v-model="searchText"
@@ -25,6 +37,11 @@
         />
       </v-row>
     </v-col>
+    <!-- Available Card Stats -->
+    <v-col cols="12" class="mb-2">
+      <AccessCardAvailableStats ref="statsRef" :site-id="siteId" />
+    </v-col>
+
     <v-col cols="12">
       <v-card
         width="100%"
@@ -71,16 +88,17 @@
       <AccessCardAddForm
         @cancel="createDialog = false"
         @success="successCreate()"
+        @error="(msg) => showMessage(msg, 'error')"
       />
     </v-dialog>
 
-    <!-- Edit Dialog -->
-    <v-dialog v-model="editDialog" width="650" persistent>
-      <AccessCardAddForm
-        mode="edit"
-        @cancel="editDialog = false"
-        @success="successUpdate()"
-        :card="selectedCard as TCard"
+    <!-- Assign to Unit Dialog -->
+    <v-dialog v-model="assignDialog" width="650" persistent>
+      <AccessCardAssignToUnitForm
+        :site-id="siteId"
+        @cancel="assignDialog = false"
+        @success="successAssign()"
+        @error="(msg: any) => showMessage(msg, 'error')"
       />
     </v-dialog>
 
@@ -102,16 +120,26 @@
             <!-- Available Physical -->
             <v-col cols="12" class="mt-3">
               <strong>Available Physical</strong>
-              <div v-if="selectedCard?.available?.physical?.length" class="mt-1">
+              <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'"
+                  :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"
+                  @click="
+                    selectedCardInUnit =
+                      selectedCardInUnit?._id === card._id ? null : card
+                  "
                 >
                   {{ card.cardNo }}
                 </v-chip>
@@ -122,16 +150,26 @@
             <!-- 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">
+              <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'"
+                  :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"
+                  @click="
+                    selectedCardInUnit =
+                      selectedCardInUnit?._id === card._id ? null : card
+                  "
                 >
                   {{ card.cardNo }}
                 </v-chip>
@@ -148,10 +186,17 @@
                   :key="card._id"
                   size="small"
                   class="mr-1 mb-1"
-                  :color="selectedCardInUnit?._id === card._id ? 'primary' : undefined"
-                  :variant="selectedCardInUnit?._id === card._id ? 'flat' : 'tonal'"
+                  :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"
+                  @click="
+                    selectedCardInUnit =
+                      selectedCardInUnit?._id === card._id ? null : card
+                  "
                 >
                   {{ card.cardNo }}
                 </v-chip>
@@ -162,16 +207,26 @@
             <!-- 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">
+              <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'"
+                  :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"
+                  @click="
+                    selectedCardInUnit =
+                      selectedCardInUnit?._id === card._id ? null : card
+                  "
                 >
                   {{ card.cardNo }}
                 </v-chip>
@@ -211,14 +266,10 @@
                 </template>
                 <v-list class="pa-0">
                   <v-list-item
-                    @click="openEditDialog()"
-                    v-if="canUpdateAccessCard"
+                    :disabled="selectedCardInUnit === null"
+                    @click="openReplaceDialog()"
+                    v-if="canReplaceAccessCard"
                   >
-                    <v-list-item-title class="text-subtitle-2">
-                      Edit Card
-                    </v-list-item-title>
-                  </v-list-item>
-                  <v-list-item @click="openReplaceDialog()" v-if="canReplaceAccessCard">
                     <v-list-item-title class="text-subtitle-2">
                       Replace Card
                     </v-list-item-title>
@@ -226,6 +277,7 @@
                   <v-list-item
                     @click="openDeleteDialog()"
                     class="text-red"
+                    :disabled="selectedCardInUnit === null"
                     v-if="canDeleteAccessCard"
                   >
                     <v-list-item-title class="text-subtitle-2">
@@ -360,15 +412,15 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
-  canUpdateAccessCard: {
+  canDeleteAccessCard: {
     type: Boolean,
     default: true,
   },
-  canDeleteAccessCard: {
+  canReplaceAccessCard: {
     type: Boolean,
     default: true,
   },
-  canReplaceAccessCard: {
+  canAssignAccessCard: {
     type: Boolean,
     default: true,
   },
@@ -385,7 +437,7 @@ const messageColor = ref("");
 
 const items = ref<Array<Record<string, any>>>([]);
 const createDialog = ref(false);
-const editDialog = ref(false);
+const assignDialog = ref(false);
 const previewDialog = ref(false);
 const deleteLoading = ref(false);
 const confirmDialog = ref(false);
@@ -393,8 +445,9 @@ const searchText = ref("");
 const replaceDialog = ref(false);
 
 const route = useRoute();
-// const siteId = computed(() => route.params.site as string); @TODO
-const siteId = computed(() => '66ab2f1381856008f1887971' as string);
+//@TODO
+const siteId = computed(() => route.params.site as string);
+// const siteId = computed(() => "66ab2f1381856008f1887971" as string);
 const orgId = computed(() => route.params.org as string);
 
 const selectedCard = ref<Record<string, any>>({});
@@ -408,6 +461,8 @@ watch(previewDialog, (val) => {
 const { deleteById: _deleteCard } = useCard();
 const { getUserTypeAccessCards } = useAccessManagement();
 
+const statsRef = ref<{ refresh: () => void } | null>(null);
+
 const {
   data: getCardReq,
   refresh: getCards,
@@ -440,9 +495,6 @@ watchEffect(() => {
 function setCard({ mode = "create", dialog = true, data = {} as TCard } = {}) {
   if (mode === "create") {
     createDialog.value = dialog;
-  } else if (mode === "edit") {
-    editDialog.value = dialog;
-    selectedCard.value = data;
   } else if (mode === "preview") {
     previewDialog.value = dialog;
     selectedCard.value = data;
@@ -452,14 +504,15 @@ function setCard({ mode = "create", dialog = true, data = {} as TCard } = {}) {
 function successCreate() {
   createDialog.value = false;
   getCards();
+  statsRef.value?.refresh();
   showMessage("Card created successfully!", "success");
 }
 
-function successUpdate() {
-  editDialog.value = false;
-  previewDialog.value = false;
+function successAssign() {
+  assignDialog.value = false;
   getCards();
-  showMessage("Card updated successfully!", "success");
+  statsRef.value?.refresh();
+  showMessage("Access card assigned successfully!", "success");
 }
 
 function showMessage(msg: string, color: string) {
@@ -473,10 +526,6 @@ function tableRowClickHandler(_: any, data: any) {
   previewDialog.value = true;
 }
 
-function openEditDialog() {
-  editDialog.value = true;
-}
-
 function openDeleteDialog() {
   confirmDialog.value = true;
   message.value = "";
@@ -491,6 +540,7 @@ async function handleDeleteCard() {
   try {
     await _deleteCard(selectedCard.value._id ?? "");
     await getCards();
+    statsRef.value?.refresh();
     selectedCardId.value = null;
     confirmDialog.value = false;
     previewDialog.value = false;

package/components/AreaMain.vue

@@ -330,7 +330,7 @@
               color="black"
               class="text-none font-weight-bold rounded-0"
               height="48"
-              :loading="submitting"
+              :loading="qrLoading"
               @click="onDownloadQrCode"
             >
               Download
@@ -357,6 +357,7 @@ import QrcodeVue from "qrcode.vue";
 import useAreas from "../composables/useAreas";
 import useUnits from "../composables/useUnits";
 import { useAreaPermission } from "../composables/useAreaPermission";
+import useSiteSettings from "../composables/useSiteSettings";
 
 const props = defineProps({
   orgId: { type: String, default: "" },
@@ -436,6 +437,8 @@ const {
   exportAreas,
 } = useAreas();
 
+const { getSiteById } = useSiteSettings();
+
 const { getUnits } = useUnits();
 
 const searchInput = ref("");
@@ -515,6 +518,24 @@ const qrPath = ref("");
 const qrLoading = ref(false);
 const qrError = ref("");
 
+watch(
+  () => props.site,
+  async (val) => {
+    if (!val) {
+      siteName.value = "";
+      return;
+    }
+
+    try {
+      const siteResp = await getSiteById(val);
+      siteName.value = (siteResp && (siteResp.name || siteResp.title)) || val;
+    } catch (err) {
+      siteName.value = val;
+    }
+  },
+  { immediate: true }
+);
+
 function showMessage(msg: string, color: string = "error") {
   message.value = msg;
   messageColor.value = color;
@@ -533,7 +554,6 @@ async function handleDownloadExcel() {
   try {
     isDownloading.value = true;
 
-    // Validate site id (must be a 24-char hex ObjectId)
     if (!props.site || !/^[0-9a-fA-F]{24}$/.test(props.site)) {
       showMessage("Invalid site id for export.", "error");
       return;
@@ -776,7 +796,9 @@ async function onDownloadQrCode() {
 
   const areaName = selectedItem.value?.name || "toilet-location";
   const filename = `qr-${areaName.toLowerCase().replace(/\s+/g, "-")}`;
-  const title = "Seven365 Pte Ltd";
+  const siteDisplay = siteName.value || props.site || "";
+  const title = siteDisplay;
+  const subtitle = selectedItem.value?.name || "";
 
   try {
     qrLoading.value = true;
@@ -788,7 +810,7 @@ async function onDownloadQrCode() {
       qrPath.value
     )}&filename=${encodeURIComponent(filename)}&title=${encodeURIComponent(
       title
-    )}&download=true`;
+    )}&subtitle=${encodeURIComponent(subtitle)}&download=true`;
 
     const response = await fetch(downloadUrl);