@7365admin1/layer-common 4.90.1 → 4.90.2-staging.484

package/components/AppSelect.vue

@@ -18,7 +18,8 @@
 <template>
   <v-menu
     v-if="!multiple"
-    :close-on-content-click="true"
+    v-model="singleOpen"
+    :close-on-content-click="!searchable"
     :disabled="disabled"
     location="bottom start"
     offset="4"
@@ -52,9 +53,27 @@
       </div>
     </template>
 
-    <div class="app-select__menu" role="listbox">
+    <div
+      ref="singleMenu"
+      class="app-select__menu"
+      role="listbox"
+      @scroll.passive="onMenuScroll"
+    >
+      <div v-if="searchable" class="app-select__search">
+        <v-icon icon="mdi-magnify" size="16" />
+        <input
+          ref="singleSearchInput"
+          v-model="search"
+          type="text"
+          class="app-select__search-input"
+          :placeholder="searchPlaceholder"
+          aria-label="Search options"
+          @keydown.enter.prevent="selectFirstMatch"
+          @keydown.esc.stop="singleOpen = false"
+        >
+      </div>
       <button
-        v-for="opt in normalized"
+        v-for="opt in visibleOptions"
         :key="String(opt.value)"
         type="button"
         class="app-select__option"
@@ -66,6 +85,14 @@
         <span class="app-select__option-text">{{ opt.title }}</span>
         <v-icon v-if="isSingleOn(opt)" icon="mdi-check" size="17" />
       </button>
+      <p v-if="searchable && !visibleOptions.length" class="app-select__empty">
+        {{ normalized.length ? "No matches" : "Nothing to choose from" }}
+      </p>
+      <!-- In the list, not under the field: the wait belongs where the reader's
+           eye already is, at the end of what they just scrolled through. -->
+      <p v-if="loadingMore" class="app-select__loading" role="status">
+        Loading more...
+      </p>
     </div>
   </v-menu>
 
@@ -122,8 +149,18 @@
     </template>
 
     <div class="app-select__menu">
+      <div v-if="searchable" class="app-select__search">
+        <v-icon icon="mdi-magnify" size="16" />
+        <input
+          v-model="search"
+          type="text"
+          class="app-select__search-input"
+          :placeholder="searchPlaceholder"
+          aria-label="Search options"
+        >
+      </div>
       <button
-        v-for="opt in normalized"
+        v-for="opt in visibleOptions"
         :key="String(opt.value)"
         type="button"
         class="app-select__option"
@@ -138,6 +175,9 @@
         />
         <span class="app-select__option-text">{{ opt.title }}</span>
       </button>
+      <p v-if="searchable && !visibleOptions.length" class="app-select__empty">
+        {{ normalized.length ? "No matches" : "Nothing to choose from" }}
+      </p>
     </div>
   </v-menu>
 </template>
@@ -154,6 +194,34 @@ defineOptions({ inheritAttrs: false });
  */
 const model = defineModel<any>({ default: "" });
 
