@7365admin1/layer-common 3.0.22 → 3.0.23

package/components/DashboardMain.vue

@@ -12,12 +12,21 @@
     <!-- 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>
@@ -27,8 +36,10 @@
           <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>
@@ -39,52 +50,100 @@
       <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>
@@ -92,30 +151,43 @@
     </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>
@@ -131,7 +203,9 @@
 
   <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 }}
@@ -142,16 +216,31 @@
         </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>
@@ -162,65 +251,133 @@
           </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>
             </v-menu>
+
+            <button
+              v-if="card.key === 'facilityBookings'"
+              class="figma-panel-action"
+              type="button"
+              @click="openFacilityBookingDialog"
+            >
+              View All
+            </button>
           </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>
@@ -235,13 +392,22 @@
               <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>
@@ -252,7 +418,13 @@
     </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 }}
@@ -260,54 +432,106 @@
       </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>
@@ -318,33 +542,63 @@
 
     <!-- ── 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>
@@ -354,23 +608,45 @@
         </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>
@@ -381,55 +657,80 @@
       </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>
@@ -444,22 +745,36 @@
         <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>
@@ -473,24 +788,38 @@
         <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>
@@ -504,29 +833,42 @@
         <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>
@@ -540,19 +882,30 @@
         <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>
@@ -563,9 +916,17 @@
 
       <!-- 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>
@@ -574,18 +935,24 @@
               <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>
@@ -601,60 +968,90 @@
         <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>
@@ -667,50 +1064,68 @@
         <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>
@@ -723,55 +1138,80 @@
 
       <!-- 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>
@@ -783,7 +1223,9 @@
     <!-- ── 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
@@ -792,54 +1234,154 @@
               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-dialog
+      v-model="facilityBookingDialog"
+      max-width="650"
+      persistent
+      scrollable
+    >
+      <v-card rounded="lg" class="facility-booking-modal">
+        <v-card-title
+          class="d-flex align-center justify-space-between pa-6 pb-3"
+        >
+          <div class="text-body-1 font-weight-black text-blue-grey-darken-4">
+            Facility Booking
+          </div>
+          <v-btn
+            icon="mdi-close"
+            variant="text"
+            density="comfortable"
+            aria-label="Close facility booking summary"
+            @click="facilityBookingDialog = false"
+          />
+        </v-card-title>
+
+        <v-card-text class="px-6 pb-6 pt-3">
+          <div class="facility-booking-summary-list">
+            <div
+              v-for="item in facilityBookingBreakdown"
+              :key="item.status"
+              class="facility-booking-summary-row"
+            >
+              <span class="facility-booking-summary-label">
+                {{ item.status }}
+              </span>
+              <span class="facility-booking-summary-dots" />
+              <strong class="facility-booking-summary-value">
+                {{ formatNumber(item.count) }}
+              </strong>
+            </div>
+          </div>
+
+          <v-divider class="my-5" />
+
+          <div class="facility-booking-summary-row facility-booking-total-row">
+            <strong class="facility-booking-total-label">Total</strong>
+            <strong class="facility-booking-summary-value">
+              {{ formatNumber(facilityBookingTotal) }}
+            </strong>
+          </div>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+
+    <v-snackbar
+      v-model="snackbar.visible"
+      :timeout="2200"
+      :color="snackbar.color || 'primary'"
+    >
       {{ snackbar.text }}
     </v-snackbar>
   </section>
@@ -864,6 +1406,8 @@ type DashboardMetric = {
   outOfStock?: number;
   completed?: number;
   total?: number;
+  byStatus?: Record<string, number>;
+  statusCounts?: Record<string, number>;
   items?: { name: string; qty: number }[];
 };
 
@@ -1075,7 +1619,7 @@ const initialPeriod = (
 ) as TDashboardValues;
 const selectedRange = ref(periodLabelValue[initialPeriod]);
 const visitorType = ref("All");
-const facilityType = ref("All");
+const facilityBookingDialog = ref(false);
 const visibleWidgetKeys = ref<string[]>([]);
 const draftVisibleWidgetKeys = ref<string[]>([]);
 const filterMenus = reactive<Record<string, boolean>>({});
@@ -1123,10 +1667,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],
@@ -1140,13 +1684,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: [
@@ -1165,10 +1709,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],
@@ -1182,10 +1726,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],
@@ -1199,10 +1743,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],
@@ -1216,10 +1760,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],
@@ -1707,7 +2251,6 @@ const visitorOptions = computed(() =>
   )
 );
 
