@7365admin1/layer-common 3.0.10 → 3.0.12

package/components/DashboardMain.vue

@@ -64,7 +64,11 @@
             size="small"
             :style="
               selectedRange === range.value
-                ? { backgroundColor: '#e2e8f0', color: '#0b2f47', fontWeight: '600' }
+                ? {
+                    backgroundColor: '#e2e8f0',
+                    color: '#0b2f47',
+                    fontWeight: '600',
+                  }
                 : { backgroundColor: 'transparent', color: '#64748b' }
             "
           >
@@ -92,7 +96,13 @@
         lg="3"
         class="d-flex"
       >
-        <v-card flat border rounded="lg" class="pa-4 flex-grow-1" style="min-height: 158px">
+        <v-card
+          flat
+          border
+          rounded="lg"
+          class="pa-4 flex-grow-1"
+          style="min-height: 158px"
+        >
           <div class="d-flex align-start justify-space-between">
             <div
               class="d-inline-flex align-center justify-center rounded-lg"
@@ -127,7 +137,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>
@@ -143,7 +155,9 @@
               {{ 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
@@ -284,7 +298,12 @@
           >
             <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>
@@ -293,7 +312,12 @@
           >
             <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>
@@ -334,7 +358,8 @@
                   </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>
@@ -429,25 +454,50 @@
               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)"
+              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"
+                  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>
+                <span style="font-size: 13px; color: #94a3b8">{{
+                  item.subtitle
+                }}</span>
               </div>
 
-              <div style="flex: 1; display: flex; align-items: center; gap: 12px">
+              <div
+                style="flex: 1; display: flex; align-items: center; gap: 12px"
+              >
                 <AvatarMain :name="item.person" :size="36" />
-                <span style="font-size: 14px; color: #64748b">{{ item.person }}</span>
+                <span 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"
+                  style="
+                    padding: 6px 16px;
+                    border-radius: 20px;
+                    font-size: 13px;
+                    font-weight: 500;
+                    text-transform: capitalize;
+                  "
                 >
                   {{ item.status || "To-Do" }}
                 </div>
@@ -459,7 +509,12 @@
                   class="text-none font-weight-medium"
                   size="small"
                   color="#3b82f6"
-                  style="border-color: #e2e8f0; border-radius: 8px; padding: 0 16px; height: 32px"
+                  style="
+                    border-color: #e2e8f0;
+                    border-radius: 8px;
+                    padding: 0 16px;
+                    height: 32px;
+                  "
                   @click="goToListItem(item, 'feedbacks')"
                   >View</v-btn
                 >
@@ -586,7 +641,10 @@
                     `figma-icon-badge-${getListTone(item)}`,
                   ]"
                 >
-                  <v-icon :icon="item.icon || 'mdi-alert-circle-outline'" size="15" />
+                  <v-icon
+                    :icon="item.icon || 'mdi-alert-circle-outline'"
+                    size="15"
+                  />
                 </span>
                 <div class="figma-list-main">
                   <strong>{{ item.title }}</strong>
@@ -661,7 +719,9 @@
               </div>
 
               <div class="feedback-person">
-                <span class="feedback-avatar">{{ getInitials(item.person) }}</span>
+                <span class="feedback-avatar">{{
+                  getInitials(item.person)
+                }}</span>
                 <span>{{ item.person }}</span>
               </div>
 
@@ -703,19 +763,29 @@
             </button>
           </div>
           <div class="figma-panel-body">
-            <div
-              v-if="activePatrolItems.length"
-              class="figma-list mt-2"
-            >
+            <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)"
+                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"
+                    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">{{
@@ -723,8 +793,13 @@
                   }}</span>
                 </div>
 
-                <div style="flex: 1; display: flex; align-items: center; gap: 12px">
-                  <AvatarMain :name="item.person || item.assignedTo" :size="36" />
+                <div
+                  style="flex: 1; display: flex; align-items: center; gap: 12px"
+                >
+                  <AvatarMain
+                    :name="item.person || item.assignedTo"
+                    :size="36"
+                  />
                   <span style="font-size: 14px; color: #64748b">{{
                     item.person || item.assignedTo
                   }}</span>
@@ -733,7 +808,13 @@
                 <div style="flex: 1; display: flex; justify-content: center">
                   <div
                     :style="getPatrolStatusStyle(item.status)"
