README.md

@@ -1,6 +1,6 @@
 # Money Controll Frontend SPA
 ***
-### Application to control your income and outcome money, planning your personal budget  
+### Application path control your income and outcome money, planning your personal budget  
 
 ### Scripts
 - `start:dev` - start local application on [`https://localhost:3000`](https://localhost:3000)

package.json

@@ -31,8 +31,11 @@
   },
   "homepage": "https://gitlab.com/money-control2/web/frontend#readme",
   "dependencies": {
+    "@emotion/react": "11.11.4",
+    "@emotion/styled": "11.11.5",
+    "@mui/icons-material": "^5.15.19",
+    "@mui/material": "5.15.19",
     "classnames": "2.5.1",
-    "normalize.css": "8.0.1",
     "prop-types": "15.8.1",
     "react": "18.3.1",
     "react-dnd": "16.0.1",
@@ -59,6 +62,5 @@
     "standard-version": "9.5.0",
     "ts-jest": "29.1.4",
     "typescript": "5.4.5"
-  },
-  "packageManager": "yarn@4.1.1"
+  }
 }

src/apps/MoneyControllApp/model/providers/RouterProvider/index.tsx

@@ -1,11 +1,79 @@
-import { createBrowserRouter, RouterProvider as RRDRouterProvider } from 'react-router-dom';
+import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
+import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted';
+import PieChartIcon from '@mui/icons-material/PieChart';
+import { createBrowserRouter, Navigate, RouterProvider as RRDRouterProvider } from 'react-router-dom';
 
-import { CalendarPage } from 'pages/CalendarPage';
+// todo lazy & access
+import { AnalyzePage, AnalyzePageToolbar } from 'pages/AnalyzePage';
+import { ErrorPage, ErrorPageToolbar } from 'pages/ErrorPage';
+import { PaymentsPage, PaymentsPageToolbar } from 'pages/PaymentsPage';
+import { SchedulePage, SchedulePageToolbar } from 'pages/SchedulePage';
 
+import { AsideMenuLayout } from 'widgets/AsideMenuLayout';
+
+import type { ReactNode } from 'react';
+
+type PageListItem = {
+  icon: ReactNode;
+  path: `/${string}`;
+  title: string;
+  Content: ReactNode;
+  Toolbar?: ReactNode;
+};
+
+const pages: PageListItem[] = [
+  {
+    icon: <PieChartIcon />,
+    title: 'Аналитика',
+    path: '/analyze',
+    Content: <AnalyzePage />,
+    Toolbar: <AnalyzePageToolbar />,
+  },
+  {
+    icon: <CalendarMonthIcon />,
+    title: 'График платежей',
+    path: '/schedule',
+    Content: <SchedulePage />,
+    Toolbar: <SchedulePageToolbar />,
+  },
+  {
+    icon: <FormatListBulletedIcon />,
+    title: 'Список платежей',
+    path: '/payments',
+    Content: <PaymentsPage />,
+    Toolbar: <PaymentsPageToolbar />,
+  },
+];
+
+const routes = pages.map((page) => ({
+  path: page.path,
+  element: (
+    <AsideMenuLayout
+      Content={page.Content}
+      pages={pages}
+      Toolbar={page.Toolbar}
+    />
+  ),
+  errorElement: (
+    <AsideMenuLayout
+      Content={<ErrorPage />}
+      pages={pages}
+      Toolbar={<ErrorPageToolbar />}
+    />
+  ),
+}));
 const router = createBrowserRouter([
+  ...routes,
   {
     path: '/',
-    element: <CalendarPage />,
+    element: <Navigate replace to="/analyze" />,
+    errorElement: (
+      <AsideMenuLayout
+        Content={<ErrorPage type="404" />}
+        pages={pages}
+        Toolbar={<ErrorPageToolbar type="404" />}
+      />
+    ),
   },
 ]);
 

