@7365admin1/layer-common 1.11.4 → 1.11.6

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @iservice365/layer-common
 
+## 1.11.6
+
+### Patch Changes
+
+- c63a3a7: Update Package Version
+
+## 1.11.5
+
+### Patch Changes
+
+- 2f23422: Update Version
+- 80c27e9: Update Package Version 03/25/2026
+
 ## 1.11.4
 
 ### Patch Changes

package/components/OvernightParkingAvailability.vue

@@ -107,6 +107,7 @@ const model = ref<TOvernightParkingAvailability>({
 
 
 const autoApproveOvernightParking = ref(false)
+const isHydrating = ref(true)
 
 const { requiredRule } = useUtils()
 const { generateTimeSlots, generateTimeSlotsFromStart } = useFacilityUtils()
@@ -151,6 +152,9 @@ watch(availabilityDataReq, (data) => {
     slot.isEnabled = data?.[day]?.isEnabled ?? false
     slot.startTime = data?.[day]?.startTime ?? null
     slot.endTime = data?.[day]?.endTime ?? null
+   setTimeout(() => {
+      isHydrating.value = false
+    }, 500)
   })
 
   autoApproveOvernightParking.value = data?.autoApproveOvernightParking === true
@@ -221,12 +225,12 @@ const isValid = computed(() => {
 })
 
 watch(autoApproveOvernightParking, (newValue, oldValue) => {
-  if (oldValue === newValue) return
+  if (oldValue === newValue || isHydrating.value) return
   handleSave('toggle')  
-})
+}, { immediate: false })
 
 
-function handleSave(action: 'toggle' | 'save') {
+async function handleSave(action: 'toggle' | 'save') {
   if (!isValid.value && action === 'save') {
     message.value = 'Please fill in all required fields.'
     messageColor.value = 'error'
@@ -248,10 +252,11 @@ function handleSave(action: 'toggle' | 'save') {
 
   try {
     loading.updating = true
-    updateOvernightParkingAvailability(props.site, payload)
+    await updateOvernightParkingAvailability(props.site, payload)
     message.value = 'Overnight parking settings updated successfully.'
     messageColor.value = 'success'
     messageSnackbar.value = true
+    refreshAvailability()
   } catch (error) {
     message.value = 'Failed to update overnight parking settings. Please try again.'
     messageColor.value = 'error'

package/components/OvernightParkingManagement.vue

@@ -1,58 +1,98 @@
 <template>
   <v-row no-gutters>
-    <TableMain
-      :headers="headers"
-      :items="items"
-      :loading="loading"
-      :page="page"
-      :pages="pages"
-      :pageRange="pageRange"
-      :createLabel="createLabel"
-      :show-header="true"
-      :extension-height="extensionHeight"
-      :offset="offset"
-      v-model:search="searchInput"
-      @refresh="emits('refresh')"
-      @create="emits('create')"
-      @row-click="handleRowClick"
-      @update:page="handleUpdatePage"
-    >
-
-      <template #item.dateRequested="{ value }">
-        {{ formatDateDDMMYYYYLocal(value) }}
+    <TableMain :headers="headers" :items="items" :loading="loading" :page="page" :pages="pages" :pageRange="pageRange"
+      :createLabel="createLabel" :show-header="true" :extension-height="extensionHeight" :offset="offset"
+      v-model:search="searchInput" @refresh="emits('refresh')" @create="emits('create')" @row-click="handleRowClick"
+      @update:page="handleUpdatePage">
+
+      <template #extension>
+        <v-row no-gutters class="w-100 d-flex align-center justify-end ga-4 pa-2">
+          <v-select v-model="statusFilter" label="Filter by types" item-title="label" item-value="value"
+            :items="filterOptions" density="compact" clearable max-width="200" hide-details>
+          </v-select>
+        </v-row>
       </template>
 
-      <template #item.status="{ value }">
-        <v-chip
-          class="text-capitalize"
-          :color="formatStatus(value).color"
-          variant="flat"
-          pill
-        >
-          {{ formatStatus(value).label }}
-        </v-chip>
+      <template v-slot:item.name="{ item }">
+        <span class="d-flex align-center ga-2">
+          <span>
+            <AvatarMain :name="item?.name" :size="20" :id="item?._id" />
+          </span>
+          <span class="text-capitalize">{{ item?.name }}</span>
+        </span>
       </template>
 
-      <template #item.start="{ value }">
-        {{ formatTimeValue(value) }}
+      <template v-slot:item.emailContact="{ item }">
+        <span class="d-flex align-center ga-2">
+          <v-icon icon="mdi-email" size="15" />
+          <span class="text-capitalize">{{ item?.email || "N/A" }}</span>
+        </span>
+        <span class="d-flex align-center ga-2">
+          <v-icon icon="mdi-phone" size="15" />
+          <span class="text-capitalize">{{ item?.contact || "N/A" }}</span>
+        </span>
       </template>
 
-      <template #item.end="{ value }">
-        {{ formatTimeValue(value) }}
+      <template #item.createdAt="{ value }">
+        {{ formatDateDDMMYYYYLocal(value) }}
+      </template>
+
+      <template #item.status="{ value }">
+        <v-chip class="text-capitalize" :color="formatStatus(value).color" density="compact" variant="flat" pill>
+          {{ formatStatus(value).label }}
+        </v-chip>
       </template>
 
       <template #item.action="{ item }">
-        <v-btn v-if="item.status === 'pending'" color="success" density="compact">Approve</v-btn>
+        <v-menu v-if="item?.status === 'pending'" activator="parent" transition="scale-transition">
+          <template #activator="{ props }">
+            <v-btn variant="flat" density="compact" icon="mdi-dots-vertical" v-bind="props"></v-btn>
+          </template>
+          <v-list>
+            <v-list-item @click="openActionDialog(item, 'approved')">
+              <v-list-item-title>
+                <v-icon class="text-success mr-2 text-subtitle-1">mdi-check</v-icon>Approve</v-list-item-title>
+            </v-list-item>
+            <v-list-item @click="openActionDialog(item, 'rejected')">
+              <v-list-item-title>
+                <v-icon class="text-error mr-2 text-subtitle-1">mdi-close</v-icon>Reject</v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
       </template>
 
       <template v-if="$slots.footer" #footer>
         <slot name="footer" />
       </template>
     </TableMain>
+
+    <v-dialog v-model="actionDialog.open" max-width="520" persistent>
+      <v-card>
+        <v-card-title class="text-subtitle-1 font-weight-bold pt-4 px-4">
+          {{ actionDialog.action === 'approved' ? 'Approve Request' : 'Reject Request' }}
+        </v-card-title>
+        <v-card-text class="px-4 pb-2">
+          <p class="text-caption text-medium-emphasis mb-3">
+            Add remarks before {{ actionDialog.action === 'approved' ? 'approving' : 'rejecting' }} this request.
+          </p>
+          <v-textarea v-model="remarks" label="Remarks" rows="3" auto-grow :rules="[requiredRule]"
+            :disabled="actionLoading" />
+        </v-card-text>
+        <v-card-actions class="px-4 pb-4">
+          <v-spacer />
+          <v-btn variant="text" :disabled="actionLoading" @click="closeActionDialog">Cancel</v-btn>
+          <v-btn color="primary" variant="flat" :loading="actionLoading" :disabled="!remarks.trim()"
+            @click="confirmAction">
+            Confirm
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </v-row>
 </template>
 
 <script setup lang="ts">
+import useOvernightParking from "../composables/useOvernightParking";
 import useUtils from "../composables/useUtils";
 
 const props = defineProps({
@@ -73,7 +113,8 @@ const emits = defineEmits(["refresh", "create", "row-click", "update:page"]);
 
 const searchInput = defineModel<string>("search", { default: "" });
 
-const { standardFormatDate, formatDateDDMMYYYYLocal } = useUtils();
+const { requiredRule, standardFormatDate, formatDateDDMMYYYYLocal } = useUtils();
+const { getOvernightParkingRequests, updateOvernightParkingRequest } = useOvernightParking();
 
 const items = ref<TOvernightParkingRequest[]>([])
 const page = ref(1)
@@ -83,15 +124,37 @@ const extensionHeight = ref(0)
 const offset = ref(0)
 const createLabel = "New Overnight Parking Request"
 
+const remarks = ref('')
+const actionLoading = ref(false)
+const actionDialog = reactive<{
+  open: boolean
+  requestId: string
+  action: 'approved' | 'rejected'
+}>({
+  open: false,
+  requestId: '',
+  action: 'approved',
+})
+
+const statusFilter = ref<TOvernightParkingRequestStatus>("pending")
+
+const filterOptions: { label: string; value: TOvernightParkingRequestStatus }[] = [
+  { label: "Pending", value: "pending" },
+  { label: "Approved", value: "approved" },
+  { label: "Rejected", value: "rejected" },
+  { label: "Expired", value: "expired" },
+]
+
 const headers = [
   { title: "Name", value: "name" },
-  { title: "Plate Number", value: "plateNumber" },
-  { title: "Date Requested", value: "dateTime" },
+  { title: "Email/Contact", value: "emailContact" },
+  { title: "Date Requested", value: "createdAt" },
   { title: "Invited By", value: "invitedBy" },
   { title: "Status", value: "status" },
   { title: "Action", value: "action" },
 ];
 
+
 function formatStatus(status: TOvernightParkingRequest["status"]) {
   switch (String(status || "").toLowerCase()) {
     case "approved":
@@ -107,18 +170,31 @@ function formatStatus(status: TOvernightParkingRequest["status"]) {
   }
 }
 
+const { data: overnightParkingRequests, pending: isPendingOvernightParkingRequests, refresh: refreshOvernightParkingRequests } = await useLazyAsyncData<TOvernightParkingRequest[]>(() => getOvernightParkingRequests({ site: props.site, status: statusFilter.value }), { immediate: true })
 
-function formatTimeValue(value: TOvernightParkingRequest["start"] | TOvernightParkingRequest["end"]) {
-  if (!value) return "N/A";
 
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) return String(value);
+watch(overnightParkingRequests, (data: any) => {
+  // items.value = Array.isArray(data?.items)
+  //   ? data.items
+  //   : Array.isArray(data)
+  //     ? data
+  //     : []
+  pages.value = data?.pages ?? 0;
+  pageRange.value = data?.pageRange ?? "-- - -- of --"
+}, { immediate: true })
 
-  return date.toLocaleTimeString("en-US", {
-    hour: "2-digit",
-    minute: "2-digit",
-  });
-}
+
+// function formatTimeValue(value: TOvernightParkingRequest["start"] | TOvernightParkingRequest["end"]) {
+//   if (!value) return "N/A";
+
+//   const date = new Date(value);
+//   if (Number.isNaN(date.getTime())) return String(value);
+
+//   return date.toLocaleTimeString("en-US", {
+//     hour: "2-digit",
+//     minute: "2-digit",
+//   });
+// }
 
 function handleRowClick(data: { item?: TOvernightParkingRequest }) {
   emits("row-click", data);
@@ -127,4 +203,38 @@ function handleRowClick(data: { item?: TOvernightParkingRequest }) {
 function handleUpdatePage(value: number) {
   emits("update:page", value);
 }
+
+function openActionDialog(item: TOvernightParkingRequest, action: 'approved' | 'rejected') {
+  actionDialog.requestId = item?._id || ''
+  actionDialog.action = action
+  remarks.value = ''
+  actionDialog.open = true
+}
+
+function closeActionDialog() {
+  if (actionLoading.value) return
+  actionDialog.open = false
+}
+
+async function confirmAction() {
+  if (!actionDialog.requestId || !remarks.value.trim()) return
+
+  try {
+    actionLoading.value = true
+    await updateOvernightParkingRequest(actionDialog.requestId, {
+      status: actionDialog.action,
+      remarks: remarks.value.trim(),
+    })
+    actionDialog.open = false
+    await refreshOvernightParkingRequests()
+    refreshOvernightParkingRequests()
+  } finally {
+    actionLoading.value = false
+  }
+}
+
+watch([statusFilter], ([newStatus], [oldStatus]) => {
+  if (newStatus === oldStatus) return
+  refreshOvernightParkingRequests()
+}, { immediate: false })
 </script>

package/composables/useOvernightParking.ts

@@ -0,0 +1,78 @@
+export default function () {
+
+  type GetOvernightParkingRequestsParams = {
+    page?: number
+    limit?: number
+    order?: "asc" | "desc"
+    site?: string
+    status?: string
+  }
+
+  async function getOvernightParkingRequests({
+    page = 1,
+    limit = 10,
+    order = "desc",
+    site = "",
+    status = "",
+  }: GetOvernightParkingRequestsParams = {}) {
+    return await useNuxtApp().$api<Record<string, any>>(
+      "/api/overnight-parking-requests",
+      {
+        method: "GET",
+        query: {
+          page,
+          limit,
+          order,
+          site,
+          status,
+        },
+      }
+    );
+  }
+
+  async function getOvernightParkingRequestById(_id: string) {
+    return await useNuxtApp().$api<TOvernightParkingRequest>(
+      `/api/overnight-parking-requests/id/${_id}`,
+      {
+        method: "GET",
+      }
+    );
+  }
+
+  async function createOvernightParkingRequest(payload: Partial<TOvernightParkingRequest>) {
+    return await useNuxtApp().$api<TOvernightParkingRequest>(
+      "/api/overnight-parking-requests",
+      {
+        method: "POST",
+        body: payload,
+      }
+    );
+  }
+
+  async function updateOvernightParkingRequest(_id: string, payload: Partial<TOvernightParkingRequest>) {
+    return await useNuxtApp().$api<TOvernightParkingRequest>(
+      `/api/overnight-parking-requests/id/${_id}`,
+      {
+        method: "PUT",
+        body: payload,
+      }
+    );
+  }
+
+  async function deleteOvernightParkingRequest(_id: string) {
+    return await useNuxtApp().$api<Record<string, any>>(
+      `/api/overnight-parking-requests/id/${_id}`,
+      {
+        method: "DELETE",
+      }
+    );
+  }
+
+  return {
+    getOvernightParkingRequests,
+    getOvernightParkingRequestById,
+    createOvernightParkingRequest,
+    updateOvernightParkingRequest,
+    deleteOvernightParkingRequest,
+  };
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "1.11.4",
+  "version": "1.11.6",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {

package/types/customer.d.ts

@@ -17,11 +17,22 @@ declare type TCustomerCreate = Pick<
 declare type TCustomerSite = {
   name: string;
   site?: string;
-  siteOrg: string;
-  siteOrgName: string;
+  siteOrg?: string;
+  siteOrgName?: string;
   org: string;
   status?: string;
   createdAt?: string;
   updatedAt?: string;
   deletedAt?: string;
+  category?: TSiteCategory | string;
+  address: {
+    line1: string;
+    line2: string;
+    city: string;
+    state: string;
+    country: string;
+    postalCode: string;
+  }
 };
+
+declare type TSiteCategory = "residential" | "commercial" | "industrial" | "institutional" | "mixed_development" | "infrastructure" | "hospitality"

package/types/overnight-parking.d.ts

@@ -23,13 +23,21 @@ declare type TOvernightParkingRequestStatus =
   | (string & {});
 
 declare type TOvernightParkingRequest = {
-  _id?: string;
-  name?: string | null;
-  plateNumber?: string | null;
-  dateRequested?: string | Date | null;
-  status?: TOvernightParkingRequestStatus | null;
-  start?: string | Date | null;
-  end?: string | Date | null;
-  remarks?: string | null;
-  [key: string]: unknown;
+  _id?: ObjectId;
+  site: string | ObjectId;
+  name: string;
+  contact: string;
+  email: string;
+  isOvernightParking?: boolean;
+  numberOfPassengers?: number;
+  purposeOfVisit?: string;
+  status?: OvernightParkingRequestStatus;
+  invitedBy: {
+    _id: string | ObjectId;
+    name: string;
+  }
+  createdAt?: string | Date;
+  updatedAt?: string | Date;
+  deletedAt?: string | Date;
+  remarks?: string;
 };