@7365admin1/layer-common 1.11.28 → 1.11.30

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @iservice365/layer-common
 
+## 1.11.30
+
+### Patch Changes
+
+- 26fbfd1: Fix issue with double attrib
+
+## 1.11.29
+
+### Patch Changes
+
+- 1fa1e46: Update layer-common
+
 ## 1.11.28
 
 ### Patch Changes

package/components/VisitorManagement.vue

@@ -9,16 +9,58 @@
       :extension-height="110"
       :offset="300"
       :pageRange="pageRange"
-      :canCreate="canAddVisitor"
-      :canScanVisitorQRCode="canScanVisitorQRCode"
       @refresh="getVisitorRefresh"
       @update:page="handleUpdatePage"
-      createLabel="Add Visitor"
       show-header
       @row-click="handleRowClick"
-      @create="handleAddNew"
-      @scan="dialog.scanVisitorQRCode = true"
     >
+      <template #actions>
+        <v-row no-gutters>
+          <v-btn
+            v-if="canAddVisitor"
+            class="text-none"
+            rounded="pill"
+            variant="tonal"
+            size="large"
+            @click="handleAddNew"
+            text="Add Visitor"
+          />
+          <v-btn
+            v-if="canScanVisitorQRCode"
+            text="Scan QR Code"
+            class="text-none ml-2"
+            rounded="pill"
+            variant="tonal"
+            size="large"
+            @click="dialog.scanVisitorQRCode = true"
+          />
+          <v-menu>
+            <template #activator="{ props }">
+              <v-btn
+                v-bind="props"
+                text="Download Report"
+                class="text-none ml-2"
+                prepend-icon="mdi-download"
+                rounded="pill"
+                variant="tonal"
+                size="large"
+              />
+            </template>
+            <v-list>
+              <v-list-item
+                prepend-icon="mdi-file-pdf"
+                title="Download PDF Report"
+                @click="handleDownloadPDFReport"
+              />
+              <v-list-item
+                prepend-icon="mdi-file-csv"
+                title="Download CSV Report"
+                @click="handleDownloadCSVReport"
+              />
+            </v-list>
+          </v-menu>
+        </v-row>
+      </template>
       <template #extension>
         <v-row no-gutters class="w-100 d-flex flex-column">
           <v-tabs
@@ -167,21 +209,34 @@
         <v-row no-gutters class="d-flex flex-column py-2">
           <span class="d-flex align-center ga-2">
             <v-icon
-              icon="mdi-clock-time-four-outline"
-              color="green"
+              icon="mdi-clock-time-eight-outline"
+              color="success"
               size="20"
             />
-            <span class="text-capitalize">{{
-              UTCToLocalTIme(item.checkIn) || "-"
-            }}</span>
-            <span>
-              <v-icon
-                v-if="item?.snapshotEntryImage"
-                size="17"
-                icon="mdi-image"
-                @click.stop="handleViewImage(item.snapshotEntryImage)"
+            <template v-if="!item.checkIn && canUpdateVisitor">
+              <v-btn
+                size="x-small"
+                class="text-capitalize"
+                color="success"
+                text="Checkin"
+                :disabled="isVisitorDataFromScannedQRCodeCheckingInOut"
+                @click.stop="handleCheckin(item)"
+                :loading="isVisitorDataFromScannedQRCodeCheckingInOut"
               />
-            </span>
+            </template>
+            <template v-else>
+              <span class="text-capitalize">{{
+                UTCToLocalTIme(item.checkIn)
+              }}</span>
+              <span>
+                <v-icon
+                  v-if="item?.snapshotEntryImage"
+                  size="17"
+                  icon="mdi-image"
+                  @click.stop="handleViewImage(item.snapshotEntryImage)"
+                />
+              </span>
+            </template>
           </span>
 
           <span
@@ -218,7 +273,7 @@
             <v-icon icon="mdi-clock-time-eight-outline" color="red" size="20" />
             <template v-if="item.checkOut">
               <span class="text-capitalize">{{
-                UTCToLocalTIme(item.checkOut) || "-"
+                UTCToLocalTIme(item.checkOut)
               }}</span>
               <span>
                 <v-icon
