@7365admin1/layer-common 1.11.36 → 1.11.37

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 1.11.37
+
+### Patch Changes
+
+- 100370d: Update layer-common version
+
 ## 1.11.36
 
 ### Patch Changes

package/components/ClientMain.vue

@@ -1,16 +1,23 @@
 <template>
   <v-row no-gutters>
-
-    <!-- MAIN TABLE -->
     <v-col cols="12">
-      <TableMain :headers="currentHeaders" :items="currentItems" :loading="loadingState" :page="currentPage"
-        :pages="currentPages" :pageRange="pageRange" :extension-height="120" :offset="300" show-header
-        @refresh="handleRefresh" @update:page="handleUpdatePage">
-
+    <TableMain
+  :headers="currentHeaders"
+  :items="items"
+  :loading="loading"
+  :page="page"
+  :pages="pages"
+  :pageRange="pageRange"
+  :items-per-page="-1"
+  :extension-height="120"
+  :offset="300"
+  show-header
+  @refresh="handleRefresh"
+  @update:page="handleUpdatePage"
+>
         <!-- EXTENSION -->
         <template #extension>
           <v-row no-gutters class="w-100 d-flex flex-column ga-2 pt-2">
-
             <v-tabs v-model="tab" class="w-100" height="32" @update:model-value="onTabChange">
               <v-tab value="active">Active</v-tab>
               <v-tab value="suspended">Suspended</v-tab>
@@ -18,34 +25,61 @@
             </v-tabs>
 
             <div class="px-3 py-2 w-100">
-              <v-text-field v-model="search" density="compact" placeholder="Search" clearable max-width="300"
-                append-inner-icon="mdi-magnify" hide-details @update:model-value="handleSearch" />
+              <v-text-field
+                v-model="search"
+                density="compact"
+                placeholder="Search"
+                clearable
+                max-width="300"
+                append-inner-icon="mdi-magnify"
+                hide-details
+                @update:model-value="handleSearch"
+              />
             </div>
-
           </v-row>
         </template>
 
-        <!-- ACTIONS (ONLY ONE INVITE BUTTON HERE) -->
+        <!-- ACTIONS -->
         <template #actions>
-          <v-btn class="text-none" rounded="pill" variant="tonal" size="large" @click="openInviteDialog">
+          <v-btn
+            v-if="tab !== 'suspended'"
+            class="text-none"
+            rounded="pill"
+            variant="tonal"
+            size="large"
+            @click="openInviteDialog"
+          >
             Invite Client
           </v-btn>
         </template>
 
-        <!-- CUSTOM CELL -->
-        <template #item.index="{ index }">
+        <!-- INDEX CELL -->
+        <!-- <template #item.index="{ index }">
           {{ (currentPage - 1) * 10 + index + 1 }}
-        </template>
+        </template> -->
 
+        <!-- STATUS CELL -->
         <template #item.status="{ value }">
-          <v-chip size="small" variant="tonal">
+          <v-chip
+            size="small"
+            :color="value === 'suspended' ? 'error' : 'success'"
+            variant="flat"
+          >
             {{ value }}
           </v-chip>
         </template>
+
+        <!-- ACTION CELL (pending only) -->
         <template #item.action="{ item }">
-          <v-btn v-if="tab === 'pending'" size="small" color="error" variant="tonal"
-            :loading="cancelLoadingId === item._id" :disabled="cancelLoadingId === item._id"
-            @click="cancelInvite(item)">
+          <v-btn
+            v-if="tab === 'pending'"
+            size="small"
+            color="error"
+            variant="tonal"
+            :loading="cancelLoadingId === item._id"
+            :disabled="cancelLoadingId === item._id"
+            @click="cancelInvite(item)"
+          >
             Cancel Invite
           </v-btn>
         </template>
@@ -54,66 +88,61 @@
 
     <!-- DIALOG -->
     <v-dialog v-model="dialog" max-width="500">
-      <InvitationClientForm title="Invite Client" @success="handleSuccess" @cancel="dialog = false" />
+      <InvitationClientForm
+        title="Invite Client"
+        @success="handleSuccess"
+        @cancel="dialog = false"
+      />
     </v-dialog>
-s
   </v-row>
 </template>
-<script setup lang="ts">
 
-import { computed, onMounted, ref, watch } from 'vue'
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
 import useOrg from '../composables/useOrg'
 import useVerification from '../composables/useVerification'
 import useRole from '../composables/useRole'
 import InvitationClientForm from './InvitationClientForm.vue'
-
+import useCustomerSite from '../composables/useCustomerSite'
+import useSubscription from '../composables/useSubscription'
 
 const tab = ref<'active' | 'suspended' | 'pending'>('active')
 const dialog = ref(false)
 
 const { getAll } = useOrg()
 const { getVerifications, cancelUserInvitation } = useVerification()
