feat: personal dashboard route

frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationList.tsx

@@ -15,6 +15,7 @@ import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import SearchIcon from '@mui/icons-material/Search';
 import PlaygroundIcon from '@mui/icons-material/AutoFixNormal';
 import InsightsIcon from '@mui/icons-material/Insights';
+import PersonalDashboardIcon from '@mui/icons-material/DashboardOutlined';
 import Accordion from '@mui/material/Accordion';
 import AccordionDetails from '@mui/material/AccordionDetails';
 import AccordionSummary from '@mui/material/AccordionSummary';
@@ -23,6 +24,7 @@ import FlagIcon from '@mui/icons-material/OutlinedFlag';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview';
 import { ProjectIcon } from 'component/common/ProjectIcon/ProjectIcon';
+import { useUiFlag } from 'hooks/useUiFlag';
 
 const StyledBadgeContainer = styled('div')(({ theme }) => ({
     paddingLeft: theme.spacing(2),
@@ -155,10 +157,22 @@ export const PrimaryNavigationList: FC<{
     activeItem?: string;
 }> = ({ mode, onClick, activeItem }) => {
     const DynamicListItem = mode === 'mini' ? MiniListItem : FullListItem;
+    const personalDashboardUIEnabled = useUiFlag('personalDashboardUI');
     const { isOss } = useUiConfig();
 
     return (
         <List>
+            {personalDashboardUIEnabled ? (
+                <DynamicListItem
+                    href='/personal'
+                    text='Personal Dahsboard'
+                    onClick={() => onClick('/personal')}
+                    selected={activeItem === '/personal'}
+                >
+                    <PersonalDashboardIcon />
+                </DynamicListItem>
+            ) : null}
+
             <DynamicListItem
                 href='/projects'
                 text='Projects'

frontend/src/component/menu/routes.ts

@@ -47,6 +47,7 @@ import { FeedbackList } from '../feedbackNew/FeedbackList';
 import { Application } from 'component/application/Application';
 import { Signals } from 'component/signals/Signals';
 import { LazyCreateProject } from '../project/Project/CreateProject/LazyCreateProject';
+import { PersonalDashboard } from '../personalDashboard/PersonalDashboard';
 
 export const routes: IRoute[] = [
     // Splash
@@ -58,6 +59,14 @@ export const routes: IRoute[] = [
         menu: {},
         isStandalone: true,
     },
+    // Personal Dashboard
+    {
+        path: '/personal',
+        title: 'Personal Dashboard',
+        component: PersonalDashboard,
+        type: 'protected',
+        menu: { mobile: true },
+    },
 
     // Project
     {

frontend/src/component/personalDashboard/PersonalDashboard.tsx

@@ -0,0 +1,3 @@
+export const PersonalDashboard = () => {
+    return <>Personal Dashboard</>;
+};

frontend/src/interfaces/uiConfig.ts

@@ -91,6 +91,7 @@ export type UiFlags = {
     projectListImprovements?: boolean;
     onboardingUI?: boolean;
     eventTimeline?: boolean;
+    personalDashboardUI?: boolean;
 };
 
 export interface IVersionInfo {

src/lib/types/experimental.ts

@@ -64,7 +64,8 @@ export type IFlagKey =
     | 'onboardingMetrics'
     | 'onboardingUI'
     | 'projectRoleAssignment'
-    | 'eventTimeline';
+    | 'eventTimeline'
+    | 'personalDashboardUI';
 
 export type IFlags = Partial<{ [key in IFlagKey]: boolean | Variant }>;
 
@@ -317,6 +318,10 @@ const flags: IFlags = {
         process.env.UNLEASH_EXPERIMENTAL_EVENT_TIMELINE,
         false,
     ),
+    personalDashboardUI: parseEnvVarBoolean(
+        process.env.UNLEASH_EXPERIMENTAL_PERSONAL_DASHBOARD_UI,
+        false,
+    ),
 };
 
 export const defaultExperimentalOptions: IExperimentalOptions = {