@iservice365/layer-common 1.5.6 → 1.5.7

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 1.5.7
+
+### Patch Changes
+
+- cec19dc: Dashboard static data - follow up release
+
 ## 1.5.6
 
 ### Patch Changes

package/components/DashboardPlaceholder.vue

@@ -40,9 +40,14 @@
                 </v-chip>
               </v-col>
               <v-col cols="4" class="text-right">
-                <v-avatar :color="card.color" size="56" rounded="lg">
-                  <v-icon :icon="card.icon" color="white" size="28"></v-icon>
-                </v-avatar>
+                <div class="d-flex justify-end">
+                  <div
+                    class="avatar-custom"
+                    :style="{ backgroundColor: card.color }"
+                  >
+                    <v-icon :icon="card.icon" color="white" size="28"></v-icon>
+                  </div>
+                </div>
               </v-col>
             </v-row>
             <v-row no-gutters class="mt-4">
@@ -54,7 +59,7 @@
                   hide-details
                   variant="outlined"
                   @update:model-value="
-                    updateCardPeriod(card.label.toLowerCase(), $event)
+                    updateCardPeriodDynamic(card.label, $event)
                   "
                 ></v-select>
               </v-col>
@@ -65,7 +70,7 @@
     </v-row>
 
     <!-- Line Chart -->
-    <v-row class="mb-4">
+    <!-- <v-row class="mb-4">
       <v-col cols="12">
         <v-card flat border elevation="0">
           <v-card-title class="pa-4 pa-md-6">
@@ -97,7 +102,7 @@
                 style="min-width: 800px; width: 100%; height: 100%"
                 preserveAspectRatio="xMidYMid meet"
               >
-                <!-- Y-axis labels -->
+              
                 <text x="20" y="30" font-size="12" fill="#666">6</text>
                 <text x="20" y="80" font-size="12" fill="#666">5</text>
                 <text x="20" y="130" font-size="12" fill="#666">4</text>
@@ -106,7 +111,7 @@
                 <text x="20" y="280" font-size="12" fill="#666">1</text>
                 <text x="20" y="310" font-size="12" fill="#666">0</text>
 
-                <!-- Grid lines -->
+           
                 <line
                   x1="60"
                   y1="20"
@@ -164,14 +169,14 @@
                   stroke-width="1"
                 />
 
-                <!-- Visitor line data -->
+             
                 <polyline
                   :points="visitorPoints.map((p) => `${p.x},${p.y}`).join(' ')"
                   fill="none"
                   stroke="#2196F3"
                   stroke-width="3"
                 />
-                <!-- Data points -->
+             
                 <circle
                   v-for="point in visitorPoints"
                   :key="point.x"
@@ -180,7 +185,7 @@
                   r="5"
                   fill="#2196F3"
                 />
-                <!-- X-axis labels -->
+                
                 <text
                   v-for="(label, idx) in visitorLabels"
                   :key="idx"
@@ -197,10 +202,10 @@
           </v-card-text>
         </v-card>
       </v-col>
-    </v-row>
+    </v-row> -->
 
     <!-- Bar Chart -->
-    <v-row class="mb-4">
+    <!-- <v-row class="mb-4">
       <v-col cols="12">
         <v-card flat border elevation="0">
           <v-card-title class="pa-4 pa-md-6">
@@ -227,6 +232,7 @@
                   style="max-width: 200px"
                   clearable
                   class="pr-4"
+                  @update:model-value="selectedService = $event"
                 ></v-select>
                 <v-select
                   v-model="feedbackPeriod"
@@ -240,7 +246,6 @@
             </v-row>
           </v-card-title>
           <v-card-text class="pa-4 pa-md-6 pt-2">
-            <!-- Legend -->
             <div class="d-flex justify-center gap-4 mb-4">
               <div class="d-flex align-center">
                 <div class="legend-box mr-2" style="background: #2196f3"></div>
@@ -261,7 +266,6 @@
                 style="min-width: 800px; width: 100%; height: 100%"
                 preserveAspectRatio="xMidYMid meet"
               >
