@7365admin1/layer-common 3.0.20 → 3.0.22

package/components/DashboardMain.vue

@@ -12,21 +12,12 @@
     <!-- 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"
-      >
+      <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)"
-        >
+        <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"
-            >
+            <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>
@@ -36,10 +27,8 @@
           <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
-            >
+            <span v-if="card.percentage">({{ card.percentage >= 0 ? "+" : ""
+            }}{{ card.percentage }}%)</span>
           </div>
         </template>
       </div>
@@ -50,100 +39,52 @@
       <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"
-          >
+          <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="
+          <path :d="primaryPath" style="
               fill: none;
               stroke: #ff9b9b;
               stroke-width: 3;
               stroke-linecap: round;
               stroke-linejoin: round;
-            "
-          />
-          <path
-            :d="secondaryPath"
-            style="
+            " />
+          <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"
-          >
+            " />
+          <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="
+          <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="
+          <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>
@@ -151,43 +92,30 @@
     </div>
 
     <!-- Tables for List Widgets (Other data) -->
-    <div
-      v-for="section in printTableSections"
-      :key="section.key"
-      class="print-table-section mt-6"
-    >
+    <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 }"
-            >
+            <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}`"
-            >
+            <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])}`,
-                  ]"
-                >
+                <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>
+                }}</strong>
               <template v-else>{{ row[column.key] ?? "-" }}</template>
             </td>
           </tr>
@@ -203,9 +131,7 @@
 
   <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"
-    >
+    <div class="d-flex flex-column flex-md-row align-md-start justify-space-between ga-5 mb-6">
       <div>
         <h1 class="text-h5 font-weight-black text-blue-grey-darken-4 mb-0">
           {{ dashboardTitle }}
@@ -216,31 +142,16 @@
         </div>
       </div>
 
-      <div
-        v-if="showHeaderActions"
-        class="d-flex flex-wrap align-center justify-md-end ga-3"
-      >
-        <v-btn
-          variant="outlined"
-          color="blue-grey-darken-1"
-          class="text-none font-weight-bold"
-          prepend-icon="mdi-tune-variant"
-          @click="openCustomizeDialog"
-        >
+      <div v-if="showHeaderActions" class="d-flex flex-wrap align-center justify-md-end ga-3">
+        <v-btn variant="outlined" color="blue-grey-darken-1" class="text-none font-weight-bold"
+          prepend-icon="mdi-tune-variant" @click="openCustomizeDialog">
           Customize Dashboard
         </v-btn>
 
         <v-menu>
           <template #activator="{ props: menuProps }">
-            <v-btn
-              v-bind="menuProps"
-              variant="outlined"
-              color="blue-grey-darken-1"
-              class="text-none font-weight-bold"
-              append-icon="mdi-chevron-down"
-              :loading="isExporting"
-              :disabled="isExporting"
-            >
+            <v-btn v-bind="menuProps" variant="outlined" color="blue-grey-darken-1" class="text-none font-weight-bold"
+              append-icon="mdi-chevron-down" :loading="isExporting" :disabled="isExporting">
               Export
             </v-btn>
           </template>
@@ -251,101 +162,49 @@
           </v-list>
         </v-menu>
 
-        <v-btn-toggle
-          v-model="selectedRange"
-          mandatory
-          density="comfortable"
-          divided
-          variant="outlined"
-          class="bg-white"
-          style="border-radius: 8px; border-color: #d9e1e8"
-        >
-          <v-btn
-            v-for="range in rangeOptions"
-            :key="range.value"
-            :value="range.value"
-            class="text-none"
-            size="small"
-            :style="
-              selectedRange === range.value
+        <v-btn-toggle v-model="selectedRange" mandatory density="comfortable" divided variant="outlined"
+          class="bg-white" style="border-radius: 8px; border-color: #d9e1e8">
+          <v-btn v-for="range in rangeOptions" :key="range.value" :value="range.value" class="text-none" size="small"
+            :style="selectedRange === range.value
                 ? {
-                    backgroundColor: '#e2e8f0',
-                    color: '#0b2f47',
-                    fontWeight: '600',
-                  }
+                  backgroundColor: '#e2e8f0',
+                  color: '#0b2f47',
+                  fontWeight: '600',
+                }
                 : { backgroundColor: 'transparent', color: '#64748b' }
-            "
-          >
+              ">
             {{ range.label }}
           </v-btn>
         </v-btn-toggle>
       </div>
     </div>
 
-    <v-progress-linear
-      v-if="finalLoading"
-      indeterminate
-      color="primary"
-      class="mb-4"
-    />
+    <v-progress-linear v-if="finalLoading" indeterminate color="primary" class="mb-4" />
 
     <!-- ── KPI Cards ───────────────────────────────────────────────────────── -->
     <v-row dense class="mb-1 align-stretch">
-      <v-col
-        v-for="card in visibleKpiCards"
-        :key="card.key"
-        cols="12"
-        sm="6"
-        md="4"
-        lg="3"
-        class="d-flex"
-      >
-        <v-card
-          flat
-          border
-          rounded="lg"
-          class="pa-4 flex-grow-1"
-          style="min-height: 158px"
-        >
+      <v-col v-for="card in visibleKpiCards" :key="card.key" cols="12" sm="6" md="4" lg="3" class="d-flex">
+        <v-card flat border rounded="lg" class="pa-4 flex-grow-1" style="min-height: 158px">
           <div class="d-flex align-start justify-space-between">
-            <div
-              class="d-inline-flex align-center justify-center rounded-lg"
-              style="height: 28px; width: 28px; flex-shrink: 0"
-              :style="{ backgroundColor: card.tint }"
-            >
+            <div class="d-inline-flex align-center justify-center rounded-lg"
+              style="height: 28px; width: 28px; flex-shrink: 0" :style="{ backgroundColor: card.tint }">
               <v-icon :icon="card.icon" :color="card.color" size="15" />
             </div>
 
             <v-menu v-if="card.filter" v-model="filterMenus[card.key]">
               <template #activator="{ props: menuProps }">
-                <v-btn
-                  v-bind="menuProps"
-                  variant="outlined"
-                  density="compact"
-                  class="text-none text-caption px-2"
-                  append-icon="mdi-chevron-down"
-                  height="26"
-                  rounded="pill"
-                >
+                <v-btn v-bind="menuProps" variant="outlined" density="compact" class="text-none text-caption px-2"
+                  append-icon="mdi-chevron-down" height="26" rounded="pill">
                   {{ card.filter.model }}
                 </v-btn>
               </template>
 
               <v-list density="compact" border rounded="lg" elevation="3">
