@7365admin1/layer-common 3.0.7 → 3.0.9

package/components/DashboardMain.vue

@@ -1,5 +1,6 @@
 <template>
-  <section class="pb-8">
+  <section 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"
     >
@@ -14,8 +15,8 @@
       </div>
 
       <div
-        class="d-flex flex-wrap align-center justify-md-end ga-3"
         v-if="showHeaderActions"
+        class="d-flex flex-wrap align-center justify-md-end ga-3"
       >
         <v-btn
           variant="outlined"
@@ -53,6 +54,7 @@
           divided
           variant="outlined"
           class="bg-white"
+          style="border-radius: 8px; border-color: #d9e1e8"
         >
           <v-btn
             v-for="range in rangeOptions"
@@ -62,8 +64,8 @@
             size="small"
             :style="
               selectedRange === range.value
-                ? { backgroundColor: '#0b2f47', color: '#ffffff' }
-                : {}
+                ? { backgroundColor: '#e2e8f0', color: '#0b2f47', fontWeight: '600' }
+                : { backgroundColor: 'transparent', color: '#64748b' }
             "
           >
             {{ range.label }}
@@ -79,6 +81,7 @@
       class="mb-4"
     />
 
+    <!-- ── KPI Cards ───────────────────────────────────────────────────────── -->
     <v-row dense class="mb-1 align-stretch">
       <v-col
         v-for="card in visibleKpiCards"
@@ -86,6 +89,7 @@
         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">
@@ -104,9 +108,10 @@
                   v-bind="menuProps"
                   variant="outlined"
                   density="compact"
-                  class="text-none text-caption"
+                  class="text-none text-caption px-2"
                   append-icon="mdi-chevron-down"
-                  size="x-small"
+                  height="26"
+                  rounded="pill"
                 >
                   {{ card.filter.model }}
                 </v-btn>
@@ -122,9 +127,7 @@
                 >
                   <template #prepend>
                     <v-icon
-                      :icon="
-                        card.filter.model === option ? 'mdi-check' : 'mdi-blank'
-                      "
+                      :icon="card.filter.model === option ? 'mdi-check' : 'mdi-blank'"
                       size="16"
                     />
                   </template>
@@ -140,9 +143,7 @@
               {{ card.title }}
             </p>
             <template
-              v-if="
-                card.key === 'supplyAlert' && Array.isArray(card.raw?.items)
-              "
+              v-if="card.key === 'supplyAlert' && Array.isArray(card.raw?.items)"
             >
               <div class="d-flex flex-column ga-2 mt-2">
                 <div
@@ -157,10 +158,9 @@
             </template>
             <template v-else>
               <div class="d-flex align-center mb-3" style="min-height: 31px">
-                <span
-                  class="text-h5 font-weight-black text-blue-grey-darken-4"
-                  >{{ card.value }}</span
-                >
+                <span class="text-h5 font-weight-black text-blue-grey-darken-4">
+                  {{ card.value }}
+                </span>
               </div>
               <div class="d-flex align-center flex-wrap ga-2">
                 <span v-if="card.meta" class="text-caption text-blue-grey">{{
@@ -190,6 +190,7 @@
       </v-col>
     </v-row>
 
+    <!-- ── Activity Chart (all modes) ────────────────────────────────────── -->
     <v-card
       v-if="isWidgetVisible('activity')"
       flat
@@ -283,12 +284,7 @@
           >
             <span
               class="rounded-circle"
-              style="
-                width: 12px;
-                height: 12px;
-                display: inline-block;
-                background-color: #ff9b9b;
-              "
+              style="width: 12px; height: 12px; display: inline-block; background-color: #ff9b9b"
             />
             {{ primaryLegendLabel }}
           </span>
@@ -297,12 +293,7 @@
           >
             <span
               class="rounded-circle"
-              style="
-                width: 12px;
-                height: 12px;
-                display: inline-block;
-                background-color: #e53935;
-              "
+              style="width: 12px; height: 12px; display: inline-block; background-color: #e53935"
             />
             {{ secondaryLegendLabel }}
           </span>
@@ -312,7 +303,8 @@
       <DashboardEmptyState v-else />
     </v-card>
 
-    <v-row dense class="mt-3 align-stretch">
+    <!-- ── 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"
@@ -342,21 +334,14 @@
                   </div>
                   <div class="text-caption text-blue-grey mt-1 text-truncate">
                     {{ item.subtitle
-                    }}<template v-if="item.subtitle && item.time">
-                      &bull; </template
+                    }}<template v-if="item.subtitle && item.time"> &bull; </template
                     >{{ item.time }}
                   </div>
                 </div>
                 <div
                   class="d-flex align-center ga-2 text-caption text-blue-grey"
                 >
-                  <v-avatar
-                    size="30"
-                    color="blue-grey-lighten-4"
-                    class="text-caption font-weight-bold text-blue-grey-darken-2"
-                  >
-                    {{ getInitials(item.person) }}
-                  </v-avatar>
+                  <AvatarMain :name="item.person" :size="30" />
                   <span class="text-truncate" style="max-width: 100px">{{
                     item.person
                   }}</span>
@@ -394,7 +379,7 @@
         <DashboardPanel
           title="Staff's Total Attendance"
           action-label="View All"
-          @action="goToDashboardRoute(staffStatusRoute)"
+          @action="goToDashboardRoute('attendance')"
         >
           <div v-if="staffStatusItems.length" class="d-flex flex-column ga-3">
             <v-card
@@ -405,14 +390,8 @@
               rounded="lg"
               class="pa-3"
             >
-              <div class="d-flex align-center ga-3">
-                <v-avatar
-                  size="34"
-                  color="blue-grey-lighten-4"
-                  class="text-caption font-weight-bold text-blue-grey-darken-2 flex-shrink-0"
-                >
-                  {{ getInitials(item.name) }}
-                </v-avatar>
+              <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"
@@ -445,65 +424,445 @@
           action-label="View All"
           @action="goToDashboardRoute('feedbacks')"
         >
-          <div v-if="feedbackItems.length" class="d-flex flex-column ga-3">
-            <v-card
+          <div v-if="feedbackItems.length" class="figma-list mt-2">
+            <div
               v-for="item in feedbackItems"
               :key="item.id"
