Almost done feature 645

src/AppRoutes.js

@@ -23,6 +23,7 @@ import {
   // PRICES_PAGE,
   ABOUT_PAGE,
   ADMIN_HOME_PAGE,
+  ADMIN_USERS_PAGE,
   // POLICY_PRIVACY_PAGE,
 } from "./constants/pages";
 import LoginPage from "./pages/LoginPage/LoginPage";
@@ -45,8 +46,9 @@ import MyOffers from "./pages/MyOffers/MyOffers";
 // import PricesPage from "./pages/Prices/PricesPage";
 import AboutPage from "./pages/About/AboutPage";
 import AuthRoute from "./components/Router/AuthRoute";
-import AdminHomePage from "./pages/AdminHomePage/AdminHomePage";
 import AdminRoute from "./components/Router/AdminRoute";
+import AdminHomePage from "./pages/AdminHomePage/AdminHomePage";
+// import AdminUsersPage from "./pages/AdminUsersPage/AdminUsersPage";
 // import PrivacyPolicyPage from "./pages/PrivacyPolicy/PrivacyPolicyPage";
 
 const AppRoutes = () => {
@@ -56,6 +58,7 @@ const AppRoutes = () => {
       <AuthRoute exact path={LOGIN_PAGE} component={LoginPage} />
       <AuthRoute exact path={ADMIN_LOGIN_PAGE} component={AdminLoginPage} />
       <AdminRoute path={ADMIN_HOME_PAGE} component={AdminHomePage} />
+      {/* <AdminRoute path={ADMIN_USERS_PAGE} component={AdminUsersPage} /> */}
       <Route path={NOT_FOUND_PAGE} component={NotFoundPage} />
       <Route path={ERROR_PAGE} component={ErrorPage} />
       <AuthRoute

src/assets/images/svg/block.svg

@@ -0,0 +1,11 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1412_9649)">
+<path d="M9 16.5C13.1421 16.5 16.5 13.1421 16.5 9C16.5 4.85786 13.1421 1.5 9 1.5C4.85786 1.5 1.5 4.85786 1.5 9C1.5 13.1421 4.85786 16.5 9 16.5Z" stroke="#5A3984" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.69727 3.69727L14.3023 14.3023" stroke="#5A3984" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_1412_9649">
+<rect width="18" height="18" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/images/svg/pin-outlined.svg

@@ -0,0 +1,10 @@
+<svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1833_10358)">
+<path d="M17.5239 6.36219L16.7758 5.93024L16.4025 6.70932L14.1445 11.4218L13.9563 11.8146L14.1841 12.1859C14.8482 13.2683 15.1028 14.5843 14.8378 15.889L14.8162 15.9944C14.8162 15.9945 14.8161 15.9947 14.8161 15.9949C14.8045 16.0494 14.745 16.1479 14.6047 16.2108L14.5786 16.2225L14.5533 16.2361C14.5179 16.2551 14.4348 16.27 14.3339 16.2118L4.59109 10.5868C4.49874 10.5334 4.44062 10.442 4.4307 10.3405L4.43071 10.3405L4.43022 10.3357C4.41975 10.2349 4.46016 10.1311 4.53653 10.0637L4.53726 10.063L4.6205 9.9893L4.62095 9.9889C5.6152 9.10697 6.88296 8.67 8.15351 8.70427L8.58904 8.71602L8.83518 8.35652L11.7873 4.04478L12.2754 3.33195L11.5272 2.9L10.6279 2.38074C10.4725 2.29105 10.4192 2.09214 10.5089 1.93679C10.5986 1.78144 10.7975 1.72814 10.9529 1.81783L18.7471 6.31783C18.9029 6.4078 18.956 6.60601 18.8661 6.76179C18.7761 6.91756 18.5779 6.97072 18.4221 6.88074L17.5239 6.36219ZM8.38144 15.9217L7.09394 18.1517C7.00372 18.3079 6.80624 18.3609 6.64998 18.2706C6.49372 18.1804 6.4408 17.9829 6.53102 17.8267L7.81852 15.5967L8.38144 15.9217Z" stroke="#5A3984" stroke-width="1.6"/>
+</g>
+<defs>
+<clipPath id="clip0_1833_10358">
+<rect width="13.5" height="18" fill="white" transform="translate(9.4043) rotate(30)"/>
+</clipPath>
+</defs>
+</svg>

src/components/Admin/Sidebar/Sidebar.js

@@ -22,15 +22,24 @@ import { getImageUrl, variants } from "../../../util/helpers/imageUrlGetter";
 import useIsMobile from "../../../hooks/useIsMobile";
 import { ADMIN_NAVIGATION } from "../../../constants/adminNavigation";
 import { ReactComponent as Logout } from "../../../assets/images/svg/log-out.svg";
