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

package/components/Input/InputPhoneNumberV2.vue

@@ -46,136 +46,153 @@
         :density="density"
         :disabled="props.disabled"
         :placeholder="placeholder || currentMask"
+        @focus="emit('focus')"
+        @blur="emit('blur')"
       />
     </v-col>
-    <span class="text-error text-caption w-100" v-if="errorMessage && !hideDetails">
+    <span
+      class="text-error text-caption w-100"
+      v-if="errorMessage && !hideDetails"
+    >
       {{ errorMessage }}
     </span>
   </v-row>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, type PropType } from 'vue'
+import { ref, computed, watch, type PropType } from "vue";
 //@ts-ignore
-import phoneMasks from '~/utils/phoneMasks'
-import type { ValidationRule } from 'vuetify/lib/types.mjs'
+import phoneMasks from "~/utils/phoneMasks";
+import type { ValidationRule } from "vuetify/lib/types.mjs";
 
 const props = defineProps({
-  modelValue: { type: String as PropType<string>, default: '' },
+  modelValue: { type: String as PropType<string>, default: "" },
   rules: { type: Array as PropType<ValidationRule[]>, default: () => [] },
-  variant: { type: String as PropType<any>, default: 'outlined' },
-  density: { type: String as PropType<'default' | 'comfortable' | 'compact'>, default: 'default' },
+  variant: { type: String as PropType<any>, default: "outlined" },
+  density: {
+    type: String as PropType<"default" | "comfortable" | "compact">,
+    default: "default",
+  },
   placeholder: { type: String },
   hideDetails: { type: Boolean, default: false },
   loading: { type: Boolean, default: false },
   readOnly: { type: Boolean, default: false },
   disabled: { type: Boolean, default: false },
-})
+});
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(["update:modelValue", "focus", "blur"]);
 
 type TPhoneMask = {
-  name: string
-  flag: string
-  code: string
-  dial_code: string
-  regex: string
-}
+  name: string;
+  flag: string;
+  code: string;
+  dial_code: string;
+  regex: string;
+};
 
 // Main reactive values
