@7365admin1/layer-common 1.10.6 → 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

@@ -141,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/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>

package/components/TableHygiene.vue

@@ -94,6 +94,16 @@
                   >
                     Set {{ group.set }}
                   </span>
+                  <v-chip
+                    v-if="group.isScheduleTask"
+                    size="x-small"
+                    color="info"
+                    variant="tonal"
+                    prepend-icon="mdi-calendar-clock"
+                    class="text-none"
+                  >
+                    Schedule Task
+                  </v-chip>
                   <v-chip
                     v-if="group.completedByName && isGroupComplete(group)"
                     size="x-small"
@@ -264,6 +274,8 @@
                               : 'text'
                           "
                           color="success"
+                          :loading="!!loadingActions[getKey(item, group.set)]"
+                          :disabled="!!loadingActions[getKey(item, group.set)]"
                           @click.stop="
                             handleActionClick(item, group.set, 'approve')
                           "
@@ -448,12 +460,14 @@ const emits = defineEmits([
 
 defineExpose({
   revertSetApprovals,
+  stopLoadingAction,
 });
 
 const internalPage = ref(props.page);
 const selected = shallowRef<any[]>(props.selected);
 const activeActions = reactive<Record<string, "approve" | "reject">>({});
 const persistedActions = reactive<Record<string, "approve" | "reject">>({});
+const loadingActions = reactive<Record<string, boolean>>({});
 const completedSets = ref<Set<number>>(new Set());
 const itemOrderMap = new Map<string, number>();
 
@@ -497,6 +511,7 @@ const groupedItems = computed(() => {
 
     return {
       set: item.set,
+      isScheduleTask: item.isScheduleTask ?? false,
       completedByName: item.completedByName ?? null,
       attachments:
         (item.attachment as string[] | undefined) ??
@@ -709,6 +724,13 @@ function handleActionClick(
         return;
       }
     }
+
+    // Non-completing approve: undo optimistic check and show loading instead
+    if (!isPersisted) {
+      delete activeActions[key];
+      loadingActions[key] = true;
+    }
+
     console.debug("TableHygiene: emitting action-click (approve immediate)", {
       item: { ...item, set },
       action,
@@ -717,6 +739,10 @@ function handleActionClick(
   }
 }
 
+function stopLoadingAction(key: string): void {
+  delete loadingActions[key];
+}
+
 function revertSetApprovals(setNumber: number): void {
   const group = groupedItems.value.find((g) => g.set === setNumber);
   if (group) {
@@ -736,6 +762,7 @@ watch(
   () => props.items,
   () => {
     completedSets.value.clear();
+    Object.keys(loadingActions).forEach((k) => delete loadingActions[k]);
   },
   { deep: true }
 );

package/components/UnitPersonCard.vue

@@ -0,0 +1,63 @@
+<template>
+  <v-card-text>
+    <v-row>
+      <v-col cols="12" md="4" class="mt-2">
+        <InputLabel class="font-weight-bold" title="Name" />
+        <v-text-field :model-value="person.name" density="compact" :readonly="readOnly" :class="{'no-pointer': readOnly}"/>
+      </v-col>
+
+      <v-col cols="12" md="4" class="mt-2">
+        <InputLabel class="font-weight-bold" title="Email Address" />
+        <v-text-field :model-value="person.email" density="compact" :readonly="readOnly" :class="{'no-pointer': readOnly}"/>
+      </v-col>
+
+      <v-col cols="12" md="4" class="mt-2">
+        <InputLabel class="font-weight-bold" title="NRIC" />
+        <v-text-field :model-value="person.nric" density="compact" :readonly="readOnly" :class="{'no-pointer': readOnly}"/>
+      </v-col>
+
+      <v-col cols="12" md="4" class="mt-2">
+        <InputLabel class="font-weight-bold" title="Mobile Number" />
+        <v-text-field :model-value="person.contact" density="compact" :readonly="readOnly" :class="{'no-pointer': readOnly}"/>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col cols="12" md="4" class="mt-2">
+        <InputLabel class="font-weight-bold" title="Other Documents and Files" :viewMode="readOnly" />
+
+        <p
+          v-if="!person.files?.length"
+          class="text-blue-darken-2 font-weight-thin text-caption ml-2 mt-5"
+        >
+          **No documents to display**
+        </p>
+
+        <InputFileV2
+          v-if="person.files?.length"
+          :files="person.files"
+          :viewMode="true"
+        />
+      </v-col>
+    </v-row>
+  </v-card-text>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  person: {
+    type: Object as PropType<TPeople>,
+    required: true,
+  },
+  readOnly: {
+    type: Boolean,
+    default: false,
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.no-pointer {
+  pointer-events: none;
+}
+</style>

package/components/VehicleAddSelection.vue

@@ -40,7 +40,7 @@ const prop = defineProps({
 
 const emit = defineEmits(['cancel', 'select']);
 
-const selection = computed<{label: string, value: TVehicleType}[]>(() => {
+const selection = computed<{label: string, value: TVehicleType | 'seasonpass'}[]>(() => {
   return [
     { label: "Whitelist", value: "whitelist" },
     { label: "Season Pass", value: "seasonpass" },
@@ -52,7 +52,7 @@ function cancel() {
   emit("cancel");
 }
 
-function select(value: string) {
+function select(value: TVehicleType | 'seasonpass') {
   emit("select", value);
 }
 </script>