+/**
+ * ASKING FOR THE NEXT PAGE, FROM INSIDE THE LIST.
+ *
+ * A dropdown that pages should load as it is scrolled - a button under the
+ * field asks the reader to leave the list they are reading to fetch more of it.
+ * The menu is already the scroll container (`max-height: 280px; overflow-y:
+ * auto` in `primitives.css`), so the end of the list is the natural trigger.
+ */
+const emit = defineEmits<{ (e: "load-more"): void }>();
+
+/** How close to the end counts as the end. About one row and a half. */
+const LOAD_MORE_SLACK_PX = 48;
+
+const singleMenu = ref<HTMLElement | null>(null);
+/* Scroll fires per pixel. This makes the ask happen once per ARRIVAL at the
+   end, not once per event, and rearms when the list grows under the reader. */
+const askedAtBottom = ref(false);
+
+function onMenuScroll(event: Event) {
+  const el = event.target as HTMLElement | null;
+  if (!el || !props.hasMore || props.loadingMore) return;
+  const near = el.scrollHeight - el.scrollTop - el.clientHeight <= LOAD_MORE_SLACK_PX;
+  if (near && !askedAtBottom.value) emit("load-more");
+  askedAtBottom.value = near;
+}
+
+
+
 const props = defineProps({
   label: { type: String, default: "" },
   /** Strings, or the `{ title, value }` shape `v-select` already takes. */
@@ -168,6 +236,22 @@ const props = defineProps({
   returnObject: { type: Boolean, default: false },
   clearable: { type: Boolean, default: false },
   placeholder: { type: String, default: "" },
+  /**
+   * A filter box at the top of the popover. Opt-in, so the 44 consumers that
+   * do not ask for it render exactly the DOM they render today - a list short
+   * enough to read does not want a search field in front of it.
+   */
+  searchable: { type: Boolean, default: false },
+  /**
+   * MORE OPTIONS EXIST THAN ARE LOADED - see the `load-more` emit.
+   *
+   * Opt-in, and single-select only for now. A caller that leaves these alone
+   * behaves exactly as it did: no footer, no listener, no emit.
+   */
+  hasMore: { type: Boolean, default: false },
+  /** A page is on its way; shows the footer and stops further asking. */
+  loadingMore: { type: Boolean, default: false },
+  searchPlaceholder: { type: String, default: "Search" },
 });
 
 const normalized = computed(() =>
@@ -178,6 +262,56 @@ const normalized = computed(() =>
   )
 );
 
+/* ---- search ---------------------------------------------------------- */
+
+const search = ref("");
+const singleOpen = ref(false);
+const singleSearchInput = ref<HTMLInputElement | null>(null);
+
+/* Case-insensitive substring over what the option READS AS, not its value:
+   the title is the only part the user can see to type. */
+const visibleOptions = computed(() => {
+  const term = search.value.trim().toLowerCase();
+  if (!props.searchable || !term) return normalized.value;
+  return normalized.value.filter((opt) =>
+    String(opt.title ?? "").toLowerCase().includes(term)
+  );
+});
+
+/*
+ * A page that does not fill the menu leaves nothing to scroll, and the reader
+ * would be stranded with no way to reach the rest. That is not hypothetical
+ * here: a page of ten whose rows are mostly filtered out by the caller can draw
+ * four options in a box built for eight. So whenever the list settles short of
+ * its own container, the next page is asked for straight away.
+ */
+watch(
+  () => [visibleOptions.value.length, props.hasMore, props.loadingMore, singleOpen.value],
+  async () => {
+    if (!props.hasMore || props.loadingMore || !singleOpen.value) return;
+    await nextTick();
+    const el = singleMenu.value;
+    if (el && el.scrollHeight <= el.clientHeight) emit("load-more");
+  },
+  { flush: "post" },
+);
+
+/* A stale term would hide the list the next time the popover opens, so it is
+   dropped on every open - and the caret goes into the box, since opening a
+   searchable select is almost always a prelude to typing. */
+watch(singleOpen, async (open) => {
+  if (!props.searchable) return;
+  search.value = "";
+  if (!open) return;
+  await nextTick();
+  singleSearchInput.value?.focus();
+});
+
+function selectFirstMatch() {
+  const [first] = visibleOptions.value;
+  if (first) selectSingle(first);
+}
+
 /* A model entry is either the plain value or - under `return-object` - the
    source item, so everything compares on this one key. */
 const keyOf = (v: any) =>
@@ -205,6 +339,11 @@ const isSingleOn = (opt: any) =>
 function selectSingle(opt: any) {
   if (props.disabled) return;
   model.value = props.returnObject ? opt.raw : String(opt.value);
+  // `close-on-content-click` has to be OFF while searching - it fires on the
+  // click that puts the caret in the search box, so the popover would shut the
+  // moment it was typed into. With it off, picking an option has to close the
+  // popover by hand.
+  if (props.searchable) singleOpen.value = false;
 }
 
 function clearSingle() {

package/components/BuildingUnitFormEdit.vue

@@ -10,6 +10,7 @@
         <v-tab value="general">General</v-tab>
         <v-tab value="residents">Residents/Tenants</v-tab>
         <v-tab value="vehicles">Vehicles</v-tab>
+        <v-tab value="management">Management</v-tab>
         <v-tab value="others">Others</v-tab>
       </v-tabs>
     </v-toolbar>
@@ -170,6 +171,11 @@
         </TableMain>
       </template>
 
+      <template v-else-if="tab === 'management'">
+        <BuildingUnitManagement :unit-id="buildingUnit._id" :site-id="buildingUnit?.site?._id"
+          :can-update="canUpdateUnit" />
+      </template>
+
       <template v-else-if="tab === 'others'">
         <v-row>
           <!-- <v-col cols="12" md="6" class="mt-2">

package/components/BuildingUnitManagement.vue

@@ -0,0 +1,298 @@
+<template>
+  <v-card width="100%">
+    <v-expansion-panels v-model="panels" variant="accordion" multiple>
+      <v-expansion-panel v-for="section in sections" :key="section.key" :value="section.key">
+        <v-expansion-panel-title class="bg-primary">
+          <span>{{ section.title }} ({{ section.items.length }})</span>
+          <v-spacer />
+          <!-- @click.stop: the button sits in the panel header, so a click must
+               not also open or close the panel. -->
+          <v-btn v-if="canUpdate" size="small" variant="tonal" class="text-none mr-4" prepend-icon="mdi-plus"
+            @click.stop="openAdd(section.key)">
+            Add
+          </v-btn>
+        </v-expansion-panel-title>
+
+        <v-expansion-panel-text>
+          <v-progress-linear v-if="section.loading" indeterminate color="primary" />
+          <v-list v-if="section.items.length" density="compact" class="bg-transparent">
+            <v-list-item v-for="item in section.items" :key="item._id" :title="item.name"
+              :subtitle="section.subtitle(item)">
+              <template v-if="canUpdate" #append>
+                <v-btn icon="mdi-close" size="small" variant="text" :loading="removing === item._id"
+                  :aria-label="`Remove ${item.name} from this unit`" @click="confirmRemove(section.key, item)" />
+              </template>
+            </v-list-item>
+          </v-list>
+          <p v-else-if="!section.loading" class="font-weight-semibold text-caption ml-2 mt-5">
+            **No {{ section.empty }} to display**
+          </p>
+        </v-expansion-panel-text>
+      </v-expansion-panel>
+    </v-expansion-panels>
+
+    <p v-if="message" class="text-center text-subtitle-2 font-weight-medium text-error mt-4">
+      {{ message }}
+    </p>
+
+    <v-dialog v-model="removeDialog" width="450" persistent>
+      <v-card width="100%">
+        <v-toolbar density="compact" class="pl-4">
+          <span class="font-weight-medium text-h5">
+            Remove {{ pendingRemove?.section === "members" ? "Management" : "Service Provider" }}
+          </span>
+        </v-toolbar>
+
+        <v-card-text>
+          <p class="text-subtitle-2 text-center">
+            Are you sure you want to remove <strong>{{ pendingRemove?.name }}</strong> from this unit?
+          </p>
+        </v-card-text>
+
+        <v-toolbar density="compact">
+          <v-row no-gutters>
+            <v-col cols="6">
+              <v-btn tile block size="48" variant="text" class="text-none" :disabled="!!removing"
+                @click="removeDialog = false">
+                Cancel
+              </v-btn>
+            </v-col>
+            <v-col cols="6">
+              <v-btn tile block size="48" color="primary-button" variant="flat" class="text-none"
+                :loading="!!removing" @click="remove">
+                Remove
+              </v-btn>
+            </v-col>
+          </v-row>
+        </v-toolbar>
+      </v-card>
+    </v-dialog>
+
+    <v-dialog v-model="addDialog" width="520" persistent>
+      <v-card>
+        <v-toolbar density="compact" class="pl-4">
+          <span class="font-weight-medium text-h6">Add {{ adding === "members" ? "Management" : "Service Providers" }}</span>
+        </v-toolbar>
+        <v-card-text>
+          <p class="text-caption mb-3">
+            Only active {{ adding === "members" ? "members" : "service provider people" }} that are not assigned to a
+            unit yet are listed.
+          </p>
+          <v-autocomplete v-model="selected" v-model:search="candidateSearch" :items="candidates"
+            :loading="candidatesLoading" item-title="name" item-value="_id" multiple chips closable-chips
+            no-filter density="comfortable" placeholder="Search by name"
+            :no-data-text="candidatesLoading ? 'Loading...' : 'No one available'">
+            <template #item="{ props: itemProps, item }">
+              <v-list-item v-bind="itemProps" :subtitle="subtitleOf(item.raw)" />
+            </template>
+          </v-autocomplete>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn class="text-none" :disabled="saving" @click="addDialog = false">Cancel</v-btn>
+          <v-btn class="text-none" color="primary" variant="flat" :loading="saving" :disabled="!selected.length"
+            @click="add">
+            Add
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+/**
+ * A building unit's Management tab: the management members and the service
+ * provider people (Members > Service Providers, not the provider companies)
+ * attached to this unit. Each can be on one unit at a time, and only while
+ * active - the server detaches them the moment they are suspended or deleted,
+ * so they simply drop off this list.
+ */
+type TSection = "members" | "providers";
+type TRow = {
+  _id: string;
+  name: string;
+  email?: string;
+  roleName?: string;
+  type?: string;
+  company?: string;
+  role?: string;
+  status?: string;
+};
+
+const props = defineProps({
+  unitId: {
+    type: String,
+    required: true,
+  },
+  /** The unit's site. The route's `site` is used when this is empty. */
+  siteId: {
+    type: String,
+    default: "",
+  },
+  /** The membership type whose members manage the site. */
+  managementType: {
+    type: String,
+    default: "property_management_agency",
+  },
+  canUpdate: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const route = useRoute();
+const org = computed(() => (route.params.org as string) ?? "");
+const site = computed(() => props.siteId || ((route.params.site as string) ?? ""));
+
+const { getAll: getMembers, updateMemberUnit } = useMember();
+const { getSiteMembers: getProviderPeople, updateSiteMemberUnit: updateProviderUnit } = useServiceProvider();
+const { debounce } = useUtils();
+
+const panels = ref<TSection[]>(["members", "providers"]);
+const message = ref("");
+const removing = ref("");
+
+function membersQuery(unit: string, search = "") {
+  return getMembers({ org: org.value, siteId: site.value, type: props.managementType, status: "active", unit, search, limit: 50 });
+}
+
+/**
+ * The site's provider people on `unit`, active only. The endpoint returns the
+ * whole list (no paging or search), so `search` is matched here.
+ */
+async function providersQuery(unit: string, search = "") {
+  const res = await getProviderPeople(site.value, unit);
+  const q = search.toLowerCase();
+  const items = (res?.items ?? []).filter(
+    (p) => p.status === "active" && (!q || [p.name, p.email, p.company].some((v) => v?.toLowerCase().includes(q))),
+  );
+  return { items };
+}
+
+const { data: memberRes, pending: membersLoading, refresh: refreshMembers } = useLazyAsyncData(
+  `unit-management-members-${props.unitId}`,
+  () => membersQuery(props.unitId),
+);
+const { data: providerRes, pending: providersLoading, refresh: refreshProviders } = useLazyAsyncData(
+  `unit-management-providers-${props.unitId}`,
+  () => providersQuery(props.unitId),
+);
+
+function subtitleOf(row: TRow) {
+  return [row.company, row.roleName || row.role || row.type?.replace(/_/g, " "), row.email]
+    .filter(Boolean)
+    .join(" · ");
+}
+
+const sections = computed(() => [
+  {
+    key: "members" as TSection,
+    title: "Management",
+    empty: "management",
+    items: (memberRes.value?.items ?? []) as TRow[],
+    loading: membersLoading.value,
+    subtitle: subtitleOf,
+  },
+  {
+    key: "providers" as TSection,
+    title: "Service Providers",
+    empty: "service providers",
+    items: (providerRes.value?.items ?? []) as TRow[],
+    loading: providersLoading.value,
+    subtitle: subtitleOf,
+  },
+]);
+
+function refresh(section: TSection) {
+  return section === "members" ? refreshMembers() : refreshProviders();
+}
+
+function assign(section: TSection, id: string, unit: string) {
+  return section === "members" ? updateMemberUnit(id, unit) : updateProviderUnit(id, unit);
+}
+
+function errorOf(error: any, fallback: string) {
+  return error?.response?._data?.message || error?.data?.message || fallback;
+}
+
+// --- Remove: confirmed first ---
+const removeDialog = ref(false);
+const pendingRemove = ref<{ section: TSection; id: string; name: string } | null>(null);
+
+function confirmRemove(section: TSection, row: TRow) {
+  message.value = "";
+  pendingRemove.value = { section, id: row._id, name: row.name };
+  removeDialog.value = true;
+}
+
+async function remove() {
+  if (!pendingRemove.value) return;
+  const { section, id } = pendingRemove.value;
+  removing.value = id;
+  try {
+    await assign(section, id, "");
+    await refresh(section);
+  } catch (error: any) {
+    message.value = errorOf(error, "Failed to remove from unit.");
+  } finally {
+    removing.value = "";
+    removeDialog.value = false;
+    pendingRemove.value = null;
+  }
+}
+
+// --- Add dialog: active rows on no unit yet ---
+const addDialog = ref(false);
+const adding = ref<TSection>("members");
+const selected = ref<string[]>([]);
+const candidates = ref<TRow[]>([]);
+const candidateSearch = ref("");
+const candidatesLoading = ref(false);
+const saving = ref(false);
+
+async function loadCandidates() {
+  candidatesLoading.value = true;
+  try {
+    const search = candidateSearch.value?.trim() ?? "";
+    const res = adding.value === "members" ? await membersQuery("none", search) : await providersQuery("none", search);
+    // Keep what is already picked, so a new search does not drop the chips.
+    const picked = candidates.value.filter((c) => selected.value.includes(c._id));
+    const found = ((res?.items ?? []) as TRow[]).filter((c) => !selected.value.includes(c._id));
+    candidates.value = [...picked, ...found];
+  } catch (error: any) {
+    message.value = errorOf(error, "Failed to load the list.");
+  } finally {
+    candidatesLoading.value = false;
+  }
+}
+
+const debouncedLoad = debounce(loadCandidates, 400);
+watch(candidateSearch, () => {
+  if (addDialog.value) debouncedLoad();
+});
+
+function openAdd(section: TSection) {
+  message.value = "";
+  adding.value = section;
+  selected.value = [];
+  candidates.value = [];
+  candidateSearch.value = "";
+  addDialog.value = true;
+  loadCandidates();
+}
+
+async function add() {
+  saving.value = true;
+  message.value = "";
+  const section = adding.value;
+  const results = await Promise.allSettled(selected.value.map((id) => assign(section, id, props.unitId)));
+  const failed = results.filter((r): r is PromiseRejectedResult => r.status === "rejected");
+  if (failed.length) {
+    message.value = errorOf(failed[0].reason, `${failed.length} could not be added.`);
+  }
+  await refresh(section);
+  saving.value = false;
+  addDialog.value = false;
+}
+</script>

package/components/ClientMain.vue

@@ -141,17 +141,17 @@
                   before, and which is the one thing the admin app's
                   Organizations list showed that this one did not.
                 -->
-                <td class="td-name">
+                <td class="td-name" data-label="Organization">
                   {{ item.name }}
                   <span class="td-name-sub">{{ item.email }}</span>
                 </td>
                 <!-- A blank cell reads as a broken screen, so the one case
                      with nothing to print says so. `--text2`, not `--muted`:
                      this is text to be read, and `--muted` measures 3.24:1. -->
-                <td :class="{ 'td-nature-none': !item.nature }">
+                <td data-label="Nature" :class="{ 'td-nature-none': !item.nature }">
                   {{ item.nature ? formatNature(item.nature) : 'Not recorded' }}
                 </td>
-                <td>
+                <td data-label="Sites">
                   <span class="sites-badge">{{ item.sites }}</span>
                 </td>
                 <!--
@@ -159,7 +159,7 @@
                   which reads as a broken screen. It is one ordinary state, so it
                   is said once, in words.
                 -->
-                <td v-if="item.sub.state === 'none'" colspan="4" class="sub-none">
+                <td v-if="item.sub.state === 'none'" colspan="4" class="sub-none" data-label="Subscription">
                   No subscription set up
                   <button class="sub-setup-btn" @click="openSubscription(item)">
                     Set up subscription
@@ -167,13 +167,13 @@
                 </td>
 
                 <template v-else>
-                  <td>
+                  <td data-label="Subscription">
                     <span class="sub-label" :class="{ 'needs-attention': item.sub.needsAttention }">
                       {{ item.sub.label }}
                     </span>
                   </td>
-                  <td class="td-muted">{{ item.sub.billingCycle }}</td>
-                  <td>
+                  <td class="td-muted" data-label="Billing cycle">{{ item.sub.billingCycle }}</td>
+                  <td data-label="Start date">
                     <span class="date-cell">
                       <svg viewBox="0 0 16 16" fill="none" width="13" height="13">
                         <rect x="1" y="3" width="14" height="12" rx="2" stroke="#9CA3AF" stroke-width="1.3"/>
@@ -183,7 +183,7 @@
                       {{ item.sub.start }}
                     </span>
                   </td>
-                  <td>
+                  <td data-label="End date">
                     <span class="date-cell" :class="{ 'needs-attention': item.sub.needsAttention }">
                       <svg viewBox="0 0 16 16" fill="none" width="13" height="13">
                         <rect x="1" y="3" width="14" height="12" rx="2" stroke="#9CA3AF" stroke-width="1.3"/>
@@ -194,7 +194,7 @@
                     </span>
                   </td>
                 </template>
-                <td>
+                <td data-label="Actions">
                   <div class="action-wrap">
                     <button class="dots-btn" @click.stop="toggleMenu(item._id, $event)">
                       <span /><span /><span />
@@ -223,11 +223,11 @@
                 <td colspan="5" class="empty">No pending invitations.</td>
               </tr>
               <tr v-for="item in items" :key="item._id">
-                <td class="td-muted">{{ item.email }}</td>
-                <td>{{ item.app }}</td>
-                <td class="td-muted">{{ item.role }}</td>
-                <td><span class="status-chip pending">{{ item.status }}</span></td>
-                <td>
+                <td class="td-muted" data-label="Email">{{ item.email }}</td>
+                <td data-label="App">{{ item.app }}</td>
+                <td class="td-muted" data-label="Role">{{ item.role }}</td>
+                <td data-label="Status"><span class="status-chip pending">{{ item.status }}</span></td>
+                <td data-label="Action">
                   <button
                     class="cancel-btn"
                     :disabled="cancelLoadingId === item._id"
@@ -1314,4 +1314,46 @@ tbody td { vertical-align: middle; }
   background: var(--err-bg);
   color: var(--err);
 }
+
+/* Phones (owner 2026-10-02): the client table was 1085px wide inside a 390px
+   screen. Below 600px each client is a card, one "label: value" line per cell. */
+@media (max-width: 599.98px) {
+  .table-scroll table,
+  .table-scroll tbody,
+  .table-scroll tr,
+  .table-scroll td {
+    display: block;
+    width: 100%;
+  }
+
+  .table-scroll thead {
+    display: none;
+  }
+
+  .table-scroll tr {
+    border-bottom: 1px solid var(--border);
+    padding: 8px 0;
+  }
+
+  .table-scroll td {
+    display: grid;
+    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+    column-gap: 12px;
+    align-items: center;
+    padding: 4px 16px !important;
+    border: 0;
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+
+  .table-scroll td[data-label]::before {
+    content: attr(data-label);
+    color: var(--muted);
+    font-size: 12px;
+  }
+
+  .table-scroll td.empty {
+    display: block;
+  }
+}
 </style>

package/components/Dialog/UpdateMoreAction.vue

@@ -23,7 +23,7 @@
         Close
       </v-btn>
 
-      <v-menu v-if="canUpdate || canDelete" contained>
+      <v-menu v-if="canUpdate || canDelete || $slots.actions" contained>
         <template #activator="{ props }">
           <v-btn
             variant="flat"
@@ -42,6 +42,16 @@
              render-verified either. Only the row type and the destructive ink
              change. -->
         <v-list class="pa-0 update-more__list">
+          <!--
+            Screen-specific rows, above Edit and the destructive one.
+
+            Additive: a screen that passes nothing gets the menu it always
+            had, and `$slots.actions` is undefined unless a caller actually
+            defines the slot - so the button does not appear over an empty
+            list when a screen has neither permission nor extra rows.
+          -->
+          <slot name="actions" />
+
           <v-list-item v-if="canUpdate" @click="emit('edit')">
             <v-list-item-title>
               {{ editButtonLabel }}