[EN-7797] ProfileCard

src/components/backoffice/dashboard/DashboardNetworkDiscoverCard/DashboardNetworkDiscoverCard.tsx

@@ -25,7 +25,7 @@ const cardVariables: {
     content:
       "N'hésitez pas à prendre contact avec eux pour les accompagner dans votre recherche",
     button: 'Découvrez les coachs',
-    buttonHref: '/backoffice/annuaire?role=coach',
+    buttonHref: '/backoffice/annuaire?role=Coach',
   },
   [USER_ROLES.COACH]: {
     title: 'Découvrez les candidats que vous pourriez accompagner',

src/components/backoffice/dashboard/DashboardRecommendationsCard/DashboardRecommendationsCard.styles.ts

@@ -1,7 +1,5 @@
 import styled from 'styled-components';
 
 export const StyledDashboardRecommendationsList = styled.div`
-  ul {
-    gap: 26px;
-  }
+  width: 100%;
 `;

src/components/backoffice/dashboard/DashboardRecommendationsCard/DashboardRecommendationsCard.tsx

@@ -72,6 +72,7 @@ export const DashboardRecommendationsCard = () => {
           ambitions={profile.searchAmbitions}
           job={profile.currentJob}
           isAvailable={profile.isAvailable}
+          displayHelps={false}
         />
       );
     });
