diff --git a/frontend/src/component/personalDashboard/PersonalDashboard.tsx b/frontend/src/component/personalDashboard/PersonalDashboard.tsx
index d2ca488a69..d9c684f6de 100644
--- a/frontend/src/component/personalDashboard/PersonalDashboard.tsx
+++ b/frontend/src/component/personalDashboard/PersonalDashboard.tsx
@@ -20,6 +20,8 @@ import { ConnectSDK, CreateFlag } from './ConnectSDK';
import { PlaceholderFlagMetricsChart } from './FlagMetricsChart';
import { WelcomeDialog } from './WelcomeDialog';
import { useLocalStorageState } from 'hooks/useLocalStorageState';
+import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview';
+import { ProjectSetupComplete } from './ProjectSetupComplete';
const ScreenExplanation = styled(Typography)(({ theme }) => ({
marginTop: theme.spacing(1),
@@ -141,6 +143,15 @@ export const PersonalDashboard = () => {
const { projects, activeProject, setActiveProject } = useProjects();
+ const { project: activeProjectOverview, loading } =
+ useProjectOverview(activeProject);
+
+ const onboardingCompleted = Boolean(
+ !loading &&
+ activeProject &&
+ activeProjectOverview?.onboardingStatus.status === 'onboarded',
+ );
+
const [welcomeDialog, setWelcomeDialog] = useLocalStorageState<
'seen' | 'not_seen'
>('welcome-dialog:v1', 'not_seen');
@@ -216,7 +227,9 @@ export const PersonalDashboard = () => {
- {activeProject ? (
+ {onboardingCompleted ? (
+
+ ) : activeProject ? (
) : null}
diff --git a/frontend/src/component/personalDashboard/ProjectSetupComplete.tsx b/frontend/src/component/personalDashboard/ProjectSetupComplete.tsx
new file mode 100644
index 0000000000..b656bd4da3
--- /dev/null
+++ b/frontend/src/component/personalDashboard/ProjectSetupComplete.tsx
@@ -0,0 +1,45 @@
+import { styled, Typography } from '@mui/material';
+import type { FC } from 'react';
+import { Link } from 'react-router-dom';
+import Lightbulb from '@mui/icons-material/LightbulbOutlined';
+
+const TitleContainer = styled('div')(({ theme }) => ({
+ display: 'flex',
+ flexDirection: 'row',
+ gap: theme.spacing(2),
+ alignItems: 'center',
+ justifyContent: 'center',
+}));
+
+const ActionBox = styled('article')(({ theme }) => ({
+ padding: theme.spacing(4, 2),
+ display: 'flex',
+ gap: theme.spacing(3),
+ flexDirection: 'column',
+}));
+
+export const ProjectSetupComplete: FC<{ project: string }> = ({ project }) => {
+ return (
+
+
+
+ Project Insight
+
+
+ This project already has connected SDKs and existing feature
+ flags.
+
+
+
+
+ Create a new feature flag
+ {' '}
+ or go to the{' '}
+
+ go to the project
+ {' '}
+ to work with existing flags
+
+
+ );
+};