+const { getCustomerSites: getCustomerSitesByOrgId } = useCustomerSite()
+const { getByOrgId: getSubscriptionByOrgId } = useSubscription()
 const { getRoleById } = useRole()
 const roleCache = ref<Record<string, string>>({})
 
 /* ================= STATE ================= */
 const items = ref<any[]>([])
 const loading = ref(false)
-
 const page = ref(1)
 const pages = ref(1)
-const search = ref("")
-async function resolveRoleName(id: string) {
-  if (!id) return "-"
-
-  if (roleCache.value[id]) return roleCache.value[id]
-
-  const res = await getRoleById(id)
-
-  const roleName = res?.name ?? "-"
-
-  roleCache.value[id] = roleName
+const search = ref('')
+const totalItems = ref(0)
+const cancelLoadingId = ref<string | null>(null)
 
-  return roleName
-}
 /* ================= HEADERS ================= */
 const orgHeaders = [
-  { title: "Organization Name", key: "name" },
-  { title: "Site", key: "sites" },
-  { title: "Plan Type", key: "plan" },
-  { title: "Billing Cycle", key: "bill" },
-  { title: "Subscription Start", key: "start" },
-  { title: "Subscription End", key: "end" },
-  { title: "Status", key: "status" },
-  { title: "Action", key: "actions" },
+  { title: 'Organization Name', key: 'name' },
+  { title: 'Sites', key: 'sites' },
+  { title: 'Plan Type', key: 'planType' },
+  { title: 'Billing Cycle', key: 'billingCycle' },
+  { title: 'Subscription Start', key: 'subscriptionStart' },
+  { title: 'Subscription End', key: 'subscriptionEnd' },
+  { title: 'Status', key: 'status' },
+  { title: 'Actions', key: 'actions' },
 ]
 
 const inviteHeaders = [
-  { title: "Email", key: "email" },
-  { title: "App", key: "app" },
-  { title: "Role", key: "role" },
-  { title: "Status", key: "status" },
-  { title: "Action", key: "action" },
+  { title: 'Email', key: 'email' },
+  { title: 'App', key: 'app' },
+  { title: 'Role', key: 'role' },
+  { title: 'Status', key: 'status' },
+  { title: 'Action', key: 'action' },
 ]
 
 /* ================= COMPUTED ================= */
@@ -121,65 +150,173 @@ const currentHeaders = computed(() =>
   tab.value === 'pending' ? inviteHeaders : orgHeaders
 )
 
