@7365admin1/layer-common 3.0.15 → 3.0.17

package/components/DashboardMain.vue

@@ -1,5 +1,207 @@
 <template>
-  <section class="unified-dashboard pb-8">
+  <div v-if="printMode" class="print-dashboard-view">
+    <!-- Header -->
+    <div class="print-header mb-6">
+      <h1 class="print-title">{{ title || dashboardTitle }}</h1>
+      <div class="print-subtitle">
+        <span>Site: {{ currentSiteName || "Selected site" }}</span>
+        <span class="ml-4">Period: {{ selectedRange }}</span>
+      </div>
+    </div>
+
+    <!-- KPI Cards (Statistics) -->
+    <div class="print-section-title">Overview Statistics</div>
+    <div class="print-kpi-grid">
+      <div
+        v-for="card in visibleKpiCards"
+        :key="card.key"
+        class="print-kpi-card"
+      >
+        <span class="print-kpi-title">{{ card.title }}</span>
+        <template
+          v-if="card.key === 'supplyAlert' && Array.isArray(card.raw?.items)"
+        >
+          <div class="d-flex flex-column ga-2 mt-2">
+            <div
+              v-for="item in card.raw.items"
+              :key="item._id || item.name"
+              class="d-flex justify-space-between text-body-2 text-blue-grey-darken-4 font-weight-medium"
+            >
+              <span>{{ item.name }}</span>
+              <span class="text-blue-grey">Balance: {{ item.qty }}</span>
+            </div>
+          </div>
+        </template>
+        <template v-else>
+          <div class="print-kpi-value">{{ card.value }}</div>
+          <div class="print-kpi-meta" v-if="card.meta || card.percentage">
+            {{ card.meta || "" }}
+            <span v-if="card.percentage"
+              >({{ card.percentage >= 0 ? "+" : ""
+              }}{{ card.percentage }}%)</span
+            >
+          </div>
+        </template>
+      </div>
+    </div>
+
+    <!-- Activity Chart (Statistics) -->
+    <div v-if="hasChartData" class="print-chart-section mt-6">
+      <div class="print-section-title">{{ activityTitle }}</div>
+      <div class="print-chart-container">
+        <svg viewBox="0 0 920 260" class="d-block w-100" style="height: 260px">
+          <line
+            v-for="tick in chartTicks"
+            :key="tick"
+            x1="48"
+            :y1="tick"
+            x2="900"
+            :y2="tick"
+            style="stroke: #e9eef2; stroke-width: 1"
+          />
+          <text
+            v-for="label in chartYLabels"
+            :key="label.text"
+            x="40"
+            :y="label.y"
+            text-anchor="end"
+            alignment-baseline="middle"
+            style="fill: #7e8b96; font-size: 11px; font-weight: 500"
+          >
+            {{ label.text }}
+          </text>
+          <path
+            :d="primaryPath"
+            style="
+              fill: none;
+              stroke: #ff9b9b;
+              stroke-width: 3;
+              stroke-linecap: round;
+              stroke-linejoin: round;
+            "
+          />
+          <path
+            :d="secondaryPath"
+            style="
+              fill: none;
+              stroke: #e53935;
+              stroke-width: 3;
+              stroke-linecap: round;
+              stroke-linejoin: round;
+            "
+          />
+          <circle
+            v-for="point in primaryDots"
+            :key="`primary-${point.x}-${point.y}`"
+            :cx="point.x"
+            :cy="point.y"
+            r="4"
+            style="fill: #ff9b9b; stroke: #fff; stroke-width: 2"
+          />
+          <circle
+            v-for="point in secondaryDots"
+            :key="`secondary-${point.x}-${point.y}`"
+            :cx="point.x"
+            :cy="point.y"
+            r="4"
+            style="fill: #e53935; stroke: #fff; stroke-width: 2"
+          />
+          <text
+            v-for="label in chartAxisLabels"
+            :key="`${label.text}-${label.x}`"
+            :x="label.x"
+            y="246"
+            text-anchor="middle"
+            style="fill: #7e8b96; font-size: 12px; font-weight: 600"
+          >
+            {{ label.text }}
+          </text>
+        </svg>
+        <div class="d-flex align-center justify-center ga-5 mt-2">
+          <span
+            class="d-inline-flex align-center ga-2 text-caption font-weight-bold text-blue-grey"
+          >
+            <span
+              class="rounded-circle"
+              style="
+                width: 12px;
+                height: 12px;
+                display: inline-block;
+                background-color: #ff9b9b;
+              "
+            />
+            {{ primaryLegendLabel }}
+          </span>
+          <span
+            class="d-inline-flex align-center ga-2 text-caption font-weight-bold text-blue-grey"
+          >
+            <span
+              class="rounded-circle"
+              style="
+                width: 12px;
+                height: 12px;
+                display: inline-block;
+                background-color: #e53935;
+              "
+            />
+            {{ secondaryLegendLabel }}
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Tables for List Widgets (Other data) -->
+    <div
+      v-for="section in printTableSections"
+      :key="section.key"
+      class="print-table-section mt-6"
+    >
+      <div class="print-section-title">{{ section.title }}</div>
+      <table class="print-table">
+        <thead>
+          <tr>
+            <th
+              v-for="column in section.columns"
+              :key="column.key"
+              :style="{ width: column.width }"
+            >
+              {{ column.label }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="row in section.rows" :key="row.id">
+            <td
+              v-for="column in section.columns"
+              :key="`${row.id}-${column.key}`"
+            >
+              <template v-if="column.status">
+                <span
+                  :class="[
+                    'print-status-badge',
+                    `badge-${getStatusTone(row[column.key])}`,
+                  ]"
+                >
+                  {{ row[column.key] ?? column.fallback ?? "-" }}
+                </span>
+              </template>
+              <strong v-else-if="column.strong">{{
+                row[column.key] ?? "-"
+              }}</strong>
+              <template v-else>{{ row[column.key] ?? "-" }}</template>
+            </td>
+          </tr>
+          <tr v-if="!section.rows.length">
+            <td :colspan="section.columns.length" class="print-empty-cell">
+              No data available
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+
+  <section v-else class="unified-dashboard pb-8">
     <!-- ── Header ──────────────────────────────────────────────────────────── -->
     <div
       class="d-flex flex-column flex-md-row align-md-start justify-space-between ga-5 mb-6"
