From 0fb7097407c05001ae8f1367b5bb1b907f6c5098 Mon Sep 17 00:00:00 2001
From: sifes <lonfark@gmail.com>
Date: Fri, 19 Jan 2024 17:49:16 +0200
Subject: [PATCH] feature #25 added admin user flow

- added admin user search page
- added admin user edit page
- added admin user create page
- added missing endpoints to UserAPI

closes #25
---
 .../src/app/admin/users/create/page.tsx       |   3 +-
 .../app/admin/users/edit/[userId]/page.tsx    |  21 ++-
 fictadvisor-web/src/app/admin/users/page.tsx  |   3 +-
 .../admin-user/constants/UserStateOptions.ts  |   8 +
 .../create-user-page/CreateUserPage.styles.ts |  45 +++++
 .../create-user-page/CreateUserPage.tsx       | 107 ++++++++++++
 .../admin-user/create-user-page/index.ts      |   1 +
 .../edit-user-page/EditUserPage.styles.ts     |  43 +++++
 .../edit-user-page/EditUserPage.tsx           | 137 +++++++++++++++
 .../admin/admin-user/edit-user-page/index.ts  |   1 +
 .../search-user-page/SearchUserPage.styles.ts |  12 ++
 .../search-user-page/SearchUserPage.tsx       |  53 ++++++
 .../HeaderUserSearch.styles.ts                |  38 +++++
 .../header-user-search/HeaderUserSearch.tsx   | 115 +++++++++++++
 .../components/header-user-search/index.ts    |   1 +
 .../components/users-list/UsersList.styles.ts |  54 ++++++
 .../components/users-list/UsersList.tsx       | 157 ++++++++++++++++++
 .../components/users-list/index.ts            |   1 +
 .../search-user-page/constants/Options.ts     |  13 ++
 .../constants/UserInitialValues.ts            |   8 +
 .../constants/UserSearchConstants.ts          |  12 ++
 .../admin-user/search-user-page/index.ts      |   1 +
 .../types/HeaderUserSearch.ts                 |  12 ++
 fictadvisor-web/src/lib/api/user/UserAPI.ts   |  52 +++++-
 .../src/lib/api/user/types/ChangeUserBody.ts  |   7 +
 .../src/lib/api/user/types/CreateUserBody.ts  |   7 +
 .../src/lib/api/user/types/GetAllResponse.ts  |   7 +
 fictadvisor-web/src/types/user.ts             |   4 +
 28 files changed, 914 insertions(+), 9 deletions(-)
 create mode 100644 fictadvisor-web/src/components/pages/admin/admin-user/constants/UserStateOptions.ts
 create mode 100644 fictadvisor-web/src/components/pages/admin/admin-user/create-user-page/CreateUserPage.styles.ts
 create mode 100644 fictadvisor-web/src/components/pages/admin/admin-user/create-user-page/CreateUserPage.tsx
 create mode 100644 fictadvisor-web/src/components/pages/admin/admin-user/create-user-page/index.ts
 create mode 100644 fictadvisor-web/src/components/pages/admin/admin-user/edit-user-page/EditUserPage.styles.ts
 create mode 100644 fictadvisor-web/src/components/pages/admin/admin-user/edit-user-page/EditUserPage.tsx
 create mode 100644 fictadvisor-web/src/components/pages/admin/admin-user/edit-user-page/index.ts
 create mode 100644 fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/SearchUserPage.styles.ts
 create mode 100644 fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/SearchUserPage.tsx
 create mode 100644 fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/components/header-user-search/HeaderUserSearch.styles.ts
 create mode 100644 fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/components/header-user-search/HeaderUserSearch.tsx
 create mode 100644 fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/components/header-user-search/index.ts
 create mode 100644 fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/components/users-list/UsersList.styles.ts
 create mode 100644 fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/components/users-list/UsersList.tsx
 create mode 100644 fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/components/users-list/index.ts
 create mode 100644 fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/constants/Options.ts
 create mode 100644 fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/constants/UserInitialValues.ts
 create mode 100644 fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/constants/UserSearchConstants.ts
 create mode 100644 fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/index.ts
 create mode 100644 fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/types/HeaderUserSearch.ts
 create mode 100644 fictadvisor-web/src/lib/api/user/types/ChangeUserBody.ts
 create mode 100644 fictadvisor-web/src/lib/api/user/types/CreateUserBody.ts
 create mode 100644 fictadvisor-web/src/lib/api/user/types/GetAllResponse.ts

diff --git a/fictadvisor-web/src/app/admin/users/create/page.tsx b/fictadvisor-web/src/app/admin/users/create/page.tsx
index a30f8a061..f1dbb8806 100644
--- a/fictadvisor-web/src/app/admin/users/create/page.tsx
+++ b/fictadvisor-web/src/app/admin/users/create/page.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
 
 import AdminPanelLayout from '@/components/common/layout/admin-panel-layout/AdminPanelLayout';
+import CreateUserPage from '@/components/pages/admin/admin-user/create-user-page';
 
 const Create = () => {
   return (
     <AdminPanelLayout>
-      <div></div>
+      <CreateUserPage />
     </AdminPanelLayout>
   );
 };
diff --git a/fictadvisor-web/src/app/admin/users/edit/[userId]/page.tsx b/fictadvisor-web/src/app/admin/users/edit/[userId]/page.tsx
index 0ff2bf676..55ab90155 100644
--- a/fictadvisor-web/src/app/admin/users/edit/[userId]/page.tsx
+++ b/fictadvisor-web/src/app/admin/users/edit/[userId]/page.tsx
@@ -1,13 +1,26 @@
-import React from 'react';
+'use client';
+import React, { FC } from 'react';
+import { useQuery } from 'react-query';
 
 import AdminPanelLayout from '@/components/common/layout/admin-panel-layout/AdminPanelLayout';
