@7365admin1/layer-common 1.11.37 → 1.11.39

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @iservice365/layer-common
 
+## 1.11.39
+
+### Patch Changes
+
+- 59c813e: Update Layer-common new version
+
+## 1.11.38
+
+### Patch Changes
+
+- 79f3f90: Update Layer-common
+
 ## 1.11.37
 
 ### 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,14 +1,15 @@
 <template>
   <v-row no-gutters>
     <v-col cols="12">
-    <TableMain
+      <TableMain
+
   :headers="currentHeaders"
   :items="items"
   :loading="loading"
   :page="page"
   :pages="pages"
-  :pageRange="pageRange"
-  :items-per-page="-1"
+  :page-range="pageRange"
+  :items-per-page="limit"
   :extension-height="120"
   :offset="300"
   show-header
@@ -25,30 +26,16 @@
             </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 -->
         <template #actions>
-          <v-btn
-            v-if="tab !== 'suspended'"
-            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>
@@ -60,26 +47,16 @@
 
         <!-- STATUS CELL -->
         <template #item.status="{ value }">
-          <v-chip
-            size="small"
-            :color="value === 'suspended' ? 'error' : 'success'"
-            variant="flat"
-          >
+          <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>
@@ -88,11 +65,7 @@
 
     <!-- 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>
   </v-row>
 </template>
@@ -125,6 +98,17 @@ const search = ref('')
 const totalItems = ref(0)
 const cancelLoadingId = ref<string | null>(null)
 
+
+const APP_LIST = [
+  { title: "Organization", value: "organization" },
+  { title: "Security Agency", value: "security_agency" },
+  { title: "Cleaning Services", value: "cleaning_services" },
+  { title: "Property Management Agency", value: "property_management_agency" },
+  { title: "Mechanical & Electrical Services", value: "mechanical_electrical_services" },
+  { title: "Pest Control Services", value: "pest_control_services" },
+  { title: "Landscaping Services", value: "landscaping_services" },
+  { title: "Pool Maintenance Services", value: "pool_maintenance_services" },
+]
 /* ================= HEADERS ================= */
 const orgHeaders = [
   { title: 'Organization Name', key: 'name' },
@@ -172,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(
@@ -188,6 +177,7 @@ async function fetchActive() {
 
       try {
         const siteRes = await getCustomerSitesByOrgId(org._id)
+
         sitesCount =
           siteRes?.data?.totalItems ||
           siteRes?.totalItems ||
@@ -197,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 || '-'
@@ -204,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() {
@@ -275,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() {
@@ -286,57 +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: i.metadata?.app ?? '-',
+      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/InvitationClientForm.vue

@@ -119,17 +119,18 @@
 import { computed, ref, reactive, watchEffect } from 'vue'
 import useCustomerSite from '../composables/useCustomerSite'
 import useLocal from '../composables/useLocal'
-import { useLocalSetup } from '../composables/useLocalSetup'
 import useRole from '../composables/useRole'
 import useUser from '../composables/useUser'
 import useUtils from '../composables/useUtils'
+import useOrg from '../composables/useOrg'
+import { watch } from 'vue'
 
 const APP = useRuntimeConfig().public.APP
 
 /* ================= PROPS ================= */
 const props = defineProps({
   title: { type: String, default: "Invite Form" },
-  app: { type: String, default: "organization" },
+  app: { type: String, default: "" },
   org: { type: String, default: "" },
   mode: { type: String, default: "create" },
 })
@@ -162,17 +163,23 @@ if (props.mode === "create") {
 
 /* ================= APP LIST ================= */
 const APP_LIST = [
-  { title: "Organization", value: "organization" },
+  { title: "Property Management Agency", value: "property_management_agency" },
   { title: "Security Agency", value: "security_agency" },
   { title: "Cleaning Services", value: "cleaning_services" },
-  { title: "Property Management Agency", value: "property_management_agency" },
   { title: "Mechanical & Electrical Services", value: "mechanical_electrical_services" },
   { title: "Pest Control Services", value: "pest_control_services" },
-  { title: "Landscaping Services", value: "landscaping_services" },
   { title: "Pool Maintenance Services", value: "pool_maintenance_services" },
 ]
-
-const { orgNature } = useLocalSetup()
+const { getByName } = useOrg()
+const org = ref<any>(null)
+  watch(
+  () => props.org,
+  async (name) => {
+    if (!name) return
+    org.value = await getByName(name)
+  },
+  { immediate: true }
+)
 
 const apps = computed(() => APP_LIST)
 
@@ -188,7 +195,7 @@ const { getAll: getAllCustomerSite } = useCustomerSite()
 
 const { data: siteData, refresh: refreshSiteData } = await useLazyAsyncData(
   "sites",
-  () => getAllCustomerSite({ org: props.org, limit: 50 })
+  () => getAllCustomerSite({ org: org.value?._id, limit: 50 })
 )
 
 watchEffect(() => {
@@ -200,9 +207,13 @@ watchEffect(() => {
   }
 })
 
-watchEffect(() => {
-  if (hasSite.value) refreshSiteData()
-})
+watch(
+  () => org.value?._id,
+  async (id) => {
+    if (!id) return
+    await refreshSiteData()
+  }
+)
 
 /* ================= ROLE ================= */
 const roles = ref<any[]>([])
@@ -211,18 +222,24 @@ const { getRoles } = useRole()
 const { data: roleData, refresh: refreshRoles } = await useLazyAsyncData(
   "roles",
   () =>
-    getRoles({
-      org: props.org,
-      type: props.app,
-      limit: 50,
-    }),
+  getRoles({
+    org: org.value?._id,
+    type: props.app,
+    limit: 50,
+  }),
   { watch: [() => props.app] }
 )
 
 watchEffect(() => {
   if (roleData.value) roles.value = roleData.value.items
 })
-
+watch(
+  () => org.value?._id,
+  async (id) => {
+    if (!id) return
+    await refreshRoles()
+  }
+)
 /* ================= EVENTS ================= */
 async function handleUpdateApp(value: string[]) {
   invite.value.role = ""
@@ -255,7 +272,8 @@ async function submit() {
           email: invite.value.email,
           app,
           role: invite.value.role,
-          org: invite.value.org,
+          // org: invite.value.org,
+          org: org.value?._id,
           site: invite.value.site,
           siteName: invite.value.siteName,
           // isMemberInvite: invite.value.isMemberInvite,
@@ -269,7 +287,7 @@ async function submit() {
         email: "",
         app: [],
         role: "",
-        org: props.org,
+        org: org.value?._id || "",
         site: "",
         siteName: "",
         isMemberInvite: false,