From d3c5f7c926b6a3c24e40688e3b772cdb78ff8f05 Mon Sep 17 00:00:00 2001
From: katty barroso <kattybarroso1321@gmail.com>
Date: Mon, 27 Jan 2025 11:40:55 +0100
Subject: [PATCH 1/2] Add dashboard menu

---
 .../src/components/DebugFlags/config.ts       |  6 ++
 .../src/components/Menu/DashboardMenu.tsx     | 42 ++++++++++
 .../src/components/Menu/MenuLink.tsx          | 41 ++++++++++
 .../src/components/Menu/PageLink.tsx          | 10 ++-
 centrifuge-app/src/components/Menu/index.tsx  | 79 +++++++------------
 centrifuge-app/src/components/Root.tsx        |  6 ++
 .../src/pages/Dashboard/AccountsPage.tsx      |  3 +
 .../src/pages/Dashboard/AssetsPage.tsx        |  3 +
 .../src/pages/Dashboard/Dashboard.tsx         |  3 +
 .../src/pages/Dashboard/InvestorsPage.tsx     |  3 +
 centrifuge-app/src/pages/Dashboard/index.tsx  | 16 ++++
 fabric/src/icon-svg/icon-dashboard.svg        |  3 +
 12 files changed, 162 insertions(+), 53 deletions(-)
 create mode 100644 centrifuge-app/src/components/Menu/DashboardMenu.tsx
 create mode 100644 centrifuge-app/src/components/Menu/MenuLink.tsx
 create mode 100644 centrifuge-app/src/pages/Dashboard/AccountsPage.tsx
 create mode 100644 centrifuge-app/src/pages/Dashboard/AssetsPage.tsx
 create mode 100644 centrifuge-app/src/pages/Dashboard/Dashboard.tsx
 create mode 100644 centrifuge-app/src/pages/Dashboard/InvestorsPage.tsx
 create mode 100644 centrifuge-app/src/pages/Dashboard/index.tsx
 create mode 100644 fabric/src/icon-svg/icon-dashboard.svg

diff --git a/centrifuge-app/src/components/DebugFlags/config.ts b/centrifuge-app/src/components/DebugFlags/config.ts
index 6c365bc6d3..16040367f2 100644
--- a/centrifuge-app/src/components/DebugFlags/config.ts
+++ b/centrifuge-app/src/components/DebugFlags/config.ts
@@ -49,6 +49,7 @@ export type Key =
   | 'showTokenYields'
   | 'showOracleTx'
   | 'showGmp'
