@7365admin1/layer-common 1.11.32 → 1.11.34

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @iservice365/layer-common
 
+## 1.11.34
+
+### Patch Changes
+
+- 299c4fa: Update layer-common version
+
+## 1.11.33
+
+### Patch Changes
+
+- ed63329: Update Layer-common version
+
 ## 1.11.32
 
 ### Patch Changes

package/components/ClientMain.vue

@@ -0,0 +1,231 @@
+<template>
+  <v-row no-gutters>
+
+    <!-- MAIN TABLE -->
+    <v-col cols="12">
+      <TableMain :headers="currentHeaders" :items="currentItems" :loading="loadingState" :page="currentPage"
+        :pages="currentPages" :pageRange="pageRange" :extension-height="120" :offset="300" show-header
+        @refresh="handleRefresh" @update:page="handleUpdatePage">
+
+        <!-- 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>
+              <v-tab value="pending">Pending Invitation</v-tab>
+            </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" />
+            </div>
+
+          </v-row>
+        </template>
+
+        <!-- ACTIONS (ONLY ONE INVITE BUTTON HERE) -->
+        <template #actions>
+          <v-btn class="text-none" rounded="pill" variant="tonal" size="large" @click="openInviteDialog">
+            Invite Client
+          </v-btn>
+        </template>
+
+        <!-- CUSTOM CELL -->
+        <template #item.index="{ index }">
+          {{ (currentPage - 1) * 10 + index + 1 }}
+        </template>
+
+        <template #item.status="{ value }">
+          <v-chip size="small" variant="tonal">
+            {{ value }}
+          </v-chip>
+        </template>
+        <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)">
+            Cancel Invite
+          </v-btn>
+        </template>
+      </TableMain>
+    </v-col>
+
+    <!-- DIALOG -->
+    <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'
+import useOrg from '../composables/useOrg'
+import useVerification from '../composables/useVerification'
+import useRole from '../composables/useRole'
+import InvitationClientForm from './InvitationClientForm.vue'
+
+
+const tab = ref<'active' | 'suspended' | 'pending'>('active')
+const dialog = ref(false)
+
+const { getAll } = useOrg()
+const { getVerifications, cancelUserInvitation } = useVerification()
+const { getRoleById } = useRole()
+const roleCache = ref<Record<string, string>>({})
+
+/* ================= STATE ================= */
+const items = ref<any[]>([])
+const loading = ref(false)
+
+const page = ref(1)
+const pages = ref(1)
+const search = ref("")
+async function resolveRoleName(id: string) {
+  if (!id) return "-"
+
+  if (roleCache.value[id]) return roleCache.value[id]
+
+  const res = await getRoleById(id)
+
+  const roleName = res?.name ?? "-"
+
+  roleCache.value[id] = roleName
+
+  return roleName
+}
+/* ================= HEADERS ================= */
+const orgHeaders = [
+  { title: "Organization Name", key: "name" },
+  { title: "Site", key: "sites" },
+  { title: "Plan Type", key: "plan" },
+  { title: "Billing Cycle", key: "bill" },
+  { title: "Subscription Start", key: "start" },
+  { title: "Subscription End", key: "end" },
+  { title: "Status", key: "status" },
+  { title: "Action", key: "actions" },
+]
+
+const inviteHeaders = [
+  { title: "Email", key: "email" },
+  { title: "App", key: "app" },
+  { title: "Role", key: "role" },
+  { title: "Status", key: "status" },
+  { title: "Action", key: "action" },
+]
+
+/* ================= COMPUTED ================= */
+const currentHeaders = computed(() =>
+  tab.value === 'pending' ? inviteHeaders : orgHeaders
+)
+
+const currentItems = computed(() => items.value)
+const currentPage = computed(() => page.value)
+const currentPages = computed(() => pages.value)
+
+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
+    }
+  } 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
+  fetchData()
+}
+
+function handleUpdatePage(p: number) {
+  page.value = p
+  fetchData()
+}
+
+function handleRefresh() {
+  fetchData()
+}
+
+function handleSearch() {
+  page.value = 1
+  fetchData()
+}
+
+/* ================= DIALOG ================= */
+function openInviteDialog() {
+  dialog.value = true
+}
+
+function handleSuccess() {
+  dialog.value = false
+  fetchData()
+}
+
+/* ================= INIT ================= */
+onMounted(() => {
+  fetchData()
+})
+
+const cancelLoadingId = ref<string | null>(null)
+
+async function cancelInvite(item: any) {
+  try {
+    cancelLoadingId.value = item._id
+
+    await cancelUserInvitation(item._id)
+
+    await fetchData()
+  } finally {
+    cancelLoadingId.value = null
+  }
+}
+</script>