-const currentItems = computed(() => items.value)
-const currentPage = computed(() => page.value)
-const currentPages = computed(() => pages.value)
+const pageRange = computed(() => {
+  if (!totalItems.value) return '0-0 of 0'
+  const pageSize = 10
+  const start = (page.value - 1) * pageSize + 1
+  const end = Math.min(page.value * pageSize, totalItems.value)
+  return `${start}-${end} of ${totalItems.value}`
+})
+
+/* ================= HELPERS ================= */
+function formatDate(date?: string) {
+  if (!date) return '-'
+  return new Date(date).toLocaleDateString('en-US')
+}
+
+async function resolveRoleName(id: string) {
+  if (!id) return '-'
+  if (roleCache.value[id]) return roleCache.value[id]
+  const res = await getRoleById(id)
+  const roleName = res?.name ?? '-'
+  roleCache.value[id] = roleName
+  return roleName
+}
+
+/* ================= FETCH ================= */
+async function fetchActive() {
+  const res = await getAll({ page: page.value, search: search.value })
+  const orgs = res?.data?.items || res?.items || []
+
+  const mapped = await Promise.all(
+    orgs.map(async (org: any) => {
+      let sitesCount = 0
+      let planType = '-'
+      let billingCycle = '-'
+      let subscriptionStart = '-'
+      let subscriptionEnd = '-'
+
+      try {
+        const siteRes = await getCustomerSitesByOrgId(org._id)
+        sitesCount =
+          siteRes?.data?.totalItems ||
+          siteRes?.totalItems ||
+          siteRes?.data?.items?.length ||
+          siteRes?.items?.length ||
+          0
+
+        const subRes = await getSubscriptionByOrgId(org._id)
+        const subscription = subRes?.data || subRes
+        if (subscription) {
+          planType = subscription?.paidType || '-'
+          billingCycle = subscription?.billingCycle || '-'
+          subscriptionStart = formatDate(subscription?.createdAt)
+          subscriptionEnd = formatDate(subscription?.nextBillingDate)
+        }
+      } catch (e) {
+        console.error('Error mapping org:', org._id, e)
+      }
+
+      return {
+        _id: org._id,
+        ...org,
+        sites: `${sitesCount} Sites`,
+        planType,
+        billingCycle,
+        subscriptionStart,
+        subscriptionEnd,
+        status: org?.status || 'Active',
+      }
+    })
+  )
+
+  items.value = mapped
+  pages.value = res?.data?.totalPages || res?.totalPages || 1
+  totalItems.value = res?.data?.totalItems || res?.totalItems || mapped.length
+}
+
+async function fetchSuspended() {
+  const res = await getAll({
+    page: page.value,
+    search: search.value,
+    // status: 'suspended',
+  })
+  const orgs = res?.data?.items || res?.items || []
+
+  const mapped = await Promise.all(
+    orgs.map(async (org: any) => {
+      let sitesCount = 0
+      let planType = '-'
+      let billingCycle = '-'
+      let subscriptionStart = '-'
+      let subscriptionEnd = '-'
+
+      try {
+        const siteRes = await getCustomerSitesByOrgId(org._id)
+        sitesCount =
+          siteRes?.data?.totalItems ||
+          siteRes?.totalItems ||
+          siteRes?.data?.items?.length ||
+          siteRes?.items?.length ||
+          0
+
+        const subRes = await getSubscriptionByOrgId(org._id)
+        const subscription = subRes?.data || subRes
+        if (subscription) {
+          planType = subscription?.paidType || '-'
+          billingCycle = subscription?.billingCycle || '-'
+          subscriptionStart = formatDate(subscription?.createdAt)
+          subscriptionEnd = formatDate(subscription?.nextBillingDate)
+        }
+      } catch (e) {
+        console.error('Error mapping suspended org:', org._id, e)
+      }
+
+      return {
+        _id: org._id,
+        ...org,
+        sites: `${sitesCount} Sites`,
+        planType,
+        billingCycle,
+        subscriptionStart,
+        subscriptionEnd,
+        status: org?.status || 'suspended',
+      }
+    })
+  )
+
+  items.value = mapped
+  pages.value = res?.data?.totalPages || res?.totalPages || 1
+  totalItems.value = res?.data?.totalItems || res?.totalItems || mapped.length
+}
+
+async function fetchPending() {
+  const res = await getVerifications({
+    status: 'pending',
+    type: 'user-invite',
+    page: page.value,
+    search: search.value,
+    app: 'organization',
+  })
+
+  items.value = await Promise.all(
+    (res?.items || []).map(async (i: any) => ({
+      ...i,
+      app: i.metadata?.app ?? '-',
+      role: await resolveRoleName(i.metadata?.role),
+    }))
+  )
+
+  pages.value = res?.pages || 1
+  totalItems.value = res?.total || items.value.length
+}
 