@@ -236,6 +291,7 @@
                 />
               </span>
             </template>
+            <template v-else> <span class="mt-1"> N/A </span> </template>
           </span>
 
           <div
@@ -323,23 +379,6 @@
             <v-icon icon="mdi-clock-time-four-outline" size="20" />
             {{ item.arrivalTime ?? "N/A" }}
           </span>
-
-          <span v-if="!item.checkIn && canUpdateVisitor">
-            <span class="d-flex align-center ga-2 cursor-pointer">
-              <v-icon
-                icon="mdi-clock-time-eight-outline"
-                color="success"
-                size="20"
-              />
-              <v-btn
-                size="x-small"
-                class="text-capitalize"
-                color="success"
-                text="Checkin"
-                @click.stop="handleCheckin(item)"
-              />
-            </span>
-          </span>
         </v-row>
       </template>
 
@@ -863,7 +902,9 @@
               class="text-h6 text-center"
             >
               {{
-                `Are you sure you want to ${approveRejectOvernightParkingRequestDialog.text} the visitor's overnight parking request?`
+                `Are you sure you want to ${approveRejectOvernightParkingRequestDialog.text} the visitor's overnight
+              parking
+              request?`
               }}
             </v-col>
 
@@ -937,6 +978,8 @@ definePageMeta({
   middleware: ["01-auth", "02-org"],
 });
 