package/components/InvitationClientForm.vue

@@ -0,0 +1,292 @@
+<template>
+  <v-card width="100%">
+    <v-toolbar>
+      <v-row no-gutters class="fill-height px-6" align="center">
+        <span class="font-weight-bold text-h5">
+          {{ props.title }}
+        </span>
+      </v-row>
+    </v-toolbar>
+
+    <v-card-text style="max-height: 100vh; overflow-y: auto">
+      <v-form v-model="validForm" ref="form" :disabled="disable">
+        <v-row no-gutters>
+
+          <!-- EMAIL -->
+          <v-col cols="12" class="mt-2">
+            <InputLabel title="Email" required />
+            <v-text-field
+              v-model="invite.email"
+              density="comfortable"
+              :rules="[requiredRule, emailRule]"
+              :loading="loading.verifyingEmail"
+            />
+          </v-col>
+
+          <!-- APP MULTI SELECT -->
+          <v-col v-if="APP" cols="12" class="mt-2">
+            <InputLabel title="App" required />
+            <v-autocomplete
+              v-model="invite.app"
+              :items="apps"
+              item-title="title"
+              item-value="value"
+              multiple
+              chips
+              closable-chips
+              density="comfortable"
+              :rules="[requiredRule]"
+              @update:model-value="handleUpdateApp"
+            />
+          </v-col>
+
+          <!-- ROLE -->
+          <v-col cols="12">
+            <InputLabel title="Role" />
+            <v-autocomplete
+              v-model="invite.role"
+              :items="roles"
+              item-title="name"
+              item-value="_id"
+              density="comfortable"
+              :rules="[requiredRule]"
+            />
+          </v-col>
+
+          <!-- SITE -->
+          <v-col v-if="hasSite" cols="12">
+            <InputLabel title="Site" />
+            <v-autocomplete
+              v-model="invite.site"
+              :items="sites"
+              density="comfortable"
+              :rules="[requiredRule]"
+              @update:model-value="handleUpdateSite"
+            />
+          </v-col>
+
+          <!-- CREATE MORE -->
+          <v-col cols="12" class="mt-2">
+            <v-checkbox v-model="createMore" density="comfortable" hide-details>
+              <template #label>
+                <span class="text-subtitle-2 font-weight-bold">
+                  Create more
+                </span>
+              </template>
+            </v-checkbox>
+          </v-col>
+
+          <!-- ERROR -->
+          <v-col cols="12" class="my-2 text-center">
+            <span class="text-subtitle-2 text-error">
+              {{ message }}
+            </span>
+          </v-col>
+
+        </v-row>
+      </v-form>
+    </v-card-text>
+
+    <!-- ACTION -->
+    <v-toolbar density="compact">
+      <v-row no-gutters>
+        <v-col cols="6">
+          <v-btn block variant="text" class="text-none" size="48" @click="cancel">
+            Cancel
+          </v-btn>
+        </v-col>
+
+        <v-col cols="6">
+          <v-btn
+            block
+            variant="flat"
+            color="black"
+            class="text-none"
+            size="48"
+            :disabled="!validForm"
+            :loading="loading.submittingForm"
+            @click="submit"
+          >
+            Submit
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-toolbar>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+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'
+
+const APP = useRuntimeConfig().public.APP
+
+/* ================= PROPS ================= */
+const props = defineProps({
+  title: { type: String, default: "Invite Form" },
+  app: { type: String, default: "organization" },
+  org: { type: String, default: "" },
+  mode: { type: String, default: "create" },
+})
+
+const emit = defineEmits(["cancel", "success"])
+
+const validForm = ref(false)
+const form = ref()
+
+const loading = reactive({
+  submittingForm: false,
+  verifyingEmail: false,
+})
+
+/* ================= FORM ================= */
+const invite = ref({
+  email: "",
+  app: [] as string[],
+  role: "",
+  org: props.org ?? "",
+  site: "",
+  siteName: "",
+  isMemberInvite: false,
+})
+
+/* default app */
+if (props.mode === "create") {
+  invite.value.app = props.app ? [props.app] : []
+}
+
+/* ================= APP LIST ================= */
+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" },
+]
+
+const { orgNature } = useLocalSetup()
+
+const apps = computed(() => APP_LIST)
+
+/* ================= SITE ================= */
+const { natureOfBusiness } = useLocal()
+
+const hasSite = computed(() =>
+  natureOfBusiness.some(i => i.value === invite.value.app)
+)
+
+const sites = ref<any[]>([])
+const { getAll: getAllCustomerSite } = useCustomerSite()
+
+const { data: siteData, refresh: refreshSiteData } = await useLazyAsyncData(
+  "sites",
+  () => getAllCustomerSite({ org: props.org, limit: 50 })
+)
+
+watchEffect(() => {
+  if (siteData.value) {
+    sites.value = siteData.value.items.map((i: any) => ({
+      title: i.name,
+      value: i.site,
+    }))
+  }
+})
+
+watchEffect(() => {
+  if (hasSite.value) refreshSiteData()
+})
+
+/* ================= ROLE ================= */
+const roles = ref<any[]>([])
+const { getRoles } = useRole()
+
+const { data: roleData, refresh: refreshRoles } = await useLazyAsyncData(
+  "roles",
+  () =>
+    getRoles({
+      org: props.org,
+      type: props.app,
+      limit: 50,
+    }),
+  { watch: [() => props.app] }
+)
+
+watchEffect(() => {
+  if (roleData.value) roles.value = roleData.value.items
+})
+
+/* ================= EVENTS ================= */
+async function handleUpdateApp(value: string[]) {
+  invite.value.role = ""
+  invite.value.site = ""
+  await refreshRoles()
+}
+
+function handleUpdateSite(id: string) {
+  const obj = sites.value.find(x => x.value === id)
+  invite.value.siteName = obj?.title || ""
+}
+
+/* ================= SUBMIT ================= */
+const { inviteUser } = useUser()
+const { requiredRule, emailRule } = useUtils()
+
+const message = ref("")
+const createMore = ref(false)
+const disable = ref(false)
+
+async function submit() {
+  loading.submittingForm = true
+
+  try {
+    const apps = invite.value.app || []
+
+    await Promise.all(
+      apps.map(app =>
+        inviteUser({
+          email: invite.value.email,
+          app,
+          role: invite.value.role,
+          org: invite.value.org,
+          site: invite.value.site,
+          siteName: invite.value.siteName,
+          isMemberInvite: invite.value.isMemberInvite,
+        })
+      )
+    )
+
+    if (createMore.value) {
+      form.value?.reset()
+      invite.value = {
+        email: "",
+        app: [],
+        role: "",
+        org: props.org,
+        site: "",
+        siteName: "",
+        isMemberInvite: false,
+      }
+      emit("success", false)
+    } else {
+      emit("success", true)
+    }
+
+  } catch (e: any) {
+    message.value = e?.response?._data?.message || "Error"
+  } finally {
+    loading.submittingForm = false
+  }
+}
+
+function cancel() {
+  emit("cancel")
+}
+</script>