-                <v-list-item
-                  v-for="option in card.filter.options"
-                  :key="option"
-                  :active="card.filter.model === option"
-                  :title="option"
-                  @click="card.filter.set(option)"
-                >
+                <v-list-item v-for="option in card.filter.options" :key="option" :active="card.filter.model === option"
+                  :title="option" @click="card.filter.set(option)">
                   <template #prepend>
-                    <v-icon
-                      :icon="
-                        card.filter.model === option ? 'mdi-check' : 'mdi-blank'
-                      "
-                      size="16"
-                    />
+                    <v-icon :icon="card.filter.model === option ? 'mdi-check' : 'mdi-blank'
+                      " size="16" />
                   </template>
                 </v-list-item>
               </v-list>
@@ -353,22 +212,15 @@
           </div>
 
           <div class="mt-6 w-100">
-            <p
-              class="text-caption font-weight-black text-uppercase text-blue-grey-darken-2 mb-3"
-            >
+            <p class="text-caption font-weight-black text-uppercase text-blue-grey-darken-2 mb-3">
               {{ card.title }}
             </p>
-            <template
-              v-if="
-                card.key === 'supplyAlert' && Array.isArray(card.raw?.items)
-              "
-            >
+            <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"
-                >
+                <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>
@@ -383,22 +235,13 @@
               <div class="d-flex align-center flex-wrap ga-2">
                 <span v-if="card.meta" class="text-caption text-blue-grey">{{
                   card.meta
-                }}</span>
-                <v-chip
-                  :color="card.percentage >= 0 ? 'success' : 'error'"
-                  size="x-small"
-                  variant="flat"
-                  class="font-weight-bold"
-                >
-                  <v-icon
-                    :icon="
-                      card.percentage >= 0
-                        ? 'mdi-arrow-up-right'
-                        : 'mdi-arrow-down-right'
-                    "
-                    size="13"
-                    start
-                  />
+                  }}</span>
+                <v-chip :color="card.percentage >= 0 ? 'success' : 'error'" size="x-small" variant="flat"
+                  class="font-weight-bold">
+                  <v-icon :icon="card.percentage >= 0
+                      ? 'mdi-arrow-up-right'
+                      : 'mdi-arrow-down-right'
+                    " size="13" start />
                   {{ Math.abs(card.percentage) }}%
                 </v-chip>
               </div>
@@ -409,13 +252,7 @@
     </v-row>
 
     <!-- ── Activity Chart (all modes) ────────────────────────────────────── -->
-    <v-card
-      v-if="isWidgetVisible('activity')"
-      flat
-      border
-      rounded="lg"
-      class="px-5 pt-4 pb-3 mt-3"
-    >
+    <v-card v-if="isWidgetVisible('activity')" flat border rounded="lg" class="px-5 pt-4 pb-3 mt-3">
       <div class="d-flex align-center justify-space-between">
         <h2 class="text-body-1 font-weight-black text-blue-grey-darken-4 mb-0">
           {{ activityTitle }}
@@ -423,106 +260,54 @@
       </div>
 
       <div v-if="hasChartData" class="mt-4" ref="chartContainerRef">
-        <svg
-          :viewBox="`0 0 ${chartWidth} 260`"
-          class="d-block w-100"
-          style="height: auto; max-height: 260px"
-        >
-          <line
-            v-for="tick in chartTicks"
-            :key="tick"
-            x1="48"
-            :y1="tick"
-            :x2="chartWidth - 20"
-            :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"
-          >
+        <svg :viewBox="`0 0 ${chartWidth} 260`" class="d-block w-100" style="height: auto; max-height: 260px">
+          <line v-for="tick in chartTicks" :key="tick" x1="48" :y1="tick" :x2="chartWidth - 20" :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="
+          <path :d="primaryPath" style="
               fill: none;
               stroke: #ff9b9b;
               stroke-width: 3;
               stroke-linecap: round;
               stroke-linejoin: round;
-            "
-          />
-          <path
-            :d="secondaryPath"
-            style="
+            " />
+          <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"
-          >
+            " />
+          <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="
+          <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="
+          <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>
@@ -533,63 +318,33 @@
 
     <!-- ── Hygiene / M&E / Landscape / Pest / Pool — task + attendance ────── -->
     <v-row v-if="isHygieneMode" dense class="mt-3 align-stretch">
-      <v-col
-        v-if="isWidgetVisible('taskSchedule')"
-        cols="12"
-        lg="7"
-        class="d-flex"
-      >
-        <DashboardPanel
-          :title="primaryListConfig.title"
-          action-label="View All"
-          @action="goToDashboardRoute(primaryListConfig.route)"
-        >
+      <v-col v-if="isWidgetVisible('taskSchedule')" cols="12" lg="7" class="d-flex">
+        <DashboardPanel :title="primaryListConfig.title" action-label="View All"
+          @action="goToDashboardRoute(primaryListConfig.route)">
           <div v-if="taskScheduleItems.length" class="d-flex flex-column ga-3">
-            <v-card
-              v-for="item in taskScheduleItems"
-              :key="item.id"
-              flat
-              border
-              rounded="lg"
-              class="pa-3"
-            >
+            <v-card v-for="item in taskScheduleItems" :key="item.id" flat border rounded="lg" class="pa-3">
               <div class="d-flex align-center flex-wrap ga-3">
                 <div class="flex-grow-1" style="min-width: 0">
-                  <div
-                    class="text-body-2 font-weight-bold text-blue-grey-darken-4 text-truncate"
-                  >
+                  <div class="text-body-2 font-weight-bold text-blue-grey-darken-4 text-truncate">
                     {{ item.title }}
                   </div>
                   <div class="text-caption text-blue-grey mt-1 text-truncate">
                     {{ item.subtitle
                     }}<template v-if="item.subtitle && item.time">
-                      &bull; </template
-                    >{{ item.time }}
+                      &bull; </template>{{ item.time }}
                   </div>
                 </div>
-                <div
-                  class="d-flex align-center ga-2 text-caption text-blue-grey"
-                >
+                <div class="d-flex align-center ga-2 text-caption text-blue-grey">
                   <AvatarMain :name="item.person" :size="30" />
                   <span class="text-truncate" style="max-width: 100px">{{
                     item.person
-                  }}</span>
+                    }}</span>
                 </div>
