Admin panel init (#8742)

WIP
Related issues - 
#7090 
#8547 
Master issue - 
#4499

---------

Co-authored-by: Félix Malfait <felix@twenty.com>

packages/twenty-front/src/modules/app/components/AppRouter.tsx

@@ -1,4 +1,5 @@
 import { useCreateAppRouter } from '@/app/hooks/useCreateAppRouter';
+import { currentUserState } from '@/auth/states/currentUserState';
 import { billingState } from '@/client-config/states/billingState';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { RouterProvider } from 'react-router-dom';
@@ -16,6 +17,10 @@ export const AppRouter = () => {
   const isBillingPageEnabled =
     billing?.isBillingEnabled && !isFreeAccessEnabled;
 
+  const currentUser = useRecoilValue(currentUserState);
+
+  const isAdminPageEnabled = currentUser?.canImpersonate;
+
   return (
     <RouterProvider
       router={useCreateAppRouter(
@@ -23,6 +28,7 @@ export const AppRouter = () => {
         isCRMMigrationEnabled,
         isServerlessFunctionSettingsEnabled,
         isSSOEnabled,
+        isAdminPageEnabled,
       )}
     />
   );

packages/twenty-front/src/modules/app/components/SettingsRoutes.tsx

@@ -242,11 +242,26 @@ const SettingsSecuritySSOIdentifyProvider = lazy(() =>
   ),
 );
 
+const SettingsAdmin = lazy(() =>
+  import('~/pages/settings/admin-panel/SettingsAdmin').then((module) => ({
+    default: module.SettingsAdmin,
+  })),
+);
+
+const SettingsAdminFeatureFlags = lazy(() =>
+  import('~/pages/settings/admin-panel/SettingsAdminFeatureFlags').then(
+    (module) => ({
+      default: module.SettingsAdminFeatureFlags,
+    }),
+  ),
+);
+
 type SettingsRoutesProps = {
   isBillingEnabled?: boolean;
   isCRMMigrationEnabled?: boolean;
   isServerlessFunctionSettingsEnabled?: boolean;
   isSSOEnabled?: boolean;
+  isAdminPageEnabled?: boolean;
 };
 
 export const SettingsRoutes = ({
@@ -254,6 +269,7 @@ export const SettingsRoutes = ({
   isCRMMigrationEnabled,
   isServerlessFunctionSettingsEnabled,
   isSSOEnabled,
+  isAdminPageEnabled,
 }: SettingsRoutesProps) => (
   <Suspense fallback={<SettingsSkeletonLoader />}>
     <Routes>
@@ -375,6 +391,15 @@ export const SettingsRoutes = ({
           />
         </>
       )}
+      {isAdminPageEnabled && (
+        <>
+          <Route path={SettingsPath.AdminPanel} element={<SettingsAdmin />} />
+          <Route
+            path={SettingsPath.FeatureFlags}
+            element={<SettingsAdminFeatureFlags />}
+          />
+        </>
+      )}
     </Routes>
   </Suspense>
 );