@7365admin1/layer-common 1.8.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,490 @@
+<template>
+  <v-row no-gutters>
+    <TableMain :headers="headers" :items="items" :loading="getVisitorPending" :page="page" :pages="pages"
+      :extension-height="110" :offset="300" :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="displayNotCheckedOut" 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="false" :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.vehicleNumberUsersList" persistent max-width="600">
+      <SearchVehicleNumberUser :vehicle-number="'123123'"  @close="dialog.vehicleNumberUsersList = false" @update:people="handleUpdateAutofillDetails"/>
+    </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, search } = useRoute().query as { status: string, search: string};
+
+const route = useRoute()
+const router = useRouter()
+const { org: orgId, site: siteId } = route.params as {
+  org: string;
+  site: string;
+};
+const routeName = route.name;
+
+const items = ref<Array<Record<string, any>>>([]);
+const page = ref(1);
+const pages = ref(0);
+const pageRange = ref("-- - -- of --");
+const activeTab = ref("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<TVisitorType[]>([]);
+const displayNotCheckedOut = 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,
+  vehicleNumberUsersList: 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",
+  company: "Company",
+  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;
+  page.value = 1
+  navigateTo({
+    name: routeName,
+    params: {
+      org: orgId,
+    },
+    query: {
+      status: obj.status,
+    },
+  });
+}
+
+const {
+  data: getVisitorReq,
+  refresh: getVisitorRefresh,
+  pending: getVisitorPending,
+} = await useLazyAsyncData(
+  `get-all-visitors-${activeTab.value}-${page.value}-${siteId}`
+  ,
+  () =>
+    getVisitors({
+      page: page.value,
+      site: siteId,
+      search: searchInput.value,
+      dateTo: dateTo.value,
+      dateFrom: dateFrom.value,
+      type: filterTypes.value.filter(Boolean).join(","),
+      status: activeTab.value as string,
+      checkedOut: displayNotCheckedOut.value ? false : undefined
+    }),
+  {
+    watch: [page, () => route.query],
+  }
+);
+
+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: any) => x?._id === selectedVisitorId.value);
+  if (!obj) return {};
+  const type = obj?.type as TVisitorType | undefined;
+  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;
+}
+
+function handleUpdateAutofillDetails(people: TPeople){
+  dialog.vehicleNumberUsersList = false
+  console.log('people', people)
+}
+
+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;
+  }
+}
+
+
+
+const updateRouteQuery = debounce(
+  (search: string, from: string, to: string, types: string[], status, checkedOut) => {
+    router.replace({
+      query: {
+        ...route.query,
+        search: search || undefined,
+        dateFrom: from || undefined,
+        dateTo: to || undefined,
+        type: types.filter(Boolean).join(",") || undefined,
+        status: status || undefined,
+        ...(checkedOut === false ? { checkedOut: "false" } : { checkedOut: undefined })
+      },
+    });
+  },
+  500 // wait 500ms after last input
+);
+
+watch(
+  [searchInput, dateFrom, dateTo, filterTypes, activeTab, displayNotCheckedOut],
+  ([search, from, to, types, status, checkedOut]) => {
+    updateRouteQuery(search, from, to, types, status, checkedOut)
+
+  },
+  { deep: true }
+);
+
+
+
+onMounted(() => {
+  activeTab.value = (route.query.status as string) || "unregistered"
+  searchInput.value = (route.query.search as string) || "";
+  dateFrom.value = (route.query.dateFrom as string) || "";
+  dateTo.value = (route.query.dateTo as string) || "";
+  filterTypes.value = ((route.query.type as string)?.split(",") || []).filter(Boolean) as TVisitorType[];
+  displayNotCheckedOut.value = !!(route.query.checkedOut as string) || false
+
+})
+</script>
+
+<style scoped></style>