-                <v-chip
-                  size="small"
-                  :color="getStatusTone(item.status)"
-                  variant="tonal"
-                  label
-                >
+                <v-chip size="small" :color="getStatusTone(item.status)" variant="tonal" label>
                   {{ item.status }}
                 </v-chip>
-                <v-btn
-                  variant="outlined"
-                  color="primary"
-                  size="small"
-                  class="text-none font-weight-bold"
-                  @click="goToListItem(item, primaryListConfig.route)"
-                >
+                <v-btn variant="outlined" color="primary" size="small" class="text-none font-weight-bold"
+                  @click="goToListItem(item, primaryListConfig.route)">
                   View
                 </v-btn>
               </div>
@@ -599,45 +354,23 @@
         </DashboardPanel>
       </v-col>
 
-      <v-col
-        v-if="isWidgetVisible('staffStatus')"
-        cols="12"
-        lg="5"
-        class="d-flex"
-      >
-        <DashboardPanel
-          title="Staff's Total Attendance"
-          action-label="View All"
-          @action="goToDashboardRoute('attendance')"
-        >
+      <v-col v-if="isWidgetVisible('staffStatus')" cols="12" lg="5" class="d-flex">
+        <DashboardPanel title="Staff's Total Attendance" action-label="View All"
+          @action="goToDashboardRoute('attendance')">
           <div v-if="staffStatusItems.length" class="d-flex flex-column ga-3">
-            <v-card
-              v-for="item in staffStatusItems"
-              :key="item.id"
-              flat
-              border
-              rounded="lg"
-              class="pa-3"
-            >
+            <v-card v-for="item in staffStatusItems" :key="item.id" flat border rounded="lg" class="pa-3">
               <div class="d-flex align-start ga-3">
                 <AvatarMain :name="item.name" :size="32" />
                 <div class="flex-grow-1" style="min-width: 0">
-                  <div
-                    class="text-body-2 font-weight-bold text-blue-grey-darken-4 text-truncate"
-                  >
+                  <div class="text-body-2 font-weight-bold text-blue-grey-darken-4 text-truncate">
                     {{ item.name }}
                   </div>
                   <div class="text-caption text-blue-grey mt-1 text-truncate">
                     {{ item.role }}
                   </div>
                 </div>
-                <v-chip
-                  size="small"
-                  color="blue-grey-darken-1"
-                  variant="tonal"
-                  label
-                  class="ml-auto flex-shrink-0 font-weight-bold"
-                >
+                <v-chip size="small" color="blue-grey-darken-1" variant="tonal" label
+                  class="ml-auto flex-shrink-0 font-weight-bold">
                   {{ item.totalHours || 0 }} hrs
                 </v-chip>
               </div>
@@ -648,80 +381,55 @@
       </v-col>
 
       <v-col v-if="isWidgetVisible('feedbacks')" cols="12" class="d-flex">
-        <DashboardPanel
-          title="Feedbacks"
-          action-label="View All"
-          @action="goToDashboardRoute('feedbacks')"
-        >
+        <DashboardPanel title="Feedbacks" action-label="View All" @action="goToDashboardRoute('feedbacks')">
           <div v-if="feedbackItems.length" class="figma-list mt-2">
-            <div
-              v-for="item in feedbackItems"
-              :key="item.id"
-              class="d-flex align-center justify-space-between"
-              style="
+            <div v-for="item in feedbackItems" :key="item.id" class="d-flex align-center justify-space-between" style="
                 padding: 16px 20px;
                 border: 1px solid #e2e8f0;
                 border-radius: 12px;
                 margin-bottom: 12px;
                 background-color: #ffffff;
                 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
-              "
-            >
+              ">
               <div style="flex: 1; min-width: 140px">
-                <strong
-                  style="
+                <strong style="
                     display: block;
                     font-size: 15px;
                     font-weight: 700;
                     color: #0b2f47;
                     margin-bottom: 4px;
-                  "
-                  >{{ item.title }}</strong
-                >
+                  ">{{ item.title }}</strong>
                 <span style="font-size: 13px; color: #94a3b8">{{
                   item.subtitle
-                }}</span>
+                  }}</span>
               </div>
 
-              <div
-                style="flex: 1; display: flex; align-items: center; gap: 12px"
-              >
+              <div style="flex: 1; display: flex; align-items: center; gap: 12px">
                 <AvatarMain :name="item.person" :size="36" />
                 <span style="font-size: 14px; color: #64748b">{{
                   item.person
-                }}</span>
+                  }}</span>
               </div>
 
               <div style="flex: 1; display: flex; justify-content: center">
-                <div
-                  :style="getStatusPillStyle(item.status)"
-                  style="
+                <div :style="getStatusPillStyle(item.status)" style="
                     padding: 6px 16px;
                     border-radius: 20px;
                     font-size: 13px;
                     font-weight: 500;
                     text-transform: capitalize;
-                  "
-                >
+                  ">
                   {{ item.status || "To-Do" }}
                 </div>
               </div>
 
               <div style="flex: 0 0 auto; text-align: right">
-                <v-btn
-                  variant="outlined"
-                  class="text-none font-weight-medium"
-                  size="small"
-                  color="#3b82f6"
-                  style="
+                <v-btn variant="outlined" class="text-none font-weight-medium" size="small" color="#3b82f6" style="
                     border-color: #e2e8f0;
                     border-radius: 8px;
                     padding: 0 16px;
                     height: 32px;
-                  "
-                  @click="goToListItem(item, 'feedbacks')"
-                  >View</v-btn
-                >
+                  " @click="goToListItem(item, 'feedbacks')">View</v-btn>
               </div>
             </div>
           </div>
@@ -736,36 +444,22 @@
         <div class="dashboard-card dashboard-panel figma-panel">
           <div class="figma-panel-header">
             <h2>Upcoming Events</h2>
-            <button
-              class="figma-panel-action"
-              type="button"
-              @click="goToDashboardRoute('event-mgmt')"
-            >
+            <button class="figma-panel-action" type="button" @click="goToDashboardRoute('event-mgmt')">
               View All
             </button>
           </div>
           <div class="figma-panel-body">
             <div v-if="upcomingEvents.length" class="figma-list">
