stream fixs

gmpetrov · Apr 17, 2024 · 6fbfa2f · 6fbfa2f
1 parent c0de2c1
commit 6fbfa2f
Show file tree

Hide file tree

Showing 14 changed files with 377 additions and 114 deletions.
diff --git a/apps/dashboard/components/Layout/Navigation.tsx b/apps/dashboard/components/Layout/Navigation.tsx
@@ -15,7 +15,7 @@ import ShowChartIcon from '@mui/icons-material/ShowChart';
 import SmartToyRoundedIcon from '@mui/icons-material/SmartToyRounded'; // Icons import
 import StorageRoundedIcon from '@mui/icons-material/StorageRounded';
 import TwitterIcon from '@mui/icons-material/Twitter';
-import { ColorPaletteProp } from '@mui/joy';
+import { Card, ColorPaletteProp } from '@mui/joy';
 import Badge from '@mui/joy/Badge';
 import Box from '@mui/joy/Box';
 import Button from '@mui/joy/Button';
@@ -34,6 +34,7 @@ import Typography from '@mui/joy/Typography';
 import { motion } from 'framer-motion';
 import getConfig from 'next/config';
 import Head from 'next/head';
+import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { signOut, useSession } from 'next-auth/react';
@@ -477,20 +478,27 @@ export default function Navigation() {
       >
         <div className="max-h-screen overflow-y-auto pl-1 pt-1">
           <List size="sm" sx={{ '--ListItem-radius': '8px' }}>
-            {/* <Stack
+            <Stack
               direction="row"
               width="100%"
               gap={1}
               justifyContent="space-between"
+              justifyItems="center"
             >
-              <Stack direction="row" gap={1} justifyItems="center">
-                <Logo className="w-3 h-3" />
-                <Typography component="h1" fontWeight="xl">
-                  Chaindesk
-                </Typography>
+              <Stack
+                direction="row"
+                justifyItems="center"
+                justifyContent="center"
+                gap={0.5}
+              >
+                <div className="relative w-5 h-5 mt-[0.5px] flex justify-center ">
+                  <Image layout="fill" src="/logo.png" alt="Chaindesk" />
+                </div>
+                <Typography level="title-md">Chaindesk</Typography>
               </Stack>
-              <DarkModeToggle variant="plain" color="neutral" />
-            </Stack> */}
+              <DarkModeToggle variant="plain" color="neutral" sx={{ pb: 1 }} />
+            </Stack>
+            <Divider sx={{ mb: 1 }} />
 
             <ListItem nested>
               {!!session?.user?.id && (

diff --git a/apps/dashboard/components/SettingsLayout.tsx b/apps/dashboard/components/SettingsLayout.tsx
@@ -1,6 +1,7 @@
-import Box from '@mui/joy/Box';
+import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded';
+import HomeRoundedIcon from '@mui/icons-material/HomeRounded';
+import { Breadcrumbs } from '@mui/joy';
 import Stack from '@mui/joy/Stack';
-import { Theme } from '@mui/joy/styles';
 import { SxProps } from '@mui/joy/styles/types';
 import Tab, { tabClasses } from '@mui/joy/Tab';
 import TabList from '@mui/joy/TabList';
@@ -10,6 +11,8 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 import React from 'react';
 
+import { RouteNames } from '@chaindesk/lib/types';
+
 import Layout from './Layout';
 
 type Props = {
@@ -25,25 +28,41 @@ function SettingsLayout(props: Props) {
     <Layout mainSxProps={props.mainSxProps}>
       <Stack
         sx={{
+          px: {
+            xs: 2,
+            md: 6,
+          },
           flex: 1,
           pt: {},
           height: '100%',
           ...props.sxProps,
         }}
       >
-        <Box
+        <Breadcrumbs
+          size="sm"
+          aria-label="breadcrumbs"
+          separator={<ChevronRightRoundedIcon />}
           sx={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            my: 1,
-            gap: 1,
-            flexWrap: 'wrap',
+            '--Breadcrumbs-gap': '1rem',
+            '--Icon-fontSize': '16px',
+            fontWeight: 'lg',
+            color: 'neutral.400',
+            px: 0,
           }}
         >
-          <Typography level="title-lg">Settings</Typography>
-        </Box>
-
+          <Link href={RouteNames.HOME}>
+            <HomeRoundedIcon />
+          </Link>
+          <Link href={RouteNames.SETTINGS}>
+            <Typography
+              fontSize="inherit"
+              color="neutral"
+              className="hover:underline"
+            >
+              Settings
+            </Typography>
+          </Link>
+        </Breadcrumbs>
         <Stack
           sx={{
             position: 'sticky',

diff --git a/apps/dashboard/pages/agents/index.tsx b/apps/dashboard/pages/agents/index.tsx
@@ -63,7 +63,16 @@ export default function AgentsPage() {
   );
 
   return (
-    <Box component="main" className="MainContent">
+    <Box
+      component="main"
+      className="MainContent"
+      sx={{
+        px: {
+          xs: 2,
+          md: 6,
+        },
+      }}
+    >
       <Box
         sx={{
           display: 'flex',
@@ -74,7 +83,32 @@ export default function AgentsPage() {
           flexWrap: 'wrap',
         }}
       >
-        <Typography level="title-lg">Agents</Typography>
+        <Breadcrumbs
+          size="sm"
+          aria-label="breadcrumbs"
+          separator={<ChevronRightRoundedIcon />}
+          sx={{
+            '--Breadcrumbs-gap': '1rem',
+            '--Icon-fontSize': '16px',
+            fontWeight: 'lg',
+            color: 'neutral.400',
+            px: 0,
+          }}
+        >
+          <Link href={RouteNames.HOME}>
+            <HomeRoundedIcon />
+          </Link>
+          <Link href={RouteNames.AGENTS}>
+            <Typography
+              fontSize="inherit"
+              color="neutral"
+              className="hover:underline"
+            >
+              Agents
+            </Typography>
+          </Link>
+        </Breadcrumbs>
+
         <Box sx={{ display: 'flex', gap: 1, '& > *': { flexGrow: 1 } }}>
           <Button
             variant="solid"

diff --git a/apps/dashboard/pages/analytics/index.tsx b/apps/dashboard/pages/analytics/index.tsx
@@ -7,6 +7,7 @@ import SupportAgentIcon from '@mui/icons-material/SupportAgent';
 import {
   Alert,
   Box,
+  Breadcrumbs,
   Card,
   IconButton,
   Option,
@@ -160,7 +161,26 @@ export default function AnalyticsPage() {
         gap: 1,
       })}
     >
-      <Typography level="title-lg">Analytics</Typography>
+      <Breadcrumbs
+        size="sm"
+        aria-label="breadcrumbs"
+        separator={<ChevronRightRoundedIcon />}
+        sx={{
+          '--Breadcrumbs-gap': '1rem',
+          '--Icon-fontSize': '16px',
+          fontWeight: 'lg',
+          color: 'neutral.400',
+          px: 0,
+        }}
+      >
+        <Link href={RouteNames.HOME}>
+          <HomeRoundedIcon />
+        </Link>
+        <Typography fontSize="inherit" color="neutral">
+          Analytics
+        </Typography>
+      </Breadcrumbs>
+
       <Alert startDecorator={<InfoIcon />} color="primary" variant="soft">
         This view is refreshed every hour
       </Alert>

diff --git a/apps/dashboard/pages/contacts/index.tsx b/apps/dashboard/pages/contacts/index.tsx
@@ -109,6 +109,25 @@ export default function FormsPage() {
         gap: 1,
       })}
     >
+      <Breadcrumbs
+        size="sm"
+        aria-label="breadcrumbs"
+        separator={<ChevronRightRoundedIcon />}
+        sx={{
+          '--Breadcrumbs-gap': '1rem',
+          '--Icon-fontSize': '16px',
+          fontWeight: 'lg',
+          color: 'neutral.400',
+          px: 0,
+        }}
+      >
+        <Link href={RouteNames.HOME}>
+          <HomeRoundedIcon />
+        </Link>
+        <Typography fontSize="inherit" color="primary">
+          Contacts
+        </Typography>
+      </Breadcrumbs>
       <Box
         sx={{
           display: 'flex',
@@ -119,7 +138,6 @@ export default function FormsPage() {
           flexWrap: 'wrap',
         }}
       >
-        <Typography level="title-lg">Contacts</Typography>
         <Box sx={{ display: 'flex', gap: 1, '& > *': { flexGrow: 1 } }}></Box>
       </Box>
 

diff --git a/apps/dashboard/pages/datastores/[datastoreId]/[datasourceId].tsx b/apps/dashboard/pages/datastores/[datastoreId]/[datasourceId].tsx
@@ -20,12 +20,10 @@ import * as React from 'react';
 import useSWR, { useSWRConfig } from 'swr';
 
 import Layout from '@app/components/Layout';
-import { HEADER_HEIGHT } from '@app/components/Layout/Header';
 import { getDatasource } from '@app/pages/api/datasources/[id]';
 
 import { fetcher } from '@chaindesk/lib/swr-fetcher';
 import { RouteNames } from '@chaindesk/lib/types';
-import { withAuth } from '@chaindesk/lib/withAuth';
 import { Prisma } from '@chaindesk/prisma';
 import useStateReducer from '@chaindesk/ui/hooks/useStateReducer';
 
@@ -75,9 +73,13 @@ export default function DatasourcePage() {
       component="main"
       className="MainContent"
       sx={(theme) => ({
+        px: {
+          xs: 2,
+          md: 6,
+        },
         overflowY: 'scroll',
-        height: `calc(100dvh  - ${HEADER_HEIGHT}px - 50px)`,
-        maxHeight: `calc(100dvh  - ${HEADER_HEIGHT}px) - 50px`,
+        height: `calc(100dvh   - 50px)`,
+        maxHeight: `calc(100dvh - 50px)`,
         flex: 1,
         display: 'flex',
         flexDirection: 'column',
@@ -96,9 +98,46 @@ export default function DatasourcePage() {
           }}
         >
           <Box sx={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}>
-            <Typography level="h1" fontSize="xl4">
-              {getDatasourceQuery?.data?.name}
-            </Typography>
+            <Breadcrumbs
+              size="sm"
+              aria-label="breadcrumbs"
+              separator={<ChevronRightRoundedIcon />}
+              sx={{
+                '--Breadcrumbs-gap': '1rem',
+                '--Icon-fontSize': '16px',
+                fontWeight: 'lg',
+                color: 'neutral.400',
+                px: 0,
+              }}
+            >
+              <Link href={RouteNames.HOME}>
+                <HomeRoundedIcon />
+              </Link>
+              <Link href={RouteNames.DATASTORES}>
+                <Typography
+                  fontSize="inherit"
+                  color="neutral"
+                  className="hover:underline"
+                >
+                  Datastores
+                </Typography>
+              </Link>
+              <Link
+                href={`${RouteNames.DATASTORES}/${router.query.datastoreId}`}
+              >
+                <Typography
+                  fontSize="inherit"
+                  color="neutral"
+                  className="hover:underline"
+                >
+                  {getDatasourceQuery?.data?.datastore?.name}
+                </Typography>
+              </Link>
+
+              <Typography fontSize="inherit" color="neutral">
+                {getDatasourceQuery?.data?.name}
+              </Typography>
+            </Breadcrumbs>
             <Chip
               size="sm"
               variant="soft"

diff --git a/apps/dashboard/pages/datastores/[datastoreId]/index.tsx b/apps/dashboard/pages/datastores/[datastoreId]/index.tsx
@@ -88,6 +88,10 @@ export default function DatastorePage() {
       component="main"
       className="MainContent"
       sx={(theme) => ({
+        px: {
+          xs: 2,
+          md: 6,
+        },
         pb: {
           xs: 2,
           sm: 2,
@@ -118,9 +122,35 @@ export default function DatastorePage() {
               gap: 2,
             }}
           >
-            <Typography level="h1" fontSize="xl4">
-              {getDatastoreQuery?.data?.name}
-            </Typography>
+            <Breadcrumbs
+              size="sm"
+              aria-label="breadcrumbs"
+              separator={<ChevronRightRoundedIcon />}
+              sx={{
+                '--Breadcrumbs-gap': '1rem',
+                '--Icon-fontSize': '16px',
+                fontWeight: 'lg',
+                color: 'neutral.400',
+                px: 0,
+              }}
+            >
+              <Link href={RouteNames.HOME}>
+                <HomeRoundedIcon />
+              </Link>
+              <Link href={RouteNames.DATASTORES}>
+                <Typography
+                  fontSize="inherit"
+                  color="neutral"
+                  className="hover:underline"
+                >
+                  Datastores
+                </Typography>
+              </Link>
+
+              <Typography fontSize="inherit" color="neutral">
+                {getDatastoreQuery?.data?.name}
+              </Typography>
+            </Breadcrumbs>
             <Chip
               size="sm"
               variant="soft"