@7365admin1/layer-common 1.10.4 → 1.10.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 1.10.5
+
+### Patch Changes
+
+- eaec446: Update changes for March 6, 2024
+
 ## 1.10.4
 
 ### Patch Changes

package/components/AccessCardDeleteDialog.vue

@@ -0,0 +1,109 @@
+<template>
+  <v-dialog :model-value="modelValue" width="450" persistent>
+    <v-card width="100%">
+      <v-toolbar density="compact" class="pl-4">
+        <span class="font-weight-medium text-h5">Delete Card</span>
+      </v-toolbar>
+
+      <v-card-text>
+        <p class="text-subtitle-2 text-center mb-4">
+          Are you sure you want to delete this card? This action cannot be
+          undone.
+        </p>
+
+        <v-form v-model="validForm" :disabled="loading">
+          <InputLabel class="text-capitalize font-weight-bold" title="Remarks" required />
+          <v-textarea
+            v-model="remarks"
+            placeholder="Enter remarks..."
+            persistent-placeholder
+            rows="3"
+            auto-grow
+            hide-details="auto"
+            :rules="[requiredRule]"
+          />
+        </v-form>
+
+        <v-row v-if="error" no-gutters justify="center" class="mt-3">
+          <span class="text-caption text-error text-center">{{ error }}</span>
+        </v-row>
+      </v-card-text>
+
+      <v-toolbar density="compact">
+        <v-row no-gutters>
+          <v-col cols="6">
+            <v-btn
+              tile
+              block
+              size="48"
+              variant="text"
+              class="text-none"
+              :disabled="loading"
+              @click="handleClose"
+            >
+              Close
+            </v-btn>
+          </v-col>
+          <v-col cols="6">
+            <v-btn
+              tile
+              block
+              size="48"
+              color="black"
+              variant="flat"
+              class="text-none"
+              :loading="loading"
+              :disabled="!validForm || loading"
+              @click="handleConfirm"
+            >
+              Delete Card
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-toolbar>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  error: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean];
+  confirm: [remarks: string];
+}>();
+
+const { requiredRule } = useUtils();
+
+const validForm = ref(false);
+const remarks = ref("");
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (val) remarks.value = "";
+  }
+);
+
+function handleClose() {
+  emit("update:modelValue", false);
+}
+
+function handleConfirm() {
+  if (!validForm.value) return;
+  emit("confirm", remarks.value.trim());
+}
+</script>

package/components/AccessCardHistoryDialog.vue

@@ -0,0 +1,133 @@
+<template>
+  <v-dialog :model-value="modelValue" width="480" persistent>
+    <v-card width="100%">
+      <v-toolbar density="compact" color="black">
+        <v-toolbar-title class="text-subtitle-1 font-weight-medium">
+          Card History — {{ card?.cardNo ?? "N/A" }}
+        </v-toolbar-title>
+        <v-btn icon @click="emit('update:modelValue', false)">
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+      </v-toolbar>
+
+      <v-card-text style="max-height: 70vh; overflow-y: auto" class="pa-4">
+        <div v-if="pending" class="d-flex justify-center align-center py-8">
+          <v-progress-circular indeterminate color="black" />
+        </div>
+
+        <div v-else-if="!history.length" class="text-center text-grey py-8">
+          No history available.
+        </div>
+
+        <v-timeline v-else side="end" density="compact" truncate-line="both">
+          <v-timeline-item
+            v-for="(item, index) in history"
+            :key="index"
+            :dot-color="actionColor(item.action)"
+            size="small"
+          >
+            <template #icon>
+              <v-icon size="14" color="white">{{ actionIcon(item.action) }}</v-icon>
+            </template>
+
+            <div class="mb-4">
+              <div class="d-flex align-center ga-2 mb-1">
+                <v-chip
+                  :color="actionColor(item.action)"
+                  variant="flat"
+                  size="x-small"
+                  class="text-capitalize font-weight-medium"
+                >
+                  {{ actionLabel(item.action) }}
+                </v-chip>
+              </div>
+              <div class="text-body-2">{{ item.performedBy?.name ?? "N/A" }}</div>
+              <div class="text-caption text-grey">{{ formatDate(item.date) }}</div>
+            </div>
+          </v-timeline-item>
+        </v-timeline>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  card: {
+    type: Object as PropType<Record<string, any> | null>,
+    default: null,
+  },
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean];
+}>();
+
+const { getCardHistory } = useAccessManagement();
+
+const history = ref<Record<string, any>[]>([]);
+const pending = ref(false);
+
+watch(
+  () => props.modelValue,
+  async (val) => {
+    if (val && props.card?._id) {
+      pending.value = true;
+      try {
+        const data = await getCardHistory(props.card._id);
+        history.value = Array.isArray(data) ? data : [];
+      } finally {
+        pending.value = false;
+      }
+    } else {
+      history.value = [];
+    }
+  }
+);
+
+function actionLabel(action: string) {
+  const map: Record<string, string> = {
+    available: "Created",
+    assign: "Assigned",
+    replace: "Replaced",
+    deleted: "Deleted",
+  };
+  return map[action] ?? action;
+}
+
+function actionColor(action: string) {
+  const map: Record<string, string> = {
+    available: "success",
+    assign: "primary",
+    replace: "orange",
+    deleted: "error",
+  };
+  return map[action] ?? "grey";
+}
+
+function actionIcon(action: string) {
+  const map: Record<string, string> = {
+    available: "mdi-plus",
+    assign: "mdi-account-check",
+    replace: "mdi-swap-horizontal",
+    deleted: "mdi-delete",
+  };
+  return map[action] ?? "mdi-circle-small";
+}
+
+function formatDate(date: string) {
+  if (!date) return "N/A";
+  return new Intl.DateTimeFormat("en-GB", {
+    day: "2-digit",
+    month: "short",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: true,
+  }).format(new Date(date));
+}
+</script>

