@7365admin1/layer-common 3.1.2 → 3.1.3-staging.40

package/components/EquipmentManagementMain.vue

@@ -46,6 +46,19 @@
           </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>
@@ -61,6 +74,7 @@
     v-model="dialogShowForm"
     v-model:name="equipmentName"
     v-model:unitOfMeasurement="equipmentUnit"
+    v-model:attachment="equipmentAttachment"
     :mode="dialogMode"
     :equipmentData="editingEquipment"
     :site="props.site"
@@ -242,6 +256,29 @@
     </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"
@@ -253,6 +290,7 @@ 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: "" },
@@ -280,6 +318,7 @@ 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" },
@@ -293,6 +332,7 @@ const {
   deleteEquipment,
 } = useEquipment();
 const { debounce, requiredRule } = useUtils();
+const { getFileUrl } = useFile();
 
 const searchInput = ref("");
 const startDate = ref("");
@@ -352,11 +392,21 @@ 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;
@@ -370,6 +420,7 @@ function onCreateUnit() {
   editingEquipment.value = {};
   equipmentName.value = "";
   equipmentUnit.value = "";
+  equipmentAttachment.value = "";
   dialogShowForm.value = true;
 }
 
@@ -379,6 +430,9 @@ async function _createEquipment() {
     const payload: TEquipmentCreate = {
       name: equipmentName.value,
       unitOfMeasurement: equipmentUnit.value,
+      ...(equipmentAttachment.value
+        ? { attachment: equipmentAttachment.value }
+        : {}),
     };
 
     let response;
@@ -398,6 +452,7 @@ async function _createEquipment() {
     editingEquipment.value = {};
     equipmentName.value = "";
     equipmentUnit.value = "";
+    equipmentAttachment.value = "";
 
     await getEquipmentsRefresh();
   } catch (error: any) {
@@ -455,6 +510,7 @@ 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,10 +270,11 @@ const {
       page: page.value,
       status: props.status,
       search: headerSearch.value,
-      type: "user-invite,member-invite",
+      // type: "user-invite,member-invite",
+      type: "member-invite",
       app: props.app,
       orgId: props.org,
-      siteId: props.siteId,
+      // siteId: props.siteId,
     }),
   {
     watch: [() => props.status]

package/components/ManageChecklistMain.vue

@@ -97,7 +97,10 @@
                     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
@@ -225,11 +228,7 @@
       <v-card-text class="pa-4">
         <v-row>
           <v-col cols="12">
-            <InputLabel
-              title="Remarks (Optional)"
-              :required="false"
-              class="mb-2"
-            />
+            <InputLabel title="Remarks" :required="false" class="mb-2" />
             <v-textarea
               v-model="modalData.remark"
               placeholder="Enter your remarks here"
@@ -243,7 +242,7 @@
           <v-col cols="12">
             <v-divider class="mb-4" />
             <PhotoUpload
-              title="Take/Upload Photo"
+              title="Take/Upload Photos"
               :required="false"
               v-model="modalData.photos"
               v-model:photo-ids="modalData.photoIds"
@@ -305,31 +304,38 @@
 
       <v-divider />
 
-      <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-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>
   </v-dialog>
 
@@ -435,12 +441,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,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,90 @@ 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) => escapeCsvCell(getCsvCellValue(cell)))
+        .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);
+}
+
+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,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>