@iservice365/layer-common 1.5.6 → 1.6.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @iservice365/layer-common
 
+## 1.6.0
+
+### Minor Changes
+
+- 9cbea14: Publish Changes in Components (CKEditor)
+
+## 1.5.7
+
+### Patch Changes
+
+- cec19dc: Dashboard static data - follow up release
+
 ## 1.5.6
 
 ### Patch Changes

package/components/AccessManagement.vue

@@ -0,0 +1,136 @@
+<template>
+  <v-row no-gutters>
+    <v-col cols="12" class="mb-2">
+      <v-row no-gutters align="center" justify="space-between">
+        <v-btn
+          class="text-none"
+          rounded="pill"
+          variant="tonal"
+          size="large"
+          v-if="canCreate && canCreateAccessCard"
+        >
+          Add Access Card
+        </v-btn>
+
+        <v-text-field
+          v-model="searchText"
+          placeholder="Search Unit..."
+          variant="outlined"
+          density="comfortable"
+          clearable
+          hide-details
+          class="ml-2"
+          style="max-width: 250px"
+        />
+      </v-row>
+    </v-col>
+    <v-col cols="12">
+      <v-card
+        width="100%"
+        variant="outlined"
+        border="thin"
+        rounded="lg"
+        :loading="loading"
+      >
+        <v-toolbar density="compact" color="grey-lighten-4">
+          <template #prepend>
+            <v-btn fab icon density="comfortable">
+              <v-icon>mdi-refresh</v-icon>
+            </v-btn>
+          </template>
+
+          <template #append>
+            <v-row no-gutters justify="end" align="center">
+              <span class="mr-2 text-caption text-fontgray">
+                {{ pageRange }}
+              </span>
+              <local-pagination v-model="page" :length="pages" />
+            </v-row>
+          </template>
+        </v-toolbar>
+        <v-data-table
+          :headers="headers"
+          :items="items"
+          item-value="_id"
+          items-per-page="10"
+          fixed-header
+          hide-default-footer
+          hide-default-header
+          @click:row="(_: any, data: any) => $emit('row-click', data)"
+          style="max-height: calc(100vh - (200px))"
+        />
+      </v-card>
+    </v-col>
+
+    <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
+  </v-row>
+</template>
+<script setup lang="ts">
+definePageMeta({
+  middleware: ["01-auth", "02-org"],
+  memberOnly: true,
+});
+const props = defineProps({
+  headers: {
+    type: Array as PropType<Array<Record<string, any>>>,
+    default: () => [
+      {
+        title: "Card",
+        value: "card",
+      },
+      {
+        title: "Unit",
+        value: "unit",
+      },
+      {
+        title: "Assign",
+        value: "assign",
+      },
+      { title: "Action", value: "action-table" },
+    ],
+  },
+  canCreate: {
+    type: Boolean,
+    default: true,
+  },
+  canUpdate: {
+    type: Boolean,
+    default: true,
+  },
+  canDelete: {
+    type: Boolean,
+    default: true,
+  },
+  canCreateAccessCard: {
+    type: Boolean,
+    default: true,
+  },
+  canUpdateAccessCard: {
+    type: Boolean,
+    default: true,
+  },
+  canDeleteAccessCard: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const { headerSearch } = useLocal();
+const page = ref(1);
+const pages = ref(0);
+const pageRange = ref("-- - -- of --");
+
+const message = ref("");
+const messageSnackbar = ref(false);
+const messageColor = ref("");
+
+const items = ref<Array<Record<string, any>>>([]);
+const createDialog = ref(false);
+const editDialog = ref(false);
+const previewDialog = ref(false);
+const deleteLoading = ref(false);
+const confirmDialog = ref(false);
+const searchText = ref("");
+
+const loading = ref(false);
+</script>

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;