package/components/AccessCardPreviewDialog.vue

@@ -1,4 +1,9 @@
 <template>
+  <AccessCardHistoryDialog
+    v-model="historyDialog"
+    :card="selectedCardInUnit"
+  />
+
   <v-dialog :model-value="modelValue" width="450" persistent>
     <v-card width="100%">
       <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-0">
@@ -214,7 +219,7 @@
                     Replace Card
                   </v-list-item-title>
                 </v-list-item>
-                <v-list-item :disabled="selectedCardInUnit === null">
+                <v-list-item :disabled="!isSelectedCardPhysical" @click="historyDialog = true">
                   <v-list-item-title class="text-subtitle-2 cursor-pointer">
                     Card History
                   </v-list-item-title>
@@ -268,6 +273,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  isSelectedCardPhysical: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits<{
@@ -277,6 +286,8 @@ const emit = defineEmits<{
   delete: [];
 }>();
 
+const historyDialog = ref(false);
+
 const isSelectedCardDeletable = computed(() => {
   if (!props.selectedCardInUnit?._id) return false;
   const id = props.selectedCardInUnit._id;

package/components/AccessCardQrTagging.vue

@@ -0,0 +1,183 @@
+<template>
+  <v-row no-gutters>
+    <v-col cols="12" class="mb-2">
+      <v-row no-gutters align="center" justify="space-between">
+        <v-row no-gutters class="ga-2">
+          <v-btn
+            class="text-none"
+            rounded="pill"
+            variant="tonal"
+            size="large"
+            :disabled="!items.length"
+          >
+            Print All
+          </v-btn>
+          <v-btn
+            class="text-none"
+            rounded="pill"
+            variant="tonal"
+            size="large"
+            :disabled="!selected.length"
+          >
+            Generate QR Code
+          </v-btn>
+          <v-btn
+            class="text-none"
+            rounded="pill"
+            variant="tonal"
+            size="large"
+            :disabled="!selected.length"
+          >
+            Print QR Code
+          </v-btn>
+        </v-row>
+
+        <v-row no-gutters class="ga-2" justify="end" style="max-width: 420px">
+          <v-select
+            v-model="typeFilter"
+            :items="typeOptions"
+            placeholder="Type"
+            variant="outlined"
+            density="comfortable"
+            hide-details
+            clearable
+            style="max-width: 160px"
+          />
+          <v-text-field
+            v-model="searchText"
+            placeholder="Search Card..."
+            variant="outlined"
+            density="comfortable"
+            clearable
+            hide-details
+            style="max-width: 240px"
+          />
+        </v-row>
+      </v-row>
+    </v-col>
+
+    <v-col cols="12">
+      <v-card
+        width="100%"
+        variant="outlined"
+        border="thin"
+        rounded="lg"
+        :loading="loading"
+      >
+        <v-toolbar density="compact" color="grey-lighten-4">
+          <template #prepend>
+            <v-btn fab icon density="comfortable" @click="fetchItems">
+              <v-icon>mdi-refresh</v-icon>
+            </v-btn>
+          </template>
+
+          <template #append>
+            <v-row no-gutters justify="end" align="center">
+              <span class="mr-2 text-caption text-fontgray">
+                {{ pageRange }}
+              </span>
+              <local-pagination
+                v-model="page"
+                :length="pages"
+                @update:value="fetchItems"
+              />
+            </v-row>
+          </template>
+        </v-toolbar>
+
+        <v-data-table
+          v-model="selected"
+          :headers="tableHeaders"
+          :items="items"
+          item-value="_id"
+          items-per-page="10"
+          fixed-header
+          hide-default-footer
+          show-select
+          style="max-height: calc(100vh - 200px)"
+        >
+          <template #item.card="{ item }">
+            <v-row no-gutters align="center" class="ga-2">
+              <v-icon size="18" color="grey-darken-1">mdi-card-account-details</v-icon>
+              <span>{{ item.hid ?? "N/A" }}</span>
+            </v-row>
+          </template>
+
+          <template #item.qrCode="{ item }">
+            <v-icon
+              :color="item.qrCode ? 'success' : 'grey-lighten-1'"
+              size="22"
+            >
+              {{ item.qrCode ? "mdi-check-circle" : "mdi-circle-outline" }}
+            </v-icon>
+          </template>
+        </v-data-table>
+      </v-card>
+    </v-col>
+
+    <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
+  </v-row>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  middleware: ["01-auth", "02-org"],
+  memberOnly: true,
+});
+
+const tableHeaders = [
+  { title: "Card", key: "card", sortable: false },
+  { title: "Location", key: "location", sortable: false },
+  { title: "Card No.", key: "cardNo", sortable: false },
+  { title: "HID", key: "hid", sortable: false },
+  { title: "QR Code", key: "qrCode", sortable: false },
+];
+
+const typeOptions = ["Physical", "Non-Physical"];
+
+const route = useRoute();
+const siteId = computed(() => route.params.site as string);
+const orgId = computed(() => route.params.org as string);
+
+const page = ref(1);
+const pages = ref(0);
+const pageRange = ref("-- - -- of --");
+
+const message = ref("");
+const messageSnackbar = ref(false);
+const messageColor = ref("");
+
+const items = ref<Record<string, any>[]>([]);
+const selected = ref<string[]>([]);
+const searchText = ref("");
+const typeFilter = ref<string | null>(null);
+
+const {
+  data: qrTaggingReq,
+  refresh: fetchItems,
+  status: fetchStatus,
+} = useLazyAsyncData(
+  "get-qr-tagging",
+  () => {
+    // TODO: wire up QR tagging API
+    return Promise.resolve({ data: { items: [], pages: 0, pageRange: "0 - 0 of 0" } });
+  },
+  { watch: [page, searchText, typeFilter] }
+);
+
+const loading = computed(() => fetchStatus.value === "pending");
+
+watchEffect(() => {
+  if (qrTaggingReq.value?.data) {
+    items.value = qrTaggingReq.value.data.items;
+    pages.value = qrTaggingReq.value.data.pages;
+    pageRange.value = qrTaggingReq.value.data.pageRange;
+  }
+});
+
+function showMessage(msg: string, color: string) {
+  message.value = msg;
+  messageColor.value = color;
+  messageSnackbar.value = true;
+}
+</script>

package/components/AccessManagement.vue

@@ -111,6 +111,7 @@
       :can-replace-access-card="canReplaceAccessCard"
       :can-delete-access-card="canDeleteAccessCard"
       :is-selected-card-assigned-physical="isSelectedCardAssignedPhysical"
+      :is-selected-card-physical="isSelectedCardPhysical"
       @replace="openReplaceDialog()"
       @delete="openDeleteDialog()"
     />
@@ -129,61 +130,12 @@
     </v-dialog>
 
     <!-- Delete Dialog -->
-    <v-dialog
+    <AccessCardDeleteDialog
       v-model="confirmDialog"
       :loading="deleteLoading"
-      width="450"
-      persistent
-    >
-      <v-card width="100%">
-        <v-toolbar density="compact" class="pl-4">
-          <span class="font-weight-medium text-h5">Delete Card</span>
-        </v-toolbar>
-        <v-card-text>
-          <p class="text-subtitle-2 text-center">
-            Are you sure you want to delete this card? This action cannot be
-            undone.
-          </p>
-
-          <v-row v-if="message" no-gutters justify="center" class="mt-4">
-            <span class="text-caption text-error text-center">
-              {{ message }}
-            </span>
-          </v-row></v-card-text
-        >
-        <v-toolbar density="compact">
-          <v-row no-gutters>
-            <v-col cols="6">
-              <v-btn
-                tile
-                block
-                size="48"
-                variant="text"
-                class="text-none"
-                @click="confirmDialog = false"
-                :disabled="deleteLoading"
-              >
-                Close
-              </v-btn>
-            </v-col>
-            <v-col cols="6">
-              <v-btn
-                tile
-                block
-                size="48"
-                color="black"
-                variant="flat"
-                class="text-none"
-                @click="handleDeleteCard"
-                :loading="deleteLoading"
-              >
-                Delete Card
-              </v-btn>
-            </v-col>
-          </v-row></v-toolbar
-        >
-      </v-card>
-    </v-dialog>
+      :error="deleteError"
+      @confirm="handleDeleteCard"
+    />
 
     <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
   </v-row>
@@ -276,6 +228,7 @@ const createDialog = ref(false);
 const assignDialog = ref(false);
 const previewDialog = ref(false);
 const deleteLoading = ref(false);
+const deleteError = ref("");
 const confirmDialog = ref(false);
 const searchText = ref("");
 const replaceDialog = ref(false);
@@ -300,6 +253,14 @@ const isSelectedCardAssignedPhysical = computed(() =>
   ) ?? false
 );
 
