@7365admin1/layer-common 3.0.31-staging.14 → 3.0.31-staging.16

package/components/Nfc/PatrolReport/MonthlyReportTable.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="mt-6">
+    <div class="text-h6 font-weight-bold mb-4">
+      {{ title }}
+    </div>
+
+    <v-table class="border rounded-lg">
+      <thead>
+        <tr>
+          <th class="text-left font-weight-bold">Month</th>
+          <th class="text-center font-weight-bold">Checked</th>
+          <th class="text-center font-weight-bold">% Checked</th>
+          <th class="text-center font-weight-bold">Missed</th>
+          <th class="text-center font-weight-bold">% Missed</th>
+        </tr>
+      </thead>
+
+      <tbody>
+        <tr
+          v-for="row in rows"
+          :key="row.month"
+        >
+          <td>{{ row.month }}</td>
+
+          <td class="text-center">
+            {{ row.checked }}
+          </td>
+
+          <td class="text-center">
+            {{ row.checkedPercentage }}%
+          </td>
+
+          <td class="text-center">
+            {{ row.missed }}
+          </td>
+
+          <td class="text-center">
+            {{ row.missedPercentage }}%
+          </td>
+        </tr>
+      </tbody>
+    </v-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { NFCPatrolMonthlyReportRow } from "../../../types/nfc-patrol-report";
+
+defineProps<{
+  title: string;
+  rows: NFCPatrolMonthlyReportRow[];
+}>();
+</script>
+
+<style scoped>
+.v-table {
+  border: 1px solid rgb(var(--v-theme-outline));
+}
+
+thead th {
+  background: transparent;
+  white-space: nowrap;
+  font-weight: 600;
+}
+
+tbody td {
+  height: 56px;
+}
+</style>

package/components/Nfc/PatrolReport/PatrolReportTab.vue

@@ -4,9 +4,9 @@
       :model-value="filters"
       :options="options"
       @update:model-value="$emit('update:filters', $event)"
-      @export="$emit('export')"
+      @export="(type) => $emit('export', type)"
     />
-
+    <div class="report-export">
     <v-divider :thickness="1" class="border-opacity-100" />
 
     <template v-if="report">
@@ -30,6 +30,7 @@
     <ReportEmptyState v-else-if="!loading" />
 
     <RemarksDialog v-model="dialogRemarks" :remarks="selectedActivityRemarks" />
+    </div>
   </div>
 </template>
 