package/components/Layout/NavigationDrawer.vue

@@ -3,7 +3,7 @@
     <v-list>
       <v-list-item>
         <v-list-item-title class="text-h6 text-white">
-          {{ APP_NAME }}
+          {{ props.title || APP_NAME }}
         </v-list-item-title>
       </v-list-item>
       <slot name="action" />
@@ -36,6 +36,7 @@
 <script setup lang="ts">
 const props = defineProps({
   navigationItems: { type: Array<TNavigationItem>, required: true },
+  title: { type: String, default: "" }
 });
 
 const { drawer } = useLocal();

package/components/RolePermissionFormCreate.vue

@@ -2,45 +2,135 @@
   <v-card width="100%">
     <v-toolbar>
       <v-row no-gutters class="fill-height px-6" align="center">
-        <span class="font-weight-bold text-h5">
-          {{ props.title }}
-        </span>
+        <span class="font-weight-bold text-h5">Create Role</span>
+        <v-spacer />
+        <v-btn icon density="comfortable" @click="cancel">
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
       </v-row>
     </v-toolbar>
-    <v-card-text style="max-height: 100vh; overflow-y: auto">
+
+    <v-card-text style="max-height: 75vh; overflow-y: auto">
       <v-form v-model="validForm" :disabled="disable">
         <v-row no-gutters>
           <v-col cols="12" class="mt-2">
             <v-row no-gutters>
