@7365admin1/layer-common 1.10.5 → 1.10.7

package/components/EntryPassInformation.vue

@@ -0,0 +1,215 @@
+<template>
+  <div>
+    <v-skeleton-loader v-if="loading" type="list-item-two-line" width="100%" />
+    <template v-else>
+      <v-divider class="mb-4" />
+      <InputLabel title="Pass Type (Optional)" />
+      <v-row no-gutters class="ga-3 mt-1">
+        <v-col>
+          <v-card
+            :variant="passType === 'QR' ? 'tonal' : 'outlined'"
+            :color="passType === 'QR' ? 'primary' : undefined"
+            class="pa-3 d-flex flex-column align-center ga-2 cursor-pointer position-relative"
+            rounded="lg"
+            @click="passType = passType === 'QR' ? null : 'QR'"
+          >
+            <v-icon v-if="passType === 'QR'" size="18" color="primary" class="selected-check">mdi-check-circle</v-icon>
+            <v-icon size="32">mdi-qrcode</v-icon>
+            <span class="text-subtitle-2 font-weight-bold">QR Pass</span>
+          </v-card>
+        </v-col>
+        <v-col v-if="nfcEnabled">
+          <v-card
+            :variant="passType === 'NFC' ? 'tonal' : 'outlined'"
+            :color="passType === 'NFC' ? 'primary' : undefined"
+            class="pa-3 d-flex flex-column align-center ga-2 cursor-pointer position-relative"
+            rounded="lg"
+            @click="passType = passType === 'NFC' ? null : 'NFC'"
+          >
+            <v-icon v-if="passType === 'NFC'" size="18" color="primary" class="selected-check">mdi-check-circle</v-icon>
+            <v-icon size="32">mdi-nfc</v-icon>
+            <span class="text-subtitle-2 font-weight-bold">NFC</span>
+          </v-card>
+        </v-col>
+      </v-row>
+
+      <!-- QR Pass section -->
+      <template v-if="passType === 'QR'">
+        <v-alert
+          v-if="!hasPrinter"
+          type="warning"
+          variant="tonal"
+          density="compact"
+          class="mt-3"
+          icon="mdi-printer-alert"
+        >
+          No printer is configured in the settings. QR Pass may not print.
+        </v-alert>
+        <template v-else>
+          <InputLabel title="Quantity" class="mt-3" />
+          <v-text-field
+            v-model.number="quantity"
+            type="number"
+            density="comfortable"
+            :min="1"
+            hide-details
+          />
+        </template>
+      </template>
+
+      <!-- NFC Pass section -->
+      <template v-if="passType === 'NFC'">
+        <div class="mt-3">
+          <InputLabel title="Select Cards" />
+          <v-select
+            v-model="selectedCards"
+            :items="cards"
+            :loading="cardsLoading"
+            item-title="name"
+            item-value="_id"
+            density="comfortable"
+            multiple
+            chips
+            closable-chips
+            hide-details
+            placeholder="Select cards..."
+          >
+            <template #item="{ props: itemProps, item }">
+              <v-list-item v-bind="itemProps">
+                <template #subtitle>
+                  <span class="text-caption text-grey">{{ item.raw.cardNumber }}</span>
+                </template>
+              </v-list-item>
+            </template>
+          </v-select>
+        </div>
+
+        <div class="mt-3">
+          <InputLabel title="Quantity" />
+          <v-text-field
+            :model-value="selectedCards.length"
+            type="number"
+            density="comfortable"
+            disabled
+            hide-details
+          />
+        </div>
+
+        <v-row no-gutters class="ga-3 mt-3">
+          <v-col>
+            <v-btn
+              variant="outlined"
+              color="primary"
+              block
+              prepend-icon="mdi-barcode-scan"
+              @click="emit('scan:barcode')"
+            >
+              Scan Via BarCode
+            </v-btn>
+          </v-col>
+          <v-col>
+            <v-btn
+              variant="outlined"
+              color="primary"
+              block
+              prepend-icon="mdi-camera"
+              @click="emit('scan:camera')"
+            >
+              Scan with Camera
+            </v-btn>
+          </v-col>
+        </v-row>
+      </template>
+    </template>
+    <v-divider class="mt-6" />
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  settings: {
+    type: Object as PropType<Record<string, any> | null>,
+    default: null,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  modelValue: {
+    type: String as PropType<string | null>,
+    default: null,
+  },
+  quantity: {
+    type: Number as PropType<number | null>,
+    default: null,
+  },
+  cards: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(["update:modelValue", "update:quantity", "update:cards", "scan:barcode", "scan:camera"]);
+
+const { getAll: getAllCards } = useCard();
+
+const nfcEnabled = computed(
+  () => props.settings?.data?.settings?.nfcPass ?? false
+);
+
+const printer = computed(
+  () => props.settings?.data?.settings?.printer ?? { vendorId: null, productId: null }
+);
+
+const hasPrinter = computed(
+  () => !!printer.value.vendorId && !!printer.value.productId
+);
+
+const passType = computed({
+  get: () => props.modelValue,
+  set: (val) => emit("update:modelValue", val),
+});
+
+const quantity = computed({
+  get: () => props.quantity,
+  set: (val) => emit("update:quantity", val),
+});
+
+const selectedCards = computed({
+  get: () => props.cards,
+  set: (val) => {
+    emit("update:cards", val);
+    emit("update:quantity", val.length || null);
+  },
+});
+
+const cardItems = ref<TCard[]>([]);
+const cardsLoading = ref(false);
+
+const cards = computed(() => cardItems.value);
+
+async function fetchCards() {
+  cardsLoading.value = true;
+  try {
+    const res = await getAllCards({ assignFilter: "available", limit: 100 });
+    cardItems.value = res?.data ?? [];
+  } finally {
+    cardsLoading.value = false;
+  }
+}
+
+watch(
+  () => passType.value,
+  (val) => {
+    if (val === "NFC") fetchCards();
+  }
+);
+</script>
+
+<style scoped>
+.selected-check {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+}
+</style>

package/components/Input/InputPhoneNumberV2.vue

@@ -13,6 +13,7 @@
         style="max-width: 95px"
         :rules="[...props.rules]"
         :readonly="props.readOnly"
+        :disabled="props.disabled"
         @update:model-value="handleUpdateCountry"
       >
         <template v-slot:item="{ props: itemProps, item }">
@@ -40,6 +41,7 @@
         :prefix="phonePrefix || ''"
         persistent-placeholder
         :density="density"
+        :disabled="props.disabled"
         :placeholder="placeholder || currentMask"
       />
     </v-col>
@@ -64,6 +66,7 @@ const props = defineProps({
   hideDetails: { type: Boolean, default: false },
   loading: { type: Boolean, default: false },
   readOnly: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -138,6 +141,14 @@ watch(input, (newInput) => {
   else phone.value = prefix + newInput
 })
 
+watch(
+  () => props.modelValue,
+  (val) => {
+    phone.value = val || ''
+  },
+  { immediate: true }
+)
+
 
 watch(phone, (newVal) => {
   const prefix = phonePrefix.value

package/components/ManageChecklistMain.vue

@@ -8,6 +8,13 @@
             Back
           </v-btn>
         </v-col>
+        <v-spacer />
+        <v-col v-if="isScheduleClosed" cols="auto" class="d-flex align-center">
+          <v-chip color="error" variant="tonal" class="text-capitalize">
+            <v-icon start>mdi-lock</v-icon>
+            Closed – View Only
+          </v-chip>
+        </v-col>
       </v-row>
       <TableHygiene
         ref="tableHygieneRef"
@@ -22,8 +29,8 @@
         :loading="loading"
         :no-data-text="`No checklist found`"
         :show-header="true"
-        :can-manage-schedule-tasks="canManageScheduleTasks"
-        :can-add-remarks="canAddRemarks"
+        :can-manage-schedule-tasks="!isScheduleClosed && canManageScheduleTasks"
+        :can-add-remarks="!isScheduleClosed && canAddRemarks"
         @refresh="getUnitCleanerChecklistRefresh"
         @update:selected="selectedItems = $event"
         @action-click="handleActionClick"
@@ -113,6 +120,9 @@ const { back } = useUtils();
 const { canAddRemarks, canManageScheduleTasks } =
   useCleaningSchedulePermission();
 
+const selectedScheduleStatus = useState<string>('selectedScheduleStatus', () => '')
+const isScheduleClosed = computed(() => selectedScheduleStatus.value.toLowerCase() === 'closed')
+
 const page = ref<number>(1);
 const pages = ref<number>(0);
 const pageRange = ref<string>("-- - -- of --");
@@ -241,6 +251,11 @@ function openCompletionDialog({
   approvedItems: Array<{ key: string; item: any; action: "approve" }>;
   lastApprovedKey: string | null;
 }): void {
+  if (isScheduleClosed.value) {
+    showMessage("This schedule is closed. No actions can be performed.", "error");
+    return;
+  }
+
   // If user does not need to add remarks, perform approvals immediately
   if (!canAddRemarks.value) {
     // call update directly without opening modal
@@ -283,6 +298,11 @@ async function handleActionClick(data: {
   item: TFlattenedUnitItem;
   action: "approve" | "reject";
 }): Promise<void> {
+  if (isScheduleClosed.value) {
+    showMessage("This schedule is closed. No actions can be performed.", "error");
+    return;
+  }
+
   const { item, action } = data;
 
   if (!item?.unit || item?.set === undefined) {
@@ -322,9 +342,15 @@ async function handleActionClick(data: {
     await getUnitCleanerChecklistRefresh();
   } catch (error: any) {
     console.error("Error updating unit checklist:", error);
-    showMessage(error?.message || "Failed to update checklist", "error");
+    showMessage(
+      error?.data?.message || error?.message || "Failed to update checklist",
+      "error"
+    );
   } finally {
     submitting.value = false;
+    if (action === "approve") {
+      tableHygieneRef.value?.stopLoadingAction(`${item.unit}_${item.set}`);
+    }
   }
 }
 

package/components/PlateNumberDisplay.vue

@@ -5,7 +5,7 @@
     </span>
 
     <v-chip
-      v-if="extraCount > 0"
+      v-if="extraCount > 0 && !showAll"
       density="comfortable"
       size="small"
     >
@@ -23,12 +23,20 @@ const props = defineProps({
   defaultValue: {
     type: String,
     default: ""
+  },
+  showAll: {
+    type: Boolean,
+    default: false
   }
 })
 
 const formatted = computed(() => {
   if (!props.plateNumbers?.length) return props.defaultValue || ""
 
+  if (props.showAll) {
+    return props.plateNumbers.map((v: any) => v?.plateNumber || "").join(", ")
+  }
+
   const firstTwo = props.plateNumbers
     .slice(0, 2)
     .map((v: any) => v?.plateNumber || "")

package/components/ScheduleAreaMain.vue

@@ -68,6 +68,15 @@
             <v-spacer />
 
             <v-col cols="auto">
+              <v-chip
+                v-if="isScheduleClosed"
+                color="error"
+                variant="tonal"
+                class="text-capitalize mr-2"
+              >
+                <v-icon start>mdi-lock</v-icon>
+                Closed – View Only
+              </v-chip>
               <v-btn
                 v-if="canViewHistory"
                 class="text-none mr-2"
@@ -86,6 +95,7 @@
                 aria-label="Generate"
                 @click="_generateChecklist"
                 :loading="submitting"
+                :disabled="isScheduleClosed"
               >
                 Generate List
               </v-btn>
@@ -103,6 +113,15 @@
               {{ item.acceptedByName || item.acceptedBy || "Accepted" }}
             </span>
           </div>
+          <div v-else-if="isScheduleClosed">
+            <v-chip
+              size="small"
+              color="error"
+              variant="tonal"
+              class="text-capitalize"
+              >Closed</v-chip
+            >
+          </div>
           <div v-else>
             <v-btn
               v-if="canManageScheduleTasks"
@@ -176,6 +195,14 @@ const { formatDate, back } = useUtils();
 const { canGenerateChecklist, canViewHistory, canManageScheduleTasks } =
   useCleaningSchedulePermission();
 
+const selectedScheduleStatus = useState<string>(
+  "selectedScheduleStatus",
+  () => ""
+);
+const isScheduleClosed = computed(
+  () => selectedScheduleStatus.value.toLowerCase() === "closed"
+);
+
 const items = ref<Array<Record<string, any>>>([]);
 
 const statusFilter = ref<TScheduleAreaStatus>("All");
@@ -313,4 +340,33 @@ async function _generateChecklist() {
     submitting.value = false;
   }
 }
+
+onMounted(() => {
+  try {
+    const { $socket } = useNuxtApp() as any;
+    if ($socket) {
+      $socket.emit("join:cleaning-area", props.scheduleAreaId);
+
+      $socket.on(
+        "area-checklist:generated",
+        (payload: { scheduleId: string; siteId: string }) => {
+          if (payload?.scheduleId !== props.scheduleAreaId) return;
+          if (typeof getScheduleAreasRefresh === "function") {
+            getScheduleAreasRefresh();
+          }
+        }
+      );
+    }
+  } catch (_) {}
+});
+
+onUnmounted(() => {
+  try {
+    const { $socket } = useNuxtApp() as any;
+    if ($socket) {
+      $socket.emit("leave:cleaning-area", props.scheduleAreaId);
+      $socket.off("area-checklist:generated");
+    }
+  } catch (_) {}
+});
 </script>