@vc-shell/vc-app-skill 2.0.0-alpha.33 → 2.0.0-alpha.34

package/runtime/knowledge/docs/ui/composables/useTableSort.docs.md

@@ -14,11 +14,11 @@ The sort expression is formatted as `"property:DIRECTION"` (e.g., `"createdDate:
 ## Basic Usage
 
 ```typescript
-import { useTableSort } from '@vc-shell/framework';
+import { useTableSort } from "@vc-shell/framework";
 
 const { sortExpression, handleSortChange, resetSort } = useTableSort({
-  initialProperty: 'createdDate',
-  initialDirection: 'DESC',
+  initialProperty: "createdDate",
+  initialDirection: "DESC",
 });
 
 // Wire to VcTable
@@ -34,19 +34,19 @@ watch(sortExpression, (sort) => {
 
 ### Parameters (Options)
 
-| Option | Type | Default | Description |
-|---|---|---|---|
-| `initialProperty` | `string` | `null` | Column property to sort by initially |
-| `initialDirection` | `"ASC" \| "DESC"` | `null` | Initial sort direction |
+| Option             | Type              | Default | Description                          |
+| ------------------ | ----------------- | ------- | ------------------------------------ |
+| `initialProperty`  | `string`          | `null`  | Column property to sort by initially |
+| `initialDirection` | `"ASC" \| "DESC"` | `null`  | Initial sort direction               |
 
 ### Returns
 
-| Property | Type | Description |
-|---|---|---|
-| `currentSort` | `WritableComputedRef<TableSortState>` | Current `{ property, direction }` state |
-| `sortExpression` | `Ref<string \| undefined>` | Formatted string (e.g., `"name:ASC"`) or `undefined` when no sort |
-| `handleSortChange` | `(sortParam: string) => void` | Handle column header click; accepts `"field"` or `"field:DIR"` |
-| `resetSort` | `() => void` | Reset to initial sort options (or clear if none) |
+| Property           | Type                                  | Description                                                       |
+| ------------------ | ------------------------------------- | ----------------------------------------------------------------- |
+| `currentSort`      | `WritableComputedRef<TableSortState>` | Current `{ property, direction }` state                           |
+| `sortExpression`   | `Ref<string \| undefined>`            | Formatted string (e.g., `"name:ASC"`) or `undefined` when no sort |
+| `handleSortChange` | `(sortParam: string) => void`         | Handle column header click; accepts `"field"` or `"field:DIR"`    |
+| `resetSort`        | `() => void`                          | Reset to initial sort options (or clear if none)                  |
 
 ### TableSortState
 
@@ -60,6 +60,7 @@ interface TableSortState {
 ## Sort Cycling
 
 When clicking the same column without an explicit direction:
+
 1. First click: `ASC`
 2. Second click: `DESC`
 3. Third click: sort cleared (`undefined`)
@@ -87,7 +88,7 @@ async function loadItems() {
   loading.value = true;
   try {
     const response = await api.searchProducts({
-      sort: sortExpression.value,  // "createdDate:DESC"
+      sort: sortExpression.value, // "createdDate:DESC"
       skip: 0,
       take: 20,
     });
@@ -108,9 +109,21 @@ watch(sortExpression, () => loadItems(), { immediate: true });
     :sort-expression="sortExpression"
     @header-click="handleSortChange"
   >
-    <VcColumn id="name" header="Name" sortable />
-    <VcColumn id="createdDate" header="Created" sortable />
-    <VcColumn id="price" header="Price" sortable />
+    <VcColumn
+      id="name"
+      header="Name"
+      sortable
+    />
+    <VcColumn
+      id="createdDate"
+      header="Created"
+      sortable
+    />
+    <VcColumn
+      id="price"
+      header="Price"
+      sortable
+    />
   </VcTable>
 </template>
 ```

package/runtime/knowledge/docs/ui/types/ui-types.docs.md

@@ -21,41 +21,41 @@ When building custom form field components, extending these interfaces ensures c
 
 Base props shared by all form field components (VcCheckbox, VcSwitch, VcRadioButton, VcInput, VcTextarea, VcSelect, VcDatePicker, VcEditor, VcFileUpload, VcColorInput, etc.).
 
-| Prop | Type | Description |
-|------|------|-------------|
-| `label` | `string?` | Field label text |
-| `tooltip` | `string?` | Tooltip shown on label hover |
-| `disabled` | `boolean?` | Whether the field is disabled |
-| `required` | `boolean?` | Whether the field is required |
-| `name` | `string?` | Form field name attribute |
-| `error` | `boolean?` | External error flag |
-| `errorMessage` | `string?` | Error message text (also sets error state when truthy) |
+| Prop           | Type       | Description                                            |
+| -------------- | ---------- | ------------------------------------------------------ |
+| `label`        | `string?`  | Field label text                                       |
+| `tooltip`      | `string?`  | Tooltip shown on label hover                           |
+| `disabled`     | `boolean?` | Whether the field is disabled                          |
+| `required`     | `boolean?` | Whether the field is required                          |
+| `name`         | `string?`  | Form field name attribute                              |
+| `error`        | `boolean?` | External error flag                                    |
+| `errorMessage` | `string?`  | Error message text (also sets error state when truthy) |
 
 ### `ITextFieldProps`
 
 Extended props for text-input-like components (VcInput, VcTextarea, VcSelect, VcDatePicker, VcColorInput). Extends `IFormFieldProps`.
 
-| Prop | Type | Description |
-|------|------|-------------|
-| `placeholder` | `string?` | Placeholder text |
-| `hint` | `string?` | Hint text shown below the field |
-| `clearable` | `boolean?` | Show clear button |
-| `loading` | `boolean?` | Show loading indicator |
-| `autofocus` | `boolean?` | Auto-focus on mount |
-| `size` | `"default" \| "small"?` | Field size variant |
-| `multilanguage` | `boolean?` | Whether multilanguage mode is active |
-| `currentLanguage` | `string?` | Current language code for multilanguage mode |
+| Prop              | Type                    | Description                                  |
+| ----------------- | ----------------------- | -------------------------------------------- |
+| `placeholder`     | `string?`               | Placeholder text                             |
+| `hint`            | `string?`               | Hint text shown below the field              |
+| `clearable`       | `boolean?`              | Show clear button                            |
+| `loading`         | `boolean?`              | Show loading indicator                       |
+| `autofocus`       | `boolean?`              | Auto-focus on mount                          |
+| `size`            | `"default" \| "small"?` | Field size variant                           |
+| `multilanguage`   | `boolean?`              | Whether multilanguage mode is active         |
+| `currentLanguage` | `string?`               | Current language code for multilanguage mode |
 
 ### `Breadcrumbs`
 
 Breadcrumb navigation item used by blade headers.
 
-| Prop | Type | Description |
-|------|------|-------------|
-| `id` | `string` | Unique breadcrumb identifier |
-| `title` | `MaybeRef<string \| undefined>` | Display text (can be reactive) |
-| `icon` | `string?` | Icon identifier |
-| `clickHandler` | `(id: string) => void \| boolean \| Promise<void \| boolean>?` | Navigation handler |
+| Prop           | Type                                                           | Description                    |
+| -------------- | -------------------------------------------------------------- | ------------------------------ |
+| `id`           | `string`                                                       | Unique breadcrumb identifier   |
+| `title`        | `MaybeRef<string \| undefined>`                                | Display text (can be reactive) |
+| `icon`         | `string?`                                                      | Icon identifier                |
+| `clickHandler` | `(id: string) => void \| boolean \| Promise<void \| boolean>?` | Navigation handler             |
 
 ## Usage Examples
 
@@ -94,8 +94,15 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <div class="my-toggle" :class="{ 'my-toggle--error': error || !!errorMessage }">
-    <VcLabel v-if="label" :tooltip="tooltip" :required="required">
+  <div
+    class="my-toggle"
+    :class="{ 'my-toggle--error': error || !!errorMessage }"
+  >
+    <VcLabel
+      v-if="label"
+      :tooltip="tooltip"
+      :required="required"
+    >
       {{ label }}
     </VcLabel>
     <button
@@ -104,9 +111,13 @@ const emit = defineEmits<{
       role="switch"
       @click="emit('update:modelValue', !modelValue)"
     >
-      {{ modelValue ? (onLabel ?? 'On') : (offLabel ?? 'Off') }}
+      {{ modelValue ? (onLabel ?? "On") : (offLabel ?? "Off") }}
     </button>
-    <span v-if="errorMessage" class="my-toggle__error">{{ errorMessage }}</span>
+    <span
+      v-if="errorMessage"
+      class="my-toggle__error"
+      >{{ errorMessage }}</span
+    >
   </div>
 </template>
 ```

package/runtime/knowledge/examples/offers-module.md

@@ -1,6 +1,7 @@
 # Example: Offers Module (Notifications + Dashboard Widget)
 
 This example covers patterns NOT shown in team-module.md:
+
 - `registerDashboardWidget` — registering a dashboard widget from module index
 - `notifications` registration in `defineAppModule` — mapping event names to Vue templates
 - `useNotificationContext` — accessing notification data inside a notification template
@@ -40,11 +41,11 @@ export default defineAppModule({
   notifications: {
     OfferCreatedDomainEvent: {
       template: OfferCreatedDomainEvent,
-      toast: { mode: "auto" },            // auto-dismiss toast
+      toast: { mode: "auto" }, // auto-dismiss toast
     },
     OfferDeletedDomainEvent: {
       template: OfferDeletedDomainEvent,
-      toast: { mode: "auto", severity: "warning" },  // warning severity
+      toast: { mode: "auto", severity: "warning" }, // warning severity
     },
   },
 });
@@ -73,7 +74,8 @@ export * from "./composables";
     <VcHint
       v-if="notification.description"
       class="tw-mb-1"
-    >{{ notification.description }}</VcHint>
+      >{{ notification.description }}</VcHint
+    >
   </NotificationTemplate>
 </template>
 
@@ -98,17 +100,17 @@ const notificationStyle = {
 
 ## Notes on notification severity values
 
-| severity | use case |
-|---|---|
+| severity    | use case                            |
+| ----------- | ----------------------------------- |
 | `"success"` | Positive completion (default green) |
-| `"warning"` | Non-critical issue (yellow) |
-| `"error"` | Failure (red) |
-| (omitted) | Informational (blue/neutral) |
+| `"warning"` | Non-critical issue (yellow)         |
+| `"error"`   | Failure (red)                       |
+| (omitted)   | Informational (blue/neutral)        |
 
 ## Notes on toast mode values
 
-| mode | behavior |
-|---|---|
-| `"auto"` | Dismisses automatically after timeout |
-| `"manual"` | User must click to dismiss |
-| `"none"` | No toast shown; notification only in notification center |
+| mode       | behavior                                                 |
+| ---------- | -------------------------------------------------------- |
+| `"auto"`   | Dismisses automatically after timeout                    |
+| `"manual"` | User must click to dismiss                               |
+| `"none"`   | No toast shown; notification only in notification center |

package/runtime/knowledge/examples/team-module.md

@@ -1,6 +1,6 @@
 # Example: Team Module (Full List + Details Pattern)
 
-This is a complete, real-world module from `apps/vendor-portal` showing the canonical
+This is a complete worked example showing the canonical
 list-blade + details-blade pattern with `defineBlade`, `useDataTableSort`, `useModificationTracker`,
 `Field` validation, `callParent`, `exposeToChildren`, and `onBeforeClose`.
 
@@ -9,6 +9,7 @@ list-blade + details-blade pattern with `defineBlade`, `useDataTableSort`, `useM
 ## `index.ts` — Module entry point
 
 <!-- PATTERN: defineAppModule — minimal entry point wiring blades + locales -->
+
 ```typescript
 import * as pages from "./pages";
 import * as locales from "./locales";
@@ -25,6 +26,7 @@ export * from "./composables";
 ## `pages/index.ts` — Re-export all page blades
 
 <!-- PATTERN: barrel export for pages used by defineAppModule -->
+
 ```typescript
 export { default as TeamList } from "./team-list.vue";
 export { default as TeamMemberDetails } from "./team-member-details.vue";
@@ -35,6 +37,7 @@ export { default as TeamMemberDetails } from "./team-member-details.vue";
 ## `composables/index.ts`
 
 <!-- PATTERN: barrel export for composables -->
+
 ```typescript
 export { default as useTeamMembers } from "./useTeamMembers";
 export { default as useTeamMember } from "./useTeamMember";
@@ -45,6 +48,7 @@ export { default as useTeamMember } from "./useTeamMember";
 ## `locales/index.ts`
 
 <!-- PATTERN: locale barrel — import JSON and re-export by language key -->
+
 ```typescript
 import en from "./en.json";
 export { en };
@@ -144,7 +148,7 @@ export { en };
       >
         <template #body="{ data }">
           <VcStatus :variant="data.isLockedOut ? 'danger' : 'success'">
-            {{ data.isLockedOut ? t('TEAM.PAGES.LIST.TABLE.STATUS.LOCKED') : t('TEAM.PAGES.LIST.TABLE.STATUS.ACTIVE') }}
+            {{ data.isLockedOut ? t("TEAM.PAGES.LIST.TABLE.STATUS.LOCKED") : t("TEAM.PAGES.LIST.TABLE.STATUS.ACTIVE") }}
           </VcStatus>
         </template>
       </VcColumn>
@@ -168,7 +172,7 @@ defineBlade({
   name: "Team",
   url: "/team",
   isWorkspace: true,
-  permissions: [UserPermissions.SellerUsersManage],
+  permissions: [UserPermissions.UsersManage],
   menuItem: {
     title: "TEAM.MENU.TITLE",
     icon: "lucide-users",
@@ -463,7 +467,7 @@ exposeToChildren({ reload });
 import { computed, ref, onMounted, unref, WritableComputedRef } from "vue";
 import { useUser, IBladeToolbar, usePopup, useAssets, useBlade, ICommonAsset } from "@vc-shell/framework";
 import { Field, useForm } from "vee-validate";
-import type { Image, SellerUser as ISellerUser } from "../../../api_client/virtocommerce.marketplacevendor";
+import type { Image, User as IUser } from "../../../api_client/virtocommerce.mymodule";
 import { useI18n } from "vue-i18n";
 import { useTeamMember } from "../composables";
 import { roles } from "../common";
@@ -479,14 +483,14 @@ defineBlade({
 const { user } = useUser();
 const { upload: uploadImage, remove: removeImage, loading: imageLoading } = useAssets();
 // PATTERN: typed options generic on useBlade<OptionsType>
-const { onBeforeClose, param, options, callParent, closeSelf } = useBlade<{ user: ISellerUser }>();
+const { onBeforeClose, param, options, callParent, closeSelf } = useBlade<{ user: IUser }>();
 const { t } = useI18n({ useScope: "global" });
 const {
   userDetails,
   loading,
-  modified,      // from useModificationTracker — true when data differs from pristine
+  modified, // from useModificationTracker — true when data differs from pristine
   createTeamMember,
-  resetEntries,  // resets to pristineValue
+  resetEntries, // resets to pristineValue
   deleteTeamMember,
   updateTeamMember,
   sendTeamMemberInvitation,
@@ -500,9 +504,7 @@ const isOwnerReadonly = computed(() => userDetails.value?.role === "vcmp-owner-r
 const isCurrentUser = computed(() => userDetails.value?.userName === user.value?.userName);
 const isOwnerReadonlyComputed = computed(() => isOwnerReadonly.value && !isCurrentUser.value);
 
-const title = computed(() =>
-  param.value ? userDetails.value.firstName + " " + userDetails.value.lastName : t("TEAM.PAGES.DETAILS.TITLE"),
-);
+const title = computed(() => (param.value ? userDetails.value.firstName + " " + userDetails.value.lastName : t("TEAM.PAGES.DETAILS.TITLE")));
 
 const sendInviteStatus = ref(false);
 
@@ -519,7 +521,7 @@ const bladeToolbar = ref<IBladeToolbar[]>([
     async clickHandler() {
       try {
         await createTeamMember(userDetails.value, sendInviteStatus.value);
-        callParent("reload");  // PATTERN: call parent's exposed reload function
+        callParent("reload"); // PATTERN: call parent's exposed reload function
         closeSelf();
       } catch (e) {
         if (e === "EMAIL_ALREADY_EXISTS") {
@@ -529,7 +531,7 @@ const bladeToolbar = ref<IBladeToolbar[]>([
         }
       }
     },
-    isVisible: !param.value,   // PATTERN: isVisible for create-only button
+    isVisible: !param.value, // PATTERN: isVisible for create-only button
     disabled: computed(() => !(!isDisabled.value && modified.value)),
   },
   {
@@ -547,7 +549,7 @@ const bladeToolbar = ref<IBladeToolbar[]>([
         }
       }
     },
-    isVisible: !!param.value,  // PATTERN: isVisible for edit-only button
+    isVisible: !!param.value, // PATTERN: isVisible for edit-only button
     disabled: computed(() => !(!isDisabled.value && modified.value)),
   },
   {
@@ -555,7 +557,7 @@ const bladeToolbar = ref<IBladeToolbar[]>([
     title: computed(() => t("TEAM.PAGES.DETAILS.TOOLBAR.RESET")),
     icon: "lucide-undo-2",
     clickHandler() {
-      resetEntries();  // PATTERN: reset to pristine value
+      resetEntries(); // PATTERN: reset to pristine value
     },
     isVisible: !!param.value,
     disabled: computed(() => !!param.value && !modified.value),
@@ -601,9 +603,7 @@ const isActive = computed({
 const assetsHandler = {
   loading: imageLoading,
   async upload(files: FileList) {
-    photoHandler.value = (await uploadImage(files, `vendors/${userDetails.value?.sellerId}/users`)).map(
-      (x) => ({ ...x } as Image),
-    );
+    photoHandler.value = (await uploadImage(files, `entities/${userDetails.value?.ownerId}/users`)).map((x) => ({ ...x }) as Image);
   },
   remove: (file: Image) => {
     photoHandler.value = removeImage([file as unknown as ICommonAsset], photoHandler.value);
@@ -656,44 +656,37 @@ onBeforeClose(async () => {
 
 ```typescript
 import { useApiClient, useAsync, useLoading } from "@vc-shell/framework";
-import {
-  SearchSellerUsersQuery,
-  SearchSellerUsersResult,
-  SellerUser,
-  VcmpSellerSecurityClient,
-} from "../../../../api_client/virtocommerce.marketplacevendor";
-import type { SearchSellerUsersQuery as ISearchSellerUsersQuery } from "../../../../api_client/virtocommerce.marketplacevendor";
+import { SearchUsersQuery, SearchUsersResult, User, UserSecurityClient } from "../../../../api_client/virtocommerce.mymodule";
+import type { SearchUsersQuery as ISearchUsersQuery } from "../../../../api_client/virtocommerce.mymodule";
 import { computed, Ref, ref } from "vue";
 import { useRoute } from "vue-router";
 
 interface IUseTeamMembers {
   readonly loading: Ref<boolean>;
-  readonly membersList: Ref<SellerUser[]>;
+  readonly membersList: Ref<User[]>;
   readonly totalCount: Ref<number>;
   readonly pages: Ref<number>;
   currentPage: Ref<number>;
-  searchQuery: Ref<ISearchSellerUsersQuery>;
-  getTeamMembers: (query?: ISearchSellerUsersQuery) => Promise<void>;
+  searchQuery: Ref<ISearchUsersQuery>;
+  getTeamMembers: (query?: ISearchUsersQuery) => Promise<void>;
 }
 
 export default (options?: { pageSize?: number; sort?: string }): IUseTeamMembers => {
-  const { getApiClient } = useApiClient(VcmpSellerSecurityClient);
+  const { getApiClient } = useApiClient(UserSecurityClient);
   const route = useRoute();
 
   const loading = ref(false);
   const pageSize = options?.pageSize || 20;
-  const searchQuery = ref<ISearchSellerUsersQuery>({ take: pageSize, sort: options?.sort });
-  const searchResult = ref<SearchSellerUsersResult>();
+  const searchQuery = ref<ISearchUsersQuery>({ take: pageSize, sort: options?.sort });
+  const searchResult = ref<SearchUsersResult>();
 
   // PATTERN: useAsync<InputType> — wraps API call, returns { action, loading }
-  const { action: getTeamMembers, loading: getTeamMembersLoading } = useAsync<ISearchSellerUsersQuery>(
-    async (query) => {
-      const client = await getApiClient();
-      const sellerId = route?.params?.sellerId as string;
-      searchQuery.value = { ...searchQuery.value, ...query };
-      searchResult.value = await client.searchSellerUsers({ ...searchQuery.value, sellerId } as SearchSellerUsersQuery);
-    },
-  );
+  const { action: getTeamMembers, loading: getTeamMembersLoading } = useAsync<ISearchUsersQuery>(async (query) => {
+    const client = await getApiClient();
+    const ownerId = route?.params?.ownerId as string;
+    searchQuery.value = { ...searchQuery.value, ...query };
+    searchResult.value = await client.searchUsers({ ...searchQuery.value, ownerId } as SearchUsersQuery);
+  });
 
   return {
     loading: useLoading(getTeamMembersLoading),
@@ -718,40 +711,30 @@ export default (options?: { pageSize?: number; sort?: string }): IUseTeamMembers
 
 ```typescript
 import { useModificationTracker, useApiClient, useAsync, useLoading } from "@vc-shell/framework";
-import {
-  SellerUserDetails,
-  CreateSellerUserCommand,
-  UpdateSellerUserCommand,
-  SendSellerUserInvitationCommand,
-  ValidationFailure,
-  ValidateSellerUserQuery,
-  VcmpSellerSecurityClient,
-  SearchSellerUsersQuery,
-  SellerUser,
-} from "../../../../api_client/virtocommerce.marketplacevendor";
-import type { SellerUserDetails as ISellerUserDetails, SellerUser as ISellerUser } from "../../../../api_client/virtocommerce.marketplacevendor";
+import { UserDetails, CreateUserCommand, UpdateUserCommand, SendUserInvitationCommand, ValidationFailure, ValidateUserQuery, UserSecurityClient, SearchUsersQuery, User } from "../../../../api_client/virtocommerce.mymodule";
+import type { UserDetails as IUserDetails, User as IUser } from "../../../../api_client/virtocommerce.mymodule";
 import { computed, ComputedRef, Ref, ref } from "vue";
 import { useRoute } from "vue-router";
 
 interface IUseTeamMember {
   loading: ComputedRef<boolean>;
-  userDetails: Ref<SellerUser>;
+  userDetails: Ref<User>;
   modified: ComputedRef<boolean>;
-  createTeamMember: (details: ISellerUser, inviteStatus: boolean) => Promise<void>;
-  updateTeamMember: (details: ISellerUser) => Promise<void>;
+  createTeamMember: (details: IUser, inviteStatus: boolean) => Promise<void>;
+  updateTeamMember: (details: IUser) => Promise<void>;
   sendTeamMemberInvitation: (args: { id: string }) => Promise<void>;
   deleteTeamMember: (args: { id: string }) => Promise<void>;
-  validateTeamMember: (details: SellerUserDetails) => Promise<ValidationFailure[]>;
+  validateTeamMember: (details: UserDetails) => Promise<ValidationFailure[]>;
   resetEntries: () => void;
   getTeamMember: (args: { id: string }) => Promise<void>;
   resetModificationState: () => void;
 }
 
 export default (): IUseTeamMember => {
-  const { getApiClient } = useApiClient(VcmpSellerSecurityClient);
+  const { getApiClient } = useApiClient(UserSecurityClient);
   const route = useRoute();
 
-  const userDetails = ref({} as SellerUser) as Ref<SellerUser>;
+  const userDetails = ref({} as User) as Ref<User>;
 
   // PATTERN: useModificationTracker — currentValue is reactive proxy of userDetails
   // isModified is true when currentValue differs from pristineValue (deep compare)
@@ -759,12 +742,10 @@ export default (): IUseTeamMember => {
 
   const { action: getTeamMember, loading: getTeamMemberLoading } = useAsync<{ id: string }>(async (args) => {
     const client = await getApiClient();
-    const sellerId = route?.params?.sellerId as string;
+    const ownerId = route?.params?.ownerId as string;
     if (!args?.id) throw new Error("Id is required");
 
-    const result = await client
-      .searchSellerUsers({ sellerId, objectIds: [args.id] } as SearchSellerUsersQuery)
-      .then((res) => res.results?.find((x) => x.id === args.id));
+    const result = await client.searchUsers({ ownerId, objectIds: [args.id] } as SearchUsersQuery).then((res) => res.results?.find((x) => x.id === args.id));
 
     if (result) {
       currentValue.value = result;
@@ -772,65 +753,54 @@ export default (): IUseTeamMember => {
     resetModificationState();
   });
 
-  const { action: createTeamMember, loading: createTeamMemberLoading } = useAsync<ISellerUser>(
-    async (details, inviteStatus) => {
-      const client = await getApiClient();
-      const sellerId = route?.params?.sellerId as string;
-
-      const command = {
-        userDetails: { ...details } as SellerUserDetails,
-        sendInvitation: inviteStatus,
-        sellerId,
-      } as CreateSellerUserCommand;
-
-      // PATTERN: validate before create, throw string error code for blade to handle
-      const validationResult = await validateTeamMember(command.userDetails);
-      if (validationResult.length && validationResult[0].errorCode === "EMAIL_ALREADY_EXISTS") {
-        throw validationResult[0].errorCode;
-      }
+  const { action: createTeamMember, loading: createTeamMemberLoading } = useAsync<IUser>(async (details, inviteStatus) => {
+    const client = await getApiClient();
+    const ownerId = route?.params?.ownerId as string;
+
+    const command = {
+      userDetails: { ...details } as UserDetails,
+      sendInvitation: inviteStatus,
+      ownerId,
+    } as CreateUserCommand;
+
+    // PATTERN: validate before create, throw string error code for blade to handle
+    const validationResult = await validateTeamMember(command.userDetails);
+    if (validationResult.length && validationResult[0].errorCode === "EMAIL_ALREADY_EXISTS") {
+      throw validationResult[0].errorCode;
+    }
 
-      await client.createSellerUser(command);
-      resetModificationState();
-    },
-  );
+    await client.createUser(command);
+    resetModificationState();
+  });
 
-  const { action: updateTeamMember, loading: updateTeamMemberLoading } = useAsync<ISellerUser, void>(
-    async (details) => {
-      const client = await getApiClient();
-      if (!details?.id || !details?.sellerId) throw new Error("Id and sellerId are required");
+  const { action: updateTeamMember, loading: updateTeamMemberLoading } = useAsync<IUser, void>(async (details) => {
+    const client = await getApiClient();
+    if (!details?.id || !details?.ownerId) throw new Error("Id and ownerId are required");
 
-      await client.updateSellerUser({
-        sellerId: details.sellerId,
-        sellerUserId: details.id,
-        userDetails: { ...details } as SellerUserDetails,
-      } as UpdateSellerUserCommand);
+    await client.updateUser({
+      ownerId: details.ownerId,
+      userId: details.id,
+      userDetails: { ...details } as UserDetails,
+    } as UpdateUserCommand);
 
-      resetModificationState();
-    },
-  );
+    resetModificationState();
+  });
 
-  const { action: sendTeamMemberInvitation, loading: sendTeamMemberInvitationLoading } = useAsync<{ id: string }, void>(
-    async (args) => {
-      if (!args?.id) throw new Error("Id is required");
-      const client = await getApiClient();
-      await client.sendUserInvitation({ sellerUserId: args?.id } as SendSellerUserInvitationCommand);
-    },
-  );
+  const { action: sendTeamMemberInvitation, loading: sendTeamMemberInvitationLoading } = useAsync<{ id: string }, void>(async (args) => {
+    if (!args?.id) throw new Error("Id is required");
+    const client = await getApiClient();
+    await client.sendUserInvitation({ userId: args?.id } as SendUserInvitationCommand);
+  });
 
-  const { action: deleteTeamMember, loading: deleteTeamMemberLoading } = useAsync<{ id: string }, void>(
-    async (args) => {
-      if (!args?.id) throw new Error("Id is required");
-      const client = await getApiClient();
-      return await client.deleteSellerUsers([args.id]);
-    },
-  );
+  const { action: deleteTeamMember, loading: deleteTeamMemberLoading } = useAsync<{ id: string }, void>(async (args) => {
+    if (!args?.id) throw new Error("Id is required");
+    const client = await getApiClient();
+    return await client.deleteUsers([args.id]);
+  });
 
-  const { action: validateTeamMember, loading: validateTeamMemberLoading } = useAsync<
-    SellerUserDetails,
-    ValidationFailure[]
-  >(async (details) => {
+  const { action: validateTeamMember, loading: validateTeamMemberLoading } = useAsync<UserDetails, ValidationFailure[]>(async (details) => {
     const client = await getApiClient();
-    return await client.validateUser({ sellerUser: details } as ValidateSellerUserQuery);
+    return await client.validateUser({ user: details } as ValidateUserQuery);
   });
 
   async function resetEntries() {
@@ -840,14 +810,7 @@ export default (): IUseTeamMember => {
 
   return {
     // PATTERN: useLoading(a, b, c, ...) — combines multiple loading refs into one
-    loading: useLoading(
-      createTeamMemberLoading,
-      updateTeamMemberLoading,
-      sendTeamMemberInvitationLoading,
-      deleteTeamMemberLoading,
-      validateTeamMemberLoading,
-      getTeamMemberLoading,
-    ),
+    loading: useLoading(createTeamMemberLoading, updateTeamMemberLoading, sendTeamMemberInvitationLoading, deleteTeamMemberLoading, validateTeamMemberLoading, getTeamMemberLoading),
     userDetails: currentValue,
     modified: computed(() => isModified.value),
     createTeamMember,