diff --git a/apps/meteor/client/components/data/Counter.stories.tsx b/apps/meteor/client/components/dataView/Counter.stories.tsx
similarity index 100%
rename from apps/meteor/client/components/data/Counter.stories.tsx
rename to apps/meteor/client/components/dataView/Counter.stories.tsx
diff --git a/apps/meteor/client/components/data/Counter.tsx b/apps/meteor/client/components/dataView/Counter.tsx
similarity index 100%
rename from apps/meteor/client/components/data/Counter.tsx
rename to apps/meteor/client/components/dataView/Counter.tsx
diff --git a/apps/meteor/client/components/data/CounterSet.stories.tsx b/apps/meteor/client/components/dataView/CounterSet.stories.tsx
similarity index 100%
rename from apps/meteor/client/components/data/CounterSet.stories.tsx
rename to apps/meteor/client/components/dataView/CounterSet.stories.tsx
diff --git a/apps/meteor/client/components/data/CounterSet.tsx b/apps/meteor/client/components/dataView/CounterSet.tsx
similarity index 100%
rename from apps/meteor/client/components/data/CounterSet.tsx
rename to apps/meteor/client/components/dataView/CounterSet.tsx
diff --git a/apps/meteor/client/components/data/Growth.stories.tsx b/apps/meteor/client/components/dataView/Growth.stories.tsx
similarity index 100%
rename from apps/meteor/client/components/data/Growth.stories.tsx
rename to apps/meteor/client/components/dataView/Growth.stories.tsx
diff --git a/apps/meteor/client/components/data/Growth.tsx b/apps/meteor/client/components/dataView/Growth.tsx
similarity index 100%
rename from apps/meteor/client/components/data/Growth.tsx
rename to apps/meteor/client/components/dataView/Growth.tsx
diff --git a/apps/meteor/client/components/data/NegativeGrowthSymbol.stories.tsx b/apps/meteor/client/components/dataView/NegativeGrowthSymbol.stories.tsx
similarity index 100%
rename from apps/meteor/client/components/data/NegativeGrowthSymbol.stories.tsx
rename to apps/meteor/client/components/dataView/NegativeGrowthSymbol.stories.tsx
diff --git a/apps/meteor/client/components/data/NegativeGrowthSymbol.tsx b/apps/meteor/client/components/dataView/NegativeGrowthSymbol.tsx
similarity index 100%
rename from apps/meteor/client/components/data/NegativeGrowthSymbol.tsx
rename to apps/meteor/client/components/dataView/NegativeGrowthSymbol.tsx
diff --git a/apps/meteor/client/components/data/PositiveGrowthSymbol.stories.tsx b/apps/meteor/client/components/dataView/PositiveGrowthSymbol.stories.tsx
similarity index 100%
rename from apps/meteor/client/components/data/PositiveGrowthSymbol.stories.tsx
rename to apps/meteor/client/components/dataView/PositiveGrowthSymbol.stories.tsx
diff --git a/apps/meteor/client/components/data/PositiveGrowthSymbol.tsx b/apps/meteor/client/components/dataView/PositiveGrowthSymbol.tsx
similarity index 100%
rename from apps/meteor/client/components/data/PositiveGrowthSymbol.tsx
rename to apps/meteor/client/components/dataView/PositiveGrowthSymbol.tsx
diff --git a/apps/meteor/client/views/admin/federationDashboard/OverviewSection.tsx b/apps/meteor/client/views/admin/federationDashboard/OverviewSection.tsx
index 2c0407ca950..618ad33f18e 100644
--- a/apps/meteor/client/views/admin/federationDashboard/OverviewSection.tsx
+++ b/apps/meteor/client/views/admin/federationDashboard/OverviewSection.tsx
@@ -2,7 +2,7 @@ import { Box, Skeleton } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { ReactElement, useMemo } from 'react';
 
-import CounterSet from '../../../components/data/CounterSet';
+import CounterSet from '../../../components/dataView/CounterSet';
 import { AsyncStatePhase } from '../../../hooks/useAsyncState';
 import { usePolledMethodData } from '../../../hooks/usePolledMethodData';
 
