@iservice365/layer-common 1.1.0 → 1.3.0

package/components/VisitorFormSelection.vue

@@ -0,0 +1,53 @@
+<template>
+  <v-card width="100%">
+    <v-toolbar>
+      <v-row no-gutters class="fill-height px-6" align="center">
+        <span class="font-weight-bold text-h5 text-capitalize">
+          Add Visitor
+        </span>
+      </v-row>
+    </v-toolbar>
+
+    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-5">
+      <span class="text-subtitle-2 w-100 font-weight-medium d-flex justify-center mb-3">Please Select Visitor Type</span>
+      <template v-for="item in selection" :key="item.value">
+        <v-btn color="primary-button" block variant="flat" rounded="md" size="48" :text="item.label" @click="select(item.value)" class="my-2 text-capitalize text-subtitle-2" />
+      </template>
+    </v-card-text>
+
+    <v-toolbar density="compact">
+      <v-row no-gutters>
+        <v-col cols="12">
+          <v-btn
+            tile
+            block
+            variant="text"
+            class="text-none"
+            size="48"
+            @click="cancel"
+          >
+            Cancel
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-toolbar>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+const prop = defineProps({
+});
+
+const emit = defineEmits(['cancel', 'select']);
+const { visitorSelection: selection} = useVisitor();
+
+
+
+function cancel() {
+  emit("cancel");
+}
+
+function select(value: string) {
+  emit("select", value);
+}
+</script>

package/components/VisitorManagement.vue