+const { downloadPDF } = usePDFDownload();
+
 const props = defineProps({
   canAddVisitor: {
     type: Boolean,
@@ -999,8 +1042,14 @@ const selectedVisitorId = ref<string | null>(""); // selected visitor for viewin
 
 //filter states
 const searchInput = ref("");
-const dateFrom = ref("");
-const dateTo = ref("");
+
+const today = new Date();
+const oneMonthAgo = new Date();
+oneMonthAgo.setMonth(today.getMonth() - 1);
+
+const dateTo = ref(normalizeDateOnly(today.toISOString()));
+const dateFrom = ref(normalizeDateOnly(oneMonthAgo.toISOString()));
+
 const filterTypes = ref<TVisitorType[]>([]);
 const displayNotCheckedOut = ref<boolean>(false);
 const mode = ref<"add" | "edit" | "register">("add");
@@ -1253,8 +1302,12 @@ const {
       page: page.value,
       site: siteId,
       search: searchInput.value,
-      dateTo: moment(dateTo.value).endOf("day").toISOString(),
-      dateFrom: moment(dateFrom.value).startOf("day").toISOString(),
+      dateTo: dateTo.value
+        ? moment(dateTo.value).endOf("day").toISOString()
+        : undefined,
+      dateFrom: dateFrom.value
+        ? moment(dateFrom.value).startOf("day").toISOString()
+        : undefined,
       type:
         filterTypes.value.length === 0 && activeTab.value === "registered"
           ? "contractor,delivery,walk-in,pick-up,drop-off,guest"
@@ -1678,6 +1731,158 @@ async function proceedCheckout() {
   }
 }
 
+function buildReportParams(): any {
+  const params: any = {
+    site: siteId,
+    search: searchInput.value,
+    dateTo: dateTo.value
+      ? moment(dateTo.value).endOf("day").toISOString()
+      : undefined,
+    dateFrom: dateFrom.value
+      ? moment(dateFrom.value).startOf("day").toISOString()
+      : undefined,
+    type:
+      filterTypes.value.length === 0 && activeTab.value === "registered"
+        ? "contractor,delivery,walk-in,pick-up,drop-off,guest"
+        : filterTypes.value.filter(Boolean).join(","),
+    checkedOut: displayNotCheckedOut.value ? false : undefined,
+    limit: 100,
+  };
+
+  if (activeTab.value === "guests") {
+    params.type = "guest";
+    params.status = "approved";
+  } else if (activeTab.value === "resident-transactions") {
+    params.status = "registered";
+    params.type = "resident,tenant";
+  } else if (activeTab.value === "overnight-parking") {
+    params.tab = "Overnight Parking";
+  } else {
+    params.status = activeTab.value;
+  }
+
+  return params;
+}
+
+async function handleDownloadPDFReport() {
+  try {
+    showMessage("Generating PDF report...", "info");
+
+    // Build URL with query parameters
+    const queryParams = new URLSearchParams();
+    if (searchInput.value) queryParams.append("search", searchInput.value);
+    if (dateFrom.value) queryParams.append("dateFrom", dateFrom.value);
+    if (dateTo.value) queryParams.append("dateTo", dateTo.value);
+    if (filterTypes.value.length > 0)
+      queryParams.append("type", filterTypes.value.join(","));
+    if (activeTab.value) queryParams.append("tab", activeTab.value);
+    if (displayNotCheckedOut.value) queryParams.append("checkedOut", "true");
+
+    const queryString = queryParams.toString();
+    const url = `/${route.params.org}/${siteId}/visitor-management/preview${
+      queryString ? "?" + queryString : ""
+    }`;
+    const title = `Visitor-Report-${siteId}-${
+      new Date().toISOString().split("T")[0]
+    }`;
+
+    await downloadPDF({ url, title, orientation: "P", appKey: "SECURITY" });
+    showMessage("PDF report downloaded successfully!", "success");
+  } catch (error) {
+    showMessage("Error downloading PDF report", "error");
+  }
+}
+
+async function handleDownloadCSVReport() {
+  try {
+    showMessage("Generating CSV report...", "info");
+
+    const params = buildReportParams();
+    const reportData = await getVisitors(params);
+    const csvData = generateCSVData(reportData.items ?? []);
+    downloadCSVFile(csvData);
+    showMessage("CSV report downloaded successfully!", "success");
+  } catch (error) {
+    showMessage("Error downloading CSV report", "error");
+  }
+}
+
+function generateCSVData(visitors: any[]): string {
+  const headers = [
+    "NAME",
+    "TYPE",
+    "COMPANY",
+    "BLOCK",
+    "LEVEL",
+    "UNIT",
+    "CONTACT",
+    "VEHICLE NO.",
+    "CHECK-IN",
+    "CHECK-OUT",
+    "CHECK-IN IMAGE",
+    "CHECK-OUT IMAGE",
+  ];
+
+  const formatExportTypes = (type: string) => {
+    if (!type || type === "null") return "";
+    if (type === "guest") return "Drive In";
+    const typeParts = type.split("-");
+    return typeParts.map((part) => formatCamelCaseToWords(part)).join("-");
+  };
+
+  const rows = visitors.map((visitor) => [
+    visitor.name || "",
+    formatExportTypes(formatType(visitor)) || "",
+    visitor.company || "",
+    visitor.block || "",
+    visitor.level || "",
+    visitor.unitName || "",
+    visitor.contact || "",
+    visitor.plateNumber || "",
+    formatDate(visitor.checkIn) || "",
+    formatDate(visitor.checkOut) || "",
+    visitor.snapshotEntryImage
+      ? getFileUrlAnpr(`${siteId}/${visitor.snapshotEntryImage}`)
+      : "",
+    visitor.snapshotExitImage
+      ? getFileUrlAnpr(`${siteId}/${visitor.snapshotExitImage}`)
+      : "",
+  ]);
+
+  const csvContent = [
+    headers.map((h) => `"${h}"`).join(","),
+    ...rows.map((row) =>
+      row
+        .map((cell) => {
+          const cellStr = String(cell || "");
+          return `"${cellStr.replace(/"/g, '""')}"`;
+        })
+        .join(",")
+    ),
+  ].join("\n");
+
+  return csvContent;
+}
+
+function downloadCSVFile(csvContent: string) {
+  const now = new Date();
+  const dateStr = now.toISOString().split("T")[0];
+  const timeStr = now.toTimeString().split(" ")[0].replace(/:/g, "_");
+  const filename = `VISITOR_MANAGEMENT_CSV_REPORT_${activeTab.value}_${dateStr}_${timeStr}.csv`;
+
+  const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+  const link = document.createElement("a");
+  const url = URL.createObjectURL(blob);
+
+  link.setAttribute("href", url);
+  link.setAttribute("download", filename);
+  link.style.visibility = "hidden";
+
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+
 const updateRouteQuery = debounce(
   // (search: string, from: string, to: string, types: string[], status, checkedOut) => {
   ({
@@ -1740,8 +1945,12 @@ watch([searchInput, dateFrom, dateTo, filterTypes, activeTab], () => {
 onMounted(() => {
   activeTab.value = (route.query.tab as string) || "unregistered";
   searchInput.value = (route.query.search as string) || "";
-  dateFrom.value = normalizeDateOnly((route.query.dateFrom as string) || "");
-  dateTo.value = normalizeDateOnly((route.query.dateTo as string) || "");
+  if (route.query.dateFrom) {
+    dateFrom.value = normalizeDateOnly(route.query.dateFrom as string);
+  }
+  if (route.query.dateTo) {
+    dateTo.value = normalizeDateOnly(route.query.dateTo as string);
+  }
   filterTypes.value = ((route.query.type as string)?.split(",") || []).filter(
     Boolean
   ) as TVisitorType[];

package/components/VisitorsReportPreview.vue

@@ -0,0 +1,400 @@
+<template>
+    <v-card height="100%" width="100%" flat class="pa-2 pa-sm-5">
+        <v-row no-gutters>
+            <v-col cols="12">
+                <v-row no-gutters class="d-flex ga-2 justify-space-between align-start mb-3 mb-sm-5 flex-wrap">
+
+                    <div class="d-flex flex-column" style="min-width: 0;">
+                        <span class="text-subtitle-1 font-weight-bold" style="word-break: break-word;">Visitor Management - Visitor ({{ items.length }} visitors)</span>
+                        <span style="font-size: clamp(11px, 1.1vw, 13px); word-break: break-word;">Date Range: {{ formatDateDDMMYYYY(dateFrom) }} - {{ formatDateDDMMYYYY(dateTo) ?? "" }}</span>
+                        <span class="text-subtitle-1" style="word-break: break-word;">Site Name: {{ activeSiteName }}</span>
+                    </div>
+
+                </v-row>
+                <div style="overflow-x: auto; max-width: 100%;">
+                    <v-data-table :headers="headers" :items="items" show-header :items-per-page="100" hide-default-footer class="text-black"
+                    no-data-text="No entries to display">
+
+                    <template v-slot:item.typeCompany="{ item }">
+                        <span class="d-flex align-center ga-2" style="flex-wrap: wrap;">
+                            <v-icon icon="mdi-user" size="15" />
+                            <span v-if="item.type === 'contractor'" class="text-capitalize" style="word-break: break-word;">{{
+                                formatCamelCaseToWords(item.contractorType as string)
+                                }}</span>
+                            <span v-else class="text-capitalize" style="word-break: break-word;">{{ formatType(item) }}</span>
+                        </span>
+                        <span class="d-flex align-center ga-2" style="flex-wrap: wrap;">
+                            <v-icon icon="mdi-domain" size="15" />
+                            <span class="text-capitalize" style="word-break: break-word;">{{ item?.company || "N/A" }}</span>
+                    </template>
+
+                    <template v-slot:item.location="{ item }">
+                        <span class="d-flex align-center ga-2" style="flex-wrap: wrap;">
+                            <v-icon icon="mdi-storefront-outline" size="15" />
+                            <span class="text-capitalize" style="word-break: break-word;">{{ 
+                                formatLocation({
+                                    block: item.block as number,
+                                    level: item.level as string,
+                                    unit: item.unitName as string,
+                                })
+                            }}</span>
+                        </span>
+                    </template>
+
+                    <template v-slot:item.contact-vehicleNumber="{ item }">
+                        <span class="d-flex align-center ga-2" style="flex-wrap: wrap;">
+                            <v-icon icon="mdi-phone" size="15" />
+                            <span class="text-capitalize" style="word-break: break-word;">{{ item?.contact || "N/A" }}</span>
+                        </span>
+                        <span class="d-flex align-center ga-2" style="flex-wrap: wrap;">
+                            <v-icon icon="mdi-car-back" size="15" />
+                            <span class="text-capitalize" style="word-break: break-word;">{{ item?.plateNumber || "N/A" }}</span>
+                        </span>
+                    </template>
+
+                    <template v-slot:item.checkInOut="{ item }">
+                        <span class="d-flex align-center ga-2" style="flex-wrap: wrap;">
+                            <v-icon icon="mdi-login" size="15" />
+                            <span class="text-capitalize" style="word-break: break-word;">{{ formatDate(item.checkIn as string) }}</span>
+                        </span>
+                        <span class="d-flex align-center ga-2" style="flex-wrap: wrap;">
+                            <v-icon icon="mdi-logout" size="15" />
+                            <span class="text-capitalize" style="word-break: break-word;">{{ formatDate(item.checkOut as string) }}</span>
+                        </span>
+                    </template>
+
+                    <template v-slot:item.checkInOutImage="{ item }">
+                        <div class="d-flex flex-column ga-2">
+                            <div v-if="item?.snapshotEntryImage" class="d-flex flex-column">
+                                <span class="text-caption font-weight-bold text-blue-darken-1">Check-In</span>
+                                    <v-img :src="getFileUrlAnpr(`${siteId}/${item.snapshotEntryImage}`)"
+                                        style="max-width: clamp(60px, 10vw, 100px); max-height: clamp(60px, 10vw, 100px);"
+                                        class="border" />
+                                </div>
+                                <div v-if="item?.snapshotExitImage" class="d-flex flex-column">
+                                    <span class="text-caption font-weight-bold text-red-darken-1">Check-Out</span>
+                                    <v-img :src="getFileUrlAnpr(`${siteId}/${item.snapshotExitImage}`)"
+                                        style="max-width: clamp(60px, 10vw, 100px); max-height: clamp(60px, 10vw, 100px);"
+                                        class="border" />
+                            </div>
+                            <span v-if="!item?.snapshotEntryImage && !item?.snapshotExitImage"
+                                class="text-caption text-disabled">
+                                No images
+                            </span>
+                        </div>
+                    </template>
+
+
+                </v-data-table>
+                </div>
+            </v-col>
+
+        </v-row>
+    </v-card>
+</template>
+
+<script setup lang="ts">
+import moment from 'moment-timezone';
+import useLocalAuth from '../composables/useLocalAuth';
+import useVisitor from '../composables/useVisitor';
+import useUtils from '../composables/useUtils';
+import useSite from '../composables/useSite';
+
+
+definePageMeta({
+    middleware: ["01-auth", "02-org"],
+});
+
+
+const props = defineProps({
+    siteId: {
+        type: String,
+        required: true,
+    },
+})
+
+const { getVisitors } = useVisitor();
+const { formatCamelCaseToWords } = useUtils();
+const { currentUser } = useLocalAuth();
+const { getSiteById } = useSite(); const { getFileUrlAnpr } = useFile(); const route = useRoute();
+const { org: orgId, site: siteId } = route.params as {
+    org: string;
+    site: string;
+    reportId: string;
+};
+
+const activeSiteName = computed(() => {
+    const site = sites.value.find(s => s._id === props.siteId)
+    return site ? site.name : ''
+})
+
+
+const headers: Record<string, any>[] = [
+    { title: "Name", value: "name", align: "start" },
+    { title: "Type/Company", value: "typeCompany", align: "start" },
+    { title: "Location", value: "location", align: "start" },
+    { title: "Contact/Vehicle No", value: "contact-vehicleNumber", align: "start" },
+    { title: "Check In/Out", value: "checkInOut", align: "center" },
+    { title: "Check In/Out Image", value: "checkInOutImage", align: "start" },
+]
+
+
+
+
+const searchInput = ref("");
+const dateFrom = ref<string | null>(null);
+const dateTo = ref<string | null>(null);
+const filterTypes = ref<string[]>([]);
+const activeTab = ref("registered");
+const displayNotCheckedOut = ref(false);
+
+const sites = ref<Array<Record<string, any>>>([]);
+
+const items = ref<TVisitor[]>([])
+
+const formatType = (item: any) =>
+    (item.deliveryType ? item.deliveryType + "-" : "") + item.type;
+
+
+const { data: getSitesReq } = await useLazyAsyncData(
+    "get-customer-site-" + props.siteId,
+    () =>
+        getSiteById(props.siteId),
+    {
+        watch: [() => props.siteId],
+    }
+);
+
+watch(getSitesReq, (newData: any) => {
+    if (newData) {
+        sites.value = newData ? [newData] : []
+    }
+})
+
+const formatLocation = ({ block, level, unit }: { block: number, level: string, unit: string | TBuildingUnit }) => {
+    const parts = [];
+
+    if (block) parts.push(`Block ${block}`);
+    if (level) parts.push(level);
+    if (unit) parts.push(unit);
+
+    return parts.join(" / ");
+};
+
+function formatDate(dateString: string) {
+    if (!dateString) return "";
+
+    const date = new Date(dateString);
+    return date.toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+    });
+}
+
+
+const {
+    data: getVisitorReq,
+    refresh: getVisitorRefresh,
+    pending: getVisitorPending,
+} = await useLazyAsyncData(
+    "get-all-visitors",
+    async () => {
+        const params: any = {
+            page: 1,
+            site: siteId,
+            limit: 100,
+            search: searchInput.value,
+            dateTo: dateTo.value ? moment(dateTo.value).endOf("day").toISOString() : undefined,
+            dateFrom: dateFrom.value ? moment(dateFrom.value).startOf("day").toISOString() : undefined,
+            type:
+                filterTypes.value.length === 0 && activeTab.value === "registered"
+                    ? "contractor,delivery,walk-in,pick-up,drop-off,guest"
+                    : filterTypes.value.filter(Boolean).join(","),
+            checkedOut: displayNotCheckedOut.value ? false : undefined,
+        };
+
+        if (activeTab.value === "guests") {
+            params.type = "guest";
+            params.status = "approved";
+        } else if (activeTab.value === "resident-transactions") {
+            params.status = "registered";
+            params.type = "resident,tenant";
+        } else if (activeTab.value === "overnight-parking") {
+            params.tab = "Overnight Parking";
+        } else {
+            params.status = activeTab.value;
+        }
+
+        return await getVisitors(params);
+    },
+    {
+        watch: [
+            searchInput,
+            dateFrom,
+            dateTo,
+            filterTypes,
+            activeTab,
+            displayNotCheckedOut,
+        ],
+        immediate: true,
+    }
+);
+
+watch(getVisitorReq, (newData: any) => {
+    if (newData) {
+        items.value = newData.items || []
+    }
+})
+
+
+function normalizeDateOnly(value: string) {
+    if (!value) return "";
+    if (/^\d{4}-\d{2}-\d{2}$/.test(value)) return value;
+
+    const parsedDate = new Date(value);
+    if (Number.isNaN(parsedDate.getTime())) return "";
+
+    const year = parsedDate.getFullYear();
+    const month = String(parsedDate.getMonth() + 1).padStart(2, "0");
+    const day = String(parsedDate.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+}
+
+
+function formatDateDDMMYYYY(date: Date | string | null) {
+    if (!date) return "";
+    const parsedDate = typeof date === "string" ? new Date(date) : date;
+    const day = String(parsedDate?.getDate()).padStart(2, '0')
+    const month = String(parsedDate?.getMonth() + 1).padStart(2, '0')
+    const year = parsedDate?.getFullYear()
+
+    return `${day}/${month}/${year}`
+}
+
+
+onMounted(() => {
+    activeTab.value = (route.query.tab as string) || "unregistered";
+    searchInput.value = (route.query.search as string) || "";
+    dateFrom.value = normalizeDateOnly((route.query.dateFrom as string) || "");
+    dateTo.value = normalizeDateOnly((route.query.dateTo as string) || "");
+    filterTypes.value = ((route.query.type as string)?.split(",") || []).filter(
+        Boolean
+    ) as TVisitorType[];
+    displayNotCheckedOut.value =
+        (route.query.checkedOut as string) == "true" || false;
+});
+
+
+</script>
+
+<style scoped>
+* {
+    box-sizing: border-box;
+}
+
+:deep(.v-card) {
+    overflow-x: auto;
+}
+
+:deep(.v-data-table-header__content) {
+    background-color: #1976d2 !important;
+    color: white !important;
+    font-weight: bold;
+}
+
+:deep(.v-data-table thead tr th) {
+    background-color: #1976d2 !important;
+    color: white !important;
+    border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
+    font-size: clamp(11px, 1.2vw, 14px) !important;
+    padding: clamp(8px, 1vw, 12px) !important;
+    word-break: break-word;
+}
+
+:deep(.v-data-table thead tr th:last-child) {
+    border-right: none !important;
+}
+
+:deep(.v-data-table tbody tr td) {
+    border-right: 1px solid #e0e0e0 !important;
+    font-size: clamp(10px, 1.1vw, 13px) !important;
+    padding: clamp(6px, 0.8vw, 10px) !important;
+    word-break: break-word;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+}
+
+:deep(.v-data-table tbody tr td:last-child) {
+    border-right: none !important;
+}
+
+:deep(.v-data-table tbody tr:last-child td) {
+    border-bottom: 1px solid #e0e0e0 !important;
+}
+
+:deep(.v-img) {
+    max-width: clamp(60px, 10vw, 100px) !important;
+    max-height: clamp(60px, 10vw, 100px) !important;
+}
+
+:deep(.text-caption) {
+    font-size: clamp(9px, 1vw, 12px) !important;
+}
+
+:deep(.text-subtitle-1) {
+    font-size: clamp(14px, 2vw, 18px) !important;
+}
+
+:deep(.text-h5) {
+    font-size: clamp(16px, 2.5vw, 24px) !important;
+}
+
+:deep(.v-icon) {
+    width: clamp(12px, 1.5vw, 20px) !important;
+    height: clamp(12px, 1.5vw, 20px) !important;
+}
+
+:deep(.gap-2) {
+    gap: clamp(4px, 0.5vw, 8px) !important;
+}
+
+/* Mobile optimization */
+@media (max-width: 768px) {
+    :deep(.v-data-table) {
+        min-width: 100%;
+    }
+
+    :deep(.v-data-table thead tr th) {
+        padding: 6px !important;
+        font-size: 11px !important;
+    }
+
+    :deep(.v-data-table tbody tr td) {
+        padding: 4px !important;
+        font-size: 10px !important;
+    }
+
+    :deep(.v-img) {
+        max-width: 60px !important;
+        max-height: 60px !important;
+    }
+}
+
+/* Tablet optimization */
+@media (max-width: 1024px) {
+    :deep(.v-data-table) {
+        font-size: 12px;
+    }
+
+    :deep(.v-data-table thead tr th) {
+        padding: 8px !important;
+    }
+
+    :deep(.v-data-table tbody tr td) {
+        padding: 6px !important;
+    }
+}
+</style>

package/package.json

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

package/pages/[org]/[site]/visitor-management/preview/index.vue

@@ -0,0 +1,21 @@
+<template>
+    <v-row no-gutters>
+        <VisitorsReportPreview :site-id="siteId" />
+    </v-row>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+    layout: "plain",
+})
+const route = useRoute();
+const { org: orgId, site: siteId } = route.params as {
+    org: string;
+    site: string;
+};
+
+</script>
+
+<style scoped>
+
+</style>