From f844596d7b29d56443ed3f8ddb6efd2280d32f23 Mon Sep 17 00:00:00 2001
From: Mihoub <debache.mihoub@gmail.com>
Date: Fri, 14 Jun 2024 15:04:10 +0200
Subject: [PATCH] fix(improvements): full rework of message preview, add
 sideMenu

---
 src/api/send-mail/index.tsx                   |   4 +-
 src/components/edit-modal/index.tsx           |   6 +-
 src/components/highlighted-message/index.tsx  |  11 +-
 .../link-publications/message-preview.tsx     |   2 +-
 .../contribution-page/contribution-card.tsx   | 122 -------
 .../contribution-page/contribution-item.tsx   |  85 +++++
 .../contribution-page/contributor-summary.tsx |  58 ++++
 src/pages/contribution-page/index.tsx         |  90 ++---
 .../contribution-page/message-preview.tsx     | 323 ++++++++++--------
 src/pages/contribution-page/styles.scss       |  21 +-
 src/types/index.ts                            |  47 ++-
 11 files changed, 414 insertions(+), 355 deletions(-)
 delete mode 100644 src/pages/contribution-page/contribution-card.tsx
 create mode 100644 src/pages/contribution-page/contribution-item.tsx
 create mode 100644 src/pages/contribution-page/contributor-summary.tsx