@@ -55,7 +56,7 @@ const props = defineProps<{
 
 defineEmits<{
   "update:filters": [value: NFCPatrolReportFilters];
-  export: [];
+  export: [type: "pdf" | "csv"];
 }>();
 
 const {
@@ -77,4 +78,5 @@ watch(
   },
   { immediate: true },
 );
+
 </script>

package/components/Nfc/PatrolReport/ReportFilters.vue

@@ -16,7 +16,12 @@
       />
     </v-col>
 
-    <v-col cols="12" md="2" class="px-md-2 mb-2 mb-md-0">
+    <v-col
+      v-if="showTimeFilter"
+      cols="12"
+      md="2"
+      class="px-md-2 mb-2 mb-md-0"
+    >
       <v-select
         :model-value="modelValue.timeRange"
         :items="options.timeRanges"
@@ -30,7 +35,12 @@
       />
     </v-col>
 
-    <v-col cols="12" md="2" class="px-md-2 mb-2 mb-md-0">
+    <v-col
+      v-if="showDateFilter"
+      cols="12"
+      md="2"
+      class="px-md-2 mb-2 mb-md-0"
+    >
       <v-text-field
         :model-value="modelValue.date"
         type="date"
@@ -46,17 +56,31 @@
     <v-spacer />
 
     <v-col cols="12" md="2" class="pl-md-2">
-      <v-btn
-        variant="outlined"
-        block
-        size="large"
-        rounded="lg"
-        class="text-none"
-        prepend-icon="mdi-export"
-        @click="$emit('export')"
-      >
-        Export
-      </v-btn>
+      <v-menu>
+        <template #activator="{ props: menuProps }">
+          <v-btn
+            v-bind="menuProps"
+            variant="outlined"
+            block
+            size="large"
+            rounded="lg"
+            class="text-none"
+            prepend-icon="mdi-export"
+          >
+            Export
+          </v-btn>
+        </template>
+
+        <v-list density="compact">
+          <v-list-item @click="$emit('export', 'pdf')">
+            <v-list-item-title>PDF</v-list-item-title>
+          </v-list-item>
+
+          <v-list-item @click="$emit('export', 'csv')">
+            <v-list-item-title>CSV</v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
     </v-col>
   </v-row>
 </template>
@@ -67,14 +91,22 @@ import type {
   NFCPatrolReportFilters,
 } from "../../../types/nfc-patrol-report";
 
-const props = defineProps<{
-  modelValue: NFCPatrolReportFilters;
-  options: NFCPatrolReportFilterOptions;
-}>();
+const props = withDefaults(
+  defineProps<{
+    modelValue: NFCPatrolReportFilters;
+    options: NFCPatrolReportFilterOptions;
+    showTimeFilter?: boolean;
+    showDateFilter?: boolean;
+  }>(),
+  {
+    showTimeFilter: true,
+    showDateFilter: true,
+  },
+);;
 
 const emit = defineEmits<{
   "update:modelValue": [value: NFCPatrolReportFilters];
-  export: [];
+  export: [type: "pdf" | "csv"];
 }>();
 
 function updateFilter(key: keyof NFCPatrolReportFilters, value: unknown) {

package/components/VisitorForm.vue

@@ -12,7 +12,7 @@
       <div class="w-100 d-flex justify-space-between ga-2">
         <span class="text-subtitle-1 w-100 font-weight-bold mb-3">{{
           formTitle
-          }}</span>
+        }}</span>
         <span v-if="withStep2 || withStep3" class="text-subtitle-2 font-weight-bold" style="text-wrap: nowrap">Step
           <span class="text-primary-button">{{ contractorStep }}</span>/{{ withStep3 ? 3 : withStep2 ? 2 : 1 }}</span>
       </div>
@@ -30,7 +30,7 @@
                   <v-list-item-title @click.stop="handleAddNewContractorType" class="d-flex align-center ga-1">
                     <span><v-icon icon="mdi-plus" /></span> Add "<strong>{{
                       contractorTypeInput
-                      }}</strong>" as custom contractor type.
+                    }}</strong>" as custom contractor type.
                   </v-list-item-title>
                 </v-list-item>
               </template>
@@ -57,7 +57,7 @@
                 <InputLabel class="text-capitalize" title="NRIC" :required="requireNRIC" />
                 <v-menu v-model="nricSearchMenu" location="bottom" offset-y :close-on-content-click="false">
                   <template #activator="{ props }">
-                    <InputNRICNumber v-bind="props" v-model="visitor.nric" density="comfortable"
+                    <InputNRICNumber v-bind="props" v-model="visitor.nric" density="comfortable" @focus="isNricFieldFocused = true" @blur="isNricFieldFocused = false"
                       :rules="[requireNRIC ? requiredRule : () => true]" :key="currentAutofillSource + 'nric-key'"
                       @update:model-value="handleUpdateNRIC" :loading="fetchPersonByNRICPending" />
                   </template>
@@ -87,14 +87,14 @@
             <InputLabel class="text-capitalize" title="Phone Number" required />
             <v-menu v-model="phoneSearchMenu" location="bottom" offset-y :close-on-content-click="false">
               <template #activator="{ props }">
-                <InputPhoneNumberV2 v-bind="props" v-model="visitor.contact" :rules="[requiredRule]"
+                <InputPhoneNumberV2 v-bind="props" v-model="visitor.contact" :rules="[requiredRule]" @focus="isPhoneFieldFocused = true" @blur="isPhoneFieldFocused = false"
                   density="comfortable" :key="currentAutofillSource + 'phone-key'"
                   @update:model-value="handleUpdatePhoneNumber" />
               </template>
 
               <v-list v-if="phoneSearchResults.length" class="pa-1">
                 <v-list-item v-for="(item, index) in phoneSearchResults" :key="item._id || index"
