From f7c667e4109b2f1638ac6cdf7e42ce25dd30ebae Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Tue, 3 Jun 2025 10:47:30 +0200
Subject: [PATCH] Feat(1-3760)/filters per analytics section (#10039)

Splits the insights page into separate sections with their own separate
filters. Each filter is sticky to the top of the page, similar to how
the previous filters worked.

In doing this, I have also moved around a lot of code. Refer to the
inline comments for more specific examples, but on a high level, this
PR:
- Moves the flag check from InsightsCharts into Insights itself. Because
the old Insights had filters and state, and the new one does not, it
made sense to fork off higher up in the tree. Because the new version
doesn't have state, I have also simplified it and removed an
intermediate component (InsightsCharts) that doesn't feel necessary
anymore.
- Because InsightsCharts isn't used anymore, I've moved the
LegacyInsightsCharts file back into InsightsCharts. However, I'm happy
to move it back if we think that's useful.
- Instead of all charts living in InsightsCharts, I've split each
section into its own file in the new sections directory. Because the
sections have separate filters, they don't share any state anymore, so
there's nothing they share.
- I'm reusing the existing hook and endpoint. As it stands, the
performance insights use **most** of the data from that payload (but not
all of it). The user insights use some of it. Flag lifecycle insights
doesn't use anything, but I've wired it up to make the filters work. I
expect that we'll iterate on the API endpoints etc later.


![image](https://github.com/user-attachments/assets/8fcf5800-18be-4399-b7e2-e2b4b8565ea8)
---
 .../src/component/filter/Filters/Filters.tsx  |   2 +-
 .../src/component/insights/Insights.test.tsx  |   3 +
 frontend/src/component/insights/Insights.tsx  |  98 ++----
 .../insights/InsightsCharts.styles.ts         |  46 +++
 .../src/component/insights/InsightsCharts.tsx | 313 +++++++++--------
 .../component/insights/InsightsFilters.tsx    |  43 ++-
 .../src/component/insights/LegacyInsights.tsx |  76 +++++
 .../insights/LegacyInsightsCharts.tsx         | 320 ------------------
 .../insights/sections/InsightsSection.tsx     |  34 ++
 .../insights/sections/LifecycleInsights.tsx   |  26 ++
 .../insights/sections/PerformanceInsights.tsx | 186 ++++++++++
 .../insights/sections/UserInsights.tsx        | 119 +++++++
 frontend/src/hooks/usePersistentTableState.ts |   2 +-
 13 files changed, 704 insertions(+), 564 deletions(-)
 create mode 100644 frontend/src/component/insights/InsightsCharts.styles.ts
 create mode 100644 frontend/src/component/insights/LegacyInsights.tsx
 delete mode 100644 frontend/src/component/insights/LegacyInsightsCharts.tsx
 create mode 100644 frontend/src/component/insights/sections/InsightsSection.tsx
 create mode 100644 frontend/src/component/insights/sections/LifecycleInsights.tsx
 create mode 100644 frontend/src/component/insights/sections/PerformanceInsights.tsx
 create mode 100644 frontend/src/component/insights/sections/UserInsights.tsx

diff --git a/frontend/src/component/filter/Filters/Filters.tsx b/frontend/src/component/filter/Filters/Filters.tsx
index 554dfdf26e..71dc3935f2 100644
--- a/frontend/src/component/filter/Filters/Filters.tsx
+++ b/frontend/src/component/filter/Filters/Filters.tsx
@@ -42,7 +42,7 @@ type ITextFilterItem = IBaseFilterItem & {
     pluralOperators: [string, ...string[]];
 };
 
-type IDateFilterItem = IBaseFilterItem & {
+export type IDateFilterItem = IBaseFilterItem & {
     dateOperators: [string, ...string[]];
     fromFilterKey?: string;
     toFilterKey?: string;
diff --git a/frontend/src/component/insights/Insights.test.tsx b/frontend/src/component/insights/Insights.test.tsx
index 09177fcedf..b5d531c26b 100644
--- a/frontend/src/component/insights/Insights.test.tsx
+++ b/frontend/src/component/insights/Insights.test.tsx
@@ -27,6 +27,9 @@ const setupApi = () => {
 
 const currentTime = '2024-04-25T08:05:00.000Z';
 
+// todo(lifecycleMetrics): this test won't be relevant anymore because the
+// filters are on each section instead of the top-level component. Consider
+// rewriting this for the individual section components instead.
 test('Filter insights by project and date', async () => {
     vi.setSystemTime(currentTime);
     setupApi();
diff --git a/frontend/src/component/insights/Insights.tsx b/frontend/src/component/insights/Insights.tsx
index 4a73985d8b..76ab5b3e92 100644
--- a/frontend/src/component/insights/Insights.tsx
+++ b/frontend/src/component/insights/Insights.tsx
@@ -1,90 +1,32 @@
-import { useState, type FC } from 'react';
+import type { FC } from 'react';
 import { styled } from '@mui/material';
-import { usePersistentTableState } from 'hooks/usePersistentTableState';
-import { allOption } from 'component/common/ProjectSelect/ProjectSelect';
-import { useInsights } from 'hooks/api/getters/useInsights/useInsights';
 import { InsightsHeader } from './components/InsightsHeader/InsightsHeader.tsx';
-import { useInsightsData } from './hooks/useInsightsData.ts';
-import { InsightsCharts } from './InsightsCharts.tsx';
-import { Sticky } from 'component/common/Sticky/Sticky';
-import { InsightsFilters } from './InsightsFilters.tsx';
-import { FilterItemParam } from '../../utils/serializeQueryParams.ts';
-import { format, subMonths } from 'date-fns';
-import { withDefault } from 'use-query-params';
+import { useUiFlag } from 'hooks/useUiFlag.ts';
+import { LegacyInsights } from './LegacyInsights.tsx';
+import { StyledContainer } from './InsightsCharts.styles.ts';
+import { LifecycleInsights } from './sections/LifecycleInsights.tsx';
+import { PerformanceInsights } from './sections/PerformanceInsights.tsx';
+import { UserInsights } from './sections/UserInsights.tsx';
 
 const StyledWrapper = styled('div')(({ theme }) => ({
     paddingTop: theme.spacing(2),
 }));
 
-const StickyContainer = styled(Sticky)(({ theme }) => ({
-    position: 'sticky',
-    top: 0,
-    zIndex: theme.zIndex.sticky,
-    padding: theme.spacing(2, 0),
-    background: theme.palette.background.application,
-    transition: 'padding 0.3s ease',
-}));
-
-interface InsightsProps {
-    withCharts?: boolean;
-}
-
-export const Insights: FC<InsightsProps> = ({ withCharts = true }) => {
-    const [scrolled, setScrolled] = useState(false);
-
-    const stateConfig = {
-        project: FilterItemParam,
-        from: withDefault(FilterItemParam, {
-            values: [format(subMonths(new Date(), 1), 'yyyy-MM-dd')],
-            operator: 'IS',
-        }),
-        to: withDefault(FilterItemParam, {
-            values: [format(new Date(), 'yyyy-MM-dd')],
-            operator: 'IS',
-        }),
-    };
-    const [state, setState] = usePersistentTableState('insights', stateConfig, [
-        'from',
-        'to',
-    ]);
-
-    const { insights, loading } = useInsights(
-        state.from?.values[0],
-        state.to?.values[0],
-    );
-
-    const projects = state.project?.values ?? [allOption.id];
-
-    const insightsData = useInsightsData(insights, projects);
-
-    const handleScroll = () => {
-        if (!scrolled && window.scrollY > 0) {
-            setScrolled(true);
-        } else if (scrolled && window.scrollY === 0) {
-            setScrolled(false);
-        }
-    };
-
-    if (typeof window !== 'undefined') {
-        window.addEventListener('scroll', handleScroll);
-    }
-
+const NewInsights: FC = () => {
     return (
         <StyledWrapper>
-            <StickyContainer>
-                <InsightsHeader
-                    actions={
-                        <InsightsFilters state={state} onChange={setState} />
-                    }
-                />
-            </StickyContainer>
-            {withCharts && (
-                <InsightsCharts
-                    loading={loading}
-                    projects={projects}
-                    {...insightsData}
-                />
-            )}
+            <InsightsHeader />
+            <StyledContainer>
+                <LifecycleInsights />
+                <PerformanceInsights />
+                <UserInsights />
+            </StyledContainer>
         </StyledWrapper>
     );
 };
+
+export const Insights: FC<{ withCharts?: boolean }> = (props) => {
+    const useNewInsights = useUiFlag('lifecycleMetrics');
+
+    return useNewInsights ? <NewInsights /> : <LegacyInsights {...props} />;
+};
diff --git a/frontend/src/component/insights/InsightsCharts.styles.ts b/frontend/src/component/insights/InsightsCharts.styles.ts
new file mode 100644
index 0000000000..a87db9ddf4
--- /dev/null
+++ b/frontend/src/component/insights/InsightsCharts.styles.ts
@@ -0,0 +1,46 @@
+import { Box, Paper, styled } from '@mui/material';
+
+export const StyledContainer = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(4),
+}));
+
+export const StyledWidget = styled(Paper)(({ theme }) => ({
+    borderRadius: `${theme.shape.borderRadiusLarge}px`,
+    boxShadow: 'none',
+    display: 'flex',
+    flexWrap: 'wrap',
+    [theme.breakpoints.up('md')]: {
+        flexDirection: 'row',
+        flexWrap: 'nowrap',
+    },
+}));
+
+export const StyledWidgetContent = styled(Box)(({ theme }) => ({
+    padding: theme.spacing(3),
+    width: '100%',
+}));
+
+export const StyledWidgetStats = styled(Box)<{
+    width?: number;
+    padding?: number;
+}>(({ theme, width = 300, padding = 3 }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(2),
+    padding: theme.spacing(padding),
+    minWidth: '100%',
+    [theme.breakpoints.up('md')]: {
+        minWidth: `${width}px`,
+        borderRight: `1px solid ${theme.palette.background.application}`,
+    },
+}));
+
+export const StyledChartContainer = styled(Box)(({ theme }) => ({
+    position: 'relative',
+    minWidth: 0, // bugfix, see: https://github.com/chartjs/Chart.js/issues/4156#issuecomment-295180128
+    flexGrow: 1,
+    margin: 'auto 0',
+    padding: theme.spacing(3),
+}));
diff --git a/frontend/src/component/insights/InsightsCharts.tsx b/frontend/src/component/insights/InsightsCharts.tsx
index a491a2aec3..1c53bb5bab 100644
--- a/frontend/src/component/insights/InsightsCharts.tsx
+++ b/frontend/src/component/insights/InsightsCharts.tsx
@@ -1,4 +1,4 @@
-import type { FC, PropsWithChildren } from 'react';
+import type { FC } from 'react';
 import { Box, Paper, styled } from '@mui/material';
 import { UserStats } from './componentsStat/UserStats/UserStats.tsx';
 import { UsersChart } from './componentsChart/UsersChart/UsersChart.tsx';
@@ -8,6 +8,8 @@ import { FlagsChart } from './componentsChart/FlagsChart/FlagsChart.tsx';
 import { FlagsProjectChart } from './componentsChart/FlagsProjectChart/FlagsProjectChart.tsx';
 import { HealthStats } from './componentsStat/HealthStats/HealthStats.tsx';
 import { ProjectHealthChart } from './componentsChart/ProjectHealthChart/ProjectHealthChart.tsx';
+import { TimeToProduction } from './componentsStat/TimeToProduction/TimeToProduction.tsx';
+import { TimeToProductionChart } from './componentsChart/TimeToProductionChart/TimeToProductionChart.tsx';
 import { MetricsSummaryChart } from './componentsChart/MetricsSummaryChart/MetricsSummaryChart.tsx';
 import { UpdatesPerEnvironmentTypeChart } from './componentsChart/UpdatesPerEnvironmentTypeChart/UpdatesPerEnvironmentTypeChart.tsx';
 import type { InstanceInsightsSchema } from 'openapi';
@@ -15,8 +17,7 @@ import type { GroupedDataByProject } from './hooks/useGroupedProjectTrends.ts';
 import { allOption } from 'component/common/ProjectSelect/ProjectSelect';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { WidgetTitle } from './components/WidgetTitle/WidgetTitle.tsx';
-import { useUiFlag } from 'hooks/useUiFlag.ts';
-import { LegacyInsightsCharts } from './LegacyInsightsCharts.tsx';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 
 export interface IChartsProps {
     flagTrends: InstanceInsightsSchema['flagTrends'];
@@ -48,7 +49,7 @@ export interface IChartsProps {
 const StyledContainer = styled(Box)(({ theme }) => ({
     display: 'flex',
     flexDirection: 'column',
-    gap: theme.spacing(4),
+    gap: theme.spacing(2),
 }));
 
 const StyledWidget = styled(Paper)(({ theme }) => ({
@@ -89,23 +90,7 @@ const StyledChartContainer = styled(Box)(({ theme }) => ({
     padding: theme.spacing(3),
 }));
 
-const StyledSection = styled('section')(({ theme }) => ({
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(2),
-}));
-
-const Section: FC<PropsWithChildren<{ title: string }>> = ({
-    title,
-    children,
-}) => (
-    <StyledSection>
-        <h2>{title}</h2>
-        {children}
-    </StyledSection>
-);
-
-const NewInsightsCharts: FC<IChartsProps> = ({
+export const InsightsCharts: FC<IChartsProps> = ({
     projects,
     summary,
     userTrends,
@@ -137,74 +122,161 @@ const NewInsightsCharts: FC<IChartsProps> = ({
 
     return (
         <StyledContainer>
-            <Section title='Flags lifecycle currently' />
-            <Section title='Performance insights'>
-                {showAllProjects ? (
-                    <StyledWidget>
-                        <StyledWidgetStats width={275}>
-                            <WidgetTitle title='Flags' />
-                            <FlagStats
-                                count={flagsTotal}
-                                flagsPerUser={getFlagsPerUser(
-                                    flagsTotal,
-                                    usersTotal,
-                                )}
-                                isLoading={loading}
-                            />
-                        </StyledWidgetStats>
-                        <StyledChartContainer>
-                            <FlagsChart
-                                flagTrends={flagTrends}
-                                isLoading={loading}
-                            />
-                        </StyledChartContainer>
-                    </StyledWidget>
-                ) : (
-                    <StyledWidget>
-                        <StyledWidgetStats width={275}>
-                            <WidgetTitle title='Flags' />
-                            <FlagStats
-                                count={summary.total}
-                                flagsPerUser={''}
-                                isLoading={loading}
-                            />
-                        </StyledWidgetStats>
-                        <StyledChartContainer>
-                            <FlagsProjectChart
-                                projectFlagTrends={groupedProjectsData}
-                                isLoading={loading}
-                            />
-                        </StyledChartContainer>
-                    </StyledWidget>
-                )}
-                {isEnterprise() ? (
-                    <StyledWidget>
-                        <StyledWidgetStats width={350} padding={0}>
-                            <HealthStats
-                                value={summary.averageHealth}
-                                healthy={summary.active}
-                                stale={summary.stale}
-                                potentiallyStale={summary.potentiallyStale}
-                                title={
-                                    <WidgetTitle
-                                        title='Health'
-                                        tooltip={
-                                            'Percentage of flags that are not stale or potentially stale.'
-                                        }
-                                    />
-                                }
-                            />
-                        </StyledWidgetStats>
-                        <StyledChartContainer>
-                            <ProjectHealthChart
-                                projectFlagTrends={groupedProjectsData}
-                                isAggregate={showAllProjects}
-                                isLoading={loading}
-                            />
-                        </StyledChartContainer>
-                    </StyledWidget>
-                ) : null}
-                {isEnterprise() ? (
+            <ConditionallyRender
+                condition={showAllProjects}
+                show={
+                    <>
+                        <StyledWidget>
+                            <StyledWidgetStats>
+                                <WidgetTitle title='Total users' />
+                                <UserStats
+                                    count={usersTotal}
+                                    active={usersActive}
+                                    inactive={usersInactive}
+                                    isLoading={loading}
+                                />
+                            </StyledWidgetStats>
+                            <StyledChartContainer>
+                                <UsersChart
+                                    userTrends={userTrends}
+                                    isLoading={loading}
+                                />
+                            </StyledChartContainer>
+                        </StyledWidget>
+                    </>
+                }
+                elseShow={
+                    <>
+                        <StyledWidget>
+                            <StyledWidgetStats>
+                                <WidgetTitle
+                                    title={
+                                        isOneProjectSelected
+                                            ? 'Users in project'
+                                            : 'Users per project on average'
+                                    }
+                                    tooltip={
+                                        isOneProjectSelected
+                                            ? 'Number of users in selected projects.'
+                                            : 'Average number of users for selected projects.'
+                                    }
+                                />
+                                <UserStats
+                                    count={summary.averageUsers}
+                                    isLoading={loading}
+                                />
+                            </StyledWidgetStats>
+                            <StyledChartContainer>
+                                <UsersPerProjectChart
+                                    projectFlagTrends={groupedProjectsData}
+                                    isLoading={loading}
+                                />
+                            </StyledChartContainer>
+                        </StyledWidget>
+                    </>
+                }
+            />
+            <ConditionallyRender
+                condition={isEnterprise()}
+                show={
+                    <>
+                        <StyledWidget>
+                            <StyledWidgetStats width={350} padding={0}>
+                                <HealthStats
+                                    value={summary.averageHealth}
+                                    healthy={summary.active}
+                                    stale={summary.stale}
+                                    potentiallyStale={summary.potentiallyStale}
+                                    title={
+                                        <WidgetTitle
+                                            title='Health'
+                                            tooltip={
+                                                'Percentage of flags that are not stale or potentially stale.'
+                                            }
+                                        />
+                                    }
+                                />
+                            </StyledWidgetStats>
+                            <StyledChartContainer>
+                                <ProjectHealthChart
+                                    projectFlagTrends={groupedProjectsData}
+                                    isAggregate={showAllProjects}
+                                    isLoading={loading}
+                                />
+                            </StyledChartContainer>
+                        </StyledWidget>
+                        <StyledWidget>
+                            <StyledWidgetStats>
+                                <WidgetTitle
+                                    title='Median time to production'
+                                    tooltip={`How long does it currently take on average from when a feature flag was created until it was enabled in a "production" type environment. This is calculated only from feature flags of the type "release" and is the median across the selected projects.`}
+                                />
+                                <TimeToProduction
+                                    daysToProduction={
+                                        summary.medianTimeToProduction
+                                    }
+                                />
+                            </StyledWidgetStats>
+                            <StyledChartContainer>
+                                <TimeToProductionChart
+                                    projectFlagTrends={groupedProjectsData}
+                                    isAggregate={showAllProjects}
+                                    isLoading={loading}
+                                />
+                            </StyledChartContainer>
+                        </StyledWidget>
+                    </>
+                }
+            />
+            <ConditionallyRender
+                condition={showAllProjects}
+                show={
+                    <>
+                        <StyledWidget>
+                            <StyledWidgetStats width={275}>
+                                <WidgetTitle title='Flags' />
+                                <FlagStats
+                                    count={flagsTotal}
+                                    flagsPerUser={getFlagsPerUser(
+                                        flagsTotal,
+                                        usersTotal,
+                                    )}
+                                    isLoading={loading}
+                                />
+                            </StyledWidgetStats>
+                            <StyledChartContainer>
+                                <FlagsChart
+                                    flagTrends={flagTrends}
+                                    isLoading={loading}
+                                />
+                            </StyledChartContainer>
+                        </StyledWidget>
+                    </>
+                }
+                elseShow={
+                    <>
+                        <StyledWidget>
+                            <StyledWidgetStats width={275}>
+                                <WidgetTitle title='Flags' />
+                                <FlagStats
+                                    count={summary.total}
+                                    flagsPerUser={''}
+                                    isLoading={loading}
+                                />
+                            </StyledWidgetStats>
+                            <StyledChartContainer>
+                                <FlagsProjectChart
+                                    projectFlagTrends={groupedProjectsData}
+                                    isLoading={loading}
+                                />
+                            </StyledChartContainer>
+                        </StyledWidget>
+                    </>
+                }
+            />
+            <ConditionallyRender
+                condition={isEnterprise()}
+                show={
                     <>
                         <StyledWidget>
                             <StyledWidgetContent>
@@ -241,67 +313,8 @@ const NewInsightsCharts: FC<IChartsProps> = ({
                             </StyledWidgetContent>
                         </StyledWidget>
                     </>
-                ) : null}
-            </Section>
-
-            <Section title='User insights'>
-                {showAllProjects ? (
-                    <StyledWidget>
-                        <StyledWidgetStats>
-                            <WidgetTitle title='Total users' />
-                            <UserStats
-                                count={usersTotal}
-                                active={usersActive}
-                                inactive={usersInactive}
-                                isLoading={loading}
-                            />
-                        </StyledWidgetStats>
-                        <StyledChartContainer>
-                            <UsersChart
-                                userTrends={userTrends}
-                                isLoading={loading}
-                            />
-                        </StyledChartContainer>
-                    </StyledWidget>
-                ) : (
-                    <StyledWidget>
-                        <StyledWidgetStats>
-                            <WidgetTitle
-                                title={
-                                    isOneProjectSelected
-                                        ? 'Users in project'
-                                        : 'Users per project on average'
-                                }
-                                tooltip={
-                                    isOneProjectSelected
-                                        ? 'Number of users in selected projects.'
-                                        : 'Average number of users for selected projects.'
-                                }
-                            />
-                            <UserStats
-                                count={summary.averageUsers}
-                                isLoading={loading}
-                            />
-                        </StyledWidgetStats>
-                        <StyledChartContainer>
-                            <UsersPerProjectChart
-                                projectFlagTrends={groupedProjectsData}
-                                isLoading={loading}
-                            />
-                        </StyledChartContainer>
-                    </StyledWidget>
-                )}
-            </Section>
+                }
+            />
         </StyledContainer>
     );
 };
-
-export const InsightsCharts: FC<IChartsProps> = (props) => {
-    const useNewInsightsCharts = useUiFlag('lifecycleMetrics');
-
-    return useNewInsightsCharts ? (
-        <NewInsightsCharts {...props} />
-    ) : (
-        <LegacyInsightsCharts {...props} />
-    );
-};
diff --git a/frontend/src/component/insights/InsightsFilters.tsx b/frontend/src/component/insights/InsightsFilters.tsx
index 51778606c7..b6df2b54e9 100644
--- a/frontend/src/component/insights/InsightsFilters.tsx
+++ b/frontend/src/component/insights/InsightsFilters.tsx
@@ -3,19 +3,32 @@ import useProjects from 'hooks/api/getters/useProjects/useProjects';
 import {
     type FilterItemParamHolder,
     Filters,
+    type IDateFilterItem,
     type IFilterItem,
 } from 'component/filter/Filters/Filters';
+import { styled } from '@mui/material';
+import { useUiFlag } from 'hooks/useUiFlag';
 
 interface IFeatureToggleFiltersProps {
     state: FilterItemParamHolder;
     onChange: (value: FilterItemParamHolder) => void;
+    className?: string;
+    filterNamePrefix?: string;
 }
 
+const FiltersNoPadding = styled(Filters)({
+    padding: 0,
+});
+
 export const InsightsFilters: FC<IFeatureToggleFiltersProps> = ({
+    filterNamePrefix,
     state,
-    onChange,
+    ...filterProps
 }) => {
     const { projects } = useProjects();
+    const FilterComponent = useUiFlag('lifecycleMetrics')
+        ? FiltersNoPadding
+        : Filters;
 
     const [availableFilters, setAvailableFilters] = useState<IFilterItem[]>([]);
 
@@ -27,49 +40,51 @@ export const InsightsFilters: FC<IFeatureToggleFiltersProps> = ({
 
         const hasMultipleProjects = projectsOptions.length > 1;
 
+        const prefix = filterNamePrefix ?? '';
+
         const availableFilters: IFilterItem[] = [
             {
                 label: 'Date From',
                 icon: 'today',
                 options: [],
-                filterKey: 'from',
+                filterKey: `${prefix}from`,
                 dateOperators: ['IS'],
-                fromFilterKey: 'from',
-                toFilterKey: 'to',
+                fromFilterKey: `${prefix}from`,
+                toFilterKey: `${prefix}to`,
                 persistent: true,
-            },
+            } as IDateFilterItem,
             {
                 label: 'Date To',
                 icon: 'today',
                 options: [],
-                filterKey: 'to',
+                filterKey: `${prefix}to`,
                 dateOperators: ['IS'],
-                fromFilterKey: 'from',
-                toFilterKey: 'to',
+                fromFilterKey: `${prefix}from`,
+                toFilterKey: `${prefix}to`,
                 persistent: true,
-            },
+            } as IDateFilterItem,
             ...(hasMultipleProjects
                 ? ([
                       {
                           label: 'Project',
                           icon: 'topic',
                           options: projectsOptions,
-                          filterKey: 'project',
+                          filterKey: `${prefix}project`,
                           singularOperators: ['IS'],
                           pluralOperators: ['IS_ANY_OF'],
                       },
                   ] as IFilterItem[])
                 : []),
-        ];
+        ].filter(({ filterKey }) => filterKey in state);
 
         setAvailableFilters(availableFilters);
     }, [JSON.stringify(projects)]);
 
     return (
-        <Filters
-            availableFilters={availableFilters}
+        <FilterComponent
+            {...filterProps}
             state={state}
-            onChange={onChange}
+            availableFilters={availableFilters}
         />
     );
 };
diff --git a/frontend/src/component/insights/LegacyInsights.tsx b/frontend/src/component/insights/LegacyInsights.tsx
new file mode 100644
index 0000000000..6a45e50d22
--- /dev/null
+++ b/frontend/src/component/insights/LegacyInsights.tsx
@@ -0,0 +1,76 @@
+import type { FC } from 'react';
+import { styled } from '@mui/material';
+import { usePersistentTableState } from 'hooks/usePersistentTableState';
+import { allOption } from 'component/common/ProjectSelect/ProjectSelect';
+import { useInsights } from 'hooks/api/getters/useInsights/useInsights';
+import { InsightsHeader } from './components/InsightsHeader/InsightsHeader.tsx';
+import { useInsightsData } from './hooks/useInsightsData.ts';
+import { Sticky } from 'component/common/Sticky/Sticky';
+import { InsightsFilters } from './InsightsFilters.tsx';
+import { FilterItemParam } from '../../utils/serializeQueryParams.ts';
+import { format, subMonths } from 'date-fns';
+import { withDefault } from 'use-query-params';
+import { InsightsCharts } from './InsightsCharts.tsx';
+
+const StyledWrapper = styled('div')(({ theme }) => ({
+    paddingTop: theme.spacing(2),
+}));
+
+const StickyContainer = styled(Sticky)(({ theme }) => ({
+    position: 'sticky',
+    top: 0,
+    zIndex: theme.zIndex.sticky,
+    padding: theme.spacing(2, 0),
+    background: theme.palette.background.application,
+    transition: 'padding 0.3s ease',
+}));
+
+interface InsightsProps {
+    withCharts?: boolean;
+}
+
+export const LegacyInsights: FC<InsightsProps> = ({ withCharts = true }) => {
+    const stateConfig = {
+        project: FilterItemParam,
+        from: withDefault(FilterItemParam, {
+            values: [format(subMonths(new Date(), 1), 'yyyy-MM-dd')],
+            operator: 'IS',
+        }),
+        to: withDefault(FilterItemParam, {
+            values: [format(new Date(), 'yyyy-MM-dd')],
+            operator: 'IS',
+        }),
+    };
+    const [state, setState] = usePersistentTableState('insights', stateConfig, [
+        'from',
+        'to',
+    ]);
+
+    const { insights, loading } = useInsights(
+        state.from?.values[0],
+        state.to?.values[0],
+    );
+
+    const projects = state.project?.values ?? [allOption.id];
+
+    const insightsData = useInsightsData(insights, projects);
+
+    return (
+        <StyledWrapper>
+            <StickyContainer>
+                <InsightsHeader
+                    actions={
+                        <InsightsFilters state={state} onChange={setState} />
+                    }
+                />
+            </StickyContainer>
+            {withCharts && (
+                <InsightsCharts
+                    loading={loading}
+                    projects={projects}
+                    {...insightsData}
+                />
+            )}
+        </StyledWrapper>
+    );
+};
diff --git a/frontend/src/component/insights/LegacyInsightsCharts.tsx b/frontend/src/component/insights/LegacyInsightsCharts.tsx
deleted file mode 100644
index 512b4fdd73..0000000000
--- a/frontend/src/component/insights/LegacyInsightsCharts.tsx
+++ /dev/null
@@ -1,320 +0,0 @@
-import type { FC } from 'react';
-import { Box, Paper, styled } from '@mui/material';
-import { UserStats } from './componentsStat/UserStats/UserStats.tsx';
-import { UsersChart } from './componentsChart/UsersChart/UsersChart.tsx';
-import { UsersPerProjectChart } from './componentsChart/UsersPerProjectChart/UsersPerProjectChart.tsx';
-import { FlagStats } from './componentsStat/FlagStats/FlagStats.tsx';
-import { FlagsChart } from './componentsChart/FlagsChart/FlagsChart.tsx';
-import { FlagsProjectChart } from './componentsChart/FlagsProjectChart/FlagsProjectChart.tsx';
-import { HealthStats } from './componentsStat/HealthStats/HealthStats.tsx';
-import { ProjectHealthChart } from './componentsChart/ProjectHealthChart/ProjectHealthChart.tsx';
-import { TimeToProduction } from './componentsStat/TimeToProduction/TimeToProduction.tsx';
-import { TimeToProductionChart } from './componentsChart/TimeToProductionChart/TimeToProductionChart.tsx';
-import { MetricsSummaryChart } from './componentsChart/MetricsSummaryChart/MetricsSummaryChart.tsx';
-import { UpdatesPerEnvironmentTypeChart } from './componentsChart/UpdatesPerEnvironmentTypeChart/UpdatesPerEnvironmentTypeChart.tsx';
-import type { InstanceInsightsSchema } from 'openapi';
-import type { GroupedDataByProject } from './hooks/useGroupedProjectTrends.ts';
-import { allOption } from 'component/common/ProjectSelect/ProjectSelect';
-import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
-import { WidgetTitle } from './components/WidgetTitle/WidgetTitle.tsx';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-
-export interface IChartsProps {
-    flagTrends: InstanceInsightsSchema['flagTrends'];
-    projectsData: InstanceInsightsSchema['projectFlagTrends'];
-    groupedProjectsData: GroupedDataByProject<
-        InstanceInsightsSchema['projectFlagTrends']
-    >;
-    metricsData: InstanceInsightsSchema['metricsSummaryTrends'];
-    groupedMetricsData: GroupedDataByProject<
-        InstanceInsightsSchema['metricsSummaryTrends']
-    >;
-    userTrends: InstanceInsightsSchema['userTrends'];
-    environmentTypeTrends: InstanceInsightsSchema['environmentTypeTrends'];
-    summary: {
-        total: number;
-        active: number;
-        stale: number;
-        potentiallyStale: number;
-        averageUsers: number;
-        averageHealth?: string;
-        flagsPerUser?: string;
-        medianTimeToProduction?: number;
-    };
-    loading: boolean;
-    projects: string[];
-    allMetricsDatapoints: string[];
-}
-
-const StyledContainer = styled(Box)(({ theme }) => ({
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(2),
-}));
-
-const StyledWidget = styled(Paper)(({ theme }) => ({
-    borderRadius: `${theme.shape.borderRadiusLarge}px`,
-    boxShadow: 'none',
-    display: 'flex',
-    flexWrap: 'wrap',
-    [theme.breakpoints.up('md')]: {
-        flexDirection: 'row',
-        flexWrap: 'nowrap',
-    },
-}));
-
-const StyledWidgetContent = styled(Box)(({ theme }) => ({
-    padding: theme.spacing(3),
-    width: '100%',
-}));
-
-const StyledWidgetStats = styled(Box)<{ width?: number; padding?: number }>(
-    ({ theme, width = 300, padding = 3 }) => ({
-        display: 'flex',
-        flexDirection: 'column',
-        gap: theme.spacing(2),
-        padding: theme.spacing(padding),
-        minWidth: '100%',
-        [theme.breakpoints.up('md')]: {
-            minWidth: `${width}px`,
-            borderRight: `1px solid ${theme.palette.background.application}`,
-        },
-    }),
-);
-
-const StyledChartContainer = styled(Box)(({ theme }) => ({
-    position: 'relative',
-    minWidth: 0, // bugfix, see: https://github.com/chartjs/Chart.js/issues/4156#issuecomment-295180128
-    flexGrow: 1,
-    margin: 'auto 0',
-    padding: theme.spacing(3),
-}));
-
-export const LegacyInsightsCharts: FC<IChartsProps> = ({
-    projects,
-    summary,
-    userTrends,
-    groupedProjectsData,
-    flagTrends,
-    groupedMetricsData,
-    environmentTypeTrends,
-    allMetricsDatapoints,
-    loading,
-}) => {
-    const showAllProjects = projects[0] === allOption.id;
-    const isOneProjectSelected = projects.length === 1;
-    const { isEnterprise } = useUiConfig();
-
-    const lastUserTrend = userTrends[userTrends.length - 1];
-    const lastFlagTrend = flagTrends[flagTrends.length - 1];
-
-    const usersTotal = lastUserTrend?.total ?? 0;
-    const usersActive = lastUserTrend?.active ?? 0;
-    const usersInactive = lastUserTrend?.inactive ?? 0;
-    const flagsTotal = lastFlagTrend?.total ?? 0;
-
-    function getFlagsPerUser(flagsTotal: number, usersTotal: number) {
-        const flagsPerUserCalculation = flagsTotal / usersTotal;
-        return Number.isNaN(flagsPerUserCalculation)
-            ? 'N/A'
-            : flagsPerUserCalculation.toFixed(2);
-    }
-
-    return (
-        <StyledContainer>
-            <ConditionallyRender
-                condition={showAllProjects}
-                show={
-                    <>
-                        <StyledWidget>
-                            <StyledWidgetStats>
-                                <WidgetTitle title='Total users' />
-                                <UserStats
-                                    count={usersTotal}
-                                    active={usersActive}
-                                    inactive={usersInactive}
-                                    isLoading={loading}
-                                />
-                            </StyledWidgetStats>
-                            <StyledChartContainer>
-                                <UsersChart
-                                    userTrends={userTrends}
-                                    isLoading={loading}
-                                />
-                            </StyledChartContainer>
-                        </StyledWidget>
-                    </>
-                }
-                elseShow={
-                    <>
-                        <StyledWidget>
-                            <StyledWidgetStats>
-                                <WidgetTitle
-                                    title={
-                                        isOneProjectSelected
-                                            ? 'Users in project'
-                                            : 'Users per project on average'
-                                    }
-                                    tooltip={
-                                        isOneProjectSelected
-                                            ? 'Number of users in selected projects.'
-                                            : 'Average number of users for selected projects.'
-                                    }
-                                />
-                                <UserStats
-                                    count={summary.averageUsers}
-                                    isLoading={loading}
-                                />
-                            </StyledWidgetStats>
-                            <StyledChartContainer>
-                                <UsersPerProjectChart
-                                    projectFlagTrends={groupedProjectsData}
-                                    isLoading={loading}
-                                />
-                            </StyledChartContainer>
-                        </StyledWidget>
-                    </>
-                }
-            />
-            <ConditionallyRender
-                condition={isEnterprise()}
-                show={
-                    <>
-                        <StyledWidget>
-                            <StyledWidgetStats width={350} padding={0}>
-                                <HealthStats
-                                    value={summary.averageHealth}
-                                    healthy={summary.active}
-                                    stale={summary.stale}
-                                    potentiallyStale={summary.potentiallyStale}
-                                    title={
-                                        <WidgetTitle
-                                            title='Health'
-                                            tooltip={
-                                                'Percentage of flags that are not stale or potentially stale.'
-                                            }
-                                        />
-                                    }
-                                />
-                            </StyledWidgetStats>
-                            <StyledChartContainer>
-                                <ProjectHealthChart
-                                    projectFlagTrends={groupedProjectsData}
-                                    isAggregate={showAllProjects}
-                                    isLoading={loading}
-                                />
-                            </StyledChartContainer>
-                        </StyledWidget>
-                        <StyledWidget>
-                            <StyledWidgetStats>
-                                <WidgetTitle
-                                    title='Median time to production'
-                                    tooltip={`How long does it currently take on average from when a feature flag was created until it was enabled in a "production" type environment. This is calculated only from feature flags of the type "release" and is the median across the selected projects.`}
-                                />
-                                <TimeToProduction
-                                    daysToProduction={
-                                        summary.medianTimeToProduction
-                                    }
-                                />
-                            </StyledWidgetStats>
-                            <StyledChartContainer>
-                                <TimeToProductionChart
-                                    projectFlagTrends={groupedProjectsData}
-                                    isAggregate={showAllProjects}
-                                    isLoading={loading}
-                                />
-                            </StyledChartContainer>
-                        </StyledWidget>
-                    </>
-                }
-            />
-            <ConditionallyRender
-                condition={showAllProjects}
-                show={
-                    <>
-                        <StyledWidget>
-                            <StyledWidgetStats width={275}>
-                                <WidgetTitle title='Flags' />
-                                <FlagStats
-                                    count={flagsTotal}
-                                    flagsPerUser={getFlagsPerUser(
-                                        flagsTotal,
-                                        usersTotal,
-                                    )}
-                                    isLoading={loading}
-                                />
-                            </StyledWidgetStats>
-                            <StyledChartContainer>
-                                <FlagsChart
-                                    flagTrends={flagTrends}
-                                    isLoading={loading}
-                                />
-                            </StyledChartContainer>
-                        </StyledWidget>
-                    </>
-                }
-                elseShow={
-                    <>
-                        <StyledWidget>
-                            <StyledWidgetStats width={275}>
-                                <WidgetTitle title='Flags' />
-                                <FlagStats
-                                    count={summary.total}
-                                    flagsPerUser={''}
-                                    isLoading={loading}
-                                />
-                            </StyledWidgetStats>
-                            <StyledChartContainer>
-                                <FlagsProjectChart
-                                    projectFlagTrends={groupedProjectsData}
-                                    isLoading={loading}
-                                />
-                            </StyledChartContainer>
-                        </StyledWidget>
-                    </>
-                }
-            />
-            <ConditionallyRender
-                condition={isEnterprise()}
-                show={
-                    <>
-                        <StyledWidget>
-                            <StyledWidgetContent>
-                                <WidgetTitle
-                                    title='Flag evaluation metrics'
-                                    tooltip='Summary of all flag evaluations reported by SDKs.'
-                                />
-                                <StyledChartContainer>
-                                    <MetricsSummaryChart
-                                        metricsSummaryTrends={
-                                            groupedMetricsData
-                                        }
-                                        allDatapointsSorted={
-                                            allMetricsDatapoints
-                                        }
-                                        isAggregate={showAllProjects}
-                                        isLoading={loading}
-                                    />
-                                </StyledChartContainer>
-                            </StyledWidgetContent>
-                        </StyledWidget>
-                        <StyledWidget>
-                            <StyledWidgetContent>
-                                <WidgetTitle
-                                    title='Updates per environment type'
-                                    tooltip='Summary of all configuration updates per environment type.'
-                                />
-                                <UpdatesPerEnvironmentTypeChart
-                                    environmentTypeTrends={
-                                        environmentTypeTrends
-                                    }
-                                    isLoading={loading}
-                                />
-                            </StyledWidgetContent>
-                        </StyledWidget>
-                    </>
-                }
-            />
-        </StyledContainer>
-    );
-};
diff --git a/frontend/src/component/insights/sections/InsightsSection.tsx b/frontend/src/component/insights/sections/InsightsSection.tsx
new file mode 100644
index 0000000000..392144284c
--- /dev/null
+++ b/frontend/src/component/insights/sections/InsightsSection.tsx
@@ -0,0 +1,34 @@
+import { styled } from '@mui/material';
+import type { FC, PropsWithChildren, ReactNode } from 'react';
+
+const StyledSection = styled('section')(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(2),
+}));
+
+const SectionTitleRow = styled('div')(({ theme }) => ({
+    position: 'sticky',
+    top: 0,
+    zIndex: theme.zIndex.sticky,
+    paddingBlock: theme.spacing(2),
+    background: theme.palette.background.application,
+    transition: 'padding 0.3s ease',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    flexFlow: 'row wrap',
+    rowGap: theme.spacing(2),
+}));
+
+export const InsightsSection: FC<
+    PropsWithChildren<{ title: string; filters?: ReactNode }>
+> = ({ title, children, filters: HeaderActions }) => (
+    <StyledSection>
+        <SectionTitleRow>
+            <h2>{title}</h2>
+            {HeaderActions}
+        </SectionTitleRow>
+        {children}
+    </StyledSection>
+);
diff --git a/frontend/src/component/insights/sections/LifecycleInsights.tsx b/frontend/src/component/insights/sections/LifecycleInsights.tsx
new file mode 100644
index 0000000000..483ab2eed6
--- /dev/null
+++ b/frontend/src/component/insights/sections/LifecycleInsights.tsx
@@ -0,0 +1,26 @@
+import { usePersistentTableState } from 'hooks/usePersistentTableState';
+import type { FC } from 'react';
+import { FilterItemParam } from 'utils/serializeQueryParams';
+import { InsightsSection } from 'component/insights/sections/InsightsSection';
+import { InsightsFilters } from 'component/insights/InsightsFilters';
+
+export const LifecycleInsights: FC = () => {
+    const statePrefix = 'lifecycle-';
+    const stateConfig = {
+        [`${statePrefix}project`]: FilterItemParam,
+    };
+    const [state, setState] = usePersistentTableState('insights', stateConfig);
+
+    return (
+        <InsightsSection
+            title='Flags lifecycle currently'
+            filters={
+                <InsightsFilters
+                    state={state}
+                    onChange={setState}
+                    filterNamePrefix={statePrefix}
+                />
+            }
+        />
+    );
+};
diff --git a/frontend/src/component/insights/sections/PerformanceInsights.tsx b/frontend/src/component/insights/sections/PerformanceInsights.tsx
new file mode 100644
index 0000000000..8e5e560bb6
--- /dev/null
+++ b/frontend/src/component/insights/sections/PerformanceInsights.tsx
@@ -0,0 +1,186 @@
+import { allOption } from 'component/common/ProjectSelect/ProjectSelect';
+import { format, subMonths } from 'date-fns';
+import { useInsights } from 'hooks/api/getters/useInsights/useInsights';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import { usePersistentTableState } from 'hooks/usePersistentTableState';
+import type { FC } from 'react';
+import { withDefault } from 'use-query-params';
+import { FilterItemParam } from 'utils/serializeQueryParams';
+import { WidgetTitle } from 'component/insights/components/WidgetTitle/WidgetTitle';
+import { FlagsChart } from 'component/insights/componentsChart/FlagsChart/FlagsChart';
+import { FlagsProjectChart } from 'component/insights/componentsChart/FlagsProjectChart/FlagsProjectChart';
+import { MetricsSummaryChart } from 'component/insights/componentsChart/MetricsSummaryChart/MetricsSummaryChart';
+import { ProjectHealthChart } from 'component/insights/componentsChart/ProjectHealthChart/ProjectHealthChart';
+import { UpdatesPerEnvironmentTypeChart } from 'component/insights/componentsChart/UpdatesPerEnvironmentTypeChart/UpdatesPerEnvironmentTypeChart';
+import { FlagStats } from 'component/insights/componentsStat/FlagStats/FlagStats';
+import { HealthStats } from 'component/insights/componentsStat/HealthStats/HealthStats';
+import { useInsightsData } from 'component/insights/hooks/useInsightsData';
+import { InsightsSection } from 'component/insights/sections/InsightsSection';
+import { InsightsFilters } from 'component/insights/InsightsFilters';
+import {
+    StyledChartContainer,
+    StyledWidget,
+    StyledWidgetContent,
+    StyledWidgetStats,
+} from '../InsightsCharts.styles';
+
+export const PerformanceInsights: FC = () => {
+    const statePrefix = 'performance-';
+    const stateConfig = {
+        [`${statePrefix}project`]: FilterItemParam,
+        [`${statePrefix}from`]: withDefault(FilterItemParam, {
+            values: [format(subMonths(new Date(), 1), 'yyyy-MM-dd')],
+            operator: 'IS',
+        }),
+        [`${statePrefix}to`]: withDefault(FilterItemParam, {
+            values: [format(new Date(), 'yyyy-MM-dd')],
+            operator: 'IS',
+        }),
+    };
+    const [state, setState] = usePersistentTableState('insights', stateConfig, [
+        'performance-from',
+        'performance-to',
+    ]);
+
+    const { insights, loading } = useInsights(
+        state[`${statePrefix}from`]?.values[0],
+        state[`${statePrefix}to`]?.values[0],
+    );
+
+    const projects = state[`${statePrefix}project`]?.values ?? [allOption.id];
+
+    const showAllProjects = projects[0] === allOption.id;
+    const {
+        flagTrends,
+        summary,
+        groupedProjectsData,
+        userTrends,
+        groupedMetricsData,
+        allMetricsDatapoints,
+        environmentTypeTrends,
+    } = useInsightsData(insights, projects);
+
+    const { isEnterprise } = useUiConfig();
+    const lastUserTrend = userTrends[userTrends.length - 1];
+    const usersTotal = lastUserTrend?.total ?? 0;
+    const lastFlagTrend = flagTrends[flagTrends.length - 1];
+    const flagsTotal = lastFlagTrend?.total ?? 0;
+
+    function getFlagsPerUser(flagsTotal: number, usersTotal: number) {
+        const flagsPerUserCalculation = flagsTotal / usersTotal;
+        return Number.isNaN(flagsPerUserCalculation)
+            ? 'N/A'
+            : flagsPerUserCalculation.toFixed(2);
+    }
+
+    return (
+        <InsightsSection
+            title='Performance insights'
+            filters={
+                <InsightsFilters
+                    state={state}
+                    onChange={setState}
+                    filterNamePrefix={statePrefix}
+                />
+            }
+        >
+            {showAllProjects ? (
+                <StyledWidget>
+                    <StyledWidgetStats width={275}>
+                        <WidgetTitle title='Flags' />
+                        <FlagStats
+                            count={flagsTotal}
+                            flagsPerUser={getFlagsPerUser(
+                                flagsTotal,
+                                usersTotal,
+                            )}
+                            isLoading={loading}
+                        />
+                    </StyledWidgetStats>
+                    <StyledChartContainer>
+                        <FlagsChart
+                            flagTrends={flagTrends}
+                            isLoading={loading}
+                        />
+                    </StyledChartContainer>
+                </StyledWidget>
+            ) : (
+                <StyledWidget>
+                    <StyledWidgetStats width={275}>
+                        <WidgetTitle title='Flags' />
+                        <FlagStats
+                            count={summary.total}
+                            flagsPerUser={''}
+                            isLoading={loading}
+                        />
+                    </StyledWidgetStats>
+                    <StyledChartContainer>
+                        <FlagsProjectChart
+                            projectFlagTrends={groupedProjectsData}
+                            isLoading={loading}
+                        />
+                    </StyledChartContainer>
+                </StyledWidget>
+            )}
+            {isEnterprise() ? (
+                <StyledWidget>
+                    <StyledWidgetStats width={350} padding={0}>
+                        <HealthStats
+                            value={summary.averageHealth}
+                            healthy={summary.active}
+                            stale={summary.stale}
+                            potentiallyStale={summary.potentiallyStale}
+                            title={
+                                <WidgetTitle
+                                    title='Health'
+                                    tooltip={
+                                        'Percentage of flags that are not stale or potentially stale.'
+                                    }
+                                />
+                            }
+                        />
+                    </StyledWidgetStats>
+                    <StyledChartContainer>
+                        <ProjectHealthChart
+                            projectFlagTrends={groupedProjectsData}
+                            isAggregate={showAllProjects}
+                            isLoading={loading}
+                        />
+                    </StyledChartContainer>
+                </StyledWidget>
+            ) : null}
+            {isEnterprise() ? (
+                <>
+                    <StyledWidget>
+                        <StyledWidgetContent>
+                            <WidgetTitle
+                                title='Flag evaluation metrics'
+                                tooltip='Summary of all flag evaluations reported by SDKs.'
+                            />
+                            <StyledChartContainer>
+                                <MetricsSummaryChart
+                                    metricsSummaryTrends={groupedMetricsData}
+                                    allDatapointsSorted={allMetricsDatapoints}
+                                    isAggregate={showAllProjects}
+                                    isLoading={loading}
+                                />
+                            </StyledChartContainer>
+                        </StyledWidgetContent>
+                    </StyledWidget>
+                    <StyledWidget>
+                        <StyledWidgetContent>
+                            <WidgetTitle
+                                title='Updates per environment type'
+                                tooltip='Summary of all configuration updates per environment type.'
+                            />
+                            <UpdatesPerEnvironmentTypeChart
+                                environmentTypeTrends={environmentTypeTrends}
+                                isLoading={loading}
+                            />
+                        </StyledWidgetContent>
+                    </StyledWidget>
+                </>
+            ) : null}
+        </InsightsSection>
+    );
+};
diff --git a/frontend/src/component/insights/sections/UserInsights.tsx b/frontend/src/component/insights/sections/UserInsights.tsx
new file mode 100644
index 0000000000..08ef2a7237
--- /dev/null
+++ b/frontend/src/component/insights/sections/UserInsights.tsx
@@ -0,0 +1,119 @@
+import { allOption } from 'component/common/ProjectSelect/ProjectSelect';
+import { format, subMonths } from 'date-fns';
+import { useInsights } from 'hooks/api/getters/useInsights/useInsights';
+import { usePersistentTableState } from 'hooks/usePersistentTableState';
+import type { FC } from 'react';
+import { withDefault } from 'use-query-params';
+import { FilterItemParam } from 'utils/serializeQueryParams';
+import { WidgetTitle } from 'component/insights/components/WidgetTitle/WidgetTitle';
+import { UsersChart } from 'component/insights/componentsChart/UsersChart/UsersChart';
+import { UsersPerProjectChart } from 'component/insights/componentsChart/UsersPerProjectChart/UsersPerProjectChart';
+import { UserStats } from 'component/insights/componentsStat/UserStats/UserStats';
+import { useInsightsData } from 'component/insights/hooks/useInsightsData';
+import {
+    StyledChartContainer,
+    StyledWidget,
+    StyledWidgetStats,
+} from 'component/insights/InsightsCharts.styles';
+import { InsightsSection } from 'component/insights/sections/InsightsSection';
+import { InsightsFilters } from 'component/insights/InsightsFilters';
+
+export const UserInsights: FC = () => {
+    const statePrefix = 'users-';
+    const stateConfig = {
+        [`${statePrefix}project`]: FilterItemParam,
+        [`${statePrefix}from`]: withDefault(FilterItemParam, {
+            values: [format(subMonths(new Date(), 1), 'yyyy-MM-dd')],
+            operator: 'IS',
+        }),
+        [`${statePrefix}to`]: withDefault(FilterItemParam, {
+            values: [format(new Date(), 'yyyy-MM-dd')],
+            operator: 'IS',
+        }),
+    };
+    const [state, setState] = usePersistentTableState(
+        'insights-users',
+        stateConfig,
+        ['users-from', 'users-to'],
+    );
+
+    const { insights, loading } = useInsights(
+        state['users-from']?.values[0],
+        state['users-to']?.values[0],
+    );
+
+    const projects = state['users-project']?.values ?? [allOption.id];
+
+    const showAllProjects = projects[0] === allOption.id;
+    const { summary, groupedProjectsData, userTrends } = useInsightsData(
+        insights,
+        projects,
+    );
+
+    const lastUserTrend = userTrends[userTrends.length - 1];
+    const usersTotal = lastUserTrend?.total ?? 0;
+    const usersActive = lastUserTrend?.active ?? 0;
+    const usersInactive = lastUserTrend?.inactive ?? 0;
+
+    const isOneProjectSelected = projects.length === 1;
+
+    return (
+        <InsightsSection
+            title='User insights'
+            filters={
+                <InsightsFilters
+                    state={state}
+                    onChange={setState}
+                    filterNamePrefix={statePrefix}
+                />
+            }
+        >
+            {showAllProjects ? (
+                <StyledWidget>
+                    <StyledWidgetStats>
+                        <WidgetTitle title='Total users' />
+                        <UserStats
+                            count={usersTotal}
+                            active={usersActive}
+                            inactive={usersInactive}
+                            isLoading={loading}
+                        />
+                    </StyledWidgetStats>
+                    <StyledChartContainer>
+                        <UsersChart
+                            userTrends={userTrends}
+                            isLoading={loading}
+                        />
+                    </StyledChartContainer>
+                </StyledWidget>
+            ) : (
+                <StyledWidget>
+                    <StyledWidgetStats>
+                        <WidgetTitle
+                            title={
+                                isOneProjectSelected
+                                    ? 'Users in project'
+                                    : 'Users per project on average'
+                            }
+                            tooltip={
+                                isOneProjectSelected
+                                    ? 'Number of users in selected projects.'
+                                    : 'Average number of users for selected projects.'
+                            }
+                        />
+                        <UserStats
+                            count={summary.averageUsers}
+                            isLoading={loading}
+                        />
+                    </StyledWidgetStats>
+                    <StyledChartContainer>
+                        <UsersPerProjectChart
+                            projectFlagTrends={groupedProjectsData}
+                            isLoading={loading}
+                        />
+                    </StyledChartContainer>
+                </StyledWidget>
+            )}
+        </InsightsSection>
+    );
+};
diff --git a/frontend/src/hooks/usePersistentTableState.ts b/frontend/src/hooks/usePersistentTableState.ts
index b9148fb462..6087033bc8 100644
--- a/frontend/src/hooks/usePersistentTableState.ts
+++ b/frontend/src/hooks/usePersistentTableState.ts
@@ -34,7 +34,7 @@ const usePersistentSearchParams = <T extends QueryParamConfigMap>(
 export const usePersistentTableState = <T extends QueryParamConfigMap>(
     key: string,
     queryParamsDefinition: T,
-    excludedFromStorage: string[] = ['offset'],
+    excludedFromStorage: (keyof T)[] = ['offset'],
 ) => {
     const updateStoredParams = usePersistentSearchParams(
         key,