@7365admin1/layer-common 3.0.6 → 3.0.7

package/components/DashboardMain.vue

@@ -52,7 +52,7 @@
           density="comfortable"
           divided
           variant="outlined"
-          color="blue-grey-darken-4"
+          class="bg-white"
         >
           <v-btn
             v-for="range in rangeOptions"
@@ -60,6 +60,11 @@
             :value="range.value"
             class="text-none"
             size="small"
+            :style="
+              selectedRange === range.value
+                ? { backgroundColor: '#0b2f47', color: '#ffffff' }
+                : {}
+            "
           >
             {{ range.label }}
           </v-btn>
@@ -74,9 +79,16 @@
       class="mb-4"
     />
 
-    <v-row dense class="mb-1">
-      <v-col v-for="card in visibleKpiCards" :key="card.key" cols="12" sm="6">
-        <v-card flat border rounded="lg" class="pa-4" style="min-height: 158px">
+    <v-row dense class="mb-1 align-stretch">
+      <v-col
+        v-for="card in visibleKpiCards"
+        :key="card.key"
+        cols="12"
+        sm="6"
+        md="4"
+        class="d-flex"
+      >
+        <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"
@@ -121,39 +133,58 @@
             </v-menu>
           </div>
 
-          <div class="mt-6">
+          <div class="mt-6 w-100">
             <p
               class="text-caption font-weight-black text-uppercase text-blue-grey-darken-2 mb-3"
             >
               {{ card.title }}
             </p>
-            <div class="d-flex align-center mb-3" style="min-height: 31px">
-              <span class="text-h5 font-weight-black text-blue-grey-darken-4">{{
-                card.value
-              }}</span>
-            </div>
-            <div class="d-flex align-center flex-wrap ga-2">
-              <span v-if="card.meta" class="text-caption text-blue-grey">{{
-                card.meta
-              }}</span>
-              <v-chip
-                :color="card.percentage >= 0 ? 'success' : 'error'"
-                size="x-small"
-                variant="flat"
-                class="font-weight-bold"
-              >
-                <v-icon
-                  :icon="
-                    card.percentage >= 0
-                      ? 'mdi-arrow-up-right'
-                      : 'mdi-arrow-down-right'
-                  "
-                  size="13"
-                  start
-                />
-                {{ Math.abs(card.percentage) }}%
-              </v-chip>
-            </div>
+            <template
+              v-if="
+                card.key === 'supplyAlert' && Array.isArray(card.raw?.items)
+              "
+            >
+              <div class="d-flex flex-column ga-2 mt-2">
+                <div
+                  v-for="item in card.raw.items"
+                  :key="item._id || item.name"
+                  class="d-flex justify-space-between text-body-2 text-blue-grey-darken-4 font-weight-medium"
+                >
+                  <span>{{ item.name }}</span>
+                  <span class="text-blue-grey">Balance: {{ item.qty }}</span>
+                </div>
+              </div>
+            </template>
+            <template v-else>
+              <div class="d-flex align-center mb-3" style="min-height: 31px">
+                <span
+                  class="text-h5 font-weight-black text-blue-grey-darken-4"
+                  >{{ card.value }}</span
+                >
+              </div>
+              <div class="d-flex align-center flex-wrap ga-2">
+                <span v-if="card.meta" class="text-caption text-blue-grey">{{
+                  card.meta
+                }}</span>
+                <v-chip
+                  :color="card.percentage >= 0 ? 'success' : 'error'"
+                  size="x-small"
+                  variant="flat"
+                  class="font-weight-bold"
+                >
+                  <v-icon
+                    :icon="
+                      card.percentage >= 0
+                        ? 'mdi-arrow-up-right'
+                        : 'mdi-arrow-down-right'
+                    "
+                    size="13"
+                    start
+                  />
+                  {{ Math.abs(card.percentage) }}%
+                </v-chip>
+              </div>
+            </template>
           </div>
         </v-card>
       </v-col>
@@ -172,19 +203,18 @@
         </h2>
       </div>
 
-      <div v-if="hasChartData" class="mt-4">
+      <div v-if="hasChartData" class="mt-4" ref="chartContainerRef">
         <svg
-          viewBox="0 0 920 260"
-          preserveAspectRatio="none"
+          :viewBox="`0 0 ${chartWidth} 260`"
           class="d-block w-100"
-          style="height: 260px"
+          style="height: auto; max-height: 260px"
         >
           <line
             v-for="tick in chartTicks"
             :key="tick"
             x1="48"
             :y1="tick"
-            x2="900"
+            :x2="chartWidth - 20"
             :y2="tick"
             style="stroke: #e9eef2; stroke-width: 1"
           />
