@7365admin1/layer-common 3.0.21 → 3.0.23

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @iservice365/layer-common
 
+## 3.0.23
+
+### Patch Changes
+
+- e4473f5: Daily Update Layer-common Version
+
+## 3.0.22
+
+### Patch Changes
+
+- 632b007: Update Layer Common Version
+
 ## 3.0.21
 
 ### Patch Changes

package/components/DashboardMain.vue

@@ -350,6 +350,15 @@
                 </v-list-item>
               </v-list>
             </v-menu>
+
+            <button
+              v-if="card.key === 'facilityBookings'"
+              class="figma-panel-action"
+              type="button"
+              @click="openFacilityBookingDialog"
+            >
+              View All
+            </button>
           </div>
 
           <div class="mt-6 w-100">
@@ -824,7 +833,6 @@
         <div class="dashboard-card dashboard-panel figma-panel">
           <div class="figma-panel-header">
             <h2>Today's Attentions</h2>
-        
           </div>
           <div class="figma-panel-body">
             <div v-if="todayAttentions.length" class="figma-list">
@@ -1318,6 +1326,57 @@
       </v-card>
     </v-dialog>
 
+    <v-dialog
+      v-model="facilityBookingDialog"
+      max-width="650"
+      persistent
+      scrollable
+    >
+      <v-card rounded="lg" class="facility-booking-modal">
+        <v-card-title
+          class="d-flex align-center justify-space-between pa-6 pb-3"
+        >
+          <div class="text-body-1 font-weight-black text-blue-grey-darken-4">
+            Facility Booking
+          </div>
+          <v-btn
+            icon="mdi-close"
+            variant="text"
+            density="comfortable"
+            aria-label="Close facility booking summary"
+            @click="facilityBookingDialog = false"
+          />
+        </v-card-title>
+
+        <v-card-text class="px-6 pb-6 pt-3">
+          <div class="facility-booking-summary-list">
+            <div
+              v-for="item in facilityBookingBreakdown"
+              :key="item.status"
+              class="facility-booking-summary-row"
+            >
+              <span class="facility-booking-summary-label">
+                {{ item.status }}
+              </span>
+              <span class="facility-booking-summary-dots" />
+              <strong class="facility-booking-summary-value">
+                {{ formatNumber(item.count) }}
+              </strong>
+            </div>
+          </div>
+
+          <v-divider class="my-5" />
+
+          <div class="facility-booking-summary-row facility-booking-total-row">
+            <strong class="facility-booking-total-label">Total</strong>
+            <strong class="facility-booking-summary-value">
+              {{ formatNumber(facilityBookingTotal) }}
+            </strong>
+          </div>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+
     <v-snackbar
       v-model="snackbar.visible"
       :timeout="2200"
@@ -1347,6 +1406,8 @@ type DashboardMetric = {
   outOfStock?: number;
   completed?: number;
   total?: number;
+  byStatus?: Record<string, number>;
+  statusCounts?: Record<string, number>;
   items?: { name: string; qty: number }[];
 };
 
@@ -1558,7 +1619,7 @@ const initialPeriod = (
 ) as TDashboardValues;
 const selectedRange = ref(periodLabelValue[initialPeriod]);
 const visitorType = ref("All");
-const facilityType = ref("All");
+const facilityBookingDialog = ref(false);
 const visibleWidgetKeys = ref<string[]>([]);
 const draftVisibleWidgetKeys = ref<string[]>([]);
 const filterMenus = reactive<Record<string, boolean>>({});
@@ -2190,7 +2251,6 @@ const visitorOptions = computed(() =>
   )
 );
 
