@7365admin1/layer-common 3.0.1 → 3.0.3

package/components/DashboardMain.vue

@@ -1,20 +1,26 @@
 <template>
-  <section class="service-dashboard">
-    <div class="dashboard-header">
+  <section class="pb-8">
+    <div
+      class="d-flex flex-column flex-md-row align-md-start justify-space-between ga-5 mb-6"
+    >
       <div>
-        <h1 class="dashboard-title">{{ dashboardTitle }}</h1>
-        <div class="site-label">
+        <h1 class="text-h5 font-weight-black text-blue-grey-darken-4 mb-0">
+          {{ dashboardTitle }}
+        </h1>
+        <div class="d-flex align-center text-blue-grey ga-1 mt-2 text-caption">
           <v-icon icon="mdi-map-marker" size="16" />
           <span>{{ currentSiteName || "Selected site" }}</span>
         </div>
       </div>
 
-      <div class="header-actions">
+      <div
+        class="d-flex flex-wrap align-center justify-md-end ga-3"
+        v-if="showHeaderActions"
+      >
         <v-btn
           variant="outlined"
-          color="default"
-          density="comfortable"
-          class="text-none action-button"
+          color="blue-grey-darken-1"
+          class="text-none font-weight-bold"
           prepend-icon="mdi-tune-variant"
           @click="openCustomizeDialog"
         >
@@ -26,16 +32,15 @@
             <v-btn
               v-bind="menuProps"
               variant="outlined"
-              color="default"
-              density="comfortable"
-              class="text-none action-button"
+              color="blue-grey-darken-1"
+              class="text-none font-weight-bold"
               append-icon="mdi-chevron-down"
             >
               Export
             </v-btn>
           </template>
 
-          <v-list class="export-menu" density="compact" border>
+          <v-list density="compact" border rounded="lg" elevation="3">
             <v-list-item title="PDF" @click="notifyExport('PDF')" />
             <v-list-item title="Word" @click="notifyExport('Word')" />
           </v-list>
@@ -45,8 +50,9 @@
           v-model="selectedRange"
           mandatory
           density="comfortable"
-          class="range-toggle"
           divided
+          variant="outlined"
+          color="blue-grey-darken-4"
         >
           <v-btn
             v-for="range in rangeOptions"
@@ -61,18 +67,22 @@
       </div>
     </div>
 
-    <v-progress-linear v-if="loading" indeterminate color="primary" class="mb-4" />
-
-    <v-row class="kpi-grid" dense>
-      <v-col
-        v-for="card in visibleKpiCards"
-        :key="card.key"
-        cols="12"
-        md="6"
-      >
-        <v-card :class="['dashboard-card', 'kpi-card', `kpi-card-${card.key}`]" flat border>
-          <div class="kpi-topline">
-            <div :class="['kpi-icon', `kpi-icon-${card.key}`]" :style="{ backgroundColor: card.tint }">
+    <v-progress-linear
+      v-if="finalLoading"
+      indeterminate
+      color="primary"
+      class="mb-4"
+    />
+
+    <v-row dense class="mb-1">
+      <v-col v-for="card in visibleKpiCards" :key="card.key" cols="12" sm="6">
+        <v-card flat border rounded="lg" class="pa-4" style="min-height: 158px">
+          <div class="d-flex align-start justify-space-between">
+            <div
+              class="d-inline-flex align-center justify-center rounded-lg"
+              style="height: 28px; width: 28px; flex-shrink: 0"
+              :style="{ backgroundColor: card.tint }"
+            >
               <v-icon :icon="card.icon" :color="card.color" size="15" />
             </div>
 
@@ -82,14 +92,15 @@
                   v-bind="menuProps"
                   variant="outlined"
                   density="compact"
-                  class="text-none mini-filter"
+                  class="text-none text-caption"
                   append-icon="mdi-chevron-down"
+                  size="x-small"
                 >
                   {{ card.filter.model }}
                 </v-btn>
               </template>
 
-              <v-list class="filter-menu" density="compact" border>
+              <v-list density="compact" border rounded="lg" elevation="3">
                 <v-list-item
                   v-for="option in card.filter.options"
                   :key="option"
@@ -99,7 +110,9 @@
                 >
                   <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>
@@ -108,13 +121,21 @@
             </v-menu>
           </div>
 
-          <div class="kpi-content">
-            <p class="kpi-label">{{ card.title }}</p>
-            <div class="kpi-value-row">
-              <strong>{{ card.value }}</strong>
+          <div class="mt-6">
+            <p
+              class="text-caption font-weight-black text-uppercase text-blue-grey-darken-2 mb-3"
+            >
+              {{ card.title }}
+            </p>
+            <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>
             </div>
-            <div class="kpi-meta-row">
-              <p v-if="card.meta" class="kpi-meta">{{ card.meta }}</p>
+            <div class="d-flex align-center flex-wrap ga-2">
+              <span v-if="card.meta" class="text-caption text-blue-grey">{{
+                card.meta
+              }}</span>
               <v-chip
                 :color="card.percentage >= 0 ? 'success' : 'error'"
                 size="x-small"
@@ -122,7 +143,11 @@
                 class="font-weight-bold"
               >
                 <v-icon
-                  :icon="card.percentage >= 0 ? 'mdi-arrow-up-right' : 'mdi-arrow-down-right'"
+                  :icon="
+                    card.percentage >= 0
+                      ? 'mdi-arrow-up-right'
+                      : 'mdi-arrow-down-right'
+                  "
                   size="13"
                   start
                 />
@@ -134,13 +159,26 @@
       </v-col>
     </v-row>
 
-    <v-card v-if="isWidgetVisible('activity')" class="dashboard-card activity-card" flat border>
-      <div class="section-header">
-        <h2>{{ activityTitle }}</h2>
+    <v-card
+      v-if="isWidgetVisible('activity')"
+      flat
+      border
+      rounded="lg"
+      class="px-5 pt-4 pb-3 mt-3"
+    >
+      <div class="d-flex align-center justify-space-between">
+        <h2 class="text-body-1 font-weight-black text-blue-grey-darken-4 mb-0">
+          {{ activityTitle }}
+        </h2>
       </div>
 
-      <div v-if="hasChartData" class="chart-wrap">
-        <svg viewBox="0 0 920 260" preserveAspectRatio="none" class="activity-chart">
+      <div v-if="hasChartData" class="mt-4">
+        <svg
+          viewBox="0 0 920 260"
+          preserveAspectRatio="none"
+          class="d-block w-100"
+          style="height: 260px"
+        >
           <line
             v-for="tick in chartTicks"
             :key="tick"
@@ -148,19 +186,46 @@
             :y1="tick"
             x2="900"
             :y2="tick"
-            class="chart-grid"
+            style="stroke: #e9eef2; stroke-width: 1"
+          />
+          <text
+            v-for="label in chartYLabels"
+            :key="label.text"
+            x="40"
+            :y="label.y"
+            text-anchor="end"
+            alignment-baseline="middle"
+            style="fill: #7e8b96; font-size: 11px; font-weight: 500"
+          >
+            {{ label.text }}
+          </text>
+          <path
+            :d="primaryPath"
+            style="
+              fill: none;
+              stroke: #ff9b9b;
+              stroke-width: 3;
+              stroke-linecap: round;
+              stroke-linejoin: round;
+            "
+          />
+          <path
+            :d="secondaryPath"
+            style="
+              fill: none;
+              stroke: #e53935;
+              stroke-width: 3;
+              stroke-linecap: round;
+              stroke-linejoin: round;
+            "
           />
-
-          <polyline :points="primaryPoints" class="primary-line" />
-          <polyline :points="secondaryPoints" class="secondary-line" />
-
           <circle
             v-for="point in primaryDots"
             :key="`primary-${point.x}-${point.y}`"
             :cx="point.x"
             :cy="point.y"
             r="4"
-            class="primary-dot"
+            style="fill: #ff9b9b; stroke: #fff; stroke-width: 2"
           />
           <circle
             v-for="point in secondaryDots"
@@ -168,112 +233,259 @@
             :cx="point.x"
             :cy="point.y"
             r="4"
-            class="secondary-dot"
+            style="fill: #e53935; stroke: #fff; stroke-width: 2"
           />
-
           <text
             v-for="label in chartAxisLabels"
             :key="`${label.text}-${label.x}`"
             :x="label.x"
             y="246"
-            class="chart-label"
             text-anchor="middle"
+            style="fill: #7e8b96; font-size: 12px; font-weight: 600"
           >
             {{ label.text }}
           </text>
         </svg>
 