+  | 'showDashboard'
 
 export const flagsConfig = {
   address: {
@@ -134,6 +135,11 @@ export const flagsConfig = {
     default: false,
     type: 'checkbox',
   },
+  showDashboard: {
+    default: true,
+    type: 'checkbox',
+    alwaysShow: true,
+  },
 } satisfies Record<Key, DebugFlagConfig>
 
 export const genericFlagsConfig = flagsConfig as Record<string, DebugFlagConfig>
diff --git a/centrifuge-app/src/components/Menu/DashboardMenu.tsx b/centrifuge-app/src/components/Menu/DashboardMenu.tsx
new file mode 100644
index 0000000000..ada86f7dc6
--- /dev/null
+++ b/centrifuge-app/src/components/Menu/DashboardMenu.tsx
@@ -0,0 +1,42 @@
+import { Box, IconDashboard, Stack } from '@centrifuge/fabric'
+import { useIsAboveBreakpoint } from '../../utils/useIsAboveBreakpoint'
+import { MenuLink } from './MenuLink'
+import { PageLink } from './PageLink'
+
+const pages = [
+  { label: 'Account', href: 'account', match: 'dashboard/account' },
+  { label: 'Assets', href: 'assets', match: 'dashboard/assets' },
+  { label: 'Investors', href: 'investors', match: 'dashboard/investors' },
+]
+
+export function DashboardMenu() {
+  const isLarge = useIsAboveBreakpoint('L')
+  return (
+    <>
+      {isLarge ? (
+        <PageLink to="/dashboard" stacked={!isLarge} exact>
+          <IconDashboard size={['iconMedium', 'iconMedium', 'iconSmall']} />
+          Dashboard
+        </PageLink>
+      ) : (
+        pages.map(({ href, label }) => (
+          <Box width="100%">
+            <PageLink to={`/dashboard/${href}`} stacked={!isLarge}>
+              <IconDashboard size={['iconMedium', 'iconMedium', 'iconSmall']} />
+              {label}
+            </PageLink>
+          </Box>
+        ))
+      )}
+      {isLarge && (
+        <Box pl={4}>
+          <Stack as="ul" gap={1}>
+            {pages.map(({ href, label, match }) => (
+              <MenuLink path={href} name={label} matchingPath={match} />
+            ))}
+          </Stack>
+        </Box>
+      )}
+    </>
+  )
+}
diff --git a/centrifuge-app/src/components/Menu/MenuLink.tsx b/centrifuge-app/src/components/Menu/MenuLink.tsx
new file mode 100644
index 0000000000..7255d81178
--- /dev/null
+++ b/centrifuge-app/src/components/Menu/MenuLink.tsx
@@ -0,0 +1,41 @@
+import { Text } from '@centrifuge/fabric'
+import { useLocation } from 'react-router'
+import { Link } from 'react-router-dom'
+import styled from 'styled-components'
+import { prefetchRoute } from '../Root'
+import { baseButton } from './styles'
+
+const Root = styled(Text)`
+  ${baseButton}
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border-radius: ${({ theme }) => theme.radii.input}px;
+  color: ${({ isActive, theme }) => (isActive ? theme.colors.textGold : theme.colors.textInverted)};
+  &:hover {
+    color: ${({ isActive, theme }) => (isActive ? theme.colors.textGold : theme.colors.textGold)};
+  }
+`
+
+type MenuLinkProps = {
+  path?: string
+  name?: string
+  matchingPath: string
+}
+
+export function MenuLink({ path = 'dashboard', name, matchingPath }: MenuLinkProps) {
+  const location = useLocation()
+  const match = location.pathname.includes(matchingPath)
+  return (
+    <Root
+      forwardedAs={Link}
+      to={`/dashboard/${path}`}
+      variant="body2"
+      isActive={match}
+      onMouseOver={() => prefetchRoute('/dashboard')}
+    >
+      {name}
+    </Root>
+  )
+}
diff --git a/centrifuge-app/src/components/Menu/PageLink.tsx b/centrifuge-app/src/components/Menu/PageLink.tsx
index 51c76fb866..338c75e3e8 100644
--- a/centrifuge-app/src/components/Menu/PageLink.tsx
+++ b/centrifuge-app/src/components/Menu/PageLink.tsx
@@ -23,13 +23,19 @@ const Root = styled(Text)<{ isActive?: boolean; stacked?: boolean }>`
 
 type PageLinkProps = LinkProps & {
   stacked?: boolean
+  exact?: boolean
 }
 
-export function PageLink({ stacked = false, to, children }: PageLinkProps) {
+export function PageLink({ stacked = false, to, children, exact = false }: PageLinkProps) {
   const location = useLocation()
   const isMedium = useIsAboveBreakpoint('M')
 
-  const isActive = location.pathname.startsWith(to as string)
+  let isActive = false
+  if (exact) {
+    isActive = location.pathname === to
+  } else {
+    isActive = location.pathname.startsWith(to as string)
+  }
 
   return (
     <Root
diff --git a/centrifuge-app/src/components/Menu/index.tsx b/centrifuge-app/src/components/Menu/index.tsx
index a06daa732c..e675def9d4 100644
--- a/centrifuge-app/src/components/Menu/index.tsx
+++ b/centrifuge-app/src/components/Menu/index.tsx
@@ -7,11 +7,9 @@ import {
   IconPlus,
   IconSwitch,
   IconWallet,
-  MenuItemGroup,
   Shelf,
-  Stack,
 } from '@centrifuge/fabric'
-import styled from 'styled-components'
+import styled, { useTheme } from 'styled-components'
 import { config } from '../../config'
 import { useAddress } from '../../utils/useAddress'
 import { useIsAboveBreakpoint } from '../../utils/useIsAboveBreakpoint'
@@ -19,11 +17,9 @@ import { usePoolsThatAnyConnectedAddressHasPermissionsFor } from '../../utils/us
 import { useTransactionsByAddress } from '../../utils/usePools'
 import { useDebugFlags } from '../DebugFlags'
 import { RouterLinkButton } from '../RouterLinkButton'
+import { DashboardMenu } from './DashboardMenu'
 import { GovernanceMenu } from './GovernanceMenu'
-import { IssuerMenu } from './IssuerMenu'
-import { NavManagementMenu } from './NavManagementMenu'
 import { PageLink } from './PageLink'
-import { PoolLink } from './PoolLink'
 
 const COLOR = '#7C8085'
 
@@ -51,7 +47,8 @@ export function Menu() {
   const pools = usePoolsThatAnyConnectedAddressHasPermissionsFor() || []
   const isLarge = useIsAboveBreakpoint('L')
   const address = useAddress('substrate')
-  const { showSwaps } = useDebugFlags()
+  const theme = useTheme()
+  const { showSwaps, showDashboard } = useDebugFlags()
   const { data: transactions } = useTransactionsByAddress(address)
 
   return (
@@ -64,6 +61,8 @@ export function Menu() {
       justifyContent={['space-between', 'space-between']}
       backgroundColor="backgroundInverted"
     >
+      {showDashboard && pools.length > 0 && <DashboardMenu />}
+
       <Box width="100%">
         <PageLink to="/pools" stacked={!isLarge}>
           <IconInvestments size={['iconMedium', 'iconMedium', 'iconSmall']} />
@@ -98,56 +97,34 @@ export function Menu() {
         <GovernanceMenu />
       </Box>
 
-      {(pools.length > 0 || config.poolCreationType === 'immediate') && (
-        <IssuerMenu defaultOpen={isLarge} stacked={!isLarge}>
-          {isLarge ? (
-            <Stack as="ul" gap={1}>
-              {pools.map((pool) => (
-                <Box key={pool.id} as="li" pl={4}>
-                  <PoolLink pool={pool} />
-                </Box>
-              ))}
-              {address && config.poolCreationType === 'immediate' && (
-                <Shelf justifyContent="center" as="li" mt={1}>
-                  <CreatePool />
-                </Shelf>
-              )}
-            </Stack>
-          ) : (
-            <Stack as="ul" gap={1}>
-              {!!pools.length &&
-                pools.map((pool) => (
-                  <MenuItemGroup key={pool.id}>
-                    <Box px={2} py={1}>
-                      <PoolLink pool={pool} />
-                    </Box>
-                  </MenuItemGroup>
-                ))}
-              {address && config.poolCreationType === 'immediate' && (
-                <Box px={2} py={1}>
-                  <CreatePool />
-                </Box>
-              )}
-            </Stack>
-          )}
-        </IssuerMenu>
-      )}
-
-      {showSwaps && (
-        <PageLink to="/swaps" stacked={!isLarge}>
-          <IconSwitch size={['iconMedium', 'iconMedium', 'iconSmall']} />
-          Swaps
-        </PageLink>
-      )}
-
-      <NavManagementMenu stacked={!isLarge} />
-
       {config.network !== 'centrifuge' && (
         <PageLink to="/nfts" stacked={!isLarge}>
           <IconNft size={['iconMedium', 'iconMedium', 'iconSmall']} />
           NFTs
         </PageLink>
       )}
+
+      {showDashboard && pools.length > 0 && (
+        <Box mt={1}>
+          <CreatePool />
+        </Box>
+      )}
+
+      {showSwaps && (
+        <Box>
+          <Box
+            width="100%"
+            borderTopColor={theme.colors.borderSecondary}
+            borderTopWidth={1}
+            borderTopStyle="solid"
+            mb={2}
+          />
+          <PageLink to="/swaps" stacked={!isLarge}>
+            <IconSwitch size={['iconMedium', 'iconMedium', 'iconSmall']} />
+            Swaps
+          </PageLink>
+        </Box>
+      )}
     </Shelf>
   )
 }
diff --git a/centrifuge-app/src/components/Root.tsx b/centrifuge-app/src/components/Root.tsx
index 2ba8c053c1..e23cbae974 100644
--- a/centrifuge-app/src/components/Root.tsx
+++ b/centrifuge-app/src/components/Root.tsx
@@ -80,6 +80,7 @@ const NavManagementPage = React.lazy(() => import('../pages/NavManagement'))
 const PoolTransactionsPage = React.lazy(() => import('../pages/PoolTransactions'))
 const ConvertAddressPage = React.lazy(() => import('../pages/ConvertAddress'))
 const PoolsPage = React.lazy(() => import('../pages/Pools'))
+const DashboardPage = React.lazy(() => import('../pages/Dashboard'))
 
 const router = createHashRouter([
   {
@@ -90,6 +91,11 @@ const router = createHashRouter([
         path: '/',
         element: <Navigate to="/pools" replace />,
       },
+      {
+        path: '/dashboard/*',
+        element: <DashboardPage />,
+        handle: { component: DashboardPage },
+      },
       {
         path: '/pools',
         element: <PoolsPage />,
diff --git a/centrifuge-app/src/pages/Dashboard/AccountsPage.tsx b/centrifuge-app/src/pages/Dashboard/AccountsPage.tsx
new file mode 100644
index 0000000000..882dd8a214
--- /dev/null
+++ b/centrifuge-app/src/pages/Dashboard/AccountsPage.tsx
@@ -0,0 +1,3 @@
+export default function AccountsPage() {
+  return <></>
+}
diff --git a/centrifuge-app/src/pages/Dashboard/AssetsPage.tsx b/centrifuge-app/src/pages/Dashboard/AssetsPage.tsx
new file mode 100644
index 0000000000..d0581a4335
--- /dev/null
+++ b/centrifuge-app/src/pages/Dashboard/AssetsPage.tsx
@@ -0,0 +1,3 @@
+export default function AssetsPage() {
+  return <></>
+}
diff --git a/centrifuge-app/src/pages/Dashboard/Dashboard.tsx b/centrifuge-app/src/pages/Dashboard/Dashboard.tsx
new file mode 100644
index 0000000000..8c0f7aafae
--- /dev/null
+++ b/centrifuge-app/src/pages/Dashboard/Dashboard.tsx
@@ -0,0 +1,3 @@
+export default function Dashboard() {
+  return <></>
+}
diff --git a/centrifuge-app/src/pages/Dashboard/InvestorsPage.tsx b/centrifuge-app/src/pages/Dashboard/InvestorsPage.tsx
new file mode 100644
index 0000000000..6239e2c2a0
--- /dev/null
+++ b/centrifuge-app/src/pages/Dashboard/InvestorsPage.tsx
@@ -0,0 +1,3 @@
+export default function InvestorsPage() {
+  return <></>
+}
diff --git a/centrifuge-app/src/pages/Dashboard/index.tsx b/centrifuge-app/src/pages/Dashboard/index.tsx
new file mode 100644
index 0000000000..f36dac3d12
--- /dev/null
+++ b/centrifuge-app/src/pages/Dashboard/index.tsx
@@ -0,0 +1,16 @@
+import { Route, Routes } from 'react-router'
+import AccountsPage from './AccountsPage'
+import AssetsPage from './AssetsPage'
+import Dashboard from './Dashboard'
+import InvestorsPage from './InvestorsPage'
+
+export default function DashboardPage() {
+  return (
+    <Routes>
+      <Route path="/" element={<Dashboard />} />
+      <Route path="/accounts" element={<AccountsPage />} />
+      <Route path="/assets" element={<AssetsPage />} />
+      <Route path="/investors" element={<InvestorsPage />} />
+    </Routes>
+  )
+}
diff --git a/fabric/src/icon-svg/icon-dashboard.svg b/fabric/src/icon-svg/icon-dashboard.svg
new file mode 100644
index 0000000000..436016c9d7
--- /dev/null
+++ b/fabric/src/icon-svg/icon-dashboard.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.33333 11.3333H10.6667M7.34513 1.84267L2.82359 5.35942C2.52135 5.5945 2.37022 5.71204 2.26135 5.85924C2.16491 5.98963 2.09307 6.13652 2.04935 6.2927C2 6.46901 2 6.66046 2 7.04337V11.8667C2 12.6134 2 12.9868 2.14532 13.272C2.27316 13.5229 2.47713 13.7268 2.72801 13.8547C3.01323 14 3.3866 14 4.13333 14H11.8667C12.6134 14 12.9868 14 13.272 13.8547C13.5229 13.7268 13.7268 13.5229 13.8547 13.272C14 12.9868 14 12.6134 14 11.8667V7.04337C14 6.66046 14 6.46901 13.9506 6.2927C13.9069 6.13652 13.8351 5.98963 13.7386 5.85924C13.6298 5.71204 13.4787 5.5945 13.1764 5.35942L8.65487 1.84267C8.42065 1.6605 8.30354 1.56941 8.17423 1.5344C8.06013 1.50351 7.93987 1.50351 7.82577 1.5344C7.69646 1.56941 7.57935 1.6605 7.34513 1.84267Z" stroke="black" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

From 8eb7e8b014f0252324c81cfd9856c26d6294f525 Mon Sep 17 00:00:00 2001
From: katty barroso <kattybarroso1321@gmail.com>
Date: Mon, 27 Jan 2025 11:48:53 +0100
Subject: [PATCH 2/2] Readd components

---
 centrifuge-app/src/components/Menu/index.tsx | 42 ++++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/centrifuge-app/src/components/Menu/index.tsx b/centrifuge-app/src/components/Menu/index.tsx
index e675def9d4..a51065c6b2 100644
--- a/centrifuge-app/src/components/Menu/index.tsx
+++ b/centrifuge-app/src/components/Menu/index.tsx
@@ -7,7 +7,9 @@ import {
   IconPlus,
   IconSwitch,
   IconWallet,
+  MenuItemGroup,
   Shelf,
+  Stack,
 } from '@centrifuge/fabric'
 import styled, { useTheme } from 'styled-components'
 import { config } from '../../config'
@@ -19,7 +21,10 @@ import { useDebugFlags } from '../DebugFlags'
 import { RouterLinkButton } from '../RouterLinkButton'
 import { DashboardMenu } from './DashboardMenu'
 import { GovernanceMenu } from './GovernanceMenu'
+import { IssuerMenu } from './IssuerMenu'
+import { NavManagementMenu } from './NavManagementMenu'
 import { PageLink } from './PageLink'
+import { PoolLink } from './PoolLink'
 
 const COLOR = '#7C8085'
 
@@ -97,6 +102,43 @@ export function Menu() {
         <GovernanceMenu />
       </Box>
 
+      {(pools.length > 0 || config.poolCreationType === 'immediate') && !showDashboard && (
+        <IssuerMenu defaultOpen={isLarge} stacked={!isLarge}>
+          {isLarge ? (
+            <Stack as="ul" gap={1}>
+              {pools.map((pool) => (
+                <Box key={pool.id} as="li" pl={4}>
+                  <PoolLink pool={pool} />
+                </Box>
+              ))}
+              {address && config.poolCreationType === 'immediate' && (
+                <Shelf justifyContent="center" as="li" mt={1}>
+                  <CreatePool />
+                </Shelf>
+              )}
+            </Stack>
+          ) : (
+            <Stack as="ul" gap={1}>
+              {!!pools.length &&
+                pools.map((pool) => (
+                  <MenuItemGroup key={pool.id}>
+                    <Box px={2} py={1}>
+                      <PoolLink pool={pool} />
+                    </Box>
+                  </MenuItemGroup>
+                ))}
+              {address && config.poolCreationType === 'immediate' && (
+                <Box px={2} py={1}>
+                  <CreatePool />
+                </Box>
+              )}
+            </Stack>
+          )}
+        </IssuerMenu>
+      )}
+
+      {!showDashboard && <NavManagementMenu stacked={!isLarge} />}
+
       {config.network !== 'centrifuge' && (
         <PageLink to="/nfts" stacked={!isLarge}>
           <IconNft size={['iconMedium', 'iconMedium', 'iconSmall']} />