@iservice365/layer-common 1.5.5 → 1.5.7

package/components/DashboardPlaceholder.vue

@@ -3,7 +3,9 @@
     <!-- Header -->
     <v-row no-gutters class="mb-6">
       <v-col cols="12">
-        <h1 class="text-h4 text-md-h3 font-weight-bold">Dashboard</h1>
+        <h1 class="text-h4 text-md-h3 font-weight-bold">
+          Dashboard{{ currentSiteName ? ` - ${currentSiteName}` : "" }}
+        </h1>
       </v-col>
     </v-row>
 
@@ -38,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">
@@ -52,7 +59,7 @@
                   hide-details
                   variant="outlined"
                   @update:model-value="
-                    updateCardPeriod(card.label.toLowerCase(), $event)
+                    updateCardPeriodDynamic(card.label, $event)
                   "
                 ></v-select>
               </v-col>
@@ -63,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">
@@ -95,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>
@@ -104,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"
@@ -162,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"
@@ -178,7 +185,7 @@
                   r="5"
                   fill="#2196F3"
                 />
-                <!-- X-axis labels -->
+                
                 <text
                   v-for="(label, idx) in visitorLabels"
                   :key="idx"
@@ -195,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">
@@ -208,7 +215,25 @@
                   Feedback Tickets
                 </h3>
               </v-col>
-              <v-col cols="12" md="6" class="d-flex justify-md-end">
+              <v-col
+                cols="12"
+                md="6"
+                class="d-flex flex-column flex-md-row justify-md-end gap-2"
+              >
+                <v-select
+                  v-model="selectedService"
+                  :items="serviceList"
+                  item-title="name"
+                  item-value="_id"
+                  label="Select Service"
+                  density="compact"
+                  hide-details
+                  variant="outlined"
+                  style="max-width: 200px"
+                  clearable
+                  class="pr-4"
+                  @update:model-value="selectedService = $event"
+                ></v-select>
                 <v-select
                   v-model="feedbackPeriod"
                   :items="['This Week', 'This Month', 'This Year']"
@@ -221,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>
@@ -242,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>
@@ -250,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"
@@ -300,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"
@@ -311,7 +331,7 @@
                     :fill="bar.color"
                     rx="4"
                   />
-                  <!-- Value label -->
+
                   <text
                     :x="bar.x + bar.width / 2"
                     :y="bar.y - 8"
@@ -322,7 +342,7 @@
                   >
                     {{ bar.value }}
                   </text>
-                  <!-- X-axis label -->
+
                   <text
                     :x="bar.x + bar.width / 2"
                     y="310"
@@ -338,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">
@@ -353,8 +373,23 @@
               </p>
             </div>
 
-            <!-- Dropdown -->
-            <div class="mb-4">
+          
+            <div class="mb-4 d-flex flex-column gap-2">
+            
+              <v-select
+                v-if="pie.id === 1"
+                v-model="selectedBooking"
+                :items="bookingsList"
+                item-title="name"
+                item-value="_id"
+                label="Select Facility"
+                density="compact"
+                hide-details
+                variant="outlined"
+                clearable
+                class="pb-4"
+              ></v-select>
+             
               <v-select
                 :model-value="pie.period"
                 :items="['This Week', 'This Month', 'This Year']"
@@ -365,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"
@@ -380,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">
@@ -398,7 +433,7 @@
                     class="donut-segment"
                   />
                 </svg>
-                <!-- Center value -->
+             
                 <div class="donut-center">
                   <p class="text-h5 font-weight-bold">{{ pie.centerValue }}</p>
                 </div>
@@ -407,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>
@@ -444,19 +479,44 @@
           </v-card-text>
         </v-card>
       </v-col>
-    </v-row>
+    </v-row> -->
   </v-container>
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from "vue";
-import { useDisplay } from "vuetify";
+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) || "");
+
+// Reactive site data that updates when siteId changes
+const siteData = ref<any>(null);
 
-const display = useDisplay();
+// Fetch site data whenever siteId changes
+watchEffect(async () => {
+  if (siteId.value) {
+    try {
+      const site = await getSiteById(siteId.value);
+      siteData.value = site;
+    } catch (error) {
+      console.error("Error fetching site:", error);
+      siteData.value = null;
+    }
+  } else {
+    siteData.value = null;
+  }
+});
+
+// Get current site name from fetched site data
+const currentSiteName = computed(() => siteData.value?.name || "");
 
 // Type definitions
