@7365admin1/layer-common 3.1.2-staging.38 → 3.1.2

package/components/EquipmentManagementMain.vue

@@ -46,19 +46,6 @@
           </v-row>
         </template>
 
-        <template #item.attachment="{ value }">
-          <v-btn
-            v-if="value"
-            size="small"
-            variant="tonal"
-            class="text-none"
-            @click.stop="viewAttachment(value)"
-          >
-            View Image
-          </v-btn>
-          <span v-else>—</span>
-        </template>
-
         <template #item.status="{ value }">
           <v-chip class="text-capitalize">{{ value || "N/A" }}</v-chip>
         </template>
@@ -74,7 +61,6 @@
     v-model="dialogShowForm"
     v-model:name="equipmentName"
     v-model:unitOfMeasurement="equipmentUnit"
-    v-model:attachment="equipmentAttachment"
     :mode="dialogMode"
     :equipmentData="editingEquipment"
     :site="props.site"
@@ -256,29 +242,6 @@
     </v-card>
   </v-dialog>
 
-  <v-dialog v-model="showAttachmentDialog" max-width="720" persistent>
-    <v-card rounded="lg">
-      <v-card-title class="d-flex align-center pa-4">
-        <span class="text-h6 font-weight-bold">Attachment</span>
-
-        <v-spacer />
-
-        <v-btn
-          icon="mdi-close"
-          variant="text"
-          size="small"
-          @click="(showAttachmentDialog = false), (attachmentUrl = '')"
-        />
-      </v-card-title>
-
-      <v-divider />
-
-      <v-card-text class="pa-6">
-        <v-img :src="attachmentUrl" contain />
-      </v-card-text>
-    </v-card>
-  </v-dialog>
-
   <Snackbar
     v-model="messageSnackbar"
     :text="snackbarMessage"
@@ -290,7 +253,6 @@ import useEquipment from "../composables/useEquipment";
 import useStock from "../composables/useStock";
 import useUtils from "../composables/useUtils";
 import useEquipmentManagement from "../composables/useEquipmentManagement";