src/apps/MoneyControllApp/ui/MoneyControllApp.ui.tsx

@@ -1,7 +1,11 @@
+import CssBaseline from '@mui/material/CssBaseline';
+
 import RouterProvider from '../model/providers/RouterProvider';
 
 const MoneyControllApp = () => (
   <div data-testid="money-contoll-app">
+    <CssBaseline />
+
     <RouterProvider />
   </div>
 );

src/index.tsx

@@ -1,4 +1,4 @@
-import 'normalize.css';
+import 'shared/styles/fonts/fonts.css';
 import { createRoot } from 'react-dom/client';
 
 import { MoneyControllApp } from 'apps/MoneyControllApp';

src/pages/AnalyzePage/index.ts

@@ -0,0 +1,2 @@
+export { default as AnalyzePage } from './ui/AnalyzePage.ui';
+export { default as AnalyzePageToolbar } from './ui/AnalyzePageToolbar.ui';

src/pages/AnalyzePage/ui/AnalyzePage.ui.tsx

@@ -0,0 +1,9 @@
+import type { FC } from 'react';
+
+const AnalyzePage: FC = () => (
+  <div>
+    Analyze page
+  </div>
+);
+
+export default AnalyzePage;

src/pages/AnalyzePage/ui/AnalyzePageToolbar.ui.tsx

@@ -0,0 +1,11 @@
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+
+const AnalyzePageToolbar = () => (
+  <Toolbar>
+    <Typography noWrap component="div" variant="h6">
+      Analyze Page Toolbar
+    </Typography>
+  </Toolbar>
+);
+export default AnalyzePageToolbar;

src/pages/ErrorPage/index.ts

@@ -0,0 +1,2 @@
+export { default as ErrorPage } from './ui/ErrorPage.ui';
+export { default as ErrorPageToolbar } from './ui/ErrorPageToolbar.ui';

src/pages/ErrorPage/ui/ErrorPage.ui.tsx

@@ -0,0 +1,48 @@
+import { Grid } from '@mui/material';
+import Typography from '@mui/material/Typography';
+
+import _404Image from 'public/assets/images/404.png';
+import OopsImage from 'public/assets/images/oops.png';
+
+import type { FC } from 'react';
+
+type ErrorPageProps = {
+  type?: '404' | 'ErrorBoundary';
+};
+const ErrorPage: FC<ErrorPageProps> = (props) => {
+  const {
+    type = 'ErrorBoundary',
+  } = props;
+
+  if (type === 'ErrorBoundary') {
+    return (
+      <Grid
+        container
+        alignItems="center"
+        direction="column"
+        justifyContent="center"
+        rowGap={5}
+      >
+        <Grid item>
+          <Typography variant="h5">
+            Что-то пошло не так
+          </Typography>
+        </Grid>
+
+        <Grid item>
+          <img alt="asd" height={400} src={OopsImage} />
+        </Grid>
+      </Grid>
+    );
+  }
+
+  return (
+    <Grid container justifyContent="center">
+      <Grid item>
+        <img alt="asd" src={_404Image} />
+      </Grid>
+    </Grid>
+  );
+};
+
+export default ErrorPage;

src/pages/ErrorPage/ui/ErrorPageToolbar.ui.tsx

@@ -0,0 +1,29 @@
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+
+import type { FC } from 'react';
+
+type ErrorPageToolbarProps = {
+  type?: '404' | 'ErrorBoundary';
+};
+
+const TITLE: Record<NonNullable<ErrorPageToolbarProps['type']>, string> = {
+  404: 'Страницы не существует',
+  ErrorBoundary: 'Непредвиденная ошибка',
+};
+
+const ErrorPageToolbar: FC<ErrorPageToolbarProps> = (props) => {
+  const {
+    type = 'ErrorBoundary',
+  } = props;
+
+  return (
+    <Toolbar>
+      <Typography noWrap component="div" variant="h6">
+        {TITLE[type]}
+      </Typography>
+    </Toolbar>
+  );
+};
+
+export default ErrorPageToolbar;

