@7365admin1/layer-common 3.1.2-staging.32 → 3.1.2-staging.34

package/components/Nfc/NFCPatrolReportMain.vue

@@ -171,7 +171,7 @@ async function exportReport(type: "pdf" | "csv") {
   const csv = Array.from(table.querySelectorAll("tr"))
     .map((row) =>
       Array.from(row.querySelectorAll("th,td"))
-        .map((cell) => `"${cell.textContent?.trim().replace(/"/g, '""') ?? ""}"`)
+        .map((cell) => escapeCsvCell(getCsvCellValue(cell)))
         .join(","),
     )
     .join("\n");
@@ -188,4 +188,22 @@ async function exportReport(type: "pdf" | "csv") {
 
   URL.revokeObjectURL(link.href);
 }
+
+function getCsvCellValue(cell: Element) {
+  const image = cell.querySelector("img");
+
+  if (image) {
+    const imageUrl = image.currentSrc || image.src;
+
+    if (imageUrl) {
+      return imageUrl;
+    }
+  }
+
+  return cell.textContent?.trim() ?? "";
+}
+
+function escapeCsvCell(value: string) {
+  return `"${value.replace(/"/g, '""')}"`;
+}
 </script>

package/components/Nfc/PatrolReport/PatrolActivityTable.vue

@@ -7,6 +7,8 @@
         <thead>
           <tr>
             <th>Checkpoints</th>
+            <th>Security Personnel</th>
+            <th>Signature</th>
             <th>Start - End Time</th>
             <th>
               Travel time<br />
@@ -23,6 +25,17 @@
             @click="handleActivityClick(activity)"
           >
             <td>{{ activity.checkpoint }}</td>
+            <td>{{ activity.guardName || "-" }}</td>
+            <td>
+              <v-img
+                v-if="activity.guardSignatureFileId"
+                :src="getFileUrl(activity.guardSignatureFileId)"
+                :alt="`${activity.guardName || 'Guard'} signature`"
+                class="guard-signature"
+                contain
+              />
+              <span v-else>-</span>
+            </td>
             <td>
               <v-icon size="small" class="mr-1">mdi-clock-outline</v-icon>
               {{ activity.startTime }}
@@ -59,6 +72,8 @@ defineProps<{
   activities: NFCPatrolActivity[];
 }>();
 
+const { getFileUrl } = useFile();
+
 const emit = defineEmits<{
   remarks: [activity: NFCPatrolActivity];
 }>();
@@ -78,4 +93,9 @@ function handleActivityClick(activity: NFCPatrolActivity) {
 .cursor-pointer {
   cursor: pointer;
 }
+
+.guard-signature {
+  width: 80px;
+  height: 40px;
+}
 </style>

package/components/Nfc/PatrolReport/ReportDatePicker.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="d-flex flex-column">
+    <v-text-field
+      v-bind="$attrs"
+      :model-value="formattedDate"
+      autocomplete="off"
+      placeholder="DD/MM/YY"
+      readonly
+      @click="openDatePicker"
+    >
+      <template #append-inner>
+        <v-icon icon="mdi-calendar" @click.stop="openDatePicker" />
+      </template>
+    </v-text-field>
+
+    <input
+      ref="dateInput"
+      v-model="date"
+      class="native-date-input"
+      type="date"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false });
+
+const date = defineModel<string>({ default: "" });
+const dateInput = ref<HTMLInputElement | null>(null);
+
+const formattedDate = computed(() => {
+  const match = date.value.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+
+  if (!match) return "";
+
+  const [, year, month, day] = match;
+  return `${day}/${month}/${year.slice(-2)}`;
+});
+
+function openDatePicker() {
+  const input = dateInput.value;
+
+  if (!input) return;
+
+  if (input.showPicker) {
+    input.showPicker();
+  } else {
+    input.click();
+  }
+}
+</script>
+
+<style scoped>
+.native-date-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+}
+</style>