-import useFile from "../composables/useFile";
 
 const props = defineProps({
   orgId: { type: String, default: "" },
@@ -318,7 +280,6 @@ const siteName = ref<string>("");
 const submitting = ref(false);
 
 const headers = [
-  { title: "Image", value: "attachment" },
   { title: "Name", value: "name" },
   { title: "Available Stock Qty", value: "qty" },
   { title: "Status", value: "status" },
@@ -332,7 +293,6 @@ const {
   deleteEquipment,
 } = useEquipment();
 const { debounce, requiredRule } = useUtils();
-const { getFileUrl } = useFile();
 
 const searchInput = ref("");
 const startDate = ref("");
@@ -392,21 +352,11 @@ const dialogMode = ref<"add" | "edit">("add");
 const editingEquipment = ref<Record<string, any>>({});
 const equipmentName = ref("");
 const equipmentUnit = ref("");
-const equipmentAttachment = ref("");
 
 const stockActionFormRef = ref<any>(null);
 const stockActionValid = ref(false);
 
 const snackbarMessage = ref("");
-const showAttachmentDialog = ref(false);
-const attachmentUrl = ref("");
-
-function viewAttachment(attachmentId: string) {
-  if (!attachmentId) return;
-
-  attachmentUrl.value = getFileUrl(attachmentId);
-  showAttachmentDialog.value = true;
-}
 
 function showMessage(msg: string, color: string = "error") {
   message.value = msg;
@@ -420,7 +370,6 @@ function onCreateUnit() {
   editingEquipment.value = {};
   equipmentName.value = "";
   equipmentUnit.value = "";
-  equipmentAttachment.value = "";
   dialogShowForm.value = true;
 }
 
@@ -430,9 +379,6 @@ async function _createEquipment() {
     const payload: TEquipmentCreate = {
       name: equipmentName.value,
       unitOfMeasurement: equipmentUnit.value,
-      ...(equipmentAttachment.value
-        ? { attachment: equipmentAttachment.value }
-        : {}),
     };
 
     let response;
@@ -452,7 +398,6 @@ async function _createEquipment() {
     editingEquipment.value = {};
     equipmentName.value = "";
     equipmentUnit.value = "";
-    equipmentAttachment.value = "";
 
     await getEquipmentsRefresh();
   } catch (error: any) {
@@ -510,7 +455,6 @@ const onEditFromMoreAction = async () => {
   editingEquipment.value = response;
   equipmentName.value = response.name || "";
   equipmentUnit.value = response.unitOfMeasurement || "";
-  equipmentAttachment.value = response.attachment || "";
   dialogShowForm.value = true;
 };
 

package/components/InvitationMain.vue

@@ -221,7 +221,7 @@ const headers = computed(() => {
       title: "Status",
       value: "status",
     },
-
+    
   ];
 
   if (props.status === "pending" && props.cancelInvitation) {
@@ -270,11 +270,10 @@ const {
       page: page.value,
       status: props.status,
       search: headerSearch.value,
-      // type: "user-invite,member-invite",
-      type: "member-invite",
+      type: "user-invite,member-invite",
       app: props.app,
       orgId: props.org,
-      // siteId: props.siteId,
+      siteId: props.siteId,
     }),
   {
     watch: [() => props.status]

package/components/ManageChecklistMain.vue

@@ -97,10 +97,7 @@
                     Rejected
                   </v-chip>
                 </div>
-                <div
-                  v-if="item.remarks"
-                  class="text-body-2 text-medium-emphasis"
-                >
+                <div v-if="item.remarks" class="text-body-2 text-medium-emphasis">
                   {{ item.remarks }}
                 </div>
                 <div
@@ -228,7 +225,11 @@
       <v-card-text class="pa-4">
         <v-row>
           <v-col cols="12">
-            <InputLabel title="Remarks" :required="false" class="mb-2" />
+            <InputLabel
+              title="Remarks (Optional)"
+              :required="false"
+              class="mb-2"
+            />
             <v-textarea
               v-model="modalData.remark"
               placeholder="Enter your remarks here"
@@ -242,7 +243,7 @@
           <v-col cols="12">
             <v-divider class="mb-4" />
             <PhotoUpload
-              title="Take/Upload Photos"
+              title="Take/Upload Photo"
               :required="false"
               v-model="modalData.photos"
               v-model:photo-ids="modalData.photoIds"
@@ -304,38 +305,31 @@
 
       <v-divider />
 
-      <v-toolbar class="pa-0" density="compact">
-        <v-row no-gutters>
-          <v-col cols="6" class="pa-0">
-            <v-btn
-              block
-              variant="text"
-              class="text-none"
-              size="large"
-              height="48"
-              :disabled="rejectModal.submitting"
-              @click="closeRejectDialog"
-            >
-              Cancel
-            </v-btn>
-          </v-col>
-
-          <v-col cols="6" class="pa-0">
-            <v-btn
-              block
-              variant="flat"
-              color="black"
-              class="text-none font-weight-bold rounded-0"
-              height="48"
-              :loading="rejectModal.submitting"
-              :disabled="!isRejectModalValid || rejectModal.submitting"
-              @click="submitRejectDialog"
-            >
-              Confirm
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-toolbar>
+      <v-card-actions class="pa-0">
+        <v-btn
+          color="grey"
+          variant="flat"
+          rounded="0"
+          class="flex-grow-1 text-none"
+          height="48"
+          :disabled="rejectModal.submitting"
+          @click="closeRejectDialog"
+        >
+          Cancel
+        </v-btn>
+        <v-btn
+          color="error"
+          variant="flat"
+          rounded="0"
+          class="flex-grow-1 text-none"
+          height="48"
+          :loading="rejectModal.submitting"
+          :disabled="!isRejectModalValid || rejectModal.submitting"
+          @click="submitRejectDialog"
+        >
+          Confirm
+        </v-btn>
+      </v-card-actions>
     </v-card>
   </v-dialog>
 
@@ -441,12 +435,12 @@ const { back } = useUtils();
 const route = useRoute();
 const scheduleTitle = computed(() => {
   const path = route.path;
-  if (path.includes("cleaning-schedule")) return "Cleaning Checklist";
-  if (path.includes("technician-schedule")) return "Technician Checklist";
-  if (path.includes("landscape-schedule")) return "Landscape Checklist";
-  if (path.includes("pool-schedule")) return "Pool Checklist";
-  if (path.includes("pest-schedule")) return "Pest Checklist";
-  return "Cleaner Checklist";
+  if (path.includes('cleaning-schedule')) return 'Cleaning Checklist';
+  if (path.includes('technician-schedule')) return 'Technician Checklist';
+  if (path.includes('landscape-schedule')) return 'Landscape Checklist';
+  if (path.includes('pool-schedule')) return 'Pool Checklist';
+  if (path.includes('pest-schedule')) return 'Pest Checklist';
+  return 'Cleaner Checklist';
 });
 
 const canAddRemarks = computed(() => props.canAddRemarks);

package/components/Nfc/NFCPatrolReportMain.vue

@@ -14,63 +14,44 @@
         </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">
-          <div v-if="activeTab === 'patrol'">
-            <PatrolReportTab
-              :active="true"
-              :site="site"
-              :filters="filters"
-              :options="options"
-              @update:filters="updateFilters"
-              @export="exportReport"
-            />
-          </div>
+          <PatrolReportTab
+            :active="activeTab === 'patrol'"
+            :site="site"
+            :filters="filters"
+            :options="options"
+            @update:filters="updateFilters"
+            @export="exportReport"
+          />
         </v-window-item>
 
         <v-window-item value="daily">
-          <div v-if="activeTab === 'daily'">
-            <DailyReportTab
-              :active="true"
-              :site="site"
-              :filters="filters"
-              :options="options"
-              @update:filters="updateFilters"
-              @export="exportReport"
-            />
-          </div>
+          <DailyReportTab
+            :active="activeTab === 'daily'"
+            :site="site"
+            :filters="filters"
+            :options="options"
+            @update:filters="updateFilters"
+            @export="exportReport"
+          />
         </v-window-item>
 
         <v-window-item value="monthly">
-          <div v-if="activeTab === 'monthly'">
-            <MonthlyReportTab
-              :active="true"
-              :site="site"
-              :filters="filters"
-              :options="options"
-              @update:filters="updateFilters"
-              @export="exportReport"
-            />
-          </div>
+          <MonthlyReportTab
+            :active="activeTab === 'monthly'"
+            :site="site"
+            :filters="filters"
+            :options="options"
+            @update:filters="updateFilters"
+            @export="exportReport"
+          />
         </v-window-item>
       </v-window>
     </v-col>
@@ -78,20 +59,15 @@
 </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;
@@ -99,16 +75,11 @@ const props = defineProps<{
 }>();
 
 const router = useRouter();
-
-
 const activeTab = ref<NFCPatrolReportTab>("patrol");
+const { filters, options, fetchOptions } = useNFCPatrolReportFilters(props.site);
+const { exportReport: exportActiveReport } = useNFCPatrolReportExport();
 
-const { filters, options, fetchOptions } =
-  useNFCPatrolReportFilters(props.site);
-
-onMounted(() => {
-  fetchOptions();
-});
+onMounted(fetchOptions);
 
 function goBack() {
   router.back();
@@ -120,90 +91,11 @@ function updateFilters(value: NFCPatrolReportFilters) {
   filters.date = value.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) => escapeCsvCell(getCsvCellValue(cell)))
-        .join(","),
-    )
-    .join("\n");
-
-  const blob = new Blob([csv], {
-    type: "text/csv;charset=utf-8;",
+async function exportReport() {
+  await exportActiveReport(activeTab.value, {
+    route: filters.route,
+    timeRange: filters.timeRange,
+    date: filters.date,
   });
-
-  const link = document.createElement("a");
-
-  link.href = URL.createObjectURL(blob);
-  link.download = `${activeTab.value}-report.csv`;
-  link.click();
-
-  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/DailyReportTab.vue

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

package/components/Nfc/PatrolReport/MonthlyReportTab.vue

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

package/components/Nfc/PatrolReport/PatrolActivityTable.vue

@@ -7,8 +7,6 @@
         <thead>
           <tr>
             <th>Checkpoints</th>
-            <th>Security Personnel</th>
-            <th>Signature</th>
             <th>Start - End Time</th>
             <th>
               Travel time<br />
@@ -25,17 +23,6 @@
             @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 }}
@@ -72,8 +59,6 @@ defineProps<{
   activities: NFCPatrolActivity[];
 }>();
 
-const { getFileUrl } = useFile();
-
 const emit = defineEmits<{
   remarks: [activity: NFCPatrolActivity];
 }>();
@@ -93,9 +78,4 @@ function handleActivityClick(activity: NFCPatrolActivity) {
 .cursor-pointer {
   cursor: pointer;
 }
-
-.guard-signature {
-  width: 80px;
-  height: 40px;
-}
 </style>