-              <div
-                v-for="item in upcomingEvents"
-                :key="item.id"
-                class="figma-list-row"
-              >
-                <span
-                  :class="[
-                    'figma-event-dot',
-                    `figma-event-dot-${getListTone(item)}`,
-                  ]"
-                />
+              <div v-for="item in upcomingEvents" :key="item.id" class="figma-list-row">
+                <span :class="[
+                  'figma-event-dot',
+                  `figma-event-dot-${getListTone(item)}`,
+                ]" />
                 <div class="figma-list-main">
                   <strong>{{ item.title }}</strong>
                   <p v-if="item.subtitle">{{ item.subtitle }}</p>
                 </div>
-                <button
-                  class="figma-row-action"
-                  type="button"
-                  @click="navigateTo(dashboardPath('event-mgmt'))"
-                >
+                <button class="figma-row-action" type="button" @click="navigateTo(dashboardPath('event-mgmt'))">
                   {{ item.actionLabel || "View" }}
                 </button>
               </div>
@@ -779,38 +473,24 @@
         <div class="dashboard-card dashboard-panel figma-panel">
           <div class="figma-panel-header">
             <h2>Today's Reminder</h2>
-            <button
-              class="figma-panel-action"
-              type="button"
-              @click="goToDashboardRoute('calendar')"
-            >
+            <button class="figma-panel-action" type="button" @click="goToDashboardRoute('calendar')">
               View All
             </button>
           </div>
           <div class="figma-panel-body">
             <div v-if="todayReminders.length" class="figma-list">
-              <div
-                v-for="item in todayReminders"
-                :key="item.id"
-                class="figma-list-row"
-              >
-                <span
-                  :class="[
-                    'figma-icon-badge',
-                    `figma-icon-badge-${getListTone(item)}`,
-                  ]"
-                >
+              <div v-for="item in todayReminders" :key="item.id" class="figma-list-row">
+                <span :class="[
+                  'figma-icon-badge',
+                  `figma-icon-badge-${getListTone(item)}`,
+                ]">
                   <v-icon :icon="item.icon || 'mdi-alert'" size="15" />
                 </span>
                 <div class="figma-list-main">
                   <strong>{{ item.title }}</strong>
                   <p v-if="item.subtitle">{{ item.subtitle }}</p>
                 </div>
-                <button
-                  class="figma-row-action"
-                  type="button"
-                  @click="navigateTo(dashboardPath('calendar'))"
-                >
+                <button class="figma-row-action" type="button" @click="navigateTo(dashboardPath('calendar'))">
                   {{ item.actionLabel || "View" }}
                 </button>
               </div>
@@ -824,43 +504,29 @@
         <div class="dashboard-card dashboard-panel figma-panel">
           <div class="figma-panel-header">
             <h2>Today's Attentions</h2>
-        
+
           </div>
           <div class="figma-panel-body">
             <div v-if="todayAttentions.length" class="figma-list">
-              <div
-                v-for="item in todayAttentions"
-                :key="item.id"
-                class="figma-list-row"
-              >
-                <span
-                  :class="[
-                    'figma-icon-badge',
-                    `figma-icon-badge-${getListTone(item)}`,
-                  ]"
-                >
-                  <v-icon
-                    :icon="item.icon || 'mdi-alert-circle-outline'"
-                    size="15"
-                  />
+              <div v-for="item in todayAttentions" :key="item.id" class="figma-list-row">
+                <span :class="[
+                  'figma-icon-badge',
+                  `figma-icon-badge-${getListTone(item)}`,
+                ]">
+                  <v-icon :icon="item.icon || 'mdi-alert-circle-outline'" size="15" />
                 </span>
                 <div class="figma-list-main">
                   <strong>{{ item.title }}</strong>
                   <p v-if="item.subtitle">{{ item.subtitle }}</p>
                 </div>
-                <button
-                  class="figma-row-action"
-                  type="button"
-                  @click="
-                    navigateTo(
-                      item.type === 'facility-booking'
-                        ? `${dashboardPath('facility/bookings')}?booking=${
-                            item.id
-                          }`
-                        : dashboardPath(`incident-reports/${item.id}`)
-                    )
-                  "
-                >
+                <button class="figma-row-action" type="button" @click="
+                  navigateTo(
+                    item.type === 'facility-booking'
+                      ? `${dashboardPath('facility/bookings')}?booking=${item.id
+                      }`
+                      : dashboardPath(`incident-reports/${item.id}`)
+                  )
+                  ">
                   {{ item.actionLabel || "Review" }}
                 </button>
               </div>
@@ -874,30 +540,19 @@
         <div class="dashboard-card dashboard-panel figma-panel">
           <div class="figma-panel-header">
             <h2>Work Order Status</h2>
-            <button
-              class="figma-panel-action"
-              type="button"
-              @click="goToDashboardRoute('work-orders')"
-            >
+            <button class="figma-panel-action" type="button" @click="goToDashboardRoute('work-orders')">
               View All
             </button>
           </div>
           <div class="figma-panel-body">
             <div v-if="workOrderStatus.length" class="figma-status-stack">
-              <div
-                v-for="item in workOrderStatus"
-                :key="item.label"
-                class="figma-status-row"
-              >
+              <div v-for="item in workOrderStatus" :key="item.label" class="figma-status-row">
                 <div class="figma-status-label">
                   <span>{{ item.label }}</span>
                   <strong>{{ item.value }}</strong>
                 </div>
                 <div class="figma-progress-track">
-                  <span
-                    class="figma-progress-fill"
-                    :style="getStatusProgressStyle(item)"
-                  />
+                  <span class="figma-progress-fill" :style="getStatusProgressStyle(item)" />
                 </div>
               </div>
             </div>
@@ -908,17 +563,9 @@
 
       <!-- Property feedbacks -->
       <v-col v-if="isWidgetVisible('feedbacks')" cols="12">
-        <DashboardPanel
-          title="Feedbacks"
-          action-label="View All"
-          @action="goToDashboardRoute('feedbacks')"
-        >
+        <DashboardPanel title="Feedbacks" action-label="View All" @action="goToDashboardRoute('feedbacks')">
           <div v-if="feedbackItems.length" class="feedback-list">
-            <div
-              v-for="item in feedbackItems"
-              :key="item.id"
-              class="feedback-row"
-            >
+            <div v-for="item in feedbackItems" :key="item.id" class="feedback-row">
               <div class="feedback-summary">
                 <strong>{{ item.title }}</strong>
                 <p>{{ item.subtitle }}</p>
