@uxland/primary-shell 5.4.7 → 5.6.0

package/src/UI/components/primaria-shell/shell-header/template.ts

@@ -15,11 +15,13 @@ export const template = (props: PrimariaShellHeader) => {
       <div class="header-logo">
         <img src=${salutLogo} alt="logo" />
       </div>
+      <header-divider></header-divider>
       <div id="header-region-container"></div>
     </div>
     <div class="header__right">
       <finalize-visit-button></finalize-visit-button>
       <div id="header-actions-region-container"></div>
+      <header-divider></header-divider>
       ${when(
         props.professional,
         () => html`<dss-header-menu-professional @onExit=${props.logout} slot="professional-menu" name="${props.professional.firstName} ${props.professional?.familyName} ${props.professional?.lastName}" center="${props.professional.workCenter}" collegiate="${props.professional.registrationNumber}">

package/src/UI/components/primaria-shell/styles.css

@@ -64,7 +64,7 @@
       overflow-y: auto;
       margin-right: -14px; 
       padding-right: 14px; 
-      scrollbar-color: var(--color-primary-800) var(--color-primary-700);
+      scrollbar-color: var(--color-primary-200) var(--color-primary-700);
       scrollbar-width: thin;
     }
     #menu-region-container::-webkit-scrollbar {
@@ -140,6 +140,11 @@
     height: 100%;
     flex: 1;
   }
+  #navigation-menu-lower-region-container{
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
   #floating-region-container {
     position: fixed;
     z-index: 300;

package/src/UI/internal-views/handle-views.ts

@@ -10,7 +10,7 @@ export const useInternalViews = () => {
   registerMainViews();
   registerCommunicationNavMenuItem();
   registerUpperNavMenuViews();
-  registerLowerNavMenuViews();
+  // registerLowerNavMenuViews();
 
   registerCommunicationMenuActions();
 };

package/src/UI/internal-views/lower-nav-menu-views.ts

@@ -1,19 +1,2 @@
-import { shellApi } from "../../api/api";
-import { shellRegions } from "../../api/region-manager/regions";
-import { PrimariaNavItem } from "../shared-components/primaria-nav-item/primaria-nav-item";
-
 export const registerLowerNavMenuViews = () => {
-  shellApi.regionManager.registerView(shellRegions.navigationLowerLeftMenu, {
-    id: "configuration-center",
-    factory: () => {
-      const menuItem = new PrimariaNavItem({
-        icon: "settings",
-        label: "Centre de configuració",
-        callbackFn: () => {
-          // shellApi.regionManager.activateView(shellRegions.main, "");
-        },
-      });
-      return Promise.resolve(menuItem);
-    },
-  });
 };

package/src/UI/internal-views/upper-nav-views.ts

@@ -7,6 +7,7 @@ import { CommunicationActionMenu } from "../components/communication-action-menu
 import { QuickActionItem } from "../shared-components/quick-action-item/quick-action-item";
 import { PrimariaNavItem } from "../shared-components/primaria-nav-item/primaria-nav-item";
 import { PrimariaNavTreeMenu } from "../shared-components/primaria-nav-tree-menu/primaria-nav-tree-menu";
+import { GetVisitId } from "../../features/visit/get-visit-id/request";
 
 type MenuItemConfig =
   | {
@@ -56,7 +57,7 @@ const upperNavMenuItems: MenuItemConfig[] = [
     actionMenuItems: [
       {
         icon: "open_in_new",
-        label: "ARES",
+        label: "Proces d'atenció - ARES",
         callbackFn: () => navigateToEcapWithoutClosingWithCip("PROCES_ATENCIO"),
       },
       {
@@ -89,7 +90,7 @@ const upperNavMenuItems: MenuItemConfig[] = [
   {
     id: "unique-petition",
     icon: "playlist_add",
-    label: "Petitori",
+    label: "Peticionari",
     type: "tree",
     sortHint: "0050",
     actionMenuItems: [
@@ -183,7 +184,7 @@ const upperNavMenuItems: MenuItemConfig[] = [
       {
         icon: "open_in_new",
         label: "Prescripció social",
-        callbackFn: () => navigateToEcapWithoutClosingWithCip("PRESCIPCIO_SOCIAL"),
+        callbackFn: () => navigateToEcapWithoutClosingWithCip("PRESCRIPCIO_SOCIAL"),
       },
     ],
   },
@@ -273,8 +274,33 @@ export const registerCommunicationMenuActions = () => {
         });
       },
     },
-    { id: "2", sortHint: "0020", icon: "open_in_new", label: "eConsulta", callbackFn: () => {} },
-    { id: "3", icon: "open_in_new", label: "Mail", callbackFn: () => {} },
+    {
+      id: "2",
+      sortHint: "0020",
+      icon: "open_in_new",
+      label: "eConsulta",
+      callbackFn: async () => {
+        const CIP = await getPatientCip(shellApi);
+        const visiId = (await shellApi.broker.send(new GetVisitId())) as string;
+
+        shellApi.ecapEventManager.publish("NAVEGACIO_ECAP_ECONSULTA", "NO_TANCAR", {
+          CIP: CIP || "",
+          VisiID: visiId || "",
+        });
+      },
+    },
+    {
+      id: "3",
+      icon: "open_in_new",
+      label: "Mail",
+      callbackFn: async () => {
+        const CIP = await getPatientCip(shellApi);
+        shellApi.ecapEventManager.publish("COMUNICACIO_MISSATGES_CREAR", "NO_TANCAR", {
+          CIP: CIP || "",
+          TipusMissatge: "SMS",
+        });
+      },
+    },
     {
       id: "4",
       sortHint: "0030",
@@ -282,7 +308,7 @@ export const registerCommunicationMenuActions = () => {
       label: "Veu IP",
       callbackFn: () => navigateToEcapWithoutClosingWithCip("VOIP"),
     },
-    { id: "5", sortHint: "0040", icon: "open_in_new", label: "Videoconsulta", callbackFn: () => {} },
+    // { id: "5", sortHint: "0040", icon: "open_in_new", label: "Videoconsulta", callbackFn: () => {} },
   ];
   for (const item of communicationItems) {
     shellApi.regionManager.registerView(shellRegions.communicationSidenav, {

package/src/internal-plugins/activity-history/activity-history-item/add/add-history-item/handler.ts

@@ -1,6 +1,7 @@
 import { StoreBaseHandler } from "../../../infrastructure/base-handlers";
 import { ensureAreValidBasicActivityHistoryItems } from "../../domain/validation/is-valid-basic-history-item";
 import { handleAddDiagnosticsFilter } from "../../filter/diagnostic-filters/handle-add-diagnostics-options-from-item";
+import { handleAddUpFilter } from "../../filter/up-filters/handle-add-up-options-from-item";
 import { addActivityHistoryItem } from "./action";
 import { AddHistoryItemPayload } from "./request";
 
@@ -15,6 +16,7 @@ export class AddHistoryItemHandler extends StoreBaseHandler {
         }),
       );
       handleAddDiagnosticsFilter([payload.item], this.store);
+      handleAddUpFilter([payload.item], this.store);
     } catch (e) {
       console.log(e.message);
     }

package/src/internal-plugins/activity-history/activity-history-item/add/add-history-items/handler.ts

@@ -1,6 +1,7 @@
 import { StoreBaseHandler } from "../../../infrastructure/base-handlers";
 import { validateAndFilterBasicItems } from "../../domain/validation/is-valid-basic-history-item";
 import { handleAddDiagnosticsFilter } from "../../filter/diagnostic-filters/handle-add-diagnostics-options-from-item";
+import { handleAddUpFilter } from "../../filter/up-filters/handle-add-up-options-from-item";
 import { addActivityHistoryItems } from "./action";
 import { AddHistoryItemsPayload } from "./request";
 
@@ -17,6 +18,7 @@ export class AddHistoryItemsHandler extends StoreBaseHandler {
         }),
       );
       handleAddDiagnosticsFilter(validItems, this.store);
+      handleAddUpFilter(validItems, this.store);
     } catch (e) {
       console.log(e.message);
     }

package/src/internal-plugins/activity-history/activity-history-item/add/handle-busy/busy-component/component.ts

@@ -3,10 +3,7 @@ import { customElement } from "lit/decorators.js";
 import styles from "./styles.css?inline";
 import { template } from "./template";
 import { connectedProperty } from "../../../../infrastructure/state/connected-property";
-import {
-  isAnyCollectionLoadingWithoutAnyLoaded,
-  isSomeCollectionLoadedAndOtherLoading,
-} from "../selectors";
+import { isSomeCollectionLoadedAndOtherLoading, isCollectionInitialState } from "../selectors";
 
 //@ts-ignore
 @customElement("activity-history-busy")
@@ -19,9 +16,13 @@ export class ActivityHistoryBusy extends LitElement {
     ${unsafeCSS(styles)}
   `;
 
-  @connectedProperty(isAnyCollectionLoadingWithoutAnyLoaded)
-  isAnyCollectionLoadingWithoutAnyLoaded: boolean;
+  @connectedProperty(isCollectionInitialState)
+  isCollectionInitialState: boolean;
 
   @connectedProperty(isSomeCollectionLoadedAndOtherLoading)
   isSomeCollectionLoadedAndOtherLoading: boolean;
+
+  get skeletons() {
+    return Array.from({ length: 12 }, () => html`<dss-skeleton width="100" height="10"></dss-skeleton>`);
+  }
 }

package/src/internal-plugins/activity-history/activity-history-item/add/handle-busy/busy-component/styles.css

@@ -1,15 +1,12 @@
 .spinner-container {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        gap: 24px;
-        justify-content: center;
-        padding-top:16px
-      }
-      .spinner-full-container {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 24px;
+  justify-content: center;
+  padding-top:16px
+}
+.skeleton-container {
+  padding: 20px;
+  height: 100%;
+}

package/src/internal-plugins/activity-history/activity-history-item/add/handle-busy/busy-component/template.ts

@@ -3,8 +3,8 @@ import { ActivityHistoryBusy } from "./component";
 import { translate } from "../../../../localization";
 
 export const template = (props: ActivityHistoryBusy) =>
-  props.isAnyCollectionLoadingWithoutAnyLoaded
-    ? html`<div class="spinner-full-container"><dss-spinner></dss-spinner></div>`
+  props.isCollectionInitialState
+    ? html`<div class="skeleton-container">${props.skeletons}</div>`
     : props.isSomeCollectionLoadedAndOtherLoading
       ? html`<div class="spinner-container"><dss-spinner size="sm"></dss-spinner><div class="busy-description">${translate("busyEntriesLoading")}</div></div>`
       : nothing;

package/src/internal-plugins/activity-history/activity-history-item/add/handle-busy/selectors.ts

@@ -1,13 +1,13 @@
 import { RootState } from "../../../infrastructure/state/store";
 
-const isAnyCollectionBusySelector = (state: RootState) =>
-  state.activityHistoryCollections.busy.length > 0;
-export const isAnyCollectionLoadingWithoutAnyLoaded = (state: RootState) => {
-  const collections = Object.values(state.activityHistoryCollections.collections);
-  return !collections?.length && isAnyCollectionBusySelector(state);
-};
+const isAnyCollectionBusySelector = (state: RootState) => state.activityHistoryCollections.busy.length > 0;
 
 export const isSomeCollectionLoadedAndOtherLoading = (state: RootState) => {
   const collections = Object.values(state.activityHistoryCollections.collections);
   return collections && isAnyCollectionBusySelector(state);
 };
+
+export const isCollectionInitialState = (state: RootState) => {
+  const collections = Object.values(state.activityHistoryCollections.collections);
+  return !collections?.length && !isAnyCollectionBusySelector(state);
+};

package/src/internal-plugins/activity-history/activity-history-item/add/handle-error/selectors.ts

@@ -1,19 +1,17 @@
 import { RootState } from "../../../infrastructure/state/store";
-import { isAnyCollectionLoadingWithoutAnyLoaded, isSomeCollectionLoadedAndOtherLoading } from "../handle-busy/selectors";
+import { isSomeCollectionLoadedAndOtherLoading } from "../handle-busy/selectors";
 
 export const isErrorOccurred = (state: RootState) => state.activityHistoryCollections.error.length > 0;
 
 const areCollectionsEmpty = (state: RootState) => {
   const collections = state.activityHistoryCollections.collections;
 
-  return Object.values(collections).every(collection => {
+  return Object.values(collections).every((collection) => {
     return !collection.items || collection.items.length === 0;
   });
 };
 export const isAllDataFailedToLoad = (state: RootState) => {
-  return !isAnyCollectionLoadingWithoutAnyLoaded(state) && 
-         !isSomeCollectionLoadedAndOtherLoading(state) && 
-         isErrorOccurred(state) && areCollectionsEmpty(state); 
+  return !isSomeCollectionLoadedAndOtherLoading(state) && isErrorOccurred(state) && areCollectionsEmpty(state);
 };
 
-export const selectErrorMessages = (state: RootState) => state.activityHistoryCollections.error;
+export const selectErrorMessages = (state: RootState) => state.activityHistoryCollections.error;

package/src/internal-plugins/activity-history/activity-history-item/domain/specs/search-string-spec.ts

@@ -12,7 +12,7 @@ const commonFieldsSearchPredicate = (item: IActivityHistoryItem, searchString: s
     item.professional?.role?.description && propContainsString(item.professional?.role.description, searchString);
   const serviceNameContainsSearchString = item.service?.description && propContainsString(item.service.description, searchString);
   const diagnosticsMatch = item.diagnostics?.some(
-    (diagnostic) => propContainsString(diagnostic.id, searchString) || propContainsString(diagnostic.description, searchString),
+    (diagnostic) => propContainsString(diagnostic.descripcio, searchString),
   );
   return (
     professionalNameContainsSearchString ||

package/src/internal-plugins/activity-history/activity-history-item/domain/specs/up-filter-spec.test.ts

@@ -0,0 +1,38 @@
+import { describe, it, expect } from 'vitest';
+import { IActivityHistoryItem } from '../model';
+import { UpFilterSpec } from './up-filter-spec';
+
+
+describe('UpFilterSpec', () => {
+  const makeItem = (upId: string | undefined, description: string | undefined): IActivityHistoryItem => ({
+    up: { id: upId, description },
+  } as IActivityHistoryItem);
+
+  it('should return true if up filter is empty', () => {
+    const spec = new UpFilterSpec([]);
+    const item =  makeItem('00461', 'EAP Barcelona 2D - Universitat');
+
+    expect(spec.isSatisfiedBy(item)).toBe(true);
+  });
+
+  it('should return true if item has at least one matching up', () => {
+    const spec = new UpFilterSpec(['00001', '00461', '99999']);
+    const item = makeItem('00461', 'EAP Barcelona 2D - Universitat');
+
+    expect(spec.isSatisfiedBy(item)).toBe(true);
+  });
+
+  it('should return false if item has up but none match', () => {
+    const spec = new UpFilterSpec(['00001', '00002', '00003']);
+    const item = makeItem('00461', 'EAP Barcelona 2D - Universitat');
+
+    expect(spec.isSatisfiedBy(item)).toBe(false);
+  });
+
+  it('should return false if item has no up', () => {
+    const spec = new UpFilterSpec(['a']);
+    const item = makeItem(undefined, undefined);
+
+    expect(spec.isSatisfiedBy(item)).toBe(false);
+  });
+});

package/src/internal-plugins/activity-history/activity-history-item/domain/specs/up-filter-spec.ts

@@ -0,0 +1,18 @@
+import { IActivityHistoryItem } from "../model";
+import { Spec } from "./spec";
+
+export class UpFilterSpec extends Spec<IActivityHistoryItem> {
+  constructor(private upIds: string[]) {
+    super();
+  }
+
+  isSatisfiedBy(item: IActivityHistoryItem): boolean {
+    if (!this.upIds?.length) {
+      return true; // No se filtra si no se proporcionan códigos
+    }
+
+    const itemUp = item.up ?? null;
+
+    return this.upIds.some((upId) => itemUp.id === upId);
+  }
+}

package/src/internal-plugins/activity-history/activity-history-item/filter/UI/active-filters-badges/active-filters-badges.ts

@@ -6,15 +6,24 @@ import { PrimariaApi } from "../../../../../../api/api";
 import { TYPES } from "../../../../infrastructure/ioc/types";
 import { template } from "./template";
 import styles from "./styles.css?inline";
-import { activeGroupsWithEnabledFilters } from "../../custom-filters/selectors";
+
 import { SetCustomFilterValue } from "../../custom-filters/set-custom-filter-value/request";
-import { IActivityHistoryCustomFilterGroup, IActivityHistoryDiagnosticsFilter, IActivityHistoryFilter } from "../../model";
+import {
+  IActivityHistoryCustomFilter,
+  IActivityHistoryCustomFilterGroup,
+  IActivityHistoryDiagnosticsFilter,
+  IActivityHistoryFilter,
+  IActivityHistoryUpFilter,
+} from "../../model";
 import { activityHistoryEnabledCommonFiltersSelector } from "../../common-filters/selectors";
 import { SetCommonFilter } from "../../common-filters/set-common-filter/request";
 import { diagnosticFilterSelector } from "../../diagnostic-filters/selectors";
 import { SetDiagnosticFiltersCommand } from "../../diagnostic-filters/set/request";
 import { ResetCommonFilter } from "../../common-filters/reset-common-filter/request";
 import { ResetCustomFilter } from "../../custom-filters/reset-custom-filter/request";
+import { upFilterSelector } from "../../up-filters/selectors";
+import { SetUpFiltersCommand } from "../../up-filters/set/request";
+import { customFilterGroupsWithOptionsSelector } from "../../../selectors";
 
 //@ts-ignore
 @customElement("active-filters-badges")
@@ -35,12 +44,15 @@ export class ActiveFiltersBadges extends LitElement {
   @connectedProperty(activityHistoryEnabledCommonFiltersSelector)
   enabledCommonFilters: IActivityHistoryFilter[];
 
-  @connectedProperty(activeGroupsWithEnabledFilters)
+  @connectedProperty(customFilterGroupsWithOptionsSelector)
   enabledFilters: IActivityHistoryCustomFilterGroup[];
 
   @connectedProperty(diagnosticFilterSelector)
   diagnosticFilterEnabled: IActivityHistoryDiagnosticsFilter;
 
+  @connectedProperty(upFilterSelector)
+  upFilterEnabled: IActivityHistoryUpFilter;
+
   _onDeleteFilterValue(filterGroupId: string, filterId: string, optionId: string, value: boolean) {
     this.api.broker.send(
       new SetCustomFilterValue({
@@ -58,14 +70,17 @@ export class ActiveFiltersBadges extends LitElement {
 
   _onDeleteDiagnosticFilterValue(diagnosticValue: string) {
     this.api.broker.send(
-      new SetDiagnosticFiltersCommand([
-        ...this.diagnosticFilterEnabled.enabledValues.filter((v) => v !== diagnosticValue),
-      ]),
+      new SetDiagnosticFiltersCommand([...this.diagnosticFilterEnabled.enabledValues.filter((v) => v !== diagnosticValue)]),
     );
   }
 
+  _onDeleteUpFilterValue(upValue: string) {
+    this.api.broker.send(new SetUpFiltersCommand([...this.upFilterEnabled.enabledValues.filter((v) => v !== upValue)]));
+  }
+
   resetFilters() {
     this.api.broker.send(new SetDiagnosticFiltersCommand([]));
+    this.api.broker.send(new SetUpFiltersCommand([]));
     this.api.broker.send(new ResetCommonFilter());
     this.api.broker.send(new ResetCustomFilter());
   }

package/src/internal-plugins/activity-history/activity-history-item/filter/UI/active-filters-badges/template.ts

@@ -5,14 +5,14 @@ import { formatShowFilterTitle, normalizeDeletedFilterBooleanValue, normalizeEmp
 
 const MAX_VISIBLE_CHIPS = 5;
 
-const renderChip = (id, filter, value, props) => html`
+const renderChip = (id, filter, option, props) => html`
   <dss-chip
-    label=${normalizeEmptyFilterValue(value, filter.title)}
+    label=${normalizeEmptyFilterValue(option.title, filter.title)}
     size="sm"
     hasdelete
     selected
-    @click=${() => props._onDeleteFilterValue(id, filter.id, value, false)}
-    @onDelete=${() => props._onDeleteFilterValue(id, filter.id, value, false)}
+    @click=${() => props._onDeleteFilterValue(id, filter.id, option.id, false)}
+    @onDelete=${() => props._onDeleteFilterValue(id, filter.id, option.id, false)}
   ></dss-chip>
 `;
 
@@ -38,13 +38,26 @@ const renderDiagnosticChip = (id, value, props) => html`
   ></dss-chip>
 `;
 
+const renderUpChip = (id, value, props) => html`
+  <dss-chip
+    label=${value}
+    size="sm"
+    hasdelete
+    selected
+    @click=${() => props._onDeleteUpFilterValue(id)}
+    @onDelete=${() => props._onDeleteUpFilterValue(id)}
+  ></dss-chip>
+`;
+
 const renderFilterTitle = (title) => html`<div class="filter-title">${`${title}:`}</div>`;
 
 export const template = (props: ActiveFiltersBadges) => {
+  //TODO: refactor chips render
   if (
     props.enabledFilters.length === 0 &&
     props.enabledCommonFilters.length === 0 &&
-    props.diagnosticFilterEnabled.enabledValues.length === 0
+    props.diagnosticFilterEnabled.enabledValues.length === 0 &&
+    props.upFilterEnabled.enabledValues.length === 0
   )
     return nothing;
 
@@ -85,6 +98,38 @@ export const template = (props: ActiveFiltersBadges) => {
     }
   }
 
+  const up = props.upFilterEnabled;
+
+  if (up) {
+    const { title, values, enabledValues } = up;
+    const selectedOptions = values.filter((opt) => enabledValues.includes(opt.value));
+
+    if (selectedOptions.length > 0) {
+      let titleAddedToVisible = false;
+      let titleAddedToHidden = false;
+
+      for (const option of selectedOptions) {
+        const chip = renderUpChip(option.value, option.label, props);
+
+        if (visibleCount < MAX_VISIBLE_CHIPS) {
+          if (!titleAddedToVisible) {
+            visibleChips.push(renderFilterTitle(title));
+            titleAddedToVisible = true;
+          }
+          visibleChips.push(chip);
+          visibleCount++;
+        } else {
+          if (!titleAddedToHidden) {
+            hiddenElements.push(renderFilterTitle(title));
+            titleAddedToHidden = true;
+          }
+          hiddenElements.push(chip);
+          hiddenChips.push(chip);
+        }
+      }
+    }
+  }
+
   for (const filter of props.enabledCommonFilters) {
     const chip = renderCommonChip(filter, props);
 
@@ -103,7 +148,21 @@ export const template = (props: ActiveFiltersBadges) => {
 
     for (const filter of filters) {
       for (const value of [...new Set(filter.enabledValues)]) {
-        const chip = renderChip(id, filter, normalizeDeletedFilterBooleanValue(value), props);
+        let filterOption = filter?.options?.find((o) => o.id === value);
+
+        if (filterOption) {
+          //Fill when filter option doesnt have title (description)
+          filterOption.title = filterOption.title !== "" ? filterOption.title : value;
+        } else {
+          //Hi ha un filtre de curs clinic "veure eliminats" booleà que no serà un filterOption, per tant entra aquí
+          //Aqui es crea el objecte que es passa al chip
+          const deletedFiltersOption = normalizeDeletedFilterBooleanValue(value);
+          filterOption = { title: deletedFiltersOption, id: deletedFiltersOption };
+        }
+
+        const chip2 = renderChip(id, filter, normalizeDeletedFilterBooleanValue(value), props);
+
+        const chip = renderChip(id, filter, filterOption, props);
 
         if (visibleCount < MAX_VISIBLE_CHIPS) {
           if (!titleAddedToVisible) {

package/src/internal-plugins/activity-history/activity-history-item/filter/UI/active-filters-header/active-filters-header.ts

@@ -7,6 +7,7 @@ import { activityHistorySearchStringSelector } from "../../../search/selectors";
 import { areCustomFiltersActive } from "../../custom-filters/selectors";
 import { areCommonFiltersActive } from "../../common-filters/selectors";
 import { areDiagnosticFiltersActive } from "../../diagnostic-filters/selectors";
+import { areUpFiltersActive } from "../../up-filters/selectors";
 
 //@ts-ignore
 @customElement("active-filters-header")
@@ -30,4 +31,7 @@ export class ActiveFiltersHeader extends LitElement {
 
   @connectedProperty(areDiagnosticFiltersActive)
   areDiagnosticFiltersActive: boolean;
+
+  @connectedProperty(areUpFiltersActive)
+  areUpFiltersActive: boolean;
 }

package/src/internal-plugins/activity-history/activity-history-item/filter/UI/active-filters-header/template.ts

@@ -7,6 +7,7 @@ export const template = (props: ActiveFiltersHeader) => {
     !props.areCustomFiltersActive &&
     !props.areCommonFiltersActive &&
     !props.areDiagnosticFiltersActive &&
+    !props.areUpFiltersActive &&
     props.searchString.length < 1
   )
     return nothing;

package/src/internal-plugins/activity-history/activity-history-item/filter/UI/activity-history-filters/activity-history-filters.ts

@@ -8,6 +8,7 @@ import {
   IActivityHistoryCommonFilter,
   IActivityHistoryCustomFilterGroup,
   IActivityHistoryDiagnosticsFilter,
+  IActivityHistoryUpFilter,
 } from "../../model";
 import styles from "./styles.css?inline";
 import { template } from "./template";
@@ -16,11 +17,10 @@ import { SetCommonFilter } from "../../common-filters/set-common-filter/request"
 import { activityHistoryCommonFiltersSelector } from "../../common-filters/selectors";
 import { SetCustomFilterValue } from "../../custom-filters/set-custom-filter-value/request";
 import { customFilterGroupsWithOptionsSelector } from "../../../selectors";
-import {
-  diagnosticFilterEnabledValuesSelector,
-  diagnosticFilterSelector,
-} from "../../diagnostic-filters/selectors";
+import { diagnosticFilterEnabledValuesSelector, diagnosticFilterSelector } from "../../diagnostic-filters/selectors";
 import { SetDiagnosticFiltersCommand } from "../../diagnostic-filters/set/request";
+import { upFilterEnabledValuesSelector, upFilterSelector } from "../../up-filters/selectors";
+import { SetUpFiltersCommand } from "../../up-filters/set/request";
 
 //@ts-ignore
 @customElement("activity-history-filters")
@@ -45,6 +45,12 @@ export class ActivityHistoryFilters extends LitElement {
   @connectedProperty(diagnosticFilterEnabledValuesSelector)
   diagnosticFilterEnabledValues: string[];
 
+  @connectedProperty(upFilterSelector)
+  upFilter: IActivityHistoryUpFilter;
+
+  @connectedProperty(upFilterEnabledValuesSelector)
+  upFilterEnabledValues: string[];
+
   @lazyInject(TYPES.primaryApi)
   api: PrimariaApi;
 
@@ -72,12 +78,7 @@ export class ActivityHistoryFilters extends LitElement {
     this.api.broker.send(new SetCustomFilterGroup({ id: filterGroupId, enabled: value }));
   }
 
-  _onChangeCustomFilterValue(
-    filterGroupId: string,
-    filterId: string,
-    optionId: string,
-    value: boolean,
-  ) {
+  _onChangeCustomFilterValue(filterGroupId: string, filterId: string, optionId: string, value: boolean) {
     this.api.broker.send(
       new SetCustomFilterValue({
         filterGroupId,
@@ -92,4 +93,9 @@ export class ActivityHistoryFilters extends LitElement {
     const selectedValues = e.detail.selectedValue;
     this.api.broker.send(new SetDiagnosticFiltersCommand(selectedValues));
   }
+
+  _handleUpFilterChange(e: CustomEvent) {
+    const selectedValues = e.detail.selectedValue;
+    this.api.broker.send(new SetUpFiltersCommand(selectedValues));
+  }
 }

package/src/internal-plugins/activity-history/activity-history-item/filter/UI/activity-history-filters/styles.css

@@ -41,6 +41,7 @@
     display: flex;
     flex-direction: column;
     padding-top: 12px;
+    gap: var(--dss-spacing-xs);
 
     .custom-filter{
       display: flex;