Add navigation and Agents and Settings Pages (#36)

* Bump hashicorp/random from 3.4.3 to 3.6.3 in /infra (#5)

Bumps [hashicorp/random](https://github.com/hashicorp/terraform-provider-random) from 3.4.3 to 3.6.3.
- [Release notes](https://github.com/hashicorp/terraform-provider-random/releases)
- [Changelog](https://github.com/hashicorp/terraform-provider-random/blob/main/CHANGELOG.md)
- [Commits](hashicorp/terraform-provider-random@v3.4.3...v3.6.3)

---
updated-dependencies:
- dependency-name: hashicorp/random
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump hashicorp/azuread from 3.0.2 to 3.1.0 in /infra (#6)

Bumps [hashicorp/azuread](https://github.com/hashicorp/terraform-provider-azuread) from 3.0.2 to 3.1.0.
- [Release notes](https://github.com/hashicorp/terraform-provider-azuread/releases)
- [Changelog](https://github.com/hashicorp/terraform-provider-azuread/blob/main/CHANGELOG.md)
- [Commits](hashicorp/terraform-provider-azuread@v3.0.2...v3.1.0)

---
updated-dependencies:
- dependency-name: hashicorp/azuread
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump hashicorp/azurerm from 4.14.0 to 4.16.0 in /infra (#15)

Bumps [hashicorp/azurerm](https://github.com/hashicorp/terraform-provider-azurerm) from 4.14.0 to 4.16.0.
- [Release notes](https://github.com/hashicorp/terraform-provider-azurerm/releases)
- [Changelog](https://github.com/hashicorp/terraform-provider-azurerm/blob/main/CHANGELOG.md)
- [Commits](hashicorp/terraform-provider-azurerm@v4.14.0...v4.16.0)

---
updated-dependencies:
- dependency-name: hashicorp/azurerm
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump azure/azapi from 2.1.0 to 2.2.0 in /infra (#18)

Bumps [azure/azapi](https://github.com/Azure/terraform-provider-azapi) from 2.1.0 to 2.2.0.
- [Release notes](https://github.com/Azure/terraform-provider-azapi/releases)
- [Changelog](https://github.com/Azure/terraform-provider-azapi/blob/main/CHANGELOG.md)
- [Commits](Azure/terraform-provider-azapi@v2.1.0...v2.2.0)

---
updated-dependencies:
- dependency-name: azure/azapi
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump eslint from 9.17.0 to 9.18.0 in /app/ui (#17)

Bumps [eslint](https://github.com/eslint/eslint) from 9.17.0 to 9.18.0.
- [Release notes](https://github.com/eslint/eslint/releases)
- [Changelog](https://github.com/eslint/eslint/blob/main/CHANGELOG.md)
- [Commits](eslint/eslint@v9.17.0...v9.18.0)

---
updated-dependencies:
- dependency-name: eslint
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump fastapi-azure-auth from 5.0.0 to 5.0.1 in /app/api (#8)

Bumps [fastapi-azure-auth](https://github.com/intility/fastapi-azure-auth) from 5.0.0 to 5.0.1.
- [Release notes](https://github.com/intility/fastapi-azure-auth/releases)
- [Commits](intility/fastapi-azure-auth@5.0.0...5.0.1)

---
updated-dependencies:
- dependency-name: fastapi-azure-auth
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump uvicorn[standard] from 0.32.0 to 0.34.0 in /app/api (#9)

Bumps [uvicorn[standard]](https://github.com/encode/uvicorn) from 0.32.0 to 0.34.0.
- [Release notes](https://github.com/encode/uvicorn/releases)
- [Changelog](https://github.com/encode/uvicorn/blob/master/docs/release-notes.md)
- [Commits](encode/uvicorn@0.32.0...0.34.0)

---
updated-dependencies:
- dependency-name: uvicorn[standard]
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump azure-cosmos from 4.7.0 to 4.9.0 in /app/api (#12)

Bumps [azure-cosmos](https://github.com/Azure/azure-sdk-for-python) from 4.7.0 to 4.9.0.
- [Release notes](https://github.com/Azure/azure-sdk-for-python/releases)
- [Changelog](https://github.com/Azure/azure-sdk-for-python/blob/main/doc/esrp_release.md)
- [Commits](Azure/azure-sdk-for-python@azure-cosmos_4.7.0...azure-cosmos_4.9.0)

---
updated-dependencies:
- dependency-name: azure-cosmos
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump opencensus-ext-azure from 1.1.13 to 1.1.14 in /app/api (#7)

Bumps [opencensus-ext-azure](https://github.com/census-instrumentation/opencensus-python) from 1.1.13 to 1.1.14.
- [Release notes](https://github.com/census-instrumentation/opencensus-python/releases)
- [Changelog](https://github.com/census-instrumentation/opencensus-python/blob/master/CHANGELOG.md)
- [Commits](https://github.com/census-instrumentation/opencensus-python/commits)

---
updated-dependencies:
- dependency-name: opencensus-ext-azure
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump azure-identity from 1.17.1 to 1.19.0 in /app/api (#10)

Bumps [azure-identity](https://github.com/Azure/azure-sdk-for-python) from 1.17.1 to 1.19.0.
- [Release notes](https://github.com/Azure/azure-sdk-for-python/releases)
- [Changelog](https://github.com/Azure/azure-sdk-for-python/blob/main/doc/esrp_release.md)
- [Commits](Azure/azure-sdk-for-python@azure-identity_1.17.1...azure-identity_1.19.0)

---
updated-dependencies:
- dependency-name: azure-identity
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump @azure/identity from 4.5.0 to 4.6.0 in /app/ui (#13)

Bumps [@azure/identity](https://github.com/Azure/azure-sdk-for-js) from 4.5.0 to 4.6.0.
- [Release notes](https://github.com/Azure/azure-sdk-for-js/releases)
- [Changelog](https://github.com/Azure/azure-sdk-for-js/blob/main/documentation/Changelog-for-next-generation.md)
- [Commits](https://github.com/Azure/azure-sdk-for-js/compare/@azure/identity_4.5.0...@azure/identity_4.6.0)

---
updated-dependencies:
- dependency-name: "@azure/identity"
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump react-router-dom from 7.1.1 to 7.1.3 in /app/ui (#11)

Bumps [react-router-dom](https://github.com/remix-run/react-router/tree/HEAD/packages/react-router-dom) from 7.1.1 to 7.1.3.
- [Release notes](https://github.com/remix-run/react-router/releases)
- [Changelog](https://github.com/remix-run/react-router/blob/main/packages/react-router-dom/CHANGELOG.md)
- [Commits](https://github.com/remix-run/react-router/commits/react-router-dom@7.1.3/packages/react-router-dom)

---
updated-dependencies:
- dependency-name: react-router-dom
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump vite from 6.0.7 to 6.0.11 in /app/ui in the npm_and_yarn group (#32)

Bumps the npm_and_yarn group in /app/ui with 1 update: [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite).


Updates `vite` from 6.0.7 to 6.0.11
- [Release notes](https://github.com/vitejs/vite/releases)
- [Changelog](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md)
- [Commits](https://github.com/vitejs/vite/commits/v6.0.11/packages/vite)

---
updated-dependencies:
- dependency-name: vite
  dependency-type: direct:development
  dependency-group: npm_and_yarn
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump @types/node from 20.17.12 to 22.10.9 in /app/ui (#33)

Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 20.17.12 to 22.10.9.
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node)

---
updated-dependencies:
- dependency-name: "@types/node"
  dependency-type: direct:development
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Add pages and navigation

* Update styles

* Revert non-intentional changes

* Revert mitakenly upgraded packages

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: AJ (Ashitosh Jedhe) <ajedhe@microsoft.com>

app/ui/src/App.tsx

@@ -1,12 +1,11 @@
 import { IPublicClientApplication } from "@azure/msal-browser";
 import { MsalAuthenticationTemplate, MsalProvider } from "@azure/msal-react";
-import { Avatar, Button, makeStyles } from "@fluentui/react-components";
+import { Button, makeStyles } from "@fluentui/react-components";
 import { ChevronLeft20Regular } from "@fluentui/react-icons";
-import { Route, Routes, useLocation, useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import logo from './assets/Azure.svg';
 import { interactionType, loginRequest } from "./authConfig";
-import Files from "./pages/files/Files";
-import Review from "./pages/review/Review";
+import { NavMenu, Pages } from "./Navigation";
 
 type AppProps = {
   pca: IPublicClientApplication;
@@ -50,7 +49,7 @@ function App({ pca }: AppProps) {
               <img src={logo} alt="logo" />
               <h3>AI Document Review</h3>
             </div>
-            <Avatar aria-label="User" size={40} />
+            <NavMenu />
           </header>
 
           <main className={classes.main}>
@@ -62,13 +61,5 @@ function App({ pca }: AppProps) {
   );
 }
 
-function Pages() {
-  return (
-      <Routes>
-          <Route path="/" element={<Files />} />
-          <Route path="/review" element={<Review />} />
-      </Routes>
-  );
-}
 
 export default App;

app/ui/src/Navigation.tsx

@@ -0,0 +1,106 @@
+import {
+  Button,
+  Menu,
+  MenuTrigger,
+  MenuPopover,
+  MenuList,
+  MenuItem,
+  MenuGroup,
+  MenuGroupHeader,
+  MenuDivider,
+  Avatar,
+  MenuItemLink,
+} from "@fluentui/react-components";
+import {
+  ListBar20Filled,
+  Prompt20Filled,
+  Home20Filled,
+  Settings20Filled,
+  DocumentBulletListFilled,
+} from "@fluentui/react-icons";
+import { useNavigate, useLocation, Routes, Route } from "react-router-dom";
+import Agents from "./pages/admin/Agents";
+import Files from "./pages/files/Files";
+import Review from "./pages/review/Review";
+import Settings from "./pages/admin/Settings";
+import useStyles from "./styles/useStyles";
+
+
+// paths
+const paths = {
+  home: "/",
+  adminAgents: "/admin/agents",
+  review: "/review",
+  settings: "/admin/settings",
+};
+
+const documentation_url = "https://github.com/Azure-Samples/ai-document-review";
+
+const NavMenu = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const classes = useStyles()
+
+  const isSelected = (path: string) => location.pathname === path;
+
+  return (
+    <Menu>
+      <MenuTrigger disableButtonEnhancement>
+        <Button icon={<ListBar20Filled />} appearance="subtle" />
+      </MenuTrigger>
+      <MenuPopover>
+        <MenuList>
+          {/* Navigation */}
+          <MenuItem
+            icon={<Home20Filled />}
+            onClick={() => navigate(paths.home)}
+            className={isSelected(paths.home) ? classes.selected  : ""}
+          >
+            Home
+          </MenuItem>
+
+          <MenuDivider />
+
+          {/* Admin */}
+          <MenuGroup>
+            <MenuGroupHeader>Admin</MenuGroupHeader>
+            <MenuItem
+              icon={<Prompt20Filled />}
+              onClick={() => navigate(paths.adminAgents)}
+              className={isSelected(paths.adminAgents) ? classes.selected : ""}
+            >
+              Agents Manager
+            </MenuItem>
+            <MenuItem
+              icon={<Settings20Filled />}
+              onClick={() => navigate(paths.settings)}
+              className={isSelected(paths.settings) ? classes.selected : ""}
+            >
+              Settings
+            </MenuItem>
+          </MenuGroup>
+          <MenuDivider />
+          <MenuItemLink icon={<DocumentBulletListFilled />} href={documentation_url} target="_blank" rel="noopener noreferrer">
+            Documentation
+          </MenuItemLink>
+
+          {/* Account */}
+          <MenuItem>
+            <Avatar aria-label="User" size={32} />
+          </MenuItem>
+        </MenuList>
+      </MenuPopover>
+    </Menu>
+  );
+};
+
+const Pages = () => (
+  <Routes>
+    <Route path={paths.home} element={<Files />} />
+    <Route path={paths.review} element={<Review />} />
+    <Route path={paths.adminAgents} element={<Agents />} />
+    <Route path={paths.settings} element={<Settings />} />
+  </Routes>
+);
+
+export { NavMenu, Pages };

app/ui/src/components/PageHeader.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import aiDocIcon from '../assets/ai-doc.png';
+import useStyles from "../styles/useStyles";
+
+
+interface PageHeaderProps {
+  title: string;
+  description: string;
+}
+
+const PageHeader: React.FC<PageHeaderProps> = ({ title, description }) => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.container}>
+      <div className={classes.headerContent}>
+        <div className={classes.heroImage}>
+          <img src={aiDocIcon} alt="AI Document Review Icon" width="150" />
+        </div>
+        <div>
+          <h2>{title}</h2>
+          <p>{description}</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PageHeader;

app/ui/src/pages/admin/Agents.tsx

@@ -0,0 +1,20 @@
+import { Divider } from '@fluentui/react-components'
+import PageHeader from '../../components/PageHeader'
+import useStyles from '../../styles/useStyles'
+
+function Agents() {
+  const classes = useStyles()
+
+  return (
+    <div className={classes.container}>
+      <PageHeader
+        title="Manage Agents"
+        description="View and update the AI doc review agents by updating existing agent prompts or by adding
+            new ones to enhance your document analysis."
+      />
+      <Divider className={classes.divider} />
+    </div>
+  )
+}
+
+export default Agents

app/ui/src/pages/admin/Settings.tsx

@@ -0,0 +1,20 @@
+import { Divider } from '@fluentui/react-components'
+import PageHeader from '../../components/PageHeader'
+import useStyles from '../../styles/useStyles'
+
+function Settings() {
+  const classes = useStyles()
+
+  return (
+    <div className={classes.container}>
+      <PageHeader
+        title="Manage Settings"
+        description="View and update the AI doc review agent configurations by updating existing settings or by adding
+            new ones to enhance your document analysis."
+      />
+      <Divider className={classes.divider} />
+    </div>
+  )
+}
+
+export default Settings

app/ui/src/pages/files/Files.tsx

@@ -3,9 +3,9 @@ import { Button, Caption1, Card, CardHeader, CardPreview, Dialog, DialogBody, Di
 import { ArrowUploadRegular, MoreHorizontal20Regular } from '@fluentui/react-icons';
 import { FormEvent, useCallback, useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import aiDocIcon from '../../assets/ai-doc.png';
 import pdfIcon from '../../assets/pdf.svg';
 import { listBlobs, uploadBlob } from '../../services/storage';
+import PageHeader from '../../components/PageHeader';
 
 const flex = {
   gap: "16px",
@@ -103,18 +103,10 @@ function Files() {
 
   return (
     <div className={classes.container}>
-      <div className={classes.welcome}>
-        <div className={classes.heroImage}>
-          <img src={aiDocIcon} alt="AI Document Review Icon" width="150" />
-        </div>
-        <div>
-          <h2>Welcome to the AI Document Review accelerator</h2>
-          <p>Upload a new document to get started, or select an existing document to pick up where you left off.</p>
-          <Button size="large" onClick={() => window.open("https://github.com/Azure-Samples/ai-document-review", "_blank")}>
-            View documentation
-          </Button>
-        </div>
-      </div>
+        <PageHeader
+          title="Welcome to the AI Document Review accelerator"
+          description="Upload a new document to get started, or select an existing document to pick up where you left off."
+        />
       <Divider className={classes.divider}/>
       <div className={classes.filesContainer}>
         { 

app/ui/src/styles/useStyles.ts

@@ -0,0 +1,37 @@
+import { makeStyles, tokens } from "@fluentui/react-components";
+
+// Define common styles
+const useStyles = makeStyles({
+  selected: {
+    backgroundColor: tokens.colorNeutralBackground5,
+    color: tokens.colorNeutralForeground1,
+  },
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '16px',
+    width: '100vw',
+  },
+  divider: {
+    paddingTop: '10px',
+    paddingBottom: '10px',
+    maxWidth: '800px',
+  },
+  heroImage: {
+    margin: '16px',
+    padding: '16px',
+  },
+  headerContent: {
+    margin: '16px',
+    color: '#000',
+    maxWidth: '800px',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default useStyles;