src/pages/PaymentsPage/index.ts

@@ -0,0 +1,2 @@
+export { default as PaymentsPage } from './ui/PaymentsPage.ui';
+export { default as PaymentsPageToolbar } from './ui/PaymentsPageToolbar.ui';

src/pages/PaymentsPage/ui/PaymentsPage.ui.tsx

@@ -0,0 +1,9 @@
+import type { FC } from 'react';
+
+const PaymentsPage: FC = () => (
+  <div>
+    Payments Page
+  </div>
+);
+
+export default PaymentsPage;

src/pages/PaymentsPage/ui/PaymentsPageToolbar.ui.tsx

@@ -0,0 +1,14 @@
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+
+import type { FC } from 'react';
+
+const PaymentsPageToolbar: FC = () => (
+  <Toolbar>
+    <Typography noWrap component="div" variant="h6">
+      Payments Page Toolbar
+    </Typography>
+  </Toolbar>
+);
+
+export default PaymentsPageToolbar;

src/pages/SchedulePage/index.ts

@@ -0,0 +1,2 @@
+export { default as SchedulePage } from './ui/SchedulePage.ui';
+export { default as SchedulePageToolbar } from './ui/SchedulePageToolbar.ui';

src/pages/SchedulePage/ui/SchedulePage.ui.tsx

@@ -0,0 +1,9 @@
+import type { FC } from 'react';
+
+const SchedulePage: FC = () => (
+  <div>
+    Schedule Page
+  </div>
+);
+
+export default SchedulePage;

src/pages/SchedulePage/ui/SchedulePageToolbar.ui.tsx

@@ -0,0 +1,14 @@
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+
+import type { FC } from 'react';
+
+const SchedulePageToolbar: FC = () => (
+  <Toolbar>
+    <Typography noWrap component="div" variant="h6">
+      Schedule Page Toolbar
+    </Typography>
+  </Toolbar>
+);
+
+export default SchedulePageToolbar;

src/shared/styles/fonts/Comforta.css

@@ -0,0 +1,78 @@
+/* Comfortaa 300 Latin and Cyrillic, Normal */
+@font-face {
+  font-family: "Comfortaa";
+  font-weight: 300;
+  font-style: normal;
+  src: url("public/assets/fonts/Comfortaa/comfortaa-latin-300-normal.woff2") format("woff2")
+}
+@font-face {
+  font-family: "Comfortaa";
+  font-weight: 300;
+  font-style: normal;
+  unicode-range: U+0410-044F;
+  src: url("public/assets/fonts/Comfortaa/comfortaa-cyrillic-300-normal.woff2") format("woff2")
+}
+
+
+/* Comfortaa 400 Latin and Cyrillic, Normal */
+@font-face {
+  font-family: "Comfortaa";
+  font-weight: 400;
+  font-style: normal;
+  src: url("public/assets/fonts/Comfortaa/comfortaa-latin-400-normal.woff2") format("woff2")
+}
+@font-face {
+  font-family: "Comfortaa";
+  font-weight: 400;
+  font-style: normal;
+  unicode-range: U+0410-044F;
+  src: url("public/assets/fonts/Comfortaa/comfortaa-cyrillic-400-normal.woff2") format("woff2")
+}
+
+
+/* Comfortaa 500 Latin and Cyrillic, Normal */
+@font-face {
+  font-family: "Comfortaa";
+  font-weight: 500;
+  font-style: normal;
+  src: url("public/assets/fonts/Comfortaa/comfortaa-latin-500-normal.woff2") format("woff2")
+}
+@font-face {
+  font-family: "Comfortaa";
+  font-weight: 500;
+  font-style: normal;
+  unicode-range: U+0410-044F;
+  src: url("public/assets/fonts/Comfortaa/comfortaa-cyrillic-500-normal.woff2") format("woff2")
+}
+
+
+/* Comfortaa 600 Latin and Cyrillic, Normal */
+@font-face {
+  font-family: "Comfortaa";
+  font-weight: 600;
+  font-style: normal;
+  src: url("public/assets/fonts/Comfortaa/comfortaa-latin-600-normal.woff2") format("woff2")
+}
+@font-face {
+  font-family: "Comfortaa";
+  font-weight: 600;
+  font-style: normal;
+  unicode-range: U+0410-044F;
+  src: url("public/assets/fonts/Comfortaa/comfortaa-cyrillic-600-normal.woff2") format("woff2")
+}
+
+
+/* Comfortaa 700 Latin and Cyrillic, Normal */
+@font-face {
+  font-family: "Comfortaa";
+  font-weight: 700;
+  font-style: normal;
+  src: url("public/assets/fonts/Comfortaa/comfortaa-latin-700-normal.woff2") format("woff2")
+}
+@font-face {
+  font-family: "Comfortaa";
+  font-weight: 700;
+  font-style: normal;
+  unicode-range: U+0410-044F;
+  src: url("public/assets/fonts/Comfortaa/comfortaa-cyrillic-700-normal.woff2") format("woff2")
+}