@@ -36,14 +238,16 @@
               color="blue-grey-darken-1"
               class="text-none font-weight-bold"
               append-icon="mdi-chevron-down"
+              :loading="isExporting"
+              :disabled="isExporting"
             >
               Export
             </v-btn>
           </template>
 
           <v-list density="compact" border rounded="lg" elevation="3">
-            <v-list-item title="PDF" @click="notifyExport('PDF')" />
-            <v-list-item title="Word" @click="notifyExport('Word')" />
+            <v-list-item title="PDF" @click="exportDashboard('PDF')" />
+            <v-list-item title="Word" @click="exportDashboard('Word')" />
           </v-list>
         </v-menu>
 
@@ -771,9 +975,12 @@
             </button>
           </div>
           <div class="figma-panel-body">
-            <div v-if="activePatrolItems.length" class="figma-list mt-2">
+            <div
+              v-if="formattedActivePatrolItems.length"
+              class="figma-list mt-2"
+            >
               <div
-                v-for="item in activePatrolItems"
+                v-for="item in formattedActivePatrolItems"
                 :key="item.id || item._id"
                 class="d-flex align-center justify-space-between"
                 style="
@@ -1117,7 +1324,11 @@
       </v-card>
     </v-dialog>
 
-    <v-snackbar v-model="snackbar.visible" :timeout="2200" color="primary">
+    <v-snackbar
+      v-model="snackbar.visible"
+      :timeout="2200"
+      :color="snackbar.color || 'primary'"
+    >
       {{ snackbar.text }}
     </v-snackbar>
   </section>
@@ -1186,6 +1397,22 @@ type FeedbackItem = {
   raw?: Record<string, any>;
 };
 