-                  @click="selectAutofillSearchResult(item, 'contact')" class="cursor-pointer nric-search-item">
+                  @click="selectPhoneNumberSearchResult(item)" class="cursor-pointer nric-search-item">
                   <div class="d-flex align-center justify-space-between ga-4 w-100">
                     <span class="text-subtitle-1">{{ item.name || 'Unknown' }}</span>
                     <span class="text-subtitle-1 text-no-wrap">NRIC: {{ item.nric || 'N/A' }}</span>
@@ -113,12 +113,12 @@
                 <v-menu v-model="vehicleSearchMenu" location="bottom" offset-y :close-on-content-click="false">
                   <template #activator="{ props }">
                     <InputVehicleNumber v-bind="props" v-model="visitor.plateNumber" density="comfortable"
-                      @update:model-value="handleUpdateVehicleNumber" />
+                      @update:model-value="handleUpdateVehicleNumber" @focus="isPlateNumberFieldFocused = true" @blur="isPlateNumberFieldFocused = false" />
                   </template>
 
                   <v-list v-if="vehicleSearchResults.length" class="pa-1">
                     <v-list-item v-for="(item, index) in vehicleSearchResults" :key="item._id || index"
-                      @click="selectAutofillSearchResult(item, 'vehicleNumber')"
+                      @click="selectPlateNumberSearchResult(item)"
                       class="cursor-pointer nric-search-item">
                       <div class="d-flex align-center justify-space-between ga-4 w-100">
                         <span class="text-subtitle-1">{{ item.name || 'Unknown' }}</span>
@@ -159,7 +159,7 @@
                       class="d-flex align-center ga-1">
                       <span><v-icon icon="mdi-plus" /></span>Add "<strong>{{
                         companyNameInput
-                        }}</strong>" as new company.
+                      }}</strong>" as new company.
                     </v-list-item-title>
                     <v-list-item-title v-else-if="!companyNameInput && companyNames.length === 0">
                       Start typing to search for companies.
@@ -189,7 +189,7 @@
                       class="d-flex align-center ga-1">
                       <span><v-icon icon="mdi-plus" /></span>Add "<strong>{{
                         companyNameInput
-                        }}</strong>" as new company.
+                      }}</strong>" as new company.
                     </v-list-item-title>
                     <v-list-item-title v-else-if="!companyNameInput && companyNames.length === 0">
                       Start typing to search for companies.
@@ -499,6 +499,7 @@ import useVisitor from "../composables/useVisitor";
 import useSiteEntryPassSettings from "../composables/useSiteEntryPassSettings";
 import useAccessManagement from "../composables/useAccessManagement";
 import usePeople from "../composables/usePeople";
