fix(modal): add a graph, team comment, and change data for a state

src/api/send-mail/index.tsx

@@ -15,7 +15,7 @@ function EmailSender({
   const [userResponse, setUserResponse] = useState("");
   let basePath = "contact";
 
-  if (window.location.pathname.includes("contribute")) {
+  if (window.location.pathname.includes("contributionpage")) {
     basePath = "contribute";
   } else if (window.location.pathname.includes("apioperations")) {
     basePath = "contribute_productions";
@@ -33,15 +33,15 @@ function EmailSender({
     const dataForBrevo = {
       sender: {
         email: "[email protected]",
-        name: "Debache ",
+        name: `${selectedProfile} de l'équipe scanR`,
       },
       to: [
         {
           email: "[email protected]",
           name: "Mihoub mihoub",
         },
       ],
-      subject: `${selectedProfile} de l'équipe scanR`,
+      subject: `Réponse à votre contribution`,
       htmlContent: userResponse,
     };
 
@@ -59,7 +59,8 @@ function EmailSender({
     }
 
     const dataForScanR = {
-      comment: userResponse,
+      mailSent: userResponse,
+      mailSentDate: new Date(),
       responseFrom: selectedProfile,
     };
 
@@ -99,7 +100,7 @@ function EmailSender({
             onClick={sendEmail}
             size="sm"
           >
-            {contribution.comment ? "Renvoyer un mail" : "Répondre"}
+            {contribution.mailSent ? "Renvoyer un mail" : "Répondre"}
           </Button>
         </Col>
       </Row>

src/components/edit-modal/index.tsx

@@ -26,6 +26,7 @@ const EditModal: React.FC<EditModalProps> = ({ isOpen, data, onClose }) => {
     status: data.status,
     tag: "",
     idRef: "",
+    comment: "",
   });
 
   useEffect(() => {
@@ -34,6 +35,7 @@ const EditModal: React.FC<EditModalProps> = ({ isOpen, data, onClose }) => {
       status: "treated",
       tag: "",
       idRef: "",
+      comment: "",
     });
   }, [data, user]);
 
@@ -48,6 +50,10 @@ const EditModal: React.FC<EditModalProps> = ({ isOpen, data, onClose }) => {
     const newTag = event.target.value;
     setInputs((prevInputs) => ({ ...prevInputs, tag: newTag }));
   };
+  const handleCommentChange = (event) => {
+    const newComment = event.target.value;
+    setInputs((prevInputs) => ({ ...prevInputs, comment: newComment }));
+  };
 
   const handleIdRefChange = (event) => {
     const newIdref = event.target.value;
@@ -56,7 +62,7 @@ const EditModal: React.FC<EditModalProps> = ({ isOpen, data, onClose }) => {
 
   let basePath = "contact";
 
-  if (window.location.pathname.includes("contribute")) {
+  if (window.location.pathname.includes("contributionpage")) {
     basePath = "contribute";
   } else if (window.location.pathname.includes("apioperations")) {
     basePath = "contribute_productions";
@@ -73,6 +79,7 @@ const EditModal: React.FC<EditModalProps> = ({ isOpen, data, onClose }) => {
             status: inputs.status,
             tag: inputs.tag,
             idref: inputs.idRef,
+            comment: inputs.comment,
           }),
         }
       );
@@ -140,6 +147,21 @@ const EditModal: React.FC<EditModalProps> = ({ isOpen, data, onClose }) => {
             />
           </Col>
         </Row>
+        <Row gutters>
+          <Col>
+            <TextArea
+              label={
+                data.comment
+                  ? "Mettre à jour le commentaire pour l'équipe"
+                  : "Ajouter un commentaire pour l'équipe"
+              }
+              maxLength={6}
+              hint="Ce commentaire ne sera lu que par les membres de l'équipe"
+              value={inputs.comment}
+              onChange={handleCommentChange}
+            />
+          </Col>
+        </Row>
         <Col className="fr-mt-5w">
           <Button onClick={handleSubmit} variant="secondary" size="sm">
             <Title as="h3">Enregistrer</Title>

src/components/graphs/comment-by-team.tsx

@@ -0,0 +1,87 @@
+import Highcharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
+import useGetContributionData from "../../api/contribution-api/useGetObjectContributeData";
+import { Contribution } from "../../types";
+import { contactUrl, contributionUrl } from "../../config/api";
+import { useState } from "react";
+import { Button, Col } from "@dataesr/dsfr-plus";
+
+const CommentsGraphByTeamMember = () => {
+  const [filter, setFilter] = useState("contributions");
+  const url = filter === "object" ? contributionUrl : contactUrl;
+  const { data, isLoading, isError } = useGetContributionData(url, 0);
+
+  const contributions = (data as { data: Contribution[] })?.data;
+
+  if (isLoading) {
+    return <div>Chargement...</div>;
+  }
+
+  if (isError) {
+    return <div>Une erreur s'est produite</div>;
+  }
+
+  if (!Array.isArray(contributions)) {
+    return <div>Les données ne sont pas disponibles</div>;
+  }
+
+  const counts = contributions.reduce((acc, curr) => {
+    if (curr.comment && curr.team) {
+      acc[curr.team] = (acc[curr.team] || 0) + 1;
+    }
+    return acc;
+  }, {} as { [key: string]: number });
+
+  const chartData = Object.entries(counts).map(([name, y]) => ({
+    name,
+    y,
+  }));
+
+  const options = {
+    chart: {
+      type: "column",
+    },
+    title: {
+      text: "Nombre de commentaires par membre de l'équipe",
+    },
+    xAxis: {
+      type: "category",
+    },
+    yAxis: {
+      title: {
+        text: "Nombre de commentaires",
+      },
+    },
+    series: [
+      {
+        name: "Membre de l'équipe",
+        data: chartData,
+      },
+    ],
+  };
+
+  return (
+    <>
+      <Col className="fr-mb-3w">
+        <Button
+          className="fr-mr-1w"
+          size="sm"
+          variant={filter === "object" ? "primary" : "secondary"}
+          onClick={() => setFilter("object")}
+        >
+          Par objet
+        </Button>
+        <Button
+          size="sm"
+          variant={filter === "contact" ? "primary" : "secondary"}
+          onClick={() => setFilter("contact")}
+        >
+          Via formulaire contact
+        </Button>
+      </Col>
+      <HighchartsReact highcharts={Highcharts} options={options} />
+    </>
+  );
+};
+
+export default CommentsGraphByTeamMember;

src/pages/api-operation-page/index.tsx

@@ -22,6 +22,7 @@ const ContributionPage: React.FC<ContributionPageProps> = () => {
   const [status, setStatus] = useState("new");
   const [query, setQuery] = useState("");
   const [page, setPage] = useState(1);
+  const [data, setData] = useState(null);
 
   const location = useLocation();
 
@@ -49,16 +50,21 @@ const ContributionPage: React.FC<ContributionPageProps> = () => {
     }
   }, [location.pathname]);
 
-  const { data, isLoading, isError } = useGetContributionData(
-    buildURL(sort, status, query, page),
-    reload
-  );
+  const {
+    isLoading,
+    isError,
+    data: fetchedData,
+  } = useGetContributionData(buildURL(sort, status, query, page), reload);
+
+  useEffect(() => {
+    setData(fetchedData);
+  }, [fetchedData]);
 
-  const meta = (data as { meta: any }).meta;
+  const meta = (data as { meta: any })?.meta;
   const maxPage = meta ? Math.ceil(meta?.total / 10) : 1;
   const contrib: Contribute_Production[] = (
     data as { data: Contribute_Production[] }
-  ).data;
+  )?.data;
 
   const handleSearch = (value: string) => {
     setQuery(value.trim());

src/pages/api-operation-page/message-preview.tsx

@@ -25,6 +25,14 @@ const MessagePreview = ({ data }: { data: Contribute_Production }) => {
   };
   return (
     <Container fluid>
+      {data.comment && (
+        <Row className="fr-grid-row--center">
+          <Col md="8" className="comment">
+            <Text size="sm">Commentaire de l'équipe ({data.team[0]}) </Text>
+            <Text size="sm">{data.comment}</Text>
+          </Col>
+        </Row>
+      )}
       <EditModal isOpen={showModal} onClose={handleCloseModal} data={data} />
       <Row className="contributorProductionSideInfo">
         {data.id && (

src/pages/api-operation-page/staff-production-action.tsx

@@ -1,21 +1,25 @@
-import EmailSender from "../../api/send-mail";
-import type { Contribute_Production } from "../../types";
 import { useState } from "react";
 import { Col, Text } from "@dataesr/dsfr-plus";
 import "./styles.scss";
+import EmailSender from "../../api/send-mail";
+import { Contribute_Production } from "../../types";
 
 const StaffProductionActions = ({ data }: { data: Contribute_Production }) => {
   const [responseScanR, setResponseScanR] = useState(null);
 
   return (
     <>
-      {data?.comment && (
+      {data?.mailSent && (
         <Col className="staffSide">
           <Text size="sm">
-            Réponse apportée par {responseScanR?.responseFrom || data.team[0]}{" "}
-            le {new Date(data?.modified_at).toLocaleDateString()}{" "}
+            {(responseScanR?.responseFrom || data.responseFrom) !== ""
+              ? "Réponse apportée par "
+              : ""}
+            {responseScanR?.responseFrom || data.responseFrom}
+            {" le "}
+            {new Date(data?.mailSentDate).toLocaleDateString()}{" "}
           </Text>
-          <Text>{responseScanR?.comment || data.comment}</Text>
+          <Text>{responseScanR?.mailSent || data.mailSent}</Text>
         </Col>
       )}
       <EmailSender contribution={data} setResponseScanR={setResponseScanR} />

src/pages/contribution-page/message-preview.tsx

@@ -44,6 +44,14 @@ const MessagePreview = ({
   return (
     <>
       <EditModal isOpen={showModal} onClose={handleCloseModal} data={data} />
+      {data.comment && (
+        <Row className="fr-grid-row--center">
+          <Col md="8" className="test">
+            <Text size="sm">Commentaire de l'équipe ({data.team[0]}) </Text>
+            <Text size="sm">{data.comment}</Text>
+          </Col>
+        </Row>
+      )}
       <Row className={contributorInfoClassName}>
         {data.id && (
           <Col

src/pages/contribution-page/staff-action.tsx

@@ -12,13 +12,16 @@ const StaffActions = ({ data }: { data: Contribution }) => {
     : "staffSideContact";
   return (
     <>
-      {data?.comment && (
+      {data?.mailSent && (
         <Col className={contributorClassName}>
           <Text size="sm">
-            Réponse apportée par {responseScanR?.responseFrom || data.team[0]}{" "}
-            le {new Date(data?.modified_at).toLocaleDateString()}{" "}
+            Réponse apportée par{" "}
+            {responseScanR?.responseFrom || data.responseFrom} le{" "}
+            {new Date(
+              responseScanR?.mailSentData || data?.mailSentDate
+            ).toLocaleDateString()}{" "}
           </Text>
-          <Text>{responseScanR?.comment || data.comment}</Text>
+          <Text>{responseScanR?.mailSent || data.mailSent}</Text>
         </Col>
       )}
       <EmailSender contribution={data} setResponseScanR={setResponseScanR} />

src/pages/contribution-page/styles.scss

@@ -57,3 +57,10 @@
   width: 100%;
   text-align: right;
 }
+.comment {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  background-color: var(--background-alt-blue-cumulus);
+  margin-bottom: 20px;
+}

src/pages/home/index.tsx

@@ -8,6 +8,7 @@ import ContributionsGraphByTypes from "../../components/graphs/by-types";
 import AdminTreatmentGraph from "../../components/graphs/treatment-by-admin";
 import AdminResponseGraph from "../../components/graphs/response-by-admin";
 import ContributionsGraphByProductions from "../../components/graphs/by-missing-productions";
+import CommentsGraphByTeamMember from "../../components/graphs/comment-by-team";
 
 const Home = () => {
   return (
@@ -49,6 +50,9 @@ const Home = () => {
         <Col md="6">
           <ContributionsGraphByProductions />
         </Col>
+        <Col md="6">
+          <CommentsGraphByTeamMember />
+        </Col>
       </Row>
     </Container>
   );

src/types/index.ts

@@ -1,4 +1,6 @@
 export type Contribution = {
+  mailSentDate: string | number | Date;
+  mailSent: any;
   responseByMail: string;
   responseFrom: string;
   modified_at: string;
@@ -54,6 +56,10 @@ export type MessagePreviewProps = {
 };
 
 export type Contribute_Production = {
+  mailSentDate: string | number | Date;
+  mailSent: any;
+  responseByMail: string;
+  responseFrom: string;
   tag: string;
   _id: string;
   team: any;