+type PrintTableColumn = {
+  key: string;
+  label: string;
+  width: string;
+  strong?: boolean;
+  status?: boolean;
+  fallback?: string;
+};
+
+type PrintTableSection = {
+  key: string;
+  title: string;
+  columns: PrintTableColumn[];
+  rows: Array<Record<string, any>>;
+};
+
 // ─── Props ────────────────────────────────────────────────────────────────────
 
 const props = defineProps({
@@ -1209,6 +1436,20 @@ const props = defineProps({
   title: { type: String, default: "" },
   extraWidgetKeys: { type: Array as () => string[], default: () => [] },
   showHeaderActions: { type: Boolean, default: true },
+  appKey: {
+    type: String as () =>
+      | "PROPERTY"
+      | "SECURITY"
+      | "HYGIENE"
+      | "MECHANICAL_ELECTRICAL"
+      | "PEST_CONTROL"
+      | "LANDSCAPING"
+      | "POOL_MAINTENANCE",
+    default: "",
+  },
+  orgSlug: { type: String, default: "" },
+  siteSlug: { type: String, default: "" },
+  printMode: { type: Boolean, default: false },
 });
 
 const emit = defineEmits<{
@@ -1239,6 +1480,8 @@ const {
 const { userAppRole } = useLocalSetup();
 const { hasPermission } = usePermission();
 const { dashboardPermissions } = useCommonPermissions();
+const { downloadPDF } = usePDFDownload();
+const route = useRoute();
 
 function canViewWidget(key: string) {
   if (!userAppRole.value) return true;
@@ -1309,13 +1552,24 @@ const router = useRouter();
 const runtimeConfig = useRuntimeConfig();
 const customizeDialog = ref(false);
 const widgetSearch = ref("");
-const selectedRange = ref("Today");
+const periodLabelValue: Record<TDashboardValues, string> = {
+  today: "Today",
+  thisWeek: "This Week",
+  thisMonth: "This Month",
+};
+const initialPeriod = (
+  ["today", "thisWeek", "thisMonth"].includes(String(route.query.period))
+    ? route.query.period
+    : "today"
+) as TDashboardValues;
+const selectedRange = ref(periodLabelValue[initialPeriod]);
 const visitorType = ref("All");
 const facilityType = ref("All");
 const visibleWidgetKeys = ref<string[]>([]);
 const draftVisibleWidgetKeys = ref<string[]>([]);
 const filterMenus = reactive<Record<string, boolean>>({});
-const snackbar = reactive({ visible: false, text: "" });
+const snackbar = reactive({ visible: false, text: "", color: "" });
+const isExporting = ref(false);
 const chartContainerRef = ref<HTMLElement | null>(null);
 const chartWidth = ref(920);
 let resizeObserver: ResizeObserver | null = null;
@@ -1325,7 +1579,7 @@ const periodValue: Record<string, TDashboardValues> = {
   "This Week": "thisWeek",
   "This Month": "thisMonth",
 };
-const currentPeriod = ref<TDashboardValues>("today");
+const currentPeriod = ref<TDashboardValues>(initialPeriod);
 
 const rangeOptions = [
   { label: "Today", value: "Today" },
@@ -2357,10 +2611,166 @@ const workOrderStatus = computed(() => {
 const activePatrolItems = computed<any[]>(
   () => finalDashboardData.value?.activePatrolItems ?? []
 );
+
+const formattedActivePatrolItems = computed<any[]>(() => {
+  return activePatrolItems.value.map((item) => {
+    let status = item.status;
+    if (Array.isArray(status)) {
+      status = status.join(", ");
+    }
+    let person = item.person || item.assignedTo || "Unassigned";
+    if (Array.isArray(person)) {
+      person = person.join(", ");
+    }
+    return {
+      ...item,
+      status,
+      person,
+    };
+  });
+});
 const securityStaffItems = computed<any[]>(
   () => attendanceReq.value?.items ?? []
 );
 
+const printTableSections = computed<PrintTableSection[]>(() => {
+  const sections: PrintTableSection[] = [];
+
+  if (isHygieneMode.value) {
+    sections.push(
+      {
+        key: "taskSchedule",
+        title: primaryListConfig.value.title,
+        columns: [
+          { key: "title", label: "Task Title", width: "25%", strong: true },
+          { key: "subtitle", label: "Description / Subtitle", width: "30%" },
+          { key: "person", label: "Assigned Staff", width: "20%" },
+          { key: "time", label: "Time", width: "15%" },
+          { key: "status", label: "Status", width: "10%", status: true },
+        ],
+        rows: taskScheduleItems.value,
+      },
+      {
+        key: "staffAttendance",
+        title: "Staff's Total Attendance",
+        columns: [
+          { key: "name", label: "Staff Name", width: "40%", strong: true },
+          { key: "role", label: "Role", width: "40%" },
+          { key: "totalHoursLabel", label: "Total Hours", width: "20%" },
+        ],
+        rows: staffStatusItems.value.map((item) => ({
+          ...item,
+          totalHoursLabel: `${item.totalHours || 0} hrs`,
+        })),
+      }
+    );
+  }
+
+  if (isPropertyMode.value) {
+    sections.push(
+      {
+        key: "upcomingEvents",
+        title: "Upcoming Events",
+        columns: [
+          { key: "title", label: "Event Title", width: "40%", strong: true },
+          { key: "subtitle", label: "Description / Subtitle", width: "60%" },
+        ],
+        rows: upcomingEvents.value,
+      },
+      {
+        key: "todayReminders",
+        title: "Today's Reminder",
+        columns: [
+          { key: "title", label: "Reminder", width: "40%", strong: true },
+          { key: "subtitle", label: "Details / Subtitle", width: "60%" },
+        ],
+        rows: todayReminders.value,
+      },
+      {
+        key: "todayAttentions",
+        title: "Today's Attentions",
+        columns: [
+          { key: "title", label: "Attention", width: "40%", strong: true },
+          { key: "subtitle", label: "Details / Subtitle", width: "60%" },
+        ],
+        rows: todayAttentions.value,
+      },
+      {
+        key: "workOrderStatus",
+        title: "Work Order Status",
+        columns: [
+          { key: "label", label: "Status", width: "50%", strong: true },
+          { key: "value", label: "Count / Value", width: "50%" },
+        ],
+        rows: workOrderStatus.value,
+      }
+    );
+  }
+
+  if (isSecurityMode.value) {
+    sections.push(
+      {
+        key: "activePatrol",
+        title: "Active Patrol",
+        columns: [
+          { key: "title", label: "Patrol Route", width: "30%", strong: true },
+          { key: "subtitle", label: "Location", width: "30%" },
+          { key: "person", label: "Assigned Officer", width: "25%" },
+          { key: "status", label: "Status", width: "15%", status: true },
+        ],
+        rows: activePatrolItems.value.map((item, index) => ({
+          id: item.id || item._id || `active-patrol-${index}`,
+          title: item.title || item.name || "Patrol",
+          subtitle: item.subtitle || item.location || "",
+          person: item.person || item.assignedTo || "Unassigned",
+          status: item.status || "To-Do",
+        })),
+      },
+      {
+        key: "staffStatus",
+        title: "Staff Status",
+        columns: [
+          { key: "name", label: "Officer Name", width: "40%", strong: true },
+          { key: "role", label: "Role / Designation", width: "40%" },
+          {
+            key: "status",
+            label: "Status",
+            width: "20%",
+            status: true,
+            fallback: "On duty",
+          },
+        ],
+        rows: securityStaffItems.value.map((item, index) => ({
+          id: item.id || item._id || `security-staff-${index}`,
+          name: item.userName || item.personName || "Unassigned",
+          role: item.role || item.designation || "Officer",
+          status: item.status || "On duty",
+        })),
+      }
+    );
+  }
+
+  sections.push({
+    key: "feedbacks",
+    title: "Feedbacks",
+    columns: [
+      { key: "title", label: "Title", width: "30%", strong: true },
+      { key: "subtitle", label: "Description / Category", width: "30%" },
+      { key: "person", label: "Reporter / Person", width: "25%" },
+      {
+        key: "status",
+        label: "Status",
+        width: "15%",
+        status: true,
+        fallback: "To-Do",
+      },
+    ],
+    rows: feedbackItems.value,
+  });
+
+  return sections;
+});
+
 // ─── ResizeObserver ───────────────────────────────────────────────────────────
 
 watch(chartContainerRef, (el) => {
@@ -2907,7 +3317,8 @@ function getSchedulePath() {
   if (service === "landscaping_services") return "landscape-schedule";
   if (service === "pest_control_services") return "pest-schedule";
   if (service === "pool_maintenance_services") return "pool-schedule";
-  if (service === "mechanical_electrical_services") return "technician-schedule";
+  if (service === "mechanical_electrical_services")
+    return "technician-schedule";
   return "schedule-task";
 }
 
@@ -2981,9 +3392,332 @@ function submitCustomize() {
   customizeDialog.value = false;
 }
 
-function notifyExport(format: string) {
-  snackbar.text = `${format} export is being prepared.`;
+// ─── Dashboard Export ─────────────────────────────────────────────────────────
+
+const appKeyMap: Record<
+  string,
+  | "PROPERTY"
+  | "SECURITY"
+  | "HYGIENE"
+  | "MECHANICAL_ELECTRICAL"
+  | "PEST_CONTROL"
+  | "LANDSCAPING"
+  | "POOL_MAINTENANCE"
+> = {
+  property_management_agency: "PROPERTY",
+  security_agency: "SECURITY",
+  cleaning_services: "HYGIENE",
+  mechanical_electrical_services: "MECHANICAL_ELECTRICAL",
+  landscaping_services: "LANDSCAPING",
+  pest_control_services: "PEST_CONTROL",
+  pool_maintenance_services: "POOL_MAINTENANCE",
+};
+
+async function exportDashboard(format: "PDF" | "Word") {
+  if (isExporting.value) return;
+  isExporting.value = true;
+
+  snackbar.text = `Generating ${format} report, please wait...`;
+  snackbar.color = "info";
   snackbar.visible = true;
+
+  const periodLabel =
+    selectedRange.value === "Today"
+      ? "Today"
+      : selectedRange.value === "This Week"
+      ? "This Week"
+      : "This Month";
+
+  const reportTitle = `${props.title || dashboardTitle.value} - ${periodLabel}`;
+
+  try {
+    if (format === "PDF") {
+      const org = props.orgSlug || props.orgId || "";
+      const site = props.siteSlug || props.site || "";
+      const printUrl = `/${org}/${site}/print-dashboard?period=${currentPeriod.value}`;
+
+      const targetAppKey =
+        props.appKey || appKeyMap[props.serviceType] || "PROPERTY";
+
+      await downloadPDF({
+        url: printUrl,
+        title: reportTitle,
+        orientation: "L",
+        appKey: targetAppKey,
+      });
+
+      snackbar.text = "PDF exported successfully.";
+      snackbar.color = "success";
+      snackbar.visible = true;
+    } else {
+      const org = props.orgSlug || props.orgId || "";
+      const site = props.siteSlug || props.site || "";
+      const siteName = props.currentSiteName || "Selected Site";
+
+      let wordHtml = `
+<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'>
+<head>
+  <meta charset="utf-8">
+  <title>${reportTitle}</title>
+  <style>
+    body { font-family: 'Segoe UI', Arial, sans-serif; color: #1e293b; line-height: 1.5; padding: 20px; }
+    h1 { color: #0b2f47; font-size: 20pt; margin-bottom: 5px; font-weight: bold; }
+    .subtitle { color: #64748b; font-size: 11pt; margin-bottom: 25px; border-bottom: 1px solid #e2e8f0; padding-bottom: 15px; }
+    .section-title { color: #0b2f47; font-size: 14pt; font-weight: bold; margin-top: 25px; margin-bottom: 12px; border-bottom: 2px solid #0b2f47; padding-bottom: 3px; }
+    
+    .kpi-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
+    .kpi-table td { border: 1px solid #cbd5e1; padding: 12px; vertical-align: top; width: 25%; background-color: #f8fafc; }
+    .kpi-title { font-size: 8.5pt; text-transform: uppercase; color: #64748b; font-weight: bold; margin-bottom: 6px; }
+    .kpi-value { font-size: 16pt; font-weight: bold; color: #0b2f47; }
+    .kpi-meta { font-size: 8.5pt; color: #64748b; margin-top: 4px; }
+
+    .data-table { width: 100%; border-collapse: collapse; margin-bottom: 25px; }
+    .data-table th { background-color: #0b2f47; color: #ffffff; padding: 10px; font-size: 9.5pt; font-weight: bold; text-align: left; border: 1px solid #0b2f47; }
+    .data-table td { padding: 10px; font-size: 9.5pt; border: 1px solid #cbd5e1; text-align: left; vertical-align: top; }
+    .data-table tr:nth-child(even) { background-color: #f8fafc; }
+    
+    .status-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 8.5pt; font-weight: bold; }
+    .badge-success { background-color: #d1fae5; color: #065f46; }
+    .badge-info { background-color: #e0f2fe; color: #075985; }
+    .badge-danger, .badge-error { background-color: #fee2e2; color: #991b1b; }
+    .badge-warning { background-color: #fef3c7; color: #92400e; }
+    .badge-neutral { background-color: #f1f5f9; color: #475569; }
+  </style>
+</head>
+<body>
+  <h1>${props.title || dashboardTitle.value}</h1>
+  <div class="subtitle">Site: ${siteName} | Period: ${periodLabel}</div>
+      `;
+
+      if (visibleKpiCards.value && visibleKpiCards.value.length > 0) {
+        wordHtml += `<div class="section-title">Overview Statistics</div>`;
+        wordHtml += `<table class="kpi-table"><tr>`;
+        visibleKpiCards.value.forEach((card, index) => {
+          if (index > 0 && index % 4 === 0) {
+            wordHtml += `</tr><tr>`;
+          }
+          let kpiValueHtml = `<div class="kpi-value">${card.value}</div>`;
+          if (card.key === "supplyAlert" && Array.isArray(card.raw?.items)) {
+            kpiValueHtml = '<div style="font-size: 9pt; margin-top: 4px;">';
+            card.raw.items.forEach((item: any) => {
+              kpiValueHtml += `<div><strong>${item.name}</strong>: Balance ${item.qty}</div>`;
+            });
+            kpiValueHtml += "</div>";
+          }
+          wordHtml += `
+            <td>
+              <div class="kpi-title">${card.title}</div>
+              ${kpiValueHtml}
+              <div class="kpi-meta">${card.meta || ""} ${
+            card.percentage
+              ? `(${card.percentage >= 0 ? "+" : ""}${card.percentage}%)`
+              : ""
+          }</div>
+            </td>
+          `;
+        });
+        const remaining = 4 - (visibleKpiCards.value.length % 4);
+        if (remaining < 4) {
+          for (let i = 0; i < remaining; i++) {
+            wordHtml += `<td></td>`;
+          }
+        }
+        wordHtml += `</tr></table>`;
+      }
+
+      if (hasChartData.value) {
+        wordHtml += `<div class="section-title">${activityTitle.value}</div>`;
+        wordHtml += `<table class="data-table">`;
+        wordHtml += `<thead><tr><th>Period / Day</th><th>${primaryLegendLabel.value}</th><th>${secondaryLegendLabel.value}</th></tr></thead><tbody>`;
+
+        const labels = chartAxisLabels.value || [];
+        const workOrders =
+          finalDashboardData.value.activityChart?.workOrders || [];
+        const taskCompleted =
+          finalDashboardData.value.activityChart?.taskCompleted || [];
+
+        labels.forEach((labelObj, idx) => {
+          const lbl = labelObj.text;
+          const woVal = workOrders[idx] !== undefined ? workOrders[idx] : 0;
+          const tcVal =
+            taskCompleted[idx] !== undefined ? taskCompleted[idx] : 0;
+          wordHtml += `<tr><td><strong>${lbl}</strong></td><td>${woVal}</td><td>${tcVal}</td></tr>`;
+        });
+        wordHtml += `</tbody></table>`;
+      }
+
+      if (isHygieneMode.value) {
+        if (taskScheduleItems.value.length > 0) {
+          wordHtml += `<div class="section-title">${primaryListConfig.value.title}</div>`;
+          wordHtml += `<table class="data-table">`;
+          wordHtml += `<thead><tr><th>Task Title</th><th>Description / Subtitle</th><th>Assigned Staff</th><th>Time</th><th>Status</th></tr></thead><tbody>`;
+          taskScheduleItems.value.forEach((item) => {
+            wordHtml += `<tr>
+              <td><strong>${item.title}</strong></td>
+              <td>${item.subtitle || ""}</td>
+              <td>${item.person || ""}</td>
+              <td>${item.time || ""}</td>
+              <td><span class="status-badge badge-${getStatusTone(
+                item.status
+              )}">${item.status || ""}</span></td>
+            </tr>`;
+          });
+          wordHtml += `</tbody></table>`;
+        }
+
+        if (staffStatusItems.value.length > 0) {
+          wordHtml += `<div class="section-title">Staff's Total Attendance</div>`;
+          wordHtml += `<table class="data-table">`;
+          wordHtml += `<thead><tr><th>Staff Name</th><th>Role</th><th>Total Hours</th></tr></thead><tbody>`;
+          staffStatusItems.value.forEach((item) => {
+            wordHtml += `<tr>
+              <td><strong>${item.name}</strong></td>
+              <td>${item.role || ""}</td>
+              <td>${item.totalHours || 0} hrs</td>
+            </tr>`;
+          });
+          wordHtml += `</tbody></table>`;
+        }
+      }
+
+      if (isPropertyMode.value) {
+        if (upcomingEvents.value.length > 0) {
+          wordHtml += `<div class="section-title">Upcoming Events</div>`;
+          wordHtml += `<table class="data-table">`;
+          wordHtml += `<thead><tr><th>Event Title</th><th>Description / Subtitle</th></tr></thead><tbody>`;
+          upcomingEvents.value.forEach((item) => {
+            wordHtml += `<tr>
+              <td><strong>${item.title}</strong></td>
+              <td>${item.subtitle || ""}</td>
+            </tr>`;
+          });
+          wordHtml += `</tbody></table>`;
+        }
+
+        if (todayReminders.value.length > 0) {
+          wordHtml += `<div class="section-title">Today's Reminder</div>`;
+          wordHtml += `<table class="data-table">`;
+          wordHtml += `<thead><tr><th>Reminder</th><th>Details / Subtitle</th></tr></thead><tbody>`;
+          todayReminders.value.forEach((item) => {
+            wordHtml += `<tr>
+              <td><strong>${item.title}</strong></td>
+              <td>${item.subtitle || ""}</td>
+            </tr>`;
+          });
+          wordHtml += `</tbody></table>`;
+        }
+
+        if (todayAttentions.value.length > 0) {
+          wordHtml += `<div class="section-title">Today's Attentions</div>`;
+          wordHtml += `<table class="data-table">`;
+          wordHtml += `<thead><tr><th>Attention</th><th>Details / Subtitle</th></tr></thead><tbody>`;
+          todayAttentions.value.forEach((item) => {
+            wordHtml += `<tr>
+              <td><strong>${item.title}</strong></td>
+              <td>${item.subtitle || ""}</td>
+            </tr>`;
+          });
+          wordHtml += `</tbody></table>`;
+        }
+
+        if (workOrderStatus.value.length > 0) {
+          wordHtml += `<div class="section-title">Work Order Status</div>`;
+          wordHtml += `<table class="data-table">`;
+          wordHtml += `<thead><tr><th>Status</th><th>Count / Value</th></tr></thead><tbody>`;
+          workOrderStatus.value.forEach((item) => {
+            wordHtml += `<tr>
+              <td><strong>${item.label}</strong></td>
+              <td>${item.value || 0}</td>
+            </tr>`;
+          });
+          wordHtml += `</tbody></table>`;
+        }
+      }
+
+      if (isSecurityMode.value) {
+        if (activePatrolItems.value.length > 0) {
+          wordHtml += `<div class="section-title">Active Patrol</div>`;
+          wordHtml += `<table class="data-table">`;
+          wordHtml += `<thead><tr><th>Patrol Route</th><th>Location</th><th>Assigned Officer</th><th>Status</th></tr></thead><tbody>`;
+          activePatrolItems.value.forEach((item) => {
+            wordHtml += `<tr>
+              <td><strong>${item.title || item.name}</strong></td>
+              <td>${item.subtitle || item.location || ""}</td>
+              <td>${item.person || item.assignedTo || ""}</td>
+              <td><span class="status-badge badge-${getStatusTone(
+                item.status
+              )}">${item.status || ""}</span></td>
+            </tr>`;
+          });
+          wordHtml += `</tbody></table>`;
+        }
+
+        if (securityStaffItems.value.length > 0) {
+          wordHtml += `<div class="section-title">Staff Status</div>`;
+          wordHtml += `<table class="data-table">`;
+          wordHtml += `<thead><tr><th>Officer Name</th><th>Role / Designation</th><th>Status</th></tr></thead><tbody>`;
+          securityStaffItems.value.forEach((item) => {
+            wordHtml += `<tr>
+              <td><strong>${
+                item.userName || item.personName || "Unassigned"
+              }</strong></td>
+              <td>${item.role || item.designation || "Officer"}</td>
+              <td><span class="status-badge badge-${getStatusTone(
+                item.status
+              )}">${item.status || "On duty"}</span></td>
+            </tr>`;
+          });
+          wordHtml += `</tbody></table>`;
+        }
+      }
+
+      if (feedbackItems.value.length > 0) {
+        wordHtml += `<div class="section-title">Feedbacks</div>`;
+        wordHtml += `<table class="data-table">`;
+        wordHtml += `<thead><tr><th>Title</th><th>Description / Category</th><th>Reporter / Person</th><th>Status</th></tr></thead><tbody>`;
+        feedbackItems.value.forEach((item) => {
+          wordHtml += `<tr>
+            <td><strong>${item.title}</strong></td>
+            <td>${item.subtitle || ""}</td>
+            <td>${item.person || ""}</td>
+            <td><span class="status-badge badge-${getStatusTone(
+              item.status
+            )}">${item.status || "To-Do"}</span></td>
+          </tr>`;
+        });
+        wordHtml += `</tbody></table>`;
+      }
+
+      wordHtml += `
+</body>
+</html>
+      `;
+
+      const blob = new Blob([wordHtml], {
+        type: "application/msword;charset=utf-8",
+      });
+      const downloadUrl = window.URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = downloadUrl;
+      a.download = `${reportTitle}.doc`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      window.URL.revokeObjectURL(downloadUrl);
+
+      snackbar.text = "Word export downloaded successfully.";
+      snackbar.color = "success";
+      snackbar.visible = true;
+    }
+  } catch (err: any) {
+    snackbar.text = `Export failed: ${
+      err?.message || "Unknown error"
+    }. Please try again.`;
+    snackbar.color = "error";
+    snackbar.visible = true;
+  } finally {
+    isExporting.value = false;
+  }
 }
 
 // ─── Card Color Helpers ───────────────────────────────────────────────────────
@@ -3140,6 +3874,164 @@ function formatDashboardTime(value?: string) {
 </script>
 
 <style scoped>
+/* Print Dashboard View Styles */
+.print-dashboard-view {
+  background-color: #ffffff;
+  color: #1e293b;
+  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  width: 100%;
+}
+
+.print-header {
+  border-bottom: 2px solid #e2e8f0;
+  padding-bottom: 16px;
+  margin-bottom: 24px;
+}
+
+.print-title {
+  color: #0b2f47;
+  font-size: 24px;
+  font-weight: 800;
+  margin: 0;
+}
+
+.print-subtitle {
+  color: #64748b;
+  font-size: 14px;
+  margin-top: 6px;
+  display: flex;
+  gap: 16px;
+}
+
+.print-section-title {
+  color: #0b2f47;
+  font-size: 16px;
+  font-weight: 700;
+  margin-top: 28px;
+  margin-bottom: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  border-left: 4px solid #0b2f47;
+  padding-left: 10px;
+}
+
+.print-kpi-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.print-kpi-card {
+  background-color: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 16px;
+  min-height: 100px;
+}
+
+.print-kpi-title {
+  color: #64748b;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  margin-bottom: 8px;
+  display: block;
+}
+
+.print-kpi-value {
+  color: #0b2f47;
+  font-size: 24px;
+  font-weight: 800;
+  line-height: 1.2;
+}
+
+.print-kpi-meta {
+  color: #64748b;
+  font-size: 11px;
+  margin-top: 6px;
+}
+
+.print-chart-container {
+  background-color: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 24px;
+}
+
+.print-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 24px;
+}
+
+.print-table th {
+  background-color: #0b2f47;
+  color: #ffffff;
+  -webkit-print-color-adjust: exact;
+  print-color-adjust: exact;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: left;
+  padding: 10px 12px;
+  border: 1px solid #0b2f47;
+}
+
+.print-table td {
+  font-size: 12px;
+  padding: 10px 12px;
+  border: 1px solid #e2e8f0;
+  color: #334155;
+  vertical-align: top;
+}
+
+.print-table .print-empty-cell {
+  color: #64748b;
+  font-weight: 600;
+  text-align: center;
+}
+
+.print-table tr:nth-child(even) td {
+  background-color: #f8fafc;
+}
+
+.print-status-badge {
+  display: inline-block;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 4px;
+  text-transform: capitalize;
+}
+
+.badge-success {
+  background-color: #d1fae5;
+  color: #065f46;
+}
+
+.badge-info {
+  background-color: #e0f2fe;
+  color: #075985;
+}
+
+.badge-danger,
+.badge-error {
+  background-color: #fee2e2;
+  color: #991b1b;
+}
+
+.badge-warning {
+  background-color: #fef3c7;
+  color: #92400e;
+}
+
+.badge-neutral {
+  background-color: #f1f5f9;
+  color: #475569;
+}
+
 .dashboard-card {
   background: #fff;
   border: 1px solid #d9e0e7;