@7365admin1/layer-common 1.10.6 → 1.10.8

package/components/CleaningScheduleMain.vue

@@ -57,8 +57,13 @@
           }}
         </template>
         <template #item.closeIn="{ item }">
-          <v-chip class="text-capitalize" variant="flat" color="primary" pill>
-            {{ remainingTime[item._id] || "No Status" }}
+          <v-chip
+            class="text-capitalize"
+            variant="flat"
+            :color="getCloseInColor(item._id)"
+            pill
+          >
+            {{ remainingTime[item._id] || "00h 00m" }}
           </v-chip>
         </template>
         <template #item.status="{ value }">
@@ -99,6 +104,7 @@
 <script lang="ts" setup>
 import { useCleaningSchedulePermission } from "../composables/useCleaningSchedulePermission";
 import useCleaningSchedules from "../composables/useCleaningSchedules";
+import useUtils from "../composables/useUtils";
 
 const props = defineProps({
   orgId: { type: String, required: true },
@@ -191,18 +197,13 @@ const {
 );
 
 function calculateRemainingTime(
-  item: Date | string | number | null | undefined
+  closeIn: Date | string | number | null | undefined
 ) {
-  if (!item) return -1;
-  const _date = new Date(item);
+  if (!closeIn) return -1;
+  const _date = new Date(closeIn);
   if (isNaN(_date.getTime())) return -1;
-  const creationTime = _date.getTime();
-  const currentTime = Date.now();
-  const differenceInMillis = currentTime - creationTime;
-  const differenceInSeconds = Math.floor(differenceInMillis / 1000);
-  const desiredDurationInSeconds = 24 * 60 * 60;
-  const remainingTimeInSeconds = desiredDurationInSeconds - differenceInSeconds;
-  return remainingTimeInSeconds;
+  const remainingMs = _date.getTime() - Date.now();
+  return Math.floor(remainingMs / 1000);
 }
 
 const formatTime = (seconds: number) => {
@@ -218,7 +219,7 @@ const formatTime = (seconds: number) => {
 const updateRemainingTime = () => {
   items.value.forEach((item) => {
     const itemId = item._id as string;
-    const _time = calculateRemainingTime(item.date as string);
+    const _time = calculateRemainingTime(item.closeIn as string);
     remainingSeconds.value[itemId] = _time;
     remainingTime.value[itemId] = _time <= 0 ? "00h 00m" : formatTime(_time);
   });
@@ -234,6 +235,41 @@ watchEffect(() => {
   updateRemainingTime();
 });
 
+let _countdownInterval: ReturnType<typeof setInterval> | null = null;
+
+onMounted(() => {
+  _countdownInterval = setInterval(updateRemainingTime, 60_000);
+
+  try {
+    const { $socket } = useNuxtApp() as any;
+    if ($socket) {
+      $socket.emit("join:cleaning-schedule", props.site);
+
+      $socket.on("cleaning-schedule:updated", (payload: { siteId: string }) => {
+        if (payload?.siteId !== props.site) return;
+        getCleanerChecklistRefresh();
+      });
+
+      $socket.on("cleaning-schedule:expired", () => {
+        getCleanerChecklistRefresh();
+      });
+    }
+  } catch (_) {}
+});
+
+onUnmounted(() => {
+  if (_countdownInterval) clearInterval(_countdownInterval);
+
+  try {
+    const { $socket } = useNuxtApp() as any;
+    if ($socket) {
+      $socket.emit("leave:cleaning-schedule", props.site);
+      $socket.off("cleaning-schedule:updated");
+      $socket.off("cleaning-schedule:expired");
+    }
+  } catch (_) {}
+});
+
 async function downloadItem(item: any) {
   const id = item?._id;
   if (!id) return;
@@ -248,6 +284,14 @@ async function downloadItem(item: any) {
   }
 }
 
+const selectedScheduleStatus = useState<string>(
+  "selectedScheduleStatus",
+  () => ""
+);
+
+const isItemClosed = (item: any): boolean =>
+  String(item?.status ?? "").toLowerCase() === "closed";
+
 function onRowClick(data: any) {
   const item = data?.item ?? data;
   const id = item?._id || item?.id || item?.areaId;
@@ -260,6 +304,9 @@ function onRowClick(data: any) {
       return;
     }
 
+    // Store status so nested pages know whether the schedule is closed
+    selectedScheduleStatus.value = String(item?.status ?? "");
+
     if (props.type === "toilet") {
       const path = `/${props.orgId}/${props.site}/toilet-checklist/${id}`;
       navigateTo(path);

package/components/Dialog/DeleteConfirmation.vue

@@ -3,9 +3,9 @@
         <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-5 px-7 text-center">
             <span> {{ promptTitle }}</span>
 
-            <span v-if="message" class="text-error mt-2">
+            <div v-if="message" class="text-error  mt-2">
                 {{ message }} Do you want to delete anyway?
-            </span>
+            </div>
         </v-card-text>
 
         <v-toolbar class="pa-0" density="compact">

package/components/Dialog/UpdateMoreAction.vue

@@ -19,7 +19,7 @@
 
     <v-toolbar class="pa-0" density="compact">
       <v-row no-gutters>
-        <v-col cols="6" class="pa-0">
+        <v-col :cols="(canUpdate || canDelete) ? 6 : 12" class="pa-0">
           <v-btn
             block
             variant="text"
@@ -32,7 +32,7 @@
           </v-btn>
         </v-col>
 
-        <v-col cols="6" class="pa-0" >
+        <v-col v-if="canUpdate || canDelete" cols="6" class="pa-0" >
           <v-menu contained>
             <template #activator="{ props }">
               <v-btn

package/components/EntryPassInformation.vue

@@ -0,0 +1,443 @@
+<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="cardItems"
+            :loading="cardsLoading"
+            item-title="cardNumber"
+            item-value="_id"
+            density="comfortable"
+            multiple
+            chips
+            closable-chips
+            hide-details
+            placeholder="Select cards..."
+            return-object
+          >
+            <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
+              :color="isBarcodeScanningActive ? 'success' : 'primary'"
+              variant="outlined"
+              block
+              prepend-icon="mdi-barcode-scan"
+              @click="toggleBarcodeScanning"
+            >
+              <v-icon v-if="isBarcodeScanningActive" start>mdi-check-circle</v-icon>
+              {{ isBarcodeScanningActive ? 'Scanning...' : 'Scan Via BarCode' }}
+            </v-btn>
+          </v-col>
+          <v-col>
+            <v-btn
+              variant="outlined"
+              color="primary"
+              block
+              prepend-icon="mdi-camera"
+              @click="openCameraDialog"
+            >
+              Scan with Camera
+            </v-btn>
+          </v-col>
+        </v-row>
+
+        <v-alert
+          v-if="isBarcodeScanningActive"
+          type="info"
+          variant="tonal"
+          density="compact"
+          class="mt-3 text-center"
+        >
+          <v-icon class="mr-2 animate-pulse">mdi-radar</v-icon>
+          Ready to scan NFC cards. Please scan a card with your barcode scanner.
+        </v-alert>
+      </template>
+    </template>
+    <v-divider class="mt-6" />
+
+    <!-- Hidden canvas used for frame-by-frame barcode detection -->
+    <canvas ref="canvasRef" style="display: none" />
+
+    <!-- Camera scanner dialog -->
+    <v-dialog
+      v-model="showCameraDialog"
+      width="700"
+      max-width="700"
+      persistent
+      transition="dialog-bottom-transition"
+      @after-enter="startCamera"
+      @after-leave="stopCamera"
+    >
+      <v-container class="d-flex justify-center" style="max-height: 90vh">
+        <v-card elevation="2" class="d-flex flex-column align-center pa-2 w-100">
+          <v-toolbar color="transparent">
+            <v-card-title class="text-h5">Scan Card</v-card-title>
+            <v-spacer />
+            <v-btn icon="mdi-close" color="grey-darken-1" @click="closeCameraDialog" />
+          </v-toolbar>
+
+          <div class="position-relative w-100" style="aspect-ratio: 4/3; background: #000">
+            <video
+              ref="videoRef"
+              autoplay
+              playsinline
+              muted
+              class="w-100 h-100"
+              style="object-fit: cover"
+            />
+            <!-- scan overlay -->
+            <div class="scan-overlay">
+              <div class="scan-box" />
+            </div>
+          </div>
+
+          <div v-if="cameraError" class="pa-3 text-center text-error text-caption">
+            {{ cameraError }}
+          </div>
+
+          <v-card-actions class="justify-center">
+            <v-btn icon="mdi-camera-switch" color="primary" @click="switchCamera" />
+          </v-card-actions>
+        </v-card>
+      </v-container>
+    </v-dialog>
+  </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<any[]>,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(["update:modelValue", "update:quantity", "update:cards"]);
+
+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);
+  },
+});
+
+// ─── Card fetching ────────────────────────────────────────────────
+const cardItems = ref<any[]>([]);
+const cardsLoading = ref(false);
+
+async function fetchCards() {
+  cardsLoading.value = true;
+  try {
+    const res = await getAllCards({ assignFilter: "available", limit: 100 });
+    cardItems.value = res?.data ?? [];
+  } finally {
+    cardsLoading.value = false;
+  }
+}
+
+function addCard(card: any) {
+  const already = selectedCards.value.some((c) => c._id === card._id);
+  if (!already) selectedCards.value = [...selectedCards.value, card];
+}
+
+// ─── Barcode scanning ─────────────────────────────────────────────
+const isBarcodeScanningActive = ref(false);
+const barcodeBuffer = ref("");
+const barcodeTimeout = ref<ReturnType<typeof setTimeout> | null>(null);
+
+const toggleBarcodeScanning = () => {
+  isBarcodeScanningActive.value = !isBarcodeScanningActive.value;
+  if (!isBarcodeScanningActive.value) {
+    barcodeBuffer.value = "";
+    if (barcodeTimeout.value) clearTimeout(barcodeTimeout.value);
+  }
+};
+
+const validateScannedBarcode = (scannedCode: string) => {
+  const card = cardItems.value.find((c) => c.cardNumber === scannedCode);
+  if (card) addCard(card);
+  barcodeBuffer.value = "";
+};
+
+const handleBarcodeInput = (event: KeyboardEvent) => {
+  if (!isBarcodeScanningActive.value || passType.value !== "NFC") return;
+
+  if (event.key === "Enter") {
+    event.preventDefault();
+    if (barcodeTimeout.value) clearTimeout(barcodeTimeout.value);
+    if (barcodeBuffer.value.trim()) validateScannedBarcode(barcodeBuffer.value.trim());
+    return;
+  }
+
+  if (event.key.length === 1) {
+    barcodeBuffer.value += event.key;
+    if (barcodeTimeout.value) clearTimeout(barcodeTimeout.value);
+    barcodeTimeout.value = setTimeout(() => { barcodeBuffer.value = ""; }, 200);
+  }
+};
+
+// ─── Camera scanner ───────────────────────────────────────────────
+const videoRef = ref<HTMLVideoElement | null>(null);
+const canvasRef = ref<HTMLCanvasElement | null>(null);
+const showCameraDialog = ref(false);
+const cameraError = ref("");
+const cameraFacingMode = ref<"environment" | "user">("environment");
+let mediaStream: MediaStream | null = null;
+let scanIntervalId: ReturnType<typeof setInterval> | null = null;
+let barcodeDetector: any = null;
+
+const openCameraDialog = () => {
+  cameraError.value = "";
+  showCameraDialog.value = true;
+};
+
+const closeCameraDialog = () => {
+  showCameraDialog.value = false;
+};
+
+const startCamera = async () => {
+  cameraError.value = "";
+
+  if (!("BarcodeDetector" in window)) {
+    cameraError.value = "BarcodeDetector is not supported in this browser. Use Chrome or Edge.";
+    return;
+  }
+
+  try {
+    mediaStream = await navigator.mediaDevices.getUserMedia({
+      video: { facingMode: cameraFacingMode.value, width: { ideal: 1280 }, height: { ideal: 720 } },
+    });
+
+    if (videoRef.value) {
+      videoRef.value.srcObject = mediaStream;
+      await videoRef.value.play();
+    }
+
+    barcodeDetector = new (window as any).BarcodeDetector({
+      formats: ["qr_code", "code_128", "code_39", "ean_13", "ean_8"],
+    });
+
+    // Wait a tick for the video to have real frame data before scanning
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    startScanLoop();
+  } catch (err: any) {
+    cameraError.value = `Camera error: ${err.message}`;
+  }
+};
+
+const startScanLoop = () => {
+  if (scanIntervalId !== null) clearInterval(scanIntervalId);
+  scanIntervalId = setInterval(scanFrame, 300);
+};
+
+const scanFrame = async () => {
+  const video = videoRef.value;
+  const canvas = canvasRef.value;
+  if (!video || !canvas || !barcodeDetector || !showCameraDialog.value) return;
+  if (video.readyState < 2 || video.videoWidth === 0) return;
+
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return;
+
+  canvas.width = video.videoWidth;
+  canvas.height = video.videoHeight;
+  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+
+  try {
+    const barcodes = await barcodeDetector.detect(canvas);
+    for (const barcode of barcodes) {
+      const card = cardItems.value.find((c) => c.cardNumber === barcode.rawValue);
+      if (card) {
+        addCard(card);
+        closeCameraDialog();
+        return;
+      }
+    }
+  } catch {
+    // silent — detector throws on blank frames
+  }
+};
+
+const stopCamera = () => {
+  if (scanIntervalId !== null) { clearInterval(scanIntervalId); scanIntervalId = null; }
+  if (mediaStream) { mediaStream.getTracks().forEach((t) => t.stop()); mediaStream = null; }
+  if (videoRef.value) videoRef.value.srcObject = null;
+  barcodeDetector = null;
+};
+
+const switchCamera = async () => {
+  stopCamera();
+  cameraFacingMode.value = cameraFacingMode.value === "environment" ? "user" : "environment";
+  await startCamera();
+};
+
+// ─── Watchers & lifecycle ─────────────────────────────────────────
+watch(
+  () => passType.value,
+  (val) => {
+    if (val === "NFC") {
+      fetchCards();
+      window.addEventListener("keydown", handleBarcodeInput);
+    } else {
+      isBarcodeScanningActive.value = false;
+      barcodeBuffer.value = "";
+      if (barcodeTimeout.value) clearTimeout(barcodeTimeout.value);
+      window.removeEventListener("keydown", handleBarcodeInput);
+    }
+  }
+);
+
+onUnmounted(() => {
+  window.removeEventListener("keydown", handleBarcodeInput);
+  if (barcodeTimeout.value) clearTimeout(barcodeTimeout.value);
+  stopCamera();
+});
+</script>
+
+<style scoped>
+.selected-check {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+}
+
+.animate-pulse {
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
+}
+
+.scan-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.scan-box {
+  width: 220px;
+  height: 220px;
+  border: 3px solid rgba(255, 255, 255, 0.85);
+  border-radius: 12px;
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
+}
+</style>