-              <InputLabel class="text-capitalize" title="Name" required />
+              <InputLabel title="Role Name" required />
               <v-col cols="12">
                 <v-text-field
                   v-model="name"
                   density="comfortable"
                   :rules="[requiredRule]"
-                ></v-text-field>
+                />
+              </v-col>
+            </v-row>
+          </v-col>
+
+          <v-col 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-col>
             </v-row>
           </v-col>
 
-          <v-col cols="12">
-            <InputListGroupSelection
-              v-model="selectedPermissions"
-              :items="props.permissions"
-              variant="outlined"
-              border="thin"
-              :error-messages="requireListRule(selectedPermissions)"
-            />
+          <v-col cols="12" class="mt-1">
+            <v-radio-group
+              v-model="platform"
+              inline
+              color="primary"
+              hide-details
+            >
+              <v-radio label="Website" value="web" />
+              <v-radio label="Mobile" value="mobile" />
+            </v-radio-group>
           </v-col>
 
-          <v-col cols="12" class="mt-2">
-            <v-checkbox v-model="createMore" density="comfortable" hide-details>
-              <template #label>
-                <span class="text-subtitle-2 font-weight-bold">
-                  Create more
-                </span>
+          <v-col cols="12" class="mt-3">
+            <v-card variant="outlined" border="thin" rounded="lg">
+              <template
+                v-for="(
+                  actions, resourceKey, resourceIndex
+                ) in props.permissions"
+                :key="resourceKey"
+              >
+                <v-divider v-if="resourceIndex > 0" />
+
+                <!-- Category row -->
+                <v-list-item density="compact" :ripple="false">
+                  <template #prepend>
+                    <v-chip class="mr-3" size="small" label>
+                      {{ selectedActionCount(String(resourceKey)) }}
+                    </v-chip>
+                  </template>
+                  <v-list-item-title>
+                    <span
+                      class="text-capitalize text-subtitle-2 font-weight-medium"
+                    >
+                      {{ String(resourceKey).replace(/-/g, " ") }}
+                    </span>
+                  </v-list-item-title>
+                  <template #append>
+                    <v-switch
+                      :model-value="isCategoryEnabled(String(resourceKey))"
+                      @update:model-value="
+                        toggleCategory(String(resourceKey), $event)
+                      "
+                      color="green"
+                      density="compact"
+                      hide-details
+                      inset
+                    />
+                  </template>
+                </v-list-item>
+
+                <!-- Expanded checkboxes when toggled on -->
+                <template v-if="isCategoryEnabled(String(resourceKey))">
+                  <template
+                    v-for="(action, actionKey) in 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)}`
+                            )
+                          "
+                          @update:model-value="
+                            toggleAction(
+                              String(resourceKey),
+                              String(actionKey),
+                              $event
+                            )
+                          "
+                          color="primary"
+                          density="compact"
+                          class="mr-2"
+                        />
+                      </template>
+                      <v-list-item-title
+                        class="text-subtitle-2 font-weight-medium text-capitalize"
+                      >
+                        {{ String(actionKey).replace(/-/g, " ") }}
+                      </v-list-item-title>
+                      <v-list-item-subtitle class="text-caption">
+                        {{ action.description }}
+                      </v-list-item-subtitle>
+                    </v-list-item>
+                  </template>
+                </template>
               </template>
-            </v-checkbox>
+            </v-card>
           </v-col>
 
           <v-col cols="12" class="my-2">
@@ -58,28 +148,30 @@
       </v-form>
     </v-card-text>
 
