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

package/components/Nfc/NFCPatrolReportMain.vue

@@ -14,44 +14,63 @@
         </v-col>
       </v-row>
 
-      <v-tabs v-model="activeTab" class="mb-6" bg-color="transparent" grow>
-        <v-tab value="patrol" class="text-none border-thin">Patrol Report</v-tab>
-        <v-tab value="daily" class="text-none border-thin">Daily Report</v-tab>
-        <v-tab value="monthly" class="text-none border-thin">Monthly Report</v-tab>
+      <v-tabs
+        v-model="activeTab"
+        class="mb-6"
+        bg-color="transparent"
+        grow
+      >
+        <v-tab value="patrol" class="text-none border-thin">
+          Patrol Report
+        </v-tab>
+
+        <v-tab value="daily" class="text-none border-thin">
+          Daily Report
+        </v-tab>
+
+        <v-tab value="monthly" class="text-none border-thin">
+          Monthly Report
+        </v-tab>
       </v-tabs>
 
       <v-window v-model="activeTab" class="pt-4">
         <v-window-item value="patrol">
-          <PatrolReportTab
-            :active="activeTab === 'patrol'"
-            :site="site"
-            :filters="filters"
-            :options="options"
-            @update:filters="updateFilters"
-            @export="exportReport"
-          />
+          <div v-if="activeTab === 'patrol'">
+            <PatrolReportTab
+              :active="true"
+              :site="site"
+              :filters="filters"
+              :options="options"
+              @update:filters="updateFilters"
+              @export="exportReport"
+            />
+          </div>
         </v-window-item>
 
         <v-window-item value="daily">
-          <DailyReportTab
-            :active="activeTab === 'daily'"
-            :site="site"
-            :filters="filters"
-            :options="options"
-            @update:filters="updateFilters"
-            @export="exportReport"
-          />
+          <div v-if="activeTab === 'daily'">
+            <DailyReportTab
+              :active="true"
+              :site="site"
+              :filters="filters"
+              :options="options"
+              @update:filters="updateFilters"
+              @export="exportReport"
+            />
+          </div>
         </v-window-item>
 
         <v-window-item value="monthly">
-          <MonthlyReportTab
-            :active="activeTab === 'monthly'"
-            :site="site"
-            :filters="filters"
-            :options="options"
-            @update:filters="updateFilters"
-            @export="exportReport"
-          />
+          <div v-if="activeTab === 'monthly'">
+            <MonthlyReportTab
+              :active="true"
+              :site="site"
+              :filters="filters"
+              :options="options"
+              @update:filters="updateFilters"
+              @export="exportReport"
+            />
+          </div>
         </v-window-item>
       </v-window>
     </v-col>
@@ -59,15 +78,20 @@
 </template>
 
 <script setup lang="ts">
+import html2canvas from "html2canvas";
+import jsPDF from "jspdf";
+
 import type {
   NFCPatrolReportFilters,
   NFCPatrolReportTab,
 } from "../../types/nfc-patrol-report";
-import { useNFCPatrolReportExport } from "../../composables/useNFCPatrolReportExport";
+
 import { useNFCPatrolReportFilters } from "../../composables/useNFCPatrolReportFilters";
+
+import PatrolReportTab from "./PatrolReport/PatrolReportTab.vue";
 import DailyReportTab from "./PatrolReport/DailyReportTab.vue";
 import MonthlyReportTab from "./PatrolReport/MonthlyReportTab.vue";