-type Period = 'This Week' | 'This Month' | 'This Year';
-type CardType = 'guest' | 'pickup' | 'dropoff' | 'contractor' | 'delivery';
+type Period = "This Week" | "This Month" | "This Year";
+type CardType = "guest" | "pickup" | "dropoff" | "contractor" | "delivery";
 
 interface CardPeriods {
   guest: Period;
@@ -470,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");
@@ -477,6 +545,20 @@ const bookingsPeriod = ref<Period>("This Week");
 const buildingPeriod = ref<Period>("This Week");
 const workOrdersPeriod = ref<Period>("This Week");
 
+// Service provider states - now using feedback items from composable
+const selectedService = ref<any>(null);
+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);
+const bookingsList = ref<Array<{ _id: string; name: string }>>([]);
+
 // Individual card periods
 const cardPeriods = ref<CardPeriods>({
   guest: "This Week",
@@ -487,7 +569,7 @@ const cardPeriods = ref<CardPeriods>({
 });
 
 // Data sets for different periods
-const dataByPeriod = {
+const dataByPeriod: Record<string, any> = {
   "This Week": {
     guest: { value: "156", percentage: "12.5 %", chipColor: "success" },
     pickup: { value: "42", percentage: "8.3 %", chipColor: "success" },
@@ -799,60 +881,40 @@ const dataByPeriod = {
   },
 };
 
-// Computed properties for reactive data
-const countCardList = computed(() => [
-  {
-    id: 1,
-    label: "Guest",
-    value: 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: 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: 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: 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: 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,
-  },
-]);
+// 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
+    ? siteId.value.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0)
+    : 0;
+  const siteMultiplier = siteId.value ? 0.6 + (siteHash % 40) / 100 : 1; // Between 0.6 and 1.0
+
+  const applyMultiplier = (value: number) => {
+    const newValue = Math.round(value * siteMultiplier);
+    return newValue >= 1000 ? newValue.toLocaleString() : newValue.toString();
+  };
+
+  // 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
 const visitorPoints = computed(
@@ -868,9 +930,21 @@ const visitorLabels = [
   { x: 1100, text: "Sat" },
 ];
 
-const feedbackBars = computed(
-  () => dataByPeriod[feedbackPeriod.value].feedback
-);
+const feedbackBars = computed(() => {
+  // If no service is selected, return the base data
+  if (!selectedService.value) {
+    return dataByPeriod[feedbackPeriod.value].feedback;
+  }
+
+  // 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];
+  }
+
+  // Fallback to base data if service data not found
+  return dataByPeriod[feedbackPeriod.value].feedback;
+});
 
 // Function to update individual card periods
 const updateCardPeriod = (cardType: string, period: string) => {
@@ -886,6 +960,19 @@ const updatePiePeriod = (pieId: number, period: string) => {
   else if (pieId === 3) workOrdersPeriod.value = validPeriod;
 };
 
+// Function to fetch bookings data based on selected facility
+const fetchBookingsData = async () => {
+  if (!selectedBooking.value) {
+    // Reset to base data when no booking selected
+    return;
+  }
+};
+
+// Watch for booking selection changes
+watch(selectedBooking, () => {
+  fetchBookingsData();
+});
+
 // Pie chart data by period
 const pieChartDataByPeriod = {
   "This Week": {
@@ -1070,67 +1157,186 @@ const pieChartDataByPeriod = {
 };
 
 // Computed Pie Charts Data
-const pieChartList = computed(() => [
-  {
-    id: 1,
-    title: "Bookings",
-    total: pieChartDataByPeriod[bookingsPeriod.value].bookings.total,
-    centerValue:
-      pieChartDataByPeriod[bookingsPeriod.value].bookings.centerValue,
-    segments: pieChartDataByPeriod[bookingsPeriod.value].bookings.segments,
-    period: bookingsPeriod.value,
-  },
-  {
-    id: 2,
-    title: "Building Mngm.",
-    total: pieChartDataByPeriod[buildingPeriod.value].building.total,
-    centerValue:
-      pieChartDataByPeriod[buildingPeriod.value].building.centerValue,
-    segments: pieChartDataByPeriod[buildingPeriod.value].building.segments,
-    period: buildingPeriod.value,
-  },
-  {
-    id: 3,
-    title: "Work Orders",
-    total: pieChartDataByPeriod[workOrdersPeriod.value].workOrders.total,
-    centerValue:
-      pieChartDataByPeriod[workOrdersPeriod.value].workOrders.centerValue,
-    segments: pieChartDataByPeriod[workOrdersPeriod.value].workOrders.segments,
-    period: workOrdersPeriod.value,
-  },
-]);
+const pieChartList = computed(() => {
+  // Get base bookings data
+  const baseBookingsData = pieChartDataByPeriod[bookingsPeriod.value].bookings;
+  let bookingsData = { ...baseBookingsData };
+
+  if (selectedBooking.value) {
+    const bookingHash = selectedBooking.value
+      .split("")
+      .reduce((acc, char) => acc + char.charCodeAt(0), 0);
+    const multiplier = 0.35 + (bookingHash % 45) / 100; // Between 0.35 and 0.8
+    const newTotal = Math.round(baseBookingsData.total * multiplier);
+
+    const segmentMultipliers = [
+      0.8 + (bookingHash % 15) / 100, // approved: 0.8-0.95
+      0.4 + (bookingHash % 30) / 100, // rejected: 0.4-0.7
+      0.5 + (bookingHash % 25) / 100, // pending: 0.5-0.75
+    ];
+
+    const newSegments = baseBookingsData.segments.map(
+      (seg: any, idx: number) => {
+        const segMultiplier = segmentMultipliers[idx] || multiplier;
+        const newPercentage = seg.percentage * segMultiplier;
+        return {
+          ...seg,
+          percentage: newPercentage,
+        };
+      }
+    );
+
+    // Normalize percentages to total 100% (make full circle)
+    const totalPercentage = newSegments.reduce(
+      (sum: number, seg: any) => sum + seg.percentage,
+      0
+    );
+    const normalizedSegments = newSegments.map((seg: any) => ({
+      ...seg,
+      percentage: (seg.percentage / totalPercentage) * 100,
+    }));
+
+    // Recalculate rotations based on normalized percentages
+    let currentRotation = -90;
+    const adjustedSegments = normalizedSegments.map((seg: any) => {
+      const segmentWithRotation = {
+        ...seg,
+        rotation: currentRotation,
+      };
+      currentRotation += seg.percentage * 3.6; // 360 degrees / 100 percentage
+      return segmentWithRotation;
+    });
+
+    // Calculate new center value based on the largest segment
+    const maxSegment = adjustedSegments.reduce((max: any, seg: any) =>
+      seg.percentage > max.percentage ? seg : max
+    );
+    const newCenterValue = `${Math.round(maxSegment.percentage)}%`;
 
-// Facility Bookings Data
-const facilityBookings = [
+    bookingsData = {
+      total: newTotal,
+      centerValue: newCenterValue,
+      segments: adjustedSegments,
+    };
+  }
+
+  return [
+    {
+      id: 1,
+      title: "Bookings",
+      total: bookingsData.total,
+      centerValue: bookingsData.centerValue,
+      segments: bookingsData.segments,
+      period: bookingsPeriod.value,
+    },
+    {
+      id: 2,
+      title: "Building Mngm.",
+      total: pieChartDataByPeriod[buildingPeriod.value].building.total,
+      centerValue:
+        pieChartDataByPeriod[buildingPeriod.value].building.centerValue,
+      segments: pieChartDataByPeriod[buildingPeriod.value].building.segments,
+      period: buildingPeriod.value,
+    },
+    {
+      id: 3,
+      title: "Work Orders",
+      total: pieChartDataByPeriod[workOrdersPeriod.value].workOrders.total,
+      centerValue:
+        pieChartDataByPeriod[workOrdersPeriod.value].workOrders.centerValue,
+      segments:
+        pieChartDataByPeriod[workOrdersPeriod.value].workOrders.segments,
+      period: workOrdersPeriod.value,
+    },
+  ];
+});
+
+// Function to fetch feedback data based on selected service
+const fetchFeedbackData = async () => {
+  if (!selectedService.value) {
+    // Reset to base data when no service selected
+    return;
+  }
+};
+
+// Watch for service selection changes
+watch(selectedService, () => {
+  fetchFeedbackData();
+});
+
+// Fetch buildings/facilities on mount
+onMounted(async () => {
+  try {
+    // Fetch buildings/facilities for bookings dropdown
+    // Using buildings as facilities - you can adjust to use actual facilities API
+    const buildingsResponse = await getAllBuildings({
+      limit: 100,
+      status: "active", // Only show active buildings
+    });
+    if (buildingsResponse && buildingsResponse.items) {
+      bookingsList.value = buildingsResponse.items.map((building: any) => ({
+        _id: building._id,
+        name: building.name || building.block || `Building ${building._id}`,
+      }));
+    }
+  } catch (error) {
+    console.error("Error fetching data:", error);
+  }
+});
+
+// Base Facility Bookings Data
+const baseFacilityBookings = [
   {
     id: 1,
     label: "Approved Bookings",
-    value: "34",
+    value: 34,
     icon: "mdi-calendar-check",
     iconColor: "success",
   },
   {
     id: 2,
     label: "Pending Bookings",
-    value: "97",
+    value: 97,
     icon: "mdi-calendar-clock",
     iconColor: "warning",
   },
   {
     id: 3,
     label: "Cancelled Bookings",
-    value: "28",
+    value: 28,
     icon: "mdi-calendar-remove",
     iconColor: "error",
   },
   {
     id: 4,
     label: "Rejected Bookings",
-    value: "27",
+    value: 27,
     icon: "mdi-calendar-remove",
     iconColor: "error",
   },
 ];
+
+// Computed Facility Bookings - changes based on selected facility
+const facilityBookings = computed(() => {
+  // If no facility is selected, return base data
+  if (!selectedBooking.value) {
+    return baseFacilityBookings.map((booking) => ({
+      ...booking,
+      value: booking.value.toString(),
+    }));
+  }
+
+  // If a facility is selected, multiply values
+  const bookingHash = selectedBooking.value
+    .split("")
+    .reduce((acc, char) => acc + char.charCodeAt(0), 0);
+  const multiplier = 0.35 + (bookingHash % 45) / 100; // Between 0.35 and 0.8
+
+  return baseFacilityBookings.map((booking) => ({
+    ...booking,
+    value: Math.round(booking.value * multiplier).toString(),
+  }));
+});
 </script>
 
 <style scoped>
@@ -1244,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;