@@ -93,7 +94,11 @@ export const DashboardRecommendationsCard = () => {
     >
       <StyledDashboardCardContentContainer>
         <StyledDashboardRecommendationsList>
-          <CardList list={recommendationsList} isLoading={isLoading} />
+          <CardList
+            list={recommendationsList}
+            isLoading={isLoading}
+            condensed
+          />
         </StyledDashboardRecommendationsList>
         <Button
           style="custom-secondary-inverted"

src/components/backoffice/directory/DirectoryContainer/DirectoryContainer.styles.ts → src/components/backoffice/directory/Directory/Directory.styles.ts

@@ -1,8 +1,15 @@
 import styled from 'styled-components';
 
+export const StyledHeaderDirectory = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 35px;
+`;
+
 export const StyledDirectoryContainer = styled.div`
   display: flex;
   flex-direction: column;
+  gap: 50px;
 `;
 
 export const StyledDirectoryButtonContainer = styled.div`

src/components/backoffice/directory/Directory/Directory.tsx

@@ -0,0 +1,134 @@
+import { useRouter } from 'next/router';
+import React, { useMemo } from 'react';
+import { DirectoryList } from '../DirectoryList';
+import { useDirectoryQueryParams } from '../useDirectoryQueryParams';
+import { SearchBar } from 'src/components/filters/SearchBar/SearchBar';
+import { HeaderBackoffice } from 'src/components/headers/HeaderBackoffice';
+import { StyledBackgroundedHeaderBackoffice } from 'src/components/headers/HeaderBackoffice/HeaderBackoffice.styles';
+import { Button, Section } from 'src/components/utils';
+import { BUSINESS_LINES, DirectoryFilters } from 'src/constants';
+import { DEPARTMENTS_FILTERS } from 'src/constants/departements';
+import { ProfileHelps } from 'src/constants/helps';
+import { GA_TAGS } from 'src/constants/tags';
+import { USER_ROLES } from 'src/constants/users';
+import { useFilters } from 'src/hooks';
+import { useIsMobile } from 'src/hooks/utils';
+import {
+  findConstantFromValue,
+  isRoleIncluded,
+  mutateToArray,
+} from 'src/utils';
+import {
+  StyledDirectoryButtonContainer,
+  StyledDirectoryContainer,
+  StyledHeaderDirectory,
+} from './Directory.styles';
+
+const route = '/backoffice/annuaire';
+
+export function Directory() {
+  const { push } = useRouter();
+  const isMobile = useIsMobile();
+
+  const directoryFiltersParams = useDirectoryQueryParams();
+  const { role, departments, helps, businessLines, search } =
+    directoryFiltersParams;
+
+  const { setFilters, setSearch, resetFilters } = useFilters(
+    DirectoryFilters,
+    `/backoffice/annuaire`,
+    [],
+    GA_TAGS.PAGE_ANNUAIRE_SUPPRIMER_FILTRES_CLIC
+  );
+
+  const filters = useMemo(() => {
+    return {
+      departments: mutateToArray(departments).map((department) =>
+        findConstantFromValue(department, DEPARTMENTS_FILTERS)
+      ),
+      helps: mutateToArray(helps).map((help) =>
+        findConstantFromValue(help, ProfileHelps)
+      ),
+      businessLines: mutateToArray(businessLines).map((businessLine) =>
+        findConstantFromValue(businessLine, BUSINESS_LINES)
+      ),
+    };
+  }, [departments, helps, businessLines]);
+
+  return (
+    <>
+      <StyledBackgroundedHeaderBackoffice>
+        <Section className="custom-page">
+          <StyledHeaderDirectory>
+            <HeaderBackoffice
+              title="Bienvenue sur votre réseau"
+              description={
+                "Découvrez les membres de la communauté et développez votre carnet d'adresse."
+              }
+              noSeparator
+            />
+            <SearchBar
+              light
+              filtersConstants={DirectoryFilters}
+              filters={filters}
+              resetFilters={() => {
+                resetFilters();
+              }}
+              search={search}
+              setSearch={setSearch}
+              setFilters={setFilters}
+              placeholder="Rechercher..."
+              additionalButtons={
+                <StyledDirectoryButtonContainer isMobile={isMobile}>
+                  <Button
+                    size={isMobile ? 'small' : 'large'}
+                    style={`custom-secondary${
+                      isRoleIncluded([USER_ROLES.CANDIDATE], role)
+                        ? '-inverted'
+                        : ''
+                    }`}
+                    onClick={() => {
+                      push({
+                        pathname: route,
+                        query: {
+                          ...directoryFiltersParams,
+                          role: [USER_ROLES.CANDIDATE],
+                        },
+                      });
+                    }}
+                  >
+                    Les candidats
+                  </Button>
+                  <Button
+                    size={isMobile ? 'small' : 'large'}
+                    style={`custom-secondary${
+                      isRoleIncluded([USER_ROLES.COACH], role)
+                        ? '-inverted'
+                        : ''
+                    }`}
+                    onClick={() => {
+                      push({
+                        pathname: route,
+                        query: {
+                          ...directoryFiltersParams,
+                          role: USER_ROLES.COACH,
+                        },
+                      });
+                    }}
+                  >
+                    Les coachs
+                  </Button>
+                </StyledDirectoryButtonContainer>
+              }
+            />
+          </StyledHeaderDirectory>
+        </Section>
+      </StyledBackgroundedHeaderBackoffice>
+      <Section className="custom-page">
+        <StyledDirectoryContainer>
+          <DirectoryList />
+        </StyledDirectoryContainer>
+      </Section>
+    </>
+  );
+}

src/components/backoffice/directory/Directory/index.ts

@@ -0,0 +1 @@
+export * from './Directory';

src/components/backoffice/directory/DirectoryItem/DirectoryItem.tsx

@@ -25,6 +25,7 @@ interface DirectoryItemProps {
   department: Department;
   job?: string;
   isAvailable: boolean;
+  displayHelps: boolean;
 }
 
 export function DirectoryItem({
@@ -38,6 +39,7 @@ export function DirectoryItem({
   ambitions,
   job,
   isAvailable,
+  displayHelps,
 }: DirectoryItemProps) {
   return (
     <CardListItem dataTestId={id}>
@@ -52,6 +54,7 @@ export function DirectoryItem({
         ambitions={ambitions}
         job={job}
         isAvailable={isAvailable}
+        displayHelps={displayHelps}
       />
     </CardListItem>
   );

src/components/backoffice/directory/DirectoryList/DirectoryList.tsx

@@ -33,6 +33,7 @@ export function DirectoryList() {
           ambitions={profile.searchAmbitions}
           job={profile.currentJob}
           isAvailable={profile.isAvailable}
+          displayHelps
         />
       );
     });

src/components/backoffice/referer/dashboard/DashboardReferedCandidateList/DashboardReferedCandidateList.styles.ts

@@ -1,7 +1,5 @@
 import styled from 'styled-components';
 
 export const StyledDashboardReferedCandidateList = styled.div`
-  ul {
-    gap: 26px;
-  }
+  width: 100%;
 `;

src/components/backoffice/referer/dashboard/DashboardReferedCandidateList/DashboardReferedCandidateList.tsx

@@ -61,6 +61,7 @@ export const DashboardReferedCandidateList = () => {
           ambitions={profile.searchAmbitions}
           job={profile.currentJob}
           isAvailable={profile.isAvailable}
+          displayHelps={false}
         />
       );
     });
@@ -70,7 +71,7 @@ export const DashboardReferedCandidateList = () => {
     <Card title="Les candidats que vous avez orientés" centerTitle>
       <StyledDashboardCardContentContainer>
         <StyledDashboardReferedCandidateList>
-          <CardList list={referedList} isLoading={loading} />
+          <CardList list={referedList} isLoading={loading} condensed />
         </StyledDashboardReferedCandidateList>
       </StyledDashboardCardContentContainer>
     </Card>

src/components/headers/HeaderBackoffice/HeaderBackoffice.styles.ts

@@ -25,3 +25,7 @@ export const StyledHeaderBackOffice = styled.div`
     margin: 30px 0;
   }
 `;
+
+export const StyledBackgroundedHeaderBackoffice = styled.div`
+  background-color: ${COLORS.lightGray};
+`;

src/components/headers/HeaderBackoffice/HeaderBackoffice.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { StyledHeaderBackOffice } from 'src/components/headers/HeaderBackoffice/HeaderBackoffice.styles';
 import { Grid } from 'src/components/utils';
+import { H1 } from 'src/components/utils/Headings';
 import { Tag } from 'src/components/utils/Tag';
 import { usePendingMembers } from './usePendingMembers';
 
@@ -30,7 +31,7 @@ export const HeaderBackoffice = ({
         eachWidths={['expand@m', 'auto@m']}
       >
         <div>
-          <h2 className="uk-text-bold">{title}</h2>
+          <H1 title={title} />
           <p className="uk-text-lead">{description}</p>
         </div>
         <div>{children}</div>