-                <!-- Y-axis labels -->
                 <text x="20" y="20" font-size="12" fill="#999">100</text>
                 <text x="20" y="80" font-size="12" fill="#999">80</text>
                 <text x="20" y="140" font-size="12" fill="#999">60</text>
@@ -269,7 +273,6 @@
                 <text x="20" y="260" font-size="12" fill="#999">20</text>
                 <text x="30" y="295" font-size="12" fill="#999">0</text>
 
-                <!-- Grid lines -->
                 <line
                   x1="60"
                   y1="20"
@@ -319,9 +322,7 @@
                   stroke-width="1"
                 />
 
-                <!-- Bars with data -->
                 <g v-for="(bar, idx) in feedbackBars" :key="idx">
-                  <!-- Bar -->
                   <rect
                     :x="bar.x"
                     :y="bar.y"
@@ -330,7 +331,7 @@
                     :fill="bar.color"
                     rx="4"
                   />
-                  <!-- Value label -->
+
                   <text
                     :x="bar.x + bar.width / 2"
                     :y="bar.y - 8"
@@ -341,7 +342,7 @@
                   >
                     {{ bar.value }}
                   </text>
-                  <!-- X-axis label -->
+
                   <text
                     :x="bar.x + bar.width / 2"
                     y="310"
@@ -357,14 +358,14 @@
           </v-card-text>
         </v-card>
       </v-col>
-    </v-row>
+    </v-row> -->
 
     <!-- Pie Charts -->
-    <v-row class="mb-4">
+    <!-- <v-row class="mb-4">
       <v-col v-for="pie in pieChartList" :key="pie.id" cols="12" md="6" lg="4">
         <v-card flat border elevation="0" class="h-100">
           <v-card-text class="pa-4 pa-md-6">
-            <!-- Header with title and total -->
+         
             <div class="mb-3">
               <h3 class="text-h6 font-weight-bold mb-1">{{ pie.title }}</h3>
               <p class="text-body-2 text-grey-darken-1">
@@ -372,9 +373,9 @@
               </p>
             </div>
 
-            <!-- Dropdowns -->
+          
             <div class="mb-4 d-flex flex-column gap-2">
-              <!-- Facility/Building selector for Bookings only -->
+            
               <v-select
                 v-if="pie.id === 1"
                 v-model="selectedBooking"
@@ -388,7 +389,7 @@
                 clearable
                 class="pb-4"
               ></v-select>
-              <!-- Period selector -->
+             
               <v-select
                 :model-value="pie.period"
                 :items="['This Week', 'This Month', 'This Year']"
@@ -399,7 +400,7 @@
               ></v-select>
             </div>
 
-            <!-- Legend -->
+       
             <div class="d-flex flex-wrap gap-3 mb-4">
               <div
                 v-for="(segment, idx) in pie.segments"
@@ -414,7 +415,7 @@
               </div>
             </div>
 
-            <!-- Donut Chart -->
+           
             <div class="d-flex justify-center align-center">
               <div class="position-relative">
                 <svg viewBox="0 0 200 200" width="220" height="220">
@@ -432,7 +433,7 @@
                     class="donut-segment"
                   />
                 </svg>
-                <!-- Center value -->
+             
                 <div class="donut-center">
                   <p class="text-h5 font-weight-bold">{{ pie.centerValue }}</p>
                 </div>
@@ -441,10 +442,10 @@
           </v-card-text>
         </v-card>
       </v-col>
-    </v-row>
+    </v-row> -->
 
     <!-- Facility Section -->
-    <v-row v-if="facilityBookings.length" class="mt-4">
+    <!-- <v-row v-if="facilityBookings.length" class="mt-4">
       <v-col cols="12" class="mb-4">
         <h2 class="text-h5 font-weight-bold">Facility</h2>
       </v-col>
@@ -478,18 +479,16 @@
           </v-card-text>
         </v-card>
       </v-col>
-    </v-row>
+    </v-row> -->
   </v-container>
 </template>
 
 <script setup lang="ts">
-import { useDisplay } from "vuetify";
-
-const display = useDisplay();
 const { getServiceProviderNames } = useServiceProvider();
 const { getAll: getAllBuildings } = useBuilding();
 const { getSiteById } = useSite();
 const route = useRoute();
