@7365admin1/layer-common 3.0.21 → 3.0.22

package/components/InvitationMain.vue

@@ -90,7 +90,7 @@
               v-if="props.cancelInvitation"
             >
               <template v-slot:activator="{ props }">
-                <v-icon v-bind="props">mdi-dots-horizontal</v-icon>
+                <v-icon v-bind="props">mdi-dots-vertical</v-icon>
               </template>
               <v-list>
                 <v-list-item @click="openConfirmDialog(item._id ?? '')" v-if="item.status === 'pending'">
@@ -99,6 +99,9 @@
               </v-list>
             </v-menu>
           </template>
+          <template #item.status="{value}">
+            {{ formatStatus(value) }}
+          </template>
         </v-data-table>
       </v-card>
     </v-col>
@@ -198,14 +201,27 @@ authenticate();
 
 const headers = computed(() => {
   const baseHeaders = [
+    {
+      title: "E-mail",
+      value: "email",
+    },
+    {
+      title: "Roles and Permission",
+      value: "roleName",
+    },
     {
       title: "Date",
       value: "createdAt",
     },
     {
-      title: "E-mail",
-      value: "email",
+      title: "Site Invited To",
+      value: "metadata.siteName",
+    },
+    {
+      title: "Status",
+      value: "status",
     },
+    
   ];
 
   if (props.status === "pending" && props.cancelInvitation) {
@@ -318,6 +334,19 @@ watchEffect(() => {
   }
 });
 
+const formatStatus = (status: string) => {
+  switch (status) {
+    case "pending":
+      return "Pending Invite";
+    case "expired":
+      return "Invitation expired";
+    case "accepted":
+      return "Accepted";
+    default:
+      return status?.[0]?.toUpperCase() + status?.slice(1) || "";
+  }
+};
+
 const dialogMember = ref(false);
 
 function inviteMember() {

package/components/MemberMain.vue

@@ -90,7 +90,7 @@
               width="150"
             >
               <template v-slot:activator="{ props }">
-                <v-icon v-bind="props">mdi-dots-horizontal</v-icon>
+                <v-icon v-bind="props">mdi-dots-vertical</v-icon>
               </template>
               <v-list>
                 <v-list-item

package/components/Nfc/NFCPatrolReportMain.vue

@@ -13,18 +13,7 @@
             Patrol Report Log
           </v-btn>
         </v-col>
-        <v-col cols="12" md="6" class="d-flex justify-end">
-          <v-btn
-            color="primary"
-         
-            variant="flat"
-            size="large"
-            class="text-none px-8"
-            prepend-icon="mdi-plus"
-          >
-            Create Routes & Schedule
-          </v-btn>
-        </v-col>
+    
       </v-row>
 
       <!-- Tabs -->
@@ -74,18 +63,7 @@
                 bg-color="white"
               />
             </v-col>
-            <v-col cols="12" md="3" class="px-md-2 mb-2 mb-md-0">
-              <v-btn
-                color="primary"
-                block
-                size="large"
-                rounded="lg"
-                class="text-none"
-                @click="loadReport"
-              >
-                Select Routes & Schedule
-              </v-btn>
-            </v-col>
+          
             <v-col cols="12" md="2" class="pl-md-2">
               <v-btn
                 variant="outlined"
@@ -312,7 +290,7 @@
             size="small"
             @click="dialogSelectRoute = false"
           />
-          <span class="text-h6 ml-2">Select Routes & Schedule</span>
+          <span class="text-h6 ml-2">Select Routes & Schedule </span>
         </v-card-title>
 
         <v-card-text class="px-6 pb-6">

package/components/ScheduleTaskMain.vue

@@ -162,7 +162,9 @@
                   class="mb-2"
                 >
                   <v-col cols="12">
-                    <div class="text-subtitle-2 font-weight-bold mb-2">Units Under Selected Areas:</div>
+                    <div class="text-subtitle-2 font-weight-bold mb-2">
+                      Units Under Selected Areas:
+                    </div>
                     <v-card variant="outlined" rounded>
                       <v-list density="compact" nav>
                         <template
@@ -179,33 +181,62 @@
                               <v-icon size="16">
                                 {{
                                   openViewAreas.includes(area.value || area._id)
-                                    ? 'mdi-chevron-down'
-                                    : 'mdi-chevron-right'
+                                    ? "mdi-chevron-down"
+                                    : "mdi-chevron-right"
                                 }}
                               </v-icon>
                             </template>
                             <template #append>
                               <v-progress-circular
-                                v-if="loadingViewUnits && !(area.value || area._id in fetchedViewAreaUnits)"
+                                v-if="
+                                  loadingViewUnits &&
+                                  !(
+                                    area.value ||
+                                    area._id in fetchedViewAreaUnits
+                                  )
+                                "
                                 size="14"
                                 width="2"
                                 indeterminate
                                 color="primary"
                               />
-                              <v-chip v-else size="x-small" variant="tonal" color="primary">
-                                {{ (fetchedViewAreaUnits[area.value || area._id] || []).length }}
+                              <v-chip
+                                v-else
+                                size="x-small"
+                                variant="tonal"
+                                color="primary"
+                              >
+                                {{
+                                  (
+                                    fetchedViewAreaUnits[
+                                      area.value || area._id
+                                    ] || []
+                                  ).length
+                                }}
                               </v-chip>
                             </template>
                           </v-list-item>
                           <v-expand-transition>
-                            <div v-show="openViewAreas.includes(area.value || area._id)">
+                            <div
+                              v-show="
+                                openViewAreas.includes(area.value || area._id)
+                              "
+                            >
                               <v-card-text class="px-3 py-2">
                                 <div
-                                  v-if="(fetchedViewAreaUnits[area.value || area._id] || []).length > 0"
+                                  v-if="
+                                    (
+                                      fetchedViewAreaUnits[
+                                        area.value || area._id
+                                      ] || []
+                                    ).length > 0
+                                  "
                                   class="d-flex flex-wrap ga-3"
                                 >
                                   <v-chip
-                                    v-for="unit in fetchedViewAreaUnits[area.value || area._id]"
+                                    v-for="unit in fetchedViewAreaUnits[
+                                      area.value || area._id
+                                    ]"
                                     :key="unit.unit"
                                     size="small"
                                     variant="tonal"
@@ -213,7 +244,9 @@
                                     {{ unit.name }}
                                   </v-chip>
                                 </div>
-                                <span v-else class="text-caption text-disabled">No units configured</span>
+                                <span v-else class="text-caption text-disabled"
+                                  >No units configured</span
+                                >
                               </v-card-text>
                             </div>
                           </v-expand-transition>
@@ -371,7 +404,9 @@ const messageSnackbar = ref(false);
 const messageColor = ref("success");
 
 const loadingViewUnits = ref(false);
-const fetchedViewAreaUnits = ref<Record<string, { name: string; unit: string }[]>>({});
+const fetchedViewAreaUnits = ref<
+  Record<string, { name: string; unit: string }[]>
+>({});
 const openViewAreas = ref<string[]>([]);
 
 const toggleViewArea = (id: string) => {
@@ -528,7 +563,7 @@ async function _deleteScheduleTask() {
 
     const response = await deleteScheduleTask(id);
     dialogDeleteTask.value = false;
-    showMessage(response?.message, "success");
+    showMessage("Scheduled task successfully deleted.", "success");
 
     await getTaskRefresh();
   } catch (error: any) {

package/components/UnitMain.vue

@@ -197,7 +197,11 @@
     </v-card>
   </v-dialog>
 
-  <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
+  <Snackbar
+    v-model="messageSnackbar"
+    :text="snackBarMessage"
+    :color="messageColor"
+  />
 
   <input
     ref="fileInput"
@@ -297,8 +301,11 @@ const dialogMode = ref<"add" | "edit">("add");
 const editingUnit = ref<Record<string, any>>({});
 const areaName = ref("");
 
+const snackBarMessage = ref("");
+
 function showMessage(msg: string, color: string = "error") {
   message.value = msg;
+  snackBarMessage.value = msg;
   messageColor.value = color;
   messageSnackbar.value = true;
 }

package/components/VisitorForm.vue

@@ -1269,6 +1269,8 @@ async function submit() {
       payload.visitorPass = visitor.visitorPass;
       payload.passKeys = visitor.passKeys;
     }
+
+    delete payload.createdBy;
   }
 
   if (prop.type === "contractor") {

package/components/VisitorManagement.vue

@@ -2034,6 +2034,29 @@ onMounted(() => {
       (route.query.checkedOut as string) == "true" || false;
   }
 });
+
+const { socketUnregisteredVisitorTrigger, visitorSocketData } =
+  useVisitorSocket();
+
+  watchEffect(async () => {
+    if (visitorSocketData.value && visitorSocketData.value.reload && activeTab.value === "unregistered") {
+      await getVisitorRefresh();
+      visitorSocketData.value = null;
+      socketUnregisteredVisitorTrigger.value = false;
+    }
+
+    if(visitorSocketData.value && visitorSocketData.value.plateNumber && socketUnregisteredVisitorTrigger.value && activeTab.value === "unregistered" && dialog.showSelection === false) {
+      // await getVisitorRefresh();
+      // visitorSocketData.value = null;
+      // socketUnregisteredVisitorTrigger.value = false;
+      setTimeout(async() => {
+        const { _id } = visitorSocketData.value;
+        await handleRegistrationUnregisteredVisitor({ _id });
+        socketUnregisteredVisitorTrigger.value = false;
+      }, 1000)
+    }
+  })
+
 </script>
 
 <style scoped></style>

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/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.21",
+  "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",