@@ -927,24 +574,18 @@
               <div class="feedback-person">
                 <span class="feedback-avatar">{{
                   getInitials(item.person)
-                }}</span>
+                  }}</span>
                 <span>{{ item.person }}</span>
               </div>
 
-              <span
-                :class="[
-                  'feedback-status-pill',
-                  `feedback-status-pill-${getFeedbackTone(item.status)}`,
-                ]"
-              >
+              <span :class="[
+                'feedback-status-pill',
+                `feedback-status-pill-${getFeedbackTone(item.status)}`,
+              ]">
                 {{ item.status }}
               </span>
 
-              <button
-                class="feedback-view-button"
-                type="button"
-                @click="goToListItem(item, 'feedbacks')"
-              >
+              <button class="feedback-view-button" type="button" @click="goToListItem(item, 'feedbacks')">
                 View
               </button>
             </div>
@@ -960,90 +601,60 @@
         <div class="dashboard-card dashboard-panel figma-panel">
           <div class="figma-panel-header">
             <h2>ACTIVE PATROL</h2>
-            <button
-              class="figma-panel-action"
-              type="button"
-              @click="goToDashboardRoute('virtual-patrol')"
-            >
+            <button class="figma-panel-action" type="button" @click="goToDashboardRoute('virtual-patrol')">
               View All
             </button>
           </div>
           <div class="figma-panel-body">
-            <div
-              v-if="formattedActivePatrolItems.length"
-              class="figma-list mt-2"
-            >
-              <div
-                v-for="item in formattedActivePatrolItems"
-                :key="item.id || item._id"
-                class="d-flex align-center justify-space-between"
-                style="
+            <div v-if="formattedActivePatrolItems.length" class="figma-list mt-2">
+              <div v-for="item in formattedActivePatrolItems" :key="item.id || item._id"
+                class="d-flex align-center justify-space-between" style="
                   padding: 16px 20px;
                   border: 1px solid #e2e8f0;
                   border-radius: 12px;
                   margin-bottom: 12px;
                   background-color: #ffffff;
                   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
-                "
-              >
+                ">
                 <div style="flex: 1; min-width: 140px">
-                  <strong
-                    style="
+                  <strong style="
                       display: block;
                       font-size: 15px;
                       font-weight: 700;
                       color: #0b2f47;
                       margin-bottom: 4px;
-                    "
-                    >{{ item.title || item.name }}</strong
-                  >
+                    ">{{ item.title || item.name }}</strong>
                   <span style="font-size: 13px; color: #94a3b8">{{
                     item.subtitle || item.location || ""
-                  }}</span>
+                    }}</span>
                 </div>
 
-                <div
-                  style="flex: 1; display: flex; align-items: center; gap: 12px"
-                >
-                  <AvatarMain
-                    :name="item.person || item.assignedTo"
-                    :size="36"
-                  />
+                <div style="flex: 1; display: flex; align-items: center; gap: 12px">
+                  <AvatarMain :name="item.person || item.assignedTo" :size="36" />
                   <span style="font-size: 14px; color: #64748b">{{
                     item.person || item.assignedTo
-                  }}</span>
+                    }}</span>
                 </div>
 
                 <div style="flex: 1; display: flex; justify-content: center">
-                  <div
-                    :style="getPatrolStatusStyle(item.status)"
-                    style="
+                  <div :style="getPatrolStatusStyle(item.status)" style="
                       padding: 6px 16px;
                       border-radius: 20px;
                       font-size: 13px;
                       font-weight: 500;
                       text-transform: capitalize;
-                    "
-                  >
+                    ">
                     {{ item.status }}
                   </div>
                 </div>
 
                 <div style="flex: 0 0 auto; text-align: right">
-                  <v-btn
-                    variant="outlined"
-                    class="text-none font-weight-medium"
-                    size="small"
-                    color="#3b82f6"
-                    style="
+                  <v-btn variant="outlined" class="text-none font-weight-medium" size="small" color="#3b82f6" style="
                       border-color: #e2e8f0;
                       border-radius: 8px;
                       padding: 0 16px;
                       height: 32px;
-                    "
-                    @click="goToDashboardRoute('virtual-patrol')"
-                    >View</v-btn
-                  >
+                    " @click="goToDashboardRoute('virtual-patrol')">View</v-btn>
                 </div>
               </div>
             </div>
@@ -1056,68 +667,50 @@
         <div class="dashboard-card dashboard-panel figma-panel">
           <div class="figma-panel-header">
             <h2>STAFF STATUS</h2>
-            <button
-              class="figma-panel-action"
-              type="button"
-              @click="goToDashboardRoute('attendance')"
-            >
+            <button class="figma-panel-action" type="button" @click="goToDashboardRoute('attendance')">
               View All
             </button>
           </div>
           <div class="figma-panel-body">
             <div v-if="securityStaffItems.length" class="figma-list mt-2">
-              <div
-                v-for="item in securityStaffItems"
-                :key="item._id || item.id"
-                class="d-flex align-center justify-space-between"
-                style="
+              <div v-for="item in securityStaffItems" :key="item._id || item.id"
+                class="d-flex align-center justify-space-between" style="
                   padding: 16px 20px;
                   border: 1px solid #e2e8f0;
                   border-radius: 12px;
                   margin-bottom: 12px;
                   background-color: #ffffff;
                   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
-                "
-              >
+                ">
                 <div style="display: flex; align-items: center; gap: 16px">
-                  <AvatarMain
-                    :name="
-                      item.personName ||
-                      item.employeeName ||
-                      item.userName ||
-                      'Unassigned'
-                    "
-                    :size="40"
-                  />
+                  <AvatarMain :name="item.personName ||
+                    item.employeeName ||
+                    item.userName ||
+                    'Unassigned'
+                    " :size="40" />
                   <div>
-                    <strong
-                      style="
+                    <strong style="
                         display: block;
                         font-size: 15px;
                         font-weight: 700;
                         color: #0b2f47;
                         margin-bottom: 4px;
-                      "
-                      >{{
+                      ">{{
                         item.userName || item.personName || "Unassigned"
-                      }}</strong
-                    >
+                      }}</strong>
                     <span style="font-size: 13px; color: #94a3b8">{{
                       item.role || item.designation || "Officer"
-                    }}</span>
+                      }}</span>
                   </div>
                 </div>
 
                 <div style="flex: 0 0 auto">
