From 61d00cceef9501da159fe5c9a2c495c891da2657 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andrea.leardini@nethesis.it>
Date: Thu, 30 Jul 2026 09:26:52 +0200
Subject: [PATCH 01/13] fix(ui): fix Company field and System filter

---
 .../applications/AssignOrganizationDrawer.vue |  1 +
 .../OrganizationApplicationsCard.vue          | 10 ++-
 .../OrganizationCombobox.test.ts              | 82 +++++++++++++++++++
 .../organizations/OrganizationCombobox.vue    | 20 +++++
 .../organizations/OrganizationSystemsCard.vue |  7 +-
 .../systems/CreateOrEditSystemDrawer.vue      |  1 +
 .../systems/SystemApplicationsCard.vue        |  8 +-
 .../users/CreateOrEditUserDrawer.vue          |  1 +
 frontend/src/views/CustomerDetailView.vue     |  3 +-
 frontend/src/views/DistributorDetailView.vue  |  2 +
 frontend/src/views/ResellerDetailView.vue     |  2 +
 11 files changed, 133 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/components/organizations/OrganizationCombobox.test.ts

diff --git a/frontend/src/components/applications/AssignOrganizationDrawer.vue b/frontend/src/components/applications/AssignOrganizationDrawer.vue
index 6c552ab8a..aff98fb24 100644
--- a/frontend/src/components/applications/AssignOrganizationDrawer.vue
+++ b/frontend/src/components/applications/AssignOrganizationDrawer.vue
@@ -127,6 +127,7 @@ async function saveApplication() {
         <OrganizationCombobox
           ref="organizationIdRef"
           v-model="organizationId"
+          :selected-organization="currentApplication?.organization"
           :label="$t('organizations.organization')"
           :placeholder="$t('organizations.choose_organization')"
           :invalid-message="
diff --git a/frontend/src/components/organizations/OrganizationApplicationsCard.vue b/frontend/src/components/organizations/OrganizationApplicationsCard.vue
index d90128ebc..3d9159381 100644
--- a/frontend/src/components/organizations/OrganizationApplicationsCard.vue
+++ b/frontend/src/components/organizations/OrganizationApplicationsCard.vue
@@ -17,6 +17,10 @@ import { useRoute } from 'vue-router'
 import { useApplications } from '@/queries/applications/applications'
 import { useApplicationsSummaryByCompany } from '@/queries/applications/applicationsSummaryByCompany'
 
+const { organizationName } = defineProps<{
+  organizationName?: string
+}>()
+
 const { t } = useI18n()
 const route = useRoute()
 
@@ -45,7 +49,11 @@ const moreApplications = computed(() => {
 const goToApplications = () => {
   const companyId = route.params.companyId as string
   clearApplicationsFilters()
-  organizationFilterForApps.value = companyId ? [{ id: companyId, label: companyId }] : []
+  // the filter renders the label carried by the selection: pass the organization
+  // name, as it may not be among the options the dropdown has loaded
+  organizationFilterForApps.value = companyId
+    ? [{ id: companyId, label: organizationName || companyId }]
+    : []
   router.push({ name: 'applications' })
 }
 </script>
diff --git a/frontend/src/components/organizations/OrganizationCombobox.test.ts b/frontend/src/components/organizations/OrganizationCombobox.test.ts
new file mode 100644
index 000000000..d08f240ed
--- /dev/null
+++ b/frontend/src/components/organizations/OrganizationCombobox.test.ts
@@ -0,0 +1,82 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import { describe, expect, it, vi } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import { ref } from 'vue'
+import { createI18n } from 'vue-i18n'
+import OrganizationCombobox from './OrganizationCombobox.vue'
+import type { OrganizationSearchResult } from '@/lib/organizations/searchOrganizations'
+
+// The options are one page of a server-side search, so the composable is stubbed
+// to serve a page that deliberately excludes the assigned company.
+const servedPage: OrganizationSearchResult[] = [
+  { logto_id: 'org-aaa', name: 'Alpha Ltd', type: 'customer' },
+  { logto_id: 'org-bbb', name: 'Beta Ltd', type: 'reseller' },
+]
+
+vi.mock('@/composables/useOrganizationFilter', () => ({
+  useOrganizationFilter: () => ({
+    organizations: ref(servedPage),
+    loading: ref(false),
+    onSearch: vi.fn(),
+    currentSearch: ref(''),
+  }),
+}))
+
+const i18n = createI18n({ legacy: false, locale: 'en', missingWarn: false, fallbackWarn: false })
+
+// The label is written to the input after mount, so flush before reading it.
+async function mountAndReadDisplayedValue(props: {
+  modelValue: string
+  selectedOrganization?: { logto_id?: string; name: string; type: string }
+}) {
+  const wrapper = mount(OrganizationCombobox, {
+    props: { label: 'Company', ...props },
+    global: { plugins: [i18n] },
+  })
+  await flushPromises()
+
+  return (wrapper.find('input').element as HTMLInputElement).value
+}
+
+describe('OrganizationCombobox', () => {
+  it('displays a company that falls outside the served page of options', async () => {
+    expect(
+      await mountAndReadDisplayedValue({
+        modelValue: 'org-zzz',
+        selectedOrganization: { logto_id: 'org-zzz', name: 'Zeta Ltd', type: 'customer' },
+      }),
+    ).toBe('Zeta Ltd')
+  })
+
+  it('displays a company that is present in the served page', async () => {
+    expect(await mountAndReadDisplayedValue({ modelValue: 'org-bbb' })).toBe('Beta Ltd')
+  })
+
+  // Guards the regression this component exists to prevent: without the assigned
+  // company the field renders empty, which is what users saw in the edit drawers.
+  it('renders empty when a company outside the served page is not supplied', async () => {
+    expect(await mountAndReadDisplayedValue({ modelValue: 'org-zzz' })).toBe('')
+  })
+
+  it('ignores a supplied company whose id does not match the model value', async () => {
+    expect(
+      await mountAndReadDisplayedValue({
+        modelValue: 'org-aaa',
+        selectedOrganization: { logto_id: 'org-zzz', name: 'Zeta Ltd', type: 'customer' },
+      }),
+    ).toBe('Alpha Ltd')
+  })
+
+  // Owner-org entities come back from the API with an empty name; showing an
+  // unlabelled selection would be worse than leaving the field blank.
+  it('ignores a supplied company with a blank name', async () => {
+    expect(
+      await mountAndReadDisplayedValue({
+        modelValue: 'org-owner',
+        selectedOrganization: { logto_id: 'org-owner', name: '', type: 'owner' },
+      }),
+    ).toBe('')
+  })
+})
diff --git a/frontend/src/components/organizations/OrganizationCombobox.vue b/frontend/src/components/organizations/OrganizationCombobox.vue
index 975129241..1abdb0c04 100644
--- a/frontend/src/components/organizations/OrganizationCombobox.vue
+++ b/frontend/src/components/organizations/OrganizationCombobox.vue
@@ -24,6 +24,11 @@ const props = withDefaults(
     allowedTypes?: string[]
     // Exclude these organization ids from the options (e.g. the caller's own org).
     excludeOrganizationIds?: string[]
+    // The organization already assigned to the entity being edited. The options
+    // are a single page of a server-side search, so a company that falls outside
+    // it has no option to resolve its label from — pass it here and the field can
+    // still show its name.
+    selectedOrganization?: { logto_id?: string; name: string; type: string }
   }>(),
   {
     isShown: true,
@@ -56,6 +61,20 @@ const organizationOptions = computed(() => {
   }))
 })
 
+// Skipped when the name is empty (owner-org entities, whose name the API leaves
+// blank) so the field stays blank instead of showing an unlabelled selection.
+const selectedOption = computed(() => {
+  const org = props.selectedOrganization
+  if (!props.modelValue || org?.logto_id !== props.modelValue || !org.name) {
+    return undefined
+  }
+  return {
+    id: props.modelValue,
+    label: org.name,
+    description: t(`organizations.${org.type}`),
+  }
+})
+
 const isLoading = loading
 
 const isInitiallyLoading = computed(
@@ -80,6 +99,7 @@ defineExpose({
     ref="comboboxRef"
     :model-value="props.modelValue"
     :options="organizationOptions"
+    :selected-option="selectedOption"
     :label="props.label"
     :placeholder="computedPlaceholder"
     :invalid-message="props.invalidMessage"
diff --git a/frontend/src/components/organizations/OrganizationSystemsCard.vue b/frontend/src/components/organizations/OrganizationSystemsCard.vue
index d87900bcf..93c106f2c 100644
--- a/frontend/src/components/organizations/OrganizationSystemsCard.vue
+++ b/frontend/src/components/organizations/OrganizationSystemsCard.vue
@@ -26,6 +26,7 @@ const props = defineProps<{
   systemsStatus: 'pending' | 'success' | 'error'
   systemsData: SystemData | undefined
   statsStatus: 'pending' | 'success' | 'error'
+  organizationName?: string
 }>()
 
 const { t } = useI18n()
@@ -48,7 +49,11 @@ const moreSystems = computed(() => {
 
 const goToSystems = () => {
   const companyId = route.params.companyId as string
-  organizationFilterForSystems.value = companyId ? [{ id: companyId, label: companyId }] : []
+  // the filter renders the label carried by the selection: pass the organization
+  // name, as it may not be among the options the dropdown has loaded
+  organizationFilterForSystems.value = companyId
+    ? [{ id: companyId, label: props.organizationName || companyId }]
+    : []
   router.push({ name: 'systems' })
 }
 </script>
diff --git a/frontend/src/components/systems/CreateOrEditSystemDrawer.vue b/frontend/src/components/systems/CreateOrEditSystemDrawer.vue
index c99ab7f84..d9bd6044b 100644
--- a/frontend/src/components/systems/CreateOrEditSystemDrawer.vue
+++ b/frontend/src/components/systems/CreateOrEditSystemDrawer.vue
@@ -335,6 +335,7 @@ function copySecretAndCloseDrawer() {
             ref="organizationIdRef"
             v-model="organizationId"
             :is-shown="isShown"
+            :selected-organization="currentSystem?.organization"
             :label="$t('systems.organization')"
             :helper-text="$t('systems.organization_helper')"
             :invalid-message="
diff --git a/frontend/src/components/systems/SystemApplicationsCard.vue b/frontend/src/components/systems/SystemApplicationsCard.vue
index de47d47f4..a070be5e1 100644
--- a/frontend/src/components/systems/SystemApplicationsCard.vue
+++ b/frontend/src/components/systems/SystemApplicationsCard.vue
@@ -16,11 +16,13 @@ import router from '@/router'
 import { useRoute } from 'vue-router'
 import { useApplications } from '@/queries/applications/applications'
 import { useApplicationsSummaryBySystem } from '@/queries/applications/applicationsSummaryBySystem'
+import { useSystemDetail } from '@/queries/systems/systemDetail'
 
 const { t } = useI18n()
 const route = useRoute()
 
 const { state: applicationsSummary } = useApplicationsSummaryBySystem()
+const { state: systemDetail } = useSystemDetail()
 const { systemFilter: systemFilterForApps, clearFilters: clearApplicationsFilters } =
   useApplications()
 
@@ -45,7 +47,11 @@ const moreApplications = computed(() => {
 const goToApplications = () => {
   const systemId = route.params.systemId as string
   clearApplicationsFilters()
-  systemFilterForApps.value = systemId ? [{ id: systemId, label: systemId }] : []
+  // the filter renders the label carried by the selection: pass the system name,
+  // as the selected system may not be among the options the dropdown has loaded
+  systemFilterForApps.value = systemId
+    ? [{ id: systemId, label: systemDetail.value.data?.name || systemId }]
+    : []
   router.push({ name: 'applications' })
 }
 </script>
diff --git a/frontend/src/components/users/CreateOrEditUserDrawer.vue b/frontend/src/components/users/CreateOrEditUserDrawer.vue
index 5e0aba2dc..e5147d739 100644
--- a/frontend/src/components/users/CreateOrEditUserDrawer.vue
+++ b/frontend/src/components/users/CreateOrEditUserDrawer.vue
@@ -354,6 +354,7 @@ function getEmailInvalidMessage(): string {
           ref="organizationIdRef"
           v-model="organizationId"
           :is-shown="isShown"
+          :selected-organization="currentUser?.organization"
           :label="$t('users.organization')"
           :invalid-message="
             validationIssues.organization_id?.[0] ? $t(validationIssues.organization_id[0]) : ''
diff --git a/frontend/src/views/CustomerDetailView.vue b/frontend/src/views/CustomerDetailView.vue
index f58148843..629971925 100644
--- a/frontend/src/views/CustomerDetailView.vue
+++ b/frontend/src/views/CustomerDetailView.vue
@@ -51,9 +51,10 @@ const { state: customerSystems } = useCustomerSystems()
         :systems-status="customerSystems.status"
         :systems-data="customerSystems.data"
         :stats-status="customerStats.status"
+        :organization-name="customerDetail.data?.name"
       />
       <!-- organization applications -->
-      <OrganizationApplicationsCard />
+      <OrganizationApplicationsCard :organization-name="customerDetail.data?.name" />
     </div>
   </div>
 </template>
diff --git a/frontend/src/views/DistributorDetailView.vue b/frontend/src/views/DistributorDetailView.vue
index def700b61..66288acb1 100644
--- a/frontend/src/views/DistributorDetailView.vue
+++ b/frontend/src/views/DistributorDetailView.vue
@@ -94,12 +94,14 @@ const hierarchySystemsRoute = computed(() => {
         :systems-status="distributorSystems.status"
         :systems-data="distributorSystems.data"
         :stats-status="distributorStats.status"
+        :organization-name="distributorDetail.data?.name"
       />
       <!-- organization applications -->
       <OrganizationApplicationsCard
         :applications-count="applicationsSummary.data?.total ?? 0"
         :applications-status="applicationsSummary.status"
         :summary-data="applicationsSummary.data"
+        :organization-name="distributorDetail.data?.name"
       />
     </div>
   </div>
diff --git a/frontend/src/views/ResellerDetailView.vue b/frontend/src/views/ResellerDetailView.vue
index 86f72117b..0776c1e65 100644
--- a/frontend/src/views/ResellerDetailView.vue
+++ b/frontend/src/views/ResellerDetailView.vue
@@ -94,12 +94,14 @@ const hierarchySystemsRoute = computed(() => {
         :systems-status="resellerSystems.status"
         :systems-data="resellerSystems.data"
         :stats-status="resellerStats.status"
+        :organization-name="resellerDetail.data?.name"
       />
       <!-- organization applications -->
       <OrganizationApplicationsCard
         :applications-count="applicationsSummary.data?.total ?? 0"
         :applications-status="applicationsSummary.status"
         :summary-data="applicationsSummary.data"
+        :organization-name="resellerDetail.data?.name"
       />
     </div>
   </div>

From 4e3f5c167cb6de434ccfd87079038160375c8a7d Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andrea.leardini@nethesis.it>
Date: Thu, 30 Jul 2026 10:21:48 +0200
Subject: [PATCH 02/13] fix(ui): table ids and add catch to route.push()

---
 .../components/account/impersonation/SessionModal.vue  |  2 +-
 .../components/account/impersonation/SessionsTable.vue |  2 +-
 .../src/components/applications/ApplicationsTable.vue  | 10 ++++++++--
 frontend/src/components/customers/CustomersTable.vue   | 10 ++++++++--
 .../src/components/distributors/DistributorsTable.vue  | 10 ++++++++--
 frontend/src/components/resellers/ResellersTable.vue   | 10 ++++++++--
 frontend/src/components/systems/SystemsTable.vue       |  8 ++++++--
 frontend/src/components/users/UsersTable.vue           |  2 +-
 8 files changed, 41 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/account/impersonation/SessionModal.vue b/frontend/src/components/account/impersonation/SessionModal.vue
index 528951b0d..3b5c047c0 100644
--- a/frontend/src/components/account/impersonation/SessionModal.vue
+++ b/frontend/src/components/account/impersonation/SessionModal.vue
@@ -152,7 +152,7 @@ const copyRequestDataToClipboard = (jsonString: string) => {
         <NeTableHeadCell>{{ $t('account.impersonation.response_status') }}</NeTableHeadCell>
       </NeTableHead>
       <NeTableBody>
-        <NeTableRow v-for="(item, index) in sessionsPage" :key="index">
+        <NeTableRow v-for="item in sessionsPage" :key="item.session_id">
           <NeTableCell :data-label="$t('account.impersonation.timestamp')">
             {{ item.timestamp ? formatDateTime(new Date(item.timestamp), locale) : '-' }}
           </NeTableCell>
diff --git a/frontend/src/components/account/impersonation/SessionsTable.vue b/frontend/src/components/account/impersonation/SessionsTable.vue
index 278be9472..2029612d2 100644
--- a/frontend/src/components/account/impersonation/SessionsTable.vue
+++ b/frontend/src/components/account/impersonation/SessionsTable.vue
@@ -96,7 +96,7 @@ const onSessionModalClose = () => {
           </NeTableHeadCell>
         </NeTableHead>
         <NeTableBody>
-          <NeTableRow v-for="(item, index) in sessionsPage" :key="index">
+          <NeTableRow v-for="item in sessionsPage" :key="item.session_id">
             <NeTableCell :data-label="$t('account.impersonation.session_start')">
               {{
                 item.start_time ? formatDateTimeNoSeconds(new Date(item.start_time), locale) : '-'
diff --git a/frontend/src/components/applications/ApplicationsTable.vue b/frontend/src/components/applications/ApplicationsTable.vue
index 39a2972de..701938553 100644
--- a/frontend/src/components/applications/ApplicationsTable.vue
+++ b/frontend/src/components/applications/ApplicationsTable.vue
@@ -179,7 +179,13 @@ const onSort = (payload: SortEvent) => {
 }
 
 const goToApplicationDetails = (application: Application) => {
-  router.push({ name: 'application_detail', params: { applicationId: application.id } })
+  router
+    .push({ name: 'application_detail', params: { applicationId: application.id } })
+    .catch((error) => {
+      // router.push() swallows navigation failures by default; log them so an
+      // intermittent "URL changes but the page doesn't" report leaves a trace
+      console.error('[goToApplicationDetails]', error)
+    })
 }
 </script>
 
@@ -318,7 +324,7 @@ const goToApplicationDetails = (application: Application) => {
           </NeTableHeadCell>
         </NeTableHead>
         <NeTableBody>
-          <NeTableRow v-for="(item, index) in applicationsPage" :key="index">
+          <NeTableRow v-for="item in applicationsPage" :key="item.id">
             <NeTableCell :data-label="$t('applications.name')">
               <router-link
                 :to="{ name: 'application_detail', params: { applicationId: item.id } }"
diff --git a/frontend/src/components/customers/CustomersTable.vue b/frontend/src/components/customers/CustomersTable.vue
index cf23e2f6d..084c4fbf9 100644
--- a/frontend/src/components/customers/CustomersTable.vue
+++ b/frontend/src/components/customers/CustomersTable.vue
@@ -269,7 +269,13 @@ const onSort = (payload: SortEvent) => {
 }
 
 const goToCustomerDetails = (customer: Customer) => {
-  router.push({ name: 'customer_detail', params: { companyId: customer.logto_id } })
+  router
+    .push({ name: 'customer_detail', params: { companyId: customer.logto_id } })
+    .catch((error) => {
+      // router.push() swallows navigation failures by default; log them so an
+      // intermittent "URL changes but the page doesn't" report leaves a trace
+      console.error('[goToCustomerDetails]', error)
+    })
 }
 </script>
 
@@ -395,7 +401,7 @@ const goToCustomerDetails = (customer: Customer) => {
         </NeTableHeadCell>
       </NeTableHead>
       <NeTableBody>
-        <NeTableRow v-for="(item, index) in customersPage" :key="index">
+        <NeTableRow v-for="item in customersPage" :key="item.logto_id">
           <NeTableCell :data-label="$t('organizations.name')">
             <router-link
               v-if="!item.deleted_at"
diff --git a/frontend/src/components/distributors/DistributorsTable.vue b/frontend/src/components/distributors/DistributorsTable.vue
index b83815c6f..3b4e4707f 100644
--- a/frontend/src/components/distributors/DistributorsTable.vue
+++ b/frontend/src/components/distributors/DistributorsTable.vue
@@ -271,7 +271,13 @@ const onSort = (payload: SortEvent) => {
 }
 
 const goToDistributorDetails = (distributor: Distributor) => {
-  router.push({ name: 'distributor_detail', params: { companyId: distributor.logto_id } })
+  router
+    .push({ name: 'distributor_detail', params: { companyId: distributor.logto_id } })
+    .catch((error) => {
+      // router.push() swallows navigation failures by default; log them so an
+      // intermittent "URL changes but the page doesn't" report leaves a trace
+      console.error('[goToDistributorDetails]', error)
+    })
 }
 </script>
 
@@ -403,7 +409,7 @@ const goToDistributorDetails = (distributor: Distributor) => {
         </NeTableHeadCell>
       </NeTableHead>
       <NeTableBody>
-        <NeTableRow v-for="(item, index) in distributorsPage" :key="index">
+        <NeTableRow v-for="item in distributorsPage" :key="item.logto_id">
           <NeTableCell :data-label="$t('organizations.name')">
             <router-link
               v-if="!item.deleted_at"
diff --git a/frontend/src/components/resellers/ResellersTable.vue b/frontend/src/components/resellers/ResellersTable.vue
index 0d25cfef7..468a0be84 100644
--- a/frontend/src/components/resellers/ResellersTable.vue
+++ b/frontend/src/components/resellers/ResellersTable.vue
@@ -290,7 +290,13 @@ const onSort = (payload: SortEvent) => {
 }
 
 const goToResellerDetails = (reseller: Reseller) => {
-  router.push({ name: 'reseller_detail', params: { companyId: reseller.logto_id } })
+  router
+    .push({ name: 'reseller_detail', params: { companyId: reseller.logto_id } })
+    .catch((error) => {
+      // router.push() swallows navigation failures by default; log them so an
+      // intermittent "URL changes but the page doesn't" report leaves a trace
+      console.error('[goToResellerDetails]', error)
+    })
 }
 </script>
 
@@ -417,7 +423,7 @@ const goToResellerDetails = (reseller: Reseller) => {
         </NeTableHeadCell>
       </NeTableHead>
       <NeTableBody>
-        <NeTableRow v-for="(item, index) in resellersPage" :key="index">
+        <NeTableRow v-for="item in resellersPage" :key="item.logto_id">
           <NeTableCell :data-label="$t('organizations.name')">
             <router-link
               v-if="!item.deleted_at"
diff --git a/frontend/src/components/systems/SystemsTable.vue b/frontend/src/components/systems/SystemsTable.vue
index b4ca939e5..ced47260a 100644
--- a/frontend/src/components/systems/SystemsTable.vue
+++ b/frontend/src/components/systems/SystemsTable.vue
@@ -348,7 +348,11 @@ const onSort = (payload: SortEvent) => {
 }
 
 const goToSystemDetails = (system: System) => {
-  router.push({ name: 'system_detail', params: { systemId: system.id } })
+  router.push({ name: 'system_detail', params: { systemId: system.id } }).catch((error) => {
+    // router.push() swallows navigation failures by default; log them so an
+    // intermittent "URL changes but the page doesn't" report leaves a trace
+    console.error('[goToSystemDetails]', error)
+  })
 }
 
 function onSecretRegenerated(secret: string) {
@@ -536,7 +540,7 @@ function onCloseSecretRegeneratedModal() {
         </NeTableHeadCell>
       </NeTableHead>
       <NeTableBody>
-        <NeTableRow v-for="(item, index) in systemsPage" :key="index">
+        <NeTableRow v-for="item in systemsPage" :key="item.id">
           <NeTableCell :data-label="$t('systems.name')" class="break-all">
             <div :class="{ 'opacity-50': item.status === 'deleted' }">
               <SystemLogoAndLink
diff --git a/frontend/src/components/users/UsersTable.vue b/frontend/src/components/users/UsersTable.vue
index 0a7cec793..d517fab43 100644
--- a/frontend/src/components/users/UsersTable.vue
+++ b/frontend/src/components/users/UsersTable.vue
@@ -494,7 +494,7 @@ const goToAccount = () => {
         </NeTableHeadCell>
       </NeTableHead>
       <NeTableBody>
-        <NeTableRow v-for="(item, index) in usersPage" :key="index">
+        <NeTableRow v-for="item in usersPage" :key="item.username">
           <NeTableCell :data-label="$t('users.name')" :class="{ 'opacity-50': item.deleted_at }">
             <div class="flex items-center gap-2">
               <UserAvatar

From 17b908ee749d2fa165223c50a03521d155c49a65 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andrea.leardini@nethesis.it>
Date: Thu, 30 Jul 2026 10:23:01 +0200
Subject: [PATCH 03/13] fix(ui): make system apps counter clickable

---
 frontend/src/components/systems/SystemApplicationsCard.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/components/systems/SystemApplicationsCard.vue b/frontend/src/components/systems/SystemApplicationsCard.vue
index a070be5e1..46418086f 100644
--- a/frontend/src/components/systems/SystemApplicationsCard.vue
+++ b/frontend/src/components/systems/SystemApplicationsCard.vue
@@ -63,6 +63,7 @@ const goToApplications = () => {
     :icon="faGridOne"
     :loading="applicationsSummary.status === 'pending'"
     :centeredCounter="!applicationsCount"
+    @counter-click="goToApplications"
   >
     <div class="divide-y divide-gray-200 dark:divide-gray-700">
       <div

From 445130f897a41f8d050193dda51b0659cf653883 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andrea.leardini@nethesis.it>
Date: Thu, 30 Jul 2026 10:26:10 +0200
Subject: [PATCH 04/13] fix(ui): italian tralations

---
 frontend/src/i18n/it/translation.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/i18n/it/translation.json b/frontend/src/i18n/it/translation.json
index 8db8e2d70..983e627a0 100644
--- a/frontend/src/i18n/it/translation.json
+++ b/frontend/src/i18n/it/translation.json
@@ -25,8 +25,8 @@
     "copied": "Copiato!",
     "status": "Stato",
     "any": "Qualsiasi",
-    "clear_filter": "Cancella filtro",
-    "clear_filters": "Cancella filtri",
+    "clear_filter": "Azzera filtro",
+    "clear_filters": "Azzera filtri",
     "reset_filters": "Reimposta filtri",
     "try_changing_search_filters": "Prova a modificare i filtri di ricerca",
     "go_to_page": "Vai a {page}",
@@ -756,7 +756,7 @@
     "no_options": "Nessuna opzione",
     "more_options_hidden": "Continua a digitare per visualizzare altre opzioni",
     "options_filter_placeholder": "Filtra opzioni",
-    "clear_selection": "Cancella selezione",
+    "clear_selection": "Azzera selezione",
     "reset_selection": "Reimposta selezione",
     "clear_search": "Azzera ricerca"
   },

From d7d215e8810061f5e14943fec5fc1c7edf5a54db Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andrea.leardini@nethesis.it>
Date: Thu, 30 Jul 2026 18:39:40 +0200
Subject: [PATCH 05/13] fix(ui): add parent company filter

---
 .../components/customers/CustomersTable.vue   |  8 +++++
 .../distributors/DistributorsTable.vue        | 22 +++++++++++++-
 .../OrganizationDropdownFilter.vue            | 11 ++++++-
 .../components/resellers/ResellersTable.vue   | 30 ++++++++++++++++++-
 .../src/composables/useOrganizationFilter.ts  | 11 +++++--
 frontend/src/i18n/en/translation.json         |  5 +++-
 frontend/src/i18n/it/translation.json         |  7 +++--
 frontend/src/lib/organizations/customers.ts   | 10 +++++++
 frontend/src/lib/organizations/resellers.ts   | 10 +++++++
 .../lib/organizations/searchOrganizations.ts  | 12 +++++++-
 .../src/queries/organizations/customers.ts    | 18 ++++++++++-
 .../src/queries/organizations/resellers.ts    | 18 ++++++++++-
 frontend/src/views/CustomersView.vue          | 24 ++++++++++++++-
 frontend/src/views/DistributorDetailView.vue  | 18 +++++++++++
 frontend/src/views/ResellerDetailView.vue     | 18 +++++++++++
 frontend/src/views/ResellersView.vue          | 24 ++++++++++++++-
 16 files changed, 232 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/customers/CustomersTable.vue b/frontend/src/components/customers/CustomersTable.vue
index 084c4fbf9..c5f8036ed 100644
--- a/frontend/src/components/customers/CustomersTable.vue
+++ b/frontend/src/components/customers/CustomersTable.vue
@@ -54,6 +54,7 @@ import { useCustomers } from '@/queries/organizations/customers'
 import { canManageCustomers, canDestroyCustomers } from '@/lib/permissions'
 import router from '@/router'
 import UpdatingSpinner from '@/components/common/UpdatingSpinner.vue'
+import OrganizationDropdownFilter from '@/components/organizations/OrganizationDropdownFilter.vue'
 
 const { isShownCreateCustomerDrawer = false } = defineProps<{
   isShownCreateCustomerDrawer: boolean
@@ -70,6 +71,7 @@ const {
   textFilter,
   statusFilter,
   createdByFilter,
+  organizationFilter,
   sortBy,
   sortDescending,
   areDefaultFiltersApplied,
@@ -318,6 +320,12 @@ const goToCustomerDetails = (customer: Customer) => {
             :custom-action-label="t('ne_dropdown_filter.reset_selection')"
             @custom-action="resetStatusFilter"
           />
+          <!-- parent company filter: the reseller the customer belongs to -->
+          <OrganizationDropdownFilter
+            v-model="organizationFilter"
+            organization-type="reseller"
+            :label="t('organizations.parent_company')"
+          />
           <!-- created by filter -->
           <NeDropdownFilterV2
             v-model="createdByFilter"
diff --git a/frontend/src/components/distributors/DistributorsTable.vue b/frontend/src/components/distributors/DistributorsTable.vue
index 3b4e4707f..cdd8d8219 100644
--- a/frontend/src/components/distributors/DistributorsTable.vue
+++ b/frontend/src/components/distributors/DistributorsTable.vue
@@ -429,7 +429,27 @@ const goToDistributorDetails = (distributor: Distributor) => {
             {{ item.custom_data?.vat || '-' }}
           </NeTableCell>
           <NeTableCell :data-label="$t('resellers.title')">
-            <div class="flex items-center gap-2" :class="{ 'opacity-50': item.deleted_at }">
+            <!-- links to the Resellers page filtered by this distributor as parent company -->
+            <router-link
+              v-if="!item.deleted_at && item.resellers_count > 0"
+              :to="{
+                name: 'resellers',
+                query: {
+                  organization_id: item.logto_id,
+                  organization_name: item.name,
+                },
+              }"
+              class="flex items-center gap-2 hover:underline"
+              :aria-label="$t('distributors.show_distributor_resellers', { name: item.name })"
+            >
+              <FontAwesomeIcon
+                :icon="faCity"
+                class="size-4 text-gray-700 dark:text-gray-400"
+                aria-hidden="true"
+              />
+              {{ item.resellers_count }}
+            </router-link>
+            <div v-else class="flex items-center gap-2" :class="{ 'opacity-50': item.deleted_at }">
               <FontAwesomeIcon
                 :icon="faCity"
                 class="size-4 text-gray-700 dark:text-gray-400"
diff --git a/frontend/src/components/organizations/OrganizationDropdownFilter.vue b/frontend/src/components/organizations/OrganizationDropdownFilter.vue
index 435260289..631620787 100644
--- a/frontend/src/components/organizations/OrganizationDropdownFilter.vue
+++ b/frontend/src/components/organizations/OrganizationDropdownFilter.vue
@@ -14,10 +14,16 @@ const {
   modelValue,
   label,
   showNoCompanyOption = false,
+  organizationType,
 } = defineProps<{
   modelValue: NeDropdownFilterV2Option[]
   label?: string
   showNoCompanyOption?: boolean
+  /**
+   * Restricts the options to a single company type (distributor, reseller,
+   * customer). Omit to offer every company the user can see.
+   */
+  organizationType?: string
 }>()
 
 const emit = defineEmits<{
@@ -26,7 +32,10 @@ const emit = defineEmits<{
 
 const { t } = useI18n()
 const computedLabel = label ?? t('organizations.organization')
-const { options, loading, onSearch, currentSearch } = useOrganizationFilter()
+const { options, loading, onSearch, currentSearch } = useOrganizationFilter(
+  undefined,
+  () => organizationType,
+)
 
 const noCompanyLabel = computed(() => t('organizations.no_company'))
 
diff --git a/frontend/src/components/resellers/ResellersTable.vue b/frontend/src/components/resellers/ResellersTable.vue
index 468a0be84..ef3f3fe10 100644
--- a/frontend/src/components/resellers/ResellersTable.vue
+++ b/frontend/src/components/resellers/ResellersTable.vue
@@ -57,6 +57,7 @@ import { useResellers } from '@/queries/organizations/resellers'
 import { canManageResellers, canDestroyResellers, canPromoteOrganizations } from '@/lib/permissions'
 import router from '@/router'
 import UpdatingSpinner from '@/components/common/UpdatingSpinner.vue'
+import OrganizationDropdownFilter from '@/components/organizations/OrganizationDropdownFilter.vue'
 
 const { isShownCreateResellerDrawer = false } = defineProps<{
   isShownCreateResellerDrawer: boolean
@@ -73,6 +74,7 @@ const {
   textFilter,
   statusFilter,
   createdByFilter,
+  organizationFilter,
   sortBy,
   sortDescending,
   areDefaultFiltersApplied,
@@ -339,6 +341,12 @@ const goToResellerDetails = (reseller: Reseller) => {
             :options-filter-placeholder="t('ne_dropdown_filter.options_filter_placeholder')"
             @custom-action="resetStatusFilter"
           />
+          <!-- parent company filter: the distributor the reseller belongs to -->
+          <OrganizationDropdownFilter
+            v-model="organizationFilter"
+            organization-type="distributor"
+            :label="t('organizations.parent_company')"
+          />
           <!-- created by filter -->
           <NeDropdownFilterV2
             v-model="createdByFilter"
@@ -443,7 +451,27 @@ const goToResellerDetails = (reseller: Reseller) => {
             {{ item.custom_data?.vat || '-' }}
           </NeTableCell>
           <NeTableCell :data-label="$t('customers.title')">
-            <div class="flex items-center gap-2" :class="{ 'opacity-50': item.deleted_at }">
+            <!-- links to the Customers page filtered by this reseller as parent company -->
+            <router-link
+              v-if="!item.deleted_at && item.customers_count > 0"
+              :to="{
+                name: 'customers',
+                query: {
+                  organization_id: item.logto_id,
+                  organization_name: item.name,
+                },
+              }"
+              class="flex items-center gap-2 hover:underline"
+              :aria-label="$t('resellers.show_reseller_customers', { name: item.name })"
+            >
+              <FontAwesomeIcon
+                :icon="faBuilding"
+                class="size-4 text-gray-700 dark:text-gray-400"
+                aria-hidden="true"
+              />
+              {{ item.customers_count }}
+            </router-link>
+            <div v-else class="flex items-center gap-2" :class="{ 'opacity-50': item.deleted_at }">
               <FontAwesomeIcon
                 :icon="faBuilding"
                 class="size-4 text-gray-700 dark:text-gray-400"
diff --git a/frontend/src/composables/useOrganizationFilter.ts b/frontend/src/composables/useOrganizationFilter.ts
index 2fea26872..747cb5fd7 100644
--- a/frontend/src/composables/useOrganizationFilter.ts
+++ b/frontend/src/composables/useOrganizationFilter.ts
@@ -17,8 +17,13 @@ import { useI18n } from 'vue-i18n'
  *
  * @param enabled gates the underlying request; pass the field's visibility so
  *   the query doesn't fire while the host drawer is closed. Defaults to always on.
+ * @param type restricts the options to a single company type. It is part of the
+ *   query key, so a scoped caller never reads an unscoped result from the cache.
  */
-export function useOrganizationFilter(enabled?: MaybeRefOrGetter<boolean>) {
+export function useOrganizationFilter(
+  enabled?: MaybeRefOrGetter<boolean>,
+  type?: MaybeRefOrGetter<string | undefined>,
+) {
   const { t } = useI18n()
   const loginStore = useLoginStore()
   const searchInput = ref('')
@@ -32,9 +37,9 @@ export function useOrganizationFilter(enabled?: MaybeRefOrGetter<boolean>) {
   )
 
   const { state, asyncStatus } = useQuery({
-    key: () => [ORGANIZATIONS_SEARCH_KEY, debouncedSearch.value],
+    key: () => [ORGANIZATIONS_SEARCH_KEY, debouncedSearch.value, toValue(type) ?? ''],
     enabled: () => !!loginStore.jwtToken && toValue(enabled ?? true),
-    query: () => searchOrganizations(debouncedSearch.value),
+    query: () => searchOrganizations(debouncedSearch.value, toValue(type)),
   })
 
   const organizations = computed(() => state.value.data ?? [])
diff --git a/frontend/src/i18n/en/translation.json b/frontend/src/i18n/en/translation.json
index 98f343e20..e842d022a 100644
--- a/frontend/src/i18n/en/translation.json
+++ b/frontend/src/i18n/en/translation.json
@@ -123,7 +123,8 @@
     "total_customers": "Total customers",
     "import_distributors": "Import distributors",
     "distributors_imported": "Distributors imported",
-    "show_distributor_systems": "Show systems of {name} and its hierarchy"
+    "show_distributor_systems": "Show systems of {name} and its hierarchy",
+    "show_distributor_resellers": "Show resellers of {name}"
   },
   "distributor_detail": {
     "title": "Distributor detail",
@@ -162,6 +163,7 @@
     "import_resellers": "Import resellers",
     "resellers_imported": "Resellers imported",
     "show_reseller_systems": "Show systems of {name} and its hierarchy",
+    "show_reseller_customers": "Show customers of {name}",
     "reseller_promoted": "Reseller promoted",
     "reseller_promoted_successfully": "{name} is now a distributor",
     "promote_reseller": "Promote to distributor",
@@ -216,6 +218,7 @@
     "custom_data_email_invalid": "Invalid email address",
     "custom_data_phone_invalid_format": "Invalid phone number",
     "organization": "Company",
+    "parent_company": "Parent company",
     "no_company": "No company",
     "choose_organization": "Choose company",
     "no_organizations": "No companies",
diff --git a/frontend/src/i18n/it/translation.json b/frontend/src/i18n/it/translation.json
index 983e627a0..28f397459 100644
--- a/frontend/src/i18n/it/translation.json
+++ b/frontend/src/i18n/it/translation.json
@@ -122,7 +122,8 @@
     "total_customers": "Clienti totali",
     "import_distributors": "Importa distributori",
     "distributors_imported": "Distributori importati",
-    "show_distributor_systems": "Mostra i sistemi di {name} e della sua gerarchia"
+    "show_distributor_systems": "Mostra i sistemi di {name} e della sua gerarchia",
+    "show_distributor_resellers": "Mostra i rivenditori di {name}"
   },
   "distributor_detail": {
     "title": "Dettaglio distributore",
@@ -160,7 +161,8 @@
     "export_resellers_to_csv": "Esporta rivenditori in CSV",
     "import_resellers": "Importa rivenditori",
     "resellers_imported": "Rivenditori importati",
-    "show_reseller_systems": "Mostra i sistemi di {name} e della sua gerarchia"
+    "show_reseller_systems": "Mostra i sistemi di {name} e della sua gerarchia",
+    "show_reseller_customers": "Mostra i clienti di {name}"
   },
   "customers": {
     "title": "Clienti",
@@ -207,6 +209,7 @@
     "custom_data_email_invalid": "Indirizzo email non valido",
     "custom_data_phone_invalid_format": "Numero di telefono non valido",
     "organization": "Azienda",
+    "parent_company": "Azienda di appartenenza",
     "choose_organization": "Scegli azienda",
     "no_organizations": "Nessuna azienda",
     "email": "Email",
diff --git a/frontend/src/lib/organizations/customers.ts b/frontend/src/lib/organizations/customers.ts
index 85ba0ad32..3b8a6a885 100644
--- a/frontend/src/lib/organizations/customers.ts
+++ b/frontend/src/lib/organizations/customers.ts
@@ -92,6 +92,7 @@ export const getQueryStringParams = (
   textFilter: string | null,
   statusFilter: CustomerStatus[],
   createdByFilter: string[],
+  organizationFilter: string[],
   sortBy: string | null,
   sortDescending: boolean,
 ) => {
@@ -114,6 +115,13 @@ export const getQueryStringParams = (
     searchParams.append('created_by', userId)
   })
 
+  // Parent company filter: matched exactly against the customer's owning
+  // organization. include_hierarchy is deliberately not sent, so selecting a
+  // reseller never pulls in the customers of its descendants.
+  organizationFilter.forEach((organizationId) => {
+    searchParams.append('organization_id', organizationId)
+  })
+
   return searchParams.toString()
 }
 
@@ -123,6 +131,7 @@ export const getCustomers = (
   textFilter: string,
   statusFilter: CustomerStatus[],
   createdByFilter: string[],
+  organizationFilter: string[],
   sortBy: string,
   sortDescending: boolean,
 ) => {
@@ -133,6 +142,7 @@ export const getCustomers = (
     textFilter,
     statusFilter,
     createdByFilter,
+    organizationFilter,
     sortBy,
     sortDescending,
   )
diff --git a/frontend/src/lib/organizations/resellers.ts b/frontend/src/lib/organizations/resellers.ts
index ea2be05f2..87a44f414 100644
--- a/frontend/src/lib/organizations/resellers.ts
+++ b/frontend/src/lib/organizations/resellers.ts
@@ -92,6 +92,7 @@ export const getQueryStringParams = (
   textFilter: string | null,
   statusFilter: ResellerStatus[],
   createdByFilter: string[],
+  organizationFilter: string[],
   sortBy: string | null,
   sortDescending: boolean,
 ) => {
@@ -114,6 +115,13 @@ export const getQueryStringParams = (
     searchParams.append('created_by', userId)
   })
 
+  // Parent company filter: matched exactly against the reseller's owning
+  // organization. include_hierarchy is deliberately not sent, so selecting a
+  // distributor never pulls in the resellers of its descendants.
+  organizationFilter.forEach((organizationId) => {
+    searchParams.append('organization_id', organizationId)
+  })
+
   return searchParams.toString()
 }
 
@@ -123,6 +131,7 @@ export const getResellers = (
   textFilter: string,
   statusFilter: ResellerStatus[],
   createdByFilter: string[],
+  organizationFilter: string[],
   sortBy: string,
   sortDescending: boolean,
 ) => {
@@ -133,6 +142,7 @@ export const getResellers = (
     textFilter,
     statusFilter,
     createdByFilter,
+    organizationFilter,
     sortBy,
     sortDescending,
   )
diff --git a/frontend/src/lib/organizations/searchOrganizations.ts b/frontend/src/lib/organizations/searchOrganizations.ts
index f30f345d5..957442487 100644
--- a/frontend/src/lib/organizations/searchOrganizations.ts
+++ b/frontend/src/lib/organizations/searchOrganizations.ts
@@ -23,7 +23,13 @@ interface OrganizationsSearchResponse {
   }
 }
 
-export const searchOrganizations = (search: string) => {
+/**
+ * @param type restricts the results to a single company type (distributor,
+ *   reseller, customer). Scoping server-side keeps the paginated option list
+ *   meaningful: filtering by type on the client would drop entries from an
+ *   already-truncated page.
+ */
+export const searchOrganizations = (search: string, type?: string) => {
   const loginStore = useLoginStore()
   const params = new URLSearchParams({
     page: '1',
@@ -34,6 +40,10 @@ export const searchOrganizations = (search: string) => {
     params.append('search', search)
   }
 
+  if (type) {
+    params.append('type', type)
+  }
+
   return axios
     .get<OrganizationsSearchResponse>(`${API_URL}/organizations?${params}`, {
       headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
diff --git a/frontend/src/queries/organizations/customers.ts b/frontend/src/queries/organizations/customers.ts
index 76ba01de3..84471e059 100644
--- a/frontend/src/queries/organizations/customers.ts
+++ b/frontend/src/queries/organizations/customers.ts
@@ -27,6 +27,8 @@ export const useCustomers = defineQuery(() => {
     { id: 'suspended', label: 'suspended' },
   ])
   const createdByFilter = ref<NeDropdownFilterV2Option[]>([])
+  // parent company: the reseller or distributor the customer belongs to
+  const organizationFilter = ref<NeDropdownFilterV2Option[]>([])
   const sortBy = ref<keyof Customer>('name')
   const sortDescending = ref(false)
 
@@ -39,6 +41,7 @@ export const useCustomers = defineQuery(() => {
         textFilter: debouncedTextFilter.value,
         statusFilter: statusFilter.value.map((o) => o.id),
         createdByFilter: createdByFilter.value.map((o) => o.id),
+        organizationFilter: organizationFilter.value.map((o) => o.id),
         sortBy: sortBy.value,
         sortDirection: sortDescending.value,
       },
@@ -51,6 +54,7 @@ export const useCustomers = defineQuery(() => {
         debouncedTextFilter.value,
         statusFilter.value.map((o) => o.id) as CustomerStatus[],
         createdByFilter.value.map((o) => o.id),
+        organizationFilter.value.map((o) => o.id),
         sortBy.value,
         sortDescending.value,
       ),
@@ -63,7 +67,8 @@ export const useCustomers = defineQuery(() => {
       statusFilter.value.some((o) => o.id === 'enabled') &&
       statusFilter.value.some((o) => o.id === 'suspended') &&
       !statusFilter.value.some((o) => o.id === 'deleted') &&
-      createdByFilter.value.length === 0
+      createdByFilter.value.length === 0 &&
+      organizationFilter.value.length === 0
     )
   })
 
@@ -116,9 +121,19 @@ export const useCustomers = defineQuery(() => {
     { deep: true },
   )
 
+  // reset to first page when parent company filter changes
+  watch(
+    () => organizationFilter.value,
+    () => {
+      pageNum.value = 1
+    },
+    { deep: true },
+  )
+
   const resetFilters = () => {
     textFilter.value = ''
     createdByFilter.value = []
+    organizationFilter.value = []
     resetStatusFilter()
   }
 
@@ -139,6 +154,7 @@ export const useCustomers = defineQuery(() => {
     debouncedTextFilter,
     statusFilter,
     createdByFilter,
+    organizationFilter,
     sortBy,
     sortDescending,
     areDefaultFiltersApplied,
diff --git a/frontend/src/queries/organizations/resellers.ts b/frontend/src/queries/organizations/resellers.ts
index 366197fa4..ac60b5e5b 100644
--- a/frontend/src/queries/organizations/resellers.ts
+++ b/frontend/src/queries/organizations/resellers.ts
@@ -27,6 +27,8 @@ export const useResellers = defineQuery(() => {
     { id: 'suspended', label: 'suspended' },
   ])
   const createdByFilter = ref<NeDropdownFilterV2Option[]>([])
+  // parent company: the distributor the reseller belongs to
+  const organizationFilter = ref<NeDropdownFilterV2Option[]>([])
   const sortBy = ref<keyof Reseller>('name')
   const sortDescending = ref(false)
 
@@ -39,6 +41,7 @@ export const useResellers = defineQuery(() => {
         textFilter: debouncedTextFilter.value,
         statusFilter: statusFilter.value.map((o) => o.id),
         createdByFilter: createdByFilter.value.map((o) => o.id),
+        organizationFilter: organizationFilter.value.map((o) => o.id),
         sortBy: sortBy.value,
         sortDirection: sortDescending.value,
       },
@@ -51,6 +54,7 @@ export const useResellers = defineQuery(() => {
         debouncedTextFilter.value,
         statusFilter.value.map((o) => o.id) as ResellerStatus[],
         createdByFilter.value.map((o) => o.id),
+        organizationFilter.value.map((o) => o.id),
         sortBy.value,
         sortDescending.value,
       ),
@@ -63,7 +67,8 @@ export const useResellers = defineQuery(() => {
       statusFilter.value.some((o) => o.id === 'enabled') &&
       statusFilter.value.some((o) => o.id === 'suspended') &&
       !statusFilter.value.some((o) => o.id === 'deleted') &&
-      createdByFilter.value.length === 0
+      createdByFilter.value.length === 0 &&
+      organizationFilter.value.length === 0
     )
   })
 
@@ -117,6 +122,15 @@ export const useResellers = defineQuery(() => {
     { deep: true },
   )
 
+  // reset to first page when parent company filter changes
+  watch(
+    () => organizationFilter.value,
+    () => {
+      pageNum.value = 1
+    },
+    { deep: true },
+  )
+
   // reset to first page when sorting changes
   watch(
     () => [sortBy.value, sortDescending.value],
@@ -128,6 +142,7 @@ export const useResellers = defineQuery(() => {
   const resetFilters = () => {
     textFilter.value = ''
     createdByFilter.value = []
+    organizationFilter.value = []
     resetStatusFilter()
   }
 
@@ -148,6 +163,7 @@ export const useResellers = defineQuery(() => {
     debouncedTextFilter,
     statusFilter,
     createdByFilter,
+    organizationFilter,
     sortBy,
     sortDescending,
     areDefaultFiltersApplied,
diff --git a/frontend/src/views/CustomersView.vue b/frontend/src/views/CustomersView.vue
index 45f0f0b54..39f08091a 100644
--- a/frontend/src/views/CustomersView.vue
+++ b/frontend/src/views/CustomersView.vue
@@ -29,9 +29,31 @@ import {
   type CustomerStatus,
 } from '@/lib/organizations/customers'
 import { downloadFile } from '@/lib/common'
+import { useRoute, useRouter } from 'vue-router'
 
 const { t } = useI18n()
-const { state, debouncedTextFilter, statusFilter, sortBy, sortDescending } = useCustomers()
+const route = useRoute()
+const router = useRouter()
+const {
+  state,
+  debouncedTextFilter,
+  statusFilter,
+  organizationFilter,
+  sortBy,
+  sortDescending,
+  resetFilters,
+} = useCustomers()
+
+// apply the parent company filter requested via query params, then clean the URL
+const { organization_id: orgId, organization_name: orgName } = route.query
+
+if (typeof orgId === 'string' && orgId && typeof orgName === 'string' && orgName) {
+  resetFilters()
+  // the filter renders the label carried by the selection: pass the organization
+  // name, as it may not be among the options the dropdown has loaded
+  organizationFilter.value = [{ id: orgId, label: orgName }]
+  router.replace({ query: {} })
+}
 
 const isShownCreateCustomerDrawer = ref(false)
 const isShownImportCustomersModal = ref(false)
diff --git a/frontend/src/views/DistributorDetailView.vue b/frontend/src/views/DistributorDetailView.vue
index 66288acb1..7055754da 100644
--- a/frontend/src/views/DistributorDetailView.vue
+++ b/frontend/src/views/DistributorDetailView.vue
@@ -24,6 +24,23 @@ const { state: distributorStats } = useDistributorStats()
 const { state: distributorSystems } = useDistributorSystems()
 const { state: applicationsSummary } = useApplicationsSummaryByCompany()
 
+// link to the Resellers page filtered by this distributor as parent company.
+// No include_hierarchy: the parent company filter matches exactly, so only the
+// resellers this distributor owns are listed.
+const resellersRoute = computed(() => {
+  if (!distributorDetail.value.data || !distributorStats.value.data?.resellers_count) {
+    return undefined
+  }
+
+  return {
+    name: 'resellers',
+    query: {
+      organization_id: distributorDetail.value.data.logto_id,
+      organization_name: distributorDetail.value.data.name,
+    },
+  }
+})
+
 // link to the Systems page filtered by the whole distributor hierarchy
 const hierarchySystemsRoute = computed(() => {
   if (!distributorDetail.value.data || !distributorStats.value.data?.systems_hierarchy_count) {
@@ -72,6 +89,7 @@ const hierarchySystemsRoute = computed(() => {
         :counter="distributorStats.data?.resellers_count ?? 0"
         :icon="faCity"
         :loading="distributorStats.status === 'pending'"
+        :to="resellersRoute"
       />
       <!-- total systems -->
       <CounterCard
diff --git a/frontend/src/views/ResellerDetailView.vue b/frontend/src/views/ResellerDetailView.vue
index 0776c1e65..f1671ae5d 100644
--- a/frontend/src/views/ResellerDetailView.vue
+++ b/frontend/src/views/ResellerDetailView.vue
@@ -24,6 +24,23 @@ const { state: resellerStats } = useResellerStats()
 const { state: resellerSystems } = useResellerSystems()
 const { state: applicationsSummary } = useApplicationsSummaryByCompany()
 
+// link to the Customers page filtered by this reseller as parent company.
+// No include_hierarchy: the parent company filter matches exactly, so only the
+// customers this reseller owns are listed.
+const customersRoute = computed(() => {
+  if (!resellerDetail.value.data || !resellerStats.value.data?.customers_count) {
+    return undefined
+  }
+
+  return {
+    name: 'customers',
+    query: {
+      organization_id: resellerDetail.value.data.logto_id,
+      organization_name: resellerDetail.value.data.name,
+    },
+  }
+})
+
 // link to the Systems page filtered by the whole reseller hierarchy
 const hierarchySystemsRoute = computed(() => {
   if (!resellerDetail.value.data || !resellerStats.value.data?.systems_hierarchy_count) {
@@ -72,6 +89,7 @@ const hierarchySystemsRoute = computed(() => {
         :counter="resellerStats.data?.customers_count ?? 0"
         :icon="faBuilding"
         :loading="resellerStats.status === 'pending'"
+        :to="customersRoute"
       />
       <!-- total systems -->
       <CounterCard
diff --git a/frontend/src/views/ResellersView.vue b/frontend/src/views/ResellersView.vue
index 9b9dfe063..3973a2f31 100644
--- a/frontend/src/views/ResellersView.vue
+++ b/frontend/src/views/ResellersView.vue
@@ -29,9 +29,31 @@ import {
   type ResellerStatus,
 } from '@/lib/organizations/resellers'
 import { downloadFile } from '@/lib/common'
+import { useRoute, useRouter } from 'vue-router'
 
 const { t } = useI18n()
-const { state, debouncedTextFilter, statusFilter, sortBy, sortDescending } = useResellers()
+const route = useRoute()
+const router = useRouter()
+const {
+  state,
+  debouncedTextFilter,
+  statusFilter,
+  organizationFilter,
+  sortBy,
+  sortDescending,
+  resetFilters,
+} = useResellers()
+
+// apply the parent company filter requested via query params, then clean the URL
+const { organization_id: orgId, organization_name: orgName } = route.query
+
+if (typeof orgId === 'string' && orgId && typeof orgName === 'string' && orgName) {
+  resetFilters()
+  // the filter renders the label carried by the selection: pass the organization
+  // name, as it may not be among the options the dropdown has loaded
+  organizationFilter.value = [{ id: orgId, label: orgName }]
+  router.replace({ query: {} })
+}
 
 const isShownCreateResellerDrawer = ref(false)
 const isShownImportResellersModal = ref(false)

From a08c570a763ca439308fb30d04a91099c183a8e8 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andrea.leardini@nethesis.it>
Date: Mon, 3 Aug 2026 10:28:53 +0200
Subject: [PATCH 06/13] fix(ui): show promotion info in distributor detail

---
 .../distributors/DistributorInfoCard.vue      | 39 ++++++++++++++++++-
 frontend/src/components/shell/TopBar.vue      |  4 +-
 frontend/src/i18n/en/translation.json         |  6 ++-
 frontend/src/i18n/it/translation.json         |  2 +
 .../src/lib/organizations/distributors.ts     | 20 ++++++++++
 5 files changed, 66 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/distributors/DistributorInfoCard.vue b/frontend/src/components/distributors/DistributorInfoCard.vue
index 16bd1cb93..5abea158e 100644
--- a/frontend/src/components/distributors/DistributorInfoCard.vue
+++ b/frontend/src/components/distributors/DistributorInfoCard.vue
@@ -10,6 +10,7 @@ import {
   NeHeading,
   NeLink,
   NeSkeleton,
+  NeTooltip,
   type NeDropdownItem,
 } from '@nethesis/vue-components'
 import { useDistributorDetail } from '@/queries/organizations/distributorDetail'
@@ -32,8 +33,10 @@ import SuspendDistributorModal from './SuspendDistributorModal.vue'
 import ReactivateDistributorModal from './ReactivateDistributorModal.vue'
 import { getLanguageLabel } from '@/lib/locale'
 import { formatPhoneForDisplay } from '@/lib/phone'
+import UserAvatar from '../users/UserAvatar.vue'
+import { formatDateTimeNoSeconds } from '@/lib/dateTime'
 
-const { t } = useI18n()
+const { t, locale } = useI18n()
 const { state: distributorDetail, asyncStatus } = useDistributorDetail()
 const isNotesModalShown = ref(false)
 const isShownCreateOrEditDistributorDrawer = ref(false)
@@ -215,6 +218,40 @@ function getKebabMenuItems() {
             }}
           </template>
         </DataItem>
+        <!-- promoted to distributor -->
+        <DataItem v-if="distributorDetail.data.promoted_from">
+          <template #label>
+            {{ $t('organizations.promoted_to_distributor') }}
+          </template>
+          <template #data>
+            <div class="flex items-center gap-2">
+              <NeTooltip
+                v-if="distributorDetail.data.promoted_from.by"
+                trigger-event="mouseenter focus"
+                placement="top"
+              >
+                <template #trigger>
+                  <UserAvatar
+                    size="xs"
+                    :is-owner="distributorDetail.data.promoted_from.by.username === 'owner'"
+                    :name="distributorDetail.data.promoted_from.by.name"
+                    :logto-id="distributorDetail.data.promoted_from.by.user_id"
+                  />
+                </template>
+                <template #content>
+                  {{
+                    $t('organizations.promoted_by_name', {
+                      name: distributorDetail.data.promoted_from.by.name,
+                    })
+                  }}
+                </template>
+              </NeTooltip>
+              {{
+                formatDateTimeNoSeconds(new Date(distributorDetail.data.promoted_from.at), locale)
+              }}
+            </div>
+          </template>
+        </DataItem>
         <!-- notes -->
         <div v-if="distributorDetail.data.custom_data.notes">
           <div class="py-4 font-medium">
diff --git a/frontend/src/components/shell/TopBar.vue b/frontend/src/components/shell/TopBar.vue
index 3a5f5eddb..0c2a97591 100644
--- a/frontend/src/components/shell/TopBar.vue
+++ b/frontend/src/components/shell/TopBar.vue
@@ -15,7 +15,7 @@ import {
   faCircleQuestion,
   faCircleUser,
   faMoon,
-  faRightFromBracket,
+  faArrowRightFromBracket,
   faSun,
 } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
@@ -50,7 +50,7 @@ const accountMenuOptions = computed(() => {
     {
       id: 'logout',
       label: t('shell.sign_out'),
-      icon: faRightFromBracket,
+      icon: faArrowRightFromBracket,
       action: () => loginStore.logout(),
       disabled: loginStore.isImpersonating,
     },
diff --git a/frontend/src/i18n/en/translation.json b/frontend/src/i18n/en/translation.json
index e842d022a..844f3b098 100644
--- a/frontend/src/i18n/en/translation.json
+++ b/frontend/src/i18n/en/translation.json
@@ -168,7 +168,7 @@
     "reseller_promoted_successfully": "{name} is now a distributor",
     "promote_reseller": "Promote to distributor",
     "cannot_promote_reseller": "Cannot promote reseller",
-    "promote_reseller_confirmation": "Are you sure you want to promote {name} to distributor? It keeps its customers, users and systems, but the distributor that manages it today loses access to them. This action cannot be undone."
+    "promote_reseller_confirmation": "Reseller {name} will be promoted to distributor. It will keep its own customers, users, and systems, but its current distributor will lose access to them."
   },
   "customers": {
     "title": "Customers",
@@ -244,7 +244,9 @@
     "restore_organization_confirmation": "Are you sure you want to restore {name}?",
     "promote_organization_is_suspended": "This company is suspended. Reactivate it before promoting it.",
     "promote_organization_not_synced": "This company is not synchronised with the identity provider yet. Try again later.",
-    "promote_owner_organization_not_found": "The owner company could not be determined, so the promoted company cannot be attached to it."
+    "promote_owner_organization_not_found": "The owner company could not be determined, so the promoted company cannot be attached to it.",
+    "promoted_to_distributor": "Promoted to distributor",
+    "promoted_by_name": "Promoted by {name}"
   },
   "import": {
     "download_the_template": "Download the template",
diff --git a/frontend/src/i18n/it/translation.json b/frontend/src/i18n/it/translation.json
index 28f397459..3724136ea 100644
--- a/frontend/src/i18n/it/translation.json
+++ b/frontend/src/i18n/it/translation.json
@@ -232,6 +232,8 @@
     "organization_restored": "Azienda ripristinata",
     "organization_restored_successfully": "{name} ripristinata con successo",
     "restore_organization_confirmation": "Sei sicuro di voler ripristinare {name}?",
+    "promoted_to_distributor": "Promosso a distributore",
+    "promoted_by_name": "Promosso da {name}",
     "no_company": "Nessuna azienda",
     "distributors_lc": "distributore | distributori",
     "resellers_lc": "rivenditore | rivenditori",
diff --git a/frontend/src/lib/organizations/distributors.ts b/frontend/src/lib/organizations/distributors.ts
index bee37e074..1568f65ef 100644
--- a/frontend/src/lib/organizations/distributors.ts
+++ b/frontend/src/lib/organizations/distributors.ts
@@ -72,6 +72,26 @@ export const DistributorSchema = v.object({
       on_behalf_of: v.optional(v.boolean()),
     }),
   ),
+  // Set only when the distributor was promoted up from a lower level (e.g. a
+  // reseller promoted to distributor). Absent for distributors created as such.
+  promoted_from: v.optional(
+    v.object({
+      level: v.string(),
+      at: v.string(),
+      detached_from_organization_id: v.optional(v.string()),
+      by: v.optional(
+        v.object({
+          user_id: v.string(),
+          username: v.string(),
+          name: v.string(),
+          email: v.string(),
+          organization_id: v.string(),
+          organization_name: v.string(),
+          on_behalf_of: v.optional(v.boolean()),
+        }),
+      ),
+    }),
+  ),
 })
 
 export type CreateDistributor = v.InferOutput<typeof CreateDistributorSchema>

From e50266776078a8a968e1d19db20abb44cd9a3d6c Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andrea.leardini@nethesis.it>
Date: Mon, 3 Aug 2026 12:58:46 +0200
Subject: [PATCH 07/13] fix(ui): improve page breadcrumb

---
 .../src/components/common/PageBreadcrumb.vue  | 53 +++++++++++++++++++
 frontend/src/i18n/en/translation.json         |  1 +
 frontend/src/views/ApplicationDetailView.vue  | 20 ++++---
 frontend/src/views/CustomerDetailView.vue     | 19 +++----
 frontend/src/views/DistributorDetailView.vue  | 20 ++++---
 frontend/src/views/ResellerDetailView.vue     | 20 ++++---
 frontend/src/views/SystemDetailView.vue       | 28 ++++------
 7 files changed, 100 insertions(+), 61 deletions(-)
 create mode 100644 frontend/src/components/common/PageBreadcrumb.vue

diff --git a/frontend/src/components/common/PageBreadcrumb.vue b/frontend/src/components/common/PageBreadcrumb.vue
new file mode 100644
index 000000000..e7e7b8969
--- /dev/null
+++ b/frontend/src/components/common/PageBreadcrumb.vue
@@ -0,0 +1,53 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { NeSkeleton } from '@nethesis/vue-components'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faAngleRight } from '@fortawesome/free-solid-svg-icons'
+import { RouterLink, type RouteLocationRaw } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+const {
+  section,
+  to = undefined,
+  current = undefined,
+  loading = false,
+} = defineProps<{
+  // title of the list page this detail page belongs to
+  section: string
+  // omit when the user cannot read the list page: the section renders as plain text
+  to?: RouteLocationRaw
+  // name of the entity shown by the detail page
+  current?: string
+  loading?: boolean
+}>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <nav :aria-label="t('common.breadcrumb')" class="mb-7">
+    <ol class="flex items-center gap-2 text-sm">
+      <li>
+        <RouterLink v-if="to" :to="to" class="hover:underline">
+          {{ section }}
+        </RouterLink>
+        <span v-else>
+          {{ section }}
+        </span>
+      </li>
+      <li aria-hidden="true" class="text-tertiary-neutral dark:text-tertiary-neutral flex">
+        <FontAwesomeIcon :icon="faAngleRight" class="size-3" />
+      </li>
+      <li aria-current="page" class="text-tertiary-neutral dark:text-tertiary-neutral">
+        <NeSkeleton v-if="loading" size="sm" class="w-32" />
+        <template v-else>
+          {{ current || '-' }}
+        </template>
+      </li>
+    </ol>
+  </nav>
+</template>
diff --git a/frontend/src/i18n/en/translation.json b/frontend/src/i18n/en/translation.json
index 844f3b098..ecaf89610 100644
--- a/frontend/src/i18n/en/translation.json
+++ b/frontend/src/i18n/en/translation.json
@@ -2,6 +2,7 @@
   "common": {
     "access_denied": "Access denied",
     "this_section_is_accessible_only_by_owner": "This section is accessible only by the owner organization.",
+    "breadcrumb": "Breadcrumb",
     "save": "Save",
     "cancel": "Cancel",
     "search": "Search",
diff --git a/frontend/src/views/ApplicationDetailView.vue b/frontend/src/views/ApplicationDetailView.vue
index 4d6b90105..161166cec 100644
--- a/frontend/src/views/ApplicationDetailView.vue
+++ b/frontend/src/views/ApplicationDetailView.vue
@@ -4,13 +4,13 @@
 -->
 
 <script setup lang="ts">
-import { NeButton, NeHeading, NeInlineNotification, NeSkeleton } from '@nethesis/vue-components'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faArrowLeft } from '@fortawesome/free-solid-svg-icons'
+import { NeHeading, NeInlineNotification, NeSkeleton } from '@nethesis/vue-components'
+import PageBreadcrumb from '@/components/common/PageBreadcrumb.vue'
 import { useApplicationDetail } from '@/queries/applications/applicationDetail'
 import ApplicationInfoCard from '@/components/applications/ApplicationInfoCard.vue'
 import ApplicationSystemCard from '@/components/applications/ApplicationSystemCard.vue'
 import { getDisplayName } from '@/lib/applications/applications'
+import { canReadApplications } from '@/lib/permissions'
 import { computed } from 'vue'
 
 const { state: applicationDetail } = useApplicationDetail()
@@ -25,14 +25,12 @@ const applicationName = computed(() => {
 
 <template>
   <div>
-    <router-link to="/applications">
-      <NeButton kind="tertiary" size="sm" class="mb-4 -ml-2">
-        <template #prefix>
-          <FontAwesomeIcon :icon="faArrowLeft" />
-        </template>
-        {{ $t('applications.title') }}
-      </NeButton>
-    </router-link>
+    <PageBreadcrumb
+      :section="$t('applications.title')"
+      :to="canReadApplications() ? '/applications' : undefined"
+      :current="applicationName"
+      :loading="applicationDetail.status === 'pending'"
+    />
     <NeInlineNotification
       v-if="applicationDetail.status === 'error'"
       kind="error"
diff --git a/frontend/src/views/CustomerDetailView.vue b/frontend/src/views/CustomerDetailView.vue
index 629971925..2f2099f52 100644
--- a/frontend/src/views/CustomerDetailView.vue
+++ b/frontend/src/views/CustomerDetailView.vue
@@ -4,9 +4,8 @@
 -->
 
 <script setup lang="ts">
-import { NeButton, NeHeading, NeInlineNotification, NeSkeleton } from '@nethesis/vue-components'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faArrowLeft } from '@fortawesome/free-solid-svg-icons'
+import { NeHeading, NeInlineNotification, NeSkeleton } from '@nethesis/vue-components'
+import PageBreadcrumb from '@/components/common/PageBreadcrumb.vue'
 import { useCustomerDetail } from '@/queries/organizations/customerDetail'
 import CustomerInfoCard from '@/components/customers/CustomerInfoCard.vue'
 import { useCustomerStats } from '@/queries/organizations/customerStats'
@@ -22,14 +21,12 @@ const { state: customerSystems } = useCustomerSystems()
 
 <template>
   <div>
-    <router-link v-if="canReadCustomers()" to="/customers">
-      <NeButton kind="tertiary" size="sm" class="mb-4 -ml-2">
-        <template #prefix>
-          <FontAwesomeIcon :icon="faArrowLeft" />
-        </template>
-        {{ $t('customers.title') }}
-      </NeButton>
-    </router-link>
+    <PageBreadcrumb
+      :section="$t('customers.title')"
+      :to="canReadCustomers() ? '/customers' : undefined"
+      :current="customerDetail.data?.name"
+      :loading="customerDetail.status === 'pending'"
+    />
     <!-- get customer detail error notification -->
     <NeInlineNotification
       v-if="customerDetail.status === 'error'"
diff --git a/frontend/src/views/DistributorDetailView.vue b/frontend/src/views/DistributorDetailView.vue
index 7055754da..7fcac4899 100644
--- a/frontend/src/views/DistributorDetailView.vue
+++ b/frontend/src/views/DistributorDetailView.vue
@@ -4,9 +4,9 @@
 -->
 
 <script setup lang="ts">
-import { NeButton, NeHeading, NeInlineNotification, NeSkeleton } from '@nethesis/vue-components'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faArrowLeft, faCity, faServer } from '@fortawesome/free-solid-svg-icons'
+import { NeHeading, NeInlineNotification, NeSkeleton } from '@nethesis/vue-components'
+import { faCity, faServer } from '@fortawesome/free-solid-svg-icons'
+import PageBreadcrumb from '@/components/common/PageBreadcrumb.vue'
 import { useDistributorDetail } from '@/queries/organizations/distributorDetail'
 import DistributorInfoCard from '@/components/distributors/DistributorInfoCard.vue'
 import CounterCard from '@/components/common/CounterCard.vue'
@@ -60,14 +60,12 @@ const hierarchySystemsRoute = computed(() => {
 
 <template>
   <div>
-    <router-link v-if="canReadDistributors()" to="/distributors">
-      <NeButton kind="tertiary" size="sm" class="mb-4 -ml-2">
-        <template #prefix>
-          <FontAwesomeIcon :icon="faArrowLeft" />
-        </template>
-        {{ $t('distributors.title') }}
-      </NeButton>
-    </router-link>
+    <PageBreadcrumb
+      :section="$t('distributors.title')"
+      :to="canReadDistributors() ? '/distributors' : undefined"
+      :current="distributorDetail.data?.name"
+      :loading="distributorDetail.status === 'pending'"
+    />
     <!-- get distributor detail error notification -->
     <NeInlineNotification
       v-if="distributorDetail.status === 'error'"
diff --git a/frontend/src/views/ResellerDetailView.vue b/frontend/src/views/ResellerDetailView.vue
index f1671ae5d..d9c348859 100644
--- a/frontend/src/views/ResellerDetailView.vue
+++ b/frontend/src/views/ResellerDetailView.vue
@@ -4,9 +4,9 @@
 -->
 
 <script setup lang="ts">
-import { NeButton, NeHeading, NeInlineNotification, NeSkeleton } from '@nethesis/vue-components'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faArrowLeft, faServer, faBuilding } from '@fortawesome/free-solid-svg-icons'
+import { NeHeading, NeInlineNotification, NeSkeleton } from '@nethesis/vue-components'
+import { faServer, faBuilding } from '@fortawesome/free-solid-svg-icons'
+import PageBreadcrumb from '@/components/common/PageBreadcrumb.vue'
 import { useResellerDetail } from '@/queries/organizations/resellerDetail'
 import ResellerInfoCard from '@/components/resellers/ResellerInfoCard.vue'
 import CounterCard from '@/components/common/CounterCard.vue'
@@ -60,14 +60,12 @@ const hierarchySystemsRoute = computed(() => {
 
 <template>
   <div>
-    <router-link v-if="canReadResellers()" to="/resellers">
-      <NeButton kind="tertiary" size="sm" class="mb-4 -ml-2">
-        <template #prefix>
-          <FontAwesomeIcon :icon="faArrowLeft" />
-        </template>
-        {{ $t('resellers.title') }}
-      </NeButton>
-    </router-link>
+    <PageBreadcrumb
+      :section="$t('resellers.title')"
+      :to="canReadResellers() ? '/resellers' : undefined"
+      :current="resellerDetail.data?.name"
+      :loading="resellerDetail.status === 'pending'"
+    />
     <!-- get reseller detail error notification -->
     <NeInlineNotification
       v-if="resellerDetail.status === 'error'"
diff --git a/frontend/src/views/SystemDetailView.vue b/frontend/src/views/SystemDetailView.vue
index 3eecac59a..9f3524f6f 100644
--- a/frontend/src/views/SystemDetailView.vue
+++ b/frontend/src/views/SystemDetailView.vue
@@ -4,15 +4,11 @@
 -->
 
 <script setup lang="ts">
-import {
-  NeButton,
-  NeHeading,
-  NeInlineNotification,
-  NeSkeleton,
-  NeTabs,
-} from '@nethesis/vue-components'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { faArrowLeft /*, faArrowUpRightFromSquare*/ } from '@fortawesome/free-solid-svg-icons'
+import { NeHeading, NeInlineNotification, NeSkeleton, NeTabs } from '@nethesis/vue-components'
+/*//// import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons' */
+import PageBreadcrumb from '@/components/common/PageBreadcrumb.vue'
+import { canReadSystems } from '@/lib/permissions'
 import { useSystemDetail } from '@/queries/systems/systemDetail'
 import { useTabs } from '@/composables/useTabs'
 import { useI18n } from 'vue-i18n'
@@ -50,14 +46,12 @@ const { tabs, selectedTab } = useTabs([
 
 <template>
   <div>
-    <router-link to="/systems">
-      <NeButton kind="tertiary" size="sm" class="mb-4 -ml-2">
-        <template #prefix>
-          <FontAwesomeIcon :icon="faArrowLeft" />
-        </template>
-        {{ $t('systems.title') }}
-      </NeButton>
-    </router-link>
+    <PageBreadcrumb
+      :section="$t('systems.title')"
+      :to="canReadSystems() ? '/systems' : undefined"
+      :current="systemDetail.data?.name"
+      :loading="systemDetail.status === 'pending'"
+    />
     <!-- get system detail error notification -->
     <NeInlineNotification
       v-if="systemDetail.status === 'error'"

From a3722d97239b606afbb54e9cf24ace623841a302 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andrea.leardini@nethesis.it>
Date: Mon, 3 Aug 2026 15:06:27 +0200
Subject: [PATCH 08/13] chore(ui): bump @nethesis/vue-components

---
 frontend/package-lock.json | 38 ++++++--------------------------------
 frontend/package.json      |  2 +-
 2 files changed, 7 insertions(+), 33 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index abe5ae7eb..f04b7ddca 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "my-nethesis-ui",
-  "version": "0.7.9",
+  "version": "0.7.10",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "my-nethesis-ui",
-      "version": "0.7.9",
+      "version": "0.7.10",
       "dependencies": {
         "@fontsource/poppins": "^5.2.6",
         "@fortawesome/fontawesome-svg-core": "^6.7.2",
@@ -16,7 +16,7 @@
         "@logto/vue": "^3.0.8",
         "@nethesis/nethesis-light-svg-icons": "github:nethesis/Font-Awesome#ns-light",
         "@nethesis/nethesis-solid-svg-icons": "github:nethesis/Font-Awesome#ns-solid",
-        "@nethesis/vue-components": "^3.11.0",
+        "@nethesis/vue-components": "^3.12.1",
         "@pinia/colada": "^1.3.1",
         "@pinia/colada-plugin-auto-refetch": "^0.2.6",
         "@tailwindcss/vite": "^4.1.10",
@@ -1665,9 +1665,9 @@
       }
     },
     "node_modules/@nethesis/vue-components": {
-      "version": "3.11.0",
-      "resolved": "https://registry.npmjs.org/@nethesis/vue-components/-/vue-components-3.11.0.tgz",
-      "integrity": "sha512-hthf4Zc0mTDH4CJNZ0eINPzt1AYXxFzEAuLAZDXH2LH43hFHa80w2Pv2FedTBOj1oSBpLZrMezfZH0esO9epow==",
+      "version": "3.12.1",
+      "resolved": "https://registry.npmjs.org/@nethesis/vue-components/-/vue-components-3.12.1.tgz",
+      "integrity": "sha512-tkAOFUdkiKnKpk1y5u8NZ4LoE8btep1ZGhw+ZWB02Pn2yj3ehgPfF/Y2fsXXmAJhnrJqWdymF6mE39wMrbxpWQ==",
       "dependencies": {
         "@fontsource/poppins": "^5.2.6",
         "@fortawesome/fontawesome-svg-core": "^6.5.1",
@@ -1680,7 +1680,6 @@
         "date-fns": "^2.30.0",
         "date-fns-tz": "^2.0.0",
         "lodash-es": "^4.17.21",
-        "uuid": "^11.0.0",
         "vue": "^3.5.12",
         "vue-tippy": "^6.3.1"
       }
@@ -2428,9 +2427,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2447,9 +2443,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2466,9 +2459,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2485,9 +2475,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -7801,19 +7788,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/uuid": {
-      "version": "14.0.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-14.0.0.tgz",
-      "integrity": "sha512-Qo+uWgilfSmAhXCMav1uYFynlQO7fMFiMVZsQqZRMIXp0O7rR7qjkj+cPvBHLgBqi960QCoo/PH2/6ZtVqKvrg==",
-      "funding": [
-        "https://github.com/sponsors/broofa",
-        "https://github.com/sponsors/ctavan"
-      ],
-      "license": "MIT",
-      "bin": {
-        "uuid": "dist-node/bin/uuid"
-      }
-    },
     "node_modules/valibot": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/valibot/-/valibot-1.4.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 49e26edd9..690f67d34 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -26,7 +26,7 @@
     "@logto/vue": "^3.0.8",
     "@nethesis/nethesis-light-svg-icons": "github:nethesis/Font-Awesome#ns-light",
     "@nethesis/nethesis-solid-svg-icons": "github:nethesis/Font-Awesome#ns-solid",
-    "@nethesis/vue-components": "^3.11.0",
+    "@nethesis/vue-components": "^3.12.1",
     "@pinia/colada": "^1.3.1",
     "@pinia/colada-plugin-auto-refetch": "^0.2.6",
     "@tailwindcss/vite": "^4.1.10",

From b4db5a00dcf9d11ce5f2e12409c58a6a50f9432c Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andrea.leardini@nethesis.it>
Date: Mon, 3 Aug 2026 16:08:27 +0200
Subject: [PATCH 09/13] fix(ui): add missing counter links

---
 .../applications/ApplicationsTable.vue        | 13 +++++++
 .../components/customers/CustomersTable.vue   | 17 +++++++--
 .../distributors/DistributorsTable.vue        | 31 +++++++++++++---
 .../OrganizationApplicationsCard.vue          |  1 +
 .../organizations/OrganizationSystemsCard.vue |  1 +
 .../components/resellers/ResellersTable.vue   |  8 ++---
 frontend/src/i18n/en/translation.json         | 13 +++++--
 frontend/src/lib/applications/applications.ts |  7 ++++
 frontend/src/lib/organizations/customers.ts   | 12 +++++--
 .../src/queries/applications/applications.ts  | 36 +++++++++++++++++--
 .../src/queries/organizations/customers.ts    | 36 ++++++++++++++++---
 frontend/src/views/ApplicationsView.vue       | 22 ++++++++++--
 frontend/src/views/CustomersView.vue          | 19 +++++++---
 frontend/src/views/DistributorDetailView.vue  | 21 +++++++++--
 frontend/src/views/ResellerDetailView.vue     | 21 +++++++++--
 15 files changed, 224 insertions(+), 34 deletions(-)

diff --git a/frontend/src/components/applications/ApplicationsTable.vue b/frontend/src/components/applications/ApplicationsTable.vue
index 701938553..e837dd41c 100644
--- a/frontend/src/components/applications/ApplicationsTable.vue
+++ b/frontend/src/components/applications/ApplicationsTable.vue
@@ -62,6 +62,7 @@ const {
   versionFilter,
   systemFilter,
   organizationFilter,
+  includeHierarchy,
   sortBy,
   sortDescending,
   clearFilters,
@@ -199,6 +200,18 @@ const goToApplicationDetails = (application: Application) => {
       :description="state.error.message"
       class="mb-6"
     />
+    <!-- company hierarchy filter notification -->
+    <NeInlineNotification
+      v-if="includeHierarchy && organizationFilter.length === 1"
+      kind="info"
+      :title="$t('applications.hierarchy_filter_title')"
+      :description="
+        $t('applications.hierarchy_filter_description', { name: organizationFilter[0].label })
+      "
+      :secondary-button-label="$t('applications.hierarchy_filter_exact')"
+      class="mb-6"
+      @secondary-click="includeHierarchy = false"
+    />
     <!-- empty state -->
     <NeEmptyState
       v-if="isNoDataEmptyStateShown"
diff --git a/frontend/src/components/customers/CustomersTable.vue b/frontend/src/components/customers/CustomersTable.vue
index c5f8036ed..7bca88adf 100644
--- a/frontend/src/components/customers/CustomersTable.vue
+++ b/frontend/src/components/customers/CustomersTable.vue
@@ -72,6 +72,7 @@ const {
   statusFilter,
   createdByFilter,
   organizationFilter,
+  includeHierarchy,
   sortBy,
   sortDescending,
   areDefaultFiltersApplied,
@@ -291,6 +292,18 @@ const goToCustomerDetails = (customer: Customer) => {
       :description="state.error.message"
       class="mb-6"
     />
+    <!-- company hierarchy filter notification -->
+    <NeInlineNotification
+      v-if="includeHierarchy && organizationFilter.length === 1"
+      kind="info"
+      :title="$t('customers.hierarchy_filter_title')"
+      :description="
+        $t('customers.hierarchy_filter_description', { name: organizationFilter[0].label })
+      "
+      :secondary-button-label="$t('customers.hierarchy_filter_exact')"
+      class="mb-6"
+      @secondary-click="includeHierarchy = false"
+    />
     <!-- table toolbar -->
     <div class="mb-6 flex items-center gap-4">
       <div class="flex w-full items-end justify-between gap-4">
@@ -430,7 +443,7 @@ const goToCustomerDetails = (customer: Customer) => {
           </NeTableCell>
           <NeTableCell :data-label="$t('systems.title')">
             <router-link
-              v-if="!item.deleted_at && item.systems_count > 0"
+              v-if="!item.deleted_at"
               :to="{
                 name: 'systems',
                 query: { organization_id: item.logto_id, organization_name: item.name },
@@ -445,7 +458,7 @@ const goToCustomerDetails = (customer: Customer) => {
               />
               {{ item.systems_count }}
             </router-link>
-            <div v-else class="flex items-center gap-2">
+            <div v-else class="flex items-center gap-2 opacity-50">
               <FontAwesomeIcon
                 :icon="faServer"
                 class="size-4 text-gray-700 dark:text-gray-400"
diff --git a/frontend/src/components/distributors/DistributorsTable.vue b/frontend/src/components/distributors/DistributorsTable.vue
index cdd8d8219..d0a272516 100644
--- a/frontend/src/components/distributors/DistributorsTable.vue
+++ b/frontend/src/components/distributors/DistributorsTable.vue
@@ -431,7 +431,7 @@ const goToDistributorDetails = (distributor: Distributor) => {
           <NeTableCell :data-label="$t('resellers.title')">
             <!-- links to the Resellers page filtered by this distributor as parent company -->
             <router-link
-              v-if="!item.deleted_at && item.resellers_count > 0"
+              v-if="!item.deleted_at"
               :to="{
                 name: 'resellers',
                 query: {
@@ -449,7 +449,7 @@ const goToDistributorDetails = (distributor: Distributor) => {
               />
               {{ item.resellers_count }}
             </router-link>
-            <div v-else class="flex items-center gap-2" :class="{ 'opacity-50': item.deleted_at }">
+            <div v-else class="flex items-center gap-2 opacity-50">
               <FontAwesomeIcon
                 :icon="faCity"
                 class="size-4 text-gray-700 dark:text-gray-400"
@@ -459,7 +459,28 @@ const goToDistributorDetails = (distributor: Distributor) => {
             </div>
           </NeTableCell>
           <NeTableCell :data-label="$t('distributors.total_customers')">
-            <div class="flex items-center gap-2" :class="{ 'opacity-50': item.deleted_at }">
+            <!-- links to the Customers page filtered by the whole distributor hierarchy -->
+            <router-link
+              v-if="!item.deleted_at"
+              :to="{
+                name: 'customers',
+                query: {
+                  organization_id: item.logto_id,
+                  organization_name: item.name,
+                  include_hierarchy: 'true',
+                },
+              }"
+              class="flex items-center gap-2 hover:underline"
+              :aria-label="$t('distributors.show_distributor_customers', { name: item.name })"
+            >
+              <FontAwesomeIcon
+                :icon="faBuilding"
+                class="size-4 text-gray-700 dark:text-gray-400"
+                aria-hidden="true"
+              />
+              {{ item.customers_count }}
+            </router-link>
+            <div v-else class="flex items-center gap-2 opacity-50">
               <FontAwesomeIcon
                 :icon="faBuilding"
                 class="size-4 text-gray-700 dark:text-gray-400"
@@ -470,7 +491,7 @@ const goToDistributorDetails = (distributor: Distributor) => {
           </NeTableCell>
           <NeTableCell :data-label="$t('systems.total_systems')">
             <router-link
-              v-if="!item.deleted_at && item.systems_count > 0"
+              v-if="!item.deleted_at"
               :to="{
                 name: 'systems',
                 query: {
@@ -489,7 +510,7 @@ const goToDistributorDetails = (distributor: Distributor) => {
               />
               {{ item.systems_count }}
             </router-link>
-            <div v-else class="flex items-center gap-2" :class="{ 'opacity-50': item.deleted_at }">
+            <div v-else class="flex items-center gap-2 opacity-50">
               <FontAwesomeIcon
                 :icon="faServer"
                 class="size-4 text-gray-700 dark:text-gray-400"
diff --git a/frontend/src/components/organizations/OrganizationApplicationsCard.vue b/frontend/src/components/organizations/OrganizationApplicationsCard.vue
index 3d9159381..b52361ce4 100644
--- a/frontend/src/components/organizations/OrganizationApplicationsCard.vue
+++ b/frontend/src/components/organizations/OrganizationApplicationsCard.vue
@@ -65,6 +65,7 @@ const goToApplications = () => {
     :icon="faGridOne"
     :loading="applicationsSummary.status === 'pending'"
     :centeredCounter="!applicationsCount"
+    @counter-click="goToApplications"
   >
     <div class="divide-y divide-gray-200 dark:divide-gray-700">
       <div
diff --git a/frontend/src/components/organizations/OrganizationSystemsCard.vue b/frontend/src/components/organizations/OrganizationSystemsCard.vue
index 93c106f2c..8fc9c1c58 100644
--- a/frontend/src/components/organizations/OrganizationSystemsCard.vue
+++ b/frontend/src/components/organizations/OrganizationSystemsCard.vue
@@ -65,6 +65,7 @@ const goToSystems = () => {
     :icon="faServer"
     :loading="statsStatus === 'pending' || systemsStatus === 'pending'"
     :centeredCounter="!systemsCount"
+    @counter-click="goToSystems"
   >
     <div class="divide-y divide-gray-200 dark:divide-gray-700">
       <div
diff --git a/frontend/src/components/resellers/ResellersTable.vue b/frontend/src/components/resellers/ResellersTable.vue
index ef3f3fe10..2aed81fa7 100644
--- a/frontend/src/components/resellers/ResellersTable.vue
+++ b/frontend/src/components/resellers/ResellersTable.vue
@@ -453,7 +453,7 @@ const goToResellerDetails = (reseller: Reseller) => {
           <NeTableCell :data-label="$t('customers.title')">
             <!-- links to the Customers page filtered by this reseller as parent company -->
             <router-link
-              v-if="!item.deleted_at && item.customers_count > 0"
+              v-if="!item.deleted_at"
               :to="{
                 name: 'customers',
                 query: {
@@ -471,7 +471,7 @@ const goToResellerDetails = (reseller: Reseller) => {
               />
               {{ item.customers_count }}
             </router-link>
-            <div v-else class="flex items-center gap-2" :class="{ 'opacity-50': item.deleted_at }">
+            <div v-else class="flex items-center gap-2 opacity-50">
               <FontAwesomeIcon
                 :icon="faBuilding"
                 class="size-4 text-gray-700 dark:text-gray-400"
@@ -482,7 +482,7 @@ const goToResellerDetails = (reseller: Reseller) => {
           </NeTableCell>
           <NeTableCell :data-label="$t('systems.total_systems')">
             <router-link
-              v-if="!item.deleted_at && item.systems_count > 0"
+              v-if="!item.deleted_at"
               :to="{
                 name: 'systems',
                 query: {
@@ -501,7 +501,7 @@ const goToResellerDetails = (reseller: Reseller) => {
               />
               {{ item.systems_count }}
             </router-link>
-            <div v-else class="flex items-center gap-2" :class="{ 'opacity-50': item.deleted_at }">
+            <div v-else class="flex items-center gap-2 opacity-50">
               <FontAwesomeIcon
                 :icon="faServer"
                 class="size-4 text-gray-700 dark:text-gray-400"
diff --git a/frontend/src/i18n/en/translation.json b/frontend/src/i18n/en/translation.json
index ecaf89610..48af2bf90 100644
--- a/frontend/src/i18n/en/translation.json
+++ b/frontend/src/i18n/en/translation.json
@@ -125,7 +125,8 @@
     "import_distributors": "Import distributors",
     "distributors_imported": "Distributors imported",
     "show_distributor_systems": "Show systems of {name} and its hierarchy",
-    "show_distributor_resellers": "Show resellers of {name}"
+    "show_distributor_resellers": "Show resellers of {name}",
+    "show_distributor_customers": "Show customers of {name} and its hierarchy"
   },
   "distributor_detail": {
     "title": "Distributor detail",
@@ -195,7 +196,10 @@
     "export_customers_to_pdf": "Export customers to PDF",
     "export_customers_to_csv": "Export customers to CSV",
     "import_customers": "Import customers",
-    "customers_imported": "Customers imported"
+    "customers_imported": "Customers imported",
+    "hierarchy_filter_title": "Filtering by company hierarchy",
+    "hierarchy_filter_description": "Showing customers of {name} and of all companies in its hierarchy. Changing the Parent company filter will remove this hierarchy filtering.",
+    "hierarchy_filter_exact": "Filter by this company only"
   },
   "organizations": {
     "name": "Company name",
@@ -809,7 +813,10 @@
     "cannot_set_notes": "Cannot set application notes",
     "total_applications": "Total applications",
     "organization_applications": "Company applications",
-    "system_applications": "System applications"
+    "system_applications": "System applications",
+    "hierarchy_filter_title": "Filtering by company hierarchy",
+    "hierarchy_filter_description": "Showing applications of {name} and of all companies in its hierarchy. Changing the Company filter will remove this hierarchy filtering.",
+    "hierarchy_filter_exact": "Filter by this company only"
   },
   "forbidden": {
     "title": "Restricted page",
diff --git a/frontend/src/lib/applications/applications.ts b/frontend/src/lib/applications/applications.ts
index 907fc4347..76058d8ae 100644
--- a/frontend/src/lib/applications/applications.ts
+++ b/frontend/src/lib/applications/applications.ts
@@ -83,6 +83,7 @@ export const getQueryStringParams = (
   versionFilter: string[],
   systemFilter: string[],
   organizationFilter: string[],
+  includeHierarchy: boolean,
   sortBy: string | null,
   sortDescending: boolean,
 ) => {
@@ -112,6 +113,10 @@ export const getQueryStringParams = (
   organizationFilter.forEach((orgId) => {
     searchParams.append('organization_id', orgId)
   })
+
+  if (includeHierarchy) {
+    searchParams.append('include_hierarchy', 'true')
+  }
   return searchParams.toString()
 }
 
@@ -147,6 +152,7 @@ export const getApplications = (
   versionFilter: string[],
   systemFilter: string[],
   organizationFilter: string[],
+  includeHierarchy: boolean,
   sortBy: string,
   sortDescending: boolean,
 ) => {
@@ -159,6 +165,7 @@ export const getApplications = (
     versionFilter,
     systemFilter,
     organizationFilter,
+    includeHierarchy,
     sortBy,
     sortDescending,
   )
diff --git a/frontend/src/lib/organizations/customers.ts b/frontend/src/lib/organizations/customers.ts
index 3b8a6a885..8708a1062 100644
--- a/frontend/src/lib/organizations/customers.ts
+++ b/frontend/src/lib/organizations/customers.ts
@@ -93,6 +93,7 @@ export const getQueryStringParams = (
   statusFilter: CustomerStatus[],
   createdByFilter: string[],
   organizationFilter: string[],
+  includeHierarchy: boolean,
   sortBy: string | null,
   sortDescending: boolean,
 ) => {
@@ -116,12 +117,17 @@ export const getQueryStringParams = (
   })
 
   // Parent company filter: matched exactly against the customer's owning
-  // organization. include_hierarchy is deliberately not sent, so selecting a
-  // reseller never pulls in the customers of its descendants.
+  // organization, so selecting a reseller in the dropdown never pulls in the
+  // customers of its descendants. include_hierarchy widens it to the whole
+  // subtree, and only the explicit hierarchy entry points set that flag.
   organizationFilter.forEach((organizationId) => {
     searchParams.append('organization_id', organizationId)
   })
 
+  if (includeHierarchy) {
+    searchParams.append('include_hierarchy', 'true')
+  }
+
   return searchParams.toString()
 }
 
@@ -132,6 +138,7 @@ export const getCustomers = (
   statusFilter: CustomerStatus[],
   createdByFilter: string[],
   organizationFilter: string[],
+  includeHierarchy: boolean,
   sortBy: string,
   sortDescending: boolean,
 ) => {
@@ -143,6 +150,7 @@ export const getCustomers = (
     statusFilter,
     createdByFilter,
     organizationFilter,
+    includeHierarchy,
     sortBy,
     sortDescending,
   )
diff --git a/frontend/src/queries/applications/applications.ts b/frontend/src/queries/applications/applications.ts
index 8c020c782..a4f34784d 100644
--- a/frontend/src/queries/applications/applications.ts
+++ b/frontend/src/queries/applications/applications.ts
@@ -25,6 +25,10 @@ export const useApplications = defineQuery(() => {
   const versionFilter = ref<NeDropdownFilterV2Option[]>([])
   const systemFilter = ref<NeDropdownFilterV2Option[]>([])
   const organizationFilter = ref<NeDropdownFilterV2Option[]>([])
+  // when true, the applications of every company in the hierarchy of the
+  // selected organization are shown (organizationFilter holds that single
+  // organization)
+  const includeHierarchy = ref(false)
   const sortBy = ref<keyof Application>('display_name')
   const sortDescending = ref(false)
 
@@ -39,6 +43,7 @@ export const useApplications = defineQuery(() => {
         versionFilter: versionFilter.value.map((o) => o.id),
         systemFilter: systemFilter.value.map((o) => o.id),
         organizationFilter: organizationFilter.value.map((o) => o.id),
+        includeHierarchy: includeHierarchy.value,
         sortBy: sortBy.value,
         sortDirection: sortDescending.value,
       },
@@ -53,6 +58,7 @@ export const useApplications = defineQuery(() => {
         versionFilter.value.map((o) => o.id),
         systemFilter.value.map((o) => o.id),
         organizationFilter.value.map((o) => o.id),
+        includeHierarchy.value,
         sortBy.value,
         sortDescending.value,
       ),
@@ -114,20 +120,42 @@ export const useApplications = defineQuery(() => {
     },
   )
 
-  // reset to first page when organization filter changes
+  // the organization hierarchy mode is scoped to; lets us tell a genuine user
+  // change apart from OrganizationDropdownFilter re-emitting the same selection
+  // as a fresh array on mount (which must not exit hierarchy mode)
+  const hierarchyOrgId = ref<string | null>(null)
+
+  // watch the selected org ids by value (not the array reference): reset to the
+  // first page when the selection changes, and exit hierarchy mode whenever the
+  // selection moves away from the single organization it was applied to
   watch(
-    () => organizationFilter.value,
-    () => {
+    () => organizationFilter.value.map((o) => o.id).join(','),
+    (ids) => {
       pageNum.value = 1
+
+      if (includeHierarchy.value && ids !== (hierarchyOrgId.value ?? '')) {
+        includeHierarchy.value = false
+        hierarchyOrgId.value = null
+      }
     },
   )
 
+  // filter applications by the given organization and every company in its hierarchy
+  const applyHierarchyFilter = (organization: NeDropdownFilterV2Option) => {
+    clearFilters()
+    organizationFilter.value = [organization]
+    includeHierarchy.value = true
+    hierarchyOrgId.value = organization.id
+  }
+
   const clearFilters = () => {
     textFilter.value = ''
     typeFilter.value = []
     versionFilter.value = []
     systemFilter.value = []
     organizationFilter.value = []
+    includeHierarchy.value = false
+    hierarchyOrgId.value = null
   }
 
   return {
@@ -141,9 +169,11 @@ export const useApplications = defineQuery(() => {
     versionFilter,
     systemFilter,
     organizationFilter,
+    includeHierarchy,
     debouncedTextFilter,
     sortBy,
     sortDescending,
+    applyHierarchyFilter,
     clearFilters,
   }
 })
diff --git a/frontend/src/queries/organizations/customers.ts b/frontend/src/queries/organizations/customers.ts
index 84471e059..3c25b3b2e 100644
--- a/frontend/src/queries/organizations/customers.ts
+++ b/frontend/src/queries/organizations/customers.ts
@@ -29,6 +29,9 @@ export const useCustomers = defineQuery(() => {
   const createdByFilter = ref<NeDropdownFilterV2Option[]>([])
   // parent company: the reseller or distributor the customer belongs to
   const organizationFilter = ref<NeDropdownFilterV2Option[]>([])
+  // when true, the customers of every company in the hierarchy of the selected
+  // organization are shown (organizationFilter holds that single organization)
+  const includeHierarchy = ref(false)
   const sortBy = ref<keyof Customer>('name')
   const sortDescending = ref(false)
 
@@ -42,6 +45,7 @@ export const useCustomers = defineQuery(() => {
         statusFilter: statusFilter.value.map((o) => o.id),
         createdByFilter: createdByFilter.value.map((o) => o.id),
         organizationFilter: organizationFilter.value.map((o) => o.id),
+        includeHierarchy: includeHierarchy.value,
         sortBy: sortBy.value,
         sortDirection: sortDescending.value,
       },
@@ -55,6 +59,7 @@ export const useCustomers = defineQuery(() => {
         statusFilter.value.map((o) => o.id) as CustomerStatus[],
         createdByFilter.value.map((o) => o.id),
         organizationFilter.value.map((o) => o.id),
+        includeHierarchy.value,
         sortBy.value,
         sortDescending.value,
       ),
@@ -121,19 +126,40 @@ export const useCustomers = defineQuery(() => {
     { deep: true },
   )
 
-  // reset to first page when parent company filter changes
+  // the organization hierarchy mode is scoped to; lets us tell a genuine user
+  // change apart from OrganizationDropdownFilter re-emitting the same selection
+  // as a fresh array on mount (which must not exit hierarchy mode)
+  const hierarchyOrgId = ref<string | null>(null)
+
+  // watch the selected org ids by value (not the array reference): reset to the
+  // first page when the parent company selection changes, and exit hierarchy
+  // mode whenever the selection moves away from the organization it was applied to
   watch(
-    () => organizationFilter.value,
-    () => {
+    () => organizationFilter.value.map((o) => o.id).join(','),
+    (ids) => {
       pageNum.value = 1
+
+      if (includeHierarchy.value && ids !== (hierarchyOrgId.value ?? '')) {
+        includeHierarchy.value = false
+        hierarchyOrgId.value = null
+      }
     },
-    { deep: true },
   )
 
+  // filter customers by the given organization and every company in its hierarchy
+  const applyHierarchyFilter = (organization: NeDropdownFilterV2Option) => {
+    resetFilters()
+    organizationFilter.value = [organization]
+    includeHierarchy.value = true
+    hierarchyOrgId.value = organization.id
+  }
+
   const resetFilters = () => {
     textFilter.value = ''
     createdByFilter.value = []
     organizationFilter.value = []
+    includeHierarchy.value = false
+    hierarchyOrgId.value = null
     resetStatusFilter()
   }
 
@@ -155,9 +181,11 @@ export const useCustomers = defineQuery(() => {
     statusFilter,
     createdByFilter,
     organizationFilter,
+    includeHierarchy,
     sortBy,
     sortDescending,
     areDefaultFiltersApplied,
+    applyHierarchyFilter,
     resetFilters,
     resetStatusFilter,
   }
diff --git a/frontend/src/views/ApplicationsView.vue b/frontend/src/views/ApplicationsView.vue
index bd0e06bb1..4f1318c26 100644
--- a/frontend/src/views/ApplicationsView.vue
+++ b/frontend/src/views/ApplicationsView.vue
@@ -24,7 +24,7 @@ const loginStore = useLoginStore()
 
 const { state: applicationsTotal } = useApplicationsTotal()
 
-const { organizationFilter } = useApplications()
+const { organizationFilter, applyHierarchyFilter, clearFilters } = useApplications()
 
 const justHiddenUnassignedAppsNotification = ref(false)
 
@@ -49,12 +49,30 @@ const showUnassignedApps = () => {
   organizationFilter.value = [{ id: 'no_org', label: t('organizations.no_company') }]
 }
 
-// apply the unassigned filter requested via query params, then clean the URL
+// apply the filters requested via query params, then clean the URL
 if (route.query.unassigned === 'true') {
   showUnassignedApps()
   router.replace({ query: {} })
 }
 
+const {
+  organization_id: orgId,
+  organization_name: orgName,
+  include_hierarchy: includeHierarchyParam,
+} = route.query
+
+if (typeof orgId === 'string' && orgId && typeof orgName === 'string' && orgName) {
+  if (includeHierarchyParam === 'true') {
+    applyHierarchyFilter({ id: orgId, label: orgName })
+  } else {
+    clearFilters()
+    // the filter renders the label carried by the selection: pass the organization
+    // name, as it may not be among the options the dropdown has loaded
+    organizationFilter.value = [{ id: orgId, label: orgName }]
+  }
+  router.replace({ query: {} })
+}
+
 const dontShowUnassignedAppsNotificationAgain = () => {
   saveShowUnassignedAppsNotificationToStorage(false)
   justHiddenUnassignedAppsNotification.value = true
diff --git a/frontend/src/views/CustomersView.vue b/frontend/src/views/CustomersView.vue
index 39f08091a..5b8abe7cf 100644
--- a/frontend/src/views/CustomersView.vue
+++ b/frontend/src/views/CustomersView.vue
@@ -41,17 +41,26 @@ const {
   organizationFilter,
   sortBy,
   sortDescending,
+  applyHierarchyFilter,
   resetFilters,
 } = useCustomers()
 
 // apply the parent company filter requested via query params, then clean the URL
-const { organization_id: orgId, organization_name: orgName } = route.query
+const {
+  organization_id: orgId,
+  organization_name: orgName,
+  include_hierarchy: includeHierarchyParam,
+} = route.query
 
 if (typeof orgId === 'string' && orgId && typeof orgName === 'string' && orgName) {
-  resetFilters()
-  // the filter renders the label carried by the selection: pass the organization
-  // name, as it may not be among the options the dropdown has loaded
-  organizationFilter.value = [{ id: orgId, label: orgName }]
+  if (includeHierarchyParam === 'true') {
+    applyHierarchyFilter({ id: orgId, label: orgName })
+  } else {
+    resetFilters()
+    // the filter renders the label carried by the selection: pass the organization
+    // name, as it may not be among the options the dropdown has loaded
+    organizationFilter.value = [{ id: orgId, label: orgName }]
+  }
   router.replace({ query: {} })
 }
 
diff --git a/frontend/src/views/DistributorDetailView.vue b/frontend/src/views/DistributorDetailView.vue
index 7fcac4899..315e84528 100644
--- a/frontend/src/views/DistributorDetailView.vue
+++ b/frontend/src/views/DistributorDetailView.vue
@@ -28,7 +28,7 @@ const { state: applicationsSummary } = useApplicationsSummaryByCompany()
 // No include_hierarchy: the parent company filter matches exactly, so only the
 // resellers this distributor owns are listed.
 const resellersRoute = computed(() => {
-  if (!distributorDetail.value.data || !distributorStats.value.data?.resellers_count) {
+  if (!distributorDetail.value.data) {
     return undefined
   }
 
@@ -43,7 +43,7 @@ const resellersRoute = computed(() => {
 
 // link to the Systems page filtered by the whole distributor hierarchy
 const hierarchySystemsRoute = computed(() => {
-  if (!distributorDetail.value.data || !distributorStats.value.data?.systems_hierarchy_count) {
+  if (!distributorDetail.value.data) {
     return undefined
   }
 
@@ -56,6 +56,22 @@ const hierarchySystemsRoute = computed(() => {
     },
   }
 })
+
+// link to the Applications page filtered by the whole distributor hierarchy
+const hierarchyApplicationsRoute = computed(() => {
+  if (!distributorDetail.value.data) {
+    return undefined
+  }
+
+  return {
+    name: 'applications',
+    query: {
+      organization_id: distributorDetail.value.data.logto_id,
+      organization_name: distributorDetail.value.data.name,
+      include_hierarchy: 'true',
+    },
+  }
+})
 </script>
 
 <template>
@@ -103,6 +119,7 @@ const hierarchySystemsRoute = computed(() => {
         :counter="distributorStats.data?.applications_hierarchy_count ?? 0"
         :icon="faGridOne"
         :loading="distributorStats.status === 'pending'"
+        :to="hierarchyApplicationsRoute"
       />
       <!-- organization systems -->
       <OrganizationSystemsCard
diff --git a/frontend/src/views/ResellerDetailView.vue b/frontend/src/views/ResellerDetailView.vue
index d9c348859..c19516ff4 100644
--- a/frontend/src/views/ResellerDetailView.vue
+++ b/frontend/src/views/ResellerDetailView.vue
@@ -28,7 +28,7 @@ const { state: applicationsSummary } = useApplicationsSummaryByCompany()
 // No include_hierarchy: the parent company filter matches exactly, so only the
 // customers this reseller owns are listed.
 const customersRoute = computed(() => {
-  if (!resellerDetail.value.data || !resellerStats.value.data?.customers_count) {
+  if (!resellerDetail.value.data) {
     return undefined
   }
 
@@ -43,7 +43,7 @@ const customersRoute = computed(() => {
 
 // link to the Systems page filtered by the whole reseller hierarchy
 const hierarchySystemsRoute = computed(() => {
-  if (!resellerDetail.value.data || !resellerStats.value.data?.systems_hierarchy_count) {
+  if (!resellerDetail.value.data) {
     return undefined
   }
 
@@ -56,6 +56,22 @@ const hierarchySystemsRoute = computed(() => {
     },
   }
 })
+
+// link to the Applications page filtered by the whole reseller hierarchy
+const hierarchyApplicationsRoute = computed(() => {
+  if (!resellerDetail.value.data) {
+    return undefined
+  }
+
+  return {
+    name: 'applications',
+    query: {
+      organization_id: resellerDetail.value.data.logto_id,
+      organization_name: resellerDetail.value.data.name,
+      include_hierarchy: 'true',
+    },
+  }
+})
 </script>
 
 <template>
@@ -103,6 +119,7 @@ const hierarchySystemsRoute = computed(() => {
         :counter="resellerStats.data?.applications_hierarchy_count ?? 0"
         :icon="faGridOne"
         :loading="resellerStats.status === 'pending'"
+        :to="hierarchyApplicationsRoute"
       />
       <!-- organization systems -->
       <OrganizationSystemsCard

From 2c78fb8830c865d3935500b8df224d726dca01bc Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andrea.leardini@nethesis.it>
Date: Mon, 3 Aug 2026 16:31:05 +0200
Subject: [PATCH 10/13] fix(ui): delete dateTime fns present in vue-components

---
 .../account/apiKeys/ApiKeysPanel.vue          |   7 +-
 .../impersonation/ImpersonationPanel.vue      |   9 +-
 .../account/impersonation/SessionModal.vue    |   4 +-
 .../account/impersonation/SessionsTable.vue   |   3 +-
 .../components/alerts/AlertDetailsDrawer.vue  |   2 +-
 .../components/alerts/AlertEventsTimeline.vue |   5 +-
 .../src/components/alerts/AlertsTable.vue     |   5 +-
 .../distributors/DistributorInfoCard.vue      |   2 +-
 .../shell/ImpersonationConsentBadge.vue       |   3 +-
 .../systems/SystemActiveAlertsTable.vue       |   5 +-
 .../components/systems/SystemBackupsPanel.vue |   2 +-
 .../systems/SystemChangesTimeline.vue         |   7 +-
 .../systems/SystemHistoryAlertsTable.vue      |   8 +-
 .../src/components/systems/SystemInfoCard.vue |   2 +-
 .../components/systems/SystemStatusCard.vue   |  10 +-
 .../systems/SystemSubscriptionCard.vue        |   2 +-
 .../src/components/systems/SystemsTable.vue   |   6 +-
 frontend/src/lib/alerts.test.ts               |   2 +-
 frontend/src/lib/dateTime.test.ts             | 216 +-----------------
 frontend/src/lib/dateTime.ts                  |  68 +-----
 frontend/src/views/DashboardView.vue          |   6 +-
 21 files changed, 53 insertions(+), 321 deletions(-)

diff --git a/frontend/src/components/account/apiKeys/ApiKeysPanel.vue b/frontend/src/components/account/apiKeys/ApiKeysPanel.vue
index 5f1255ab4..ead059c9d 100644
--- a/frontend/src/components/account/apiKeys/ApiKeysPanel.vue
+++ b/frontend/src/components/account/apiKeys/ApiKeysPanel.vue
@@ -19,6 +19,8 @@ import {
   NeTextInput,
   NeSortDropdown,
   type SortEvent,
+  formatDateTimeNoSeconds,
+  formatRelativeTime,
 } from '@nethesis/vue-components'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import {
@@ -37,7 +39,6 @@ import { useLoginStore } from '@/stores/login'
 import { useNotificationsStore } from '@/stores/notifications'
 import { useApiKeys } from '@/queries/apiKeys'
 import { API_KEYS_KEY, API_KEYS_TABLE_ID, deleteApiKey, type ApiKey } from '@/lib/apiKeys'
-import { formatDateTimeNoSeconds, formatRelativeTime } from '@/lib/dateTime'
 import {
   DEFAULT_PAGE_SIZE,
   PAGE_SIZE_OPTIONS,
@@ -339,7 +340,7 @@ function confirmDelete() {
             </NeTableCell>
             <NeTableCell :data-label="$t('account.api_keys.last_used')">
               <div v-if="key.last_used_at" class="flex flex-col">
-                <span>{{ formatRelativeTime(key.last_used_at, locale) }}</span>
+                <span>{{ formatRelativeTime(new Date(key.last_used_at), locale) }}</span>
                 <span class="text-tertiary-neutral">
                   {{ formatDateTimeNoSeconds(new Date(key.last_used_at), locale) }}
                 </span>
@@ -348,7 +349,7 @@ function confirmDelete() {
             </NeTableCell>
             <NeTableCell :data-label="$t('account.api_keys.expires')">
               <div class="flex flex-col">
-                <span>{{ formatRelativeTime(key.expires_at, locale) }}</span>
+                <span>{{ formatRelativeTime(new Date(key.expires_at), locale) }}</span>
                 <span class="text-tertiary-neutral">
                   {{ formatDateTimeNoSeconds(new Date(key.expires_at), locale) }}
                 </span>
diff --git a/frontend/src/components/account/impersonation/ImpersonationPanel.vue b/frontend/src/components/account/impersonation/ImpersonationPanel.vue
index 706efa360..5d40cfd73 100644
--- a/frontend/src/components/account/impersonation/ImpersonationPanel.vue
+++ b/frontend/src/components/account/impersonation/ImpersonationPanel.vue
@@ -6,7 +6,13 @@
 <script lang="ts" setup>
 import { useLoginStore } from '@/stores/login'
 import { useNotificationsStore } from '@/stores/notifications'
-import { NeButton, NeHeading, NeInlineNotification, NeSkeleton } from '@nethesis/vue-components'
+import {
+  NeButton,
+  NeHeading,
+  NeInlineNotification,
+  NeSkeleton,
+  formatDateTimeNoSeconds,
+} from '@nethesis/vue-components'
 import { useMutation, useQueryCache } from '@pinia/colada'
 import { useI18n } from 'vue-i18n'
 import { useImpersonationConsent } from '@/queries/impersonationConsent'
@@ -14,7 +20,6 @@ import { deleteConsent, IMPERSONATION_CONSENT_KEY } from '@/lib/impersonation'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faCircleCheck, faCircleInfo } from '@fortawesome/free-solid-svg-icons'
 import { computed, ref } from 'vue'
-import { formatDateTimeNoSeconds } from '@/lib/dateTime'
 import EnableImpersonationConsentModal from './EnableImpersonationConsentModal.vue'
 import SessionsTable from './SessionsTable.vue'
 
diff --git a/frontend/src/components/account/impersonation/SessionModal.vue b/frontend/src/components/account/impersonation/SessionModal.vue
index 3b5c047c0..239302ef4 100644
--- a/frontend/src/components/account/impersonation/SessionModal.vue
+++ b/frontend/src/components/account/impersonation/SessionModal.vue
@@ -16,12 +16,14 @@ import {
   NeTableHeadCell,
   NeTableRow,
   NeTooltip,
+  formatDateTime,
+  formatDateTimeNoSeconds,
 } from '@nethesis/vue-components'
 import {
   useImpersonationSessionAudit,
   useImpersonationSessionAuditStore,
 } from '@/queries/impersonationSessionAudit'
-import { formatDateTime, formatDateTimeNoSeconds, formatMinutes } from '@/lib/dateTime'
+import { formatMinutes } from '@/lib/dateTime'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { SESSION_AUDIT_TABLE_ID } from '@/lib/impersonationSessions'
diff --git a/frontend/src/components/account/impersonation/SessionsTable.vue b/frontend/src/components/account/impersonation/SessionsTable.vue
index 2029612d2..778d2e107 100644
--- a/frontend/src/components/account/impersonation/SessionsTable.vue
+++ b/frontend/src/components/account/impersonation/SessionsTable.vue
@@ -16,6 +16,7 @@ import {
   NeButton,
   NeEmptyState,
   NeInlineNotification,
+  formatDateTimeNoSeconds,
 } from '@nethesis/vue-components'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -23,7 +24,7 @@ import { savePageSizeToStorage, PAGE_SIZE_OPTIONS } from '@/lib/tablePageSize'
 import { useImpersonationSessions } from '@/queries/impersonationSessions'
 import { SESSIONS_TABLE_ID, type Session } from '@/lib/impersonationSessions'
 import UpdatingSpinner from '@/components/common/UpdatingSpinner.vue'
-import { formatDateTimeNoSeconds, formatMinutes } from '@/lib/dateTime'
+import { formatMinutes } from '@/lib/dateTime'
 import SessionModal from './SessionModal.vue'
 import { useImpersonationSessionAuditStore } from '@/queries/impersonationSessionAudit'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
diff --git a/frontend/src/components/alerts/AlertDetailsDrawer.vue b/frontend/src/components/alerts/AlertDetailsDrawer.vue
index 90c3d1fd2..3fe62f68d 100644
--- a/frontend/src/components/alerts/AlertDetailsDrawer.vue
+++ b/frontend/src/components/alerts/AlertDetailsDrawer.vue
@@ -12,6 +12,7 @@ import {
   NeSideDrawer,
   NeFormItemLabel,
   NeRoundedIcon,
+  formatDateTimeNoSeconds,
 } from '@nethesis/vue-components'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -28,7 +29,6 @@ import ProcessingAlertBadge from '@/components/alerts/ProcessingAlertBadge.vue'
 import SystemLogoAndLink from '@/components/systems/SystemLogoAndLink.vue'
 import AlertAssignee from '@/components/alerts/AlertAssignee.vue'
 import AlertEventsTimeline from '@/components/alerts/AlertEventsTimeline.vue'
-import { formatDateTimeNoSeconds } from '@/lib/dateTime'
 
 interface Props {
   isShown: boolean
diff --git a/frontend/src/components/alerts/AlertEventsTimeline.vue b/frontend/src/components/alerts/AlertEventsTimeline.vue
index 13c159d91..5e34375ea 100644
--- a/frontend/src/components/alerts/AlertEventsTimeline.vue
+++ b/frontend/src/components/alerts/AlertEventsTimeline.vue
@@ -9,6 +9,8 @@ import {
   NeInlineNotification,
   NeSkeleton,
   NeTooltip,
+  formatDateTimeNoSeconds,
+  formatRelativeTime,
 } from '@nethesis/vue-components'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -16,7 +18,6 @@ import { useAlertActivity } from '@/queries/alerts/alertActivity'
 import type { Alert } from '@/lib/alerts'
 import UserAvatar from '@/components/users/UserAvatar.vue'
 import AlertCommentText from '@/components/alerts/AlertCommentText.vue'
-import { formatDateTimeNoSeconds, formatRelativeTime } from '@/lib/dateTime'
 
 const props = defineProps<{
   alert: Alert | undefined
@@ -107,7 +108,7 @@ function getEventText(details: Record<string, unknown>): string | null {
         <NeTooltip placement="top" trigger-event="mouseenter focus">
           <template #trigger>
             <span class="text-tertiary-neutral w-fit cursor-default">
-              {{ formatRelativeTime(event.created_at, locale) }}
+              {{ formatRelativeTime(new Date(event.created_at), locale) }}
             </span>
           </template>
           <template #content>
diff --git a/frontend/src/components/alerts/AlertsTable.vue b/frontend/src/components/alerts/AlertsTable.vue
index e62b77dad..987350e98 100644
--- a/frontend/src/components/alerts/AlertsTable.vue
+++ b/frontend/src/components/alerts/AlertsTable.vue
@@ -35,6 +35,8 @@ import {
   type NeDropdownFilterV2Option,
   type NeDropdownItem,
   type SortEvent,
+  formatDateTime,
+  formatRelativeTime,
 } from '@nethesis/vue-components'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -58,7 +60,6 @@ import {
 import { setPendingAlertState, isProcessing } from '@/lib/alertPendingStates'
 import { type AlertFilterAlert } from '@/lib/alertFilters'
 import { useNotificationsStore } from '@/stores/notifications'
-import { formatDateTime, formatRelativeTime } from '@/lib/dateTime'
 import { canManageSystems, canReadUsers } from '@/lib/permissions'
 import OrganizationIconAndLink from '@/components/organizations/OrganizationIconAndLink.vue'
 import MuteAlertDrawer from '@/components/alerts/MuteAlertDrawer.vue'
@@ -589,7 +590,7 @@ function goToSystems() {
           <!-- Started at -->
           <NeTableCell :data-label="$t('alerts.started')">
             <div>
-              <p>{{ formatRelativeTime(alert.startsAt, locale) }}</p>
+              <p>{{ formatRelativeTime(new Date(alert.startsAt), locale) }}</p>
               <p class="text-tertiary-neutral dark:text-tertiary-neutral mt-0.5">
                 {{ formatDateTime(new Date(alert.startsAt), locale) }}
               </p>
diff --git a/frontend/src/components/distributors/DistributorInfoCard.vue b/frontend/src/components/distributors/DistributorInfoCard.vue
index 5abea158e..ccb6c15ff 100644
--- a/frontend/src/components/distributors/DistributorInfoCard.vue
+++ b/frontend/src/components/distributors/DistributorInfoCard.vue
@@ -12,6 +12,7 @@ import {
   NeSkeleton,
   NeTooltip,
   type NeDropdownItem,
+  formatDateTimeNoSeconds,
 } from '@nethesis/vue-components'
 import { useDistributorDetail } from '@/queries/organizations/distributorDetail'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
@@ -34,7 +35,6 @@ import ReactivateDistributorModal from './ReactivateDistributorModal.vue'
 import { getLanguageLabel } from '@/lib/locale'
 import { formatPhoneForDisplay } from '@/lib/phone'
 import UserAvatar from '../users/UserAvatar.vue'
-import { formatDateTimeNoSeconds } from '@/lib/dateTime'
 
 const { t, locale } = useI18n()
 const { state: distributorDetail, asyncStatus } = useDistributorDetail()
diff --git a/frontend/src/components/shell/ImpersonationConsentBadge.vue b/frontend/src/components/shell/ImpersonationConsentBadge.vue
index 481c6797f..b0e8a180b 100644
--- a/frontend/src/components/shell/ImpersonationConsentBadge.vue
+++ b/frontend/src/components/shell/ImpersonationConsentBadge.vue
@@ -4,11 +4,10 @@
 -->
 
 <script setup lang="ts">
-import { formatDateTimeNoSeconds } from '@/lib/dateTime'
 import { useImpersonationConsent } from '@/queries/impersonationConsent'
 import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { NeBadgeV2, NeLink, NeTooltip } from '@nethesis/vue-components'
+import { NeBadgeV2, NeLink, NeTooltip, formatDateTimeNoSeconds } from '@nethesis/vue-components'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import router from '@/router'
diff --git a/frontend/src/components/systems/SystemActiveAlertsTable.vue b/frontend/src/components/systems/SystemActiveAlertsTable.vue
index bf39e55d1..abd263313 100644
--- a/frontend/src/components/systems/SystemActiveAlertsTable.vue
+++ b/frontend/src/components/systems/SystemActiveAlertsTable.vue
@@ -33,6 +33,8 @@ import {
   type NeDropdownFilterV2Option,
   type NeDropdownItem,
   type SortEvent,
+  formatDateTime,
+  formatRelativeTime,
 } from '@nethesis/vue-components'
 import { PAGE_SIZE_OPTIONS } from '@/lib/tablePageSize'
 import capitalize from 'lodash/capitalize'
@@ -59,7 +61,6 @@ import { savePageSizeToStorage } from '@/lib/tablePageSize'
 import { useSystemAlerts } from '@/queries/systemAlerts/systemAlerts'
 import { useAlertFilters } from '@/queries/alerts/alertFilters'
 import { type AlertFilterAlert } from '@/lib/alertFilters'
-import { formatDateTime, formatRelativeTime } from '@/lib/dateTime'
 import { canManageSystems } from '@/lib/permissions'
 import MuteAlertDrawer from '@/components/alerts/MuteAlertDrawer.vue'
 import AlertDetailsDrawer from '@/components/alerts/AlertDetailsDrawer.vue'
@@ -524,7 +525,7 @@ function onMuteDrawerClose(): void {
           <!-- Started at -->
           <NeTableCell :data-label="$t('alerts.started')">
             <div>
-              <p>{{ formatRelativeTime(alert.startsAt, locale) }}</p>
+              <p>{{ formatRelativeTime(new Date(alert.startsAt), locale) }}</p>
               <p class="text-tertiary-neutral dark:text-tertiary-neutral mt-0.5">
                 {{ formatDateTime(new Date(alert.startsAt), locale) }}
               </p>
diff --git a/frontend/src/components/systems/SystemBackupsPanel.vue b/frontend/src/components/systems/SystemBackupsPanel.vue
index 2fe109627..d8d526c66 100644
--- a/frontend/src/components/systems/SystemBackupsPanel.vue
+++ b/frontend/src/components/systems/SystemBackupsPanel.vue
@@ -18,6 +18,7 @@ import {
   NeTableHeadCell,
   NeTableRow,
   byteFormat1024,
+  formatDateTimeNoSeconds,
 } from '@nethesis/vue-components'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import {
@@ -37,7 +38,6 @@ import {
   SYSTEM_BACKUPS_KEY,
   type BackupMetadata,
 } from '@/lib/backups'
-import { formatDateTimeNoSeconds } from '@/lib/dateTime'
 import { useSystemBackups } from '@/queries/systems/backups'
 import { useNotificationsStore } from '@/stores/notifications'
 import DeleteObjectModal from '@/components/common/DeleteObjectModal.vue'
diff --git a/frontend/src/components/systems/SystemChangesTimeline.vue b/frontend/src/components/systems/SystemChangesTimeline.vue
index 0b8f56062..c67a3ba5f 100644
--- a/frontend/src/components/systems/SystemChangesTimeline.vue
+++ b/frontend/src/components/systems/SystemChangesTimeline.vue
@@ -15,11 +15,7 @@ import {
   type InventoryDiffSeverity,
   type InventoryDiffType,
 } from '@/lib/systems/inventoryDiffs'
-import {
-  formatDateTimeNoSeconds,
-  formatTimeNoSeconds,
-  getDateTimeFormatPattern,
-} from '@/lib/dateTime'
+import { formatTimeNoSeconds, getDateTimeFormatPattern } from '@/lib/dateTime'
 import { computed, onWatcherCleanup, ref, useTemplateRef, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import {
@@ -36,6 +32,7 @@ import {
   type NeBadgeV2Kind,
   getDateFnsLocale,
   NeTooltip,
+  formatDateTimeNoSeconds,
 } from '@nethesis/vue-components'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import UpdatingSpinner from '@/components/common/UpdatingSpinner.vue'
diff --git a/frontend/src/components/systems/SystemHistoryAlertsTable.vue b/frontend/src/components/systems/SystemHistoryAlertsTable.vue
index 4be153de9..bc6c98415 100644
--- a/frontend/src/components/systems/SystemHistoryAlertsTable.vue
+++ b/frontend/src/components/systems/SystemHistoryAlertsTable.vue
@@ -4,7 +4,6 @@
 -->
 
 <script setup lang="ts">
-import { formatRelativeTime } from '@/lib/dateTime'
 import { PAGE_SIZE_OPTIONS } from '@/lib/tablePageSize'
 import { faCircleCheck, faEye, faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
@@ -25,6 +24,8 @@ import {
   NeTableRow,
   type NeDropdownFilterV2Option,
   type SortEvent,
+  formatRelativeTime,
+  formatDateTime,
 } from '@nethesis/vue-components'
 import capitalize from 'lodash/capitalize'
 import { computed, ref } from 'vue'
@@ -41,7 +42,6 @@ import { useSystemAlertHistory } from '@/queries/systemAlerts/systemAlertHistory
 import { useAlertFilters } from '@/queries/alerts/alertFilters'
 import { type AlertFilterAlert } from '@/lib/alertFilters'
 import { savePageSizeToStorage } from '@/lib/tablePageSize'
-import { formatDateTime } from '@/lib/dateTime'
 import AlertDetailsDrawer from '@/components/alerts/AlertDetailsDrawer.vue'
 
 const { t, locale } = useI18n()
@@ -287,7 +287,7 @@ function showDetails(alert: Alert): void {
           <!-- Started at -->
           <NeTableCell :data-label="$t('alerts.started')">
             <div v-if="record.starts_at">
-              <p>{{ formatRelativeTime(record.starts_at, locale) }}</p>
+              <p>{{ formatRelativeTime(new Date(record.starts_at), locale) }}</p>
               <p class="text-tertiary-neutral dark:text-tertiary-neutral mt-0.5">
                 {{ formatDateTime(new Date(record.starts_at), locale) }}
               </p>
@@ -297,7 +297,7 @@ function showDetails(alert: Alert): void {
           <!-- Ended at -->
           <NeTableCell :data-label="$t('alerts.ends_at')">
             <div v-if="record.ends_at">
-              <p>{{ formatRelativeTime(record.ends_at, locale) }}</p>
+              <p>{{ formatRelativeTime(new Date(record.ends_at), locale) }}</p>
               <p class="text-tertiary-neutral dark:text-tertiary-neutral mt-0.5">
                 {{ formatDateTime(new Date(record.ends_at), locale) }}
               </p>
diff --git a/frontend/src/components/systems/SystemInfoCard.vue b/frontend/src/components/systems/SystemInfoCard.vue
index ada0f8600..17453b5de 100644
--- a/frontend/src/components/systems/SystemInfoCard.vue
+++ b/frontend/src/components/systems/SystemInfoCard.vue
@@ -14,6 +14,7 @@ import {
   NeSkeleton,
   NeTooltip,
   type NeDropdownItem,
+  formatDateTimeNoSeconds,
 } from '@nethesis/vue-components'
 import { useSystemDetail } from '@/queries/systems/systemDetail'
 import { exportSystem, getProductName } from '@/lib/systems/systems'
@@ -43,7 +44,6 @@ import ReactivateSystemModal from './ReactivateSystemModal.vue'
 import DestroySystemModal from './DestroySystemModal.vue'
 import OrganizationIconAndLink from '@/components/organizations/OrganizationIconAndLink.vue'
 import UserAvatar from '../users/UserAvatar.vue'
-import { formatDateTimeNoSeconds } from '@/lib/dateTime'
 import { useLatestInventory } from '@/queries/systems/latestInventory'
 import type { Ns8Facts } from '@/lib/systems/ns8Facts'
 import type { NsecFacts } from '@/lib/systems/nsecFacts'
diff --git a/frontend/src/components/systems/SystemStatusCard.vue b/frontend/src/components/systems/SystemStatusCard.vue
index b598d9633..324ca8197 100644
--- a/frontend/src/components/systems/SystemStatusCard.vue
+++ b/frontend/src/components/systems/SystemStatusCard.vue
@@ -10,6 +10,8 @@ import {
   NeInlineNotification,
   NeSkeleton,
   NeTooltip,
+  formatDateTimeNoSeconds,
+  formatRelativeTime,
 } from '@nethesis/vue-components'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { useLatestInventory } from '@/queries/systems/latestInventory'
@@ -18,7 +20,7 @@ import {
   faCircleInfo,
   faTriangleExclamation,
 } from '@fortawesome/free-solid-svg-icons'
-import { formatDateTimeNoSeconds, formatRelativeTime, formatUptime } from '@/lib/dateTime'
+import { formatUptime } from '@/lib/dateTime'
 import { useI18n } from 'vue-i18n'
 import { useSystemDetail } from '@/queries/systems/systemDetail'
 import { useSystemActiveAlerts } from '@/queries/systems/activeAlerts'
@@ -148,7 +150,9 @@ const timezone = computed(() => {
                   <template v-else>
                     {{
                       $t('system_detail.last_heartbeat_time', {
-                        time: formatRelativeTime(systemDetail.data?.last_heartbeat ?? '', locale),
+                        time: systemDetail.data?.last_heartbeat
+                          ? formatRelativeTime(new Date(systemDetail.data.last_heartbeat), locale)
+                          : '-',
                       })
                     }}
                   </template>
@@ -180,7 +184,7 @@ const timezone = computed(() => {
           </div>
           <NeTooltip v-else trigger-event="mouseenter focus" placement="left">
             <template #trigger>
-              {{ formatRelativeTime(latestInventory.data?.timestamp, locale) }}
+              {{ formatRelativeTime(new Date(latestInventory.data?.timestamp), locale) }}
             </template>
             <template #content>
               {{ formatDateTimeNoSeconds(new Date(latestInventory.data?.timestamp), locale) }}
diff --git a/frontend/src/components/systems/SystemSubscriptionCard.vue b/frontend/src/components/systems/SystemSubscriptionCard.vue
index 6e9b818ba..c904b44d4 100644
--- a/frontend/src/components/systems/SystemSubscriptionCard.vue
+++ b/frontend/src/components/systems/SystemSubscriptionCard.vue
@@ -11,10 +11,10 @@ import {
   NeInlineNotification,
   NeSkeleton,
   type NeDropdownItem,
+  formatDateTimeNoSeconds,
 } from '@nethesis/vue-components'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faAward, faKey } from '@fortawesome/free-solid-svg-icons'
-import { formatDateTimeNoSeconds } from '@/lib/dateTime'
 import { canManageSystems } from '@/lib/permissions'
 import { useI18n } from 'vue-i18n'
 import { useSystemDetail } from '@/queries/systems/systemDetail'
diff --git a/frontend/src/components/systems/SystemsTable.vue b/frontend/src/components/systems/SystemsTable.vue
index ced47260a..f25299aef 100644
--- a/frontend/src/components/systems/SystemsTable.vue
+++ b/frontend/src/components/systems/SystemsTable.vue
@@ -40,6 +40,7 @@ import {
   NeDropdownFilterV2,
   NeTooltip,
   type NeDropdownItem,
+  formatRelativeTime,
 } from '@nethesis/vue-components'
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -66,7 +67,6 @@ import OrganizationDropdownFilter from '@/components/organizations/OrganizationD
 import { isUserCustomer } from '@/lib/organizations/organizations.ts'
 import OrganizationIconAndLink from '../organizations/OrganizationIconAndLink.vue'
 import SystemLogoAndLink from './SystemLogoAndLink.vue'
-import { formatRelativeTime } from '@/lib/dateTime'
 
 const { isShownCreateSystemDrawer = false } = defineProps<{
   isShownCreateSystemDrawer: boolean
@@ -633,7 +633,9 @@ function onCloseSecretRegeneratedModal() {
                     <template v-else>
                       {{
                         $t('system_detail.last_heartbeat_time', {
-                          time: formatRelativeTime(item.last_heartbeat ?? '', locale),
+                          time: item.last_heartbeat
+                            ? formatRelativeTime(new Date(item.last_heartbeat), locale)
+                            : '-',
                         })
                       }}
                     </template>
diff --git a/frontend/src/lib/alerts.test.ts b/frontend/src/lib/alerts.test.ts
index 9c4d51d5c..d7a69c474 100644
--- a/frontend/src/lib/alerts.test.ts
+++ b/frontend/src/lib/alerts.test.ts
@@ -9,7 +9,7 @@ import {
   isAlertSilenced,
   type Alert,
 } from './alerts'
-import { formatDateTimeNoSeconds } from './dateTime'
+import { formatDateTimeNoSeconds } from '@nethesis/vue-components'
 
 const baseAlert: Alert = {
   labels: {},
diff --git a/frontend/src/lib/dateTime.test.ts b/frontend/src/lib/dateTime.test.ts
index f2b2b9a08..4a5fbaa2f 100644
--- a/frontend/src/lib/dateTime.test.ts
+++ b/frontend/src/lib/dateTime.test.ts
@@ -1,16 +1,8 @@
 //  Copyright (C) 2025 Nethesis S.r.l.
 //  SPDX-License-Identifier: GPL-3.0-or-later
 
-import {
-  formatDateTime,
-  formatDateTimeNoSeconds,
-  formatMinutes,
-  formatRelativeTime,
-  formatSeconds,
-  formatTimeNoSeconds,
-  formatUptime,
-} from './dateTime'
-import { expect, it, describe, vi, beforeEach, afterEach } from 'vitest'
+import { formatMinutes, formatSeconds, formatTimeNoSeconds, formatUptime } from './dateTime'
+import { expect, it, describe, vi, beforeEach } from 'vitest'
 
 // Create a simple mock function for translation
 const mockT = vi.fn((key: string, count?: number) => {
@@ -32,89 +24,6 @@ const mockT = vi.fn((key: string, count?: number) => {
   return key
 })
 
-describe('formatDateTime', () => {
-  it('should format date time with default locale settings', () => {
-    const date = new Date('2025-10-02T14:30:45')
-    const result = formatDateTime(date, 'en-US')
-
-    // The exact format may vary by environment, but should include date and time
-    expect(result).toContain('2025')
-    expect(result).toContain('10')
-    expect(result).toContain('2')
-  })
-
-  it('should format date time with different locales', () => {
-    const date = new Date('2025-10-02T14:30:45')
-
-    const enResult = formatDateTime(date, 'en-US')
-    const itResult = formatDateTime(date, 'it-IT')
-
-    // Results should be different for different locales
-    expect(enResult).not.toBe(itResult)
-    expect(typeof enResult).toBe('string')
-    expect(typeof itResult).toBe('string')
-  })
-
-  it('should handle edge case dates', () => {
-    const date = new Date('1970-01-01T00:00:00')
-    const result = formatDateTime(date, 'en-US')
-
-    expect(typeof result).toBe('string')
-    expect(result.length).toBeGreaterThan(0)
-  })
-
-  it('should include time zone when provided', () => {
-    const date = new Date('2025-10-02T14:30:45Z')
-    const result = formatDateTime(date, 'en-US', 'UTC')
-
-    expect(result).toMatch(/UTC|GMT/)
-  })
-})
-
-describe('formatDateTimeNoSeconds', () => {
-  it('should format date time without seconds', () => {
-    const date = new Date('2025-10-03T09:30:45')
-    const result = formatDateTimeNoSeconds(date, 'en-US')
-
-    // Should not contain seconds (45)
-    expect(result).not.toContain('45')
-    // Should contain year, month, day, hour, minute
-    expect(result).toContain('2025')
-    expect(result).toContain('Oct')
-    expect(result).toContain('03')
-    expect(result).toContain('09')
-    expect(result).toContain('30')
-  })
-
-  it('should format with different locales consistently', () => {
-    const date = new Date('2025-10-02T14:30:45')
-
-    const enResult = formatDateTimeNoSeconds(date, 'en-US')
-    const itResult = formatDateTimeNoSeconds(date, 'it-IT')
-
-    expect(typeof enResult).toBe('string')
-    expect(typeof itResult).toBe('string')
-    expect(enResult).not.toBe(itResult)
-  })
-
-  it('should handle midnight time', () => {
-    const date = new Date('2025-10-02T00:00:00')
-    const result = formatDateTimeNoSeconds(date, 'en-US')
-
-    expect(typeof result).toBe('string')
-    expect(result).toContain('2025')
-    expect(result).toContain('Oct')
-    expect(result).toContain('02')
-  })
-
-  it('should include time zone when provided', () => {
-    const date = new Date('2025-10-03T09:30:45Z')
-    const result = formatDateTimeNoSeconds(date, 'en-US', 'UTC')
-
-    expect(result).toMatch(/UTC|GMT/)
-  })
-})
-
 describe('formatTimeNoSeconds', () => {
   it('should format time without seconds', () => {
     const date = new Date('2025-10-03T09:30:45Z')
@@ -399,124 +308,3 @@ describe('formatUptime', () => {
     expect(result).toBe('59 minutes')
   })
 })
-
-describe('formatRelativeTime', () => {
-  beforeEach(() => {
-    vi.useFakeTimers()
-    vi.setSystemTime(new Date('2026-03-12T12:00:00Z'))
-  })
-
-  afterEach(() => {
-    vi.useRealTimers()
-  })
-
-  it('should return "-" for invalid date strings', () => {
-    expect(formatRelativeTime('not-a-date', 'en')).toBe('-')
-    expect(formatRelativeTime('', 'en')).toBe('-')
-  })
-
-  it('should return seconds ago for recent past', () => {
-    // 30 seconds ago
-    const result = formatRelativeTime('2026-03-12T11:59:30Z', 'en')
-    expect(result).toBe('30 seconds ago')
-  })
-
-  it('should return 1 minute ago for 60 seconds ago', () => {
-    const result = formatRelativeTime('2026-03-12T11:59:00Z', 'en')
-    expect(result).toBe('1 minute ago')
-  })
-
-  it('should return minutes ago for multiple minutes', () => {
-    // 9 minutes ago
-    const result = formatRelativeTime('2026-03-12T11:51:00Z', 'en')
-    expect(result).toBe('9 minutes ago')
-  })
-
-  it('should return hours ago for multiple hours', () => {
-    // 3 hours ago
-    const result = formatRelativeTime('2026-03-12T09:00:00Z', 'en')
-    expect(result).toBe('3 hours ago')
-  })
-
-  it('should return "Yesterday" for 1 day ago (numeric: auto)', () => {
-    const result = formatRelativeTime('2026-03-11T12:00:00Z', 'en')
-    expect(result).toBe('Yesterday')
-  })
-
-  it('should return days ago for multiple days', () => {
-    // 2 days ago
-    const result = formatRelativeTime('2026-03-10T12:00:00Z', 'en')
-    expect(result).toBe('2 days ago')
-  })
-
-  it('should return "Last week" for 7 days ago (numeric: auto)', () => {
-    const result = formatRelativeTime('2026-03-05T12:00:00Z', 'en')
-    expect(result).toBe('Last week')
-  })
-
-  it('should return weeks ago for 2 weeks', () => {
-    // 14 days ago
-    const result = formatRelativeTime('2026-02-26T12:00:00Z', 'en')
-    expect(result).toBe('2 weeks ago')
-  })
-
-  it('should return weeks ago for ~30 days (stays in week unit)', () => {
-    // 30 days = ~4.28 weeks < 4.34524 threshold → rounds to 4 weeks
-    const result = formatRelativeTime('2026-02-10T12:00:00Z', 'en')
-    expect(result).toBe('4 weeks ago')
-  })
-
-  it('should return months ago for ~3 months', () => {
-    // 90 days ago
-    const result = formatRelativeTime('2025-12-12T12:00:00Z', 'en')
-    expect(result).toBe('3 months ago')
-  })
-
-  it('should return months ago for 365 days (rounds to 12 months)', () => {
-    // 365 days / 7 / 4.34524 ≈ 11.9999 < 12 → stays in month bucket → rounds to 12 months
-    const result = formatRelativeTime('2025-03-12T12:00:00Z', 'en')
-    expect(result).toBe('12 months ago')
-  })
-
-  it('should return "Last year" for 366 days ago (numeric: auto)', () => {
-    // 366 days / 7 / 4.34524 ≈ 12.033 >= 12 → enters year bucket → rounds to 1 year
-    const result = formatRelativeTime('2025-03-11T12:00:00Z', 'en')
-    expect(result).toBe('Last year')
-  })
-
-  it('should return years ago for multiple years', () => {
-    // ~730 days ago
-    const result = formatRelativeTime('2024-03-12T12:00:00Z', 'en')
-    expect(result).toBe('2 years ago')
-  })
-
-  it('should handle future dates', () => {
-    // 30 seconds in the future
-    const result = formatRelativeTime('2026-03-12T12:00:30Z', 'en')
-    expect(result).toBe('In 30 seconds')
-  })
-
-  it('should return "In X minutes" for future dates minutes away', () => {
-    // 15 minutes in the future
-    const result = formatRelativeTime('2026-03-12T12:15:00Z', 'en')
-    expect(result).toBe('In 15 minutes')
-  })
-
-  it('should return "In X days" for future dates days away', () => {
-    // 3 days in the future
-    const result = formatRelativeTime('2026-03-15T12:00:00Z', 'en')
-    expect(result).toBe('In 3 days')
-  })
-
-  it('should use locale for different languages', () => {
-    // 1 day ago in Italian → "ieri" → capitalize → "Ieri"
-    const result = formatRelativeTime('2026-03-11T12:00:00Z', 'it')
-    expect(result).toBe('Ieri')
-  })
-
-  it('should capitalize the first character of the output', () => {
-    // "last week" → "Last week"
-    const result = formatRelativeTime('2026-03-05T12:00:00Z', 'en')
-    expect(result[0]).toBe(result[0].toUpperCase())
-  })
-})
diff --git a/frontend/src/lib/dateTime.ts b/frontend/src/lib/dateTime.ts
index 948f23656..22b5c6257 100644
--- a/frontend/src/lib/dateTime.ts
+++ b/frontend/src/lib/dateTime.ts
@@ -2,7 +2,7 @@
 //  SPDX-License-Identifier: GPL-3.0-or-later
 
 import type { ComposerTranslation } from 'vue-i18n'
-import capitalize from 'lodash/capitalize'
+import { formatDateTimeNoSeconds } from '@nethesis/vue-components'
 
 export const getDateTimeFormatPattern = (locale: string) => {
   switch (locale) {
@@ -25,25 +25,6 @@ function getTimeZoneOptions(timeZone?: string): Intl.DateTimeFormatOptions {
   }
 }
 
-export function formatDateTime(dateTime: Date, locale: string, timeZone?: string): string {
-  const options = getTimeZoneOptions(timeZone)
-
-  return Object.keys(options).length > 0
-    ? dateTime.toLocaleString(locale, options)
-    : dateTime.toLocaleString(locale)
-}
-
-export function formatDateTimeNoSeconds(dateTime: Date, locale: string, timeZone?: string): string {
-  return dateTime.toLocaleString(locale, {
-    year: 'numeric',
-    month: 'short',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit',
-    ...getTimeZoneOptions(timeZone),
-  })
-}
-
 export function formatTimeNoSeconds(dateTime: Date, locale: string, timeZone?: string): string {
   return dateTime.toLocaleTimeString(locale, {
     hour: '2-digit',
@@ -52,15 +33,6 @@ export function formatTimeNoSeconds(dateTime: Date, locale: string, timeZone?: s
   })
 }
 
-export function formatTimeWithSeconds(dateTime: Date, locale: string, timeZone?: string): string {
-  return dateTime.toLocaleTimeString(locale, {
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit',
-    ...getTimeZoneOptions(timeZone),
-  })
-}
-
 export function formatMinutes(totalMinutes: number, t: ComposerTranslation) {
   if (totalMinutes < 60) {
     return t('time.minutes', totalMinutes)
@@ -156,41 +128,3 @@ export function localizeIsoTimestamps(text: string, locale: string): string {
     return isNaN(date.getTime()) ? match : formatDateTimeNoSeconds(date, locale)
   })
 }
-
-const RELATIVE_DIVISIONS: { amount: number; unit: Intl.RelativeTimeFormatUnit }[] = [
-  { amount: 60, unit: 'second' },
-  { amount: 60, unit: 'minute' },
-  { amount: 24, unit: 'hour' },
-  { amount: 7, unit: 'day' },
-  { amount: 4.34524, unit: 'week' },
-  { amount: 12, unit: 'month' },
-  { amount: Number.POSITIVE_INFINITY, unit: 'year' },
-]
-
-/**
- * Format an ISO date as a localized relative time, like GitHub: "in 3 months",
- * "3 days ago". Uses Intl.RelativeTimeFormat so the unit is picked and rounded
- * the way people expect, and the locale is applied natively (no i18n keys).
- *
- * @param isoDate - ISO 8601 date string
- * @param locale - BCP-47 locale (e.g. "en", "it")
- */
-export function formatRelativeTime(isoDate: string, locale: string): string {
-  const date = new Date(isoDate)
-
-  if (isNaN(date.getTime())) {
-    return '-'
-  }
-
-  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' })
-  let duration = (date.getTime() - Date.now()) / 1000
-
-  for (const division of RELATIVE_DIVISIONS) {
-    if (Math.abs(duration) < division.amount) {
-      return capitalize(rtf.format(Math.round(duration), division.unit))
-    }
-    duration /= division.amount
-  }
-
-  return capitalize(rtf.format(Math.round(duration), 'year'))
-}
diff --git a/frontend/src/views/DashboardView.vue b/frontend/src/views/DashboardView.vue
index fca19d65a..3b21d25ce 100644
--- a/frontend/src/views/DashboardView.vue
+++ b/frontend/src/views/DashboardView.vue
@@ -80,11 +80,7 @@ const { state: thirdPartyApps } = useQuery({
         <div class="flex h-full flex-col justify-between gap-4">
           <div class="flex flex-col items-start gap-3">
             <div class="flex items-center gap-3">
-              <NeRoundedIcon
-                :customIcon="getThirdPartyAppIcon(thirdPartyApp)"
-                customBackgroundClasses="bg-gray-100 dark:bg-gray-800"
-                customForegroundClasses="text-gray-700 dark:text-gray-50"
-              />
+              <NeRoundedIcon kind="gray" :customIcon="getThirdPartyAppIcon(thirdPartyApp)" />
               <NeHeading tag="h6">
                 {{ thirdPartyApp.branding.display_name }}
               </NeHeading>

From 5435f68a7dc208d27ba463202c6315b7cbbaaf56 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andrea.leardini@nethesis.it>
Date: Mon, 3 Aug 2026 16:39:46 +0200
Subject: [PATCH 11/13] fix(ui): add italian strings

---
 frontend/src/i18n/it/translation.json | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/frontend/src/i18n/it/translation.json b/frontend/src/i18n/it/translation.json
index 3724136ea..0f159de36 100644
--- a/frontend/src/i18n/it/translation.json
+++ b/frontend/src/i18n/it/translation.json
@@ -2,6 +2,7 @@
   "common": {
     "access_denied": "Accesso negato",
     "this_section_is_accessible_only_by_owner": "Questa sezione è accessibile solo dall'organizzazione owner.",
+    "breadcrumb": "Breadcrumb",
     "save": "Salva",
     "cancel": "Annulla",
     "search": "Cerca",
@@ -47,6 +48,7 @@
     "suspend": "Sospendi",
     "suspended": "Sospeso",
     "reactivate": "Riattiva",
+    "promote": "Promuovi",
     "notes": "Note",
     "show_notes": "Mostra note",
     "plus_n_more": "+{count} altro | +{count} altri",
@@ -123,7 +125,8 @@
     "import_distributors": "Importa distributori",
     "distributors_imported": "Distributori importati",
     "show_distributor_systems": "Mostra i sistemi di {name} e della sua gerarchia",
-    "show_distributor_resellers": "Mostra i rivenditori di {name}"
+    "show_distributor_resellers": "Mostra i rivenditori di {name}",
+    "show_distributor_customers": "Mostra i clienti di {name} e della sua gerarchia"
   },
   "distributor_detail": {
     "title": "Dettaglio distributore",
@@ -162,7 +165,12 @@
     "import_resellers": "Importa rivenditori",
     "resellers_imported": "Rivenditori importati",
     "show_reseller_systems": "Mostra i sistemi di {name} e della sua gerarchia",
-    "show_reseller_customers": "Mostra i clienti di {name}"
+    "show_reseller_customers": "Mostra i clienti di {name}",
+    "reseller_promoted": "Rivenditore promosso",
+    "reseller_promoted_successfully": "{name} è ora un distributore",
+    "promote_reseller": "Promuovi a distributore",
+    "cannot_promote_reseller": "Impossibile promuovere il rivenditore",
+    "promote_reseller_confirmation": "Il rivenditore {name} verrà promosso a distributore. Manterrà i propri clienti, utenti e sistemi, ma il suo distributore attuale perderà l'accesso ad essi."
   },
   "customers": {
     "title": "Clienti",
@@ -188,7 +196,10 @@
     "export_customers_to_pdf": "Esporta clienti in PDF",
     "export_customers_to_csv": "Esporta clienti in CSV",
     "import_customers": "Importa clienti",
-    "customers_imported": "Clienti importati"
+    "customers_imported": "Clienti importati",
+    "hierarchy_filter_title": "Filtro per gerarchia aziendale",
+    "hierarchy_filter_description": "Sono mostrati i clienti di {name} e di tutte le aziende della sua gerarchia. Modificare il filtro Azienda di appartenenza rimuoverà il filtro per gerarchia.",
+    "hierarchy_filter_exact": "Filtra solo per questa azienda"
   },
   "organizations": {
     "name": "Nome azienda",
@@ -232,6 +243,9 @@
     "organization_restored": "Azienda ripristinata",
     "organization_restored_successfully": "{name} ripristinata con successo",
     "restore_organization_confirmation": "Sei sicuro di voler ripristinare {name}?",
+    "promote_organization_is_suspended": "Questa azienda è sospesa. Riattivala prima di promuoverla.",
+    "promote_organization_not_synced": "Questa azienda non è ancora sincronizzata con l'identity provider. Riprova più tardi.",
+    "promote_owner_organization_not_found": "Non è stato possibile determinare l'azienda owner, quindi l'azienda promossa non può essere collegata ad essa.",
     "promoted_to_distributor": "Promosso a distributore",
     "promoted_by_name": "Promosso da {name}",
     "no_company": "Nessuna azienda",
@@ -726,7 +740,10 @@
     "cannot_set_notes": "Impossibile impostare le note dell'applicazione",
     "total_applications": "Applicazioni totali",
     "organization_applications": "Applicazioni dell'azienda",
-    "system_applications": "Applicazioni del sistema"
+    "system_applications": "Applicazioni del sistema",
+    "hierarchy_filter_title": "Filtro per gerarchia aziendale",
+    "hierarchy_filter_description": "Sono mostrate le applicazioni di {name} e di tutte le aziende della sua gerarchia. Modificare il filtro Azienda rimuoverà il filtro per gerarchia.",
+    "hierarchy_filter_exact": "Filtra solo per questa azienda"
   },
   "forbidden": {
     "title": "Pagina riservata",

From ed140fa15ea1938f9f93fba6527fa0621c62ff8d Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andrea.leardini@nethesis.it>
Date: Mon, 3 Aug 2026 16:44:36 +0200
Subject: [PATCH 12/13] chore(ui): bump @pinia/colada

---
 frontend/package-lock.json | 21 +++++++++++++++------
 frontend/package.json      |  4 ++--
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index f04b7ddca..458db7a8c 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -17,7 +17,7 @@
         "@nethesis/nethesis-light-svg-icons": "github:nethesis/Font-Awesome#ns-light",
         "@nethesis/nethesis-solid-svg-icons": "github:nethesis/Font-Awesome#ns-solid",
         "@nethesis/vue-components": "^3.12.1",
-        "@pinia/colada": "^1.3.1",
+        "@pinia/colada": "^1.4.2",
         "@pinia/colada-plugin-auto-refetch": "^0.2.6",
         "@tailwindcss/vite": "^4.1.10",
         "@vuepic/vue-datepicker": "^12.1.0",
@@ -34,7 +34,7 @@
         "vue-router": "^4.5.0"
       },
       "devDependencies": {
-        "@pinia/colada-devtools": "^1.1.0",
+        "@pinia/colada-devtools": "^1.1.2",
         "@tsconfig/node22": "^22.0.1",
         "@types/lodash": "^4.17.18",
         "@types/node": "^22.14.0",
@@ -1824,15 +1824,18 @@
       "license": "MIT"
     },
     "node_modules/@pinia/colada": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@pinia/colada/-/colada-1.3.1.tgz",
-      "integrity": "sha512-DLHtyCud5sACbNLdVIHsoPrhcHMT/1LvObFHxxbmJKU2fqGPluc8Y8CtmCTQ71BgnzcNMuAl97G5XrAgOZqxvg==",
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@pinia/colada/-/colada-1.4.2.tgz",
+      "integrity": "sha512-HDCFSBd+Uxzuw/BEdl7Kwsm4uccWwkX5uSxpZhc4/MhfFASU+t+DmjByyzNoAG9EK3SGJ7uf6pNR7bJg+dX80w==",
       "license": "MIT",
+      "dependencies": {
+        "nostics": "^1.1.4"
+      },
       "funding": {
         "url": "https://github.com/sponsors/posva"
       },
       "peerDependencies": {
-        "pinia": "^2.2.6 || ^3.0.0",
+        "pinia": "^2.2.6 || ^3.0.0 || ^4.0.2",
         "vue": "^3.5.17"
       }
     },
@@ -6354,6 +6357,12 @@
         "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
+    "node_modules/nostics": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/nostics/-/nostics-1.2.0.tgz",
+      "integrity": "sha512-FGqEfhQjrvo1lL8KFifdTQiNwwQHJxC1jtYE1Rc54qF/jxONUNL+kC9gS1krX8Q65PgrQ5fCqH/I4NhWBvdSqg==",
+      "license": "MIT"
+    },
     "node_modules/npm-normalize-package-bin": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-4.0.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 690f67d34..6a39054ac 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -27,7 +27,7 @@
     "@nethesis/nethesis-light-svg-icons": "github:nethesis/Font-Awesome#ns-light",
     "@nethesis/nethesis-solid-svg-icons": "github:nethesis/Font-Awesome#ns-solid",
     "@nethesis/vue-components": "^3.12.1",
-    "@pinia/colada": "^1.3.1",
+    "@pinia/colada": "^1.4.2",
     "@pinia/colada-plugin-auto-refetch": "^0.2.6",
     "@tailwindcss/vite": "^4.1.10",
     "@vuepic/vue-datepicker": "^12.1.0",
@@ -54,7 +54,7 @@
     "ws": "^8.21.0"
   },
   "devDependencies": {
-    "@pinia/colada-devtools": "^1.1.0",
+    "@pinia/colada-devtools": "^1.1.2",
     "@tsconfig/node22": "^22.0.1",
     "@types/lodash": "^4.17.18",
     "@types/node": "^22.14.0",

From 4642218af53ed66da55e644cd9f1fe4883108930 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andrea.leardini@nethesis.it>
Date: Tue, 4 Aug 2026 16:31:00 +0200
Subject: [PATCH 13/13] fix(ui): fix breadcrumb style

---
 frontend/src/components/common/PageBreadcrumb.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/common/PageBreadcrumb.vue b/frontend/src/components/common/PageBreadcrumb.vue
index e7e7b8969..95921f86e 100644
--- a/frontend/src/components/common/PageBreadcrumb.vue
+++ b/frontend/src/components/common/PageBreadcrumb.vue
@@ -4,7 +4,7 @@
 -->
 
 <script setup lang="ts">
-import { NeSkeleton } from '@nethesis/vue-components'
+import { NeLink, NeSkeleton } from '@nethesis/vue-components'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faAngleRight } from '@fortawesome/free-solid-svg-icons'
 import { RouterLink, type RouteLocationRaw } from 'vue-router'
@@ -30,10 +30,12 @@ const { t } = useI18n()
 
 <template>
   <nav :aria-label="t('common.breadcrumb')" class="mb-7">
-    <ol class="flex items-center gap-2 text-sm">
+    <ol class="flex items-center gap-2 text-xs">
       <li>
-        <RouterLink v-if="to" :to="to" class="hover:underline">
-          {{ section }}
+        <RouterLink v-if="to" v-slot="{ href, navigate }" :to="to" custom>
+          <NeLink :href="href" @click="navigate">
+            {{ section }}
+          </NeLink>
         </RouterLink>
         <span v-else>
           {{ section }}