@7365admin1/layer-common 3.0.20 → 3.0.22

package/components/VisitorSocketPopUp.vue

@@ -0,0 +1,312 @@
+<template>
+  <div>
+    <!-- <h1>Live Monitoring</h1>
+
+    Connection Status Indicator
+    <div :class="['status-badge', status]">Status: {{ status }}</div>
+    <pre>
+          path: {{ path }}
+    </pre>
+    <pre>visitorData: {{ visitorSocketData }}</pre>
+    <pre>socketTrigger:{{ socketUnregisteredVisitorTrigger }}</pre>
+
+    <section v-if="newVisitor">
+      <h3>New Plate Detected!</h3>
+      <div class="visitor-card">
+        <p>
+          <strong>Plate Number:</strong>
+          {{ newVisitor.plateNumber || "Unknown" }}
+        </p>
+        <p><strong>Site ID:</strong> {{ newVisitor.site }}</p>
+        <p><strong>Time:</strong> {{ new Date().toLocaleTimeString() }}</p>
+      </div>
+    </section>
+
+    <section v-if="visitorList.length > 0">
+      <h3>Recent History</h3>
+      <ul>
+        <li v-for="(v, index) in visitorList" :key="index">
+          {{ v?.plateNumber }} — {{ new Date().toLocaleTimeString() }}
+        </li>
+      </ul>
+    </section> -->
+
+    <v-snackbar
+      v-if="!isVisitorRoute && !socketUnregisteredVisitorTrigger"
+      v-model="snackBarMessage.modal"
+      :color="snackBarMessage.color"
+      :timeout="snackBarMessage.timeout"
+      location="bottom center"
+      class="rounded-xl"
+      multi-line
+      :z-index="100000000"
+    >
+      <div class="d-flex flex-column align-start ga-2">
+        <div class="d-flex align-center ga-2">
+          <span class="text-1-4rem mr-2">{{ snackBarMessage.text }}</span>
+        </div>
+        <v-btn
+          v-if="snackBarMessage.isUnregistered"
+          rounded="md"
+          variant="text"
+          color="baseButton"
+          class="text-truncate text-decoration-underline px-0"
+          @click="goToUnregistered"
+        >
+          Go to Unregistered
+        </v-btn>
+      </div>
+
+      <template #actions>
+        <v-btn
+          icon="mdi-close"
+          variant="text"
+          @click="handleCloseSnackbar"
+        />
+      </template>
+    </v-snackbar>
+
+    <v-dialog v-model="permanentMessageDialog.modal" max-width="480" persistent>
+      <v-card>
+        <v-card-title class="text-h6">Notice</v-card-title>
+        <v-card-text>{{ permanentMessageDialog.text }}</v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn
+            color="primary"
+            variant="elevated"
+            @click="permanentMessageDialog.modal = false"
+          >
+            Close
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { io, type Socket } from "socket.io-client";
+import type { TVisitorSocketData } from "../composables/useVisitorSocket";
+
+const props = defineProps({
+  siteId: {
+    type: String,
+    default: "",
+  },
+});
+
+const config = useRuntimeConfig();
+const publicConfig = config.public as Record<string, string | undefined>;
+const route = useRoute();
+const { tab } = useVisitor();
+const { socketUnregisteredVisitorTrigger, visitorSocketData } =
+  useVisitorSocket();
+
+const socket = shallowRef<Socket | null>(null);
+const status = ref("disconnected");
+const newVisitor = ref<TVisitorSocketData | null>(null);
+const visitorList = ref<TVisitorSocketData[]>([]);
+const lastPlateNumber = ref("");
+
+const snackBarMessage = reactive({
+  timeout: 3000,
+  text: "",
+  color: "",
+  modal: false,
+  isUnregistered: false,
+});
+
+const permanentMessageDialog = reactive({
+  modal: false,
+  text: "",
+});
+
+const path = computed(() => route.path);
+const isVisitorManagementPath = (path: string) =>
+  path.includes("/visitor-management");
+const isVisitorRoute = computed(
+  () =>
+    path.value === "/visitors" ||
+    isVisitorManagementPath(path.value)
+);
+const isUnregisteredVisitorRoute = computed(
+  () => isVisitorRoute.value && route.query.tab === "unregistered"
+);
+
+const socketBaseUrl = computed(
+  () => publicConfig.socketUrl || publicConfig.API_CORE || ""
+);
+
+const formatDateQuery = (date: Date) => date.toISOString().slice(0, 10);
+
+const getDefaultDateQuery = () => {
+  const dateTo = new Date();
+  const dateFrom = new Date(dateTo);
+  dateFrom.setMonth(dateFrom.getMonth() - 1);
+
+  return {
+    dateFrom: formatDateQuery(dateFrom),
+    dateTo: formatDateQuery(dateTo),
+  };
+};
+
+const handleCloseSnackbar = () => {
+  snackBarMessage.modal = false;
+  socketUnregisteredVisitorTrigger.value = false;
+  newVisitor.value = null;
+
+};
+
+const showTransientMessage = (
+  text: string,
+  color: string,
+  isUnregistered = false
+) => {
+  snackBarMessage.text = text;
+  snackBarMessage.color = color;
+  snackBarMessage.modal = true;
+  snackBarMessage.timeout = 20000;
+  snackBarMessage.isUnregistered = isUnregistered;
+};
+
+const connectSocket = () => {
+  if (!props.siteId || !socketBaseUrl.value || socket.value) {
+    return;
+  }
+
+  const namespace = `/site-${props.siteId}`;
+  socket.value = io(`${socketBaseUrl.value}${namespace}`, {
+    path: "/socket.io",
+    transports: ["websocket"],
+    reconnectionAttempts: 5,
+  });
+
+  socket.value.on("connect", () => {
+    status.value = "connected";
+  });
+
+  socket.value.on("anpr-messages", (data: TVisitorSocketData) => {
+    const plateNumber = data?.plateNumber?.trim() || "";
+    const isCheckIn = Boolean(plateNumber);
+    const isPlateNumberChanging =
+      Boolean(lastPlateNumber.value) && lastPlateNumber.value !== plateNumber;
+
+    socketUnregisteredVisitorTrigger.value = false;
+    visitorSocketData.value = null;
+    visitorSocketData.value = data;
+    newVisitor.value = data;
+
+    if (!isVisitorRoute.value && isCheckIn) {
+      showTransientMessage(
+        `New plate detected: ${plateNumber}`,
+        "info",
+        true
+      );
+      lastPlateNumber.value = plateNumber;
+      return;
+    }
+
+    if (isUnregisteredVisitorRoute.value && isCheckIn) {
+      if (isPlateNumberChanging) {
+        showTransientMessage(`New plate detected: ${plateNumber}`, "info", true);
+      } else {
+        snackBarMessage.modal = false;
+      }
+
+      lastPlateNumber.value = plateNumber;
+      return;
+    }
+
+    if (isCheckIn) {
+      lastPlateNumber.value = plateNumber;
+    }
+
+    if (data?.message) {
+      showTransientMessage(data.message, "error");
+    }
+
+    if (data?.messagePermanent) {
+      permanentMessageDialog.text = data.messagePermanent;
+      permanentMessageDialog.modal = true;
+    }
+
+    visitorList.value.unshift(data);
+  });
+
+  socket.value.on("connect_error", () => {
+    status.value = "disconnected";
+  });
+};
+
+const disconnectSocket = () => {
+  if (socket.value) {
+    socket.value.disconnect();
+    socket.value = null;
+  }
+};
+
+const goToUnregistered = async () => {
+  tab.value = "unregistered";
+  socketUnregisteredVisitorTrigger.value = true;
+  snackBarMessage.modal = false;
+
+  if (route.params.org && route.params.site) {
+    const defaultDateQuery = getDefaultDateQuery();
+
+    await navigateTo({
+      path: `/${route.params.org}/${route.params.site}/visitor-management`,
+      query: {
+        tab: "unregistered",
+        dateFrom: route.query.dateFrom || defaultDateQuery.dateFrom,
+        dateTo: route.query.dateTo || defaultDateQuery.dateTo,
+      },
+    });
+    return;
+  }
+
+  await navigateTo({
+    name: "visitors",
+    query: {
+      tab: "unregistered",
+    },
+  });
+};
+
+watch(
+  () => props.siteId,
+  () => {
+    disconnectSocket();
+    connectSocket();
+  },
+  { immediate: true }
+);
+
+watch(
+  () => route.fullPath,
+  () => {
+    if (isUnregisteredVisitorRoute.value) {
+      snackBarMessage.modal = false;
+    }
+  },
+  { immediate: true }
+);
+
+onUnmounted(() => {
+  disconnectSocket();
+});
+
+watch(
+  () => route.path,
+  (currentPath, previousPath) => {
+    if (
+      previousPath &&
+      isVisitorManagementPath(previousPath) &&
+      !isVisitorManagementPath(currentPath)
+    ) {
+      handleCloseSnackbar();
+    }
+  }
+);
+
+</script>