-// Property-specific: facility booking metric with client-side filter
 const facilityBookingItems = computed(() =>
   getDashboardArray([
     "facilityBookingItems",
@@ -1715,20 +2258,47 @@ const facilityBookingItems = computed(() =>
     "bookingsList",
   ])
 );
-const defaultFacilityOptions = ["All"];
-const facilityOptions = computed(() =>
-  buildFilterOptions(
-    defaultFacilityOptions,
-    facilityBookingItems.value,
-    (item: any) =>
-      item.facilityName ||
-      item.facility?.name ||
-      item.facilityInfo?.name ||
-      item.name ||
-      ""
-  )
+
+const facilityBookingStatuses = [
+  "Pending",
+  "Approved",
+  "Ongoing",
+  "For Review",
+  "With Balance",
+  "With Refund",
+  "Completed",
+  "Rejected",
+  "Cancelled",
+];
+
+const facilityBookingBreakdown = computed(() => {
+  const metric = getMetric(["facilityBooking", "facilityBookings", "bookings"]);
+  const sourceCounts = metric.byStatus ?? metric.statusCounts ?? {};
+  const itemCounts: Record<string, number> = {};
+  facilityBookingItems.value.forEach((item: any) => {
+    const status = normalizeFacilityBookingStatus(item.status);
+    if (status) itemCounts[status] = (itemCounts[status] || 0) + 1;
+  });
+
+  return facilityBookingStatuses.map((status) => ({
+    status,
+    count: toNumber(sourceCounts[status] ?? itemCounts[status]),
+  }));
+});
+
+const facilityBookingTotal = computed(() =>
+  facilityBookingBreakdown.value.reduce((total, item) => total + item.count, 0)
 );
 
+function openFacilityBookingDialog() {
+  facilityBookingDialog.value = true;
+}
+
+function normalizeFacilityBookingStatus(status: unknown) {
+  const value = String(status || "").trim();
+  return value === "For Refund" ? "With Refund" : value;
+}
+
 function getPropertyKpiCards() {
   const workOrderMetric = getMetric([
     "openWorkOrder",
@@ -1798,53 +2368,13 @@ function getPropertyKpiCards() {
       percentage: toNumber(facilityMetric?.percentage),
       meta: getMetricMeta(facilityMetric),
       raw: facilityMetric,
-      filter: {
-        model: facilityType.value,
-        options: facilityOptions.value,
-        set: (v: string) => {
-          facilityType.value = v;
-          filterMenus.facilityBookings = false;
-        },
-      },
+      filter: undefined,
     },
   ];
 }
 
 function computeFacilityMetric(): DashboardMetric {
-  const metric = getMetric(["facilityBooking", "facilityBookings", "bookings"]);
-  const selected = facilityType.value;
-  if (selected === "All") return metric;
-  const items = facilityBookingItems.value.filter((item: any) => {
-    const val = String(
-      item.facilityName ||
-      item.facility?.name ||
-      item.facilityInfo?.name ||
-      item.name ||
-      ""
-    ).toLowerCase();
-    return val === selected.toLowerCase();
-  });
-  const ongoing = items.filter((i: any) => {
-    const s = String(i.status || "").toLowerCase();
-    return (
-      s.includes("ongoing") ||
-      s.includes("approved") ||
-      s.includes("in-progress")
-    );
-  }).length;
-  const waitingApproval = items.filter((i: any) => {
-    const s = String(i.status || "").toLowerCase();
-    return (
-      s.includes("pending") || s.includes("review") || s.includes("approval")
-    );
-  }).length;
-
-  return {
-    ...metric,
-    count: ongoing + waitingApproval,
-    ongoing,
-    waitingApproval,
-  };
+  return getMetric(["facilityBooking", "facilityBookings", "bookings"]);
 }
 
 function getSecurityKpiCards() {
@@ -1967,21 +2497,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 ───────────────────────────────────────────────────────────
@@ -1989,7 +2519,14 @@ const primaryListConfig = computed(() =>
 const activityTitle = computed(() => {
   if (selectedRange.value === "Today") return "Today's Activity";
   if (selectedRange.value === "This Month") return "This Month Activity";
-  return "This Week Activity";
+  return `This Week Activity (${currentWeekRangeLabel.value})`;
+});
+
+const currentWeekRangeLabel = computed(() => {
+  const today = new Date();
+  const start = getMondayWeekStart(today);
+  const end = addDays(start, 6);
+  return `Week ${getWeekOfMonth(today)}: ${formatWeekRange(start, end)}`;
 });
 
 const activityChart = computed(() =>
@@ -2026,6 +2563,50 @@ const hasChartData = computed(
 );
 const chartTicks = [28, 66.4, 104.8, 143.2, 181.6, 220];
 
+function getMondayWeekStart(date: Date) {
+  const start = new Date(date);
+  start.setHours(0, 0, 0, 0);
+  start.setDate(start.getDate() - ((start.getDay() + 6) % 7));
+  return start;
+}
+
+function addDays(date: Date, days: number) {
+  const next = new Date(date);
+  next.setDate(next.getDate() + days);
+  return next;
+}
+
+function getWeekOfMonth(date: Date) {
+  const monthStart = new Date(date.getFullYear(), date.getMonth(), 1);
+  const firstWeekStart = getMondayWeekStart(monthStart);
+  const currentWeekStart = getMondayWeekStart(date);
+  const diffMs = currentWeekStart.getTime() - firstWeekStart.getTime();
+  return Math.floor(diffMs / (7 * 24 * 60 * 60 * 1000)) + 1;
+}
+
+function formatWeekRange(start: Date, end: Date) {
+  const sameMonth = start.getMonth() === end.getMonth();
+  const sameYear = start.getFullYear() === end.getFullYear();
+  const monthDayFormatter = new Intl.DateTimeFormat("en-US", {
+    month: "long",
+    day: "numeric",
+  });
+  const dayFormatter = new Intl.DateTimeFormat("en-US", { day: "numeric" });
+  const fullFormatter = new Intl.DateTimeFormat("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+  });
+
+  if (sameMonth && sameYear) {
+    return `${monthDayFormatter.format(start)} - ${dayFormatter.format(
+      end
+    )}, ${end.getFullYear()}`;
+  }
+
+  return `${fullFormatter.format(start)} - ${fullFormatter.format(end)}`;
+}
+
 const chartYLabels = computed(() => {
   const max = chartMax.value;
   return [
@@ -2362,7 +2943,8 @@ 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")
@@ -2389,9 +2971,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
       ),
     };
   }
@@ -2487,8 +3069,9 @@ 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") ||
@@ -2580,10 +3163,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,
@@ -2934,8 +3517,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}`;
 
@@ -3017,10 +3600,11 @@ 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>
           `;
         });
@@ -3066,8 +3650,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 {
@@ -3165,8 +3749,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 {
@@ -3180,7 +3764,8 @@ 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(
@@ -3204,8 +3789,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 {
@@ -3235,8 +3820,9 @@ 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 {
@@ -3567,7 +4153,7 @@ function formatDashboardTime(value?: string) {
   margin-top: 14px;
 }
 
-.dashboard-section-grid>.v-col {
+.dashboard-section-grid > .v-col {
   display: flex;
 }
 
@@ -3619,6 +4205,54 @@ function formatDashboardTime(value?: string) {
   white-space: nowrap;
 }
 
+.facility-booking-modal {
+  border: 1px solid #d9e0e7;
+  box-shadow: 0 18px 48px rgba(15, 35, 54, 0.18);
+}
+
+.facility-booking-summary-list {
+  display: grid;
+  gap: 24px;
+}
+
+.facility-booking-summary-row {
+  align-items: center;
+  display: grid;
+  gap: 16px;
+  grid-template-columns: minmax(112px, max-content) minmax(40px, 1fr) minmax(
+      32px,
+      max-content
+    );
+  min-height: 22px;
+}
+
+.facility-booking-summary-label {
+  color: #1565c0;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1.25;
+}
+
+.facility-booking-summary-dots {
+  border-bottom: 2px dotted #9aa3ad;
+  display: block;
+  height: 1px;
+  min-width: 32px;
+}
+
+.facility-booking-summary-value,
+.facility-booking-total-label {
+  color: #0b2f47;
+  font-size: 16px;
+  font-weight: 800;
+  line-height: 1.25;
+}
+
+.facility-booking-total-row {
+  grid-template-columns: minmax(112px, max-content) minmax(32px, max-content);
+  justify-content: space-between;
+}
+
 .figma-panel-body {
   flex: 1;
   margin-top: 20px;
@@ -3748,7 +4382,8 @@ function formatDashboardTime(value?: string) {
   padding: 6px 2px 0;
 }
 
-.figma-status-row {}
+.figma-status-row {
+}
 
 .figma-status-label {
   align-items: center;