diff --git a/src/api/send-mail/index.tsx b/src/api/send-mail/index.tsx
index 5e9f0f4..8050b44 100644
--- a/src/api/send-mail/index.tsx
+++ b/src/api/send-mail/index.tsx
@@ -24,7 +24,7 @@ function EmailSender({
     ? "https://api.brevo.com/v3/smtp/email"
     : "/email/";
   const scanRUrl = isDevelopment
-    ? `https://scanr-api.dataesr.ovh/${basePath}/${contribution._id}`
+    ? `https://scanr-api.dataesr.ovh/${basePath}/${contribution?._id}`
     : `/api/${basePath}/${contribution._id}`;
   const [selectedProfile, setSelectedProfile] = useState("");
 
@@ -107,7 +107,7 @@ function EmailSender({
             onClick={sendEmail}
             size="sm"
           >
-            {contribution.mailSent ? "Renvoyer un mail" : "Répondre"}
+            {contribution?.mailSent ? "Renvoyer un mail" : "Répondre"}
           </Button>
         </Col>
       </Row>
diff --git a/src/components/edit-modal/index.tsx b/src/components/edit-modal/index.tsx
index 8ff5962..a14106b 100644
--- a/src/components/edit-modal/index.tsx
+++ b/src/components/edit-modal/index.tsx
@@ -40,8 +40,8 @@ const EditModal: React.FC<EditModalProps> = ({
   }
   const isDevelopment = import.meta.env.VITE_HEADER_TAG === "Development";
   const url = isDevelopment
-    ? `https://scanr-api.dataesr.ovh/${basePath}/${data._id}`
-    : `${window.location.origin}/api/${basePath}/${data._id}`;
+    ? `https://scanr-api.dataesr.ovh/${basePath}/${data?._id}`
+    : `${window.location.origin}/api/${basePath}/${data?._id}`;
   const [inputs, setInputs] = useState<Inputs>({
     team: [user],
     status: "treated",
@@ -199,7 +199,7 @@ const EditModal: React.FC<EditModalProps> = ({
           <Col>
             <TextArea
               label={
-                data.comment
+                data?.comment
                   ? "Mettre à jour le commentaire pour l'équipe"
                   : "Ajouter un commentaire pour l'équipe"
               }
diff --git a/src/components/highlighted-message/index.tsx b/src/components/highlighted-message/index.tsx
index 09f520d..c44c855 100644
--- a/src/components/highlighted-message/index.tsx
+++ b/src/components/highlighted-message/index.tsx
@@ -10,12 +10,15 @@ const HighlightedMessage = ({
 
     const lowerCaseMessage = message?.toLowerCase();
     const lowerCaseQuery = highlightedQuery?.toLowerCase();
-    const index = lowerCaseMessage.indexOf(lowerCaseQuery);
+    const index = lowerCaseMessage?.indexOf(lowerCaseQuery);
     if (index === -1) return message;
 
-    const prefix = message.substring(0, index);
-    const highlight = message.substring(index, index + highlightedQuery.length);
-    const suffix = message.substring(index + highlightedQuery.length);
+    const prefix = message?.substring(0, index);
+    const highlight = message?.substring(
+      index,
+      index + highlightedQuery.length
+    );
+    const suffix = message?.substring(index + highlightedQuery.length);
 
     return (
       <>
diff --git a/src/pages/api-operation-page/link-publications/message-preview.tsx b/src/pages/api-operation-page/link-publications/message-preview.tsx
index 15270cd..e0ed181 100644
--- a/src/pages/api-operation-page/link-publications/message-preview.tsx
+++ b/src/pages/api-operation-page/link-publications/message-preview.tsx
@@ -98,7 +98,7 @@ const MessagePreview = ({
         data={data}
       />
       <Row className="contributorProductionSideInfo">
-        {data.id && (
+        {data?.id && (
           <Text
             size="sm"
             style={{ cursor: "pointer" }}
diff --git a/src/pages/contribution-page/contribution-card.tsx b/src/pages/contribution-page/contribution-card.tsx
deleted file mode 100644
index 3ef5fbe..0000000
--- a/src/pages/contribution-page/contribution-card.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import {
-  Accordion,
-  AccordionGroup,
-  Badge,
-  Col,
-  Container,
-  Notice,
-  Row,
-  Text,
-} from "@dataesr/dsfr-plus";
-import "./styles.scss";
-import ContributorInfo from "./contributor-info";
-import StaffActions from "./staff-action";
-import { Contribution } from "../../types";
-import HighlightedMessage from "../../components/highlighted-message";
-import { BadgeColor } from "./utils";
-
-const ContributionItem = ({
-  data,
-  highlightedQuery,
-  refetch,
-}: {
-  data: Contribution;
-  highlightedQuery: string;
-  refetch: any;
-}) => {
-  const renderAccordion = () => (
-    <Container fluid className="accordion">
-      <Row className="top-accordion">
-        <Col>
-          {data?.tags?.length > 0 && (
-            <Badge
-              size="sm"
-              color="purple-glycine"
-              className="fr-mr-1w fr-mb-1w tag"
-            >
-              {data?.tags.join(", ")}
-            </Badge>
-          )}
-          <Badge
-            size="sm"
-            color="purple-glycine"
-            className="fr-mr-1w fr-mb-1w status"
-          >
-            {data.status}
-          </Badge>
-          {data.responseFrom && (
-            <Badge
-              size="sm"
-              color="blue-ecume"
-              className="fr-mr-1w fr-mb-1w status"
-            >
-              {`Réponse envoyé par ${data.responseFrom}`}
-            </Badge>
-          )}
-          {data.comment && data?.team && data.team.length > 0 && (
-            <Badge
-              size="sm"
-              color="green-emeraude"
-              className="fr-mr-1w fr-mb-1w status"
-            >
-              {`commenté par ${data.team[0]}`}
-            </Badge>
-          )}
-          {data.type && (
-            <Badge
-              size="sm"
-              color={BadgeColor({ type: data.type })}
-              className="fr-mr-1w fr-mb-1w status"
-            >
-              {data.type}
-            </Badge>
-          )}
-        </Col>
-        <Text size="sm">
-          <i className="date">
-            Reçu le {new Date(data.created_at).toLocaleDateString()}
-          </i>
-        </Text>
-      </Row>
-      <Row>
-        <Col>
-          <Text size="sm" bold className="name">
-            {data.name}
-          </Text>
-          <Text size="sm">
-            <i className="message">
-              <HighlightedMessage
-                message={
-                  data.message.length > 70
-                    ? `${data.message.slice(0, 300)}...`
-                    : data.message
-                }
-                highlightedQuery={highlightedQuery}
-              />
-            </i>
-          </Text>
-        </Col>
-      </Row>
-    </Container>
-  );
-
-  return (
-    <AccordionGroup>
-      <Accordion title={renderAccordion}>
-        {!data.comment && (
-          <Notice type="info" closeMode={"disallow"} className="fr-mb-1w">
-            Aucune réponse apportée à ce message pour l'instant
-          </Notice>
-        )}
-        <ContributorInfo
-          data={data}
-          highlightedQuery={highlightedQuery}
-          refetch={refetch}
-        />
-        <StaffActions refetch={refetch} data={data} />
-      </Accordion>
-    </AccordionGroup>
-  );
-};
-
-export default ContributionItem;
diff --git a/src/pages/contribution-page/contribution-item.tsx b/src/pages/contribution-page/contribution-item.tsx
new file mode 100644
index 0000000..5bd0deb
--- /dev/null
+++ b/src/pages/contribution-page/contribution-item.tsx
@@ -0,0 +1,85 @@
+import React from "react";
+import {
+  Badge,
+  Col,
+  Container,
+  Row,
+  Text,
+  Notice,
+  Title,
+} from "@dataesr/dsfr-plus";
+import ContributorInfo from "./contributor-info";
+import StaffActions from "./staff-action";
+import { Contribution } from "../../types";
+import { BadgeColor } from "./utils";
+import "./styles.scss";
+
+interface ContributionItemProps {
+  data: Contribution;
+  highlightedQuery: string;
+  refetch: () => void;
+}
+const ContributionItem: React.FC<ContributionItemProps> = ({
+  data,
+  highlightedQuery,
+  refetch,
+}) => {
+  return (
+    <Container fluid>
+      <div>
+        {data?.tags?.length > 0 && (
+          <Badge size="sm" color="purple-glycine" className="fr-mr-1w fr-mb-1w">
+            {data.tags.join(", ")}
+          </Badge>
+        )}
+        <Badge size="sm" color="purple-glycine" className="fr-mr-1w fr-mb-1w">
+          {data?.status}
+        </Badge>
+        {data?.responseFrom && (
+          <Badge size="sm" color="blue-ecume" className="fr-mr-1w fr-mb-1w">
+            {`Réponse envoyée par ${data.responseFrom}`}
+          </Badge>
+        )}
+        {data?.comment && data?.team?.length > 0 && (
+          <Badge size="sm" color="green-emeraude" className="fr-mr-1w fr-mb-1w">
+            {`Commenté par ${data.team[0]}`}
+          </Badge>
+        )}
+        {data?.type && (
+          <Badge
+            size="sm"
+            color={BadgeColor({ type: data.type })}
+            className="fr-mr-1w fr-mb-1w"
+          >
+            {data.type}
+          </Badge>
+        )}
+      </div>
+      <Row>
+        <Col md="12">
+          <Title look="h5">{data?.name}</Title>
+          {!data?.comment && (
+            <Notice type="info" closeMode="disallow" className="fr-mb-2w">
+              Aucune réponse apportée à ce message pour l'instant
+            </Notice>
+          )}
+        </Col>
+        <Text size="sm" bold>
+          <i>Reçu le {new Date(data?.created_at).toLocaleDateString()}</i>
+        </Text>
+      </Row>
+      <Row>
+        <Col>
+          <ContributorInfo
+            data={data}
+            highlightedQuery={highlightedQuery}
+            refetch={refetch}
+          />
+          <StaffActions refetch={refetch} data={data} />
+        </Col>
+      </Row>
+    </Container>
+  );
+};
+
+export default ContributionItem;
diff --git a/src/pages/contribution-page/contributor-summary.tsx b/src/pages/contribution-page/contributor-summary.tsx
new file mode 100644
index 0000000..ec1d10c
--- /dev/null
+++ b/src/pages/contribution-page/contributor-summary.tsx
@@ -0,0 +1,58 @@
+import React from "react";
+import { Badge, SideMenu, SideMenuItem, Text } from "@dataesr/dsfr-plus";
+import { Contribution } from "../../types";
+
+interface ContributorSummaryProps {
+  contributions: Contribution[];
+  onSelectContribution: (id: string) => void;
+}
+
+const ContributorSummary: React.FC<ContributorSummaryProps> = ({
+  contributions,
+  onSelectContribution,
+}) => {
+  const handleClick = (id: string) => {
+    onSelectContribution(id);
+    window.scrollTo({ top: 200, behavior: "smooth" });
+  };
+
+  return (
+    <SideMenu title="Contributeurs" sticky fullHeight>
+      {contributions.map((contribution) => (
+        <SideMenuItem
+          key={contribution.id}
+          title={
+            <div>
+              {contribution?.status && (
+                <Badge
+                  size="sm"
+                  color="purple-glycine"
+                  className="fr-mr-1w fr-mb-1w"
+                >
+                  {contribution.status}
+                </Badge>
+              )}
+              {contribution?.tags?.length > 0 && (
+                <Badge
+                  size="sm"
+                  color="purple-glycine"
+                  className="fr-mr-1w fr-mb-1w"
+                >
+                  {contribution.tags.join(", ")}
+                </Badge>
+              )}
+              <Text size="sm">{contribution.name}</Text>
+              <Text size="sm" className="fr-text--italic">
+                {new Date(contribution.created_at).toLocaleDateString()}
+              </Text>
+            </div>
+          }
+          defaultExpanded={false}
+          onClick={() => handleClick(contribution._id)}
+        />
+      ))}
+    </SideMenu>
+  );
+};
+
+export default ContributorSummary;
diff --git a/src/pages/contribution-page/index.tsx b/src/pages/contribution-page/index.tsx
index 60c9423..4de6f97 100644
--- a/src/pages/contribution-page/index.tsx
+++ b/src/pages/contribution-page/index.tsx
@@ -1,31 +1,30 @@
-import { useState, useEffect } from "react";
-
-import { Contribution, ContributionPageProps } from "../../types";
+import React, { useState, useEffect } from "react";
 import { useLocation } from "react-router-dom";
-import BottomPaginationButtons from "../../components/pagination/bottom-buttons";
-import Selectors from "../../components/selectors";
-
-import TopPaginationButtons from "../../components/pagination/top-buttons";
 import {
   Col,
   Container,
   Row,
-  SearchBar,
   Text,
   Title,
+  SearchBar,
 } from "@dataesr/dsfr-plus";
-import ContributionItem from "./contribution-card";
 import ContributionData from "../../api/contribution-api/getData";
 import { buildURL } from "../../api/utils/buildURL";
+import { Contribution, ContributionPageProps } from "../../types";
+import BottomPaginationButtons from "../../components/pagination/bottom-buttons";
+import TopPaginationButtons from "../../components/pagination/top-buttons";
+import Selectors from "../../components/selectors";
+import ContributionItem from "./contribution-item";
+import ContributorSummary from "./contributor-summary";
 
 const ContributionPage: React.FC<ContributionPageProps> = () => {
-  const [reload] = useState(0);
   const [sort, setSort] = useState("DESC");
   const [status, setStatus] = useState("new");
   const [query, setQuery] = useState("");
   const [page, setPage] = useState(1);
   const [searchInMessage, setSearchInMessage] = useState(false);
   const [highlightedQuery, setHighlightedQuery] = useState("");
+  const [selectedContribution, setSelectedContribution] = useState<string>("");
 
   const location = useLocation();
 
@@ -46,31 +45,30 @@ const ContributionPage: React.FC<ContributionPageProps> = () => {
     window.history.pushState({}, "", newURL);
   }, [page, query, searchInMessage]);
 
-  useEffect(() => {
-    setPage(1);
-  }, [reload, location.pathname]);
-
-  useEffect(() => {
-    if (
-      location.pathname.includes("contributionPage") ||
-      location.pathname.includes("contact")
-    ) {
-      setSearchInMessage(false);
-    }
-  }, [location.pathname]);
   const url = buildURL(location, sort, status, query, page, searchInMessage);
   const { data, isLoading, isError, refetch } = ContributionData(url);
 
   const meta = (data as { meta: any })?.meta;
-  const maxPage = meta ? Math.ceil(meta?.total / 10) : 1;
-  const contrib: Contribution[] = (data as { data: Contribution[] })?.data;
+  const maxPage = meta ? Math.ceil(meta.total / 10) : 1;
+  const contributions: Contribution[] = (data as { data: Contribution[] })
+    ?.data;
+
+  useEffect(() => {
+    if (contributions && contributions.length > 0) {
+      setSelectedContribution(contributions[0]._id);
+    }
+  }, [contributions]);
 
   const handleSearch = (value: string) => {
     setQuery(value.trim());
     setHighlightedQuery(value.trim());
   };
 
-  const filteredContributions = contrib?.filter((contribution) => {
+  const onSelectContribution = (id: string) => {
+    setSelectedContribution(id);
+  };
+
+  const filteredContributions = contributions?.filter((contribution) => {
     const nameMatches = contribution.name
       .toLowerCase()
       .includes(query.toLowerCase());
@@ -86,24 +84,25 @@ const ContributionPage: React.FC<ContributionPageProps> = () => {
   if (isLoading)
     return (
       <Container className="fr-my-5w">
-        <Text>Chargement</Text>
+        <Text>Chargement...</Text>
       </Container>
     );
+
   if (isError)
     return (
       <Container className="fr-my-5w">
-        <Text>Erreur</Text>
+        <Text>Erreur lors du chargement des données.</Text>
       </Container>
     );
 
   return (
     <Container className="fr-my-5w">
+      <Title as="h1">
+        {location.pathname.includes("contributionpage")
+          ? "Contribution par objets"
+          : "Contribution via formulaire"}
+      </Title>
       <Row gutters className="fr-mb-3w">
-        {location.pathname.includes("contributionpage") ? (
-          <Title as="h1">Contribution par objets</Title>
-        ) : (
-          <Title as="h1">Contribution via formulaire</Title>
-        )}
         <Col md="8" xs="12">
           <SearchBar
             className="fr-mb-1w"
@@ -128,13 +127,26 @@ const ContributionPage: React.FC<ContributionPageProps> = () => {
           />
         </Col>
       </Row>
-      {filteredContributions?.map((contribution) => (
-        <ContributionItem
-          data={contribution}
-          refetch={refetch}
-          highlightedQuery={highlightedQuery}
-        />
-      ))}
+      <Row>
+        <Col md="4">
+          <ContributorSummary
+            contributions={filteredContributions}
+            onSelectContribution={onSelectContribution}
+          />
+        </Col>
+        <Col>
+          {filteredContributions && filteredContributions.length > 0 && (
+            <ContributionItem
+              key={selectedContribution}
+              data={filteredContributions.find(
+                (contribution) => contribution._id === selectedContribution
+              )}
+              refetch={refetch}
+              highlightedQuery={highlightedQuery}
+            />
+          )}
+        </Col>
+      </Row>
       <BottomPaginationButtons
         page={page}
         maxPage={maxPage}
diff --git a/src/pages/contribution-page/message-preview.tsx b/src/pages/contribution-page/message-preview.tsx
index 4f60291..dbd859d 100644
--- a/src/pages/contribution-page/message-preview.tsx
+++ b/src/pages/contribution-page/message-preview.tsx
@@ -1,4 +1,4 @@
-import { Button, Col, Link, Row, Text } from "@dataesr/dsfr-plus";
+import { Button, Col, Container, Link, Row, Text } from "@dataesr/dsfr-plus";
 import type { Contribution } from "../../types";
 import HighlightedMessage from "../../components/highlighted-message";
 import { useLocation } from "react-router-dom";
@@ -43,176 +43,199 @@ const MessagePreview = ({
   const handleCloseModal = () => {
     setShowModal(false);
   };
-
   return (
     <>
-      <EditModal
-        refetch={refetch}
-        isOpen={showModal}
-        onClose={handleCloseModal}
-        data={data}
-      />
-      <Row className="fr-mb-2w">
-        <Button onClick={handleOpenModal}>Editer la contribution</Button>
-      </Row>
-      {data?.comment && (
-        <Row className="fr-grid-row--center">
-          <Col md="8" className="comment">
-            <Text size="sm">
-              Commentaire ({data?.team ? data.team[0] : ""}){" "}
-            </Text>
-            <Text size="sm">{data?.comment}</Text>
-          </Col>
-        </Row>
-      )}
-      <Row className={contributorInfoClassName}>
-        {data.id && (
-          <Col md="4">
-            <Text
-              size="sm"
-              style={{ cursor: "pointer" }}
-              onClick={() => copyToClipboard(data.id, "ID copié")}
-              className={
-                data.type === "structure"
-                  ? "fr-icon-building-line"
-                  : "fr-icon-user-line"
-              }
-            >
-              ID de l'objet concerné: {data.id}
-              {copySuccess === "ID copié" && (
-                <span
-                  style={{
-                    color: "white",
-                    backgroundColor: "#efcb3a",
-                    marginLeft: "10px",
-                    padding: "2px 5px",
-                    borderRadius: "5px",
-                    fontSize: "0.8em",
-                  }}
+      <Container fluid className={contributorInfoClassName}>
+        <div>
+          <Row gutters>
+            {data?.id && (
+              <Col>
+                <Text
+                  bold
+                  size="sm"
+                  style={{ cursor: "pointer" }}
+                  onClick={() => copyToClipboard(data.id, "ID copié")}
+                  className={
+                    data.type === "structure"
+                      ? "fr-icon-building-line"
+                      : "fr-icon-user-line"
+                  }
+                >
+                  ID de l'objet concerné: {data.id}
+                  {copySuccess === "ID copié" && (
+                    <span
+                      style={{
+                        color: "white",
+                        backgroundColor: "#efcb3a",
+                        marginLeft: "10px",
+                        padding: "2px 5px",
+                        borderRadius: "5px",
+                        fontSize: "0.8em",
+                      }}
+                    >
+                      {copySuccess}
+                    </span>
+                  )}
+                </Text>
+              </Col>
+            )}
+            <Col>
+              <Text size="sm" bold>
+                {data?.name ? `Nom: ${data.name}` : "Nom non renseigné"}
+              </Text>
+            </Col>
+          </Row>
+          {data?.email && (
+            <Row>
+              <Col>
+                <Text
+                  bold
+                  size="sm"
+                  style={{ cursor: "pointer" }}
+                  onClick={() => copyToClipboard(data.email, "Email copié")}
                 >
-                  {copySuccess}
-                </span>
+                  Email: {data.email}
+                  {copySuccess === "Email copié" && (
+                    <span
+                      style={{
+                        color: "white",
+                        backgroundColor: "#efcb3a",
+                        marginLeft: "10px",
+                        padding: "2px 5px",
+                        borderRadius: "5px",
+                        fontSize: "0.8em",
+                      }}
+                    >
+                      {copySuccess}
+                    </span>
+                  )}
+                </Text>
+              </Col>
+            </Row>
+          )}
+          <Row>
+            <Col>
+              {data?.organisation ? (
+                <Text size="sm" bold>
+                  Organisation: {data.organisation}
+                </Text>
+              ) : (
+                <Text size="sm" bold>
+                  Organisation non renseignée
+                </Text>
+              )}
+            </Col>
+            <Col>
+              {data?.fonction ? (
+                <Text size="sm" bold>
+                  Fonction: {data.fonction}
+                </Text>
+              ) : (
+                <Text size="sm" bold>
+                  Fonction non renseignée
+                </Text>
               )}
-            </Text>
-            {data.team && data.team.length > 0 && (
-              <Text size="sm">
+            </Col>
+          </Row>
+          <Col>
+            {data?.team && data?.team?.length > 0 && (
+              <Text size="sm" bold>
                 Traité par : {data?.team[0]} le{" "}
                 {new Date(data.modified_at).toLocaleDateString()}
               </Text>
             )}
-            {data.type === "structures" && (
-              <>
-                <Link
-                  size="sm"
-                  target="_blank"
-                  className="fr-footer__top-link"
-                  href={`https://scanr.enseignementsup-recherche.gouv.fr/entite/${data.id}`}
-                >
-                  Sur scanR
-                </Link>
-                <br />
-                <Link
-                  size="sm"
-                  target="_blank"
-                  className="fr-footer__top-link"
-                  href={`http://185.161.45.213/ui/organizations/${data.id}`}
-                >
-                  Sur dataESR
-                </Link>
-              </>
-            )}
-            {data.type === "publications" && (
+          </Col>
+          <Col>
+            {data?.comment && (
               <>
-                <Link
-                  size="sm"
-                  target="_blank"
-                  className="fr-footer__top-link"
-                  href={`https://scanr.enseignementsup-recherche.gouv.fr/publication/${data.id}`}
-                >
-                  Sur scanR
-                </Link>
-                <br />
-                <Link
-                  size="sm"
-                  target="_blank"
-                  className="fr-footer__top-link"
-                  href={`http://185.161.45.213/ui/publications/${data.id}`}
-                >
-                  Sur dataESR
-                </Link>
+                <Text size="sm" bold>
+                  Commentaire ({data?.team ? data.team[0] : ""}){" "}
+                </Text>
+                <Text size="sm">{data?.comment}</Text>
               </>
             )}
-            {data.type === "persons" && (
-              <div>
-                <Link
-                  size="sm"
-                  target="_blank"
-                  className="fr-footer__top-link"
-                  href={`https://scanr.enseignementsup-recherche.gouv.fr/authors/${data.id}`}
-                >
-                  Sur scanR
-                </Link>
-                <br />
-                <Link
-                  size="sm"
-                  target="_blank"
-                  className="fr-footer__top-link"
-                  href={`http://185.161.45.213/ui/persons/${data.id}`}
-                >
-                  Sur dataEsr
-                </Link>
-              </div>
-            )}
           </Col>
-        )}
-        <Col md="4">
-          <Text size="sm">
-            {data.name ? `Nom: ${data.name}` : "Nom non renseigné"}
-          </Text>
-          {data.email && (
-            <Text
-              size="sm"
-              style={{ cursor: "pointer" }}
-              onClick={() => copyToClipboard(data.email, "Email copié")}
-            >
-              Email: {data.email}
-              {copySuccess === "Email copié" && (
-                <span
-                  style={{
-                    color: "white",
-                    backgroundColor: "#efcb3a",
-                    marginLeft: "10px",
-                    padding: "2px 5px",
-                    borderRadius: "5px",
-                    fontSize: "0.8em",
-                  }}
-                >
-                  {copySuccess}
-                </span>
-              )}
-            </Text>
+          {data?.type === "structures" && (
+            <>
+              <Link
+                size="sm"
+                target="_blank"
+                className="fr-footer__top-link"
+                href={`https://scanr.enseignementsup-recherche.gouv.fr/entite/${data.id}`}
+              >
+                Sur scanR
+              </Link>
+              <br />
+              <Link
+                size="sm"
+                target="_blank"
+                className="fr-footer__top-link"
+                href={`http://185.161.45.213/ui/organizations/${data.id}`}
+              >
+                Sur dataESR
+              </Link>
+            </>
           )}
-        </Col>
-        <Col md="4" className="contributorInfo">
-          {data.organisation ? (
-            <Text size="sm">Organisation: {data.organisation}</Text>
-          ) : (
-            <Text size="sm">Organisation non renseignée</Text>
+          {data?.type === "publications" && (
+            <>
+              <Link
+                size="sm"
+                target="_blank"
+                className="fr-footer__top-link"
+                href={`https://scanr.enseignementsup-recherche.gouv.fr/publication/${data.id}`}
+              >
+                Sur scanR
+              </Link>
+              <br />
+              <Link
+                size="sm"
+                target="_blank"
+                className="fr-footer__top-link"
+                href={`http://185.161.45.213/ui/publications/${data.id}`}
+              >
+                Sur dataESR
+              </Link>
+            </>
           )}
-          {data.fonction ? (
-            <Text size="sm">Fonction: {data.fonction}</Text>
-          ) : (
-            <Text size="sm">Fonction non renseignée</Text>
+          {data?.type === "persons" && (
+            <div>
+              <Link
+                size="sm"
+                target="_blank"
+                className="fr-footer__top-link"
+                href={`https://scanr.enseignementsup-recherche.gouv.fr/authors/${data.id}`}
+              >
+                Sur scanR
+              </Link>
+              <br />
+              <Link
+                size="sm"
+                target="_blank"
+                className="fr-footer__top-link"
+                href={`http://185.161.45.213/ui/persons/${data.id}`}
+              >
+                Sur dataEsr
+              </Link>
+            </div>
           )}
-        </Col>
-      </Row>
+        </div>
+      </Container>
       <Row className={contributorMessageClassName}>
         <Text size="sm">
           <HighlightedMessage
-            message={data.message}
+            message={data?.message}
             highlightedQuery={highlightedQuery}
           />
         </Text>
+        <EditModal
+          refetch={refetch}
+          isOpen={showModal}
+          onClose={handleCloseModal}
+          data={data}
+        />
+      </Row>
+      <Row className="fr-mb-2w">
+        <Button onClick={handleOpenModal}>Editer la contribution</Button>
       </Row>
     </>
   );
diff --git a/src/pages/contribution-page/styles.scss b/src/pages/contribution-page/styles.scss
index f935ab2..1b0006c 100644
--- a/src/pages/contribution-page/styles.scss
+++ b/src/pages/contribution-page/styles.scss
@@ -3,31 +3,29 @@
   border: 1px solid var(--background-alt-green-emeraude);
   border-radius: 10px;
   margin-bottom: 5px;
-  padding: 5px;
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
 }
+
 .contributorSideMessage {
   background-color: var(--background-alt-green-emeraude);
   border: 1px solid var(--background-alt-green-emeraude);
   border-radius: 10px;
   margin-bottom: 5px;
   margin-right: 250px;
-  padding: 5px;
-}
-.contributorSideContactInfo {
-  background-color: var(--background-alt-brown-caramel);
-  border: 1px solid var(--background-alt-brown-caramel);
-  border-radius: 10px;
-  margin-bottom: 5px;
-  padding: 5px;
+  padding: 15px;
 }
+
 .contributorSideContactMessage {
   background-color: var(--background-alt-brown-caramel);
   border: 1px solid var(--background-alt-brown-caramel);
   border-radius: 10px;
   margin-bottom: 5px;
   margin-right: 250px;
-  padding: 50px;
+  padding: 15px;
 }
+
 .staffSide {
   text-align: right;
   background-color: var(--background-alt-pink-macaron);
@@ -35,6 +33,7 @@
   padding: 20px;
   margin-left: 140px;
 }
+
 .staffSideContact {
   text-align: right;
   background-color: var(--background-alt-blue-cumulus);
@@ -53,10 +52,12 @@
 .accordion {
   width: 100%;
 }
+
 .contributorInfo {
   width: 100%;
   text-align: right;
 }
+
 .comment {
   display: flex;
   align-items: center;
diff --git a/src/types/index.ts b/src/types/index.ts
index d79dcce..8b024d8 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,29 +1,23 @@
-export type Contribution = {
-  mailSentDate: string | number | Date;
-  mailSent: any;
-  responseByMail: string;
-  responseFrom: string;
-  modified_at: string;
-  team: any;
+export interface Contribution {
   _id: string;
-  status: string;
-  tags: Array<string>;
-  message: string;
-  created_at: string | number | Date;
-  fonction: string;
-  organisation: string;
-  email: string;
+  id: string;
   name: string;
+  email: string;
+  phone: string;
+  tags: string[];
+  status: string;
+  responseFrom?: string;
+  comment?: string;
+  team?: string[];
   type: string;
-  id: string;
-  comment: string;
-  data: ContributionDataType[];
-  meta: {
-    total: number;
-  };
-  highlightedQuery: string;
-};
-
+  created_at: string;
+  message: string;
+  organisation?: string;
+  fonction?: string;
+  modified_at?: string;
+  mailSentDate?: string;
+  mailSent?: string;
+}
 export type ContributionDataType = {
   responseFrom: string;
   idref: any;
@@ -57,7 +51,7 @@ export type MessagePreviewProps = {
 
 export type Contribute_Production = {
   mailSentDate: string | number | Date;
-  mailSent: any;
+  mailSent: string;
   responseByMail: string;
   responseFrom: string;
   tag: string;
@@ -99,3 +93,8 @@ export type Inputs = {
   idRef: string;
   comment: string;
 };
+export interface PersonInfo {
+  name: string;
+  email: string;
+  phone: string;
+}