-                  <div
-                    :style="getStaffStatusPillStyle(item.status)"
-                    style="
+                  <div :style="getStaffStatusPillStyle(item.status)" style="
                       padding: 6px 16px;
                       border-radius: 20px;
                       font-size: 13px;
                       font-weight: 500;
-                    "
-                  >
+                    ">
                     {{ item.status || "On duty" }}
                   </div>
                 </div>
@@ -1130,80 +723,55 @@
 
       <!-- Security feedbacks -->
       <v-col v-if="isWidgetVisible('feedbacks')" cols="12">
-        <DashboardPanel
-          title="Feedbacks"
-          action-label="View All"
-          @action="goToDashboardRoute('feedbacks')"
-        >
+        <DashboardPanel title="Feedbacks" action-label="View All" @action="goToDashboardRoute('feedbacks')">
           <div v-if="feedbackItems.length" class="figma-list mt-2">
-            <div
-              v-for="item in feedbackItems"
-              :key="item.id"
-              class="d-flex align-center justify-space-between"
-              style="
+            <div v-for="item in feedbackItems" :key="item.id" class="d-flex align-center justify-space-between" style="
                 padding: 16px 20px;
                 border: 1px solid #e2e8f0;
                 border-radius: 12px;
                 margin-bottom: 12px;
                 background-color: #ffffff;
                 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
-              "
-            >
+              ">
               <div style="flex: 1; min-width: 140px">
-                <strong
-                  style="
+                <strong style="
                     display: block;
                     font-size: 15px;
                     font-weight: 700;
                     color: #0b2f47;
                     margin-bottom: 4px;
-                  "
-                  >{{ item.title }}</strong
-                >
+                  ">{{ item.title }}</strong>
                 <span style="font-size: 13px; color: #94a3b8">{{
                   item.subtitle
-                }}</span>
+                  }}</span>
               </div>
 
-              <div
-                style="flex: 1; display: flex; align-items: center; gap: 12px"
-              >
+              <div style="flex: 1; display: flex; align-items: center; gap: 12px">
                 <AvatarMain :name="item.person" :size="36" />
                 <span style="font-size: 14px; color: #64748b">{{
                   item.person
-                }}</span>
+                  }}</span>
               </div>
 
               <div style="flex: 1; display: flex; justify-content: center">
-                <div
-                  :style="getStatusPillStyle(item.status)"
-                  style="
+                <div :style="getStatusPillStyle(item.status)" style="
                     padding: 6px 16px;
                     border-radius: 20px;
                     font-size: 13px;
                     font-weight: 500;
                     text-transform: capitalize;
-                  "
-                >
+                  ">
                   {{ item.status || "To-Do" }}
                 </div>
               </div>
 
               <div style="flex: 0 0 auto; text-align: right">
-                <v-btn
-                  variant="outlined"
-                  class="text-none font-weight-medium"
-                  size="small"
-                  color="#3b82f6"
-                  style="
+                <v-btn variant="outlined" class="text-none font-weight-medium" size="small" color="#3b82f6" style="
                     border-color: #e2e8f0;
                     border-radius: 8px;
                     padding: 0 16px;
                     height: 32px;
-                  "
-                  @click="goToListItem(item, 'feedbacks')"
-                  >View</v-btn
-                >
+                  " @click="goToListItem(item, 'feedbacks')">View</v-btn>
               </div>
             </div>
           </div>
@@ -1215,9 +783,7 @@
     <!-- ── Customize Dialog ───────────────────────────────────────────────── -->
     <v-dialog v-model="customizeDialog" max-width="720" persistent scrollable>
       <v-card rounded="lg">
-        <v-card-title
-          class="d-flex align-start justify-space-between pa-6 pb-4 border-b"
-        >
+        <v-card-title class="d-flex align-start justify-space-between pa-6 pb-4 border-b">
           <div>
             <div class="text-h6 font-weight-black text-blue-grey-darken-4">
               Customize Dashboard
@@ -1226,103 +792,54 @@
               Select which widgets to display on your dashboard
             </div>
           </div>
-          <v-btn
-            icon="mdi-close"
-            variant="text"
-            density="comfortable"
-            aria-label="Close customize dashboard"
-            @click="cancelCustomize"
-          />
+          <v-btn icon="mdi-close" variant="text" density="comfortable" aria-label="Close customize dashboard"
+            @click="cancelCustomize" />
         </v-card-title>
 
         <v-card-text class="pa-6">
-          <v-text-field
-            v-model="widgetSearch"
-            placeholder="Search widgets..."
-            prepend-inner-icon="mdi-magnify"
-            variant="outlined"
-            density="compact"
-            hide-details
-          />
+          <v-text-field v-model="widgetSearch" placeholder="Search widgets..." prepend-inner-icon="mdi-magnify"
+            variant="outlined" density="compact" hide-details />
 
           <div class="d-flex justify-end mt-3 mb-1">
-            <v-btn
-              variant="text"
-              color="blue-grey-darken-4"
-              size="small"
-              class="text-none font-weight-bold"
-              prepend-icon="mdi-refresh"
-              @click="resetCustomizeDraft"
-            >
+            <v-btn variant="text" color="blue-grey-darken-4" size="small" class="text-none font-weight-bold"
+              prepend-icon="mdi-refresh" @click="resetCustomizeDraft">
               Reset to default
             </v-btn>
           </div>
 
           <div class="d-flex flex-column ga-3">
-            <v-card
-              v-for="widget in filteredCustomizeWidgets"
-              :key="widget.key"
-              flat
-              border
-              rounded="lg"
-              class="pa-4"
-            >
+            <v-card v-for="widget in filteredCustomizeWidgets" :key="widget.key" flat border rounded="lg" class="pa-4">
               <div class="d-flex align-center justify-space-between ga-4">
                 <div>
-                  <div
-                    class="text-body-2 font-weight-black text-blue-grey-darken-4"
-                  >
+                  <div class="text-body-2 font-weight-black text-blue-grey-darken-4">
                     {{ widget.title }}
                   </div>
                   <div class="text-caption text-blue-grey mt-1">
                     {{ widget.description }}
                   </div>
                 </div>
-                <v-switch
-                  v-model="draftVisibleWidgetKeys"
-                  :value="widget.key"
-                  color="blue-grey-darken-4"
-                  inset
-                  hide-details
-                  density="compact"
-                  aria-label="Toggle dashboard widget"
-                />
+                <v-switch v-model="draftVisibleWidgetKeys" :value="widget.key" color="blue-grey-darken-4" inset
+                  hide-details density="compact" aria-label="Toggle dashboard widget" />
               </div>
             </v-card>
 
