@7365admin1/layer-common 1.11.38 → 1.11.39

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 1.11.39
+
+### Patch Changes
+
+- 59c813e: Update Layer-common new version
+
 ## 1.11.38
 
 ### Patch Changes

package/components/CameraForm.vue

@@ -11,12 +11,21 @@
     <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-5">
       <v-form ref="formRef" v-model="validForm" :disabled="disable">
         <v-row no-gutters class="pt-4">
+          <v-col v-if="isCCTV" cols="12">
+            <InputLabel class="text-capitalize" title="Camera Name" required />
+            <v-text-field
+              v-model.trim="camera.name"
+              density="comfortable"
+              :rules="[requiredRule]"
+              placeholder="Enter CCTV camera name"
+            />
+          </v-col>
           <v-col cols="12">
             <InputLabel class="text-capitalize" title="URL" required />
             <v-text-field
               v-model.trim="camera.host"
               density="comfortable"
-              :rules="[requiredRule, isValidBaseURL]"
+              :rules="[requiredRule, hostRule]"
               placeholder="Enter camera URL"
             />
           </v-col>
@@ -32,7 +41,7 @@
           </v-col>
 
           <v-col v-if="isANPR" cols="12">
-            <InputLabel class="text-capitalize" title="Direction" required />
+            <InputLabel class="text-capitalize" title="Type" required />
             <v-select
               v-model="camera.direction"
               :items="anprDirectionOptions"
@@ -50,7 +59,7 @@
             />
           </v-col>
 
-          <v-col cols="12">
+          <v-col v-if="isANPR" cols="12">
             <InputLabel class="text-capitalize" title="User" required />
             <v-text-field
               v-model.trim="camera.username"
@@ -60,7 +69,7 @@
             />
           </v-col>
 
-          <v-col cols="12">
+          <v-col v-if="isANPR" cols="12">
             <InputLabel class="text-capitalize" title="Password" required />
             <v-text-field
               v-model.trim="camera.password"
@@ -70,6 +79,20 @@
               placeholder="Enter password"
             />
           </v-col>
+
+          <v-col v-if="isANPR" cols="12">
+            <InputLabel class="text-capitalize" title="Status" />
+            <v-switch
+              v-model="camera.status"
+              hide-details
+              inset
+              density="comfortable"
+              true-value="active"
+              false-value="inactive"
+              :color="camera.status === 'active' ? 'success' : 'grey'"
+              :label="camera.status === 'active' ? 'Active' : 'Inactive'"
+            ></v-switch>
+          </v-col>
         </v-row>
       </v-form>
     </v-card-text>
@@ -107,7 +130,7 @@
 </template>
 
 <script setup lang="ts">
-import useSiteSettings from '../composables/useSiteSettings';
+import useSiteSettings from "../composables/useSiteSettings";
 
 const prop = defineProps({
   title: {
@@ -139,9 +162,10 @@ const prop = defineProps({
       password: "",
       type: "ip",
       category: "standard",
-      direction: "none",
+      direction: "both",
       guardPost: null,
       status: "active",
+      name: "",
     }),
   },
 });
