@7365admin1/layer-common 3.0.21 → 3.0.23

package/components/VisitorSocketPopUp.vue

@@ -0,0 +1,292 @@
+<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="!isUnregisteredVisitorRoute"
+      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 APP_NAME = publicConfig.APP || "";
+
+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 (isCheckIn) {
+      showTransientMessage(
+        `New plate detected: ${plateNumber}`,
+        "info",
+        true
+      );
+      lastPlateNumber.value = plateNumber;
+      return;
+    }
+
+
+    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();
+
+    if(!APP_NAME) return;
+
+    await navigateTo({
+      path:  `/${route.params.org}/${route.params.site}/${APP_NAME === "security_agency" ? "visitor-management" : APP_NAME === "property_management_agency" ? "visitor-mgmt" : "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, deep: true }
+);
+
+watch(
+  () => route.fullPath,
+  () => {
+    if (isUnregisteredVisitorRoute.value) {
+      snackBarMessage.modal = false;
+    }
+  },
+  { immediate: true }
+);
+
+onUnmounted(() => {
+  disconnectSocket();
+});
+
+
+
+</script>

package/composables/useNFCPatrolDailyReport.ts

@@ -0,0 +1,27 @@
+import type {
+  NFCPatrolReportFilters,
+  NFCPatrolSummaryReport,
+} from "../types/nfc-patrol-report";
+import { useNFCPatrolReportService } from "../services/nfcPatrolReport";
+
+export function useNFCPatrolDailyReport(filters: NFCPatrolReportFilters) {
+  const reportService = useNFCPatrolReportService();
+  const report = ref<NFCPatrolSummaryReport | null>(null);
+  const loading = ref(false);
+
+  async function fetchReport() {
+    loading.value = true;
+
+    try {
+      report.value = await reportService.getDailyReport(filters);
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  return {
+    report,
+    loading,
+    fetchReport,
+  };
+}

package/composables/useNFCPatrolMonthlyReport.ts

@@ -0,0 +1,27 @@
+import type {
+  NFCPatrolReportFilters,
+  NFCPatrolSummaryReport,
+} from "../types/nfc-patrol-report";
+import { useNFCPatrolReportService } from "../services/nfcPatrolReport";
+
+export function useNFCPatrolMonthlyReport(filters: NFCPatrolReportFilters) {
+  const reportService = useNFCPatrolReportService();
+  const report = ref<NFCPatrolSummaryReport | null>(null);
+  const loading = ref(false);
+
+  async function fetchReport() {
+    loading.value = true;
+
+    try {
+      report.value = await reportService.getMonthlyReport(filters);
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  return {
+    report,
+    loading,
+    fetchReport,
+  };
+}

package/composables/useNFCPatrolReport.ts

@@ -0,0 +1,38 @@
+import type {
+  NFCPatrolActivity,
+  NFCPatrolReport,
+  NFCPatrolReportFilters,
+} from "../types/nfc-patrol-report";
+import { useNFCPatrolReportService } from "../services/nfcPatrolReport";
+
+export function useNFCPatrolReport(filters: NFCPatrolReportFilters) {
+  const reportService = useNFCPatrolReportService();
+  const report = ref<NFCPatrolReport | null>(null);
+  const loading = ref(false);
+  const selectedActivityRemarks = ref("");
+  const dialogRemarks = ref(false);
+
+  async function fetchReport() {
+    loading.value = true;
+
+    try {
+      report.value = await reportService.getPatrolReport(filters);
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  function openRemarksDialog(activity: NFCPatrolActivity) {
+    selectedActivityRemarks.value = activity.remarks || "No remarks provided";
+    dialogRemarks.value = true;
+  }
+
+  return {
+    report,
+    loading,
+    selectedActivityRemarks,
+    dialogRemarks,
+    fetchReport,
+    openRemarksDialog,
+  };
+}

package/composables/useNFCPatrolReportExport.ts

@@ -0,0 +1,31 @@
+import type {
+  NFCPatrolReportExportRequest,
+  NFCPatrolReportFilters,
+  NFCPatrolReportTab,
+} from "../types/nfc-patrol-report";
+import { useNFCPatrolReportService } from "../services/nfcPatrolReport";
+
+export function useNFCPatrolReportExport() {
+  const reportService = useNFCPatrolReportService();
+  const loading = ref(false);
+
+  async function exportReport(tab: NFCPatrolReportTab, filters: NFCPatrolReportFilters) {
+    loading.value = true;
+
+    try {
+      const request: NFCPatrolReportExportRequest = {
+        tab,
+        filters,
+      };
+
+      await reportService.exportReport(request);
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  return {
+    loading,
+    exportReport,
+  };
+}

package/composables/useNFCPatrolReportFilters.ts

@@ -0,0 +1,39 @@
+import type {
+  NFCPatrolReportFilterOptions,
+  NFCPatrolReportFilters,
+} from "../types/nfc-patrol-report";
+import { useNFCPatrolReportService } from "../services/nfcPatrolReport";
+
+export function useNFCPatrolReportFilters(site: string) {
+  const reportService = useNFCPatrolReportService();
+
+  const filters = reactive<NFCPatrolReportFilters>({
+    route: "WH01 Patrol Route",
+    timeRange: "15:00 - 17:00",
+    date: "2025-11-27",
+  });
+
+  const options = ref<NFCPatrolReportFilterOptions>({
+    routes: [],
+    timeRanges: [],
+  });
+
+  const loading = ref(false);
+
+  async function fetchOptions() {
+    loading.value = true;
+
+    try {
+      options.value = await reportService.getFilterOptions(site);
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  return {
+    filters,
+    options,
+    loading,
+    fetchOptions,
+  };
+}

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.23",
   "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/services/nfcPatrolReport.ts

@@ -0,0 +1,172 @@
+import type {
+  NFCPatrolReport,
+  NFCPatrolReportExportRequest,
+  NFCPatrolReportFilterOptions,
+  NFCPatrolReportFilters,
+  NFCPatrolSummaryReport,
+} from "../types/nfc-patrol-report";
+
+const filterOptions: NFCPatrolReportFilterOptions = {
+  routes: ["WH01 Patrol Route", "WH02 Patrol Route", "WH03 Patrol Route"],
+  timeRanges: ["15:00 - 17:00", "08:00 - 10:00", "13:00 - 15:00", "18:00 - 20:00"],
+};
+
+const location = {
+  name: "Winsland Homes",
+  address: "221A Upper Thomson Road THOMSON RIDGE ESTATE",
+};
+
+export function useNFCPatrolReportService() {
+  async function getFilterOptions(_site: string): Promise<NFCPatrolReportFilterOptions> {
+    return filterOptions;
+  }
+
+  async function getPatrolReport(filters: NFCPatrolReportFilters): Promise<NFCPatrolReport> {
+    return {
+      location,
+      routeSummary: {
+        routeName: filters.route,
+        tolerance: 30,
+        schedule: {
+          start: "14:00",
+          end: "15:00",
+          totalTime: "25 mins",
+        },
+        actual: {
+          start: "14:01",
+          end: "14:16",
+          totalTime: "15 mins",
+        },
+      },
+      activities: [
+        {
+          id: "1",
+          checkpoint: "Point 1 WH01",
+          startTime: "14:01",
+          endTime: "14:04",
+          actualTime: "3:00 mins",
+          expectedTime: "5:00 mins",
+          status: "Skipped",
+          remarks: "Raining",
+        },
+        {
+          id: "2",
+          checkpoint: "Point 2 WH02",
+          startTime: "14:04",
+          endTime: "14:07",
+          actualTime: "3:00 mins",
+          expectedTime: "5:00 mins",
+          status: "Completed",
+        },
+        {
+          id: "3",
+          checkpoint: "Point 3 WH03",
+          startTime: "14:07",
+          endTime: "15:10",
+          actualTime: "3:00 mins",
+          expectedTime: "5:00 mins",
+          status: "Completed",
+        },
+        {
+          id: "4",
+          checkpoint: "Point 4 WH04",
+          startTime: "14:10",
+          endTime: "14:13",
+          actualTime: "3:00 mins",
+          expectedTime: "5:00 mins",
+          status: "Completed",
+        },
+        {
+          id: "5",
+          checkpoint: "Point 5 WH05",
+          startTime: "14:13",
+          endTime: "14:16",
+          actualTime: "3:00 mins",
+          expectedTime: "5:00 mins",
+          status: "Completed",
+        },
+      ],
+    };
+  }
+
+  async function getDailyReport(
+    filters: NFCPatrolReportFilters,
+  ): Promise<NFCPatrolSummaryReport> {
+    return getSummaryReport(`Patrol Route Summary: ${filters.route}`);
+  }
+
+  async function getMonthlyReport(
+    filters: NFCPatrolReportFilters,
+  ): Promise<NFCPatrolSummaryReport> {
+    return getSummaryReport(`Patrol Route Summary: ${filters.route}`);
+  }
+
+  async function exportReport(_request: NFCPatrolReportExportRequest): Promise<void> {
+    return Promise.resolve();
+  }
+
+  function getSummaryReport(title: string): NFCPatrolSummaryReport {
+    return {
+      location,
+      title,
+      rows: [
+        {
+          id: "1",
+          routeName: "1. WH01",
+          securityCheckSchedule: "14:00",
+          checked: 22,
+          missed: 0,
+          status: "Completed",
+        },
+        {
+          id: "2",
+          routeName: "2. WH01",
+          securityCheckSchedule: "15:00",
+          checked: 18,
+          missed: 3,
+          status: "Completed",
+        },
+        {
+          id: "3",
+          routeName: "3. WH01",
+          securityCheckSchedule: "16:00",
+          checked: 22,
+          missed: 0,
+          status: "Completed",
+        },
+        {
+          id: "4",
+          routeName: "4. WH01",
+          securityCheckSchedule: "17:00",
+          checked: 22,
+          missed: 0,
+          status: "Completed",
+        },
+        {
+          id: "5",
+          routeName: "5. WH01",
+          securityCheckSchedule: "18:00",
+          checked: 22,
+          missed: 0,
+          status: "Completed",
+        },
+        {
+          id: "6",
+          routeName: "6. WH01",
+          securityCheckSchedule: "19:00",
+          checked: 22,
+          missed: 0,
+          status: "Completed",
+        },
+      ],
+    };
+  }
+
+  return {
+    getFilterOptions,
+    getPatrolReport,
+    getDailyReport,
+    getMonthlyReport,
+    exportReport,
+  };
+}