feat: add reports page

Author: nadeocfg

frontend/package.json

@@ -5,14 +5,16 @@
   "proxy1": "http://18.185.65.50/",
   "proxy": "http://localhost:5000/",
   "dependencies": {
-    "@date-io/moment": "2.11.0",
+    "@date-io/moment": "^2.13.1",
     "@emotion/react": "^11.6.0",
     "@emotion/styled": "^11.6.0",
     "@material-ui/core": "^4.11.4",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/pickers": "^3.3.10",
     "@mui/icons-material": "^5.2.5",
     "@mui/material": "^5.1.1",
+    "@mui/x-date-pickers": "^5.0.0-alpha.2",
+    "@mui/x-date-pickers-pro": "^5.0.0-alpha.2",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",

frontend/src/App.tsx

@@ -24,6 +24,8 @@ import OrderEdit from './pages/orders/OrderEdit';
 import PaidOuts from './pages/PaidOuts';
 import Settings from './pages/administration/Settings';
 import Cash from './pages/administration/Cash';
+import { RequestPage } from '@mui/icons-material';
+import RequestsReport from './pages/reports/RequestsReport';
 
 const App = () => {
   const dispatch = useDispatch();
@@ -97,6 +99,9 @@ const App = () => {
               <Route exact path="/paids">
                 <PaidOuts />
               </Route>
+              <Route exact path="/reports/requests-report">
+                <RequestsReport />
+              </Route>
 
               {(userRole === 'ADMIN' || userRole === 'SUPER_ADMIN') && (
                 <>

frontend/src/components/Appbar/Appbar.tsx

@@ -21,7 +21,7 @@ import { changeDrawer } from '../../store/actions/mainActions';
 import { StoreModel } from '../../models/storeModel';
 import PeopleAltOutlinedIcon from '@material-ui/icons/PeopleAltOutlined';
 import { useHistory, useLocation } from 'react-router';
-import { adminRoutes, routes } from '../../utils/routes';
+import { adminRoutes, reportsRoutes, routes } from '../../utils/routes';
 import ExpandLess from '@material-ui/icons/ExpandLess';
 import ExpandMore from '@material-ui/icons/ExpandMore';
 import { useState } from 'react';
@@ -35,6 +35,7 @@ import PlaylistAddCheckIcon from '@material-ui/icons/PlaylistAddCheck';
 import EmojiPeopleIcon from '@material-ui/icons/EmojiPeople';
 import AttachMoneyIcon from '@material-ui/icons/AttachMoney';
 import PointOfSaleIcon from '@mui/icons-material/PointOfSale';
+import AssessmentIcon from '@mui/icons-material/Assessment';
 
 const Appbar = () => {
   const open = useSelector((state: StoreModel) => state.mainStore.isDrawerOpen);
@@ -45,11 +46,16 @@ const Appbar = () => {
   const history = useHistory();
   const location = useLocation();
   const [openSubMenu, setOpenSubMenu] = useState(false);
+  const [openReports, setOpenReports] = useState(false);
 
   const handleOpenSubmenu = () => {
     setOpenSubMenu(!openSubMenu);
   };
 
+  const handleReportsMenu = () => {
+    setOpenReports(!openReports);
+  };
+
   const handleChange = () => {
     dispatch(changeDrawer(!open));
   };
@@ -127,9 +133,56 @@ const Appbar = () => {
             </ListItem>
           ))}
 
+          <ListItem
+            button
+            onClick={handleReportsMenu}
+            className={
+              location.pathname === '/reports'
+                ? 'menu__item menu__item_selected'
+                : 'menu__item'
+            }
+          >
+            <ListItemIcon>
+              <AssessmentIcon />
+            </ListItemIcon>
+            <ListItemText primary="Отчеты" />
+            {openReports ? <ExpandLess /> : <ExpandMore />}
+          </ListItem>
+
+          <Collapse in={openReports} unmountOnExit>
+            <List component="div" disablePadding className="menu__nested">
+              {reportsRoutes.map((route, index) => (
+                <ListItem
+                  key={index}
+                  button
+                  onClick={() => navigateTo(route.path)}
+                  selected={location.pathname === route.path}
+                  className={
+                    location.pathname === route.path
+                      ? 'menu__item menu__item_selected'
+                      : 'menu__item'
+                  }
+                >
+                  <ListItemIcon>
+                    {route.code === 'requestsReport' && <WorkIcon />}
+                  </ListItemIcon>
+                  <ListItemText primary={route.name} />
+                </ListItem>
+              ))}
+            </List>
+          </Collapse>
+
           {(userRoleCode === 'ADMIN' || userRoleCode === 'SUPER_ADMIN') && (
             <>
-              <ListItem button onClick={handleOpenSubmenu}>
+              <ListItem
+                button
+                onClick={handleOpenSubmenu}
+                className={
+                  location.pathname === '/administration'
+                    ? 'menu__item menu__item_selected'
+                    : 'menu__item'
+                }
+              >
                 <ListItemIcon>
                   <SettingsIcon />
                 </ListItemIcon>

frontend/src/pages/reports/RequestsReport/RequestsReport.scss

@@ -0,0 +1,3 @@
+.filters {
+  padding: 12px;
+}