-              flat
-              border
-              rounded="lg"
-              class="pa-3"
+              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 class="d-flex align-center flex-wrap ga-3">
-                <div class="flex-grow-1" style="min-width: 0">
+              <div style="flex: 1; min-width: 140px">
+                <strong
+                  style="display: block; font-size: 15px; font-weight: 700; color: #0b2f47; margin-bottom: 4px"
+                  >{{ item.title }}</strong
+                >
+                <span style="font-size: 13px; color: #94a3b8">{{ item.subtitle }}</span>
+              </div>
+
+              <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>
+              </div>
+
+              <div style="flex: 1; display: flex; justify-content: center">
+                <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="border-color: #e2e8f0; border-radius: 8px; padding: 0 16px; height: 32px"
+                  @click="goToListItem(item, 'feedbacks')"
+                  >View</v-btn
+                >
+              </div>
+            </div>
+          </div>
+          <DashboardEmptyState v-else />
+        </DashboardPanel>
+      </v-col>
+    </v-row>
+
+    <!-- ── Property Management mode panels ───────────────────────────────── -->
+    <v-row v-if="isPropertyMode" class="dashboard-section-grid" dense>
+      <v-col v-if="isWidgetVisible('upcomingEvents')" cols="12" lg="6">
+        <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')"
+            >
+              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 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'))"
+                >
+                  {{ item.actionLabel || "View" }}
+                </button>
+              </div>
+            </div>
+            <DashboardEmptyState v-else />
+          </div>
+        </div>
+      </v-col>
+
+      <v-col v-if="isWidgetVisible('todayReminders')" cols="12" lg="6">
+        <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')"
+            >
+              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)}`,
+                  ]"
+                >
+                  <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'))"
+                >
+                  {{ item.actionLabel || "View" }}
+                </button>
+              </div>
+            </div>
+            <DashboardEmptyState v-else />
+          </div>
+        </div>
+      </v-col>
+
+      <v-col v-if="isWidgetVisible('todayAttentions')" cols="12" lg="6">
+        <div class="dashboard-card dashboard-panel figma-panel">
+          <div class="figma-panel-header">
+            <h2>Today's Attentions</h2>
+            <button
+              class="figma-panel-action"
+              type="button"
+              @click="goToDashboardRoute('incident-reports')"
+            >
+              View All
+            </button>
+          </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" />
+                </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('incident-reports'))"
+                >
+                  {{ item.actionLabel || "Review" }}
+                </button>
+              </div>
+            </div>
+            <DashboardEmptyState v-else />
+          </div>
+        </div>
+      </v-col>
+
+      <v-col v-if="isWidgetVisible('workOrderStatus')" cols="12" lg="6">
+        <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')"
+            >
+              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 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)"
+                  />
+                </div>
+              </div>
+            </div>
+            <DashboardEmptyState v-else />
+          </div>
+        </div>
+      </v-col>
+
+      <!-- Property feedbacks -->
+      <v-col v-if="isWidgetVisible('feedbacks')" cols="12">
+        <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 class="feedback-summary">
+                <strong>{{ item.title }}</strong>
+                <p>{{ item.subtitle }}</p>
+              </div>
+
+              <div class="feedback-person">
+                <span class="feedback-avatar">{{ getInitials(item.person) }}</span>
+                <span>{{ item.person }}</span>
+              </div>
+
+              <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')"
+              >
+                View
+              </button>
+            </div>
+          </div>
+          <DashboardEmptyState v-else />
+        </DashboardPanel>
+      </v-col>
+    </v-row>
+
+    <!-- ── Security mode panels ───────────────────────────────────────────── -->
+    <v-row v-if="isSecurityMode" class="dashboard-section-grid" dense>
+      <v-col v-if="isWidgetVisible('activePatrol')" cols="12" lg="6">
+        <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')"
+            >
+              View All
+            </button>
+          </div>
+          <div class="figma-panel-body">
+            <div
+              v-if="activePatrolItems.length"
+              class="figma-list mt-2"
+            >
+              <div
+                v-for="item in activePatrolItems"
+                :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="display: block; font-size: 15px; font-weight: 700; color: #0b2f47; margin-bottom: 4px"
+                    >{{ item.title || item.name }}</strong
+                  >
+                  <span style="font-size: 13px; color: #94a3b8">{{
+                    item.subtitle || item.location || ""
+                  }}</span>
+                </div>
+
+                <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>
+                </div>
+
+                <div style="flex: 1; display: flex; justify-content: center">
                   <div
-                    class="text-body-2 font-weight-bold text-blue-grey-darken-4 text-truncate"
+                    :style="getPatrolStatusStyle(item.status)"
+                    style="padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 500; text-transform: capitalize"
                   >
-                    {{ item.title }}
+                    {{ item.status }}
                   </div>
-                  <div class="text-caption text-blue-grey mt-1 text-truncate">
-                    {{ item.subtitle }}
+                </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="border-color: #e2e8f0; border-radius: 8px; padding: 0 16px; height: 32px"
+                    @click="goToDashboardRoute('virtual-patrol')"
+                    >View</v-btn
+                  >
+                </div>
+              </div>
+            </div>
+            <DashboardEmptyState v-else />
+          </div>
+        </div>
+      </v-col>
+
+      <v-col v-if="isWidgetVisible('staffStatus')" cols="12" lg="6">
+        <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')"
+            >
+              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="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"
+                  />
+                  <div>
+                    <strong
+                      style="display: block; font-size: 15px; font-weight: 700; color: #0b2f47; margin-bottom: 4px"
+                      >{{ item.userName || item.personName || "Unassigned" }}</strong
+                    >
+                    <span style="font-size: 13px; color: #94a3b8">{{
+                      item.role || item.designation || "Officer"
+                    }}</span>
                   </div>
                 </div>
-                <div
-                  class="d-flex align-center ga-2 text-caption text-blue-grey"
-                >
-                  <v-avatar
-                    size="30"
-                    color="blue-grey-lighten-4"
-                    class="text-caption font-weight-bold text-blue-grey-darken-2"
+
+                <div style="flex: 0 0 auto">
+                  <div
+                    :style="getStaffStatusPillStyle(item.status)"
+                    style="padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 500"
                   >
-                    {{ getInitials(item.person) }}
-                  </v-avatar>
-                  <span class="text-truncate" style="max-width: 100px">{{
-                    item.person
-                  }}</span>
+                    {{ item.status || "On duty" }}
+                  </div>
                 </div>
-                <v-chip
-                  size="small"
-                  :color="getStatusTone(item.status)"
-                  variant="tonal"
-                  label
+              </div>
+            </div>
+            <DashboardEmptyState v-else />
+          </div>
+        </div>
+      </v-col>
+
+      <!-- Security feedbacks -->
+      <v-col v-if="isWidgetVisible('feedbacks')" cols="12">
+        <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="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="display: block; font-size: 15px; font-weight: 700; color: #0b2f47; margin-bottom: 4px"
+                  >{{ item.title }}</strong
                 >
-                  {{ item.status }}
-                </v-chip>
+                <span style="font-size: 13px; color: #94a3b8">{{ item.subtitle }}</span>
+              </div>
+
+              <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>
+              </div>
+
+              <div style="flex: 1; display: flex; justify-content: center">
+                <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"
-                  color="primary"
+                  class="text-none font-weight-medium"
                   size="small"
-                  class="text-none font-weight-bold"
+                  color="#3b82f6"
+                  style="border-color: #e2e8f0; border-radius: 8px; padding: 0 16px; height: 32px"
                   @click="goToListItem(item, 'feedbacks')"
+                  >View</v-btn
                 >
-                  View
-                </v-btn>
               </div>
-            </v-card>
+            </div>
           </div>
           <DashboardEmptyState v-else />
         </DashboardPanel>
       </v-col>
     </v-row>
 
+    <!-- ── Customize Dialog ───────────────────────────────────────────────── -->
     <v-dialog v-model="customizeDialog" max-width="720" persistent scrollable>
       <v-card rounded="lg">
         <v-card-title
@@ -616,6 +975,8 @@
 </template>
 
 <script setup lang="ts">
+// ─── Types ────────────────────────────────────────────────────────────────────
+
 type DashboardMetric = {
   count?: number;
   percentage?: number;
@@ -624,6 +985,10 @@ type DashboardMetric = {
   pending?: number;
   highSeverity?: number;
   currentlyOnSite?: number;
+  ongoing?: number;
+  waitingApproval?: number;
+  missed?: number;
+  missedCheckpoints?: number;
   lowStock?: number;
   outOfStock?: number;
   completed?: number;
@@ -638,7 +1003,8 @@ type DashboardListItem = {
   time?: string;
   icon?: string;
   tone?: string;
-  raw?: Record<string, any>;
+  color?: string;
+  actionLabel?: string;
 };
 
 type TaskItem = {
@@ -669,132 +1035,49 @@ type FeedbackItem = {
   raw?: Record<string, any>;
 };
 
+// ─── Props ────────────────────────────────────────────────────────────────────
+
 const props = defineProps({
-  orgId: {
-    type: String,
-    default: "",
-  },
-  site: {
-    type: String,
-    default: "",
-  },
-  serviceType: {
-    type: String,
-    default: "",
-  },
+  orgId: { type: String, default: "" },
+  site: { type: String, default: "" },
+  serviceType: { type: String, default: "" },
   dashboardData: {
     type: Object as () => Record<string, any>,
     default: () => ({}),
   },
-  loading: {
-    type: Boolean,
-    default: false,
-  },
+  loading: { type: Boolean, default: false },
   cardPeriods: {
     type: Object as () => Record<string, TDashboardValues>,
     default: () => ({}),
   },
-  currentSiteName: {
-    type: String,
-    default: "",
-  },
+  currentSiteName: { type: String, default: "" },
   cardValues: {
     type: Array as () => TDashboardCardValue[],
     default: () => [],
   },
-  title: {
-    type: String,
-    default: "",
-  },
-  extraWidgetKeys: {
-    type: Array as () => string[],
-    default: () => [],
-  },
-  showHeaderActions: {
-    type: Boolean,
-    default: true,
-  },
+  title: { type: String, default: "" },
+  extraWidgetKeys: { type: Array as () => string[], default: () => [] },
+  showHeaderActions: { type: Boolean, default: true },
 });
 
-const defaultCardValues: TDashboardCardValue[] = [
-  {
-    key: "openWorkOrder",
-    periodKey: "period",
-    title: "Open Work Order",
-    icon: "mdi-briefcase",
-    color: "#0b2f47",
-  },
-  {
-    key: "taskCompleted",
-    periodKey: "period",
-    title: "Task Completed",
-    icon: "mdi-clipboard-check-outline",
-    color: "#f4a340",
-  },
-  {
-    key: "supplyAlert",
-    periodKey: "period",
-    title: "Supply Alert",
-    icon: "mdi-alert",
-    color: "#d32f2f",
-  },
-];
-
-const landscapeCardValues: TDashboardCardValue[] = [
-  {
-    key: "openWorkOrder",
-    periodKey: "period",
-    title: "Open Work Order",
-    icon: "mdi-briefcase",
-    color: "#0b2f47",
-  },
-  {
-    key: "taskCompleted",
-    periodKey: "period",
-    title: "Task Completed",
-    icon: "mdi-clipboard-check-outline",
-    color: "#f4a340",
-  },
-  {
-    key: "supplyAlert",
-    periodKey: "period",
-    title: "Supply Alert",
-    icon: "mdi-alert",
-    color: "#d32f2f",
-  },
-];
+const emit = defineEmits<{
+  updatePeriod: [payload: { key: string; period: string }];
+}>();
 
-const defaultExtraWidgetKeys = [
-  "activity",
-  "taskSchedule",
-  "staffStatus",
-  "feedbacks",
-  "recentActivity",
-];
+// ─── Mode Detection ───────────────────────────────────────────────────────────
 
-const resolvedCardValues = computed(() => {
-  if (props.cardValues && props.cardValues.length > 0) return props.cardValues;
-  if (props.serviceType === "landscaping_services") return landscapeCardValues;
-  if (props.serviceType) return defaultCardValues;
-  return [];
-});
+const isPropertyMode = computed(
+  () => props.serviceType === "property_management_agency"
+);
+const isSecurityMode = computed(() => props.serviceType === "security_agency");
+const isHygieneMode = computed(
+  () => !isPropertyMode.value && !isSecurityMode.value
+);
 
-const resolvedExtraWidgetKeys = computed(() => {
-  if (props.extraWidgetKeys && props.extraWidgetKeys.length > 0)
-    return props.extraWidgetKeys;
-  if (props.serviceType) return defaultExtraWidgetKeys;
-  return [];
-});
-
-const periodValue: Record<string, TDashboardValues> = {
-  Today: "today",
-  "This Week": "thisWeek",
-  "This Month": "thisMonth",
-};
-
-const currentPeriod = ref<TDashboardValues>("today");
+// ─── Composables ──────────────────────────────────────────────────────────────
 
 const {
+  getDashboard,
   getDashboardHygiene,
   getDashboardHygieneWeeklyActivity,
   getDashboardHygieneTaskSchedule,
@@ -802,30 +1085,99 @@ const {
   getDashboardHygieneFeedbacks,
 } = useDashboard();
 
+// ─── State ────────────────────────────────────────────────────────────────────
+
+const router = useRouter();
+const runtimeConfig = useRuntimeConfig();
+const customizeDialog = ref(false);
+const widgetSearch = ref("");
+const selectedRange = ref("Today");
+const visitorType = ref("All");
+const facilityType = ref("All");
+const visibleWidgetKeys = ref<string[]>([]);
+const draftVisibleWidgetKeys = ref<string[]>([]);
+const filterMenus = reactive<Record<string, boolean>>({});
+const snackbar = reactive({ visible: false, text: "" });
+const chartContainerRef = ref<HTMLElement | null>(null);
+const chartWidth = ref(920);
+let resizeObserver: ResizeObserver | null = null;
+
+const periodValue: Record<string, TDashboardValues> = {
+  Today: "today",
+  "This Week": "thisWeek",
+  "This Month": "thisMonth",
+};
+const currentPeriod = ref<TDashboardValues>("today");
+
+const rangeOptions = [
+  { label: "Today", value: "Today" },
+  { label: "Week", value: "This Week" },
+  { label: "Month", value: "This Month" },
+];
+
+// ─── Visitor / Facility filter mappings ───────────────────────────────────────
+
+const visitorTypeApiMap: Record<string, string> = {
+  All: "",
+  "Drive-In": "guest",
+  Contractor: "contractor",
+  "Walk-In": "walk-in",
+  Delivery: "delivery",
+  "Pick-up": "pick-up",
+  "Drop-Off": "drop-off",
+};
+
+const currentVisitorTypeParam = computed(
+  () => visitorTypeApiMap[visitorType.value] ?? ""
+);
+
+// ─── Data Fetching ────────────────────────────────────────────────────────────
+
+// Hygiene / M&E / Landscape / Pest / Pool main metrics
 const { data: getDashboardReq, pending: loadingMetrics } =
   await useLazyAsyncData(
     `get-dashboard-${props.site}-${props.serviceType}`,
     () =>
-      props.serviceType
-        ? getDashboardHygiene(
+      props.serviceType && isHygieneMode.value
+        ? getDashboardHygiene(props.site, currentPeriod.value, props.serviceType as TServiceType)
+        : Promise.resolve(null),
+    {
+      watch: [() => props.site, currentPeriod, () => props.serviceType],
+    }
+  );
+
+// Property / Security main metrics (uses generic getDashboard with visitor type)
+const { data: getDashboardAltReq, pending: loadingAltMetrics } =
+  await useLazyAsyncData(
+    `get-dashboard-alt-${props.site}-${props.serviceType}`,
+    () =>
+      props.site && (isPropertyMode.value || isSecurityMode.value)
+        ? getDashboard(
             props.site,
+            props.serviceType as TServiceType,
             currentPeriod.value,
-            props.serviceType
+            currentVisitorTypeParam.value ? { type: currentVisitorTypeParam.value } : {}
           )
         : Promise.resolve(null),
     {
-      watch: [() => props.site, currentPeriod, () => props.serviceType],
+      watch: [
+        () => props.site,
+        () => props.serviceType,
+        currentPeriod,
+        currentVisitorTypeParam,
+      ],
     }
   );
 
+// Weekly activity (hygiene mode only)
 const { data: weeklyActivityReq, pending: loadingWeeklyActivity } =
   await useLazyAsyncData(
     `get-dashboard-weekly-activity-${props.site}-${props.serviceType}`,
     () =>
-      props.serviceType
+      props.serviceType && isHygieneMode.value
         ? getDashboardHygieneWeeklyActivity(
             props.site,
-            props.serviceType,
+            props.serviceType as TServiceType,
             currentPeriod.value
           )
         : Promise.resolve(null),
@@ -834,44 +1186,62 @@ const { data: weeklyActivityReq, pending: loadingWeeklyActivity } =
     }
   );
 
+// Task schedule (hygiene mode only)
 const { data: taskScheduleReq, pending: loadingTaskSchedule } =
   await useLazyAsyncData(
     `get-dashboard-task-schedule-${props.site}-${props.serviceType}`,
     () =>
-      props.serviceType
-        ? getDashboardHygieneTaskSchedule(props.site, props.serviceType)
+      props.serviceType && isHygieneMode.value
+        ? getDashboardHygieneTaskSchedule(
+            props.site,
+            props.serviceType as TServiceType,
+            currentPeriod.value
+          )
         : Promise.resolve(null),
     {
-      watch: [() => props.site, () => props.serviceType],
+      watch: [() => props.site, () => props.serviceType, currentPeriod],
     }
   );
 
+// Attendance (hygiene + security modes)
 const { data: attendanceReq, pending: loadingAttendance } =
   await useLazyAsyncData(
     `get-dashboard-attendance-${props.site}-${props.serviceType}`,
     () =>
-      props.serviceType
-        ? getDashboardHygieneAttendance(props.site, props.serviceType)
+      props.serviceType && !isPropertyMode.value
+        ? getDashboardHygieneAttendance(
+            props.site,
+            props.serviceType as TServiceType,
+            currentPeriod.value
+          )
         : Promise.resolve(null),
     {
-      watch: [() => props.site, () => props.serviceType],
+      watch: [() => props.site, () => props.serviceType, currentPeriod],
     }
   );
 
+// Feedbacks (all modes)
 const { data: feedbacksReq, pending: loadingFeedbacks } =
   await useLazyAsyncData(
     `get-dashboard-feedbacks-${props.site}-${props.serviceType}`,
     () =>
       props.serviceType
-        ? getDashboardHygieneFeedbacks(props.site, props.serviceType)
+        ? getDashboardHygieneFeedbacks(
+            props.site,
+            props.serviceType as TServiceType,
+            currentPeriod.value
+          )
         : Promise.resolve(null),
     {
-      watch: [() => props.site, () => props.serviceType],
+      watch: [() => props.site, () => props.serviceType, currentPeriod],
     }
   );
 
+// ─── Loading State ────────────────────────────────────────────────────────────
+
 const finalLoading = computed(() => {
-  if (props.serviceType) {
+  if (!props.serviceType) return props.loading;
+  if (isHygieneMode.value) {
     return (
       loadingMetrics.value ||
       loadingWeeklyActivity.value ||
@@ -880,174 +1250,251 @@ const finalLoading = computed(() => {
       loadingFeedbacks.value
     );
   }
-  return props.loading;
+  if (isPropertyMode.value) {
+    return loadingAltMetrics.value || loadingFeedbacks.value;
+  }
+  // security
+  return loadingAltMetrics.value || loadingAttendance.value || loadingFeedbacks.value;
 });
 
-const finalDashboardData = computed(() => {
+// ─── Merged Dashboard Data ────────────────────────────────────────────────────
+
+const finalDashboardData = computed<Record<string, any>>(() => {
   if (!props.serviceType) return props.dashboardData || {};
 
-  const data = getDashboardReq.value ?? {};
-  let weeklyActivity = weeklyActivityReq.value ?? [];
-  const hasNoActivity =
-    !weeklyActivity.length ||
-    weeklyActivity.every(
-      (item: any) =>
-        !item.workOrder &&
-        !item.taskCompleted &&
-        !item.openWorkOrder &&
-        !item.closedWorkOrder
-    );
+  if (isHygieneMode.value) {
+    const data = getDashboardReq.value ?? {};
+    let weeklyActivity = weeklyActivityReq.value ?? [];
+    const hasNoActivity =
+      !weeklyActivity.length ||
+      weeklyActivity.every(
+        (item: any) =>
+          !item.workOrder &&
+          !item.taskCompleted &&
+          !item.openWorkOrder &&
+          !item.closedWorkOrder
+      );
+
+    if (hasNoActivity && currentPeriod.value === "thisWeek") {
+      weeklyActivity = [
+        { day: "Mon", workOrder: 800, taskCompleted: 1400 },
+        { day: "Tue", workOrder: 450, taskCompleted: 900 },
+        { day: "Wed", workOrder: 950, taskCompleted: 1640 },
+        { day: "Thu", workOrder: 2000, taskCompleted: 2100 },
+        { day: "Fri", workOrder: 2000, taskCompleted: 2700 },
+        { day: "Sat", workOrder: 2200, taskCompleted: 3100 },
+        { day: "Sun", workOrder: 2800, taskCompleted: 3200 },
+      ];
+    }
 
-  if (hasNoActivity && currentPeriod.value === "thisWeek") {
-    weeklyActivity = [
-      { day: "Mon", workOrder: 800, taskCompleted: 1400 },
-      { day: "Tue", workOrder: 450, taskCompleted: 900 },
-      { day: "Wed", workOrder: 950, taskCompleted: 1640 },
-      { day: "Thu", workOrder: 2000, taskCompleted: 2100 },
-      { day: "Fri", workOrder: 2000, taskCompleted: 2700 },
-      { day: "Sat", workOrder: 2200, taskCompleted: 3100 },
-      { day: "Sun", workOrder: 2800, taskCompleted: 3200 },
-    ];
+    return {
+      ...data,
+      openWorkOrder: data.openWorkOrder ?? { count: 0, percentage: 0 },
+      supplyAlert: data.supplyAlert ?? { count: 0, percentage: 0 },
+      taskCompleted: data.taskCompleted ?? { count: 0, percentage: 0 },
+      activityChart: {
+        labels: weeklyActivity.map((item: any) => item.day || item.label),
+        workOrders: weeklyActivity.map(
+          (item: any) => item.workOrder ?? item.openWorkOrder
+        ),
+        taskCompleted: weeklyActivity.map(
+          (item: any) => item.taskCompleted ?? item.closedWorkOrder
+        ),
+      },
+      taskScheduleItems: taskScheduleReq.value?.items ?? [],
+      attendanceItems: attendanceReq.value?.items ?? [],
+      feedbackItems: feedbacksReq.value?.items ?? [],
+    };
+  }
+
+  if (isPropertyMode.value) {
+    const data = getDashboardAltReq.value ?? {};
+    return {
+      ...data,
+      feedbackItems: feedbacksReq.value?.items ?? [],
+      openWorkOrder: data.openWorkOrder ?? { count: 0, inProgress: 0, percentage: 0 },
+      openIncidents: data.openIncidents ?? { count: 0, highSeverity: 0, percentage: 0 },
+      visitors: data.visitors ?? { count: 0, currentlyOnSite: 0, percentage: 0 },
+      facilityBooking: data.facilityBooking ?? {
+        count: 0,
+        ongoing: 0,
+        waitingApproval: 0,
+        percentage: 0,
+      },
+    };
   }
 
+  // Security
+  const data = getDashboardAltReq.value ?? {};
   return {
     ...data,
+    feedbackItems: feedbacksReq.value?.items ?? [],
+    attendanceItems: attendanceReq.value?.items ?? [],
     openWorkOrder: data.openWorkOrder ?? {
       count: 0,
+      inProgress: 0,
       percentage: 0,
+      overdue: 0,
     },
-    supplyAlert: data.supplyAlert ?? {
-      count: 0,
-      percentage: 0,
-    },
-    taskCompleted: data.taskCompleted ?? {
+    openIncidents: data.openIncidents ?? {
       count: 0,
+      highSeverity: 0,
       percentage: 0,
     },
-    landscapeSchedule: data.landscapeSchedule ?? {
+    visitors: data.visitors ?? { count: 0, currentlyOnSite: 0, percentage: 0 },
+    patrolCompliance: data.patrolCompliance ?? {
       count: 0,
+      missedCheckpoints: 0,
+      missed: 0,
       percentage: 0,
     },
-    activityChart: {
-      labels: weeklyActivity.map((item: any) => item.day || item.label),
-      workOrders: weeklyActivity.map(
-        (item: any) => item.workOrder ?? item.openWorkOrder
-      ),
-      taskCompleted: weeklyActivity.map(
-        (item: any) => item.taskCompleted ?? item.closedWorkOrder
-      ),
-      openWorkOrder: weeklyActivity.some(
-        (item: any) => item.openWorkOrder !== undefined
-      )
-        ? weeklyActivity.map((item: any) => item.openWorkOrder)
-        : undefined,
-      closedWorkOrder: weeklyActivity.some(
-        (item: any) => item.closedWorkOrder !== undefined
-      )
-        ? weeklyActivity.map((item: any) => item.closedWorkOrder)
-        : undefined,
-    },
-    taskScheduleItems: taskScheduleReq.value?.items ?? [],
-    attendanceItems: attendanceReq.value?.items ?? [],
-    feedbackItems: feedbacksReq.value?.items ?? [],
+    activePatrolItems: data.activePatrolItems ?? [],
   };
 });
 
-const emit = defineEmits<{
-  updatePeriod: [payload: { key: string; period: string }];
-}>();
+// ─── Card Value Configs ───────────────────────────────────────────────────────
 
-const router = useRouter();
-const runtimeConfig = useRuntimeConfig();
-const customizeDialog = ref(false);
-const widgetSearch = ref("");
-const selectedRange = ref("Today");
-const visitorType = ref("All");
-const visibleWidgetKeys = ref<string[]>([]);
-const draftVisibleWidgetKeys = ref<string[]>([]);
-const filterMenus = reactive<Record<string, boolean>>({});
-const snackbar = reactive({
-  visible: false,
-  text: "",
-});
+const defaultCardValues: TDashboardCardValue[] = [
+  {
+    key: "openWorkOrder",
+    periodKey: "period",
+    title: "Open Work Order",
+    icon: "mdi-briefcase",
+    color: "#0b2f47",
+  },
+  {
+    key: "taskCompleted",
+    periodKey: "period",
+    title: "Task Completed",
+    icon: "mdi-clipboard-check-outline",
+    color: "#f4a340",
+  },
+  {
+    key: "supplyAlert",
+    periodKey: "period",
+    title: "Supply Alert",
+    icon: "mdi-alert",
+    color: "#d32f2f",
+  },
+];
 
-const chartContainerRef = ref<HTMLElement | null>(null);
-const chartWidth = ref(920);
-let resizeObserver: ResizeObserver | null = null;
+const propertyCardValues: TDashboardCardValue[] = [
+  {
+    key: "workOrders",
+    periodKey: "period",
+    title: "Open Work Order",
+    icon: "mdi-briefcase",
+    color: "#1d5f99",
+  },
+  {
+    key: "incidents",
+    periodKey: "period",
+    title: "Open Incidents",
+    icon: "mdi-alert",
+    color: "#b73535",
+  },
+  {
+    key: "visitors",
+    periodKey: "period",
+    title: "Visitors",
+    icon: "mdi-account-group",
+    color: "#d28722",
+  },
+  {
+    key: "facilityBookings",
+    periodKey: "period",
+    title: "Facility Booking",
+    icon: "mdi-domain",
+    color: "#23824f",
+  },
+];
 
-watch(chartContainerRef, (el) => {
-  if (resizeObserver) {
-    resizeObserver.disconnect();
-  }
-  if (el && window.ResizeObserver) {
-    resizeObserver = new ResizeObserver((entries) => {
-      if (entries[0] && entries[0].contentRect.width > 0) {
-        chartWidth.value = entries[0].contentRect.width;
-      }
-    });
-    resizeObserver.observe(el);
-  }
-});
+const securityCardValues: TDashboardCardValue[] = [
+  {
+    key: "workOrders",
+    periodKey: "period",
+    title: "Open Work Order",
+    icon: "mdi-briefcase",
+    color: "#1d5f99",
+  },
+  {
+    key: "incidents",
+    periodKey: "period",
+    title: "Open Incidents",
+    icon: "mdi-alert",
+    color: "#b73535",
+  },
+  {
+    key: "visitors",
+    periodKey: "period",
+    title: "Visitors",
+    icon: "mdi-account-group",
+    color: "#d28722",
+  },
+  {
+    key: "patrolCompliance",
+    periodKey: "period",
+    title: "Patrol Compliance",
+    icon: "mdi-calculator-variant",
+    color: "#23824f",
+  },
+];
 
-onUnmounted(() => {
-  if (resizeObserver) resizeObserver.disconnect();
+const resolvedCardValues = computed(() => {
+  if (props.cardValues && props.cardValues.length > 0) return props.cardValues;
+  if (isPropertyMode.value) return propertyCardValues;
+  if (isSecurityMode.value) return securityCardValues;
+  return defaultCardValues;
 });
 
-const rangeOptions = [
-  { label: "Today", value: "Today" },
-  { label: "Week", value: "This Week" },
-  { label: "Month", value: "This Month" },
+// ─── Widget Keys by Mode ──────────────────────────────────────────────────────
+
+const defaultExtraWidgetKeys = [
+  "activity",
+  "taskSchedule",
+  "staffStatus",
+  "feedbacks",
+  "recentActivity",
 ];
-const defaultVisitorOptions = [
-  "All",
-  "Drive-In",
-  "Walk-In",
-  "Pick-up",
-  "Drop-Off",
-  "Delivery",
-  "Contractor",
+
+const propertyDefaultWidgetKeys = [
+  "workOrders",
+  "incidents",
+  "visitors",
+  "facilityBookings",
+  "activity",
+  "upcomingEvents",
+  "todayReminders",
+  "todayAttentions",
+  "workOrderStatus",
+  "feedbacks",
 ];
 
-const dashboardTitle = computed(() => {
-  if (props.title) return props.title;
-  const appName = String(
-    runtimeConfig.public.APP_NAME || runtimeConfig.public.APP || ""
-  );
-  return `${getServiceDisplayName(appName)} - Dashboard`;
-});
-const appKey = computed(() =>
-  String(
-    runtimeConfig.public.APP || runtimeConfig.public.APP_NAME || ""
-  ).toLowerCase()
-);
-const isSecurityDashboard = computed(() => appKey.value.includes("security"));
-const primaryListConfig = computed(() =>
-  isSecurityDashboard.value
-    ? {
-        title: "Active Patrol",
-        route: "virtualPatrol",
-        keys: ["activePatrolItems", "patrolItems"],
-      }
-    : {
-        title: "Today's Task Schedule",
-        route: "scheduleTask",
-        keys: [
-          "taskScheduleItems",
-          "scheduleTaskItems",
-          "scheduledTaskItems",
-          "cleaningScheduleItems",
-          "tasks",
-        ],
-      }
-);
-const staffStatusRoute = computed(() =>
-  isSecurityDashboard.value ? "manpower" : "attendance"
-);
+const securityDefaultWidgetKeys = [
+  "workOrders",
+  "incidents",
+  "visitors",
+  "patrolCompliance",
+  "activity",
+  "activePatrol",
+  "staffStatus",
+  "feedbacks",
+];
 
-const defaultVisibleWidgetKeys = computed(() => [
-  ...resolvedCardValues.value.map((card) => card.key),
-  ...resolvedExtraWidgetKeys.value,
-]);
+const defaultVisibleWidgetKeys = computed(() => {
+  if (props.extraWidgetKeys && props.extraWidgetKeys.length > 0) {
+    return [
+      ...resolvedCardValues.value.map((c) => c.key),
+      ...props.extraWidgetKeys,
+    ];
+  }
+  if (isPropertyMode.value) return propertyDefaultWidgetKeys;
+  if (isSecurityMode.value) return securityDefaultWidgetKeys;
+  return [
+    ...resolvedCardValues.value.map((c) => c.key),
+    ...defaultExtraWidgetKeys,
+  ];
+});
 
 watch(
   defaultVisibleWidgetKeys,
@@ -1058,84 +1505,270 @@ watch(
       draftVisibleWidgetKeys.value = nextKeys;
       return;
     }
-
-    visibleWidgetKeys.value = visibleWidgetKeys.value.filter((key) =>
-      nextKeys.includes(key)
+    visibleWidgetKeys.value = visibleWidgetKeys.value.filter((k) =>
+      nextKeys.includes(k)
     );
-    draftVisibleWidgetKeys.value = draftVisibleWidgetKeys.value.filter((key) =>
-      nextKeys.includes(key)
+    draftVisibleWidgetKeys.value = draftVisibleWidgetKeys.value.filter((k) =>
+      nextKeys.includes(k)
     );
   },
   { immediate: true }
 );
 
-watch(selectedRange, (period) => {
-  if (props.serviceType) {
-    const apiPeriod = periodValue[period];
-    if (apiPeriod) currentPeriod.value = apiPeriod;
+// ─── Customize Widgets Config ─────────────────────────────────────────────────
+
+const customizeWidgets = computed(() => {
+  if (isPropertyMode.value) {
+    return [
+      { key: "workOrders", title: "Open Work Orders", description: "Track active work orders, overdue items, and what's in progress." },
+      { key: "incidents", title: "Open Incidents", description: "Monitor reported incidents and flag high severity cases." },
+      { key: "visitors", title: "Visitors", description: "See today's visitor traffic and who is currently on site." },
+      { key: "facilityBookings", title: "Facility Bookings", description: "View booking volume and approvals waiting for action." },
+      { key: "activity", title: "This Week Activity (Line Chart)", description: "Compare incidents and work orders over time." },
+      { key: "upcomingEvents", title: "Upcoming Events", description: "Quick view of scheduled events happening soon." },
+      { key: "todayReminders", title: "Today's Reminder", description: "Your next tasks and time sensitive alerts for today." },
+      { key: "todayAttentions", title: "Today's Attentions", description: "Items that require review overdue, pending, or unacknowledged." },
+      { key: "workOrderStatus", title: "Work Order Status (Progress Bar)", description: "Breakdown of work orders by status." },
+      { key: "feedbacks", title: "Feedbacks", description: "Recent feedback items and current resolution status." },
+    ];
   }
-  emit("updatePeriod", { key: "__all__", period });
+  if (isSecurityMode.value) {
+    return [
+      { key: "workOrders", title: "Open Work Orders", description: "Track active work orders, overdue items, and what's in progress." },
+      { key: "incidents", title: "Open Incidents", description: "Monitor reported incidents and flag high severity cases." },
+      { key: "visitors", title: "Visitors", description: "See today's visitor traffic and who is currently on site." },
+      { key: "patrolCompliance", title: "Patrol Compliance", description: "View missed checkpoints and ongoing patrols." },
+      { key: "activity", title: "This Week Activity (Line Chart)", description: "Compare incidents and work orders over time." },
+      { key: "activePatrol", title: "Active Patrol", description: "Quick view of scheduled active patrol routes happening soon." },
+      { key: "staffStatus", title: "Staff Status", description: "Current attendance and status of staff." },
+      { key: "feedbacks", title: "Feedbacks", description: "Recent feedback and resolution status." },
+    ];
+  }
+  // Hygiene / others
+  return [
+    ...resolvedCardValues.value.map((card) => ({
+      key: card.key,
+      title: card.title,
+      description: `Show ${card.title} metrics for the selected period.`,
+    })),
+    { key: "activity", title: "Activity Chart", description: "Compare activity trends over time." },
+    { key: "taskSchedule", title: primaryListConfig.value.title, description: "Show current tasks and their latest status." },
+    { key: "staffStatus", title: "Staff Total Attendance", description: "See who is on duty, on break, or absent." },
+    { key: "feedbacks", title: "Feedbacks", description: "Show recent feedback and resolution state." },
+    { key: "recentActivity", title: "Recent Activity", description: "Latest updates across the service." },
+  ];
 });
 
-const customizeWidgets = computed(() => [
-  ...resolvedCardValues.value.map((card) => ({
-    key: card.key,
-    title: card.title,
-    description: `Show ${card.title} metrics for the selected period.`,
-  })),
-  {
-    key: "activity",
-    title: "Activity Chart",
-    description: "Compare activity trends over time.",
-  },
-  {
-    key: "taskSchedule",
-    title: primaryListConfig.value.title,
-    description: "Show current tasks and their latest status.",
-  },
-  {
-    key: "staffStatus",
-    title: "Staff Total Attendance",
-    description: "See who is on duty, on break, or absent.",
-  },
-  {
-    key: "feedbacks",
-    title: "Feedbacks",
-    description: "Show recent feedback and resolution state.",
-  },
-  {
-    key: "recentActivity",
-    title: "Recent Activity",
-    description: "Latest updates across the service.",
-  },
-]);
-
 const filteredCustomizeWidgets = computed(() => {
   const search = widgetSearch.value.trim().toLowerCase();
   if (!search) return customizeWidgets.value;
-
   return customizeWidgets.value.filter(
-    (widget) =>
-      widget.title.toLowerCase().includes(search) ||
-      widget.description.toLowerCase().includes(search)
+    (w) =>
+      w.title.toLowerCase().includes(search) ||
+      w.description.toLowerCase().includes(search)
   );
 });
+
+// ─── KPI Metrics ─────────────────────────────────────────────────────────────
+
+const defaultVisitorOptions = [
+  "All", "Drive-In", "Walk-In", "Pick-up", "Drop-Off", "Delivery", "Contractor",
+];
+
 const visitorItems = computed(() =>
   getDashboardArray(["visitorItems", "visitorsList", "visitorTransactionsList"])
 );
 const visitorOptions = computed(() =>
+  buildFilterOptions(defaultVisitorOptions, visitorItems.value, getVisitorFilterValue)
+);
+
+// Property-specific: facility booking metric with client-side filter
+const facilityBookingItems = computed(() =>
+  getDashboardArray([
+    "facilityBookingItems",
+    "facilityBookingsList",
+    "bookingsList",
+  ])
+);
+const defaultFacilityOptions = ["All"];
+const facilityOptions = computed(() =>
   buildFilterOptions(
-    defaultVisitorOptions,
-    visitorItems.value,
-    getVisitorFilterValue
+    defaultFacilityOptions,
+    facilityBookingItems.value,
+    (item: any) =>
+      item.facilityName || item.facility?.name || item.facilityInfo?.name || item.name || ""
   )
 );
 
-const kpiCards = computed(() =>
-  resolvedCardValues.value.map((mapping, index) => {
-    const metric =
-      mapping.key === "visitors" && isSecurityDashboard.value
-        ? getFilteredVisitorMetric()
+function getPropertyKpiCards() {
+  const workOrderMetric = getMetric(["openWorkOrder", "workOrders", "openWorkOrders", "workOrder"]);
+  const incidentMetric = getMetric(["openIncidents", "incidents", "incidentReports"]);
+  const visitorMetric = getMetric(["visitors", "visitorTransactions"]);
+  const facilityMetric = computeFacilityMetric();
+
+  return [
+    {
+      key: "workOrders",
+      title: "Open Work Order",
+      icon: "mdi-briefcase",
+      color: "#1d5f99",
+      tint: "#d7ecff",
+      value: formatNumber(toNumber(workOrderMetric?.count)),
+      percentage: toNumber(workOrderMetric?.percentage),
+      meta: `${toNumber(workOrderMetric?.inProgress)} in progress`,
+      raw: workOrderMetric,
+      filter: undefined,
+    },
+    {
+      key: "incidents",
+      title: "Open Incidents",
+      icon: "mdi-alert",
+      color: "#b73535",
+      tint: "#ffdede",
+      value: formatNumber(toNumber(incidentMetric?.count)),
+      percentage: toNumber(incidentMetric?.percentage),
+      meta: `${toNumber(incidentMetric?.highSeverity)} high severity`,
+      raw: incidentMetric,
+      filter: undefined,
+    },
+    {
+      key: "visitors",
+      title: "Visitors",
+      icon: "mdi-account-group",
+      color: "#d28722",
+      tint: "#ffe4bd",
+      value: formatNumber(toNumber(visitorMetric?.count)),
+      percentage: toNumber(visitorMetric?.percentage),
+      meta: `${toNumber(visitorMetric?.currentlyOnSite)} currently on site`,
+      raw: visitorMetric,
+      filter: {
+        model: visitorType.value,
+        options: visitorOptions.value,
+        set: (v: string) => {
+          visitorType.value = v;
+          filterMenus.visitors = false;
+        },
+      },
+    },
+    {
+      key: "facilityBookings",
+      title: "Facility Booking",
+      icon: "mdi-domain",
+      color: "#23824f",
+      tint: "#c8f3da",
+      value: formatNumber(toNumber(facilityMetric?.count)),
+      percentage: toNumber(facilityMetric?.percentage),
+      meta: `${toNumber(facilityMetric?.ongoing)} ongoing - ${toNumber(facilityMetric?.waitingApproval)} waiting approval`,
+      raw: facilityMetric,
+      filter: {
+        model: facilityType.value,
+        options: facilityOptions.value,
+        set: (v: string) => {
+          facilityType.value = v;
+          filterMenus.facilityBookings = false;
+        },
+      },
+    },
+  ];
+}
+
+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();
+  });
+  return {
+    ...metric,
+    count: items.length,
+    ongoing: items.filter((i: any) => {
+      const s = String(i.status || "").toLowerCase();
+      return s.includes("ongoing") || s.includes("approved") || s.includes("in-progress");
+    }).length,
+    waitingApproval: items.filter((i: any) => {
+      const s = String(i.status || "").toLowerCase();
+      return s.includes("pending") || s.includes("review") || s.includes("approval");
+    }).length,
+  };
+}
+
+function getSecurityKpiCards() {
+  const workOrderMetric = getMetric(["openWorkOrder", "workOrders", "openWorkOrders", "workOrder"]);
+  const incidentMetric = getMetric(["openIncidents", "incidents", "incidentReports"]);
+  const patrolMetric = getMetric(["patrolCompliance", "patrol"]);
+
+  return [
+    {
+      key: "workOrders",
+      title: "Open Work Order",
+      icon: "mdi-briefcase",
+      color: "#1d5f99",
+      tint: "#d7ecff",
+      value: formatNumber(toNumber(workOrderMetric?.count)),
+      percentage: toNumber(workOrderMetric?.percentage),
+      meta: `${toNumber(workOrderMetric?.overdue)} overdue · ${toNumber(workOrderMetric?.inProgress)} in progress`,
+      raw: workOrderMetric,
+      filter: undefined,
+    },
+    {
+      key: "incidents",
+      title: "Open Incidents",
+      icon: "mdi-alert",
+      color: "#b73535",
+      tint: "#ffdede",
+      value: formatNumber(toNumber(incidentMetric?.count)),
+      percentage: toNumber(incidentMetric?.percentage),
+      meta: `${toNumber(incidentMetric?.highSeverity)} high severity`,
+      raw: incidentMetric,
+      filter: undefined,
+    },
+    {
+      key: "visitors",
+      title: "Visitors",
+      icon: "mdi-account-group",
+      color: "#d28722",
+      tint: "#ffe4bd",
+      value: formatNumber(toNumber(getFilteredVisitorMetric()?.count)),
+      percentage: toNumber(getFilteredVisitorMetric()?.percentage),
+      meta: `${toNumber(getFilteredVisitorMetric()?.currentlyOnSite)} currently on site`,
+      raw: getFilteredVisitorMetric(),
+      filter: {
+        model: visitorType.value,
+        options: visitorOptions.value,
+        set: (v: string) => {
+          visitorType.value = v;
+          filterMenus.visitors = false;
+        },
+      },
+    },
+    {
+      key: "patrolCompliance",
+      title: "Patrol Compliance",
+      icon: "mdi-calculator-variant",
+      color: "#23824f",
+      tint: "#c8f3da",
+      value: `${toNumber(patrolMetric?.count)}%`,
+      percentage: toNumber(patrolMetric?.percentage),
+      meta: `${toNumber(patrolMetric?.missed ?? patrolMetric?.missedCheckpoints)} checkpoint missed · ${toNumber(patrolMetric?.ongoing)} ongoing`,
+      raw: patrolMetric,
+      filter: undefined,
+    },
+  ];
+}
+
+const kpiCards = computed(() => {
+  if (isPropertyMode.value) return getPropertyKpiCards();
+  if (isSecurityMode.value) return getSecurityKpiCards();
+
+  // Hygiene / others — use generic resolvedCardValues
+  return resolvedCardValues.value.map((mapping, index) => {
+    const metric =
+      mapping.key === "visitors" && isSecurityMode.value
+        ? getFilteredVisitorMetric()
         : getMetric([mapping.key]);
     const value = getMetricValue(metric, mapping.key);
 
@@ -1149,25 +1782,49 @@ const kpiCards = computed(() =>
       percentage: toNumber(metric.percentage),
       meta: getMetricMeta(metric),
       raw: metric,
-      filter:
-        mapping.key === "visitors" && isSecurityDashboard.value
-          ? {
-              model: visitorType.value,
-              options: visitorOptions.value,
-              set: (option: string) => {
-                visitorType.value = option;
-                filterMenus.visitors = false;
-              },
-            }
-          : undefined,
+      filter: undefined as any,
     };
-  })
-);
+  });
+});
 
 const visibleKpiCards = computed(() =>
   kpiCards.value.filter((card) => isWidgetVisible(card.key))
 );
 
+// ─── Dashboard Title ──────────────────────────────────────────────────────────
+
+const dashboardTitle = computed(() => {
+  if (props.title) return props.title;
+  const appName = String(
+    runtimeConfig.public.APP_NAME || runtimeConfig.public.APP || ""
+  );
+  return `${getServiceDisplayName(props.serviceType || appName)} - Dashboard`;
+});
+
+// ─── Primary list / staff config ─────────────────────────────────────────────
+
+const primaryListConfig = computed(() =>
+  isSecurityMode.value
+    ? {
+        title: "Active Patrol",
+        route: "virtualPatrol",
+        keys: ["activePatrolItems", "patrolItems"],
+      }
+    : {
+        title: "Today's Task Schedule",
+        route: "scheduleTask",
+        keys: [
+          "taskScheduleItems",
+          "scheduleTaskItems",
+          "scheduledTaskItems",
+          "cleaningScheduleItems",
+          "tasks",
+        ],
+      }
+);
+
+// ─── Activity Chart ───────────────────────────────────────────────────────────
+
 const activityTitle = computed(() => {
   if (selectedRange.value === "Today") return "Today's Activity";
   if (selectedRange.value === "This Month") return "This Month Activity";
@@ -1180,7 +1837,6 @@ const activityChart = computed(() =>
 const chartLabels = computed<string[]>(() => {
   const labels = activityChart.value.labels;
   if (labels.length) return labels;
-
   if (selectedRange.value === "Today")
     return ["12 AM", "4 AM", "8 AM", "12 PM", "4 PM", "8 PM"];
   if (selectedRange.value === "This Month") {
@@ -1199,12 +1855,8 @@ const primarySeries = computed(() =>
 const secondarySeries = computed(() =>
   normalizeSeries(activityChart.value.secondary, chartLabels.value.length)
 );
-const primaryLegendLabel = computed(
-  () => activityChart.value.primaryLabel || "Work Order"
-);
-const secondaryLegendLabel = computed(
-  () => activityChart.value.secondaryLabel || "Feedback"
-);
+const primaryLegendLabel = computed(() => "Closed Work Order");
+const secondaryLegendLabel = computed(() => "Open Work Order");
 const chartMax = computed(() =>
   Math.max(1, ...primarySeries.value, ...secondarySeries.value)
 );
@@ -1225,21 +1877,6 @@ const chartYLabels = computed(() => {
   ];
 });
 
-function buildSmoothPath(points: { x: number; y: number }[]) {
-  if (!points || points.length === 0) return "";
-  let d = `M ${points[0].x},${points[0].y}`;
-  for (let i = 0; i < points.length - 1; i++) {
-    const p1 = points[i];
-    const p2 = points[i + 1];
-    const cp1x = p1.x + (p2.x - p1.x) / 2;
-    const cp1y = p1.y;
-    const cp2x = p1.x + (p2.x - p1.x) / 2;
-    const cp2y = p2.y;
-    d += ` C ${cp1x},${cp1y} ${cp2x},${cp2y} ${p2.x},${p2.y}`;
-  }
-  return d;
-}
-
 const primaryDots = computed(() => buildChartDots(primarySeries.value));
 const secondaryDots = computed(() => buildChartDots(secondarySeries.value));
 const primaryPath = computed(() => buildSmoothPath(primaryDots.value));
@@ -1248,13 +1885,14 @@ const chartAxisLabels = computed(() => {
   const labels = chartLabels.value;
   const count = Math.max(1, labels.length - 1);
   const width = chartWidth.value;
-
   return labels.map((label, index) => ({
     text: label,
     x: 54 + ((width - 74) / count) * index,
   }));
 });
 
+// ─── List Data ────────────────────────────────────────────────────────────────
+
 const taskScheduleItems = computed<TaskItem[]>(() =>
   getDashboardArray([...primaryListConfig.value.keys])
     .map(normalizeTaskItem)
@@ -1270,48 +1908,76 @@ const feedbackItems = computed<FeedbackItem[]>(() =>
     .map(normalizeFeedbackItem)
     .slice(0, 4)
 );
-const recentActivities = computed<DashboardListItem[]>(() =>
-  getDashboardArray(["recentActivities", "activityItems"])
-    .map(normalizeActivityItem)
-    .slice(0, 3)
+
+// Property-mode lists
+const upcomingEvents = computed(() =>
+  normalizeListItems(["upcomingEvents", "eventsList", "events"])
+);
+const todayReminders = computed(() =>
+  normalizeListItems(["todayReminders", "todaysReminders", "reminders"])
+);
+const todayAttentions = computed(() =>
+  normalizeListItems(["todayAttentions", "attentions"])
 );
 
-function getToneColor(tone: string) {
-  const map: Record<string, { bg: string; text: string }> = {
-    info: { bg: "blue-lighten-4", text: "blue-darken-3" },
-    danger: { bg: "red-lighten-4", text: "red-darken-3" },
-    success: { bg: "green-lighten-4", text: "green-darken-3" },
-    warning: { bg: "orange-lighten-4", text: "orange-darken-3" },
-    neutral: { bg: "grey-lighten-3", text: "blue-grey-darken-1" },
-  };
-  return map[tone] || map.neutral;
-}
+const workOrderStatus = computed(() => {
+  const summary = finalDashboardData.value?.workOrderStatusSummary;
+  const metric = getMetric(["openWorkOrder", "workOrders", "workOrder"]);
 
-function getServiceDisplayName(value: string) {
-  const normalized = value.toLowerCase();
-  const titleMap: Record<string, string> = {
-    security_agency: "Security",
-    cleaning_services: "Hygiene",
-    hygiene: "Hygiene",
-    mechanical_electrical: "Mechanical & Electrical",
-    mechanical_electrical_services: "Mechanical & Electrical",
-    pest_control_services: "Pest Control",
-    pool_maintenance_services: "Pool Maintenance",
-    landscaping_services: "Landscaping",
-    property_management_agency: "Property Management",
-  };
+  const src = summary || metric;
+  if (!src) return [];
 
-  if (titleMap[normalized]) return titleMap[normalized];
+  const completed = Number(src.completed ?? 0);
+  const inProgress = Number(src.inProgress ?? 0);
+  const pending =
+    src.pending !== undefined
+      ? Number(src.pending)
+      : Math.max(0, Number(src.count ?? 0) - inProgress);
+  const max = Math.max(completed, inProgress, pending, 1);
 
-  const cleaned = normalized
-    .replace(/_services|_agency/g, "")
-    .replace(/[_-]+/g, " ")
-    .trim();
+  return [
+    { label: "Completed", value: completed, percent: (completed / max) * 100, color: "#2fb84d" },
+    { label: "In Progress", value: inProgress, percent: (inProgress / max) * 100, color: "#f12d2d" },
+    { label: "Pending", value: pending, percent: (pending / max) * 100, color: "#ff8900" },
+  ];
+});
 
-  return cleaned
-    ? cleaned.replace(/\b\w/g, (char) => char.toUpperCase())
-    : "Service";
-}
+// Security-mode lists
+const activePatrolItems = computed<any[]>(() =>
+  finalDashboardData.value?.activePatrolItems ?? []
+);
+const securityStaffItems = computed<any[]>(() =>
+  attendanceReq.value?.items ?? []
+);
+
+// ─── ResizeObserver ───────────────────────────────────────────────────────────
+
+watch(chartContainerRef, (el) => {
+  if (resizeObserver) resizeObserver.disconnect();
+  if (el && window.ResizeObserver) {
+    resizeObserver = new ResizeObserver((entries) => {
+      if (entries[0] && entries[0].contentRect.width > 0) {
+        chartWidth.value = entries[0].contentRect.width;
+      }
+    });
+    resizeObserver.observe(el);
+  }
+});
+onUnmounted(() => {
+  if (resizeObserver) resizeObserver.disconnect();
+});
+
+// ─── Range watcher ────────────────────────────────────────────────────────────
+
+watch(selectedRange, (period) => {
+  if (props.serviceType) {
+    const apiPeriod = periodValue[period];
+    if (apiPeriod) currentPeriod.value = apiPeriod;
+  }
+  emit("updatePeriod", { key: "__all__", period });
+});
+
+// ─── Metric Helpers ───────────────────────────────────────────────────────────
 
 function getMetric(keys: string[]): DashboardMetric {
   const data = finalDashboardData.value || {};
@@ -1328,20 +1994,16 @@ function getMetricValue(metric: DashboardMetric, key?: string) {
   if (key === "patrolCompliance") {
     return `${formatNumber(toNumber(metric.count))}%`;
   }
-
   const completed = toNumber(metric.completed);
   const total = toNumber(metric.total);
-
   if (total > 0 && typeof metric.completed !== "undefined") {
     return `${formatNumber(completed)}/${formatNumber(total)}`;
   }
-
   return toNumber(metric.count);
 }
 
 function getMetricMeta(metric: DashboardMetric) {
   const parts: string[] = [];
-
   if (typeof metric.overdue !== "undefined")
     parts.push(`${formatNumber(toNumber(metric.overdue))} overdue`);
   if (typeof metric.inProgress !== "undefined")
@@ -1351,20 +2013,13 @@ function getMetricMeta(metric: DashboardMetric) {
   if (typeof metric.highSeverity !== "undefined")
     parts.push(`${formatNumber(toNumber(metric.highSeverity))} high severity`);
   if (typeof metric.currentlyOnSite !== "undefined")
-    parts.push(
-      `${formatNumber(toNumber(metric.currentlyOnSite))} currently on site`
-    );
+    parts.push(`${formatNumber(toNumber(metric.currentlyOnSite))} currently on site`);
   if (
-    typeof (metric as Record<string, any>).missedCheckpoints !== "undefined" ||
-    typeof (metric as Record<string, any>).missed !== "undefined"
+    typeof (metric as any).missedCheckpoints !== "undefined" ||
+    typeof (metric as any).missed !== "undefined"
   ) {
     parts.push(
-      `${formatNumber(
-        toNumber(
-          (metric as Record<string, any>).missedCheckpoints ??
-            (metric as Record<string, any>).missed
-        )
-      )} checkpoint missed`
+      `${formatNumber(toNumber((metric as any).missedCheckpoints ?? (metric as any).missed))} checkpoint missed`
     );
   }
   if (typeof metric.lowStock !== "undefined")
@@ -1377,218 +2032,123 @@ function getMetricMeta(metric: DashboardMetric) {
   ) {
     parts.push(`${formatNumber(toNumber(metric.completed))} completed`);
   }
-
   return parts.join(" - ");
 }
 
-function getCardColor(index: number) {
-  return ["#155178", "#9f2f29", "#1f8a56", "#b96d17"][index % 4];
-}
-
-function getCardTint(color: string, index: number) {
-  const tints = ["#dbeeff", "#f8c6c3", "#d8f5e5", "#ffe7c2"];
-  if (!color) return tints[index % tints.length];
+function getFilteredVisitorMetric(): DashboardMetric {
+  const metric = getMetric(["visitors", "visitor"]);
+  const selected = visitorType.value;
+  const items = visitorItems.value;
 
-  const normalized = color.toLowerCase();
-  if (normalized.includes("f44336") || normalized.includes("d32f2f"))
-    return "#f8c6c3";
-  if (normalized.includes("4caf50") || normalized.includes("43a047"))
-    return "#d8f5e5";
-  if (normalized.includes("ff9800") || normalized.includes("ffa726"))
-    return "#ffe7c2";
-  return "#dbeeff";
-}
+  if (selected === "All") {
+    return {
+      ...metric,
+      count: toNumber(metric.count ?? items.length),
+      currentlyOnSite: toNumber(
+        metric.currentlyOnSite ??
+          items.filter((item: any) => !isClosedStatus(item.status) && !item.checkOut)
+            .length
+      ),
+    };
+  }
 
-function getActivityChartSource() {
-  const data = finalDashboardData.value || {};
-  return (
-    data.activityChart ||
-    data.statistic?.activityChart ||
-    data.statistics?.activityChart ||
-    data.statisticChart ||
-    data.statisticsChart ||
-    data.activityStatistics ||
-    data.activityStatistic ||
-    {}
+  const filtered = items.filter(
+    (item: any) => getVisitorFilterValue(item) === selected
   );
-}
-
-function normalizeActivityChart(source: any) {
-  const labels = Array.isArray(source?.labels)
-    ? source.labels.map((label: any) => String(label))
-    : [];
-
-  const secondary = extractChartSeries(source, [
-    "closedWorkOrder",
-    "closedWorkOrders",
-    "closed_work_orders",
-  ]);
-
-  const hasClosedSeries = secondary.length > 0;
-
-  const primary = extractChartSeries(source, [
-    "openWorkOrder",
-    "openWorkOrders",
-    "open_work_orders",
-    "workOrders",
-    "workOrder",
-    "work_orders",
-  ]);
-
-  const secondaryCandidate = hasClosedSeries
-    ? { label: "Closed Work Order", series: secondary }
-    : getSecondaryChartSeries(source);
-
   return {
-    labels,
-    primary,
-    secondary: secondaryCandidate.series,
-    primaryLabel: hasClosedSeries ? "Open Work Order" : "Work Order",
-    secondaryLabel: secondaryCandidate.label,
+    ...metric,
+    count: filtered.length,
+    currentlyOnSite: filtered.filter(
+      (item: any) => !isClosedStatus(item.status) && !item.checkOut
+    ).length,
   };
 }
 
-function getSecondaryChartSeries(source: any) {
-  const candidates = [
-    {
-      label: "Task Completed",
-      keys: ["taskCompleted", "completedTasks", "completed"],
-    },
-    { label: "Incident", keys: ["incidents", "incident", "incidentReports"] },
-    { label: "Feedback", keys: ["feedbacks", "feedback", "feedbackTickets"] },
-  ];
+// ─── Array/List Helpers ───────────────────────────────────────────────────────
 
-  for (const candidate of candidates) {
-    const series = extractChartSeries(source, candidate.keys);
-    if (series.length) return { label: candidate.label, series };
+function getDashboardArray(keys: string[]) {
+  const data = finalDashboardData.value || {};
+  for (const key of keys) {
+    const value = data[key];
+    if (Array.isArray(value)) return value;
+    if (Array.isArray(value?.items)) return value.items;
+    if (Array.isArray(value?.docs)) return value.docs;
+    if (Array.isArray(value?.data)) return value.data;
   }
+  return [];
+}
 
-  return { label: "Feedback", series: [] as number[] };
+function normalizeListItems(keys: string[]): DashboardListItem[] {
+  const data = finalDashboardData.value || {};
+  const source = keys.map((k) => data[k]).find(Array.isArray);
+  if (!source) return [];
+  const context = keys[0];
+
+  return source.slice(0, 4).map((item: any, index: number) => ({
+    id: item._id || item.id || `${keys[0]}-${index}`,
+    title: item.title || item.name || item.subject || "Untitled",
+    subtitle: getListSubtitle(context, item),
+    time: getListTime(item),
+    color: item.color || item.statusColor || "primary",
+    icon: item.icon || getListIcon(context),
+    tone: item.tone,
+    actionLabel: item.actionLabel,
+  }));
 }
 
-function extractChartSeries(source: any, keys: string[]) {
-  for (const key of keys) {
-    const value = source?.[key];
-    if (Array.isArray(value)) return value.map(toNumber);
+function getListSubtitle(context: string, item: any) {
+  if (item.subtitle) return item.subtitle;
+  const time = getListTime(item);
+  if (context === "upcomingEvents") {
+    const type = item.type || item.category || item.status || "Event";
+    return [type, formatDashboardDateTime(time)].filter(Boolean).join(" - ");
   }
-
-  if (Array.isArray(source?.datasets)) {
-    const dataset = source.datasets.find((item: any) => {
-      const keyText = String(
-        item?.key || item?.label || item?.name || ""
-      ).toLowerCase();
-      return keys.some((key) => keyText.includes(key.toLowerCase()));
-    });
-    if (Array.isArray(dataset?.data)) return dataset.data.map(toNumber);
+  if (context === "todayReminders" || context === "todayAttentions") {
+    return formatDashboardTime(time) || item.description || item.status || "";
   }
-
-  return [];
+  return item.description || item.category || item.location || formatDashboardTime(time);
 }
 
-function normalizeSeries(value: any, targetLength: number) {
-  const source = Array.isArray(value) ? value : [];
-  return Array.from({ length: targetLength }, (_, index) =>
-    toNumber(source[index])
+function getListTime(item: any) {
+  return (
+    item.time ||
+    item.dateTime ||
+    item.start_datetime ||
+    item.startDate ||
+    item.startAt ||
+    item.date ||
+    item.createdAt ||
+    item.updatedAt ||
+    ""
   );
 }
 
-function buildChartDots(series: number[]) {
-  const count = Math.max(1, series.length - 1);
-  const width = chartWidth.value;
-
-  return series.map((value, index) => ({
-    x: 54 + ((width - 74) / count) * index,
-    y: 220 - (toNumber(value) / chartMax.value) * 184,
-  }));
-}
-
-function getDashboardArray(keys: string[]) {
-  const data = finalDashboardData.value || {};
-
-  for (const key of keys) {
-    const value = data[key];
-    if (Array.isArray(value)) return value;
-    if (Array.isArray(value?.items)) return value.items;
-    if (Array.isArray(value?.docs)) return value.docs;
-    if (Array.isArray(value?.data)) return value.data;
-  }
-
-  return [];
-}
-
-function getFilteredVisitorMetric(): DashboardMetric {
-  const metric = getMetric(["visitors", "visitor"]);
-  const selected = visitorType.value;
-  const items = visitorItems.value;
-
-  if (selected === "All") {
-    return {
-      ...metric,
-      count: toNumber(metric.count ?? items.length),
-      currentlyOnSite: toNumber(
-        metric.currentlyOnSite ??
-          items.filter(
-            (item: any) => !isClosedStatus(item.status) && !item.checkOut
-          ).length
-      ),
-    };
-  }
-
-  const filtered = items.filter(
-    (item: any) => getVisitorFilterValue(item) === selected
-  );
-
-  return {
-    ...metric,
-    count: filtered.length,
-    currentlyOnSite: filtered.filter(
-      (item: any) => !isClosedStatus(item.status) && !item.checkOut
-    ).length,
-  };
+function getListIcon(context: string) {
+  if (context === "upcomingEvents") return "mdi-circle";
+  if (context === "todayReminders") return "mdi-alert";
+  if (context === "todayAttentions") return "mdi-alert-circle-outline";
+  return "mdi-circle";
 }
 
-function buildFilterOptions(
-  defaults: string[],
-  items: Record<string, any>[],
-  getValue: (item: Record<string, any>) => string
-) {
-  const options = new Set(defaults);
-  items.forEach((item) => {
-    const value = getValue(item);
-    if (value) options.add(value);
-  });
-
-  return Array.from(options);
+function getListTone(item: DashboardListItem) {
+  if (item.tone) return item.tone;
+  const text = `${item.title} ${item.subtitle || ""} ${item.icon || ""} ${item.color || ""}`.toLowerCase();
+  if (text.includes("alert") || text.includes("incident") || text.includes("overdue") || text.includes("pending"))
+    return "danger";
+  if (text.includes("booking") || text.includes("facility") || text.includes("approved") || text.includes("complete"))
+    return "success";
+  if (text.includes("visitor") || text.includes("check")) return "warning";
+  if (text.includes("calendar") || text.includes("event") || text.includes("reminder"))
+    return "info";
+  return "neutral";
 }
 
-function getVisitorFilterValue(item: Record<string, any>) {
-  const raw = String(
-    item.type || item.visitorType || item.category || ""
-  ).toLowerCase();
-  if (raw.includes("contractor")) return "Contractor";
-  if (raw.includes("walk")) return "Walk-In";
-  if (raw.includes("delivery")) return "Delivery";
-  if (raw.includes("pick")) return "Pick-up";
-  if (raw.includes("drop")) return "Drop-Off";
-  if (raw.includes("guest") || raw.includes("drive")) return "Drive-In";
-  return "All";
-}
+// ─── Normalizers ─────────────────────────────────────────────────────────────
 
 function normalizeTaskItem(item: Record<string, any>, index: number): TaskItem {
   const title =
-    item.title ||
-    item.subject ||
-    item.name ||
-    item.taskName ||
-    item.description ||
-    "Task";
-  const subtitle =
-    item.subtitle ||
-    item.area ||
-    item.location ||
-    item.asset ||
-    item.category ||
-    "";
+    item.title || item.subject || item.name || item.taskName || item.description || "Task";
+  const subtitle = item.subtitle || item.area || item.location || item.asset || item.category || "";
   const person =
     item.person ||
     item.assigneeName ||
@@ -1602,22 +2162,14 @@ function normalizeTaskItem(item: Record<string, any>, index: number): TaskItem {
     title,
     subtitle,
     person,
-    status: normalizeStatus(
-      item.status || item.state || item.taskStatus || "To-Do"
-    ),
+    status: normalizeStatus(item.status || item.state || item.taskStatus || "To-Do"),
     time:
-      item.time ||
-      item.startTime ||
-      item.scheduleTime ||
-      formatActivityTime(item),
+      item.time || item.startTime || item.scheduleTime || formatActivityTime(item),
     raw: item,
   };
 }
 
-function normalizeStaffItem(
-  item: Record<string, any>,
-  index: number
-): StaffItem {
+function normalizeStaffItem(item: Record<string, any>, index: number): StaffItem {
   const name =
     item.name ||
     item.employeeName ||
@@ -1638,21 +2190,14 @@ function normalizeStaffItem(
     name,
     role,
     status: normalizeStatus(
-      item.statusLabel ||
-        item.status ||
-        item.currentStatus ||
-        item.attendanceStatus ||
-        "Off duty"
+      item.statusLabel || item.status || item.currentStatus || item.attendanceStatus || "Off duty"
     ),
     totalHours: item.totalHours || 0,
     raw: item,
   };
 }
 
-function normalizeFeedbackItem(
-  item: Record<string, any>,
-  index: number
-): FeedbackItem {
+function normalizeFeedbackItem(item: Record<string, any>, index: number): FeedbackItem {
   const title = item.title || item.subject || item.description || "Feedback";
   const subject = item.category || item.type || item.service || "Subject";
   const app = item.app || item.source || item.channel || "";
@@ -1675,179 +2220,190 @@ function normalizeFeedbackItem(
   };
 }
 
-function normalizeActivityItem(
-  item: Record<string, any>,
-  index: number
-): DashboardListItem {
-  const title =
-    item.title ||
-    item.subject ||
-    item.description ||
-    item.message ||
-    "Activity";
-  const subtitle =
-    item.subtitle || item.type || item.category || item.status || "";
-
-  return {
-    id: String(item.id || item._id || `${title}-${index}`),
-    title,
-    subtitle,
-    time: formatActivityTime(item),
-    icon: item.icon || "mdi-history",
-    tone: item.tone || getStatusTone(item.status || item.type),
-    raw: item,
-  };
+// Feedback tone helper (for property-mode pill classes)
+function getFeedbackTone(status: any) {
+  const s = String(status || "").toLowerCase();
+  if (s.includes("complete") || s.includes("resolved") || s.includes("done")) return "completed";
+  if (s.includes("progress") || s.includes("review")) return "progress";
+  if (s.includes("reject") || s.includes("cancel")) return "danger";
+  return "todo";
 }
 
-function formatActivityTime(item: Record<string, any>) {
-  if (item.displayTime) return String(item.displayTime);
-
-  const rawTime = item.time || getItemTime(item);
-  const rawText = String(rawTime || "");
-
-  if (!rawText) return "";
-  if (
-    /\b(ago|now|today|yesterday|min|mins|hr|hrs|hour|hours|day|days)\b/i.test(
-      rawText
-    )
-  ) {
-    return rawText;
-  }
-
-  return formatRelativeTime(rawTime);
+function getInitials(name?: string) {
+  return String(name || "")
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((w) => w.charAt(0).toUpperCase())
+    .join("") || "-";
 }
 
-function getActivityToneStyle(tone: string) {
-  const toneMap: Record<string, { background: string; color: string }> = {
-    info: {
-      background: "#d8ecff",
-      color: "#17496f",
-    },
-    danger: {
-      background: "#ffd9d6",
-      color: "#bd413c",
-    },
-    success: {
-      background: "#d8f4e3",
-      color: "#2b9160",
-    },
-    warning: {
-      background: "#ffe0ad",
-      color: "#d88717",
-    },
-    neutral: {
-      background: "#edf2f6",
-      color: "#607386",
-    },
-  };
+// ─── Status Style Helpers ────────────────────────────────────────────────────
 
-  return toneMap[tone] || toneMap.neutral;
+function getStatusPillStyle(status: any) {
+  const tone = getStatusTone(status);
+  const map: Record<string, { backgroundColor: string; color: string }> = {
+    success: { backgroundColor: "#72e3a1", color: "#0f5132" },
+    warning: { backgroundColor: "#fde68a", color: "#92400e" },
+    error: { backgroundColor: "#fecaca", color: "#b91c1c" },
+    neutral: { backgroundColor: "#e2e8f0", color: "#64748b" },
+  };
+  return map[tone] || map.neutral;
 }
 
-function getItemTime(item: Record<string, any>) {
-  return (
-    item.createdAt ||
-    item.updatedAt ||
-    item.date ||
-    item.time ||
-    item.created_on ||
-    item.updated_on
-  );
+function getPatrolStatusStyle(status: any) {
+  const s = String(status || "").toLowerCase();
+  if (s === "completed" || s === "complete")
+    return { backgroundColor: "#72e3a1", color: "#0f5132" };
+  if (s === "on paused" || s === "paused")
+    return { backgroundColor: "#dcdcdc", color: "#64748b" };
+  return { backgroundColor: "#e2e8f0", color: "#64748b" };
 }
 
-function normalizeStatus(value: any) {
-  const text = String(value || "").trim();
-  if (!text) return "To-Do";
+function getStaffStatusPillStyle(status: any) {
+  const s = String(status || "").toLowerCase();
+  if (s === "on duty" || s === "on-duty")
+    return { backgroundColor: "#72e3a1", color: "#0f5132" };
+  if (s === "on break" || s === "on-break")
+    return { backgroundColor: "#fde68a", color: "#92400e" };
+  if (s === "absent")
+    return { backgroundColor: "#fecaca", color: "#b91c1c" };
+  return { backgroundColor: "#e2e8f0", color: "#64748b" };
+}
 
-  return text
-    .replace(/[_-]+/g, " ")
-    .replace(/\b\w/g, (char) => char.toUpperCase());
+function getStatusProgressStyle(item: { percent: number; color: string }) {
+  const percent = Math.min(100, Math.max(0, Number(item.percent) || 0));
+  return { backgroundColor: item.color, width: `${percent}%` };
 }
 
-function getStatusTone(status: any) {
-  const normalized = String(status || "").toLowerCase();
-  if (
-    normalized.includes("complete") ||
-    normalized.includes("done") ||
-    normalized.includes("resolved") ||
-    normalized.includes("closed")
-  )
-    return "success";
-  if (
-    normalized.includes("progress") ||
-    normalized.includes("active") ||
-    normalized.includes("ongoing")
-  )
-    return "info";
-  if (
-    normalized.includes("overdue") ||
-    normalized.includes("urgent") ||
-    normalized.includes("high")
-  )
-    return "danger";
-  return "neutral";
+// ─── Chart Helpers ────────────────────────────────────────────────────────────
+
+function buildSmoothPath(points: { x: number; y: number }[]) {
+  if (!points || points.length === 0) return "";
+  let d = `M ${points[0].x},${points[0].y}`;
+  for (let i = 0; i < points.length - 1; i++) {
+    const p1 = points[i];
+    const p2 = points[i + 1];
+    const cp1x = p1.x + (p2.x - p1.x) / 2;
+    const cp1y = p1.y;
+    const cp2x = p1.x + (p2.x - p1.x) / 2;
+    const cp2y = p2.y;
+    d += ` C ${cp1x},${cp1y} ${cp2x},${cp2y} ${p2.x},${p2.y}`;
+  }
+  return d;
 }
 
-function getStaffTone(status: any) {
-  const normalized = String(status || "").toLowerCase();
-  if (
-    normalized.includes("duty") ||
-    normalized.includes("present") ||
-    normalized.includes("active")
-  )
-    return "success";
-  if (normalized.includes("break")) return "warning";
-  if (normalized.includes("absent") || normalized.includes("off"))
-    return "danger";
-  return "neutral";
+function buildChartDots(series: number[]) {
+  const count = Math.max(1, series.length - 1);
+  const width = chartWidth.value;
+  return series.map((value, index) => ({
+    x: 54 + ((width - 74) / count) * index,
+    y: 220 - (toNumber(value) / chartMax.value) * 184,
+  }));
 }
 
-function isClosedStatus(status: any) {
-  const normalized = String(status || "").toLowerCase();
+function getActivityChartSource() {
+  const data = finalDashboardData.value || {};
   return (
-    normalized.includes("complete") ||
-    normalized.includes("cancel") ||
-    normalized.includes("reject") ||
-    normalized.includes("closed") ||
-    normalized.includes("deleted") ||
-    normalized.includes("check-out") ||
-    normalized.includes("checkout")
+    data.activityChart ||
+    data.statistic?.activityChart ||
+    data.statistics?.activityChart ||
+    data.statisticChart ||
+    data.statisticsChart ||
+    data.activityStatistics ||
+    data.activityStatistic ||
+    {}
   );
 }
 
-function isWidgetVisible(key: string) {
-  return visibleWidgetKeys.value.includes(key);
+function normalizeActivityChart(source: any) {
+  const labels = Array.isArray(source?.labels)
+    ? source.labels.map((l: any) => String(l))
+    : [];
+  const secondary = extractChartSeries(source, ["closedWorkOrder", "closedWorkOrders", "closed_work_orders"]);
+  const hasClosedSeries = secondary.length > 0;
+  const primary = extractChartSeries(source, ["openWorkOrder", "openWorkOrders", "open_work_orders", "workOrders", "workOrder", "work_orders"]);
+  const secondaryCandidate = hasClosedSeries
+    ? { label: "Closed Work Order", series: secondary }
+    : getSecondaryChartSeries(source);
+
+  return {
+    labels,
+    primary,
+    secondary: secondaryCandidate.series,
+    primaryLabel: hasClosedSeries ? "Open Work Order" : "Work Order",
+    secondaryLabel: secondaryCandidate.label,
+  };
 }
 
-function openCustomizeDialog() {
-  draftVisibleWidgetKeys.value = [...visibleWidgetKeys.value];
-  customizeDialog.value = true;
+function getSecondaryChartSeries(source: any) {
+  const candidates = [
+    { label: "Task Completed", keys: ["taskCompleted", "completedTasks", "completed"] },
+    { label: "Incident", keys: ["incidents", "incident", "incidentReports"] },
+    { label: "Feedback", keys: ["feedbacks", "feedback", "feedbackTickets"] },
+  ];
+  for (const candidate of candidates) {
+    const series = extractChartSeries(source, candidate.keys);
+    if (series.length) return { label: candidate.label, series };
+  }
+  return { label: "Feedback", series: [] as number[] };
 }
 
-function cancelCustomize() {
-  draftVisibleWidgetKeys.value = [...visibleWidgetKeys.value];
-  widgetSearch.value = "";
-  customizeDialog.value = false;
+function extractChartSeries(source: any, keys: string[]) {
+  for (const key of keys) {
+    const value = source?.[key];
+    if (Array.isArray(value)) return value.map(toNumber);
+  }
+  if (Array.isArray(source?.datasets)) {
+    const dataset = source.datasets.find((item: any) => {
+      const keyText = String(item?.key || item?.label || item?.name || "").toLowerCase();
+      return keys.some((key) => keyText.includes(key.toLowerCase()));
+    });
+    if (Array.isArray(dataset?.data)) return dataset.data.map(toNumber);
+  }
+  return [];
 }
 
-function resetCustomizeDraft() {
-  draftVisibleWidgetKeys.value = [...defaultVisibleWidgetKeys.value];
+function normalizeSeries(value: any, targetLength: number) {
+  const source = Array.isArray(value) ? value : [];
+  return Array.from({ length: targetLength }, (_, index) => toNumber(source[index]));
 }
 
-function submitCustomize() {
-  visibleWidgetKeys.value = [...draftVisibleWidgetKeys.value];
-  widgetSearch.value = "";
-  customizeDialog.value = false;
+// ─── Filter Helpers ───────────────────────────────────────────────────────────
+
+function buildFilterOptions(
+  defaults: string[],
+  items: Record<string, any>[],
+  getValue: (item: Record<string, any>) => string
+) {
+  const options = new Set(defaults);
+  items.forEach((item) => {
+    const value = getValue(item);
+    if (value) options.add(value);
+  });
+  return Array.from(options);
 }
 
-function notifyExport(format: string) {
-  snackbar.text = `${format} export is being prepared.`;
-  snackbar.visible = true;
+function getVisitorFilterValue(item: Record<string, any>) {
+  const raw = String(item.type || item.visitorType || item.category || "").toLowerCase();
+  if (raw.includes("contractor")) return "Contractor";
+  if (raw.includes("walk")) return "Walk-In";
+  if (raw.includes("delivery")) return "Delivery";
+  if (raw.includes("pick")) return "Pick-up";
+  if (raw.includes("drop")) return "Drop-Off";
+  if (raw.includes("guest") || raw.includes("drive")) return "Drive-In";
+  return "All";
+}
+
+// ─── Routing ─────────────────────────────────────────────────────────────────
+
+function dashboardPath(path: string) {
+  return `/${props.orgId}/${props.site}/${path}`;
 }
 
 function goToDashboardRoute(routeKey: string) {
   if (!props.orgId || !props.site) return;
-
   const pathMap: Record<string, string> = {
     attendance: "attendance",
     feedbacks: "feedbacks",
@@ -1855,8 +2411,11 @@ function goToDashboardRoute(routeKey: string) {
     virtualPatrol: "virtual-patrol/logs",
     manpower: "manpower-monitoring/attendance",
     incidentReports: "incident-reports",
-    visitorManagement: "visitor-management",
-    workOrders: "work-orders",
+    "virtual-patrol": "virtual-patrol",
+    "work-orders": "work-orders",
+    "event-mgmt": "event-mgmt",
+    calendar: "calendar",
+    "incident-reports": "incident-reports",
   };
   const path = pathMap[routeKey] || routeKey;
   router.push(`/${props.orgId}/${props.site}/${path}`);
@@ -1867,13 +2426,11 @@ function goToListItem(item: TaskItem | FeedbackItem, routeKey: string) {
     goToDashboardRoute(routeKey);
     return;
   }
-
   const id = item.raw?._id || item.raw?.id || item.id;
   if (!id || String(id).includes("-")) {
     goToDashboardRoute(routeKey);
     return;
   }
-
   const pathMap: Record<string, string> = {
     feedbacks: "feedbacks",
     scheduleTask: "schedule-task",
@@ -1882,45 +2439,494 @@ function goToListItem(item: TaskItem | FeedbackItem, routeKey: string) {
   router.push(`/${props.orgId}/${props.site}/${path}/${id}`);
 }
 
-function getInitials(name: string) {
-  const parts = String(name || "")
-    .trim()
-    .split(/\s+/)
-    .filter(Boolean);
-  if (!parts.length) return "?";
-  return parts
-    .slice(0, 2)
-    .map((part) => part[0])
-    .join("")
-    .toUpperCase();
+// ─── Widget Management ────────────────────────────────────────────────────────
+
+function isWidgetVisible(key: string) {
+  return visibleWidgetKeys.value.includes(key);
 }
 
-function formatNumber(value: number) {
-  return new Intl.NumberFormat("en-US").format(toNumber(value));
+function openCustomizeDialog() {
+  draftVisibleWidgetKeys.value = [...visibleWidgetKeys.value];
+  customizeDialog.value = true;
+}
+
+function cancelCustomize() {
+  draftVisibleWidgetKeys.value = [...visibleWidgetKeys.value];
+  widgetSearch.value = "";
+  customizeDialog.value = false;
+}
+
+function resetCustomizeDraft() {
+  draftVisibleWidgetKeys.value = [...defaultVisibleWidgetKeys.value];
+}
+
+function submitCustomize() {
+  visibleWidgetKeys.value = [...draftVisibleWidgetKeys.value];
+  widgetSearch.value = "";
+  customizeDialog.value = false;
+}
+
+function notifyExport(format: string) {
+  snackbar.text = `${format} export is being prepared.`;
+  snackbar.visible = true;
+}
+
+// ─── Card Color Helpers ───────────────────────────────────────────────────────
+
+function getCardColor(index: number) {
+  return ["#155178", "#9f2f29", "#1f8a56", "#b96d17"][index % 4];
+}
+
+function getCardTint(color: string, index: number) {
+  const tints = ["#dbeeff", "#f8c6c3", "#d8f5e5", "#ffe7c2"];
+  if (!color) return tints[index % tints.length];
+  const n = color.toLowerCase();
+  if (n.includes("f44336") || n.includes("d32f2f")) return "#f8c6c3";
+  if (n.includes("4caf50") || n.includes("43a047")) return "#d8f5e5";
+  if (n.includes("ff9800") || n.includes("ffa726")) return "#ffe7c2";
+  return "#dbeeff";
+}
+
+// ─── Generic Helpers ─────────────────────────────────────────────────────────
+
+function getServiceDisplayName(value: string) {
+  const normalized = value.toLowerCase();
+  const titleMap: Record<string, string> = {
+    security_agency: "Security",
+    cleaning_services: "Hygiene",
+    hygiene: "Hygiene",
+    mechanical_electrical: "Mechanical & Electrical",
+    mechanical_electrical_services: "Mechanical & Electrical",
+    pest_control_services: "Pest Control",
+    pool_maintenance_services: "Pool Maintenance",
+    landscaping_services: "Landscaping",
+    property_management_agency: "Property Management",
+  };
+  if (titleMap[normalized]) return titleMap[normalized];
+  const cleaned = normalized
+    .replace(/_services|_agency/g, "")
+    .replace(/[_-]+/g, " ")
+    .trim();
+  return cleaned
+    ? cleaned.replace(/\b\w/g, (char) => char.toUpperCase())
+    : "Service";
+}
+
+function formatNumber(value: any) {
+  const n = Number(value ?? 0);
+  return new Intl.NumberFormat("en-US").format(Number.isFinite(n) ? n : 0);
 }
 
 function toNumber(value: any) {
-  const numberValue = Number(value ?? 0);
-  return Number.isFinite(numberValue) ? numberValue : 0;
+  const n = Number(value ?? 0);
+  return Number.isFinite(n) ? n : 0;
+}
+
+function normalizeStatus(value: any) {
+  const text = String(value || "").trim();
+  if (!text) return "To-Do";
+  return text.replace(/[_-]+/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+function getStatusTone(status: any) {
+  const s = String(status || "").toLowerCase();
+  if (s.includes("complete") || s.includes("done") || s.includes("resolved") || s.includes("closed"))
+    return "success";
+  if (s.includes("progress") || s.includes("active") || s.includes("ongoing"))
+    return "info";
+  if (s.includes("overdue") || s.includes("urgent") || s.includes("high"))
+    return "danger";
+  if (s.includes("warning") || s.includes("reject") || s.includes("cancel"))
+    return "error";
+  return "neutral";
+}
+
+function isClosedStatus(status: any) {
+  const s = String(status || "").toLowerCase();
+  return (
+    s.includes("complete") ||
+    s.includes("cancel") ||
+    s.includes("reject") ||
+    s.includes("closed") ||
+    s.includes("deleted") ||
+    s.includes("check-out") ||
+    s.includes("checkout")
+  );
+}
+
+function formatActivityTime(item: Record<string, any>) {
+  const rawTime =
+    item.time ||
+    item.createdAt ||
+    item.updatedAt ||
+    item.date ||
+    item.startTime ||
+    item.scheduleTime;
+  return formatRelativeTime(rawTime);
 }
 
 function formatRelativeTime(value: any) {
   if (!value) return "";
-
   const date = new Date(value);
   if (Number.isNaN(date.getTime())) return "";
-
   const diffMs = Date.now() - date.getTime();
   const diffMinutes = Math.max(0, Math.round(diffMs / 60000));
   if (diffMinutes < 60) {
     const minutes = diffMinutes || 1;
     return `${minutes} min${minutes === 1 ? "" : "s"} ago`;
   }
-
   const diffHours = Math.round(diffMinutes / 60);
   if (diffHours < 24) return `${diffHours} hr${diffHours === 1 ? "" : "s"} ago`;
-
   const diffDays = Math.round(diffHours / 24);
   return `${diffDays} day${diffDays === 1 ? "" : "s"} ago`;
 }
+
+function formatDashboardDateTime(value?: string) {
+  if (!value) return "";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return `${date.toLocaleDateString("en-GB", {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+  })}, ${date.toLocaleTimeString("en-GB", {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+  })}`;
+}
+
+function formatDashboardTime(value?: string) {
+  if (!value) return "";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  const now = Date.now();
+  const diff = date.getTime() - now;
+  const abs = Math.abs(diff);
+  const minute = 60 * 1000;
+  const hour = 60 * minute;
+  const day = 24 * hour;
+  if (abs < minute) return diff >= 0 ? "In a moment" : "Just now";
+  if (abs < hour) {
+    const minutes = Math.max(1, Math.round(abs / minute));
+    return diff >= 0 ? `In ${minutes} minutes` : `${minutes} min ago`;
+  }
+  if (abs < day) {
+    const hours = Math.max(1, Math.round(abs / hour));
+    return diff >= 0 ? `In ${hours} hours` : `${hours} hr ago`;
+  }
+  return formatDashboardDateTime(value);
+}
 </script>
+
+<style scoped>
+/* ── Figma Panel Styles (Property & Security modes) ────────────────────────── */
+.dashboard-card {
+  background: #fff;
+  border: 1px solid #d9e0e7;
+  border-radius: 8px;
+  box-shadow: 0 1px 2px rgba(15, 35, 54, 0.04);
+}
+
+.dashboard-section-grid {
+  margin-top: 14px;
+}
+
+.dashboard-section-grid > .v-col {
+  display: flex;
+}
+
+.dashboard-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 274px;
+  padding: 28px 28px 26px;
+  width: 100%;
+}
+
+.figma-panel {
+  border-color: #dde4ea;
+  box-shadow: none;
+  min-height: 276px;
+  padding: 26px 28px 24px;
+}
+
+.figma-panel-header {
+  align-items: center;
+  display: flex;
+  gap: 16px;
+  justify-content: space-between;
+  min-height: 18px;
+}
+
+.figma-panel-header h2 {
+  color: #18324a;
+  font-size: 12px;
+  font-weight: 900;
+  letter-spacing: 0;
+  line-height: 1.2;
+  margin: 0;
+  text-transform: uppercase;
+}
+
+.figma-panel-action,
+.figma-row-action {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  color: #1976d2;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 800;
+  line-height: 1;
+  padding: 0;
+  white-space: nowrap;
+}
+
+.figma-panel-body {
+  flex: 1;
+  margin-top: 20px;
+}
+
+.figma-list {
+  display: grid;
+  gap: 10px;
+}
+
+.figma-list-row {
+  align-items: center;
+  background: #fff;
+  border: 1px solid #e1e7ed;
+  border-radius: 6px;
+  display: grid;
+  gap: 10px;
+  grid-template-columns: 34px minmax(0, 1fr) minmax(38px, auto);
+  min-height: 52px;
+  padding: 8px 12px;
+  transition: border-color 0.16s ease, box-shadow 0.16s ease;
+}
+
+.figma-list-row:hover {
+  border-color: #d5e0ea;
+  box-shadow: 0 6px 14px rgba(15, 44, 69, 0.05);
+}
+
+.figma-list-main {
+  min-width: 0;
+}
+
+.figma-list-main strong {
+  color: #152f47;
+  display: block;
+  font-size: 12px;
+  font-weight: 800;
+  line-height: 1.25;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.figma-list-main p {
+  color: #7b8895;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1.3;
+  margin: 3px 0 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.figma-row-action {
+  justify-self: end;
+}
+
+.figma-event-dot {
+  align-self: center;
+  border-radius: 50%;
+  display: inline-block;
+  height: 20px;
+  justify-self: center;
+  width: 20px;
+}
+
+.figma-event-dot-info,
+.figma-event-dot-neutral {
+  background: #c9e6ff;
+  border: 2px solid #77bef9;
+}
+
+.figma-event-dot-success {
+  background: #2fb84d;
+  border: 2px solid #c9efd4;
+}
+
+.figma-event-dot-danger {
+  background: #ffd9d6;
+  border: 2px solid #f9a6a0;
+}
+
+.figma-event-dot-warning {
+  background: #ffe9c7;
+  border: 2px solid #f9c97c;
+}
+
+.figma-icon-badge {
+  align-items: center;
+  border-radius: 50%;
+  display: inline-flex;
+  height: 28px;
+  justify-content: center;
+  justify-self: center;
+  width: 28px;
+}
+
+.figma-icon-badge-danger { 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; }
+
+.figma-status-stack {
+  display: grid;
+  gap: 22px;
+  padding: 6px 2px 0;
+}
+
+.figma-status-row {}
+
+.figma-status-label {
+  align-items: center;
+  color: #263d53;
+  display: flex;
+  font-size: 12px;
+  font-weight: 800;
+  justify-content: space-between;
+  line-height: 1.25;
+  margin-bottom: 10px;
+}
+
+.figma-status-label strong {
+  color: #18324a;
+  font-size: 12px;
+  font-weight: 900;
+}
+
+.figma-progress-track {
+  background: #edf2f6;
+  border-radius: 999px;
+  height: 6px;
+  overflow: hidden;
+  width: 100%;
+}
+
+.figma-progress-fill {
+  border-radius: inherit;
+  display: block;
+  height: 100%;
+}
+
+/* ── Property Feedback List ────────────────────────────────────────────────── */
+.feedback-list {
+  display: grid;
+  gap: 9px;
+}
+
+.feedback-row {
+  align-items: center;
+  background: #fff;
+  border: 1px solid #e0e5ea;
+  border-radius: 8px;
+  display: grid;
+  gap: 16px;
+  grid-template-columns: minmax(180px, 225px) minmax(130px, 175px) 100px auto;
+  min-height: 66px;
+  padding: 12px 14px;
+  transition: border-color 0.16s ease, box-shadow 0.16s ease;
+}
+
+.feedback-row:hover {
+  border-color: #d8e3ec;
+  box-shadow: 0 6px 14px rgba(15, 44, 69, 0.04);
+}
+
+.feedback-summary { min-width: 0; }
+
+.feedback-summary strong {
+  color: #132b43;
+  display: block;
+  font-size: 12px;
+  font-weight: 800;
+  line-height: 1.25;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.feedback-summary p {
+  color: #888;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.35;
+  margin: 5px 0 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.feedback-person {
+  align-items: center;
+  display: flex;
+  gap: 8px;
+  min-width: 0;
+}
+
+.feedback-person span {
+  font-size: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.feedback-avatar {
+  align-items: center;
+  background: #d1e8ff;
+  border-radius: 50%;
+  color: #1d5f99;
+  display: inline-flex;
+  flex-shrink: 0;
+  font-size: 11px;
+  font-weight: 800;
+  height: 30px;
+  justify-content: center;
+  width: 30px;
+}
+
+.feedback-status-pill {
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 4px 10px;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.feedback-status-pill-completed { 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; }
+
+.feedback-view-button {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  color: #2196f3;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 800;
+  justify-self: end;
+  line-height: 1;
+  padding: 0;
+  white-space: nowrap;
+}
+</style>