-                    style="padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 500; text-transform: capitalize"
+                    style="
+                      padding: 6px 16px;
+                      border-radius: 20px;
+                      font-size: 13px;
+                      font-weight: 500;
+                      text-transform: capitalize;
+                    "
                   >
                     {{ item.status }}
                   </div>
@@ -745,7 +826,12 @@
                     class="text-none font-weight-medium"
                     size="small"
                     color="#3b82f6"
-                    style="border-color: #e2e8f0; border-radius: 8px; padding: 0 16px; height: 32px"
+                    style="
+                      border-color: #e2e8f0;
+                      border-radius: 8px;
+                      padding: 0 16px;
+                      height: 32px;
+                    "
                     @click="goToDashboardRoute('virtual-patrol')"
                     >View</v-btn
                   >
@@ -775,17 +861,37 @@
                 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)"
+                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'"
+                    :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
+                      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"
@@ -796,7 +902,12 @@
                 <div style="flex: 0 0 auto">
                   <div
                     :style="getStaffStatusPillStyle(item.status)"
-                    style="padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 500"
+                    style="
+                      padding: 6px 16px;
+                      border-radius: 20px;
+                      font-size: 13px;
+                      font-weight: 500;
+                    "
                   >
                     {{ item.status || "On duty" }}
                   </div>
@@ -820,25 +931,50 @@
               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)"
+              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"
+                  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>
+                <span style="font-size: 13px; color: #94a3b8">{{
+                  item.subtitle
+                }}</span>
               </div>
 
-              <div style="flex: 1; display: flex; align-items: center; gap: 12px">
+              <div
+                style="flex: 1; display: flex; align-items: center; gap: 12px"
+              >
                 <AvatarMain :name="item.person" :size="36" />
-                <span style="font-size: 14px; color: #64748b">{{ item.person }}</span>
+                <span 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"
+                  style="
+                    padding: 6px 16px;
+                    border-radius: 20px;
+                    font-size: 13px;
+                    font-weight: 500;
+                    text-transform: capitalize;
+                  "
                 >
                   {{ item.status || "To-Do" }}
                 </div>
@@ -850,7 +986,12 @@
                   class="text-none font-weight-medium"
                   size="small"
                   color="#3b82f6"
-                  style="border-color: #e2e8f0; border-radius: 8px; padding: 0 16px; height: 32px"
+                  style="
+                    border-color: #e2e8f0;
+                    border-radius: 8px;
+                    padding: 0 16px;
+                    height: 32px;
+                  "
                   @click="goToListItem(item, 'feedbacks')"
                   >View</v-btn
                 >
@@ -1085,6 +1226,58 @@ const {
   getDashboardHygieneFeedbacks,
 } = useDashboard();
 
+const { userAppRole } = useLocalSetup();
+const { hasPermission } = usePermission();
+const { dashboardPermissions } = useCommonPermissions();
+
+function canViewWidget(key: string) {
+  if (!userAppRole.value) return true;
+  if (userAppRole.value.permissions?.includes("*")) return true;
+
+  const widgetToModulePermissionMap: Record<string, string[]> = {
+    workOrders: ["work-orders:see-all-work-orders"],
+    incidents: ["incident-reports:see-incident-reports", "incident-reports:see-all-incident-reports"],
+    visitors: ["visitor:see-all-visitor"],
+    facilityBookings: ["facility-booking:see-all-facility-booking"],
+    patrolCompliance: ["virtual-patrol:see-all-virtual-patrol-logs", "virtual-patrol:see-all-virtual-patrol-route"],
+    staffStatus: ["attendance:see-all-attendance"],
+    attendance: ["attendance:see-all-attendance"],
+    feedbacks: ["feedbacks:see-all-feedbacks"],
+    upcomingEvents: ["bulletin-boards:see-all-bulletin-boards", "bulletin-board:see-all-bulletin-board"],
+    workOrderStatus: ["work-orders:see-all-work-orders"],
+    activePatrol: ["virtual-patrol:see-all-virtual-patrol-logs", "virtual-patrol:see-all-virtual-patrol-route"],
+    taskSchedule: ["cleaning-schedule-mgmt:see-all-schedules"]
+  };
+
+  const modulePerms = widgetToModulePermissionMap[key];
+  if (modulePerms && modulePerms.some(p => userAppRole.value.permissions?.includes(p))) {
+    return true;
+  }
+
+  const actionMap: Record<string, string> = {
+    activity: "view-activity",
+    taskSchedule: "view-task-schedule",
+    staffStatus: "view-attendance-widget",
+    attendance: "view-attendance-widget",
+    feedbacks: "view-feedbacks-widget",
+    upcomingEvents: "view-upcoming-events",
+    todayReminders: "view-today-reminders",
+    todayAttentions: "view-today-attentions",
+    workOrderStatus: "view-work-order-status",
+    activePatrol: "view-active-patrol",
+  };
+
+  const action = actionMap[key];
+  if (!action) return true;
+
+  return hasPermission(
+    userAppRole.value,
+    { dashboard: dashboardPermissions },
+    "dashboard",
+    action
+  );
+}
+
 // ─── State ────────────────────────────────────────────────────────────────────
 
 const router = useRouter();