-            <DashboardEmptyState
-              v-if="!filteredCustomizeWidgets.length"
-              compact
-            />
+            <DashboardEmptyState v-if="!filteredCustomizeWidgets.length" compact />
           </div>
         </v-card-text>
 
         <v-card-actions class="pa-6 pt-4 border-t justify-end ga-3">
-          <v-btn
-            variant="text"
-            class="text-none font-weight-bold text-blue-grey"
-            @click="cancelCustomize"
-          >
+          <v-btn variant="text" class="text-none font-weight-bold text-blue-grey" @click="cancelCustomize">
             Cancel
           </v-btn>
-          <v-btn
-            variant="flat"
-            color="blue-grey-darken-4"
-            class="text-none font-weight-bold px-6"
-            style="min-width: 110px"
-            @click="submitCustomize"
-          >
+          <v-btn variant="flat" color="blue-grey-darken-4" class="text-none font-weight-bold px-6"
+            style="min-width: 110px" @click="submitCustomize">
             Submit
           </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
 
-    <v-snackbar
-      v-model="snackbar.visible"
-      :timeout="2200"
-      :color="snackbar.color || 'primary'"
-    >
+    <v-snackbar v-model="snackbar.visible" :timeout="2200" :color="snackbar.color || 'primary'">
       {{ snackbar.text }}
     </v-snackbar>
   </section>
