@7365admin1/layer-common 1.11.36 → 1.11.38

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @iservice365/layer-common
 
+## 1.11.38
+
+### Patch Changes
+
+- 79f3f90: Update Layer-common
+
+## 1.11.37
+
+### Patch Changes
+
+- 100370d: Update layer-common version
+
 ## 1.11.36
 
 ### Patch Changes

package/components/ClientMain.vue

@@ -1,16 +1,12 @@
 <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
+      <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>
@@ -21,27 +17,30 @@
               <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"
@@ -56,64 +55,66 @@
     <v-dialog v-model="dialog" max-width="500">
       <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 ?? "-"
+const search = ref('')
+const totalItems = ref(0)
+const cancelLoadingId = ref<string | null>(null)
 
-  roleCache.value[id] = roleName
 
-  return roleName
-}
+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" },
-  { 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 +122,176 @@ 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:
+        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 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 +322,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

@@ -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 = ""
@@ -236,7 +253,7 @@ function handleUpdateSite(id: string) {
 }
 
 /* ================= SUBMIT ================= */
-const { inviteUser } = useUser()
+const { inviteUserClient } = useUser()
 const { requiredRule, emailRule } = useUtils()
 
 const message = ref("")
@@ -251,14 +268,15 @@ async function submit() {
 
     await Promise.all(
       apps.map(app =>
-        inviteUser({
+        inviteUserClient({
           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,
+          // 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,