+import { useTranslation } from "react-i18next";
+import { useDispatch } from "react-redux";
+import { logoutAdmin } from "../../../store/actions/login/loginActions";
 
 const Sidebar = () => {
   const history = useHistory();
   const profile = useSelector(selectMineProfile);
+  const dispatch = useDispatch();
   const { isMobile } = useIsMobile();
-  console.log(history);
+  const { t } = useTranslation();
+  console.log(profile);
   const routeToItem = (route) => {
+    console.log(route);
     history.push(route);
   };
+  const logoutHandler = () => {
+    dispatch(logoutAdmin());
+  };
 
   return (
     <SidebarContainer>
@@ -43,10 +52,12 @@ const Sidebar = () => {
             src={getImageUrl(profile.image, variants.profileImage, isMobile)}
           />
           <SidebarProfileName>{profile.company.name}</SidebarProfileName>
-          <SidebarProfileRole>Administrator</SidebarProfileRole>
+          <SidebarProfileRole>{t("admin.navigation.role")}</SidebarProfileRole>
         </SidebarProfileImageContainer>
         <SidebarNavigation>
-          <SidebarNavigationMeni>Meni</SidebarNavigationMeni>
+          <SidebarNavigationMeni>
+            {t("admin.navigation.menu")}
+          </SidebarNavigationMeni>
           <SidebarNavigationMeniItemUl>
             {ADMIN_NAVIGATION.map((value) => (
               <SidebarNavigationMeniItem
@@ -63,8 +74,8 @@ const Sidebar = () => {
               </SidebarNavigationMeniItem>
             ))}
           </SidebarNavigationMeniItemUl>
-          <SidebarNavigationMeniLogout>
-            <Logout /> Odjavi se
+          <SidebarNavigationMeniLogout onClick={logoutHandler}>
+            <Logout /> {t("admin.navigation.logout")}
           </SidebarNavigationMeniLogout>
         </SidebarNavigation>
       </SidebarContent>

src/components/Admin/Sidebar/Sidebar.styled.js

@@ -4,6 +4,12 @@ import selectedTheme from "../../../themes";
 
 export const SidebarContainer = styled(Box)`
   margin-top: -30px;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  min-width: 20%;
+  overflow-y: auto;
+  height: 100vh;
 `;
 
 export const SidebarHeader = styled(Box)`

src/components/Cards/OfferCard/OfferCard.js

@@ -27,6 +27,8 @@ import {
   LikeIcon,
   LikeIconContainer,
   CategoryIcon,
+  PinIconContainer,
+  PinOutlinedIcon,
 } from "./OfferCard.styled";
 import DeleteOffer from "./DeleteOffer/DeleteOffer";
 import { ReactComponent as Message } from "../../../assets/images/svg/mail.svg";
@@ -46,6 +48,9 @@ const OfferCard = (props) => {
   const userId = useSelector(selectUserId);
   const { isMobile } = useIsMobile();
 
+  const pinOffer = (event) => {
+    event.stopPropagation();
+  };
   const routeToItem = (itemId) => {
     if (!props.disabledCheckButton) {
       history.push(`/proizvodi/${itemId}`);
@@ -206,6 +211,11 @@ const OfferCard = (props) => {
               <Message />
             </MessageIcon>
           )}
+          {props.isAdmin && !props.pinned && (
+            <PinIconContainer showMessageIcon onClick={pinOffer}>
+              <PinOutlinedIcon />
+            </PinIconContainer>
+          )}
           {props?.offer?.pinned && <PinIcon isMyOffer={props.isMyOffer} />}
         </OfferFlexContainer>
       </OfferCardContainer>
@@ -251,6 +261,7 @@ OfferCard.propTypes = {
   dontShowViews: PropTypes.bool,
   skeleton: PropTypes.bool,
   disabledCheckButton: PropTypes.bool,
+  isAdmin: PropTypes.bool,
 };
 OfferCard.defaultProps = {
   halfwidth: false,

src/components/Cards/OfferCard/OfferCard.styled.js

@@ -8,6 +8,7 @@ import { ReactComponent as Remove } from "../../../assets/images/svg/trash.svg";
 import { ReactComponent as Edit } from "../../../assets/images/svg/edit.svg";
 import { ReactComponent as Like } from "../../../assets/images/svg/like.svg";
 import { ReactComponent as Pin } from "../../../assets/images/svg/pin.svg";
+import { ReactComponent as PinOutlined } from "../../../assets/images/svg/pin-outlined.svg";
 import { ReactComponent as Category } from "../../../assets/images/svg/category.svg";
 
 export const OfferCardContainer = styled(Container)`
@@ -302,9 +303,9 @@ export const RemoveIconContainer = styled(MessageIcon)`
 
   @media screen and (max-width: 600px) {
     display: block;
-    position: ${props => props.vertical && "absolute"};
-    top: ${props => props.vertical && "325px"};
-    left: ${props => props.vertical && "59px"};
+    position: ${(props) => props.vertical && "absolute"};
+    top: ${(props) => props.vertical && "325px"};
+    left: ${(props) => props.vertical && "59px"};
   }
 `;
 export const RemoveIcon = styled(Remove)``;
@@ -316,9 +317,9 @@ export const EditIconContainer = styled(MessageIcon)`
   @media screen and (max-width: 600px) {
     position: absolute;
     display: block;
-    right: ${props => !props.vertical && "64px"};
-    top: ${props => props.vertical && "325px"};
-    left: ${props => props.vertical && "18px"};
+    right: ${(props) => !props.vertical && "64px"};
+    top: ${(props) => props.vertical && "325px"};
+    left: ${(props) => props.vertical && "18px"};
   }
 `;
 export const EditIcon = styled(Edit)``;
@@ -334,6 +335,10 @@ export const LikeIconContainer = styled(MessageIcon)`
     }
   `}
 `;
+export const PinIconContainer = styled(MessageIcon)`
+  right: 134px;
+  top: 18px;
+`;
 export const LikeIcon = styled(Like)`
   & path {
     stroke: ${(props) =>
@@ -346,6 +351,13 @@ export const LikeIcon = styled(Like)`
     top: -1px;
   }
 `;
+export const PinOutlinedIcon = styled(PinOutlined)`
+  & g path {
+    /* fill: transparent !important; */
+    /* stroke-width: 2; */
+    /* stroke: ${selectedTheme.colors.primaryPurple} !important; */
+  }
+`;
 export const PinIcon = styled(Pin)`
   position: absolute;
   top: 20px;

src/components/Cards/ProfileCard/BigProfileCard/BigProfileCard.js

@@ -0,0 +1,75 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import {
+  BlockIcon,
+  BlockIconContainer,
+  CheckButton,
+  EditButton,
+  EditIcon,
+  ProfileCardContainer,
+  ProfileCardWrapper,
+  ProfileInfoContainer,
+  RemoveIcon,
+  RemoveIconContainer,
+} from "./BigProfileCard.styled";
+import ProfileMainInfo from "../ProfileMainInfo/ProfileMainInfo";
+import ProfileContact from "../ProfileContact/ProfileContact";
+import EditProfile from "../EditProfile/EditProfile";
+import selectedTheme from "../../../../themes";
+import { useTranslation } from "react-i18next";
+
+const BigProfileCard = (props) => {
+  const { t } = useTranslation();
+  const [editProfileModal, setEditProfileModal] = useState(false);
+  const closeModalHandler = () => {
+    setEditProfileModal(false);
+  };
+  const removeUser = () => {};
+  const blockUser = () => {};
+  return (
+    <>
+      <ProfileCardContainer>
+        <ProfileCardWrapper variant="outlined">
+          <EditButton onClick={() => setEditProfileModal(true)}>
+            <EditIcon />
+          </EditButton>
+          <RemoveIconContainer onClick={removeUser}>
+            <RemoveIcon />
+          </RemoveIconContainer>
+          <BlockIconContainer onClick={blockUser}>
+            <BlockIcon />
+          </BlockIconContainer>
+          <ProfileInfoContainer>
+            {/* Profile Main Info  */}
+            <ProfileMainInfo profile={props.profile} isAdmin />
+            {/* Profile Contact */}
+            <ProfileContact profile={props.profile} isAdmin />
+          </ProfileInfoContainer>
+          <CheckButton
+            variant={"outlined"}
+            buttoncolor={selectedTheme.colors.primaryPurple}
+            textcolor={selectedTheme.colors.primaryPurple}
+            style={{ fontWeight: "600" }}
+          >
+            {t("admin.users.checkProfile")}
+          </CheckButton>
+        </ProfileCardWrapper>
+      </ProfileCardContainer>
+      {editProfileModal && (
+        <EditProfile
+          profile={props.profile}
+          closeModalHandler={closeModalHandler}
+          reFetchProfile={() => {}}
+          isAdmin
+          userId={props.profile._id}
+        />
+      )}
+    </>
+  );
+};
+
+BigProfileCard.propTypes = {
+  profile: PropTypes.any,
+};
+
+export default BigProfileCard;

src/components/Cards/ProfileCard/BigProfileCard/BigProfileCard.styled.js

@@ -0,0 +1,313 @@
+import styled from "styled-components";
+import { Card, Typography, Grid, Box } from "@mui/material";
+import selectedTheme from "../../../../themes";
+import { ReactComponent as Edit } from "../../../../assets/images/svg/edit.svg";
+// import { ReactComponent as Pocket } from "../../../assets/images/svg/pocket.svg";
+// import { ReactComponent as Globe } from "../../../assets/images/svg/globe.svg";
+import { ReactComponent as Mail } from "../../../../assets/images/svg/mail.svg";
+import { ReactComponent as Remove } from "../../../../assets/images/svg/trash.svg";
+import { ReactComponent as Block } from "../../../../assets/images/svg/block.svg";
+import { IconButton } from "../../../Buttons/IconButton/IconButton";
+import { PrimaryButton } from "../../../Buttons/PrimaryButton/PrimaryButton";
+// import { ReactComponent as Location } from "../../../assets/images/svg/location.svg";
+
+export const ProfileCardContainer = styled(Box)`
+  width: 100%;
+  box-sizing: border-box;
+  max-height: 184px;
+  margin-top: 34px;
+  overflow: hidden;
+
+  @media (max-width: 1200px) {
+    padding: 0;
+  }
+`;
+export const EditIcon = styled(Edit)`
+  width: 18px;
+  height: 18px;
+  & path {
+    stroke: ${selectedTheme.colors.primaryPurple};
+  }
+`;
+
+
+export const MessageButton = styled(IconButton)`
+  width: 40px;
+  height: 40px;
+  position: absolute;
+  top: 18px;
+  right: 18px;
+  background-color: ${selectedTheme.colors.primaryIconBackgroundColor};
+  border-radius: 100%;
+  padding-top: 2px;
+  text-align: center;
+  @media (max-width: 600px) {
+    width: 30px;
+    height: 30px;
+    top: 16px;
+    right: 16px;
+    padding: 0;
+    ${(props) =>
+      props.vertical &&
+      `
+      display: none;
+    `}
+    & button svg {
+      width: 16px;
+      height: 16px;
+      position: relative;
+      top: -3px;
+      left: -3.5px;
+    }
+  }
+`;
+export const EditButton = styled(MessageButton)`
+  right: 76px;
+`;
+export const ProfileCardWrapper = styled(Card)`
+  border: 1px solid ${selectedTheme.colors.borderNormal};
+  background: ${(props) =>
+    props.isMyProfile ? selectedTheme.colors.primaryPurple : "white"};
+  width: 100%;
+  min-width: fit-content;
+  padding: 1rem;
+  position: relative;
+  border-radius: 0 0 4px 4px;
+`;
+export const RemoveIconContainer = styled(MessageButton)`
+  display: block;
+  top: 18px;
+  right: 18px;
+`;
+export const RemoveIcon = styled(Remove)``;
+export const BlockIconContainer = styled(MessageButton)`
+  display: block;
+  top: 18px;
+  right: 134px;
+`;
+export const BlockIcon = styled(Block)``;
+export const CheckButton = styled(PrimaryButton)`
+  width: 180px;
+  height: 48px;
+  position: absolute;
+  bottom: 25px;
+  right: 9px;
+  & button:hover {
+    background-color: ${selectedTheme.colors.primaryPurple} !important;
+    color: white !important;
+  }
+  @media (max-width: 850px) {
+    display: none;
+  }
+`;
+
+// export const ProfileName = styled(Typography)`
+//   color: ${(props) =>
+//     props.isMyProfile
+//       ? selectedTheme.colors.primaryYellow
+//       : selectedTheme.colors.primaryPurple};
+//   font-weight: 700;
+//   font-size: 24px;
+//   font-family: ${selectedTheme.fonts.textFont};
+//   margin-bottom: 5px;
+//   @media (max-width: 600px) {
+//     font-size: 18px;
+//   }
+// `;
+
+// export const ProfilePIB = styled(Typography)`
+//   color: ${(props) =>
+//     props.isMyProfile ? "white" : selectedTheme.colors.primaryDarkText};
+//   margin-top: 0.18rem;
+//   font-family: ${selectedTheme.fonts.textFont};
+//   font-size: 16px;
+//   padding-top: 1px;
+//   @media (max-width: 600px) {
+//     font-size: 14px;
+//   }
+// `;
+// export const ProfilePIBContainer = styled(Grid)`
+//   display: flex;
+//   justify-content: center;
+//   align-items: center;
+//   position: relative;
+//   left: 5px;
+// `;
+
+// export const ProfileMainInfo = styled(Grid)`
+//   display: flex;
+//   justify-content: start;
+//   align-items: start;
+// `;
+
+// export const AvatarImageContainer = styled(Grid)`
+//   display: flex;
+//   justify-content: start;
+//   align-items: center;
+// `;
+
+// export const ProfileMainInfoGrid = styled(Grid)`
+//   display: flex;
+//   flex-direction: column;
+//   align-items: start;
+//   margin-left: 16px;
+// `;
+
+// export const ProfileContact = styled(Grid)`
+//   padding-top: 2rem;
+//   padding-bottom: 2rem;
+//   @media (max-width: 600px) {
+//     padding-bottom: 1rem;
+//   }
+// `;
+
+// export const ContactItem = styled(Typography)`
+//   margin-right: 2rem;
+//   margin-left: 0.4rem;
+//   color: ${(props) =>
+//     props.isMyProfile ? "white" : selectedTheme.colors.primaryDarkText};
+//   display: unset;
+//   font-family: ${selectedTheme.fonts.textFont};
+//   letter-spacing: 0.02em;
+//   font-size: 16px;
+//   position: relative;
+//   bottom: 1px;
+//   @media (max-width: 600px) {
+//     font-size: 14px;
+//     bottom: 4px;
+//   }
+// `;
+
+// export const StatsItem = styled(Typography)`
+//   margin-right: 2rem;
+//   display: unset;
+//   margin-left: 1rem;
+//   font-family: ${selectedTheme.fonts.textFont};
+//   font-size: 16px;
+//   margin-bottom: 2px;
+//   @media (max-width: 600px) {
+//     font-size: 12px;
+//   }
+// `;
+
+// export const ProfileStats = styled(Grid)`
+//   display: flex;
+//   justify-content: start;
+//   align-items: center;
+//   background: ${selectedTheme.colors.primaryDarkTextSecond};
+//   width: calc(100% + 2rem);
+//   padding-top: 1.3rem;
+//   padding-bottom: 1.3rem;
+//   margin-bottom: -1rem;
+//   margin-left: -1rem;
+//   border-radius: 0 0 4px 4px;
+// `;
+// export const AvatarImage = styled.img`
+//   min-height: 144px;
+//   min-width: 144px;
+//   width: 144px;
+//   height: 144px;
+//   border-radius: 100%;
+//   @media (max-width: 600px) {
+//     min-height: 90px;
+//     min-width: 90px;
+//     width: 90px;
+//     height: 90px;
+//   }
+// `;
+
+export const ProfileCardHeader = styled(Grid)`
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  margin-bottom: 11px;
+`;
+
+export const HeaderTitle = styled(Typography)`
+  font-size: 16px;
+  font-family: ${selectedTheme.fonts.textFont};
+  color: ${selectedTheme.colors.primaryText};
+  position: relative;
+  @media (max-width: 600px) {
+    font-size: 12px;
+  }
+`;
+// export const PocketIcon = styled(Pocket)`
+//   width: 22px;
+//   height: 22px;
+//   position: relative;
+//   left: -5px;
+//   top: 2px;
+//   & path {
+//     stroke: #b4b4b4;
+//   }
+//   @media (max-width: 600px) {
+//     width: 14px;
+//     height: 14px;
+//   }
+// `;
+// export const MailIcon = styled(Mail)`
+//   height: 24px;
+//   width: 24px;
+//   & path {
+//     stroke: ${(props) =>
+//       props.isMyProfile
+//         ? selectedTheme.colors.iconMineProfileColor
+//         : selectedTheme.colors.iconProfileColor};
+//   }
+//   @media (max-width: 600px) {
+//     width: 14px;
+//     height: 14px;
+//   }
+// `;
+// export const GlobeIcon = styled(Globe)`
+//   height: 22px;
+//   width: 22px;
+//   & path {
+//     stroke: ${(props) =>
+//       props.isMyProfile
+//         ? selectedTheme.colors.iconMineProfileColor
+//         : selectedTheme.colors.iconProfileColor};
+//   }
+//   @media (max-width: 600px) {
+//     width: 14px;
+//     height: 14px;
+//   }
+// `;
+// export const LocationIcon = styled(Location)`
+//   height: 22px;
+//   width: 22px;
+//   & path {
+//     stroke: ${(props) =>
+//       props.isMyProfile
+//         ? selectedTheme.colors.iconMineProfileColor
+//         : selectedTheme.colors.iconProfileColor};
+//   }
+//   @media (max-width: 600px) {
+//     width: 14px;
+//     height: 14px;
+//   }
+// `;
+export const MessageIcon = styled(Mail)`
+  width: 19.5px;
+  height: 19.5px;
+  position: relative;
+  left: 1px;
+  top: 3px;
+  & path {
+    stroke: ${selectedTheme.colors.primaryYellow};
+  }
+  @media (max-width: 600px) {
+    width: 16px;
+    height: 16px;
+    left: -1px;
+    top: 1px;
+  }
+`;
+
+export const ProfileInfoContainer = styled(Grid)`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: start;
+`;

src/components/Cards/ProfileCard/EditProfile/EditProfile.js

@@ -19,7 +19,7 @@ import { ReactComponent as ArrowBack } from "../../../../assets/images/svg/arrow
 import { ReactComponent as CloseIcon } from "../../../../assets/images/svg/close-modal.svg";
 import { useTranslation } from "react-i18next";
 import {
-  editMineProfile,
+  editProfile,
   fetchMineProfile,
 } from "../../../../store/actions/profile/profileActions";
 import { useDispatch, useSelector } from "react-redux";
@@ -56,7 +56,22 @@ const EditProfile = (props) => {
   };
 
   const handleSubmit = (values) => {
-    dispatch(editMineProfile({ ...values, handleApiResponseSuccess }));
+    if (props.isAdmin) {
+      dispatch(
+        editProfile({
+          userId: props.userId,
+          ...values,
+          handleApiResponseSuccess,
+        })
+      );
+    } else {
+      dispatch(
+        editProfile({
+          ...values,
+          handleApiResponseSuccess,
+        })
+      );
+    }
     props.closeModalHandler();
   };
   const initialValues = useMemo(
@@ -166,6 +181,8 @@ EditProfile.propTypes = {
   closeModalHandler: PropTypes.func,
   setImage: PropTypes.func,
   reFetchProfile: PropTypes.func,
+  isAdmin: PropTypes.bool,
+  userId: PropTypes.string,
 };
 
 export default EditProfile;

src/components/Cards/ProfileCard/ProfileContact/ProfileContact.js

@@ -13,6 +13,7 @@ const ProfileContact = (props) => {
   return (
     <ProfileContactContainer
       container
+      isAdmin={props.isAdmin}
       direction={{ xs: "column", sm: "row" }}
       justifyContent={{ xs: "center", sm: "start" }}
       alignItems={{ xs: "start", sm: "center" }}
@@ -47,6 +48,7 @@ ProfileContact.propTypes = {
   profile: PropTypes.object,
   isMyProfile: PropTypes.bool,
   children: PropTypes.node,
+  isAdmin: PropTypes.bool,
 };
 
 export default ProfileContact;

src/components/Cards/ProfileCard/ProfileContact/ProfileContact.styled.js

@@ -6,7 +6,7 @@ import { ReactComponent as Globe } from "../../../../assets/images/svg/globe.svg
 import selectedTheme from "../../../../themes";
 
 export const ProfileContactContainer = styled(Grid)`
-  padding-top: 2rem;
+  padding-top: ${(props) => (props.isAdmin ? `20px` : `2rem`)};
   padding-bottom: 2rem;
   @media (max-width: 600px) {
     padding-bottom: 1rem;

src/components/Cards/ProfileCard/ProfileMainInfo/ProfileMainInfo.js

@@ -25,6 +25,7 @@ const ProfileMainInfo = (props) => {
           src={props.profile?.image}
         /> */}
         <AvatarImage
+          isAdmin={props.isAdmin}
           src={getImageUrl(
             props.profile?.image,
             variants.profileImage,
@@ -33,7 +34,11 @@ const ProfileMainInfo = (props) => {
         />
       </AvatarImageContainer>
       <ProfileMainInfoGrid>
-        <ProfileName isMyProfile={props.isMyProfile} variant="h5">
+        <ProfileName
+          isAdmin={props.isAdmin}
+          isMyProfile={props.isMyProfile}
+          variant="h5"
+        >
           {props.profile?.company?.name}
         </ProfileName>
         <ProfilePIBContainer>
@@ -51,6 +56,7 @@ ProfileMainInfo.propTypes = {
   profile: PropTypes.object,
   isMyProfile: PropTypes.bool,
   children: PropTypes.node,
+  isAdmin: PropTypes.any,
 };
 
 export default ProfileMainInfo;

src/components/Cards/ProfileCard/ProfileMainInfo/ProfileMainInfo.styled.js

@@ -14,10 +14,10 @@ export const AvatarImageContainer = styled(Grid)`
   align-items: center;
 `;
 export const AvatarImage = styled.img`
-  min-height: 144px;
-  min-width: 144px;
-  width: 144px;
-  height: 144px;
+  min-height: ${(props) => (props.isAdmin ? `108px` : `144px`)};
+  min-width: ${(props) => (props.isAdmin ? `108px` : `144px`)};
+  width: ${(props) => (props.isAdmin ? `108px` : `144px`)};
+  height: ${(props) => (props.isAdmin ? `108px` : `144px`)};
   border-radius: 100%;
   @media (max-width: 600px) {
     min-height: 90px;
@@ -41,6 +41,7 @@ export const ProfileName = styled(Typography)`
   font-size: 24px;
   font-family: ${selectedTheme.fonts.textFont};
   margin-bottom: 5px;
+  cursor: ${(props) => props.isAdmin && `pointer`};
   @media (max-width: 600px) {
     font-size: 18px;
   }

src/components/MarketPlace/Header/Header.js

@@ -27,6 +27,7 @@ import {
   SwapsIcon,
   SwapsTitle,
   TooltipInnerContainer,
+  UserIcon,
 } from "./Header.styled";
 import { ReactComponent as GridSquare } from "../../../assets/images/svg/offer-grid-square.svg";
 import { ReactComponent as GridLine } from "../../../assets/images/svg/offer-grid-line.svg";
@@ -51,32 +52,34 @@ const DownArrow = (props) => (
 
 const Header = (props) => {
   const { t } = useTranslation();
-  const sorting = props.sorting;
+  const sorting = props?.sorting;
   const headerString = useSelector(selectHeaderString);
   const { isMobile } = useIsMobile();
   // Changing header string on refresh or on load
 
   const altString = useMemo(() => {
-    if (sorting.selectedSortOption === sortEnum.OLD) {
-      return `: ${t("header.oldOffers")}`;
-    }
-    if (sorting.selectedSortOption === sortEnum.POPULAR) {
-      return `: ${t("header.popularOffers")}`;
+    if (!props?.users) {
+      if (sorting?.selectedSortOption === sortEnum.OLD) {
+        return `: ${t("header.oldOffers")}`;
+      }
+      if (sorting?.selectedSortOption === sortEnum.POPULAR) {
+        return `: ${t("header.popularOffers")}`;
+      }
     }
     return `: ${t("header.newOffers")}`;
-  }, [sorting.selectedSortOption]);
+  }, [sorting?.selectedSortOption]);
 
   const handleChangeSelect = (event) => {
-    sorting.changeSorting(event.target.value);
+    if (!props.users) sorting?.changeSorting(event.target.value);
   };
   const handleClickCategory = () => {
-    props.offers.filters.locations.clear();
-    props.offers.filters.subcategory.clear();
-    props.offers.applyFilters();
+    props?.offers?.filters?.locations.clear();
+    props?.offers?.filters?.subcategory.clear();
+    props?.offers?.applyFilters();
   };
   const handleClickSubcategory = () => {
-    props.offers.filters.locations.clear();
-    props.offers.applyFilters();
+    props?.offers?.filters?.locations.clear();
+    props?.offers?.applyFilters();
   };
   const goBack = () => {
     history.goBack();
@@ -84,13 +87,16 @@ const Header = (props) => {
 
   return (
     <>
-      <SkeletonHeader skeleton={props.skeleton} myOffers={props.myOffers} />
-      <HeaderWrapperContainer skeleton={props.skeleton} isAdmin={props.isAdmin}>
+      <SkeletonHeader skeleton={props?.skeleton} myOffers={props?.myOffers} />
+      <HeaderWrapperContainer
+        skeleton={props?.skeleton}
+        isAdmin={props?.isAdmin}
+      >
         <HeaderContainer>
           {/* Setting appropriate header title if page is market place or my offers */}
           <Tooltip title={headerString.text}>
             <TooltipInnerContainer>
-              {!props.myOffers ? (
+              {!props?.myOffers ? (
                 <>
                   <CategoryHeaderIcon />
                   <HeaderLocation>
@@ -123,8 +129,12 @@ const Header = (props) => {
                 <>
                   {!isMobile ? (
                     <HeaderTitleContainer>
-                      <SwapsHeaderIcon />
-                      <HeaderTitleText>{t("header.myOffers")}</HeaderTitleText>
+                      {props.users ? <UserIcon /> : <SwapsHeaderIcon />}
+                      <HeaderTitleText>
+                        {props.users
+                          ? t("admin.users.headerTitle")
+                          : t("header.myOffers")}
+                      </HeaderTitleText>
                     </HeaderTitleContainer>
                   ) : (
                     <ButtonContainer onClick={goBack}>
@@ -143,11 +153,11 @@ const Header = (props) => {
               {/* Setting display of offer cards to full width */}
               <HeaderButton
                 iconColor={
-                  props.isGrid
+                  props?.isGrid
                     ? selectedTheme.colors.iconStrokeColor
                     : selectedTheme.colors.primaryPurple
                 }
-                onClick={() => props.setIsGrid(false)}
+                onClick={() => props?.setIsGrid(false)}
               >
                 <GridLine />
               </HeaderButton>
@@ -156,11 +166,11 @@ const Header = (props) => {
               {/* Setting display of offer cards to half width (Grid) */}
               <HeaderButton
                 iconColor={
-                  props.isGrid
+                  props?.isGrid
                     ? selectedTheme.colors.primaryPurple
                     : selectedTheme.colors.iconStrokeColor
                 }
-                onClick={() => props.setIsGrid(true)}
+                onClick={() => props?.setIsGrid(true)}
               >
                 <GridSquare />
               </HeaderButton>
@@ -170,13 +180,13 @@ const Header = (props) => {
             {/* Select option to choose sorting */}
             <HeaderSelect
               value={
-                sorting.selectedSortOption?.value
-                  ? sorting.selectedSortOption
+                sorting?.selectedSortOption?.value
+                  ? sorting?.selectedSortOption
                   : "default"
               }
               IconComponent={DownArrow}
               onChange={handleChangeSelect}
-              myOffers={props.myOffers}
+              myOffers={props?.myOffers}
             >
               <SelectOption style={{ display: "none" }} value="default">
                 {t("reviews.sortBy")}
@@ -200,7 +210,7 @@ const Header = (props) => {
           <PageTitleContainer>
             <SwapsIcon />
             <SwapsTitle>
-              {props.myOffers ? t("header.myOffers") : t("offer.offers")}
+              {props?.myOffers ? t("header.myOffers") : t("offer.offers")}
             </SwapsTitle>
           </PageTitleContainer>
         )}
@@ -219,6 +229,7 @@ Header.propTypes = {
   skeleton: PropTypes.bool,
   sorting: PropTypes.any,
   isAdmin: PropTypes.bool,
+  users: PropTypes.bool,
 };
 Header.defaultProps = {
   isGrid: false,

src/components/MarketPlace/Header/Header.styled.js

@@ -6,11 +6,12 @@ import Option from "../../Select/Option/Option";
 import Select from "../../Select/Select";
 import { ReactComponent as Swaps } from "../../../assets/images/svg/swaps.svg";
 import { ReactComponent as CategoryHeader } from "../../../assets/images/svg/category-header.svg";
+import { ReactComponent as User } from "../../../assets/images/svg/user.svg";
 
 export const HeaderWrapperContainer = styled(Box)`
   display: ${(props) => (props.skeleton ? "none" : "block")};
   position: relative;
-  top: ${props => props.isAdmin && `60px`};
+  top: ${(props) => props.isAdmin && `60px`};
 `;
 
 export const HeaderContainer = styled(Box)`
@@ -245,3 +246,11 @@ export const HeaderTitleText = styled(Typography)`
   position: relative;
   bottom: 2px;
 `;
+export const UserIcon = styled(User)`
+  position: relative;
+  top: 3px;
+  margin-right: 5px;
+  & path {
+    stroke: ${selectedTheme.colors.primaryText};
+  }
+`;

src/components/MarketPlace/MarketPlace.js

@@ -18,6 +18,7 @@ const MarketPlace = (props) => {
         offers={props.offers}
         skeleton={props.skeleton}
         isAdmin={props.isAdmin}
+        users={props.users}
       />
       <Offers
         isGrid={isGrid}
@@ -26,6 +27,8 @@ const MarketPlace = (props) => {
         offers={offers}
         toggleFilters={props.toggleFilters}
         isAdmin={props.isAdmin}
+        isUsers={props.users}
+        users={props.allUsers}
       />
     </MarketPlaceContainer>
   );
@@ -38,6 +41,16 @@ MarketPlace.propTypes = {
   offers: PropTypes.any,
   toggleFilters: PropTypes.func,
   isAdmin: PropTypes.bool,
+  users: PropTypes.bool,
+  allUsers: PropTypes.array,
+};
+MarketPlace.defaultProps = {
+  offers: {
+    sorting: {},
+    filters: {
+      numOfFiltersChosen: 0,
+    },
+  },
 };
 
 export default MarketPlace;

src/components/MarketPlace/Offers/HeaderMyOffers.js/HeadersMyOffers.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef } from "react";
+import React, { useCallback, useEffect, useRef } from "react";
 import PropTypes from "prop-types";
 import { EndIcon, SearchIcon, SearchInput } from "./HeadersMyOffers.styled";
 import { useTranslation } from "react-i18next";
@@ -18,6 +18,9 @@ const HeadersMyOffers = (props) => {
     },
     [searchRef.current]
   );
+  useEffect(() => {
+    searchRef.current.value = search.searchString || "";
+  }, []);
   const handleFocusSearch = () => {
     searchRef.current.addEventListener("keyup", listener);
   };
@@ -44,7 +47,11 @@ const HeadersMyOffers = (props) => {
           </EndIcon>
         ),
       }}
-      placeholder={t("header.searchOffers")}
+      placeholder={
+        props.isUsers
+          ? t("admin.users.searchPlaceholder")
+          : t("header.searchOffers")
+      }
       onFocus={handleFocusSearch}
       onBlur={handleBlurSearch}
       ref={searchRef}
@@ -58,6 +65,7 @@ HeadersMyOffers.propTypes = {
   handleSearch: PropTypes.func,
   isAdmin: PropTypes.bool,
   offers: PropTypes.any,
+  isUsers: PropTypes.bool,
 };
 
 export default HeadersMyOffers;

src/components/MarketPlace/Offers/Offers.js

@@ -10,12 +10,13 @@ import { startChat } from "../../../util/helpers/chatHelper";
 import OffersNotFound from "./OffersNotFound";
 import HeadersMyOffers from "./HeaderMyOffers.js/HeadersMyOffers";
 import SkeletonOfferCard from "../../Cards/OfferCard/SkeletonOfferCard/SkeletonOfferCard";
+import BigProfileCard from "../../Cards/ProfileCard/BigProfileCard/BigProfileCard";
 
 const Offers = (props) => {
   const chats = useSelector(selectLatestChats);
   const offersRef = useRef(null);
   const userId = useSelector(selectUserId);
-  const offers = props.offers;
+  const offers = props?.offers;
   // For skeleton screen
   const arrayForMapping = Array.apply(null, Array(4)).map(() => {});
 
@@ -23,49 +24,55 @@ const Offers = (props) => {
     startChat(chats, offer, userId);
   };
   const toggleFilters = () => {
-    props.toggleFilters();
+    props?.toggleFilters();
   };
 
   return (
     <>
-      {!props.skeleton ? (
+      {!props?.skeleton ? (
         <>
           <FilterContainer
-            isAdmin={props.isAdmin}
+            isAdmin={props?.isAdmin}
             onClick={toggleFilters}
-            number={offers.filters.numOfFiltersChosen}
-            myOffers={props.myOffers}
+            number={offers?.filters?.numOfFiltersChosen}
+            myOffers={props?.myOffers}
           >
             <FilterIcon />
           </FilterContainer>
-          {(props.myOffers || props.isAdmin) && (
+          {(props?.myOffers || props?.isAdmin) && (
             <HeadersMyOffers
-              searchMyOffers={offers.search.searchOffers}
-              handleSearch={offers.apply}
-              isAdmin={props.isAdmin}
+              searchMyOffers={offers?.search?.searchOffers}
+              handleSearch={offers?.apply}
+              isAdmin={props?.isAdmin}
               offers={offers}
+              isUsers={props.isUsers}
             />
           )}
-          {offers.allOffersToShow.length === 0 ? (
+          {offers?.allOffersToShow?.length === 0 ? (
             <OffersNotFound />
           ) : (
             <OffersContainer ref={offersRef}>
-              {offers.allOffersToShow.map((item) => {
-                return (
-                  <OfferCard
-                    key={item._id}
-                    offer={item}
-                    halfwidth={props.isGrid}
-                    messageUser={messageOneUser}
-                    isMyOffer={item?.userId === userId || props.isAdmin}
-                  />
-                );
-              })}
+              {props.isUsers
+                ? props.users?.map((item) => (
+                    <BigProfileCard key={item._id} profile={item} />
+                  ))
+                : offers?.allOffersToShow?.map((item) => {
+                    return (
+                      <OfferCard
+                        key={item._id}
+                        offer={item}
+                        halfwidth={props?.isGrid}
+                        messageUser={messageOneUser}
+                        isMyOffer={item?.userId === userId || props?.isAdmin}
+                        isAdmin={props?.isAdmin}
+                      />
+                    );
+                  })}
               <Paging
-                totalElements={offers.totalOffers}
+                totalElements={offers?.totalOffers}
                 elementsPerPage={10}
-                current={parseInt(offers.paging.currentPage)}
-                changePage={offers.paging.changePage}
+                current={parseInt(offers?.paging?.currentPage)}
+                changePage={offers?.paging?.changePage}
               />
             </OffersContainer>
           )}
@@ -89,10 +96,13 @@ Offers.propTypes = {
   offers: PropTypes.any,
   toggleFilters: PropTypes.func,
   isAdmin: PropTypes.bool,
+  isUsers: PropTypes.bool,
+  users: PropTypes.array,
 };
 
 Offers.defaultProps = {
   myOffers: false,
+  users: []
 };
 
 export default Offers;

src/components/Popovers/MyProfile/MyProfile.js

@@ -1,9 +1,5 @@
 import React, { useEffect, useState } from "react";
-import {
-  DollarIcon,
-  GrayButtonsContainer,
-  ProfileImgPIB,
-} from "./MyProfile.styled";
+import { GrayButtonsContainer, ProfileImgPIB } from "./MyProfile.styled";
 import HeaderPopover from "../HeaderPopover/HeaderPopover";
 import { useTranslation } from "react-i18next";
 import { useDispatch, useSelector } from "react-redux";
@@ -14,11 +10,10 @@ import selectedTheme from "../../../themes";
 import { EyeIcon } from "../HeaderPopover/HeaderPopover.styled";
 import { useHistory } from "react-router-dom";
 import PropTypes from "prop-types";
-import { ABOUT_PAGE } from "../../../constants/pages";
 import LogoutButton from "./LogoutButton/LogoutButton";
 import AboutButton from "./AboutButton/AboutButton";
 import PrivacyPolicyButton from "./PrivacyPolicyButton/PrivacyPolicyButton";
-import scrollConstants from "../../../constants/scrollConstants";
+import PricesButton from "./PricesButton/PricesButton";
 
 export const MyProfile = (props) => {
   const { t } = useTranslation();
@@ -53,31 +48,19 @@ export const MyProfile = (props) => {
     history.push(`/profile/${userId}`);
     props.closePopover();
   };
-  const seePrices = () => {
-    history.push({
-      pathname: ABOUT_PAGE,
-      state: {
-        clicked: true,
-        navigation: scrollConstants.about.pricesPage,
-      },
-    });
-    props.closePopover();
-  };
 
   return (
     <HeaderPopover
       title={t("header.myProfile")}
       items={profileAsArray}
+      isProfile
       buttonText={t("header.checkProfile")}
       buttonIcon={<EyeIcon color={selectedTheme.colors.iconYellowColor} />}
-      isProfile
       buttonOnClick={() => seeMyProfile()}
-      secondButtonIcon={<DollarIcon />}
-      secondButtonText={t("header.prices")}
-      secondButtonOnClick={seePrices}
     >
       <GrayButtonsContainer>
         <AboutButton closePopover={props.closePopover} />
+        <PricesButton closePopover={props.closePopover} />
         <PrivacyPolicyButton closePopover={props.closePopover} />
       </GrayButtonsContainer>
       <LogoutButton />

src/components/Popovers/MyProfile/MyProfile.styled.js

@@ -49,6 +49,10 @@ export const GrayButtonsContainer = styled(Box)`
 `;
 export const DollarIcon = styled(Dollar)`
   position: relative;
-  left: -4px;
+  left: -7px;
   margin-left: 10px;
+  & path {
+    stroke: ${selectedTheme.colors.borderNormal};
+    fill: ${selectedTheme.colors.borderNormal};
+  }
 `;

src/components/Popovers/MyProfile/PricesButton/PricesButton.js

@@ -0,0 +1,45 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import { ABOUT_PAGE } from "../../../../constants/pages";
+import { DollarIcon, GrayButton } from "../MyProfile.styled";
+import { PopoverButton } from "../../HeaderPopover/HeaderPopover.styled";
+import { useHistory } from "react-router-dom";
+import scrollConstants from "../../../../constants/scrollConstants";
+
+const PricesButton = (props) => {
+  const { t } = useTranslation();
+  const history = useHistory();
+  const seePrices = () => {
+    history.push({
+      pathname: ABOUT_PAGE,
+      state: {
+        navigation: scrollConstants.about.pricesPage,
+        clicked: true,
+      },
+    });
+    props.closePopover();
+  };
+  return (
+    <GrayButton>
+      <PopoverButton
+        sx={{
+          mr: 2,
+          mb: 2,
+        }}
+        variant="text"
+        endIcon={<DollarIcon />}
+        onClick={seePrices}
+      >
+        {t("header.prices")}
+      </PopoverButton>
+    </GrayButton>
+  );
+};
+
+PricesButton.propTypes = {
+  children: PropTypes.node,
+  closePopover: PropTypes.func,
+};
+
+export default PricesButton;

src/components/Popovers/MyProfile/PricesButton/PricesButton.styled.js

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+import { ReactComponent as Dollar } from "../../../../assets/images/svg/dollar.svg";
+
+export const DollarIcon = styled(Dollar)`
+  position: relative;
+  left: -4px;
+  margin-left: 10px;
+`;

src/constants/adminNavigation.js

@@ -3,9 +3,10 @@ import { ReactComponent as UserIcon } from "../assets/images/svg/user-gray.svg";
 import { ReactComponent as CategoryIcon } from "../assets/images/svg/category.svg";
 import { ReactComponent as LocationIcon } from "../assets/images/svg/location.svg";
 import { ReactComponent as DollarIcon } from "../assets/images/svg/dollar-sign.svg";
+import { ADMIN_USERS_PAGE } from "./pages";
 
 export const ADMIN_NAVIGATION = [
-  { text: "Korisnici", icon: <UserIcon />, route: "/admin/users" },
+  { text: "Korisnici", icon: <UserIcon />, route: `${ADMIN_USERS_PAGE}` },
   { text: "Kategorije", icon: <CategoryIcon />, route: "/admin/categoires" },
   { text: "Lokacije", icon: <LocationIcon />, route: "/admin/locations" },
   { text: "Uplate", icon: <DollarIcon />, route: "/admin/payment" },

src/constants/pages.js

@@ -18,4 +18,5 @@ export const MY_OFFERS_PAGE = "/myoffers";
 export const ABOUT_PAGE = "/about";
 export const PRICES_PAGE = "/prices";
 export const POLICY_PRIVACY_PAGE = "/policy";
-export const ADMIN_HOME_PAGE = "/admin/home";
+export const ADMIN_HOME_PAGE = "/admin";
+export const ADMIN_USERS_PAGE = "/admin/users";

src/i18n/resources/rs.js

@@ -408,7 +408,7 @@ export default {
     offer: "Proizvod:",
   },
   admin: {
-    login:{
+    login: {
       welcome: "React template",
       welcomeText: "Trampa sa kolegama na dohvat ruke",
       emailFormat: "Nevalidan format email adrese!",
@@ -423,6 +423,16 @@ export default {
       passwordRequired: "Lozinka je obavezna!",
       wrongCredentials: "Pogrešan mail ili lozinka!",
       headerTitle: "Ulogujte se",
-    }
-  }
+    },
+    users: {
+      headerTitle: "Profili korisnika",
+      searchPlaceholder: "Pretražite korisnike....",
+      checkProfile: "Pogledaj profil",
+    },
+    navigation: {
+      role: "Administrator",
+      menu: "Meni",
+      logout: "Odjavi se",
+    },
+  },
 };

src/pages/AdminHomePage/AdminHomePage.js

@@ -1,16 +1,44 @@
-import React from "react";
+import React, { useMemo } from "react";
 import PropTypes from "prop-types";
-import MarketPlace from "../../components/MarketPlace/MarketPlace";
-import useOffers from "../../hooks/useOffers/useOffers";
+// import MarketPlace from "../../components/MarketPlace/MarketPlace";
+// import useOffers from "../../hooks/useOffers/useOffers";
 import Sidebar from "../../components/Admin/Sidebar/Sidebar";
 import { MainLayoutAdminHomePage } from "./AdminHomePage.styled";
+import { useSelector } from "react-redux";
+// import { selectIsLoadingByActionType } from "../../store/selectors/loadingSelectors";
+// import { OFFERS_SCOPE } from "../../store/actions/offers/offersActionConstants";
+import AdminUsersPage from "../AdminUsersPage/AdminUsersPage";
+import { selectMineProfile } from "../../store/selectors/profileSelectors";
+import { Route, useHistory } from "react-router-dom";
+import { ADMIN_USERS_PAGE, HOME_PAGE } from "../../constants/pages";
+import { selectUserId } from "../../store/selectors/loginSelectors";
+// import AdminRoute from "../../components/Router/AdminRoute";
 
 const AdminHomePage = () => {
-  const offers = useOffers();
+  const profile = useSelector(selectMineProfile);
+  const userId = useSelector(selectUserId);
+  const history = useHistory();
+  const isUserLogin = useMemo(() => {
+    if (userId?.length === 0) return false;
+    return true;
+  }, [userId]);
+  if (!profile.roles.includes("Admin") || !isUserLogin) {
+    history.push(HOME_PAGE);
+  }
+  // const offers = useOffers();
+  // const isLoadingOffers = useSelector(
+  //   selectIsLoadingByActionType(OFFERS_SCOPE)
+  // );
   return (
     <MainLayoutAdminHomePage
       leftCard={<Sidebar />}
-      content={<MarketPlace offers={offers} isAdmin />}
+      content={
+        // <MarketPlace offers={offers} isAdmin skeleton={isLoadingOffers} />
+        <>
+          <Route path={ADMIN_USERS_PAGE} component={AdminUsersPage} />
+          <Route component={AdminUsersPage} />
+        </>
+      }
     />
   );
 };

src/pages/AdminUsersPage/AdminUsersPage.js

@@ -0,0 +1,29 @@
+import React, { useEffect } from "react";
+import PropTypes from "prop-types";
+import MarketPlace from "../../components/MarketPlace/MarketPlace";
+import { useDispatch, useSelector } from "react-redux";
+import { selectAllProfiles } from "../../store/selectors/profileSelectors";
+import { fetchAllProfiles } from "../../store/actions/profile/profileActions";
+
+const AdminUsersPage = () => {
+  const dispatch = useDispatch();
+  const allUsers = useSelector(selectAllProfiles);
+  useEffect(() => {
+    dispatch(fetchAllProfiles());
+  }, []);
+
+  return (
+    <MarketPlace
+      isAdmin
+      myOffers
+      users
+      allUsers={Array.isArray(allUsers) ? allUsers : []}
+    />
+  );
+};
+
+AdminUsersPage.propTypes = {
+  children: PropTypes.node,
+};
+
+export default AdminUsersPage;

src/request/apiEndpoints.js

@@ -120,6 +120,7 @@ export default {
     invite: "/users/invite",
     getProfile: "users/",
     editProfile: "users",
+    getAllProfiles: "users"
   },
   applications: {
     application: "/applications/{applicationUid}",
@@ -168,7 +169,7 @@ export default {
     locations: "locations",
     mineOffers: "users",
     removeOffer: "offers",
-    editOffer: "offers",
+    pinOffer: "offers/{id}/pin",
   },
   chat: {
     getChat: "chats",

src/request/loginRequest.js

@@ -4,7 +4,8 @@ import apiEndpoints from "./apiEndpoints";
 export const attemptLogin = (payload) =>
   postRequest(apiEndpoints.authentications.login, payload);
 
-
 export const logoutUserRequest = (payload) =>
   postRequest(apiEndpoints.authentications.logout, payload);
 
+export const logoutAdminRequest = (payload) =>
+  postRequest(apiEndpoints.authentications.logout, payload);

src/request/offersRequest.js

@@ -1,4 +1,11 @@
-import { deleteRequest, getRequest, postRequest, putRequest } from ".";
+import {
+  deleteRequest,
+  getRequest,
+  patchRequest,
+  postRequest,
+  putRequest,
+  replaceInUrl,
+} from ".";
 import apiEndpoints from "./apiEndpoints";
 
 export const attemptFetchOffers = (payload) => {
@@ -6,13 +13,14 @@ export const attemptFetchOffers = (payload) => {
   return getRequest(apiEndpoints.offers.getOffers);
 };
 export const attemptFetchFeaturedOffers = (payload) => {
-  if (payload) return getRequest(apiEndpoints.offers.getFeaturedOffers + payload);
+  if (payload)
+    return getRequest(apiEndpoints.offers.getFeaturedOffers + payload);
   return getRequest(apiEndpoints.offers.getOffers);
-}
+};
 export const attemptFetchOneOffer = (payload) => {
-   const url = `${apiEndpoints.offers.getOneOffer}/${payload}`;
-    return getRequest(url);
-}
+  const url = `${apiEndpoints.offers.getOneOffer}/${payload}`;
+  return getRequest(url);
+};
 export const attemptFetchMoreOffers = (page, payload) => {
   if (payload)
     return getRequest(
@@ -32,3 +40,8 @@ export const attemptRemoveOffer = (payload) => {
 export const attemptEditOffer = (payload, editedData) => {
   return putRequest(apiEndpoints.offers.editOffer + "/" + payload, editedData);
 };
+export const attemptPinOffer = (payload) => {
+  return patchRequest(
+    replaceInUrl(apiEndpoints.offers.pinOffer, { id: payload })
+  );
+};

src/request/profileRequest.js

@@ -4,5 +4,8 @@ import apiEndpoints from "./apiEndpoints";
 export const attemptFetchProfile = (payload) =>
   getRequest(apiEndpoints.users.getProfile + payload);
 
+export const attemptFetchAllProfiles = () =>
+  getRequest(apiEndpoints.users.getAllProfiles);
+
 export const attemptEditProfile = (payload, requestData) =>
   putRequest(apiEndpoints.users.editProfile + "/" + payload, requestData);

src/store/actions/login/loginActionConstants.js

@@ -6,26 +6,25 @@ import {
   createSuccessType,
   createSubmitType,
   createUpdateType,
-} from '../actionHelpers';
+} from "../actionHelpers";
 
-
-const LOGIN_USER_SCOPE = 'LOGIN_USER';
+const LOGIN_USER_SCOPE = "LOGIN_USER";
 export const LOGIN_USER_FETCH = createFetchType(LOGIN_USER_SCOPE);
 export const LOGIN_USER_SUCCESS = createSuccessType(LOGIN_USER_SCOPE);
 export const LOGIN_USER_ERROR = createErrorType(LOGIN_USER_SCOPE);
 export const CLEAR_LOGIN_USER_ERROR = createClearType(
-  `${LOGIN_USER_SCOPE}_ERROR`,
+  `${LOGIN_USER_SCOPE}_ERROR`
 );
 export const LOGIN_USER_LOADING = createLoadingType(LOGIN_USER_SCOPE);
 
+export const UPDATE_USER_JWT_TOKEN = createUpdateType("UPDATE_USER_JWT_TOKEN");
+export const RESET_LOGIN_STATE = createClearType("UPDATE_USER_JWT_TOKEN");
+export const AUTHENTICATE_USER = createUpdateType("AUTHENTICATE_USER");
+export const LOGOUT_USER = createUpdateType("LOGOUT_USER");
+export const LOGOUT_ADMIN = createUpdateType("LOGOUT_ADMIN");
+export const REFRESH_TOKEN = createUpdateType("REFRESH_TOKEN");
 
-export const UPDATE_USER_JWT_TOKEN = createUpdateType('UPDATE_USER_JWT_TOKEN');
-export const RESET_LOGIN_STATE = createClearType('UPDATE_USER_JWT_TOKEN');
-export const AUTHENTICATE_USER = createUpdateType('AUTHENTICATE_USER');
-export const LOGOUT_USER = createUpdateType('LOGOUT_USER');
-export const REFRESH_TOKEN = createUpdateType('REFRESH_TOKEN');
-
-const GENERATE_TOKEN_SCOPE = 'GENERATE_TOKEN';
+const GENERATE_TOKEN_SCOPE = "GENERATE_TOKEN";
 export const GENERATE_TOKEN = createSubmitType(GENERATE_TOKEN_SCOPE);
 export const GENERATE_TOKEN_SUCCESS = createSuccessType(GENERATE_TOKEN_SCOPE);
 export const GENERATE_TOKEN_ERROR = createErrorType(GENERATE_TOKEN_SCOPE);

src/store/actions/login/loginActions.js

@@ -11,8 +11,8 @@ import {
   GENERATE_TOKEN,
   GENERATE_TOKEN_SUCCESS,
   GENERATE_TOKEN_ERROR,
-} from './loginActionConstants';
-
+  LOGOUT_ADMIN,
+} from "./loginActionConstants";
 
 export const fetchLogin = (payload) => ({
   type: LOGIN_USER_FETCH,
@@ -51,9 +51,14 @@ export const logoutUser = (payload) => ({
   payload,
 });
 
+export const logoutAdmin = (payload) => ({
+  type: LOGOUT_ADMIN,
+  payload,
+});
+
 export const refreshUserToken = (payload) => ({
   type: REFRESH_TOKEN,
-  payload
+  payload,
 });
 
 export const generateToken = (payload) => ({

src/store/actions/offers/offersActionConstants.js

@@ -72,6 +72,11 @@ export const OFFER_ADD = createFetchType(OFFER_ADD_SCOPE);
 export const OFFER_ADD_SUCCESS = createSuccessType(OFFER_ADD_SCOPE);
 export const OFFER_ADD_ERROR = createErrorType(OFFER_ADD_SCOPE);
 
+export const OFFER_PIN_SCOPE = "OFFER_PIN_SCOPE";
+export const OFFER_PIN = createFetchType(OFFER_PIN_SCOPE);
+export const OFFER_PIN_SUCCESS = createSuccessType(OFFER_PIN_SCOPE);
+export const OFFER_PIN_ERROR = createErrorType(OFFER_PIN_SCOPE);
+
 export const OFFER_REMOVE_SCOPE = "OFFER_REMOVE_SCOPE";
 export const OFFER_REMOVE = createFetchType(OFFER_REMOVE_SCOPE);
 export const OFFER_REMOVE_SUCCESS = createSuccessType(OFFER_REMOVE_SCOPE);

src/store/actions/offers/offersActions.js

@@ -37,6 +37,9 @@ import {
   OFFER_EDIT_SUCCESS,
   OFFER_FEATURED_PAGE_SET,
   OFFER_PAGE_SET,
+  OFFER_PIN,
+  OFFER_PIN_ERROR,
+  OFFER_PIN_SUCCESS,
   OFFER_REMOVE,
   OFFER_REMOVE_ERROR,
   OFFER_REMOVE_SUCCESS,
@@ -191,6 +194,18 @@ export const editOfferError = () => ({
   type: OFFER_EDIT_ERROR,
 });
 
+// Pin/unpin offer
+export const pinOffer = (payload) => ({
+  type: OFFER_PIN,
+  payload,
+});
+export const pinOfferSuccess = () => ({
+  type: OFFER_PIN_SUCCESS,
+});
+export const pinOfferError = () => ({
+  type: OFFER_PIN_ERROR,
+});
+
 export const setOffers = (payload) => ({
   type: OFFERS_SET,
   payload,

src/store/actions/profile/profileActionConstants.js

@@ -11,6 +11,11 @@ export const PROFILE_FETCH = createFetchType(PROFILE_SCOPE);
 export const PROFILE_SUCCESS = createSuccessType(PROFILE_SCOPE);
 export const PROFILE_ERROR = createErrorType(PROFILE_SCOPE);
 
+export const PROFILE_ALL_SCOPE = "PROFILE_ALL_SCOPE";
+export const PROFILE_ALL_FETCH = createFetchType(PROFILE_ALL_SCOPE);
+export const PROFILE_ALL_SUCCESS = createSuccessType(PROFILE_ALL_SCOPE);
+export const PROFILE_ALL_ERROR = createErrorType(PROFILE_ALL_SCOPE);
+
 export const PROFILE_MINE_SCOPE = "PROFILE_MINE_SCOPE";
 export const PROFILE_MINE_FETCH = createFetchType(PROFILE_MINE_SCOPE);
 export const PROFILE_MINE_FETCH_SUCCESS = createSuccessType(PROFILE_MINE_SCOPE);
@@ -18,6 +23,7 @@ export const PROFILE_MINE_FETCH_ERROR = createErrorType(PROFILE_MINE_SCOPE);
 
 export const PROFILE_SET = createSetType("PROFILE_SET");
 export const PROFILE_MINE_SET = createSetType("PROFILE_MINE_SET");
+export const PROFILE_ALL_SET = createSetType("PROFILE_ALL_SET");
 
 const PROFILE_EDIT_SCOPE = "PROFILE_EDIT_SCOPE";
 export const PROFILE_EDIT = createFetchType(PROFILE_EDIT_SCOPE);

src/store/actions/profile/profileActions.js

@@ -11,6 +11,10 @@ import {
   PROFILE_EDIT_SUCCESS,
   PROFILE_MINE_FETCH_ERROR,
   PROFILE_EDIT_ERROR,
+  PROFILE_ALL_FETCH,
+  PROFILE_ALL_SUCCESS,
+  PROFILE_ALL_ERROR,
+  PROFILE_ALL_SET,
 } from "./profileActionConstants";
 
 export const fetchProfile = (payload) => ({
@@ -26,6 +30,19 @@ export const fetchErrorProfile = (payload) => ({
   payload,
 });
 
+export const fetchAllProfiles = (payload) => ({
+  type: PROFILE_ALL_FETCH,
+  payload,
+});
+export const fetchAllProfilesSuccess = (payload) => ({
+  type: PROFILE_ALL_SUCCESS,
+  payload,
+});
+export const fetchAllProfilesError = (payload) => ({
+  type: PROFILE_ALL_ERROR,
+  payload,
+});
+
 export const fetchMineProfile = () => ({
   type: PROFILE_MINE_FETCH,
 });
@@ -36,14 +53,14 @@ export const fetcHMineProfileError = () => ({
   type: PROFILE_MINE_FETCH_ERROR,
 });
 
-export const editMineProfile = (payload) => ({
+export const editProfile = (payload) => ({
   type: PROFILE_EDIT,
   payload,
 });
-export const editMineProfileSuccess = () => ({
+export const editProfileSuccess = () => ({
   type: PROFILE_EDIT_SUCCESS,
 });
-export const editMineProfileError = () => ({
+export const editProfileError = () => ({
   type: PROFILE_EDIT_ERROR,
 });
 
@@ -54,6 +71,10 @@ export const setProfile = (payload) => ({
   type: PROFILE_SET,
   payload,
 });
+export const setAllProfiles = (payload) => ({
+  type: PROFILE_ALL_SET,
+  payload,
+});
 export const setMineProfile = (payload) => ({
   type: PROFILE_MINE_SET,
   payload,

src/store/reducers/profile/profileReducer.js

@@ -1,14 +1,21 @@
-import { PROFILE_CLEAR, PROFILE_MINE_SET, PROFILE_SET } from "../../actions/profile/profileActionConstants";
+import {
+  PROFILE_ALL_SET,
+  PROFILE_CLEAR,
+  PROFILE_MINE_SET,
+  PROFILE_SET,
+} from "../../actions/profile/profileActionConstants";
 import createReducer from "../../utils/createReducer";
 
 const initialState = {
   profile: {},
   mineProfile: {},
+  allProfiles: {},
 };
 
 export default createReducer(
   {
     [PROFILE_SET]: setProfile,
+    [PROFILE_ALL_SET]: setAllProfiles,
     [PROFILE_MINE_SET]: setMineProfile,
     [PROFILE_CLEAR]: clearProfile,
   },
@@ -24,9 +31,15 @@ function setProfile(state, action) {
 function setMineProfile(state, action) {
   return {
     ...state,
-    mineProfile: action.payload
-  }
+    mineProfile: action.payload,
+  };
 }
 function clearProfile() {
   return initialState;
 }
+function setAllProfiles(state, { payload }) {
+  return {
+    ...state,
+    allProfiles: payload,
+  };
+}

src/store/saga/loginSaga.js

@@ -4,17 +4,22 @@ import history from "../utils/history";
 import {
   AUTHENTICATE_USER,
   LOGIN_USER_FETCH,
+  LOGOUT_ADMIN,
   LOGOUT_USER,
   REFRESH_TOKEN,
 } from "../actions/login/loginActionConstants";
-import { attemptLogin, logoutUserRequest } from "../../request/loginRequest";
+import {
+  attemptLogin,
+  logoutAdminRequest,
+  logoutUserRequest,
+} from "../../request/loginRequest";
 import {
   fetchUserError,
   fetchUserSuccess,
   resetLoginState,
   setUserJwtToken,
 } from "../actions/login/loginActions";
-import { LOGIN_PAGE } from "../../constants/pages";
+import { ADMIN_LOGIN_PAGE, LOGIN_PAGE } from "../../constants/pages";
 import { addHeaderToken, removeHeaderToken } from "../../request";
 import {
   JWT_REFRESH_TOKEN,
@@ -137,6 +142,27 @@ function* logout(payload) {
     yield put(clearChat());
   }
 }
+function* logoutAdmin(payload) {
+  try {
+    const JwtToken = yield call(authScopeStringGetHelper, JWT_TOKEN);
+    const user = yield call(jwt.decode, JwtToken);
+    if (user) {
+      const requestBody = { token: JwtToken };
+      yield call(logoutAdminRequest, requestBody);
+      yield call(payload.payload);
+    }
+  } catch (error) {
+    console.dir(error); // eslint-disable-line
+  } finally {
+    yield call(authScopeClearHelper);
+    yield call(removeHeaderToken);
+    yield put(resetLoginState());
+    yield call(history.replace, ADMIN_LOGIN_PAGE);
+    yield put(clearProfile());
+    yield put(clearOffers());
+    yield put(clearChat());
+  }
+}
 function* refreshUserToken({ payload }) {
   try {
     const newTokenDecoded = jwt.decode(payload);
@@ -157,5 +183,6 @@ export default function* loginSaga() {
     takeLatest(AUTHENTICATE_USER, authenticateUser),
     takeLatest(LOGOUT_USER, logout),
     takeLatest(REFRESH_TOKEN, refreshUserToken),
+    takeLatest(LOGOUT_ADMIN, logoutAdmin),
   ]);
 }

src/store/saga/offersSaga.js

@@ -4,6 +4,7 @@ import {
   attemptFetchFeaturedOffers,
   attemptFetchOffers,
   attemptFetchOneOffer,
+  attemptPinOffer,
   attemptRemoveOffer,
 } from "../../request/offersRequest";
 import {
@@ -14,6 +15,7 @@ import {
   OFFERS_PROFILE_FETCH,
   OFFER_ADD,
   OFFER_EDIT,
+  OFFER_PIN,
   OFFER_REMOVE,
   ONE_OFFER_FETCH,
 } from "../actions/offers/offersActionConstants";
@@ -40,6 +42,8 @@ import {
   setMineHeaderOffers,
   fetchMineHeaderOffersSuccess,
   fetchMineHeaderOffersError,
+  pinOfferSuccess,
+  pinOfferError,
   // fetchAllOffersSuccess,
   // fetchAllOffersError,
   // setFeaturedOfferPage,
@@ -244,6 +248,19 @@ function* removeOffer(payload) {
     console.dir(e);
   }
 }
+function* pinOffer(payload) {
+  try {
+    const offerId = payload.payload.offerId;
+    yield call(attemptPinOffer, offerId);
+    yield put(pinOfferSuccess());
+    if (payload.payload.handleApiResponseSuccess) {
+      yield call(payload.payload.handleApiResponseSuccess);
+    }
+  } catch (e) {
+    yield put(pinOfferError());
+    console.dir(e);
+  }
+}
 
 function* editOffer(payload) {
   try {
@@ -296,6 +313,7 @@ export default function* offersSaga() {
     takeLatest(OFFER_EDIT, editOffer),
     takeLatest(OFFERS_MINE_HEADER_FETCH, fetchMineHeaderOffers),
     takeLatest(OFFERS_FEATURED_FETCH, fetchFeaturedOffers),
+    takeLatest(OFFER_PIN, pinOffer)
     // takeLatest(OFFERS_ALL_FETCH, fetchAllOffers),
   ]);
 }

src/store/saga/profileSaga.js

@@ -1,21 +1,26 @@
 import { all, call, put, takeLatest, select } from "@redux-saga/core/effects";
 import {
   attemptEditProfile,
+  attemptFetchAllProfiles,
   attemptFetchProfile,
 } from "../../request/profileRequest";
 import {
   PROFILE_FETCH,
   PROFILE_MINE_FETCH,
   PROFILE_EDIT,
+  PROFILE_ALL_FETCH,
 } from "../actions/profile/profileActionConstants";
 import {
-  editMineProfileError,
-  editMineProfileSuccess,
+  editProfileError,
+  editProfileSuccess,
+  fetchAllProfilesError,
+  fetchAllProfilesSuccess,
   fetchErrorProfile,
   fetcHMineProfileError,
   fetchMineProfileSuccess,
   fetchProfileSuccess,
-  //   editMineProfile,
+  setAllProfiles,
+  //   editProfile,
   setMineProfile,
   setProfile,
 } from "../actions/profile/profileActions";
@@ -43,6 +48,16 @@ function* fetchMineProfile() {
     console.dir(e);
   }
 }
+function* fetchAllProfiles() {
+  try {
+    const data = yield call(attemptFetchAllProfiles);
+    if (data) yield put(setAllProfiles(data.data));
+    yield put(fetchAllProfilesSuccess());
+  } catch (e) {
+    yield put(fetchAllProfilesError());
+    console.dir(e);
+  }
+}
 
 function* changeMineProfile(payload) {
   try {
@@ -93,14 +108,19 @@ function* changeMineProfile(payload) {
     if (payload.payload.firmWebsite.toString().length !== 0)
       requestBody.append("company[contacts][web]", payload.payload.firmWebsite);
 
-    const userId = yield select(selectUserId);
+    let userId;
+    if (payload.payload?.userId) {
+      userId = payload.payload.userId;
+    } else {
+      userId = yield select(selectUserId);
+    }
     yield call(attemptEditProfile, userId, requestBody);
-    yield put(editMineProfileSuccess());
+    yield put(editProfileSuccess());
     if (payload.payload.handleApiResponseSuccess) {
       yield call(payload.payload.handleApiResponseSuccess);
     }
   } catch (e) {
-    yield put(editMineProfileError());
+    yield put(editProfileError());
     console.dir(e);
   }
 }
@@ -110,5 +130,6 @@ export default function* profileSaga() {
     takeLatest(PROFILE_FETCH, fetchProfile),
     takeLatest(PROFILE_MINE_FETCH, fetchMineProfile),
     takeLatest(PROFILE_EDIT, changeMineProfile),
+    takeLatest(PROFILE_ALL_FETCH, fetchAllProfiles),
   ]);
 }

src/store/selectors/profileSelectors.js

@@ -18,3 +18,7 @@ export const selectMineProfilePicture = createSelector(
   profileSelector,
   (state) => state?.mineProfile?.image
 );
+export const selectAllProfiles = createSelector(
+  profileSelector,
+  (state) => state.allProfiles
+);

src/util/helpers/routeHelpers.js

@@ -1,6 +1,7 @@
 import {
   ADMIN_HOME_PAGE,
   ADMIN_LOGIN_PAGE,
+  ADMIN_USERS_PAGE,
   FORGOT_PASSWORD_MAIL_SENT,
   FORGOT_PASSWORD_PAGE,
   LOGIN_PAGE,
@@ -42,7 +43,11 @@ export const isAuthRoute = () => {
   return false;
 };
 export const isAdminRoute = () => {
-  if (routeMatches(ADMIN_LOGIN_PAGE) || routeMatches(ADMIN_HOME_PAGE))
+  if (
+    routeMatches(ADMIN_LOGIN_PAGE) ||
+    routeMatches(ADMIN_HOME_PAGE) ||
+    routeMatches(ADMIN_USERS_PAGE)
+  )
     return true;
   return false;
 };