package/components/Nfc/PatrolReport/ReportFilters.vue

@@ -41,9 +41,8 @@
       md="2"
       class="px-md-2 mb-2 mb-md-0"
     >
-      <v-text-field
+      <ReportDatePicker
         :model-value="modelValue.date"
-        type="date"
         variant="outlined"
         density="comfortable"
         rounded="lg"
@@ -90,6 +89,7 @@ import type {
   NFCPatrolReportFilterOptions,
   NFCPatrolReportFilters,
 } from "../../../types/nfc-patrol-report";
+import ReportDatePicker from "./ReportDatePicker.vue";
 
 const props = withDefaults(
   defineProps<{

package/components/Nfc/PatrolReport/SummaryReportTable.vue

@@ -8,6 +8,8 @@
           <tr>
             <th>Patrol Route Name</th>
             <th>Security Check Schedule</th>
+            <th>Security Personnel</th>
+            <th>Signature</th>
             <th>Checked</th>
             <th>Missed</th>
             <th>Status</th>
@@ -20,6 +22,17 @@
               <v-icon size="small" class="mr-1">mdi-clock-outline</v-icon>
               {{ row.securityCheckSchedule }}
             </td>
+            <td>{{ row.guardName || "-" }}</td>
+            <td>
+              <v-img
+                v-if="row.guardSignatureFileId"
+                :src="getFileUrl(row.guardSignatureFileId)"
+                :alt="`${row.guardName || 'Guard'} signature`"
+                class="guard-signature"
+                contain
+              />
+              <span v-else>-</span>
+            </td>
             <td>{{ row.checked }}</td>
             <td>{{ row.missed }}</td>
             <td>
@@ -45,7 +58,16 @@ defineProps<{
   rows: NFCPatrolReportSummaryRow[];
 }>();
 
+const { getFileUrl } = useFile();
+
 function statusClass(status: NFCPatrolReportSummaryStatus) {
   return status === "Completed" ? "text-success" : "text-error";
 }
 </script>
+
+<style scoped>
+.guard-signature {
+  width: 80px;
+  height: 40px;
+}
+</style>

package/composables/useNFCPatrolDailyReport.ts

@@ -34,6 +34,8 @@ function mapLogToSummaryRow(log: Record<string, any>, index: number): NFCPatrolS
     id: log._id,
     routeName: `${index + 1}. ${log.route?.name ?? "-"}`,
     securityCheckSchedule: log.route?.startTime ?? "-",
+    guardName: log.sign?.guardName,
+    guardSignatureFileId: log.sign?.guardSignatureFileId,
     checked,
     missed,
     status: missed === 0 ? "Completed" : "Incomplete",

package/composables/useNFCPatrolReport.ts

@@ -51,6 +51,8 @@ function mapLogToPatrolReport(
   const activities: NFCPatrolActivity[] = checkpoints.map((cp) => ({
     id: cp.nfcTag_id,
     checkpoint: cp.nfcTag_name,
+    guardName: log.sign?.guardName,
+    guardSignatureFileId: log.sign?.guardSignatureFileId,
     startTime: formatTime(cp.startDateTime),
     endTime: formatTime(cp.endDateTime),
     actualTime: diffMinutes(cp.startDateTime, cp.endDateTime),

package/package.json

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

package/types/nfc-patrol-report.ts

@@ -47,6 +47,8 @@ export interface NFCPatrolRouteSummary {
 export interface NFCPatrolActivity {
   id: string;
   checkpoint: string;
+  guardName?: string;
+  guardSignatureFileId?: string;
   startTime: string;
   endTime: string;
   actualTime: string;
@@ -67,6 +69,8 @@ export interface NFCPatrolReportSummaryRow {
   id: string;
   routeName: string;
   securityCheckSchedule: string;
+  guardName?: string;
+  guardSignatureFileId?: string;
   checked: number;
   missed: number;
   status: NFCPatrolReportSummaryStatus;