@@ -598,6 +628,7 @@ type DashboardMetric = {
   outOfStock?: number;
   completed?: number;
   total?: number;
+  items?: { name: string; qty: number }[];
 };
 
 type DashboardListItem = {
@@ -693,13 +724,6 @@ const defaultCardValues: TDashboardCardValue[] = [
     icon: "mdi-briefcase",
     color: "#0b2f47",
   },
-  {
-    key: "supplyAlert",
-    periodKey: "period",
-    title: "Supply Alert",
-    icon: "mdi-alert",
-    color: "#d32f2f",
-  },
   {
     key: "taskCompleted",
     periodKey: "period",
@@ -707,6 +731,13 @@ const defaultCardValues: TDashboardCardValue[] = [
     icon: "mdi-clipboard-check-outline",
     color: "#f4a340",
   },
+  {
+    key: "supplyAlert",
+    periodKey: "period",
+    title: "Supply Alert",
+    icon: "mdi-alert",
+    color: "#d32f2f",
+  },
 ];
 
 const landscapeCardValues: TDashboardCardValue[] = [
@@ -717,13 +748,6 @@ const landscapeCardValues: TDashboardCardValue[] = [
     icon: "mdi-briefcase",
     color: "#0b2f47",
   },
-  {
-    key: "supplyAlert",
-    periodKey: "period",
-    title: "Supply Alert",
-    icon: "mdi-alert",
-    color: "#d32f2f",
-  },
   {
     key: "taskCompleted",
     periodKey: "period",
@@ -732,11 +756,11 @@ const landscapeCardValues: TDashboardCardValue[] = [
     color: "#f4a340",
   },
   {
-    key: "landscapeSchedule",
+    key: "supplyAlert",
     periodKey: "period",
-    title: "Landscape Schedule",
-    icon: "mdi-sprinkler-variant",
-    color: "#4caf50",
+    title: "Supply Alert",
+    icon: "mdi-alert",
+    color: "#d32f2f",
   },
 ];
 
@@ -799,10 +823,14 @@ const { data: weeklyActivityReq, pending: loadingWeeklyActivity } =
     `get-dashboard-weekly-activity-${props.site}-${props.serviceType}`,
     () =>
       props.serviceType
-        ? getDashboardHygieneWeeklyActivity(props.site, props.serviceType)
+        ? getDashboardHygieneWeeklyActivity(
+            props.site,
+            props.serviceType,
+            currentPeriod.value
+          )
         : Promise.resolve(null),
     {
-      watch: [() => props.site, () => props.serviceType],
+      watch: [() => props.site, () => props.serviceType, currentPeriod],
     }
   );
 
@@ -862,7 +890,13 @@ const finalDashboardData = computed(() => {
   let weeklyActivity = weeklyActivityReq.value ?? [];
   const hasNoActivity =
     !weeklyActivity.length ||
-    weeklyActivity.every((item: any) => !item.workOrder && !item.taskCompleted);
+    weeklyActivity.every(
+      (item: any) =>
+        !item.workOrder &&
+        !item.taskCompleted &&
+        !item.openWorkOrder &&
+        !item.closedWorkOrder
+    );
 
   if (hasNoActivity && currentPeriod.value === "thisWeek") {
     weeklyActivity = [
@@ -895,9 +929,23 @@ const finalDashboardData = computed(() => {
       percentage: 0,
     },
     activityChart: {
-      labels: weeklyActivity.map((item: any) => item.day),
-      workOrders: weeklyActivity.map((item: any) => item.workOrder),
-      taskCompleted: weeklyActivity.map((item: any) => item.taskCompleted),
+      labels: weeklyActivity.map((item: any) => item.day || item.label),
+      workOrders: weeklyActivity.map(
+        (item: any) => item.workOrder ?? item.openWorkOrder
+      ),
+      taskCompleted: weeklyActivity.map(
+        (item: any) => item.taskCompleted ?? item.closedWorkOrder
+      ),
+      openWorkOrder: weeklyActivity.some(
+        (item: any) => item.openWorkOrder !== undefined
+      )
+        ? weeklyActivity.map((item: any) => item.openWorkOrder)
+        : undefined,
+      closedWorkOrder: weeklyActivity.some(
+        (item: any) => item.closedWorkOrder !== undefined
+      )
+        ? weeklyActivity.map((item: any) => item.closedWorkOrder)
+        : undefined,
     },
     taskScheduleItems: taskScheduleReq.value?.items ?? [],
     attendanceItems: attendanceReq.value?.items ?? [],
@@ -923,10 +971,32 @@ const snackbar = reactive({
   text: "",
 });
 
+const chartContainerRef = ref<HTMLElement | null>(null);
+const chartWidth = ref(920);
+let resizeObserver: ResizeObserver | null = null;
+
+watch(chartContainerRef, (el) => {
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+  }
+  if (el && window.ResizeObserver) {
+    resizeObserver = new ResizeObserver((entries) => {
+      if (entries[0] && entries[0].contentRect.width > 0) {
+        chartWidth.value = entries[0].contentRect.width;
+      }
+    });
+    resizeObserver.observe(el);
+  }
+});
+
+onUnmounted(() => {
+  if (resizeObserver) resizeObserver.disconnect();
+});
+
 const rangeOptions = [
   { label: "Today", value: "Today" },
-  { label: "7d", value: "This Week" },
-  { label: "30d", value: "This Month" },
+  { label: "Week", value: "This Week" },
+  { label: "Month", value: "This Month" },
 ];
 const defaultVisitorOptions = [
   "All",
@@ -1078,6 +1148,7 @@ const kpiCards = computed(() =>
       value: typeof value === "string" ? value : formatNumber(value),
       percentage: toNumber(metric.percentage),
       meta: getMetricMeta(metric),
+      raw: metric,
       filter:
         mapping.key === "visitors" && isSecurityDashboard.value
           ? {
@@ -1112,8 +1183,14 @@ const chartLabels = computed<string[]>(() => {
 
   if (selectedRange.value === "Today")
     return ["12 AM", "4 AM", "8 AM", "12 PM", "4 PM", "8 PM"];
-  if (selectedRange.value === "This Month")
-    return ["Week 1", "Week 2", "Week 3", "Week 4"];
+  if (selectedRange.value === "This Month") {
+    const daysInMonth = new Date(
+      new Date().getFullYear(),
+      new Date().getMonth() + 1,
+      0
+    ).getDate();
+    return Array.from({ length: daysInMonth }, (_, i) => String(i + 1));
+  }
   return ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
 });
 const primarySeries = computed(() =>
@@ -1140,11 +1217,11 @@ const chartYLabels = computed(() => {
   const max = chartMax.value;
   return [
     { text: "0", y: 220 },
-    { text: `$${Math.round(max * 0.2)}`, y: 181.6 },
-    { text: `$${Math.round(max * 0.4)}`, y: 143.2 },
-    { text: `$${Math.round(max * 0.6)}`, y: 104.8 },
-    { text: `$${Math.round(max * 0.8)}`, y: 66.4 },
-    { text: `$${Math.round(max)}`, y: 28 },
+    { text: `${Math.round(max * 0.2)}`, y: 181.6 },
+    { text: `${Math.round(max * 0.4)}`, y: 143.2 },
+    { text: `${Math.round(max * 0.6)}`, y: 104.8 },
+    { text: `${Math.round(max * 0.8)}`, y: 66.4 },
+    { text: `${Math.round(max)}`, y: 28 },
   ];
 });
 
@@ -1170,10 +1247,11 @@ const secondaryPath = computed(() => buildSmoothPath(secondaryDots.value));
 const chartAxisLabels = computed(() => {
   const labels = chartLabels.value;
   const count = Math.max(1, labels.length - 1);
+  const width = chartWidth.value;
 
   return labels.map((label, index) => ({
     text: label,
-    x: 54 + (846 / count) * index,
+    x: 54 + ((width - 74) / count) * index,
   }));
 });
 
@@ -1339,18 +1417,33 @@ function normalizeActivityChart(source: any) {
   const labels = Array.isArray(source?.labels)
     ? source.labels.map((label: any) => String(label))
     : [];
+
+  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 secondaryCandidate = getSecondaryChartSeries(source);
+
+  const secondaryCandidate = hasClosedSeries
+    ? { label: "Closed Work Order", series: secondary }
+    : getSecondaryChartSeries(source);
 
   return {
     labels,
     primary,
     secondary: secondaryCandidate.series,
-    primaryLabel: "Work Order",
+    primaryLabel: hasClosedSeries ? "Open Work Order" : "Work Order",
     secondaryLabel: secondaryCandidate.label,
   };
 }
@@ -1401,9 +1494,10 @@ function normalizeSeries(value: any, targetLength: number) {
 
 function buildChartDots(series: number[]) {
   const count = Math.max(1, series.length - 1);
+  const width = chartWidth.value;
 
   return series.map((value, index) => ({
-    x: 54 + (846 / count) * index,
+    x: 54 + ((width - 74) / count) * index,
     y: 220 - (toNumber(value) / chartMax.value) * 184,
   }));
 }

package/components/OnlineFormConfigurationForm.vue

@@ -60,7 +60,7 @@
         </v-col>
 
         <!-- Attachment -->
-        <v-col cols="12" class="px-6 pt-3 pb-4">
+        <!-- <v-col cols="12" class="px-6 pt-3 pb-4">
           <InputLabel title="Attachment (Optional)" />
 
           <div v-if="attachmentId" class="d-flex align-center" style="gap: 8px">
@@ -130,7 +130,7 @@
           <span v-if="attachmentError" class="text-caption text-error d-block mt-1">
             {{ attachmentError }}
           </span>
-        </v-col>
+        </v-col> -->
 
         <v-col v-if="message" cols="12" class="px-6">
           <span class="text-caption text-error">{{ message }}</span>