@7365admin1/layer-common 3.0.19 → 3.0.20

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 3.0.20
+
+### Patch Changes
+
+- ea81bba: add dialog confirm for client and update service provider
+
 ## 3.0.19
 
 ### Patch Changes

package/components/CleaningScheduleMain.vue

@@ -26,11 +26,15 @@
                 v-model:utc="startDate"
                 density="compact"
                 hide-details
+                :date-only="true"
+                placeholder="Start Date"
               />
               <InputDateTimePicker
                 v-model:utc="endDate"
                 density="compact"
                 hide-details
+                :date-only="true"
+                placeholder="End Date"
               />
               <v-select
                 v-model="status"

package/components/ClientMain.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="page-wrap">
 
-    <!-- ===== TABLE VIEW: topbar + table đi chung 1 khối ===== -->
+    <!-- ===== TABLE VIEW ===== -->
     <template v-if="viewMode === 'table'">
 
       <!-- ===== TOP BAR ===== -->
@@ -24,7 +24,7 @@
             </svg>
           </div>
 
-          <!-- Filters: chỉ hiện ở active/suspended -->
+          <!-- Filters -->
           <div v-if="tab !== 'pending'" class="filter-wrap">
             <div class="filter-field">
               <label>Filter by status</label>
@@ -104,7 +104,7 @@
         <div v-if="loading" class="loading-bar"><div class="loading-bar-fill" /></div>
 
         <!-- TABLE: active / suspended -->
-        <div v-if="tab !== 'pending'" class="table-scroll">
+        <div v-if="tab !== 'pending'" ref="tableScrollEl" class="table-scroll" @scroll="closeMenu">
           <table>
             <thead>
               <tr>
@@ -156,32 +156,9 @@
                 </td>
                 <td>
                   <div class="action-wrap">
-                    <button class="dots-btn" @click.stop="toggleMenu(item._id)">
+                    <button class="dots-btn" @click.stop="toggleMenu(item._id, $event)">
                       <span /><span /><span />
                     </button>
-                    <div v-if="openMenuId === item._id" class="dropdown">
-                      <button
-                        class="dd-item"
-                        @click="viewClient(item)"
-                      >
-                        View Organization
-                      </button>
-                      <button
-                        v-if="item.status === 'suspended'"
-                        class="dd-item"
-                        @click="activateClient(item)"
-                      >
-                        Activate
-                      </button>
-
-                      <button
-                        v-else
-                        class="dd-item danger"
-                        @click="suspendClient(item)"
-                      >
-                        Suspend
-                      </button>
-                    </div>
                   </div>
                 </td>
               </tr>
@@ -228,7 +205,6 @@
 
     </template>
 
-    <!-- ===== DETAIL VIEW: chiếm toàn bộ page-wrap, không còn topbar/table ===== -->
     <div v-else-if="viewMode === 'detail'" class="client-detail">
       <ClientDetailForm
         :client="selectedClient"
@@ -237,17 +213,59 @@
       />
     </div>
 
-    <!-- ===== DIALOG (luôn nằm ngoài, có thể mở ở bất kỳ view nào) ===== -->
     <div v-if="dialog" class="overlay" @click.self="dialog = false">
       <div class="dialog-box">
         <InvitationClientForm title="Invite Client" @success="handleSuccess" @cancel="dialog = false" />
       </div>
     </div>