-    <v-toolbar>
-      <v-row class="px-6">
-        <v-col cols="6">
+    <v-toolbar class="pa-0" density="compact">
+      <v-row no-gutters>
+        <v-col cols="6" class="pa-0">
           <v-btn
             block
             variant="text"
             class="text-none"
             size="large"
+            height="48"
             @click="cancel"
           >
             Cancel
           </v-btn>
         </v-col>
 
-        <v-col cols="6">
+        <v-col cols="6" class="pa-0">
           <v-btn
             block
             variant="flat"
             color="black"
-            class="text-none"
-            size="large"
+            class="text-none font-weight-bold rounded-0"
+            height="48"
             :disabled="!validForm"
+            :loading="disable"
             @click="submit"
           >
             Submit
@@ -91,14 +183,11 @@
 </template>
 
 <script setup lang="ts">
-import useRole from '../composables/useRole';
-import useUtils from '../composables/useUtils';
+import useRole from "../composables/useRole";
+import useUtils from "../composables/useUtils";
+import useSite from "../composables/useSite";
 
 const props = defineProps({
-  title: {
-    type: String,
-    default: "Role Permission Form",
-  },
   permissions: {
     type: Object,
     default: () => ({}),
@@ -107,6 +196,10 @@ const props = defineProps({
     type: String,
     default: "",
   },
+  siteId: {
+    type: String,
+    default: "",
+  },
   type: {
     type: String,
     default: "app",
@@ -116,36 +209,89 @@ const props = defineProps({
 const emit = defineEmits(["cancel", "success", "success:create-more"]);
 
 const validForm = ref(false);
-
 const name = ref("");
-const selectedPermissions = ref([]);
-const createMore = ref(false);
+const selectedPermissions = ref<Array<string>>([]);
+const platform = ref("web");
 const disable = ref(false);
+const message = ref("");
 
 const { requiredRule, requireListRule } = useUtils();
+const { createRole } = useRole();
+const { getSiteById } = useSite();
 
-const message = ref("");
+const enabledCategories = ref<Set<string>>(new Set());
 
-const { createRole } = useRole();
+function selectedActionCount(resource: string) {
+  return selectedPermissions.value.filter((p) => p.startsWith(`${resource}:`))
+    .length;
+}
+
+function isCategoryEnabled(resource: string) {
+  return enabledCategories.value.has(resource);
+}
+
+function toggleCategory(resource: string, value: boolean | null) {
+  const updated = new Set(enabledCategories.value);
+  if (value) {
+    updated.add(resource);
+  } else {
+    updated.delete(resource);
+
+    selectedPermissions.value = selectedPermissions.value.filter(
+      (p) => !p.startsWith(`${resource}:`)
+    );
+  }
+  enabledCategories.value = updated;
+}
+
+function toggleAction(resource: string, action: string, value: boolean | null) {
+  const key = `${resource}:${action}`;
+  if (value) {
+    if (!selectedPermissions.value.includes(key)) {
+      selectedPermissions.value = [...selectedPermissions.value, key];
+    }
+  } else {
+    selectedPermissions.value = selectedPermissions.value.filter(
+      (p) => p !== key
+    );
+  }
+}
+
+const siteName = ref("");
+const loadSite = ref(false);
+
+watch(
+  () => props.siteId,
+  async (id) => {
+    if (!id) {
+      siteName.value = "";
+      return;
+    }
+    loadSite.value = true;
+    try {
+      const site = await getSiteById(id);
+      siteName.value = site?.name ?? id;
+    } catch {
+      siteName.value = id;
+    } finally {
+      loadSite.value = false;
+    }
+  },
+  { immediate: true }
+);
 
 async function submit() {
   disable.value = true;
   try {
+    const platformValue = platform.value === "web" ? "website" : platform.value;
     await createRole({
       name: name.value,
       permissions: selectedPermissions.value,
       type: props.type,
       org: props.org,
+      site: props.siteId,
+      platform: platformValue,
     });
-
-    if (createMore.value) {
-      name.value = "";
-      selectedPermissions.value = [];
-      message.value = "";
-      emit("success:create-more");
-      return;
-    }
-
     emit("success");
   } catch (error: any) {
     message.value = error.response._data.message;
@@ -157,7 +303,8 @@ async function submit() {
 function cancel() {
   name.value = "";
   selectedPermissions.value = [];
-  createMore.value = false;
+  enabledCategories.value = new Set();
+  platform.value = "web";
   message.value = "";
   emit("cancel");
 }

package/components/RolePermissionMain.vue

@@ -83,6 +83,7 @@
         @cancel="createDialog = false"
         :permissions="props.permissions"
         :org="props.orgId"
+        :site-id="props.siteId"
         @success="success()"
         :type="props.type"
         @success:create-more="getRoles()"

package/components/ServiceProviderMain.vue

@@ -327,7 +327,8 @@
 </template>
 
 <script lang="ts" setup>
-import useServiceProvider from '../composables/useServiceProvider';
+import useServiceProvider from "../composables/useServiceProvider";
+import { errorConverter } from "../utils/data";
 
 const props = defineProps({
   orgId: {
@@ -420,7 +421,7 @@ const serviceProvider = ref({
 const {
   getAll: getAllServiceProvider,
   add: addServiceProvider,
-  createServiceProviderInvite
+  createServiceProviderInvite,
 } = useServiceProvider();
 
 const { getSiteById } = useSite();
@@ -440,6 +441,7 @@ const {
   status: getAllReqStatus,
 } = await useLazyAsyncData("get-all-service-providers", () =>
   getAllServiceProvider({
+    page: page.value,
     siteId: props.siteId,
     search: searchText.value || "",
   })
@@ -522,13 +524,18 @@ async function submitServiceProviderAdd() {
   try {
     console.log("serviceProvider.value");
     console.log(serviceProvider.value);
-    await addServiceProvider(serviceProvider.value);
+    const result = await addServiceProvider(serviceProvider.value);
     await setServiceProvider({ mode: "add", dialog: false });
     await _getAllServiceProvider();
+
+    if (result?.id) {
+      showMessage(result?.message, "success");
+    }
   } catch (error: any) {
     messageServiceProvider.value =
       error?.response?._data?.message ??
       "An error occurred while adding the service provider.";
+    showMessage(errorConverter(error), "error");
   } finally {
     disableServiceProvider.value = false;
   }
@@ -539,14 +546,13 @@ async function submitServiceProviderInvite() {
   messageServiceProvider.value = "";
   try {
     const payload = {
-  email: serviceProvider.value.email?.trim(),
-  orgId: props.orgId,
-  siteId: props.siteId,
-  siteName: site.value?.name || props.siteName,
-};
-
+      email: serviceProvider.value.email?.trim(),
+      orgId: props.orgId,
+      siteId: props.siteId,
+      siteName: site.value?.name || props.siteName,
+    };
 
-await createServiceProviderInvite(payload);
+    await createServiceProviderInvite(payload);
     if (createMoreServiceProvider.value) {
       serviceProvider.value.email = "";
     } else {

package/components/VisitorForm.vue

@@ -951,9 +951,16 @@ async function submit() {
           });
 
           if (passType.value === "QR") {
+            console.log("[QR Print] passRes:", passRes);
             const accessCards: any[] = (passRes as any)?.accessCards ?? [];
+            console.log("[QR Print] accessCards:", accessCards);
             const printer = entryPassSettings.value?.data?.settings?.printer;
-            if (printer?.vendorId && printer?.productId && accessCards.length) {
+            console.log("[QR Print] printer config:", printer);
+            if (!printer?.vendorId || !printer?.productId) {
+              console.warn("[QR Print] Aborted: no printer configured.");
+            } else if (!accessCards.length) {
+              console.warn("[QR Print] Aborted: accessCards is empty.");
+            } else {
               const vendorId = parseInt(printer.vendorId);
               const productId = parseInt(printer.productId);
               const companyName = visitor.company || "";
@@ -961,13 +968,20 @@ async function submit() {
               const levelLabel = levelsArray.value.find((l: any) => l.value === visitor.level)?.title || "";
               const unitLabel = unitsArray.value.find((u: any) => u.value === visitor.unit)?.title || "";
               const address = [blockLabel, levelLabel, unitLabel].filter(Boolean).join("/");
+              console.log("[QR Print] Printing", accessCards.length, "card(s). vendorId:", vendorId, "productId:", productId, "address:", address);
 
               await nextTick();
               for (const qrCode of accessCards) {
+                console.log("[QR Print] Signing QR for card:", qrCode._id);
                 const signed = await signQr({ cardId: qrCode._id, purpose: "vms" });
                 const qrData = signed?.data;
-                if (!qrData) continue;
-                await testConnection(
+                console.log("[QR Print] signQr result:", signed, "| qrData:", qrData);
+                if (!qrData) {
+                  console.warn("[QR Print] Skipping card", qrCode._id, "— signQr returned no data.");
+                  continue;
+                }
+                console.log("[QR Print] Sending to printer — accessLevel:", qrCode.accessLevel, "liftLevel:", qrCode.liftAccessLevel);
+                const printResult = await testConnection(
                   vendorId,
                   productId,
                   true,
@@ -977,6 +991,7 @@ async function submit() {
                   companyName,
                   address,
                 );
+                console.log("[QR Print] Print result for card", qrCode._id, ":", printResult);
               }
             }
           }

package/composables/useRole.ts

@@ -2,16 +2,18 @@ import useMember from "./useMember";
 
 export default function useRole() {
   function createRole(
-    { name, permissions, type, org } = {} as {
+    { name, permissions, type, org, site, platform } = {} as {
       name: string;
       permissions: Array<string>;
       type: string;
       org?: string;
+      site?: string;
+      platform?: string;
     }
   ) {
     return useNuxtApp().$api("/api/roles", {
       method: "POST",
-      body: { name, permissions, type, org },
+      body: { name, permissions, type, org, site, platform },
     });
   }
 

package/composables/useWebUsb.ts

@@ -99,17 +99,21 @@ export default function useWebUsb() {
     }
     try {
       let devices = await navigator.usb.getDevices();
+      console.log("[WebUSB] Available devices:", devices.map((d: USBDevice) => `${d.vendorId}:${d.productId}`));
       let device = devices.find(
         (d: USBDevice) => d.vendorId === vendorId && d.productId === productId,
       );
       if (!device) {
+        console.log("[WebUSB] Device not in granted list, requesting permission for", vendorId, productId);
         device = await navigator.usb.requestDevice({
           filters: [{ vendorId, productId }],
         });
       }
+      console.log("[WebUSB] Opening device:", device.vendorId, device.productId);
       await device.open();
       await device.selectConfiguration(1);
       await device.claimInterface(0);
+      console.log("[WebUSB] Device opened and interface claimed.");
       return device;
     } catch (error) {
       console.error("Error connecting to USB device:", error);
@@ -349,12 +353,14 @@ export default function useWebUsb() {
     qrSubText?: string,
   ) => {
     try {
+      console.log("[WebUSB] printQrCode start — doorLevel:", doorLevel, "liftLevel:", liftLevel, "company:", companyName, "address:", address);
       const usbInterface = device.configuration.interfaces[0];
       const alternate = usbInterface.alternates[0];
       const outputEndpoint = alternate.endpoints.find(
         (ep: any) => ep.direction === "out",
       );
       if (!outputEndpoint) throw new Error("No output endpoint found");
+      console.log("[WebUSB] Using endpoint:", outputEndpoint.endpointNumber);
 
       const canvas = await createReceiptLayout(
         urlImage,
@@ -365,16 +371,20 @@ export default function useWebUsb() {
         qrHeader,
         qrSubText,
       );
+      console.log("[WebUSB] Canvas created:", canvas.width, "x", canvas.height);
       const rasterData = canvasToRaster(canvas);
+      console.log("[WebUSB] Raster data size:", rasterData.byteLength, "bytes");
 
       await device.transferOut(outputEndpoint.endpointNumber, rasterData.buffer);
+      console.log("[WebUSB] Raster data sent.");
 
       const CUT = new Uint8Array([0x1d, 0x56, 0x41, 0x10]);
       await device.transferOut(outputEndpoint.endpointNumber, CUT.buffer);
+      console.log("[WebUSB] Cut command sent.");
 
       return { success: true, message: "QR print sent successfully" };
     } catch (error: any) {
-      console.error("Print QR code error:", error);
+      console.error("[WebUSB] printQrCode error:", error);
       return { success: false, error: error.message };
     }
   };

package/package.json

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