@7365admin1/layer-common 3.0.6 → 3.0.8

package/components/CameraMain.vue

@@ -32,6 +32,9 @@
             @click:row="handleRowClick"
             style="max-height: 300px"
           >
+            <template #item.host="{ value }">
+              {{ maskHostUrl(value) }}
+            </template>
           </v-data-table>
         </v-card-text>
 
@@ -103,7 +106,7 @@
             <v-col cols="12" class="mb-2">
               Host:
               <span class="font-weight-bold">
-                {{ camera.host }}
+                {{ maskHostUrl(camera.host) }}
               </span>
             </v-col>
 
@@ -367,6 +370,19 @@ function handleSuccess() {
   getCameraRefresh();
 }
 
+function maskHostUrl(value?: string | null) {
+  if (!value) return "";
+
+  const text = String(value);
+  const protocolMatch = text.match(/^([a-z][a-z\d+\-.]*:\/\/)(.*)$/i);
+  const prefix = protocolMatch?.[1] ?? "";
+  const rest = protocolMatch?.[2] ?? text;
+
+  if (rest.length <= 8) return `${prefix}${"*".repeat(rest.length)}`;
+
+  return `${prefix}${rest.slice(0, 3)}****${rest.slice(-3)}`;
+}
+
 const camera = ref<TSiteCamera>({
   site: "",
   host: "",

package/components/DashboardMain.vue

@@ -52,7 +52,8 @@
           density="comfortable"
           divided
           variant="outlined"
-          color="blue-grey-darken-4"
+          class="bg-white"
+          style="border-radius: 8px; border-color: #d9e1e8;"
         >
           <v-btn
             v-for="range in rangeOptions"
@@ -60,6 +61,11 @@
             :value="range.value"
             class="text-none"
             size="small"
+            :style="
+              selectedRange === range.value
+                ? { backgroundColor: '#e2e8f0', color: '#0b2f47', fontWeight: '600' }
+                : { backgroundColor: 'transparent', color: '#64748b' }
+            "
           >
             {{ range.label }}
           </v-btn>
@@ -74,9 +80,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 +134,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 +204,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"
           />
@@ -320,13 +351,7 @@
                 <div
                   class="d-flex align-center ga-2 text-caption text-blue-grey"
                 >
-                  <v-avatar
-                    size="30"
-                    color="blue-grey-lighten-4"
-                    class="text-caption font-weight-bold text-blue-grey-darken-2"
-                  >
-                    {{ getInitials(item.person) }}
-                  </v-avatar>
+                  <AvatarMain :name="item.person" :size="30" />
                   <span class="text-truncate" style="max-width: 100px">{{
                     item.person
                   }}</span>
@@ -375,14 +400,8 @@
               rounded="lg"
               class="pa-3"
             >
-              <div class="d-flex align-center ga-3">
-                <v-avatar
-                  size="34"
-                  color="blue-grey-lighten-4"
-                  class="text-caption font-weight-bold text-blue-grey-darken-2 flex-shrink-0"
-                >
-                  {{ getInitials(item.name) }}
-                </v-avatar>
+              <div class="d-flex align-start ga-3">
+                <AvatarMain :name="item.name" :size="32" />
                 <div class="flex-grow-1" style="min-width: 0">
                   <div
                     class="text-body-2 font-weight-bold text-blue-grey-darken-4 text-truncate"
@@ -415,59 +434,37 @@
           action-label="View All"
           @action="goToDashboardRoute('feedbacks')"
         >
-          <div v-if="feedbackItems.length" class="d-flex flex-column ga-3">
-            <v-card
-              v-for="item in feedbackItems"
-              :key="item.id"
-              flat
-              border
-              rounded="lg"
-              class="pa-3"
-            >
-              <div class="d-flex align-center flex-wrap ga-3">
-                <div class="flex-grow-1" style="min-width: 0">
-                  <div
-                    class="text-body-2 font-weight-bold text-blue-grey-darken-4 text-truncate"
-                  >
-                    {{ item.title }}
-                  </div>
-                  <div class="text-caption text-blue-grey mt-1 text-truncate">
-                    {{ item.subtitle }}
-                  </div>
+          <div v-if="feedbackItems.length" class="figma-list mt-2">
+            <div 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);">
+              <div style="flex: 1; min-width: 140px;">
+                <strong 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>
+              </div>
+
+              <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>
+              </div>
+
+              <div style="flex: 1; display: flex; justify-content: center;">
+                <div v-if="getStatusTone(item.status) === 'success'" style="background-color: #72e3a1; color: #0f5132; padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 500; text-transform: capitalize;">
+                  {{ item.status }}
                 </div>
-                <div
-                  class="d-flex align-center ga-2 text-caption text-blue-grey"
-                >
-                  <v-avatar
-                    size="30"
-                    color="blue-grey-lighten-4"
-                    class="text-caption font-weight-bold text-blue-grey-darken-2"
-                  >
-                    {{ getInitials(item.person) }}
-                  </v-avatar>
-                  <span class="text-truncate" style="max-width: 100px">{{
-                    item.person
-                  }}</span>
+                <div v-else-if="getStatusTone(item.status) === 'warning'" style="background-color: #fde68a; color: #92400e; padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 500; text-transform: capitalize;">
+                  {{ item.status }}
                 </div>
-                <v-chip
-                  size="small"
-                  :color="getStatusTone(item.status)"
-                  variant="tonal"
-                  label
-                >
+                <div v-else-if="getStatusTone(item.status) === 'error'" style="background-color: #fecaca; color: #b91c1c; padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 500; text-transform: capitalize;">
                   {{ item.status }}
-                </v-chip>
-                <v-btn
-                  variant="outlined"
-                  color="primary"
-                  size="small"
-                  class="text-none font-weight-bold"
-                  @click="goToListItem(item, 'feedbacks')"
-                >
-                  View
-                </v-btn>
+                </div>
+                <div v-else style="background-color: #e2e8f0; color: #64748b; padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 500; text-transform: capitalize;">
+                  {{ item.status || 'To-Do' }}
+                </div>
               </div>
-            </v-card>
+
+              <div style="flex: 0 0 auto; text-align: right;">
+                <v-btn variant="outlined" class="text-none font-weight-medium" size="small" color="#3b82f6" style="border-color: #e2e8f0; border-radius: 8px; padding: 0 16px; height: 32px;" @click="goToListItem(item, 'feedbacks')">View</v-btn>
+              </div>
+            </div>
           </div>
           <DashboardEmptyState v-else />
         </DashboardPanel>
@@ -598,6 +595,7 @@ type DashboardMetric = {
   outOfStock?: number;
   completed?: number;
   total?: number;
+  items?: { name: string; qty: number }[];
 };
 
 type DashboardListItem = {
@@ -693,13 +691,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 +698,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 +715,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 +723,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 +790,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 +857,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 +896,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,6 +938,28 @@ 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" },
@@ -1078,6 +1115,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 +1150,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(() =>
@@ -1123,10 +1167,10 @@ const secondarySeries = computed(() =>
   normalizeSeries(activityChart.value.secondary, chartLabels.value.length)
 );
 const primaryLegendLabel = computed(
-  () => activityChart.value.primaryLabel || "Work Order"
+  () => "Closed Work Order"
 );
 const secondaryLegendLabel = computed(
-  () => activityChart.value.secondaryLabel || "Feedback"
+  () => "Open Work Order"
 );
 const chartMax = computed(() =>
   Math.max(1, ...primarySeries.value, ...secondarySeries.value)
@@ -1140,11 +1184,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 +1214,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 +1384,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 +1461,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,
   }));
 }
