Merge branch 'dev' into feature/permission-service

src/components/common/layout/admin-panel-layout/AdminPanelLayout.styles.ts

@@ -0,0 +1,9 @@
+import { SxProps, Theme } from '@mui/material/styles';
+
+export const layoutWrapper: SxProps<Theme> = {
+  width: '100%',
+};
+
+export const mainContent: SxProps<Theme> = {
+  marginLeft: '240px',
+};

src/components/common/layout/admin-panel-layout/AdminPanelLayout.tsx

@@ -0,0 +1,23 @@
+import React, { ReactNode } from 'react';
+import { Box } from '@mui/material';
+
+import AdminPanel from '@/components/common/layout/admin-panel/AdminPanel';
+
+import * as styles from './AdminPanelLayout.styles';
+
+interface AdminPanelLayoutProps {
+  children?: ReactNode;
+}
+
+const AdminPanelLayout: React.FC<AdminPanelLayoutProps> = ({
+  children,
+}: AdminPanelLayoutProps) => {
+  return (
+    <Box sx={styles.layoutWrapper}>
+      <AdminPanel />
+      <Box sx={styles.mainContent}>{children}</Box>
+    </Box>
+  );
+};
+
+export default AdminPanelLayout;

src/components/common/layout/admin-panel/AdminPanel.styles.ts

@@ -0,0 +1,53 @@
+import { SxProps, Theme } from '@mui/material/styles';
+import { alpha } from '@mui/system';
+
+import { BASE_URL } from '@/components/common/layout/admin-panel/constants';
+import theme from '@/styles/theme';
+
+export const drawer: SxProps<Theme> = {
+  '& .MuiDrawer-paper': {
+    width: '240px',
+    border: 'none',
+    backgroundColor: alpha(theme.palette.grey[50], 0.62),
+  },
+};
+
+export const tabList: SxProps<Theme> = {
+  color: 'grey.800',
+  padding: '8px 16px',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '6px',
+};
+
+export const tab = (
+  index: number,
+  link: string,
+  currentPath: string,
+): SxProps<Theme> => ({
+  width: index === 10 || index === 11 ? '194px' : '208px',
+  marginLeft: index === 10 || index === 11 ? '14px' : 0,
+  backgroundColor:
+    link === currentPath ? 'backgroundDark.200' : 'backgroundDark.100',
+  height: '40px',
+  padding: '8px 16px',
+  display: 'flex',
+  gap: '8px',
+  borderRadius: '4px',
+  '&:hover': {
+    backgroundColor: 'backgroundDark.200',
+  },
+});
+
+export const tabIcon: SxProps<Theme> = {
+  width: '24px',
+};
+
+export const tabText: SxProps<Theme> = {
+  typography: 'body2Medium',
+};
+
+export const pollPartHeader: SxProps<Theme> = {
+  typography: 'body2Medium',
+  padding: '4px 0 0',
+};

src/components/common/layout/admin-panel/AdminPanel.tsx

@@ -0,0 +1,43 @@
+import { Box, Drawer, Typography } from '@mui/material';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+
+import * as styles from './AdminPanel.styles';
+import { adminPanelTabs } from './constants';
+
+const AdminPanel = () => {
+  const router = useRouter();
+
+  return (
+    <Drawer anchor="left" variant="permanent" sx={styles.drawer}>
+      <Link href="/">
+        <Image
+          src={'/icons/logo.svg'}
+          alt="FA logo"
+          width={197}
+          height={28}
+          style={{
+            margin: '16px 21px',
+          }}
+        />
+      </Link>
+      <Box sx={styles.tabList}>
+        {adminPanelTabs.map((tab, index) => {
+          return typeof tab !== 'string' ? (
+            <Link href={tab.link}>
+              <Box sx={styles.tab(index, tab.link, router.pathname)}>
+                <Box sx={styles.tabIcon}>{tab.icon}</Box>
+                <Typography sx={styles.tabText}>{tab.text}</Typography>
+              </Box>
+            </Link>
+          ) : (
+            <Typography sx={styles.pollPartHeader}>{tab}</Typography>
+          );
+        })}
+      </Box>
+    </Drawer>
+  );
+};
+
+export default AdminPanel;

src/components/common/layout/admin-panel/constants/index.tsx