src/shared/styles/fonts/Roboto.css

@@ -0,0 +1,173 @@
+/* Roboto 100 Latin and Cyrillic, Normal & Italic styles */
+@font-face {
+    font-family: "Roboto";
+    font-weight: 100;
+    font-style: normal;
+    src: url("public/assets/fonts/Roboto/roboto-latin-100-normal.woff2") format("woff2")
+}
+@font-face {
+    font-family: "Roboto";
+    font-weight: 100;
+    font-style: italic;
+    src: url("public/assets/fonts/Roboto/roboto-latin-100-italic.woff2") format("woff2");
+}
+@font-face {
+    font-family: "Roboto";
+    font-weight: 100;
+    font-style: normal;
+    unicode-range: U+0410-044F;
+    src: url("public/assets/fonts/Roboto/roboto-cyrillic-100-normal.woff2") format("woff2")
+}
+@font-face {
+    font-family: "Roboto";
+    font-weight: 100;
+    font-style: italic;
+    unicode-range: U+0410-044F;
+    src: url("public/assets/fonts/Roboto/roboto-cyrillic-100-italic.woff2") format("woff2")
+}
+
+
+/* Roboto 300 Latin and Cyrillic, Normal & Italic styles */
+@font-face {
+    font-family: "Roboto";
+    font-weight: 300;
+    font-style: normal;
+    src: url("public/assets/fonts/Roboto/roboto-latin-300-normal.woff2") format("woff2")
+}
+@font-face {
+    font-family: "Roboto";
+    font-weight: 300;
+    font-style: italic;
+    src: url("public/assets/fonts/Roboto/roboto-latin-300-italic.woff2") format("woff2");
+}
+@font-face {
+    font-family: "Roboto";
+    font-weight: 300;
+    font-style: normal;
+    unicode-range: U+0410-044F;
+    src: url("public/assets/fonts/Roboto/roboto-cyrillic-300-normal.woff2") format("woff2")
+}
+@font-face {
+    font-family: "Roboto";
+    font-weight: 300;
+    font-style: italic;
+    unicode-range: U+0410-044F;
+    src: url("public/assets/fonts/Roboto/roboto-cyrillic-300-italic.woff2") format("woff2")
+}
+
+
+/* Roboto 400 Latin and Cyrillic, Normal & Italic styles */
+@font-face {
+    font-family: "Roboto";
+    font-weight: 400;
+    font-style: normal;
+    src: url("public/assets/fonts/Roboto/roboto-latin-400-normal.woff2") format("woff2")
+}
+@font-face {
+    font-family: "Roboto";
+    font-weight: 400;
+    font-style: italic;
+    src: url("public/assets/fonts/Roboto/roboto-latin-400-italic.woff2") format("woff2");
+}
+@font-face {
+    font-family: "Roboto";
+    font-weight: 400;
+    font-style: normal;
+    unicode-range: U+0410-044F;
+    src: url("public/assets/fonts/Roboto/roboto-cyrillic-400-normal.woff2") format("woff2")
+}
+@font-face {
+    font-family: "Roboto";
+    font-weight: 400;
+    font-style: italic;
+    unicode-range: U+0410-044F;
+    src: url("public/assets/fonts/Roboto/roboto-cyrillic-400-italic.woff2") format("woff2")
+}
+
+
+/* Roboto 500 Latin and Cyrillic, Normal & Italic styles */
+@font-face {
+    font-family: "Roboto";
+    font-weight: 500;
+    font-style: normal;
+    src: url("public/assets/fonts/Roboto/roboto-latin-500-normal.woff2") format("woff2")
+}
+@font-face {
+    font-family: "Roboto";
+    font-weight: 500;
+    font-style: italic;
+    src: url("public/assets/fonts/Roboto/roboto-latin-500-italic.woff2") format("woff2");
+}
+@font-face {
+    font-family: "Roboto";
+    font-weight: 500;
+    font-style: normal;
+    unicode-range: U+0410-044F;
+    src: url("public/assets/fonts/Roboto/roboto-cyrillic-500-normal.woff2") format("woff2")
+}
+@font-face {
+    font-family: "Roboto";
+    font-weight: 500;
+    font-style: italic;
+    unicode-range: U+0410-044F;
+    src: url("public/assets/fonts/Roboto/roboto-cyrillic-500-italic.woff2") format("woff2")
+}
+
+
+/* Roboto 700 Latin and Cyrillic, Normal & Italic styles */
+@font-face {
+    font-family: "Roboto";
+    font-weight: 700;
+    font-style: normal;
+    src: url("public/assets/fonts/Roboto/roboto-latin-700-normal.woff2") format("woff2")
+}
+@font-face {
+    font-family: "Roboto";
+    font-weight: 700;
+    font-style: italic;
+    src: url("public/assets/fonts/Roboto/roboto-latin-700-italic.woff2") format("woff2");
+}
+@font-face {
+    font-family: "Roboto";
+    font-weight: 700;
+    font-style: normal;
+    unicode-range: U+0410-044F;
+    src: url("public/assets/fonts/Roboto/roboto-cyrillic-700-normal.woff2") format("woff2")
+}
+@font-face {
+    font-family: "Roboto";
+    font-weight: 700;
+    font-style: italic;
+    unicode-range: U+0410-044F;
+    src: url("public/assets/fonts/Roboto/roboto-cyrillic-700-italic.woff2") format("woff2")
+}
+
+
+/* Roboto 900 Latin and Cyrillic, Normal & Italic styles */
+@font-face {
+    font-family: "Roboto";
+    font-weight: 900;
+    font-style: normal;
+    src: url("public/assets/fonts/Roboto/roboto-latin-900-normal.woff2") format("woff2")
+}
+@font-face {
+    font-family: "Roboto";
+    font-weight: 900;
+    font-style: italic;
+    src: url("public/assets/fonts/Roboto/roboto-latin-900-italic.woff2") format("woff2");
+}
+@font-face {
+    font-family: "Roboto";
+    font-weight: 900;
+    font-style: normal;
+    unicode-range: U+0410-044F;
+    src: url("public/assets/fonts/Roboto/roboto-cyrillic-900-normal.woff2") format("woff2")
+}
+@font-face {
+    font-family: "Roboto";
+    font-weight: 900;
+    font-style: italic;
+    unicode-range: U+0410-044F;
+    src: url("public/assets/fonts/Roboto/roboto-cyrillic-900-italic.woff2") format("woff2")
+}
+