@@ -1139,7 +1332,11 @@ const { data: getDashboardReq, pending: loadingMetrics } =
     `get-dashboard-${props.site}-${props.serviceType}`,
     () =>
       props.serviceType && isHygieneMode.value
-        ? getDashboardHygiene(props.site, currentPeriod.value, props.serviceType as TServiceType)
+        ? getDashboardHygiene(
+            props.site,
+            currentPeriod.value,
+            props.serviceType as TServiceType
+          )
         : Promise.resolve(null),
     {
       watch: [() => props.site, currentPeriod, () => props.serviceType],
@@ -1156,7 +1353,9 @@ const { data: getDashboardAltReq, pending: loadingAltMetrics } =
             props.site,
             props.serviceType as TServiceType,
             currentPeriod.value,
-            currentVisitorTypeParam.value ? { type: currentVisitorTypeParam.value } : {}
+            currentVisitorTypeParam.value
+              ? { type: currentVisitorTypeParam.value }
+              : {}
           )
         : Promise.resolve(null),
     {
@@ -1251,10 +1450,19 @@ const finalLoading = computed(() => {
     );
   }
   if (isPropertyMode.value) {
-    return loadingAltMetrics.value || loadingWeeklyActivity.value || loadingFeedbacks.value;
+    return (
+      loadingAltMetrics.value ||
+      loadingWeeklyActivity.value ||
+      loadingFeedbacks.value
+    );
   }
   // security
-  return loadingAltMetrics.value || loadingWeeklyActivity.value || loadingAttendance.value || loadingFeedbacks.value;
+  return (
+    loadingAltMetrics.value ||
+    loadingWeeklyActivity.value ||
+    loadingAttendance.value ||
+    loadingFeedbacks.value
+  );
 });
 
 // ─── Merged Dashboard Data ────────────────────────────────────────────────────
@@ -1317,9 +1525,21 @@ const finalDashboardData = computed<Record<string, any>>(() => {
       ...data,
       activityChart,
       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 },
+      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,
@@ -1526,28 +1746,106 @@ watch(
 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." },
+      {
+        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.",
+      },
     ];
   }
   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." },