+
+    <!-- ===== SUSPEND CONFIRMATION DIALOG ===== -->
+    <div v-if="confirmSuspendItem" class="overlay" @click.self="cancelSuspend">
+      <div class="confirm-box">
+        <h3 class="confirm-title">Suspend account</h3>
+        <p class="confirm-text">
+          Are you sure you want to suspend <strong>{{ confirmSuspendItem?.name }}</strong>'s account?
+        </p>
+        <div class="confirm-actions">
+          <button class="btn-cancel" @click="cancelSuspend">Cancel</button>
+          <button class="btn-confirm-danger" :disabled="confirmSuspendLoading" @click="confirmSuspend">
+            <span v-if="confirmSuspendLoading" class="spinner spinner-light" />
+            <span v-else>Suspend</span>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <Teleport to="body">
+      <div
+        v-if="openMenuId"
+        class="dropdown"
+        :style="{ top: menuPos.top + 'px', left: menuPos.left + 'px' }"
+      >
+        <button class="dd-item" @click="viewClient(activeMenuItem)">
+          View Organization
+        </button>
+        <button
+          v-if="activeMenuItem?.status === 'suspended'"
+          class="dd-item"
+          @click="activateClient(activeMenuItem)"
+        >
+          Activate
+        </button>
+        <button
+          v-else
+          class="dd-item danger"
+          @click="askSuspend(activeMenuItem)"
+        >
+          Suspend
+        </button>
+      </div>
+    </Teleport>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import useOrg from '../composables/useOrg'
 import useVerification from '../composables/useVerification'
 import useRole from '../composables/useRole'