-        <div class="chart-legend">
-          <span><i class="legend-dot primary" />{{ primaryLegendLabel }}</span>
-          <span><i class="legend-dot secondary" />{{ secondaryLegendLabel }}</span>
+        <div class="d-flex align-center justify-center ga-5 mt-2">
+          <span
+            class="d-inline-flex align-center ga-2 text-caption font-weight-bold text-blue-grey"
+          >
+            <span
+              class="rounded-circle"
+              style="
+                width: 12px;
+                height: 12px;
+                display: inline-block;
+                background-color: #ff9b9b;
+              "
+            />
+            {{ primaryLegendLabel }}
+          </span>
+          <span
+            class="d-inline-flex align-center ga-2 text-caption font-weight-bold text-blue-grey"
+          >
+            <span
+              class="rounded-circle"
+              style="
+                width: 12px;
+                height: 12px;
+                display: inline-block;
+                background-color: #e53935;
+              "
+            />
+            {{ secondaryLegendLabel }}
+          </span>
         </div>
       </div>
 
-      <EmptyDashboardState v-else />
+      <DashboardEmptyState v-else />
     </v-card>
 
-    <v-row class="dashboard-section-grid" dense>
-      <v-col v-if="isWidgetVisible('taskSchedule')" cols="12" lg="7">
-        <DashboardPanel :title="primaryListConfig.title" action-label="View All" @action="goToDashboardRoute(primaryListConfig.route)">
-          <div v-if="taskScheduleItems.length" class="task-list">
-            <div v-for="item in taskScheduleItems" :key="item.id" class="task-row">
-              <div class="task-summary">
-                <strong>{{ item.title }}</strong>
-                <p>{{ item.subtitle }}</p>
-              </div>
-
-              <div class="person-cell">
-                <span class="avatar">{{ getInitials(item.person) }}</span>
-                <span>{{ item.person }}</span>
+    <v-row dense class="mt-3 align-stretch">
+      <v-col
+        v-if="isWidgetVisible('taskSchedule')"
+        cols="12"
+        lg="7"
+        class="d-flex"
+      >
+        <DashboardPanel
+          :title="primaryListConfig.title"
+          action-label="View All"
+          @action="goToDashboardRoute(primaryListConfig.route)"
+        >
+          <div v-if="taskScheduleItems.length" class="d-flex flex-column ga-3">
+            <v-card
+              v-for="item in taskScheduleItems"
+              :key="item.id"
+              flat
+              border
+              rounded="lg"
+              class="pa-3"
+            >
+              <div class="d-flex align-center flex-wrap ga-3">
+                <div class="flex-grow-1" style="min-width: 0">
+                  <div
+                    class="text-body-2 font-weight-bold text-blue-grey-darken-4 text-truncate"
+                  >
+                    {{ item.title }}
+                  </div>
+                  <div class="text-caption text-blue-grey mt-1 text-truncate">
+                    {{ item.subtitle
+                    }}<template v-if="item.subtitle && item.time">
+                      &bull; </template
+                    >{{ item.time }}
+                  </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>
+                  <span class="text-truncate" style="max-width: 100px">{{
+                    item.person
+                  }}</span>
+                </div>
+                <v-chip
+                  size="small"
+                  :color="getStatusTone(item.status)"
+                  variant="tonal"
+                  label
+                >
+                  {{ item.status }}
+                </v-chip>
+                <v-btn
+                  variant="outlined"
+                  color="primary"
+                  size="small"
+                  class="text-none font-weight-bold"
+                  @click="goToListItem(item, primaryListConfig.route)"
+                >
+                  View
+                </v-btn>
               </div>
-
-              <span :class="['status-pill', `status-pill-${getStatusTone(item.status)}`]">
-                {{ item.status }}
-              </span>
-
-              <button class="row-action row-action-right" type="button" @click="goToListItem(item, primaryListConfig.route)">View</button>
-            </div>
+            </v-card>
           </div>
-          <EmptyDashboardState v-else />
+          <DashboardEmptyState v-else />
         </DashboardPanel>
       </v-col>
 
-      <v-col v-if="isWidgetVisible('staffStatus')" cols="12" lg="5">
-        <DashboardPanel title="Staff Status" action-label="View All" @action="goToDashboardRoute(staffStatusRoute)">
-          <div v-if="staffStatusItems.length" class="staff-list">
-            <div v-for="item in staffStatusItems" :key="item.id" class="staff-row">
-              <span class="avatar">{{ getInitials(item.name) }}</span>
-              <div class="staff-main">
-                <strong>{{ item.name }}</strong>
-                <p>{{ item.role }}</p>
+      <v-col
+        v-if="isWidgetVisible('staffStatus')"
+        cols="12"
+        lg="5"
+        class="d-flex"
+      >
+        <DashboardPanel
+          title="Staff's Total Attendance"
+          action-label="View All"
+          @action="goToDashboardRoute(staffStatusRoute)"
+        >
+          <div v-if="staffStatusItems.length" class="d-flex flex-column ga-3">
+            <v-card
+              v-for="item in staffStatusItems"
+              :key="item.id"
+              flat
+              border
+              rounded="lg"
+              class="pa-3"
+            >
+              <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="flex-grow-1" style="min-width: 0">
+                  <div
+                    class="text-body-2 font-weight-bold text-blue-grey-darken-4 text-truncate"
+                  >
+                    {{ item.name }}
+                  </div>
+                  <div class="text-caption text-blue-grey mt-1 text-truncate">
+                    {{ item.role }}
+                  </div>
+                </div>
+                <v-chip
+                  size="small"
+                  color="blue-grey-darken-1"
+                  variant="tonal"
+                  label
+                  class="ml-auto flex-shrink-0 font-weight-bold"
+                >
+                  {{ item.totalHours || 0 }} hrs
+                </v-chip>
               </div>
-              <span :class="['status-pill', `status-pill-${getStaffTone(item.status)}`]">
-                {{ item.status }}
-              </span>
-            </div>
+            </v-card>
           </div>
-          <EmptyDashboardState v-else />
+          <DashboardEmptyState v-else />
         </DashboardPanel>
       </v-col>
 
-      <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="person-cell">
-                <span class="avatar">{{ getInitials(item.person) }}</span>
-                <span>{{ item.person }}</span>
+      <v-col v-if="isWidgetVisible('feedbacks')" cols="12" class="d-flex">
+        <DashboardPanel
+          title="Feedbacks"
+          action-label="View All"
+          @action="goToDashboardRoute('feedbacks')"
+        >
+          <div v-if="feedbackItems.length" class="d-flex flex-column ga-3">
+            <v-card
+              v-for="item in feedbackItems"
+              :key="item.id"
+              flat
+              border
+              rounded="lg"
+              class="pa-3"
+            >
+              <div class="d-flex align-center flex-wrap ga-3">
+                <div class="flex-grow-1" style="min-width: 0">
+                  <div
+                    class="text-body-2 font-weight-bold text-blue-grey-darken-4 text-truncate"
+                  >
+                    {{ item.title }}
+                  </div>
+                  <div class="text-caption text-blue-grey mt-1 text-truncate">
+                    {{ item.subtitle }}
+                  </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>
+                  <span class="text-truncate" style="max-width: 100px">{{
+                    item.person
+                  }}</span>
+                </div>
+                <v-chip
+                  size="small"
+                  :color="getStatusTone(item.status)"
+                  variant="tonal"
+                  label
+                >
+                  {{ item.status }}
+                </v-chip>
+                <v-btn
+                  variant="outlined"
+                  color="primary"
+                  size="small"
+                  class="text-none font-weight-bold"
+                  @click="goToListItem(item, 'feedbacks')"
+                >
+                  View
+                </v-btn>
               </div>
-
-              <span :class="['status-pill', `status-pill-${getStatusTone(item.status)}`]">
-                {{ item.status }}
-              </span>
-
-              <button class="row-action row-action-right" type="button" @click="goToListItem(item, 'feedbacks')">View</button>
-            </div>
+            </v-card>
           </div>
-          <EmptyDashboardState v-else />
-        </DashboardPanel>
-      </v-col>
-
-      <v-col v-if="isWidgetVisible('recentActivity')" cols="12">
-        <DashboardPanel title="Recent Activity" action-label="View All" variant="recent" @action="goToDashboardRoute('workOrders')">
-          <DashboardList :items="recentActivities" empty-icon="mdi-history" align-time />
+          <DashboardEmptyState v-else />
         </DashboardPanel>
       </v-col>
     </v-row>
 
     <v-dialog v-model="customizeDialog" max-width="720" persistent scrollable>
-      <v-card class="customize-dialog" rounded="lg">
-        <div class="customize-dialog-header">
+      <v-card rounded="lg">
+        <v-card-title
+          class="d-flex align-start justify-space-between pa-6 pb-4 border-b"
+        >
           <div>
-            <h2>Customize Dashboard</h2>
-            <p>Select which widgets to display on your dashboard</p>
+            <div class="text-h6 font-weight-black text-blue-grey-darken-4">
+              Customize Dashboard
+            </div>
+            <div class="text-caption text-blue-grey mt-1">
+              Select which widgets to display on your dashboard
+            </div>
           </div>
           <v-btn
             icon="mdi-close"
