@7365admin1/layer-common 1.11.32 → 1.11.33

package/CHANGELOG.md

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

package/components/ClientMain.vue

@@ -0,0 +1,228 @@
+<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">
+      <InvitationForm title="Invite Client" app="organization" @success="handleSuccess" @cancel="dialog = false" />
+    </v-dialog>
+
+  </v-row>
+</template>
+<script setup lang="ts">
+import useOrg from '@7365admin1/layer-common/composables/useOrg'
+import useRole from '@7365admin1/layer-common/composables/useRole'
+import useVerification from '@7365admin1/layer-common/composables/useVerification'
+import { computed, onMounted, ref, watch } from '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/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/package.json

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