[TM-1486] Provide access to dashboard for admin users

src/middleware.page.ts

@@ -1,5 +1,5 @@
 import * as Sentry from "@sentry/nextjs";
-import { NextRequest } from "next/server";
+import { NextRequest, NextResponse } from "next/server";
 
 import { isAdmin, UserRole } from "@/admin/apiProvider/utils/user";
 import { OrganisationDto, UserDto } from "@/generated/v3/userService/userServiceSchemas";
@@ -15,6 +15,10 @@ export async function middleware(request: NextRequest) {
     const middlewareCache = request.cookies.get(MiddlewareCacheKey)?.value;
 
     if (!!accessToken && !!middlewareCache) {
+      // Skip middleware for dashboard routes to prevent redirect loop
+      if (request.nextUrl.pathname.startsWith("/dashboard")) {
+        return NextResponse.next();
+      }
       //If middleware result is cached bypass api call to improve performance
       matcher.when(middlewareCache.includes("admin"))?.redirect(middlewareCache);
       matcher.exact("/")?.redirect(middlewareCache);
@@ -63,7 +67,13 @@ export async function middleware(request: NextRequest) {
           () => {
             //Email is verified
             const userIsAdmin = isAdmin(user?.primaryRole as UserRole);
+            // Allow admin users to access dashboard routes
+            if (userIsAdmin && request.nextUrl.pathname.startsWith("/dashboard")) {
+              matcher.next();
+              return matcher.getResult();
+            }
 
+            // Default admin redirect for non-dashboard routes
             matcher.when(user != null && userIsAdmin)?.redirect(`/admin`, { cacheResponse: true });
 
             matcher

src/pages/_app.tsx

@@ -8,7 +8,6 @@ import App from "next/app";
 import dynamic from "next/dynamic";
 import { useRouter } from "next/router";
 import nookies from "nookies";
-import { Else, If, Then } from "react-if";
 import { Provider as ReduxProvider } from "react-redux";
 
 import Toast from "@/components/elements/Toast/Toast";
@@ -50,22 +49,7 @@ const _App = ({ Component, ...rest }: AppProps) => {
   setClientSideTranslations(props);
   setupYup(t);
 
-  if (isAdmin)
-    return (
-      <ReduxProvider store={store}>
-        <WrappedQueryClientProvider>
-          <LoadingProvider>
-            <NotificationProvider>
-              <ModalProvider>
-                <ModalRoot />
-                <Component {...pageProps} />
-              </ModalProvider>
-            </NotificationProvider>
-          </LoadingProvider>
-        </WrappedQueryClientProvider>
-      </ReduxProvider>
-    );
-  else
+  if (isOnDashboards) {
     return (
       <ReduxProvider store={store}>
         <ToastProvider>
@@ -78,21 +62,11 @@ const _App = ({ Component, ...rest }: AppProps) => {
                       <NavbarProvider>
                         <ModalRoot />
                         <Toast />
-                        <If condition={isOnDashboards}>
-                          <Then>
-                            <DashboardAnalyticsWrapper>
-                              <DashboardLayout>
-                                <Component {...pageProps} />
-                              </DashboardLayout>
-                            </DashboardAnalyticsWrapper>
-                          </Then>
-                          <Else>
-                            <MainLayout>
-                              <Component {...pageProps} />
-                              <CookieBanner />
-                            </MainLayout>
-                          </Else>
-                        </If>
+                        <DashboardAnalyticsWrapper>
+                          <DashboardLayout>
+                            <Component {...pageProps} />
+                          </DashboardLayout>
+                        </DashboardAnalyticsWrapper>
                       </NavbarProvider>
                     </ModalProvider>
                   </NotificationProvider>
@@ -104,6 +78,53 @@ const _App = ({ Component, ...rest }: AppProps) => {
         </ToastProvider>
       </ReduxProvider>
     );
+  }
+
+  // For admin pages (not dashboard)
+  if (isAdmin) {
+    return (
+      <ReduxProvider store={store}>
+        <WrappedQueryClientProvider>
+          <LoadingProvider>
+            <NotificationProvider>
+              <ModalProvider>
+                <ModalRoot />
+                <Component {...pageProps} />
+              </ModalProvider>
+            </NotificationProvider>
+          </LoadingProvider>
+        </WrappedQueryClientProvider>
+      </ReduxProvider>
+    );
+  }
+
+  return (
+    <ReduxProvider store={store}>
+      <ToastProvider>
+        <WrappedQueryClientProvider>
+          <Hydrate state={pageProps.dehydratedState}>
+            <RouteHistoryProvider>
+              <LoadingProvider>
+                <NotificationProvider>
+                  <ModalProvider>
+                    <NavbarProvider>
+                      <ModalRoot />
+                      <Toast />
+                      <MainLayout>
+                        <Component {...pageProps} />
+                        <CookieBanner />
+                      </MainLayout>
+                    </NavbarProvider>
+                  </ModalProvider>
+                </NotificationProvider>
+              </LoadingProvider>
+            </RouteHistoryProvider>
+          </Hydrate>
+          <ReactQueryDevtools initialIsOpen={false} />
+        </WrappedQueryClientProvider>
+      </ToastProvider>
+    </ReduxProvider>
+  );
 };
 
 _App.getInitialProps = wrapper.getInitialAppProps(store => async (context: AppContext) => {

src/utils/MiddlewareMatcher.ts

@@ -121,7 +121,7 @@ export class MiddlewareMatcher {
    * To get matcher result and return at the end of middleware function
    * @returns matcher result
    */
-  getResult() {
+  getResult(): Response | null | undefined {
     return this.result;
   }
 }