-// Property-specific: facility booking metric with client-side filter
 const facilityBookingItems = computed(() =>
   getDashboardArray([
     "facilityBookingItems",
@@ -2198,20 +2258,47 @@ const facilityBookingItems = computed(() =>
     "bookingsList",
   ])
 );
-const defaultFacilityOptions = ["All"];
-const facilityOptions = computed(() =>
-  buildFilterOptions(
-    defaultFacilityOptions,
-    facilityBookingItems.value,
-    (item: any) =>
-      item.facilityName ||
-      item.facility?.name ||
-      item.facilityInfo?.name ||
-      item.name ||
-      ""
-  )
+
+const facilityBookingStatuses = [
+  "Pending",
+  "Approved",
+  "Ongoing",
+  "For Review",
+  "With Balance",
+  "With Refund",
+  "Completed",
+  "Rejected",
+  "Cancelled",
+];
+
+const facilityBookingBreakdown = computed(() => {
+  const metric = getMetric(["facilityBooking", "facilityBookings", "bookings"]);
+  const sourceCounts = metric.byStatus ?? metric.statusCounts ?? {};
+  const itemCounts: Record<string, number> = {};
+  facilityBookingItems.value.forEach((item: any) => {
+    const status = normalizeFacilityBookingStatus(item.status);
+    if (status) itemCounts[status] = (itemCounts[status] || 0) + 1;
+  });
+
+  return facilityBookingStatuses.map((status) => ({
+    status,
+    count: toNumber(sourceCounts[status] ?? itemCounts[status]),
+  }));
+});
+
+const facilityBookingTotal = computed(() =>
+  facilityBookingBreakdown.value.reduce((total, item) => total + item.count, 0)
 );
 
+function openFacilityBookingDialog() {
+  facilityBookingDialog.value = true;
+}
+
+function normalizeFacilityBookingStatus(status: unknown) {
+  const value = String(status || "").trim();
+  return value === "For Refund" ? "With Refund" : value;
+}
+
 function getPropertyKpiCards() {
   const workOrderMetric = getMetric([
     "openWorkOrder",
@@ -2281,53 +2368,13 @@ function getPropertyKpiCards() {
       percentage: toNumber(facilityMetric?.percentage),
       meta: getMetricMeta(facilityMetric),
       raw: facilityMetric,
-      filter: {
-        model: facilityType.value,
-        options: facilityOptions.value,
-        set: (v: string) => {
-          facilityType.value = v;
-          filterMenus.facilityBookings = false;
-        },
-      },
+      filter: undefined,
     },
   ];
 }
 
 function computeFacilityMetric(): DashboardMetric {
-  const metric = getMetric(["facilityBooking", "facilityBookings", "bookings"]);
-  const selected = facilityType.value;
-  if (selected === "All") return metric;
-  const items = facilityBookingItems.value.filter((item: any) => {
-    const val = String(
-      item.facilityName ||
-        item.facility?.name ||
-        item.facilityInfo?.name ||
-        item.name ||
-        ""
-    ).toLowerCase();
-    return val === selected.toLowerCase();
-  });
-  const ongoing = items.filter((i: any) => {
-    const s = String(i.status || "").toLowerCase();
-    return (
-      s.includes("ongoing") ||
-      s.includes("approved") ||
-      s.includes("in-progress")
-    );
-  }).length;
-  const waitingApproval = items.filter((i: any) => {
-    const s = String(i.status || "").toLowerCase();
-    return (
-      s.includes("pending") || s.includes("review") || s.includes("approval")
-    );
-  }).length;
-
-  return {
-    ...metric,
-    count: ongoing + waitingApproval,
-    ongoing,
-    waitingApproval,
-  };
+  return getMetric(["facilityBooking", "facilityBookings", "bookings"]);
 }
 
 function getSecurityKpiCards() {
@@ -2472,7 +2519,14 @@ const primaryListConfig = computed(() =>
 const activityTitle = computed(() => {
   if (selectedRange.value === "Today") return "Today's Activity";
   if (selectedRange.value === "This Month") return "This Month Activity";
-  return "This Week Activity";
+  return `This Week Activity (${currentWeekRangeLabel.value})`;
+});
+
+const currentWeekRangeLabel = computed(() => {
+  const today = new Date();
+  const start = getMondayWeekStart(today);
+  const end = addDays(start, 6);
+  return `Week ${getWeekOfMonth(today)}: ${formatWeekRange(start, end)}`;
 });
 
 const activityChart = computed(() =>
@@ -2509,6 +2563,50 @@ const hasChartData = computed(
 );
 const chartTicks = [28, 66.4, 104.8, 143.2, 181.6, 220];
 
+function getMondayWeekStart(date: Date) {
+  const start = new Date(date);
+  start.setHours(0, 0, 0, 0);
+  start.setDate(start.getDate() - ((start.getDay() + 6) % 7));
+  return start;
+}
+
+function addDays(date: Date, days: number) {
+  const next = new Date(date);
+  next.setDate(next.getDate() + days);
+  return next;
+}
+
+function getWeekOfMonth(date: Date) {
+  const monthStart = new Date(date.getFullYear(), date.getMonth(), 1);
+  const firstWeekStart = getMondayWeekStart(monthStart);
+  const currentWeekStart = getMondayWeekStart(date);
+  const diffMs = currentWeekStart.getTime() - firstWeekStart.getTime();
+  return Math.floor(diffMs / (7 * 24 * 60 * 60 * 1000)) + 1;
+}
+
+function formatWeekRange(start: Date, end: Date) {
+  const sameMonth = start.getMonth() === end.getMonth();
+  const sameYear = start.getFullYear() === end.getFullYear();
+  const monthDayFormatter = new Intl.DateTimeFormat("en-US", {
+    month: "long",
+    day: "numeric",
+  });
+  const dayFormatter = new Intl.DateTimeFormat("en-US", { day: "numeric" });
+  const fullFormatter = new Intl.DateTimeFormat("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+  });
+
+  if (sameMonth && sameYear) {
+    return `${monthDayFormatter.format(start)} - ${dayFormatter.format(
+      end
+    )}, ${end.getFullYear()}`;
+  }
+
+  return `${fullFormatter.format(start)} - ${fullFormatter.format(end)}`;
+}
+
 const chartYLabels = computed(() => {
   const max = chartMax.value;
   return [
@@ -4107,6 +4205,54 @@ function formatDashboardTime(value?: string) {
   white-space: nowrap;
 }
 
+.facility-booking-modal {
+  border: 1px solid #d9e0e7;
+  box-shadow: 0 18px 48px rgba(15, 35, 54, 0.18);
+}
+
+.facility-booking-summary-list {
+  display: grid;
+  gap: 24px;
+}
+
+.facility-booking-summary-row {
+  align-items: center;
+  display: grid;
+  gap: 16px;
+  grid-template-columns: minmax(112px, max-content) minmax(40px, 1fr) minmax(
+      32px,
+      max-content
+    );
+  min-height: 22px;
+}
+
+.facility-booking-summary-label {
+  color: #1565c0;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1.25;
+}
+
+.facility-booking-summary-dots {
+  border-bottom: 2px dotted #9aa3ad;
+  display: block;
+  height: 1px;
+  min-width: 32px;
+}
+
+.facility-booking-summary-value,
+.facility-booking-total-label {
+  color: #0b2f47;
+  font-size: 16px;
+  font-weight: 800;
+  line-height: 1.25;
+}
+
+.facility-booking-total-row {
+  grid-template-columns: minmax(112px, max-content) minmax(32px, max-content);
+  justify-content: space-between;
+}
+
 .figma-panel-body {
   flex: 1;
   margin-top: 20px;
@@ -4209,18 +4355,22 @@ function formatDashboardTime(value?: string) {
   background: #ffe0de;
   color: #d72f2f;
 }
+
 .figma-icon-badge-info {
   background: #e8e2ff;
   color: #6d4bd8;
 }
+
 .figma-icon-badge-success {
   background: #ddf7e6;
   color: #229852;
 }
+
 .figma-icon-badge-warning {
   background: #ffeed4;
   color: #c57916;
 }
+
 .figma-icon-badge-neutral {
   background: #edf2f6;
   color: #607386;
@@ -4356,14 +4506,17 @@ function formatDashboardTime(value?: string) {
   background: #72e3a1;
   color: #0f5132;
 }
+
 .feedback-status-pill-progress {
   background: #fde68a;
   color: #92400e;
 }
+
 .feedback-status-pill-danger {
   background: #fecaca;
   color: #b91c1c;
 }
+
 .feedback-status-pill-todo {
   background: #e2e8f0;
   color: #64748b;

package/components/InvitationMain.vue

@@ -90,7 +90,7 @@
               v-if="props.cancelInvitation"
             >
               <template v-slot:activator="{ props }">
-                <v-icon v-bind="props">mdi-dots-horizontal</v-icon>
+                <v-icon v-bind="props">mdi-dots-vertical</v-icon>
               </template>
               <v-list>
                 <v-list-item @click="openConfirmDialog(item._id ?? '')" v-if="item.status === 'pending'">
@@ -99,6 +99,9 @@
               </v-list>
             </v-menu>
           </template>
+          <template #item.status="{value}">
+            {{ formatStatus(value) }}
+          </template>
         </v-data-table>
       </v-card>
     </v-col>
@@ -198,14 +201,27 @@ authenticate();
 
 const headers = computed(() => {
   const baseHeaders = [
+    {
+      title: "E-mail",
+      value: "email",
+    },
+    {
+      title: "Roles and Permission",
+      value: "roleName",
+    },
     {
       title: "Date",
       value: "createdAt",
     },
     {
-      title: "E-mail",
-      value: "email",
+      title: "Site Invited To",
+      value: "metadata.siteName",
+    },
+    {
+      title: "Status",
+      value: "status",
     },
+    
   ];
 
   if (props.status === "pending" && props.cancelInvitation) {
@@ -318,6 +334,19 @@ watchEffect(() => {
   }
 });
 
+const formatStatus = (status: string) => {
+  switch (status) {
+    case "pending":
+      return "Pending Invite";
+    case "expired":
+      return "Invitation expired";
+    case "accepted":
+      return "Accepted";
+    default:
+      return status?.[0]?.toUpperCase() + status?.slice(1) || "";
+  }
+};
+
 const dialogMember = ref(false);
 
 function inviteMember() {

package/components/MemberMain.vue

@@ -90,7 +90,7 @@
               width="150"
             >
               <template v-slot:activator="{ props }">
-                <v-icon v-bind="props">mdi-dots-horizontal</v-icon>
+                <v-icon v-bind="props">mdi-dots-vertical</v-icon>
               </template>
               <v-list>
                 <v-list-item