+import EditUserPage from '@/components/pages/admin/admin-user/edit-user-page';
+import UserAPI from '@/lib/api/user/UserAPI';
 
-const UserId = () => {
+interface AdminUserEditProps {
+  params: {
+    userId: string;
+  };
+}
+
+const AdminUserEdit: FC<AdminUserEditProps> = ({ params }) => {
+  const { data: user, isSuccess } = useQuery('getUser', () =>
+    UserAPI.getUser(params.userId),
+  );
   return (
     <AdminPanelLayout>
-      <div></div>
+      {isSuccess && <EditUserPage user={user}></EditUserPage>}
     </AdminPanelLayout>
   );
 };
 
-export default UserId;
+export default AdminUserEdit;
diff --git a/fictadvisor-web/src/app/admin/users/page.tsx b/fictadvisor-web/src/app/admin/users/page.tsx
index 1dd30cea3..1b48c7d2e 100644
--- a/fictadvisor-web/src/app/admin/users/page.tsx
+++ b/fictadvisor-web/src/app/admin/users/page.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
 
 import AdminPanelLayout from '@/components/common/layout/admin-panel-layout/AdminPanelLayout';
+import SearchUserPage from '@/components/pages/admin/admin-user/search-user-page';
 
 const Page = () => {
   return (
     <AdminPanelLayout>
-      <div></div>
+      <SearchUserPage></SearchUserPage>
     </AdminPanelLayout>
   );
 };
diff --git a/fictadvisor-web/src/components/pages/admin/admin-user/constants/UserStateOptions.ts b/fictadvisor-web/src/components/pages/admin/admin-user/constants/UserStateOptions.ts
new file mode 100644
index 000000000..33d15f09b
--- /dev/null
+++ b/fictadvisor-web/src/components/pages/admin/admin-user/constants/UserStateOptions.ts
@@ -0,0 +1,8 @@
+import { DropDownOption } from '@/components/common/ui/form/dropdown/types';
+import { UserGroupState } from '@/types/user';
+
+export const UserStateOptions: DropDownOption[] = [
+  { id: UserGroupState.APPROVED, label: 'Верифікований' },
+  { id: UserGroupState.DECLINED, label: 'Не верифікований' },
+  { id: UserGroupState.PENDING, label: 'В очікуванні' },
+];
diff --git a/fictadvisor-web/src/components/pages/admin/admin-user/create-user-page/CreateUserPage.styles.ts b/fictadvisor-web/src/components/pages/admin/admin-user/create-user-page/CreateUserPage.styles.ts
new file mode 100644
index 000000000..24e04f81b
--- /dev/null
+++ b/fictadvisor-web/src/components/pages/admin/admin-user/create-user-page/CreateUserPage.styles.ts
@@ -0,0 +1,45 @@
+import { SxProps, Theme } from '@mui/material/styles';
+
+export const header: SxProps<Theme> = {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '16px',
+};
+
+export const button: SxProps<Theme> = {
+  borderRadius: '8px',
+};
+
+export const title: SxProps<Theme> = {
+  borderBottom: '1px solid',
+  borderColor: 'backgroundDark.400',
+  padding: '16px',
+  width: '50%',
+};
+
+export const input: SxProps<Theme> = {
+  width: '40%',
+  borderRadius: '8px',
+  padding: '0px 16px',
+};
+
+export const body: SxProps<Theme> = {
+  display: 'flex',
+  gap: '36px',
+  padding: '24px 16px',
+};
+
+export const inputsWrapper: SxProps<Theme> = {
+  width: '100%',
+  maxWidth: '308px',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '18px',
+};
+
+export const avatar: SxProps<Theme> = {
+  width: '160px',
+  height: '160px',
+  borderRadius: '100%',
+};
diff --git a/fictadvisor-web/src/components/pages/admin/admin-user/create-user-page/CreateUserPage.tsx b/fictadvisor-web/src/components/pages/admin/admin-user/create-user-page/CreateUserPage.tsx
new file mode 100644
index 000000000..8d4eb58a9
--- /dev/null
+++ b/fictadvisor-web/src/components/pages/admin/admin-user/create-user-page/CreateUserPage.tsx
@@ -0,0 +1,107 @@
+'use client';
+import React, { FC, useState } from 'react';
+import { Avatar, Box, CardHeader, Stack } from '@mui/material';
+import { isAxiosError } from 'axios';
+import { useRouter } from 'next/navigation';
+
+import Button from '@/components/common/ui/button-mui';
+import {
+  ButtonColor,
+  ButtonSize,
+} from '@/components/common/ui/button-mui/types';
+import { Dropdown, InputSize, InputType } from '@/components/common/ui/form';
+import { FieldSize } from '@/components/common/ui/form/common/types';
+import Input from '@/components/common/ui/form/input-mui';
+import useToast from '@/hooks/use-toast';
+import { useToastError } from '@/hooks/use-toast-error/useToastError';
+import UserAPI from '@/lib/api/user/UserAPI';
+import { UserGroupState } from '@/types/user';
+
+import { UserStateOptions } from '../constants/UserStateOptions';
+
+import * as styles from './CreateUserPage.styles';
+
+const CreateUserPage: FC = () => {
+  const [username, setUsername] = useState<string>('');
+  const [email, setEmail] = useState<string>('');
+  const [userState, setUserState] = useState<UserGroupState>(
+    '' as UserGroupState,
+  );
+  const toast = useToast();
+  const toastError = useToastError();
+  const router = useRouter();
+
+  const handleUserCreation = async () => {
+    try {
+      await UserAPI.create({ username, email, state: userState });
+      toast.success('Користувач успішно створений!', '', 4000);
+      router.replace('/admin/users');
+    } catch (e) {
+      if (isAxiosError(e)) {
+        toastError.displayError(e.response?.data.message);
+      }
+    }
+  };
+
+  return (
+    <>
+      <Box sx={styles.header}>
+        <CardHeader title="Створення користувача" sx={styles.title} />
+        <Stack flexDirection="row" gap="8px">
+          <Button
+            size={ButtonSize.MEDIUM}
+            text="Скасувати"
+            color={ButtonColor.SECONDARY}
+            href="/admin/users"
+            sx={styles.button}
+          />
+          <Button
+            size={ButtonSize.MEDIUM}
+            text="Зберегти"
+            onClick={() => handleUserCreation()}
+            sx={styles.button}
+          />
+        </Stack>
+      </Box>
+      <Box sx={styles.body}>
+        <Box sx={styles.inputsWrapper}>
+          <Input
+            value={username}
+            onChange={setUsername}
+            size={InputSize.MEDIUM}
+            type={InputType.DEFAULT}
+            showRemark={false}
+            label="Username"
+          />
+          <Input
+            value={email}
+            onChange={setEmail}
+            size={InputSize.MEDIUM}
+            type={InputType.DEFAULT}
+            showRemark={false}
+            label="Пошта"
+          />
+          <Dropdown
+            disableClearable
+            placeholder="Стан користувача"
+            size={FieldSize.MEDIUM}
+            options={UserStateOptions}
+            showRemark={false}
+            onChange={(value: string) => setUserState(value as UserGroupState)}
+            value={userState}
+            label="Стан користувача"
+          />
+        </Box>
+        <Box>
+          <Avatar
+            src={'/frog-avatar.png'}
+            alt="картинка користувача"
+            sx={styles.avatar}
+          />
+        </Box>
+      </Box>
+    </>
+  );
+};
+
+export default CreateUserPage;
diff --git a/fictadvisor-web/src/components/pages/admin/admin-user/create-user-page/index.ts b/fictadvisor-web/src/components/pages/admin/admin-user/create-user-page/index.ts
new file mode 100644
index 000000000..b91a8a230
--- /dev/null
+++ b/fictadvisor-web/src/components/pages/admin/admin-user/create-user-page/index.ts
@@ -0,0 +1 @@
+export { default } from './CreateUserPage';
diff --git a/fictadvisor-web/src/components/pages/admin/admin-user/edit-user-page/EditUserPage.styles.ts b/fictadvisor-web/src/components/pages/admin/admin-user/edit-user-page/EditUserPage.styles.ts
new file mode 100644
index 000000000..532dd38fa
--- /dev/null
+++ b/fictadvisor-web/src/components/pages/admin/admin-user/edit-user-page/EditUserPage.styles.ts
@@ -0,0 +1,43 @@
+import { SxProps, Theme } from '@mui/material/styles';
+
+export const header: SxProps<Theme> = {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '16px',
+};
+
+export const title: SxProps<Theme> = {
+  borderBottom: '1px solid',
+  borderColor: 'backgroundDark.400',
+  padding: '16px',
+  width: '50%',
+  '& .MuiCardHeader-subheader': {
+    typography: 'body1',
+    color: 'grey.500',
+  },
+};
+
+export const button: SxProps<Theme> = {
+  borderRadius: '8px',
+};
+
+export const body: SxProps<Theme> = {
+  display: 'flex',
+  gap: '36px',
+  padding: '24px 16px',
+};
+
+export const inputsWrapper: SxProps<Theme> = {
+  width: '100%',
+  maxWidth: '308px',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '18px',
+};
+
+export const avatar: SxProps<Theme> = {
+  width: '160px',
+  height: '160px',
+  borderRadius: '100%',
+};
diff --git a/fictadvisor-web/src/components/pages/admin/admin-user/edit-user-page/EditUserPage.tsx b/fictadvisor-web/src/components/pages/admin/admin-user/edit-user-page/EditUserPage.tsx
new file mode 100644
index 000000000..1a1cbbdd2
--- /dev/null
+++ b/fictadvisor-web/src/components/pages/admin/admin-user/edit-user-page/EditUserPage.tsx
@@ -0,0 +1,137 @@
+'use client';
+import React, { FC, useState } from 'react';
+import { TrashIcon } from '@heroicons/react/24/outline';
+import { Avatar, Box, CardHeader, Stack } from '@mui/material';
+import { isAxiosError } from 'axios';
+import { useRouter } from 'next/navigation';
+
+import Button from '@/components/common/ui/button-mui';
+import {
+  ButtonColor,
+  ButtonSize,
+  ButtonVariant,
+} from '@/components/common/ui/button-mui/types';
+import { Dropdown, InputSize, InputType } from '@/components/common/ui/form';
+import { FieldSize } from '@/components/common/ui/form/common/types';
+import Input from '@/components/common/ui/form/input-mui';
+import useToast from '@/hooks/use-toast';
+import { useToastError } from '@/hooks/use-toast-error/useToastError';
+import UserAPI from '@/lib/api/user/UserAPI';
+import { UserAdmin, UserGroupState } from '@/types/user';
+
+import { UserStateOptions } from '../constants/UserStateOptions';
+
+import * as styles from './EditUserPage.styles';
+interface EditUserPageProps {
+  user: UserAdmin;
+}
+const EditUserPage: FC<EditUserPageProps> = ({ user }) => {
+  const [username, setUsername] = useState<string>(user.username);
+  const [email, setEmail] = useState<string>(user.email);
+  const [userState, setUserState] = useState<UserGroupState>(user.state);
+  const toast = useToast();
+  const toastError = useToastError();
+  const router = useRouter();
+
+  const handleDelete = async (userId: string) => {
+    try {
+      await UserAPI.delete(userId);
+      toast.success('Користувач успішно видалений!', '', 4000);
+      router.replace('/admin/users');
+    } catch (e) {
+      if (isAxiosError(e)) {
+        toastError.displayError(e.response?.data.message);
+      }
+    }
+  };
+  const handleEdit = async () => {
+    try {
+      await UserAPI.editUser(user.id, {
+        username,
+        email,
+        state: userState,
+      });
+      toast.success('Користувач успішно змінений!', '', 4000);
+    } catch (e) {
+      if (isAxiosError(e)) {
+        toastError.displayError(e.response?.data.message);
+      }
+    }
+  };
+  return (
+    <>
+      <Box sx={styles.header}>
+        <CardHeader
+          title="Редагування"
+          subheader={`Користувач ${user.username}`}
+          sx={styles.title}
+        />
+        <Stack flexDirection="row" gap="8px">
+          <Button
+            size={ButtonSize.MEDIUM}
+            color={ButtonColor.SECONDARY}
+            text="Скасувати"
+            href="/admin/users"
+            sx={styles.button}
+          />
+          <Button
+            size={ButtonSize.MEDIUM}
+            variant={ButtonVariant.OUTLINE}
+            color={ButtonColor.SECONDARY}
+            startIcon={<TrashIcon />}
+            text="Видалити"
+            onClick={() => handleDelete(user.id)}
+            sx={styles.button}
+          />
+          <Button
+            size={ButtonSize.MEDIUM}
+            text="Зберегти"
+            onClick={() => {
+              handleEdit();
+            }}
+            sx={styles.button}
+          />
+        </Stack>
+      </Box>
+      <Box sx={styles.body}>
+        <Box sx={styles.inputsWrapper}>
+          <Input
+            value={username}
+            onChange={setUsername}
+            size={InputSize.MEDIUM}
+            type={InputType.DEFAULT}
+            showRemark={false}
+            label="Username"
+          />
+          <Input
+            value={email}
+            onChange={setEmail}
+            size={InputSize.MEDIUM}
+            type={InputType.DEFAULT}
+            showRemark={false}
+            label="Пошта"
+          />
+          <Dropdown
+            disableClearable
+            placeholder="Сортувати користувачів"
+            size={FieldSize.MEDIUM}
+            options={UserStateOptions}
+            showRemark={false}
+            onChange={(value: string) => setUserState(value as UserGroupState)}
+            value={userState}
+            label="Стан користувача"
+          />
+        </Box>
+        <Box>
+          <Avatar
+            src={user.avatar}
+            alt="картинка користувача"
+            sx={styles.avatar}
+          />
+        </Box>
+      </Box>
+    </>
+  );
+};
+
+export default EditUserPage;
diff --git a/fictadvisor-web/src/components/pages/admin/admin-user/edit-user-page/index.ts b/fictadvisor-web/src/components/pages/admin/admin-user/edit-user-page/index.ts
new file mode 100644
index 000000000..fe88eb84b
--- /dev/null
+++ b/fictadvisor-web/src/components/pages/admin/admin-user/edit-user-page/index.ts
@@ -0,0 +1 @@
+export { default } from './EditUserPage';
diff --git a/fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/SearchUserPage.styles.ts b/fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/SearchUserPage.styles.ts
new file mode 100644
index 000000000..c92261a4a
--- /dev/null
+++ b/fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/SearchUserPage.styles.ts
@@ -0,0 +1,12 @@
+import { SxProps } from '@mui/material/styles';
+import { Theme } from '@mui/system';
+
+export const wrapper: SxProps<Theme> = {
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '20px',
+  padding: {
+    mobile: '16px',
+  },
+};
diff --git a/fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/SearchUserPage.tsx b/fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/SearchUserPage.tsx
new file mode 100644
index 000000000..549a1b062
--- /dev/null
+++ b/fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/SearchUserPage.tsx
@@ -0,0 +1,53 @@
+'use client';
+import React, { useState } from 'react';
+import { useQuery } from 'react-query';
+import { Box } from '@mui/material';
+
+import UserAPI from '@/lib/api/user/UserAPI';
+
+import HeaderUserSearch from './components/header-user-search';
+import UsersList from './components/users-list';
+import { UserInitialValues } from './constants/UserInitialValues';
+import {
+  HeaderUserSearchProps,
+  UserSearchFormFields,
+} from './types/HeaderUserSearch';
+import * as styles from './SearchUserPage.styles';
+
+const SearchUserPage = () => {
+  const [queryObj, setQueryObj] =
+    useState<UserSearchFormFields>(UserInitialValues);
+  const [curPage, setCurPage] = useState(0);
+  const [pageSize, setPageSize] = useState(5);
+
+  const { data, isSuccess, refetch } = useQuery(
+    ['users', curPage, pageSize, queryObj],
+    async () => await UserAPI.getAll(curPage, queryObj, pageSize),
+    {
+      refetchOnWindowFocus: false,
+      keepPreviousData: true,
+    },
+  );
+  const submitHandler: HeaderUserSearchProps['onSubmit'] = query => {
+    setQueryObj(prev => ({ ...prev, ...query }));
+  };
+
+  return (
+    <Box sx={styles.wrapper}>
+      <HeaderUserSearch onSubmit={submitHandler} />
+      {isSuccess && (
+        <UsersList
+          curPage={curPage}
+          setCurPage={setCurPage}
+          users={data.data}
+          pageSize={pageSize}
+          setPageSize={setPageSize}
+          totalCount={data.pagination.totalAmount}
+          refetch={refetch}
+        />
+      )}
+    </Box>
+  );
+};
+
+export default SearchUserPage;
diff --git a/fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/components/header-user-search/HeaderUserSearch.styles.ts b/fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/components/header-user-search/HeaderUserSearch.styles.ts
new file mode 100644
index 000000000..ccc8a9bb7
--- /dev/null
+++ b/fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/components/header-user-search/HeaderUserSearch.styles.ts
@@ -0,0 +1,38 @@
+import { SxProps, Theme } from '@mui/material/styles';
+
+export const dropdown: SxProps<Theme> = {
+  width: '100%',
+  maxWidth: '188px',
+};
+
+export const search: SxProps<Theme> = {
+  width: '100%',
+  maxWidth: '344px',
+};
+
+export const filterBar: SxProps<Theme> = {
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'start',
+  gap: '8px',
+};
+
+export const header: SxProps<Theme> = {
+  display: 'flex',
+  width: '100%',
+  alignItems: 'center',
+};
+
+export const button: SxProps<Theme> = {
+  width: '135px',
+  height: '48px',
+  borderRadius: '8px',
+};
+
+export const divider: SxProps<Theme> = {
+  height: '46px',
+  width: '1px',
+  background: '#747474',
+};
diff --git a/fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/components/header-user-search/HeaderUserSearch.tsx b/fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/components/header-user-search/HeaderUserSearch.tsx
new file mode 100644
index 000000000..a5aa1019b
--- /dev/null
+++ b/fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/components/header-user-search/HeaderUserSearch.tsx
@@ -0,0 +1,115 @@
+'use client';
+import { useEffect, useState } from 'react';
+import { FC } from 'react';
+import {
+  BarsArrowDownIcon,
+  BarsArrowUpIcon,
+} from '@heroicons/react/24/outline';
+import { Box, Divider, SelectChangeEvent } from '@mui/material';
+
+import Button from '@/components/common/ui/button-mui';
+import { ButtonSize } from '@/components/common/ui/button-mui/types';
+import { Dropdown, InputSize, InputType } from '@/components/common/ui/form';
+import CheckboxesDropdown from '@/components/common/ui/form/checkboxes-dropdown/CheckboxesDropdown';
+import { FieldSize } from '@/components/common/ui/form/common/types';
+import Input from '@/components/common/ui/form/input-mui';
+import { IconButtonShape } from '@/components/common/ui/icon-button';
+import IconButton from '@/components/common/ui/icon-button-mui';
+import {
+  IconButtonColor,
+  IconButtonSize,
+} from '@/components/common/ui/icon-button-mui/types';
+import { UserGroupState } from '@/types/user';
+
+import { sortOptions, stateOptions } from '../../constants/Options';
+import { UserInitialValues } from '../../constants/UserInitialValues';
+import { HeaderUserSearchProps } from '../../types/HeaderUserSearch';
+
+import * as styles from './HeaderUserSearch.styles';
+
+const HeaderUserSearch: FC<HeaderUserSearchProps> = ({ onSubmit }) => {
+  const [search, setSearch] = useState<string>('');
+  const [sortBy, setSortBy] = useState<string>('username');
+  const [userState, setUserState] = useState<UserGroupState[]>([]);
+  const [order, setOrder] = useState<'asc' | 'desc'>('desc');
+  const [values, setValues] = useState(UserInitialValues);
+
+  const handleSearchChange = (value: string) => {
+    setSearch(value);
+    setValues(values => ({ ...values, search: value }));
+  };
+  const handleOrderChange = () => {
+    setOrder(order => (order === 'asc' ? 'desc' : 'asc'));
+    setValues(values => ({ ...values, order: order }));
+  };
+  const handleSortByChange = (value: string) => {
+    setSortBy(value);
+    setValues(values => ({ ...values, sort: value as 'username' | 'email' }));
+  };
+
+  const handleStateChange = (event: SelectChangeEvent) => {
+    const value = event.target.value as unknown as UserGroupState[];
+    setUserState(value);
+    setValues(values => ({ ...values, state: value }));
+  };
+
+  useEffect(() => {
+    onSubmit(values);
+  }, [values]);
+
+  return (
+    <Box sx={styles.header}>
+      <Box sx={styles.filterBar}>
+        <Box sx={styles.search}>
+          <Input
+            value={search}
+            onChange={handleSearchChange}
+            size={InputSize.MEDIUM}
+            type={InputType.SEARCH}
+            placeholder="Пошук"
+            showRemark={false}
+          />
+        </Box>
+        <Divider sx={styles.divider} />
+        <Box sx={styles.dropdown}>
+          <CheckboxesDropdown
+            selected={userState.map(state => ({
+              label: state,
+              value: state,
+            }))}
+            values={stateOptions}
+            handleChange={handleStateChange}
+            label="Стан"
+            size={FieldSize.MEDIUM}
+          />
+        </Box>
+        <Divider sx={styles.divider} />
+        <Box sx={styles.dropdown}>
+          <Dropdown
+            label="Сортування"
+            size={FieldSize.MEDIUM}
+            options={sortOptions}
+            value={sortBy}
+            onChange={handleSortByChange}
+            showRemark={false}
+            disableClearable
+          />
+        </Box>
+        <IconButton
+          onClick={handleOrderChange}
+          shape={IconButtonShape.SQUARE}
+          size={IconButtonSize.LARGE}
+          color={IconButtonColor.SECONDARY}
+          icon={order === 'asc' ? <BarsArrowDownIcon /> : <BarsArrowUpIcon />}
+        />
+      </Box>
+      <Button
+        size={ButtonSize.MEDIUM}
+        text="Створити"
+        href="/admin/users/create"
+        sx={styles.button}
+      />
+    </Box>
+  );
+};
+export default HeaderUserSearch;
diff --git a/fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/components/header-user-search/index.ts b/fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/components/header-user-search/index.ts
new file mode 100644
index 000000000..00f34d6be
--- /dev/null
+++ b/fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/components/header-user-search/index.ts
@@ -0,0 +1 @@
+export { default } from './HeaderUserSearch';
diff --git a/fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/components/users-list/UsersList.styles.ts b/fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/components/users-list/UsersList.styles.ts
new file mode 100644
index 000000000..63f8ea7e5
--- /dev/null
+++ b/fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/components/users-list/UsersList.styles.ts
@@ -0,0 +1,54 @@
+import { SxProps, Theme } from '@mui/material/styles';
+
+export const tableContainer: SxProps<Theme> = {
+  // MuiTableContainer-root
+  backgroundColor: '#1E1E1E',
+  boxShadow: 'none',
+  '.MuiTableCell-root': {
+    borderBottom: 'none',
+    color: '#fff',
+    whiteSpace: 'nowrap',
+  },
+  '.MuiSvgIcon-root': {
+    color: '#fff',
+  },
+  '.MuiToolbar-root': {
+    color: '#fff',
+  },
+  '.MuiTableRow-root': {
+    borderBottom: '1px solid #404040',
+  },
+};
+export const table: SxProps<Theme> = {
+  minWidth: '992px',
+};
+
+export const avatar: SxProps<Theme> = {
+  width: '36px',
+  height: '36px',
+  borderRadius: '32px',
+};
+
+export const usernameWrapper: SxProps<Theme> = {
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'row',
+  gap: '16px',
+  alignItems: 'center',
+};
+
+export const trashIcon: SxProps<Theme> = {
+  padding: '6px',
+  borderRadius: '50%',
+};
+export const actionsWrapper: SxProps<Theme> = {
+  padding: '0 16px 0  0',
+  width: '214px',
+};
+export const actions: SxProps<Theme> = {
+  display: 'flex',
+  gap: '8px',
+  alignItems: 'center',
+  flexDirection: 'row',
+  justifyContent: 'end',
+};
diff --git a/fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/components/users-list/UsersList.tsx b/fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/components/users-list/UsersList.tsx
new file mode 100644
index 000000000..343a50aeb
--- /dev/null
+++ b/fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/components/users-list/UsersList.tsx
@@ -0,0 +1,157 @@
+'use client';
+import React, { FC, ReactNode, useState } from 'react';
+import { QueryObserverBaseResult } from 'react-query';
+import { PencilSquareIcon, TrashIcon } from '@heroicons/react/24/outline';
+import { Avatar, Box, Link, TableHead, Typography } from '@mui/material';
+import {
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableFooter,
+  TablePagination,
+  TableRow,
+} from '@mui/material';
+import { isAxiosError } from 'axios';
+import NextLink from 'next/link';
+
+import Button from '@/components/common/ui/button';
+import {
+  ButtonSize,
+  ButtonVariant,
+} from '@/components/common/ui/button-mui/types';
+import { IconButtonShape } from '@/components/common/ui/icon-button';
+import IconButton from '@/components/common/ui/icon-button-mui';
+import { IconButtonColor } from '@/components/common/ui/icon-button-mui/types';
+import Tag from '@/components/common/ui/tag';
+import { TagColor, TagSize } from '@/components/common/ui/tag/types';
+import useToast from '@/hooks/use-toast';
+import { useToastError } from '@/hooks/use-toast-error/useToastError';
+import UserAPI from '@/lib/api/user/UserAPI';
+import { UserAdmin } from '@/types/user';
+
+import {
+  TagColorMapper,
+  TagTextMapper,
+} from '../../constants/UserSearchConstants';
+
+import * as styles from './UsersList.styles';
+
+interface UsersListProps {
+  curPage: number;
+  setCurPage: React.Dispatch<React.SetStateAction<number>>;
+  users: UserAdmin[];
+  pageSize: number;
+  setPageSize: React.Dispatch<React.SetStateAction<number>>;
+  totalCount: number;
+  refetch: QueryObserverBaseResult['refetch'];
+}
+
+const UsersList: FC<UsersListProps> = ({
+  curPage,
+  setCurPage,
+  users,
+  pageSize,
+  setPageSize,
+  totalCount,
+  refetch,
+}) => {
+  const handleChangePage = (event: unknown, newPage: number) => {
+    setCurPage(newPage);
+  };
+  const toastError = useToastError();
+  const toast = useToast();
+  const handleChangeRowsPerPage = (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    setPageSize(parseInt(event.target.value, 10));
+    setCurPage(0);
+  };
+
+  const handleDelete = async (userId: string) => {
+    try {
+      await UserAPI.delete(userId);
+      await refetch();
+      toast.success('Користувача видалено успішно');
+    } catch (e) {
+      if (isAxiosError(e)) {
+        toastError.displayError(e.response?.data.message);
+      }
+    }
+  };
+
+  return (
+    <TableContainer component={Paper} sx={styles.tableContainer}>
+      <Table sx={styles.table} aria-label="simple table">
+        <TableHead>
+          <TableRow>
+            <TableCell align="left">Username</TableCell>
+            <TableCell align="left">Пошта</TableCell>
+            <TableCell align="left">Стан користувача</TableCell>
+            <TableCell align="left"></TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {users.map(user => (
+            <TableRow key={user.id}>
+              <TableCell align="left" scope="row">
+                <Box sx={styles.usernameWrapper}>
+                  <Avatar
+                    src={user.avatar ?? '/images/frog-avatar.png'}
+                    alt="Картинка профілю"
+                    sx={styles.avatar}
+                  />
+                  <Typography variant="body2">{user.username}</Typography>
+                </Box>
+              </TableCell>
+              <TableCell align="left">{user.email}</TableCell>
+              <TableCell align="left">
+                <Tag
+                  text={TagTextMapper[user.state]}
+                  size={TagSize.SMALL}
+                  color={TagColorMapper[user.state]}
+                />
+              </TableCell>
+              <TableCell align="right" sx={styles.actionsWrapper}>
+                <Box sx={styles.actions}>
+                  <Link
+                    href={`/admin/users/edit/${user.id}`}
+                    component={NextLink}
+                    underline="none"
+                    color="inherit"
+                  >
+                    <Button
+                      size={ButtonSize.SMALL}
+                      startIcon={<PencilSquareIcon width={24} height={24} />}
+                      variant={ButtonVariant.OUTLINE}
+                      text="Редагувати"
+                    />
+                  </Link>
+                  <IconButton
+                    icon={<TrashIcon width={24} height={24} />}
+                    sx={styles.trashIcon}
+                    color={IconButtonColor.SECONDARY}
+                    shape={IconButtonShape.CIRCLE}
+                    onClick={() => handleDelete(user.id)}
+                  />
+                </Box>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+        <TableFooter></TableFooter>
+      </Table>
+      <TablePagination
+        rowsPerPageOptions={[5, 10, 25]}
+        component="div"
+        count={totalCount}
+        rowsPerPage={pageSize}
+        page={curPage}
+        onPageChange={handleChangePage}
+        onRowsPerPageChange={handleChangeRowsPerPage}
+      />
+    </TableContainer>
+  );
+};
+export default UsersList;
diff --git a/fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/components/users-list/index.ts b/fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/components/users-list/index.ts
new file mode 100644
index 000000000..8296af033
--- /dev/null
+++ b/fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/components/users-list/index.ts
@@ -0,0 +1 @@
+export { default } from './UsersList';
diff --git a/fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/constants/Options.ts b/fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/constants/Options.ts
new file mode 100644
index 000000000..fcaa72cfa
--- /dev/null
+++ b/fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/constants/Options.ts
@@ -0,0 +1,13 @@
+import { CheckboxOption } from '@/components/common/ui/form/checkboxes-dropdown/types/CheckboxOption';
+import { DropDownOption } from '@/components/common/ui/form/dropdown/types';
+import { UserGroupState } from '@/types/user';
+
+export const sortOptions: DropDownOption[] = [
+  { id: 'username', label: 'За назвою' },
+  { id: 'email', label: 'За поштою' },
+];
+export const stateOptions: CheckboxOption[] = [
+  { value: UserGroupState.APPROVED, label: 'Верифікований' },
+  { value: UserGroupState.DECLINED, label: 'Не верифікований' },
+  { value: UserGroupState.PENDING, label: 'В очікуванні' },
+];
diff --git a/fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/constants/UserInitialValues.ts b/fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/constants/UserInitialValues.ts
new file mode 100644
index 000000000..7da517e1a
--- /dev/null
+++ b/fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/constants/UserInitialValues.ts
@@ -0,0 +1,8 @@
+import { UserSearchFormFields } from '../types/HeaderUserSearch';
+
+export const UserInitialValues: UserSearchFormFields = {
+  search: '',
+  order: 'asc',
+  sort: 'username',
+  state: [],
+};
diff --git a/fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/constants/UserSearchConstants.ts b/fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/constants/UserSearchConstants.ts
new file mode 100644
index 000000000..e08836166
--- /dev/null
+++ b/fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/constants/UserSearchConstants.ts
@@ -0,0 +1,12 @@
+import { TagColor } from '@/components/common/ui/tag/types';
+
+export const TagColorMapper: Record<string, TagColor> = {
+  PENDING: TagColor.ORANGE,
+  APPROVED: TagColor.SUCCESS,
+  DECLINED: TagColor.ERROR,
+};
+export const TagTextMapper: Record<string, string> = {
+  PENDING: 'В очікуванні',
+  APPROVED: 'Верифікований',
+  DECLINED: 'Не верифікований',
+};
diff --git a/fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/index.ts b/fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/index.ts
new file mode 100644
index 000000000..b5331187c
--- /dev/null
+++ b/fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/index.ts
@@ -0,0 +1 @@
+export { default } from './SearchUserPage';
diff --git a/fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/types/HeaderUserSearch.ts b/fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/types/HeaderUserSearch.ts
new file mode 100644
index 000000000..443fbf533
--- /dev/null
+++ b/fictadvisor-web/src/components/pages/admin/admin-user/search-user-page/types/HeaderUserSearch.ts
@@ -0,0 +1,12 @@
+import { UserGroupState } from '@/types/user';
+
+export interface UserSearchFormFields {
+  search: string;
+  order: 'asc' | 'desc';
+  sort: 'username' | 'email';
+  state: UserGroupState[];
+}
+
+export interface HeaderUserSearchProps {
+  onSubmit: (values: Partial<UserSearchFormFields>) => void;
+}
diff --git a/fictadvisor-web/src/lib/api/user/UserAPI.ts b/fictadvisor-web/src/lib/api/user/UserAPI.ts
index ea6abf94c..9d54622b0 100644
--- a/fictadvisor-web/src/lib/api/user/UserAPI.ts
+++ b/fictadvisor-web/src/lib/api/user/UserAPI.ts
@@ -1,6 +1,6 @@
+import { UserSearchFormFields } from '@/components/pages/admin/admin-user/search-user-page/types/HeaderUserSearch';
 import { AddContactBody } from '@/lib/api/user/types/AddContactBody';
 import { ChangeAvatarResponse } from '@/lib/api/user/types/ChangeAvatarResponse';
-import { ChangeInfoBody } from '@/lib/api/user/types/ChangeInfoBody';
 import { ChangeRoleBody } from '@/lib/api/user/types/ChangeRoleBody';
 import { GetContactsResponse } from '@/lib/api/user/types/GetContactsResponse';
 import { GetSelectiveDisciplinesBySemesterResponse } from '@/lib/api/user/types/GetSelectiveDisciplinesBySemesterResponse';
@@ -13,13 +13,59 @@ import { VerifyStudentBody } from '@/lib/api/user/types/VerifyStudentBody';
 import { VerifySuperheroBody } from '@/lib/api/user/types/VerifySuperheroBody';
 import { getAuthorizationHeader } from '@/lib/api/utils';
 import { TelegramUser } from '@/types/telegram';
+import { UserAdmin } from '@/types/user';
 
 import { client } from '../instance';
 
+import { ChangeUserBody } from './types/ChangeUserBody';
+import { CreateUserBody } from './types/CreateUserBody';
+import { GetAllResponse } from './types/GetAllResponse';
+
 class UserAPI {
-  async changeInfo(userId: string, body: ChangeInfoBody) {
+  async getAll(
+    page: number,
+    params: Partial<UserSearchFormFields> = {},
+    pageSize?: number,
+  ): Promise<GetAllResponse> {
+    const { data } = await client.get(`/users`, {
+      params: {
+        ...params,
+        page,
+        pageSize,
+      },
+      ...getAuthorizationHeader(),
+    });
+    return data;
+  }
+
+  async getUser(userId: string): Promise<UserAdmin> {
+    const { data } = await client.get(
+      `/users/${userId}`,
+      getAuthorizationHeader(),
+    );
+    return data;
+  }
+
+  async delete(userId: string) {
+    const { data } = await client.delete(
+      `/users/${userId}`,
+      getAuthorizationHeader(),
+    );
+    return data;
+  }
+
+  async create(body: CreateUserBody) {
+    const { data } = await client.post(
+      `/users/createUser`,
+      body,
+      getAuthorizationHeader(),
+    );
+    return data;
+  }
+
+  async editUser(userId: string, body: ChangeUserBody) {
     const { data } = await client.patch(
-      `/users/${userId}/student`,
+      `/users/${userId}`,
       body,
       getAuthorizationHeader(),
     );
diff --git a/fictadvisor-web/src/lib/api/user/types/ChangeUserBody.ts b/fictadvisor-web/src/lib/api/user/types/ChangeUserBody.ts
new file mode 100644
index 000000000..0ed11db14
--- /dev/null
+++ b/fictadvisor-web/src/lib/api/user/types/ChangeUserBody.ts
@@ -0,0 +1,7 @@
+import { UserGroupState } from '@/types/user';
+
+export interface ChangeUserBody {
+  email?: string;
+  username?: string;
+  state?: UserGroupState;
+}
diff --git a/fictadvisor-web/src/lib/api/user/types/CreateUserBody.ts b/fictadvisor-web/src/lib/api/user/types/CreateUserBody.ts
new file mode 100644
index 000000000..3b9bd1b64
--- /dev/null
+++ b/fictadvisor-web/src/lib/api/user/types/CreateUserBody.ts
@@ -0,0 +1,7 @@
+import { UserGroupState } from '@/types/user';
+
+export interface CreateUserBody {
+  email: string;
+  username: string;
+  state: UserGroupState;
+}
diff --git a/fictadvisor-web/src/lib/api/user/types/GetAllResponse.ts b/fictadvisor-web/src/lib/api/user/types/GetAllResponse.ts
new file mode 100644
index 000000000..0a9d51c1b
--- /dev/null
+++ b/fictadvisor-web/src/lib/api/user/types/GetAllResponse.ts
@@ -0,0 +1,7 @@
+import { Pagination } from '@/types/api';
+import { UserAdmin } from '@/types/user';
+
+export interface GetAllResponse {
+  data: UserAdmin[];
+  pagination: Pagination;
+}
diff --git a/fictadvisor-web/src/types/user.ts b/fictadvisor-web/src/types/user.ts
index 0b16a820f..d188f0699 100644
--- a/fictadvisor-web/src/types/user.ts
+++ b/fictadvisor-web/src/types/user.ts
@@ -40,3 +40,7 @@ export interface UserRemainingSelective {
   disciplineId: string;
   subjectName: string;
 }
+
+export interface UserAdmin extends Omit<User, 'firstName' | 'lastName'> {
+  state: UserGroupState;
+}