@@ -0,0 +1,82 @@
+import {
+  AcademicCapIcon,
+  BriefcaseIcon,
+  BuildingLibraryIcon,
+  CalendarIcon,
+  ClipboardDocumentListIcon,
+  HomeIcon,
+  IdentificationIcon,
+  NewspaperIcon,
+  PencilSquareIcon,
+  UserCircleIcon,
+  UserGroupIcon,
+} from '@heroicons/react/24/outline';
+
+import { Captain } from '@/components/common/icons/Captain';
+
+export const BASE_URL = '/admin';
+
+export const adminPanelTabs = [
+  {
+    link: BASE_URL + '/roles',
+    text: 'Ролі',
+    icon: <Captain />,
+  },
+
+  {
+    link: BASE_URL + '/users',
+    text: 'Користувачі',
+    icon: <UserCircleIcon />,
+  },
+  {
+    link: BASE_URL + '/students',
+    text: 'Студенти',
+    icon: <IdentificationIcon />,
+  },
+  {
+    link: BASE_URL + '/groups',
+    text: 'Групи',
+    icon: <UserGroupIcon />,
+  },
+  {
+    link: BASE_URL + '/departments',
+    text: 'Кафедри',
+    icon: <BuildingLibraryIcon />,
+  },
+  {
+    link: BASE_URL + '/teachers',
+    text: 'Викладачі',
+    icon: <BriefcaseIcon />,
+  },
+  {
+    link: BASE_URL + '/disciplines',
+    text: 'Дисципліни',
+    icon: <NewspaperIcon />,
+  },
+  {
+    link: BASE_URL + '/subjects',
+    text: 'Предмети',
+    icon: <AcademicCapIcon />,
+  },
+  {
+    link: BASE_URL + '/',
+    text: 'Розклад',
+    icon: <CalendarIcon />,
+  },
+  'Опитування',
+  {
+    link: BASE_URL + '/',
+    text: 'База питань',
+    icon: <PencilSquareIcon />,
+  },
+  {
+    link: BASE_URL + '/',
+    text: 'База відповідей',
+    icon: <ClipboardDocumentListIcon />,
+  },
+  {
+    link: BASE_URL + '/',
+    text: 'Головна сторінка',
+    icon: <HomeIcon />,
+  },
+];

src/components/common/layout/footer/Footer.tsx