-import PatrolReportTab from "./PatrolReport/PatrolReportTab.vue";
+
 
 const props = defineProps<{
   site: string;
@@ -75,11 +99,16 @@ const props = defineProps<{
 }>();
 
 const router = useRouter();
+
+
 const activeTab = ref<NFCPatrolReportTab>("patrol");
-const { filters, options, fetchOptions } = useNFCPatrolReportFilters(props.site);
-const { exportReport: exportActiveReport } = useNFCPatrolReportExport();
 
-onMounted(fetchOptions);
+const { filters, options, fetchOptions } =
+  useNFCPatrolReportFilters(props.site);
+
+onMounted(() => {
+  fetchOptions();
+});
 
 function goBack() {
   router.back();
@@ -91,11 +120,72 @@ function updateFilters(value: NFCPatrolReportFilters) {
   filters.date = value.date;
 }
 
-async function exportReport() {
-  await exportActiveReport(activeTab.value, {
-    route: filters.route,
-    timeRange: filters.timeRange,
-    date: filters.date,
+async function exportReport(type: "pdf" | "csv") {
+  const report = document.querySelector(
+    ".report-export",
+  ) as HTMLElement | null;
+
+  if (!report) return;
+
+  if (type === "pdf") {
+    const canvas = await html2canvas(report, {
+      scale: 2,
+      useCORS: true,
+      backgroundColor: "#fff",
+    });
+
+    const pdf = new jsPDF("p", "mm", "a4");
+
+    const pdfWidth = pdf.internal.pageSize.getWidth();
+    const pdfHeight = pdf.internal.pageSize.getHeight();
+
+    const imgWidth = pdfWidth;
+    const imgHeight = (canvas.height * imgWidth) / canvas.width;
+
+    const imgData = canvas.toDataURL("image/png");
+
+    let heightLeft = imgHeight;
+    let position = 0;
+
+    pdf.addImage(imgData, "PNG", 0, position, imgWidth, imgHeight);
+
+    heightLeft -= pdfHeight;
+
+    while (heightLeft > 0) {
+      position -= pdfHeight;
+
+      pdf.addPage();
+      pdf.addImage(imgData, "PNG", 0, position, imgWidth, imgHeight);
+
+      heightLeft -= pdfHeight;
+    }
+
+    pdf.save(`${activeTab.value}-report.pdf`);
+    return;
+  }
+
+  const table = report.querySelector("table");
+
+  if (!table) return;
+
+  const csv = Array.from(table.querySelectorAll("tr"))
+    .map((row) =>
+      Array.from(row.querySelectorAll("th,td"))
+        .map((cell) => `"${cell.textContent?.trim().replace(/"/g, '""') ?? ""}"`)
+        .join(","),
+    )
+    .join("\n");
+
+  const blob = new Blob([csv], {
+    type: "text/csv;charset=utf-8;",
   });
+
+  const link = document.createElement("a");
+
+  link.href = URL.createObjectURL(blob);
+  link.download = `${activeTab.value}-report.csv`;
+  link.click();
+
+  URL.revokeObjectURL(link.href);
 }
 </script>

package/components/Nfc/PatrolReport/DailyReportTab.vue

@@ -3,10 +3,11 @@
     <ReportFilters
       :model-value="filters"
       :options="options"
+      :show-time-filter="false"
       @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">
@@ -15,6 +16,7 @@
       <SummaryReportTable :title="report.title" :rows="report.rows" />
     </template>
 
+
     <ReportEmptyState
       v-else-if="!loading && notFound"
       title="No Daily Report"
@@ -22,6 +24,7 @@
     />
 
     <ReportEmptyState v-else-if="!loading" />
+    </div>
   </div>
 </template>
 
@@ -38,23 +41,23 @@ import SummaryReportTable from "./SummaryReportTable.vue";
 
 const props = defineProps<{
   active: boolean;
-  site: string; // ✅ thêm
+  site: string;
   filters: NFCPatrolReportFilters;
   options: NFCPatrolReportFilterOptions;
 }>();
 
 defineEmits<{
   "update:filters": [value: NFCPatrolReportFilters];
-  export: [];
+  export: [type: "pdf" | "csv"];
 }>();
 
 const { report, loading, notFound, fetchReport } = useNFCPatrolDailyReport(
   props.filters,
-  props.site, // ✅
+  props.site,
 );
 
 watch(
-  () => [props.filters.route, props.filters.timeRange, props.filters.date, props.active],
+  () => [props.filters.route, props.filters.date, props.active],
   () => {
     if (props.active) {
       void fetchReport();
@@ -62,4 +65,5 @@ watch(
   },
   { immediate: true },
 );
+
 </script>

package/components/Nfc/PatrolReport/MonthlyReportTab.vue

@@ -3,23 +3,30 @@
     <ReportFilters
       :model-value="filters"
       :options="options"
+      :show-time-filter="false"
+      :show-date-filter="false"
       @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">
       <ReportLocationHeader :location="report.location" />
       <v-divider :thickness="1" class="border-opacity-100 mb-6" />
-      <SummaryReportTable :title="report.title" :rows="report.rows" />
+
+      <MonthlyReportTable
+        :title="report.title"
+        :rows="report.rows"
+      />
     </template>
 
     <ReportEmptyState
       v-else-if="!loading"
-      title="No Monthly Report Selected"
-      message="Please select a route, time range, and date to view the monthly report"
+      title="No Monthly Report"
+      message="No patrol log found for this route"
     />
+    </div>
   </div>
 </template>
 
@@ -28,11 +35,13 @@ import type {
   NFCPatrolReportFilterOptions,
   NFCPatrolReportFilters,
 } from "../../../types/nfc-patrol-report";
+
 import { useNFCPatrolMonthlyReport } from "../../../composables/useNFCPatrolMonthlyReport";
+
 import ReportEmptyState from "./ReportEmptyState.vue";
 import ReportFilters from "./ReportFilters.vue";
 import ReportLocationHeader from "./ReportLocationHeader.vue";
-import SummaryReportTable from "./SummaryReportTable.vue";
+import MonthlyReportTable from "./MonthlyReportTable.vue";
 
 const props = defineProps<{
   active: boolean;
@@ -43,14 +52,14 @@ const props = defineProps<{
 
 defineEmits<{
   "update:filters": [value: NFCPatrolReportFilters];
-  export: [];
+  export: [type: "pdf" | "csv"];
 }>();
 
-const { report, loading, fetchReport } =
+const { report, loading, notFound, fetchReport } =
   useNFCPatrolMonthlyReport(props.filters, props.site);
 
 watch(
-  () => [props.filters.route, props.filters.timeRange, props.filters.date, props.active],
+  () => [props.filters.route, props.active],
   () => {
     if (props.active) {
       void fetchReport();
@@ -58,4 +67,5 @@ watch(
   },
   { immediate: true },
 );
+
 </script>

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/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/package.json

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

package/types/nfc-patrol-report.ts

@@ -26,7 +26,7 @@ export interface NFCPatrolReportFilterOptions {
 
 export interface NFCPatrolReportLocation {
   name?: string;
-  address?: string; 
+  address?: string;
 }
 
 export interface NFCPatrolRouteSummary {
@@ -77,3 +77,17 @@ export interface NFCPatrolSummaryReport {
   title: string;
   rows: NFCPatrolReportSummaryRow[];
 }
+
+export interface NFCPatrolMonthlyReportRow {
+  month: string;
+  checked: number;
+  checkedPercentage: number;
+  missed: number;
+  missedPercentage: number;
+}
+
+export interface NFCPatrolMonthlyReport {
+  location: NFCPatrolReportLocation;
+  title: string;
+  rows: NFCPatrolMonthlyReportRow[];
+}