@@ -1788,18 +1849,7 @@ function goToListItem(item: TaskItem | FeedbackItem, routeKey: string) {
   router.push(`/${props.orgId}/${props.site}/${path}/${id}`);
 }
 
-function getInitials(name: string) {
-  const parts = String(name || "")
-    .trim()
-    .split(/\s+/)
-    .filter(Boolean);
-  if (!parts.length) return "?";
-  return parts
-    .slice(0, 2)
-    .map((part) => part[0])
-    .join("")
-    .toUpperCase();
-}
+
 
 function formatNumber(value: number) {
   return new Intl.NumberFormat("en-US").format(toNumber(value));

package/components/MemberInformation.vue

@@ -22,7 +22,7 @@
                             <v-autocomplete v-model="selectedPass" v-model:search="passInput" :hide-no-data="false"
                                 class="mt-3" :items="passItemsFilteredFinal" item-title="prefixAndName" item-value="_id"
                                 label="Pass (optional)" variant="outlined"  density="compact" :error-messages="errorScanPassMessage"
-                                persistent-hint small-chips>
+                                persistent-hint small-chips @click="fetchPasses">
                                 <template v-slot:no-data>
                                     <v-list-item density="compact">
                                         <v-list-item-title v-if="passInput">
@@ -160,20 +160,28 @@ const passTypesComputed = computed(() => {
     }
 })
 
-const { data: passesData, refresh: refreshPassesData, pending: fetchPassesPending } = await useLazyAsyncData('get-pass-keys', () => {
-    return getPassKeysByPageSearch({
-        search: passInput.value,
-        page: 1,
-        limit: 500,
-        passTypes: passTypesComputed.value,
-        sites: [props.site],
-        statuses: ["Available"]
-    })
-})
-
-watch(passesData, (data: any) => {
-    passItems.value = Array.isArray(data?.items) ? data.items : []
-})
+const isPassListLoading = ref(false);
+
+async function fetchPasses() {
+  // load pass list
+  passItems.value = [];
+  isPassListLoading.value = true;
+  try {
+    const result = await getPassKeysByPageSearch({
+      page: 1,
+      sites: [props.site],
+      limit: 10000,
+      passTypes: passTypesComputed.value,
+      statuses: ["Available"],
+      sortBy: { column: "prefixAndName", order: "1" },
+    });
+    passItems.value = result?.items;
+  } catch (error) {
+    showMessage(errorConverter(error as string), "error");
+  } finally {
+    isPassListLoading.value = false;
+  }
+}
 
 const passItemsFilteredFinal = computed(() => {
     return passItems.value.filter((item: TPassKey) => {

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>