@7365admin1/layer-common 1.10.0 → 1.10.2

package/components/CleaningScheduleMain.vue

@@ -0,0 +1,271 @@
+<template>
+  <v-row no-gutters align="center" justify="center">
+    <v-col cols="12" lg="12">
+      <TableMain
+        v-if="canViewSchedules"
+        :title="'Cleaner Checklist'"
+        :items="items"
+        :headers="headers"
+        :loading="loading"
+        :show-header="true"
+        v-model:page="page"
+        :pages="pages"
+        :pageRange="pageRange"
+        :no-data-text="'No Cleaner Checklist found'"
+        @refresh="getCleanerChecklistRefresh"
+        @row-click="onRowClick"
+      >
+        <template #extension>
+          <v-row no-gutters class="w-100 d-flex flex-column">
+            <v-card
+              class="w-100 px-3 d-flex align-center ga-5 py-2"
+              flat
+              :height="60"
+            >
+              <InputDateTimePicker
+                v-model:utc="startDate"
+                density="compact"
+                hide-details
+              />
+              <InputDateTimePicker
+                v-model:utc="endDate"
+                density="compact"
+                hide-details
+              />
+              <v-select
+                v-model="status"
+                :items="statusOptions"
+                density="compact"
+                hide-details
+                class="mx-3"
+                style="max-width: 160px"
+                item-title="title"
+                item-value="value"
+                label="Status"
+              />
+            </v-card>
+          </v-row>
+        </template>
+
+        <template #item.createdAt="{ value }">
+          {{
+            formatDate
+              ? formatDate(value)
+              : value
+              ? new Date(value).toLocaleString()
+              : ""
+          }}
+        </template>
+        <template #item.closeIn="{ item }">
+          <!-- <v-chip class="text-capitalize">{{ value || "No Status" }}</v-chip> -->
+          <v-chip class="text-capitalize" variant="flat" color="primary">{{
+            remainingTime[item._id] || "No Status"
+          }}</v-chip>
+        </template>
+        <template #item.status="{ value }">
+          <v-chip
+            class="text-capitalize"
+            :color="getStatusColor(value)"
+            variant="flat"
+            pill
+          >
+            {{ value || "No Status" }}
+          </v-chip>
+        </template>
+        <template #item.download="{ item }">
+          <v-btn
+            v-if="canDownloadSchedule"
+            variant="outlined"
+            size="medium"
+            class="text-capitalize px-4 py-2"
+            :loading="downloadingId === item._id"
+            @click.stop="downloadItem(item)"
+          >
+            <v-icon left>mdi-download</v-icon>
+            Download
+          </v-btn>
+        </template>
+      </TableMain>
+      <div v-else class="pa-4">
+        <v-card variant="outlined" class="pa-4">
+          <div class="text-subtitle-1">
+            You do not have permission to view cleaning schedules.
+          </div>
+        </v-card>
+      </div>
+    </v-col>
+  </v-row>
+</template>
+
+<script lang="ts" setup>
+import { useCleaningSchedulePermission } from "../composables/useCleaningSchedulePermission";
+import useCleaningSchedules from "../composables/useCleaningSchedules";
+
+const props = defineProps({
+  orgId: { type: String, required: true },
+  site: { type: String, required: true },
+  type: { type: String, required: true },
+});
+
+const startDate = ref("");
+const endDate = ref("");
+const status = ref<TScheduleAreaStatus>("All");
+const statusOptions = [
+  { title: "All", value: "all" },
+  { title: "Ready", value: "ready" },
+  { title: "Ongoing", value: "ongoing" },
+  { title: "Completed", value: "completed" },
+] as const;
+
+const items = ref<Array<Record<string, any>>>([]);
+const page = ref(1);
+const pages = ref(0);
+const pageRange = ref("-- - -- of --");
+
+const headers = [
+  { title: "Created Date", value: "createdAt" },
+  { title: "Close in", value: "closeIn" },
+  { title: "Status", value: "status" },
+  { title: "Completion Date", value: "completionDate" },
+  { title: "", value: "download" },
+];
+const remainingTime = ref({} as any);
+const downloadingId = ref<string | null>(null);
+
+const { getCleaningSchedules, downloadChecklistPdf } = useCleaningSchedules();
+const { formatDate } = useUtils();
+
+const getStatusColor = (status: unknown): string => {
+  if (!status) return "grey";
+
+  const normalized = String(status).toLowerCase();
+
+  switch (normalized) {
+    case "ready":
+      return "grey";
+    case "ongoing":
+      return "primary";
+    case "completed":
+    case "accepted":
+      return "success";
+    default:
+      return "secondary";
+  }
+};
+
+const {
+  canDownloadSchedule,
+  canViewSchedules,
+  canViewScheduleDetails,
+  canManageScheduleTasks,
+} = useCleaningSchedulePermission();
+
+const {
+  data: getCleanerChecklistReq,
+  refresh: getCleanerChecklistRefresh,
+  pending: loading,
+} = await useLazyAsyncData(
+  "get-all-areas",
+  () =>
+    getCleaningSchedules({
+      page: page.value,
+      site: props.site,
+      startDate: startDate.value,
+      endDate: endDate.value,
+      status: status.value === "All" ? undefined : status.value,
+    }),
+  {
+    watch: [() => page.value, () => props.site, startDate, endDate, status],
+  }
+);
+
+function calculateRemainingTime(
+  item: Date | string | number | null | undefined
+) {
+  if (!item) return -1;
+  const _date = new Date(item);
+  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 formatTime = (seconds: number) => {
+  if (seconds <= 0 || isNaN(seconds)) return "00h 00m";
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+  return `${String(hours).padStart(2, "0")}h ${String(minutes).padStart(
+    2,
+    "0"
+  )}m`;
+};
+
+const updateRemainingTime = () => {
+  console.log(items.value);
+  items.value.forEach((item) => {
+    const itemId = item._id as string;
+    const _time = calculateRemainingTime(item.date as string);
+    remainingTime.value[itemId] = _time < 0 ? "00h 00m" : formatTime(_time);
+  });
+};
+
+watchEffect(() => {
+  if (getCleanerChecklistReq.value) {
+    items.value = getCleanerChecklistReq.value.items;
+    pages.value = getCleanerChecklistReq.value.pages;
+    pageRange.value = getCleanerChecklistReq.value.pageRange;
+  }
+
+  updateRemainingTime();
+});
+
+async function downloadItem(item: any) {
+  const id = item?._id;
+  if (!id) return;
+
+  try {
+    downloadingId.value = id;
+    await downloadChecklistPdf(id);
+  } catch (err) {
+    console.error("Failed to download checklist PDF", err);
+  } finally {
+    downloadingId.value = null;
+  }
+}
+
+function onRowClick(data: any) {
+  const item = data?.item ?? data;
+  const id = item?._id || item?.id || item?.areaId;
+  if (id) {
+    if (!canViewScheduleDetails.value) {
+      showMessage(
+        "You do not have permission to view schedule details.",
+        "error"
+      );
+      return;
+    }
+
+    if (props.type === "toilet") {
+      const path = `/${props.orgId}/${props.site}/toilet-checklist/${id}`;
+      navigateTo(path);
+      return;
+    }
+    const path = `/${props.orgId}/${props.site}/cleaning-schedule/${id}`;
+    navigateTo(path);
+  } else {
+    console.warn("Row clicked but no id found to navigate:", item);
+  }
+}
+
+function showMessage(msg: string, color: string = "error") {
+  try {
+    console.warn(msg);
+  } catch (e) {
+    alert(msg);
+  }
+}
+</script>

package/components/DocumentManagement.vue

@@ -264,6 +264,9 @@ const messageColor = ref("");
 
 const items = ref<Array<Record<string, any>>>([]);
 
+const route = useRoute();
+const siteId = route.params.site as string;
+
 const {
   data: getDocumentReq,
   refresh: getDocuments,
@@ -274,6 +277,7 @@ const {
     _getAllDocuments({
       page: page.value,
       search: headerSearch.value,
+      site: siteId,
     }),
   {
     watch: [page, headerSearch],

package/components/EntryPass/QrTemplatePreview.vue

@@ -0,0 +1,104 @@
+<template>
+  <v-dialog
+    :model-value="modelValue"
+    transition="dialog-right-transition"
+    width="550"
+    persistent
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <v-card>
+      <v-toolbar
+        style="height: 12px"
+        :color="isDark ? 'grey-darken-4' : 'white'"
+      >
+        <v-spacer></v-spacer>
+        <v-btn
+          color="grey-darken-1"
+          icon="mdi-close"
+          @click="emit('update:modelValue', false)"
+        ></v-btn>
+      </v-toolbar>
+
+      <v-card-text style="padding: 0 !important">
+        <v-container>
+          <v-row no-gutters class="text-center">
+            <v-col cols="12">
+              <p class="font-weight-bold text-h5 mb-3">{{ header }}</p>
+              <p>{{ subText }}</p>
+            </v-col>
+
+            <v-col cols="12" class="mt-5">
+              <!-- UPPER QR -->
+              <v-row no-gutters>
+                <v-col cols="6">
+                  <img v-if="qrSmall" :src="qrSmall" width="80" height="80" />
+                </v-col>
+                <v-col cols="6">
+                  <img v-if="qrSmall" :src="qrSmall" width="80" height="80" />
+                </v-col>
+              </v-row>
+
+              <!-- CENTER QR -->
+              <img v-if="qrLarge" :src="qrLarge" width="130" height="130" class="my-2" />
+
+              <!-- LOWER QR -->
+              <v-row no-gutters>
+                <v-col cols="6">
+                  <img v-if="qrSmall" :src="qrSmall" width="80" height="80" />
+                </v-col>
+                <v-col cols="6">
+                  <img v-if="qrSmall" :src="qrSmall" width="80" height="80" />
+                </v-col>
+              </v-row>
+            </v-col>
+
+            <v-col cols="12" class="mt-5">
+              <p class="font-weight-bold text-h5 mb-2">Company Name</p>
+              <p class="font-weight-bold text-h5 mb-3">BL 01/03/24</p>
+              <p class="mb-1">{{ `Date: ${dateStr} ${timeStr}` }}</p>
+              <p class="mb-1">Access: Door</p>
+              <p>Scan and press level 1. One time use.</p>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts" setup>
+import { useTheme } from "vuetify";
+import QRCode from "qrcode";
+
+defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  header: {
+    type: String,
+    default: "",
+  },
+  subText: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const { global: themeGlobal } = useTheme();
+const isDark = computed(() => themeGlobal.current.value.dark);
+
+const qrSmall = ref<string>("");
+const qrLarge = ref<string>("");
+
+onMounted(async () => {
+  qrSmall.value = await QRCode.toDataURL("123123", { width: 80, margin: 1 });
+  qrLarge.value = await QRCode.toDataURL("123123", { width: 130, margin: 1 });
+});
+
+const now = new Date();
+const dateStr = now.toLocaleDateString();
+const timeStr = now.toLocaleTimeString();
+</script>