@@ -282,9 +494,9 @@
             aria-label="Close customize dashboard"
             @click="cancelCustomize"
           />
-        </div>
+        </v-card-title>
 
-        <v-card-text class="customize-dialog-body">
+        <v-card-text class="pa-6">
           <v-text-field
             v-model="widgetSearch"
             placeholder="Search widgets..."
@@ -292,13 +504,12 @@
             variant="outlined"
             density="compact"
             hide-details
-            class="widget-search"
           />
 
-          <div class="reset-row">
+          <div class="d-flex justify-end mt-3 mb-1">
             <v-btn
               variant="text"
-              color="#0b2f47"
+              color="blue-grey-darken-4"
               size="small"
               class="text-none font-weight-bold"
               prepend-icon="mdi-refresh"
@@ -308,42 +519,58 @@
             </v-btn>
           </div>
 
-          <div class="widget-list">
-            <div
+          <div class="d-flex flex-column ga-3">
+            <v-card
               v-for="widget in filteredCustomizeWidgets"
               :key="widget.key"
-              class="widget-row"
+              flat
+              border
+              rounded="lg"
+              class="pa-4"
             >
-              <div>
-                <strong>{{ widget.title }}</strong>
-                <p>{{ widget.description }}</p>
+              <div class="d-flex align-center justify-space-between ga-4">
+                <div>
+                  <div
+                    class="text-body-2 font-weight-black text-blue-grey-darken-4"
+                  >
+                    {{ widget.title }}
+                  </div>
+                  <div class="text-caption text-blue-grey mt-1">
+                    {{ widget.description }}
+                  </div>
+                </div>
+                <v-switch
+                  v-model="draftVisibleWidgetKeys"
+                  :value="widget.key"
+                  color="blue-grey-darken-4"
+                  inset
+                  hide-details
+                  density="compact"
+                  aria-label="Toggle dashboard widget"
+                />
               </div>
-              <v-switch
-                v-model="draftVisibleWidgetKeys"
-                :value="widget.key"
-                color="#0b2f47"
-                inset
-                hide-details
-                density="compact"
-                aria-label="Toggle dashboard widget"
-              />
-            </div>
+            </v-card>
 
-            <EmptyDashboardState v-if="!filteredCustomizeWidgets.length" compact />
+            <DashboardEmptyState
+              v-if="!filteredCustomizeWidgets.length"
+              compact
+            />
           </div>
         </v-card-text>
 
-        <v-card-actions class="customize-dialog-actions">
+        <v-card-actions class="pa-6 pt-4 border-t justify-end ga-3">
           <v-btn
             variant="text"
-            class="text-none cancel-button"
+            class="text-none font-weight-bold text-blue-grey"
             @click="cancelCustomize"
           >
             Cancel
           </v-btn>
           <v-btn
             variant="flat"
-            class="text-none submit-button"
+            color="blue-grey-darken-4"
+            class="text-none font-weight-bold px-6"
+            style="min-width: 110px"
             @click="submitCustomize"
           >
             Submit
@@ -359,8 +586,6 @@
 </template>
 
 <script setup lang="ts">