@@ -283,6 +301,9 @@ const APP_LIST = [
 const tab             = ref<TabStatus>('active')
 const dialog          = ref(false)
 const openMenuId      = ref<string | null>(null)
+const menuPos         = ref({ top: 0, left: 0 })
+const tableScrollEl   = ref<HTMLElement | null>(null)
+
 // filterStatus
 const filterStatus    = ref<'active' | 'suspended'>('active')
 const filterPlan      = ref('')   // '' = All | any APP_LIST value
@@ -300,6 +321,10 @@ const roleCache       = ref<Record<string, string>>({})
 const viewMode        = ref<'table' | 'detail'>('table')
 const selectedClient  = ref<any>(null)
 
+/* suspend confirmation */
+const confirmSuspendItem    = ref<any>(null)
+const confirmSuspendLoading = ref(false)
+
 /* ── COMPUTED ── */
 const pageRange = computed(() => {
   if (!totalItems.value) return '0-0 of 0'
@@ -308,6 +333,10 @@ const pageRange = computed(() => {
   return `${start}-${end} of ${totalItems.value}`
 })
 
+const activeMenuItem = computed(() =>
+  items.value.find(i => i._id === openMenuId.value) ?? null
+)
+
 /* ── HELPERS ── */
 function formatDate(date?: string | Date) {
   if (date == null || date === '') return '-'
@@ -358,6 +387,28 @@ async function activateClient(item: any) {
   }
 }
 
+/* ── SUSPEND CONFIRMATION ── */
+function askSuspend(item: any) {
+  confirmSuspendItem.value = item
+  closeMenu()
+}
+
+function cancelSuspend() {
+  if (confirmSuspendLoading.value) return
+  confirmSuspendItem.value = null
+}
+
+async function confirmSuspend() {
+  if (!confirmSuspendItem.value) return
+  confirmSuspendLoading.value = true
+  try {
+    await suspendClient(confirmSuspendItem.value)
+    confirmSuspendItem.value = null
+  } finally {
+    confirmSuspendLoading.value = false
+  }
+}
+
 async function fetchOrgs(status: 'active' | 'suspended') {
   loading.value = true
 
@@ -484,7 +535,6 @@ async function handleUpdatePage(p: number) {
 
 async function onTabChange(value: TabStatus) {
   tab.value  = value
-  // sync filterStatus ( active/suspended)
   if (value !== 'pending') filterStatus.value = value
   page.value = 1
   await fetchData()
@@ -509,14 +559,44 @@ function handleFilterChange() {
   fetchData()
 }
 
-/* ── MENU ── */
-function toggleMenu(id: string) {
-  openMenuId.value = openMenuId.value === id ? null : id
+const DROPDOWN_WIDTH = 130
+
+function toggleMenu(id: string, event: MouseEvent) {
+  if (openMenuId.value === id) {
+    closeMenu()
+    return
+  }
+  const btn = event.currentTarget as HTMLElement
+  const rect = btn.getBoundingClientRect()
+
+  let left = rect.right - DROPDOWN_WIDTH
+  if (left < 8) left = 8
+  if (left + DROPDOWN_WIDTH > window.innerWidth - 8) {
+    left = window.innerWidth - DROPDOWN_WIDTH - 8
+  }
+
+  menuPos.value = {
+    top: rect.bottom + 4,
+    left,
+  }
+  openMenuId.value = id
 }
+
 function closeMenu() {
   openMenuId.value = null
 }
 
+function handleOutsideClick(e: MouseEvent) {
+  const target = e.target as HTMLElement
+  if (!target.closest('.dropdown') && !target.closest('.dots-btn')) {
+    closeMenu()
+  }
+}
+
+function handleWindowResize() {
+  closeMenu()
+}
+
 /* ── DIALOG ── */
 function openInviteDialog() { dialog.value = true }
 function handleSuccess()    { dialog.value = false; fetchData() }
@@ -532,7 +612,18 @@ async function cancelInvite(item: any) {
   }
 }
 
-onMounted(() => fetchData())
+onMounted(() => {
+  fetchData()
+  document.addEventListener('click', handleOutsideClick)
+  document.addEventListener('scroll', closeMenu, true)
+  window.addEventListener('resize', handleWindowResize)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleOutsideClick)
+  document.removeEventListener('scroll', closeMenu, true)
+  window.removeEventListener('resize', handleWindowResize)
+})
 </script>
 
 <style scoped>
@@ -823,15 +914,13 @@ tbody td { padding: 14px 16px; vertical-align: middle; }
 .dots-btn span { display: block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
 
 .dropdown {
-  position: absolute;
-  right: 0;
-  top: calc(100% + 4px);
+  position: fixed;
   background: #fff;
   border: 1px solid #E5E7EB;
   border-radius: 8px;
   box-shadow: 0 4px 12px rgba(0,0,0,0.08);
   min-width: 130px;
-  z-index: 50;
+  z-index: 1100;
   overflow: hidden;
 }
 .dd-item {
@@ -874,6 +963,10 @@ tbody td { padding: 14px 16px; vertical-align: middle; }
   border-radius: 50%;
   animation: spin 0.7s linear infinite;
 }
+.spinner-light {
+  border: 1.5px solid rgba(255,255,255,0.5);
+  border-top-color: #fff;
+}
 
 .client-detail {
   margin: 12px 0 0 0;
@@ -896,4 +989,61 @@ tbody td { padding: 14px 16px; vertical-align: middle; }
   box-shadow: 0 16px 48px rgba(0,0,0,0.12);
   overflow: hidden;
 }
+
+/* ===== SUSPEND CONFIRMATION DIALOG ===== */
+.confirm-box {
+  background: #fff;
+  border-radius: 12px;
+  max-width: 380px;
+  width: 90%;
+  box-shadow: 0 16px 48px rgba(0,0,0,0.12);
+  padding: 24px;
+}
+.confirm-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #111827;
+  margin-bottom: 8px;
+}
+.confirm-text {
+  font-size: 13.5px;
+  color: #4B5563;
+  line-height: 1.5;
+  margin-bottom: 20px;
+}
+.confirm-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+.btn-cancel {
+  padding: 8px 16px;
+  font-size: 13px;
+  font-weight: 500;
+  border: 1px solid #D1D5DB;
+  border-radius: 8px;
+  background: #fff;
+  color: #374151;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.btn-cancel:hover { background: #F9FAFB; }
+.btn-confirm-danger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-width: 78px;
+  padding: 8px 16px;
+  font-size: 13px;
+  font-weight: 500;
+  border: none;
+  border-radius: 8px;
+  background: #DC2626;
+  color: #fff;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.btn-confirm-danger:hover:not(:disabled) { background: #B91C1C; }
+.btn-confirm-danger:disabled { opacity: 0.7; cursor: not-allowed; }
 </style>

package/components/DashboardMain.vue

@@ -824,13 +824,7 @@
         <div class="dashboard-card dashboard-panel figma-panel">
           <div class="figma-panel-header">
             <h2>Today's Attentions</h2>
-            <button
-              class="figma-panel-action"
-              type="button"
-              @click="goToDashboardRoute('incident-reports')"
-            >
-              View All
-            </button>
+        
           </div>
           <div class="figma-panel-body">
             <div v-if="todayAttentions.length" class="figma-list">

package/components/Input/DateTimePicker.vue

@@ -1,186 +1,201 @@
 <template>
-    <div class="d-flex flex-column">
-        <v-text-field v-bind="$attrs" ref="dateTimePickerRef" :model-value="dateTimeFormattedReadOnly" autocomplete="off"
-            :placeholder="inputPlaceholder" :rules="rules" style="z-index: 10" @click="openDatePicker">
-            <template #append-inner>
-                <v-icon icon="mdi-calendar" @click.stop="openDatePicker" />
-            </template>
-        </v-text-field>
-        <div class="w-100 d-flex align-end ga-3 hidden-input">
-            <input ref="dateInput" :type="inputType" v-model="dateTime" :min="minValue" />
-        </div>
+  <div class="d-flex flex-column">
+    <v-text-field
+      v-bind="$attrs"
+      ref="dateTimePickerRef"
+      :model-value="dateTimeFormattedReadOnly"
+      autocomplete="off"
+      :placeholder="inputPlaceholder"
+      :rules="rules"
+      style="z-index: 10"
+      @click="openDatePicker"
+    >
+      <template #append-inner>
+        <v-icon icon="mdi-calendar" @click.stop="openDatePicker" />
+      </template>
+    </v-text-field>
+    <div class="w-100 d-flex align-end ga-3 hidden-input">
+      <input
+        ref="dateInput"
+        :type="inputType"
+        v-model="dateTime"
+        :min="minValue"
+      />
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
+import { ref, computed, watch } from "vue";
 
 const prop = defineProps({
-    rules: {
-        type: Array as PropType<Array<any>>,
-        default: () => []
-    },
-    placeholder: {
-        type: String,
-        default: 'DD/MM/YYYY, HH:MM AM/PM'
-    },
-    dateOnly: {
-        type: Boolean,
-        default: false
-    },
-    min: {
-        type: String,
-        default: undefined
-    }
-})
-
-const { formatDateISO8601 } = useUtils()
-const dateTime = defineModel<string | null>({ default: null }) //2025-10-10T13:09 format 
-const dateTimeUTC = defineModel<string | null>('utc', { default: null }) // UTC format
-
-const dateTimeFormattedReadOnly = ref<string | null>(null)
-const inputType = computed(() => (prop.dateOnly ? 'date' : 'datetime-local'))
-
+  rules: {
+    type: Array as PropType<Array<any>>,
+    default: () => [],
+  },
+  placeholder: {
+    type: String,
+    default: "DD/MM/YYYY, HH:MM AM/PM",
+  },
+  dateOnly: {
+    type: Boolean,
+    default: false,
+  },
+  min: {
+    type: String,
+    default: undefined,
+  },
+});
+
+const { formatDateISO8601 } = useUtils();
+const dateTime = defineModel<string | null>({ default: null }); //2025-10-10T13:09 format
+const dateTimeUTC = defineModel<string | null>("utc", { default: null }); // UTC format
+
+const dateTimeFormattedReadOnly = ref<string | null>(null);
+const inputType = computed(() => (prop.dateOnly ? "date" : "datetime-local"));
 
 const minValue = computed(() => {
-    if (!prop.min) return undefined
-    if (/^\d{4}-\d{2}-\d{2}$/.test(prop.min)) {
-        return prop.dateOnly ? prop.min : `${prop.min}T00:00`
-    }
-    return prop.min
-})
-const inputPlaceholder = computed(() => (
-    prop.placeholder || (prop.dateOnly ? 'MM/DD/YYYY' : 'DD/MM/YYYY, HH:MM AM/PM')
-))
-
-
-
-
-const dateInput = ref<HTMLInputElement | null>(null)
-const dateTimePickerRef = ref<HTMLInputElement | null>(null)
-
-const isInitialLoad = ref(true)
+  if (!prop.min) return undefined;
+  if (/^\d{4}-\d{2}-\d{2}$/.test(prop.min)) {
+    return prop.dateOnly ? prop.min : `${prop.min}T00:00`;
+  }
+  return prop.min;
+});
+const inputPlaceholder = computed(
+  () =>
+    prop.placeholder ||
+    (prop.dateOnly ? "MM/DD/YYYY" : "DD/MM/YYYY, HH:MM AM/PM")
+);
+
+const dateInput = ref<HTMLInputElement | null>(null);
+const dateTimePickerRef = ref<HTMLInputElement | null>(null);
+
+const isInitialLoad = ref(true);
 
 function openDatePicker() {
-    setTimeout(() => {
-        dateInput.value?.showPicker?.()
-    }, 0)
+  setTimeout(() => {
+    dateInput.value?.showPicker?.();
+  }, 0);
 }
 
 function validate() {
-    (dateTimePickerRef.value as any)?.validate()
+  (dateTimePickerRef.value as any)?.validate();
 }
 
 function convertToReadableFormat(dateStr: string): string {
+  if (!dateStr) return "";
 
-    if (!dateStr) return "";
+  const date = new Date(dateStr);
+  if (Number.isNaN(date.getTime())) return "";
 
-    const date = new Date(dateStr)
-    if (Number.isNaN(date.getTime())) return "";
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  const year = date.getFullYear();
 
-    const month = String(date.getMonth() + 1).padStart(2, '0')
-    const day = String(date.getDate()).padStart(2, '0')
-    const year = date.getFullYear()
+  if (prop.dateOnly) {
+    return `${day}/${month}/${year}`;
+  }
 
-    if (prop.dateOnly) {
-        return `${month}/${day}/${year}`
-    }
+  let hours = date.getHours();
+  const minutes = String(date.getMinutes()).padStart(2, "0");
 
-    let hours = date.getHours()
-    const minutes = String(date.getMinutes()).padStart(2, '0')
+  const ampm = hours >= 12 ? "PM" : "AM";
+  hours = hours % 12;
+  hours = hours ? hours : 12;
 
-    const ampm = hours >= 12 ? 'PM' : 'AM'
-    hours = hours % 12
-    hours = hours ? hours : 12
+  const formattedTime = `${String(hours).padStart(2, "0")}:${minutes} ${ampm}`;
 
-    const formattedTime = `${String(hours).padStart(2, '0')}:${minutes} ${ampm}`
-
-    return `${day}/${month}/${year}, ${formattedTime}`
+  return `${day}/${month}/${year}, ${formattedTime}`;
 }
 
 function toDateOnlyInputValue(dateStr: string): string {
-    if (!dateStr) return ''
-    if (/^\d{4}-\d{2}-\d{2}$/.test(dateStr)) return dateStr
-    const date = new Date(dateStr)
-    if (Number.isNaN(date.getTime())) return ''
-    const year = date.getFullYear()
-    const month = String(date.getMonth() + 1).padStart(2, '0')
-    const day = String(date.getDate()).padStart(2, '0')
-    return `${year}-${month}-${day}`
+  if (!dateStr) return "";
+  if (/^\d{4}-\d{2}-\d{2}$/.test(dateStr)) return dateStr;
+  const date = new Date(dateStr);
+  if (Number.isNaN(date.getTime())) return "";
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
 }
 
-function handleInitialDate(){
-    const dateDefault = dateTime.value
-    const dateUTC = dateTimeUTC.value
-    if(dateDefault){
-        dateTimeFormattedReadOnly.value = convertToReadableFormat(dateDefault)
-        if (prop.dateOnly) {
-            dateTimeUTC.value = toDateOnlyInputValue(dateDefault)
-        } else {
-            const localDate = new Date(dateDefault)
-            dateTimeUTC.value = localDate.toISOString()
-        }
-    } else if (dateUTC){
-        dateTimeFormattedReadOnly.value = convertToReadableFormat(dateUTC)
-        if (prop.dateOnly) {
-            dateTime.value = toDateOnlyInputValue(dateUTC)
-        } else {
-            const localDate = new Date(dateUTC)
-            dateTime.value = formatDateISO8601(localDate)
-        }
+function handleInitialDate() {
+  const dateDefault = dateTime.value;
+  const dateUTC = dateTimeUTC.value;
+  if (dateDefault) {
+    dateTimeFormattedReadOnly.value = convertToReadableFormat(dateDefault);
+    if (prop.dateOnly) {
+      dateTimeUTC.value = toDateOnlyInputValue(dateDefault);
+    } else {
+      const localDate = new Date(dateDefault);
+      dateTimeUTC.value = localDate.toISOString();
+    }
+  } else if (dateUTC) {
+    dateTimeFormattedReadOnly.value = convertToReadableFormat(dateUTC);
+    if (prop.dateOnly) {
+      dateTime.value = toDateOnlyInputValue(dateUTC);
     } else {
-        dateTimeFormattedReadOnly.value = null
+      const localDate = new Date(dateUTC);
+      dateTime.value = formatDateISO8601(localDate);
     }
+  } else {
+    dateTimeFormattedReadOnly.value = null;
+  }
 }
 
-
-watch(dateTime, (dateVal) => {
-    if (isInitialLoad.value) return // ignore the first run
+watch(
+  dateTime,
+  (dateVal) => {
+    if (isInitialLoad.value) return; // ignore the first run
     if (!dateVal) {
-        dateTimeFormattedReadOnly.value = null;
-        dateTimeUTC.value = null
-        return
+      dateTimeFormattedReadOnly.value = null;
+      dateTimeUTC.value = null;
+      return;
     }
 
-    dateTimeFormattedReadOnly.value = convertToReadableFormat(dateVal)
+    dateTimeFormattedReadOnly.value = convertToReadableFormat(dateVal);
     if (prop.dateOnly) {
-        dateTimeUTC.value = toDateOnlyInputValue(dateVal)
+      dateTimeUTC.value = toDateOnlyInputValue(dateVal);
     } else {
-        const localDate = new Date(dateVal)
-        dateTimeUTC.value = localDate.toISOString()
+      const localDate = new Date(dateVal);
+      dateTimeUTC.value = localDate.toISOString();
     }
-
-}, { immediate: false })
-
-  watch(dateTimeUTC, () => {
-        handleInitialDate()
-  }, { immediate: true})
-
+  },
+  { immediate: false }
+);
+
+watch(
+  dateTimeUTC,
+  () => {
+    handleInitialDate();
+  },
+  { immediate: true }
+);
 
 onMounted(async () => {
-    await nextTick()
-    isInitialLoad.value = false
-    // Wait until Vuetify renders its internal input
-    const nativeInput = (dateTimePickerRef.value as any)?.$el?.querySelector('input')
-    if (nativeInput) {
-        nativeInput.addEventListener('click', (e: MouseEvent) => {
-            e.stopPropagation()
-            openDatePicker()
-        })
-    }
-    
-})
-
+  await nextTick();
+  isInitialLoad.value = false;
+  // Wait until Vuetify renders its internal input
+  const nativeInput = (dateTimePickerRef.value as any)?.$el?.querySelector(
+    "input"
+  );
+  if (nativeInput) {
+    nativeInput.addEventListener("click", (e: MouseEvent) => {
+      e.stopPropagation();
+      openDatePicker();
+    });
+  }
+});
 
 defineExpose({
-    validate
-})
+  validate,
+});
 </script>
 
 <style scoped>
 .hidden-input {
-    opacity: 0;
-    height: 0;
-    width: 1px;
+  opacity: 0;
+  height: 0;
+  width: 1px;
 }
 </style>