@@ -1606,10 +1123,10 @@ const { data: getDashboardReq, pending: loadingMetrics } =
     () =>
       props.serviceType && isHygieneMode.value
         ? getDashboardHygiene(
-            props.site,
-            currentPeriod.value,
-            props.serviceType as TServiceType
-          )
+          props.site,
+          currentPeriod.value,
+          props.serviceType as TServiceType
+        )
         : Promise.resolve(null),
     {
       watch: [() => props.site, currentPeriod, () => props.serviceType],
@@ -1623,13 +1140,13 @@ const { data: getDashboardAltReq, pending: loadingAltMetrics } =
     () =>
       props.site && (isPropertyMode.value || isSecurityMode.value)
         ? getDashboard(
-            props.site,
-            props.serviceType as TServiceType,
-            currentPeriod.value,
-            currentVisitorTypeParam.value
-              ? { type: currentVisitorTypeParam.value }
-              : {}
-          )
+          props.site,
+          props.serviceType as TServiceType,
+          currentPeriod.value,
+          currentVisitorTypeParam.value
+            ? { type: currentVisitorTypeParam.value }
+            : {}
+        )
         : Promise.resolve(null),
     {
       watch: [
@@ -1648,10 +1165,10 @@ const { data: weeklyActivityReq, pending: loadingWeeklyActivity } =
     () =>
       props.serviceType
         ? getDashboardWeeklyActivity(
-            props.site,
-            props.serviceType as TServiceType,
-            currentPeriod.value
-          )
+          props.site,
+          props.serviceType as TServiceType,
+          currentPeriod.value
+        )
         : Promise.resolve(null),
     {
       watch: [() => props.site, () => props.serviceType, currentPeriod],
@@ -1665,10 +1182,10 @@ const { data: taskScheduleReq, pending: loadingTaskSchedule } =
     () =>
       props.serviceType && isHygieneMode.value
         ? getDashboardHygieneTaskSchedule(
-            props.site,
-            props.serviceType as TServiceType,
-            currentPeriod.value
-          )
+          props.site,
+          props.serviceType as TServiceType,
+          currentPeriod.value
+        )
         : Promise.resolve(null),
     {
       watch: [() => props.site, () => props.serviceType, currentPeriod],
@@ -1682,10 +1199,10 @@ const { data: attendanceReq, pending: loadingAttendance } =
     () =>
       props.serviceType && !isPropertyMode.value
         ? getDashboardHygieneAttendance(
-            props.site,
-            props.serviceType as TServiceType,
-            currentPeriod.value
-          )
+          props.site,
+          props.serviceType as TServiceType,
+          currentPeriod.value
+        )
         : Promise.resolve(null),
     {
       watch: [() => props.site, () => props.serviceType, currentPeriod],
@@ -1699,10 +1216,10 @@ const { data: feedbacksReq, pending: loadingFeedbacks } =
     () =>
       props.serviceType
         ? getDashboardHygieneFeedbacks(
-            props.site,
-            props.serviceType as TServiceType,
-            currentPeriod.value
-          )
+          props.site,
+          props.serviceType as TServiceType,
+          currentPeriod.value
+        )
         : Promise.resolve(null),
     {
       watch: [() => props.site, () => props.serviceType, currentPeriod],
@@ -2300,10 +1817,10 @@ function computeFacilityMetric(): DashboardMetric {
   const items = facilityBookingItems.value.filter((item: any) => {
     const val = String(
       item.facilityName ||
-        item.facility?.name ||
-        item.facilityInfo?.name ||
-        item.name ||
-        ""
+      item.facility?.name ||
+      item.facilityInfo?.name ||
+      item.name ||
+      ""
     ).toLowerCase();
     return val === selected.toLowerCase();
   });
@@ -2450,21 +1967,21 @@ const dashboardTitle = computed(() => {
 const primaryListConfig = computed(() =>
   isSecurityMode.value
     ? {
-        title: "Active Patrol",
-        route: "virtualPatrol",
-        keys: ["activePatrolItems", "patrolItems"],
-      }
+      title: "Active Patrol",
+      route: "virtualPatrol",
+      keys: ["activePatrolItems", "patrolItems"],
+    }
     : {
-        title: "Today's Task Schedule",
-        route: "scheduleTask",
-        keys: [
-          "taskScheduleItems",
-          "scheduleTaskItems",
-          "scheduledTaskItems",
-          "cleaningScheduleItems",
-          "tasks",
-        ],
-      }
+      title: "Today's Task Schedule",
+      route: "scheduleTask",
+      keys: [
+        "taskScheduleItems",
+        "scheduleTaskItems",
+        "scheduledTaskItems",
+        "cleaningScheduleItems",
+        "tasks",
+      ],
+    }
 );
 
 // ─── Activity Chart ───────────────────────────────────────────────────────────
@@ -2845,8 +2362,7 @@ function getMetricMeta(metric: DashboardMetric) {
     parts.push(`${formatNumber(toNumber(metric.ongoing))} ongoing`);
   if (typeof metric.waitingApproval !== "undefined")
     parts.push(
-      `${formatNumber(toNumber(metric.waitingApproval))} ${
-        isPropertyMode.value ? "for approval" : "waiting approval"
+      `${formatNumber(toNumber(metric.waitingApproval))} ${isPropertyMode.value ? "for approval" : "waiting approval"
       }`
     );
   if (typeof metric.lowStock !== "undefined")
@@ -2873,9 +2389,9 @@ function getFilteredVisitorMetric(): DashboardMetric {
       count: toNumber(metric.count ?? items.length),
       currentlyOnSite: toNumber(
         metric.currentlyOnSite ??
-          items.filter(
-            (item: any) => !isClosedStatus(item.status) && !item.checkOut
-          ).length
+        items.filter(
+          (item: any) => !isClosedStatus(item.status) && !item.checkOut
+        ).length
       ),
     };
   }
@@ -2971,9 +2487,8 @@ function getListIcon(context: string) {
 
 function getListTone(item: DashboardListItem) {
   if (item.tone) return item.tone;
-  const text = `${item.title} ${item.subtitle || ""} ${item.icon || ""} ${
-    item.color || ""
-  }`.toLowerCase();
+  const text = `${item.title} ${item.subtitle || ""} ${item.icon || ""} ${item.color || ""
+    }`.toLowerCase();
   if (
     text.includes("alert") ||
     text.includes("incident") ||
@@ -3065,10 +2580,10 @@ function normalizeStaffItem(
     role,
     status: normalizeStatus(
       item.statusLabel ||
-        item.status ||
-        item.currentStatus ||
-        item.attendanceStatus ||
-        "Off duty"
+      item.status ||
+      item.currentStatus ||
+      item.attendanceStatus ||
+      "Off duty"
     ),
     totalHours: item.totalHours || 0,
     raw: item,
@@ -3419,8 +2934,8 @@ async function exportDashboard(format: "PDF" | "Word") {
     selectedRange.value === "Today"
       ? "Today"
       : selectedRange.value === "This Week"
-      ? "This Week"
-      : "This Month";
+        ? "This Week"
+        : "This Month";
 
   const reportTitle = `${props.title || dashboardTitle.value} - ${periodLabel}`;
 
@@ -3502,11 +3017,10 @@ async function exportDashboard(format: "PDF" | "Word") {
             <td>
               <div class="kpi-title">${card.title}</div>
               ${kpiValueHtml}
-              <div class="kpi-meta">${card.meta || ""} ${
-            card.percentage
+              <div class="kpi-meta">${card.meta || ""} ${card.percentage
               ? `(${card.percentage >= 0 ? "+" : ""}${card.percentage}%)`
               : ""
-          }</div>
+            }</div>
             </td>
           `;
         });
@@ -3552,8 +3066,8 @@ async function exportDashboard(format: "PDF" | "Word") {
               <td>${item.person || ""}</td>
               <td>${item.time || ""}</td>
               <td><span class="status-badge badge-${getStatusTone(
-                item.status
-              )}">${item.status || ""}</span></td>
+              item.status
+            )}">${item.status || ""}</span></td>
             </tr>`;
           });
         } else {
@@ -3651,8 +3165,8 @@ async function exportDashboard(format: "PDF" | "Word") {
               <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>
+              item.status
+            )}">${item.status || ""}</span></td>
             </tr>`;
           });
         } else {
@@ -3666,8 +3180,7 @@ async function exportDashboard(format: "PDF" | "Word") {
         if (securityStaffItems.value.length > 0) {
           securityStaffItems.value.forEach((item) => {
             wordHtml += `<tr>
-              <td><strong>${
-                item.userName || item.personName || "Unassigned"
+              <td><strong>${item.userName || item.personName || "Unassigned"
               }</strong></td>
               <td>${item.role || item.designation || "Officer"}</td>
               <td><span class="status-badge badge-${getStatusTone(
@@ -3691,8 +3204,8 @@ async function exportDashboard(format: "PDF" | "Word") {
             <td>${item.subtitle || ""}</td>
             <td>${item.person || ""}</td>
             <td><span class="status-badge badge-${getStatusTone(
-              item.status
-            )}">${item.status || "To-Do"}</span></td>
+            item.status
+          )}">${item.status || "To-Do"}</span></td>
           </tr>`;
         });
       } else {
@@ -3722,9 +3235,8 @@ async function exportDashboard(format: "PDF" | "Word") {
       snackbar.visible = true;
     }
   } catch (err: any) {
-    snackbar.text = `Export failed: ${
-      err?.message || "Unknown error"
-    }. Please try again.`;
+    snackbar.text = `Export failed: ${err?.message || "Unknown error"
+      }. Please try again.`;
     snackbar.color = "error";
     snackbar.visible = true;
   } finally {
@@ -4055,7 +3567,7 @@ function formatDashboardTime(value?: string) {
   margin-top: 14px;
 }
 
-.dashboard-section-grid > .v-col {
+.dashboard-section-grid>.v-col {
   display: flex;
 }
 
@@ -4209,18 +3721,22 @@ function formatDashboardTime(value?: string) {
   background: #ffe0de;
   color: #d72f2f;
 }
+
 .figma-icon-badge-info {
   background: #e8e2ff;
   color: #6d4bd8;
 }
+
 .figma-icon-badge-success {
   background: #ddf7e6;
   color: #229852;
 }
+
 .figma-icon-badge-warning {
   background: #ffeed4;
   color: #c57916;
 }
+
 .figma-icon-badge-neutral {
   background: #edf2f6;
   color: #607386;
@@ -4232,8 +3748,7 @@ function formatDashboardTime(value?: string) {
   padding: 6px 2px 0;
 }
 
-.figma-status-row {
-}
+.figma-status-row {}
 
 .figma-status-label {
   align-items: center;
@@ -4356,14 +3871,17 @@ function formatDashboardTime(value?: string) {
   background: #72e3a1;
   color: #0f5132;
 }
+
 .feedback-status-pill-progress {
   background: #fde68a;
   color: #92400e;
 }
+
 .feedback-status-pill-danger {
   background: #fecaca;
   color: #b91c1c;
 }
+
 .feedback-status-pill-todo {
   background: #e2e8f0;
   color: #64748b;