+const isSelectedCardPhysical = computed(() =>
+  ["available", "assigned", "replaced", "deleted"].some((state) =>
+    selectedCard.value?.[state]?.physical?.some(
+      (c: any) => c._id === selectedCardInUnit.value?._id
+    )
+  )
+);
+
 const { getUserTypeAccessCards, deleteCard: _deleteCard } = useAccessManagement();
 
 const statsRef = ref<{ refresh: () => void } | null>(null);
@@ -369,7 +330,7 @@ function tableRowClickHandler(_: any, data: any) {
 
 function openDeleteDialog() {
   confirmDialog.value = true;
-  message.value = "";
+  deleteError.value = "";
 }
 
 function openReplaceDialog() {
@@ -384,17 +345,17 @@ function successReplace() {
   showMessage("Access card replaced successfully!", "success");
 }
 
-async function handleDeleteCard() {
+async function handleDeleteCard(remarks: string) {
   deleteLoading.value = true;
   try {
-    await _deleteCard({ cardId: selectedCardInUnit.value?._id ?? "" });
+    await _deleteCard({ cardId: selectedCardInUnit.value?._id ?? "", remarks });
     await getCards();
     statsRef.value?.refresh();
     selectedCardId.value = null;
     confirmDialog.value = false;
     previewDialog.value = false;
   } catch (error: any) {
-    message.value = error?.response?._data?.message || "Failed to delete card";
+    deleteError.value = error?.response?._data?.message || "Failed to delete card";
   } finally {
     deleteLoading.value = false;
   }

package/components/BulletinBoardManagement.vue

@@ -83,6 +83,11 @@ const props = defineProps({
     }, canDeleteBulletinBoard: {
         type: Boolean,
         default: true
+    },
+    recipients: {
+        type: String,
+        default: "",
+        required: false
     }
 })
 
@@ -158,7 +163,7 @@ const {
     pending: getAnnouncementPending,
 } = await useLazyAsyncData(
     `get-all-announcements-${page.value}`,
-    () => getAll({ page: page.value, site: siteId, status: status.value }),
+    () => getAll({ page: page.value, site: siteId, status: status.value, recipients: props.recipients }),
     {
         watch: [page, () => route.query],
     }

package/components/CleaningScheduleMain.vue

@@ -57,10 +57,9 @@
           }}
         </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>
+          <v-chip class="text-capitalize" variant="flat" color="primary" pill>
+            {{ remainingTime[item._id] || "No Status" }}
+          </v-chip>
         </template>
         <template #item.status="{ value }">
           <v-chip
@@ -129,7 +128,8 @@ const headers = [
   { title: "Completion Date", value: "completionDate" },
   { title: "", value: "download" },
 ];
-const remainingTime = ref({} as any);
+const remainingTime = ref({} as Record<string, string>);
+const remainingSeconds = ref({} as Record<string, number>);
 const downloadingId = ref<string | null>(null);
 
 const { getCleaningSchedules, downloadChecklistPdf } = useCleaningSchedules();
@@ -148,11 +148,22 @@ const getStatusColor = (status: unknown): string => {
     case "completed":
     case "accepted":
       return "success";
+    case "closed":
+    case "rejected":
+      return "error";
     default:
       return "secondary";
   }
 };
 
+const getCloseInColor = (id: string): string => {
+  const secs = remainingSeconds.value[id];
+  if (secs === undefined) return "primary";
+  if (secs <= 0) return "error";
+  if (secs < 3 * 3600) return "warning";
+  return "primary";
+};
+
 const {
   canDownloadSchedule,
   canViewSchedules,
@@ -205,11 +216,11 @@ const formatTime = (seconds: number) => {
 };
 
 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);
+    remainingSeconds.value[itemId] = _time;
+    remainingTime.value[itemId] = _time <= 0 ? "00h 00m" : formatTime(_time);
   });
 };