RevolverMatrix

RevolverMatrix is a component for displaying a 3-level MLM matrix structure. It shows the current user (level 0), their direct partners (level 1), and second-level partners (level 2).

How it works

1. The component calls the account/position API to retrieve all positions of the user.
2. Mapping filter: the tables prop contains a nested mapping treeId[offset] → table title.
3. Rendering: only tables that exist both in the user’s positions and in the provided mapping are displayed.
4. On table click: the component calls the downline API using treeId and positionId of the selected table.

Basic example

<ui-revolver-matrix
  :width="2"
  :tree-id="2"
  :tables="{
    2: { 1: 'Table 1', 2: 'Table 2', 3: 'Table 3' },
    0: { 1: 'Table 1', 2: 'Table 2' }
  }"
  :properties="['p.title', 's.id', 'm.SpilloverDirection']"
  :editable-properties="['m.SpilloverDirection']"
  edit-permission="self"
>
  <template #above="{ item, canEdit, loading }">
    <v-row class="align-center">
      <v-col :cols="12" :md="6">
        <ui-avatar-box
          class="v-col-md-6"
          :account-id="item?.accountId()"
          :position-id="item?.positionId()"
          :tree-id="2"
        />
      </v-col>

      <v-col :cols="12" :md="6">
        <ui-properties-box
          class="v-col-md-6"
          :properties="['m.SpilloverDirection']"
          mode="grid"
          :account-id="item?.accountId()"
          :position-id="item?.positionId()"
          :tree-id="2"
          :include-tree="0"
          :editable-properties="['m.SpilloverDirection']"
          :force-loading="loading"
        />
      </v-col>
    </v-row>
  </template>
</ui-revolver-matrix>

How it behaves:

• If the user has a position with treeId=2 and offset=1, they will see the tab "Table 1".
• Clicking the tab loads the downline data for that position.

Configuration:

Props

Main settings

Wrapper styles

Card styles

Avatar sizes

Editable properties

Slots

above

A slot for rendering custom content above the matrix (for example, information about the root user).

Slot parameters:

• item — root item (Item)
• loading — loading state (boolean)
• canEdit — whether the current user can edit (boolean)
• myId — current user ID (number)
• treeId — current tree ID (number)

Example:

<ui-revolver-matrix :tables="tables" :properties="properties">
  <template #above="{ item, loading, canEdit }">
    <div v-if="!loading && item" class="pa-4">
      <h2>{{ item.title() }}</h2>
      <p>ID: {{ item.accountId() }}</p>
    </div>
  </template>
</ui-revolver-matrix>

Usage examples

Minimal configuration

<ui-revolver-matrix
  :width="2"
  :tables="{
    2: { 1: 'Table 1' }
  }"
  :properties="['p.title', 's.id', 'vmdl.level', 'vmdl.number']"
/>

Multiple trees and positions

<ui-revolver-matrix
  :width="3"
  :tables="{
    2: { 1: 'STARTER', 2: 'PRO', 3: 'ELITE' },
    3: { 1: 'VIP 1', 2: 'VIP 2' },
    5: { 1: 'GOLD', 2: 'PLATINUM', 3: 'DIAMOND' }
  }"
  :properties="['p.title', 's.id', 'vmdl.level', 'vmdl.number']"
  title-field="p.title"
  subtitle-field="s.id"
/>

Note: The user will only see tables for which they have positions in the system.

Custom colors and text

<ui-revolver-matrix
  :width="3"
  :tables="{
    2: { 1: 'STARTER', 2: 'BUILDER', 3: 'LEADER' }
  }"
  :properties="['p.title', 's.id', 'vmdl.level', 'vmdl.number']"
  title-field="p.title"
  subtitle-field="s.id"
  no-table-found-text="You have not activated any positions yet"
  background-color="#dc2626"
  card-background-color="#fef2f2"
  empty-slot-color="#fee2e2"
  tabs-slider-color="#fbbf24"
  table-chip-color="#ffffff"
  arrow-color="#ffffff"
  card-title-color="#7f1d1d"
  card-subtitle-color="#b91c1c"
  loader-color="#fbbf24"
/>

Note: All of the settings can be customized either from admin panel
by manually editing code or from within the back office by pressing
on a cog icon in a left upper corner of the page (only accessible
when "Online office admin" flag is presented).