@@ -149,6 +173,23 @@ const prop = defineProps({
 const { requiredRule, isValidBaseURL } = useUtils();
 const emit = defineEmits(["cancel", "select", "success", "error"]);
 
+const hostRule = computed(() => {
+  return (v: string | any) => {
+    if (!v) return true;
+
+    const isAnpr = prop.type === 'anpr';
+    
+    const anprRegex = /^http:\/\/[a-z0-9.-]+\.[a-z]{2,}(:\d+)?$/i;
+    const defaultRegex = /^https:\/\/[a-z0-9.-]+\.[a-z]{2,}\/[a-z0-9._-]+$/i;
+
+    if (isAnpr) {
+      return anprRegex.test(v) || 'Format: http://domain:port';
+    }
+    
+    return defaultRegex.test(v) || 'Format: https://domain/path';
+  };
+});
+
 const camera = ref<TSiteCamera>({
   site: "",
   host: "",
@@ -156,7 +197,8 @@ const camera = ref<TSiteCamera>({
   password: "",
   type: "ip",
   category: "standard",
-  direction: "none",
+  direction: "both",
+  name: "",
   guardPost: null,
   status: "active",
 });
@@ -166,11 +208,11 @@ camera.value.site = prop.site;
 if (prop.mode === "edit") {
   camera.value = JSON.parse(JSON.stringify(prop.camera));
 }
-
+console.log("prop.camera", prop?.camera);
 camera.value.site = prop.site;
 camera.value.type = prop.type;
-camera.value.category = prop.type === "anpr" ? "resident" : "standard";
-camera.value.direction = prop.type === "anpr" ? "both" : "none";
+camera.value.category = prop.camera?.category && prop.title == "Edit Camera" ? prop.camera?.category : prop.type == "anpr" ? "resident" : "standard";
+camera.value.direction = prop.camera?.direction && prop.title == "Edit Camera" ? prop.camera?.direction : prop.type == "anpr" ? "both" : "none";
 
 const validForm = ref(false);
 const formRef = ref<HTMLFormElement | null>(null);
@@ -178,6 +220,7 @@ const disable = ref(false);
 const message = ref("");
 
 const isANPR = computed(() => prop.type === "anpr");
+const isCCTV = computed(() => prop.type === "ip");
 
 const anprCategoryOptions = computed(() => [
   { title: "Resident", value: "resident" },
@@ -187,8 +230,7 @@ const anprCategoryOptions = computed(() => [
 const anprDirectionOptions = computed(() => [
   { title: "Entry", value: "entry" },
   { title: "Exit", value: "exit" },
-  { title: "Both", value: "both" },
-  { title: "None", value: "none" },
+  { title: "Both Entry and Exit", value: "both" },
 ]);
 
 function back() {
@@ -210,7 +252,8 @@ const hasChanges = computed(() => {
       camera.value.password !== prop.camera.password ||
       camera.value.category !== prop.camera.category ||
       camera.value.guardPost !== prop.camera.guardPost ||
-      camera.value.direction !== prop.camera.direction
+      camera.value.direction !== prop.camera.direction ||
+      camera.value.name !== prop.camera.name
     );
   }
 
@@ -237,6 +280,8 @@ async function submit() {
         category: camera.value.category,
         guardPost: camera.value.guardPost,
         direction: camera.value.direction,
+        status: camera.value.status,
+        name: camera.value.name,
       });
     }
 

package/components/CameraMain.vue

@@ -24,7 +24,7 @@
 
         <v-card-text class="pa-0 bg-red">
           <v-data-table
-            :headers="prop.headers"
+            :headers="computedHeaders"
             :items="items"
             fixed-header
             hide-default-footer
@@ -92,6 +92,12 @@
           class="pa-5 my-5 px-7"
         >
           <v-row no-gutters>
+            <v-col v-if="camera.type === 'ip'" cols="12" class="mb-2">
+              Camera Name:
+              <span class="font-weight-bold">
+                {{ camera.name }}
+              </span>
+            </v-col>
             <v-col cols="12" class="mb-2">
               Host:
               <span class="font-weight-bold">
@@ -99,14 +105,14 @@
               </span>
             </v-col>
 
-            <v-col cols="12" class="mb-2">
+            <v-col v-if="camera.type === 'anpr'" cols="12" class="mb-2">
               Username:
               <span class="font-weight-bold">
                 {{ camera.username }}
               </span>
             </v-col>
 
-            <v-col cols="12" class="mb-2">
+            <v-col v-if="camera.type === 'anpr'" cols="12" class="mb-2">
               Password:
               <span class="font-weight-bold">
                 {{ camera.password }}
@@ -275,6 +281,15 @@ const prop = defineProps({
   },
 });
 
+const computedHeaders = computed(() => {
+  if (prop.type === "ip") {
+    const base = [...prop.headers];
+    base.splice(0, 0, { text: "Name", value: "name" });
+    return base;
+  }
+  return prop.headers;
+});
+
 const items = ref<Array<TCamera>>([]);
 const page = ref(1);
 const pages = ref(0);
@@ -341,6 +356,7 @@ const camera = ref<TSiteCamera>({
 });
 
 function handleRowClick(_: any, data: any) {
+  console.log("row clicked", data.item);
   dialogPreview.value = true;
   camera.value = JSON.parse(JSON.stringify(data.item));
 }

package/components/ClientMain.vue

@@ -1,9 +1,21 @@
 <template>
   <v-row no-gutters>
     <v-col cols="12">
-      <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">
+      <TableMain
+
+  :headers="currentHeaders"
+  :items="items"
+  :loading="loading"
+  :page="page"
+  :pages="pages"
+  :page-range="pageRange"
+  :items-per-page="limit"
+  :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">
@@ -144,10 +156,15 @@ async function resolveRoleName(id: string) {
   roleCache.value[id] = roleName
   return roleName
 }
-
+const limit = ref(10)
 /* ================= FETCH ================= */
 async function fetchActive() {
-  const res = await getAll({ page: page.value, search: search.value })
+  const res = await getAll({
+    page: page.value,
+    search: search.value,
+    limit: limit.value,
+  })
+
   const orgs = res?.data?.items || res?.items || []
 
   const mapped = await Promise.all(
@@ -160,6 +177,7 @@ async function fetchActive() {
 
       try {
         const siteRes = await getCustomerSitesByOrgId(org._id)
+
         sitesCount =
           siteRes?.data?.totalItems ||
           siteRes?.totalItems ||
@@ -169,6 +187,7 @@ async function fetchActive() {
 
         const subRes = await getSubscriptionByOrgId(org._id)
         const subscription = subRes?.data || subRes
+
         if (subscription) {
           planType = subscription?.paidType || '-'
           billingCycle = subscription?.billingCycle || '-'
@@ -176,25 +195,33 @@ async function fetchActive() {
           subscriptionEnd = formatDate(subscription?.nextBillingDate)
         }
       } catch (e) {
-        console.error('Error mapping org:', org._id, e)
+        console.error(e)
       }
 
       return {
-        _id: org._id,
+        _id: `${org._id}-${page.value}`,
         ...org,
         sites: `${sitesCount} Sites`,
         planType,
         billingCycle,
         subscriptionStart,
         subscriptionEnd,
-        status: org?.status || 'Active',
+        status: org?.status || 'active',
       }
     })
   )
 
-  items.value = mapped
-  pages.value = res?.data?.totalPages || res?.totalPages || 1
-  totalItems.value = res?.data?.totalItems || res?.totalItems || mapped.length
+  items.value = []
+
+  await nextTick()
+
+  items.value = [...mapped]
+
+  pages.value = res?.pages || 1
+
+  const match = res?.pageRange?.match(/of\s+(\d+)/i)
+
+  totalItems.value = match ? Number(match[1]) : mapped.length
 }
 
 async function fetchSuspended() {
@@ -247,9 +274,13 @@ async function fetchSuspended() {
     })
   )
 
-  items.value = mapped
-  pages.value = res?.data?.totalPages || res?.totalPages || 1
-  totalItems.value = res?.data?.totalItems || res?.totalItems || mapped.length
+  items.value = [...mapped]
+
+pages.value = res?.pages || 1
+
+const match = res?.pageRange?.match(/of\s+(\d+)/i)
+
+totalItems.value = match ? Number(match[1]) : mapped.length
 }
 
 async function fetchPending() {
@@ -258,60 +289,75 @@ async function fetchPending() {
     type: 'user-invite',
     page: page.value,
     search: search.value,
-    // app: 'organization',
   })
 
-  items.value = await Promise.all(
+ items.value = [
+  ...(await Promise.all(
     (res?.items || []).map(async (i: any) => ({
       ...i,
       app:
         APP_LIST.find(a => a.value === i.metadata?.app)?.title ||
         i.metadata?.app ||
         '-',
+
       role: await resolveRoleName(i.metadata?.role),
     }))
-  )
+  ))
+]
 
   pages.value = res?.pages || 1
-  totalItems.value = res?.total || items.value.length
+
+  const match = res?.pageRange?.match(/of\s+(\d+)/i)
+
+  totalItems.value = match
+    ? Number(match[1])
+    : items.value.length
 }
 
 async function fetchData() {
   loading.value = true
+
   try {
-    if (tab.value === 'suspended') {
+    if (tab.value === 'active') {
+      await fetchActive()
+    }
+    else if (tab.value === 'suspended') {
       items.value = []
       pages.value = 1
       totalItems.value = 0
-      return
     }
-    if (tab.value === 'active') await fetchActive()
-    else await fetchPending()
+    else {
+      await fetchPending()
+    }
   } finally {
     loading.value = false
   }
 }
 
 /* ================= EVENTS ================= */
-function onTabChange() {
-  page.value = 1
-  fetchData()
-}
-
-function handleUpdatePage(p: number) {
+async function handleUpdatePage(p: number) {
   page.value = p
-  fetchData()
+  await fetchData()
+}
+async function onTabChange() {
+  page.value = 1
+  await fetchData()
 }
 
 function handleRefresh() {
   fetchData()
 }
 
+let searchTimeout: any = null
+
 function handleSearch() {
-  page.value = 1
-  fetchData()
-}
+  clearTimeout(searchTimeout)
 
+  searchTimeout = setTimeout(async () => {
+    page.value = 1
+    await fetchData()
+  }, 500)
+}
 /* ================= DIALOG ================= */
 function openInviteDialog() {
   dialog.value = true

package/components/InvitationForm.vue

@@ -24,7 +24,11 @@
             </v-row>
           </v-col>
 
-          <v-col v-if="APP === 'organization'" cols="12" class="mt-2">
+          <v-col
+            v-if="!props.hideApp && props.adminState && APP === 'organization'"
+            cols="12"
+            class="mt-2"
+          >
             <v-row no-gutters>
               <InputLabel class="text-capitalize" title="App" required />
               <v-col cols="12">
@@ -55,7 +59,7 @@
             </v-row>
           </v-col>
 
-          <v-col v-if="hasSite" cols="12">
+          <v-col v-if="hasSite && props.adminState" cols="12">
             <v-row no-gutters>
               <InputLabel class="text-capitalize" title="Site" />
               <v-col cols="12">
@@ -139,6 +143,8 @@ import useUser from '../composables/useUser';
 import useUtils from '../composables/useUtils';
 
 const APP = useRuntimeConfig().public.APP;
+
+
 const props = defineProps({
   title: {
     type: String,
@@ -177,13 +183,21 @@ const props = defineProps({
       metadata: { app: "organization", role: "" },
     }),
   },
+  adminState: {
+    type: Boolean,
+    default: true
+  },
+  hideApp: {
+    type: Boolean,
+    default: false
+  }
 });
 
 const emit = defineEmits(["cancel", "success", "success:create-more"]);
 
 const validForm = ref(false);
 const form = ref<HTMLFormElement | null>(null);
-const app = computed(() => useRuntimeConfig().public.APP ?? "");
+// const app = computed(() => useRuntimeConfig().public.APP ?? "");
 
 const loading = reactive({
   submittingForm: false,
@@ -200,8 +214,24 @@ const invite = ref<Record<string, any>>({
   isMemberInvite: false,
 });
 
-invite.value.app = props.app;
-invite.value.org = props.org ?? "";
+watch(
+  () => [props.hideApp, props.adminState, props.app, props.org],
+  () => {
+    invite.value.org = props.org || ""
+
+    if (props.hideApp) {
+      invite.value.app = "property_management_agency"
+      return
+    }
+
+    invite.value.app = props.adminState
+      ? (props.app || "")
+      : "property_management_agency"
+  },
+  { immediate: true }
+)
+// invite.value.app = props.app;
+// invite.value.org = props.org ?? "";
 
 if (props.mode === "edit") {
   invite.value.email = props.invite.email;

package/components/Layout/NavigationDrawer.vue

@@ -1,45 +1,68 @@
 <template>
-  <v-navigation-drawer v-model="drawer" permanent floating class="bg-primary">
+  <v-navigation-drawer
+    v-model="drawer"
+    permanent
+    floating
+    class="bg-primary"
+  >
     <v-list>
       <v-list-item>
         <v-list-item-title class="text-h6 text-white">
           {{ props.title || APP_NAME }}
         </v-list-item-title>
       </v-list-item>
+
       <slot name="action" />
-      <template
-        v-for="(navigationItem, navigationIndex) in props.navigationItems"
-        :key="`${navigationItem.title}-${navigationIndex}`"
+
+      <!-- NAVIGATION ITEMS -->
+      <v-tooltip
+        v-for="(item, index) in props.navigationItems"
+        :key="`${item.title}-${index}`"
+        location="right"
       >
-        <NavigationItem
-          v-if="navigationItem.children?.length"
-          :title="navigationItem.title"
-          :icon="navigationItem.icon"
-          :route="navigationItem.route"
-          :children="navigationItem.children"
-        />
-
-        <NavigationItem
-          v-else-if="navigationItem.route"
-          :title="navigationItem.title"
-          :icon="navigationItem.icon"
-          :link="navigationItem.link"
-          :route="navigationItem.route"
-        />
-      </template>
-
-      <slot name="services"> </slot>
+        <template #activator="{ props: tooltipProps }">
+          <div v-bind="tooltipProps">
+            <NavigationItem
+              :title="item.title"
+              :icon="item.icon"
+              :route="item.route"
+              :link="item.link"
+              :class="{
+                'opacity-50 pointer-events-none': item.disabled
+              }"
+              @click="() => handleClick(item)"
+            />
+          </div>
+        </template>
+
+        <!-- TOOLTIP ONLY WHEN DISABLED -->
+        <span v-if="item.disabled">
+          Please complete onboarding first
+        </span>
+      </v-tooltip>
+
+      <!-- SERVICES SLOT -->
+      <slot name="services" />
     </v-list>
   </v-navigation-drawer>
 </template>
 
 <script setup lang="ts">
 const props = defineProps({
-  navigationItems: { type: Array<TNavigationItem>, required: true },
+  navigationItems: { type: Array, required: true },
   title: { type: String, default: "" }
-});
+})
+
+const emit = defineEmits(['navigate'])
 
-const { drawer } = useLocal();
+const { drawer } = useLocal()
+const { APP_NAME } = useRuntimeConfig().public
 
-const { APP_NAME } = useRuntimeConfig().public;
+/**
+ * GLOBAL CLICK CONTROL
+ */
+const handleClick = (item: any) => {
+  if (item.disabled) return
+  emit('navigate', item)
+}
 </script>

package/components/RolePermissionFormCreate.vue

@@ -26,17 +26,11 @@
             </v-row>
           </v-col>
 
-          <v-col cols="12" class="mt-2">
+          <v-col v-if="props.siteState" cols="12" class="mt-2">
             <v-row no-gutters>
               <InputLabel title="Site" />
               <v-col cols="12">
-                <v-text-field
-                  :model-value="siteName"
-                  density="comfortable"
-                  readonly
-                  disabled
-                  :loading="loadSite"
-                />
+                <v-text-field :model-value="siteName" density="comfortable" readonly disabled :loading="loadSite" />
               </v-col>
             </v-row>
           </v-col>
@@ -53,12 +47,21 @@
             </v-radio-group>
           </v-col>
 
+          <v-col cols="12" class="mt-2">
+            <v-btn
+              size="small"
+              variant="tonal"
+              class="text-none mb-2"
+              @click="() => toggleSelectAll(!isAllSelected)"
+            >
+              {{ isAllSelected ? 'Unselect All' : 'Select All' }}
+            </v-btn>
+          </v-col>
+
           <v-col cols="12" class="mt-3">
             <v-card variant="outlined" border="thin" rounded="lg">
               <template
-                v-for="(
-                  actions, resourceKey, resourceIndex
-                ) in props.permissions"
+                v-for="(actions, resourceKey, resourceIndex) in safePermissions"
                 :key="resourceKey"
               >
                 <v-divider v-if="resourceIndex > 0" />
@@ -94,18 +97,14 @@
                 <!-- Expanded checkboxes when toggled on -->
                 <template v-if="isCategoryEnabled(String(resourceKey))">
                   <template
-                    v-for="(action, actionKey) in actions"
+                    v-for="([actionKey, action]) in Object.entries(actions || {})"
                     :key="actionKey"
                   >
                     <v-divider />
                     <v-list-item density="compact" :ripple="false">
                       <template #prepend>
                         <v-checkbox-btn
-                          :model-value="
-                            selectedPermissions.includes(
-                              `${String(resourceKey)}:${String(actionKey)}`
-                            )
-                          "
+                          :model-value="permState.selected.includes(`${String(resourceKey)}:${String(actionKey)}`)"
                           @update:model-value="
                             toggleAction(
                               String(resourceKey),
@@ -204,59 +203,90 @@ const props = defineProps({
     type: String,
     default: "app",
   },
+  siteState: {
+    type: Boolean,
+    default: true,
+  },
 });
 
 const emit = defineEmits(["cancel", "success", "success:create-more"]);
 
 const validForm = ref(false);
 const name = ref("");
-const selectedPermissions = ref<Array<string>>([]);
 const platform = ref("web");
 const disable = ref(false);
 const message = ref("");
 
-const { requiredRule, requireListRule } = useUtils();
+const { requiredRule } = useUtils();
 const { createRole } = useRole();
 const { getSiteById } = useSite();
 
-const enabledCategories = ref<Set<string>>(new Set());
+// Gom selected + enabled vào 1 shallowRef duy nhất
+// để chỉ trigger 1 render cycle khi update cả 2
+const permState = shallowRef({
+  selected: [] as string[],
+  enabled: [] as string[],
+})
 
-function selectedActionCount(resource: string) {
-  return selectedPermissions.value.filter((p) => p.startsWith(`${resource}:`))
-    .length;
+function isCategoryEnabled(resource: string) {
+  return permState.value.enabled.includes(resource)
 }
 
-function isCategoryEnabled(resource: string) {
-  return enabledCategories.value.has(resource);
+function selectedActionCount(resource: string) {
+  return permState.value.selected.filter(p => p.startsWith(`${resource}:`)).length
 }
 
 function toggleCategory(resource: string, value: boolean | null) {
-  const updated = new Set(enabledCategories.value);
+  const { selected, enabled } = permState.value
   if (value) {
-    updated.add(resource);
+    if (!enabled.includes(resource)) {
+      permState.value = { selected, enabled: [...enabled, resource] }
+    }
   } else {
-    updated.delete(resource);
-
-    selectedPermissions.value = selectedPermissions.value.filter(
-      (p) => !p.startsWith(`${resource}:`)
-    );
+    permState.value = {
+      selected: selected.filter(p => !p.startsWith(`${resource}:`)),
+      enabled: enabled.filter(r => r !== resource),
+    }
   }
-  enabledCategories.value = updated;
 }
 
 function toggleAction(resource: string, action: string, value: boolean | null) {
-  const key = `${resource}:${action}`;
+  if (value !== true && value !== false) return
+  const key = `${resource}:${action}`
+  const { selected, enabled } = permState.value
   if (value) {
-    if (!selectedPermissions.value.includes(key)) {
-      selectedPermissions.value = [...selectedPermissions.value, key];
+    if (!selected.includes(key)) {
+      permState.value = { selected: [...selected, key], enabled }
     }
   } else {
-    selectedPermissions.value = selectedPermissions.value.filter(
-      (p) => p !== key
-    );
+    permState.value = { selected: selected.filter(p => p !== key), enabled }
   }
 }
 
+function toggleSelectAll(value: boolean) {
+  if (!value) {
+    permState.value = { selected: [], enabled: [] }
+    return
+  }
+
+  const perms = safePermissions.value
+  if (!perms) return
+
+  const allKeys: string[] = []
+  const categories: string[] = []
+
+  for (const [resource, actions] of Object.entries(perms)) {
+    if (!resource || !actions || typeof actions !== 'object') continue
+    categories.push(resource)
+    for (const action of Object.keys(actions)) {
+      if (action) allKeys.push(`${resource}:${action}`)
+    }
+  }
+
+  // 1 assignment duy nhất = 1 render cycle, không crash
+  permState.value = { selected: allKeys, enabled: categories }
+}
+
 const siteName = ref("");
 const loadSite = ref(false);
 
@@ -286,7 +316,7 @@ async function submit() {
     const platformValue = platform.value === "web" ? "website" : platform.value;
     await createRole({
       name: name.value,
-      permissions: selectedPermissions.value,
+      permissions: permState.value.selected,
       type: props.type,
       org: props.org,
       site: props.siteId,
@@ -301,11 +331,41 @@ async function submit() {
 }
 
 function cancel() {
-  name.value = "";
-  selectedPermissions.value = [];
-  enabledCategories.value = new Set();
-  platform.value = "web";
-  message.value = "";
-  emit("cancel");
+  name.value = ""
+  permState.value = { selected: [], enabled: [] }
+  platform.value = "web"
+  message.value = ""
+  emit("cancel")
 }
+
+const safePermissions = computed(() => {
+  const p = props.permissions || {}
+  const cleaned: Record<string, any> = {}
+
+  for (const [k, v] of Object.entries(p)) {
+    if (v && typeof v === 'object' && !Array.isArray(v)) {
+      cleaned[k] = v
+    } else {
+      cleaned[k] = {}
+    }
+  }
+
+  return cleaned
+})
+
+const isAllSelected = computed(() => {
+  const perms = safePermissions.value
+  const allKeys: string[] = []
+
+  Object.entries(perms).forEach(([resource, actions]) => {
+    if (!actions) return
+    Object.keys(actions).forEach((action) => {
+      if (action) allKeys.push(`${resource}:${action}`)
+    })
+  })
+
+  return allKeys.length > 0 &&
+    allKeys.every(k => permState.value.selected.includes(k))
+})
+
 </script>

package/components/ScheduleTaskMain.vue

@@ -156,6 +156,73 @@
                   </v-col>
                 </v-row>
 
+                <v-row
+                  v-if="selectedTask.areas && selectedTask.areas.length > 0"
+                  no-gutters
+                  class="mb-2"
+                >
+                  <v-col cols="12">
+                    <div class="text-subtitle-2 font-weight-bold mb-2">Units Under Selected Areas:</div>
+                    <v-card variant="outlined" rounded>
+                      <v-list density="compact" nav>
+                        <template
+                          v-for="(area, idx) in selectedTask.areas"
+                          :key="area.value || area._id"
+                        >
+                          <v-divider v-if="Number(idx) > 0" />
+                          <v-list-item
+                            :title="area.name"
+                            class="font-weight-medium"
+                            @click="toggleViewArea(area.value || area._id)"
+                          >
+                            <template #prepend>
+                              <v-icon size="16">
+                                {{
+                                  openViewAreas.includes(area.value || area._id)
+                                    ? 'mdi-chevron-down'
+                                    : 'mdi-chevron-right'
+                                }}
+                              </v-icon>
+                            </template>
+                            <template #append>
+                              <v-progress-circular
+                                v-if="loadingViewUnits && !(area.value || area._id in fetchedViewAreaUnits)"
+                                size="14"
+                                width="2"
+                                indeterminate
+                                color="primary"
+                              />
+                              <v-chip v-else size="x-small" variant="tonal" color="primary">
+                                {{ (fetchedViewAreaUnits[area.value || area._id] || []).length }}
+                              </v-chip>
+                            </template>
+                          </v-list-item>
+                          <v-expand-transition>
+                            <div v-show="openViewAreas.includes(area.value || area._id)">
+                              <v-card-text class="px-3 py-2">
+                                <div
+                                  v-if="(fetchedViewAreaUnits[area.value || area._id] || []).length > 0"
+                                  class="d-flex flex-wrap ga-3"
+                                >
+                                  <v-chip
+                                    v-for="unit in fetchedViewAreaUnits[area.value || area._id]"
+                                    :key="unit.unit"
+                                    size="small"
+                                    variant="tonal"
+                                  >
+                                    {{ unit.name }}
+                                  </v-chip>
+                                </div>
+                                <span v-else class="text-caption text-disabled">No units configured</span>
+                              </v-card-text>
+                            </div>
+                          </v-expand-transition>
+                        </template>
+                      </v-list>
+                    </v-card>
+                  </v-col>
+                </v-row>
+
                 <v-row v-if="selectedTask.description" no-gutters class="mb-2">
                   <v-col cols="5" class="text-subtitle-2 font-weight-bold">
                     Description:
@@ -260,6 +327,7 @@
 <script lang="ts" setup>
 import useScheduleTask from "../composables/useScheduleTask";
 import useUtils from "../composables/useUtils";
+import useAreas from "../composables/useAreas";
 
 const props = defineProps({
   orgId: { type: String, required: true },
@@ -276,6 +344,7 @@ const props = defineProps({
 const { formatDate, debounce } = useUtils();
 const { getScheduleTasks, getScheduleTaskById, deleteScheduleTask } =
   useScheduleTask();
+const { getAreaById } = useAreas();
 
 const canViewScheduleTasks = computed(() => props.canViewScheduleTasks);
 const canCreateScheduleTask = computed(() => props.canCreateScheduleTask);
@@ -301,6 +370,42 @@ const message = ref("");
 const messageSnackbar = ref(false);
 const messageColor = ref("success");
 
+const loadingViewUnits = ref(false);
+const fetchedViewAreaUnits = ref<Record<string, { name: string; unit: string }[]>>({});
+const openViewAreas = ref<string[]>([]);
+
+const toggleViewArea = (id: string) => {
+  const idx = openViewAreas.value.indexOf(id);
+  if (idx === -1) openViewAreas.value.push(id);
+  else openViewAreas.value.splice(idx, 1);
+};
+
+watch(dialogShowMoreActions, async (isOpen) => {
+  if (!isOpen) return;
+  const areas = (selectedTask.value?.areas || []) as any[];
+  if (areas.length === 0) return;
+  openViewAreas.value = areas.map((a) => a.value || a._id);
+  const toFetch = areas
+    .map((a) => a.value || a._id)
+    .filter((id) => id && !(id in fetchedViewAreaUnits.value));
+  if (toFetch.length === 0) return;
+  loadingViewUnits.value = true;
+  try {
+    await Promise.all(
+      toFetch.map(async (id: string) => {
+        try {
+          const result = await getAreaById(id);
+          fetchedViewAreaUnits.value[id] = result?.units || [];
+        } catch {
+          fetchedViewAreaUnits.value[id] = [];
+        }
+      })
+    );
+  } finally {
+    loadingViewUnits.value = false;
+  }
+});
+
 const items = ref<any[]>([]);
 
 const headers = [

package/components/VehicleForm.vue

@@ -775,8 +775,12 @@ onMounted(() => {
       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 || '';
+      vehicle.plateNumber = prop.vehicleData.plateNumber
       vehicle.peopleId = prop.vehicleData.peopleId || '';
+
+      if(prop.type === "seasonpass"){
+        showSubscriptionDateOptions.value = true;
+      }
     }
   }, 300);
 })

package/components/VehicleManagement.vue

@@ -37,13 +37,15 @@
     </v-dialog>
 
     <v-dialog v-model="dialog.createVehicle" v-if="vehicleType" width="450" persistent>
-      <VehicleForm :type="vehicleType" :mode="mode" :vehicle-data="selectedVehicleObject" :plate-number-id="selectedPlateNumberId" @back="handleBackToSelection"
-        @done="handleAddVehicleComplete" :org="org" :site="props.site" @close:all="handleCloseAll" />
+      <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" />
+      <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>
@@ -77,7 +79,8 @@
                           </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)" />
+                              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"
@@ -110,7 +113,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>
@@ -184,7 +187,7 @@ const plateHeaders = [
 
 
 const { formatCamelCaseToWords, formatDate, debounce } = useUtils();
-const { getVehicles, deleteVehicle, formatVehicleStatus, approveVehicle, updateVehicle, getVehicleById } = useVehicle();
+const { getVehicles, deleteVehicle, formatVehicleStatus, approveVehicle, updateVehicle, getSpecificVehicleById } = useVehicle();
 
 const items = ref<Array<Record<string, any>>>([]);
 const page = ref(1);
@@ -322,23 +325,30 @@ async function handleEditVehicleAction(item: TPlateNumber) {
 
   try {
     loadingPlateNumberDetails.value = true;
-    const res = await getVehicleById(selectedPlateNumberId.value as string)
-      if(res?.seasonPassType){
+    const res = await getSpecificVehicleById(selectedPlateNumberId.value as string)
+
+    if (res.type === 'blocklist') {
+      vehicleType.value = "blocklist";
+    } else {
+      if (res?.seasonPassType) {
         vehicleType.value = "seasonpass";
       } else {
-        vehicleType.value = item?.type || null;
+        vehicleType.value = "whitelist";
       }
-      selectedPlateNumberObject.value = res || null;
-      dialog.showMoreActions = false;
-      mode.value = "edit";
-      dialog.updateVehicle = true;
-    
+    }
+
+
+    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) {

package/composables/useSiteSettings.ts

@@ -66,6 +66,7 @@ export default function () {
         | "password"
         | "username"
         | "direction"
+        | "status"
       >
     >
   ) {

package/composables/useVehicle.ts

@@ -131,6 +131,18 @@ export default function useVehicle() {
     return { label, color }
 }
 
+// fetch specific plateNumber Vehicle data
+
+function getSpecificVehicleById(id: string){
+  return useNuxtApp().$api<Record<string, any>>(
+    `/api/vehicles/specific/${id}`,
+    {
+      method: "GET",
+    }
+  );
+}
+
+
   return {
     getVehicles,
     addVehicle,
@@ -141,6 +153,7 @@ export default function useVehicle() {
     getVehicleByNRIC,
     formatVehicleStatus,
     approveVehicle,
-    searchMultipleVehiclesByUnitId
+    searchMultipleVehiclesByUnitId,
+    getSpecificVehicleById
   };
 }

package/package.json

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

package/types/camera.d.ts

@@ -26,6 +26,7 @@ declare type TSiteCamera = {
   type: "ip" | "anpr";
   category: "standard" | "resident" | "visitor";
   direction: "entry" | "exit" | "both" | "none";
+  name?: string;
   guardPost: number | null;
   status: string;
 };