+      {
+        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
@@ -1557,18 +1855,39 @@ const customizeWidgets = computed(() => {
       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." },
+    {
+      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(
+  let list = customizeWidgets.value.filter((w) => canViewWidget(w.key));
+  if (!search) return list;
+  return list.filter(
     (w) =>
       w.title.toLowerCase().includes(search) ||
       w.description.toLowerCase().includes(search)
@@ -1578,14 +1897,24 @@ const filteredCustomizeWidgets = computed(() => {
 // ─── KPI Metrics ─────────────────────────────────────────────────────────────
 
 const defaultVisitorOptions = [
-  "All", "Drive-In", "Walk-In", "Pick-up", "Drop-Off", "Delivery", "Contractor",
+  "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)
+  buildFilterOptions(
+    defaultVisitorOptions,
+    visitorItems.value,
+    getVisitorFilterValue
+  )
 );
 
 // Property-specific: facility booking metric with client-side filter
@@ -1602,13 +1931,26 @@ const facilityOptions = computed(() =>
     defaultFacilityOptions,
     facilityBookingItems.value,
     (item: any) =>
-      item.facilityName || item.facility?.name || item.facilityInfo?.name || item.name || ""
+      item.facilityName ||
+      item.facility?.name ||
+      item.facilityInfo?.name ||
+      item.name ||
+      ""
   )
 );
 
 function getPropertyKpiCards() {
-  const workOrderMetric = getMetric(["openWorkOrder", "workOrders", "openWorkOrders", "workOrder"]);
-  const incidentMetric = getMetric(["openIncidents", "incidents", "incidentReports"]);
+  const workOrderMetric = getMetric([
+    "openWorkOrder",
+    "workOrders",
+    "openWorkOrders",
+    "workOrder",
+  ]);
+  const incidentMetric = getMetric([
+    "openIncidents",
+    "incidents",
+    "incidentReports",
+  ]);
   const visitorMetric = getFilteredVisitorMetric();
   const facilityMetric = computeFacilityMetric();
 
@@ -1684,7 +2026,11 @@ function computeFacilityMetric(): DashboardMetric {
   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 || ""
+      item.facilityName ||
+        item.facility?.name ||
+        item.facilityInfo?.name ||
+        item.name ||
+        ""
     ).toLowerCase();
     return val === selected.toLowerCase();
   });
@@ -1693,18 +2039,33 @@ function computeFacilityMetric(): DashboardMetric {
     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");
+      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");
+      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 workOrderMetric = getMetric([
+    "openWorkOrder",
+    "workOrders",
+    "openWorkOrders",
+    "workOrder",
+  ]);
+  const incidentMetric = getMetric([
+    "openIncidents",
+    "incidents",
+    "incidentReports",
+  ]);
   const patrolMetric = getMetric(["patrolCompliance", "patrol"]);
   const visitorMetric = getFilteredVisitorMetric();
 
@@ -1943,18 +2304,33 @@ const workOrderStatus = computed(() => {
   const max = Math.max(completed, inProgress, pending, 1);
 
   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" },
+    {
+      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",
+    },
   ];
 });
 
 // Security-mode lists
-const activePatrolItems = computed<any[]>(() =>
-  finalDashboardData.value?.activePatrolItems ?? []
+const activePatrolItems = computed<any[]>(
+  () => finalDashboardData.value?.activePatrolItems ?? []
 );
-const securityStaffItems = computed<any[]>(() =>
-  attendanceReq.value?.items ?? []
+const securityStaffItems = computed<any[]>(
+  () => attendanceReq.value?.items ?? []
 );
 
 // ─── ResizeObserver ───────────────────────────────────────────────────────────
@@ -2020,19 +2396,25 @@ 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 any).missedCheckpoints !== "undefined" ||
     typeof (metric as any).missed !== "undefined"
   ) {
     parts.push(
-      `${formatNumber(toNumber((metric as any).missedCheckpoints ?? (metric as any).missed))} checkpoint missed`
+      `${formatNumber(
+        toNumber((metric as any).missedCheckpoints ?? (metric as any).missed)
+      )} checkpoint missed`
     );
   }
   if (typeof metric.ongoing !== "undefined")
     parts.push(`${formatNumber(toNumber(metric.ongoing))} ongoing`);
   if (typeof metric.waitingApproval !== "undefined")
-    parts.push(`${formatNumber(toNumber(metric.waitingApproval))} waiting approval`);
+    parts.push(
+      `${formatNumber(toNumber(metric.waitingApproval))} waiting approval`
+    );
   if (typeof metric.lowStock !== "undefined")
     parts.push(`${formatNumber(toNumber(metric.lowStock))} low stock`);
   if (typeof metric.outOfStock !== "undefined")
@@ -2057,8 +2439,9 @@ function getFilteredVisitorMetric(): DashboardMetric {
       count: toNumber(metric.count ?? items.length),
       currentlyOnSite: toNumber(
         metric.currentlyOnSite ??
-          items.filter((item: any) => !isClosedStatus(item.status) && !item.checkOut)
-            .length
+          items.filter(
+            (item: any) => !isClosedStatus(item.status) && !item.checkOut
+          ).length
       ),
     };
   }
@@ -2117,7 +2500,12 @@ function getListSubtitle(context: string, item: any) {
   if (context === "todayReminders" || context === "todayAttentions") {
     return formatDashboardTime(time) || item.description || item.status || "";
   }
-  return item.description || item.category || item.location || formatDashboardTime(time);
+  return (
+    item.description ||
+    item.category ||
+    item.location ||
+    formatDashboardTime(time)
+  );
 }
 
 function getListTime(item: any) {
@@ -2143,13 +2531,29 @@ function getListIcon(context: string) {
 
 function getListTone(item: DashboardListItem) {
   if (item.tone) return item.tone;
-  const text = `${item.title} ${item.subtitle || ""} ${item.icon || ""} ${item.color || ""}`.toLowerCase();
-  if (text.includes("alert") || text.includes("incident") || text.includes("overdue") || text.includes("pending"))
+  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"))
+  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"))
+  if (
+    text.includes("calendar") ||
+    text.includes("event") ||
+    text.includes("reminder")
+  )
     return "info";
   return "neutral";
 }
@@ -2158,8 +2562,19 @@ function getListTone(item: DashboardListItem) {
 
 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 ||
@@ -2173,14 +2588,22 @@ 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 ||
@@ -2201,14 +2624,21 @@ function normalizeStaffItem(item: Record<string, any>, index: number): StaffItem
     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 || "";
@@ -2234,20 +2664,23 @@ function normalizeFeedbackItem(item: Record<string, any>, index: number): Feedba
 // 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("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 getInitials(name?: string) {
-  return String(name || "")
-    .trim()
-    .split(/\s+/)
-    .filter(Boolean)
-    .slice(0, 2)
-    .map((w) => w.charAt(0).toUpperCase())
-    .join("") || "-";
+  return (
+    String(name || "")
+      .trim()
+      .split(/\s+/)
+      .filter(Boolean)
+      .slice(0, 2)
+      .map((w) => w.charAt(0).toUpperCase())
+      .join("") || "-"
+  );
 }
 
 // ─── Status Style Helpers ────────────────────────────────────────────────────
@@ -2278,8 +2711,7 @@ function getStaffStatusPillStyle(status: any) {
     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" };
+  if (s === "absent") return { backgroundColor: "#fecaca", color: "#b91c1c" };
   return { backgroundColor: "#e2e8f0", color: "#64748b" };
 }
 
@@ -2332,9 +2764,20 @@ 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 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 primary = extractChartSeries(source, [
+    "openWorkOrder",
+    "openWorkOrders",
+    "open_work_orders",
+    "workOrders",
+    "workOrder",
+    "work_orders",
+  ]);
   const secondaryCandidate = hasClosedSeries
     ? { label: "Closed Work Order", series: secondary }
     : getSecondaryChartSeries(source);
@@ -2350,7 +2793,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"] },
   ];
@@ -2368,7 +2814,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);
@@ -2378,7 +2826,9 @@ 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])
+  );
 }
 
 // ─── Filter Helpers ───────────────────────────────────────────────────────────
@@ -2397,7 +2847,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";
@@ -2453,6 +2905,7 @@ function goToListItem(item: TaskItem | FeedbackItem, routeKey: string) {
 // ─── Widget Management ────────────────────────────────────────────────────────
 
 function isWidgetVisible(key: string) {
+  if (!canViewWidget(key)) return false;
   return visibleWidgetKeys.value.includes(key);
 }
 
@@ -2541,7 +2994,12 @@ function normalizeStatus(value: any) {
 
 function getStatusTone(status: any) {
   const s = String(status || "").toLowerCase();
-  if (s.includes("complete") || s.includes("done") || s.includes("resolved") || s.includes("closed"))
+  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";
@@ -2631,7 +3089,6 @@ function formatDashboardTime(value?: string) {
 </script>
 
 <style scoped>
-/* ── Figma Panel Styles (Property & Security modes) ────────────────────────── */
 .dashboard-card {
   background: #fff;
   border: 1px solid #d9e0e7;
@@ -2793,11 +3250,26 @@ function formatDashboardTime(value?: string) {
   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-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;
@@ -2805,7 +3277,8 @@ function formatDashboardTime(value?: string) {
   padding: 6px 2px 0;
 }
 
-.figma-status-row {}
+.figma-status-row {
+}
 
 .figma-status-label {
   align-items: center;
@@ -2862,7 +3335,9 @@ function formatDashboardTime(value?: string) {
   box-shadow: 0 6px 14px rgba(15, 44, 69, 0.04);
 }
 
-.feedback-summary { min-width: 0; }
+.feedback-summary {
+  min-width: 0;
+}
 
 .feedback-summary strong {
   color: #132b43;
@@ -2922,10 +3397,22 @@ function formatDashboardTime(value?: string) {
   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-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;