-const loadingState = computed(() => loading.value)
-const totalItems = ref(0)
-/* ================= API ================= */
 async function fetchData() {
   loading.value = true
-
   try {
-    if (tab.value === 'pending') {
-      const res = await getVerifications({
-        status: "pending",
-        type: "user-invite",
-        page: page.value,
-        search: search.value,
-        app: "organization",
-      })
-
-      items.value = await Promise.all(
-        (res?.items || []).map(async (i: any) => ({
-          ...i,
-          app: i.metadata?.app ?? "-",
-          role: await resolveRoleName(i.metadata?.role),
-        }))
-      )
-
-      pages.value = res?.pages || 1
-      totalItems.value = res?.total || items.value.length
-    } else {
-      const res = await getAll({
-        page: page.value,
-        search: search.value,
-        nature: tab.value === "active" ? "" : "suspended",
-      })
-
-      items.value = res?.data?.items || res?.items || []
-
-      pages.value = res?.data?.totalPages || res?.totalPages || 1
-      totalItems.value =
-        res?.data?.totalItems ||
-        res?.totalItems ||
-        items.value.length
+    if (tab.value === 'suspended') {
+      items.value = []
+      pages.value = 1
+      totalItems.value = 0
+      return
     }
+    if (tab.value === 'active') await fetchActive()
+    else await fetchPending()
   } finally {
     loading.value = false
   }
 }
-const pageRange = computed(() => {
-  if (!totalItems.value) return "0-0 of 0"
-
-  const pageSize = 10
-
-  const start = (page.value - 1) * pageSize + 1
-  const end = Math.min(page.value * pageSize, totalItems.value)
 
-  return `${start}-${end} of ${totalItems.value}`
-})
 /* ================= EVENTS ================= */
 function onTabChange() {
   page.value = 1
@@ -210,22 +347,19 @@ function handleSuccess() {
   fetchData()
 }
 
-/* ================= INIT ================= */
-onMounted(() => {
-  fetchData()
-})
-
-const cancelLoadingId = ref<string | null>(null)
-
+/* ================= CANCEL INVITE ================= */
 async function cancelInvite(item: any) {
   try {
     cancelLoadingId.value = item._id
-
     await cancelUserInvitation(item._id)
-
     await fetchData()
   } finally {
     cancelLoadingId.value = null
   }
 }
+
+/* ================= INIT ================= */
+onMounted(() => {
+  fetchData()
+})
 </script>

package/components/InvitationClientForm.vue

@@ -236,7 +236,7 @@ function handleUpdateSite(id: string) {
 }
 
 /* ================= SUBMIT ================= */
-const { inviteUser } = useUser()
+const { inviteUserClient } = useUser()
 const { requiredRule, emailRule } = useUtils()
 
 const message = ref("")
@@ -251,14 +251,14 @@ async function submit() {
 
     await Promise.all(
       apps.map(app =>
-        inviteUser({
+        inviteUserClient({
           email: invite.value.email,
           app,
           role: invite.value.role,
           org: invite.value.org,
           site: invite.value.site,
           siteName: invite.value.siteName,
-          isMemberInvite: invite.value.isMemberInvite,
+          // isMemberInvite: invite.value.isMemberInvite,
         })
       )
     )

package/components/VehicleForm.vue

@@ -35,34 +35,32 @@
           <v-col v-if="shouldShowField('block')" cols="12">
             <InputLabel class="text-capitalize" title="Block" required />
             <v-select v-model="vehicle.block" :items="blocksArray" item-value="value" item-title="title"
-              @update:model-value="handleChangeBlock" density="comfortable" :rules="[requiredRule]"
-               />
+              @update:model-value="handleChangeBlock" density="comfortable" :rules="[requiredRule]" />
           </v-col>
 
           <v-col v-if="shouldShowField('level')" cols="12">
             <InputLabel class="text-capitalize" title="Level" required />
-            <v-select v-model="vehicle.level" :items="levelsArray" density="comfortable"
-              :disabled="!vehicle.block" @update:model-value="handleChangeLevel"
-              :rules="[requiredRule]" />
+            <v-select v-model="vehicle.level" :items="levelsArray" density="comfortable" :disabled="!vehicle.block"
+              @update:model-value="handleChangeLevel" :rules="[requiredRule]" />
           </v-col>
 
           <v-col v-if="shouldShowField('unit')" cols="12">
             <InputLabel class="text-capitalize" title="Unit" required />
-            <v-select v-model="vehicle.unit" :items="unitsArray" density="comfortable"
-              :disabled="!vehicle.level" :rules="[requiredRule]" />
+            <v-select v-model="vehicle.unit" :items="unitsArray" density="comfortable" :disabled="!vehicle.level"
+              :rules="[requiredRule]" />
           </v-col>
 
           <v-col v-if="shouldShowField('nric')" cols="12">
             <InputLabel class="text-capitalize" title="NRIC" required />
-            <InputNRICNumber v-model="vehicle.nric" density="comfortable" :rules="[requiredRule]" :disabled="disablePrefilledInputs && type !== 'blocklist'" />
+            <InputNRICNumber v-model="vehicle.nric" density="comfortable" :rules="[requiredRule]"
+              :disabled="disablePrefilledInputs && type !== 'blocklist'" />
           </v-col>
 
           <v-col v-if="shouldShowField('name')" cols="12">
             <v-row>
               <v-col cols="12">
                 <InputLabel class="text-capitalize" title="Full Name" required />
-                <v-text-field v-model.trim="vehicle.name" density="comfortable" :rules="[requiredRule]"
-                  />
+                <v-text-field v-model.trim="vehicle.name" density="comfortable" :rules="[requiredRule]" />
               </v-col>
             </v-row>
           </v-col>
@@ -75,42 +73,49 @@
           </v-col>
 
           <v-col v-if="shouldShowField('plateNumber')" cols="12">
-            
-            <!-- <v-text-field v-model="vehicle.plateNumber" density="comfortable" :rules="[requiredRule]" /> -->
-            <template v-for="plate in vehicle.plates" :key="plate.plateNumber">
-              <InputLabel class="text-capitalize" title="Existing Vehicle Numbers" required />
-              <v-text-field v-model="plate.plateNumber" density="comfortable" :rules="[requiredRule]" class="mb-2"
-                readonly disabled>
-                <template #append-inner>
-                  <v-chip size="small" class="ma-0" :color="formatVehicleStatus(plate?.status)?.color as string">{{
-                    formatVehicleStatus(plate?.status)?.label }}</v-chip>
-                </template>
-              </v-text-field>
-            </template>
 
-            <InputLabel class="text-capitalize" title="New Vehicle Numbers" required />
-            <template v-for="(plate, index) in newPlateNumbers" :key="index">
-              <v-row class="" :class="`${index === newPlateNumbers.length - 1 ? 'mb-1' : 'mb-5'}`" no-gutters>
-                <v-col :cols="newPlateNumbers.length > 1 ? '11' : '12'">
-                  <InputVehicleNumber v-model="newPlateNumbers[index]" density="comfortable"
-                    placeholder="New Vehicle Number" :rules="[requiredRule]"  />
-                </v-col>
+            <template v-if="prop.mode === 'add'">
+              <!-- <v-text-field v-model="vehicle.plateNumber" density="comfortable" :rules="[requiredRule]" /> -->
+              <template v-for="plate in vehicle.plates" :key="plate.plateNumber">
+                <InputLabel class="text-capitalize" title="Existing Vehicle Numbers" required />
+                <v-text-field v-model="plate.plateNumber" density="comfortable" :rules="[requiredRule]"
+                  class="mb-2 class-readonly" readonly>
+                  <template #append-inner>
+                    <v-chip size="small" class="ma-0" :color="formatVehicleStatus(plate?.status)?.color as string">{{
+                      formatVehicleStatus(plate?.status)?.label }}</v-chip>
+                  </template>
+                </v-text-field>
+              </template>
 
-                <v-col :cols="newPlateNumbers.length > 1 ? '1' : '0'" class="d-flex align-start">
-                  <v-btn icon="mdi-delete-outline" variant="text" color="error" v-if="newPlateNumbers.length > 1"
-                    @click="removePlate(index)" />
-                </v-col>
-              </v-row>
+              <InputLabel class="text-capitalize" title="New Vehicle Numbers" required />
+              <template v-for="(plate, index) in newPlateNumbers" :key="index">
+                <v-row class="" :class="`${index === newPlateNumbers.length - 1 ? 'mb-1' : 'mb-5'}`" no-gutters>
+                  <v-col :cols="newPlateNumbers.length > 1 ? '11' : '12'">
+                    <InputVehicleNumber v-model="newPlateNumbers[index]" density="comfortable"
+                      placeholder="New Vehicle Number" :rules="[requiredRule]" />
+                  </v-col>
+
+                  <v-col :cols="newPlateNumbers.length > 1 ? '1' : '0'" class="d-flex align-start">
+                    <v-btn icon="mdi-delete-outline" variant="text" color="error" v-if="newPlateNumbers.length > 1"
+                      @click="removePlate(index)" />
+                  </v-col>
+                </v-row>
+
+                <v-btn prepend-icon="mdi-plus" variant="outlined" class="text-none" @click="addPlate">
+                  Add Plate
+                </v-btn>
+              </template>
             </template>
 
-            <v-btn prepend-icon="mdi-plus" variant="outlined" class="text-none" @click="addPlate">
-              Add Plate
-            </v-btn>
+            <template v-else-if="prop.mode === 'edit'">
+              <InputLabel class="text-capitalize" title="Vehicle Number" required />
+              <InputVehicleNumber v-model="vehicle.plateNumber" density="comfortable" :rules="[requiredRule]" />
+            </template>
           </v-col>
 
           <v-col v-if="shouldShowField('remarks')" cols="12">
-            <InputLabel class="text-capitalize" title="Remarks" required />
-            <v-textarea v-model="vehicle.remarks" density="comfortable" :rows="3" no-resize :rules="[requiredRule]" />
+            <InputLabel class="text-capitalize" title="Remarks" />
+            <v-textarea v-model="vehicle.remarks" density="comfortable" :rows="3" no-resize />
           </v-col>
 
           <v-col v-if="shouldShowField('start')" cols="12">
@@ -192,8 +197,7 @@
                 Matching Records for "{{ searchUnitName ?? "-" }}"
               </span>
               <span>
-                <v-btn icon="mdi-close" variant="text"
-                  @click="handleCloseMatchDialog" />
+                <v-btn icon="mdi-close" variant="text" @click="handleCloseMatchDialog" />
               </span>
             </v-row>
           </v-toolbar-title>
@@ -209,7 +213,7 @@
               </v-list-item-title>
 
               <v-list-item-subtitle>
-               NRIC: {{ v.nric || "-" }}
+                NRIC: {{ v.nric || "-" }}
               </v-list-item-subtitle>
 
               <div class="mt-1">
@@ -262,6 +266,10 @@ const prop = defineProps({
   vehicleData: {
     type: Object as PropType<Partial<TVehicle> | null>,
     default: null
+  },
+  plateNumberId: {
+    type: String,
+    default: ''
   }
 });
 
@@ -291,6 +299,7 @@ const vehicle = reactive<Omit<ExceptPartial<TVehicle>, 'type'> & { type: TVehicl
   org: prop.org,
   _id: '',
   peopleId: '',
+  plateNumber: "",
 });
 
 const newPlateNumbers = ref<string[]>(['']);
@@ -520,7 +529,6 @@ async function submit() {
     const { plateNumber, type, category, name, phoneNumber, block, level, unit, nric, remarks, seasonPassType, start, end, site, org, peopleId } = vehicle
 
     let payload: Partial<TVehiclePayload> = {
-      plateNumber: newPlateNumbers.value,
       name,
       phoneNumber,
       type: type === 'seasonpass' ? 'whitelist' : type, // season pass will be created as whitelist type in backend with additional seasonPassType field,
@@ -533,7 +541,16 @@ async function submit() {
         ...payload,
         category,
         site,
-        org
+        org,
+        plateNumber: newPlateNumbers.value
+      }
+    }
+
+    if (prop.mode === 'edit' && prop.plateNumberId) {
+      payload = {
+        ...payload,
+        site: prop.site,
+        plateNumber
       }
     }
 
@@ -564,8 +581,8 @@ async function submit() {
     if (prop.mode === 'add') {
       await addVehicle(payload);
     } else if (prop.mode === 'edit') {
-      const vehicleId = vehicle?._id as string;
-      await updateVehicle(vehicleId, payload);
+      const plateNumberId = prop.plateNumberId as string;
+      await updateVehicle(plateNumberId, payload);
     }
     emit("done");
 
@@ -692,14 +709,14 @@ function selectPeopleRecord(record: TPeople) {
 
 
 async function checkPeopleById() {
-  if (!vehicle.unit) return;
+  if (!vehicle.unit || prop.mode === 'edit') return;
 
   checkingUnit.value = true;
   showMatchingPeopleDialog.value = true;
   // Lock editable fields while we verify if this NRIC has existing records.
   disablePrefilledInputs.value = true;
   try {
-    const res = await getPeopleByUnit(vehicle.unit, { status: 'active', type: 'resident,tenant' }) as TPeople[]| null;
+    const res = await getPeopleByUnit(vehicle.unit, { status: 'active', type: 'resident,tenant' }) as TPeople[] | null;
 
     if (Array.isArray(res) && res.length > 0) {
       matchingPeople.value = res || []
@@ -745,12 +762,23 @@ const resetVehicleDetails = () => {
 
 function handleCloseMatchDialog() {
   showMatchingPeopleDialog.value = false;
-  if(matchingPeople.value.length > 0) {
+  if (matchingPeople.value.length > 0) {
     vehicle.unit = null
   }
 }
 
-
+onMounted(() => {
+  setTimeout(() => {
+    console.log("VehicleForm mounted with props:", prop);
+    if (prop.mode === 'edit' && prop.vehicleData) {
+      // In edit mode, we only want to check for matching people records if there is a pre-filled unit value. If there is no unit value, we can assume that this vehicle record is not linked to any existing people record and skip the check.
+      vehicle.seasonPassType = prop.vehicleData.seasonPassType || '';
+      vehicle.end = prop.vehicleData.end || '';
+      vehicle.start = prop.vehicleData.start || '';
+      vehicle.plateNumber = prop.vehicleData.plates?.find((p) => p._id === prop.plateNumberId)?.plateNumber || '';
+    }
+  }, 300);
+})
 
 
 </script>
@@ -758,4 +786,8 @@ function handleCloseMatchDialog() {
 .button-outline-class {
   border: 1px solid rgba(var(--v-theme-primary));
 }
+
+.class-readonly {
+  pointer-events: none;
+}
 </style>

package/components/VehicleManagement.vue

@@ -37,10 +37,15 @@
     </v-dialog>
 
     <v-dialog v-model="dialog.createVehicle" v-if="vehicleType" width="450" persistent>
-      <VehicleForm :type="vehicleType" mode="add" :vehicle-data="selectedVehicleObject" @back="handleBackToSelection"
+      <VehicleForm :type="vehicleType" :mode="mode" :vehicle-data="selectedVehicleObject" :plate-number-id="selectedPlateNumberId" @back="handleBackToSelection"
         @done="handleAddVehicleComplete" :org="org" :site="props.site" @close:all="handleCloseAll" />
     </v-dialog>
 
+    <v-dialog v-model="dialog.updateVehicle" v-if="vehicleType" width="450" persistent>
+      <VehicleForm :type="vehicleType" :mode="mode" :vehicle-data="selectedPlateNumberObject" :plate-number-id="selectedPlateNumberId" @back="handleBackToSelection"
+        @done="handleAddVehicleComplete" :org="org" :site="props.site" @close:all="handleCloseAll" @close="handleCloseAll" />
+    </v-dialog>
+
     <!-- <v-dialog v-model="dialog.updateVehicle" v-if="vehicleType" width="450" persistent>
       <VehicleForm :type="vehicleType" mode="edit" :vehicle-data="selectedVehicleObject"
         @back="dialog.updateVehicle = false" @close="dialog.updateVehicle = false" @done="handleUpdateVehicleComplete"
@@ -58,7 +63,7 @@
                 <span class="d-flex ga-3 align-center"><strong>{{ label }}:</strong></span>
                 <!-- <PlateNumberDisplay :plate-numbers="selectedVehicleObject[key]" show-all :default-value="selectedVehicleObject.plateNumber" />   -->
                 <v-col cols="12">
-                  <v-card flat outlined class="pa-2" border="sm black">
+                  <v-card flat outlined class="pa-2" border="sm black" :loading="loadingPlateNumberDetails">
                     <v-data-table :items="selectedVehicleObject[key]" :headers="plateHeaders" hide-default-footer>
                       <template #item.status="{ value }">
                         <v-chip :color="formatVehicleStatus(value).color" size="x-small" dark>
@@ -66,22 +71,33 @@
                         </v-chip>
                       </template>
                       <template #item.action="{ item: plateNumberItem, value }">
-                        <v-btn v-if="canDeleteVehicle && (plateNumberItem as TPlateNumber)?.status == 'active'"
-                          text="Delete" color="error" flat size="x-small"
-                          @click="handleDeleteVehicleAction(plateNumberItem as TPlateNumber)" />
-                        <v-btn
-                          v-if="props.app === 'property_management_agency' && (plateNumberItem as TPlateNumber)?.status == 'pending'"
-                          text="Approve" color="success" flat size="x-small"
-                          @click="handleApproveVehicle(plateNumberItem as TPlateNumber)" />
-                        <v-btn v-if="(plateNumberItem as TPlateNumber)?.status == 'deleted'" text="Restore"
-                          color="orange" flat size="x-small"
-                          @click="handleRestoreVehicle(plateNumberItem as TPlateNumber)" />
-                        <v-btn
-                          v-if="((plateNumberItem as TPlateNumber)?.type === 'whitelist' || (plateNumberItem as TPlateNumber)?.type === 'blocklist') && plateNumberItem?.status == 'active'"
-                          variant="outlined"
-                          :text="(plateNumberItem as TPlateNumber)?.type === 'blocklist' ? 'Whitelist' : 'Blocklist'"
-                          :color="(plateNumberItem as TPlateNumber)?.type === 'blocklist' ? 'primary' : 'red'" flat
-                          size="x-small" class="ml-1" @click="handleUpdateType(plateNumberItem as TPlateNumber)" />
+                        <v-menu>
+                          <template #activator="{ props: menuProps }">
+                            <v-btn icon="mdi-dots-vertical" v-bind="menuProps" flat size="x-small" />
+                          </template>
+                          <v-list density="compact">
+                            <v-list-item v-if="(plateNumberItem as TPlateNumber)?.status == 'active'"
+                              title="Edit Vehicle" prepend-icon="mdi-pencil" @click="handleEditVehicleAction(plateNumberItem as TPlateNumber)" />
+                            <v-list-item
+                              v-if="props.app === 'property_management_agency' && (plateNumberItem as TPlateNumber)?.status == 'pending'"
+                              title="Approve" prepend-icon="mdi-check-circle" base-color="success"
+                              @click="handleApproveVehicle(plateNumberItem as TPlateNumber)" />
+                            <v-list-item v-if="(plateNumberItem as TPlateNumber)?.status == 'deleted'" title="Restore"
+                              prepend-icon="mdi-restore" base-color="orange"
+                              @click="handleRestoreVehicle(plateNumberItem as TPlateNumber)" />
+                            <v-list-item
+                              v-if="((plateNumberItem as TPlateNumber)?.type === 'whitelist' || (plateNumberItem as TPlateNumber)?.type === 'blocklist') && plateNumberItem?.status == 'active'"
+                              :title="(plateNumberItem as TPlateNumber)?.type === 'blocklist' ? 'Whitelist' : 'Blocklist'"
+                              prepend-icon="mdi-swap-horizontal"
+                              :base-color="(plateNumberItem as TPlateNumber)?.type === 'blocklist' ? 'primary' : 'red'"
+                              @click="handleUpdateType(plateNumberItem as TPlateNumber)" />
+
+                            <v-list-item
+                              v-if="canDeleteVehicle && (plateNumberItem as TPlateNumber)?.status == 'active'"
+                              title="Delete" prepend-icon="mdi-delete" base-color="error"
+                              @click="handleDeleteVehicleAction(plateNumberItem as TPlateNumber)" />
+                          </v-list>
+                        </v-menu>
                       </template>
                     </v-data-table>
                     <v-btn text="Add Vehicle Number" class="mt-6 text-capitalize" prepend-icon="mdi-plus"
@@ -94,7 +110,7 @@
               <v-col v-else-if="selectedVehicleObject[key]" cols="12">
                 <span class="d-flex ga-3 align-center"><strong>{{ label }}:</strong> {{ formatValues(key,
                   selectedVehicleObject[key])
-                  }}</span>
+                }}</span>
               </v-col>
             </template>
           </v-row>
@@ -168,26 +184,30 @@ const plateHeaders = [
 
 
 const { formatCamelCaseToWords, formatDate, debounce } = useUtils();
-const { getVehicles, deleteVehicle, formatVehicleStatus, approveVehicle, updateVehicle } = useVehicle();
+const { getVehicles, deleteVehicle, formatVehicleStatus, approveVehicle, updateVehicle, getVehicleById } = useVehicle();
 
 const items = ref<Array<Record<string, any>>>([]);
 const page = ref(1);
 const pages = ref(0);
 const pageRange = ref("-- - -- of --");
 
+const mode = ref<"add" | "edit">("add");
+
 const searchInput = ref("")
 
 const loading = ref(false);
+const loadingPlateNumberDetails = ref(false);
 const deletingVehicle = ref(false);
 const approvingVehicle = ref(false);
 const restoringVehicle = ref(false);
 const updatingType = ref(false);
 
 const selectedVehicleId = ref<string | null>(null)
-const vehicleType = ref<TVehicleType | null>(null);
+const vehicleType = ref<TVehicleType | 'seasonpass' | null>(null);
 const vehicleTypeFilter = ref<TVehicleType | null>(null);
 
 const selectedPlateNumberObject = ref<TPlateNumber | null>(null);
+const selectedPlateNumberId = ref<string | null>(null); // individual plate number
 
 const message = ref("");
 const messageColor = ref("");
@@ -255,6 +275,8 @@ const handleCloseAll = () => {
   dialog.createVehicle = false;
   dialog.updateVehicle = false;
   dialog.showSelection = false;
+  dialog.updateVehicleType = false;
+  mode.value = "add";
   vehicleType.value = null;
 }
 
@@ -294,12 +316,29 @@ function addNewPlateNumbers() {
   dialog.showSelection = true;
 }
 
-function handleEditVehicleAction() {
-  vehicleType.value = selectedVehicleObject.value?.type || null;
-  console.log("Selected Vehicle Object: ", selectedVehicleObject.value);
-  dialog.showSelection = false;
-  dialog.updateVehicle = false;
-  dialog.updateVehicle = true;
+async function handleEditVehicleAction(item: TPlateNumber) {
+
+  selectedPlateNumberId.value = item?._id as string;
+
+  try {
+    loadingPlateNumberDetails.value = true;
+    const res = await getVehicleById(selectedPlateNumberId.value as string)
+      if(res?.seasonPassType){
+        vehicleType.value = "seasonpass";
+      } else {
+        vehicleType.value = item?.type || null;
+      }
+      selectedPlateNumberObject.value = res || null;
+      dialog.showMoreActions = false;
+      mode.value = "edit";
+      dialog.updateVehicle = true;
+    
+  } catch (error) {
+    console.error("Error fetching vehicle details:", error);
+  } finally {
+    loadingPlateNumberDetails.value = false;
+  } 
+  
 }
 
 function handleDeleteVehicleAction(item: TPlateNumber) {
@@ -354,6 +393,7 @@ function handleUpdatePage(newPageNum: number) {
 }
 
 function handleAddVehicleClick() {
+  mode.value = "add";
   dialog.showSelection = true;
   selectedVehicleId.value = null;
 }

package/composables/useCustomerSite.ts

@@ -15,6 +15,7 @@ export default function useCustomerSite() {
     );
   }
 
+
   async function getAll({
     page = 1,
     search = "",
@@ -47,10 +48,20 @@ export default function useCustomerSite() {
     );
   }
 
+  function getCustomerSites (org: string) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/customer-sites?page=1&search=&limit=10&sort=&order=asc&status=active&org=${org}`,
+      {
+        method: 'GET'
+      }
+    )
+  }
+
   return {
     add,
     getAll,
     addViaInvite,
     getBySiteAsServiceProvider,
+    getCustomerSites
   };
 }

package/composables/useUser.ts

@@ -14,6 +14,30 @@ export default function useUser() {
     });
   }
 
+  function inviteUserClient({
+    email = '',
+    app = '',
+    role = '',
+    name = '',
+    org = '',
+    site = '',
+    siteName = ''
+  } = {}) {
+    return useNuxtApp().$api<Record<string, any>>('/api/auth/invite/user', {
+      method: 'POST',
+      body: {
+        email,
+        app,
+        role,
+        name,
+        org,
+        ...(site && { siteId: site }),
+        ...(siteName && { siteName })
+      }
+    })
+  }
+
+
   function updateName(name = "") {
     return useNuxtApp().$api<Record<string, any>>("/api/users/name", {
       method: "PUT",
@@ -127,6 +151,7 @@ export default function useUser() {
     createUserByInvite,
     getById,
     createUserByVerification,
-    getUserByEmail
+    getUserByEmail,
+    inviteUserClient
   };
 }

package/package.json

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