[Minor] Migrate Layout folder to Typescript

frontend/.eslintrc.cjs

@@ -28,6 +28,11 @@ module.exports = {
   rules: {
     'react/prop-types': 'off',
     '@typescript-eslint/no-unused-vars': 'warn',
+    "@typescript-eslint/no-misused-promises": [2, {
+      "checksVoidReturn": {
+        "attributes": false
+      }
+    }]
   },
   overrides: [
     {

frontend/src/layout/AppBar.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { AppBar as RaAppBar, Link, AppBarProps, Logout } from 'react-admin';
+import { Zoom, Box, Typography } from '@mui/material';
+import { UserMenu } from '@semapps/auth-provider';
+import SearchForm from './SearchForm';
+
+const AppBar = (props: AppBarProps) => {
+  return (
+    <RaAppBar {...props} userMenu={<UserMenu profileResource="Person" logout={<Logout />} />} color="primary">
+      <Link to="/" sx={{ flex: { xs: 1, sm: 0 } }}>
+        <Box
+          sx={{
+            flex: { xs: 1, sm: 'unset' },
+            overflow: 'hidden',
+            display: 'flex',
+            justifyContent: 'flex-start',
+            alignItems: 'center',
+          }}
+        >
+          <Box
+            sx={{
+              display: { xs: 'none', sm: 'block' },
+              height: 48,
+              marginLeft: '0.2em',
+              marginRight: '0.2em',
+            }}
+          >
+            <Zoom in={true} timeout={2000}>
+              <img height="100%" src={'/logo192.png'} alt="logo" />
+            </Zoom>
+          </Box>
+          <Typography
+            sx={{ display: { xs: 'block', sm: 'none', md: 'block' } }}
+            color="primary.contrastText"
+            variant="h6"
+            noWrap
+          >
+            {props.title}
+          </Typography>
+        </Box>
+      </Link>
+      <Box
+        sx={{
+          display: { xs: 'none', sm: 'revert' },
+          width: '100%',
+          minWidth: { xs: 240, md: 360 },
+          flex: 2,
+          margin: '0 5%',
+          marginRight: { xs: '5%', md: '100px' },
+        }}
+      >
+        <Box sx={{ margin: 'auto', maxWidth: 880 }}>
+          <SearchForm />
+        </Box>
+      </Box>
+    </RaAppBar>
+  );
+};
+
+export default AppBar;

frontend/src/layout/BaseView.tsx

@@ -0,0 +1,51 @@
+import React, { PropsWithChildren, ReactNode } from 'react';
+import { Grid, Card, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+const Title = styled(Typography)(({ theme }) => ({
+  [theme.breakpoints.down('sm')]: {
+    fontSize: '1.8rem',
+  },
+})) as typeof Typography;
+
+const ActionsGrid = styled(Grid)(({ theme }) => ({
+  [theme.breakpoints.down('sm')]: {
+    '& .MuiToolbar-root': {
+      backgroundColor: theme.palette.background.default,
+      minHeight: 0,
+      paddingTop: 0,
+      alignItems: 'center',
+      height: '100%',
+    },
+    '& .MuiButtonBase-root': {
+      padding: 0,
+    },
+  },
+}));
+
+type Props = {
+  title: string | ReactNode;
+  actions: JSX.Element;
+  aside?: JSX.Element;
+};
+
+const BaseView = ({ title, actions, aside, children }: PropsWithChildren<Props>) => {
+  return (
+    <Grid container sx={{ marginTop: { xs: 0, sm: 2 } }}>
+      <Grid item xs={9} sm={8}>
+        <Title variant="h4" color="primary" component="h1">
+          {title}
+        </Title>
+      </Grid>
+      <ActionsGrid item xs={3} sm={4}>
+        {actions}
+      </ActionsGrid>
+      <Grid item xs={12} sx={{ display: 'flex', marginTop: 1 }}>
+        <Card sx={{ flex: 1 }}>{children}</Card>
+        {aside}
+      </Grid>
+    </Grid>
+  );
+};
+
+export default BaseView;

frontend/src/layout/Layout.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { LayoutProps, Layout as RaLayout } from 'react-admin';
+import { useTheme } from '@mui/material/styles';
+import AppBar from './AppBar';
+import TreeMenu from './TreeMenu/TreeMenu';
+
+const Layout = ({ children, ...otherProps }: LayoutProps) => {
+  const theme = useTheme();
+
+  return (
+    <RaLayout
+      {...otherProps}
+      appBar={AppBar}
+      menu={TreeMenu}
+      sx={{
+        '& .RaLayout-content': {
+          padding: { xs: 1, sm: theme.spacing(1, 2, 2, 1) },
+        },
+        '& a:not(.MuiListItemButton-root):not(.MuiButtonBase-root)': {
+          overflowWrap: 'break-word',
+          color: 'primary.main',
+        },
+      }}
+    >
+      {children}
+    </RaLayout>
+  );
+};
+
+export default Layout;