package/components/ServiceProviderMain.vue

@@ -732,6 +732,7 @@ const {
   add: addServiceProvider,
   createServiceProviderInvite,
   updateStatus: updateServiceProviderStatus,
+  invite
 } = useServiceProvider();
 const { getAll: getAllMembers } = useMember();
 
@@ -759,9 +760,10 @@ const createInviteDialog = ref(false);
 // const serviceProviderInviteRoles = ref<Array<Record<string, any>>>([]);
 
 const { getByUserType } = useMember();
+const { getOrgs } = useOrg();
 
 async function checkExistingAccount(email: string) {
-  // existingAccount.value = null;
+  existingAccount.value = null;
 
   if (!email.trim() || emailRule(email) !== true) return;
 
@@ -772,19 +774,23 @@ async function checkExistingAccount(email: string) {
 
     if (!user?._id) return;
 
-const member = await getByUserType(user._id, "organization");
-    console.log("member raw:", member);
-    console.log("onboardingCompleted:", member?.onboardingCompleted);
+const orgs = await getOrgs({
+  user: user._id,
+});
+
+const matchedOrg = orgs.items?.find(
+  (org: any) => org.type === serviceProviderInvite.value.app
+);
+
+if (matchedOrg) {
+  existingAccount.value = {
+    _id: matchedOrg.value,
+    text: matchedOrg.text,
+    ...matchedOrg,
+  };
+}
 
-    if (member?.onboardingCompleted) {
-      existingAccount.value = {
-        _id: member.org,
-        text: member.orgName,
-        ...member,
-      };
-    }
   } catch (error) {
-    console.error(error);
     existingAccount.value = null;
   } finally {
     checkingExistingAccount.value = false;
@@ -799,6 +805,14 @@ watch(
     await checkExistingAccount(value);
   }
 );
+watch(
+  () => serviceProviderInvite.value.app,
+  () => {
+    if (serviceProviderInvite.value.email) {
+      checkExistingAccount(serviceProviderInvite.value.email);
+    }
+  }
+);
 
 const serviceProviderInviteApps = computed(() =>
   natureOfBusinessV3.map((item) => ({
@@ -1183,33 +1197,42 @@ async function submitServiceProviderAdd() {
     disableServiceProvider.value = false;
   }
 }
-
 async function submitServiceProviderInvite() {
   disableServiceProvider.value = true;
   messageServiceProvider.value = "";
+
   try {
-    const payload = {
+    await invite({
       email: serviceProviderInvite.value.email.trim(),
-      name: "",
-      app: serviceProviderInvite.value.app,
       orgId: props.orgId,
       siteId: serviceProviderInvite.value.siteId,
       siteName:
-        serviceProviderInvite.value.siteName || site.value?.name || props.siteName,
-    };
+        serviceProviderInvite.value.siteName ||
+        site.value?.name ||
+        props.siteName,
+
+      inviteType: existingAccount.value
+        ? "create-org"
+        : "organization-invite",
+    });
 
-    await createServiceProviderInvite(payload);
     showMessage("Invitation sent.", "success");
+
     if (createMoreServiceProvider.value) {
       serviceProviderInvite.value.email = "";
     } else {
-      await setServiceProvider({ mode: "invite", dialog: false });
+      await setServiceProvider({
+        mode: "invite",
+        dialog: false,
+      });
     }
+
     await loadList();
   } catch (error: any) {
     messageServiceProvider.value =
       error?.response?._data?.message ??
       "An error occurred while inviting the service provider.";
+
     showMessage(errorConverter(error), "error");
   } finally {
     disableServiceProvider.value = false;

package/composables/useServiceProvider.ts

@@ -174,12 +174,13 @@ export default function useServiceProvider() {
     orgId = "",
     siteId = "",
     siteName = "",
+    inviteType=""
   } = {}) {
     return useNuxtApp().$api<Record<string, any>>(
       "/api/service-providers/invite",
       {
         method: "POST",
-        body: { email, orgId, siteId, siteName },
+        body: { email, orgId, siteId, siteName, inviteType },
       }
     );
   }

package/package.json

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