-import { defineComponent, h } from "vue";
-
 type DashboardMetric = {
   count?: number;
   percentage?: number;
@@ -391,6 +616,7 @@ type TaskItem = {
   subtitle: string;
   person: string;
   status: string;
+  time?: string;
   raw?: Record<string, any>;
 };
 
@@ -399,6 +625,7 @@ type StaffItem = {
   name: string;
   role: string;
   status: string;
+  totalHours?: number | string;
   raw?: Record<string, any>;
 };
 
@@ -420,6 +647,10 @@ const props = defineProps({
     type: String,
     default: "",
   },
+  serviceType: {
+    type: String,
+    default: "",
+  },
   dashboardData: {
     type: Object as () => Record<string, any>,
     default: () => ({}),
@@ -430,7 +661,7 @@ const props = defineProps({
   },
   cardPeriods: {
     type: Object as () => Record<string, TDashboardValues>,
-    required: true,
+    default: () => ({}),
   },
   currentSiteName: {
     type: String,
@@ -438,12 +669,240 @@ const props = defineProps({
   },
   cardValues: {
     type: Array as () => TDashboardCardValue[],
-    required: true,
+    default: () => [],
   },
   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: "supplyAlert",
+    periodKey: "period",
+    title: "Supply Alert",
+    icon: "mdi-alert",
+    color: "#d32f2f",
+  },
+  {
+    key: "taskCompleted",
+    periodKey: "period",
+    title: "Task Completed",
+    icon: "mdi-clipboard-check-outline",
+    color: "#f4a340",
+  },
+];
+
+const landscapeCardValues: TDashboardCardValue[] = [
+  {
+    key: "openWorkOrder",
+    periodKey: "period",
+    title: "Open Work Order",
+    icon: "mdi-briefcase",
+    color: "#0b2f47",
+  },
+  {
+    key: "supplyAlert",
+    periodKey: "period",
+    title: "Supply Alert",
+    icon: "mdi-alert",
+    color: "#d32f2f",
+  },
+  {
+    key: "taskCompleted",
+    periodKey: "period",
+    title: "Task Completed",
+    icon: "mdi-clipboard-check-outline",
+    color: "#f4a340",
+  },
+  {
+    key: "landscapeSchedule",
+    periodKey: "period",
+    title: "Landscape Schedule",
+    icon: "mdi-sprinkler-variant",
+    color: "#4caf50",
+  },
+];
+
+const defaultExtraWidgetKeys = [
+  "activity",
+  "taskSchedule",
+  "staffStatus",
+  "feedbacks",
+  "recentActivity",
+];
+
+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 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");
+
+const {
+  getDashboardHygiene,
+  getDashboardHygieneWeeklyActivity,
+  getDashboardHygieneTaskSchedule,
+  getDashboardHygieneAttendance,
+  getDashboardHygieneFeedbacks,
+} = useDashboard();
+
+const { data: getDashboardReq, pending: loadingMetrics } =
+  await useLazyAsyncData(
+    `get-dashboard-${props.site}-${props.serviceType}`,
+    () =>
+      props.serviceType
+        ? getDashboardHygiene(
+            props.site,
+            currentPeriod.value,
+            props.serviceType
+          )
+        : Promise.resolve(null),
+    {
+      watch: [() => props.site, currentPeriod, () => props.serviceType],
+    }
+  );
+
+const { data: weeklyActivityReq, pending: loadingWeeklyActivity } =
+  await useLazyAsyncData(
+    `get-dashboard-weekly-activity-${props.site}-${props.serviceType}`,
+    () =>
+      props.serviceType
+        ? getDashboardHygieneWeeklyActivity(props.site, props.serviceType)
+        : Promise.resolve(null),
+    {
+      watch: [() => props.site, () => props.serviceType],
+    }
+  );
+
+const { data: taskScheduleReq, pending: loadingTaskSchedule } =
+  await useLazyAsyncData(
+    `get-dashboard-task-schedule-${props.site}-${props.serviceType}`,
+    () =>
+      props.serviceType
+        ? getDashboardHygieneTaskSchedule(props.site, props.serviceType)
+        : Promise.resolve(null),
+    {
+      watch: [() => props.site, () => props.serviceType],
+    }
+  );
+
+const { data: attendanceReq, pending: loadingAttendance } =
+  await useLazyAsyncData(
+    `get-dashboard-attendance-${props.site}-${props.serviceType}`,
+    () =>
+      props.serviceType
+        ? getDashboardHygieneAttendance(props.site, props.serviceType)
+        : Promise.resolve(null),
+    {
+      watch: [() => props.site, () => props.serviceType],
+    }
+  );
+
+const { data: feedbacksReq, pending: loadingFeedbacks } =
+  await useLazyAsyncData(
+    `get-dashboard-feedbacks-${props.site}-${props.serviceType}`,
+    () =>
+      props.serviceType
+        ? getDashboardHygieneFeedbacks(props.site, props.serviceType)
+        : Promise.resolve(null),
+    {
+      watch: [() => props.site, () => props.serviceType],
+    }
+  );
+
+const finalLoading = computed(() => {
+  if (props.serviceType) {
+    return (
+      loadingMetrics.value ||
+      loadingWeeklyActivity.value ||
+      loadingTaskSchedule.value ||
+      loadingAttendance.value ||
+      loadingFeedbacks.value
+    );
+  }
+  return props.loading;
+});
+
+const finalDashboardData = computed(() => {
+  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);
+
+  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,
+    },
+    landscapeSchedule: data.landscapeSchedule ?? {
+      count: 0,
+      percentage: 0,
+    },
+    activityChart: {
+      labels: weeklyActivity.map((item: any) => item.day),
+      workOrders: weeklyActivity.map((item: any) => item.workOrder),
+      taskCompleted: weeklyActivity.map((item: any) => item.taskCompleted),
+    },
+    taskScheduleItems: taskScheduleReq.value?.items ?? [],
+    attendanceItems: attendanceReq.value?.items ?? [],
+    feedbackItems: feedbacksReq.value?.items ?? [],
+  };
 });
 
 const emit = defineEmits<{
@@ -469,35 +928,55 @@ const rangeOptions = [
   { label: "7d", value: "This Week" },
   { label: "30d", value: "This Month" },
 ];
-const defaultVisitorOptions = ["All", "Drive-In", "Walk-In", "Pick-up", "Drop-Off", "Delivery", "Contractor"];
+const defaultVisitorOptions = [
+  "All",
+  "Drive-In",
+  "Walk-In",
+  "Pick-up",
+  "Drop-Off",
+  "Delivery",
+  "Contractor",
+];
 
 const dashboardTitle = computed(() => {
   if (props.title) return props.title;
-  const appName = String(runtimeConfig.public.APP_NAME || runtimeConfig.public.APP || "");
+  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 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 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 defaultVisibleWidgetKeys = computed(() => [
-  ...props.cardValues.map((card) => card.key),
-  "activity",
-  "taskSchedule",
-  "staffStatus",
-  "feedbacks",
-  "recentActivity",
+  ...resolvedCardValues.value.map((card) => card.key),
+  ...resolvedExtraWidgetKeys.value,
 ]);
 
 watch(
@@ -510,18 +989,26 @@ watch(
       return;
     }
 
-    visibleWidgetKeys.value = visibleWidgetKeys.value.filter((key) => nextKeys.includes(key));
-    draftVisibleWidgetKeys.value = draftVisibleWidgetKeys.value.filter((key) => nextKeys.includes(key));
+    visibleWidgetKeys.value = visibleWidgetKeys.value.filter((key) =>
+      nextKeys.includes(key)
+    );
+    draftVisibleWidgetKeys.value = draftVisibleWidgetKeys.value.filter((key) =>
+      nextKeys.includes(key)
+    );
   },
-  { immediate: true },
+  { immediate: true }
 );
 
 watch(selectedRange, (period) => {
+  if (props.serviceType) {
+    const apiPeriod = periodValue[period];
+    if (apiPeriod) currentPeriod.value = apiPeriod;
+  }
   emit("updatePeriod", { key: "__all__", period });
 });
 
 const customizeWidgets = computed(() => [
-  ...props.cardValues.map((card) => ({
+  ...resolvedCardValues.value.map((card) => ({
     key: card.key,
     title: card.title,
     description: `Show ${card.title} metrics for the selected period.`,
@@ -538,7 +1025,7 @@ const customizeWidgets = computed(() => [
   },
   {
     key: "staffStatus",
-    title: "Staff Status",
+    title: "Staff Total Attendance",
     description: "See who is on duty, on break, or absent.",
   },
   {
@@ -557,43 +1044,58 @@ 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)
-  ));
+  return customizeWidgets.value.filter(
+    (widget) =>
+      widget.title.toLowerCase().includes(search) ||
+      widget.description.toLowerCase().includes(search)
+  );
 });
-const visitorItems = computed(() => getDashboardArray(["visitorItems", "visitorsList", "visitorTransactionsList"]));
-const visitorOptions = computed(() => buildFilterOptions(defaultVisitorOptions, visitorItems.value, getVisitorFilterValue));
+const visitorItems = computed(() =>
+  getDashboardArray(["visitorItems", "visitorsList", "visitorTransactionsList"])
+);
+const visitorOptions = computed(() =>
+  buildFilterOptions(
+    defaultVisitorOptions,
+    visitorItems.value,
+    getVisitorFilterValue
+  )
+);
 
-const kpiCards = computed(() => props.cardValues.map((mapping, index) => {
-  const metric = mapping.key === "visitors" && isSecurityDashboard.value
-    ? getFilteredVisitorMetric()
-    : getMetric([mapping.key]);
-  const value = getMetricValue(metric, mapping.key);
+const kpiCards = computed(() =>
+  resolvedCardValues.value.map((mapping, index) => {
+    const metric =
+      mapping.key === "visitors" && isSecurityDashboard.value
+        ? getFilteredVisitorMetric()
+        : getMetric([mapping.key]);
+    const value = getMetricValue(metric, mapping.key);
 
-  return {
-    key: mapping.key,
-    title: mapping.title,
-    icon: mapping.icon,
-    tint: getCardTint(mapping.color, index),
-    color: mapping.color || getCardColor(index),
-    value: typeof value === "string" ? value : formatNumber(value),
-    percentage: toNumber(metric.percentage),
-    meta: getMetricMeta(metric),
-    filter: mapping.key === "visitors" && isSecurityDashboard.value
-      ? {
-        model: visitorType.value,
-        options: visitorOptions.value,
-        set: (option: string) => {
-          visitorType.value = option;
-          filterMenus.visitors = false;
-        },
-      }
-      : undefined,
-  };
-}));
+    return {
+      key: mapping.key,
+      title: mapping.title,
+      icon: mapping.icon,
+      tint: getCardTint(mapping.color, index),
+      color: mapping.color || getCardColor(index),
+      value: typeof value === "string" ? value : formatNumber(value),
+      percentage: toNumber(metric.percentage),
+      meta: getMetricMeta(metric),
+      filter:
+        mapping.key === "visitors" && isSecurityDashboard.value
+          ? {
+              model: visitorType.value,
+              options: visitorOptions.value,
+              set: (option: string) => {
+                visitorType.value = option;
+                filterMenus.visitors = false;
+              },
+            }
+          : undefined,
+    };
+  })
+);
 
-const visibleKpiCards = computed(() => kpiCards.value.filter((card) => isWidgetVisible(card.key)));
+const visibleKpiCards = computed(() =>
+  kpiCards.value.filter((card) => isWidgetVisible(card.key))
+);
 
 const activityTitle = computed(() => {
   if (selectedRange.value === "Today") return "Today's Activity";
@@ -601,241 +1103,111 @@ const activityTitle = computed(() => {
   return "This Week Activity";
 });
 
-const activityChart = computed(() => normalizeActivityChart(getActivityChartSource()));
+const activityChart = computed(() =>
+  normalizeActivityChart(getActivityChartSource())
+);
 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") return ["Week 1", "Week 2", "Week 3", "Week 4"];
+  if (selectedRange.value === "Today")
+    return ["12 AM", "4 AM", "8 AM", "12 PM", "4 PM", "8 PM"];
+  if (selectedRange.value === "This Month")
+    return ["Week 1", "Week 2", "Week 3", "Week 4"];
   return ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
 });
-const primarySeries = computed(() => normalizeSeries(activityChart.value.primary, chartLabels.value.length));
-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 chartMax = computed(() => Math.max(1, ...primarySeries.value, ...secondarySeries.value));
-const hasChartData = computed(() => primarySeries.value.some(Boolean) || secondarySeries.value.some(Boolean));
-const chartTicks = [28, 76, 124, 172, 220];
+const primarySeries = computed(() =>
+  normalizeSeries(activityChart.value.primary, chartLabels.value.length)
+);
+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 chartMax = computed(() =>
+  Math.max(1, ...primarySeries.value, ...secondarySeries.value)
+);
+const hasChartData = computed(
+  () => primarySeries.value.some(Boolean) || secondarySeries.value.some(Boolean)
+);
+const chartTicks = [28, 66.4, 104.8, 143.2, 181.6, 220];
+
+const chartYLabels = computed(() => {
+  const max = chartMax.value;
+  return [
+    { text: "0", y: 220 },
+    { text: `$${Math.round(max * 0.2)}`, y: 181.6 },
+    { text: `$${Math.round(max * 0.4)}`, y: 143.2 },
+    { text: `$${Math.round(max * 0.6)}`, y: 104.8 },
+    { text: `$${Math.round(max * 0.8)}`, y: 66.4 },
+    { text: `$${Math.round(max)}`, y: 28 },
+  ];
+});
+
+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 primaryPoints = computed(() => primaryDots.value.map((point) => `${point.x},${point.y}`).join(" "));
-const secondaryPoints = computed(() => secondaryDots.value.map((point) => `${point.x},${point.y}`).join(" "));
+const primaryPath = computed(() => buildSmoothPath(primaryDots.value));
+const secondaryPath = computed(() => buildSmoothPath(secondaryDots.value));
 const chartAxisLabels = computed(() => {
   const labels = chartLabels.value;
   const count = Math.max(1, labels.length - 1);
 
   return labels.map((label, index) => ({
     text: label,
-    x: 54 + ((846 / count) * index),
+    x: 54 + (846 / count) * index,
   }));
 });
 
-const taskScheduleItems = computed<TaskItem[]>(() => getDashboardArray([
-  ...primaryListConfig.value.keys,
-]).map(normalizeTaskItem).slice(0, 4));
-const staffStatusItems = computed<StaffItem[]>(() => getDashboardArray([
-  "staffStatusItems",
-  "attendanceItems",
-  "staffItems",
-]).map(normalizeStaffItem).slice(0, 4));
-const feedbackItems = computed<FeedbackItem[]>(() => getDashboardArray([
-  "feedbackItems",
-  "feedbacksList",
-  "feedbacks",
-]).map(normalizeFeedbackItem).slice(0, 4));
-const recentActivities = computed<DashboardListItem[]>(() => getDashboardArray([
-  "recentActivities",
-  "activityItems",
-]).map(normalizeActivityItem).slice(0, 3));
-
-const EmptyDashboardState = defineComponent({
-  name: "EmptyDashboardState",
-  props: {
-    compact: Boolean,
-  },
-  setup(componentProps) {
-    return () => h("div", { class: ["empty-state", componentProps.compact ? "empty-state-compact" : ""] }, [
-      h("i", { class: "mdi mdi-database-search-outline" }),
-      h("span", "No data to display"),
-    ]);
-  },
-});
-
-const DashboardPanel = defineComponent({
-  name: "DashboardPanel",
-  props: {
-    title: {
-      type: String,
-      required: true,
-    },
-    actionLabel: {
-      type: String,
-      default: "",
-    },
-    variant: {
-      type: String,
-      default: "",
-    },
-  },
-  emits: ["action"],
-  setup(componentProps, { slots, emit: componentEmit }) {
-    return () => h("div", {
-      class: [
-        "dashboard-card",
-        "dashboard-panel",
-        componentProps.variant ? `dashboard-panel-${componentProps.variant}` : "",
-      ],
-    }, [
-      h("div", {
-        class: "panel-header",
-        style: {
-          alignItems: "center",
-          display: "flex",
-          flexDirection: "row",
-          justifyContent: "space-between",
-          width: "100%",
-        },
-      }, [
-        h("h2", {
-          style: {
-            color: "#132b43",
-            fontSize: componentProps.variant === "recent" ? "15px" : "15px",
-            fontWeight: "800",
-            letterSpacing: "0",
-            lineHeight: "1.2",
-            margin: "0",
-            textTransform: componentProps.variant === "recent" ? "uppercase" : "none",
-          },
-        }, componentProps.title),
-        componentProps.actionLabel
-          ? h("button", {
-            class: "panel-action",
-            style: {
-              appearance: "none",
-              background: "transparent",
-              border: "0",
-              color: "#2196f3",
-              cursor: "pointer",
-              fontSize: "12px",
-              fontWeight: "800",
-              lineHeight: "1.2",
-              marginLeft: "auto",
-              padding: "0",
-            },
-            type: "button",
-            onClick: () => componentEmit("action"),
-          }, componentProps.actionLabel)
-          : null,
-      ]),
-      h("div", { class: "panel-body" }, slots.default?.()),
-    ]);
-  },
-});
+const taskScheduleItems = computed<TaskItem[]>(() =>
+  getDashboardArray([...primaryListConfig.value.keys])
+    .map(normalizeTaskItem)
+    .slice(0, 4)
+);
+const staffStatusItems = computed<StaffItem[]>(() =>
+  getDashboardArray(["staffStatusItems", "attendanceItems", "staffItems"])
+    .map(normalizeStaffItem)
+    .slice(0, 4)
+);
+const feedbackItems = computed<FeedbackItem[]>(() =>
+  getDashboardArray(["feedbackItems", "feedbacksList", "feedbacks"])
+    .map(normalizeFeedbackItem)
+    .slice(0, 4)
+);
+const recentActivities = computed<DashboardListItem[]>(() =>
+  getDashboardArray(["recentActivities", "activityItems"])
+    .map(normalizeActivityItem)
+    .slice(0, 3)
+);
 
-const DashboardList = defineComponent({
-  name: "DashboardList",
-  props: {
-    items: {
-      type: Array as () => DashboardListItem[],
-      default: () => [],
-    },
-    emptyIcon: {
-      type: String,
-      default: "mdi-database-search-outline",
-    },
-    alignTime: Boolean,
-  },
-  setup(componentProps) {
-    return () => componentProps.items.length
-      ? h("div", {
-        class: "simple-list",
-        style: {
-          display: "grid",
-          width: "100%",
-        },
-      }, componentProps.items.map((item) => {
-        const tone = getActivityToneStyle(item.tone || "neutral");
-
-        return h("div", {
-          class: "simple-list-row",
-          key: item.id,
-          style: {
-            alignItems: "center",
-            background: "#fff",
-            borderBottom: "1px solid #e0e0e0",
-            display: "grid",
-            gap: "14px",
-            gridTemplateColumns: componentProps.alignTime ? "34px minmax(0, 1fr) 96px" : "34px minmax(0, 1fr)",
-            minHeight: "58px",
-            padding: "10px 0",
-          },
-        }, [
-        h("span", {
-          class: ["list-icon", `list-icon-${item.tone || "neutral"}`],
-          style: {
-            alignItems: "center",
-            background: tone.background,
-            borderRadius: "6px",
-            color: tone.color,
-            display: "inline-flex",
-            fontSize: "13px",
-            height: "25px",
-            justifyContent: "center",
-            width: "25px",
-          },
-        }, [
-          h("i", { class: `mdi ${item.icon || componentProps.emptyIcon}` }),
-        ]),
-        h("div", {
-          class: "list-main",
-          style: {
-            minWidth: "0",
-          },
-        }, [
-          h("strong", {
-            style: {
-              color: "#132b43",
-              display: "block",
-              fontSize: "13px",
-              fontWeight: "700",
-              lineHeight: "1.3",
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap",
-            },
-          }, item.title),
-          item.subtitle ? h("p", {
-            style: {
-              color: "#888",
-              fontSize: "12px",
-              fontWeight: "500",
-              lineHeight: "1.35",
-              margin: "5px 0 0",
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap",
-            },
-          }, item.subtitle) : null,
-        ]),
-        componentProps.alignTime
-          ? h("span", {
-            class: "list-action",
-            style: {
-              color: "#888",
-              fontSize: "12px",
-              fontWeight: "500",
-              justifySelf: "end",
-              textAlign: "right",
-              whiteSpace: "nowrap",
-            },
-          }, item.time || "")
-          : null,
-      ]);
-      }))
-      : h(EmptyDashboardState);
-  },
-});
+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;
+}
 
 function getServiceDisplayName(value: string) {
   const normalized = value.toLowerCase();
@@ -864,7 +1236,7 @@ function getServiceDisplayName(value: string) {
 }
 
 function getMetric(keys: string[]): DashboardMetric {
-  const data = props.dashboardData || {};
+  const data = finalDashboardData.value || {};
   for (const key of keys) {
     const value = data[key];
     if (value && typeof value === "object" && !Array.isArray(value)) {
@@ -892,17 +1264,39 @@ function getMetricValue(metric: DashboardMetric, key?: string) {
 function getMetricMeta(metric: DashboardMetric) {
   const parts: string[] = [];
 
-  if (typeof metric.overdue !== "undefined") parts.push(`${formatNumber(toNumber(metric.overdue))} overdue`);
-  if (typeof metric.inProgress !== "undefined") parts.push(`${formatNumber(toNumber(metric.inProgress))} in progress`);
-  if (typeof metric.pending !== "undefined") parts.push(`${formatNumber(toNumber(metric.pending))} pending`);
-  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`);
-  if (typeof (metric as Record<string, any>).missedCheckpoints !== "undefined" || typeof (metric as Record<string, any>).missed !== "undefined") {
-    parts.push(`${formatNumber(toNumber((metric as Record<string, any>).missedCheckpoints ?? (metric as Record<string, any>).missed))} checkpoint missed`);
+  if (typeof metric.overdue !== "undefined")
+    parts.push(`${formatNumber(toNumber(metric.overdue))} overdue`);
+  if (typeof metric.inProgress !== "undefined")
+    parts.push(`${formatNumber(toNumber(metric.inProgress))} in progress`);
+  if (typeof metric.pending !== "undefined")
+    parts.push(`${formatNumber(toNumber(metric.pending))} pending`);
+  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`
+    );
+  if (
+    typeof (metric as Record<string, any>).missedCheckpoints !== "undefined" ||
+    typeof (metric as Record<string, any>).missed !== "undefined"
+  ) {
+    parts.push(
+      `${formatNumber(
+        toNumber(
+          (metric as Record<string, any>).missedCheckpoints ??
+            (metric as Record<string, any>).missed
+        )
+      )} checkpoint missed`
+    );
   }
-  if (typeof metric.lowStock !== "undefined") parts.push(`${formatNumber(toNumber(metric.lowStock))} low stock`);
-  if (typeof metric.outOfStock !== "undefined") parts.push(`${formatNumber(toNumber(metric.outOfStock))} out of stock`);
-  if (typeof metric.completed !== "undefined" && typeof metric.total !== "undefined") {
+  if (typeof metric.lowStock !== "undefined")
+    parts.push(`${formatNumber(toNumber(metric.lowStock))} low stock`);
+  if (typeof metric.outOfStock !== "undefined")
+    parts.push(`${formatNumber(toNumber(metric.outOfStock))} out of stock`);
+  if (
+    typeof metric.completed !== "undefined" &&
+    typeof metric.total !== "undefined"
+  ) {
     parts.push(`${formatNumber(toNumber(metric.completed))} completed`);
   }
 
@@ -918,29 +1312,38 @@ function getCardTint(color: string, index: number) {
   if (!color) return tints[index % tints.length];
 
   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";
+  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";
 }
 
 function getActivityChartSource() {
-  const data = props.dashboardData || {};
-  return data.activityChart ||
+  const data = finalDashboardData.value || {};
+  return (
+    data.activityChart ||
     data.statistic?.activityChart ||
     data.statistics?.activityChart ||
     data.statisticChart ||
     data.statisticsChart ||
     data.activityStatistics ||
     data.activityStatistic ||
-    {};
+    {}
+  );
 }
 
 function normalizeActivityChart(source: any) {
   const labels = Array.isArray(source?.labels)
     ? source.labels.map((label: any) => String(label))
     : [];
-  const primary = extractChartSeries(source, ["workOrders", "workOrder", "work_orders"]);
+  const primary = extractChartSeries(source, [
+    "workOrders",
+    "workOrder",
+    "work_orders",
+  ]);
   const secondaryCandidate = getSecondaryChartSeries(source);
 
   return {
@@ -954,7 +1357,10 @@ function normalizeActivityChart(source: any) {
 
 function getSecondaryChartSeries(source: any) {
   const candidates = [
-    { label: "Task Completed", keys: ["taskCompleted", "completedTasks", "completed"] },
+    {
+      label: "Task Completed",
+      keys: ["taskCompleted", "completedTasks", "completed"],
+    },
     { label: "Incident", keys: ["incidents", "incident", "incidentReports"] },
     { label: "Feedback", keys: ["feedbacks", "feedback", "feedbackTickets"] },
   ];
@@ -975,7 +1381,9 @@ function extractChartSeries(source: any, keys: string[]) {
 
   if (Array.isArray(source?.datasets)) {
     const dataset = source.datasets.find((item: any) => {
-      const keyText = String(item?.key || item?.label || item?.name || "").toLowerCase();
+      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);
@@ -986,20 +1394,22 @@ function extractChartSeries(source: any, keys: string[]) {
 
 function normalizeSeries(value: any, targetLength: number) {
   const source = Array.isArray(value) ? value : [];
-  return Array.from({ length: targetLength }, (_, index) => toNumber(source[index]));
+  return Array.from({ length: targetLength }, (_, index) =>
+    toNumber(source[index])
+  );
 }
 
 function buildChartDots(series: number[]) {
   const count = Math.max(1, series.length - 1);
 
   return series.map((value, index) => ({
-    x: 54 + ((846 / count) * index),
-    y: 220 - ((toNumber(value) / chartMax.value) * 184),
+    x: 54 + (846 / count) * index,
+    y: 220 - (toNumber(value) / chartMax.value) * 184,
   }));
 }
 
 function getDashboardArray(keys: string[]) {
-  const data = props.dashboardData || {};
+  const data = finalDashboardData.value || {};
 
   for (const key of keys) {
     const value = data[key];
@@ -1021,23 +1431,32 @@ function getFilteredVisitorMetric(): DashboardMetric {
     return {
       ...metric,
       count: toNumber(metric.count ?? items.length),
-      currentlyOnSite: toNumber(metric.currentlyOnSite ?? items.filter((item) => !isClosedStatus(item.status) && !item.checkOut).length),
+      currentlyOnSite: toNumber(
+        metric.currentlyOnSite ??
+          items.filter(
+            (item: any) => !isClosedStatus(item.status) && !item.checkOut
+          ).length
+      ),
     };
   }
 
-  const filtered = items.filter((item) => getVisitorFilterValue(item) === selected);
+  const filtered = items.filter(
+    (item: any) => getVisitorFilterValue(item) === selected
+  );
 
   return {
     ...metric,
     count: filtered.length,
-    currentlyOnSite: filtered.filter((item) => !isClosedStatus(item.status) && !item.checkOut).length,
+    currentlyOnSite: filtered.filter(
+      (item: any) => !isClosedStatus(item.status) && !item.checkOut
+    ).length,
   };
 }
 
 function buildFilterOptions(
   defaults: string[],
   items: Record<string, any>[],
-  getValue: (item: Record<string, any>) => string,
+  getValue: (item: Record<string, any>) => string
 ) {
   const options = new Set(defaults);
   items.forEach((item) => {
@@ -1049,7 +1468,9 @@ function buildFilterOptions(
 }
 
 function getVisitorFilterValue(item: Record<string, any>) {
-  const raw = String(item.type || item.visitorType || item.category || "").toLowerCase();
+  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";
@@ -1060,38 +1481,95 @@ function getVisitorFilterValue(item: Record<string, any>) {
 }
 
 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 || "";
-  const person = item.person || item.assigneeName || item.assignedTo?.name || item.staff?.name || item.createdBy?.name || "Unassigned";
+  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 ||
+    "";
+  const person =
+    item.person ||
+    item.assigneeName ||
+    item.assignedTo?.name ||
+    item.staff?.name ||
+    item.createdBy?.name ||
+    "Unassigned";
 
   return {
     id: String(item.id || item._id || `${title}-${index}`),
     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),
     raw: item,
   };
 }
 
-function normalizeStaffItem(item: Record<string, any>, index: number): StaffItem {
-  const name = item.name || item.employeeName || item.user?.name || item.staff?.name || item.createdByName || "Unassigned";
-  const role = item.role || item.jobTitle || item.designation || item.position || "Officer";
+function normalizeStaffItem(
+  item: Record<string, any>,
+  index: number
+): StaffItem {
+  const name =
+    item.name ||
+    item.employeeName ||
+    item.user?.userName ||
+    item.staff?.userName ||
+    item.userName;
+  const role =
+    item.role ||
+    item.userRole ||
+    item.userrole ||
+    item.jobTitle ||
+    item.designation ||
+    item.position ||
+    item.type;
 
   return {
     id: String(item.id || item._id || `${name}-${index}`),
     name,
     role,
-    status: normalizeStatus(item.statusLabel || item.status || item.currentStatus || item.attendanceStatus || "Off duty"),
+    status: normalizeStatus(
+      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 || "";
-  const person = item.person || item.createdByName || item.submittedBy || item.createdBy?.name || item.user?.name || "Unassigned";
+  const person =
+    item.createdByName ||
+    item.person ||
+    item.userName ||
+    item.submittedBy ||
+    item.createdBy?.name ||
+    item.user?.name ||
+    "Unassigned";
 
   return {
     id: String(item.id || item._id || `${title}-${index}`),
@@ -1103,9 +1581,18 @@ function normalizeFeedbackItem(item: Record<string, any>, index: number): Feedba
   };
 }
 
-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 || "";
+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}`),
@@ -1125,7 +1612,11 @@ function formatActivityTime(item: Record<string, any>) {
   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)) {
+  if (
+    /\b(ago|now|today|yesterday|min|mins|hr|hrs|hour|hours|day|days)\b/i.test(
+      rawText
+    )
+  ) {
     return rawText;
   }
 
@@ -1160,7 +1651,14 @@ function getActivityToneStyle(tone: string) {
 }
 
 function getItemTime(item: Record<string, any>) {
-  return item.createdAt || item.updatedAt || item.date || item.time || item.created_on || item.updated_on;
+  return (
+    item.createdAt ||
+    item.updatedAt ||
+    item.date ||
+    item.time ||
+    item.created_on ||
+    item.updated_on
+  );
 }
 
 function normalizeStatus(value: any) {
@@ -1174,29 +1672,53 @@ function normalizeStatus(value: any) {
 
 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";
+  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";
 }
 
 function getStaffTone(status: any) {
   const normalized = String(status || "").toLowerCase();
-  if (normalized.includes("duty") || normalized.includes("present") || normalized.includes("active")) return "success";
+  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";
+  if (normalized.includes("absent") || normalized.includes("off"))
+    return "danger";
   return "neutral";
 }
 
 function isClosedStatus(status: any) {
   const normalized = String(status || "").toLowerCase();
-  return normalized.includes("complete") ||
+  return (
+    normalized.includes("complete") ||
     normalized.includes("cancel") ||
     normalized.includes("reject") ||
     normalized.includes("closed") ||
     normalized.includes("deleted") ||
     normalized.includes("check-out") ||
-    normalized.includes("checkout");
+    normalized.includes("checkout")
+  );
 }
 
 function isWidgetVisible(key: string) {
@@ -1272,7 +1794,11 @@ function getInitials(name: string) {
     .split(/\s+/)
     .filter(Boolean);
   if (!parts.length) return "?";
-  return parts.slice(0, 2).map((part) => part[0]).join("").toUpperCase();
+  return parts
+    .slice(0, 2)
+    .map((part) => part[0])
+    .join("")
+    .toUpperCase();
 }
 
 function formatNumber(value: number) {
@@ -1304,797 +1830,3 @@ function formatRelativeTime(value: any) {
   return `${diffDays} day${diffDays === 1 ? "" : "s"} ago`;
 }
 </script>
-
-<style scoped>
-.service-dashboard {
-  color: #132b43;
-  padding-bottom: 32px;
-}
-
-.dashboard-header {
-  align-items: flex-start;
-  display: flex;
-  gap: 20px;
-  justify-content: space-between;
-  margin-bottom: 24px;
-}
-
-.dashboard-title {
-  color: #0b2f47;
-  font-size: 28px;
-  font-weight: 800;
-  letter-spacing: 0;
-  line-height: 1.2;
-  margin: 0;
-}
-
-.site-label {
-  align-items: center;
-  color: #6d7d8b;
-  display: flex;
-  font-size: 13px;
-  gap: 6px;
-  margin-top: 8px;
-}
-
-.header-actions {
-  align-items: center;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  justify-content: flex-end;
-}
-
-.action-button {
-  border-color: #d9e1e8;
-  border-radius: 6px;
-  color: #102b40;
-  height: 36px;
-  font-weight: 700;
-  letter-spacing: 0.04em;
-  min-height: 36px;
-  padding: 0 16px;
-}
-
-.action-button :deep(.v-btn__content) {
-  font-size: 15px;
-  line-height: 1;
-}
-
-.action-button :deep(.v-btn__prepend) {
-  margin-inline: 0 8px;
-}
-
-.action-button :deep(.v-btn__append) {
-  margin-inline: 8px 0;
-}
-
-.range-toggle {
-  border: 1px solid #d9e1e8;
-  border-radius: 6px;
-  height: 36px;
-  min-height: 36px;
-  overflow: hidden;
-}
-
-.range-toggle :deep(.v-btn) {
-  border-radius: 0;
-  color: #102b40;
-  font-size: 14px;
-  font-weight: 500;
-  height: 34px;
-  letter-spacing: 0.04em;
-  min-height: 34px;
-  min-width: 62px;
-  padding: 0 20px;
-}
-
-.range-toggle :deep(.v-btn--active) {
-  background: #e0e0e0;
-}
-
-.range-toggle :deep(.v-btn__overlay) {
-  opacity: 0;
-}
-
-.export-menu,
-.filter-menu {
-  border-color: #d9e1e8;
-  border-radius: 7px;
-  box-shadow: 0 12px 30px rgba(16, 35, 54, 0.12);
-}
-
-.kpi-grid {
-  margin-bottom: 14px;
-}
-
-.dashboard-card {
-  background: #fff;
-  border: 1px solid #d9e0e7;
-  border-radius: 8px;
-  box-shadow: 0 1px 2px rgba(15, 35, 54, 0.04);
-}
-
-.kpi-card {
-  display: flex;
-  flex-direction: column;
-  min-height: 158px;
-  padding: 16px 18px 18px;
-}
-
-.kpi-topline {
-  align-items: flex-start;
-  display: flex;
-  justify-content: space-between;
-}
-
-.kpi-icon {
-  align-items: center;
-  border-radius: 8px;
-  display: inline-flex;
-  height: 28px;
-  justify-content: center;
-  width: 28px;
-}
-
-.kpi-icon :deep(.v-icon) {
-  font-size: 15px;
-  height: 15px;
-  width: 15px;
-}
-
-.mini-filter {
-  border-color: #d9e1e8;
-  font-size: 12px;
-  height: 26px;
-  min-width: 50px;
-  padding-inline: 10px 6px;
-}
-
-.mini-filter :deep(.v-btn__append) {
-  margin-inline-start: 4px;
-}
-
-.kpi-content {
-  display: flex;
-  flex-direction: column;
-  margin-top: 26px;
-  min-width: 0;
-}
-
-.kpi-label {
-  color: #2a465a;
-  font-size: 12px;
-  font-weight: 800;
-  letter-spacing: 0;
-  line-height: 1.2;
-  margin: 0 0 13px;
-  text-transform: uppercase;
-}
-
-.kpi-value-row {
-  align-items: center;
-  display: flex;
-  min-height: 31px;
-}
-
-.kpi-value-row strong {
-  color: #092f49;
-  font-size: 30px;
-  font-weight: 800;
-  letter-spacing: 0;
-  line-height: 1;
-}
-
-.kpi-meta-row {
-  align-items: center;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-top: 12px;
-  min-height: 22px;
-}
-
-.kpi-meta-row :deep(.v-chip) {
-  border-radius: 999px;
-  font-size: 11px;
-  font-weight: 800;
-  height: 20px;
-  padding-inline: 8px;
-}
-
-.kpi-meta-row :deep(.v-chip__prepend) {
-  margin-inline-end: 3px;
-}
-
-.kpi-meta {
-  color: #4f6576;
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 1.35;
-  margin: 0;
-}
-
-.activity-card {
-  padding: 18px 20px 14px;
-}
-
-.section-header,
-.panel-header {
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-}
-
-.section-header h2,
-.panel-header h2 {
-  color: #132b43;
-  font-size: 15px;
-  font-weight: 800;
-  letter-spacing: 0;
-  line-height: 1.2;
-  margin: 0;
-}
-
-.chart-wrap {
-  margin-top: 18px;
-}
-
-.activity-chart {
-  display: block;
-  height: 260px;
-  width: 100%;
-}
-
-.chart-grid {
-  stroke: #e9eef2;
-  stroke-width: 1;
-}
-
-.primary-line,
-.secondary-line {
-  fill: none;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  stroke-width: 3;
-}
-
-.primary-line {
-  stroke: #2196f3;
-}
-
-.secondary-line {
-  stroke: #1eca6b;
-}
-
-.primary-dot,
-.secondary-dot {
-  stroke: #fff;
-  stroke-width: 2;
-}
-
-.primary-dot {
-  fill: #2196f3;
-}
-
-.secondary-dot {
-  fill: #1eca6b;
-}
-
-.chart-label {
-  fill: #7e8b96;
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.chart-legend {
-  align-items: center;
-  display: flex;
-  gap: 18px;
-  justify-content: center;
-  margin-top: 10px;
-}
-
-.chart-legend span {
-  align-items: center;
-  color: #6d7c88;
-  display: inline-flex;
-  font-size: 12px;
-  font-weight: 700;
-  gap: 7px;
-}
-
-.legend-dot {
-  border-radius: 50%;
-  display: inline-flex;
-  height: 8px;
-  width: 8px;
-}
-
-.legend-dot.primary {
-  background: #2196f3;
-}
-
-.legend-dot.secondary {
-  background: #1eca6b;
-}
-
-.dashboard-section-grid {
-  align-items: stretch;
-  margin-top: 14px;
-}
-
-.dashboard-section-grid > .v-col {
-  display: flex;
-}
-
-.dashboard-panel {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  padding: 24px;
-  width: 100%;
-}
-
-.dashboard-panel-recent {
-  min-height: 224px;
-  padding: 26px 30px 16px;
-}
-
-.panel-body {
-  flex: 1;
-  margin-top: 20px;
-  max-height: 380px;
-  overflow-y: auto;
-}
-
-.panel-action,
-.row-action {
-  appearance: none;
-  background: transparent;
-  border: 0;
-  color: #2196f3;
-  cursor: pointer;
-  font-size: 12px;
-  font-weight: 800;
-  letter-spacing: 0;
-  line-height: 1.2;
-  padding: 0;
-}
-
-.panel-action {
-  margin-right: -10px;
-  padding: 0 10px;
-}
-
-.task-list,
-.feedback-list,
-.staff-list {
-  display: grid;
-  gap: 10px;
-}
-
-.task-row,
-.feedback-row {
-  align-items: center;
-  background: #fff;
-  border: 1px solid #e0e5ea;
-  border-radius: 8px;
-  display: grid;
-  gap: 16px;
-  min-height: 76px;
-  padding: 15px 15px 15px 10px;
-}
-
-.task-row {
-  grid-template-columns: minmax(220px, 280px) minmax(130px, 170px) minmax(82px, 120px) minmax(44px, 1fr);
-}
-
-.feedback-row {
-  grid-template-columns: minmax(220px, 280px) minmax(130px, 170px) minmax(82px, 120px) minmax(44px, 1fr);
-}
-
-.task-row:hover,
-.feedback-row:hover,
-.staff-row:hover,
-.simple-list-row:hover {
-  border-color: #d8e3ec;
-  box-shadow: 0 6px 14px rgba(15, 44, 69, 0.04);
-}
-
-.task-summary,
-.feedback-summary,
-.staff-main,
-.list-main {
-  min-width: 0;
-}
-
-.task-summary,
-.feedback-summary {
-  padding: 0 10px;
-}
-
-.task-summary strong,
-.feedback-summary strong,
-.staff-main strong,
-.list-main strong {
-  color: #132b43;
-  display: block;
-  font-size: 13px;
-  font-weight: 800;
-  line-height: 1.3;
-  white-space: normal;
-}
-
-.task-summary p,
-.feedback-summary p,
-.staff-main p,
-.list-main p {
-  color: #888;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 1.35;
-  margin: 5px 0 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.person-cell {
-  align-items: center;
-  color: #888;
-  display: inline-flex;
-  font-size: 12px;
-  font-weight: 600;
-  gap: 7px;
-  min-width: 0;
-}
-
-.person-cell span:last-child {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.avatar {
-  align-items: center;
-  background: #e0e0e0;
-  border-radius: 999px;
-  color: #fff;
-  display: inline-flex;
-  flex: 0 0 34px;
-  font-size: 11px;
-  font-weight: 800;
-  height: 34px;
-  justify-content: center;
-  letter-spacing: 0;
-  width: 34px;
-}
-
-.status-pill {
-  align-items: center;
-  border-radius: 999px;
-  display: inline-flex;
-  font-size: 12px;
-  font-weight: 600;
-  justify-content: center;
-  line-height: 1;
-  min-height: 26px;
-  padding: 6px 10px;
-  white-space: nowrap;
-  width: fit-content;
-}
-
-.status-pill-success {
-  background: rgba(30, 202, 107, 0.5);
-  color: #015b29;
-}
-
-.status-pill-info {
-  background: #d8ecff;
-  color: #14557d;
-}
-
-.status-pill-warning {
-  background: #ffe9c7;
-  color: #9c5e0e;
-}
-
-.status-pill-danger {
-  background: #ffd9d6;
-  color: #9f2f29;
-}
-
-.status-pill-neutral {
-  background: #e0e0e0;
-  color: #616065;
-}
-
-.row-action-right {
-  justify-self: end;
-}
-
-.task-row .row-action-right {
-  align-items: center;
-  background: #fff;
-  border: 1px solid #b9ddfb;
-  border-radius: 8px;
-  box-shadow: 0 1px 3px rgba(33, 150, 243, 0.1);
-  color: #0b8ff1;
-  display: inline-flex;
-  height: 32px;
-  justify-content: center;
-  min-width: 54px;
-  padding: 0 12px;
-}
-
-.task-row .row-action-right:hover {
-  background: #f2f9ff;
-  border-color: #80c3f7;
-  color: #0878d3;
-}
-
-.feedback-row .row-action-right {
-  padding-right: 8px;
-}
-
-.staff-row {
-  align-items: center;
-  background: #fff;
-  border: 1px solid #e0e5ea;
-  border-radius: 8px;
-  display: grid;
-  gap: 10px;
-  grid-template-columns: 34px minmax(0, 1fr) auto;
-  min-height: 68px;
-  padding: 12px 14px;
-}
-
-.simple-list {
-  display: grid;
-}
-
-.simple-list-row {
-  align-items: center;
-  background: #fff;
-  border-bottom: 1px solid #e8edf1;
-  display: grid;
-  gap: 14px;
-  grid-template-columns: 30px minmax(0, 1fr) 82px;
-  min-height: 58px;
-  padding: 9px 0;
-}
-
-.simple-list-row:last-child {
-  border-bottom: 0;
-}
-
-.simple-list-row:hover {
-  box-shadow: none;
-}
-
-.list-icon {
-  align-items: center;
-  border-radius: 6px;
-  display: inline-flex;
-  flex: 0 0 auto;
-  font-size: 13px;
-  height: 25px;
-  justify-content: center;
-  width: 25px;
-}
-
-.list-action {
-  color: #768493;
-  font-size: 12px;
-  font-weight: 700;
-  justify-self: end;
-  text-align: right;
-  white-space: nowrap;
-}
-
-.list-icon-info {
-  background: #d8ecff;
-  color: #17496f;
-}
-
-.list-icon-danger {
-  background: #ffd9d6;
-  color: #bd413c;
-}
-
-.list-icon-success {
-  background: #d8f4e3;
-  color: #2b9160;
-}
-
-.list-icon-warning {
-  background: #ffe9c7;
-  color: #be7418;
-}
-
-.list-icon-neutral {
-  background: #edf2f6;
-  color: #607386;
-}
-
-.empty-state {
-  align-items: center;
-  color: #8a98a5;
-  display: flex;
-  flex-direction: column;
-  font-size: 13px;
-  font-weight: 700;
-  gap: 8px;
-  justify-content: center;
-  min-height: 140px;
-  text-align: center;
-}
-
-.empty-state i {
-  font-size: 28px;
-}
-
-.empty-state-compact {
-  min-height: 72px;
-}
-
-.customize-dialog {
-  background: #fff;
-}
-
-.customize-dialog-header {
-  align-items: flex-start;
-  border-bottom: 1px solid #eef2f5;
-  display: flex;
-  justify-content: space-between;
-  padding: 24px 26px 18px;
-}
-
-.customize-dialog-header h2 {
-  color: #0b2f47;
-  font-size: 20px;
-  font-weight: 800;
-  line-height: 1.2;
-  margin: 0;
-}
-
-.customize-dialog-header p {
-  color: #71808d;
-  font-size: 13px;
-  margin: 6px 0 0;
-}
-
-.customize-dialog-body {
-  padding: 20px 26px 8px;
-}
-
-.reset-row {
-  display: flex;
-  justify-content: flex-end;
-  margin: 12px 0;
-}
-
-.widget-list {
-  display: grid;
-  gap: 10px;
-}
-
-.widget-row {
-  align-items: center;
-  border: 1px solid #e2e8ee;
-  border-radius: 8px;
-  display: flex;
-  gap: 16px;
-  justify-content: space-between;
-  padding: 14px 16px;
-}
-
-.widget-row strong {
-  color: #132b43;
-  display: block;
-  font-size: 14px;
-  font-weight: 800;
-}
-
-.widget-row p {
-  color: #71808d;
-  font-size: 12px;
-  margin: 4px 0 0;
-}
-
-.customize-dialog-actions {
-  border-top: 1px solid #eef2f5;
-  gap: 10px;
-  justify-content: flex-end;
-  padding: 16px 26px 22px;
-}
-
-.cancel-button {
-  color: #607386;
-  font-weight: 800;
-}
-
-.submit-button {
-  background: #0b2f47;
-  color: #fff;
-  font-weight: 800;
-  min-width: 110px;
-}
-
-@media (max-width: 960px) {
-  .dashboard-header {
-    align-items: stretch;
-    flex-direction: column;
-  }
-
-  .header-actions {
-    justify-content: flex-start;
-  }
-
-  .task-row,
-  .feedback-row {
-    grid-template-columns: 1fr;
-  }
-
-  .row-action-right {
-    justify-self: start;
-  }
-
-  .status-pill {
-    margin-left: 0;
-  }
-}
-
-@media (max-width: 640px) {
-  .dashboard-title {
-    font-size: 24px;
-  }
-
-  .header-actions,
-  .action-button,
-  .range-toggle {
-    width: 100%;
-  }
-
-  .range-toggle :deep(.v-btn) {
-    flex: 1 1 0;
-  }
-
-  .kpi-card,
-  .activity-card,
-  .dashboard-panel {
-    padding: 16px;
-  }
-
-  .kpi-card {
-    min-height: 154px;
-  }
-
-  .kpi-content {
-    margin-left: 0;
-    margin-top: 22px;
-  }
-
-  .kpi-value-row strong {
-    font-size: 26px;
-  }
-
-  .staff-row {
-    grid-template-columns: 30px minmax(0, 1fr);
-  }
-
-  .staff-row .status-pill {
-    grid-column: 2;
-  }
-
-  .simple-list-row {
-    grid-template-columns: 30px minmax(0, 1fr);
-  }
-
-  .list-action {
-    grid-column: 2;
-    justify-self: start;
-  }
-}
-</style>