From f7ffa6ff9ebd3b370b2d3cbe581919d6a4f3cc07 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Tue, 10 Dec 2024 16:33:50 +0100
Subject: [PATCH 1/3] fix(frontend): improved conditional logic and added not
 found page

---
 agenta-web/src/components/Layout/Layout.tsx | 32 +++++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/agenta-web/src/components/Layout/Layout.tsx b/agenta-web/src/components/Layout/Layout.tsx
index b1cbcc8209..38cde0f80b 100644
--- a/agenta-web/src/components/Layout/Layout.tsx
+++ b/agenta-web/src/components/Layout/Layout.tsx
@@ -1,5 +1,5 @@
 import React, {useEffect, useMemo, useState} from "react"
-import {Breadcrumb, ConfigProvider, Layout, Modal, Space, Typography, theme} from "antd"
+import {Breadcrumb, Button, ConfigProvider, Layout, Modal, Space, Typography, theme} from "antd"
 import Sidebar from "../Sidebar/Sidebar"
 import {GithubFilled, LinkedinFilled, TwitterOutlined} from "@ant-design/icons"
 import Link from "next/link"
@@ -19,6 +19,7 @@ import {Lightning} from "@phosphor-icons/react"
 import packageJsonData from "../../../package.json"
 import {useProjectData} from "@/contexts/project.context"
 import {dynamicContext} from "@/lib/helpers/dynamic"
+import NoResultsFound from "../NoResultsFound/NoResultsFound"
 
 const {Content, Footer} = Layout
 const {Text} = Typography
@@ -95,6 +96,21 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
             fontWeight: 600,
         },
     },
+    notFoundContainer: {
+        display: "flex",
+        flexDirection: "column",
+        minHeight: "100vh",
+        alignItems: "center",
+        justifyContent: "center",
+        "& h1": {
+            fontSize: 24,
+            fontWeight: 600,
+        },
+        "& p": {
+            fontSize: 14,
+            marginTop: 8,
+        },
+    },
 }))
 
 type LayoutProps = {
@@ -190,7 +206,19 @@ const App: React.FC<LayoutProps> = ({children}) => {
     }, [appTheme])
 
     // wait unitl we have the app id, if its an app route
-    if (isAppRoute && (!appId || !currentApp)) return null
+    if (isAppRoute && !appId) return null
+
+    if (appId && !currentApp)
+        return (
+            <div className={classes.notFoundContainer}>
+                <h1>404 - Page Not Found</h1>
+                <p>This page could not be found.</p>
+
+                <Button type="primary" onClick={() => router.push("/apps")}>
+                    Back To Apps
+                </Button>
+            </div>
+        )
 
     const isAuthRoute =
         router.pathname.includes("/auth") || router.pathname.includes("/post-signup")

From da7c25f46e21907bd1f67a8e6b2bbfb9e08ceddb Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Tue, 10 Dec 2024 16:36:49 +0100
Subject: [PATCH 2/3] fix(frontend): removed unused import

---
 agenta-web/src/components/Layout/Layout.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/agenta-web/src/components/Layout/Layout.tsx b/agenta-web/src/components/Layout/Layout.tsx
index 38cde0f80b..d8f0c6ffa3 100644
--- a/agenta-web/src/components/Layout/Layout.tsx
+++ b/agenta-web/src/components/Layout/Layout.tsx
@@ -19,7 +19,6 @@ import {Lightning} from "@phosphor-icons/react"
 import packageJsonData from "../../../package.json"
 import {useProjectData} from "@/contexts/project.context"
 import {dynamicContext} from "@/lib/helpers/dynamic"
-import NoResultsFound from "../NoResultsFound/NoResultsFound"
 
 const {Content, Footer} = Layout
 const {Text} = Typography

From b1e5d68d089b2e5470afc41ddd341208db1f5375 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Tue, 10 Dec 2024 16:52:29 +0100
Subject: [PATCH 3/3] enhancement(frontend): replaced elements with antd
 components

---
 agenta-web/src/components/Layout/Layout.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/agenta-web/src/components/Layout/Layout.tsx b/agenta-web/src/components/Layout/Layout.tsx
index d8f0c6ffa3..8b471ce51e 100644
--- a/agenta-web/src/components/Layout/Layout.tsx
+++ b/agenta-web/src/components/Layout/Layout.tsx
@@ -101,11 +101,11 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
         minHeight: "100vh",
         alignItems: "center",
         justifyContent: "center",
-        "& h1": {
+        "& .ant-typography:nth-of-type(1)": {
             fontSize: 24,
             fontWeight: 600,
         },
-        "& p": {
+        "& .ant-typography:nth-of-type(2)": {
             fontSize: 14,
             marginTop: 8,
         },
@@ -210,8 +210,8 @@ const App: React.FC<LayoutProps> = ({children}) => {
     if (appId && !currentApp)
         return (
             <div className={classes.notFoundContainer}>
-                <h1>404 - Page Not Found</h1>
-                <p>This page could not be found.</p>
+                <Typography.Text>404 - Page Not Found</Typography.Text>
+                <Typography.Text>This page could not be found.</Typography.Text>
 
                 <Button type="primary" onClick={() => router.push("/apps")}>
                     Back To Apps