-const phone = ref(props.modelValue)
-const input = ref('')
-const selectedCode = ref('SG')
-const countries = phoneMasks
-const errorMessage = ref('')
-const maskRef = ref()
-const maskKey = ref(0)
-
+const phone = ref(props.modelValue);
+const input = ref("");
+const selectedCode = ref("SG");
+const countries = phoneMasks;
+const errorMessage = ref("");
+const maskRef = ref();
+const maskKey = ref(0);
 
 const currentMask = computed(() => {
-  const country = countries.find((c: TPhoneMask) => c.code === selectedCode.value)
-  if (!country) return '############'
-  return generateMaskFromRegex(country.regex)
-})
-
+  const country = countries.find(
+    (c: TPhoneMask) => c.code === selectedCode.value
+  );
+  if (!country) return "############";
+  return generateMaskFromRegex(country.regex);
+});
 
 const phonePrefix = computed(() => {
-  const country = countries.find((c: TPhoneMask) => c.code === selectedCode.value)
-  return country?.dial_code || ''
-})
+  const country = countries.find(
+    (c: TPhoneMask) => c.code === selectedCode.value
+  );
+  return country?.dial_code || "";
+});
 
 const countriesByLongestDialCode = computed(() => {
-  return [...countries].sort((a: TPhoneMask, b: TPhoneMask) => b.dial_code.length - a.dial_code.length)
-})
+  return [...countries].sort(
+    (a: TPhoneMask, b: TPhoneMask) => b.dial_code.length - a.dial_code.length
+  );
+});
 
 function generateMaskFromRegex(regex: string): string {
-  let pattern = regex.replace(/^\^|\$$/g, '')
-  pattern = pattern.replace(/\(\?:\+?\d+\)\?/g, '')
-  pattern = pattern.replace(/\+?\d{1,4}/, '')
-  pattern = pattern.replace(/\\d\{(\d+)\}/g, (_, count) => '#'.repeat(Number(count)))
-  pattern = pattern.replace(/\\d/g, '#')
-  pattern = pattern.replace(/\\/g, '')
-  pattern = pattern.replace(/\(\?:/g, '')
-  return pattern.trim()
+  let pattern = regex.replace(/^\^|\$$/g, "");
+  pattern = pattern.replace(/\(\?:\+?\d+\)\?/g, "");
+  pattern = pattern.replace(/\+?\d{1,4}/, "");
+  pattern = pattern.replace(/\\d\{(\d+)\}/g, (_, count) =>
+    "#".repeat(Number(count))
+  );
+  pattern = pattern.replace(/\\d/g, "#");
+  pattern = pattern.replace(/\\/g, "");
+  pattern = pattern.replace(/\(\?:/g, "");
+  return pattern.trim();
 }
 
 const validatePhone = (): boolean | string => {
-  if (props.readOnly) return true
-  if (!phone.value) return true
+  if (props.readOnly) return true;
+  if (!phone.value) return true;
 
-  const country = countries.find((c: TPhoneMask) => c.code === selectedCode.value)
-  if (!country) return true
+  const country = countries.find(
+    (c: TPhoneMask) => c.code === selectedCode.value
+  );
+  if (!country) return true;
 
-  const regex = new RegExp(country.regex)
-  const isValid = regex.test(phone.value)
-  errorMessage.value = isValid ? '' : `Invalid ${country.name} phone number`
-  return isValid
-}
+  const regex = new RegExp(country.regex);
+  const isValid = regex.test(phone.value);
+  errorMessage.value = isValid ? "" : `Invalid ${country.name} phone number`;
+  return isValid;
+};
 
 function findCountryFromPhone(value: string): TPhoneMask | undefined {
-  return countriesByLongestDialCode.value.find((c: TPhoneMask) => value.startsWith(c.dial_code))
+  return countriesByLongestDialCode.value.find((c: TPhoneMask) =>
+    value.startsWith(c.dial_code)
+  );
 }
 
 function syncInputFromPhone(value: string) {
-  const prefix = phonePrefix.value
-  if (!value) input.value = ''
-  else input.value = value.startsWith(prefix) ? value.slice(prefix.length) : value
+  const prefix = phonePrefix.value;
+  if (!value) input.value = "";
+  else
+    input.value = value.startsWith(prefix) ? value.slice(prefix.length) : value;
 }
 
 function handleUpdateCountry() {
-  const prefix = phonePrefix.value
-  phone.value = input.value ? prefix + input.value : ''
+  const prefix = phonePrefix.value;
+  phone.value = input.value ? prefix + input.value : "";
 }
 
-
 watch(input, (newInput) => {
-  const prefix = phonePrefix.value
-  if (!newInput) phone.value = ''
-  else phone.value = prefix + newInput
-})
+  const prefix = phonePrefix.value;
+  if (!newInput) phone.value = "";
+  else phone.value = prefix + newInput;
+});
 
 watch(
   () => props.modelValue,
   (val) => {
-    phone.value = val || ''
+    phone.value = val || "";
   },
   { immediate: true }
-)
-
+);
 
 watch(
   phone,
   (newVal) => {
-    const country = newVal ? findCountryFromPhone(newVal) : undefined
-    if (country && country.code !== selectedCode.value) selectedCode.value = country.code
-    syncInputFromPhone(newVal)
-    emit('update:modelValue', newVal)
+    const country = newVal ? findCountryFromPhone(newVal) : undefined;
+    if (country && country.code !== selectedCode.value)
+      selectedCode.value = country.code;
+    syncInputFromPhone(newVal);
+    emit("update:modelValue", newVal);
   },
   { immediate: true }
-)
-
+);
 
 watch(selectedCode, () => {
-  maskKey.value++
-})
+  maskKey.value++;
+});
 </script>

package/components/Input/VehicleNumber.vue

@@ -6,6 +6,8 @@
     :placeholder="placeholder"
     :counter="maxlength"
     @input="onInput"
+    @focus="emit('focus')"
+    @blur="emit('blur')"
     outlined
     :disabled="disabled"
     :readonly="readonly"
@@ -14,36 +16,37 @@
 </template>
 
 <script setup>
+const emit = defineEmits(["focus", "blur"]);
 
 const props = defineProps({
   placeholder: {
     type: String,
-    default: 'Vehicle Number'
+    default: "Vehicle Number",
   },
   rules: {
     type: Array,
-    default: () => []
+    default: () => [],
   },
   maxlength: {
     type: [Number, String],
-    default: false
+    default: false,
   },
   disabled: {
     type: Boolean,
   },
   readonly: {
     type: Boolean,
-  }
-})
+  },
+});
 
-const model = defineModel({required: true })
+const model = defineModel({ required: true });
 
 function onInput(event) {
-  const value = typeof event === 'string' ? event : event?.target?.value || ''
+  const value = typeof event === "string" ? event : event?.target?.value || "";
 
-  let formatted = value.replace(/[^A-Za-z0-9]/g, '')
-  formatted = formatted.toUpperCase()
+  let formatted = value.replace(/[^A-Za-z0-9]/g, "");
+  formatted = formatted.toUpperCase();
 
-  model.value = formatted
+  model.value = formatted;
 }
-</script>
+</script>

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>