@@ -0,0 +1,569 @@
+<template>
+  <v-row no-gutters>
+    <TableMain
+      :headers="headers"
+      :items="items"
+      :loading="getVisitorPending"
+      :page="page"
+      :pages="pages"
+      :extension-height="110"
+      :pageRange="pageRange"
+      :canCreate="canAddVisitor"
+      @refresh="getVisitorRefresh"
+      @update:page="handleUpdatePage"
+      createLabel="Add Visitor"
+      show-header
+      @row-click="handleRowClick"
+      @create="dialog.showSelection = true"
+    >
+      <template #extension>
+        <v-row no-gutters class="w-100 d-flex flex-column">
+          <v-tabs
+            v-model="activeTab"
+            color="primary"
+            :height="40"
+            @update:model-value="toRoute"
+            class="w-100"
+          >
+            <v-tab
+              v-for="tab in tabOptions"
+              :value="tab.status"
+              :key="tab.status"
+              class="text-capitalize"
+            >
+              {{ tab.name }}
+            </v-tab>
+          </v-tabs>
+
+          <v-card
+            class="w-100 px-3 d-flex align-center ga-5 py-2"
+            flat
+            :height="60"
+          >
+            <v-text-field
+              v-model="searchInput"
+              density="compact"
+              placeholder="Search"
+              clearable
+              max-width="300"
+              append-inner-icon="mdi-magnify"
+              hide-details
+            />
+            <v-checkbox
+              v-model="displayCheckedOutOnly"
+              class="text-subtitle-2"
+              hide-details
+            >
+              <template #label>
+                <span class="text-caption">Not Checked Out</span>
+              </template>
+            </v-checkbox>
+            <InputDateTimePicker
+              v-model:utc="dateFrom"
+              density="compact"
+              hide-details
+            />
+            <InputDateTimePicker
+              v-model:utc="dateTo"
+              density="compact"
+              hide-details
+            />
+            <v-select
+              v-model="filterTypes"
+              label="Filter by types"
+              item-title="label"
+              item-value="value"
+              :items="visitorSelection"
+              density="compact"
+              clearable
+              multiple
+              max-width="200"
+              hide-details
+            >
+              <template v-slot:selection="{ item, index }">
+                <div class="d-flex align-center text-caption text-nowrap">
+                  <v-chip
+                    v-if="index === 0"
+                    color="error"
+                    :text="filterTypeSelectionLabel()"
+                    size="x-small"
+                    variant="tonal"
+                    class="ml-2"
+                  />
+                </div>
+              </template>
+            </v-select>
+          </v-card>
+        </v-row>
+      </template>
+
+      <template v-slot:item.name="{ item }">
+        <span class="d-flex align-center ga-2">
+          <span>
+            <AvatarMain :name="item?.name" :size="20" :id="item?._id" />
+          </span>
+          <span class="text-capitalize">{{ item?.name }}</span>
+        </span>
+      </template>
+
+      <template v-slot:item.type-company="{ item }">
+        <span class="d-flex align-center ga-2">
+          <v-icon icon="mdi-user" size="15" />
+          <span v-if="item.type === 'contractor'" class="text-capitalize">{{
+            formatCamelCaseToWords(item.contractorType)
+          }}</span>
+          <span v-else class="text-capitalize">{{ formatType(item) }}</span>
+        </span>
+        <span class="d-flex align-center ga-2">
+          <v-icon icon="mdi-domain" size="15" />
+          <span class="text-capitalize">{{ item?.company || "N/A" }}</span>
+        </span>
+      </template>
+
+      <template v-slot:item.location="{ item }">
+        <span class="d-flex align-center ga-2">
+          <v-icon icon="mdi-storefront-outline" size="15" />
+          <span class="text-capitalize">{{
+            formatLocation({
+              block: item.block,
+              level: item.level,
+              unit: item.unitName,
+            })
+          }}</span>
+        </span>
+      </template>
+
+      <template v-slot:item.contact-vehicleNumber="{ item }">
+        <span class="d-flex align-center ga-2">
+          <v-icon icon="mdi-phone" size="15" />
+          <span class="text-capitalize">{{ item?.contact || "N/A" }}</span>
+        </span>
+        <span class="d-flex align-center ga-2">
+          <v-icon icon="mdi-car-back" size="15" />
+          <span class="text-capitalize">{{ item?.plateNumber || "N/A" }}</span>
+        </span>
+      </template>
+
+      <template v-slot:item.checkin-out="{ item }">
+        <span class="d-flex align-center ga-2">
+          <v-icon icon="mdi-clock-time-four-outline" color="green" size="20" />
+          <span class="text-capitalize">{{
+            UTCToLocalTIme(item.checkIn) || "-"
+          }}</span>
+        </span>
+        <span class="d-flex align-center ga-2">
+          <v-icon icon="mdi-clock-time-eight-outline" color="red" size="20" v-if="item.checkOut" />
+          <template v-if="item.checkOut">
+            <span class="text-capitalize">{{
+              UTCToLocalTIme(item.checkOut) || "_"
+            }}</span>
+            <span v-if="item?.manualCheckout">
+              <TooltipInfo
+                text="Manual Checkout"
+                density="compact"
+                size="x-small"
+              />
+            </span>
+          </template>
+          <span v-else>
+            <v-btn
+              size="x-small"
+              class="text-capitalize"
+              color="red"
+              text="Checkout"
+              :loading="loading.checkingOut && item?._id === selectedVisitorId"
+              @click.stop="handleCheckout(item._id)"
+              v-if="canCheckoutVisitor"
+            />
+          </span>
+        </span>
+      </template>
+    </TableMain>
+
+    <v-dialog v-model="dialog.showSelection" width="450" persistent>
+      <VisitorFormSelection
+        @cancel="dialog.showSelection = false"
+        @select="handleSelectVisitorType"
+      />
+    </v-dialog>
+
+    <v-dialog
+      v-model="dialog.addVisitor"
+      v-if="activeVisitorFormType"
+      width="450"
+      persistent
+    >
+      <VisitorForm
+        mode="add"
+        :org="orgId"
+        :site="siteId"
+        :type="activeVisitorFormType"
+        @back="handleClickBack"
+        @done="handleVisitorFormDone"
+        @done:more="handleVisitorFormCreateMore"
+      />
+    </v-dialog>
+
+    <v-dialog v-model="dialog.viewVisitor" width="450" persistent>
+      <VehicleUpdateMoreAction
+        title="Preview"
+        :can-update="canUpdateVisitor"
+        :can-delete="canDeleteVisitor"
+        @close="dialog.viewVisitor = false"
+        edit-button-label="Edit Visitor"
+        delete-button-label="Delete Visitor"
+        @delete="handleDeleteVisitor"
+      >
+        <template v-slot:content>
+          <v-row no-gutters class="mb-4">
+            <v-col v-for="(label, key) in formattedFields" :key="key" cols="12">
+              <span
+                v-if="key === 'checkOut' && !selectedVisitorObject[key] && canCheckoutVisitor"
+                class="d-flex align-center"
+              >
+                <strong>{{ label }}:</strong>
+                <v-btn
+                  size="x-small"
+                  class="ml-3 text-capitalize"
+                  color="red"
+                  text="Checkout"
+                  :disabled="loading.checkingOut"
+                  @click="handleCheckout(selectedVisitorId as string)"
+                />
+              </span>
+
+              <span
+                v-else-if="selectedVisitorObject[key]"
+                class="d-flex ga-3 align-center"
+                ><strong>{{ label }}:</strong>
+                {{ formatValues(key, selectedVisitorObject[key]) }}
+                <TooltipInfo
+                  v-if="key === 'checkOut'"
+                  text="Manual Checkout"
+                  density="compact"
+                  size="x-small"
+                />
+              </span>
+            </v-col>
+          </v-row>
+        </template>
+      </VehicleUpdateMoreAction>
+    </v-dialog>
+
+    <v-dialog v-model="dialog.deleteConfirmation" width="450" persistent>
+      <CardDeleteConfirmation
+        prompt-title="Are you sure want to delete this visitor?"
+        :loading="loading.deletingVisitor"
+        @close="dialog.deleteConfirmation = false"
+        @delete="handleProceedDeleteVisitor"
+      />
+    </v-dialog>
+
+    <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
+  </v-row>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  middleware: ["01-auth", "02-org"],
+});
+
+const props = defineProps({
+  canAddVisitor: {
+    type: Boolean,
+    default: true,
+  },
+  canViewVisitor: {
+    type: Boolean,
+    default: true,
+  },
+  canUpdateVisitor: {
+    type: Boolean,
+    default: true,
+  },
+  canDeleteVisitor: {
+    type: Boolean,
+    default: true,
+  },
+  canCheckoutVisitor: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const headers = [
+  { title: "Name", value: "name" },
+  { title: "Type/Company", value: "type-company" },
+  { title: "Location", value: "location" },
+  { title: "Contact/Vehicle No.", value: "contact-vehicleNumber" },
+  { title: "Check In/Out", value: "checkin-out" },
+];
+
+const {
+  getVisitors,
+  visitorSelection,
+  typeFieldMap,
+  deleteVisitor,
+  updateVisitor,
+} = useVisitor();
+const { debounce, formatCamelCaseToWords, formatDate, UTCToLocalTIme } =
+  useUtils();
+const { formatLocation } = useSecurityUtils();
+const { status: visitorStatus } = useRoute().query;
+const { org: orgId, site: siteId } = useRoute().params as {
+  org: string;
+  site: string;
+};
+const routeName = useRoute().name;
+
+const items = ref<Array<Record<string, any>>>([]);
+const page = ref(1);
+const pages = ref(0);
+const pageRange = ref("-- - -- of --");
+const activeTab = ref(visitorStatus ?? "registered");
+const activeVisitorFormType = ref<TVisitorType | null>(null);
+const selectedVisitorId = ref<string | null>(""); // selected visitor for viewing/actions
+
+//filter states
+const searchInput = ref("");
+const dateFrom = ref("");
+const dateTo = ref("");
+const filterTypes = ref([]);
+const displayCheckedOutOnly = ref<boolean>(false);
+
+const message = ref("");
+const messageColor = ref("");
+const messageSnackbar = ref(false);
+
+const loading = reactive({
+  deletingVisitor: false,
+  fetchingVisitors: false,
+  checkingOut: false,
+});
+
+const dialog = reactive({
+  showSelection: false,
+  addVisitor: false,
+  viewVisitor: false,
+  deleteConfirmation: false,
+});
+
+const tabOptions = [
+  { name: "Registered", status: "registered" },
+  { name: "Unregistered", status: "unregistered" },
+];
+
+const formatType = (item: any) =>
+  (item.deliveryType ? item.deliveryType + "-" : "") + item.type;
+
+const formattedFields = {
+  name: "Name",
+  nric: "NRIC",
+  contact: "Phone Number",
+  plateNumber: "Vehicle Number",
+  block: "Block",
+  level: "Level",
+  unitName: "Unit",
+  checkIn: "Check In",
+  checkOut: "Check Out",
+  remarks: "Remarks",
+} as const;
+
+function filterTypeSelectionLabel() {
+  const length = filterTypes.value.length;
+  return `${length} selected ${length === 1 ? "type" : "types"}` as string;
+}
+
+function toRoute(status: any) {
+  const obj = tabOptions.find((x) => x.status === status);
+  if (!obj) return;
+  navigateTo({
+    name: routeName,
+    params: {
+      org: orgId,
+    },
+    query: {
+      status: obj.status,
+    },
+  });
+}
+
+const {
+  data: getVisitorReq,
+  refresh: getVisitorRefresh,
+  pending: getVisitorPending,
+} = await useLazyAsyncData(
+  `get-all-visitors-${visitorStatus}`,
+  () =>
+    getVisitors({
+      page: page.value,
+      org: orgId,
+      site: siteId,
+      search: searchInput.value,
+      dateTo: dateTo.value,
+      dateFrom: dateFrom.value,
+      type: filterTypes.value.filter(Boolean).join(","),
+      displayNoCheckOut: displayCheckedOutOnly.value,
+      status: activeTab.value as string
+    }),
+  {
+    watch: [page, activeTab],
+  }
+);
+
+watch(getVisitorReq, (newData: any) => {
+  if (newData) {
+    items.value = newData.items ?? [];
+    pages.value = newData.pages ?? 0;
+    pageRange.value = newData?.pageRange ?? "-- - -- of --";
+  }
+});
+
+const selectedVisitorObject = computed(() => {
+  const obj = items.value.find((x) => x?._id === selectedVisitorId.value);
+  if (!obj) return {};
+  const type = obj?.type;
+  if (!type) return {};
+  let includedKeys: string[] = ["checkIn", "checkOut"];
+  includedKeys.unshift(...(typeFieldMap[type] ?? []));
+  return Object.fromEntries(
+    Object.entries(obj).filter(([key]) => includedKeys.includes(key))
+  );
+});
+
+function formatValues(key: string, value: any) {
+  if (!value) return "";
+  switch (key) {
+    case "unit":
+      return value?.name;
+    case "checkIn":
+      return formatDate(value);
+    case "checkOut":
+      return formatDate(value);
+  }
+
+  return value;
+}
+
+function handleRowClick(data: any) {
+  selectedVisitorId.value = data?.item?._id;
+  dialog.viewVisitor = true;
+}
+
+function handleUpdatePage(newPageNum: number) {
+  page.value = newPageNum;
+}
+
+function handleSelectVisitorType(type: TVisitorType) {
+  dialog.showSelection = false;
+  dialog.addVisitor = true;
+  activeVisitorFormType.value = type;
+}
+
+function handleClickBack() {
+  dialog.showSelection = true;
+  dialog.addVisitor = false;
+}
+
+function handleVisitorFormDone() {
+  getVisitorRefresh();
+  dialog.showSelection = false;
+  dialog.addVisitor = false;
+}
+
+function handleVisitorFormCreateMore() {
+  getVisitorRefresh();
+  dialog.showSelection = true;
+  dialog.addVisitor = false;
+}
+
+function handleDeleteVisitor() {
+  dialog.deleteConfirmation = true;
+  dialog.viewVisitor = false;
+}
+
+function showMessage(msg: string, color: string) {
+  message.value = msg;
+  messageColor.value = color;
+  messageSnackbar.value = true;
+}
+
+async function handleProceedDeleteVisitor() {
+  try {
+    loading.deletingVisitor = true;
+    const userId = selectedVisitorId.value;
+    const res = await deleteVisitor(userId as string);
+    if (res) {
+      showMessage("Visitor successfully deleted!", "info");
+      await getVisitorRefresh();
+      dialog.deleteConfirmation = false;
+    }
+  } catch (error: any) {
+    const errorMessage = error?.response?._data?.message;
+    console.log("[ERROR]", error);
+    showMessage(
+      errorMessage || "Something went wrong. Please try again later.",
+      "error"
+    );
+  } finally {
+    loading.deletingVisitor = false;
+  }
+}
+
+async function handleCheckout(userId: string) {
+  if (!userId) {
+    showMessage("Invalid userId", "error");
+    return;
+  }
+  selectedVisitorId.value = userId;
+
+  try {
+    loading.checkingOut = true;
+    const res = await updateVisitor(userId as string, {
+      checkOut: new Date().toISOString(),
+    });
+    if (res) {
+      showMessage("Visitor successfully checked-out!", "info");
+      await getVisitorRefresh();
+      dialog.viewVisitor = false;
+    }
+  } catch (error: any) {
+    const errorMessage = error?.response?._data?.message;
+    console.log("[ERROR]", error);
+    showMessage(
+      errorMessage || "Something went wrong. Please try again later.",
+      "error"
+    );
+  } finally {
+    loading.checkingOut = false;
+  }
+}
+
+// get dates in ISO String (UTC Time)
+function getUTCDates() {
+  const today = new Date();
+  const yesterday = new Date();
+  yesterday.setUTCDate(today.getUTCDate() - 1);
+
+  const dateFrom = ref(yesterday.toISOString()); // yesterday in UTC
+  const dateTo = ref(today.toISOString()); // today in UTC
+
+  const dateYesterday = yesterday.toISOString();
+  const dateToday = today.toISOString();
+
+  return { dateYesterday, dateToday };
+}
+
+// filter debounce search
+const debounceSearch = debounce(getVisitorRefresh, 500);
+
+watch(
+  [searchInput, dateTo, dateFrom, displayCheckedOutOnly, filterTypes],
+  ([]) => {
+    debounceSearch();
+  },
+  { immediate: false, deep: true }
+);
+</script>
+
+<style scoped></style>