diff --git a/apps/meteor/ee/client/views/admin/engagementDashboard/channels/ChannelsTab.tsx b/apps/meteor/ee/client/views/admin/engagementDashboard/channels/ChannelsTab.tsx
index 94482ee8d4b..58605505ec1 100644
--- a/apps/meteor/ee/client/views/admin/engagementDashboard/channels/ChannelsTab.tsx
+++ b/apps/meteor/ee/client/views/admin/engagementDashboard/channels/ChannelsTab.tsx
@@ -3,11 +3,11 @@ import { useTranslation } from '@rocket.chat/ui-contexts';
 import moment from 'moment';
 import React, { ReactElement, useMemo, useState } from 'react';
 
-import Growth from '../../../../../../client/components/data/Growth';
+import Growth from '../../../../../../client/components/dataView/Growth';
 import Section from '../Section';
-import DownloadDataButton from '../data/DownloadDataButton';
-import PeriodSelector from '../data/PeriodSelector';
-import { usePeriodSelectorState } from '../data/usePeriodSelectorState';
+import DownloadDataButton from '../dataView/DownloadDataButton';
+import PeriodSelector from '../dataView/PeriodSelector';
+import { usePeriodSelectorState } from '../dataView/usePeriodSelectorState';
 import { useChannelsList } from './useChannelsList';
 
 const ChannelsTab = (): ReactElement => {
diff --git a/apps/meteor/ee/client/views/admin/engagementDashboard/channels/useChannelsList.ts b/apps/meteor/ee/client/views/admin/engagementDashboard/channels/useChannelsList.ts
index 955f8834427..21d1f0b575b 100644
--- a/apps/meteor/ee/client/views/admin/engagementDashboard/channels/useChannelsList.ts
+++ b/apps/meteor/ee/client/views/admin/engagementDashboard/channels/useChannelsList.ts
@@ -1,7 +1,7 @@
 import { useQuery } from 'react-query';
 
 import { getFromRestApi } from '../../../../lib/getFromRestApi';
-import { getPeriodRange, Period } from '../data/periods';
+import { getPeriodRange, Period } from '../dataView/periods';
 
 type UseChannelsListOptions = {
 	period: Period['key'];
diff --git a/apps/meteor/ee/client/views/admin/engagementDashboard/data/DownloadDataButton.tsx b/apps/meteor/ee/client/views/admin/engagementDashboard/dataView/DownloadDataButton.tsx
similarity index 91%
rename from apps/meteor/ee/client/views/admin/engagementDashboard/data/DownloadDataButton.tsx
rename to apps/meteor/ee/client/views/admin/engagementDashboard/dataView/DownloadDataButton.tsx
index 4c40a16f3da..ee6ec34c9a6 100644
--- a/apps/meteor/ee/client/views/admin/engagementDashboard/data/DownloadDataButton.tsx
+++ b/apps/meteor/ee/client/views/admin/engagementDashboard/dataView/DownloadDataButton.tsx
@@ -1,8 +1,7 @@
 import { Box, ActionButton } from '@rocket.chat/fuselage';
+import { useToastMessageDispatch, useTranslation } from '@rocket.chat/ui-contexts';
 import React, { ComponentProps, ReactElement } from 'react';
 
-import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
-import { useTranslation } from '@rocket.chat/ui-contexts'
 import { downloadCsvAs } from '../../../../../../client/lib/download';
 
 type RowFor<THeaders extends readonly string[]> = readonly unknown[] & {
diff --git a/apps/meteor/ee/client/views/admin/engagementDashboard/data/LegendSymbol.stories.tsx b/apps/meteor/ee/client/views/admin/engagementDashboard/dataView/LegendSymbol.stories.tsx
similarity index 100%
rename from apps/meteor/ee/client/views/admin/engagementDashboard/data/LegendSymbol.stories.tsx
rename to apps/meteor/ee/client/views/admin/engagementDashboard/dataView/LegendSymbol.stories.tsx
diff --git a/apps/meteor/ee/client/views/admin/engagementDashboard/data/LegendSymbol.tsx b/apps/meteor/ee/client/views/admin/engagementDashboard/dataView/LegendSymbol.tsx
similarity index 100%
rename from apps/meteor/ee/client/views/admin/engagementDashboard/data/LegendSymbol.tsx
rename to apps/meteor/ee/client/views/admin/engagementDashboard/dataView/LegendSymbol.tsx
diff --git a/apps/meteor/ee/client/views/admin/engagementDashboard/data/PeriodSelector.tsx b/apps/meteor/ee/client/views/admin/engagementDashboard/dataView/PeriodSelector.tsx
similarity index 92%
rename from apps/meteor/ee/client/views/admin/engagementDashboard/data/PeriodSelector.tsx
rename to apps/meteor/ee/client/views/admin/engagementDashboard/dataView/PeriodSelector.tsx
index 46a39eb731f..80447ad4ec3 100644
--- a/apps/meteor/ee/client/views/admin/engagementDashboard/data/PeriodSelector.tsx
+++ b/apps/meteor/ee/client/views/admin/engagementDashboard/dataView/PeriodSelector.tsx
@@ -1,7 +1,7 @@
 import { Select } from '@rocket.chat/fuselage';
+import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { ReactElement, useMemo } from 'react';
 
-import { useTranslation } from '@rocket.chat/ui-contexts'
 import { getPeriod, Period } from './periods';
 
 type PeriodSelectorProps<TPeriod extends Period['key']> = {
diff --git a/apps/meteor/ee/client/views/admin/engagementDashboard/data/colors.ts b/apps/meteor/ee/client/views/admin/engagementDashboard/dataView/colors.ts
similarity index 100%
rename from apps/meteor/ee/client/views/admin/engagementDashboard/data/colors.ts
rename to apps/meteor/ee/client/views/admin/engagementDashboard/dataView/colors.ts
diff --git a/apps/meteor/ee/client/views/admin/engagementDashboard/data/periods.ts b/apps/meteor/ee/client/views/admin/engagementDashboard/dataView/periods.ts
similarity index 96%
rename from apps/meteor/ee/client/views/admin/engagementDashboard/data/periods.ts
rename to apps/meteor/ee/client/views/admin/engagementDashboard/dataView/periods.ts
index 62795208f4d..f84856e7586 100644
--- a/apps/meteor/ee/client/views/admin/engagementDashboard/data/periods.ts
+++ b/apps/meteor/ee/client/views/admin/engagementDashboard/dataView/periods.ts
@@ -1,7 +1,6 @@
+import { TranslationKey } from '@rocket.chat/ui-contexts';
 import moment from 'moment';
 
-import { TranslationKey } from '@rocket.chat/ui-contexts'
-
 const label = (
 	translationKey: TranslationKey,
 	...replacements: unknown[]
diff --git a/apps/meteor/ee/client/views/admin/engagementDashboard/data/usePeriodLabel.ts b/apps/meteor/ee/client/views/admin/engagementDashboard/dataView/usePeriodLabel.ts
similarity index 80%
rename from apps/meteor/ee/client/views/admin/engagementDashboard/data/usePeriodLabel.ts
rename to apps/meteor/ee/client/views/admin/engagementDashboard/dataView/usePeriodLabel.ts
index 3a544a33cfc..837864479ac 100644
--- a/apps/meteor/ee/client/views/admin/engagementDashboard/data/usePeriodLabel.ts
+++ b/apps/meteor/ee/client/views/admin/engagementDashboard/dataView/usePeriodLabel.ts
@@ -1,6 +1,6 @@
+import { useTranslation } from '@rocket.chat/ui-contexts';
 import { useMemo } from 'react';
 
-import { useTranslation } from '@rocket.chat/ui-contexts'
 import { getPeriod, Period } from './periods';
 
 export const usePeriodLabel = (period: Period['key']): string => {
diff --git a/apps/meteor/ee/client/views/admin/engagementDashboard/data/usePeriodSelectorState.ts b/apps/meteor/ee/client/views/admin/engagementDashboard/dataView/usePeriodSelectorState.ts
similarity index 100%
rename from apps/meteor/ee/client/views/admin/engagementDashboard/data/usePeriodSelectorState.ts
rename to apps/meteor/ee/client/views/admin/engagementDashboard/dataView/usePeriodSelectorState.ts
diff --git a/apps/meteor/ee/client/views/admin/engagementDashboard/messages/MessagesPerChannelSection.tsx b/apps/meteor/ee/client/views/admin/engagementDashboard/messages/MessagesPerChannelSection.tsx
index 2138bf5884a..38eea9598ef 100644
--- a/apps/meteor/ee/client/views/admin/engagementDashboard/messages/MessagesPerChannelSection.tsx
+++ b/apps/meteor/ee/client/views/admin/engagementDashboard/messages/MessagesPerChannelSection.tsx
@@ -5,10 +5,10 @@ import { useTranslation } from '@rocket.chat/ui-contexts';
 import React, { ReactElement, useMemo } from 'react';
 
 import Section from '../Section';
-import DownloadDataButton from '../data/DownloadDataButton';
-import LegendSymbol from '../data/LegendSymbol';
-import PeriodSelector from '../data/PeriodSelector';
-import { usePeriodSelectorState } from '../data/usePeriodSelectorState';
+import DownloadDataButton from '../dataView/DownloadDataButton';
+import LegendSymbol from '../dataView/LegendSymbol';
+import PeriodSelector from '../dataView/PeriodSelector';
+import { usePeriodSelectorState } from '../dataView/usePeriodSelectorState';
 import { useMessageOrigins } from './useMessageOrigins';
 import { useTopFivePopularChannels } from './useTopFivePopularChannels';
 
diff --git a/apps/meteor/ee/client/views/admin/engagementDashboard/messages/MessagesSentSection.tsx b/apps/meteor/ee/client/views/admin/engagementDashboard/messages/MessagesSentSection.tsx
index 451fde81cb9..c49b69d8a5e 100644
--- a/apps/meteor/ee/client/views/admin/engagementDashboard/messages/MessagesSentSection.tsx
+++ b/apps/meteor/ee/client/views/admin/engagementDashboard/messages/MessagesSentSection.tsx
@@ -5,12 +5,12 @@ import { useTranslation } from '@rocket.chat/ui-contexts';
 import moment from 'moment';
 import React, { ReactElement, useMemo } from 'react';
 
-import CounterSet from '../../../../../../client/components/data/CounterSet';
+import CounterSet from '../../../../../../client/components/dataView/CounterSet';
 import Section from '../Section';
-import DownloadDataButton from '../data/DownloadDataButton';
-import PeriodSelector from '../data/PeriodSelector';
-import { usePeriodLabel } from '../data/usePeriodLabel';
-import { usePeriodSelectorState } from '../data/usePeriodSelectorState';
+import DownloadDataButton from '../dataView/DownloadDataButton';
+import PeriodSelector from '../dataView/PeriodSelector';
+import { usePeriodLabel } from '../dataView/usePeriodLabel';
+import { usePeriodSelectorState } from '../dataView/usePeriodSelectorState';
 import { useMessagesSent } from './useMessagesSent';
 
 const MessagesSentSection = (): ReactElement => {
diff --git a/apps/meteor/ee/client/views/admin/engagementDashboard/messages/useMessageOrigins.ts b/apps/meteor/ee/client/views/admin/engagementDashboard/messages/useMessageOrigins.ts
index edb5e9d0eb5..2e787c6df70 100644
--- a/apps/meteor/ee/client/views/admin/engagementDashboard/messages/useMessageOrigins.ts
+++ b/apps/meteor/ee/client/views/admin/engagementDashboard/messages/useMessageOrigins.ts
@@ -1,7 +1,7 @@
 import { useQuery } from 'react-query';
 
 import { getFromRestApi } from '../../../../lib/getFromRestApi';
-import { getPeriodRange, Period } from '../data/periods';
+import { getPeriodRange, Period } from '../dataView/periods';
 
 type UseMessageOriginsOptions = { period: Period['key'] };
 
diff --git a/apps/meteor/ee/client/views/admin/engagementDashboard/messages/useMessagesSent.ts b/apps/meteor/ee/client/views/admin/engagementDashboard/messages/useMessagesSent.ts
index 6612109bcd4..539de3bde6a 100644
--- a/apps/meteor/ee/client/views/admin/engagementDashboard/messages/useMessagesSent.ts
+++ b/apps/meteor/ee/client/views/admin/engagementDashboard/messages/useMessagesSent.ts
@@ -1,7 +1,7 @@
 import { useQuery } from 'react-query';
 
 import { getFromRestApi } from '../../../../lib/getFromRestApi';
-import { getPeriodRange, Period } from '../data/periods';
+import { getPeriodRange, Period } from '../dataView/periods';
 
 type UseMessagesSentOptions = { period: Period['key'] };
 
diff --git a/apps/meteor/ee/client/views/admin/engagementDashboard/messages/useTopFivePopularChannels.ts b/apps/meteor/ee/client/views/admin/engagementDashboard/messages/useTopFivePopularChannels.ts
index dbbc0f431f5..fb74732c207 100644
--- a/apps/meteor/ee/client/views/admin/engagementDashboard/messages/useTopFivePopularChannels.ts
+++ b/apps/meteor/ee/client/views/admin/engagementDashboard/messages/useTopFivePopularChannels.ts
@@ -1,7 +1,7 @@
 import { useQuery } from 'react-query';
 
 import { getFromRestApi } from '../../../../lib/getFromRestApi';
-import { getPeriodRange, Period } from '../data/periods';
+import { getPeriodRange, Period } from '../dataView/periods';
 
 type UseTopFivePopularChannelsOptions = { period: Period['key'] };
 
diff --git a/apps/meteor/ee/client/views/admin/engagementDashboard/users/ActiveUsersSection.tsx b/apps/meteor/ee/client/views/admin/engagementDashboard/users/ActiveUsersSection.tsx
index 221c0090bff..c5ad784a2bd 100644
--- a/apps/meteor/ee/client/views/admin/engagementDashboard/users/ActiveUsersSection.tsx
+++ b/apps/meteor/ee/client/views/admin/engagementDashboard/users/ActiveUsersSection.tsx
@@ -5,11 +5,11 @@ import { useTranslation } from '@rocket.chat/ui-contexts';
 import moment from 'moment';
 import React, { ReactElement, useMemo } from 'react';
 
-import CounterSet from '../../../../../../client/components/data/CounterSet';
+import CounterSet from '../../../../../../client/components/dataView/CounterSet';
 import { useFormatDate } from '../../../../../../client/hooks/useFormatDate';
 import Section from '../Section';
-import DownloadDataButton from '../data/DownloadDataButton';
-import LegendSymbol from '../data/LegendSymbol';
+import DownloadDataButton from '../dataView/DownloadDataButton';
+import LegendSymbol from '../dataView/LegendSymbol';
 import { useActiveUsers } from './useActiveUsers';
 
 type ActiveUsersSectionProps = {
diff --git a/apps/meteor/ee/client/views/admin/engagementDashboard/users/NewUsersSection.tsx b/apps/meteor/ee/client/views/admin/engagementDashboard/users/NewUsersSection.tsx
index 5c37592abf8..926c5f861f8 100644
--- a/apps/meteor/ee/client/views/admin/engagementDashboard/users/NewUsersSection.tsx
+++ b/apps/meteor/ee/client/views/admin/engagementDashboard/users/NewUsersSection.tsx
@@ -6,13 +6,13 @@ import { useTranslation } from '@rocket.chat/ui-contexts';
 import moment from 'moment';
 import React, { ReactElement, useMemo } from 'react';
 
-import CounterSet from '../../../../../../client/components/data/CounterSet';
+import CounterSet from '../../../../../../client/components/dataView/CounterSet';
 import { useFormatDate } from '../../../../../../client/hooks/useFormatDate';
 import Section from '../Section';
-import DownloadDataButton from '../data/DownloadDataButton';
-import PeriodSelector from '../data/PeriodSelector';
-import { usePeriodLabel } from '../data/usePeriodLabel';
-import { usePeriodSelectorState } from '../data/usePeriodSelectorState';
+import DownloadDataButton from '../dataView/DownloadDataButton';
+import PeriodSelector from '../dataView/PeriodSelector';
+import { usePeriodLabel } from '../dataView/usePeriodLabel';
+import { usePeriodSelectorState } from '../dataView/usePeriodSelectorState';
 import { useNewUsers } from './useNewUsers';
 
 const TICK_WIDTH = 45;
diff --git a/apps/meteor/ee/client/views/admin/engagementDashboard/users/UsersByTimeOfTheDaySection.tsx b/apps/meteor/ee/client/views/admin/engagementDashboard/users/UsersByTimeOfTheDaySection.tsx
index cd800ac1fe4..dff93b43dee 100644
--- a/apps/meteor/ee/client/views/admin/engagementDashboard/users/UsersByTimeOfTheDaySection.tsx
+++ b/apps/meteor/ee/client/views/admin/engagementDashboard/users/UsersByTimeOfTheDaySection.tsx
@@ -6,9 +6,9 @@ import moment from 'moment';
 import React, { ReactElement, useMemo } from 'react';
 
 import Section from '../Section';
-import DownloadDataButton from '../data/DownloadDataButton';
-import PeriodSelector from '../data/PeriodSelector';
-import { usePeriodSelectorState } from '../data/usePeriodSelectorState';
+import DownloadDataButton from '../dataView/DownloadDataButton';
+import PeriodSelector from '../dataView/PeriodSelector';
+import { usePeriodSelectorState } from '../dataView/usePeriodSelectorState';
 import { useUsersByTimeOfTheDay } from './useUsersByTimeOfTheDay';
 
 type UsersByTimeOfTheDaySectionProps = {
diff --git a/apps/meteor/ee/client/views/admin/engagementDashboard/users/useActiveUsers.ts b/apps/meteor/ee/client/views/admin/engagementDashboard/users/useActiveUsers.ts
index 17bc28f4d8f..a20a389e896 100644
--- a/apps/meteor/ee/client/views/admin/engagementDashboard/users/useActiveUsers.ts
+++ b/apps/meteor/ee/client/views/admin/engagementDashboard/users/useActiveUsers.ts
@@ -2,7 +2,7 @@ import moment from 'moment';
 import { useQuery } from 'react-query';
 
 import { getFromRestApi } from '../../../../lib/getFromRestApi';
-import { getPeriodRange } from '../data/periods';
+import { getPeriodRange } from '../dataView/periods';
 
 type UseActiveUsersOptions = { utc: boolean };
 
diff --git a/apps/meteor/ee/client/views/admin/engagementDashboard/users/useNewUsers.ts b/apps/meteor/ee/client/views/admin/engagementDashboard/users/useNewUsers.ts
index 4fcbe5afb25..9a8cd65363b 100644
--- a/apps/meteor/ee/client/views/admin/engagementDashboard/users/useNewUsers.ts
+++ b/apps/meteor/ee/client/views/admin/engagementDashboard/users/useNewUsers.ts
@@ -1,7 +1,7 @@
 import { useQuery } from 'react-query';
 
 import { getFromRestApi } from '../../../../lib/getFromRestApi';
-import { getPeriodRange, Period } from '../data/periods';
+import { getPeriodRange, Period } from '../dataView/periods';
 
 type UseNewUsersOptions = { period: Period['key']; utc: boolean };
 
diff --git a/apps/meteor/ee/client/views/admin/engagementDashboard/users/useUsersByTimeOfTheDay.ts b/apps/meteor/ee/client/views/admin/engagementDashboard/users/useUsersByTimeOfTheDay.ts
index f3a9d5f6424..d2d3dc3c2e8 100644
--- a/apps/meteor/ee/client/views/admin/engagementDashboard/users/useUsersByTimeOfTheDay.ts
+++ b/apps/meteor/ee/client/views/admin/engagementDashboard/users/useUsersByTimeOfTheDay.ts
@@ -1,7 +1,7 @@
 import { useQuery } from 'react-query';
 
 import { getFromRestApi } from '../../../../lib/getFromRestApi';
-import { getPeriodRange, Period } from '../data/periods';
+import { getPeriodRange, Period } from '../dataView/periods';
 
 type UseUsersByTimeOfTheDayOptions = { period: Period['key']; utc: boolean };
 
diff --git a/packages/ui-contexts/tsconfig.json b/packages/ui-contexts/tsconfig.json
index 455edb8149c..010aef9ff7d 100644
--- a/packages/ui-contexts/tsconfig.json
+++ b/packages/ui-contexts/tsconfig.json
@@ -2,7 +2,9 @@
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
 		"rootDir": "./src",
-		"outDir": "./dist"
+		"outDir": "./dist",
+		"resolveJsonModule": true,
+		"esModuleInterop": true,
 	},
 	"include": ["./src/**/*"]
 }