package/composables/useHidAmico.ts

@@ -132,6 +132,25 @@ export default function useHidAmico() {
     });
   }
 
+  function getIntercomStatus(readerId: string) {
+    return useNuxtApp().$api<Record<string, any>>(`${basePath}/readers/${readerId}/intercom/status`, {
+      method: "GET",
+    });
+  }
+
+  function makeIntercomCall(readerId: string, target: string) {
+    return useNuxtApp().$api<Record<string, any>>(`${basePath}/readers/${readerId}/intercom/call`, {
+      method: "POST",
+      body: { target },
+    });
+  }
+
+  function finalizeIntercomCall(readerId: string) {
+    return useNuxtApp().$api<Record<string, any>>(`${basePath}/readers/${readerId}/intercom/hangup`, {
+      method: "POST",
+    });
+  }
+
   return {
     getReaders,
     createReader,
@@ -148,5 +167,8 @@ export default function useHidAmico() {
     createIdentity,
     updateIdentity,
     deleteIdentity,
+    getIntercomStatus,
+    makeIntercomCall,
+    finalizeIntercomCall,
   };
 }

package/composables/useHidNavigation.ts

@@ -34,6 +34,13 @@ export default function useHidNavigation() {
             params: { org, site },
           },
         },
+        {
+          title: "Intercom",
+          route: {
+            name: "org-site-access-mgmt-intercom",
+            params: { org, site },
+          },
+        },
         {
           title: "Identity Mapping",
           route: {

package/composables/useVisitor.ts

@@ -94,6 +94,8 @@ export default function () {
     tab?: string;
   };
 
+  const tab = useState("visitorsTab", () => "visitor");
+
   async function getVisitors({
     page = 1,
     limit = 10,
@@ -190,6 +192,7 @@ export default function () {
   }
 
   return {
+    tab,
     typeFieldMap,
     visitorSelection,
     contractorTypes,

package/composables/useVisitorSocket.ts

@@ -0,0 +1,25 @@
+export type TVisitorSocketData = {
+  _id: string;
+  site: string;
+  plateNumber: string;
+  message?: string;
+  messagePermanent?: string;
+  reload?: boolean;
+};
+
+export const useVisitorSocket = () => {
+  const socketUnregisteredVisitorTrigger = useState(
+    "socketUnregisteredVisitorTrigger",
+    () => false,
+  );
+  const visitorSocketData = useState(
+    "visitorSocketData",
+    (): TVisitorSocketData | null => null,
+  );
+  
+
+  return {
+    socketUnregisteredVisitorTrigger,
+    visitorSocketData,
+  };
+};

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.0.20",
+  "version": "3.0.22",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {
@@ -40,6 +40,7 @@
     "qrcode": "^1.5.4",
     "qrcode.vue": "^3.4.1",
     "sass": "^1.80.6",
+    "socket.io-client": "^4.8.3",
     "vue-draggable-next": "^2.3.0",
     "vue3-signature": "^0.2.4",
     "vuetify-pro-tiptap": "^2.8.2",

package/pages/[org]/[site]/access-mgmt/intercom/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <v-container fluid>
+    <HidEnabledGate
+      :site="siteId"
+      :org="orgId"
+      message="Enable HID as a service for this site before configuring HID intercom."
+    >
+      <HidIntercomManagement :site="siteId" />
+    </HidEnabledGate>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: "default",
+  middleware: ["01-auth", "02-org"],
+  memberOnly: true,
+});
+
+const route = useRoute();
+
+const orgId = computed(() => String(route.params.org || ""));
+const siteId = computed(() => String(route.params.site || ""));
+</script>

package/types/verification.d.ts

@@ -1,11 +1,15 @@
 declare type TVerificationMetadata = {
   app?: string;
   role?: string;
+  name?: string;
+  org?: string;
+  siteId?: string;
+  siteName?: string;
 };
 
 declare type TMiniVerification = Pick<
   TVerification,
-  "createdAt" | "email" | "_id" | "status"
+  "createdAt" | "email" | "_id" | "status" | "metadata" | "roleName"
 >;
 
 declare type TVerification = {
@@ -13,6 +17,7 @@ declare type TVerification = {
   type: string;
   email: string;
   metadata?: TVerificationMetadata;
+  roleName?: string;
   status?: string;
   createdAt?: string;
   updatedAt?: string | null;