+const { APP_NAME } = useRuntimeConfig().public;
 
 // Get siteId from route params
 const siteId = computed(() => (route.params.site as string) || "");
@@ -531,6 +530,14 @@ interface CardPeriods {
 const isDashboardLoading = ref(false);
 const isFeedbackTicketLoading = ref(false);
 
+// Get dashboard data based on APP_NAME
+const {
+  cards: dashboardCards,
+  feedbackItems,
+  feedbackChartDataMap,
+  periodMultipliers,
+} = useDashboardData(APP_NAME);
+
 // Period states for each section
 const visitorPeriod = ref<Period>("This Week");
 const feedbackPeriod = ref<Period>("This Week");
@@ -538,9 +545,15 @@ const bookingsPeriod = ref<Period>("This Week");
 const buildingPeriod = ref<Period>("This Week");
 const workOrdersPeriod = ref<Period>("This Week");
 
-// Service provider states
+// Service provider states - now using feedback items from composable
 const selectedService = ref<any>(null);
-const serviceList = ref<Array<{ _id: string; name: string }>>([]);
+const serviceList = ref<Array<{ _id: string; name: string }>>(feedbackItems);
+
+// Per-card periods keyed by label
+const dynamicCardPeriods = ref<Record<string, Period>>({});
+function updateCardPeriodDynamic(label: string, period: string) {
+  dynamicCardPeriods.value[label] = period as Period;
+}
 
 // Booking filter - list of facilities/buildings
 const selectedBooking = ref<any>(null);
@@ -868,7 +881,7 @@ const dataByPeriod: Record<string, any> = {
   },
 };
 
