From 8e47da2bcc69ca97c7a32d56986a88fa801dbb2e Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Thu, 5 Mar 2026 17:31:39 +0100
Subject: [PATCH 01/31] fix devcontainer name and package-lock version

---
 .devcontainer/devcontainer.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
index 68364fe49..f59d5f75b 100644
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@@ -1,7 +1,7 @@
 // For format details, see https://aka.ms/devcontainer.json. For config options, see the
 // README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
 {
-  "name": "my-nethesis-ui",
+  "name": "my-nethesis",
   // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
   "build": {
     "context": "..",
@@ -10,7 +10,7 @@
   },
   "workspaceMount": "source=${localWorkspaceFolder},target=/app,type=bind,Z",
   "workspaceFolder": "/app",
-  "runArgs": ["--userns=keep-id", "--name=my-nethesis-ui-dev"],
+  "runArgs": ["--userns=keep-id", "--name=my-nethesis-dev"],
   "appPort": "5173:5173",
   "customizations": {
     "vscode": {

From f48d95049923d2fcd70f5fc4d885559a52dd10cb Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Thu, 5 Mar 2026 18:23:07 +0100
Subject: [PATCH 02/31] Fix topbar shadow

---
 frontend/src/components/shell/TopBar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/shell/TopBar.vue b/frontend/src/components/shell/TopBar.vue
index 7edaf8ba7..ae414f168 100644
--- a/frontend/src/components/shell/TopBar.vue
+++ b/frontend/src/components/shell/TopBar.vue
@@ -80,7 +80,7 @@ function openNotificationsDrawer() {
 
 <template>
   <div
-    class="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b border-gray-200 bg-white px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8 dark:border-gray-700 dark:bg-gray-950"
+    class="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b border-gray-200 bg-white px-4 sm:gap-x-6 sm:px-6 lg:px-8 dark:border-gray-700 dark:bg-gray-950"
   >
     <button
       type="button"

From a328b078cadc48a57ce47a1772c4fa3654a466cc Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Thu, 5 Mar 2026 18:24:35 +0100
Subject: [PATCH 03/31] Fix Company field when showing system drawer

---
 .../src/components/systems/CreateOrEditSystemDrawer.vue  | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/systems/CreateOrEditSystemDrawer.vue b/frontend/src/components/systems/CreateOrEditSystemDrawer.vue
index 0b5b644b1..7658b41d3 100644
--- a/frontend/src/components/systems/CreateOrEditSystemDrawer.vue
+++ b/frontend/src/components/systems/CreateOrEditSystemDrawer.vue
@@ -156,9 +156,9 @@ const stepNumber = computed(() => {
 })
 
 watch(organizations, () => {
-  if (isShown && currentSystem && organizations.value.data && organizations.value.data.length > 0) {
+  if (isShown && currentSystem && organizations.value.data && organizations.value.data.length) {
     // select the organization while editing a system
-    organizationId.value = currentSystem.organization.id || ''
+    organizationId.value = currentSystem.organization.logto_id || ''
   }
 })
 
@@ -190,7 +190,10 @@ function onShow() {
     // editing system
     name.value = currentSystem.name
     notes.value = currentSystem.notes || ''
-    organizationId.value = currentSystem.organization.id || ''
+
+    if (organizations.value.data?.length) {
+      organizationId.value = currentSystem.organization.logto_id || ''
+    }
   } else {
     // creating system, reset form to defaults
     name.value = ''

From 5b350c81738e45a2002b4501cdfd411988488dee Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Thu, 5 Mar 2026 18:25:26 +0100
Subject: [PATCH 04/31] Improve system detail page

---
 .../systems/SystemOverviewPanel.vue           |  5 ++-
 .../components/systems/SystemStatusCard.vue   | 45 +++++++++++--------
 .../systems/SystemSubscriptionCard.vue        | 27 +++++------
 frontend/src/i18n/en/translation.json         |  8 ++--
 frontend/src/i18n/it/translation.json         |  8 ++--
 frontend/src/lib/systems/systems.ts           |  9 +++-
 6 files changed, 59 insertions(+), 43 deletions(-)

diff --git a/frontend/src/components/systems/SystemOverviewPanel.vue b/frontend/src/components/systems/SystemOverviewPanel.vue
index c975ad038..cc1bb2783 100644
--- a/frontend/src/components/systems/SystemOverviewPanel.vue
+++ b/frontend/src/components/systems/SystemOverviewPanel.vue
@@ -4,11 +4,14 @@
 -->
 
 <script setup lang="ts">
+import { useSystemDetail } from '@/queries/systems/systemDetail'
 import SystemApplicationsCard from './SystemApplicationsCard.vue'
 import SystemInfoCard from './SystemInfoCard.vue'
 import SystemNetworkCard from './SystemNetworkCard.vue'
 import SystemStatusCard from './SystemStatusCard.vue'
 import SystemSubscriptionCard from './SystemSubscriptionCard.vue'
+
+const { state: systemDetail } = useSystemDetail()
 </script>
 
 <template>
@@ -16,7 +19,7 @@ import SystemSubscriptionCard from './SystemSubscriptionCard.vue'
     <SystemInfoCard />
     <SystemStatusCard />
     <SystemSubscriptionCard />
-    <SystemApplicationsCard />
+    <SystemApplicationsCard v-if="systemDetail.data?.type === 'ns8'" />
     <SystemNetworkCard class="3xl:col-span-4 md:col-span-2" />
   </div>
 </template>
diff --git a/frontend/src/components/systems/SystemStatusCard.vue b/frontend/src/components/systems/SystemStatusCard.vue
index a19223bfb..f2dd70bde 100644
--- a/frontend/src/components/systems/SystemStatusCard.vue
+++ b/frontend/src/components/systems/SystemStatusCard.vue
@@ -16,9 +16,9 @@ import { useLatestInventory } from '@/queries/systems/latestInventory'
 import {
   faCheck,
   faCircleInfo,
+  faHourglass,
   faQuestion,
   faTriangleExclamation,
-  faXmark,
 } from '@fortawesome/free-solid-svg-icons'
 import { formatDateTimeNoSeconds, formatUptime } from '@/lib/dateTime'
 import { useI18n } from 'vue-i18n'
@@ -30,26 +30,26 @@ const { state: systemDetail } = useSystemDetail()
 const { state: latestInventory } = useLatestInventory()
 
 const getBadgeKind = () => {
-  switch (systemDetail.value.data?.status) {
-    case 'online':
+  switch (systemDetail.value.data?.heartbeat_status) {
+    case 'active':
       return 'green'
-    case 'offline':
+    case 'inactive':
       return 'amber'
-    case 'deleted':
-      return 'rose'
-    default:
+    case 'unknown':
       return 'gray'
+    default:
+      return 'indigo'
   }
 }
 
 const getBadgeIcon = () => {
-  switch (systemDetail.value.data?.status) {
-    case 'online':
+  switch (systemDetail.value.data?.heartbeat_status) {
+    case 'active':
       return faCheck
-    case 'offline':
+    case 'inactive':
       return faTriangleExclamation
-    case 'deleted':
-      return faXmark
+    case 'unknown':
+      return faHourglass
     default:
       return faQuestion
   }
@@ -63,13 +63,6 @@ const getBadgeIcon = () => {
       <NeHeading tag="h6">
         {{ $t('common.status').toUpperCase() }}
       </NeHeading>
-      <!-- status badge -->
-      <NeBadgeV2 v-if="systemDetail.status === 'success'" :kind="getBadgeKind()">
-        <div class="flex items-center gap-1">
-          <FontAwesomeIcon :icon="getBadgeIcon()" class="size-4" />
-          {{ t(`systems.status_${systemDetail.data?.status}`) }}
-        </div>
-      </NeBadgeV2>
     </div>
     <!-- get system detail error notification -->
     <NeInlineNotification
@@ -92,6 +85,20 @@ const getBadgeIcon = () => {
       :lines="6"
     />
     <div v-else class="divide-y divide-gray-200 dark:divide-gray-700">
+      <!-- status -->
+      <DataItem>
+        <template #label>
+          {{ $t('common.status') }}
+        </template>
+        <template #data>
+          <NeBadgeV2 :kind="getBadgeKind()">
+            <div class="flex items-center gap-1">
+              <FontAwesomeIcon :icon="getBadgeIcon()" class="size-4" />
+              {{ t(`systems.status_${systemDetail.data?.heartbeat_status}`) }}
+            </div>
+          </NeBadgeV2>
+        </template>
+      </DataItem>
       <!-- uptime -->
       <DataItem>
         <template #label>
diff --git a/frontend/src/components/systems/SystemSubscriptionCard.vue b/frontend/src/components/systems/SystemSubscriptionCard.vue
index 66dd7d22c..442fad3dd 100644
--- a/frontend/src/components/systems/SystemSubscriptionCard.vue
+++ b/frontend/src/components/systems/SystemSubscriptionCard.vue
@@ -74,27 +74,19 @@ function onCloseSecretRegeneratedModal() {
     />
     <NeSkeleton v-else-if="systemDetail.status === 'pending'" :lines="6" />
     <div v-else class="divide-y divide-gray-200 dark:divide-gray-700">
-      <!-- system creation -->
+      <!-- subscribed since -->
       <DataItem>
         <template #label>
-          {{ $t('system_detail.system_creation') }}
+          {{ $t('system_detail.subscribed_since') }}
         </template>
         <template #data>
           {{
-            systemDetail.data?.created_at
-              ? formatDateTimeNoSeconds(new Date(systemDetail.data?.created_at), locale)
+            systemDetail.data?.registered_at
+              ? formatDateTimeNoSeconds(new Date(systemDetail.data?.registered_at), locale)
               : '-'
           }}
         </template>
       </DataItem>
-      <!-- subscription date -->
-      <DataItem>
-        <template #label>
-          {{ $t('system_detail.subscription') }}
-        </template>
-        <!-- //// TODO registration date should be sent by inventory -->
-        <template #data> - </template>
-      </DataItem>
       <!-- system key -->
       <DataItem>
         <template #label>
@@ -104,11 +96,20 @@ function onCloseSecretRegeneratedModal() {
           <ClickToCopy
             v-if="systemDetail.data?.system_key"
             :text="systemDetail.data?.system_key"
-            tooltip-placement="left"
+            tooltip-placement="bottom"
           />
           <span v-else>-</span>
         </template>
       </DataItem>
+      <!-- automatic updates -->
+      <!-- <DataItem> ////
+        <template #label>
+          {{ $t('system_detail.automatic_updates') }}
+        </template>
+        <template #data>
+          TODO
+        </template>
+      </DataItem> -->
     </div>
     <!-- regenerate secret modal -->
     <RegenerateSecretModal
diff --git a/frontend/src/i18n/en/translation.json b/frontend/src/i18n/en/translation.json
index f8b0efae8..62c68af41 100644
--- a/frontend/src/i18n/en/translation.json
+++ b/frontend/src/i18n/en/translation.json
@@ -456,9 +456,9 @@
     "complete_the_subscription": "Complete the subscription",
     "system_secret_warning": "Copy the secret and paste it into the Subscription page of the system. You won't be able to see the secret again.",
     "copy_system_secret": "Copy system secret",
-    "status_online": "Active",
-    "status_offline": "Inactive",
-    "status_unknown": "Inventory not received",
+    "status_active": "Active",
+    "status_inactive": "Inactive",
+    "status_unknown": "Heartbeat not received",
     "status_deleted": "Archived",
     "reset_filters": "Reset filters",
     "copy_and_close": "Copy and close",
@@ -515,7 +515,7 @@
     "no_inventory_available": "No inventory available",
     "no_inventory_available_description": "The system has not sent any inventory data yet.",
     "subscription": "Subscription",
-    "system_creation": "System creation",
+    "subscribed_since": "Subscribed since",
     "system_key": "System key",
     "cannot_determine_system_url_description": "Cannot access the system because its URL cannot be determined."
   },
diff --git a/frontend/src/i18n/it/translation.json b/frontend/src/i18n/it/translation.json
index b0915ca4a..9df2ed05d 100644
--- a/frontend/src/i18n/it/translation.json
+++ b/frontend/src/i18n/it/translation.json
@@ -456,9 +456,9 @@
     "complete_the_subscription": "Completa la subscription",
     "system_secret_warning": "Copia il segreto e incollalo nella pagina Subscription del sistema. Non sarai più in grado di visualizzare il segreto.",
     "copy_system_secret": "Copia segreto del sistema",
-    "status_online": "Attivo",
-    "status_offline": "Inattivo",
-    "status_unknown": "Inventario non ricevuto",
+    "status_active": "Attivo",
+    "status_inactive": "Inattivo",
+    "status_unknown": "Heartbeat non ricevuto",
     "status_deleted": "Archiviato",
     "reset_filters": "Reimposta filtri",
     "copy_and_close": "Copia e chiudi",
@@ -515,7 +515,7 @@
     "no_inventory_available": "Nessun inventario disponibile",
     "no_inventory_available_description": "Il sistema non ha ancora inviato dati di inventario.",
     "subscription": "Subscription",
-    "system_creation": "Creazione sistema",
+    "subscribed_since": "Registrato dal",
     "system_key": "Chiave di sistema",
     "cannot_determine_system_url_description": "Impossibile accedere al sistema perché non è possibile determinarne l'URL."
   },
diff --git a/frontend/src/lib/systems/systems.ts b/frontend/src/lib/systems/systems.ts
index c5faa2e48..7dde19d2f 100644
--- a/frontend/src/lib/systems/systems.ts
+++ b/frontend/src/lib/systems/systems.ts
@@ -14,11 +14,13 @@ export const SYSTEMS_TOTAL_KEY = 'systemsTotal'
 export const SYSTEMS_TABLE_ID = 'systemsTable'
 
 export type SystemStatus = 'online' | 'offline' | 'unknown' | 'deleted' | 'suspended'
-
 const systemStatusOptions = ['online', 'offline', 'unknown', 'deleted', 'suspended']
-
 const SystemStatusSchema = v.picklist(systemStatusOptions)
 
+// export type HeartbeatStatus = 'active' | 'inactive' | 'unknown //// '
+const heartbeatStatusOptions = ['active', 'inactive', 'unknown']
+const HeartbeatStatusSchema = v.picklist(heartbeatStatusOptions)
+
 export const CreateSystemSchema = v.object({
   name: v.pipe(v.string(), v.nonEmpty('systems.name_cannot_be_empty')),
   organization_id: v.pipe(v.string(), v.nonEmpty('systems.organization_required')),
@@ -42,11 +44,14 @@ export const SystemSchema = v.object({
   version: v.string(),
   created_at: v.string(),
   updated_at: v.string(),
+  registered_at: v.optional(v.string()),
   system_key: v.optional(v.string()),
   system_secret: v.string(),
   suspended_at: v.optional(v.string()),
+  heartbeat_status: HeartbeatStatusSchema,
   organization: v.object({
     id: v.string(),
+    logto_id: v.string(),
     name: v.string(),
     type: v.string(),
   }),

From 7105a315a060e75a689064795e9e11ec6e66af3c Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Fri, 6 Mar 2026 09:36:56 +0100
Subject: [PATCH 05/31] Fix company link in system detail

---
 .../src/components/systems/SystemInfoCard.vue | 32 +++++++++++++++----
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/systems/SystemInfoCard.vue b/frontend/src/components/systems/SystemInfoCard.vue
index 6003f884e..fcf41a2e1 100644
--- a/frontend/src/components/systems/SystemInfoCard.vue
+++ b/frontend/src/components/systems/SystemInfoCard.vue
@@ -11,6 +11,7 @@ import {
   NeInlineNotification,
   NeLink,
   NeSkeleton,
+  NeTooltip,
   type NeDropdownItem,
 } from '@nethesis/vue-components'
 import { useSystemDetail } from '@/queries/systems/systemDetail'
@@ -19,18 +20,26 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { getOrganizationIcon } from '@/lib/organizations/organizations'
 import DataItem from '../DataItem.vue'
 import ClickToCopy from '../ClickToCopy.vue'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import NotesModal from '../NotesModal.vue'
 import { canManageSystems } from '@/lib/permissions'
 import { faFileCsv, faFilePdf, faPenToSquare } from '@fortawesome/free-solid-svg-icons'
 import { useI18n } from 'vue-i18n'
 import CreateOrEditSystemDrawer from './CreateOrEditSystemDrawer.vue'
+import OrganizationIcon from '../organizations/OrganizationIcon.vue'
+import OrganizationLink from '../applications/OrganizationLink.vue'
 
 const { t } = useI18n()
 const { state: systemDetail, asyncStatus } = useSystemDetail()
 const isNotesModalShown = ref(false)
 const isShownCreateOrEditSystemDrawer = ref(false)
 
+const organizationTypeLabel = computed(() => {
+  const orgType = systemDetail.value.data?.organization.type
+  if (!orgType) return ''
+  return t(`organizations.${orgType.toLowerCase()}`)
+})
+
 function getKebabMenuItems() {
   let items: NeDropdownItem[] = []
 
@@ -154,12 +163,23 @@ function getKebabMenuItems() {
           </template>
           <template #data>
             <div class="flex items-center gap-2">
-              <FontAwesomeIcon
-                :icon="getOrganizationIcon(systemDetail.data.organization.type)"
-                class="size-5 shrink-0"
-                aria-hidden="true"
+              <NeTooltip
+                v-if="systemDetail.data.organization.type"
+                trigger-event="mouseenter focus"
+                placement="top"
+              >
+                <template #trigger>
+                  <OrganizationIcon :org-type="systemDetail.data.organization.type" size="xs" />
+                </template>
+                <template #content>
+                  {{ organizationTypeLabel }}
+                </template>
+              </NeTooltip>
+              <OrganizationLink
+                v-if="systemDetail.data.organization"
+                :organization="systemDetail.data.organization"
               />
-              {{ systemDetail.data.organization.name || '-' }}
+              <span v-else class="font-medium">-</span>
             </div>
           </template>
         </DataItem>

From c313a800fa7e87498efa1252ec10e30343ae52bb Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Fri, 6 Mar 2026 09:48:22 +0100
Subject: [PATCH 06/31] Improve i18n label

---
 frontend/src/components/systems/SystemInfoCard.vue         | 2 --
 frontend/src/components/systems/SystemSubscriptionCard.vue | 2 +-
 frontend/src/i18n/en/translation.json                      | 2 +-
 frontend/src/i18n/it/translation.json                      | 2 +-
 4 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/systems/SystemInfoCard.vue b/frontend/src/components/systems/SystemInfoCard.vue
index fcf41a2e1..4243b2078 100644
--- a/frontend/src/components/systems/SystemInfoCard.vue
+++ b/frontend/src/components/systems/SystemInfoCard.vue
@@ -16,8 +16,6 @@ import {
 } from '@nethesis/vue-components'
 import { useSystemDetail } from '@/queries/systems/systemDetail'
 import { exportSystem, getProductLogo, getProductName } from '@/lib/systems/systems'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { getOrganizationIcon } from '@/lib/organizations/organizations'
 import DataItem from '../DataItem.vue'
 import ClickToCopy from '../ClickToCopy.vue'
 import { computed, ref } from 'vue'
diff --git a/frontend/src/components/systems/SystemSubscriptionCard.vue b/frontend/src/components/systems/SystemSubscriptionCard.vue
index 442fad3dd..d9c49841d 100644
--- a/frontend/src/components/systems/SystemSubscriptionCard.vue
+++ b/frontend/src/components/systems/SystemSubscriptionCard.vue
@@ -77,7 +77,7 @@ function onCloseSecretRegeneratedModal() {
       <!-- subscribed since -->
       <DataItem>
         <template #label>
-          {{ $t('system_detail.subscribed_since') }}
+          {{ $t('system_detail.active_since') }}
         </template>
         <template #data>
           {{
diff --git a/frontend/src/i18n/en/translation.json b/frontend/src/i18n/en/translation.json
index 62c68af41..999dff79e 100644
--- a/frontend/src/i18n/en/translation.json
+++ b/frontend/src/i18n/en/translation.json
@@ -515,7 +515,7 @@
     "no_inventory_available": "No inventory available",
     "no_inventory_available_description": "The system has not sent any inventory data yet.",
     "subscription": "Subscription",
-    "subscribed_since": "Subscribed since",
+    "active_since": "Active since",
     "system_key": "System key",
     "cannot_determine_system_url_description": "Cannot access the system because its URL cannot be determined."
   },
diff --git a/frontend/src/i18n/it/translation.json b/frontend/src/i18n/it/translation.json
index 9df2ed05d..83d6e61cf 100644
--- a/frontend/src/i18n/it/translation.json
+++ b/frontend/src/i18n/it/translation.json
@@ -515,7 +515,7 @@
     "no_inventory_available": "Nessun inventario disponibile",
     "no_inventory_available_description": "Il sistema non ha ancora inviato dati di inventario.",
     "subscription": "Subscription",
-    "subscribed_since": "Registrato dal",
+    "active_since": "Attiva dal",
     "system_key": "Chiave di sistema",
     "cannot_determine_system_url_description": "Impossibile accedere al sistema perché non è possibile determinarne l'URL."
   },

From deab0b4f30d828c67631efc904d64299789c673c Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Fri, 6 Mar 2026 16:27:21 +0100
Subject: [PATCH 07/31] Add actions to system detail kebab

---
 .../components/customers/CustomersTable.vue   |   2 +-
 .../distributors/DistributorsTable.vue        |   2 +-
 .../components/resellers/ResellersTable.vue   |   2 +-
 .../components/systems/DeleteSystemModal.vue  |   5 +-
 .../components/systems/DestroySystemModal.vue |   5 +-
 .../src/components/systems/SystemInfoCard.vue | 107 +++++++++++++++++-
 frontend/src/components/users/UsersTable.vue  |   2 +-
 7 files changed, 112 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/customers/CustomersTable.vue b/frontend/src/components/customers/CustomersTable.vue
index db72e5191..5370d19a2 100644
--- a/frontend/src/components/customers/CustomersTable.vue
+++ b/frontend/src/components/customers/CustomersTable.vue
@@ -284,7 +284,7 @@ const goToCustomerDetails = (customer: Customer) => {
             :label="t('common.status')"
             :options="statusFilterOptions"
             :show-clear-filter="false"
-            :clear-filter-label="t('ne_dropdown_filter.reset_filter')"
+            :clear-filter-label="t('ne_dropdown_filter.clear_filter')"
             :open-menu-aria-label="t('ne_dropdown_filter.open_filter')"
             :no-options-label="t('ne_dropdown_filter.no_options')"
             :more-options-hidden-label="t('ne_dropdown_filter.more_options_hidden')"
diff --git a/frontend/src/components/distributors/DistributorsTable.vue b/frontend/src/components/distributors/DistributorsTable.vue
index 23d1c8a59..57176bb09 100644
--- a/frontend/src/components/distributors/DistributorsTable.vue
+++ b/frontend/src/components/distributors/DistributorsTable.vue
@@ -286,7 +286,7 @@ const goToDistributorDetails = (distributor: Distributor) => {
             :label="t('common.status')"
             :options="statusFilterOptions"
             :show-clear-filter="false"
-            :clear-filter-label="t('ne_dropdown_filter.reset_filter')"
+            :clear-filter-label="t('ne_dropdown_filter.clear_filter')"
             :open-menu-aria-label="t('ne_dropdown_filter.open_filter')"
             :no-options-label="t('ne_dropdown_filter.no_options')"
             :more-options-hidden-label="t('ne_dropdown_filter.more_options_hidden')"
diff --git a/frontend/src/components/resellers/ResellersTable.vue b/frontend/src/components/resellers/ResellersTable.vue
index ebc3d4373..ffe4d565e 100644
--- a/frontend/src/components/resellers/ResellersTable.vue
+++ b/frontend/src/components/resellers/ResellersTable.vue
@@ -285,7 +285,7 @@ const goToResellerDetails = (reseller: Reseller) => {
             :label="t('common.status')"
             :options="statusFilterOptions"
             :show-clear-filter="false"
-            :clear-filter-label="t('ne_dropdown_filter.reset_filter')"
+            :clear-filter-label="t('ne_dropdown_filter.clear_filter')"
             :open-menu-aria-label="t('ne_dropdown_filter.open_filter')"
             :no-options-label="t('ne_dropdown_filter.no_options')"
             :more-options-hidden-label="t('ne_dropdown_filter.more_options_hidden')"
diff --git a/frontend/src/components/systems/DeleteSystemModal.vue b/frontend/src/components/systems/DeleteSystemModal.vue
index db4bc6db8..fa8435438 100644
--- a/frontend/src/components/systems/DeleteSystemModal.vue
+++ b/frontend/src/components/systems/DeleteSystemModal.vue
@@ -16,7 +16,7 @@ const { visible = false, system = undefined } = defineProps<{
   system: System | undefined
 }>()
 
-const emit = defineEmits(['close'])
+const emit = defineEmits(['close', 'success'])
 
 const { t } = useI18n()
 const notificationsStore = useNotificationsStore()
@@ -44,12 +44,13 @@ const {
     }, 500)
 
     emit('close')
+    emit('success')
   },
   onError: (error) => {
     console.error('Error deleting system:', error)
   },
   onSettled: () => {
-    queryCache.invalidateQueries({ key: [SYSTEMS_KEY] })
+    queryCache.invalidateQueries({ key: [SYSTEMS_KEY], exact: true })
     queryCache.invalidateQueries({ key: [SYSTEMS_TOTAL_KEY] })
     queryCache.invalidateQueries({ key: [SYSTEM_FILTERS_KEY] })
   },
diff --git a/frontend/src/components/systems/DestroySystemModal.vue b/frontend/src/components/systems/DestroySystemModal.vue
index 4da17342e..411ce7ae8 100644
--- a/frontend/src/components/systems/DestroySystemModal.vue
+++ b/frontend/src/components/systems/DestroySystemModal.vue
@@ -15,7 +15,7 @@ const { visible = false, system = undefined } = defineProps<{
   system: System | undefined
 }>()
 
-const emit = defineEmits(['close'])
+const emit = defineEmits(['close', 'success'])
 
 const { t } = useI18n()
 const notificationsStore = useNotificationsStore()
@@ -43,12 +43,13 @@ const {
     }, 500)
 
     emit('close')
+    emit('success')
   },
   onError: (error) => {
     console.error('Error destroying system:', error)
   },
   onSettled: () => {
-    queryCache.invalidateQueries({ key: [SYSTEMS_KEY] })
+    queryCache.invalidateQueries({ key: [SYSTEMS_KEY], exact: true })
     queryCache.invalidateQueries({ key: [SYSTEMS_TOTAL_KEY] })
   },
 })
diff --git a/frontend/src/components/systems/SystemInfoCard.vue b/frontend/src/components/systems/SystemInfoCard.vue
index 4243b2078..ec001c32c 100644
--- a/frontend/src/components/systems/SystemInfoCard.vue
+++ b/frontend/src/components/systems/SystemInfoCard.vue
@@ -20,10 +20,23 @@ import DataItem from '../DataItem.vue'
 import ClickToCopy from '../ClickToCopy.vue'
 import { computed, ref } from 'vue'
 import NotesModal from '../NotesModal.vue'
-import { canManageSystems } from '@/lib/permissions'
-import { faFileCsv, faFilePdf, faPenToSquare } from '@fortawesome/free-solid-svg-icons'
+import { canManageSystems, canDestroySystems } from '@/lib/permissions'
+import {
+  faFileCsv,
+  faFilePdf,
+  faPenToSquare,
+  faBoxArchive,
+  faCirclePause,
+  faCirclePlay,
+  faBomb,
+} from '@fortawesome/free-solid-svg-icons'
 import { useI18n } from 'vue-i18n'
+import router from '@/router'
 import CreateOrEditSystemDrawer from './CreateOrEditSystemDrawer.vue'
+import DeleteSystemModal from './DeleteSystemModal.vue'
+import SuspendSystemModal from './SuspendSystemModal.vue'
+import ReactivateSystemModal from './ReactivateSystemModal.vue'
+import DestroySystemModal from './DestroySystemModal.vue'
 import OrganizationIcon from '../organizations/OrganizationIcon.vue'
 import OrganizationLink from '../applications/OrganizationLink.vue'
 
@@ -31,6 +44,10 @@ const { t } = useI18n()
 const { state: systemDetail, asyncStatus } = useSystemDetail()
 const isNotesModalShown = ref(false)
 const isShownCreateOrEditSystemDrawer = ref(false)
+const isShownDeleteSystemModal = ref(false)
+const isShownSuspendSystemModal = ref(false)
+const isShownReactivateSystemModal = ref(false)
+const isShownDestroySystemModal = ref(false)
 
 const organizationTypeLabel = computed(() => {
   const orgType = systemDetail.value.data?.organization.type
@@ -39,9 +56,10 @@ const organizationTypeLabel = computed(() => {
 })
 
 function getKebabMenuItems() {
+  const system = systemDetail.value.data
   let items: NeDropdownItem[] = []
 
-  if (canManageSystems()) {
+  if (canManageSystems() && system?.status !== 'deleted') {
     items.push({
       id: 'editSystem',
       label: t('common.edit'),
@@ -57,17 +75,70 @@ function getKebabMenuItems() {
       id: 'exportToPdf',
       label: t('systems.export_to_pdf'),
       icon: faFilePdf,
-      action: () => exportSystem(systemDetail.value.data!, 'pdf'),
+      action: () => exportSystem(system!, 'pdf'),
       disabled: asyncStatus.value === 'loading',
     },
     {
       id: 'exportToCsv',
       label: t('systems.export_to_csv'),
       icon: faFileCsv,
-      action: () => exportSystem(systemDetail.value.data!, 'csv'),
+      action: () => exportSystem(system!, 'csv'),
       disabled: asyncStatus.value === 'loading',
     },
   ]
+
+  if (canManageSystems() && system?.status !== 'deleted') {
+    if (system?.suspended_at) {
+      items = [
+        ...items,
+        {
+          id: 'reactivateSystem',
+          label: t('common.reactivate'),
+          icon: faCirclePlay,
+          action: () => (isShownReactivateSystemModal.value = true),
+          disabled: asyncStatus.value === 'loading',
+        },
+      ]
+    } else {
+      items = [
+        ...items,
+        {
+          id: 'suspendSystem',
+          label: t('common.suspend'),
+          icon: faCirclePause,
+          action: () => (isShownSuspendSystemModal.value = true),
+          disabled: asyncStatus.value === 'loading',
+        },
+      ]
+    }
+
+    items = [
+      ...items,
+      {
+        id: 'deleteSystem',
+        label: t('common.archive'),
+        icon: faBoxArchive,
+        danger: true,
+        action: () => (isShownDeleteSystemModal.value = true),
+        disabled: asyncStatus.value === 'loading',
+      },
+    ]
+  }
+
+  if (canDestroySystems()) {
+    items = [
+      ...items,
+      {
+        id: 'destroySystem',
+        label: t('common.destroy'),
+        icon: faBomb,
+        danger: true,
+        action: () => (isShownDestroySystemModal.value = true),
+        disabled: asyncStatus.value === 'loading',
+      },
+    ]
+  }
+
   return items
 }
 </script>
@@ -218,5 +289,31 @@ function getKebabMenuItems() {
       :current-system="systemDetail.data!"
       @close="isShownCreateOrEditSystemDrawer = false"
     />
+    <!-- delete system modal -->
+    <DeleteSystemModal
+      :visible="isShownDeleteSystemModal"
+      :system="systemDetail.data"
+      @close="isShownDeleteSystemModal = false"
+      @success="router.push({ name: 'systems' })"
+    />
+    <!-- suspend system modal -->
+    <SuspendSystemModal
+      :visible="isShownSuspendSystemModal"
+      :system="systemDetail.data"
+      @close="isShownSuspendSystemModal = false"
+    />
+    <!-- reactivate system modal -->
+    <ReactivateSystemModal
+      :visible="isShownReactivateSystemModal"
+      :system="systemDetail.data"
+      @close="isShownReactivateSystemModal = false"
+    />
+    <!-- destroy system modal -->
+    <DestroySystemModal
+      :visible="isShownDestroySystemModal"
+      :system="systemDetail.data"
+      @close="isShownDestroySystemModal = false"
+      @success="router.push({ name: 'systems' })"
+    />
   </NeCard>
 </template>
diff --git a/frontend/src/components/users/UsersTable.vue b/frontend/src/components/users/UsersTable.vue
index b5dfb430e..6ea58a32f 100644
--- a/frontend/src/components/users/UsersTable.vue
+++ b/frontend/src/components/users/UsersTable.vue
@@ -394,7 +394,7 @@ const onClosePasswordChangedModal = () => {
             :label="t('common.status')"
             :options="statusFilterOptions"
             :show-clear-filter="false"
-            :clear-filter-label="t('ne_dropdown_filter.reset_filter')"
+            :clear-filter-label="t('ne_dropdown_filter.clear_filter')"
             :open-menu-aria-label="t('ne_dropdown_filter.open_filter')"
             :no-options-label="t('ne_dropdown_filter.no_options')"
             :more-options-hidden-label="t('ne_dropdown_filter.more_options_hidden')"

From 685afd3da3d2d8e7b80d309806e2c12e1d8147ee Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Fri, 6 Mar 2026 17:36:49 +0100
Subject: [PATCH 08/31] Fix uptime and timezone

---
 .../components/systems/SystemStatusCard.vue   | 63 +++++++++---
 frontend/src/i18n/en/translation.json         |  2 +
 frontend/src/lib/systems/inventory.ts         | 96 ++++++++++++++++++-
 3 files changed, 147 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/systems/SystemStatusCard.vue b/frontend/src/components/systems/SystemStatusCard.vue
index f2dd70bde..748432233 100644
--- a/frontend/src/components/systems/SystemStatusCard.vue
+++ b/frontend/src/components/systems/SystemStatusCard.vue
@@ -24,11 +24,52 @@ import { formatDateTimeNoSeconds, formatUptime } from '@/lib/dateTime'
 import { useI18n } from 'vue-i18n'
 import { useSystemDetail } from '@/queries/systems/systemDetail'
 import DataItem from '../DataItem.vue'
+import { computed } from 'vue'
 
 const { t, locale } = useI18n()
 const { state: systemDetail } = useSystemDetail()
 const { state: latestInventory } = useLatestInventory()
 
+const uptimeLabel = computed(() => {
+  return systemType.value === 'ns8'
+    ? t('system_detail.leader_node_uptime')
+    : t('system_detail.uptime')
+})
+
+const timezoneLabel = computed(() => {
+  return systemType.value === 'ns8'
+    ? t('system_detail.leader_node_timezone')
+    : t('system_detail.timezone')
+})
+
+const systemType = computed(() => systemDetail.value.data?.type)
+
+const leaderNode = computed(() => {
+  const nodes = latestInventory.value.data?.data?.facts?.nodes
+
+  if (!nodes) {
+    return null
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any //// improve typing
+  return (Object.values(nodes).find((node: any) => node.cluster_leader === true) as any) ?? null
+})
+
+const uptimeSeconds = computed(() => {
+  if (systemType.value === 'ns8') {
+    return leaderNode.value?.uptime_seconds as number
+  } else {
+    return latestInventory.value.data?.data?.facts?.uptime_seconds as number | undefined
+  }
+})
+
+const timezone = computed(() => {
+  if (systemType.value === 'ns8') {
+    return leaderNode.value?.timezone as string
+  } else {
+    return latestInventory.value.data?.data?.facts?.timezone as string | undefined
+  }
+})
+
 const getBadgeKind = () => {
   switch (systemDetail.value.data?.heartbeat_status) {
     case 'active':
@@ -99,39 +140,35 @@ const getBadgeIcon = () => {
           </NeBadgeV2>
         </template>
       </DataItem>
-      <!-- uptime -->
+      <!-- last inventory -->
       <DataItem>
         <template #label>
-          {{ $t('system_detail.uptime') }}
+          {{ $t('system_detail.last_inventory') }}
         </template>
         <template #data>
           {{
-            latestInventory.data?.data?.system_uptime?.seconds
-              ? formatUptime(latestInventory.data?.data?.system_uptime?.seconds, $t)
+            latestInventory.data?.timestamp
+              ? formatDateTimeNoSeconds(new Date(latestInventory.data?.timestamp), locale)
               : '-'
           }}
         </template>
       </DataItem>
-      <!-- last inventory -->
+      <!-- uptime -->
       <DataItem>
         <template #label>
-          {{ $t('system_detail.last_inventory') }}
+          {{ uptimeLabel }}
         </template>
         <template #data>
-          {{
-            latestInventory.data?.timestamp
-              ? formatDateTimeNoSeconds(new Date(latestInventory.data?.timestamp), locale)
-              : '-'
-          }}
+          {{ uptimeSeconds ? formatUptime(uptimeSeconds, $t) : '-' }}
         </template>
       </DataItem>
       <!-- timezone -->
       <DataItem>
         <template #label>
-          {{ $t('system_detail.timezone') }}
+          {{ timezoneLabel }}
         </template>
         <template #data>
-          {{ latestInventory.data?.data?.timezone || '-' }}
+          {{ timezone ? timezone : '-' }}
         </template>
       </DataItem>
     </div>
diff --git a/frontend/src/i18n/en/translation.json b/frontend/src/i18n/en/translation.json
index 999dff79e..4a6f191df 100644
--- a/frontend/src/i18n/en/translation.json
+++ b/frontend/src/i18n/en/translation.json
@@ -506,8 +506,10 @@
     "go_to_system": "Go to system",
     "go_to_system_tooltip": "Note: The system may be unreachable due to network settings.",
     "uptime": "Uptime",
+    "leader_node_uptime": "Leader node uptime",
     "last_inventory": "Last inventory",
     "timezone": "Timezone",
+    "leader_node_timezone": "Leader node timezone",
     "network": "Network",
     "dns_servers": "DNS servers",
     "cannot_retrieve_system_detail": "Cannot retrieve system detail",
diff --git a/frontend/src/lib/systems/inventory.ts b/frontend/src/lib/systems/inventory.ts
index de5801ae5..83c2011a3 100644
--- a/frontend/src/lib/systems/inventory.ts
+++ b/frontend/src/lib/systems/inventory.ts
@@ -12,9 +12,103 @@ interface InventoryData {
   system_id: string
   timestamp: string
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  data: any // The structure of inventory data can be complex and varied
+  data: any //// improve typing
 }
 
+//// move specific facts to separate files?
+
+// interface NsecFacts { ////
+//   distro: {
+//     name: string
+//     version: string
+//   }
+//   memory: {
+//     // swap: { ////
+//     //   used_bytes: number
+//     //   available_bytes: number
+//     // }
+//     // ...
+//   }
+//   features: NsecFeatures
+// }
+
+// interface NsecFeatures {
+//   ha: {
+//     vips: number
+//     enabled: boolean
+//   }
+//   ui: {
+//     luci: boolean
+//     port443: boolean
+//     port9090: boolean
+//   }
+//   dpi: {
+//     rules: number
+//     enabled: boolean
+//   }
+//   qos: {
+//     count: number
+//     rules: unknown[]
+//   }
+//   ddns: {
+//     enabled: boolean
+//   }
+//   snmp: {
+//     enabled: boolean
+//   }
+//   ipsec: {
+//     count: number
+//   }
+//   snort: {
+//     policy: string
+//     enabled: boolean
+//     oink_enabled: boolean
+//     disabled_rules: number
+//     bypass_dst_ipv4: number
+//     bypass_dst_ipv6: number
+//     bypass_src_ipv4: number
+//     bypass_src_ipv6: number
+//     suppressed_rules: number
+//   }
+//   adblock: {
+//     enabled: boolean
+//     community: number
+//     enterprise: number
+//   }
+//   backups: {
+//     passphrase_date: number
+//     backup_passphrase: boolean
+//   }
+//   hotspot: {
+//     server: string
+//     enabled: boolean
+//     interface: string
+//   }
+//   netifyd: {
+//     enabled: boolean
+//   }
+//   network: NsecNetworkFeature
+// }
+
+// interface NsecNetworkFeature {
+//   zones: {
+//     ipv4: number
+//     ipv6: number
+//     name: string
+//   }[]
+//   route_info: {
+//     count_ipv4_route: number
+//     count_ipv6_route: number
+//   }
+//   interface_counts: {
+//     bonds: number
+//     vlans: number
+//     bridges: number
+//   }
+//   zone_network_counts: Record<string, number>
+// }
+
+//// remove?
 export interface EsmithConfiguration {
   name: string
   type: string

From 2a15032f5e76a88dfcbbc906ee0ec42350b3786c Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Fri, 6 Mar 2026 18:00:15 +0100
Subject: [PATCH 09/31] Improve system and application icons

---
 .../src/assets/system_logos/nethserver.svg    |  9 ++++---
 .../applications/ApplicationInfoCard.vue      | 11 +++-----
 .../applications/ApplicationLogo.vue          | 22 ++++++++++++++++
 .../applications/ApplicationsTable.vue        | 15 +++--------
 .../OrganizationApplicationsCard.vue          | 10 ++------
 .../organizations/OrganizationSystemsCard.vue | 10 ++------
 .../systems/SystemApplicationsCard.vue        | 10 ++------
 .../src/components/systems/SystemInfoCard.vue | 11 +++-----
 .../src/components/systems/SystemLogo.vue     | 22 ++++++++++++++++
 .../components/systems/SystemStatusCard.vue   |  3 ++-
 .../src/components/systems/SystemsTable.vue   | 25 +++----------------
 frontend/src/i18n/en/translation.json         |  1 -
 frontend/src/i18n/it/translation.json         |  1 -
 13 files changed, 70 insertions(+), 80 deletions(-)
 create mode 100644 frontend/src/components/applications/ApplicationLogo.vue
 create mode 100644 frontend/src/components/systems/SystemLogo.vue

diff --git a/frontend/src/assets/system_logos/nethserver.svg b/frontend/src/assets/system_logos/nethserver.svg
index 20a94141d..ef3cc503b 100644
--- a/frontend/src/assets/system_logos/nethserver.svg
+++ b/frontend/src/assets/system_logos/nethserver.svg
@@ -1,6 +1,7 @@
 <svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 6C0 2.68629 2.68629 0 6 0H122C125.314 0 128 2.68629 128 6V122C128 125.314 125.314 128 122 128H6C2.68629 128 0 125.314 0 122V6Z" fill="#139FD5"/>
-<path d="M81.4482 33.4175C87.2732 33.5111 92.3299 35.0854 96.4668 38.1538C100.502 41.1579 102.659 45.3461 103.041 50.9478H92.9115C92.4902 47.5067 90.7643 44.9952 87.7761 43.4822C86.04 42.6051 83.8695 42.1768 81.4497 42.0467V33.4175H81.4482Z" fill="white"/>
-<path d="M46.3048 43.1021C41.8063 43.1021 38.4697 44.5727 36.1068 47.6074C34.2613 49.9347 33.3342 52.8832 33.3342 56.3638V88.7435H23.04V56.035C23.04 49.1365 25.2951 43.5523 29.7367 39.4153C34.1097 35.2871 39.525 33.28 46.3062 33.28C53.1471 33.28 58.6222 35.3076 63.0404 39.4986C67.3712 43.6839 69.5709 49.255 69.5709 56.035V67.3042H59.2869V56.3638C59.2869 52.8832 58.3525 49.9347 56.5144 47.6074C54.1456 44.5727 50.809 43.1021 46.3048 43.1021Z" fill="white"/>
-<path d="M99.0315 87.5741C95.0564 90.9773 89.3291 92.7022 81.9897 92.7022C74.4739 92.7022 69.662 90.9919 65.4143 87.6282C61.4174 84.4794 59.2993 80.1333 59.1055 74.6939H69.2349C69.662 77.1687 70.4448 79.1086 71.5468 80.4243C73.745 83.0395 76.3178 84.3698 81.5057 84.3698C84.5523 84.3698 87.0624 84.0248 88.9939 83.3596C92.8538 82.0118 94.8188 79.4361 94.8188 75.7215C94.8188 73.4688 93.8159 71.7015 91.8349 70.4619C90.0128 69.3713 87.2622 68.4284 83.4168 67.6039L81.4431 67.1669H81.4489V57.2425L90.1921 59.3066C94.5681 60.343 97.8785 61.7303 100.023 63.4231C103.348 66.0559 104.96 69.7704 104.96 74.7977C104.958 79.9053 102.966 84.1987 99.0315 87.5741Z" fill="white"/>
+<path d="M6 0.5H122C125.038 0.5 127.5 2.96243 127.5 6V122C127.5 125.038 125.038 127.5 122 127.5H6C2.96243 127.5 0.5 125.038 0.5 122V6C0.5 2.96243 2.96243 0.5 6 0.5Z" fill="#F9FAFB"/>
+<path d="M6 0.5H122C125.038 0.5 127.5 2.96243 127.5 6V122C127.5 125.038 125.038 127.5 122 127.5H6C2.96243 127.5 0.5 125.038 0.5 122V6C0.5 2.96243 2.96243 0.5 6 0.5Z" stroke="#E5E7EB"/>
+<path d="M81.4492 33.4175C87.2741 33.511 92.3309 35.0854 96.4678 38.1538C100.503 41.1579 102.66 45.3461 103.042 50.9478H92.9125C92.4912 47.5067 90.7653 44.9952 87.777 43.4822C86.0409 42.6051 83.8704 42.1768 81.4507 42.0467V33.4175H81.4492Z" fill="#139FD5"/>
+<path d="M46.3038 43.1021C41.8054 43.1021 38.4687 44.5727 36.1058 47.6075C34.2604 49.9347 33.3333 52.8832 33.3333 56.3639V88.7436H23.0391V56.035C23.0391 49.1366 25.2941 43.5523 29.7357 39.4153C34.1088 35.2871 39.524 33.28 46.3052 33.28C53.1461 33.28 58.6212 35.3076 63.0395 39.4987C67.3702 43.6839 69.5699 49.255 69.5699 56.035V67.3043H59.2859V56.3639C59.2859 52.8832 58.3516 49.9347 56.5134 47.6075C54.1447 44.5727 50.808 43.1021 46.3038 43.1021Z" fill="#139FD5"/>
+<path d="M99.0315 87.5741C95.0564 90.9772 89.3291 92.7022 81.9897 92.7022C74.4739 92.7022 69.662 90.9919 65.4143 87.6282C61.4174 84.4794 59.2993 80.1333 59.1055 74.6938H69.2349C69.662 77.1687 70.4448 79.1086 71.5468 80.4242C73.745 83.0395 76.3178 84.3697 81.5057 84.3697C84.5523 84.3697 87.0624 84.0247 88.9939 83.3596C92.8538 82.0118 94.8188 79.436 94.8188 75.7215C94.8188 73.4688 93.8159 71.7015 91.8349 70.4618C90.0128 69.3713 87.2622 68.4284 83.4168 67.6039L81.4431 67.1668H81.4489V57.2424L90.1921 59.3065C94.5681 60.343 97.8785 61.7303 100.023 63.4231C103.348 66.0558 104.96 69.7704 104.96 74.7976C104.958 79.9053 102.966 84.1987 99.0315 87.5741Z" fill="#139FD5"/>
 </svg>
diff --git a/frontend/src/components/applications/ApplicationInfoCard.vue b/frontend/src/components/applications/ApplicationInfoCard.vue
index 8009bf7b7..abcf513f6 100644
--- a/frontend/src/components/applications/ApplicationInfoCard.vue
+++ b/frontend/src/components/applications/ApplicationInfoCard.vue
@@ -20,7 +20,8 @@ import DataItem from '@/components/DataItem.vue'
 import NotesModal from '@/components/NotesModal.vue'
 import OrganizationIcon from '@/components/organizations/OrganizationIcon.vue'
 import OrganizationLink from '@/components/applications/OrganizationLink.vue'
-import { getApplicationLogo, getDisplayName } from '@/lib/applications/applications'
+import { getDisplayName } from '@/lib/applications/applications'
+import ApplicationLogo from '@/components/applications/ApplicationLogo.vue'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { canManageApplications } from '@/lib/permissions'
@@ -100,13 +101,7 @@ function getKebabMenuItems() {
     <div v-else-if="applicationDetail.data">
       <div class="mb-4 flex items-center justify-between gap-4">
         <div class="flex items-center gap-4">
-          <img
-            v-if="applicationDetail.data.instance_of"
-            :src="getApplicationLogo(applicationDetail.data.instance_of)"
-            :alt="applicationDetail.data.instance_of"
-            aria-hidden="true"
-            class="size-8"
-          />
+          <ApplicationLogo :app="applicationDetail.data.instance_of" />
           <NeHeading tag="h6">
             {{ getDisplayName(applicationDetail.data) }}
           </NeHeading>
diff --git a/frontend/src/components/applications/ApplicationLogo.vue b/frontend/src/components/applications/ApplicationLogo.vue
new file mode 100644
index 000000000..3308b79c7
--- /dev/null
+++ b/frontend/src/components/applications/ApplicationLogo.vue
@@ -0,0 +1,22 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { getApplicationLogo } from '@/lib/applications/applications'
+
+const props = defineProps<{
+  app?: string
+}>()
+</script>
+
+<template>
+  <img
+    v-if="props.app"
+    :src="getApplicationLogo(props.app)"
+    :alt="props.app"
+    aria-hidden="true"
+    class="size-8 rounded-md"
+  />
+</template>
diff --git a/frontend/src/components/applications/ApplicationsTable.vue b/frontend/src/components/applications/ApplicationsTable.vue
index 1c11dcb5c..f046e87ad 100644
--- a/frontend/src/components/applications/ApplicationsTable.vue
+++ b/frontend/src/components/applications/ApplicationsTable.vue
@@ -39,11 +39,8 @@ import { canManageApplications } from '@/lib/permissions'
 import { SYSTEMS_TABLE_ID } from '@/lib/systems/systems'
 import OrganizationIcon from '../organizations/OrganizationIcon.vue'
 import { useApplications } from '@/queries/applications/applications'
-import {
-  getApplicationLogo,
-  getDisplayName,
-  type Application,
-} from '@/lib/applications/applications'
+import { getDisplayName, type Application } from '@/lib/applications/applications'
+import ApplicationLogo from './ApplicationLogo.vue'
 import { faGridOne } from '@nethesis/nethesis-solid-svg-icons'
 import AssignOrganizationDrawer from './AssignOrganizationDrawer.vue'
 import SetNotesDrawer from './SetNotesDrawer.vue'
@@ -377,13 +374,7 @@ const goToApplicationDetails = (application: Application) => {
             </NeTableCell>
             <NeTableCell :data-label="$t('applications.type')">
               <div class="flex items-center gap-2">
-                <img
-                  v-if="item.instance_of"
-                  :src="getApplicationLogo(item.instance_of)"
-                  :alt="item.instance_of"
-                  aria-hidden="true"
-                  class="size-8"
-                />
+                <ApplicationLogo :app="item.instance_of" />
                 <span class="font-medium">
                   {{ item.name || '-' }}
                 </span>
diff --git a/frontend/src/components/organizations/OrganizationApplicationsCard.vue b/frontend/src/components/organizations/OrganizationApplicationsCard.vue
index f5d5c17b8..09ffbed2f 100644
--- a/frontend/src/components/organizations/OrganizationApplicationsCard.vue
+++ b/frontend/src/components/organizations/OrganizationApplicationsCard.vue
@@ -9,7 +9,7 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faArrowRight } from '@fortawesome/free-solid-svg-icons'
 import { faGridOne } from '@nethesis/nethesis-solid-svg-icons'
 import CounterCard from '@/components/CounterCard.vue'
-import { getApplicationLogo } from '@/lib/applications/applications'
+import ApplicationLogo from '@/components/applications/ApplicationLogo.vue'
 import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
 import router from '@/router'
@@ -65,13 +65,7 @@ const goToApplications = () => {
         class="flex items-center justify-between py-3"
       >
         <div class="flex items-center gap-2">
-          <img
-            v-if="appType.instance_of"
-            :src="getApplicationLogo(appType.instance_of)"
-            :alt="appType.instance_of"
-            aria-hidden="true"
-            class="size-8"
-          />
+          <ApplicationLogo :app="appType.instance_of" />
           <span class="font-medium">
             {{ appType.name || '-' }}
           </span>
diff --git a/frontend/src/components/organizations/OrganizationSystemsCard.vue b/frontend/src/components/organizations/OrganizationSystemsCard.vue
index 05eb3ea15..3d53e788a 100644
--- a/frontend/src/components/organizations/OrganizationSystemsCard.vue
+++ b/frontend/src/components/organizations/OrganizationSystemsCard.vue
@@ -8,7 +8,7 @@ import { NeButton, NeLink } from '@nethesis/vue-components'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faArrowRight, faServer } from '@fortawesome/free-solid-svg-icons'
 import CounterCard from '@/components/CounterCard.vue'
-import { getProductLogo, getProductName } from '@/lib/systems/systems'
+import SystemLogo from '@/components/systems/SystemLogo.vue'
 import SystemStatusIcon from '@/components/systems/SystemStatusIcon.vue'
 import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
@@ -72,13 +72,7 @@ const goToSystems = () => {
           class="cursor-pointer font-medium hover:underline"
         >
           <div class="flex items-center gap-2">
-            <img
-              v-if="system.type"
-              :src="getProductLogo(system.type)"
-              :alt="getProductName(system.type)"
-              aria-hidden="true"
-              class="size-8"
-            />
+            <SystemLogo :system="system.type" />
             <span>
               {{ system.name || '-' }}
             </span>
diff --git a/frontend/src/components/systems/SystemApplicationsCard.vue b/frontend/src/components/systems/SystemApplicationsCard.vue
index b71b0cb11..afd3ce5c0 100644
--- a/frontend/src/components/systems/SystemApplicationsCard.vue
+++ b/frontend/src/components/systems/SystemApplicationsCard.vue
@@ -9,7 +9,7 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faArrowRight } from '@fortawesome/free-solid-svg-icons'
 import { faGridOne } from '@nethesis/nethesis-solid-svg-icons'
 import CounterCard from '@/components/CounterCard.vue'
-import { getApplicationLogo } from '@/lib/applications/applications'
+import ApplicationLogo from '@/components/applications/ApplicationLogo.vue'
 import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
 import router from '@/router'
@@ -65,13 +65,7 @@ const goToApplications = () => {
         class="flex items-center justify-between py-3"
       >
         <div class="flex items-center gap-2">
-          <img
-            v-if="appType.instance_of"
-            :src="getApplicationLogo(appType.instance_of)"
-            :alt="appType.instance_of"
-            aria-hidden="true"
-            class="size-8"
-          />
+          <ApplicationLogo :app="appType.instance_of" />
           <span class="font-medium">
             {{ appType.name || '-' }}
           </span>
diff --git a/frontend/src/components/systems/SystemInfoCard.vue b/frontend/src/components/systems/SystemInfoCard.vue
index ec001c32c..a5f387c78 100644
--- a/frontend/src/components/systems/SystemInfoCard.vue
+++ b/frontend/src/components/systems/SystemInfoCard.vue
@@ -15,7 +15,8 @@ import {
   type NeDropdownItem,
 } from '@nethesis/vue-components'
 import { useSystemDetail } from '@/queries/systems/systemDetail'
-import { exportSystem, getProductLogo, getProductName } from '@/lib/systems/systems'
+import { exportSystem, getProductName } from '@/lib/systems/systems'
+import SystemLogo from './SystemLogo.vue'
 import DataItem from '../DataItem.vue'
 import ClickToCopy from '../ClickToCopy.vue'
 import { computed, ref } from 'vue'
@@ -158,13 +159,7 @@ function getKebabMenuItems() {
       <!-- product logo and name -->
       <div class="mb-4 flex items-center justify-between gap-4">
         <div class="flex items-center gap-4">
-          <img
-            v-if="systemDetail.data.type"
-            :src="getProductLogo(systemDetail.data.type)"
-            :alt="$t('system_detail.product_logo', { product: systemDetail.data.type })"
-            aria-hidden="true"
-            class="size-8"
-          />
+          <SystemLogo :system="systemDetail.data.type" />
           <NeHeading tag="h6">
             {{
               getProductName(systemDetail.data.type || '') || $t('system_detail.unknown_product')
diff --git a/frontend/src/components/systems/SystemLogo.vue b/frontend/src/components/systems/SystemLogo.vue
new file mode 100644
index 000000000..a0a732752
--- /dev/null
+++ b/frontend/src/components/systems/SystemLogo.vue
@@ -0,0 +1,22 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { getProductLogo, getProductName } from '@/lib/systems/systems'
+
+const props = defineProps<{
+  system?: string
+}>()
+</script>
+
+<template>
+  <img
+    v-if="props.system"
+    :src="getProductLogo(props.system)"
+    :alt="getProductName(props.system)"
+    aria-hidden="true"
+    class="size-8 rounded-md"
+  />
+</template>
diff --git a/frontend/src/components/systems/SystemStatusCard.vue b/frontend/src/components/systems/SystemStatusCard.vue
index 748432233..da2b9b7fa 100644
--- a/frontend/src/components/systems/SystemStatusCard.vue
+++ b/frontend/src/components/systems/SystemStatusCard.vue
@@ -50,7 +50,8 @@ const leaderNode = computed(() => {
   if (!nodes) {
     return null
   }
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any //// improve typing
+  //// improve typing
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return (Object.values(nodes).find((node: any) => node.cluster_leader === true) as any) ?? null
 })
 
diff --git a/frontend/src/components/systems/SystemsTable.vue b/frontend/src/components/systems/SystemsTable.vue
index 99a5d672b..b954b3e73 100644
--- a/frontend/src/components/systems/SystemsTable.vue
+++ b/frontend/src/components/systems/SystemsTable.vue
@@ -45,13 +45,8 @@ import { useI18n } from 'vue-i18n'
 import { savePageSizeToStorage } from '@/lib/tablePageSize'
 import { canManageSystems, canDestroySystems } from '@/lib/permissions'
 import { useSystems } from '@/queries/systems/systems'
-import {
-  exportSystem,
-  getProductLogo,
-  getProductName,
-  SYSTEMS_TABLE_ID,
-  type System,
-} from '@/lib/systems/systems'
+import { exportSystem, getProductName, SYSTEMS_TABLE_ID, type System } from '@/lib/systems/systems'
+import SystemLogo from './SystemLogo.vue'
 import router from '@/router'
 import CreateOrEditSystemDrawer from './CreateOrEditSystemDrawer.vue'
 import DeleteSystemModal from './DeleteSystemModal.vue'
@@ -560,26 +555,14 @@ function onCloseSecretRegeneratedModal() {
                 class="cursor-pointer font-medium hover:underline"
               >
                 <div class="flex items-center gap-2">
-                  <img
-                    v-if="item.type"
-                    :src="getProductLogo(item.type)"
-                    :alt="getProductName(item.type)"
-                    aria-hidden="true"
-                    class="size-8"
-                  />
+                  <SystemLogo :system="item.type" />
                   <span>
                     {{ item.name || '-' }}
                   </span>
                 </div>
               </router-link>
               <div v-else class="flex items-center gap-2">
-                <img
-                  v-if="item.type"
-                  :src="getProductLogo(item.type)"
-                  :alt="getProductName(item.type)"
-                  aria-hidden="true"
-                  class="size-8"
-                />
+                <SystemLogo :system="item.type" />
                 <span>
                   {{ item.name || '-' }}
                 </span>
diff --git a/frontend/src/i18n/en/translation.json b/frontend/src/i18n/en/translation.json
index 4a6f191df..f6b8484e0 100644
--- a/frontend/src/i18n/en/translation.json
+++ b/frontend/src/i18n/en/translation.json
@@ -501,7 +501,6 @@
   "system_detail": {
     "title": "System detail",
     "overview": "Overview",
-    "product_logo": "{product} logo",
     "unknown_product": "Unknown product",
     "go_to_system": "Go to system",
     "go_to_system_tooltip": "Note: The system may be unreachable due to network settings.",
diff --git a/frontend/src/i18n/it/translation.json b/frontend/src/i18n/it/translation.json
index 83d6e61cf..57d072962 100644
--- a/frontend/src/i18n/it/translation.json
+++ b/frontend/src/i18n/it/translation.json
@@ -501,7 +501,6 @@
   "system_detail": {
     "title": "Dettaglio sistema",
     "overview": "Panoramica",
-    "product_logo": "Logo di {product}",
     "unknown_product": "Prodotto sconosciuto",
     "go_to_system": "Vai al sistema",
     "go_to_system_tooltip": "Nota: Il sistema potrebbe non essere raggiungibile a causa delle impostazioni di rete.",

From 6b13108ba3b69336de899f47c4e839c781372ffc Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Mon, 9 Mar 2026 09:01:19 +0000
Subject: [PATCH 10/31] chore: update build triggers for PR deployment
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Auto-updated .render-build-trigger files to ensure all services
are deployed in PR preview environments.

🤖 Generated by GitHub Actions
---
 backend/.render-build-trigger        | 4 ++--
 collect/.render-build-trigger        | 4 ++--
 frontend/.render-build-trigger       | 4 ++--
 proxy/.render-build-trigger          | 4 ++--
 services/mimir/.render-build-trigger | 2 +-
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/backend/.render-build-trigger b/backend/.render-build-trigger
index 3bb7a5909..89e6edccd 100644
--- a/backend/.render-build-trigger
+++ b/backend/.render-build-trigger
@@ -2,9 +2,9 @@
 # This file is used to force Docker service rebuilds in PR previews
 # Modify LAST_UPDATE to trigger rebuilds
 
-LAST_UPDATE=2026-02-10T12:10:22Z
+LAST_UPDATE=2026-03-09T09:01:19Z
 
 # Instructions:
 # 1. To force rebuild of Docker services in a PR, update LAST_UPDATE
-# 2. Run: perl -i -pe "s/LAST_UPDATE=2026-02-10T12:10:22Z
+# 2. Run: perl -i -pe "s/LAST_UPDATE=2026-03-09T09:01:19Z
 # 2. Commit and push changes to trigger Docker rebuilds
\ No newline at end of file
diff --git a/collect/.render-build-trigger b/collect/.render-build-trigger
index 3bb7a5909..89e6edccd 100644
--- a/collect/.render-build-trigger
+++ b/collect/.render-build-trigger
@@ -2,9 +2,9 @@
 # This file is used to force Docker service rebuilds in PR previews
 # Modify LAST_UPDATE to trigger rebuilds
 
-LAST_UPDATE=2026-02-10T12:10:22Z
+LAST_UPDATE=2026-03-09T09:01:19Z
 
 # Instructions:
 # 1. To force rebuild of Docker services in a PR, update LAST_UPDATE
-# 2. Run: perl -i -pe "s/LAST_UPDATE=2026-02-10T12:10:22Z
+# 2. Run: perl -i -pe "s/LAST_UPDATE=2026-03-09T09:01:19Z
 # 2. Commit and push changes to trigger Docker rebuilds
\ No newline at end of file
diff --git a/frontend/.render-build-trigger b/frontend/.render-build-trigger
index 3bb7a5909..89e6edccd 100644
--- a/frontend/.render-build-trigger
+++ b/frontend/.render-build-trigger
@@ -2,9 +2,9 @@
 # This file is used to force Docker service rebuilds in PR previews
 # Modify LAST_UPDATE to trigger rebuilds
 
-LAST_UPDATE=2026-02-10T12:10:22Z
+LAST_UPDATE=2026-03-09T09:01:19Z
 
 # Instructions:
 # 1. To force rebuild of Docker services in a PR, update LAST_UPDATE
-# 2. Run: perl -i -pe "s/LAST_UPDATE=2026-02-10T12:10:22Z
+# 2. Run: perl -i -pe "s/LAST_UPDATE=2026-03-09T09:01:19Z
 # 2. Commit and push changes to trigger Docker rebuilds
\ No newline at end of file
diff --git a/proxy/.render-build-trigger b/proxy/.render-build-trigger
index 3bb7a5909..89e6edccd 100644
--- a/proxy/.render-build-trigger
+++ b/proxy/.render-build-trigger
@@ -2,9 +2,9 @@
 # This file is used to force Docker service rebuilds in PR previews
 # Modify LAST_UPDATE to trigger rebuilds
 
-LAST_UPDATE=2026-02-10T12:10:22Z
+LAST_UPDATE=2026-03-09T09:01:19Z
 
 # Instructions:
 # 1. To force rebuild of Docker services in a PR, update LAST_UPDATE
-# 2. Run: perl -i -pe "s/LAST_UPDATE=2026-02-10T12:10:22Z
+# 2. Run: perl -i -pe "s/LAST_UPDATE=2026-03-09T09:01:19Z
 # 2. Commit and push changes to trigger Docker rebuilds
\ No newline at end of file
diff --git a/services/mimir/.render-build-trigger b/services/mimir/.render-build-trigger
index 9249691c6..f4eef0389 100644
--- a/services/mimir/.render-build-trigger
+++ b/services/mimir/.render-build-trigger
@@ -2,7 +2,7 @@
 # This file is used to force Docker service rebuilds in PR previews
 # Modify LAST_UPDATE to trigger rebuilds
 
-LAST_UPDATE=2025-10-22T15:22:55Z
+LAST_UPDATE=2026-03-09T09:01:19Z
 
 # Instructions:
 # 1. To force rebuild of Docker services in a PR, update LAST_UPDATE

From 5df2b78a5e6fb0db2094acddd727b4c5bc2b5584 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Mon, 9 Mar 2026 13:00:31 +0100
Subject: [PATCH 11/31] Fix system status

---
 .../organizations/OrganizationSystemsCard.vue   |  9 +++------
 .../src/components/systems/SystemStatusCard.vue |  6 +++---
 .../src/components/systems/SystemStatusIcon.vue | 17 ++++++++---------
 .../src/components/systems/SystemsTable.vue     | 17 +++++++----------
 frontend/src/i18n/en/translation.json           |  3 ++-
 frontend/src/i18n/it/translation.json           |  2 +-
 frontend/src/lib/applications/applications.ts   |  2 +-
 frontend/src/lib/systems/systems.ts             | 12 ++++++------
 frontend/src/queries/systems/systems.ts         |  8 ++++----
 9 files changed, 35 insertions(+), 41 deletions(-)

diff --git a/frontend/src/components/organizations/OrganizationSystemsCard.vue b/frontend/src/components/organizations/OrganizationSystemsCard.vue
index 3d53e788a..49cf625ba 100644
--- a/frontend/src/components/organizations/OrganizationSystemsCard.vue
+++ b/frontend/src/components/organizations/OrganizationSystemsCard.vue
@@ -79,13 +79,10 @@ const goToSystems = () => {
           </div>
         </router-link>
         <div class="flex items-center gap-2">
-          <SystemStatusIcon :status="system.status" :suspended-at="system.suspended_at" />
-          <span v-if="system.suspended_at">
-            {{ t('common.suspended') }}
-          </span>
-          <span v-else-if="system.status">
+          <template v-if="system.status">
+            <SystemStatusIcon :status="system.status" />
             {{ t(`systems.status_${system.status}`) }}
-          </span>
+          </template>
           <span v-else>-</span>
         </div>
       </div>
diff --git a/frontend/src/components/systems/SystemStatusCard.vue b/frontend/src/components/systems/SystemStatusCard.vue
index da2b9b7fa..58e24fd4e 100644
--- a/frontend/src/components/systems/SystemStatusCard.vue
+++ b/frontend/src/components/systems/SystemStatusCard.vue
@@ -72,7 +72,7 @@ const timezone = computed(() => {
 })
 
 const getBadgeKind = () => {
-  switch (systemDetail.value.data?.heartbeat_status) {
+  switch (systemDetail.value.data?.status) {
     case 'active':
       return 'green'
     case 'inactive':
@@ -85,7 +85,7 @@ const getBadgeKind = () => {
 }
 
 const getBadgeIcon = () => {
-  switch (systemDetail.value.data?.heartbeat_status) {
+  switch (systemDetail.value.data?.status) {
     case 'active':
       return faCheck
     case 'inactive':
@@ -136,7 +136,7 @@ const getBadgeIcon = () => {
           <NeBadgeV2 :kind="getBadgeKind()">
             <div class="flex items-center gap-1">
               <FontAwesomeIcon :icon="getBadgeIcon()" class="size-4" />
-              {{ t(`systems.status_${systemDetail.data?.heartbeat_status}`) }}
+              {{ t(`systems.status_${systemDetail.data?.status}`) }}
             </div>
           </NeBadgeV2>
         </template>
diff --git a/frontend/src/components/systems/SystemStatusIcon.vue b/frontend/src/components/systems/SystemStatusIcon.vue
index 7ec7214cd..195ffe9dd 100644
--- a/frontend/src/components/systems/SystemStatusIcon.vue
+++ b/frontend/src/components/systems/SystemStatusIcon.vue
@@ -15,29 +15,28 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 defineProps<{
   status?: string | null
-  suspendedAt?: string | null
 }>()
 </script>
 
 <template>
   <FontAwesomeIcon
-    v-if="suspendedAt"
-    :icon="faCirclePause"
-    class="size-4 text-gray-700 dark:text-gray-400"
-    aria-hidden="true"
-  />
-  <FontAwesomeIcon
-    v-else-if="status === 'online'"
+    v-if="status === 'active'"
     :icon="faCircleCheck"
     class="size-4 text-green-600 dark:text-green-400"
     aria-hidden="true"
   />
   <FontAwesomeIcon
-    v-else-if="status === 'offline'"
+    v-else-if="status === 'inactive'"
     :icon="faTriangleExclamation"
     class="size-4 text-amber-700 dark:text-amber-500"
     aria-hidden="true"
   />
+  <FontAwesomeIcon
+    v-if="status === 'suspended'"
+    :icon="faCirclePause"
+    class="size-4 text-gray-700 dark:text-gray-400"
+    aria-hidden="true"
+  />
   <FontAwesomeIcon
     v-else-if="status === 'deleted'"
     :icon="faBoxArchive"
diff --git a/frontend/src/components/systems/SystemsTable.vue b/frontend/src/components/systems/SystemsTable.vue
index b954b3e73..06bfc70f4 100644
--- a/frontend/src/components/systems/SystemsTable.vue
+++ b/frontend/src/components/systems/SystemsTable.vue
@@ -101,12 +101,12 @@ const newSecret = ref<string>('')
 
 const statusFilterOptions = ref<FilterOption[]>([
   {
-    id: 'online',
-    label: t('systems.status_online'),
+    id: 'active',
+    label: t('systems.status_active'),
   },
   {
-    id: 'offline',
-    label: t('systems.status_offline'),
+    id: 'inactive',
+    label: t('systems.status_inactive'),
   },
   {
     id: 'unknown',
@@ -636,13 +636,10 @@ function onCloseSecretRegeneratedModal() {
           </NeTableCell>
           <NeTableCell :data-label="$t('systems.status')">
             <div class="flex items-center gap-2">
-              <SystemStatusIcon :status="item.status" :suspended-at="item.suspended_at" />
-              <span v-if="item.suspended_at">
-                {{ t('common.suspended') }}
-              </span>
-              <span v-else-if="item.status">
+              <template v-if="item.status">
+                <SystemStatusIcon :status="item.status" />
                 {{ t(`systems.status_${item.status}`) }}
-              </span>
+              </template>
               <span v-else>-</span>
             </div>
           </NeTableCell>
diff --git a/frontend/src/i18n/en/translation.json b/frontend/src/i18n/en/translation.json
index f6b8484e0..9092fcbf2 100644
--- a/frontend/src/i18n/en/translation.json
+++ b/frontend/src/i18n/en/translation.json
@@ -458,7 +458,8 @@
     "copy_system_secret": "Copy system secret",
     "status_active": "Active",
     "status_inactive": "Inactive",
-    "status_unknown": "Heartbeat not received",
+    "status_unknown": "Pending",
+    "status_suspended": "Suspended",
     "status_deleted": "Archived",
     "reset_filters": "Reset filters",
     "copy_and_close": "Copy and close",
diff --git a/frontend/src/i18n/it/translation.json b/frontend/src/i18n/it/translation.json
index 57d072962..7a8ea2a59 100644
--- a/frontend/src/i18n/it/translation.json
+++ b/frontend/src/i18n/it/translation.json
@@ -458,7 +458,7 @@
     "copy_system_secret": "Copia segreto del sistema",
     "status_active": "Attivo",
     "status_inactive": "Inattivo",
-    "status_unknown": "Heartbeat non ricevuto",
+    "status_unknown": "In attesa",
     "status_deleted": "Archiviato",
     "reset_filters": "Reimposta filtri",
     "copy_and_close": "Copia e chiudi",
diff --git a/frontend/src/lib/applications/applications.ts b/frontend/src/lib/applications/applications.ts
index b5e6de4ba..af643203d 100644
--- a/frontend/src/lib/applications/applications.ts
+++ b/frontend/src/lib/applications/applications.ts
@@ -14,7 +14,7 @@ export const APPLICATIONS_TOTAL_KEY = 'applicationsTotal'
 export const APPLICATIONS_TABLE_ID = 'applicationsTable'
 export const SHOW_UNASSIGNED_APPS_NOTIFICATION = 'showUnassignedAppsNotification'
 
-export type ApplicationStatus = 'online' | 'offline' | 'unknown' | 'deleted'
+// export type ApplicationStatus = 'online' | 'offline' | 'unknown' | 'deleted' //// needed?
 
 const applicationLogos = import.meta.glob('../../assets/application_logos/*.svg', {
   eager: true,
diff --git a/frontend/src/lib/systems/systems.ts b/frontend/src/lib/systems/systems.ts
index 7dde19d2f..d7e6105bb 100644
--- a/frontend/src/lib/systems/systems.ts
+++ b/frontend/src/lib/systems/systems.ts
@@ -13,13 +13,13 @@ export const SYSTEMS_KEY = 'systems'
 export const SYSTEMS_TOTAL_KEY = 'systemsTotal'
 export const SYSTEMS_TABLE_ID = 'systemsTable'
 
-export type SystemStatus = 'online' | 'offline' | 'unknown' | 'deleted' | 'suspended'
-const systemStatusOptions = ['online', 'offline', 'unknown', 'deleted', 'suspended']
+export type SystemStatus = 'active' | 'inactive' | 'unknown' | 'deleted' | 'suspended'
+const systemStatusOptions = ['active', 'inactive', 'unknown', 'deleted', 'suspended']
 const SystemStatusSchema = v.picklist(systemStatusOptions)
 
-// export type HeartbeatStatus = 'active' | 'inactive' | 'unknown //// '
-const heartbeatStatusOptions = ['active', 'inactive', 'unknown']
-const HeartbeatStatusSchema = v.picklist(heartbeatStatusOptions)
+// export type HeartbeatStatus = 'active' | 'inactive' | 'unknown' ////
+// const heartbeatStatusOptions = ['active', 'inactive', 'unknown'] ////
+// const HeartbeatStatusSchema = v.picklist(heartbeatStatusOptions) ////
 
 export const CreateSystemSchema = v.object({
   name: v.pipe(v.string(), v.nonEmpty('systems.name_cannot_be_empty')),
@@ -48,7 +48,7 @@ export const SystemSchema = v.object({
   system_key: v.optional(v.string()),
   system_secret: v.string(),
   suspended_at: v.optional(v.string()),
-  heartbeat_status: HeartbeatStatusSchema,
+  // heartbeat_status: HeartbeatStatusSchema, ////
   organization: v.object({
     id: v.string(),
     logto_id: v.string(),
diff --git a/frontend/src/queries/systems/systems.ts b/frontend/src/queries/systems/systems.ts
index e51d0eded..4eb1292c6 100644
--- a/frontend/src/queries/systems/systems.ts
+++ b/frontend/src/queries/systems/systems.ts
@@ -26,7 +26,7 @@ export const useSystems = defineQuery(() => {
   const productFilter = ref<string[]>([])
   const createdByFilter = ref<string[]>([])
   const versionFilter = ref<string[]>([])
-  const statusFilter = ref<SystemStatus[]>(['online', 'offline', 'unknown', 'suspended'])
+  const statusFilter = ref<SystemStatus[]>(['active', 'inactive', 'unknown', 'suspended'])
   const organizationFilter = ref<string[]>([])
   const sortBy = ref<keyof System>('name')
   const sortDescending = ref(false)
@@ -71,8 +71,8 @@ export const useSystems = defineQuery(() => {
       createdByFilter.value.length === 0 &&
       organizationFilter.value.length === 0 &&
       statusFilter.value.length === 4 &&
-      statusFilter.value.includes('online') &&
-      statusFilter.value.includes('offline') &&
+      statusFilter.value.includes('active') &&
+      statusFilter.value.includes('inactive') &&
       statusFilter.value.includes('unknown') &&
       statusFilter.value.includes('suspended') &&
       !statusFilter.value.includes('deleted')
@@ -156,7 +156,7 @@ export const useSystems = defineQuery(() => {
     productFilter.value = []
     versionFilter.value = []
     createdByFilter.value = []
-    statusFilter.value = ['online', 'offline', 'unknown', 'suspended']
+    statusFilter.value = ['active', 'inactive', 'unknown', 'suspended']
     organizationFilter.value = []
   }
 

From 99281f7fe58a5df7adebae155b5a4901d0e054b7 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Tue, 10 Mar 2026 17:07:57 +0100
Subject: [PATCH 12/31] Fix system status

---
 .../components/systems/SystemStatusCard.vue   | 69 ++++++++-----------
 .../components/systems/SystemStatusIcon.vue   | 20 ++++--
 .../src/components/systems/SystemsTable.vue   | 18 +++++
 frontend/src/lib/applications/applications.ts |  2 -
 frontend/src/lib/systems/inventory.ts         |  2 +-
 frontend/src/lib/systems/systems.ts           | 12 ++--
 6 files changed, 67 insertions(+), 56 deletions(-)

diff --git a/frontend/src/components/systems/SystemStatusCard.vue b/frontend/src/components/systems/SystemStatusCard.vue
index 58e24fd4e..af9b59645 100644
--- a/frontend/src/components/systems/SystemStatusCard.vue
+++ b/frontend/src/components/systems/SystemStatusCard.vue
@@ -5,26 +5,21 @@
 
 <script setup lang="ts">
 import {
-  NeBadgeV2,
   NeCard,
   NeHeading,
   NeInlineNotification,
   NeSkeleton,
+  NeTooltip,
 } from '@nethesis/vue-components'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { useLatestInventory } from '@/queries/systems/latestInventory'
-import {
-  faCheck,
-  faCircleInfo,
-  faHourglass,
-  faQuestion,
-  faTriangleExclamation,
-} from '@fortawesome/free-solid-svg-icons'
+import { faCircleInfo, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons'
 import { formatDateTimeNoSeconds, formatUptime } from '@/lib/dateTime'
 import { useI18n } from 'vue-i18n'
 import { useSystemDetail } from '@/queries/systems/systemDetail'
 import DataItem from '../DataItem.vue'
 import { computed } from 'vue'
+import SystemStatusIcon from './SystemStatusIcon.vue'
 
 const { t, locale } = useI18n()
 const { state: systemDetail } = useSystemDetail()
@@ -70,32 +65,6 @@ const timezone = computed(() => {
     return latestInventory.value.data?.data?.facts?.timezone as string | undefined
   }
 })
-
-const getBadgeKind = () => {
-  switch (systemDetail.value.data?.status) {
-    case 'active':
-      return 'green'
-    case 'inactive':
-      return 'amber'
-    case 'unknown':
-      return 'gray'
-    default:
-      return 'indigo'
-  }
-}
-
-const getBadgeIcon = () => {
-  switch (systemDetail.value.data?.status) {
-    case 'active':
-      return faCheck
-    case 'inactive':
-      return faTriangleExclamation
-    case 'unknown':
-      return faHourglass
-    default:
-      return faQuestion
-  }
-}
 </script>
 
 <template>
@@ -133,12 +102,34 @@ const getBadgeIcon = () => {
           {{ $t('common.status') }}
         </template>
         <template #data>
-          <NeBadgeV2 :kind="getBadgeKind()">
-            <div class="flex items-center gap-1">
-              <FontAwesomeIcon :icon="getBadgeIcon()" class="size-4" />
+          <div class="flex items-center gap-2">
+            <template v-if="systemDetail.data?.status">
+              <SystemStatusIcon :status="systemDetail.data?.status" />
               {{ t(`systems.status_${systemDetail.data?.status}`) }}
-            </div>
-          </NeBadgeV2>
+            </template>
+            <span v-else>-</span>
+            <!-- no inventory warning (do not show for pending/unknown status) -->
+            <NeTooltip
+              v-if="
+                latestInventory.status === 'success' &&
+                !latestInventory.data &&
+                systemDetail.data?.status !== 'unknown'
+              "
+              trigger-event="mouseenter focus"
+              placement="top"
+            >
+              <template #trigger>
+                <FontAwesomeIcon
+                  :icon="faTriangleExclamation"
+                  class="size-4 text-amber-700 dark:text-amber-500"
+                  aria-hidden="true"
+                />
+              </template>
+              <template #content>
+                {{ $t('system_detail.no_inventory_available') }}
+              </template>
+            </NeTooltip>
+          </div>
         </template>
       </DataItem>
       <!-- last inventory -->
diff --git a/frontend/src/components/systems/SystemStatusIcon.vue b/frontend/src/components/systems/SystemStatusIcon.vue
index 195ffe9dd..c21cec1ae 100644
--- a/frontend/src/components/systems/SystemStatusIcon.vue
+++ b/frontend/src/components/systems/SystemStatusIcon.vue
@@ -4,17 +4,19 @@
 -->
 
 <script setup lang="ts">
+import type { SystemStatus } from '@/lib/systems/systems'
 import {
   faBoxArchive,
   faCircleCheck,
   faCirclePause,
   faCircleQuestion,
-  faTriangleExclamation,
+  faCircleXmark,
+  faClock,
 } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 defineProps<{
-  status?: string | null
+  status: SystemStatus
 }>()
 </script>
 
@@ -27,12 +29,12 @@ defineProps<{
   />
   <FontAwesomeIcon
     v-else-if="status === 'inactive'"
-    :icon="faTriangleExclamation"
-    class="size-4 text-amber-700 dark:text-amber-500"
+    :icon="faCircleXmark"
+    class="size-4 text-rose-700 dark:text-rose-500"
     aria-hidden="true"
   />
   <FontAwesomeIcon
-    v-if="status === 'suspended'"
+    v-else-if="status === 'suspended'"
     :icon="faCirclePause"
     class="size-4 text-gray-700 dark:text-gray-400"
     aria-hidden="true"
@@ -43,10 +45,16 @@ defineProps<{
     class="size-4 text-gray-700 dark:text-gray-400"
     aria-hidden="true"
   />
+  <FontAwesomeIcon
+    v-else-if="status === 'unknown'"
+    :icon="faClock"
+    class="size-4 text-gray-700 dark:text-gray-400"
+    aria-hidden="true"
+  />
   <FontAwesomeIcon
     v-else
     :icon="faCircleQuestion"
-    class="size-4 text-gray-700 dark:text-gray-400"
+    class="size-4 text-indigo-700 dark:text-indigo-400"
     aria-hidden="true"
   />
 </template>
diff --git a/frontend/src/components/systems/SystemsTable.vue b/frontend/src/components/systems/SystemsTable.vue
index 06bfc70f4..4f8dc3081 100644
--- a/frontend/src/components/systems/SystemsTable.vue
+++ b/frontend/src/components/systems/SystemsTable.vue
@@ -17,6 +17,7 @@ import {
   faCirclePause,
   faCirclePlay,
   faBomb,
+  faTriangleExclamation,
 } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import {
@@ -641,6 +642,23 @@ function onCloseSecretRegeneratedModal() {
                 {{ t(`systems.status_${item.status}`) }}
               </template>
               <span v-else>-</span>
+              <!-- no inventory warning (do not show for pending/unknown status) -->
+              <NeTooltip
+                v-if="!item.last_inventory && item.status !== 'unknown'"
+                trigger-event="mouseenter focus"
+                placement="top"
+              >
+                <template #trigger>
+                  <FontAwesomeIcon
+                    :icon="faTriangleExclamation"
+                    class="size-4 text-amber-700 dark:text-amber-500"
+                    aria-hidden="true"
+                  />
+                </template>
+                <template #content>
+                  {{ $t('system_detail.no_inventory_available') }}
+                </template>
+              </NeTooltip>
             </div>
           </NeTableCell>
           <NeTableCell :data-label="$t('common.actions')">
diff --git a/frontend/src/lib/applications/applications.ts b/frontend/src/lib/applications/applications.ts
index af643203d..907fc4347 100644
--- a/frontend/src/lib/applications/applications.ts
+++ b/frontend/src/lib/applications/applications.ts
@@ -14,8 +14,6 @@ export const APPLICATIONS_TOTAL_KEY = 'applicationsTotal'
 export const APPLICATIONS_TABLE_ID = 'applicationsTable'
 export const SHOW_UNASSIGNED_APPS_NOTIFICATION = 'showUnassignedAppsNotification'
 
-// export type ApplicationStatus = 'online' | 'offline' | 'unknown' | 'deleted' //// needed?
-
 const applicationLogos = import.meta.glob('../../assets/application_logos/*.svg', {
   eager: true,
   import: 'default',
diff --git a/frontend/src/lib/systems/inventory.ts b/frontend/src/lib/systems/inventory.ts
index 83c2011a3..7ef40e1ac 100644
--- a/frontend/src/lib/systems/inventory.ts
+++ b/frontend/src/lib/systems/inventory.ts
@@ -108,7 +108,7 @@ interface InventoryData {
 //   zone_network_counts: Record<string, number>
 // }
 
-//// remove?
+//// fix network card, then remove
 export interface EsmithConfiguration {
   name: string
   type: string
diff --git a/frontend/src/lib/systems/systems.ts b/frontend/src/lib/systems/systems.ts
index d7e6105bb..f4f46acb8 100644
--- a/frontend/src/lib/systems/systems.ts
+++ b/frontend/src/lib/systems/systems.ts
@@ -13,13 +13,7 @@ export const SYSTEMS_KEY = 'systems'
 export const SYSTEMS_TOTAL_KEY = 'systemsTotal'
 export const SYSTEMS_TABLE_ID = 'systemsTable'
 
-export type SystemStatus = 'active' | 'inactive' | 'unknown' | 'deleted' | 'suspended'
-const systemStatusOptions = ['active', 'inactive', 'unknown', 'deleted', 'suspended']
-const SystemStatusSchema = v.picklist(systemStatusOptions)
-
-// export type HeartbeatStatus = 'active' | 'inactive' | 'unknown' ////
-// const heartbeatStatusOptions = ['active', 'inactive', 'unknown'] ////
-// const HeartbeatStatusSchema = v.picklist(heartbeatStatusOptions) ////
+const SystemStatusSchema = v.picklist(['active', 'inactive', 'unknown', 'deleted', 'suspended'])
 
 export const CreateSystemSchema = v.object({
   name: v.pipe(v.string(), v.nonEmpty('systems.name_cannot_be_empty')),
@@ -48,7 +42,8 @@ export const SystemSchema = v.object({
   system_key: v.optional(v.string()),
   system_secret: v.string(),
   suspended_at: v.optional(v.string()),
-  // heartbeat_status: HeartbeatStatusSchema, ////
+  last_inventory: v.optional(v.string()),
+  rebranding_enabled: v.optional(v.boolean()),
   organization: v.object({
     id: v.string(),
     logto_id: v.string(),
@@ -68,6 +63,7 @@ export const SystemSchema = v.object({
 export type CreateSystem = v.InferOutput<typeof CreateSystemSchema>
 export type EditSystem = v.InferOutput<typeof EditSystemSchema>
 export type System = v.InferOutput<typeof SystemSchema>
+export type SystemStatus = v.InferOutput<typeof SystemStatusSchema>
 
 interface SystemsResponse {
   code: number

From a87dc8823290e2e09ed11c1072558bc0ef50c02a Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Wed, 11 Mar 2026 11:32:48 +0100
Subject: [PATCH 13/31] Update @nethesis/nethesis-light-svg-icons

---
 frontend/package-lock.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 5d82845af..642f58404 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1637,7 +1637,7 @@
     },
     "node_modules/@nethesis/nethesis-light-svg-icons": {
       "version": "6.2.1",
-      "resolved": "git+ssh://git@github.com/nethesis/Font-Awesome.git#68498993562d2c62b5361b1b9852ae48ed08f16c",
+      "resolved": "git+ssh://git@github.com/nethesis/Font-Awesome.git#675844c1b083aa7308a0cd2b0f430a6dfd442d1a",
       "hasInstallScript": true,
       "license": "UNLICENSED",
       "dependencies": {

From ba4aeb982df96274ee56d4aca4dd18a4d3a751de Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Wed, 11 Mar 2026 11:45:03 +0100
Subject: [PATCH 14/31] Make phone number optional everywhere

---
 frontend/src/components/account/ProfilePanel.vue     |  2 ++
 .../src/components/users/CreateOrEditUserDrawer.vue  |  2 ++
 frontend/src/lib/account.ts                          |  5 ++---
 frontend/src/lib/users/users.ts                      | 12 ++++++------
 4 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/account/ProfilePanel.vue b/frontend/src/components/account/ProfilePanel.vue
index 701101d73..2a58362f0 100644
--- a/frontend/src/components/account/ProfilePanel.vue
+++ b/frontend/src/components/account/ProfilePanel.vue
@@ -153,6 +153,8 @@ function validate(profile: ProfileInfo): boolean {
         :label="$t('users.phone_number')"
         :invalid-message="validationIssues.phone?.[0] ? $t(validationIssues.phone[0]) : ''"
         :disabled="editUserLoading || loginStore.isOwner || loginStore.isImpersonating"
+        :optional="true"
+        :optional-label="t('common.optional')"
       />
       <!-- organization -->
       <div>
diff --git a/frontend/src/components/users/CreateOrEditUserDrawer.vue b/frontend/src/components/users/CreateOrEditUserDrawer.vue
index 56ddf8edf..d102e879b 100644
--- a/frontend/src/components/users/CreateOrEditUserDrawer.vue
+++ b/frontend/src/components/users/CreateOrEditUserDrawer.vue
@@ -423,6 +423,8 @@ function getEmailInvalidMessage(): string {
           :label="$t('users.phone_number')"
           :invalid-message="validationIssues.phone?.[0] ? $t(validationIssues.phone[0]) : ''"
           :disabled="saving"
+          :optional="true"
+          :optional-label="t('common.optional')"
         />
         <!-- new user info -->
         <NeInlineNotification
diff --git a/frontend/src/lib/account.ts b/frontend/src/lib/account.ts
index 9d799d793..5641dad01 100644
--- a/frontend/src/lib/account.ts
+++ b/frontend/src/lib/account.ts
@@ -5,13 +5,12 @@ import axios from 'axios'
 import { API_URL } from './config'
 import { useLoginStore } from '@/stores/login'
 import * as v from 'valibot'
+import { PhoneNumberSchema } from './users/users'
 
 export const ProfileInfoSchema = v.object({
   name: v.pipe(v.string(), v.nonEmpty('users.name_cannot_be_empty')),
   email: v.pipe(v.string(), v.nonEmpty('users.email_required'), v.email('users.email_invalid')),
-  phone: v.optional(
-    v.pipe(v.string(), v.regex(/^\+?[\d\s\-\(\)]{7,20}$/, 'users.phone_invalid_format')),
-  ),
+  phone: v.optional(v.union([v.literal(''), PhoneNumberSchema])),
 })
 
 export const ChangePasswordSchema = v.pipe(
diff --git a/frontend/src/lib/users/users.ts b/frontend/src/lib/users/users.ts
index a71ac9d2e..7c2d2a1ac 100644
--- a/frontend/src/lib/users/users.ts
+++ b/frontend/src/lib/users/users.ts
@@ -13,15 +13,15 @@ export const USERS_TABLE_ID = 'usersTable'
 
 export type UserStatus = 'enabled' | 'suspended' | 'deleted'
 
+export const PhoneNumberSchema = v.pipe(
+  v.string(),
+  v.regex(/^\+?[\d\s\-\(\)]{7,20}$/, 'users.phone_invalid_format'),
+)
+
 export const CreateUserSchema = v.object({
   email: v.pipe(v.string(), v.nonEmpty('users.email_required'), v.email('users.email_invalid')),
   name: v.pipe(v.string(), v.nonEmpty('users.name_cannot_be_empty')),
-  phone: v.optional(
-    v.union([
-      v.literal(''),
-      v.pipe(v.string(), v.regex(/^\+?[\d\s\-\(\)]{7,20}$/, 'users.phone_invalid_format')),
-    ]),
-  ),
+  phone: v.optional(v.union([v.literal(''), PhoneNumberSchema])),
   user_role_ids: v.pipe(
     v.array(v.string()),
     v.minLength(1, 'users.user_role_ids_at_least_one_role_is_required'),

From 845acadecaf80ba08d61d6d35846ee58d4e90972 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Wed, 11 Mar 2026 15:47:02 +0100
Subject: [PATCH 15/31] Use UpdatingSpinner component

---
 .../components/applications/ApplicationsTable.vue  | 12 ++----------
 .../src/components/customers/CustomersTable.vue    | 14 +++-----------
 .../components/distributors/DistributorsTable.vue  | 14 +++-----------
 .../src/components/resellers/ResellersTable.vue    | 14 +++-----------
 frontend/src/components/systems/SystemsTable.vue   | 14 +++-----------
 frontend/src/components/users/UsersTable.vue       | 14 +++-----------
 6 files changed, 17 insertions(+), 65 deletions(-)

diff --git a/frontend/src/components/applications/ApplicationsTable.vue b/frontend/src/components/applications/ApplicationsTable.vue
index f046e87ad..5475abba4 100644
--- a/frontend/src/components/applications/ApplicationsTable.vue
+++ b/frontend/src/components/applications/ApplicationsTable.vue
@@ -24,7 +24,6 @@ import {
   NeEmptyState,
   NeInlineNotification,
   NeTextInput,
-  NeSpinner,
   NeDropdown,
   type SortEvent,
   NeTooltip,
@@ -48,6 +47,7 @@ import OrganizationLink from './OrganizationLink.vue'
 import { useApplicationFilters } from '@/queries/applications/applicationFilters'
 import { buildVersionFilterOptions } from '@/lib/applications/applicationFilters'
 import router from '@/router'
+import UpdatingSpinner from '@/components/UpdatingSpinner.vue'
 
 const { t } = useI18n()
 const {
@@ -309,15 +309,7 @@ const goToApplicationDetails = (application: Application) => {
             </NeButton>
           </div>
           <!-- update indicator -->
-          <div
-            v-if="asyncStatus === 'loading' && state.status !== 'pending'"
-            class="relative -top-2 flex items-center gap-2"
-          >
-            <NeSpinner color="white" />
-            <div class="text-gray-500 dark:text-gray-400">
-              {{ $t('common.updating') }}
-            </div>
-          </div>
+          <UpdatingSpinner v-if="asyncStatus === 'loading' && state.status !== 'pending'" />
         </div>
       </div>
       <!-- no application matching filter -->
diff --git a/frontend/src/components/customers/CustomersTable.vue b/frontend/src/components/customers/CustomersTable.vue
index 5370d19a2..b4b961dfb 100644
--- a/frontend/src/components/customers/CustomersTable.vue
+++ b/frontend/src/components/customers/CustomersTable.vue
@@ -31,7 +31,6 @@ import {
   NeEmptyState,
   NeInlineNotification,
   NeTextInput,
-  NeSpinner,
   NeDropdown,
   type SortEvent,
   NeSortDropdown,
@@ -51,6 +50,7 @@ import { savePageSizeToStorage } from '@/lib/tablePageSize'
 import { useCustomers } from '@/queries/organizations/customers'
 import { canManageCustomers, canDestroyCustomers } from '@/lib/permissions'
 import router from '@/router'
+import UpdatingSpinner from '@/components/UpdatingSpinner.vue'
 
 const { isShownCreateCustomerDrawer = false } = defineProps<{
   isShownCreateCustomerDrawer: boolean
@@ -267,7 +267,7 @@ const goToCustomerDetails = (customer: Customer) => {
     />
     <!-- table toolbar -->
     <div class="mb-6 flex items-center gap-4">
-      <div class="flex w-full items-center justify-between gap-4">
+      <div class="flex w-full items-end justify-between gap-4">
         <!-- filters -->
         <div class="flex flex-wrap items-center gap-4">
           <!-- text filter -->
@@ -309,15 +309,7 @@ const goToCustomerDetails = (customer: Customer) => {
           </NeButton>
         </div>
         <!-- update indicator -->
-        <div
-          v-if="asyncStatus === 'loading' && state.status !== 'pending'"
-          class="flex items-center gap-2"
-        >
-          <NeSpinner color="white" />
-          <div class="text-gray-500 dark:text-gray-400">
-            {{ $t('common.updating') }}
-          </div>
-        </div>
+        <UpdatingSpinner v-if="asyncStatus === 'loading' && state.status !== 'pending'" />
       </div>
     </div>
     <!-- empty state -->
diff --git a/frontend/src/components/distributors/DistributorsTable.vue b/frontend/src/components/distributors/DistributorsTable.vue
index 57176bb09..c3a58a033 100644
--- a/frontend/src/components/distributors/DistributorsTable.vue
+++ b/frontend/src/components/distributors/DistributorsTable.vue
@@ -33,7 +33,6 @@ import {
   NeEmptyState,
   NeInlineNotification,
   NeTextInput,
-  NeSpinner,
   NeDropdown,
   type SortEvent,
   NeSortDropdown,
@@ -53,6 +52,7 @@ import { savePageSizeToStorage } from '@/lib/tablePageSize'
 import { useDistributors } from '@/queries/organizations/distributors'
 import { canDestroyDistributors, canManageDistributors } from '@/lib/permissions'
 import router from '@/router'
+import UpdatingSpinner from '@/components/UpdatingSpinner.vue'
 
 const { isShownCreateDistributorDrawer = false } = defineProps<{
   isShownCreateDistributorDrawer: boolean
@@ -269,7 +269,7 @@ const goToDistributorDetails = (distributor: Distributor) => {
     />
     <!-- table toolbar -->
     <div class="mb-6 flex items-center gap-4">
-      <div class="flex w-full items-center justify-between gap-4">
+      <div class="flex w-full items-end justify-between gap-4">
         <!-- filters -->
         <div class="flex flex-wrap items-center gap-4">
           <!-- text filter -->
@@ -311,15 +311,7 @@ const goToDistributorDetails = (distributor: Distributor) => {
           </NeButton>
         </div>
         <!-- update indicator -->
-        <div
-          v-if="asyncStatus === 'loading' && state.status !== 'pending'"
-          class="flex items-center gap-2"
-        >
-          <NeSpinner color="white" />
-          <div class="text-gray-500 dark:text-gray-400">
-            {{ $t('common.updating') }}
-          </div>
-        </div>
+        <UpdatingSpinner v-if="asyncStatus === 'loading' && state.status !== 'pending'" />
       </div>
     </div>
     <!-- empty state -->
diff --git a/frontend/src/components/resellers/ResellersTable.vue b/frontend/src/components/resellers/ResellersTable.vue
index ffe4d565e..733c4cc39 100644
--- a/frontend/src/components/resellers/ResellersTable.vue
+++ b/frontend/src/components/resellers/ResellersTable.vue
@@ -32,7 +32,6 @@ import {
   NeEmptyState,
   NeInlineNotification,
   NeTextInput,
-  NeSpinner,
   NeDropdown,
   type SortEvent,
   NeSortDropdown,
@@ -52,6 +51,7 @@ import { savePageSizeToStorage } from '@/lib/tablePageSize'
 import { useResellers } from '@/queries/organizations/resellers'
 import { canManageResellers, canDestroyResellers } from '@/lib/permissions'
 import router from '@/router'
+import UpdatingSpinner from '@/components/UpdatingSpinner.vue'
 
 const { isShownCreateResellerDrawer = false } = defineProps<{
   isShownCreateResellerDrawer: boolean
@@ -268,7 +268,7 @@ const goToResellerDetails = (reseller: Reseller) => {
     />
     <!-- table toolbar -->
     <div class="mb-6 flex items-center gap-4">
-      <div class="flex w-full items-center justify-between gap-4">
+      <div class="flex w-full items-end justify-between gap-4">
         <!-- filters -->
         <div class="flex flex-wrap items-center gap-4">
           <!-- text filter -->
@@ -310,15 +310,7 @@ const goToResellerDetails = (reseller: Reseller) => {
           </NeButton>
         </div>
         <!-- update indicator -->
-        <div
-          v-if="asyncStatus === 'loading' && state.status !== 'pending'"
-          class="flex items-center gap-2"
-        >
-          <NeSpinner color="white" />
-          <div class="text-gray-500 dark:text-gray-400">
-            {{ $t('common.updating') }}
-          </div>
-        </div>
+        <UpdatingSpinner v-if="asyncStatus === 'loading' && state.status !== 'pending'" />
       </div>
     </div>
     <!-- empty state -->
diff --git a/frontend/src/components/systems/SystemsTable.vue b/frontend/src/components/systems/SystemsTable.vue
index 4f8dc3081..09307e81a 100644
--- a/frontend/src/components/systems/SystemsTable.vue
+++ b/frontend/src/components/systems/SystemsTable.vue
@@ -32,7 +32,6 @@ import {
   NeEmptyState,
   NeInlineNotification,
   NeTextInput,
-  NeSpinner,
   NeDropdown,
   type SortEvent,
   NeSortDropdown,
@@ -63,6 +62,7 @@ import SuspendSystemModal from './SuspendSystemModal.vue'
 import ReactivateSystemModal from './ReactivateSystemModal.vue'
 import DestroySystemModal from './DestroySystemModal.vue'
 import SystemStatusIcon from './SystemStatusIcon.vue'
+import UpdatingSpinner from '@/components/UpdatingSpinner.vue'
 
 const { isShownCreateSystemDrawer = false } = defineProps<{
   isShownCreateSystemDrawer: boolean
@@ -384,7 +384,7 @@ function onCloseSecretRegeneratedModal() {
     />
     <!-- table toolbar -->
     <div class="mb-6 flex items-center gap-4">
-      <div class="flex w-full items-center justify-between gap-4">
+      <div class="flex w-full items-end justify-between gap-4">
         <!-- filters -->
         <div class="flex flex-wrap items-center gap-4">
           <!-- text filter -->
@@ -483,15 +483,7 @@ function onCloseSecretRegeneratedModal() {
           </NeButton>
         </div>
         <!-- update indicator -->
-        <div
-          v-if="asyncStatus === 'loading' && state.status !== 'pending'"
-          class="flex items-center gap-2"
-        >
-          <NeSpinner color="white" />
-          <div class="text-gray-500 dark:text-gray-400">
-            {{ $t('common.updating') }}
-          </div>
-        </div>
+        <UpdatingSpinner v-if="asyncStatus === 'loading' && state.status !== 'pending'" />
       </div>
     </div>
     <!-- empty state -->
diff --git a/frontend/src/components/users/UsersTable.vue b/frontend/src/components/users/UsersTable.vue
index 6ea58a32f..17d834e41 100644
--- a/frontend/src/components/users/UsersTable.vue
+++ b/frontend/src/components/users/UsersTable.vue
@@ -31,7 +31,6 @@ import {
   NeEmptyState,
   NeInlineNotification,
   NeTextInput,
-  NeSpinner,
   NeDropdown,
   type SortEvent,
   NeSortDropdown,
@@ -61,6 +60,7 @@ import UserRoleBadge from './UserRoleBadge.vue'
 import { useUserFilters } from '@/queries/users/userFilters'
 import { normalize } from '@/lib/common'
 import OrganizationLink from '../applications/OrganizationLink.vue'
+import UpdatingSpinner from '@/components/UpdatingSpinner.vue'
 
 const { isShownCreateUserDrawer = false } = defineProps<{
   isShownCreateUserDrawer: boolean
@@ -350,7 +350,7 @@ const onClosePasswordChangedModal = () => {
     />
     <!-- table toolbar -->
     <div class="mb-6 flex items-center gap-4">
-      <div class="flex w-full items-center justify-between gap-4">
+      <div class="flex w-full items-end justify-between gap-4">
         <!-- filters -->
         <div class="flex flex-wrap items-center gap-4">
           <!-- text filter -->
@@ -422,15 +422,7 @@ const onClosePasswordChangedModal = () => {
           </NeButton>
         </div>
         <!-- update indicator -->
-        <div
-          v-if="asyncStatus === 'loading' && state.status !== 'pending'"
-          class="flex items-center gap-2"
-        >
-          <NeSpinner color="white" />
-          <div class="text-gray-500 dark:text-gray-400">
-            {{ $t('common.updating') }}
-          </div>
-        </div>
+        <UpdatingSpinner v-if="asyncStatus === 'loading' && state.status !== 'pending'" />
       </div>
     </div>
     <!-- empty state -->

From 169bb8750ff7a111e496e13b73c8698f77695e38 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Thu, 12 Mar 2026 12:12:01 +0100
Subject: [PATCH 16/31] Show pretty last inventory time

---
 .../components/systems/SystemStatusCard.vue   |  20 ++-
 frontend/src/i18n/en/translation.json         |   7 +-
 frontend/src/i18n/it/translation.json         |   7 +-
 frontend/src/lib/dateTime.test.ts             | 144 +++++++++++++++++-
 frontend/src/lib/dateTime.ts                  |  75 +++++++--
 5 files changed, 232 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/systems/SystemStatusCard.vue b/frontend/src/components/systems/SystemStatusCard.vue
index af9b59645..4dc25c13f 100644
--- a/frontend/src/components/systems/SystemStatusCard.vue
+++ b/frontend/src/components/systems/SystemStatusCard.vue
@@ -5,6 +5,7 @@
 
 <script setup lang="ts">
 import {
+  humanDistanceToNowLoc,
   NeCard,
   NeHeading,
   NeInlineNotification,
@@ -14,7 +15,7 @@ import {
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { useLatestInventory } from '@/queries/systems/latestInventory'
 import { faCircleInfo, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons'
-import { formatDateTimeNoSeconds, formatUptime } from '@/lib/dateTime'
+import { formatDateTimeNoSeconds, formatTimeAgo, formatUptime } from '@/lib/dateTime'
 import { useI18n } from 'vue-i18n'
 import { useSystemDetail } from '@/queries/systems/systemDetail'
 import DataItem from '../DataItem.vue'
@@ -138,11 +139,18 @@ const timezone = computed(() => {
           {{ $t('system_detail.last_inventory') }}
         </template>
         <template #data>
-          {{
-            latestInventory.data?.timestamp
-              ? formatDateTimeNoSeconds(new Date(latestInventory.data?.timestamp), locale)
-              : '-'
-          }}
+          <NeTooltip trigger-event="mouseenter focus" placement="left">
+            <template #trigger>
+              {{ formatTimeAgo(latestInventory.data?.timestamp, $t) }}
+            </template>
+            <template #content>
+              {{
+                latestInventory.data?.timestamp
+                  ? formatDateTimeNoSeconds(new Date(latestInventory.data?.timestamp), locale)
+                  : '-'
+              }}
+            </template>
+          </NeTooltip>
         </template>
       </DataItem>
       <!-- uptime -->
diff --git a/frontend/src/i18n/en/translation.json b/frontend/src/i18n/en/translation.json
index 9092fcbf2..6a7cc07d2 100644
--- a/frontend/src/i18n/en/translation.json
+++ b/frontend/src/i18n/en/translation.json
@@ -605,7 +605,12 @@
     "seconds": "{count} second | {count} seconds",
     "minutes": "{count} minute | {count} minutes",
     "hours": "{count} hour | {count} hours",
-    "days": "{count} day | {count} days"
+    "days": "{count} day | {count} days",
+    "weeks": "{count} week | {count} weeks",
+    "months": "{count} month | {count} months",
+    "years": "{count} year | {count} years",
+    "just_now": "Just now",
+    "ago": "{time} ago"
   },
   "delete_object_modal": {
     "type_to_confirm": "Type '{confirmationText}' to confirm",
diff --git a/frontend/src/i18n/it/translation.json b/frontend/src/i18n/it/translation.json
index 7a8ea2a59..6b9244fbe 100644
--- a/frontend/src/i18n/it/translation.json
+++ b/frontend/src/i18n/it/translation.json
@@ -602,7 +602,12 @@
     "seconds": "{count} secondo | {count} secondi",
     "minutes": "{count} minuto | {count} minuti",
     "hours": "{count} ora | {count} ore",
-    "days": "{count} giorno | {count} giorni"
+    "days": "{count} giorno | {count} giorni",
+    "weeks": "{count} settimana | {count} settimane",
+    "months": "{count} mese | {count} mesi",
+    "years": "{count} anno | {count} anni",
+    "just_now": "Poco fa",
+    "ago": "{time} fa"
   },
   "delete_object_modal": {
     "type_to_confirm": "Digita '{confirmationText}' per confermare",
diff --git a/frontend/src/lib/dateTime.test.ts b/frontend/src/lib/dateTime.test.ts
index e35d07804..80e1cd4da 100644
--- a/frontend/src/lib/dateTime.test.ts
+++ b/frontend/src/lib/dateTime.test.ts
@@ -6,21 +6,42 @@ import {
   formatDateTimeNoSeconds,
   formatMinutes,
   formatSeconds,
+  formatTimeAgo,
   formatUptime,
 } from './dateTime'
-import { expect, it, describe, vi, beforeEach } from 'vitest'
+import { expect, it, describe, vi, beforeEach, afterEach } from 'vitest'
 
 // Create a simple mock function for translation
-const mockT = vi.fn((key: string, count: number) => {
+const mockT = vi.fn((key: string, countOrNamed?: number | Record<string, unknown>) => {
   const translations: Record<string, (count: number) => string> = {
     'time.seconds': (count: number) => `${count} second${count !== 1 ? 's' : ''}`,
     'time.minutes': (count: number) => `${count} minute${count !== 1 ? 's' : ''}`,
     'time.hours': (count: number) => `${count} hour${count !== 1 ? 's' : ''}`,
     'time.days': (count: number) => `${count} day${count !== 1 ? 's' : ''}`,
+    'time.weeks': (count: number) => `${count} week${count !== 1 ? 's' : ''}`,
+    'time.months': (count: number) => `${count} month${count !== 1 ? 's' : ''}`,
+    'time.years': (count: number) => `${count} year${count !== 1 ? 's' : ''}`,
   }
 
-  if (translations[key]) {
-    return translations[key](count)
+  // Handle named parameter form: t('time.ago', { time: '...' })
+  if (typeof countOrNamed === 'object' && countOrNamed !== null) {
+    if (key === 'time.ago') {
+      return `${countOrNamed.time} ago`
+    }
+    return key
+  }
+
+  // Handle pluralization form: t('time.minutes', count)
+  if (typeof countOrNamed === 'number' && translations[key]) {
+    return translations[key](countOrNamed)
+  }
+
+  // Handle simple keys
+  const simpleKeys: Record<string, string> = {
+    'time.just_now': 'Just now',
+  }
+  if (simpleKeys[key]) {
+    return simpleKeys[key]
   }
 
   return key
@@ -367,3 +388,118 @@ describe('formatUptime', () => {
     expect(result).toBe('59 minutes')
   })
 })
+
+describe('formatTimeAgo', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+    vi.setSystemTime(new Date('2026-03-12T12:00:00Z'))
+    mockT.mockClear()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('should return "Just now" for dates less than 60 seconds ago', () => {
+    const result = formatTimeAgo('2026-03-12T11:59:30Z', mockT as any) // 30 seconds ago
+    expect(result).toBe('Just now')
+  })
+
+  it('should return "Just now" for dates exactly now', () => {
+    const result = formatTimeAgo('2026-03-12T12:00:00Z', mockT as any)
+    expect(result).toBe('Just now')
+  })
+
+  it('should return "Just now" for future dates', () => {
+    const result = formatTimeAgo('2026-03-12T13:00:00Z', mockT as any)
+    expect(result).toBe('Just now')
+  })
+
+  it('should return a dash for invalid date strings', () => {
+    const result = formatTimeAgo('not-a-date', mockT as any)
+    expect(result).toBe('-')
+  })
+
+  it('should return minutes ago for 1 minute', () => {
+    const result = formatTimeAgo('2026-03-12T11:59:00Z', mockT as any) // 60 seconds ago
+    expect(result).toBe('1 minute ago')
+  })
+
+  it('should return minutes ago for multiple minutes', () => {
+    const result = formatTimeAgo('2026-03-12T11:51:00Z', mockT as any) // 9 minutes ago
+    expect(result).toBe('9 minutes ago')
+  })
+
+  it('should return minutes ago for 59 minutes', () => {
+    const result = formatTimeAgo('2026-03-12T11:01:00Z', mockT as any) // 59 minutes ago
+    expect(result).toBe('59 minutes ago')
+  })
+
+  it('should return hours ago for 1 hour', () => {
+    const result = formatTimeAgo('2026-03-12T11:00:00Z', mockT as any) // 1 hour ago
+    expect(result).toBe('1 hour ago')
+  })
+
+  it('should return hours ago for multiple hours', () => {
+    const result = formatTimeAgo('2026-03-12T09:00:00Z', mockT as any) // 3 hours ago
+    expect(result).toBe('3 hours ago')
+  })
+
+  it('should return days ago for 1 day', () => {
+    const result = formatTimeAgo('2026-03-11T12:00:00Z', mockT as any) // 1 day ago
+    expect(result).toBe('1 day ago')
+  })
+
+  it('should return days ago for multiple days', () => {
+    const result = formatTimeAgo('2026-03-10T12:00:00Z', mockT as any) // 2 days ago
+    expect(result).toBe('2 days ago')
+  })
+
+  it('should return weeks ago for 1 week', () => {
+    const result = formatTimeAgo('2026-03-05T12:00:00Z', mockT as any) // 7 days ago
+    expect(result).toBe('1 week ago')
+  })
+
+  it('should return weeks ago for multiple weeks', () => {
+    const result = formatTimeAgo('2026-02-26T12:00:00Z', mockT as any) // 14 days ago
+    expect(result).toBe('2 weeks ago')
+  })
+
+  it('should return months ago for 1 month', () => {
+    const result = formatTimeAgo('2026-02-10T12:00:00Z', mockT as any) // 30 days ago
+    expect(result).toBe('1 month ago')
+  })
+
+  it('should return months ago for multiple months', () => {
+    const result = formatTimeAgo('2025-12-12T12:00:00Z', mockT as any) // 90 days ago
+    expect(result).toBe('3 months ago')
+  })
+
+  it('should return years ago for 1 year', () => {
+    const result = formatTimeAgo('2025-03-12T12:00:00Z', mockT as any) // 365 days ago
+    expect(result).toBe('1 year ago')
+  })
+
+  it('should return years ago for multiple years', () => {
+    const result = formatTimeAgo('2024-03-12T12:00:00Z', mockT as any) // ~730 days ago
+    expect(result).toBe('2 years ago')
+  })
+
+  it('should return duration without suffix when suffix is false', () => {
+    const result = formatTimeAgo('2026-03-12T09:00:00Z', mockT as any, { suffix: false })
+    expect(result).toBe('3 hours')
+  })
+
+  it('should return "Just now" even when suffix is false', () => {
+    const result = formatTimeAgo('2026-03-12T11:59:30Z', mockT as any, { suffix: false })
+    expect(result).toBe('Just now')
+  })
+
+  it('should return duration without suffix for each unit', () => {
+    expect(formatTimeAgo('2026-03-12T11:51:00Z', mockT as any, { suffix: false })).toBe('9 minutes')
+    expect(formatTimeAgo('2026-03-11T12:00:00Z', mockT as any, { suffix: false })).toBe('1 day')
+    expect(formatTimeAgo('2026-03-05T12:00:00Z', mockT as any, { suffix: false })).toBe('1 week')
+    expect(formatTimeAgo('2026-02-10T12:00:00Z', mockT as any, { suffix: false })).toBe('1 month')
+    expect(formatTimeAgo('2025-03-12T12:00:00Z', mockT as any, { suffix: false })).toBe('1 year')
+  })
+})
diff --git a/frontend/src/lib/dateTime.ts b/frontend/src/lib/dateTime.ts
index 7f5511b6a..5aab53df3 100644
--- a/frontend/src/lib/dateTime.ts
+++ b/frontend/src/lib/dateTime.ts
@@ -37,7 +37,7 @@ export function formatSeconds(totalSeconds: number, t: ComposerTranslation) {
     return t('time.seconds', totalSeconds)
   }
 
-  if (totalSeconds < 3600) {
+  if (totalSeconds < 60 * 60) {
     const minutes = Math.floor(totalSeconds / 60)
     const seconds = totalSeconds % 60
 
@@ -48,8 +48,8 @@ export function formatSeconds(totalSeconds: number, t: ComposerTranslation) {
     return `${t('time.minutes', minutes)}, ${t('time.seconds', seconds)}`
   }
 
-  const hours = Math.floor(totalSeconds / 3600)
-  const minutes = Math.floor((totalSeconds % 3600) / 60)
+  const hours = Math.floor(totalSeconds / (60 * 60))
+  const minutes = Math.floor((totalSeconds % (60 * 60)) / 60)
   const seconds = totalSeconds % 60
 
   if (minutes === 0 && seconds === 0) {
@@ -75,24 +75,81 @@ export function formatUptime(uptimeSeconds: number, t: ComposerTranslation): str
     return t('time.seconds', uptimeSeconds)
   }
 
-  if (uptimeSeconds < 3600) {
+  if (uptimeSeconds < 60 * 60) {
     const minutes = Math.floor(uptimeSeconds / 60)
     return t('time.minutes', minutes)
   }
 
-  if (uptimeSeconds < 86400) {
-    const hours = Math.floor(uptimeSeconds / 3600)
-    const minutes = Math.floor((uptimeSeconds % 3600) / 60)
+  if (uptimeSeconds < 60 * 60 * 24) {
+    const hours = Math.floor(uptimeSeconds / (60 * 60))
+    const minutes = Math.floor((uptimeSeconds % (60 * 60)) / 60)
     if (minutes === 0) {
       return t('time.hours', hours)
     }
     return `${t('time.hours', hours)}, ${t('time.minutes', minutes)}`
   }
 
-  const days = Math.floor(uptimeSeconds / 86400)
-  const hours = Math.floor((uptimeSeconds % 86400) / 3600)
+  const days = Math.floor(uptimeSeconds / (60 * 60 * 24))
+  const hours = Math.floor((uptimeSeconds % (60 * 60 * 24)) / (60 * 60))
   if (hours === 0) {
     return t('time.days', days)
   }
   return `${t('time.days', days)}, ${t('time.hours', hours)}`
 }
+
+/**
+ * Format an ISO date string as a human-readable relative time string
+ * (e.g. "3 hours ago", "Just now")
+ *
+ * @param isoDate - ISO 8601 date string
+ * @param t - vue-i18n translation function
+ * @param options.suffix - whether to wrap the duration with the "ago" suffix (default: true)
+ */
+export function formatTimeAgo(
+  isoDate: string,
+  t: ComposerTranslation,
+  options: { suffix?: boolean } = {},
+): string {
+  const { suffix = true } = options
+  const date = new Date(isoDate)
+
+  if (isNaN(date.getTime())) {
+    return '-'
+  }
+
+  const diffSeconds = Math.floor((Date.now() - date.getTime()) / 1000)
+
+  if (diffSeconds < 60) {
+    return t('time.just_now')
+  }
+
+  const formatElapsed = (time: string) => (suffix ? t('time.ago', { time }) : time)
+
+  if (diffSeconds < 60 * 60) {
+    const minutes = Math.floor(diffSeconds / 60)
+    return formatElapsed(t('time.minutes', minutes))
+  }
+
+  if (diffSeconds < 60 * 60 * 24) {
+    const hours = Math.floor(diffSeconds / (60 * 60))
+    return formatElapsed(t('time.hours', hours))
+  }
+
+  if (diffSeconds < 60 * 60 * 24 * 7) {
+    const days = Math.floor(diffSeconds / (60 * 60 * 24))
+    return formatElapsed(t('time.days', days))
+  }
+
+  if (diffSeconds < 60 * 60 * 24 * 30) {
+    const weeks = Math.floor(diffSeconds / (60 * 60 * 24 * 7))
+    return formatElapsed(t('time.weeks', weeks))
+  }
+
+  if (diffSeconds < 60 * 60 * 24 * 365) {
+    const months = Math.floor(diffSeconds / (60 * 60 * 24 * 30))
+    return formatElapsed(t('time.months', months))
+  }
+
+  const years = Math.floor(diffSeconds / (60 * 60 * 24 * 365))
+  return formatElapsed(t('time.years', years))
+}

From 0ed2a994deb8d698367acc601b1905d2ccced61c Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Wed, 18 Mar 2026 16:17:41 +0100
Subject: [PATCH 17/31] Show creation info in SystemInfoCard

---
 .../src/components/systems/SystemInfoCard.vue | 26 ++++++++++++++++---
 .../components/systems/SystemStatusCard.vue   |  1 -
 frontend/src/i18n/en/translation.json         |  2 ++
 frontend/src/lib/dateTime.test.ts             |  4 +--
 frontend/src/lib/dateTime.ts                  |  2 +-
 5 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/systems/SystemInfoCard.vue b/frontend/src/components/systems/SystemInfoCard.vue
index a5f387c78..e1f466f52 100644
--- a/frontend/src/components/systems/SystemInfoCard.vue
+++ b/frontend/src/components/systems/SystemInfoCard.vue
@@ -40,8 +40,10 @@ import ReactivateSystemModal from './ReactivateSystemModal.vue'
 import DestroySystemModal from './DestroySystemModal.vue'
 import OrganizationIcon from '../organizations/OrganizationIcon.vue'
 import OrganizationLink from '../applications/OrganizationLink.vue'
+import UserAvatar from '../users/UserAvatar.vue'
+import { formatDateTimeNoSeconds } from '@/lib/dateTime'
 
-const { t } = useI18n()
+const { t, locale } = useI18n()
 const { state: systemDetail, asyncStatus } = useSystemDetail()
 const isNotesModalShown = ref(false)
 const isShownCreateOrEditSystemDrawer = ref(false)
@@ -250,10 +252,28 @@ function getKebabMenuItems() {
         <!-- created by -->
         <DataItem>
           <template #label>
-            {{ $t('systems.created_by') }}
+            {{ $t('systems.created') }}
           </template>
           <template #data>
-            {{ systemDetail.data.created_by.name || '-' }}
+            <div class="flex items-center gap-2">
+              <NeTooltip trigger-event="mouseenter focus" placement="top">
+                <template #trigger>
+                  <UserAvatar
+                    size="xs"
+                    :is-owner="systemDetail.data.created_by.username === 'owner'"
+                    :name="systemDetail.data.created_by.name"
+                  />
+                </template>
+                <template #content>
+                  {{
+                    $t('systems.created_by_name', {
+                      name: systemDetail.data.created_by.name,
+                    })
+                  }}
+                </template>
+              </NeTooltip>
+              {{ formatDateTimeNoSeconds(new Date(systemDetail.data.created_at), locale) }}
+            </div>
           </template>
         </DataItem>
         <!-- notes -->
diff --git a/frontend/src/components/systems/SystemStatusCard.vue b/frontend/src/components/systems/SystemStatusCard.vue
index 4dc25c13f..23dc9ef52 100644
--- a/frontend/src/components/systems/SystemStatusCard.vue
+++ b/frontend/src/components/systems/SystemStatusCard.vue
@@ -5,7 +5,6 @@
 
 <script setup lang="ts">
 import {
-  humanDistanceToNowLoc,
   NeCard,
   NeHeading,
   NeInlineNotification,
diff --git a/frontend/src/i18n/en/translation.json b/frontend/src/i18n/en/translation.json
index 6a7cc07d2..b6b028857 100644
--- a/frontend/src/i18n/en/translation.json
+++ b/frontend/src/i18n/en/translation.json
@@ -428,7 +428,9 @@
     "filter_systems": "Filter systems",
     "product": "Product",
     "version": "Version",
+    "created": "Created",
     "created_by": "Created by",
+    "created_by_name": "Created by {name}",
     "organization": "Company",
     "organization_helper": "Choose the company this system will be assigned to",
     "status": "Status",
diff --git a/frontend/src/lib/dateTime.test.ts b/frontend/src/lib/dateTime.test.ts
index 80e1cd4da..c0eec4a3e 100644
--- a/frontend/src/lib/dateTime.test.ts
+++ b/frontend/src/lib/dateTime.test.ts
@@ -88,7 +88,7 @@ describe('formatDateTimeNoSeconds', () => {
     expect(result).not.toContain('45')
     // Should contain year, month, day, hour, minute
     expect(result).toContain('2025')
-    expect(result).toContain('10')
+    expect(result).toContain('Oct')
     expect(result).toContain('03')
     expect(result).toContain('09')
     expect(result).toContain('30')
@@ -111,7 +111,7 @@ describe('formatDateTimeNoSeconds', () => {
 
     expect(typeof result).toBe('string')
     expect(result).toContain('2025')
-    expect(result).toContain('10')
+    expect(result).toContain('Oct')
     expect(result).toContain('02')
   })
 })
diff --git a/frontend/src/lib/dateTime.ts b/frontend/src/lib/dateTime.ts
index 5aab53df3..825f2d75e 100644
--- a/frontend/src/lib/dateTime.ts
+++ b/frontend/src/lib/dateTime.ts
@@ -10,7 +10,7 @@ export function formatDateTime(dateTime: Date, locale: string): string {
 export function formatDateTimeNoSeconds(dateTime: Date, locale: string): string {
   return dateTime.toLocaleString(locale, {
     year: 'numeric',
-    month: '2-digit',
+    month: 'short',
     day: '2-digit',
     hour: '2-digit',
     minute: '2-digit',

From 692026b66ba9d316b16e5c65894d9bc78c64ef6c Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Thu, 19 Mar 2026 17:41:39 +0100
Subject: [PATCH 18/31] Create inventory changes, diffs & timeline queries and
 libs

---
 frontend/src/components/CounterCard.vue       |   5 +-
 .../systems/SystemChangeHistoryPanel.vue      |  10 ++
 frontend/src/i18n/en/translation.json         |   1 +
 frontend/src/lib/systems/inventoryChanges.ts  |  36 ++++
 frontend/src/lib/systems/inventoryDiffs.ts    | 111 ++++++++++++
 frontend/src/lib/systems/inventoryTimeline.ts | 100 +++++++++++
 .../src/queries/systems/inventoryChanges.ts   |  25 +++
 .../src/queries/systems/inventoryDiffs.ts     | 162 ++++++++++++++++++
 .../src/queries/systems/inventoryTimeline.ts  | 150 ++++++++++++++++
 frontend/src/views/SystemDetailView.vue       |   7 +-
 10 files changed, 605 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/systems/SystemChangeHistoryPanel.vue
 create mode 100644 frontend/src/lib/systems/inventoryChanges.ts
 create mode 100644 frontend/src/lib/systems/inventoryDiffs.ts
 create mode 100644 frontend/src/lib/systems/inventoryTimeline.ts
 create mode 100644 frontend/src/queries/systems/inventoryChanges.ts
 create mode 100644 frontend/src/queries/systems/inventoryDiffs.ts
 create mode 100644 frontend/src/queries/systems/inventoryTimeline.ts

diff --git a/frontend/src/components/CounterCard.vue b/frontend/src/components/CounterCard.vue
index a5cf33be2..56307c334 100644
--- a/frontend/src/components/CounterCard.vue
+++ b/frontend/src/components/CounterCard.vue
@@ -17,6 +17,7 @@ const {
   skeletonLines = 2,
   uppercaseTitle = true,
   centeredCounter = true,
+  colorClasses = undefined,
 } = defineProps<{
   title: string
   counter: number
@@ -25,6 +26,7 @@ const {
   skeletonLines?: number
   uppercaseTitle?: boolean
   centeredCounter?: boolean
+  colorClasses?: string
 }>()
 
 const slots = useSlots()
@@ -49,7 +51,8 @@ const hasDefaultSlot = computed(() => !!slots.default)
         </div>
         <span
           :class="[
-            'self-center text-4xl font-medium text-indigo-700 dark:text-indigo-500',
+            'self-center text-4xl font-medium',
+            colorClasses ?? 'text-indigo-700 dark:text-indigo-500',
             { 'self-center': centeredCounter },
           ]"
         >
diff --git a/frontend/src/components/systems/SystemChangeHistoryPanel.vue b/frontend/src/components/systems/SystemChangeHistoryPanel.vue
new file mode 100644
index 000000000..89d3b0cc1
--- /dev/null
+++ b/frontend/src/components/systems/SystemChangeHistoryPanel.vue
@@ -0,0 +1,10 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts"></script>
+
+<template>
+  <div></div>
+</template>
diff --git a/frontend/src/i18n/en/translation.json b/frontend/src/i18n/en/translation.json
index b6b028857..4e2d42eec 100644
--- a/frontend/src/i18n/en/translation.json
+++ b/frontend/src/i18n/en/translation.json
@@ -504,6 +504,7 @@
   "system_detail": {
     "title": "System detail",
     "overview": "Overview",
+    "change_history": "Change history",
     "unknown_product": "Unknown product",
     "go_to_system": "Go to system",
     "go_to_system_tooltip": "Note: The system may be unreachable due to network settings.",
diff --git a/frontend/src/lib/systems/inventoryChanges.ts b/frontend/src/lib/systems/inventoryChanges.ts
new file mode 100644
index 000000000..909f6181a
--- /dev/null
+++ b/frontend/src/lib/systems/inventoryChanges.ts
@@ -0,0 +1,36 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import axios from 'axios'
+import { API_URL } from '../config'
+import { useLoginStore } from '@/stores/login'
+import { type InventoryDiffCategory, type InventoryDiffSeverity } from './inventoryDiffs'
+
+export const INVENTORY_CHANGES_KEY = 'inventoryChanges'
+
+export interface InventoryChanges {
+  system_id: string
+  total_changes: number
+  recent_changes: number
+  last_inventory_time: string
+  has_critical_changes: boolean
+  has_alerts: boolean
+  changes_by_category: Partial<Record<InventoryDiffCategory, number>>
+  changes_by_severity: Partial<Record<InventoryDiffSeverity, number>>
+}
+
+interface InventoryChangesResponse {
+  code: number
+  message: string
+  data: InventoryChanges | null
+}
+
+export const getInventoryChanges = (systemId: string) => {
+  const loginStore = useLoginStore()
+
+  return axios
+    .get<InventoryChangesResponse>(`${API_URL}/systems/${systemId}/inventory/changes`, {
+      headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
+    })
+    .then((res) => res.data.data)
+}
diff --git a/frontend/src/lib/systems/inventoryDiffs.ts b/frontend/src/lib/systems/inventoryDiffs.ts
new file mode 100644
index 000000000..997516ffa
--- /dev/null
+++ b/frontend/src/lib/systems/inventoryDiffs.ts
@@ -0,0 +1,111 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import axios from 'axios'
+import { API_URL } from '../config'
+import { useLoginStore } from '@/stores/login'
+import { type Pagination } from '../common'
+
+export const INVENTORY_DIFFS_KEY = 'inventoryDiffs'
+export const INVENTORY_DIFFS_TABLE_ID = 'inventoryDiffsTable'
+
+export type InventoryDiffSeverity = 'low' | 'medium' | 'high' | 'critical'
+
+export type InventoryDiffCategory =
+  | 'os'
+  | 'hardware'
+  | 'network'
+  | 'security'
+  | 'backup'
+  | 'features'
+  | 'modules'
+  | 'cluster'
+  | 'nodes'
+  | 'system'
+
+export type InventoryDiffType = 'create' | 'update' | 'delete'
+
+export interface InventoryDiff {
+  id: number
+  system_id: string
+  previous_id: number
+  current_id: number
+  diff_type: InventoryDiffType
+  field_path: string
+  previous_value: string
+  current_value: string
+  severity: InventoryDiffSeverity
+  category: InventoryDiffCategory
+  notification_sent: boolean
+  created_at: string
+}
+
+interface InventoryDiffsResponse {
+  code: number
+  message: string
+  data: {
+    diffs: InventoryDiff[]
+    pagination: Pagination
+  }
+}
+
+const getInventoryDiffsQueryStringParams = (
+  pageNum: number,
+  pageSize: number,
+  severity: InventoryDiffSeverity[],
+  category: InventoryDiffCategory[],
+  diffType: InventoryDiffType[],
+  inventoryId: number[],
+  fromDate: string,
+  toDate: string,
+) => {
+  const searchParams = new URLSearchParams({
+    page: pageNum.toString(),
+    page_size: pageSize.toString(),
+  })
+
+  severity.forEach((s) => searchParams.append('severity', s))
+  category.forEach((c) => searchParams.append('category', c))
+  diffType.forEach((d) => searchParams.append('diff_type', d))
+  inventoryId.forEach((id) => searchParams.append('inventory_id', id.toString()))
+
+  if (fromDate.trim()) {
+    searchParams.append('from_date', fromDate)
+  }
+
+  if (toDate.trim()) {
+    searchParams.append('to_date', toDate)
+  }
+
+  return searchParams.toString()
+}
+
+export const getInventoryDiffs = (
+  systemId: string,
+  pageNum: number,
+  pageSize: number,
+  severity: InventoryDiffSeverity[],
+  category: InventoryDiffCategory[],
+  diffType: InventoryDiffType[],
+  inventoryId: number[],
+  fromDate: string,
+  toDate: string,
+) => {
+  const loginStore = useLoginStore()
+  const queryString = getInventoryDiffsQueryStringParams(
+    pageNum,
+    pageSize,
+    severity,
+    category,
+    diffType,
+    inventoryId,
+    fromDate,
+    toDate,
+  )
+
+  return axios
+    .get<InventoryDiffsResponse>(`${API_URL}/systems/${systemId}/inventory/diffs?${queryString}`, {
+      headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
+    })
+    .then((res) => res.data.data)
+}
diff --git a/frontend/src/lib/systems/inventoryTimeline.ts b/frontend/src/lib/systems/inventoryTimeline.ts
new file mode 100644
index 000000000..baee3f7ff
--- /dev/null
+++ b/frontend/src/lib/systems/inventoryTimeline.ts
@@ -0,0 +1,100 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import axios from 'axios'
+import { API_URL } from '../config'
+import { useLoginStore } from '@/stores/login'
+import { type Pagination } from '../common'
+import {
+  type InventoryDiffCategory,
+  type InventoryDiffSeverity,
+  type InventoryDiffType,
+} from './inventoryDiffs'
+
+export const INVENTORY_TIMELINE_KEY = 'inventoryTimeline'
+export const INVENTORY_TIMELINE_TABLE_ID = 'inventoryTimelineTable'
+
+export interface InventoryTimelineSummary {
+  total: number
+  critical: number
+  high: number
+  medium: number
+  low: number
+}
+
+export interface InventoryTimelineGroup {
+  date: string
+  inventory_count: number
+  change_count: number
+  inventory_ids: number[]
+}
+
+interface InventoryTimelineResponse {
+  code: number
+  message: string
+  data: {
+    summary: InventoryTimelineSummary
+    groups: InventoryTimelineGroup[]
+    pagination: Pagination
+  }
+}
+
+const getInventoryTimelineQueryStringParams = (
+  pageNum: number,
+  pageSize: number,
+  severity: InventoryDiffSeverity[],
+  category: InventoryDiffCategory[],
+  diffType: InventoryDiffType[],
+  fromDate: string,
+  toDate: string,
+) => {
+  const searchParams = new URLSearchParams({
+    page: pageNum.toString(),
+    page_size: pageSize.toString(),
+  })
+
+  severity.forEach((s) => searchParams.append('severity', s))
+  category.forEach((c) => searchParams.append('category', c))
+  diffType.forEach((d) => searchParams.append('diff_type', d))
+
+  if (fromDate.trim()) {
+    searchParams.append('from_date', fromDate)
+  }
+
+  if (toDate.trim()) {
+    searchParams.append('to_date', toDate)
+  }
+
+  return searchParams.toString()
+}
+
+export const getInventoryTimeline = (
+  systemId: string,
+  pageNum: number,
+  pageSize: number,
+  severity: InventoryDiffSeverity[],
+  category: InventoryDiffCategory[],
+  diffType: InventoryDiffType[],
+  fromDate: string,
+  toDate: string,
+) => {
+  const loginStore = useLoginStore()
+  const queryString = getInventoryTimelineQueryStringParams(
+    pageNum,
+    pageSize,
+    severity,
+    category,
+    diffType,
+    fromDate,
+    toDate,
+  )
+
+  return axios
+    .get<InventoryTimelineResponse>(
+      `${API_URL}/systems/${systemId}/inventory/timeline?${queryString}`,
+      {
+        headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
+      },
+    )
+    .then((res) => res.data.data)
+}
diff --git a/frontend/src/queries/systems/inventoryChanges.ts b/frontend/src/queries/systems/inventoryChanges.ts
new file mode 100644
index 000000000..ad90c71bd
--- /dev/null
+++ b/frontend/src/queries/systems/inventoryChanges.ts
@@ -0,0 +1,25 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import { canReadSystems } from '@/lib/permissions'
+import { getInventoryChanges, INVENTORY_CHANGES_KEY } from '@/lib/systems/inventoryChanges'
+import { useLoginStore } from '@/stores/login'
+import { defineQuery, useQuery } from '@pinia/colada'
+import { useRoute } from 'vue-router'
+
+export const useInventoryChanges = defineQuery(() => {
+  const loginStore = useLoginStore()
+  const route = useRoute()
+
+  const { state, asyncStatus, ...rest } = useQuery({
+    key: () => [INVENTORY_CHANGES_KEY, route.params.systemId],
+    enabled: () => !!loginStore.jwtToken && canReadSystems() && !!route.params.systemId,
+    query: () => getInventoryChanges(route.params.systemId as string),
+  })
+
+  return {
+    ...rest,
+    state,
+    asyncStatus,
+  }
+})
diff --git a/frontend/src/queries/systems/inventoryDiffs.ts b/frontend/src/queries/systems/inventoryDiffs.ts
new file mode 100644
index 000000000..baca07e1b
--- /dev/null
+++ b/frontend/src/queries/systems/inventoryDiffs.ts
@@ -0,0 +1,162 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import {
+  INVENTORY_DIFFS_KEY,
+  INVENTORY_DIFFS_TABLE_ID,
+  getInventoryDiffs,
+  type InventoryDiffCategory,
+  type InventoryDiffSeverity,
+  type InventoryDiffType,
+} from '@/lib/systems/inventoryDiffs'
+import { canReadSystems } from '@/lib/permissions'
+import { DEFAULT_PAGE_SIZE, loadPageSizeFromStorage } from '@/lib/tablePageSize'
+import { useLoginStore } from '@/stores/login'
+import { defineQuery, useQuery } from '@pinia/colada'
+import { computed, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+
+export const useInventoryDiffs = defineQuery(() => {
+  const loginStore = useLoginStore()
+  const route = useRoute()
+  const pageNum = ref(1)
+  const pageSize = ref(DEFAULT_PAGE_SIZE)
+  const severityFilter = ref<InventoryDiffSeverity[]>([])
+  const categoryFilter = ref<InventoryDiffCategory[]>([])
+  const diffTypeFilter = ref<InventoryDiffType[]>([])
+  const inventoryIdFilter = ref<number[]>([])
+  const fromDate = ref('')
+  const toDate = ref('')
+
+  const { state, asyncStatus, ...rest } = useQuery({
+    key: () => [
+      INVENTORY_DIFFS_KEY,
+      {
+        systemId: route.params.systemId,
+        pageNum: pageNum.value,
+        pageSize: pageSize.value,
+        severityFilter: severityFilter.value,
+        categoryFilter: categoryFilter.value,
+        diffTypeFilter: diffTypeFilter.value,
+        inventoryIdFilter: inventoryIdFilter.value,
+        fromDate: fromDate.value,
+        toDate: toDate.value,
+      },
+    ],
+    enabled: () => !!loginStore.jwtToken && canReadSystems() && !!route.params.systemId,
+    query: () =>
+      getInventoryDiffs(
+        route.params.systemId as string,
+        pageNum.value,
+        pageSize.value,
+        severityFilter.value,
+        categoryFilter.value,
+        diffTypeFilter.value,
+        inventoryIdFilter.value,
+        fromDate.value,
+        toDate.value,
+      ),
+  })
+
+  const areDefaultFiltersApplied = computed(() => {
+    return (
+      severityFilter.value.length === 0 &&
+      categoryFilter.value.length === 0 &&
+      diffTypeFilter.value.length === 0 &&
+      inventoryIdFilter.value.length === 0 &&
+      !fromDate.value &&
+      !toDate.value
+    )
+  })
+
+  // load table page size from storage
+  watch(
+    () => loginStore.userInfo?.email,
+    (email) => {
+      if (email) {
+        pageSize.value = loadPageSizeFromStorage(INVENTORY_DIFFS_TABLE_ID)
+      }
+    },
+    { immediate: true },
+  )
+
+  // reset to first page when page size changes
+  watch(
+    () => pageSize.value,
+    () => {
+      pageNum.value = 1
+    },
+  )
+
+  // reset to first page when any filter changes
+  watch(
+    () => severityFilter.value,
+    () => {
+      pageNum.value = 1
+    },
+    { deep: true },
+  )
+
+  watch(
+    () => categoryFilter.value,
+    () => {
+      pageNum.value = 1
+    },
+    { deep: true },
+  )
+
+  watch(
+    () => diffTypeFilter.value,
+    () => {
+      pageNum.value = 1
+    },
+    { deep: true },
+  )
+
+  watch(
+    () => inventoryIdFilter.value,
+    () => {
+      pageNum.value = 1
+    },
+    { deep: true },
+  )
+
+  watch(
+    () => fromDate.value,
+    () => {
+      pageNum.value = 1
+    },
+  )
+
+  watch(
+    () => toDate.value,
+    () => {
+      pageNum.value = 1
+    },
+  )
+
+  const resetFilters = () => {
+    severityFilter.value = []
+    categoryFilter.value = []
+    diffTypeFilter.value = []
+    inventoryIdFilter.value = []
+    fromDate.value = ''
+    toDate.value = ''
+  }
+
+  return {
+    ...rest,
+    state,
+    asyncStatus,
+    pageNum,
+    pageSize,
+    severityFilter,
+    categoryFilter,
+    diffTypeFilter,
+    inventoryIdFilter,
+    fromDate,
+    toDate,
+    areDefaultFiltersApplied,
+    resetFilters,
+  }
+})
diff --git a/frontend/src/queries/systems/inventoryTimeline.ts b/frontend/src/queries/systems/inventoryTimeline.ts
new file mode 100644
index 000000000..21291f989
--- /dev/null
+++ b/frontend/src/queries/systems/inventoryTimeline.ts
@@ -0,0 +1,150 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import {
+  type InventoryDiffCategory,
+  type InventoryDiffSeverity,
+  type InventoryDiffType,
+} from '@/lib/systems/inventoryDiffs'
+import {
+  INVENTORY_TIMELINE_KEY,
+  INVENTORY_TIMELINE_TABLE_ID,
+  getInventoryTimeline,
+} from '@/lib/systems/inventoryTimeline'
+import { canReadSystems } from '@/lib/permissions'
+import { DEFAULT_PAGE_SIZE, loadPageSizeFromStorage } from '@/lib/tablePageSize'
+import { useLoginStore } from '@/stores/login'
+import { defineQuery, useQuery } from '@pinia/colada'
+import { computed, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+
+export const useInventoryTimeline = defineQuery(() => {
+  const loginStore = useLoginStore()
+  const route = useRoute()
+  const pageNum = ref(1)
+  const pageSize = ref(DEFAULT_PAGE_SIZE)
+  const severityFilter = ref<InventoryDiffSeverity[]>([])
+  const categoryFilter = ref<InventoryDiffCategory[]>([])
+  const diffTypeFilter = ref<InventoryDiffType[]>([])
+  const fromDate = ref('')
+  const toDate = ref('')
+
+  const { state, asyncStatus, ...rest } = useQuery({
+    key: () => [
+      INVENTORY_TIMELINE_KEY,
+      {
+        systemId: route.params.systemId,
+        pageNum: pageNum.value,
+        pageSize: pageSize.value,
+        severityFilter: severityFilter.value,
+        categoryFilter: categoryFilter.value,
+        diffTypeFilter: diffTypeFilter.value,
+        fromDate: fromDate.value,
+        toDate: toDate.value,
+      },
+    ],
+    enabled: () => !!loginStore.jwtToken && canReadSystems() && !!route.params.systemId,
+    query: () =>
+      getInventoryTimeline(
+        route.params.systemId as string,
+        pageNum.value,
+        pageSize.value,
+        severityFilter.value,
+        categoryFilter.value,
+        diffTypeFilter.value,
+        fromDate.value,
+        toDate.value,
+      ),
+  })
+
+  const areDefaultFiltersApplied = computed(() => {
+    return (
+      severityFilter.value.length === 0 &&
+      categoryFilter.value.length === 0 &&
+      diffTypeFilter.value.length === 0 &&
+      !fromDate.value &&
+      !toDate.value
+    )
+  })
+
+  // load table page size from storage
+  watch(
+    () => loginStore.userInfo?.email,
+    (email) => {
+      if (email) {
+        pageSize.value = loadPageSizeFromStorage(INVENTORY_TIMELINE_TABLE_ID)
+      }
+    },
+    { immediate: true },
+  )
+
+  // reset to first page when page size changes
+  watch(
+    () => pageSize.value,
+    () => {
+      pageNum.value = 1
+    },
+  )
+
+  // reset to first page when any filter changes
+  watch(
+    () => severityFilter.value,
+    () => {
+      pageNum.value = 1
+    },
+    { deep: true },
+  )
+
+  watch(
+    () => categoryFilter.value,
+    () => {
+      pageNum.value = 1
+    },
+    { deep: true },
+  )
+
+  watch(
+    () => diffTypeFilter.value,
+    () => {
+      pageNum.value = 1
+    },
+    { deep: true },
+  )
+
+  watch(
+    () => fromDate.value,
+    () => {
+      pageNum.value = 1
+    },
+  )
+
+  watch(
+    () => toDate.value,
+    () => {
+      pageNum.value = 1
+    },
+  )
+
+  const resetFilters = () => {
+    severityFilter.value = []
+    categoryFilter.value = []
+    diffTypeFilter.value = []
+    fromDate.value = ''
+    toDate.value = ''
+  }
+
+  return {
+    ...rest,
+    state,
+    asyncStatus,
+    pageNum,
+    pageSize,
+    severityFilter,
+    categoryFilter,
+    diffTypeFilter,
+    fromDate,
+    toDate,
+    areDefaultFiltersApplied,
+    resetFilters,
+  }
+})
diff --git a/frontend/src/views/SystemDetailView.vue b/frontend/src/views/SystemDetailView.vue
index 47571509c..59b529c85 100644
--- a/frontend/src/views/SystemDetailView.vue
+++ b/frontend/src/views/SystemDetailView.vue
@@ -18,13 +18,17 @@ import { useSystemDetail } from '@/queries/systems/systemDetail'
 import { useTabs } from '@/composables/useTabs'
 import { useI18n } from 'vue-i18n'
 import SystemOverviewPanel from '@/components/systems/SystemOverviewPanel.vue'
+import SystemChangeHistoryPanel from '@/components/systems/SystemChangeHistoryPanel.vue'
 import { useLatestInventory } from '@/queries/systems/latestInventory'
 import { computed } from 'vue'
 
 const { t } = useI18n()
 const { state: systemDetail } = useSystemDetail()
 const { state: latestInventory } = useLatestInventory()
-const { tabs, selectedTab } = useTabs([{ name: 'overview', label: t('system_detail.overview') }])
+const { tabs, selectedTab } = useTabs([
+  { name: 'overview', label: t('system_detail.overview') },
+  { name: 'change_history', label: t('system_detail.change_history') },
+])
 
 const systemUrl = computed(() => {
   if (!systemDetail.value.data?.fqdn) {
@@ -114,5 +118,6 @@ const openSystem = () => {
       @select-tab="selectedTab = $event"
     />
     <SystemOverviewPanel v-if="selectedTab === 'overview'" />
+    <SystemChangeHistoryPanel v-else-if="selectedTab === 'change_history'" />
   </div>
 </template>

From b9f311a150369561cfcf62fc011c386e80faed1d Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Fri, 20 Mar 2026 09:07:15 +0100
Subject: [PATCH 19/31] Add counter cards in change history

---
 .../systems/SystemChangeHistoryPanel.vue      | 56 ++++++++++++++++++-
 frontend/src/i18n/en/translation.json         |  8 ++-
 2 files changed, 61 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/systems/SystemChangeHistoryPanel.vue b/frontend/src/components/systems/SystemChangeHistoryPanel.vue
index 89d3b0cc1..3182c2d81 100644
--- a/frontend/src/components/systems/SystemChangeHistoryPanel.vue
+++ b/frontend/src/components/systems/SystemChangeHistoryPanel.vue
@@ -3,8 +3,60 @@
   SPDX-License-Identifier: GPL-3.0-or-later
 -->
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import CounterCard from '@/components/CounterCard.vue'
+import { useInventoryChanges } from '@/queries/systems/inventoryChanges'
+import { useI18n } from 'vue-i18n'
+import UpdatingSpinner from '../UpdatingSpinner.vue'
+import { NeInlineNotification } from '@nethesis/vue-components'
+
+const { t } = useI18n()
+
+const { state: inventoryChanges, asyncStatus: inventoryChangesAsyncStatus } = useInventoryChanges()
+</script>
 
 <template>
-  <div></div>
+  <div class="mb-8 flex flex-col items-start justify-between gap-6 xl:flex-row">
+    <div class="max-w-2xl text-gray-500 dark:text-gray-400">
+      {{ $t('system_detail.change_history_description') }}
+    </div>
+    <!-- update indicator -->
+    <UpdatingSpinner
+      v-if="inventoryChangesAsyncStatus === 'loading' && inventoryChanges.status !== 'pending'"
+    />
+  </div>
+  <!-- inventory changes error notification -->
+  <NeInlineNotification
+    v-if="inventoryChanges.status === 'error'"
+    kind="error"
+    :title="t('system_detail.cannot_retrieve_latest_inventory')"
+    :description="inventoryChanges.error.message"
+    class="mb-6"
+  />
+  <!-- change counters -->
+  <div class="grid grid-cols-2 gap-6 sm:grid-cols-4">
+    <CounterCard
+      :title="t('system_detail.total_changes')"
+      :counter="inventoryChanges.data?.total_changes ?? 0"
+      :loading="inventoryChanges.status === 'pending'"
+    />
+    <CounterCard
+      :title="t('system_detail.critical_changes')"
+      :counter="inventoryChanges.data?.changes_by_severity?.critical ?? 0"
+      :loading="inventoryChanges.status === 'pending'"
+      color-classes="text-rose-700 dark:text-rose-500"
+    />
+    <CounterCard
+      :title="t('system_detail.high_changes')"
+      :counter="inventoryChanges.data?.changes_by_severity?.high ?? 0"
+      :loading="inventoryChanges.status === 'pending'"
+      color-classes="text-orange-600 dark:text-orange-500"
+    />
+    <CounterCard
+      :title="t('system_detail.medium_changes')"
+      :counter="inventoryChanges.data?.changes_by_severity?.medium ?? 0"
+      :loading="inventoryChanges.status === 'pending'"
+      color-classes="text-yellow-700 dark:text-yellow-400"
+    />
+  </div>
 </template>
diff --git a/frontend/src/i18n/en/translation.json b/frontend/src/i18n/en/translation.json
index 4e2d42eec..199ec7322 100644
--- a/frontend/src/i18n/en/translation.json
+++ b/frontend/src/i18n/en/translation.json
@@ -519,10 +519,16 @@
     "cannot_retrieve_latest_inventory": "Cannot retrieve latest inventory",
     "no_inventory_available": "No inventory available",
     "no_inventory_available_description": "The system has not sent any inventory data yet.",
+    "total_changes": "Total changes",
+    "critical_changes": "Critical",
+    "high_changes": "High",
+    "medium_changes": "Medium",
     "subscription": "Subscription",
     "active_since": "Active since",
     "system_key": "System key",
-    "cannot_determine_system_url_description": "Cannot access the system because its URL cannot be determined."
+    "cannot_determine_system_url_description": "Cannot access the system because its URL cannot be determined.",
+    "change_history_description": "The change history is based on the differences between the inventories sent by the system. If the system has not sent any inventory yet, no change history will be available.",
+    "cannot_retrieve_inventory_changes": "Cannot retrieve inventory changes"
   },
   "application_detail": {
     "title": "Application detail",

From 7207c8498b30dfa7aad3df1958dcb55b6a54a9e1 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Mon, 23 Mar 2026 11:49:49 +0100
Subject: [PATCH 20/31] Implement system changes timeline (wip)

---
 .../systems/SystemChangeHistoryPanel.vue      |   8 +-
 .../systems/SystemChangesTimeline.vue         | 735 ++++++++++++++++++
 frontend/src/i18n/en/translation.json         |  45 +-
 frontend/src/lib/systems/inventoryDiffs.ts    |   8 +-
 frontend/src/lib/systems/inventoryMocks.ts    | 641 +++++++++++++++
 .../src/queries/systems/inventoryTimeline.ts  |  98 +--
 6 files changed, 1451 insertions(+), 84 deletions(-)
 create mode 100644 frontend/src/components/systems/SystemChangesTimeline.vue
 create mode 100644 frontend/src/lib/systems/inventoryMocks.ts

diff --git a/frontend/src/components/systems/SystemChangeHistoryPanel.vue b/frontend/src/components/systems/SystemChangeHistoryPanel.vue
index 3182c2d81..65a1bd642 100644
--- a/frontend/src/components/systems/SystemChangeHistoryPanel.vue
+++ b/frontend/src/components/systems/SystemChangeHistoryPanel.vue
@@ -9,6 +9,7 @@ import { useInventoryChanges } from '@/queries/systems/inventoryChanges'
 import { useI18n } from 'vue-i18n'
 import UpdatingSpinner from '../UpdatingSpinner.vue'
 import { NeInlineNotification } from '@nethesis/vue-components'
+import SystemChangesTimeline from './SystemChangesTimeline.vue'
 
 const { t } = useI18n()
 
@@ -34,7 +35,7 @@ const { state: inventoryChanges, asyncStatus: inventoryChangesAsyncStatus } = us
     class="mb-6"
   />
   <!-- change counters -->
-  <div class="grid grid-cols-2 gap-6 sm:grid-cols-4">
+  <div class="mb-10 grid grid-cols-2 gap-6 sm:grid-cols-4">
     <CounterCard
       :title="t('system_detail.total_changes')"
       :counter="inventoryChanges.data?.total_changes ?? 0"
@@ -56,7 +57,10 @@ const { state: inventoryChanges, asyncStatus: inventoryChangesAsyncStatus } = us
       :title="t('system_detail.medium_changes')"
       :counter="inventoryChanges.data?.changes_by_severity?.medium ?? 0"
       :loading="inventoryChanges.status === 'pending'"
-      color-classes="text-yellow-700 dark:text-yellow-400"
+      color-classes="text-yellow-600 dark:text-yellow-700"
     />
   </div>
+  <!-- changes timeline -->
+  <!-- //// remove mock-mode -->
+  <SystemChangesTimeline mock-mode />
 </template>
diff --git a/frontend/src/components/systems/SystemChangesTimeline.vue b/frontend/src/components/systems/SystemChangesTimeline.vue
new file mode 100644
index 000000000..c97572fd1
--- /dev/null
+++ b/frontend/src/components/systems/SystemChangesTimeline.vue
@@ -0,0 +1,735 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import { useInventoryTimeline } from '@/queries/systems/inventoryTimeline'
+import {
+  INVENTORY_DIFFS_KEY,
+  getInventoryDiffs,
+  type InventoryDiff,
+  type InventoryDiffCategory,
+  type InventoryDiffSeverity,
+  type InventoryDiffType,
+} from '@/lib/systems/inventoryDiffs'
+import { mockInventoryDiffs, mockTimelineGroups } from '@/lib/systems/inventoryMocks'
+import { formatDateTimeNoSeconds } from '@/lib/dateTime'
+import { canReadSystems } from '@/lib/permissions'
+import { useLoginStore } from '@/stores/login'
+import { useQuery } from '@pinia/colada'
+import { computed, onWatcherCleanup, ref, useTemplateRef, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import {
+  NeButton,
+  NeBadgeV2,
+  NeDropdownFilter,
+  NeInlineNotification,
+  NeSkeleton,
+  NeTextInput,
+  type FilterOption,
+} from '@nethesis/vue-components'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import {
+  faChevronDown,
+  faChevronUp,
+  faPen,
+  faPlus,
+  faMinus,
+  faAngleDown,
+  faAngleUp,
+  faArrowRight,
+} from '@fortawesome/free-solid-svg-icons'
+
+//// remove mock-mode
+const props = withDefaults(defineProps<{ mockMode?: boolean }>(), { mockMode: false })
+
+const { t, locale } = useI18n()
+const route = useRoute()
+const loginStore = useLoginStore()
+
+// ── Timeline infinite query ──────────────────────────────────────────────────
+const {
+  state: timelineState,
+  asyncStatus: timelineAsyncStatus,
+  hasNextPage,
+  loadNextPage,
+  severityFilter,
+  categoryFilter,
+  diffTypeFilter,
+  fromDate,
+  toDate,
+  areDefaultFiltersApplied,
+  resetFilters: resetTimelineFilters,
+  allInventoryIds,
+  allGroups,
+} = useInventoryTimeline()
+
+// ── Local state ──────────────────────────────────────────────────────────────
+const textFilter = ref('')
+const expandedGroups = ref<Set<string>>(new Set())
+const expandedDiffs = ref<Set<number>>(new Set())
+
+// ── Diffs query (reactive to allInventoryIds from timeline) ──────────────────
+const { state: diffsState, asyncStatus: diffsAsyncStatus } = useQuery({
+  key: () => [
+    INVENTORY_DIFFS_KEY,
+    'timeline',
+    {
+      systemId: route.params.systemId,
+      inventoryIds: allInventoryIds.value,
+      severityFilter: severityFilter.value,
+      categoryFilter: categoryFilter.value,
+      diffTypeFilter: diffTypeFilter.value,
+      fromDate: fromDate.value,
+      toDate: toDate.value,
+    },
+  ],
+  enabled: () =>
+    !props.mockMode &&
+    !!loginStore.jwtToken &&
+    canReadSystems() &&
+    !!route.params.systemId &&
+    allInventoryIds.value.length > 0,
+  query: () =>
+    getInventoryDiffs(
+      route.params.systemId as string,
+      1,
+      500,
+      severityFilter.value,
+      categoryFilter.value,
+      diffTypeFilter.value,
+      allInventoryIds.value,
+      fromDate.value,
+      toDate.value,
+    ),
+})
+
+// ── Mock mode overrides ───────────────────────────────────────────────────────
+const effectiveGroups = computed(() => (props.mockMode ? mockTimelineGroups : allGroups.value))
+
+// ── Auto-expand all groups when they load ────────────────────────────────────
+watch(
+  //// revert to allGroups.value when mockMode is removed
+  () => effectiveGroups.value,
+  (groups) => {
+    groups.forEach((g) => expandedGroups.value.add(g.date))
+  },
+  { immediate: true, deep: true },
+)
+
+// ── Filter options ────────────────────────────────────────────────────────────
+const severityFilterOptions = computed<FilterOption[]>(() => [
+  { id: 'critical', label: t('system_detail.severity_critical') },
+  { id: 'high', label: t('system_detail.severity_high') },
+  { id: 'medium', label: t('system_detail.severity_medium') },
+  { id: 'low', label: t('system_detail.severity_low') },
+])
+
+const categoryFilterOptions = computed<FilterOption[]>(() => [
+  { id: 'os', label: t('system_detail.category_os') },
+  { id: 'hardware', label: t('system_detail.category_hardware') },
+  { id: 'network', label: t('system_detail.category_network') },
+  { id: 'security', label: t('system_detail.category_security') },
+  { id: 'backup', label: t('system_detail.category_backup') },
+  { id: 'features', label: t('system_detail.category_features') },
+  { id: 'modules', label: t('system_detail.category_modules') },
+  { id: 'cluster', label: t('system_detail.category_cluster') },
+  { id: 'nodes', label: t('system_detail.category_nodes') },
+  { id: 'system', label: t('system_detail.category_system') },
+])
+
+const diffTypeFilterOptions = computed<FilterOption[]>(() => [
+  { id: 'create', label: t('system_detail.diff_type_create') },
+  { id: 'update', label: t('system_detail.diff_type_update') },
+  { id: 'delete', label: t('system_detail.diff_type_delete') },
+])
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+const DAY_MS = 24 * 60 * 60 * 1000
+
+function todayDateString(): string {
+  return new Date().toISOString().slice(0, 10)
+}
+
+function formatGroupDate(dateStr: string): string {
+  const date = new Date(dateStr + 'T00:00:00')
+  return date.toLocaleDateString(locale.value, { day: 'numeric', month: 'short', year: 'numeric' })
+}
+
+function gapDaysBetween(newerDateStr: string, olderDateStr: string, newerIsToday: boolean): number {
+  const newer = new Date(newerDateStr + 'T00:00:00')
+  const older = new Date(olderDateStr + 'T00:00:00')
+  const diffDays = Math.round((newer.getTime() - older.getTime()) / DAY_MS)
+  // If the newer date is "today" with no changes it counts as a gap day itself
+  return newerIsToday ? diffDays : diffDays - 1
+}
+
+function gapBadgeText(days: number): string {
+  if (days === 1) return t('system_detail.one_day_no_changes')
+  return t('system_detail.n_days_no_changes', { n: days })
+}
+
+// ── Display groups (today + all groups) ───────────────────────────────────────
+interface DisplayGroup {
+  date: string
+  isToday: boolean
+  change_count: number
+  inventory_ids: number[]
+  gapDaysAfter: number // gap to the NEXT (older) entry in the timeline
+}
+
+const today = todayDateString()
+
+const displayGroups = computed<DisplayGroup[]>(() => {
+  const groups = effectiveGroups.value
+  const result: DisplayGroup[] = []
+
+  // Always show Today as the first entry
+  const todayGroup = groups.find((g) => g.date === today)
+  const firstRealGroup = todayGroup ? groups[1] : groups[0]
+
+  const gapAfterToday = firstRealGroup ? gapDaysBetween(today, firstRealGroup.date, !todayGroup) : 0
+
+  result.push({
+    date: today,
+    isToday: true,
+    change_count: todayGroup?.change_count ?? 0,
+    inventory_ids: todayGroup?.inventory_ids ?? [],
+    gapDaysAfter: gapAfterToday > 0 ? gapAfterToday : 0,
+  })
+
+  // Add the remaining groups (skip today's group if it was in allGroups)
+  const otherGroups = todayGroup ? groups.slice(1) : groups
+  otherGroups.forEach((group, idx) => {
+    const nextGroup = otherGroups[idx + 1]
+    const gapAfter = nextGroup ? gapDaysBetween(group.date, nextGroup.date, false) : 0
+    result.push({
+      date: group.date,
+      isToday: false,
+      change_count: group.change_count,
+      inventory_ids: group.inventory_ids,
+      gapDaysAfter: gapAfter > 0 ? gapAfter : 0,
+    })
+  })
+
+  return result
+})
+
+const isTimelineEmpty = computed(() => {
+  if (!props.mockMode && timelineState.value.status !== 'success') return false
+  return effectiveGroups.value.filter((g) => g.change_count > 0).length === 0
+})
+
+// ── Diffs helpers ─────────────────────────────────────────────────────────────
+const allDiffs = computed<InventoryDiff[]>(() =>
+  props.mockMode ? mockInventoryDiffs : (diffsState.value.data?.diffs ?? []),
+)
+
+const timelineIsPending = computed(
+  () => !props.mockMode && timelineState.value.status === 'pending',
+)
+const timelineError = computed(() =>
+  !props.mockMode && timelineState.value.status === 'error' ? timelineState.value.error : null,
+)
+const diffsError = computed(() =>
+  !props.mockMode && diffsState.value.status === 'error' ? diffsState.value.error : null,
+)
+const diffsIsLoading = computed(
+  () =>
+    !props.mockMode &&
+    (diffsState.value.status === 'pending' || diffsAsyncStatus.value === 'loading'),
+)
+const effectiveHasNextPage = computed(() => !props.mockMode && hasNextPage.value)
+
+function getDiffsForGroup(group: DisplayGroup): InventoryDiff[] {
+  const idSet = new Set(group.inventory_ids)
+  return allDiffs.value.filter((d) => idSet.has(d.inventory_id))
+}
+
+function formatDiffValue(value: unknown): string {
+  if (value === null || value === undefined) return '—'
+  if (typeof value === 'object') return JSON.stringify(value)
+  return String(value) || '—'
+}
+
+function objectToLines(value: unknown): string[] {
+  if (value !== null && typeof value === 'object' && !Array.isArray(value)) {
+    return Object.entries(value as Record<string, unknown>).map(
+      ([k, v]) => `"${k}": ${JSON.stringify(v)}`,
+    )
+  }
+  return [formatDiffValue(value)]
+}
+
+function getFilteredDiffsForGroup(group: DisplayGroup): InventoryDiff[] {
+  const diffs = getDiffsForGroup(group)
+  if (!textFilter.value.trim()) return diffs
+  const search = textFilter.value.trim().toLowerCase()
+  return diffs.filter((d) => d.field_path.toLowerCase().includes(search))
+}
+
+// ── Group expand/collapse ─────────────────────────────────────────────────────
+function toggleGroup(date: string) {
+  if (expandedGroups.value.has(date)) {
+    expandedGroups.value.delete(date)
+  } else {
+    expandedGroups.value.add(date)
+  }
+}
+
+// ── Diff expand/collapse ──────────────────────────────────────────────────────
+function toggleDiff(diffId: number) {
+  if (expandedDiffs.value.has(diffId)) {
+    expandedDiffs.value.delete(diffId)
+  } else {
+    expandedDiffs.value.add(diffId)
+  }
+}
+
+// ── Diff type styling ─────────────────────────────────────────────────────────
+function getDiffTypeIcon(type: InventoryDiffType) {
+  if (type === 'create') return faPlus
+  if (type === 'delete') return faMinus
+  return faPen
+}
+
+function getDiffTypeIconBg(type: InventoryDiffType): string {
+  if (type === 'create') return 'bg-green-600'
+  if (type === 'delete') return 'bg-red-500'
+  return 'bg-blue-700'
+}
+
+function getDiffTypeBorder(type: InventoryDiffType): string {
+  if (type === 'create') return 'border-l-green-500'
+  if (type === 'delete') return 'border-l-red-500'
+  return 'border-l-blue-700'
+}
+
+//// use NeBadgeV2Kind as return type instead of string literal union
+
+// ── Severity badge styling ────────────────────────────────────────────────────
+function getSeverityKind(
+  severity: InventoryDiffSeverity,
+): 'rose' | 'amber' | 'blue' | 'custom' | 'primary' | 'indigo' | 'gray' | 'green' {
+  if (severity === 'critical') return 'rose'
+  if (severity === 'high') return 'amber'
+  if (severity === 'low') return 'blue'
+  return 'custom'
+}
+
+function getSeverityCustomKindClasses(severity: InventoryDiffSeverity): string | undefined {
+  if (severity === 'medium')
+    return 'bg-yellow-100 text-yellow-700 dark:bg-yellow-950 dark:text-yellow-400'
+  return undefined
+}
+
+function getSeverityLabel(severity: InventoryDiffSeverity): string {
+  return t(`system_detail.severity_${severity}`)
+}
+
+function getCategoryLabel(category: InventoryDiffCategory): string {
+  return t(`system_detail.category_${category}`)
+}
+
+// ── Reset all filters ─────────────────────────────────────────────────────────
+function resetAllFilters() {
+  textFilter.value = ''
+  resetTimelineFilters()
+}
+
+// ── Infinite scroll (IntersectionObserver) ────────────────────────────────────
+const loadMoreTrigger = useTemplateRef<HTMLElement>('loadMoreTrigger')
+
+watch(loadMoreTrigger, (el) => {
+  if (!el) return
+  const observer = new IntersectionObserver(
+    (entries) => {
+      if (entries[0]?.isIntersecting && hasNextPage.value) {
+        loadNextPage()
+      }
+    },
+    { rootMargin: '200px', threshold: [0] },
+  )
+  observer.observe(el)
+  onWatcherCleanup(() => observer.disconnect())
+})
+
+// ── Computed filter state for NeDropdownFilter (need arrays of string IDs) ───
+const severityFilterModel = computed<string[]>({
+  get: () => severityFilter.value as string[],
+  set: (val) => {
+    severityFilter.value = val as InventoryDiffSeverity[]
+  },
+})
+
+const categoryFilterModel = computed<string[]>({
+  get: () => categoryFilter.value as string[],
+  set: (val) => {
+    categoryFilter.value = val as InventoryDiffCategory[]
+  },
+})
+
+const diffTypeFilterModel = computed<string[]>({
+  get: () => diffTypeFilter.value as string[],
+  set: (val) => {
+    diffTypeFilter.value = val as InventoryDiffType[]
+  },
+})
+</script>
+
+<template>
+  <!-- Filters bar -->
+  <div class="mb-6 flex flex-wrap items-center gap-4">
+    <!-- Text filter -->
+    <NeTextInput
+      v-model.trim="textFilter"
+      is-search
+      :placeholder="$t('common.filter')"
+      class="max-w-xs"
+    />
+    <!-- Severity filter -->
+    <NeDropdownFilter
+      v-model="severityFilterModel"
+      kind="checkbox"
+      :label="t('system_detail.severity')"
+      :options="severityFilterOptions"
+      :show-clear-filter="false"
+      :clear-filter-label="t('ne_dropdown_filter.clear_filter')"
+      :open-menu-aria-label="t('ne_dropdown_filter.open_filter')"
+      :no-options-label="t('ne_dropdown_filter.no_options')"
+      :more-options-hidden-label="t('ne_dropdown_filter.more_options_hidden')"
+      :clear-search-label="t('ne_dropdown_filter.clear_search')"
+    />
+    <!-- Category filter -->
+    <NeDropdownFilter
+      v-model="categoryFilterModel"
+      kind="checkbox"
+      :label="t('system_detail.category')"
+      :options="categoryFilterOptions"
+      show-options-filter
+      :show-clear-filter="false"
+      :clear-filter-label="t('ne_dropdown_filter.clear_filter')"
+      :open-menu-aria-label="t('ne_dropdown_filter.open_filter')"
+      :no-options-label="t('ne_dropdown_filter.no_options')"
+      :more-options-hidden-label="t('ne_dropdown_filter.more_options_hidden')"
+      :clear-search-label="t('ne_dropdown_filter.clear_search')"
+    />
+    <!-- Change type filter -->
+    <NeDropdownFilter
+      v-model="diffTypeFilterModel"
+      kind="checkbox"
+      :label="t('system_detail.change_type')"
+      :options="diffTypeFilterOptions"
+      :show-clear-filter="false"
+      :clear-filter-label="t('ne_dropdown_filter.clear_filter')"
+      :open-menu-aria-label="t('ne_dropdown_filter.open_filter')"
+      :no-options-label="t('ne_dropdown_filter.no_options')"
+      :more-options-hidden-label="t('ne_dropdown_filter.more_options_hidden')"
+      :clear-search-label="t('ne_dropdown_filter.clear_search')"
+    />
+    <!-- Date range: from -->
+    <div class="flex items-center gap-2">
+      <label class="text-sm text-gray-500 dark:text-gray-400">{{
+        t('system_detail.from_date')
+      }}</label>
+      <input
+        v-model="fromDate"
+        type="date"
+        class="rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 focus:ring-2 focus:ring-sky-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-gray-300"
+      />
+    </div>
+    <!-- Date range: to -->
+    <div class="flex items-center gap-2">
+      <label class="text-sm text-gray-500 dark:text-gray-400">{{
+        t('system_detail.to_date')
+      }}</label>
+      <input
+        v-model="toDate"
+        type="date"
+        class="rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 focus:ring-2 focus:ring-sky-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-gray-300"
+      />
+    </div>
+    <!-- Reset filters -->
+    <NeButton kind="tertiary" @click="resetAllFilters">
+      {{ t('common.reset_filters') }}
+    </NeButton>
+  </div>
+
+  <!-- Error notifications -->
+  <NeInlineNotification
+    v-if="timelineError"
+    kind="error"
+    :title="t('system_detail.cannot_retrieve_inventory_timeline')"
+    :description="timelineError?.message"
+    class="mb-6"
+  />
+  <NeInlineNotification
+    v-if="diffsError"
+    kind="error"
+    :title="t('system_detail.cannot_retrieve_inventory_diffs')"
+    :description="diffsError?.message"
+    class="mb-6"
+  />
+
+  <!-- Loading skeleton (initial load) -->
+  <div v-if="timelineIsPending" class="space-y-6">
+    <div v-for="i in 3" :key="i" class="flex gap-12">
+      <NeSkeleton class="h-5 w-24" />
+      <div class="flex-1 space-y-3">
+        <NeSkeleton class="h-5 w-32" />
+        <NeSkeleton class="h-14 w-full" />
+        <NeSkeleton class="h-14 w-full" />
+      </div>
+    </div>
+  </div>
+
+  <!-- Empty state -->
+  <div
+    v-else-if="isTimelineEmpty"
+    class="flex flex-col items-center justify-center py-16 text-center text-gray-500 dark:text-gray-400"
+  >
+    <p class="text-base font-medium">{{ t('system_detail.no_changes_in_timeline') }}</p>
+    <p class="mt-1 text-sm">
+      {{
+        areDefaultFiltersApplied
+          ? t('system_detail.no_changes_in_timeline_no_filters_description')
+          : t('system_detail.no_changes_in_timeline_description')
+      }}
+    </p>
+    <NeButton
+      v-if="!areDefaultFiltersApplied"
+      kind="tertiary"
+      class="mt-4"
+      @click="resetAllFilters"
+    >
+      {{ t('common.reset_filters') }}
+    </NeButton>
+  </div>
+
+  <!-- Timeline -->
+  <div v-else class="relative mt-2">
+    <!-- Vertical timeline line -->
+    <div
+      class="absolute top-0 bottom-0 w-px bg-gray-200 dark:bg-gray-700"
+      style="left: 144px"
+    ></div>
+
+    <div v-for="group in displayGroups" :key="group.date">
+      <!-- Date header row -->
+      <div class="relative mb-2 flex items-start">
+        <!-- Date label column (right-aligned) -->
+        <div class="w-36 flex-shrink-0 pt-0.5 pr-6 text-right">
+          <span
+            class="text-base font-medium"
+            :class="
+              group.isToday
+                ? 'text-indigo-600 dark:text-indigo-400'
+                : 'text-gray-500 dark:text-gray-400'
+            "
+          >
+            {{ group.isToday ? t('system_detail.today') : formatGroupDate(group.date) }}
+          </span>
+        </div>
+
+        <!-- Timeline dot (centered on the vertical line at left: 144px, dot size 10px → left: 139px) -->
+        <div
+          class="absolute z-10 size-2.5 rounded-full"
+          :class="
+            group.isToday ? 'bg-indigo-700 dark:bg-indigo-500' : 'bg-gray-300 dark:bg-gray-600'
+          "
+          style="left: 139px; top: 7px"
+        ></div>
+
+        <!-- Content -->
+        <div class="flex-1 pl-10">
+          <!-- Today with no changes -->
+          <template v-if="group.isToday && group.change_count === 0">
+            <span class="text-base font-medium text-indigo-600 dark:text-indigo-400">
+              {{ t('system_detail.no_changes_today') }}
+            </span>
+          </template>
+
+          <!-- Group with changes: toggle header -->
+          <template v-else-if="group.change_count > 0">
+            <button
+              class="flex items-center gap-2 text-base font-medium text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
+              @click="toggleGroup(group.date)"
+            >
+              <FontAwesomeIcon
+                :icon="expandedGroups.has(group.date) ? faChevronUp : faChevronDown"
+                class="size-3.5"
+              />
+              <span>
+                {{
+                  group.change_count === 1
+                    ? t('system_detail.one_change')
+                    : t('system_detail.n_changes', { n: group.change_count })
+                }}
+              </span>
+            </button>
+
+            <!-- Diffs list -->
+            <div v-if="expandedGroups.has(group.date)" class="mt-3 space-y-3">
+              <!-- Loading diffs state -->
+              <template v-if="diffsIsLoading">
+                <NeSkeleton v-for="j in group.change_count" :key="j" class="h-14 w-full" />
+              </template>
+
+              <template v-else>
+                <div
+                  v-for="diff in getFilteredDiffsForGroup(group)"
+                  :key="diff.id"
+                  class="overflow-hidden rounded-lg border-l-4 bg-white shadow-sm dark:bg-gray-950"
+                  :class="getDiffTypeBorder(diff.diff_type)"
+                >
+                  <!-- Diff header row -->
+                  <div
+                    class="flex cursor-pointer items-center justify-between px-5 py-3"
+                    @click="toggleDiff(diff.id)"
+                  >
+                    <div class="flex items-center gap-4">
+                      <!-- Change type icon -->
+                      <div
+                        class="flex size-6 flex-shrink-0 items-center justify-center rounded-full"
+                        :class="getDiffTypeIconBg(diff.diff_type)"
+                      >
+                        <FontAwesomeIcon
+                          :icon="getDiffTypeIcon(diff.diff_type)"
+                          class="size-3 text-white"
+                        />
+                      </div>
+                      <!-- Category -->
+                      <span
+                        class="w-20 flex-shrink-0 text-sm font-medium text-gray-700 uppercase dark:text-gray-50"
+                      >
+                        {{ getCategoryLabel(diff.category) }}
+                      </span>
+                      <!-- Field path -->
+                      <span class="text-sm text-gray-500 dark:text-gray-400">
+                        {{ diff.field_path }}
+                      </span>
+                      <!-- Severity badge -->
+                      <NeBadgeV2
+                        :kind="getSeverityKind(diff.severity)"
+                        :custom-kind-classes="getSeverityCustomKindClasses(diff.severity)"
+                      >
+                        {{ getSeverityLabel(diff.severity) }}
+                      </NeBadgeV2>
+                    </div>
+                    <!-- Expand chevron -->
+                    <FontAwesomeIcon
+                      :icon="expandedDiffs.has(diff.id) ? faAngleUp : faAngleDown"
+                      class="size-4 flex-shrink-0 text-gray-400 dark:text-gray-500"
+                    />
+                  </div>
+
+                  <!-- Expanded diff detail -->
+                  <div
+                    v-if="expandedDiffs.has(diff.id)"
+                    class="border-t border-gray-100 px-5 py-3 dark:border-gray-800"
+                  >
+                    <!-- Update: inline strikethrough → arrow → new value -->
+                    <div
+                      v-if="diff.diff_type === 'update'"
+                      class="flex items-center gap-4 rounded-sm bg-blue-50 px-1.5 py-0.5 dark:bg-blue-950"
+                    >
+                      <FontAwesomeIcon
+                        :icon="faPen"
+                        class="size-3 shrink-0 text-blue-700 dark:text-blue-400"
+                      />
+                      <span class="font-mono text-sm text-gray-700 line-through dark:text-gray-300">
+                        {{ formatDiffValue(diff.previous_value) }}
+                      </span>
+                      <FontAwesomeIcon
+                        :icon="faArrowRight"
+                        class="size-4 shrink-0 text-gray-500 dark:text-gray-400"
+                      />
+                      <span class="font-mono text-sm text-gray-700 dark:text-gray-300">
+                        {{ formatDiffValue(diff.current_value) }}
+                      </span>
+                    </div>
+                    <!-- Create: green list of added values -->
+                    <div
+                      v-else-if="diff.diff_type === 'create'"
+                      class="flex flex-col gap-0.5 rounded-sm bg-green-50 px-1.5 py-0.5 dark:bg-green-950"
+                    >
+                      <div
+                        v-for="(line, idx) in objectToLines(diff.current_value)"
+                        :key="idx"
+                        class="flex items-center gap-4"
+                      >
+                        <FontAwesomeIcon
+                          :icon="faPlus"
+                          class="size-3 shrink-0 text-green-600 dark:text-green-400"
+                        />
+                        <span class="font-mono text-sm text-gray-700 dark:text-gray-300">{{
+                          line
+                        }}</span>
+                      </div>
+                    </div>
+                    <!-- Delete: rose list of removed values with strikethrough -->
+                    <div
+                      v-else
+                      class="flex flex-col gap-0.5 rounded-sm bg-rose-50 px-1.5 py-0.5 dark:bg-rose-950"
+                    >
+                      <div
+                        v-for="(line, idx) in objectToLines(diff.previous_value)"
+                        :key="idx"
+                        class="flex items-center gap-4"
+                      >
+                        <FontAwesomeIcon
+                          :icon="faMinus"
+                          class="size-3 shrink-0 text-rose-700 dark:text-rose-400"
+                        />
+                        <span
+                          class="font-mono text-sm text-gray-700 line-through dark:text-gray-300"
+                          >{{ line }}</span
+                        >
+                      </div>
+                    </div>
+                    <!-- Timestamp -->
+                    <p class="mt-2 text-[10px] text-gray-500 dark:text-gray-400">
+                      {{ formatDateTimeNoSeconds(new Date(diff.created_at), locale) }}
+                    </p>
+                  </div>
+                </div>
+
+                <!-- No diffs found -->
+                <p
+                  v-if="getFilteredDiffsForGroup(group).length === 0"
+                  class="text-sm text-gray-400 dark:text-gray-500"
+                >
+                  {{ t('common.try_changing_search_filters') }}
+                </p>
+              </template>
+            </div>
+          </template>
+        </div>
+      </div>
+
+      <!-- Gap badge (days without changes between this group and the next) -->
+      <div v-if="group.gapDaysAfter > 0" class="mb-4 flex items-start">
+        <div class="w-36 flex-shrink-0"></div>
+        <div class="flex-1 pl-10">
+          <span
+            class="inline-block rounded bg-gray-200 px-3 py-1 text-sm font-medium text-gray-800 dark:bg-gray-600 dark:text-gray-100"
+          >
+            {{ gapBadgeText(group.gapDaysAfter) }}
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Load more trigger (IntersectionObserver target) -->
+    <div v-if="effectiveHasNextPage" ref="loadMoreTrigger" class="flex items-start py-4">
+      <div class="w-36 flex-shrink-0"></div>
+      <div class="flex-1 pl-10">
+        <p class="text-sm text-gray-400 dark:text-gray-500">
+          {{ t('common.loading') }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/i18n/en/translation.json b/frontend/src/i18n/en/translation.json
index 199ec7322..38fc6c286 100644
--- a/frontend/src/i18n/en/translation.json
+++ b/frontend/src/i18n/en/translation.json
@@ -30,10 +30,10 @@
     "go_to_page": "Go to {page}",
     "open_page": "Open {page}",
     "actions": "Actions",
-    "object_created_successfully": "{name} created successfully",
-    "object_saved_successfully": "{name} saved successfully",
-    "object_destroyed_successfully": "{name} destroyed successfully",
-    "object_archived_successfully": "{name} archived successfully",
+    "object_created_successfully": "{name} has been created successfully",
+    "object_saved_successfully": "{name} has been updated successfully",
+    "object_destroyed_successfully": "{name} has been destroyed successfully",
+    "object_archived_successfully": "{name} has been archived successfully",
     "updating": "Updating...",
     "loading": "Loading...",
     "show": "Show",
@@ -528,7 +528,42 @@
     "system_key": "System key",
     "cannot_determine_system_url_description": "Cannot access the system because its URL cannot be determined.",
     "change_history_description": "The change history is based on the differences between the inventories sent by the system. If the system has not sent any inventory yet, no change history will be available.",
-    "cannot_retrieve_inventory_changes": "Cannot retrieve inventory changes"
+    "cannot_retrieve_inventory_changes": "Cannot retrieve inventory changes",
+    "today": "Today",
+    "no_changes_today": "No changes",
+    "one_day_no_changes": "1 day, no changes",
+    "n_days_no_changes": "{n} days, no changes",
+    "one_change": "1 change",
+    "n_changes": "{n} changes",
+    "severity": "Severity",
+    "category": "Category",
+    "change_type": "Change type",
+    "from_date": "From",
+    "to_date": "To",
+    "cannot_retrieve_inventory_timeline": "Cannot retrieve inventory timeline",
+    "cannot_retrieve_inventory_diffs": "Cannot retrieve inventory diffs",
+    "previous_value": "Previous value",
+    "current_value": "Current value",
+    "diff_type_create": "Created",
+    "diff_type_update": "Updated",
+    "diff_type_delete": "Deleted",
+    "severity_critical": "Critical",
+    "severity_high": "High",
+    "severity_medium": "Medium",
+    "severity_low": "Low",
+    "category_os": "OS",
+    "category_hardware": "Hardware",
+    "category_network": "Network",
+    "category_security": "Security",
+    "category_backup": "Backup",
+    "category_features": "Features",
+    "category_modules": "Modules",
+    "category_cluster": "Cluster",
+    "category_nodes": "Nodes",
+    "category_system": "System",
+    "no_changes_in_timeline": "No change history",
+    "no_changes_in_timeline_description": "No changes match the current filters.",
+    "no_changes_in_timeline_no_filters_description": "The system has not reported any changes yet."
   },
   "application_detail": {
     "title": "Application detail",
diff --git a/frontend/src/lib/systems/inventoryDiffs.ts b/frontend/src/lib/systems/inventoryDiffs.ts
index 997516ffa..44a85073a 100644
--- a/frontend/src/lib/systems/inventoryDiffs.ts
+++ b/frontend/src/lib/systems/inventoryDiffs.ts
@@ -28,12 +28,12 @@ export type InventoryDiffType = 'create' | 'update' | 'delete'
 export interface InventoryDiff {
   id: number
   system_id: string
-  previous_id: number
-  current_id: number
+  previous_inventory_id: number | null
+  inventory_id: number
   diff_type: InventoryDiffType
   field_path: string
-  previous_value: string
-  current_value: string
+  previous_value: unknown
+  current_value: unknown
   severity: InventoryDiffSeverity
   category: InventoryDiffCategory
   notification_sent: boolean
diff --git a/frontend/src/lib/systems/inventoryMocks.ts b/frontend/src/lib/systems/inventoryMocks.ts
new file mode 100644
index 000000000..e48bf9367
--- /dev/null
+++ b/frontend/src/lib/systems/inventoryMocks.ts
@@ -0,0 +1,641 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+/**
+ * Mock data for SystemChangesTimeline — pass mockMode prop to the component to
+ * render with this data instead of live API calls.
+ *
+ * Timeline covers today (no changes) + ten historical groups spread across
+ * four months, with notable gaps between them.  Diffs exercise every
+ * combination of diff_type × severity × category and include scalar, boolean,
+ * object, array, empty-string, and null values.
+ */
+
+import { type InventoryDiff } from './inventoryDiffs'
+import { type InventoryTimelineGroup, type InventoryTimelineSummary } from './inventoryTimeline'
+import { type Pagination } from '@/lib/common'
+
+// ── Reference date ────────────────────────────────────────────────────────────
+// The component always injects today's date dynamically, so these groups start
+// from 2026-03-22 (yesterday).
+
+// ── Timeline summary ──────────────────────────────────────────────────────────
+export const mockTimelineSummary: InventoryTimelineSummary = {
+  total: 35,
+  critical: 6,
+  high: 8,
+  medium: 7,
+  low: 14,
+}
+
+// ── Timeline groups ───────────────────────────────────────────────────────────
+// Layout (newest → oldest):
+//
+//  2026-03-22  yesterday      3 changes   inventory_ids: 101–103
+//  2026-03-21  2 days ago     1 change    inventory_ids: 104
+//  2026-03-18  5 days ago     5 changes   inventory_ids: 105–109   (gap: 2 days)
+//  2026-03-13  10 days ago    2 changes   inventory_ids: 110–111   (gap: 4 days)
+//  2026-03-01  22 days ago    4 changes   inventory_ids: 112–115   (gap: 11 days)
+//  2026-02-15  36 days ago    4 changes   inventory_ids: 116–119   (gap: 14 days)
+//  2026-02-01  50 days ago    3 changes   inventory_ids: 120–122   (gap: 14 days)
+//  2026-01-18  64 days ago    5 changes   inventory_ids: 123–127   (gap: 14 days)
+//  2026-01-05  77 days ago    2 changes   inventory_ids: 128–129   (gap: 13 days)
+//  2025-12-22  91 days ago    6 changes   inventory_ids: 130–135   (gap: 14 days)
+export const mockTimelineGroups: InventoryTimelineGroup[] = [
+  {
+    date: '2026-03-22',
+    inventory_count: 3,
+    change_count: 3,
+    inventory_ids: [101, 102, 103],
+  },
+  {
+    date: '2026-03-21',
+    inventory_count: 1,
+    change_count: 1,
+    inventory_ids: [104],
+  },
+  {
+    date: '2026-03-18',
+    inventory_count: 5,
+    change_count: 5,
+    inventory_ids: [105, 106, 107, 108, 109],
+  },
+  {
+    date: '2026-03-13',
+    inventory_count: 2,
+    change_count: 2,
+    inventory_ids: [110, 111],
+  },
+  {
+    date: '2026-03-01',
+    inventory_count: 4,
+    change_count: 4,
+    inventory_ids: [112, 113, 114, 115],
+  },
+  {
+    date: '2026-02-15',
+    inventory_count: 4,
+    change_count: 4,
+    inventory_ids: [116, 117, 118, 119],
+  },
+  {
+    date: '2026-02-01',
+    inventory_count: 3,
+    change_count: 3,
+    inventory_ids: [120, 121, 122],
+  },
+  {
+    date: '2026-01-18',
+    inventory_count: 5,
+    change_count: 5,
+    inventory_ids: [123, 124, 125, 126, 127],
+  },
+  {
+    date: '2026-01-05',
+    inventory_count: 2,
+    change_count: 2,
+    inventory_ids: [128, 129],
+  },
+  {
+    date: '2025-12-22',
+    inventory_count: 6,
+    change_count: 6,
+    inventory_ids: [130, 131, 132, 133, 134, 135],
+  },
+]
+
+export const mockTimelinePagination: Pagination = {
+  page: 1,
+  page_size: 10,
+  total_count: 10,
+  total_pages: 1,
+  has_next: false,
+  has_prev: false,
+}
+
+// ── Inventory diffs ───────────────────────────────────────────────────────────
+// 15 diffs covering every diff_type × severity combination and all 10 categories.
+
+export const mockInventoryDiffs: InventoryDiff[] = [
+  // ── 2026-03-22 (inventory_ids 101–103) ──────────────────────────────────────
+  {
+    id: 1,
+    system_id: 'sys-demo-001',
+    previous_inventory_id: 100,
+    inventory_id: 101,
+    diff_type: 'update',
+    category: 'os',
+    field_path: 'os.kernel_version',
+    previous_value: '5.15.0-89-generic',
+    current_value: '5.15.0-91-generic',
+    severity: 'low',
+    notification_sent: false,
+    created_at: '2026-03-22T08:14:02Z',
+  },
+  {
+    id: 2,
+    system_id: 'sys-demo-001',
+    previous_inventory_id: 100,
+    inventory_id: 102,
+    diff_type: 'create',
+    category: 'security',
+    field_path: 'security.firewall_rules[12]',
+    previous_value: null,
+    current_value: { port: 22, protocol: 'tcp', action: 'ACCEPT', source: '10.0.0.0/8' },
+    severity: 'critical',
+    notification_sent: true,
+    created_at: '2026-03-22T09:31:45Z',
+  },
+  {
+    id: 3,
+    system_id: 'sys-demo-001',
+    previous_inventory_id: 100,
+    inventory_id: 103,
+    diff_type: 'delete',
+    category: 'network',
+    field_path: 'network.interfaces.eth1',
+    previous_value: { ip: '192.168.1.50', netmask: '255.255.255.0', mtu: 1500 },
+    current_value: null,
+    severity: 'medium',
+    notification_sent: false,
+    created_at: '2026-03-22T11:05:19Z',
+  },
+
+  // ── 2026-03-21 (inventory_id 104) ───────────────────────────────────────────
+  {
+    id: 4,
+    system_id: 'sys-demo-001',
+    previous_inventory_id: 103,
+    inventory_id: 104,
+    diff_type: 'update',
+    category: 'hardware',
+    field_path: 'hardware.cpu.cores',
+    previous_value: 4,
+    current_value: 8,
+    severity: 'high',
+    notification_sent: true,
+    created_at: '2026-03-21T14:22:00Z',
+  },
+
+  // ── 2026-03-18 (inventory_ids 105–109) ──────────────────────────────────────
+  {
+    id: 5,
+    system_id: 'sys-demo-001',
+    previous_inventory_id: 104,
+    inventory_id: 105,
+    diff_type: 'create',
+    category: 'modules',
+    field_path: 'modules[7]',
+    previous_value: null,
+    current_value: { name: 'nethserver-fail2ban', version: '1.2.3', active: true },
+    severity: 'low',
+    notification_sent: false,
+    created_at: '2026-03-18T06:00:01Z',
+  },
+  {
+    id: 6,
+    system_id: 'sys-demo-001',
+    previous_inventory_id: 104,
+    inventory_id: 106,
+    diff_type: 'update',
+    category: 'os',
+    field_path: 'os.version',
+    previous_value: 'NethServer 7.9.2009',
+    current_value: 'NethServer 8.1',
+    severity: 'high',
+    notification_sent: true,
+    created_at: '2026-03-18T06:05:33Z',
+  },
+  {
+    id: 7,
+    system_id: 'sys-demo-001',
+    previous_inventory_id: 104,
+    inventory_id: 107,
+    diff_type: 'delete',
+    category: 'backup',
+    field_path: 'backup.jobs.nightly_db',
+    previous_value: { schedule: '0 2 * * *', destination: '/mnt/nas/backup', retention: 7 },
+    current_value: null,
+    severity: 'critical',
+    notification_sent: true,
+    created_at: '2026-03-18T06:10:11Z',
+  },
+  {
+    id: 8,
+    system_id: 'sys-demo-001',
+    previous_inventory_id: 104,
+    inventory_id: 108,
+    diff_type: 'create',
+    category: 'cluster',
+    field_path: 'cluster.nodes[2]',
+    previous_value: null,
+    current_value: { name: 'node3', role: 'worker', ip: '10.0.0.3', joined_at: '2026-03-18' },
+    severity: 'medium',
+    notification_sent: false,
+    created_at: '2026-03-18T07:45:55Z',
+  },
+  {
+    id: 9,
+    system_id: 'sys-demo-001',
+    previous_inventory_id: 104,
+    inventory_id: 109,
+    diff_type: 'update',
+    category: 'features',
+    field_path: 'features.mail.enabled',
+    previous_value: false,
+    current_value: true,
+    severity: 'low',
+    notification_sent: false,
+    created_at: '2026-03-18T09:12:40Z',
+  },
+
+  // ── 2026-03-13 (inventory_ids 110–111) ──────────────────────────────────────
+  {
+    id: 10,
+    system_id: 'sys-demo-001',
+    previous_inventory_id: 109,
+    inventory_id: 110,
+    diff_type: 'update',
+    category: 'system',
+    field_path: 'system.hostname',
+    previous_value: 'server01.example.com',
+    current_value: 'firewall.acme.corp',
+    severity: 'medium',
+    notification_sent: false,
+    created_at: '2026-03-13T16:03:27Z',
+  },
+  {
+    id: 11,
+    system_id: 'sys-demo-001',
+    previous_inventory_id: 109,
+    inventory_id: 111,
+    diff_type: 'delete',
+    category: 'nodes',
+    field_path: 'nodes[1]',
+    previous_value: { name: 'worker-2', status: 'active', cpu_cores: 8, ram_gb: 32 },
+    current_value: null,
+    severity: 'high',
+    notification_sent: true,
+    created_at: '2026-03-13T17:55:09Z',
+  },
+
+  // ── 2026-03-01 (inventory_ids 112–115) ──────────────────────────────────────
+  {
+    id: 12,
+    system_id: 'sys-demo-001',
+    previous_inventory_id: 111,
+    inventory_id: 112,
+    diff_type: 'create',
+    category: 'network',
+    field_path: 'network.bonding.bond0',
+    previous_value: null,
+    current_value: { mode: 'active-backup', slaves: ['eth0', 'eth1'], mtu: 9000 },
+    severity: 'low',
+    notification_sent: false,
+    created_at: '2026-03-01T02:00:00Z',
+  },
+  {
+    id: 13,
+    system_id: 'sys-demo-001',
+    previous_inventory_id: 111,
+    inventory_id: 113,
+    diff_type: 'update',
+    category: 'os',
+    field_path: 'os.packages_update_count',
+    previous_value: 0,
+    current_value: 42,
+    severity: 'high',
+    notification_sent: true,
+    created_at: '2026-03-01T02:05:14Z',
+  },
+  {
+    id: 14,
+    system_id: 'sys-demo-001',
+    previous_inventory_id: 111,
+    inventory_id: 114,
+    diff_type: 'update',
+    category: 'security',
+    field_path: 'security.certificates.web.expiry_days',
+    previous_value: 90,
+    current_value: 7,
+    severity: 'critical',
+    notification_sent: true,
+    created_at: '2026-03-01T02:10:30Z',
+  },
+  {
+    id: 15,
+    system_id: 'sys-demo-001',
+    previous_inventory_id: 111,
+    inventory_id: 115,
+    diff_type: 'create',
+    category: 'features',
+    field_path: 'features.vpn.wireguard',
+    previous_value: null,
+    current_value: { enabled: true, port: 51820, peers: 3 },
+    severity: 'low',
+    notification_sent: false,
+    created_at: '2026-03-01T03:30:00Z',
+  },
+
+  // ── 2026-02-15 (inventory_ids 116–119) ──────────────────────────────────────
+  {
+    id: 16,
+    system_id: 'sys-demo-001',
+    previous_inventory_id: 115,
+    inventory_id: 116,
+    diff_type: 'create',
+    category: 'os',
+    field_path: 'os.swap_enabled',
+    previous_value: null,
+    current_value: false,
+    severity: 'low',
+    notification_sent: false,
+    created_at: '2026-02-15T03:10:00Z',
+  },
+  {
+    id: 17,
+    system_id: 'sys-demo-001',
+    previous_inventory_id: 115,
+    inventory_id: 117,
+    diff_type: 'update',
+    category: 'network',
+    field_path: 'network.dns_servers',
+    previous_value: ['1.1.1.1'],
+    current_value: ['8.8.8.8', '8.8.4.4', '1.1.1.1'],
+    severity: 'medium',
+    notification_sent: false,
+    created_at: '2026-02-15T03:15:22Z',
+  },
+  {
+    id: 18,
+    system_id: 'sys-demo-001',
+    previous_inventory_id: 115,
+    inventory_id: 118,
+    diff_type: 'delete',
+    category: 'security',
+    field_path: 'security.users.admin.authorized_keys[0]',
+    previous_value: { key: 'ssh-rsa AAAAB3NzaC1yc2E...', comment: 'old-laptop', bits: 2048 },
+    current_value: null,
+    severity: 'critical',
+    notification_sent: true,
+    created_at: '2026-02-15T08:44:11Z',
+  },
+  {
+    id: 19,
+    system_id: 'sys-demo-001',
+    previous_inventory_id: 115,
+    inventory_id: 119,
+    diff_type: 'update',
+    category: 'hardware',
+    field_path: 'hardware.memory.total_gb',
+    previous_value: 16,
+    current_value: 32,
+    severity: 'low',
+    notification_sent: false,
+    created_at: '2026-02-15T10:00:00Z',
+  },
+
+  // ── 2026-02-01 (inventory_ids 120–122) ──────────────────────────────────────
+  {
+    id: 20,
+    system_id: 'sys-demo-001',
+    previous_inventory_id: 119,
+    inventory_id: 120,
+    diff_type: 'update',
+    category: 'os',
+    field_path: 'os.timezone',
+    previous_value: 'UTC',
+    current_value: 'Europe/Rome',
+    severity: 'low',
+    notification_sent: false,
+    created_at: '2026-02-01T09:00:00Z',
+  },
+  {
+    id: 21,
+    system_id: 'sys-demo-001',
+    previous_inventory_id: 119,
+    inventory_id: 121,
+    diff_type: 'create',
+    category: 'modules',
+    field_path: 'modules[8]',
+    previous_value: null,
+    current_value: { name: 'nethserver-mail-server', version: '2.4.1', active: true },
+    severity: 'medium',
+    notification_sent: false,
+    created_at: '2026-02-01T11:22:33Z',
+  },
+  {
+    id: 22,
+    system_id: 'sys-demo-001',
+    previous_inventory_id: 119,
+    inventory_id: 122,
+    diff_type: 'delete',
+    category: 'cluster',
+    field_path: 'cluster.virtual_ip',
+    previous_value: { ip: '10.0.0.100', interface: 'eth0', check_interval_ms: 500 },
+    current_value: null,
+    severity: 'high',
+    notification_sent: true,
+    created_at: '2026-02-01T14:55:00Z',
+  },
+
+  // ── 2026-01-18 (inventory_ids 123–127) ──────────────────────────────────────
+  {
+    id: 23,
+    system_id: 'sys-demo-001',
+    previous_inventory_id: 122,
+    inventory_id: 123,
+    diff_type: 'update',
+    category: 'system',
+    field_path: 'system.fqdn',
+    previous_value: 'old.server.local',
+    current_value: 'prod-fw.acme.corp',
+    severity: 'medium',
+    notification_sent: false,
+    created_at: '2026-01-18T07:01:00Z',
+  },
+  {
+    id: 24,
+    system_id: 'sys-demo-001',
+    previous_inventory_id: 122,
+    inventory_id: 124,
+    diff_type: 'create',
+    category: 'network',
+    field_path: 'network.vlans.vlan10',
+    previous_value: null,
+    current_value: { id: 10, name: 'DMZ', interface: 'eth0.10', tagged: true },
+    severity: 'low',
+    notification_sent: false,
+    created_at: '2026-01-18T07:30:45Z',
+  },
+  {
+    id: 25,
+    system_id: 'sys-demo-001',
+    previous_inventory_id: 122,
+    inventory_id: 125,
+    diff_type: 'update',
+    category: 'os',
+    field_path: 'os.selinux_status',
+    previous_value: 'enforcing',
+    current_value: 'permissive',
+    severity: 'critical',
+    notification_sent: true,
+    created_at: '2026-01-18T09:15:00Z',
+  },
+  {
+    id: 26,
+    system_id: 'sys-demo-001',
+    previous_inventory_id: 122,
+    inventory_id: 126,
+    diff_type: 'delete',
+    category: 'backup',
+    field_path: 'backup.jobs.weekly_full',
+    previous_value: { schedule: '0 0 * * 0', destination: 's3://mybucket/weekly', retention: 4 },
+    current_value: null,
+    severity: 'high',
+    notification_sent: true,
+    created_at: '2026-01-18T10:00:00Z',
+  },
+  {
+    id: 27,
+    system_id: 'sys-demo-001',
+    previous_inventory_id: 122,
+    inventory_id: 127,
+    diff_type: 'update',
+    category: 'features',
+    field_path: 'features.antivirus.signatures_date',
+    previous_value: '2025-01-10',
+    current_value: '2026-01-18',
+    severity: 'low',
+    notification_sent: false,
+    created_at: '2026-01-18T12:00:00Z',
+  },
+
+  // ── 2026-01-05 (inventory_ids 128–129) ──────────────────────────────────────
+  {
+    id: 28,
+    system_id: 'sys-demo-001',
+    previous_inventory_id: 127,
+    inventory_id: 128,
+    diff_type: 'update',
+    category: 'hardware',
+    field_path: 'hardware.disk.sda.health',
+    previous_value: 'OK',
+    current_value: 'WARN',
+    severity: 'critical',
+    notification_sent: true,
+    created_at: '2026-01-05T04:00:00Z',
+  },
+  {
+    id: 29,
+    system_id: 'sys-demo-001',
+    previous_inventory_id: 127,
+    inventory_id: 129,
+    diff_type: 'update',
+    category: 'nodes',
+    field_path: 'nodes[0].status',
+    previous_value: 'active',
+    current_value: 'maintenance',
+    severity: 'high',
+    notification_sent: true,
+    created_at: '2026-01-05T06:30:00Z',
+  },
+
+  // ── 2025-12-22 (inventory_ids 130–135) ──────────────────────────────────────
+  {
+    id: 30,
+    system_id: 'sys-demo-001',
+    previous_inventory_id: 129,
+    inventory_id: 130,
+    diff_type: 'create',
+    category: 'security',
+    field_path: 'security.openvpn.certificates[0]',
+    previous_value: null,
+    current_value: { cn: 'vpn-user1', expiry: '2027-12-22', bits: 4096 },
+    severity: 'low',
+    notification_sent: false,
+    created_at: '2025-12-22T01:00:00Z',
+  },
+  {
+    id: 31,
+    system_id: 'sys-demo-001',
+    previous_inventory_id: 129,
+    inventory_id: 131,
+    diff_type: 'update',
+    category: 'os',
+    field_path: 'os.packages_update_count',
+    // edge: number going back to zero
+    previous_value: 23,
+    current_value: 0,
+    severity: 'low',
+    notification_sent: false,
+    created_at: '2025-12-22T02:00:00Z',
+  },
+  {
+    id: 32,
+    system_id: 'sys-demo-001',
+    previous_inventory_id: 129,
+    inventory_id: 132,
+    diff_type: 'delete',
+    category: 'network',
+    field_path: 'network.routes.192.168.99.0/24',
+    previous_value: { gateway: '10.0.0.1', metric: 100, proto: 'static' },
+    current_value: null,
+    severity: 'medium',
+    notification_sent: false,
+    created_at: '2025-12-22T03:10:00Z',
+  },
+  {
+    id: 33,
+    system_id: 'sys-demo-001',
+    previous_inventory_id: 129,
+    inventory_id: 133,
+    diff_type: 'update',
+    category: 'system',
+    field_path: 'system.ssh_port',
+    previous_value: 22,
+    current_value: 2222,
+    severity: 'high',
+    notification_sent: true,
+    created_at: '2025-12-22T04:00:00Z',
+  },
+  {
+    id: 34,
+    system_id: 'sys-demo-001',
+    previous_inventory_id: 129,
+    inventory_id: 134,
+    diff_type: 'update',
+    category: 'hardware',
+    field_path: 'hardware.cpu.model',
+    // edge: empty string → non-empty (renders as '—' → value)
+    previous_value: '',
+    current_value: 'Intel Core i9-13900K @ 3.00GHz',
+    severity: 'low',
+    notification_sent: false,
+    created_at: '2025-12-22T05:00:00Z',
+  },
+  {
+    id: 35,
+    system_id: 'sys-demo-001',
+    // edge: very first inventory snapshot — no previous
+    previous_inventory_id: null,
+    inventory_id: 135,
+    diff_type: 'create',
+    category: 'os',
+    field_path: 'os.installation_date',
+    previous_value: null,
+    current_value: '2025-12-22',
+    severity: 'low',
+    notification_sent: false,
+    created_at: '2025-12-22T06:00:00Z',
+  },
+]
+
+export const mockDiffsPagination: Pagination = {
+  page: 1,
+  page_size: 500,
+  total_count: 35,
+  total_pages: 1,
+  has_next: false,
+  has_prev: false,
+}
diff --git a/frontend/src/queries/systems/inventoryTimeline.ts b/frontend/src/queries/systems/inventoryTimeline.ts
index 21291f989..0590251c8 100644
--- a/frontend/src/queries/systems/inventoryTimeline.ts
+++ b/frontend/src/queries/systems/inventoryTimeline.ts
@@ -8,34 +8,30 @@ import {
 } from '@/lib/systems/inventoryDiffs'
 import {
   INVENTORY_TIMELINE_KEY,
-  INVENTORY_TIMELINE_TABLE_ID,
   getInventoryTimeline,
 } from '@/lib/systems/inventoryTimeline'
 import { canReadSystems } from '@/lib/permissions'
-import { DEFAULT_PAGE_SIZE, loadPageSizeFromStorage } from '@/lib/tablePageSize'
 import { useLoginStore } from '@/stores/login'
-import { defineQuery, useQuery } from '@pinia/colada'
-import { computed, ref, watch } from 'vue'
+import { defineQuery, useInfiniteQuery } from '@pinia/colada'
+import { computed, ref } from 'vue'
 import { useRoute } from 'vue-router'
 
+const TIMELINE_PAGE_SIZE = 10
+
 export const useInventoryTimeline = defineQuery(() => {
   const loginStore = useLoginStore()
   const route = useRoute()
-  const pageNum = ref(1)
-  const pageSize = ref(DEFAULT_PAGE_SIZE)
   const severityFilter = ref<InventoryDiffSeverity[]>([])
   const categoryFilter = ref<InventoryDiffCategory[]>([])
   const diffTypeFilter = ref<InventoryDiffType[]>([])
   const fromDate = ref('')
   const toDate = ref('')
 
-  const { state, asyncStatus, ...rest } = useQuery({
+  const { state, asyncStatus, hasNextPage, loadNextPage } = useInfiniteQuery({
     key: () => [
       INVENTORY_TIMELINE_KEY,
       {
         systemId: route.params.systemId,
-        pageNum: pageNum.value,
-        pageSize: pageSize.value,
         severityFilter: severityFilter.value,
         categoryFilter: categoryFilter.value,
         diffTypeFilter: diffTypeFilter.value,
@@ -44,19 +40,32 @@ export const useInventoryTimeline = defineQuery(() => {
       },
     ],
     enabled: () => !!loginStore.jwtToken && canReadSystems() && !!route.params.systemId,
-    query: () =>
+    initialPageParam: 1,
+    query: ({ pageParam }) =>
       getInventoryTimeline(
         route.params.systemId as string,
-        pageNum.value,
-        pageSize.value,
+        pageParam,
+        TIMELINE_PAGE_SIZE,
         severityFilter.value,
         categoryFilter.value,
         diffTypeFilter.value,
         fromDate.value,
         toDate.value,
       ),
+    getNextPageParam: (lastPage) =>
+      lastPage.pagination.has_next ? lastPage.pagination.page + 1 : null,
   })
 
+  const allInventoryIds = computed(() =>
+    (state.value.data?.pages ?? []).flatMap((page) =>
+      page.groups.flatMap((group) => group.inventory_ids),
+    ),
+  )
+
+  const allGroups = computed(() =>
+    (state.value.data?.pages ?? []).flatMap((page) => page.groups),
+  )
+
   const areDefaultFiltersApplied = computed(() => {
     return (
       severityFilter.value.length === 0 &&
@@ -67,64 +76,6 @@ export const useInventoryTimeline = defineQuery(() => {
     )
   })
 
-  // load table page size from storage
-  watch(
-    () => loginStore.userInfo?.email,
-    (email) => {
-      if (email) {
-        pageSize.value = loadPageSizeFromStorage(INVENTORY_TIMELINE_TABLE_ID)
-      }
-    },
-    { immediate: true },
-  )
-
-  // reset to first page when page size changes
-  watch(
-    () => pageSize.value,
-    () => {
-      pageNum.value = 1
-    },
-  )
-
-  // reset to first page when any filter changes
-  watch(
-    () => severityFilter.value,
-    () => {
-      pageNum.value = 1
-    },
-    { deep: true },
-  )
-
-  watch(
-    () => categoryFilter.value,
-    () => {
-      pageNum.value = 1
-    },
-    { deep: true },
-  )
-
-  watch(
-    () => diffTypeFilter.value,
-    () => {
-      pageNum.value = 1
-    },
-    { deep: true },
-  )
-
-  watch(
-    () => fromDate.value,
-    () => {
-      pageNum.value = 1
-    },
-  )
-
-  watch(
-    () => toDate.value,
-    () => {
-      pageNum.value = 1
-    },
-  )
-
   const resetFilters = () => {
     severityFilter.value = []
     categoryFilter.value = []
@@ -134,11 +85,10 @@ export const useInventoryTimeline = defineQuery(() => {
   }
 
   return {
-    ...rest,
     state,
     asyncStatus,
-    pageNum,
-    pageSize,
+    hasNextPage,
+    loadNextPage,
     severityFilter,
     categoryFilter,
     diffTypeFilter,
@@ -146,5 +96,7 @@ export const useInventoryTimeline = defineQuery(() => {
     toDate,
     areDefaultFiltersApplied,
     resetFilters,
+    allInventoryIds,
+    allGroups,
   }
 })

From 552cf4c5b4a86e5563e6ff7b00851f977abd680d Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Mon, 23 Mar 2026 16:36:28 +0100
Subject: [PATCH 21/31] Implement system changes timeline (wip)

---
 .../systems/SystemChangeHistoryPanel.vue      |  3 +-
 .../systems/SystemChangesTimeline.vue         | 67 +++++++++----------
 frontend/src/lib/systems/inventoryMocks.ts    | 35 +++++++++-
 .../src/queries/systems/inventoryChanges.ts   | 12 +++-
 .../src/queries/systems/inventoryDiffs.ts     | 18 ++++-
 .../src/queries/systems/inventoryTimeline.ts  | 40 ++++++++---
 6 files changed, 121 insertions(+), 54 deletions(-)

diff --git a/frontend/src/components/systems/SystemChangeHistoryPanel.vue b/frontend/src/components/systems/SystemChangeHistoryPanel.vue
index 65a1bd642..41162dae2 100644
--- a/frontend/src/components/systems/SystemChangeHistoryPanel.vue
+++ b/frontend/src/components/systems/SystemChangeHistoryPanel.vue
@@ -61,6 +61,5 @@ const { state: inventoryChanges, asyncStatus: inventoryChangesAsyncStatus } = us
     />
   </div>
   <!-- changes timeline -->
-  <!-- //// remove mock-mode -->
-  <SystemChangesTimeline mock-mode />
+  <SystemChangesTimeline />
 </template>
diff --git a/frontend/src/components/systems/SystemChangesTimeline.vue b/frontend/src/components/systems/SystemChangesTimeline.vue
index c97572fd1..452d7ca23 100644
--- a/frontend/src/components/systems/SystemChangesTimeline.vue
+++ b/frontend/src/components/systems/SystemChangesTimeline.vue
@@ -13,7 +13,11 @@ import {
   type InventoryDiffSeverity,
   type InventoryDiffType,
 } from '@/lib/systems/inventoryDiffs'
-import { mockInventoryDiffs, mockTimelineGroups } from '@/lib/systems/inventoryMocks'
+import {
+  INVENTORY_MOCK_ENABLED,
+  mockInventoryDiffs,
+  mockDiffsPagination,
+} from '@/lib/systems/inventoryMocks'
 import { formatDateTimeNoSeconds } from '@/lib/dateTime'
 import { canReadSystems } from '@/lib/permissions'
 import { useLoginStore } from '@/stores/login'
@@ -42,9 +46,6 @@ import {
   faArrowRight,
 } from '@fortawesome/free-solid-svg-icons'
 
-//// remove mock-mode
-const props = withDefaults(defineProps<{ mockMode?: boolean }>(), { mockMode: false })
-
 const { t, locale } = useI18n()
 const route = useRoute()
 const loginStore = useLoginStore()
@@ -87,13 +88,12 @@ const { state: diffsState, asyncStatus: diffsAsyncStatus } = useQuery({
     },
   ],
   enabled: () =>
-    !props.mockMode &&
     !!loginStore.jwtToken &&
     canReadSystems() &&
     !!route.params.systemId &&
     allInventoryIds.value.length > 0,
-  query: () =>
-    getInventoryDiffs(
+  query: () => {
+    const apiCall = getInventoryDiffs(
       route.params.systemId as string,
       1,
       500,
@@ -103,16 +103,18 @@ const { state: diffsState, asyncStatus: diffsAsyncStatus } = useQuery({
       allInventoryIds.value,
       fromDate.value,
       toDate.value,
-    ),
+    )
+    if (INVENTORY_MOCK_ENABLED) {
+      apiCall.catch(() => {})
+      return Promise.resolve({ diffs: mockInventoryDiffs, pagination: mockDiffsPagination })
+    }
+    return apiCall
+  },
 })
 
-// ── Mock mode overrides ───────────────────────────────────────────────────────
-const effectiveGroups = computed(() => (props.mockMode ? mockTimelineGroups : allGroups.value))
-
-// ── Auto-expand all groups when they load ────────────────────────────────────
+// ── Auto-expand all groups when they load ─────────────────────────────────────
 watch(
-  //// revert to allGroups.value when mockMode is removed
-  () => effectiveGroups.value,
+  () => allGroups.value,
   (groups) => {
     groups.forEach((g) => expandedGroups.value.add(g.date))
   },
@@ -183,7 +185,7 @@ interface DisplayGroup {
 const today = todayDateString()
 
 const displayGroups = computed<DisplayGroup[]>(() => {
-  const groups = effectiveGroups.value
+  const groups = allGroups.value
   const result: DisplayGroup[] = []
 
   // Always show Today as the first entry
@@ -218,31 +220,23 @@ const displayGroups = computed<DisplayGroup[]>(() => {
 })
 
 const isTimelineEmpty = computed(() => {
-  if (!props.mockMode && timelineState.value.status !== 'success') return false
-  return effectiveGroups.value.filter((g) => g.change_count > 0).length === 0
+  if (timelineState.value.status !== 'success') return false
+  return allGroups.value.filter((g) => g.change_count > 0).length === 0
 })
 
 // ── Diffs helpers ─────────────────────────────────────────────────────────────
-const allDiffs = computed<InventoryDiff[]>(() =>
-  props.mockMode ? mockInventoryDiffs : (diffsState.value.data?.diffs ?? []),
-)
+const allDiffs = computed<InventoryDiff[]>(() => diffsState.value.data?.diffs ?? [])
 
-const timelineIsPending = computed(
-  () => !props.mockMode && timelineState.value.status === 'pending',
-)
+const timelineIsPending = computed(() => timelineState.value.status === 'pending')
 const timelineError = computed(() =>
-  !props.mockMode && timelineState.value.status === 'error' ? timelineState.value.error : null,
+  timelineState.value.status === 'error' ? timelineState.value.error : null,
 )
 const diffsError = computed(() =>
-  !props.mockMode && diffsState.value.status === 'error' ? diffsState.value.error : null,
+  diffsState.value.status === 'error' ? diffsState.value.error : null,
 )
 const diffsIsLoading = computed(
-  () =>
-    !props.mockMode &&
-    (diffsState.value.status === 'pending' || diffsAsyncStatus.value === 'loading'),
+  () => diffsState.value.status === 'pending' || diffsAsyncStatus.value === 'loading',
 )
-const effectiveHasNextPage = computed(() => !props.mockMode && hasNextPage.value)
-
 function getDiffsForGroup(group: DisplayGroup): InventoryDiff[] {
   const idSet = new Set(group.inventory_ids)
   return allDiffs.value.filter((d) => idSet.has(d.inventory_id))
@@ -346,11 +340,11 @@ watch(loadMoreTrigger, (el) => {
   if (!el) return
   const observer = new IntersectionObserver(
     (entries) => {
-      if (entries[0]?.isIntersecting && hasNextPage.value) {
+      if (entries[0]?.isIntersecting) {
         loadNextPage()
       }
     },
-    { rootMargin: '200px', threshold: [0] },
+    { rootMargin: '300px', threshold: [0] },
   )
   observer.observe(el)
   onWatcherCleanup(() => observer.disconnect())
@@ -710,7 +704,7 @@ const diffTypeFilterModel = computed<string[]>({
       </div>
 
       <!-- Gap badge (days without changes between this group and the next) -->
-      <div v-if="group.gapDaysAfter > 0" class="mb-4 flex items-start">
+      <div v-if="group.gapDaysAfter > 0" class="my-8 flex items-start">
         <div class="w-36 flex-shrink-0"></div>
         <div class="flex-1 pl-10">
           <span
@@ -723,10 +717,13 @@ const diffTypeFilterModel = computed<string[]>({
     </div>
 
     <!-- Load more trigger (IntersectionObserver target) -->
-    <div v-if="effectiveHasNextPage" ref="loadMoreTrigger" class="flex items-start py-4">
+    <div v-if="hasNextPage" ref="loadMoreTrigger" class="flex items-start py-4">
       <div class="w-36 flex-shrink-0"></div>
       <div class="flex-1 pl-10">
-        <p class="text-sm text-gray-400 dark:text-gray-500">
+        <p
+          v-if="timelineAsyncStatus === 'loading'"
+          class="text-sm text-gray-400 dark:text-gray-500"
+        >
           {{ t('common.loading') }}
         </p>
       </div>
diff --git a/frontend/src/lib/systems/inventoryMocks.ts b/frontend/src/lib/systems/inventoryMocks.ts
index e48bf9367..04dc9ffd5 100644
--- a/frontend/src/lib/systems/inventoryMocks.ts
+++ b/frontend/src/lib/systems/inventoryMocks.ts
@@ -2,8 +2,8 @@
 //  SPDX-License-Identifier: GPL-3.0-or-later
 
 /**
- * Mock data for SystemChangesTimeline — pass mockMode prop to the component to
- * render with this data instead of live API calls.
+ * Mock data for inventory queries — the Pinia Colada queries fire the real API
+ * calls but resolve with this data instead of the actual server response.
  *
  * Timeline covers today (no changes) + ten historical groups spread across
  * four months, with notable gaps between them.  Diffs exercise every
@@ -12,9 +12,12 @@
  */
 
 import { type InventoryDiff } from './inventoryDiffs'
+import { type InventoryChanges } from './inventoryChanges'
 import { type InventoryTimelineGroup, type InventoryTimelineSummary } from './inventoryTimeline'
 import { type Pagination } from '@/lib/common'
 
+export const INVENTORY_MOCK_ENABLED = false
+
 // ── Reference date ────────────────────────────────────────────────────────────
 // The component always injects today's date dynamically, so these groups start
 // from 2026-03-22 (yesterday).
@@ -639,3 +642,31 @@ export const mockDiffsPagination: Pagination = {
   has_next: false,
   has_prev: false,
 }
+
+// ── Inventory changes summary ─────────────────────────────────────────────────
+export const mockInventoryChanges: InventoryChanges = {
+  system_id: 'sys-demo-001',
+  total_changes: 35,
+  recent_changes: 4,
+  last_inventory_time: '2026-03-22T11:05:19Z',
+  has_critical_changes: true,
+  has_alerts: true,
+  changes_by_category: {
+    os: 9,
+    security: 6,
+    network: 5,
+    hardware: 5,
+    modules: 3,
+    features: 2,
+    backup: 2,
+    cluster: 1,
+    nodes: 1,
+    system: 1,
+  },
+  changes_by_severity: {
+    critical: 6,
+    high: 8,
+    medium: 7,
+    low: 14,
+  },
+}
diff --git a/frontend/src/queries/systems/inventoryChanges.ts b/frontend/src/queries/systems/inventoryChanges.ts
index ad90c71bd..7c5b62092 100644
--- a/frontend/src/queries/systems/inventoryChanges.ts
+++ b/frontend/src/queries/systems/inventoryChanges.ts
@@ -1,8 +1,9 @@
 //  Copyright (C) 2026 Nethesis S.r.l.
 //  SPDX-License-Identifier: GPL-3.0-or-later
 
-import { canReadSystems } from '@/lib/permissions'
 import { getInventoryChanges, INVENTORY_CHANGES_KEY } from '@/lib/systems/inventoryChanges'
+import { INVENTORY_MOCK_ENABLED, mockInventoryChanges } from '@/lib/systems/inventoryMocks'
+import { canReadSystems } from '@/lib/permissions'
 import { useLoginStore } from '@/stores/login'
 import { defineQuery, useQuery } from '@pinia/colada'
 import { useRoute } from 'vue-router'
@@ -14,7 +15,14 @@ export const useInventoryChanges = defineQuery(() => {
   const { state, asyncStatus, ...rest } = useQuery({
     key: () => [INVENTORY_CHANGES_KEY, route.params.systemId],
     enabled: () => !!loginStore.jwtToken && canReadSystems() && !!route.params.systemId,
-    query: () => getInventoryChanges(route.params.systemId as string),
+    query: () => {
+      const apiCall = getInventoryChanges(route.params.systemId as string)
+      if (INVENTORY_MOCK_ENABLED) {
+        apiCall.catch(() => {})
+        return Promise.resolve(mockInventoryChanges)
+      }
+      return apiCall
+    },
   })
 
   return {
diff --git a/frontend/src/queries/systems/inventoryDiffs.ts b/frontend/src/queries/systems/inventoryDiffs.ts
index baca07e1b..8c45b9924 100644
--- a/frontend/src/queries/systems/inventoryDiffs.ts
+++ b/frontend/src/queries/systems/inventoryDiffs.ts
@@ -9,6 +9,11 @@ import {
   type InventoryDiffSeverity,
   type InventoryDiffType,
 } from '@/lib/systems/inventoryDiffs'
+import {
+  INVENTORY_MOCK_ENABLED,
+  mockInventoryDiffs,
+  mockDiffsPagination,
+} from '@/lib/systems/inventoryMocks'
 import { canReadSystems } from '@/lib/permissions'
 import { DEFAULT_PAGE_SIZE, loadPageSizeFromStorage } from '@/lib/tablePageSize'
 import { useLoginStore } from '@/stores/login'
@@ -16,6 +21,7 @@ import { defineQuery, useQuery } from '@pinia/colada'
 import { computed, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 
+//// currently unused?
 export const useInventoryDiffs = defineQuery(() => {
   const loginStore = useLoginStore()
   const route = useRoute()
@@ -44,8 +50,8 @@ export const useInventoryDiffs = defineQuery(() => {
       },
     ],
     enabled: () => !!loginStore.jwtToken && canReadSystems() && !!route.params.systemId,
-    query: () =>
-      getInventoryDiffs(
+    query: () => {
+      const apiCall = getInventoryDiffs(
         route.params.systemId as string,
         pageNum.value,
         pageSize.value,
@@ -55,7 +61,13 @@ export const useInventoryDiffs = defineQuery(() => {
         inventoryIdFilter.value,
         fromDate.value,
         toDate.value,
-      ),
+      )
+      if (INVENTORY_MOCK_ENABLED) {
+        apiCall.catch(() => {})
+        return Promise.resolve({ diffs: mockInventoryDiffs, pagination: mockDiffsPagination })
+      }
+      return apiCall
+    },
   })
 
   const areDefaultFiltersApplied = computed(() => {
diff --git a/frontend/src/queries/systems/inventoryTimeline.ts b/frontend/src/queries/systems/inventoryTimeline.ts
index 0590251c8..c9942e973 100644
--- a/frontend/src/queries/systems/inventoryTimeline.ts
+++ b/frontend/src/queries/systems/inventoryTimeline.ts
@@ -6,17 +6,19 @@ import {
   type InventoryDiffSeverity,
   type InventoryDiffType,
 } from '@/lib/systems/inventoryDiffs'
+import { INVENTORY_TIMELINE_KEY, getInventoryTimeline } from '@/lib/systems/inventoryTimeline'
 import {
-  INVENTORY_TIMELINE_KEY,
-  getInventoryTimeline,
-} from '@/lib/systems/inventoryTimeline'
+  INVENTORY_MOCK_ENABLED,
+  mockTimelineSummary,
+  mockTimelineGroups,
+} from '@/lib/systems/inventoryMocks'
 import { canReadSystems } from '@/lib/permissions'
 import { useLoginStore } from '@/stores/login'
 import { defineQuery, useInfiniteQuery } from '@pinia/colada'
 import { computed, ref } from 'vue'
 import { useRoute } from 'vue-router'
 
-const TIMELINE_PAGE_SIZE = 10
+const TIMELINE_PAGE_SIZE = 5 //// 20
 
 export const useInventoryTimeline = defineQuery(() => {
   const loginStore = useLoginStore()
@@ -41,8 +43,8 @@ export const useInventoryTimeline = defineQuery(() => {
     ],
     enabled: () => !!loginStore.jwtToken && canReadSystems() && !!route.params.systemId,
     initialPageParam: 1,
-    query: ({ pageParam }) =>
-      getInventoryTimeline(
+    query: ({ pageParam }) => {
+      const apiCall = getInventoryTimeline(
         route.params.systemId as string,
         pageParam,
         TIMELINE_PAGE_SIZE,
@@ -51,7 +53,27 @@ export const useInventoryTimeline = defineQuery(() => {
         diffTypeFilter.value,
         fromDate.value,
         toDate.value,
-      ),
+      )
+      if (INVENTORY_MOCK_ENABLED) {
+        apiCall.catch(() => {})
+        const start = (pageParam - 1) * TIMELINE_PAGE_SIZE
+        const pagedGroups = mockTimelineGroups.slice(start, start + TIMELINE_PAGE_SIZE)
+        const totalPages = Math.ceil(mockTimelineGroups.length / TIMELINE_PAGE_SIZE)
+        return Promise.resolve({
+          summary: mockTimelineSummary,
+          groups: pagedGroups,
+          pagination: {
+            page: pageParam,
+            page_size: TIMELINE_PAGE_SIZE,
+            total_count: mockTimelineGroups.length,
+            total_pages: totalPages,
+            has_next: pageParam < totalPages,
+            has_prev: pageParam > 1,
+          },
+        })
+      }
+      return apiCall
+    },
     getNextPageParam: (lastPage) =>
       lastPage.pagination.has_next ? lastPage.pagination.page + 1 : null,
   })
@@ -62,9 +84,7 @@ export const useInventoryTimeline = defineQuery(() => {
     ),
   )
 
-  const allGroups = computed(() =>
-    (state.value.data?.pages ?? []).flatMap((page) => page.groups),
-  )
+  const allGroups = computed(() => (state.value.data?.pages ?? []).flatMap((page) => page.groups))
 
   const areDefaultFiltersApplied = computed(() => {
     return (

From 493cbcf1b96cccab70b56b3a37306e6e4866ca87 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Tue, 24 Mar 2026 09:58:37 +0100
Subject: [PATCH 22/31] Implement system changes timeline (wip)

---
 .../systems/SystemChangesTimeline.vue         | 150 ++++++++++++------
 1 file changed, 103 insertions(+), 47 deletions(-)

diff --git a/frontend/src/components/systems/SystemChangesTimeline.vue b/frontend/src/components/systems/SystemChangesTimeline.vue
index 452d7ca23..941a9836c 100644
--- a/frontend/src/components/systems/SystemChangesTimeline.vue
+++ b/frontend/src/components/systems/SystemChangesTimeline.vue
@@ -33,6 +33,7 @@ import {
   NeSkeleton,
   NeTextInput,
   type FilterOption,
+  NeSpinner,
 } from '@nethesis/vue-components'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import {
@@ -187,31 +188,51 @@ const today = todayDateString()
 const displayGroups = computed<DisplayGroup[]>(() => {
   const groups = allGroups.value
   const result: DisplayGroup[] = []
+  const search = textFilter.value.trim().toLowerCase()
 
-  // Always show Today as the first entry
   const todayGroup = groups.find((g) => g.date === today)
-  const firstRealGroup = todayGroup ? groups[1] : groups[0]
-
-  const gapAfterToday = firstRealGroup ? gapDaysBetween(today, firstRealGroup.date, !todayGroup) : 0
+  const otherGroups = todayGroup ? groups.slice(1) : groups
 
-  result.push({
-    date: today,
-    isToday: true,
-    change_count: todayGroup?.change_count ?? 0,
-    inventory_ids: todayGroup?.inventory_ids ?? [],
-    gapDaysAfter: gapAfterToday > 0 ? gapAfterToday : 0,
+  // Build a flat ordered list: today first, then everything else
+  const allOrderedEntries = [
+    {
+      date: today,
+      isToday: true,
+      change_count: todayGroup?.change_count ?? 0,
+      inventory_ids: todayGroup?.inventory_ids ?? [],
+    },
+    ...otherGroups.map((g) => ({
+      date: g.date,
+      isToday: false,
+      change_count: g.change_count,
+      inventory_ids: g.inventory_ids,
+    })),
+  ]
+
+  // Skip non-today groups with change_count === 0 (e.g. when a filter hides all
+  // their diffs). Their date range gets absorbed into the gap of the preceding
+  // visible entry, so only a single badge is shown between two real changes.
+  // When a text filter is active and diffs are loaded, also skip groups whose
+  // diffs are all filtered out by the text search.
+  const visibleEntries = allOrderedEntries.filter((e) => {
+    if (e.isToday) return true
+    if (e.change_count === 0) return false
+    if (search && diffsHaveEverLoaded.value) {
+      const idSet = new Set(e.inventory_ids)
+      return allDiffs.value.some(
+        (d) => idSet.has(d.inventory_id) && d.field_path.toLowerCase().includes(search),
+      )
+    }
+    return true
   })
 
-  // Add the remaining groups (skip today's group if it was in allGroups)
-  const otherGroups = todayGroup ? groups.slice(1) : groups
-  otherGroups.forEach((group, idx) => {
-    const nextGroup = otherGroups[idx + 1]
-    const gapAfter = nextGroup ? gapDaysBetween(group.date, nextGroup.date, false) : 0
+  visibleEntries.forEach((entry, idx) => {
+    const nextEntry = visibleEntries[idx + 1]
+    // newerIsToday=true means "today itself is a gap day" (no inventory collected today)
+    const newerIsToday = entry.isToday && entry.change_count === 0
+    const gapAfter = nextEntry ? gapDaysBetween(entry.date, nextEntry.date, newerIsToday) : 0
     result.push({
-      date: group.date,
-      isToday: false,
-      change_count: group.change_count,
-      inventory_ids: group.inventory_ids,
+      ...entry,
       gapDaysAfter: gapAfter > 0 ? gapAfter : 0,
     })
   })
@@ -225,9 +246,30 @@ const isTimelineEmpty = computed(() => {
 })
 
 // ── Diffs helpers ─────────────────────────────────────────────────────────────
-const allDiffs = computed<InventoryDiff[]>(() => diffsState.value.data?.diffs ?? [])
 
-const timelineIsPending = computed(() => timelineState.value.status === 'pending')
+// Stable snapshot of diffs from the last completed fetch — never clears during refetch
+// so existing groups keep showing their diffs while a new page is loading.
+const stableDiffs = ref<InventoryDiff[]>([])
+const lastFetchedInventoryIds = ref<Set<number>>(new Set())
+const diffsHaveEverLoaded = ref(false)
+
+watch(
+  () => diffsState.value.data,
+  (data) => {
+    if (data !== undefined) {
+      stableDiffs.value = data.diffs
+      lastFetchedInventoryIds.value = new Set(allInventoryIds.value)
+      diffsHaveEverLoaded.value = true
+    }
+  },
+)
+
+// allDiffs always returns stable data — never empty during a refetch
+const allDiffs = computed<InventoryDiff[]>(() => stableDiffs.value)
+
+const timelineIsPending = computed(
+  () => timelineState.value.status === 'pending' || diffsIsLoading.value,
+)
 const timelineError = computed(() =>
   timelineState.value.status === 'error' ? timelineState.value.error : null,
 )
@@ -235,13 +277,25 @@ const diffsError = computed(() =>
   diffsState.value.status === 'error' ? diffsState.value.error : null,
 )
 const diffsIsLoading = computed(
-  () => diffsState.value.status === 'pending' || diffsAsyncStatus.value === 'loading',
+  () => !diffsHaveEverLoaded.value && diffsState.value.status === 'pending',
+)
+// True while allInventoryIds has IDs not yet covered by the last completed diffs fetch
+const diffsIsRefetching = computed(
+  () =>
+    diffsHaveEverLoaded.value &&
+    allInventoryIds.value.some((id) => !lastFetchedInventoryIds.value.has(id)),
 )
 function getDiffsForGroup(group: DisplayGroup): InventoryDiff[] {
   const idSet = new Set(group.inventory_ids)
   return allDiffs.value.filter((d) => idSet.has(d.inventory_id))
 }
 
+// Returns true when this group's diffs haven't been fetched yet (new page, still loading)
+function isGroupPendingDiffs(group: DisplayGroup): boolean {
+  if (!diffsIsRefetching.value) return false
+  return group.inventory_ids.some((id) => !lastFetchedInventoryIds.value.has(id))
+}
+
 function formatDiffValue(value: unknown): string {
   if (value === null || value === undefined) return '—'
   if (typeof value === 'object') return JSON.stringify(value)
@@ -467,6 +521,12 @@ const diffTypeFilterModel = computed<string[]>({
     class="mb-6"
   />
 
+  <!-- ////  -->
+  <!-- <div>timelineState.status {{ timelineState.status }}</div>
+  <div>timelineAsyncStatus {{ timelineAsyncStatus }}</div>
+  <div>diffsState.status {{ diffsState.status }}</div>
+  <div>diffsAsyncStatus {{ diffsAsyncStatus }}</div> -->
+
   <!-- Loading skeleton (initial load) -->
   <div v-if="timelineIsPending" class="space-y-6">
     <div v-for="i in 3" :key="i" class="flex gap-12">
@@ -512,7 +572,7 @@ const diffTypeFilterModel = computed<string[]>({
 
     <div v-for="group in displayGroups" :key="group.date">
       <!-- Date header row -->
-      <div class="relative mb-2 flex items-start">
+      <div v-if="!isGroupPendingDiffs(group)" class="relative mb-2 flex items-start">
         <!-- Date label column (right-aligned) -->
         <div class="w-36 flex-shrink-0 pt-0.5 pr-6 text-right">
           <span
@@ -565,7 +625,7 @@ const diffTypeFilterModel = computed<string[]>({
             </button>
 
             <!-- Diffs list -->
-            <div v-if="expandedGroups.has(group.date)" class="mt-3 space-y-3">
+            <div v-if="expandedGroups.has(group.date)" class="mt-4 space-y-4">
               <!-- Loading diffs state -->
               <template v-if="diffsIsLoading">
                 <NeSkeleton v-for="j in group.change_count" :key="j" class="h-14 w-full" />
@@ -629,11 +689,8 @@ const diffTypeFilterModel = computed<string[]>({
                       v-if="diff.diff_type === 'update'"
                       class="flex items-center gap-4 rounded-sm bg-blue-50 px-1.5 py-0.5 dark:bg-blue-950"
                     >
-                      <FontAwesomeIcon
-                        :icon="faPen"
-                        class="size-3 shrink-0 text-blue-700 dark:text-blue-400"
-                      />
-                      <span class="font-mono text-sm text-gray-700 line-through dark:text-gray-300">
+                      <FontAwesomeIcon :icon="faPen" class="size-3 shrink-0" />
+                      <span class="font-mono text-sm text-gray-700 dark:text-gray-300">
                         {{ formatDiffValue(diff.previous_value) }}
                       </span>
                       <FontAwesomeIcon
@@ -654,10 +711,7 @@ const diffTypeFilterModel = computed<string[]>({
                         :key="idx"
                         class="flex items-center gap-4"
                       >
-                        <FontAwesomeIcon
-                          :icon="faPlus"
-                          class="size-3 shrink-0 text-green-600 dark:text-green-400"
-                        />
+                        <FontAwesomeIcon :icon="faPlus" class="size-3 shrink-0" />
                         <span class="font-mono text-sm text-gray-700 dark:text-gray-300">{{
                           line
                         }}</span>
@@ -673,14 +727,10 @@ const diffTypeFilterModel = computed<string[]>({
                         :key="idx"
                         class="flex items-center gap-4"
                       >
-                        <FontAwesomeIcon
-                          :icon="faMinus"
-                          class="size-3 shrink-0 text-rose-700 dark:text-rose-400"
-                        />
-                        <span
-                          class="font-mono text-sm text-gray-700 line-through dark:text-gray-300"
-                          >{{ line }}</span
-                        >
+                        <FontAwesomeIcon :icon="faMinus" class="size-3 shrink-0" />
+                        <span class="font-mono text-sm text-gray-700 dark:text-gray-300">{{
+                          line
+                        }}</span>
                       </div>
                     </div>
                     <!-- Timestamp -->
@@ -704,7 +754,10 @@ const diffTypeFilterModel = computed<string[]>({
       </div>
 
       <!-- Gap badge (days without changes between this group and the next) -->
-      <div v-if="group.gapDaysAfter > 0" class="my-8 flex items-start">
+      <div
+        v-if="group.gapDaysAfter > 0 && !isGroupPendingDiffs(group)"
+        class="my-8 flex items-start"
+      >
         <div class="w-36 flex-shrink-0"></div>
         <div class="flex-1 pl-10">
           <span
@@ -720,12 +773,15 @@ const diffTypeFilterModel = computed<string[]>({
     <div v-if="hasNextPage" ref="loadMoreTrigger" class="flex items-start py-4">
       <div class="w-36 flex-shrink-0"></div>
       <div class="flex-1 pl-10">
-        <p
-          v-if="timelineAsyncStatus === 'loading'"
-          class="text-sm text-gray-400 dark:text-gray-500"
+        <div
+          v-if="timelineAsyncStatus === 'loading' || diffsAsyncStatus === 'loading'"
+          class="flex items-center gap-2"
         >
-          {{ t('common.loading') }}
-        </p>
+          <NeSpinner color="white" />
+          <div class="text-gray-500 dark:text-gray-400">
+            {{ t('common.loading') }}
+          </div>
+        </div>
       </div>
     </div>
   </div>

From ab756f733cee8f3ca8ad0669670733483ae88e67 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Tue, 24 Mar 2026 12:00:46 +0100
Subject: [PATCH 23/31] Implement system changes timeline (wip)

---
 .../systems/SystemChangesTimeline.vue         | 41 ++++++++++++++++---
 1 file changed, 35 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/systems/SystemChangesTimeline.vue b/frontend/src/components/systems/SystemChangesTimeline.vue
index 941a9836c..2b62487e9 100644
--- a/frontend/src/components/systems/SystemChangesTimeline.vue
+++ b/frontend/src/components/systems/SystemChangesTimeline.vue
@@ -62,7 +62,7 @@ const {
   diffTypeFilter,
   fromDate,
   toDate,
-  areDefaultFiltersApplied,
+  areDefaultFiltersApplied: areTimelineDefaultFiltersApplied,
   resetFilters: resetTimelineFilters,
   allInventoryIds,
   allGroups,
@@ -97,7 +97,7 @@ const { state: diffsState, asyncStatus: diffsAsyncStatus } = useQuery({
     const apiCall = getInventoryDiffs(
       route.params.systemId as string,
       1,
-      500,
+      100,
       severityFilter.value,
       categoryFilter.value,
       diffTypeFilter.value,
@@ -215,7 +215,18 @@ const displayGroups = computed<DisplayGroup[]>(() => {
   // When a text filter is active and diffs are loaded, also skip groups whose
   // diffs are all filtered out by the text search.
   const visibleEntries = allOrderedEntries.filter((e) => {
-    if (e.isToday) return true
+    if (e.isToday) {
+      // Always show today when it has no changes ("no changes today" label)
+      if (e.change_count === 0) return true
+      // When text filter is active and diffs are loaded, hide today if nothing matches
+      if (search && diffsHaveEverLoaded.value) {
+        const idSet = new Set(e.inventory_ids)
+        return allDiffs.value.some(
+          (d) => idSet.has(d.inventory_id) && d.field_path.toLowerCase().includes(search),
+        )
+      }
+      return true
+    }
     if (e.change_count === 0) return false
     if (search && diffsHaveEverLoaded.value) {
       const idSet = new Set(e.inventory_ids)
@@ -242,9 +253,19 @@ const displayGroups = computed<DisplayGroup[]>(() => {
 
 const isTimelineEmpty = computed(() => {
   if (timelineState.value.status !== 'success') return false
-  return allGroups.value.filter((g) => g.change_count > 0).length === 0
+  if (allGroups.value.filter((g) => g.change_count > 0).length === 0) return true
+  // Text filter is client-side: treat as empty when active, diffs loaded, and nothing matches
+  const search = textFilter.value.trim().toLowerCase()
+  if (search && diffsHaveEverLoaded.value) {
+    return !allDiffs.value.some((d) => d.field_path.toLowerCase().includes(search))
+  }
+  return false
 })
 
+const areDefaultFiltersApplied = computed(
+  () => areTimelineDefaultFiltersApplied.value && !textFilter.value.trim(),
+)
+
 // ── Diffs helpers ─────────────────────────────────────────────────────────────
 
 // Stable snapshot of diffs from the last completed fetch — never clears during refetch
@@ -318,6 +339,14 @@ function getFilteredDiffsForGroup(group: DisplayGroup): InventoryDiff[] {
   return diffs.filter((d) => d.field_path.toLowerCase().includes(search))
 }
 
+// ── Filtered change count (respects text search) ────────────────────────────
+function getDisplayCountForGroup(group: DisplayGroup): number {
+  if (textFilter.value.trim() && diffsHaveEverLoaded.value) {
+    return getFilteredDiffsForGroup(group).length
+  }
+  return group.change_count
+}
+
 // ── Group expand/collapse ─────────────────────────────────────────────────────
 function toggleGroup(date: string) {
   if (expandedGroups.value.has(date)) {
@@ -617,9 +646,9 @@ const diffTypeFilterModel = computed<string[]>({
               />
               <span>
                 {{
-                  group.change_count === 1
+                  getDisplayCountForGroup(group) === 1
                     ? t('system_detail.one_change')
-                    : t('system_detail.n_changes', { n: group.change_count })
+                    : t('system_detail.n_changes', { n: getDisplayCountForGroup(group) })
                 }}
               </span>
             </button>

From 14c82e39fd757ba01eb23d9b30e34853300f1dac Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Tue, 24 Mar 2026 14:51:50 +0100
Subject: [PATCH 24/31] Remove inventory mock

---
 .../systems/SystemChangesTimeline.vue         |   9 -
 frontend/src/lib/systems/inventoryMocks.ts    | 672 ------------------
 .../src/queries/systems/inventoryChanges.ts   |   5 -
 .../src/queries/systems/inventoryDiffs.ts     |   9 -
 .../src/queries/systems/inventoryTimeline.ts  |  25 +-
 5 files changed, 1 insertion(+), 719 deletions(-)
 delete mode 100644 frontend/src/lib/systems/inventoryMocks.ts

diff --git a/frontend/src/components/systems/SystemChangesTimeline.vue b/frontend/src/components/systems/SystemChangesTimeline.vue
index 2b62487e9..4629c4f60 100644
--- a/frontend/src/components/systems/SystemChangesTimeline.vue
+++ b/frontend/src/components/systems/SystemChangesTimeline.vue
@@ -13,11 +13,6 @@ import {
   type InventoryDiffSeverity,
   type InventoryDiffType,
 } from '@/lib/systems/inventoryDiffs'
-import {
-  INVENTORY_MOCK_ENABLED,
-  mockInventoryDiffs,
-  mockDiffsPagination,
-} from '@/lib/systems/inventoryMocks'
 import { formatDateTimeNoSeconds } from '@/lib/dateTime'
 import { canReadSystems } from '@/lib/permissions'
 import { useLoginStore } from '@/stores/login'
@@ -105,10 +100,6 @@ const { state: diffsState, asyncStatus: diffsAsyncStatus } = useQuery({
       fromDate.value,
       toDate.value,
     )
-    if (INVENTORY_MOCK_ENABLED) {
-      apiCall.catch(() => {})
-      return Promise.resolve({ diffs: mockInventoryDiffs, pagination: mockDiffsPagination })
-    }
     return apiCall
   },
 })
diff --git a/frontend/src/lib/systems/inventoryMocks.ts b/frontend/src/lib/systems/inventoryMocks.ts
deleted file mode 100644
index 04dc9ffd5..000000000
--- a/frontend/src/lib/systems/inventoryMocks.ts
+++ /dev/null
@@ -1,672 +0,0 @@
-//  Copyright (C) 2026 Nethesis S.r.l.
-//  SPDX-License-Identifier: GPL-3.0-or-later
-
-/**
- * Mock data for inventory queries — the Pinia Colada queries fire the real API
- * calls but resolve with this data instead of the actual server response.
- *
- * Timeline covers today (no changes) + ten historical groups spread across
- * four months, with notable gaps between them.  Diffs exercise every
- * combination of diff_type × severity × category and include scalar, boolean,
- * object, array, empty-string, and null values.
- */
-
-import { type InventoryDiff } from './inventoryDiffs'
-import { type InventoryChanges } from './inventoryChanges'
-import { type InventoryTimelineGroup, type InventoryTimelineSummary } from './inventoryTimeline'
-import { type Pagination } from '@/lib/common'
-
-export const INVENTORY_MOCK_ENABLED = false
-
-// ── Reference date ────────────────────────────────────────────────────────────
-// The component always injects today's date dynamically, so these groups start
-// from 2026-03-22 (yesterday).
-
-// ── Timeline summary ──────────────────────────────────────────────────────────
-export const mockTimelineSummary: InventoryTimelineSummary = {
-  total: 35,
-  critical: 6,
-  high: 8,
-  medium: 7,
-  low: 14,
-}
-
-// ── Timeline groups ───────────────────────────────────────────────────────────
-// Layout (newest → oldest):
-//
-//  2026-03-22  yesterday      3 changes   inventory_ids: 101–103
-//  2026-03-21  2 days ago     1 change    inventory_ids: 104
-//  2026-03-18  5 days ago     5 changes   inventory_ids: 105–109   (gap: 2 days)
-//  2026-03-13  10 days ago    2 changes   inventory_ids: 110–111   (gap: 4 days)
-//  2026-03-01  22 days ago    4 changes   inventory_ids: 112–115   (gap: 11 days)
-//  2026-02-15  36 days ago    4 changes   inventory_ids: 116–119   (gap: 14 days)
-//  2026-02-01  50 days ago    3 changes   inventory_ids: 120–122   (gap: 14 days)
-//  2026-01-18  64 days ago    5 changes   inventory_ids: 123–127   (gap: 14 days)
-//  2026-01-05  77 days ago    2 changes   inventory_ids: 128–129   (gap: 13 days)
-//  2025-12-22  91 days ago    6 changes   inventory_ids: 130–135   (gap: 14 days)
-export const mockTimelineGroups: InventoryTimelineGroup[] = [
-  {
-    date: '2026-03-22',
-    inventory_count: 3,
-    change_count: 3,
-    inventory_ids: [101, 102, 103],
-  },
-  {
-    date: '2026-03-21',
-    inventory_count: 1,
-    change_count: 1,
-    inventory_ids: [104],
-  },
-  {
-    date: '2026-03-18',
-    inventory_count: 5,
-    change_count: 5,
-    inventory_ids: [105, 106, 107, 108, 109],
-  },
-  {
-    date: '2026-03-13',
-    inventory_count: 2,
-    change_count: 2,
-    inventory_ids: [110, 111],
-  },
-  {
-    date: '2026-03-01',
-    inventory_count: 4,
-    change_count: 4,
-    inventory_ids: [112, 113, 114, 115],
-  },
-  {
-    date: '2026-02-15',
-    inventory_count: 4,
-    change_count: 4,
-    inventory_ids: [116, 117, 118, 119],
-  },
-  {
-    date: '2026-02-01',
-    inventory_count: 3,
-    change_count: 3,
-    inventory_ids: [120, 121, 122],
-  },
-  {
-    date: '2026-01-18',
-    inventory_count: 5,
-    change_count: 5,
-    inventory_ids: [123, 124, 125, 126, 127],
-  },
-  {
-    date: '2026-01-05',
-    inventory_count: 2,
-    change_count: 2,
-    inventory_ids: [128, 129],
-  },
-  {
-    date: '2025-12-22',
-    inventory_count: 6,
-    change_count: 6,
-    inventory_ids: [130, 131, 132, 133, 134, 135],
-  },
-]
-
-export const mockTimelinePagination: Pagination = {
-  page: 1,
-  page_size: 10,
-  total_count: 10,
-  total_pages: 1,
-  has_next: false,
-  has_prev: false,
-}
-
-// ── Inventory diffs ───────────────────────────────────────────────────────────
-// 15 diffs covering every diff_type × severity combination and all 10 categories.
-
-export const mockInventoryDiffs: InventoryDiff[] = [
-  // ── 2026-03-22 (inventory_ids 101–103) ──────────────────────────────────────
-  {
-    id: 1,
-    system_id: 'sys-demo-001',
-    previous_inventory_id: 100,
-    inventory_id: 101,
-    diff_type: 'update',
-    category: 'os',
-    field_path: 'os.kernel_version',
-    previous_value: '5.15.0-89-generic',
-    current_value: '5.15.0-91-generic',
-    severity: 'low',
-    notification_sent: false,
-    created_at: '2026-03-22T08:14:02Z',
-  },
-  {
-    id: 2,
-    system_id: 'sys-demo-001',
-    previous_inventory_id: 100,
-    inventory_id: 102,
-    diff_type: 'create',
-    category: 'security',
-    field_path: 'security.firewall_rules[12]',
-    previous_value: null,
-    current_value: { port: 22, protocol: 'tcp', action: 'ACCEPT', source: '10.0.0.0/8' },
-    severity: 'critical',
-    notification_sent: true,
-    created_at: '2026-03-22T09:31:45Z',
-  },
-  {
-    id: 3,
-    system_id: 'sys-demo-001',
-    previous_inventory_id: 100,
-    inventory_id: 103,
-    diff_type: 'delete',
-    category: 'network',
-    field_path: 'network.interfaces.eth1',
-    previous_value: { ip: '192.168.1.50', netmask: '255.255.255.0', mtu: 1500 },
-    current_value: null,
-    severity: 'medium',
-    notification_sent: false,
-    created_at: '2026-03-22T11:05:19Z',
-  },
-
-  // ── 2026-03-21 (inventory_id 104) ───────────────────────────────────────────
-  {
-    id: 4,
-    system_id: 'sys-demo-001',
-    previous_inventory_id: 103,
-    inventory_id: 104,
-    diff_type: 'update',
-    category: 'hardware',
-    field_path: 'hardware.cpu.cores',
-    previous_value: 4,
-    current_value: 8,
-    severity: 'high',
-    notification_sent: true,
-    created_at: '2026-03-21T14:22:00Z',
-  },
-
-  // ── 2026-03-18 (inventory_ids 105–109) ──────────────────────────────────────
-  {
-    id: 5,
-    system_id: 'sys-demo-001',
-    previous_inventory_id: 104,
-    inventory_id: 105,
-    diff_type: 'create',
-    category: 'modules',
-    field_path: 'modules[7]',
-    previous_value: null,
-    current_value: { name: 'nethserver-fail2ban', version: '1.2.3', active: true },
-    severity: 'low',
-    notification_sent: false,
-    created_at: '2026-03-18T06:00:01Z',
-  },
-  {
-    id: 6,
-    system_id: 'sys-demo-001',
-    previous_inventory_id: 104,
-    inventory_id: 106,
-    diff_type: 'update',
-    category: 'os',
-    field_path: 'os.version',
-    previous_value: 'NethServer 7.9.2009',
-    current_value: 'NethServer 8.1',
-    severity: 'high',
-    notification_sent: true,
-    created_at: '2026-03-18T06:05:33Z',
-  },
-  {
-    id: 7,
-    system_id: 'sys-demo-001',
-    previous_inventory_id: 104,
-    inventory_id: 107,
-    diff_type: 'delete',
-    category: 'backup',
-    field_path: 'backup.jobs.nightly_db',
-    previous_value: { schedule: '0 2 * * *', destination: '/mnt/nas/backup', retention: 7 },
-    current_value: null,
-    severity: 'critical',
-    notification_sent: true,
-    created_at: '2026-03-18T06:10:11Z',
-  },
-  {
-    id: 8,
-    system_id: 'sys-demo-001',
-    previous_inventory_id: 104,
-    inventory_id: 108,
-    diff_type: 'create',
-    category: 'cluster',
-    field_path: 'cluster.nodes[2]',
-    previous_value: null,
-    current_value: { name: 'node3', role: 'worker', ip: '10.0.0.3', joined_at: '2026-03-18' },
-    severity: 'medium',
-    notification_sent: false,
-    created_at: '2026-03-18T07:45:55Z',
-  },
-  {
-    id: 9,
-    system_id: 'sys-demo-001',
-    previous_inventory_id: 104,
-    inventory_id: 109,
-    diff_type: 'update',
-    category: 'features',
-    field_path: 'features.mail.enabled',
-    previous_value: false,
-    current_value: true,
-    severity: 'low',
-    notification_sent: false,
-    created_at: '2026-03-18T09:12:40Z',
-  },
-
-  // ── 2026-03-13 (inventory_ids 110–111) ──────────────────────────────────────
-  {
-    id: 10,
-    system_id: 'sys-demo-001',
-    previous_inventory_id: 109,
-    inventory_id: 110,
-    diff_type: 'update',
-    category: 'system',
-    field_path: 'system.hostname',
-    previous_value: 'server01.example.com',
-    current_value: 'firewall.acme.corp',
-    severity: 'medium',
-    notification_sent: false,
-    created_at: '2026-03-13T16:03:27Z',
-  },
-  {
-    id: 11,
-    system_id: 'sys-demo-001',
-    previous_inventory_id: 109,
-    inventory_id: 111,
-    diff_type: 'delete',
-    category: 'nodes',
-    field_path: 'nodes[1]',
-    previous_value: { name: 'worker-2', status: 'active', cpu_cores: 8, ram_gb: 32 },
-    current_value: null,
-    severity: 'high',
-    notification_sent: true,
-    created_at: '2026-03-13T17:55:09Z',
-  },
-
-  // ── 2026-03-01 (inventory_ids 112–115) ──────────────────────────────────────
-  {
-    id: 12,
-    system_id: 'sys-demo-001',
-    previous_inventory_id: 111,
-    inventory_id: 112,
-    diff_type: 'create',
-    category: 'network',
-    field_path: 'network.bonding.bond0',
-    previous_value: null,
-    current_value: { mode: 'active-backup', slaves: ['eth0', 'eth1'], mtu: 9000 },
-    severity: 'low',
-    notification_sent: false,
-    created_at: '2026-03-01T02:00:00Z',
-  },
-  {
-    id: 13,
-    system_id: 'sys-demo-001',
-    previous_inventory_id: 111,
-    inventory_id: 113,
-    diff_type: 'update',
-    category: 'os',
-    field_path: 'os.packages_update_count',
-    previous_value: 0,
-    current_value: 42,
-    severity: 'high',
-    notification_sent: true,
-    created_at: '2026-03-01T02:05:14Z',
-  },
-  {
-    id: 14,
-    system_id: 'sys-demo-001',
-    previous_inventory_id: 111,
-    inventory_id: 114,
-    diff_type: 'update',
-    category: 'security',
-    field_path: 'security.certificates.web.expiry_days',
-    previous_value: 90,
-    current_value: 7,
-    severity: 'critical',
-    notification_sent: true,
-    created_at: '2026-03-01T02:10:30Z',
-  },
-  {
-    id: 15,
-    system_id: 'sys-demo-001',
-    previous_inventory_id: 111,
-    inventory_id: 115,
-    diff_type: 'create',
-    category: 'features',
-    field_path: 'features.vpn.wireguard',
-    previous_value: null,
-    current_value: { enabled: true, port: 51820, peers: 3 },
-    severity: 'low',
-    notification_sent: false,
-    created_at: '2026-03-01T03:30:00Z',
-  },
-
-  // ── 2026-02-15 (inventory_ids 116–119) ──────────────────────────────────────
-  {
-    id: 16,
-    system_id: 'sys-demo-001',
-    previous_inventory_id: 115,
-    inventory_id: 116,
-    diff_type: 'create',
-    category: 'os',
-    field_path: 'os.swap_enabled',
-    previous_value: null,
-    current_value: false,
-    severity: 'low',
-    notification_sent: false,
-    created_at: '2026-02-15T03:10:00Z',
-  },
-  {
-    id: 17,
-    system_id: 'sys-demo-001',
-    previous_inventory_id: 115,
-    inventory_id: 117,
-    diff_type: 'update',
-    category: 'network',
-    field_path: 'network.dns_servers',
-    previous_value: ['1.1.1.1'],
-    current_value: ['8.8.8.8', '8.8.4.4', '1.1.1.1'],
-    severity: 'medium',
-    notification_sent: false,
-    created_at: '2026-02-15T03:15:22Z',
-  },
-  {
-    id: 18,
-    system_id: 'sys-demo-001',
-    previous_inventory_id: 115,
-    inventory_id: 118,
-    diff_type: 'delete',
-    category: 'security',
-    field_path: 'security.users.admin.authorized_keys[0]',
-    previous_value: { key: 'ssh-rsa AAAAB3NzaC1yc2E...', comment: 'old-laptop', bits: 2048 },
-    current_value: null,
-    severity: 'critical',
-    notification_sent: true,
-    created_at: '2026-02-15T08:44:11Z',
-  },
-  {
-    id: 19,
-    system_id: 'sys-demo-001',
-    previous_inventory_id: 115,
-    inventory_id: 119,
-    diff_type: 'update',
-    category: 'hardware',
-    field_path: 'hardware.memory.total_gb',
-    previous_value: 16,
-    current_value: 32,
-    severity: 'low',
-    notification_sent: false,
-    created_at: '2026-02-15T10:00:00Z',
-  },
-
-  // ── 2026-02-01 (inventory_ids 120–122) ──────────────────────────────────────
-  {
-    id: 20,
-    system_id: 'sys-demo-001',
-    previous_inventory_id: 119,
-    inventory_id: 120,
-    diff_type: 'update',
-    category: 'os',
-    field_path: 'os.timezone',
-    previous_value: 'UTC',
-    current_value: 'Europe/Rome',
-    severity: 'low',
-    notification_sent: false,
-    created_at: '2026-02-01T09:00:00Z',
-  },
-  {
-    id: 21,
-    system_id: 'sys-demo-001',
-    previous_inventory_id: 119,
-    inventory_id: 121,
-    diff_type: 'create',
-    category: 'modules',
-    field_path: 'modules[8]',
-    previous_value: null,
-    current_value: { name: 'nethserver-mail-server', version: '2.4.1', active: true },
-    severity: 'medium',
-    notification_sent: false,
-    created_at: '2026-02-01T11:22:33Z',
-  },
-  {
-    id: 22,
-    system_id: 'sys-demo-001',
-    previous_inventory_id: 119,
-    inventory_id: 122,
-    diff_type: 'delete',
-    category: 'cluster',
-    field_path: 'cluster.virtual_ip',
-    previous_value: { ip: '10.0.0.100', interface: 'eth0', check_interval_ms: 500 },
-    current_value: null,
-    severity: 'high',
-    notification_sent: true,
-    created_at: '2026-02-01T14:55:00Z',
-  },
-
-  // ── 2026-01-18 (inventory_ids 123–127) ──────────────────────────────────────
-  {
-    id: 23,
-    system_id: 'sys-demo-001',
-    previous_inventory_id: 122,
-    inventory_id: 123,
-    diff_type: 'update',
-    category: 'system',
-    field_path: 'system.fqdn',
-    previous_value: 'old.server.local',
-    current_value: 'prod-fw.acme.corp',
-    severity: 'medium',
-    notification_sent: false,
-    created_at: '2026-01-18T07:01:00Z',
-  },
-  {
-    id: 24,
-    system_id: 'sys-demo-001',
-    previous_inventory_id: 122,
-    inventory_id: 124,
-    diff_type: 'create',
-    category: 'network',
-    field_path: 'network.vlans.vlan10',
-    previous_value: null,
-    current_value: { id: 10, name: 'DMZ', interface: 'eth0.10', tagged: true },
-    severity: 'low',
-    notification_sent: false,
-    created_at: '2026-01-18T07:30:45Z',
-  },
-  {
-    id: 25,
-    system_id: 'sys-demo-001',
-    previous_inventory_id: 122,
-    inventory_id: 125,
-    diff_type: 'update',
-    category: 'os',
-    field_path: 'os.selinux_status',
-    previous_value: 'enforcing',
-    current_value: 'permissive',
-    severity: 'critical',
-    notification_sent: true,
-    created_at: '2026-01-18T09:15:00Z',
-  },
-  {
-    id: 26,
-    system_id: 'sys-demo-001',
-    previous_inventory_id: 122,
-    inventory_id: 126,
-    diff_type: 'delete',
-    category: 'backup',
-    field_path: 'backup.jobs.weekly_full',
-    previous_value: { schedule: '0 0 * * 0', destination: 's3://mybucket/weekly', retention: 4 },
-    current_value: null,
-    severity: 'high',
-    notification_sent: true,
-    created_at: '2026-01-18T10:00:00Z',
-  },
-  {
-    id: 27,
-    system_id: 'sys-demo-001',
-    previous_inventory_id: 122,
-    inventory_id: 127,
-    diff_type: 'update',
-    category: 'features',
-    field_path: 'features.antivirus.signatures_date',
-    previous_value: '2025-01-10',
-    current_value: '2026-01-18',
-    severity: 'low',
-    notification_sent: false,
-    created_at: '2026-01-18T12:00:00Z',
-  },
-
-  // ── 2026-01-05 (inventory_ids 128–129) ──────────────────────────────────────
-  {
-    id: 28,
-    system_id: 'sys-demo-001',
-    previous_inventory_id: 127,
-    inventory_id: 128,
-    diff_type: 'update',
-    category: 'hardware',
-    field_path: 'hardware.disk.sda.health',
-    previous_value: 'OK',
-    current_value: 'WARN',
-    severity: 'critical',
-    notification_sent: true,
-    created_at: '2026-01-05T04:00:00Z',
-  },
-  {
-    id: 29,
-    system_id: 'sys-demo-001',
-    previous_inventory_id: 127,
-    inventory_id: 129,
-    diff_type: 'update',
-    category: 'nodes',
-    field_path: 'nodes[0].status',
-    previous_value: 'active',
-    current_value: 'maintenance',
-    severity: 'high',
-    notification_sent: true,
-    created_at: '2026-01-05T06:30:00Z',
-  },
-
-  // ── 2025-12-22 (inventory_ids 130–135) ──────────────────────────────────────
-  {
-    id: 30,
-    system_id: 'sys-demo-001',
-    previous_inventory_id: 129,
-    inventory_id: 130,
-    diff_type: 'create',
-    category: 'security',
-    field_path: 'security.openvpn.certificates[0]',
-    previous_value: null,
-    current_value: { cn: 'vpn-user1', expiry: '2027-12-22', bits: 4096 },
-    severity: 'low',
-    notification_sent: false,
-    created_at: '2025-12-22T01:00:00Z',
-  },
-  {
-    id: 31,
-    system_id: 'sys-demo-001',
-    previous_inventory_id: 129,
-    inventory_id: 131,
-    diff_type: 'update',
-    category: 'os',
-    field_path: 'os.packages_update_count',
-    // edge: number going back to zero
-    previous_value: 23,
-    current_value: 0,
-    severity: 'low',
-    notification_sent: false,
-    created_at: '2025-12-22T02:00:00Z',
-  },
-  {
-    id: 32,
-    system_id: 'sys-demo-001',
-    previous_inventory_id: 129,
-    inventory_id: 132,
-    diff_type: 'delete',
-    category: 'network',
-    field_path: 'network.routes.192.168.99.0/24',
-    previous_value: { gateway: '10.0.0.1', metric: 100, proto: 'static' },
-    current_value: null,
-    severity: 'medium',
-    notification_sent: false,
-    created_at: '2025-12-22T03:10:00Z',
-  },
-  {
-    id: 33,
-    system_id: 'sys-demo-001',
-    previous_inventory_id: 129,
-    inventory_id: 133,
-    diff_type: 'update',
-    category: 'system',
-    field_path: 'system.ssh_port',
-    previous_value: 22,
-    current_value: 2222,
-    severity: 'high',
-    notification_sent: true,
-    created_at: '2025-12-22T04:00:00Z',
-  },
-  {
-    id: 34,
-    system_id: 'sys-demo-001',
-    previous_inventory_id: 129,
-    inventory_id: 134,
-    diff_type: 'update',
-    category: 'hardware',
-    field_path: 'hardware.cpu.model',
-    // edge: empty string → non-empty (renders as '—' → value)
-    previous_value: '',
-    current_value: 'Intel Core i9-13900K @ 3.00GHz',
-    severity: 'low',
-    notification_sent: false,
-    created_at: '2025-12-22T05:00:00Z',
-  },
-  {
-    id: 35,
-    system_id: 'sys-demo-001',
-    // edge: very first inventory snapshot — no previous
-    previous_inventory_id: null,
-    inventory_id: 135,
-    diff_type: 'create',
-    category: 'os',
-    field_path: 'os.installation_date',
-    previous_value: null,
-    current_value: '2025-12-22',
-    severity: 'low',
-    notification_sent: false,
-    created_at: '2025-12-22T06:00:00Z',
-  },
-]
-
-export const mockDiffsPagination: Pagination = {
-  page: 1,
-  page_size: 500,
-  total_count: 35,
-  total_pages: 1,
-  has_next: false,
-  has_prev: false,
-}
-
-// ── Inventory changes summary ─────────────────────────────────────────────────
-export const mockInventoryChanges: InventoryChanges = {
-  system_id: 'sys-demo-001',
-  total_changes: 35,
-  recent_changes: 4,
-  last_inventory_time: '2026-03-22T11:05:19Z',
-  has_critical_changes: true,
-  has_alerts: true,
-  changes_by_category: {
-    os: 9,
-    security: 6,
-    network: 5,
-    hardware: 5,
-    modules: 3,
-    features: 2,
-    backup: 2,
-    cluster: 1,
-    nodes: 1,
-    system: 1,
-  },
-  changes_by_severity: {
-    critical: 6,
-    high: 8,
-    medium: 7,
-    low: 14,
-  },
-}
diff --git a/frontend/src/queries/systems/inventoryChanges.ts b/frontend/src/queries/systems/inventoryChanges.ts
index 7c5b62092..427cc5b9d 100644
--- a/frontend/src/queries/systems/inventoryChanges.ts
+++ b/frontend/src/queries/systems/inventoryChanges.ts
@@ -2,7 +2,6 @@
 //  SPDX-License-Identifier: GPL-3.0-or-later
 
 import { getInventoryChanges, INVENTORY_CHANGES_KEY } from '@/lib/systems/inventoryChanges'
-import { INVENTORY_MOCK_ENABLED, mockInventoryChanges } from '@/lib/systems/inventoryMocks'
 import { canReadSystems } from '@/lib/permissions'
 import { useLoginStore } from '@/stores/login'
 import { defineQuery, useQuery } from '@pinia/colada'
@@ -17,10 +16,6 @@ export const useInventoryChanges = defineQuery(() => {
     enabled: () => !!loginStore.jwtToken && canReadSystems() && !!route.params.systemId,
     query: () => {
       const apiCall = getInventoryChanges(route.params.systemId as string)
-      if (INVENTORY_MOCK_ENABLED) {
-        apiCall.catch(() => {})
-        return Promise.resolve(mockInventoryChanges)
-      }
       return apiCall
     },
   })
diff --git a/frontend/src/queries/systems/inventoryDiffs.ts b/frontend/src/queries/systems/inventoryDiffs.ts
index 8c45b9924..81245ecbf 100644
--- a/frontend/src/queries/systems/inventoryDiffs.ts
+++ b/frontend/src/queries/systems/inventoryDiffs.ts
@@ -9,11 +9,6 @@ import {
   type InventoryDiffSeverity,
   type InventoryDiffType,
 } from '@/lib/systems/inventoryDiffs'
-import {
-  INVENTORY_MOCK_ENABLED,
-  mockInventoryDiffs,
-  mockDiffsPagination,
-} from '@/lib/systems/inventoryMocks'
 import { canReadSystems } from '@/lib/permissions'
 import { DEFAULT_PAGE_SIZE, loadPageSizeFromStorage } from '@/lib/tablePageSize'
 import { useLoginStore } from '@/stores/login'
@@ -62,10 +57,6 @@ export const useInventoryDiffs = defineQuery(() => {
         fromDate.value,
         toDate.value,
       )
-      if (INVENTORY_MOCK_ENABLED) {
-        apiCall.catch(() => {})
-        return Promise.resolve({ diffs: mockInventoryDiffs, pagination: mockDiffsPagination })
-      }
       return apiCall
     },
   })
diff --git a/frontend/src/queries/systems/inventoryTimeline.ts b/frontend/src/queries/systems/inventoryTimeline.ts
index c9942e973..fd59e6101 100644
--- a/frontend/src/queries/systems/inventoryTimeline.ts
+++ b/frontend/src/queries/systems/inventoryTimeline.ts
@@ -7,18 +7,13 @@ import {
   type InventoryDiffType,
 } from '@/lib/systems/inventoryDiffs'
 import { INVENTORY_TIMELINE_KEY, getInventoryTimeline } from '@/lib/systems/inventoryTimeline'
-import {
-  INVENTORY_MOCK_ENABLED,
-  mockTimelineSummary,
-  mockTimelineGroups,
-} from '@/lib/systems/inventoryMocks'
 import { canReadSystems } from '@/lib/permissions'
 import { useLoginStore } from '@/stores/login'
 import { defineQuery, useInfiniteQuery } from '@pinia/colada'
 import { computed, ref } from 'vue'
 import { useRoute } from 'vue-router'
 
-const TIMELINE_PAGE_SIZE = 5 //// 20
+const TIMELINE_PAGE_SIZE = 20
 
 export const useInventoryTimeline = defineQuery(() => {
   const loginStore = useLoginStore()
@@ -54,24 +49,6 @@ export const useInventoryTimeline = defineQuery(() => {
         fromDate.value,
         toDate.value,
       )
-      if (INVENTORY_MOCK_ENABLED) {
-        apiCall.catch(() => {})
-        const start = (pageParam - 1) * TIMELINE_PAGE_SIZE
-        const pagedGroups = mockTimelineGroups.slice(start, start + TIMELINE_PAGE_SIZE)
-        const totalPages = Math.ceil(mockTimelineGroups.length / TIMELINE_PAGE_SIZE)
-        return Promise.resolve({
-          summary: mockTimelineSummary,
-          groups: pagedGroups,
-          pagination: {
-            page: pageParam,
-            page_size: TIMELINE_PAGE_SIZE,
-            total_count: mockTimelineGroups.length,
-            total_pages: totalPages,
-            has_next: pageParam < totalPages,
-            has_prev: pageParam > 1,
-          },
-        })
-      }
       return apiCall
     },
     getNextPageParam: (lastPage) =>

From b30c1f2523d39088cc3348a05850fa2a99aa6fa3 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Tue, 24 Mar 2026 16:14:51 +0100
Subject: [PATCH 25/31] Add SystemChangesTimeline tests

---
 frontend/package-lock.json                    | 138 +++
 frontend/package.json                         |   1 +
 .../systems/SystemChangesTimeline.test.ts     | 857 ++++++++++++++++++
 3 files changed, 996 insertions(+)
 create mode 100644 frontend/src/components/systems/SystemChangesTimeline.test.ts

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 642f58404..6a60074c0 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -39,6 +39,7 @@
         "@vitest/coverage-v8": "^3.2.4",
         "@vue/eslint-config-prettier": "^10.2.0",
         "@vue/eslint-config-typescript": "^14.5.0",
+        "@vue/test-utils": "^2.4.6",
         "@vue/tsconfig": "^0.7.0",
         "eslint": "^9.22.0",
         "eslint-plugin-vue": "~10.0.0",
@@ -1812,6 +1813,13 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@one-ini/wasm": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@one-ini/wasm/-/wasm-0.1.1.tgz",
+      "integrity": "sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@pinia/colada": {
       "version": "0.21.7",
       "resolved": "https://registry.npmjs.org/@pinia/colada/-/colada-0.21.7.tgz",
@@ -3388,6 +3396,17 @@
       "integrity": "sha512-+2k1EQpnYuVuu3N7atWyG3/xoFWIVJZq4Mz8XNOdScFI0etES75fbny/oU4lKWk/577P1zmg0ioYvpGEDZ3DLw==",
       "license": "MIT"
     },
+    "node_modules/@vue/test-utils": {
+      "version": "2.4.6",
+      "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-2.4.6.tgz",
+      "integrity": "sha512-FMxEjOpYNYiFe0GkaHsnJPXFHxQ6m4t8vI/ElPGpMWxZKpmRvQ33OIrvRXemy6yha03RxhOlQuy+gZMC3CQSow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "js-beautify": "^1.14.9",
+        "vue-component-type-helpers": "^2.0.0"
+      }
+    },
     "node_modules/@vue/tsconfig": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/@vue/tsconfig/-/tsconfig-0.7.0.tgz",
@@ -3445,6 +3464,16 @@
         "vue": "^3.5.0"
       }
     },
+    "node_modules/abbrev": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-2.0.0.tgz",
+      "integrity": "sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
@@ -3869,6 +3898,16 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/commander": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
+      "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -3876,6 +3915,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/config-chain": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz",
+      "integrity": "sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ini": "^1.3.4",
+        "proto-list": "~1.2.1"
+      }
+    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -4116,6 +4166,25 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/editorconfig": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-1.0.7.tgz",
+      "integrity": "sha512-e0GOtq/aTQhVdNyDU9e02+wz9oDDM+SIOQxWME2QRjzRX5yyLAuHDE+0aE8vHb9XRC8XD37eO2u57+F09JqFhw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@one-ini/wasm": "0.1.1",
+        "commander": "^10.0.0",
+        "minimatch": "^9.0.1",
+        "semver": "^7.5.3"
+      },
+      "bin": {
+        "editorconfig": "bin/editorconfig"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.218",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.218.tgz",
@@ -5147,6 +5216,13 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/is-docker": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-3.0.0.tgz",
@@ -5400,6 +5476,38 @@
       "integrity": "sha512-hNngCeKxIUQiEUN3GPJOkz4wF/YvdUdbNL9hsBcMQTkKzboD7T/q3OYOuuPZLUE6dBxSGpwhk5mwuDud7JVAow==",
       "license": "BSD-3-Clause"
     },
+    "node_modules/js-beautify": {
+      "version": "1.15.4",
+      "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.15.4.tgz",
+      "integrity": "sha512-9/KXeZUKKJwqCXUdBxFJ3vPh467OCckSBmYDwSK/EtV090K+iMJ7zx2S3HLVDIWFQdqMIsZWbnaGiba18aWhaA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "config-chain": "^1.1.13",
+        "editorconfig": "^1.0.4",
+        "glob": "^10.4.2",
+        "js-cookie": "^3.0.5",
+        "nopt": "^7.2.1"
+      },
+      "bin": {
+        "css-beautify": "js/bin/css-beautify.js",
+        "html-beautify": "js/bin/html-beautify.js",
+        "js-beautify": "js/bin/js-beautify.js"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -6083,6 +6191,22 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/nopt": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-7.2.1.tgz",
+      "integrity": "sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "abbrev": "^2.0.0"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      },
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
     "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",
@@ -6661,6 +6785,13 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/proto-list": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
+      "integrity": "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -7948,6 +8079,13 @@
         }
       }
     },
+    "node_modules/vue-component-type-helpers": {
+      "version": "2.2.12",
+      "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.2.12.tgz",
+      "integrity": "sha512-YbGqHZ5/eW4SnkPNR44mKVc6ZKQoRs/Rux1sxC6rdwXb4qpbOSYfDr9DsTHolOTGmIKgM9j141mZbBeg05R1pw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/vue-eslint-parser": {
       "version": "10.2.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-10.2.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 0e92cf39e..f9650c5e8 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -49,6 +49,7 @@
     "@vitest/coverage-v8": "^3.2.4",
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.5.0",
+    "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.7.0",
     "eslint": "^9.22.0",
     "eslint-plugin-vue": "~10.0.0",
diff --git a/frontend/src/components/systems/SystemChangesTimeline.test.ts b/frontend/src/components/systems/SystemChangesTimeline.test.ts
new file mode 100644
index 000000000..8c1611a43
--- /dev/null
+++ b/frontend/src/components/systems/SystemChangesTimeline.test.ts
@@ -0,0 +1,857 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import { createRouter, createMemoryHistory } from 'vue-router'
+import { createI18n } from 'vue-i18n'
+import { ref, computed } from 'vue'
+import SystemChangesTimeline from './SystemChangesTimeline.vue'
+import enMessages from '@/i18n/en/translation.json'
+import { useLoginStore } from '@/stores/login'
+import type { InventoryDiff } from '@/lib/systems/inventoryDiffs'
+
+// ── Global jsdom shims ────────────────────────────────────────────────────────
+// Keeps a reference to each created instance so tests can fire the callback.
+const intersectionObserverInstances: IntersectionObserverStub[] = []
+class IntersectionObserverStub {
+  observe = vi.fn()
+  unobserve = vi.fn()
+  disconnect = vi.fn()
+  constructor(public callback: IntersectionObserverCallback) {
+    intersectionObserverInstances.push(this)
+  }
+}
+vi.stubGlobal('IntersectionObserver', IntersectionObserverStub)
+
+// ── Mock @logto/vue ──────────────────────────────────────────────────────────
+// isAuthenticated is false so the immediate watch inside the store never calls
+// fetchTokenAndUserInfo (which is hoisted after the watch and would cause a
+// ReferenceError if called at that point).
+vi.mock('@logto/vue', () => ({
+  useLogto: () => ({
+    signIn: vi.fn(),
+    signOut: vi.fn(),
+    isAuthenticated: ref(false),
+    getAccessToken: vi.fn().mockResolvedValue('mock-access-token'),
+  }),
+}))
+
+// ── Backing refs (mutable per test) ───────────────────────────────────────────
+// The component destructures the mock object's properties at setup time, so
+// replacing properties after that has no effect.  Instead, all reactive state
+// lives in these plain refs; the mock's computed properties always read from
+// them and the component always sees the latest values.
+
+type TimelineGroup = {
+  date: string
+  inventory_count: number
+  change_count: number
+  inventory_ids: number[]
+}
+
+const timelineStatus = ref<'pending' | 'success' | 'error'>('pending')
+const timelineErrValue = ref<Error | null>(null)
+const timelineGroups = ref<TimelineGroup[]>([])
+const timelineAsyncStatusValue = ref<'idle' | 'loading'>('idle')
+const hasNextPageValue = ref(false)
+const areDefaultFiltersAppliedValue = ref(true)
+const loadNextPageMock = vi.fn()
+const resetFiltersMock = vi.fn()
+const severityFilterValue = ref<string[]>([])
+const categoryFilterValue = ref<string[]>([])
+const diffTypeFilterValue = ref<string[]>([])
+const fromDateValue = ref('')
+const toDateValue = ref('')
+
+const timelineMock = {
+  state: computed(() => ({
+    status: timelineStatus.value,
+    data: timelineStatus.value === 'success' ? {} : undefined,
+    error: timelineErrValue.value,
+  })),
+  asyncStatus: computed(() => timelineAsyncStatusValue.value),
+  hasNextPage: computed(() => hasNextPageValue.value),
+  loadNextPage: loadNextPageMock,
+  severityFilter: severityFilterValue,
+  categoryFilter: categoryFilterValue,
+  diffTypeFilter: diffTypeFilterValue,
+  fromDate: fromDateValue,
+  toDate: toDateValue,
+  areDefaultFiltersApplied: computed(() => areDefaultFiltersAppliedValue.value),
+  resetFilters: resetFiltersMock,
+  allInventoryIds: computed(() => timelineGroups.value.flatMap((g) => g.inventory_ids)),
+  allGroups: computed(() => timelineGroups.value),
+}
+
+const diffsStatus = ref<'pending' | 'success' | 'error'>('pending')
+const diffsErrValue = ref<Error | null>(null)
+const diffsData = ref<InventoryDiff[]>([])
+const diffsAsyncStatusValue = ref<'idle' | 'loading'>('idle')
+
+const diffsMock = {
+  state: computed(() => ({
+    status: diffsStatus.value,
+    data: diffsStatus.value === 'success' ? { diffs: diffsData.value, pagination: {} } : undefined,
+    error: diffsErrValue.value,
+  })),
+  asyncStatus: computed(() => diffsAsyncStatusValue.value),
+}
+
+// ── vi.mock stubs ────────────────────────────────────────────────────────────
+
+vi.mock('@/queries/systems/inventoryTimeline', () => ({
+  useInventoryTimeline: () => timelineMock,
+}))
+
+vi.mock('@pinia/colada', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@pinia/colada')>()
+  return {
+    ...actual,
+    useQuery: vi.fn(() => diffsMock),
+    defineQuery: (fn: () => unknown) => fn,
+  }
+})
+
+vi.mock('@/lib/permissions', () => ({
+  canReadSystems: () => true,
+}))
+
+vi.mock('@/lib/systems/inventoryDiffs', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@/lib/systems/inventoryDiffs')>()
+  return { ...actual, getInventoryDiffs: vi.fn(() => new Promise(() => {})) }
+})
+
+// ── i18n (real translations) ─────────────────────────────────────────────────
+const i18n = createI18n({ legacy: false, locale: 'en', messages: { en: enMessages } })
+
+// ── Stubs for @nethesis/vue-components and FontAwesome ───────────────────────
+// NeButton renders as <button> so findAll('button') works.
+// NeInlineNotification renders its title prop so wrapper.text() assertions work.
+// NeTextInput renders a real <input> so setValue() works.
+// All others just pass slot content through.
+const neStubs = {
+  NeButton: { template: '<button @click="$emit(\'click\')"><slot /></button>' },
+  NeBadgeV2: { template: '<span><slot /></span>' },
+  NeDropdownFilter: { template: '<div />' },
+  NeInlineNotification: {
+    template: '<div role="alert">{{ title }}</div>',
+    props: ['title', 'description', 'kind'],
+  },
+  NeSkeleton: { template: '<div class="ne-skeleton" />' },
+  NeTextInput: {
+    template:
+      '<input :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)" />',
+    props: ['modelValue', 'isSearch', 'placeholder'],
+    emits: ['update:modelValue'],
+  },
+  NeSpinner: { template: '<span />' },
+  FontAwesomeIcon: { template: '<span />' },
+}
+
+// ── mountComponent ────────────────────────────────────────────────────────────
+async function mountComponent(router = makeRouter()): Promise<VueWrapper> {
+  await router.push('/systems/sys-test-1/detail')
+  await router.isReady()
+
+  const pinia = createPinia()
+  setActivePinia(pinia)
+
+  const wrapper = mount(SystemChangesTimeline, {
+    global: { plugins: [pinia, router, i18n], stubs: neStubs },
+  })
+
+  // Set jwtToken so query enabled guards pass
+  const loginStore = useLoginStore()
+  loginStore.jwtToken = 'mock-jwt-token'
+
+  return wrapper
+}
+
+function makeRouter() {
+  return createRouter({
+    history: createMemoryHistory(),
+    routes: [{ path: '/systems/:systemId/detail', component: { template: '<div/>' } }],
+  })
+}
+
+// ── resetToBaseline ───────────────────────────────────────────────────────────
+function resetToBaseline() {
+  intersectionObserverInstances.length = 0
+  timelineStatus.value = 'pending'
+  timelineErrValue.value = null
+  timelineGroups.value = []
+  timelineAsyncStatusValue.value = 'idle'
+  hasNextPageValue.value = false
+  areDefaultFiltersAppliedValue.value = true
+  loadNextPageMock.mockReset()
+  resetFiltersMock.mockReset()
+  severityFilterValue.value = []
+  categoryFilterValue.value = []
+  diffTypeFilterValue.value = []
+  fromDateValue.value = ''
+  toDateValue.value = ''
+  diffsStatus.value = 'pending'
+  diffsErrValue.value = null
+  diffsData.value = []
+  diffsAsyncStatusValue.value = 'idle'
+}
+
+// ── Sample data helpers ───────────────────────────────────────────────────────
+const today = new Date().toISOString().slice(0, 10)
+const yesterday = new Date(Date.now() - 86_400_000).toISOString().slice(0, 10)
+
+function makeGroup(date: string, changeCount: number, inventoryIds: number[]): TimelineGroup {
+  return {
+    date,
+    inventory_count: inventoryIds.length,
+    change_count: changeCount,
+    inventory_ids: inventoryIds,
+  }
+}
+
+function makeDiff(overrides: Partial<InventoryDiff> = {}): InventoryDiff {
+  return {
+    id: 1,
+    system_id: 'sys-test-1',
+    previous_inventory_id: 9,
+    inventory_id: 10,
+    diff_type: 'update',
+    field_path: 'os.kernel_version',
+    previous_value: '5.15.0-89',
+    current_value: '5.15.0-91',
+    severity: 'low',
+    category: 'os',
+    notification_sent: false,
+    created_at: '2026-03-24T08:00:00Z',
+    ...overrides,
+  }
+}
+
+// Helper: mount with timeline data already set, then activate diffs after mount
+// so the non-immediate diffsState watcher fires and stableDiffs gets populated.
+async function mountWithDiffs(
+  groups: TimelineGroup[],
+  diffs: InventoryDiff[],
+): Promise<VueWrapper> {
+  timelineStatus.value = 'success'
+  timelineGroups.value = groups
+  // Keep diffs pending at mount time so the watcher fires when we set success below
+  const wrapper = await mountComponent()
+  diffsStatus.value = 'success'
+  diffsData.value = diffs
+  await wrapper.vm.$nextTick()
+  await wrapper.vm.$nextTick()
+  return wrapper
+}
+
+// ── Tests ─────────────────────────────────────────────────────────────────────
+
+describe('SystemChangesTimeline', () => {
+  beforeEach(() => {
+    resetToBaseline()
+  })
+
+  // ── Loading skeleton ───────────────────────────────────────────────────────
+
+  describe('loading skeleton', () => {
+    it('renders skeletons while timeline is pending', async () => {
+      // timelineStatus stays 'pending' (baseline)
+      const wrapper = await mountComponent()
+      expect(wrapper.findAll('.ne-skeleton').length).toBeGreaterThan(0)
+    })
+
+    it('does not render timeline content while loading', async () => {
+      const wrapper = await mountComponent()
+      expect(wrapper.text()).not.toContain('Today')
+      expect(wrapper.text()).not.toContain('No change history')
+    })
+  })
+
+  // ── Error notifications ────────────────────────────────────────────────────
+
+  describe('error notifications', () => {
+    it('shows timeline error notification when timeline query fails', async () => {
+      timelineStatus.value = 'error'
+      timelineErrValue.value = new Error('Network error')
+      // Set diffs to success so diffsIsLoading=false and the skeleton is not shown
+      diffsStatus.value = 'success'
+      const wrapper = await mountComponent()
+      expect(wrapper.text()).toContain('Cannot retrieve inventory timeline')
+    })
+
+    it('shows diffs error notification when diffs query fails', async () => {
+      timelineStatus.value = 'success'
+      timelineGroups.value = [makeGroup(today, 1, [10])]
+      diffsStatus.value = 'error'
+      diffsErrValue.value = new Error('Diffs failed')
+      const wrapper = await mountComponent()
+      expect(wrapper.text()).toContain('Cannot retrieve inventory diffs')
+    })
+  })
+
+  // ── Empty state ────────────────────────────────────────────────────────────
+
+  describe('empty state', () => {
+    it('shows "No change history" with no-filters description on first use', async () => {
+      timelineStatus.value = 'success'
+      // no groups → allGroups empty → isTimelineEmpty = true
+      diffsStatus.value = 'success'
+      areDefaultFiltersAppliedValue.value = true
+      const wrapper = await mountComponent()
+      expect(wrapper.text()).toContain('No change history')
+      expect(wrapper.text()).toContain('The system has not reported any changes yet.')
+    })
+
+    it('shows filter description when filters are active and timeline is empty', async () => {
+      timelineStatus.value = 'success'
+      diffsStatus.value = 'success'
+      areDefaultFiltersAppliedValue.value = false
+      const wrapper = await mountComponent()
+      expect(wrapper.text()).toContain('No change history')
+      expect(wrapper.text()).toContain('No changes match the current filters.')
+    })
+
+    it('shows a Reset filters button in the empty state when filters are active', async () => {
+      timelineStatus.value = 'success'
+      diffsStatus.value = 'success'
+      areDefaultFiltersAppliedValue.value = false
+      const wrapper = await mountComponent()
+      const resetButtons = wrapper
+        .findAll('button')
+        .filter((b) => b.text().includes('Reset filters'))
+      // At least the empty-state Reset button (filter bar also has one, so ≥ 2)
+      expect(resetButtons.length).toBeGreaterThanOrEqual(2)
+    })
+
+    it('clicking Reset filters in empty state calls resetFilters', async () => {
+      timelineStatus.value = 'success'
+      diffsStatus.value = 'success'
+      areDefaultFiltersAppliedValue.value = false
+      const wrapper = await mountComponent()
+      const resetButtons = wrapper
+        .findAll('button')
+        .filter((b) => b.text().includes('Reset filters'))
+      await resetButtons[0].trigger('click')
+      expect(resetFiltersMock).toHaveBeenCalled()
+    })
+  })
+
+  // ── Today row ─────────────────────────────────────────────────────────────
+
+  describe('today row', () => {
+    it('renders "Today" and "No changes" when today has change_count === 0', async () => {
+      // Today has 0 changes; include a historical group so isTimelineEmpty is false
+      timelineStatus.value = 'success'
+      timelineGroups.value = [makeGroup(today, 0, []), makeGroup('2026-03-20', 1, [10])]
+      diffsStatus.value = 'success'
+      const wrapper = await mountComponent()
+      expect(wrapper.text()).toContain('Today')
+      expect(wrapper.text()).toContain('No changes')
+    })
+
+    it('renders "Today" with a change count toggle when today has changes', async () => {
+      timelineStatus.value = 'success'
+      timelineGroups.value = [makeGroup(today, 2, [10, 11])]
+      diffsStatus.value = 'success'
+      const wrapper = await mountComponent()
+      expect(wrapper.text()).toContain('Today')
+      expect(wrapper.text()).toContain('2 changes')
+    })
+  })
+
+  // ── Historical date group ──────────────────────────────────────────────────
+
+  describe('historical date group', () => {
+    it('renders a historical date group with "1 change" toggle', async () => {
+      timelineStatus.value = 'success'
+      timelineGroups.value = [makeGroup('2026-03-20', 1, [10])]
+      diffsStatus.value = 'success'
+      const wrapper = await mountComponent()
+      expect(wrapper.text()).toContain('1 change')
+    })
+
+    it('renders "{n} changes" text for a group with multiple changes', async () => {
+      timelineStatus.value = 'success'
+      timelineGroups.value = [makeGroup('2026-03-20', 5, [10, 11, 12, 13, 14])]
+      diffsStatus.value = 'success'
+      const wrapper = await mountComponent()
+      expect(wrapper.text()).toContain('5 changes')
+    })
+  })
+
+  // ── Group expand / collapse ────────────────────────────────────────────────
+
+  describe('group expand / collapse', () => {
+    it('groups are auto-expanded on load (field_path visible immediately)', async () => {
+      const diff = makeDiff({ inventory_id: 10, field_path: 'os.kernel_version' })
+      const wrapper = await mountWithDiffs([makeGroup('2026-03-20', 1, [10])], [diff])
+      expect(wrapper.text()).toContain('os.kernel_version')
+    })
+
+    it('clicking the group toggle collapses an expanded group', async () => {
+      const diff = makeDiff({ inventory_id: 10, field_path: 'os.kernel_version' })
+      const wrapper = await mountWithDiffs([makeGroup('2026-03-20', 1, [10])], [diff])
+      const btn = wrapper.findAll('button').find((b) => b.text().includes('1 change'))
+      await btn!.trigger('click')
+      await wrapper.vm.$nextTick()
+      expect(wrapper.text()).not.toContain('os.kernel_version')
+    })
+
+    it('clicking the group toggle again re-expands it', async () => {
+      const diff = makeDiff({ inventory_id: 10, field_path: 'os.kernel_version' })
+      const wrapper = await mountWithDiffs([makeGroup('2026-03-20', 1, [10])], [diff])
+      const btn = wrapper.findAll('button').find((b) => b.text().includes('1 change'))
+      await btn!.trigger('click')
+      await wrapper.vm.$nextTick()
+      await btn!.trigger('click')
+      await wrapper.vm.$nextTick()
+      expect(wrapper.text()).toContain('os.kernel_version')
+    })
+  })
+
+  // ── Gap badge ─────────────────────────────────────────────────────────────
+
+  describe('gap badge', () => {
+    it('renders a gap badge with the correct day count between two groups', async () => {
+      // 2026-03-20 → 2026-03-15: gap = (20 - 15) - 1 = 4 days
+      timelineStatus.value = 'success'
+      timelineGroups.value = [makeGroup('2026-03-20', 1, [20]), makeGroup('2026-03-15', 1, [15])]
+      diffsStatus.value = 'success'
+      const wrapper = await mountComponent()
+      expect(wrapper.text()).toContain('days, no changes')
+    })
+
+    it('renders "1 day, no changes" for a 1-day gap', async () => {
+      // 2026-03-20 → 2026-03-18: gap = (20 - 18) - 1 = 1 day
+      timelineStatus.value = 'success'
+      timelineGroups.value = [makeGroup('2026-03-20', 1, [20]), makeGroup('2026-03-18', 1, [18])]
+      diffsStatus.value = 'success'
+      const wrapper = await mountComponent()
+      expect(wrapper.text()).toContain('1 day, no changes')
+    })
+
+    it('renders no gap badge when groups are adjacent (0-day gap)', async () => {
+      // today → yesterday: gap = 1 - 1 = 0 (newerIsToday = isToday && change_count===0 = false)
+      timelineStatus.value = 'success'
+      timelineGroups.value = [makeGroup(today, 1, [1]), makeGroup(yesterday, 1, [2])]
+      diffsStatus.value = 'success'
+      const wrapper = await mountComponent()
+      // 'no changes' (lowercase) only appears in gap badge text, not in day-group headers
+      expect(wrapper.text()).not.toContain('no changes')
+    })
+  })
+
+  // ── Diff rendering: update ─────────────────────────────────────────────────
+
+  describe('update diff', () => {
+    async function setupUpdateDiff() {
+      const diff = makeDiff({
+        id: 1,
+        inventory_id: 10,
+        diff_type: 'update',
+        field_path: 'os.kernel',
+        previous_value: '5.15.0-89',
+        current_value: '5.15.0-91',
+        severity: 'low',
+        category: 'os',
+      })
+      const wrapper = await mountWithDiffs([makeGroup('2026-03-20', 1, [10])], [diff])
+      // Expand the diff detail row
+      const diffHeader = wrapper.find('[class*="cursor-pointer"]')
+      await diffHeader.trigger('click')
+      await wrapper.vm.$nextTick()
+      return wrapper
+    }
+
+    it('shows previous value and new value for an update diff', async () => {
+      const wrapper = await setupUpdateDiff()
+      expect(wrapper.text()).toContain('5.15.0-89')
+      expect(wrapper.text()).toContain('5.15.0-91')
+    })
+
+    it('renders blue left border class for update diff', async () => {
+      const wrapper = await setupUpdateDiff()
+      expect(wrapper.find('[class*="border-l-blue-700"]').exists()).toBe(true)
+    })
+
+    it('shows the field_path in the diff header', async () => {
+      const wrapper = await setupUpdateDiff()
+      expect(wrapper.text()).toContain('os.kernel')
+    })
+
+    it('shows the category label', async () => {
+      const wrapper = await setupUpdateDiff()
+      expect(wrapper.text()).toContain('OS')
+    })
+
+    it('shows the severity badge label', async () => {
+      const wrapper = await setupUpdateDiff()
+      expect(wrapper.text()).toContain('Low')
+    })
+  })
+
+  // ── Diff rendering: create ─────────────────────────────────────────────────
+
+  describe('create diff', () => {
+    async function setupCreateDiff(currentValue: unknown = 'new-value') {
+      const diff = makeDiff({
+        id: 2,
+        inventory_id: 10,
+        diff_type: 'create',
+        field_path: 'modules[5]',
+        previous_value: null,
+        current_value: currentValue,
+        severity: 'critical',
+        category: 'modules',
+      })
+      const wrapper = await mountWithDiffs([makeGroup('2026-03-20', 1, [10])], [diff])
+      const diffHeader = wrapper.find('[class*="cursor-pointer"]')
+      await diffHeader.trigger('click')
+      await wrapper.vm.$nextTick()
+      return wrapper
+    }
+
+    it('renders a green background panel for a create diff', async () => {
+      const wrapper = await setupCreateDiff()
+      expect(wrapper.find('[class*="bg-green-50"]').exists()).toBe(true)
+    })
+
+    it('renders green left border class for a create diff', async () => {
+      const wrapper = await setupCreateDiff()
+      expect(wrapper.find('[class*="border-l-green-500"]').exists()).toBe(true)
+    })
+
+    it('renders object current_value as individual key/value lines', async () => {
+      const wrapper = await setupCreateDiff({ name: 'nethserver-fail2ban', version: '1.2.3' })
+      expect(wrapper.text()).toContain('"name"')
+      expect(wrapper.text()).toContain('"version"')
+    })
+  })
+
+  // ── Diff rendering: delete ─────────────────────────────────────────────────
+
+  describe('delete diff', () => {
+    async function setupDeleteDiff(previousValue: unknown = { ip: '192.168.1.1', mtu: 1500 }) {
+      const diff = makeDiff({
+        id: 3,
+        inventory_id: 10,
+        diff_type: 'delete',
+        field_path: 'network.interfaces.eth1',
+        previous_value: previousValue,
+        current_value: null,
+        severity: 'high',
+        category: 'network',
+      })
+      const wrapper = await mountWithDiffs([makeGroup('2026-03-20', 1, [10])], [diff])
+      const diffHeader = wrapper.find('[class*="cursor-pointer"]')
+      await diffHeader.trigger('click')
+      await wrapper.vm.$nextTick()
+      return wrapper
+    }
+
+    it('renders a rose background panel for a delete diff', async () => {
+      const wrapper = await setupDeleteDiff()
+      expect(wrapper.find('[class*="bg-rose-50"]').exists()).toBe(true)
+    })
+
+    it('renders red left border class for a delete diff', async () => {
+      const wrapper = await setupDeleteDiff()
+      expect(wrapper.find('[class*="border-l-red-500"]').exists()).toBe(true)
+    })
+
+    it('renders object previous_value as individual key/value lines', async () => {
+      const wrapper = await setupDeleteDiff({ ip: '192.168.1.1', mtu: 1500 })
+      expect(wrapper.text()).toContain('"ip"')
+      expect(wrapper.text()).toContain('"mtu"')
+    })
+  })
+
+  // ── Diff expand / collapse ─────────────────────────────────────────────────
+
+  describe('diff expand / collapse', () => {
+    it('diff detail panel is hidden before clicking the diff header', async () => {
+      const diff = makeDiff({ id: 1, inventory_id: 10 })
+      const wrapper = await mountWithDiffs([makeGroup('2026-03-20', 1, [10])], [diff])
+      // The expanded detail panel has a top border
+      expect(wrapper.find('[class*="border-t border-gray-100"]').exists()).toBe(false)
+    })
+
+    it('diff detail panel appears after clicking the diff header', async () => {
+      const diff = makeDiff({
+        id: 1,
+        inventory_id: 10,
+        previous_value: 'old',
+        current_value: 'new',
+      })
+      const wrapper = await mountWithDiffs([makeGroup('2026-03-20', 1, [10])], [diff])
+      await wrapper.find('[class*="cursor-pointer"]').trigger('click')
+      await wrapper.vm.$nextTick()
+      expect(wrapper.find('[class*="border-t border-gray-100"]').exists()).toBe(true)
+    })
+
+    it('diff detail panel collapses when the header is clicked a second time', async () => {
+      const diff = makeDiff({ id: 1, inventory_id: 10 })
+      const wrapper = await mountWithDiffs([makeGroup('2026-03-20', 1, [10])], [diff])
+      const header = wrapper.find('[class*="cursor-pointer"]')
+      await header.trigger('click')
+      await wrapper.vm.$nextTick()
+      await header.trigger('click')
+      await wrapper.vm.$nextTick()
+      expect(wrapper.find('[class*="border-t border-gray-100"]').exists()).toBe(false)
+    })
+  })
+
+  // ── Severity badge kinds ───────────────────────────────────────────────────
+
+  describe('severity badge rendering', () => {
+    const severityCases: Array<[InventoryDiff['severity'], string]> = [
+      ['critical', 'Critical'],
+      ['high', 'High'],
+      ['medium', 'Medium'],
+      ['low', 'Low'],
+    ]
+
+    for (const [severity, label] of severityCases) {
+      it(`renders "${label}" label for ${severity} severity`, async () => {
+        const diff = makeDiff({ id: 1, inventory_id: 10, severity })
+        const wrapper = await mountWithDiffs([makeGroup('2026-03-20', 1, [10])], [diff])
+        expect(wrapper.text()).toContain(label)
+      })
+    }
+  })
+
+  // ── Text filter ────────────────────────────────────────────────────────────
+
+  describe('text filter', () => {
+    it('filters diffs by field_path substring', async () => {
+      const diff1 = makeDiff({ id: 1, inventory_id: 10, field_path: 'os.kernel_version' })
+      const diff2 = makeDiff({ id: 2, inventory_id: 10, field_path: 'hardware.cpu.cores' })
+      const wrapper = await mountWithDiffs([makeGroup('2026-03-20', 2, [10])], [diff1, diff2])
+
+      await wrapper.find('input').setValue('kernel')
+      await wrapper.vm.$nextTick()
+
+      expect(wrapper.text()).toContain('os.kernel_version')
+      expect(wrapper.text()).not.toContain('hardware.cpu.cores')
+    })
+
+    it('shows "Try changing your search filters" when nothing matches', async () => {
+      // diffsStatus='success' set BEFORE mount keeps diffsHaveEverLoaded=false
+      // (the non-immediate watcher only fires on *changes*, not the initial value).
+      // When diffsHaveEverLoaded=false, isTimelineEmpty skips the text-filter path
+      // so the timeline still renders — but getFilteredDiffsForGroup returns [] for
+      // the expanded group, showing the per-group "Try changing" message.
+      timelineStatus.value = 'success'
+      timelineGroups.value = [makeGroup('2026-03-20', 1, [10])]
+      diffsStatus.value = 'success'
+      const wrapper = await mountComponent()
+
+      await wrapper.find('input').setValue('zzznomatch')
+      await wrapper.vm.$nextTick()
+
+      expect(wrapper.text()).toContain('Try changing your search filters')
+    })
+
+    it('updates the displayed change count to reflect filtered results', async () => {
+      const diff1 = makeDiff({ id: 1, inventory_id: 10, field_path: 'os.kernel_version' })
+      const diff2 = makeDiff({ id: 2, inventory_id: 10, field_path: 'hardware.cpu.cores' })
+      const wrapper = await mountWithDiffs([makeGroup('2026-03-20', 2, [10])], [diff1, diff2])
+
+      expect(wrapper.text()).toContain('2 changes')
+
+      await wrapper.find('input').setValue('kernel')
+      await wrapper.vm.$nextTick()
+
+      expect(wrapper.text()).toContain('1 change')
+      expect(wrapper.text()).not.toContain('2 changes')
+    })
+  })
+
+  // ── formatDiffValue rendering ──────────────────────────────────────────────
+
+  describe('formatDiffValue', () => {
+    async function expandUpdateDiff(previousValue: unknown, currentValue: unknown) {
+      const diff = makeDiff({
+        id: 1,
+        inventory_id: 10,
+        diff_type: 'update',
+        previous_value: previousValue,
+        current_value: currentValue,
+      })
+      const wrapper = await mountWithDiffs([makeGroup('2026-03-20', 1, [10])], [diff])
+      await wrapper.find('[class*="cursor-pointer"]').trigger('click')
+      await wrapper.vm.$nextTick()
+      return wrapper
+    }
+
+    it('renders — for a null value', async () => {
+      const wrapper = await expandUpdateDiff(null, 'new-value')
+      expect(wrapper.text()).toContain('—')
+    })
+
+    it('renders — for an empty string value', async () => {
+      const wrapper = await expandUpdateDiff('', 'new-value')
+      expect(wrapper.text()).toContain('—')
+    })
+
+    it('renders a JSON-stringified form for object values', async () => {
+      const wrapper = await expandUpdateDiff({ key: 'val' }, 'new')
+      expect(wrapper.text()).toContain('"key"')
+    })
+  })
+
+  // ── objectToLines rendering ────────────────────────────────────────────────
+
+  describe('objectToLines', () => {
+    it('renders a plain object as one line per key in a create diff', async () => {
+      const diff = makeDiff({
+        id: 1,
+        inventory_id: 10,
+        diff_type: 'create',
+        previous_value: null,
+        current_value: { a: 1, b: 'hello', c: true },
+      })
+      const wrapper = await mountWithDiffs([makeGroup('2026-03-20', 1, [10])], [diff])
+      await wrapper.find('[class*="cursor-pointer"]').trigger('click')
+      await wrapper.vm.$nextTick()
+      expect(wrapper.text()).toContain('"a"')
+      expect(wrapper.text()).toContain('"b"')
+      expect(wrapper.text()).toContain('"c"')
+    })
+
+    it('renders an array as a single JSON line (not split by key)', async () => {
+      const diff = makeDiff({
+        id: 1,
+        inventory_id: 10,
+        diff_type: 'create',
+        previous_value: null,
+        current_value: ['x', 'y'],
+      })
+      const wrapper = await mountWithDiffs([makeGroup('2026-03-20', 1, [10])], [diff])
+      await wrapper.find('[class*="cursor-pointer"]').trigger('click')
+      await wrapper.vm.$nextTick()
+      expect(wrapper.text()).toContain('["x","y"]')
+    })
+  })
+
+  // ── Infinite scroll ─────────────────────────────────────────────────────────
+
+  describe('infinite scroll', () => {
+    it('calls loadNextPage when the trigger element enters the viewport', async () => {
+      timelineStatus.value = 'success'
+      timelineGroups.value = [makeGroup('2026-03-20', 1, [10])]
+      hasNextPageValue.value = true
+      diffsStatus.value = 'success'
+      await mountComponent()
+      await Promise.resolve() // let the loadMoreTrigger watcher flush
+
+      // The component creates one IntersectionObserver for the trigger element
+      const observer = intersectionObserverInstances[0]
+      expect(observer).toBeDefined()
+      expect(observer.observe).toHaveBeenCalled()
+
+      // Simulate the trigger element scrolling into view
+      observer.callback(
+        [{ isIntersecting: true } as IntersectionObserverEntry],
+        observer as unknown as IntersectionObserver,
+      )
+
+      expect(loadNextPageMock).toHaveBeenCalledOnce()
+    })
+
+    it('does NOT call loadNextPage when the trigger element leaves the viewport', async () => {
+      timelineStatus.value = 'success'
+      timelineGroups.value = [makeGroup('2026-03-20', 1, [10])]
+      hasNextPageValue.value = true
+      diffsStatus.value = 'success'
+      await mountComponent()
+      await Promise.resolve()
+
+      const observer = intersectionObserverInstances[0]
+      observer.callback(
+        [{ isIntersecting: false } as IntersectionObserverEntry],
+        observer as unknown as IntersectionObserver,
+      )
+
+      expect(loadNextPageMock).not.toHaveBeenCalled()
+    })
+
+    it('does not create an IntersectionObserver when hasNextPage is false', async () => {
+      timelineStatus.value = 'success'
+      timelineGroups.value = [makeGroup('2026-03-20', 1, [10])]
+      hasNextPageValue.value = false
+      diffsStatus.value = 'success'
+      await mountComponent()
+      await Promise.resolve()
+
+      expect(intersectionObserverInstances.length).toBe(0)
+    })
+  })
+
+  // ── Load more UI ───────────────────────────────────────────────────────────
+
+  describe('load more trigger', () => {
+    it('shows the loading indicator when hasNextPage=true and async status is loading', async () => {
+      timelineStatus.value = 'success'
+      timelineGroups.value = [makeGroup('2026-03-20', 1, [10])]
+      hasNextPageValue.value = true
+      timelineAsyncStatusValue.value = 'loading'
+      diffsStatus.value = 'success'
+      const wrapper = await mountComponent()
+      expect(wrapper.text()).toContain('Loading...')
+    })
+
+    it('does not render the load-more area when hasNextPage=false', async () => {
+      timelineStatus.value = 'success'
+      timelineGroups.value = [makeGroup('2026-03-20', 1, [10])]
+      hasNextPageValue.value = false
+      diffsStatus.value = 'success'
+      const wrapper = await mountComponent()
+      expect(wrapper.text()).not.toContain('Loading...')
+    })
+
+    it('does not show the loading indicator when async status is idle', async () => {
+      timelineStatus.value = 'success'
+      timelineGroups.value = [makeGroup('2026-03-20', 1, [10])]
+      hasNextPageValue.value = true
+      timelineAsyncStatusValue.value = 'idle'
+      diffsStatus.value = 'success'
+      const wrapper = await mountComponent()
+      expect(wrapper.text()).not.toContain('Loading...')
+    })
+  })
+
+  // ── Filter bar Reset button ────────────────────────────────────────────────
+
+  describe('filter bar Reset filters button', () => {
+    it('calls resetFilters when the filter bar Reset button is clicked', async () => {
+      timelineStatus.value = 'success'
+      timelineGroups.value = [makeGroup('2026-03-20', 1, [10])]
+      diffsStatus.value = 'success'
+      const wrapper = await mountComponent()
+
+      const resetBtn = wrapper.findAll('button').find((b) => b.text().includes('Reset filters'))
+      await resetBtn!.trigger('click')
+
+      expect(resetFiltersMock).toHaveBeenCalled()
+    })
+
+    it('clears the text filter when Reset filters is clicked', async () => {
+      timelineStatus.value = 'success'
+      timelineGroups.value = [makeGroup('2026-03-20', 1, [10])]
+      diffsStatus.value = 'success'
+      const wrapper = await mountComponent()
+
+      await wrapper.find('input').setValue('some-filter')
+      await wrapper.vm.$nextTick()
+
+      const resetBtn = wrapper.findAll('button').find((b) => b.text().includes('Reset filters'))
+      await resetBtn!.trigger('click')
+      await wrapper.vm.$nextTick()
+
+      expect((wrapper.find('input').element as HTMLInputElement).value).toBe('')
+    })
+  })
+})

From 55ee8948c0bcc2f9ec6fb582ef14d575c19ca674 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Wed, 25 Mar 2026 11:15:49 +0100
Subject: [PATCH 26/31] Implement system changes timeline (wip)

---
 .../systems/SystemChangesTimeline.test.ts     |  49 ++++++--
 .../systems/SystemChangesTimeline.vue         | 116 +++++++++---------
 frontend/src/lib/systems/inventoryDiffs.ts    |   7 ++
 frontend/src/lib/systems/inventoryTimeline.ts |   7 ++
 .../src/queries/systems/inventoryDiffs.ts     |  23 +++-
 .../src/queries/systems/inventoryTimeline.ts  |  26 +++-
 6 files changed, 159 insertions(+), 69 deletions(-)

diff --git a/frontend/src/components/systems/SystemChangesTimeline.test.ts b/frontend/src/components/systems/SystemChangesTimeline.test.ts
index 8c1611a43..68ac3054c 100644
--- a/frontend/src/components/systems/SystemChangesTimeline.test.ts
+++ b/frontend/src/components/systems/SystemChangesTimeline.test.ts
@@ -57,8 +57,18 @@ const timelineGroups = ref<TimelineGroup[]>([])
 const timelineAsyncStatusValue = ref<'idle' | 'loading'>('idle')
 const hasNextPageValue = ref(false)
 const areDefaultFiltersAppliedValue = ref(true)
+const textFilterValue = ref('')
+const debouncedTextFilterValue = ref('')
 const loadNextPageMock = vi.fn()
-const resetFiltersMock = vi.fn()
+const resetFiltersMock = vi.fn(() => {
+  textFilterValue.value = ''
+  debouncedTextFilterValue.value = ''
+  severityFilterValue.value = []
+  categoryFilterValue.value = []
+  diffTypeFilterValue.value = []
+  fromDateValue.value = ''
+  toDateValue.value = ''
+})
 const severityFilterValue = ref<string[]>([])
 const categoryFilterValue = ref<string[]>([])
 const diffTypeFilterValue = ref<string[]>([])
@@ -79,6 +89,8 @@ const timelineMock = {
   diffTypeFilter: diffTypeFilterValue,
   fromDate: fromDateValue,
   toDate: toDateValue,
+  textFilter: textFilterValue,
+  debouncedTextFilter: debouncedTextFilterValue,
   areDefaultFiltersApplied: computed(() => areDefaultFiltersAppliedValue.value),
   resetFilters: resetFiltersMock,
   allInventoryIds: computed(() => timelineGroups.value.flatMap((g) => g.inventory_ids)),
@@ -93,7 +105,17 @@ const diffsAsyncStatusValue = ref<'idle' | 'loading'>('idle')
 const diffsMock = {
   state: computed(() => ({
     status: diffsStatus.value,
-    data: diffsStatus.value === 'success' ? { diffs: diffsData.value, pagination: {} } : undefined,
+    data:
+      diffsStatus.value === 'success'
+        ? {
+            diffs: diffsData.value,
+            pagination: {},
+            // Mirror the real query's .then() which appends requestedInventoryIds so the
+            // component's stableDiffs watcher populates lastFetchedInventoryIds correctly,
+            // keeping diffsIsRefetching=false and allowing group headers to render.
+            requestedInventoryIds: timelineGroups.value.flatMap((g) => g.inventory_ids),
+          }
+        : undefined,
     error: diffsErrValue.value,
   })),
   asyncStatus: computed(() => diffsAsyncStatusValue.value),
@@ -186,7 +208,9 @@ function resetToBaseline() {
   hasNextPageValue.value = false
   areDefaultFiltersAppliedValue.value = true
   loadNextPageMock.mockReset()
-  resetFiltersMock.mockReset()
+  resetFiltersMock.mockClear()
+  textFilterValue.value = ''
+  debouncedTextFilterValue.value = ''
   severityFilterValue.value = []
   categoryFilterValue.value = []
   diffTypeFilterValue.value = []
@@ -630,7 +654,12 @@ describe('SystemChangesTimeline', () => {
       const diff2 = makeDiff({ id: 2, inventory_id: 10, field_path: 'hardware.cpu.cores' })
       const wrapper = await mountWithDiffs([makeGroup('2026-03-20', 2, [10])], [diff1, diff2])
 
-      await wrapper.find('input').setValue('kernel')
+      // Simulate debounce completing: the component resets stableDiffs when
+      // debouncedTextFilter changes, then the server returns only matching diffs.
+      debouncedTextFilterValue.value = 'kernel'
+      await wrapper.vm.$nextTick() // stableDiffs resets to []
+      diffsData.value = [diff1] // server returns only the matching diff
+      await wrapper.vm.$nextTick()
       await wrapper.vm.$nextTick()
 
       expect(wrapper.text()).toContain('os.kernel_version')
@@ -640,9 +669,8 @@ describe('SystemChangesTimeline', () => {
     it('shows "Try changing your search filters" when nothing matches', async () => {
       // diffsStatus='success' set BEFORE mount keeps diffsHaveEverLoaded=false
       // (the non-immediate watcher only fires on *changes*, not the initial value).
-      // When diffsHaveEverLoaded=false, isTimelineEmpty skips the text-filter path
-      // so the timeline still renders — but getFilteredDiffsForGroup returns [] for
-      // the expanded group, showing the per-group "Try changing" message.
+      // stableDiffs is therefore empty, so the expanded group renders 0 diffs and
+      // shows the per-group "Try changing" message regardless of the text input.
       timelineStatus.value = 'success'
       timelineGroups.value = [makeGroup('2026-03-20', 1, [10])]
       diffsStatus.value = 'success'
@@ -661,7 +689,12 @@ describe('SystemChangesTimeline', () => {
 
       expect(wrapper.text()).toContain('2 changes')
 
-      await wrapper.find('input').setValue('kernel')
+      // Simulate server response: updated timeline (change_count=1) and filtered diffs
+      debouncedTextFilterValue.value = 'kernel'
+      await wrapper.vm.$nextTick() // stableDiffs resets
+      timelineGroups.value = [makeGroup('2026-03-20', 1, [10])] // server reports 1 match
+      diffsData.value = [diff1] // server returns matching diff
+      await wrapper.vm.$nextTick()
       await wrapper.vm.$nextTick()
 
       expect(wrapper.text()).toContain('1 change')
diff --git a/frontend/src/components/systems/SystemChangesTimeline.vue b/frontend/src/components/systems/SystemChangesTimeline.vue
index 4629c4f60..e9dfede5d 100644
--- a/frontend/src/components/systems/SystemChangesTimeline.vue
+++ b/frontend/src/components/systems/SystemChangesTimeline.vue
@@ -57,6 +57,8 @@ const {
   diffTypeFilter,
   fromDate,
   toDate,
+  textFilter,
+  debouncedTextFilter,
   areDefaultFiltersApplied: areTimelineDefaultFiltersApplied,
   resetFilters: resetTimelineFilters,
   allInventoryIds,
@@ -64,11 +66,15 @@ const {
 } = useInventoryTimeline()
 
 // ── Local state ──────────────────────────────────────────────────────────────
-const textFilter = ref('')
 const expandedGroups = ref<Set<string>>(new Set())
 const expandedDiffs = ref<Set<number>>(new Set())
 
-// ── Diffs query (reactive to allInventoryIds from timeline) ──────────────────
+// ── Diffs stable state (declared before useQuery so enabled/query can close over them) ──
+const stableDiffs = ref<InventoryDiff[]>([])
+const lastFetchedInventoryIds = ref<Set<number>>(new Set())
+const diffsHaveEverLoaded = ref(false)
+
+// ── Diffs query — key tracks the full ID set; query fetches only the delta ───
 const { state: diffsState, asyncStatus: diffsAsyncStatus } = useQuery({
   key: () => [
     INVENTORY_DIFFS_KEY,
@@ -81,26 +87,34 @@ const { state: diffsState, asyncStatus: diffsAsyncStatus } = useQuery({
       diffTypeFilter: diffTypeFilter.value,
       fromDate: fromDate.value,
       toDate: toDate.value,
+      search: debouncedTextFilter.value,
     },
   ],
+  // Only run when there are IDs in the current timeline page that haven't been fetched yet.
+  // Using allInventoryIds ensures the key and the enabled guard are always in sync: when
+  // filters change the infinite query resets to no-data, allInventoryIds becomes [] and the
+  // query is automatically disabled until the first timeline page for the new filters loads.
   enabled: () =>
     !!loginStore.jwtToken &&
     canReadSystems() &&
     !!route.params.systemId &&
-    allInventoryIds.value.length > 0,
+    allInventoryIds.value.some((id) => !lastFetchedInventoryIds.value.has(id)),
   query: () => {
-    const apiCall = getInventoryDiffs(
+    // Fetch only the IDs we haven't retrieved yet so each loadNextPage() sends a
+    // minimal request instead of re-requesting every previously loaded page.
+    const idsToFetch = allInventoryIds.value.filter((id) => !lastFetchedInventoryIds.value.has(id))
+    return getInventoryDiffs(
       route.params.systemId as string,
       1,
       100,
       severityFilter.value,
       categoryFilter.value,
       diffTypeFilter.value,
-      allInventoryIds.value,
+      idsToFetch,
       fromDate.value,
       toDate.value,
-    )
-    return apiCall
+      debouncedTextFilter.value,
+    ).then((result) => ({ ...result, requestedInventoryIds: idsToFetch }))
   },
 })
 
@@ -179,7 +193,6 @@ const today = todayDateString()
 const displayGroups = computed<DisplayGroup[]>(() => {
   const groups = allGroups.value
   const result: DisplayGroup[] = []
-  const search = textFilter.value.trim().toLowerCase()
 
   const todayGroup = groups.find((g) => g.date === today)
   const otherGroups = todayGroup ? groups.slice(1) : groups
@@ -203,29 +216,9 @@ const displayGroups = computed<DisplayGroup[]>(() => {
   // Skip non-today groups with change_count === 0 (e.g. when a filter hides all
   // their diffs). Their date range gets absorbed into the gap of the preceding
   // visible entry, so only a single badge is shown between two real changes.
-  // When a text filter is active and diffs are loaded, also skip groups whose
-  // diffs are all filtered out by the text search.
   const visibleEntries = allOrderedEntries.filter((e) => {
-    if (e.isToday) {
-      // Always show today when it has no changes ("no changes today" label)
-      if (e.change_count === 0) return true
-      // When text filter is active and diffs are loaded, hide today if nothing matches
-      if (search && diffsHaveEverLoaded.value) {
-        const idSet = new Set(e.inventory_ids)
-        return allDiffs.value.some(
-          (d) => idSet.has(d.inventory_id) && d.field_path.toLowerCase().includes(search),
-        )
-      }
-      return true
-    }
-    if (e.change_count === 0) return false
-    if (search && diffsHaveEverLoaded.value) {
-      const idSet = new Set(e.inventory_ids)
-      return allDiffs.value.some(
-        (d) => idSet.has(d.inventory_id) && d.field_path.toLowerCase().includes(search),
-      )
-    }
-    return true
+    if (e.isToday) return true
+    return e.change_count !== 0
   })
 
   visibleEntries.forEach((entry, idx) => {
@@ -244,33 +237,48 @@ const displayGroups = computed<DisplayGroup[]>(() => {
 
 const isTimelineEmpty = computed(() => {
   if (timelineState.value.status !== 'success') return false
-  if (allGroups.value.filter((g) => g.change_count > 0).length === 0) return true
-  // Text filter is client-side: treat as empty when active, diffs loaded, and nothing matches
-  const search = textFilter.value.trim().toLowerCase()
-  if (search && diffsHaveEverLoaded.value) {
-    return !allDiffs.value.some((d) => d.field_path.toLowerCase().includes(search))
-  }
-  return false
+  return allGroups.value.filter((g) => g.change_count > 0).length === 0
 })
 
-const areDefaultFiltersApplied = computed(
-  () => areTimelineDefaultFiltersApplied.value && !textFilter.value.trim(),
-)
+const areDefaultFiltersApplied = computed(() => areTimelineDefaultFiltersApplied.value)
 
 // ── Diffs helpers ─────────────────────────────────────────────────────────────
 
-// Stable snapshot of diffs from the last completed fetch — never clears during refetch
-// so existing groups keep showing their diffs while a new page is loading.
-const stableDiffs = ref<InventoryDiff[]>([])
-const lastFetchedInventoryIds = ref<Set<number>>(new Set())
-const diffsHaveEverLoaded = ref(false)
+// Reset accumulated diffs when filter conditions (or system) change so the
+// subsequent diffs fetch starts fresh rather than merging into stale data.
+// Using a serialized computed key prevents spurious resets when resetFilters()
+// assigns new empty-array instances that are equal in content to the old ones.
+const filterResetKey = computed(() =>
+  JSON.stringify({
+    systemId: route.params.systemId,
+    severityFilter: severityFilter.value,
+    categoryFilter: categoryFilter.value,
+    diffTypeFilter: diffTypeFilter.value,
+    fromDate: fromDate.value,
+    toDate: toDate.value,
+    debouncedTextFilter: debouncedTextFilter.value,
+  }),
+)
+
+watch(filterResetKey, () => {
+  stableDiffs.value = []
+  lastFetchedInventoryIds.value = new Set()
+  diffsHaveEverLoaded.value = false
+})
 
 watch(
   () => diffsState.value.data,
   (data) => {
     if (data !== undefined) {
-      stableDiffs.value = data.diffs
-      lastFetchedInventoryIds.value = new Set(allInventoryIds.value)
+      // Merge: replace any existing diffs for these IDs (idempotent on refetch),
+      // then append the new ones. This way each loadNextPage() only fetches the
+      // delta instead of re-requesting all previously loaded pages.
+      const fetchedIds = new Set(data.requestedInventoryIds)
+      stableDiffs.value = [
+        ...stableDiffs.value.filter((d) => !fetchedIds.has(d.inventory_id)),
+        ...data.diffs,
+      ]
+      fetchedIds.forEach((id) => lastFetchedInventoryIds.value.add(id))
       diffsHaveEverLoaded.value = true
     }
   },
@@ -324,17 +332,11 @@ function objectToLines(value: unknown): string[] {
 }
 
 function getFilteredDiffsForGroup(group: DisplayGroup): InventoryDiff[] {
-  const diffs = getDiffsForGroup(group)
-  if (!textFilter.value.trim()) return diffs
-  const search = textFilter.value.trim().toLowerCase()
-  return diffs.filter((d) => d.field_path.toLowerCase().includes(search))
+  return getDiffsForGroup(group)
 }
 
 // ── Filtered change count (respects text search) ────────────────────────────
 function getDisplayCountForGroup(group: DisplayGroup): number {
-  if (textFilter.value.trim() && diffsHaveEverLoaded.value) {
-    return getFilteredDiffsForGroup(group).length
-  }
   return group.change_count
 }
 
@@ -403,7 +405,6 @@ function getCategoryLabel(category: InventoryDiffCategory): string {
 
 // ── Reset all filters ─────────────────────────────────────────────────────────
 function resetAllFilters() {
-  textFilter.value = ''
   resetTimelineFilters()
 }
 
@@ -592,7 +593,7 @@ const diffTypeFilterModel = computed<string[]>({
 
     <div v-for="group in displayGroups" :key="group.date">
       <!-- Date header row -->
-      <div v-if="!isGroupPendingDiffs(group)" class="relative mb-2 flex items-start">
+      <div v-if="!isGroupPendingDiffs(group)" class="relative mb-8 flex items-start">
         <!-- Date label column (right-aligned) -->
         <div class="w-36 flex-shrink-0 pt-0.5 pr-6 text-right">
           <span
@@ -774,8 +775,9 @@ const diffTypeFilterModel = computed<string[]>({
       </div>
 
       <!-- Gap badge (days without changes between this group and the next) -->
+      <!-- Only shown when no filters are applied — the gap count is meaningless under a filter -->
       <div
-        v-if="group.gapDaysAfter > 0 && !isGroupPendingDiffs(group)"
+        v-if="group.gapDaysAfter > 0 && !isGroupPendingDiffs(group) && areDefaultFiltersApplied"
         class="my-8 flex items-start"
       >
         <div class="w-36 flex-shrink-0"></div>
diff --git a/frontend/src/lib/systems/inventoryDiffs.ts b/frontend/src/lib/systems/inventoryDiffs.ts
index 44a85073a..f84df9ea3 100644
--- a/frontend/src/lib/systems/inventoryDiffs.ts
+++ b/frontend/src/lib/systems/inventoryDiffs.ts
@@ -58,6 +58,7 @@ const getInventoryDiffsQueryStringParams = (
   inventoryId: number[],
   fromDate: string,
   toDate: string,
+  search: string,
 ) => {
   const searchParams = new URLSearchParams({
     page: pageNum.toString(),
@@ -77,6 +78,10 @@ const getInventoryDiffsQueryStringParams = (
     searchParams.append('to_date', toDate)
   }
 
+  if (search.trim()) {
+    searchParams.append('search', search)
+  }
+
   return searchParams.toString()
 }
 
@@ -90,6 +95,7 @@ export const getInventoryDiffs = (
   inventoryId: number[],
   fromDate: string,
   toDate: string,
+  search: string,
 ) => {
   const loginStore = useLoginStore()
   const queryString = getInventoryDiffsQueryStringParams(
@@ -101,6 +107,7 @@ export const getInventoryDiffs = (
     inventoryId,
     fromDate,
     toDate,
+    search,
   )
 
   return axios
diff --git a/frontend/src/lib/systems/inventoryTimeline.ts b/frontend/src/lib/systems/inventoryTimeline.ts
index baee3f7ff..50c5b100e 100644
--- a/frontend/src/lib/systems/inventoryTimeline.ts
+++ b/frontend/src/lib/systems/inventoryTimeline.ts
@@ -47,6 +47,7 @@ const getInventoryTimelineQueryStringParams = (
   diffType: InventoryDiffType[],
   fromDate: string,
   toDate: string,
+  search: string,
 ) => {
   const searchParams = new URLSearchParams({
     page: pageNum.toString(),
@@ -65,6 +66,10 @@ const getInventoryTimelineQueryStringParams = (
     searchParams.append('to_date', toDate)
   }
 
+  if (search.trim()) {
+    searchParams.append('search', search)
+  }
+
   return searchParams.toString()
 }
 
@@ -77,6 +82,7 @@ export const getInventoryTimeline = (
   diffType: InventoryDiffType[],
   fromDate: string,
   toDate: string,
+  search: string,
 ) => {
   const loginStore = useLoginStore()
   const queryString = getInventoryTimelineQueryStringParams(
@@ -87,6 +93,7 @@ export const getInventoryTimeline = (
     diffType,
     fromDate,
     toDate,
+    search,
   )
 
   return axios
diff --git a/frontend/src/queries/systems/inventoryDiffs.ts b/frontend/src/queries/systems/inventoryDiffs.ts
index 81245ecbf..d194505df 100644
--- a/frontend/src/queries/systems/inventoryDiffs.ts
+++ b/frontend/src/queries/systems/inventoryDiffs.ts
@@ -9,10 +9,12 @@ import {
   type InventoryDiffSeverity,
   type InventoryDiffType,
 } from '@/lib/systems/inventoryDiffs'
+import { MIN_SEARCH_LENGTH } from '@/lib/common'
 import { canReadSystems } from '@/lib/permissions'
 import { DEFAULT_PAGE_SIZE, loadPageSizeFromStorage } from '@/lib/tablePageSize'
 import { useLoginStore } from '@/stores/login'
 import { defineQuery, useQuery } from '@pinia/colada'
+import { useDebounceFn } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 
@@ -28,6 +30,8 @@ export const useInventoryDiffs = defineQuery(() => {
   const inventoryIdFilter = ref<number[]>([])
   const fromDate = ref('')
   const toDate = ref('')
+  const textFilter = ref('')
+  const debouncedTextFilter = ref('')
 
   const { state, asyncStatus, ...rest } = useQuery({
     key: () => [
@@ -42,6 +46,7 @@ export const useInventoryDiffs = defineQuery(() => {
         inventoryIdFilter: inventoryIdFilter.value,
         fromDate: fromDate.value,
         toDate: toDate.value,
+        search: debouncedTextFilter.value,
       },
     ],
     enabled: () => !!loginStore.jwtToken && canReadSystems() && !!route.params.systemId,
@@ -56,6 +61,7 @@ export const useInventoryDiffs = defineQuery(() => {
         inventoryIdFilter.value,
         fromDate.value,
         toDate.value,
+        debouncedTextFilter.value,
       )
       return apiCall
     },
@@ -68,7 +74,8 @@ export const useInventoryDiffs = defineQuery(() => {
       diffTypeFilter.value.length === 0 &&
       inventoryIdFilter.value.length === 0 &&
       !fromDate.value &&
-      !toDate.value
+      !toDate.value &&
+      !debouncedTextFilter.value
     )
   })
 
@@ -145,8 +152,20 @@ export const useInventoryDiffs = defineQuery(() => {
     inventoryIdFilter.value = []
     fromDate.value = ''
     toDate.value = ''
+    textFilter.value = ''
+    debouncedTextFilter.value = ''
   }
 
+  watch(
+    () => textFilter.value,
+    useDebounceFn(() => {
+      if (textFilter.value.length === 0 || textFilter.value.length >= MIN_SEARCH_LENGTH) {
+        debouncedTextFilter.value = textFilter.value
+        pageNum.value = 1
+      }
+    }, 500),
+  )
+
   return {
     ...rest,
     state,
@@ -159,6 +178,8 @@ export const useInventoryDiffs = defineQuery(() => {
     inventoryIdFilter,
     fromDate,
     toDate,
+    textFilter,
+    debouncedTextFilter,
     areDefaultFiltersApplied,
     resetFilters,
   }
diff --git a/frontend/src/queries/systems/inventoryTimeline.ts b/frontend/src/queries/systems/inventoryTimeline.ts
index fd59e6101..b524eb19b 100644
--- a/frontend/src/queries/systems/inventoryTimeline.ts
+++ b/frontend/src/queries/systems/inventoryTimeline.ts
@@ -7,13 +7,15 @@ import {
   type InventoryDiffType,
 } from '@/lib/systems/inventoryDiffs'
 import { INVENTORY_TIMELINE_KEY, getInventoryTimeline } from '@/lib/systems/inventoryTimeline'
+import { MIN_SEARCH_LENGTH } from '@/lib/common'
 import { canReadSystems } from '@/lib/permissions'
 import { useLoginStore } from '@/stores/login'
 import { defineQuery, useInfiniteQuery } from '@pinia/colada'
-import { computed, ref } from 'vue'
+import { useDebounceFn } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 
-const TIMELINE_PAGE_SIZE = 20
+const TIMELINE_PAGE_SIZE = 5 //// 20
 
 export const useInventoryTimeline = defineQuery(() => {
   const loginStore = useLoginStore()
@@ -23,6 +25,8 @@ export const useInventoryTimeline = defineQuery(() => {
   const diffTypeFilter = ref<InventoryDiffType[]>([])
   const fromDate = ref('')
   const toDate = ref('')
+  const textFilter = ref('')
+  const debouncedTextFilter = ref('')
 
   const { state, asyncStatus, hasNextPage, loadNextPage } = useInfiniteQuery({
     key: () => [
@@ -34,6 +38,7 @@ export const useInventoryTimeline = defineQuery(() => {
         diffTypeFilter: diffTypeFilter.value,
         fromDate: fromDate.value,
         toDate: toDate.value,
+        search: debouncedTextFilter.value,
       },
     ],
     enabled: () => !!loginStore.jwtToken && canReadSystems() && !!route.params.systemId,
@@ -48,6 +53,7 @@ export const useInventoryTimeline = defineQuery(() => {
         diffTypeFilter.value,
         fromDate.value,
         toDate.value,
+        debouncedTextFilter.value,
       )
       return apiCall
     },
@@ -69,16 +75,28 @@ export const useInventoryTimeline = defineQuery(() => {
       categoryFilter.value.length === 0 &&
       diffTypeFilter.value.length === 0 &&
       !fromDate.value &&
-      !toDate.value
+      !toDate.value &&
+      !debouncedTextFilter.value
     )
   })
 
+  watch(
+    () => textFilter.value,
+    useDebounceFn(() => {
+      if (textFilter.value.length === 0 || textFilter.value.length >= MIN_SEARCH_LENGTH) {
+        debouncedTextFilter.value = textFilter.value
+      }
+    }, 500),
+  )
+
   const resetFilters = () => {
     severityFilter.value = []
     categoryFilter.value = []
     diffTypeFilter.value = []
     fromDate.value = ''
     toDate.value = ''
+    textFilter.value = ''
+    debouncedTextFilter.value = ''
   }
 
   return {
@@ -91,6 +109,8 @@ export const useInventoryTimeline = defineQuery(() => {
     diffTypeFilter,
     fromDate,
     toDate,
+    textFilter,
+    debouncedTextFilter,
     areDefaultFiltersApplied,
     resetFilters,
     allInventoryIds,

From 396aad664de2f0ad99d741a4aa43c21a0dc26628 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Wed, 25 Mar 2026 12:56:58 +0100
Subject: [PATCH 27/31] Implement system changes timeline (wip)

---
 .../systems/SystemChangeHistoryPanel.vue      | 30 ++++++++--------
 .../systems/SystemChangesTimeline.test.ts     |  1 +
 .../systems/SystemChangesTimeline.vue         | 17 +++++----
 frontend/src/i18n/en/translation.json         |  1 -
 frontend/src/lib/systems/inventoryChanges.ts  | 36 -------------------
 .../src/queries/systems/inventoryChanges.ts   | 28 ---------------
 .../src/queries/systems/inventoryTimeline.ts  |  4 +++
 7 files changed, 30 insertions(+), 87 deletions(-)
 delete mode 100644 frontend/src/lib/systems/inventoryChanges.ts
 delete mode 100644 frontend/src/queries/systems/inventoryChanges.ts

diff --git a/frontend/src/components/systems/SystemChangeHistoryPanel.vue b/frontend/src/components/systems/SystemChangeHistoryPanel.vue
index 41162dae2..121f16282 100644
--- a/frontend/src/components/systems/SystemChangeHistoryPanel.vue
+++ b/frontend/src/components/systems/SystemChangeHistoryPanel.vue
@@ -5,7 +5,7 @@
 
 <script setup lang="ts">
 import CounterCard from '@/components/CounterCard.vue'
-import { useInventoryChanges } from '@/queries/systems/inventoryChanges'
+import { useInventoryTimeline } from '@/queries/systems/inventoryTimeline'
 import { useI18n } from 'vue-i18n'
 import UpdatingSpinner from '../UpdatingSpinner.vue'
 import { NeInlineNotification } from '@nethesis/vue-components'
@@ -13,7 +13,7 @@ import SystemChangesTimeline from './SystemChangesTimeline.vue'
 
 const { t } = useI18n()
 
-const { state: inventoryChanges, asyncStatus: inventoryChangesAsyncStatus } = useInventoryChanges()
+const { state: timelineState, asyncStatus: timelineAsyncStatus, summary } = useInventoryTimeline()
 </script>
 
 <template>
@@ -23,40 +23,40 @@ const { state: inventoryChanges, asyncStatus: inventoryChangesAsyncStatus } = us
     </div>
     <!-- update indicator -->
     <UpdatingSpinner
-      v-if="inventoryChangesAsyncStatus === 'loading' && inventoryChanges.status !== 'pending'"
+      v-if="timelineAsyncStatus === 'loading' && timelineState.status !== 'pending'"
     />
   </div>
-  <!-- inventory changes error notification -->
+  <!-- timeline error notification -->
   <NeInlineNotification
-    v-if="inventoryChanges.status === 'error'"
+    v-if="timelineState.status === 'error'"
     kind="error"
-    :title="t('system_detail.cannot_retrieve_latest_inventory')"
-    :description="inventoryChanges.error.message"
+    :title="t('system_detail.cannot_retrieve_inventory_timeline')"
+    :description="timelineState.error.message"
     class="mb-6"
   />
   <!-- change counters -->
   <div class="mb-10 grid grid-cols-2 gap-6 sm:grid-cols-4">
     <CounterCard
       :title="t('system_detail.total_changes')"
-      :counter="inventoryChanges.data?.total_changes ?? 0"
-      :loading="inventoryChanges.status === 'pending'"
+      :counter="summary?.total ?? 0"
+      :loading="timelineState.status === 'pending'"
     />
     <CounterCard
       :title="t('system_detail.critical_changes')"
-      :counter="inventoryChanges.data?.changes_by_severity?.critical ?? 0"
-      :loading="inventoryChanges.status === 'pending'"
+      :counter="summary?.critical ?? 0"
+      :loading="timelineState.status === 'pending'"
       color-classes="text-rose-700 dark:text-rose-500"
     />
     <CounterCard
       :title="t('system_detail.high_changes')"
-      :counter="inventoryChanges.data?.changes_by_severity?.high ?? 0"
-      :loading="inventoryChanges.status === 'pending'"
+      :counter="summary?.high ?? 0"
+      :loading="timelineState.status === 'pending'"
       color-classes="text-orange-600 dark:text-orange-500"
     />
     <CounterCard
       :title="t('system_detail.medium_changes')"
-      :counter="inventoryChanges.data?.changes_by_severity?.medium ?? 0"
-      :loading="inventoryChanges.status === 'pending'"
+      :counter="summary?.medium ?? 0"
+      :loading="timelineState.status === 'pending'"
       color-classes="text-yellow-600 dark:text-yellow-700"
     />
   </div>
diff --git a/frontend/src/components/systems/SystemChangesTimeline.test.ts b/frontend/src/components/systems/SystemChangesTimeline.test.ts
index 68ac3054c..2c33e8532 100644
--- a/frontend/src/components/systems/SystemChangesTimeline.test.ts
+++ b/frontend/src/components/systems/SystemChangesTimeline.test.ts
@@ -95,6 +95,7 @@ const timelineMock = {
   resetFilters: resetFiltersMock,
   allInventoryIds: computed(() => timelineGroups.value.flatMap((g) => g.inventory_ids)),
   allGroups: computed(() => timelineGroups.value),
+  summary: computed(() => null),
 }
 
 const diffsStatus = ref<'pending' | 'success' | 'error'>('pending')
diff --git a/frontend/src/components/systems/SystemChangesTimeline.vue b/frontend/src/components/systems/SystemChangesTimeline.vue
index e9dfede5d..b2581bd7e 100644
--- a/frontend/src/components/systems/SystemChangesTimeline.vue
+++ b/frontend/src/components/systems/SystemChangesTimeline.vue
@@ -63,6 +63,7 @@ const {
   resetFilters: resetTimelineFilters,
   allInventoryIds,
   allGroups,
+  summary,
 } = useInventoryTimeline()
 
 // ── Local state ──────────────────────────────────────────────────────────────
@@ -128,12 +129,11 @@ watch(
 )
 
 // ── Filter options ────────────────────────────────────────────────────────────
-const severityFilterOptions = computed<FilterOption[]>(() => [
-  { id: 'critical', label: t('system_detail.severity_critical') },
-  { id: 'high', label: t('system_detail.severity_high') },
-  { id: 'medium', label: t('system_detail.severity_medium') },
-  { id: 'low', label: t('system_detail.severity_low') },
-])
+const severityFilterOptions = computed<FilterOption[]>(() =>
+  (['critical', 'high', 'medium', 'low'] as const)
+    .filter((s) => (summary.value?.[s] ?? 0) > 0)
+    .map((s) => ({ id: s, label: t(`system_detail.severity_${s}`) })),
+)
 
 const categoryFilterOptions = computed<FilterOption[]>(() => [
   { id: 'os', label: t('system_detail.category_os') },
@@ -297,7 +297,10 @@ const diffsError = computed(() =>
   diffsState.value.status === 'error' ? diffsState.value.error : null,
 )
 const diffsIsLoading = computed(
-  () => !diffsHaveEverLoaded.value && diffsState.value.status === 'pending',
+  () =>
+    !diffsHaveEverLoaded.value &&
+    diffsState.value.status === 'pending' &&
+    allInventoryIds.value.length > 0,
 )
 // True while allInventoryIds has IDs not yet covered by the last completed diffs fetch
 const diffsIsRefetching = computed(
diff --git a/frontend/src/i18n/en/translation.json b/frontend/src/i18n/en/translation.json
index 38fc6c286..1db1cb014 100644
--- a/frontend/src/i18n/en/translation.json
+++ b/frontend/src/i18n/en/translation.json
@@ -528,7 +528,6 @@
     "system_key": "System key",
     "cannot_determine_system_url_description": "Cannot access the system because its URL cannot be determined.",
     "change_history_description": "The change history is based on the differences between the inventories sent by the system. If the system has not sent any inventory yet, no change history will be available.",
-    "cannot_retrieve_inventory_changes": "Cannot retrieve inventory changes",
     "today": "Today",
     "no_changes_today": "No changes",
     "one_day_no_changes": "1 day, no changes",
diff --git a/frontend/src/lib/systems/inventoryChanges.ts b/frontend/src/lib/systems/inventoryChanges.ts
deleted file mode 100644
index 909f6181a..000000000
--- a/frontend/src/lib/systems/inventoryChanges.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-//  Copyright (C) 2026 Nethesis S.r.l.
-//  SPDX-License-Identifier: GPL-3.0-or-later
-
-import axios from 'axios'
-import { API_URL } from '../config'
-import { useLoginStore } from '@/stores/login'
-import { type InventoryDiffCategory, type InventoryDiffSeverity } from './inventoryDiffs'
-
-export const INVENTORY_CHANGES_KEY = 'inventoryChanges'
-
-export interface InventoryChanges {
-  system_id: string
-  total_changes: number
-  recent_changes: number
-  last_inventory_time: string
-  has_critical_changes: boolean
-  has_alerts: boolean
-  changes_by_category: Partial<Record<InventoryDiffCategory, number>>
-  changes_by_severity: Partial<Record<InventoryDiffSeverity, number>>
-}
-
-interface InventoryChangesResponse {
-  code: number
-  message: string
-  data: InventoryChanges | null
-}
-
-export const getInventoryChanges = (systemId: string) => {
-  const loginStore = useLoginStore()
-
-  return axios
-    .get<InventoryChangesResponse>(`${API_URL}/systems/${systemId}/inventory/changes`, {
-      headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
-    })
-    .then((res) => res.data.data)
-}
diff --git a/frontend/src/queries/systems/inventoryChanges.ts b/frontend/src/queries/systems/inventoryChanges.ts
deleted file mode 100644
index 427cc5b9d..000000000
--- a/frontend/src/queries/systems/inventoryChanges.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-//  Copyright (C) 2026 Nethesis S.r.l.
-//  SPDX-License-Identifier: GPL-3.0-or-later
-
-import { getInventoryChanges, INVENTORY_CHANGES_KEY } from '@/lib/systems/inventoryChanges'
-import { canReadSystems } from '@/lib/permissions'
-import { useLoginStore } from '@/stores/login'
-import { defineQuery, useQuery } from '@pinia/colada'
-import { useRoute } from 'vue-router'
-
-export const useInventoryChanges = defineQuery(() => {
-  const loginStore = useLoginStore()
-  const route = useRoute()
-
-  const { state, asyncStatus, ...rest } = useQuery({
-    key: () => [INVENTORY_CHANGES_KEY, route.params.systemId],
-    enabled: () => !!loginStore.jwtToken && canReadSystems() && !!route.params.systemId,
-    query: () => {
-      const apiCall = getInventoryChanges(route.params.systemId as string)
-      return apiCall
-    },
-  })
-
-  return {
-    ...rest,
-    state,
-    asyncStatus,
-  }
-})
diff --git a/frontend/src/queries/systems/inventoryTimeline.ts b/frontend/src/queries/systems/inventoryTimeline.ts
index b524eb19b..40df17f5d 100644
--- a/frontend/src/queries/systems/inventoryTimeline.ts
+++ b/frontend/src/queries/systems/inventoryTimeline.ts
@@ -69,6 +69,9 @@ export const useInventoryTimeline = defineQuery(() => {
 
   const allGroups = computed(() => (state.value.data?.pages ?? []).flatMap((page) => page.groups))
 
+  // Summary from the first page — represents overall totals for the current system
+  const summary = computed(() => state.value.data?.pages[0]?.summary ?? null)
+
   const areDefaultFiltersApplied = computed(() => {
     return (
       severityFilter.value.length === 0 &&
@@ -115,5 +118,6 @@ export const useInventoryTimeline = defineQuery(() => {
     resetFilters,
     allInventoryIds,
     allGroups,
+    summary,
   }
 })

From bb7fb34725ebe64358acc7fe4cf107728215cb3b Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Wed, 25 Mar 2026 16:37:08 +0100
Subject: [PATCH 28/31] Implement system changes timeline (wip)

---
 .../systems/SystemChangesTimeline.vue         | 157 +++++++++---------
 frontend/src/lib/systems/inventoryChanges.ts  |  36 ++++
 .../src/queries/systems/inventoryChanges.ts   |  28 ++++
 3 files changed, 145 insertions(+), 76 deletions(-)
 create mode 100644 frontend/src/lib/systems/inventoryChanges.ts
 create mode 100644 frontend/src/queries/systems/inventoryChanges.ts

diff --git a/frontend/src/components/systems/SystemChangesTimeline.vue b/frontend/src/components/systems/SystemChangesTimeline.vue
index b2581bd7e..130f48f50 100644
--- a/frontend/src/components/systems/SystemChangesTimeline.vue
+++ b/frontend/src/components/systems/SystemChangesTimeline.vue
@@ -31,6 +31,7 @@ import {
   NeSpinner,
 } from '@nethesis/vue-components'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import UpdatingSpinner from '@/components/UpdatingSpinner.vue'
 import {
   faChevronDown,
   faChevronUp,
@@ -453,80 +454,86 @@ const diffTypeFilterModel = computed<string[]>({
 
 <template>
   <!-- Filters bar -->
-  <div class="mb-6 flex flex-wrap items-center gap-4">
-    <!-- Text filter -->
-    <NeTextInput
-      v-model.trim="textFilter"
-      is-search
-      :placeholder="$t('common.filter')"
-      class="max-w-xs"
-    />
-    <!-- Severity filter -->
-    <NeDropdownFilter
-      v-model="severityFilterModel"
-      kind="checkbox"
-      :label="t('system_detail.severity')"
-      :options="severityFilterOptions"
-      :show-clear-filter="false"
-      :clear-filter-label="t('ne_dropdown_filter.clear_filter')"
-      :open-menu-aria-label="t('ne_dropdown_filter.open_filter')"
-      :no-options-label="t('ne_dropdown_filter.no_options')"
-      :more-options-hidden-label="t('ne_dropdown_filter.more_options_hidden')"
-      :clear-search-label="t('ne_dropdown_filter.clear_search')"
-    />
-    <!-- Category filter -->
-    <NeDropdownFilter
-      v-model="categoryFilterModel"
-      kind="checkbox"
-      :label="t('system_detail.category')"
-      :options="categoryFilterOptions"
-      show-options-filter
-      :show-clear-filter="false"
-      :clear-filter-label="t('ne_dropdown_filter.clear_filter')"
-      :open-menu-aria-label="t('ne_dropdown_filter.open_filter')"
-      :no-options-label="t('ne_dropdown_filter.no_options')"
-      :more-options-hidden-label="t('ne_dropdown_filter.more_options_hidden')"
-      :clear-search-label="t('ne_dropdown_filter.clear_search')"
-    />
-    <!-- Change type filter -->
-    <NeDropdownFilter
-      v-model="diffTypeFilterModel"
-      kind="checkbox"
-      :label="t('system_detail.change_type')"
-      :options="diffTypeFilterOptions"
-      :show-clear-filter="false"
-      :clear-filter-label="t('ne_dropdown_filter.clear_filter')"
-      :open-menu-aria-label="t('ne_dropdown_filter.open_filter')"
-      :no-options-label="t('ne_dropdown_filter.no_options')"
-      :more-options-hidden-label="t('ne_dropdown_filter.more_options_hidden')"
-      :clear-search-label="t('ne_dropdown_filter.clear_search')"
-    />
-    <!-- Date range: from -->
-    <div class="flex items-center gap-2">
-      <label class="text-sm text-gray-500 dark:text-gray-400">{{
-        t('system_detail.from_date')
-      }}</label>
-      <input
-        v-model="fromDate"
-        type="date"
-        class="rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 focus:ring-2 focus:ring-sky-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-gray-300"
-      />
-    </div>
-    <!-- Date range: to -->
-    <div class="flex items-center gap-2">
-      <label class="text-sm text-gray-500 dark:text-gray-400">{{
-        t('system_detail.to_date')
-      }}</label>
-      <input
-        v-model="toDate"
-        type="date"
-        class="rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 focus:ring-2 focus:ring-sky-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-gray-300"
-      />
+  <div class="mb-6 flex items-center gap-4">
+    <div class="flex w-full items-end justify-between gap-4">
+      <div class="flex flex-wrap items-center gap-4">
+        <!-- Text filter -->
+        <NeTextInput
+          v-model.trim="textFilter"
+          is-search
+          :placeholder="$t('common.filter')"
+          class="max-w-xs"
+        />
+        <!-- Severity filter -->
+        <NeDropdownFilter
+          v-model="severityFilterModel"
+          kind="checkbox"
+          :label="t('system_detail.severity')"
+          :options="severityFilterOptions"
+          :show-clear-filter="false"
+          :clear-filter-label="t('ne_dropdown_filter.clear_filter')"
+          :open-menu-aria-label="t('ne_dropdown_filter.open_filter')"
+          :no-options-label="t('ne_dropdown_filter.no_options')"
+          :more-options-hidden-label="t('ne_dropdown_filter.more_options_hidden')"
+          :clear-search-label="t('ne_dropdown_filter.clear_search')"
+        />
+        <!-- Category filter -->
+        <NeDropdownFilter
+          v-model="categoryFilterModel"
+          kind="checkbox"
+          :label="t('system_detail.category')"
+          :options="categoryFilterOptions"
+          show-options-filter
+          :show-clear-filter="false"
+          :clear-filter-label="t('ne_dropdown_filter.clear_filter')"
+          :open-menu-aria-label="t('ne_dropdown_filter.open_filter')"
+          :no-options-label="t('ne_dropdown_filter.no_options')"
+          :more-options-hidden-label="t('ne_dropdown_filter.more_options_hidden')"
+          :clear-search-label="t('ne_dropdown_filter.clear_search')"
+        />
+        <!-- Change type filter -->
+        <NeDropdownFilter
+          v-model="diffTypeFilterModel"
+          kind="checkbox"
+          :label="t('system_detail.change_type')"
+          :options="diffTypeFilterOptions"
+          :show-clear-filter="false"
+          :clear-filter-label="t('ne_dropdown_filter.clear_filter')"
+          :open-menu-aria-label="t('ne_dropdown_filter.open_filter')"
+          :no-options-label="t('ne_dropdown_filter.no_options')"
+          :more-options-hidden-label="t('ne_dropdown_filter.more_options_hidden')"
+          :clear-search-label="t('ne_dropdown_filter.clear_search')"
+        />
+        <!-- Date range: from -->
+        <div class="flex items-center gap-2">
+          <label class="text-sm text-gray-500 dark:text-gray-400">{{
+            t('system_detail.from_date')
+          }}</label>
+          <input
+            v-model="fromDate"
+            type="date"
+            class="rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 focus:ring-2 focus:ring-sky-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-gray-300"
+          />
+        </div>
+        <!-- Date range: to -->
+        <div class="flex items-center gap-2">
+          <label class="text-sm text-gray-500 dark:text-gray-400">{{
+            t('system_detail.to_date')
+          }}</label>
+          <input
+            v-model="toDate"
+            type="date"
+            class="rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 focus:ring-2 focus:ring-sky-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-gray-300"
+          />
+        </div>
+        <!-- Reset filters -->
+        <NeButton kind="tertiary" @click="resetAllFilters">
+          {{ t('common.reset_filters') }}
+        </NeButton>
+      </div>
+      <!-- update indicator -->
+      <UpdatingSpinner v-if="timelineAsyncStatus === 'loading' || diffsAsyncStatus === 'loading'" />
     </div>
-    <!-- Reset filters -->
-    <NeButton kind="tertiary" @click="resetAllFilters">
-      {{ t('common.reset_filters') }}
-    </NeButton>
   </div>
 
   <!-- Error notifications -->
@@ -545,10 +552,8 @@ const diffTypeFilterModel = computed<string[]>({
     class="mb-6"
   />
 
-  <!-- ////  -->
-  <!-- <div>timelineState.status {{ timelineState.status }}</div>
+  <!-- ////
   <div>timelineAsyncStatus {{ timelineAsyncStatus }}</div>
-  <div>diffsState.status {{ diffsState.status }}</div>
   <div>diffsAsyncStatus {{ diffsAsyncStatus }}</div> -->
 
   <!-- Loading skeleton (initial load) -->
diff --git a/frontend/src/lib/systems/inventoryChanges.ts b/frontend/src/lib/systems/inventoryChanges.ts
new file mode 100644
index 000000000..909f6181a
--- /dev/null
+++ b/frontend/src/lib/systems/inventoryChanges.ts
@@ -0,0 +1,36 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import axios from 'axios'
+import { API_URL } from '../config'
+import { useLoginStore } from '@/stores/login'
+import { type InventoryDiffCategory, type InventoryDiffSeverity } from './inventoryDiffs'
+
+export const INVENTORY_CHANGES_KEY = 'inventoryChanges'
+
+export interface InventoryChanges {
+  system_id: string
+  total_changes: number
+  recent_changes: number
+  last_inventory_time: string
+  has_critical_changes: boolean
+  has_alerts: boolean
+  changes_by_category: Partial<Record<InventoryDiffCategory, number>>
+  changes_by_severity: Partial<Record<InventoryDiffSeverity, number>>
+}
+
+interface InventoryChangesResponse {
+  code: number
+  message: string
+  data: InventoryChanges | null
+}
+
+export const getInventoryChanges = (systemId: string) => {
+  const loginStore = useLoginStore()
+
+  return axios
+    .get<InventoryChangesResponse>(`${API_URL}/systems/${systemId}/inventory/changes`, {
+      headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
+    })
+    .then((res) => res.data.data)
+}
diff --git a/frontend/src/queries/systems/inventoryChanges.ts b/frontend/src/queries/systems/inventoryChanges.ts
new file mode 100644
index 000000000..427cc5b9d
--- /dev/null
+++ b/frontend/src/queries/systems/inventoryChanges.ts
@@ -0,0 +1,28 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import { getInventoryChanges, INVENTORY_CHANGES_KEY } from '@/lib/systems/inventoryChanges'
+import { canReadSystems } from '@/lib/permissions'
+import { useLoginStore } from '@/stores/login'
+import { defineQuery, useQuery } from '@pinia/colada'
+import { useRoute } from 'vue-router'
+
+export const useInventoryChanges = defineQuery(() => {
+  const loginStore = useLoginStore()
+  const route = useRoute()
+
+  const { state, asyncStatus, ...rest } = useQuery({
+    key: () => [INVENTORY_CHANGES_KEY, route.params.systemId],
+    enabled: () => !!loginStore.jwtToken && canReadSystems() && !!route.params.systemId,
+    query: () => {
+      const apiCall = getInventoryChanges(route.params.systemId as string)
+      return apiCall
+    },
+  })
+
+  return {
+    ...rest,
+    state,
+    asyncStatus,
+  }
+})

From 6f4dd6a02c980435579703e8eab6c97a6c62637a Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Thu, 26 Mar 2026 19:19:38 +0100
Subject: [PATCH 29/31] Implement system changes timeline (wip)

---
 frontend/package-lock.json                    | 135 +++
 frontend/package.json                         |   1 +
 frontend/src/assets/main.css                  |   3 +
 frontend/src/assets/vue-datepicker.css        |  27 +
 .../systems/SystemChangesTimeline.test.ts     | 891 ------------------
 .../systems/SystemChangesTimeline.vue         |  64 +-
 frontend/src/i18n/en/translation.json         |   3 +-
 frontend/src/lib/systems/inventoryDiffs.ts    |   4 +-
 frontend/src/lib/systems/inventoryTimeline.ts |   4 +-
 .../src/queries/systems/inventoryDiffs.ts     |   2 +
 .../src/queries/systems/inventoryTimeline.ts  |   2 +
 11 files changed, 215 insertions(+), 921 deletions(-)
 create mode 100644 frontend/src/assets/vue-datepicker.css
 delete mode 100644 frontend/src/components/systems/SystemChangesTimeline.test.ts

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 6a60074c0..bf313d07b 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -19,6 +19,7 @@
         "@nethesis/vue-components": "^3.6.0",
         "@pinia/colada": "^0.21.5",
         "@tailwindcss/vite": "^4.1.10",
+        "@vuepic/vue-datepicker": "^12.1.0",
         "@vueuse/core": "^13.4.0",
         "axios": "^1.11.0",
         "lodash": "^4.17.21",
@@ -729,6 +730,12 @@
         "node": ">=18"
       }
     },
+    "node_modules/@date-fns/tz": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@date-fns/tz/-/tz-1.4.1.tgz",
+      "integrity": "sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA==",
+      "license": "MIT"
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.25.9",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.9.tgz",
@@ -1321,6 +1328,68 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.5.tgz",
+      "integrity": "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.11"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.6.tgz",
+      "integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.5",
+        "@floating-ui/utils": "^0.2.11"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.11.tgz",
+      "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
+      "license": "MIT"
+    },
+    "node_modules/@floating-ui/vue": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.1.11.tgz",
+      "integrity": "sha512-HzHKCNVxnGS35r9fCHBc3+uCnjw9IWIlCPL683cGgM9Kgj2BiAl8x1mS7vtvP6F9S/e/q4O6MApwSHj8hNLGfw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.7.6",
+        "@floating-ui/utils": "^0.2.11",
+        "vue-demi": ">=0.13.0"
+      }
+    },
+    "node_modules/@floating-ui/vue/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@fontsource/poppins": {
       "version": "5.2.7",
       "resolved": "https://registry.npmjs.org/@fontsource/poppins/-/poppins-5.2.7.tgz",
@@ -3426,6 +3495,72 @@
         }
       }
     },
+    "node_modules/@vuepic/vue-datepicker": {
+      "version": "12.1.0",
+      "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-12.1.0.tgz",
+      "integrity": "sha512-QuWcO+CqIGYFoRNCagp9xUY9sMK/OHUlVIDxBYjw7HjCTWXfuE/r3l3loB00faEtb0Teo3DeBn26hT3tYA5pgg==",
+      "license": "MIT",
+      "dependencies": {
+        "@date-fns/tz": "^1.4.1",
+        "@floating-ui/vue": "^1.1.9",
+        "@vueuse/core": "^14.1.0",
+        "date-fns": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "peerDependencies": {
+        "vue": ">=3.5.0"
+      }
+    },
+    "node_modules/@vuepic/vue-datepicker/node_modules/@vueuse/core": {
+      "version": "14.2.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-14.2.1.tgz",
+      "integrity": "sha512-3vwDzV+GDUNpdegRY6kzpLm4Igptq+GA0QkJ3W61Iv27YWwW/ufSlOfgQIpN6FZRMG0mkaz4gglJRtq5SeJyIQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.21",
+        "@vueuse/metadata": "14.2.1",
+        "@vueuse/shared": "14.2.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@vuepic/vue-datepicker/node_modules/@vueuse/metadata": {
+      "version": "14.2.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-14.2.1.tgz",
+      "integrity": "sha512-1ButlVtj5Sb/HDtIy1HFr1VqCP4G6Ypqt5MAo0lCgjokrk2mvQKsK2uuy0vqu/Ks+sHfuHo0B9Y9jn9xKdjZsw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vuepic/vue-datepicker/node_modules/@vueuse/shared": {
+      "version": "14.2.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-14.2.1.tgz",
+      "integrity": "sha512-shTJncjV9JTI4oVNyF1FQonetYAiTBd+Qj7cY89SWbXSkx7gyhrgtEdF2ZAVWS1S3SHlaROO6F2IesJxQEkZBw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@vuepic/vue-datepicker/node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/@vueuse/core": {
       "version": "13.9.0",
       "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-13.9.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index f9650c5e8..945b7d5ab 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -29,6 +29,7 @@
     "@nethesis/vue-components": "^3.6.0",
     "@pinia/colada": "^0.21.5",
     "@tailwindcss/vite": "^4.1.10",
+    "@vuepic/vue-datepicker": "^12.1.0",
     "@vueuse/core": "^13.4.0",
     "axios": "^1.11.0",
     "lodash": "^4.17.21",
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 069095cff..9a54d742e 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -8,6 +8,9 @@
 
 @import 'tailwindcss';
 
+@import '@vuepic/vue-datepicker/dist/main.css' layer(vendor);
+@import './vue-datepicker.css';
+
 /* Poppins font */
 @import '@fontsource/poppins';
 
diff --git a/frontend/src/assets/vue-datepicker.css b/frontend/src/assets/vue-datepicker.css
new file mode 100644
index 000000000..b788cefd0
--- /dev/null
+++ b/frontend/src/assets/vue-datepicker.css
@@ -0,0 +1,27 @@
+/*
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+*/
+
+/* VueDatePicker customizations */
+.vue-datepicker {
+  @apply w-auto!;
+  --dp-font-family: 'Poppins', sans-serif;
+  --dp-font-size: var(--text-sm);
+  --dp-border-radius: var(--radius-md);
+}
+
+.dp__theme_light {
+  --dp-background-color: var(--color-white);
+  --dp-primary-color: var(--color-primary-700);
+}
+
+.dp__theme_dark {
+  --dp-background-color: var(--color-gray-950);
+  --dp-primary-color: var(--color-primary-500);
+  --dp-primary-text-color: var(--color-gray-950);
+}
+
+.dp__menu {
+  box-shadow: var(--shadow-lg);
+}
diff --git a/frontend/src/components/systems/SystemChangesTimeline.test.ts b/frontend/src/components/systems/SystemChangesTimeline.test.ts
deleted file mode 100644
index 2c33e8532..000000000
--- a/frontend/src/components/systems/SystemChangesTimeline.test.ts
+++ /dev/null
@@ -1,891 +0,0 @@
-//  Copyright (C) 2026 Nethesis S.r.l.
-//  SPDX-License-Identifier: GPL-3.0-or-later
-
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { mount, type VueWrapper } from '@vue/test-utils'
-import { createPinia, setActivePinia } from 'pinia'
-import { createRouter, createMemoryHistory } from 'vue-router'
-import { createI18n } from 'vue-i18n'
-import { ref, computed } from 'vue'
-import SystemChangesTimeline from './SystemChangesTimeline.vue'
-import enMessages from '@/i18n/en/translation.json'
-import { useLoginStore } from '@/stores/login'
-import type { InventoryDiff } from '@/lib/systems/inventoryDiffs'
-
-// ── Global jsdom shims ────────────────────────────────────────────────────────
-// Keeps a reference to each created instance so tests can fire the callback.
-const intersectionObserverInstances: IntersectionObserverStub[] = []
-class IntersectionObserverStub {
-  observe = vi.fn()
-  unobserve = vi.fn()
-  disconnect = vi.fn()
-  constructor(public callback: IntersectionObserverCallback) {
-    intersectionObserverInstances.push(this)
-  }
-}
-vi.stubGlobal('IntersectionObserver', IntersectionObserverStub)
-
-// ── Mock @logto/vue ──────────────────────────────────────────────────────────
-// isAuthenticated is false so the immediate watch inside the store never calls
-// fetchTokenAndUserInfo (which is hoisted after the watch and would cause a
-// ReferenceError if called at that point).
-vi.mock('@logto/vue', () => ({
-  useLogto: () => ({
-    signIn: vi.fn(),
-    signOut: vi.fn(),
-    isAuthenticated: ref(false),
-    getAccessToken: vi.fn().mockResolvedValue('mock-access-token'),
-  }),
-}))
-
-// ── Backing refs (mutable per test) ───────────────────────────────────────────
-// The component destructures the mock object's properties at setup time, so
-// replacing properties after that has no effect.  Instead, all reactive state
-// lives in these plain refs; the mock's computed properties always read from
-// them and the component always sees the latest values.
-
-type TimelineGroup = {
-  date: string
-  inventory_count: number
-  change_count: number
-  inventory_ids: number[]
-}
-
-const timelineStatus = ref<'pending' | 'success' | 'error'>('pending')
-const timelineErrValue = ref<Error | null>(null)
-const timelineGroups = ref<TimelineGroup[]>([])
-const timelineAsyncStatusValue = ref<'idle' | 'loading'>('idle')
-const hasNextPageValue = ref(false)
-const areDefaultFiltersAppliedValue = ref(true)
-const textFilterValue = ref('')
-const debouncedTextFilterValue = ref('')
-const loadNextPageMock = vi.fn()
-const resetFiltersMock = vi.fn(() => {
-  textFilterValue.value = ''
-  debouncedTextFilterValue.value = ''
-  severityFilterValue.value = []
-  categoryFilterValue.value = []
-  diffTypeFilterValue.value = []
-  fromDateValue.value = ''
-  toDateValue.value = ''
-})
-const severityFilterValue = ref<string[]>([])
-const categoryFilterValue = ref<string[]>([])
-const diffTypeFilterValue = ref<string[]>([])
-const fromDateValue = ref('')
-const toDateValue = ref('')
-
-const timelineMock = {
-  state: computed(() => ({
-    status: timelineStatus.value,
-    data: timelineStatus.value === 'success' ? {} : undefined,
-    error: timelineErrValue.value,
-  })),
-  asyncStatus: computed(() => timelineAsyncStatusValue.value),
-  hasNextPage: computed(() => hasNextPageValue.value),
-  loadNextPage: loadNextPageMock,
-  severityFilter: severityFilterValue,
-  categoryFilter: categoryFilterValue,
-  diffTypeFilter: diffTypeFilterValue,
-  fromDate: fromDateValue,
-  toDate: toDateValue,
-  textFilter: textFilterValue,
-  debouncedTextFilter: debouncedTextFilterValue,
-  areDefaultFiltersApplied: computed(() => areDefaultFiltersAppliedValue.value),
-  resetFilters: resetFiltersMock,
-  allInventoryIds: computed(() => timelineGroups.value.flatMap((g) => g.inventory_ids)),
-  allGroups: computed(() => timelineGroups.value),
-  summary: computed(() => null),
-}
-
-const diffsStatus = ref<'pending' | 'success' | 'error'>('pending')
-const diffsErrValue = ref<Error | null>(null)
-const diffsData = ref<InventoryDiff[]>([])
-const diffsAsyncStatusValue = ref<'idle' | 'loading'>('idle')
-
-const diffsMock = {
-  state: computed(() => ({
-    status: diffsStatus.value,
-    data:
-      diffsStatus.value === 'success'
-        ? {
-            diffs: diffsData.value,
-            pagination: {},
-            // Mirror the real query's .then() which appends requestedInventoryIds so the
-            // component's stableDiffs watcher populates lastFetchedInventoryIds correctly,
-            // keeping diffsIsRefetching=false and allowing group headers to render.
-            requestedInventoryIds: timelineGroups.value.flatMap((g) => g.inventory_ids),
-          }
-        : undefined,
-    error: diffsErrValue.value,
-  })),
-  asyncStatus: computed(() => diffsAsyncStatusValue.value),
-}
-
-// ── vi.mock stubs ────────────────────────────────────────────────────────────
-
-vi.mock('@/queries/systems/inventoryTimeline', () => ({
-  useInventoryTimeline: () => timelineMock,
-}))
-
-vi.mock('@pinia/colada', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@pinia/colada')>()
-  return {
-    ...actual,
-    useQuery: vi.fn(() => diffsMock),
-    defineQuery: (fn: () => unknown) => fn,
-  }
-})
-
-vi.mock('@/lib/permissions', () => ({
-  canReadSystems: () => true,
-}))
-
-vi.mock('@/lib/systems/inventoryDiffs', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@/lib/systems/inventoryDiffs')>()
-  return { ...actual, getInventoryDiffs: vi.fn(() => new Promise(() => {})) }
-})
-
-// ── i18n (real translations) ─────────────────────────────────────────────────
-const i18n = createI18n({ legacy: false, locale: 'en', messages: { en: enMessages } })
-
-// ── Stubs for @nethesis/vue-components and FontAwesome ───────────────────────
-// NeButton renders as <button> so findAll('button') works.
-// NeInlineNotification renders its title prop so wrapper.text() assertions work.
-// NeTextInput renders a real <input> so setValue() works.
-// All others just pass slot content through.
-const neStubs = {
-  NeButton: { template: '<button @click="$emit(\'click\')"><slot /></button>' },
-  NeBadgeV2: { template: '<span><slot /></span>' },
-  NeDropdownFilter: { template: '<div />' },
-  NeInlineNotification: {
-    template: '<div role="alert">{{ title }}</div>',
-    props: ['title', 'description', 'kind'],
-  },
-  NeSkeleton: { template: '<div class="ne-skeleton" />' },
-  NeTextInput: {
-    template:
-      '<input :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)" />',
-    props: ['modelValue', 'isSearch', 'placeholder'],
-    emits: ['update:modelValue'],
-  },
-  NeSpinner: { template: '<span />' },
-  FontAwesomeIcon: { template: '<span />' },
-}
-
-// ── mountComponent ────────────────────────────────────────────────────────────
-async function mountComponent(router = makeRouter()): Promise<VueWrapper> {
-  await router.push('/systems/sys-test-1/detail')
-  await router.isReady()
-
-  const pinia = createPinia()
-  setActivePinia(pinia)
-
-  const wrapper = mount(SystemChangesTimeline, {
-    global: { plugins: [pinia, router, i18n], stubs: neStubs },
-  })
-
-  // Set jwtToken so query enabled guards pass
-  const loginStore = useLoginStore()
-  loginStore.jwtToken = 'mock-jwt-token'
-
-  return wrapper
-}
-
-function makeRouter() {
-  return createRouter({
-    history: createMemoryHistory(),
-    routes: [{ path: '/systems/:systemId/detail', component: { template: '<div/>' } }],
-  })
-}
-
-// ── resetToBaseline ───────────────────────────────────────────────────────────
-function resetToBaseline() {
-  intersectionObserverInstances.length = 0
-  timelineStatus.value = 'pending'
-  timelineErrValue.value = null
-  timelineGroups.value = []
-  timelineAsyncStatusValue.value = 'idle'
-  hasNextPageValue.value = false
-  areDefaultFiltersAppliedValue.value = true
-  loadNextPageMock.mockReset()
-  resetFiltersMock.mockClear()
-  textFilterValue.value = ''
-  debouncedTextFilterValue.value = ''
-  severityFilterValue.value = []
-  categoryFilterValue.value = []
-  diffTypeFilterValue.value = []
-  fromDateValue.value = ''
-  toDateValue.value = ''
-  diffsStatus.value = 'pending'
-  diffsErrValue.value = null
-  diffsData.value = []
-  diffsAsyncStatusValue.value = 'idle'
-}
-
-// ── Sample data helpers ───────────────────────────────────────────────────────
-const today = new Date().toISOString().slice(0, 10)
-const yesterday = new Date(Date.now() - 86_400_000).toISOString().slice(0, 10)
-
-function makeGroup(date: string, changeCount: number, inventoryIds: number[]): TimelineGroup {
-  return {
-    date,
-    inventory_count: inventoryIds.length,
-    change_count: changeCount,
-    inventory_ids: inventoryIds,
-  }
-}
-
-function makeDiff(overrides: Partial<InventoryDiff> = {}): InventoryDiff {
-  return {
-    id: 1,
-    system_id: 'sys-test-1',
-    previous_inventory_id: 9,
-    inventory_id: 10,
-    diff_type: 'update',
-    field_path: 'os.kernel_version',
-    previous_value: '5.15.0-89',
-    current_value: '5.15.0-91',
-    severity: 'low',
-    category: 'os',
-    notification_sent: false,
-    created_at: '2026-03-24T08:00:00Z',
-    ...overrides,
-  }
-}
-
-// Helper: mount with timeline data already set, then activate diffs after mount
-// so the non-immediate diffsState watcher fires and stableDiffs gets populated.
-async function mountWithDiffs(
-  groups: TimelineGroup[],
-  diffs: InventoryDiff[],
-): Promise<VueWrapper> {
-  timelineStatus.value = 'success'
-  timelineGroups.value = groups
-  // Keep diffs pending at mount time so the watcher fires when we set success below
-  const wrapper = await mountComponent()
-  diffsStatus.value = 'success'
-  diffsData.value = diffs
-  await wrapper.vm.$nextTick()
-  await wrapper.vm.$nextTick()
-  return wrapper
-}
-
-// ── Tests ─────────────────────────────────────────────────────────────────────
-
-describe('SystemChangesTimeline', () => {
-  beforeEach(() => {
-    resetToBaseline()
-  })
-
-  // ── Loading skeleton ───────────────────────────────────────────────────────
-
-  describe('loading skeleton', () => {
-    it('renders skeletons while timeline is pending', async () => {
-      // timelineStatus stays 'pending' (baseline)
-      const wrapper = await mountComponent()
-      expect(wrapper.findAll('.ne-skeleton').length).toBeGreaterThan(0)
-    })
-
-    it('does not render timeline content while loading', async () => {
-      const wrapper = await mountComponent()
-      expect(wrapper.text()).not.toContain('Today')
-      expect(wrapper.text()).not.toContain('No change history')
-    })
-  })
-
-  // ── Error notifications ────────────────────────────────────────────────────
-
-  describe('error notifications', () => {
-    it('shows timeline error notification when timeline query fails', async () => {
-      timelineStatus.value = 'error'
-      timelineErrValue.value = new Error('Network error')
-      // Set diffs to success so diffsIsLoading=false and the skeleton is not shown
-      diffsStatus.value = 'success'
-      const wrapper = await mountComponent()
-      expect(wrapper.text()).toContain('Cannot retrieve inventory timeline')
-    })
-
-    it('shows diffs error notification when diffs query fails', async () => {
-      timelineStatus.value = 'success'
-      timelineGroups.value = [makeGroup(today, 1, [10])]
-      diffsStatus.value = 'error'
-      diffsErrValue.value = new Error('Diffs failed')
-      const wrapper = await mountComponent()
-      expect(wrapper.text()).toContain('Cannot retrieve inventory diffs')
-    })
-  })
-
-  // ── Empty state ────────────────────────────────────────────────────────────
-
-  describe('empty state', () => {
-    it('shows "No change history" with no-filters description on first use', async () => {
-      timelineStatus.value = 'success'
-      // no groups → allGroups empty → isTimelineEmpty = true
-      diffsStatus.value = 'success'
-      areDefaultFiltersAppliedValue.value = true
-      const wrapper = await mountComponent()
-      expect(wrapper.text()).toContain('No change history')
-      expect(wrapper.text()).toContain('The system has not reported any changes yet.')
-    })
-
-    it('shows filter description when filters are active and timeline is empty', async () => {
-      timelineStatus.value = 'success'
-      diffsStatus.value = 'success'
-      areDefaultFiltersAppliedValue.value = false
-      const wrapper = await mountComponent()
-      expect(wrapper.text()).toContain('No change history')
-      expect(wrapper.text()).toContain('No changes match the current filters.')
-    })
-
-    it('shows a Reset filters button in the empty state when filters are active', async () => {
-      timelineStatus.value = 'success'
-      diffsStatus.value = 'success'
-      areDefaultFiltersAppliedValue.value = false
-      const wrapper = await mountComponent()
-      const resetButtons = wrapper
-        .findAll('button')
-        .filter((b) => b.text().includes('Reset filters'))
-      // At least the empty-state Reset button (filter bar also has one, so ≥ 2)
-      expect(resetButtons.length).toBeGreaterThanOrEqual(2)
-    })
-
-    it('clicking Reset filters in empty state calls resetFilters', async () => {
-      timelineStatus.value = 'success'
-      diffsStatus.value = 'success'
-      areDefaultFiltersAppliedValue.value = false
-      const wrapper = await mountComponent()
-      const resetButtons = wrapper
-        .findAll('button')
-        .filter((b) => b.text().includes('Reset filters'))
-      await resetButtons[0].trigger('click')
-      expect(resetFiltersMock).toHaveBeenCalled()
-    })
-  })
-
-  // ── Today row ─────────────────────────────────────────────────────────────
-
-  describe('today row', () => {
-    it('renders "Today" and "No changes" when today has change_count === 0', async () => {
-      // Today has 0 changes; include a historical group so isTimelineEmpty is false
-      timelineStatus.value = 'success'
-      timelineGroups.value = [makeGroup(today, 0, []), makeGroup('2026-03-20', 1, [10])]
-      diffsStatus.value = 'success'
-      const wrapper = await mountComponent()
-      expect(wrapper.text()).toContain('Today')
-      expect(wrapper.text()).toContain('No changes')
-    })
-
-    it('renders "Today" with a change count toggle when today has changes', async () => {
-      timelineStatus.value = 'success'
-      timelineGroups.value = [makeGroup(today, 2, [10, 11])]
-      diffsStatus.value = 'success'
-      const wrapper = await mountComponent()
-      expect(wrapper.text()).toContain('Today')
-      expect(wrapper.text()).toContain('2 changes')
-    })
-  })
-
-  // ── Historical date group ──────────────────────────────────────────────────
-
-  describe('historical date group', () => {
-    it('renders a historical date group with "1 change" toggle', async () => {
-      timelineStatus.value = 'success'
-      timelineGroups.value = [makeGroup('2026-03-20', 1, [10])]
-      diffsStatus.value = 'success'
-      const wrapper = await mountComponent()
-      expect(wrapper.text()).toContain('1 change')
-    })
-
-    it('renders "{n} changes" text for a group with multiple changes', async () => {
-      timelineStatus.value = 'success'
-      timelineGroups.value = [makeGroup('2026-03-20', 5, [10, 11, 12, 13, 14])]
-      diffsStatus.value = 'success'
-      const wrapper = await mountComponent()
-      expect(wrapper.text()).toContain('5 changes')
-    })
-  })
-
-  // ── Group expand / collapse ────────────────────────────────────────────────
-
-  describe('group expand / collapse', () => {
-    it('groups are auto-expanded on load (field_path visible immediately)', async () => {
-      const diff = makeDiff({ inventory_id: 10, field_path: 'os.kernel_version' })
-      const wrapper = await mountWithDiffs([makeGroup('2026-03-20', 1, [10])], [diff])
-      expect(wrapper.text()).toContain('os.kernel_version')
-    })
-
-    it('clicking the group toggle collapses an expanded group', async () => {
-      const diff = makeDiff({ inventory_id: 10, field_path: 'os.kernel_version' })
-      const wrapper = await mountWithDiffs([makeGroup('2026-03-20', 1, [10])], [diff])
-      const btn = wrapper.findAll('button').find((b) => b.text().includes('1 change'))
-      await btn!.trigger('click')
-      await wrapper.vm.$nextTick()
-      expect(wrapper.text()).not.toContain('os.kernel_version')
-    })
-
-    it('clicking the group toggle again re-expands it', async () => {
-      const diff = makeDiff({ inventory_id: 10, field_path: 'os.kernel_version' })
-      const wrapper = await mountWithDiffs([makeGroup('2026-03-20', 1, [10])], [diff])
-      const btn = wrapper.findAll('button').find((b) => b.text().includes('1 change'))
-      await btn!.trigger('click')
-      await wrapper.vm.$nextTick()
-      await btn!.trigger('click')
-      await wrapper.vm.$nextTick()
-      expect(wrapper.text()).toContain('os.kernel_version')
-    })
-  })
-
-  // ── Gap badge ─────────────────────────────────────────────────────────────
-
-  describe('gap badge', () => {
-    it('renders a gap badge with the correct day count between two groups', async () => {
-      // 2026-03-20 → 2026-03-15: gap = (20 - 15) - 1 = 4 days
-      timelineStatus.value = 'success'
-      timelineGroups.value = [makeGroup('2026-03-20', 1, [20]), makeGroup('2026-03-15', 1, [15])]
-      diffsStatus.value = 'success'
-      const wrapper = await mountComponent()
-      expect(wrapper.text()).toContain('days, no changes')
-    })
-
-    it('renders "1 day, no changes" for a 1-day gap', async () => {
-      // 2026-03-20 → 2026-03-18: gap = (20 - 18) - 1 = 1 day
-      timelineStatus.value = 'success'
-      timelineGroups.value = [makeGroup('2026-03-20', 1, [20]), makeGroup('2026-03-18', 1, [18])]
-      diffsStatus.value = 'success'
-      const wrapper = await mountComponent()
-      expect(wrapper.text()).toContain('1 day, no changes')
-    })
-
-    it('renders no gap badge when groups are adjacent (0-day gap)', async () => {
-      // today → yesterday: gap = 1 - 1 = 0 (newerIsToday = isToday && change_count===0 = false)
-      timelineStatus.value = 'success'
-      timelineGroups.value = [makeGroup(today, 1, [1]), makeGroup(yesterday, 1, [2])]
-      diffsStatus.value = 'success'
-      const wrapper = await mountComponent()
-      // 'no changes' (lowercase) only appears in gap badge text, not in day-group headers
-      expect(wrapper.text()).not.toContain('no changes')
-    })
-  })
-
-  // ── Diff rendering: update ─────────────────────────────────────────────────
-
-  describe('update diff', () => {
-    async function setupUpdateDiff() {
-      const diff = makeDiff({
-        id: 1,
-        inventory_id: 10,
-        diff_type: 'update',
-        field_path: 'os.kernel',
-        previous_value: '5.15.0-89',
-        current_value: '5.15.0-91',
-        severity: 'low',
-        category: 'os',
-      })
-      const wrapper = await mountWithDiffs([makeGroup('2026-03-20', 1, [10])], [diff])
-      // Expand the diff detail row
-      const diffHeader = wrapper.find('[class*="cursor-pointer"]')
-      await diffHeader.trigger('click')
-      await wrapper.vm.$nextTick()
-      return wrapper
-    }
-
-    it('shows previous value and new value for an update diff', async () => {
-      const wrapper = await setupUpdateDiff()
-      expect(wrapper.text()).toContain('5.15.0-89')
-      expect(wrapper.text()).toContain('5.15.0-91')
-    })
-
-    it('renders blue left border class for update diff', async () => {
-      const wrapper = await setupUpdateDiff()
-      expect(wrapper.find('[class*="border-l-blue-700"]').exists()).toBe(true)
-    })
-
-    it('shows the field_path in the diff header', async () => {
-      const wrapper = await setupUpdateDiff()
-      expect(wrapper.text()).toContain('os.kernel')
-    })
-
-    it('shows the category label', async () => {
-      const wrapper = await setupUpdateDiff()
-      expect(wrapper.text()).toContain('OS')
-    })
-
-    it('shows the severity badge label', async () => {
-      const wrapper = await setupUpdateDiff()
-      expect(wrapper.text()).toContain('Low')
-    })
-  })
-
-  // ── Diff rendering: create ─────────────────────────────────────────────────
-
-  describe('create diff', () => {
-    async function setupCreateDiff(currentValue: unknown = 'new-value') {
-      const diff = makeDiff({
-        id: 2,
-        inventory_id: 10,
-        diff_type: 'create',
-        field_path: 'modules[5]',
-        previous_value: null,
-        current_value: currentValue,
-        severity: 'critical',
-        category: 'modules',
-      })
-      const wrapper = await mountWithDiffs([makeGroup('2026-03-20', 1, [10])], [diff])
-      const diffHeader = wrapper.find('[class*="cursor-pointer"]')
-      await diffHeader.trigger('click')
-      await wrapper.vm.$nextTick()
-      return wrapper
-    }
-
-    it('renders a green background panel for a create diff', async () => {
-      const wrapper = await setupCreateDiff()
-      expect(wrapper.find('[class*="bg-green-50"]').exists()).toBe(true)
-    })
-
-    it('renders green left border class for a create diff', async () => {
-      const wrapper = await setupCreateDiff()
-      expect(wrapper.find('[class*="border-l-green-500"]').exists()).toBe(true)
-    })
-
-    it('renders object current_value as individual key/value lines', async () => {
-      const wrapper = await setupCreateDiff({ name: 'nethserver-fail2ban', version: '1.2.3' })
-      expect(wrapper.text()).toContain('"name"')
-      expect(wrapper.text()).toContain('"version"')
-    })
-  })
-
-  // ── Diff rendering: delete ─────────────────────────────────────────────────
-
-  describe('delete diff', () => {
-    async function setupDeleteDiff(previousValue: unknown = { ip: '192.168.1.1', mtu: 1500 }) {
-      const diff = makeDiff({
-        id: 3,
-        inventory_id: 10,
-        diff_type: 'delete',
-        field_path: 'network.interfaces.eth1',
-        previous_value: previousValue,
-        current_value: null,
-        severity: 'high',
-        category: 'network',
-      })
-      const wrapper = await mountWithDiffs([makeGroup('2026-03-20', 1, [10])], [diff])
-      const diffHeader = wrapper.find('[class*="cursor-pointer"]')
-      await diffHeader.trigger('click')
-      await wrapper.vm.$nextTick()
-      return wrapper
-    }
-
-    it('renders a rose background panel for a delete diff', async () => {
-      const wrapper = await setupDeleteDiff()
-      expect(wrapper.find('[class*="bg-rose-50"]').exists()).toBe(true)
-    })
-
-    it('renders red left border class for a delete diff', async () => {
-      const wrapper = await setupDeleteDiff()
-      expect(wrapper.find('[class*="border-l-red-500"]').exists()).toBe(true)
-    })
-
-    it('renders object previous_value as individual key/value lines', async () => {
-      const wrapper = await setupDeleteDiff({ ip: '192.168.1.1', mtu: 1500 })
-      expect(wrapper.text()).toContain('"ip"')
-      expect(wrapper.text()).toContain('"mtu"')
-    })
-  })
-
-  // ── Diff expand / collapse ─────────────────────────────────────────────────
-
-  describe('diff expand / collapse', () => {
-    it('diff detail panel is hidden before clicking the diff header', async () => {
-      const diff = makeDiff({ id: 1, inventory_id: 10 })
-      const wrapper = await mountWithDiffs([makeGroup('2026-03-20', 1, [10])], [diff])
-      // The expanded detail panel has a top border
-      expect(wrapper.find('[class*="border-t border-gray-100"]').exists()).toBe(false)
-    })
-
-    it('diff detail panel appears after clicking the diff header', async () => {
-      const diff = makeDiff({
-        id: 1,
-        inventory_id: 10,
-        previous_value: 'old',
-        current_value: 'new',
-      })
-      const wrapper = await mountWithDiffs([makeGroup('2026-03-20', 1, [10])], [diff])
-      await wrapper.find('[class*="cursor-pointer"]').trigger('click')
-      await wrapper.vm.$nextTick()
-      expect(wrapper.find('[class*="border-t border-gray-100"]').exists()).toBe(true)
-    })
-
-    it('diff detail panel collapses when the header is clicked a second time', async () => {
-      const diff = makeDiff({ id: 1, inventory_id: 10 })
-      const wrapper = await mountWithDiffs([makeGroup('2026-03-20', 1, [10])], [diff])
-      const header = wrapper.find('[class*="cursor-pointer"]')
-      await header.trigger('click')
-      await wrapper.vm.$nextTick()
-      await header.trigger('click')
-      await wrapper.vm.$nextTick()
-      expect(wrapper.find('[class*="border-t border-gray-100"]').exists()).toBe(false)
-    })
-  })
-
-  // ── Severity badge kinds ───────────────────────────────────────────────────
-
-  describe('severity badge rendering', () => {
-    const severityCases: Array<[InventoryDiff['severity'], string]> = [
-      ['critical', 'Critical'],
-      ['high', 'High'],
-      ['medium', 'Medium'],
-      ['low', 'Low'],
-    ]
-
-    for (const [severity, label] of severityCases) {
-      it(`renders "${label}" label for ${severity} severity`, async () => {
-        const diff = makeDiff({ id: 1, inventory_id: 10, severity })
-        const wrapper = await mountWithDiffs([makeGroup('2026-03-20', 1, [10])], [diff])
-        expect(wrapper.text()).toContain(label)
-      })
-    }
-  })
-
-  // ── Text filter ────────────────────────────────────────────────────────────
-
-  describe('text filter', () => {
-    it('filters diffs by field_path substring', async () => {
-      const diff1 = makeDiff({ id: 1, inventory_id: 10, field_path: 'os.kernel_version' })
-      const diff2 = makeDiff({ id: 2, inventory_id: 10, field_path: 'hardware.cpu.cores' })
-      const wrapper = await mountWithDiffs([makeGroup('2026-03-20', 2, [10])], [diff1, diff2])
-
-      // Simulate debounce completing: the component resets stableDiffs when
-      // debouncedTextFilter changes, then the server returns only matching diffs.
-      debouncedTextFilterValue.value = 'kernel'
-      await wrapper.vm.$nextTick() // stableDiffs resets to []
-      diffsData.value = [diff1] // server returns only the matching diff
-      await wrapper.vm.$nextTick()
-      await wrapper.vm.$nextTick()
-
-      expect(wrapper.text()).toContain('os.kernel_version')
-      expect(wrapper.text()).not.toContain('hardware.cpu.cores')
-    })
-
-    it('shows "Try changing your search filters" when nothing matches', async () => {
-      // diffsStatus='success' set BEFORE mount keeps diffsHaveEverLoaded=false
-      // (the non-immediate watcher only fires on *changes*, not the initial value).
-      // stableDiffs is therefore empty, so the expanded group renders 0 diffs and
-      // shows the per-group "Try changing" message regardless of the text input.
-      timelineStatus.value = 'success'
-      timelineGroups.value = [makeGroup('2026-03-20', 1, [10])]
-      diffsStatus.value = 'success'
-      const wrapper = await mountComponent()
-
-      await wrapper.find('input').setValue('zzznomatch')
-      await wrapper.vm.$nextTick()
-
-      expect(wrapper.text()).toContain('Try changing your search filters')
-    })
-
-    it('updates the displayed change count to reflect filtered results', async () => {
-      const diff1 = makeDiff({ id: 1, inventory_id: 10, field_path: 'os.kernel_version' })
-      const diff2 = makeDiff({ id: 2, inventory_id: 10, field_path: 'hardware.cpu.cores' })
-      const wrapper = await mountWithDiffs([makeGroup('2026-03-20', 2, [10])], [diff1, diff2])
-
-      expect(wrapper.text()).toContain('2 changes')
-
-      // Simulate server response: updated timeline (change_count=1) and filtered diffs
-      debouncedTextFilterValue.value = 'kernel'
-      await wrapper.vm.$nextTick() // stableDiffs resets
-      timelineGroups.value = [makeGroup('2026-03-20', 1, [10])] // server reports 1 match
-      diffsData.value = [diff1] // server returns matching diff
-      await wrapper.vm.$nextTick()
-      await wrapper.vm.$nextTick()
-
-      expect(wrapper.text()).toContain('1 change')
-      expect(wrapper.text()).not.toContain('2 changes')
-    })
-  })
-
-  // ── formatDiffValue rendering ──────────────────────────────────────────────
-
-  describe('formatDiffValue', () => {
-    async function expandUpdateDiff(previousValue: unknown, currentValue: unknown) {
-      const diff = makeDiff({
-        id: 1,
-        inventory_id: 10,
-        diff_type: 'update',
-        previous_value: previousValue,
-        current_value: currentValue,
-      })
-      const wrapper = await mountWithDiffs([makeGroup('2026-03-20', 1, [10])], [diff])
-      await wrapper.find('[class*="cursor-pointer"]').trigger('click')
-      await wrapper.vm.$nextTick()
-      return wrapper
-    }
-
-    it('renders — for a null value', async () => {
-      const wrapper = await expandUpdateDiff(null, 'new-value')
-      expect(wrapper.text()).toContain('—')
-    })
-
-    it('renders — for an empty string value', async () => {
-      const wrapper = await expandUpdateDiff('', 'new-value')
-      expect(wrapper.text()).toContain('—')
-    })
-
-    it('renders a JSON-stringified form for object values', async () => {
-      const wrapper = await expandUpdateDiff({ key: 'val' }, 'new')
-      expect(wrapper.text()).toContain('"key"')
-    })
-  })
-
-  // ── objectToLines rendering ────────────────────────────────────────────────
-
-  describe('objectToLines', () => {
-    it('renders a plain object as one line per key in a create diff', async () => {
-      const diff = makeDiff({
-        id: 1,
-        inventory_id: 10,
-        diff_type: 'create',
-        previous_value: null,
-        current_value: { a: 1, b: 'hello', c: true },
-      })
-      const wrapper = await mountWithDiffs([makeGroup('2026-03-20', 1, [10])], [diff])
-      await wrapper.find('[class*="cursor-pointer"]').trigger('click')
-      await wrapper.vm.$nextTick()
-      expect(wrapper.text()).toContain('"a"')
-      expect(wrapper.text()).toContain('"b"')
-      expect(wrapper.text()).toContain('"c"')
-    })
-
-    it('renders an array as a single JSON line (not split by key)', async () => {
-      const diff = makeDiff({
-        id: 1,
-        inventory_id: 10,
-        diff_type: 'create',
-        previous_value: null,
-        current_value: ['x', 'y'],
-      })
-      const wrapper = await mountWithDiffs([makeGroup('2026-03-20', 1, [10])], [diff])
-      await wrapper.find('[class*="cursor-pointer"]').trigger('click')
-      await wrapper.vm.$nextTick()
-      expect(wrapper.text()).toContain('["x","y"]')
-    })
-  })
-
-  // ── Infinite scroll ─────────────────────────────────────────────────────────
-
-  describe('infinite scroll', () => {
-    it('calls loadNextPage when the trigger element enters the viewport', async () => {
-      timelineStatus.value = 'success'
-      timelineGroups.value = [makeGroup('2026-03-20', 1, [10])]
-      hasNextPageValue.value = true
-      diffsStatus.value = 'success'
-      await mountComponent()
-      await Promise.resolve() // let the loadMoreTrigger watcher flush
-
-      // The component creates one IntersectionObserver for the trigger element
-      const observer = intersectionObserverInstances[0]
-      expect(observer).toBeDefined()
-      expect(observer.observe).toHaveBeenCalled()
-
-      // Simulate the trigger element scrolling into view
-      observer.callback(
-        [{ isIntersecting: true } as IntersectionObserverEntry],
-        observer as unknown as IntersectionObserver,
-      )
-
-      expect(loadNextPageMock).toHaveBeenCalledOnce()
-    })
-
-    it('does NOT call loadNextPage when the trigger element leaves the viewport', async () => {
-      timelineStatus.value = 'success'
-      timelineGroups.value = [makeGroup('2026-03-20', 1, [10])]
-      hasNextPageValue.value = true
-      diffsStatus.value = 'success'
-      await mountComponent()
-      await Promise.resolve()
-
-      const observer = intersectionObserverInstances[0]
-      observer.callback(
-        [{ isIntersecting: false } as IntersectionObserverEntry],
-        observer as unknown as IntersectionObserver,
-      )
-
-      expect(loadNextPageMock).not.toHaveBeenCalled()
-    })
-
-    it('does not create an IntersectionObserver when hasNextPage is false', async () => {
-      timelineStatus.value = 'success'
-      timelineGroups.value = [makeGroup('2026-03-20', 1, [10])]
-      hasNextPageValue.value = false
-      diffsStatus.value = 'success'
-      await mountComponent()
-      await Promise.resolve()
-
-      expect(intersectionObserverInstances.length).toBe(0)
-    })
-  })
-
-  // ── Load more UI ───────────────────────────────────────────────────────────
-
-  describe('load more trigger', () => {
-    it('shows the loading indicator when hasNextPage=true and async status is loading', async () => {
-      timelineStatus.value = 'success'
-      timelineGroups.value = [makeGroup('2026-03-20', 1, [10])]
-      hasNextPageValue.value = true
-      timelineAsyncStatusValue.value = 'loading'
-      diffsStatus.value = 'success'
-      const wrapper = await mountComponent()
-      expect(wrapper.text()).toContain('Loading...')
-    })
-
-    it('does not render the load-more area when hasNextPage=false', async () => {
-      timelineStatus.value = 'success'
-      timelineGroups.value = [makeGroup('2026-03-20', 1, [10])]
-      hasNextPageValue.value = false
-      diffsStatus.value = 'success'
-      const wrapper = await mountComponent()
-      expect(wrapper.text()).not.toContain('Loading...')
-    })
-
-    it('does not show the loading indicator when async status is idle', async () => {
-      timelineStatus.value = 'success'
-      timelineGroups.value = [makeGroup('2026-03-20', 1, [10])]
-      hasNextPageValue.value = true
-      timelineAsyncStatusValue.value = 'idle'
-      diffsStatus.value = 'success'
-      const wrapper = await mountComponent()
-      expect(wrapper.text()).not.toContain('Loading...')
-    })
-  })
-
-  // ── Filter bar Reset button ────────────────────────────────────────────────
-
-  describe('filter bar Reset filters button', () => {
-    it('calls resetFilters when the filter bar Reset button is clicked', async () => {
-      timelineStatus.value = 'success'
-      timelineGroups.value = [makeGroup('2026-03-20', 1, [10])]
-      diffsStatus.value = 'success'
-      const wrapper = await mountComponent()
-
-      const resetBtn = wrapper.findAll('button').find((b) => b.text().includes('Reset filters'))
-      await resetBtn!.trigger('click')
-
-      expect(resetFiltersMock).toHaveBeenCalled()
-    })
-
-    it('clears the text filter when Reset filters is clicked', async () => {
-      timelineStatus.value = 'success'
-      timelineGroups.value = [makeGroup('2026-03-20', 1, [10])]
-      diffsStatus.value = 'success'
-      const wrapper = await mountComponent()
-
-      await wrapper.find('input').setValue('some-filter')
-      await wrapper.vm.$nextTick()
-
-      const resetBtn = wrapper.findAll('button').find((b) => b.text().includes('Reset filters'))
-      await resetBtn!.trigger('click')
-      await wrapper.vm.$nextTick()
-
-      expect((wrapper.find('input').element as HTMLInputElement).value).toBe('')
-    })
-  })
-})
diff --git a/frontend/src/components/systems/SystemChangesTimeline.vue b/frontend/src/components/systems/SystemChangesTimeline.vue
index 130f48f50..ff3d01172 100644
--- a/frontend/src/components/systems/SystemChangesTimeline.vue
+++ b/frontend/src/components/systems/SystemChangesTimeline.vue
@@ -5,6 +5,7 @@
 
 <script setup lang="ts">
 import { useInventoryTimeline } from '@/queries/systems/inventoryTimeline'
+import { useInventoryChanges } from '@/queries/systems/inventoryChanges'
 import {
   INVENTORY_DIFFS_KEY,
   getInventoryDiffs,
@@ -32,6 +33,7 @@ import {
 } from '@nethesis/vue-components'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import UpdatingSpinner from '@/components/UpdatingSpinner.vue'
+import { VueDatePicker } from '@vuepic/vue-datepicker'
 import {
   faChevronDown,
   faChevronUp,
@@ -42,10 +44,12 @@ import {
   faAngleUp,
   faArrowRight,
 } from '@fortawesome/free-solid-svg-icons'
+import { useThemeStore } from '@/stores/theme'
 
 const { t, locale } = useI18n()
 const route = useRoute()
 const loginStore = useLoginStore()
+const themeStore = useThemeStore()
 
 // ── Timeline infinite query ──────────────────────────────────────────────────
 const {
@@ -64,9 +68,10 @@ const {
   resetFilters: resetTimelineFilters,
   allInventoryIds,
   allGroups,
-  summary,
 } = useInventoryTimeline()
 
+const { state: inventoryChangesState } = useInventoryChanges()
+
 // ── Local state ──────────────────────────────────────────────────────────────
 const expandedGroups = ref<Set<string>>(new Set())
 const expandedDiffs = ref<Set<number>>(new Set())
@@ -132,7 +137,7 @@ watch(
 // ── Filter options ────────────────────────────────────────────────────────────
 const severityFilterOptions = computed<FilterOption[]>(() =>
   (['critical', 'high', 'medium', 'low'] as const)
-    .filter((s) => (summary.value?.[s] ?? 0) > 0)
+    .filter((s) => (inventoryChangesState.value.data?.changes_by_severity?.[s] ?? 0) > 0)
     .map((s) => ({ id: s, label: t(`system_detail.severity_${s}`) })),
 )
 
@@ -407,6 +412,15 @@ function getCategoryLabel(category: InventoryDiffCategory): string {
   return t(`system_detail.category_${category}`)
 }
 
+// ── Date range model (bridges fromDate/toDate refs to VueDatePicker range) ────
+const dateRangeModel = computed<string[] | null>({
+  get: () => (fromDate.value || toDate.value ? [fromDate.value || '', toDate.value || ''] : null),
+  set: (val: string[] | null) => {
+    fromDate.value = val?.[0] ?? ''
+    toDate.value = val?.[1] ?? ''
+  },
+})
+
 // ── Reset all filters ─────────────────────────────────────────────────────────
 function resetAllFilters() {
   resetTimelineFilters()
@@ -504,28 +518,30 @@ const diffTypeFilterModel = computed<string[]>({
           :more-options-hidden-label="t('ne_dropdown_filter.more_options_hidden')"
           :clear-search-label="t('ne_dropdown_filter.clear_search')"
         />
-        <!-- Date range: from -->
-        <div class="flex items-center gap-2">
-          <label class="text-sm text-gray-500 dark:text-gray-400">{{
-            t('system_detail.from_date')
-          }}</label>
-          <input
-            v-model="fromDate"
-            type="date"
-            class="rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 focus:ring-2 focus:ring-sky-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-gray-300"
-          />
-        </div>
-        <!-- Date range: to -->
-        <div class="flex items-center gap-2">
-          <label class="text-sm text-gray-500 dark:text-gray-400">{{
-            t('system_detail.to_date')
-          }}</label>
-          <input
-            v-model="toDate"
-            type="date"
-            class="rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-700 focus:ring-2 focus:ring-sky-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-gray-300"
-          />
-        </div>
+        <!-- Date range picker -->
+        <VueDatePicker
+          v-model="dateRangeModel"
+          range
+          model-type="yyyy-MM-dd"
+          :time-config="{ enableTimePicker: false }"
+          auto-apply
+          :dark="!themeStore.isLight"
+          class="vue-datepicker"
+        >
+          <template #trigger>
+            <div class="inline-block">
+              <button
+                class="focus:ring-primary-500 dark:focus:ring-primary-300 dark:focus:ring-offset-primary-950 rounded-md px-2.5 py-1.5 text-sm font-medium text-gray-700 shadow-sm ring-1 ring-gray-300 transition-colors duration-200 hover:bg-gray-200/70 hover:text-gray-800 focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:text-gray-100 dark:ring-gray-500 dark:hover:bg-gray-600/30 dark:hover:text-gray-50"
+                type="button"
+              >
+                <span class="flex items-center justify-center">
+                  {{ t('system_detail.date_range') }}
+                  <FontAwesomeIcon :icon="faChevronDown" class="ml-2 h-3 w-3" aria-hidden="true" />
+                </span>
+              </button>
+            </div>
+          </template>
+        </VueDatePicker>
         <!-- Reset filters -->
         <NeButton kind="tertiary" @click="resetAllFilters">
           {{ t('common.reset_filters') }}
diff --git a/frontend/src/i18n/en/translation.json b/frontend/src/i18n/en/translation.json
index 1db1cb014..68da15ecd 100644
--- a/frontend/src/i18n/en/translation.json
+++ b/frontend/src/i18n/en/translation.json
@@ -537,8 +537,7 @@
     "severity": "Severity",
     "category": "Category",
     "change_type": "Change type",
-    "from_date": "From",
-    "to_date": "To",
+    "date_range": "Date range",
     "cannot_retrieve_inventory_timeline": "Cannot retrieve inventory timeline",
     "cannot_retrieve_inventory_diffs": "Cannot retrieve inventory diffs",
     "previous_value": "Previous value",
diff --git a/frontend/src/lib/systems/inventoryDiffs.ts b/frontend/src/lib/systems/inventoryDiffs.ts
index f84df9ea3..e2cfe4429 100644
--- a/frontend/src/lib/systems/inventoryDiffs.ts
+++ b/frontend/src/lib/systems/inventoryDiffs.ts
@@ -71,11 +71,11 @@ const getInventoryDiffsQueryStringParams = (
   inventoryId.forEach((id) => searchParams.append('inventory_id', id.toString()))
 
   if (fromDate.trim()) {
-    searchParams.append('from_date', fromDate)
+    searchParams.append('from_date', fromDate + 'T00:00:00Z')
   }
 
   if (toDate.trim()) {
-    searchParams.append('to_date', toDate)
+    searchParams.append('to_date', toDate + 'T23:59:59Z')
   }
 
   if (search.trim()) {
diff --git a/frontend/src/lib/systems/inventoryTimeline.ts b/frontend/src/lib/systems/inventoryTimeline.ts
index 50c5b100e..8a4eb87d9 100644
--- a/frontend/src/lib/systems/inventoryTimeline.ts
+++ b/frontend/src/lib/systems/inventoryTimeline.ts
@@ -59,11 +59,11 @@ const getInventoryTimelineQueryStringParams = (
   diffType.forEach((d) => searchParams.append('diff_type', d))
 
   if (fromDate.trim()) {
-    searchParams.append('from_date', fromDate)
+    searchParams.append('from_date', fromDate + 'T00:00:00Z')
   }
 
   if (toDate.trim()) {
-    searchParams.append('to_date', toDate)
+    searchParams.append('to_date', toDate + 'T23:59:59Z')
   }
 
   if (search.trim()) {
diff --git a/frontend/src/queries/systems/inventoryDiffs.ts b/frontend/src/queries/systems/inventoryDiffs.ts
index d194505df..3e6c49096 100644
--- a/frontend/src/queries/systems/inventoryDiffs.ts
+++ b/frontend/src/queries/systems/inventoryDiffs.ts
@@ -50,6 +50,8 @@ export const useInventoryDiffs = defineQuery(() => {
       },
     ],
     enabled: () => !!loginStore.jwtToken && canReadSystems() && !!route.params.systemId,
+    staleTime: 0,
+    gcTime: 0,
     query: () => {
       const apiCall = getInventoryDiffs(
         route.params.systemId as string,
diff --git a/frontend/src/queries/systems/inventoryTimeline.ts b/frontend/src/queries/systems/inventoryTimeline.ts
index 40df17f5d..5a5ba5146 100644
--- a/frontend/src/queries/systems/inventoryTimeline.ts
+++ b/frontend/src/queries/systems/inventoryTimeline.ts
@@ -42,6 +42,8 @@ export const useInventoryTimeline = defineQuery(() => {
       },
     ],
     enabled: () => !!loginStore.jwtToken && canReadSystems() && !!route.params.systemId,
+    staleTime: 0,
+    gcTime: 0,
     initialPageParam: 1,
     query: ({ pageParam }) => {
       const apiCall = getInventoryTimeline(

From 096b5b66d64280cc97bc4c6d1101295cbbe2edc0 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Fri, 27 Mar 2026 11:41:48 +0100
Subject: [PATCH 30/31] Improve system changes date picker

---
 frontend/src/assets/vue-datepicker.css        | 10 +++++++
 .../systems/SystemChangesTimeline.vue         | 27 ++++++++++++++++---
 2 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/frontend/src/assets/vue-datepicker.css b/frontend/src/assets/vue-datepicker.css
index b788cefd0..0790eb640 100644
--- a/frontend/src/assets/vue-datepicker.css
+++ b/frontend/src/assets/vue-datepicker.css
@@ -14,14 +14,24 @@
 .dp__theme_light {
   --dp-background-color: var(--color-white);
   --dp-primary-color: var(--color-primary-700);
+  --dp-menu-border-color: var(--color-gray-200);
+  --dp-hover-color: var(--color-gray-200);
 }
 
 .dp__theme_dark {
   --dp-background-color: var(--color-gray-950);
   --dp-primary-color: var(--color-primary-500);
   --dp-primary-text-color: var(--color-gray-950);
+  --dp-menu-border-color: var(--color-gray-700);
+  --dp-hover-color: var(--color-gray-800);
 }
 
 .dp__menu {
   box-shadow: var(--shadow-lg);
 }
+
+/* Hide the menu arrow */
+.dp__arrow_top,
+.dp__arrow_bottom {
+  display: none;
+}
diff --git a/frontend/src/components/systems/SystemChangesTimeline.vue b/frontend/src/components/systems/SystemChangesTimeline.vue
index ff3d01172..2ec2aa3d0 100644
--- a/frontend/src/components/systems/SystemChangesTimeline.vue
+++ b/frontend/src/components/systems/SystemChangesTimeline.vue
@@ -30,6 +30,7 @@ import {
   NeTextInput,
   type FilterOption,
   NeSpinner,
+  NeLink,
 } from '@nethesis/vue-components'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import UpdatingSpinner from '@/components/UpdatingSpinner.vue'
@@ -196,6 +197,9 @@ interface DisplayGroup {
 
 const today = todayDateString()
 
+// ── Date picker ref ─────────────────────────────────────────────────────────
+const datepicker = useTemplateRef<InstanceType<typeof VueDatePicker>>('datepicker')
+
 const displayGroups = computed<DisplayGroup[]>(() => {
   const groups = allGroups.value
   const result: DisplayGroup[] = []
@@ -423,9 +427,14 @@ const dateRangeModel = computed<string[] | null>({
 
 // ── Reset all filters ─────────────────────────────────────────────────────────
 function resetAllFilters() {
+  datepicker.value?.clearValue()
   resetTimelineFilters()
 }
 
+function clearDateRange() {
+  datepicker.value?.clearValue()
+}
+
 // ── Infinite scroll (IntersectionObserver) ────────────────────────────────────
 const loadMoreTrigger = useTemplateRef<HTMLElement>('loadMoreTrigger')
 
@@ -484,7 +493,6 @@ const diffTypeFilterModel = computed<string[]>({
           kind="checkbox"
           :label="t('system_detail.severity')"
           :options="severityFilterOptions"
-          :show-clear-filter="false"
           :clear-filter-label="t('ne_dropdown_filter.clear_filter')"
           :open-menu-aria-label="t('ne_dropdown_filter.open_filter')"
           :no-options-label="t('ne_dropdown_filter.no_options')"
@@ -498,7 +506,6 @@ const diffTypeFilterModel = computed<string[]>({
           :label="t('system_detail.category')"
           :options="categoryFilterOptions"
           show-options-filter
-          :show-clear-filter="false"
           :clear-filter-label="t('ne_dropdown_filter.clear_filter')"
           :open-menu-aria-label="t('ne_dropdown_filter.open_filter')"
           :no-options-label="t('ne_dropdown_filter.no_options')"
@@ -511,7 +518,6 @@ const diffTypeFilterModel = computed<string[]>({
           kind="checkbox"
           :label="t('system_detail.change_type')"
           :options="diffTypeFilterOptions"
-          :show-clear-filter="false"
           :clear-filter-label="t('ne_dropdown_filter.clear_filter')"
           :open-menu-aria-label="t('ne_dropdown_filter.open_filter')"
           :no-options-label="t('ne_dropdown_filter.no_options')"
@@ -520,9 +526,11 @@ const diffTypeFilterModel = computed<string[]>({
         />
         <!-- Date range picker -->
         <VueDatePicker
+          ref="datepicker"
           v-model="dateRangeModel"
           range
           model-type="yyyy-MM-dd"
+          :max-date="new Date()"
           :time-config="{ enableTimePicker: false }"
           auto-apply
           :dark="!themeStore.isLight"
@@ -541,6 +549,19 @@ const diffTypeFilterModel = computed<string[]>({
               </button>
             </div>
           </template>
+          <template #menu-header>
+            <!-- <span v-if="value">Selected date: {{ value.getDate() }}</span>
+            <span v-else>No date selected</span> ////  -->
+            <NeLink @click="clearDateRange" class="inline-block pt-3 pl-3">{{
+              t('ne_dropdown_filter.clear_filter')
+            }}</NeLink>
+          </template>
+          <!-- <template #action-extra="{ selectCurrentDate }"> ////
+            <button @click="selectCurrentDate()" title="Select current date">Today</button>
+          </template>
+          <template #clear-icon="{ clear }">
+            <button @click="clear">Clear</button>
+          </template> -->
         </VueDatePicker>
         <!-- Reset filters -->
         <NeButton kind="tertiary" @click="resetAllFilters">

From 336e68dd9bfa3e76a3d1a06fead1b634eb79a9d0 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Fri, 27 Mar 2026 14:10:14 +0100
Subject: [PATCH 31/31] Improve system changes timeline

---
 .../systems/SystemChangeHistoryPanel.vue      | 29 +--------------
 .../systems/SystemChangesTimeline.vue         | 18 +++++-----
 .../systems/SystemOverviewPanel.vue           | 35 +++++++++++++++++++
 3 files changed, 45 insertions(+), 37 deletions(-)

diff --git a/frontend/src/components/systems/SystemChangeHistoryPanel.vue b/frontend/src/components/systems/SystemChangeHistoryPanel.vue
index 121f16282..08312f8c8 100644
--- a/frontend/src/components/systems/SystemChangeHistoryPanel.vue
+++ b/frontend/src/components/systems/SystemChangeHistoryPanel.vue
@@ -4,7 +4,6 @@
 -->
 
 <script setup lang="ts">
-import CounterCard from '@/components/CounterCard.vue'
 import { useInventoryTimeline } from '@/queries/systems/inventoryTimeline'
 import { useI18n } from 'vue-i18n'
 import UpdatingSpinner from '../UpdatingSpinner.vue'
@@ -13,7 +12,7 @@ import SystemChangesTimeline from './SystemChangesTimeline.vue'
 
 const { t } = useI18n()
 
-const { state: timelineState, asyncStatus: timelineAsyncStatus, summary } = useInventoryTimeline()
+const { state: timelineState, asyncStatus: timelineAsyncStatus } = useInventoryTimeline()
 </script>
 
 <template>
@@ -34,32 +33,6 @@ const { state: timelineState, asyncStatus: timelineAsyncStatus, summary } = useI
     :description="timelineState.error.message"
     class="mb-6"
   />
-  <!-- change counters -->
-  <div class="mb-10 grid grid-cols-2 gap-6 sm:grid-cols-4">
-    <CounterCard
-      :title="t('system_detail.total_changes')"
-      :counter="summary?.total ?? 0"
-      :loading="timelineState.status === 'pending'"
-    />
-    <CounterCard
-      :title="t('system_detail.critical_changes')"
-      :counter="summary?.critical ?? 0"
-      :loading="timelineState.status === 'pending'"
-      color-classes="text-rose-700 dark:text-rose-500"
-    />
-    <CounterCard
-      :title="t('system_detail.high_changes')"
-      :counter="summary?.high ?? 0"
-      :loading="timelineState.status === 'pending'"
-      color-classes="text-orange-600 dark:text-orange-500"
-    />
-    <CounterCard
-      :title="t('system_detail.medium_changes')"
-      :counter="summary?.medium ?? 0"
-      :loading="timelineState.status === 'pending'"
-      color-classes="text-yellow-600 dark:text-yellow-700"
-    />
-  </div>
   <!-- changes timeline -->
   <SystemChangesTimeline />
 </template>
diff --git a/frontend/src/components/systems/SystemChangesTimeline.vue b/frontend/src/components/systems/SystemChangesTimeline.vue
index 2ec2aa3d0..aa78ff591 100644
--- a/frontend/src/components/systems/SystemChangesTimeline.vue
+++ b/frontend/src/components/systems/SystemChangesTimeline.vue
@@ -379,15 +379,15 @@ function getDiffTypeIcon(type: InventoryDiffType) {
 }
 
 function getDiffTypeIconBg(type: InventoryDiffType): string {
-  if (type === 'create') return 'bg-green-600'
-  if (type === 'delete') return 'bg-red-500'
-  return 'bg-blue-700'
+  if (type === 'create') return 'bg-green-500 dark:bg-green-400'
+  if (type === 'delete') return 'bg-red-700 dark:bg-red-500'
+  return 'bg-blue-700 dark:bg-blue-500'
 }
 
 function getDiffTypeBorder(type: InventoryDiffType): string {
-  if (type === 'create') return 'border-l-green-500'
-  if (type === 'delete') return 'border-l-red-500'
-  return 'border-l-blue-700'
+  if (type === 'create') return 'border-l-green-500 dark:border-l-green-400'
+  if (type === 'delete') return 'border-l-red-700 dark:border-l-red-500'
+  return 'border-l-blue-700 dark:border-l-blue-500'
 }
 
 //// use NeBadgeV2Kind as return type instead of string literal union
@@ -404,7 +404,7 @@ function getSeverityKind(
 
 function getSeverityCustomKindClasses(severity: InventoryDiffSeverity): string | undefined {
   if (severity === 'medium')
-    return 'bg-yellow-100 text-yellow-700 dark:bg-yellow-950 dark:text-yellow-400'
+    return 'bg-yellow-100 text-yellow-700 dark:bg-yellow-700 dark:text-yellow-100'
   return undefined
 }
 
@@ -655,7 +655,7 @@ const diffTypeFilterModel = computed<string[]>({
 
         <!-- Timeline dot (centered on the vertical line at left: 144px, dot size 10px → left: 139px) -->
         <div
-          class="absolute z-10 size-2.5 rounded-full"
+          class="absolute z-10 size-2.5 rounded-full ring-4 ring-gray-50 dark:ring-gray-900"
           :class="
             group.isToday ? 'bg-indigo-700 dark:bg-indigo-500' : 'bg-gray-300 dark:bg-gray-600'
           "
@@ -717,7 +717,7 @@ const diffTypeFilterModel = computed<string[]>({
                       >
                         <FontAwesomeIcon
                           :icon="getDiffTypeIcon(diff.diff_type)"
-                          class="size-3 text-white"
+                          class="size-3 text-white dark:text-gray-950"
                         />
                       </div>
                       <!-- Category -->
diff --git a/frontend/src/components/systems/SystemOverviewPanel.vue b/frontend/src/components/systems/SystemOverviewPanel.vue
index cc1bb2783..85bc92ca8 100644
--- a/frontend/src/components/systems/SystemOverviewPanel.vue
+++ b/frontend/src/components/systems/SystemOverviewPanel.vue
@@ -4,14 +4,20 @@
 -->
 
 <script setup lang="ts">
+import CounterCard from '@/components/CounterCard.vue'
+import { useInventoryChanges } from '@/queries/systems/inventoryChanges'
 import { useSystemDetail } from '@/queries/systems/systemDetail'
+import { useI18n } from 'vue-i18n'
 import SystemApplicationsCard from './SystemApplicationsCard.vue'
 import SystemInfoCard from './SystemInfoCard.vue'
 import SystemNetworkCard from './SystemNetworkCard.vue'
 import SystemStatusCard from './SystemStatusCard.vue'
 import SystemSubscriptionCard from './SystemSubscriptionCard.vue'
+import { NeHeading } from '@nethesis/vue-components'
 
+const { t } = useI18n()
 const { state: systemDetail } = useSystemDetail()
+const { state: changesState } = useInventoryChanges()
 </script>
 
 <template>
@@ -22,4 +28,33 @@ const { state: systemDetail } = useSystemDetail()
     <SystemApplicationsCard v-if="systemDetail.data?.type === 'ns8'" />
     <SystemNetworkCard class="3xl:col-span-4 md:col-span-2" />
   </div>
+  <NeHeading tag="h5" class="mt-9 mb-5">
+    {{ $t('system_detail.change_history') }}
+  </NeHeading>
+  <!-- change counters -->
+  <div class="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
+    <CounterCard
+      :title="t('system_detail.total_changes')"
+      :counter="changesState.data?.total_changes ?? 0"
+      :loading="changesState.status === 'pending'"
+    />
+    <CounterCard
+      :title="t('system_detail.critical_changes')"
+      :counter="changesState.data?.changes_by_severity?.critical ?? 0"
+      :loading="changesState.status === 'pending'"
+      color-classes="text-rose-700 dark:text-rose-500"
+    />
+    <CounterCard
+      :title="t('system_detail.high_changes')"
+      :counter="changesState.data?.changes_by_severity?.high ?? 0"
+      :loading="changesState.status === 'pending'"
+      color-classes="text-orange-600 dark:text-orange-500"
+    />
+    <CounterCard
+      :title="t('system_detail.medium_changes')"
+      :counter="changesState.data?.changes_by_severity?.medium ?? 0"
+      :loading="changesState.status === 'pending'"
+      color-classes="text-yellow-600 dark:text-yellow-700"
+    />
+  </div>
 </template>