@@ -23,7 +23,7 @@ const Footer: FC = () => {
       <Box sx={styles.footerLogoContainer}>
         <Link href="/" component={NextLink} sx={styles.footerLogo}>
           <Image
-            src={'/icons/halloween-logo.svg'}
+            src={'/icons/logo.svg'}
             alt="FA logo"
             width={197}
             height={28}

src/components/common/layout/header/Header.tsx

@@ -13,7 +13,7 @@ const MobileHeader = dynamic(() => import('./components/mobile-header'));
 const Header: FC = () => {
   const { isLoggedIn, user } = useAuthentication();
   const transformedUser = transformData(user);
-  const isMobile = useMediaQuery(theme.breakpoints.down('desktopSemiMedium'));
+  const isMobile = useMediaQuery(theme.breakpoints.down('desktopMedium'));
 
   return (
     <>

src/components/common/layout/header/components/desktop-header/DesktopHeader.tsx

@@ -28,12 +28,7 @@ const DesktopHeader: FC<DesktopHeaderProps> = ({ isLoggedIn, user }) => {
   return (
     <AppBar sx={styles.headerContainer}>
       <Link href="/" component={NextLink} sx={styles.logoContainer}>
-        <Image
-          src={'/icons/halloween-logo.svg'}
-          alt="FA logo"
-          width={197}
-          height={28}
-        />
+        <Image src={'/icons/logo.svg'} alt="FA logo" width={197} height={28} />
       </Link>
       <Toolbar sx={styles.menu}>
         {mainLinks.map((record, index) => (

src/components/common/layout/header/components/mobile-header/MobileHeader.tsx

@@ -30,12 +30,7 @@ const MobileHeader: FC<MobileHeaderProps> = ({ isLoggedIn, user }) => {
   return (
     <AppBar sx={styles.headerContainer(isOpened)}>
       <Link href="/" component={NextLink} sx={styles.headerLogo}>
-        <Image
-          src={'/icons/halloween-logo.svg'}
-          alt="FA logo"
-          width={197}
-          height={28}
-        />
+        <Image src={'/icons/logo.svg'} alt="FA logo" width={197} height={28} />
       </Link>
       {isOpened ? (
         <Box sx={styles.iconButton}>

src/components/common/layout/page-layout/PageLayout.tsx

@@ -2,6 +2,7 @@ import React, { ReactNode } from 'react';
 import Head from 'next/head';
 import Script from 'next/script';
 
+import AdminPanelLayout from '@/components/common/layout/admin-panel-layout/AdminPanelLayout';
 import config from '@/config';
 
 import Footer from '../footer/Footer';

src/components/common/ui/alert/Alert.styles.ts

@@ -39,8 +39,8 @@ export const alert = (
     borderColor: getColor(color, AlertVariant.OUTLINED),
   }),
 
-  '.MuiAlert-icon, .MuiAlert-action': {
-    color: 'grey.800',
+  '.MuiAlert-icon': {
+    color: 'theme.palette.grey[800]',
     margin: '4px 0 0 0',
     padding: '0',
     svg: {
@@ -49,9 +49,16 @@ export const alert = (
       height: '16px',
     },
   },
-
   '.MuiAlert-action': {
     cursor: 'pointer',
+    color: 'theme.palette.grey[800]',
+    margin: '0',
+    padding: '0',
+    svg: {
+      strokeWidth: '1.5px',
+      width: '16px',
+      height: '16px',
+    },
   },
 
   '.MuiAlert-message': {

src/components/common/ui/cards/poll-teacher-card/SkipTeacherPopup.tsx

@@ -20,7 +20,7 @@ export const SkipTeacherPopup: FC<skipTeacherPopupProps> = ({
     <Popup
       contentLeft={true}
       open={true}
-      content="Чи дійсно ви бажаєте пропустити опитування про викладача? У разі схвальної відповіді, ви більше не зможете зробити відгук. Пам'ятайте, що ваша оцінка є важливою для наступних поколінь."
+      content="Чи дійсно ти бажаєш пропустити опитування про викладача? У разі схвальної відповіді, ти більше не зможеш зробити відгук. Пам'ятай, що твоя оцінка є важливою для наступних поколінь."
       title={'Пропустити опитування'}
       firstButton={
         <Button

src/components/common/ui/pop-ups/PopupTitle/PopupTitle.styles.ts

@@ -5,7 +5,7 @@ import typography from '@/styles/theme/constants/typography';
 export const iconButton: SxProps<Theme> = {
   position: 'absolute',
   right: 8,
-  top: 16,
+  top: 8,
   color: 'grey.800',
 };
 

src/components/pages/account-page/components/general-tab/components/change-avatar-window/components/avatar-dropzone/AvatarDropzone.tsx

@@ -70,7 +70,7 @@ const AvatarDropzone: FC<AvatarDropzoneProps> = ({ setFile, setAvatarURL }) => {
       {isMobile ? (
         <>
           <Button
-            text={'Обрати файл'}
+            text={'Обери файл'}
             size={ButtonSize.MEDIUM}
             variant={ButtonVariant.FILLED}
             sx={styles.button}
@@ -93,10 +93,10 @@ const AvatarDropzone: FC<AvatarDropzoneProps> = ({ setFile, setAvatarURL }) => {
           onDrop={handleDropOrFileChange}
         >
           <ArrowDownTrayIcon />
-          <Typography variant="h6Bold">Перетягніть сюди</Typography>
+          <Typography variant="h6Bold">Перетягни сюди</Typography>
           <Typography variant="body2Medium">або</Typography>
           <Button
-            text={'Обрати файл'}
+            text={'Обери файл'}
             size={ButtonSize.MEDIUM}
             variant={ButtonVariant.FILLED}
             sx={styles.button}

src/components/pages/account-page/components/general-tab/components/change-avatar-window/components/avatar-dropzone/utils/handleFileSelect.ts

@@ -11,8 +11,8 @@ export const handleFileSelect = (
 ) => {
   if (!isValidFile(file)) {
     toast.error(
-      'Неправильне розширення файлу файлу',
-      'Підтримуванні розширення: .png, .jpg, .jpeg, .webp',
+      'Invalid file extension',
+      'Supported file extensions: .png, .jpg, .jpeg, .webp',
       4000,
     );
     return;

src/components/pages/account-page/components/general-tab/components/contacts-block/validation/index.ts

@@ -4,7 +4,10 @@ import { ContactType } from '@/types/contact';
 
 export const validationSchema = yup.object().shape({
   displayName: yup.string().required(`Обов'язкове поле`),
-  link: yup.string().required(`Обов'язкове поле`),
+  link: yup
+    .string()
+    .required(`Обов'язкове поле`)
+    .url('Неправильний формат посилання'),
   name: yup.string().required(`Обов'язкове поле`),
 });
 

src/components/pages/account-page/components/group-tab/components/table/student-table/components/EditingColumn.tsx

@@ -195,7 +195,7 @@ const EditingColumn: FC<EditingColumnProps> = ({
           open={deletePopupOpen}
           hasCross
           title="Видалити користувача"
-          content={`Чи дійсно ви бажаєте видалити користувача ${student.fullName}? Якщо ви випадково видалите користувача, йому треба буде відправити повторний запит до групи.`}
+          content={`Чи дійсно ти бажаєш видалити користувача ${student.fullName}? Якщо ти випадково видалиш користувача, йому треба буде відправити повторний запит до групи.`}
           onClose={() => setDeletePopupOpen(false)}
           firstButton={
             <Button

src/components/pages/account-page/components/security-tab/SecurityTab.tsx

@@ -29,7 +29,7 @@ const SecurityTab = () => {
   return (
     <Box sx={styles.wrapper}>
       <Box>
-        <Divider text={'Зміна паролю'} textAlign={DividerTextAlign.LEFT} />
+        <Divider text={'Зміна пароля'} textAlign={DividerTextAlign.LEFT} />
         <ChangePasswordForm />
       </Box>
       <Divider