-// Computed properties for reactive data with site-based multiplier
+// Computed properties for reactive data with site-based multiplier and APP_NAME-based cards
 const countCardList = computed(() => {
   // Calculate multiplier based on siteId (different sites get different multipliers)
   const siteHash = siteId.value
@@ -876,74 +889,31 @@ const countCardList = computed(() => {
     : 0;
   const siteMultiplier = siteId.value ? 0.6 + (siteHash % 40) / 100 : 1; // Between 0.6 and 1.0
 
-  const applyMultiplier = (value: string) => {
-    const numValue = parseInt(value.replace(/,/g, ""));
-    const newValue = Math.round(numValue * siteMultiplier);
+  const applyMultiplier = (value: number) => {
+    const newValue = Math.round(value * siteMultiplier);
     return newValue >= 1000 ? newValue.toLocaleString() : newValue.toString();
   };
 
-  return [
-    {
-      id: 1,
-      label: "Guest",
-      value: applyMultiplier(dataByPeriod[cardPeriods.value.guest].guest.value),
-      icon: "mdi-account-multiple",
-      color: "primary",
-      percentage: dataByPeriod[cardPeriods.value.guest].guest.percentage,
-      chipColor: dataByPeriod[cardPeriods.value.guest].guest.chipColor,
-      period: cardPeriods.value.guest,
-    },
-    {
-      id: 2,
-      label: "Pickup",
-      value: applyMultiplier(
-        dataByPeriod[cardPeriods.value.pickup].pickup.value
-      ),
-      icon: "mdi-package",
-      color: "error",
-      percentage: dataByPeriod[cardPeriods.value.pickup].pickup.percentage,
-      chipColor: dataByPeriod[cardPeriods.value.pickup].pickup.chipColor,
-      period: cardPeriods.value.pickup,
-    },
-    {
-      id: 3,
-      label: "Drop-off",
-      value: applyMultiplier(
-        dataByPeriod[cardPeriods.value.dropoff].dropoff.value
-      ),
-      icon: "mdi-package-down",
-      color: "warning",
-      percentage: dataByPeriod[cardPeriods.value.dropoff].dropoff.percentage,
-      chipColor: dataByPeriod[cardPeriods.value.dropoff].dropoff.chipColor,
-      period: cardPeriods.value.dropoff,
-    },
-    {
-      id: 4,
-      label: "Contractor",
-      value: applyMultiplier(
-        dataByPeriod[cardPeriods.value.contractor].contractor.value
-      ),
-      icon: "mdi-hard-hat",
-      color: "success",
-      percentage:
-        dataByPeriod[cardPeriods.value.contractor].contractor.percentage,
-      chipColor:
-        dataByPeriod[cardPeriods.value.contractor].contractor.chipColor,
-      period: cardPeriods.value.contractor,
-    },
-    {
-      id: 5,
-      label: "Delivery",
-      value: applyMultiplier(
-        dataByPeriod[cardPeriods.value.delivery].delivery.value
-      ),
-      icon: "mdi-truck",
-      color: "grey",
-      percentage: dataByPeriod[cardPeriods.value.delivery].delivery.percentage,
-      chipColor: dataByPeriod[cardPeriods.value.delivery].delivery.chipColor,
-      period: cardPeriods.value.delivery,
-    },
-  ];
+  // Map dashboard cards to card list format
+  return dashboardCards.map((card, idx) => {
+    const label = card.title;
+    const period =
+      dynamicCardPeriods.value[label] ||
+      (dynamicCardPeriods.value[label] = "This Week");
+    const periodFactor = periodMultipliers[period] ?? 1;
+    const multipliedValue = Math.round(card.value * periodFactor);
+
+    return {
+      id: idx + 1,
+      label,
+      value: applyMultiplier(multipliedValue),
+      icon: card.icon,
+      color: card.color,
+      percentage: `${card.percentage > 0 ? "+" : ""}${card.percentage} %`,
+      chipColor: card.isPositive ? "success" : "error",
+      period,
+    };
+  });
 });
 
 // Computed reactive data
@@ -961,32 +931,19 @@ const visitorLabels = [
 ];
 
 const feedbackBars = computed(() => {
-  const baseFeedback = dataByPeriod[feedbackPeriod.value].feedback;
-
   // If no service is selected, return the base data
   if (!selectedService.value) {
-    return baseFeedback;
+    return dataByPeriod[feedbackPeriod.value].feedback;
   }
 
-  // If a service is selected, multiply values by a consistent factor
-  // Use the service ID to generate a consistent multiplier for that service
-  const serviceHash = selectedService.value
-    .split("")
-    .reduce((acc, char) => acc + char.charCodeAt(0), 0);
-  const multiplier = 0.3 + (serviceHash % 50) / 100; // Between 0.3 and 0.8
-
-  return baseFeedback.map((bar: any) => {
-    const newValue = Math.round(bar.value * multiplier);
-    const newHeight = bar.height * multiplier;
-    const newY = 290 - newHeight;
+  // If a service is selected, use the feedback chart data from composable
+  const chartData = feedbackChartDataMap[selectedService.value];
+  if (chartData && chartData[feedbackPeriod.value]) {
+    return chartData[feedbackPeriod.value];
+  }
 
-    return {
-      ...bar,
-      value: newValue,
-      height: newHeight,
-      y: newY,
-    };
-  });
+  // Fallback to base data if service data not found
+  return dataByPeriod[feedbackPeriod.value].feedback;
 });
 
 // Function to update individual card periods
@@ -1307,15 +1264,9 @@ watch(selectedService, () => {
   fetchFeedbackData();
 });
 
-// Fetch service providers and buildings/facilities on mount
+// Fetch buildings/facilities on mount
 onMounted(async () => {
   try {
-    // Fetch service providers for feedback dropdown
-    const serviceResponse = await getServiceProviderNames({ limit: 100 });
-    if (serviceResponse && serviceResponse.items) {
-      serviceList.value = serviceResponse.items;
-    }
-
     // Fetch buildings/facilities for bookings dropdown
     // Using buildings as facilities - you can adjust to use actual facilities API
     const buildingsResponse = await getAllBuildings({
@@ -1499,6 +1450,16 @@ svg rect {
   border-radius: 12px !important;
 }
 
+.avatar-custom {
+  width: 56px;
+  height: 56px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
 /* Better chip styling */
 .v-chip {
   font-weight: 600;

package/components/SupplyManagement.vue

@@ -58,7 +58,7 @@ const loading = ref(false);
 
 const page = ref(1);
 const pages = ref(0);
-const pageRange = ref("-- - -- of --");
+const pageRange = ref("1-10 of 10");
 const items = ref<Array<Record<string, any>>>([]);
 
 const headers: Array<Record<string, any>> = [

package/composables/useDashboardData.ts

@@ -0,0 +1,425 @@
+export interface DashboardCard {
+  title: string;
+  value: number;
+  percentage: number;
+  isPositive: boolean;
+  icon: string;
+  color: string;
+}
+
+export interface ModuleData {
+  name: string;
+  cards: DashboardCard[];
+  modules: string[];
+}
+
+export interface FeedbackData {
+  _id: string;
+  name: string;
+}
+
+export interface FeedbackChartData {
+  "This Week": any[];
+  "This Month": any[];
+  "This Year": any[];
+}
+
+export interface PeriodMultiplier {
+  "This Week": number;
+  "This Month": number;
+  "This Year": number;
+}
+
+const dashboardDataMap: Record<string, ModuleData> = {
+  security: {
+    name: 'Security',
+    cards: [
+      {
+        title: 'Feedback',
+        value: 45,
+        percentage: 12.5,
+        isPositive: true,
+        icon: 'mdi-comment-multiple',
+        color: '#1E88E5',
+      },
+      {
+        title: 'Work Orders',
+        value: 28,
+        percentage: 8.3,
+        isPositive: true,
+        icon: 'mdi-clipboard-list',
+        color: '#D32F2F',
+      },
+      {
+        title: 'Vehicle Management',
+        value: 12,
+        percentage: 5.2,
+        isPositive: true,
+        icon: 'mdi-truck',
+        color: '#FFA726',
+      },
+      {
+        title: 'Building Management',
+        value: 35,
+        percentage: 15.4,
+        isPositive: true,
+        icon: 'mdi-building',
+        color: '#43A047',
+      },
+      {
+        title: 'Visitor Management',
+        value: 22,
+        percentage: 6.8,
+        isPositive: true,
+        icon: 'mdi-account-multiple',
+        color: '#7E57C2',
+      },
+      {
+        title: 'Incident Reports',
+        value: 9,
+        percentage: -3.5,
+        isPositive: false,
+        icon: 'mdi-alert-circle',
+        color: '#EF5350',
+      },
+      {
+        title: 'Guest Management',
+        value: 18,
+        percentage: 4.2,
+        isPositive: true,
+        icon: 'mdi-account-badge',
+        color: '#AB47BC',
+      },
+    ],
+    modules: [
+      'Feedback',
+      'Work Orders',
+      'Vehicle Management',
+      'Building Management',
+      'Visitor Management',
+      'Incident Reports',
+      'Guest Management',
+    ],
+  },
+  hygiene: {
+    name: 'Hygiene',
+    cards: [
+      {
+        title: 'Feedback',
+        value: 52,
+        percentage: 14.2,
+        isPositive: true,
+        icon: 'mdi-comment-multiple',
+        color: '#1E88E5',
+      },
+      {
+        title: 'Work Orders',
+        value: 38,
+        percentage: 11.3,
+        isPositive: true,
+        icon: 'mdi-clipboard-list',
+        color: '#D32F2F',
+      },
+      {
+        title: 'Schedule Task Ticket',
+        value: 25,
+        percentage: 7.8,
+        isPositive: true,
+        icon: 'mdi-calendar-check',
+        color: '#FFA726',
+      },
+      {
+        title: 'Attendance',
+        value: 64,
+        percentage: 18.9,
+        isPositive: true,
+        icon: 'mdi-clock-check',
+        color: '#43A047',
+      },
+      {
+        title: 'Supply Management',
+        value: 42,
+        percentage: 12.5,
+        isPositive: true,
+        icon: 'mdi-warehouse',
+        color: '#7E57C2',
+      },
+      {
+        title: 'Request Items',
+        value: 19,
+        percentage: 5.1,
+        isPositive: true,
+        icon: 'mdi-cart-plus',
+        color: '#29B6F6',
+      },
+      {
+        title: 'Cleaning Schedule',
+        value: 31,
+        percentage: 9.4,
+        isPositive: true,
+        icon: 'mdi-broom',
+        color: '#66BB6A',
+      },
+    ],
+    modules: [
+      'Feedback',
+      'Work Orders',
+      'Schedule Task Ticket',
+      'Attendance',
+      'Supply Management',
+      'Request Items',
+      'Cleaning Schedule - Checklist, Area, Unit',
+    ],
+  },
+  landscaping: {
+    name: 'Landscaping',
+    cards: [
+      {
+        title: 'Feedback',
+        value: 33,
+        percentage: 10.5,
+        isPositive: true,
+        icon: 'mdi-comment-multiple',
+        color: '#1E88E5',
+      },
+      {
+        title: 'Work Orders',
+        value: 47,
+        percentage: 13.2,
+        isPositive: true,
+        icon: 'mdi-clipboard-list',
+        color: '#D32F2F',
+      },
+    ],
+    modules: [
+      'Feedback',
+      'Work Orders',
+    ],
+  },
+  mechanical_electrical: {
+    name: 'Mechanical & Electrical',
+    cards: [
+      {
+        title: 'Feedback',
+        value: 38,
+        percentage: 11.8,
+        isPositive: true,
+        icon: 'mdi-comment-multiple',
+        color: '#1E88E5',
+      },
+      {
+        title: 'Work Orders',
+        value: 52,
+        percentage: 15.7,
+        isPositive: true,
+        icon: 'mdi-clipboard-list',
+        color: '#D32F2F',
+      },
+    ],
+    modules: [
+      'Feedback',
+      'Work Orders',
+    ],
+  },
+  pool: {
+    name: 'Pool',
+    cards: [
+      {
+        title: 'Feedback',
+        value: 29,
+        percentage: 9.3,
+        isPositive: true,
+        icon: 'mdi-comment-multiple',
+        color: '#1E88E5',
+      },
+      {
+        title: 'Work Orders',
+        value: 41,
+        percentage: 12.1,
+        isPositive: true,
+        icon: 'mdi-clipboard-list',
+        color: '#D32F2F',
+      },
+    ],
+    modules: [
+      'Feedback',
+      'Work Orders',
+    ],
+  },
+  pest: {
+    name: 'Pest',
+    cards: [
+      {
+        title: 'Feedback',
+        value: 26,
+        percentage: 8.6,
+        isPositive: true,
+        icon: 'mdi-comment-multiple',
+        color: '#1E88E5',
+      },
+      {
+        title: 'Work Orders',
+        value: 35,
+        percentage: 10.2,
+        isPositive: true,
+        icon: 'mdi-clipboard-list',
+        color: '#D32F2F',
+      },
+    ],
+    modules: [
+      'Feedback',
+      'Work Orders',
+    ],
+  },
+};
+
+// Feedback items data for dropdowns
+const feedbackItemsMap: Record<string, FeedbackData[]> = {
+  security: [
+    { _id: "sec-1", name: "Perimeter Security" },
+    { _id: "sec-2", name: "Access Control" },
+    { _id: "sec-3", name: "CCTV Monitoring" },
+    { _id: "sec-4", name: "Guard Services" },
+  ],
+  hygiene: [
+    { _id: "hyg-1", name: "Cleaning Services" },
+    { _id: "hyg-2", name: "Disinfection" },
+    { _id: "hyg-3", name: "Waste Management" },
+    { _id: "hyg-4", name: "Sanitation" },
+  ],
+  landscaping: [
+    { _id: "land-1", name: "Lawn Care" },
+    { _id: "land-2", name: "Garden Maintenance" },
+    { _id: "land-3", name: "Landscaping Design" },
+    { _id: "land-4", name: "Tree Service" },
+  ],
+  mechanical_electrical: [
+    { _id: "me-1", name: "Electrical Services" },
+    { _id: "me-2", name: "HVAC Maintenance" },
+    { _id: "me-3", name: "Equipment Repair" },
+    { _id: "me-4", name: "System Inspection" },
+  ],
+  pool: [
+    { _id: "pool-1", name: "Water Treatment" },
+    { _id: "pool-2", name: "Equipment Maintenance" },
+    { _id: "pool-3", name: "Cleaning Services" },
+    { _id: "pool-4", name: "Safety Inspection" },
+  ],
+  pest: [
+    { _id: "pest-1", name: "Pest Control" },
+    { _id: "pest-2", name: "Fumigation" },
+    { _id: "pest-3", name: "Prevention Services" },
+    { _id: "pest-4", name: "Inspection" },
+  ],
+};
+
+// Feedback chart data based on selected service
+const feedbackChartDataMap: Record<string, FeedbackChartData> = {
+  "sec-1": {
+    "This Week": [
+      { x: 100, y: 260, width: 60, height: 30, value: 5, label: "1", color: "#2196F3" },
+      { x: 200, y: 194, width: 60, height: 96, value: 16, label: "2", color: "#2196F3" },
+      { x: 300, y: 230, width: 60, height: 60, value: 10, label: "3", color: "#2196F3" },
+      { x: 400, y: 248, width: 60, height: 42, value: 7, label: "4", color: "#2196F3" },
+      { x: 500, y: 272, width: 60, height: 18, value: 3, label: "5", color: "#2196F3" },
+      { x: 600, y: 260, width: 60, height: 30, value: 5, label: "6", color: "#2196F3" },
+      { x: 700, y: 212, width: 60, height: 78, value: 13, label: "7", color: "#2196F3" },
+      { x: 800, y: 200, width: 60, height: 90, value: 15, label: "8", color: "#2196F3" },
+      { x: 900, y: 80, width: 60, height: 210, value: 70, label: "9", color: "#2196F3" },
+    ],
+    "This Month": [
+      { x: 100, y: 254, width: 60, height: 36, value: 6, label: "1", color: "#2196F3" },
+      { x: 200, y: 140, width: 60, height: 150, value: 25, label: "2", color: "#2196F3" },
+      { x: 300, y: 194, width: 60, height: 96, value: 16, label: "3", color: "#2196F3" },
+      { x: 400, y: 212, width: 60, height: 78, value: 13, label: "4", color: "#2196F3" },
+      { x: 500, y: 230, width: 60, height: 60, value: 10, label: "5", color: "#2196F3" },
+      { x: 600, y: 248, width: 60, height: 42, value: 7, label: "6", color: "#2196F3" },
+      { x: 700, y: 158, width: 60, height: 132, value: 22, label: "7", color: "#2196F3" },
+      { x: 800, y: 176, width: 60, height: 114, value: 19, label: "8", color: "#2196F3" },
+      { x: 900, y: 50, width: 60, height: 240, value: 80, label: "9", color: "#2196F3" },
+    ],
+    "This Year": [
+      { x: 100, y: 236, width: 60, height: 54, value: 9, label: "1", color: "#2196F3" },
+      { x: 200, y: 104, width: 60, height: 186, value: 31, label: "2", color: "#2196F3" },
+      { x: 300, y: 176, width: 60, height: 114, value: 19, label: "3", color: "#2196F3" },
+      { x: 400, y: 194, width: 60, height: 96, value: 16, label: "4", color: "#2196F3" },
+      { x: 500, y: 212, width: 60, height: 78, value: 13, label: "5", color: "#2196F3" },
+      { x: 600, y: 230, width: 60, height: 60, value: 10, label: "6", color: "#2196F3" },
+      { x: 700, y: 122, width: 60, height: 168, value: 28, label: "7", color: "#2196F3" },
+      { x: 800, y: 158, width: 60, height: 132, value: 22, label: "8", color: "#2196F3" },
+      { x: 900, y: 20, width: 60, height: 270, value: 90, label: "9", color: "#2196F3" },
+    ],
+  },
+  "sec-2": {
+    "This Week": [
+      { x: 100, y: 272, width: 60, height: 18, value: 3, label: "1", color: "#4CAF50" },
+      { x: 200, y: 176, width: 60, height: 114, value: 19, label: "2", color: "#4CAF50" },
+      { x: 300, y: 230, width: 60, height: 60, value: 10, label: "3", color: "#4CAF50" },
+      { x: 400, y: 248, width: 60, height: 42, value: 7, label: "4", color: "#4CAF50" },
+      { x: 500, y: 260, width: 60, height: 30, value: 5, label: "5", color: "#4CAF50" },
+      { x: 600, y: 272, width: 60, height: 18, value: 3, label: "6", color: "#4CAF50" },
+      { x: 700, y: 194, width: 60, height: 96, value: 16, label: "7", color: "#4CAF50" },
+      { x: 800, y: 188, width: 60, height: 102, value: 17, label: "8", color: "#4CAF50" },
+      { x: 900, y: 32, width: 60, height: 258, value: 86, label: "9", color: "#4CAF50" },
+    ],
+    "This Month": [
+      { x: 100, y: 254, width: 60, height: 36, value: 6, label: "1", color: "#4CAF50" },
+      { x: 200, y: 140, width: 60, height: 150, value: 25, label: "2", color: "#4CAF50" },
+      { x: 300, y: 194, width: 60, height: 96, value: 16, label: "3", color: "#4CAF50" },
+      { x: 400, y: 212, width: 60, height: 78, value: 13, label: "4", color: "#4CAF50" },
+      { x: 500, y: 230, width: 60, height: 60, value: 10, label: "5", color: "#4CAF50" },
+      { x: 600, y: 248, width: 60, height: 42, value: 7, label: "6", color: "#4CAF50" },
+      { x: 700, y: 158, width: 60, height: 132, value: 22, label: "7", color: "#4CAF50" },
+      { x: 800, y: 176, width: 60, height: 114, value: 19, label: "8", color: "#4CAF50" },
+      { x: 900, y: 50, width: 60, height: 240, value: 80, label: "9", color: "#4CAF50" },
+    ],
+    "This Year": [
+      { x: 100, y: 236, width: 60, height: 54, value: 9, label: "1", color: "#4CAF50" },
+      { x: 200, y: 104, width: 60, height: 186, value: 31, label: "2", color: "#4CAF50" },
+      { x: 300, y: 176, width: 60, height: 114, value: 19, label: "3", color: "#4CAF50" },
+      { x: 400, y: 194, width: 60, height: 96, value: 16, label: "4", color: "#4CAF50" },
+      { x: 500, y: 212, width: 60, height: 78, value: 13, label: "5", color: "#4CAF50" },
+      { x: 600, y: 230, width: 60, height: 60, value: 10, label: "6", color: "#4CAF50" },
+      { x: 700, y: 122, width: 60, height: 168, value: 28, label: "7", color: "#4CAF50" },
+      { x: 800, y: 158, width: 60, height: 132, value: 22, label: "8", color: "#4CAF50" },
+      { x: 900, y: 20, width: 60, height: 270, value: 90, label: "9", color: "#4CAF50" },
+    ],
+  },
+};
+
+// Period multipliers for card data
+const periodMultipliers: PeriodMultiplier = {
+  "This Week": 1.0,
+  "This Month": 4.3, // approx. weeks in a month
+  "This Year": 52.0, // weeks in a year
+};
+
+export const useDashboardData = (appName: string) => {
+  const normalizedName = appName.toLowerCase();
+  
+  // Try exact match first
+  let moduleKey = normalizedName;
+  
+  // If exact match not found, try partial matching
+  if (!dashboardDataMap[moduleKey]) {
+    if (normalizedName.includes('landscaping')) moduleKey = 'landscaping';
+    else if (normalizedName.includes('mechanical') || normalizedName.includes('electrical')) moduleKey = 'mechanical_electrical';
+    else if (normalizedName.includes('pool')) moduleKey = 'pool';
+    else if (normalizedName.includes('pest')) moduleKey = 'pest';
+    else if (normalizedName.includes('hygiene')) moduleKey = 'hygiene';
+    else if (normalizedName.includes('security')) moduleKey = 'security';
+    else moduleKey = 'security'; // default fallback
+  }
+  
+  const moduleData = dashboardDataMap[moduleKey] || dashboardDataMap.security;
+  const feedbackItems = feedbackItemsMap[moduleKey] || feedbackItemsMap.security;
+
+  return {
+    moduleData,
+    cards: moduleData.cards,
+    modules: moduleData.modules,
+    feedbackItems,
+    feedbackChartDataMap,
+    periodMultipliers,
+  };
+};

package/package.json

@@ -2,7 +2,7 @@
   "name": "@iservice365/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "1.5.6",
+  "version": "1.5.7",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",