+import { mockPhoneNumberSearchResults, mockVehicleNumberSearchResults } from "../utils/mock-people-response";
 
 const prop = defineProps({
   type: {
@@ -554,6 +555,7 @@ const { testConnection } = useWebUsb();
 const {
   findPersonByNRIC,
   findPersonByNRICMultipleResult,
+  findPersonByPhoneNumberMultipleResult,
   searchCompanyList,
   findUsersByPlateNumber,
 } = usePeople();
@@ -594,6 +596,9 @@ const passCards = ref<{ _id: string; cardNo: string }[]>([]);
 const availableQrCount = ref<number | null>(null);
 const hidQrPrintPayload = ref<string | null>(null);
 const hidQrPrinted = ref(false);
+const isPhoneFieldFocused = ref(false);
+const isPlateNumberFieldFocused = ref(false);
+const isNricFieldFocused = ref(false);
 
 const registeredUnitCompanyName = ref("N/A");
 
@@ -759,50 +764,13 @@ const selectedNricSearchResult = ref<Partial<TPeople> | null>(null);
 const selectedNricContact = ref("");
 const selectedNricPlate = ref("");
 
-type NricSearchPerson = Omit<Partial<TPeople>, "contact"> & {
+type SearchPerson = Omit<Partial<TPeople>, "contact"> & {
   contact?: string | string[];
   contacts?: string | string[];
   visitorPlateNumbers?: string | string[];
   plateNumber?: string | string[];
 };
 
-const mockPhoneNumberSearchResults: Partial<NricSearchPerson>[] = [
-  {
-    _id: "mock-phone-multiple-options",
-    name: "James Smith",
-    nric: "1323232499",
-    contacts: ["653939394", "81234567"],
-    visitorPlateNumbers: ["34566", "SMA1234A"],
-    companyName: ["Mock Company Pte Ltd"],
-  },
-  {
-    _id: "mock-phone-single-option",
-    name: "Jane Tan",
-    nric: "S1234567A",
-    contacts: ["91234567"],
-    visitorPlateNumbers: ["SGB5678B"],
-    companyName: ["Single Option Company"],
-  },
-];
-
-const mockVehicleNumberSearchResults: Partial<NricSearchPerson>[] = [
-  {
-    _id: "mock-vehicle-multiple-options",
-    name: "James Smith",
-    nric: "1323232499",
-    contacts: ["653939394", "81234567"],
-    visitorPlateNumbers: ["34566", "SMA1234A"],
-    companyName: ["Mock Company Pte Ltd"],
-  },
-  {
-    _id: "mock-vehicle-single-option",
-    name: "Ali Lim",
-    nric: "T7654321B",
-    contacts: ["98765432"],
-    visitorPlateNumbers: ["SKX2468C"],
-    companyName: ["Vehicle Single Company"],
-  },
-];
 
 const formTitle = computed(() => {
   const isContractorForm = prop.type === "contractor";
@@ -874,7 +842,7 @@ const {
   pending: fetchPersonByNRICPending,
 } = useLazyAsyncData(`fetch-person`, () => {
   const NRIC = visitor.nric;
-  if (!NRIC || NRIC.length < 4) return Promise.resolve(null);
+  if (!NRIC || NRIC.length < 1) return Promise.resolve(null);
   return findPersonByNRICMultipleResult(NRIC, prop.site);
 });
 
@@ -894,7 +862,7 @@ watch(fetchPersonByNRICReq, (obj) => {
   //     contacts: ["653939394", "81234567"],
   //     visitorPlateNumbers: ["34566", "SMA1234A"],
   //     companyName: ["Mock Company Pte Ltd"],
-  //   } as Partial<NricSearchPerson>,
+  //   } as Partial<SearchPerson>,
   //   {
   //     _id: "mock-person-single-option",
   //     name: "Jane Tan",
@@ -902,7 +870,7 @@ watch(fetchPersonByNRICReq, (obj) => {
   //     contacts: ["91234567"],
   //     visitorPlateNumbers: ["SGB5678B"],
   //     companyName: ["Single Option Company"],
-  //   } as Partial<NricSearchPerson>,
+  //   } as Partial<SearchPerson>,
   // ];
   // nricSearchMenu.value = true;
 });
@@ -947,12 +915,12 @@ function toUniqueStringArray(value: unknown) {
 }
 
 function getPersonContactOptions(item: Partial<TPeople>) {
-  const person = item as NricSearchPerson;
+  const person = item as SearchPerson;
   return toUniqueStringArray(person.contacts || person.contact);
 }
 
 function getPersonPlateOptions(item: Partial<TPeople>) {
-  const person = item as NricSearchPerson;
+  const person = item as SearchPerson;
   const visitorPlateNumbers = toUniqueStringArray(person.visitorPlateNumbers);
   if (visitorPlateNumbers.length) return visitorPlateNumbers;
 
@@ -1000,6 +968,12 @@ function applyNricSearchResult(
 function selectNricSearchResult(item: Partial<TPeople>) {
   selectAutofillSearchResult(item, "nric");
 }
+function selectPhoneNumberSearchResult(item: Partial<TPeople>) {
+  selectAutofillSearchResult(item, "contact");
+}
+function selectPlateNumberSearchResult(item: Partial<TPeople>) {
+  selectAutofillSearchResult(item, "vehicleNumber");
+}
 
 function selectAutofillSearchResult(item: Partial<TPeople>, source: Exclude<AutofillSource, null>) {
   const contactOptions = getPersonContactOptions(item);
@@ -1388,46 +1362,46 @@ const debounceFetchNRIC = debounce(fetchPersonByNRICRefresh, 500);
 
 function handleUpdateNRIC() {
   if (skipNricFetch.value) return;
-  if (currentAutofillSource.value && currentAutofillSource.value !== "nric")
-    return;
+  if(!isNricFieldFocused.value) return;
   debounceFetchNRIC();
 }
 
+
+const {
+  data: fetchPersonByPhoneNumber,
+  refresh: fetchPersonByPhoneNumberRefresh,
+  pending: fetchPersonByPhoneNumberPending,
+} = useLazyAsyncData(`fetch-person-phone-number`, () => {
+  const contact = visitor.contact;
+  if (!contact || contact.length < 4) return Promise.resolve(null);
+  return findPersonByPhoneNumberMultipleResult(contact, prop.site);
+});
+
 function handleUpdatePhoneNumber() {
-  if (currentAutofillSource.value && currentAutofillSource.value !== "contact")
-    return;
+  if(!isPhoneFieldFocused.value) return;
 
   const search = visitor.contact?.trim() || "";
-  if (search.length < 4) {
+  if (search.length < 1) {
     phoneSearchResults.value = [];
     phoneSearchMenu.value = false;
     return;
   }
 
-  phoneSearchResults.value = mockPhoneNumberSearchResults.filter((item) =>
-    getPersonContactOptions(item as Partial<TPeople>).some((contact) =>
-      contact.includes(search)
-    )
-  ) as Partial<TPeople>[];
+  phoneSearchResults.value = mockPhoneNumberSearchResults
   phoneSearchMenu.value = phoneSearchResults.value.length > 0;
 }
 
 function handleUpdateVehicleNumber() {
-  if (currentAutofillSource.value && currentAutofillSource.value !== "vehicleNumber")
-    return;
+ if(!isPlateNumberFieldFocused.value) return;
 
   const search = visitor.plateNumber?.trim()?.toUpperCase() || "";
-  if (search.length < 4) {
+  if (search.length < 1) {
     vehicleSearchResults.value = [];
     vehicleSearchMenu.value = false;
     return;
   }
 
-  vehicleSearchResults.value = mockVehicleNumberSearchResults.filter((item) =>
-    getPersonPlateOptions(item as Partial<TPeople>).some((plate) =>
-      plate.toUpperCase().includes(search)
-    )
-  ) as Partial<TPeople>[];
+  vehicleSearchResults.value = mockVehicleNumberSearchResults
   vehicleSearchMenu.value = vehicleSearchResults.value.length > 0;
 }
 

package/composables/useNFCPatrolDailyReport.ts

@@ -63,15 +63,12 @@ export function useNFCPatrolDailyReport(
 
     try {
       const [logsRes, siteInfo] = await Promise.all([
-        getPatrolLogs<NFCPatrolLogListResponse>({
+        getPatrolLogs({
           page: 1,
           limit: 100,
           site,
           date: filters.date,
           routeId: filters.route,
-          routeStartTime: filters.timeRange
-            ? filters.timeRange.split(" - ")[0]
-            : undefined,
         }),
         getSiteById(site),
       ]);

package/composables/useNFCPatrolMonthlyReport.ts

@@ -2,6 +2,8 @@ import type {
   NFCPatrolReportFilters,
   NFCPatrolSummaryReport,
   NFCPatrolReportSummaryRow,
+  NFCPatrolMonthlyReportRow,
+  NFCPatrolMonthlyReport,
 } from "../types/nfc-patrol-report";
 import useNFCPatrolLog from "./useNFCPatrolLog";
 import useSite from "./useSite";
@@ -12,6 +14,55 @@ interface NFCPatrolLogListResponse {
   pageRange?: string;
 }
 
+const MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+function mapLogsToMonthlyRows(
+  logs: Record<string, any>[],
+): NFCPatrolMonthlyReportRow[] {
+  const rows = MONTHS.map((month) => ({
+    month,
+    checked: 0,
+    checkedPercentage: 0,
+    missed: 0,
+    missedPercentage: 0,
+  }));
+
+  logs.forEach((log) => {
+    const monthIndex = new Date(log.date).getMonth();
+
+    for (const checkpoint of log.checkPoints ?? []) {
+      if (checkpoint.status === "Completed") {
+        rows[monthIndex].checked++;
+      } else if (checkpoint.status === "Skipped") {
+        rows[monthIndex].missed++;
+      }
+    }
+  });
+
+  rows.forEach((row) => {
+    const total = row.checked + row.missed;
+
+    if (total > 0) {
+      row.checkedPercentage = Math.round((row.checked / total) * 100);
+      row.missedPercentage = Math.round((row.missed / total) * 100);
+    }
+  });
+
+  return rows;
+}
+
 function buildAddress(address?: Record<string, string>) {
   if (!address) return undefined;
 
@@ -27,23 +78,7 @@ function buildAddress(address?: Record<string, string>) {
   return parts.length ? parts.join(", ") : undefined;
 }
 
-function mapLogToSummaryRow(
-  log: Record<string, any>,
-  index: number,
-): NFCPatrolReportSummaryRow {
-  const checkpoints: Record<string, any>[] = log.checkPoints ?? [];
-  const checked = checkpoints.filter((cp) => cp.status === "Completed").length;
-  const missed = checkpoints.filter((cp) => cp.status === "Skipped").length;
 
-  return {
-    id: log._id,
-    routeName: `${index + 1}. ${log.route?.name ?? "-"}`,
-    securityCheckSchedule: log.route?.startTime ?? "-",
-    checked,
-    missed,
-    status: missed === 0 ? "Completed" : "Incomplete",
-  };
-}
 
 export function useNFCPatrolMonthlyReport(
   filters: NFCPatrolReportFilters,
@@ -52,12 +87,12 @@ export function useNFCPatrolMonthlyReport(
   const { getAll: getPatrolLogs } = useNFCPatrolLog();
   const { getSiteById } = useSite();
 
-  const report = ref<NFCPatrolSummaryReport | null>(null);
+  const report = ref<NFCPatrolMonthlyReport | null>(null);
   const loading = ref(false);
   const notFound = ref(false);
 
   async function fetchReport() {
-    if (!site || !filters.date || !filters.route) {
+    if (!site || !filters.route) {
       report.value = null;
       notFound.value = false;
       return;
@@ -65,19 +100,16 @@ export function useNFCPatrolMonthlyReport(
 
     loading.value = true;
     notFound.value = false;
-
+    const currentYear = new Date().getFullYear().toString();
     try {
       const [logsRes, siteInfo] = await Promise.all([
-        getPatrolLogs<NFCPatrolLogListResponse>({
-          page: 1,
-          limit: 100,
-          site,
-          date: filters.date,
-          routeId: filters.route,
-          routeStartTime: filters.timeRange
-            ? filters.timeRange.split(" - ")[0]
-            : undefined,
-          type: "month",
+        getPatrolLogs({
+            page: 1,
+            limit: 100,
+            site,
+            routeId: filters.route,
+            date: currentYear,
+            type: "month",
         }),
         getSiteById(site),
       ]);
@@ -93,7 +125,7 @@ export function useNFCPatrolMonthlyReport(
             address: buildAddress(siteInfo.address),
           },
           title: `Patrol Route Summary: ${routeName}`,
-          rows: logs.map(mapLogToSummaryRow),
+          rows: mapLogsToMonthlyRows(logs),
         };
       } else {
         report.value = null;

package/composables/usePeople.ts

@@ -44,6 +44,19 @@ export default function () {
     });
   }
 
+    async function findPersonByPhoneNumberMultipleResult(contact: string, site: string) {
+    return await $fetch<Record<any, any>>(`/api/people/contact`, {
+      method: "GET",
+      query: { contact, site },
+    });
+  }
+    async function findPersonByPlateNumberMultipleResult(plateNumber: string, site: string) {
+    return await $fetch<Record<any, any>>(`/api/people/plate-number`, {
+      method: "GET",
+      query: { plateNumber, site },
+    });
+  }
+
   async function findPersonByContact(
     contact: string
   ): Promise<null | Partial<TPeople>> {
@@ -124,6 +137,8 @@ export default function () {
     deleteById,
     findPersonByNRIC,
     findPersonByNRICMultipleResult,
+    findPersonByPhoneNumberMultipleResult,
+    findPersonByPlateNumberMultipleResult,
     findPersonByContact,
     getPeopleByUnit,
     searchCompanyList,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.0.31-staging.14",
+  "version": "3.0.31-staging.16",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {